refactor(components)!: drop the .sf-card auto-shrink of nested button labels

CHANGELOG.md

@@ -4,6 +4,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## Unreleased
 
+### Breaking Changes
+- **components:** `.sf-btn` nested in `.sf-card` no longer auto-shrinks its label to `--sf-text-s`. Buttons in cards now render at their own size like anywhere else; add `.sf-btn--s` for a compact card action. The orphaned `--sf-card-btn-font-size` token is removed. See `docs/migration.md`.
+
 ## [0.7.15] - 2026-07-11
 
 ### Features

configurator/src/components/panels/ComponentsPanel.svelte

@@ -586,23 +586,6 @@
           </div>
         </div>
 
-        <div>
-          <div class="text-[9px] text-slate-500 mb-1">Nested button size — --sf-card-btn-font-size</div>
-          <div class="flex flex-wrap gap-1">
-            {#each TEXT_STEPS as step (step)}
-              {@const cur = currentStep("--sf-card-btn-font-size", "text", TEXT_STEPS, "s")}
-              <button
-                onclick={() => setStep("--sf-card-btn-font-size", "text", step, "s")}
-                class={`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${
-                  cur === step
-                    ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
-                    : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5"
-                }`}
-              >{step}</button>
-            {/each}
-          </div>
-        </div>
-
         <div>
           <div class="text-[9px] text-slate-500 mb-1">Media object-fit — --sf-object-fit (global, affects all img/video)</div>
           <div class="flex flex-wrap gap-1">

configurator/src/data/api-index.generated.json

@@ -2,23 +2,23 @@
   "_sync": {
     "generatedBy": "configurator/scripts/sync-api.mjs",
     "source": "docs/api-index.json",
-    "tokensHash": "ed57360d56f3",
+    "tokensHash": "ea14629a05b1",
     "bundles": [
       "full",
       "optimal"
     ],
     "counts": {
-      "tokens": 756,
+      "tokens": 755,
       "byTier": {
-        "PUBLIC": 696,
+        "PUBLIC": 695,
         "PUBLIC-ADVANCED": 59,
         "INTERNAL": 1
       },
       "byCategory": {
         "Layout tokens": 53,
         "Core tokens": 622,
         "Macro tokens": 34,
-        "Component tokens": 47
+        "Component tokens": 46
       }
     }
   },
@@ -1922,26 +1922,6 @@
         "full"
       ]
     },
-    {
-      "name": "--sf-card-btn-font-size",
-      "tier": "PUBLIC",
-      "role": "consumption",
-      "namespace": "card",
-      "category": "Component tokens",
-      "group": "CARD TOKENS",
-      "description": "Font-size a .sf-btn shrinks to when nested inside a .sf-card. Defaults to --sf-text-s.",
-      "note": "Font-size a .sf-btn shrinks to when nested inside a .sf-card. Defaults to --sf-text-s.",
-      "value": "var(--sf-text-s)",
-      "aliasOf": "--sf-text-s",
-      "registered": false,
-      "syntax": null,
-      "fallbackOnly": false,
-      "optional": true,
-      "layer": "slashed.tokens",
-      "bundles": [
-        "full"
-      ]
-    },
     {
       "name": "--sf-card-gap",
       "tier": "PUBLIC",

configurator/src/data/token-registry.generated.json

@@ -2942,7 +2942,8 @@
     },
     {
       "id": 725,
-      "name": "--sf-card-btn-font-size"
+      "name": "--sf-card-btn-font-size",
+      "removed": true
     },
     {
       "id": 726,

dist/css-custom-data.json

@@ -461,11 +461,6 @@
       "description": "Border thickness for .sf-card.\n\nDefault: `var(--sf-border-width-1)`",
       "syntax": "*"
     },
