@anyblades/blades 3.1.0-beta.4 → 3.1.0-beta.5

package/css/layered/content/icon.css

@@ -0,0 +1,60 @@
+@layer blades {
+/* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
+\3c !--section:code-->
+```css */
+/* Use inline flex only if link contains an icon */
+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: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: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:not(.does-not-exist) > i[class^="fa-"],
+    a:not(.does-not-exist) > i[class*=" fa-"] {
+      line-height: inherit;
+      --fa-width: auto;
+    }
+/* Font Awesome */
+a:not(.does-not-exist) > i.fa-lg {
+      line-height: normal;
+    }
+/*```
+\3c !--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.
+
+\3c !--section:docs-->
+
+<article class="breakout-item">
+
+| Use `<i>`-helper with                                                                 | Clean HTML without `<span>ning`      |
+| ------------------------------------------------------------------------------------- | ------------------------------------ |
+| [<i>🥷</i> Emojis](#)                                                                 | `<a><i>🥷</i> Text</a>`              |
+| [<i>![](https://www.google.com/s2/favicons?domain=any.digital&sz=64)</i> Favicons](#) | `<a><i><img src="..."></i> Text</a>` |
+| [<i class="fa-brands fa-github fa-lg"></i> Font Awesome icons](#)                     | `<a><i class="fa-..."></i> Text</a>` |
+</article>
+
+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
+
+\3c !--section--> */
+
+}

package/css/layered/forms/float-label/core.css

@@ -0,0 +1,103 @@
+@layer blades {
+/*!
+ * Float Label CSS v2 by Blades CSS 🥷🏷️
+ * Copyright 2016–2026 (https://blades.ninja/css/float-label/)
+ * Licensed under MIT
+ */
+/*\3c !--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;
+  /*```
+  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 */
+}
+/*```
+  Then, we define the default/fallback state (when the float label should be minimized):
+  ```css */
+label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) > span,
+  label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) label,
+  .has-float-label > span,
+  .has-float-label label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-size: 75%;
+    cursor: text;
+  }
+label:has(> span):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(> span):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;
+  }
+label:has(> span):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(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ):has(*:-moz-placeholder:not(:focus)) > span, label:has(> span):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(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ):has(*:placeholder-shown:not(:focus)) > span,
+    label:has(> span):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%;
+    }
+/*```
+
+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.
+
+*/
+
+}

package/css/layered/forms/float-label/theme.css

@@ -0,0 +1,110 @@
+@layer blades {
+label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ),
+.has-float-label {
+
+  /* Enlarged state */
+}
+  /* Default/fallback state */
+  label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) > span,
+  label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) label,
+  .has-float-label > span,
+  .has-float-label label {
+    padding-inline-start: calc(1rem + 1px); /* match Pico's padding + border */
+    padding-block-start: 0.25rem;
+    opacity: 75%;
+    transition: all 0.25s;
+  }
+  label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) input,
+  label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) textarea,
+  label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) select,
+  .has-float-label input,
+  .has-float-label textarea,
+  .has-float-label 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 */
+  }
+  label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) input::-moz-placeholder, label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) textarea::-moz-placeholder, label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) select::-moz-placeholder, .has-float-label input::-moz-placeholder, .has-float-label textarea::-moz-placeholder, .has-float-label select::-moz-placeholder {
+      opacity: 100%;
+      -moz-transition: all 0.25s;
+      transition: all 0.25s;
+    }
+  label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) input::placeholder, label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) textarea::placeholder, label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) select::placeholder, .has-float-label input::placeholder, .has-float-label textarea::placeholder, .has-float-label select::placeholder {
+      opacity: 100%;
+      transition: all 0.25s;
+    }
+  label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ):has(*:-moz-placeholder:not(:focus)) > span, label:has(> span):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 {
+      padding-block: 0.75rem; /* match Pico */
+    }
+  label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ):has(*:placeholder-shown:not(:focus)) > span,
+    label:has(> span):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 {
+      padding-block: 0.75rem; /* match Pico */
+    }
+
+}

package/css/layered/forms/float-label.css

