From 837933fbf52283c27c3b80b65f9db85889a657e3 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 6 Jul 2026 15:14:49 +0000 Subject: [PATCH 1/8] docs(landing): recommend over @import for CDN install @import at the top of a stylesheet is render-blocking and serialized: the browser must fetch and parse the parent sheet before discovering the import, then issue a second request that the preload scanner cannot see. Lead with as the recommended install and demote @import to a labelled alternative. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_016WH9Q15j1dZYxqTqMoomxq --- index.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/index.md b/index.md index 37572f26..9135511d 100644 --- a/index.md +++ b/index.md @@ -170,14 +170,14 @@ title: Home ## Install
-
/* jsDelivr CDN — drop into your CSS */
-@import "https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.min.css";
+
<!-- jsDelivr CDN — recommended -->
+<link rel="stylesheet"
+  href="https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.min.css">
-
<!-- or a <link> tag -->
-<link rel="stylesheet"
-  href="https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.min.css">
+
/* or @import — render-blocking & serialized, prefer <link> */
+@import "https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.min.css";
From aeeccb3f3bb989e8e4e7ab062acb770e53fd11c8 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 6 Jul 2026 15:27:31 +0000 Subject: [PATCH 2/8] docs: correct token count, component status, version, and @import guidance MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Token count: 685 (copy-wip) / 840 (index.md) → 720 to match the generated source of truth (docs/tokens.md, token-index, api-index). - Component status: .sf-btn and .sf-card are LIVE since v0.7.0 — drop the stale 'commented out / inert until v0.8' claims; only the remaining components (badge, tag, alert, avatar, modal, skeleton, table) are staged. - Landing hero version pill: v0.6.19 → v0.7.0. - copy-wip landing install: lead with , demote @import to a labelled alternative (render-blocking & serialized), matching index.md. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_016WH9Q15j1dZYxqTqMoomxq --- copy-wip/github-pages-index.html | 18 +++++++++--------- copy-wip/github-readme.md | 10 +++++----- index.md | 8 ++++---- 3 files changed, 18 insertions(+), 18 deletions(-) diff --git a/copy-wip/github-pages-index.html b/copy-wip/github-pages-index.html index 6a087c27..179614cf 100644 --- a/copy-wip/github-pages-index.html +++ b/copy-wip/github-pages-index.html @@ -8,7 +8,7 @@ SLASHED — a cascade-layer CSS framework - + @@ -417,7 +417,7 @@

The name is the manifesto. Seven promises, one stylesheet.

-

A cascade-layer CSS framework: 685 design tokens, automatic dark mode, fluid type & spacing — zero JavaScript, zero build step. Override six tokens and the whole site rebrands.

+

A cascade-layer CSS framework: 720 design tokens, automatic dark mode, fluid type & spacing — zero JavaScript, zero build step. Override six tokens and the whole site rebrands.

Open Configurator → View Demo @@ -431,7 +431,7 @@

-
685
design tokens
+
720
design tokens
15
cascade layers
0
lines of frontend JS
0
build steps
@@ -572,13 +572,13 @@

One link tag. That's the toolchain.

By the way: this band is just <section data-theme="dark"> — mixing light and dark sections is one attribute.

-
/* jsDelivr CDN — drop into your CSS */
-@import "https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.min.css";
- -
<!-- or a <link> tag -->
+
<!-- jsDelivr CDN — recommended -->
 <link rel="stylesheet"
   href="https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.min.css">

 
+
/* or @import — render-blocking & serialized, prefer <link> */
+@import "https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.min.css";

+
         

           
@@ -586,9 +586,9 @@ 
One link tag. That's the toolchain.

-              
+              
-              
+              

             
             
             
               
slashed.optimal.cssEverything live today: core + classless forms — recommended
slashed.optimal-components.cssOptimal + the staged component layer (inert until v0.8)
slashed.optimal-components.cssOptimal + the component layer — .sf-btn / .sf-card live, remaining components staged

               
slashed.optimal-utilities.cssOptimal + the staged utility layer (inert in 0.x)
slashed.full.cssOptimal + both staged layers
slashed.full.cssOptimal + the component and utility layers

             
           

           
SLASHED relies on 2024 CSS — light-dark(), OKLCH relative colors, @property, pow() — so the browser floor is Chrome 125+, Safari 18+, Firefox 129+.

diff --git a/copy-wip/github-readme.md b/copy-wip/github-readme.md
index e8bcb65a..9cf7005c 100644
--- a/copy-wip/github-readme.md
+++ b/copy-wip/github-readme.md
@@ -4,7 +4,7 @@
 
 

   A cascade-layer CSS framework you never compile.

-  685 design tokens, automatic dark mode, fluid type & spacing — no build step, no Node, no JavaScript.
+  720 design tokens, automatic dark mode, fluid type & spacing — no build step, no Node, no JavaScript.
 

 
 

@@ -67,14 +67,14 @@ Every letter of SLASHED is a design commitment, and each one is checkable agains
 
 ## What's inside
 