-    {
-      "name": "--sf-card-btn-font-size",
-      "description": "Font-size a .sf-btn shrinks to when nested inside a .sf-card. Defaults to --sf-text-s.\n\nDefault: `var(--sf-text-s)`",
-      "syntax": "*"
-    },
     {
       "name": "--sf-card-gap",
       "description": "Divider spacing for .sf-card__header / __footer (padding + margin around the rule).\n\nDefault: `var(--sf-space-m)`",

docs/api-index.json

@@ -26,28 +26,28 @@
       "optimal"
     ],
     "counts": {
-      "total": 1085,
+      "total": 1084,
       "by_type": {
         "class": 329,
-        "token": 756
+        "token": 755
       },
       "by_tier": {
         "INTERNAL": 1,
-        "PUBLIC": 1025,
+        "PUBLIC": 1024,
         "PUBLIC-ADVANCED": 59
       },
       "by_role": {
-        "consumption": 491,
+        "consumption": 490,
         "knob": 265
       },
-      "tokens": 756,
+      "tokens": 755,
       "classes": 329,
       "sf_classes": 292,
       "is_classes": 28,
       "unprefixed_classes": 9,
       "by_category": {
         "Accessibility": 8,
-        "Component tokens": 47,
+        "Component tokens": 46,
         "Components": 30,
         "Core tokens": 622,
         "Layout primitives": 145,
@@ -2449,31 +2449,6 @@
         "full"
       ]
     },
