@anyblades/blades 2.4.8 → 3.0.0-alpha.1

package/src/standalone/_core.css

@@ -0,0 +1,32 @@
+/*!
+ * Blades CSS standalone kit v3 🥷
+ * Copyright 2026 (https://blades.ninja/css/standalone/)
+ * Licensed under MIT
+ */
+/*<!--section:code-->```css */
+
+/* Follows https://github.com/picocss/pico/blob/main/scss/_index.scss */
+
+@import "./_variables";
+
+/* Layout */
+@import "./layout/_breakout";
+@import "./layout/_columns";
+@import "./layout/_scroller";
+
+/* Content */
+@import "./content/_typography";
+@import "./content/_list";
+@import "./content/_table";
+@import "./content/_table-responsive";
+@import "./content/_code";
+
+/* Forms */
+@import "./forms/_float-label.core";
+
+/* Components */
+@import "./components/_icon-helper";
+@import "./components/_timeline";
+
+/* Utilities */
+@import "./_utilities";

package/src/{blades.standalone.theme.css → standalone/_theme.css}

@@ -1,7 +1,5 @@
-/*
-<!--section:code-->
-```css */
-@import "./float-label.theme";
+/*<!--section:code-->```css */
+@import "./forms/_float-label.theme";
 
 html {
   /* Prevent horizontal overflow and scrolling, modern way. */
@@ -101,7 +99,7 @@ table {
   }
 }
 
-[data-jump-to="top"] {
+[href="#top"] {
   opacity: 25%;
   &:hover {
     opacity: 75%;
@@ -130,5 +128,3 @@ table {
     text-decoration-style: dotted;
   }
 }
-/*```
-<!--section--> */

package/src/{_utilities.css → standalone/_utilities.css}

@@ -1,7 +1,6 @@
-/* Extends https://github.com/picocss/pico/tree/main/scss/utilities
-<!--section:docs-->
+/*<!--section:docs-->
 
-### Auto-dark
+## Dark auto
 
 `.dark-auto` automatically creates a simple dark version of any element:
 
@@ -28,7 +27,7 @@ How it works:
 }
 /*```
 
-### Faded
+## Faded
 
 `.faded` reduces the opacity of an element:
 

package/src/standalone/_variables.css

@@ -0,0 +1,20 @@
+: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/src/{link-icon.css → standalone/components/_icon-helper.css}

@@ -58,6 +58,4 @@ Or even for:
 
 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--> */

package/src/{components → standalone/components}/_timeline.css

@@ -19,7 +19,6 @@ dl.timeline,
   dd {
     padding: 0.25rem 0 0.75rem 1rem;
     margin-block: 0;
-    border-inline-start: 0.25rem solid gray;
+    border-inline-start: 0.25rem solid var(--blades-timeline-border-color);
   }
 }
-/*```*/

package/src/{content → standalone/content}/_code.css

@@ -1,17 +1,16 @@
-/* Extends https://github.com/picocss/pico/blob/main/scss/content/_code.scss
-<!--section:docs-->
-
-### Code
+/*<!--section:docs-->
 
 The `<pre><code>` blocks are Prism-compatible and support captions via `data-caption="..."` attribute:
 
-```treeview {data-caption="Blades CSS:"}
-./css/
-├── blades.core.css     # reusable class-light utilities, unthemed
-├── blades.theme.css    # minimal opinionated theme
-└── blades.css          # above two together
+```treeview {data-caption="Blades CSS ships:"}
+/css/
+├── blades.css  (Pico CSS successor)
+├── blades.standalone.css  (framework-agnostic)
+├── ninja.css  (experimental add-ons)
+└── pico.css  (underlying fork)
 ```
-How it works:
+
+<!--section:code-->
 ```css */
 pre {
   @media (width < 768px) {
@@ -31,5 +30,3 @@ code {
     }
   }
 }
-/*```
-<!--section--> */

package/src/{content/_typography.css → standalone/content/_list.css}

@@ -1,49 +1,6 @@
-/* Extends https://github.com/picocss/pico/blob/main/scss/content/_typography.scss
-<!--section:docs,h-anchor-->
+/*<!--section:docs-->
 
-### Heading anchors
-
-Links with `href="#..."` inside headings are automatically displayed as anchors:
-
-<article>
-  <h2 style="margin: 0 0 0 1.5rem">Heading with anchor <a href="#hwa" style="visibility: visible">#</a></h2>
-</article>
-
-How it works:
-```css */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  position: relative;
-
-  a[aria-hidden="true"] {
-    position: absolute;
-    right: 100%;
-    top: 50%;
-    transform: translateY(-50%);
-    padding-right: 0.2ch;
-    color: silver;
-    text-decoration: none;
-    visibility: hidden;
-  }
-  @media /* to avoid double-tap on touch devices */ (hover: hover) {
-    &:hover {
-      a[aria-hidden="true"] {
-        visibility: visible;
-      }
-    }
-  }
-}
-/*```
-
-**PRO** example of automatic anchors for `11ty`+`markdown-it-anchor`: https://github.com/anyblades/eleventy-blades/blob/main/src/eleventy.config.js
-
-<!--section:docs,list-->
-
-### List markers
+## Custom markers
 
 Customize markers using inline `style="--list-marker:..."` on `<ul>/<ol>` or even individual `<li>`:
 
@@ -80,7 +37,7 @@ ol {
 }
 /*```
 
-### Markerless
+## Markerless
 
 `.markerless` removes markers and reduces padding:
 
@@ -107,7 +64,7 @@ ol {
 }
 /*```
 
-### Unlist
+## Unlist
 
 `.unlist` removes list styling at all:
 
@@ -136,5 +93,3 @@ ol {
     }
   }
 }
-/*```
-<!--section--> */

