@anyblades/blades 0.28.0-alpha.6 → 0.28.0-alpha.8

package/assets/blades.core.css

@@ -25,13 +25,16 @@ Useful for tables of contents and long lists.
 ```css */
 
 .columns {
+  -moz-columns: 30ch auto;
   columns: 30ch auto; /* 2 cols max for 65ch container */
+}
+
+/* Avoid breaking inside elements, such as nested lists */
 
-  /* Avoid breaking inside elements, such as nested lists */
-  > * {
+.columns > * {
+    -moz-column-break-inside: avoid;
     break-inside: avoid;
   }
-}
 
 /*```
 </details>
@@ -52,8 +55,7 @@ Useful for tables of contents and long lists.
 <!--section--> */
 
 /*
-<!--section:how-->
-<details>How it works:
+<!--section:code-->
 ```css */
 
 .breakout,
@@ -61,18 +63,29 @@ Useful for tables of contents and long lists.
   /* Prepare the container for breakout elements */
   padding-inline: 10%;
   max-width: calc(10% + 65ch + 10%);
+}
+
+/* Breakout direct children only */
 
-  /* Breakout direct children only */
-  & > * {
-    &:is(
+.breakout > *:is(
+      table,
+      pre,
+      figure, video, iframe, canvas,
+      img, picture,
+      
+      .breakout-item,
+      .breakout-item-max
+    ),
+      .breakout-all > *: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: -moz-fit-content;
       width: fit-content;
       min-width: 100%;
       max-width: 125%;
@@ -80,33 +93,31 @@ Useful for tables of contents and long lists.
       transform: translateX(-50%);
     }
 
-    /* Respect img/picture min-width */
-    &:is(img, picture) {
+/* Respect img/picture min-width */
+
+.breakout > *:is(img, picture), .breakout-all > *:is(img, picture) {
       min-width: auto;
     }
 
-    /* Max out the width of the element */
-    &.breakout-item-max {
+/* Max out the width of the element */
+
+.breakout > *.breakout-item-max, .breakout-all > *.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]) {
+.breakout-all > *:is(h2, h3, h4, h5, h6, hr):not([class]) {
     position: relative;
+  }
 
-    &::before {
+.breakout-all > *:is(h2, h3, h4, h5, h6, hr):not([class])::before {
       content: "";
       display: block;
       position: absolute;
       background: gray;
       opacity: 12.5%;
     }
-  }
 
-  &:is(h2, h3, h4, h5, h6):not([class]) {
-    &::before {
+.breakout-all > *:is(h2, h3, h4, h5, h6):not([class])::before {
       width: 10em;
       right: 100%;
       margin-right: 0.8ch;
@@ -116,30 +127,26 @@ Useful for tables of contents and long lists.
       background: linear-gradient(to left, gray, transparent);
     }
 
-    /* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
-    &:where(hr + *) {
-      &::before {
+/* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
+
+.breakout-all > *:is(h2, h3, h4, h5, h6):not([class]):where(hr + *)::before {
         display: none !important;
       }
-    }
-  }
-  &:is(hr) {
+
+.breakout-all > *:is(hr) {
     height: 0.5rem;
     border: none;
     overflow: visible;
+  }
 
-    &::before {
+.breakout-all > *:is(hr)::before {
       width: 100vw;
       left: 50%;
       height: 100%;
       transform: translateX(-50%);
     }
-  }
-}
 
 /*```
-</details>
-
 <!--section:summary-->
 
 The `.breakout` layout allows images, tables, and other figures to automatically extend or bleed beyond their parent container’s width.
@@ -162,18 +169,14 @@ Or table:
 Or code block:
 
 ```html
-<p>
-  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod. Lorem ipsum dolor sit amet consectetur
-  adipisicing elit. Quisquam, quod.
-</p>
+<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.</p>
 ```
 
 Or anything else:
 
 <article class="breakout-item-max" data-theme="dark">
 
-Using `.breakout-item` and `.breakout-item-max` helpers {style=margin:0}
-
+  Using `.breakout-item` and `.breakout-item-max` helpers {style=margin:0}
 </article>
 
 <div><hr></div>
@@ -208,8 +211,9 @@ h4,
 h5,
 h6 {
   position: relative;
+}
 
-  a[href^="#"] {
+h1 a[href^="#"], h2 a[href^="#"], h3 a[href^="#"], h4 a[href^="#"], h5 a[href^="#"], h6 a[href^="#"] {
     position: absolute;
     right: 100%;
     top: 50%;
@@ -219,14 +223,12 @@ h6 {
     text-decoration: none;
     visibility: hidden;
   }
-  @media /* to avoid double-tap on touch devices */ (hover: hover) {
-    &:hover {
-      a[href^="#"] {
+
+@media /* to avoid double-tap on touch devices */ (hover: hover) {
+      h1:hover a[href^="#"], h2:hover a[href^="#"], h3:hover a[href^="#"], h4:hover a[href^="#"], h5:hover a[href^="#"], h6:hover a[href^="#"] {
         visibility: visible;
       }
-    }
   }
-}
 
 /*```
 </details>
@@ -253,31 +255,28 @@ Customize markers using inline `style="--list-marker:..."` on `<ul>/<ol>` or eve
 <details>How it works:
 ```css */
 
-ul,
-ol {
-  &[style*="--list-marker:"] {
+ul[style*="--list-marker:"], ol[style*="--list-marker:"] {
     list-style-type: var(--list-marker);
+  }
 
-    > li {
+ul[style*="--list-marker:"] > li, ol[style*="--list-marker:"] > li {
       list-style-type: inherit;
     }
-  }
 
-  li[style*="--list-marker:"] {
+ul li[style*="--list-marker:"], ol 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) " ";
+
+ul li[data-marker]::marker, ol li[data-marker]::marker {
+    content: attr(data-marker) " "; /* ⚠️ Chrome and Firefox only */
   }
-}
 
 /*```
 </details>
 
 ### Unlist
 
-Helper class to remove list styling at all:
+`.unlist` removes list styling:
 
 <article>
 
@@ -288,73 +287,72 @@ Helper class to remove list styling at all:
 {.unlist .grid style=margin:0}
 </article>
 
+`.unlist-all` also removes styling from all nested lists.
+
 <details>How it works:
 ```css */
 
-ul,
-ol {
-  &.unlist,
-  &.unlist-all,
-  .unlist-all & {
+ul.unlist,
+  ul.unlist-all,
+  .unlist-all ul,
+  ol.unlist,
+  ol.unlist-all,
+  .unlist-all ol {
     padding-inline-start: 0;
+  }
 
-    > li {
+ul.unlist > li, ul.unlist-all > li, .unlist-all ul > li, ol.unlist > li, ol.unlist-all > li, .unlist-all ol > li {
       list-style: none;
     }
-  }
-}
 
 /*```
 </details>
 <!--section--> */
 
 /* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
-<!--section:how-->
-<details>How it works:
+<!--section:code-->
 ```css */
 
-a {
-  /* Use inline flex only if link contains an icon */
-  &:has(> i) {
+/* Use inline flex only if link contains an icon */
+
+a:has(> i) {
     display: inline-flex;
     gap: 0.375ch; /* =3/8 */
     overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
   }
-  > i {
+
+a > i {
     font-style: normal;
     float: left; /*                 ✅ Chrome ❌ Safari */
     text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
+  }
+
+/* Favicons */
 
-    /* Favicons */
-    > img {
+a > i > img {
       height: 1.25em;
       margin-block-start: calc(-0.25em / 2);
       max-width: none; /* to keep ratio safe */
       display: inline-block; /* for Tailwind CSS Typography */
     }
 
-    /* Font Awesome */
-    &[class^="fa-"],
-    &[class*=" fa-"] {
+a > i[class^="fa-"],
+    a > i[class*=" fa-"] {
       line-height: inherit;
       --fa-width: auto;
     }
-    &.fa-lg {
+
+/* Font Awesome */
+
+a > i.fa-lg {
       line-height: normal;
     }
-  }
-}
 
 /*```
-</details>
-
-How we made it: https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237
-
-**PRO** example of automatic favicons for `11ty`: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
-
 <!--section:summary-->
 
-Use *Bl*ades `<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.
+Use *Bl*ades `<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-->
 
@@ -367,12 +365,16 @@ Use *Bl*ades `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome
 | [<i class="fa-brands fa-github fa-lg"></i> Font Awesome icons](#)                     | `<a><i class="fa-..."></i> Text</a>` |
 </article>
 
-Or even:
+Or even for:
 
 <article>
   <a href="#" style="margin: 0 0 0 1rem"><i>🥷</i> very-very-very-very-very-<br>long-multiline-links</a>
 </article>
 
+How we made it: https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237
+
+**PRO** example of automatic favicons for `11ty`: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
+
 <!--section--> */
 
 /* Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss
@@ -384,14 +386,12 @@ Place `<hr>` element inside `<th>` column to expand it horizontally:
 
 <article>
 
-| Column with `<hr>` <hr> | Same column without `<hr>` |
-| --- | --- |
+| Column with `<hr>`<hr> | Same column without `<hr>` | ... {style=width:100%} |
+| --- | --- | --- |
 | (012) 345-6789 | (012) 345-6789 |
-
-{style=max-width:30ch}
 </article>
 
-Living examples of big tables with `<hr>`-expanders:
+Living examples of big tables with `<hr>`-expanders: <!--A-Z-->
 - https://blades.ninja/ai/ide/
 - https://blades.ninja/build-awesome-11ty/starters/
 - https://blades.ninja/css/frameworks/
@@ -400,23 +400,20 @@ Living examples of big tables with `<hr>`-expanders:
 <details>How it works:
 ```css */
 
-table {
-  th {
-    hr {
-      width: 12ch; /* min ~65/12 = ~5 cols */
-      height: 0;
-      margin: 0;
-      visibility: hidden;
+th hr {
+    width: 12ch; /* min ~65/12 = ~5 cols */
+    height: 0;
+    margin: 0;
+    visibility: hidden;
+  }
 
-      &.lg {
-        width: 18ch;
-      }
-      &.x2 {
-        width: 24ch;
-      }
+th hr.lg {
+      width: 18ch;
+    }
+
+th hr.x2 {
+      width: 24ch;
     }
-  }
-}
 
 /*```
 </details>
@@ -429,7 +426,7 @@ table {
 
 | Less | borders |
 | ---- | ------- |
-| more | fun     |
+| More | fun     |
 
 {.borderless}
 </article>
@@ -438,16 +435,13 @@ Living example: https://bladeswitch.com/#minimal-dependencies table
 
 <!--section--> */
 
-table.borderless {
-  th,
-  td {
+table.borderless th,
+  table.borderless td {
     border: none;
   }
-}
 
 /*
-<!--section:how-->
-<details>How it works:
+<!--section:code-->
 ```css */
 
 table.responsive,
@@ -458,6 +452,7 @@ table.responsive,
   transform: translateX(-50%);
 
   /* Let them full-bleed */
+  width: -moz-max-content;
   width: max-content;
   min-width: auto;
   max-width: 100vw;
@@ -467,22 +462,23 @@ table.responsive,
   display: block;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
+}
 
-  th,
-  td {
+table.responsive th,
+  table.responsive td,
+  .breakout > table:not(.does-not-exist) th,
+  .breakout > table:not(.does-not-exist) td,
+  .breakout-all > table:not(.does-not-exist) th,
+  .breakout-all > table:not(.does-not-exist) td {
     padding-inline-start: 0;
   }
-}
 
 /*```
-</details>
-
 `table:not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
 
 <!--section:summary-->
 
 `.responsive` makes a table full-bleed and scroll on mobile, without a need for a redundant wrapper (finally).
-
 Tables inside https://blades.ninja/css/breakout/ are responsive by default.
 
 <!--section:docs-->
@@ -498,7 +494,6 @@ Tables inside https://blades.ninja/css/breakout/ are responsive by default.
 ---
 
 Living examples: <!--A-Z-->
-
 - https://blades.ninja/ai/ide/
 - https://blades.ninja/build-awesome-11ty/starters/
 - https://blades.ninja/css/frameworks/
@@ -513,56 +508,55 @@ Living examples: <!--A-Z-->
 
 The `<pre><code>` blocks are Prism-compatible and support captions via `data-caption="..."` attribute:
 
-```treeview {data-caption="Key Blades CSS files:"}
+```treeview {data-caption="Blades CSS:"}
+./assets/
 ├── blades.core.css     # reusable class-light utilities, unthemed
 ├── blades.theme.css    # minimal opinionated theme
 └── blades.css          # above two together
 ```
-
 <details>How it works:
 ```css */
 
 pre {
   padding: 1rem 1.5rem;
   padding-inline-end: 2rem;
+}
 
-  @media screen and (max-width: 767px) {
-    border-radius: 0;
-  }
+@media (max-width: 767px) {
+
+pre {
+    border-radius: 0
 }
+  }
 
-code {
-  /* Code block caption via data-attr (to display filename, etc.) */
-  &[data-caption] {
-    &::before {
+/* Code block caption via data-attr (to display filename, etc.) */
+
+code[data-caption]::before {
       content: attr(data-caption);
       display: block;
       margin-bottom: 1rem;
       opacity: 50%;
       font-style: italic;
     }
-  }
 
-  &:where(pre > *) {
+code:where(pre > *) {
     padding: 0;
   }
-}
 
 /* Extends https://github.com/PrismJS/prism/blob/master/plugins/treeview/prism-treeview.css */
 
-.token.treeview-part {
-  .entry-line {
+.token.treeview-part .entry-line {
     width: 2.5em !important;
     opacity: 25%;
   }
-  .entry-name:last-child {
+
+.token.treeview-part .entry-name:last-child {
     opacity: 50%;
+  }
 
-    &::before {
+.token.treeview-part .entry-name:last-child::before {
       display: none !important;
     }
-  }
-}
 
 /*```
 </details>
@@ -582,33 +576,53 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
 .has-float-label {
   display: block;
   position: relative;
-  /*
+}
+
+/*
 ```
 Then, we define the default/fallback state (when the float label should be minimized):
 ```css */
-  > span,
-  label {
+
+label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
+  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
+  .has-float-label > span,
+  .has-float-label 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 {
+
+label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
+    opacity: 0;
+  }
+
+label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:-moz-placeholder:not(:focus)::placeholder, .has-float-label *:-moz-placeholder:not(:focus)::placeholder {
     opacity: 0;
   }
-  &:has(*:placeholder-shown:not(:focus)) {
-    > span,
-    label {
+
+label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::placeholder, .has-float-label *:placeholder-shown:not(:focus)::placeholder {
+    opacity: 0;
+  }
+
+label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
+      font-size: inherit;
+      opacity: 50%;
+    }
+
+label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
+    label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
+    .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
+    .has-float-label:has(*:placeholder-shown:not(:focus)) label {
       font-size: inherit;
       opacity: 50%;
     }
-  }
-}
 
 /*
 ```
@@ -640,16 +654,22 @@ Historically, this was not possible: the float label had to be placed after the
 }
 
 .dark-auto {
-  /* Dark color scheme (Auto) */
-  @media (prefers-color-scheme: dark) {
-    filter: var(--blades-dark-filter);
-  }
   /* Dark color scheme (Forced) */
-  &[data-theme="dark"],
-  &:where([data-theme="dark"] *) {
+}
+
+/* Dark color scheme (Auto) */
+
+@media (prefers-color-scheme: dark) {
+
+.dark-auto {
+    filter: var(--blades-dark-filter)
+}
+  }
+
+.dark-auto[data-theme="dark"],
+  .dark-auto:where([data-theme="dark"] *) {
     filter: var(--blades-dark-filter);
   }
-}
 
 /*```
 </details>
@@ -667,11 +687,11 @@ Historically, this was not possible: the float label had to be placed after the
 
 .faded {
   opacity: 50%;
+}
 
-  &:hover {
+.faded:hover {
     opacity: 87.5%;
   }
-}
 
 /*```
 </details>
@@ -679,8 +699,6 @@ Historically, this was not possible: the float label had to be placed after the
 
 /* Fix the scrollbar color when inverted by https://tailwindcss.com/docs/filter-invert */
 
-.invert {
-  ::-webkit-scrollbar {
+.invert ::-webkit-scrollbar {
     filter: invert(1) !important;
   }
-}