@@ -0,0 +1,210 @@
+@layer blades {
+/*!
+ * Float Label CSS v2 by Blades CSS 🥷🏷️
+ * Copyright 2016–2026 (https://blades.ninja/css/float-label/)
+ * Licensed under MIT
+ */
+/*\3c !--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;
+  /*```
+  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 */
+}
+/*```
+  Then, we define the default/fallback state (when the float label should be minimized):
+  ```css */
+label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) > span,
+  label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) label,
+  .has-float-label > span,
+  .has-float-label label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-size: 75%;
+    cursor: text;
+  }
+label:has(> span):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(> span):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;
+  }
+label:has(> span):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(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ):has(*:-moz-placeholder:not(:focus)) > span, label:has(> span):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(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ):has(*:placeholder-shown:not(:focus)) > span,
+    label:has(> span):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%;
+    }
+/*```
+
+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.
+
+*/
+label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ),
+.has-float-label {
+
+  /* Enlarged state */
+}
+/* Default/fallback state */
+label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) > span,
+  label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) label,
+  .has-float-label > span,
+  .has-float-label label {
+    padding-inline-start: calc(1rem + 1px); /* match Pico's padding + border */
+    padding-block-start: 0.25rem;
+    opacity: 75%;
+    transition: all 0.25s;
+  }
+label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) input,
+  label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) textarea,
+  label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) select,
+  .has-float-label input,
+  .has-float-label textarea,
+  .has-float-label 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 */
+  }
+label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) input::-moz-placeholder, label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) textarea::-moz-placeholder, label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) select::-moz-placeholder, .has-float-label input::-moz-placeholder, .has-float-label textarea::-moz-placeholder, .has-float-label select::-moz-placeholder {
+      opacity: 100%;
+      -moz-transition: all 0.25s;
+      transition: all 0.25s;
+    }
+label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) input::placeholder, label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) textarea::placeholder, label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) select::placeholder, .has-float-label input::placeholder, .has-float-label textarea::placeholder, .has-float-label select::placeholder {
+      opacity: 100%;
+      transition: all 0.25s;
+    }
+label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ):has(*:-moz-placeholder:not(:focus)) > span, label:has(> span):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 {
+      padding-block: 0.75rem; /* match Pico */
+    }
+label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ):has(*:placeholder-shown:not(:focus)) > span,
+    label:has(> span):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 {
+      padding-block: 0.75rem; /* match Pico */
+    }
+
+}

package/css/layered/layout/columns.css

@@ -0,0 +1,30 @@
+@layer blades {
+/*\3c !--section:docs-->
+
+`.columns` automatically creates columns with at least 30 characters each:
+
+<article class="columns">
+  <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p>
+</article>
+
+The smaller the font size, the more columns will be created:
+
+<article class="columns" style="font-size: 65%">
+  <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+</article>
+
+Useful for tables of contents and long lists.
+
+\3c !--section:code-->
+```css */
+.columns {
+  -moz-columns: 25ch auto;
+  columns: 25ch auto; /* common container 65ch / 25ch => 2 columns max, with a buffer for list paddings */
+}
+/* Avoid breaking inside elements, such as nested lists */
+.columns > * {
+    -moz-column-break-inside: avoid;
+    break-inside: avoid;
+  }
+
+}

package/css/layered/variables-blades.css

@@ -0,0 +1,23 @@
+@layer blades {
+:scope,
+:host {
+  /**
+   * Design Tokens !!! NAMING NOT FINALIZED YET !!!
+   * `--in-pico: *` props below are for reference only (not to be used)
+   */
+  --blades-token-primary: var(--pico-primary, dodgerblue);
+  --in-pico: #01aaff;
+  --blades-token-secondary: var(--pico-secondary, lightslategray);
+  --in-pico: #969eaf;
+
+  /**
+   * Inherited Variables
+   */
+  --blades-timeline-border-color: color-mix(
+    in srgb,
+    var(--blades-token-secondary) 50%,
+    transparent
+  );
+}
+
+}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@anyblades/blades",
-  "version": "3.1.0-beta.4",
+  "version": "3.1.0-beta.5",
   "style": "./src/blades.css",
   "exports": {
     ".": "./src/blades.css",
     "./compact": "./src/blades/_compact.css",
-    "./float-label/*": "./src/blades/float-label/_*.css",
+    "./float-label/*": "./src/blades/forms/float-label/_*.css",
     "./pico": "./src/pico.css",
     "./pico/components": "./src/pico/components/_index.css",
     "./pico/components/*": "./src/pico/components/_*.css",
@@ -36,7 +36,7 @@
     "build:minify": "for f in css/*.css; do case $f in *.min.css|css/pico.conditional.*) ;; *) lightningcss --minify $f -o ${f%.css}.min.css || exit 1;; esac; done",
     "build:conditional": "for f in '' .min; do { printf '@scope (.pico) {\\n'; cat ./css/pico${f}.css; printf '\\n}\\n'; } > ./css/pico.conditional${f}.css; done",
     "build:layered": "npm run build:layered:css && npm run build:layered:wrap && npm run build:layered:clean",
-    "build:layered:css": "rm -rf css/layered && postcss --config css './src/pico/**/_*.css' '!./src/pico/_index.css' ./src/blades/_compact.css --base src --dir css/layered --no-map && mv css/layered/pico/* css/layered/blades/* css/layered/ && rmdir css/layered/pico css/layered/blades",
+    "build:layered:css": "rm -rf css/layered && for d in pico blades; do postcss --config css \"./src/$d/**/_*.css\" \"!./src/$d/_index.css\" --base src/$d --dir css/layered --no-map || exit 1; done",
     "build:layered:wrap": "for f in css/blades.css css/blades.min.css $(find css/layered -name '_*.css'); do case $f in css/blades*) n=${f##*/}; o=css/layered/${n%%.*}.layered.${n#*.};; *) d=${f%/*}; n=${f##*/_}; [ $n = index.css ] && o=$d.css || o=$d/$n;; esac; { printf '@layer blades {\\n'; cat $f; printf '\\n}\\n'; } > $o || exit 1; done",
     "build:layered:clean": "find css/layered -name '_*.css' -delete",
     "start": "npm run build:css -- --watch",

package/src/blades/_index.css

@@ -7,22 +7,22 @@
 
 /* Follows https://github.com/picocss/pico/blob/main/scss/_index.scss */
 
-@import "./_variables";
+@import "./_variables-blades";
 
 /* Layout */
-@import "./_columns";
+@import "./layout/_columns";
 
 /* Content */
-@import "./_code";
+@import "./content/_code-block";
 
 /* Forms */
-@import "./float-label/_index";
+@import "./forms/float-label/_index";
 
 /* Components */
-@import "./_modal";
-@import "./_icon";
-@import "./_dropdown-popover";
-@import "./_timeline";
+@import "./components/_modal-modern";
+@import "./content/_icon";
+@import "./components/_dropdown-popover";
+@import "./components/_timeline";
 
 /* Compact version (opt-in via `data-compact` attr anywhere) */
 @import "./_compact";

package/src/blades/{_dropdown-popover.css → components/_dropdown-popover.css}

@@ -80,8 +80,8 @@ that toggles it, with no JS:
     width: 100%;
   }
 }
