@anyblades/blades 3.1.0-alpha.2 → 3.1.0-beta.2

package/src/blades.ninja.css

@@ -0,0 +1,3 @@
+@import "./blades";
+@import "./pico/layout/_landmarks";
+@import "./ninja/_index";

package/src/float-label.css

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

package/src/ninja/_index.css

@@ -0,0 +1,19 @@
+/*!
+ * Blades CSS' ninja add-ons (experimental) 🥷🧪
+ * Copyright 2026 (https://blades.ninja/css/ninja/)
+ * Licensed under MIT
+ */
+
+/* Layout */
+@import "./_container-breakout";
+@import "./_page-anchors";
+
+/* Content */
+@import "./_heading-anchor";
+@import "./_list-helpers";
+@import "./_table-helpers";
+@import "./_table-responsive";
+
+/* Other */
+@import "./_utilities";
+@import "./_theme";

package/src/{standalone → ninja}/_theme.css

@@ -1,6 +1,4 @@
 /*<!--section:code-->```css */
-@import "./forms/_float-label.theme";
-
 html {
   /* Prevent horizontal overflow and scrolling, modern way. */
   overflow-x: clip;

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

@@ -1,8 +1,3 @@
-/*!
- * Blades CSS' ninja add-ons (experimental) 🥷🧪
- * Copyright 2026 (https://blades.ninja/css/ninja/)
- * Licensed under MIT
- */
 /*<!--section:docs-->
 
 ### `sup`er &nbsp; and &nbsp; `sub`headings
@@ -80,4 +75,58 @@ img[src*="?domain=github.com&"] {
     filter: invert(1);
   }
 }
-/*```*/
+/*```
+
+## Dark auto
+
+`.dark-auto` automatically creates a simple dark version of any element:
+
+<article data-theme="dark">
+  <p>Look how cool <big class="dark-auto">🔥🕷️🐦‍⬛🐄🦓</big> can look in the dark!</p>
+</article>
+
+How it works:
+```css */
+/* Per https://picocss.com/docs/css-variables#css-variables-for-color-schemes */
+:root {
+  --blades-dark-filter: invert(100%) hue-rotate(180deg);
+}
+.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"] *) {
+    filter: var(--blades-dark-filter);
+  }
+}
+/*```
+
+## Faded
+
+`.faded` reduces the opacity of an element:
+
+<article class="faded">
+  Hover to unfade me!
+</article>
+
+How it works:
+```css */
+.faded {
+  opacity: 50%;
+
+  &:hover {
+    opacity: 87.5%;
+  }
+}
+/*```
+<!--section--> */
+
+/* Fix the scrollbar color when inverted by https://tailwindcss.com/docs/filter-invert */
+.invert {
+  ::-webkit-scrollbar {
+    filter: invert(1) !important;
+  }
+}

package/src/pico/_variables.css

@@ -225,7 +225,8 @@ details summary[role="button"]:not(.outline)::after {
   --pico-primary-hover-background: light-dark(#02659a, #017fc0);
   --pico-primary-hover-border: var(--pico-primary-hover-background);
   --pico-primary-hover-underline: var(--pico-primary-hover);
-  --pico-primary-focus: light-dark(rgba(2, 154, 232, 0.5), rgba(1, 170, 255, 0.375));
+  /* Focus rings are opaque: at 25–50% alpha they composite below 3:1 (SC 1.4.11), see #167 */
+  --pico-primary-focus: light-dark(rgb(2, 138, 212), rgb(1, 170, 255));
   --pico-primary-inverse: #fff;
   --pico-secondary: light-dark(#5d6b89, #969eaf);
   --pico-secondary-background: #525f7a;
@@ -235,7 +236,7 @@ details summary[role="button"]:not(.outline)::after {
   --pico-secondary-hover-background: light-dark(#48536b, #5d6b89);
   --pico-secondary-hover-border: var(--pico-secondary-hover-background);
   --pico-secondary-hover-underline: var(--pico-secondary-hover);
-  --pico-secondary-focus: light-dark(rgba(93, 107, 137, 0.25), rgba(144, 158, 190, 0.25));
+  --pico-secondary-focus: light-dark(rgb(93, 107, 137), rgb(144, 158, 190));
   --pico-secondary-inverse: #fff;
   --pico-contrast: light-dark(#181c25, #dfe3eb);
   --pico-contrast-background: light-dark(#181c25, #eff1f4);
@@ -248,7 +249,7 @@ details summary[role="button"]:not(.outline)::after {
     var(--pico-secondary-hover),
     var(--pico-contrast-hover)
   );
-  --pico-contrast-focus: light-dark(rgba(93, 107, 137, 0.25), rgba(207, 213, 226, 0.25));
+  --pico-contrast-focus: light-dark(rgb(93, 107, 137), rgb(207, 213, 226));
   --pico-contrast-inverse: light-dark(#fff, #000);
   --pico-box-shadow: 0 0.5rem 2.5rem light-dark(rgba(129, 145, 181, 0.2), rgba(7, 8.5, 12, 0.2));
   --pico-h1-color: light-dark(#2d3138, #f0f1f3);
@@ -282,11 +283,11 @@ details summary[role="button"]:not(.outline)::after {
   --pico-form-element-disabled-opacity: 0.5;
   --pico-form-element-invalid-border-color: light-dark(
     rgb(183.5, 105.5, 106.5),
-    rgb(149.5, 74, 80)
+    rgb(200.25, 79.25, 72.25)
   );
   --pico-form-element-invalid-active-border-color: light-dark(
     rgb(200.25, 79.25, 72.25),
-    rgb(183.25, 63.5, 59)
+    rgb(214, 92, 86)
   );
   --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
   --pico-form-element-valid-border-color: light-dark(rgb(76, 154.5, 137.5), #2a7b6f);

package/src/pico/content/_button.css

@@ -32,7 +32,7 @@ button,
   background-color: var(--pico-background-color);
   box-shadow: var(--pico-box-shadow);
   color: var(--pico-color);
-  font-weight: var(--pico-font-weight);
+  font-weight: var(--pico-button-font-weight, var(--pico-font-weight));
   font-size: 1rem;
   line-height: var(--pico-line-height);
   text-align: center;

package/src/pico/layout/_document.css

@@ -34,3 +34,12 @@
   -o-tab-size: 4;
   tab-size: 4;
 }
+
+body {
+  width: 100%;
+  margin: 0;
+}
+
+main {
+  display: block;
+}

package/src/pico/layout/_index.css

@@ -1,5 +1,4 @@
 @import "./_document";
-@import "./_landmarks";
 @import "./_section";
 @import "./_container";
 @import "./_grid";

package/src/pico/layout/_landmarks.css

@@ -1,15 +1,7 @@
 /**
  * Landmarks
+ * Included in pico.css and blades.ninja.css; not in blades.css
  */
-body {
-  width: 100%;
-  margin: 0;
-}
-
-main {
-  display: block;
-}
-
 body > header,
 body > main,
 body > footer {

package/src/pico.css

@@ -1 +1,2 @@
 @import "./pico/_index";
+@import "./pico/layout/_landmarks";