package/src/{content → standalone/content}/_table.css

@@ -1,7 +1,6 @@
-/* Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss
-<!--section:docs-->
+/*<!--section:docs-->
 
-### Column expanders
+## Column expanders
 
 Place `<hr>` element inside `<th>` column to expand it horizontally:
 
@@ -37,7 +36,7 @@ th {
 }
 /*```
 
-### Borderless table
+## Borderless table
 
 `.borderless` removes all default borders:
 
@@ -50,9 +49,7 @@ th {
 {.borderless}
 </article>
 
-Living example: https://bladeswitch.com/#minimal-dependencies table
-
-<!--section--> */
+<!--section-->*/
 table.borderless {
   th,
   td {

package/src/standalone/content/_typography.css

@@ -0,0 +1,38 @@
+/*<!--section:docs-->
+
+## Heading anchors
+
+Links with `href="#..."` inside headings are automatically displayed as anchors:
+
+<article>
+  <h2 style="margin: 0 0 0 1.5rem">Heading with anchor <a aria-hidden="true" style="visibility: visible">#</a></h2>
+</article>
+
+How it works:
+```css */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  position: relative;
+
+  a[aria-hidden="true"] {
+    position: absolute;
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    padding-right: 0.2ch;
+    color: silver;
+    text-decoration: none;
+    visibility: hidden;
+  }
+  @media /* to avoid double-tap on touch devices */ (hover: hover) {
+    &:hover {
+      a[aria-hidden="true"] {
+        visibility: visible;
+      }
+    }
+  }
+}

package/src/{float-label.core.css → standalone/forms/_float-label.core.css}

@@ -1,18 +1,26 @@
-/* Moved here from https://github.com/anyblades/float-label-css for easier maintenance
-<!--section:docs-->
+/*!
+ * Float Label CSS v2 by Blades CSS 🥷🏷️
+ * Copyright 2016–2026 (https://blades.ninja/css/float-label/)
+ * Licensed under MIT
+ */
+/*<!--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),
+label:has(> span):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 */
+  /*```
+  Then, we define the default/fallback state (when the float label should be minimized):
+  ```css */
   > span,
   label {
     position: absolute;
@@ -21,10 +29,9 @@ Then, we define the default/fallback state (when the float label should be minim
     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 */
+  /*```
+  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;
   }
@@ -36,9 +43,10 @@ Finally, we detect if placeholder is shown, but not in focus. That means we can
     }
   }
 }
-/*
-```
+/*```
+
 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/standalone/forms/_float-label.css

@@ -0,0 +1,2 @@
+@import "./_float-label.core";
+@import "./_float-label.theme";

package/src/{breakout.css → standalone/layout/_breakout.css}

@@ -36,7 +36,8 @@
 
     /* Max out the width of the element */
     &.breakout-item-max {
-      width: min(125%, 100dvw) !important; /* !important is for cases like figure.breakout-item-max @TODO */
+      width: min(125%, 100dvw) !important;
+      /* !important is for cases like figure.breakout-item-max @TODO */
     }
   }
 }
@@ -86,13 +87,9 @@
   }
 }
 /*```
-<!--section:summary-->
-
-The `.breakout` layout allows images, tables, and other figures to automatically extend or bleed beyond their parent container’s width.
-
 <!--section:docs-->
 
-### Demo <!-- inside parent .breakout -->
+The `.breakout` layout allows images, tables, and other figures to automatically extend or bleed beyond their parent container’s width.
 
 Break out a wide image from the text flow:
 

package/src/{_layout.css → standalone/layout/_columns.css}

@@ -1,7 +1,4 @@
-/* Extends https://github.com/picocss/pico/blob/main/scss/layout/
-<!--section:docs,columns-->
-
-### Auto-columns
+/*<!--section:docs-->
 
 `.columns` automatically creates columns with at least 30 characters each:
 
@@ -17,7 +14,7 @@ The smaller the font size, the more columns will be created:
 
 Useful for tables of contents and long lists.
 
-How it works:
+<!--section:code-->
 ```css */
 .columns {
   columns: 25ch auto; /* common container 65ch / 25ch => 2 columns max, with a buffer for list paddings */
@@ -27,18 +24,3 @@ How it works:
     break-inside: avoid;
   }
 }
-/*```
-<!--section:docs,jump-->
-
-### Jump to top
-
-`data-jump-to="top"` fixes element to the corner and adds extra top padding to make it easy to click:
-```css */
-[data-jump-to="top"] {
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  padding-top: 50vh;
-}
-/*```
-<!--section--> */

package/src/standalone/layout/_scroller.css

@@ -0,0 +1,10 @@
+/*```<!--section:docs-->
+
+`<a href="#top">` is automatically fixed to the bottom-right corner with extra top padding for easier clicking:
+```css */
+[href="#top"] {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  padding-top: 50vh;
+}

package/_config.yml

@@ -1,5 +0,0 @@
-exclude:
-  - "**/*"
-include:
-  - "css/**/*"
-  - "*.md"

package/blades.gemspec

@@ -1,16 +0,0 @@
-# frozen_string_literal: true
-
-Gem::Specification.new do |spec|
-  spec.name          = "blades"
-  spec.version       = "2.4.8"
-  
-  spec.authors       = ["Anton Staroverov"]
-  spec.homepage      = "https://blades.ninja/"
-  spec.license       = "MIT"
-  spec.summary       = "Fully compatible and actively maintained successor to Pico CSS."
-
-  spec.files = Dir.glob("{_includes,css}/**/*")
-  # puts "spec.files: #{spec.files.inspect}"
-
-  spec.add_runtime_dependency "jekyll", ">= 3.5", "< 5.0"
-end