-/* Beats Pico's `nav ul:first-of-type` / `:last-of-type` margins */
-nav :is(ul, menu)[popover] {
+/* Beats Pico's `nav ul:first-of-type` / `:last-of-type` margins whatever the load order (soft win via :not) */
+nav :is(ul, menu)[popover]:not(.does-not-exist) {
   margin: auto;
 }
 @starting-style {
@@ -93,7 +93,7 @@ nav :is(ul, menu)[popover] {
 /* Next to the button that opened it (its implicit anchor) */
 @supports (position-area: bottom) {
   :is(ul, menu)[popover],
-  nav :is(ul, menu)[popover] {
+  nav :is(ul, menu)[popover]:not(.does-not-exist) {
     inset: auto;
     margin: 0;
     margin-top: var(--pico-outline-width);

package/src/float-label.css

@@ -1 +1 @@
-@import "./blades/float-label/_index";
+@import "./blades/forms/float-label/_index";

package/src/ninja/_index.css

@@ -6,7 +6,7 @@
 
 /* Layout */
 @import "./_container-breakout";
-@import "./_page-anchors";
+@import "./_scroll-to";
 
 /* Content */
 @import "./_heading-anchor";

package/_includes/blades/links.liquid

@@ -1,21 +0,0 @@
-{% comment %}<!--section:code-->```liquid{% endcomment %}
-<ul>
-  {%- for link in links %}
-    <li>
-      {% # prettier-ignore %}
-      <a href="{{ link.url }}" {% if link.url == current_url %}aria-current="page"{% endif %}>
-        {{- link.title -}}
-      </a>
-    </li>
-  {%- endfor %}
-</ul>
-{% # prettier-ignore %}
-{% comment %}```
-<!--section:docs-->
-Usage example for https://www.11ty.dev/docs/plugins/navigation/#bring-your-own-html-render-the-menu-items-manually:
-
-```liquid
-{% assign links = collections.all | eleventyNavigation %}
-{% render blades/links, links: links, current_url: page.url %}
-```
-<!--section-->{% endcomment %}

package/_includes/blades/links.njk

@@ -1,9 +0,0 @@
-<ul>
-  {%- for link in links %}
-    <li>
-      <a href="{{ link.url }}" {% if link.url == current_url %}aria-current="page"{% endif %}>
-        {{- link.title | safe -}}
-      </a>
-    </li>
-  {%- endfor %}
-</ul>

package/_includes/blades/links.twig

@@ -1,18 +0,0 @@
-{# <!--section:code-->```twig #}
-<ul>
-  {%- for link in links %}
-    <li>
-      <a href="{{ link.url }}" {% if link.url == current_url %}aria-current="page"{% endif %}>
-        {{- link.title -}}
-      </a>
-    </li>
-  {%- endfor %}
-</ul>
-{#```
-<!--section:docs-->
-Pass the links and the current URL explicitly so nothing else leaks into scope:
-
-```twig
-{% include 'blades/links.twig' with { links: menu, current_url: app.request.pathInfo } only %}
-```
-<!--section--> #}