{
  "_sync": {
    "generatedBy": "configurator/scripts/sync-api.mjs",
    "source": "docs/api-index.json"
  },
  "classes": [
    {
      "name": "no-motion",
      "selector": ".no-motion",
      "kind": "accessibility",
      "category": "Accessibility",
      "group": "",
      "description": "Suppresses all animations and transitions within the subtree. Apply to a container to create a reduced-motion zone without relying on the system preference.",
      "optional": false,
      "layer": "slashed.accessibility"
    },
    {
      "name": "no-print",
      "selector": ".no-print",
      "kind": "print",
      "category": "Print",
      "group": "",
      "description": "Hides the element in @media print. Use on sidebars, navigation bars, and decorative elements that should not appear on paper.",
      "optional": false,
      "layer": "slashed.print"
    },
    {
      "name": "print-color-exact",
      "selector": ".print-color-exact",
      "kind": "print",
      "category": "Print",
      "group": "",
      "description": "Forces exact color rendering in print (print-color-adjust: exact). Use on charts and colored badges that must preserve their fill colors in print.",
      "optional": false,
      "layer": "slashed.print"
    },
    {
      "name": "print-no-color",
      "selector": ".print-no-color",
      "kind": "print",
      "category": "Print",
      "group": "",
      "description": "Strips color information in print (print-color-adjust: economy). Defers to the printer's ink-saving mode for backgrounds and non-critical color fills.",
      "optional": false,
      "layer": "slashed.print"
    },
    {
      "name": "print-only",
      "selector": ".print-only",
      "kind": "print",
      "category": "Print",
      "group": "",
      "description": "Hides the element on screen (display: none) but shows it in @media print. Use for print-only headers, footers, and supplementary content not needed on screen.",
      "optional": false,
      "layer": "slashed.print"
    },
    {
      "name": "sf-alternate",
      "selector": ".sf-alternate",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Zigzag / alternating two-column layout. Even children align image-left/text-right; odd children flip. Collapses to a single column below the breakpoint.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-aspect",
      "selector": ".sf-aspect",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Sets aspect-ratio from a --sf-aspect-ratio scoped token. Override the token inline to get any ratio without a new class.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-bento",
      "selector": ".sf-bento",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Auto-fill bento grid for card dashboards. Children span 1 column by default; use span modifiers (sf-bento-wide, sf-bento-tall, sf-bento-full, sf-bento-featured) to break the grid.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-bento--2",
      "selector": ".sf-bento--2",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Bento grid variant with a 2-column base layout.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-bento--3",
      "selector": ".sf-bento--3",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Bento grid variant with a 3-column base layout.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-bento--6",
      "selector": ".sf-bento--6",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Bento grid variant with a 6-column base layout.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-bento--row-compact",
      "selector": ".sf-bento--row-compact",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Bento grid variant with shorter default row height.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-bento--row-tall",
      "selector": ".sf-bento--row-tall",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Bento grid variant with taller default row height.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-bento-featured",
      "selector": ".sf-bento-featured",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Span modifier for a bento item: takes up 2×2 cells (featured hero placement).",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-bento-full",
      "selector": ".sf-bento-full",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Span modifier for a bento item: stretches across all columns (full-width banner).",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-bento-tall",
      "selector": ".sf-bento-tall",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Span modifier for a bento item: doubles the row height (tall card).",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-bento-wide",
      "selector": ".sf-bento-wide",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Span modifier for a bento item: spans 2 columns (wide card).",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-bg-layer",
      "selector": ".sf-bg-layer",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Background layer — absolutely-positioned cover media that sits behind a parent's content. The parent is auto-promoted to a positioned, isolated stacking context via :has(), so .sf-bg-layer composes natively under .sf-scrim (background → scrim gradient → content). Works as a bare <img class=\"sf-bg-layer\"> or as a wrapper with a nested > img / > video / > picture.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-box",
      "selector": ".sf-box",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Minimal padding container that applies --sf-component-pad on all sides. The simplest layout primitive for adding breathing room.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-breakout",
      "selector": ".sf-breakout",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Breaks a child element out of a parent sf-content-grid, spanning full bleed (or a named grid area) regardless of the parent column. Useful for full-width sections inside constrained prose.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-btn",
      "selector": ".sf-btn",
      "kind": "component",
      "category": "Components",
      "group": ".sf-btn",
      "description": "Interactive call-to-action button. Apply to <button> or <a>. Intrinsic width by default; owns its own styling (excluded from the classless <button> look). Three orthogonal axes — colour family, style treatment (fill/--soft/--outline), gradient — plus a size modifier.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-btn--action",
      "selector": ".sf-btn--action",
      "kind": "component",
      "category": "Components",
      "group": ".sf-btn",
      "description": "Button in the action colour family (same as the unmodified default, named explicitly).",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-btn--base",
      "selector": ".sf-btn--base",
      "kind": "component",
      "category": "Components",
      "group": ".sf-btn",
      "description": "Button in the base (surface-neutral) colour family.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-btn--block",
      "selector": ".sf-btn--block",
      "kind": "component",
      "category": "Components",
      "group": ".sf-btn",
      "description": "Full-width button (100% inline size) everywhere.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-btn--block-cq",
      "selector": ".sf-btn--block-cq",
      "kind": "component",
      "category": "Components",
      "group": ".sf-btn",
      "description": "Full-width button only inside a query container narrower than 20rem; intrinsic otherwise.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-btn--danger",
      "selector": ".sf-btn--danger",
      "kind": "component",
      "category": "Components",
      "group": ".sf-btn",
      "description": "Button in the danger (destructive) colour family.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-btn--gradient",
      "selector": ".sf-btn--gradient",
      "kind": "component",
      "category": "Components",
      "group": ".sf-btn",
      "description": "Gradient axis: paints the fill (or, with --outline, the border ring) with the family's --sf-gradient-* token. Core-4 brand families (primary/secondary/tertiary/action); solid no-op for other families. Composes with any colour family.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-btn--info",
      "selector": ".sf-btn--info",
      "kind": "component",
      "category": "Components",
      "group": ".sf-btn",
      "description": "Button in the info colour family.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-btn--l",
      "selector": ".sf-btn--l",
      "kind": "component",
      "category": "Components",
      "group": ".sf-btn",
      "description": "Large button size.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-btn--neutral",
      "selector": ".sf-btn--neutral",
      "kind": "component",
      "category": "Components",
      "group": ".sf-btn",
      "description": "Button in the neutral colour family.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-btn--outline",
      "selector": ".sf-btn--outline",
      "kind": "component",
      "category": "Components",
      "group": ".sf-btn",
      "description": "Outlined button (coloured border/text, transparent fill) that fills with the family colour on hover. Composes with any colour family.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-btn--primary",
      "selector": ".sf-btn--primary",
      "kind": "component",
      "category": "Components",
      "group": ".sf-btn",
      "description": "Button in the primary brand colour family.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-btn--s",
      "selector": ".sf-btn--s",
      "kind": "component",
      "category": "Components",
      "group": ".sf-btn",
      "description": "Small button size.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-btn--secondary",
      "selector": ".sf-btn--secondary",
      "kind": "component",
      "category": "Components",
      "group": ".sf-btn",
      "description": "Button in the secondary brand colour family.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-btn--soft",
      "selector": ".sf-btn--soft",
      "kind": "component",
      "category": "Components",
      "group": ".sf-btn",
      "description": "Soft tonal-fill button: a light wash of the family colour (subtle at rest, muted on hover), coloured text, no border. Lower-emphasis than the solid fill. Composes with any colour family.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-btn--success",
      "selector": ".sf-btn--success",
      "kind": "component",
      "category": "Components",
      "group": ".sf-btn",
      "description": "Button in the success (positive) colour family.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-btn--tertiary",
      "selector": ".sf-btn--tertiary",
      "kind": "component",
      "category": "Components",
      "group": ".sf-btn",
      "description": "Button in the tertiary brand colour family.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-btn--warning",
      "selector": ".sf-btn--warning",
      "kind": "component",
      "category": "Components",
      "group": ".sf-btn",
      "description": "Button in the warning (caution) colour family.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-btn--xl",
      "selector": ".sf-btn--xl",
      "kind": "component",
      "category": "Components",
      "group": ".sf-btn",
      "description": "Extra-large button size.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-btn--xs",
      "selector": ".sf-btn--xs",
      "kind": "component",
      "category": "Components",
      "group": ".sf-btn",
      "description": "Extra-small button size.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-card",
      "selector": ".sf-card",
      "kind": "component",
      "category": "Components",
      "group": ".sf-card",
      "description": "Padded content container with optional __header/__body/__footer and __media/__avatar/__title subcomponents. Uses concentric radius math so inner corners stay proportional.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-card__avatar",
      "selector": ".sf-card__avatar",
      "kind": "component",
      "category": "Components",
      "group": ".sf-card",
      "description": "Circular avatar image inside a card, sized via --sf-card-avatar-size.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-card__body",
      "selector": ".sf-card__body",
      "kind": "component",
      "category": "Components",
      "group": ".sf-card",
      "description": "Card body slot.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-card__footer",
      "selector": ".sf-card__footer",
      "kind": "component",
      "category": "Components",
      "group": ".sf-card",
      "description": "Card footer slot with a top divider.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-card__header",
      "selector": ".sf-card__header",
      "kind": "component",
      "category": "Components",
      "group": ".sf-card",
      "description": "Card header slot with a bottom divider.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-card__media",
      "selector": ".sf-card__media",
      "kind": "component",
      "category": "Components",
      "group": ".sf-card",
      "description": "Full-width cover image/video for a card, cropped to --sf-card-media-ratio (16/9 by default).",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-card__title",
      "selector": ".sf-card__title",
      "kind": "component",
      "category": "Components",
      "group": ".sf-card",
      "description": "Card title heading, sized via --sf-card-heading-size.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-card--bordered",
      "selector": ".sf-card--bordered",
      "kind": "component",
      "category": "Components",
      "group": ".sf-card",
      "description": "Flat, outlined card: keeps the border, drops the shadow.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-card--elevated",
      "selector": ".sf-card--elevated",
      "kind": "component",
      "category": "Components",
      "group": ".sf-card",
      "description": "Floating card: hides the border, applies a larger shadow.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-card--interactive",
      "selector": ".sf-card--interactive",
      "kind": "component",
      "category": "Components",
      "group": ".sf-card",
      "description": "Adds a pointer cursor and a shadow/translate lift on hover or keyboard focus. Pair with .sf-clickable-parent for a fully clickable card. Lift is suppressed under prefers-reduced-motion.",
      "optional": true,
      "layer": "slashed.components"
    },
    {
      "name": "sf-center",
      "selector": ".sf-center",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Centers children both horizontally and vertically using flexbox. Optionally add sf-center--intrinsic to size the container to its content.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-center--intrinsic",
      "selector": ".sf-center--intrinsic",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Modifier for sf-center: constrains the container to the natural width of its children (no stretching to fill available space).",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-clickable-parent",
      "selector": ".sf-clickable-parent",
      "kind": "accessibility",
      "category": "Accessibility",
      "group": "",
      "description": "Makes the entire card or list-item clickable via an absolutely-positioned child overlay link. Apply to the container; place sf-clickable-parent__overlay on the <a>.",
      "optional": false,
      "layer": "slashed.accessibility"
    },
    {
      "name": "sf-clickable-parent__overlay",
      "selector": ".sf-clickable-parent__overlay",
      "kind": "accessibility",
      "category": "Accessibility",
      "group": "",
      "description": "The full-bleed overlay link inside an sf-clickable-parent. Stretches to cover the parent and uses pointer-events to let interactive children keep their own clicks.",
      "optional": false,
      "layer": "slashed.accessibility"
    },
    {
      "name": "sf-cluster",
      "selector": ".sf-cluster",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Flex-wrap row of variable-width items with automatic gap. Children wrap when the container is too narrow. Use for tag lists, button groups, and icon rows.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-cluster--2xl",
      "selector": ".sf-cluster--2xl",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Cluster variant with 2xl gap between items.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-cluster--between",
      "selector": ".sf-cluster--between",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Cluster variant that distributes items with space-between alignment.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-cluster--center",
      "selector": ".sf-cluster--center",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Cluster variant that centers the item row horizontally.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-cluster--end",
      "selector": ".sf-cluster--end",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Cluster variant that aligns items to the inline end (right in LTR).",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-cluster--l",
      "selector": ".sf-cluster--l",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Cluster variant with large (l) gap between items.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-cluster--m",
      "selector": ".sf-cluster--m",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Cluster variant with medium (m) gap between items.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-cluster--no-wrap",
      "selector": ".sf-cluster--no-wrap",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Cluster variant that prevents item wrapping (single-line row).",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-cluster--s",
      "selector": ".sf-cluster--s",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Cluster variant with small (s) gap between items.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-cluster--xl",
      "selector": ".sf-cluster--xl",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Cluster variant with xl gap between items.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-cluster--xs",
      "selector": ".sf-cluster--xs",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Cluster variant with xs gap between items.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-color-pulse",
      "selector": ".sf-color-pulse",
      "kind": "motion",
      "category": "Motion / animation",
      "group": "",
      "description": "Applies a gentle color-pulse animation to draw attention to a dynamic value change (e.g. a counter updating). Scoped to users who have not requested reduced motion.",
      "optional": false,
      "layer": "slashed.motion"
    },
    {
      "name": "sf-container",
      "selector": ".sf-container",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Max-width page container, centered with auto side gutters. Establishes a named inline-size container (cq-container) for container queries. Default width is --sf-container-m.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-container--full",
      "selector": ".sf-container--full",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Container variant that spans the full viewport width (no max-width cap).",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-container--narrow",
      "selector": ".sf-container--narrow",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Container variant with a narrower max-width (--sf-container-s). Use for single-column prose and forms.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-container--prose",
      "selector": ".sf-container--prose",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Container variant with a prose-optimised max-width (--sf-container-prose). Ideal for long-form reading content.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-container--wide",
      "selector": ".sf-container--wide",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Container variant with a wider max-width (--sf-container-l). Use for dashboards and wide media.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-content-auto",
      "selector": ".sf-content-auto",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Sets content-visibility: auto on the element. The browser skips rendering off-screen content, improving LCP for long pages.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-content-grid",
      "selector": ".sf-content-grid",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Holy-grail content grid with named areas: full-bleed, popout, and content columns. Use sf-breakout on children to escape the content column.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-cover",
      "selector": ".sf-cover",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Vertically stretches to at least a viewport height with a centered element (sf-cover__center). Typical use: hero sections.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-cover__center",
      "selector": ".sf-cover__center",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "The centered focal element inside an sf-cover. Stays vertically centered even when the cover content is shorter than the viewport.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-cover--max",
      "selector": ".sf-cover--max",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Cover variant that uses a max-height instead of min-height for the viewport constraint.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-cover--min",
      "selector": ".sf-cover--min",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Cover variant that reduces the minimum height to half a viewport.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-cover--padding-l",
      "selector": ".sf-cover--padding-l",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Cover variant with large vertical padding above and below the centered content.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-cover--padding-s",
      "selector": ".sf-cover--padding-s",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Cover variant with small vertical padding above and below the centered content.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-cq",
      "selector": ".sf-cq",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Assigns an inline-size container context to any element. Children can then use @container rules or container-query-aware tokens.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-divide",
      "selector": ".sf-divide",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Rules between direct children (a border on each child after the first), reusing .sf-divider's tokens — no per-gap markup needed.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-divide--vertical",
      "selector": ".sf-divide--vertical",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Vertical rules between direct children (inline-start borders), for row/horizontal layouts.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-divider",
      "selector": ".sf-divider",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Horizontal rule (divider line). Uses --sf-divider-* tokens for color, width, and style. Modifiers change dash style or orientation.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-divider--dashed",
      "selector": ".sf-divider--dashed",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Divider variant with a dashed stroke.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-divider--dotted",
      "selector": ".sf-divider--dotted",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Divider variant with a dotted stroke.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-divider--gradient",
      "selector": ".sf-divider--gradient",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Divider variant rendered as a gradient that fades to transparent at both ends.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-divider--soft",
      "selector": ".sf-divider--soft",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Divider variant with reduced opacity (subtle separator).",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-divider--strong",
      "selector": ".sf-divider--strong",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Divider variant with stronger/darker color for a more prominent separator.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-divider--vertical",
      "selector": ".sf-divider--vertical",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Divider variant rendered as a vertical line. Use inside flex or grid containers.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-drop-shadow-l",
      "selector": ".sf-drop-shadow-l",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Large filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-l).",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-drop-shadow-m",
      "selector": ".sf-drop-shadow-m",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Medium filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-m).",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-drop-shadow-s",
      "selector": ".sf-drop-shadow-s",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Small filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-s).",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-drop-shadow-xl",
      "selector": ".sf-drop-shadow-xl",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Extra-large filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-xl).",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-drop-shadow-xs",
      "selector": ".sf-drop-shadow-xs",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Extra-small filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-xs).",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-entrance--fade",
      "selector": ".sf-entrance--fade",
      "kind": "motion",
      "category": "Motion / animation",
      "group": "",
      "description": "Scroll-driven entrance: element fades in as it enters the viewport. Animation tied to scroll progress via animation-timeline.",
      "optional": false,
      "layer": "slashed.motion"
    },
    {
      "name": "sf-entrance--fade-down",
      "selector": ".sf-entrance--fade-down",
      "kind": "motion",
      "category": "Motion / animation",
      "group": "",
      "description": "Scroll-driven entrance: element fades in while moving downward into position.",
      "optional": false,
      "layer": "slashed.motion"
    },
    {
      "name": "sf-entrance--fade-left",
      "selector": ".sf-entrance--fade-left",
      "kind": "motion",
      "category": "Motion / animation",
      "group": "",
      "description": "Scroll-driven entrance: element fades in while moving from the right toward the left.",
      "optional": false,
      "layer": "slashed.motion"
    },
    {
      "name": "sf-entrance--fade-right",
      "selector": ".sf-entrance--fade-right",
      "kind": "motion",
      "category": "Motion / animation",
      "group": "",
      "description": "Scroll-driven entrance: element fades in while moving from the left toward the right.",
      "optional": false,
      "layer": "slashed.motion"
    },
    {
      "name": "sf-entrance--fade-up",
      "selector": ".sf-entrance--fade-up",
      "kind": "motion",
      "category": "Motion / animation",
      "group": "",
      "description": "Scroll-driven entrance: element fades in while moving upward into position.",
      "optional": false,
      "layer": "slashed.motion"
    },
    {
      "name": "sf-entrance--scale-up",
      "selector": ".sf-entrance--scale-up",
      "kind": "motion",
      "category": "Motion / animation",
      "group": "",
      "description": "Scroll-driven entrance: element fades in while scaling up from a slightly smaller size.",
      "optional": false,
      "layer": "slashed.motion"
    },
    {
      "name": "sf-equal",
      "selector": ".sf-equal",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Flowing CSS multi-column layout (not a grid) — content distributes across columns like a newspaper instead of sitting in fixed cells. Reach for .sf-grid/.sf-grid--fit for discrete grid cells instead.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-equal--2",
      "selector": ".sf-equal--2",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Equal-columns variant locked to column-count: 2.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-equal--3",
      "selector": ".sf-equal--3",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Equal-columns variant locked to column-count: 3.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-equal--4",
      "selector": ".sf-equal--4",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Equal-columns variant locked to column-count: 4.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-equal--6",
      "selector": ".sf-equal--6",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Equal-columns variant locked to column-count: 6.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-equal-height",
      "selector": ".sf-equal-height",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Forces all flex children to equal height (align-items: stretch). Use on a flex row to make cards in a grid share the tallest card's height.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-exit--fade",
      "selector": ".sf-exit--fade",
      "kind": "motion",
      "category": "Motion / animation",
      "group": "",
      "description": "Scroll-out exit animation: fades the element out in place (sf-fade-out).",
      "optional": false,
      "layer": "slashed.motion"
    },
    {
      "name": "sf-exit--fade-down",
      "selector": ".sf-exit--fade-down",
      "kind": "motion",
      "category": "Motion / animation",
      "group": "",
      "description": "Scroll-out exit animation: fades out while sliding downward (sf-slide-out-down).",
      "optional": false,
      "layer": "slashed.motion"
    },
    {
      "name": "sf-exit--fade-left",
      "selector": ".sf-exit--fade-left",
      "kind": "motion",
      "category": "Motion / animation",
      "group": "",
      "description": "Scroll-out exit animation: fades out while sliding to the left (sf-slide-out-left).",
      "optional": false,
      "layer": "slashed.motion"
    },
    {
      "name": "sf-exit--fade-right",
      "selector": ".sf-exit--fade-right",
      "kind": "motion",
      "category": "Motion / animation",
      "group": "",
      "description": "Scroll-out exit animation: fades out while sliding to the right (sf-slide-out-right).",
      "optional": false,
      "layer": "slashed.motion"
    },
    {
      "name": "sf-exit--fade-up",
      "selector": ".sf-exit--fade-up",
      "kind": "motion",
      "category": "Motion / animation",
      "group": "",
      "description": "Scroll-out exit animation: fades out while sliding upward (sf-slide-out-up).",
      "optional": false,
      "layer": "slashed.motion"
    },
    {
      "name": "sf-exit--scale-down",
      "selector": ".sf-exit--scale-down",
      "kind": "motion",
      "category": "Motion / animation",
      "group": "",
      "description": "Scroll-out exit animation: fades out while shrinking (sf-scale-down).",
      "optional": false,
      "layer": "slashed.motion"
    },
    {
      "name": "sf-fade-in",
      "selector": ".sf-fade-in",
      "kind": "motion",
      "category": "Motion / animation",
      "group": "",
      "description": "One-shot fade-in animation (opacity 0 → 1). Scoped to no-preference so it stops automatically for reduced-motion users.",
      "optional": false,
      "layer": "slashed.motion"
    },
    {
      "name": "sf-fade-out",
      "selector": ".sf-fade-out",
      "kind": "motion",
      "category": "Motion / animation",
      "group": "",
      "description": "One-shot fade-out animation (opacity 1 → 0). Scoped to no-preference.",
      "optional": false,
      "layer": "slashed.motion"
    },
    {
      "name": "sf-flow",
      "selector": ".sf-flow",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Applies --sf-flow-space as margin-block-start to all direct children except the first. Establishes consistent vertical rhythm in prose-like containers.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-fluid-cq",
      "selector": ".sf-fluid-cq",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": ".sf-fluid-cq: opt a subtree into a CONTAINER-relative fluid scale (issue #497). By default --sf-text-* / --sf-space-* interpolate against 100vw (the viewport); inside .sf-fluid-cq they interpolate against 100cqi (this box's inline size), so type + spacing track the container…",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-focus-parent",
      "selector": ".sf-focus-parent",
      "kind": "accessibility",
      "category": "Accessibility",
      "group": "",
      "description": "Forwards focus-visible styling to this container when any descendant is keyboard-focused. Useful for custom controls that wrap a visually-hidden <input>.",
      "optional": false,
      "layer": "slashed.accessibility"
    },
    {
      "name": "sf-focus-shadow",
      "selector": ".sf-focus-shadow",
      "kind": "accessibility",
      "category": "Accessibility",
      "group": "",
      "description": "Applies the standard focus ring as a box-shadow to any element. Use on custom controls where the native :focus-visible ring doesn't render correctly.",
      "optional": false,
      "layer": "slashed.accessibility"
    },
    {
      "name": "sf-frame",
      "selector": ".sf-frame",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Aspect-ratio container for media (images, video, maps). Children fill and cover the fixed-ratio box. Default ratio is 16:9.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-frame--3-2",
      "selector": ".sf-frame--3-2",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Frame variant locked to a 3:2 aspect ratio.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-frame--4-3",
      "selector": ".sf-frame--4-3",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Frame variant locked to a 4:3 aspect ratio.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-frame--cinema",
      "selector": ".sf-frame--cinema",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Frame variant locked to a cinematic 21:9 aspect ratio.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-frame--golden",
      "selector": ".sf-frame--golden",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Frame variant locked to the golden ratio (1.618:1).",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-frame--portrait",
      "selector": ".sf-frame--portrait",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Frame variant locked to a portrait 2:3 aspect ratio.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-frame--square",
      "selector": ".sf-frame--square",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Frame variant locked to a square 1:1 aspect ratio.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-frame--video",
      "selector": ".sf-frame--video",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Frame variant locked to the standard 16:9 video aspect ratio.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-full-bleed",
      "selector": ".sf-full-bleed",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Forces an element to span the full viewport width, breaking out of any centered container. Use for full-bleed images and section backgrounds.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-gap",
      "selector": ".sf-gap",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Injects the default --sf-gap into an existing flex or grid container without imposing display:flex itself. Use when the parent is already a flex or grid.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-gap--2xl",
      "selector": ".sf-gap--2xl",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Gap injection variant with 2xl gap value.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-gap--l",
      "selector": ".sf-gap--l",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Gap injection variant with large (l) gap value.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-gap--m",
      "selector": ".sf-gap--m",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Gap injection variant with medium (m) gap value.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-gap--s",
      "selector": ".sf-gap--s",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Gap injection variant with small (s) gap value.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-gap--xl",
      "selector": ".sf-gap--xl",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Gap injection variant with xl gap value.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-gap--xs",
      "selector": ".sf-gap--xs",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Gap injection variant with xs gap value.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-grid",
      "selector": ".sf-grid",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Auto-fill CSS grid. Columns are sized with RAM pattern (Repeat, Auto-fill, Minmax) and wrap automatically. Default column min-width is --sf-grid-min-col.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-grid--2xl",
      "selector": ".sf-grid--2xl",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Grid variant with a 2xl minimum column width.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-grid--dense",
      "selector": ".sf-grid--dense",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Grid variant with grid-auto-flow: dense, allowing the grid to fill holes created by span modifiers.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-grid--fit",
      "selector": ".sf-grid--fit",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Grid variant that switches from auto-fill to auto-fit, collapsing empty columns.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-grid--l",
      "selector": ".sf-grid--l",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Grid variant with a large (l) minimum column width.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-grid--m",
      "selector": ".sf-grid--m",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Grid variant with a medium (m) minimum column width.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-grid--s",
      "selector": ".sf-grid--s",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Grid variant with a small (s) minimum column width.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-grid--xl",
      "selector": ".sf-grid--xl",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Grid variant with an xl minimum column width.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-grid--xs",
      "selector": ".sf-grid--xs",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Grid variant with an xs minimum column width.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-grid-cols-1",
      "selector": ".sf-grid-cols-1",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Single-column layout (forces all children to one column).",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-grid-cols-1-2",
      "selector": ".sf-grid-cols-1-2",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Two-column ratio grid: first child takes 1fr, second takes 2fr. Container-query responsive.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-grid-cols-1-3",
      "selector": ".sf-grid-cols-1-3",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Two-column ratio grid: first child takes 1fr, second takes 3fr. Container-query responsive.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-grid-cols-2",
      "selector": ".sf-grid-cols-2",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Responsive 2-column fixed grid. Uses container queries to collapse to one column on narrow containers.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-grid-cols-2-1",
      "selector": ".sf-grid-cols-2-1",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Two-column ratio grid: first child takes 2fr, second takes 1fr. Container-query responsive.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-grid-cols-3",
      "selector": ".sf-grid-cols-3",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Responsive 3-column fixed grid. Collapses progressively on narrow containers.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-grid-cols-3-1",
      "selector": ".sf-grid-cols-3-1",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Two-column ratio grid: first child takes 3fr, second takes 1fr. Container-query responsive.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-grid-cols-4",
      "selector": ".sf-grid-cols-4",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Responsive 4-column fixed grid. Collapses progressively on narrow containers.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-grid-cols-6",
      "selector": ".sf-grid-cols-6",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Responsive 6-column fixed grid. Collapses progressively on narrow containers.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-grid-flex",
      "selector": ".sf-grid-flex",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Flexbox alternative to .sf-grid for item counts that don't divide evenly: leftover last-row items stretch to fill the row by default, or stay fixed-width and centered with --center.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-grid-flex--2xl",
      "selector": ".sf-grid-flex--2xl",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Grid-flex variant with a 2xl minimum item width.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-grid-flex--center",
      "selector": ".sf-grid-flex--center",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Grid-flex variant that keeps last-row leftover items fixed-width and centered instead of stretching.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-grid-flex--l",
      "selector": ".sf-grid-flex--l",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Grid-flex variant with a large (l) minimum item width.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-grid-flex--m",
      "selector": ".sf-grid-flex--m",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Grid-flex variant with a medium (m) minimum item width.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-grid-flex--s",
      "selector": ".sf-grid-flex--s",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Grid-flex variant with a small (s) minimum item width.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-grid-flex--xl",
      "selector": ".sf-grid-flex--xl",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Grid-flex variant with an xl minimum item width.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-grid-flex--xs",
      "selector": ".sf-grid-flex--xs",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Grid-flex variant with an xs minimum item width.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-h1",
      "selector": ".sf-h1",
      "kind": "utility",
      "category": "Utilities",
      "group": "HEADING HELPER CLASSES (.sf-h1",
      "description": "Applies h1-level typography (size, line-height, weight, tracking, max-width) to any element without changing its semantic level.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-h2",
      "selector": ".sf-h2",
      "kind": "utility",
      "category": "Utilities",
      "group": "HEADING HELPER CLASSES (.sf-h1",
      "description": "Applies h2-level typography to any element without changing its semantic level.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-h3",
      "selector": ".sf-h3",
      "kind": "utility",
      "category": "Utilities",
      "group": "HEADING HELPER CLASSES (.sf-h1",
      "description": "Applies h3-level typography to any element without changing its semantic level.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-h4",
      "selector": ".sf-h4",
      "kind": "utility",
      "category": "Utilities",
      "group": "HEADING HELPER CLASSES (.sf-h1",
      "description": "Applies h4-level typography to any element without changing its semantic level.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-h5",
      "selector": ".sf-h5",
      "kind": "utility",
      "category": "Utilities",
      "group": "HEADING HELPER CLASSES (.sf-h1",
      "description": "Applies h5-level typography to any element without changing its semantic level.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-h6",
      "selector": ".sf-h6",
      "kind": "utility",
      "category": "Utilities",
      "group": "HEADING HELPER CLASSES (.sf-h1",
      "description": "Applies h6-level typography to any element without changing its semantic level.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-header--l",
      "selector": ".sf-header--l",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Header block padding at the l step (--sf-space-l).",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-header--m",
      "selector": ".sf-header--m",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Header block padding at the m step (--sf-space-m).",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-header--s",
      "selector": ".sf-header--s",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Header block padding at the s step (--sf-space-s).",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-header--xl",
      "selector": ".sf-header--xl",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Header block padding at the xl step (--sf-space-xl).",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-header--xs",
      "selector": ".sf-header--xs",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Header block padding at the xs step (--sf-space-xs).",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-hover-float",
      "selector": ".sf-hover-float",
      "kind": "utility",
      "category": "Utilities",
      "group": "HOVER-TRANSFORM UTILITIES (.sf-hover-*)",
      "description": "Hover-triggered transform: translates the element up slightly on hover.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-hover-grow",
      "selector": ".sf-hover-grow",
      "kind": "utility",
      "category": "Utilities",
      "group": "HOVER-TRANSFORM UTILITIES (.sf-hover-*)",
      "description": "Hover-triggered transform: scales the element up slightly on hover.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-hover-shrink",
      "selector": ".sf-hover-shrink",
      "kind": "utility",
      "category": "Utilities",
      "group": "HOVER-TRANSFORM UTILITIES (.sf-hover-*)",
      "description": "Hover-triggered transform: scales the element down slightly on hover.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-hover-sink",
      "selector": ".sf-hover-sink",
      "kind": "utility",
      "category": "Utilities",
      "group": "HOVER-TRANSFORM UTILITIES (.sf-hover-*)",
      "description": "Hover-triggered transform: translates the element down slightly on hover.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-hover-slide-end",
      "selector": ".sf-hover-slide-end",
      "kind": "utility",
      "category": "Utilities",
      "group": "HOVER-TRANSFORM UTILITIES (.sf-hover-*)",
      "description": "Hover-triggered transform: translates the element toward the inline-end on hover.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-hover-slide-start",
      "selector": ".sf-hover-slide-start",
      "kind": "utility",
      "category": "Utilities",
      "group": "HOVER-TRANSFORM UTILITIES (.sf-hover-*)",
      "description": "Hover-triggered transform: translates the element toward the inline-start on hover.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-icon",
      "selector": ".sf-icon",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Inline icon sizing primitive. Sets width and height to --sf-icon-m via em-based tokens so the icon scales with the surrounding text.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-icon--2xl",
      "selector": ".sf-icon--2xl",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Icon variant sized to --sf-icon-2xl (extra-extra-large).",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-icon--boxed",
      "selector": ".sf-icon--boxed",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Icon variant with a square bordered box background. Useful for standalone icon buttons and feature icons.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-icon--l",
      "selector": ".sf-icon--l",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Icon variant sized to --sf-icon-l (large).",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-icon--m",
      "selector": ".sf-icon--m",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Icon variant sized to --sf-icon-m (medium, same as base sf-icon).",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-icon--s",
      "selector": ".sf-icon--s",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Icon variant sized to --sf-icon-s (small).",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-icon--xl",
      "selector": ".sf-icon--xl",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Icon variant sized to --sf-icon-xl (extra-large).",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-icon--xs",
      "selector": ".sf-icon--xs",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Icon variant sized to --sf-icon-xs (extra-small).",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-imposter",
      "selector": ".sf-imposter",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Absolutely positions an element at the center of its nearest positioned ancestor. Use for overlays, badges, and floating labels.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-imposter--contain",
      "selector": ".sf-imposter--contain",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Imposter variant that clamps the element within the bounds of its parent using overflow:hidden on the parent.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-imposter--fixed",
      "selector": ".sf-imposter--fixed",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Imposter variant that uses position:fixed instead of absolute. Use for viewport-level overlays and modals.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-invisible",
      "selector": ".sf-invisible",
      "kind": "utility",
      "category": "Utilities",
      "group": "VISIBILITY HELPERS (.sf-invisible / .sf-visible)",
      "description": "Visibility helper (optional/utilities.css) — hides the element visually but keeps it in the layout and accessibility tree (visibility: hidden). Not a runtime state: no JS/ARIA condition of its own.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-is-disabled",
      "selector": ".sf-is-disabled",
      "kind": "state",
      "category": "State classes",
      "group": "INTERACTIVITY",
      "description": "Disabled state — dims the element (--sf-opacity-disabled), removes pointer events, and sets cursor: not-allowed. Inherited by child elements that re-enable pointer events.",
      "optional": false,
      "layer": "slashed.states"
    },
    {
      "name": "sf-is-draggable",
      "selector": ".sf-is-draggable",
      "kind": "state",
      "category": "State classes",
      "group": "DRAG & DROP",
      "description": "Draggable state — shows a grab cursor to indicate the element can be dragged. Apply before a drag interaction begins.",
      "optional": false,
      "layer": "slashed.states"
    },
    {
      "name": "sf-is-dragging",
      "selector": ".sf-is-dragging",
      "kind": "state",
      "category": "State classes",
      "group": "DRAG & DROP",
      "description": "Active drag state — shows a grabbing cursor while the element is being dragged. Apply during the drag event.",
      "optional": false,
      "layer": "slashed.states"
    },
    {
      "name": "sf-is-drop-target",
      "selector": ".sf-is-drop-target",
      "kind": "state",
      "category": "State classes",
      "group": "DRAG & DROP",
      "description": "Drop-target state — applies a visual highlight to indicate a valid drag-and-drop destination. Toggle on drag-over events.",
      "optional": false,
      "layer": "slashed.states"
    },
    {
      "name": "sf-is-empty",
      "selector": ".sf-is-empty",
      "kind": "state",
      "category": "State classes",
      "group": "EMPTY STATE",
      "description": "Empty state — hides the element when it has no child nodes (:empty). Used for dynamic lists or containers that may render empty.",
      "optional": false,
      "layer": "slashed.states"
    },
    {
      "name": "sf-is-error",
      "selector": ".sf-is-error",
      "kind": "state",
      "category": "State classes",
      "group": "VALIDATION / FEEDBACK",
      "description": "Error state — general (not form-field-specific) negative feedback. Applies danger color tokens to indicate a validation failure or system error. Visual styling is identical to sf-is-invalid.",
      "optional": false,
      "layer": "slashed.states"
    },
    {
      "name": "sf-is-highlighted",
      "selector": ".sf-is-highlighted",
      "kind": "state",
      "category": "State classes",
      "group": "SELECTED / HIGHLIGHTED",
      "description": "Highlighted state — applies a highlight background. Useful for search result highlighting and keyboard-navigated lists.",
      "optional": false,
      "layer": "slashed.states"
    },
    {
      "name": "sf-is-info",
      "selector": ".sf-is-info",
      "kind": "state",
      "category": "State classes",
      "group": "VALIDATION / FEEDBACK",
      "description": "Info status state — applies info color tokens. Use for neutral informational messages and hints.",
      "optional": false,
      "layer": "slashed.states"
    },
    {
      "name": "sf-is-invalid",
      "selector": ".sf-is-invalid",
      "kind": "state",
      "category": "State classes",
      "group": "VALIDATION / FEEDBACK",
      "description": "Invalid state — applies danger color tokens to form fields with validation failures. Identical visual output to sf-is-error; the name signals form-field context.",
      "optional": false,
      "layer": "slashed.states"
    },
    {
      "name": "sf-is-loading",
      "selector": ".sf-is-loading",
      "kind": "state",
      "category": "State classes",
      "group": "LOADING / ASYNC FEEDBACK",
      "description": "Loading state — hides the element's text (color: transparent), removes pointer events, and renders a spinner via ::after. Use for buttons and containers awaiting async results.",
      "optional": false,
      "layer": "slashed.states"
    },
    {
      "name": "sf-is-selected",
      "selector": ".sf-is-selected",
      "kind": "state",
      "category": "State classes",
      "group": "SELECTED / HIGHLIGHTED",
      "description": "Selected state — marks an item as selected in a list, table row, or grid cell. Visual specifics (background, border) are applied by component styles.",
      "optional": false,
      "layer": "slashed.states"
    },
    {
      "name": "sf-is-shimmer",
      "selector": ".sf-is-shimmer",
      "kind": "state",
      "category": "State classes",
      "group": "LOADING / ASYNC FEEDBACK",
      "description": "Shimmer loading placeholder state. Applies a shimmer animation over the element to indicate that content is loading. Works on both img and non-media elements. (Renamed from .sf-is-skeleton so \"skeleton\" refers only to the planned .sf-skeleton component.)",
      "optional": false,
      "layer": "slashed.states"
    },
    {
      "name": "sf-is-success",
      "selector": ".sf-is-success",
      "kind": "state",
      "category": "State classes",
      "group": "VALIDATION / FEEDBACK",
      "description": "Success status state — applies success color tokens. Use for confirmation messages, completed form steps, and positive feedback.",
      "optional": false,
      "layer": "slashed.states"
    },
    {
      "name": "sf-is-valid",
      "selector": ".sf-is-valid",
      "kind": "state",
      "category": "State classes",
      "group": "VALIDATION / FEEDBACK",
      "description": "Valid state — applies success color tokens to form fields that have passed validation. Visual styling is identical to sf-is-success; the name signals form-field context.",
      "optional": false,
      "layer": "slashed.states"
    },
    {
      "name": "sf-is-warning",
      "selector": ".sf-is-warning",
      "kind": "state",
      "category": "State classes",
      "group": "VALIDATION / FEEDBACK",
      "description": "Warning status state — applies warning color tokens. Use for cautionary messages and non-critical alerts.",
      "optional": false,
      "layer": "slashed.states"
    },
    {
      "name": "sf-line-clamp-2",
      "selector": ".sf-line-clamp-2",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Clamps text to 2 lines with an ellipsis. Applies -webkit-line-clamp: 2.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-line-clamp-3",
      "selector": ".sf-line-clamp-3",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Clamps text to 3 lines with an ellipsis. Applies -webkit-line-clamp: 3.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-line-clamp-N",
      "selector": ".sf-line-clamp-N",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Clamps text to a custom N lines. Set --sf-line-clamp on the element to control the number of visible lines.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-link--reverse",
      "selector": ".sf-link--reverse",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Link color modifier: reverses the default link color to work on dark/inverted backgrounds. Sets color to --sf-color-text--inverse.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-link--subtle",
      "selector": ".sf-link--subtle",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Link color modifier: renders the link in the body text color instead of the default action color. Underline still indicates the link on hover.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-link-external",
      "selector": ".sf-link-external",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Automatically appends an external-link icon (via ::after content) to indicate the link opens in a new tab or goes to an external domain.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-list-none",
      "selector": ".sf-list-none",
      "kind": "utility",
      "category": "Utilities",
      "group": "LIST RESET (.sf-list-none)",
      "description": "Drops marker + inline start-padding in one class, on any <ul>/<ol> (or element with list-style applied).",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-live-validate",
      "selector": ".sf-live-validate",
      "kind": "form",
      "category": "Forms",
      "group": "",
      "description": "Scopes native constraint-validation feedback to this subtree: within it, :user-invalid/:user-valid on input/select/textarea drive --sf-field-border-color (the same token .sf-is-invalid/.sf-is-valid set explicitly). Apply to a <form> or <fieldset>. Off by default so a still-empty required field isn't marked invalid before a submit is attempted.",
      "optional": true,
      "layer": "slashed.forms"
    },
    {
      "name": "sf-marker--action",
      "selector": ".sf-marker--action",
      "kind": "utility",
      "category": "Utilities",
      "group": "LIST MARKER COLOUR (.sf-marker--*)",
      "description": "Colours list ::markers with the action colour.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-marker--primary",
      "selector": ".sf-marker--primary",
      "kind": "utility",
      "category": "Utilities",
      "group": "LIST MARKER COLOUR (.sf-marker--*)",
      "description": "Colours list ::markers with the primary brand colour.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-marker--secondary",
      "selector": ".sf-marker--secondary",
      "kind": "utility",
      "category": "Utilities",
      "group": "LIST MARKER COLOUR (.sf-marker--*)",
      "description": "Colours list ::markers with the secondary brand colour.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-marker--tertiary",
      "selector": ".sf-marker--tertiary",
      "kind": "utility",
      "category": "Utilities",
      "group": "LIST MARKER COLOUR (.sf-marker--*)",
      "description": "Colours list ::markers with the tertiary brand colour.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-no-tap-highlight",
      "selector": ".sf-no-tap-highlight",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Removes the mobile tap highlight color (-webkit-tap-highlight-color: transparent). Use on interactive elements with a custom active state.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-not-prose",
      "selector": ".sf-not-prose",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Opt-out of sf-prose typography styles within a prose block. Apply to an element that should keep default browser or component styles.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-overflow-fade",
      "selector": ".sf-overflow-fade",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Adds a gradient fade at the inline-end of an overflowing element to hint at hidden content. Use inside sf-reel or any scroll container.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-overflow-fade--block",
      "selector": ".sf-overflow-fade--block",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Overflow fade variant: fades both the top and bottom edges simultaneously (block axis).",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-overflow-fade--bottom",
      "selector": ".sf-overflow-fade--bottom",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Overflow fade variant: fades the bottom (block-end) edge.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-overflow-fade--inline",
      "selector": ".sf-overflow-fade--inline",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Overflow fade variant: fades both the left and right edges simultaneously (inline axis).",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-overflow-fade--left",
      "selector": ".sf-overflow-fade--left",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Overflow fade variant: fades the left (inline-start) edge.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-overflow-fade--right",
      "selector": ".sf-overflow-fade--right",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Overflow fade variant: fades the right (inline-end) edge. Explicit alias for the default sf-overflow-fade behaviour.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-overflow-fade--top",
      "selector": ".sf-overflow-fade--top",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Overflow fade variant: fades the top (block-start) edge.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-overlap",
      "selector": ".sf-overlap",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Overlap recipe — pulls the element upward (negative block-start margin) so it overlaps the previous sibling by --sf-overlap-pull.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-overlap--down",
      "selector": ".sf-overlap--down",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Overlap recipe — pulls following content up (negative block-end margin) so this element overlaps the sibling below it.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-overlap-host",
      "selector": ".sf-overlap-host",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Card-container recipe — the receiving side of an overlap: an isolated stacking context with block-start padding compensation so in-flow content clears an element intruding from above. The padding knob defaults to the pull knob so one override tunes both.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-overlay",
      "selector": ".sf-overlay",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Overlay layout helper — absolutely fills its positioned parent (`position: absolute; inset: 0`) for overlays, backdrops, and media scrims.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-pancake",
      "selector": ".sf-pancake",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Three-row layout (header, main, footer) where main takes all remaining vertical space via flex-grow. The footer always sticks to the bottom on tall viewports.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-place-center",
      "selector": ".sf-place-center",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Box-neutral centring primitive: display:grid + place-items:center centres an element's content on both axes without adopting cluster/stack/imposter semantics. Unlike sf-center (which centres itself), this centres the content; give the box a height for block-axis centring. The named form of the display:grid; place-items:center idiom.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-prose",
      "selector": ".sf-prose",
      "kind": "macro",
      "category": "Macro classes",
      "group": "LIST MARKER COLOUR (.sf-marker--*)",
      "description": "Opinionated typographic defaults for long-form content: heading hierarchy, paragraph spacing, blockquote, code, and list styling. Override with sf-not-prose.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-reel",
      "selector": ".sf-reel",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Horizontally scrollable row of fixed-height items with snap scrolling. Children don't shrink below their intrinsic width, creating a card carousel effect.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-scale-down",
      "selector": ".sf-scale-down",
      "kind": "motion",
      "category": "Motion / animation",
      "group": "",
      "description": "One-shot scale-down animation (element shrinks from full size). Scoped to no-preference.",
      "optional": false,
      "layer": "slashed.motion"
    },
    {
      "name": "sf-scale-up",
      "selector": ".sf-scale-up",
      "kind": "motion",
      "category": "Motion / animation",
      "group": "",
      "description": "One-shot scale-up animation (element grows from smaller size). Scoped to no-preference.",
      "optional": false,
      "layer": "slashed.motion"
    },
    {
      "name": "sf-scrim",
      "selector": ".sf-scrim",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Overlay container with a gradient darkening scrim behind text placed on an image or colored background.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-scrim__content",
      "selector": ".sf-scrim__content",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Content area inside an sf-scrim. Positioned above the gradient overlay layer.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-scrim--bottom",
      "selector": ".sf-scrim--bottom",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Scrim variant with the gradient emanating from the bottom edge (bottom-to-top fade).",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-scrim--full",
      "selector": ".sf-scrim--full",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Scrim variant that covers the entire surface with a uniform translucent overlay.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-scrim--top",
      "selector": ".sf-scrim--top",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Scrim variant with the gradient emanating from the top edge (top-to-bottom fade).",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-scroll-shadow",
      "selector": ".sf-scroll-shadow",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Adds inset box-shadows at the top and bottom of a scrollable container to indicate hidden overflow above or below.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-scroll-snap",
      "selector": ".sf-scroll-snap",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Enables CSS scroll-snap-type: x mandatory on a horizontal scroll container. Children should have scroll-snap-align.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-section",
      "selector": ".sf-section",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Full-width page section with vertical padding (--sf-section-pad-default). Use to create visually distinct content bands.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-section--2xl",
      "selector": ".sf-section--2xl",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Section variant with 2xl vertical padding.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-section--collapse",
      "selector": ".sf-section--collapse",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Section variant that removes vertical padding (zero-padding section for adjacent same-color blocks).",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-section--guttered",
      "selector": ".sf-section--guttered",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Adds horizontal page gutters directly to a section — use when you want to skip a separate .sf-container wrapper (gutterless layout inside section). Neutralises container gutter to prevent double padding.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-section--l",
      "selector": ".sf-section--l",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Section variant with large (l) vertical padding.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-section--m",
      "selector": ".sf-section--m",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Section variant with medium (m) vertical padding.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-section--s",
      "selector": ".sf-section--s",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Section variant with small (s) vertical padding.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-section--xl",
      "selector": ".sf-section--xl",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Section variant with xl vertical padding.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-section--xs",
      "selector": ".sf-section--xs",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Section variant with xs vertical padding.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-section-group",
      "selector": ".sf-section-group",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Groups adjacent sf-section elements so their combined padding collapses correctly at the top and bottom edges.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-selection--alt",
      "selector": ".sf-selection--alt",
      "kind": "utility",
      "category": "Utilities",
      "group": "ALTERNATE SELECTION COLOUR (.sf-selection--alt)",
      "description": "Overrides the ::selection custom properties (core/base.css) on the element and its descendants, for surfaces where the default selection colours land with poor contrast (e.g. a dark card on a light page). Backed by --sf-color-selection-*--alt (core/tokens.css).",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-sidebar",
      "selector": ".sf-sidebar",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Two-column sidebar layout: first child is the sidebar, second child is main content. The sidebar collapses below the breakpoint (--sf-sidebar-min-width). Default sidebar on the left.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-sidebar--narrow",
      "selector": ".sf-sidebar--narrow",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Sidebar variant with a narrower sidebar column.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-sidebar--right",
      "selector": ".sf-sidebar--right",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Sidebar variant with the sidebar on the right (second child becomes the sidebar).",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-sidebar--wide",
      "selector": ".sf-sidebar--wide",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Sidebar variant with a wider sidebar column.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-slide-in-down",
      "selector": ".sf-slide-in-down",
      "kind": "motion",
      "category": "Motion / animation",
      "group": "",
      "description": "One-shot slide-in-from-above animation. Scoped to no-preference.",
      "optional": false,
      "layer": "slashed.motion"
    },
    {
      "name": "sf-slide-in-left",
      "selector": ".sf-slide-in-left",
      "kind": "motion",
      "category": "Motion / animation",
      "group": "",
      "description": "One-shot slide-in-from-right animation (slides to the left). Scoped to no-preference.",
      "optional": false,
      "layer": "slashed.motion"
    },
    {
      "name": "sf-slide-in-right",
      "selector": ".sf-slide-in-right",
      "kind": "motion",
      "category": "Motion / animation",
      "group": "",
      "description": "One-shot slide-in-from-left animation (slides to the right). Scoped to no-preference.",
      "optional": false,
      "layer": "slashed.motion"
    },
    {
      "name": "sf-slide-in-up",
      "selector": ".sf-slide-in-up",
      "kind": "motion",
      "category": "Motion / animation",
      "group": "",
      "description": "One-shot slide-in-from-below animation. Scoped to no-preference.",
      "optional": false,
      "layer": "slashed.motion"
    },
    {
      "name": "sf-stack",
      "selector": ".sf-stack",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Flex column with even vertical spacing between children (--sf-stack-gap). Stacking context for vertical rhythm.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-stack--2xl",
      "selector": ".sf-stack--2xl",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Stack variant with 2xl gap between children.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-stack--center",
      "selector": ".sf-stack--center",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Stack variant that centers children on the cross axis.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-stack--end",
      "selector": ".sf-stack--end",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Stack variant that aligns children to the cross-axis end (right in LTR).",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-stack--l",
      "selector": ".sf-stack--l",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Stack variant with large (l) gap between children.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-stack--m",
      "selector": ".sf-stack--m",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Stack variant with medium (m) gap between children.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-stack--s",
      "selector": ".sf-stack--s",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Stack variant with small (s) gap between children.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-stack--stretch",
      "selector": ".sf-stack--stretch",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Stack variant that stretches children to fill the full available width.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-stack--xl",
      "selector": ".sf-stack--xl",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Stack variant with xl gap between children.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-stack--xs",
      "selector": ".sf-stack--xs",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Stack variant with xs gap between children.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-stagger",
      "selector": ".sf-stagger",
      "kind": "motion",
      "category": "Motion / animation",
      "group": "",
      "description": "Stagger — choreography, not the animation itself. Put .sf-stagger on a PARENT; every direct child gets an incrementing animation-delay so a time-based entrance (.sf-fade-in / .sf-slide-in-*) plays in sequence. Children WITHOUT an animation just carry an inert delay (no-op), so…",
      "optional": false,
      "layer": "slashed.motion"
    },
    {
      "name": "sf-sticky",
      "selector": ".sf-sticky",
      "kind": "utility",
      "category": "Utilities",
      "group": "STICKY POSITIONING (.sf-sticky)",
      "description": "position: sticky pinned at the header-aware --sf-sticky-offset.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-sticky--l",
      "selector": ".sf-sticky--l",
      "kind": "utility",
      "category": "Utilities",
      "group": "STICKY POSITIONING (.sf-sticky)",
      "description": "Sticky positioning with an extra large gap (--sf-space-l) above the header-aware offset.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-sticky--m",
      "selector": ".sf-sticky--m",
      "kind": "utility",
      "category": "Utilities",
      "group": "STICKY POSITIONING (.sf-sticky)",
      "description": "Sticky positioning with an extra medium gap (--sf-space-m) above the header-aware offset.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-sticky--s",
      "selector": ".sf-sticky--s",
      "kind": "utility",
      "category": "Utilities",
      "group": "STICKY POSITIONING (.sf-sticky)",
      "description": "Sticky positioning with an extra small gap (--sf-space-s) above the header-aware offset.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-subgrid",
      "selector": ".sf-subgrid",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Passes the parent grid columns through to children via subgrid. Place on a grid item that should align its own children to the outer grid columns.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-subgrid-rows",
      "selector": ".sf-subgrid-rows",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Passes the parent grid rows through to children via subgrid. Place on a grid item that should align its own children to the outer grid rows.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-surface",
      "selector": ".sf-surface",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Generic semantic surface: applies --sf-surface-color as the background and automatically sets a contrasting text color. Tone variants (--primary, --action, etc.) activate preset palettes.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-surface--action",
      "selector": ".sf-surface--action",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Surface variant using the action color palette (button/CTA primary color).",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-surface--danger",
      "selector": ".sf-surface--danger",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Surface variant using the danger status palette.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-surface--info",
      "selector": ".sf-surface--info",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Surface variant using the info status palette.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-surface--inverse",
      "selector": ".sf-surface--inverse",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Surface variant that inverts light/dark, creating an always-dark surface in light mode and always-light in dark mode.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-surface--neutral",
      "selector": ".sf-surface--neutral",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Surface variant using the neutral palette (muted/gray).",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-surface--primary",
      "selector": ".sf-surface--primary",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Surface variant using the primary brand color palette.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-surface--secondary",
      "selector": ".sf-surface--secondary",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Surface variant using the secondary brand color palette.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-surface--success",
      "selector": ".sf-surface--success",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Surface variant using the success status palette.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-surface--tertiary",
      "selector": ".sf-surface--tertiary",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Surface variant using the tertiary brand color palette.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-surface--warning",
      "selector": ".sf-surface--warning",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Surface variant using the warning status palette.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-surface-bg",
      "selector": ".sf-surface-bg",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Named background surface preset (issue #523). Composes the --sf-surface-bg-* token set (see tokens.macros.css) into one reusable, named background: base colour + image/gradient/pattern, sizing, an optional overlay layered above the image, and an optional animation. Inert until…",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-switcher",
      "selector": ".sf-switcher",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Flex layout that switches from a horizontal row to a vertical column when the container is narrower than --sf-switcher-threshold.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-switcher--no-wrap",
      "selector": ".sf-switcher--no-wrap",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Switcher variant that stays horizontal and never wraps (single-line regardless of container width).",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-switcher--vertical",
      "selector": ".sf-switcher--vertical",
      "kind": "layout",
      "category": "Layout primitives",
      "group": "",
      "description": "Switcher variant that starts in the vertical (stacked) direction on all sizes.",
      "optional": false,
      "layer": "slashed.layout"
    },
    {
      "name": "sf-tabular-nums",
      "selector": ".sf-tabular-nums",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Forces tabular (monospaced) number rendering. Use on price tables, counters, and anywhere numbers need to align vertically across rows.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-text-2xl",
      "selector": ".sf-text-2xl",
      "kind": "utility",
      "category": "Utilities",
      "group": "TEXT-SIZE UTILITIES (.sf-text-2xs",
      "description": "Applies the 2xl text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-text-2xs",
      "selector": ".sf-text-2xs",
      "kind": "utility",
      "category": "Utilities",
      "group": "TEXT-SIZE UTILITIES (.sf-text-2xs",
      "description": "Applies the 2xs text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-text-3xl",
      "selector": ".sf-text-3xl",
      "kind": "utility",
      "category": "Utilities",
      "group": "TEXT-SIZE UTILITIES (.sf-text-2xs",
      "description": "Applies the 3xl text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-text-4xl",
      "selector": ".sf-text-4xl",
      "kind": "utility",
      "category": "Utilities",
      "group": "TEXT-SIZE UTILITIES (.sf-text-2xs",
      "description": "Applies the 4xl text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-text-gradient",
      "selector": ".sf-text-gradient",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Applies a brand gradient to inline text. Sets the background to the gradient, clips it to the text, and makes the text color transparent.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-text-l",
      "selector": ".sf-text-l",
      "kind": "utility",
      "category": "Utilities",
      "group": "TEXT-SIZE UTILITIES (.sf-text-2xs",
      "description": "Applies the l text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-text-m",
      "selector": ".sf-text-m",
      "kind": "utility",
      "category": "Utilities",
      "group": "TEXT-SIZE UTILITIES (.sf-text-2xs",
      "description": "Applies the m (body) text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-text-protect",
      "selector": ".sf-text-protect",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Wraps text in a translucent dark gradient overlay to ensure legibility when placed over a light or variable background image.",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-text-s",
      "selector": ".sf-text-s",
      "kind": "utility",
      "category": "Utilities",
      "group": "TEXT-SIZE UTILITIES (.sf-text-2xs",
      "description": "Applies the s text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-text-xl",
      "selector": ".sf-text-xl",
      "kind": "utility",
      "category": "Utilities",
      "group": "TEXT-SIZE UTILITIES (.sf-text-2xs",
      "description": "Applies the xl text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-text-xs",
      "selector": ".sf-text-xs",
      "kind": "utility",
      "category": "Utilities",
      "group": "TEXT-SIZE UTILITIES (.sf-text-2xs",
      "description": "Applies the xs text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-theme-dark",
      "selector": ".sf-theme-dark",
      "kind": "theme",
      "category": "Theme utilities",
      "group": "",
      "description": "Forces dark colour scheme on the element and its subtree (class alias of [data-theme=\"dark\"]).",
      "optional": false,
      "layer": "slashed.themes"
    },
    {
      "name": "sf-theme-light",
      "selector": ".sf-theme-light",
      "kind": "theme",
      "category": "Theme utilities",
      "group": "",
      "description": "Forces light colour scheme on the element and its subtree (class alias of [data-theme=\"light\"]).",
      "optional": false,
      "layer": "slashed.themes"
    },
    {
      "name": "sf-theme-transition",
      "selector": ".sf-theme-transition",
      "kind": "theme",
      "category": "Theme utilities",
      "group": "",
      "description": "Opt-in animated light/dark theme crossfade. Apply to <html> (or a subtree) so color tokens transition smoothly when [data-theme] changes. Duration controlled by --sf-theme-transition-duration.",
      "optional": false,
      "layer": "slashed.themes"
    },
    {
      "name": "sf-touch-target",
      "selector": ".sf-touch-target",
      "kind": "accessibility",
      "category": "Accessibility",
      "group": "",
      "description": ".sf-touch-target — the explicit opt-IN counterpart to the class-less floor above. Because the automatic floor deliberately never touches a control that carries a class, put this class on any control you own (a button with your own class, a third-party widget you can add a class…",
      "optional": false,
      "layer": "slashed.accessibility"
    },
    {
      "name": "sf-truncate",
      "selector": ".sf-truncate",
      "kind": "macro",
      "category": "Macro classes",
      "group": "",
      "description": "Single-line text overflow with ellipsis. Equivalent to the classic text-overflow: ellipsis trio (white-space nowrap, overflow hidden, text-overflow ellipsis).",
      "optional": false,
      "layer": "slashed.macros"
    },
    {
      "name": "sf-visible",
      "selector": ".sf-visible",
      "kind": "utility",
      "category": "Utilities",
      "group": "VISIBILITY HELPERS (.sf-invisible / .sf-visible)",
      "description": "Visibility helper (optional/utilities.css) — forces the element to be visible (visibility: visible). Use to un-hide an element that inherited visibility: hidden from a parent.",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-width-10",
      "selector": ".sf-width-10",
      "kind": "utility",
      "category": "Utilities",
      "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-width-20",
      "selector": ".sf-width-20",
      "kind": "utility",
      "category": "Utilities",
      "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-width-30",
      "selector": ".sf-width-30",
      "kind": "utility",
      "category": "Utilities",
      "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-width-40",
      "selector": ".sf-width-40",
      "kind": "utility",
      "category": "Utilities",
      "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-width-50",
      "selector": ".sf-width-50",
      "kind": "utility",
      "category": "Utilities",
      "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-width-60",
      "selector": ".sf-width-60",
      "kind": "utility",
      "category": "Utilities",
      "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-width-70",
      "selector": ".sf-width-70",
      "kind": "utility",
      "category": "Utilities",
      "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-width-80",
      "selector": ".sf-width-80",
      "kind": "utility",
      "category": "Utilities",
      "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-width-90",
      "selector": ".sf-width-90",
      "kind": "utility",
      "category": "Utilities",
      "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-width-auto",
      "selector": ".sf-width-auto",
      "kind": "utility",
      "category": "Utilities",
      "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-width-fit",
      "selector": ".sf-width-fit",
      "kind": "utility",
      "category": "Utilities",
      "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-width-full",
      "selector": ".sf-width-full",
      "kind": "utility",
      "category": "Utilities",
      "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-width-max",
      "selector": ".sf-width-max",
      "kind": "utility",
      "category": "Utilities",
      "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "sf-width-min",
      "selector": ".sf-width-min",
      "kind": "utility",
      "category": "Utilities",
      "group": "CONTENT-WIDTH UTILITIES (.sf-width-*)",
      "description": "Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width…",
      "optional": true,
      "layer": "slashed.utilities"
    },
    {
      "name": "skip-link",
      "selector": ".skip-link",
      "kind": "accessibility",
      "category": "Accessibility",
      "group": "",
      "description": "Accessible skip-navigation link. Hidden until focused; jumps keyboard users past repeated navigation blocks. Place as the very first element in <body>.",
      "optional": false,
      "layer": "slashed.accessibility"
    },
    {
      "name": "sr-only",
      "selector": ".sr-only",
      "kind": "accessibility",
      "category": "Accessibility",
      "group": "",
      "description": "Visually hides content while keeping it accessible to screen readers. Use for labels, descriptions, and off-screen text that assistive technology needs.",
      "optional": false,
      "layer": "slashed.accessibility"
    },
    {
      "name": "sr-only-focusable",
      "selector": ".sr-only-focusable",
      "kind": "accessibility",
      "category": "Accessibility",
      "group": "",
      "description": "Extends sr-only — also reveals the element when it receives keyboard focus. Typical use: skip links and visually-hidden focus targets.",
      "optional": false,
      "layer": "slashed.accessibility"
    }
  ]
}