From 6652c98a24bb209ea7c006e773aa5f40bb612162 Mon Sep 17 00:00:00 2001
From: Claude The framework auto-derives dark mode from light source colors using CSS relative color syntax
+var Dn=Object.defineProperty;var br=e=>{throw TypeError(e)};var Ln=(e,t,s)=>t in e?Dn(e,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[t]=s;var Je=(e,t,s)=>Ln(e,typeof t!="symbol"?t+"":t,s),Ma=(e,t,s)=>t.has(e)||br("Cannot "+s);var g=(e,t,s)=>(Ma(e,t,"read from private field"),s?s.call(e):t.get(e)),ve=(e,t,s)=>t.has(e)?br("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,s),ce=(e,t,s,a)=>(Ma(e,t,"write to private field"),a?a.call(e,s):t.set(e,s),s),Ee=(e,t,s)=>(Ma(e,t,"access private method"),s);var ir=Array.isArray,In=Array.prototype.indexOf,is=Array.prototype.includes,Ta=Array.from,Vn=Object.defineProperty,xs=Object.getOwnPropertyDescriptor,On=Object.getOwnPropertyDescriptors,Kn=Object.prototype,Bn=Array.prototype,Kr=Object.getPrototypeOf,yr=Object.isExtensible;const Br=()=>{};function Nn(e){for(var t=0;t The framework auto-derives dark mode from light source colors using CSS relative color syntax
( Pick a color via the HEX input, or switch to Advanced to paste any
+ when you need precise per-color dark overrides; auto-derivation is usually good enough. Pick a color via the HEX input, or switch to Advanced to paste any
CSS color value (oklch, rgb, hsl, var(...), etc). Whatever you save is fed
- straight into the framework as the source of the brand scale. No Bricks fonts found. Add fonts in Bricks › Settings › Custom Fonts or the Bricks Font Manager, then reload this page. Display Scale Live Scale Preview Text Scale Min and max values in No Bricks fonts found. Add fonts in Bricks › Settings › Custom Fonts or the Bricks Font Manager, then reload this page. Display Scale Live Scale Preview Text Scale Min and max values in Live Scale Preview The viewport width range (in Live Scale Preview The viewport width range (in Min and max values in The The Base duration values in milliseconds. Z-index layer values for stacking context management. All All utility and state classes declared in the active SLASHED bundle. When enabled, hovering a SLASHED class in the Bricks class manager shows a short
- description of what it does. Powered by Enable the Bricks integration in SLASHED Settings to use this feature. The SLASHED CSS bundle is loaded automatically on the frontend and in the block editor canvas.
+ viewport range, and named aliases live under Advanced. Base duration values in milliseconds. Z-index layer values for stacking context management. All All utility and state classes declared in the active SLASHED bundle. When enabled, hovering a SLASHED class in the Bricks class manager shows a short
+ description of what it does. Powered by Enable the Bricks integration in SLASHED Settings to use this feature. The SLASHED CSS bundle is loaded automatically on the frontend and in the block editor canvas.
The inventory is parsed from whichever bundle is active and drives the variable pickers,
class autocomplete, and color palette in any active builder integration. Choose which SLASHED CSS bundle to load on the frontend and in builder canvases. Essential is the full core layer (everything in Override the HTML root font-size. Use this when your theme or builder forces a root font-size
- that conflicts with rem-based framework values. '),jo=C(' ',1),zo=C(''),Fo=C('Brand Colors — Dark Mode
Status Colors — Dark Mode
',1),Mo=C(`Status Colors — Light Mode
'),Fo=C(' ',1),Po=C(''),Ro=C('Brand Colors — Dark Mode
Status Colors — Dark Mode
',1),Lo=C(`Status Colors — Light Mode
oklch(from light clamp(0.65, 0.95−l·0.5, 0.88) c·0.9 h)). Turn this on only
- when you need precise per-color dark overrides; auto-derivation is usually good enough.Brand Colors — Light Mode
Brand Colors — Light Mode
'),Ko=C(' Additional Font Families
Font Size Scale
rem for fluid type scaling via clamp().
+ straight into the framework as the source of the brand scale. '),No=C(' Additional Font Families
Font Size Scale
rem for fluid type scaling via clamp().
Leave both fields blank to use the framework defaults. The viewport range these
sizes interpolate across (and the range the Live Scale Preview above scrubs) is the Fluid Scale Viewport Range set in the Spacing tab —
- it's the shared source for both spacing and typography.Scale Multipliers
Font Families
Fluid Scale Viewport Range
rem) used to compute all fluid clamp() formulas for custom-overridden spacing and typography values. Default: 22.5 rem (360 px) → 95 rem (1520 px). Changing these only affects values you explicitly
+ it's the shared source for both spacing and typography.Scale Multipliers
Font Families
Fluid Scale Viewport Range
rem) used to compute all fluid clamp() formulas for custom-overridden spacing and typography values. Default: 22.5 rem (360 px) → 95 rem (1520 px). Changing these only affects values you explicitly
override below or in the Typography tab — the framework's built-in scale uses the same defaults
and is unaffected.Space Scale Steps
rem for fluid spacing via clamp().
- Leave both fields blank to use the framework defaults.Space Aliases
`,1),xl=C(`Spacing
Space Scale multiplier scales every spacing token at once — the quickest
+ Leave both fields blank to use the framework defaults.Space Aliases
`,1),$l=C(`Spacing
Space Scale multiplier scales every spacing token at once — the quickest
way to make a whole site more or less airy. Fine-grained per-step overrides, the fluid
- viewport range, and named aliases live under Advanced.Shadow
Motion — Durations
Z-Index
Contrast
Radius
Shadows
Motion
Accessibility
'),Dl=C('
--sf-* custom properties declared in the active SLASHED bundle,
- grouped by category. '),Kl=C('
'),Nl=C('
data/classes-hints.json.Bundle Info
Shadow
Motion — Durations
Z-Index
Contrast
Radius
Shadows
Motion
Accessibility
'),Bl=C('
--sf-* custom properties declared in the active SLASHED bundle,
+ grouped by category. '),Wl=C('
'),Xl=C('
data/classes-hints.json.Bundle Info
Plugin Settings
core/). Optimal adds the optional color palette, extended size/spacing scales,
form styling, and legacy fallbacks. Full additionally bundles the
component tokens & styles and the utility classes.
'),fc=C('
'),pc=C(`
Export your current SLASHED token overrides (colors, typography, spacing, etc.) to a .json file and import them on any other WordPress site running this plugin.
+}`,s}function fc(e){if(!e||typeof e!="object")return!1;for(const t of Object.values(e))if(!(!t||typeof t!="object")){for(const s of Object.values(t))if(typeof s=="object"&&s!==null){for(const a of Object.values(s))if(a!==""&&a!==null&&a!==void 0)return!0}else if(s!==""&&s!==null&&s!==void 0)return!0}return!1}var pc=C(' '),hc=C('
'),_c=C('
'),gc=C(`
Export your current SLASHED token overrides (colors, typography, spacing, etc.) to a .json file and import them on any other WordPress site running this plugin.
Token exports are builder-agnostic — the file carries the brand tokens that drive the visual
result regardless of which builder or theme is in use.
Downloads a .json file containing all your active token overrides and plugin settings.
Share this file alongside your template export so the visual result is identical on every site.
Upload a .json file previously exported from this plugin. Each section is validated
@@ -38,8 +38,8 @@ var Dn=Object.defineProperty;var br=e=>{throw TypeError(e)};var Ln=(e,t,s)=>t in
via this tab, then import your template via your builder. SLASHED re-registers all classes,
variables, and color palettes automatically.
var() calls —
- this means the CSS bundle isn't loading or the token file wasn't imported yet.
Parameters:
These WordPress filter hooks let you customize SLASHED integrations from your theme or a mu-plugin. - Hooks only fire when their respective integration is active.
Parameters:
These WordPress filter hooks let you customize SLASHED integrations from your theme or a mu-plugin. + Hooks only fire when their respective integration is active.
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-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}",description:"Pre-composed transition shorthands."},{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."}]}],wc=[{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)."}]}],xc=[{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 kc=C(' '),Sc=C('
'),Ec=C(' '),Ac=C('Misc Tokens that do not fit a single category.
'),Cc=C('CSS Custom Properties (--sf-*)
'),$c=C(' '),Tc=C('
'),jc=C('Utility & State Classes
'),zc=C('
'),Fc=C('API Cheatsheet
');function Rc(e,t){ze(t,!0);let s=he(""),a=he("all");const n=le.inventory?.variables?.length??0,i=le.inventory?.sf_classes?.length??0,o=le.inventory?.is_classes?.length??0;let u=y(()=>f(yc,"tokens")),c=y(()=>f(wc,"classes")),v=y(()=>xc.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=Fc(),_=l(x),w=d(l(_),2),E=l(w),A=d(_,2),F=l(A),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(A,2);{var $=j=>{var N=Cc(),L=d(l(N),2);de(L,17,()=>r(u),Ms,(ne,ae)=>{var ie=Sc(),U=l(ie),oe=l(U),be=l(oe),xe=d(oe,2),Te=l(xe),Re=d(U,2);de(Re,21,()=>r(ae).tokens,Ms,(Pe,M)=>{var X=kc(),ee=l(X),ke=l(ee),ue=d(ee,2),I=l(ue);V(()=>{P(ke,r(M).name),P(I,r(M).description)}),S(Pe,X)}),V(Pe=>{ie.open=Pe,P(be,r(ae).category),P(Te,r(ae).description)},[()=>!r(s).trim()]),S(ne,ie)});var H=d(L,2);{var se=ne=>{var ae=Ac(),ie=d(l(ae),2);de(ie,21,()=>r(v),Ms,(U,oe)=>{var be=Ec(),xe=l(be),Te=l(xe),Re=d(xe,2),Pe=l(Re);V(()=>{P(Te,r(oe).name),P(Pe,r(oe).description)}),S(U,be)}),V(U=>ae.open=U,[()=>!r(s).trim()]),S(ne,ae)};me(H,ne=>{r(v).length>0&&ne(se)})}S(j,N)};me(B,j=>{r(p)&&j($)})}var k=d(B,2);{var R=j=>{var N=jc(),L=d(l(N),2);de(L,17,()=>r(c),Ms,(H,se)=>{var ne=Tc(),ae=l(ne),ie=l(ae),U=l(ie),oe=d(ie,2),be=l(oe),xe=d(ae,2);de(xe,21,()=>r(se).classes,Ms,(Te,Re)=>{var Pe=$c(),M=l(Pe),X=l(M),ee=d(M,2),ke=l(ee);V(()=>{P(X,r(Re).name),P(ke,r(Re).description)}),S(Te,Pe)}),V(Te=>{ne.open=Te,P(U,r(se).category),P(be,r(se).description)},[()=>!r(s).trim()]),S(H,ne)}),S(j,N)};me(k,j=>{r(m)&&j(R)})}var G=d(k,2);{var Z=j=>{var N=zc(),L=l(N);V(()=>P(L,`No results for "${r(s)??""}"`)),S(j,N)};me(G,j=>{r(b)&&j(Z)})}V(()=>{P(E,`${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")),S(e,x),Fe()}He(["click"]);var Pc=C(''),qc=C(''),Mc=C('Aa Normal text Large text Normal: 4.5:1 AA · 7:1 AAA | Large: 3:1 AA · 4.5:1 AAA',1),Dc=C('Select different colors to compute contrast.'),Lc=C(' '),Ic=C(' '),Vc=C('—'),Oc=C(" "),Kc=C(' '),Bc=C(`WCAG Contrast Checker
Pick any two SLASHED color tokens to check their WCAG 2.1 contrast ratio. The
+} );`}],a=y(()=>ie.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();E(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),A=d(w,2),F=d(l(A),2),Y=l(F),T=d(A,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)}),E(f,m)}),V(()=>o=Ie(i,1,"group svelte-a36hjt",null,o,{"group--inactive":!r(a)})),E(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-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}",description:"Pre-composed transition shorthands."},{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=ie.inventory?.variables?.length??0,i=ie.inventory?.sf_classes?.length??0,o=ie.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),A=d(_,2),F=l(A),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(A,2);{var $=j=>{var N=jc(),L=d(l(N),2);de(L,17,()=>r(u),Ds,(ne,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)}),E(Re,X)}),V(Re=>{oe.open=Re,R(be,r(ae).category),R(Te,r(ae).description)},[()=>!r(s).trim()]),E(ne,oe)});var H=d(L,2);{var se=ne=>{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)}),E(U,be)}),V(U=>ae.open=U,[()=>!r(s).trim()]),E(ne,ae)};me(H,ne=>{r(v).length>0&&ne(se)})}E(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 ne=Fc(),ae=l(ne),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)}),E(Te,Re)}),V(Te=>{ne.open=Te,R(U,r(se).category),R(be,r(se).description)},[()=>!r(s).trim()]),E(H,ne)}),E(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)??""}"`)),E(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")),E(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 Nc(e,t){ze(t,!0);const s=le.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=he(Ve(i[0]??"")),_=he(Ve(i[1]??i[0]??""));const w=y(()=>r(b).get(r(x))??null),E=y(()=>r(b).get(r(_))??null),A=y(()=>r(w)&&r(E)?f(r(w),r(E)):null),F=y(()=>r(A)!==null?p(r(A)):null),Y=y(()=>r(A)===null?null:r(A)>=4.5?"AAA":r(A)>=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=Bc(),B=d(l(q),4),$=l(B),k=d(l($),2);de(k,20,()=>i,M=>M,(M,X)=>{var ee=Pc();let ke;V((ue,I,W)=>{ke=Ie(ee,1,"swatch-btn svelte-1n4yog1",null,ke,{"swatch-btn--active":r(x)===X}),fe(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)),S(M,ee)});var R=d(k,2),G=l(R),Z=d(G),j=d($,2),N=d(l(j),2);de(N,20,()=>i,M=>M,(M,X)=>{var ee=qc();let ke;V((ue,I,W)=>{ke=Ie(ee,1,"swatch-btn svelte-1n4yog1",null,ke,{"swatch-btn--active":r(_)===X}),fe(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)),S(M,ee)});var L=d(N,2),H=l(L),se=d(H),ne=d(j,2),ae=l(ne);{var ie=M=>{var X=Mc(),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,qs,lt)=>{fe(ee,`color:${Bt??""}`),P(ue,`${At??""}:1`),Ie(_e,1,`badge ${qs??""}`,"svelte-1n4yog1"),P(Ae,r(F)),Ie(qe,1,`badge ${lt??""}`,"svelte-1n4yog1"),P(Ne,r(Y))},[()=>u(r(x))||"#000",()=>r(A).toFixed(2),()=>m(r(F)),()=>m(r(Y))]),S(M,X)},U=M=>{var X=Dc();S(M,X)};me(ae,M=>{r(A)!==null?M(ie):M(U,-1)})}var oe=d(B,6),be=l(oe),xe=l(be),Te=l(xe),Re=d(l(Te));de(Re,16,()=>i,M=>M,(M,X)=>{var ee=Lc(),ke=l(ee);V((ue,I)=>{te(ee,"title",ue),fe(ke,I)},[()=>o(X),()=>z(X)]),S(M,ee)});var Pe=d(xe);de(Pe,22,()=>i,M=>M,(M,X,ee)=>{var ke=Kc(),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=Oc();let Bt;var At=l(Ne);{var qs=Ze=>{var Ct=Ic(),gs=l(Ct);V(Se=>P(gs,Se),[()=>r(qe).ratio.toFixed(1)]),S(Ze,Ct)},lt=Ze=>{var Ct=Vc();S(Ze,Ct)};me(At,Ze=>{r(qe).ratio!==null?Ze(qs):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)),S(_e,Ne)}),V((_e,Ae)=>{te(ue,"title",_e),fe(I,Ae)},[()=>o(X),()=>z(X)]),S(M,ke)}),V((M,X,ee,ke,ue)=>{fe(G,M),P(Z,` ${X??""}`),fe(H,ee),P(se,` ${ke??""}`),fe(ne,`background:${ue??""}`)},[()=>z(r(x)),()=>o(r(x)),()=>z(r(_)),()=>o(r(_)),()=>u(r(_))||"#fff"]),S(e,q),Fe()}He(["click","keydown"]);var Hc=C('Content Grid
Widths used by the content-grid breakout pattern.
Sidebar
Cover
Frame
Reel
Imposter
Equal Columns
',1),Gc=C(`Containers
Max-width values for .sf-container size variants. Any valid CSS length
+ 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=ie.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),A=y(()=>r(w)&&r(S)?f(r(w),r(S)):null),F=y(()=>r(A)!==null?p(r(A)):null),Y=y(()=>r(A)===null?null:r(A)>=4.5?"AAA":r(A)>=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)),E(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)),E(M,ee)});var L=d(N,2),H=l(L),se=d(H),ne=d(j,2),ae=l(ne);{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(A).toFixed(2),()=>m(r(F)),()=>m(r(Y))]),E(M,X)},U=M=>{var X=Vc();E(M,X)};me(ae,M=>{r(A)!==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)]),E(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)]),E(Ze,Ct)},lt=Ze=>{var Ct=Bc();E(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)),E(_e,Ne)}),V((_e,Ae)=>{te(ue,"title",_e),pe(I,Ae)},[()=>o(X),()=>z(X)]),E(M,ke)}),V((M,X,ee,ke,ue)=>{pe(G,M),R(Z,` ${X??""}`),pe(H,ee),R(se,` ${ke??""}`),pe(ne,`background:${ue??""}`)},[()=>z(r(x)),()=>o(r(x)),()=>z(r(_)),()=>o(r(_)),()=>u(r(_))||"#fff"]),E(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.
The grid will fit as many columns as possible at or above this width.
Switcher
Viewport width at which .sf-switcher flips from a stacked column to a row.
Bento Grid
Column count and row height presets for .sf-bento free-form grid layouts.
Header & Sticky
Set mobile and desktop header heights in rem. When both are provided, --sf-header-height becomes a fluid clamp() between them using
the viewport range configured in the Spacing tab. Set both to the same value for a
- fixed height. Leave blank to use the framework defaults (3.5rem mobile, 5rem desktop) — shown as the input placeholders.
Header height Sticky offset `);function Uc(e,t){ze(t,!0);const s="layouts",a=le.defaults?.[s]??{};var n=Gc(),i=d(l(n),4),o=l(i);{let j=y(()=>a.container_narrow??"38rem");je(o,{section:s,fieldKey:"container_narrow",label:"Narrow",get default(){return r(j)},cssVar:"--sf-container-narrow",mono:!0})}var u=d(o,2);{let j=y(()=>a.container_prose??"65ch");je(u,{section:s,fieldKey:"container_prose",label:"Prose",get default(){return r(j)},cssVar:"--sf-container-prose",mono:!0})}var c=d(u,2);{let j=y(()=>a.container_default??"75rem");je(c,{section:s,fieldKey:"container_default",label:"Default",get default(){return r(j)},cssVar:"--sf-container-default",mono:!0})}var v=d(c,2);{let j=y(()=>a.container_wide??"90rem");je(v,{section:s,fieldKey:"container_wide",label:"Wide",get default(){return r(j)},cssVar:"--sf-container-wide",mono:!0})}var h=d(i,6),f=l(h);{let j=y(()=>a.grid_min??"16rem");je(f,{section:s,fieldKey:"grid_min",label:"Default min",get default(){return r(j)},cssVar:"--sf-grid-min",mono:!0})}var p=d(f,2);{let j=y(()=>a.grid_min_xs??"10rem");je(p,{section:s,fieldKey:"grid_min_xs",label:"XS min",get default(){return r(j)},cssVar:"--sf-grid-min-xs",mono:!0})}var m=d(p,2);{let j=y(()=>a.grid_min_s??"13rem");je(m,{section:s,fieldKey:"grid_min_s",label:"S min",get default(){return r(j)},cssVar:"--sf-grid-min-s",mono:!0})}var b=d(m,2);{let j=y(()=>a.grid_min_l??"20rem");je(b,{section:s,fieldKey:"grid_min_l",label:"L min",get default(){return r(j)},cssVar:"--sf-grid-min-l",mono:!0})}var x=d(b,2);{let j=y(()=>a.grid_min_xl??"24rem");je(x,{section:s,fieldKey:"grid_min_xl",label:"XL min",get default(){return r(j)},cssVar:"--sf-grid-min-xl",mono:!0})}var _=d(x,2);{let j=y(()=>a.grid_min_2xl??"28rem");je(_,{section:s,fieldKey:"grid_min_2xl",label:"2XL min",get default(){return r(j)},cssVar:"--sf-grid-min-2xl",mono:!0})}var w=d(h,6),E=l(w);{let j=y(()=>a.switcher_threshold??"30rem");je(E,{section:s,fieldKey:"switcher_threshold",label:"Threshold",get default(){return r(j)},cssVar:"--sf-switcher-threshold",mono:!0})}var A=d(w,6),F=l(A);{let j=y(()=>a.bento_cols??"3");je(F,{section:s,fieldKey:"bento_cols",label:"Columns",get default(){return r(j)},cssVar:"--sf-bento-cols-default",mono:!0})}var Y=d(F,2);{let j=y(()=>a.bento_row_default??"10rem");je(Y,{section:s,fieldKey:"bento_row_default",label:"Row (default)",get default(){return r(j)},cssVar:"--sf-bento-row-default",mono:!0})}var T=d(Y,2);{let j=y(()=>a.bento_row_compact??"6rem");je(T,{section:s,fieldKey:"bento_row_compact",label:"Row (compact)",get default(){return r(j)},cssVar:"--sf-bento-row-compact",mono:!0})}var z=d(T,2);{let j=y(()=>a.bento_row_tall??"16rem");je(z,{section:s,fieldKey:"bento_row_tall",label:"Row (tall)",get default(){return r(j)},cssVar:"--sf-bento-row-tall",mono:!0})}var D=d(A,6),O=l(D),K=d(l(O),2),q=l(K);{let j=y(()=>a.header_height_mobile||"3.5");Ge(q,{section:s,fieldKey:"header_height_mobile",label:"Mobile (rem)",min:0,step:.25,get default(){return r(j)},cssVar:"--sf-header-height-mobile",width:"100px"})}var B=d(q,2);{let j=y(()=>a.header_height_desktop||"5");Ge(B,{section:s,fieldKey:"header_height_desktop",label:"Desktop (rem)",min:0,step:.25,get default(){return r(j)},cssVar:"--sf-header-height-desktop",width:"100px"})}var $=d(O,2),k=d(l($),2),R=l(k);{let j=y(()=>a.sticky_offset_mobile||"3.5");Ge(R,{section:s,fieldKey:"sticky_offset_mobile",label:"Mobile (rem)",min:0,step:.25,get default(){return r(j)},cssVar:"--sf-sticky-offset-mobile",width:"100px"})}var G=d(R,2);{let j=y(()=>a.sticky_offset_desktop||"5");Ge(G,{section:s,fieldKey:"sticky_offset_desktop",label:"Desktop (rem)",min:0,step:.25,get default(){return r(j)},cssVar:"--sf-sticky-offset-desktop",width:"100px"})}var Z=d(D,2);aa(Z,{children:(j,N)=>{var L=Hc(),H=d(ot(L),4),se=l(H);{let W=y(()=>a.content_width??"var(--sf-container-default)");je(se,{section:s,fieldKey:"content_width",label:"Content width",get default(){return r(W)},cssVar:"--sf-content-width",mono:!0})}var ne=d(se,2);{let W=y(()=>a.breakout_width??"var(--sf-container-wide)");je(ne,{section:s,fieldKey:"breakout_width",label:"Breakout width",get default(){return r(W)},cssVar:"--sf-breakout-width",mono:!0})}var ae=d(H,4),ie=l(ae);{let W=y(()=>a.sidebar_width??"18rem");je(ie,{section:s,fieldKey:"sidebar_width",label:"Sidebar width",get default(){return r(W)},cssVar:"--sf-sidebar-width",mono:!0})}var U=d(ie,2);{let W=y(()=>a.sidebar_min_width??"50%");je(U,{section:s,fieldKey:"sidebar_min_width",label:"Content col minimum",get default(){return r(W)},cssVar:"--sf-sidebar-min-width",mono:!0})}var oe=d(ae,4),be=l(oe);{let W=y(()=>a.cover_min_height??"100dvh");je(be,{section:s,fieldKey:"cover_min_height",label:"Min height",get default(){return r(W)},cssVar:"--sf-cover-min-height",mono:!0})}var xe=d(be,2);{let W=y(()=>a.cover_padding??"var(--sf-section-pad)");je(xe,{section:s,fieldKey:"cover_padding",label:"Padding",get default(){return r(W)},cssVar:"--sf-cover-padding",mono:!0})}var Te=d(oe,4),Re=l(Te);{let W=y(()=>a.frame_ratio??"16 / 9");je(Re,{section:s,fieldKey:"frame_ratio",label:"Aspect ratio",get default(){return r(W)},cssVar:"--sf-frame-ratio",mono:!0})}var Pe=d(Te,4),M=l(Pe);{let W=y(()=>a.reel_item_width??"max-content");je(M,{section:s,fieldKey:"reel_item_width",label:"Item width",get default(){return r(W)},cssVar:"--sf-reel-item-width",mono:!0})}var X=d(M,2);{let W=y(()=>a.reel_height??"auto");je(X,{section:s,fieldKey:"reel_height",label:"Height",get default(){return r(W)},cssVar:"--sf-reel-height",mono:!0})}var ee=d(Pe,4),ke=l(ee);{let W=y(()=>a.imposter_margin??"var(--sf-space-m)");je(ke,{section:s,fieldKey:"imposter_margin",label:"Margin",get default(){return r(W)},cssVar:"--sf-imposter-margin",mono:!0})}var ue=d(ee,4),I=l(ue);{let W=y(()=>a.equal_cols??"2");je(I,{section:s,fieldKey:"equal_cols",label:"Column count",get default(){return r(W)},cssVar:"--sf-equal-cols",mono:!0})}S(j,L)},$$slots:{default:!0}}),S(e,n),Fe()}var Wc=C(' '),Yc=C(' '),Xc=C(' '),Zc=C(' '),Jc=C(`Live preview
Typography
The quick brown fox jumps over the lazy dog
Body text uses --sf-color-text--secondary over the page
+ fixed height. Leave blank to use the framework defaults (3.5rem mobile, 5rem desktop) — shown as the input placeholders.
Header height Sticky offset `);function Xc(e,t){ze(t,!0);const s="layouts",a=ie.defaults?.[s]??{};var n=Yc(),i=d(l(n),4),o=l(i);{let j=y(()=>a.container_narrow??"38rem");je(o,{section:s,fieldKey:"container_narrow",label:"Narrow",get default(){return r(j)},cssVar:"--sf-container-narrow",mono:!0})}var u=d(o,2);{let j=y(()=>a.container_prose??"65ch");je(u,{section:s,fieldKey:"container_prose",label:"Prose",get default(){return r(j)},cssVar:"--sf-container-prose",mono:!0})}var c=d(u,2);{let j=y(()=>a.container_default??"75rem");je(c,{section:s,fieldKey:"container_default",label:"Default",get default(){return r(j)},cssVar:"--sf-container-default",mono:!0})}var v=d(c,2);{let j=y(()=>a.container_wide??"90rem");je(v,{section:s,fieldKey:"container_wide",label:"Wide",get default(){return r(j)},cssVar:"--sf-container-wide",mono:!0})}var h=d(i,6),f=l(h);{let j=y(()=>a.grid_min??"16rem");je(f,{section:s,fieldKey:"grid_min",label:"Default min",get default(){return r(j)},cssVar:"--sf-grid-min",mono:!0})}var p=d(f,2);{let j=y(()=>a.grid_min_xs??"10rem");je(p,{section:s,fieldKey:"grid_min_xs",label:"XS min",get default(){return r(j)},cssVar:"--sf-grid-min-xs",mono:!0})}var m=d(p,2);{let j=y(()=>a.grid_min_s??"13rem");je(m,{section:s,fieldKey:"grid_min_s",label:"S min",get default(){return r(j)},cssVar:"--sf-grid-min-s",mono:!0})}var b=d(m,2);{let j=y(()=>a.grid_min_l??"20rem");je(b,{section:s,fieldKey:"grid_min_l",label:"L min",get default(){return r(j)},cssVar:"--sf-grid-min-l",mono:!0})}var x=d(b,2);{let j=y(()=>a.grid_min_xl??"24rem");je(x,{section:s,fieldKey:"grid_min_xl",label:"XL min",get default(){return r(j)},cssVar:"--sf-grid-min-xl",mono:!0})}var _=d(x,2);{let j=y(()=>a.grid_min_2xl??"28rem");je(_,{section:s,fieldKey:"grid_min_2xl",label:"2XL min",get default(){return r(j)},cssVar:"--sf-grid-min-2xl",mono:!0})}var w=d(h,6),S=l(w);{let j=y(()=>a.switcher_threshold??"30rem");je(S,{section:s,fieldKey:"switcher_threshold",label:"Threshold",get default(){return r(j)},cssVar:"--sf-switcher-threshold",mono:!0})}var A=d(w,6),F=l(A);{let j=y(()=>a.bento_cols??"3");je(F,{section:s,fieldKey:"bento_cols",label:"Columns",get default(){return r(j)},cssVar:"--sf-bento-cols-default",mono:!0})}var Y=d(F,2);{let j=y(()=>a.bento_row_default??"10rem");je(Y,{section:s,fieldKey:"bento_row_default",label:"Row (default)",get default(){return r(j)},cssVar:"--sf-bento-row-default",mono:!0})}var T=d(Y,2);{let j=y(()=>a.bento_row_compact??"6rem");je(T,{section:s,fieldKey:"bento_row_compact",label:"Row (compact)",get default(){return r(j)},cssVar:"--sf-bento-row-compact",mono:!0})}var z=d(T,2);{let j=y(()=>a.bento_row_tall??"16rem");je(z,{section:s,fieldKey:"bento_row_tall",label:"Row (tall)",get default(){return r(j)},cssVar:"--sf-bento-row-tall",mono:!0})}var D=d(A,6),O=l(D),K=d(l(O),2),q=l(K);{let j=y(()=>a.header_height_mobile||"3.5");Ge(q,{section:s,fieldKey:"header_height_mobile",label:"Mobile (rem)",min:0,step:.25,get default(){return r(j)},cssVar:"--sf-header-height-mobile",width:"100px"})}var B=d(q,2);{let j=y(()=>a.header_height_desktop||"5");Ge(B,{section:s,fieldKey:"header_height_desktop",label:"Desktop (rem)",min:0,step:.25,get default(){return r(j)},cssVar:"--sf-header-height-desktop",width:"100px"})}var $=d(O,2),k=d(l($),2),P=l(k);{let j=y(()=>a.sticky_offset_mobile||"3.5");Ge(P,{section:s,fieldKey:"sticky_offset_mobile",label:"Mobile (rem)",min:0,step:.25,get default(){return r(j)},cssVar:"--sf-sticky-offset-mobile",width:"100px"})}var G=d(P,2);{let j=y(()=>a.sticky_offset_desktop||"5");Ge(G,{section:s,fieldKey:"sticky_offset_desktop",label:"Desktop (rem)",min:0,step:.25,get default(){return r(j)},cssVar:"--sf-sticky-offset-desktop",width:"100px"})}var Z=d(D,2);ra(Z,{children:(j,N)=>{var L=Wc(),H=d(ot(L),4),se=l(H);{let W=y(()=>a.content_width??"var(--sf-container-default)");je(se,{section:s,fieldKey:"content_width",label:"Content width",get default(){return r(W)},cssVar:"--sf-content-width",mono:!0})}var ne=d(se,2);{let W=y(()=>a.breakout_width??"var(--sf-container-wide)");je(ne,{section:s,fieldKey:"breakout_width",label:"Breakout width",get default(){return r(W)},cssVar:"--sf-breakout-width",mono:!0})}var ae=d(H,4),oe=l(ae);{let W=y(()=>a.sidebar_width??"18rem");je(oe,{section:s,fieldKey:"sidebar_width",label:"Sidebar width",get default(){return r(W)},cssVar:"--sf-sidebar-width",mono:!0})}var U=d(oe,2);{let W=y(()=>a.sidebar_min_width??"50%");je(U,{section:s,fieldKey:"sidebar_min_width",label:"Content col minimum",get default(){return r(W)},cssVar:"--sf-sidebar-min-width",mono:!0})}var le=d(ae,4),be=l(le);{let W=y(()=>a.cover_min_height??"100dvh");je(be,{section:s,fieldKey:"cover_min_height",label:"Min height",get default(){return r(W)},cssVar:"--sf-cover-min-height",mono:!0})}var xe=d(be,2);{let W=y(()=>a.cover_padding??"var(--sf-section-pad)");je(xe,{section:s,fieldKey:"cover_padding",label:"Padding",get default(){return r(W)},cssVar:"--sf-cover-padding",mono:!0})}var Te=d(le,4),Pe=l(Te);{let W=y(()=>a.frame_ratio??"16 / 9");je(Pe,{section:s,fieldKey:"frame_ratio",label:"Aspect ratio",get default(){return r(W)},cssVar:"--sf-frame-ratio",mono:!0})}var Re=d(Te,4),M=l(Re);{let W=y(()=>a.reel_item_width??"max-content");je(M,{section:s,fieldKey:"reel_item_width",label:"Item width",get default(){return r(W)},cssVar:"--sf-reel-item-width",mono:!0})}var X=d(M,2);{let W=y(()=>a.reel_height??"auto");je(X,{section:s,fieldKey:"reel_height",label:"Height",get default(){return r(W)},cssVar:"--sf-reel-height",mono:!0})}var ee=d(Re,4),ke=l(ee);{let W=y(()=>a.imposter_margin??"var(--sf-space-m)");je(ke,{section:s,fieldKey:"imposter_margin",label:"Margin",get default(){return r(W)},cssVar:"--sf-imposter-margin",mono:!0})}var ue=d(ee,4),I=l(ue);{let W=y(()=>a.equal_cols??"2");je(I,{section:s,fieldKey:"equal_cols",label:"Column count",get default(){return r(W)},cssVar:"--sf-equal-cols",mono:!0})}E(j,L)},$$slots:{default:!0}}),E(e,n),Fe()}var Zc=C(' '),Jc=C(' '),Qc=C(' '),ed=C(' '),td=C(`Live preview
Typography
The quick brown fox jumps over the lazy dog
Body text uses --sf-color-text--secondary over the page
background. Headings, body, secondary and muted text each pull from
their own token so the hierarchy stays readable in both modes.
Muted caption · an inline link · auto-contrasting.
Surfaces
Brand & status
Buttons
Feedback
Card component
S Card Component
Design token preview
Active Radius, shadow, colours, surfaces, and typography working together —
- every value updates live as you adjust tokens.
Form field
Generated CSS: `);function Qc(e,t){ze(t,!0);const s=["primary","secondary","tertiary","action","neutral","base"],a=["success","warning","error","info","danger"],n=le.defaults?.colors??{},i=I=>`oklch(from var(${I}) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)`,o=I=>`oklch(from var(${I}) clamp(0.16, calc(1.18 - l), 0.24) calc(c * 0.5) h)`,u=I=>{const W=`--sf-color-${I}-light`;return I==="base"?o(W):i(W)};let c=he(!1);const v=y(()=>{const I=[],W=Q.colors??{},_e=Q.typography??{},Ae=Q.radius??{},Oe=Q.shadows??{},qe=Q.contrast??{},Ne=r(c)?"dark":"light",Bt=(()=>{const Se=qe.contrast_threshold,mt=parseFloat(Se!==void 0&&Se!==""?Se:le.defaults?.contrast?.contrast_threshold??.6);return Number.isFinite(mt)?mt:.6})(),At=(()=>{const Se=qe.contrast_bias,mt=parseFloat(Se!==void 0&&Se!==""?Se:le.defaults?.contrast?.contrast_bias??0);return Number.isFinite(mt)?mt:0})();for(const Se of s){const mt=W[`brand_${Se}`]??n.brand_hex_hints?.[Se];mt&&I.push(`--sf-color-${Se}-light:${mt}`);const qa=W.dark_overrides_enabled!=="0"?W[`brand_dark_${Se}`]:"";I.push(`--sf-color-${Se}-dark:${qa||u(Se)}`)}for(const Se of a){const mt=W[`status_${Se}`]??n.status_hex_hints?.[Se];mt&&I.push(`--sf-color-${Se}-light:${mt}`);const qa=W.dark_overrides_enabled!=="0"?W[`status_dark_${Se}`]:"";I.push(`--sf-color-${Se}-dark:${qa||u(Se)}`)}const qs=Se=>`oklch(from ${Se} clamp(0.1, sign(${Bt} - l) * 999, 0.95) 0 0)`;for(const Se of[...s,...a])I.push(`--c-${Se}:var(--sf-color-${Se}-${Ne})`),I.push(`--on-${Se}:${qs(`var(--c-${Se})`)}`);I.push("--c-surface:var(--c-base)"),I.push("--c-bg:oklch(from var(--c-base) calc(l + 0.02) c h)"),I.push("--c-raised:oklch(from var(--c-base) calc(l + 0.04) c h)"),I.push("--c-inset:oklch(from var(--c-base) calc(l - 0.02) c h)");const lt=Ne==="dark"?"var(--c-neutral)":"var(--sf-color-neutral-light)";Ne==="dark"?(I.push(`--c-text:oklch(from ${lt} clamp(0.70, calc(l + 0.25 + ${At}), 1) c h)`),I.push(`--c-text-secondary:oklch(from ${lt} clamp(0.55, calc(l + 0.1 + ${At}), 0.90) c h)`),I.push(`--c-border:oklch(from ${lt} clamp(0.25, calc(l - 0.3), 0.55) 0.005 h)`),I.push(`--c-border-subtle:oklch(from ${lt} clamp(0.20, calc(l - 0.38), 0.45) 0.005 h)`),I.push("--c-link:oklch(from var(--c-action) clamp(0.68, l, 1) c h)")):(I.push(`--c-text:oklch(from ${lt} clamp(0.05, calc(l - 0.4 - ${At}), 0.35) c h)`),I.push(`--c-text-secondary:oklch(from ${lt} clamp(0.15, calc(l - 0.25 - ${At}), 0.45) c h)`),I.push(`--c-border:oklch(from ${lt} clamp(0.70, calc(l + 0.35), 0.95) 0.005 h)`),I.push(`--c-border-subtle:oklch(from ${lt} clamp(0.75, calc(l + 0.4), 0.97) 0.005 h)`),I.push("--c-link:oklch(from var(--c-action) clamp(0, min(l - 0.07, 0.48), 1) c h)")),I.push("--c-text-muted:var(--c-neutral)");for(const Se of a)I.push(`--tint-${Se}:oklch(from var(--c-${Se}) l c h / 0.14)`);_e.font_body&&I.push(`--sf-font-body:${_e.font_body}`),_e.font_heading&&I.push(`--sf-font-heading:${_e.font_heading}`);const Ze=parseFloat(Ae.radius_scale??le.defaults?.radius?.radius_scale??1)||1;I.push(`--preview-radius-s:${Math.round(4*Ze)}px`),I.push(`--preview-radius-m:${Math.round(8*Ze)}px`),I.push(`--preview-radius-l:${Math.round(16*Ze)}px`);const Ct=Oe.shadow_strength,gs=parseFloat(Ct!==void 0&&Ct!==""?Ct:le.defaults?.shadows?.shadow_strength??.08);return I.push(`--preview-shadow:0 2px 8px 0 rgba(0,0,0,${(gs*2).toFixed(3)}),0 1px 3px 0 rgba(0,0,0,${gs.toFixed(3)})`),I.join(";")}),h=[{var:"--c-inset",label:"Inset"},{var:"--c-bg",label:"Background"},{var:"--c-surface",label:"Surface"},{var:"--c-raised",label:"Raised"}],f=y(()=>mr(Q));var p=Jc();let m;var b=l(p),x=d(l(b),2),_=l(x);let w;var E=d(_,2);let A;var F=d(b,2),Y=l(F),T=d(l(Y),6),z=d(l(T)),D=d(Y,2),O=d(l(D),2);de(O,21,()=>h,I=>I.var,(I,W)=>{var _e=Wc();let Ae;var Oe=l(_e),qe=l(Oe);V(()=>{Ae=fe(_e,"",Ae,{background:`var(${r(W).var})`}),P(qe,r(W).label)}),S(I,_e)});var K=d(D,2),q=d(l(K),2),B=l(q);de(B,16,()=>s,I=>I,(I,W)=>{var _e=Yc();let Ae;var Oe=l(_e);V(()=>{te(_e,"title",W),Ae=fe(_e,"",Ae,{background:`var(--c-${W})`,color:`var(--on-${W})`}),P(Oe,W)}),S(I,_e)});var $=d(B,2);de($,16,()=>a,I=>I,(I,W)=>{var _e=Xc();let Ae;var Oe=l(_e);V(()=>{te(_e,"title",W),Ae=fe(_e,"",Ae,{background:`var(--c-${W})`,color:`var(--on-${W})`}),P(Oe,W)}),S(I,_e)});var k=d(K,2),R=d(l(k),2),G=l(R);fe(G,"",{},{background:"var(--c-primary)",color:"var(--on-primary)"});var Z=d(G,2);fe(Z,"",{},{background:"var(--c-secondary)",color:"var(--on-secondary)"});var j=d(Z,2);fe(j,"",{},{background:"var(--c-action)",color:"var(--on-action)"});var N=d(j,2);fe(N,"",{},{"border-color":"var(--c-primary)",color:"var(--c-primary)"});var L=d(N,2);fe(L,"",{},{color:"var(--c-text-secondary)"});var H=d(L,2);fe(H,"",{},{background:"var(--c-neutral)",color:"var(--on-neutral)",opacity:"0.55"});var se=d(k,2),ne=d(l(se),2);de(ne,20,()=>a,I=>I,(I,W)=>{var _e=Zc();let Ae;var Oe=l(_e);let qe;var Ne=l(Oe),Bt=d(Oe,2),At=l(Bt);V(()=>{Ae=fe(_e,"",Ae,{background:`var(--tint-${W})`,"border-inline-start-color":`var(--c-${W})`}),qe=fe(Oe,"",qe,{background:`var(--c-${W})`,color:`var(--on-${W})`}),P(Ne,W),P(At,`${W??""} message — readable on its tint.`)}),S(I,_e)});var ae=d(se,2),ie=d(l(ae),2),U=l(ie);fe(U,"",{},{background:"var(--c-primary)"});var oe=d(U,2),be=l(oe),xe=l(be);fe(xe,"",{},{background:"var(--c-secondary)",color:"var(--on-secondary)"});var Te=d(xe,4);fe(Te,"",{},{background:"var(--c-success)",color:"var(--on-success)"});var Re=d(be,4),Pe=l(Re);fe(Pe,"",{},{background:"var(--c-info)",color:"var(--on-info)"});var M=d(Pe,2);fe(M,"",{},{background:"var(--c-warning)",color:"var(--on-warning)"});var X=d(M,2);fe(X,"",{},{background:"var(--c-action)",color:"var(--on-action)"});var ee=d(F,2),ke=d(l(ee)),ue=l(ke);V(()=>{m=Ie(p,1,"slashed-preview svelte-g79qke",null,m,{"is-dark":r(c)}),fe(p,r(v)),w=Ie(_,1,"slashed-preview__mode-btn svelte-g79qke",null,w,{active:!r(c)}),A=Ie(E,1,"slashed-preview__mode-btn svelte-g79qke",null,A,{active:r(c)}),P(ue,r(f)||"/* (defaults — no overrides set) */")}),ge("click",_,()=>J(c,!1)),ge("click",E,()=>J(c,!0)),ge("click",z,I=>I.preventDefault()),S(e,p),Fe()}He(["click"]);var ed=C(''),td=C(''),sd=C(''),ad=C(''),rd=C(''),nd=C(' ');function id(e,t){ze(t,!0);const s=["contrast","radius","shadows","motion","zindex"];async function a(){if(!re.saving){re.saving=!0,re.error="";try{if(re.activeTab==="misc"){const T=await Promise.allSettled(s.map(D=>Mr(D,Q[D]??{}))),z=[];if(T.forEach((D,O)=>{D.status==="fulfilled"?D.value?.values&&(Q[s[O]]=D.value.values):z.push(s[O])}),z.length>0)throw new Error(`Failed to save: ${z.join(", ")}`)}else{const T=re.activeTab,z=Q[T]??{},D=await Mr(T,z);D&&D.values&&(Q[T]=D.values)}re.dirty=!1,re.lastSavedAt=Date.now()}catch(T){re.error=T&&T.message||String(T)}finally{re.saving=!1}}}async function n(){if(!re.saving&&confirm(`Reset the ${le.tabs[re.activeTab]??re.activeTab} tab to defaults?`)){re.saving=!0,re.error="";try{if(re.activeTab==="misc"){const T=await Promise.allSettled(s.map(D=>Dr(D))),z=[];if(T.forEach((D,O)=>{D.status==="fulfilled"?Pr(s[O]):z.push(s[O])}),z.length>0)throw new Error(`Failed to reset: ${z.join(", ")}`)}else await Dr(re.activeTab),Pr(re.activeTab);re.dirty=!1,re.lastSavedAt=Date.now()}catch(T){re.error=T&&T.message||String(T)}finally{re.saving=!1}}}let i=he(!1);za(()=>{if(re.lastSavedAt){J(i,!0);const T=setTimeout(()=>J(i,!1),2e3);return()=>clearTimeout(T)}});const o=y(()=>dc(Q));function u(){const T=mr(Q);if(!T)return;const z=new Blob([T],{type:"text/css"}),D=URL.createObjectURL(z),O=document.createElement("a");O.href=D,O.download="slashed-custom.css",document.body.appendChild(O),O.click(),document.body.removeChild(O),URL.revokeObjectURL(D)}var c=nd();let v;var h=l(c),f=l(h);{var p=T=>{var z=ed(),D=l(z);V(()=>P(D,re.error)),S(T,z)},m=T=>{var z=td();S(T,z)},b=T=>{var z=sd();S(T,z)},x=T=>{var z=ad();S(T,z)},_=T=>{var z=rd();S(T,z)};me(f,T=>{re.error?T(p):re.saving?T(m,1):r(i)?T(b,2):re.dirty?T(x,3):T(_,-1)})}var w=d(h,2),E=l(w),A=d(E,2),F=d(A,2),Y=l(F);V(()=>{v=Ie(c,1,"bar svelte-1oj49qa",null,v,{dirty:re.dirty}),E.disabled=re.saving,A.disabled=!r(o),F.disabled=re.saving||!re.dirty,P(Y,re.saving?"Saving…":"Save changes")}),ge("click",E,n),ge("click",A,u),ge("click",F,a),S(e,c),Fe()}He(["click"]);var od=C(' '),ld=C(' '),cd=C('SLASHED Design Tokens
Adjust framework tokens, inspect generated variables, and manage the bundled CSS in one place.
');function dd(e,t){ze(t,!0);const s=["cheatsheet","hooks","variables","classes","bundle","export","wcag"];let a=y(()=>s.includes(re.activeTab));za(()=>{function k(R){re.dirty&&(R.preventDefault(),R.returnValue="")}return window.addEventListener("beforeunload",k),()=>window.removeEventListener("beforeunload",k)});var n=cd(),i=l(n),o=l(i),u=d(l(o),2),c=l(u);{var v=k=>{var R=od(),G=l(R);V(()=>P(G,`Framework ${le.versions.framework??""}`)),S(k,R)};me(c,k=>{le.versions.framework&&k(v)})}var h=d(c,2);{var f=k=>{var R=ld(),G=l(R);V(()=>P(G,`Plugin v${le.versions.plugin??""}`)),S(k,R)};me(h,k=>{le.versions.plugin&&k(f)})}var p=d(i,2);$o(p,{});var m=d(p,2),b=l(m);{var x=k=>{Lo(k,{})},_=k=>{_l(k,{})},w=k=>{kl(k,{})},E=k=>{Uc(k,{})},A=k=>{Pl(k,{})},F=k=>{Il(k,{})},Y=k=>{Hl(k,{})},T=k=>{ec(k,{})},z=k=>{hc(k,{})},D=k=>{bc(k,{})},O=k=>{Rc(k,{})},K=k=>{Nc(k,{})};me(b,k=>{re.activeTab==="colors"?k(x):re.activeTab==="typography"?k(_,1):re.activeTab==="spacing"?k(w,2):re.activeTab==="layouts"?k(E,3):re.activeTab==="misc"?k(A,4):re.activeTab==="variables"?k(F,5):re.activeTab==="classes"?k(Y,6):re.activeTab==="bundle"?k(T,7):re.activeTab==="export"?k(z,8):re.activeTab==="hooks"?k(D,9):re.activeTab==="cheatsheet"?k(O,10):re.activeTab==="wcag"&&k(K,11)})}var q=d(m,2);Qc(q,{});var B=d(q,2);{var $=k=>{id(k,{})};me(B,k=>{r(a)||k($)})}S(e,n),Fe()}const Vr=document.getElementById("slashed-admin-app");Vr&&lo(dd,{target:Vr});
+ every value updates live as you adjust tokens.
Form field
Generated CSS: `);function sd(e,t){ze(t,!0);const s=["primary","secondary","tertiary","action","neutral","base"],a=["success","warning","error","info","danger"],n=ie.defaults?.colors??{},i=I=>`oklch(from var(${I}) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)`,o=I=>`oklch(from var(${I}) clamp(0.16, calc(1.18 - l), 0.24) calc(c * 0.5) h)`,u=I=>{const W=`--sf-color-${I}-light`;return I==="base"?o(W):i(W)};let c=fe(!1);const v=y(()=>{const I=[],W=Q.colors??{},_e=Q.typography??{},Ae=Q.radius??{},Oe=Q.shadows??{},qe=Q.contrast??{},Ne=r(c)?"dark":"light",Bt=(()=>{const Se=qe.contrast_threshold,mt=parseFloat(Se!==void 0&&Se!==""?Se:ie.defaults?.contrast?.contrast_threshold??.6);return Number.isFinite(mt)?mt:.6})(),At=(()=>{const Se=qe.contrast_bias,mt=parseFloat(Se!==void 0&&Se!==""?Se:ie.defaults?.contrast?.contrast_bias??0);return Number.isFinite(mt)?mt:0})();for(const Se of s){const mt=W[`brand_${Se}`]??n.brand_hex_hints?.[Se];mt&&I.push(`--sf-color-${Se}-light:${mt}`);const qa=W.dark_overrides_enabled!=="0"?W[`brand_dark_${Se}`]:"";I.push(`--sf-color-${Se}-dark:${qa||u(Se)}`)}for(const Se of a){const mt=W[`status_${Se}`]??n.status_hex_hints?.[Se];mt&&I.push(`--sf-color-${Se}-light:${mt}`);const qa=W.dark_overrides_enabled!=="0"?W[`status_dark_${Se}`]:"";I.push(`--sf-color-${Se}-dark:${qa||u(Se)}`)}const Ms=Se=>`oklch(from ${Se} clamp(0.1, sign(${Bt} - l) * 999, 0.95) 0 0)`;for(const Se of[...s,...a])I.push(`--c-${Se}:var(--sf-color-${Se}-${Ne})`),I.push(`--on-${Se}:${Ms(`var(--c-${Se})`)}`);I.push("--c-surface:var(--c-base)"),I.push("--c-bg:oklch(from var(--c-base) calc(l + 0.02) c h)"),I.push("--c-raised:oklch(from var(--c-base) calc(l + 0.04) c h)"),I.push("--c-inset:oklch(from var(--c-base) calc(l - 0.02) c h)");const lt=Ne==="dark"?"var(--c-neutral)":"var(--sf-color-neutral-light)";Ne==="dark"?(I.push(`--c-text:oklch(from ${lt} clamp(0.70, calc(l + 0.25 + ${At}), 1) c h)`),I.push(`--c-text-secondary:oklch(from ${lt} clamp(0.55, calc(l + 0.1 + ${At}), 0.90) c h)`),I.push(`--c-border:oklch(from ${lt} clamp(0.25, calc(l - 0.3), 0.55) 0.005 h)`),I.push(`--c-border-subtle:oklch(from ${lt} clamp(0.20, calc(l - 0.38), 0.45) 0.005 h)`),I.push("--c-link:oklch(from var(--c-action) clamp(0.68, l, 1) c h)")):(I.push(`--c-text:oklch(from ${lt} clamp(0.05, calc(l - 0.4 - ${At}), 0.35) c h)`),I.push(`--c-text-secondary:oklch(from ${lt} clamp(0.15, calc(l - 0.25 - ${At}), 0.45) c h)`),I.push(`--c-border:oklch(from ${lt} clamp(0.70, calc(l + 0.35), 0.95) 0.005 h)`),I.push(`--c-border-subtle:oklch(from ${lt} clamp(0.75, calc(l + 0.4), 0.97) 0.005 h)`),I.push("--c-link:oklch(from var(--c-action) clamp(0, min(l - 0.07, 0.48), 1) c h)")),I.push("--c-text-muted:var(--c-neutral)");for(const Se of a)I.push(`--tint-${Se}:oklch(from var(--c-${Se}) l c h / 0.14)`);_e.font_body&&I.push(`--sf-font-body:${_e.font_body}`),_e.font_heading&&I.push(`--sf-font-heading:${_e.font_heading}`);const Ze=parseFloat(Ae.radius_scale??ie.defaults?.radius?.radius_scale??1)||1;I.push(`--preview-radius-s:${Math.round(4*Ze)}px`),I.push(`--preview-radius-m:${Math.round(8*Ze)}px`),I.push(`--preview-radius-l:${Math.round(16*Ze)}px`);const Ct=Oe.shadow_strength,gs=parseFloat(Ct!==void 0&&Ct!==""?Ct:ie.defaults?.shadows?.shadow_strength??.08);return I.push(`--preview-shadow:0 2px 8px 0 rgba(0,0,0,${(gs*2).toFixed(3)}),0 1px 3px 0 rgba(0,0,0,${gs.toFixed(3)})`),I.join(";")}),h=[{var:"--c-inset",label:"Inset"},{var:"--c-bg",label:"Background"},{var:"--c-surface",label:"Surface"},{var:"--c-raised",label:"Raised"}],f=y(()=>mr(Q));var p=td();let m;var b=l(p),x=d(l(b),2),_=l(x);let w;var S=d(_,2);let A;var F=d(b,2),Y=l(F),T=d(l(Y),6),z=d(l(T)),D=d(Y,2),O=d(l(D),2);de(O,21,()=>h,I=>I.var,(I,W)=>{var _e=Zc();let Ae;var Oe=l(_e),qe=l(Oe);V(()=>{Ae=pe(_e,"",Ae,{background:`var(${r(W).var})`}),R(qe,r(W).label)}),E(I,_e)});var K=d(D,2),q=d(l(K),2),B=l(q);de(B,16,()=>s,I=>I,(I,W)=>{var _e=Jc();let Ae;var Oe=l(_e);V(()=>{te(_e,"title",W),Ae=pe(_e,"",Ae,{background:`var(--c-${W})`,color:`var(--on-${W})`}),R(Oe,W)}),E(I,_e)});var $=d(B,2);de($,16,()=>a,I=>I,(I,W)=>{var _e=Qc();let Ae;var Oe=l(_e);V(()=>{te(_e,"title",W),Ae=pe(_e,"",Ae,{background:`var(--c-${W})`,color:`var(--on-${W})`}),R(Oe,W)}),E(I,_e)});var k=d(K,2),P=d(l(k),2),G=l(P);pe(G,"",{},{background:"var(--c-primary)",color:"var(--on-primary)"});var Z=d(G,2);pe(Z,"",{},{background:"var(--c-secondary)",color:"var(--on-secondary)"});var j=d(Z,2);pe(j,"",{},{background:"var(--c-action)",color:"var(--on-action)"});var N=d(j,2);pe(N,"",{},{"border-color":"var(--c-primary)",color:"var(--c-primary)"});var L=d(N,2);pe(L,"",{},{color:"var(--c-text-secondary)"});var H=d(L,2);pe(H,"",{},{background:"var(--c-neutral)",color:"var(--on-neutral)",opacity:"0.55"});var se=d(k,2),ne=d(l(se),2);de(ne,20,()=>a,I=>I,(I,W)=>{var _e=ed();let Ae;var Oe=l(_e);let qe;var Ne=l(Oe),Bt=d(Oe,2),At=l(Bt);V(()=>{Ae=pe(_e,"",Ae,{background:`var(--tint-${W})`,"border-inline-start-color":`var(--c-${W})`}),qe=pe(Oe,"",qe,{background:`var(--c-${W})`,color:`var(--on-${W})`}),R(Ne,W),R(At,`${W??""} message — readable on its tint.`)}),E(I,_e)});var ae=d(se,2),oe=d(l(ae),2),U=l(oe);pe(U,"",{},{background:"var(--c-primary)"});var le=d(U,2),be=l(le),xe=l(be);pe(xe,"",{},{background:"var(--c-secondary)",color:"var(--on-secondary)"});var Te=d(xe,4);pe(Te,"",{},{background:"var(--c-success)",color:"var(--on-success)"});var Pe=d(be,4),Re=l(Pe);pe(Re,"",{},{background:"var(--c-info)",color:"var(--on-info)"});var M=d(Re,2);pe(M,"",{},{background:"var(--c-warning)",color:"var(--on-warning)"});var X=d(M,2);pe(X,"",{},{background:"var(--c-action)",color:"var(--on-action)"});var ee=d(F,2),ke=d(l(ee)),ue=l(ke);V(()=>{m=Ie(p,1,"slashed-preview svelte-g79qke",null,m,{"is-dark":r(c)}),pe(p,r(v)),w=Ie(_,1,"slashed-preview__mode-btn svelte-g79qke",null,w,{active:!r(c)}),A=Ie(S,1,"slashed-preview__mode-btn svelte-g79qke",null,A,{active:r(c)}),R(ue,r(f)||"/* (defaults — no overrides set) */")}),ge("click",_,()=>J(c,!1)),ge("click",S,()=>J(c,!0)),ge("click",z,I=>I.preventDefault()),E(e,p),Fe()}He(["click"]);var ad=C(''),rd=C(''),nd=C(''),id=C(''),od=C(''),ld=C(' ');function cd(e,t){ze(t,!0);const s=["contrast","radius","shadows","motion","zindex"];async function a(){if(!re.saving){re.saving=!0,re.error="";try{if(re.activeTab==="misc"){const T=await Promise.allSettled(s.map(D=>qr(D,Q[D]??{}))),z=[];if(T.forEach((D,O)=>{D.status==="fulfilled"?D.value?.values&&(Q[s[O]]=D.value.values):z.push(s[O])}),z.length>0)throw new Error(`Failed to save: ${z.join(", ")}`)}else{const T=re.activeTab,z=Q[T]??{},D=await qr(T,z);D&&D.values&&(Q[T]=D.values)}re.dirty=!1,re.lastSavedAt=Date.now()}catch(T){re.error=T&&T.message||String(T)}finally{re.saving=!1}}}async function n(){if(!re.saving&&confirm(`Reset the ${ie.tabs[re.activeTab]??re.activeTab} tab to defaults?`)){re.saving=!0,re.error="";try{if(re.activeTab==="misc"){const T=await Promise.allSettled(s.map(D=>Mr(D))),z=[];if(T.forEach((D,O)=>{D.status==="fulfilled"?Rr(s[O]):z.push(s[O])}),z.length>0)throw new Error(`Failed to reset: ${z.join(", ")}`)}else await Mr(re.activeTab),Rr(re.activeTab);re.dirty=!1,re.lastSavedAt=Date.now()}catch(T){re.error=T&&T.message||String(T)}finally{re.saving=!1}}}let i=fe(!1);sa(()=>{if(re.lastSavedAt){J(i,!0);const T=setTimeout(()=>J(i,!1),2e3);return()=>clearTimeout(T)}});const o=y(()=>fc(Q));function u(){const T=mr(Q);if(!T)return;const z=new Blob([T],{type:"text/css"}),D=URL.createObjectURL(z),O=document.createElement("a");O.href=D,O.download="slashed-custom.css",document.body.appendChild(O),O.click(),document.body.removeChild(O),URL.revokeObjectURL(D)}var c=ld();let v;var h=l(c),f=l(h);{var p=T=>{var z=ad(),D=l(z);V(()=>R(D,re.error)),E(T,z)},m=T=>{var z=rd();E(T,z)},b=T=>{var z=nd();E(T,z)},x=T=>{var z=id();E(T,z)},_=T=>{var z=od();E(T,z)};me(f,T=>{re.error?T(p):re.saving?T(m,1):r(i)?T(b,2):re.dirty?T(x,3):T(_,-1)})}var w=d(h,2),S=l(w),A=d(S,2),F=d(A,2),Y=l(F);V(()=>{v=Ie(c,1,"bar svelte-1oj49qa",null,v,{dirty:re.dirty}),S.disabled=re.saving,A.disabled=!r(o),F.disabled=re.saving||!re.dirty,R(Y,re.saving?"Saving…":"Save changes")}),ge("click",S,n),ge("click",A,u),ge("click",F,a),E(e,c),Fe()}He(["click"]);var dd=C(' '),ud=C(' '),vd=C('SLASHED Design Tokens
Adjust framework tokens, inspect generated variables, and manage the bundled CSS in one place.
');function fd(e,t){ze(t,!0);const s=["cheatsheet","hooks","variables","classes","bundle","export","wcag"];let a=y(()=>s.includes(re.activeTab));sa(()=>{function k(P){re.dirty&&(P.preventDefault(),P.returnValue="")}return window.addEventListener("beforeunload",k),()=>window.removeEventListener("beforeunload",k)});var n=vd(),i=l(n),o=l(i),u=d(l(o),2),c=l(u);{var v=k=>{var P=dd(),G=l(P);V(()=>R(G,`Framework ${ie.versions.framework??""}`)),E(k,P)};me(c,k=>{ie.versions.framework&&k(v)})}var h=d(c,2);{var f=k=>{var P=ud(),G=l(P);V(()=>R(G,`Plugin v${ie.versions.plugin??""}`)),E(k,P)};me(h,k=>{ie.versions.plugin&&k(f)})}var p=d(i,2);jo(p,{});var m=d(p,2),b=l(m);{var x=k=>{Vo(k,{})},_=k=>{xl(k,{})},w=k=>{Tl(k,{})},S=k=>{Xc(k,{})},A=k=>{Vl(k,{})},F=k=>{Hl(k,{})},Y=k=>{Zl(k,{})},T=k=>{ac(k,{})},z=k=>{mc(k,{})},D=k=>{xc(k,{})},O=k=>{Mc(k,{})},K=k=>{Uc(k,{})};me(b,k=>{re.activeTab==="colors"?k(x):re.activeTab==="typography"?k(_,1):re.activeTab==="spacing"?k(w,2):re.activeTab==="layouts"?k(S,3):re.activeTab==="misc"?k(A,4):re.activeTab==="variables"?k(F,5):re.activeTab==="classes"?k(Y,6):re.activeTab==="bundle"?k(T,7):re.activeTab==="export"?k(z,8):re.activeTab==="hooks"?k(D,9):re.activeTab==="cheatsheet"?k(O,10):re.activeTab==="wcag"&&k(K,11)})}var q=d(m,2);sd(q,{});var B=d(q,2);{var $=k=>{cd(k,{})};me(B,k=>{r(a)||k($)})}E(e,n),Fe()}const Vr=document.getElementById("slashed-admin-app");Vr&&co(fd,{target:Vr});
//# sourceMappingURL=app.js.map
From 97ae18d9327e94b9844f053a9d9875d8bff93f19 Mon Sep 17 00:00:00 2001
From: Claude
Date: Fri, 5 Jun 2026 11:34:27 +0000
Subject: [PATCH 3/3] Address CodeRabbit review: source re-inference + array
coercion
- Re-run detectSource after the live font refresh so a font that only
appears in the updated list isn't left stuck on 'manual'.
- Coerce fetchBricksFonts return to Array.isArray guards at both the
dev-harness and live REST paths.
https://claude.ai/code/session_012RcH93KjHBJ7ABJJ1yvyrS
---
.../src/components/FontFamilyField.svelte | 6 +++++
.../bricks/admin-app/src/lib/api.js | 4 ++--
.../bricks/assets/admin-app/app.js | 24 +++++++++----------
3 files changed, 20 insertions(+), 14 deletions(-)
diff --git a/plugins/SLASHED-for-WP/integrations/bricks/admin-app/src/components/FontFamilyField.svelte b/plugins/SLASHED-for-WP/integrations/bricks/admin-app/src/components/FontFamilyField.svelte
index 6b15f4d7..01bca119 100644
--- a/plugins/SLASHED-for-WP/integrations/bricks/admin-app/src/components/FontFamilyField.svelte
+++ b/plugins/SLASHED-for-WP/integrations/bricks/admin-app/src/components/FontFamilyField.svelte
@@ -59,9 +59,15 @@
const bricksEnabled = meta.activeIntegrations?.bricks ?? true;
onMount(async () => {
+ const initialSource = source;
try {
const fresh = await fetchBricksFonts();
bricksFonts = fresh;
+ // Re-infer source: a font present only in the live list would have
+ // been misclassified as 'manual' at init time.
+ if (source === initialSource && initialSource === 'manual' && detectSource(effectiveValue) === 'bricks') {
+ source = 'bricks';
+ }
} catch {
// Keep bootstrap data if the fetch fails.
}
diff --git a/plugins/SLASHED-for-WP/integrations/bricks/admin-app/src/lib/api.js b/plugins/SLASHED-for-WP/integrations/bricks/admin-app/src/lib/api.js
index 9d85f432..02991ace 100644
--- a/plugins/SLASHED-for-WP/integrations/bricks/admin-app/src/lib/api.js
+++ b/plugins/SLASHED-for-WP/integrations/bricks/admin-app/src/lib/api.js
@@ -87,7 +87,7 @@ export async function fetchBricksFonts() {
const { url, nonce } = meta.rest;
if (!url) {
console.info('[slashed-admin] (dev) would GET /bricks-fonts');
- return meta.bricksFonts;
+ return Array.isArray(meta.bricksFonts) ? meta.bricksFonts : [];
}
const res = await fetch(url + '/bricks-fonts', {
credentials: 'same-origin',
@@ -95,7 +95,7 @@ export async function fetchBricksFonts() {
});
if (!res.ok) throw new Error(await res.text() || `HTTP ${res.status}`);
const data = await res.json();
- return data.fonts ?? [];
+ return Array.isArray(data?.fonts) ? data.fonts : [];
}
/**
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 53986899..45cde70a 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
@@ -1,24 +1,24 @@
-var Dn=Object.defineProperty;var br=e=>{throw TypeError(e)};var Ln=(e,t,s)=>t in e?Dn(e,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[t]=s;var Je=(e,t,s)=>Ln(e,typeof t!="symbol"?t+"":t,s),Ma=(e,t,s)=>t.has(e)||br("Cannot "+s);var g=(e,t,s)=>(Ma(e,t,"read from private field"),s?s.call(e):t.get(e)),ve=(e,t,s)=>t.has(e)?br("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,s),ce=(e,t,s,a)=>(Ma(e,t,"write to private field"),a?a.call(e,s):t.set(e,s),s),Ee=(e,t,s)=>(Ma(e,t,"access private method"),s);var ir=Array.isArray,In=Array.prototype.indexOf,is=Array.prototype.includes,Ta=Array.from,Vn=Object.defineProperty,xs=Object.getOwnPropertyDescriptor,On=Object.getOwnPropertyDescriptors,Kn=Object.prototype,Bn=Array.prototype,Kr=Object.getPrototypeOf,yr=Object.isExtensible;const Br=()=>{};function Nn(e){for(var t=0;t{e=a,t=n});return{promise:s,resolve:e,reject:t}}function wt(e,t){if(Array.isArray(e))return e;if(t===void 0||!(Symbol.iterator in e))return Array.from(e);const s=[];for(const a of e)if(s.push(a),s.length===t)break;return s}const We=2,js=4,ja=8,Hr=1<<24,xt=16,Et=32,Xt=64,Na=128,pt=512,Be=1024,Ue=2048,Ft=4096,Xe=8192,ht=16384,_s=32768,Ha=1<<25,vs=65536,ga=1<<17,Hn=1<<18,Rs=1<<19,Gn=1<<20,zt=1<<25,fs=65536,ma=1<<21,ks=1<<22,Yt=1<<23,os=Symbol("$state"),Un=Symbol("legacy props"),Wn=Symbol(""),da=Symbol("attributes"),Ga=Symbol("class"),Ua=Symbol("style"),Is=Symbol("text"),ua=Symbol("form reset"),za=new class extends Error{constructor(){super(...arguments);Je(this,"name","StaleReactionError");Je(this,"message","The reaction that called `getAbortSignal()` was re-run or destroyed")}},Yn=!!globalThis.document?.contentType&&globalThis.document.contentType.includes("xml");function Xn(e){throw new Error("https://svelte.dev/e/lifecycle_outside_component")}function Zn(){throw new Error("https://svelte.dev/e/async_derived_orphan")}function Jn(e,t,s){throw new Error("https://svelte.dev/e/each_key_duplicate")}function Qn(e){throw new Error("https://svelte.dev/e/effect_in_teardown")}function ei(){throw new Error("https://svelte.dev/e/effect_in_unowned_derived")}function ti(e){throw new Error("https://svelte.dev/e/effect_orphan")}function si(){throw new Error("https://svelte.dev/e/effect_update_depth_exceeded")}function ai(e){throw new Error("https://svelte.dev/e/props_invalid_value")}function ri(){throw new Error("https://svelte.dev/e/state_descriptors_fixed")}function ni(){throw new Error("https://svelte.dev/e/state_prototype_fixed")}function ii(){throw new Error("https://svelte.dev/e/state_unsafe_mutation")}function oi(){throw new Error("https://svelte.dev/e/svelte_boundary_reset_onerror")}const li=1,ci=2,Gr=4,di=8,ui=16,vi=1,fi=4,pi=8,hi=16,_i=1,gi=2,Ke=Symbol("uninitialized"),Ur="http://www.w3.org/1999/xhtml";function mi(){console.warn("https://svelte.dev/e/derived_inert")}function bi(){console.warn("https://svelte.dev/e/select_multiple_invalid_value")}function yi(){console.warn("https://svelte.dev/e/svelte_boundary_reset_noop")}function Wr(e){return e===this.v}function wi(e,t){return e!=e?t==t:e!==t||e!==null&&typeof e=="object"||typeof e=="function"}function Yr(e){return!wi(e,this.v)}let st=null;function zs(e){st=e}function ze(e,t=!1,s){st={p:st,i:!1,c:null,e:null,s:e,x:null,r:we,l:null}}function Fe(e){var t=st,s=t.e;if(s!==null){t.e=null;for(var a of s)mn(a)}return t.i=!0,st=t.p,{}}function Xr(){return!0}let Zt=[];function Zr(){var e=Zt;Zt=[],Nn(e)}function ls(e){if(Zt.length===0&&!Ks){var t=Zt;queueMicrotask(()=>{t===Zt&&Zr()})}Zt.push(e)}function xi(){for(;Zt.length>0;)Zr()}function Jr(e){var t=we;if(t===null)return ye.f|=Yt,e;if((t.f&_s)===0&&(t.f&js)===0)throw e;Wt(e,t)}function Wt(e,t){for(;t!==null;){if((t.f&Na)!==0){if((t.f&_s)===0)throw e;try{t.b.error(e);return}catch(s){e=s}}t=t.parent}throw e}const ki=-7169;function Me(e,t){e.f=e.f&ki|t}function or(e){(e.f&pt)!==0||e.deps===null?Me(e,Be):Me(e,Ft)}function Qr(e){if(e!==null)for(const t of e)(t.f&We)===0||(t.f&fs)===0||(t.f^=fs,Qr(t.deps))}function en(e,t,s){(e.f&Ue)!==0?t.add(e):(e.f&Ft)!==0&&s.add(e),Qr(e.deps),Me(e,Be)}let ia=!1;function Si(e){var t=ia;try{return ia=!1,[e(),ia]}finally{ia=t}}let Da=null,ms=null,he=null,Wa=null,kt=null,Ya=null,Ks=!1,La=!1,ws=null,va=null;var wr=0;let Ei=1;var Ss,Ht,es,Es,As,ts,Cs,Mt,Ys,rt,Xs,Gt,$t,Tt,$s,ss,Ce,Xa,Vs,Za,tn,sn,fa,Ai,Ja,ys;const Aa=class Aa{constructor(){ve(this,Ce);Je(this,"id",Ei++);ve(this,Ss,!1);Je(this,"linked",!0);ve(this,Ht,null);ve(this,es,null);Je(this,"async_deriveds",new Map);Je(this,"current",new Map);Je(this,"previous",new Map);Je(this,"unblocked",new Set);ve(this,Es,new Set);ve(this,As,new Set);ve(this,ts,new Set);ve(this,Cs,0);ve(this,Mt,new Map);ve(this,Ys,null);ve(this,rt,[]);ve(this,Xs,[]);ve(this,Gt,new Set);ve(this,$t,new Set);ve(this,Tt,new Map);ve(this,$s,new Set);Je(this,"is_fork",!1);ve(this,ss,!1)}skip_effect(t){g(this,Tt).has(t)||g(this,Tt).set(t,{d:[],m:[]}),g(this,$s).delete(t)}unskip_effect(t,s=a=>this.schedule(a)){var a=g(this,Tt).get(t);if(a){g(this,Tt).delete(t);for(var n of a.d)Me(n,Ue),s(n);for(n of a.m)Me(n,Ft),s(n)}g(this,$s).add(t)}capture(t,s,a=!1){t.v!==Ke&&!this.previous.has(t)&&this.previous.set(t,t.v),(t.f&Yt)===0&&(this.current.set(t,[s,a]),kt?.set(t,s)),this.is_fork||(t.v=s)}activate(){he=this}deactivate(){he=null,kt=null}flush(){try{La=!0,he=this,Ee(this,Ce,Vs).call(this)}finally{wr=0,Ya=null,ws=null,va=null,La=!1,he=null,kt=null,cs.clear()}}discard(){for(const t of g(this,As))t(this);g(this,As).clear(),g(this,ts).clear(),Ee(this,Ce,ys).call(this)}register_created_effect(t){g(this,Xs).push(t)}increment(t,s){if(ce(this,Cs,g(this,Cs)+1),t){let a=g(this,Mt).get(s)??0;g(this,Mt).set(s,a+1)}}decrement(t,s){if(ce(this,Cs,g(this,Cs)-1),t){let a=g(this,Mt).get(s)??0;a===1?g(this,Mt).delete(s):g(this,Mt).set(s,a-1)}g(this,ss)||(ce(this,ss,!0),ls(()=>{ce(this,ss,!1),this.linked&&this.flush()}))}transfer_effects(t,s){for(const a of t)g(this,Gt).add(a);for(const a of s)g(this,$t).add(a);t.clear(),s.clear()}oncommit(t){g(this,Es).add(t)}ondiscard(t){g(this,As).add(t)}on_fork_commit(t){g(this,ts).add(t)}run_fork_commit_callbacks(){for(const t of g(this,ts))t(this);g(this,ts).clear()}settled(){return(g(this,Ys)??ce(this,Ys,Nr())).promise}static ensure(){var t;if(he===null){const s=he=new Aa;Ee(t=s,Ce,Ja).call(t),!La&&!Ks&&ls(()=>{g(s,Ss)||s.flush()})}return he}apply(){{kt=null;return}}schedule(t){if(Ya=t,t.b?.is_pending&&(t.f&(js|ja|Hr))!==0&&(t.f&_s)===0){t.b.defer_effect(t);return}for(var s=t;s.parent!==null;){s=s.parent;var a=s.f;if(ws!==null&&s===we&&(ye===null||(ye.f&We)===0))return;if((a&(Xt|Et))!==0){if((a&Be)===0)return;s.f^=Be}}g(this,rt).push(s)}};Ss=new WeakMap,Ht=new WeakMap,es=new WeakMap,Es=new WeakMap,As=new WeakMap,ts=new WeakMap,Cs=new WeakMap,Mt=new WeakMap,Ys=new WeakMap,rt=new WeakMap,Xs=new WeakMap,Gt=new WeakMap,$t=new WeakMap,Tt=new WeakMap,$s=new WeakMap,ss=new WeakMap,Ce=new WeakSet,Xa=function(){if(this.is_fork)return!0;for(const a of g(this,Mt).keys()){for(var t=a,s=!1;t.parent!==null;){if(g(this,Tt).has(t)){s=!0;break}t=t.parent}if(!s)return!0}return!1},Vs=function(){var c,v,h;if(ce(this,Ss,!0),wr++>1e3&&(Ee(this,Ce,ys).call(this),$i()),!Ee(this,Ce,Xa).call(this)){for(const f of g(this,Gt))g(this,$t).delete(f),Me(f,Ue),this.schedule(f);for(const f of g(this,$t))Me(f,Ft),this.schedule(f)}const t=g(this,rt);ce(this,rt,[]),this.apply();var s=ws=[],a=[],n=va=[];for(const f of t)try{Ee(this,Ce,Za).call(this,f,s,a)}catch(p){throw nn(f),p}if(he=null,n.length>0){var i=Aa.ensure();for(const f of n)i.schedule(f)}if(ws=null,va=null,Ee(this,Ce,Xa).call(this)){Ee(this,Ce,fa).call(this,a),Ee(this,Ce,fa).call(this,s);for(const[f,p]of g(this,Tt))rn(f,p);n.length>0&&Ee(c=he,Ce,Vs).call(c);return}const o=Ee(this,Ce,tn).call(this);if(o){Ee(v=o,Ce,sn).call(v,this);return}g(this,Gt).clear(),g(this,$t).clear();for(const f of g(this,Es))f(this);g(this,Es).clear(),Wa=this,xr(a),xr(s),Wa=null,g(this,Ys)?.resolve();var u=he;if(this.linked&&g(this,Cs)===0&&Ee(this,Ce,ys).call(this),g(this,rt).length>0){u===null&&(u=this,Ee(this,Ce,Ja).call(this));const f=u;g(f,rt).push(...g(this,rt).filter(p=>!g(f,rt).includes(p)))}u!==null&&Ee(h=u,Ce,Vs).call(h)},Za=function(t,s,a){t.f^=Be;for(var n=t.first;n!==null;){var i=n.f,o=(i&(Et|Xt))!==0,u=o&&(i&Be)!==0,c=u||(i&Xe)!==0||g(this,Tt).has(n);if(!c&&n.fn!==null){o?n.f^=Be:(i&js)!==0?s.push(n):aa(n)&&((i&xt)!==0&&g(this,$t).add(n),Ps(n));var v=n.first;if(v!==null){n=v;continue}}for(;n!==null;){var h=n.next;if(h!==null){n=h;break}n=n.parent}}},tn=function(){for(var t=g(this,Ht);t!==null;){if(!t.is_fork){for(const[s,[,a]]of this.current)if(t.current.has(s)&&!a)return t}t=g(t,Ht)}return null},sn=function(t){var a;for(const[n,i]of t.current)!this.previous.has(n)&&t.previous.has(n)&&this.previous.set(n,t.previous.get(n)),this.current.set(n,i);for(const[n,i]of t.async_deriveds){const o=this.async_deriveds.get(n);o&&i.promise.then(o.resolve)}const s=n=>{var i=n.reactions;if(i!==null)for(const c of i){var o=c.f;if((o&We)!==0)s(c);else{var u=c;o&(ks|xt)&&!this.async_deriveds.has(u)&&(g(this,$t).delete(u),Me(u,Ue),this.schedule(u))}}};for(const n of this.current.keys())s(n);this.oncommit(()=>t.discard()),Ee(a=t,Ce,ys).call(a),he=this,Ee(this,Ce,Vs).call(this)},fa=function(t){for(var s=0;s!this.current.has(p));if(n.length===0)t&&f.discard();else if(s.length>0){if(t)for(const p of g(this,$s))f.unskip_effect(p,m=>{var b;(m.f&(xt|ks))!==0?f.schedule(m):Ee(b=f,Ce,fa).call(b,[m])});f.activate();var i=new Set,o=new Map;for(var u of s)an(u,n,i,o);o=new Map;var c=[...f.current.keys()].filter(p=>this.current.has(p)?this.current.get(p)[0]!==p.v:!0);if(c.length>0)for(const p of g(this,Xs))(p.f&(ht|Xe|ga))===0&&lr(p,c,o)&&((p.f&(ks|xt))!==0?(Me(p,Ue),f.schedule(p)):g(f,Gt).add(p));if(g(f,rt).length>0&&!g(f,ss)){f.apply();for(var v of g(f,rt))Ee(h=f,Ce,Za).call(h,v,[],[]);ce(f,rt,[])}f.deactivate()}}}},Ja=function(){ms===null?Da=ms=this:(ce(ms,es,this),ce(this,Ht,ms)),ms=this},ys=function(){var t=g(this,Ht),s=g(this,es);t===null?Da=s:ce(t,es,s),s===null?ms=t:ce(s,Ht,t),this.linked=!1};let ps=Aa;function Ci(e){var t=Ks;Ks=!0;try{for(var s;;){if(xi(),he===null)return s;he.flush()}}finally{Ks=t}}function $i(){try{si()}catch(e){Wt(e,Ya)}}let qt=null;function xr(e){var t=e.length;if(t!==0){for(var s=0;s0)){cs.clear();for(const n of qt){if((n.f&(ht|Xe))!==0)continue;const i=[n];let o=n.parent;for(;o!==null;)qt.has(o)&&(qt.delete(o),i.push(o)),o=o.parent;for(let u=i.length-1;u>=0;u--){const c=i[u];(c.f&(ht|Xe))===0&&Ps(c)}}qt.clear()}}qt=null}}function an(e,t,s,a){if(!s.has(e)&&(s.add(e),e.reactions!==null))for(const n of e.reactions){const i=n.f;(i&We)!==0?an(n,t,s,a):(i&(ks|xt))!==0&&(i&Ue)===0&&lr(n,t,a)&&(Me(n,Ue),cr(n))}}function lr(e,t,s){const a=s.get(e);if(a!==void 0)return a;if(e.deps!==null)for(const n of e.deps){if(is.call(t,n))return!0;if((n.f&We)!==0&&lr(n,t,s))return s.set(n,!0),!0}return s.set(e,!1),!1}function cr(e){he.schedule(e)}function rn(e,t){if(!((e.f&Et)!==0&&(e.f&Be)!==0)){(e.f&Ue)!==0?t.d.push(e):(e.f&Ft)!==0&&t.m.push(e),Me(e,Be);for(var s=e.first;s!==null;)rn(s,t),s=s.next}}function nn(e){Me(e,Be);for(var t=e.first;t!==null;)nn(t),t=t.next}function Ti(e){let t=0,s=hs(0),a;return()=>{fr()&&(r(s),Fa(()=>(t===0&&(a=qs(()=>e(()=>Bs(s)))),t+=1,()=>{ls(()=>{t-=1,t===0&&(a?.(),a=void 0,Bs(s))})})))}}var ji=vs|Rs;function zi(e,t,s,a){new Fi(e,t,s,a)}var dt,nr,ut,as,Qe,vt,Ye,nt,Dt,rs,Ut,Ts,Zs,Js,Lt,Ca,Le,Pi,Ri,qi,Qa,pa,ha,er,tr;class Fi{constructor(t,s,a,n){ve(this,Le);Je(this,"parent");Je(this,"is_pending",!1);Je(this,"transform_error");ve(this,dt);ve(this,nr,null);ve(this,ut);ve(this,as);ve(this,Qe);ve(this,vt,null);ve(this,Ye,null);ve(this,nt,null);ve(this,Dt,null);ve(this,rs,0);ve(this,Ut,0);ve(this,Ts,!1);ve(this,Zs,new Set);ve(this,Js,new Set);ve(this,Lt,null);ve(this,Ca,Ti(()=>(ce(this,Lt,hs(g(this,rs))),()=>{ce(this,Lt,null)})));ce(this,dt,t),ce(this,ut,s),ce(this,as,i=>{var o=we;o.b=this,o.f|=Na,a(i)}),this.parent=we.b,this.transform_error=n??this.parent?.transform_error??(i=>i),ce(this,Qe,Pa(()=>{Ee(this,Le,Qa).call(this)},ji))}defer_effect(t){en(t,g(this,Zs),g(this,Js))}is_rendered(){return!this.is_pending&&(!this.parent||this.parent.is_rendered())}has_pending_snippet(){return!!g(this,ut).pending}update_pending_count(t,s){Ee(this,Le,er).call(this,t,s),ce(this,rs,g(this,rs)+t),!(!g(this,Lt)||g(this,Ts))&&(ce(this,Ts,!0),ls(()=>{ce(this,Ts,!1),g(this,Lt)&&Fs(g(this,Lt),g(this,rs))}))}get_effect_pending(){return g(this,Ca).call(this),r(g(this,Lt))}error(t){if(!g(this,ut).onerror&&!g(this,ut).failed)throw t;he?.is_fork?(g(this,vt)&&he.skip_effect(g(this,vt)),g(this,Ye)&&he.skip_effect(g(this,Ye)),g(this,nt)&&he.skip_effect(g(this,nt)),he.on_fork_commit(()=>{Ee(this,Le,tr).call(this,t)})):Ee(this,Le,tr).call(this,t)}}dt=new WeakMap,nr=new WeakMap,ut=new WeakMap,as=new WeakMap,Qe=new WeakMap,vt=new WeakMap,Ye=new WeakMap,nt=new WeakMap,Dt=new WeakMap,rs=new WeakMap,Ut=new WeakMap,Ts=new WeakMap,Zs=new WeakMap,Js=new WeakMap,Lt=new WeakMap,Ca=new WeakMap,Le=new WeakSet,Pi=function(){try{ce(this,vt,ft(()=>g(this,as).call(this,g(this,dt))))}catch(t){this.error(t)}},Ri=function(t){const s=g(this,ut).failed;s&&ce(this,nt,ft(()=>{s(g(this,dt),()=>t,()=>()=>{})}))},qi=function(){const t=g(this,ut).pending;t&&(this.is_pending=!0,ce(this,Ye,ft(()=>t(g(this,dt)))),ls(()=>{var s=ce(this,Dt,document.createDocumentFragment()),a=It();s.append(a),ce(this,vt,Ee(this,Le,ha).call(this,()=>ft(()=>g(this,as).call(this,a)))),g(this,Ut)===0&&(g(this,dt).before(s),ce(this,Dt,null),ds(g(this,Ye),()=>{ce(this,Ye,null)}),Ee(this,Le,pa).call(this,he))}))},Qa=function(){try{if(this.is_pending=this.has_pending_snippet(),ce(this,Ut,0),ce(this,rs,0),ce(this,vt,ft(()=>{g(this,as).call(this,g(this,dt))})),g(this,Ut)>0){var t=ce(this,Dt,document.createDocumentFragment());_r(g(this,vt),t);const s=g(this,ut).pending;ce(this,Ye,ft(()=>s(g(this,dt))))}else Ee(this,Le,pa).call(this,he)}catch(s){this.error(s)}},pa=function(t){this.is_pending=!1,t.transfer_effects(g(this,Zs),g(this,Js))},ha=function(t){var s=we,a=ye,n=st;Pt(g(this,Qe)),gt(g(this,Qe)),zs(g(this,Qe).ctx);try{return ps.ensure(),t()}catch(i){return Jr(i),null}finally{Pt(s),gt(a),zs(n)}},er=function(t,s){var a;if(!this.has_pending_snippet()){this.parent&&Ee(a=this.parent,Le,er).call(a,t,s);return}ce(this,Ut,g(this,Ut)+t),g(this,Ut)===0&&(Ee(this,Le,pa).call(this,s),g(this,Ye)&&ds(g(this,Ye),()=>{ce(this,Ye,null)}),g(this,Dt)&&(g(this,dt).before(g(this,Dt)),ce(this,Dt,null)))},tr=function(t){g(this,vt)&&(tt(g(this,vt)),ce(this,vt,null)),g(this,Ye)&&(tt(g(this,Ye)),ce(this,Ye,null)),g(this,nt)&&(tt(g(this,nt)),ce(this,nt,null));var s=g(this,ut).onerror;let a=g(this,ut).failed;var n=!1,i=!1;const o=()=>{if(n){yi();return}n=!0,i&&oi(),g(this,nt)!==null&&ds(g(this,nt),()=>{ce(this,nt,null)}),Ee(this,Le,ha).call(this,()=>{Ee(this,Le,Qa).call(this)})},u=c=>{try{i=!0,s?.(c,o),i=!1}catch(v){Wt(v,g(this,Qe)&&g(this,Qe).parent)}a&&ce(this,nt,Ee(this,Le,ha).call(this,()=>{try{return ft(()=>{var v=we;v.b=this,v.f|=Na,a(g(this,dt),()=>c,()=>o)})}catch(v){return Wt(v,g(this,Qe).parent),null}}))};ls(()=>{var c;try{c=this.transform_error(t)}catch(v){Wt(v,g(this,Qe)&&g(this,Qe).parent);return}c!==null&&typeof c=="object"&&typeof c.then=="function"?c.then(u,v=>Wt(v,g(this,Qe)&&g(this,Qe).parent)):u(c)})};function Mi(e,t,s,a){const n=Hs;var i=e.filter(p=>!p.settled);if(s.length===0&&i.length===0){a(t.map(n));return}var o=we,u=Di(),c=i.length===1?i[0].promise:i.length>1?Promise.all(i.map(p=>p.promise)):null;function v(p){if((o.f&ht)===0){u();try{a(p)}catch(m){Wt(m,o)}ba()}}var h=on();if(s.length===0){c.then(()=>v(t.map(n))).finally(h);return}function f(){Promise.all(s.map(p=>Li(p))).then(p=>v([...t.map(n),...p])).catch(p=>Wt(p,o)).finally(h)}c?c.then(()=>{u(),f(),ba()}):f()}function Di(){var e=we,t=ye,s=st,a=he;return function(i=!0){Pt(e),gt(t),zs(s),i&&(e.f&ht)===0&&(a?.activate(),a?.apply())}}function ba(e=!0){Pt(null),gt(null),zs(null),e&&he?.deactivate()}function on(){var e=we,t=e.b,s=he,a=t.is_rendered();return t.update_pending_count(1,s),s.increment(a,e),()=>{t.update_pending_count(-1,s),s.decrement(a,e)}}function Hs(e){var t=We|Ue;return we!==null&&(we.f|=Rs),{ctx:st,deps:null,effects:null,equals:Wr,f:t,fn:e,reactions:null,rv:0,v:Ke,wv:0,parent:we,ac:null}}const oa=Symbol("obsolete");function Li(e,t,s){let a=we;a===null&&Zn();var n=void 0,i=hs(Ke),o=!ye,u=new Set;return Zi(()=>{var c=we,v=Nr();n=v.promise;try{Promise.resolve(e()).then(v.resolve,m=>{m!==za&&v.reject(m)}).finally(ba)}catch(m){v.reject(m),ba()}var h=he;if(o){if((c.f&_s)!==0)var f=on();if(a.b.is_rendered())h.async_deriveds.get(c)?.reject(oa);else for(const m of u.values())m.reject(oa);u.add(v),h.async_deriveds.set(c,v)}const p=(m,b=void 0)=>{f?.(),u.delete(v),b!==oa&&(h.activate(),b?(i.f|=Yt,Fs(i,b)):((i.f&Yt)!==0&&(i.f^=Yt),Fs(i,m)),h.deactivate())};v.promise.then(p,m=>p(null,m||"unknown"))}),gn(()=>{for(const c of u)c.reject(oa)}),new Promise(c=>{function v(h){function f(){h===n?c(i):v(n)}h.then(f,f)}v(n)})}function y(e){const t=Hs(e);return Sn(t),t}function ln(e){const t=Hs(e);return t.equals=Yr,t}function Ii(e){var t=e.effects;if(t!==null){e.effects=null;for(var s=0;s0&&!un&&Ki()}return t}function Ki(){un=!1;for(const e of ya){(e.f&Be)!==0&&Me(e,Ft);let t;try{t=aa(e)}catch{t=!0}t&&Ps(e)}ya.clear()}function Bs(e){J(e,e.v+1)}function vn(e,t,s){var a=e.reactions;if(a!==null)for(var n=a.length,i=0;i{if(us===i)return u();var c=ye,v=us;gt(null),Cr(i);var h=u();return gt(c),Cr(v),h};return a&&s.set("length",fe(e.length)),new Proxy(e,{defineProperty(u,c,v){(!("value"in v)||v.configurable===!1||v.enumerable===!1||v.writable===!1)&&ri();var h=s.get(c);return h===void 0?o(()=>{var f=fe(v.value);return s.set(c,f),f}):J(h,v.value,!0),!0},deleteProperty(u,c){var v=s.get(c);if(v===void 0){if(c in u){const h=o(()=>fe(Ke));s.set(c,h),Bs(n)}}else J(v,Ke),Bs(n);return!0},get(u,c,v){if(c===os)return e;var h=s.get(c),f=c in u;if(h===void 0&&(!f||xs(u,c)?.writable)&&(h=o(()=>{var m=Ve(f?u[c]:Ke),b=fe(m);return b}),s.set(c,h)),h!==void 0){var p=r(h);return p===Ke?void 0:p}return Reflect.get(u,c,v)},getOwnPropertyDescriptor(u,c){var v=Reflect.getOwnPropertyDescriptor(u,c);if(v&&"value"in v){var h=s.get(c);h&&(v.value=r(h))}else if(v===void 0){var f=s.get(c),p=f?.v;if(f!==void 0&&p!==Ke)return{enumerable:!0,configurable:!0,value:p,writable:!0}}return v},has(u,c){if(c===os)return!0;var v=s.get(c),h=v!==void 0&&v.v!==Ke||Reflect.has(u,c);if(v!==void 0||we!==null&&(!h||xs(u,c)?.writable)){v===void 0&&(v=o(()=>{var p=h?Ve(u[c]):Ke,m=fe(p);return m}),s.set(c,v));var f=r(v);if(f===Ke)return!1}return h},set(u,c,v,h){var f=s.get(c),p=c in u;if(a&&c==="length")for(var m=v;mfe(Ke)),s.set(m+"",b))}if(f===void 0)(!p||xs(u,c)?.writable)&&(f=o(()=>fe(void 0)),J(f,Ve(v)),s.set(c,f));else{p=f.v!==Ke;var x=o(()=>Ve(v));J(f,x)}var _=Reflect.getOwnPropertyDescriptor(u,c);if(_?.set&&_.set.call(h,v),!p){if(a&&typeof c=="string"){var w=s.get("length"),S=Number(c);Number.isInteger(S)&&S>=w.v&&J(w,S+1)}Bs(n)}return!0},ownKeys(u){r(n);var c=Reflect.ownKeys(u).filter(f=>{var p=s.get(f);return p===void 0||p.v!==Ke});for(var[v,h]of s)h.v!==Ke&&!(v in u)&&c.push(v);return c},setPrototypeOf(){ni()}})}function kr(e){try{if(e!==null&&typeof e=="object"&&os in e)return e[os]}catch{}return e}function Bi(e,t){return Object.is(kr(e),kr(t))}var Sr,fn,pn,hn;function Ni(){if(Sr===void 0){Sr=window,fn=/Firefox/.test(navigator.userAgent);var e=Element.prototype,t=Node.prototype,s=Text.prototype;pn=xs(t,"firstChild").get,hn=xs(t,"nextSibling").get,yr(e)&&(e[Ga]=void 0,e[da]=null,e[Ua]=void 0,e.__e=void 0),yr(s)&&(s[Is]=void 0)}}function It(e=""){return document.createTextNode(e)}function wa(e){return pn.call(e)}function ta(e){return hn.call(e)}function l(e,t){return wa(e)}function ot(e,t=!1){{var s=wa(e);return s instanceof Comment&&s.data===""?ta(s):s}}function d(e,t=1,s=!1){let a=e;for(;t--;)a=ta(a);return a}function Hi(e){e.textContent=""}function _n(){return!1}function Gi(e,t,s){return document.createElementNS(Ur,e,void 0)}let Er=!1;function Ui(){Er||(Er=!0,document.addEventListener("reset",e=>{Promise.resolve().then(()=>{if(!e.defaultPrevented)for(const t of e.target.elements)t[ua]?.()})},{capture:!0}))}function ur(e){var t=ye,s=we;gt(null),Pt(null);try{return e()}finally{gt(t),Pt(s)}}function vr(e,t,s,a=s){e.addEventListener(t,()=>ur(s));const n=e[ua];n?e[ua]=()=>{n(),a(!0)}:e[ua]=()=>a(!0),Ui()}function Wi(e){we===null&&(ye===null&&ti(),ei()),Ot&&Qn()}function Yi(e,t){var s=t.last;s===null?t.last=t.first=e:(s.next=e,e.prev=s,t.last=e)}function Kt(e,t){var s=we;s!==null&&(s.f&Xe)!==0&&(e|=Xe);var a={ctx:st,deps:null,nodes:null,f:e|Ue|pt,first:null,fn:t,last:null,next:null,parent:s,b:s&&s.b,prev:null,teardown:null,wv:0,ac:null};he?.register_created_effect(a);var n=a;if((e&js)!==0)ws!==null?ws.push(a):ps.ensure().schedule(a);else if(t!==null){try{Ps(a)}catch(o){throw tt(a),o}n.deps===null&&n.teardown===null&&n.nodes===null&&n.first===n.last&&(n.f&Rs)===0&&(n=n.first,(e&xt)!==0&&(e&vs)!==0&&n!==null&&(n.f|=vs))}if(n!==null&&(n.parent=s,s!==null&&Yi(n,s),ye!==null&&(ye.f&We)!==0&&(e&Xt)===0)){var i=ye;(i.effects??(i.effects=[])).push(n)}return a}function fr(){return ye!==null&&!St}function gn(e){const t=Kt(ja,null);return Me(t,Be),t.teardown=e,t}function sa(e){Wi();var t=we.f,s=!ye&&(t&Et)!==0&&(t&_s)===0;if(s){var a=st;(a.e??(a.e=[])).push(e)}else return mn(e)}function mn(e){return Kt(js|Gn,e)}function Xi(e){ps.ensure();const t=Kt(Xt|Rs,e);return(s={})=>new Promise(a=>{s.outro?ds(t,()=>{tt(t),a(void 0)}):(tt(t),a(void 0))})}function bn(e){return Kt(js,e)}function Zi(e){return Kt(ks|Rs,e)}function Fa(e,t=0){return Kt(ja|t,e)}function V(e,t=[],s=[],a=[]){Mi(a,t,s,n=>{Kt(ja,()=>e(...n.map(r)))})}function Pa(e,t=0){var s=Kt(xt|t,e);return s}function ft(e){return Kt(Et|Rs,e)}function yn(e){var t=e.teardown;if(t!==null){const s=Ot,a=ye;Ar(!0),gt(null);try{t.call(null)}finally{Ar(s),gt(a)}}}function pr(e,t=!1){var s=e.first;for(e.first=e.last=null;s!==null;){const n=s.ac;n!==null&&ur(()=>{n.abort(za)});var a=s.next;(s.f&Xt)!==0?s.parent=null:tt(s,t),s=a}}function Ji(e){for(var t=e.first;t!==null;){var s=t.next;(t.f&Et)===0&&tt(t),t=s}}function tt(e,t=!0){var s=!1;(t||(e.f&Hn)!==0)&&e.nodes!==null&&e.nodes.end!==null&&(Qi(e.nodes.start,e.nodes.end),s=!0),Me(e,Ha),pr(e,t&&!s),Gs(e,0);var a=e.nodes&&e.nodes.t;if(a!==null)for(const i of a)i.stop();yn(e),e.f^=Ha,e.f|=ht;var n=e.parent;n!==null&&n.first!==null&&wn(e),e.next=e.prev=e.teardown=e.ctx=e.deps=e.fn=e.nodes=e.ac=e.b=null}function Qi(e,t){for(;e!==null;){var s=e===t?null:ta(e);e.remove(),e=s}}function wn(e){var t=e.parent,s=e.prev,a=e.next;s!==null&&(s.next=a),a!==null&&(a.prev=s),t!==null&&(t.first===e&&(t.first=a),t.last===e&&(t.last=s))}function ds(e,t,s=!0){var a=[];xn(e,a,!0);var n=()=>{s&&tt(e),t&&t()},i=a.length;if(i>0){var o=()=>--i||n();for(var u of a)u.out(o)}else n()}function xn(e,t,s){if((e.f&Xe)===0){e.f^=Xe;var a=e.nodes&&e.nodes.t;if(a!==null)for(const u of a)(u.is_global||s)&&t.push(u);for(var n=e.first;n!==null;){var i=n.next;if((n.f&Xt)===0){var o=(n.f&vs)!==0||(n.f&Et)!==0&&(e.f&xt)!==0;xn(n,t,o?s:!1)}n=i}}}function hr(e){kn(e,!0)}function kn(e,t){if((e.f&Xe)!==0){e.f^=Xe,(e.f&Be)===0&&(Me(e,Ue),ps.ensure().schedule(e));for(var s=e.first;s!==null;){var a=s.next,n=(s.f&vs)!==0||(s.f&Et)!==0;kn(s,n?t:!1),s=a}var i=e.nodes&&e.nodes.t;if(i!==null)for(const o of i)(o.is_global||t)&&o.in()}}function _r(e,t){if(e.nodes)for(var s=e.nodes.start,a=e.nodes.end;s!==null;){var n=s===a?null:ta(s);t.append(s),s=n}}let _a=!1,Ot=!1;function Ar(e){Ot=e}let ye=null,St=!1;function gt(e){ye=e}let we=null;function Pt(e){we=e}let _t=null;function Sn(e){ye!==null&&(_t===null?_t=[e]:_t.push(e))}let et=null,at=0,ct=null;function eo(e){ct=e}let En=1,Jt=0,us=Jt;function Cr(e){us=e}function An(){return++En}function aa(e){var t=e.f;if((t&Ue)!==0)return!0;if(t&We&&(e.f&=~fs),(t&Ft)!==0){for(var s=e.deps,a=s.length,n=0;ne.wv)return!0}(t&pt)!==0&&kt===null&&Me(e,Be)}return!1}function Cn(e,t,s=!0){var a=e.reactions;if(a!==null&&!(_t!==null&&is.call(_t,e)))for(var n=0;n{e.ac.abort(za)}),e.ac=null);try{e.f|=ma;var h=e.fn,f=h();e.f|=_s;var p=e.deps,m=he?.is_fork;if(et!==null){var b;if(m||Gs(e,at),p!==null&&at>0)for(p.length=at+et.length,b=0;b{throw _});throw p}}finally{e[Qt]=t,delete e.currentTarget,gt(h),Pt(f)}}}const no=globalThis?.window?.trustedTypes&&globalThis.window.trustedTypes.createPolicy("svelte-trusted-html",{createHTML:e=>e});function io(e){return no?.createHTML(e)??e}function oo(e){var t=Gi("template");return t.innerHTML=io(e.replaceAll("","")),t.content}function xa(e,t){var s=we;s.nodes===null&&(s.nodes={start:e,end:t,a:null,t:null})}function C(e,t){var s=(t&_i)!==0,a=(t&gi)!==0,n,i=!e.startsWith("");return()=>{n===void 0&&(n=oo(i?e:""+e),s||(n=wa(n)));var o=a||fn?document.importNode(n,!0):n.cloneNode(!0);if(s){var u=wa(o),c=o.lastChild;xa(u,c)}else xa(o,o);return o}}function lo(e=""){{var t=It(e+"");return xa(t,t),t}}function ar(){var e=document.createDocumentFragment(),t=document.createComment(""),s=It();return e.append(t,s),xa(t,s),e}function E(e,t){e!==null&&e.before(t)}function R(e,t){var s=t==null?"":typeof t=="object"?`${t}`:t;s!==(e[Is]??(e[Is]=e.nodeValue))&&(e[Is]=s,e.nodeValue=`${s}`)}function co(e,t){return uo(e,t)}const la=new Map;function uo(e,{target:t,anchor:s,props:a={},events:n,context:i,intro:o=!0,transformError:u}){Ni();var c=void 0,v=Xi(()=>{var h=s??t.appendChild(It());zi(h,{pending:()=>{}},m=>{ze({});var b=st;i&&(b.c=i),n&&(a.$$events=n),c=e(m,a)||{},Fe()},u);var f=new Set,p=m=>{for(var b=0;b{for(var m of f)for(const _ of[t,document]){var b=la.get(_),x=b.get(m);--x==0?(_.removeEventListener(m,Tr),b.delete(m),b.size===0&&la.delete(_)):b.set(m,x)}sr.delete(p),h!==s&&h.parentNode?.removeChild(h)}});return vo.set(c,v),c}let vo=new WeakMap;var bt,jt,it,ns,Qs,ea,$a;class Fn{constructor(t,s=!0){Je(this,"anchor");ve(this,bt,new Map);ve(this,jt,new Map);ve(this,it,new Map);ve(this,ns,new Set);ve(this,Qs,!0);ve(this,ea,t=>{if(g(this,bt).has(t)){var s=g(this,bt).get(t),a=g(this,jt).get(s);if(a)hr(a),g(this,ns).delete(s);else{var n=g(this,it).get(s);n&&(g(this,jt).set(s,n.effect),g(this,it).delete(s),n.fragment.lastChild.remove(),this.anchor.before(n.fragment),a=n.effect)}for(const[i,o]of g(this,bt)){if(g(this,bt).delete(i),i===t)break;const u=g(this,it).get(o);u&&(tt(u.effect),g(this,it).delete(o))}for(const[i,o]of g(this,jt)){if(i===s||g(this,ns).has(i))continue;const u=()=>{if(Array.from(g(this,bt).values()).includes(i)){var v=document.createDocumentFragment();_r(o,v),v.append(It()),g(this,it).set(i,{effect:o,fragment:v})}else tt(o);g(this,ns).delete(i),g(this,jt).delete(i)};g(this,Qs)||!a?(g(this,ns).add(i),ds(o,u,!1)):u()}}});ve(this,$a,t=>{g(this,bt).delete(t);const s=Array.from(g(this,bt).values());for(const[a,n]of g(this,it))s.includes(a)||(tt(n.effect),g(this,it).delete(a))});this.anchor=t,ce(this,Qs,s)}ensure(t,s){var a=he,n=_n();if(s&&!g(this,jt).has(t)&&!g(this,it).has(t))if(n){var i=document.createDocumentFragment(),o=It();i.append(o),g(this,it).set(t,{effect:ft(()=>s(o)),fragment:i})}else g(this,jt).set(t,ft(()=>s(this.anchor)));if(g(this,bt).set(a,t),n){for(const[u,c]of g(this,jt))u===t?a.unskip_effect(c):a.skip_effect(c);for(const[u,c]of g(this,it))u===t?a.unskip_effect(c.effect):a.skip_effect(c.effect);a.oncommit(g(this,ea)),a.ondiscard(g(this,$a))}else g(this,ea).call(this,a)}}bt=new WeakMap,jt=new WeakMap,it=new WeakMap,ns=new WeakMap,Qs=new WeakMap,ea=new WeakMap,$a=new WeakMap;function me(e,t,s=!1){var a=new Fn(e),n=s?vs:0;function i(o,u){a.ensure(o,u)}Pa(()=>{var o=!1;t((u,c=0)=>{o=!0,i(c,u)}),o||i(-1,null)},n)}function Ds(e,t){return t}function fo(e,t,s){for(var a=[],n=t.length,i,o=t.length,u=0;u{if(i){if(i.pending.delete(f),i.done.add(f),i.pending.size===0){var p=e.outrogroups;rr(e,Ta(i.done)),p.delete(i),p.size===0&&(e.outrogroups=null)}}else o-=1},!1)}if(o===0){var c=a.length===0&&s!==null;if(c){var v=s,h=v.parentNode;Hi(h),h.append(v),e.items.clear()}rr(e,t,!c)}else i={pending:new Set(t),done:new Set},(e.outrogroups??(e.outrogroups=new Set)).add(i)}function rr(e,t,s=!0){var a;if(e.pending.size>0){a=new Set;for(const o of e.pending.values())for(const u of o)a.add(e.items.get(u).e)}for(var n=0;n{var A=s();return ir(A)?A:A==null?[]:Ta(A)}),p,m=new Map,b=!0;function x(A){(S.effect.f&ht)===0&&(S.pending.delete(A),S.fallback=h,po(S,p,o,t,a),h!==null&&(p.length===0?(h.f&zt)===0?hr(h):(h.f^=zt,Os(h,null,o)):ds(h,()=>{h=null})))}function _(A){S.pending.delete(A)}var w=Pa(()=>{p=r(f);for(var A=p.length,F=new Set,Y=he,T=_n(),z=0;zi(o)):(h=ft(()=>i(jr??(jr=It()))),h.f|=zt)),A>F.size&&Jn(),!b)if(m.set(Y,F),T){for(const[q,B]of u)F.has(q)||Y.skip_effect(B.e);Y.oncommit(x),Y.ondiscard(_)}else x(Y);r(f)}),S={effect:w,items:u,pending:m,outrogroups:null,fallback:h};b=!1}function Ls(e){for(;e!==null&&(e.f&Et)===0;)e=e.next;return e}function po(e,t,s,a,n){var i=(a&di)!==0,o=t.length,u=e.items,c=Ls(e.effect.first),v,h=null,f,p=[],m=[],b,x,_,w;if(i)for(w=0;w0){var O=(a&Gr)!==0&&o===0?s:null;if(i){for(w=0;w{if(f!==void 0)for(_ of f)_.nodes?.a?.apply()})}function ho(e,t,s,a,n,i,o,u){var c=(o&li)!==0?(o&ui)===0?Oi(s,!1,!1):hs(s):null,v=(o&ci)!==0?hs(n):null;return{v:c,i:v,e:ft(()=>(i(t,c??s,v??n,u),()=>{e.delete(a)}))}}function Os(e,t,s){if(e.nodes)for(var a=e.nodes.start,n=e.nodes.end,i=t&&(t.f&zt)===0?t.nodes.start:s;a!==null;){var o=ta(a);if(i.before(a),a===n)return;a=o}}function Nt(e,t,s){t===null?e.effect.first=s:t.next=s,s===null?e.effect.last=t:s.prev=t}function Pn(e,t,...s){var a=new Fn(e);Pa(()=>{const n=t()??null;a.ensure(n,n&&(i=>n(i,...s)))},vs)}const zr=[...`
-\r\f \v\uFEFF`];function _o(e,t,s){var a=e==null?"":""+e;if(t&&(a=a?a+" "+t:t),s){for(var n of Object.keys(s))if(s[n])a=a?a+" "+n:n;else if(a.length)for(var i=n.length,o=0;(o=a.indexOf(n,o))>=0;){var u=o+i;(o===0||zr.includes(a[o-1]))&&(u===a.length||zr.includes(a[u]))?a=(o===0?"":a.substring(0,o))+a.substring(u+1):o=u}}return a===""?null:a}function Fr(e,t=!1){var s=t?" !important;":";",a="";for(var n of Object.keys(e)){var i=e[n];i!=null&&i!==""&&(a+=" "+n+": "+i+s)}return a}function Ia(e){return e[0]!=="-"||e[1]!=="-"?e.toLowerCase():e}function go(e,t){if(t){var s="",a,n;if(Array.isArray(t)?(a=t[0],n=t[1]):a=t,e){e=String(e).replaceAll(/\s*\/\*.*?\*\/\s*/g,"").trim();var i=!1,o=0,u=!1,c=[];a&&c.push(...Object.keys(a).map(Ia)),n&&c.push(...Object.keys(n).map(Ia));var v=0,h=-1;const x=e.length;for(var f=0;f{Us(e,e.__value)});t.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["value"]}),gn(()=>{t.disconnect()})}function Sa(e,t,s=t){var a=new WeakSet,n=!0;vr(e,"change",i=>{var o=i?"[selected]":":checked",u;if(e.multiple)u=[].map.call(e.querySelectorAll(o),Ns);else{var c=e.querySelector(o)??e.querySelector("option:not([disabled])");u=c&&Ns(c)}s(u),e.__value=u,he!==null&&a.add(he)}),bn(()=>{var i=t();if(e===document.activeElement){var o=he;if(a.has(o))return}if(Us(e,i,n),n&&i===void 0){var u=e.querySelector(":checked");u!==null&&(i=Ns(u),s(i))}e.__value=i,n=!1}),ka(e)}function Ns(e){return"__value"in e?e.__value:e.value}const mo=Symbol("is custom element"),bo=Symbol("is html"),yo=Yn?"progress":"PROGRESS";function Ws(e,t){var s=Rn(e);s.value===(s.value=t??void 0)||e.value===t&&(t!==0||e.nodeName!==yo)||(e.value=t??"")}function te(e,t,s,a){var n=Rn(e);n[t]!==(n[t]=s)&&(t==="loading"&&(e[Wn]=s),s==null?e.removeAttribute(t):typeof s!="string"&&wo(e).includes(t)?e[t]=s:e.setAttribute(t,s))}function Rn(e){return e[da]??(e[da]={[mo]:e.nodeName.includes("-"),[bo]:e.namespaceURI===Ur})}var Pr=new Map;function wo(e){var t=e.getAttribute("is")||e.nodeName,s=Pr.get(t);if(s)return s;Pr.set(t,s=[]);for(var a,n=e,i=Element.prototype;i!==n;){a=On(n);for(var o in a)a[o].set&&o!=="innerHTML"&&o!=="textContent"&&o!=="innerText"&&s.push(o);n=Kr(n)}return s}function Vt(e,t,s=t){var a=new WeakSet;vr(e,"input",async n=>{var i=n?e.defaultValue:e.value;if(i=Oa(e)?Ka(i):i,s(i),he!==null&&a.add(he),await so(),i!==(i=t())){var o=e.selectionStart,u=e.selectionEnd,c=e.value.length;if(e.value=i??"",u!==null){var v=e.value.length;o===u&&u===c&&v>c?(e.selectionStart=v,e.selectionEnd=v):(e.selectionStart=o,e.selectionEnd=Math.min(u,v))}}}),qs(t)==null&&e.value&&(s(Oa(e)?Ka(e.value):e.value),he!==null&&a.add(he)),Fa(()=>{var n=t();if(e===document.activeElement){var i=he;if(a.has(i))return}Oa(e)&&n===Ka(e.value)||e.type==="date"&&!n&&!e.value||n!==e.value&&(e.value=n??"")})}function xo(e,t,s=t){vr(e,"change",a=>{var n=a?e.defaultChecked:e.checked;s(n)}),qs(t)==null&&s(e.checked),Fa(()=>{var a=t();e.checked=!!a})}function Oa(e){var t=e.type;return t==="number"||t==="range"}function Ka(e){return e===""?null:+e}function Ba(e,t){return e===t||e?.[os]===t}function ko(e={},t,s,a){var n=st.r,i=we;return bn(()=>{var o,u;return Fa(()=>{o=u,u=[],qs(()=>{Ba(s(...u),e)||(t(e,...u),o&&Ba(s(...o),e)&&t(null,...o))})}),()=>{let c=i;for(;c!==n&&c.parent!==null&&c.parent.f&Ha;)c=c.parent;const v=()=>{u&&Ba(s(...u),e)&&t(null,...u)},h=c.teardown;c.teardown=()=>{v(),h?.()}}}),e}function $e(e,t,s,a){var n=!0,i=(s&pi)!==0,o=(s&hi)!==0,u=a,c=!0,v=void 0,h=()=>o&&n?(v??(v=Hs(a)),r(v)):(c&&(c=!1,u=o?qs(a):a),u);let f;if(i){var p=os in e||Un in e;f=xs(e,t)?.set??(p&&t in e?F=>e[t]=F:void 0)}var m,b=!1;i?[m,b]=Si(()=>e[t]):m=e[t],m===void 0&&a!==void 0&&(m=h(),f&&(ai(),f(m)));var x;if(x=()=>{var F=e[t];return F===void 0?h():(c=!0,F)},(s&fi)===0)return x;if(f){var _=e.$$legacy;return(function(F,Y){return arguments.length>0?((!Y||_||b)&&f(Y?x():F),F):x()})}var w=!1,S=((s&vi)!==0?Hs:ln)(()=>(w=!1,x()));i&&r(S);var A=we;return(function(F,Y){if(arguments.length>0){const T=Y?r(S):i?Ve(F):F;return J(S,T),w=!0,u!==void 0&&(u=T),F}return Ot&&w||(A.f&ht)!==0?S.v:r(S)})}function So(e){st===null&&Xn(),sa(()=>{const t=qs(e);if(typeof t=="function")return t})}const Eo="5";var Or;typeof window<"u"&&((Or=window.__svelte??(window.__svelte={})).v??(Or.v=new Set)).add(Eo);const Rt=typeof window<"u"&&window.slashedApp?window.slashedApp:{defaults:{},settings:{},tabs:{},rest:{url:"",nonce:""}},ie={defaults:Rt.defaults||{},tabs:Rt.tabs||{},rest:Rt.rest||{url:"",nonce:""},inventory:Rt.inventory||{variables:[],sf_classes:[],is_classes:[]},pluginSettings:Rt.pluginSettings||{},versions:Rt.versions||{plugin:"",framework:""},activeIntegrations:Rt.activeIntegrations||{bricks:!0},bricksFonts:Rt.bricksFonts||[]},Q=Ve(structuredClone(Rt.settings||{})),re=Ve({activeTab:Ao(ie.tabs)||"colors",dirty:!1,saving:!1,lastSavedAt:null,error:""});function Ao(e){for(const t in e)return t;return null}function gr(){re.dirty=!0,re.error=""}function Rr(e){Q[e]&&delete Q[e]}function Ea(){const e=Q.spacing??{},t=ie.defaults?.spacing??{},s=(o,u)=>{const c=e[o],v=parseFloat(c!==void 0&&c!==""?c:t[o]??u);return Number.isFinite(v)?v:u},a=s("viewport_min",22.5),n=s("viewport_max",95),i=n>a?n:a+.5;return{minRem:a,maxRem:i,minPx:Math.round(a*16),maxPx:Math.round(i*16)}}function Co(e,t){const s=Q[e];if(!s)return"";const a=s[t];return a==null?"":String(a)}function yt(e,t,s){Q[e]||(Q[e]={}),s===""||s===null||s===void 0||typeof s=="string"&&s.trim()===""?delete Q[e][t]:Q[e][t]=String(s),gr()}var $o=C(''),To=C('');function jo(e,t){ze(t,!0);var s=To();de(s,21,()=>Object.entries(ie.tabs),([a,n])=>a,(a,n)=>{var i=y(()=>wt(r(n),2));let o=()=>r(i)[0],u=()=>r(i)[1];var c=$o();let v;var h=l(c);V(()=>{v=Ie(c,1,"tab-nav__btn svelte-yyiz68",null,v,{active:re.activeTab===o()}),R(h,u())}),ge("click",c,()=>re.activeTab=o()),E(a,c)}),E(e,s),Fe()}He(["click"]);var zo=C(' '),Fo=C(' ',1),Po=C(''),Ro=C(' ');function ca(e,t){ze(t,!0);let s=$e(t,"hexHint",3,""),a=$e(t,"rawHint",3,""),n=$e(t,"cssVar",3,"");const i=/^#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/,o=(()=>{const q=(Q.colors?.[t.storeKey]??"").trim(),B=q===""||i.test(q);return{mode:B?"hex":"raw",hex:B?q:"",raw:B?"":q}})();let u=fe(Ve(o.mode)),c=fe(Ve(o.hex)),v=fe(Ve(o.raw));function h(){Q.colors||(Q.colors={});const q=r(v).trim(),B=r(c).trim(),$=r(u)==="raw"?q:B;$===""?delete Q.colors[t.storeKey]:Q.colors[t.storeKey]=$,gr()}function f(){r(u)==="hex"?(J(u,"raw"),J(c,"")):(J(u,"hex"),J(v,"")),h()}const p=y(()=>(r(u)==="raw"?r(v):r(c))||s()||"transparent");var m=Ro(),b=l(m),x=l(b),_=l(x),w=d(x,2);{var S=q=>{var B=zo(),$=l(B);V(()=>R($,n())),E(q,B)};me(w,q=>{n()&&q(S)})}var A=d(b,2),F=l(A);let Y;var T=d(F,2);{var z=q=>{var B=Fo(),$=ot(B),k=d($,2);V(()=>{te($,"id",t.storeKey),te(k,"placeholder",s())}),ge("input",$,h),Vt($,()=>r(c),P=>J(c,P)),ge("input",k,h),Vt(k,()=>r(c),P=>J(c,P)),E(q,B)},D=q=>{var B=Po();V(()=>{te(B,"id",t.storeKey),te(B,"placeholder",a())}),ge("input",B,h),Vt(B,()=>r(v),$=>J(v,$)),E(q,B)};me(T,q=>{r(u)==="hex"?q(z):q(D,-1)})}var O=d(T,2),K=l(O);V(()=>{te(x,"for",t.storeKey),R(_,t.label),Y=pe(F,"",Y,{background:r(p)}),R(K,r(u)==="hex"?"Advanced (oklch / raw)":"Use HEX picker")}),ge("click",O,f),E(e,m),Fe()}He(["input","click"]);var qo=C(''),Mo=C(' ');function ra(e,t){ze(t,!0);let s=fe(!1);const a=`adv-body-${Math.random().toString(36).slice(2,9)}`;var n=Mo(),i=l(n),o=d(l(i));let u;var c=l(o),v=d(i,2);{var h=f=>{var p=qo(),m=l(p);Pn(m,()=>t.children),V(()=>te(p,"id",a)),E(f,p)};me(v,f=>{r(s)&&f(h)})}V(()=>{te(i,"aria-expanded",r(s)),te(i,"aria-controls",a),u=Ie(o,1,"advanced-section__arrow",null,u,{open:r(s)}),R(c,r(s)?"▲":"▼")}),ge("click",i,()=>J(s,!r(s))),E(e,n),Fe()}He(["click"]);var Do=C('Brand Colors — Dark Mode
Status Colors — Dark Mode
',1),Lo=C(`Status Colors — Light Mode
The framework auto-derives dark mode from light source colors using CSS relative color syntax
+var Dn=Object.defineProperty;var br=e=>{throw TypeError(e)};var Ln=(e,t,s)=>t in e?Dn(e,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[t]=s;var Je=(e,t,s)=>Ln(e,typeof t!="symbol"?t+"":t,s),Ma=(e,t,s)=>t.has(e)||br("Cannot "+s);var g=(e,t,s)=>(Ma(e,t,"read from private field"),s?s.call(e):t.get(e)),ve=(e,t,s)=>t.has(e)?br("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,s),ce=(e,t,s,a)=>(Ma(e,t,"write to private field"),a?a.call(e,s):t.set(e,s),s),Ee=(e,t,s)=>(Ma(e,t,"access private method"),s);var ir=Array.isArray,In=Array.prototype.indexOf,is=Array.prototype.includes,Ta=Array.from,Vn=Object.defineProperty,xs=Object.getOwnPropertyDescriptor,On=Object.getOwnPropertyDescriptors,Kn=Object.prototype,Bn=Array.prototype,Kr=Object.getPrototypeOf,yr=Object.isExtensible;const Br=()=>{};function Nn(e){for(var t=0;t{e=a,t=n});return{promise:s,resolve:e,reject:t}}function wt(e,t){if(Array.isArray(e))return e;if(t===void 0||!(Symbol.iterator in e))return Array.from(e);const s=[];for(const a of e)if(s.push(a),s.length===t)break;return s}const We=2,js=4,ja=8,Hr=1<<24,xt=16,Et=32,Xt=64,Na=128,pt=512,Be=1024,Ue=2048,Ft=4096,Xe=8192,ht=16384,_s=32768,Ha=1<<25,vs=65536,ga=1<<17,Hn=1<<18,Rs=1<<19,Gn=1<<20,zt=1<<25,fs=65536,ma=1<<21,ks=1<<22,Yt=1<<23,os=Symbol("$state"),Un=Symbol("legacy props"),Wn=Symbol(""),da=Symbol("attributes"),Ga=Symbol("class"),Ua=Symbol("style"),Is=Symbol("text"),ua=Symbol("form reset"),za=new class extends Error{constructor(){super(...arguments);Je(this,"name","StaleReactionError");Je(this,"message","The reaction that called `getAbortSignal()` was re-run or destroyed")}},Yn=!!globalThis.document?.contentType&&globalThis.document.contentType.includes("xml");function Xn(e){throw new Error("https://svelte.dev/e/lifecycle_outside_component")}function Zn(){throw new Error("https://svelte.dev/e/async_derived_orphan")}function Jn(e,t,s){throw new Error("https://svelte.dev/e/each_key_duplicate")}function Qn(e){throw new Error("https://svelte.dev/e/effect_in_teardown")}function ei(){throw new Error("https://svelte.dev/e/effect_in_unowned_derived")}function ti(e){throw new Error("https://svelte.dev/e/effect_orphan")}function si(){throw new Error("https://svelte.dev/e/effect_update_depth_exceeded")}function ai(e){throw new Error("https://svelte.dev/e/props_invalid_value")}function ri(){throw new Error("https://svelte.dev/e/state_descriptors_fixed")}function ni(){throw new Error("https://svelte.dev/e/state_prototype_fixed")}function ii(){throw new Error("https://svelte.dev/e/state_unsafe_mutation")}function oi(){throw new Error("https://svelte.dev/e/svelte_boundary_reset_onerror")}const li=1,ci=2,Gr=4,di=8,ui=16,vi=1,fi=4,pi=8,hi=16,_i=1,gi=2,Ke=Symbol("uninitialized"),Ur="http://www.w3.org/1999/xhtml";function mi(){console.warn("https://svelte.dev/e/derived_inert")}function bi(){console.warn("https://svelte.dev/e/select_multiple_invalid_value")}function yi(){console.warn("https://svelte.dev/e/svelte_boundary_reset_noop")}function Wr(e){return e===this.v}function wi(e,t){return e!=e?t==t:e!==t||e!==null&&typeof e=="object"||typeof e=="function"}function Yr(e){return!wi(e,this.v)}let st=null;function zs(e){st=e}function ze(e,t=!1,s){st={p:st,i:!1,c:null,e:null,s:e,x:null,r:we,l:null}}function Fe(e){var t=st,s=t.e;if(s!==null){t.e=null;for(var a of s)mn(a)}return t.i=!0,st=t.p,{}}function Xr(){return!0}let Zt=[];function Zr(){var e=Zt;Zt=[],Nn(e)}function ls(e){if(Zt.length===0&&!Ks){var t=Zt;queueMicrotask(()=>{t===Zt&&Zr()})}Zt.push(e)}function xi(){for(;Zt.length>0;)Zr()}function Jr(e){var t=we;if(t===null)return ye.f|=Yt,e;if((t.f&_s)===0&&(t.f&js)===0)throw e;Wt(e,t)}function Wt(e,t){for(;t!==null;){if((t.f&Na)!==0){if((t.f&_s)===0)throw e;try{t.b.error(e);return}catch(s){e=s}}t=t.parent}throw e}const ki=-7169;function Me(e,t){e.f=e.f&ki|t}function or(e){(e.f&pt)!==0||e.deps===null?Me(e,Be):Me(e,Ft)}function Qr(e){if(e!==null)for(const t of e)(t.f&We)===0||(t.f&fs)===0||(t.f^=fs,Qr(t.deps))}function en(e,t,s){(e.f&Ue)!==0?t.add(e):(e.f&Ft)!==0&&s.add(e),Qr(e.deps),Me(e,Be)}let ia=!1;function Si(e){var t=ia;try{return ia=!1,[e(),ia]}finally{ia=t}}let Da=null,ms=null,he=null,Wa=null,kt=null,Ya=null,Ks=!1,La=!1,ws=null,va=null;var wr=0;let Ei=1;var Ss,Ht,es,Es,As,ts,Cs,Mt,Ys,rt,Xs,Gt,$t,Tt,$s,ss,Ce,Xa,Vs,Za,tn,sn,fa,Ai,Ja,ys;const Aa=class Aa{constructor(){ve(this,Ce);Je(this,"id",Ei++);ve(this,Ss,!1);Je(this,"linked",!0);ve(this,Ht,null);ve(this,es,null);Je(this,"async_deriveds",new Map);Je(this,"current",new Map);Je(this,"previous",new Map);Je(this,"unblocked",new Set);ve(this,Es,new Set);ve(this,As,new Set);ve(this,ts,new Set);ve(this,Cs,0);ve(this,Mt,new Map);ve(this,Ys,null);ve(this,rt,[]);ve(this,Xs,[]);ve(this,Gt,new Set);ve(this,$t,new Set);ve(this,Tt,new Map);ve(this,$s,new Set);Je(this,"is_fork",!1);ve(this,ss,!1)}skip_effect(t){g(this,Tt).has(t)||g(this,Tt).set(t,{d:[],m:[]}),g(this,$s).delete(t)}unskip_effect(t,s=a=>this.schedule(a)){var a=g(this,Tt).get(t);if(a){g(this,Tt).delete(t);for(var n of a.d)Me(n,Ue),s(n);for(n of a.m)Me(n,Ft),s(n)}g(this,$s).add(t)}capture(t,s,a=!1){t.v!==Ke&&!this.previous.has(t)&&this.previous.set(t,t.v),(t.f&Yt)===0&&(this.current.set(t,[s,a]),kt?.set(t,s)),this.is_fork||(t.v=s)}activate(){he=this}deactivate(){he=null,kt=null}flush(){try{La=!0,he=this,Ee(this,Ce,Vs).call(this)}finally{wr=0,Ya=null,ws=null,va=null,La=!1,he=null,kt=null,cs.clear()}}discard(){for(const t of g(this,As))t(this);g(this,As).clear(),g(this,ts).clear(),Ee(this,Ce,ys).call(this)}register_created_effect(t){g(this,Xs).push(t)}increment(t,s){if(ce(this,Cs,g(this,Cs)+1),t){let a=g(this,Mt).get(s)??0;g(this,Mt).set(s,a+1)}}decrement(t,s){if(ce(this,Cs,g(this,Cs)-1),t){let a=g(this,Mt).get(s)??0;a===1?g(this,Mt).delete(s):g(this,Mt).set(s,a-1)}g(this,ss)||(ce(this,ss,!0),ls(()=>{ce(this,ss,!1),this.linked&&this.flush()}))}transfer_effects(t,s){for(const a of t)g(this,Gt).add(a);for(const a of s)g(this,$t).add(a);t.clear(),s.clear()}oncommit(t){g(this,Es).add(t)}ondiscard(t){g(this,As).add(t)}on_fork_commit(t){g(this,ts).add(t)}run_fork_commit_callbacks(){for(const t of g(this,ts))t(this);g(this,ts).clear()}settled(){return(g(this,Ys)??ce(this,Ys,Nr())).promise}static ensure(){var t;if(he===null){const s=he=new Aa;Ee(t=s,Ce,Ja).call(t),!La&&!Ks&&ls(()=>{g(s,Ss)||s.flush()})}return he}apply(){{kt=null;return}}schedule(t){if(Ya=t,t.b?.is_pending&&(t.f&(js|ja|Hr))!==0&&(t.f&_s)===0){t.b.defer_effect(t);return}for(var s=t;s.parent!==null;){s=s.parent;var a=s.f;if(ws!==null&&s===we&&(ye===null||(ye.f&We)===0))return;if((a&(Xt|Et))!==0){if((a&Be)===0)return;s.f^=Be}}g(this,rt).push(s)}};Ss=new WeakMap,Ht=new WeakMap,es=new WeakMap,Es=new WeakMap,As=new WeakMap,ts=new WeakMap,Cs=new WeakMap,Mt=new WeakMap,Ys=new WeakMap,rt=new WeakMap,Xs=new WeakMap,Gt=new WeakMap,$t=new WeakMap,Tt=new WeakMap,$s=new WeakMap,ss=new WeakMap,Ce=new WeakSet,Xa=function(){if(this.is_fork)return!0;for(const a of g(this,Mt).keys()){for(var t=a,s=!1;t.parent!==null;){if(g(this,Tt).has(t)){s=!0;break}t=t.parent}if(!s)return!0}return!1},Vs=function(){var c,v,h;if(ce(this,Ss,!0),wr++>1e3&&(Ee(this,Ce,ys).call(this),$i()),!Ee(this,Ce,Xa).call(this)){for(const f of g(this,Gt))g(this,$t).delete(f),Me(f,Ue),this.schedule(f);for(const f of g(this,$t))Me(f,Ft),this.schedule(f)}const t=g(this,rt);ce(this,rt,[]),this.apply();var s=ws=[],a=[],n=va=[];for(const f of t)try{Ee(this,Ce,Za).call(this,f,s,a)}catch(p){throw nn(f),p}if(he=null,n.length>0){var i=Aa.ensure();for(const f of n)i.schedule(f)}if(ws=null,va=null,Ee(this,Ce,Xa).call(this)){Ee(this,Ce,fa).call(this,a),Ee(this,Ce,fa).call(this,s);for(const[f,p]of g(this,Tt))rn(f,p);n.length>0&&Ee(c=he,Ce,Vs).call(c);return}const o=Ee(this,Ce,tn).call(this);if(o){Ee(v=o,Ce,sn).call(v,this);return}g(this,Gt).clear(),g(this,$t).clear();for(const f of g(this,Es))f(this);g(this,Es).clear(),Wa=this,xr(a),xr(s),Wa=null,g(this,Ys)?.resolve();var u=he;if(this.linked&&g(this,Cs)===0&&Ee(this,Ce,ys).call(this),g(this,rt).length>0){u===null&&(u=this,Ee(this,Ce,Ja).call(this));const f=u;g(f,rt).push(...g(this,rt).filter(p=>!g(f,rt).includes(p)))}u!==null&&Ee(h=u,Ce,Vs).call(h)},Za=function(t,s,a){t.f^=Be;for(var n=t.first;n!==null;){var i=n.f,o=(i&(Et|Xt))!==0,u=o&&(i&Be)!==0,c=u||(i&Xe)!==0||g(this,Tt).has(n);if(!c&&n.fn!==null){o?n.f^=Be:(i&js)!==0?s.push(n):aa(n)&&((i&xt)!==0&&g(this,$t).add(n),Ps(n));var v=n.first;if(v!==null){n=v;continue}}for(;n!==null;){var h=n.next;if(h!==null){n=h;break}n=n.parent}}},tn=function(){for(var t=g(this,Ht);t!==null;){if(!t.is_fork){for(const[s,[,a]]of this.current)if(t.current.has(s)&&!a)return t}t=g(t,Ht)}return null},sn=function(t){var a;for(const[n,i]of t.current)!this.previous.has(n)&&t.previous.has(n)&&this.previous.set(n,t.previous.get(n)),this.current.set(n,i);for(const[n,i]of t.async_deriveds){const o=this.async_deriveds.get(n);o&&i.promise.then(o.resolve)}const s=n=>{var i=n.reactions;if(i!==null)for(const c of i){var o=c.f;if((o&We)!==0)s(c);else{var u=c;o&(ks|xt)&&!this.async_deriveds.has(u)&&(g(this,$t).delete(u),Me(u,Ue),this.schedule(u))}}};for(const n of this.current.keys())s(n);this.oncommit(()=>t.discard()),Ee(a=t,Ce,ys).call(a),he=this,Ee(this,Ce,Vs).call(this)},fa=function(t){for(var s=0;s!this.current.has(p));if(n.length===0)t&&f.discard();else if(s.length>0){if(t)for(const p of g(this,$s))f.unskip_effect(p,m=>{var b;(m.f&(xt|ks))!==0?f.schedule(m):Ee(b=f,Ce,fa).call(b,[m])});f.activate();var i=new Set,o=new Map;for(var u of s)an(u,n,i,o);o=new Map;var c=[...f.current.keys()].filter(p=>this.current.has(p)?this.current.get(p)[0]!==p.v:!0);if(c.length>0)for(const p of g(this,Xs))(p.f&(ht|Xe|ga))===0&&lr(p,c,o)&&((p.f&(ks|xt))!==0?(Me(p,Ue),f.schedule(p)):g(f,Gt).add(p));if(g(f,rt).length>0&&!g(f,ss)){f.apply();for(var v of g(f,rt))Ee(h=f,Ce,Za).call(h,v,[],[]);ce(f,rt,[])}f.deactivate()}}}},Ja=function(){ms===null?Da=ms=this:(ce(ms,es,this),ce(this,Ht,ms)),ms=this},ys=function(){var t=g(this,Ht),s=g(this,es);t===null?Da=s:ce(t,es,s),s===null?ms=t:ce(s,Ht,t),this.linked=!1};let ps=Aa;function Ci(e){var t=Ks;Ks=!0;try{for(var s;;){if(xi(),he===null)return s;he.flush()}}finally{Ks=t}}function $i(){try{si()}catch(e){Wt(e,Ya)}}let qt=null;function xr(e){var t=e.length;if(t!==0){for(var s=0;s0)){cs.clear();for(const n of qt){if((n.f&(ht|Xe))!==0)continue;const i=[n];let o=n.parent;for(;o!==null;)qt.has(o)&&(qt.delete(o),i.push(o)),o=o.parent;for(let u=i.length-1;u>=0;u--){const c=i[u];(c.f&(ht|Xe))===0&&Ps(c)}}qt.clear()}}qt=null}}function an(e,t,s,a){if(!s.has(e)&&(s.add(e),e.reactions!==null))for(const n of e.reactions){const i=n.f;(i&We)!==0?an(n,t,s,a):(i&(ks|xt))!==0&&(i&Ue)===0&&lr(n,t,a)&&(Me(n,Ue),cr(n))}}function lr(e,t,s){const a=s.get(e);if(a!==void 0)return a;if(e.deps!==null)for(const n of e.deps){if(is.call(t,n))return!0;if((n.f&We)!==0&&lr(n,t,s))return s.set(n,!0),!0}return s.set(e,!1),!1}function cr(e){he.schedule(e)}function rn(e,t){if(!((e.f&Et)!==0&&(e.f&Be)!==0)){(e.f&Ue)!==0?t.d.push(e):(e.f&Ft)!==0&&t.m.push(e),Me(e,Be);for(var s=e.first;s!==null;)rn(s,t),s=s.next}}function nn(e){Me(e,Be);for(var t=e.first;t!==null;)nn(t),t=t.next}function Ti(e){let t=0,s=hs(0),a;return()=>{fr()&&(r(s),Fa(()=>(t===0&&(a=qs(()=>e(()=>Bs(s)))),t+=1,()=>{ls(()=>{t-=1,t===0&&(a?.(),a=void 0,Bs(s))})})))}}var ji=vs|Rs;function zi(e,t,s,a){new Fi(e,t,s,a)}var dt,nr,ut,as,Qe,vt,Ye,nt,Dt,rs,Ut,Ts,Zs,Js,Lt,Ca,Le,Pi,Ri,qi,Qa,pa,ha,er,tr;class Fi{constructor(t,s,a,n){ve(this,Le);Je(this,"parent");Je(this,"is_pending",!1);Je(this,"transform_error");ve(this,dt);ve(this,nr,null);ve(this,ut);ve(this,as);ve(this,Qe);ve(this,vt,null);ve(this,Ye,null);ve(this,nt,null);ve(this,Dt,null);ve(this,rs,0);ve(this,Ut,0);ve(this,Ts,!1);ve(this,Zs,new Set);ve(this,Js,new Set);ve(this,Lt,null);ve(this,Ca,Ti(()=>(ce(this,Lt,hs(g(this,rs))),()=>{ce(this,Lt,null)})));ce(this,dt,t),ce(this,ut,s),ce(this,as,i=>{var o=we;o.b=this,o.f|=Na,a(i)}),this.parent=we.b,this.transform_error=n??this.parent?.transform_error??(i=>i),ce(this,Qe,Pa(()=>{Ee(this,Le,Qa).call(this)},ji))}defer_effect(t){en(t,g(this,Zs),g(this,Js))}is_rendered(){return!this.is_pending&&(!this.parent||this.parent.is_rendered())}has_pending_snippet(){return!!g(this,ut).pending}update_pending_count(t,s){Ee(this,Le,er).call(this,t,s),ce(this,rs,g(this,rs)+t),!(!g(this,Lt)||g(this,Ts))&&(ce(this,Ts,!0),ls(()=>{ce(this,Ts,!1),g(this,Lt)&&Fs(g(this,Lt),g(this,rs))}))}get_effect_pending(){return g(this,Ca).call(this),r(g(this,Lt))}error(t){if(!g(this,ut).onerror&&!g(this,ut).failed)throw t;he?.is_fork?(g(this,vt)&&he.skip_effect(g(this,vt)),g(this,Ye)&&he.skip_effect(g(this,Ye)),g(this,nt)&&he.skip_effect(g(this,nt)),he.on_fork_commit(()=>{Ee(this,Le,tr).call(this,t)})):Ee(this,Le,tr).call(this,t)}}dt=new WeakMap,nr=new WeakMap,ut=new WeakMap,as=new WeakMap,Qe=new WeakMap,vt=new WeakMap,Ye=new WeakMap,nt=new WeakMap,Dt=new WeakMap,rs=new WeakMap,Ut=new WeakMap,Ts=new WeakMap,Zs=new WeakMap,Js=new WeakMap,Lt=new WeakMap,Ca=new WeakMap,Le=new WeakSet,Pi=function(){try{ce(this,vt,ft(()=>g(this,as).call(this,g(this,dt))))}catch(t){this.error(t)}},Ri=function(t){const s=g(this,ut).failed;s&&ce(this,nt,ft(()=>{s(g(this,dt),()=>t,()=>()=>{})}))},qi=function(){const t=g(this,ut).pending;t&&(this.is_pending=!0,ce(this,Ye,ft(()=>t(g(this,dt)))),ls(()=>{var s=ce(this,Dt,document.createDocumentFragment()),a=It();s.append(a),ce(this,vt,Ee(this,Le,ha).call(this,()=>ft(()=>g(this,as).call(this,a)))),g(this,Ut)===0&&(g(this,dt).before(s),ce(this,Dt,null),ds(g(this,Ye),()=>{ce(this,Ye,null)}),Ee(this,Le,pa).call(this,he))}))},Qa=function(){try{if(this.is_pending=this.has_pending_snippet(),ce(this,Ut,0),ce(this,rs,0),ce(this,vt,ft(()=>{g(this,as).call(this,g(this,dt))})),g(this,Ut)>0){var t=ce(this,Dt,document.createDocumentFragment());_r(g(this,vt),t);const s=g(this,ut).pending;ce(this,Ye,ft(()=>s(g(this,dt))))}else Ee(this,Le,pa).call(this,he)}catch(s){this.error(s)}},pa=function(t){this.is_pending=!1,t.transfer_effects(g(this,Zs),g(this,Js))},ha=function(t){var s=we,a=ye,n=st;Pt(g(this,Qe)),gt(g(this,Qe)),zs(g(this,Qe).ctx);try{return ps.ensure(),t()}catch(i){return Jr(i),null}finally{Pt(s),gt(a),zs(n)}},er=function(t,s){var a;if(!this.has_pending_snippet()){this.parent&&Ee(a=this.parent,Le,er).call(a,t,s);return}ce(this,Ut,g(this,Ut)+t),g(this,Ut)===0&&(Ee(this,Le,pa).call(this,s),g(this,Ye)&&ds(g(this,Ye),()=>{ce(this,Ye,null)}),g(this,Dt)&&(g(this,dt).before(g(this,Dt)),ce(this,Dt,null)))},tr=function(t){g(this,vt)&&(tt(g(this,vt)),ce(this,vt,null)),g(this,Ye)&&(tt(g(this,Ye)),ce(this,Ye,null)),g(this,nt)&&(tt(g(this,nt)),ce(this,nt,null));var s=g(this,ut).onerror;let a=g(this,ut).failed;var n=!1,i=!1;const o=()=>{if(n){yi();return}n=!0,i&&oi(),g(this,nt)!==null&&ds(g(this,nt),()=>{ce(this,nt,null)}),Ee(this,Le,ha).call(this,()=>{Ee(this,Le,Qa).call(this)})},u=c=>{try{i=!0,s?.(c,o),i=!1}catch(v){Wt(v,g(this,Qe)&&g(this,Qe).parent)}a&&ce(this,nt,Ee(this,Le,ha).call(this,()=>{try{return ft(()=>{var v=we;v.b=this,v.f|=Na,a(g(this,dt),()=>c,()=>o)})}catch(v){return Wt(v,g(this,Qe).parent),null}}))};ls(()=>{var c;try{c=this.transform_error(t)}catch(v){Wt(v,g(this,Qe)&&g(this,Qe).parent);return}c!==null&&typeof c=="object"&&typeof c.then=="function"?c.then(u,v=>Wt(v,g(this,Qe)&&g(this,Qe).parent)):u(c)})};function Mi(e,t,s,a){const n=Hs;var i=e.filter(p=>!p.settled);if(s.length===0&&i.length===0){a(t.map(n));return}var o=we,u=Di(),c=i.length===1?i[0].promise:i.length>1?Promise.all(i.map(p=>p.promise)):null;function v(p){if((o.f&ht)===0){u();try{a(p)}catch(m){Wt(m,o)}ba()}}var h=on();if(s.length===0){c.then(()=>v(t.map(n))).finally(h);return}function f(){Promise.all(s.map(p=>Li(p))).then(p=>v([...t.map(n),...p])).catch(p=>Wt(p,o)).finally(h)}c?c.then(()=>{u(),f(),ba()}):f()}function Di(){var e=we,t=ye,s=st,a=he;return function(i=!0){Pt(e),gt(t),zs(s),i&&(e.f&ht)===0&&(a?.activate(),a?.apply())}}function ba(e=!0){Pt(null),gt(null),zs(null),e&&he?.deactivate()}function on(){var e=we,t=e.b,s=he,a=t.is_rendered();return t.update_pending_count(1,s),s.increment(a,e),()=>{t.update_pending_count(-1,s),s.decrement(a,e)}}function Hs(e){var t=We|Ue;return we!==null&&(we.f|=Rs),{ctx:st,deps:null,effects:null,equals:Wr,f:t,fn:e,reactions:null,rv:0,v:Ke,wv:0,parent:we,ac:null}}const oa=Symbol("obsolete");function Li(e,t,s){let a=we;a===null&&Zn();var n=void 0,i=hs(Ke),o=!ye,u=new Set;return Zi(()=>{var c=we,v=Nr();n=v.promise;try{Promise.resolve(e()).then(v.resolve,m=>{m!==za&&v.reject(m)}).finally(ba)}catch(m){v.reject(m),ba()}var h=he;if(o){if((c.f&_s)!==0)var f=on();if(a.b.is_rendered())h.async_deriveds.get(c)?.reject(oa);else for(const m of u.values())m.reject(oa);u.add(v),h.async_deriveds.set(c,v)}const p=(m,b=void 0)=>{f?.(),u.delete(v),b!==oa&&(h.activate(),b?(i.f|=Yt,Fs(i,b)):((i.f&Yt)!==0&&(i.f^=Yt),Fs(i,m)),h.deactivate())};v.promise.then(p,m=>p(null,m||"unknown"))}),gn(()=>{for(const c of u)c.reject(oa)}),new Promise(c=>{function v(h){function f(){h===n?c(i):v(n)}h.then(f,f)}v(n)})}function y(e){const t=Hs(e);return Sn(t),t}function ln(e){const t=Hs(e);return t.equals=Yr,t}function Ii(e){var t=e.effects;if(t!==null){e.effects=null;for(var s=0;s0&&!un&&Ki()}return t}function Ki(){un=!1;for(const e of ya){(e.f&Be)!==0&&Me(e,Ft);let t;try{t=aa(e)}catch{t=!0}t&&Ps(e)}ya.clear()}function Bs(e){J(e,e.v+1)}function vn(e,t,s){var a=e.reactions;if(a!==null)for(var n=a.length,i=0;i{if(us===i)return u();var c=ye,v=us;gt(null),Cr(i);var h=u();return gt(c),Cr(v),h};return a&&s.set("length",fe(e.length)),new Proxy(e,{defineProperty(u,c,v){(!("value"in v)||v.configurable===!1||v.enumerable===!1||v.writable===!1)&&ri();var h=s.get(c);return h===void 0?o(()=>{var f=fe(v.value);return s.set(c,f),f}):J(h,v.value,!0),!0},deleteProperty(u,c){var v=s.get(c);if(v===void 0){if(c in u){const h=o(()=>fe(Ke));s.set(c,h),Bs(n)}}else J(v,Ke),Bs(n);return!0},get(u,c,v){if(c===os)return e;var h=s.get(c),f=c in u;if(h===void 0&&(!f||xs(u,c)?.writable)&&(h=o(()=>{var m=Ve(f?u[c]:Ke),b=fe(m);return b}),s.set(c,h)),h!==void 0){var p=r(h);return p===Ke?void 0:p}return Reflect.get(u,c,v)},getOwnPropertyDescriptor(u,c){var v=Reflect.getOwnPropertyDescriptor(u,c);if(v&&"value"in v){var h=s.get(c);h&&(v.value=r(h))}else if(v===void 0){var f=s.get(c),p=f?.v;if(f!==void 0&&p!==Ke)return{enumerable:!0,configurable:!0,value:p,writable:!0}}return v},has(u,c){if(c===os)return!0;var v=s.get(c),h=v!==void 0&&v.v!==Ke||Reflect.has(u,c);if(v!==void 0||we!==null&&(!h||xs(u,c)?.writable)){v===void 0&&(v=o(()=>{var p=h?Ve(u[c]):Ke,m=fe(p);return m}),s.set(c,v));var f=r(v);if(f===Ke)return!1}return h},set(u,c,v,h){var f=s.get(c),p=c in u;if(a&&c==="length")for(var m=v;mfe(Ke)),s.set(m+"",b))}if(f===void 0)(!p||xs(u,c)?.writable)&&(f=o(()=>fe(void 0)),J(f,Ve(v)),s.set(c,f));else{p=f.v!==Ke;var x=o(()=>Ve(v));J(f,x)}var _=Reflect.getOwnPropertyDescriptor(u,c);if(_?.set&&_.set.call(h,v),!p){if(a&&typeof c=="string"){var w=s.get("length"),S=Number(c);Number.isInteger(S)&&S>=w.v&&J(w,S+1)}Bs(n)}return!0},ownKeys(u){r(n);var c=Reflect.ownKeys(u).filter(f=>{var p=s.get(f);return p===void 0||p.v!==Ke});for(var[v,h]of s)h.v!==Ke&&!(v in u)&&c.push(v);return c},setPrototypeOf(){ni()}})}function kr(e){try{if(e!==null&&typeof e=="object"&&os in e)return e[os]}catch{}return e}function Bi(e,t){return Object.is(kr(e),kr(t))}var Sr,fn,pn,hn;function Ni(){if(Sr===void 0){Sr=window,fn=/Firefox/.test(navigator.userAgent);var e=Element.prototype,t=Node.prototype,s=Text.prototype;pn=xs(t,"firstChild").get,hn=xs(t,"nextSibling").get,yr(e)&&(e[Ga]=void 0,e[da]=null,e[Ua]=void 0,e.__e=void 0),yr(s)&&(s[Is]=void 0)}}function It(e=""){return document.createTextNode(e)}function wa(e){return pn.call(e)}function ta(e){return hn.call(e)}function l(e,t){return wa(e)}function ot(e,t=!1){{var s=wa(e);return s instanceof Comment&&s.data===""?ta(s):s}}function d(e,t=1,s=!1){let a=e;for(;t--;)a=ta(a);return a}function Hi(e){e.textContent=""}function _n(){return!1}function Gi(e,t,s){return document.createElementNS(Ur,e,void 0)}let Er=!1;function Ui(){Er||(Er=!0,document.addEventListener("reset",e=>{Promise.resolve().then(()=>{if(!e.defaultPrevented)for(const t of e.target.elements)t[ua]?.()})},{capture:!0}))}function ur(e){var t=ye,s=we;gt(null),Pt(null);try{return e()}finally{gt(t),Pt(s)}}function vr(e,t,s,a=s){e.addEventListener(t,()=>ur(s));const n=e[ua];n?e[ua]=()=>{n(),a(!0)}:e[ua]=()=>a(!0),Ui()}function Wi(e){we===null&&(ye===null&&ti(),ei()),Ot&&Qn()}function Yi(e,t){var s=t.last;s===null?t.last=t.first=e:(s.next=e,e.prev=s,t.last=e)}function Kt(e,t){var s=we;s!==null&&(s.f&Xe)!==0&&(e|=Xe);var a={ctx:st,deps:null,nodes:null,f:e|Ue|pt,first:null,fn:t,last:null,next:null,parent:s,b:s&&s.b,prev:null,teardown:null,wv:0,ac:null};he?.register_created_effect(a);var n=a;if((e&js)!==0)ws!==null?ws.push(a):ps.ensure().schedule(a);else if(t!==null){try{Ps(a)}catch(o){throw tt(a),o}n.deps===null&&n.teardown===null&&n.nodes===null&&n.first===n.last&&(n.f&Rs)===0&&(n=n.first,(e&xt)!==0&&(e&vs)!==0&&n!==null&&(n.f|=vs))}if(n!==null&&(n.parent=s,s!==null&&Yi(n,s),ye!==null&&(ye.f&We)!==0&&(e&Xt)===0)){var i=ye;(i.effects??(i.effects=[])).push(n)}return a}function fr(){return ye!==null&&!St}function gn(e){const t=Kt(ja,null);return Me(t,Be),t.teardown=e,t}function sa(e){Wi();var t=we.f,s=!ye&&(t&Et)!==0&&(t&_s)===0;if(s){var a=st;(a.e??(a.e=[])).push(e)}else return mn(e)}function mn(e){return Kt(js|Gn,e)}function Xi(e){ps.ensure();const t=Kt(Xt|Rs,e);return(s={})=>new Promise(a=>{s.outro?ds(t,()=>{tt(t),a(void 0)}):(tt(t),a(void 0))})}function bn(e){return Kt(js,e)}function Zi(e){return Kt(ks|Rs,e)}function Fa(e,t=0){return Kt(ja|t,e)}function V(e,t=[],s=[],a=[]){Mi(a,t,s,n=>{Kt(ja,()=>e(...n.map(r)))})}function Pa(e,t=0){var s=Kt(xt|t,e);return s}function ft(e){return Kt(Et|Rs,e)}function yn(e){var t=e.teardown;if(t!==null){const s=Ot,a=ye;Ar(!0),gt(null);try{t.call(null)}finally{Ar(s),gt(a)}}}function pr(e,t=!1){var s=e.first;for(e.first=e.last=null;s!==null;){const n=s.ac;n!==null&&ur(()=>{n.abort(za)});var a=s.next;(s.f&Xt)!==0?s.parent=null:tt(s,t),s=a}}function Ji(e){for(var t=e.first;t!==null;){var s=t.next;(t.f&Et)===0&&tt(t),t=s}}function tt(e,t=!0){var s=!1;(t||(e.f&Hn)!==0)&&e.nodes!==null&&e.nodes.end!==null&&(Qi(e.nodes.start,e.nodes.end),s=!0),Me(e,Ha),pr(e,t&&!s),Gs(e,0);var a=e.nodes&&e.nodes.t;if(a!==null)for(const i of a)i.stop();yn(e),e.f^=Ha,e.f|=ht;var n=e.parent;n!==null&&n.first!==null&&wn(e),e.next=e.prev=e.teardown=e.ctx=e.deps=e.fn=e.nodes=e.ac=e.b=null}function Qi(e,t){for(;e!==null;){var s=e===t?null:ta(e);e.remove(),e=s}}function wn(e){var t=e.parent,s=e.prev,a=e.next;s!==null&&(s.next=a),a!==null&&(a.prev=s),t!==null&&(t.first===e&&(t.first=a),t.last===e&&(t.last=s))}function ds(e,t,s=!0){var a=[];xn(e,a,!0);var n=()=>{s&&tt(e),t&&t()},i=a.length;if(i>0){var o=()=>--i||n();for(var u of a)u.out(o)}else n()}function xn(e,t,s){if((e.f&Xe)===0){e.f^=Xe;var a=e.nodes&&e.nodes.t;if(a!==null)for(const u of a)(u.is_global||s)&&t.push(u);for(var n=e.first;n!==null;){var i=n.next;if((n.f&Xt)===0){var o=(n.f&vs)!==0||(n.f&Et)!==0&&(e.f&xt)!==0;xn(n,t,o?s:!1)}n=i}}}function hr(e){kn(e,!0)}function kn(e,t){if((e.f&Xe)!==0){e.f^=Xe,(e.f&Be)===0&&(Me(e,Ue),ps.ensure().schedule(e));for(var s=e.first;s!==null;){var a=s.next,n=(s.f&vs)!==0||(s.f&Et)!==0;kn(s,n?t:!1),s=a}var i=e.nodes&&e.nodes.t;if(i!==null)for(const o of i)(o.is_global||t)&&o.in()}}function _r(e,t){if(e.nodes)for(var s=e.nodes.start,a=e.nodes.end;s!==null;){var n=s===a?null:ta(s);t.append(s),s=n}}let _a=!1,Ot=!1;function Ar(e){Ot=e}let ye=null,St=!1;function gt(e){ye=e}let we=null;function Pt(e){we=e}let _t=null;function Sn(e){ye!==null&&(_t===null?_t=[e]:_t.push(e))}let et=null,at=0,ct=null;function eo(e){ct=e}let En=1,Jt=0,us=Jt;function Cr(e){us=e}function An(){return++En}function aa(e){var t=e.f;if((t&Ue)!==0)return!0;if(t&We&&(e.f&=~fs),(t&Ft)!==0){for(var s=e.deps,a=s.length,n=0;ne.wv)return!0}(t&pt)!==0&&kt===null&&Me(e,Be)}return!1}function Cn(e,t,s=!0){var a=e.reactions;if(a!==null&&!(_t!==null&&is.call(_t,e)))for(var n=0;n{e.ac.abort(za)}),e.ac=null);try{e.f|=ma;var h=e.fn,f=h();e.f|=_s;var p=e.deps,m=he?.is_fork;if(et!==null){var b;if(m||Gs(e,at),p!==null&&at>0)for(p.length=at+et.length,b=0;b{throw _});throw p}}finally{e[Qt]=t,delete e.currentTarget,gt(h),Pt(f)}}}const no=globalThis?.window?.trustedTypes&&globalThis.window.trustedTypes.createPolicy("svelte-trusted-html",{createHTML:e=>e});function io(e){return no?.createHTML(e)??e}function oo(e){var t=Gi("template");return t.innerHTML=io(e.replaceAll("","")),t.content}function xa(e,t){var s=we;s.nodes===null&&(s.nodes={start:e,end:t,a:null,t:null})}function C(e,t){var s=(t&_i)!==0,a=(t&gi)!==0,n,i=!e.startsWith("");return()=>{n===void 0&&(n=oo(i?e:""+e),s||(n=wa(n)));var o=a||fn?document.importNode(n,!0):n.cloneNode(!0);if(s){var u=wa(o),c=o.lastChild;xa(u,c)}else xa(o,o);return o}}function lo(e=""){{var t=It(e+"");return xa(t,t),t}}function ar(){var e=document.createDocumentFragment(),t=document.createComment(""),s=It();return e.append(t,s),xa(t,s),e}function A(e,t){e!==null&&e.before(t)}function R(e,t){var s=t==null?"":typeof t=="object"?`${t}`:t;s!==(e[Is]??(e[Is]=e.nodeValue))&&(e[Is]=s,e.nodeValue=`${s}`)}function co(e,t){return uo(e,t)}const la=new Map;function uo(e,{target:t,anchor:s,props:a={},events:n,context:i,intro:o=!0,transformError:u}){Ni();var c=void 0,v=Xi(()=>{var h=s??t.appendChild(It());zi(h,{pending:()=>{}},m=>{ze({});var b=st;i&&(b.c=i),n&&(a.$$events=n),c=e(m,a)||{},Fe()},u);var f=new Set,p=m=>{for(var b=0;b{for(var m of f)for(const _ of[t,document]){var b=la.get(_),x=b.get(m);--x==0?(_.removeEventListener(m,Tr),b.delete(m),b.size===0&&la.delete(_)):b.set(m,x)}sr.delete(p),h!==s&&h.parentNode?.removeChild(h)}});return vo.set(c,v),c}let vo=new WeakMap;var bt,jt,it,ns,Qs,ea,$a;class Fn{constructor(t,s=!0){Je(this,"anchor");ve(this,bt,new Map);ve(this,jt,new Map);ve(this,it,new Map);ve(this,ns,new Set);ve(this,Qs,!0);ve(this,ea,t=>{if(g(this,bt).has(t)){var s=g(this,bt).get(t),a=g(this,jt).get(s);if(a)hr(a),g(this,ns).delete(s);else{var n=g(this,it).get(s);n&&(g(this,jt).set(s,n.effect),g(this,it).delete(s),n.fragment.lastChild.remove(),this.anchor.before(n.fragment),a=n.effect)}for(const[i,o]of g(this,bt)){if(g(this,bt).delete(i),i===t)break;const u=g(this,it).get(o);u&&(tt(u.effect),g(this,it).delete(o))}for(const[i,o]of g(this,jt)){if(i===s||g(this,ns).has(i))continue;const u=()=>{if(Array.from(g(this,bt).values()).includes(i)){var v=document.createDocumentFragment();_r(o,v),v.append(It()),g(this,it).set(i,{effect:o,fragment:v})}else tt(o);g(this,ns).delete(i),g(this,jt).delete(i)};g(this,Qs)||!a?(g(this,ns).add(i),ds(o,u,!1)):u()}}});ve(this,$a,t=>{g(this,bt).delete(t);const s=Array.from(g(this,bt).values());for(const[a,n]of g(this,it))s.includes(a)||(tt(n.effect),g(this,it).delete(a))});this.anchor=t,ce(this,Qs,s)}ensure(t,s){var a=he,n=_n();if(s&&!g(this,jt).has(t)&&!g(this,it).has(t))if(n){var i=document.createDocumentFragment(),o=It();i.append(o),g(this,it).set(t,{effect:ft(()=>s(o)),fragment:i})}else g(this,jt).set(t,ft(()=>s(this.anchor)));if(g(this,bt).set(a,t),n){for(const[u,c]of g(this,jt))u===t?a.unskip_effect(c):a.skip_effect(c);for(const[u,c]of g(this,it))u===t?a.unskip_effect(c.effect):a.skip_effect(c.effect);a.oncommit(g(this,ea)),a.ondiscard(g(this,$a))}else g(this,ea).call(this,a)}}bt=new WeakMap,jt=new WeakMap,it=new WeakMap,ns=new WeakMap,Qs=new WeakMap,ea=new WeakMap,$a=new WeakMap;function me(e,t,s=!1){var a=new Fn(e),n=s?vs:0;function i(o,u){a.ensure(o,u)}Pa(()=>{var o=!1;t((u,c=0)=>{o=!0,i(c,u)}),o||i(-1,null)},n)}function Ds(e,t){return t}function fo(e,t,s){for(var a=[],n=t.length,i,o=t.length,u=0;u{if(i){if(i.pending.delete(f),i.done.add(f),i.pending.size===0){var p=e.outrogroups;rr(e,Ta(i.done)),p.delete(i),p.size===0&&(e.outrogroups=null)}}else o-=1},!1)}if(o===0){var c=a.length===0&&s!==null;if(c){var v=s,h=v.parentNode;Hi(h),h.append(v),e.items.clear()}rr(e,t,!c)}else i={pending:new Set(t),done:new Set},(e.outrogroups??(e.outrogroups=new Set)).add(i)}function rr(e,t,s=!0){var a;if(e.pending.size>0){a=new Set;for(const o of e.pending.values())for(const u of o)a.add(e.items.get(u).e)}for(var n=0;n{var E=s();return ir(E)?E:E==null?[]:Ta(E)}),p,m=new Map,b=!0;function x(E){(S.effect.f&ht)===0&&(S.pending.delete(E),S.fallback=h,po(S,p,o,t,a),h!==null&&(p.length===0?(h.f&zt)===0?hr(h):(h.f^=zt,Os(h,null,o)):ds(h,()=>{h=null})))}function _(E){S.pending.delete(E)}var w=Pa(()=>{p=r(f);for(var E=p.length,F=new Set,Y=he,T=_n(),z=0;zi(o)):(h=ft(()=>i(jr??(jr=It()))),h.f|=zt)),E>F.size&&Jn(),!b)if(m.set(Y,F),T){for(const[q,B]of u)F.has(q)||Y.skip_effect(B.e);Y.oncommit(x),Y.ondiscard(_)}else x(Y);r(f)}),S={effect:w,items:u,pending:m,outrogroups:null,fallback:h};b=!1}function Ls(e){for(;e!==null&&(e.f&Et)===0;)e=e.next;return e}function po(e,t,s,a,n){var i=(a&di)!==0,o=t.length,u=e.items,c=Ls(e.effect.first),v,h=null,f,p=[],m=[],b,x,_,w;if(i)for(w=0;w0){var O=(a&Gr)!==0&&o===0?s:null;if(i){for(w=0;w{if(f!==void 0)for(_ of f)_.nodes?.a?.apply()})}function ho(e,t,s,a,n,i,o,u){var c=(o&li)!==0?(o&ui)===0?Oi(s,!1,!1):hs(s):null,v=(o&ci)!==0?hs(n):null;return{v:c,i:v,e:ft(()=>(i(t,c??s,v??n,u),()=>{e.delete(a)}))}}function Os(e,t,s){if(e.nodes)for(var a=e.nodes.start,n=e.nodes.end,i=t&&(t.f&zt)===0?t.nodes.start:s;a!==null;){var o=ta(a);if(i.before(a),a===n)return;a=o}}function Nt(e,t,s){t===null?e.effect.first=s:t.next=s,s===null?e.effect.last=t:s.prev=t}function Pn(e,t,...s){var a=new Fn(e);Pa(()=>{const n=t()??null;a.ensure(n,n&&(i=>n(i,...s)))},vs)}const zr=[...`
+\r\f \v\uFEFF`];function _o(e,t,s){var a=e==null?"":""+e;if(t&&(a=a?a+" "+t:t),s){for(var n of Object.keys(s))if(s[n])a=a?a+" "+n:n;else if(a.length)for(var i=n.length,o=0;(o=a.indexOf(n,o))>=0;){var u=o+i;(o===0||zr.includes(a[o-1]))&&(u===a.length||zr.includes(a[u]))?a=(o===0?"":a.substring(0,o))+a.substring(u+1):o=u}}return a===""?null:a}function Fr(e,t=!1){var s=t?" !important;":";",a="";for(var n of Object.keys(e)){var i=e[n];i!=null&&i!==""&&(a+=" "+n+": "+i+s)}return a}function Ia(e){return e[0]!=="-"||e[1]!=="-"?e.toLowerCase():e}function go(e,t){if(t){var s="",a,n;if(Array.isArray(t)?(a=t[0],n=t[1]):a=t,e){e=String(e).replaceAll(/\s*\/\*.*?\*\/\s*/g,"").trim();var i=!1,o=0,u=!1,c=[];a&&c.push(...Object.keys(a).map(Ia)),n&&c.push(...Object.keys(n).map(Ia));var v=0,h=-1;const x=e.length;for(var f=0;f{Us(e,e.__value)});t.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["value"]}),gn(()=>{t.disconnect()})}function Sa(e,t,s=t){var a=new WeakSet,n=!0;vr(e,"change",i=>{var o=i?"[selected]":":checked",u;if(e.multiple)u=[].map.call(e.querySelectorAll(o),Ns);else{var c=e.querySelector(o)??e.querySelector("option:not([disabled])");u=c&&Ns(c)}s(u),e.__value=u,he!==null&&a.add(he)}),bn(()=>{var i=t();if(e===document.activeElement){var o=he;if(a.has(o))return}if(Us(e,i,n),n&&i===void 0){var u=e.querySelector(":checked");u!==null&&(i=Ns(u),s(i))}e.__value=i,n=!1}),ka(e)}function Ns(e){return"__value"in e?e.__value:e.value}const mo=Symbol("is custom element"),bo=Symbol("is html"),yo=Yn?"progress":"PROGRESS";function Ws(e,t){var s=Rn(e);s.value===(s.value=t??void 0)||e.value===t&&(t!==0||e.nodeName!==yo)||(e.value=t??"")}function te(e,t,s,a){var n=Rn(e);n[t]!==(n[t]=s)&&(t==="loading"&&(e[Wn]=s),s==null?e.removeAttribute(t):typeof s!="string"&&wo(e).includes(t)?e[t]=s:e.setAttribute(t,s))}function Rn(e){return e[da]??(e[da]={[mo]:e.nodeName.includes("-"),[bo]:e.namespaceURI===Ur})}var Pr=new Map;function wo(e){var t=e.getAttribute("is")||e.nodeName,s=Pr.get(t);if(s)return s;Pr.set(t,s=[]);for(var a,n=e,i=Element.prototype;i!==n;){a=On(n);for(var o in a)a[o].set&&o!=="innerHTML"&&o!=="textContent"&&o!=="innerText"&&s.push(o);n=Kr(n)}return s}function Vt(e,t,s=t){var a=new WeakSet;vr(e,"input",async n=>{var i=n?e.defaultValue:e.value;if(i=Oa(e)?Ka(i):i,s(i),he!==null&&a.add(he),await so(),i!==(i=t())){var o=e.selectionStart,u=e.selectionEnd,c=e.value.length;if(e.value=i??"",u!==null){var v=e.value.length;o===u&&u===c&&v>c?(e.selectionStart=v,e.selectionEnd=v):(e.selectionStart=o,e.selectionEnd=Math.min(u,v))}}}),qs(t)==null&&e.value&&(s(Oa(e)?Ka(e.value):e.value),he!==null&&a.add(he)),Fa(()=>{var n=t();if(e===document.activeElement){var i=he;if(a.has(i))return}Oa(e)&&n===Ka(e.value)||e.type==="date"&&!n&&!e.value||n!==e.value&&(e.value=n??"")})}function xo(e,t,s=t){vr(e,"change",a=>{var n=a?e.defaultChecked:e.checked;s(n)}),qs(t)==null&&s(e.checked),Fa(()=>{var a=t();e.checked=!!a})}function Oa(e){var t=e.type;return t==="number"||t==="range"}function Ka(e){return e===""?null:+e}function Ba(e,t){return e===t||e?.[os]===t}function ko(e={},t,s,a){var n=st.r,i=we;return bn(()=>{var o,u;return Fa(()=>{o=u,u=[],qs(()=>{Ba(s(...u),e)||(t(e,...u),o&&Ba(s(...o),e)&&t(null,...o))})}),()=>{let c=i;for(;c!==n&&c.parent!==null&&c.parent.f&Ha;)c=c.parent;const v=()=>{u&&Ba(s(...u),e)&&t(null,...u)},h=c.teardown;c.teardown=()=>{v(),h?.()}}}),e}function $e(e,t,s,a){var n=!0,i=(s&pi)!==0,o=(s&hi)!==0,u=a,c=!0,v=void 0,h=()=>o&&n?(v??(v=Hs(a)),r(v)):(c&&(c=!1,u=o?qs(a):a),u);let f;if(i){var p=os in e||Un in e;f=xs(e,t)?.set??(p&&t in e?F=>e[t]=F:void 0)}var m,b=!1;i?[m,b]=Si(()=>e[t]):m=e[t],m===void 0&&a!==void 0&&(m=h(),f&&(ai(),f(m)));var x;if(x=()=>{var F=e[t];return F===void 0?h():(c=!0,F)},(s&fi)===0)return x;if(f){var _=e.$$legacy;return(function(F,Y){return arguments.length>0?((!Y||_||b)&&f(Y?x():F),F):x()})}var w=!1,S=((s&vi)!==0?Hs:ln)(()=>(w=!1,x()));i&&r(S);var E=we;return(function(F,Y){if(arguments.length>0){const T=Y?r(S):i?Ve(F):F;return J(S,T),w=!0,u!==void 0&&(u=T),F}return Ot&&w||(E.f&ht)!==0?S.v:r(S)})}function So(e){st===null&&Xn(),sa(()=>{const t=qs(e);if(typeof t=="function")return t})}const Eo="5";var Or;typeof window<"u"&&((Or=window.__svelte??(window.__svelte={})).v??(Or.v=new Set)).add(Eo);const Rt=typeof window<"u"&&window.slashedApp?window.slashedApp:{defaults:{},settings:{},tabs:{},rest:{url:"",nonce:""}},ne={defaults:Rt.defaults||{},tabs:Rt.tabs||{},rest:Rt.rest||{url:"",nonce:""},inventory:Rt.inventory||{variables:[],sf_classes:[],is_classes:[]},pluginSettings:Rt.pluginSettings||{},versions:Rt.versions||{plugin:"",framework:""},activeIntegrations:Rt.activeIntegrations||{bricks:!0},bricksFonts:Rt.bricksFonts||[]},Q=Ve(structuredClone(Rt.settings||{})),re=Ve({activeTab:Ao(ne.tabs)||"colors",dirty:!1,saving:!1,lastSavedAt:null,error:""});function Ao(e){for(const t in e)return t;return null}function gr(){re.dirty=!0,re.error=""}function Rr(e){Q[e]&&delete Q[e]}function Ea(){const e=Q.spacing??{},t=ne.defaults?.spacing??{},s=(o,u)=>{const c=e[o],v=parseFloat(c!==void 0&&c!==""?c:t[o]??u);return Number.isFinite(v)?v:u},a=s("viewport_min",22.5),n=s("viewport_max",95),i=n>a?n:a+.5;return{minRem:a,maxRem:i,minPx:Math.round(a*16),maxPx:Math.round(i*16)}}function Co(e,t){const s=Q[e];if(!s)return"";const a=s[t];return a==null?"":String(a)}function yt(e,t,s){Q[e]||(Q[e]={}),s===""||s===null||s===void 0||typeof s=="string"&&s.trim()===""?delete Q[e][t]:Q[e][t]=String(s),gr()}var $o=C(''),To=C('');function jo(e,t){ze(t,!0);var s=To();de(s,21,()=>Object.entries(ne.tabs),([a,n])=>a,(a,n)=>{var i=y(()=>wt(r(n),2));let o=()=>r(i)[0],u=()=>r(i)[1];var c=$o();let v;var h=l(c);V(()=>{v=Ie(c,1,"tab-nav__btn svelte-yyiz68",null,v,{active:re.activeTab===o()}),R(h,u())}),ge("click",c,()=>re.activeTab=o()),A(a,c)}),A(e,s),Fe()}He(["click"]);var zo=C(' '),Fo=C(' ',1),Po=C(''),Ro=C(' ');function ca(e,t){ze(t,!0);let s=$e(t,"hexHint",3,""),a=$e(t,"rawHint",3,""),n=$e(t,"cssVar",3,"");const i=/^#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/,o=(()=>{const q=(Q.colors?.[t.storeKey]??"").trim(),B=q===""||i.test(q);return{mode:B?"hex":"raw",hex:B?q:"",raw:B?"":q}})();let u=fe(Ve(o.mode)),c=fe(Ve(o.hex)),v=fe(Ve(o.raw));function h(){Q.colors||(Q.colors={});const q=r(v).trim(),B=r(c).trim(),$=r(u)==="raw"?q:B;$===""?delete Q.colors[t.storeKey]:Q.colors[t.storeKey]=$,gr()}function f(){r(u)==="hex"?(J(u,"raw"),J(c,"")):(J(u,"hex"),J(v,"")),h()}const p=y(()=>(r(u)==="raw"?r(v):r(c))||s()||"transparent");var m=Ro(),b=l(m),x=l(b),_=l(x),w=d(x,2);{var S=q=>{var B=zo(),$=l(B);V(()=>R($,n())),A(q,B)};me(w,q=>{n()&&q(S)})}var E=d(b,2),F=l(E);let Y;var T=d(F,2);{var z=q=>{var B=Fo(),$=ot(B),k=d($,2);V(()=>{te($,"id",t.storeKey),te(k,"placeholder",s())}),ge("input",$,h),Vt($,()=>r(c),P=>J(c,P)),ge("input",k,h),Vt(k,()=>r(c),P=>J(c,P)),A(q,B)},D=q=>{var B=Po();V(()=>{te(B,"id",t.storeKey),te(B,"placeholder",a())}),ge("input",B,h),Vt(B,()=>r(v),$=>J(v,$)),A(q,B)};me(T,q=>{r(u)==="hex"?q(z):q(D,-1)})}var O=d(T,2),K=l(O);V(()=>{te(x,"for",t.storeKey),R(_,t.label),Y=pe(F,"",Y,{background:r(p)}),R(K,r(u)==="hex"?"Advanced (oklch / raw)":"Use HEX picker")}),ge("click",O,f),A(e,m),Fe()}He(["input","click"]);var qo=C(''),Mo=C(' ');function ra(e,t){ze(t,!0);let s=fe(!1);const a=`adv-body-${Math.random().toString(36).slice(2,9)}`;var n=Mo(),i=l(n),o=d(l(i));let u;var c=l(o),v=d(i,2);{var h=f=>{var p=qo(),m=l(p);Pn(m,()=>t.children),V(()=>te(p,"id",a)),A(f,p)};me(v,f=>{r(s)&&f(h)})}V(()=>{te(i,"aria-expanded",r(s)),te(i,"aria-controls",a),u=Ie(o,1,"advanced-section__arrow",null,u,{open:r(s)}),R(c,r(s)?"▲":"▼")}),ge("click",i,()=>J(s,!r(s))),A(e,n),Fe()}He(["click"]);var Do=C('Brand Colors — Dark Mode
Status Colors — Dark Mode
',1),Lo=C(`Status Colors — Light Mode
The framework auto-derives dark mode from light source colors using CSS relative color syntax
(oklch(from light clamp(0.65, 0.95−l·0.5, 0.88) c·0.9 h)). Turn this on only
when you need precise per-color dark overrides; auto-derivation is usually good enough.
`,1),Io=C(`Brand Colors — Light Mode
Pick a color via the HEX input, or switch to Advanced to paste any
CSS color value (oklch, rgb, hsl, var(...), etc). Whatever you save is fed
- straight into the framework as the source of the brand scale.
`);function Vo(e,t){ze(t,!0);const s=ie.defaults?.colors??{},a=h=>h.charAt(0).toUpperCase()+h.slice(1),n=Object.entries(s.brand??{}),i=y(()=>Co("colors","dark_overrides_enabled")!=="0");function o(){yt("colors","dark_overrides_enabled",r(i)?"0":"1")}var u=Io(),c=d(l(u),4);de(c,21,()=>n,([h,f])=>h,(h,f)=>{var p=y(()=>wt(r(f),2));let m=()=>r(p)[0],b=()=>r(p)[1];{let x=y(()=>`brand_${m()}`),_=y(()=>a(m())),w=y(()=>s.brand_hex_hints?.[m()]??""),S=y(()=>`--sf-color-${m()}-light`);ca(h,{get storeKey(){return r(x)},get label(){return r(_)},get hexHint(){return r(w)},get rawHint(){return b()},get cssVar(){return r(S)}})}});var v=d(c,2);ra(v,{children:(h,f)=>{var p=Lo(),m=d(ot(p),2);de(m,21,()=>Object.entries(s.status??{}),([T,z])=>T,(T,z)=>{var D=y(()=>wt(r(z),2));let O=()=>r(D)[0],K=()=>r(D)[1];{let q=y(()=>`status_${O()}`),B=y(()=>a(O())),$=y(()=>s.status_hex_hints?.[O()]??""),k=y(()=>`--sf-color-${O()}-light`);ca(T,{get storeKey(){return r(q)},get label(){return r(B)},get hexHint(){return r($)},get rawHint(){return K()},get cssVar(){return r(k)}})}});var b=d(m,2),x=l(b),_=l(x);let w;var S=d(_,2),A=l(S),F=d(b,2);{var Y=T=>{var z=Do(),D=d(ot(z),2);de(D,21,()=>Object.entries(s.brand_dark??s.brand??{}),([K])=>K,(K,q)=>{var B=y(()=>wt(r(q),1));let $=()=>r(B)[0];{let k=y(()=>`brand_dark_${$()}`),P=y(()=>a($())),G=y(()=>s.brand_dark_hex_hints?.[$()]??""),Z=y(()=>s.brand_dark?.[$()]??""),j=y(()=>`--sf-color-${$()}-dark`);ca(K,{get storeKey(){return r(k)},get label(){return r(P)},get hexHint(){return r(G)},get rawHint(){return r(Z)},get cssVar(){return r(j)}})}});var O=d(D,4);de(O,21,()=>Object.entries(s.status_dark??s.status??{}),([K])=>K,(K,q)=>{var B=y(()=>wt(r(q),1));let $=()=>r(B)[0];{let k=y(()=>`status_dark_${$()}`),P=y(()=>a($())),G=y(()=>s.status_dark_hex_hints?.[$()]??""),Z=y(()=>s.status_dark?.[$()]??""),j=y(()=>`--sf-color-${$()}-dark`);ca(K,{get storeKey(){return r(k)},get label(){return r(P)},get hexHint(){return r(G)},get rawHint(){return r(Z)},get cssVar(){return r(j)}})}}),E(T,z)};me(F,T=>{r(i)&&T(Y)})}V(()=>{w=Ie(_,1,"dark-toggle-btn svelte-1vle0rm",null,w,{on:r(i)}),te(_,"aria-pressed",r(i)),R(A,r(i)?"Active — custom values override auto-derivation":"Off — dark mode auto-derived from light source colors")}),ge("click",_,o),E(h,p)},$$slots:{default:!0}}),E(e,u),Fe()}He(["click"]);var Oo=C(''),Ko=C(' '),Bo=C(' '),No=C('
'),Ho=C(' ');function na(e,t){let s=$e(t,"cssVar",3,""),a=$e(t,"fieldId",3,""),n=$e(t,"description",3,"");var i=Ho(),o=l(i),u=l(o);{var c=_=>{var w=Oo(),S=l(w);V(()=>{te(w,"for",a()),R(S,t.label)}),E(_,w)},v=_=>{var w=Ko(),S=l(w);V(()=>R(S,t.label)),E(_,w)};me(u,_=>{a()?_(c):_(v,-1)})}var h=d(u,2);{var f=_=>{var w=Bo(),S=l(w);V(()=>R(S,s())),E(_,w)};me(h,_=>{s()&&_(f)})}var p=d(o,2),m=l(p);Pn(m,()=>t.children??Br);var b=d(m,2);{var x=_=>{var w=No(),S=l(w);V(()=>R(S,n())),E(_,w)};me(b,_=>{n()&&_(x)})}E(e,i)}var Go=C('');function je(e,t){ze(t,!0);let s=$e(t,"default",3,""),a=$e(t,"cssVar",3,""),n=$e(t,"description",3,""),i=$e(t,"mono",3,!1),o=$e(t,"width",3,"320px");const u=y(()=>Q[t.section]?.[t.fieldKey]===void 0||Q[t.section]?.[t.fieldKey]===null?"":String(Q[t.section][t.fieldKey]));function c(v){yt(t.section,t.fieldKey,v.currentTarget.value)}na(e,{get label(){return t.label},get cssVar(){return a()},get fieldId(){return t.fieldKey},get description(){return n()},children:(v,h)=>{var f=Go();let p,m;V(b=>{te(f,"id",t.fieldKey),p=Ie(f,1,"text svelte-j8yw6l",null,p,{mono:i()}),Ws(f,r(u)),te(f,"placeholder",b),m=pe(f,"",m,{width:o()})},[()=>String(s())]),ge("input",f,c),E(v,f)},$$slots:{default:!0}}),Fe()}He(["input"]);async function Ra(e,t){const{url:s,nonce:a}=ie.rest;if(!s)return console.info("[slashed-admin] (dev) would POST",e,t),{ok:!0,dev:!0};const n=await fetch(s+e,{method:"POST",credentials:"same-origin",headers:{"Content-Type":"application/json","X-WP-Nonce":a},body:JSON.stringify(t)});if(!n.ok){const i=await n.text();throw new Error(i||`HTTP ${n.status}`)}return n.json()}function qr(e,t){return Ra("/tokens",{section:e,values:t})}function Mr(e){return Ra("/tokens/reset",{section:e})}function Uo(e){return Ra("/settings",e)}async function Wo(){const{url:e,nonce:t}=ie.rest;if(!e)return console.info("[slashed-admin] (dev) would GET /bricks-fonts"),ie.bricksFonts;const s=await fetch(e+"/bricks-fonts",{credentials:"same-origin",headers:{"X-WP-Nonce":t}});if(!s.ok)throw new Error(await s.text()||`HTTP ${s.status}`);return(await s.json()).fonts??[]}async function Yo(){const{url:e,nonce:t}=ie.rest;if(!e)return console.info("[slashed-admin] (dev) would GET /tokens/export"),{schema_version:"1",tokens:{},plugin_settings:{},dev:!0};const s=await fetch(e+"/tokens/export",{credentials:"same-origin",headers:{"X-WP-Nonce":t}});if(!s.ok)throw new Error(await s.text()||`HTTP ${s.status}`);return s.json()}function Xo(e){return Ra("/tokens/import",e)}var Zo=C(''),Jo=C('Bricks'),Qo=C(""),el=C(''),tl=C(""),sl=C(''),al=C('No Bricks fonts found. Add fonts in Bricks › Settings › Custom Fonts or the Bricks Font Manager, then reload this page.
'),rl=C(''),nl=C('The quick brown fox'),il=C(' ');function Dr(e,t){ze(t,!0);let s=$e(t,"default",3,""),a=$e(t,"cssVar",3,""),n=$e(t,"description",3,"");const i=[{label:"System UI",value:"system-ui, sans-serif"},{label:"Neo-Grotesque",value:"Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif"},{label:"Geometric Humanist",value:"Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif"},{label:"Classical Humanist",value:"Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif"},{label:"Humanist Sans",value:"Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif"},{label:"Industrial Sans",value:"'Bahnschrift', 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif"},{label:"Rounded Sans",value:"ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif"},{label:"Transitional Serif",value:"Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif"},{label:"Old Style Serif",value:"'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif"},{label:"Slab Serif",value:"Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif"},{label:"Antique Serif",value:"Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif"},{label:"Didone Serif",value:"Didact Gothic, 'Bodoni MT', 'Bodoni 72', Didot, 'Playfair Display', serif"},{label:"Monospace",value:"ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace"},{label:"Handwritten",value:"'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive"}];let o=fe(Ve(ie.bricksFonts));const u=ie.activeIntegrations?.bricks??!0;So(async()=>{try{const S=await Wo();J(o,S,!0)}catch{}});const c=y(()=>Q[t.section]?.[t.fieldKey]===void 0||Q[t.section]?.[t.fieldKey]===null?"":String(Q[t.section][t.fieldKey])),v=y(()=>r(c)||String(s()));function h(S){const A=(S||String(s())).trim().toLowerCase();return u&&r(o).some(F=>A===F.family.toLowerCase())?"bricks":i.some(F=>A===F.value.toLowerCase())?"system":"manual"}let f=fe(Ve(h(r(v))));function p(S){J(f,S,!0),S==="system"?i.find(F=>F.value.toLowerCase()===r(v).toLowerCase())||yt(t.section,t.fieldKey,i[0].value):S==="bricks"&&!r(o).find(F=>F.family.toLowerCase()===r(v).toLowerCase())&&r(o).length>0&&yt(t.section,t.fieldKey,r(o)[0].family)}function m(S){yt(t.section,t.fieldKey,S.currentTarget.value)}function b(S){yt(t.section,t.fieldKey,S.currentTarget.value)}function x(S){yt(t.section,t.fieldKey,S.currentTarget.value)}const _={adobe:" (Adobe)",google:" (Google)"},w=S=>_[S]??"";na(e,{get label(){return t.label},get cssVar(){return a()},get fieldId(){return t.fieldKey},get description(){return n()},children:(S,A)=>{var F=il(),Y=l(F),T=l(Y);let z;var D=d(T,2);{var O=N=>{var L=Zo();let H;V(()=>H=Ie(L,1,"source-tab svelte-ow2kvz",null,H,{"source-tab--active":r(f)==="bricks"})),ge("click",L,()=>p("bricks")),E(N,L)},K=N=>{var L=Jo();E(N,L)};me(D,N=>{u?N(O):N(K,-1)})}var q=d(D,2);let B;var $=d(Y,2);{var k=N=>{var L=el();de(L,21,()=>i,se=>se.value,(se,ne)=>{var ae=Qo(),oe=l(ae),U={};V(()=>{R(oe,r(ne).label),U!==(U=r(ne).value)&&(ae.value=(ae.__value=r(ne).value)??"")}),E(se,ae)});var H;ka(L),V(()=>{te(L,"id",t.fieldKey),H!==(H=r(v))&&(L.value=(L.__value=r(v))??"",Us(L,r(v)))}),ge("change",L,m),E(N,L)},P=N=>{var L=ar(),H=ot(L);{var se=ae=>{var oe=sl();de(oe,21,()=>r(o),le=>le.family,(le,be)=>{var xe=tl(),Te=l(xe),Pe={};V(Re=>{R(Te,`${r(be).label??""}${Re??""}`),Pe!==(Pe=r(be).family)&&(xe.value=(xe.__value=r(be).family)??"")},[()=>w(r(be).source)]),E(le,xe)});var U;ka(oe),V(()=>{te(oe,"id",t.fieldKey),U!==(U=r(v))&&(oe.value=(oe.__value=r(v))??"",Us(oe,r(v)))}),ge("change",oe,b),E(ae,oe)},ne=ae=>{var oe=al();E(ae,oe)};me(H,ae=>{r(o).length>0?ae(se):ae(ne,-1)})}E(N,L)},G=N=>{var L=rl();V(H=>{te(L,"id",t.fieldKey),Ws(L,r(c)),te(L,"placeholder",H)},[()=>String(s())]),ge("input",L,x),E(N,L)};me($,N=>{r(f)==="system"?N(k):r(f)==="bricks"&&u?N(P,1):N(G,-1)})}var Z=d($,2);{var j=N=>{var L=nl();V(()=>pe(L,`font-family: ${r(v)??""}`)),E(N,L)};me(Z,N=>{r(v)&&N(j)})}V(()=>{z=Ie(T,1,"source-tab svelte-ow2kvz",null,z,{"source-tab--active":r(f)==="system"}),B=Ie(q,1,"source-tab svelte-ow2kvz",null,B,{"source-tab--active":r(f)==="manual"})}),ge("click",T,()=>p("system")),ge("click",q,()=>p("manual")),E(S,F)},$$slots:{default:!0}}),Fe()}He(["click","change","input"]);var ol=C(' '),ll=C(' ',1);function Ge(e,t){ze(t,!0);let s=$e(t,"min",3,void 0),a=$e(t,"max",3,void 0),n=$e(t,"step",3,void 0),i=$e(t,"default",3,""),o=$e(t,"cssVar",3,""),u=$e(t,"unit",3,""),c=$e(t,"description",3,""),v=$e(t,"width",3,"120px");const h=y(()=>Q[t.section]?.[t.fieldKey]===void 0||Q[t.section]?.[t.fieldKey]===null?"":String(Q[t.section][t.fieldKey]));function f(p){yt(t.section,t.fieldKey,p.currentTarget.value)}na(e,{get label(){return t.label},get cssVar(){return o()},get fieldId(){return t.fieldKey},get description(){return c()},children:(p,m)=>{var b=ll(),x=ot(b);let _;var w=d(x,2);{var S=A=>{var F=ol(),Y=l(F);V(()=>R(Y,u())),E(A,F)};me(w,A=>{u()&&A(S)})}V(A=>{te(x,"id",t.fieldKey),te(x,"min",s()),te(x,"max",a()),te(x,"step",n()),Ws(x,r(h)),te(x,"placeholder",A),_=pe(x,"",_,{width:v()})},[()=>String(i())]),ge("input",x,f),E(p,b)},$$slots:{default:!0}}),Fe()}He(["input"]);var cl=C(' '),dl=C(' '),ul=C('Display Scale
'),vl=C('Live Scale Preview
Text Scale
');function fl(e,t){ze(t,!0);const s=16,a=y(Ea);let n=fe(Ve(Ea().maxPx));sa(()=>{r(n)r(a).maxPx&&J(n,r(a).maxPx,!0)});const o=(ie.defaults?.typography??{}).font_sizes??{};function u(q){const B=Q.typography??{},$=o[q]??{},k=B[`size_${q}_min`],P=B[`size_${q}_max`],G=k!==void 0&&k!==""?parseFloat(k):$.min??.75,Z=P!==void 0&&P!==""?parseFloat(P):$.max??1;return{min:G,max:Z}}const c=y(()=>{const q=Math.max(0,Math.min(1,(r(n)-r(a).minPx)/(r(a).maxPx-r(a).minPx))),B={};for(const $ of Object.keys(o)){const{min:k,max:P}=u($),G=k+(P-k)*q,Z=G*s;B[$]={sizePx:Z,sizeRem:G.toFixed(3)}}return B}),v=["2xs","xs","s","m","l","xl","2xl","3xl","4xl"],h=["display-s","display-m","display-l"],f=y(()=>v.filter(q=>o[q])),p=y(()=>h.filter(q=>o[q]));var m=vl(),b=l(m),x=d(l(b),2),_=l(x),w=l(_),S=d(_,2),A=d(S,2),F=l(A),Y=d(A,2),T=l(Y),z=d(b,2),D=d(l(z),2);de(D,16,()=>r(f),q=>q,(q,B)=>{const $=y(()=>r(c)[B]);var k=ar(),P=ot(k);{var G=Z=>{var j=cl(),N=l(j),L=l(N),H=d(N,2);let se;var ne=l(H),ae=d(H,2),oe=l(ae);V((U,le)=>{R(L,B),se=pe(H,"",se,U),R(ne,B),R(oe,`${r($).sizeRem??""}rem / ${le??""}px`)},[()=>({"font-size":`${r($).sizePx.toFixed(1)??""}px`}),()=>r($).sizePx.toFixed(1)]),E(Z,j)};me(P,Z=>{r($)&&Z(G)})}E(q,k)});var O=d(z,2);{var K=q=>{var B=ul(),$=d(l(B),2);de($,16,()=>r(p),k=>k,(k,P)=>{const G=y(()=>r(c)[P]);var Z=ar(),j=ot(Z);{var N=L=>{var H=dl(),se=l(H),ne=l(se),ae=d(se,2);let oe;var U=l(ae),le=d(ae,2),be=l(le);V((xe,Te)=>{R(ne,P),oe=pe(ae,"",oe,xe),R(U,P),R(be,`${r(G).sizeRem??""}rem / ${Te??""}px`)},[()=>({"font-size":`${r(G).sizePx.toFixed(1)??""}px`}),()=>r(G).sizePx.toFixed(1)]),E(L,H)};me(j,L=>{r(G)&&L(N)})}E(k,Z)}),E(q,B)};me(O,q=>{r(p).length>0&&q(K)})}V(()=>{R(w,`${r(a).minPx??""}px`),te(S,"min",r(a).minPx),te(S,"max",r(a).maxPx),R(F,`${r(a).maxPx??""}px`),R(T,`${r(n)??""}px`)}),Vt(S,()=>r(n),q=>J(n,q)),E(e,m),Fe()}var pl=C(""),hl=C(""),_l=C(' '),gl=C('Scale Generator Computes all step min/max values from a modular scale. Click Apply to write them to the fields below. ');function ml(e,t){ze(t,!0);const s=[{label:"Minor Second (1.067)",value:1.067},{label:"Major Second (1.125)",value:1.125},{label:"Minor Third (1.200)",value:1.2},{label:"Major Third (1.250)",value:1.25},{label:"Perfect Fourth (1.333)",value:1.333},{label:"Aug. Fourth (1.414)",value:1.414},{label:"Perfect Fifth (1.500)",value:1.5},{label:"Golden Ratio (1.618)",value:1.618},{label:"Major Sixth (1.667)",value:1.667},{label:"Octave (2.000)",value:2}],a=[{name:"2xs",idx:-4},{name:"xs",idx:-3},{name:"s",idx:-2},{name:"m",idx:0},{name:"l",idx:1},{name:"xl",idx:2},{name:"2xl",idx:3},{name:"3xl",idx:4},{name:"4xl",idx:5},{name:"display-s",idx:5},{name:"display-m",idx:6},{name:"display-l",idx:7}];let n=fe(1),i=fe(1.25),o=fe(1.25),u=fe(1.333),c=fe(.85);const v=y(()=>a.map(({name:$,idx:k})=>{const G=$.startsWith("display")?r(c):1,Z=+(r(n)*G*Math.pow(r(o),k)).toFixed(4),j=+(r(i)*G*Math.pow(r(u),k)).toFixed(4);return{name:$,min:Z,max:j}}));function h(){Q.typography||(Q.typography={});for(const{name:$,min:k,max:P}of r(v))Q.typography[`size_${$}_min`]=String(k),Q.typography[`size_${$}_max`]=String(P);gr()}var f=gl(),p=d(l(f),2),m=l(p),b=d(l(m),2),x=l(b),_=d(m,2),w=d(l(_),2),S=l(w),A=d(_,2),F=d(l(A),2);de(F,21,()=>s,$=>$.value,($,k)=>{var P=pl(),G=l(P),Z={};V(()=>{R(G,r(k).label),Z!==(Z=r(k).value)&&(P.value=(P.__value=r(k).value)??"")}),E($,P)});var Y=d(A,2),T=d(l(Y),2);de(T,21,()=>s,$=>$.value,($,k)=>{var P=hl(),G=l(P),Z={};V(()=>{R(G,r(k).label),Z!==(Z=r(k).value)&&(P.value=(P.__value=r(k).value)??"")}),E($,P)});var z=d(Y,2),D=d(l(z),2),O=l(D),K=d(p,2);de(K,21,()=>r(v),({name:$,min:k,max:P})=>$,($,k)=>{let P=()=>r(k).name,G=()=>r(k).min,Z=()=>r(k).max;var j=_l();let N;var L=l(j),H=l(L),se=d(L,2),ne=l(se);V((ae,oe,U)=>{N=Ie(j,1,"scale-gen__step svelte-1y8fkhh",null,N,ae),R(H,P()),R(ne,`${oe??""} / ${U??""}`)},[()=>({display:P().startsWith("display")}),()=>G().toFixed(3),()=>Z().toFixed(3)]),E($,j)});var q=d(K,2),B=l(q);Vt(x,()=>r(n),$=>J(n,$)),Vt(S,()=>r(i),$=>J(i,$)),Sa(F,()=>r(o),$=>J(o,$)),Sa(T,()=>r(u),$=>J(u,$)),Vt(O,()=>r(c),$=>J(c,$)),ge("click",B,h),E(e,f),Fe()}He(["click"]);var bl=C(' '),yl=C(`Additional Font Families
Font Size Scale
Min and max values in rem for fluid type scaling via clamp().
+ straight into the framework as the source of the brand scale.
`);function Vo(e,t){ze(t,!0);const s=ne.defaults?.colors??{},a=h=>h.charAt(0).toUpperCase()+h.slice(1),n=Object.entries(s.brand??{}),i=y(()=>Co("colors","dark_overrides_enabled")!=="0");function o(){yt("colors","dark_overrides_enabled",r(i)?"0":"1")}var u=Io(),c=d(l(u),4);de(c,21,()=>n,([h,f])=>h,(h,f)=>{var p=y(()=>wt(r(f),2));let m=()=>r(p)[0],b=()=>r(p)[1];{let x=y(()=>`brand_${m()}`),_=y(()=>a(m())),w=y(()=>s.brand_hex_hints?.[m()]??""),S=y(()=>`--sf-color-${m()}-light`);ca(h,{get storeKey(){return r(x)},get label(){return r(_)},get hexHint(){return r(w)},get rawHint(){return b()},get cssVar(){return r(S)}})}});var v=d(c,2);ra(v,{children:(h,f)=>{var p=Lo(),m=d(ot(p),2);de(m,21,()=>Object.entries(s.status??{}),([T,z])=>T,(T,z)=>{var D=y(()=>wt(r(z),2));let O=()=>r(D)[0],K=()=>r(D)[1];{let q=y(()=>`status_${O()}`),B=y(()=>a(O())),$=y(()=>s.status_hex_hints?.[O()]??""),k=y(()=>`--sf-color-${O()}-light`);ca(T,{get storeKey(){return r(q)},get label(){return r(B)},get hexHint(){return r($)},get rawHint(){return K()},get cssVar(){return r(k)}})}});var b=d(m,2),x=l(b),_=l(x);let w;var S=d(_,2),E=l(S),F=d(b,2);{var Y=T=>{var z=Do(),D=d(ot(z),2);de(D,21,()=>Object.entries(s.brand_dark??s.brand??{}),([K])=>K,(K,q)=>{var B=y(()=>wt(r(q),1));let $=()=>r(B)[0];{let k=y(()=>`brand_dark_${$()}`),P=y(()=>a($())),G=y(()=>s.brand_dark_hex_hints?.[$()]??""),Z=y(()=>s.brand_dark?.[$()]??""),j=y(()=>`--sf-color-${$()}-dark`);ca(K,{get storeKey(){return r(k)},get label(){return r(P)},get hexHint(){return r(G)},get rawHint(){return r(Z)},get cssVar(){return r(j)}})}});var O=d(D,4);de(O,21,()=>Object.entries(s.status_dark??s.status??{}),([K])=>K,(K,q)=>{var B=y(()=>wt(r(q),1));let $=()=>r(B)[0];{let k=y(()=>`status_dark_${$()}`),P=y(()=>a($())),G=y(()=>s.status_dark_hex_hints?.[$()]??""),Z=y(()=>s.status_dark?.[$()]??""),j=y(()=>`--sf-color-${$()}-dark`);ca(K,{get storeKey(){return r(k)},get label(){return r(P)},get hexHint(){return r(G)},get rawHint(){return r(Z)},get cssVar(){return r(j)}})}}),A(T,z)};me(F,T=>{r(i)&&T(Y)})}V(()=>{w=Ie(_,1,"dark-toggle-btn svelte-1vle0rm",null,w,{on:r(i)}),te(_,"aria-pressed",r(i)),R(E,r(i)?"Active — custom values override auto-derivation":"Off — dark mode auto-derived from light source colors")}),ge("click",_,o),A(h,p)},$$slots:{default:!0}}),A(e,u),Fe()}He(["click"]);var Oo=C(''),Ko=C(' '),Bo=C(' '),No=C('
'),Ho=C(' ');function na(e,t){let s=$e(t,"cssVar",3,""),a=$e(t,"fieldId",3,""),n=$e(t,"description",3,"");var i=Ho(),o=l(i),u=l(o);{var c=_=>{var w=Oo(),S=l(w);V(()=>{te(w,"for",a()),R(S,t.label)}),A(_,w)},v=_=>{var w=Ko(),S=l(w);V(()=>R(S,t.label)),A(_,w)};me(u,_=>{a()?_(c):_(v,-1)})}var h=d(u,2);{var f=_=>{var w=Bo(),S=l(w);V(()=>R(S,s())),A(_,w)};me(h,_=>{s()&&_(f)})}var p=d(o,2),m=l(p);Pn(m,()=>t.children??Br);var b=d(m,2);{var x=_=>{var w=No(),S=l(w);V(()=>R(S,n())),A(_,w)};me(b,_=>{n()&&_(x)})}A(e,i)}var Go=C('');function je(e,t){ze(t,!0);let s=$e(t,"default",3,""),a=$e(t,"cssVar",3,""),n=$e(t,"description",3,""),i=$e(t,"mono",3,!1),o=$e(t,"width",3,"320px");const u=y(()=>Q[t.section]?.[t.fieldKey]===void 0||Q[t.section]?.[t.fieldKey]===null?"":String(Q[t.section][t.fieldKey]));function c(v){yt(t.section,t.fieldKey,v.currentTarget.value)}na(e,{get label(){return t.label},get cssVar(){return a()},get fieldId(){return t.fieldKey},get description(){return n()},children:(v,h)=>{var f=Go();let p,m;V(b=>{te(f,"id",t.fieldKey),p=Ie(f,1,"text svelte-j8yw6l",null,p,{mono:i()}),Ws(f,r(u)),te(f,"placeholder",b),m=pe(f,"",m,{width:o()})},[()=>String(s())]),ge("input",f,c),A(v,f)},$$slots:{default:!0}}),Fe()}He(["input"]);async function Ra(e,t){const{url:s,nonce:a}=ne.rest;if(!s)return console.info("[slashed-admin] (dev) would POST",e,t),{ok:!0,dev:!0};const n=await fetch(s+e,{method:"POST",credentials:"same-origin",headers:{"Content-Type":"application/json","X-WP-Nonce":a},body:JSON.stringify(t)});if(!n.ok){const i=await n.text();throw new Error(i||`HTTP ${n.status}`)}return n.json()}function qr(e,t){return Ra("/tokens",{section:e,values:t})}function Mr(e){return Ra("/tokens/reset",{section:e})}function Uo(e){return Ra("/settings",e)}async function Wo(){const{url:e,nonce:t}=ne.rest;if(!e)return console.info("[slashed-admin] (dev) would GET /bricks-fonts"),Array.isArray(ne.bricksFonts)?ne.bricksFonts:[];const s=await fetch(e+"/bricks-fonts",{credentials:"same-origin",headers:{"X-WP-Nonce":t}});if(!s.ok)throw new Error(await s.text()||`HTTP ${s.status}`);const a=await s.json();return Array.isArray(a?.fonts)?a.fonts:[]}async function Yo(){const{url:e,nonce:t}=ne.rest;if(!e)return console.info("[slashed-admin] (dev) would GET /tokens/export"),{schema_version:"1",tokens:{},plugin_settings:{},dev:!0};const s=await fetch(e+"/tokens/export",{credentials:"same-origin",headers:{"X-WP-Nonce":t}});if(!s.ok)throw new Error(await s.text()||`HTTP ${s.status}`);return s.json()}function Xo(e){return Ra("/tokens/import",e)}var Zo=C(''),Jo=C('Bricks'),Qo=C(""),el=C(''),tl=C(""),sl=C(''),al=C('No Bricks fonts found. Add fonts in Bricks › Settings › Custom Fonts or the Bricks Font Manager, then reload this page.
'),rl=C(''),nl=C('The quick brown fox'),il=C(' ');function Dr(e,t){ze(t,!0);let s=$e(t,"default",3,""),a=$e(t,"cssVar",3,""),n=$e(t,"description",3,"");const i=[{label:"System UI",value:"system-ui, sans-serif"},{label:"Neo-Grotesque",value:"Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif"},{label:"Geometric Humanist",value:"Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif"},{label:"Classical Humanist",value:"Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif"},{label:"Humanist Sans",value:"Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif"},{label:"Industrial Sans",value:"'Bahnschrift', 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif"},{label:"Rounded Sans",value:"ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif"},{label:"Transitional Serif",value:"Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif"},{label:"Old Style Serif",value:"'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif"},{label:"Slab Serif",value:"Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif"},{label:"Antique Serif",value:"Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif"},{label:"Didone Serif",value:"Didact Gothic, 'Bodoni MT', 'Bodoni 72', Didot, 'Playfair Display', serif"},{label:"Monospace",value:"ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace"},{label:"Handwritten",value:"'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive"}];let o=fe(Ve(ne.bricksFonts));const u=ne.activeIntegrations?.bricks??!0;So(async()=>{const S=r(f);try{const E=await Wo();J(o,E,!0),r(f)===S&&S==="manual"&&h(r(v))==="bricks"&&J(f,"bricks")}catch{}});const c=y(()=>Q[t.section]?.[t.fieldKey]===void 0||Q[t.section]?.[t.fieldKey]===null?"":String(Q[t.section][t.fieldKey])),v=y(()=>r(c)||String(s()));function h(S){const E=(S||String(s())).trim().toLowerCase();return u&&r(o).some(F=>E===F.family.toLowerCase())?"bricks":i.some(F=>E===F.value.toLowerCase())?"system":"manual"}let f=fe(Ve(h(r(v))));function p(S){J(f,S,!0),S==="system"?i.find(F=>F.value.toLowerCase()===r(v).toLowerCase())||yt(t.section,t.fieldKey,i[0].value):S==="bricks"&&!r(o).find(F=>F.family.toLowerCase()===r(v).toLowerCase())&&r(o).length>0&&yt(t.section,t.fieldKey,r(o)[0].family)}function m(S){yt(t.section,t.fieldKey,S.currentTarget.value)}function b(S){yt(t.section,t.fieldKey,S.currentTarget.value)}function x(S){yt(t.section,t.fieldKey,S.currentTarget.value)}const _={adobe:" (Adobe)",google:" (Google)"},w=S=>_[S]??"";na(e,{get label(){return t.label},get cssVar(){return a()},get fieldId(){return t.fieldKey},get description(){return n()},children:(S,E)=>{var F=il(),Y=l(F),T=l(Y);let z;var D=d(T,2);{var O=N=>{var L=Zo();let H;V(()=>H=Ie(L,1,"source-tab svelte-ow2kvz",null,H,{"source-tab--active":r(f)==="bricks"})),ge("click",L,()=>p("bricks")),A(N,L)},K=N=>{var L=Jo();A(N,L)};me(D,N=>{u?N(O):N(K,-1)})}var q=d(D,2);let B;var $=d(Y,2);{var k=N=>{var L=el();de(L,21,()=>i,se=>se.value,(se,ie)=>{var ae=Qo(),oe=l(ae),U={};V(()=>{R(oe,r(ie).label),U!==(U=r(ie).value)&&(ae.value=(ae.__value=r(ie).value)??"")}),A(se,ae)});var H;ka(L),V(()=>{te(L,"id",t.fieldKey),H!==(H=r(v))&&(L.value=(L.__value=r(v))??"",Us(L,r(v)))}),ge("change",L,m),A(N,L)},P=N=>{var L=ar(),H=ot(L);{var se=ae=>{var oe=sl();de(oe,21,()=>r(o),le=>le.family,(le,be)=>{var xe=tl(),Te=l(xe),Pe={};V(Re=>{R(Te,`${r(be).label??""}${Re??""}`),Pe!==(Pe=r(be).family)&&(xe.value=(xe.__value=r(be).family)??"")},[()=>w(r(be).source)]),A(le,xe)});var U;ka(oe),V(()=>{te(oe,"id",t.fieldKey),U!==(U=r(v))&&(oe.value=(oe.__value=r(v))??"",Us(oe,r(v)))}),ge("change",oe,b),A(ae,oe)},ie=ae=>{var oe=al();A(ae,oe)};me(H,ae=>{r(o).length>0?ae(se):ae(ie,-1)})}A(N,L)},G=N=>{var L=rl();V(H=>{te(L,"id",t.fieldKey),Ws(L,r(c)),te(L,"placeholder",H)},[()=>String(s())]),ge("input",L,x),A(N,L)};me($,N=>{r(f)==="system"?N(k):r(f)==="bricks"&&u?N(P,1):N(G,-1)})}var Z=d($,2);{var j=N=>{var L=nl();V(()=>pe(L,`font-family: ${r(v)??""}`)),A(N,L)};me(Z,N=>{r(v)&&N(j)})}V(()=>{z=Ie(T,1,"source-tab svelte-ow2kvz",null,z,{"source-tab--active":r(f)==="system"}),B=Ie(q,1,"source-tab svelte-ow2kvz",null,B,{"source-tab--active":r(f)==="manual"})}),ge("click",T,()=>p("system")),ge("click",q,()=>p("manual")),A(S,F)},$$slots:{default:!0}}),Fe()}He(["click","change","input"]);var ol=C(' '),ll=C(' ',1);function Ge(e,t){ze(t,!0);let s=$e(t,"min",3,void 0),a=$e(t,"max",3,void 0),n=$e(t,"step",3,void 0),i=$e(t,"default",3,""),o=$e(t,"cssVar",3,""),u=$e(t,"unit",3,""),c=$e(t,"description",3,""),v=$e(t,"width",3,"120px");const h=y(()=>Q[t.section]?.[t.fieldKey]===void 0||Q[t.section]?.[t.fieldKey]===null?"":String(Q[t.section][t.fieldKey]));function f(p){yt(t.section,t.fieldKey,p.currentTarget.value)}na(e,{get label(){return t.label},get cssVar(){return o()},get fieldId(){return t.fieldKey},get description(){return c()},children:(p,m)=>{var b=ll(),x=ot(b);let _;var w=d(x,2);{var S=E=>{var F=ol(),Y=l(F);V(()=>R(Y,u())),A(E,F)};me(w,E=>{u()&&E(S)})}V(E=>{te(x,"id",t.fieldKey),te(x,"min",s()),te(x,"max",a()),te(x,"step",n()),Ws(x,r(h)),te(x,"placeholder",E),_=pe(x,"",_,{width:v()})},[()=>String(i())]),ge("input",x,f),A(p,b)},$$slots:{default:!0}}),Fe()}He(["input"]);var cl=C(' '),dl=C(' '),ul=C('Display Scale
'),vl=C('Live Scale Preview
Text Scale
');function fl(e,t){ze(t,!0);const s=16,a=y(Ea);let n=fe(Ve(Ea().maxPx));sa(()=>{r(n)r(a).maxPx&&J(n,r(a).maxPx,!0)});const o=(ne.defaults?.typography??{}).font_sizes??{};function u(q){const B=Q.typography??{},$=o[q]??{},k=B[`size_${q}_min`],P=B[`size_${q}_max`],G=k!==void 0&&k!==""?parseFloat(k):$.min??.75,Z=P!==void 0&&P!==""?parseFloat(P):$.max??1;return{min:G,max:Z}}const c=y(()=>{const q=Math.max(0,Math.min(1,(r(n)-r(a).minPx)/(r(a).maxPx-r(a).minPx))),B={};for(const $ of Object.keys(o)){const{min:k,max:P}=u($),G=k+(P-k)*q,Z=G*s;B[$]={sizePx:Z,sizeRem:G.toFixed(3)}}return B}),v=["2xs","xs","s","m","l","xl","2xl","3xl","4xl"],h=["display-s","display-m","display-l"],f=y(()=>v.filter(q=>o[q])),p=y(()=>h.filter(q=>o[q]));var m=vl(),b=l(m),x=d(l(b),2),_=l(x),w=l(_),S=d(_,2),E=d(S,2),F=l(E),Y=d(E,2),T=l(Y),z=d(b,2),D=d(l(z),2);de(D,16,()=>r(f),q=>q,(q,B)=>{const $=y(()=>r(c)[B]);var k=ar(),P=ot(k);{var G=Z=>{var j=cl(),N=l(j),L=l(N),H=d(N,2);let se;var ie=l(H),ae=d(H,2),oe=l(ae);V((U,le)=>{R(L,B),se=pe(H,"",se,U),R(ie,B),R(oe,`${r($).sizeRem??""}rem / ${le??""}px`)},[()=>({"font-size":`${r($).sizePx.toFixed(1)??""}px`}),()=>r($).sizePx.toFixed(1)]),A(Z,j)};me(P,Z=>{r($)&&Z(G)})}A(q,k)});var O=d(z,2);{var K=q=>{var B=ul(),$=d(l(B),2);de($,16,()=>r(p),k=>k,(k,P)=>{const G=y(()=>r(c)[P]);var Z=ar(),j=ot(Z);{var N=L=>{var H=dl(),se=l(H),ie=l(se),ae=d(se,2);let oe;var U=l(ae),le=d(ae,2),be=l(le);V((xe,Te)=>{R(ie,P),oe=pe(ae,"",oe,xe),R(U,P),R(be,`${r(G).sizeRem??""}rem / ${Te??""}px`)},[()=>({"font-size":`${r(G).sizePx.toFixed(1)??""}px`}),()=>r(G).sizePx.toFixed(1)]),A(L,H)};me(j,L=>{r(G)&&L(N)})}A(k,Z)}),A(q,B)};me(O,q=>{r(p).length>0&&q(K)})}V(()=>{R(w,`${r(a).minPx??""}px`),te(S,"min",r(a).minPx),te(S,"max",r(a).maxPx),R(F,`${r(a).maxPx??""}px`),R(T,`${r(n)??""}px`)}),Vt(S,()=>r(n),q=>J(n,q)),A(e,m),Fe()}var pl=C(""),hl=C(""),_l=C(' '),gl=C('Scale Generator Computes all step min/max values from a modular scale. Click Apply to write them to the fields below. ');function ml(e,t){ze(t,!0);const s=[{label:"Minor Second (1.067)",value:1.067},{label:"Major Second (1.125)",value:1.125},{label:"Minor Third (1.200)",value:1.2},{label:"Major Third (1.250)",value:1.25},{label:"Perfect Fourth (1.333)",value:1.333},{label:"Aug. Fourth (1.414)",value:1.414},{label:"Perfect Fifth (1.500)",value:1.5},{label:"Golden Ratio (1.618)",value:1.618},{label:"Major Sixth (1.667)",value:1.667},{label:"Octave (2.000)",value:2}],a=[{name:"2xs",idx:-4},{name:"xs",idx:-3},{name:"s",idx:-2},{name:"m",idx:0},{name:"l",idx:1},{name:"xl",idx:2},{name:"2xl",idx:3},{name:"3xl",idx:4},{name:"4xl",idx:5},{name:"display-s",idx:5},{name:"display-m",idx:6},{name:"display-l",idx:7}];let n=fe(1),i=fe(1.25),o=fe(1.25),u=fe(1.333),c=fe(.85);const v=y(()=>a.map(({name:$,idx:k})=>{const G=$.startsWith("display")?r(c):1,Z=+(r(n)*G*Math.pow(r(o),k)).toFixed(4),j=+(r(i)*G*Math.pow(r(u),k)).toFixed(4);return{name:$,min:Z,max:j}}));function h(){Q.typography||(Q.typography={});for(const{name:$,min:k,max:P}of r(v))Q.typography[`size_${$}_min`]=String(k),Q.typography[`size_${$}_max`]=String(P);gr()}var f=gl(),p=d(l(f),2),m=l(p),b=d(l(m),2),x=l(b),_=d(m,2),w=d(l(_),2),S=l(w),E=d(_,2),F=d(l(E),2);de(F,21,()=>s,$=>$.value,($,k)=>{var P=pl(),G=l(P),Z={};V(()=>{R(G,r(k).label),Z!==(Z=r(k).value)&&(P.value=(P.__value=r(k).value)??"")}),A($,P)});var Y=d(E,2),T=d(l(Y),2);de(T,21,()=>s,$=>$.value,($,k)=>{var P=hl(),G=l(P),Z={};V(()=>{R(G,r(k).label),Z!==(Z=r(k).value)&&(P.value=(P.__value=r(k).value)??"")}),A($,P)});var z=d(Y,2),D=d(l(z),2),O=l(D),K=d(p,2);de(K,21,()=>r(v),({name:$,min:k,max:P})=>$,($,k)=>{let P=()=>r(k).name,G=()=>r(k).min,Z=()=>r(k).max;var j=_l();let N;var L=l(j),H=l(L),se=d(L,2),ie=l(se);V((ae,oe,U)=>{N=Ie(j,1,"scale-gen__step svelte-1y8fkhh",null,N,ae),R(H,P()),R(ie,`${oe??""} / ${U??""}`)},[()=>({display:P().startsWith("display")}),()=>G().toFixed(3),()=>Z().toFixed(3)]),A($,j)});var q=d(K,2),B=l(q);Vt(x,()=>r(n),$=>J(n,$)),Vt(S,()=>r(i),$=>J(i,$)),Sa(F,()=>r(o),$=>J(o,$)),Sa(T,()=>r(u),$=>J(u,$)),Vt(O,()=>r(c),$=>J(c,$)),ge("click",B,h),A(e,f),Fe()}He(["click"]);var bl=C(' '),yl=C(`Additional Font Families
Font Size Scale
Min and max values in rem for fluid type scaling via clamp().
Leave both fields blank to use the framework defaults. The viewport range these
sizes interpolate across (and the range the Live Scale Preview above scrubs) is the Fluid Scale Viewport Range set in the Spacing tab —
- it's the shared source for both spacing and typography.
Scale Multipliers
`,1),wl=C('Font Families
');function xl(e,t){ze(t,!0);const s="typography",a=ie.defaults?.[s]??{},n=a.font_families??{},i=a.font_sizes??{},o=b=>b.charAt(0).toUpperCase()+b.slice(1),u=["body","heading"],c=Object.fromEntries(Object.entries(n).filter(([b])=>u.includes(b))),v=Object.fromEntries(Object.entries(n).filter(([b])=>!u.includes(b)));var h=wl(),f=d(l(h),2);de(f,21,()=>Object.entries(c),([b,x])=>b,(b,x)=>{var _=y(()=>wt(r(x),2));let w=()=>r(_)[0],S=()=>r(_)[1];{let A=y(()=>`font_${w()}`),F=y(()=>o(w())),Y=y(()=>`--sf-font-${w()}`);Dr(b,{section:s,get fieldKey(){return r(A)},get label(){return r(F)},get default(){return S()},get cssVar(){return r(Y)}})}});var p=d(f,2);fl(p,{});var m=d(p,2);ra(m,{children:(b,x)=>{var _=yl(),w=d(ot(_),2);de(w,21,()=>Object.entries(v),([z,D])=>z,(z,D)=>{var O=y(()=>wt(r(D),2));let K=()=>r(O)[0],q=()=>r(O)[1];{let B=y(()=>`font_${K()}`),$=y(()=>o(K())),k=y(()=>`--sf-font-${K()}`);Dr(z,{section:s,get fieldKey(){return r(B)},get label(){return r($)},get default(){return q()},get cssVar(){return r(k)}})}});var S=d(w,6);ml(S,{});var A=d(S,2);de(A,21,()=>Object.entries(i),([z,D])=>z,(z,D)=>{var O=y(()=>wt(r(D),2));let K=()=>r(O)[0],q=()=>r(O)[1];var B=bl(),$=l(B),k=l($),P=l(k),G=d(k,2),Z=l(G),j=d($,2),N=l(j);{let H=y(()=>`size_${K()}_min`);Ge(N,{section:s,get fieldKey(){return r(H)},label:"Min",min:0,step:.01,get default(){return q().min},width:"80px"})}var L=d(N,2);{let H=y(()=>`size_${K()}_max`);Ge(L,{section:s,get fieldKey(){return r(H)},label:"Max",min:0,step:.01,get default(){return q().max},width:"80px"})}V(()=>{R(P,K()),R(Z,`--sf-text-${K()??""}`)}),E(z,B)});var F=d(A,4),Y=l(F);{let z=y(()=>a.scale_multipliers?.text_scale??1);Ge(Y,{section:s,fieldKey:"text_scale",label:"Text Scale",min:0,step:.05,get default(){return r(z)},cssVar:"--sf-text-scale"})}var T=d(Y,2);{let z=y(()=>a.scale_multipliers?.text_display_scale??1);Ge(T,{section:s,fieldKey:"text_display_scale",label:"Display Scale",min:0,step:.05,get default(){return r(z)},cssVar:"--sf-text-display-scale"})}E(b,_)},$$slots:{default:!0}}),E(e,h),Fe()}var kl=C(' '),Sl=C('Live Scale Preview
');function El(e,t){ze(t,!0);const s=y(Ea);let a=fe(Ve(Ea().maxPx));sa(()=>{r(a)r(s).maxPx&&J(a,r(s).maxPx,!0)});const n=ie.defaults?.spacing??{},i=n.space_sizes??{};function o(N){const L=Q.spacing??{},H=i[N]??{},se=L[`space_${N}_min`],ne=L[`space_${N}_max`],ae=se!==void 0&&se!==""?parseFloat(se):H.min??1,oe=ne!==void 0&&ne!==""?parseFloat(ne):H.max??1;return{min:ae,max:oe}}const u=y(()=>{const N=parseFloat(Q.spacing?.space_scale??n.space_scale??1)||1,L=Math.max(0,Math.min(1,(r(a)-r(s).minPx)/(r(s).maxPx-r(s).minPx))),H=["2xs","xs","s","m","l","xl","2xl","3xl","4xl"],se=o("4xl").max*N;return H.map(ne=>{const{min:ae,max:oe}=o(ne),U=(ae+(oe-ae)*L)*N,le=U/se*100;return{name:ne,sizeRem:U.toFixed(3),barPct:Math.min(le,100)}})}),c=y(()=>{const N=parseFloat(Q.spacing?.space_scale??n.space_scale??1)||1,L=Math.max(0,Math.min(1,(r(a)-r(s).minPx)/(r(s).maxPx-r(s).minPx))),H=se=>{const{min:ne,max:ae}=o(se);return((ne+(ae-ne)*L)*N).toFixed(3)};return{xs:H("xs"),s:H("s"),m:H("m"),l:H("l")}});var v=Sl(),h=l(v),f=d(l(h),2),p=l(f),m=l(p),b=d(p,2),x=d(b,2),_=l(x),w=d(x,2),S=l(w),A=d(h,2);de(A,21,()=>r(u),N=>N.name,(N,L)=>{var H=kl(),se=l(H),ne=l(se),ae=d(se,2),oe=l(ae);let U;var le=d(ae,2),be=l(le);V(()=>{R(ne,`--sf-space-${r(L).name??""}`),U=pe(oe,"",U,{width:`${r(L).barPct??""}%`}),R(be,`${r(L).sizeRem??""}rem`)}),E(N,H)});var F=d(A,2),Y=l(F),T=l(Y),z=d(Y,2);let D;var O=l(z);let K;var q=d(l(O),2),B=d(l(q),2),$=l(B),k=d(O,2),P=l(k),G=d(k,2);let Z;var j=d(l(G),2);pe(j,"",{},{width:"3rem"}),V(()=>{R(m,`${r(s).minPx??""}px`),te(b,"min",r(s).minPx),te(b,"max",r(s).maxPx),R(_,`${r(s).maxPx??""}px`),R(S,`${r(a)??""}px`),R(T,`Container context at ${r(a)??""}px`),D=pe(z,"",D,{padding:`${r(c).m??""}rem`,gap:`${r(c).s??""}rem`}),K=pe(O,"",K,{gap:`${r(c).s??""}rem`}),R($,`padding: ${r(c).m??""}rem`),R(P,`Body section · gap between rows: ${r(c).s??""}rem`),Z=pe(G,"",Z,{gap:`${r(c).xs??""}rem`,"padding-top":`${r(c).xs??""}rem`})}),Vt(b,()=>r(a),N=>J(a,N)),E(e,v),Fe()}var Al=C(' '),Cl=C(`Fluid Scale Viewport Range
The viewport width range (in rem) used to compute all fluid clamp() formulas for custom-overridden spacing and typography values. Default: 22.5 rem (360 px) → 95 rem (1520 px). Changing these only affects values you explicitly
+ it's the shared source for both spacing and typography.
Scale Multipliers
`,1),wl=C('Font Families
');function xl(e,t){ze(t,!0);const s="typography",a=ne.defaults?.[s]??{},n=a.font_families??{},i=a.font_sizes??{},o=b=>b.charAt(0).toUpperCase()+b.slice(1),u=["body","heading"],c=Object.fromEntries(Object.entries(n).filter(([b])=>u.includes(b))),v=Object.fromEntries(Object.entries(n).filter(([b])=>!u.includes(b)));var h=wl(),f=d(l(h),2);de(f,21,()=>Object.entries(c),([b,x])=>b,(b,x)=>{var _=y(()=>wt(r(x),2));let w=()=>r(_)[0],S=()=>r(_)[1];{let E=y(()=>`font_${w()}`),F=y(()=>o(w())),Y=y(()=>`--sf-font-${w()}`);Dr(b,{section:s,get fieldKey(){return r(E)},get label(){return r(F)},get default(){return S()},get cssVar(){return r(Y)}})}});var p=d(f,2);fl(p,{});var m=d(p,2);ra(m,{children:(b,x)=>{var _=yl(),w=d(ot(_),2);de(w,21,()=>Object.entries(v),([z,D])=>z,(z,D)=>{var O=y(()=>wt(r(D),2));let K=()=>r(O)[0],q=()=>r(O)[1];{let B=y(()=>`font_${K()}`),$=y(()=>o(K())),k=y(()=>`--sf-font-${K()}`);Dr(z,{section:s,get fieldKey(){return r(B)},get label(){return r($)},get default(){return q()},get cssVar(){return r(k)}})}});var S=d(w,6);ml(S,{});var E=d(S,2);de(E,21,()=>Object.entries(i),([z,D])=>z,(z,D)=>{var O=y(()=>wt(r(D),2));let K=()=>r(O)[0],q=()=>r(O)[1];var B=bl(),$=l(B),k=l($),P=l(k),G=d(k,2),Z=l(G),j=d($,2),N=l(j);{let H=y(()=>`size_${K()}_min`);Ge(N,{section:s,get fieldKey(){return r(H)},label:"Min",min:0,step:.01,get default(){return q().min},width:"80px"})}var L=d(N,2);{let H=y(()=>`size_${K()}_max`);Ge(L,{section:s,get fieldKey(){return r(H)},label:"Max",min:0,step:.01,get default(){return q().max},width:"80px"})}V(()=>{R(P,K()),R(Z,`--sf-text-${K()??""}`)}),A(z,B)});var F=d(E,4),Y=l(F);{let z=y(()=>a.scale_multipliers?.text_scale??1);Ge(Y,{section:s,fieldKey:"text_scale",label:"Text Scale",min:0,step:.05,get default(){return r(z)},cssVar:"--sf-text-scale"})}var T=d(Y,2);{let z=y(()=>a.scale_multipliers?.text_display_scale??1);Ge(T,{section:s,fieldKey:"text_display_scale",label:"Display Scale",min:0,step:.05,get default(){return r(z)},cssVar:"--sf-text-display-scale"})}A(b,_)},$$slots:{default:!0}}),A(e,h),Fe()}var kl=C(' '),Sl=C('Live Scale Preview
');function El(e,t){ze(t,!0);const s=y(Ea);let a=fe(Ve(Ea().maxPx));sa(()=>{r(a)r(s).maxPx&&J(a,r(s).maxPx,!0)});const n=ne.defaults?.spacing??{},i=n.space_sizes??{};function o(N){const L=Q.spacing??{},H=i[N]??{},se=L[`space_${N}_min`],ie=L[`space_${N}_max`],ae=se!==void 0&&se!==""?parseFloat(se):H.min??1,oe=ie!==void 0&&ie!==""?parseFloat(ie):H.max??1;return{min:ae,max:oe}}const u=y(()=>{const N=parseFloat(Q.spacing?.space_scale??n.space_scale??1)||1,L=Math.max(0,Math.min(1,(r(a)-r(s).minPx)/(r(s).maxPx-r(s).minPx))),H=["2xs","xs","s","m","l","xl","2xl","3xl","4xl"],se=o("4xl").max*N;return H.map(ie=>{const{min:ae,max:oe}=o(ie),U=(ae+(oe-ae)*L)*N,le=U/se*100;return{name:ie,sizeRem:U.toFixed(3),barPct:Math.min(le,100)}})}),c=y(()=>{const N=parseFloat(Q.spacing?.space_scale??n.space_scale??1)||1,L=Math.max(0,Math.min(1,(r(a)-r(s).minPx)/(r(s).maxPx-r(s).minPx))),H=se=>{const{min:ie,max:ae}=o(se);return((ie+(ae-ie)*L)*N).toFixed(3)};return{xs:H("xs"),s:H("s"),m:H("m"),l:H("l")}});var v=Sl(),h=l(v),f=d(l(h),2),p=l(f),m=l(p),b=d(p,2),x=d(b,2),_=l(x),w=d(x,2),S=l(w),E=d(h,2);de(E,21,()=>r(u),N=>N.name,(N,L)=>{var H=kl(),se=l(H),ie=l(se),ae=d(se,2),oe=l(ae);let U;var le=d(ae,2),be=l(le);V(()=>{R(ie,`--sf-space-${r(L).name??""}`),U=pe(oe,"",U,{width:`${r(L).barPct??""}%`}),R(be,`${r(L).sizeRem??""}rem`)}),A(N,H)});var F=d(E,2),Y=l(F),T=l(Y),z=d(Y,2);let D;var O=l(z);let K;var q=d(l(O),2),B=d(l(q),2),$=l(B),k=d(O,2),P=l(k),G=d(k,2);let Z;var j=d(l(G),2);pe(j,"",{},{width:"3rem"}),V(()=>{R(m,`${r(s).minPx??""}px`),te(b,"min",r(s).minPx),te(b,"max",r(s).maxPx),R(_,`${r(s).maxPx??""}px`),R(S,`${r(a)??""}px`),R(T,`Container context at ${r(a)??""}px`),D=pe(z,"",D,{padding:`${r(c).m??""}rem`,gap:`${r(c).s??""}rem`}),K=pe(O,"",K,{gap:`${r(c).s??""}rem`}),R($,`padding: ${r(c).m??""}rem`),R(P,`Body section · gap between rows: ${r(c).s??""}rem`),Z=pe(G,"",Z,{gap:`${r(c).xs??""}rem`,"padding-top":`${r(c).xs??""}rem`})}),Vt(b,()=>r(a),N=>J(a,N)),A(e,v),Fe()}var Al=C(' '),Cl=C(`Fluid Scale Viewport Range
The viewport width range (in rem) used to compute all fluid clamp() formulas for custom-overridden spacing and typography values. Default: 22.5 rem (360 px) → 95 rem (1520 px). Changing these only affects values you explicitly
override below or in the Typography tab — the framework's built-in scale uses the same defaults
and is unaffected.
Space Scale Steps
Min and max values in rem for fluid spacing via clamp().
Leave both fields blank to use the framework defaults.
Space Aliases
`,1),$l=C(`Spacing
The Space Scale multiplier scales every spacing token at once — the quickest
way to make a whole site more or less airy. Fine-grained per-step overrides, the fluid
- viewport range, and named aliases live under Advanced.
`);function Tl(e,t){ze(t,!0);const s="spacing",a=ie.defaults?.[s]??{},n=a.space_sizes??{},i=[{key:"gutter",label:"Gutter",cssVar:"--sf-space-gutter"},{key:"gap",label:"Gap",cssVar:"--sf-gap"},{key:"content_gap",label:"Content Gap",cssVar:"--sf-content-gap"},{key:"component_pad",label:"Component Pad",cssVar:"--sf-component-pad"},{key:"section_pad",label:"Section Pad",cssVar:"--sf-section-pad"}];var o=$l(),u=d(l(o),4),c=l(u);{let f=y(()=>a.space_scale??1);Ge(c,{section:s,fieldKey:"space_scale",label:"Space Scale",min:0,step:.05,get default(){return r(f)},cssVar:"--sf-space-scale"})}var v=d(u,2);El(v,{});var h=d(v,2);ra(h,{children:(f,p)=>{var m=Cl(),b=d(ot(m),4),x=l(b);{let A=y(()=>a.viewport_min??22.5);Ge(x,{section:s,fieldKey:"viewport_min",label:"Min viewport (rem)",min:10,max:60,step:.5,get default(){return r(A)}})}var _=d(x,2);{let A=y(()=>a.viewport_max??95);Ge(_,{section:s,fieldKey:"viewport_max",label:"Max viewport (rem)",min:40,max:200,step:.5,get default(){return r(A)}})}var w=d(b,6);de(w,21,()=>Object.entries(n),([A,F])=>A,(A,F)=>{var Y=y(()=>wt(r(F),2));let T=()=>r(Y)[0],z=()=>r(Y)[1];var D=Al(),O=l(D),K=l(O),q=l(K),B=d(K,2),$=l(B),k=d(O,2),P=l(k);{let Z=y(()=>`space_${T()}_min`);Ge(P,{section:s,get fieldKey(){return r(Z)},label:"Min",min:0,step:.01,get default(){return z().min},width:"80px"})}var G=d(P,2);{let Z=y(()=>`space_${T()}_max`);Ge(G,{section:s,get fieldKey(){return r(Z)},label:"Max",min:0,step:.01,get default(){return z().max},width:"80px"})}V(()=>{R(q,T()),R($,`--sf-space-${T()??""}`)}),E(A,D)});var S=d(w,4);de(S,21,()=>i,A=>A.key,(A,F)=>{{let Y=y(()=>a[r(F).key]??"");je(A,{section:s,get fieldKey(){return r(F).key},get label(){return r(F).label},get default(){return r(Y)},get cssVar(){return r(F).cssVar},mono:!0})}}),E(f,m)},$$slots:{default:!0}}),E(e,o),Fe()}var jl=C(' '),zl=C(' ',1);function bs(e,t){ze(t,!0);let s=$e(t,"cssVar",3,""),a=$e(t,"unit",3,""),n=$e(t,"description",3,"");const i=y(()=>Q[t.section]?.[t.fieldKey]===void 0||Q[t.section]?.[t.fieldKey]===null?"":String(Q[t.section][t.fieldKey])),o=y(()=>r(i)===""||Number.isNaN(Number(r(i)))?Number(t.default):Number(r(i)));function u(v){yt(t.section,t.fieldKey,v.currentTarget.value)}function c(v){yt(t.section,t.fieldKey,v.currentTarget.value)}na(e,{get label(){return t.label},get cssVar(){return s()},get fieldId(){return t.fieldKey},get description(){return n()},children:(v,h)=>{var f=zl(),p=ot(f),m=d(p,2),b=d(m,2);{var x=_=>{var w=jl(),S=l(w);V(()=>R(S,a())),E(_,w)};me(b,_=>{a()&&_(x)})}V(_=>{te(p,"min",t.min),te(p,"max",t.max),te(p,"step",t.step),Ws(p,r(o)),te(m,"id",t.fieldKey),te(m,"min",t.min),te(m,"max",t.max),te(m,"step",t.step),Ws(m,r(i)),te(m,"placeholder",_)},[()=>String(t.default)]),ge("input",p,u),ge("input",m,c),E(v,f)},$$slots:{default:!0}}),Fe()}He(["input"]);var Fl=C(""),Pl=C('');function Rl(e,t){ze(t,!0);let s=$e(t,"options",19,()=>[]),a=$e(t,"default",3,""),n=$e(t,"cssVar",3,""),i=$e(t,"description",3,"");const o=y(()=>s().map(v=>typeof v=="string"?{value:v,label:v}:v)),u=y(()=>Q[t.section]?.[t.fieldKey]===void 0||Q[t.section]?.[t.fieldKey]===null?"":String(Q[t.section][t.fieldKey]));function c(v){yt(t.section,t.fieldKey,v.currentTarget.value)}na(e,{get label(){return t.label},get cssVar(){return n()},get fieldId(){return t.fieldKey},get description(){return i()},children:(v,h)=>{var f=Pl(),p=l(f),m=l(p);p.value=p.__value="";var b=d(p);de(b,17,()=>r(o),_=>_.value,(_,w)=>{var S=Fl(),A=l(S),F={};V(()=>{R(A,r(w).label),F!==(F=r(w).value)&&(S.value=(S.__value=r(w).value)??"")}),E(_,S)});var x;ka(f),V(()=>{te(f,"id",t.fieldKey),R(m,`Default (${a()??""})`),x!==(x=r(u))&&(f.value=(f.__value=r(u))??"",Us(f,r(u)))}),ge("change",f,c),E(v,f)},$$slots:{default:!0}}),Fe()}He(["change"]);var ql=C(' '),Ml=C(' '),Dl=C(' '),Ll=C('Shadow
Motion — Durations
Base duration values in milliseconds.
Z-Index
Z-index layer values for stacking context management.
Contrast
',1),Il=C('Radius
Shadows
Motion
Accessibility
');function Vl(e,t){ze(t,!0);const s=ie.defaults?.radius??{},a=ie.defaults?.shadows??{},n=ie.defaults?.motion??{},i=ie.defaults?.zindex??{},o=ie.defaults?.contrast??{},u=n.durations??{},c=U=>U.charAt(0).toUpperCase()+U.slice(1),v=[0,2,4,8,12,16,24,9999],h=["none","xs","s","m","l","xl","2xl","full"],f=y(()=>parseFloat(Q.radius?.radius_scale??ie.defaults?.radius?.radius_scale??1)),p=y(()=>v.map(U=>U*r(f))),m=y(()=>parseFloat(Q.shadows?.shadow_strength??a.shadow_strength??.08)),b=y(()=>parseFloat(Q.motion?.motion_scale??n.motion_scale??1)||1),x=["instant","fast","normal","slow","slower"],_=y(()=>x.map(U=>{const le=Q.motion?.[`duration_${U}`],be=parseFloat(le!==void 0&&le!==""?le:u[U]??0);return{name:U,ms:Math.round(be*r(b))}})),w=(U,le)=>parseFloat(U!==void 0&&U!==""?U:le),S=y(()=>w(Q.contrast?.focus_ring_width,o.focus_ring_width??2)),A=y(()=>w(Q.contrast?.focus_ring_offset,o.focus_ring_offset??2)),F=y(()=>Q.contrast?.focus_ring_style??o.focus_ring_style??"solid"),Y=y(()=>[{label:"xs",shadow:`0 1px 2px 0 rgba(0,0,0,${(r(m)*.5).toFixed(4)})`},{label:"s",shadow:`0 1px 2px 0 rgba(0,0,0,${(r(m)*.5).toFixed(4)}), 0 2px 6px 0 rgba(0,0,0,${r(m).toFixed(4)})`},{label:"m",shadow:`0 1px 3px 0 rgba(0,0,0,${(r(m)*.5).toFixed(4)}), 0 4px 12px 0 rgba(0,0,0,${(r(m)*2).toFixed(4)})`},{label:"l",shadow:`0 2px 4px 0 rgba(0,0,0,${(r(m)*.5).toFixed(4)}), 0 8px 24px 0 rgba(0,0,0,${(r(m)*3).toFixed(4)})`},{label:"xl",shadow:`0 2px 8px 0 rgba(0,0,0,${(r(m)*.5).toFixed(4)}), 0 12px 36px 0 rgba(0,0,0,${(r(m)*3.5).toFixed(4)})`},{label:"glow",shadow:`0 0 15px 2px rgba(74,48,208,${Math.min(r(m)*2,.7).toFixed(4)})`}]);var T=Il(),z=d(l(T),2),D=l(z);{let U=y(()=>s.radius_scale??1);Ge(D,{section:"radius",fieldKey:"radius_scale",label:"Radius Scale",min:0,step:.1,get default(){return r(U)},cssVar:"--sf-radius-scale"})}var O=d(z,2);de(O,23,()=>r(p),(U,le)=>h[le],(U,le,be)=>{var xe=ql(),Te=l(xe);let Pe;var Re=d(Te,2),M=l(Re);V(()=>{Pe=pe(Te,"",Pe,{"border-radius":v[r(be)]===9999?"9999px":`${r(le)}px`}),R(M,h[r(be)])}),E(U,xe)});var K=d(O,4),q=l(K);{let U=y(()=>a.shadow_strength??.08);bs(q,{section:"shadows",fieldKey:"shadow_strength",label:"Shadow Strength",description:"Base opacity for shadow layers (0–1).",min:0,max:1,step:.01,get default(){return r(U)},cssVar:"--sf-shadow-strength"})}var B=d(K,2);de(B,21,()=>r(Y),U=>U.label,(U,le)=>{var be=Ml(),xe=l(be);let Te;var Pe=l(xe);V(()=>{Te=pe(xe,"",Te,{"box-shadow":r(le).shadow}),R(Pe,r(le).label)}),E(U,be)});var $=d(B,4),k=l($);{let U=y(()=>n.motion_scale??1);Ge(k,{section:"motion",fieldKey:"motion_scale",label:"Motion Scale",min:0,step:.1,get default(){return r(U)},cssVar:"--sf-motion-scale"})}var P=d($,2);de(P,21,()=>r(_),U=>U.name,(U,le)=>{var be=Dl(),xe=l(be),Te=l(xe),Pe=d(xe,2),Re=l(Pe);let M;var X=d(Pe,2),ee=l(X);V(()=>{R(Te,r(le).name),M=pe(Re,"",M,{"animation-duration":`${r(le).ms??""}ms`}),R(ee,`${r(le).ms??""}ms`)}),E(U,be)});var G=d(P,4),Z=l(G);{let U=y(()=>o.focus_ring_width??2);bs(Z,{section:"contrast",fieldKey:"focus_ring_width",label:"Focus Ring Width",min:0,max:8,step:.5,get default(){return r(U)},cssVar:"--sf-focus-ring-width",unit:"px"})}var j=d(Z,2);{let U=y(()=>o.focus_ring_offset??2);bs(j,{section:"contrast",fieldKey:"focus_ring_offset",label:"Focus Ring Offset",min:0,max:8,step:.5,get default(){return r(U)},cssVar:"--sf-focus-ring-offset",unit:"px"})}var N=d(j,2);{let U=y(()=>o.focus_ring_style??"solid");Rl(N,{section:"contrast",fieldKey:"focus_ring_style",label:"Focus Ring Style",options:["solid","dashed","dotted","double","none"],get default(){return r(U)},cssVar:"--sf-focus-ring-style"})}var L=d(G,2),H=l(L);let se;var ne=d(H,2),ae=l(ne),oe=d(L,2);ra(oe,{children:(U,le)=>{var be=Ll(),xe=d(ot(be),2),Te=l(xe);{let ue=y(()=>a.glow_color??"");je(Te,{section:"shadows",fieldKey:"glow_color",label:"Glow Color",get default(){return r(ue)},cssVar:"--sf-shadow-glow-color",mono:!0})}var Pe=d(xe,6);de(Pe,21,()=>Object.entries(u),([ue,I])=>ue,(ue,I)=>{var W=y(()=>wt(r(I),2));let _e=()=>r(W)[0],Ae=()=>r(W)[1];{let Oe=y(()=>`duration_${_e()}`),qe=y(()=>c(_e())),Ne=y(()=>`--sf-duration-${_e()}`);Ge(ue,{section:"motion",get fieldKey(){return r(Oe)},get label(){return r(qe)},min:0,step:10,get default(){return Ae()},get cssVar(){return r(Ne)},unit:"ms"})}});var Re=d(Pe,6);de(Re,21,()=>Object.entries(i),([ue,I])=>ue,(ue,I)=>{var W=y(()=>wt(r(I),2));let _e=()=>r(W)[0],Ae=()=>r(W)[1];{let Oe=y(()=>c(_e())),qe=y(()=>`--sf-z-${_e()}`);Ge(ue,{section:"zindex",get fieldKey(){return _e()},get label(){return r(Oe)},step:1,get default(){return Ae()},get cssVar(){return r(qe)}})}});var M=d(Re,4),X=l(M);{let ue=y(()=>o.contrast_bias??0);bs(X,{section:"contrast",fieldKey:"contrast_bias",label:"Contrast Bias",description:"Shifts derived shades up (positive) or down (negative).",min:-.2,max:.2,step:.01,get default(){return r(ue)},cssVar:"--sf-contrast-bias"})}var ee=d(X,2);{let ue=y(()=>o.contrast_threshold??.6);bs(ee,{section:"contrast",fieldKey:"contrast_threshold",label:"Contrast Threshold",description:"Lightness threshold for text-on-color (white vs. black).",min:0,max:1,step:.01,get default(){return r(ue)},cssVar:"--sf-contrast-threshold"})}var ke=d(ee,2);{let ue=y(()=>o.opacity_disabled??.45);bs(ke,{section:"contrast",fieldKey:"opacity_disabled",label:"Disabled Opacity",min:0,max:1,step:.01,get default(){return r(ue)},cssVar:"--sf-opacity-disabled"})}E(U,be)},$$slots:{default:!0}}),V(()=>{se=pe(H,"",se,{"--fp-width":`${r(S)??""}px`,"--fp-offset":`${r(A)??""}px`,"--fp-style":r(F)}),R(ae,`${r(S)??""}px ${r(F)??""} · ${r(A)??""}px offset`)}),E(e,T),Fe()}var Ol=C(' '),Kl=C('
'),Bl=C(' '),Nl=C(`
All --sf-* custom properties declared in the active SLASHED bundle,
- grouped by category.
`);function Hl(e,t){ze(t,!0);const s=ie.inventory?.variables??[],a={color:"Colors",text:"Typography",font:"Typography",leading:"Typography",tracking:"Typography",body:"Typography",heading:"Typography",h1:"Typography",h2:"Typography",h3:"Typography",h4:"Typography",h5:"Typography",h6:"Typography",prose:"Typography",code:"Typography",optical:"Typography",line:"Typography",space:"Spacing",gap:"Spacing",gutter:"Spacing",component:"Spacing",section:"Spacing",flow:"Spacing",safe:"Spacing",header:"Spacing",sticky:"Spacing",size:"Sizing",aspect:"Sizing",ratio:"Sizing",touch:"Sizing",object:"Sizing",container:"Layout",stack:"Layout",cluster:"Layout",sidebar:"Layout",switcher:"Layout",grid:"Layout",cover:"Layout",frame:"Layout",reel:"Layout",imposter:"Layout",bento:"Layout",box:"Layout",center:"Layout",content:"Layout",breakout:"Layout",divider:"Layout",field:"Layout",alternate:"Layout",equal:"Layout",col:"Layout",border:"Borders",stroke:"Borders",radius:"Radius",shadow:"Shadows",blur:"Effects",opacity:"Effects",gradient:"Effects",mask:"Effects",perspective:"Effects",drop:"Effects",contrast:"Effects",duration:"Motion",ease:"Motion",transition:"Motion",motion:"Motion",animation:"Motion",icon:"Icons",z:"Z-Index",is:"States",current:"States",state:"States",focus:"Focus",caret:"Focus",scroll:"Scroll",scrollbar:"Scroll",print:"Print",truncate:"Misc"},n=["Colors","Typography","Spacing","Sizing","Layout","Borders","Radius","Shadows","Effects","Motion","Icons","Z-Index","States","Focus","Scroll","Print","Misc"];function i(b){let x=b;x.startsWith("--sf-")&&(x=x.slice(5));const _=x.indexOf("-"),w=_===-1?x:x.slice(0,_);return a[w]||"Misc"}function o(b){const x={};for(const w of b){const S=i(w);x[S]||(x[S]=[]),x[S].push(w)}const _=[];for(const w of n)x[w]?.length&&(x[w].sort(),_.push({category:w,items:x[w]}));for(const w of Object.keys(x))!n.includes(w)&&x[w]?.length&&(x[w].sort(),_.push({category:w,items:x[w]}));return _}const u=o(s);let c=Ve({});function v(b){c[b]=!c[b]}var h=Nl(),f=l(h),p=l(f),m=d(f,4);de(m,17,()=>u,({category:b,items:x})=>b,(b,x)=>{let _=()=>r(x).category,w=()=>r(x).items;var S=Bl(),A=l(S),F=l(A),Y=l(F),T=d(F,2),z=l(T),D=d(T,2),O=l(D),K=d(A,2);{var q=B=>{var $=Kl();de($,20,w,k=>k,(k,P)=>{var G=Ol(),Z=l(G),j=l(Z);V(()=>R(j,P)),E(k,G)}),E(B,$)};me(K,B=>{c[_()]&&B(q)})}V(()=>{te(A,"aria-expanded",c[_()]?"true":"false"),R(Y,c[_()]?"▼":"▶"),R(z,_()),R(O,`(${w().length??""})`)}),ge("click",A,()=>v(_())),E(b,S)}),V(()=>R(p,`CSS Variables (${s.length??""})`)),E(e,h),Fe()}He(["click"]);var Gl=C(' '),Ul=C('
'),Wl=C(' '),Yl=C('
'),Xl=C('
All utility and state classes declared in the active SLASHED bundle.
');function Zl(e,t){ze(t,!0);const s=ie.inventory?.sf_classes??[],a=ie.inventory?.is_classes??[];let n=fe(!1),i=fe(!1);var o=Xl(),u=l(o),c=l(u),v=d(u,4),h=l(v),f=l(h),p=l(f),m=d(f,4),b=l(m),x=d(h,2);{var _=O=>{var K=Ul();de(K,20,()=>s,q=>q,(q,B)=>{var $=Gl(),k=l($),P=l(k);V(()=>R(P,`.${B??""}`)),E(q,$)}),E(O,K)};me(x,O=>{r(n)&&O(_)})}var w=d(v,2),S=l(w),A=l(S),F=l(A),Y=d(A,4),T=l(Y),z=d(S,2);{var D=O=>{var K=Yl();de(K,20,()=>a,q=>q,(q,B)=>{var $=Wl(),k=l($),P=l(k);V(()=>R(P,`.${B??""}`)),E(q,$)}),E(O,K)};me(z,O=>{r(i)&&O(D)})}V(()=>{R(c,`Registered Classes (${s.length+a.length})`),te(h,"aria-expanded",r(n)?"true":"false"),R(p,r(n)?"▼":"▶"),R(b,`(${s.length??""})`),te(S,"aria-expanded",r(i)?"true":"false"),R(F,r(i)?"▼":"▶"),R(T,`(${a.length??""})`)}),ge("click",h,()=>J(n,!r(n))),ge("click",S,()=>J(i,!r(i))),E(e,o),Fe()}He(["click"]);var Jl=C(` When enabled, hovering a SLASHED class in the Bricks class manager shows a short
+ viewport range, and named aliases live under Advanced.
`);function Tl(e,t){ze(t,!0);const s="spacing",a=ne.defaults?.[s]??{},n=a.space_sizes??{},i=[{key:"gutter",label:"Gutter",cssVar:"--sf-space-gutter"},{key:"gap",label:"Gap",cssVar:"--sf-gap"},{key:"content_gap",label:"Content Gap",cssVar:"--sf-content-gap"},{key:"component_pad",label:"Component Pad",cssVar:"--sf-component-pad"},{key:"section_pad",label:"Section Pad",cssVar:"--sf-section-pad"}];var o=$l(),u=d(l(o),4),c=l(u);{let f=y(()=>a.space_scale??1);Ge(c,{section:s,fieldKey:"space_scale",label:"Space Scale",min:0,step:.05,get default(){return r(f)},cssVar:"--sf-space-scale"})}var v=d(u,2);El(v,{});var h=d(v,2);ra(h,{children:(f,p)=>{var m=Cl(),b=d(ot(m),4),x=l(b);{let E=y(()=>a.viewport_min??22.5);Ge(x,{section:s,fieldKey:"viewport_min",label:"Min viewport (rem)",min:10,max:60,step:.5,get default(){return r(E)}})}var _=d(x,2);{let E=y(()=>a.viewport_max??95);Ge(_,{section:s,fieldKey:"viewport_max",label:"Max viewport (rem)",min:40,max:200,step:.5,get default(){return r(E)}})}var w=d(b,6);de(w,21,()=>Object.entries(n),([E,F])=>E,(E,F)=>{var Y=y(()=>wt(r(F),2));let T=()=>r(Y)[0],z=()=>r(Y)[1];var D=Al(),O=l(D),K=l(O),q=l(K),B=d(K,2),$=l(B),k=d(O,2),P=l(k);{let Z=y(()=>`space_${T()}_min`);Ge(P,{section:s,get fieldKey(){return r(Z)},label:"Min",min:0,step:.01,get default(){return z().min},width:"80px"})}var G=d(P,2);{let Z=y(()=>`space_${T()}_max`);Ge(G,{section:s,get fieldKey(){return r(Z)},label:"Max",min:0,step:.01,get default(){return z().max},width:"80px"})}V(()=>{R(q,T()),R($,`--sf-space-${T()??""}`)}),A(E,D)});var S=d(w,4);de(S,21,()=>i,E=>E.key,(E,F)=>{{let Y=y(()=>a[r(F).key]??"");je(E,{section:s,get fieldKey(){return r(F).key},get label(){return r(F).label},get default(){return r(Y)},get cssVar(){return r(F).cssVar},mono:!0})}}),A(f,m)},$$slots:{default:!0}}),A(e,o),Fe()}var jl=C(' '),zl=C(' ',1);function bs(e,t){ze(t,!0);let s=$e(t,"cssVar",3,""),a=$e(t,"unit",3,""),n=$e(t,"description",3,"");const i=y(()=>Q[t.section]?.[t.fieldKey]===void 0||Q[t.section]?.[t.fieldKey]===null?"":String(Q[t.section][t.fieldKey])),o=y(()=>r(i)===""||Number.isNaN(Number(r(i)))?Number(t.default):Number(r(i)));function u(v){yt(t.section,t.fieldKey,v.currentTarget.value)}function c(v){yt(t.section,t.fieldKey,v.currentTarget.value)}na(e,{get label(){return t.label},get cssVar(){return s()},get fieldId(){return t.fieldKey},get description(){return n()},children:(v,h)=>{var f=zl(),p=ot(f),m=d(p,2),b=d(m,2);{var x=_=>{var w=jl(),S=l(w);V(()=>R(S,a())),A(_,w)};me(b,_=>{a()&&_(x)})}V(_=>{te(p,"min",t.min),te(p,"max",t.max),te(p,"step",t.step),Ws(p,r(o)),te(m,"id",t.fieldKey),te(m,"min",t.min),te(m,"max",t.max),te(m,"step",t.step),Ws(m,r(i)),te(m,"placeholder",_)},[()=>String(t.default)]),ge("input",p,u),ge("input",m,c),A(v,f)},$$slots:{default:!0}}),Fe()}He(["input"]);var Fl=C(""),Pl=C('');function Rl(e,t){ze(t,!0);let s=$e(t,"options",19,()=>[]),a=$e(t,"default",3,""),n=$e(t,"cssVar",3,""),i=$e(t,"description",3,"");const o=y(()=>s().map(v=>typeof v=="string"?{value:v,label:v}:v)),u=y(()=>Q[t.section]?.[t.fieldKey]===void 0||Q[t.section]?.[t.fieldKey]===null?"":String(Q[t.section][t.fieldKey]));function c(v){yt(t.section,t.fieldKey,v.currentTarget.value)}na(e,{get label(){return t.label},get cssVar(){return n()},get fieldId(){return t.fieldKey},get description(){return i()},children:(v,h)=>{var f=Pl(),p=l(f),m=l(p);p.value=p.__value="";var b=d(p);de(b,17,()=>r(o),_=>_.value,(_,w)=>{var S=Fl(),E=l(S),F={};V(()=>{R(E,r(w).label),F!==(F=r(w).value)&&(S.value=(S.__value=r(w).value)??"")}),A(_,S)});var x;ka(f),V(()=>{te(f,"id",t.fieldKey),R(m,`Default (${a()??""})`),x!==(x=r(u))&&(f.value=(f.__value=r(u))??"",Us(f,r(u)))}),ge("change",f,c),A(v,f)},$$slots:{default:!0}}),Fe()}He(["change"]);var ql=C(' '),Ml=C(' '),Dl=C(' '),Ll=C('Shadow
Motion — Durations
Base duration values in milliseconds.
Z-Index
Z-index layer values for stacking context management.
Contrast
',1),Il=C('Radius
Shadows
Motion
Accessibility
');function Vl(e,t){ze(t,!0);const s=ne.defaults?.radius??{},a=ne.defaults?.shadows??{},n=ne.defaults?.motion??{},i=ne.defaults?.zindex??{},o=ne.defaults?.contrast??{},u=n.durations??{},c=U=>U.charAt(0).toUpperCase()+U.slice(1),v=[0,2,4,8,12,16,24,9999],h=["none","xs","s","m","l","xl","2xl","full"],f=y(()=>parseFloat(Q.radius?.radius_scale??ne.defaults?.radius?.radius_scale??1)),p=y(()=>v.map(U=>U*r(f))),m=y(()=>parseFloat(Q.shadows?.shadow_strength??a.shadow_strength??.08)),b=y(()=>parseFloat(Q.motion?.motion_scale??n.motion_scale??1)||1),x=["instant","fast","normal","slow","slower"],_=y(()=>x.map(U=>{const le=Q.motion?.[`duration_${U}`],be=parseFloat(le!==void 0&&le!==""?le:u[U]??0);return{name:U,ms:Math.round(be*r(b))}})),w=(U,le)=>parseFloat(U!==void 0&&U!==""?U:le),S=y(()=>w(Q.contrast?.focus_ring_width,o.focus_ring_width??2)),E=y(()=>w(Q.contrast?.focus_ring_offset,o.focus_ring_offset??2)),F=y(()=>Q.contrast?.focus_ring_style??o.focus_ring_style??"solid"),Y=y(()=>[{label:"xs",shadow:`0 1px 2px 0 rgba(0,0,0,${(r(m)*.5).toFixed(4)})`},{label:"s",shadow:`0 1px 2px 0 rgba(0,0,0,${(r(m)*.5).toFixed(4)}), 0 2px 6px 0 rgba(0,0,0,${r(m).toFixed(4)})`},{label:"m",shadow:`0 1px 3px 0 rgba(0,0,0,${(r(m)*.5).toFixed(4)}), 0 4px 12px 0 rgba(0,0,0,${(r(m)*2).toFixed(4)})`},{label:"l",shadow:`0 2px 4px 0 rgba(0,0,0,${(r(m)*.5).toFixed(4)}), 0 8px 24px 0 rgba(0,0,0,${(r(m)*3).toFixed(4)})`},{label:"xl",shadow:`0 2px 8px 0 rgba(0,0,0,${(r(m)*.5).toFixed(4)}), 0 12px 36px 0 rgba(0,0,0,${(r(m)*3.5).toFixed(4)})`},{label:"glow",shadow:`0 0 15px 2px rgba(74,48,208,${Math.min(r(m)*2,.7).toFixed(4)})`}]);var T=Il(),z=d(l(T),2),D=l(z);{let U=y(()=>s.radius_scale??1);Ge(D,{section:"radius",fieldKey:"radius_scale",label:"Radius Scale",min:0,step:.1,get default(){return r(U)},cssVar:"--sf-radius-scale"})}var O=d(z,2);de(O,23,()=>r(p),(U,le)=>h[le],(U,le,be)=>{var xe=ql(),Te=l(xe);let Pe;var Re=d(Te,2),M=l(Re);V(()=>{Pe=pe(Te,"",Pe,{"border-radius":v[r(be)]===9999?"9999px":`${r(le)}px`}),R(M,h[r(be)])}),A(U,xe)});var K=d(O,4),q=l(K);{let U=y(()=>a.shadow_strength??.08);bs(q,{section:"shadows",fieldKey:"shadow_strength",label:"Shadow Strength",description:"Base opacity for shadow layers (0–1).",min:0,max:1,step:.01,get default(){return r(U)},cssVar:"--sf-shadow-strength"})}var B=d(K,2);de(B,21,()=>r(Y),U=>U.label,(U,le)=>{var be=Ml(),xe=l(be);let Te;var Pe=l(xe);V(()=>{Te=pe(xe,"",Te,{"box-shadow":r(le).shadow}),R(Pe,r(le).label)}),A(U,be)});var $=d(B,4),k=l($);{let U=y(()=>n.motion_scale??1);Ge(k,{section:"motion",fieldKey:"motion_scale",label:"Motion Scale",min:0,step:.1,get default(){return r(U)},cssVar:"--sf-motion-scale"})}var P=d($,2);de(P,21,()=>r(_),U=>U.name,(U,le)=>{var be=Dl(),xe=l(be),Te=l(xe),Pe=d(xe,2),Re=l(Pe);let M;var X=d(Pe,2),ee=l(X);V(()=>{R(Te,r(le).name),M=pe(Re,"",M,{"animation-duration":`${r(le).ms??""}ms`}),R(ee,`${r(le).ms??""}ms`)}),A(U,be)});var G=d(P,4),Z=l(G);{let U=y(()=>o.focus_ring_width??2);bs(Z,{section:"contrast",fieldKey:"focus_ring_width",label:"Focus Ring Width",min:0,max:8,step:.5,get default(){return r(U)},cssVar:"--sf-focus-ring-width",unit:"px"})}var j=d(Z,2);{let U=y(()=>o.focus_ring_offset??2);bs(j,{section:"contrast",fieldKey:"focus_ring_offset",label:"Focus Ring Offset",min:0,max:8,step:.5,get default(){return r(U)},cssVar:"--sf-focus-ring-offset",unit:"px"})}var N=d(j,2);{let U=y(()=>o.focus_ring_style??"solid");Rl(N,{section:"contrast",fieldKey:"focus_ring_style",label:"Focus Ring Style",options:["solid","dashed","dotted","double","none"],get default(){return r(U)},cssVar:"--sf-focus-ring-style"})}var L=d(G,2),H=l(L);let se;var ie=d(H,2),ae=l(ie),oe=d(L,2);ra(oe,{children:(U,le)=>{var be=Ll(),xe=d(ot(be),2),Te=l(xe);{let ue=y(()=>a.glow_color??"");je(Te,{section:"shadows",fieldKey:"glow_color",label:"Glow Color",get default(){return r(ue)},cssVar:"--sf-shadow-glow-color",mono:!0})}var Pe=d(xe,6);de(Pe,21,()=>Object.entries(u),([ue,I])=>ue,(ue,I)=>{var W=y(()=>wt(r(I),2));let _e=()=>r(W)[0],Ae=()=>r(W)[1];{let Oe=y(()=>`duration_${_e()}`),qe=y(()=>c(_e())),Ne=y(()=>`--sf-duration-${_e()}`);Ge(ue,{section:"motion",get fieldKey(){return r(Oe)},get label(){return r(qe)},min:0,step:10,get default(){return Ae()},get cssVar(){return r(Ne)},unit:"ms"})}});var Re=d(Pe,6);de(Re,21,()=>Object.entries(i),([ue,I])=>ue,(ue,I)=>{var W=y(()=>wt(r(I),2));let _e=()=>r(W)[0],Ae=()=>r(W)[1];{let Oe=y(()=>c(_e())),qe=y(()=>`--sf-z-${_e()}`);Ge(ue,{section:"zindex",get fieldKey(){return _e()},get label(){return r(Oe)},step:1,get default(){return Ae()},get cssVar(){return r(qe)}})}});var M=d(Re,4),X=l(M);{let ue=y(()=>o.contrast_bias??0);bs(X,{section:"contrast",fieldKey:"contrast_bias",label:"Contrast Bias",description:"Shifts derived shades up (positive) or down (negative).",min:-.2,max:.2,step:.01,get default(){return r(ue)},cssVar:"--sf-contrast-bias"})}var ee=d(X,2);{let ue=y(()=>o.contrast_threshold??.6);bs(ee,{section:"contrast",fieldKey:"contrast_threshold",label:"Contrast Threshold",description:"Lightness threshold for text-on-color (white vs. black).",min:0,max:1,step:.01,get default(){return r(ue)},cssVar:"--sf-contrast-threshold"})}var ke=d(ee,2);{let ue=y(()=>o.opacity_disabled??.45);bs(ke,{section:"contrast",fieldKey:"opacity_disabled",label:"Disabled Opacity",min:0,max:1,step:.01,get default(){return r(ue)},cssVar:"--sf-opacity-disabled"})}A(U,be)},$$slots:{default:!0}}),V(()=>{se=pe(H,"",se,{"--fp-width":`${r(S)??""}px`,"--fp-offset":`${r(E)??""}px`,"--fp-style":r(F)}),R(ae,`${r(S)??""}px ${r(F)??""} · ${r(E)??""}px offset`)}),A(e,T),Fe()}var Ol=C(' '),Kl=C('
'),Bl=C(' '),Nl=C(`
All --sf-* custom properties declared in the active SLASHED bundle,
+ grouped by category.
`);function Hl(e,t){ze(t,!0);const s=ne.inventory?.variables??[],a={color:"Colors",text:"Typography",font:"Typography",leading:"Typography",tracking:"Typography",body:"Typography",heading:"Typography",h1:"Typography",h2:"Typography",h3:"Typography",h4:"Typography",h5:"Typography",h6:"Typography",prose:"Typography",code:"Typography",optical:"Typography",line:"Typography",space:"Spacing",gap:"Spacing",gutter:"Spacing",component:"Spacing",section:"Spacing",flow:"Spacing",safe:"Spacing",header:"Spacing",sticky:"Spacing",size:"Sizing",aspect:"Sizing",ratio:"Sizing",touch:"Sizing",object:"Sizing",container:"Layout",stack:"Layout",cluster:"Layout",sidebar:"Layout",switcher:"Layout",grid:"Layout",cover:"Layout",frame:"Layout",reel:"Layout",imposter:"Layout",bento:"Layout",box:"Layout",center:"Layout",content:"Layout",breakout:"Layout",divider:"Layout",field:"Layout",alternate:"Layout",equal:"Layout",col:"Layout",border:"Borders",stroke:"Borders",radius:"Radius",shadow:"Shadows",blur:"Effects",opacity:"Effects",gradient:"Effects",mask:"Effects",perspective:"Effects",drop:"Effects",contrast:"Effects",duration:"Motion",ease:"Motion",transition:"Motion",motion:"Motion",animation:"Motion",icon:"Icons",z:"Z-Index",is:"States",current:"States",state:"States",focus:"Focus",caret:"Focus",scroll:"Scroll",scrollbar:"Scroll",print:"Print",truncate:"Misc"},n=["Colors","Typography","Spacing","Sizing","Layout","Borders","Radius","Shadows","Effects","Motion","Icons","Z-Index","States","Focus","Scroll","Print","Misc"];function i(b){let x=b;x.startsWith("--sf-")&&(x=x.slice(5));const _=x.indexOf("-"),w=_===-1?x:x.slice(0,_);return a[w]||"Misc"}function o(b){const x={};for(const w of b){const S=i(w);x[S]||(x[S]=[]),x[S].push(w)}const _=[];for(const w of n)x[w]?.length&&(x[w].sort(),_.push({category:w,items:x[w]}));for(const w of Object.keys(x))!n.includes(w)&&x[w]?.length&&(x[w].sort(),_.push({category:w,items:x[w]}));return _}const u=o(s);let c=Ve({});function v(b){c[b]=!c[b]}var h=Nl(),f=l(h),p=l(f),m=d(f,4);de(m,17,()=>u,({category:b,items:x})=>b,(b,x)=>{let _=()=>r(x).category,w=()=>r(x).items;var S=Bl(),E=l(S),F=l(E),Y=l(F),T=d(F,2),z=l(T),D=d(T,2),O=l(D),K=d(E,2);{var q=B=>{var $=Kl();de($,20,w,k=>k,(k,P)=>{var G=Ol(),Z=l(G),j=l(Z);V(()=>R(j,P)),A(k,G)}),A(B,$)};me(K,B=>{c[_()]&&B(q)})}V(()=>{te(E,"aria-expanded",c[_()]?"true":"false"),R(Y,c[_()]?"▼":"▶"),R(z,_()),R(O,`(${w().length??""})`)}),ge("click",E,()=>v(_())),A(b,S)}),V(()=>R(p,`CSS Variables (${s.length??""})`)),A(e,h),Fe()}He(["click"]);var Gl=C(' '),Ul=C('
'),Wl=C(' '),Yl=C('
'),Xl=C('
All utility and state classes declared in the active SLASHED bundle.
');function Zl(e,t){ze(t,!0);const s=ne.inventory?.sf_classes??[],a=ne.inventory?.is_classes??[];let n=fe(!1),i=fe(!1);var o=Xl(),u=l(o),c=l(u),v=d(u,4),h=l(v),f=l(h),p=l(f),m=d(f,4),b=l(m),x=d(h,2);{var _=O=>{var K=Ul();de(K,20,()=>s,q=>q,(q,B)=>{var $=Gl(),k=l($),P=l(k);V(()=>R(P,`.${B??""}`)),A(q,$)}),A(O,K)};me(x,O=>{r(n)&&O(_)})}var w=d(v,2),S=l(w),E=l(S),F=l(E),Y=d(E,4),T=l(Y),z=d(S,2);{var D=O=>{var K=Yl();de(K,20,()=>a,q=>q,(q,B)=>{var $=Wl(),k=l($),P=l(k);V(()=>R(P,`.${B??""}`)),A(q,$)}),A(O,K)};me(z,O=>{r(i)&&O(D)})}V(()=>{R(c,`Registered Classes (${s.length+a.length})`),te(h,"aria-expanded",r(n)?"true":"false"),R(p,r(n)?"▼":"▶"),R(b,`(${s.length??""})`),te(S,"aria-expanded",r(i)?"true":"false"),R(F,r(i)?"▼":"▶"),R(T,`(${a.length??""})`)}),ge("click",h,()=>J(n,!r(n))),ge("click",S,()=>J(i,!r(i))),A(e,o),Fe()}He(["click"]);var Jl=C(` When enabled, hovering a SLASHED class in the Bricks class manager shows a short
description of what it does. Powered by data/classes-hints.json.
`),Ql=C('Show class hints in Bricks editor Bricks Enable the Bricks integration in SLASHED Settings to use this feature.
'),ec=C('Saved'),tc=C(' '),sc=C(`Bundle Info
The SLASHED CSS bundle is loaded automatically on the frontend and in the block editor canvas.
The inventory is parsed from whichever bundle is active and drives the variable pickers,
class autocomplete, and color palette in any active builder integration.
- Variables registered
-
- Classes registered
-
Plugin Settings
Choose which SLASHED CSS bundle to load on the frontend and in builder canvases. Essential is the full core layer (everything in core/). Optimal adds the optional color palette, extended size/spacing scales,
form styling, and legacy fallbacks. Full additionally bundles the
component tokens & styles and the utility classes.
Override the HTML root font-size. Use this when your theme or builder forces a root font-size
- that conflicts with rem-based framework values.
`);function ac(e,t){ze(t,!0);let s=fe(Ve(ie.pluginSettings?.css_bundle??"optimal")),a=fe(Ve(ie.pluginSettings?.html_font_size??"")),n=fe(Ve(ie.pluginSettings?.show_class_hints??!1)),i=fe(!1),o=fe(!1),u=fe(""),c=null;const v=y(()=>ie.activeIntegrations?.bricks??!0);async function h(){J(i,!0),J(o,!1),J(u,"");try{await Uo({css_bundle:r(s),html_font_size:r(a),show_class_hints:r(n)}),J(o,!0),c&&clearTimeout(c),c=setTimeout(()=>{J(o,!1),c=null},3e3)}catch(H){J(u,H.message||"Save failed",!0)}finally{J(i,!1)}}var f=sc(),p=d(l(f),4),m=d(l(p),2),b=l(m),x=d(m,4),_=l(x),w=d(p,4),S=d(l(w),2),A=l(S);A.value=A.__value="essential";var F=d(A);F.value=F.__value="optimal";var Y=d(F);Y.value=Y.__value="full";var T=d(w,2),z=d(l(T),2),D=l(z);D.value=D.__value="";var O=d(D);O.value=O.__value="100";var K=d(O);K.value=K.__value="62.5";var q=d(T,2);{var B=H=>{var se=Jl(),ne=l(se),ae=l(ne);xo(ae,()=>r(n),oe=>J(n,oe)),E(H,se)},$=H=>{var se=Ql();E(H,se)};me(q,H=>{r(v)?H(B):H($,-1)})}var k=d(q,2),P=l(k),G=l(P),Z=d(P,2);{var j=H=>{var se=ec();E(H,se)};me(Z,H=>{r(o)&&H(j)})}var N=d(Z,2);{var L=H=>{var se=tc(),ne=l(se);V(()=>R(ne,r(u))),E(H,se)};me(N,H=>{r(u)&&H(L)})}V(()=>{R(b,ie.inventory?.variables?.length??0),R(_,(ie.inventory?.sf_classes?.length??0)+(ie.inventory?.is_classes?.length??0)),P.disabled=r(i),R(G,r(i)?"Saving...":"Save Settings")}),Sa(S,()=>r(s),H=>J(s,H)),Sa(z,()=>r(a),H=>J(a,H)),ge("click",P,h),E(e,f),Fe()}He(["click"]);const Lr=22.5,rc=95;function qn(e,t){if(e<=0||t<=0)return null;const s=rc-Lr,a=(t-e)/s,n=parseFloat(a.toFixed(6)),i=parseFloat(e.toFixed(4)),o=parseFloat(t.toFixed(4));return`clamp(${i}rem, calc(${n} * (100vw - ${Lr}rem) + ${i}rem), ${o}rem)`}function Ir(e){const t=parseFloat(e);if(isNaN(t))return"0";let s=t.toFixed(6).replace(/0+$/,"").replace(/\.$/,"");return s===""?"0":s}function De(e){return e!=null&&e!==""}function nc(e){const t=[],s=["primary","secondary","tertiary","action","neutral","base"];for(const i of s){const o=`brand_${i}`;De(e[o])&&t.push(`--sf-color-${i}-light: ${e[o]};`)}const a=["success","warning","error","info","danger"];for(const i of a){const o=`status_${i}`;De(e[o])&&t.push(`--sf-color-${i}-light: ${e[o]};`)}if(e.dark_overrides_enabled!=="0"){for(const i of s){const o=`brand_dark_${i}`;De(e[o])&&t.push(`--sf-color-${i}-dark: ${e[o]};`)}for(const i of a){const o=`status_dark_${i}`;De(e[o])&&t.push(`--sf-color-${i}-dark: ${e[o]};`)}}return t}function ic(e){const t=[],s=["body","heading","mono","display","humanist","geometric","slab"];for(const n of s){const i=`font_${n}`;De(e[i])&&t.push(`--sf-font-${n}: ${e[i]};`)}De(e.text_scale)&&t.push(`--sf-text-scale: ${e.text_scale};`),De(e.text_display_scale)&&t.push(`--sf-text-display-scale: ${e.text_display_scale};`);const a=["2xs","xs","s","m","l","xl","2xl","3xl","4xl","display-s","display-m","display-l"];for(const n of a){const i=`size_${n}_min`,o=`size_${n}_max`,u=e[i],c=e[o];if(De(u)&&De(c)){const v=qn(parseFloat(u),parseFloat(c));v&&t.push(`--sf-text-${n}: ${v};`)}}return t}function oc(e){const t=[];De(e.space_scale)&&t.push(`--sf-space-scale: ${e.space_scale};`);const s=["2xs","xs","s","m","l","xl","2xl","3xl","4xl"];for(const n of s){const i=e[`space_${n}_min`],o=e[`space_${n}_max`];if(De(i)&&De(o)){const u=qn(parseFloat(i),parseFloat(o));u&&t.push(`--sf-space-${n}: calc(${u} * var(--sf-space-scale));`)}}const a={gutter:"--sf-space-gutter",gap:"--sf-gap",content_gap:"--sf-content-gap",component_pad:"--sf-component-pad",section_pad:"--sf-section-pad"};for(const[n,i]of Object.entries(a))De(e[n])&&t.push(`${i}: ${e[n]};`);return t}function lc(e){const t=[];return De(e.radius_scale)&&t.push(`--sf-radius-scale: ${e.radius_scale};`),t}function cc(e){const t=[];return De(e.shadow_strength)&&t.push(`--sf-shadow-strength: calc(${e.shadow_strength} + var(--sf-is-dark) * 0.17);`),De(e.glow_color)&&t.push(`--sf-shadow-glow-color: ${e.glow_color};`),t}function dc(e){const t=[];De(e.motion_scale)&&t.push(`--sf-motion-scale: ${e.motion_scale};`);const s=["instant","fast","normal","slow","slower"];for(const a of s){const n=`duration_${a}`;De(e[n])&&t.push(`--sf-duration-${a}: calc(${e[n]}ms * var(--sf-motion-scale));`)}return t}function uc(e){const t=[],s=["below","base","raised","low","mid","high","top","max"];for(const a of s)De(e[a])&&t.push(`--sf-z-${a}: ${parseInt(e[a],10)};`);return t}function vc(e){const t=[],s={contrast_bias:"--sf-contrast-bias",contrast_threshold:"--sf-contrast-threshold",opacity_disabled:"--sf-opacity-disabled"};for(const[n,i]of Object.entries(s))De(e[n])&&t.push(`${i}: ${Ir(e[n])};`);const a={focus_ring_width:"--sf-focus-ring-width",focus_ring_offset:"--sf-focus-ring-offset"};for(const[n,i]of Object.entries(a))De(e[n])&&t.push(`${i}: ${Ir(e[n])}px;`);return De(e.focus_ring_style)&&["solid","dashed","dotted","double","none"].includes(e.focus_ring_style)&&t.push(`--sf-focus-ring-style: ${e.focus_ring_style};`),t}function mr(e){const t=[];if(e.colors&&typeof e.colors=="object"&&t.push(...nc(e.colors)),e.typography&&typeof e.typography=="object"&&t.push(...ic(e.typography)),e.spacing&&typeof e.spacing=="object"&&t.push(...oc(e.spacing)),e.radius&&typeof e.radius=="object"&&t.push(...lc(e.radius)),e.shadows&&typeof e.shadows=="object"&&t.push(...cc(e.shadows)),e.motion&&typeof e.motion=="object"&&t.push(...dc(e.motion)),e.zindex&&typeof e.zindex=="object"&&t.push(...uc(e.zindex)),e.contrast&&typeof e.contrast=="object"&&t.push(...vc(e.contrast)),t.length===0)return"";let s=`@layer slashed.overrides {
+ that conflicts with rem-based framework values. `);function ac(e,t){ze(t,!0);let s=fe(Ve(ne.pluginSettings?.css_bundle??"optimal")),a=fe(Ve(ne.pluginSettings?.html_font_size??"")),n=fe(Ve(ne.pluginSettings?.show_class_hints??!1)),i=fe(!1),o=fe(!1),u=fe(""),c=null;const v=y(()=>ne.activeIntegrations?.bricks??!0);async function h(){J(i,!0),J(o,!1),J(u,"");try{await Uo({css_bundle:r(s),html_font_size:r(a),show_class_hints:r(n)}),J(o,!0),c&&clearTimeout(c),c=setTimeout(()=>{J(o,!1),c=null},3e3)}catch(H){J(u,H.message||"Save failed",!0)}finally{J(i,!1)}}var f=sc(),p=d(l(f),4),m=d(l(p),2),b=l(m),x=d(m,4),_=l(x),w=d(p,4),S=d(l(w),2),E=l(S);E.value=E.__value="essential";var F=d(E);F.value=F.__value="optimal";var Y=d(F);Y.value=Y.__value="full";var T=d(w,2),z=d(l(T),2),D=l(z);D.value=D.__value="";var O=d(D);O.value=O.__value="100";var K=d(O);K.value=K.__value="62.5";var q=d(T,2);{var B=H=>{var se=Jl(),ie=l(se),ae=l(ie);xo(ae,()=>r(n),oe=>J(n,oe)),A(H,se)},$=H=>{var se=Ql();A(H,se)};me(q,H=>{r(v)?H(B):H($,-1)})}var k=d(q,2),P=l(k),G=l(P),Z=d(P,2);{var j=H=>{var se=ec();A(H,se)};me(Z,H=>{r(o)&&H(j)})}var N=d(Z,2);{var L=H=>{var se=tc(),ie=l(se);V(()=>R(ie,r(u))),A(H,se)};me(N,H=>{r(u)&&H(L)})}V(()=>{R(b,ne.inventory?.variables?.length??0),R(_,(ne.inventory?.sf_classes?.length??0)+(ne.inventory?.is_classes?.length??0)),P.disabled=r(i),R(G,r(i)?"Saving...":"Save Settings")}),Sa(S,()=>r(s),H=>J(s,H)),Sa(z,()=>r(a),H=>J(a,H)),ge("click",P,h),A(e,f),Fe()}He(["click"]);const Lr=22.5,rc=95;function qn(e,t){if(e<=0||t<=0)return null;const s=rc-Lr,a=(t-e)/s,n=parseFloat(a.toFixed(6)),i=parseFloat(e.toFixed(4)),o=parseFloat(t.toFixed(4));return`clamp(${i}rem, calc(${n} * (100vw - ${Lr}rem) + ${i}rem), ${o}rem)`}function Ir(e){const t=parseFloat(e);if(isNaN(t))return"0";let s=t.toFixed(6).replace(/0+$/,"").replace(/\.$/,"");return s===""?"0":s}function De(e){return e!=null&&e!==""}function nc(e){const t=[],s=["primary","secondary","tertiary","action","neutral","base"];for(const i of s){const o=`brand_${i}`;De(e[o])&&t.push(`--sf-color-${i}-light: ${e[o]};`)}const a=["success","warning","error","info","danger"];for(const i of a){const o=`status_${i}`;De(e[o])&&t.push(`--sf-color-${i}-light: ${e[o]};`)}if(e.dark_overrides_enabled!=="0"){for(const i of s){const o=`brand_dark_${i}`;De(e[o])&&t.push(`--sf-color-${i}-dark: ${e[o]};`)}for(const i of a){const o=`status_dark_${i}`;De(e[o])&&t.push(`--sf-color-${i}-dark: ${e[o]};`)}}return t}function ic(e){const t=[],s=["body","heading","mono","display","humanist","geometric","slab"];for(const n of s){const i=`font_${n}`;De(e[i])&&t.push(`--sf-font-${n}: ${e[i]};`)}De(e.text_scale)&&t.push(`--sf-text-scale: ${e.text_scale};`),De(e.text_display_scale)&&t.push(`--sf-text-display-scale: ${e.text_display_scale};`);const a=["2xs","xs","s","m","l","xl","2xl","3xl","4xl","display-s","display-m","display-l"];for(const n of a){const i=`size_${n}_min`,o=`size_${n}_max`,u=e[i],c=e[o];if(De(u)&&De(c)){const v=qn(parseFloat(u),parseFloat(c));v&&t.push(`--sf-text-${n}: ${v};`)}}return t}function oc(e){const t=[];De(e.space_scale)&&t.push(`--sf-space-scale: ${e.space_scale};`);const s=["2xs","xs","s","m","l","xl","2xl","3xl","4xl"];for(const n of s){const i=e[`space_${n}_min`],o=e[`space_${n}_max`];if(De(i)&&De(o)){const u=qn(parseFloat(i),parseFloat(o));u&&t.push(`--sf-space-${n}: calc(${u} * var(--sf-space-scale));`)}}const a={gutter:"--sf-space-gutter",gap:"--sf-gap",content_gap:"--sf-content-gap",component_pad:"--sf-component-pad",section_pad:"--sf-section-pad"};for(const[n,i]of Object.entries(a))De(e[n])&&t.push(`${i}: ${e[n]};`);return t}function lc(e){const t=[];return De(e.radius_scale)&&t.push(`--sf-radius-scale: ${e.radius_scale};`),t}function cc(e){const t=[];return De(e.shadow_strength)&&t.push(`--sf-shadow-strength: calc(${e.shadow_strength} + var(--sf-is-dark) * 0.17);`),De(e.glow_color)&&t.push(`--sf-shadow-glow-color: ${e.glow_color};`),t}function dc(e){const t=[];De(e.motion_scale)&&t.push(`--sf-motion-scale: ${e.motion_scale};`);const s=["instant","fast","normal","slow","slower"];for(const a of s){const n=`duration_${a}`;De(e[n])&&t.push(`--sf-duration-${a}: calc(${e[n]}ms * var(--sf-motion-scale));`)}return t}function uc(e){const t=[],s=["below","base","raised","low","mid","high","top","max"];for(const a of s)De(e[a])&&t.push(`--sf-z-${a}: ${parseInt(e[a],10)};`);return t}function vc(e){const t=[],s={contrast_bias:"--sf-contrast-bias",contrast_threshold:"--sf-contrast-threshold",opacity_disabled:"--sf-opacity-disabled"};for(const[n,i]of Object.entries(s))De(e[n])&&t.push(`${i}: ${Ir(e[n])};`);const a={focus_ring_width:"--sf-focus-ring-width",focus_ring_offset:"--sf-focus-ring-offset"};for(const[n,i]of Object.entries(a))De(e[n])&&t.push(`${i}: ${Ir(e[n])}px;`);return De(e.focus_ring_style)&&["solid","dashed","dotted","double","none"].includes(e.focus_ring_style)&&t.push(`--sf-focus-ring-style: ${e.focus_ring_style};`),t}function mr(e){const t=[];if(e.colors&&typeof e.colors=="object"&&t.push(...nc(e.colors)),e.typography&&typeof e.typography=="object"&&t.push(...ic(e.typography)),e.spacing&&typeof e.spacing=="object"&&t.push(...oc(e.spacing)),e.radius&&typeof e.radius=="object"&&t.push(...lc(e.radius)),e.shadows&&typeof e.shadows=="object"&&t.push(...cc(e.shadows)),e.motion&&typeof e.motion=="object"&&t.push(...dc(e.motion)),e.zindex&&typeof e.zindex=="object"&&t.push(...uc(e.zindex)),e.contrast&&typeof e.contrast=="object"&&t.push(...vc(e.contrast)),t.length===0)return"";let s=`@layer slashed.overrides {
:root {
`;for(const a of t)s+=` ${a}
`;return s+=` }
@@ -38,7 +38,7 @@ var Dn=Object.defineProperty;var br=e=>{throw TypeError(e)};var Ln=(e,t,s)=>t in
via this tab, then import your template via your builder. SLASHED re-registers all classes,
variables, and color palettes automatically. Verify that colors, spacing, and fonts match the original.
If something looks off, check the browser console for unresolved var() calls —
- this means the CSS bundle isn't loading or the token file wasn't imported yet.
`);function mc(e,t){ze(t,!0);let s=fe(!1),a=fe("");const n=y(()=>mr(Q)),i=y(()=>r(n).length>0);function o(){if(!r(n))return;const P=new Blob([r(n)],{type:"text/css"}),G=URL.createObjectURL(P),Z=document.createElement("a");Z.href=G,Z.download=`slashed-custom-${new Date().toISOString().slice(0,10)}.css`,Z.click(),URL.revokeObjectURL(G)}async function u(){J(s,!0),J(a,"");try{const P=await Yo(),G=JSON.stringify(P,null,2),Z=new Blob([G],{type:"application/json"}),j=URL.createObjectURL(Z),N=document.createElement("a");N.href=j,N.download=`slashed-tokens-${new Date().toISOString().slice(0,10)}.json`,N.click(),URL.revokeObjectURL(j)}catch(P){J(a,P.message||"Export failed",!0)}finally{J(s,!1)}}let c=fe(null),v=fe(!1),h=fe(""),f=fe(""),p=fe(0);async function m(){const P=r(c)?.files?.[0];if(P){J(h,""),J(f,""),J(v,!0);try{const G=await P.text(),Z=JSON.parse(G),j=await Xo(Z),N=j.settings_imported?" Plugin settings restored.":"";J(h,`Imported ${j.imported} section(s) successfully.${N}`),J(p,3);const L=setInterval(()=>{J(p,r(p)-1),r(p)<=0&&(clearInterval(L),window.location.reload())},1e3)}catch(G){J(f,G.message||"Import failed",!0)}finally{J(v,!1),r(c)&&(r(c).value="")}}}var b=gc(),x=d(l(b),4),_=d(l(x),4),w=l(_),S=l(w),A=d(w,2),F=d(A,2);{var Y=P=>{var G=pc(),Z=l(G);V(()=>R(Z,r(a))),E(P,G)};me(F,P=>{r(a)&&P(Y)})}var T=d(x,2),z=d(l(T),4),D=l(z);ko(D,P=>J(c,P),()=>r(c));var O=d(D,2),K=l(O),q=d(z,2);{var B=P=>{var G=hc(),Z=l(G),j=d(Z);{var N=L=>{var H=lo();V(()=>R(H,`Reloading in ${r(p)??""}…`)),E(L,H)};me(j,L=>{r(p)>0&&L(N)})}V(()=>R(Z,`${r(h)??""} `)),E(P,G)};me(q,P=>{r(h)&&P(B)})}var $=d(q,2);{var k=P=>{var G=_c(),Z=l(G);V(()=>R(Z,r(f))),E(P,G)};me($,P=>{r(f)&&P(k)})}V(()=>{w.disabled=r(s),R(S,r(s)?"Exporting…":"Download token file (.json)"),A.disabled=!r(i),te(A,"title",r(i)?"Download overrides as a standalone CSS file":"No overrides set yet"),O.disabled=r(v),R(K,r(v)?"Importing…":"Import token file")}),ge("click",w,u),ge("click",A,o),ge("click",O,m),E(e,b),Fe()}He(["click"]);var bc=C('Bricks integration is disabled — these hooks have no effect until it is turned on.'),yc=C('
Parameters:
'),wc=C(`Filter Hooks Reference
These WordPress filter hooks let you customize SLASHED integrations from your theme or a mu-plugin.
+ this means the CSS bundle isn't loading or the token file wasn't imported yet.
`);function mc(e,t){ze(t,!0);let s=fe(!1),a=fe("");const n=y(()=>mr(Q)),i=y(()=>r(n).length>0);function o(){if(!r(n))return;const P=new Blob([r(n)],{type:"text/css"}),G=URL.createObjectURL(P),Z=document.createElement("a");Z.href=G,Z.download=`slashed-custom-${new Date().toISOString().slice(0,10)}.css`,Z.click(),URL.revokeObjectURL(G)}async function u(){J(s,!0),J(a,"");try{const P=await Yo(),G=JSON.stringify(P,null,2),Z=new Blob([G],{type:"application/json"}),j=URL.createObjectURL(Z),N=document.createElement("a");N.href=j,N.download=`slashed-tokens-${new Date().toISOString().slice(0,10)}.json`,N.click(),URL.revokeObjectURL(j)}catch(P){J(a,P.message||"Export failed",!0)}finally{J(s,!1)}}let c=fe(null),v=fe(!1),h=fe(""),f=fe(""),p=fe(0);async function m(){const P=r(c)?.files?.[0];if(P){J(h,""),J(f,""),J(v,!0);try{const G=await P.text(),Z=JSON.parse(G),j=await Xo(Z),N=j.settings_imported?" Plugin settings restored.":"";J(h,`Imported ${j.imported} section(s) successfully.${N}`),J(p,3);const L=setInterval(()=>{J(p,r(p)-1),r(p)<=0&&(clearInterval(L),window.location.reload())},1e3)}catch(G){J(f,G.message||"Import failed",!0)}finally{J(v,!1),r(c)&&(r(c).value="")}}}var b=gc(),x=d(l(b),4),_=d(l(x),4),w=l(_),S=l(w),E=d(w,2),F=d(E,2);{var Y=P=>{var G=pc(),Z=l(G);V(()=>R(Z,r(a))),A(P,G)};me(F,P=>{r(a)&&P(Y)})}var T=d(x,2),z=d(l(T),4),D=l(z);ko(D,P=>J(c,P),()=>r(c));var O=d(D,2),K=l(O),q=d(z,2);{var B=P=>{var G=hc(),Z=l(G),j=d(Z);{var N=L=>{var H=lo();V(()=>R(H,`Reloading in ${r(p)??""}…`)),A(L,H)};me(j,L=>{r(p)>0&&L(N)})}V(()=>R(Z,`${r(h)??""} `)),A(P,G)};me(q,P=>{r(h)&&P(B)})}var $=d(q,2);{var k=P=>{var G=_c(),Z=l(G);V(()=>R(Z,r(f))),A(P,G)};me($,P=>{r(f)&&P(k)})}V(()=>{w.disabled=r(s),R(S,r(s)?"Exporting…":"Download token file (.json)"),E.disabled=!r(i),te(E,"title",r(i)?"Download overrides as a standalone CSS file":"No overrides set yet"),O.disabled=r(v),R(K,r(v)?"Importing…":"Import token file")}),ge("click",w,u),ge("click",E,o),ge("click",O,m),A(e,b),Fe()}He(["click"]);var bc=C('Bricks integration is disabled — these hooks have no effect until it is turned on.'),yc=C('
Parameters:
'),wc=C(`Filter Hooks Reference
These WordPress filter hooks let you customize SLASHED integrations from your theme or a mu-plugin.
Hooks only fire when their respective integration is active.
Bricks integration Bricks `);function xc(e,t){ze(t,!0);const s=[{name:"slashed_bricks/css_bundle_url",description:"Override which CSS bundle URL to load.",params:"$url (string) - The current CSS bundle URL.",example:`add_filter( 'slashed_bricks/css_bundle_url', function( $url ) {
// Load from a CDN instead.
return 'https://cdn.example.com/slashed/slashed.optimal.css';
@@ -68,14 +68,14 @@ add_filter( 'slashed_bricks/inventory_local_path', function() {
'SLASHED Primary',
'SLASHED Secondary',
] ) );
-} );`}],a=y(()=>ie.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();E(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),A=d(w,2),F=d(l(A),2),Y=l(F),T=d(A,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)}),E(f,m)}),V(()=>o=Ie(i,1,"group svelte-a36hjt",null,o,{"group--inactive":!r(a)})),E(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-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}",description:"Pre-composed transition shorthands."},{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=ie.inventory?.variables?.length??0,i=ie.inventory?.sf_classes?.length??0,o=ie.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),A=d(_,2),F=l(A),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(A,2);{var $=j=>{var N=jc(),L=d(l(N),2);de(L,17,()=>r(u),Ds,(ne,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)}),E(Re,X)}),V(Re=>{oe.open=Re,R(be,r(ae).category),R(Te,r(ae).description)},[()=>!r(s).trim()]),E(ne,oe)});var H=d(L,2);{var se=ne=>{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)}),E(U,be)}),V(U=>ae.open=U,[()=>!r(s).trim()]),E(ne,ae)};me(H,ne=>{r(v).length>0&&ne(se)})}E(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 ne=Fc(),ae=l(ne),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)}),E(Te,Re)}),V(Te=>{ne.open=Te,R(U,r(se).category),R(be,r(se).description)},[()=>!r(s).trim()]),E(H,ne)}),E(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)??""}"`)),E(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")),E(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-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}",description:"Pre-composed transition shorthands."},{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
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=ie.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),A=y(()=>r(w)&&r(S)?f(r(w),r(S)):null),F=y(()=>r(A)!==null?p(r(A)):null),Y=y(()=>r(A)===null?null:r(A)>=4.5?"AAA":r(A)>=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)),E(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)),E(M,ee)});var L=d(N,2),H=l(L),se=d(H),ne=d(j,2),ae=l(ne);{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(A).toFixed(2),()=>m(r(F)),()=>m(r(Y))]),E(M,X)},U=M=>{var X=Vc();E(M,X)};me(ae,M=>{r(A)!==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)]),E(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)]),E(Ze,Ct)},lt=Ze=>{var Ct=Bc();E(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)),E(_e,Ne)}),V((_e,Ae)=>{te(ue,"title",_e),pe(I,Ae)},[()=>o(X),()=>z(X)]),E(M,ke)}),V((M,X,ee,ke,ue)=>{pe(G,M),R(Z,` ${X??""}`),pe(H,ee),R(se,` ${ke??""}`),pe(ne,`background:${ue??""}`)},[()=>z(r(x)),()=>o(r(x)),()=>z(r(_)),()=>o(r(_)),()=>u(r(_))||"#fff"]),E(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
+ 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.
The grid will fit as many columns as possible at or above this width.
Switcher
Viewport width at which .sf-switcher flips from a stacked column to a row.
Bento Grid
Column count and row height presets for .sf-bento free-form grid layouts.
Header & Sticky
Set mobile and desktop header heights in rem. When both are provided, --sf-header-height becomes a fluid clamp() between them using
the viewport range configured in the Spacing tab. Set both to the same value for a
- fixed height. Leave blank to use the framework defaults (3.5rem mobile, 5rem desktop) — shown as the input placeholders.
Header height Sticky offset `);function Xc(e,t){ze(t,!0);const s="layouts",a=ie.defaults?.[s]??{};var n=Yc(),i=d(l(n),4),o=l(i);{let j=y(()=>a.container_narrow??"38rem");je(o,{section:s,fieldKey:"container_narrow",label:"Narrow",get default(){return r(j)},cssVar:"--sf-container-narrow",mono:!0})}var u=d(o,2);{let j=y(()=>a.container_prose??"65ch");je(u,{section:s,fieldKey:"container_prose",label:"Prose",get default(){return r(j)},cssVar:"--sf-container-prose",mono:!0})}var c=d(u,2);{let j=y(()=>a.container_default??"75rem");je(c,{section:s,fieldKey:"container_default",label:"Default",get default(){return r(j)},cssVar:"--sf-container-default",mono:!0})}var v=d(c,2);{let j=y(()=>a.container_wide??"90rem");je(v,{section:s,fieldKey:"container_wide",label:"Wide",get default(){return r(j)},cssVar:"--sf-container-wide",mono:!0})}var h=d(i,6),f=l(h);{let j=y(()=>a.grid_min??"16rem");je(f,{section:s,fieldKey:"grid_min",label:"Default min",get default(){return r(j)},cssVar:"--sf-grid-min",mono:!0})}var p=d(f,2);{let j=y(()=>a.grid_min_xs??"10rem");je(p,{section:s,fieldKey:"grid_min_xs",label:"XS min",get default(){return r(j)},cssVar:"--sf-grid-min-xs",mono:!0})}var m=d(p,2);{let j=y(()=>a.grid_min_s??"13rem");je(m,{section:s,fieldKey:"grid_min_s",label:"S min",get default(){return r(j)},cssVar:"--sf-grid-min-s",mono:!0})}var b=d(m,2);{let j=y(()=>a.grid_min_l??"20rem");je(b,{section:s,fieldKey:"grid_min_l",label:"L min",get default(){return r(j)},cssVar:"--sf-grid-min-l",mono:!0})}var x=d(b,2);{let j=y(()=>a.grid_min_xl??"24rem");je(x,{section:s,fieldKey:"grid_min_xl",label:"XL min",get default(){return r(j)},cssVar:"--sf-grid-min-xl",mono:!0})}var _=d(x,2);{let j=y(()=>a.grid_min_2xl??"28rem");je(_,{section:s,fieldKey:"grid_min_2xl",label:"2XL min",get default(){return r(j)},cssVar:"--sf-grid-min-2xl",mono:!0})}var w=d(h,6),S=l(w);{let j=y(()=>a.switcher_threshold??"30rem");je(S,{section:s,fieldKey:"switcher_threshold",label:"Threshold",get default(){return r(j)},cssVar:"--sf-switcher-threshold",mono:!0})}var A=d(w,6),F=l(A);{let j=y(()=>a.bento_cols??"3");je(F,{section:s,fieldKey:"bento_cols",label:"Columns",get default(){return r(j)},cssVar:"--sf-bento-cols-default",mono:!0})}var Y=d(F,2);{let j=y(()=>a.bento_row_default??"10rem");je(Y,{section:s,fieldKey:"bento_row_default",label:"Row (default)",get default(){return r(j)},cssVar:"--sf-bento-row-default",mono:!0})}var T=d(Y,2);{let j=y(()=>a.bento_row_compact??"6rem");je(T,{section:s,fieldKey:"bento_row_compact",label:"Row (compact)",get default(){return r(j)},cssVar:"--sf-bento-row-compact",mono:!0})}var z=d(T,2);{let j=y(()=>a.bento_row_tall??"16rem");je(z,{section:s,fieldKey:"bento_row_tall",label:"Row (tall)",get default(){return r(j)},cssVar:"--sf-bento-row-tall",mono:!0})}var D=d(A,6),O=l(D),K=d(l(O),2),q=l(K);{let j=y(()=>a.header_height_mobile||"3.5");Ge(q,{section:s,fieldKey:"header_height_mobile",label:"Mobile (rem)",min:0,step:.25,get default(){return r(j)},cssVar:"--sf-header-height-mobile",width:"100px"})}var B=d(q,2);{let j=y(()=>a.header_height_desktop||"5");Ge(B,{section:s,fieldKey:"header_height_desktop",label:"Desktop (rem)",min:0,step:.25,get default(){return r(j)},cssVar:"--sf-header-height-desktop",width:"100px"})}var $=d(O,2),k=d(l($),2),P=l(k);{let j=y(()=>a.sticky_offset_mobile||"3.5");Ge(P,{section:s,fieldKey:"sticky_offset_mobile",label:"Mobile (rem)",min:0,step:.25,get default(){return r(j)},cssVar:"--sf-sticky-offset-mobile",width:"100px"})}var G=d(P,2);{let j=y(()=>a.sticky_offset_desktop||"5");Ge(G,{section:s,fieldKey:"sticky_offset_desktop",label:"Desktop (rem)",min:0,step:.25,get default(){return r(j)},cssVar:"--sf-sticky-offset-desktop",width:"100px"})}var Z=d(D,2);ra(Z,{children:(j,N)=>{var L=Wc(),H=d(ot(L),4),se=l(H);{let W=y(()=>a.content_width??"var(--sf-container-default)");je(se,{section:s,fieldKey:"content_width",label:"Content width",get default(){return r(W)},cssVar:"--sf-content-width",mono:!0})}var ne=d(se,2);{let W=y(()=>a.breakout_width??"var(--sf-container-wide)");je(ne,{section:s,fieldKey:"breakout_width",label:"Breakout width",get default(){return r(W)},cssVar:"--sf-breakout-width",mono:!0})}var ae=d(H,4),oe=l(ae);{let W=y(()=>a.sidebar_width??"18rem");je(oe,{section:s,fieldKey:"sidebar_width",label:"Sidebar width",get default(){return r(W)},cssVar:"--sf-sidebar-width",mono:!0})}var U=d(oe,2);{let W=y(()=>a.sidebar_min_width??"50%");je(U,{section:s,fieldKey:"sidebar_min_width",label:"Content col minimum",get default(){return r(W)},cssVar:"--sf-sidebar-min-width",mono:!0})}var le=d(ae,4),be=l(le);{let W=y(()=>a.cover_min_height??"100dvh");je(be,{section:s,fieldKey:"cover_min_height",label:"Min height",get default(){return r(W)},cssVar:"--sf-cover-min-height",mono:!0})}var xe=d(be,2);{let W=y(()=>a.cover_padding??"var(--sf-section-pad)");je(xe,{section:s,fieldKey:"cover_padding",label:"Padding",get default(){return r(W)},cssVar:"--sf-cover-padding",mono:!0})}var Te=d(le,4),Pe=l(Te);{let W=y(()=>a.frame_ratio??"16 / 9");je(Pe,{section:s,fieldKey:"frame_ratio",label:"Aspect ratio",get default(){return r(W)},cssVar:"--sf-frame-ratio",mono:!0})}var Re=d(Te,4),M=l(Re);{let W=y(()=>a.reel_item_width??"max-content");je(M,{section:s,fieldKey:"reel_item_width",label:"Item width",get default(){return r(W)},cssVar:"--sf-reel-item-width",mono:!0})}var X=d(M,2);{let W=y(()=>a.reel_height??"auto");je(X,{section:s,fieldKey:"reel_height",label:"Height",get default(){return r(W)},cssVar:"--sf-reel-height",mono:!0})}var ee=d(Re,4),ke=l(ee);{let W=y(()=>a.imposter_margin??"var(--sf-space-m)");je(ke,{section:s,fieldKey:"imposter_margin",label:"Margin",get default(){return r(W)},cssVar:"--sf-imposter-margin",mono:!0})}var ue=d(ee,4),I=l(ue);{let W=y(()=>a.equal_cols??"2");je(I,{section:s,fieldKey:"equal_cols",label:"Column count",get default(){return r(W)},cssVar:"--sf-equal-cols",mono:!0})}E(j,L)},$$slots:{default:!0}}),E(e,n),Fe()}var Zc=C(' '),Jc=C(' '),Qc=C(' '),ed=C(' '),td=C(`Live preview
Typography
The quick brown fox jumps over the lazy dog
Body text uses --sf-color-text--secondary over the page
+ fixed height. Leave blank to use the framework defaults (3.5rem mobile, 5rem desktop) — shown as the input placeholders.
Header height Sticky offset `);function Xc(e,t){ze(t,!0);const s="layouts",a=ne.defaults?.[s]??{};var n=Yc(),i=d(l(n),4),o=l(i);{let j=y(()=>a.container_narrow??"38rem");je(o,{section:s,fieldKey:"container_narrow",label:"Narrow",get default(){return r(j)},cssVar:"--sf-container-narrow",mono:!0})}var u=d(o,2);{let j=y(()=>a.container_prose??"65ch");je(u,{section:s,fieldKey:"container_prose",label:"Prose",get default(){return r(j)},cssVar:"--sf-container-prose",mono:!0})}var c=d(u,2);{let j=y(()=>a.container_default??"75rem");je(c,{section:s,fieldKey:"container_default",label:"Default",get default(){return r(j)},cssVar:"--sf-container-default",mono:!0})}var v=d(c,2);{let j=y(()=>a.container_wide??"90rem");je(v,{section:s,fieldKey:"container_wide",label:"Wide",get default(){return r(j)},cssVar:"--sf-container-wide",mono:!0})}var h=d(i,6),f=l(h);{let j=y(()=>a.grid_min??"16rem");je(f,{section:s,fieldKey:"grid_min",label:"Default min",get default(){return r(j)},cssVar:"--sf-grid-min",mono:!0})}var p=d(f,2);{let j=y(()=>a.grid_min_xs??"10rem");je(p,{section:s,fieldKey:"grid_min_xs",label:"XS min",get default(){return r(j)},cssVar:"--sf-grid-min-xs",mono:!0})}var m=d(p,2);{let j=y(()=>a.grid_min_s??"13rem");je(m,{section:s,fieldKey:"grid_min_s",label:"S min",get default(){return r(j)},cssVar:"--sf-grid-min-s",mono:!0})}var b=d(m,2);{let j=y(()=>a.grid_min_l??"20rem");je(b,{section:s,fieldKey:"grid_min_l",label:"L min",get default(){return r(j)},cssVar:"--sf-grid-min-l",mono:!0})}var x=d(b,2);{let j=y(()=>a.grid_min_xl??"24rem");je(x,{section:s,fieldKey:"grid_min_xl",label:"XL min",get default(){return r(j)},cssVar:"--sf-grid-min-xl",mono:!0})}var _=d(x,2);{let j=y(()=>a.grid_min_2xl??"28rem");je(_,{section:s,fieldKey:"grid_min_2xl",label:"2XL min",get default(){return r(j)},cssVar:"--sf-grid-min-2xl",mono:!0})}var w=d(h,6),S=l(w);{let j=y(()=>a.switcher_threshold??"30rem");je(S,{section:s,fieldKey:"switcher_threshold",label:"Threshold",get default(){return r(j)},cssVar:"--sf-switcher-threshold",mono:!0})}var E=d(w,6),F=l(E);{let j=y(()=>a.bento_cols??"3");je(F,{section:s,fieldKey:"bento_cols",label:"Columns",get default(){return r(j)},cssVar:"--sf-bento-cols-default",mono:!0})}var Y=d(F,2);{let j=y(()=>a.bento_row_default??"10rem");je(Y,{section:s,fieldKey:"bento_row_default",label:"Row (default)",get default(){return r(j)},cssVar:"--sf-bento-row-default",mono:!0})}var T=d(Y,2);{let j=y(()=>a.bento_row_compact??"6rem");je(T,{section:s,fieldKey:"bento_row_compact",label:"Row (compact)",get default(){return r(j)},cssVar:"--sf-bento-row-compact",mono:!0})}var z=d(T,2);{let j=y(()=>a.bento_row_tall??"16rem");je(z,{section:s,fieldKey:"bento_row_tall",label:"Row (tall)",get default(){return r(j)},cssVar:"--sf-bento-row-tall",mono:!0})}var D=d(E,6),O=l(D),K=d(l(O),2),q=l(K);{let j=y(()=>a.header_height_mobile||"3.5");Ge(q,{section:s,fieldKey:"header_height_mobile",label:"Mobile (rem)",min:0,step:.25,get default(){return r(j)},cssVar:"--sf-header-height-mobile",width:"100px"})}var B=d(q,2);{let j=y(()=>a.header_height_desktop||"5");Ge(B,{section:s,fieldKey:"header_height_desktop",label:"Desktop (rem)",min:0,step:.25,get default(){return r(j)},cssVar:"--sf-header-height-desktop",width:"100px"})}var $=d(O,2),k=d(l($),2),P=l(k);{let j=y(()=>a.sticky_offset_mobile||"3.5");Ge(P,{section:s,fieldKey:"sticky_offset_mobile",label:"Mobile (rem)",min:0,step:.25,get default(){return r(j)},cssVar:"--sf-sticky-offset-mobile",width:"100px"})}var G=d(P,2);{let j=y(()=>a.sticky_offset_desktop||"5");Ge(G,{section:s,fieldKey:"sticky_offset_desktop",label:"Desktop (rem)",min:0,step:.25,get default(){return r(j)},cssVar:"--sf-sticky-offset-desktop",width:"100px"})}var Z=d(D,2);ra(Z,{children:(j,N)=>{var L=Wc(),H=d(ot(L),4),se=l(H);{let W=y(()=>a.content_width??"var(--sf-container-default)");je(se,{section:s,fieldKey:"content_width",label:"Content width",get default(){return r(W)},cssVar:"--sf-content-width",mono:!0})}var ie=d(se,2);{let W=y(()=>a.breakout_width??"var(--sf-container-wide)");je(ie,{section:s,fieldKey:"breakout_width",label:"Breakout width",get default(){return r(W)},cssVar:"--sf-breakout-width",mono:!0})}var ae=d(H,4),oe=l(ae);{let W=y(()=>a.sidebar_width??"18rem");je(oe,{section:s,fieldKey:"sidebar_width",label:"Sidebar width",get default(){return r(W)},cssVar:"--sf-sidebar-width",mono:!0})}var U=d(oe,2);{let W=y(()=>a.sidebar_min_width??"50%");je(U,{section:s,fieldKey:"sidebar_min_width",label:"Content col minimum",get default(){return r(W)},cssVar:"--sf-sidebar-min-width",mono:!0})}var le=d(ae,4),be=l(le);{let W=y(()=>a.cover_min_height??"100dvh");je(be,{section:s,fieldKey:"cover_min_height",label:"Min height",get default(){return r(W)},cssVar:"--sf-cover-min-height",mono:!0})}var xe=d(be,2);{let W=y(()=>a.cover_padding??"var(--sf-section-pad)");je(xe,{section:s,fieldKey:"cover_padding",label:"Padding",get default(){return r(W)},cssVar:"--sf-cover-padding",mono:!0})}var Te=d(le,4),Pe=l(Te);{let W=y(()=>a.frame_ratio??"16 / 9");je(Pe,{section:s,fieldKey:"frame_ratio",label:"Aspect ratio",get default(){return r(W)},cssVar:"--sf-frame-ratio",mono:!0})}var Re=d(Te,4),M=l(Re);{let W=y(()=>a.reel_item_width??"max-content");je(M,{section:s,fieldKey:"reel_item_width",label:"Item width",get default(){return r(W)},cssVar:"--sf-reel-item-width",mono:!0})}var X=d(M,2);{let W=y(()=>a.reel_height??"auto");je(X,{section:s,fieldKey:"reel_height",label:"Height",get default(){return r(W)},cssVar:"--sf-reel-height",mono:!0})}var ee=d(Re,4),ke=l(ee);{let W=y(()=>a.imposter_margin??"var(--sf-space-m)");je(ke,{section:s,fieldKey:"imposter_margin",label:"Margin",get default(){return r(W)},cssVar:"--sf-imposter-margin",mono:!0})}var ue=d(ee,4),I=l(ue);{let W=y(()=>a.equal_cols??"2");je(I,{section:s,fieldKey:"equal_cols",label:"Column count",get default(){return r(W)},cssVar:"--sf-equal-cols",mono:!0})}A(j,L)},$$slots:{default:!0}}),A(e,n),Fe()}var Zc=C(' '),Jc=C(' '),Qc=C(' '),ed=C(' '),td=C(`Live preview
Typography
The quick brown fox jumps over the lazy dog
Body text uses --sf-color-text--secondary over the page
background. Headings, body, secondary and muted text each pull from
their own token so the hierarchy stays readable in both modes.
Muted caption · an inline link · auto-contrasting.
Surfaces
Brand & status
Buttons
Feedback
Card component
S Card Component
Design token preview
Active Radius, shadow, colours, surfaces, and typography working together —
- every value updates live as you adjust tokens.
Form field
Generated CSS: `);function sd(e,t){ze(t,!0);const s=["primary","secondary","tertiary","action","neutral","base"],a=["success","warning","error","info","danger"],n=ie.defaults?.colors??{},i=I=>`oklch(from var(${I}) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)`,o=I=>`oklch(from var(${I}) clamp(0.16, calc(1.18 - l), 0.24) calc(c * 0.5) h)`,u=I=>{const W=`--sf-color-${I}-light`;return I==="base"?o(W):i(W)};let c=fe(!1);const v=y(()=>{const I=[],W=Q.colors??{},_e=Q.typography??{},Ae=Q.radius??{},Oe=Q.shadows??{},qe=Q.contrast??{},Ne=r(c)?"dark":"light",Bt=(()=>{const Se=qe.contrast_threshold,mt=parseFloat(Se!==void 0&&Se!==""?Se:ie.defaults?.contrast?.contrast_threshold??.6);return Number.isFinite(mt)?mt:.6})(),At=(()=>{const Se=qe.contrast_bias,mt=parseFloat(Se!==void 0&&Se!==""?Se:ie.defaults?.contrast?.contrast_bias??0);return Number.isFinite(mt)?mt:0})();for(const Se of s){const mt=W[`brand_${Se}`]??n.brand_hex_hints?.[Se];mt&&I.push(`--sf-color-${Se}-light:${mt}`);const qa=W.dark_overrides_enabled!=="0"?W[`brand_dark_${Se}`]:"";I.push(`--sf-color-${Se}-dark:${qa||u(Se)}`)}for(const Se of a){const mt=W[`status_${Se}`]??n.status_hex_hints?.[Se];mt&&I.push(`--sf-color-${Se}-light:${mt}`);const qa=W.dark_overrides_enabled!=="0"?W[`status_dark_${Se}`]:"";I.push(`--sf-color-${Se}-dark:${qa||u(Se)}`)}const Ms=Se=>`oklch(from ${Se} clamp(0.1, sign(${Bt} - l) * 999, 0.95) 0 0)`;for(const Se of[...s,...a])I.push(`--c-${Se}:var(--sf-color-${Se}-${Ne})`),I.push(`--on-${Se}:${Ms(`var(--c-${Se})`)}`);I.push("--c-surface:var(--c-base)"),I.push("--c-bg:oklch(from var(--c-base) calc(l + 0.02) c h)"),I.push("--c-raised:oklch(from var(--c-base) calc(l + 0.04) c h)"),I.push("--c-inset:oklch(from var(--c-base) calc(l - 0.02) c h)");const lt=Ne==="dark"?"var(--c-neutral)":"var(--sf-color-neutral-light)";Ne==="dark"?(I.push(`--c-text:oklch(from ${lt} clamp(0.70, calc(l + 0.25 + ${At}), 1) c h)`),I.push(`--c-text-secondary:oklch(from ${lt} clamp(0.55, calc(l + 0.1 + ${At}), 0.90) c h)`),I.push(`--c-border:oklch(from ${lt} clamp(0.25, calc(l - 0.3), 0.55) 0.005 h)`),I.push(`--c-border-subtle:oklch(from ${lt} clamp(0.20, calc(l - 0.38), 0.45) 0.005 h)`),I.push("--c-link:oklch(from var(--c-action) clamp(0.68, l, 1) c h)")):(I.push(`--c-text:oklch(from ${lt} clamp(0.05, calc(l - 0.4 - ${At}), 0.35) c h)`),I.push(`--c-text-secondary:oklch(from ${lt} clamp(0.15, calc(l - 0.25 - ${At}), 0.45) c h)`),I.push(`--c-border:oklch(from ${lt} clamp(0.70, calc(l + 0.35), 0.95) 0.005 h)`),I.push(`--c-border-subtle:oklch(from ${lt} clamp(0.75, calc(l + 0.4), 0.97) 0.005 h)`),I.push("--c-link:oklch(from var(--c-action) clamp(0, min(l - 0.07, 0.48), 1) c h)")),I.push("--c-text-muted:var(--c-neutral)");for(const Se of a)I.push(`--tint-${Se}:oklch(from var(--c-${Se}) l c h / 0.14)`);_e.font_body&&I.push(`--sf-font-body:${_e.font_body}`),_e.font_heading&&I.push(`--sf-font-heading:${_e.font_heading}`);const Ze=parseFloat(Ae.radius_scale??ie.defaults?.radius?.radius_scale??1)||1;I.push(`--preview-radius-s:${Math.round(4*Ze)}px`),I.push(`--preview-radius-m:${Math.round(8*Ze)}px`),I.push(`--preview-radius-l:${Math.round(16*Ze)}px`);const Ct=Oe.shadow_strength,gs=parseFloat(Ct!==void 0&&Ct!==""?Ct:ie.defaults?.shadows?.shadow_strength??.08);return I.push(`--preview-shadow:0 2px 8px 0 rgba(0,0,0,${(gs*2).toFixed(3)}),0 1px 3px 0 rgba(0,0,0,${gs.toFixed(3)})`),I.join(";")}),h=[{var:"--c-inset",label:"Inset"},{var:"--c-bg",label:"Background"},{var:"--c-surface",label:"Surface"},{var:"--c-raised",label:"Raised"}],f=y(()=>mr(Q));var p=td();let m;var b=l(p),x=d(l(b),2),_=l(x);let w;var S=d(_,2);let A;var F=d(b,2),Y=l(F),T=d(l(Y),6),z=d(l(T)),D=d(Y,2),O=d(l(D),2);de(O,21,()=>h,I=>I.var,(I,W)=>{var _e=Zc();let Ae;var Oe=l(_e),qe=l(Oe);V(()=>{Ae=pe(_e,"",Ae,{background:`var(${r(W).var})`}),R(qe,r(W).label)}),E(I,_e)});var K=d(D,2),q=d(l(K),2),B=l(q);de(B,16,()=>s,I=>I,(I,W)=>{var _e=Jc();let Ae;var Oe=l(_e);V(()=>{te(_e,"title",W),Ae=pe(_e,"",Ae,{background:`var(--c-${W})`,color:`var(--on-${W})`}),R(Oe,W)}),E(I,_e)});var $=d(B,2);de($,16,()=>a,I=>I,(I,W)=>{var _e=Qc();let Ae;var Oe=l(_e);V(()=>{te(_e,"title",W),Ae=pe(_e,"",Ae,{background:`var(--c-${W})`,color:`var(--on-${W})`}),R(Oe,W)}),E(I,_e)});var k=d(K,2),P=d(l(k),2),G=l(P);pe(G,"",{},{background:"var(--c-primary)",color:"var(--on-primary)"});var Z=d(G,2);pe(Z,"",{},{background:"var(--c-secondary)",color:"var(--on-secondary)"});var j=d(Z,2);pe(j,"",{},{background:"var(--c-action)",color:"var(--on-action)"});var N=d(j,2);pe(N,"",{},{"border-color":"var(--c-primary)",color:"var(--c-primary)"});var L=d(N,2);pe(L,"",{},{color:"var(--c-text-secondary)"});var H=d(L,2);pe(H,"",{},{background:"var(--c-neutral)",color:"var(--on-neutral)",opacity:"0.55"});var se=d(k,2),ne=d(l(se),2);de(ne,20,()=>a,I=>I,(I,W)=>{var _e=ed();let Ae;var Oe=l(_e);let qe;var Ne=l(Oe),Bt=d(Oe,2),At=l(Bt);V(()=>{Ae=pe(_e,"",Ae,{background:`var(--tint-${W})`,"border-inline-start-color":`var(--c-${W})`}),qe=pe(Oe,"",qe,{background:`var(--c-${W})`,color:`var(--on-${W})`}),R(Ne,W),R(At,`${W??""} message — readable on its tint.`)}),E(I,_e)});var ae=d(se,2),oe=d(l(ae),2),U=l(oe);pe(U,"",{},{background:"var(--c-primary)"});var le=d(U,2),be=l(le),xe=l(be);pe(xe,"",{},{background:"var(--c-secondary)",color:"var(--on-secondary)"});var Te=d(xe,4);pe(Te,"",{},{background:"var(--c-success)",color:"var(--on-success)"});var Pe=d(be,4),Re=l(Pe);pe(Re,"",{},{background:"var(--c-info)",color:"var(--on-info)"});var M=d(Re,2);pe(M,"",{},{background:"var(--c-warning)",color:"var(--on-warning)"});var X=d(M,2);pe(X,"",{},{background:"var(--c-action)",color:"var(--on-action)"});var ee=d(F,2),ke=d(l(ee)),ue=l(ke);V(()=>{m=Ie(p,1,"slashed-preview svelte-g79qke",null,m,{"is-dark":r(c)}),pe(p,r(v)),w=Ie(_,1,"slashed-preview__mode-btn svelte-g79qke",null,w,{active:!r(c)}),A=Ie(S,1,"slashed-preview__mode-btn svelte-g79qke",null,A,{active:r(c)}),R(ue,r(f)||"/* (defaults — no overrides set) */")}),ge("click",_,()=>J(c,!1)),ge("click",S,()=>J(c,!0)),ge("click",z,I=>I.preventDefault()),E(e,p),Fe()}He(["click"]);var ad=C(''),rd=C(''),nd=C(''),id=C(''),od=C(''),ld=C(' ');function cd(e,t){ze(t,!0);const s=["contrast","radius","shadows","motion","zindex"];async function a(){if(!re.saving){re.saving=!0,re.error="";try{if(re.activeTab==="misc"){const T=await Promise.allSettled(s.map(D=>qr(D,Q[D]??{}))),z=[];if(T.forEach((D,O)=>{D.status==="fulfilled"?D.value?.values&&(Q[s[O]]=D.value.values):z.push(s[O])}),z.length>0)throw new Error(`Failed to save: ${z.join(", ")}`)}else{const T=re.activeTab,z=Q[T]??{},D=await qr(T,z);D&&D.values&&(Q[T]=D.values)}re.dirty=!1,re.lastSavedAt=Date.now()}catch(T){re.error=T&&T.message||String(T)}finally{re.saving=!1}}}async function n(){if(!re.saving&&confirm(`Reset the ${ie.tabs[re.activeTab]??re.activeTab} tab to defaults?`)){re.saving=!0,re.error="";try{if(re.activeTab==="misc"){const T=await Promise.allSettled(s.map(D=>Mr(D))),z=[];if(T.forEach((D,O)=>{D.status==="fulfilled"?Rr(s[O]):z.push(s[O])}),z.length>0)throw new Error(`Failed to reset: ${z.join(", ")}`)}else await Mr(re.activeTab),Rr(re.activeTab);re.dirty=!1,re.lastSavedAt=Date.now()}catch(T){re.error=T&&T.message||String(T)}finally{re.saving=!1}}}let i=fe(!1);sa(()=>{if(re.lastSavedAt){J(i,!0);const T=setTimeout(()=>J(i,!1),2e3);return()=>clearTimeout(T)}});const o=y(()=>fc(Q));function u(){const T=mr(Q);if(!T)return;const z=new Blob([T],{type:"text/css"}),D=URL.createObjectURL(z),O=document.createElement("a");O.href=D,O.download="slashed-custom.css",document.body.appendChild(O),O.click(),document.body.removeChild(O),URL.revokeObjectURL(D)}var c=ld();let v;var h=l(c),f=l(h);{var p=T=>{var z=ad(),D=l(z);V(()=>R(D,re.error)),E(T,z)},m=T=>{var z=rd();E(T,z)},b=T=>{var z=nd();E(T,z)},x=T=>{var z=id();E(T,z)},_=T=>{var z=od();E(T,z)};me(f,T=>{re.error?T(p):re.saving?T(m,1):r(i)?T(b,2):re.dirty?T(x,3):T(_,-1)})}var w=d(h,2),S=l(w),A=d(S,2),F=d(A,2),Y=l(F);V(()=>{v=Ie(c,1,"bar svelte-1oj49qa",null,v,{dirty:re.dirty}),S.disabled=re.saving,A.disabled=!r(o),F.disabled=re.saving||!re.dirty,R(Y,re.saving?"Saving…":"Save changes")}),ge("click",S,n),ge("click",A,u),ge("click",F,a),E(e,c),Fe()}He(["click"]);var dd=C(' '),ud=C(' '),vd=C('SLASHED Design Tokens
Adjust framework tokens, inspect generated variables, and manage the bundled CSS in one place.
');function fd(e,t){ze(t,!0);const s=["cheatsheet","hooks","variables","classes","bundle","export","wcag"];let a=y(()=>s.includes(re.activeTab));sa(()=>{function k(P){re.dirty&&(P.preventDefault(),P.returnValue="")}return window.addEventListener("beforeunload",k),()=>window.removeEventListener("beforeunload",k)});var n=vd(),i=l(n),o=l(i),u=d(l(o),2),c=l(u);{var v=k=>{var P=dd(),G=l(P);V(()=>R(G,`Framework ${ie.versions.framework??""}`)),E(k,P)};me(c,k=>{ie.versions.framework&&k(v)})}var h=d(c,2);{var f=k=>{var P=ud(),G=l(P);V(()=>R(G,`Plugin v${ie.versions.plugin??""}`)),E(k,P)};me(h,k=>{ie.versions.plugin&&k(f)})}var p=d(i,2);jo(p,{});var m=d(p,2),b=l(m);{var x=k=>{Vo(k,{})},_=k=>{xl(k,{})},w=k=>{Tl(k,{})},S=k=>{Xc(k,{})},A=k=>{Vl(k,{})},F=k=>{Hl(k,{})},Y=k=>{Zl(k,{})},T=k=>{ac(k,{})},z=k=>{mc(k,{})},D=k=>{xc(k,{})},O=k=>{Mc(k,{})},K=k=>{Uc(k,{})};me(b,k=>{re.activeTab==="colors"?k(x):re.activeTab==="typography"?k(_,1):re.activeTab==="spacing"?k(w,2):re.activeTab==="layouts"?k(S,3):re.activeTab==="misc"?k(A,4):re.activeTab==="variables"?k(F,5):re.activeTab==="classes"?k(Y,6):re.activeTab==="bundle"?k(T,7):re.activeTab==="export"?k(z,8):re.activeTab==="hooks"?k(D,9):re.activeTab==="cheatsheet"?k(O,10):re.activeTab==="wcag"&&k(K,11)})}var q=d(m,2);sd(q,{});var B=d(q,2);{var $=k=>{cd(k,{})};me(B,k=>{r(a)||k($)})}E(e,n),Fe()}const Vr=document.getElementById("slashed-admin-app");Vr&&co(fd,{target:Vr});
+ every value updates live as you adjust tokens.
Form field
Generated CSS: `);function sd(e,t){ze(t,!0);const s=["primary","secondary","tertiary","action","neutral","base"],a=["success","warning","error","info","danger"],n=ne.defaults?.colors??{},i=I=>`oklch(from var(${I}) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)`,o=I=>`oklch(from var(${I}) clamp(0.16, calc(1.18 - l), 0.24) calc(c * 0.5) h)`,u=I=>{const W=`--sf-color-${I}-light`;return I==="base"?o(W):i(W)};let c=fe(!1);const v=y(()=>{const I=[],W=Q.colors??{},_e=Q.typography??{},Ae=Q.radius??{},Oe=Q.shadows??{},qe=Q.contrast??{},Ne=r(c)?"dark":"light",Bt=(()=>{const Se=qe.contrast_threshold,mt=parseFloat(Se!==void 0&&Se!==""?Se:ne.defaults?.contrast?.contrast_threshold??.6);return Number.isFinite(mt)?mt:.6})(),At=(()=>{const Se=qe.contrast_bias,mt=parseFloat(Se!==void 0&&Se!==""?Se:ne.defaults?.contrast?.contrast_bias??0);return Number.isFinite(mt)?mt:0})();for(const Se of s){const mt=W[`brand_${Se}`]??n.brand_hex_hints?.[Se];mt&&I.push(`--sf-color-${Se}-light:${mt}`);const qa=W.dark_overrides_enabled!=="0"?W[`brand_dark_${Se}`]:"";I.push(`--sf-color-${Se}-dark:${qa||u(Se)}`)}for(const Se of a){const mt=W[`status_${Se}`]??n.status_hex_hints?.[Se];mt&&I.push(`--sf-color-${Se}-light:${mt}`);const qa=W.dark_overrides_enabled!=="0"?W[`status_dark_${Se}`]:"";I.push(`--sf-color-${Se}-dark:${qa||u(Se)}`)}const Ms=Se=>`oklch(from ${Se} clamp(0.1, sign(${Bt} - l) * 999, 0.95) 0 0)`;for(const Se of[...s,...a])I.push(`--c-${Se}:var(--sf-color-${Se}-${Ne})`),I.push(`--on-${Se}:${Ms(`var(--c-${Se})`)}`);I.push("--c-surface:var(--c-base)"),I.push("--c-bg:oklch(from var(--c-base) calc(l + 0.02) c h)"),I.push("--c-raised:oklch(from var(--c-base) calc(l + 0.04) c h)"),I.push("--c-inset:oklch(from var(--c-base) calc(l - 0.02) c h)");const lt=Ne==="dark"?"var(--c-neutral)":"var(--sf-color-neutral-light)";Ne==="dark"?(I.push(`--c-text:oklch(from ${lt} clamp(0.70, calc(l + 0.25 + ${At}), 1) c h)`),I.push(`--c-text-secondary:oklch(from ${lt} clamp(0.55, calc(l + 0.1 + ${At}), 0.90) c h)`),I.push(`--c-border:oklch(from ${lt} clamp(0.25, calc(l - 0.3), 0.55) 0.005 h)`),I.push(`--c-border-subtle:oklch(from ${lt} clamp(0.20, calc(l - 0.38), 0.45) 0.005 h)`),I.push("--c-link:oklch(from var(--c-action) clamp(0.68, l, 1) c h)")):(I.push(`--c-text:oklch(from ${lt} clamp(0.05, calc(l - 0.4 - ${At}), 0.35) c h)`),I.push(`--c-text-secondary:oklch(from ${lt} clamp(0.15, calc(l - 0.25 - ${At}), 0.45) c h)`),I.push(`--c-border:oklch(from ${lt} clamp(0.70, calc(l + 0.35), 0.95) 0.005 h)`),I.push(`--c-border-subtle:oklch(from ${lt} clamp(0.75, calc(l + 0.4), 0.97) 0.005 h)`),I.push("--c-link:oklch(from var(--c-action) clamp(0, min(l - 0.07, 0.48), 1) c h)")),I.push("--c-text-muted:var(--c-neutral)");for(const Se of a)I.push(`--tint-${Se}:oklch(from var(--c-${Se}) l c h / 0.14)`);_e.font_body&&I.push(`--sf-font-body:${_e.font_body}`),_e.font_heading&&I.push(`--sf-font-heading:${_e.font_heading}`);const Ze=parseFloat(Ae.radius_scale??ne.defaults?.radius?.radius_scale??1)||1;I.push(`--preview-radius-s:${Math.round(4*Ze)}px`),I.push(`--preview-radius-m:${Math.round(8*Ze)}px`),I.push(`--preview-radius-l:${Math.round(16*Ze)}px`);const Ct=Oe.shadow_strength,gs=parseFloat(Ct!==void 0&&Ct!==""?Ct:ne.defaults?.shadows?.shadow_strength??.08);return I.push(`--preview-shadow:0 2px 8px 0 rgba(0,0,0,${(gs*2).toFixed(3)}),0 1px 3px 0 rgba(0,0,0,${gs.toFixed(3)})`),I.join(";")}),h=[{var:"--c-inset",label:"Inset"},{var:"--c-bg",label:"Background"},{var:"--c-surface",label:"Surface"},{var:"--c-raised",label:"Raised"}],f=y(()=>mr(Q));var p=td();let m;var b=l(p),x=d(l(b),2),_=l(x);let w;var S=d(_,2);let E;var F=d(b,2),Y=l(F),T=d(l(Y),6),z=d(l(T)),D=d(Y,2),O=d(l(D),2);de(O,21,()=>h,I=>I.var,(I,W)=>{var _e=Zc();let Ae;var Oe=l(_e),qe=l(Oe);V(()=>{Ae=pe(_e,"",Ae,{background:`var(${r(W).var})`}),R(qe,r(W).label)}),A(I,_e)});var K=d(D,2),q=d(l(K),2),B=l(q);de(B,16,()=>s,I=>I,(I,W)=>{var _e=Jc();let Ae;var Oe=l(_e);V(()=>{te(_e,"title",W),Ae=pe(_e,"",Ae,{background:`var(--c-${W})`,color:`var(--on-${W})`}),R(Oe,W)}),A(I,_e)});var $=d(B,2);de($,16,()=>a,I=>I,(I,W)=>{var _e=Qc();let Ae;var Oe=l(_e);V(()=>{te(_e,"title",W),Ae=pe(_e,"",Ae,{background:`var(--c-${W})`,color:`var(--on-${W})`}),R(Oe,W)}),A(I,_e)});var k=d(K,2),P=d(l(k),2),G=l(P);pe(G,"",{},{background:"var(--c-primary)",color:"var(--on-primary)"});var Z=d(G,2);pe(Z,"",{},{background:"var(--c-secondary)",color:"var(--on-secondary)"});var j=d(Z,2);pe(j,"",{},{background:"var(--c-action)",color:"var(--on-action)"});var N=d(j,2);pe(N,"",{},{"border-color":"var(--c-primary)",color:"var(--c-primary)"});var L=d(N,2);pe(L,"",{},{color:"var(--c-text-secondary)"});var H=d(L,2);pe(H,"",{},{background:"var(--c-neutral)",color:"var(--on-neutral)",opacity:"0.55"});var se=d(k,2),ie=d(l(se),2);de(ie,20,()=>a,I=>I,(I,W)=>{var _e=ed();let Ae;var Oe=l(_e);let qe;var Ne=l(Oe),Bt=d(Oe,2),At=l(Bt);V(()=>{Ae=pe(_e,"",Ae,{background:`var(--tint-${W})`,"border-inline-start-color":`var(--c-${W})`}),qe=pe(Oe,"",qe,{background:`var(--c-${W})`,color:`var(--on-${W})`}),R(Ne,W),R(At,`${W??""} message — readable on its tint.`)}),A(I,_e)});var ae=d(se,2),oe=d(l(ae),2),U=l(oe);pe(U,"",{},{background:"var(--c-primary)"});var le=d(U,2),be=l(le),xe=l(be);pe(xe,"",{},{background:"var(--c-secondary)",color:"var(--on-secondary)"});var Te=d(xe,4);pe(Te,"",{},{background:"var(--c-success)",color:"var(--on-success)"});var Pe=d(be,4),Re=l(Pe);pe(Re,"",{},{background:"var(--c-info)",color:"var(--on-info)"});var M=d(Re,2);pe(M,"",{},{background:"var(--c-warning)",color:"var(--on-warning)"});var X=d(M,2);pe(X,"",{},{background:"var(--c-action)",color:"var(--on-action)"});var ee=d(F,2),ke=d(l(ee)),ue=l(ke);V(()=>{m=Ie(p,1,"slashed-preview svelte-g79qke",null,m,{"is-dark":r(c)}),pe(p,r(v)),w=Ie(_,1,"slashed-preview__mode-btn svelte-g79qke",null,w,{active:!r(c)}),E=Ie(S,1,"slashed-preview__mode-btn svelte-g79qke",null,E,{active:r(c)}),R(ue,r(f)||"/* (defaults — no overrides set) */")}),ge("click",_,()=>J(c,!1)),ge("click",S,()=>J(c,!0)),ge("click",z,I=>I.preventDefault()),A(e,p),Fe()}He(["click"]);var ad=C(''),rd=C(''),nd=C(''),id=C(''),od=C(''),ld=C(' ');function cd(e,t){ze(t,!0);const s=["contrast","radius","shadows","motion","zindex"];async function a(){if(!re.saving){re.saving=!0,re.error="";try{if(re.activeTab==="misc"){const T=await Promise.allSettled(s.map(D=>qr(D,Q[D]??{}))),z=[];if(T.forEach((D,O)=>{D.status==="fulfilled"?D.value?.values&&(Q[s[O]]=D.value.values):z.push(s[O])}),z.length>0)throw new Error(`Failed to save: ${z.join(", ")}`)}else{const T=re.activeTab,z=Q[T]??{},D=await qr(T,z);D&&D.values&&(Q[T]=D.values)}re.dirty=!1,re.lastSavedAt=Date.now()}catch(T){re.error=T&&T.message||String(T)}finally{re.saving=!1}}}async function n(){if(!re.saving&&confirm(`Reset the ${ne.tabs[re.activeTab]??re.activeTab} tab to defaults?`)){re.saving=!0,re.error="";try{if(re.activeTab==="misc"){const T=await Promise.allSettled(s.map(D=>Mr(D))),z=[];if(T.forEach((D,O)=>{D.status==="fulfilled"?Rr(s[O]):z.push(s[O])}),z.length>0)throw new Error(`Failed to reset: ${z.join(", ")}`)}else await Mr(re.activeTab),Rr(re.activeTab);re.dirty=!1,re.lastSavedAt=Date.now()}catch(T){re.error=T&&T.message||String(T)}finally{re.saving=!1}}}let i=fe(!1);sa(()=>{if(re.lastSavedAt){J(i,!0);const T=setTimeout(()=>J(i,!1),2e3);return()=>clearTimeout(T)}});const o=y(()=>fc(Q));function u(){const T=mr(Q);if(!T)return;const z=new Blob([T],{type:"text/css"}),D=URL.createObjectURL(z),O=document.createElement("a");O.href=D,O.download="slashed-custom.css",document.body.appendChild(O),O.click(),document.body.removeChild(O),URL.revokeObjectURL(D)}var c=ld();let v;var h=l(c),f=l(h);{var p=T=>{var z=ad(),D=l(z);V(()=>R(D,re.error)),A(T,z)},m=T=>{var z=rd();A(T,z)},b=T=>{var z=nd();A(T,z)},x=T=>{var z=id();A(T,z)},_=T=>{var z=od();A(T,z)};me(f,T=>{re.error?T(p):re.saving?T(m,1):r(i)?T(b,2):re.dirty?T(x,3):T(_,-1)})}var w=d(h,2),S=l(w),E=d(S,2),F=d(E,2),Y=l(F);V(()=>{v=Ie(c,1,"bar svelte-1oj49qa",null,v,{dirty:re.dirty}),S.disabled=re.saving,E.disabled=!r(o),F.disabled=re.saving||!re.dirty,R(Y,re.saving?"Saving…":"Save changes")}),ge("click",S,n),ge("click",E,u),ge("click",F,a),A(e,c),Fe()}He(["click"]);var dd=C(' '),ud=C(' '),vd=C('SLASHED Design Tokens
Adjust framework tokens, inspect generated variables, and manage the bundled CSS in one place.
');function fd(e,t){ze(t,!0);const s=["cheatsheet","hooks","variables","classes","bundle","export","wcag"];let a=y(()=>s.includes(re.activeTab));sa(()=>{function k(P){re.dirty&&(P.preventDefault(),P.returnValue="")}return window.addEventListener("beforeunload",k),()=>window.removeEventListener("beforeunload",k)});var n=vd(),i=l(n),o=l(i),u=d(l(o),2),c=l(u);{var v=k=>{var P=dd(),G=l(P);V(()=>R(G,`Framework ${ne.versions.framework??""}`)),A(k,P)};me(c,k=>{ne.versions.framework&&k(v)})}var h=d(c,2);{var f=k=>{var P=ud(),G=l(P);V(()=>R(G,`Plugin v${ne.versions.plugin??""}`)),A(k,P)};me(h,k=>{ne.versions.plugin&&k(f)})}var p=d(i,2);jo(p,{});var m=d(p,2),b=l(m);{var x=k=>{Vo(k,{})},_=k=>{xl(k,{})},w=k=>{Tl(k,{})},S=k=>{Xc(k,{})},E=k=>{Vl(k,{})},F=k=>{Hl(k,{})},Y=k=>{Zl(k,{})},T=k=>{ac(k,{})},z=k=>{mc(k,{})},D=k=>{xc(k,{})},O=k=>{Mc(k,{})},K=k=>{Uc(k,{})};me(b,k=>{re.activeTab==="colors"?k(x):re.activeTab==="typography"?k(_,1):re.activeTab==="spacing"?k(w,2):re.activeTab==="layouts"?k(S,3):re.activeTab==="misc"?k(E,4):re.activeTab==="variables"?k(F,5):re.activeTab==="classes"?k(Y,6):re.activeTab==="bundle"?k(T,7):re.activeTab==="export"?k(z,8):re.activeTab==="hooks"?k(D,9):re.activeTab==="cheatsheet"?k(O,10):re.activeTab==="wcag"&&k(K,11)})}var q=d(m,2);sd(q,{});var B=d(q,2);{var $=k=>{cd(k,{})};me(B,k=>{r(a)||k($)})}A(e,n),Fe()}const Vr=document.getElementById("slashed-admin-app");Vr&&co(fd,{target:Vr});
//# sourceMappingURL=app.js.map