-    {
-      "name": "--sf-card-btn-font-size",
-      "type": "token",
-      "tier": "PUBLIC",
-      "role": "consumption",
-      "namespace": "card",
-      "category": "Component tokens",
-      "area": "components",
-      "group": "CARD TOKENS",
-      "description": "Font-size a .sf-btn shrinks to when nested inside a .sf-card. Defaults to --sf-text-s.",
-      "value": "var(--sf-text-s)",
-      "aliasOf": "--sf-text-s",
-      "registered": false,
-      "animatable": false,
-      "syntax": null,
-      "inherits": null,
-      "optional": true,
-      "layer": "slashed.tokens",
-      "sourceFiles": [
-        "optional/tokens.components.css"
-      ],
-      "bundles": [
-        "full"
-      ]
-    },
     {
       "name": "--sf-card-gap",
       "type": "token",

docs/api-index.md

@@ -10,17 +10,17 @@ and a short description. The machine-readable companion (with all columns) is
 [registry.json](registry.json); for the tier contract see
 [architecture.md](architecture.md).
 
-**1085 elements** — 756 tokens, 329 classes.
+**1084 elements** — 755 tokens, 329 classes.
 
 | Tier | Count | Meaning |
 |---|---|---|
-| PUBLIC | 1025 | Everyday surface. SemVer-stable. |
+| PUBLIC | 1024 | Everyday surface. SemVer-stable. |
 | PUBLIC-ADVANCED | 59 | Same SemVer guarantee; niche/powerful. |
 | INTERNAL | 1 | Implementation detail; may change without a major bump. |
 
-## Tokens (756)
+## Tokens (755)
 
-### Component tokens (47)
+### Component tokens (46)
 
 | Token | Tier | Role | Namespace | Default | Description |
 |---|---|---|---|---|---|
@@ -57,7 +57,6 @@ and a short description. The machine-readable companion (with all columns) is
 | `--sf-card-bg` | PUBLIC | consumption | card | `var(--sf-color-surface)` | Background surface for .sf-card. Defaults to --sf-color-surface. |
 | `--sf-card-border-color` | PUBLIC | consumption | card | `var(--sf-color-border)` | Border colour for .sf-card. Defaults to --sf-color-border. |
 | `--sf-card-border-width` | PUBLIC | consumption | card | `var(--sf-border-width-1)` | Border thickness for .sf-card. |
-| `--sf-card-btn-font-size` | PUBLIC | consumption | card | `var(--sf-text-s)` | Font-size a .sf-btn shrinks to when nested inside a .sf-card. Defaults to --sf-text-s. |
 | `--sf-card-gap` | PUBLIC | consumption | card | `var(--sf-space-m)` | Divider spacing for .sf-card__header / __footer (padding + margin around the rule). |
 | `--sf-card-heading-size` | PUBLIC | consumption | card | `var(--sf-text-xl)` | Font-size for .sf-card__title. Defaults to --sf-text-xl. |
 | `--sf-card-media-radius` | PUBLIC | consumption | card | `var(--sf-card-radius, var(--sf-radius-m))` | Corner radius for .sf-card__media. Mirrors the card's inner radius by default. |

docs/components.md

@@ -143,9 +143,9 @@ proportional.
 </a>
 ```
 
-A `.sf-btn` nested in a card automatically shrinks to `--sf-card-btn-font-size`.
-Pair `--interactive` with `.sf-clickable-parent` (from `core/accessibility.css`)
-when the entire card should be a single link.
+A `.sf-btn` nested in a card keeps its own size — add `.sf-btn--s` explicitly
+for a compact card action. Pair `--interactive` with `.sf-clickable-parent`
+(from `core/accessibility.css`) when the entire card should be a single link.
 
 **Modifiers**
 
@@ -172,7 +172,6 @@ when the entire card should be a single link.
 | `--sf-card-media-ratio` | `var(--sf-ratio-video)` | `__media` aspect ratio |
 | `--sf-card-avatar-size` | `2.5rem` | `__avatar` diameter |
 | `--sf-card-heading-size` | `var(--sf-text-xl)` | `__title` size |
-| `--sf-card-btn-font-size` | `var(--sf-text-s)` | Nested `.sf-btn` size |
 
 **Coloured cards**
 

docs/llm-guide.md

@@ -1151,7 +1151,6 @@ Component tokens from `optional/tokens.components.css`:
 --sf-card-media-radius:     var(--sf-card-radius, var(--sf-radius-m))
 --sf-card-avatar-size:      2.5rem
 --sf-card-heading-size:     var(--sf-text-xl)
---sf-card-btn-font-size:    var(--sf-text-s)
 ```
 
 `.sf-btn` colour families (all 10, 1:1 with the palette): `--primary

docs/migration.md

@@ -37,6 +37,36 @@ button min-height to the accessibility anchor — globally:
 or per-button with `.sf-btn--l` (`--sf-size-l`, 48px). In the configurator this
 is the **Min height → touch-target** choice.
 
+### `.sf-btn` inside `.sf-card` no longer auto-shrinks its label (breaking)
+
+A `.sf-card .sf-btn { --sf-btn-font-size--size: var(--sf-card-btn-font-size,
+var(--sf-text-s)) }` rule used to silently pin every button nested in a card to
+the `--sf-text-s` label size — so the *same* `.sf-btn` rendered smaller inside a
+card than outside it, and a `.sf-btn--xl` in a card footer lost its size. This
+context-dependent restyling was surprising (one component quietly overriding
+another) and is the only rule of its kind, so it has been removed. The
+now-orphaned `--sf-card-btn-font-size` token is deleted.
+
+**What changed for you:** buttons in cards now render at their own size (default
+`.sf-btn` = `--sf-text-m`), exactly as they do anywhere else — the Bootstrap /
+Tailwind model where an element looks the same regardless of container.
+
+**Restore the compact card action** by sizing the button explicitly — the same
+way you would anywhere else:
+
+```html
+<div class="sf-card__footer">
+  <button class="sf-btn sf-btn--primary sf-btn--s">Open</button>
+</div>
+```
+
+Or, to shrink *every* button inside a given card without touching each one, set
+the size tier on that card:
+
+```css
+.sf-card--compact .sf-btn { --sf-btn-font-size--size: var(--sf-text-s); }
+```
+
 ### `--sf-touch-target` decoupled from `--sf-size-l`; size scale regularised (breaking)
 
 `--sf-touch-target` used to be `var(--sf-size-l)`, which coupled the WCAG 2.5.5

docs/registry.json

@@ -20,7 +20,7 @@
       "optional/utilities.css"
     ],
     "counts": {
-      "tokens": 756,
+      "tokens": 755,
       "sf_classes": 292,
       "is_classes": 28
     }
@@ -118,7 +118,6 @@
     "--sf-card-bg",
     "--sf-card-border-color",
     "--sf-card-border-width",
-    "--sf-card-btn-font-size",
     "--sf-card-gap",
     "--sf-card-heading-size",
     "--sf-card-media-radius",

docs/token-annotations.json

@@ -767,7 +767,6 @@
     "--sf-card-media-ratio": "Aspect ratio for .sf-card__media. Defaults to --sf-ratio-video (16/9).",
     "--sf-card-media-radius": "Corner radius for .sf-card__media. Mirrors the card's inner radius by default.",
     "--sf-card-heading-size": "Font-size for .sf-card__title. Defaults to --sf-text-xl.",
-    "--sf-card-btn-font-size": "Font-size a .sf-btn shrinks to when nested inside a .sf-card. Defaults to --sf-text-s.",
     "--sf-h1-max-width": "Max-inline-size cap for <h1>. Default none (unconstrained). Set to a ch value (e.g. 20ch) to prevent wide headings from spanning the full column on large screens.",
     "--sf-h2-max-width": "Max-inline-size cap for <h2>. Default none.",
     "--sf-h3-max-width": "Max-inline-size cap for <h3>. Default none.",

docs/token-index.json

@@ -8,15 +8,15 @@
       "optional/tokens.components.css"
     ],
     "counts": {
-      "tokens": 756,
+      "tokens": 755,
       "by_tier": {
-        "PUBLIC": 696,
+        "PUBLIC": 695,
         "PUBLIC-ADVANCED": 59,
         "INTERNAL": 1
       },
       "by_role": {
         "knob": 265,
-        "consumption": 491
+        "consumption": 490
       }
     }
   },
@@ -757,14 +757,6 @@
       ],
       "value": "var(--sf-border-width-1)"
     },
-    "--sf-card-btn-font-size": {
-      "tier": "PUBLIC",
-      "role": "consumption",
-      "files": [
-        "optional/tokens.components.css"
-      ],
-      "value": "var(--sf-text-s)"
-    },
     "--sf-card-gap": {
       "tier": "PUBLIC",
       "role": "consumption",

docs/token-index.md

@@ -8,11 +8,11 @@ A cross-reference of every `--sf-*` custom property by **source file** and
 for the flat name list see [registry.json](registry.json); for the tier
 contract and naming rules see [architecture.md](architecture.md).
 
-**756 tokens** (deduplicated by name across the 4 token source files).
+**755 tokens** (deduplicated by name across the 4 token source files).
 
 | Tier | Count | Meaning |
 |---|---|---|
-| PUBLIC | 696 | Everyday knobs. SemVer-stable. |
+| PUBLIC | 695 | Everyday knobs. SemVer-stable. |
 | PUBLIC-ADVANCED | 59 | Same SemVer guarantee; niche/powerful. |
 | INTERNAL | 1 | Implementation detail; may change without a major bump. |
 
@@ -23,7 +23,7 @@ declared value (a value that references `var(--sf-…)` is a derived output):
 | Role | Count | Meaning |
 |---|---|---|
 | knob | 265 | Input you **set** to configure the system (a literal primitive: length, number, colour literal, keyword, font stack, easing curve …). |
-| consumption | 491 | Ready-to-use output you **read**; derived from other tokens via `var(--sf-…)` (incl. `light-dark()`/`oklch(from …)`/`color-mix()`). |
+| consumption | 490 | Ready-to-use output you **read**; derived from other tokens via `var(--sf-…)` (incl. `light-dark()`/`oklch(from …)`/`color-mix()`). |
 
 ## INTERNAL tokens
 
@@ -187,7 +187,6 @@ declared value (a value that references `var(--sf-…)` is a derived output):
 | `--sf-card-bg` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-color-surface)` |
 | `--sf-card-border-color` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-color-border)` |
 | `--sf-card-border-width` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-border-width-1)` |
