From 9c45fac3ed39e946f5221c45650e08d3410bad36 Mon Sep 17 00:00:00 2001 From: Kiro Agent <244629292+kiro-agent@users.noreply.github.com> Date: Fri, 5 Jun 2026 15:20:31 +0000 Subject: [PATCH] feat(macros): add .sf-content-auto and .sf-tabular-nums macros Reclassify #222 and the class half of #214 as MACROS (token-driven recipes, public API, essential bundle) rather than utilities. The utilities layer stays empty per roadmap; these answer "what does this element do/look like?", matching the macros-layer definition (cf. the existing single-property .sf-no-tap-highlight macro). - #222 .sf-content-auto + --sf-content-intrinsic-size token: sets content-visibility:auto with a contain-intrinsic-size placeholder to skip offscreen rendering on long pages. Progressive enhancement. - #214 .sf-tabular-nums: font-variant-numeric via --sf-font-numeric. Adds demo.html coverage, macros.md docs, admin-app cheatsheet entries, and regenerates token/class registries, Bricks inventory, and the admin-app bundle. Token API snapshot updated (+--sf-content-intrinsic-size) and verified against the canonical registry (806 tokens). --- CHANGELOG.md | 11 ++++ core/macros.css | 32 +++++++++++ core/tokens.macros.css | 9 ++++ docs/classes.md | 6 ++- docs/demo.html | 23 ++++++++ docs/macros.md | 53 +++++++++++++++++++ docs/registry.json | 7 ++- docs/tokens.md | 5 +- .../SLASHED-for-WP/data/classes-hints.json | 8 +++ .../admin-app/src/lib/cheatsheet-data.js | 3 ++ .../bricks/assets/admin-app/app.js | 2 +- .../integrations/bricks/data/inventory.json | 7 ++- tests/token-api.snapshot.json | 1 + 13 files changed, 158 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f41d1610..01af21a0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,17 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), ### Added +- **Macro `.sf-content-auto`** (`core/macros.css`) + **`--sf-content-intrinsic-size`** + token (`core/tokens.macros.css`, default `500px`) — sets + `content-visibility: auto` with a `contain-intrinsic-size` placeholder to + skip rendering offscreen content on long pages. Progressive enhancement; + unsupported engines render normally. Lands in the macros layer (a token-driven + recipe), not utilities. (#222) + +- **Macro `.sf-tabular-nums`** (`core/macros.css`) — fixed-width digits + (`font-variant-numeric: var(--sf-font-numeric)`) for column-aligned numbers. + Complements the `--sf-font-numeric` token / number-input styling. (#214) + - **`--sf-transition-overlay`** (`core/tokens.css`) — reusable transition building block for top-layer elements (``, `[popover]`). Uses `transition-behavior: allow-discrete` on `overlay` and `display` so entry diff --git a/core/macros.css b/core/macros.css index c6e4e94a..2eb706b3 100644 --- a/core/macros.css +++ b/core/macros.css @@ -402,4 +402,36 @@ text-decoration: none; } + /* -- Content visibility -------------------------------------- + Skip rendering (layout + paint) for offscreen content until it + scrolls near the viewport — a large initial-render win on long + pages (product grids, long articles). contain-intrinsic-size + reserves a placeholder box so the scrollbar and scroll position + stay stable before a section is first rendered; the `auto` + keyword then caches each section's last-rendered size. Override + the placeholder per element: + style="--sf-content-intrinsic-size: 800px" + + Unsupported engines (e.g. Safari < 18) simply ignore both + declarations and render normally — pure progressive enhancement. + + Deliberately NOT paired with `will-change`: that pre-creates + compositing layers and usually HURTS performance when applied + broadly. `will-change` belongs on JS, set only while an element + is actively about to animate. + ---------------------------------------------------------- */ + .sf-content-auto { + content-visibility: auto; + contain-intrinsic-size: auto var(--sf-content-intrinsic-size, 500px); + } + + /* -- Tabular figures ----------------------------------------- + Fixed-width digits so numbers align in vertical columns + (price lists, totals, invoices, dashboards). Reads the public + --sf-font-numeric token. Universal browser support. + ---------------------------------------------------------- */ + .sf-tabular-nums { + font-variant-numeric: var(--sf-font-numeric, tabular-nums); + } + } diff --git a/core/tokens.macros.css b/core/tokens.macros.css index d710c0ec..17b19d0d 100644 --- a/core/tokens.macros.css +++ b/core/tokens.macros.css @@ -74,5 +74,14 @@ ---------------------------------------------------------- */ --sf-scroll-shadow-size: 2rem; + /* ---------------------------------------------------------- + Content visibility — placeholder size for .sf-content-auto. + Feeds contain-intrinsic-size so offscreen sections reserve + space before their first render, keeping the scrollbar and + scroll position stable. Override per element: + style="--sf-content-intrinsic-size: 800px". + ---------------------------------------------------------- */ + --sf-content-intrinsic-size: 500px; + } } diff --git a/docs/classes.md b/docs/classes.md index 95bba18a..5b57e7eb 100644 --- a/docs/classes.md +++ b/docs/classes.md @@ -3,7 +3,7 @@ > **Generated** from source by `scripts/gen-class-reference.js` — > run `npm run docs:classes` to refresh. Do not edit by hand. -**158 .sf-classes, 40 .is-classes.** Every `.sf-*` layout/macro class and `.is-*` state class. +**160 .sf-classes, 40 .is-classes.** Every `.sf-*` layout/macro class and `.is-*` state class. See [architecture.md](architecture.md) for layer order and naming conventions. ## Layout primitives (`core/layout.css`) @@ -130,11 +130,12 @@ See [architecture.md](architecture.md) for layer order and naming conventions. ## Macro classes (`core/macros.css`) -26 classes. +28 classes. | Class | |---| | `.sf-aspect` | +| `.sf-content-auto` | | `.sf-equal-height` | | `.sf-flow` | | `.sf-line-clamp-2` | @@ -158,6 +159,7 @@ See [architecture.md](architecture.md) for layer order and naming conventions. | `.sf-surface--success` | | `.sf-surface--tertiary` | | `.sf-surface--warning` | +| `.sf-tabular-nums` | | `.sf-text-gradient` | | `.sf-truncate` | diff --git a/docs/demo.html b/docs/demo.html index 1cd93398..c4389243 100644 --- a/docs/demo.html +++ b/docs/demo.html @@ -2459,6 +2459,29 @@

Macros

from layout primitives, which answer "where do my children go?".

+

.sf-content-auto — skip offscreen rendering

+

+ Sets content-visibility: auto so the browser skips layout and paint for this + section while it is offscreen on a long page. contain-intrinsic-size (token + --sf-content-intrinsic-size) reserves a placeholder box so the scrollbar + doesn't jump. Unsupported engines render it normally. +

+
+

This block is render-deferred until it nears the viewport. On long product or article + pages, applying it to repeated sections measurably cuts initial render cost.

+
+ +

.sf-tabular-nums — column-aligned figures

+

+ Fixed-width digits (font-variant-numeric: var(--sf-font-numeric)) so numbers + line up in columns — prices, totals, invoices. +

+
+
1,110.00
+
98.40
+
7,001.99
+
+

.sf-flow — equal vertical rhythm

First child has no top margin (only siblings get the rhythm).

