@anyblades/blades 2.4.0 → 2.4.2

package/blades.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "blades"
-  spec.version       = "2.4.0"
+  spec.version       = "2.4.1"
   
   spec.authors       = ["Anton Staroverov"]
   spec.homepage      = "https://blades.ninja/"

package/css/blades.css

@@ -4,7 +4,7 @@
  * Copyright 2026 - Licensed under MIT
  */
 /*!
- * Pico CSS ✨ v2.3
+ * Pico CSS ✨ v2.4
  * Copyright 2019-2025 (https://picocss.com)
  * Copyright 2026 (https://blades.ninja/css/pico/)
  * Licensed under MIT
@@ -411,13 +411,7 @@ details summary[role="button"]:not(.outline)::after {
     --pico-contrast-hover-underline: var(--pico-contrast-hover);
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
-    --pico-box-shadow:
-      0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698),
-      0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024),
-      0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03),
-      0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036),
-      0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302),
-      0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-box-shadow: 0 0.5rem 2.5rem rgba(7, 8.5, 12, 0.2);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -1231,9 +1225,11 @@ audio:not([controls]) {
 :where(iframe) {
   border-style: none;
 }
-img {
-  max-width: 100%;
-  height: auto;
+img:not([height]) {
+    max-width: 100%;
+    height: auto;
+  }
+img{
   border-style: none;
 }
 :where(svg:not([fill])) {
@@ -1248,6 +1244,7 @@ svg:not(:host) {
  */
 pre,
 code,
+var,
 kbd,
 samp {
   font-size: 0.875em;
@@ -1264,6 +1261,7 @@ pre {
 }
 pre,
 code,
+var,
 kbd,
 samp {
   border-radius: var(--pico-border-radius);
@@ -1273,6 +1271,7 @@ samp {
   line-height: initial;
 }
 code,
+var,
 kbd,
 samp {
   display: inline-block;
@@ -1397,6 +1396,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"]) {
 }
 fieldset {
   width: 100%;
+  min-width: 0;
   margin: 0;
   margin-bottom: var(--pico-spacing);
   padding: 0;
@@ -3100,7 +3100,7 @@ How it works:
       transform: translateX(-50%);
     }
 /* Respect img/picture min-width */
-.breakout > *:is(img, picture), .breakout-all > *:is(img, picture) {
+.breakout > *:is(img, picture):not(.does-not-exist), .breakout-all > *:is(img, picture):not(.does-not-exist) /* soft win specificity over .breakout-item above */ {
       min-width: auto;
     }
 /* Max out the width of the element */

package/css/blades.ninja.css

@@ -28,6 +28,24 @@ sub[style]:where(h1 > *) {
   }
 /*```
 
+### Teasers
+
+<article style="padding-inline: 2rem">
+  <a href="https://blades.ninja/" role="button" class="outline">
+    <h4>Blades CSS</h4>
+    Fully compatible and actively maintained successor to Pico CSS.
+  </a>
+</article>
+
+How it works:
+```css */
+a[role="button"]:has(h1, h2, h3, h4, h5, h6) {
+  margin: 0 0 0.5rem -1rem;
+  border-width: 1px 0 0 1px;
+  text-align: start;
+}
+/*```
+
 ### `.opt`ional content
 
 How it works:
@@ -41,6 +59,12 @@ How it works:
 
 ### Nicer GitHub favicons
 
+<article>
+
+https://github.com/anyblades/blades
+
+</article>
+
 How it works:
 ```css */
 img[src*="?domain=github.com&"] {

package/css/blades.standalone.core.css

@@ -104,7 +104,7 @@ How it works:
 
 /* Respect img/picture min-width */
 
-.breakout > *:is(img, picture), .breakout-all > *:is(img, picture) {
+.breakout > *:is(img, picture):not(.does-not-exist), .breakout-all > *:is(img, picture):not(.does-not-exist) /* soft win specificity over .breakout-item above */ {
       min-width: auto;
     }
 

package/css/blades.standalone.css

@@ -104,7 +104,7 @@ How it works:
 
 /* Respect img/picture min-width */
 
-.breakout > *:is(img, picture), .breakout-all > *:is(img, picture) {
+.breakout > *:is(img, picture):not(.does-not-exist), .breakout-all > *:is(img, picture):not(.does-not-exist) /* soft win specificity over .breakout-item above */ {
       min-width: auto;
     }
 

package/css/breakout.css

@@ -41,7 +41,7 @@
       transform: translateX(-50%);
     }
 /* Respect img/picture min-width */
-.breakout > *:is(img, picture), .breakout-all > *:is(img, picture) {
+.breakout > *:is(img, picture):not(.does-not-exist), .breakout-all > *:is(img, picture):not(.does-not-exist) /* soft win specificity over .breakout-item above */ {
       min-width: auto;
     }
 /* Max out the width of the element */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anyblades/blades",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "exports": {
     ".": "./src/blades.css",
     "./standalone": "./src/blades.standalone.css",
@@ -16,7 +16,7 @@
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
-    "@anyblades/pico": "^2.3.0",
+    "@anyblades/pico": "^2.4.1",
     "autoprefixer": "^10.5.0",
     "css-declaration-sorter": "^7.4.0",
     "postcss": "^8.4.33",

package/src/blades.ninja.css

@@ -29,6 +29,24 @@ sub[style] {
 }
 /*```
 
+### Teasers
+
+<article style="padding-inline: 2rem">
+  <a href="https://blades.ninja/" role="button" class="outline">
+    <h4>Blades CSS</h4>
+    Fully compatible and actively maintained successor to Pico CSS.
+  </a>
+</article>
+
+How it works:
+```css */
+a[role="button"]:has(h1, h2, h3, h4, h5, h6) {
+  text-align: start;
+  border-width: 1px 0 0 1px;
+  margin: 0 0 0.5rem -1rem;
+}
+/*```
+
 ### `.opt`ional content
 
 How it works:
@@ -42,6 +60,12 @@ How it works:
 
 ### Nicer GitHub favicons
 
+<article>
+
+https://github.com/anyblades/blades
+
+</article>
+
 How it works:
 ```css */
 img[src*="?domain=github.com&"] {

package/src/breakout.css

@@ -30,7 +30,7 @@
     }
 
     /* Respect img/picture min-width */
-    &:is(img, picture) {
+    &:is(img, picture):not(.does-not-exist) /* soft win specificity over .breakout-item above */ {
       min-width: auto;
     }