-| `--sf-card-btn-font-size` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-text-s)` |
 | `--sf-card-gap` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-space-m)` |
 | `--sf-card-heading-size` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-text-xl)` |
 | `--sf-card-media-radius` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-card-radius, var(--sf-radius-m))` |

docs/tokens.md

@@ -3,7 +3,7 @@
 > **Generated** from source by `scripts/gen-token-reference.js` —
 > run `npm run docs:tokens` to refresh. Do not edit by hand.
 
-**756 tokens.** Every `--sf-*` custom property and its default value, grouped by source file.
+**755 tokens.** Every `--sf-*` custom property and its default value, grouped by source file.
 If a token is defined in multiple files, it is listed once per section — so this
 count can be higher than `docs/registry.json` (which deduplicates by name). See
 [architecture.md](architecture.md) for the PUBLIC / PUBLIC-ADVANCED / INTERNAL
@@ -743,7 +743,7 @@ rebrand workflow.
 
 ## Component tokens (`optional/tokens.components.css`)
 
-47 tokens.
+46 tokens.
 
 | Token | Default |
 |---|---|
@@ -780,7 +780,6 @@ rebrand workflow.
 | `--sf-card-bg` | `var(--sf-color-surface)` |
 | `--sf-card-border-color` | `var(--sf-color-border)` |
 | `--sf-card-border-width` | `var(--sf-border-width-1)` |
-| `--sf-card-btn-font-size` | `var(--sf-text-s)` |
 | `--sf-card-gap` | `var(--sf-space-m)` |
 | `--sf-card-heading-size` | `var(--sf-text-xl)` |
 | `--sf-card-media-radius` | `var(--sf-card-radius, var(--sf-radius-m))` |