diff --git a/docs/macros.md b/docs/macros.md index 13630e06..b4de87ae 100644 --- a/docs/macros.md +++ b/docs/macros.md @@ -224,6 +224,59 @@ Just sets `-webkit-tap-highlight-color: transparent`. No tokens. --- +## `.sf-content-auto` + +Skips rendering (layout + paint) for offscreen content until it scrolls +near the viewport — a large initial-render win on long pages (product +grids, long articles). + +```html +
…repeated long-page section…
+ + +
…
+``` + +Tokens: + +| Token | Default | What it controls | +|---|---|---| +| `--sf-content-intrinsic-size` | `500px` | placeholder block size fed to `contain-intrinsic-size` | + +Sets `content-visibility: auto` plus `contain-intrinsic-size: auto +var(--sf-content-intrinsic-size)`. The `auto` keyword caches each +section's last-rendered size; the token reserves space before first +render so the scrollbar and scroll position stay stable. Unsupported +engines (e.g. Safari < 18) ignore both declarations and render normally +— pure progressive enhancement. + +> Deliberately not paired with `will-change`. `will-change` pre-creates +> compositing layers and usually *hurts* performance when applied +> broadly; set it from JS only while an element is actively animating. + +--- + +## `.sf-tabular-nums` + +Fixed-width digits so numbers align in vertical columns (price lists, +totals, invoices, dashboards). + +```html +…numeric columns…
+``` + +Tokens: + +| Token | Default | What it controls | +|---|---|---| +| `--sf-font-numeric` | `tabular-nums` | figure style (`core/tokens.css`) | + +Sets `font-variant-numeric: var(--sf-font-numeric, tabular-nums)`. The +same token is applied to `` in `optional/forms.css`. +Universal browser support. + +--- + ## `.sf-surface--*` Contextual background + auto-contrast text color. Apply to any element diff --git a/docs/registry.json b/docs/registry.json index 0cced3c5..e8cc0b15 100644 --- a/docs/registry.json +++ b/docs/registry.json @@ -20,8 +20,8 @@ "optional/theme-example.css" ], "counts": { - "tokens": 805, - "sf_classes": 158, + "tokens": 806, + "sf_classes": 160, "is_classes": 40 } }, @@ -435,6 +435,7 @@ "--sf-container-prose", "--sf-container-wide", "--sf-content-gap", + "--sf-content-intrinsic-size", "--sf-content-width", "--sf-contrast-bias", "--sf-contrast-threshold", @@ -862,6 +863,7 @@ "sf-container--narrow", "sf-container--prose", "sf-container--wide", + "sf-content-auto", "sf-content-grid", "sf-cover", "sf-cover--max", @@ -989,6 +991,7 @@ "sf-switcher", "sf-switcher--no-wrap", "sf-switcher--vertical", + "sf-tabular-nums", "sf-text-gradient", "sf-truncate" ], diff --git a/docs/tokens.md b/docs/tokens.md index fe38cd3b..2b8df338 100644 --- a/docs/tokens.md +++ b/docs/tokens.md @@ -3,7 +3,7 @@ > **Generated** from source by `scripts/gen-token-reference.js` — > run `npm run docs:tokens` to refresh. Do not edit by hand. -**871 tokens.** Every `--sf-*` custom property and its default value, grouped by source file. +**872 tokens.** Every `--sf-*` custom property and its default value, grouped by source file. Tokens defined in multiple files (e.g. shade aliases overridden in `optional/tokens.palette.css`) are listed once per section — so this count is higher than `docs/registry.json` (which deduplicates by name). See @@ -580,11 +580,12 @@ rebrand workflow. ## Macro tokens (`core/tokens.macros.css`) -13 tokens. +14 tokens. | Token | Default | |---|---| | `--sf-aspect` | `16 / 9` | +| `--sf-content-intrinsic-size` | `500px` | | `--sf-flow-space` | `var(--sf-space-content)` | | `--sf-line-clamp` | `3` | | `--sf-prose-block-margin` | `var(--sf-space-m)` | diff --git a/plugins/SLASHED-for-WP/data/classes-hints.json b/plugins/SLASHED-for-WP/data/classes-hints.json index be527bfd..55245212 100644 --- a/plugins/SLASHED-for-WP/data/classes-hints.json +++ b/plugins/SLASHED-for-WP/data/classes-hints.json @@ -563,6 +563,14 @@ "description": "Adds an external-link glyph after the link text. Opt-in per", "category": "Macros" }, + "sf-content-auto": { + "description": "Skip rendering (layout + paint) for offscreen content until it", + "category": "Macros" + }, + "sf-tabular-nums": { + "description": "Fixed-width digits so numbers align in vertical columns", + "category": "Macros" + }, "is-hidden": { "description": "Hides the element (display: none). Toggled by JS or ARIA.", "category": "States" diff --git a/plugins/SLASHED-for-WP/integrations/bricks/admin-app/src/lib/cheatsheet-data.js b/plugins/SLASHED-for-WP/integrations/bricks/admin-app/src/lib/cheatsheet-data.js index da7215af..83695240 100644 --- a/plugins/SLASHED-for-WP/integrations/bricks/admin-app/src/lib/cheatsheet-data.js +++ b/plugins/SLASHED-for-WP/integrations/bricks/admin-app/src/lib/cheatsheet-data.js @@ -111,6 +111,7 @@ export const variableGroups = [ { name: "--sf-ratio-{square,portrait,video,cinema,golden,3-2,4-3}", description: "Predefined aspect ratios for frames and containers." }, { name: "--sf-aspect", description: "Generic aspect-ratio token read by the .sf-aspect macro (16/9)." }, { name: "--sf-object-{fit,position}", description: "Default object-fit (cover) and object-position (50% 50%) for media elements." }, + { name: "--sf-content-intrinsic-size", description: "Placeholder size for the .sf-content-auto macro's contain-intrinsic-size (500px)." }, ] }, { @@ -317,6 +318,8 @@ export const classGroups = [ { name: ".sf-scroll-snap", description: "Vertical scroll-snap container." }, { name: ".sf-overflow-fade", description: "End-edge horizontal fade for overflowing inline content." }, { name: ".sf-no-tap-highlight", description: "Suppresses WebKit/Android tap highlight." }, + { name: ".sf-content-auto", description: "content-visibility:auto — skips rendering offscreen content (reads --sf-content-intrinsic-size)." }, + { name: ".sf-tabular-nums", description: "Fixed-width digits for column-aligned numbers (reads --sf-font-numeric)." }, { name: ".sf-text-gradient", description: "Gradient text effect using background-clip." }, { name: ".sf-clickable-parent / .sf-focus-parent", description: "Makes a whole card clickable via the first link inside; -focus mirrors focus ring to the parent." }, { name: ".sf-link-external", description: "Adds external link indicator marker." }, diff --git a/plugins/SLASHED-for-WP/integrations/bricks/assets/admin-app/app.js b/plugins/SLASHED-for-WP/integrations/bricks/assets/admin-app/app.js index 2f0e636b..d0573104 100644 --- a/plugins/SLASHED-for-WP/integrations/bricks/assets/admin-app/app.js +++ b/plugins/SLASHED-for-WP/integrations/bricks/assets/admin-app/app.js @@ -68,7 +68,7 @@ add_filter( 'slashed_bricks/inventory_local_path', function() { 'SLASHED Primary', 'SLASHED Secondary', ] ) ); -} );`}],a=y(()=>ne.activeIntegrations?.bricks??!0);var n=wc(),i=d(l(n),4);let o;var u=l(i),c=d(l(u),4);{var v=f=>{var p=bc();A(f,p)};me(c,f=>{r(a)||f(v)})}var h=d(u,2);de(h,17,()=>s,f=>f.name,(f,p)=>{var m=yc(),b=l(m),x=l(b),_=l(x),w=d(b,2),S=l(w),E=d(w,2),F=d(l(E),2),Y=l(F),T=d(E,2),z=l(T),D=l(z);V(()=>{R(_,r(p).name),R(S,r(p).description),R(Y,r(p).params),R(D,r(p).example)}),A(f,m)}),V(()=>o=Ie(i,1,"group svelte-a36hjt",null,o,{"group--inactive":!r(a)})),A(e,n),Fe()}const kc=[{category:"Colors",description:"Brand, status, and semantic color tokens. Source colors use oklch(); the framework derives light-dark pairs, 50–950 palettes, alpha scales, and state variants automatically. Palette and alpha scales require optional/tokens.palette.css (optimal bundle and above).",tokens:[{name:"--sf-color-{primary,secondary,tertiary,action,neutral,base}",description:"Resolved light-dark adaptive brand color for use in rules."},{name:"--sf-color-{primary,secondary,tertiary,action,neutral,base}-light",description:"Source color (oklch registered value). Set this to rebrand."},{name:"--sf-color-{primary,secondary,tertiary,action,neutral,base}-dark",description:"Optional dark-mode override. If set, replaces the auto-derived dark variant for full per-mode control."},{name:"--sf-color-{primary,secondary,tertiary,action,neutral,base}-{50,100,200,300,400,500,600,700,800,900,950}",description:"Palette scale: 50 (lightest) → 950 (darkest), mixed with base/text. Requires tokens.palette.css."},{name:"--sf-color-{primary,secondary,tertiary,action,neutral,base}-{a5,a10,a20,a30,a40,a50,a60,a70,a80,a90,a95}",description:"Alpha scale: 5%–95% opacity of the brand color. Requires tokens.palette.css."},{name:"--sf-color-{primary,secondary,tertiary,action,neutral,base}-{hover,active,muted,subtle,ghost,lighter,darker,xlight,xdark,superlight,superdark}",description:"Semantic aliases for common UI states, mapped to palette steps."},{name:"--sf-color-{surface,inverse}",description:"Surface (card/panel) and inverse (high-contrast) context colors."},{name:"--sf-color-{success,warning,error,info,danger}",description:"Status feedback colors (resolved adaptive value)."},{name:"--sf-color-{success,warning,error,info,danger}-{light,strong,hover,active,muted,subtle,ghost,lighter,darker,xlight,xdark,superlight,superdark}",description:"Status color source (-light), emphasis (-strong), and state variants."},{name:"--sf-color-bg",description:"Page background color, derived from base."},{name:"--sf-color-bg--{hover,active,selected,focus,disabled}",description:"Interactive background overlays for hover/active/selected/focus/disabled states."},{name:"--sf-color-text",description:"Main body text color, contrast-aware."},{name:"--sf-color-text--{secondary,muted,disabled,placeholder,inverse}",description:"Secondary, muted, disabled, placeholder, and inverted text colors."},{name:"--sf-color-text--on-{primary,secondary,tertiary,action,neutral,base,surface,inverse,success,warning,error,info,danger}",description:"Auto-contrast text color to use on top of each colored surface."},{name:"--sf-color-heading",description:"Heading text color, slightly stronger than body text."},{name:"--sf-color-link",description:"Link color, derived from the action brand."},{name:"--sf-color-link--{hover,active,visited,underline,disabled}",description:"Link state colors and underline accent."},{name:"--sf-color-border",description:"Default border color."},{name:"--sf-color-border--{subtle,strong,focus,disabled,translucent}",description:"De-emphasized, emphasized, focus, disabled, and translucent border colors."},{name:"--sf-color-{code-bg,code-text,mark-bg,mark-text}",description:"Inline and background/foreground colors."},{name:"--sf-color-{white,black}",description:"Absolute white/black anchors in oklch space, for staying inside the token system."},{name:"--sf-color-surface",description:"Card/panel surface color (equals base)."},{name:"--sf-color-{inset,raised}",description:"Recessed (inset) and elevated (raised) surface background contexts."},{name:"--sf-color-selection-{bg,text}",description:"Text selection (::selection) background and foreground colors."},{name:"--sf-color-overlay",description:"Semi-transparent overlay for modals."},{name:"--sf-color-dim",description:"50% black overlay for dimming backgrounds."},{name:"--sf-color-scheme",description:"CSS color-scheme declaration (light dark). Holds a string, not a color."}]},{category:"Typography",description:"Font families, fluid size scale, weights, line-heights, letter-spacing, per-size sub-properties, and heading/body/prose configuration.",tokens:[{name:"--sf-font-{body,heading,mono,display,humanist,geometric,slab}",description:"Font stacks: body, heading, mono, display, plus curated humanist/geometric/slab fallback personalities."},{name:"--sf-font-{features,variation}",description:"font-feature-settings and font-variation-settings hooks."},{name:"--sf-font-weight-{thin,extralight,light,normal,medium,semibold,bold,extrabold,black}",description:"Named weight tokens: 100→900."},{name:"--sf-font-weight-{body,heading,display}",description:"Contextual weight tokens for body, heading, and display text."},{name:"--sf-current-font-weight",description:"Current context font weight (used by strong elements)."},{name:"--sf-leading-{tight,snug,normal,relaxed}",description:"Line-height presets: 1.1, 1.3, 1.5, 1.625."},{name:"--sf-tracking-{tight,normal,wide,wider,widest}",description:"Letter-spacing presets from -0.025em to 0.1em."},{name:"--sf-font-numeric",description:"Numeric figure style (tabular-nums) so digits align in columns; applied to number inputs."},{name:"--sf-text-{2xs,xs,s,m,l,xl,2xl,3xl,4xl}",description:"Fluid type scale using clamp(). Honours --sf-text-scale."},{name:"--sf-text-display-{s,m,l}",description:"Extra-large display/hero sizes. Honour --sf-text-display-scale."},{name:"--sf-text-{scale,display-scale}",description:"Global multipliers for the body and display type scales (default 1)."},{name:"--sf-text-{2xs,xs,s,m,l,xl,2xl,3xl,4xl}-{line-height,font-weight,letter-spacing,max-width}",description:"Per-size sub-property override knobs (relaxed leading for small text, tight leading for display). Requires tokens.sizes-extended.css."},{name:"--sf-text-{xs,s,m,l,xl,2xl,3xl,4xl}-to-{2xs,xs,s,m,l,xl,2xl,3xl}",description:"Text bridge tokens: a clamp() spanning from one step (wide) to another (narrow) for extra range of motion. Requires tokens.sizes-extended.css."},{name:"--sf-h{1,2,3,4,5,6}-{size,font-weight,line-height,letter-spacing}",description:"Per-heading-level configuration tokens."},{name:"--sf-heading-{color,font-family,text-wrap}",description:"Global heading color, font stack, and text-wrap mode (balance)."},{name:"--sf-body-{color,font-family,font-size,font-weight,line-height,text-wrap,em-style,strong-weight}",description:"Body text configuration tokens."},{name:"--sf-prose-{block-margin,heading-gap,list-gap,paragraph,figure-margin,figcaption-size,media-margin,media-radius,marker-color}",description:"Long-form .sf-prose rhythm and element styling tokens."},{name:"--sf-code-font-size",description:"Inline font-size (relative em)."},{name:"--sf-optical-sizing",description:"font-optical-sizing control (auto)."},{name:"--sf-line-clamp",description:"Default line count for .sf-line-clamp-N."}]},{category:"Spacing",description:"Fluid spacing scale (clamp-based), bridge tokens, gutters, section padding, component padding, flow, safe-area insets, and sticky-header offsets.",tokens:[{name:"--sf-space-{none,px,2xs,xs,s,m,l,xl,2xl,3xl,4xl}",description:"Fluid spacing scale. Honours --sf-space-scale (none/px are fixed)."},{name:"--sf-space-scale",description:"Global multiplier for all space tokens (default 1)."},{name:"--sf-space-{2xs,xs,s,m,l,xl,2xl,3xl,4xl}-to-{2xs,xs,s,m,l,xl,2xl,3xl}",description:"Spacing bridge tokens: clamp() spanning a wider range than any single step. Requires tokens.sizes-extended.css."},{name:"--sf-space-{gutter,gap,content}",description:"Internal aliases: page gutter, default gap, content gap (consumed by --sf-gap / --sf-content-gap)."},{name:"--sf-gap / --sf-gap-size",description:"Default layout gap and its raw size component."},{name:"--sf-content-gap",description:"Gap between content elements (defaults to space-s)."},{name:"--sf-component-pad",description:"Internal padding for components (defaults to space-m)."},{name:"--sf-section-pad",description:"Active section padding alias."},{name:"--sf-section-pad--{xs,s,m,l,xl,2xl}",description:"Vertical padding presets for page sections."},{name:"--sf-flow-space",description:"Gap applied between .sf-flow children (lobotomized owl)."},{name:"--sf-safe-{top,right,bottom,left}",description:"Safe-area insets for notched devices."},{name:"--sf-header-height",description:"Resolved fixed-header height for sticky offset calculations."},{name:"--sf-header-height-{mobile,desktop}",description:"Per-breakpoint header height inputs."},{name:"--sf-sticky-offset",description:"Resolved sticky offset (defaults to header height)."},{name:"--sf-sticky-offset-{mobile,desktop}",description:"Per-breakpoint sticky offset inputs."}]},{category:"Sizing",description:"Component sizes, touch targets, aspect ratios, and icon sizing.",tokens:[{name:"--sf-size-{xs,s,m,l,xl}",description:"Named size tokens: xs(1.5rem), s(2rem), m(2.5rem), l(2.75rem), xl(3.5rem)."},{name:"--sf-touch-target",description:"Minimum interactive element size (defaults to size-l, 2.75rem)."},{name:"--sf-ratio-{square,portrait,video,cinema,golden,3-2,4-3}",description:"Predefined aspect ratios for frames and containers."},{name:"--sf-aspect",description:"Generic aspect-ratio token read by the .sf-aspect macro (16/9)."},{name:"--sf-object-{fit,position}",description:"Default object-fit (cover) and object-position (50% 50%) for media elements."}]},{category:"Layout",description:"Container widths and layout-primitive tokens (stack, cluster, grid, sidebar, switcher, bento, cover, frame, reel, imposter, box, center, content-grid, divider, alternate, equal, multi-column).",tokens:[{name:"--sf-container-{narrow,default,prose,wide,full}",description:"Max-width presets for .sf-container."},{name:"--sf-stack-gap",description:"Vertical gap between .sf-stack children."},{name:"--sf-cluster-{gap,align,justify}",description:"Inline cluster layout tokens."},{name:"--sf-sidebar-{width,gap,min-width}",description:"Sidebar layout tokens."},{name:"--sf-switcher-{threshold,gap}",description:"Column-to-stack breakpoint and gap."},{name:"--sf-grid-{min,gap}",description:"Auto-fill grid minimum item width and gap."},{name:"--sf-grid-min-{xs,s,m,l,xl,2xl}",description:"Per-size minimum item widths for .sf-grid--*."},{name:"--sf-bento-{cols-default,gap,row-default,row-compact,row-tall}",description:"Dense bento grid configuration."},{name:"--sf-cover-{min-height,padding}",description:"Full-height cover layout."},{name:"--sf-frame-ratio",description:"Aspect ratio for .sf-frame (defaults to 16/9)."},{name:"--sf-reel-{gap,height,item-width}",description:"Horizontal scroll strip configuration."},{name:"--sf-imposter-margin",description:"Safety margin for absolute-centered overlays."},{name:"--sf-box-{padding,border-color,border-width}",description:"Isolated .sf-box unit padding and border."},{name:"--sf-center-{gutter,max}",description:"Intrinsic-centering gutter and max-width."},{name:"--sf-content-width / --sf-breakout-width",description:"Breakout grid track widths."},{name:"--sf-divider-{color,style,width,gap}",description:"Divider appearance and surrounding gap tokens."},{name:"--sf-alternate-{gap,inner-gap}",description:"Zigzag .sf-alternate layout gaps."},{name:"--sf-equal-{cols,gap}",description:"Equal-columns count and gap."},{name:"--sf-col-width-{s,m,l}",description:"CSS multi-column track widths (ch-based)."},{name:"--sf-col-rule-width-{s,m,l}",description:"CSS multi-column rule (divider) widths."},{name:"--sf-field-{block,required-marker}",description:"Form field vertical spacing and required indicator string."}]},{category:"Borders",description:"Border shorthands, widths, styles, and stroke widths.",tokens:[{name:"--sf-border / --sf-border-{subtle,strong}",description:"Composed border shorthands (width + style + color). Replaces the three-part recipe."},{name:"--sf-border-width-{hairline,1,2,3,4}",description:"Border width scale: 0.5px, 1px, 2px, 3px, 4px."},{name:"--sf-border-style",description:"Default border style (solid)."},{name:"--sf-border-style-{dotted,soft,strong}",description:"Border style presets (dotted, dashed, solid)."},{name:"--sf-stroke-{thin,regular,bold,heavy}",description:"Stroke widths for SVG/icon use: 1px, 1.5px, 2px, 3px."}]},{category:"Radius",description:"Border radius scale and special shapes.",tokens:[{name:"--sf-radius-{none,xs,s,m,l,xl,2xl,3xl,4xl,full}",description:"Radius scale from 0 to 9999px (pill)."},{name:"--sf-radius-scale",description:"Global multiplier for all radius tokens (default 1)."},{name:"--sf-radius-pill",description:"Fully rounded (9999px)."},{name:"--sf-radius-outer",description:"Outer radius = inner + padding (for nested rounding)."}]},{category:"Shadows",description:"Box shadows, drop shadows, text shadows, and shadow configuration.",tokens:[{name:"--sf-shadow-{xs,s,m,l,xl,2xl}",description:"Elevation shadow scale, progressively more dramatic."},{name:"--sf-shadow-inner",description:"Inset shadow for recessed elements."},{name:"--sf-shadow-glow",description:"Colored glow effect (uses --sf-shadow-glow-color)."},{name:"--sf-shadow-none",description:"Explicit no-shadow value."},{name:"--sf-shadow-color / --sf-shadow-glow-color",description:"Base shadow color (derived from neutral) and glow color."},{name:"--sf-shadow-strength",description:"Shadow opacity multiplier (adapts to dark mode)."},{name:"--sf-drop-shadow-{s,m,l}",description:"CSS filter drop-shadow equivalents."},{name:"--sf-text-shadow-{s,m,l,none}",description:"Text shadow presets."}]},{category:"Effects",description:"Blurs, opacities, gradients, masks, perspective, and contrast tuning.",tokens:[{name:"--sf-blur-{xs,s,m,l,xl}",description:"Blur radius scale: 4px to 48px."},{name:"--sf-opacity-{0,10,25,50,75,100,disabled}",description:"Named opacity presets."},{name:"--sf-gradient-{brand,primary,secondary,tertiary,surface}",description:"Predefined gradients using brand colors."},{name:"--sf-gradient-fade--{t,b,l,r}",description:"Directional fade-to-background gradients."},{name:"--sf-mask-scrim-{start,end}",description:"Scroll mask fade depth."},{name:"--sf-perspective-{near,normal,far}",description:"3D perspective presets: 500px, 1000px, 2000px."},{name:"--sf-contrast-{bias,threshold}",description:"Color contrast tuning for auto text-on-color logic."}]},{category:"Motion",description:"Durations, easing curves, transitions, and animations.",tokens:[{name:"--sf-duration-{none,instant,fast,normal,slow,slower}",description:"Duration scale: 0ms to 600ms (respects --sf-motion-scale)."},{name:"--sf-motion-scale",description:"Global animation speed multiplier (set 0 to disable)."},{name:"--sf-ease-{linear,in,out,in-out,bounce,elastic,overshoot,spring}",description:"Easing function presets."},{name:"--sf-transition-{all,colors,opacity,shadow,transform,fast,slow,enter,exit,overlay}",description:"Pre-composed transition shorthands (overlay = top-layer display/overlay with allow-discrete)."},{name:"--sf-animation-{fade-in,fade-out,scale-up,scale-down,slide-in-up,slide-in-down,slide-in-left,slide-in-right,float,ping,blink,color-pulse,shimmer,spin}",description:"Named keyframe animation shorthands."},{name:"--sf-animation-delay-{1,2,3,4,5}",description:"Stagger delays for sequential animations."}]},{category:"Icons",description:"Inline icon sizing and the boxed-icon container.",tokens:[{name:"--sf-icon-{xs,s,m,l,xl,2xl}",description:"Icon sizing in em units (0.875em to ~3em)."},{name:"--sf-icon-box-{bg,border,pad,radius}",description:"Boxed icon (.sf-icon--boxed) background, border, padding, radius."}]},{category:"Z-Index",description:"Z-index scale for predictable layering.",tokens:[{name:"--sf-z-{below,base,raised,low,mid,high,top,max}",description:"Z-index scale: -1, 0, 1, 10, 100, 500, 900, 9999."}]},{category:"States",description:"Internal flags and state tokens that drive runtime .is-* behaviour.",tokens:[{name:"--sf-is-dark",description:"Numeric flag (0 or 1) indicating dark mode is active. Registered property."},{name:"--sf-is-{active,current,open,pressed}",description:"Internal numeric/derived flags mirrored from matching .is-* classes."},{name:"--sf-state-pending-opacity",description:"Opacity applied to elements in the .is-pending optimistic state."}]},{category:"Focus",description:"Focus ring appearance for keyboard navigation.",tokens:[{name:"--sf-focus-ring-{width,offset,color,style,shadow}",description:"Focus indicator configuration."},{name:"--sf-caret-color",description:"Text input caret color (defaults to action)."}]},{category:"Scroll",description:"Scroll timeline, scroll-shadow, and scrollbar styling.",tokens:[{name:"--sf-scroll-timeline-range-{start,end}",description:"Scroll-driven animation range."},{name:"--sf-scroll-shadow-size",description:"Depth of the .sf-scroll-shadow mask gradient."},{name:"--sf-scrollbar-{thumb,track}",description:"Custom scrollbar colors."}]},{category:"Print",description:"Print stylesheet configuration.",tokens:[{name:"--sf-print-{base-size,page-margin,page-size}",description:"Print layout tokens: 11pt base, 2cm margins, A4 size."}]},{category:"Misc",description:"Internal helpers and string-valued tokens that don't belong to a single visual family.",tokens:[{name:"--sf-lumlocker",description:"Internal luminance lock value for color derivation."},{name:"--sf-truncate-suffix",description:"Ellipsis string used by truncation utilities."},{name:"--sf-link-external-marker",description:"External link arrow character."}]}],Sc=[{category:"Layout Primitives",description:"Breakpoint-free, container-query-driven layout components. Each is a single class with per-instance token overrides via inline style.",classes:[{name:".sf-section / .sf-section-group",description:"Vertical page rhythm; -group collapses gap between adjacent sections."},{name:".sf-section--{xs,s,m,l,xl,2xl,collapse}",description:"Section size variants and collapse."},{name:".sf-container",description:"Centered max-width wrapper with gutters."},{name:".sf-container--{narrow,wide,full,prose}",description:"Container width variants."},{name:".sf-box",description:"Isolated unit with padding and optional border."},{name:".sf-center / .sf-center--intrinsic",description:"Intrinsic centering with max-width."},{name:".sf-stack",description:"Vertical flow with consistent gap."},{name:".sf-stack--{xs,s,m,l,xl,2xl,center,end,stretch}",description:"Stack size and alignment variants."},{name:".sf-cluster",description:"Wrapping inline group."},{name:".sf-cluster--{xs,s,m,l,xl,2xl,center,end,between,no-wrap}",description:"Cluster size, alignment, and wrap variants."},{name:".sf-sidebar",description:"Content + side panel that wraps."},{name:".sf-sidebar--{right,narrow,wide}",description:"Sidebar side and width variants."},{name:".sf-switcher",description:"N columns above threshold, stacked below."},{name:".sf-switcher--{no-wrap,vertical}",description:"Switcher behaviour variants."},{name:".sf-grid",description:"Auto-fill responsive grid."},{name:".sf-grid--{xs,s,m,l,xl,2xl,fit,dense}",description:"Grid item-size and packing variants."},{name:".sf-grid-{1,2,3,4,6}",description:"Fixed-column grids, container-responsive."},{name:".sf-grid-{1-2,2-1,1-3,3-1}",description:"Ratio two-column grids."},{name:".sf-bento",description:"Dense free-form grid."},{name:".sf-bento--{2,4,compact,tall}",description:"Bento column-count and row-height variants."},{name:".sf-equal / .sf-equal-height",description:"Equal-width columns; -height equalizes flex child heights."},{name:".sf-equal--{2,3,4,6}",description:"Equal-columns count variants."},{name:".sf-gap",description:"Standalone gap utility for grid/flex parents."},{name:".sf-gap--{xs,s,m,l,xl,2xl}",description:"Gap size variants."},{name:".sf-alternate",description:"Zigzag two-column layout, reverses every other row."},{name:".sf-pancake",description:"Sticky-footer grid: header / main(1fr) / footer."},{name:".sf-content-grid",description:"Breakout layout grid. Children use .sf-breakout or .sf-full-bleed."},{name:".sf-breakout / .sf-full-bleed",description:"Content-grid escape hatches: breakout band and edge-to-edge bleed."},{name:".sf-cover / .sf-cover__center",description:"Full-height region with a centered content child."},{name:".sf-cover--{min,max,padding-s,padding-l}",description:"Cover height and padding variants."},{name:".sf-frame",description:"Aspect-ratio media box."},{name:".sf-frame--{square,portrait,video,cinema,3-2,4-3,golden}",description:"Frame aspect-ratio variants."},{name:".sf-reel",description:"Horizontal scroll strip with optional mask fade."},{name:".sf-imposter / .sf-imposter--{fixed,contain}",description:"Absolutely-centered overlay and its position variants."},{name:".sf-subgrid / .sf-subgrid-rows",description:"Inherit parent grid tracks."},{name:".sf-divider / .sf-divider--vertical",description:"Token-driven separator (horizontal or vertical)."},{name:".sf-icon",description:"Em-based inline icon sizing."},{name:".sf-icon--{xs,s,m,l,xl,2xl,boxed}",description:"Icon size variants and boxed container."},{name:".sf-prose / .sf-not-prose",description:"Readable long-form text rhythm; -not resets a zone inside it."}]},{category:"Macros",description:"Recipe classes that answer 'what does this element do/look like?' - composable with layout primitives.",classes:[{name:".sf-flow",description:"Lobotomized owl: consistent gap between consecutive children."},{name:".sf-truncate",description:"Single-line ellipsis overflow."},{name:".sf-line-clamp-{2,3,N}",description:"Multi-line text clamping with ellipsis. -N reads --sf-line-clamp."},{name:".sf-aspect",description:"Generic aspect-ratio container (reads --sf-aspect token)."},{name:".sf-scroll-shadow",description:"Top + bottom mask gradient for scrolling containers."},{name:".sf-scroll-snap",description:"Vertical scroll-snap container."},{name:".sf-overflow-fade",description:"End-edge horizontal fade for overflowing inline content."},{name:".sf-no-tap-highlight",description:"Suppresses WebKit/Android tap highlight."},{name:".sf-text-gradient",description:"Gradient text effect using background-clip."},{name:".sf-clickable-parent / .sf-focus-parent",description:"Makes a whole card clickable via the first link inside; -focus mirrors focus ring to the parent."},{name:".sf-link-external",description:"Adds external link indicator marker."}]},{category:"Surfaces",description:"Color surface utility classes that set background and auto-contrast text for a brand context.",classes:[{name:".sf-surface--{primary,secondary,tertiary,action,neutral,inverse}",description:"Brand-colored surface with auto-contrast text."},{name:".sf-surface--{success,warning,error,info,danger}",description:"Status-colored surfaces."}]},{category:"Animations",description:"CSS animation utility classes that apply predefined keyframe animations.",classes:[{name:".sf-fade-in / .sf-fade-out",description:"Opacity entrance/exit animations."},{name:".sf-scale-up / .sf-scale-down",description:"Scale entrance/exit animations."},{name:".sf-slide-in-{up,down,left,right}",description:"Directional slide-in entrance animations."},{name:".sf-color-pulse",description:"Continuous color pulse animation."},{name:".sf-entrance--{fade,fade-up,fade-down,fade-left,fade-right,scale-up}",description:"Scroll-triggered entrance animations (scroll-timeline driven)."}]},{category:"State Classes (.is-*)",description:"Runtime state classes toggled by JS or mirrored from ARIA. They live in the slashed.states layer. Always pair with matching ARIA attributes.",classes:[{name:".is-hidden / .is-invisible / .is-visible",description:"Visibility control: removed from layout / hidden but keeps box / visible."},{name:".is-disabled / .is-readonly",description:"Non-interactive states with dimming."},{name:".is-loading / .is-pending / .is-busy",description:"Loading states: spinner replacement / optimistic UI / cursor hint."},{name:".is-skeleton",description:"Placeholder shimmer animation."},{name:".is-active / .is-selected / .is-current / .is-pressed",description:"Selection/activation states."},{name:".is-highlighted",description:"Transient emphasis (e.g. search result highlight)."},{name:".is-open / .is-collapsed / .is-expanded",description:"Disclosure states for modals, drawers, accordions."},{name:".is-valid / .is-invalid",description:"Form field validation results (maps to aria-invalid)."},{name:".is-success / .is-error / .is-warning / .is-info / .is-danger",description:"General feedback states and destructive-action context."},{name:".is-sticky / .is-pinned / .is-fixed / .is-fullscreen",description:"Positioning states."},{name:".is-clipped / .is-scrollable / .is-truncated / .is-resizable",description:"Overflow handling states."},{name:".is-dragging / .is-drop-target / .is-draggable",description:"Drag and drop states."},{name:".is-overlay / .is-focused / .is-clickable / .is-unselectable",description:"Positioning, focus, cursor, and selection states."},{name:".is-empty",description:"Hide element when empty (:empty pseudo-class)."}]}],Ec=[{name:"--sf-is-dark",description:"Numeric flag (0 or 1) indicating dark mode is active. Registered property."},{name:"--sf-lumlocker",description:"Internal luminance lock value for color derivation."},{name:"--sf-color-scheme",description:"CSS color-scheme declaration (light dark)."},{name:"--sf-current-font-weight",description:"Current context font weight (used by strong elements)."},{name:"--sf-link-external-marker",description:"External link arrow character."},{name:"--sf-field-block",description:"Vertical spacing between form fields."},{name:"--sf-field-required-marker",description:"Required field indicator string."}];var Ac=C('
    • '),Cc=C('
      '),$c=C('
      • '),Tc=C('
      Misc Tokens that do not fit a single category.
        '),jc=C('

        CSS Custom Properties (--sf-*)

        '),zc=C('
        • '),Fc=C('
          '),Pc=C('

          Utility & State Classes

          '),Rc=C('

          '),qc=C('

          API Cheatsheet

          ');function Mc(e,t){ze(t,!0);let s=fe(""),a=fe("all");const n=ne.inventory?.variables?.length??0,i=ne.inventory?.sf_classes?.length??0,o=ne.inventory?.is_classes?.length??0;let u=y(()=>f(kc,"tokens")),c=y(()=>f(Sc,"classes")),v=y(()=>Ec.filter(j=>h(j.name,j.description)));function h(j,N){if(!r(s).trim())return!0;const L=r(s).trim().toLowerCase();return j.toLowerCase().includes(L)||N.toLowerCase().includes(L)}function f(j,N){return r(s).trim()?j.map(L=>({...L,[N]:L[N].filter(H=>h(H.name,H.description))})).filter(L=>L[N].length>0):j}let p=y(()=>r(a)==="all"||r(a)==="variables"),m=y(()=>r(a)==="all"||r(a)==="classes"),b=y(()=>r(s).trim()!==""&&(!r(p)||r(u).length===0&&r(v).length===0)&&(!r(m)||r(c).length===0));var x=qc(),_=l(x),w=d(l(_),2),S=l(w),E=d(_,2),F=l(E),Y=d(F,2),T=l(Y);let z;var D=d(T,2);let O;var K=d(D,2);let q;var B=d(E,2);{var $=j=>{var N=jc(),L=d(l(N),2);de(L,17,()=>r(u),Ds,(ie,ae)=>{var oe=Cc(),U=l(oe),le=l(U),be=l(le),xe=d(le,2),Te=l(xe),Pe=d(U,2);de(Pe,21,()=>r(ae).tokens,Ds,(Re,M)=>{var X=Ac(),ee=l(X),ke=l(ee),ue=d(ee,2),I=l(ue);V(()=>{R(ke,r(M).name),R(I,r(M).description)}),A(Re,X)}),V(Re=>{oe.open=Re,R(be,r(ae).category),R(Te,r(ae).description)},[()=>!r(s).trim()]),A(ie,oe)});var H=d(L,2);{var se=ie=>{var ae=Tc(),oe=d(l(ae),2);de(oe,21,()=>r(v),Ds,(U,le)=>{var be=$c(),xe=l(be),Te=l(xe),Pe=d(xe,2),Re=l(Pe);V(()=>{R(Te,r(le).name),R(Re,r(le).description)}),A(U,be)}),V(U=>ae.open=U,[()=>!r(s).trim()]),A(ie,ae)};me(H,ie=>{r(v).length>0&&ie(se)})}A(j,N)};me(B,j=>{r(p)&&j($)})}var k=d(B,2);{var P=j=>{var N=Pc(),L=d(l(N),2);de(L,17,()=>r(c),Ds,(H,se)=>{var ie=Fc(),ae=l(ie),oe=l(ae),U=l(oe),le=d(oe,2),be=l(le),xe=d(ae,2);de(xe,21,()=>r(se).classes,Ds,(Te,Pe)=>{var Re=zc(),M=l(Re),X=l(M),ee=d(M,2),ke=l(ee);V(()=>{R(X,r(Pe).name),R(ke,r(Pe).description)}),A(Te,Re)}),V(Te=>{ie.open=Te,R(U,r(se).category),R(be,r(se).description)},[()=>!r(s).trim()]),A(H,ie)}),A(j,N)};me(k,j=>{r(m)&&j(P)})}var G=d(k,2);{var Z=j=>{var N=Rc(),L=l(N);V(()=>R(L,`No results for "${r(s)??""}"`)),A(j,N)};me(G,j=>{r(b)&&j(Z)})}V(()=>{R(S,`${n??""} variables | ${i??""} layout/utility classes | ${o??""} state classes`),te(T,"aria-pressed",r(a)==="all"),z=Ie(T,1,"svelte-osej3t",null,z,{active:r(a)==="all"}),te(D,"aria-pressed",r(a)==="variables"),O=Ie(D,1,"svelte-osej3t",null,O,{active:r(a)==="variables"}),te(K,"aria-pressed",r(a)==="classes"),q=Ie(K,1,"svelte-osej3t",null,q,{active:r(a)==="classes"})}),Vt(F,()=>r(s),j=>J(s,j)),ge("click",T,()=>J(a,"all")),ge("click",D,()=>J(a,"variables")),ge("click",K,()=>J(a,"classes")),A(e,x),Fe()}He(["click"]);var Dc=C(''),Lc=C(''),Ic=C('
          Aa
          Normal text Large text
          Normal: 4.5:1 AA · 7:1 AAA  |  Large: 3:1 AA · 4.5:1 AAA
          ',1),Vc=C('
          Select different colors to compute contrast.
          '),Oc=C(''),Kc=C(' '),Bc=C('—'),Nc=C(""),Hc=C(''),Gc=C(`

          WCAG Contrast Checker

          Pick any two SLASHED color tokens to check their WCAG 2.1 contrast ratio. The +} );`}],a=y(()=>ne.activeIntegrations?.bricks??!0);var n=wc(),i=d(l(n),4);let o;var u=l(i),c=d(l(u),4);{var v=f=>{var p=bc();A(f,p)};me(c,f=>{r(a)||f(v)})}var h=d(u,2);de(h,17,()=>s,f=>f.name,(f,p)=>{var m=yc(),b=l(m),x=l(b),_=l(x),w=d(b,2),S=l(w),E=d(w,2),F=d(l(E),2),Y=l(F),T=d(E,2),z=l(T),D=l(z);V(()=>{R(_,r(p).name),R(S,r(p).description),R(Y,r(p).params),R(D,r(p).example)}),A(f,m)}),V(()=>o=Ie(i,1,"group svelte-a36hjt",null,o,{"group--inactive":!r(a)})),A(e,n),Fe()}const kc=[{category:"Colors",description:"Brand, status, and semantic color tokens. Source colors use oklch(); the framework derives light-dark pairs, 50–950 palettes, alpha scales, and state variants automatically. Palette and alpha scales require optional/tokens.palette.css (optimal bundle and above).",tokens:[{name:"--sf-color-{primary,secondary,tertiary,action,neutral,base}",description:"Resolved light-dark adaptive brand color for use in rules."},{name:"--sf-color-{primary,secondary,tertiary,action,neutral,base}-light",description:"Source color (oklch registered value). Set this to rebrand."},{name:"--sf-color-{primary,secondary,tertiary,action,neutral,base}-dark",description:"Optional dark-mode override. If set, replaces the auto-derived dark variant for full per-mode control."},{name:"--sf-color-{primary,secondary,tertiary,action,neutral,base}-{50,100,200,300,400,500,600,700,800,900,950}",description:"Palette scale: 50 (lightest) → 950 (darkest), mixed with base/text. Requires tokens.palette.css."},{name:"--sf-color-{primary,secondary,tertiary,action,neutral,base}-{a5,a10,a20,a30,a40,a50,a60,a70,a80,a90,a95}",description:"Alpha scale: 5%–95% opacity of the brand color. Requires tokens.palette.css."},{name:"--sf-color-{primary,secondary,tertiary,action,neutral,base}-{hover,active,muted,subtle,ghost,lighter,darker,xlight,xdark,superlight,superdark}",description:"Semantic aliases for common UI states, mapped to palette steps."},{name:"--sf-color-{surface,inverse}",description:"Surface (card/panel) and inverse (high-contrast) context colors."},{name:"--sf-color-{success,warning,error,info,danger}",description:"Status feedback colors (resolved adaptive value)."},{name:"--sf-color-{success,warning,error,info,danger}-{light,strong,hover,active,muted,subtle,ghost,lighter,darker,xlight,xdark,superlight,superdark}",description:"Status color source (-light), emphasis (-strong), and state variants."},{name:"--sf-color-bg",description:"Page background color, derived from base."},{name:"--sf-color-bg--{hover,active,selected,focus,disabled}",description:"Interactive background overlays for hover/active/selected/focus/disabled states."},{name:"--sf-color-text",description:"Main body text color, contrast-aware."},{name:"--sf-color-text--{secondary,muted,disabled,placeholder,inverse}",description:"Secondary, muted, disabled, placeholder, and inverted text colors."},{name:"--sf-color-text--on-{primary,secondary,tertiary,action,neutral,base,surface,inverse,success,warning,error,info,danger}",description:"Auto-contrast text color to use on top of each colored surface."},{name:"--sf-color-heading",description:"Heading text color, slightly stronger than body text."},{name:"--sf-color-link",description:"Link color, derived from the action brand."},{name:"--sf-color-link--{hover,active,visited,underline,disabled}",description:"Link state colors and underline accent."},{name:"--sf-color-border",description:"Default border color."},{name:"--sf-color-border--{subtle,strong,focus,disabled,translucent}",description:"De-emphasized, emphasized, focus, disabled, and translucent border colors."},{name:"--sf-color-{code-bg,code-text,mark-bg,mark-text}",description:"Inline and background/foreground colors."},{name:"--sf-color-{white,black}",description:"Absolute white/black anchors in oklch space, for staying inside the token system."},{name:"--sf-color-surface",description:"Card/panel surface color (equals base)."},{name:"--sf-color-{inset,raised}",description:"Recessed (inset) and elevated (raised) surface background contexts."},{name:"--sf-color-selection-{bg,text}",description:"Text selection (::selection) background and foreground colors."},{name:"--sf-color-overlay",description:"Semi-transparent overlay for modals."},{name:"--sf-color-dim",description:"50% black overlay for dimming backgrounds."},{name:"--sf-color-scheme",description:"CSS color-scheme declaration (light dark). Holds a string, not a color."}]},{category:"Typography",description:"Font families, fluid size scale, weights, line-heights, letter-spacing, per-size sub-properties, and heading/body/prose configuration.",tokens:[{name:"--sf-font-{body,heading,mono,display,humanist,geometric,slab}",description:"Font stacks: body, heading, mono, display, plus curated humanist/geometric/slab fallback personalities."},{name:"--sf-font-{features,variation}",description:"font-feature-settings and font-variation-settings hooks."},{name:"--sf-font-weight-{thin,extralight,light,normal,medium,semibold,bold,extrabold,black}",description:"Named weight tokens: 100→900."},{name:"--sf-font-weight-{body,heading,display}",description:"Contextual weight tokens for body, heading, and display text."},{name:"--sf-current-font-weight",description:"Current context font weight (used by strong elements)."},{name:"--sf-leading-{tight,snug,normal,relaxed}",description:"Line-height presets: 1.1, 1.3, 1.5, 1.625."},{name:"--sf-tracking-{tight,normal,wide,wider,widest}",description:"Letter-spacing presets from -0.025em to 0.1em."},{name:"--sf-font-numeric",description:"Numeric figure style (tabular-nums) so digits align in columns; applied to number inputs."},{name:"--sf-text-{2xs,xs,s,m,l,xl,2xl,3xl,4xl}",description:"Fluid type scale using clamp(). Honours --sf-text-scale."},{name:"--sf-text-display-{s,m,l}",description:"Extra-large display/hero sizes. Honour --sf-text-display-scale."},{name:"--sf-text-{scale,display-scale}",description:"Global multipliers for the body and display type scales (default 1)."},{name:"--sf-text-{2xs,xs,s,m,l,xl,2xl,3xl,4xl}-{line-height,font-weight,letter-spacing,max-width}",description:"Per-size sub-property override knobs (relaxed leading for small text, tight leading for display). Requires tokens.sizes-extended.css."},{name:"--sf-text-{xs,s,m,l,xl,2xl,3xl,4xl}-to-{2xs,xs,s,m,l,xl,2xl,3xl}",description:"Text bridge tokens: a clamp() spanning from one step (wide) to another (narrow) for extra range of motion. Requires tokens.sizes-extended.css."},{name:"--sf-h{1,2,3,4,5,6}-{size,font-weight,line-height,letter-spacing}",description:"Per-heading-level configuration tokens."},{name:"--sf-heading-{color,font-family,text-wrap}",description:"Global heading color, font stack, and text-wrap mode (balance)."},{name:"--sf-body-{color,font-family,font-size,font-weight,line-height,text-wrap,em-style,strong-weight}",description:"Body text configuration tokens."},{name:"--sf-prose-{block-margin,heading-gap,list-gap,paragraph,figure-margin,figcaption-size,media-margin,media-radius,marker-color}",description:"Long-form .sf-prose rhythm and element styling tokens."},{name:"--sf-code-font-size",description:"Inline font-size (relative em)."},{name:"--sf-optical-sizing",description:"font-optical-sizing control (auto)."},{name:"--sf-line-clamp",description:"Default line count for .sf-line-clamp-N."}]},{category:"Spacing",description:"Fluid spacing scale (clamp-based), bridge tokens, gutters, section padding, component padding, flow, safe-area insets, and sticky-header offsets.",tokens:[{name:"--sf-space-{none,px,2xs,xs,s,m,l,xl,2xl,3xl,4xl}",description:"Fluid spacing scale. Honours --sf-space-scale (none/px are fixed)."},{name:"--sf-space-scale",description:"Global multiplier for all space tokens (default 1)."},{name:"--sf-space-{2xs,xs,s,m,l,xl,2xl,3xl,4xl}-to-{2xs,xs,s,m,l,xl,2xl,3xl}",description:"Spacing bridge tokens: clamp() spanning a wider range than any single step. Requires tokens.sizes-extended.css."},{name:"--sf-space-{gutter,gap,content}",description:"Internal aliases: page gutter, default gap, content gap (consumed by --sf-gap / --sf-content-gap)."},{name:"--sf-gap / --sf-gap-size",description:"Default layout gap and its raw size component."},{name:"--sf-content-gap",description:"Gap between content elements (defaults to space-s)."},{name:"--sf-component-pad",description:"Internal padding for components (defaults to space-m)."},{name:"--sf-section-pad",description:"Active section padding alias."},{name:"--sf-section-pad--{xs,s,m,l,xl,2xl}",description:"Vertical padding presets for page sections."},{name:"--sf-flow-space",description:"Gap applied between .sf-flow children (lobotomized owl)."},{name:"--sf-safe-{top,right,bottom,left}",description:"Safe-area insets for notched devices."},{name:"--sf-header-height",description:"Resolved fixed-header height for sticky offset calculations."},{name:"--sf-header-height-{mobile,desktop}",description:"Per-breakpoint header height inputs."},{name:"--sf-sticky-offset",description:"Resolved sticky offset (defaults to header height)."},{name:"--sf-sticky-offset-{mobile,desktop}",description:"Per-breakpoint sticky offset inputs."}]},{category:"Sizing",description:"Component sizes, touch targets, aspect ratios, and icon sizing.",tokens:[{name:"--sf-size-{xs,s,m,l,xl}",description:"Named size tokens: xs(1.5rem), s(2rem), m(2.5rem), l(2.75rem), xl(3.5rem)."},{name:"--sf-touch-target",description:"Minimum interactive element size (defaults to size-l, 2.75rem)."},{name:"--sf-ratio-{square,portrait,video,cinema,golden,3-2,4-3}",description:"Predefined aspect ratios for frames and containers."},{name:"--sf-aspect",description:"Generic aspect-ratio token read by the .sf-aspect macro (16/9)."},{name:"--sf-object-{fit,position}",description:"Default object-fit (cover) and object-position (50% 50%) for media elements."},{name:"--sf-content-intrinsic-size",description:"Placeholder size for the .sf-content-auto macro's contain-intrinsic-size (500px)."}]},{category:"Layout",description:"Container widths and layout-primitive tokens (stack, cluster, grid, sidebar, switcher, bento, cover, frame, reel, imposter, box, center, content-grid, divider, alternate, equal, multi-column).",tokens:[{name:"--sf-container-{narrow,default,prose,wide,full}",description:"Max-width presets for .sf-container."},{name:"--sf-stack-gap",description:"Vertical gap between .sf-stack children."},{name:"--sf-cluster-{gap,align,justify}",description:"Inline cluster layout tokens."},{name:"--sf-sidebar-{width,gap,min-width}",description:"Sidebar layout tokens."},{name:"--sf-switcher-{threshold,gap}",description:"Column-to-stack breakpoint and gap."},{name:"--sf-grid-{min,gap}",description:"Auto-fill grid minimum item width and gap."},{name:"--sf-grid-min-{xs,s,m,l,xl,2xl}",description:"Per-size minimum item widths for .sf-grid--*."},{name:"--sf-bento-{cols-default,gap,row-default,row-compact,row-tall}",description:"Dense bento grid configuration."},{name:"--sf-cover-{min-height,padding}",description:"Full-height cover layout."},{name:"--sf-frame-ratio",description:"Aspect ratio for .sf-frame (defaults to 16/9)."},{name:"--sf-reel-{gap,height,item-width}",description:"Horizontal scroll strip configuration."},{name:"--sf-imposter-margin",description:"Safety margin for absolute-centered overlays."},{name:"--sf-box-{padding,border-color,border-width}",description:"Isolated .sf-box unit padding and border."},{name:"--sf-center-{gutter,max}",description:"Intrinsic-centering gutter and max-width."},{name:"--sf-content-width / --sf-breakout-width",description:"Breakout grid track widths."},{name:"--sf-divider-{color,style,width,gap}",description:"Divider appearance and surrounding gap tokens."},{name:"--sf-alternate-{gap,inner-gap}",description:"Zigzag .sf-alternate layout gaps."},{name:"--sf-equal-{cols,gap}",description:"Equal-columns count and gap."},{name:"--sf-col-width-{s,m,l}",description:"CSS multi-column track widths (ch-based)."},{name:"--sf-col-rule-width-{s,m,l}",description:"CSS multi-column rule (divider) widths."},{name:"--sf-field-{block,required-marker}",description:"Form field vertical spacing and required indicator string."}]},{category:"Borders",description:"Border shorthands, widths, styles, and stroke widths.",tokens:[{name:"--sf-border / --sf-border-{subtle,strong}",description:"Composed border shorthands (width + style + color). Replaces the three-part recipe."},{name:"--sf-border-width-{hairline,1,2,3,4}",description:"Border width scale: 0.5px, 1px, 2px, 3px, 4px."},{name:"--sf-border-style",description:"Default border style (solid)."},{name:"--sf-border-style-{dotted,soft,strong}",description:"Border style presets (dotted, dashed, solid)."},{name:"--sf-stroke-{thin,regular,bold,heavy}",description:"Stroke widths for SVG/icon use: 1px, 1.5px, 2px, 3px."}]},{category:"Radius",description:"Border radius scale and special shapes.",tokens:[{name:"--sf-radius-{none,xs,s,m,l,xl,2xl,3xl,4xl,full}",description:"Radius scale from 0 to 9999px (pill)."},{name:"--sf-radius-scale",description:"Global multiplier for all radius tokens (default 1)."},{name:"--sf-radius-pill",description:"Fully rounded (9999px)."},{name:"--sf-radius-outer",description:"Outer radius = inner + padding (for nested rounding)."}]},{category:"Shadows",description:"Box shadows, drop shadows, text shadows, and shadow configuration.",tokens:[{name:"--sf-shadow-{xs,s,m,l,xl,2xl}",description:"Elevation shadow scale, progressively more dramatic."},{name:"--sf-shadow-inner",description:"Inset shadow for recessed elements."},{name:"--sf-shadow-glow",description:"Colored glow effect (uses --sf-shadow-glow-color)."},{name:"--sf-shadow-none",description:"Explicit no-shadow value."},{name:"--sf-shadow-color / --sf-shadow-glow-color",description:"Base shadow color (derived from neutral) and glow color."},{name:"--sf-shadow-strength",description:"Shadow opacity multiplier (adapts to dark mode)."},{name:"--sf-drop-shadow-{s,m,l}",description:"CSS filter drop-shadow equivalents."},{name:"--sf-text-shadow-{s,m,l,none}",description:"Text shadow presets."}]},{category:"Effects",description:"Blurs, opacities, gradients, masks, perspective, and contrast tuning.",tokens:[{name:"--sf-blur-{xs,s,m,l,xl}",description:"Blur radius scale: 4px to 48px."},{name:"--sf-opacity-{0,10,25,50,75,100,disabled}",description:"Named opacity presets."},{name:"--sf-gradient-{brand,primary,secondary,tertiary,surface}",description:"Predefined gradients using brand colors."},{name:"--sf-gradient-fade--{t,b,l,r}",description:"Directional fade-to-background gradients."},{name:"--sf-mask-scrim-{start,end}",description:"Scroll mask fade depth."},{name:"--sf-perspective-{near,normal,far}",description:"3D perspective presets: 500px, 1000px, 2000px."},{name:"--sf-contrast-{bias,threshold}",description:"Color contrast tuning for auto text-on-color logic."}]},{category:"Motion",description:"Durations, easing curves, transitions, and animations.",tokens:[{name:"--sf-duration-{none,instant,fast,normal,slow,slower}",description:"Duration scale: 0ms to 600ms (respects --sf-motion-scale)."},{name:"--sf-motion-scale",description:"Global animation speed multiplier (set 0 to disable)."},{name:"--sf-ease-{linear,in,out,in-out,bounce,elastic,overshoot,spring}",description:"Easing function presets."},{name:"--sf-transition-{all,colors,opacity,shadow,transform,fast,slow,enter,exit,overlay}",description:"Pre-composed transition shorthands (overlay = top-layer display/overlay with allow-discrete)."},{name:"--sf-animation-{fade-in,fade-out,scale-up,scale-down,slide-in-up,slide-in-down,slide-in-left,slide-in-right,float,ping,blink,color-pulse,shimmer,spin}",description:"Named keyframe animation shorthands."},{name:"--sf-animation-delay-{1,2,3,4,5}",description:"Stagger delays for sequential animations."}]},{category:"Icons",description:"Inline icon sizing and the boxed-icon container.",tokens:[{name:"--sf-icon-{xs,s,m,l,xl,2xl}",description:"Icon sizing in em units (0.875em to ~3em)."},{name:"--sf-icon-box-{bg,border,pad,radius}",description:"Boxed icon (.sf-icon--boxed) background, border, padding, radius."}]},{category:"Z-Index",description:"Z-index scale for predictable layering.",tokens:[{name:"--sf-z-{below,base,raised,low,mid,high,top,max}",description:"Z-index scale: -1, 0, 1, 10, 100, 500, 900, 9999."}]},{category:"States",description:"Internal flags and state tokens that drive runtime .is-* behaviour.",tokens:[{name:"--sf-is-dark",description:"Numeric flag (0 or 1) indicating dark mode is active. Registered property."},{name:"--sf-is-{active,current,open,pressed}",description:"Internal numeric/derived flags mirrored from matching .is-* classes."},{name:"--sf-state-pending-opacity",description:"Opacity applied to elements in the .is-pending optimistic state."}]},{category:"Focus",description:"Focus ring appearance for keyboard navigation.",tokens:[{name:"--sf-focus-ring-{width,offset,color,style,shadow}",description:"Focus indicator configuration."},{name:"--sf-caret-color",description:"Text input caret color (defaults to action)."}]},{category:"Scroll",description:"Scroll timeline, scroll-shadow, and scrollbar styling.",tokens:[{name:"--sf-scroll-timeline-range-{start,end}",description:"Scroll-driven animation range."},{name:"--sf-scroll-shadow-size",description:"Depth of the .sf-scroll-shadow mask gradient."},{name:"--sf-scrollbar-{thumb,track}",description:"Custom scrollbar colors."}]},{category:"Print",description:"Print stylesheet configuration.",tokens:[{name:"--sf-print-{base-size,page-margin,page-size}",description:"Print layout tokens: 11pt base, 2cm margins, A4 size."}]},{category:"Misc",description:"Internal helpers and string-valued tokens that don't belong to a single visual family.",tokens:[{name:"--sf-lumlocker",description:"Internal luminance lock value for color derivation."},{name:"--sf-truncate-suffix",description:"Ellipsis string used by truncation utilities."},{name:"--sf-link-external-marker",description:"External link arrow character."}]}],Sc=[{category:"Layout Primitives",description:"Breakpoint-free, container-query-driven layout components. Each is a single class with per-instance token overrides via inline style.",classes:[{name:".sf-section / .sf-section-group",description:"Vertical page rhythm; -group collapses gap between adjacent sections."},{name:".sf-section--{xs,s,m,l,xl,2xl,collapse}",description:"Section size variants and collapse."},{name:".sf-container",description:"Centered max-width wrapper with gutters."},{name:".sf-container--{narrow,wide,full,prose}",description:"Container width variants."},{name:".sf-box",description:"Isolated unit with padding and optional border."},{name:".sf-center / .sf-center--intrinsic",description:"Intrinsic centering with max-width."},{name:".sf-stack",description:"Vertical flow with consistent gap."},{name:".sf-stack--{xs,s,m,l,xl,2xl,center,end,stretch}",description:"Stack size and alignment variants."},{name:".sf-cluster",description:"Wrapping inline group."},{name:".sf-cluster--{xs,s,m,l,xl,2xl,center,end,between,no-wrap}",description:"Cluster size, alignment, and wrap variants."},{name:".sf-sidebar",description:"Content + side panel that wraps."},{name:".sf-sidebar--{right,narrow,wide}",description:"Sidebar side and width variants."},{name:".sf-switcher",description:"N columns above threshold, stacked below."},{name:".sf-switcher--{no-wrap,vertical}",description:"Switcher behaviour variants."},{name:".sf-grid",description:"Auto-fill responsive grid."},{name:".sf-grid--{xs,s,m,l,xl,2xl,fit,dense}",description:"Grid item-size and packing variants."},{name:".sf-grid-{1,2,3,4,6}",description:"Fixed-column grids, container-responsive."},{name:".sf-grid-{1-2,2-1,1-3,3-1}",description:"Ratio two-column grids."},{name:".sf-bento",description:"Dense free-form grid."},{name:".sf-bento--{2,4,compact,tall}",description:"Bento column-count and row-height variants."},{name:".sf-equal / .sf-equal-height",description:"Equal-width columns; -height equalizes flex child heights."},{name:".sf-equal--{2,3,4,6}",description:"Equal-columns count variants."},{name:".sf-gap",description:"Standalone gap utility for grid/flex parents."},{name:".sf-gap--{xs,s,m,l,xl,2xl}",description:"Gap size variants."},{name:".sf-alternate",description:"Zigzag two-column layout, reverses every other row."},{name:".sf-pancake",description:"Sticky-footer grid: header / main(1fr) / footer."},{name:".sf-content-grid",description:"Breakout layout grid. Children use .sf-breakout or .sf-full-bleed."},{name:".sf-breakout / .sf-full-bleed",description:"Content-grid escape hatches: breakout band and edge-to-edge bleed."},{name:".sf-cover / .sf-cover__center",description:"Full-height region with a centered content child."},{name:".sf-cover--{min,max,padding-s,padding-l}",description:"Cover height and padding variants."},{name:".sf-frame",description:"Aspect-ratio media box."},{name:".sf-frame--{square,portrait,video,cinema,3-2,4-3,golden}",description:"Frame aspect-ratio variants."},{name:".sf-reel",description:"Horizontal scroll strip with optional mask fade."},{name:".sf-imposter / .sf-imposter--{fixed,contain}",description:"Absolutely-centered overlay and its position variants."},{name:".sf-subgrid / .sf-subgrid-rows",description:"Inherit parent grid tracks."},{name:".sf-divider / .sf-divider--vertical",description:"Token-driven separator (horizontal or vertical)."},{name:".sf-icon",description:"Em-based inline icon sizing."},{name:".sf-icon--{xs,s,m,l,xl,2xl,boxed}",description:"Icon size variants and boxed container."},{name:".sf-prose / .sf-not-prose",description:"Readable long-form text rhythm; -not resets a zone inside it."}]},{category:"Macros",description:"Recipe classes that answer 'what does this element do/look like?' - composable with layout primitives.",classes:[{name:".sf-flow",description:"Lobotomized owl: consistent gap between consecutive children."},{name:".sf-truncate",description:"Single-line ellipsis overflow."},{name:".sf-line-clamp-{2,3,N}",description:"Multi-line text clamping with ellipsis. -N reads --sf-line-clamp."},{name:".sf-aspect",description:"Generic aspect-ratio container (reads --sf-aspect token)."},{name:".sf-scroll-shadow",description:"Top + bottom mask gradient for scrolling containers."},{name:".sf-scroll-snap",description:"Vertical scroll-snap container."},{name:".sf-overflow-fade",description:"End-edge horizontal fade for overflowing inline content."},{name:".sf-no-tap-highlight",description:"Suppresses WebKit/Android tap highlight."},{name:".sf-content-auto",description:"content-visibility:auto — skips rendering offscreen content (reads --sf-content-intrinsic-size)."},{name:".sf-tabular-nums",description:"Fixed-width digits for column-aligned numbers (reads --sf-font-numeric)."},{name:".sf-text-gradient",description:"Gradient text effect using background-clip."},{name:".sf-clickable-parent / .sf-focus-parent",description:"Makes a whole card clickable via the first link inside; -focus mirrors focus ring to the parent."},{name:".sf-link-external",description:"Adds external link indicator marker."}]},{category:"Surfaces",description:"Color surface utility classes that set background and auto-contrast text for a brand context.",classes:[{name:".sf-surface--{primary,secondary,tertiary,action,neutral,inverse}",description:"Brand-colored surface with auto-contrast text."},{name:".sf-surface--{success,warning,error,info,danger}",description:"Status-colored surfaces."}]},{category:"Animations",description:"CSS animation utility classes that apply predefined keyframe animations.",classes:[{name:".sf-fade-in / .sf-fade-out",description:"Opacity entrance/exit animations."},{name:".sf-scale-up / .sf-scale-down",description:"Scale entrance/exit animations."},{name:".sf-slide-in-{up,down,left,right}",description:"Directional slide-in entrance animations."},{name:".sf-color-pulse",description:"Continuous color pulse animation."},{name:".sf-entrance--{fade,fade-up,fade-down,fade-left,fade-right,scale-up}",description:"Scroll-triggered entrance animations (scroll-timeline driven)."}]},{category:"State Classes (.is-*)",description:"Runtime state classes toggled by JS or mirrored from ARIA. They live in the slashed.states layer. Always pair with matching ARIA attributes.",classes:[{name:".is-hidden / .is-invisible / .is-visible",description:"Visibility control: removed from layout / hidden but keeps box / visible."},{name:".is-disabled / .is-readonly",description:"Non-interactive states with dimming."},{name:".is-loading / .is-pending / .is-busy",description:"Loading states: spinner replacement / optimistic UI / cursor hint."},{name:".is-skeleton",description:"Placeholder shimmer animation."},{name:".is-active / .is-selected / .is-current / .is-pressed",description:"Selection/activation states."},{name:".is-highlighted",description:"Transient emphasis (e.g. search result highlight)."},{name:".is-open / .is-collapsed / .is-expanded",description:"Disclosure states for modals, drawers, accordions."},{name:".is-valid / .is-invalid",description:"Form field validation results (maps to aria-invalid)."},{name:".is-success / .is-error / .is-warning / .is-info / .is-danger",description:"General feedback states and destructive-action context."},{name:".is-sticky / .is-pinned / .is-fixed / .is-fullscreen",description:"Positioning states."},{name:".is-clipped / .is-scrollable / .is-truncated / .is-resizable",description:"Overflow handling states."},{name:".is-dragging / .is-drop-target / .is-draggable",description:"Drag and drop states."},{name:".is-overlay / .is-focused / .is-clickable / .is-unselectable",description:"Positioning, focus, cursor, and selection states."},{name:".is-empty",description:"Hide element when empty (:empty pseudo-class)."}]}],Ec=[{name:"--sf-is-dark",description:"Numeric flag (0 or 1) indicating dark mode is active. Registered property."},{name:"--sf-lumlocker",description:"Internal luminance lock value for color derivation."},{name:"--sf-color-scheme",description:"CSS color-scheme declaration (light dark)."},{name:"--sf-current-font-weight",description:"Current context font weight (used by strong elements)."},{name:"--sf-link-external-marker",description:"External link arrow character."},{name:"--sf-field-block",description:"Vertical spacing between form fields."},{name:"--sf-field-required-marker",description:"Required field indicator string."}];var Ac=C('

          • '),Cc=C('
            '),$c=C('
            • '),Tc=C('
            Misc Tokens that do not fit a single category.
              '),jc=C('

              CSS Custom Properties (--sf-*)

              '),zc=C('
              • '),Fc=C('
                '),Pc=C('

                Utility & State Classes

                '),Rc=C('

                '),qc=C('

                API Cheatsheet

                ');function Mc(e,t){ze(t,!0);let s=fe(""),a=fe("all");const n=ne.inventory?.variables?.length??0,i=ne.inventory?.sf_classes?.length??0,o=ne.inventory?.is_classes?.length??0;let u=y(()=>f(kc,"tokens")),c=y(()=>f(Sc,"classes")),v=y(()=>Ec.filter(j=>h(j.name,j.description)));function h(j,N){if(!r(s).trim())return!0;const L=r(s).trim().toLowerCase();return j.toLowerCase().includes(L)||N.toLowerCase().includes(L)}function f(j,N){return r(s).trim()?j.map(L=>({...L,[N]:L[N].filter(H=>h(H.name,H.description))})).filter(L=>L[N].length>0):j}let p=y(()=>r(a)==="all"||r(a)==="variables"),m=y(()=>r(a)==="all"||r(a)==="classes"),b=y(()=>r(s).trim()!==""&&(!r(p)||r(u).length===0&&r(v).length===0)&&(!r(m)||r(c).length===0));var x=qc(),_=l(x),w=d(l(_),2),S=l(w),E=d(_,2),F=l(E),Y=d(F,2),T=l(Y);let z;var D=d(T,2);let O;var K=d(D,2);let q;var B=d(E,2);{var $=j=>{var N=jc(),L=d(l(N),2);de(L,17,()=>r(u),Ds,(ie,ae)=>{var oe=Cc(),U=l(oe),le=l(U),be=l(le),xe=d(le,2),Te=l(xe),Pe=d(U,2);de(Pe,21,()=>r(ae).tokens,Ds,(Re,M)=>{var X=Ac(),ee=l(X),ke=l(ee),ue=d(ee,2),I=l(ue);V(()=>{R(ke,r(M).name),R(I,r(M).description)}),A(Re,X)}),V(Re=>{oe.open=Re,R(be,r(ae).category),R(Te,r(ae).description)},[()=>!r(s).trim()]),A(ie,oe)});var H=d(L,2);{var se=ie=>{var ae=Tc(),oe=d(l(ae),2);de(oe,21,()=>r(v),Ds,(U,le)=>{var be=$c(),xe=l(be),Te=l(xe),Pe=d(xe,2),Re=l(Pe);V(()=>{R(Te,r(le).name),R(Re,r(le).description)}),A(U,be)}),V(U=>ae.open=U,[()=>!r(s).trim()]),A(ie,ae)};me(H,ie=>{r(v).length>0&&ie(se)})}A(j,N)};me(B,j=>{r(p)&&j($)})}var k=d(B,2);{var P=j=>{var N=Pc(),L=d(l(N),2);de(L,17,()=>r(c),Ds,(H,se)=>{var ie=Fc(),ae=l(ie),oe=l(ae),U=l(oe),le=d(oe,2),be=l(le),xe=d(ae,2);de(xe,21,()=>r(se).classes,Ds,(Te,Pe)=>{var Re=zc(),M=l(Re),X=l(M),ee=d(M,2),ke=l(ee);V(()=>{R(X,r(Pe).name),R(ke,r(Pe).description)}),A(Te,Re)}),V(Te=>{ie.open=Te,R(U,r(se).category),R(be,r(se).description)},[()=>!r(s).trim()]),A(H,ie)}),A(j,N)};me(k,j=>{r(m)&&j(P)})}var G=d(k,2);{var Z=j=>{var N=Rc(),L=l(N);V(()=>R(L,`No results for "${r(s)??""}"`)),A(j,N)};me(G,j=>{r(b)&&j(Z)})}V(()=>{R(S,`${n??""} variables | ${i??""} layout/utility classes | ${o??""} state classes`),te(T,"aria-pressed",r(a)==="all"),z=Ie(T,1,"svelte-osej3t",null,z,{active:r(a)==="all"}),te(D,"aria-pressed",r(a)==="variables"),O=Ie(D,1,"svelte-osej3t",null,O,{active:r(a)==="variables"}),te(K,"aria-pressed",r(a)==="classes"),q=Ie(K,1,"svelte-osej3t",null,q,{active:r(a)==="classes"})}),Vt(F,()=>r(s),j=>J(s,j)),ge("click",T,()=>J(a,"all")),ge("click",D,()=>J(a,"variables")),ge("click",K,()=>J(a,"classes")),A(e,x),Fe()}He(["click"]);var Dc=C(''),Lc=C(''),Ic=C('
                Aa
                Normal text Large text
                Normal: 4.5:1 AA · 7:1 AAA  |  Large: 3:1 AA · 4.5:1 AAA
                ',1),Vc=C('
                Select different colors to compute contrast.
                '),Oc=C(''),Kc=C(' '),Bc=C('—'),Nc=C(""),Hc=C(''),Gc=C(`

                WCAG Contrast Checker

                Pick any two SLASHED color tokens to check their WCAG 2.1 contrast ratio. The grid below shows every token pair — click any cell to load it into the picker. Colors shown are the light-mode variants.

                Foreground

                Background

                All-pairs reference

                Foreground → rows · Background → columns. Click any cell to load the pair into the picker above.

                AAA (≥ 7:1) AA (≥ 4.5:1) AA large only (≥ 3:1) Fail (< 3:1)
                `);function Uc(e,t){ze(t,!0);const s=ne.defaults?.colors??{},a=Object.keys(s.brand??{}),n=Object.keys(s.status??{}),i=[...a,...n];function o(M){return M.charAt(0).toUpperCase()+M.slice(1)}function u(M){const X=a.includes(M)?Q.colors?.[`brand_${M}`]:Q.colors?.[`status_${M}`];return X||(s.brand_hex_hints?.[M]??s.status_hex_hints?.[M]??s.brand?.[M]??s.status?.[M]??"")}function c(M){if(!M||typeof document>"u"||typeof CSS<"u"&&!CSS.supports("color",M))return null;try{const X=document.createElement("canvas");X.width=1,X.height=1;const ee=X.getContext("2d");ee.fillStyle=M,ee.fillRect(0,0,1,1);const[ke,ue,I,W]=ee.getImageData(0,0,1,1).data;return W===0?null:[ke,ue,I]}catch{return null}}function v(M){return M/=255,M<=.04045?M/12.92:Math.pow((M+.055)/1.055,2.4)}function h([M,X,ee]){return .2126*v(M)+.7152*v(X)+.0722*v(ee)}function f(M,X){const ee=h(M),ke=h(X),ue=Math.max(ee,ke),I=Math.min(ee,ke);return(ue+.05)/(I+.05)}function p(M){return M>=7?"AAA":M>=4.5?"AA":M>=3?"AA-large":"fail"}function m(M){return M==="AAA"?"badge--aaa":M==="AA"?"badge--aa":M==="AA-large"?"badge--aa-large":"badge--fail"}const b=y(()=>{const M=new Map;for(const X of i)M.set(X,c(u(X)));return M});let x=fe(Ve(i[0]??"")),_=fe(Ve(i[1]??i[0]??""));const w=y(()=>r(b).get(r(x))??null),S=y(()=>r(b).get(r(_))??null),E=y(()=>r(w)&&r(S)?f(r(w),r(S)):null),F=y(()=>r(E)!==null?p(r(E)):null),Y=y(()=>r(E)===null?null:r(E)>=4.5?"AAA":r(E)>=3?"AA":"fail"),T=y(()=>{const M=[];for(const X of i){const ee=[];for(const ke of i){const ue=r(b).get(X),I=r(b).get(ke);if(!ue||!I||X===ke)ee.push({ratio:null,level:null});else{const W=f(ue,I);ee.push({ratio:W,level:p(W)})}}M.push(ee)}return M});function z(M){const X=u(M);return X?`background:${X}`:"background:#ccc"}function D(M){J(x,M,!0)}function O(M){J(_,M,!0)}function K(M,X){J(x,M,!0),J(_,X,!0)}var q=Gc(),B=d(l(q),4),$=l(B),k=d(l($),2);de(k,20,()=>i,M=>M,(M,X)=>{var ee=Dc();let ke;V((ue,I,W)=>{ke=Ie(ee,1,"swatch-btn svelte-1n4yog1",null,ke,{"swatch-btn--active":r(x)===X}),pe(ee,ue),te(ee,"title",I),te(ee,"aria-label",`Set foreground to ${W??""}`)},[()=>z(X),()=>o(X),()=>o(X)]),ge("click",ee,()=>D(X)),A(M,ee)});var P=d(k,2),G=l(P),Z=d(G),j=d($,2),N=d(l(j),2);de(N,20,()=>i,M=>M,(M,X)=>{var ee=Lc();let ke;V((ue,I,W)=>{ke=Ie(ee,1,"swatch-btn svelte-1n4yog1",null,ke,{"swatch-btn--active":r(_)===X}),pe(ee,ue),te(ee,"title",I),te(ee,"aria-label",`Set background to ${W??""}`)},[()=>z(X),()=>o(X),()=>o(X)]),ge("click",ee,()=>O(X)),A(M,ee)});var L=d(N,2),H=l(L),se=d(H),ie=d(j,2),ae=l(ie);{var oe=M=>{var X=Ic(),ee=ot(X),ke=d(ee,2),ue=l(ke),I=d(ke,2),W=l(I),_e=d(l(W),2),Ae=l(_e),Oe=d(W,2),qe=d(l(Oe),2),Ne=l(qe);V((Bt,At,Ms,lt)=>{pe(ee,`color:${Bt??""}`),R(ue,`${At??""}:1`),Ie(_e,1,`badge ${Ms??""}`,"svelte-1n4yog1"),R(Ae,r(F)),Ie(qe,1,`badge ${lt??""}`,"svelte-1n4yog1"),R(Ne,r(Y))},[()=>u(r(x))||"#000",()=>r(E).toFixed(2),()=>m(r(F)),()=>m(r(Y))]),A(M,X)},U=M=>{var X=Vc();A(M,X)};me(ae,M=>{r(E)!==null?M(oe):M(U,-1)})}var le=d(B,6),be=l(le),xe=l(be),Te=l(xe),Pe=d(l(Te));de(Pe,16,()=>i,M=>M,(M,X)=>{var ee=Oc(),ke=l(ee);V((ue,I)=>{te(ee,"title",ue),pe(ke,I)},[()=>o(X),()=>z(X)]),A(M,ee)});var Re=d(xe);de(Re,22,()=>i,M=>M,(M,X,ee)=>{var ke=Hc(),ue=l(ke),I=l(ue),W=d(ue);de(W,18,()=>i,_e=>_e,(_e,Ae,Oe)=>{const qe=y(()=>r(T)[r(ee)][r(Oe)]);var Ne=Nc();let Bt;var At=l(Ne);{var Ms=Ze=>{var Ct=Kc(),gs=l(Ct);V(Se=>R(gs,Se),[()=>r(qe).ratio.toFixed(1)]),A(Ze,Ct)},lt=Ze=>{var Ct=Bc();A(Ze,Ct)};me(At,Ze=>{r(qe).ratio!==null?Ze(Ms):Ze(lt,-1)})}V((Ze,Ct,gs)=>{Bt=Ie(Ne,1,"grid-cell svelte-1n4yog1",null,Bt,{"grid-cell--same":X===Ae,"grid-cell--aaa":r(qe).level==="AAA","grid-cell--aa":r(qe).level==="AA","grid-cell--aa-large":r(qe).level==="AA-large","grid-cell--fail":r(qe).level==="fail","grid-cell--active":r(x)===X&&r(_)===Ae}),te(Ne,"title",`${Ze??""} on ${Ct??""}: ${gs??""}`),te(Ne,"role",X!==Ae?"button":void 0),te(Ne,"tabindex",X!==Ae?0:void 0)},[()=>o(X),()=>o(Ae),()=>r(qe).ratio!==null?r(qe).ratio.toFixed(2)+":1":"—"]),ge("click",Ne,()=>X!==Ae&&K(X,Ae)),ge("keydown",Ne,Ze=>Ze.key==="Enter"&&X!==Ae&&K(X,Ae)),A(_e,Ne)}),V((_e,Ae)=>{te(ue,"title",_e),pe(I,Ae)},[()=>o(X),()=>z(X)]),A(M,ke)}),V((M,X,ee,ke,ue)=>{pe(G,M),R(Z,` ${X??""}`),pe(H,ee),R(se,` ${ke??""}`),pe(ie,`background:${ue??""}`)},[()=>z(r(x)),()=>o(r(x)),()=>z(r(_)),()=>o(r(_)),()=>u(r(_))||"#fff"]),A(e,q),Fe()}He(["click","keydown"]);var Wc=C('

                Content Grid

                Widths used by the content-grid breakout pattern.

                Sidebar

                Cover

                Frame

                Reel

                Imposter

                Equal Columns

                ',1),Yc=C(`

                Containers

                Max-width values for .sf-container size variants. Any valid CSS length (rem, px, ch, %, etc.).

                Grid

                Minimum column width for .sf-grid auto-fill layouts. diff --git a/plugins/SLASHED-for-WP/integrations/bricks/data/inventory.json b/plugins/SLASHED-for-WP/integrations/bricks/data/inventory.json index 7bfc0d55..2e7054e8 100644 --- a/plugins/SLASHED-for-WP/integrations/bricks/data/inventory.json +++ b/plugins/SLASHED-for-WP/integrations/bricks/data/inventory.json @@ -2,8 +2,8 @@ "_meta": { "source": "source (core/ + optional/ token and class files)", "counts": { - "variables": 805, - "sf_classes": 158, + "variables": 806, + "sf_classes": 160, "is_classes": 40 } }, @@ -417,6 +417,7 @@ "--sf-container-prose", "--sf-container-wide", "--sf-content-gap", + "--sf-content-intrinsic-size", "--sf-content-width", "--sf-contrast-bias", "--sf-contrast-threshold", @@ -844,6 +845,7 @@ "sf-container--narrow", "sf-container--prose", "sf-container--wide", + "sf-content-auto", "sf-content-grid", "sf-cover", "sf-cover__center", @@ -971,6 +973,7 @@ "sf-switcher", "sf-switcher--no-wrap", "sf-switcher--vertical", + "sf-tabular-nums", "sf-text-gradient", "sf-truncate" ], diff --git a/tests/token-api.snapshot.json b/tests/token-api.snapshot.json index 5a9b7465..73f1947e 100644 --- a/tests/token-api.snapshot.json +++ b/tests/token-api.snapshot.json @@ -408,6 +408,7 @@ "--sf-container-prose", "--sf-container-wide", "--sf-content-gap", + "--sf-content-intrinsic-size", "--sf-content-width", "--sf-contrast-bias", "--sf-contrast-threshold",