-- **685 design tokens** (`--sf-*`) covering color, typography, spacing, layout, borders, shadows, motion, and z-index — catalogued in a machine-readable [API index](docs/api-index.json).
+- **720 design tokens** (`--sf-*`) covering color, typography, spacing, layout, borders, shadows, motion, and z-index — catalogued in a machine-readable [API index](docs/api-index.json).
 - **Layout primitives** — `.sf-container`, `.sf-stack`, `.sf-grid`, `.sf-cluster`, `.sf-sidebar`, `.sf-switcher`, `.sf-cover`, `.sf-center`, `.sf-frame`, `.sf-reel`, `.sf-bento`, and more ([docs/layout.md](docs/layout.md)).
 - **Macros** — recipes like `.sf-prose`, `.sf-flow`, `.sf-truncate`, `.sf-aspect`, `.sf-scroll-shadow`, `.sf-surface` ([docs/macros.md](docs/macros.md)).
 - **State classes** — `.is-*` classes mapped to ARIA semantics ([docs/states.md](docs/states.md)).
 - **A fluid engine** — the type, display, and space scales are generated at runtime from 12 input scalars (viewport range, modular ratios, base sizes). Change one ratio and the whole system recalculates — no build ([docs/theming.md](docs/theming.md#fluid-engine)).
 - **Classless form styling**, motion, accessibility, and print modules.
 
-SLASHED is BEM-first: the token API is the product, and you build components on top. It ships **no utility classes in 0.x**, and the component classes (`.sf-btn`, `.sf-card`, …) are staged in source — commented out until they land in v0.8. What you get today is the foundation, honestly labelled.
+SLASHED is BEM-first: the token API is the product, and you build components on top. It ships **no utility classes in 0.x**. The first two component classes — `.sf-btn` and `.sf-card` — are **live since v0.7.0** (shipped in the `-components` and `full` bundles); the remaining components (badge, tag, alert, avatar, modal, skeleton, table) are staged in source, commented out until they land in a later minor. What you get today is the foundation plus the first components, honestly labelled.
 
 ## Dark mode
 
@@ -105,9 +105,9 @@ Pre-built bundles ship with every [release](https://github.com/codeslash-dev/SLA
 | Bundle | Contents |
 | --- | --- |
 | `slashed.optimal.css` | all of `core/` + classless forms — **recommended** |
-| `slashed.optimal-components.css` | optimal + the staged component layer *(inert until v0.8)* |
+| `slashed.optimal-components.css` | optimal + the component layer — `.sf-btn` / `.sf-card` live, remaining components staged |
 | `slashed.optimal-utilities.css` | optimal + the staged utility layer *(inert in 0.x)* |
-| `slashed.full.css` | optimal + both staged layers |
+| `slashed.full.css` | optimal + the component and utility layers |
 
 

 À la carte loading (individual source files)
diff --git a/index.md b/index.md
index 9135511d..e2c4392b 100644
--- a/index.md
+++ b/index.md
@@ -121,9 +121,9 @@ title: Home
 
 
 

-  v0.6.19 — see what's new →
+  v0.7.0 — see what's new →
   
CSS that gets out
of your way

-  
A cascade-layer framework with 840 design tokens, automatic dark mode, fluid type & spacing — and zero JavaScript, zero build step.

+  
A cascade-layer framework with 720 design tokens, automatic dark mode, fluid type & spacing — and zero JavaScript, zero build step.

   

     Open Configurator →
     View Demo
@@ -136,7 +136,7 @@ title: Home
   

     
🎨

     
OKLCH Color Engine

-    
840+ tokens derived from a handful of source colors. Full palette, dark mode, and semantic roles — all automatic.

+    
720+ tokens derived from a handful of source colors. Full palette, dark mode, and semantic roles — all automatic.

   

   

     
📐

@@ -210,7 +210,7 @@ title: Home
   

     
Reference

     
    
-      
  • Tokens all 840 design tokens
    • 
+      
  • Tokens all 720 design tokens
    • 
       
  • Token Index browseable index
    • 
       
  • Classes utility & macro classes
    • 
       
  • Layout grid, flex, spacing
    • 

From cb43e30e97c1eb75d23cc179190713fad424c0a0 Mon Sep 17 00:00:00 2001
From: Claude 
Date: Mon, 6 Jul 2026 15:46:37 +0000
Subject: [PATCH 3/8] feat(landing): publish the new standalone landing page

Promote the copy-wip landing draft to the live site: it becomes the root
index.html (layout: null, self-styled from the jsDelivr CDN) and replaces
the old Jekyll-wrapped index.md. Content was already brought in sync with
the framework in the previous commit (720 tokens, live component status,
-first install). Internal links verified against existing pages.

Co-Authored-By: Claude Opus 4.8 
Claude-Session: https://claude.ai/code/session_016WH9Q15j1dZYxqTqMoomxq
---
 .../github-pages-index.html => index.html     |   0
 index.md                                      | 244 ------------------
 2 files changed, 244 deletions(-)
 rename copy-wip/github-pages-index.html => index.html (100%)
 delete mode 100644 index.md

diff --git a/copy-wip/github-pages-index.html b/index.html
similarity index 100%
rename from copy-wip/github-pages-index.html
rename to index.html
diff --git a/index.md b/index.md
deleted file mode 100644
index e2c4392b..00000000
--- a/index.md
+++ /dev/null
@@ -1,244 +0,0 @@
----
-layout: default
-title: Home
----
-
-
-
-
    
-  v0.7.0 — see what's new →
-  
    CSS that gets out
    of your way
    
-  
    A cascade-layer framework with 720 design tokens, automatic dark mode, fluid type & spacing — and zero JavaScript, zero build step.
    
-  
    
-    Open Configurator →
-    View Demo
-    Full API Demo
-    GitHub
-  
    
-
    
-
-
    
-  
    
-    
    🎨
    
-    
    OKLCH Color Engine
    
-    
    720+ tokens derived from a handful of source colors. Full palette, dark mode, and semantic roles — all automatic.
    
-  
    
-  
    
-    
    📐
    
-    
    Fluid Type & Space
    
-    
    Type and spacing scales that flow smoothly from mobile to 4K using CSS clamp() — no breakpoints needed.
    
-  
    
-  
    
-    
    🌗
    
-    
    Automatic Dark Mode
    
-    
    Light and dark palettes are derived from a single source color. Section-level theming with [data-theme].
    
-  
    
-  
    
-    
    ⚡
    
-    
    Zero Build Step
    
-    
    Pure CSS custom properties. Drop in one <link> tag and customise with :root overrides. No Node, no bundler.
    
-  
    
-  
    
-    
    🔩
    
-    
    @layer Architecture
    
-    
    Sixteen explicit cascade layers keep specificity predictable and your overrides always on top.
    
-  
    
-  
    
-    
    🛠️
    
-    
    Visual Configurator
    
-    
    Live-preview every token, export override CSS, or share a config URL — all from the browser with no install.
    
-  
    
-
    
-
----
-
-## Install
-
-
    
-
    <!-- jsDelivr CDN — recommended -->
-<link rel="stylesheet"
-  href="https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.min.css">
    
-
    
-
-
    
-
    /* or @import — render-blocking & serialized, prefer <link> */
-@import "https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.min.css";
    
-
    
-
-
    
-
-| Bundle | Includes |
-|--------|----------|
-| `slashed.optimal.css` | Core + classless forms — **recommended** |
-| `slashed.optimal-components.css` | Optimal + component stubs |
-| `slashed.optimal-utilities.css` | Optimal + utility classes |
-| `slashed.full.css` | Everything |
-
-[All CDN bundles →](https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/) · [GitHub Releases](https://github.com/codeslash-dev/SLASHED/releases) · [npm](https://www.npmjs.com/package/slashed)
-
-
    
-
----
-
-## Documentation
-
-
    
-  
    
-    
    Guides
    
-    
-  
    
-  
    
-    
    Reference
    
-    
-  
    
-  
    
-    
    Developer
    
-    
-  
    
-
    
-
----
-
-
    
-  Changelog
-  Contributing
-  CI status
-  GitHub
-  npm
-  MIT · © CodeSlash
-
    

From 6c3ad8292c66a8deb8434dd0efcec8a89abb38d6 Mon Sep 17 00:00:00 2001
From: Claude 
Date: Mon, 6 Jul 2026 15:46:40 +0000
Subject: [PATCH 4/8] docs: correct component status in architecture.md and
 regenerate demos
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- architecture.md: .sf-btn and .sf-card are live since v0.7.0 — replace the
  stale 'every class commented out / no CSS emitted' claims (file map, layer
  notes, bundle table, feature-gating notes) with the partial-completion
  reality; only the remaining components stay staged.
- demos: teach demos/generate.mjs the four new knob tokens
  (--sf-media-radius, --sf-color-selection-text--alt, and the two
  scroll-timeline exit-range knobs), then regenerate. The full-API demo now
  reports 720 tokens / 316 classes instead of the stale 711 / 308.

Co-Authored-By: Claude Opus 4.8 
Claude-Session: https://claude.ai/code/session_016WH9Q15j1dZYxqTqMoomxq
---
 demos/full-api-demo-with-overrides.html | 56 +++++++++++++++++++-----
 demos/full-api-demo.html                | 58 ++++++++++++++++++++-----
 demos/generate.mjs                      |  4 ++
 demos/ultimate-override.css             |  8 +++-
 docs/architecture.md                    | 29 +++++++------
 5 files changed, 117 insertions(+), 38 deletions(-)

diff --git a/demos/full-api-demo-with-overrides.html b/demos/full-api-demo-with-overrides.html
index 8ddbe48a..93c8ad54 100644
--- a/demos/full-api-demo-with-overrides.html
+++ b/demos/full-api-demo-with-overrides.html
@@ -122,7 +122,7 @@
   
   
    
     
    SLASHED Full API Demo
    
-    
    v0.7.0 · optimal-components bundle from jsDelivr CDN · 308 classes · 711 tokens (225 configurable)
    
+    
    v0.7.0 · optimal-components bundle from jsDelivr CDN · 316 classes · 720 tokens (229 configurable)
    
     
    ultimate-override.css is ACTIVE. Every value below is recomputed from perturbed knob tokens — toggle it off in the toolbar, or compare against the un-overridden page.
    
 
     
    
@@ -150,7 +150,7 @@ 
    Shadow
    
       
    Interactive functions motion · transitions · gradients
    
 
       
    Animations 
    
-      
    animation-blink
    animation-color-pulse
    animation-fade-in
    animation-fade-out
    animation-float
    animation-ping
    animation-scale-down
    animation-scale-up
    animation-shimmer
    animation-slide-in-down
    animation-slide-in-left
    animation-slide-in-right
    animation-slide-in-up
    animation-spin
    
+      
    animation-blink
    animation-color-pulse
    animation-fade-in
    animation-fade-out
    animation-float
    animation-ping
    animation-scale-down
    animation-scale-up
    animation-shimmer
    animation-slide-in-down
    animation-slide-in-left
    animation-slide-in-right
    animation-slide-in-up
    animation-slide-out-down
    animation-slide-out-left
    animation-slide-out-right
    animation-slide-out-up
    animation-spin
    
 
       
    Easing curves 
    
       
    ease-bounce
    ease-elastic
    ease-in
    ease-in-out
    ease-linear
    ease-out
    ease-overshoot
    ease-spring
    
@@ -169,7 +169,7 @@ 
    Drop shadows (filter)
    
     
    
 
     
    
-      
    Layout primitives 136
    
+      
    Layout primitives 138
    
       
    
       
    
         
    .sf-alternate
    
@@ -331,6 +331,14 @@ 
    Layout primitives 136
    
         
    .sf-cq
    
         
    1
    2
    3
    4
    
       
    
+      
    
+        
    .sf-divide
    
+        
    1
    2
    3
    4
    
+      
    
+      
    
+        
    .sf-divide--vertical
    
+        
    1
    2
    3
    4
    
+      
    
       
    
         
    .sf-divider
    
         
    above
    below
    
@@ -1116,7 +1124,7 @@ 
    State classes 40
    
       
    
     
    
     
    
-      
    Motion / animation 15
    
+      
    Motion / animation 21
    
       
    
       
    
         
    .sf-color-pulse
    
@@ -1146,6 +1154,30 @@ 
    Motion / animation 15
    
         
    .sf-entrance--scale-up
    
         
    entrance--scale-up
    
       
    
+      
    
+        
    .sf-exit--fade
    
+        
    exit--fade
    
+      
    
+      
    
+        
    .sf-exit--fade-down
    
+        
    exit--fade-down
    
+      
    
+      
    
+        
    .sf-exit--fade-left
    
+        
    exit--fade-left
    
+      
    
+      
    
+        
    .sf-exit--fade-right
    
+        
    exit--fade-right
    
+      
    
+      
    
+        
    .sf-exit--fade-up
    
+        
    exit--fade-up
    
+      
    
+      
    
+        
    .sf-exit--scale-down
    
+        
    exit--scale-down
    
+      
    
       
    
         
    .sf-fade-in
    
         
    fade-in
    
@@ -1249,10 +1281,10 @@ 
    Theme 1
    
     
    
 
     
    
-      
    Part 2 — Complete token reference 711 tokens · live values
    
+      
    Part 2 — Complete token reference 720 tokens · live values
    
       
    Every --sf-* token — knob and consumption, all tiers — with its live computed value (filled by JS). Toggle the theme or the override in the toolbar and watch every value recompute. Tokens that resolve to a colour, length, shadow, gradient, type or motion value also show a visual.
    
-      
    color 249
    
-      
    --sf-color-action
    …
    --sf-color-action--active
    …
    --sf-color-action--hover
    …
    --sf-color-action-100
    …
    --sf-color-action-200
    …
    --sf-color-action-300
    …
    --sf-color-action-400
    …
    --sf-color-action-50
    …
    --sf-color-action-500
    …
    --sf-color-action-600
    …
    --sf-color-action-700
    …
    --sf-color-action-800
    …
    --sf-color-action-900
    …
    --sf-color-action-950
    …
    --sf-color-action-a10
    …
    --sf-color-action-a30
    …
    --sf-color-action-a5
    …
    --sf-color-action-a50
    …
    --sf-color-action-a80
    …
    --sf-color-action-darker
    …
    --sf-color-action-ghost
    …
    --sf-color-action-lighter
    …
    --sf-color-action-muted
    …
    --sf-color-action-source-dark
    …
    --sf-color-action-source-light
    …
    --sf-color-action-subtle
    …
    --sf-color-action-superdark
    …
    --sf-color-action-superlight
    …
    --sf-color-action-xdark
    …
    --sf-color-action-xlight
    …
    --sf-color-base
    …
    --sf-color-base--active
    …
    --sf-color-base--hover
    …
    --sf-color-base-100
    …
    --sf-color-base-200
    …
    --sf-color-base-300
    …
    --sf-color-base-400
    …
    --sf-color-base-50
    …
    --sf-color-base-500
    …
    --sf-color-base-600
    …
    --sf-color-base-700
    …
    --sf-color-base-800
    …
    --sf-color-base-900
    …
    --sf-color-base-950
    …
    --sf-color-base-a10
    …
    --sf-color-base-a30
    …
    --sf-color-base-a5
    …
    --sf-color-base-a50
    …
    --sf-color-base-a80
    …
    --sf-color-base-ghost
    …
    --sf-color-base-muted
    …
    --sf-color-base-source-dark
    …
    --sf-color-base-source-light
    …
    --sf-color-base-subtle
    …
    --sf-color-bg
    …
    --sf-color-bg--active
    …
    --sf-color-bg--disabled
    …
    --sf-color-bg--focus
    …
    --sf-color-bg--hover
    …
    --sf-color-bg--selected
    …
    --sf-color-black
    …
    --sf-color-border
    …
    --sf-color-border--disabled
    …
    --sf-color-border--focus
    …
    --sf-color-border--strong
    …
    --sf-color-border--subtle
    …
    --sf-color-border--translucent
    …
    --sf-color-code-bg
    …
    --sf-color-code-text
    …
    --sf-color-danger
    …
    --sf-color-danger-muted
    …
    --sf-color-danger-source-dark
    …
    --sf-color-danger-source-light
    …
    --sf-color-danger-strong
    …
    --sf-color-danger-subtle
    …
    --sf-color-dim
    …
    --sf-color-heading
    …
    --sf-color-info
    …
    --sf-color-info-muted
    …
    --sf-color-info-source-dark
    …
    --sf-color-info-source-light
    …
    --sf-color-info-strong
    …
    --sf-color-info-subtle
    …
    --sf-color-inset
    …
    --sf-color-inverse
    …
    --sf-color-link
    …
    --sf-color-link--active
    …
    --sf-color-link--disabled
    …
    --sf-color-link--hover
    …
    --sf-color-link--underline
    …
    --sf-color-link--visited
    …
    --sf-color-mark-bg
    …
    --sf-color-mark-text
    …
    --sf-color-neutral
    …
    --sf-color-neutral--active
    …
    --sf-color-neutral--hover
    …
    --sf-color-neutral-100
    …
    --sf-color-neutral-200
    …
    --sf-color-neutral-300
    …
    --sf-color-neutral-400
    …
    --sf-color-neutral-50
    …
    --sf-color-neutral-500
    …
    --sf-color-neutral-600
    …
    --sf-color-neutral-700
    …
    --sf-color-neutral-800
    …
    --sf-color-neutral-900
    …
    --sf-color-neutral-950
    …
    --sf-color-neutral-a10
    …
    --sf-color-neutral-a30
    …
    --sf-color-neutral-a5
    …
    --sf-color-neutral-a50
    …
    --sf-color-neutral-a80
    …
    --sf-color-neutral-darker
    …
    --sf-color-neutral-ghost
    …
    --sf-color-neutral-lighter
    …
    --sf-color-neutral-muted
    …
    --sf-color-neutral-source-dark
    …
    --sf-color-neutral-source-light
    …
    --sf-color-neutral-subtle
    …
    --sf-color-neutral-superdark
    …
    --sf-color-neutral-superlight
    …
    --sf-color-neutral-xdark
    …
    --sf-color-neutral-xlight
    …
    --sf-color-overlay
    …
    --sf-color-primary
    …
    --sf-color-primary--active
    …
    --sf-color-primary--hover
    …
    --sf-color-primary-100
    …
    --sf-color-primary-200
    …
    --sf-color-primary-300
    …
    --sf-color-primary-400
    …
    --sf-color-primary-50
    …
    --sf-color-primary-500
    …
    --sf-color-primary-600
    …
    --sf-color-primary-700
    …
    --sf-color-primary-800
    …
    --sf-color-primary-900
    …
    --sf-color-primary-950
    …
    --sf-color-primary-a10
    …
    --sf-color-primary-a30
    …
    --sf-color-primary-a5
    …
    --sf-color-primary-a50
    …
    --sf-color-primary-a80
    …
    --sf-color-primary-darker
    …
    --sf-color-primary-ghost
    …
    --sf-color-primary-lighter
    …
    --sf-color-primary-muted
    …
    --sf-color-primary-source-dark
    …
    --sf-color-primary-source-light
    …
    --sf-color-primary-subtle
    …
    --sf-color-primary-superdark
    …
    --sf-color-primary-superlight
    …
    --sf-color-primary-xdark
    …
    --sf-color-primary-xlight
    …
    --sf-color-raised
    …
    --sf-color-scheme
    …
    --sf-color-secondary
    …
    --sf-color-secondary--active
    …
    --sf-color-secondary--hover
    …
    --sf-color-secondary-100
    …
    --sf-color-secondary-200
    …
    --sf-color-secondary-300
    …
    --sf-color-secondary-400
    …
    --sf-color-secondary-50
    …
    --sf-color-secondary-500
    …
    --sf-color-secondary-600
    …
    --sf-color-secondary-700
    …
    --sf-color-secondary-800
    …
    --sf-color-secondary-900
    …
    --sf-color-secondary-950
    …
    --sf-color-secondary-a10
    …
    --sf-color-secondary-a30
    …
    --sf-color-secondary-a5
    …
    --sf-color-secondary-a50
    …
    --sf-color-secondary-a80
    …
    --sf-color-secondary-darker
    …
    --sf-color-secondary-ghost
    …
    --sf-color-secondary-lighter
    …
    --sf-color-secondary-muted
    …
    --sf-color-secondary-source-dark
    …
    --sf-color-secondary-source-light
    …
    --sf-color-secondary-subtle
    …
    --sf-color-secondary-superdark
    …
    --sf-color-secondary-superlight
    …
    --sf-color-secondary-xdark
    …
    --sf-color-secondary-xlight
    …
    --sf-color-selection-bg
    …
    --sf-color-selection-text
    …
    --sf-color-success
    …
    --sf-color-success-muted
    …
    --sf-color-success-source-dark
    …
    --sf-color-success-source-light
    …
    --sf-color-success-strong
    …
    --sf-color-success-subtle
    …
    --sf-color-surface
    …
    --sf-color-tertiary
    …
    --sf-color-tertiary--active
    …
    --sf-color-tertiary--hover
    …
    --sf-color-tertiary-100
    …
    --sf-color-tertiary-200
    …
    --sf-color-tertiary-300
    …
    --sf-color-tertiary-400
    …
    --sf-color-tertiary-50
    …
    --sf-color-tertiary-500
    …
    --sf-color-tertiary-600
    …
    --sf-color-tertiary-700
    …
    --sf-color-tertiary-800
    …
    --sf-color-tertiary-900
    …
    --sf-color-tertiary-950
    …
    --sf-color-tertiary-a10
    …
    --sf-color-tertiary-a30
    …
    --sf-color-tertiary-a5
    …
    --sf-color-tertiary-a50
    …
    --sf-color-tertiary-a80
    …
    --sf-color-tertiary-darker
    …
    --sf-color-tertiary-ghost
    …
    --sf-color-tertiary-lighter
    …
    --sf-color-tertiary-muted
    …
    --sf-color-tertiary-source-dark
    …
    --sf-color-tertiary-source-light
    …
    --sf-color-tertiary-subtle
    …
    --sf-color-tertiary-superdark
    …
    --sf-color-tertiary-superlight
    …
    --sf-color-tertiary-xdark
    …
    --sf-color-tertiary-xlight
    …
    --sf-color-text
    …
    --sf-color-text--disabled
    …
    --sf-color-text--inverse
    …
    --sf-color-text--muted
    …
    --sf-color-text--on-action
    …
    --sf-color-text--on-base
    …
    --sf-color-text--on-danger
    …
    --sf-color-text--on-info
    …
    --sf-color-text--on-inverse
    …
    --sf-color-text--on-neutral
    …
    --sf-color-text--on-primary
    …
    --sf-color-text--on-secondary
    …
    --sf-color-text--on-success
    …
    --sf-color-text--on-tertiary
    …
    --sf-color-text--on-warning
    …
    --sf-color-text--placeholder
    …
    --sf-color-text--secondary
    …
    --sf-color-warning
    …
    --sf-color-warning-muted
    …
    --sf-color-warning-source-dark
    …
    --sf-color-warning-source-light
    …
    --sf-color-warning-strong
    …
    --sf-color-warning-subtle
    …
    --sf-color-white
    …
    
+      
    color 251
    
+      
    --sf-color-action
    …
    --sf-color-action--active
    …
    --sf-color-action--hover
    …
    --sf-color-action-100
    …
    --sf-color-action-200
    …
    --sf-color-action-300
    …
    --sf-color-action-400
    …
    --sf-color-action-50
    …
    --sf-color-action-500
    …
    --sf-color-action-600
    …
    --sf-color-action-700
    …
    --sf-color-action-800
    …
    --sf-color-action-900
    …
    --sf-color-action-950
    …
    --sf-color-action-a10
    …
    --sf-color-action-a30
    …
    --sf-color-action-a5
    …
    --sf-color-action-a50
    …
    --sf-color-action-a80
    …
    --sf-color-action-darker
    …
    --sf-color-action-ghost
    …
    --sf-color-action-lighter
    …
    --sf-color-action-muted
    …
    --sf-color-action-source-dark
    …
    --sf-color-action-source-light
    …
    --sf-color-action-subtle
    …
    --sf-color-action-superdark
    …
    --sf-color-action-superlight
    …
    --sf-color-action-xdark
    …
    --sf-color-action-xlight
    …
    --sf-color-base
    …
    --sf-color-base--active
    …
    --sf-color-base--hover
    …
    --sf-color-base-100
    …
    --sf-color-base-200
    …
    --sf-color-base-300
    …
    --sf-color-base-400
    …
    --sf-color-base-50
    …
    --sf-color-base-500
    …
    --sf-color-base-600
    …
    --sf-color-base-700
    …
    --sf-color-base-800
    …
    --sf-color-base-900
    …
    --sf-color-base-950
    …
    --sf-color-base-a10
    …
    --sf-color-base-a30
    …
    --sf-color-base-a5
    …
    --sf-color-base-a50
    …
    --sf-color-base-a80
    …
    --sf-color-base-ghost
    …
    --sf-color-base-muted
    …
    --sf-color-base-source-dark
    …
    --sf-color-base-source-light
    …
    --sf-color-base-subtle
    …
    --sf-color-bg
    …
    --sf-color-bg--active
    …
    --sf-color-bg--disabled
    …
    --sf-color-bg--focus
    …
    --sf-color-bg--hover
    …
    --sf-color-bg--selected
    …
    --sf-color-black
    …
    --sf-color-border
    …
    --sf-color-border--disabled
    …
    --sf-color-border--focus
    …
    --sf-color-border--strong
    …
    --sf-color-border--subtle
    …
    --sf-color-border--translucent
    …
    --sf-color-code-bg
    …
    --sf-color-code-text
    …
    --sf-color-danger
    …
    --sf-color-danger-muted
    …
    --sf-color-danger-source-dark
    …
    --sf-color-danger-source-light
    …
    --sf-color-danger-strong
    …
    --sf-color-danger-subtle
    …
    --sf-color-dim
    …
    --sf-color-heading
    …
    --sf-color-info
    …
    --sf-color-info-muted
    …
    --sf-color-info-source-dark
    …
    --sf-color-info-source-light
    …
    --sf-color-info-strong
    …
    --sf-color-info-subtle
    …
    --sf-color-inset
    …
    --sf-color-inverse
    …
    --sf-color-link
    …
    --sf-color-link--active
    …
    --sf-color-link--disabled
    …
    --sf-color-link--hover
    …
    --sf-color-link--underline
    …
    --sf-color-link--visited
    …
    --sf-color-mark-bg
    …
    --sf-color-mark-text
    …
    --sf-color-neutral
    …
    --sf-color-neutral--active
    …
    --sf-color-neutral--hover
    …
    --sf-color-neutral-100
    …
    --sf-color-neutral-200
    …
    --sf-color-neutral-300
    …
    --sf-color-neutral-400
    …
    --sf-color-neutral-50
    …
    --sf-color-neutral-500
    …
    --sf-color-neutral-600
    …
    --sf-color-neutral-700
    …
    --sf-color-neutral-800
    …
    --sf-color-neutral-900
    …
    --sf-color-neutral-950
    …
    --sf-color-neutral-a10
    …
    --sf-color-neutral-a30
    …
    --sf-color-neutral-a5
    …
    --sf-color-neutral-a50
    …
    --sf-color-neutral-a80
    …
    --sf-color-neutral-darker
    …
    --sf-color-neutral-ghost
    …
    --sf-color-neutral-lighter
    …
    --sf-color-neutral-muted
    …
    --sf-color-neutral-source-dark
    …
    --sf-color-neutral-source-light
    …
    --sf-color-neutral-subtle
    …
    --sf-color-neutral-superdark
    …
    --sf-color-neutral-superlight
    …
    --sf-color-neutral-xdark
    …
    --sf-color-neutral-xlight
    …
    --sf-color-overlay
    …
    --sf-color-primary
    …
    --sf-color-primary--active
    …
    --sf-color-primary--hover
    …
    --sf-color-primary-100
    …
    --sf-color-primary-200
    …
    --sf-color-primary-300
    …
    --sf-color-primary-400
    …
    --sf-color-primary-50
    …
    --sf-color-primary-500
    …
    --sf-color-primary-600
    …
    --sf-color-primary-700
    …
    --sf-color-primary-800
    …
    --sf-color-primary-900
    …
    --sf-color-primary-950
    …
    --sf-color-primary-a10
    …
    --sf-color-primary-a30
    …
    --sf-color-primary-a5
    …
    --sf-color-primary-a50
    …
    --sf-color-primary-a80
    …
    --sf-color-primary-darker
    …
    --sf-color-primary-ghost
    …
    --sf-color-primary-lighter
    …
    --sf-color-primary-muted
    …
    --sf-color-primary-source-dark
    …
    --sf-color-primary-source-light
    …
    --sf-color-primary-subtle
    …
    --sf-color-primary-superdark
    …
    --sf-color-primary-superlight
    …
    --sf-color-primary-xdark
    …
    --sf-color-primary-xlight
    …
    --sf-color-raised
    …
    --sf-color-scheme
    …
    --sf-color-secondary
    …
    --sf-color-secondary--active
    …
    --sf-color-secondary--hover
    …
    --sf-color-secondary-100
    …
    --sf-color-secondary-200
    …
    --sf-color-secondary-300
    …
    --sf-color-secondary-400
    …
    --sf-color-secondary-50
    …
    --sf-color-secondary-500
    …
    --sf-color-secondary-600
    …
    --sf-color-secondary-700
    …
    --sf-color-secondary-800
    …
    --sf-color-secondary-900
    …
    --sf-color-secondary-950
    …
    --sf-color-secondary-a10
    …
    --sf-color-secondary-a30
    …
    --sf-color-secondary-a5
    …
    --sf-color-secondary-a50
    …
    --sf-color-secondary-a80
    …
    --sf-color-secondary-darker
    …
    --sf-color-secondary-ghost
    …
    --sf-color-secondary-lighter
    …
    --sf-color-secondary-muted
    …
    --sf-color-secondary-source-dark
    …
    --sf-color-secondary-source-light
    …
    --sf-color-secondary-subtle
    …
    --sf-color-secondary-superdark
    …
    --sf-color-secondary-superlight
    …
    --sf-color-secondary-xdark
    …
    --sf-color-secondary-xlight
    …
    --sf-color-selection-bg
    …
    --sf-color-selection-bg--alt
    …
    --sf-color-selection-text
    …
    --sf-color-selection-text--alt
    …
    --sf-color-success
    …
    --sf-color-success-muted
    …
    --sf-color-success-source-dark
    …
    --sf-color-success-source-light
    …
    --sf-color-success-strong
    …
    --sf-color-success-subtle
    …
    --sf-color-surface
    …
    --sf-color-tertiary
    …
    --sf-color-tertiary--active
    …
    --sf-color-tertiary--hover
    …
    --sf-color-tertiary-100
    …
    --sf-color-tertiary-200
    …
    --sf-color-tertiary-300
    …
    --sf-color-tertiary-400
    …
    --sf-color-tertiary-50
    …
    --sf-color-tertiary-500
    …
    --sf-color-tertiary-600
    …
    --sf-color-tertiary-700
    …
    --sf-color-tertiary-800
    …
    --sf-color-tertiary-900
    …
    --sf-color-tertiary-950
    …
    --sf-color-tertiary-a10
    …
    --sf-color-tertiary-a30
    …
    --sf-color-tertiary-a5
    …
    --sf-color-tertiary-a50
    …
    --sf-color-tertiary-a80
    …
    --sf-color-tertiary-darker
    …
    --sf-color-tertiary-ghost
    …
    --sf-color-tertiary-lighter
    …
    --sf-color-tertiary-muted
    …
    --sf-color-tertiary-source-dark
    …
    --sf-color-tertiary-source-light
    …
    --sf-color-tertiary-subtle
    …
    --sf-color-tertiary-superdark
    …
    --sf-color-tertiary-superlight
    …
    --sf-color-tertiary-xdark
    …
    --sf-color-tertiary-xlight
    …
    --sf-color-text
    …
    --sf-color-text--disabled
    …
    --sf-color-text--inverse
    …
    --sf-color-text--muted
    …
    --sf-color-text--on-action
    …
    --sf-color-text--on-base
    …
    --sf-color-text--on-danger
    …
    --sf-color-text--on-info
    …
    --sf-color-text--on-inverse
    …
    --sf-color-text--on-neutral
    …
    --sf-color-text--on-primary
    …
    --sf-color-text--on-secondary
    …
    --sf-color-text--on-success
    …
    --sf-color-text--on-tertiary
    …
    --sf-color-text--on-warning
    …
    --sf-color-text--placeholder
    …
    --sf-color-text--secondary
    …
    --sf-color-warning
    …
    --sf-color-warning-muted
    …
    --sf-color-warning-source-dark
    …
    --sf-color-warning-source-light
    …
    --sf-color-warning-strong
    …
    --sf-color-warning-subtle
    …
    --sf-color-white
    …
    
       
    gradient 9
    
       
    --sf-gradient-brand
    …
    --sf-gradient-fade--b
    …
    --sf-gradient-fade--l
    …
    --sf-gradient-fade--r
    …
    --sf-gradient-fade--t
    …
    --sf-gradient-primary
    …
    --sf-gradient-secondary
    …
    --sf-gradient-surface
    …
    --sf-gradient-tertiary
    …
    
       
    shadow 13
    
@@ -1279,8 +1311,8 @@ 
    ease 8
    
       
    --sf-ease-bounce…
    --sf-ease-elastic…
    --sf-ease-in…
    --sf-ease-in-out…
    --sf-ease-linear…
    --sf-ease-out…
    --sf-ease-overshoot…
    --sf-ease-spring…
    
       
    transition 10
    
       
    --sf-transition-colors…
    --sf-transition-enter…
    --sf-transition-exit…
    --sf-transition-fast…
    --sf-transition-form-field…
    --sf-transition-opacity…
    --sf-transition-overlay…
    --sf-transition-shadow…
    --sf-transition-slow…
    --sf-transition-transform…
    
-      
    animation 19
    
-      
    --sf-animation-blink
    …
    --sf-animation-color-pulse
    …
    --sf-animation-delay-1…
    --sf-animation-delay-2…
    --sf-animation-delay-3…
    --sf-animation-delay-4…
    --sf-animation-delay-5…
    --sf-animation-fade-in
    …
    --sf-animation-fade-out
    …
    --sf-animation-float
    …
    --sf-animation-ping
    …
    --sf-animation-scale-down
    …
    --sf-animation-scale-up
    …
    --sf-animation-shimmer
    …
    --sf-animation-slide-in-down
    …
    --sf-animation-slide-in-left
    …
    --sf-animation-slide-in-right
    …
    --sf-animation-slide-in-up
    …
    --sf-animation-spin
    …
    
+      
    animation 23
    
+      
    --sf-animation-blink
    …
    --sf-animation-color-pulse
    …
    --sf-animation-delay-1…
    --sf-animation-delay-2…
    --sf-animation-delay-3…
    --sf-animation-delay-4…
    --sf-animation-delay-5…
    --sf-animation-fade-in
    …
    --sf-animation-fade-out
    …
    --sf-animation-float
    …
    --sf-animation-ping
    …
    --sf-animation-scale-down
    …
    --sf-animation-scale-up
    …
    --sf-animation-shimmer
    …
    --sf-animation-slide-in-down
    …
    --sf-animation-slide-in-left
    …
    --sf-animation-slide-in-right
    …
    --sf-animation-slide-in-up
    …
    --sf-animation-slide-out-down
    …
    --sf-animation-slide-out-left
    …
    --sf-animation-slide-out-right
    …
    --sf-animation-slide-out-up
    …
    --sf-animation-spin
    …
    
       
    border 10
    
       
    --sf-border…
    --sf-border-scale…
    --sf-border-strong…
    --sf-border-style…
    --sf-border-subtle…
    --sf-border-width-1…
    --sf-border-width-2…
    --sf-border-width-3…
    --sf-border-width-4…
    --sf-border-width-hairline…
    
       
    focus 5
    
@@ -1381,6 +1413,8 @@ 
    lumlocker 1
    
       
    --sf-lumlocker adv…
    
       
    mask 2
    
       
    --sf-mask-scrim-end adv
    …
    --sf-mask-scrim-start adv
    …
    
+      
    media 1
    
+      
    --sf-media-radius…
    
       
    motion 1
    
       
    --sf-motion-scale adv…
    
       
    object 2
    
@@ -1403,8 +1437,8 @@ 
    safe 4
    
       
    --sf-safe-bottom adv…
    --sf-safe-left adv…
    --sf-safe-right adv…
    --sf-safe-top adv…
    
       
    scrim 4
    
       
    --sf-scrim-color…
    --sf-scrim-direction…
    --sf-scrim-gradient
    …
    --sf-scrim-text-shadow…
    
-      
    scroll 3
    
-      
    --sf-scroll-shadow-size
    …
    --sf-scroll-timeline-range-end adv
    …
    --sf-scroll-timeline-range-start adv
    …
    
+      
    scroll 5
    
+      
    --sf-scroll-shadow-size
    …
    --sf-scroll-timeline-range-end adv
    …
    --sf-scroll-timeline-range-exit-end
    …
    --sf-scroll-timeline-range-exit-start
    …
    --sf-scroll-timeline-range-start adv
    …
    
       
    scrollbar 2
    
       
    --sf-scrollbar-thumb…
    --sf-scrollbar-track…
    
       
    section 8
    
diff --git a/demos/full-api-demo.html b/demos/full-api-demo.html
index 8e27bf7c..f1710f09 100644
--- a/demos/full-api-demo.html
+++ b/demos/full-api-demo.html
@@ -121,7 +121,7 @@
   
   
    
     
    SLASHED Full API Demo
    
-    
    v0.7.0 · optimal-components bundle from jsDelivr CDN · 308 classes · 711 tokens (225 configurable)
    
+    
    v0.7.0 · optimal-components bundle from jsDelivr CDN · 316 classes · 720 tokens (229 configurable)
    
     
    Baseline render with default tokens. Use the toolbar to switch theme, toggle the ultimate override live, or replay motion. The always-on override variant is full-api-demo-with-overrides.html.
    
 
     
    
@@ -149,7 +149,7 @@ 
    Shadow
    
       
    Interactive functions motion · transitions · gradients
    
 
       
    Animations 
    
-      
    animation-blink
    animation-color-pulse
    animation-fade-in
    animation-fade-out
    animation-float
    animation-ping
    animation-scale-down
    animation-scale-up
    animation-shimmer
    animation-slide-in-down
    animation-slide-in-left
    animation-slide-in-right
    animation-slide-in-up
    animation-spin
    
+      
    animation-blink
    animation-color-pulse
    animation-fade-in
    animation-fade-out
    animation-float
    animation-ping
    animation-scale-down
    animation-scale-up
    animation-shimmer
    animation-slide-in-down
    animation-slide-in-left
    animation-slide-in-right
    animation-slide-in-up
    animation-slide-out-down
    animation-slide-out-left
    animation-slide-out-right
    animation-slide-out-up
    animation-spin
    
 
       
    Easing curves 
    
       
    ease-bounce
    ease-elastic
    ease-in
    ease-in-out
    ease-linear
    ease-out
    ease-overshoot
    ease-spring
    
@@ -168,7 +168,7 @@ 
    Drop shadows (filter)
    
     
    
 
     
    
-      
    Layout primitives 136
    
+      
    Layout primitives 138
    
       
    
       
    
         
    .sf-alternate
    
@@ -330,6 +330,14 @@ 
    Layout primitives 136
    
         
    .sf-cq
    
         
    1
    2
    3
    4
    
       
    
+      
    
+        
    .sf-divide
    
+        
    1
    2
    3
    4
    
+      
    
+      
    
+        
    .sf-divide--vertical
    
+        
    1
    2
    3
    4
    
+      
    
       
    
         
    .sf-divider
    
         
    above
    below
    
@@ -1115,7 +1123,7 @@ 
    State classes 40
    
       
    
     
    
     
    
-      
    Motion / animation 15
    
+      
    Motion / animation 21
    
       
    
       
    
         
    .sf-color-pulse
    
@@ -1145,6 +1153,30 @@ 
    Motion / animation 15
    
         
    .sf-entrance--scale-up
    
         
    entrance--scale-up
    
       
    
+      
    
+        
    .sf-exit--fade
    
+        
    exit--fade
    
+      
    
+      
    
+        
    .sf-exit--fade-down
    
+        
    exit--fade-down
    
+      
    
+      
    
+        
    .sf-exit--fade-left
    
+        
    exit--fade-left
    
+      
    
+      
    
+        
    .sf-exit--fade-right
    
+        
    exit--fade-right
    
+      
    
+      
    
+        
    .sf-exit--fade-up
    
+        
    exit--fade-up
    
+      
    
+      
    
+        
    .sf-exit--scale-down
    
+        
    exit--scale-down
    
+      
    
       
    
         
    .sf-fade-in
    
         
    fade-in
    
@@ -1248,10 +1280,10 @@ 
    Theme 1
    
     
    
 
     
    
-      
    Part 2 — Complete token reference 711 tokens · live values
    
+      
    Part 2 — Complete token reference 720 tokens · live values
    
       
    Every --sf-* token — knob and consumption, all tiers — with its live computed value (filled by JS). Toggle the theme or the override in the toolbar and watch every value recompute. Tokens that resolve to a colour, length, shadow, gradient, type or motion value also show a visual.
    
-      
    color 249
    
-      
    --sf-color-action
    …
    --sf-color-action--active
    …
    --sf-color-action--hover
    …
    --sf-color-action-100
    …
    --sf-color-action-200
    …
    --sf-color-action-300
    …
    --sf-color-action-400
    …
    --sf-color-action-50
    …
    --sf-color-action-500
    …
    --sf-color-action-600
    …
    --sf-color-action-700
    …
    --sf-color-action-800
    …
    --sf-color-action-900
    …
    --sf-color-action-950
    …
    --sf-color-action-a10
    …
    --sf-color-action-a30
    …
    --sf-color-action-a5
    …
    --sf-color-action-a50
    …
    --sf-color-action-a80
    …
    --sf-color-action-darker
    …
    --sf-color-action-ghost
    …
    --sf-color-action-lighter
    …
    --sf-color-action-muted
    …
    --sf-color-action-source-dark
    …
    --sf-color-action-source-light
    …
    --sf-color-action-subtle
    …
    --sf-color-action-superdark
    …
    --sf-color-action-superlight
    …
    --sf-color-action-xdark
    …
    --sf-color-action-xlight
    …
    --sf-color-base
    …
    --sf-color-base--active
    …
    --sf-color-base--hover
    …
    --sf-color-base-100
    …
    --sf-color-base-200
    …
    --sf-color-base-300
    …
    --sf-color-base-400
    …
    --sf-color-base-50
    …
    --sf-color-base-500
    …
    --sf-color-base-600
    …
    --sf-color-base-700
    …
    --sf-color-base-800
    …
    --sf-color-base-900
    …
    --sf-color-base-950
    …
    --sf-color-base-a10
    …
    --sf-color-base-a30
    …
    --sf-color-base-a5
    …
    --sf-color-base-a50
    …
    --sf-color-base-a80
    …
    --sf-color-base-ghost
    …
    --sf-color-base-muted
    …
    --sf-color-base-source-dark
    …
    --sf-color-base-source-light
    …
    --sf-color-base-subtle
    …
    --sf-color-bg
    …
    --sf-color-bg--active
    …
    --sf-color-bg--disabled
    …
    --sf-color-bg--focus
    …
    --sf-color-bg--hover
    …
    --sf-color-bg--selected
    …
    --sf-color-black
    …
    --sf-color-border
    …
    --sf-color-border--disabled
    …
    --sf-color-border--focus
    …
    --sf-color-border--strong
    …
    --sf-color-border--subtle
    …
    --sf-color-border--translucent
    …
    --sf-color-code-bg
    …
    --sf-color-code-text
    …
    --sf-color-danger
    …
    --sf-color-danger-muted
    …
    --sf-color-danger-source-dark
    …
    --sf-color-danger-source-light
    …
    --sf-color-danger-strong
    …
    --sf-color-danger-subtle
    …
    --sf-color-dim
    …
    --sf-color-heading
    …
    --sf-color-info
    …
    --sf-color-info-muted
    …
    --sf-color-info-source-dark
    …
    --sf-color-info-source-light
    …
    --sf-color-info-strong
    …
    --sf-color-info-subtle
    …
    --sf-color-inset
    …
    --sf-color-inverse
    …
    --sf-color-link
    …
    --sf-color-link--active
    …
    --sf-color-link--disabled
    …
    --sf-color-link--hover
    …
    --sf-color-link--underline
    …
    --sf-color-link--visited
    …
    --sf-color-mark-bg
    …
    --sf-color-mark-text
    …
    --sf-color-neutral
    …
    --sf-color-neutral--active
    …
    --sf-color-neutral--hover
    …
    --sf-color-neutral-100
    …
    --sf-color-neutral-200
    …
    --sf-color-neutral-300
    …
    --sf-color-neutral-400
    …
    --sf-color-neutral-50
    …
    --sf-color-neutral-500
    …
    --sf-color-neutral-600
    …
    --sf-color-neutral-700
    …
    --sf-color-neutral-800
    …
    --sf-color-neutral-900
    …
    --sf-color-neutral-950
    …
    --sf-color-neutral-a10
    …
    --sf-color-neutral-a30
    …
    --sf-color-neutral-a5
    …
    --sf-color-neutral-a50
    …
    --sf-color-neutral-a80
    …
    --sf-color-neutral-darker
    …
    --sf-color-neutral-ghost
    …
    --sf-color-neutral-lighter
    …
    --sf-color-neutral-muted
    …
    --sf-color-neutral-source-dark
    …
    --sf-color-neutral-source-light
    …
    --sf-color-neutral-subtle
    …
    --sf-color-neutral-superdark
    …
    --sf-color-neutral-superlight
    …
    --sf-color-neutral-xdark
    …
    --sf-color-neutral-xlight
    …
    --sf-color-overlay
    …
    --sf-color-primary
    …
    --sf-color-primary--active
    …
    --sf-color-primary--hover
    …
    --sf-color-primary-100
    …
    --sf-color-primary-200
    …
    --sf-color-primary-300
    …
    --sf-color-primary-400
    …
    --sf-color-primary-50
    …
    --sf-color-primary-500
    …
    --sf-color-primary-600
    …
    --sf-color-primary-700
    …
    --sf-color-primary-800
    …
    --sf-color-primary-900
    …
    --sf-color-primary-950
    …
    --sf-color-primary-a10
    …
    --sf-color-primary-a30
    …
    --sf-color-primary-a5
    …
    --sf-color-primary-a50
    …
    --sf-color-primary-a80
    …
    --sf-color-primary-darker
    …
    --sf-color-primary-ghost
    …
    --sf-color-primary-lighter
    …
    --sf-color-primary-muted
    …
    --sf-color-primary-source-dark
    …
    --sf-color-primary-source-light
    …
    --sf-color-primary-subtle
    …
    --sf-color-primary-superdark
    …
    --sf-color-primary-superlight
    …
    --sf-color-primary-xdark
    …
    --sf-color-primary-xlight
    …
    --sf-color-raised
    …
    --sf-color-scheme
    …
    --sf-color-secondary
    …
    --sf-color-secondary--active
    …
    --sf-color-secondary--hover
    …
    --sf-color-secondary-100
    …
    --sf-color-secondary-200
    …
    --sf-color-secondary-300
    …
    --sf-color-secondary-400
    …
    --sf-color-secondary-50
    …
    --sf-color-secondary-500
    …
    --sf-color-secondary-600
    …
    --sf-color-secondary-700
    …
    --sf-color-secondary-800
    …
    --sf-color-secondary-900
    …
    --sf-color-secondary-950
    …
    --sf-color-secondary-a10
    …
    --sf-color-secondary-a30
    …
    --sf-color-secondary-a5
    …
    --sf-color-secondary-a50
    …
    --sf-color-secondary-a80
    …
    --sf-color-secondary-darker
    …
    --sf-color-secondary-ghost
    …
    --sf-color-secondary-lighter
    …
    --sf-color-secondary-muted
    …
    --sf-color-secondary-source-dark
    …
    --sf-color-secondary-source-light
    …
    --sf-color-secondary-subtle
    …
    --sf-color-secondary-superdark
    …
    --sf-color-secondary-superlight
    …
    --sf-color-secondary-xdark
    …
    --sf-color-secondary-xlight
    …
    --sf-color-selection-bg
    …
    --sf-color-selection-bg--alt
    …
    --sf-color-selection-text
    …
    --sf-color-selection-text--alt
    …
    --sf-color-success
    …
    --sf-color-success-muted
    …
    --sf-color-success-source-dark
    …
    --sf-color-success-source-light
    …
    --sf-color-success-strong
    …
    --sf-color-success-subtle
    …
    --sf-color-surface
    …
    --sf-color-tertiary
    …
    --sf-color-tertiary--active
    …
    --sf-color-tertiary--hover
    …
    --sf-color-tertiary-100
    …
    --sf-color-tertiary-200
    …
    --sf-color-tertiary-300
    …
    --sf-color-tertiary-400
    …
    --sf-color-tertiary-50
    …
    --sf-color-tertiary-500
    …
    --sf-color-tertiary-600
    …
    --sf-color-tertiary-700
    …
    --sf-color-tertiary-800
    …
    --sf-color-tertiary-900
    …
    --sf-color-tertiary-950
    …
    --sf-color-tertiary-a10
    …
    --sf-color-tertiary-a30
    …
    --sf-color-tertiary-a5
    …
    --sf-color-tertiary-a50
    …
    --sf-color-tertiary-a80
    …
    --sf-color-tertiary-darker
    …
    --sf-color-tertiary-ghost
    …
    --sf-color-tertiary-lighter
    …
    --sf-color-tertiary-muted
    …
    --sf-color-tertiary-source-dark
    …
    --sf-color-tertiary-source-light
    …
    --sf-color-tertiary-subtle
    …
    --sf-color-tertiary-superdark
    …
    --sf-color-tertiary-superlight
    …
    --sf-color-tertiary-xdark
    …
    --sf-color-tertiary-xlight
    …
    --sf-color-text
    …
    --sf-color-text--disabled
    …
    --sf-color-text--inverse
    …
    --sf-color-text--muted
    …
    --sf-color-text--on-action
    …
    --sf-color-text--on-base
    …
    --sf-color-text--on-danger
    …
    --sf-color-text--on-info
    …
    --sf-color-text--on-inverse
    …
    --sf-color-text--on-neutral
    …
    --sf-color-text--on-primary
    …
    --sf-color-text--on-secondary
    …
    --sf-color-text--on-success
    …
    --sf-color-text--on-tertiary
    …
    --sf-color-text--on-warning
    …
    --sf-color-text--placeholder
    …
    --sf-color-text--secondary
    …
    --sf-color-warning
    …
    --sf-color-warning-muted
    …
    --sf-color-warning-source-dark
    …
    --sf-color-warning-source-light
    …
    --sf-color-warning-strong
    …
    --sf-color-warning-subtle
    …
    --sf-color-white
    …
    
+      
    color 251
    
+      
    --sf-color-action
    …
    --sf-color-action--active
    …
    --sf-color-action--hover
    …
    --sf-color-action-100
    …
    --sf-color-action-200
    …
    --sf-color-action-300
    …
    --sf-color-action-400
    …
    --sf-color-action-50
    …
    --sf-color-action-500
    …
    --sf-color-action-600
    …
    --sf-color-action-700
    …
    --sf-color-action-800
    …
    --sf-color-action-900
    …
    --sf-color-action-950
    …
    --sf-color-action-a10
    …
    --sf-color-action-a30
    …
    --sf-color-action-a5
    …
    --sf-color-action-a50
    …
    --sf-color-action-a80
    …
    --sf-color-action-darker
    …
    --sf-color-action-ghost
    …
    --sf-color-action-lighter
    …
    --sf-color-action-muted
    …
    --sf-color-action-source-dark
    …
    --sf-color-action-source-light
    …
    --sf-color-action-subtle
    …
    --sf-color-action-superdark
    …
    --sf-color-action-superlight
    …
    --sf-color-action-xdark
    …
    --sf-color-action-xlight
    …
    --sf-color-base
    …
    --sf-color-base--active
    …
    --sf-color-base--hover
    …
    --sf-color-base-100
    …
    --sf-color-base-200
    …
    --sf-color-base-300
    …
    --sf-color-base-400
    …
    --sf-color-base-50
    …
    --sf-color-base-500
    …
    --sf-color-base-600
    …
    --sf-color-base-700
    …
    --sf-color-base-800
    …
    --sf-color-base-900
    …
    --sf-color-base-950
    …
    --sf-color-base-a10
    …
    --sf-color-base-a30
    …
    --sf-color-base-a5
    …
    --sf-color-base-a50
    …
    --sf-color-base-a80
    …
    --sf-color-base-ghost
    …
    --sf-color-base-muted
    …
    --sf-color-base-source-dark
    …
    --sf-color-base-source-light
    …
    --sf-color-base-subtle
    …
    --sf-color-bg
    …
    --sf-color-bg--active
    …
    --sf-color-bg--disabled
    …
    --sf-color-bg--focus
    …
    --sf-color-bg--hover
    …
    --sf-color-bg--selected
    …
    --sf-color-black
    …
    --sf-color-border
    …
    --sf-color-border--disabled
    …
    --sf-color-border--focus
    …
    --sf-color-border--strong
    …
    --sf-color-border--subtle
    …
    --sf-color-border--translucent
    …
    --sf-color-code-bg
    …
    --sf-color-code-text
    …
    --sf-color-danger
    …
    --sf-color-danger-muted
    …
    --sf-color-danger-source-dark
    …
    --sf-color-danger-source-light
    …
    --sf-color-danger-strong
    …
    --sf-color-danger-subtle
    …
    --sf-color-dim
    …
    --sf-color-heading
    …
    --sf-color-info
    …
    --sf-color-info-muted
    …
    --sf-color-info-source-dark
    …
    --sf-color-info-source-light
    …
    --sf-color-info-strong
    …
    --sf-color-info-subtle
    …
    --sf-color-inset
    …
    --sf-color-inverse
    …
    --sf-color-link
    …
    --sf-color-link--active
    …
    --sf-color-link--disabled
    …
    --sf-color-link--hover
    …
    --sf-color-link--underline
    …
    --sf-color-link--visited
    …
    --sf-color-mark-bg
    …
    --sf-color-mark-text
    …
    --sf-color-neutral
    …
    --sf-color-neutral--active
    …
    --sf-color-neutral--hover
    …
    --sf-color-neutral-100
    …
    --sf-color-neutral-200
    …
    --sf-color-neutral-300
    …
    --sf-color-neutral-400
    …
    --sf-color-neutral-50
    …
    --sf-color-neutral-500
    …
    --sf-color-neutral-600
    …
    --sf-color-neutral-700
    …
    --sf-color-neutral-800
    …
    --sf-color-neutral-900
    …
    --sf-color-neutral-950
    …
    --sf-color-neutral-a10
    …
    --sf-color-neutral-a30
    …
    --sf-color-neutral-a5
    …
    --sf-color-neutral-a50
    …
    --sf-color-neutral-a80
    …
    --sf-color-neutral-darker
    …
    --sf-color-neutral-ghost
    …
    --sf-color-neutral-lighter
    …
    --sf-color-neutral-muted
    …
    --sf-color-neutral-source-dark
    …
    --sf-color-neutral-source-light
    …
    --sf-color-neutral-subtle
    …
    --sf-color-neutral-superdark
    …
    --sf-color-neutral-superlight
    …
    --sf-color-neutral-xdark
    …
    --sf-color-neutral-xlight
    …
    --sf-color-overlay
    …
    --sf-color-primary
    …
    --sf-color-primary--active
    …
    --sf-color-primary--hover
    …
    --sf-color-primary-100
    …
    --sf-color-primary-200
    …
    --sf-color-primary-300
    …
    --sf-color-primary-400
    …
    --sf-color-primary-50
    …
    --sf-color-primary-500
    …
    --sf-color-primary-600
    …
    --sf-color-primary-700
    …
    --sf-color-primary-800
    …
    --sf-color-primary-900
    …
    --sf-color-primary-950
    …
    --sf-color-primary-a10
    …
    --sf-color-primary-a30
    …
    --sf-color-primary-a5
    …
    --sf-color-primary-a50
    …
    --sf-color-primary-a80
    …
    --sf-color-primary-darker
    …
    --sf-color-primary-ghost
    …
    --sf-color-primary-lighter
    …
    --sf-color-primary-muted
    …
    --sf-color-primary-source-dark
    …
    --sf-color-primary-source-light
    …
    --sf-color-primary-subtle
    …
    --sf-color-primary-superdark
    …
    --sf-color-primary-superlight
    …
    --sf-color-primary-xdark
    …
    --sf-color-primary-xlight
    …
    --sf-color-raised
    …
    --sf-color-scheme
    …
    --sf-color-secondary
    …
    --sf-color-secondary--active
    …
    --sf-color-secondary--hover
    …
    --sf-color-secondary-100
    …
    --sf-color-secondary-200
    …
    --sf-color-secondary-300
    …
    --sf-color-secondary-400
    …
    --sf-color-secondary-50
    …
    --sf-color-secondary-500
    …
    --sf-color-secondary-600
    …
    --sf-color-secondary-700
    …
    --sf-color-secondary-800
    …
    --sf-color-secondary-900
    …
    --sf-color-secondary-950
    …
    --sf-color-secondary-a10
    …
    --sf-color-secondary-a30
    …
    --sf-color-secondary-a5
    …
    --sf-color-secondary-a50
    …
    --sf-color-secondary-a80
    …
    --sf-color-secondary-darker
    …
    --sf-color-secondary-ghost
    …
    --sf-color-secondary-lighter
    …
    --sf-color-secondary-muted
    …
    --sf-color-secondary-source-dark
    …
    --sf-color-secondary-source-light
    …
    --sf-color-secondary-subtle
    …
    --sf-color-secondary-superdark
    …
    --sf-color-secondary-superlight
    …
    --sf-color-secondary-xdark
    …
    --sf-color-secondary-xlight
    …
    --sf-color-selection-bg
    …
    --sf-color-selection-bg--alt
    …
    --sf-color-selection-text
    …
    --sf-color-selection-text--alt
    …
    --sf-color-success
    …
    --sf-color-success-muted
    …
    --sf-color-success-source-dark
    …
    --sf-color-success-source-light
    …
    --sf-color-success-strong
    …
    --sf-color-success-subtle
    …
    --sf-color-surface
    …
    --sf-color-tertiary
    …
    --sf-color-tertiary--active
    …
    --sf-color-tertiary--hover
    …
    --sf-color-tertiary-100
    …
    --sf-color-tertiary-200
    …
    --sf-color-tertiary-300
    …
    --sf-color-tertiary-400
    …
    --sf-color-tertiary-50
    …
    --sf-color-tertiary-500
    …
    --sf-color-tertiary-600
    …
    --sf-color-tertiary-700
    …
    --sf-color-tertiary-800
    …
    --sf-color-tertiary-900
    …
    --sf-color-tertiary-950
    …
    --sf-color-tertiary-a10
    …
    --sf-color-tertiary-a30
    …
    --sf-color-tertiary-a5
    …
    --sf-color-tertiary-a50
    …
    --sf-color-tertiary-a80
    …
    --sf-color-tertiary-darker
    …
    --sf-color-tertiary-ghost
    …
    --sf-color-tertiary-lighter
    …
    --sf-color-tertiary-muted
    …
    --sf-color-tertiary-source-dark
    …
    --sf-color-tertiary-source-light
    …
    --sf-color-tertiary-subtle
    …
    --sf-color-tertiary-superdark
    …
    --sf-color-tertiary-superlight
    …
    --sf-color-tertiary-xdark
    …
    --sf-color-tertiary-xlight
    …
    --sf-color-text
    …
    --sf-color-text--disabled
    …
    --sf-color-text--inverse
    …
    --sf-color-text--muted
    …
    --sf-color-text--on-action
    …
    --sf-color-text--on-base
    …
    --sf-color-text--on-danger
    …
    --sf-color-text--on-info
    …
    --sf-color-text--on-inverse
    …
    --sf-color-text--on-neutral
    …
    --sf-color-text--on-primary
    …
    --sf-color-text--on-secondary
    …
    --sf-color-text--on-success
    …
    --sf-color-text--on-tertiary
    …
    --sf-color-text--on-warning
    …
    --sf-color-text--placeholder
    …
    --sf-color-text--secondary
    …
    --sf-color-warning
    …
    --sf-color-warning-muted
    …
    --sf-color-warning-source-dark
    …
    --sf-color-warning-source-light
    …
    --sf-color-warning-strong
    …
    --sf-color-warning-subtle
    …
    --sf-color-white
    …
    
       
    gradient 9
    
       
    --sf-gradient-brand
    …
    --sf-gradient-fade--b
    …
    --sf-gradient-fade--l
    …
    --sf-gradient-fade--r
    …
    --sf-gradient-fade--t
    …
    --sf-gradient-primary
    …
    --sf-gradient-secondary
    …
    --sf-gradient-surface
    …
    --sf-gradient-tertiary
    …
    
       
    shadow 13
    
@@ -1259,7 +1291,7 @@ 
    shadow 13
    
       
    drop 5
    
       
    --sf-drop-shadow-l
    …
    --sf-drop-shadow-m
    …
    --sf-drop-shadow-s
    …
    --sf-drop-shadow-xl
    …
    --sf-drop-shadow-xs
    …
    
       
    radius 14
    
-      
    --sf-radius-2xl
    …
    --sf-radius-2xs
    …
    --sf-radius-3xl
    …
    --sf-radius-4xl
    …
    --sf-radius-full
    …
    --sf-radius-l
    …
    --sf-radius-m
    …
    --sf-radius-none
    …
    --sf-radius-outer adv
    …
    --sf-media-radius
    …
    --sf-radius-pill
    …
    --sf-radius-s
    …
    --sf-radius-scale adv…
    --sf-radius-xl
    …
    --sf-radius-xs
    …
    
+      
    --sf-radius-2xl
    …
    --sf-radius-2xs
    …
    --sf-radius-3xl
    …
    --sf-radius-4xl
    …
    --sf-radius-full
    …
    --sf-radius-l
    …
    --sf-radius-m
    …
    --sf-radius-none
    …
    --sf-radius-outer adv
    …
    --sf-radius-pill
    …
    --sf-radius-s
    …
    --sf-radius-scale adv…
    --sf-radius-xl
    …
    --sf-radius-xs
    …
    
       
    space 16
    
       
    --sf-space-2xl…
    --sf-space-2xs…
    --sf-space-3xl…
    --sf-space-4xl…
    --sf-space-base-max adv
    …
    --sf-space-base-min adv
    …
    --sf-space-l…
    --sf-space-m…
    --sf-space-none
    …
    --sf-space-px
    …
    --sf-space-ratio-max adv
    …
    --sf-space-ratio-min adv
    …
    --sf-space-s…
    --sf-space-scale adv
    …
    --sf-space-xl…
    --sf-space-xs…
    
       
    size 5
    
@@ -1278,8 +1310,8 @@ 
    ease 8
    
       
    --sf-ease-bounce…
    --sf-ease-elastic…
    --sf-ease-in…
    --sf-ease-in-out…
    --sf-ease-linear…
    --sf-ease-out…
    --sf-ease-overshoot…
    --sf-ease-spring…
    
       
    transition 10
    
       
    --sf-transition-colors…
    --sf-transition-enter…
    --sf-transition-exit…
    --sf-transition-fast…
    --sf-transition-form-field…
    --sf-transition-opacity…
    --sf-transition-overlay…
    --sf-transition-shadow…
    --sf-transition-slow…
    --sf-transition-transform…
    
-      
    animation 19
    
-      
    --sf-animation-blink
    …
    --sf-animation-color-pulse
    …
    --sf-animation-delay-1…
    --sf-animation-delay-2…
    --sf-animation-delay-3…
    --sf-animation-delay-4…
    --sf-animation-delay-5…
    --sf-animation-fade-in
    …
    --sf-animation-fade-out
    …
    --sf-animation-float
    …
    --sf-animation-ping
    …
    --sf-animation-scale-down
    …
    --sf-animation-scale-up
    …
    --sf-animation-shimmer
    …
    --sf-animation-slide-in-down
    …
    --sf-animation-slide-in-left
    …
    --sf-animation-slide-in-right
    …
    --sf-animation-slide-out-up
    …
    --sf-animation-slide-out-down
    …
    --sf-animation-slide-out-left
    …
    --sf-animation-slide-out-right
    …
    --sf-animation-slide-in-up
    …
    --sf-animation-spin
    …
    
+      
    animation 23
    
+      
    --sf-animation-blink
    …
    --sf-animation-color-pulse
    …
    --sf-animation-delay-1…
    --sf-animation-delay-2…
    --sf-animation-delay-3…
    --sf-animation-delay-4…
    --sf-animation-delay-5…
    --sf-animation-fade-in
    …
    --sf-animation-fade-out
    …
    --sf-animation-float
    …
    --sf-animation-ping
    …
    --sf-animation-scale-down
    …
    --sf-animation-scale-up
    …
    --sf-animation-shimmer
    …
    --sf-animation-slide-in-down
    …
    --sf-animation-slide-in-left
    …
    --sf-animation-slide-in-right
    …
    --sf-animation-slide-in-up
    …
    --sf-animation-slide-out-down
    …
    --sf-animation-slide-out-left
    …
    --sf-animation-slide-out-right
    …
    --sf-animation-slide-out-up
    …
    --sf-animation-spin
    …
    
       
    border 10
    
       
    --sf-border…
    --sf-border-scale…
    --sf-border-strong…
    --sf-border-style…
    --sf-border-subtle…
    --sf-border-width-1…
    --sf-border-width-2…
    --sf-border-width-3…
    --sf-border-width-4…
    --sf-border-width-hairline…
    
       
    focus 5
    
@@ -1380,6 +1412,8 @@ 
    lumlocker 1
    
       
    --sf-lumlocker adv…
    
       
    mask 2
    
       
    --sf-mask-scrim-end adv
    …
    --sf-mask-scrim-start adv
    …
    
+      
    media 1
    
+      
    --sf-media-radius…
    
       
    motion 1
    
       
    --sf-motion-scale adv…
    
       
    object 2
    
@@ -1402,8 +1436,8 @@ 
    safe 4
    
       
    --sf-safe-bottom adv…
    --sf-safe-left adv…
    --sf-safe-right adv…
    --sf-safe-top adv…
    
       
    scrim 4
    
       
    --sf-scrim-color…
    --sf-scrim-direction…
    --sf-scrim-gradient
    …
    --sf-scrim-text-shadow…
    
-      
    scroll 3
    
-      
    --sf-scroll-shadow-size
    …
    --sf-scroll-timeline-range-end adv
    …
    --sf-scroll-timeline-range-exit-start
    …
    --sf-scroll-timeline-range-exit-end
    …
    --sf-scroll-timeline-range-start adv
    …
    
+      
    scroll 5
    
+      
    --sf-scroll-shadow-size
    …
    --sf-scroll-timeline-range-end adv
    …
    --sf-scroll-timeline-range-exit-end
    …
    --sf-scroll-timeline-range-exit-start
    …
    --sf-scroll-timeline-range-start adv
    …
    
       
    scrollbar 2
    
       
    --sf-scrollbar-thumb…
    --sf-scrollbar-track…
    
       
    section 8
    
diff --git a/demos/generate.mjs b/demos/generate.mjs
index b870b59f..1a936e40 100644
--- a/demos/generate.mjs
+++ b/demos/generate.mjs
@@ -61,6 +61,7 @@ const CURATED = {
   // zero-valued lengths → small but visible
   '--sf-bg-inset': '0.75rem',
   '--sf-bg-radius': '0.75rem',
+  '--sf-media-radius': '0.75rem',
   '--sf-box-border-width': '3px',
   '--sf-equal-rule-width': '2px',
   '--sf-radius-none': '0.4rem',
@@ -97,10 +98,13 @@ const CURATED = {
   '--sf-field-required-marker': '" \\2737"',
   '--sf-color-mark-text': 'oklch(0.45 0.27 320)',
   '--sf-color-selection-text': 'oklch(0.98 0 0)',
+  '--sf-color-selection-text--alt': 'oklch(0.9 0.06 300)',
   '--sf-print-page-size': 'letter',
   '--sf-shadow-strength': '0.45',
   '--sf-scroll-timeline-range-start': 'entry 20%',
   '--sf-scroll-timeline-range-end': 'cover 60%',
+  '--sf-scroll-timeline-range-exit-start': 'exit 20%',
+  '--sf-scroll-timeline-range-exit-end': 'exit 80%',
   // 'none' max-widths → a concrete cap so the constraint is visible
   '--sf-h1-max-width': '40ch',
   '--sf-h2-max-width': '40ch',
diff --git a/demos/ultimate-override.css b/demos/ultimate-override.css
index cc2384c8..45cc9ce3 100644
--- a/demos/ultimate-override.css
+++ b/demos/ultimate-override.css
@@ -5,7 +5,7 @@
    Perturbs every CONFIGURABLE (role: "knob") token to a valid, visibly-distinct
    value so full-api-demo.html can prove each one is wired end to end.
 
-   Coverage: 202 of 225 knob tokens overridden.
+   Coverage: 206 of 229 knob tokens overridden.
    23 knobs are intentionally NOT perturbed (structural /
    meta / sentinel) — listed with reasons at the bottom of this file.
    ============================================================================ */
@@ -68,6 +68,7 @@
   --sf-color-secondary-source-dark: oklch(from oklch(0.84 0.036 264) calc(l + 0.12) calc(c + 0.12) calc(h + 150) / alpha); /* was: oklch(0.84 0.036 264) */
   --sf-color-secondary-source-light: oklch(from oklch(0.22 0.04 264) calc(l + 0.12) calc(c + 0.12) calc(h + 150) / alpha); /* was: oklch(0.22 0.04 264) */
   --sf-color-selection-text: oklch(0.98 0 0); /* was: inherit */
+  --sf-color-selection-text--alt: oklch(0.9 0.06 300); /* was: inherit */
   --sf-color-success-source-dark: oklch(from oklch(0.70 0.144 145) calc(l + 0.12) calc(c + 0.12) calc(h + 150) / alpha); /* was: oklch(0.70 0.144 145) */
   --sf-color-success-source-light: oklch(from oklch(0.50 0.16 145) calc(l + 0.12) calc(c + 0.12) calc(h + 150) / alpha); /* was: oklch(0.50 0.16 145) */
   --sf-color-tertiary-source-dark: oklch(from oklch(0.74 0.198 295) calc(l + 0.12) calc(c + 0.12) calc(h + 150) / alpha); /* was: oklch(0.74 0.198 295) */
@@ -213,6 +214,9 @@
   /* lumlocker */
   --sf-lumlocker: 0.5; /* was: 0.65 */
 
+  /* media */
+  --sf-media-radius: 0.75rem; /* was: 0 */
+
   /* motion */
   --sf-motion-scale: 1.6; /* was: 1 */
 
@@ -270,6 +274,8 @@
   /* scroll */
   --sf-scroll-shadow-size: 3.2rem; /* was: 2rem */
   --sf-scroll-timeline-range-end: cover 60%; /* was: cover 30% */
+  --sf-scroll-timeline-range-exit-end: exit 80%; /* was: exit 100% */
+  --sf-scroll-timeline-range-exit-start: exit 20%; /* was: cover 70% */
   --sf-scroll-timeline-range-start: entry 20%; /* was: entry 0% */
 
   /* scrollbar */
diff --git a/docs/architecture.md b/docs/architecture.md
index 7abcf34a..712a6f67 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -47,18 +47,19 @@ core/
   accessibility.css            slashed.accessibility
   print.css                    slashed.print
 optional/
-  tokens.components.css   slashed.tokens  (component tokens — incomplete, all commented out)
+  tokens.components.css   slashed.tokens  (component tokens — partial; btn/card live, rest commented out)
   theme-example.css       slashed.themes  (copy-and-customise rebrand example; not bundled)
   forms.css               slashed.forms  (classless native form-control styling)
-  components.css          slashed.components  (8 components — incomplete, all commented out)
+  components.css          slashed.components  (btn + card live since v0.7.0; remaining commented out)
   utilities.css           slashed.utilities  (empty stub)
   legacy.css              slashed.legacy
 ```
 
 `optional/components.css` and `optional/tokens.components.css` are
-**not yet complete** (pre-v1.0): their `@layer` declarations are real, but
-every class definition and component token is commented out. They will
-land incrementally in upcoming minor releases (additive, no breaking
+**not yet complete** (pre-v1.0): their `@layer` declarations are real, and
+`.sf-btn` / `.sf-card` are live since v0.7.0, but the remaining component
+classes and their tokens are still commented out. They will land
+incrementally in upcoming minor releases (additive, no breaking
 changes). See [`docs/components.md`](components.md) for the eight
 taken component names and the roadmap.
 
@@ -167,10 +168,10 @@ BEM control.
 
 **slashed.layout** — layout primitives: `.sf-stack`, `.sf-cluster`, `.sf-sidebar`, `.sf-cover`, `.sf-grid`, `.sf-container`, `.sf-content-grid`, `.sf-icon`, etc. Layout tokens declared in `tokens.layout.css`, overridable per-instance via `style="--sf-stack-gap: …"`.
 
-**slashed.components** — UI blocks. Not yet complete (pre-v1.0): 8 component
+**slashed.components** — UI blocks. Partially complete (pre-v1.0): 8 component
 names are taken (`button`, `card`, `badge`, `tag`, `alert`, `avatar`,
-`modal`, `skeleton`) but all class definitions are commented out. When
-the classes ship, every value goes through `var()`. Requires
+`modal`, `skeleton`); `.sf-btn` and `.sf-card` are live since v0.7.0, the
+rest are still commented out. Every value goes through `var()`. Requires
 `tokens.components.css`.
 
 **slashed.macros** — recipes / patterns: `.sf-prose`,
@@ -375,9 +376,9 @@ so `bundle.config.json` lists eight outputs in total — are built by
 | Bundle | Contents |
 |---|---|
 | `slashed.optimal.css` | all `core/` + `forms` |
-| `slashed.optimal-components.css` | optimal + `tokens.components` *(incomplete)* + `components` *(incomplete)* |
+| `slashed.optimal-components.css` | optimal + `tokens.components` + `components` *(btn/card live, rest staged)* |
 | `slashed.optimal-utilities.css` | optimal + `utilities` *(empty)* |
-| `slashed.full.css` | optimal + `tokens.components` *(incomplete)* + `components` *(incomplete)* + `utilities` *(empty)* |
+| `slashed.full.css` | optimal + `tokens.components` + `components` *(btn/card live, rest staged)* + `utilities` *(empty)* |
 
 `optional/legacy.css` is **not bundled by default** — add it explicitly when
 you need back-compat shims. Because every rule sits in an `@layer`,
@@ -385,8 +386,8 @@ concatenation order within a bundle does not affect the cascade. The bundler
 strips local `@import` statements (the explicit file list resolves them), so
 the `tokens.components` import inside `components.css` is inlined by listing
 the token file first. `components.css` and `tokens.components.css` are
-incomplete (every selector/token commented out, no CSS emitted);
-`utilities.css` is an empty stub. Consumers can also build à la carte: raw
+partial — `.sf-btn` / `.sf-card` and their tokens emit CSS since v0.7.0,
+the remaining components stay commented out; `utilities.css` is an empty stub. Consumers can also build à la carte: raw
 `core/` plus hand-picked optional files. Each bundle also has a
 layer-flattened `.flat` variant.
 
@@ -449,8 +450,8 @@ Deliberate behaviours, documented so they aren't mistaken for bugs.
 
 `@starting-style` and CSS anchor positioning are only meaningful attached to
 a specific element/component transition (dialog, popover, tooltip). They
-are out of scope while `optional/components.css` is incomplete (every class
-commented out) and will be added with the components when they ship in
+are out of scope while `optional/components.css` is still filling in (only
+`.sf-btn` / `.sf-card` live so far) and will be added with the components when they ship in
 upcoming 0.x minors. The component-free part — scroll-driven animation
 range tokens (`--sf-scroll-timeline-range-*`) — already ships in
 `core/tokens.css`.

From 222c9f660bfea125f8740dc2f773c7b7e37403da Mon Sep 17 00:00:00 2001
From: Claude 
Date: Mon, 6 Jul 2026 17:50:59 +0000
Subject: [PATCH 5/8] docs: replace README with the refreshed version, retire
 copy-wip

Promote the copy-wip README draft to the repo root README.md: leaner
structure, matches the new landing page's voice, and already carries the
corrected facts (720 tokens, .sf-btn/.sf-card live since v0.7.0,
-first install). Port the Editor integration section (VS Code CSS
Custom Data) forward so that shipped feature stays documented.

With both copy-wip drafts now promoted (index.html + README.md), remove the
empty copy-wip/ directory and its stale _config.yml exclude entry.

Co-Authored-By: Claude Opus 4.8 
Claude-Session: https://claude.ai/code/session_016WH9Q15j1dZYxqTqMoomxq
---
 README.md                 | 306 +++++++++++++++-----------------------
 copy-wip/github-readme.md | 191 ------------------------
 2 files changed, 124 insertions(+), 373 deletions(-)
 delete mode 100644 copy-wip/github-readme.md

diff --git a/README.md b/README.md
index 7b655aa8..9cf7005c 100644
--- a/README.md
+++ b/README.md
@@ -1,72 +1,94 @@
-# SLASHED CSS Framework
-logo
+
    
+  SLASHED
+
    
+
+
    
+  A cascade-layer CSS framework you never compile.
    
+  720 design tokens, automatic dark mode, fluid type & spacing — no build step, no Node, no JavaScript.
+
    
+
+
    
+  version
+  CI
+  license
+  optimal bundle
+  runtime deps
+  CDN
+
    
+
+
    
+  Website ·
+  Configurator ·
+  Documentation ·
+  Changelog
+
    
 
-**S**tandalone · **L**ean · **A**gnostic · **S**tructured · **H**ybrid · **E**xplicit · **D**eterministic
+---
 
-A cascade-layer CSS framework. No build step. No Node. No runtime dependencies.
+SLASHED — **S**tandalone · **L**ean · **A**gnostic · **S**tructured · **H**ybrid · **E**xplicit · **D**eterministic — is a CSS framework built the other way around: instead of a toolchain that generates CSS, it ships CSS that generates your design system. Add one stylesheet:
 
-[![version](https://img.shields.io/github/v/tag/codeslash-dev/SLASHED?sort=semver&label=version&color=blueviolet&logo=css3)](https://github.com/codeslash-dev/SLASHED/tags)
-[![CI](https://img.shields.io/github/actions/workflow/status/codeslash-dev/SLASHED/ci.yml?branch=main&label=CI&logo=github)](https://github.com/codeslash-dev/SLASHED/actions/workflows/ci.yml)
-[![license](https://img.shields.io/github/license/codeslash-dev/SLASHED)](LICENSE)
-[![optimal bundle](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/codeslash-dev/SLASHED/dist/badge-optimal.json)](https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.min.css)
-[![runtime deps](https://img.shields.io/badge/runtime_deps-zero-brightgreen)](https://github.com/codeslash-dev/SLASHED/blob/main/package.json)
-[![CDN](https://img.shields.io/badge/CDN-jsDelivr-e84d3d?logo=jsdelivr&logoColor=white)](https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/)
+```html
+
+```
 
----
+Then rebrand the entire site by overriding six tokens. Every hover state, tint, shade, tonal step, the four status colors, and the complete dark palette derive from them — in plain CSS, at runtime, with nothing to recompile:
 
-## Quick start
+```css
+:root {
+  --sf-color-primary-source-light:   #3b5bdb;
+  --sf-color-secondary-source-light: #5c677d;
+  --sf-color-tertiary-source-light:  #0c8599;
+  --sf-color-action-source-light:    #0ca678;
+  --sf-color-neutral-source-light:   #495057;
+  --sf-color-base-source-light:      #f8f9fa;
+}
+```
 
-Use a pre-built bundle (see [Releases](https://github.com/codeslash-dev/SLASHED/releases)):
+Each color takes an optional `-source-dark` counterpart for per-mode control, and the derived status colors (`success` / `warning` / `danger` / `info`) can be overridden individually — up to 20 color knobs in total. Or use the `light-dark()` shorthand:
 
-```html
-
-
+```css
+:root { --sf-color-primary: light-dark(#3b5bdb, #748ffc); }
+```
 
-
-
+To design visually instead, open the [configurator](https://slashed.codeslash.dev/configurator/): live light/dark preview of every token, override-CSS export, and shareable config links.
 
-
-
+## The name is the philosophy
 
-
-
-```
+Every letter of SLASHED is a design commitment, and each one is checkable against the source:
 
-À la carte is also supported. When wiring up individual files, `core/layers.css`
-must load **first** — it declares the `@layer` order once, and that order (not
-`` order) controls the cascade, so the snippet below simply mirrors it
-for readability. `optional/legacy.css` is not bundled by default — add it
-explicitly if you need back-compat shims and load it **last**:
+- **Standalone** — one stylesheet. No build step, no Node, no runtime dependencies.
+- **Lean** — a foundation, not a kit. No utility-class bloat, nothing to purge, nothing you didn't ask for.
+- **Agnostic** — no stack assumptions. Any CMS, any builder, any JS framework, plain HTML — if it renders a stylesheet, SLASHED runs on it. No vendor lock-in, ever.
+- **Structured** — fifteen named cascade layers in a fixed order, and a fully catalogued token API with stability tiers (`PUBLIC` / `PUBLIC-ADVANCED` / `INTERNAL`).
+- **Hybrid** — classless where it can be (base elements, opt-in form styling), class-based where it counts (layout primitives, macros, `.is-*` states).
+- **Explicit** — every visual value is a named token; hardcoded numbers are treated as bugs. Even the browser floor is stated up front instead of failing quietly.
+- **Deterministic** — same tokens in, same design out. Every rule lives in a layer, so load order never changes the cascade, and every derived color and scale is computed by formula, not hand-picked.
 
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+## What's inside
 
-
-
+- **720 design tokens** (`--sf-*`) covering color, typography, spacing, layout, borders, shadows, motion, and z-index — catalogued in a machine-readable [API index](docs/api-index.json).
+- **Layout primitives** — `.sf-container`, `.sf-stack`, `.sf-grid`, `.sf-cluster`, `.sf-sidebar`, `.sf-switcher`, `.sf-cover`, `.sf-center`, `.sf-frame`, `.sf-reel`, `.sf-bento`, and more ([docs/layout.md](docs/layout.md)).
+- **Macros** — recipes like `.sf-prose`, `.sf-flow`, `.sf-truncate`, `.sf-aspect`, `.sf-scroll-shadow`, `.sf-surface` ([docs/macros.md](docs/macros.md)).
+- **State classes** — `.is-*` classes mapped to ARIA semantics ([docs/states.md](docs/states.md)).
+- **A fluid engine** — the type, display, and space scales are generated at runtime from 12 input scalars (viewport range, modular ratios, base sizes). Change one ratio and the whole system recalculates — no build ([docs/theming.md](docs/theming.md#fluid-engine)).
+- **Classless form styling**, motion, accessibility, and print modules.
 
-
-
+SLASHED is BEM-first: the token API is the product, and you build components on top. It ships **no utility classes in 0.x**. The first two component classes — `.sf-btn` and `.sf-card` — are **live since v0.7.0** (shipped in the `-components` and `full` bundles); the remaining components (badge, tag, alert, avatar, modal, skeleton, table) are staged in source, commented out until they land in a later minor. What you get today is the foundation plus the first components, honestly labelled.
+
+## Dark mode
+
+Pure CSS — no script, no flash:
+
+```html
+                        
+      
+
       
 ```
 
-`optional/components.css` and `optional/tokens.components.css` are incomplete:
-their `@layer` declarations are real, but every class and component token is
-commented out, so no CSS is emitted. `optional/utilities.css` is an empty stub —
-SLASHED is BEM-first and ships no utility classes in 0.x.
+## Cascade layers
 
-## Cascade layer order
+Every rule lives in one of fifteen named `@layer`s with a fixed order, declared in [`core/layers.css`](core/layers.css):
 
 ```text
 slashed.tokens → reset → base → forms → layout → components → macros →
@@ -74,129 +96,63 @@ utilities → states → themes → motion → accessibility → print → legac
 overrides
 ```
 
-Declared in `core/layers.css`. Later layers win. `slashed.overrides` is reserved
-for your own overrides and sits last. `slashed.legacy` sits just before it; its
-rules are gated by `@supports not (...)` and are inert on modern engines.
-`slashed.forms` holds the opt-in classless form styling from `optional/forms.css`.
-`slashed.macros` holds recipes like `.sf-prose`, `.sf-flow`, `.sf-truncate`,
-`.sf-aspect`, `.sf-scroll-shadow` (see [`docs/macros.md`](docs/macros.md)).
-
-## Scope of the base layer
-
-The `base` layer is a minimal foundation, **not** a classless UI kit. SLASHED is
-BEM-first: the token API is the product, and consumers build components on top.
-
-- **Global base** — flow and inline text: headings, `p`, `a`, `code`, `pre`,
-  `mark`, `hr`, `sub`/`sup`, `abbr`, `::selection`.
-- **Rich blocks** (`table`, `blockquote`, `figure`, `dl`) — styled **only inside
-  `.sf-prose`**, not globally.
-- **Interactive widgets** (`dialog`, `details`, `progress`, `meter`) — consumer
-  BEM / future `components` territory; `core` carries reset-level normalization
-  only.
-- **Native form controls** — opt-in via `optional/forms.css`.
-
-Any module may have its own token file (e.g. `tokens.print.css`), loaded with its
-parent module. All token files share the `slashed.tokens` layer.
+Later layers win, regardless of selector specificity. `slashed.overrides` is reserved for you and sits last — your customisations always beat framework defaults, no `!important` required.
 
 ## Bundles
 
+Pre-built bundles ship with every [release](https://github.com/codeslash-dev/SLASHED/releases) and on the [CDN](https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/), each as readable, minified (+ source map), and layer-flattened `.flat` variants:
+
 | Bundle | Contents |
 | --- | --- |
-| `slashed.optimal.css` | all `core/` + `forms` |
-| `slashed.optimal-components.css` | optimal + `tokens.components` *(incomplete)* + `components` *(incomplete)* |
-| `slashed.optimal-utilities.css` | optimal + `utilities` *(empty)* |
-| `slashed.full.css` | optimal + `tokens.components` *(incomplete)* + `components` *(incomplete)* + `utilities` *(empty)* |
-
-`optional/legacy.css` is **not bundled by default** — add it explicitly when you
-need back-compat shims. Every rule lives in an `@layer`, so concatenation order
-never affects the cascade. Each bundle is emitted readable and minified with a
-source map: `badges/slashed..css`, `badges/slashed..min.css`,
-`badges/slashed..min.css.map`, plus a layer-flattened `.flat` variant.
-`npm run build` prints raw / gzip / brotli sizes;
-`tests/bundle-size.spec.js` guards against bloat.
-
-## Customising tokens
-
-Override the source tokens in your own stylesheet — any valid CSS color works. The
-minimum rebrand is the 6 brand `-source-light` tokens; optionally add `-source-dark`
-counterparts for per-mode control. The 4 status colours
-(`success`/`warning`/`danger`/`info`) auto-derive but are overridable
-too, for up to 20 color tokens total (10 source-light + 10 source-dark).
-```css
-:root {
-  --sf-color-primary-source-light:   #3b5bdb;
-  --sf-color-secondary-source-light: #5c677d;
-  --sf-color-tertiary-source-light:  #0c8599;
-  --sf-color-action-source-light:    #0ca678;
-  --sf-color-neutral-source-light:   #495057;
-  --sf-color-base-source-light:      #f8f9fa;
-
-  /* optional dark counterparts for per-mode control */
-  --sf-color-primary-source-dark:    #748ffc;
-  --sf-color-action-source-dark:     #38d9a9;
-  --sf-color-neutral-source-dark:    #adb5bd;
-  --sf-color-base-source-dark:       #1a1b1e;
-}
-```
+| `slashed.optimal.css` | all of `core/` + classless forms — **recommended** |
+| `slashed.optimal-components.css` | optimal + the component layer — `.sf-btn` / `.sf-card` live, remaining components staged |
+| `slashed.optimal-utilities.css` | optimal + the staged utility layer *(inert in 0.x)* |
+| `slashed.full.css` | optimal + the component and utility layers |
 
-Or shorthand with `light-dark()`:
+
    
+À la carte loading (individual source files)
 
-```css
-:root { --sf-color-primary: light-dark(#3b5bdb, #748ffc); }
-```
+`core/layers.css` must load **first**; `optional/legacy.css` is not bundled by default — add it explicitly if you need back-compat shims and load it **last**:
 
-## Fluid engine
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
-The fluid type, display, and space scales are **generated at runtime** from 12
-input scalars — viewport range, modular ratios (a separate ratio for the min
-and max viewport), and base sizes. Change one ratio and the whole system
-regenerates — no build:
+
+
 
-```css
-:root {
-  --sf-text-ratio-max: 1.414;  /* steeper headline hierarchy on desktop */
-  --sf-fluid-max-vw:   110;    /* keep growing until very wide screens  */
-}
+
+
 ```
 
-For a one-off fluid value, write a `clamp()` that reads the engine's viewport
-range so it recalibrates with the scale. See
-[docs/theming.md](docs/theming.md#fluid-engine) and the
-all-dials-in-one-file reference
-[`optional/config-example.css`](optional/config-example.css).
-
-## Dark mode
-
-```html
-                   
- 
-
     
-```
+
    
 
 ## Browser support
 
-**Floor: Chrome 125+, Safari 18.0+, Firefox 129+** (≈ April–September 2024). Set by
-colour-system, fluid-engine, and scroll-driven animation features that arrived
-in 2024 with no graceful fallback — below the floor, derived colours collapse
-to `initial`, the generative scales stop computing, and scroll-driven animations
-are unavailable.
+**Floor: Chrome 125+, Safari 18.0+, Firefox 129+** (≈ April–September 2024). The color system, fluid engine, and scroll-driven animations depend on CSS features that arrived in 2024 with no graceful fallback:
 
 | Feature | Used for | Chrome | Safari | Firefox |
 |---|---|---|---|---|
-| `light-dark()` | every resolved colour token | 123 | 17.5 | 120 |
-| `@property` with `inherits: true` | animatable brand/status colours, `initial` reset | 85 | 16.4 | 128 |
-| `oklch(from …)` relative colour | hover/tint/shade/dark derivation | 119 | 16.4 | 128 |
-| `pow()` math function | generative fluid type/space scales (ratio + viewport) | 125 | 15.4 | 118 |
+| `light-dark()` | every resolved color token | 123 | 17.5 | 120 |
+| `@property` with `inherits: true` | animatable brand/status colors, `initial` reset | 85 | 16.4 | 128 |
+| `oklch(from …)` relative color | hover/tint/shade/dark derivation | 119 | 16.4 | 128 |
+| `pow()` math function | generative fluid type/space scales | 125 | 15.4 | 118 |
 | `animation-timeline: view()` | scroll-driven animations | 115 | 18.0 | 114 |
 | `@starting-style` | dialog / modal entry animations | 117 | 17.5 | 129 |
 
-The effective floor is the maximum per engine. Cascade layers (`@layer`) are
-foundational — below cascade-layer support (~2022) the architecture collapses.
-
-`optional/legacy.css` smooths a few property-level gaps within the
-cascade-layer window (Safari 15.0–15.3 `dvh`/`:focus-visible`, Safari
-`scrollbar-gutter`), gated by `@supports not (...)`. It does **not** lower the
-colour floor. If you must support older engines, SLASHED is not the right tool.
+`optional/legacy.css` smooths a few property-level gaps within that window but does **not** lower the color floor. If you must support older engines, SLASHED is not the right tool — and it would rather tell you that than break quietly.
 
 ## Documentation
 
@@ -205,45 +161,31 @@ colour floor. If you must support older engines, SLASHED is not the right tool.
 | [Architecture](docs/architecture.md) | layers, file structure, class taxonomy, bundles, token contract, performance |
 | [Theming](docs/theming.md) | rebrand in 6 tokens, dark mode, multi-brand, contrast |
 | [Layout primitives](docs/layout.md) | every `.sf-*` layout class + tokens |
-| [Macros / recipes](docs/macros.md) | every `.sf-*` macro-class + tokens |
-| [Components](docs/components.md) | taken component names + roadmap |
+| [Macros / recipes](docs/macros.md) | every `.sf-*` macro class + tokens |
+| [Components](docs/components.md) | reserved component names + roadmap |
 | [State classes](docs/states.md) | every `.is-*` + ARIA mapping + overlap semantics |
-| [Motion](docs/motion.md) | animation classes, tokens, reduced-motion |
+| [Motion](docs/motion.md) | animation classes, tokens, reduced motion |
 | [Class reference](docs/classes.md) | every shipped class (generated) |
 | [Token reference](docs/tokens.md) | all `--sf-*` tokens + defaults (generated) |
+| [LLM guide](docs/llm-guide.md) | compact API reference for AI-assisted development |
 | [Migration](docs/migration.md) | upgrading SLASHED + migrating from other frameworks |
-| [Contributing](CONTRIBUTING.md) | setup, conventions, tests |
 
-The WordPress plugin (Bricks Builder + Gutenberg) lives in its own repository:
-[slashed-for-wp](https://github.com/codeslash-dev/slashed-for-wp).
+## WordPress
 
-## Editor integration
-
-A generated [VS Code CSS Custom Data](https://github.com/microsoft/vscode-css-languageservice/blob/main/docs/customData.md)
-file ships alongside the bundles, so every `--sf-*` token autocompletes with
-its description and default value in any editor that supports the format.
-
-```json
-// .vscode/settings.json
-{
-  "css.customData": ["./node_modules/slashed/badges/css-custom-data.json"]
-}
-```
+The WordPress plugin — Bricks Builder and Gutenberg integrations plus a visual token editor in wp-admin — lives in its own repository: [SLASHED-Plugins](https://github.com/codeslash-dev/SLASHED-Plugins).
 
 ## Development
 
 ```sh
-npm run build        # build all badges/ bundles
+npm run build        # build all badges/ bundles + docs
 npm run watch        # rebuild on change
-npm run docs:tokens  # regenerate docs/tokens.md from source
 npm run lint:css     # stylelint all CSS
-npm run lint:css:fix # auto-fix where possible
-npm test             # token regression suite (Playwright, light + dark)
-npm run test:install # one-time: install the Chromium, Firefox & WebKit test browsers
-npm run release      # bump version (runs version-sync + build), tag & push
+npm test             # full suite (unit + Playwright, light + dark)
+npm run test:install # one-time: install the test browsers
 ```
 
-Commits follow [Conventional Commits](https://www.conventionalcommits.org/).
-`CHANGELOG.md` is maintained by hand following
-[Keep a Changelog](https://keepachangelog.com/); move `[Unreleased]` entries under
-a version heading before releasing (see [CONTRIBUTING.md](CONTRIBUTING.md)).
+Commits follow [Conventional Commits](https://www.conventionalcommits.org/); see [CONTRIBUTING.md](CONTRIBUTING.md) for setup and conventions.
+
+## License
+
+[MIT](LICENSE) © CODE/
diff --git a/copy-wip/github-readme.md b/copy-wip/github-readme.md
deleted file mode 100644
index 9cf7005c..00000000
--- a/copy-wip/github-readme.md
+++ /dev/null
@@ -1,191 +0,0 @@
-
    
-  SLASHED
-
    
-
-
    
-  A cascade-layer CSS framework you never compile.
    
-  720 design tokens, automatic dark mode, fluid type & spacing — no build step, no Node, no JavaScript.
-
    
-
-
    
-  version
-  CI
-  license
-  optimal bundle
-  runtime deps
-  CDN
-
    
-
-
    
-  Website ·
-  Configurator ·
-  Documentation ·
-  Changelog
-
    
-
----
-
-SLASHED — **S**tandalone · **L**ean · **A**gnostic · **S**tructured · **H**ybrid · **E**xplicit · **D**eterministic — is a CSS framework built the other way around: instead of a toolchain that generates CSS, it ships CSS that generates your design system. Add one stylesheet:
-
-```html
-
-```
-
-Then rebrand the entire site by overriding six tokens. Every hover state, tint, shade, tonal step, the four status colors, and the complete dark palette derive from them — in plain CSS, at runtime, with nothing to recompile:
-
-```css
-:root {
-  --sf-color-primary-source-light:   #3b5bdb;
-  --sf-color-secondary-source-light: #5c677d;
-  --sf-color-tertiary-source-light:  #0c8599;
-  --sf-color-action-source-light:    #0ca678;
-  --sf-color-neutral-source-light:   #495057;
-  --sf-color-base-source-light:      #f8f9fa;
-}
-```
-
-Each color takes an optional `-source-dark` counterpart for per-mode control, and the derived status colors (`success` / `warning` / `danger` / `info`) can be overridden individually — up to 20 color knobs in total. Or use the `light-dark()` shorthand:
-
-```css
-:root { --sf-color-primary: light-dark(#3b5bdb, #748ffc); }
-```
-
-To design visually instead, open the [configurator](https://slashed.codeslash.dev/configurator/): live light/dark preview of every token, override-CSS export, and shareable config links.
-
-## The name is the philosophy
-
-Every letter of SLASHED is a design commitment, and each one is checkable against the source:
-
-- **Standalone** — one stylesheet. No build step, no Node, no runtime dependencies.
-- **Lean** — a foundation, not a kit. No utility-class bloat, nothing to purge, nothing you didn't ask for.
-- **Agnostic** — no stack assumptions. Any CMS, any builder, any JS framework, plain HTML — if it renders a stylesheet, SLASHED runs on it. No vendor lock-in, ever.
-- **Structured** — fifteen named cascade layers in a fixed order, and a fully catalogued token API with stability tiers (`PUBLIC` / `PUBLIC-ADVANCED` / `INTERNAL`).
-- **Hybrid** — classless where it can be (base elements, opt-in form styling), class-based where it counts (layout primitives, macros, `.is-*` states).
-- **Explicit** — every visual value is a named token; hardcoded numbers are treated as bugs. Even the browser floor is stated up front instead of failing quietly.
-- **Deterministic** — same tokens in, same design out. Every rule lives in a layer, so load order never changes the cascade, and every derived color and scale is computed by formula, not hand-picked.
-
-## What's inside
-
-- **720 design tokens** (`--sf-*`) covering color, typography, spacing, layout, borders, shadows, motion, and z-index — catalogued in a machine-readable [API index](docs/api-index.json).
-- **Layout primitives** — `.sf-container`, `.sf-stack`, `.sf-grid`, `.sf-cluster`, `.sf-sidebar`, `.sf-switcher`, `.sf-cover`, `.sf-center`, `.sf-frame`, `.sf-reel`, `.sf-bento`, and more ([docs/layout.md](docs/layout.md)).
-- **Macros** — recipes like `.sf-prose`, `.sf-flow`, `.sf-truncate`, `.sf-aspect`, `.sf-scroll-shadow`, `.sf-surface` ([docs/macros.md](docs/macros.md)).
-- **State classes** — `.is-*` classes mapped to ARIA semantics ([docs/states.md](docs/states.md)).
-- **A fluid engine** — the type, display, and space scales are generated at runtime from 12 input scalars (viewport range, modular ratios, base sizes). Change one ratio and the whole system recalculates — no build ([docs/theming.md](docs/theming.md#fluid-engine)).
-- **Classless form styling**, motion, accessibility, and print modules.
-
-SLASHED is BEM-first: the token API is the product, and you build components on top. It ships **no utility classes in 0.x**. The first two component classes — `.sf-btn` and `.sf-card` — are **live since v0.7.0** (shipped in the `-components` and `full` bundles); the remaining components (badge, tag, alert, avatar, modal, skeleton, table) are staged in source, commented out until they land in a later minor. What you get today is the foundation plus the first components, honestly labelled.
-
-## Dark mode
-
-Pure CSS — no script, no flash:
-
-```html
-                        
-      
-
       
-```
-
-## Cascade layers
-
-Every rule lives in one of fifteen named `@layer`s with a fixed order, declared in [`core/layers.css`](core/layers.css):
-
-```text
-slashed.tokens → reset → base → forms → layout → components → macros →
-utilities → states → themes → motion → accessibility → print → legacy →
-overrides
-```
-
-Later layers win, regardless of selector specificity. `slashed.overrides` is reserved for you and sits last — your customisations always beat framework defaults, no `!important` required.
-
-## Bundles
-
-Pre-built bundles ship with every [release](https://github.com/codeslash-dev/SLASHED/releases) and on the [CDN](https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/), each as readable, minified (+ source map), and layer-flattened `.flat` variants:
-
-| Bundle | Contents |
-| --- | --- |
-| `slashed.optimal.css` | all of `core/` + classless forms — **recommended** |
-| `slashed.optimal-components.css` | optimal + the component layer — `.sf-btn` / `.sf-card` live, remaining components staged |
-| `slashed.optimal-utilities.css` | optimal + the staged utility layer *(inert in 0.x)* |
-| `slashed.full.css` | optimal + the component and utility layers |
-
-
    
-À la carte loading (individual source files)
-
-`core/layers.css` must load **first**; `optional/legacy.css` is not bundled by default — add it explicitly if you need back-compat shims and load it **last**:
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-
    
-
-## Browser support
-
-**Floor: Chrome 125+, Safari 18.0+, Firefox 129+** (≈ April–September 2024). The color system, fluid engine, and scroll-driven animations depend on CSS features that arrived in 2024 with no graceful fallback:
-
-| Feature | Used for | Chrome | Safari | Firefox |
-|---|---|---|---|---|
-| `light-dark()` | every resolved color token | 123 | 17.5 | 120 |
-| `@property` with `inherits: true` | animatable brand/status colors, `initial` reset | 85 | 16.4 | 128 |
-| `oklch(from …)` relative color | hover/tint/shade/dark derivation | 119 | 16.4 | 128 |
-| `pow()` math function | generative fluid type/space scales | 125 | 15.4 | 118 |
-| `animation-timeline: view()` | scroll-driven animations | 115 | 18.0 | 114 |
-| `@starting-style` | dialog / modal entry animations | 117 | 17.5 | 129 |
-
-`optional/legacy.css` smooths a few property-level gaps within that window but does **not** lower the color floor. If you must support older engines, SLASHED is not the right tool — and it would rather tell you that than break quietly.
-
-## Documentation
-
-| Guide | What's inside |
-| --- | --- |
-| [Architecture](docs/architecture.md) | layers, file structure, class taxonomy, bundles, token contract, performance |
-| [Theming](docs/theming.md) | rebrand in 6 tokens, dark mode, multi-brand, contrast |
-| [Layout primitives](docs/layout.md) | every `.sf-*` layout class + tokens |
-| [Macros / recipes](docs/macros.md) | every `.sf-*` macro class + tokens |
-| [Components](docs/components.md) | reserved component names + roadmap |
-| [State classes](docs/states.md) | every `.is-*` + ARIA mapping + overlap semantics |
-| [Motion](docs/motion.md) | animation classes, tokens, reduced motion |
-| [Class reference](docs/classes.md) | every shipped class (generated) |
-| [Token reference](docs/tokens.md) | all `--sf-*` tokens + defaults (generated) |
-| [LLM guide](docs/llm-guide.md) | compact API reference for AI-assisted development |
-| [Migration](docs/migration.md) | upgrading SLASHED + migrating from other frameworks |
-
-## WordPress
-
-The WordPress plugin — Bricks Builder and Gutenberg integrations plus a visual token editor in wp-admin — lives in its own repository: [SLASHED-Plugins](https://github.com/codeslash-dev/SLASHED-Plugins).
-
-## Development
-
-```sh
-npm run build        # build all badges/ bundles + docs
-npm run watch        # rebuild on change
-npm run lint:css     # stylelint all CSS
-npm test             # full suite (unit + Playwright, light + dark)
-npm run test:install # one-time: install the test browsers
-```
-
-Commits follow [Conventional Commits](https://www.conventionalcommits.org/); see [CONTRIBUTING.md](CONTRIBUTING.md) for setup and conventions.
-
-## License
-
-[MIT](LICENSE) © CODE/

From 681407ecf190bc7956db958c203b221bcc8ac6aa Mon Sep 17 00:00:00 2001
From: Claude 
Date: Mon, 6 Jul 2026 17:51:33 +0000
Subject: [PATCH 6/8] docs: restore Editor integration section, drop copy-wip
 exclude
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Follow-up to the README swap: the previous commit staged the moved draft
before the Editor-integration edit and the _config.yml cleanup landed.
Add both now — the VS Code CSS Custom Data section is back in README, and
_config.yml no longer excludes the removed copy-wip/ directory.

Co-Authored-By: Claude Opus 4.8 
Claude-Session: https://claude.ai/code/session_016WH9Q15j1dZYxqTqMoomxq
---
 README.md   | 13 +++++++++++++
 _config.yml |  1 -
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 9cf7005c..52420a31 100644
--- a/README.md
+++ b/README.md
@@ -170,6 +170,19 @@ Pre-built bundles ship with every [release](https://github.com/codeslash-dev/SLA
 | [LLM guide](docs/llm-guide.md) | compact API reference for AI-assisted development |
 | [Migration](docs/migration.md) | upgrading SLASHED + migrating from other frameworks |
 
+## Editor integration
+
+A generated [VS Code CSS Custom Data](https://github.com/microsoft/vscode-css-languageservice/blob/main/docs/customData.md)
+file ships alongside the bundles, so every `--sf-*` token autocompletes with
+its description and default value in any editor that supports the format:
+
+```json
+// .vscode/settings.json
+{
+  "css.customData": ["./node_modules/slashed/badges/css-custom-data.json"]
+}
+```
+
 ## WordPress
 
 The WordPress plugin — Bricks Builder and Gutenberg integrations plus a visual token editor in wp-admin — lives in its own repository: [SLASHED-Plugins](https://github.com/codeslash-dev/SLASHED-Plugins).
diff --git a/_config.yml b/_config.yml
index d7746e08..0fc30763 100644
--- a/_config.yml
+++ b/_config.yml
@@ -7,7 +7,6 @@ plugins:
 
 exclude:
   - node_modules
-  - copy-wip
   - configurator
   - configurator-archive
   - core

From f5d817a0d478f8cf225b66d3215d71f022ebd25e Mon Sep 17 00:00:00 2001
From: Claude 
Date: Mon, 6 Jul 2026 21:48:52 +0000
Subject: [PATCH 7/8] docs: fix utilities-layer 'inert' claim flagged in review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The utility layer is not inert in 0.x: optional/utilities.css ships a
curated subset — the heading (.sf-h1–.sf-h6), text-size (.sf-text-*), and
hover-transform (.sf-hover-*) helpers are active (21 classes per the API
index); the rest stay commented out. Correct the 'inert in 0.x' / 'empty
stub' / 'no utility classes' wording in the README bundle table and intro,
the landing bundle table, and architecture.md (file map, bundle table,
layer notes) so the utilities and full bundles are described accurately.

Co-Authored-By: Claude Opus 4.8 
Claude-Session: https://claude.ai/code/session_016WH9Q15j1dZYxqTqMoomxq
---
 README.md            |  4 ++--
 docs/architecture.md | 14 ++++++++------
 index.html           |  2 +-
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 52420a31..66103828 100644
--- a/README.md
+++ b/README.md
@@ -74,7 +74,7 @@ Every letter of SLASHED is a design commitment, and each one is checkable agains
 - **A fluid engine** — the type, display, and space scales are generated at runtime from 12 input scalars (viewport range, modular ratios, base sizes). Change one ratio and the whole system recalculates — no build ([docs/theming.md](docs/theming.md#fluid-engine)).
 - **Classless form styling**, motion, accessibility, and print modules.
 
-SLASHED is BEM-first: the token API is the product, and you build components on top. It ships **no utility classes in 0.x**. The first two component classes — `.sf-btn` and `.sf-card` — are **live since v0.7.0** (shipped in the `-components` and `full` bundles); the remaining components (badge, tag, alert, avatar, modal, skeleton, table) are staged in source, commented out until they land in a later minor. What you get today is the foundation plus the first components, honestly labelled.
+SLASHED is BEM-first: the token API is the product, and you build components on top. It ships only a **curated subset of utility classes** in 0.x — heading (`.sf-h1`–`.sf-h6`), text-size (`.sf-text-*`), and hover-transform (`.sf-hover-*`) helpers — with the rest staged. The first two component classes — `.sf-btn` and `.sf-card` — are **live since v0.7.0** (shipped in the `-components` and `full` bundles); the remaining components (badge, tag, alert, avatar, modal, skeleton, table) are staged in source, commented out until they land in a later minor. What you get today is the foundation plus the first components, honestly labelled.
 
 ## Dark mode
 
@@ -106,7 +106,7 @@ Pre-built bundles ship with every [release](https://github.com/codeslash-dev/SLA
 | --- | --- |
 | `slashed.optimal.css` | all of `core/` + classless forms — **recommended** |
 | `slashed.optimal-components.css` | optimal + the component layer — `.sf-btn` / `.sf-card` live, remaining components staged |
-| `slashed.optimal-utilities.css` | optimal + the staged utility layer *(inert in 0.x)* |
+| `slashed.optimal-utilities.css` | optimal + the utility layer — heading / text-size / hover helpers active, rest staged |
 | `slashed.full.css` | optimal + the component and utility layers |
 
 
    
diff --git a/docs/architecture.md b/docs/architecture.md
index 712a6f67..f1e6f820 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -51,7 +51,7 @@ optional/
   theme-example.css       slashed.themes  (copy-and-customise rebrand example; not bundled)
   forms.css               slashed.forms  (classless native form-control styling)
   components.css          slashed.components  (btn + card live since v0.7.0; remaining commented out)
-  utilities.css           slashed.utilities  (empty stub)
+  utilities.css           slashed.utilities  (curated subset active — heading/text-size/hover; rest commented)
   legacy.css              slashed.legacy
 ```
 
@@ -63,8 +63,10 @@ incrementally in upcoming minor releases (additive, no breaking
 changes). See [`docs/components.md`](components.md) for the eight
 taken component names and the roadmap.
 
-`optional/utilities.css` remains an empty stub — SLASHED is BEM-first by
-design and ships no utility classes in 0.x.
+`optional/utilities.css` ships a curated subset — the heading (`.sf-h1`–`.sf-h6`),
+text-size (`.sf-text-*`), and hover-transform (`.sf-hover-*`) helpers are active;
+the rest stay commented out. SLASHED is BEM-first by design, so it ships only
+this curated subset of utility classes in 0.x.
 
 ---
 
@@ -377,8 +379,8 @@ so `bundle.config.json` lists eight outputs in total — are built by
 |---|---|
 | `slashed.optimal.css` | all `core/` + `forms` |
 | `slashed.optimal-components.css` | optimal + `tokens.components` + `components` *(btn/card live, rest staged)* |
-| `slashed.optimal-utilities.css` | optimal + `utilities` *(empty)* |
-| `slashed.full.css` | optimal + `tokens.components` + `components` *(btn/card live, rest staged)* + `utilities` *(empty)* |
+| `slashed.optimal-utilities.css` | optimal + `utilities` *(curated subset active, rest staged)* |
+| `slashed.full.css` | optimal + `tokens.components` + `components` *(btn/card live, rest staged)* + `utilities` *(curated subset active, rest staged)* |
 
 `optional/legacy.css` is **not bundled by default** — add it explicitly when
 you need back-compat shims. Because every rule sits in an `@layer`,
@@ -387,7 +389,7 @@ strips local `@import` statements (the explicit file list resolves them), so
 the `tokens.components` import inside `components.css` is inlined by listing
 the token file first. `components.css` and `tokens.components.css` are
 partial — `.sf-btn` / `.sf-card` and their tokens emit CSS since v0.7.0,
-the remaining components stay commented out; `utilities.css` is an empty stub. Consumers can also build à la carte: raw
+the remaining components stay commented out; `utilities.css` ships a curated subset (heading/text-size/hover helpers active, rest commented). Consumers can also build à la carte: raw
 `core/` plus hand-picked optional files. Each bundle also has a
 layer-flattened `.flat` variant.
 
diff --git a/index.html b/index.html
index 179614cf..0d27685d 100644
--- a/index.html
+++ b/index.html
@@ -587,7 +587,7 @@ 
    One link tag. That's the toolchain.
    
             
               slashed.optimal.cssEverything live today: core + classless forms — recommended
               slashed.optimal-components.cssOptimal + the component layer — .sf-btn / .sf-card live, remaining components staged
-              slashed.optimal-utilities.cssOptimal + the staged utility layer (inert in 0.x)
+              slashed.optimal-utilities.cssOptimal + the utility layer — heading / text-size / hover helpers active, rest staged
               slashed.full.cssOptimal + the component and utility layers
             
           

From 6377c095c6a12186ae3f6c9a98bddcfbda697518 Mon Sep 17 00:00:00 2001
From: Claude 
Date: Mon, 6 Jul 2026 23:50:27 +0000
Subject: [PATCH 8/8] =?UTF-8?q?docs:=20sync=20with=20main=20=E2=80=94=20co?=
 =?UTF-8?q?mponents=20reduced=20to=20btn+card,=20utilities=20expanded?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rebased onto main (#553), which finalized the component and utility surface:
- Staged components (badge/tag/alert/avatar/modal/skeleton/table) were
  removed, not just commented out; .sf-btn and .sf-card are now the only two
  components SLASHED ships (BEM-first, no broad component library). Drop all
  'remaining components staged/commented' wording in README, landing, and
  architecture.md, including the 'Deferred until components ship' framing.
- The utilities layer activated more curated helpers (list-reset, marker,
  selection, sticky on top of heading/text-size/hover) — 31 active classes.
  Update the utility descriptions accordingly.
- Regenerate demos against the rebased API index: 320 bundled classes
  (was 316); token count stays 720.

Co-Authored-By: Claude Opus 4.8 
Claude-Session: https://claude.ai/code/session_016WH9Q15j1dZYxqTqMoomxq
---
 README.md                               |  6 +--
 demos/full-api-demo-with-overrides.html | 70 ++++++++-----------------
 demos/full-api-demo.html                | 70 ++++++++-----------------
 docs/architecture.md                    | 54 +++++++++----------
 index.html                              |  4 +-
 5 files changed, 77 insertions(+), 127 deletions(-)

diff --git a/README.md b/README.md
index 66103828..07c39f56 100644
--- a/README.md
+++ b/README.md
@@ -74,7 +74,7 @@ Every letter of SLASHED is a design commitment, and each one is checkable agains
 - **A fluid engine** — the type, display, and space scales are generated at runtime from 12 input scalars (viewport range, modular ratios, base sizes). Change one ratio and the whole system recalculates — no build ([docs/theming.md](docs/theming.md#fluid-engine)).
 - **Classless form styling**, motion, accessibility, and print modules.
 
-SLASHED is BEM-first: the token API is the product, and you build components on top. It ships only a **curated subset of utility classes** in 0.x — heading (`.sf-h1`–`.sf-h6`), text-size (`.sf-text-*`), and hover-transform (`.sf-hover-*`) helpers — with the rest staged. The first two component classes — `.sf-btn` and `.sf-card` — are **live since v0.7.0** (shipped in the `-components` and `full` bundles); the remaining components (badge, tag, alert, avatar, modal, skeleton, table) are staged in source, commented out until they land in a later minor. What you get today is the foundation plus the first components, honestly labelled.
+SLASHED is BEM-first: the token API is the product, and you build components on top. It ships a **curated subset of utility classes** in 0.x — heading (`.sf-h1`–`.sf-h6`), text-size (`.sf-text-*`), hover-transform (`.sf-hover-*`), list-reset, marker-colour, selection, and sticky helpers — with the rest staged. It ships exactly **two components** — `.sf-btn` and `.sf-card`, live since v0.7.0 (in the `-components` and `full` bundles); by design there is no broad component library. What you get is the foundation plus those two components, honestly labelled.
 
 ## Dark mode
 
@@ -105,8 +105,8 @@ Pre-built bundles ship with every [release](https://github.com/codeslash-dev/SLA
 | Bundle | Contents |
 | --- | --- |
 | `slashed.optimal.css` | all of `core/` + classless forms — **recommended** |
-| `slashed.optimal-components.css` | optimal + the component layer — `.sf-btn` / `.sf-card` live, remaining components staged |
-| `slashed.optimal-utilities.css` | optimal + the utility layer — heading / text-size / hover helpers active, rest staged |
+| `slashed.optimal-components.css` | optimal + the component layer — `.sf-btn` and `.sf-card` (the only two components) |
+| `slashed.optimal-utilities.css` | optimal + the utility layer — curated helpers active (heading, text-size, hover, list-reset, marker, selection, sticky), rest staged |
 | `slashed.full.css` | optimal + the component and utility layers |
 
 
    
diff --git a/demos/full-api-demo-with-overrides.html b/demos/full-api-demo-with-overrides.html
index 93c8ad54..53df2eae 100644
--- a/demos/full-api-demo-with-overrides.html
+++ b/demos/full-api-demo-with-overrides.html
@@ -122,7 +122,7 @@
   
   
    
     
    SLASHED Full API Demo
    
-    
    v0.7.0 · optimal-components bundle from jsDelivr CDN · 316 classes · 720 tokens (229 configurable)
    
+    
    v0.7.0 · optimal-components bundle from jsDelivr CDN · 320 classes · 720 tokens (229 configurable)
    
     
    ultimate-override.css is ACTIVE. Every value below is recomputed from perturbed knob tokens — toggle it off in the toolbar, or compare against the un-overridden page.
    
 
     
    
@@ -169,7 +169,7 @@ 
    Drop shadows (filter)
    
     
    
 
     
    
-      
    Layout primitives 138
    
+      
    Layout primitives 143
    
       
    
       
    
         
    .sf-alternate
    
@@ -555,6 +555,26 @@ 
    Layout primitives 138
    
         
    .sf-grid-flex--xs
    
         
    1
    2
    3
    4
    
       
    
+      
    
+        
    .sf-header--l
    
+        
    1
    2
    3
    4
    
+      
    
+      
    
+        
    .sf-header--m
    
+        
    1
    2
    3
    4
    
+      
    
+      
    
+        
    .sf-header--s
    
+        
    1
    2
    3
    4
    
+      
    
+      
    
+        
    .sf-header--xl
    
+        
    1
    2
    3
    4
    
+      
    
+      
    
+        
    .sf-header--xs
    
+        
    1
    2
    3
    4
    
+      
    
       
    
         
    .sf-icon
    
         
     inline icon
    
@@ -959,7 +979,7 @@ 
    Macro classes 57
    
       
    
     
    
     
    
-      
    State classes 40
    
+      
    State classes 29
    
       
    
       
    
         
    .is-active
    
@@ -969,14 +989,6 @@ 
    State classes 40
    
         
    .is-busy
    
         
    is-busy
    
       
    
-      
    
-        
    .is-clickable
    
-        
    is-clickable
    
-      
    
-      
    
-        
    .is-clipped
    
-        
    is-clipped
    
-      
    
       
    
         
    .is-collapsed
    
         
    
@@ -1017,18 +1029,6 @@ 
    State classes 40
    
         
    .is-expanded
    
         
    is-expanded
    
       
    
-      
    
-        
    .is-fixed
    
-        
    is-fixed
    
-      
    
-      
    
-        
    .is-focused
    
-        
    is-focused
    
-      
    
-      
    
-        
    .is-fullscreen
    
-        
    is-fullscreen
    
-      
    
       
    
         
    .is-hidden
    
         
    
@@ -1065,10 +1065,6 @@ 
    State classes 40
    
         
    .is-pending
    
         
    is-pending
    
       
    
-      
    
-        
    .is-pinned
    
-        
    is-pinned
    
-      
    
       
    
         
    .is-pressed
    
         
    is-pressed
    
@@ -1077,14 +1073,6 @@ 
    State classes 40
    
         
    .is-readonly
    
         
    is-readonly
    
       
    
-      
    
-        
    .is-resizable
    
-        
    is-resizable
    
-      
    
-      
    
-        
    .is-scrollable
    
-        
    is-scrollable
    
-      
    
       
    
         
    .is-selected
    
         
    is-selected
    
@@ -1093,22 +1081,10 @@ 
    State classes 40
    
         
    .is-skeleton
    
         
    is-skeleton
    
       
    
-      
    
-        
    .is-sticky
    
-        
    is-sticky
    
-      
    
       
    
         
    .is-success
    
         
    is-success
    
       
    
-      
    
-        
    .is-truncated
    
-        
    is-truncated
    
-      
    
-      
    
-        
    .is-unselectable
    
-        
    is-unselectable
    
-      
    
       
    
         
    .is-valid
    
         
    is-valid
    
diff --git a/demos/full-api-demo.html b/demos/full-api-demo.html
index f1710f09..28eb5123 100644
--- a/demos/full-api-demo.html
+++ b/demos/full-api-demo.html
@@ -121,7 +121,7 @@
   
   
    
     
    SLASHED Full API Demo
    
-    
    v0.7.0 · optimal-components bundle from jsDelivr CDN · 316 classes · 720 tokens (229 configurable)
    
+    
    v0.7.0 · optimal-components bundle from jsDelivr CDN · 320 classes · 720 tokens (229 configurable)
    
     
    Baseline render with default tokens. Use the toolbar to switch theme, toggle the ultimate override live, or replay motion. The always-on override variant is full-api-demo-with-overrides.html.
    
 
     
    
@@ -168,7 +168,7 @@ 
    Drop shadows (filter)
    
     
    
 
     
    
-      
    Layout primitives 138
    
+      
    Layout primitives 143
    
       
    
       
    
         
    .sf-alternate
    
@@ -554,6 +554,26 @@ 
    Layout primitives 138
    
         
    .sf-grid-flex--xs
    
         
    1
    2
    3
    4
    
       
    
+      
    
+        
    .sf-header--l
    
+        
    1
    2
    3
    4
    
+      
    
+      
    
+        
    .sf-header--m
    
+        
    1
    2
    3
    4
    
+      
    
+      
    
+        
    .sf-header--s
    
+        
    1
    2
    3
    4
    
+      
    
+      
    
+        
    .sf-header--xl
    
+        
    1
    2
    3
    4
    
+      
    
+      
    
+        
    .sf-header--xs
    
+        
    1
    2
    3
    4
    
+      
    
       
    
         
    .sf-icon
    
         
     inline icon
    
@@ -958,7 +978,7 @@ 
    Macro classes 57
    
       
    
     
    
     
    
-      
    State classes 40
    
+      
    State classes 29
    
       
    
       
    
         
    .is-active
    
@@ -968,14 +988,6 @@ 
    State classes 40
    
         
    .is-busy
    
         
    is-busy
    
       
    
-      
    
-        
    .is-clickable
    
-        
    is-clickable
    
-      
    
-      
    
-        
    .is-clipped
    
-        
    is-clipped
    
-      
    
       
    
         
    .is-collapsed
    
         
    
@@ -1016,18 +1028,6 @@ 
    State classes 40
    
         
    .is-expanded
    
         
    is-expanded
    
       
    
-      
    
-        
    .is-fixed
    
-        
    is-fixed
    
-      
    
-      
    
-        
    .is-focused
    
-        
    is-focused
    
-      
    
-      
    
-        
    .is-fullscreen
    
-        
    is-fullscreen
    
-      
    
       
    
         
    .is-hidden
    
         
    
@@ -1064,10 +1064,6 @@ 
    State classes 40
    
         
    .is-pending
    
         
    is-pending
    
       
    
-      
    
-        
    .is-pinned
    
-        
    is-pinned
    
-      
    
       
    
         
    .is-pressed
    
         
    is-pressed
    
@@ -1076,14 +1072,6 @@ 
    State classes 40
    
         
    .is-readonly
    
         
    is-readonly
    
       
    
-      
    
-        
    .is-resizable
    
-        
    is-resizable
    
-      
    
-      
    
-        
    .is-scrollable
    
-        
    is-scrollable
    
-      
    
       
    
         
    .is-selected
    
         
    is-selected
    
@@ -1092,22 +1080,10 @@ 
    State classes 40
    
         
    .is-skeleton
    
         
    is-skeleton
    
       
    
-      
    
-        
    .is-sticky
    
-        
    is-sticky
    
-      
    
       
    
         
    .is-success
    
         
    is-success
    
       
    
-      
    
-        
    .is-truncated
    
-        
    is-truncated
    
-      
    
-      
    
-        
    .is-unselectable
    
-        
    is-unselectable
    
-      
    
       
    
         
    .is-valid
    
         
    is-valid
    
diff --git a/docs/architecture.md b/docs/architecture.md
index f1e6f820..9c9ead41 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -47,26 +47,25 @@ core/
   accessibility.css            slashed.accessibility
   print.css                    slashed.print
 optional/
-  tokens.components.css   slashed.tokens  (component tokens — partial; btn/card live, rest commented out)
+  tokens.components.css   slashed.tokens  (component tokens for btn + card)
   theme-example.css       slashed.themes  (copy-and-customise rebrand example; not bundled)
   forms.css               slashed.forms  (classless native form-control styling)
-  components.css          slashed.components  (btn + card live since v0.7.0; remaining commented out)
+  components.css          slashed.components  (btn + card — the only two components)
   utilities.css           slashed.utilities  (curated subset active — heading/text-size/hover; rest commented)
   legacy.css              slashed.legacy
 ```
 
-`optional/components.css` and `optional/tokens.components.css` are
-**not yet complete** (pre-v1.0): their `@layer` declarations are real, and
-`.sf-btn` / `.sf-card` are live since v0.7.0, but the remaining component
-classes and their tokens are still commented out. They will land
-incrementally in upcoming minor releases (additive, no breaking
-changes). See [`docs/components.md`](components.md) for the eight
-taken component names and the roadmap.
+`optional/components.css` and `optional/tokens.components.css` ship exactly two
+components — `.sf-btn` and `.sf-card`, live since v0.7.0. These are the only
+components SLASHED carries: the framework stays BEM-first and token-first and
+does not maintain a broad component library. See [`docs/components.md`](components.md)
+for the component reference.
 
 `optional/utilities.css` ships a curated subset — the heading (`.sf-h1`–`.sf-h6`),
-text-size (`.sf-text-*`), and hover-transform (`.sf-hover-*`) helpers are active;
-the rest stay commented out. SLASHED is BEM-first by design, so it ships only
-this curated subset of utility classes in 0.x.
+text-size (`.sf-text-*`), hover-transform (`.sf-hover-*`), list-reset,
+marker-colour, alternate-selection, and sticky helpers are active; the rest stay
+commented out. SLASHED is BEM-first by design, so it ships only this curated
+subset of utility classes in 0.x.
 
 ---
 
@@ -170,10 +169,9 @@ BEM control.
 
 **slashed.layout** — layout primitives: `.sf-stack`, `.sf-cluster`, `.sf-sidebar`, `.sf-cover`, `.sf-grid`, `.sf-container`, `.sf-content-grid`, `.sf-icon`, etc. Layout tokens declared in `tokens.layout.css`, overridable per-instance via `style="--sf-stack-gap: …"`.
 
-**slashed.components** — UI blocks. Partially complete (pre-v1.0): 8 component
-names are taken (`button`, `card`, `badge`, `tag`, `alert`, `avatar`,
-`modal`, `skeleton`); `.sf-btn` and `.sf-card` are live since v0.7.0, the
-rest are still commented out. Every value goes through `var()`. Requires
+**slashed.components** — UI blocks: `.sf-btn` and `.sf-card`, live since v0.7.0.
+These are the only two components SLASHED ships — it stays BEM-first and does
+not carry a broad component library. Every value goes through `var()`. Requires
 `tokens.components.css`.
 
 **slashed.macros** — recipes / patterns: `.sf-prose`,
@@ -378,18 +376,19 @@ so `bundle.config.json` lists eight outputs in total — are built by
 | Bundle | Contents |
 |---|---|
 | `slashed.optimal.css` | all `core/` + `forms` |
-| `slashed.optimal-components.css` | optimal + `tokens.components` + `components` *(btn/card live, rest staged)* |
+| `slashed.optimal-components.css` | optimal + `tokens.components` + `components` *(btn + card — the only two)* |
 | `slashed.optimal-utilities.css` | optimal + `utilities` *(curated subset active, rest staged)* |
-| `slashed.full.css` | optimal + `tokens.components` + `components` *(btn/card live, rest staged)* + `utilities` *(curated subset active, rest staged)* |
+| `slashed.full.css` | optimal + `tokens.components` + `components` *(btn + card)* + `utilities` *(curated subset active, rest staged)* |
 
 `optional/legacy.css` is **not bundled by default** — add it explicitly when
 you need back-compat shims. Because every rule sits in an `@layer`,
 concatenation order within a bundle does not affect the cascade. The bundler
 strips local `@import` statements (the explicit file list resolves them), so
 the `tokens.components` import inside `components.css` is inlined by listing
-the token file first. `components.css` and `tokens.components.css` are
-partial — `.sf-btn` / `.sf-card` and their tokens emit CSS since v0.7.0,
-the remaining components stay commented out; `utilities.css` ships a curated subset (heading/text-size/hover helpers active, rest commented). Consumers can also build à la carte: raw
+the token file first. `components.css` and `tokens.components.css` ship
+`.sf-btn` / `.sf-card` and their tokens — the only two components; `utilities.css`
+ships a curated subset (heading, text-size, hover, list-reset, marker, selection,
+and sticky helpers active, rest commented). Consumers can also build à la carte: raw
 `core/` plus hand-picked optional files. Each bundle also has a
 layer-flattened `.flat` variant.
 
@@ -448,12 +447,11 @@ Deliberate behaviours, documented so they aren't mistaken for bugs.
 
 ---
 
-## Deferred (until the components ship)
+## Deferred
 
 `@starting-style` and CSS anchor positioning are only meaningful attached to
-a specific element/component transition (dialog, popover, tooltip). They
-are out of scope while `optional/components.css` is still filling in (only
-`.sf-btn` / `.sf-card` live so far) and will be added with the components when they ship in
-upcoming 0.x minors. The component-free part — scroll-driven animation
-range tokens (`--sf-scroll-timeline-range-*`) — already ships in
-`core/tokens.css`.
+a specific element/component transition (dialog, popover, tooltip). SLASHED
+ships only `.sf-btn` and `.sf-card` and stays BEM-first, so these belong to
+consumer components rather than the framework and are out of scope here. The
+component-free part — scroll-driven animation range tokens
+(`--sf-scroll-timeline-range-*`) — already ships in `core/tokens.css`.
diff --git a/index.html b/index.html
index 0d27685d..d9971142 100644
--- a/index.html
+++ b/index.html
@@ -586,8 +586,8 @@ 
    One link tag. That's the toolchain.
    
             
             
               slashed.optimal.cssEverything live today: core + classless forms — recommended
-              slashed.optimal-components.cssOptimal + the component layer — .sf-btn / .sf-card live, remaining components staged
-              slashed.optimal-utilities.cssOptimal + the utility layer — heading / text-size / hover helpers active, rest staged
+              slashed.optimal-components.cssOptimal + the component layer — .sf-btn and .sf-card (the only two components)
+              slashed.optimal-utilities.cssOptimal + the utility layer — curated helpers active (heading, text-size, hover, list-reset, marker, selection, sticky), rest staged
               slashed.full.cssOptimal + the component and utility layers