Release v0.7.0: Ship .sf-btn and .sf-card components

CHANGELOG.md

@@ -5,6 +5,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 ## Unreleased
 
 ### Added
+- **components:** `.sf-btn` — first shipped button component (was staged/commented out). Colour families (`--primary`/`--neutral`/`--success`/`--warning`/`--info`/`--danger`), style treatments (`--secondary`/`--ghost`/`--outline`), a size scale (`--xs`/`--s`/`--l`/`--xl`), width (`--block`/`--block-cq`), and `:disabled`/`.is-loading` states. The new `--outline` modifier composes orthogonally with any colour family. Ships in the `*-components` and `full` bundles. (#493, #486)
+- **components:** `.sf-card` — first shipped card component (was staged/commented out). `__header`/`__body`/`__footer`/`__media`/`__avatar`/`__title` subcomponents with concentric-radius math, plus `--bordered`/`--elevated`/`--interactive` modifiers. (#494)
+- **tokens:** activated the button knobs `--sf-btn-gap`/`-font-size`/`-font-weight`/`-min-height`/`-border-width` and the full `--sf-card-*` token block (padding, gap, radius, radius-outer, bg, border, shadow, `--shadow--elevated`/`--shadow--hover`, media-ratio/-radius, heading-size, btn-font-size).
+- **docs:** documented `.sf-btn`/`.sf-card` in `docs/components.md` with HTML examples, plus a copy-paste gradient-outline button recipe.
 - **macros:** `.sf-corner-scoop` — mask-based concave-corner cut, with `--top-left`/`--top-right`/`--bottom-left`/`--bottom-right` placement modifiers and `--sf-corner-scoop-size`/`--sf-corner-scoop-at` knobs.
 - **macros:** `.sf-overlap` / `.sf-overlap-host` — negative-margin overlap recipe (`--down`/`--start`/`--end` modifiers) driven by `--sf-overlap-pull`, with a host class that reserves matching space.
 

badges/css-custom-data.json

@@ -276,19 +276,114 @@
       "description": "Width of full-bleed breakout elements inside a content grid.\n\nDefault: `var(--sf-container-wide)`",
       "syntax": "*"
     },
+    {
+      "name": "--sf-btn-border-width",
+      "description": "Border thickness for .sf-btn (used by all fill, outline, and secondary treatments).\n\nDefault: `var(--sf-border-width-1)`",
+      "syntax": "*"
+    },
+    {
+      "name": "--sf-btn-font-size",
+      "description": "Label font-size for .sf-btn. The size modifiers (--xs/--s/--l/--xl) override this per button.\n\nDefault: `var(--sf-text-m)`",
+      "syntax": "*"
+    },
+    {
+      "name": "--sf-btn-font-weight",
+      "description": "Label font-weight for .sf-btn. Defaults to the interactive weight.\n\nDefault: `var(--sf-font-weight-interactive)`",
+      "syntax": "*"
+    },
+    {
+      "name": "--sf-btn-gap",
+      "description": "Gap between an icon and the label inside .sf-btn.\n\nDefault: `var(--sf-space-2xs)`",
+      "syntax": "*"
+    },
+    {
+      "name": "--sf-btn-min-height",
+      "description": "Minimum target height for .sf-btn. Defaults to --sf-touch-target so buttons meet the WCAG 2.2 target-size minimum.\n\nDefault: `var(--sf-touch-target)`",
+      "syntax": "*"
+    },
     {
       "name": "--sf-btn-padding-block",
-      "description": "Override to give buttons a distinct visual language from form fields without touching global radius/spacing tokens.\n\nDefault: `var(--sf-space-xs)`",
+      "description": "Vertical (block) padding inside .sf-btn.\n\nDefault: `var(--sf-space-xs)`",
       "syntax": "*"
     },
     {
       "name": "--sf-btn-padding-inline",
-      "description": "Override to give buttons a distinct visual language from form fields without touching global radius/spacing tokens.\n\nDefault: `var(--sf-space-m)`",
+      "description": "Horizontal (inline) padding inside .sf-btn.\n\nDefault: `var(--sf-space-m)`",
       "syntax": "*"
     },
     {
       "name": "--sf-btn-radius",
-      "description": "Override to give buttons a distinct visual language from form fields without touching global radius/spacing tokens.\n\nDefault: `var(--sf-radius-m)`",
+      "description": "Corner radius for .sf-btn. Defaults to --sf-radius-m; gives buttons a distinct radius from form fields without touching global tokens.\n\nDefault: `var(--sf-radius-m)`",
+      "syntax": "*"
+    },
+    {
+      "name": "--sf-card-bg",
+      "description": "Background surface for .sf-card. Defaults to --sf-color-surface.\n\nDefault: `var(--sf-color-surface)`",
+      "syntax": "*"
+    },
+    {
+      "name": "--sf-card-border-color",
+      "description": "Border colour for .sf-card. Defaults to --sf-color-border.\n\nDefault: `var(--sf-color-border)`",
+      "syntax": "*"
+    },
+    {
+      "name": "--sf-card-border-width",
+      "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)`",
+      "syntax": "*"
+    },
+    {
+      "name": "--sf-card-heading-size",
+      "description": "Font-size for .sf-card__title. Defaults to --sf-text-xl.\n\nDefault: `var(--sf-text-xl)`",
+      "syntax": "*"
+    },
+    {
+      "name": "--sf-card-media-radius",
+      "description": "Corner radius for .sf-card__media. Mirrors the card's inner radius by default.\n\nDefault: `var(--sf-card-radius, var(--sf-radius-m))`",
+      "syntax": "*"
+    },
+    {
+      "name": "--sf-card-media-ratio",
+      "description": "Aspect ratio for .sf-card__media. Defaults to --sf-ratio-video (16/9).\n\nDefault: `var(--sf-ratio-video)`",
+      "syntax": "*"
+    },
+    {
+      "name": "--sf-card-padding",
+      "description": "Inner padding for .sf-card. Also feeds the concentric-radius math (outer = inner radius + padding).\n\nDefault: `var(--sf-space-l)`",
+      "syntax": "*"
+    },
+    {
+      "name": "--sf-card-radius",
+      "description": "Inner radius for .sf-card children such as __media. Combined with padding to derive the outer radius.\n\nDefault: `var(--sf-radius-m)`",
+      "syntax": "*"
+    },
+    {
+      "name": "--sf-card-radius-outer",
+      "description": "Outer corner radius of .sf-card. Concentric with the inner radius: calc(--sf-card-radius + --sf-card-padding).\n\nDefault: `calc(var(--sf-card-radius) + var(--sf-card-padding))`",
+      "syntax": "*"
+    },
+    {
+      "name": "--sf-card-shadow",
+      "description": "Base drop shadow for .sf-card. Defaults to --sf-shadow-s.\n\nDefault: `var(--sf-shadow-s)`",
+      "syntax": "*"
+    },
+    {
+      "name": "--sf-card-shadow--elevated",
+      "description": "Drop shadow applied by the .sf-card--elevated modifier (border hidden, larger shadow).\n\nDefault: `var(--sf-shadow-l)`",
+      "syntax": "*"
+    },
+    {
+      "name": "--sf-card-shadow--hover",
+      "description": "Drop shadow applied on hover/focus by the .sf-card--interactive modifier.\n\nDefault: `var(--sf-shadow-l)`",
       "syntax": "*"
     },
     {

configurator/package.json

@@ -1,7 +1,7 @@
 {
   "name": "slashed-configurator",
   "private": true,
-  "version": "0.6.35",
+  "version": "0.7.0",
   "description": "Standalone Svelte 5 + Tailwind panel to configure every SLASHED token/knob and generate override CSS. Auto-synced from the framework's generated docs/api-index.json.",
   "type": "module",
   "scripts": {

configurator/src/components/panels/BordersPanel.svelte

@@ -27,6 +27,8 @@
     { label: "Button radius",         token: "--sf-btn-radius",         unit: "rem", min: 0, max: 2,   step: 0.05,  default: 0.5,   rawDefault: "var(--sf-radius-m)",  help: "--sf-btn-radius" },
     { label: "Button padding block",  token: "--sf-btn-padding-block",  unit: "rem", min: 0, max: 1,   step: 0.025, default: 0.375, rawDefault: "var(--sf-space-xs)", help: "--sf-btn-padding-block" },
     { label: "Button padding inline", token: "--sf-btn-padding-inline", unit: "rem", min: 0, max: 2,   step: 0.025, default: 1,     rawDefault: "var(--sf-space-m)",  help: "--sf-btn-padding-inline" },
+    { label: "Card radius (inner)",   token: "--sf-card-radius",        unit: "rem", min: 0, max: 2,   step: 0.05,  default: 0.5,   rawDefault: "var(--sf-radius-m)",  help: "--sf-card-radius" },
+    { label: "Card padding",          token: "--sf-card-padding",       unit: "rem", min: 0, max: 3,   step: 0.05,  default: 1.5,   rawDefault: "var(--sf-space-l)",   help: "--sf-card-padding" },
     { label: "Field radius",          token: "--sf-field-radius",       unit: "rem", min: 0, max: 2,   step: 0.05,  default: 0.5,   rawDefault: "var(--sf-radius-m)",  help: "--sf-field-radius" },
     { label: "Field padding block",   token: "--sf-field-padding-block",  unit: "rem", min: 0, max: 1, step: 0.025, default: 0.375, rawDefault: "var(--sf-space-xs)", help: "--sf-field-padding-block" },
     { label: "Field padding inline",  token: "--sf-field-padding-inline", unit: "rem", min: 0, max: 2, step: 0.025, default: 0.75,  rawDefault: "var(--sf-space-s)",  help: "--sf-field-padding-inline" },

configurator/src/components/shell/PreviewPanel.svelte

@@ -114,9 +114,11 @@
     .pv-emoji{font-size:2rem;line-height:1;}
     .pv-brand{font-weight:700;font-size:var(--sf-text-l);color:var(--sf-color-primary-600);}
     .pv-measure{max-inline-size:34rem;}
-    /* BEM components — .sf-btn / .sf-card / .sf-tag / .sf-field are staged off in
-       core until v0.8, so the preview ships its own token-driven equivalents.
-       These mirror the framework's reserved definitions one-to-one. */
+    /* BEM components — .sf-btn / .sf-card shipped in v0.7.0; .sf-tag / .sf-field
+       are still staged. The preview keeps its own token-driven pv-* equivalents
+       so it stays isolated from whichever framework bundle is loaded (and can
+       show demo-only variants such as pv-card--soft). These track the
+       framework's reserved definitions. */
     .pv-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sf-space-2xs);padding-block:var(--sf-space-xs);padding-inline:var(--sf-space-m);min-block-size:var(--sf-touch-target);font-family:inherit;font-size:var(--sf-text-m);font-weight:var(--sf-font-weight-interactive);line-height:var(--sf-leading-tight);white-space:nowrap;text-decoration:none;border:var(--sf-border-width-1) solid var(--sf-color-action);border-radius:var(--sf-radius-m);cursor:pointer;background:var(--sf-color-action);color:var(--sf-color-text--on-action);transition:var(--sf-transition-form-field);}
     .pv-btn--primary{background:var(--sf-color-primary);color:var(--sf-color-text--on-primary);border-color:var(--sf-color-primary);}
     .pv-btn--secondary{background:transparent;color:var(--sf-color-action);border-color:var(--sf-color-action);}