From 96d0282979f62f755f4d67f34462d4d0bdd8fd1e Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 8 Jul 2026 21:59:55 +0000 Subject: [PATCH 1/4] fix(update-framework): resolve "latest" from GitHub API, fall back to jsDelivr MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit resolveLatestTag() trusted jsDelivr's metadata CDN as the sole source of truth for the newest framework release. That CDN is eventually-consistent: a freshly published release can take minutes to appear, so a plugin release cut immediately after a framework release could silently vendor the previous version (the button-component changes in v0.7.7 shipped against v0.7.6 this way). Query GitHub's Releases API (/releases/latest — authoritative, updates on publish, excludes drafts/prereleases) as the primary source, keep jsDelivr as a fallback, and take whichever reports the newer version so we never regress to an older release when one source lags. Authenticates with GITHUB_TOKEN/ GH_TOKEN when present. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01QZN7sLeiRUkfK7nU6L8DNi --- scripts/update-framework.js | 80 +++++++++++++++++++++++++++++++++---- 1 file changed, 73 insertions(+), 7 deletions(-) diff --git a/scripts/update-framework.js b/scripts/update-framework.js index c1331a99..367a3b43 100644 --- a/scripts/update-framework.js +++ b/scripts/update-framework.js @@ -36,6 +36,7 @@ const FRAMEWORK_DIR = path.join(ROOT, '.framework'); const DEST_DIR = path.join(ROOT, 'SLASHED-for-WP', 'dist'); const REPO_URL = 'https://github.com/codeslash-dev/SLASHED.git'; const META_URL = 'https://data.jsdelivr.com/v1/packages/gh/codeslash-dev/SLASHED'; +const GH_API_BASE = 'https://api.github.com/repos/codeslash-dev/SLASHED'; const RELEASE_BASE = 'https://github.com/codeslash-dev/SLASHED/releases/download'; const BUNDLES = ['optimal', 'optimal-components', 'optimal-utilities', 'full']; @@ -50,11 +51,11 @@ const CSS_REF_TARGETS = [ function log(msg) { console.log(`[update-framework] ${msg}`); } const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); -async function fetchWithRetry(url, attempts = 5) { +async function fetchWithRetry(url, attempts = 5, extraHeaders = {}) { let last; for (let i = 1; i <= attempts; i++) { try { - const res = await fetch(url, { headers: { 'user-agent': 'slashed-for-wp update-framework' }, redirect: 'follow' }); + const res = await fetch(url, { headers: { 'user-agent': 'slashed-for-wp update-framework', ...extraHeaders }, redirect: 'follow' }); if (res.ok || ![429, 500, 502, 503, 504].includes(res.status)) return res; last = new Error(`HTTP ${res.status}`); } catch (err) { @@ -77,16 +78,81 @@ function parseVersionArg() { const normalizeTag = (v) => `v${String(v).replace(/^v/, '')}`; -async function resolveLatestTag() { +const STABLE_RE = /^\d+\.\d+\.\d+$/; +const bareVer = (v) => String(v || '').replace(/^v/, ''); + +// Compare two `X.Y.Z` strings numerically. Returns >0 if a is newer than b. +function cmpSemver(a, b) { + const pa = bareVer(a).split('.').map(Number); + const pb = bareVer(b).split('.').map(Number); + for (let i = 0; i < 3; i++) { + if (pa[i] !== pb[i]) return pa[i] - pb[i]; + } + return 0; +} + +// jsDelivr's metadata CDN. Fast, but eventually-consistent — a freshly +// published release can take minutes to appear here, so it must never be the +// sole source of truth for "latest" (that lag is exactly what shipped the +// plugin against a stale framework release once). +async function latestFromJsdelivr() { const res = await fetchWithRetry(META_URL); - if (!res.ok) throw new Error(`metadata request failed: HTTP ${res.status}`); + if (!res.ok) throw new Error(`jsDelivr metadata request failed: HTTP ${res.status}`); const body = await res.json(); const versions = Array.isArray(body.versions) ? body.versions : []; for (const entry of versions) { - const ver = String((typeof entry === 'string' ? entry : entry?.version) || '').replace(/^v/, ''); - if (/^\d+\.\d+\.\d+$/.test(ver)) return `v${ver}`; // newest-first; first stable wins + const ver = bareVer(typeof entry === 'string' ? entry : entry?.version); + if (STABLE_RE.test(ver)) return `v${ver}`; // newest-first; first stable wins + } + return null; +} + +// GitHub's Releases API is the authoritative source: `/releases/latest` +// reflects a publish the instant it happens and excludes drafts/prereleases. +// Authenticates with GITHUB_TOKEN/GH_TOKEN when present (raises the rate limit +// and is always available in CI). +async function latestFromGithub() { + const token = process.env.GITHUB_TOKEN || process.env.GH_TOKEN; + const headers = { + accept: 'application/vnd.github+json', + 'x-github-api-version': '2022-11-28', + ...(token ? { authorization: `Bearer ${token}` } : {}), + }; + const res = await fetchWithRetry(`${GH_API_BASE}/releases/latest`, 5, headers); + if (!res.ok) throw new Error(`GitHub releases request failed: HTTP ${res.status}`); + const body = await res.json(); + const ver = bareVer(body?.tag_name); + if (STABLE_RE.test(ver)) return `v${ver}`; + throw new Error(`GitHub latest release tag "${body?.tag_name}" is not a stable X.Y.Z version`); +} + +// Resolve "latest" from GitHub (source of truth) with jsDelivr as a fallback, +// then take whichever is newer. GitHub is authoritative and updates instantly, +// so it normally wins; the max() guard guarantees we never regress to an older +// release if one source lags or is briefly unavailable. +async function resolveLatestTag() { + const results = await Promise.allSettled([latestFromGithub(), latestFromJsdelivr()]); + const [gh, jsd] = results; + + if (gh.status === 'rejected' && jsd.status === 'rejected') { + throw new Error( + `could not resolve latest framework tag — GitHub: ${gh.reason.message}; jsDelivr: ${jsd.reason.message}`, + ); + } + if (gh.status === 'rejected') { + log(`GitHub releases lookup failed (${gh.reason.message}); falling back to jsDelivr`); + } + + const candidates = [gh, jsd] + .filter((r) => r.status === 'fulfilled' && r.value) + .map((r) => r.value); + if (candidates.length === 0) throw new Error('no stable release tag found for the framework'); + + const newest = candidates.reduce((a, b) => (cmpSemver(b, a) > 0 ? b : a)); + if (candidates.length === 2 && cmpSemver(candidates[0], candidates[1]) !== 0) { + log(`GitHub=${gh.value} jsDelivr=${jsd.value} disagree (CDN lag) — using newer ${newest}`); } - throw new Error('no stable release tag found in framework metadata'); + return newest; } async function downloadReleaseBundles(tag) { From 8041dcbebe0fd95cfed690d173718dfa54043bab Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 8 Jul 2026 22:03:12 +0000 Subject: [PATCH 2/4] chore: sync bundled framework to v0.7.7 (button component rework) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Vendor the framework configurator + bundled CSS from v0.7.7, which the 0.5.4 plugin release missed: the release ran update-framework right after the framework 0.7.7 release, and "latest" (resolved via the lagging jsDelivr CDN) still pointed at v0.7.6, so the .sf-btn rework, ghost→tint token rename, and gradient buttons never reached the plugin. - SLASHED_*_CSS_REF: v0.7.6 → v0.7.7 - re-vendored admin-app configurator core (ComponentsPanel button UI) - regenerated inventory/class-hints/variables-hints - rebuilt admin-app SPA (assets/admin-app/app.{js,css}) so the shipped configurator carries the new button variants Plugin release version stays 0.5.4 (no version bump). Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01QZN7sLeiRUkfK7nU6L8DNi --- .../admin-app/.vendored-manifest.json | 108 ++-- .../admin-app/framework-css/core/tokens.css | 32 +- .../framework-css/dist/slashed.full.css | 293 ++++++--- .../framework-css/optional/components.css | 256 ++++++-- .../optional/tokens.components.css | 1 + .../components/panels/ComponentsPanel.svelte | 34 +- .../src/components/shell/PreviewPanel.svelte | 7 +- .../src/data/api-index.generated.json | 572 +++++++++++------- .../admin-app/src/data/classes.generated.json | 52 +- .../src/data/token-registry.generated.json | 68 ++- SLASHED-for-WP/admin-app/src/lib/codec.ts | 9 +- SLASHED-for-WP/assets/admin-app/app.css | 2 +- SLASHED-for-WP/assets/admin-app/app.js | 328 +++++++--- SLASHED-for-WP/data/inventory.json | 28 +- SLASHED-for-WP/data/variables-hints.json | 78 ++- SLASHED-for-WP/dist/slashed.full.css | 293 ++++++--- .../dist/slashed.optimal-components.css | 293 ++++++--- .../dist/slashed.optimal-utilities.css | 34 +- SLASHED-for-WP/dist/slashed.optimal.css | 34 +- .../integrations/bricks/data/inventory.json | 28 +- .../integrations/bricks/slashed-bricks.php | 2 +- .../gutenberg/slashed-gutenberg.php | 2 +- SLASHED-for-WP/slashed.php | 2 +- 23 files changed, 1796 insertions(+), 760 deletions(-) diff --git a/SLASHED-for-WP/admin-app/.vendored-manifest.json b/SLASHED-for-WP/admin-app/.vendored-manifest.json index d89b4ed9..5f737aa6 100644 --- a/SLASHED-for-WP/admin-app/.vendored-manifest.json +++ b/SLASHED-for-WP/admin-app/.vendored-manifest.json @@ -3,217 +3,217 @@ "description": "Files vendored from the SLASHED framework configurator. DO NOT edit directly — make changes in codeslash-dev/SLASHED → configurator/src/ and re-run npm run sync.", "frameworkRepo": "https://github.com/codeslash-dev/SLASHED", "configuratorSrc": "configurator/src/", - "source": "github:codeslash-dev/slashed@v0.7.6", - "syncedAt": "2026-07-08T21:46:39.557Z" + "source": "local:SLASHED_CONFIGURATOR_SRC", + "syncedAt": "2026-07-08T22:02:34.782Z" }, "vendoredFiles": [ { "file": "src/app.css", - "source": "github:codeslash-dev/slashed/configurator/src/app.css@v0.7.6" + "source": "local:configurator/src/app.css" }, { "file": "src/App.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/App.svelte@v0.7.6" + "source": "local:configurator/src/App.svelte" }, { "file": "src/components/CommandPalette.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/CommandPalette.svelte@v0.7.6" + "source": "local:configurator/src/components/CommandPalette.svelte" }, { "file": "src/components/DomainPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/DomainPanel.svelte@v0.7.6" + "source": "local:configurator/src/components/DomainPanel.svelte" }, { "file": "src/components/inputs/ClampField.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/ClampField.svelte@v0.7.6" + "source": "local:configurator/src/components/inputs/ClampField.svelte" }, { "file": "src/components/inputs/ColorInput.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/ColorInput.svelte@v0.7.6" + "source": "local:configurator/src/components/inputs/ColorInput.svelte" }, { "file": "src/components/inputs/OklchColorDesk.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/OklchColorDesk.svelte@v0.7.6" + "source": "local:configurator/src/components/inputs/OklchColorDesk.svelte" }, { "file": "src/components/inputs/PowerKnobRow.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/PowerKnobRow.svelte@v0.7.6" + "source": "local:configurator/src/components/inputs/PowerKnobRow.svelte" }, { "file": "src/components/inputs/RangeWithNumber.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/RangeWithNumber.svelte@v0.7.6" + "source": "local:configurator/src/components/inputs/RangeWithNumber.svelte" }, { "file": "src/components/inputs/SliderRow.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/SliderRow.svelte@v0.7.6" + "source": "local:configurator/src/components/inputs/SliderRow.svelte" }, { "file": "src/components/inputs/TokenRow.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/TokenRow.svelte@v0.7.6" + "source": "local:configurator/src/components/inputs/TokenRow.svelte" }, { "file": "src/components/panels/AllTokensTab.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/AllTokensTab.svelte@v0.7.6" + "source": "local:configurator/src/components/panels/AllTokensTab.svelte" }, { "file": "src/components/panels/BordersPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/BordersPanel.svelte@v0.7.6" + "source": "local:configurator/src/components/panels/BordersPanel.svelte" }, { "file": "src/components/panels/CheatsheetPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/CheatsheetPanel.svelte@v0.7.6" + "source": "local:configurator/src/components/panels/CheatsheetPanel.svelte" }, { "file": "src/components/panels/ColorsPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/ColorsPanel.svelte@v0.7.6" + "source": "local:configurator/src/components/panels/ColorsPanel.svelte" }, { "file": "src/components/panels/ComponentsPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/ComponentsPanel.svelte@v0.7.6" + "source": "local:configurator/src/components/panels/ComponentsPanel.svelte" }, { "file": "src/components/panels/EffectsPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/EffectsPanel.svelte@v0.7.6" + "source": "local:configurator/src/components/panels/EffectsPanel.svelte" }, { "file": "src/components/panels/ExportPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/ExportPanel.svelte@v0.7.6" + "source": "local:configurator/src/components/panels/ExportPanel.svelte" }, { "file": "src/components/panels/GenericTokenPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/GenericTokenPanel.svelte@v0.7.6" + "source": "local:configurator/src/components/panels/GenericTokenPanel.svelte" }, { "file": "src/components/panels/HomePanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/HomePanel.svelte@v0.7.6" + "source": "local:configurator/src/components/panels/HomePanel.svelte" }, { "file": "src/components/panels/LayoutPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/LayoutPanel.svelte@v0.7.6" + "source": "local:configurator/src/components/panels/LayoutPanel.svelte" }, { "file": "src/components/panels/MacrosPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/MacrosPanel.svelte@v0.7.6" + "source": "local:configurator/src/components/panels/MacrosPanel.svelte" }, { "file": "src/components/panels/MiscPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/MiscPanel.svelte@v0.7.6" + "source": "local:configurator/src/components/panels/MiscPanel.svelte" }, { "file": "src/components/panels/MotionPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/MotionPanel.svelte@v0.7.6" + "source": "local:configurator/src/components/panels/MotionPanel.svelte" }, { "file": "src/components/panels/ShadowsPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/ShadowsPanel.svelte@v0.7.6" + "source": "local:configurator/src/components/panels/ShadowsPanel.svelte" }, { "file": "src/components/panels/SpacingPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/SpacingPanel.svelte@v0.7.6" + "source": "local:configurator/src/components/panels/SpacingPanel.svelte" }, { "file": "src/components/panels/ThemesPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/ThemesPanel.svelte@v0.7.6" + "source": "local:configurator/src/components/panels/ThemesPanel.svelte" }, { "file": "src/components/panels/TypographyPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/TypographyPanel.svelte@v0.7.6" + "source": "local:configurator/src/components/panels/TypographyPanel.svelte" }, { "file": "src/components/panels/WcagPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/WcagPanel.svelte@v0.7.6" + "source": "local:configurator/src/components/panels/WcagPanel.svelte" }, { "file": "src/components/shell/PreviewPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/shell/PreviewPanel.svelte@v0.7.6" + "source": "local:configurator/src/components/shell/PreviewPanel.svelte" }, { "file": "src/components/shell/SidebarNav.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/shell/SidebarNav.svelte@v0.7.6" + "source": "local:configurator/src/components/shell/SidebarNav.svelte" }, { "file": "src/components/shell/StatusBar.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/shell/StatusBar.svelte@v0.7.6" + "source": "local:configurator/src/components/shell/StatusBar.svelte" }, { "file": "src/components/shell/StudioHeader.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/shell/StudioHeader.svelte@v0.7.6" + "source": "local:configurator/src/components/shell/StudioHeader.svelte" }, { "file": "src/data/api-index.generated.json", - "source": "github:codeslash-dev/slashed/configurator/src/data/api-index.generated.json@v0.7.6" + "source": "local:configurator/src/data/api-index.generated.json" }, { "file": "src/data/bundles.generated.json", - "source": "github:codeslash-dev/slashed/configurator/src/data/bundles.generated.json@v0.7.6" + "source": "local:configurator/src/data/bundles.generated.json" }, { "file": "src/data/classes.generated.json", - "source": "github:codeslash-dev/slashed/configurator/src/data/classes.generated.json@v0.7.6" + "source": "local:configurator/src/data/classes.generated.json" }, { "file": "src/data/domain-patterns.json", - "source": "github:codeslash-dev/slashed/configurator/src/data/domain-patterns.json@v0.7.6" + "source": "local:configurator/src/data/domain-patterns.json" }, { "file": "src/data/token-registry.generated.json", - "source": "github:codeslash-dev/slashed/configurator/src/data/token-registry.generated.json@v0.7.6" + "source": "local:configurator/src/data/token-registry.generated.json" }, { "file": "src/lib/basics.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/basics.ts@v0.7.6" + "source": "local:configurator/src/lib/basics.ts" }, { "file": "src/lib/codec.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/codec.ts@v0.7.6" + "source": "local:configurator/src/lib/codec.ts" }, { "file": "src/lib/colorUtils.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/colorUtils.ts@v0.7.6" + "source": "local:configurator/src/lib/colorUtils.ts" }, { "file": "src/lib/domains.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/domains.ts@v0.7.6" + "source": "local:configurator/src/lib/domains.ts" }, { "file": "src/lib/lumlockerPreview.svelte.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/lumlockerPreview.svelte.ts@v0.7.6" + "source": "local:configurator/src/lib/lumlockerPreview.svelte.ts" }, { "file": "src/lib/persistence.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/persistence.ts@v0.7.6" + "source": "local:configurator/src/lib/persistence.ts" }, { "file": "src/lib/powerKnobs.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/powerKnobs.ts@v0.7.6" + "source": "local:configurator/src/lib/powerKnobs.ts" }, { "file": "src/lib/previewResolver.svelte.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/previewResolver.svelte.ts@v0.7.6" + "source": "local:configurator/src/lib/previewResolver.svelte.ts" }, { "file": "src/lib/savedThemes.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/savedThemes.ts@v0.7.6" + "source": "local:configurator/src/lib/savedThemes.ts" }, { "file": "src/lib/theme.svelte.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/theme.svelte.ts@v0.7.6" + "source": "local:configurator/src/lib/theme.svelte.ts" }, { "file": "src/lib/variableScales.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/variableScales.ts@v0.7.6" + "source": "local:configurator/src/lib/variableScales.ts" }, { "file": "src/main.ts", - "source": "github:codeslash-dev/slashed/configurator/src/main.ts@v0.7.6" + "source": "local:configurator/src/main.ts" }, { "file": "src/types.ts", - "source": "github:codeslash-dev/slashed/configurator/src/types.ts@v0.7.6" + "source": "local:configurator/src/types.ts" }, { "file": "src/vite-env.d.ts", - "source": "github:codeslash-dev/slashed/configurator/src/vite-env.d.ts@v0.7.6" + "source": "local:configurator/src/vite-env.d.ts" } ] } diff --git a/SLASHED-for-WP/admin-app/framework-css/core/tokens.css b/SLASHED-for-WP/admin-app/framework-css/core/tokens.css index bcea0a84..f3959931 100644 --- a/SLASHED-for-WP/admin-app/framework-css/core/tokens.css +++ b/SLASHED-for-WP/admin-app/framework-css/core/tokens.css @@ -586,27 +586,38 @@ --sf-color-mark-bg: oklch(from var(--sf-color-warning) l c h / 0.25); /* ---------------------------------------------------------- - Status triplets — subtle/muted (alpha variants) - bg/border use same formula both modes + Status triplets — subtle/muted/tint (alpha variants) + bg/border use same formula both modes. -tint is the 5% + near-transparent rung, mirroring the brand families' + --sf-color-{family}-tint aliases (full 10-family coverage). ---------------------------------------------------------- */ --sf-color-success-subtle: oklch(from var(--sf-color-success) l c h / 0.12); --sf-color-success-muted: oklch(from var(--sf-color-success) l c h / 0.3); + --sf-color-success-tint: oklch(from var(--sf-color-success) l c h / 0.05); --sf-color-warning-subtle: oklch(from var(--sf-color-warning) l c h / 0.12); --sf-color-warning-muted: oklch(from var(--sf-color-warning) l c h / 0.3); + --sf-color-warning-tint: oklch(from var(--sf-color-warning) l c h / 0.05); --sf-color-info-subtle: oklch(from var(--sf-color-info) l c h / 0.1); --sf-color-info-muted: oklch(from var(--sf-color-info) l c h / 0.3); + --sf-color-info-tint: oklch(from var(--sf-color-info) l c h / 0.05); --sf-color-danger-subtle: oklch(from var(--sf-color-danger) l c h / 0.1); --sf-color-danger-muted: oklch(from var(--sf-color-danger) l c h / 0.3); + --sf-color-danger-tint: oklch(from var(--sf-color-danger) l c h / 0.05); /* ---------------------------------------------------------- Gradients — derived from brand colors (auto-adapt) + All 4 core brand families (primary/secondary/tertiary/action) + share the same darkening formula; --sf-gradient-brand is a + separate decorative hue-shift option, independent of the + colour axis. ---------------------------------------------------------- */ --sf-gradient-primary: linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) calc(l - 0.08) c h)); --sf-gradient-secondary: linear-gradient(in oklch 135deg, var(--sf-color-secondary), oklch(from var(--sf-color-secondary) calc(l - 0.08) c h)); --sf-gradient-tertiary: linear-gradient(in oklch 135deg, var(--sf-color-tertiary), oklch(from var(--sf-color-tertiary) calc(l - 0.08) c h)); + --sf-gradient-action: linear-gradient(in oklch 135deg, var(--sf-color-action), oklch(from var(--sf-color-action) calc(l - 0.08) c h)); --sf-gradient-brand: linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) l c calc(h + 30))); --sf-gradient-surface: linear-gradient(in oklab 180deg, var(--sf-color-surface), var(--sf-color-bg)); @@ -732,7 +743,7 @@ --sf-color-primary--active: var(--sf-color-primary-xdark); --sf-color-primary-subtle: var(--sf-color-primary-a10); --sf-color-primary-muted: var(--sf-color-primary-a30); - --sf-color-primary-ghost: var(--sf-color-primary-a5); + --sf-color-primary-tint: var(--sf-color-primary-a5); @@ -767,7 +778,7 @@ --sf-color-secondary--active: var(--sf-color-secondary-xdark); --sf-color-secondary-subtle: var(--sf-color-secondary-a10); --sf-color-secondary-muted: var(--sf-color-secondary-a30); - --sf-color-secondary-ghost: var(--sf-color-secondary-a5); + --sf-color-secondary-tint: var(--sf-color-secondary-a5); @@ -802,7 +813,7 @@ --sf-color-tertiary--active: var(--sf-color-tertiary-xdark); --sf-color-tertiary-subtle: var(--sf-color-tertiary-a10); --sf-color-tertiary-muted: var(--sf-color-tertiary-a30); - --sf-color-tertiary-ghost: var(--sf-color-tertiary-a5); + --sf-color-tertiary-tint: var(--sf-color-tertiary-a5); @@ -837,7 +848,7 @@ --sf-color-action--active: var(--sf-color-action-xdark); --sf-color-action-subtle: var(--sf-color-action-a10); --sf-color-action-muted: var(--sf-color-action-a30); - --sf-color-action-ghost: var(--sf-color-action-a5); + --sf-color-action-tint: var(--sf-color-action-a5); @@ -872,7 +883,7 @@ --sf-color-neutral--active: var(--sf-color-neutral-xdark); --sf-color-neutral-subtle: var(--sf-color-neutral-a10); --sf-color-neutral-muted: var(--sf-color-neutral-a30); - --sf-color-neutral-ghost: var(--sf-color-neutral-a5); + --sf-color-neutral-tint: var(--sf-color-neutral-a5); @@ -930,7 +941,7 @@ --sf-color-base--active: oklch(from var(--sf-color-base) clamp(0.01, calc(l - 0.08 + var(--sf-is-dark) * 0.16), 0.99) c h); --sf-color-base-subtle: var(--sf-color-base-a10); --sf-color-base-muted: var(--sf-color-base-a30); - --sf-color-base-ghost: var(--sf-color-base-a5); + --sf-color-base-tint: var(--sf-color-base-a5); } @@ -987,7 +998,10 @@ --sf-font-weight-body: var(--sf-font-weight-normal); /* body copy */ --sf-font-weight-heading: var(--sf-font-weight-semibold); /* h1–h6 */ --sf-font-weight-display: var(--sf-font-weight-bold); /* hero / display */ - --sf-font-weight-interactive: var(--sf-font-weight-semibold); /* buttons, badges, nav */ + --sf-font-weight-interactive: var(--sf-font-weight-semibold); /* buttons, badges, nav. + Note: "interactive" here names a TYPOGRAPHY WEIGHT TIER; .sf-card--interactive + names a card BEHAVIOUR modifier. Deliberate coexistence (different property + spaces) — do not introduce a third meaning of "interactive". */ --sf-font-weight-strong: var(--sf-font-weight-bold); /* / emphasis */ /* State token — consumed by .sf-is-current in states.css. diff --git a/SLASHED-for-WP/admin-app/framework-css/dist/slashed.full.css b/SLASHED-for-WP/admin-app/framework-css/dist/slashed.full.css index ddc826f8..4ce1b8db 100644 --- a/SLASHED-for-WP/admin-app/framework-css/dist/slashed.full.css +++ b/SLASHED-for-WP/admin-app/framework-css/dist/slashed.full.css @@ -1,4 +1,4 @@ -/*! SLASHED v0.7.6 — slashed.full.css | MIT License | github.com/codeslash-dev/SLASHED */ +/*! SLASHED v0.7.7 — slashed.full.css | MIT License | github.com/codeslash-dev/SLASHED */ /* ─── core/layers.css ─── */ /* SLASHED — core/layers.css @@ -611,27 +611,38 @@ --sf-color-mark-bg: oklch(from var(--sf-color-warning) l c h / 0.25); /* ---------------------------------------------------------- - Status triplets — subtle/muted (alpha variants) - bg/border use same formula both modes + Status triplets — subtle/muted/tint (alpha variants) + bg/border use same formula both modes. -tint is the 5% + near-transparent rung, mirroring the brand families' + --sf-color-{family}-tint aliases (full 10-family coverage). ---------------------------------------------------------- */ --sf-color-success-subtle: oklch(from var(--sf-color-success) l c h / 0.12); --sf-color-success-muted: oklch(from var(--sf-color-success) l c h / 0.3); + --sf-color-success-tint: oklch(from var(--sf-color-success) l c h / 0.05); --sf-color-warning-subtle: oklch(from var(--sf-color-warning) l c h / 0.12); --sf-color-warning-muted: oklch(from var(--sf-color-warning) l c h / 0.3); + --sf-color-warning-tint: oklch(from var(--sf-color-warning) l c h / 0.05); --sf-color-info-subtle: oklch(from var(--sf-color-info) l c h / 0.1); --sf-color-info-muted: oklch(from var(--sf-color-info) l c h / 0.3); + --sf-color-info-tint: oklch(from var(--sf-color-info) l c h / 0.05); --sf-color-danger-subtle: oklch(from var(--sf-color-danger) l c h / 0.1); --sf-color-danger-muted: oklch(from var(--sf-color-danger) l c h / 0.3); + --sf-color-danger-tint: oklch(from var(--sf-color-danger) l c h / 0.05); /* ---------------------------------------------------------- Gradients — derived from brand colors (auto-adapt) + All 4 core brand families (primary/secondary/tertiary/action) + share the same darkening formula; --sf-gradient-brand is a + separate decorative hue-shift option, independent of the + colour axis. ---------------------------------------------------------- */ --sf-gradient-primary: linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) calc(l - 0.08) c h)); --sf-gradient-secondary: linear-gradient(in oklch 135deg, var(--sf-color-secondary), oklch(from var(--sf-color-secondary) calc(l - 0.08) c h)); --sf-gradient-tertiary: linear-gradient(in oklch 135deg, var(--sf-color-tertiary), oklch(from var(--sf-color-tertiary) calc(l - 0.08) c h)); + --sf-gradient-action: linear-gradient(in oklch 135deg, var(--sf-color-action), oklch(from var(--sf-color-action) calc(l - 0.08) c h)); --sf-gradient-brand: linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) l c calc(h + 30))); --sf-gradient-surface: linear-gradient(in oklab 180deg, var(--sf-color-surface), var(--sf-color-bg)); @@ -757,7 +768,7 @@ --sf-color-primary--active: var(--sf-color-primary-xdark); --sf-color-primary-subtle: var(--sf-color-primary-a10); --sf-color-primary-muted: var(--sf-color-primary-a30); - --sf-color-primary-ghost: var(--sf-color-primary-a5); + --sf-color-primary-tint: var(--sf-color-primary-a5); @@ -792,7 +803,7 @@ --sf-color-secondary--active: var(--sf-color-secondary-xdark); --sf-color-secondary-subtle: var(--sf-color-secondary-a10); --sf-color-secondary-muted: var(--sf-color-secondary-a30); - --sf-color-secondary-ghost: var(--sf-color-secondary-a5); + --sf-color-secondary-tint: var(--sf-color-secondary-a5); @@ -827,7 +838,7 @@ --sf-color-tertiary--active: var(--sf-color-tertiary-xdark); --sf-color-tertiary-subtle: var(--sf-color-tertiary-a10); --sf-color-tertiary-muted: var(--sf-color-tertiary-a30); - --sf-color-tertiary-ghost: var(--sf-color-tertiary-a5); + --sf-color-tertiary-tint: var(--sf-color-tertiary-a5); @@ -862,7 +873,7 @@ --sf-color-action--active: var(--sf-color-action-xdark); --sf-color-action-subtle: var(--sf-color-action-a10); --sf-color-action-muted: var(--sf-color-action-a30); - --sf-color-action-ghost: var(--sf-color-action-a5); + --sf-color-action-tint: var(--sf-color-action-a5); @@ -897,7 +908,7 @@ --sf-color-neutral--active: var(--sf-color-neutral-xdark); --sf-color-neutral-subtle: var(--sf-color-neutral-a10); --sf-color-neutral-muted: var(--sf-color-neutral-a30); - --sf-color-neutral-ghost: var(--sf-color-neutral-a5); + --sf-color-neutral-tint: var(--sf-color-neutral-a5); @@ -955,7 +966,7 @@ --sf-color-base--active: oklch(from var(--sf-color-base) clamp(0.01, calc(l - 0.08 + var(--sf-is-dark) * 0.16), 0.99) c h); --sf-color-base-subtle: var(--sf-color-base-a10); --sf-color-base-muted: var(--sf-color-base-a30); - --sf-color-base-ghost: var(--sf-color-base-a5); + --sf-color-base-tint: var(--sf-color-base-a5); } @@ -1012,7 +1023,10 @@ --sf-font-weight-body: var(--sf-font-weight-normal); /* body copy */ --sf-font-weight-heading: var(--sf-font-weight-semibold); /* h1–h6 */ --sf-font-weight-display: var(--sf-font-weight-bold); /* hero / display */ - --sf-font-weight-interactive: var(--sf-font-weight-semibold); /* buttons, badges, nav */ + --sf-font-weight-interactive: var(--sf-font-weight-semibold); /* buttons, badges, nav. + Note: "interactive" here names a TYPOGRAPHY WEIGHT TIER; .sf-card--interactive + names a card BEHAVIOUR modifier. Deliberate coexistence (different property + spaces) — do not introduce a third meaning of "interactive". */ --sf-font-weight-strong: var(--sf-font-weight-bold); /* / emphasis */ /* State token — consumed by .sf-is-current in states.css. @@ -4639,6 +4653,7 @@ * token; inner media radius mirrors the card's inner radius. */ --sf-card-media-ratio: var(--sf-ratio-video); --sf-card-media-radius: var(--sf-card-radius, var(--sf-radius-m)); + --sf-card-avatar-size: 2.5rem; --sf-card-heading-size: var(--sf-text-xl); --sf-card-btn-font-size: var(--sf-text-s); @@ -4703,9 +4718,11 @@ @layer slashed.components Component class surface: button and card. - .sf-btn and .sf-card are LIVE since v0.7.0. These are the only two - components SLASHED ships — the framework stays BEM-first and token-first - and does not carry a broad component library. + .sf-btn and .sf-card are LIVE since v0.7.0. Further components + (badge, tag, alert, avatar, modal, skeleton) are planned — see + docs/roadmap.md and issue #384. The framework stays BEM-first and + token-first: anything not shipped here is authored as project BEM + classes reading SLASHED tokens. Imports optional component tokens. */ @@ -4714,9 +4731,14 @@ /* ============================================================ * .sf-btn * Interactive call-to-action element. Apply to + - +
@@ -318,7 +319,7 @@

Interactive card

Elevation and interaction states react to token changes.

-
+
@@ -404,7 +405,7 @@
- +
diff --git a/SLASHED-for-WP/admin-app/src/data/api-index.generated.json b/SLASHED-for-WP/admin-app/src/data/api-index.generated.json index 90fd7c96..63210883 100644 --- a/SLASHED-for-WP/admin-app/src/data/api-index.generated.json +++ b/SLASHED-for-WP/admin-app/src/data/api-index.generated.json @@ -2,7 +2,7 @@ "_sync": { "generatedBy": "configurator/scripts/sync-api.mjs", "source": "docs/api-index.json", - "tokensHash": "8af8df5b7b20", + "tokensHash": "40d1a1a35148", "bundles": [ "full", "optimal", @@ -10,17 +10,17 @@ "optimal-utilities" ], "counts": { - "tokens": 729, + "tokens": 735, "byTier": { - "PUBLIC": 673, + "PUBLIC": 679, "PUBLIC-ADVANCED": 55, "INTERNAL": 1 }, "byCategory": { "Layout tokens": 53, - "Core tokens": 617, + "Core tokens": 622, "Macro tokens": 34, - "Component tokens": 25 + "Component tokens": 26 } } }, @@ -1550,6 +1550,27 @@ "optimal-components" ] }, + { + "name": "--sf-card-avatar-size", + "tier": "PUBLIC", + "role": "knob", + "namespace": "card", + "category": "Component tokens", + "group": "CARD TOKENS", + "description": "Diameter of .sf-card__avatar. Defaults to 2.5rem.", + "note": "Diameter of .sf-card__avatar. Defaults to 2.5rem.", + "value": "2.5rem", + "aliasOf": null, + "registered": false, + "syntax": null, + "fallbackOnly": false, + "optional": true, + "layer": "slashed.tokens", + "bundles": [ + "full", + "optimal-components" + ] + }, { "name": "--sf-card-bg", "tier": "PUBLIC", @@ -2035,7 +2056,7 @@ "namespace": "color", "category": "Core tokens", "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "note": "Action color at pressed/active brightness.", "value": "var(--sf-color-action-xdark)", "aliasOf": "--sf-color-action-xdark", @@ -2058,7 +2079,7 @@ "namespace": "color", "category": "Core tokens", "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "note": "Action color at hover brightness.", "value": "var(--sf-color-action-darker)", "aliasOf": "--sf-color-action-darker", @@ -2081,7 +2102,7 @@ "namespace": "color", "category": "Core tokens", "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "note": "Very light action shade. Hover fills on white surfaces, badge backgrounds.", "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-100), var(--sf-color-surface))", "aliasOf": null, @@ -2104,7 +2125,7 @@ "namespace": "color", "category": "Core tokens", "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "note": "Light action shade. Subtle fills and outlined badge backgrounds.", "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-200), var(--sf-color-surface))", "aliasOf": null, @@ -2127,7 +2148,7 @@ "namespace": "color", "category": "Core tokens", "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "note": "Light-mid action shade. Borders on light backgrounds, low-emphasis fills.", "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-300), var(--sf-color-surface))", "aliasOf": null, @@ -2150,7 +2171,7 @@ "namespace": "color", "category": "Core tokens", "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "note": "Mid-light action shade. Disabled state fills, decorative accents.", "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-400), var(--sf-color-surface))", "aliasOf": null, @@ -2173,7 +2194,7 @@ "namespace": "color", "category": "Core tokens", "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "note": "Lightest action tint. Background fill for subtle action-tinted surfaces.", "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-50), var(--sf-color-surface))", "aliasOf": null, @@ -2196,7 +2217,7 @@ "namespace": "color", "category": "Core tokens", "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "note": "Mid action shade — the 'pure' hue. Accessible on both light and dark backgrounds.", "value": "var(--sf-color-action)", "aliasOf": "--sf-color-action", @@ -2219,7 +2240,7 @@ "namespace": "color", "category": "Core tokens", "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "note": "Mid-dark action shade. Text on light surfaces, icon fills.", "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-600), var(--sf-color-text))", "aliasOf": null, @@ -2242,7 +2263,7 @@ "namespace": "color", "category": "Core tokens", "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "note": "Dark action shade. Strong text and icon fills on light backgrounds.", "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-700), var(--sf-color-text))", "aliasOf": null, @@ -2265,7 +2286,7 @@ "namespace": "color", "category": "Core tokens", "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "note": "Very dark action shade. High-contrast text on white.", "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-800), var(--sf-color-text))", "aliasOf": null, @@ -2288,7 +2309,7 @@ "namespace": "color", "category": "Core tokens", "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "note": "Near-black action shade. Extreme contrast on white surfaces.", "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-900), var(--sf-color-text))", "aliasOf": null, @@ -2311,7 +2332,7 @@ "namespace": "color", "category": "Core tokens", "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "note": "Darkest action tint. Near-black for dark-theme surface accents.", "value": "color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-950), var(--sf-color-text))", "aliasOf": null, @@ -2334,7 +2355,7 @@ "namespace": "color", "category": "Core tokens", "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "note": "10% opacity action tint. Subtle hover or selected-row background.", "value": "oklch(from var(--sf-color-action) l c h / 0.10)", "aliasOf": null, @@ -2357,7 +2378,7 @@ "namespace": "color", "category": "Core tokens", "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "note": "30% opacity action tint.", "value": "oklch(from var(--sf-color-action) l c h / 0.30)", "aliasOf": null, @@ -2380,7 +2401,7 @@ "namespace": "color", "category": "Core tokens", "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "note": "5% opacity action tint. Barely-there hover highlight.", "value": "oklch(from var(--sf-color-action) l c h / 0.05)", "aliasOf": null, @@ -2403,7 +2424,7 @@ "namespace": "color", "category": "Core tokens", "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "note": "50% opacity action tint. Mid-transparency badge or overlay.", "value": "oklch(from var(--sf-color-action) l c h / 0.50)", "aliasOf": null, @@ -2426,7 +2447,7 @@ "namespace": "color", "category": "Core tokens", "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "note": "80% opacity action tint.", "value": "oklch(from var(--sf-color-action) l c h / 0.80)", "aliasOf": null, @@ -2449,7 +2470,7 @@ "namespace": "color", "category": "Core tokens", "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "note": "Deep action shade for high-contrast contexts.", "value": "var(--sf-color-action-600)", "aliasOf": "--sf-color-action-600", @@ -2465,29 +2486,6 @@ "optimal-utilities" ] }, - { - "name": "--sf-color-action-ghost", - "tier": "PUBLIC", - "role": "consumption", - "namespace": "color", - "category": "Core tokens", - "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", - "note": "Near-transparent action tint for ghost-button hover backgrounds.", - "value": "var(--sf-color-action-a5)", - "aliasOf": "--sf-color-action-a5", - "registered": false, - "syntax": null, - "fallbackOnly": false, - "optional": false, - "layer": "slashed.tokens", - "bundles": [ - "full", - "optimal", - "optimal-components", - "optimal-utilities" - ] - }, { "name": "--sf-color-action-lighter", "tier": "PUBLIC", @@ -2495,7 +2493,7 @@ "namespace": "color", "category": "Core tokens", "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "note": "Light action shade for soft accents.", "value": "var(--sf-color-action-400)", "aliasOf": "--sf-color-action-400", @@ -2518,7 +2516,7 @@ "namespace": "color", "category": "Core tokens", "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "note": "Medium action fill — outlined button hover backgrounds.", "value": "var(--sf-color-action-a30)", "aliasOf": "--sf-color-action-a30", @@ -2587,7 +2585,7 @@ "namespace": "color", "category": "Core tokens", "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "note": "Lightest action tint — selected rows, active nav, chips.", "value": "var(--sf-color-action-a10)", "aliasOf": "--sf-color-action-a10", @@ -2610,7 +2608,7 @@ "namespace": "color", "category": "Core tokens", "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "note": "Near-black action shade for maximum contrast on light surfaces.", "value": "var(--sf-color-action-950)", "aliasOf": "--sf-color-action-950", @@ -2633,7 +2631,7 @@ "namespace": "color", "category": "Core tokens", "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "note": "Near-white action shade for maximum contrast on dark surfaces.", "value": "var(--sf-color-action-50)", "aliasOf": "--sf-color-action-50", @@ -2649,6 +2647,29 @@ "optimal-utilities" ] }, + { + "name": "--sf-color-action-tint", + "tier": "PUBLIC", + "role": "consumption", + "namespace": "color", + "category": "Core tokens", + "group": "action", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", + "note": "Near-transparent action tint (5% alpha) for hover-state washes and the most subtle backgrounds.", + "value": "var(--sf-color-action-a5)", + "aliasOf": "--sf-color-action-a5", + "registered": false, + "syntax": null, + "fallbackOnly": false, + "optional": false, + "layer": "slashed.tokens", + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, { "name": "--sf-color-action-xdark", "tier": "PUBLIC", @@ -2656,7 +2677,7 @@ "namespace": "color", "category": "Core tokens", "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "note": "Extra-dark action shade.", "value": "var(--sf-color-action-800)", "aliasOf": "--sf-color-action-800", @@ -2679,7 +2700,7 @@ "namespace": "color", "category": "Core tokens", "group": "action", - "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.", + "description": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "note": "Extra-light action shade.", "value": "var(--sf-color-action-200)", "aliasOf": "--sf-color-action-200", @@ -2725,7 +2746,7 @@ "namespace": "color", "category": "Core tokens", "group": "base", - "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.", + "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and tint variants for secondary interactive elements.", "note": "Pressed/active surface derived from --sf-color-base for subtle background interactions.", "value": "oklch(from var(--sf-color-base) clamp(0.01, calc(l - 0.08 + var(--sf-is-dark) * 0.16), 0.99) c h)", "aliasOf": null, @@ -2748,7 +2769,7 @@ "namespace": "color", "category": "Core tokens", "group": "base", - "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.", + "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and tint variants for secondary interactive elements.", "note": "Hover-state surface derived from --sf-color-base for subtle background interactions.", "value": "oklch(from var(--sf-color-base) clamp(0.01, calc(l - 0.04 + var(--sf-is-dark) * 0.08), 0.99) c h)", "aliasOf": null, @@ -2771,7 +2792,7 @@ "namespace": "color", "category": "Core tokens", "group": "base", - "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.", + "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and tint variants for secondary interactive elements.", "note": "Very light base-surface level.", "value": "oklch(from var(--sf-color-base) 0.94 c h)", "aliasOf": null, @@ -2794,7 +2815,7 @@ "namespace": "color", "category": "Core tokens", "group": "base", - "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.", + "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and tint variants for secondary interactive elements.", "note": "Light base-surface level.", "value": "oklch(from var(--sf-color-base) 0.88 c h)", "aliasOf": null, @@ -2817,7 +2838,7 @@ "namespace": "color", "category": "Core tokens", "group": "base", - "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.", + "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and tint variants for secondary interactive elements.", "note": "Light-mid base-surface level.", "value": "oklch(from var(--sf-color-base) 0.78 c h)", "aliasOf": null, @@ -2840,7 +2861,7 @@ "namespace": "color", "category": "Core tokens", "group": "base", - "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.", + "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and tint variants for secondary interactive elements.", "note": "Mid-light base-surface level.", "value": "oklch(from var(--sf-color-base) 0.65 c h)", "aliasOf": null, @@ -2863,7 +2884,7 @@ "namespace": "color", "category": "Core tokens", "group": "base", - "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.", + "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and tint variants for secondary interactive elements.", "note": "Lightest base-surface level.", "value": "oklch(from var(--sf-color-base) 0.97 c h)", "aliasOf": null, @@ -2886,7 +2907,7 @@ "namespace": "color", "category": "Core tokens", "group": "base", - "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.", + "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and tint variants for secondary interactive elements.", "note": "Mid base-surface level.", "value": "oklch(from var(--sf-color-base) 0.50 c h)", "aliasOf": null, @@ -2909,7 +2930,7 @@ "namespace": "color", "category": "Core tokens", "group": "base", - "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.", + "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and tint variants for secondary interactive elements.", "note": "Mid-dark base-surface level.", "value": "oklch(from var(--sf-color-base) 0.37 c h)", "aliasOf": null, @@ -2932,7 +2953,7 @@ "namespace": "color", "category": "Core tokens", "group": "base", - "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.", + "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and tint variants for secondary interactive elements.", "note": "Dark base-surface level.", "value": "oklch(from var(--sf-color-base) 0.27 c h)", "aliasOf": null, @@ -2955,7 +2976,7 @@ "namespace": "color", "category": "Core tokens", "group": "base", - "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.", + "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and tint variants for secondary interactive elements.", "note": "Very dark base-surface level.", "value": "oklch(from var(--sf-color-base) 0.17 c h)", "aliasOf": null, @@ -2978,7 +2999,7 @@ "namespace": "color", "category": "Core tokens", "group": "base", - "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.", + "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and tint variants for secondary interactive elements.", "note": "Near-black base-surface level.", "value": "oklch(from var(--sf-color-base) 0.11 c h)", "aliasOf": null, @@ -3001,7 +3022,7 @@ "namespace": "color", "category": "Core tokens", "group": "base", - "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.", + "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and tint variants for secondary interactive elements.", "note": "Darkest base-surface level.", "value": "oklch(from var(--sf-color-base) 0.06 c h)", "aliasOf": null, @@ -3024,7 +3045,7 @@ "namespace": "color", "category": "Core tokens", "group": "base", - "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.", + "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and tint variants for secondary interactive elements.", "note": "10% opacity base-surface tint.", "value": "oklch(from var(--sf-color-base) l c h / 0.10)", "aliasOf": null, @@ -3047,7 +3068,7 @@ "namespace": "color", "category": "Core tokens", "group": "base", - "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.", + "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and tint variants for secondary interactive elements.", "note": "30% opacity base-surface tint.", "value": "oklch(from var(--sf-color-base) l c h / 0.30)", "aliasOf": null, @@ -3070,7 +3091,7 @@ "namespace": "color", "category": "Core tokens", "group": "base", - "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.", + "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and tint variants for secondary interactive elements.", "note": "5% opacity base-surface tint.", "value": "oklch(from var(--sf-color-base) l c h / 0.05)", "aliasOf": null, @@ -3093,7 +3114,7 @@ "namespace": "color", "category": "Core tokens", "group": "base", - "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.", + "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and tint variants for secondary interactive elements.", "note": "50% opacity base-surface tint.", "value": "oklch(from var(--sf-color-base) l c h / 0.50)", "aliasOf": null, @@ -3116,7 +3137,7 @@ "namespace": "color", "category": "Core tokens", "group": "base", - "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.", + "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and tint variants for secondary interactive elements.", "note": "80% opacity base-surface tint.", "value": "oklch(from var(--sf-color-base) l c h / 0.80)", "aliasOf": null, @@ -3132,29 +3153,6 @@ "optimal-utilities" ] }, - { - "name": "--sf-color-base-ghost", - "tier": "PUBLIC", - "role": "consumption", - "namespace": "color", - "category": "Core tokens", - "group": "base", - "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.", - "note": "Near-transparent base-surface tint for ghost backgrounds.", - "value": "var(--sf-color-base-a5)", - "aliasOf": "--sf-color-base-a5", - "registered": false, - "syntax": null, - "fallbackOnly": false, - "optional": false, - "layer": "slashed.tokens", - "bundles": [ - "full", - "optimal", - "optimal-components", - "optimal-utilities" - ] - }, { "name": "--sf-color-base-muted", "tier": "PUBLIC", @@ -3162,7 +3160,7 @@ "namespace": "color", "category": "Core tokens", "group": "base", - "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.", + "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and tint variants for secondary interactive elements.", "note": "Medium base-surface fill for muted containers or overlays.", "value": "var(--sf-color-base-a30)", "aliasOf": "--sf-color-base-a30", @@ -3231,7 +3229,7 @@ "namespace": "color", "category": "Core tokens", "group": "base", - "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.", + "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and tint variants for secondary interactive elements.", "note": "Subtle base-surface tint for low-emphasis backgrounds.", "value": "var(--sf-color-base-a10)", "aliasOf": "--sf-color-base-a10", @@ -3247,6 +3245,29 @@ "optimal-utilities" ] }, + { + "name": "--sf-color-base-tint", + "tier": "PUBLIC", + "role": "consumption", + "namespace": "color", + "category": "Core tokens", + "group": "base", + "description": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and tint variants for secondary interactive elements.", + "note": "Near-transparent base-surface tint (5% alpha) for hover-state washes and the most subtle backgrounds.", + "value": "var(--sf-color-base-a5)", + "aliasOf": "--sf-color-base-a5", + "registered": false, + "syntax": null, + "fallbackOnly": false, + "optional": false, + "layer": "slashed.tokens", + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, { "name": "--sf-color-bg", "tier": "PUBLIC", @@ -3730,6 +3751,29 @@ "optimal-utilities" ] }, + { + "name": "--sf-color-danger-tint", + "tier": "PUBLIC", + "role": "consumption", + "namespace": "color", + "category": "Core tokens", + "group": "Status triplets", + "description": "Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.", + "note": "Near-transparent danger tint (5% alpha) for hover-state washes and the most subtle backgrounds.", + "value": "oklch(from var(--sf-color-danger) l c h / 0.05)", + "aliasOf": null, + "registered": false, + "syntax": null, + "fallbackOnly": false, + "optional": false, + "layer": "slashed.tokens", + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, { "name": "--sf-color-dim", "tier": "PUBLIC", @@ -3914,6 +3958,29 @@ "optimal-utilities" ] }, + { + "name": "--sf-color-info-tint", + "tier": "PUBLIC", + "role": "consumption", + "namespace": "color", + "category": "Core tokens", + "group": "Status triplets", + "description": "Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.", + "note": "Near-transparent info tint (5% alpha) for hover-state washes and the most subtle backgrounds.", + "value": "oklch(from var(--sf-color-info) l c h / 0.05)", + "aliasOf": null, + "registered": false, + "syntax": null, + "fallbackOnly": false, + "optional": false, + "layer": "slashed.tokens", + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, { "name": "--sf-color-inset", "tier": "PUBLIC", @@ -4604,29 +4671,6 @@ "optimal-utilities" ] }, - { - "name": "--sf-color-neutral-ghost", - "tier": "PUBLIC", - "role": "consumption", - "namespace": "color", - "category": "Core tokens", - "group": "neutral", - "description": "Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.", - "note": "Near-transparent neutral tint for ghost-button hover backgrounds.", - "value": "var(--sf-color-neutral-a5)", - "aliasOf": "--sf-color-neutral-a5", - "registered": false, - "syntax": null, - "fallbackOnly": false, - "optional": false, - "layer": "slashed.tokens", - "bundles": [ - "full", - "optimal", - "optimal-components", - "optimal-utilities" - ] - }, { "name": "--sf-color-neutral-lighter", "tier": "PUBLIC", @@ -4788,6 +4832,29 @@ "optimal-utilities" ] }, + { + "name": "--sf-color-neutral-tint", + "tier": "PUBLIC", + "role": "consumption", + "namespace": "color", + "category": "Core tokens", + "group": "neutral", + "description": "Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.", + "note": "Near-transparent neutral tint (5% alpha) for hover-state washes and the most subtle backgrounds.", + "value": "var(--sf-color-neutral-a5)", + "aliasOf": "--sf-color-neutral-a5", + "registered": false, + "syntax": null, + "fallbackOnly": false, + "optional": false, + "layer": "slashed.tokens", + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, { "name": "--sf-color-neutral-xdark", "tier": "PUBLIC", @@ -4887,7 +4954,7 @@ "namespace": "color", "category": "Core tokens", "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "note": "Primary color at pressed/active brightness.", "value": "var(--sf-color-primary-xdark)", "aliasOf": "--sf-color-primary-xdark", @@ -4910,7 +4977,7 @@ "namespace": "color", "category": "Core tokens", "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "note": "Primary color at hover brightness.", "value": "var(--sf-color-primary-darker)", "aliasOf": "--sf-color-primary-darker", @@ -4933,7 +5000,7 @@ "namespace": "color", "category": "Core tokens", "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "note": "Very light primary shade.", "value": "color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-100), var(--sf-color-surface))", "aliasOf": null, @@ -4956,7 +5023,7 @@ "namespace": "color", "category": "Core tokens", "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "note": "Light primary shade.", "value": "color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-200), var(--sf-color-surface))", "aliasOf": null, @@ -4979,7 +5046,7 @@ "namespace": "color", "category": "Core tokens", "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "note": "Light-mid primary shade.", "value": "color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-300), var(--sf-color-surface))", "aliasOf": null, @@ -5002,7 +5069,7 @@ "namespace": "color", "category": "Core tokens", "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "note": "Mid-light primary shade.", "value": "color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-400), var(--sf-color-surface))", "aliasOf": null, @@ -5025,7 +5092,7 @@ "namespace": "color", "category": "Core tokens", "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "note": "Lightest primary tint.", "value": "color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-50), var(--sf-color-surface))", "aliasOf": null, @@ -5048,7 +5115,7 @@ "namespace": "color", "category": "Core tokens", "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "note": "Mid primary shade — the 'pure' hue.", "value": "var(--sf-color-primary)", "aliasOf": "--sf-color-primary", @@ -5071,7 +5138,7 @@ "namespace": "color", "category": "Core tokens", "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "note": "Mid-dark primary shade.", "value": "color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-600), var(--sf-color-text))", "aliasOf": null, @@ -5094,7 +5161,7 @@ "namespace": "color", "category": "Core tokens", "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "note": "Dark primary shade.", "value": "color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-700), var(--sf-color-text))", "aliasOf": null, @@ -5117,7 +5184,7 @@ "namespace": "color", "category": "Core tokens", "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "note": "Very dark primary shade.", "value": "color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-800), var(--sf-color-text))", "aliasOf": null, @@ -5140,7 +5207,7 @@ "namespace": "color", "category": "Core tokens", "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "note": "Near-black primary shade.", "value": "color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-900), var(--sf-color-text))", "aliasOf": null, @@ -5163,7 +5230,7 @@ "namespace": "color", "category": "Core tokens", "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "note": "Darkest primary tint.", "value": "color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-950), var(--sf-color-text))", "aliasOf": null, @@ -5186,7 +5253,7 @@ "namespace": "color", "category": "Core tokens", "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "note": "10% opacity primary tint.", "value": "oklch(from var(--sf-color-primary) l c h / 0.10)", "aliasOf": null, @@ -5209,7 +5276,7 @@ "namespace": "color", "category": "Core tokens", "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "note": "30% opacity primary tint.", "value": "oklch(from var(--sf-color-primary) l c h / 0.30)", "aliasOf": null, @@ -5232,7 +5299,7 @@ "namespace": "color", "category": "Core tokens", "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "note": "5% opacity primary tint.", "value": "oklch(from var(--sf-color-primary) l c h / 0.05)", "aliasOf": null, @@ -5255,7 +5322,7 @@ "namespace": "color", "category": "Core tokens", "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "note": "50% opacity primary tint.", "value": "oklch(from var(--sf-color-primary) l c h / 0.50)", "aliasOf": null, @@ -5278,7 +5345,7 @@ "namespace": "color", "category": "Core tokens", "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "note": "80% opacity primary tint.", "value": "oklch(from var(--sf-color-primary) l c h / 0.80)", "aliasOf": null, @@ -5301,7 +5368,7 @@ "namespace": "color", "category": "Core tokens", "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "note": "Deep primary shade.", "value": "var(--sf-color-primary-600)", "aliasOf": "--sf-color-primary-600", @@ -5317,29 +5384,6 @@ "optimal-utilities" ] }, - { - "name": "--sf-color-primary-ghost", - "tier": "PUBLIC", - "role": "consumption", - "namespace": "color", - "category": "Core tokens", - "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", - "note": "Near-transparent primary tint for ghost-button hover backgrounds.", - "value": "var(--sf-color-primary-a5)", - "aliasOf": "--sf-color-primary-a5", - "registered": false, - "syntax": null, - "fallbackOnly": false, - "optional": false, - "layer": "slashed.tokens", - "bundles": [ - "full", - "optimal", - "optimal-components", - "optimal-utilities" - ] - }, { "name": "--sf-color-primary-lighter", "tier": "PUBLIC", @@ -5347,7 +5391,7 @@ "namespace": "color", "category": "Core tokens", "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "note": "Light primary shade.", "value": "var(--sf-color-primary-400)", "aliasOf": "--sf-color-primary-400", @@ -5370,7 +5414,7 @@ "namespace": "color", "category": "Core tokens", "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "note": "Muted primary fill.", "value": "var(--sf-color-primary-a30)", "aliasOf": "--sf-color-primary-a30", @@ -5439,7 +5483,7 @@ "namespace": "color", "category": "Core tokens", "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "note": "Lightest primary semantic tint.", "value": "var(--sf-color-primary-a10)", "aliasOf": "--sf-color-primary-a10", @@ -5462,7 +5506,7 @@ "namespace": "color", "category": "Core tokens", "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "note": "Near-black primary shade.", "value": "var(--sf-color-primary-950)", "aliasOf": "--sf-color-primary-950", @@ -5485,7 +5529,7 @@ "namespace": "color", "category": "Core tokens", "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "note": "Near-white primary shade.", "value": "var(--sf-color-primary-50)", "aliasOf": "--sf-color-primary-50", @@ -5501,6 +5545,29 @@ "optimal-utilities" ] }, + { + "name": "--sf-color-primary-tint", + "tier": "PUBLIC", + "role": "consumption", + "namespace": "color", + "category": "Core tokens", + "group": "primary", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", + "note": "Near-transparent primary tint (5% alpha) for hover-state washes and the most subtle backgrounds.", + "value": "var(--sf-color-primary-a5)", + "aliasOf": "--sf-color-primary-a5", + "registered": false, + "syntax": null, + "fallbackOnly": false, + "optional": false, + "layer": "slashed.tokens", + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, { "name": "--sf-color-primary-xdark", "tier": "PUBLIC", @@ -5508,7 +5575,7 @@ "namespace": "color", "category": "Core tokens", "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "note": "Extra-dark primary shade.", "value": "var(--sf-color-primary-800)", "aliasOf": "--sf-color-primary-800", @@ -5531,7 +5598,7 @@ "namespace": "color", "category": "Core tokens", "group": "primary", - "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.", + "description": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "note": "Extra-light primary shade.", "value": "var(--sf-color-primary-200)", "aliasOf": "--sf-color-primary-200", @@ -6053,29 +6120,6 @@ "optimal-utilities" ] }, - { - "name": "--sf-color-secondary-ghost", - "tier": "PUBLIC", - "role": "consumption", - "namespace": "color", - "category": "Core tokens", - "group": "secondary", - "description": "Semantic secondary-color scale derived from --sf-color-secondary.", - "note": "Near-transparent secondary tint for ghost-button hover backgrounds.", - "value": "var(--sf-color-secondary-a5)", - "aliasOf": "--sf-color-secondary-a5", - "registered": false, - "syntax": null, - "fallbackOnly": false, - "optional": false, - "layer": "slashed.tokens", - "bundles": [ - "full", - "optimal", - "optimal-components", - "optimal-utilities" - ] - }, { "name": "--sf-color-secondary-lighter", "tier": "PUBLIC", @@ -6237,6 +6281,29 @@ "optimal-utilities" ] }, + { + "name": "--sf-color-secondary-tint", + "tier": "PUBLIC", + "role": "consumption", + "namespace": "color", + "category": "Core tokens", + "group": "secondary", + "description": "Semantic secondary-color scale derived from --sf-color-secondary.", + "note": "Near-transparent secondary tint (5% alpha) for hover-state washes and the most subtle backgrounds.", + "value": "var(--sf-color-secondary-a5)", + "aliasOf": "--sf-color-secondary-a5", + "registered": false, + "syntax": null, + "fallbackOnly": false, + "optional": false, + "layer": "slashed.tokens", + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, { "name": "--sf-color-secondary-xdark", "tier": "PUBLIC", @@ -6513,6 +6580,29 @@ "optimal-utilities" ] }, + { + "name": "--sf-color-success-tint", + "tier": "PUBLIC", + "role": "consumption", + "namespace": "color", + "category": "Core tokens", + "group": "Status triplets", + "description": "Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.", + "note": "Near-transparent success tint (5% alpha) for hover-state washes and the most subtle backgrounds.", + "value": "oklch(from var(--sf-color-success) l c h / 0.05)", + "aliasOf": null, + "registered": false, + "syntax": null, + "fallbackOnly": false, + "optional": false, + "layer": "slashed.tokens", + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, { "name": "--sf-color-surface", "tier": "PUBLIC", @@ -6996,29 +7086,6 @@ "optimal-utilities" ] }, - { - "name": "--sf-color-tertiary-ghost", - "tier": "PUBLIC", - "role": "consumption", - "namespace": "color", - "category": "Core tokens", - "group": "tertiary", - "description": "Semantic tertiary-color scale derived from --sf-color-tertiary.", - "note": "Near-transparent tertiary tint for ghost-button hover backgrounds.", - "value": "var(--sf-color-tertiary-a5)", - "aliasOf": "--sf-color-tertiary-a5", - "registered": false, - "syntax": null, - "fallbackOnly": false, - "optional": false, - "layer": "slashed.tokens", - "bundles": [ - "full", - "optimal", - "optimal-components", - "optimal-utilities" - ] - }, { "name": "--sf-color-tertiary-lighter", "tier": "PUBLIC", @@ -7180,6 +7247,29 @@ "optimal-utilities" ] }, + { + "name": "--sf-color-tertiary-tint", + "tier": "PUBLIC", + "role": "consumption", + "namespace": "color", + "category": "Core tokens", + "group": "tertiary", + "description": "Semantic tertiary-color scale derived from --sf-color-tertiary.", + "note": "Near-transparent tertiary tint (5% alpha) for hover-state washes and the most subtle backgrounds.", + "value": "var(--sf-color-tertiary-a5)", + "aliasOf": "--sf-color-tertiary-a5", + "registered": false, + "syntax": null, + "fallbackOnly": false, + "optional": false, + "layer": "slashed.tokens", + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, { "name": "--sf-color-tertiary-xdark", "tier": "PUBLIC", @@ -7755,6 +7845,29 @@ "optimal-utilities" ] }, + { + "name": "--sf-color-warning-tint", + "tier": "PUBLIC", + "role": "consumption", + "namespace": "color", + "category": "Core tokens", + "group": "Status triplets", + "description": "Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.", + "note": "Near-transparent warning tint (5% alpha) for hover-state washes and the most subtle backgrounds.", + "value": "oklch(from var(--sf-color-warning) l c h / 0.05)", + "aliasOf": null, + "registered": false, + "syntax": null, + "fallbackOnly": false, + "optional": false, + "layer": "slashed.tokens", + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, { "name": "--sf-color-white", "tier": "PUBLIC", @@ -8890,7 +9003,7 @@ "category": "Component tokens", "group": "FIELD TOKENS", "description": "Padding and radius tokens that control form field geometry. Override these to give inputs a distinct visual language from buttons.", - "note": "Vertical (block) inner padding for form field inputs.", + "note": "Vertical (block) inner padding for form field inputs. Reserved for a future .sf-field class — declared but not yet consumed by any shipped rule.", "value": "var(--sf-space-xs)", "aliasOf": "--sf-space-xs", "registered": false, @@ -8911,7 +9024,7 @@ "category": "Component tokens", "group": "FIELD TOKENS", "description": "Padding and radius tokens that control form field geometry. Override these to give inputs a distinct visual language from buttons.", - "note": "Horizontal (inline) inner padding for form field inputs.", + "note": "Horizontal (inline) inner padding for form field inputs. Reserved for a future .sf-field class — declared but not yet consumed by any shipped rule.", "value": "var(--sf-space-s)", "aliasOf": "--sf-space-s", "registered": false, @@ -8932,7 +9045,7 @@ "category": "Component tokens", "group": "FIELD TOKENS", "description": "Padding and radius tokens that control form field geometry. Override these to give inputs a distinct visual language from buttons.", - "note": "Border radius for form field inputs. Defaults to --sf-radius-m; override to reshape all inputs at once.", + "note": "Border radius for form field inputs. Defaults to --sf-radius-m; override to reshape all inputs at once. Reserved for a future .sf-field class — declared but not yet consumed by any shipped rule.", "value": "var(--sf-radius-m)", "aliasOf": "--sf-radius-m", "registered": false, @@ -9681,6 +9794,29 @@ "optimal-utilities" ] }, + { + "name": "--sf-gradient-action", + "tier": "PUBLIC", + "role": "consumption", + "namespace": "gradient", + "category": "Core tokens", + "group": "Gradients", + "description": "Pre-built gradient shorthands for brand fills and directional fade effects.", + "note": "Gradient using action palette colors (light to saturated). Core-4 parity with the primary/secondary/tertiary gradients; drives the default .sf-btn--gradient fill.", + "value": "linear-gradient(in oklch 135deg, var(--sf-color-action), oklch(from var(--sf-color-action) calc(l - 0.08) c h))", + "aliasOf": null, + "registered": false, + "syntax": null, + "fallbackOnly": false, + "optional": false, + "layer": "slashed.tokens", + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, { "name": "--sf-gradient-brand", "tier": "PUBLIC", diff --git a/SLASHED-for-WP/admin-app/src/data/classes.generated.json b/SLASHED-for-WP/admin-app/src/data/classes.generated.json index 6dfb50b9..0b2dc372 100644 --- a/SLASHED-for-WP/admin-app/src/data/classes.generated.json +++ b/SLASHED-for-WP/admin-app/src/data/classes.generated.json @@ -210,7 +210,27 @@ "kind": "component", "category": "Components", "group": ".sf-btn", - "description": "Interactive call-to-action button. Apply to `),Wc=G(` `,1),Gc=G(` `,1),Kc=G(` `,1),qc=G(` `,1),Jc=G(``),Yc=G(`
/
`,1);function Xc(e,t){Ue(t,!0);let n=window.__SLASHED_FW_VERSION__===void 0?``:window.__SLASHED_FW_VERSION__,r=L(!1),i=L(!1),a=L(null),o=L(null);On(()=>{U(i)&&br().then(()=>U(a)?.focus())});async function s(){try{let e=fc(t.overrides,Ic());await navigator.clipboard.writeText(e),R(r,!0),setTimeout(()=>{R(r,!1)},2e3)}catch{}}function c(){R(i,!0)}function l(){R(i,!1),t.onResetAll()}function u(){R(i,!1)}var d=Yc(),f=B(d),p=V(z(f),2),m=z(p),h=V(z(m)),g=z(h);F(h),F(m),Me(2),F(p);var _=V(p,2),v=e=>{var n=Uc(),r=z(n),i=z(r,!0);F(r),Me(3),F(n),H(()=>q(i,t.overridesCount)),W(`click`,n,function(...e){t.onExport?.apply(this,e)}),K(e,n)};J(_,e=>{t.overridesCount>0&&e(v)});var y=V(_,4),b=z(y),x=z(b),S=e=>{var t=Wc();Lo(B(t),{class:`w-3.5 h-3.5 animate-spin shrink-0`}),Me(2),K(e,t)},C=e=>{var t=Gc();va(B(t),{class:`w-3.5 h-3.5 shrink-0`}),Me(2),K(e,t)},w=e=>{var t=Kc();Vo(B(t),{class:`w-3.5 h-3.5 shrink-0`}),Me(2),K(e,t)},T=e=>{var t=qc();oo(B(t),{class:`w-3.5 h-3.5 shrink-0`}),Me(2),K(e,t)};J(x,e=>{t.saveState===`saving`?e(S):t.saveState===`saved`?e(C,1):t.saveState===`error`?e(w,2):e(T,-1)}),F(b);var E=V(b,2);jo(z(E),{class:`w-3.5 h-3.5`}),F(E);var D=V(E,2);Qa(z(D),{class:`w-3.5 h-3.5`}),F(D);var O=V(D,4),k=z(O),A=e=>{va(e,{class:`w-3.5 h-3.5 text-emerald-600 dark:text-emerald-400`})},ee=e=>{co(e,{class:`w-3.5 h-3.5`})};J(k,e=>{U(r)?e(A):e(ee,-1)}),F(O);var te=V(O,2);Pa(z(te),{class:`w-3.5 h-3.5`}),F(te);var j=V(te,2);Do(z(j),{class:`w-3.5 h-3.5`}),F(j);var ne=V(j,4),M=z(ne),re=e=>{xo(e,{class:`w-3.5 h-3.5`})},ie=e=>{Wa(e,{class:`w-3.5 h-3.5`})};J(M,e=>{qo.value===`dark`?e(re):e(ie,-1)}),F(ne),F(y),F(f);var ae=V(f,2),oe=e=>{var n=Jc(),r=z(n),i=V(z(r),2),s=z(i);F(i);var c=V(i,2),d=z(c);Qi(d,e=>R(a,e),()=>U(a));var f=V(d,2);Qi(f,e=>R(o,e),()=>U(o)),F(c),F(r),F(n),H(()=>q(s,`This will clear all ${t.overridesCount??``} customisation${t.overridesCount===1?``:`s`}. - You can still undo this before saving.`)),W(`click`,n,e=>{e.target===e.currentTarget&&u()}),W(`keydown`,n,e=>{e.key===`Escape`&&(e.stopPropagation(),u()),e.key===`Tab`&&(e.preventDefault(),document.activeElement===U(a)?U(o)?.focus():U(a)?.focus())}),W(`click`,d,u),W(`click`,f,l),K(e,n)};J(ae,e=>{U(i)&&e(oe)}),H(e=>{q(g,`v${n??``}`),b.disabled=!t.hasPendingChanges||t.saveState===`saving`,Q(b,`title`,t.saveState===`error`?`Save failed — click to retry`:t.hasPendingChanges?`Save changes (Ctrl+S)`:`No unsaved changes`),X(b,1,e),E.disabled=!t.canUndo,D.disabled=!t.canRedo,j.disabled=t.overridesCount===0,Q(ne,`title`,qo.value===`dark`?`Switch to light mode`:`Switch to dark mode`),Q(ne,`aria-label`,qo.value===`dark`?`Switch to light mode`:`Switch to dark mode`),Q(ne,`aria-pressed`,qo.value===`dark`)},[()=>yi([`flex items-center gap-1.5 px-2 sm:px-3 py-1.5 rounded-lg text-[11px] font-bold transition-colors cursor-pointer shrink-0`,t.saveState===`error`?`bg-red-100 dark:bg-red-900/40 border border-red-500/30 text-red-700 dark:text-red-300`:t.saveState===`saved`?`bg-emerald-100 dark:bg-emerald-900/40 border border-emerald-500/30 text-emerald-700 dark:text-emerald-300`:t.hasPendingChanges?`bg-emerald-600 hover:bg-emerald-500 text-white shadow-sm shadow-emerald-600/30`:`bg-black/5 dark:bg-white/5 text-slate-500 disabled:opacity-40 disabled:pointer-events-none`].join(` `))]),W(`click`,b,function(...e){t.onSave?.apply(this,e)}),W(`click`,E,function(...e){t.onUndo?.apply(this,e)}),W(`click`,D,function(...e){t.onRedo?.apply(this,e)}),W(`click`,O,s),W(`click`,te,function(...e){t.onImport?.apply(this,e)}),W(`click`,j,c),W(`click`,ne,function(...e){Qo?.apply(this,e)}),K(e,d),We()}Br([`click`,`keydown`]);var Zc=G(` `),Qc=G(``),$c=G(``);function el(e,t){Ue(t,!0);let n=ra(t,`overridesByDomain`,19,()=>({})),r=[{id:`home`,icon:Fo,label:`Home`,group:`tokens`},{id:`colors`,icon:Ja,label:`Colors`,group:`tokens`},{id:`typography`,icon:ko,label:`Typography`,group:`tokens`},{id:`spacing`,icon:io,label:`Spacing`,group:`tokens`},{id:`layout`,icon:zo,label:`Layout`,group:`tokens`},{id:`borders`,icon:yo,label:`Borders`,group:`tokens`},{id:`shadows`,icon:Ia,label:`Shadows`,group:`tokens`},{id:`motion`,icon:No,label:`Motion`,group:`tokens`},{id:`effects`,icon:_o,label:`Effects`,group:`tokens`},{id:`macros`,icon:ma,label:`Macros`,group:`tokens`},{id:`misc`,icon:Xa,label:`Misc`,group:`tokens`},{id:`components`,icon:wa,label:`Components`,group:`tokens`},{id:`themes`,icon:Co,label:`Themes`,group:`tools`},{id:`wcag`,icon:uo,label:`WCAG`,group:`tools`},{id:`setup`,icon:Ka,label:`Install`,group:`tools`},{id:`cheatsheet`,icon:ga,label:`Classes`,group:`tools`}],i=I(()=>r.filter(e=>e.group===`tokens`)),a=I(()=>r.filter(e=>e.group===`tools`));var o=$c(),s=z(o);Y(s,21,()=>U(i),e=>e.id,(e,r)=>{let i=I(()=>t.activeId===U(r).id),a=I(()=>n()[U(r).id]||0),o=I(()=>U(r).icon);var s=Qc(),c=z(s);mi(c,()=>U(o),(e,t)=>{t(e,{class:`w-4 h-4`})});var l=V(c,2),u=e=>{var t=Zc(),n=z(t,!0);F(t),H(()=>q(n,U(a)>9?`+`:U(a))),K(e,t)};J(l,e=>{U(a)>0&&!U(i)&&e(u)});var d=V(l,2),f=z(d,!0);F(d),F(s),H(()=>{Q(s,`title`,U(r).label),X(s,1,`relative w-10 h-10 flex items-center justify-center rounded-xl transition-all cursor-pointer group ${U(i)?`bg-indigo-600 text-white shadow-lg shadow-indigo-600/30`:`text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-black/8 dark:hover:bg-white/8`}`),q(f,U(r).label)}),W(`click`,s,()=>t.onSelect(U(r).id)),K(e,s)}),F(s);var c=V(s,4);Y(c,21,()=>U(a),e=>e.id,(e,r)=>{let i=I(()=>t.activeId===U(r).id),a=I(()=>n()[U(r).id]||0),o=I(()=>U(r).icon);var s=Qc(),c=z(s);mi(c,()=>U(o),(e,t)=>{t(e,{class:`w-4 h-4`})});var l=V(c,2),u=e=>{var t=Zc(),n=z(t,!0);F(t),H(()=>q(n,U(a)>9?`+`:U(a))),K(e,t)};J(l,e=>{U(a)>0&&!U(i)&&e(u)});var d=V(l,2),f=z(d,!0);F(d),F(s),H(()=>{Q(s,`title`,U(r).label),X(s,1,`relative w-10 h-10 flex items-center justify-center rounded-xl transition-all cursor-pointer group ${U(i)?`bg-indigo-600 text-white shadow-lg shadow-indigo-600/30`:`text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-black/8 dark:hover:bg-white/8`}`),q(f,U(r).label)}),W(`click`,s,()=>t.onSelect(U(r).id)),K(e,s)}),F(c),F(o),K(e,o),We()}Br([`click`]);var tl=G(` `),nl=G(`
Live
`);function rl(e,t){var n=nl(),r=V(z(n),2),i=z(r),a=e=>{var n=tl(),r=z(n);F(n),H(()=>q(r,`${t.overridesCount??``} override${t.overridesCount===1?``:`s`} active`)),K(e,n)},o=e=>{K(e,Yr(`No overrides — showing framework defaults`))};J(i,e=>{t.overridesCount>0?e(a):e(o,-1)}),F(r);var s=V(r,4),c=z(s,!0);F(s),F(n),H(()=>q(c,t.domain)),K(e,n)}var il=null,al=null,ol=null,sl=null,cl=null,ll=null,ul=null,dl=new Map,fl=nn({value:0}),pl=0;function ml(e){if(il===e){gl();return}al&&al.remove(),sl&&sl.remove(),cl&&cl.remove(),il=e,al=null,ol=null,sl=null,cl=null,ll=null,ul=null,gl()}function hl(){return il?.documentElement.getAttribute(`data-theme`)===`dark`?`dark`:`light`}function gl(){pl+=1,fl.value=pl,dl.clear()}function _l(){if(!il||!il.body)return null;if(al&&al.ownerDocument===il&&al.isConnected)return al;let e=il.createElement(`div`);return e.setAttribute(`data-sf-probe`,``),e.style.cssText=`position:absolute;width:0;height:0;pointer-events:none;visibility:hidden;`,il.body.appendChild(e),al=e,e}function vl(e){let t=dl.get(e);if(t!==void 0)return t;let n=_l();if(!n||!il)return``;n.style.color=``,n.style.color=e;let r=il.defaultView?.getComputedStyle(n).color??``;return dl.set(e,r),r}function yl(e){return!il||!il.body?null:e===`light`?ll&&ll.isConnected?ll:(sl&&sl.remove(),sl=il.createElement(`div`),sl.setAttribute(`data-theme`,`light`),sl.style.cssText=`position:absolute;width:0;height:0;pointer-events:none;visibility:hidden;`,ll=il.createElement(`div`),sl.appendChild(ll),il.body.appendChild(sl),ll):ul&&ul.isConnected?ul:(cl&&cl.remove(),cl=il.createElement(`div`),cl.setAttribute(`data-theme`,`dark`),cl.style.cssText=`position:absolute;width:0;height:0;pointer-events:none;visibility:hidden;`,ul=il.createElement(`div`),cl.appendChild(ul),il.body.appendChild(cl),ul)}function bl(e,t){let n=`${t}\0${e}`,r=dl.get(n);if(r!==void 0)return r;let i=yl(t);if(!i||!il)return``;i.style.color=``,i.style.color=e;let a=il.defaultView?.getComputedStyle(i).color??``;return dl.set(n,a),a}function xl(){if(!il)return null;if(ol&&ol.canvas.ownerDocument===il)return ol;let e=il.createElement(`canvas`);return e.width=1,e.height=1,ol=e.getContext(`2d`,{willReadFrequently:!0}),ol}function Sl(e){let t=vl(e);if(!t)return null;let n=xl();if(!n)return null;n.clearRect(0,0,1,1),n.fillStyle=t,n.fillRect(0,0,1,1);try{let e=n.getImageData(0,0,1,1).data;return[e[0],e[1],e[2]]}catch{return null}}function Cl(e){let t=_l();return!t||!il?``:(t.style.background=``,t.style.background=e,il.defaultView?.getComputedStyle(t).backgroundImage??``)}var wl=nn({value:!1}),Tl=`/*! SLASHED v0.7.6 — slashed.full.css | MIT License | github.com/codeslash-dev/SLASHED */ +var e=Array.isArray,t=Array.prototype.indexOf,n=Array.prototype.includes,r=Array.from,i=Object.defineProperty,a=Object.getOwnPropertyDescriptor,o=Object.getOwnPropertyDescriptors,s=Object.prototype,c=Array.prototype,l=Object.getPrototypeOf,u=Object.isExtensible;function d(e){return typeof e==`function`}var f=()=>{};function p(e){for(var t=0;t{e=n,t=r}),resolve:e,reject:t}}function h(e,t){if(Array.isArray(e))return e;if(t===void 0||!(Symbol.iterator in e))return Array.from(e);let n=[];for(let r of e)if(n.push(r),n.length===t)break;return n}var g=1<<24,_=1024,v=2048,y=4096,b=8192,x=16384,S=32768,C=1<<25,w=65536,T=1<<19,E=1<<20,D=1<<25,O=65536,k=1<<21,A=1<<22,ee=1<<23,j=Symbol(`$state`),te=Symbol(`legacy props`),ne=Symbol(``),M=Symbol(`attributes`),re=Symbol(`class`),ie=Symbol(`style`),ae=Symbol(`text`),oe=Symbol(`form reset`),se=new class extends Error{name=`StaleReactionError`;message="The reaction that called `getAbortSignal()` was re-run or destroyed"},N=!!globalThis.document?.contentType&&globalThis.document.contentType.includes(`xml`);function ce(e){throw Error(`https://svelte.dev/e/lifecycle_outside_component`)}function le(){throw Error(`https://svelte.dev/e/async_derived_orphan`)}function ue(e,t,n){throw Error(`https://svelte.dev/e/each_key_duplicate`)}function de(e){throw Error(`https://svelte.dev/e/effect_in_teardown`)}function fe(){throw Error(`https://svelte.dev/e/effect_in_unowned_derived`)}function pe(e){throw Error(`https://svelte.dev/e/effect_orphan`)}function me(){throw Error(`https://svelte.dev/e/effect_update_depth_exceeded`)}function he(e){throw Error(`https://svelte.dev/e/props_invalid_value`)}function ge(){throw Error(`https://svelte.dev/e/state_descriptors_fixed`)}function _e(){throw Error(`https://svelte.dev/e/state_prototype_fixed`)}function ve(){throw Error(`https://svelte.dev/e/state_unsafe_mutation`)}function ye(){throw Error(`https://svelte.dev/e/svelte_boundary_reset_onerror`)}var be={},xe=Symbol(`uninitialized`),Se=`http://www.w3.org/1999/xhtml`,Ce=`http://www.w3.org/2000/svg`;function we(){console.warn(`https://svelte.dev/e/derived_inert`)}function Te(e){console.warn(`https://svelte.dev/e/hydration_mismatch`)}function Ee(){console.warn(`https://svelte.dev/e/select_multiple_invalid_value`)}function De(){console.warn(`https://svelte.dev/e/svelte_boundary_reset_noop`)}var P=!1;function Oe(e){P=e}var ke;function Ae(e){if(e===null)throw Te(),be;return ke=e}function je(){return Ae(pn(ke))}function F(e){if(P){if(pn(ke)!==null)throw Te(),be;ke=e}}function Me(e=1){if(P){for(var t=e,n=ke;t--;)n=pn(n);ke=n}}function Ne(e=!0){for(var t=0,n=ke;;){if(n.nodeType===8){var r=n.data;if(r===`]`){if(t===0)return n;--t}else(r===`[`||r===`[!`||r[0]===`[`&&!isNaN(Number(r.slice(1))))&&(t+=1)}var i=pn(n);e&&n.remove(),n=i}}function Pe(e){if(!e||e.nodeType!==8)throw Te(),be;return e.data}function Fe(e){return e===this.v}function Ie(e,t){return e==e?e!==t||typeof e==`object`&&!!e||typeof e==`function`:t==t}function Le(e){return!Ie(e,this.v)}var Re=!1,ze=!1,Be=null;function Ve(e){Be=e}function He(e){return Ke(`getContext`).get(e)}function Ue(e,t=!1,n){Be={p:Be,i:!1,c:null,e:null,s:e,x:null,r:tr,l:ze&&!t?{s:null,u:null,$:[]}:null}}function We(e){var t=Be,n=t.e;if(n!==null){t.e=null;for(var r of n)kn(r)}return e!==void 0&&(t.x=e),t.i=!0,Be=t.p,e??{}}function Ge(){return!ze||Be!==null&&Be.l===null}function Ke(e){return Be===null&&ce(e),Be.c??=new Map(qe(Be)||void 0)}function qe(e){let t=e.p;for(;t!==null;){let e=t.c;if(e!==null)return e;t=t.p}return null}var Je=[];function Ye(){var e=Je;Je=[],p(e)}function Xe(e){if(Je.length===0&&!jt){var t=Je;queueMicrotask(()=>{t===Je&&Ye()})}Je.push(e)}function Ze(){for(;Je.length>0;)Ye()}function Qe(e){var t=tr;if(t===null)return Qn.f|=ee,e;if(!(t.f&32768)&&!(t.f&4))throw e;$e(e,t)}function $e(e,t){if(!(t!==null&&t.f&16384)){for(;t!==null;){if(t.f&128){if(!(t.f&32768))throw e;try{t.b.error(e);return}catch(t){e=t}}t=t.parent}throw e}}var et=~(v|y|_);function tt(e,t){e.f=e.f&et|t}function nt(e){e.f&512||e.deps===null?tt(e,_):tt(e,y)}function rt(e){if(e!==null)for(let t of e)!(t.f&2)||!(t.f&65536)||(t.f^=O,rt(t.deps))}function it(e,t,n){e.f&2048?t.add(e):e.f&4096&&n.add(e),rt(e.deps),tt(e,_)}var at=!1,ot=!1;function st(e){var t=ot;try{return ot=!1,[e(),ot]}finally{ot=t}}function ct(e){let t=0,n=Xt(0),r;return()=>{En()&&(U(n),Nn(()=>(t===0&&(r=Cr(()=>e(()=>en(n)))),t+=1,()=>{Xe(()=>{--t,t===0&&(r?.(),r=void 0,en(n))})})))}}var lt=w|T;function ut(e,t,n,r){new dt(e,t,n,r)}var dt=class{parent;is_pending=!1;transform_error;#e;#t=P?ke:null;#n;#r;#i;#a=null;#o=null;#s=null;#c=null;#l=0;#u=0;#d=!1;#f=new Set;#p=new Set;#m=null;#h=ct(()=>(this.#m=Xt(this.#l),()=>{this.#m=null}));constructor(e,t,n,r){this.#e=e,this.#n=t,this.#r=e=>{var t=tr;t.b=this,t.f|=128,n(e)},this.parent=tr.b,this.transform_error=r??this.parent?.transform_error??(e=>e),this.#i=Pn(()=>{if(P){let e=this.#t;je();let t=e.data===`[!`;if(e.data.startsWith(`[?`)){let t=JSON.parse(e.data.slice(2));this.#_(t)}else t?this.#v():this.#g()}else this.#y()},lt),P&&(this.#e=ke)}#g(){try{this.#a=In(()=>this.#r(this.#e))}catch(e){this.error(e)}}#_(e){let t=this.#n.failed;t&&(this.#s=In(()=>{t(this.#e,()=>e,()=>()=>{})}))}#v(){let e=this.#n.pending;e&&(this.is_pending=!0,this.#o=In(()=>e(this.#e)),Xe(()=>{var e=this.#c=document.createDocumentFragment(),t=dn();e.append(t),this.#a=this.#x(()=>In(()=>this.#r(t))),this.#u===0&&(this.#e.before(e),this.#c=null,Un(this.#o,()=>{this.#o=null}),this.#b(Dt))}))}#y(){try{if(this.is_pending=this.has_pending_snippet(),this.#u=0,this.#l=0,this.#a=In(()=>{this.#r(this.#e)}),this.#u>0){var e=this.#c=document.createDocumentFragment();qn(this.#a,e);let t=this.#n.pending;this.#o=In(()=>t(this.#e))}else this.#b(Dt)}catch(e){this.error(e)}}#b(e){this.is_pending=!1,e.transfer_effects(this.#f,this.#p)}defer_effect(e){it(e,this.#f,this.#p)}is_rendered(){return!this.is_pending&&(!this.parent||this.parent.is_rendered())}has_pending_snippet(){return!!this.#n.pending}#x(e){var t=tr,n=Qn,r=Be;nr(this.#i),er(this.#i),Ve(this.#i.ctx);try{return Lt.ensure(),e()}catch(e){return Qe(e),null}finally{nr(t),er(n),Ve(r)}}#S(e,t){if(!this.has_pending_snippet()){this.parent&&this.parent.#S(e,t);return}this.#u+=e,this.#u===0&&(this.#b(t),this.#o&&Un(this.#o,()=>{this.#o=null}),this.#c&&=(this.#e.before(this.#c),null))}update_pending_count(e,t){this.#S(e,t),this.#l+=e,!(!this.#m||this.#d)&&(this.#d=!0,Xe(()=>{this.#d=!1,this.#m&&Qt(this.#m,this.#l)}))}get_effect_pending(){return this.#h(),U(this.#m)}error(e){if(!this.#n.onerror&&!this.#n.failed)throw e;Dt?.is_fork?(this.#a&&Dt.skip_effect(this.#a),this.#o&&Dt.skip_effect(this.#o),this.#s&&Dt.skip_effect(this.#s),Dt.oncommit(()=>{this.#C(e)})):this.#C(e)}#C(e){this.#a&&=(Bn(this.#a),null),this.#o&&=(Bn(this.#o),null),this.#s&&=(Bn(this.#s),null),P&&(Ae(this.#t),Me(),Ae(Ne()));var t=this.#n.onerror;let n=this.#n.failed;var r=!1,i=!1;let a=()=>{if(r){De();return}r=!0,i&&ye(),this.#s!==null&&Un(this.#s,()=>{this.#s=null}),this.#x(()=>{this.#y()})},o=e=>{try{i=!0,t?.(e,a),i=!1}catch(e){$e(e,this.#i&&this.#i.parent)}n&&(this.#s=this.#x(()=>{try{return In(()=>{var t=tr;t.b=this,t.f|=128,n(this.#e,()=>e,()=>a)})}catch(e){return $e(e,this.#i.parent),null}}))};Xe(()=>{var t;try{t=this.transform_error(e)}catch(e){$e(e,this.#i&&this.#i.parent);return}typeof t==`object`&&t&&typeof t.then==`function`?t.then(o,e=>$e(e,this.#i&&this.#i.parent)):o(t)})}};function ft(e,t,n,r){let i=Ge()?gt:yt;var a=e.filter(e=>!e.settled),o=t.map(i);if(n.length===0&&a.length===0){r(o);return}var s=tr,c=pt(),l=a.length===1?a[0].promise:a.length>1?Promise.all(a.map(e=>e.promise)):null;function u(e){if(!(s.f&16384)){c();try{r([...o,...e])}catch(e){$e(e,s)}mt()}}var d=ht();if(n.length===0){l.then(()=>u([])).finally(d);return}function f(){Promise.all(n.map(e=>vt(e))).then(u).catch(e=>$e(e,s)).finally(d)}l?l.then(()=>{c(),f(),mt()}):f()}function pt(){var e=tr,t=Qn,n=Be,r=Dt;return function(i=!0){nr(e),er(t),Ve(n),i&&!(e.f&16384)&&(r?.activate(),r?.apply())}}function mt(e=!0){nr(null),er(null),Ve(null),e&&Dt?.deactivate()}function ht(){var e=tr,t=e.b,n=Dt,r=!!t?.is_rendered();return t?.update_pending_count(1,n),n.increment(r,e),()=>{t?.update_pending_count(-1,n),n.decrement(r,e)}}function gt(e){var t=2|v;return tr!==null&&(tr.f|=T),{ctx:Be,deps:null,effects:null,equals:Fe,f:t,fn:e,reactions:null,rv:0,v:xe,wv:0,parent:tr,ac:null}}var _t=Symbol(`obsolete`);function vt(e,t,n){let r=tr;r===null&&le();var i=void 0,a=Xt(xe),o=!Qn,s=new Set;return Mn(()=>{var t=tr,n=m();i=n.promise;try{Promise.resolve(e()).then(n.resolve,e=>{e!==se&&n.reject(e)}).finally(mt)}catch(e){n.reject(e),mt()}var c=Dt;if(o){if(t.f&32768)var l=ht();if(r.b?.is_rendered())c.async_deriveds.get(t)?.reject(_t);else for(let e of s.values())e.reject(_t);s.add(n),c.async_deriveds.set(t,n)}let u=(e,t=void 0)=>{l?.(),s.delete(n),t!==_t&&(c.activate(),t?(a.f|=ee,Qt(a,t)):(a.f&8388608&&(a.f^=ee),Qt(a,e)),c.deactivate())};n.promise.then(u,e=>u(null,e||`unknown`))}),Dn(()=>{for(let e of s)e.reject(_t)}),new Promise(e=>{function t(n){function r(){n===i?e(a):t(i)}n.then(r,r)}t(i)})}function I(e){let t=gt(e);return Re||ir(t),t}function yt(e){let t=gt(e);return t.equals=Le,t}function bt(e){var t=e.effects;if(t!==null){e.effects=null;for(var n=0;nthis.schedule(e)){var n=this.#f.get(e);if(n){this.#f.delete(e);for(var r of n.d)tt(r,v),t(r);for(r of n.m)tt(r,y),t(r)}this.#p.add(e)}#g(){this.#e=!0,Ft++>1e3&&(this.#S(),zt());for(let e of this.#u)this.#d.delete(e),tt(e,v),this.schedule(e);for(let e of this.#d)tt(e,y),this.schedule(e);let t=this.#c;this.#c=[],this.apply();var n=Nt=[],r=[],i=Pt=[];for(let e of t)try{this.#_(e,n,r)}catch(t){throw Kt(e),this.#h()||this.discard(),t}if(Dt=null,i.length>0){var a=e.ensure();for(let e of i)a.schedule(e)}if(Nt=null,Pt=null,this.#h()){this.#b(r),this.#b(n);for(let[e,t]of this.#f)Gt(e,t);i.length>0&&Dt.#g();return}let o=this.#v();if(o){this.#b(r),this.#b(n),o.#y(this);return}this.#u.clear(),this.#d.clear();for(let e of this.#r)e(this);this.#r.clear(),Ot=this,Vt(r),Vt(n),Ot=null,this.#s?.resolve();var s=Dt;if(this.#a===0&&(this.#c.length===0||s!==null)&&(this.#S(),Re&&(this.#x(),Dt=s)),this.#c.length>0)if(s!==null){let e=s;e.#c.push(...this.#c.filter(t=>!e.#c.includes(t)))}else s=this;s!==null&&s.#g()}#_(e,t,n){e.f^=_;for(var r=e.first;r!==null;){var i=r.f,a=(i&96)!=0;if(!(a&&i&1024||i&8192||this.#f.has(r))&&r.fn!==null){a?r.f^=_:i&4?t.push(r):Re&&i&16777224?n.push(r):mr(r)&&(i&16&&this.#d.add(r),yr(r));var o=r.first;if(o!==null){r=o;continue}}for(;r!==null;){var s=r.next;if(s!==null){r=s;break}r=r.parent}}}#v(){for(var e=this.#t;e!==null;){if(!e.is_fork){for(let[t,[,n]]of this.current)if(e.current.has(t)&&!n)return e}e=e.#t}return null}#y(e){for(let[t,n]of e.current)!this.previous.has(t)&&e.previous.has(t)&&this.previous.set(t,e.previous.get(t)),this.current.set(t,n);for(let[t,n]of e.async_deriveds){let e=this.async_deriveds.get(t);e&&n.promise.then(e.resolve).catch(e.reject)}e.async_deriveds.clear(),this.transfer_effects(e.#u,e.#d);let t=e=>{var n=e.reactions;if(n!==null)for(let e of n){var r=e.f;if(r&2)t(e);else{var i=e;r&4194320&&!this.async_deriveds.has(i)&&(this.#d.delete(i),tt(i,v),this.schedule(i))}}};for(let e of this.current.keys())t(e);this.oncommit(()=>e.discard()),e.#S(),Dt=this,this.#g()}#b(e){for(var t=0;t!u.current.get(e)[1]);if(!(!u.#e||r.length===0)){var i=r.filter(e=>!this.current.has(e));if(i.length===0)e&&u.discard();else if(t.length>0){if(e)for(let e of this.#p)u.unskip_effect(e,e=>{e.f&4194320?u.schedule(e):u.#b([e])});u.activate();var a=new Set,o=new Map;for(var s of t)Ht(s,i,a,o);o=new Map;var c=[...u.current].filter(([e,t])=>{let n=this.current.get(e);return n?n[0]!==t[0]||n[1]!==t[1]:!0}).map(([e])=>e);if(c.length>0)for(let e of this.#l)!(e.f&155648)&&Ut(e,c,o)&&(e.f&4194320?(tt(e,v),u.schedule(e)):u.#u.add(e));if(u.#c.length>0&&!u.#m){u.apply();for(var l of u.#c)u.#_(l,[],[]);u.#c=[]}u.deactivate()}}}}increment(e,t){if(this.#a+=1,e){let e=this.#o.get(t)??0;this.#o.set(t,e+1)}}decrement(e,t){if(--this.#a,e){let e=this.#o.get(t)??0;e===1?this.#o.delete(t):this.#o.set(t,e-1)}this.#m||(this.#m=!0,Xe(()=>{this.#m=!1,this.linked&&this.flush()}))}transfer_effects(e,t){for(let t of e)this.#u.add(t);for(let e of t)this.#d.add(e);e.clear(),t.clear()}oncommit(e){this.#r.add(e)}ondiscard(e){this.#i.add(e)}settled(){return(this.#s??=m()).promise}static ensure(){if(Dt===null){let t=Dt=new e;!Mt&&!jt&&Xe(()=>{t.#e||t.flush()})}return Dt}apply(){if(!Re||!this.is_fork&&this.#t===null&&this.#n===null){kt=null;return}kt=new Map;for(let[e,[t]]of this.current)kt.set(e,t);for(let t=Tt;t!==null;t=t.#n)if(!(t===this||t.is_fork)){var e=!1;if(t.id0)){Jt.clear();for(let e of Bt){if(e.f&24576)continue;let t=[e],n=e.parent;for(;n!==null;)Bt.has(n)&&(Bt.delete(n),t.push(n)),n=n.parent;for(let e=t.length-1;e>=0;e--){let n=t[e];n.f&24576||yr(n)}}Bt.clear()}}Bt=null}}function Ht(e,t,n,r){if(!n.has(e)&&(n.add(e),e.reactions!==null))for(let i of e.reactions){let e=i.f;e&2?Ht(i,t,n,r):e&4194320&&!(e&2048)&&Ut(i,t,r)&&(tt(i,v),Wt(i))}}function Ut(e,t,r){let i=r.get(e);if(i!==void 0)return i;if(e.deps!==null)for(let i of e.deps){if(n.call(t,i))return!0;if(i.f&2&&Ut(i,t,r))return r.set(i,!0),!0}return r.set(e,!1),!1}function Wt(e){Dt.schedule(e)}function Gt(e,t){if(!(e.f&32&&e.f&1024)){e.f&2048?t.d.push(e):e.f&4096&&t.m.push(e),tt(e,_);for(var n=e.first;n!==null;)Gt(n,t),n=n.next}}function Kt(e){tt(e,_);for(var t=e.first;t!==null;)Kt(t),t=t.next}var qt=new Set,Jt=new Map,Yt=!1;function Xt(e,t){return{f:0,v:e,reactions:null,equals:Fe,rv:0,wv:0}}function L(e,t){let n=Xt(e,t);return ir(n),n}function Zt(e,t=!1,n=!0){let r=Xt(e);return t||(r.equals=Le),ze&&n&&Be!==null&&Be.l!==null&&(Be.l.s??=[]).push(r),r}function R(e,t,n=!1){return Qn!==null&&(!$n||Qn.f&131072)&&Ge()&&Qn.f&4325394&&(rr===null||!rr.has(e))&&ve(),Qt(e,n?nn(t):t,Pt)}function Qt(e,t,n=null){if(!e.equals(t)){Jt.set(e,Xn?t:e.v);var r=Lt.ensure();if(r.capture(e,t),e.f&2){let t=e;e.f&2048&&xt(t),kt===null&&nt(t)}e.wv=pr(),tn(e,v,n),Ge()&&tr!==null&&tr.f&1024&&!(tr.f&96)&&(sr===null?cr([e]):sr.push(e)),!r.is_fork&&qt.size>0&&!Yt&&$t()}return t}function $t(){Yt=!1;for(let e of qt){e.f&1024&&tt(e,y);let t;try{t=mr(e)}catch{t=!0}t&&yr(e)}qt.clear()}function en(e){R(e,e.v+1)}function tn(e,t,n){var r=e.reactions;if(r!==null)for(var i=Ge(),a=r.length,o=0;o{if(dr===d)return e();var t=Qn,n=dr;er(null),fr(d);var r=e();return er(t),fr(n),r};return i&&r.set(`length`,L(t.length,u)),new Proxy(t,{defineProperty(e,t,n){(!(`value`in n)||n.configurable===!1||n.enumerable===!1||n.writable===!1)&&ge();var i=r.get(t);return i===void 0?f(()=>{var e=L(n.value,u);return r.set(t,e),e}):R(i,n.value,!0),!0},deleteProperty(e,t){var n=r.get(t);if(n===void 0){if(t in e){let e=f(()=>L(xe,u));r.set(t,e),en(o)}}else R(n,xe),en(o);return!0},get(e,n,i){if(n===j)return t;var o=r.get(n),s=n in e;if(o===void 0&&(!s||a(e,n)?.writable)&&(o=f(()=>L(nn(s?e[n]:xe),u)),r.set(n,o)),o!==void 0){var c=U(o);return c===xe?void 0:c}return Reflect.get(e,n,i)},getOwnPropertyDescriptor(e,t){var n=Reflect.getOwnPropertyDescriptor(e,t);if(n&&`value`in n){var i=r.get(t);i&&(n.value=U(i))}else if(n===void 0){var a=r.get(t),o=a?.v;if(a!==void 0&&o!==xe)return{enumerable:!0,configurable:!0,value:o,writable:!0}}return n},has(e,t){if(t===j)return!0;var n=r.get(t),i=n!==void 0&&n.v!==xe||Reflect.has(e,t);return(n!==void 0||tr!==null&&(!i||a(e,t)?.writable))&&(n===void 0&&(n=f(()=>L(i?nn(e[t]):xe,u)),r.set(t,n)),U(n)===xe)?!1:i},set(e,t,n,s){var c=r.get(t),l=t in e;if(i&&t===`length`)for(var d=n;dL(xe,u)),r.set(d+``,p)):R(p,xe)}if(c===void 0)(!l||a(e,t)?.writable)&&(c=f(()=>L(void 0,u)),R(c,nn(n)),r.set(t,c));else{l=c.v!==xe;var m=f(()=>nn(n));R(c,m)}var h=Reflect.getOwnPropertyDescriptor(e,t);if(h?.set&&h.set.call(s,n),!l){if(i&&typeof t==`string`){var g=r.get(`length`),_=Number(t);Number.isInteger(_)&&_>=g.v&&R(g,_+1)}en(o)}return!0},ownKeys(e){U(o);var t=Reflect.ownKeys(e).filter(e=>{var t=r.get(e);return t===void 0||t.v!==xe});for(var[n,i]of r)i.v!==xe&&!(n in e)&&t.push(n);return t},setPrototypeOf(){_e()}})}function rn(e){try{if(typeof e==`object`&&e&&j in e)return e[j]}catch{}return e}function an(e,t){return Object.is(rn(e),rn(t))}var on,sn,cn,ln;function un(){if(on===void 0){on=window,sn=/Firefox/.test(navigator.userAgent);var e=Element.prototype,t=Node.prototype,n=Text.prototype;cn=a(t,`firstChild`).get,ln=a(t,`nextSibling`).get,u(e)&&(e[re]=void 0,e[M]=null,e[ie]=void 0,e.__e=void 0),u(n)&&(n[ae]=void 0)}}function dn(e=``){return document.createTextNode(e)}function fn(e){return cn.call(e)}function pn(e){return ln.call(e)}function z(e,t){if(!P)return fn(e);var n=fn(ke);if(n===null)n=ke.appendChild(dn());else if(t&&n.nodeType!==3){var r=dn();return n?.before(r),Ae(r),r}return t&&_n(n),Ae(n),n}function B(e,t=!1){if(!P){var n=fn(e);return n instanceof Comment&&n.data===``?pn(n):n}if(t){if(ke?.nodeType!==3){var r=dn();return ke?.before(r),Ae(r),r}_n(ke)}return ke}function V(e,t=1,n=!1){let r=P?ke:e;for(var i;t--;)i=r,r=pn(r);if(!P)return r;if(n){if(r?.nodeType!==3){var a=dn();return r===null?i?.after(a):r.before(a),Ae(a),a}_n(r)}return Ae(r),r}function mn(e){e.textContent=``}function hn(){return!Re||Bt!==null?!1:(tr.f&S)!==0}function gn(e,t,n){return t==null||t===`http://www.w3.org/1999/xhtml`?n?document.createElement(e,{is:n}):document.createElement(e):n?document.createElementNS(t,e,{is:n}):document.createElementNS(t,e)}function _n(e){if(e.nodeValue.length<65536)return;let t=e.nextSibling;for(;t!==null&&t.nodeType===3;)t.remove(),e.nodeValue+=t.nodeValue,t=e.nextSibling}function vn(e,t){if(t){let t=document.body;e.autofocus=!0,Xe(()=>{document.activeElement===t&&e.focus()})}}var yn=!1;function bn(){yn||(yn=!0,document.addEventListener(`reset`,e=>{Promise.resolve().then(()=>{if(!e.defaultPrevented)for(let t of e.target.elements)t[oe]?.()})},{capture:!0}))}function xn(e){var t=Qn,n=tr;er(null),nr(null);try{return e()}finally{er(t),nr(n)}}function Sn(e,t,n,r=n){e.addEventListener(t,()=>xn(n));let i=e[oe];i?e[oe]=()=>{i(),r(!0)}:e[oe]=()=>r(!0),bn()}function Cn(e){tr===null&&(Qn===null&&pe(e),fe()),Xn&&de(e)}function wn(e,t){var n=t.last;n===null?t.last=t.first=e:(n.next=e,e.prev=n,t.last=e)}function Tn(e,t){var n=tr;n!==null&&n.f&8192&&(e|=b);var r={ctx:Be,deps:null,nodes:null,f:e|v|512,first:null,fn:t,last:null,next:null,parent:n,b:n&&n.b,prev:null,teardown:null,wv:0,ac:null};Dt?.register_created_effect(r);var i=r;if(e&4)Nt===null?Lt.ensure().schedule(r):Nt.push(r);else if(t!==null){try{yr(r)}catch(e){throw Bn(r),e}i.deps===null&&i.teardown===null&&i.nodes===null&&i.first===i.last&&!(i.f&524288)&&(i=i.first,e&16&&e&65536&&i!==null&&(i.f|=w))}if(i!==null&&(i.parent=n,n!==null&&wn(i,n),Qn!==null&&Qn.f&2&&!(e&64))){var a=Qn;(a.effects??=[]).push(i)}return r}function En(){return Qn!==null&&!$n}function Dn(e){let t=Tn(8,null);return tt(t,_),t.teardown=e,t}function On(e){Cn(`$effect`);var t=tr.f;if(!Qn&&t&32&&Be!==null&&!Be.i){var n=Be;(n.e??=[]).push(e)}else return kn(e)}function kn(e){return Tn(4|E,e)}function An(e){Lt.ensure();let t=Tn(64|T,e);return(e={})=>new Promise(n=>{e.outro?Un(t,()=>{Bn(t),n(void 0)}):(Bn(t),n(void 0))})}function jn(e){return Tn(4,e)}function Mn(e){return Tn(A|T,e)}function Nn(e,t=0){return Tn(8|t,e)}function H(e,t=[],n=[],r=[]){ft(r,t,n,t=>{Tn(8,()=>{e(...t.map(U))})})}function Pn(e,t=0){return Tn(16|t,e)}function Fn(e,t=0){return Tn(g|t,e)}function In(e){return Tn(32|T,e)}function Ln(e){var t=e.teardown;if(t!==null){let e=Xn,n=Qn;Zn(!0),er(null);try{t.call(null)}finally{Zn(e),er(n)}}}function Rn(e,t=!1){var n=e.first;for(e.first=e.last=null;n!==null;){let e=n.ac;e!==null&&xn(()=>{e.abort(se)});var r=n.next;n.f&64?n.parent=null:Bn(n,t),n=r}}function zn(e){for(var t=e.first;t!==null;){var n=t.next;t.f&32||Bn(t),t=n}}function Bn(e,t=!0){var n=!1;(t||e.f&262144)&&e.nodes!==null&&e.nodes.end!==null&&(Vn(e.nodes.start,e.nodes.end),n=!0),e.f|=C,Rn(e,t&&!n),vr(e,0);var r=e.nodes&&e.nodes.t;if(r!==null)for(let e of r)e.stop();Ln(e),e.f^=C,e.f|=x;var i=e.parent;i!==null&&i.first!==null&&Hn(e),e.next=e.prev=e.teardown=e.ctx=e.deps=e.fn=e.nodes=e.ac=e.b=null}function Vn(e,t){for(;e!==null;){var n=e===t?null:pn(e);e.remove(),e=n}}function Hn(e){var t=e.parent,n=e.prev,r=e.next;n!==null&&(n.next=r),r!==null&&(r.prev=n),t!==null&&(t.first===e&&(t.first=r),t.last===e&&(t.last=n))}function Un(e,t,n=!0){var r=[];Wn(e,r,!0);var i=()=>{n&&Bn(e),t&&t()},a=r.length;if(a>0){var o=()=>--a||i();for(var s of r)s.out(o)}else i()}function Wn(e,t,n){if(!(e.f&8192)){e.f^=b;var r=e.nodes&&e.nodes.t;if(r!==null)for(let e of r)(e.is_global||n)&&t.push(e);for(var i=e.first;i!==null;){var a=i.next;if(!(i.f&64)){var o=(i.f&65536)!=0||(i.f&32)!=0&&(e.f&16)!=0;Wn(i,t,o?n:!1)}i=a}}}function Gn(e){Kn(e,!0)}function Kn(e,t){if(e.f&8192){e.f^=b,e.f&1024||(tt(e,v),Lt.ensure().schedule(e));for(var n=e.first;n!==null;){var r=n.next,i=(n.f&65536)!=0||(n.f&32)!=0;Kn(n,i?t:!1),n=r}var a=e.nodes&&e.nodes.t;if(a!==null)for(let e of a)(e.is_global||t)&&e.in()}}function qn(e,t){if(e.nodes)for(var n=e.nodes.start,r=e.nodes.end;n!==null;){var i=n===r?null:pn(n);t.append(n),n=i}}var Jn=null,Yn=!1,Xn=!1;function Zn(e){Xn=e}var Qn=null,$n=!1;function er(e){Qn=e}var tr=null;function nr(e){tr=e}var rr=null;function ir(e){Qn!==null&&(!Re||Qn.f&2)&&(rr??=new Set).add(e)}var ar=null,or=0,sr=null;function cr(e){sr=e}var lr=1,ur=0,dr=ur;function fr(e){dr=e}function pr(){return++lr}function mr(e){var t=e.f;if(t&2048)return!0;if(t&2&&(e.f&=~O),t&4096){for(var n=e.deps,r=n.length,i=0;ie.wv)return!0}t&512&&kt===null&&tt(e,_)}return!1}function hr(e,t,n=!0){var r=e.reactions;if(r!==null&&!(!Re&&rr!==null&&rr.has(e)))for(var i=0;i{e.ac.abort(se)}),e.ac=null);try{e.f|=k;var u=e.fn,d=u();e.f|=S;var f=e.deps,p=Dt?.is_fork;if(ar!==null){var m;if(p||vr(e,or),f!==null&&or>0)for(f.length=or+ar.length,m=0;m{requestAnimationFrame(()=>e()),setTimeout(()=>e())});await Promise.resolve(),Rt()}function U(e){var t=(e.f&2)!=0;if(Jn?.add(e),Qn!==null&&!$n&&!(tr!==null&&tr.f&16384)&&(rr===null||!rr.has(e))){var r=Qn.deps;if(Qn.f&2097152)e.rv{e.isConnected&&e.dispatchEvent(t)}))}function Rr(e,t,n,r={}){function i(e){if(r.capture||Hr.call(t,e),!e.cancelBubble)return xn(()=>n?.call(this,e))}return e.startsWith(`pointer`)||e.startsWith(`touch`)||e===`wheel`?Xe(()=>{t.addEventListener(e,i,r)}):t.addEventListener(e,i,r),i}function zr(e,t,n,r,i){var a={capture:r,passive:i},o=Rr(e,t,n,a);(t===document.body||t===window||t===document||t instanceof HTMLMediaElement)&&Dn(()=>{t.removeEventListener(e,o,a)})}function W(e,t,n){(t[Pr]??={})[e]=n}function Br(e){for(var t=0;t{throw e});throw p}}finally{e[Pr]=t,delete e.currentTarget,er(d),nr(f)}}}var Ur=globalThis?.window?.trustedTypes&&globalThis.window.trustedTypes.createPolicy(`svelte-trusted-html`,{createHTML:e=>e});function Wr(e){return Ur?.createHTML(e)??e}function Gr(e){var t=gn(`template`);return t.innerHTML=Wr(e.replaceAll(``,``)),t.content}function Kr(e,t){var n=tr;n.nodes===null&&(n.nodes={start:e,end:t,a:null,t:null})}function G(e,t){var n=(t&1)!=0,r=(t&2)!=0,i,a=!e.startsWith(``);return()=>{if(P)return Kr(ke,null),ke;i===void 0&&(i=Gr(a?e:``+e),n||(i=fn(i)));var t=r||sn?document.importNode(i,!0):i.cloneNode(!0);if(n){var o=fn(t),s=t.lastChild;Kr(o,s)}else Kr(t,t);return t}}function qr(e,t,n=`svg`){var r=!e.startsWith(``),i=(t&1)!=0,a=`<${n}>${r?e:``+e}`,o;return()=>{if(P)return Kr(ke,null),ke;if(!o){var e=fn(Gr(a));if(i)for(o=document.createDocumentFragment();fn(e);)o.appendChild(fn(e));else o=fn(e)}var t=o.cloneNode(!0);if(i){var n=fn(t),r=t.lastChild;Kr(n,r)}else Kr(t,t);return t}}function Jr(e,t){return qr(e,t,`svg`)}function Yr(e=``){if(!P){var t=dn(e+``);return Kr(t,t),t}var n=ke;return n.nodeType===3?_n(n):(n.before(n=dn()),Ae(n)),Kr(n,n),n}function Xr(){if(P)return Kr(ke,null),ke;var e=document.createDocumentFragment(),t=document.createComment(``),n=dn();return e.append(t,n),Kr(t,n),e}function K(e,t){if(P){var n=tr;(!(n.f&32768)||n.nodes.end===null)&&(n.nodes.end=ke),je();return}e!==null&&e.before(t)}function q(e,t){var n=t==null?``:typeof t==`object`?`${t}`:t;n!==(e[ae]??=e.nodeValue)&&(e[ae]=n,e.nodeValue=`${n}`)}function Zr(e,t){return $r(e,t)}var Qr=new Map;function $r(e,{target:t,anchor:n,props:i={},events:a,context:o,intro:s=!0,transformError:c}){un();var l=void 0,u=An(()=>{var s=n??t.appendChild(dn());ut(s,{pending:()=>{}},t=>{Ue({});var n=Be;if(o&&(n.c=o),a&&(i.$$events=a),P&&Kr(t,null),l=e(t,i)||{},P&&(tr.nodes.end=ke,ke===null||ke.nodeType!==8||ke.data!==`]`))throw Te(),be;We()},c);var u=new Set,d=e=>{for(var n=0;n{for(var e of u)for(let n of[t,document]){var r=Qr.get(n),i=r.get(e);--i==0?(n.removeEventListener(e,Hr),r.delete(e),r.size===0&&Qr.delete(n)):r.set(e,i)}Ir.delete(d),s!==n&&s.parentNode?.removeChild(s)}});return ei.set(l,u),l}var ei=new WeakMap,ti=class{anchor;#e=new Map;#t=new Map;#n=new Map;#r=new Set;#i=!0;constructor(e,t=!0){this.anchor=e,this.#i=t}#a=e=>{if(this.#e.has(e)){var t=this.#e.get(e),n=this.#t.get(t);if(n)Gn(n),this.#r.delete(t);else{var r=this.#n.get(t);r&&(Gn(r.effect),this.#t.set(t,r.effect),this.#n.delete(t),r.fragment.lastChild.remove(),this.anchor.before(r.fragment),n=r.effect)}for(let[t,n]of this.#e){if(this.#e.delete(t),t===e)break;let r=this.#n.get(n);r&&(Bn(r.effect),this.#n.delete(n))}for(let[e,r]of this.#t){if(e===t||this.#r.has(e))continue;let i=()=>{if(Array.from(this.#e.values()).includes(e)){var t=document.createDocumentFragment();qn(r,t),t.append(dn()),this.#n.set(e,{effect:r,fragment:t})}else Bn(r);this.#r.delete(e),this.#t.delete(e)};this.#i||!n?(this.#r.add(e),Un(r,i,!1)):i()}}};#o=e=>{this.#e.delete(e);let t=Array.from(this.#e.values());for(let[e,n]of this.#n)t.includes(e)||(Bn(n.effect),this.#n.delete(e))};ensure(e,t){var n=Dt,r=hn();if(t&&!this.#t.has(e)&&!this.#n.has(e))if(r){var i=document.createDocumentFragment(),a=dn();i.append(a),this.#n.set(e,{effect:In(()=>t(a)),fragment:i})}else this.#t.set(e,In(()=>t(this.anchor)));if(this.#e.set(n,e),r){for(let[t,r]of this.#t)t===e?n.unskip_effect(r):n.skip_effect(r);for(let[t,r]of this.#n)t===e?n.unskip_effect(r.effect):n.skip_effect(r.effect);n.oncommit(this.#a),n.ondiscard(this.#o)}else P&&(this.anchor=ke),this.#a(n)}};function J(e,t,n=!1){var r;P&&(r=ke,je());var i=new ti(e),a=n?w:0;function o(e,t){if(P){var n=Pe(r);if(e!==parseInt(n.substring(1))){var a=Ne();Ae(a),i.anchor=a,Oe(!1),i.ensure(e,t),Oe(!0);return}}i.ensure(e,t)}Pn(()=>{var e=!1;t((t,n=0)=>{e=!0,o(n,t)}),e||o(-1,null)},a)}var ni=Symbol(`NaN`);function ri(e,t,n){P&&je();var r=new ti(e),i=!Ge();Pn(()=>{var e=t();e!==e&&(e=ni),i&&typeof e==`object`&&e&&(e={}),r.ensure(e,n)})}function ii(e,t){return t}function ai(e,t,n){for(var i=[],a=t.length,o,s=t.length,c=0;c{if(o){if(o.pending.delete(n),o.done.add(n),o.pending.size===0){var t=e.outrogroups;oi(e,r(o.done)),t.delete(o),t.size===0&&(e.outrogroups=null)}}else--s},!1)}if(s===0){var l=i.length===0&&n!==null;if(l){var u=n,d=u.parentNode;mn(d),d.append(u),e.items.clear()}oi(e,t,!l)}else o={pending:new Set(t),done:new Set},(e.outrogroups??=new Set).add(o)}function oi(e,t,n=!0){var r;if(e.pending.size>0){r=new Set;for(let t of e.pending.values())for(let n of t)r.add(e.items.get(n).e)}for(var i=0;i{var t=i();return e(t)?t:t==null?[]:r(t)}),p,m=new Map,h=!0;function g(e){v.effect.f&16384||(v.pending.delete(e),v.fallback=d,li(v,p,c,n,a),d!==null&&(p.length===0?d.f&33554432?(d.f^=D,di(d,null,c)):Gn(d):Un(d,()=>{d=null})))}function _(e){v.pending.delete(e)}var v={effect:Pn(()=>{p=U(f);var e=p.length;let t=!1;P&&Pe(c)===`[!`!=(e===0)&&(c=Ne(),Ae(c),Oe(!1),t=!0);for(var r=new Set,u=Dt,v=hn(),y=0;ys(c)):(d=In(()=>s(si??=dn())),d.f|=D)),e>r.size&&ue(``,``,``),P&&e>0&&Ae(Ne()),!h)if(m.set(u,r),v){for(let[e,t]of l)r.has(e)||u.skip_effect(t.e);u.oncommit(g),u.ondiscard(_)}else g(u);t&&Oe(!0),U(f)}),flags:n,items:l,pending:m,outrogroups:null,fallback:d};h=!1,P&&(c=ke)}function ci(e){for(;e!==null&&!(e.f&32);)e=e.next;return e}function li(e,t,n,i,a){var o=(i&8)!=0,s=t.length,c=e.items,l=ci(e.effect.first),u,d=null,f,p=[],m=[],h,g,_,v;if(o)for(v=0;v0){var E=i&4&&s===0?n:null;if(o){for(v=0;v{if(f!==void 0)for(_ of f)_.nodes?.a?.apply()})}function ui(e,t,n,r,i,a,o,s){var c=o&1?o&16?Xt(n):Zt(n,!1,!1):null,l=o&2?Xt(i):null;return{v:c,i:l,e:In(()=>(a(t,c??n,l??i,s),()=>{e.delete(r)}))}}function di(e,t,n){if(e.nodes)for(var r=e.nodes.start,i=e.nodes.end,a=t&&!(t.f&33554432)?t.nodes.start:n;r!==null;){var o=pn(r);if(a.before(r),r===i)return;r=o}}function fi(e,t,n){t===null?e.effect.first=n:t.next=n,n===null?e.effect.last=t:n.prev=t}function pi(e,t,...n){var r=new ti(e);Pn(()=>{let e=t()??null;r.ensure(e,e&&(t=>e(t,...n)))},w)}function mi(e,t,n){var r;P&&(r=ke,je());var i=new ti(e);Pn(()=>{var e=t()??null;if(P&&Pe(r)===`[`!=(e!==null)){var a=Ne();Ae(a),i.anchor=a,Oe(!1),i.ensure(e,e&&(t=>n(t,e))),Oe(!0);return}i.ensure(e,e&&(t=>n(t,e)))},w)}function hi(e,t,n,r,i,a){let o=P;P&&je();var s=null;P&&ke.nodeType===1&&(s=ke,je());var c=P?ke:e,l=new ti(c,!1);Pn(()=>{let e=t()||null;var a=i?i():n||e===`svg`?Ce:void 0;if(e===null){l.ensure(null,null);return}return l.ensure(e,t=>{if(e){if(s=P?s:gn(e,a),Kr(s,s),r){var n=null;P&&Nr(e)&&s.append(n=document.createComment(``));var i=P?fn(s):s.appendChild(dn());P&&(i===null?Oe(!1):Ae(i)),r(s,i),n?.remove()}tr.nodes.end=s,t.before(s)}P&&Ae(t)}),()=>{}},w),Dn(()=>{}),o&&(Oe(!0),Ae(c))}function gi(e,t){var n=void 0,r;Fn(()=>{n!==(n=t())&&(r&&=(Bn(r),null),n&&(r=In(()=>{jn(()=>n(e))})))})}function _i(e){var t,n,r=``;if(typeof e==`string`||typeof e==`number`)r+=e;else if(typeof e==`object`)if(Array.isArray(e)){var i=e.length;for(t=0;t=0;){var s=o+a;(o===0||bi.includes(r[o-1]))&&(s===r.length||bi.includes(r[s]))?r=(o===0?``:r.substring(0,o))+r.substring(s+1):o=s}}return r===``?null:r}function Si(e,t=!1){var n=t?` !important;`:`;`,r=``;for(var i of Object.keys(e)){var a=e[i];a!=null&&a!==``&&(r+=` `+i+`: `+a+n)}return r}function Ci(e){return e[0]!==`-`||e[1]!==`-`?e.toLowerCase():e}function wi(e,t){if(t){var n=``,r,i;if(Array.isArray(t)?(r=t[0],i=t[1]):r=t,e){e=String(e).replaceAll(/\s*\/\*.*?\*\/\s*/g,``).trim();var a=!1,o=0,s=!1,c=[];r&&c.push(...Object.keys(r).map(Ci)),i&&c.push(...Object.keys(i).map(Ci));var l=0,u=-1;let t=e.length;for(var d=0;d{Ei(e,e.__value)});t.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[`value`]}),Dn(()=>{t.disconnect()})}function Oi(e,t,n=t){var r=new WeakSet,i=!0;Sn(e,`change`,t=>{var i=t?`[selected]`:`:checked`,a;if(e.multiple)a=[].map.call(e.querySelectorAll(i),ki);else{var o=e.querySelector(i)??e.querySelector(`option:not([disabled])`);a=o&&ki(o)}n(a),e.__value=a,Dt!==null&&r.add(Dt)}),jn(()=>{var a=t();if(e===document.activeElement){var o=Re?Ot:Dt;if(r.has(o))return}if(Ei(e,a,i),i&&a===void 0){var s=e.querySelector(`:checked`);s!==null&&(a=ki(s),n(a))}e.__value=a,i=!1}),Di(e)}function ki(e){return`__value`in e?e.__value:e.value}var Ai=Symbol(`class`),ji=Symbol(`style`),Mi=Symbol(`is custom element`),Ni=Symbol(`is html`),Pi=N?`link`:`LINK`,Fi=N?`input`:`INPUT`,Ii=N?`option`:`OPTION`,Li=N?`select`:`SELECT`,Ri=N?`progress`:`PROGRESS`;function zi(e){if(P){var t=!1,n=()=>{if(!t){if(t=!0,e.hasAttribute(`value`)){var n=e.value;Q(e,`value`,null),e.value=n}if(e.hasAttribute(`checked`)){var r=e.checked;Q(e,`checked`,null),e.checked=r}}};e[oe]=n,Xe(n),bn()}}function Bi(e,t){var n=Wi(e);n.value===(n.value=t??void 0)||e.value===t&&(t!==0||e.nodeName!==Ri)||(e.value=t??``)}function Vi(e,t){t?e.hasAttribute(`selected`)||e.setAttribute(`selected`,``):e.removeAttribute(`selected`)}function Q(e,t,n,r){var i=Wi(e);P&&(i[t]=e.getAttribute(t),t===`src`||t===`srcset`||t===`href`&&e.nodeName===Pi)||i[t]!==(i[t]=n)&&(t===`loading`&&(e[ne]=n),n==null?e.removeAttribute(t):typeof n!=`string`&&Ki(e).includes(t)?e[t]=n:e.setAttribute(t,n))}function Hi(e,t,n,r,i=!1,a=!1){if(P&&i&&e.nodeName===Fi){var o=e;(o.type===`checkbox`?`defaultChecked`:`defaultValue`)in n||zi(o)}var s=Wi(e),c=s[Mi],l=!s[Ni];let u=P&&c;u&&Oe(!1);var d=t||{},f=e.nodeName===Ii;for(var p in t)p in n||(n[p]=null);n.class?n.class=yi(n.class):(r||n[Ai])&&(n.class=null),n[ji]&&(n.style??=null);var m=Ki(e);if(e.nodeName===Fi&&`type`in n&&(`value`in n||`__value`in n)){var h=n.type;(h!==d.type||h===void 0&&e.hasAttribute(`type`))&&(d.type=h,Q(e,`type`,h,a))}for(let i in n){let o=n[i];if(f&&i===`value`&&o==null){e.value=e.__value=``,d[i]=o;continue}if(i===`class`){X(e,e.namespaceURI===`http://www.w3.org/1999/xhtml`,o,r,t?.[Ai],n[Ai]),d[i]=o,d[Ai]=n[Ai];continue}if(i===`style`){Z(e,o,t?.[ji],n[ji]),d[i]=o,d[ji]=n[ji];continue}var g=d[i];if(!(o===g&&!(o===void 0&&e.hasAttribute(i)))){d[i]=o;var _=i[0]+i[1];if(_!==`$$`)if(_===`on`){let t={},n=`$$`+i,r=i.slice(2);var v=Er(r);if(wr(r)&&(r=r.slice(0,-7),t.capture=!0),!v&&g){if(o!=null)continue;e.removeEventListener(r,d[n],t),d[n]=null}if(v)W(r,e,o),Br([r]);else if(o!=null){function a(e){d[i].call(this,e)}d[n]=Rr(r,e,a,t)}}else if(i===`style`)Q(e,i,o);else if(i===`autofocus`)vn(e,!!o);else if(!c&&(i===`__value`||i===`value`&&o!=null))e.value=e.__value=o;else if(i===`selected`&&f)Vi(e,o);else{var y=i;l||(y=kr(y));var b=y===`defaultValue`||y===`defaultChecked`;if(o==null&&!c&&!b)if(s[i]=null,y===`value`||y===`checked`){let n=e,r=t===void 0;if(y===`value`){let e=n.defaultValue;n.removeAttribute(y),n.defaultValue=e,n.value=n.__value=r?e:null}else{let e=n.defaultChecked;n.removeAttribute(y),n.defaultChecked=e,n.checked=r?e:!1}}else e.removeAttribute(i);else b||m.includes(y)&&(c||typeof o!=`string`)?(e[y]=o,y in s&&(s[y]=xe)):typeof o!=`function`&&Q(e,y,o,a)}}}return u&&Oe(!0),d}function Ui(e,t,n=[],r=[],i=[],a,o=!1,s=!1){ft(i,n,r,n=>{var r=void 0,i={},c=e.nodeName===Li,l=!1;if(Fn(()=>{var u=t(...n.map(U)),d=Hi(e,r,u,a,o,s);l&&c&&`value`in u&&Ei(e,u.value);for(let e of Object.getOwnPropertySymbols(i))u[e]||Bn(i[e]);for(let t of Object.getOwnPropertySymbols(u)){var f=u[t];t.description===`@attach`&&(!r||f!==r[t])&&(i[t]&&Bn(i[t]),i[t]=In(()=>gi(e,()=>f))),d[t]=f}r=d}),c){var u=e;jn(()=>{Ei(u,r.value,!0),Di(u)})}l=!0})}function Wi(e){return e[M]??={[Mi]:e.nodeName.includes(`-`),[Ni]:e.namespaceURI===Se}}var Gi=new Map;function Ki(e){var t=e.getAttribute(`is`)||e.nodeName,n=Gi.get(t);if(n)return n;Gi.set(t,n=[]);for(var r,i=e,a=Element.prototype;a!==i;){for(var s in r=o(i),r)r[s].set&&s!==`innerHTML`&&s!==`textContent`&&s!==`innerText`&&n.push(s);i=l(i)}return n}function qi(e,t,n=t){var r=new WeakSet;Sn(e,`input`,async i=>{var a=i?e.defaultValue:e.value;if(a=Yi(e)?Xi(a):a,n(a),Dt!==null&&r.add(Dt),await br(),a!==(a=t())){var o=e.selectionStart,s=e.selectionEnd,c=e.value.length;if(e.value=a??``,s!==null){var l=e.value.length;o===s&&s===c&&l>c?(e.selectionStart=l,e.selectionEnd=l):(e.selectionStart=o,e.selectionEnd=Math.min(s,l))}}}),(P&&e.defaultValue!==e.value||Cr(t)==null&&e.value)&&(n(Yi(e)?Xi(e.value):e.value),Dt!==null&&r.add(Dt)),Nn(()=>{var n=t();if(e===document.activeElement){var i=Re?Ot:Dt;if(r.has(i))return}Yi(e)&&n===Xi(e.value)||e.type===`date`&&!n&&!e.value||n!==e.value&&(e.value=n??``)})}function Ji(e,t,n=t){Sn(e,`change`,t=>{n(t?e.defaultChecked:e.checked)}),(P&&e.defaultChecked!==e.checked||Cr(t)==null)&&n(e.checked),Nn(()=>{e.checked=!!t()})}function Yi(e){var t=e.type;return t===`number`||t===`range`}function Xi(e){return e===``?null:+e}function Zi(e,t){return e===t||e?.[j]===t}function Qi(e={},t,n,r){var i=Be.r,a=tr;return jn(()=>{var o,s;return Nn(()=>{o=s,s=r?.()||[],Cr(()=>{Zi(n(...s),e)||(t(e,...s),o&&Zi(n(...o),e)&&t(null,...o))})}),()=>{let r=a;for(;r!==i&&r.parent!==null&&r.parent.f&33554432;)r=r.parent;let o=()=>{s&&Zi(n(...s),e)&&t(null,...s)},c=r.teardown;r.teardown=()=>{o(),c?.()}}}),e}var $i={get(e,t){if(!e.exclude.has(t))return e.props[t]},set(e,t){return!1},getOwnPropertyDescriptor(e,t){if(!e.exclude.has(t)&&t in e.props)return{enumerable:!0,configurable:!0,value:e.props[t]}},has(e,t){return e.exclude.has(t)?!1:t in e.props},ownKeys(e){return Reflect.ownKeys(e.props).filter(t=>!e.exclude.has(t))}};function ea(e,t,n){return new Proxy({props:e,exclude:t},$i)}var ta={get(e,t){let n=e.props.length;for(;n--;){let r=e.props[n];if(d(r)&&(r=r()),typeof r==`object`&&r&&t in r)return r[t]}},set(e,t,n){let r=e.props.length;for(;r--;){let i=e.props[r];d(i)&&(i=i());let o=a(i,t);if(o&&o.set)return o.set(n),!0}return!1},getOwnPropertyDescriptor(e,t){let n=e.props.length;for(;n--;){let r=e.props[n];if(d(r)&&(r=r()),typeof r==`object`&&r&&t in r){let e=a(r,t);return e&&!e.configurable&&(e.configurable=!0),e}}},has(e,t){if(t===j||t===te)return!1;for(let n of e.props)if(d(n)&&(n=n()),n!=null&&t in n)return!0;return!1},ownKeys(e){let t=[];for(let n of e.props)if(d(n)&&(n=n()),n){for(let e in n)t.includes(e)||t.push(e);for(let e of Object.getOwnPropertySymbols(n))t.includes(e)||t.push(e)}return t}};function na(...e){return new Proxy({props:e},ta)}function ra(e,t,n,r){var i=!ze||(n&2)!=0,o=(n&8)!=0,s=(n&16)!=0,c=r,l=!0,u=void 0,d=()=>s&&i?(u??=gt(r),U(u)):(l&&(l=!1,c=s?Cr(r):r),c);let f;if(o){var p=j in e||te in e;f=a(e,t)?.set??(p&&t in e?n=>e[t]=n:void 0)}var m,h=!1;o?[m,h]=st(()=>e[t]):m=e[t],m===void 0&&r!==void 0&&(m=d(),f&&(i&&he(t),f(m)));var g=i?()=>{var n=e[t];return n===void 0?d():(l=!0,n)}:()=>{var n=e[t];return n!==void 0&&(c=void 0),n===void 0?c:n};if(i&&!(n&4))return g;if(f){var _=e.$$legacy;return(function(e,t){return arguments.length>0?((!i||!t||_||h)&&f(t?g():e),e):g()})}var v=!1,y=(n&1?gt:yt)(()=>(v=!1,g()));o&&U(y);var b=tr;return(function(e,t){if(arguments.length>0){let n=t?U(y):i&&o?nn(e):e;return R(y,n),v=!0,c!==void 0&&(c=n),e}return Xn&&v||b.f&16384?y.v:U(y)})}function ia(e){Be===null&&ce(`onMount`),ze&&Be.l!==null?aa(Be).m.push(e):On(()=>{let t=Cr(e);if(typeof t==`function`)return t})}function aa(e){var t=e.l;return t.u??={a:[],b:[],m:[]}}typeof window<`u`&&((window.__svelte??={}).v??=new Set).add(`5`);var oa={xmlns:`http://www.w3.org/2000/svg`,width:24,height:24,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":2,"stroke-linecap":`round`,"stroke-linejoin":`round`},sa=e=>{for(let t in e)if(t.startsWith(`aria-`)||t===`role`||t===`title`)return!0;return!1},ca=Symbol(`lucide-context`),la=()=>He(ca),ua=new Set([`$$slots`,`$$events`,`$$legacy`,`name`,`color`,`size`,`strokeWidth`,`absoluteStrokeWidth`,`iconNode`,`children`]),da=Jr(``);function fa(e,t){Ue(t,!0);let n=la()??{},r=ra(t,`color`,19,()=>n.color??`currentColor`),i=ra(t,`size`,19,()=>n.size??24),a=ra(t,`strokeWidth`,19,()=>n.strokeWidth??2),o=ra(t,`absoluteStrokeWidth`,19,()=>n.absoluteStrokeWidth??!1),s=ra(t,`iconNode`,19,()=>[]),c=ea(t,ua),l=I(()=>o()?Number(a())*24/Number(i()):a());var u=da();Ui(u,e=>({...oa,...e,...c,width:i(),height:i(),stroke:r(),"stroke-width":U(l),class:[`lucide-icon lucide`,n.class,t.name&&`lucide-${t.name}`,t.class]}),[()=>!t.children&&!sa(c)&&{"aria-hidden":`true`}]);var d=z(u);Y(d,17,s,ii,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=Xr();hi(B(a),r,!0,(e,t)=>{Ui(e,()=>({...i()}))}),K(e,a)}),pi(V(d),()=>t.children??f),F(u),K(e,u),We()}var pa=new Set([`$$slots`,`$$events`,`$$legacy`]);function ma(e,t){let n=ea(t,pa),r=[[`path`,{d:`M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2`}],[`rect`,{x:`14`,y:`2`,width:`8`,height:`8`,rx:`1`}]];fa(e,na({name:`blocks`},()=>n,{get iconNode(){return r}}))}var ha=new Set([`$$slots`,`$$events`,`$$legacy`]);function ga(e,t){let n=ea(t,ha),r=[[`path`,{d:`M12 7v14`}],[`path`,{d:`M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z`}]];fa(e,na({name:`book-open`},()=>n,{get iconNode(){return r}}))}var _a=new Set([`$$slots`,`$$events`,`$$legacy`]);function va(e,t){let n=ea(t,_a),r=[[`path`,{d:`M20 6 9 17l-5-5`}]];fa(e,na({name:`check`},()=>n,{get iconNode(){return r}}))}var ya=new Set([`$$slots`,`$$events`,`$$legacy`]);function ba(e,t){let n=ea(t,ya),r=[[`path`,{d:`m9 18 6-6-6-6`}]];fa(e,na({name:`chevron-right`},()=>n,{get iconNode(){return r}}))}var xa=new Set([`$$slots`,`$$events`,`$$legacy`]);function Sa(e,t){let n=ea(t,xa),r=[[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`}],[`path`,{d:`M12 3v18`}]];fa(e,na({name:`columns-2`},()=>n,{get iconNode(){return r}}))}var Ca=new Set([`$$slots`,`$$events`,`$$legacy`]);function wa(e,t){let n=ea(t,Ca),r=[[`path`,{d:`M15.536 11.293a1 1 0 0 0 0 1.414l2.376 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z`}],[`path`,{d:`M2.297 11.293a1 1 0 0 0 0 1.414l2.377 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414L6.088 8.916a1 1 0 0 0-1.414 0z`}],[`path`,{d:`M8.916 17.912a1 1 0 0 0 0 1.415l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.415l-2.377-2.376a1 1 0 0 0-1.414 0z`}],[`path`,{d:`M8.916 4.674a1 1 0 0 0 0 1.414l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z`}]];fa(e,na({name:`component`},()=>n,{get iconNode(){return r}}))}var Ta=new Set([`$$slots`,`$$events`,`$$legacy`]);function Ea(e,t){let n=ea(t,Ta),r=[[`rect`,{width:`14`,height:`14`,x:`8`,y:`8`,rx:`2`,ry:`2`}],[`path`,{d:`M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2`}]];fa(e,na({name:`copy`},()=>n,{get iconNode(){return r}}))}var Da=new Set([`$$slots`,`$$events`,`$$legacy`]);function Oa(e,t){let n=ea(t,Da),r=[[`path`,{d:`M12 15V3`}],[`path`,{d:`M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4`}],[`path`,{d:`m7 10 5 5 5-5`}]];fa(e,na({name:`download`},()=>n,{get iconNode(){return r}}))}var ka=new Set([`$$slots`,`$$events`,`$$legacy`]);function Aa(e,t){let n=ea(t,ka),r=[[`path`,{d:`M15 3h6v6`}],[`path`,{d:`M10 14 21 3`}],[`path`,{d:`M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6`}]];fa(e,na({name:`external-link`},()=>n,{get iconNode(){return r}}))}var ja=new Set([`$$slots`,`$$events`,`$$legacy`]);function Ma(e,t){let n=ea(t,ja),r=[[`path`,{d:`M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0`}],[`circle`,{cx:`12`,cy:`12`,r:`3`}]];fa(e,na({name:`eye`},()=>n,{get iconNode(){return r}}))}var Na=new Set([`$$slots`,`$$events`,`$$legacy`]);function Pa(e,t){let n=ea(t,Na),r=[[`path`,{d:`m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2`}]];fa(e,na({name:`folder-open`},()=>n,{get iconNode(){return r}}))}var Fa=new Set([`$$slots`,`$$events`,`$$legacy`]);function Ia(e,t){let n=ea(t,Fa),r=[[`path`,{d:`M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z`}],[`path`,{d:`M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12`}],[`path`,{d:`M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17`}]];fa(e,na({name:`layers`},()=>n,{get iconNode(){return r}}))}var La=new Set([`$$slots`,`$$events`,`$$legacy`]);function Ra(e,t){let n=ea(t,La),r=[[`path`,{d:`M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71`}],[`path`,{d:`M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71`}]];fa(e,na({name:`link`},()=>n,{get iconNode(){return r}}))}var za=new Set([`$$slots`,`$$events`,`$$legacy`]);function Ba(e,t){let n=ea(t,za),r=[[`path`,{d:`M3 5h.01`}],[`path`,{d:`M3 12h.01`}],[`path`,{d:`M3 19h.01`}],[`path`,{d:`M8 5h13`}],[`path`,{d:`M8 12h13`}],[`path`,{d:`M8 19h13`}]];fa(e,na({name:`list`},()=>n,{get iconNode(){return r}}))}var Va=new Set([`$$slots`,`$$events`,`$$legacy`]);function Ha(e,t){let n=ea(t,Va),r=[[`rect`,{width:`20`,height:`14`,x:`2`,y:`3`,rx:`2`}],[`line`,{x1:`8`,x2:`16`,y1:`21`,y2:`21`}],[`line`,{x1:`12`,x2:`12`,y1:`17`,y2:`21`}]];fa(e,na({name:`monitor`},()=>n,{get iconNode(){return r}}))}var Ua=new Set([`$$slots`,`$$events`,`$$legacy`]);function Wa(e,t){let n=ea(t,Ua),r=[[`path`,{d:`M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401`}]];fa(e,na({name:`moon`},()=>n,{get iconNode(){return r}}))}var Ga=new Set([`$$slots`,`$$events`,`$$legacy`]);function Ka(e,t){let n=ea(t,Ga),r=[[`path`,{d:`M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z`}],[`path`,{d:`M12 22V12`}],[`polyline`,{points:`3.29 7 12 12 20.71 7`}],[`path`,{d:`m7.5 4.27 9 5.15`}]];fa(e,na({name:`package`},()=>n,{get iconNode(){return r}}))}var qa=new Set([`$$slots`,`$$events`,`$$legacy`]);function Ja(e,t){let n=ea(t,qa),r=[[`path`,{d:`M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z`}],[`circle`,{cx:`13.5`,cy:`6.5`,r:`.5`,fill:`currentColor`}],[`circle`,{cx:`17.5`,cy:`10.5`,r:`.5`,fill:`currentColor`}],[`circle`,{cx:`6.5`,cy:`12.5`,r:`.5`,fill:`currentColor`}],[`circle`,{cx:`8.5`,cy:`7.5`,r:`.5`,fill:`currentColor`}]];fa(e,na({name:`palette`},()=>n,{get iconNode(){return r}}))}var Ya=new Set([`$$slots`,`$$events`,`$$legacy`]);function Xa(e,t){let n=ea(t,Ya),r=[[`path`,{d:`M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z`}]];fa(e,na({name:`puzzle`},()=>n,{get iconNode(){return r}}))}var Za=new Set([`$$slots`,`$$events`,`$$legacy`]);function Qa(e,t){let n=ea(t,Za),r=[[`path`,{d:`m15 14 5-5-5-5`}],[`path`,{d:`M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13`}]];fa(e,na({name:`redo-2`},()=>n,{get iconNode(){return r}}))}var $a=new Set([`$$slots`,`$$events`,`$$legacy`]);function eo(e,t){let n=ea(t,$a),r=[[`path`,{d:`M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8`}],[`path`,{d:`M21 3v5h-5`}],[`path`,{d:`M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16`}],[`path`,{d:`M8 16H3v5`}]];fa(e,na({name:`refresh-cw`},()=>n,{get iconNode(){return r}}))}var to=new Set([`$$slots`,`$$events`,`$$legacy`]);function no(e,t){let n=ea(t,to),r=[[`path`,{d:`M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8`}],[`path`,{d:`M3 3v5h5`}]];fa(e,na({name:`rotate-ccw`},()=>n,{get iconNode(){return r}}))}var ro=new Set([`$$slots`,`$$events`,`$$legacy`]);function io(e,t){let n=ea(t,ro),r=[[`path`,{d:`M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z`}],[`path`,{d:`m14.5 12.5 2-2`}],[`path`,{d:`m11.5 9.5 2-2`}],[`path`,{d:`m8.5 6.5 2-2`}],[`path`,{d:`m17.5 15.5 2-2`}]];fa(e,na({name:`ruler`},()=>n,{get iconNode(){return r}}))}var ao=new Set([`$$slots`,`$$events`,`$$legacy`]);function oo(e,t){let n=ea(t,ao),r=[[`path`,{d:`M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z`}],[`path`,{d:`M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7`}],[`path`,{d:`M7 3v4a1 1 0 0 0 1 1h7`}]];fa(e,na({name:`save`},()=>n,{get iconNode(){return r}}))}var so=new Set([`$$slots`,`$$events`,`$$legacy`]);function co(e,t){let n=ea(t,so),r=[[`circle`,{cx:`18`,cy:`5`,r:`3`}],[`circle`,{cx:`6`,cy:`12`,r:`3`}],[`circle`,{cx:`18`,cy:`19`,r:`3`}],[`line`,{x1:`8.59`,x2:`15.42`,y1:`13.51`,y2:`17.49`}],[`line`,{x1:`15.41`,x2:`8.59`,y1:`6.51`,y2:`10.49`}]];fa(e,na({name:`share-2`},()=>n,{get iconNode(){return r}}))}var lo=new Set([`$$slots`,`$$events`,`$$legacy`]);function uo(e,t){let n=ea(t,lo),r=[[`path`,{d:`M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z`}],[`path`,{d:`m9 12 2 2 4-4`}]];fa(e,na({name:`shield-check`},()=>n,{get iconNode(){return r}}))}var fo=new Set([`$$slots`,`$$events`,`$$legacy`]);function po(e,t){let n=ea(t,fo),r=[[`path`,{d:`M10 5H3`}],[`path`,{d:`M12 19H3`}],[`path`,{d:`M14 3v4`}],[`path`,{d:`M16 17v4`}],[`path`,{d:`M21 12h-9`}],[`path`,{d:`M21 19h-5`}],[`path`,{d:`M21 5h-7`}],[`path`,{d:`M8 10v4`}],[`path`,{d:`M8 12H3`}]];fa(e,na({name:`sliders-horizontal`},()=>n,{get iconNode(){return r}}))}var mo=new Set([`$$slots`,`$$events`,`$$legacy`]);function ho(e,t){let n=ea(t,mo),r=[[`rect`,{width:`14`,height:`20`,x:`5`,y:`2`,rx:`2`,ry:`2`}],[`path`,{d:`M12 18h.01`}]];fa(e,na({name:`smartphone`},()=>n,{get iconNode(){return r}}))}var go=new Set([`$$slots`,`$$events`,`$$legacy`]);function _o(e,t){let n=ea(t,go),r=[[`path`,{d:`M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z`}],[`path`,{d:`M20 2v4`}],[`path`,{d:`M22 4h-4`}],[`circle`,{cx:`4`,cy:`20`,r:`2`}]];fa(e,na({name:`sparkles`},()=>n,{get iconNode(){return r}}))}var vo=new Set([`$$slots`,`$$events`,`$$legacy`]);function yo(e,t){let n=ea(t,vo),r=[[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`}]];fa(e,na({name:`square`},()=>n,{get iconNode(){return r}}))}var bo=new Set([`$$slots`,`$$events`,`$$legacy`]);function xo(e,t){let n=ea(t,bo),r=[[`circle`,{cx:`12`,cy:`12`,r:`4`}],[`path`,{d:`M12 2v2`}],[`path`,{d:`M12 20v2`}],[`path`,{d:`m4.93 4.93 1.41 1.41`}],[`path`,{d:`m17.66 17.66 1.41 1.41`}],[`path`,{d:`M2 12h2`}],[`path`,{d:`M20 12h2`}],[`path`,{d:`m6.34 17.66-1.41 1.41`}],[`path`,{d:`m19.07 4.93-1.41 1.41`}]];fa(e,na({name:`sun`},()=>n,{get iconNode(){return r}}))}var So=new Set([`$$slots`,`$$events`,`$$legacy`]);function Co(e,t){let n=ea(t,So),r=[[`path`,{d:`M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z`}],[`path`,{d:`M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7`}],[`path`,{d:`M 7 17h.01`}],[`path`,{d:`m11 8 2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6 7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8`}]];fa(e,na({name:`swatch-book`},()=>n,{get iconNode(){return r}}))}var wo=new Set([`$$slots`,`$$events`,`$$legacy`]);function To(e,t){let n=ea(t,wo),r=[[`rect`,{width:`16`,height:`20`,x:`4`,y:`2`,rx:`2`,ry:`2`}],[`line`,{x1:`12`,x2:`12.01`,y1:`18`,y2:`18`}]];fa(e,na({name:`tablet`},()=>n,{get iconNode(){return r}}))}var Eo=new Set([`$$slots`,`$$events`,`$$legacy`]);function Do(e,t){let n=ea(t,Eo),r=[[`path`,{d:`M10 11v6`}],[`path`,{d:`M14 11v6`}],[`path`,{d:`M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6`}],[`path`,{d:`M3 6h18`}],[`path`,{d:`M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2`}]];fa(e,na({name:`trash-2`},()=>n,{get iconNode(){return r}}))}var Oo=new Set([`$$slots`,`$$events`,`$$legacy`]);function ko(e,t){let n=ea(t,Oo),r=[[`path`,{d:`M12 4v16`}],[`path`,{d:`M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2`}],[`path`,{d:`M9 20h6`}]];fa(e,na({name:`type`},()=>n,{get iconNode(){return r}}))}var Ao=new Set([`$$slots`,`$$events`,`$$legacy`]);function jo(e,t){let n=ea(t,Ao),r=[[`path`,{d:`M9 14 4 9l5-5`}],[`path`,{d:`M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11`}]];fa(e,na({name:`undo-2`},()=>n,{get iconNode(){return r}}))}var Mo=new Set([`$$slots`,`$$events`,`$$legacy`]);function No(e,t){let n=ea(t,Mo),r=[[`path`,{d:`M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z`}]];fa(e,na({name:`zap`},()=>n,{get iconNode(){return r}}))}var Po=new Set([`$$slots`,`$$events`,`$$legacy`]);function Fo(e,t){let n=ea(t,Po),r=[[`path`,{d:`M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8`}],[`path`,{d:`M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z`}]];fa(e,na({name:`house`},()=>n,{get iconNode(){return r}}))}var Io=new Set([`$$slots`,`$$events`,`$$legacy`]);function Lo(e,t){let n=ea(t,Io),r=[[`path`,{d:`M21 12a9 9 0 1 1-6.219-8.56`}]];fa(e,na({name:`loader-circle`},()=>n,{get iconNode(){return r}}))}var Ro=new Set([`$$slots`,`$$events`,`$$legacy`]);function zo(e,t){let n=ea(t,Ro),r=[[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`}],[`path`,{d:`M3 9h18`}],[`path`,{d:`M9 21V9`}]];fa(e,na({name:`panels-top-left`},()=>n,{get iconNode(){return r}}))}var Bo=new Set([`$$slots`,`$$events`,`$$legacy`]);function Vo(e,t){let n=ea(t,Bo),r=[[`path`,{d:`m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3`}],[`path`,{d:`M12 9v4`}],[`path`,{d:`M12 17h.01`}]];fa(e,na({name:`triangle-alert`},()=>n,{get iconNode(){return r}}))}var Ho=`slashed-studio-theme`;function Uo(){try{let e=localStorage.getItem(Ho);return e===`light`||e===`dark`?e:null}catch{return null}}function Wo(){return typeof matchMedia<`u`&&matchMedia(`(prefers-color-scheme: dark)`).matches?`dark`:`light`}var Go=Uo(),Ko=Go===null,qo=nn({value:Go??Wo()}),Jo=null;function Yo(){Jo?.classList.toggle(`dark`,qo.value===`dark`)}function Xo(e){Jo=e,Yo()}function Zo(e){Ko=!1;try{localStorage.setItem(Ho,e)}catch{}qo.value=e,Yo()}function Qo(){Zo(qo.value===`dark`?`light`:`dark`)}function $o(e){Ko=!1,qo.value=e,Yo()}if(typeof matchMedia<`u`){let e=matchMedia(`(prefers-color-scheme: dark)`),t=e=>{Ko&&(qo.value=e.matches?`dark`:`light`,Yo())};typeof e.addEventListener==`function`?e.addEventListener(`change`,t):typeof e.addListener==`function`&&e.addListener(t)}var es=Uint8Array,ts=Uint16Array,ns=Int32Array,rs=new es([0,0,0,0,0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5,0,0,0,0]),is=new es([0,0,0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13,0,0]),as=new es([16,17,18,0,8,7,9,6,10,5,11,4,12,3,13,2,14,1,15]),os=function(e,t){for(var n=new ts(31),r=0;r<31;++r)n[r]=t+=1<>1|(ms&21845)<<1;hs=(hs&52428)>>2|(hs&13107)<<2,hs=(hs&61680)>>4|(hs&3855)<<4,ps[ms]=((hs&65280)>>8|(hs&255)<<8)>>1}for(var gs=(function(e,t,n){for(var r=e.length,i=0,a=new ts(t);i>c]=l}else for(s=new ts(r),i=0;i>15-e[i]);return s}),_s=new es(288),ms=0;ms<144;++ms)_s[ms]=8;for(var ms=144;ms<256;++ms)_s[ms]=9;for(var ms=256;ms<280;++ms)_s[ms]=7;for(var ms=280;ms<288;++ms)_s[ms]=8;for(var vs=new es(32),ms=0;ms<32;++ms)vs[ms]=5;var ys=gs(_s,9,0),bs=gs(_s,9,1),xs=gs(vs,5,0),Ss=gs(vs,5,1),Cs=function(e){for(var t=e[0],n=1;nt&&(t=e[n]);return t},ws=function(e,t,n){var r=t/8|0;return(e[r]|e[r+1]<<8)>>(t&7)&n},Ts=function(e,t){var n=t/8|0;return(e[n]|e[n+1]<<8|e[n+2]<<16)>>(t&7)},Es=function(e){return(e+7)/8|0},Ds=function(e,t,n){return(t==null||t<0)&&(t=0),(n==null||n>e.length)&&(n=e.length),new es(e.subarray(t,n))},Os=[`unexpected EOF`,`invalid block type`,`invalid length/literal`,`invalid distance`,`stream finished`,`no stream handler`,,`no callback`,`invalid UTF-8 data`,`extra field too long`,`date not in range 1980-2099`,`filename too long`,`stream finishing`,`invalid zip data`],ks=function(e,t,n){var r=Error(t||Os[e]);if(r.code=e,Error.captureStackTrace&&Error.captureStackTrace(r,ks),!n)throw r;return r},As=function(e,t,n,r){var i=e.length,a=r?r.length:0;if(!i||t.f&&!t.l)return n||new es(0);var o=!n,s=o||t.i!=2,c=t.i;o&&(n=new es(i*3));var l=function(e){var t=n.length;if(e>t){var r=new es(Math.max(t*2,e));r.set(n),n=r}},u=t.f||0,d=t.p||0,f=t.b||0,p=t.l,m=t.d,h=t.m,g=t.n,_=i*8;do{if(!p){u=ws(e,d,1);var v=ws(e,d+1,3);if(d+=3,!v){var y=Es(d)+4,b=e[y-4]|e[y-3]<<8,x=y+b;if(x>i){c&&ks(0);break}s&&l(f+b),n.set(e.subarray(y,x),f),t.b=f+=b,t.p=d=x*8,t.f=u;continue}else if(v==1)p=bs,m=Ss,h=9,g=5;else if(v==2){var S=ws(e,d,31)+257,C=ws(e,d+10,15)+4,w=S+ws(e,d+5,31)+1;d+=14;for(var T=new es(w),E=new es(19),D=0;D>4;if(y<16)T[D++]=y;else{var j=0,te=0;for(y==16?(te=3+ws(e,d,3),d+=2,j=T[D-1]):y==17?(te=3+ws(e,d,7),d+=3):y==18&&(te=11+ws(e,d,127),d+=7);te--;)T[D++]=j}}var ne=T.subarray(0,S),M=T.subarray(S);h=Cs(ne),g=Cs(M),p=gs(ne,h,1),m=gs(M,g,1)}else ks(1);if(d>_){c&&ks(0);break}}s&&l(f+131072);for(var re=(1<>4;if(d+=j&15,d>_){c&&ks(0);break}if(j||ks(2),oe<256)n[f++]=oe;else if(oe==256){ae=d,p=null;break}else{var se=oe-254;if(oe>264){var D=oe-257,N=rs[D];se=ws(e,d,(1<>4;ce||ks(3),d+=ce&15;var M=ds[le];if(le>3){var N=is[le];M+=Ts(e,d)&(1<_){c&&ks(0);break}s&&l(f+131072);var ue=f+se;if(f>8},Ms=function(e,t,n){n<<=t&7;var r=t/8|0;e[r]|=n,e[r+1]|=n>>8,e[r+2]|=n>>16},Ns=function(e,t){for(var n=[],r=0;rf&&(f=a[r].s);var p=new ts(f+1),m=Ps(n[u-1],p,0);if(m>t){var r=0,h=0,g=m-t,_=1<t)h+=_-(1<>=g;h>0;){var y=a[r].s;p[y]=0&&h;--r){var b=a[r].s;p[b]==t&&(--p[b],++h)}m=t}return{t:new es(p),l:m}},Ps=function(e,t,n){return e.s==-1?Math.max(Ps(e.l,t,n+1),Ps(e.r,t,n+1)):t[e.s]=n},Fs=function(e){for(var t=e.length;t&&!e[--t];);for(var n=new ts(++t),r=0,i=e[0],a=1,o=function(e){n[r++]=e},s=1;s<=t;++s)if(e[s]==i&&s!=t)++a;else{if(!i&&a>2){for(;a>138;a-=138)o(32754);a>2&&(o(a>10?a-11<<5|28690:a-3<<5|12305),a=0)}else if(a>3){for(o(i),--a;a>6;a-=6)o(8304);a>2&&(o(a-3<<5|8208),a=0)}for(;a--;)o(i);a=1,i=e[s]}return{c:n.subarray(0,r),n:t}},Is=function(e,t){for(var n=0,r=0;r>8,e[i+2]=e[i]^255,e[i+3]=e[i+1]^255;for(var a=0;a4&&!E[as[O-1]];--O);var k=l+5<<3,A=Is(i,_s)+Is(a,vs)+o,ee=Is(i,f)+Is(a,h)+o+14+3*O+Is(C,E)+2*C[16]+3*C[17]+7*C[18];if(c>=0&&k<=A&&k<=ee)return Ls(t,u,e.subarray(c,c+l));var j,te,ne,M;if(js(t,u,1+(ee15&&(js(t,u,oe[w]>>5&127),u+=oe[w]>>12)}}else j=ys,te=_s,ne=xs,M=vs;for(var w=0;w255){var se=N>>18&31;Ms(t,u,j[se+257]),u+=te[se+257],se>7&&(js(t,u,N>>23&31),u+=rs[se]);var ce=N&31;Ms(t,u,ne[ce]),u+=M[ce],ce>3&&(Ms(t,u,N>>5&8191),u+=is[ce])}else Ms(t,u,j[N]),u+=te[N]}return Ms(t,u,j[256]),u+te[256]},zs=new ns([65540,131080,131088,131104,262176,1048704,1048832,2114560,2117632]),Bs=new es(0),Vs=function(e,t,n,r,i,a){var o=a.z||e.length,s=new es(r+o+5*(1+Math.ceil(o/7e3))+i),c=s.subarray(r,s.length-i),l=a.l,u=(a.r||0)&7;if(t){u&&(c[0]=a.r>>3);for(var d=zs[t-1],f=d>>13,p=d&8191,m=(1<7e3||E>24576)&&(j>423||!l)){u=Rs(e,c,0,b,x,S,w,E,O,T-O,u),E=C=w=0,O=T;for(var te=0;te<286;++te)x[te]=0;for(var te=0;te<30;++te)S[te]=0}var ne=2,M=0,re=p,ie=A-ee&32767;if(j>2&&k==y(T-ie))for(var ae=Math.min(f,j)-1,oe=Math.min(32767,T),se=Math.min(258,j);ie<=oe&&--re&&A!=ee;){if(e[T+ne]==e[T+ne-ie]){for(var N=0;Nne){if(ne=N,M=ie,N>ae)break;for(var ce=Math.min(ie,N-2),le=0,te=0;tele&&(le=de,ee=ue)}}}A=ee,ee=h[A],ie+=A-ee&32767}if(M){b[E++]=268435456|ls[ne]<<18|fs[M];var fe=ls[ne]&31,pe=fs[M]&31;w+=rs[fe]+is[pe],++x[257+fe],++S[pe],D=T+ne,++C}else b[E++]=e[T],++x[e[T]]}}for(T=Math.max(T,D);T=o&&(c[u/8|0]=l,me=o),u=Ls(c,u+1,e.subarray(T,me))}a.i=o}return Ds(s,0,r+Es(u)+i)},Hs=function(e,t,n,r,i){if(!i&&(i={l:1},t.dictionary)){var a=t.dictionary.subarray(-32768),o=new es(a.length+e.length);o.set(a),o.set(e,a.length),e=o,i.w=a.length}return Vs(e,t.level==null?6:t.level,t.mem==null?i.l?Math.ceil(Math.max(8,Math.min(13,Math.log(e.length)))*1.5):20:12+t.mem,n,r,i)};function Us(e,t){return Hs(e,t||{},0,0)}function Ws(e,t){return As(e,{i:2},t&&t.out,t&&t.dictionary)}var Gs=typeof TextDecoder<`u`&&new TextDecoder;try{Gs.decode(Bs,{stream:!0})}catch{}var Ks={_meta:{generatedBy:`scripts/gen-token-registry.js`,nextId:771},tokens:[{id:0,name:`--sf-alternate-gap`},{id:1,name:`--sf-alternate-inner-gap`},{id:2,name:`--sf-animation-blink`},{id:3,name:`--sf-animation-color-pulse`},{id:4,name:`--sf-animation-delay-1`},{id:5,name:`--sf-animation-delay-2`},{id:6,name:`--sf-animation-delay-3`},{id:7,name:`--sf-animation-delay-4`},{id:8,name:`--sf-animation-delay-5`},{id:9,name:`--sf-animation-fade-in`},{id:10,name:`--sf-animation-fade-out`},{id:11,name:`--sf-animation-float`},{id:12,name:`--sf-animation-ping`},{id:13,name:`--sf-animation-scale-down`},{id:14,name:`--sf-animation-scale-up`},{id:15,name:`--sf-animation-shimmer`},{id:16,name:`--sf-animation-slide-in-down`},{id:17,name:`--sf-animation-slide-in-left`},{id:18,name:`--sf-animation-slide-in-right`},{id:19,name:`--sf-animation-slide-in-up`},{id:20,name:`--sf-animation-spin`},{id:21,name:`--sf-aspect`},{id:22,name:`--sf-bento-cols-default`},{id:23,name:`--sf-bento-gap`},{id:24,name:`--sf-bento-row-compact`},{id:25,name:`--sf-bento-row-default`},{id:26,name:`--sf-bento-row-tall`},{id:27,name:`--sf-blur`},{id:28,name:`--sf-body-color`},{id:29,name:`--sf-body-em-style`},{id:30,name:`--sf-body-font-family`},{id:31,name:`--sf-body-font-size`},{id:32,name:`--sf-body-font-weight`},{id:33,name:`--sf-body-line-height`},{id:34,name:`--sf-body-strong-weight`},{id:35,name:`--sf-body-text-wrap`},{id:36,name:`--sf-border`},{id:37,name:`--sf-border-scale`},{id:38,name:`--sf-border-strong`},{id:39,name:`--sf-border-style`},{id:40,name:`--sf-border-subtle`},{id:41,name:`--sf-border-width-1`},{id:42,name:`--sf-border-width-2`},{id:43,name:`--sf-border-width-3`},{id:44,name:`--sf-border-width-4`},{id:45,name:`--sf-border-width-hairline`},{id:46,name:`--sf-box-border-color`},{id:47,name:`--sf-box-border-width`},{id:48,name:`--sf-box-padding`},{id:49,name:`--sf-breakout-width`},{id:50,name:`--sf-button-padding-block`,removed:!0},{id:51,name:`--sf-button-padding-inline`,removed:!0},{id:52,name:`--sf-button-radius`,removed:!0},{id:53,name:`--sf-caret-color`},{id:54,name:`--sf-center-gutter`},{id:55,name:`--sf-center-max`},{id:56,name:`--sf-cluster-align`},{id:57,name:`--sf-cluster-gap`},{id:58,name:`--sf-cluster-justify`},{id:59,name:`--sf-code-font-size`},{id:60,name:`--sf-color-action`},{id:61,name:`--sf-color-action--active`},{id:62,name:`--sf-color-action--hover`},{id:63,name:`--sf-color-action-100`},{id:64,name:`--sf-color-action-200`},{id:65,name:`--sf-color-action-300`},{id:66,name:`--sf-color-action-400`},{id:67,name:`--sf-color-action-50`},{id:68,name:`--sf-color-action-500`},{id:69,name:`--sf-color-action-600`},{id:70,name:`--sf-color-action-700`},{id:71,name:`--sf-color-action-800`},{id:72,name:`--sf-color-action-900`},{id:73,name:`--sf-color-action-950`},{id:74,name:`--sf-color-action-a10`},{id:75,name:`--sf-color-action-a30`},{id:76,name:`--sf-color-action-a5`},{id:77,name:`--sf-color-action-a50`},{id:78,name:`--sf-color-action-a80`},{id:79,name:`--sf-color-action-source-dark`},{id:80,name:`--sf-color-action-darker`},{id:81,name:`--sf-color-action-ghost`,removed:!0},{id:82,name:`--sf-color-action-source-light`},{id:83,name:`--sf-color-action-lighter`},{id:84,name:`--sf-color-action-muted`},{id:85,name:`--sf-color-action-subtle`},{id:86,name:`--sf-color-action-superdark`},{id:87,name:`--sf-color-action-superlight`},{id:88,name:`--sf-color-action-xdark`},{id:89,name:`--sf-color-action-xlight`},{id:90,name:`--sf-color-base`},{id:91,name:`--sf-color-base--active`},{id:92,name:`--sf-color-base--hover`},{id:93,name:`--sf-color-base-100`},{id:94,name:`--sf-color-base-200`},{id:95,name:`--sf-color-base-300`},{id:96,name:`--sf-color-base-400`},{id:97,name:`--sf-color-base-50`},{id:98,name:`--sf-color-base-500`},{id:99,name:`--sf-color-base-600`},{id:100,name:`--sf-color-base-700`},{id:101,name:`--sf-color-base-800`},{id:102,name:`--sf-color-base-900`},{id:103,name:`--sf-color-base-950`},{id:104,name:`--sf-color-base-a10`},{id:105,name:`--sf-color-base-a30`},{id:106,name:`--sf-color-base-a5`},{id:107,name:`--sf-color-base-a50`},{id:108,name:`--sf-color-base-a80`},{id:109,name:`--sf-color-base-source-dark`},{id:110,name:`--sf-color-base-darker`,removed:!0},{id:111,name:`--sf-color-base-ghost`,removed:!0},{id:112,name:`--sf-color-base-source-light`},{id:113,name:`--sf-color-base-lighter`,removed:!0},{id:114,name:`--sf-color-base-muted`},{id:115,name:`--sf-color-base-subtle`},{id:116,name:`--sf-color-base-superdark`,removed:!0},{id:117,name:`--sf-color-base-superlight`,removed:!0},{id:118,name:`--sf-color-base-xdark`,removed:!0},{id:119,name:`--sf-color-base-xlight`,removed:!0},{id:120,name:`--sf-color-bg`},{id:121,name:`--sf-color-bg--active`},{id:122,name:`--sf-color-bg--disabled`},{id:123,name:`--sf-color-bg--focus`},{id:124,name:`--sf-color-bg--hover`},{id:125,name:`--sf-color-bg--selected`},{id:126,name:`--sf-color-black`},{id:127,name:`--sf-color-border`},{id:128,name:`--sf-color-border--disabled`},{id:129,name:`--sf-color-border--focus`},{id:130,name:`--sf-color-border--strong`},{id:131,name:`--sf-color-border--subtle`},{id:132,name:`--sf-color-border--translucent`},{id:133,name:`--sf-color-code-bg`},{id:134,name:`--sf-color-code-text`},{id:135,name:`--sf-color-danger`},{id:136,name:`--sf-color-danger-source-dark`},{id:137,name:`--sf-color-danger-source-light`},{id:138,name:`--sf-color-danger-muted`},{id:139,name:`--sf-color-danger-strong`},{id:140,name:`--sf-color-danger-subtle`},{id:141,name:`--sf-color-dim`},{id:142,name:`--sf-color-error`,removed:!0},{id:143,name:`--sf-color-error-dark`,removed:!0},{id:144,name:`--sf-color-error-light`,removed:!0},{id:145,name:`--sf-color-error-muted`,removed:!0},{id:146,name:`--sf-color-error-strong`,removed:!0},{id:147,name:`--sf-color-error-subtle`,removed:!0},{id:148,name:`--sf-color-heading`},{id:149,name:`--sf-color-info`},{id:150,name:`--sf-color-info-source-dark`},{id:151,name:`--sf-color-info-source-light`},{id:152,name:`--sf-color-info-muted`},{id:153,name:`--sf-color-info-strong`},{id:154,name:`--sf-color-info-subtle`},{id:155,name:`--sf-color-inset`},{id:156,name:`--sf-color-inverse`},{id:157,name:`--sf-color-link`},{id:158,name:`--sf-color-link--active`},{id:159,name:`--sf-color-link--disabled`},{id:160,name:`--sf-color-link--hover`},{id:161,name:`--sf-color-link--underline`},{id:162,name:`--sf-color-link--visited`},{id:163,name:`--sf-color-mark-bg`},{id:164,name:`--sf-color-mark-text`},{id:165,name:`--sf-color-neutral`},{id:166,name:`--sf-color-neutral--active`},{id:167,name:`--sf-color-neutral--hover`},{id:168,name:`--sf-color-neutral-100`},{id:169,name:`--sf-color-neutral-200`},{id:170,name:`--sf-color-neutral-300`},{id:171,name:`--sf-color-neutral-400`},{id:172,name:`--sf-color-neutral-50`},{id:173,name:`--sf-color-neutral-500`},{id:174,name:`--sf-color-neutral-600`},{id:175,name:`--sf-color-neutral-700`},{id:176,name:`--sf-color-neutral-800`},{id:177,name:`--sf-color-neutral-900`},{id:178,name:`--sf-color-neutral-950`},{id:179,name:`--sf-color-neutral-a10`},{id:180,name:`--sf-color-neutral-a30`},{id:181,name:`--sf-color-neutral-a5`},{id:182,name:`--sf-color-neutral-a50`},{id:183,name:`--sf-color-neutral-a80`},{id:184,name:`--sf-color-neutral-source-dark`},{id:185,name:`--sf-color-neutral-darker`},{id:186,name:`--sf-color-neutral-ghost`,removed:!0},{id:187,name:`--sf-color-neutral-source-light`},{id:188,name:`--sf-color-neutral-lighter`},{id:189,name:`--sf-color-neutral-muted`},{id:190,name:`--sf-color-neutral-subtle`},{id:191,name:`--sf-color-neutral-superdark`},{id:192,name:`--sf-color-neutral-superlight`},{id:193,name:`--sf-color-neutral-xdark`},{id:194,name:`--sf-color-neutral-xlight`},{id:195,name:`--sf-color-overlay`},{id:196,name:`--sf-color-primary`},{id:197,name:`--sf-color-primary--active`},{id:198,name:`--sf-color-primary--hover`},{id:199,name:`--sf-color-primary-100`},{id:200,name:`--sf-color-primary-200`},{id:201,name:`--sf-color-primary-300`},{id:202,name:`--sf-color-primary-400`},{id:203,name:`--sf-color-primary-50`},{id:204,name:`--sf-color-primary-500`},{id:205,name:`--sf-color-primary-600`},{id:206,name:`--sf-color-primary-700`},{id:207,name:`--sf-color-primary-800`},{id:208,name:`--sf-color-primary-900`},{id:209,name:`--sf-color-primary-950`},{id:210,name:`--sf-color-primary-a10`},{id:211,name:`--sf-color-primary-a30`},{id:212,name:`--sf-color-primary-a5`},{id:213,name:`--sf-color-primary-a50`},{id:214,name:`--sf-color-primary-a80`},{id:215,name:`--sf-color-primary-source-dark`},{id:216,name:`--sf-color-primary-darker`},{id:217,name:`--sf-color-primary-ghost`,removed:!0},{id:218,name:`--sf-color-primary-source-light`},{id:219,name:`--sf-color-primary-lighter`},{id:220,name:`--sf-color-primary-muted`},{id:221,name:`--sf-color-primary-subtle`},{id:222,name:`--sf-color-primary-superdark`},{id:223,name:`--sf-color-primary-superlight`},{id:224,name:`--sf-color-primary-xdark`},{id:225,name:`--sf-color-primary-xlight`},{id:226,name:`--sf-color-raised`},{id:227,name:`--sf-color-scheme`},{id:228,name:`--sf-color-secondary`},{id:229,name:`--sf-color-secondary--active`},{id:230,name:`--sf-color-secondary--hover`},{id:231,name:`--sf-color-secondary-100`},{id:232,name:`--sf-color-secondary-200`},{id:233,name:`--sf-color-secondary-300`},{id:234,name:`--sf-color-secondary-400`},{id:235,name:`--sf-color-secondary-50`},{id:236,name:`--sf-color-secondary-500`},{id:237,name:`--sf-color-secondary-600`},{id:238,name:`--sf-color-secondary-700`},{id:239,name:`--sf-color-secondary-800`},{id:240,name:`--sf-color-secondary-900`},{id:241,name:`--sf-color-secondary-950`},{id:242,name:`--sf-color-secondary-a10`},{id:243,name:`--sf-color-secondary-a30`},{id:244,name:`--sf-color-secondary-a5`},{id:245,name:`--sf-color-secondary-a50`},{id:246,name:`--sf-color-secondary-a80`},{id:247,name:`--sf-color-secondary-source-dark`},{id:248,name:`--sf-color-secondary-darker`},{id:249,name:`--sf-color-secondary-ghost`,removed:!0},{id:250,name:`--sf-color-secondary-source-light`},{id:251,name:`--sf-color-secondary-lighter`},{id:252,name:`--sf-color-secondary-muted`},{id:253,name:`--sf-color-secondary-subtle`},{id:254,name:`--sf-color-secondary-superdark`},{id:255,name:`--sf-color-secondary-superlight`},{id:256,name:`--sf-color-secondary-xdark`},{id:257,name:`--sf-color-secondary-xlight`},{id:258,name:`--sf-color-selection-bg`},{id:259,name:`--sf-color-selection-text`},{id:260,name:`--sf-color-success`},{id:261,name:`--sf-color-success-source-dark`},{id:262,name:`--sf-color-success-source-light`},{id:263,name:`--sf-color-success-muted`},{id:264,name:`--sf-color-success-strong`},{id:265,name:`--sf-color-success-subtle`},{id:266,name:`--sf-color-surface`},{id:267,name:`--sf-color-tertiary`},{id:268,name:`--sf-color-tertiary--active`},{id:269,name:`--sf-color-tertiary--hover`},{id:270,name:`--sf-color-tertiary-100`},{id:271,name:`--sf-color-tertiary-200`},{id:272,name:`--sf-color-tertiary-300`},{id:273,name:`--sf-color-tertiary-400`},{id:274,name:`--sf-color-tertiary-50`},{id:275,name:`--sf-color-tertiary-500`},{id:276,name:`--sf-color-tertiary-600`},{id:277,name:`--sf-color-tertiary-700`},{id:278,name:`--sf-color-tertiary-800`},{id:279,name:`--sf-color-tertiary-900`},{id:280,name:`--sf-color-tertiary-950`},{id:281,name:`--sf-color-tertiary-a10`},{id:282,name:`--sf-color-tertiary-a30`},{id:283,name:`--sf-color-tertiary-a5`},{id:284,name:`--sf-color-tertiary-a50`},{id:285,name:`--sf-color-tertiary-a80`},{id:286,name:`--sf-color-tertiary-source-dark`},{id:287,name:`--sf-color-tertiary-darker`},{id:288,name:`--sf-color-tertiary-ghost`,removed:!0},{id:289,name:`--sf-color-tertiary-source-light`},{id:290,name:`--sf-color-tertiary-lighter`},{id:291,name:`--sf-color-tertiary-muted`},{id:292,name:`--sf-color-tertiary-subtle`},{id:293,name:`--sf-color-tertiary-superdark`},{id:294,name:`--sf-color-tertiary-superlight`},{id:295,name:`--sf-color-tertiary-xdark`},{id:296,name:`--sf-color-tertiary-xlight`},{id:297,name:`--sf-color-text`},{id:298,name:`--sf-color-text--disabled`},{id:299,name:`--sf-color-text--inverse`},{id:300,name:`--sf-color-text--muted`},{id:301,name:`--sf-color-text--on-action`},{id:302,name:`--sf-color-text--on-base`},{id:303,name:`--sf-color-text--on-danger`},{id:304,name:`--sf-color-text--on-error`,removed:!0},{id:305,name:`--sf-color-text--on-info`},{id:306,name:`--sf-color-text--on-inverse`},{id:307,name:`--sf-color-text--on-neutral`},{id:308,name:`--sf-color-text--on-primary`},{id:309,name:`--sf-color-text--on-secondary`},{id:310,name:`--sf-color-text--on-success`},{id:311,name:`--sf-color-text--on-tertiary`},{id:312,name:`--sf-color-text--on-warning`},{id:313,name:`--sf-color-text--placeholder`},{id:314,name:`--sf-color-text--secondary`},{id:315,name:`--sf-color-warning`},{id:316,name:`--sf-color-warning-source-dark`},{id:317,name:`--sf-color-warning-source-light`},{id:318,name:`--sf-color-warning-muted`},{id:319,name:`--sf-color-warning-strong`},{id:320,name:`--sf-color-warning-subtle`},{id:321,name:`--sf-color-white`},{id:322,name:`--sf-component-pad`},{id:323,name:`--sf-container-default`},{id:324,name:`--sf-container-full`},{id:325,name:`--sf-container-narrow`},{id:326,name:`--sf-container-prose`},{id:327,name:`--sf-container-wide`},{id:328,name:`--sf-content-gap`},{id:329,name:`--sf-content-intrinsic-size`},{id:330,name:`--sf-content-width`},{id:331,name:`--sf-contrast-bias`},{id:332,name:`--sf-contrast-threshold`},{id:333,name:`--sf-cover-min-height`},{id:334,name:`--sf-cover-padding`},{id:335,name:`--sf-current-font-weight`},{id:336,name:`--sf-display-l-line-height`},{id:337,name:`--sf-display-m-line-height`},{id:338,name:`--sf-display-s-line-height`},{id:339,name:`--sf-divider-color`},{id:340,name:`--sf-divider-gap`},{id:341,name:`--sf-divider-style`},{id:342,name:`--sf-divider-width`},{id:343,name:`--sf-drop-shadow-l`},{id:344,name:`--sf-drop-shadow-m`},{id:345,name:`--sf-drop-shadow-s`},{id:346,name:`--sf-duration-fast`},{id:347,name:`--sf-duration-instant`},{id:348,name:`--sf-duration-none`},{id:349,name:`--sf-duration-normal`},{id:350,name:`--sf-duration-slow`},{id:351,name:`--sf-duration-slower`},{id:352,name:`--sf-ease-bounce`},{id:353,name:`--sf-ease-elastic`},{id:354,name:`--sf-ease-in`},{id:355,name:`--sf-ease-in-out`},{id:356,name:`--sf-ease-linear`},{id:357,name:`--sf-ease-out`},{id:358,name:`--sf-ease-overshoot`},{id:359,name:`--sf-ease-spring`},{id:360,name:`--sf-equal-gap`},{id:361,name:`--sf-equal-min-col`},{id:362,name:`--sf-equal-min-col-2`,removed:!0},{id:363,name:`--sf-equal-min-col-3`,removed:!0},{id:364,name:`--sf-equal-min-col-4`,removed:!0},{id:365,name:`--sf-equal-min-col-6`,removed:!0},{id:366,name:`--sf-field-block`},{id:367,name:`--sf-field-padding-block`},{id:368,name:`--sf-field-padding-inline`},{id:369,name:`--sf-field-radius`},{id:370,name:`--sf-field-required-marker`},{id:371,name:`--sf-flow-space`},{id:372,name:`--sf-fluid-max-vw`},{id:373,name:`--sf-fluid-min-vw`},{id:374,name:`--sf-focus-ring-color`},{id:375,name:`--sf-focus-ring-offset`},{id:376,name:`--sf-focus-ring-shadow`},{id:377,name:`--sf-focus-ring-style`},{id:378,name:`--sf-focus-ring-width`},{id:379,name:`--sf-font-body`},{id:380,name:`--sf-font-display`},{id:381,name:`--sf-font-features`},{id:382,name:`--sf-font-geometric`},{id:383,name:`--sf-font-heading`},{id:384,name:`--sf-font-humanist`},{id:385,name:`--sf-font-mono`},{id:386,name:`--sf-font-numeric`},{id:387,name:`--sf-font-slab`},{id:388,name:`--sf-font-variation`},{id:389,name:`--sf-font-weight-body`},{id:390,name:`--sf-font-weight-bold`},{id:391,name:`--sf-font-weight-display`},{id:392,name:`--sf-font-weight-heading`},{id:393,name:`--sf-font-weight-interactive`},{id:394,name:`--sf-font-weight-light`},{id:395,name:`--sf-font-weight-medium`},{id:396,name:`--sf-font-weight-normal`},{id:397,name:`--sf-font-weight-semibold`},{id:398,name:`--sf-font-weight-strong`},{id:399,name:`--sf-frame-ratio`},{id:400,name:`--sf-gap`},{id:401,name:`--sf-gradient-brand`},{id:402,name:`--sf-gradient-fade--b`},{id:403,name:`--sf-gradient-fade--l`},{id:404,name:`--sf-gradient-fade--r`},{id:405,name:`--sf-gradient-fade--t`},{id:406,name:`--sf-gradient-primary`},{id:407,name:`--sf-gradient-secondary`},{id:408,name:`--sf-gradient-surface`},{id:409,name:`--sf-gradient-tertiary`},{id:410,name:`--sf-grid-gap`},{id:411,name:`--sf-grid-min`},{id:412,name:`--sf-grid-min-2xl`},{id:413,name:`--sf-grid-min-l`},{id:414,name:`--sf-grid-min-m`},{id:415,name:`--sf-grid-min-s`},{id:416,name:`--sf-grid-min-xl`},{id:417,name:`--sf-grid-min-xs`},{id:418,name:`--sf-gutter`},{id:419,name:`--sf-h1-font-weight`},{id:420,name:`--sf-h1-letter-spacing`},{id:421,name:`--sf-h1-line-height`},{id:422,name:`--sf-h1-max-width`},{id:423,name:`--sf-h1-size`},{id:424,name:`--sf-h2-font-weight`},{id:425,name:`--sf-h2-letter-spacing`},{id:426,name:`--sf-h2-line-height`},{id:427,name:`--sf-h2-max-width`},{id:428,name:`--sf-h2-size`},{id:429,name:`--sf-h3-font-weight`},{id:430,name:`--sf-h3-letter-spacing`},{id:431,name:`--sf-h3-line-height`},{id:432,name:`--sf-h3-max-width`},{id:433,name:`--sf-h3-size`},{id:434,name:`--sf-h4-font-weight`},{id:435,name:`--sf-h4-letter-spacing`},{id:436,name:`--sf-h4-line-height`},{id:437,name:`--sf-h4-max-width`},{id:438,name:`--sf-h4-size`},{id:439,name:`--sf-h5-font-weight`},{id:440,name:`--sf-h5-letter-spacing`},{id:441,name:`--sf-h5-line-height`},{id:442,name:`--sf-h5-max-width`},{id:443,name:`--sf-h5-size`},{id:444,name:`--sf-h6-font-weight`},{id:445,name:`--sf-h6-letter-spacing`},{id:446,name:`--sf-h6-line-height`},{id:447,name:`--sf-h6-max-width`},{id:448,name:`--sf-h6-size`},{id:449,name:`--sf-header-height`},{id:450,name:`--sf-header-height-desktop`},{id:451,name:`--sf-header-height-mobile`},{id:452,name:`--sf-heading-color`},{id:453,name:`--sf-heading-font-family`},{id:454,name:`--sf-heading-text-wrap`},{id:455,name:`--sf-icon-2xl`},{id:456,name:`--sf-icon-box-bg`},{id:457,name:`--sf-icon-box-border`},{id:458,name:`--sf-icon-box-pad`},{id:459,name:`--sf-icon-box-radius`},{id:460,name:`--sf-icon-l`},{id:461,name:`--sf-icon-m`},{id:462,name:`--sf-icon-s`},{id:463,name:`--sf-icon-xl`},{id:464,name:`--sf-icon-xs`},{id:465,name:`--sf-imposter-margin`},{id:466,name:`--sf-is-active`},{id:467,name:`--sf-is-current`},{id:468,name:`--sf-is-dark`},{id:469,name:`--sf-is-open`},{id:470,name:`--sf-is-pressed`},{id:471,name:`--sf-leading-normal`},{id:472,name:`--sf-leading-relaxed`},{id:473,name:`--sf-leading-snug`},{id:474,name:`--sf-leading-taper`},{id:475,name:`--sf-leading-tight`},{id:476,name:`--sf-line-clamp`},{id:477,name:`--sf-link-external-marker`},{id:478,name:`--sf-link-underline-offset`},{id:479,name:`--sf-link-underline-thickness`},{id:480,name:`--sf-lumlocker`},{id:481,name:`--sf-mask-scrim-end`},{id:482,name:`--sf-mask-scrim-start`},{id:483,name:`--sf-motion-scale`},{id:484,name:`--sf-object-fit`},{id:485,name:`--sf-object-position`},{id:486,name:`--sf-opacity-disabled`},{id:487,name:`--sf-opacity-muted`},{id:488,name:`--sf-optical-sizing`},{id:489,name:`--sf-palette-mix-100`},{id:490,name:`--sf-palette-mix-200`},{id:491,name:`--sf-palette-mix-300`},{id:492,name:`--sf-palette-mix-400`},{id:493,name:`--sf-palette-mix-50`},{id:494,name:`--sf-palette-mix-600`},{id:495,name:`--sf-palette-mix-700`},{id:496,name:`--sf-palette-mix-800`},{id:497,name:`--sf-palette-mix-900`},{id:498,name:`--sf-palette-mix-950`},{id:499,name:`--sf-print-base-size`},{id:500,name:`--sf-print-page-margin`},{id:501,name:`--sf-print-page-size`},{id:502,name:`--sf-prose-block-margin`},{id:503,name:`--sf-prose-blockquote-border`},{id:504,name:`--sf-prose-blockquote-padding`},{id:505,name:`--sf-prose-figcaption-size`},{id:506,name:`--sf-prose-figure-margin`},{id:507,name:`--sf-prose-heading-gap`},{id:508,name:`--sf-prose-hr-margin`},{id:509,name:`--sf-prose-list-gap`},{id:510,name:`--sf-prose-marker-color`},{id:511,name:`--sf-prose-media-margin`},{id:512,name:`--sf-prose-media-radius`},{id:513,name:`--sf-prose-nested-list-gap`},{id:514,name:`--sf-prose-paragraph`},{id:515,name:`--sf-prose-table-pad`},{id:516,name:`--sf-radius-2xl`},{id:517,name:`--sf-radius-2xs`},{id:518,name:`--sf-radius-3xl`},{id:519,name:`--sf-radius-4xl`},{id:520,name:`--sf-radius-full`},{id:521,name:`--sf-radius-l`},{id:522,name:`--sf-radius-m`},{id:523,name:`--sf-radius-none`},{id:524,name:`--sf-radius-outer`},{id:525,name:`--sf-radius-pill`},{id:526,name:`--sf-radius-s`},{id:527,name:`--sf-radius-scale`},{id:528,name:`--sf-radius-xl`},{id:529,name:`--sf-radius-xs`},{id:530,name:`--sf-ratio-3-2`},{id:531,name:`--sf-ratio-4-3`},{id:532,name:`--sf-ratio-cinema`},{id:533,name:`--sf-ratio-golden`},{id:534,name:`--sf-ratio-portrait`},{id:535,name:`--sf-ratio-square`},{id:536,name:`--sf-ratio-video`},{id:537,name:`--sf-reel-gap`},{id:538,name:`--sf-reel-height`},{id:539,name:`--sf-reel-item-width`},{id:540,name:`--sf-safe-bottom`},{id:541,name:`--sf-safe-left`},{id:542,name:`--sf-safe-right`},{id:543,name:`--sf-safe-top`},{id:544,name:`--sf-scrim-color`},{id:545,name:`--sf-scrim-direction`},{id:546,name:`--sf-scrim-gradient`},{id:547,name:`--sf-scrim-text-shadow`},{id:548,name:`--sf-scroll-shadow-size`},{id:549,name:`--sf-scroll-timeline-range-end`},{id:550,name:`--sf-scroll-timeline-range-start`},{id:551,name:`--sf-scrollbar-thumb`},{id:552,name:`--sf-scrollbar-track`},{id:553,name:`--sf-section-pad`},{id:554,name:`--sf-section-pad--2xl`},{id:555,name:`--sf-section-pad--l`},{id:556,name:`--sf-section-pad--m`},{id:557,name:`--sf-section-pad--s`},{id:558,name:`--sf-section-pad--xl`},{id:559,name:`--sf-section-pad--xs`},{id:560,name:`--sf-section-scale`},{id:561,name:`--sf-shadow-2xl`},{id:562,name:`--sf-shadow-color`},{id:563,name:`--sf-shadow-glow`},{id:564,name:`--sf-shadow-glow-color`},{id:565,name:`--sf-shadow-inner`},{id:566,name:`--sf-shadow-l`},{id:567,name:`--sf-shadow-lightness`},{id:568,name:`--sf-shadow-m`},{id:569,name:`--sf-shadow-none`},{id:570,name:`--sf-shadow-s`},{id:571,name:`--sf-shadow-strength`},{id:572,name:`--sf-shadow-xl`},{id:573,name:`--sf-shadow-xs`},{id:574,name:`--sf-sidebar-gap`},{id:575,name:`--sf-sidebar-min-width`},{id:576,name:`--sf-sidebar-width`},{id:577,name:`--sf-size-l`},{id:578,name:`--sf-size-m`},{id:579,name:`--sf-size-s`},{id:580,name:`--sf-size-xl`},{id:581,name:`--sf-size-xs`},{id:582,name:`--sf-space-2xl`},{id:583,name:`--sf-space-2xs`},{id:584,name:`--sf-space-3xl`},{id:585,name:`--sf-space-4xl`},{id:586,name:`--sf-space-base-max`},{id:587,name:`--sf-space-base-min`},{id:588,name:`--sf-space-l`},{id:589,name:`--sf-space-m`},{id:590,name:`--sf-space-none`},{id:591,name:`--sf-space-px`},{id:592,name:`--sf-space-ratio-max`},{id:593,name:`--sf-space-ratio-min`},{id:594,name:`--sf-space-s`},{id:595,name:`--sf-space-scale`},{id:596,name:`--sf-space-xl`},{id:597,name:`--sf-space-xs`},{id:598,name:`--sf-stack-gap`},{id:599,name:`--sf-state-pending-opacity`},{id:600,name:`--sf-sticky-offset`},{id:601,name:`--sf-sticky-offset-desktop`},{id:602,name:`--sf-sticky-offset-mobile`},{id:603,name:`--sf-surface-color`},{id:604,name:`--sf-switcher-gap`},{id:605,name:`--sf-switcher-threshold`},{id:606,name:`--sf-text-2xl`},{id:607,name:`--sf-text-2xl-font-weight`},{id:608,name:`--sf-text-2xl-letter-spacing`},{id:609,name:`--sf-text-2xl-line-height`},{id:610,name:`--sf-text-2xl-max-width`},{id:611,name:`--sf-text-2xs`},{id:612,name:`--sf-text-2xs-font-weight`},{id:613,name:`--sf-text-2xs-letter-spacing`},{id:614,name:`--sf-text-2xs-line-height`},{id:615,name:`--sf-text-2xs-max-width`},{id:616,name:`--sf-text-3xl`},{id:617,name:`--sf-text-3xl-font-weight`},{id:618,name:`--sf-text-3xl-letter-spacing`},{id:619,name:`--sf-text-3xl-line-height`},{id:620,name:`--sf-text-3xl-max-width`},{id:621,name:`--sf-text-4xl`},{id:622,name:`--sf-text-4xl-font-weight`},{id:623,name:`--sf-text-4xl-letter-spacing`},{id:624,name:`--sf-text-4xl-line-height`},{id:625,name:`--sf-text-4xl-max-width`},{id:626,name:`--sf-text-base-max`},{id:627,name:`--sf-text-base-min`},{id:628,name:`--sf-text-display-base-max`},{id:629,name:`--sf-text-display-base-min`},{id:630,name:`--sf-text-display-l`},{id:631,name:`--sf-text-display-m`},{id:632,name:`--sf-text-display-s`},{id:633,name:`--sf-text-display-scale`},{id:634,name:`--sf-text-l`},{id:635,name:`--sf-text-l-font-weight`},{id:636,name:`--sf-text-l-letter-spacing`},{id:637,name:`--sf-text-l-line-height`},{id:638,name:`--sf-text-l-max-width`},{id:639,name:`--sf-text-m`},{id:640,name:`--sf-text-m-font-weight`},{id:641,name:`--sf-text-m-letter-spacing`},{id:642,name:`--sf-text-m-line-height`},{id:643,name:`--sf-text-m-max-width`},{id:644,name:`--sf-text-ratio-max`},{id:645,name:`--sf-text-ratio-min`},{id:646,name:`--sf-text-s`},{id:647,name:`--sf-text-s-font-weight`},{id:648,name:`--sf-text-s-letter-spacing`},{id:649,name:`--sf-text-s-line-height`},{id:650,name:`--sf-text-s-max-width`},{id:651,name:`--sf-text-scale`},{id:652,name:`--sf-text-shadow-l`},{id:653,name:`--sf-text-shadow-m`},{id:654,name:`--sf-text-shadow-none`},{id:655,name:`--sf-text-shadow-s`},{id:656,name:`--sf-text-xl`},{id:657,name:`--sf-text-xl-font-weight`},{id:658,name:`--sf-text-xl-letter-spacing`},{id:659,name:`--sf-text-xl-line-height`},{id:660,name:`--sf-text-xl-max-width`},{id:661,name:`--sf-text-xs`},{id:662,name:`--sf-text-xs-font-weight`},{id:663,name:`--sf-text-xs-letter-spacing`},{id:664,name:`--sf-text-xs-line-height`},{id:665,name:`--sf-text-xs-max-width`},{id:666,name:`--sf-theme-transition-duration`},{id:667,name:`--sf-touch-target`},{id:668,name:`--sf-tracking-normal`},{id:669,name:`--sf-tracking-tight`},{id:670,name:`--sf-tracking-wide`},{id:671,name:`--sf-tracking-wider`},{id:672,name:`--sf-tracking-widest`},{id:673,name:`--sf-transition-colors`},{id:674,name:`--sf-transition-enter`},{id:675,name:`--sf-transition-exit`},{id:676,name:`--sf-transition-fast`},{id:677,name:`--sf-transition-form-field`},{id:678,name:`--sf-transition-opacity`},{id:679,name:`--sf-transition-overlay`},{id:680,name:`--sf-transition-shadow`},{id:681,name:`--sf-transition-slow`},{id:682,name:`--sf-transition-transform`},{id:683,name:`--sf-z-base`},{id:684,name:`--sf-z-below`},{id:685,name:`--sf-z-dropdown`},{id:686,name:`--sf-z-fixed`},{id:687,name:`--sf-z-modal`},{id:688,name:`--sf-z-overlay`},{id:689,name:`--sf-z-raised`},{id:690,name:`--sf-z-sticky`},{id:691,name:`--sf-z-toast`},{id:692,name:`--sf-z-tooltip`},{id:693,name:`--sf-bg-layer-fit`},{id:694,name:`--sf-bg-layer-inset`},{id:695,name:`--sf-bg-layer-position`},{id:696,name:`--sf-bg-layer-radius`},{id:697,name:`--sf-bg-layer-z`},{id:698,name:`--sf-btn-padding-block`},{id:699,name:`--sf-btn-padding-inline`},{id:700,name:`--sf-btn-radius`},{id:701,name:`--sf-equal-rule-color`},{id:702,name:`--sf-equal-rule-style`},{id:703,name:`--sf-equal-rule-width`},{id:704,name:`--sf-boxed-bg`,removed:!0},{id:705,name:`--sf-boxed-border-color`,removed:!0},{id:706,name:`--sf-boxed-border-width`,removed:!0},{id:707,name:`--sf-boxed-padding`,removed:!0},{id:708,name:`--sf-boxed-radius`,removed:!0},{id:709,name:`--sf-boxed-shadow`,removed:!0},{id:710,name:`--sf-corner-scoop-at`},{id:711,name:`--sf-corner-scoop-size`},{id:712,name:`--sf-corners-end-end`,removed:!0},{id:713,name:`--sf-corners-end-start`,removed:!0},{id:714,name:`--sf-corners-start-end`,removed:!0},{id:715,name:`--sf-corners-start-start`,removed:!0},{id:716,name:`--sf-overlap-pull`},{id:717,name:`--sf-btn-border-width`},{id:718,name:`--sf-btn-font-size`},{id:719,name:`--sf-btn-font-weight`},{id:720,name:`--sf-btn-gap`},{id:721,name:`--sf-btn-min-height`},{id:722,name:`--sf-card-bg`},{id:723,name:`--sf-card-border-color`},{id:724,name:`--sf-card-border-width`},{id:725,name:`--sf-card-btn-font-size`},{id:726,name:`--sf-card-gap`},{id:727,name:`--sf-card-heading-size`},{id:728,name:`--sf-card-media-radius`},{id:729,name:`--sf-card-media-ratio`},{id:730,name:`--sf-card-padding`},{id:731,name:`--sf-card-radius`},{id:732,name:`--sf-card-radius-outer`},{id:733,name:`--sf-card-shadow`},{id:734,name:`--sf-card-shadow--elevated`},{id:735,name:`--sf-card-shadow--hover`},{id:736,name:`--sf-animation-slide-out-down`},{id:737,name:`--sf-animation-slide-out-left`},{id:738,name:`--sf-animation-slide-out-right`},{id:739,name:`--sf-animation-slide-out-up`},{id:740,name:`--sf-color-selection-bg--alt`},{id:741,name:`--sf-color-selection-text--alt`},{id:742,name:`--sf-media-radius`},{id:743,name:`--sf-scroll-timeline-range-exit-end`},{id:744,name:`--sf-scroll-timeline-range-exit-start`},{id:745,name:`--sf-drop-shadow-xl`},{id:746,name:`--sf-drop-shadow-xs`},{id:747,name:`--sf-link-external-label`},{id:748,name:`--sf-text-shadow-xl`},{id:749,name:`--sf-text-shadow-xs`},{id:750,name:`--sf-fluid-width`},{id:751,name:`--sf-surface-bg-animation`},{id:752,name:`--sf-surface-bg-attachment`},{id:753,name:`--sf-surface-bg-color`},{id:754,name:`--sf-surface-bg-image`},{id:755,name:`--sf-surface-bg-overlay`},{id:756,name:`--sf-surface-bg-position`},{id:757,name:`--sf-surface-bg-repeat`},{id:758,name:`--sf-surface-bg-size`},{id:759,name:`--sf-card-avatar-size`},{id:760,name:`--sf-color-action-tint`},{id:761,name:`--sf-color-base-tint`},{id:762,name:`--sf-color-danger-tint`},{id:763,name:`--sf-color-info-tint`},{id:764,name:`--sf-color-neutral-tint`},{id:765,name:`--sf-color-primary-tint`},{id:766,name:`--sf-color-secondary-tint`},{id:767,name:`--sf-color-success-tint`},{id:768,name:`--sf-color-tertiary-tint`},{id:769,name:`--sf-color-warning-tint`},{id:770,name:`--sf-gradient-action`}]},qs=window.__SLASHED_FW_VERSION__===void 0?`0.0.0`:window.__SLASHED_FW_VERSION__,Js=65535,Ys=65535,Xs=new TextEncoder,Zs=new TextDecoder(`utf-8`,{fatal:!1}),Qs=32*1024,$s=256*1024;function ec(e){return Number.isInteger(e)&&e>=0&&e<=Ys}function tc(e){let t=new Map;for(let n of e?.tokens??[])n&&!n.removed&&typeof n.name==`string`&&ec(n.id)&&t.set(n.name,n.id);return t}function nc(e){let t=new Map;for(let n of e?.tokens??[])n&&!n.removed&&typeof n.name==`string`&&Number.isInteger(n.id)&&t.set(n.id,n.name);return t}function rc(e){let t=``;for(let n=0;nJs||r.push({id:e,valueBytes:a})}if(r.length===0)return``;r.sort((e,t)=>e.id-t.id);let i=0;for(let e of r)i+=4+e.valueBytes.length;let a=new Uint8Array(i),o=0;for(let{id:e,valueBytes:t}of r)a[o++]=e>>8&255,a[o++]=e&255,a[o++]=t.length>>8&255,a[o++]=t.length&255,a.set(t,o),o+=t.length;let s=Us(a);if(s.length>Qs)return console.warn(`[codec] compressed payload too large (${s.length} B > ${Qs} B); refusing to encode.`),``;let c=new Uint8Array(1+s.length);return c[0]=2,c.set(s,1),rc(c)}function oc(e,t=Ks,n={}){let r=String(e??``).trim();if(r===``)return{};let i=ic(r);if(!i||i.length===0)return{};if(i[0]!==2)return console.warn(`[codec] unknown config-code version ${i[0]} (expected 2); ignoring.`),{};let a=i.length-1;if(a>Qs)return console.warn(`[codec] compressed payload too large (${a} B > ${Qs} B); ignoring.`),{};let o;try{o=Ws(i.subarray(1))}catch{return console.warn(`[codec] failed to decompress config; ignoring.`),{}}if(!o||o.length===0)return{};if(o.length>$s)return console.warn(`[codec] decompressed payload too large (${o.length} B > ${$s} B); ignoring.`),{};let s=nc(t),c=typeof n.sanitize==`function`?n.sanitize:e=>e,l=typeof n.isKnown==`function`?n.isKnown:()=>!0,u={},d=0;try{for(;do.length)throw Error(`truncated entry header`);let e=o[d]<<8|o[d+1],t=o[d+2]<<8|o[d+3];if(d+=4,d+t>o.length)throw Error(`truncated value`);let n=Zs.decode(o.subarray(d,d+t));d+=t;let r=s.get(e);if(r===void 0||!l(r))continue;let i=c(n);i!==``&&(u[r]=i)}}catch(e){return console.warn(`[codec] malformed config code; ignoring (${e.message}).`),{}}return u}function sc(e){return e==null?``:String(e).replace(/\/\*[\s\S]*?\*\//g,` `).replace(/[;{}]/g,` `).replace(/[/*]{2,}/g,` `).replace(/\s+/g,` `).trim()}function cc(e,t={}){let{mode:n=`layer`,banner:r=!0}=t,i=Object.keys(e).filter(e=>/^--sf-[\w-]+$/.test(e)).sort((e,t)=>e.localeCompare(t));if(i.length===0)return``;let a=i.map(t=>`${t}: ${sc(e[t])};`),o=n===`layer`?` `:` `,s=a.map(e=>`${o}${e}`).join(` +`),c=``;return r&&(c+=`/* SLASHED override tokens v${qs} — generated by the SLASHED configurator.\n Load this AFTER the SLASHED stylesheet. ${i.length} token${i.length===1?``:`s`} customised. */\n`),n===`layer`?`${c}@layer slashed.overrides {\n\t:root {\n${s}\n\t}\n}\n`:`${c}:root {\n${s}\n}\n`}function lc(e){return ac(e,Ks)}var uc=RegExp(`[#&]?c=([^&]+)`);function dc(e,t={}){let n=new Set(Ks.tokens.filter(e=>!e.removed).map(e=>e.name)),r=t.isKnown??(e=>n.has(e)),i=String(e??``).trim(),a=i.match(uc);return a&&(i=a[1]),oc(i,Ks,{sanitize:sc,isKnown:r})}function fc(e,t){let n=typeof window<`u`?window.location.href:`https://example.com/`,r=new URL(t??n),i=lc(e);return r.hash=i?`c=${i}`:``,r.toString()}function pc(e,t={}){let n=String(e??``);return n.includes(`c=`)?dc(n,t):{}}var mc=`slashed-studio/themes/v1`;function hc(e){return!!e&&typeof e==`object`&&!Array.isArray(e)&&Object.values(e).every(e=>typeof e==`string`)}function gc(e){if(!e||typeof e!=`object`||Array.isArray(e))return!1;let t=e;return typeof t.id==`string`&&typeof t.name==`string`&&typeof t.icon==`string`&&typeof t.blurb==`string`&&hc(t.overrides)}function _c(){if(typeof window>`u`)return[];try{let e=localStorage.getItem(mc);if(!e)return[];let t=JSON.parse(e);return Array.isArray(t)?t.filter(gc):[]}catch{return[]}}function vc(e){if(typeof window>`u`)return!1;try{return localStorage.setItem(mc,JSON.stringify(e)),!0}catch{return!1}}function yc(){return _c()}function bc(e,t){let n=_c(),r=e.trim()||`Untitled theme`,i={id:`theme-${Date.now()}-${Math.random().toString(36).slice(2,7)}`,name:r,icon:`🎨`,blurb:`${Object.keys(t).length} override${Object.keys(t).length===1?``:`s`}`,overrides:{...t}},a=[...n,i];return vc(a)?a:n}function xc(e){let t=_c().filter(t=>t.id!==e);return vc(t)?t:_c()}var Sc=`slashed-studio/overrides/v2`,Cc=new Set([`--sf-text-base-min`,`--sf-text-base-max`,`--sf-text-ratio-min`,`--sf-text-ratio-max`,`--sf-text-scale`,`--sf-text-display-base-min`,`--sf-text-display-base-max`,`--sf-text-display-scale`,`--sf-fluid-min-vw`,`--sf-fluid-max-vw`]),wc=new Set([`--sf-space-base-min`,`--sf-space-base-max`,`--sf-space-ratio-min`,`--sf-space-ratio-max`,`--sf-space-scale`,`--sf-fluid-min-vw`,`--sf-fluid-max-vw`]),Tc=[[`2xs`,-3],[`xs`,-2],[`s`,-1],[`m`,0],[`l`,1],[`xl`,2],[`2xl`,3],[`3xl`,4],[`4xl`,5]],Ec=[[`display-s`,0],[`display-m`,1],[`display-l`,2]],Dc=[[`2xs`,-3],[`xs`,-2],[`s`,-1],[`m`,0],[`l`,1],[`xl`,2],[`2xl`,3],[`3xl`,4],[`4xl`,5]],Oc=[[`2xs`,1],[`xs`,2],[`s`,4],[`m`,8],[`l`,12],[`xl`,16],[`2xl`,24],[`3xl`,32],[`4xl`,48]],kc=[[`1`,1],[`2`,2],[`3`,3],[`4`,4]],Ac=[[`instant`,100],[`fast`,150],[`normal`,250],[`slow`,400],[`slower`,600]];function jc(e,t,n){let r=e[t];if(r===void 0)return n;let i=parseFloat(r);return Number.isFinite(i)?i:n}function Mc(e){if(!Number.isFinite(e))return`0`;let t=e.toFixed(6).replace(/\.?0+$/,``);return t===``||t===`-`?`0`:t}function Nc(e,t,n,r,i,a,o,s){let c=e*n**+o*s,l=t*r**+o*s;if(a<=i||Math.abs(c-l)<1e-9)return`${Mc(c)}rem`;let u=(l-c)/(a-i);return`clamp(${Mc(c)}rem, calc(${Mc(u)} * (100vw - ${Mc(i)}rem) + ${Mc(c)}rem), ${Mc(l)}rem)`}function Pc(e,{reduceMotion:t=!1}={}){let n={},r=Object.keys(e),i=r.some(e=>Cc.has(e)),a=r.some(e=>wc.has(e)),o=`--sf-radius-scale`in e,s=`--sf-border-scale`in e,c=`--sf-motion-scale`in e;if(!i&&!a&&!o&&!s&&!c)return n;let l=jc(e,`--sf-fluid-min-vw`,22.5),u=jc(e,`--sf-fluid-max-vw`,90);if(i){let t=jc(e,`--sf-text-base-min`,1),r=jc(e,`--sf-text-base-max`,1.25),i=jc(e,`--sf-text-ratio-min`,1.25),a=jc(e,`--sf-text-ratio-max`,1.333),o=jc(e,`--sf-text-scale`,1);for(let[e,s]of Tc)n[`--sf-text-${e}`]=Nc(t,r,i,a,l,u,s,o);let s=jc(e,`--sf-text-display-base-min`,2.4),c=jc(e,`--sf-text-display-base-max`,3),d=jc(e,`--sf-text-display-scale`,1);for(let[e,t]of Ec)n[`--sf-text-${e}`]=Nc(s,c,i,a,l,u,t,d)}if(a){let t=jc(e,`--sf-space-base-min`,1),r=jc(e,`--sf-space-base-max`,2),i=jc(e,`--sf-space-ratio-min`,1.25),a=jc(e,`--sf-space-ratio-max`,1.333),o=jc(e,`--sf-space-scale`,1);for(let[e,s]of Dc)n[`--sf-space-${e}`]=Nc(t,r,i,a,l,u,s,o)}if(o){let t=jc(e,`--sf-radius-scale`,1);for(let[e,r]of Oc)n[`--sf-radius-${e}`]=`${Mc(r*t)}px`;n[`--sf-radius-none`]=`0`,n[`--sf-radius-full`]=`9999px`,n[`--sf-radius-pill`]=`var(--sf-radius-full)`,n[`--sf-radius-outer`]=`calc(var(--sf-radius-m) + var(--sf-component-pad))`}if(s){let t=jc(e,`--sf-border-scale`,1);for(let[e,r]of kc)n[`--sf-border-width-${e}`]=`${Mc(r*t)}px`}if(c&&!t){let t=jc(e,`--sf-motion-scale`,1);for(let[e,r]of Ac)n[`--sf-duration-${e}`]=`${Mc(r*t)}ms`;n[`--sf-duration-none`]=`0ms`,n[`--sf-theme-transition-duration`]=`${Mc(300*t)}ms`;for(let e=1;e<=5;e+=1)n[`--sf-animation-delay-${e}`]=`${Mc(75*e*t)}ms`}return n}function Fc(){return typeof window>`u`?null:window.slashedApp??null}function Ic(){let e=(Fc()?.pluginSettings?.configurator_url)?.trim();if(e)try{let t=new URL(e);if(t.protocol!==`http:`&&t.protocol!==`https:`){console.warn(`[slashed] ignoring configurator_url with unsupported scheme: ${t.protocol}`);return}return e}catch{console.warn(`[slashed] ignoring invalid configurator_url: ${e}`);return}}function Lc(){return!!Fc()}function Rc(){if(typeof window>`u`)return{};let e=Fc();if(e)return e.overrides&&typeof e.overrides==`object`&&!Array.isArray(e.overrides)?{...e.overrides}:{};let t=window.location.hash;if(t?.includes(`c=`))try{return pc(t)}catch{}let n=localStorage.getItem(Sc);if(n)try{let e=JSON.parse(n);if(hc(e))return e}catch{}return{}}function zc(e){if(typeof document>`u`)return;let t=document.getElementById(`sf-parent-overrides`);t||(t=document.createElement(`style`),t.id=`sf-parent-overrides`,document.head.appendChild(t));let n=Pc(e,{reduceMotion:typeof window<`u`&&window.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches}),r=Object.keys(n).length>0?{...n,...e}:e;t.textContent=cc(r,{mode:`root`,banner:!1})}async function Bc(e,t){let n=(e.url??``).replace(/\/$/,``),r=new URL(n+`/tokens/overrides`,window.location.href);if(r.origin!==window.location.origin)throw Error(`slashed: REST URL must be same-origin`);let i=r.href,a=await fetch(i,{method:`POST`,credentials:`same-origin`,headers:{"Content-Type":`application/json`,"X-WP-Nonce":e.nonce??``},body:JSON.stringify({overrides:t})});if(!a.ok)throw Error(`slashed: save failed ${a.status} ${a.statusText}`)}function Vc(e){try{localStorage.setItem(Sc,JSON.stringify(e))}catch{}let t=lc(e),n=t?`c=${t}`:``;window.location.hash.replace(`#`,``)!==n&&(window.location.hash=n)}async function Hc(e){if(typeof window>`u`)return;let t=Fc();if(t?.rest?.url){await Bc(t.rest,{...e});return}Vc(e)}var Uc=G(``),Wc=G(` `,1),Gc=G(` `,1),Kc=G(` `,1),qc=G(` `,1),Jc=G(``),Yc=G(`
/
`,1);function Xc(e,t){Ue(t,!0);let n=window.__SLASHED_FW_VERSION__===void 0?``:window.__SLASHED_FW_VERSION__,r=L(!1),i=L(!1),a=L(null),o=L(null);On(()=>{U(i)&&br().then(()=>U(a)?.focus())});async function s(){try{let e=fc(t.overrides,Ic());await navigator.clipboard.writeText(e),R(r,!0),setTimeout(()=>{R(r,!1)},2e3)}catch{}}function c(){R(i,!0)}function l(){R(i,!1),t.onResetAll()}function u(){R(i,!1)}var d=Yc(),f=B(d),p=V(z(f),2),m=z(p),h=V(z(m)),g=z(h);F(h),F(m),Me(2),F(p);var _=V(p,2),v=e=>{var n=Uc(),r=z(n),i=z(r,!0);F(r),Me(3),F(n),H(()=>q(i,t.overridesCount)),W(`click`,n,function(...e){t.onExport?.apply(this,e)}),K(e,n)};J(_,e=>{t.overridesCount>0&&e(v)});var y=V(_,4),b=z(y),x=z(b),S=e=>{var t=Wc();Lo(B(t),{class:`w-3.5 h-3.5 animate-spin shrink-0`}),Me(2),K(e,t)},C=e=>{var t=Gc();va(B(t),{class:`w-3.5 h-3.5 shrink-0`}),Me(2),K(e,t)},w=e=>{var t=Kc();Vo(B(t),{class:`w-3.5 h-3.5 shrink-0`}),Me(2),K(e,t)},T=e=>{var t=qc();oo(B(t),{class:`w-3.5 h-3.5 shrink-0`}),Me(2),K(e,t)};J(x,e=>{t.saveState===`saving`?e(S):t.saveState===`saved`?e(C,1):t.saveState===`error`?e(w,2):e(T,-1)}),F(b);var E=V(b,2);jo(z(E),{class:`w-3.5 h-3.5`}),F(E);var D=V(E,2);Qa(z(D),{class:`w-3.5 h-3.5`}),F(D);var O=V(D,4),k=z(O),A=e=>{va(e,{class:`w-3.5 h-3.5 text-emerald-600 dark:text-emerald-400`})},ee=e=>{co(e,{class:`w-3.5 h-3.5`})};J(k,e=>{U(r)?e(A):e(ee,-1)}),F(O);var j=V(O,2);Pa(z(j),{class:`w-3.5 h-3.5`}),F(j);var te=V(j,2);Do(z(te),{class:`w-3.5 h-3.5`}),F(te);var ne=V(te,4),M=z(ne),re=e=>{xo(e,{class:`w-3.5 h-3.5`})},ie=e=>{Wa(e,{class:`w-3.5 h-3.5`})};J(M,e=>{qo.value===`dark`?e(re):e(ie,-1)}),F(ne),F(y),F(f);var ae=V(f,2),oe=e=>{var n=Jc(),r=z(n),i=V(z(r),2),s=z(i);F(i);var c=V(i,2),d=z(c);Qi(d,e=>R(a,e),()=>U(a));var f=V(d,2);Qi(f,e=>R(o,e),()=>U(o)),F(c),F(r),F(n),H(()=>q(s,`This will clear all ${t.overridesCount??``} customisation${t.overridesCount===1?``:`s`}. + You can still undo this before saving.`)),W(`click`,n,e=>{e.target===e.currentTarget&&u()}),W(`keydown`,n,e=>{e.key===`Escape`&&(e.stopPropagation(),u()),e.key===`Tab`&&(e.preventDefault(),document.activeElement===U(a)?U(o)?.focus():U(a)?.focus())}),W(`click`,d,u),W(`click`,f,l),K(e,n)};J(ae,e=>{U(i)&&e(oe)}),H(e=>{q(g,`v${n??``}`),b.disabled=!t.hasPendingChanges||t.saveState===`saving`,Q(b,`title`,t.saveState===`error`?`Save failed — click to retry`:t.hasPendingChanges?`Save changes (Ctrl+S)`:`No unsaved changes`),X(b,1,e),E.disabled=!t.canUndo,D.disabled=!t.canRedo,te.disabled=t.overridesCount===0,Q(ne,`title`,qo.value===`dark`?`Switch to light mode`:`Switch to dark mode`),Q(ne,`aria-label`,qo.value===`dark`?`Switch to light mode`:`Switch to dark mode`),Q(ne,`aria-pressed`,qo.value===`dark`)},[()=>yi([`flex items-center gap-1.5 px-2 sm:px-3 py-1.5 rounded-lg text-[11px] font-bold transition-colors cursor-pointer shrink-0`,t.saveState===`error`?`bg-red-100 dark:bg-red-900/40 border border-red-500/30 text-red-700 dark:text-red-300`:t.saveState===`saved`?`bg-emerald-100 dark:bg-emerald-900/40 border border-emerald-500/30 text-emerald-700 dark:text-emerald-300`:t.hasPendingChanges?`bg-emerald-600 hover:bg-emerald-500 text-white shadow-sm shadow-emerald-600/30`:`bg-black/5 dark:bg-white/5 text-slate-500 disabled:opacity-40 disabled:pointer-events-none`].join(` `))]),W(`click`,b,function(...e){t.onSave?.apply(this,e)}),W(`click`,E,function(...e){t.onUndo?.apply(this,e)}),W(`click`,D,function(...e){t.onRedo?.apply(this,e)}),W(`click`,O,s),W(`click`,j,function(...e){t.onImport?.apply(this,e)}),W(`click`,te,c),W(`click`,ne,function(...e){Qo?.apply(this,e)}),K(e,d),We()}Br([`click`,`keydown`]);var Zc=G(` `),Qc=G(``),$c=G(``);function el(e,t){Ue(t,!0);let n=ra(t,`overridesByDomain`,19,()=>({})),r=[{id:`home`,icon:Fo,label:`Home`,group:`tokens`},{id:`colors`,icon:Ja,label:`Colors`,group:`tokens`},{id:`typography`,icon:ko,label:`Typography`,group:`tokens`},{id:`spacing`,icon:io,label:`Spacing`,group:`tokens`},{id:`layout`,icon:zo,label:`Layout`,group:`tokens`},{id:`borders`,icon:yo,label:`Borders`,group:`tokens`},{id:`shadows`,icon:Ia,label:`Shadows`,group:`tokens`},{id:`motion`,icon:No,label:`Motion`,group:`tokens`},{id:`effects`,icon:_o,label:`Effects`,group:`tokens`},{id:`macros`,icon:ma,label:`Macros`,group:`tokens`},{id:`misc`,icon:Xa,label:`Misc`,group:`tokens`},{id:`components`,icon:wa,label:`Components`,group:`tokens`},{id:`themes`,icon:Co,label:`Themes`,group:`tools`},{id:`wcag`,icon:uo,label:`WCAG`,group:`tools`},{id:`setup`,icon:Ka,label:`Install`,group:`tools`},{id:`cheatsheet`,icon:ga,label:`Classes`,group:`tools`}],i=I(()=>r.filter(e=>e.group===`tokens`)),a=I(()=>r.filter(e=>e.group===`tools`));var o=$c(),s=z(o);Y(s,21,()=>U(i),e=>e.id,(e,r)=>{let i=I(()=>t.activeId===U(r).id),a=I(()=>n()[U(r).id]||0),o=I(()=>U(r).icon);var s=Qc(),c=z(s);mi(c,()=>U(o),(e,t)=>{t(e,{class:`w-4 h-4`})});var l=V(c,2),u=e=>{var t=Zc(),n=z(t,!0);F(t),H(()=>q(n,U(a)>9?`+`:U(a))),K(e,t)};J(l,e=>{U(a)>0&&!U(i)&&e(u)});var d=V(l,2),f=z(d,!0);F(d),F(s),H(()=>{Q(s,`title`,U(r).label),X(s,1,`relative w-10 h-10 flex items-center justify-center rounded-xl transition-all cursor-pointer group ${U(i)?`bg-indigo-600 text-white shadow-lg shadow-indigo-600/30`:`text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-black/8 dark:hover:bg-white/8`}`),q(f,U(r).label)}),W(`click`,s,()=>t.onSelect(U(r).id)),K(e,s)}),F(s);var c=V(s,4);Y(c,21,()=>U(a),e=>e.id,(e,r)=>{let i=I(()=>t.activeId===U(r).id),a=I(()=>n()[U(r).id]||0),o=I(()=>U(r).icon);var s=Qc(),c=z(s);mi(c,()=>U(o),(e,t)=>{t(e,{class:`w-4 h-4`})});var l=V(c,2),u=e=>{var t=Zc(),n=z(t,!0);F(t),H(()=>q(n,U(a)>9?`+`:U(a))),K(e,t)};J(l,e=>{U(a)>0&&!U(i)&&e(u)});var d=V(l,2),f=z(d,!0);F(d),F(s),H(()=>{Q(s,`title`,U(r).label),X(s,1,`relative w-10 h-10 flex items-center justify-center rounded-xl transition-all cursor-pointer group ${U(i)?`bg-indigo-600 text-white shadow-lg shadow-indigo-600/30`:`text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-black/8 dark:hover:bg-white/8`}`),q(f,U(r).label)}),W(`click`,s,()=>t.onSelect(U(r).id)),K(e,s)}),F(c),F(o),K(e,o),We()}Br([`click`]);var tl=G(` `),nl=G(`
Live
`);function rl(e,t){var n=nl(),r=V(z(n),2),i=z(r),a=e=>{var n=tl(),r=z(n);F(n),H(()=>q(r,`${t.overridesCount??``} override${t.overridesCount===1?``:`s`} active`)),K(e,n)},o=e=>{K(e,Yr(`No overrides — showing framework defaults`))};J(i,e=>{t.overridesCount>0?e(a):e(o,-1)}),F(r);var s=V(r,4),c=z(s,!0);F(s),F(n),H(()=>q(c,t.domain)),K(e,n)}var il=null,al=null,ol=null,sl=null,cl=null,ll=null,ul=null,dl=new Map,fl=nn({value:0}),pl=0;function ml(e){if(il===e){gl();return}al&&al.remove(),sl&&sl.remove(),cl&&cl.remove(),il=e,al=null,ol=null,sl=null,cl=null,ll=null,ul=null,gl()}function hl(){return il?.documentElement.getAttribute(`data-theme`)===`dark`?`dark`:`light`}function gl(){pl+=1,fl.value=pl,dl.clear()}function _l(){if(!il||!il.body)return null;if(al&&al.ownerDocument===il&&al.isConnected)return al;let e=il.createElement(`div`);return e.setAttribute(`data-sf-probe`,``),e.style.cssText=`position:absolute;width:0;height:0;pointer-events:none;visibility:hidden;`,il.body.appendChild(e),al=e,e}function vl(e){let t=dl.get(e);if(t!==void 0)return t;let n=_l();if(!n||!il)return``;n.style.color=``,n.style.color=e;let r=il.defaultView?.getComputedStyle(n).color??``;return dl.set(e,r),r}function yl(e){return!il||!il.body?null:e===`light`?ll&&ll.isConnected?ll:(sl&&sl.remove(),sl=il.createElement(`div`),sl.setAttribute(`data-theme`,`light`),sl.style.cssText=`position:absolute;width:0;height:0;pointer-events:none;visibility:hidden;`,ll=il.createElement(`div`),sl.appendChild(ll),il.body.appendChild(sl),ll):ul&&ul.isConnected?ul:(cl&&cl.remove(),cl=il.createElement(`div`),cl.setAttribute(`data-theme`,`dark`),cl.style.cssText=`position:absolute;width:0;height:0;pointer-events:none;visibility:hidden;`,ul=il.createElement(`div`),cl.appendChild(ul),il.body.appendChild(cl),ul)}function bl(e,t){let n=`${t}\0${e}`,r=dl.get(n);if(r!==void 0)return r;let i=yl(t);if(!i||!il)return``;i.style.color=``,i.style.color=e;let a=il.defaultView?.getComputedStyle(i).color??``;return dl.set(n,a),a}function xl(){if(!il)return null;if(ol&&ol.canvas.ownerDocument===il)return ol;let e=il.createElement(`canvas`);return e.width=1,e.height=1,ol=e.getContext(`2d`,{willReadFrequently:!0}),ol}function Sl(e){let t=vl(e);if(!t)return null;let n=xl();if(!n)return null;n.clearRect(0,0,1,1),n.fillStyle=t,n.fillRect(0,0,1,1);try{let e=n.getImageData(0,0,1,1).data;return[e[0],e[1],e[2]]}catch{return null}}function Cl(e){let t=_l();return!t||!il?``:(t.style.background=``,t.style.background=e,il.defaultView?.getComputedStyle(t).backgroundImage??``)}var wl=nn({value:!1}),Tl=`/*! SLASHED v0.7.7 — slashed.full.css | MIT License | github.com/codeslash-dev/SLASHED */ /* ─── core/layers.css ─── */ /* SLASHED — core/layers.css @@ -614,27 +614,38 @@ var e=Array.isArray,t=Array.prototype.indexOf,n=Array.prototype.includes,r=Array --sf-color-mark-bg: oklch(from var(--sf-color-warning) l c h / 0.25); /* ---------------------------------------------------------- - Status triplets — subtle/muted (alpha variants) - bg/border use same formula both modes + Status triplets — subtle/muted/tint (alpha variants) + bg/border use same formula both modes. -tint is the 5% + near-transparent rung, mirroring the brand families' + --sf-color-{family}-tint aliases (full 10-family coverage). ---------------------------------------------------------- */ --sf-color-success-subtle: oklch(from var(--sf-color-success) l c h / 0.12); --sf-color-success-muted: oklch(from var(--sf-color-success) l c h / 0.3); + --sf-color-success-tint: oklch(from var(--sf-color-success) l c h / 0.05); --sf-color-warning-subtle: oklch(from var(--sf-color-warning) l c h / 0.12); --sf-color-warning-muted: oklch(from var(--sf-color-warning) l c h / 0.3); + --sf-color-warning-tint: oklch(from var(--sf-color-warning) l c h / 0.05); --sf-color-info-subtle: oklch(from var(--sf-color-info) l c h / 0.1); --sf-color-info-muted: oklch(from var(--sf-color-info) l c h / 0.3); + --sf-color-info-tint: oklch(from var(--sf-color-info) l c h / 0.05); --sf-color-danger-subtle: oklch(from var(--sf-color-danger) l c h / 0.1); --sf-color-danger-muted: oklch(from var(--sf-color-danger) l c h / 0.3); + --sf-color-danger-tint: oklch(from var(--sf-color-danger) l c h / 0.05); /* ---------------------------------------------------------- Gradients — derived from brand colors (auto-adapt) + All 4 core brand families (primary/secondary/tertiary/action) + share the same darkening formula; --sf-gradient-brand is a + separate decorative hue-shift option, independent of the + colour axis. ---------------------------------------------------------- */ --sf-gradient-primary: linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) calc(l - 0.08) c h)); --sf-gradient-secondary: linear-gradient(in oklch 135deg, var(--sf-color-secondary), oklch(from var(--sf-color-secondary) calc(l - 0.08) c h)); --sf-gradient-tertiary: linear-gradient(in oklch 135deg, var(--sf-color-tertiary), oklch(from var(--sf-color-tertiary) calc(l - 0.08) c h)); + --sf-gradient-action: linear-gradient(in oklch 135deg, var(--sf-color-action), oklch(from var(--sf-color-action) calc(l - 0.08) c h)); --sf-gradient-brand: linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) l c calc(h + 30))); --sf-gradient-surface: linear-gradient(in oklab 180deg, var(--sf-color-surface), var(--sf-color-bg)); @@ -760,7 +771,7 @@ var e=Array.isArray,t=Array.prototype.indexOf,n=Array.prototype.includes,r=Array --sf-color-primary--active: var(--sf-color-primary-xdark); --sf-color-primary-subtle: var(--sf-color-primary-a10); --sf-color-primary-muted: var(--sf-color-primary-a30); - --sf-color-primary-ghost: var(--sf-color-primary-a5); + --sf-color-primary-tint: var(--sf-color-primary-a5); @@ -795,7 +806,7 @@ var e=Array.isArray,t=Array.prototype.indexOf,n=Array.prototype.includes,r=Array --sf-color-secondary--active: var(--sf-color-secondary-xdark); --sf-color-secondary-subtle: var(--sf-color-secondary-a10); --sf-color-secondary-muted: var(--sf-color-secondary-a30); - --sf-color-secondary-ghost: var(--sf-color-secondary-a5); + --sf-color-secondary-tint: var(--sf-color-secondary-a5); @@ -830,7 +841,7 @@ var e=Array.isArray,t=Array.prototype.indexOf,n=Array.prototype.includes,r=Array --sf-color-tertiary--active: var(--sf-color-tertiary-xdark); --sf-color-tertiary-subtle: var(--sf-color-tertiary-a10); --sf-color-tertiary-muted: var(--sf-color-tertiary-a30); - --sf-color-tertiary-ghost: var(--sf-color-tertiary-a5); + --sf-color-tertiary-tint: var(--sf-color-tertiary-a5); @@ -865,7 +876,7 @@ var e=Array.isArray,t=Array.prototype.indexOf,n=Array.prototype.includes,r=Array --sf-color-action--active: var(--sf-color-action-xdark); --sf-color-action-subtle: var(--sf-color-action-a10); --sf-color-action-muted: var(--sf-color-action-a30); - --sf-color-action-ghost: var(--sf-color-action-a5); + --sf-color-action-tint: var(--sf-color-action-a5); @@ -900,7 +911,7 @@ var e=Array.isArray,t=Array.prototype.indexOf,n=Array.prototype.includes,r=Array --sf-color-neutral--active: var(--sf-color-neutral-xdark); --sf-color-neutral-subtle: var(--sf-color-neutral-a10); --sf-color-neutral-muted: var(--sf-color-neutral-a30); - --sf-color-neutral-ghost: var(--sf-color-neutral-a5); + --sf-color-neutral-tint: var(--sf-color-neutral-a5); @@ -958,7 +969,7 @@ var e=Array.isArray,t=Array.prototype.indexOf,n=Array.prototype.includes,r=Array --sf-color-base--active: oklch(from var(--sf-color-base) clamp(0.01, calc(l - 0.08 + var(--sf-is-dark) * 0.16), 0.99) c h); --sf-color-base-subtle: var(--sf-color-base-a10); --sf-color-base-muted: var(--sf-color-base-a30); - --sf-color-base-ghost: var(--sf-color-base-a5); + --sf-color-base-tint: var(--sf-color-base-a5); } @@ -1015,7 +1026,10 @@ var e=Array.isArray,t=Array.prototype.indexOf,n=Array.prototype.includes,r=Array --sf-font-weight-body: var(--sf-font-weight-normal); /* body copy */ --sf-font-weight-heading: var(--sf-font-weight-semibold); /* h1–h6 */ --sf-font-weight-display: var(--sf-font-weight-bold); /* hero / display */ - --sf-font-weight-interactive: var(--sf-font-weight-semibold); /* buttons, badges, nav */ + --sf-font-weight-interactive: var(--sf-font-weight-semibold); /* buttons, badges, nav. + Note: "interactive" here names a TYPOGRAPHY WEIGHT TIER; .sf-card--interactive + names a card BEHAVIOUR modifier. Deliberate coexistence (different property + spaces) — do not introduce a third meaning of "interactive". */ --sf-font-weight-strong: var(--sf-font-weight-bold); /* / emphasis */ /* State token — consumed by .sf-is-current in states.css. @@ -4642,6 +4656,7 @@ var e=Array.isArray,t=Array.prototype.indexOf,n=Array.prototype.includes,r=Array * token; inner media radius mirrors the card's inner radius. */ --sf-card-media-ratio: var(--sf-ratio-video); --sf-card-media-radius: var(--sf-card-radius, var(--sf-radius-m)); + --sf-card-avatar-size: 2.5rem; --sf-card-heading-size: var(--sf-text-xl); --sf-card-btn-font-size: var(--sf-text-s); @@ -4706,9 +4721,11 @@ var e=Array.isArray,t=Array.prototype.indexOf,n=Array.prototype.includes,r=Array @layer slashed.components Component class surface: button and card. - .sf-btn and .sf-card are LIVE since v0.7.0. These are the only two - components SLASHED ships — the framework stays BEM-first and token-first - and does not carry a broad component library. + .sf-btn and .sf-card are LIVE since v0.7.0. Further components + (badge, tag, alert, avatar, modal, skeleton) are planned — see + docs/roadmap.md and issue #384. The framework stays BEM-first and + token-first: anything not shipped here is authored as project BEM + classes reading SLASHED tokens. Imports optional component tokens. */ @@ -4717,9 +4734,14 @@ var e=Array.isArray,t=Array.prototype.indexOf,n=Array.prototype.includes,r=Array /* ============================================================ * .sf-btn * Interactive call-to-action element. Apply to + - +
@@ -5470,7 +5612,7 @@ var e=Array.isArray,t=Array.prototype.indexOf,n=Array.prototype.includes,r=Array

Interactive card

Elevation and interaction states react to token changes.

-
+
@@ -5547,7 +5689,7 @@ var e=Array.isArray,t=Array.prototype.indexOf,n=Array.prototype.includes,r=Array
- +
@@ -5641,7 +5783,7 @@ ${l?l+` ${h[i]} -`}let _=L(!1),v=L(null),y=L(null),b=L(null),x=L(0),S=L(0),C=L(0),w=L(0),T=I(()=>g({},t.previewTheme,t.previewMotion,t.previewTemplate,Tl)),E=I(()=>g({},`light`,t.previewMotion,t.previewTemplate,Tl)),D=I(()=>g({},`dark`,t.previewMotion,t.previewTemplate,Tl));On(()=>{let e=t.overrides,r=t.previewTheme,i=U(x),a=wl.value,o=requestAnimationFrame(()=>{let t=U(v);if(i===0||!t)return;let o=t.contentDocument;if(!o)return;let c=o.getElementById(`slashed-overrides`);c&&(c.textContent=cc(n(e),{mode:`root`,banner:!1})),s(o,e),o.documentElement.setAttribute(`data-theme`,r),a?o.documentElement.setAttribute(`data-lumlocker`,``):o.documentElement.removeAttribute(`data-lumlocker`),ml(o)});return()=>cancelAnimationFrame(o)}),On(()=>{let e=U(_),r=t.overrides,i=U(S),a=U(C),o=wl.value;if(!e)return;let c=requestAnimationFrame(()=>{let e=cc(n(r),{mode:`root`,banner:!1}),t=e=>{o?e.documentElement.setAttribute(`data-lumlocker`,``):e.documentElement.removeAttribute(`data-lumlocker`)},c=!1,l=!1;if(U(y)&&i>0){let n=U(y).contentDocument;if(n){let i=n.getElementById(`slashed-overrides`);i&&(i.textContent=e),s(n,r),t(n),ml(n),c=!0}}if(U(b)&&a>0){let n=U(b).contentDocument;if(n){let i=n.getElementById(`slashed-overrides`);i&&(i.textContent=e),s(n,r),t(n),l=!0}}l&&!c&&gl()});return()=>cancelAnimationFrame(c)});let O=I(()=>t.previewWidth!==`fluid`);function k(){return t.previewWidth===`fluid`?`width:100%;height:100%`:t.previewWidth===`mobile`?`width:390px;height:750px;border:1px solid rgba(255,255,255,0.12);border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 32px 80px rgba(0,0,0,0.5)`:t.previewWidth===`tablet`?`width:768px;height:900px;border:1px solid rgba(255,255,255,0.12);border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 32px 80px rgba(0,0,0,0.5)`:`width:1024px;height:720px;border:1px solid rgba(255,255,255,0.12);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 32px 80px rgba(0,0,0,0.5)`}var A=Nl(),ee=z(A),te=z(ee);Y(te,21,()=>r,e=>e.id,(e,n)=>{var r=El(),i=z(r,!0);F(r),H(()=>{X(r,1,`shrink-0 px-2.5 py-0.5 rounded-md text-[10px] font-bold transition-all cursor-pointer ${t.previewTemplate===U(n).id?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(i,U(n).label)}),W(`click`,r,()=>t.onTemplateChange(U(n).id)),K(e,r)}),F(te);var j=V(te,4);Y(j,20,()=>[`fluid`,`desktop`,`tablet`,`mobile`],e=>e,(e,n)=>{var r=Dl(),i=z(r),a=e=>{ho(e,{class:`w-3 h-3`})},o=e=>{To(e,{class:`w-3 h-3`})},s=e=>{Ha(e,{class:`w-3 h-3`})};J(i,e=>{n===`mobile`?e(a):n===`tablet`?e(o,1):e(s,-1)}),F(r),H(()=>{Q(r,`title`,n===`fluid`?`Full width`:n===`desktop`?`Desktop (1024px)`:n===`tablet`?`Tablet (768px)`:`Mobile (390px)`),X(r,1,`p-1 rounded-md transition-all cursor-pointer ${t.previewWidth===n?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`)}),W(`click`,r,()=>t.onWidthChange(n)),K(e,r)}),F(j);var ne=V(j,2),M=z(ne);xo(z(M),{class:`w-3 h-3`}),F(M);var re=V(M,2);Wa(z(re),{class:`w-3 h-3`}),F(re);var ie=V(re,2);Sa(z(ie),{class:`w-3 h-3`}),F(ie),F(ne);var ae=V(ne,4),oe=z(ae);oe.value=oe.__value=`normal`;var se=V(oe);se.value=se.__value=`slow`;var N=V(se);N.value=N.__value=`none`,F(ae);var ce;Di(ae);var le=V(ae,2);eo(z(le),{class:`w-3 h-3`}),F(le);var ue=V(le,2);Aa(z(ue),{class:`w-3 h-3`}),F(ue),F(ee);var de=V(ee,2),fe=z(de),pe=e=>{var t=Al(),n=z(t),r=z(n),i=z(r);xo(z(i),{class:`w-2.5 h-2.5`}),Me(),F(i),F(r),ri(V(r,2),()=>U(w),e=>{var t=Ol();Qi(t,e=>R(y,e),()=>U(y)),H(()=>Q(t,`srcdoc`,U(E))),zr(`load`,t,()=>{R(S,U(S)+1)}),Lr(t),K(e,t)}),F(n);var a=V(n,2),o=z(a),s=z(o);Wa(z(s),{class:`w-2.5 h-2.5`}),Me(),F(s),F(o),ri(V(o,2),()=>U(w),e=>{var t=kl();Qi(t,e=>R(b,e),()=>U(b)),H(()=>Q(t,`srcdoc`,U(D))),zr(`load`,t,()=>{R(C,U(C)+1)}),Lr(t),K(e,t)}),F(a),F(t),K(e,t)},me=e=>{var t=Ml();ri(z(t),()=>U(w),e=>{var t=jl();Qi(t,e=>R(v,e),()=>U(v)),H(()=>Q(t,`srcdoc`,U(T))),zr(`load`,t,()=>{R(x,U(x)+1)}),Lr(t),K(e,t)}),F(t),H(e=>{Z(t,e),X(t,1,yi(U(O)?``:`w-full h-full`))},[()=>k()]),K(e,t)};J(fe,e=>{U(_)?e(pe):e(me,-1)}),F(de),F(A),H(()=>{X(M,1,`p-1 rounded-md transition-all cursor-pointer ${!U(_)&&t.previewTheme===`light`?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),X(re,1,`p-1 rounded-md transition-all cursor-pointer ${!U(_)&&t.previewTheme===`dark`?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),X(ie,1,`p-1 rounded-md transition-all cursor-pointer ${U(_)?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),ce!==(ce=t.previewMotion)&&(ae.value=(ae.__value=t.previewMotion)??``,Ei(ae,t.previewMotion)),X(de,1,`flex-1 min-h-0 flex overflow-auto ${U(O)&&!U(_)?`items-center justify-center bg-slate-100 dark:bg-[#06060a]`:``}`)}),W(`click`,M,()=>{R(_,!1),t.onThemeChange(`light`)}),W(`click`,re,()=>{R(_,!1),t.onThemeChange(`dark`)}),W(`click`,ie,()=>{R(_,!U(_))}),W(`change`,ae,e=>t.onMotionChange(e.target.value)),W(`click`,le,()=>{R(x,0),R(S,0),R(C,0),R(w,U(w)+1)}),W(`click`,ue,()=>{let e=new Blob([g(t.overrides,t.previewTheme,t.previewMotion,t.previewTemplate,Tl)],{type:`text/html`}),n=URL.createObjectURL(e);window.open(n,`_blank`)}),K(e,A),We()}Br([`click`,`change`]);var Fl={macros:[`prose`,`flow-space`,`line-clamp`,`aspect`,`scroll-shadow`,`scrim`,`surface-color`,`surface-bg`,`content-intrinsic`,`corner-scoop`,`overlap-`],colors:[`color`,`contrast`,`palette-mix`,`lumlocker`,`gradient`],typography:[`font`,`--sf-text`,`leading`,`tracking`,`weight`,`body-font`,`heading-font`,`body-em`,`body-text`,`heading-text`,`display-l-`,`display-m-`,`-h1-`,`-h2-`,`-h3-`,`-h4-`,`-h5-`,`-h6-`,`link-`,`optical-sizing`,`fluid-width`,`fluid-min-vw`,`fluid-max-vw`],spacing:[`space`,`section`,`gutter`,`content-gap`,`component-pad`],layout:[`container`,`layout`,`grid`,`breakpoint`,`measure`,`column`,`header-height`,`touch-target`,`bento`,`cluster`,`cover-min`,`equal-min`,`equal-rule`,`frame`,`ratio-`,`reel`,`safe-`,`sidebar`,`switcher`,`-bg-`],components:[`btn-`,`card-`],borders:[`radius`,`border-width`,`border-scale`,`border-style`,`divider`],shadows:[`shadow`],motion:[`motion`,`duration`,`easing`,`ease`,`scroll-timeline`],effects:[`filter`,`blur`,`backdrop`,`opacity`,`effect`],misc:[`z-`,`cursor`,`ring`,`focus`,`outline`,`selection`,`icon`,`sf-is-active`,`sf-is-current`,`sf-is-open`,`sf-is-pressed`,`field-required`,`object-fit`,`object-position`,`print-`,`scrollbar`,`size-`]};function Il(e){for(let[t,n]of Object.entries(Fl))if(t!==`misc`&&n.some(t=>e.includes(t)))return t;return`misc`}var Ll=G(`You have .`,1),Rl=G(``),zl=G(` `),Bl=G(``),Vl=G(``),Hl=G(`

No saved themes yet. Configure tokens, then save.

`),Ul=G(``),Wl=G(`
`),Gl=G(`
SLASHED Studio

Configure every SLASHED design token visually. Changes appear live in the preview.

Token domains
Tools
Saved themes
`);function Kl(e,t){Ue(t,!0);let n=[{id:`colors`,icon:Ja,label:`Colors`,desc:`Brand, semantic & neutral palettes`},{id:`typography`,icon:ko,label:`Typography`,desc:`Font families & fluid type scale`},{id:`spacing`,icon:io,label:`Spacing`,desc:`Space scale & section rhythm`},{id:`layout`,icon:zo,label:`Layout`,desc:`Containers, grids & primitives`},{id:`borders`,icon:yo,label:`Borders`,desc:`Corner radius & border widths`},{id:`shadows`,icon:Ia,label:`Shadows`,desc:`Elevation & depth control`},{id:`motion`,icon:No,label:`Motion`,desc:`Duration & easing curves`},{id:`effects`,icon:_o,label:`Effects`,desc:`Blur, opacity & scrollbars`},{id:`macros`,icon:ma,label:`Macros`,desc:`Flow, prose, aspect & scrim`},{id:`misc`,icon:Xa,label:`Misc`,desc:`Z-index & remaining tokens`},{id:`components`,icon:wa,label:`Components`,desc:`Button & card component tokens`}],r=[{id:`themes`,icon:Co,label:`Themes`,desc:`Save & re-apply configurations`},{id:`wcag`,icon:uo,label:`WCAG`,desc:`Contrast checker & fixes`},{id:`setup`,icon:Ka,label:`Install`,desc:`Export overrides & setup`},{id:`cheatsheet`,icon:ga,label:`Classes`,desc:`Utility class reference`}];function i(e){return Object.keys(t.overrides).filter(t=>Il(t)===e).length}let a=I(()=>Object.keys(t.overrides).length),o=L(nn(yc())),s=L(``);function c(){U(a)!==0&&(R(o,bc(U(s),t.overrides),!0),R(s,``))}var l=Gl(),u=z(l),d=z(u);_o(z(d),{class:`w-4 h-4 text-indigo-600 dark:text-indigo-400`}),Me(2),F(d);var f=V(d,2),p=V(z(f)),m=e=>{var t=Ll(),n=V(B(t)),r=z(n);F(n),Me(),H(()=>q(r,`${U(a)??``} active override${U(a)===1?``:`s`}`)),K(e,t)},h=e=>{K(e,Yr(`Pick any domain below to get started.`))};J(p,e=>{U(a)>0?e(m):e(h,-1)}),F(f);var g=V(f,2),_=e=>{var n=Rl();W(`click`,n,function(...e){t.onResetAll?.apply(this,e)}),K(e,n)};J(g,e=>{U(a)>0&&e(_)}),F(u);var v=V(u,2),y=V(z(v),2);Y(y,21,()=>n,e=>e.id,(e,n)=>{let r=I(()=>i(U(n).id)),a=I(()=>U(n).icon);var o=Bl(),s=z(o);mi(z(s),()=>U(a),(e,t)=>{t(e,{class:`w-4 h-4`})}),F(s);var c=V(s,2),l=z(c),u=z(l,!0);F(l);var d=V(l,2),f=z(d,!0);F(d),F(c);var p=V(c,2),m=e=>{var t=zl(),n=z(t,!0);F(t),H(()=>q(n,U(r))),K(e,t)};J(p,e=>{U(r)>0&&e(m)}),Me(2),F(o),H(()=>{q(u,U(n).label),q(f,U(n).desc)}),W(`click`,o,()=>t.onSelect(U(n).id)),K(e,o)}),F(y),F(v);var b=V(v,2),x=V(z(b),2);Y(x,21,()=>r,e=>e.id,(e,n)=>{let r=I(()=>U(n).icon);var i=Vl(),a=z(i);mi(z(a),()=>U(r),(e,t)=>{t(e,{class:`w-4 h-4`})}),F(a);var o=V(a,2),s=z(o),c=z(s,!0);F(s);var l=V(s,2),u=z(l,!0);F(l),F(o),Me(2),F(i),H(()=>{q(c,U(n).label),q(u,U(n).desc)}),W(`click`,i,()=>t.onSelect(U(n).id)),K(e,i)}),F(x),F(b);var S=V(b,2),C=z(S),w=V(z(C),2);F(C);var T=V(C,2),E=z(T);zi(E);var D=V(E,2);oo(z(D),{class:`w-3 h-3`}),F(D),F(T);var O=V(T,2),k=e=>{K(e,Hl())},A=e=>{var n=Wl();Y(n,21,()=>U(o).slice(0,6),e=>e.id,(e,n)=>{var r=Ul(),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o),c=z(s,!0);F(s);var l=V(s,2),u=z(l,!0);F(l),F(o),F(r),H(()=>{q(a,U(n).icon),q(c,U(n).name),q(u,U(n).blurb)}),W(`click`,r,()=>t.onApplyTheme(U(n).overrides)),K(e,r)}),F(n),K(e,n)};J(O,e=>{U(o).length===0?e(k):e(A,-1)}),F(S),F(l),H(()=>D.disabled=U(a)===0),W(`click`,w,()=>t.onSelect(`themes`)),W(`keydown`,E,e=>{e.key===`Enter`&&c()}),qi(E,()=>U(s),e=>R(s,e)),W(`click`,D,c),K(e,l),We()}Br([`click`,`keydown`]);var ql={colors:[{name:`--sf-contrast-bias`,label:`Contrast bias`,help:`Shifts the lightness threshold used by text-on-color pairing toward darker (negative) or lighter (positive) text.`,default:0,min:-1,max:1,step:.05,driving:3},{name:`--sf-contrast-threshold`,label:`Contrast threshold`,help:`OKLCH lightness above which a swatch is considered 'light' (gets dark text). Below = light text.`,default:.6,min:0,max:1,step:.01,driving:11},{name:`--sf-focus-ring-width`,label:`Focus ring width`,help:`Thickness of the focus ring on every interactive element.`,default:2,min:0,max:6,step:.5,unit:`px`,driving:1}],typography:[{name:`--sf-text-scale`,label:`Text scale`,help:`Multiplier applied to the entire fluid text ramp (2xs … 2xl).`,default:1,min:.5,max:2,step:.05,driving:9},{name:`--sf-text-display-scale`,label:`Display scale`,help:`Multiplier applied to the display ramp (display-s, display-m, display-l).`,default:1,min:.5,max:2,step:.05,driving:3}],spacing:[{name:`--sf-space-scale`,label:`Space scale`,help:`Multiplier applied to every fluid spacing step. One drag moves 45 tokens.`,default:1,min:.5,max:2,step:.05,driving:45},{name:`--sf-section-scale`,label:`Section scale`,help:`Multiplier applied to section paddings only.`,default:1,min:.5,max:2,step:.05,driving:6}],borders:[{name:`--sf-radius-scale`,label:`Radius scale`,help:`Multiplier applied to every radius step (set to 0 for sharp brutalist corners).`,default:1,min:0,max:2,step:.05,driving:8}],shadows:[{name:`--sf-shadow-strength`,label:`Shadow strength`,help:`Base shadow opacity. Auto-boosted +0.17 in dark mode. Slider sets the light-mode base.`,default:.08,min:0,max:.5,step:.01,driving:14,encode:e=>`calc(${e} + var(--sf-is-dark) * 0.17)`,decode:e=>{let t=/^calc\(\s*([\d.e+-]+)/.exec(String(e));return t?parseFloat(t[1]):NaN}}],motion:[{name:`--sf-motion-scale`,label:`Motion scale`,help:`Speed multiplier on every duration. Set to 0 to effectively disable motion.`,default:1,min:0,max:2,step:.05,driving:13}]};function Jl(e,t,n){let r=n*Math.PI/180,i=e,a=t*Math.cos(r),o=t*Math.sin(r),s=i+.3963377774*a+.2158037573*o,c=i-.1055613458*a-.0638541728*o,l=i-.0894841775*a-1.291485548*o,u=s*s*s,d=c*c*c,f=l*l*l,p=4.0767416621*u-3.3077115913*d+.2309699292*f,m=-1.2684380046*u+2.6097574011*d-.3413193965*f,h=-.0041960863*u-.7034186147*d+1.707614701*f,g=e=>e<=.0031308?12.92*e:1.055*e**(1/2.4)-.055;return[Math.max(0,Math.min(255,Math.round(g(p)*255))),Math.max(0,Math.min(255,Math.round(g(m)*255))),Math.max(0,Math.min(255,Math.round(g(h)*255)))]}function Yl(e,t,n){let r=e=>{let t=e/255;return t<=.04045?t/12.92:((t+.055)/1.055)**2.4};return .2126*r(e)+.7152*r(t)+.0722*r(n)}function Xl(e,t){let n=Math.max(e,t),r=Math.min(e,t);return(n+.05)/(r+.05)}function Zl(e){let t=e.match(/oklch\(\s*([\d.%]+)\s+([\d.]+)\s+([\d.]+)/i);if(t){let e=t[1];return{l:e.endsWith(`%`)?parseFloat(e)/100:parseFloat(e),c:parseFloat(t[2]),h:parseFloat(t[3]),valid:!0}}return{l:.5,c:.15,h:200,valid:!1}}function Ql(e,t,n){return`oklch(${e.toFixed(3)} ${t.toFixed(3)} ${Math.round(n)})`}var $l=G(` `),eu=G(`
`);function tu(e,t){Ue(t,!0);let n=ra(t,`disabled`,3,!1);function r(e){return Math.min(t.max,Math.max(t.min,e))}let i=I(()=>(t.value-t.min)/(t.max-t.min)*100);var a=eu(),o=z(a),s=V(z(o),2),c=V(s,2);zi(c);var l=V(c,2);F(o);var u=V(o,2),d=z(u);zi(d);var f=V(d,2),p=e=>{var n=$l(),r=z(n,!0);F(n),H(()=>q(r,t.unit)),K(e,n)};J(f,e=>{t.unit&&e(p)}),F(u),F(a),H(()=>{Z(s,`width: ${U(i)}%`),Q(c,`min`,t.min),Q(c,`max`,t.max),Q(c,`step`,t.step),Bi(c,t.value),c.disabled=n(),Z(l,`left: calc(${U(i)}% - 6px)`),Q(d,`min`,t.min),Q(d,`max`,t.max),Q(d,`step`,t.step),Bi(d,t.value),d.disabled=n()}),W(`input`,c,e=>t.onChange(r(parseFloat(e.target.value)))),W(`change`,d,e=>t.onChange(r(parseFloat(e.target.value)||0))),K(e,a),We()}Br([`input`,`change`]);var nu=G(`
`),ru=G(``),iu=G(`
Lightness (L)
Chroma (C)
Hue (H)
Raw value
`),au=G(`
`);function ou(e,t){Ue(t,!0);function n(e){let t=/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*\)/.exec(e);return t?{l:parseFloat(t[1]),c:parseFloat(t[2]),h:parseFloat(t[3])}:null}function r(e,t,n){return`oklch(${e.toFixed(3)} ${t.toFixed(3)} ${n.toFixed(1)})`}function i(e,t,n){let r=n*Math.PI/180,i=t*Math.cos(r),a=t*Math.sin(r),o=e+.3963377774*i+.2158037573*a,s=e-.1055613458*i-.0638541728*a,c=e-.0894841775*i-1.291485548*a,l=o*o*o,u=s*s*s,d=c*c*c,f=4.0767416621*l-3.3077115913*u+.2309699292*d,p=-1.2684380046*l+2.6097574011*u-.3413193965*d,m=-.0041960863*l-.7034186147*u+1.707614701*d,h=e=>e<=0?0:e>=1?255:Math.round(e**(1/2.2)*255);return`rgb(${h(f)},${h(p)},${h(m)})`}let a=I(()=>n(t.value)??{l:.6,c:.15,h:264}),o=L(!1),s=L(``),c=I(()=>i(U(a).l,U(a).c,U(a).h)),l=I(()=>t.tokenName.replace(`--sf-`,``));function u(e,n,i){t.onChange(r(e,n,i))}var d=au(),f=z(d),p=z(f);let m;var h=V(p,2),g=z(h),_=z(g,!0);F(g);var v=V(g,2),y=z(v,!0);F(v);var b=V(v,2),x=z(b,!0);F(b),F(h);var S=V(h,2),C=e=>{K(e,nu())};J(S,e=>{t.overridden&&e(C)});var w=V(S,2);F(f);var T=V(f,2),E=e=>{var n=iu(),r=z(n),i=z(r),o=V(z(i),2),c=z(o,!0);F(o),F(i);var l=V(i,2);tu(V(l,2),{get value(){return U(a).l},min:0,max:1,step:.005,onChange:e=>u(e,U(a).c,U(a).h)}),F(r);var d=V(r,2),f=z(d),p=V(z(f),2),m=z(p,!0);F(p),F(f),tu(V(f,2),{get value(){return U(a).c},min:0,max:.4,step:.005,onChange:e=>u(U(a).l,e,U(a).h)}),F(d);var h=V(d,2),g=z(h),_=V(z(g),2),v=z(_);F(_),F(g);var y=V(g,2);tu(V(y,2),{get value(){return U(a).h},min:0,max:360,step:1,unit:`°`,onChange:e=>u(U(a).l,U(a).c,e)}),F(h);var b=V(h,2),x=V(z(b),2),S=z(x);zi(S);var C=V(S,2),w=e=>{var n=ru();W(`click`,n,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(C,e=>{t.overridden&&e(w)}),F(x),F(b),F(n),H((e,n,r,i,a)=>{q(c,e),Z(l,n),q(m,r),q(v,`${i??``}°`),Z(y,a),Bi(S,U(s)||t.value)},[()=>U(a).l.toFixed(3),()=>`background: linear-gradient(to right, oklch(0 ${U(a).c.toFixed(3)} ${U(a).h.toFixed(1)}), oklch(1 ${U(a).c.toFixed(3)} ${U(a).h.toFixed(1)}))`,()=>U(a).c.toFixed(3),()=>U(a).h.toFixed(1),()=>`background: linear-gradient(to right, oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 0), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 60), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 120), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 180), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 240), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 300), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 360))`]),W(`input`,S,e=>{R(s,e.target.value,!0)}),zr(`blur`,S,()=>{U(s).trim()&&(t.onChange(U(s).trim()),R(s,``))}),W(`keydown`,S,e=>{e.key===`Enter`&&(U(s).trim()&&(t.onChange(U(s).trim()),R(s,``)),e.currentTarget.blur())}),K(e,n)};J(T,e=>{U(o)&&e(E)}),F(d),H(()=>{X(d,1,`rounded-xl border transition-all ${t.overridden?`bg-indigo-500/8 border-indigo-500/20`:`bg-black/4 dark:bg-white/4 border-black/8 dark:border-white/8 hover:border-black/12 dark:hover:border-white/12`}`),m=Z(p,``,m,{background:U(c)}),q(_,t.label),q(y,U(l)),q(x,t.value),X(w,1,`text-slate-500 text-[10px] transition-transform ${U(o)?`rotate-180`:``}`)}),W(`click`,f,()=>{R(o,!U(o))}),K(e,d),We()}Br([`click`,`input`,`keydown`]);var su=G(` `),cu=G(``),lu=G(`

`),uu=G(`
`);function du(e,t){Ue(t,!0);let n=I(()=>t.overrides[t.knob.name]),r=I(()=>U(n)===void 0?t.knob.default:t.knob.decode?t.knob.decode(U(n)):parseFloat(U(n))),i=I(()=>isNaN(U(r))?t.knob.default:U(r)),a=I(()=>t.knob.name in t.overrides);function o(e){let n=t.knob.encode?t.knob.encode(e):String(e);t.onChange(t.knob.name,n)}function s(){t.onChange(t.knob.name,null)}var c=uu(),l=z(c),u=z(l),d=z(u),f=z(d,!0);F(d);var p=V(d,2),m=e=>{var n=su(),r=z(n);F(n),H(()=>q(r,`→ ${t.knob.driving??``} tokens`)),K(e,n)};J(p,e=>{t.knob.driving!==void 0&&e(m)}),F(u);var h=V(u,2),g=e=>{var t=cu();W(`click`,t,s),K(e,t)};J(h,e=>{U(a)&&e(g)}),F(l);var _=V(l,2);tu(_,{get value(){return U(i)},get min(){return t.knob.min},get max(){return t.knob.max},get step(){return t.knob.step},get unit(){return t.knob.unit},onChange:o});var v=V(_,2),y=e=>{var n=lu(),r=z(n,!0);F(n),H(()=>q(r,t.knob.help)),K(e,n)};J(v,e=>{t.knob.help&&e(y)}),F(c),H(()=>q(f,t.knob.label)),K(e,c),We()}Br([`click`]);var fu=G(` `),pu=G(``),mu=G(``),hu=G(``),gu=G(``),_u=G(``),vu=G(``),yu=G(` `,1),bu=G(`

`),xu=G(` `,1),Su=G(`

`),Cu=G(`
`);function $(e,t){Ue(t,!0);let n=`__sf_custom__`;function r(e){let t=e.match(/^var\(\s*(--sf-[\w-]+)/);return t?t[1].replace(/^--sf-/,``):e}let i=I(()=>{let e=[];t.rawDefault&&e.push({label:`${r(t.rawDefault)} (default)`,value:t.rawDefault});for(let n of t.variableOptions??[])n.value!==t.rawDefault&&e.push(n);return e}),a=I(()=>U(i).find(e=>e.value===(t.currentRaw??t.rawDefault))),o=I(()=>!!t.rawDefault&&!!t.onRawSet),s=I(()=>U(o)&&(t.variableOptions?.length??0)>0),c=I(()=>!!t.currentRaw&&/^(var|calc|clamp|min|max|env)\(/.test(t.currentRaw.trim())),l=L(`none`),u=I(()=>U(s)&&U(l)===`none`&&(t.currentRaw===void 0||!!U(a))),d=I(()=>U(o)&&!U(u)&&(U(l)===`raw`||U(l)===`none`&&U(c))),f=I(()=>U(a)?.value??t.rawDefault??n),p=L(``),m=L(!1);On(()=>{U(m)||R(p,t.currentRaw??``,!0)});function h(e){if(e===n){R(l,`slider`);return}R(l,`none`),e===t.rawDefault?t.onReset():t.onRawSet?.(e)}function g(){R(l,`none`),t.onReset()}var _=Cu(),v=z(_),y=z(v),b=e=>{var n=fu(),r=z(n,!0);F(n),H(()=>q(r,t.label)),K(e,n)},x=e=>{K(e,pu())};J(y,e=>{t.label?e(b):e(x,-1)});var S=V(y,2),C=z(S),w=e=>{var t=mu();H(()=>{Q(t,`title`,U(d)?`Switch to slider`:`Enter raw CSS value`),X(t,1,`text-[9px] font-mono cursor-pointer transition-all px-0.5 ${U(d)?`text-indigo-600 dark:text-indigo-400`:`opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 text-slate-500 hover:text-indigo-600 dark:hover:text-indigo-400`}`)}),W(`click`,t,()=>{R(l,U(d)?`slider`:`raw`,!0)}),K(e,t)};J(C,e=>{U(o)&&!U(u)&&e(w)});var T=V(C,2),E=e=>{var n=hu();W(`click`,n,()=>{R(l,`none`),t.onReset()}),K(e,n)};J(T,e=>{t.overridden&&e(E)}),F(S),F(v);var D=V(v,2),O=e=>{var r=_u(),a=z(r);Y(a,17,()=>U(i),e=>e.value,(e,t)=>{var n=gu(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).value)&&(n.value=(n.__value=U(t).value)??``)}),K(e,n)});var o=V(a);o.value=o.__value=n,F(r);var s;Di(r),H(()=>{Q(r,`aria-label`,t.label||`Value`),s!==(s=U(f))&&(r.value=(r.__value=U(f))??``,Ei(r,U(f)))}),W(`change`,r,e=>h(e.target.value)),K(e,r)},k=e=>{var n=yu(),r=B(n);zi(r);var i=V(r,2),a=e=>{var t=vu();W(`click`,t,g),K(e,t)};J(i,e=>{U(s)&&e(a)}),H(()=>{Bi(r,U(p)),Q(r,`placeholder`,t.rawDefault)}),zr(`focus`,r,()=>{R(m,!0)}),zr(`blur`,r,()=>{R(m,!1);let e=U(p).trim();e?t.onRawSet?.(e):g()}),W(`keydown`,r,e=>{e.key===`Enter`&&e.currentTarget.blur()}),W(`input`,r,e=>{R(p,e.target.value,!0)}),K(e,n)},A=e=>{var n=xu(),r=B(n);tu(r,{get value(){return t.value},get min(){return t.min},get max(){return t.max},get step(){return t.step},get unit(){return t.unit},get onChange(){return t.onChange}});var i=V(r,2),a=e=>{var n=Xr(),r=B(n),i=e=>{var t=vu();W(`click`,t,g),K(e,t)},a=e=>{var n=bu(),r=z(n);F(n),H(()=>q(r,`default: ${t.rawDefault??``}`)),K(e,n)};J(r,e=>{U(s)||t.currentRaw!==void 0?e(i):e(a,-1)}),K(e,n)};J(i,e=>{U(o)&&e(a)}),K(e,n)};J(D,e=>{U(u)?e(O):U(d)?e(k,1):e(A,-1)});var ee=V(D,2),te=e=>{var n=Su(),r=z(n,!0);F(n),H(()=>q(r,t.help)),K(e,n)};J(ee,e=>{t.help&&e(te)}),F(_),K(e,_),We()}Br([`click`,`change`,`keydown`,`input`]);var wu=G(``),Tu=G(``),Eu=G(` `),Du=G(``),Ou=G(``),ku=G(`
`);function Au(e,t){Ue(t,!0);let n=L(!1),r=L(!1),i=L(null);On(()=>{U(n)&&br().then(()=>U(i)?.focus())});function a(e){let t=e.trim();return t.startsWith(`--`)&&!t.startsWith(`var(`)?`var(${t})`:t}function o(e){fl.value;let t=a(e);return vl(t)||t||`transparent`}let s=I(()=>o(t.value||`var(${t.token})`)),c=I(()=>t.value.trim().startsWith(`var(`)||t.value.trim().startsWith(`--`));function l(e){if(e.match(/^#([0-9a-fA-F]{6})$/))return e.toLowerCase();let t=e.match(/^#([0-9a-fA-F]{3})$/);if(t)return`#`+t[1].split(``).map(e=>e+e).join(``);let n=e.match(/rgb\w*\((\d+)[,\s]+(\d+)[,\s]+(\d+)/);return n?`#`+[n[1],n[2],n[3]].map(e=>parseInt(e).toString(16).padStart(2,`0`)).join(``):`#6366f1`}var u=ku(),d=z(u),f=z(d);let p;var m=V(f,2),h=e=>{var n=wu();zi(n),H(e=>Bi(n,e),[()=>l(U(s))]),W(`input`,n,e=>t.onSet(e.target.value)),K(e,n)};J(m,e=>{U(c)||e(h)}),F(d);var g=V(d,2),_=e=>{var o=Tu();zi(o),Qi(o,e=>R(i,e),()=>U(i)),H(()=>{Bi(o,t.value),Q(o,`placeholder`,t.placeholder??`default`)}),zr(`blur`,o,e=>{if(U(r)){R(r,!1),R(n,!1);return}let i=a(e.target.value);i?t.onSet(i):t.onReset(),R(n,!1)}),W(`keydown`,o,e=>{e.key===`Enter`&&e.currentTarget.blur(),e.key===`Escape`&&(R(r,!0),R(n,!1))}),K(e,o)},v=e=>{var r=Du(),i=z(r),a=e=>{var n=Eu(),r=z(n,!0);F(n),H(()=>q(r,t.value)),K(e,n)},o=e=>{var n=Yr();H(()=>q(n,t.placeholder??`default`)),K(e,n)};J(i,e=>{t.isOverridden?e(a):e(o,-1)}),F(r),W(`click`,r,()=>{R(n,!0)}),K(e,r)};J(g,e=>{U(n)?e(_):e(v,-1)});var y=V(g,2),b=e=>{var n=Ou();W(`click`,n,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(y,e=>{t.isOverridden&&e(b)}),F(u),H(()=>p=Z(f,``,p,{background:U(s)})),K(e,u),We()}Br([`input`,`keydown`,`click`]);var ju=(e,t=f)=>{var n=Mu(),r=z(n,!0);F(n),H(()=>q(r,t())),K(e,n)},Mu=G(``),Nu=G(`
Aa
`),Pu=G(`
`),Fu=G(`
`),Iu=G(``),Lu=G(`
`),Ru=G(`
`),zu=G(`

Absolute lightness ramp — each step pins L and inherits chroma + hue from the source. Not the brand mix curve. +`}let _=L(!1),v=L(null),y=L(null),b=L(null),x=L(0),S=L(0),C=L(0),w=L(0),T=I(()=>g({},t.previewTheme,t.previewMotion,t.previewTemplate,Tl)),E=I(()=>g({},`light`,t.previewMotion,t.previewTemplate,Tl)),D=I(()=>g({},`dark`,t.previewMotion,t.previewTemplate,Tl));On(()=>{let e=t.overrides,r=t.previewTheme,i=U(x),a=wl.value,o=requestAnimationFrame(()=>{let t=U(v);if(i===0||!t)return;let o=t.contentDocument;if(!o)return;let c=o.getElementById(`slashed-overrides`);c&&(c.textContent=cc(n(e),{mode:`root`,banner:!1})),s(o,e),o.documentElement.setAttribute(`data-theme`,r),a?o.documentElement.setAttribute(`data-lumlocker`,``):o.documentElement.removeAttribute(`data-lumlocker`),ml(o)});return()=>cancelAnimationFrame(o)}),On(()=>{let e=U(_),r=t.overrides,i=U(S),a=U(C),o=wl.value;if(!e)return;let c=requestAnimationFrame(()=>{let e=cc(n(r),{mode:`root`,banner:!1}),t=e=>{o?e.documentElement.setAttribute(`data-lumlocker`,``):e.documentElement.removeAttribute(`data-lumlocker`)},c=!1,l=!1;if(U(y)&&i>0){let n=U(y).contentDocument;if(n){let i=n.getElementById(`slashed-overrides`);i&&(i.textContent=e),s(n,r),t(n),ml(n),c=!0}}if(U(b)&&a>0){let n=U(b).contentDocument;if(n){let i=n.getElementById(`slashed-overrides`);i&&(i.textContent=e),s(n,r),t(n),l=!0}}l&&!c&&gl()});return()=>cancelAnimationFrame(c)});let O=I(()=>t.previewWidth!==`fluid`);function k(){return t.previewWidth===`fluid`?`width:100%;height:100%`:t.previewWidth===`mobile`?`width:390px;height:750px;border:1px solid rgba(255,255,255,0.12);border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 32px 80px rgba(0,0,0,0.5)`:t.previewWidth===`tablet`?`width:768px;height:900px;border:1px solid rgba(255,255,255,0.12);border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 32px 80px rgba(0,0,0,0.5)`:`width:1024px;height:720px;border:1px solid rgba(255,255,255,0.12);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 32px 80px rgba(0,0,0,0.5)`}var A=Nl(),ee=z(A),j=z(ee);Y(j,21,()=>r,e=>e.id,(e,n)=>{var r=El(),i=z(r,!0);F(r),H(()=>{X(r,1,`shrink-0 px-2.5 py-0.5 rounded-md text-[10px] font-bold transition-all cursor-pointer ${t.previewTemplate===U(n).id?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(i,U(n).label)}),W(`click`,r,()=>t.onTemplateChange(U(n).id)),K(e,r)}),F(j);var te=V(j,4);Y(te,20,()=>[`fluid`,`desktop`,`tablet`,`mobile`],e=>e,(e,n)=>{var r=Dl(),i=z(r),a=e=>{ho(e,{class:`w-3 h-3`})},o=e=>{To(e,{class:`w-3 h-3`})},s=e=>{Ha(e,{class:`w-3 h-3`})};J(i,e=>{n===`mobile`?e(a):n===`tablet`?e(o,1):e(s,-1)}),F(r),H(()=>{Q(r,`title`,n===`fluid`?`Full width`:n===`desktop`?`Desktop (1024px)`:n===`tablet`?`Tablet (768px)`:`Mobile (390px)`),X(r,1,`p-1 rounded-md transition-all cursor-pointer ${t.previewWidth===n?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`)}),W(`click`,r,()=>t.onWidthChange(n)),K(e,r)}),F(te);var ne=V(te,2),M=z(ne);xo(z(M),{class:`w-3 h-3`}),F(M);var re=V(M,2);Wa(z(re),{class:`w-3 h-3`}),F(re);var ie=V(re,2);Sa(z(ie),{class:`w-3 h-3`}),F(ie),F(ne);var ae=V(ne,4),oe=z(ae);oe.value=oe.__value=`normal`;var se=V(oe);se.value=se.__value=`slow`;var N=V(se);N.value=N.__value=`none`,F(ae);var ce;Di(ae);var le=V(ae,2);eo(z(le),{class:`w-3 h-3`}),F(le);var ue=V(le,2);Aa(z(ue),{class:`w-3 h-3`}),F(ue),F(ee);var de=V(ee,2),fe=z(de),pe=e=>{var t=Al(),n=z(t),r=z(n),i=z(r);xo(z(i),{class:`w-2.5 h-2.5`}),Me(),F(i),F(r),ri(V(r,2),()=>U(w),e=>{var t=Ol();Qi(t,e=>R(y,e),()=>U(y)),H(()=>Q(t,`srcdoc`,U(E))),zr(`load`,t,()=>{R(S,U(S)+1)}),Lr(t),K(e,t)}),F(n);var a=V(n,2),o=z(a),s=z(o);Wa(z(s),{class:`w-2.5 h-2.5`}),Me(),F(s),F(o),ri(V(o,2),()=>U(w),e=>{var t=kl();Qi(t,e=>R(b,e),()=>U(b)),H(()=>Q(t,`srcdoc`,U(D))),zr(`load`,t,()=>{R(C,U(C)+1)}),Lr(t),K(e,t)}),F(a),F(t),K(e,t)},me=e=>{var t=Ml();ri(z(t),()=>U(w),e=>{var t=jl();Qi(t,e=>R(v,e),()=>U(v)),H(()=>Q(t,`srcdoc`,U(T))),zr(`load`,t,()=>{R(x,U(x)+1)}),Lr(t),K(e,t)}),F(t),H(e=>{Z(t,e),X(t,1,yi(U(O)?``:`w-full h-full`))},[()=>k()]),K(e,t)};J(fe,e=>{U(_)?e(pe):e(me,-1)}),F(de),F(A),H(()=>{X(M,1,`p-1 rounded-md transition-all cursor-pointer ${!U(_)&&t.previewTheme===`light`?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),X(re,1,`p-1 rounded-md transition-all cursor-pointer ${!U(_)&&t.previewTheme===`dark`?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),X(ie,1,`p-1 rounded-md transition-all cursor-pointer ${U(_)?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),ce!==(ce=t.previewMotion)&&(ae.value=(ae.__value=t.previewMotion)??``,Ei(ae,t.previewMotion)),X(de,1,`flex-1 min-h-0 flex overflow-auto ${U(O)&&!U(_)?`items-center justify-center bg-slate-100 dark:bg-[#06060a]`:``}`)}),W(`click`,M,()=>{R(_,!1),t.onThemeChange(`light`)}),W(`click`,re,()=>{R(_,!1),t.onThemeChange(`dark`)}),W(`click`,ie,()=>{R(_,!U(_))}),W(`change`,ae,e=>t.onMotionChange(e.target.value)),W(`click`,le,()=>{R(x,0),R(S,0),R(C,0),R(w,U(w)+1)}),W(`click`,ue,()=>{let e=new Blob([g(t.overrides,t.previewTheme,t.previewMotion,t.previewTemplate,Tl)],{type:`text/html`}),n=URL.createObjectURL(e);window.open(n,`_blank`)}),K(e,A),We()}Br([`click`,`change`]);var Fl={macros:[`prose`,`flow-space`,`line-clamp`,`aspect`,`scroll-shadow`,`scrim`,`surface-color`,`surface-bg`,`content-intrinsic`,`corner-scoop`,`overlap-`],colors:[`color`,`contrast`,`palette-mix`,`lumlocker`,`gradient`],typography:[`font`,`--sf-text`,`leading`,`tracking`,`weight`,`body-font`,`heading-font`,`body-em`,`body-text`,`heading-text`,`display-l-`,`display-m-`,`-h1-`,`-h2-`,`-h3-`,`-h4-`,`-h5-`,`-h6-`,`link-`,`optical-sizing`,`fluid-width`,`fluid-min-vw`,`fluid-max-vw`],spacing:[`space`,`section`,`gutter`,`content-gap`,`component-pad`],layout:[`container`,`layout`,`grid`,`breakpoint`,`measure`,`column`,`header-height`,`touch-target`,`bento`,`cluster`,`cover-min`,`equal-min`,`equal-rule`,`frame`,`ratio-`,`reel`,`safe-`,`sidebar`,`switcher`,`-bg-`],components:[`btn-`,`card-`],borders:[`radius`,`border-width`,`border-scale`,`border-style`,`divider`],shadows:[`shadow`],motion:[`motion`,`duration`,`easing`,`ease`,`scroll-timeline`],effects:[`filter`,`blur`,`backdrop`,`opacity`,`effect`],misc:[`z-`,`cursor`,`ring`,`focus`,`outline`,`selection`,`icon`,`sf-is-active`,`sf-is-current`,`sf-is-open`,`sf-is-pressed`,`field-required`,`object-fit`,`object-position`,`print-`,`scrollbar`,`size-`]};function Il(e){for(let[t,n]of Object.entries(Fl))if(t!==`misc`&&n.some(t=>e.includes(t)))return t;return`misc`}var Ll=G(`You have .`,1),Rl=G(``),zl=G(` `),Bl=G(``),Vl=G(``),Hl=G(`

No saved themes yet. Configure tokens, then save.

`),Ul=G(``),Wl=G(`
`),Gl=G(`
SLASHED Studio

Configure every SLASHED design token visually. Changes appear live in the preview.

Token domains
Tools
Saved themes
`);function Kl(e,t){Ue(t,!0);let n=[{id:`colors`,icon:Ja,label:`Colors`,desc:`Brand, semantic & neutral palettes`},{id:`typography`,icon:ko,label:`Typography`,desc:`Font families & fluid type scale`},{id:`spacing`,icon:io,label:`Spacing`,desc:`Space scale & section rhythm`},{id:`layout`,icon:zo,label:`Layout`,desc:`Containers, grids & primitives`},{id:`borders`,icon:yo,label:`Borders`,desc:`Corner radius & border widths`},{id:`shadows`,icon:Ia,label:`Shadows`,desc:`Elevation & depth control`},{id:`motion`,icon:No,label:`Motion`,desc:`Duration & easing curves`},{id:`effects`,icon:_o,label:`Effects`,desc:`Blur, opacity & scrollbars`},{id:`macros`,icon:ma,label:`Macros`,desc:`Flow, prose, aspect & scrim`},{id:`misc`,icon:Xa,label:`Misc`,desc:`Z-index & remaining tokens`},{id:`components`,icon:wa,label:`Components`,desc:`Button & card component tokens`}],r=[{id:`themes`,icon:Co,label:`Themes`,desc:`Save & re-apply configurations`},{id:`wcag`,icon:uo,label:`WCAG`,desc:`Contrast checker & fixes`},{id:`setup`,icon:Ka,label:`Install`,desc:`Export overrides & setup`},{id:`cheatsheet`,icon:ga,label:`Classes`,desc:`Utility class reference`}];function i(e){return Object.keys(t.overrides).filter(t=>Il(t)===e).length}let a=I(()=>Object.keys(t.overrides).length),o=L(nn(yc())),s=L(``);function c(){U(a)!==0&&(R(o,bc(U(s),t.overrides),!0),R(s,``))}var l=Gl(),u=z(l),d=z(u);_o(z(d),{class:`w-4 h-4 text-indigo-600 dark:text-indigo-400`}),Me(2),F(d);var f=V(d,2),p=V(z(f)),m=e=>{var t=Ll(),n=V(B(t)),r=z(n);F(n),Me(),H(()=>q(r,`${U(a)??``} active override${U(a)===1?``:`s`}`)),K(e,t)},h=e=>{K(e,Yr(`Pick any domain below to get started.`))};J(p,e=>{U(a)>0?e(m):e(h,-1)}),F(f);var g=V(f,2),_=e=>{var n=Rl();W(`click`,n,function(...e){t.onResetAll?.apply(this,e)}),K(e,n)};J(g,e=>{U(a)>0&&e(_)}),F(u);var v=V(u,2),y=V(z(v),2);Y(y,21,()=>n,e=>e.id,(e,n)=>{let r=I(()=>i(U(n).id)),a=I(()=>U(n).icon);var o=Bl(),s=z(o);mi(z(s),()=>U(a),(e,t)=>{t(e,{class:`w-4 h-4`})}),F(s);var c=V(s,2),l=z(c),u=z(l,!0);F(l);var d=V(l,2),f=z(d,!0);F(d),F(c);var p=V(c,2),m=e=>{var t=zl(),n=z(t,!0);F(t),H(()=>q(n,U(r))),K(e,t)};J(p,e=>{U(r)>0&&e(m)}),Me(2),F(o),H(()=>{q(u,U(n).label),q(f,U(n).desc)}),W(`click`,o,()=>t.onSelect(U(n).id)),K(e,o)}),F(y),F(v);var b=V(v,2),x=V(z(b),2);Y(x,21,()=>r,e=>e.id,(e,n)=>{let r=I(()=>U(n).icon);var i=Vl(),a=z(i);mi(z(a),()=>U(r),(e,t)=>{t(e,{class:`w-4 h-4`})}),F(a);var o=V(a,2),s=z(o),c=z(s,!0);F(s);var l=V(s,2),u=z(l,!0);F(l),F(o),Me(2),F(i),H(()=>{q(c,U(n).label),q(u,U(n).desc)}),W(`click`,i,()=>t.onSelect(U(n).id)),K(e,i)}),F(x),F(b);var S=V(b,2),C=z(S),w=V(z(C),2);F(C);var T=V(C,2),E=z(T);zi(E);var D=V(E,2);oo(z(D),{class:`w-3 h-3`}),F(D),F(T);var O=V(T,2),k=e=>{K(e,Hl())},A=e=>{var n=Wl();Y(n,21,()=>U(o).slice(0,6),e=>e.id,(e,n)=>{var r=Ul(),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o),c=z(s,!0);F(s);var l=V(s,2),u=z(l,!0);F(l),F(o),F(r),H(()=>{q(a,U(n).icon),q(c,U(n).name),q(u,U(n).blurb)}),W(`click`,r,()=>t.onApplyTheme(U(n).overrides)),K(e,r)}),F(n),K(e,n)};J(O,e=>{U(o).length===0?e(k):e(A,-1)}),F(S),F(l),H(()=>D.disabled=U(a)===0),W(`click`,w,()=>t.onSelect(`themes`)),W(`keydown`,E,e=>{e.key===`Enter`&&c()}),qi(E,()=>U(s),e=>R(s,e)),W(`click`,D,c),K(e,l),We()}Br([`click`,`keydown`]);var ql={colors:[{name:`--sf-contrast-bias`,label:`Contrast bias`,help:`Shifts the lightness threshold used by text-on-color pairing toward darker (negative) or lighter (positive) text.`,default:0,min:-1,max:1,step:.05,driving:3},{name:`--sf-contrast-threshold`,label:`Contrast threshold`,help:`OKLCH lightness above which a swatch is considered 'light' (gets dark text). Below = light text.`,default:.6,min:0,max:1,step:.01,driving:11},{name:`--sf-focus-ring-width`,label:`Focus ring width`,help:`Thickness of the focus ring on every interactive element.`,default:2,min:0,max:6,step:.5,unit:`px`,driving:1}],typography:[{name:`--sf-text-scale`,label:`Text scale`,help:`Multiplier applied to the entire fluid text ramp (2xs … 2xl).`,default:1,min:.5,max:2,step:.05,driving:9},{name:`--sf-text-display-scale`,label:`Display scale`,help:`Multiplier applied to the display ramp (display-s, display-m, display-l).`,default:1,min:.5,max:2,step:.05,driving:3}],spacing:[{name:`--sf-space-scale`,label:`Space scale`,help:`Multiplier applied to every fluid spacing step. One drag moves 45 tokens.`,default:1,min:.5,max:2,step:.05,driving:45},{name:`--sf-section-scale`,label:`Section scale`,help:`Multiplier applied to section paddings only.`,default:1,min:.5,max:2,step:.05,driving:6}],borders:[{name:`--sf-radius-scale`,label:`Radius scale`,help:`Multiplier applied to every radius step (set to 0 for sharp brutalist corners).`,default:1,min:0,max:2,step:.05,driving:8}],shadows:[{name:`--sf-shadow-strength`,label:`Shadow strength`,help:`Base shadow opacity. Auto-boosted +0.17 in dark mode. Slider sets the light-mode base.`,default:.08,min:0,max:.5,step:.01,driving:14,encode:e=>`calc(${e} + var(--sf-is-dark) * 0.17)`,decode:e=>{let t=/^calc\(\s*([\d.e+-]+)/.exec(String(e));return t?parseFloat(t[1]):NaN}}],motion:[{name:`--sf-motion-scale`,label:`Motion scale`,help:`Speed multiplier on every duration. Set to 0 to effectively disable motion.`,default:1,min:0,max:2,step:.05,driving:13}]};function Jl(e,t,n){let r=n*Math.PI/180,i=e,a=t*Math.cos(r),o=t*Math.sin(r),s=i+.3963377774*a+.2158037573*o,c=i-.1055613458*a-.0638541728*o,l=i-.0894841775*a-1.291485548*o,u=s*s*s,d=c*c*c,f=l*l*l,p=4.0767416621*u-3.3077115913*d+.2309699292*f,m=-1.2684380046*u+2.6097574011*d-.3413193965*f,h=-.0041960863*u-.7034186147*d+1.707614701*f,g=e=>e<=.0031308?12.92*e:1.055*e**(1/2.4)-.055;return[Math.max(0,Math.min(255,Math.round(g(p)*255))),Math.max(0,Math.min(255,Math.round(g(m)*255))),Math.max(0,Math.min(255,Math.round(g(h)*255)))]}function Yl(e,t,n){let r=e=>{let t=e/255;return t<=.04045?t/12.92:((t+.055)/1.055)**2.4};return .2126*r(e)+.7152*r(t)+.0722*r(n)}function Xl(e,t){let n=Math.max(e,t),r=Math.min(e,t);return(n+.05)/(r+.05)}function Zl(e){let t=e.match(/oklch\(\s*([\d.%]+)\s+([\d.]+)\s+([\d.]+)/i);if(t){let e=t[1];return{l:e.endsWith(`%`)?parseFloat(e)/100:parseFloat(e),c:parseFloat(t[2]),h:parseFloat(t[3]),valid:!0}}return{l:.5,c:.15,h:200,valid:!1}}function Ql(e,t,n){return`oklch(${e.toFixed(3)} ${t.toFixed(3)} ${Math.round(n)})`}var $l=G(` `),eu=G(`
`);function tu(e,t){Ue(t,!0);let n=ra(t,`disabled`,3,!1);function r(e){return Math.min(t.max,Math.max(t.min,e))}let i=I(()=>(t.value-t.min)/(t.max-t.min)*100);var a=eu(),o=z(a),s=V(z(o),2),c=V(s,2);zi(c);var l=V(c,2);F(o);var u=V(o,2),d=z(u);zi(d);var f=V(d,2),p=e=>{var n=$l(),r=z(n,!0);F(n),H(()=>q(r,t.unit)),K(e,n)};J(f,e=>{t.unit&&e(p)}),F(u),F(a),H(()=>{Z(s,`width: ${U(i)}%`),Q(c,`min`,t.min),Q(c,`max`,t.max),Q(c,`step`,t.step),Bi(c,t.value),c.disabled=n(),Z(l,`left: calc(${U(i)}% - 6px)`),Q(d,`min`,t.min),Q(d,`max`,t.max),Q(d,`step`,t.step),Bi(d,t.value),d.disabled=n()}),W(`input`,c,e=>t.onChange(r(parseFloat(e.target.value)))),W(`change`,d,e=>t.onChange(r(parseFloat(e.target.value)||0))),K(e,a),We()}Br([`input`,`change`]);var nu=G(`
`),ru=G(``),iu=G(`
Lightness (L)
Chroma (C)
Hue (H)
Raw value
`),au=G(`
`);function ou(e,t){Ue(t,!0);function n(e){let t=/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*\)/.exec(e);return t?{l:parseFloat(t[1]),c:parseFloat(t[2]),h:parseFloat(t[3])}:null}function r(e,t,n){return`oklch(${e.toFixed(3)} ${t.toFixed(3)} ${n.toFixed(1)})`}function i(e,t,n){let r=n*Math.PI/180,i=t*Math.cos(r),a=t*Math.sin(r),o=e+.3963377774*i+.2158037573*a,s=e-.1055613458*i-.0638541728*a,c=e-.0894841775*i-1.291485548*a,l=o*o*o,u=s*s*s,d=c*c*c,f=4.0767416621*l-3.3077115913*u+.2309699292*d,p=-1.2684380046*l+2.6097574011*u-.3413193965*d,m=-.0041960863*l-.7034186147*u+1.707614701*d,h=e=>e<=0?0:e>=1?255:Math.round(e**(1/2.2)*255);return`rgb(${h(f)},${h(p)},${h(m)})`}let a=I(()=>n(t.value)??{l:.6,c:.15,h:264}),o=L(!1),s=L(``),c=I(()=>i(U(a).l,U(a).c,U(a).h)),l=I(()=>t.tokenName.replace(`--sf-`,``));function u(e,n,i){t.onChange(r(e,n,i))}var d=au(),f=z(d),p=z(f);let m;var h=V(p,2),g=z(h),_=z(g,!0);F(g);var v=V(g,2),y=z(v,!0);F(v);var b=V(v,2),x=z(b,!0);F(b),F(h);var S=V(h,2),C=e=>{K(e,nu())};J(S,e=>{t.overridden&&e(C)});var w=V(S,2);F(f);var T=V(f,2),E=e=>{var n=iu(),r=z(n),i=z(r),o=V(z(i),2),c=z(o,!0);F(o),F(i);var l=V(i,2);tu(V(l,2),{get value(){return U(a).l},min:0,max:1,step:.005,onChange:e=>u(e,U(a).c,U(a).h)}),F(r);var d=V(r,2),f=z(d),p=V(z(f),2),m=z(p,!0);F(p),F(f),tu(V(f,2),{get value(){return U(a).c},min:0,max:.4,step:.005,onChange:e=>u(U(a).l,e,U(a).h)}),F(d);var h=V(d,2),g=z(h),_=V(z(g),2),v=z(_);F(_),F(g);var y=V(g,2);tu(V(y,2),{get value(){return U(a).h},min:0,max:360,step:1,unit:`°`,onChange:e=>u(U(a).l,U(a).c,e)}),F(h);var b=V(h,2),x=V(z(b),2),S=z(x);zi(S);var C=V(S,2),w=e=>{var n=ru();W(`click`,n,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(C,e=>{t.overridden&&e(w)}),F(x),F(b),F(n),H((e,n,r,i,a)=>{q(c,e),Z(l,n),q(m,r),q(v,`${i??``}°`),Z(y,a),Bi(S,U(s)||t.value)},[()=>U(a).l.toFixed(3),()=>`background: linear-gradient(to right, oklch(0 ${U(a).c.toFixed(3)} ${U(a).h.toFixed(1)}), oklch(1 ${U(a).c.toFixed(3)} ${U(a).h.toFixed(1)}))`,()=>U(a).c.toFixed(3),()=>U(a).h.toFixed(1),()=>`background: linear-gradient(to right, oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 0), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 60), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 120), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 180), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 240), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 300), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 360))`]),W(`input`,S,e=>{R(s,e.target.value,!0)}),zr(`blur`,S,()=>{U(s).trim()&&(t.onChange(U(s).trim()),R(s,``))}),W(`keydown`,S,e=>{e.key===`Enter`&&(U(s).trim()&&(t.onChange(U(s).trim()),R(s,``)),e.currentTarget.blur())}),K(e,n)};J(T,e=>{U(o)&&e(E)}),F(d),H(()=>{X(d,1,`rounded-xl border transition-all ${t.overridden?`bg-indigo-500/8 border-indigo-500/20`:`bg-black/4 dark:bg-white/4 border-black/8 dark:border-white/8 hover:border-black/12 dark:hover:border-white/12`}`),m=Z(p,``,m,{background:U(c)}),q(_,t.label),q(y,U(l)),q(x,t.value),X(w,1,`text-slate-500 text-[10px] transition-transform ${U(o)?`rotate-180`:``}`)}),W(`click`,f,()=>{R(o,!U(o))}),K(e,d),We()}Br([`click`,`input`,`keydown`]);var su=G(` `),cu=G(``),lu=G(`

`),uu=G(`
`);function du(e,t){Ue(t,!0);let n=I(()=>t.overrides[t.knob.name]),r=I(()=>U(n)===void 0?t.knob.default:t.knob.decode?t.knob.decode(U(n)):parseFloat(U(n))),i=I(()=>isNaN(U(r))?t.knob.default:U(r)),a=I(()=>t.knob.name in t.overrides);function o(e){let n=t.knob.encode?t.knob.encode(e):String(e);t.onChange(t.knob.name,n)}function s(){t.onChange(t.knob.name,null)}var c=uu(),l=z(c),u=z(l),d=z(u),f=z(d,!0);F(d);var p=V(d,2),m=e=>{var n=su(),r=z(n);F(n),H(()=>q(r,`→ ${t.knob.driving??``} tokens`)),K(e,n)};J(p,e=>{t.knob.driving!==void 0&&e(m)}),F(u);var h=V(u,2),g=e=>{var t=cu();W(`click`,t,s),K(e,t)};J(h,e=>{U(a)&&e(g)}),F(l);var _=V(l,2);tu(_,{get value(){return U(i)},get min(){return t.knob.min},get max(){return t.knob.max},get step(){return t.knob.step},get unit(){return t.knob.unit},onChange:o});var v=V(_,2),y=e=>{var n=lu(),r=z(n,!0);F(n),H(()=>q(r,t.knob.help)),K(e,n)};J(v,e=>{t.knob.help&&e(y)}),F(c),H(()=>q(f,t.knob.label)),K(e,c),We()}Br([`click`]);var fu=G(` `),pu=G(``),mu=G(``),hu=G(``),gu=G(``),_u=G(``),vu=G(``),yu=G(` `,1),bu=G(`

`),xu=G(` `,1),Su=G(`

`),Cu=G(`
`);function $(e,t){Ue(t,!0);let n=`__sf_custom__`;function r(e){let t=e.match(/^var\(\s*(--sf-[\w-]+)/);return t?t[1].replace(/^--sf-/,``):e}let i=I(()=>{let e=[];t.rawDefault&&e.push({label:`${r(t.rawDefault)} (default)`,value:t.rawDefault});for(let n of t.variableOptions??[])n.value!==t.rawDefault&&e.push(n);return e}),a=I(()=>U(i).find(e=>e.value===(t.currentRaw??t.rawDefault))),o=I(()=>!!t.rawDefault&&!!t.onRawSet),s=I(()=>U(o)&&(t.variableOptions?.length??0)>0),c=I(()=>!!t.currentRaw&&/^(var|calc|clamp|min|max|env)\(/.test(t.currentRaw.trim())),l=L(`none`),u=I(()=>U(s)&&U(l)===`none`&&(t.currentRaw===void 0||!!U(a))),d=I(()=>U(o)&&!U(u)&&(U(l)===`raw`||U(l)===`none`&&U(c))),f=I(()=>U(a)?.value??t.rawDefault??n),p=L(``),m=L(!1);On(()=>{U(m)||R(p,t.currentRaw??``,!0)});function h(e){if(e===n){R(l,`slider`);return}R(l,`none`),e===t.rawDefault?t.onReset():t.onRawSet?.(e)}function g(){R(l,`none`),t.onReset()}var _=Cu(),v=z(_),y=z(v),b=e=>{var n=fu(),r=z(n,!0);F(n),H(()=>q(r,t.label)),K(e,n)},x=e=>{K(e,pu())};J(y,e=>{t.label?e(b):e(x,-1)});var S=V(y,2),C=z(S),w=e=>{var t=mu();H(()=>{Q(t,`title`,U(d)?`Switch to slider`:`Enter raw CSS value`),X(t,1,`text-[9px] font-mono cursor-pointer transition-all px-0.5 ${U(d)?`text-indigo-600 dark:text-indigo-400`:`opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 text-slate-500 hover:text-indigo-600 dark:hover:text-indigo-400`}`)}),W(`click`,t,()=>{R(l,U(d)?`slider`:`raw`,!0)}),K(e,t)};J(C,e=>{U(o)&&!U(u)&&e(w)});var T=V(C,2),E=e=>{var n=hu();W(`click`,n,()=>{R(l,`none`),t.onReset()}),K(e,n)};J(T,e=>{t.overridden&&e(E)}),F(S),F(v);var D=V(v,2),O=e=>{var r=_u(),a=z(r);Y(a,17,()=>U(i),e=>e.value,(e,t)=>{var n=gu(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).value)&&(n.value=(n.__value=U(t).value)??``)}),K(e,n)});var o=V(a);o.value=o.__value=n,F(r);var s;Di(r),H(()=>{Q(r,`aria-label`,t.label||`Value`),s!==(s=U(f))&&(r.value=(r.__value=U(f))??``,Ei(r,U(f)))}),W(`change`,r,e=>h(e.target.value)),K(e,r)},k=e=>{var n=yu(),r=B(n);zi(r);var i=V(r,2),a=e=>{var t=vu();W(`click`,t,g),K(e,t)};J(i,e=>{U(s)&&e(a)}),H(()=>{Bi(r,U(p)),Q(r,`placeholder`,t.rawDefault)}),zr(`focus`,r,()=>{R(m,!0)}),zr(`blur`,r,()=>{R(m,!1);let e=U(p).trim();e?t.onRawSet?.(e):g()}),W(`keydown`,r,e=>{e.key===`Enter`&&e.currentTarget.blur()}),W(`input`,r,e=>{R(p,e.target.value,!0)}),K(e,n)},A=e=>{var n=xu(),r=B(n);tu(r,{get value(){return t.value},get min(){return t.min},get max(){return t.max},get step(){return t.step},get unit(){return t.unit},get onChange(){return t.onChange}});var i=V(r,2),a=e=>{var n=Xr(),r=B(n),i=e=>{var t=vu();W(`click`,t,g),K(e,t)},a=e=>{var n=bu(),r=z(n);F(n),H(()=>q(r,`default: ${t.rawDefault??``}`)),K(e,n)};J(r,e=>{U(s)||t.currentRaw!==void 0?e(i):e(a,-1)}),K(e,n)};J(i,e=>{U(o)&&e(a)}),K(e,n)};J(D,e=>{U(u)?e(O):U(d)?e(k,1):e(A,-1)});var ee=V(D,2),j=e=>{var n=Su(),r=z(n,!0);F(n),H(()=>q(r,t.help)),K(e,n)};J(ee,e=>{t.help&&e(j)}),F(_),K(e,_),We()}Br([`click`,`change`,`keydown`,`input`]);var wu=G(``),Tu=G(``),Eu=G(` `),Du=G(``),Ou=G(``),ku=G(`
`);function Au(e,t){Ue(t,!0);let n=L(!1),r=L(!1),i=L(null);On(()=>{U(n)&&br().then(()=>U(i)?.focus())});function a(e){let t=e.trim();return t.startsWith(`--`)&&!t.startsWith(`var(`)?`var(${t})`:t}function o(e){fl.value;let t=a(e);return vl(t)||t||`transparent`}let s=I(()=>o(t.value||`var(${t.token})`)),c=I(()=>t.value.trim().startsWith(`var(`)||t.value.trim().startsWith(`--`));function l(e){if(e.match(/^#([0-9a-fA-F]{6})$/))return e.toLowerCase();let t=e.match(/^#([0-9a-fA-F]{3})$/);if(t)return`#`+t[1].split(``).map(e=>e+e).join(``);let n=e.match(/rgb\w*\((\d+)[,\s]+(\d+)[,\s]+(\d+)/);return n?`#`+[n[1],n[2],n[3]].map(e=>parseInt(e).toString(16).padStart(2,`0`)).join(``):`#6366f1`}var u=ku(),d=z(u),f=z(d);let p;var m=V(f,2),h=e=>{var n=wu();zi(n),H(e=>Bi(n,e),[()=>l(U(s))]),W(`input`,n,e=>t.onSet(e.target.value)),K(e,n)};J(m,e=>{U(c)||e(h)}),F(d);var g=V(d,2),_=e=>{var o=Tu();zi(o),Qi(o,e=>R(i,e),()=>U(i)),H(()=>{Bi(o,t.value),Q(o,`placeholder`,t.placeholder??`default`)}),zr(`blur`,o,e=>{if(U(r)){R(r,!1),R(n,!1);return}let i=a(e.target.value);i?t.onSet(i):t.onReset(),R(n,!1)}),W(`keydown`,o,e=>{e.key===`Enter`&&e.currentTarget.blur(),e.key===`Escape`&&(R(r,!0),R(n,!1))}),K(e,o)},v=e=>{var r=Du(),i=z(r),a=e=>{var n=Eu(),r=z(n,!0);F(n),H(()=>q(r,t.value)),K(e,n)},o=e=>{var n=Yr();H(()=>q(n,t.placeholder??`default`)),K(e,n)};J(i,e=>{t.isOverridden?e(a):e(o,-1)}),F(r),W(`click`,r,()=>{R(n,!0)}),K(e,r)};J(g,e=>{U(n)?e(_):e(v,-1)});var y=V(g,2),b=e=>{var n=Ou();W(`click`,n,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(y,e=>{t.isOverridden&&e(b)}),F(u),H(()=>p=Z(f,``,p,{background:U(s)})),K(e,u),We()}Br([`input`,`keydown`,`click`]);var ju=(e,t=f)=>{var n=Mu(),r=z(n,!0);F(n),H(()=>q(r,t())),K(e,n)},Mu=G(``),Nu=G(`
Aa
`),Pu=G(`
`),Fu=G(`
`),Iu=G(``),Lu=G(`
`),Ru=G(`
`),zu=G(`

Absolute lightness ramp — each step pins L and inherits chroma + hue from the source. Not the brand mix curve. Light and dark use the same L per step, so at the default near-zero chroma the two rows look almost identical — add chroma above to see them diverge by hue.

`),Bu=G(`
L
D
`,1),Vu=G(`
`),Hu=G(`
`),Uu=G(`

OKLCH source values — all 200+ derived color steps are computed automatically. Tints (50–400) mix toward Base (the "Surface" color) and shades (600–950) mix toward Text (driven by Neutral) — so editing Base or Neutral below @@ -5649,22 +5791,22 @@ ${h[i]} lightness — useful for always-stable sections. Enable on canvas to preview.

Color Current Locked
`,1),Ku=G(` `),qu=G(`
`),Ju=G(`
`),Yu=G(`

Status colors don't ride the brand mix curve — only the resolved color plus subtle/muted alpha washes and a strong shade are derived. There's no -50…-950 ramp for success/warning/info/danger.

`),Xu=G(`

Dark mode is auto-derived from each light source by default. Switch to Manual dark to set a bespoke dark value.

`,1),Zu=G(`
Aa
`),Qu=G(``),$u=G(`

Controls whether text on brand-coloured surfaces is light or dark.

`,1),ed=G(``),td=G(`
`),nd=G(`
`),rd=G(`
`),id=G(`

Controls how much color is mixed into each palette step. Step 500 is always the source color.

Tints (50–400) — mixed toward surface
Shades (600–950) — mixed toward text
Palette & curve preview

Bar height = mix amount · fill = the resolved primary palette swatch at each step

Mini palettes — all brand colors
`,1),ad=G(``),od=G(`
Dir
`),sd=G(`
Angle
`),cd=G(`
Stops
default:
`),ld=G(`
`,1),ud=G(`

Auto-derived from your brand colors. Use the angle/direction and stop - controls, or edit the raw value for full control.

`,1),dd=G(`

--sf-color-scheme — sets the CSS color-scheme property on the root, controlling browser UI (scrollbars, inputs) and default background.

`,1),fd=G(`
`),pd=G(`

Direct color overrides for tokens the framework auto-derives. Use for edge cases.

`,1),md=G(`
Semantic colors

Live preview — every semantic role on its on-color text, shown in light and dark. Resolved from the canvas, updates as you edit.

All tokens tab — override individual color steps (50–950), semantic aliases, or surface tokens directly.

`);function hd(e,t){Ue(t,!0);function n(e,t){return fl.value,vl(e)||t}function r(e,t){fl.value;let n=Cl(e);return n&&n!==`none`?n:t}function i(e,t,n){return fl.value,bl(e,t)||n}let a=[{name:`--sf-gradient-primary`,label:`Primary`,group:`brand`,kind:`angle`,space:`oklch`,angle:135,dir:`right`,stop1:`var(--sf-color-primary)`,stop2:`oklch(from var(--sf-color-primary) calc(l - 0.08) c h)`,formula:`linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) calc(l - 0.08) c h))`},{name:`--sf-gradient-secondary`,label:`Secondary`,group:`brand`,kind:`angle`,space:`oklch`,angle:135,dir:`right`,stop1:`var(--sf-color-secondary)`,stop2:`oklch(from var(--sf-color-secondary) calc(l - 0.08) c h)`,formula:`linear-gradient(in oklch 135deg, var(--sf-color-secondary), oklch(from var(--sf-color-secondary) calc(l - 0.08) c h))`},{name:`--sf-gradient-tertiary`,label:`Tertiary`,group:`brand`,kind:`angle`,space:`oklch`,angle:135,dir:`right`,stop1:`var(--sf-color-tertiary)`,stop2:`oklch(from var(--sf-color-tertiary) calc(l - 0.08) c h)`,formula:`linear-gradient(in oklch 135deg, var(--sf-color-tertiary), oklch(from var(--sf-color-tertiary) calc(l - 0.08) c h))`},{name:`--sf-gradient-brand`,label:`Brand`,group:`brand`,kind:`angle`,space:`oklch`,angle:135,dir:`right`,stop1:`var(--sf-color-primary)`,stop2:`oklch(from var(--sf-color-primary) l c calc(h + 30))`,formula:`linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) l c calc(h + 30)))`},{name:`--sf-gradient-surface`,label:`Surface`,group:`brand`,kind:`angle`,space:`oklab`,angle:180,dir:`bottom`,stop1:`var(--sf-color-surface)`,stop2:`var(--sf-color-bg)`,formula:`linear-gradient(in oklab 180deg, var(--sf-color-surface), var(--sf-color-bg))`},{name:`--sf-gradient-fade--r`,label:`Fade →`,group:`fade`,kind:`dir`,space:`oklch`,angle:90,dir:`right`,stop1:`transparent`,stop2:`var(--sf-color-bg)`,formula:`linear-gradient(in oklch to right, transparent, var(--sf-color-bg))`},{name:`--sf-gradient-fade--l`,label:`Fade ←`,group:`fade`,kind:`dir`,space:`oklch`,angle:270,dir:`left`,stop1:`transparent`,stop2:`var(--sf-color-bg)`,formula:`linear-gradient(in oklch to left, transparent, var(--sf-color-bg))`},{name:`--sf-gradient-fade--t`,label:`Fade ↑`,group:`fade`,kind:`dir`,space:`oklch`,angle:0,dir:`top`,stop1:`transparent`,stop2:`var(--sf-color-bg)`,formula:`linear-gradient(in oklch to top, transparent, var(--sf-color-bg))`},{name:`--sf-gradient-fade--b`,label:`Fade ↓`,group:`fade`,kind:`dir`,space:`oklch`,angle:180,dir:`bottom`,stop1:`transparent`,stop2:`var(--sf-color-bg)`,formula:`linear-gradient(in oklch to bottom, transparent, var(--sf-color-bg))`}],o=[{key:`primary`,label:`Primary`},{key:`secondary`,label:`Secondary`},{key:`tertiary`,label:`Tertiary`},{key:`action`,label:`Action`}],s=[{name:`--sf-color-primary-source-light`,label:`Primary`,side:`light`,default:`oklch(0.47 0.27 264)`,colorKey:`primary`},{name:`--sf-color-primary-source-dark`,label:`Primary`,side:`dark`,default:`oklch(0.715 0.243 264)`,colorKey:`primary`},{name:`--sf-color-secondary-source-light`,label:`Secondary`,side:`light`,default:`oklch(0.22 0.04 264)`,colorKey:`secondary`},{name:`--sf-color-secondary-source-dark`,label:`Secondary`,side:`dark`,default:`oklch(0.84 0.036 264)`,colorKey:`secondary`},{name:`--sf-color-tertiary-source-light`,label:`Tertiary`,side:`light`,default:`oklch(0.42 0.22 295)`,colorKey:`tertiary`},{name:`--sf-color-tertiary-source-dark`,label:`Tertiary`,side:`dark`,default:`oklch(0.74 0.198 295)`,colorKey:`tertiary`},{name:`--sf-color-action-source-light`,label:`Action`,side:`light`,default:`oklch(0.50 0.22 235)`,colorKey:`action`},{name:`--sf-color-action-source-dark`,label:`Action`,side:`dark`,default:`oklch(0.70 0.198 235)`,colorKey:`action`},{name:`--sf-color-neutral-source-light`,label:`Neutral`,side:`light`,default:`oklch(0.52 0.025 260)`,colorKey:`neutral`},{name:`--sf-color-neutral-source-dark`,label:`Neutral`,side:`dark`,default:`oklch(0.69 0.0225 260)`,colorKey:`neutral`},{name:`--sf-color-base-source-light`,label:`Base`,side:`light`,default:`oklch(0.96 0.006 250)`,colorKey:`base`},{name:`--sf-color-base-source-dark`,label:`Base`,side:`dark`,default:`oklch(0.22 0.003 250)`,colorKey:`base`}],c=[{name:`--sf-color-success-source-light`,label:`Success`,side:`light`,default:`oklch(0.50 0.16 145)`,colorKey:`success`},{name:`--sf-color-success-source-dark`,label:`Success`,side:`dark`,default:`oklch(0.70 0.144 145)`,colorKey:`success`},{name:`--sf-color-warning-source-light`,label:`Warning`,side:`light`,default:`oklch(0.75 0.17 80)`,colorKey:`warning`},{name:`--sf-color-warning-source-dark`,label:`Warning`,side:`dark`,default:`oklch(0.65 0.153 80)`,colorKey:`warning`},{name:`--sf-color-info-source-light`,label:`Info`,side:`light`,default:`oklch(0.48 0.18 235)`,colorKey:`info`},{name:`--sf-color-info-source-dark`,label:`Info`,side:`dark`,default:`oklch(0.71 0.162 235)`,colorKey:`info`},{name:`--sf-color-danger-source-light`,label:`Danger`,side:`light`,default:`oklch(0.48 0.22 12)`,colorKey:`danger`},{name:`--sf-color-danger-source-dark`,label:`Danger`,side:`dark`,default:`oklch(0.73 0.198 12)`,colorKey:`danger`}],l=[{name:`--sf-palette-mix-50`,label:`50`,step:`tint`,default:4},{name:`--sf-palette-mix-100`,label:`100`,step:`tint`,default:8},{name:`--sf-palette-mix-200`,label:`200`,step:`tint`,default:20},{name:`--sf-palette-mix-300`,label:`300`,step:`tint`,default:40},{name:`--sf-palette-mix-400`,label:`400`,step:`tint`,default:65},{name:`--sf-palette-mix-600`,label:`600`,step:`shade`,default:82},{name:`--sf-palette-mix-700`,label:`700`,step:`shade`,default:62},{name:`--sf-palette-mix-800`,label:`800`,step:`shade`,default:38},{name:`--sf-palette-mix-900`,label:`900`,step:`shade`,default:18},{name:`--sf-palette-mix-950`,label:`950`,step:`shade`,default:8}],u=[{label:`Softer`,desc:`Low contrast palette`,patch:{"--sf-palette-mix-50":`3%`,"--sf-palette-mix-100":`6%`,"--sf-palette-mix-200":`14%`,"--sf-palette-mix-300":`30%`,"--sf-palette-mix-400":`55%`,"--sf-palette-mix-600":`72%`,"--sf-palette-mix-700":`52%`,"--sf-palette-mix-800":`28%`,"--sf-palette-mix-900":`12%`,"--sf-palette-mix-950":`5%`}},{label:`Default`,desc:`Balanced contrast`,patch:Object.fromEntries(l.map(e=>[e.name,null]))},{label:`Punchy`,desc:`High contrast palette`,patch:{"--sf-palette-mix-50":`6%`,"--sf-palette-mix-100":`12%`,"--sf-palette-mix-200":`28%`,"--sf-palette-mix-300":`52%`,"--sf-palette-mix-400":`78%`,"--sf-palette-mix-600":`90%`,"--sf-palette-mix-700":`72%`,"--sf-palette-mix-800":`50%`,"--sf-palette-mix-900":`26%`,"--sf-palette-mix-950":`12%`}}],d=[{name:`--sf-color-link`,label:`Link`},{name:`--sf-color-link--visited`,label:`Link visited`},{name:`--sf-color-mark-bg`,label:`Mark background`},{name:`--sf-color-mark-text`,label:`Mark text`},{name:`--sf-color-code-bg`,label:`Code background`},{name:`--sf-color-code-text`,label:`Code text`},{name:`--sf-color-overlay`,label:`Overlay`},{name:`--sf-color-black`,label:`Black`},{name:`--sf-color-white`,label:`White`},{name:`--sf-color-dim`,label:`Dim (translucent black)`}],f=[`50`,`100`,`200`,`300`,`400`,`500`,`600`,`700`,`800`,`900`,`950`],p=[`primary`,`secondary`,`tertiary`,`action`,`neutral`],m={50:.97,100:.94,200:.88,300:.78,400:.65,500:.5,600:.37,700:.27,800:.17,900:.11,950:.06},g=[...p,`base`],_=[{label:`Base`,expr:e=>`var(--sf-color-${e})`},{label:`Subtle`,expr:e=>`var(--sf-color-${e}-subtle)`},{label:`Muted`,expr:e=>`var(--sf-color-${e}-muted)`},{label:`Strong`,expr:e=>`var(--sf-color-${e}-strong)`}],v=[...s,...c],y=[{heading:`Brand`,items:[{name:`--sf-color-primary`,label:`Primary`,fg:`--sf-color-text--on-primary`},{name:`--sf-color-secondary`,label:`Secondary`,fg:`--sf-color-text--on-secondary`},{name:`--sf-color-tertiary`,label:`Tertiary`,fg:`--sf-color-text--on-tertiary`},{name:`--sf-color-action`,label:`Action`,fg:`--sf-color-text--on-action`},{name:`--sf-color-neutral`,label:`Neutral`,fg:`--sf-color-text--on-neutral`}]},{heading:`Status`,items:[{name:`--sf-color-success`,label:`Success`,fg:`--sf-color-text--on-success`},{name:`--sf-color-warning`,label:`Warning`,fg:`--sf-color-text--on-warning`},{name:`--sf-color-info`,label:`Info`,fg:`--sf-color-text--on-info`},{name:`--sf-color-danger`,label:`Danger`,fg:`--sf-color-text--on-danger`}]},{heading:`Surfaces & text`,items:[{name:`--sf-color-bg`,label:`Bg`,fg:`--sf-color-text`},{name:`--sf-color-surface`,label:`Surface`,fg:`--sf-color-text`},{name:`--sf-color-raised`,label:`Raised`,fg:`--sf-color-text`},{name:`--sf-color-inset`,label:`Inset`,fg:`--sf-color-text`},{name:`--sf-color-inverse`,label:`Inverse`,fg:`--sf-color-text--on-inverse`}]}],b=(ql.colors??[]).filter(e=>e.name===`--sf-contrast-bias`||e.name===`--sf-contrast-threshold`),x=(ql.colors??[]).filter(e=>e.name===`--sf-focus-ring-width`),S=L(!1),C=L(!1),w=L(!1),T=L(!1),E=L(!1),D=L(!1),O=L(!1),k=L(!1),A=L(`light`),ee=nn({}),te=I(()=>parseFloat(t.overrides[`--sf-lumlocker`]??`0.65`));function j(e){let t=e.match(/^linear-gradient\(\s*in\s+(\S+)\s+(to\s+\w+|\d+deg)\s*,(.+)\)$/i);if(!t)return null;let n=t[1],r=t[2].trim(),i=r.startsWith(`to `),a=i?r.slice(3).trim():`right`,o=i?0:parseInt(r),s=0,c=0,l=[],u=t[3];for(let e=0;ee.name===r)?.default??``;return i?`oklch(from ${i} ${U(te)} c h)`:``}let oe=L(nn(new Set(v.filter(e=>e.side===`light`&&!((v.find(t=>t.colorKey===e.colorKey&&t.side===`dark`)?.name??``)in t.overrides)).map(e=>e.colorKey)))),se=I(()=>{let e={};for(let n of t.tokens)v.some(e=>e.name===n.name)&&(e[n.name]=n);return e});function N(e){return e?t.overrides[e.name]??U(se)[e.name]?.value??e.default:``}function ce(e){return v.find(t=>t.name===e)}let le=I(()=>u.find(e=>Object.entries(e.patch).every(([e,n])=>n===null?!(e in t.overrides):t.overrides[e]===n)));function ue(e){let n=t.overrides[e.name];return n?parseFloat(n):e.default}let de=[];for(let e=0;ee.label===t);if(!a)return e;let o=`color-mix(in oklab, ${e} ${ue(a)}%, ${i?n:r})`;return vl(o)||o}function ye(e,t){fl.value;let n=m[t];if(n===void 0)return e;let r=`oklch(from ${e} ${n} c h)`;return vl(r)||r}function be(e,t,n,r,i){return e===`base`?ye(t,n):ve(t,n,r,i)}function xe(e,n,r){t.onSet(e.name,r)}function Se(e,n,r){let i=!!(n&&n.name in t.overrides);if(U(oe).has(e)&&!i){let i=N(v.find(e=>e.name===r));n&&t.onSet(n.name,pe(i,e)),R(oe,new Set([...U(oe)].filter(t=>t!==e)),!0)}else n&&t.onBulkChange({[n.name]:null}),R(oe,new Set([...U(oe),e]),!0)}let Ce=[{label:`Body text on surface`,fg:`var(--sf-color-text)`,bg:`var(--sf-color-surface)`},{label:`White on primary`,fg:`#ffffff`,bg:`var(--sf-color-primary)`},{label:`Primary on surface`,fg:`var(--sf-color-primary)`,bg:`var(--sf-color-surface)`}];function we(e,t){fl.value;let n=Sl(e),r=Sl(t);return!n||!r?null:Xl(Yl(...n),Yl(...r))}var Te=md(),Ee=z(Te),De=V(z(Ee),4);Y(De,21,()=>y,e=>e.heading,(e,t)=>{var n=Fu(),r=z(n),a=z(r,!0);F(r),Y(V(r,2),16,()=>[`light`,`dark`],e=>e,(e,n)=>{var r=Pu(),a=z(r),o=z(a,!0);F(a);var s=V(a,2);Y(s,21,()=>U(t).items,e=>e.name,(e,t)=>{let r=I(()=>i(`var(${U(t).name})`,n,`transparent`)),a=I(()=>i(`var(${U(t).fg})`,n,`currentColor`));var o=Nu(),s=V(z(o),2),c=z(s,!0);F(s),F(o),H(()=>{Z(o,`background:${U(r)}; color:${U(a)}`),Q(o,`title`,`${U(t).name} (${n}) — ${U(r)}`),q(c,U(t).label)}),K(e,o)}),F(s),F(r),H(()=>q(o,n===`light`?`L`:`D`)),K(e,r)}),F(n),H(()=>q(a,U(t).heading)),K(e,n)}),F(De),F(Ee);var P=V(Ee,4),Oe=z(P),ke=V(z(Oe),2),Ae=z(ke,!0);F(ke),F(Oe);var je=V(Oe,2),Ne=e=>{var r=Uu(),i=V(B(r),2);Y(i,21,()=>de,([e,t])=>e.name,(e,r)=>{var i=I(()=>h(U(r),2));let a=()=>U(i)[0],o=()=>U(i)[1],s=I(()=>!!(o()&&o().name in t.overrides)),c=I(()=>U(oe).has(a().colorKey)&&!U(s));var l=Hu(),u=z(l),d=z(u),p=z(d,!0);F(d);var m=V(d,2),_=e=>{var t=Iu(),n=z(t,!0);F(t),H(()=>{X(t,1,`text-[8px] px-1.5 py-0.5 rounded border transition-all cursor-pointer ${U(c)?`border-indigo-500/40 bg-indigo-500/15 text-indigo-700 dark:text-indigo-300`:`border-black/10 dark:border-white/10 text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(n,U(c)?`Auto dark`:`Manual dark`)}),W(`click`,t,()=>Se(a().colorKey,o(),a().name)),K(e,t)};J(m,e=>{o()&&e(_)}),F(u);var v=V(u,2);{let e=I(()=>`${a().label} (light)`),n=I(()=>N(a())),r=I(()=>a().name in t.overrides);ou(v,{get label(){return U(e)},get tokenName(){return a().name},get value(){return U(n)},get overridden(){return U(r)},onChange:e=>xe(a(),o(),e),onReset:()=>t.onReset(a().name)})}var y=V(v,2),b=e=>{let t=I(()=>N(a())),n=I(()=>U(c)?pe(U(t),a().colorKey):o()?N(o()):U(t)),r=I(me),i=I(he),s=I(ge),l=I(_e);var u=Bu(),d=B(u),p=z(d),m=V(z(p),2);Y(m,20,()=>f,e=>e,(e,n)=>{let i=I(()=>be(a().colorKey,U(t),n,U(r),U(s)));var o=Lu();let c;ju(z(o),()=>`${a().colorKey}-${n}`),F(o),H(()=>{Q(o,`title`,`${a().colorKey}-${n} (light) — ${U(i)}`),c=Z(o,``,c,{background:U(i)})}),K(e,o)}),F(m),F(p);var h=V(p,2),g=V(z(h),2);Y(g,20,()=>f,e=>e,(e,t)=>{let r=I(()=>be(a().colorKey,U(n),t,U(i),U(l)));var o=Ru();let s;ju(z(o),()=>`${a().colorKey}-${t}`),F(o),H(()=>{Q(o,`title`,`${a().colorKey}-${t} (dark) — ${U(r)}`),s=Z(o,``,s,{background:U(r)})}),K(e,o)}),F(g),F(h),F(d);var _=V(d,2),v=e=>{K(e,zu())};J(_,e=>{a().colorKey===`base`&&e(v)}),K(e,u)},x=I(()=>g.includes(a().colorKey));J(y,e=>{U(x)&&e(b)});var S=V(y,2),C=e=>{{let n=I(()=>`${o().label} (dark mode)`),r=I(()=>N(o())),i=I(()=>o().name in t.overrides);ou(e,{get label(){return U(n)},get tokenName(){return o().name},get value(){return U(r)},get overridden(){return U(i)},onChange:e=>t.onSet(o().name,e),onReset:()=>t.onReset(o().name)})}},w=e=>{let t=I(()=>pe(N(a()),a().colorKey));var r=Vu(),i=z(r);let o;var s=V(i);F(r),H(e=>{Q(i,`title`,U(t)),o=Z(i,``,o,e),q(s,` Dark: auto-derived (${U(t)??``})`)},[()=>({background:n(U(t),U(t))})]),K(e,r)};J(S,e=>{o()&&!U(c)?e(C):o()&&U(c)&&e(w,1)}),F(l),H(()=>q(p,a().label)),K(e,l)}),F(i),K(e,r)};J(je,e=>{U(S)&&e(Ne)}),F(P);var Pe=V(P,4),Fe=z(Pe),Ie=V(z(Fe),2),Le=z(Ie,!0);F(Ie),F(Fe);var Re=V(Fe,2),ze=e=>{var r=Gu(),a=V(B(r),2);{let e=I(()=>`--sf-lumlocker`in t.overrides);$(a,{label:`LumLocker lightness (L)`,get value(){return U(te)},min:0,max:1,step:.01,help:`--sf-lumlocker — fixed OKLCH L applied to lockable brand colors under [data-lumlocker]`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-lumlocker`,String(e)),onReset:()=>t.onReset(`--sf-lumlocker`)})}var s=V(a,2);Y(V(z(s),2),17,()=>o,e=>e.key,(e,t)=>{var r=Xr();Y(B(r),16,()=>[`light`,`dark`],e=>e,(e,r)=>{let a=I(()=>i(`var(--sf-color-${U(t).key}-source-${r})`,r,``)),o=I(()=>ae(U(t).key,r));var s=Wu(),c=z(s),l=z(c),u=V(l),d=z(u,!0);F(u),F(c);var f=V(c,2),p=V(f,4);F(s),H(e=>{q(l,`${U(t).label??``} `),q(d,r===`light`?`L`:`D`),Z(f,`background:${U(a)||`var(--sf-color-${U(t).key})`}`),Z(p,e),Q(p,`title`,U(o))},[()=>`background:${n(U(o),U(o))}`]),K(e,s)}),K(e,r)}),F(s);var c=V(s,2),l=z(c,!0);F(c),H(()=>{X(c,1,`w-full py-2 rounded-lg text-[10px] font-bold border transition-all cursor-pointer ${wl.value?`bg-indigo-600/25 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/10 dark:border-white/10 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(l,wl.value?`✓ LumLocker active on canvas — click to disable`:`Preview LumLocker on live canvas`)}),W(`click`,c,()=>{wl.value=!wl.value}),K(e,r)};J(Re,e=>{U(k)&&e(ze)}),F(Pe);var Be=V(Pe,4),Ve=z(Be),He=V(z(Ve),2),Ge=z(He,!0);F(He),F(Ve);var Ke=V(Ve,2),qe=e=>{var r=Xu(),a=V(B(r),2);Y(a,21,()=>fe,([e,t])=>e.name,(e,r)=>{var a=I(()=>h(U(r),2));let o=()=>U(a)[0],s=()=>U(a)[1],c=I(()=>!!(s()&&s().name in t.overrides)),l=I(()=>U(oe).has(o().colorKey)&&!U(c));var u=Yu(),d=z(u),f=z(d),p=z(f,!0);F(f);var m=V(f,2),g=e=>{var t=Iu(),n=z(t,!0);F(t),H(()=>{X(t,1,`text-[8px] px-1.5 py-0.5 rounded border transition-all cursor-pointer ${U(l)?`border-indigo-500/40 bg-indigo-500/15 text-indigo-700 dark:text-indigo-300`:`border-black/10 dark:border-white/10 text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(n,U(l)?`Auto dark`:`Manual dark`)}),W(`click`,t,()=>Se(o().colorKey,s(),o().name)),K(e,t)};J(m,e=>{s()&&e(g)}),F(d);var v=V(d,2);{let e=I(()=>`${o().label} light`),n=I(()=>N(o())),r=I(()=>o().name in t.overrides);ou(v,{get label(){return U(e)},get tokenName(){return o().name},get value(){return U(n)},get overridden(){return U(r)},onChange:e=>t.onSet(o().name,e),onReset:()=>t.onReset(o().name)})}var y=V(v,2),b=e=>{{let n=I(()=>`${s().label} dark`),r=I(()=>N(s())),i=I(()=>s().name in t.overrides);ou(e,{get label(){return U(n)},get tokenName(){return s().name},get value(){return U(r)},get overridden(){return U(i)},onChange:e=>t.onSet(s().name,e),onReset:()=>t.onReset(s().name)})}},x=e=>{let t=I(()=>pe(N(o()),o().colorKey));var r=Vu(),i=z(r);let a;var s=V(i);F(r),H(e=>{Q(i,`title`,U(t)),a=Z(i,``,a,e),q(s,` Dark: auto-derived (${U(t)??``})`)},[()=>({background:n(U(t),U(t))})]),K(e,r)};J(y,e=>{s()&&!U(l)?e(b):s()&&U(l)&&e(x,1)});var S=V(y,2),C=z(S),w=V(z(C),2);Y(w,21,()=>_,e=>e.label,(e,t)=>{var n=Ku(),r=z(n,!0);F(n),H(()=>q(r,U(t).label)),K(e,n)}),F(w),F(C),Y(V(C,2),16,()=>[[`L`,`light`],[`D`,`dark`]],([e,t])=>e,(e,t)=>{var n=I(()=>h(t,2));let r=()=>U(n)[0],a=()=>U(n)[1];var s=Ju(),c=z(s),l=z(c,!0);F(c);var u=V(c,2);Y(u,21,()=>_,e=>e.label,(e,t)=>{let n=I(()=>i(U(t).expr(o().colorKey),a(),``));var r=qu();let s;var c=z(r);{let e=I(()=>`${o().colorKey}-${U(t).label.toLowerCase()}`);ju(c,()=>U(e))}F(r),H(e=>{Q(r,`title`,e),s=Z(r,``,s,{background:U(n)})},[()=>`${o().colorKey}-${U(t).label.toLowerCase()} (${a()}) — ${U(n)}`]),K(e,r)}),F(u),F(s),H(()=>q(l,r())),K(e,s)}),F(S),Me(2),F(u),H(()=>q(p,o().label)),K(e,u)}),F(a),K(e,r)};J(Ke,e=>{U(T)&&e(qe)}),F(Be);var Je=V(Be,4),Ye=z(Je),Xe=V(z(Ye),2),Ze=z(Xe,!0);F(Xe),F(Ye);var Qe=V(Ye,2),$e=e=>{var r=$u(),i=V(B(r),2);Y(i,17,()=>b,e=>e.name,(e,n)=>{du(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})});var a=V(i,2),o=z(a);Y(o,17,()=>Ce,e=>e.label,(e,t)=>{let r=I(()=>we(U(t).fg,U(t).bg));var i=Xr(),a=B(i),o=e=>{var i=Zu(),a=z(i),o=V(a,2),s=z(o,!0);F(o);var c=V(o,2),l=z(c);F(c);var u=V(c,2),d=z(u,!0);F(u),F(i),H((e,n)=>{Z(a,e),q(s,U(t).label),q(l,`${n??``}:1`),X(u,1,`text-[9px] font-bold px-1.5 py-0.5 rounded ${U(r)>=4.5?`bg-emerald-500/20 text-emerald-700 dark:text-emerald-300`:`bg-amber-500/20 text-amber-700 dark:text-amber-300`}`),q(d,U(r)>=4.5?`AA`:U(r)>=3?`AA-L`:`✗`)},[()=>`background:${n(U(t).bg,U(t).bg)}; color:${n(U(t).fg,U(t).fg)}`,()=>U(r).toFixed(2)]),K(e,i)};J(a,e=>{U(r)!==null&&e(o)}),K(e,i)});var s=V(o,2),c=e=>{var n=Qu();W(`click`,n,()=>t.onSelectDomain?.(`wcag`)),K(e,n)};J(s,e=>{t.onSelectDomain&&e(c)}),F(a),Y(V(a,2),17,()=>x,e=>e.name,(e,n)=>{du(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),K(e,r)};J(Qe,e=>{U(C)&&e($e)}),F(Je);var et=V(Je,4),tt=z(et),nt=V(z(tt),2),rt=z(nt,!0);F(nt),F(tt);var it=V(tt,2),at=e=>{let n=I(()=>t.overrides[`--sf-color-primary-source-light`]??s.find(e=>e.name===`--sf-color-primary-source-light`)?.default??`oklch(0.47 0.27 264)`),r=I(()=>t.overrides[`--sf-color-primary-source-dark`]),i=I(()=>U(r)??(!U(oe).has(`primary`)||U(r)?s.find(e=>e.name===`--sf-color-primary-source-dark`)?.default??pe(U(n),`primary`):pe(U(n),`primary`))),a=I(()=>U(A)===`light`?U(n):U(i)),o=I(()=>U(A)===`light`?me():he()),c=I(()=>U(A)===`light`?ge():_e()),d=I(()=>U(A)===`light`?me():he()),m=I(()=>U(A)===`light`?ge():_e());var h=id(),g=V(B(h),2);Y(g,21,()=>u,e=>e.label,(e,n)=>{var r=ed(),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o,!0);F(o),F(r),H(()=>{X(r,1,`flex flex-col items-center gap-0.5 p-2.5 rounded-xl border transition-all cursor-pointer ${U(le)?.label===U(n).label?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(a,U(n).label),q(s,U(n).desc)}),W(`click`,r,()=>t.onBulkChange(U(n).patch)),K(e,r)}),F(g);var _=V(g,2),v=V(z(_),2);Y(v,21,()=>l.filter(e=>e.step===`tint`),e=>e.name,(e,n)=>{{let r=I(()=>ue(U(n))),i=I(()=>U(n).name in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:0,max:100,step:1,unit:`%`,get overridden(){return U(i)},onChange:e=>t.onSet(U(n).name,`${e}%`),onReset:()=>t.onReset(U(n).name)})}}),F(v),F(_);var y=V(_,2),b=V(z(y),2);Y(b,21,()=>l.filter(e=>e.step===`shade`),e=>e.name,(e,n)=>{{let r=I(()=>ue(U(n))),i=I(()=>U(n).name in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:0,max:100,step:1,unit:`%`,get overridden(){return U(i)},onChange:e=>t.onSet(U(n).name,`${e}%`),onReset:()=>t.onReset(U(n).name)})}}),F(b),F(y);var x=V(y,2),S=z(x),C=V(z(S),2);Y(C,20,()=>[`light`,`dark`],e=>e,(e,t)=>{var n=Iu(),r=z(n,!0);F(n),H(()=>{X(n,1,`px-1.5 py-0.5 rounded text-[8px] font-bold cursor-pointer transition-all ${U(A)===t?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(r,t===`light`?`Light`:`Dark`)}),W(`click`,n,()=>{R(A,t,!0)}),K(e,n)}),F(C),F(S);var w=V(S,2);Y(w,21,()=>l,e=>e.name,(e,t)=>{let n=I(()=>ue(U(t))),r=I(()=>U(t).label),i=I(()=>ve(U(a),U(r),U(o),U(c)));var s=td(),l=z(s),u=z(l,!0);F(l);var d=V(l,2);ju(z(d),()=>`primary-${U(r)}`),F(d);var f=V(d,2),p=z(f,!0);F(f),F(s),H((e,t,n)=>{q(u,e),Z(d,t),Q(d,`title`,n),q(p,U(r))},[()=>Math.round(U(n)),()=>`background:${U(i)}; height: ${Math.max(U(n)/100*56,6)}px`,()=>`primary-${U(r)} (${U(A)}) · mix ${Math.round(U(n))}%`]),K(e,s)}),F(w),Me(2),F(x);var T=V(x,2),E=z(T),D=V(z(E),2);Y(D,20,()=>[`light`,`dark`],e=>e,(e,t)=>{var n=Iu(),r=z(n,!0);F(n),H(()=>{X(n,1,`px-1.5 py-0.5 rounded text-[8px] font-bold cursor-pointer transition-all ${U(A)===t?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(r,t===`light`?`Light`:`Dark`)}),W(`click`,n,()=>{R(A,t,!0)}),K(e,n)}),F(D),F(E),Y(V(E,2),16,()=>p,e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-color-${n}-source-light`]??s.find(e=>e.name===`--sf-color-${n}-source-light`)?.default??`oklch(0.5 0.15 264)`),i=I(()=>`--sf-color-${n}-source-dark`),a=I(()=>t.overrides[U(i)]??(U(oe).has(n)&&!t.overrides[U(i)]?pe(U(r),n):s.find(e=>e.name===U(i))?.default??pe(U(r),n))),o=I(()=>U(A)===`light`?U(r):U(a));var c=rd(),l=z(c),u=z(l,!0);F(l);var p=V(l,2);Y(p,20,()=>f,e=>e,(e,t)=>{let r=I(()=>ve(U(o),t,U(d),U(m)));var i=nd();ju(z(i),()=>`${n}-${t}`),F(i),H(()=>{Z(i,`background:${U(r)}`),Q(i,`title`,`${n}-${t} (${U(A)})`)}),K(e,i)}),F(p),F(c),H(()=>q(u,n)),K(e,c)}),F(T),K(e,h)};J(it,e=>{U(w)&&e(at)}),F(et);var ot=V(et,4),st=z(ot),ct=V(z(st),2),lt=z(ct,!0);F(ct),F(st);var ut=V(st,2),dt=e=>{var n=ud();Y(V(B(n),2),16,()=>[`brand`,`fade`],e=>e,(e,n)=>{var i=ld(),o=B(i),s=z(o,!0);F(o);var c=V(o,2);Y(c,21,()=>a.filter(e=>e.group===n),e=>e.name,(e,n)=>{let i=I(()=>`var(${U(n).name})`),a=I(()=>M(U(n)));var o=cd(),s=z(o),c=V(s,2),l=z(c),u=z(l),d=z(u,!0);F(u);var f=V(u,2),p=e=>{var r=ad();W(`click`,r,()=>{delete ee[U(n).name],t.onReset(U(n).name)}),K(e,r)};J(f,e=>{U(n).name in t.overrides&&e(p)}),F(l);var m=V(l,2),h=e=>{var t=od();Y(V(z(t),2),16,()=>[`top`,`right`,`bottom`,`left`],e=>e,(e,t)=>{var r=Iu(),i=z(r,!0);F(r),H(()=>{X(r,1,`flex-1 py-0.5 rounded text-[9px] border transition-all cursor-pointer capitalize ${U(a).dir===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(i,t)}),W(`click`,r,()=>ie(U(n),`dir`,t)),K(e,r)}),F(t),K(e,t)},g=e=>{var t=sd(),r=V(z(t),2);zi(r);var i=V(r,2),o=z(i);F(i),F(t),H(()=>{Bi(r,U(a).angle),q(o,`${U(a).angle??``}°`)}),W(`input`,r,e=>ie(U(n),`angle`,parseInt(e.target.value))),K(e,t)};J(m,e=>{U(n).kind===`dir`&&U(n).group!==`fade`?e(h):U(n).kind!==`dir`&&e(g,1)});var _=V(m,2),v=V(z(_),2);zi(v);var y=V(v,2);zi(y),F(_);var b=V(_,2),x=V(z(b));F(b);var S=V(b,2);zi(S),F(c),F(o),H(e=>{Z(s,e),q(d,U(n).label),Bi(v,U(a).stop1),Bi(y,U(a).stop2),q(x,` ${U(n).formula??``}`),Bi(S,t.overrides[U(n).name]??``)},[()=>`background:${r(U(i),U(i))}`]),W(`change`,v,e=>ie(U(n),`stop1`,e.target.value.trim())),W(`change`,y,e=>ie(U(n),`stop2`,e.target.value.trim())),W(`change`,S,e=>{let r=e.target.value.trim();delete ee[U(n).name],r?t.onSet(U(n).name,r):t.onReset(U(n).name)}),K(e,o)}),F(c),H(()=>q(s,n===`brand`?`Brand & surface`:`Edge fades`)),K(e,i)}),K(e,n)};J(ut,e=>{U(O)&&e(dt)}),F(ot);var ft=V(ot,4),pt=z(ft),mt=V(z(pt),2),ht=z(mt,!0);F(mt),F(pt);var gt=V(pt,2),_t=e=>{var n=dd(),r=V(B(n),2);Y(r,20,()=>[[`light dark`,`light dark (default)`],[`light`,`Light only`],[`dark`,`Dark only`]],([e,t])=>e,(e,n)=>{var r=I(()=>h(n,2));let i=()=>U(r)[0],a=()=>U(r)[1],o=I(()=>t.overrides[`--sf-color-scheme`]??`light dark`);var s=Iu(),c=z(s,!0);F(s),H(()=>{X(s,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${U(o)===i()?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(c,a())}),W(`click`,s,()=>i()===`light dark`?t.onReset(`--sf-color-scheme`):t.onSet(`--sf-color-scheme`,i())),K(e,s)}),F(r),K(e,n)};J(gt,e=>{U(D)&&e(_t)}),F(ft);var vt=V(ft,4),yt=z(vt),bt=V(z(yt),2),xt=z(bt,!0);F(bt),F(yt);var St=V(yt,2),Ct=e=>{var r=pd(),i=V(B(r),2);Y(i,21,()=>d,e=>e.name,(e,r)=>{let i=I(()=>n(`var(${U(r).name})`,``));var a=fd(),o=z(a),s=z(o,!0);F(o);var c=V(o,2);{let e=I(()=>t.overrides[U(r).name]??``),n=I(()=>U(i)?`auto-derived · ${U(i)}`:`auto-derived`),a=I(()=>U(r).name in t.overrides);Au(c,{get token(){return U(r).name},get value(){return U(e)},get placeholder(){return U(n)},get isOverridden(){return U(a)},onSet:e=>t.onSet(U(r).name,e),onReset:()=>t.onReset(U(r).name)})}F(a),H(()=>q(s,U(r).label)),K(e,a)}),F(i),K(e,r)};J(St,e=>{U(E)&&e(Ct)}),F(vt),Me(2),F(Te),H(()=>{Q(Oe,`aria-expanded`,U(S)),q(Ae,U(S)?`▲`:`▼`),Q(Fe,`aria-expanded`,U(k)),q(Le,U(k)?`▲`:`▼`),Q(Ve,`aria-expanded`,U(T)),q(Ge,U(T)?`▲`:`▼`),Q(Ye,`aria-expanded`,U(C)),q(Ze,U(C)?`▲`:`▼`),Q(tt,`aria-expanded`,U(w)),q(rt,U(w)?`▲`:`▼`),Q(st,`aria-expanded`,U(O)),q(lt,U(O)?`▲`:`▼`),Q(pt,`aria-expanded`,U(D)),q(ht,U(D)?`▲`:`▼`),Q(yt,`aria-expanded`,U(E)),q(xt,U(E)?`▲`:`▼`)}),W(`click`,Oe,()=>{R(S,!U(S))}),W(`click`,Fe,()=>{R(k,!U(k))}),W(`click`,Ve,()=>{R(T,!U(T))}),W(`click`,Ye,()=>{R(C,!U(C))}),W(`click`,tt,()=>{R(w,!U(w))}),W(`click`,st,()=>{R(O,!U(O))}),W(`click`,pt,()=>{R(D,!U(D))}),W(`click`,yt,()=>{R(E,!U(E))}),K(e,Te),We()}Br([`click`,`input`,`change`]);var gd=G(`
Aa Aa
`),_d=G(`
min
max
`),vd=G(``),yd=G(``),bd=G(`
`),xd=G(`
Modular scale ratio
`),Sd=G(`
`),Cd=G(`
clamp( … )
`);function wd(e,t){Ue(t,!0);let n=I(()=>qo.value===`dark`?`#16161e`:`#ffffff`),r=ra(t,`unit`,3,`rem`),i=ra(t,`minLabel`,3,`Min`),a=ra(t,`maxLabel`,3,`Max`),o=ra(t,`overridden`,3,!1),s=ra(t,`ratioMin_bound`,3,1.05),c=ra(t,`ratioMax_bound`,3,1.8),l=ra(t,`previewKind`,3,`none`);function u(e){return Math.min(t.max,Math.max(t.min,e))}let d=I(()=>(t.minValue-t.min)/(t.max-t.min)*100),f=I(()=>(t.maxValue-t.min)/(t.max-t.min)*100);function p(e){return Math.min(c(),Math.max(s(),e))}let m=I(()=>t.ratioPresets?.find(e=>t.ratioMin!==void 0&&Math.abs(e.value-t.ratioMin)<.0015)?.value),h=I(()=>t.ratioPresets?.find(e=>t.ratioMax!==void 0&&Math.abs(e.value-t.ratioMax)<.0015)?.value);var g=Cd(),_=z(g),v=z(_),y=z(v,!0);F(v);var b=V(v,2),x=V(z(b)),S=z(x);F(x);var C=V(x,2),w=z(C);F(C),Me(),F(b),F(_);var T=V(_,2),E=V(z(T),2),D=V(E,2);zi(D);var O=V(D,2);zi(O);var k=V(O,2),A=V(k,2);F(T);var ee=V(T,2),te=z(ee),j=z(te),ne=z(j,!0);F(j);var M=V(j,2);zi(M),F(te);var re=V(te,2),ie=z(re),ae=z(ie,!0);F(ie);var oe=V(ie,2);zi(oe),F(re),F(ee);var se=V(ee,2),N=e=>{var n=gd(),r=z(n),o=V(z(r)),s=z(o,!0);F(o),F(r);var c=V(r,2),l=V(z(c)),u=z(l,!0);F(l),F(c),F(n),H((e,t,n,i)=>{Z(r,e),q(s,t),Z(c,n),q(u,i)},[()=>`font-size:${Math.min(t.minValue,2)}rem`,()=>i().toLowerCase(),()=>`font-size:${Math.min(t.maxValue,2.6)}rem`,()=>a().toLowerCase()]),K(e,n)},ce=e=>{var n=_d(),r=z(n),i=V(r,4);Me(2),F(n),H((e,t)=>{Z(r,e),Z(i,t)},[()=>`width:${Math.min(t.minValue*28,120)}px`,()=>`width:${Math.min(t.maxValue*28,200)}px`]),K(e,n)};J(se,e=>{l()===`type`?e(N):l()===`space`&&e(ce,1)});var le=V(se,2),ue=e=>{var r=xd(),o=V(z(r),2);Y(o,21,()=>[{side:i(),value:t.ratioMin,active:U(m),onChange:t.onRatioMinChange},{side:a(),value:t.ratioMax,active:U(h),onChange:t.onRatioMaxChange}],e=>e.side,(e,r)=>{var i=bd(),a=z(i),o=z(a,!0);F(a);var l=V(a,2),u=z(l),d=e=>{var t=vd();t.value=t.__value=``,H(()=>Z(t,`background:${U(n)};`)),K(e,t)};J(u,e=>{U(r).active===void 0&&e(d)}),Y(V(u),17,()=>t.ratioPresets,e=>e.value,(e,t)=>{var r=yd(),i=z(r,!0);F(r);var a={};H(e=>{Z(r,`background:${U(n)};`),q(i,U(t).label),a!==(a=e)&&(r.value=(r.__value=e)??``)},[()=>String(U(t).value)]),K(e,r)}),F(l);var f;Di(l);var m=V(l,2);zi(m),Q(m,`step`,.001),F(i),H(e=>{q(o,U(r).side),Q(l,`aria-label`,`${U(r).side} modular scale ratio preset`),f!==(f=e)&&(l.value=(l.__value=e)??``,Ei(l,e)),Q(m,`aria-label`,`${U(r).side} modular scale custom ratio`),Q(m,`min`,s()),Q(m,`max`,c()),Bi(m,U(r).value)},[()=>U(r).active===void 0?``:String(U(r).active)]),W(`change`,l,e=>{let t=parseFloat(e.target.value);Number.isFinite(t)&&U(r).onChange?.(p(t))}),W(`change`,m,e=>{let t=parseFloat(e.target.value);Number.isFinite(t)&&U(r).onChange?.(p(t))}),K(e,i)}),F(o),F(r),K(e,r)};J(le,e=>{t.ratioPresets&&e(ue)});var de=V(le,2),fe=e=>{var n=Sd(),r=z(n);F(n),W(`click`,r,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(de,e=>{o()&&t.onReset&&e(fe)}),F(g),H(e=>{X(g,1,`rounded-xl border p-3 ${o()?`bg-indigo-500/8 border-indigo-500/25`:`bg-black/4 dark:bg-white/4 border-black/8 dark:border-white/8`}`,`svelte-iy59wr`),q(y,t.title),q(S,`${t.minValue??``}${r()??``}`),q(w,`${t.maxValue??``}${r()??``}`),Z(E,e),Q(D,`min`,t.min),Q(D,`max`,t.max),Q(D,`step`,t.step),Bi(D,t.minValue),Q(D,`aria-label`,`${t.title} min`),Q(O,`min`,t.min),Q(O,`max`,t.max),Q(O,`step`,t.step),Bi(O,t.maxValue),Q(O,`aria-label`,`${t.title} max`),Z(k,`left: calc(${U(d)}% - 6px)`),Z(A,`left: calc(${U(f)}% - 6px)`),q(ne,i()),Q(M,`min`,t.min),Q(M,`max`,t.max),Q(M,`step`,t.step),Bi(M,t.minValue),q(ae,a()),Q(oe,`min`,t.min),Q(oe,`max`,t.max),Q(oe,`step`,t.step),Bi(oe,t.maxValue)},[()=>`left:${Math.min(U(d),U(f))}%; right:${100-Math.max(U(d),U(f))}%`]),W(`input`,D,e=>t.onMinChange(Math.min(u(parseFloat(e.target.value)),t.maxValue))),W(`input`,O,e=>t.onMaxChange(Math.max(u(parseFloat(e.target.value)),t.minValue))),W(`change`,M,e=>t.onMinChange(u(parseFloat(e.target.value)||t.min))),W(`change`,oe,e=>t.onMaxChange(u(parseFloat(e.target.value)||t.max))),K(e,g),We()}Br([`input`,`change`,`click`]);var Td=G(``),Ed=G(``),Dd=G(`
`),Od=G(`
Google Font
`,1),kd=G(``),Ad=G(``),jd=G(``),Md=G(``),Nd=G(`
Tracking
`),Pd=G(`
Max width
`),Fd=G(``),Id=G(`
The quick brown fox
Size
Line height
Weight
`,1),Ld=G(``),Rd=G(`
`),zd=G(``),Bd=G(`
`),Vd=G(`
Emphasis style
External marker
External label
`,1),Hd=G(``),Ud=G(`
`),Wd=G(`

Named weight tokens. Override if your font uses non-standard axis values.

`,1),Gd=G(`
`),Kd=G(`
`,1),qd=G(`
`),Jd=G(`
`),Yd=G(`

Utopia-style fluid scale. Each endpoint has three values — viewport width, - base size, and modular ratio. Sizes interpolate fluidly between mobile and desktop.

Line height scale
Letter-spacing scale

Overriding these propagates to heading sizes that reference them.

`,1),Xd=G(`
Aa
`),Zd=G(`
`),Qd=G(``),$d=G(`
`),ef=G(`

Per-text-size max-width caps on .sf-text-* elements. Set to none to remove the constraint; use ch units for character-based measures.

`,1),tf=G(`

Advanced OpenType and variable-font axes. Leave as normal unless your font supports these features.

Numeric figures
Optical sizing
Font features
Variation
`,1),nf=G(`
`);function rf(e,t){Ue(t,!0);let n=I(()=>qo.value===`dark`?`#16161e`:`#ffffff`),r=[{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:`Golden — 1.618`,value:1.618}],i=[{label:`System sans-serif`,value:``},{label:`Geometric (Avenir, Montserrat…)`,value:`var(--sf-font-geometric)`},{label:`Humanist (Seravek, Gill Sans…)`,value:`var(--sf-font-humanist)`},{label:`Slab serif (Rockwell, Roboto Slab…)`,value:`var(--sf-font-slab)`},{label:`Inter`,value:`Inter, system-ui, sans-serif`},{label:`Georgia (serif)`,value:`Georgia, 'Times New Roman', serif`},{label:`Merriweather (serif)`,value:`'Merriweather', Georgia, serif`},{label:`JetBrains Mono`,value:`'JetBrains Mono', 'Fira Code', monospace`}],a=[{label:`Same as body`,value:``},{label:`Geometric (Avenir, Montserrat…)`,value:`var(--sf-font-geometric)`},{label:`Humanist (Seravek, Gill Sans…)`,value:`var(--sf-font-humanist)`},{label:`Slab serif (Rockwell, Roboto Slab…)`,value:`var(--sf-font-slab)`},{label:`Inter`,value:`Inter, system-ui, sans-serif`},{label:`Georgia (serif)`,value:`Georgia, 'Times New Roman', serif`},{label:`Impact / condensed`,value:`Impact, 'Arial Narrow', sans-serif`}],o=[{label:`System mono`,value:`ui-monospace, monospace`},{label:`JetBrains Mono`,value:`'JetBrains Mono', 'Fira Code', monospace`},{label:`Source Code Pro`,value:`'Source Code Pro', 'Courier New', monospace`}],s=`Inter.Roboto.Open Sans.Lato.Montserrat.Poppins.Source Sans 3.Raleway.Nunito.Work Sans.Manrope.DM Sans.Outfit.Plus Jakarta Sans.Geist.Space Grotesk.Figtree.Merriweather.Playfair Display.Lora.Source Serif 4.Roboto Slab.IBM Plex Sans.IBM Plex Mono.JetBrains Mono.Fira Code.Space Mono`.split(`.`),c=[{label:`balance`,value:`balance`},{label:`pretty`,value:`pretty`},{label:`normal`,value:`normal`}],l=[`100`,`200`,`300`,`400`,`500`,`600`,`700`,`800`,`900`],u={"--sf-font-weight-body":`400`,"--sf-font-weight-heading":`600`,"--sf-font-weight-display":`700`,"--sf-font-weight-interactive":`600`},d=[{label:`2xs`,factor:.64},{label:`xs`,factor:.75},{label:`s`,factor:.875},{label:`m`,factor:1},{label:`l`,factor:1.125},{label:`xl`,factor:1.25},{label:`2xl`,factor:1.5},{label:`3xl`,factor:1.875},{label:`4xl`,factor:2.25}],f=[{label:`Tight`,token:`--sf-tracking-tight`,default:-.025},{label:`Normal`,token:`--sf-tracking-normal`,default:0},{label:`Wide`,token:`--sf-tracking-wide`,default:.025},{label:`Wider`,token:`--sf-tracking-wider`,default:.05},{label:`Widest`,token:`--sf-tracking-widest`,default:.1}],p=[{label:`Tight`,token:`--sf-leading-tight`,default:1.1},{label:`Snug`,token:`--sf-leading-snug`,default:1.3},{label:`Normal`,token:`--sf-leading-normal`,default:1.5},{label:`Relaxed`,token:`--sf-leading-relaxed`,default:1.625}],m=[{label:`2xs`,value:`var(--sf-text-2xs)`,approx:.64},{label:`xs`,value:`var(--sf-text-xs)`,approx:.75},{label:`s`,value:`var(--sf-text-s)`,approx:.875},{label:`m`,value:`var(--sf-text-m)`,approx:1},{label:`l`,value:`var(--sf-text-l)`,approx:1.125},{label:`xl`,value:`var(--sf-text-xl)`,approx:1.25},{label:`2xl`,value:`var(--sf-text-2xl)`,approx:1.5},{label:`3xl`,value:`var(--sf-text-3xl)`,approx:1.875},{label:`4xl`,value:`var(--sf-text-4xl)`,approx:2.25},{label:`display-s`,value:`var(--sf-text-display-s)`,approx:2.6},{label:`display-m`,value:`var(--sf-text-display-m)`,approx:3.2},{label:`display-l`,value:`var(--sf-text-display-l)`,approx:3.8}],g=p.map(e=>({label:e.label,value:`var(${e.token})`,num:e.default})),_=f.map(e=>({label:e.label,value:`var(${e.token})`,em:e.default})),v=[{id:`body`,label:`Body`,size:`--sf-body-font-size`,lh:`--sf-body-line-height`,wt:`--sf-body-font-weight`,ls:null,dSize:`var(--sf-text-m)`,dLh:`var(--sf-leading-normal)`,dWt:`400`,dLs:``},{id:`h1`,label:`H1`,size:`--sf-h1-size`,lh:`--sf-h1-line-height`,wt:`--sf-h1-font-weight`,ls:`--sf-h1-letter-spacing`,dSize:`var(--sf-text-4xl)`,dLh:`var(--sf-leading-tight)`,dWt:`600`,dLs:`var(--sf-tracking-tight)`},{id:`h2`,label:`H2`,size:`--sf-h2-size`,lh:`--sf-h2-line-height`,wt:`--sf-h2-font-weight`,ls:`--sf-h2-letter-spacing`,dSize:`var(--sf-text-3xl)`,dLh:`var(--sf-leading-tight)`,dWt:`600`,dLs:`var(--sf-tracking-tight)`},{id:`h3`,label:`H3`,size:`--sf-h3-size`,lh:`--sf-h3-line-height`,wt:`--sf-h3-font-weight`,ls:`--sf-h3-letter-spacing`,dSize:`var(--sf-text-2xl)`,dLh:`var(--sf-leading-snug)`,dWt:`600`,dLs:`var(--sf-tracking-normal)`},{id:`h4`,label:`H4`,size:`--sf-h4-size`,lh:`--sf-h4-line-height`,wt:`--sf-h4-font-weight`,ls:`--sf-h4-letter-spacing`,dSize:`var(--sf-text-xl)`,dLh:`var(--sf-leading-snug)`,dWt:`600`,dLs:`var(--sf-tracking-normal)`},{id:`h5`,label:`H5`,size:`--sf-h5-size`,lh:`--sf-h5-line-height`,wt:`--sf-h5-font-weight`,ls:`--sf-h5-letter-spacing`,dSize:`var(--sf-text-l)`,dLh:`var(--sf-leading-normal)`,dWt:`600`,dLs:`var(--sf-tracking-normal)`},{id:`h6`,label:`H6`,size:`--sf-h6-size`,lh:`--sf-h6-line-height`,wt:`--sf-h6-font-weight`,ls:`--sf-h6-letter-spacing`,dSize:`var(--sf-text-m)`,dLh:`var(--sf-leading-normal)`,dWt:`600`,dLs:`var(--sf-tracking-wide)`}],y=L(`h1`),b=I(()=>v.find(e=>e.id===U(y))),x=ql.typography??[];function S(e,n){let r=parseFloat(t.overrides[e]??``);return isNaN(r)?n:r}let C=I(()=>S(`--sf-text-ratio-min`,1.25)),w=I(()=>S(`--sf-text-ratio-max`,1.333)),T=I(()=>S(`--sf-text-base-min`,1)),E=I(()=>S(`--sf-text-base-max`,1.25)),D=I(()=>S(`--sf-text-display-base-min`,2.4)),O=I(()=>S(`--sf-text-display-base-max`,3)),k=I(()=>S(`--sf-leading-taper`,0)),A=I(()=>S(`--sf-text-scale`,1)),ee=I(()=>S(`--sf-fluid-min-vw`,22.5)),te=I(()=>S(`--sf-fluid-max-vw`,90)),j=L(!1),ne=L(!1),M=L(!1),re=L(!1),ie=L(!1),ae=L(!1),oe=L(!1),se=L(!1),N=L(!1),ce=L(!1),le=I(()=>t.overrides[`--sf-font-body`]??``),ue=I(()=>t.overrides[`--sf-font-heading`]??``),de=I(()=>t.overrides[`--sf-font-mono`]??`ui-monospace, monospace`),fe=L(``),pe=L(`body`);function me(e){let n=t.overrides[e.token];return n?parseFloat(n.replace(`em`,``)):e.default}function he(e){return S(e.token,e.default)}function ge(e){if(!e.trim())return;let t=`gf-${e.replace(/\s+/g,`-`)}`;if(!document.getElementById(t)){let n=document.createElement(`link`);n.id=t,n.rel=`stylesheet`,n.href=`https://fonts.googleapis.com/css2?family=${encodeURIComponent(e)}:wght@100;200;300;400;500;600;700;800;900&display=swap`,document.head.appendChild(n)}}function _e(e,n){if(!e.trim())return;ge(e);let r=n===`body`?`--sf-font-body`:`--sf-font-heading`;t.onSet(r,`'${e}', sans-serif`)}function ve(e,n){return e?t.overrides[e]??n:n}function ye(e,n,r){e&&(n===r?t.onReset(e):t.onSet(e,n))}let be=I(()=>{let e=ve(U(b).size,U(b).dSize),t=m.find(t=>t.value===e),n=(U(T)+U(E))/2;return Math.min((t?.approx??1)*n*U(A),2.4)}),xe=I(()=>{let e=ve(U(b).wt,U(b).dWt),t=parseInt(e);return isNaN(t)?600:t}),Se=I(()=>{if(!U(b).ls)return 0;let e=ve(U(b).ls,U(b).dLs),t=_.find(t=>t.value===e);if(t)return t.em;let n=parseFloat(e.replace(`em`,``));return isNaN(n)?0:n}),Ce=I(()=>{let e=ve(U(b).lh,U(b).dLh),t=g.find(t=>t.value===e);if(t)return t.num;let n=parseFloat(e);return isNaN(n)?1.3:n});var we=nf(),Te=z(we),Ee=z(Te),De=V(z(Ee),2),P=z(De,!0);F(De),F(Ee);var Oe=V(Ee,2),ke=e=>{var r=Od(),c=B(r);Y(c,17,()=>[{label:`Body`,token:`--sf-font-body`,current:U(le),opts:i},{label:`Heading`,token:`--sf-font-heading`,current:U(ue),opts:a},{label:`Mono`,token:`--sf-font-mono`,current:U(de),opts:o}],e=>e.token,(e,r)=>{var i=Dd(),a=z(i),o=z(a,!0);F(a);var s=V(a,2),c=z(s);Y(c,17,()=>U(r).opts,e=>e.label,(e,t)=>{var r=Td(),i=z(r,!0);F(r);var a={};H(()=>{Z(r,`font-family:inherit;background:${U(n)};`),q(i,U(t).label),a!==(a=U(t).value)&&(r.value=(r.__value=U(t).value)??``)}),K(e,r)});var l=V(c),u=e=>{var t=Td(),i=z(t);F(t);var a={};H(e=>{Z(t,`background:${U(n)};`),q(i,`Custom: ${e??``}`),a!==(a=U(r).current)&&(t.value=(t.__value=U(r).current)??``)},[()=>U(r).current.split(`,`)[0].replace(/['"]/g,``)]),K(e,t)},d=I(()=>U(r).current&&!U(r).opts.some(e=>e.value===U(r).current));J(l,e=>{U(d)&&e(u)}),F(s);var f;Di(s);var p=V(s,2),m=e=>{var n=Ed();W(`click`,n,()=>t.onReset(U(r).token)),K(e,n)};J(p,e=>{U(r).token in t.overrides&&e(m)}),F(i),H(()=>{q(o,U(r).label),Z(s,`font-family: ${U(r).current||`inherit`}`),f!==(f=U(r).current)&&(s.value=(s.__value=U(r).current)??``,Ei(s,U(r).current))}),W(`change`,s,e=>{let n=e.target.value;n?t.onSet(U(r).token,n):t.onReset(U(r).token)}),K(e,i)});var l=V(c,2),u=V(z(l),2),d=z(u),f=z(d);f.value=f.__value=``,Y(V(f),16,()=>s,e=>e,(e,t)=>{var r=Td(),i=z(r,!0);F(r);var a={};H(()=>{Z(r,`background:${U(n)};`),q(i,t),a!==(a=t)&&(r.value=(r.__value=t)??``)}),K(e,r)}),F(d);var p;Di(d);var m=V(d,2),h=z(m),g=V(h,2);F(m),F(u);var _=V(u,2);zi(_);var v=V(_,2),y=z(v);F(v),F(l),H(()=>{Z(f,`background:${U(n)};`),p!==(p=U(fe))&&(d.value=(d.__value=U(fe))??``,Ei(d,U(fe))),X(h,1,`px-2 rounded text-[10px] border transition-all cursor-pointer ${U(pe)===`body`?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400`}`),X(g,1,`px-2 rounded text-[10px] border transition-all cursor-pointer ${U(pe)===`heading`?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400`}`),Bi(_,U(fe)),q(y,`Load & apply to ${U(pe)??``}`)}),W(`change`,d,e=>{R(fe,e.target.value,!0)}),W(`click`,h,()=>{R(pe,`body`)}),W(`click`,g,()=>{R(pe,`heading`)}),W(`input`,_,e=>{R(fe,e.target.value,!0)}),W(`click`,v,()=>_e(U(fe),U(pe))),K(e,r)};J(Oe,e=>{U(j)&&e(ke)}),F(Te);var Ae=V(Te,4),je=z(Ae),Me=V(z(je),2),Ne=z(Me,!0);F(Me),F(je);var Pe=V(je,2),Fe=e=>{var r=Id(),i=B(r);Y(i,21,()=>v,e=>e.id,(e,n)=>{let r=I(()=>U(n).size in t.overrides||U(n).lh in t.overrides||U(n).wt in t.overrides||!!U(n).ls&&U(n).ls in t.overrides);var i=Ad(),a=z(i),o=V(a),s=e=>{K(e,kd())};J(o,e=>{U(r)&&e(s)}),F(i),H(()=>{X(i,1,`relative flex-1 py-1 rounded-md text-[10px] font-bold transition-all cursor-pointer ${U(y)===U(n).id?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(a,`${U(n).label??``} `)}),W(`click`,i,()=>{R(y,U(n).id,!0)}),K(e,i)}),F(i);var a=V(i,2),o=z(a);F(a);var s=V(a,2),c=V(z(s),2),u=z(c);Y(u,17,()=>m,e=>e.value,(e,t)=>{var r=Td(),i=z(r,!0);F(r);var a={};H(()=>{Z(r,`background:${U(n)};`),q(i,U(t).label),a!==(a=U(t).value)&&(r.value=(r.__value=U(t).value)??``)}),K(e,r)});var d=V(u),f=e=>{var t=jd(),r={};H(e=>{Z(t,`background:${U(n)};`),r!==(r=e)&&(t.value=(t.__value=e)??``)},[()=>ve(U(b).size,U(b).dSize)]),K(e,t)},p=I(()=>!m.some(e=>e.value===ve(U(b).size,U(b).dSize)));J(d,e=>{U(p)&&e(f)}),F(c);var h;Di(c),F(s);var x=V(s,2),S=V(z(x),2),C=z(S);Y(C,17,()=>g,e=>e.value,(e,t)=>{var r=Td(),i=z(r);F(r);var a={};H(()=>{Z(r,`background:${U(n)};`),q(i,`${U(t).label??``} · ${U(t).num??``}`),a!==(a=U(t).value)&&(r.value=(r.__value=U(t).value)??``)}),K(e,r)});var w=V(C),T=e=>{var t=jd(),r={};H(e=>{Z(t,`background:${U(n)};`),r!==(r=e)&&(t.value=(t.__value=e)??``)},[()=>ve(U(b).lh,U(b).dLh)]),K(e,t)},E=I(()=>!g.some(e=>e.value===ve(U(b).lh,U(b).dLh)));J(w,e=>{U(E)&&e(T)}),F(S);var D;Di(S),F(x);var O=V(x,2),k=V(z(O),2);Y(k,20,()=>l,e=>e,(e,t)=>{let n=I(()=>ve(U(b).wt,U(b).dWt));var r=Md(),i=z(r,!0);F(r),H(e=>{Z(r,e),X(r,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(n)===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(i,t)},[()=>`font-weight:${parseInt(t)}`]),W(`click`,r,()=>ye(U(b).wt,t,U(b).dWt)),K(e,r)}),F(k),F(O);var A=V(O,2),ee=e=>{var t=Nd(),r=V(z(t),2),i=z(r);Y(i,17,()=>_,e=>e.value,(e,t)=>{var r=Td(),i=z(r,!0);F(r);var a={};H(()=>{Z(r,`background:${U(n)};`),q(i,U(t).label),a!==(a=U(t).value)&&(r.value=(r.__value=U(t).value)??``)}),K(e,r)});var a=V(i),o=e=>{var t=jd(),r={};H(e=>{Z(t,`background:${U(n)};`),r!==(r=e)&&(t.value=(t.__value=e)??``)},[()=>ve(U(b).ls,U(b).dLs)]),K(e,t)},s=I(()=>!_.some(e=>e.value===ve(U(b).ls,U(b).dLs)));J(a,e=>{U(s)&&e(o)}),F(r);var c;Di(r),F(t),H(e=>{c!==(c=e)&&(r.value=(r.__value=e)??``,Ei(r,e))},[()=>ve(U(b).ls,U(b).dLs)]),W(`change`,r,e=>ye(U(b).ls,e.target.value,U(b).dLs)),K(e,t)};J(A,e=>{U(b).ls&&e(ee)});var te=V(A,2),j=e=>{let n=I(()=>`--sf-${U(b).id}-max-width`);var r=Pd(),i=V(z(r),2);zi(i);var a=V(i,2),o=e=>{var r=Ed();W(`click`,r,()=>t.onReset(U(n))),K(e,r)};J(a,e=>{U(n)in t.overrides&&e(o)}),F(r),H(()=>Bi(i,t.overrides[U(n)]??``)),W(`input`,i,e=>{let r=e.target.value.trim();r?t.onSet(U(n),r):t.onReset(U(n))}),K(e,r)};J(te,e=>{U(b).id!==`body`&&e(j)});var ne=V(te,2),M=z(ne),re=e=>{var n=Fd(),r=z(n);F(n),H(()=>q(r,`reset ${U(b).label??``}`)),W(`click`,n,()=>{let e={[U(b).size]:null,[U(b).lh]:null,[U(b).wt]:null};U(b).ls&&(e[U(b).ls]=null),t.onBulkChange(e)}),K(e,n)};J(M,e=>{(U(b).size in t.overrides||U(b).lh in t.overrides||U(b).wt in t.overrides||U(b).ls&&U(b).ls in t.overrides)&&e(re)}),F(ne),H((e,t)=>{Z(o,`font-size:${U(be)}rem; font-weight:${U(xe)}; letter-spacing:${U(Se)}em; line-height:${U(Ce)}; font-family:${U(b).id===`body`?U(le)||`inherit`:U(ue)||U(le)||`inherit`}`),h!==(h=e)&&(c.value=(c.__value=e)??``,Ei(c,e)),D!==(D=t)&&(S.value=(S.__value=t)??``,Ei(S,t))},[()=>ve(U(b).size,U(b).dSize),()=>ve(U(b).lh,U(b).dLh)]),W(`change`,c,e=>ye(U(b).size,e.target.value,U(b).dSize)),W(`change`,S,e=>ye(U(b).lh,e.target.value,U(b).dLh)),K(e,r)};J(Pe,e=>{U(ne)&&e(Fe)}),F(Ae);var Ie=V(Ae,4),Le=z(Ie),Re=V(z(Le),2),ze=z(Re,!0);F(Re),F(Le);var Be=V(Le,2),Ve=e=>{var n=Vd(),r=B(n);Y(r,16,()=>[{label:`Body strong`,tokenName:`--sf-font-weight-strong`},{label:`Interactive`,tokenName:`--sf-font-weight-interactive`}],e=>e.tokenName,(e,n)=>{let r=I(()=>u[n.tokenName]??`600`),i=I(()=>t.overrides[n.tokenName]??U(r)),a=I(()=>n.tokenName in t.overrides);var o=Rd(),s=z(o),c=z(s),d=z(c);F(c);var f=V(c,2),p=e=>{var r=Ld();W(`click`,r,()=>t.onReset(n.tokenName)),K(e,r)};J(f,e=>{U(a)&&e(p)}),F(s);var m=V(s,2);Y(m,20,()=>l,e=>e,(e,o)=>{var s=Md(),c=z(s,!0);F(s),H(e=>{Z(s,e),X(s,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(i)===o?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(c,o)},[()=>`font-weight: ${parseInt(o)}`]),W(`click`,s,()=>o===U(r)&&!U(a)?void 0:o===U(r)?t.onReset(n.tokenName):t.onSet(n.tokenName,o)),K(e,s)}),F(m),F(o),H(()=>q(d,`${n.label??``} weight`)),K(e,o)});var i=V(r,2),a=V(z(i),2);Y(a,20,()=>[[`Italic`,`italic`],[`Normal`,`normal`]],([e,t])=>t,(e,n)=>{var r=I(()=>h(n,2));let i=()=>U(r)[0],a=()=>U(r)[1],o=I(()=>t.overrides[`--sf-body-em-style`]??`italic`);var s=zd(),c=z(s),l=z(c,!0);F(c),F(s),H(()=>{X(s,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${U(o)===a()?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),Z(c,`font-style: ${a()}`),q(l,i())}),W(`click`,s,()=>a()===`italic`?t.onReset(`--sf-body-em-style`):t.onSet(`--sf-body-em-style`,a())),K(e,s)}),F(a),F(i);var o=V(i,2);{let e=I(()=>S(`--sf-code-font-size`,.875)),n=I(()=>`--sf-code-font-size`in t.overrides);$(o,{label:`Code font size`,get value(){return U(e)},min:.7,max:1.1,step:.005,unit:`em`,help:`--sf-code-font-size — size of inline code relative to surrounding text`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-code-font-size`,`${e}em`),onReset:()=>t.onReset(`--sf-code-font-size`)})}var s=V(o,2);Y(s,16,()=>[{label:`Heading wrap`,token:`--sf-heading-text-wrap`,defaultVal:`balance`},{label:`Body wrap`,token:`--sf-body-text-wrap`,defaultVal:`pretty`}],e=>e.token,(e,n)=>{let r=I(()=>t.overrides[n.token]??n.defaultVal);var i=Bd(),a=z(i),o=z(a,!0);F(a);var s=V(a,2);Y(s,21,()=>c,e=>e.value,(e,i)=>{var a=Md(),o=z(a,!0);F(a),H(()=>{X(a,1,`flex-1 px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${U(r)===U(i).value?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(o,U(i).label)}),W(`click`,a,()=>U(i).value===n.defaultVal&&!(n.token in t.overrides)?void 0:U(i).value===n.defaultVal?t.onReset(n.token):t.onSet(n.token,U(i).value)),K(e,a)}),F(s),F(i),H(()=>q(o,n.label)),K(e,i)});var d=V(s,2),f=V(z(d),2);zi(f),Q(f,`placeholder`,`" ↗"`);var p=V(f,2),m=e=>{var n=Ed();W(`click`,n,()=>t.onReset(`--sf-link-external-marker`)),K(e,n)};J(p,e=>{`--sf-link-external-marker`in t.overrides&&e(m)}),F(d);var g=V(d,2),_=V(z(g),2);zi(_),Q(_,`placeholder`,`"opens in a new window or external site"`);var v=V(_,2),y=e=>{var n=Ed();W(`click`,n,()=>t.onReset(`--sf-link-external-label`)),K(e,n)};J(v,e=>{`--sf-link-external-label`in t.overrides&&e(y)}),F(g),H(()=>{Bi(f,t.overrides[`--sf-link-external-marker`]??``),Bi(_,t.overrides[`--sf-link-external-label`]??``)}),W(`input`,f,e=>{let n=e.target.value;n?t.onSet(`--sf-link-external-marker`,n):t.onReset(`--sf-link-external-marker`)}),W(`input`,_,e=>{let n=e.target.value;n?t.onSet(`--sf-link-external-label`,n):t.onReset(`--sf-link-external-label`)}),K(e,n)};J(Be,e=>{U(M)&&e(Ve)}),F(Ie);var He=V(Ie,4),Ge=z(He),Ke=V(z(Ge),2),qe=z(Ke,!0);F(Ke),F(Ge);var Je=V(Ge,2),Ye=e=>{var n=Wd();Y(V(B(n),2),16,()=>[{label:`Light`,token:`--sf-font-weight-light`,def:300},{label:`Normal`,token:`--sf-font-weight-normal`,def:400},{label:`Medium`,token:`--sf-font-weight-medium`,def:500},{label:`Semibold`,token:`--sf-font-weight-semibold`,def:600},{label:`Bold`,token:`--sf-font-weight-bold`,def:700}],e=>e.token,(e,n)=>{var r=Ud(),i=z(r),a=z(i),o=z(a,!0);F(a);var s=V(a,2),c=e=>{var r=Hd();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(i);var u=V(i,2);Y(u,20,()=>l,e=>e,(e,r)=>{let i=I(()=>t.overrides[n.token]??String(n.def));var a=Md(),o=z(a,!0);F(a),H(e=>{Z(a,e),X(a,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(i)===r?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(o,r)},[()=>`font-weight:${parseInt(r)}`]),W(`click`,a,()=>r===String(n.def)&&!(n.token in t.overrides)?void 0:r===String(n.def)?t.onReset(n.token):t.onSet(n.token,r)),K(e,a)}),F(u),F(r),H(()=>q(o,n.label)),K(e,r)}),K(e,n)};J(Je,e=>{U(ce)&&e(Ye)}),F(He);var Xe=V(He,4),Ze=z(Xe),Qe=V(z(Ze),2),$e=z(Qe,!0);F(Qe),F(Ze);var et=V(Ze,2),tt=e=>{var n=Kd(),r=B(n);{let e=I(()=>`--sf-text-display-base-min`in t.overrides||`--sf-text-display-base-max`in t.overrides);wd(r,{title:`Display base size`,get minValue(){return U(D)},get maxValue(){return U(O)},min:1.5,max:6,step:.05,unit:`rem`,previewKind:`type`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-text-display-base-min`),t.onReset(`--sf-text-display-base-max`)},onMinChange:e=>t.onSet(`--sf-text-display-base-min`,String(e)),onMaxChange:e=>t.onSet(`--sf-text-display-base-max`,String(e))})}var i=V(r,2);Y(i,20,()=>[{label:`Display L line-height`,token:`--sf-display-l-line-height`,def:1},{label:`Display M line-height`,token:`--sf-display-m-line-height`,def:1.05}],e=>e.token,(e,n)=>{var r=Gd(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);{let e=I(()=>S(n.token,n.def)),r=I(()=>n.token in t.overrides);$(o,{label:``,get value(){return U(e)},min:.8,max:1.5,step:.025,get overridden(){return U(r)},onChange:e=>t.onSet(n.token,String(e)),onReset:()=>t.onReset(n.token)})}F(r),H(()=>q(a,n.label)),K(e,r)}),F(i),Y(V(i,2),16,()=>[{label:`Display`,tokenName:`--sf-font-weight-display`},{label:`Heading`,tokenName:`--sf-font-weight-heading`}],e=>e.tokenName,(e,n)=>{let r=I(()=>u[n.tokenName]??`700`),i=I(()=>t.overrides[n.tokenName]??U(r)),a=I(()=>n.tokenName in t.overrides);var o=Rd(),s=z(o),c=z(s),d=z(c);F(c);var f=V(c,2),p=e=>{var r=Ld();W(`click`,r,()=>t.onReset(n.tokenName)),K(e,r)};J(f,e=>{U(a)&&e(p)}),F(s);var m=V(s,2);Y(m,20,()=>l,e=>e,(e,o)=>{var s=Md(),c=z(s,!0);F(s),H(e=>{Z(s,e),X(s,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(i)===o?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(c,o)},[()=>`font-weight: ${parseInt(o)}`]),W(`click`,s,()=>o===U(r)&&!U(a)?void 0:o===U(r)?t.onReset(n.tokenName):t.onSet(n.tokenName,o)),K(e,s)}),F(m),F(o),H(()=>q(d,`${n.label??``} weight`)),K(e,o)}),K(e,n)};J(et,e=>{U(re)&&e(tt)}),F(Xe);var nt=V(Xe,4),rt=z(nt),it=V(z(rt),2),at=z(it,!0);F(it),F(rt);var ot=V(rt,2),st=e=>{var n=Yd(),i=V(B(n),2);{let e=I(()=>`--sf-fluid-min-vw`in t.overrides||`--sf-fluid-max-vw`in t.overrides);wd(i,{title:`Viewport range`,get minValue(){return U(ee)},get maxValue(){return U(te)},min:15,max:120,step:.5,unit:`rem`,minLabel:`Mobile`,maxLabel:`Desktop`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-fluid-min-vw`),t.onReset(`--sf-fluid-max-vw`)},onMinChange:e=>t.onSet(`--sf-fluid-min-vw`,String(e)),onMaxChange:e=>t.onSet(`--sf-fluid-max-vw`,String(e))})}var a=V(i,2);{let e=I(()=>`--sf-text-base-min`in t.overrides||`--sf-text-base-max`in t.overrides);wd(a,{title:`Base size & ratio`,get minValue(){return U(T)},get maxValue(){return U(E)},min:.7,max:2,step:.01,unit:`rem`,minLabel:`Mobile`,maxLabel:`Desktop`,previewKind:`type`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-text-base-min`),t.onReset(`--sf-text-base-max`)},onMinChange:e=>t.onSet(`--sf-text-base-min`,String(e)),onMaxChange:e=>t.onSet(`--sf-text-base-max`,String(e)),get ratioPresets(){return r},get ratioMin(){return U(C)},get ratioMax(){return U(w)},ratioMin_bound:1.05,ratioMax_bound:1.8,onRatioMinChange:e=>t.onSet(`--sf-text-ratio-min`,String(e)),onRatioMaxChange:e=>t.onSet(`--sf-text-ratio-max`,String(e))})}var o=V(a,2),s=V(z(o),2);Y(s,21,()=>p,e=>e.token,(e,n)=>{{let r=I(()=>he(U(n))),i=I(()=>`${U(n).token} — ${U(n).label.toLowerCase()} line height`),a=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:1,max:2.2,step:.05,get help(){return U(i)},get overridden(){return U(a)},onChange:e=>t.onSet(U(n).token,String(e)),onReset:()=>t.onReset(U(n).token)})}}),F(s),F(o);var c=V(o,2);{let e=I(()=>`--sf-leading-taper`in t.overrides);$(c,{label:`Leading taper`,get value(){return U(k)},min:0,max:.5,step:.01,help:`How aggressively large display sizes shrink their line-height.`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-leading-taper`,String(e)),onReset:()=>t.onReset(`--sf-leading-taper`)})}var l=V(c,2),u=V(z(l),4);Y(u,21,()=>f,e=>e.token,(e,n)=>{var r=qd(),i=z(r),a=z(i),o=z(a,!0);F(a);var s=V(a,2),c=e=>{var r=Hd();W(`click`,r,()=>t.onReset(U(n).token)),K(e,r)};J(s,e=>{U(n).token in t.overrides&&e(c)}),F(i);var l=V(i,2);{let e=I(()=>me(U(n)));tu(l,{get value(){return U(e)},min:-.1,max:.2,step:.005,unit:`em`,onChange:e=>t.onSet(U(n).token,`${e}em`)})}F(r),H(()=>q(o,U(n).label)),K(e,r)}),F(u),F(l);var d=V(l,2),m=z(d),h=V(z(m),2),g=z(h,!0);F(h),F(m);var _=V(m,2),v=e=>{var n=Jd();Y(n,21,()=>x,e=>e.name,(e,n)=>{du(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(n),K(e,n)};J(_,e=>{U(ae)&&e(v)}),F(d),H(()=>{Q(m,`aria-expanded`,U(ae)),q(g,U(ae)?`▲`:`▼`)}),W(`click`,m,()=>{R(ae,!U(ae))}),K(e,n)};J(ot,e=>{U(ie)&&e(st)}),F(nt);var ct=V(nt,4),lt=z(ct),ut=V(z(lt),2),dt=z(ut,!0);F(ut),F(lt);var ft=V(lt,2),pt=e=>{var t=Zd();Y(t,21,()=>[...d].reverse(),({label:e,factor:t})=>e,(e,t)=>{let n=()=>U(t).label,r=()=>U(t).factor,i=I(()=>(U(T)+U(E))/2),a=I(()=>U(i)*r()*U(A));var o=Xd(),s=z(o),c=z(s,!0);F(s);var l=V(s,2),u=V(l,2),d=z(u);F(u),F(o),H((e,t)=>{q(c,n()),Z(l,e),q(d,`${t??``}rem`)},[()=>`font-size: ${Math.min(U(a),2.5)}rem; font-family: ${U(le)||`inherit`}`,()=>U(a).toFixed(2)]),K(e,o)}),F(t),K(e,t)};J(ft,e=>{U(oe)&&e(pt)}),F(ct);var mt=V(ct,4),ht=z(mt),gt=V(z(ht),2),_t=z(gt,!0);F(gt),F(ht);var vt=V(ht,2),yt=e=>{var n=ef(),r=V(B(n),2);Y(r,20,()=>[{label:`2xs`,token:`--sf-text-2xs-max-width`,def:`55ch`},{label:`xs`,token:`--sf-text-xs-max-width`,def:`60ch`},{label:`s`,token:`--sf-text-s-max-width`,def:`65ch`},{label:`m`,token:`--sf-text-m-max-width`,def:`65ch`},{label:`l`,token:`--sf-text-l-max-width`,def:`none`},{label:`xl`,token:`--sf-text-xl-max-width`,def:`none`},{label:`2xl`,token:`--sf-text-2xl-max-width`,def:`none`},{label:`3xl`,token:`--sf-text-3xl-max-width`,def:`none`},{label:`4xl`,token:`--sf-text-4xl-max-width`,def:`none`}],e=>e.token,(e,n)=>{var r=$d(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=Qd();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.def)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),F(r),K(e,n)};J(vt,e=>{U(N)&&e(yt)}),F(mt);var bt=V(mt,4),xt=z(bt),St=V(z(xt),2),Ct=z(St,!0);F(St),F(xt);var wt=V(xt,2),Tt=e=>{var n=tf(),r=V(B(n),2),i=V(z(r),2);Y(i,20,()=>[[`tabular-nums`,`tabular-nums (default)`],[`proportional-nums`,`proportional-nums`],[`normal`,`normal`]],([e,t])=>e,(e,n)=>{var r=I(()=>h(n,2));let i=()=>U(r)[0],a=()=>U(r)[1],o=I(()=>t.overrides[`--sf-font-numeric`]??`tabular-nums`);var s=Md(),c=z(s,!0);F(s),H(()=>{X(s,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${U(o)===i()?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(c,a())}),W(`click`,s,()=>i()===`tabular-nums`?t.onReset(`--sf-font-numeric`):t.onSet(`--sf-font-numeric`,i())),K(e,s)}),F(i),F(r);var a=V(r,2),o=V(z(a),2);Y(o,20,()=>[[`auto`,`auto (default)`],[`none`,`none`]],([e,t])=>e,(e,n)=>{var r=I(()=>h(n,2));let i=()=>U(r)[0],a=()=>U(r)[1],o=I(()=>t.overrides[`--sf-optical-sizing`]??`auto`);var s=Md(),c=z(s,!0);F(s),H(()=>{X(s,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${U(o)===i()?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(c,a())}),W(`click`,s,()=>i()===`auto`?t.onReset(`--sf-optical-sizing`):t.onSet(`--sf-optical-sizing`,i())),K(e,s)}),F(o),F(a);var s=V(a,2),c=V(z(s),2);zi(c);var l=V(c,2),u=e=>{var n=Qd();W(`click`,n,()=>t.onReset(`--sf-font-features`)),K(e,n)};J(l,e=>{`--sf-font-features`in t.overrides&&e(u)}),F(s);var d=V(s,2),f=V(z(d),2);zi(f);var p=V(f,2),m=e=>{var n=Qd();W(`click`,n,()=>t.onReset(`--sf-font-variation`)),K(e,n)};J(p,e=>{`--sf-font-variation`in t.overrides&&e(m)}),F(d),H(()=>{Bi(c,t.overrides[`--sf-font-features`]??``),Bi(f,t.overrides[`--sf-font-variation`]??``)}),W(`input`,c,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-font-features`,n):t.onReset(`--sf-font-features`)}),W(`input`,f,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-font-variation`,n):t.onReset(`--sf-font-variation`)}),K(e,n)};J(wt,e=>{U(se)&&e(Tt)}),F(bt),F(we),H(()=>{Q(Ee,`aria-expanded`,U(j)),q(P,U(j)?`▲`:`▼`),Q(je,`aria-expanded`,U(ne)),q(Ne,U(ne)?`▲`:`▼`),Q(Le,`aria-expanded`,U(M)),q(ze,U(M)?`▲`:`▼`),Q(Ge,`aria-expanded`,U(ce)),q(qe,U(ce)?`▲`:`▼`),Q(Ze,`aria-expanded`,U(re)),q($e,U(re)?`▲`:`▼`),Q(rt,`aria-expanded`,U(ie)),q(at,U(ie)?`▲`:`▼`),Q(lt,`aria-expanded`,U(oe)),q(dt,U(oe)?`▲`:`▼`),Q(ht,`aria-expanded`,U(N)),q(_t,U(N)?`▲`:`▼`),Q(xt,`aria-expanded`,U(se)),q(Ct,U(se)?`▲`:`▼`)}),W(`click`,Ee,()=>{R(j,!U(j))}),W(`click`,je,()=>{R(ne,!U(ne))}),W(`click`,Le,()=>{R(M,!U(M))}),W(`click`,Ge,()=>{R(ce,!U(ce))}),W(`click`,Ze,()=>{R(re,!U(re))}),W(`click`,rt,()=>{R(ie,!U(ie))}),W(`click`,lt,()=>{R(oe,!U(oe))}),W(`click`,ht,()=>{R(N,!U(N))}),W(`click`,xt,()=>{R(se,!U(se))}),K(e,we),We()}Br([`click`,`change`,`input`]);function af(e,t){return t.map(t=>({label:`${e}-${t}`,value:`var(--sf-${e}-${t})`}))}var of=af(`space`,[`2xs`,`xs`,`s`,`m`,`l`,`xl`,`2xl`,`3xl`,`4xl`]),sf=af(`radius`,[`2xs`,`xs`,`s`,`m`,`l`,`xl`,`2xl`,`3xl`,`4xl`,`full`]),cf=af(`border-width`,[`1`,`2`,`3`,`4`]),lf=af(`container`,[`narrow`,`prose`,`default`,`wide`,`full`]),uf=af(`size`,[`xs`,`s`,`m`,`l`,`xl`]);af(`shadow`,[`xs`,`s`,`m`,`l`,`xl`]);var df=G(`
`),ff=G(`

The two most-referenced spacing tokens. Referenced by every layout primitive (cluster, grid, stack, bento…).

`,1),pf=G(`

Utopia-style fluid scale — viewport width, base unit and ratio per endpoint. - The viewport range is shared with the type scale.

`,1),mf=G(`
`),hf=G(`
Space scale preview
`);function gf(e,t){Ue(t,!0);let n=[{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:`Golden — 1.618`,value:1.618}],r=[`2xs`,`xs`,`s`,`m`,`l`,`xl`,`2xl`,`3xl`,`4xl`],i=ql.spacing??[];function a(e,n){let r=parseFloat(t.overrides[e]??``);return isNaN(r)?n:r}let o=I(()=>a(`--sf-space-ratio-min`,1.25)),s=I(()=>a(`--sf-space-ratio-max`,1.333)),c=I(()=>a(`--sf-space-base-min`,1)),l=I(()=>a(`--sf-space-base-max`,2)),u=I(()=>a(`--sf-space-scale`,1)),d=I(()=>a(`--sf-gap`,1)),f=I(()=>a(`--sf-gutter`,1.5)),p=I(()=>a(`--sf-content-gap`,.5)),m=I(()=>a(`--sf-fluid-min-vw`,22.5)),h=I(()=>a(`--sf-fluid-max-vw`,90)),g=L(!1),_=L(!1),v=L(!1);var y=hf(),b=z(y),x=V(z(b),2);Y(x,22,()=>r,e=>e,(e,t,n)=>{let r=I(()=>(U(c)+U(l))/2),i=I(()=>(U(o)+U(s))/2),a=I(()=>U(n)-3),d=I(()=>U(a)>=0?U(r)*U(i)**+U(a):U(r)/U(i)**+-U(a)),f=I(()=>U(d)*U(u)),p=I(()=>Math.min(U(f)*28,240));var m=df(),h=z(m),g=z(h,!0);F(h);var _=V(h,2),v=V(_,2),y=z(v);F(v),F(m),H(e=>{q(g,t),Z(_,`width: ${U(p)}px; min-width: 3px`),q(y,`${e??``}rem`)},[()=>U(f).toFixed(2)]),K(e,m)}),F(x),F(b);var S=V(b,4),C=z(S),w=V(z(C),2),T=z(w,!0);F(w),F(C);var E=V(C,2),D=e=>{var n=ff(),r=V(B(n),2);{let e=I(()=>`--sf-gap`in t.overrides);$(r,{label:`Gap`,get value(){return U(d)},min:0,max:4,step:.0625,unit:`rem`,help:`--sf-gap — spacing between layout items (cluster, grid, reel, stack, sidebar, bento)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-gap`,`${e}rem`),onReset:()=>t.onReset(`--sf-gap`),rawDefault:`var(--sf-space-m)`,get variableOptions(){return of},get currentRaw(){return t.overrides[`--sf-gap`]},onRawSet:e=>t.onSet(`--sf-gap`,e)})}var i=V(r,2);{let e=I(()=>`--sf-content-gap`in t.overrides);$(i,{label:`Content gap`,get value(){return U(p)},min:0,max:2,step:.0625,unit:`rem`,help:`--sf-content-gap — tighter gap within components (defaults to space-s)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-content-gap`,`${e}rem`),onReset:()=>t.onReset(`--sf-content-gap`),rawDefault:`var(--sf-space-s)`,get variableOptions(){return of},get currentRaw(){return t.overrides[`--sf-content-gap`]},onRawSet:e=>t.onSet(`--sf-content-gap`,e)})}var a=V(i,2);{let e=I(()=>`--sf-gutter`in t.overrides);$(a,{label:`Gutter`,get value(){return U(f)},min:0,max:6,step:.0625,unit:`rem`,help:`--sf-gutter — wide page/section side gutter (containers, .sf-section--guttered)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-gutter`,`${e}rem`),onReset:()=>t.onReset(`--sf-gutter`),rawDefault:`var(--sf-space-l)`,get variableOptions(){return of},get currentRaw(){return t.overrides[`--sf-gutter`]},onRawSet:e=>t.onSet(`--sf-gutter`,e)})}K(e,n)};J(E,e=>{U(g)&&e(D)}),F(S);var O=V(S,4),k=z(O),A=V(z(k),2),ee=z(A,!0);F(A),F(k);var te=V(k,2),j=e=>{var r=pf(),i=V(B(r),2);{let e=I(()=>`--sf-fluid-min-vw`in t.overrides||`--sf-fluid-max-vw`in t.overrides);wd(i,{title:`Viewport range`,get minValue(){return U(m)},get maxValue(){return U(h)},min:15,max:120,step:.5,unit:`rem`,minLabel:`Mobile`,maxLabel:`Desktop`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-fluid-min-vw`),t.onReset(`--sf-fluid-max-vw`)},onMinChange:e=>t.onSet(`--sf-fluid-min-vw`,String(e)),onMaxChange:e=>t.onSet(`--sf-fluid-max-vw`,String(e))})}var a=V(i,2);{let e=I(()=>`--sf-space-base-min`in t.overrides||`--sf-space-base-max`in t.overrides);wd(a,{title:`Base unit & ratio`,get minValue(){return U(c)},get maxValue(){return U(l)},min:.5,max:4,step:.05,unit:`rem`,minLabel:`Mobile`,maxLabel:`Desktop`,previewKind:`space`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-space-base-min`),t.onReset(`--sf-space-base-max`)},onMinChange:e=>t.onSet(`--sf-space-base-min`,String(e)),onMaxChange:e=>t.onSet(`--sf-space-base-max`,String(e)),get ratioPresets(){return n},get ratioMin(){return U(o)},get ratioMax(){return U(s)},ratioMin_bound:1.1,ratioMax_bound:1.8,onRatioMinChange:e=>t.onSet(`--sf-space-ratio-min`,String(e)),onRatioMaxChange:e=>t.onSet(`--sf-space-ratio-max`,String(e))})}K(e,r)};J(te,e=>{U(_)&&e(j)}),F(O);var ne=V(O,4),M=z(ne),re=V(z(M),2),ie=z(re,!0);F(re),F(M);var ae=V(M,2),oe=e=>{var n=mf();Y(n,21,()=>i,e=>e.name,(e,n)=>{du(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(n),K(e,n)};J(ae,e=>{U(v)&&e(oe)}),F(ne),F(y),H(()=>{Q(C,`aria-expanded`,U(g)),q(T,U(g)?`▲`:`▼`),Q(k,`aria-expanded`,U(_)),q(ee,U(_)?`▲`:`▼`),Q(M,`aria-expanded`,U(v)),q(ie,U(v)?`▲`:`▼`)}),W(`click`,C,()=>{R(g,!U(g))}),W(`click`,k,()=>{R(_,!U(_))}),W(`click`,M,()=>{R(v,!U(v))}),K(e,y),We()}Br([`click`]);var _f=G(`
`),vf=G(`
Narrow
Prose
Default
Wide
`,1),yf=G(` `,1),bf=G(`
col
`),xf=G(`
Named sizes (grid-min-xs → 2xl)
Preview at 360px panel width
`,1),Sf=G(`
`),Cf=G(`
Mobile
Desktop
`,1),wf=G(`

Offsets position:sticky elements below a fixed header. Defaults to header heights.

Mobile
Desktop
`,1),Tf=G(`
`,1),Ef=G(`
`),Df=G(``),Of=G(``),kf=G(`
`),Af=G(``),jf=G(`
Switcher
Sidebar content
Cluster
Equal columns (flowing)
Content flows between columns like a newspaper — use .sf-grid for discrete grid cells instead.
Rule style
Rule color
Cover
Frame ratio

--sf-frame-ratio — aspect ratio for .sf-frame

Reel

--sf-reel-item-width — width of each item in a horizontal .sf-reel

Height
Imposter
Content grid (breakout)
Alternate (zigzag)
`),Mf=G(`
`),Nf=G(`

Override the built-in named aspect ratios used by .sf-ratio-* utilities.

`),Pf=G(`

Default values for the .sf-bg-layer full-bleed background utility.

`),Ff=G(`
`);function If(e,t){Ue(t,!0);let n=[`solid`,`dashed`,`dotted`],r=I(()=>qo.value===`dark`?`#16161e`:`#ffffff`);function i(e,t){if(!e)return t;let n=parseFloat(e);return isNaN(n)?t:n}let a=I(()=>i(t.overrides[`--sf-container-narrow`],38)),o=I(()=>i(t.overrides[`--sf-container-prose`],65)),s=I(()=>i(t.overrides[`--sf-container-default`],75)),c=I(()=>i(t.overrides[`--sf-container-wide`],90)),l=I(()=>i(t.overrides[`--sf-center-max`],75)),u=I(()=>i(t.overrides[`--sf-center-gutter`],1)),d=I(()=>i(t.overrides[`--sf-grid-min`],16)),f=I(()=>i(t.overrides[`--sf-header-height-mobile`],3.5)),p=I(()=>i(t.overrides[`--sf-header-height-desktop`],5)),m=I(()=>i(t.overrides[`--sf-sidebar-width`],18)),h=I(()=>i(t.overrides[`--sf-sticky-offset-mobile`],3.5)),g=I(()=>i(t.overrides[`--sf-sticky-offset-desktop`],5)),_=[{label:`Columns`,token:`--sf-bento-cols-default`,min:1,max:12,step:1,unit:``,default:4},{label:`Row default`,token:`--sf-bento-row-default`,min:4,max:24,step:.5,unit:`rem`,default:10},{label:`Row compact`,token:`--sf-bento-row-compact`,min:2,max:16,step:.5,unit:`rem`,default:6},{label:`Row tall`,token:`--sf-bento-row-tall`,min:8,max:32,step:.5,unit:`rem`,default:16}],v=L(!1),y=L(!1),b=L(!1),x=L(!1),S=L(!1),C=L(!1),w=L(!1),T=L(!1),E=L(!1),D=L(!1);function O(e){let n=t.overrides[e.token];return n?parseFloat(n):e.default}let k=I(()=>i(t.overrides[`--sf-switcher-threshold`],30)),A=I(()=>i(t.overrides[`--sf-sidebar-min-width`],50)),ee=I(()=>i(t.overrides[`--sf-equal-min-col`],16)),te=I(()=>i(t.overrides[`--sf-equal-rule-width`],0)),j=I(()=>t.overrides[`--sf-equal-rule-color`]??``),ne=I(()=>i(t.overrides[`--sf-cover-min-height`],100)),M=I(()=>i(t.overrides[`--sf-imposter-margin`],1)),re=I(()=>i(t.overrides[`--sf-breakout-width`],90)),ie=I(()=>i(t.overrides[`--sf-content-width`],75)),ae=I(()=>i(t.overrides[`--sf-alternate-inner-gap`],1)),oe=I(()=>t.overrides[`--sf-frame-ratio`]??`16 / 9`),se=I(()=>t.overrides[`--sf-reel-item-width`]??`max-content`),N=[`16 / 9`,`4 / 3`,`3 / 2`,`1 / 1`,`21 / 9`],ce=[{label:`auto`,value:`max-content`},{label:`12rem`,value:`12rem`},{label:`16rem`,value:`16rem`},{label:`20rem`,value:`20rem`}];var le=Ff(),ue=z(le),de=z(ue),fe=V(z(de),2),pe=z(fe,!0);F(fe),F(de);var me=V(de,2),he=e=>{var n=vf(),r=B(n),i=z(r),l=V(z(i),2);{let e=I(()=>`--sf-container-narrow`in t.overrides);$(l,{label:``,get value(){return U(a)},min:20,max:60,step:1,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-container-narrow`,`${e}rem`),onReset:()=>t.onReset(`--sf-container-narrow`)})}F(i);var u=V(i,2),d=V(z(u),2);{let e=I(()=>`--sf-container-prose`in t.overrides);$(d,{label:``,get value(){return U(o)},min:40,max:90,step:1,unit:`ch`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-container-prose`,`${e}ch`),onReset:()=>t.onReset(`--sf-container-prose`)})}F(u);var f=V(u,2),p=V(z(f),2);{let e=I(()=>`--sf-container-default`in t.overrides);$(p,{label:``,get value(){return U(s)},min:50,max:120,step:1,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-container-default`,`${e}rem`),onReset:()=>t.onReset(`--sf-container-default`)})}F(f);var m=V(f,2),h=V(z(m),2);{let e=I(()=>`--sf-container-wide`in t.overrides);$(h,{label:``,get value(){return U(c)},min:60,max:160,step:1,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-container-wide`,`${e}rem`),onReset:()=>t.onReset(`--sf-container-wide`)})}F(m),F(r);var g=V(r,2);Y(g,21,()=>[{label:`narrow`,value:U(a),max:U(c),unit:`rem`},{label:`prose`,value:U(o),max:U(c)*1.5,unit:`ch`},{label:`default`,value:U(s),max:U(c),unit:`rem`},{label:`wide`,value:U(c),max:U(c),unit:`rem`}],e=>e.label,(e,t)=>{var n=_f(),r=z(n),i=z(r,!0);F(r);var a=V(r,2),o=z(a);F(a);var s=V(a,2),c=z(s);F(s),F(n),H(e=>{q(i,U(t).label),Z(o,e),q(c,`${U(t).value??``}${U(t).unit??``}`)},[()=>`width: ${Math.min(U(t).value/U(t).max*100,100)}%`]),K(e,n)}),F(g),K(e,n)};J(me,e=>{U(v)&&e(he)}),F(ue);var ge=V(ue,4),_e=z(ge),ve=V(z(_e),2),ye=z(ve,!0);F(ve),F(_e);var be=V(_e,2),xe=e=>{var n=yf(),r=B(n);{let e=I(()=>`--sf-center-max`in t.overrides);$(r,{label:`Max width`,get value(){return U(l)},min:30,max:160,step:1,unit:`rem`,help:`--sf-center-max — max-width of the .sf-center centering wrapper`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-center-max`,`${e}rem`),onReset:()=>t.onReset(`--sf-center-max`),rawDefault:`var(--sf-container-default)`,get variableOptions(){return lf},get currentRaw(){return t.overrides[`--sf-center-max`]},onRawSet:e=>t.onSet(`--sf-center-max`,e)})}var i=V(r,2);{let e=I(()=>`--sf-center-gutter`in t.overrides);$(i,{label:`Gutter`,get value(){return U(u)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-center-gutter — minimum side padding inside the center wrapper`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-center-gutter`,`${e}rem`),onReset:()=>t.onReset(`--sf-center-gutter`),rawDefault:`var(--sf-gutter)`,get variableOptions(){return of},get currentRaw(){return t.overrides[`--sf-center-gutter`]},onRawSet:e=>t.onSet(`--sf-center-gutter`,e)})}K(e,n)};J(be,e=>{U(y)&&e(xe)}),F(ge);var Se=V(ge,4),Ce=z(Se),we=V(z(Ce),2),Te=z(we,!0);F(we),F(Ce);var Ee=V(Ce,2),De=e=>{var n=xf(),r=B(n);{let e=I(()=>`--sf-grid-min`in t.overrides);$(r,{label:`Grid min cell width`,get value(){return U(d)},min:8,max:40,step:.5,unit:`rem`,help:`sf-grid minimum column width — browser auto-fills columns`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-grid-min`,`${e}rem`),onReset:()=>t.onReset(`--sf-grid-min`)})}var a=V(r,2),o=V(z(a),2);Y(o,20,()=>[{label:`xs`,token:`--sf-grid-min-xs`,def:10},{label:`s`,token:`--sf-grid-min-s`,def:13},{label:`m`,token:`--sf-grid-min-m`,def:16},{label:`l`,token:`--sf-grid-min-l`,def:20},{label:`xl`,token:`--sf-grid-min-xl`,def:24},{label:`2xl`,token:`--sf-grid-min-2xl`,def:28}],e=>e.token,(e,n)=>{{let r=I(()=>i(t.overrides[n.token],n.def)),a=I(()=>n.token in t.overrides);$(e,{get label(){return n.label},get value(){return U(r)},min:6,max:40,step:.5,unit:`rem`,get overridden(){return U(a)},onChange:e=>t.onSet(n.token,`${e}rem`),onReset:()=>t.onReset(n.token)})}}),F(o),F(a);var s=V(a,2),c=V(z(s),2);Y(c,20,()=>Array.from({length:8}),ii,(e,t)=>{K(e,bf())}),F(c),F(s),H(e=>Z(c,e),[()=>`grid-template-columns: repeat(auto-fill, minmax(${Math.min(U(d)*16*(360/1200),120)}px, 1fr))`]),K(e,n)};J(Ee,e=>{U(b)&&e(De)}),F(Se);var P=V(Se,4),Oe=z(P),ke=V(z(Oe),2),Ae=z(ke,!0);F(ke),F(Oe);var je=V(Oe,2),Ne=e=>{var n=Cf(),r=B(n),i=z(r),a=V(z(i),2);{let e=I(()=>`--sf-header-height-mobile`in t.overrides);$(a,{label:``,get value(){return U(f)},min:2,max:8,step:.25,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-header-height-mobile`,`${e}rem`),onReset:()=>t.onReset(`--sf-header-height-mobile`)})}F(i);var o=V(i,2),s=V(z(o),2);{let e=I(()=>`--sf-header-height-desktop`in t.overrides);$(s,{label:``,get value(){return U(p)},min:3,max:10,step:.25,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-header-height-desktop`,`${e}rem`),onReset:()=>t.onReset(`--sf-header-height-desktop`)})}F(o),F(r);var c=V(r,2),l=z(c),u=V(z(l),2);Y(u,20,()=>[1,2,3],e=>e,(e,t)=>{K(e,Sf())}),F(u),F(l);var d=V(l,2),m=z(d);F(d),F(c),H(e=>{Z(l,e),q(m,`${U(f)??``}rem mobile · ${U(p)??``}rem desktop`)},[()=>`height: ${Math.min(U(f)*12,64)}px`]),K(e,n)};J(je,e=>{U(x)&&e(Ne)}),F(P);var Pe=V(P,4),Fe=z(Pe),Ie=V(z(Fe),2),Le=z(Ie,!0);F(Ie),F(Fe);var Re=V(Fe,2),ze=e=>{var n=wf(),r=V(B(n),2),i=z(r),a=V(z(i),2);{let e=I(()=>`--sf-sticky-offset-mobile`in t.overrides);$(a,{label:``,get value(){return U(h)},min:0,max:12,step:.25,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-sticky-offset-mobile`,`${e}rem`),onReset:()=>t.onReset(`--sf-sticky-offset-mobile`),rawDefault:`var(--sf-header-height-mobile)`,get currentRaw(){return t.overrides[`--sf-sticky-offset-mobile`]},onRawSet:e=>t.onSet(`--sf-sticky-offset-mobile`,e)})}F(i);var o=V(i,2),s=V(z(o),2);{let e=I(()=>`--sf-sticky-offset-desktop`in t.overrides);$(s,{label:``,get value(){return U(g)},min:0,max:12,step:.25,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-sticky-offset-desktop`,`${e}rem`),onReset:()=>t.onReset(`--sf-sticky-offset-desktop`),rawDefault:`var(--sf-header-height-desktop)`,get currentRaw(){return t.overrides[`--sf-sticky-offset-desktop`]},onRawSet:e=>t.onSet(`--sf-sticky-offset-desktop`,e)})}F(o),F(r),K(e,n)};J(Re,e=>{U(S)&&e(ze)}),F(Pe);var Be=V(Pe,4),Ve=z(Be),He=V(z(Ve),2),Ge=z(He,!0);F(He),F(Ve);var Ke=V(Ve,2),qe=e=>{var n=Tf(),r=B(n);{let e=I(()=>`--sf-sidebar-width`in t.overrides);$(r,{label:`Sidebar width`,get value(){return U(m)},min:10,max:32,step:.5,unit:`rem`,help:`--sf-sidebar-width — default sidebar / drawer width`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-sidebar-width`,`${e}rem`),onReset:()=>t.onReset(`--sf-sidebar-width`)})}var i=V(r,2),a=z(i),o=z(a),s=z(o);F(o),F(a),Me(2),F(i),H(e=>{Z(a,e),q(s,`${U(m)??``}rem`)},[()=>`width: ${Math.min(U(m)*3.5,100)}px`]),K(e,n)};J(Ke,e=>{U(C)&&e(qe)}),F(Be);var Je=V(Be,4),Ye=z(Je),Xe=V(z(Ye),2),Ze=z(Xe,!0);F(Xe),F(Ye);var Qe=V(Ye,2),$e=e=>{var n=Ef();Y(n,21,()=>_,e=>e.token,(e,n)=>{{let r=I(()=>O(U(n))),i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},get min(){return U(n).min},get max(){return U(n).max},get step(){return U(n).step},get unit(){return U(n).unit},get help(){return U(n).token},get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,U(n).unit?`${e}${U(n).unit}`:String(e)),onReset:()=>t.onReset(U(n).token)})}}),F(n),K(e,n)};J(Qe,e=>{U(w)&&e($e)}),F(Je);var et=V(Je,4),tt=z(et),nt=V(z(tt),2),rt=z(nt,!0);F(nt),F(tt);var it=V(tt,2),at=e=>{var i=jf(),a=z(i),o=V(z(a),2);{let e=I(()=>`--sf-switcher-threshold`in t.overrides);$(o,{label:`Threshold`,get value(){return U(k)},min:10,max:60,step:1,unit:`rem`,help:`--sf-switcher-threshold — width below which .sf-switcher stacks vertically`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-switcher-threshold`,`${e}rem`),onReset:()=>t.onReset(`--sf-switcher-threshold`)})}F(a);var s=V(a,2),c=V(z(s),2);{let e=I(()=>`--sf-sidebar-min-width`in t.overrides);$(c,{label:`Content min width`,get value(){return U(A)},min:20,max:80,step:1,unit:`%`,help:`--sf-sidebar-min-width — minimum width of the .sf-sidebar content column before it wraps`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-sidebar-min-width`,`${e}%`),onReset:()=>t.onReset(`--sf-sidebar-min-width`)})}F(s);var l=V(s,2);Y(V(z(l),2),16,()=>[{label:`Align`,token:`--sf-cluster-align`,def:`center`,opts:[`flex-start`,`center`,`flex-end`,`stretch`,`baseline`]},{label:`Justify`,token:`--sf-cluster-justify`,def:`flex-start`,opts:[`flex-start`,`center`,`flex-end`,`space-between`,`space-around`]}],e=>e.token,(e,n)=>{var i=kf(),a=z(i),o=z(a,!0);F(a);var s=V(a,2);Y(s,20,()=>n.opts,e=>e,(e,t)=>{var n=Df(),i=z(n,!0);F(n);var a={};H(()=>{Z(n,`background:${U(r)};`),q(i,t),a!==(a=t)&&(n.value=(n.__value=t)??``)}),K(e,n)}),F(s);var c;Di(s);var l=V(s,2),u=e=>{var r=Of();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(l,e=>{n.token in t.overrides&&e(u)}),F(i),H(()=>{q(o,n.label),c!==(c=t.overrides[n.token]??n.def)&&(s.value=(s.__value=t.overrides[n.token]??n.def)??``,Ei(s,t.overrides[n.token]??n.def))}),W(`change`,s,e=>{let r=e.target.value;r===n.def?t.onReset(n.token):t.onSet(n.token,r)}),K(e,i)}),F(l);var u=V(l,2),d=V(z(u),4);{let e=I(()=>`--sf-equal-min-col`in t.overrides);$(d,{label:`Min column width`,get value(){return U(ee)},min:6,max:36,step:.5,unit:`rem`,help:`--sf-equal-min-col — column-width floor for .sf-equal`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-equal-min-col`,`${e}rem`),onReset:()=>t.onReset(`--sf-equal-min-col`)})}var f=V(d,2);{let e=I(()=>`--sf-equal-rule-width`in t.overrides);$(f,{label:`Rule width`,get value(){return U(te)},min:0,max:4,step:.5,unit:`px`,help:`--sf-equal-rule-width — column-rule width between flowing columns, 0 = off`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-equal-rule-width`,`${e}px`),onReset:()=>t.onReset(`--sf-equal-rule-width`)})}var p=V(f,2),m=V(z(p),2);Y(m,20,()=>n,e=>e,(e,t)=>{var n=Df(),i=z(n,!0);F(n);var a={};H(()=>{Z(n,`background:${U(r)};`),q(i,t),a!==(a=t)&&(n.value=(n.__value=t)??``)}),K(e,n)}),F(m);var h;Di(m);var g=V(m,2),_=e=>{var n=Of();W(`click`,n,()=>t.onReset(`--sf-equal-rule-style`)),K(e,n)};J(g,e=>{`--sf-equal-rule-style`in t.overrides&&e(_)}),F(p);var v=V(p,2),y=V(z(v),2);{let e=I(()=>`--sf-equal-rule-color`in t.overrides);Au(y,{token:`--sf-equal-rule-color`,get value(){return U(j)},placeholder:`inherits border`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-equal-rule-color`,e),onReset:()=>t.onReset(`--sf-equal-rule-color`)})}F(v),F(u);var b=V(u,2),x=V(z(b),2);{let e=I(()=>`--sf-cover-min-height`in t.overrides);$(x,{label:`Min height`,get value(){return U(ne)},min:20,max:100,step:1,unit:`dvh`,help:`--sf-cover-min-height — minimum height of the .sf-cover layout`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-cover-min-height`,`${e}dvh`),onReset:()=>t.onReset(`--sf-cover-min-height`)})}F(b);var S=V(b,2),C=V(z(S),4);Y(C,20,()=>N,e=>e,(e,n)=>{var r=Af(),i=z(r,!0);F(r),H(e=>{X(r,1,e),q(i,n)},[()=>`py-1 rounded-lg text-[9px] border transition-all cursor-pointer font-mono ${U(oe).replace(/\s/g,``)===n.replace(/\s/g,``)?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`]),W(`click`,r,()=>n===`16 / 9`?t.onReset(`--sf-frame-ratio`):t.onSet(`--sf-frame-ratio`,n)),K(e,r)}),F(C),F(S);var w=V(S,2),T=V(z(w),4);Y(T,21,()=>ce,e=>e.value,(e,n)=>{var r=Af(),i=z(r,!0);F(r),H(()=>{X(r,1,`py-1 rounded-lg text-[9px] border transition-all cursor-pointer ${U(se)===U(n).value?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(i,U(n).label)}),W(`click`,r,()=>U(n).value===`max-content`?t.onReset(`--sf-reel-item-width`):t.onSet(`--sf-reel-item-width`,U(n).value)),K(e,r)}),F(T);var E=V(T,2),D=V(z(E),2);zi(D);var O=V(D,2),le=e=>{var n=Of();W(`click`,n,()=>t.onReset(`--sf-reel-height`)),K(e,n)};J(O,e=>{`--sf-reel-height`in t.overrides&&e(le)}),F(E),F(w);var ue=V(w,2),de=V(z(ue),2);{let e=I(()=>`--sf-imposter-margin`in t.overrides);$(de,{label:`Margin`,get value(){return U(M)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-imposter-margin — viewport inset for the centered .sf-imposter overlay`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-imposter-margin`,`${e}rem`),onReset:()=>t.onReset(`--sf-imposter-margin`),rawDefault:`var(--sf-space-m)`,get variableOptions(){return of},get currentRaw(){return t.overrides[`--sf-imposter-margin`]},onRawSet:e=>t.onSet(`--sf-imposter-margin`,e)})}F(ue);var fe=V(ue,2),pe=V(z(fe),2);{let e=I(()=>`--sf-content-width`in t.overrides);$(pe,{label:`Content width`,get value(){return U(ie)},min:40,max:120,step:1,unit:`rem`,help:`--sf-content-width — default reading column width in .sf-content-grid`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-content-width`,`${e}rem`),onReset:()=>t.onReset(`--sf-content-width`),rawDefault:`var(--sf-container-default)`,get variableOptions(){return lf},get currentRaw(){return t.overrides[`--sf-content-width`]},onRawSet:e=>t.onSet(`--sf-content-width`,e)})}var me=V(pe,2);{let e=I(()=>`--sf-breakout-width`in t.overrides);$(me,{label:`Breakout width`,get value(){return U(re)},min:50,max:160,step:1,unit:`rem`,help:`--sf-breakout-width — wide breakout column width in .sf-content-grid`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-breakout-width`,`${e}rem`),onReset:()=>t.onReset(`--sf-breakout-width`),rawDefault:`var(--sf-container-wide)`,get variableOptions(){return lf},get currentRaw(){return t.overrides[`--sf-breakout-width`]},onRawSet:e=>t.onSet(`--sf-breakout-width`,e)})}F(fe);var he=V(fe,2),ge=V(z(he),2);{let e=I(()=>`--sf-alternate-inner-gap`in t.overrides);$(ge,{label:`Inner gap`,get value(){return U(ae)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-alternate-inner-gap — gap between media and text within an .sf-alternate row`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-alternate-inner-gap`,`${e}rem`),onReset:()=>t.onReset(`--sf-alternate-inner-gap`),rawDefault:`var(--sf-gap)`,get variableOptions(){return of},get currentRaw(){return t.overrides[`--sf-alternate-inner-gap`]},onRawSet:e=>t.onSet(`--sf-alternate-inner-gap`,e)})}F(he),F(i),H(()=>{h!==(h=t.overrides[`--sf-equal-rule-style`]??`solid`)&&(m.value=(m.__value=t.overrides[`--sf-equal-rule-style`]??`solid`)??``,Ei(m,t.overrides[`--sf-equal-rule-style`]??`solid`)),Bi(D,t.overrides[`--sf-reel-height`]??``)}),W(`change`,m,e=>{let n=e.target.value;n===`solid`?t.onReset(`--sf-equal-rule-style`):t.onSet(`--sf-equal-rule-style`,n)}),W(`input`,D,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-reel-height`,n):t.onReset(`--sf-reel-height`)}),K(e,i)};J(it,e=>{U(T)&&e(at)}),F(et);var ot=V(et,4),st=z(ot),ct=V(z(st),2),lt=z(ct,!0);F(ct),F(st);var ut=V(st,2),dt=e=>{var n=Nf();Y(V(z(n),2),16,()=>[{label:`Square`,token:`--sf-ratio-square`,def:`1`},{label:`Portrait`,token:`--sf-ratio-portrait`,def:`3 / 4`},{label:`3:2`,token:`--sf-ratio-3-2`,def:`3 / 2`},{label:`4:3`,token:`--sf-ratio-4-3`,def:`4 / 3`},{label:`Video`,token:`--sf-ratio-video`,def:`16 / 9`},{label:`Cinema`,token:`--sf-ratio-cinema`,def:`21 / 9`},{label:`Golden`,token:`--sf-ratio-golden`,def:`1.618 / 1`}],e=>e.token,(e,n)=>{var r=Mf(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=Of();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.def)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),F(n),K(e,n)};J(ut,e=>{U(D)&&e(dt)}),F(ot);var ft=V(ot,4),pt=z(ft),mt=V(z(pt),2),ht=z(mt,!0);F(mt),F(pt);var gt=V(pt,2),_t=e=>{var n=Pf(),a=V(z(n),2);Y(a,16,()=>[{label:`Fit`,token:`--sf-bg-layer-fit`,placeholder:`cover`,opts:[`cover`,`contain`,`fill`,`none`,`scale-down`]},{label:`Position`,token:`--sf-bg-layer-position`,placeholder:`50% 50%`,opts:[`50% 50%`,`top`,`bottom`,`left`,`right`,`center`]}],e=>e.token,(e,n)=>{var i=kf(),a=z(i),o=z(a,!0);F(a);var s=V(a,2);Y(s,20,()=>n.opts,e=>e,(e,t)=>{var n=Df(),i=z(n,!0);F(n);var a={};H(()=>{Z(n,`background:${U(r)};`),q(i,t),a!==(a=t)&&(n.value=(n.__value=t)??``)}),K(e,n)}),F(s);var c;Di(s);var l=V(s,2),u=e=>{var r=Of();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(l,e=>{n.token in t.overrides&&e(u)}),F(i),H(()=>{q(o,n.label),c!==(c=t.overrides[n.token]??n.placeholder)&&(s.value=(s.__value=t.overrides[n.token]??n.placeholder)??``,Ei(s,t.overrides[n.token]??n.placeholder))}),W(`change`,s,e=>{let r=e.target.value;r===n.placeholder?t.onReset(n.token):t.onSet(n.token,r)}),K(e,i)});var o=V(a,2);{let e=I(()=>i(t.overrides[`--sf-bg-layer-inset`],0)),n=I(()=>`--sf-bg-layer-inset`in t.overrides);$(o,{label:`Inset`,get value(){return U(e)},min:0,max:4,step:.25,unit:`rem`,help:`--sf-bg-layer-inset — inset the background from the container edges`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-bg-layer-inset`,`${e}rem`),onReset:()=>t.onReset(`--sf-bg-layer-inset`)})}var s=V(o,2);{let e=I(()=>i(t.overrides[`--sf-bg-layer-radius`],0)),n=I(()=>`--sf-bg-layer-radius`in t.overrides);$(s,{label:`Radius`,get value(){return U(e)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-bg-layer-radius — corner radius of the background element`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-bg-layer-radius`,`${e}rem`),onReset:()=>t.onReset(`--sf-bg-layer-radius`)})}var c=V(s,2);{let e=I(()=>i(t.overrides[`--sf-bg-layer-z`],-2)),n=I(()=>`--sf-bg-layer-z`in t.overrides);$(c,{label:`Z-index`,get value(){return U(e)},min:-10,max:0,step:1,help:`--sf-bg-layer-z — stack order of the background pseudo-element (typically negative)`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-bg-layer-z`,String(e)),onReset:()=>t.onReset(`--sf-bg-layer-z`)})}F(n),K(e,n)};J(gt,e=>{U(E)&&e(_t)}),F(ft),F(le),H(()=>{Q(de,`aria-expanded`,U(v)),q(pe,U(v)?`▲`:`▼`),Q(_e,`aria-expanded`,U(y)),q(ye,U(y)?`▲`:`▼`),Q(Ce,`aria-expanded`,U(b)),q(Te,U(b)?`▲`:`▼`),Q(Oe,`aria-expanded`,U(x)),q(Ae,U(x)?`▲`:`▼`),Q(Fe,`aria-expanded`,U(S)),q(Le,U(S)?`▲`:`▼`),Q(Ve,`aria-expanded`,U(C)),q(Ge,U(C)?`▲`:`▼`),Q(Ye,`aria-expanded`,U(w)),q(Ze,U(w)?`▲`:`▼`),Q(tt,`aria-expanded`,U(T)),q(rt,U(T)?`▲`:`▼`),Q(st,`aria-expanded`,U(D)),q(lt,U(D)?`▲`:`▼`),Q(pt,`aria-expanded`,U(E)),q(ht,U(E)?`▲`:`▼`)}),W(`click`,de,()=>{R(v,!U(v))}),W(`click`,_e,()=>{R(y,!U(y))}),W(`click`,Ce,()=>{R(b,!U(b))}),W(`click`,Oe,()=>{R(x,!U(x))}),W(`click`,Fe,()=>{R(S,!U(S))}),W(`click`,Ve,()=>{R(C,!U(C))}),W(`click`,Ye,()=>{R(w,!U(w))}),W(`click`,tt,()=>{R(T,!U(T))}),W(`click`,st,()=>{R(D,!U(D))}),W(`click`,pt,()=>{R(E,!U(E))}),K(e,le),We()}Br([`click`,`change`,`input`]);var Lf=G(`

Drives --sf-color-border--strong, --subtle, --translucent automatically.

`,1),Rf=G(`
`),zf=G(`
`,1),Bf=G(``),Vf=G(`
`),Hf=G(`
Border sample
`,1),Uf=G(`
Color
`,1),Wf=G(`
Ring color
Focus preview
`,1),Gf=G(`
`),Kf=G(`
`),qf=G(`
`),Jf=G(`

--sf-media-radius — 0 by default (off). Rounds every <img>/<figure> globally via a - zero-specificity :where() rule; .sf-bg-layer and component-level radii still win.

`,1),Yf=G(`
`),Xf=G(`
`),Zf=G(`
Radius
`);function Qf(e,t){Ue(t,!0);let n=[`solid`,`dashed`,`dotted`],r=[`xs`,`s`,`m`,`l`,`xl`,`2xl`,`full`],i={xs:2,s:4,m:8,l:12,xl:16,"2xl":24,full:9999},a=[{step:`xs`,name:`--sf-radius-xs`,default:2,max:16,step_size:.5,rawDefault:`calc(2px * var(--sf-radius-scale))`},{step:`s`,name:`--sf-radius-s`,default:4,max:24,step_size:.5,rawDefault:`calc(4px * var(--sf-radius-scale))`},{step:`m`,name:`--sf-radius-m`,default:8,max:32,step_size:1,rawDefault:`calc(8px * var(--sf-radius-scale))`},{step:`l`,name:`--sf-radius-l`,default:12,max:48,step_size:1,rawDefault:`calc(12px * var(--sf-radius-scale))`},{step:`xl`,name:`--sf-radius-xl`,default:16,max:64,step_size:1,rawDefault:`calc(16px * var(--sf-radius-scale))`},{step:`2xl`,name:`--sf-radius-2xl`,default:24,max:80,step_size:2,rawDefault:`calc(24px * var(--sf-radius-scale))`}],o=[{label:`Field radius`,token:`--sf-field-radius`,unit:`rem`,min:0,max:2,step:.05,default:.5,rawDefault:`var(--sf-radius-m)`,help:`--sf-field-radius`,variableOptions:sf},{label:`Field padding block`,token:`--sf-field-padding-block`,unit:`rem`,min:0,max:1,step:.025,default:.375,rawDefault:`var(--sf-space-xs)`,help:`--sf-field-padding-block`,variableOptions:of},{label:`Field padding inline`,token:`--sf-field-padding-inline`,unit:`rem`,min:0,max:2,step:.025,default:.75,rawDefault:`var(--sf-space-s)`,help:`--sf-field-padding-inline`,variableOptions:of}],s=ql.borders??[],c=L(!1),l=L(!1),u=L(!1),d=L(!1),f=L(!1),p=L(!1),m=L(!1),h=L(!1),g=L(!1),_=L(!1);function v(e,t,n){if(!e)return t;let r=parseFloat(n?e.replace(n,``):e);return isNaN(r)?t:r}let y=I(()=>v(t.overrides[`--sf-radius-scale`],1)),b=I(()=>v(t.overrides[`--sf-border-scale`],1)),x=I(()=>v(t.overrides[`--sf-focus-ring-width`],2,`px`)),S=I(()=>v(t.overrides[`--sf-focus-ring-offset`],2,`px`)),C=I(()=>v(t.overrides[`--sf-divider-width`]?.replace(`px`,``),1)),w=I(()=>v(t.overrides[`--sf-divider-gap`]?.replace(`rem`,``),1)),T=I(()=>t.overrides[`--sf-color-border`]??``),E=I(()=>t.overrides[`--sf-border-style`]??`solid`),D=I(()=>t.overrides[`--sf-focus-ring-color`]??``),O=I(()=>t.overrides[`--sf-divider-color`]??``),k=I(()=>v(t.overrides[`--sf-media-radius`]?.replace(`rem`,``),0));function A(e,n){return t.overrides[e]??n}function ee(e){let n=t.overrides[e.name];if(!n||/^(var|calc|clamp)\(/.test(n.trim()))return e.default;let r=parseFloat(n);return isNaN(r)?e.default:r}function te(e){let n=t.overrides[e.token];if(!n||/^(var|calc|clamp)\(/.test(n.trim()))return e.default;let r=parseFloat(n);return isNaN(r)?e.default:r}var j=Zf(),ne=z(j),M=z(ne),re=V(z(M),2),ie=z(re,!0);F(re),F(M);var ae=V(M,2),oe=e=>{var n=Lf(),r=B(n);{let e=I(()=>`--sf-color-border`in t.overrides);Au(r,{token:`--sf-color-border`,get value(){return U(T)},placeholder:`auto-derived`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-color-border`,e),onReset:()=>t.onReset(`--sf-color-border`)})}Me(2),K(e,n)};J(ae,e=>{U(c)&&e(oe)}),F(ne);var se=V(ne,4),N=z(se),ce=V(z(N),2),le=z(ce,!0);F(ce),F(N);var ue=V(N,2),de=e=>{var n=zf(),r=B(n);{let e=I(()=>`--sf-border-scale`in t.overrides);$(r,{label:`Border scale`,get value(){return U(b)},min:0,max:4,step:.25,help:`Multiplier applied to all border widths. 0 hides all borders.`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-border-scale`,String(e)),onReset:()=>t.onReset(`--sf-border-scale`)})}var i=V(r,2);{let e=I(()=>v(t.overrides[`--sf-border-width-hairline`]?.replace(`px`,``),.5)),n=I(()=>`--sf-border-width-hairline`in t.overrides);$(i,{label:`Hairline`,get value(){return U(e)},min:0,max:1,step:.25,unit:`px`,help:`--sf-border-width-hairline — ultra-thin border for retina displays`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-border-width-hairline`,`${e}px`),onReset:()=>t.onReset(`--sf-border-width-hairline`)})}var a=V(i,2);{let e=I(()=>v(t.overrides[`--sf-box-border-width`]?.replace(`px`,``),0)),n=I(()=>`--sf-box-border-width`in t.overrides);$(a,{label:`Box border`,get value(){return U(e)},min:0,max:4,step:.5,unit:`px`,help:`--sf-box-border-width — box-shadow border drawn without affecting layout`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-box-border-width`,`${e}px`),onReset:()=>t.onReset(`--sf-box-border-width`)})}var o=V(a,2);Y(o,20,()=>[1,2,3,4],e=>e,(e,t)=>{var n=Rf(),r=z(n),i=z(r);F(r);var a=V(r,2),o=V(a,2),s=z(o);F(o),F(n),H((e,n)=>{q(i,`${t??``}px →`),Z(a,e),q(s,`${n??``}px`)},[()=>`height: ${Math.max(t*U(b),.5)}px`,()=>(t*U(b)).toFixed(1)]),K(e,n)}),F(o),K(e,n)};J(ue,e=>{U(l)&&e(de)}),F(se);var fe=V(se,4),pe=z(fe),me=V(z(pe),2),he=z(me,!0);F(me),F(pe);var ge=V(pe,2),_e=e=>{var r=Hf(),i=B(r);Y(i,20,()=>[{label:`Border`,token:`--sf-border-style`,default:`solid`},{label:`Divider`,token:`--sf-divider-style`,default:`solid`}],e=>e.token,(e,r)=>{var i=Vf(),a=z(i),o=z(a,!0);F(a);var s=V(a,2);Y(s,20,()=>n,e=>e,(e,n)=>{let i=I(()=>A(r.token,r.default));var a=Bf(),o=z(a),s=V(o);F(a),H(()=>{X(a,1,`px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer text-center ${U(i)===n?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),Z(o,`width: 20px; height: 0; border-bottom: 2px ${n} currentColor; opacity: 0.7`),q(s,` ${n??``}`)}),W(`click`,a,()=>n===r.default?t.onReset(r.token):t.onSet(r.token,n)),K(e,a)}),F(s),F(i),H(()=>q(o,r.label)),K(e,i)}),F(i);var a=V(i,2),o=z(a),s=V(o,2),c=z(s);F(s),F(a),H((e,t)=>{Z(o,e),q(c,`${t??``}px · ${U(E)??``}`)},[()=>`border: ${Math.max(U(b),.5)}px ${U(E)} ${U(T)||`var(--sf-color-border, #64748b)`}`,()=>(1*U(b)).toFixed(1)]),K(e,r)};J(ge,e=>{U(u)&&e(_e)}),F(fe);var ve=V(fe,4),ye=z(ve),be=V(z(ye),2),xe=z(be,!0);F(be),F(ye);var Se=V(ye,2),Ce=e=>{var n=Uf(),r=B(n),i=V(z(r),2);{let e=I(()=>`--sf-divider-color`in t.overrides);Au(i,{token:`--sf-divider-color`,get value(){return U(O)},placeholder:`inherits border`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-divider-color`,e),onReset:()=>t.onReset(`--sf-divider-color`)})}F(r);var a=V(r,2);{let e=I(()=>`--sf-divider-width`in t.overrides);$(a,{label:`Width`,get value(){return U(C)},min:.5,max:4,step:.5,unit:`px`,help:`--sf-divider-width`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-divider-width`,`${e}px`),onReset:()=>t.onReset(`--sf-divider-width`),rawDefault:`var(--sf-border-width-1)`,get variableOptions(){return cf},get currentRaw(){return t.overrides[`--sf-divider-width`]},onRawSet:e=>t.onSet(`--sf-divider-width`,e)})}var o=V(a,2);{let e=I(()=>`--sf-divider-gap`in t.overrides);$(o,{label:`Gap`,get value(){return U(w)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-divider-gap — spacing around divider lines`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-divider-gap`,`${e}rem`),onReset:()=>t.onReset(`--sf-divider-gap`),rawDefault:`var(--sf-space-m)`,get variableOptions(){return of},get currentRaw(){return t.overrides[`--sf-divider-gap`]},onRawSet:e=>t.onSet(`--sf-divider-gap`,e)})}K(e,n)};J(Se,e=>{U(d)&&e(Ce)}),F(ve);var we=V(ve,4),Te=z(we),Ee=V(z(Te),2),De=z(Ee,!0);F(Ee),F(Te);var P=V(Te,2),Oe=e=>{var n=Wf(),r=B(n);{let e=I(()=>`--sf-focus-ring-width`in t.overrides);$(r,{label:`Ring width`,get value(){return U(x)},min:0,max:6,step:.5,unit:`px`,help:`Thickness of the keyboard focus indicator`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-focus-ring-width`,`${e}px`),onReset:()=>t.onReset(`--sf-focus-ring-width`)})}var i=V(r,2);{let e=I(()=>`--sf-focus-ring-offset`in t.overrides);$(i,{label:`Ring offset`,get value(){return U(S)},min:0,max:8,step:.5,unit:`px`,help:`Gap between element edge and focus ring`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-focus-ring-offset`,`${e}px`),onReset:()=>t.onReset(`--sf-focus-ring-offset`)})}var a=V(i,2),o=V(z(a),2);{let e=I(()=>`--sf-focus-ring-color`in t.overrides);Au(o,{token:`--sf-focus-ring-color`,get value(){return U(D)},placeholder:`default (action)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-focus-ring-color`,e),onReset:()=>t.onReset(`--sf-focus-ring-color`)})}F(a);var s=V(a,2),c=z(s);F(s),H(()=>Z(c,`outline: ${U(x)}px solid ${U(D)||`oklch(0.7 0.2 235)`}; outline-offset: ${U(S)}px`)),K(e,n)};J(P,e=>{U(f)&&e(Oe)}),F(we);var ke=V(we,6),Ae=z(ke),je=V(z(Ae),2),Ne=z(je,!0);F(je),F(Ae);var Pe=V(Ae,2),Fe=e=>{var n=Gf();Y(n,21,()=>a,e=>e.name,(e,n)=>{{let r=I(()=>ee(U(n))),i=I(()=>U(n).name in t.overrides);$(e,{get label(){return U(n).step},get value(){return U(r)},min:0,get max(){return U(n).max},get step(){return U(n).step_size},unit:`px`,get overridden(){return U(i)},onChange:e=>t.onSet(U(n).name,`${e}px`),onReset:()=>t.onReset(U(n).name),get rawDefault(){return U(n).rawDefault},get currentRaw(){return t.overrides[U(n).name]},onRawSet:e=>t.onSet(U(n).name,e)})}}),F(n),K(e,n)};J(Pe,e=>{U(g)&&e(Fe)}),F(ke);var Ie=V(ke,2),Le=z(Ie),Re=V(z(Le),2),ze=z(Re,!0);F(Re),F(Le);var Be=V(Le,2),Ve=e=>{var t=qf(),n=z(t);Y(n,20,()=>r,e=>e,(e,t)=>{let n=I(()=>i[t]??6),r=I(()=>t===`full`?9999:U(n)*U(y));var a=Kf(),o=z(a),s=V(o,2),c=z(s,!0);F(s),F(a),H(e=>{Z(o,e),q(c,t)},[()=>`border-radius: ${Math.min(U(r),9999)}px`]),K(e,a)}),F(n),F(t),K(e,t)};J(Be,e=>{U(m)&&e(Ve)}),F(Ie);var He=V(Ie,4),Ge=z(He),Ke=V(z(Ge),2),qe=z(Ke,!0);F(Ke),F(Ge);var Je=V(Ge,2),Ye=e=>{var n=Jf(),r=V(B(n),2);{let e=I(()=>`--sf-media-radius`in t.overrides);$(r,{label:`Radius`,get value(){return U(k)},min:0,max:2,step:.05,unit:`rem`,help:`--sf-media-radius`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-media-radius`,`${e}rem`),onReset:()=>t.onReset(`--sf-media-radius`),rawDefault:`var(--sf-radius-m)`,get variableOptions(){return sf},get currentRaw(){return t.overrides[`--sf-media-radius`]},onRawSet:e=>t.onSet(`--sf-media-radius`,e)})}var i=V(r,2),a=z(i);F(i),H(()=>Z(a,`border-radius: ${U(k)}rem`)),K(e,n)};J(Je,e=>{U(h)&&e(Ye)}),F(He);var Xe=V(He,4),Ze=z(Xe),Qe=V(z(Ze),2),$e=z(Qe,!0);F(Qe),F(Ze);var et=V(Ze,2),tt=e=>{var n=Yf();Y(n,21,()=>o,e=>e.token,(e,n)=>{{let r=I(()=>te(U(n))),i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},get min(){return U(n).min},get max(){return U(n).max},get step(){return U(n).step},get unit(){return U(n).unit},get help(){return U(n).help},get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,`${e}${U(n).unit}`),onReset:()=>t.onReset(U(n).token),get rawDefault(){return U(n).rawDefault},get variableOptions(){return U(n).variableOptions},get currentRaw(){return t.overrides[U(n).token]},onRawSet:e=>t.onSet(U(n).token,e)})}}),F(n),K(e,n)};J(et,e=>{U(_)&&e(tt)}),F(Xe);var nt=V(Xe,4),rt=z(nt),it=V(z(rt),2),at=z(it,!0);F(it),F(rt);var ot=V(rt,2),st=e=>{var n=Xf();Y(n,21,()=>s,e=>e.name,(e,n)=>{du(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(n),K(e,n)};J(ot,e=>{U(p)&&e(st)}),F(nt),F(j),H(()=>{Q(M,`aria-expanded`,U(c)),q(ie,U(c)?`▲`:`▼`),Q(N,`aria-expanded`,U(l)),q(le,U(l)?`▲`:`▼`),Q(pe,`aria-expanded`,U(u)),q(he,U(u)?`▲`:`▼`),Q(ye,`aria-expanded`,U(d)),q(xe,U(d)?`▲`:`▼`),Q(Te,`aria-expanded`,U(f)),q(De,U(f)?`▲`:`▼`),Q(Ae,`aria-expanded`,U(g)),q(Ne,U(g)?`▲`:`▼`),Q(Le,`aria-expanded`,U(m)),q(ze,U(m)?`▲`:`▼`),Q(Ge,`aria-expanded`,U(h)),q(qe,U(h)?`▲`:`▼`),Q(Ze,`aria-expanded`,U(_)),q($e,U(_)?`▲`:`▼`),Q(rt,`aria-expanded`,U(p)),q(at,U(p)?`▲`:`▼`)}),W(`click`,M,()=>{R(c,!U(c))}),W(`click`,N,()=>{R(l,!U(l))}),W(`click`,pe,()=>{R(u,!U(u))}),W(`click`,ye,()=>{R(d,!U(d))}),W(`click`,Te,()=>{R(f,!U(f))}),W(`click`,Ae,()=>{R(g,!U(g))}),W(`click`,Le,()=>{R(m,!U(m))}),W(`click`,Ge,()=>{R(h,!U(h))}),W(`click`,Ze,()=>{R(_,!U(_))}),W(`click`,rt,()=>{R(p,!U(p))}),K(e,j),We()}Br([`click`]);var $f=G(`
`),ep=G(`
Shadow color

Warm, cool or brand-tinted shadows. Default uses neutral hue.

`),tp=G(`
Glow color

Which brand color radiates the glow. Defaults to primary.

`),np=G(`

Glow disabled.

`),rp=G(`
Shadow glow
Ambient glow on elevated surfaces
`,1),ip=G(`
`),ap=G(`
`);function op(e,t){Ue(t,!0);let n=[`xs`,`s`,`m`,`l`,`xl`,`2xl`],r=ql.shadows??[],i=I(()=>(()=>{let e=parseFloat(t.overrides[`--sf-shadow-lightness`]??`0.15`);return isFinite(e)?e:.15})()),a=I(()=>t.overrides[`--sf-shadow-color`]??``),o=I(()=>t.overrides[`--sf-shadow-glow-color`]??``),s=I(()=>t.overrides[`--sf-shadow-glow`]===`none`),c=L(!1),l=L(!1),u=L(!1);var d=ap(),f=z(d);Y(f,22,()=>n,e=>e,(e,t,n)=>{var r=$f(),i=z(r),a=V(i,2),o=z(a,!0);F(a),F(r),H(()=>{Z(i,`width: ${40+U(n)*4}px; height: ${40+U(n)*4}px; box-shadow: var(--sf-shadow-${t})`),q(o,t)}),K(e,r)}),F(f);var p=V(f,4);{let e=I(()=>`--sf-shadow-lightness`in t.overrides);$(p,{label:`Shadow lightness`,get value(){return U(i)},min:0,max:.5,step:.01,help:`--sf-shadow-lightness — OKLCH lightness of the shadow color. Lower = darker, more visible shadows.`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-shadow-lightness`,String(e)),onReset:()=>t.onReset(`--sf-shadow-lightness`)})}var m=V(p,4),h=z(m),g=V(z(h),2),_=z(g,!0);F(g),F(h);var v=V(h,2),y=e=>{var n=ep(),r=V(z(n),2);{let e=I(()=>`--sf-shadow-color`in t.overrides);Au(r,{token:`--sf-shadow-color`,get value(){return U(a)},placeholder:`auto (neutral hue)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-shadow-color`,e),onReset:()=>t.onReset(`--sf-shadow-color`)})}Me(2),F(n),K(e,n)};J(v,e=>{U(c)&&e(y)}),F(m);var b=V(m,4),x=z(b),S=V(z(x),2),C=z(S,!0);F(S),F(x);var w=V(x,2),T=e=>{var n=rp(),r=B(n),i=V(z(r),2),a=z(i);F(i),F(r);var c=V(r,2),l=e=>{var n=tp(),r=V(z(n),2);{let e=I(()=>`--sf-shadow-glow-color`in t.overrides);Au(r,{token:`--sf-shadow-glow-color`,get value(){return U(o)},placeholder:`default (primary color)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-shadow-glow-color`,e),onReset:()=>t.onReset(`--sf-shadow-glow-color`)})}Me(2),F(n),K(e,n)};J(c,e=>{U(s)||e(l)});var u=V(c,2),d=z(u);F(u);var f=V(u,2),p=e=>{K(e,np())};J(f,e=>{U(s)&&e(p)}),H(()=>{Q(i,`aria-label`,U(s)?`Enable shadow glow`:`Disable shadow glow`),X(i,1,`w-9 h-5 rounded-full transition-colors relative cursor-pointer ${U(s)?`bg-black/10 dark:bg-white/10`:`bg-indigo-600`}`),X(a,1,`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${U(s)?`translate-x-0.5`:`translate-x-4`}`),Z(d,`box-shadow: ${U(s)?`none`:`var(--sf-shadow-glow)`}`)}),W(`click`,i,()=>{U(s)?t.onReset(`--sf-shadow-glow`):t.onSet(`--sf-shadow-glow`,`none`)}),K(e,n)};J(w,e=>{U(l)&&e(T)}),F(b);var E=V(b,4),D=z(E),O=V(z(D),2),k=z(O,!0);F(O),F(D);var A=V(D,2),ee=e=>{var n=ip();Y(n,21,()=>r,e=>e.name,(e,n)=>{du(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(n),K(e,n)};J(A,e=>{U(u)&&e(ee)}),F(E),F(d),H(()=>{Q(h,`aria-expanded`,U(c)),q(_,U(c)?`▲`:`▼`),Q(x,`aria-expanded`,U(l)),q(C,U(l)?`▲`:`▼`),Q(D,`aria-expanded`,U(u)),q(k,U(u)?`▲`:`▼`)}),W(`click`,h,()=>{R(c,!U(c))}),W(`click`,x,()=>{R(l,!U(l))}),W(`click`,D,()=>{R(u,!U(u))}),K(e,d),We()}Br([`click`]);var sp=G(`

Motion is disabled — duration & easing have no effect while scale is 0.

`),cp=G(``),lp=G(`(No effect while motion is disabled.)`),up=G(`
`),dp=G(`

Named duration tokens. Drag to set an absolute ms value, overriding the global scale.

`,1),fp=G(``),pp=G(`
`),mp=G(`

Edit the named easing tokens. Accepts any CSS timing function — cubic-bezier(…) or linear(…). Use “Live preview” above to feel a curve.

`,1),hp=G(``),gp=G(`
`),_p=G(`

One slider sets all five stagger delays (delay-1 through delay-5 are multiples of this base).

Stagger base
`,1),vp=G(``),yp=G(`
`),bp=G(`

Default animation-range for scroll-driven animations using the .sf-entrance--* / .sf-exit--* macros.

`,1),xp=G(`
Disable motion
Respects prefers-reduced-motion
Live preview
`);function Sp(e,t){Ue(t,!0);let n=I(()=>qo.value===`dark`?`#16161e`:`#ffffff`),r=[{label:`Instant`,token:`--sf-duration-instant`,base:100,max:300},{label:`Fast`,token:`--sf-duration-fast`,base:150,max:500},{label:`Normal`,token:`--sf-duration-normal`,base:250,max:800},{label:`Slow`,token:`--sf-duration-slow`,base:400,max:1200},{label:`Slower`,token:`--sf-duration-slower`,base:600,max:2e3}],i=[{label:`Linear`,token:`--sf-ease-linear`,value:`linear`,preview:`M0,40 L40,0`},{label:`Ease out`,token:`--sf-ease-out`,value:`cubic-bezier(0.25, 0, 0.15, 1)`,preview:`M0,40 C8,40 28,0 40,0`},{label:`Ease in`,token:`--sf-ease-in`,value:`cubic-bezier(0.5, 0, 0.75, 0.25)`,preview:`M0,40 C12,40 32,32 40,0`},{label:`Ease in-out`,token:`--sf-ease-in-out`,value:`cubic-bezier(0.4, 0, 0.2, 1)`,preview:`M0,40 C8,40 32,0 40,0`},{label:`Spring`,token:`--sf-ease-spring`,value:`linear(0, 0.5, 1.1, 0.95, 1.02, 1)`,preview:`M0,40 C10,20 20,-4 28,-2 S38,2 40,0`},{label:`Bounce`,token:`--sf-ease-bounce`,value:`linear(0, 0.35 18%, 1 32%, 0.86 42%, 1.02 56%, 0.98 72%, 1)`,preview:`M0,40 L12,16 L20,0 L26,6 L32,-1 L36,1 L40,0`},{label:`Elastic`,token:`--sf-ease-elastic`,value:`linear(0, 0.3, 1.2, 0.9, 1.05, 1)`,preview:`M0,40 C8,40 16,-10 24,-2 S36,2 40,0`},{label:`Overshoot`,token:`--sf-ease-overshoot`,value:`linear(0, 0.6 30%, 1.08 55%, 0.98 75%, 1)`,preview:`M0,40 C8,40 20,-10 40,0`}],a=[`--sf-animation-delay-1`,`--sf-animation-delay-2`,`--sf-animation-delay-3`,`--sf-animation-delay-4`,`--sf-animation-delay-5`],o=ql.motion??[],s=I(()=>(()=>{let e=parseFloat(t.overrides[`--sf-motion-scale`]??`1`);return isFinite(e)?e:1})()),c=I(()=>t.overrides[`--sf-motion-scale`]===`0`),l=I(()=>(()=>{let e=parseFloat(t.overrides[`--sf-theme-transition-duration`]?.replace(`ms`,``)??String(300*U(s)));return isFinite(e)?e:Math.round(300*U(s))})()),u=I(()=>{let e=t.overrides[a[0]];return e?parseFloat(e.replace(`ms`,``)):75*U(s)}),d=L(!1),f=L(0),p=L(`--sf-ease-out`),m=L(`--sf-duration-normal`),h=L(!1),g=L(!1),_=L(!1),v=L(!1);function y(e,n){let r=t.overrides[e];if(r){let e=parseFloat(r);if(isFinite(e))return e}return Math.round(n*U(s))}function b(e){return t.overrides[e]??i.find(t=>t.token===e)?.value??`ease`}function x(){if(U(d))return;let e=r.find(e=>e.token===U(m))?.base??250,t=y(U(m),e);R(d,!0),R(f,180),setTimeout(()=>{R(f,0),setTimeout(()=>{R(d,!1)},t)},t)}function S(e){let n={};for(let t=1;t<=5;t++)n[`--sf-animation-delay-${t}`]=`${Math.round(e*t)}ms`;t.onBulkChange(n)}function C(){let e={};for(let t=1;t<=5;t++)e[`--sf-animation-delay-${t}`]=null;t.onBulkChange(e)}var w=xp(),T=z(w),E=V(z(T),2),D=z(E);F(E),F(T);var O=V(T,2),k=e=>{K(e,sp())};J(O,e=>{U(c)&&e(k)});var A=V(O,2),ee=V(z(A),2),te=z(ee),j=z(te);F(te);var ne=V(te,2),M=z(ne);Y(M,21,()=>i,e=>e.token,(e,t)=>{var r=cp(),i=z(r,!0);F(r);var a={};H(()=>{Z(r,`background:${U(n)};`),q(i,U(t).label),a!==(a=U(t).token)&&(r.value=(r.__value=U(t).token)??``)}),K(e,r)}),F(M);var re;Di(M);var ie=V(M,2);Y(ie,21,()=>r,e=>e.token,(e,t)=>{var r=cp(),i=z(r,!0);F(r);var a={};H(()=>{Z(r,`background:${U(n)};`),q(i,U(t).label),a!==(a=U(t).token)&&(r.value=(r.__value=U(t).token)??``)}),K(e,r)}),F(ie);var ae;Di(ie);var oe=V(ie,2),se=z(oe,!0);F(oe),F(ne),F(ee),F(A);var N=V(A,4),ce=z(N),le=V(z(ce),2),ue=z(le,!0);F(le),F(ce);var de=V(ce,2),fe=e=>{var n=dp(),i=B(n),a=V(z(i)),o=e=>{K(e,lp())};J(a,e=>{U(c)&&e(o)}),F(i);var s=V(i,2);Y(s,17,()=>r,e=>e.token,(e,n)=>{let r=I(()=>y(U(n).token,U(n).base));{let i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:0,get max(){return U(n).max},step:10,unit:`ms`,get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,`${e}ms`),onReset:()=>t.onReset(U(n).token)})}});var l=V(s,2);Y(l,21,()=>r,e=>e.label,(e,t)=>{let n=I(()=>y(U(t).token,U(t).base));var r=up(),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o);F(o);var c=V(o,2),l=z(c);F(c),F(r),H(e=>{q(a,U(t).label),Z(s,e),q(l,`${U(n)??``}ms`)},[()=>`width: ${Math.min(U(n)/1200*100,100)}%`]),K(e,r)}),F(l),K(e,n)};J(de,e=>{U(h)&&e(fe)}),F(N);var pe=V(N,4),me=z(pe),he=V(z(me),2),ge=z(he,!0);F(he),F(me);var _e=V(me,2),ve=e=>{var n=mp(),r=V(B(n),2);Y(r,21,()=>i,e=>e.token,(e,n)=>{let r=I(()=>U(n).token in t.overrides);var i=pp(),a=z(i),o=z(a),s=z(o);F(o);var c=V(o,2),l=z(c),u=z(l),d=z(u,!0);F(u);var f=V(u,2),m=z(f),h=V(m,2),g=e=>{var r=fp();W(`click`,r,()=>t.onReset(U(n).token)),K(e,r)};J(h,e=>{U(r)&&e(g)}),F(f),F(l);var _=V(l,2);zi(_),F(c),F(a),F(i),H(()=>{X(i,1,`p-2.5 rounded-xl border transition-all ${U(r)?`bg-indigo-500/10 border-indigo-500/30`:`border-black/8 dark:border-white/8 bg-black/3 dark:bg-white/3`}`),Q(s,`d`,U(n).preview),q(d,U(n).label),Bi(_,t.overrides[U(n).token]??``),Q(_,`placeholder`,U(n).value)}),W(`click`,m,()=>{R(p,U(n).token,!0),x()}),W(`input`,_,e=>{let r=e.target.value.trim();r?t.onSet(U(n).token,r):t.onReset(U(n).token)}),K(e,i)}),F(r),K(e,n)};J(_e,e=>{U(g)&&e(ve)}),F(pe);var ye=V(pe,4),be=z(ye),xe=V(z(be),2),Se=z(xe,!0);F(xe),F(be);var Ce=V(be,2),we=e=>{var n=_p(),r=V(B(n),2),i=z(r),o=V(z(i),2),s=e=>{var t=hp();W(`click`,t,C),K(e,t)},c=I(()=>a.some(e=>e in t.overrides));J(o,e=>{U(c)&&e(s)}),F(i);var l=V(i,2);{let e=I(()=>Math.round(U(u))),n=I(()=>a.some(e=>e in t.overrides));$(l,{label:``,get value(){return U(e)},min:0,max:200,step:5,unit:`ms`,help:`Base unit for --sf-animation-delay-1 through -5`,get overridden(){return U(n)},onChange:e=>S(e),onReset:C})}F(r);var d=V(r,2);Y(d,20,()=>[1,2,3,4,5],e=>e,(e,t)=>{let n=I(()=>Math.round(U(u)*t));var r=gp(),i=z(r),a=z(i);F(i);var o=V(i,2),s=z(o);F(o);var c=V(o,2),l=z(c);F(c),F(r),H(e=>{q(a,`–${t??``}`),Z(s,e),q(l,`${U(n)??``}ms`)},[()=>`width: ${Math.min(U(n)/600*100,100)}%`]),K(e,r)}),F(d),K(e,n)};J(Ce,e=>{U(_)&&e(we)}),F(ye);var Te=V(ye,4),Ee=z(Te),De=V(z(Ee),2),P=z(De,!0);F(De),F(Ee);var Oe=V(Ee,2),ke=e=>{var n=bp(),r=B(n);Y(r,21,()=>o,e=>e.name,(e,n)=>{du(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(r);var i=V(r,2);{let e=I(()=>`--sf-theme-transition-duration`in t.overrides);$(i,{label:`Theme switch speed`,get value(){return U(l)},min:0,max:600,step:10,unit:`ms`,help:`--sf-theme-transition-duration — dark/light color-scheme switch animation speed`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-theme-transition-duration`,`${e}ms`),onReset:()=>t.onReset(`--sf-theme-transition-duration`)})}var a=V(i,2);Y(V(z(a),2),16,()=>[{label:`Entry start`,token:`--sf-scroll-timeline-range-start`,placeholder:`entry 0%`},{label:`Entry end`,token:`--sf-scroll-timeline-range-end`,placeholder:`cover 30%`},{label:`Exit start`,token:`--sf-scroll-timeline-range-exit-start`,placeholder:`cover 70%`},{label:`Exit end`,token:`--sf-scroll-timeline-range-exit-end`,placeholder:`exit 100%`}],e=>e.token,(e,n)=>{var r=yp(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=vp();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.placeholder)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),F(a),K(e,n)};J(Oe,e=>{U(v)&&e(ke)}),F(Te),F(w),H(e=>{Q(E,`title`,U(c)?`Enable motion`:`Disable motion`),X(E,1,`w-9 h-5 rounded-full transition-colors relative cursor-pointer ${U(c)?`bg-indigo-600`:`bg-black/10 dark:bg-white/10`}`),X(D,1,`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${U(c)?`translate-x-4`:`translate-x-0.5`}`),Z(j,e),re!==(re=U(p))&&(M.value=(M.__value=U(p))??``,Ei(M,U(p))),ae!==(ae=U(m))&&(ie.value=(ie.__value=U(m))??``,Ei(ie,U(m))),oe.disabled=U(d),q(se,U(d)?`…`:`▶ Play`),Q(ce,`aria-expanded`,U(h)),q(ue,U(h)?`▲`:`▼`),Q(me,`aria-expanded`,U(g)),q(ge,U(g)?`▲`:`▼`),Q(be,`aria-expanded`,U(_)),q(Se,U(_)?`▲`:`▼`),Q(Ee,`aria-expanded`,U(v)),q(P,U(v)?`▲`:`▼`)},[()=>`transform: translateX(${U(f)}px); transition: transform ${y(U(m),r.find(e=>e.token===U(m))?.base??250)}ms ${b(U(p))}`]),W(`click`,E,()=>{U(c)?t.onReset(`--sf-motion-scale`):t.onSet(`--sf-motion-scale`,`0`)}),W(`change`,M,e=>{R(p,e.target.value,!0)}),W(`change`,ie,e=>{R(m,e.target.value,!0)}),W(`click`,oe,x),W(`click`,ce,()=>{R(h,!U(h))}),W(`click`,me,()=>{R(g,!U(g))}),W(`click`,be,()=>{R(_,!U(_))}),W(`click`,Ee,()=>{R(v,!U(v))}),K(e,w),We()}Br([`click`,`change`,`input`]);var Cp=G(`
`),wp=G(`
`,1),Tp=G(`
`),Ep=G(`
`,1),Dp=G(``),Op=G(`

Gradient overlay for hero images and media content. Used by the .sf-scrim macro.

Color
Direction
Scrim preview
`,1),kp=G(`
`),Ap=G(`
Scrollbar preview
`,1),jp=G(``),Mp=G(`
`),Np=G(`

Controls text legibility over images. Applied via text-shadow: var(--sf-text-shadow-m). + controls, or edit the raw value for full control.

`,1),dd=G(`

--sf-color-scheme — sets the CSS color-scheme property on the root, controlling browser UI (scrollbars, inputs) and default background.

`,1),fd=G(`
`),pd=G(`

Direct color overrides for tokens the framework auto-derives. Use for edge cases.

`,1),md=G(`
Semantic colors

Live preview — every semantic role on its on-color text, shown in light and dark. Resolved from the canvas, updates as you edit.

All tokens tab — override individual color steps (50–950), semantic aliases, or surface tokens directly.

`);function hd(e,t){Ue(t,!0);function n(e,t){return fl.value,vl(e)||t}function r(e,t){fl.value;let n=Cl(e);return n&&n!==`none`?n:t}function i(e,t,n){return fl.value,bl(e,t)||n}let a=[{name:`--sf-gradient-primary`,label:`Primary`,group:`brand`,kind:`angle`,space:`oklch`,angle:135,dir:`right`,stop1:`var(--sf-color-primary)`,stop2:`oklch(from var(--sf-color-primary) calc(l - 0.08) c h)`,formula:`linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) calc(l - 0.08) c h))`},{name:`--sf-gradient-secondary`,label:`Secondary`,group:`brand`,kind:`angle`,space:`oklch`,angle:135,dir:`right`,stop1:`var(--sf-color-secondary)`,stop2:`oklch(from var(--sf-color-secondary) calc(l - 0.08) c h)`,formula:`linear-gradient(in oklch 135deg, var(--sf-color-secondary), oklch(from var(--sf-color-secondary) calc(l - 0.08) c h))`},{name:`--sf-gradient-tertiary`,label:`Tertiary`,group:`brand`,kind:`angle`,space:`oklch`,angle:135,dir:`right`,stop1:`var(--sf-color-tertiary)`,stop2:`oklch(from var(--sf-color-tertiary) calc(l - 0.08) c h)`,formula:`linear-gradient(in oklch 135deg, var(--sf-color-tertiary), oklch(from var(--sf-color-tertiary) calc(l - 0.08) c h))`},{name:`--sf-gradient-brand`,label:`Brand`,group:`brand`,kind:`angle`,space:`oklch`,angle:135,dir:`right`,stop1:`var(--sf-color-primary)`,stop2:`oklch(from var(--sf-color-primary) l c calc(h + 30))`,formula:`linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) l c calc(h + 30)))`},{name:`--sf-gradient-surface`,label:`Surface`,group:`brand`,kind:`angle`,space:`oklab`,angle:180,dir:`bottom`,stop1:`var(--sf-color-surface)`,stop2:`var(--sf-color-bg)`,formula:`linear-gradient(in oklab 180deg, var(--sf-color-surface), var(--sf-color-bg))`},{name:`--sf-gradient-fade--r`,label:`Fade →`,group:`fade`,kind:`dir`,space:`oklch`,angle:90,dir:`right`,stop1:`transparent`,stop2:`var(--sf-color-bg)`,formula:`linear-gradient(in oklch to right, transparent, var(--sf-color-bg))`},{name:`--sf-gradient-fade--l`,label:`Fade ←`,group:`fade`,kind:`dir`,space:`oklch`,angle:270,dir:`left`,stop1:`transparent`,stop2:`var(--sf-color-bg)`,formula:`linear-gradient(in oklch to left, transparent, var(--sf-color-bg))`},{name:`--sf-gradient-fade--t`,label:`Fade ↑`,group:`fade`,kind:`dir`,space:`oklch`,angle:0,dir:`top`,stop1:`transparent`,stop2:`var(--sf-color-bg)`,formula:`linear-gradient(in oklch to top, transparent, var(--sf-color-bg))`},{name:`--sf-gradient-fade--b`,label:`Fade ↓`,group:`fade`,kind:`dir`,space:`oklch`,angle:180,dir:`bottom`,stop1:`transparent`,stop2:`var(--sf-color-bg)`,formula:`linear-gradient(in oklch to bottom, transparent, var(--sf-color-bg))`}],o=[{key:`primary`,label:`Primary`},{key:`secondary`,label:`Secondary`},{key:`tertiary`,label:`Tertiary`},{key:`action`,label:`Action`}],s=[{name:`--sf-color-primary-source-light`,label:`Primary`,side:`light`,default:`oklch(0.47 0.27 264)`,colorKey:`primary`},{name:`--sf-color-primary-source-dark`,label:`Primary`,side:`dark`,default:`oklch(0.715 0.243 264)`,colorKey:`primary`},{name:`--sf-color-secondary-source-light`,label:`Secondary`,side:`light`,default:`oklch(0.22 0.04 264)`,colorKey:`secondary`},{name:`--sf-color-secondary-source-dark`,label:`Secondary`,side:`dark`,default:`oklch(0.84 0.036 264)`,colorKey:`secondary`},{name:`--sf-color-tertiary-source-light`,label:`Tertiary`,side:`light`,default:`oklch(0.42 0.22 295)`,colorKey:`tertiary`},{name:`--sf-color-tertiary-source-dark`,label:`Tertiary`,side:`dark`,default:`oklch(0.74 0.198 295)`,colorKey:`tertiary`},{name:`--sf-color-action-source-light`,label:`Action`,side:`light`,default:`oklch(0.50 0.22 235)`,colorKey:`action`},{name:`--sf-color-action-source-dark`,label:`Action`,side:`dark`,default:`oklch(0.70 0.198 235)`,colorKey:`action`},{name:`--sf-color-neutral-source-light`,label:`Neutral`,side:`light`,default:`oklch(0.52 0.025 260)`,colorKey:`neutral`},{name:`--sf-color-neutral-source-dark`,label:`Neutral`,side:`dark`,default:`oklch(0.69 0.0225 260)`,colorKey:`neutral`},{name:`--sf-color-base-source-light`,label:`Base`,side:`light`,default:`oklch(0.96 0.006 250)`,colorKey:`base`},{name:`--sf-color-base-source-dark`,label:`Base`,side:`dark`,default:`oklch(0.22 0.003 250)`,colorKey:`base`}],c=[{name:`--sf-color-success-source-light`,label:`Success`,side:`light`,default:`oklch(0.50 0.16 145)`,colorKey:`success`},{name:`--sf-color-success-source-dark`,label:`Success`,side:`dark`,default:`oklch(0.70 0.144 145)`,colorKey:`success`},{name:`--sf-color-warning-source-light`,label:`Warning`,side:`light`,default:`oklch(0.75 0.17 80)`,colorKey:`warning`},{name:`--sf-color-warning-source-dark`,label:`Warning`,side:`dark`,default:`oklch(0.65 0.153 80)`,colorKey:`warning`},{name:`--sf-color-info-source-light`,label:`Info`,side:`light`,default:`oklch(0.48 0.18 235)`,colorKey:`info`},{name:`--sf-color-info-source-dark`,label:`Info`,side:`dark`,default:`oklch(0.71 0.162 235)`,colorKey:`info`},{name:`--sf-color-danger-source-light`,label:`Danger`,side:`light`,default:`oklch(0.48 0.22 12)`,colorKey:`danger`},{name:`--sf-color-danger-source-dark`,label:`Danger`,side:`dark`,default:`oklch(0.73 0.198 12)`,colorKey:`danger`}],l=[{name:`--sf-palette-mix-50`,label:`50`,step:`tint`,default:4},{name:`--sf-palette-mix-100`,label:`100`,step:`tint`,default:8},{name:`--sf-palette-mix-200`,label:`200`,step:`tint`,default:20},{name:`--sf-palette-mix-300`,label:`300`,step:`tint`,default:40},{name:`--sf-palette-mix-400`,label:`400`,step:`tint`,default:65},{name:`--sf-palette-mix-600`,label:`600`,step:`shade`,default:82},{name:`--sf-palette-mix-700`,label:`700`,step:`shade`,default:62},{name:`--sf-palette-mix-800`,label:`800`,step:`shade`,default:38},{name:`--sf-palette-mix-900`,label:`900`,step:`shade`,default:18},{name:`--sf-palette-mix-950`,label:`950`,step:`shade`,default:8}],u=[{label:`Softer`,desc:`Low contrast palette`,patch:{"--sf-palette-mix-50":`3%`,"--sf-palette-mix-100":`6%`,"--sf-palette-mix-200":`14%`,"--sf-palette-mix-300":`30%`,"--sf-palette-mix-400":`55%`,"--sf-palette-mix-600":`72%`,"--sf-palette-mix-700":`52%`,"--sf-palette-mix-800":`28%`,"--sf-palette-mix-900":`12%`,"--sf-palette-mix-950":`5%`}},{label:`Default`,desc:`Balanced contrast`,patch:Object.fromEntries(l.map(e=>[e.name,null]))},{label:`Punchy`,desc:`High contrast palette`,patch:{"--sf-palette-mix-50":`6%`,"--sf-palette-mix-100":`12%`,"--sf-palette-mix-200":`28%`,"--sf-palette-mix-300":`52%`,"--sf-palette-mix-400":`78%`,"--sf-palette-mix-600":`90%`,"--sf-palette-mix-700":`72%`,"--sf-palette-mix-800":`50%`,"--sf-palette-mix-900":`26%`,"--sf-palette-mix-950":`12%`}}],d=[{name:`--sf-color-link`,label:`Link`},{name:`--sf-color-link--visited`,label:`Link visited`},{name:`--sf-color-mark-bg`,label:`Mark background`},{name:`--sf-color-mark-text`,label:`Mark text`},{name:`--sf-color-code-bg`,label:`Code background`},{name:`--sf-color-code-text`,label:`Code text`},{name:`--sf-color-overlay`,label:`Overlay`},{name:`--sf-color-black`,label:`Black`},{name:`--sf-color-white`,label:`White`},{name:`--sf-color-dim`,label:`Dim (translucent black)`}],f=[`50`,`100`,`200`,`300`,`400`,`500`,`600`,`700`,`800`,`900`,`950`],p=[`primary`,`secondary`,`tertiary`,`action`,`neutral`],m={50:.97,100:.94,200:.88,300:.78,400:.65,500:.5,600:.37,700:.27,800:.17,900:.11,950:.06},g=[...p,`base`],_=[{label:`Base`,expr:e=>`var(--sf-color-${e})`},{label:`Subtle`,expr:e=>`var(--sf-color-${e}-subtle)`},{label:`Muted`,expr:e=>`var(--sf-color-${e}-muted)`},{label:`Strong`,expr:e=>`var(--sf-color-${e}-strong)`}],v=[...s,...c],y=[{heading:`Brand`,items:[{name:`--sf-color-primary`,label:`Primary`,fg:`--sf-color-text--on-primary`},{name:`--sf-color-secondary`,label:`Secondary`,fg:`--sf-color-text--on-secondary`},{name:`--sf-color-tertiary`,label:`Tertiary`,fg:`--sf-color-text--on-tertiary`},{name:`--sf-color-action`,label:`Action`,fg:`--sf-color-text--on-action`},{name:`--sf-color-neutral`,label:`Neutral`,fg:`--sf-color-text--on-neutral`}]},{heading:`Status`,items:[{name:`--sf-color-success`,label:`Success`,fg:`--sf-color-text--on-success`},{name:`--sf-color-warning`,label:`Warning`,fg:`--sf-color-text--on-warning`},{name:`--sf-color-info`,label:`Info`,fg:`--sf-color-text--on-info`},{name:`--sf-color-danger`,label:`Danger`,fg:`--sf-color-text--on-danger`}]},{heading:`Surfaces & text`,items:[{name:`--sf-color-bg`,label:`Bg`,fg:`--sf-color-text`},{name:`--sf-color-surface`,label:`Surface`,fg:`--sf-color-text`},{name:`--sf-color-raised`,label:`Raised`,fg:`--sf-color-text`},{name:`--sf-color-inset`,label:`Inset`,fg:`--sf-color-text`},{name:`--sf-color-inverse`,label:`Inverse`,fg:`--sf-color-text--on-inverse`}]}],b=(ql.colors??[]).filter(e=>e.name===`--sf-contrast-bias`||e.name===`--sf-contrast-threshold`),x=(ql.colors??[]).filter(e=>e.name===`--sf-focus-ring-width`),S=L(!1),C=L(!1),w=L(!1),T=L(!1),E=L(!1),D=L(!1),O=L(!1),k=L(!1),A=L(`light`),ee=nn({}),j=I(()=>parseFloat(t.overrides[`--sf-lumlocker`]??`0.65`));function te(e){let t=e.match(/^linear-gradient\(\s*in\s+(\S+)\s+(to\s+\w+|\d+deg)\s*,(.+)\)$/i);if(!t)return null;let n=t[1],r=t[2].trim(),i=r.startsWith(`to `),a=i?r.slice(3).trim():`right`,o=i?0:parseInt(r),s=0,c=0,l=[],u=t[3];for(let e=0;ee.name===r)?.default??``;return i?`oklch(from ${i} ${U(j)} c h)`:``}let oe=L(nn(new Set(v.filter(e=>e.side===`light`&&!((v.find(t=>t.colorKey===e.colorKey&&t.side===`dark`)?.name??``)in t.overrides)).map(e=>e.colorKey)))),se=I(()=>{let e={};for(let n of t.tokens)v.some(e=>e.name===n.name)&&(e[n.name]=n);return e});function N(e){return e?t.overrides[e.name]??U(se)[e.name]?.value??e.default:``}function ce(e){return v.find(t=>t.name===e)}let le=I(()=>u.find(e=>Object.entries(e.patch).every(([e,n])=>n===null?!(e in t.overrides):t.overrides[e]===n)));function ue(e){let n=t.overrides[e.name];return n?parseFloat(n):e.default}let de=[];for(let e=0;ee.label===t);if(!a)return e;let o=`color-mix(in oklab, ${e} ${ue(a)}%, ${i?n:r})`;return vl(o)||o}function ye(e,t){fl.value;let n=m[t];if(n===void 0)return e;let r=`oklch(from ${e} ${n} c h)`;return vl(r)||r}function be(e,t,n,r,i){return e===`base`?ye(t,n):ve(t,n,r,i)}function xe(e,n,r){t.onSet(e.name,r)}function Se(e,n,r){let i=!!(n&&n.name in t.overrides);if(U(oe).has(e)&&!i){let i=N(v.find(e=>e.name===r));n&&t.onSet(n.name,pe(i,e)),R(oe,new Set([...U(oe)].filter(t=>t!==e)),!0)}else n&&t.onBulkChange({[n.name]:null}),R(oe,new Set([...U(oe),e]),!0)}let Ce=[{label:`Body text on surface`,fg:`var(--sf-color-text)`,bg:`var(--sf-color-surface)`},{label:`White on primary`,fg:`#ffffff`,bg:`var(--sf-color-primary)`},{label:`Primary on surface`,fg:`var(--sf-color-primary)`,bg:`var(--sf-color-surface)`}];function we(e,t){fl.value;let n=Sl(e),r=Sl(t);return!n||!r?null:Xl(Yl(...n),Yl(...r))}var Te=md(),Ee=z(Te),De=V(z(Ee),4);Y(De,21,()=>y,e=>e.heading,(e,t)=>{var n=Fu(),r=z(n),a=z(r,!0);F(r),Y(V(r,2),16,()=>[`light`,`dark`],e=>e,(e,n)=>{var r=Pu(),a=z(r),o=z(a,!0);F(a);var s=V(a,2);Y(s,21,()=>U(t).items,e=>e.name,(e,t)=>{let r=I(()=>i(`var(${U(t).name})`,n,`transparent`)),a=I(()=>i(`var(${U(t).fg})`,n,`currentColor`));var o=Nu(),s=V(z(o),2),c=z(s,!0);F(s),F(o),H(()=>{Z(o,`background:${U(r)}; color:${U(a)}`),Q(o,`title`,`${U(t).name} (${n}) — ${U(r)}`),q(c,U(t).label)}),K(e,o)}),F(s),F(r),H(()=>q(o,n===`light`?`L`:`D`)),K(e,r)}),F(n),H(()=>q(a,U(t).heading)),K(e,n)}),F(De),F(Ee);var P=V(Ee,4),Oe=z(P),ke=V(z(Oe),2),Ae=z(ke,!0);F(ke),F(Oe);var je=V(Oe,2),Ne=e=>{var r=Uu(),i=V(B(r),2);Y(i,21,()=>de,([e,t])=>e.name,(e,r)=>{var i=I(()=>h(U(r),2));let a=()=>U(i)[0],o=()=>U(i)[1],s=I(()=>!!(o()&&o().name in t.overrides)),c=I(()=>U(oe).has(a().colorKey)&&!U(s));var l=Hu(),u=z(l),d=z(u),p=z(d,!0);F(d);var m=V(d,2),_=e=>{var t=Iu(),n=z(t,!0);F(t),H(()=>{X(t,1,`text-[8px] px-1.5 py-0.5 rounded border transition-all cursor-pointer ${U(c)?`border-indigo-500/40 bg-indigo-500/15 text-indigo-700 dark:text-indigo-300`:`border-black/10 dark:border-white/10 text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(n,U(c)?`Auto dark`:`Manual dark`)}),W(`click`,t,()=>Se(a().colorKey,o(),a().name)),K(e,t)};J(m,e=>{o()&&e(_)}),F(u);var v=V(u,2);{let e=I(()=>`${a().label} (light)`),n=I(()=>N(a())),r=I(()=>a().name in t.overrides);ou(v,{get label(){return U(e)},get tokenName(){return a().name},get value(){return U(n)},get overridden(){return U(r)},onChange:e=>xe(a(),o(),e),onReset:()=>t.onReset(a().name)})}var y=V(v,2),b=e=>{let t=I(()=>N(a())),n=I(()=>U(c)?pe(U(t),a().colorKey):o()?N(o()):U(t)),r=I(me),i=I(he),s=I(ge),l=I(_e);var u=Bu(),d=B(u),p=z(d),m=V(z(p),2);Y(m,20,()=>f,e=>e,(e,n)=>{let i=I(()=>be(a().colorKey,U(t),n,U(r),U(s)));var o=Lu();let c;ju(z(o),()=>`${a().colorKey}-${n}`),F(o),H(()=>{Q(o,`title`,`${a().colorKey}-${n} (light) — ${U(i)}`),c=Z(o,``,c,{background:U(i)})}),K(e,o)}),F(m),F(p);var h=V(p,2),g=V(z(h),2);Y(g,20,()=>f,e=>e,(e,t)=>{let r=I(()=>be(a().colorKey,U(n),t,U(i),U(l)));var o=Ru();let s;ju(z(o),()=>`${a().colorKey}-${t}`),F(o),H(()=>{Q(o,`title`,`${a().colorKey}-${t} (dark) — ${U(r)}`),s=Z(o,``,s,{background:U(r)})}),K(e,o)}),F(g),F(h),F(d);var _=V(d,2),v=e=>{K(e,zu())};J(_,e=>{a().colorKey===`base`&&e(v)}),K(e,u)},x=I(()=>g.includes(a().colorKey));J(y,e=>{U(x)&&e(b)});var S=V(y,2),C=e=>{{let n=I(()=>`${o().label} (dark mode)`),r=I(()=>N(o())),i=I(()=>o().name in t.overrides);ou(e,{get label(){return U(n)},get tokenName(){return o().name},get value(){return U(r)},get overridden(){return U(i)},onChange:e=>t.onSet(o().name,e),onReset:()=>t.onReset(o().name)})}},w=e=>{let t=I(()=>pe(N(a()),a().colorKey));var r=Vu(),i=z(r);let o;var s=V(i);F(r),H(e=>{Q(i,`title`,U(t)),o=Z(i,``,o,e),q(s,` Dark: auto-derived (${U(t)??``})`)},[()=>({background:n(U(t),U(t))})]),K(e,r)};J(S,e=>{o()&&!U(c)?e(C):o()&&U(c)&&e(w,1)}),F(l),H(()=>q(p,a().label)),K(e,l)}),F(i),K(e,r)};J(je,e=>{U(S)&&e(Ne)}),F(P);var Pe=V(P,4),Fe=z(Pe),Ie=V(z(Fe),2),Le=z(Ie,!0);F(Ie),F(Fe);var Re=V(Fe,2),ze=e=>{var r=Gu(),a=V(B(r),2);{let e=I(()=>`--sf-lumlocker`in t.overrides);$(a,{label:`LumLocker lightness (L)`,get value(){return U(j)},min:0,max:1,step:.01,help:`--sf-lumlocker — fixed OKLCH L applied to lockable brand colors under [data-lumlocker]`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-lumlocker`,String(e)),onReset:()=>t.onReset(`--sf-lumlocker`)})}var s=V(a,2);Y(V(z(s),2),17,()=>o,e=>e.key,(e,t)=>{var r=Xr();Y(B(r),16,()=>[`light`,`dark`],e=>e,(e,r)=>{let a=I(()=>i(`var(--sf-color-${U(t).key}-source-${r})`,r,``)),o=I(()=>ae(U(t).key,r));var s=Wu(),c=z(s),l=z(c),u=V(l),d=z(u,!0);F(u),F(c);var f=V(c,2),p=V(f,4);F(s),H(e=>{q(l,`${U(t).label??``} `),q(d,r===`light`?`L`:`D`),Z(f,`background:${U(a)||`var(--sf-color-${U(t).key})`}`),Z(p,e),Q(p,`title`,U(o))},[()=>`background:${n(U(o),U(o))}`]),K(e,s)}),K(e,r)}),F(s);var c=V(s,2),l=z(c,!0);F(c),H(()=>{X(c,1,`w-full py-2 rounded-lg text-[10px] font-bold border transition-all cursor-pointer ${wl.value?`bg-indigo-600/25 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/10 dark:border-white/10 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(l,wl.value?`✓ LumLocker active on canvas — click to disable`:`Preview LumLocker on live canvas`)}),W(`click`,c,()=>{wl.value=!wl.value}),K(e,r)};J(Re,e=>{U(k)&&e(ze)}),F(Pe);var Be=V(Pe,4),Ve=z(Be),He=V(z(Ve),2),Ge=z(He,!0);F(He),F(Ve);var Ke=V(Ve,2),qe=e=>{var r=Xu(),a=V(B(r),2);Y(a,21,()=>fe,([e,t])=>e.name,(e,r)=>{var a=I(()=>h(U(r),2));let o=()=>U(a)[0],s=()=>U(a)[1],c=I(()=>!!(s()&&s().name in t.overrides)),l=I(()=>U(oe).has(o().colorKey)&&!U(c));var u=Yu(),d=z(u),f=z(d),p=z(f,!0);F(f);var m=V(f,2),g=e=>{var t=Iu(),n=z(t,!0);F(t),H(()=>{X(t,1,`text-[8px] px-1.5 py-0.5 rounded border transition-all cursor-pointer ${U(l)?`border-indigo-500/40 bg-indigo-500/15 text-indigo-700 dark:text-indigo-300`:`border-black/10 dark:border-white/10 text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(n,U(l)?`Auto dark`:`Manual dark`)}),W(`click`,t,()=>Se(o().colorKey,s(),o().name)),K(e,t)};J(m,e=>{s()&&e(g)}),F(d);var v=V(d,2);{let e=I(()=>`${o().label} light`),n=I(()=>N(o())),r=I(()=>o().name in t.overrides);ou(v,{get label(){return U(e)},get tokenName(){return o().name},get value(){return U(n)},get overridden(){return U(r)},onChange:e=>t.onSet(o().name,e),onReset:()=>t.onReset(o().name)})}var y=V(v,2),b=e=>{{let n=I(()=>`${s().label} dark`),r=I(()=>N(s())),i=I(()=>s().name in t.overrides);ou(e,{get label(){return U(n)},get tokenName(){return s().name},get value(){return U(r)},get overridden(){return U(i)},onChange:e=>t.onSet(s().name,e),onReset:()=>t.onReset(s().name)})}},x=e=>{let t=I(()=>pe(N(o()),o().colorKey));var r=Vu(),i=z(r);let a;var s=V(i);F(r),H(e=>{Q(i,`title`,U(t)),a=Z(i,``,a,e),q(s,` Dark: auto-derived (${U(t)??``})`)},[()=>({background:n(U(t),U(t))})]),K(e,r)};J(y,e=>{s()&&!U(l)?e(b):s()&&U(l)&&e(x,1)});var S=V(y,2),C=z(S),w=V(z(C),2);Y(w,21,()=>_,e=>e.label,(e,t)=>{var n=Ku(),r=z(n,!0);F(n),H(()=>q(r,U(t).label)),K(e,n)}),F(w),F(C),Y(V(C,2),16,()=>[[`L`,`light`],[`D`,`dark`]],([e,t])=>e,(e,t)=>{var n=I(()=>h(t,2));let r=()=>U(n)[0],a=()=>U(n)[1];var s=Ju(),c=z(s),l=z(c,!0);F(c);var u=V(c,2);Y(u,21,()=>_,e=>e.label,(e,t)=>{let n=I(()=>i(U(t).expr(o().colorKey),a(),``));var r=qu();let s;var c=z(r);{let e=I(()=>`${o().colorKey}-${U(t).label.toLowerCase()}`);ju(c,()=>U(e))}F(r),H(e=>{Q(r,`title`,e),s=Z(r,``,s,{background:U(n)})},[()=>`${o().colorKey}-${U(t).label.toLowerCase()} (${a()}) — ${U(n)}`]),K(e,r)}),F(u),F(s),H(()=>q(l,r())),K(e,s)}),F(S),Me(2),F(u),H(()=>q(p,o().label)),K(e,u)}),F(a),K(e,r)};J(Ke,e=>{U(T)&&e(qe)}),F(Be);var Je=V(Be,4),Ye=z(Je),Xe=V(z(Ye),2),Ze=z(Xe,!0);F(Xe),F(Ye);var Qe=V(Ye,2),$e=e=>{var r=$u(),i=V(B(r),2);Y(i,17,()=>b,e=>e.name,(e,n)=>{du(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})});var a=V(i,2),o=z(a);Y(o,17,()=>Ce,e=>e.label,(e,t)=>{let r=I(()=>we(U(t).fg,U(t).bg));var i=Xr(),a=B(i),o=e=>{var i=Zu(),a=z(i),o=V(a,2),s=z(o,!0);F(o);var c=V(o,2),l=z(c);F(c);var u=V(c,2),d=z(u,!0);F(u),F(i),H((e,n)=>{Z(a,e),q(s,U(t).label),q(l,`${n??``}:1`),X(u,1,`text-[9px] font-bold px-1.5 py-0.5 rounded ${U(r)>=4.5?`bg-emerald-500/20 text-emerald-700 dark:text-emerald-300`:`bg-amber-500/20 text-amber-700 dark:text-amber-300`}`),q(d,U(r)>=4.5?`AA`:U(r)>=3?`AA-L`:`✗`)},[()=>`background:${n(U(t).bg,U(t).bg)}; color:${n(U(t).fg,U(t).fg)}`,()=>U(r).toFixed(2)]),K(e,i)};J(a,e=>{U(r)!==null&&e(o)}),K(e,i)});var s=V(o,2),c=e=>{var n=Qu();W(`click`,n,()=>t.onSelectDomain?.(`wcag`)),K(e,n)};J(s,e=>{t.onSelectDomain&&e(c)}),F(a),Y(V(a,2),17,()=>x,e=>e.name,(e,n)=>{du(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),K(e,r)};J(Qe,e=>{U(C)&&e($e)}),F(Je);var et=V(Je,4),tt=z(et),nt=V(z(tt),2),rt=z(nt,!0);F(nt),F(tt);var it=V(tt,2),at=e=>{let n=I(()=>t.overrides[`--sf-color-primary-source-light`]??s.find(e=>e.name===`--sf-color-primary-source-light`)?.default??`oklch(0.47 0.27 264)`),r=I(()=>t.overrides[`--sf-color-primary-source-dark`]),i=I(()=>U(r)??(!U(oe).has(`primary`)||U(r)?s.find(e=>e.name===`--sf-color-primary-source-dark`)?.default??pe(U(n),`primary`):pe(U(n),`primary`))),a=I(()=>U(A)===`light`?U(n):U(i)),o=I(()=>U(A)===`light`?me():he()),c=I(()=>U(A)===`light`?ge():_e()),d=I(()=>U(A)===`light`?me():he()),m=I(()=>U(A)===`light`?ge():_e());var h=id(),g=V(B(h),2);Y(g,21,()=>u,e=>e.label,(e,n)=>{var r=ed(),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o,!0);F(o),F(r),H(()=>{X(r,1,`flex flex-col items-center gap-0.5 p-2.5 rounded-xl border transition-all cursor-pointer ${U(le)?.label===U(n).label?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(a,U(n).label),q(s,U(n).desc)}),W(`click`,r,()=>t.onBulkChange(U(n).patch)),K(e,r)}),F(g);var _=V(g,2),v=V(z(_),2);Y(v,21,()=>l.filter(e=>e.step===`tint`),e=>e.name,(e,n)=>{{let r=I(()=>ue(U(n))),i=I(()=>U(n).name in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:0,max:100,step:1,unit:`%`,get overridden(){return U(i)},onChange:e=>t.onSet(U(n).name,`${e}%`),onReset:()=>t.onReset(U(n).name)})}}),F(v),F(_);var y=V(_,2),b=V(z(y),2);Y(b,21,()=>l.filter(e=>e.step===`shade`),e=>e.name,(e,n)=>{{let r=I(()=>ue(U(n))),i=I(()=>U(n).name in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:0,max:100,step:1,unit:`%`,get overridden(){return U(i)},onChange:e=>t.onSet(U(n).name,`${e}%`),onReset:()=>t.onReset(U(n).name)})}}),F(b),F(y);var x=V(y,2),S=z(x),C=V(z(S),2);Y(C,20,()=>[`light`,`dark`],e=>e,(e,t)=>{var n=Iu(),r=z(n,!0);F(n),H(()=>{X(n,1,`px-1.5 py-0.5 rounded text-[8px] font-bold cursor-pointer transition-all ${U(A)===t?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(r,t===`light`?`Light`:`Dark`)}),W(`click`,n,()=>{R(A,t,!0)}),K(e,n)}),F(C),F(S);var w=V(S,2);Y(w,21,()=>l,e=>e.name,(e,t)=>{let n=I(()=>ue(U(t))),r=I(()=>U(t).label),i=I(()=>ve(U(a),U(r),U(o),U(c)));var s=td(),l=z(s),u=z(l,!0);F(l);var d=V(l,2);ju(z(d),()=>`primary-${U(r)}`),F(d);var f=V(d,2),p=z(f,!0);F(f),F(s),H((e,t,n)=>{q(u,e),Z(d,t),Q(d,`title`,n),q(p,U(r))},[()=>Math.round(U(n)),()=>`background:${U(i)}; height: ${Math.max(U(n)/100*56,6)}px`,()=>`primary-${U(r)} (${U(A)}) · mix ${Math.round(U(n))}%`]),K(e,s)}),F(w),Me(2),F(x);var T=V(x,2),E=z(T),D=V(z(E),2);Y(D,20,()=>[`light`,`dark`],e=>e,(e,t)=>{var n=Iu(),r=z(n,!0);F(n),H(()=>{X(n,1,`px-1.5 py-0.5 rounded text-[8px] font-bold cursor-pointer transition-all ${U(A)===t?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(r,t===`light`?`Light`:`Dark`)}),W(`click`,n,()=>{R(A,t,!0)}),K(e,n)}),F(D),F(E),Y(V(E,2),16,()=>p,e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-color-${n}-source-light`]??s.find(e=>e.name===`--sf-color-${n}-source-light`)?.default??`oklch(0.5 0.15 264)`),i=I(()=>`--sf-color-${n}-source-dark`),a=I(()=>t.overrides[U(i)]??(U(oe).has(n)&&!t.overrides[U(i)]?pe(U(r),n):s.find(e=>e.name===U(i))?.default??pe(U(r),n))),o=I(()=>U(A)===`light`?U(r):U(a));var c=rd(),l=z(c),u=z(l,!0);F(l);var p=V(l,2);Y(p,20,()=>f,e=>e,(e,t)=>{let r=I(()=>ve(U(o),t,U(d),U(m)));var i=nd();ju(z(i),()=>`${n}-${t}`),F(i),H(()=>{Z(i,`background:${U(r)}`),Q(i,`title`,`${n}-${t} (${U(A)})`)}),K(e,i)}),F(p),F(c),H(()=>q(u,n)),K(e,c)}),F(T),K(e,h)};J(it,e=>{U(w)&&e(at)}),F(et);var ot=V(et,4),st=z(ot),ct=V(z(st),2),lt=z(ct,!0);F(ct),F(st);var ut=V(st,2),dt=e=>{var n=ud();Y(V(B(n),2),16,()=>[`brand`,`fade`],e=>e,(e,n)=>{var i=ld(),o=B(i),s=z(o,!0);F(o);var c=V(o,2);Y(c,21,()=>a.filter(e=>e.group===n),e=>e.name,(e,n)=>{let i=I(()=>`var(${U(n).name})`),a=I(()=>M(U(n)));var o=cd(),s=z(o),c=V(s,2),l=z(c),u=z(l),d=z(u,!0);F(u);var f=V(u,2),p=e=>{var r=ad();W(`click`,r,()=>{delete ee[U(n).name],t.onReset(U(n).name)}),K(e,r)};J(f,e=>{U(n).name in t.overrides&&e(p)}),F(l);var m=V(l,2),h=e=>{var t=od();Y(V(z(t),2),16,()=>[`top`,`right`,`bottom`,`left`],e=>e,(e,t)=>{var r=Iu(),i=z(r,!0);F(r),H(()=>{X(r,1,`flex-1 py-0.5 rounded text-[9px] border transition-all cursor-pointer capitalize ${U(a).dir===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(i,t)}),W(`click`,r,()=>ie(U(n),`dir`,t)),K(e,r)}),F(t),K(e,t)},g=e=>{var t=sd(),r=V(z(t),2);zi(r);var i=V(r,2),o=z(i);F(i),F(t),H(()=>{Bi(r,U(a).angle),q(o,`${U(a).angle??``}°`)}),W(`input`,r,e=>ie(U(n),`angle`,parseInt(e.target.value))),K(e,t)};J(m,e=>{U(n).kind===`dir`&&U(n).group!==`fade`?e(h):U(n).kind!==`dir`&&e(g,1)});var _=V(m,2),v=V(z(_),2);zi(v);var y=V(v,2);zi(y),F(_);var b=V(_,2),x=V(z(b));F(b);var S=V(b,2);zi(S),F(c),F(o),H(e=>{Z(s,e),q(d,U(n).label),Bi(v,U(a).stop1),Bi(y,U(a).stop2),q(x,` ${U(n).formula??``}`),Bi(S,t.overrides[U(n).name]??``)},[()=>`background:${r(U(i),U(i))}`]),W(`change`,v,e=>ie(U(n),`stop1`,e.target.value.trim())),W(`change`,y,e=>ie(U(n),`stop2`,e.target.value.trim())),W(`change`,S,e=>{let r=e.target.value.trim();delete ee[U(n).name],r?t.onSet(U(n).name,r):t.onReset(U(n).name)}),K(e,o)}),F(c),H(()=>q(s,n===`brand`?`Brand & surface`:`Edge fades`)),K(e,i)}),K(e,n)};J(ut,e=>{U(O)&&e(dt)}),F(ot);var ft=V(ot,4),pt=z(ft),mt=V(z(pt),2),ht=z(mt,!0);F(mt),F(pt);var gt=V(pt,2),_t=e=>{var n=dd(),r=V(B(n),2);Y(r,20,()=>[[`light dark`,`light dark (default)`],[`light`,`Light only`],[`dark`,`Dark only`]],([e,t])=>e,(e,n)=>{var r=I(()=>h(n,2));let i=()=>U(r)[0],a=()=>U(r)[1],o=I(()=>t.overrides[`--sf-color-scheme`]??`light dark`);var s=Iu(),c=z(s,!0);F(s),H(()=>{X(s,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${U(o)===i()?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(c,a())}),W(`click`,s,()=>i()===`light dark`?t.onReset(`--sf-color-scheme`):t.onSet(`--sf-color-scheme`,i())),K(e,s)}),F(r),K(e,n)};J(gt,e=>{U(D)&&e(_t)}),F(ft);var vt=V(ft,4),yt=z(vt),bt=V(z(yt),2),xt=z(bt,!0);F(bt),F(yt);var St=V(yt,2),Ct=e=>{var r=pd(),i=V(B(r),2);Y(i,21,()=>d,e=>e.name,(e,r)=>{let i=I(()=>n(`var(${U(r).name})`,``));var a=fd(),o=z(a),s=z(o,!0);F(o);var c=V(o,2);{let e=I(()=>t.overrides[U(r).name]??``),n=I(()=>U(i)?`auto-derived · ${U(i)}`:`auto-derived`),a=I(()=>U(r).name in t.overrides);Au(c,{get token(){return U(r).name},get value(){return U(e)},get placeholder(){return U(n)},get isOverridden(){return U(a)},onSet:e=>t.onSet(U(r).name,e),onReset:()=>t.onReset(U(r).name)})}F(a),H(()=>q(s,U(r).label)),K(e,a)}),F(i),K(e,r)};J(St,e=>{U(E)&&e(Ct)}),F(vt),Me(2),F(Te),H(()=>{Q(Oe,`aria-expanded`,U(S)),q(Ae,U(S)?`▲`:`▼`),Q(Fe,`aria-expanded`,U(k)),q(Le,U(k)?`▲`:`▼`),Q(Ve,`aria-expanded`,U(T)),q(Ge,U(T)?`▲`:`▼`),Q(Ye,`aria-expanded`,U(C)),q(Ze,U(C)?`▲`:`▼`),Q(tt,`aria-expanded`,U(w)),q(rt,U(w)?`▲`:`▼`),Q(st,`aria-expanded`,U(O)),q(lt,U(O)?`▲`:`▼`),Q(pt,`aria-expanded`,U(D)),q(ht,U(D)?`▲`:`▼`),Q(yt,`aria-expanded`,U(E)),q(xt,U(E)?`▲`:`▼`)}),W(`click`,Oe,()=>{R(S,!U(S))}),W(`click`,Fe,()=>{R(k,!U(k))}),W(`click`,Ve,()=>{R(T,!U(T))}),W(`click`,Ye,()=>{R(C,!U(C))}),W(`click`,tt,()=>{R(w,!U(w))}),W(`click`,st,()=>{R(O,!U(O))}),W(`click`,pt,()=>{R(D,!U(D))}),W(`click`,yt,()=>{R(E,!U(E))}),K(e,Te),We()}Br([`click`,`input`,`change`]);var gd=G(`
Aa Aa
`),_d=G(`
min
max
`),vd=G(``),yd=G(``),bd=G(`
`),xd=G(`
Modular scale ratio
`),Sd=G(`
`),Cd=G(`
clamp( … )
`);function wd(e,t){Ue(t,!0);let n=I(()=>qo.value===`dark`?`#16161e`:`#ffffff`),r=ra(t,`unit`,3,`rem`),i=ra(t,`minLabel`,3,`Min`),a=ra(t,`maxLabel`,3,`Max`),o=ra(t,`overridden`,3,!1),s=ra(t,`ratioMin_bound`,3,1.05),c=ra(t,`ratioMax_bound`,3,1.8),l=ra(t,`previewKind`,3,`none`);function u(e){return Math.min(t.max,Math.max(t.min,e))}let d=I(()=>(t.minValue-t.min)/(t.max-t.min)*100),f=I(()=>(t.maxValue-t.min)/(t.max-t.min)*100);function p(e){return Math.min(c(),Math.max(s(),e))}let m=I(()=>t.ratioPresets?.find(e=>t.ratioMin!==void 0&&Math.abs(e.value-t.ratioMin)<.0015)?.value),h=I(()=>t.ratioPresets?.find(e=>t.ratioMax!==void 0&&Math.abs(e.value-t.ratioMax)<.0015)?.value);var g=Cd(),_=z(g),v=z(_),y=z(v,!0);F(v);var b=V(v,2),x=V(z(b)),S=z(x);F(x);var C=V(x,2),w=z(C);F(C),Me(),F(b),F(_);var T=V(_,2),E=V(z(T),2),D=V(E,2);zi(D);var O=V(D,2);zi(O);var k=V(O,2),A=V(k,2);F(T);var ee=V(T,2),j=z(ee),te=z(j),ne=z(te,!0);F(te);var M=V(te,2);zi(M),F(j);var re=V(j,2),ie=z(re),ae=z(ie,!0);F(ie);var oe=V(ie,2);zi(oe),F(re),F(ee);var se=V(ee,2),N=e=>{var n=gd(),r=z(n),o=V(z(r)),s=z(o,!0);F(o),F(r);var c=V(r,2),l=V(z(c)),u=z(l,!0);F(l),F(c),F(n),H((e,t,n,i)=>{Z(r,e),q(s,t),Z(c,n),q(u,i)},[()=>`font-size:${Math.min(t.minValue,2)}rem`,()=>i().toLowerCase(),()=>`font-size:${Math.min(t.maxValue,2.6)}rem`,()=>a().toLowerCase()]),K(e,n)},ce=e=>{var n=_d(),r=z(n),i=V(r,4);Me(2),F(n),H((e,t)=>{Z(r,e),Z(i,t)},[()=>`width:${Math.min(t.minValue*28,120)}px`,()=>`width:${Math.min(t.maxValue*28,200)}px`]),K(e,n)};J(se,e=>{l()===`type`?e(N):l()===`space`&&e(ce,1)});var le=V(se,2),ue=e=>{var r=xd(),o=V(z(r),2);Y(o,21,()=>[{side:i(),value:t.ratioMin,active:U(m),onChange:t.onRatioMinChange},{side:a(),value:t.ratioMax,active:U(h),onChange:t.onRatioMaxChange}],e=>e.side,(e,r)=>{var i=bd(),a=z(i),o=z(a,!0);F(a);var l=V(a,2),u=z(l),d=e=>{var t=vd();t.value=t.__value=``,H(()=>Z(t,`background:${U(n)};`)),K(e,t)};J(u,e=>{U(r).active===void 0&&e(d)}),Y(V(u),17,()=>t.ratioPresets,e=>e.value,(e,t)=>{var r=yd(),i=z(r,!0);F(r);var a={};H(e=>{Z(r,`background:${U(n)};`),q(i,U(t).label),a!==(a=e)&&(r.value=(r.__value=e)??``)},[()=>String(U(t).value)]),K(e,r)}),F(l);var f;Di(l);var m=V(l,2);zi(m),Q(m,`step`,.001),F(i),H(e=>{q(o,U(r).side),Q(l,`aria-label`,`${U(r).side} modular scale ratio preset`),f!==(f=e)&&(l.value=(l.__value=e)??``,Ei(l,e)),Q(m,`aria-label`,`${U(r).side} modular scale custom ratio`),Q(m,`min`,s()),Q(m,`max`,c()),Bi(m,U(r).value)},[()=>U(r).active===void 0?``:String(U(r).active)]),W(`change`,l,e=>{let t=parseFloat(e.target.value);Number.isFinite(t)&&U(r).onChange?.(p(t))}),W(`change`,m,e=>{let t=parseFloat(e.target.value);Number.isFinite(t)&&U(r).onChange?.(p(t))}),K(e,i)}),F(o),F(r),K(e,r)};J(le,e=>{t.ratioPresets&&e(ue)});var de=V(le,2),fe=e=>{var n=Sd(),r=z(n);F(n),W(`click`,r,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(de,e=>{o()&&t.onReset&&e(fe)}),F(g),H(e=>{X(g,1,`rounded-xl border p-3 ${o()?`bg-indigo-500/8 border-indigo-500/25`:`bg-black/4 dark:bg-white/4 border-black/8 dark:border-white/8`}`,`svelte-iy59wr`),q(y,t.title),q(S,`${t.minValue??``}${r()??``}`),q(w,`${t.maxValue??``}${r()??``}`),Z(E,e),Q(D,`min`,t.min),Q(D,`max`,t.max),Q(D,`step`,t.step),Bi(D,t.minValue),Q(D,`aria-label`,`${t.title} min`),Q(O,`min`,t.min),Q(O,`max`,t.max),Q(O,`step`,t.step),Bi(O,t.maxValue),Q(O,`aria-label`,`${t.title} max`),Z(k,`left: calc(${U(d)}% - 6px)`),Z(A,`left: calc(${U(f)}% - 6px)`),q(ne,i()),Q(M,`min`,t.min),Q(M,`max`,t.max),Q(M,`step`,t.step),Bi(M,t.minValue),q(ae,a()),Q(oe,`min`,t.min),Q(oe,`max`,t.max),Q(oe,`step`,t.step),Bi(oe,t.maxValue)},[()=>`left:${Math.min(U(d),U(f))}%; right:${100-Math.max(U(d),U(f))}%`]),W(`input`,D,e=>t.onMinChange(Math.min(u(parseFloat(e.target.value)),t.maxValue))),W(`input`,O,e=>t.onMaxChange(Math.max(u(parseFloat(e.target.value)),t.minValue))),W(`change`,M,e=>t.onMinChange(u(parseFloat(e.target.value)||t.min))),W(`change`,oe,e=>t.onMaxChange(u(parseFloat(e.target.value)||t.max))),K(e,g),We()}Br([`input`,`change`,`click`]);var Td=G(``),Ed=G(``),Dd=G(`
`),Od=G(`
Google Font
`,1),kd=G(``),Ad=G(``),jd=G(``),Md=G(``),Nd=G(`
Tracking
`),Pd=G(`
Max width
`),Fd=G(``),Id=G(`
The quick brown fox
Size
Line height
Weight
`,1),Ld=G(``),Rd=G(`
`),zd=G(``),Bd=G(`
`),Vd=G(`
Emphasis style
External marker
External label
`,1),Hd=G(``),Ud=G(`
`),Wd=G(`

Named weight tokens. Override if your font uses non-standard axis values.

`,1),Gd=G(`
`),Kd=G(`
`,1),qd=G(`
`),Jd=G(`
`),Yd=G(`

Utopia-style fluid scale. Each endpoint has three values — viewport width, + base size, and modular ratio. Sizes interpolate fluidly between mobile and desktop.

Line height scale
Letter-spacing scale

Overriding these propagates to heading sizes that reference them.

`,1),Xd=G(`
Aa
`),Zd=G(`
`),Qd=G(``),$d=G(`
`),ef=G(`

Per-text-size max-width caps on .sf-text-* elements. Set to none to remove the constraint; use ch units for character-based measures.

`,1),tf=G(`

Advanced OpenType and variable-font axes. Leave as normal unless your font supports these features.

Numeric figures
Optical sizing
Font features
Variation
`,1),nf=G(`
`);function rf(e,t){Ue(t,!0);let n=I(()=>qo.value===`dark`?`#16161e`:`#ffffff`),r=[{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:`Golden — 1.618`,value:1.618}],i=[{label:`System sans-serif`,value:``},{label:`Geometric (Avenir, Montserrat…)`,value:`var(--sf-font-geometric)`},{label:`Humanist (Seravek, Gill Sans…)`,value:`var(--sf-font-humanist)`},{label:`Slab serif (Rockwell, Roboto Slab…)`,value:`var(--sf-font-slab)`},{label:`Inter`,value:`Inter, system-ui, sans-serif`},{label:`Georgia (serif)`,value:`Georgia, 'Times New Roman', serif`},{label:`Merriweather (serif)`,value:`'Merriweather', Georgia, serif`},{label:`JetBrains Mono`,value:`'JetBrains Mono', 'Fira Code', monospace`}],a=[{label:`Same as body`,value:``},{label:`Geometric (Avenir, Montserrat…)`,value:`var(--sf-font-geometric)`},{label:`Humanist (Seravek, Gill Sans…)`,value:`var(--sf-font-humanist)`},{label:`Slab serif (Rockwell, Roboto Slab…)`,value:`var(--sf-font-slab)`},{label:`Inter`,value:`Inter, system-ui, sans-serif`},{label:`Georgia (serif)`,value:`Georgia, 'Times New Roman', serif`},{label:`Impact / condensed`,value:`Impact, 'Arial Narrow', sans-serif`}],o=[{label:`System mono`,value:`ui-monospace, monospace`},{label:`JetBrains Mono`,value:`'JetBrains Mono', 'Fira Code', monospace`},{label:`Source Code Pro`,value:`'Source Code Pro', 'Courier New', monospace`}],s=`Inter.Roboto.Open Sans.Lato.Montserrat.Poppins.Source Sans 3.Raleway.Nunito.Work Sans.Manrope.DM Sans.Outfit.Plus Jakarta Sans.Geist.Space Grotesk.Figtree.Merriweather.Playfair Display.Lora.Source Serif 4.Roboto Slab.IBM Plex Sans.IBM Plex Mono.JetBrains Mono.Fira Code.Space Mono`.split(`.`),c=[{label:`balance`,value:`balance`},{label:`pretty`,value:`pretty`},{label:`normal`,value:`normal`}],l=[`100`,`200`,`300`,`400`,`500`,`600`,`700`,`800`,`900`],u={"--sf-font-weight-body":`400`,"--sf-font-weight-heading":`600`,"--sf-font-weight-display":`700`,"--sf-font-weight-interactive":`600`},d=[{label:`2xs`,factor:.64},{label:`xs`,factor:.75},{label:`s`,factor:.875},{label:`m`,factor:1},{label:`l`,factor:1.125},{label:`xl`,factor:1.25},{label:`2xl`,factor:1.5},{label:`3xl`,factor:1.875},{label:`4xl`,factor:2.25}],f=[{label:`Tight`,token:`--sf-tracking-tight`,default:-.025},{label:`Normal`,token:`--sf-tracking-normal`,default:0},{label:`Wide`,token:`--sf-tracking-wide`,default:.025},{label:`Wider`,token:`--sf-tracking-wider`,default:.05},{label:`Widest`,token:`--sf-tracking-widest`,default:.1}],p=[{label:`Tight`,token:`--sf-leading-tight`,default:1.1},{label:`Snug`,token:`--sf-leading-snug`,default:1.3},{label:`Normal`,token:`--sf-leading-normal`,default:1.5},{label:`Relaxed`,token:`--sf-leading-relaxed`,default:1.625}],m=[{label:`2xs`,value:`var(--sf-text-2xs)`,approx:.64},{label:`xs`,value:`var(--sf-text-xs)`,approx:.75},{label:`s`,value:`var(--sf-text-s)`,approx:.875},{label:`m`,value:`var(--sf-text-m)`,approx:1},{label:`l`,value:`var(--sf-text-l)`,approx:1.125},{label:`xl`,value:`var(--sf-text-xl)`,approx:1.25},{label:`2xl`,value:`var(--sf-text-2xl)`,approx:1.5},{label:`3xl`,value:`var(--sf-text-3xl)`,approx:1.875},{label:`4xl`,value:`var(--sf-text-4xl)`,approx:2.25},{label:`display-s`,value:`var(--sf-text-display-s)`,approx:2.6},{label:`display-m`,value:`var(--sf-text-display-m)`,approx:3.2},{label:`display-l`,value:`var(--sf-text-display-l)`,approx:3.8}],g=p.map(e=>({label:e.label,value:`var(${e.token})`,num:e.default})),_=f.map(e=>({label:e.label,value:`var(${e.token})`,em:e.default})),v=[{id:`body`,label:`Body`,size:`--sf-body-font-size`,lh:`--sf-body-line-height`,wt:`--sf-body-font-weight`,ls:null,dSize:`var(--sf-text-m)`,dLh:`var(--sf-leading-normal)`,dWt:`400`,dLs:``},{id:`h1`,label:`H1`,size:`--sf-h1-size`,lh:`--sf-h1-line-height`,wt:`--sf-h1-font-weight`,ls:`--sf-h1-letter-spacing`,dSize:`var(--sf-text-4xl)`,dLh:`var(--sf-leading-tight)`,dWt:`600`,dLs:`var(--sf-tracking-tight)`},{id:`h2`,label:`H2`,size:`--sf-h2-size`,lh:`--sf-h2-line-height`,wt:`--sf-h2-font-weight`,ls:`--sf-h2-letter-spacing`,dSize:`var(--sf-text-3xl)`,dLh:`var(--sf-leading-tight)`,dWt:`600`,dLs:`var(--sf-tracking-tight)`},{id:`h3`,label:`H3`,size:`--sf-h3-size`,lh:`--sf-h3-line-height`,wt:`--sf-h3-font-weight`,ls:`--sf-h3-letter-spacing`,dSize:`var(--sf-text-2xl)`,dLh:`var(--sf-leading-snug)`,dWt:`600`,dLs:`var(--sf-tracking-normal)`},{id:`h4`,label:`H4`,size:`--sf-h4-size`,lh:`--sf-h4-line-height`,wt:`--sf-h4-font-weight`,ls:`--sf-h4-letter-spacing`,dSize:`var(--sf-text-xl)`,dLh:`var(--sf-leading-snug)`,dWt:`600`,dLs:`var(--sf-tracking-normal)`},{id:`h5`,label:`H5`,size:`--sf-h5-size`,lh:`--sf-h5-line-height`,wt:`--sf-h5-font-weight`,ls:`--sf-h5-letter-spacing`,dSize:`var(--sf-text-l)`,dLh:`var(--sf-leading-normal)`,dWt:`600`,dLs:`var(--sf-tracking-normal)`},{id:`h6`,label:`H6`,size:`--sf-h6-size`,lh:`--sf-h6-line-height`,wt:`--sf-h6-font-weight`,ls:`--sf-h6-letter-spacing`,dSize:`var(--sf-text-m)`,dLh:`var(--sf-leading-normal)`,dWt:`600`,dLs:`var(--sf-tracking-wide)`}],y=L(`h1`),b=I(()=>v.find(e=>e.id===U(y))),x=ql.typography??[];function S(e,n){let r=parseFloat(t.overrides[e]??``);return isNaN(r)?n:r}let C=I(()=>S(`--sf-text-ratio-min`,1.25)),w=I(()=>S(`--sf-text-ratio-max`,1.333)),T=I(()=>S(`--sf-text-base-min`,1)),E=I(()=>S(`--sf-text-base-max`,1.25)),D=I(()=>S(`--sf-text-display-base-min`,2.4)),O=I(()=>S(`--sf-text-display-base-max`,3)),k=I(()=>S(`--sf-leading-taper`,0)),A=I(()=>S(`--sf-text-scale`,1)),ee=I(()=>S(`--sf-fluid-min-vw`,22.5)),j=I(()=>S(`--sf-fluid-max-vw`,90)),te=L(!1),ne=L(!1),M=L(!1),re=L(!1),ie=L(!1),ae=L(!1),oe=L(!1),se=L(!1),N=L(!1),ce=L(!1),le=I(()=>t.overrides[`--sf-font-body`]??``),ue=I(()=>t.overrides[`--sf-font-heading`]??``),de=I(()=>t.overrides[`--sf-font-mono`]??`ui-monospace, monospace`),fe=L(``),pe=L(`body`);function me(e){let n=t.overrides[e.token];return n?parseFloat(n.replace(`em`,``)):e.default}function he(e){return S(e.token,e.default)}function ge(e){if(!e.trim())return;let t=`gf-${e.replace(/\s+/g,`-`)}`;if(!document.getElementById(t)){let n=document.createElement(`link`);n.id=t,n.rel=`stylesheet`,n.href=`https://fonts.googleapis.com/css2?family=${encodeURIComponent(e)}:wght@100;200;300;400;500;600;700;800;900&display=swap`,document.head.appendChild(n)}}function _e(e,n){if(!e.trim())return;ge(e);let r=n===`body`?`--sf-font-body`:`--sf-font-heading`;t.onSet(r,`'${e}', sans-serif`)}function ve(e,n){return e?t.overrides[e]??n:n}function ye(e,n,r){e&&(n===r?t.onReset(e):t.onSet(e,n))}let be=I(()=>{let e=ve(U(b).size,U(b).dSize),t=m.find(t=>t.value===e),n=(U(T)+U(E))/2;return Math.min((t?.approx??1)*n*U(A),2.4)}),xe=I(()=>{let e=ve(U(b).wt,U(b).dWt),t=parseInt(e);return isNaN(t)?600:t}),Se=I(()=>{if(!U(b).ls)return 0;let e=ve(U(b).ls,U(b).dLs),t=_.find(t=>t.value===e);if(t)return t.em;let n=parseFloat(e.replace(`em`,``));return isNaN(n)?0:n}),Ce=I(()=>{let e=ve(U(b).lh,U(b).dLh),t=g.find(t=>t.value===e);if(t)return t.num;let n=parseFloat(e);return isNaN(n)?1.3:n});var we=nf(),Te=z(we),Ee=z(Te),De=V(z(Ee),2),P=z(De,!0);F(De),F(Ee);var Oe=V(Ee,2),ke=e=>{var r=Od(),c=B(r);Y(c,17,()=>[{label:`Body`,token:`--sf-font-body`,current:U(le),opts:i},{label:`Heading`,token:`--sf-font-heading`,current:U(ue),opts:a},{label:`Mono`,token:`--sf-font-mono`,current:U(de),opts:o}],e=>e.token,(e,r)=>{var i=Dd(),a=z(i),o=z(a,!0);F(a);var s=V(a,2),c=z(s);Y(c,17,()=>U(r).opts,e=>e.label,(e,t)=>{var r=Td(),i=z(r,!0);F(r);var a={};H(()=>{Z(r,`font-family:inherit;background:${U(n)};`),q(i,U(t).label),a!==(a=U(t).value)&&(r.value=(r.__value=U(t).value)??``)}),K(e,r)});var l=V(c),u=e=>{var t=Td(),i=z(t);F(t);var a={};H(e=>{Z(t,`background:${U(n)};`),q(i,`Custom: ${e??``}`),a!==(a=U(r).current)&&(t.value=(t.__value=U(r).current)??``)},[()=>U(r).current.split(`,`)[0].replace(/['"]/g,``)]),K(e,t)},d=I(()=>U(r).current&&!U(r).opts.some(e=>e.value===U(r).current));J(l,e=>{U(d)&&e(u)}),F(s);var f;Di(s);var p=V(s,2),m=e=>{var n=Ed();W(`click`,n,()=>t.onReset(U(r).token)),K(e,n)};J(p,e=>{U(r).token in t.overrides&&e(m)}),F(i),H(()=>{q(o,U(r).label),Z(s,`font-family: ${U(r).current||`inherit`}`),f!==(f=U(r).current)&&(s.value=(s.__value=U(r).current)??``,Ei(s,U(r).current))}),W(`change`,s,e=>{let n=e.target.value;n?t.onSet(U(r).token,n):t.onReset(U(r).token)}),K(e,i)});var l=V(c,2),u=V(z(l),2),d=z(u),f=z(d);f.value=f.__value=``,Y(V(f),16,()=>s,e=>e,(e,t)=>{var r=Td(),i=z(r,!0);F(r);var a={};H(()=>{Z(r,`background:${U(n)};`),q(i,t),a!==(a=t)&&(r.value=(r.__value=t)??``)}),K(e,r)}),F(d);var p;Di(d);var m=V(d,2),h=z(m),g=V(h,2);F(m),F(u);var _=V(u,2);zi(_);var v=V(_,2),y=z(v);F(v),F(l),H(()=>{Z(f,`background:${U(n)};`),p!==(p=U(fe))&&(d.value=(d.__value=U(fe))??``,Ei(d,U(fe))),X(h,1,`px-2 rounded text-[10px] border transition-all cursor-pointer ${U(pe)===`body`?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400`}`),X(g,1,`px-2 rounded text-[10px] border transition-all cursor-pointer ${U(pe)===`heading`?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400`}`),Bi(_,U(fe)),q(y,`Load & apply to ${U(pe)??``}`)}),W(`change`,d,e=>{R(fe,e.target.value,!0)}),W(`click`,h,()=>{R(pe,`body`)}),W(`click`,g,()=>{R(pe,`heading`)}),W(`input`,_,e=>{R(fe,e.target.value,!0)}),W(`click`,v,()=>_e(U(fe),U(pe))),K(e,r)};J(Oe,e=>{U(te)&&e(ke)}),F(Te);var Ae=V(Te,4),je=z(Ae),Me=V(z(je),2),Ne=z(Me,!0);F(Me),F(je);var Pe=V(je,2),Fe=e=>{var r=Id(),i=B(r);Y(i,21,()=>v,e=>e.id,(e,n)=>{let r=I(()=>U(n).size in t.overrides||U(n).lh in t.overrides||U(n).wt in t.overrides||!!U(n).ls&&U(n).ls in t.overrides);var i=Ad(),a=z(i),o=V(a),s=e=>{K(e,kd())};J(o,e=>{U(r)&&e(s)}),F(i),H(()=>{X(i,1,`relative flex-1 py-1 rounded-md text-[10px] font-bold transition-all cursor-pointer ${U(y)===U(n).id?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(a,`${U(n).label??``} `)}),W(`click`,i,()=>{R(y,U(n).id,!0)}),K(e,i)}),F(i);var a=V(i,2),o=z(a);F(a);var s=V(a,2),c=V(z(s),2),u=z(c);Y(u,17,()=>m,e=>e.value,(e,t)=>{var r=Td(),i=z(r,!0);F(r);var a={};H(()=>{Z(r,`background:${U(n)};`),q(i,U(t).label),a!==(a=U(t).value)&&(r.value=(r.__value=U(t).value)??``)}),K(e,r)});var d=V(u),f=e=>{var t=jd(),r={};H(e=>{Z(t,`background:${U(n)};`),r!==(r=e)&&(t.value=(t.__value=e)??``)},[()=>ve(U(b).size,U(b).dSize)]),K(e,t)},p=I(()=>!m.some(e=>e.value===ve(U(b).size,U(b).dSize)));J(d,e=>{U(p)&&e(f)}),F(c);var h;Di(c),F(s);var x=V(s,2),S=V(z(x),2),C=z(S);Y(C,17,()=>g,e=>e.value,(e,t)=>{var r=Td(),i=z(r);F(r);var a={};H(()=>{Z(r,`background:${U(n)};`),q(i,`${U(t).label??``} · ${U(t).num??``}`),a!==(a=U(t).value)&&(r.value=(r.__value=U(t).value)??``)}),K(e,r)});var w=V(C),T=e=>{var t=jd(),r={};H(e=>{Z(t,`background:${U(n)};`),r!==(r=e)&&(t.value=(t.__value=e)??``)},[()=>ve(U(b).lh,U(b).dLh)]),K(e,t)},E=I(()=>!g.some(e=>e.value===ve(U(b).lh,U(b).dLh)));J(w,e=>{U(E)&&e(T)}),F(S);var D;Di(S),F(x);var O=V(x,2),k=V(z(O),2);Y(k,20,()=>l,e=>e,(e,t)=>{let n=I(()=>ve(U(b).wt,U(b).dWt));var r=Md(),i=z(r,!0);F(r),H(e=>{Z(r,e),X(r,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(n)===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(i,t)},[()=>`font-weight:${parseInt(t)}`]),W(`click`,r,()=>ye(U(b).wt,t,U(b).dWt)),K(e,r)}),F(k),F(O);var A=V(O,2),ee=e=>{var t=Nd(),r=V(z(t),2),i=z(r);Y(i,17,()=>_,e=>e.value,(e,t)=>{var r=Td(),i=z(r,!0);F(r);var a={};H(()=>{Z(r,`background:${U(n)};`),q(i,U(t).label),a!==(a=U(t).value)&&(r.value=(r.__value=U(t).value)??``)}),K(e,r)});var a=V(i),o=e=>{var t=jd(),r={};H(e=>{Z(t,`background:${U(n)};`),r!==(r=e)&&(t.value=(t.__value=e)??``)},[()=>ve(U(b).ls,U(b).dLs)]),K(e,t)},s=I(()=>!_.some(e=>e.value===ve(U(b).ls,U(b).dLs)));J(a,e=>{U(s)&&e(o)}),F(r);var c;Di(r),F(t),H(e=>{c!==(c=e)&&(r.value=(r.__value=e)??``,Ei(r,e))},[()=>ve(U(b).ls,U(b).dLs)]),W(`change`,r,e=>ye(U(b).ls,e.target.value,U(b).dLs)),K(e,t)};J(A,e=>{U(b).ls&&e(ee)});var j=V(A,2),te=e=>{let n=I(()=>`--sf-${U(b).id}-max-width`);var r=Pd(),i=V(z(r),2);zi(i);var a=V(i,2),o=e=>{var r=Ed();W(`click`,r,()=>t.onReset(U(n))),K(e,r)};J(a,e=>{U(n)in t.overrides&&e(o)}),F(r),H(()=>Bi(i,t.overrides[U(n)]??``)),W(`input`,i,e=>{let r=e.target.value.trim();r?t.onSet(U(n),r):t.onReset(U(n))}),K(e,r)};J(j,e=>{U(b).id!==`body`&&e(te)});var ne=V(j,2),M=z(ne),re=e=>{var n=Fd(),r=z(n);F(n),H(()=>q(r,`reset ${U(b).label??``}`)),W(`click`,n,()=>{let e={[U(b).size]:null,[U(b).lh]:null,[U(b).wt]:null};U(b).ls&&(e[U(b).ls]=null),t.onBulkChange(e)}),K(e,n)};J(M,e=>{(U(b).size in t.overrides||U(b).lh in t.overrides||U(b).wt in t.overrides||U(b).ls&&U(b).ls in t.overrides)&&e(re)}),F(ne),H((e,t)=>{Z(o,`font-size:${U(be)}rem; font-weight:${U(xe)}; letter-spacing:${U(Se)}em; line-height:${U(Ce)}; font-family:${U(b).id===`body`?U(le)||`inherit`:U(ue)||U(le)||`inherit`}`),h!==(h=e)&&(c.value=(c.__value=e)??``,Ei(c,e)),D!==(D=t)&&(S.value=(S.__value=t)??``,Ei(S,t))},[()=>ve(U(b).size,U(b).dSize),()=>ve(U(b).lh,U(b).dLh)]),W(`change`,c,e=>ye(U(b).size,e.target.value,U(b).dSize)),W(`change`,S,e=>ye(U(b).lh,e.target.value,U(b).dLh)),K(e,r)};J(Pe,e=>{U(ne)&&e(Fe)}),F(Ae);var Ie=V(Ae,4),Le=z(Ie),Re=V(z(Le),2),ze=z(Re,!0);F(Re),F(Le);var Be=V(Le,2),Ve=e=>{var n=Vd(),r=B(n);Y(r,16,()=>[{label:`Body strong`,tokenName:`--sf-font-weight-strong`},{label:`Interactive`,tokenName:`--sf-font-weight-interactive`}],e=>e.tokenName,(e,n)=>{let r=I(()=>u[n.tokenName]??`600`),i=I(()=>t.overrides[n.tokenName]??U(r)),a=I(()=>n.tokenName in t.overrides);var o=Rd(),s=z(o),c=z(s),d=z(c);F(c);var f=V(c,2),p=e=>{var r=Ld();W(`click`,r,()=>t.onReset(n.tokenName)),K(e,r)};J(f,e=>{U(a)&&e(p)}),F(s);var m=V(s,2);Y(m,20,()=>l,e=>e,(e,o)=>{var s=Md(),c=z(s,!0);F(s),H(e=>{Z(s,e),X(s,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(i)===o?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(c,o)},[()=>`font-weight: ${parseInt(o)}`]),W(`click`,s,()=>o===U(r)&&!U(a)?void 0:o===U(r)?t.onReset(n.tokenName):t.onSet(n.tokenName,o)),K(e,s)}),F(m),F(o),H(()=>q(d,`${n.label??``} weight`)),K(e,o)});var i=V(r,2),a=V(z(i),2);Y(a,20,()=>[[`Italic`,`italic`],[`Normal`,`normal`]],([e,t])=>t,(e,n)=>{var r=I(()=>h(n,2));let i=()=>U(r)[0],a=()=>U(r)[1],o=I(()=>t.overrides[`--sf-body-em-style`]??`italic`);var s=zd(),c=z(s),l=z(c,!0);F(c),F(s),H(()=>{X(s,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${U(o)===a()?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),Z(c,`font-style: ${a()}`),q(l,i())}),W(`click`,s,()=>a()===`italic`?t.onReset(`--sf-body-em-style`):t.onSet(`--sf-body-em-style`,a())),K(e,s)}),F(a),F(i);var o=V(i,2);{let e=I(()=>S(`--sf-code-font-size`,.875)),n=I(()=>`--sf-code-font-size`in t.overrides);$(o,{label:`Code font size`,get value(){return U(e)},min:.7,max:1.1,step:.005,unit:`em`,help:`--sf-code-font-size — size of inline code relative to surrounding text`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-code-font-size`,`${e}em`),onReset:()=>t.onReset(`--sf-code-font-size`)})}var s=V(o,2);Y(s,16,()=>[{label:`Heading wrap`,token:`--sf-heading-text-wrap`,defaultVal:`balance`},{label:`Body wrap`,token:`--sf-body-text-wrap`,defaultVal:`pretty`}],e=>e.token,(e,n)=>{let r=I(()=>t.overrides[n.token]??n.defaultVal);var i=Bd(),a=z(i),o=z(a,!0);F(a);var s=V(a,2);Y(s,21,()=>c,e=>e.value,(e,i)=>{var a=Md(),o=z(a,!0);F(a),H(()=>{X(a,1,`flex-1 px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${U(r)===U(i).value?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(o,U(i).label)}),W(`click`,a,()=>U(i).value===n.defaultVal&&!(n.token in t.overrides)?void 0:U(i).value===n.defaultVal?t.onReset(n.token):t.onSet(n.token,U(i).value)),K(e,a)}),F(s),F(i),H(()=>q(o,n.label)),K(e,i)});var d=V(s,2),f=V(z(d),2);zi(f),Q(f,`placeholder`,`" ↗"`);var p=V(f,2),m=e=>{var n=Ed();W(`click`,n,()=>t.onReset(`--sf-link-external-marker`)),K(e,n)};J(p,e=>{`--sf-link-external-marker`in t.overrides&&e(m)}),F(d);var g=V(d,2),_=V(z(g),2);zi(_),Q(_,`placeholder`,`"opens in a new window or external site"`);var v=V(_,2),y=e=>{var n=Ed();W(`click`,n,()=>t.onReset(`--sf-link-external-label`)),K(e,n)};J(v,e=>{`--sf-link-external-label`in t.overrides&&e(y)}),F(g),H(()=>{Bi(f,t.overrides[`--sf-link-external-marker`]??``),Bi(_,t.overrides[`--sf-link-external-label`]??``)}),W(`input`,f,e=>{let n=e.target.value;n?t.onSet(`--sf-link-external-marker`,n):t.onReset(`--sf-link-external-marker`)}),W(`input`,_,e=>{let n=e.target.value;n?t.onSet(`--sf-link-external-label`,n):t.onReset(`--sf-link-external-label`)}),K(e,n)};J(Be,e=>{U(M)&&e(Ve)}),F(Ie);var He=V(Ie,4),Ge=z(He),Ke=V(z(Ge),2),qe=z(Ke,!0);F(Ke),F(Ge);var Je=V(Ge,2),Ye=e=>{var n=Wd();Y(V(B(n),2),16,()=>[{label:`Light`,token:`--sf-font-weight-light`,def:300},{label:`Normal`,token:`--sf-font-weight-normal`,def:400},{label:`Medium`,token:`--sf-font-weight-medium`,def:500},{label:`Semibold`,token:`--sf-font-weight-semibold`,def:600},{label:`Bold`,token:`--sf-font-weight-bold`,def:700}],e=>e.token,(e,n)=>{var r=Ud(),i=z(r),a=z(i),o=z(a,!0);F(a);var s=V(a,2),c=e=>{var r=Hd();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(i);var u=V(i,2);Y(u,20,()=>l,e=>e,(e,r)=>{let i=I(()=>t.overrides[n.token]??String(n.def));var a=Md(),o=z(a,!0);F(a),H(e=>{Z(a,e),X(a,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(i)===r?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(o,r)},[()=>`font-weight:${parseInt(r)}`]),W(`click`,a,()=>r===String(n.def)&&!(n.token in t.overrides)?void 0:r===String(n.def)?t.onReset(n.token):t.onSet(n.token,r)),K(e,a)}),F(u),F(r),H(()=>q(o,n.label)),K(e,r)}),K(e,n)};J(Je,e=>{U(ce)&&e(Ye)}),F(He);var Xe=V(He,4),Ze=z(Xe),Qe=V(z(Ze),2),$e=z(Qe,!0);F(Qe),F(Ze);var et=V(Ze,2),tt=e=>{var n=Kd(),r=B(n);{let e=I(()=>`--sf-text-display-base-min`in t.overrides||`--sf-text-display-base-max`in t.overrides);wd(r,{title:`Display base size`,get minValue(){return U(D)},get maxValue(){return U(O)},min:1.5,max:6,step:.05,unit:`rem`,previewKind:`type`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-text-display-base-min`),t.onReset(`--sf-text-display-base-max`)},onMinChange:e=>t.onSet(`--sf-text-display-base-min`,String(e)),onMaxChange:e=>t.onSet(`--sf-text-display-base-max`,String(e))})}var i=V(r,2);Y(i,20,()=>[{label:`Display L line-height`,token:`--sf-display-l-line-height`,def:1},{label:`Display M line-height`,token:`--sf-display-m-line-height`,def:1.05}],e=>e.token,(e,n)=>{var r=Gd(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);{let e=I(()=>S(n.token,n.def)),r=I(()=>n.token in t.overrides);$(o,{label:``,get value(){return U(e)},min:.8,max:1.5,step:.025,get overridden(){return U(r)},onChange:e=>t.onSet(n.token,String(e)),onReset:()=>t.onReset(n.token)})}F(r),H(()=>q(a,n.label)),K(e,r)}),F(i),Y(V(i,2),16,()=>[{label:`Display`,tokenName:`--sf-font-weight-display`},{label:`Heading`,tokenName:`--sf-font-weight-heading`}],e=>e.tokenName,(e,n)=>{let r=I(()=>u[n.tokenName]??`700`),i=I(()=>t.overrides[n.tokenName]??U(r)),a=I(()=>n.tokenName in t.overrides);var o=Rd(),s=z(o),c=z(s),d=z(c);F(c);var f=V(c,2),p=e=>{var r=Ld();W(`click`,r,()=>t.onReset(n.tokenName)),K(e,r)};J(f,e=>{U(a)&&e(p)}),F(s);var m=V(s,2);Y(m,20,()=>l,e=>e,(e,o)=>{var s=Md(),c=z(s,!0);F(s),H(e=>{Z(s,e),X(s,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(i)===o?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(c,o)},[()=>`font-weight: ${parseInt(o)}`]),W(`click`,s,()=>o===U(r)&&!U(a)?void 0:o===U(r)?t.onReset(n.tokenName):t.onSet(n.tokenName,o)),K(e,s)}),F(m),F(o),H(()=>q(d,`${n.label??``} weight`)),K(e,o)}),K(e,n)};J(et,e=>{U(re)&&e(tt)}),F(Xe);var nt=V(Xe,4),rt=z(nt),it=V(z(rt),2),at=z(it,!0);F(it),F(rt);var ot=V(rt,2),st=e=>{var n=Yd(),i=V(B(n),2);{let e=I(()=>`--sf-fluid-min-vw`in t.overrides||`--sf-fluid-max-vw`in t.overrides);wd(i,{title:`Viewport range`,get minValue(){return U(ee)},get maxValue(){return U(j)},min:15,max:120,step:.5,unit:`rem`,minLabel:`Mobile`,maxLabel:`Desktop`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-fluid-min-vw`),t.onReset(`--sf-fluid-max-vw`)},onMinChange:e=>t.onSet(`--sf-fluid-min-vw`,String(e)),onMaxChange:e=>t.onSet(`--sf-fluid-max-vw`,String(e))})}var a=V(i,2);{let e=I(()=>`--sf-text-base-min`in t.overrides||`--sf-text-base-max`in t.overrides);wd(a,{title:`Base size & ratio`,get minValue(){return U(T)},get maxValue(){return U(E)},min:.7,max:2,step:.01,unit:`rem`,minLabel:`Mobile`,maxLabel:`Desktop`,previewKind:`type`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-text-base-min`),t.onReset(`--sf-text-base-max`)},onMinChange:e=>t.onSet(`--sf-text-base-min`,String(e)),onMaxChange:e=>t.onSet(`--sf-text-base-max`,String(e)),get ratioPresets(){return r},get ratioMin(){return U(C)},get ratioMax(){return U(w)},ratioMin_bound:1.05,ratioMax_bound:1.8,onRatioMinChange:e=>t.onSet(`--sf-text-ratio-min`,String(e)),onRatioMaxChange:e=>t.onSet(`--sf-text-ratio-max`,String(e))})}var o=V(a,2),s=V(z(o),2);Y(s,21,()=>p,e=>e.token,(e,n)=>{{let r=I(()=>he(U(n))),i=I(()=>`${U(n).token} — ${U(n).label.toLowerCase()} line height`),a=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:1,max:2.2,step:.05,get help(){return U(i)},get overridden(){return U(a)},onChange:e=>t.onSet(U(n).token,String(e)),onReset:()=>t.onReset(U(n).token)})}}),F(s),F(o);var c=V(o,2);{let e=I(()=>`--sf-leading-taper`in t.overrides);$(c,{label:`Leading taper`,get value(){return U(k)},min:0,max:.5,step:.01,help:`How aggressively large display sizes shrink their line-height.`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-leading-taper`,String(e)),onReset:()=>t.onReset(`--sf-leading-taper`)})}var l=V(c,2),u=V(z(l),4);Y(u,21,()=>f,e=>e.token,(e,n)=>{var r=qd(),i=z(r),a=z(i),o=z(a,!0);F(a);var s=V(a,2),c=e=>{var r=Hd();W(`click`,r,()=>t.onReset(U(n).token)),K(e,r)};J(s,e=>{U(n).token in t.overrides&&e(c)}),F(i);var l=V(i,2);{let e=I(()=>me(U(n)));tu(l,{get value(){return U(e)},min:-.1,max:.2,step:.005,unit:`em`,onChange:e=>t.onSet(U(n).token,`${e}em`)})}F(r),H(()=>q(o,U(n).label)),K(e,r)}),F(u),F(l);var d=V(l,2),m=z(d),h=V(z(m),2),g=z(h,!0);F(h),F(m);var _=V(m,2),v=e=>{var n=Jd();Y(n,21,()=>x,e=>e.name,(e,n)=>{du(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(n),K(e,n)};J(_,e=>{U(ae)&&e(v)}),F(d),H(()=>{Q(m,`aria-expanded`,U(ae)),q(g,U(ae)?`▲`:`▼`)}),W(`click`,m,()=>{R(ae,!U(ae))}),K(e,n)};J(ot,e=>{U(ie)&&e(st)}),F(nt);var ct=V(nt,4),lt=z(ct),ut=V(z(lt),2),dt=z(ut,!0);F(ut),F(lt);var ft=V(lt,2),pt=e=>{var t=Zd();Y(t,21,()=>[...d].reverse(),({label:e,factor:t})=>e,(e,t)=>{let n=()=>U(t).label,r=()=>U(t).factor,i=I(()=>(U(T)+U(E))/2),a=I(()=>U(i)*r()*U(A));var o=Xd(),s=z(o),c=z(s,!0);F(s);var l=V(s,2),u=V(l,2),d=z(u);F(u),F(o),H((e,t)=>{q(c,n()),Z(l,e),q(d,`${t??``}rem`)},[()=>`font-size: ${Math.min(U(a),2.5)}rem; font-family: ${U(le)||`inherit`}`,()=>U(a).toFixed(2)]),K(e,o)}),F(t),K(e,t)};J(ft,e=>{U(oe)&&e(pt)}),F(ct);var mt=V(ct,4),ht=z(mt),gt=V(z(ht),2),_t=z(gt,!0);F(gt),F(ht);var vt=V(ht,2),yt=e=>{var n=ef(),r=V(B(n),2);Y(r,20,()=>[{label:`2xs`,token:`--sf-text-2xs-max-width`,def:`55ch`},{label:`xs`,token:`--sf-text-xs-max-width`,def:`60ch`},{label:`s`,token:`--sf-text-s-max-width`,def:`65ch`},{label:`m`,token:`--sf-text-m-max-width`,def:`65ch`},{label:`l`,token:`--sf-text-l-max-width`,def:`none`},{label:`xl`,token:`--sf-text-xl-max-width`,def:`none`},{label:`2xl`,token:`--sf-text-2xl-max-width`,def:`none`},{label:`3xl`,token:`--sf-text-3xl-max-width`,def:`none`},{label:`4xl`,token:`--sf-text-4xl-max-width`,def:`none`}],e=>e.token,(e,n)=>{var r=$d(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=Qd();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.def)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),F(r),K(e,n)};J(vt,e=>{U(N)&&e(yt)}),F(mt);var bt=V(mt,4),xt=z(bt),St=V(z(xt),2),Ct=z(St,!0);F(St),F(xt);var wt=V(xt,2),Tt=e=>{var n=tf(),r=V(B(n),2),i=V(z(r),2);Y(i,20,()=>[[`tabular-nums`,`tabular-nums (default)`],[`proportional-nums`,`proportional-nums`],[`normal`,`normal`]],([e,t])=>e,(e,n)=>{var r=I(()=>h(n,2));let i=()=>U(r)[0],a=()=>U(r)[1],o=I(()=>t.overrides[`--sf-font-numeric`]??`tabular-nums`);var s=Md(),c=z(s,!0);F(s),H(()=>{X(s,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${U(o)===i()?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(c,a())}),W(`click`,s,()=>i()===`tabular-nums`?t.onReset(`--sf-font-numeric`):t.onSet(`--sf-font-numeric`,i())),K(e,s)}),F(i),F(r);var a=V(r,2),o=V(z(a),2);Y(o,20,()=>[[`auto`,`auto (default)`],[`none`,`none`]],([e,t])=>e,(e,n)=>{var r=I(()=>h(n,2));let i=()=>U(r)[0],a=()=>U(r)[1],o=I(()=>t.overrides[`--sf-optical-sizing`]??`auto`);var s=Md(),c=z(s,!0);F(s),H(()=>{X(s,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${U(o)===i()?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(c,a())}),W(`click`,s,()=>i()===`auto`?t.onReset(`--sf-optical-sizing`):t.onSet(`--sf-optical-sizing`,i())),K(e,s)}),F(o),F(a);var s=V(a,2),c=V(z(s),2);zi(c);var l=V(c,2),u=e=>{var n=Qd();W(`click`,n,()=>t.onReset(`--sf-font-features`)),K(e,n)};J(l,e=>{`--sf-font-features`in t.overrides&&e(u)}),F(s);var d=V(s,2),f=V(z(d),2);zi(f);var p=V(f,2),m=e=>{var n=Qd();W(`click`,n,()=>t.onReset(`--sf-font-variation`)),K(e,n)};J(p,e=>{`--sf-font-variation`in t.overrides&&e(m)}),F(d),H(()=>{Bi(c,t.overrides[`--sf-font-features`]??``),Bi(f,t.overrides[`--sf-font-variation`]??``)}),W(`input`,c,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-font-features`,n):t.onReset(`--sf-font-features`)}),W(`input`,f,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-font-variation`,n):t.onReset(`--sf-font-variation`)}),K(e,n)};J(wt,e=>{U(se)&&e(Tt)}),F(bt),F(we),H(()=>{Q(Ee,`aria-expanded`,U(te)),q(P,U(te)?`▲`:`▼`),Q(je,`aria-expanded`,U(ne)),q(Ne,U(ne)?`▲`:`▼`),Q(Le,`aria-expanded`,U(M)),q(ze,U(M)?`▲`:`▼`),Q(Ge,`aria-expanded`,U(ce)),q(qe,U(ce)?`▲`:`▼`),Q(Ze,`aria-expanded`,U(re)),q($e,U(re)?`▲`:`▼`),Q(rt,`aria-expanded`,U(ie)),q(at,U(ie)?`▲`:`▼`),Q(lt,`aria-expanded`,U(oe)),q(dt,U(oe)?`▲`:`▼`),Q(ht,`aria-expanded`,U(N)),q(_t,U(N)?`▲`:`▼`),Q(xt,`aria-expanded`,U(se)),q(Ct,U(se)?`▲`:`▼`)}),W(`click`,Ee,()=>{R(te,!U(te))}),W(`click`,je,()=>{R(ne,!U(ne))}),W(`click`,Le,()=>{R(M,!U(M))}),W(`click`,Ge,()=>{R(ce,!U(ce))}),W(`click`,Ze,()=>{R(re,!U(re))}),W(`click`,rt,()=>{R(ie,!U(ie))}),W(`click`,lt,()=>{R(oe,!U(oe))}),W(`click`,ht,()=>{R(N,!U(N))}),W(`click`,xt,()=>{R(se,!U(se))}),K(e,we),We()}Br([`click`,`change`,`input`]);function af(e,t){return t.map(t=>({label:`${e}-${t}`,value:`var(--sf-${e}-${t})`}))}var of=af(`space`,[`2xs`,`xs`,`s`,`m`,`l`,`xl`,`2xl`,`3xl`,`4xl`]),sf=af(`radius`,[`2xs`,`xs`,`s`,`m`,`l`,`xl`,`2xl`,`3xl`,`4xl`,`full`]),cf=af(`border-width`,[`1`,`2`,`3`,`4`]),lf=af(`container`,[`narrow`,`prose`,`default`,`wide`,`full`]),uf=af(`size`,[`xs`,`s`,`m`,`l`,`xl`]);af(`shadow`,[`xs`,`s`,`m`,`l`,`xl`]);var df=G(`
`),ff=G(`

The two most-referenced spacing tokens. Referenced by every layout primitive (cluster, grid, stack, bento…).

`,1),pf=G(`

Utopia-style fluid scale — viewport width, base unit and ratio per endpoint. + The viewport range is shared with the type scale.

`,1),mf=G(`
`),hf=G(`
Space scale preview
`);function gf(e,t){Ue(t,!0);let n=[{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:`Golden — 1.618`,value:1.618}],r=[`2xs`,`xs`,`s`,`m`,`l`,`xl`,`2xl`,`3xl`,`4xl`],i=ql.spacing??[];function a(e,n){let r=parseFloat(t.overrides[e]??``);return isNaN(r)?n:r}let o=I(()=>a(`--sf-space-ratio-min`,1.25)),s=I(()=>a(`--sf-space-ratio-max`,1.333)),c=I(()=>a(`--sf-space-base-min`,1)),l=I(()=>a(`--sf-space-base-max`,2)),u=I(()=>a(`--sf-space-scale`,1)),d=I(()=>a(`--sf-gap`,1)),f=I(()=>a(`--sf-gutter`,1.5)),p=I(()=>a(`--sf-content-gap`,.5)),m=I(()=>a(`--sf-fluid-min-vw`,22.5)),h=I(()=>a(`--sf-fluid-max-vw`,90)),g=L(!1),_=L(!1),v=L(!1);var y=hf(),b=z(y),x=V(z(b),2);Y(x,22,()=>r,e=>e,(e,t,n)=>{let r=I(()=>(U(c)+U(l))/2),i=I(()=>(U(o)+U(s))/2),a=I(()=>U(n)-3),d=I(()=>U(a)>=0?U(r)*U(i)**+U(a):U(r)/U(i)**+-U(a)),f=I(()=>U(d)*U(u)),p=I(()=>Math.min(U(f)*28,240));var m=df(),h=z(m),g=z(h,!0);F(h);var _=V(h,2),v=V(_,2),y=z(v);F(v),F(m),H(e=>{q(g,t),Z(_,`width: ${U(p)}px; min-width: 3px`),q(y,`${e??``}rem`)},[()=>U(f).toFixed(2)]),K(e,m)}),F(x),F(b);var S=V(b,4),C=z(S),w=V(z(C),2),T=z(w,!0);F(w),F(C);var E=V(C,2),D=e=>{var n=ff(),r=V(B(n),2);{let e=I(()=>`--sf-gap`in t.overrides);$(r,{label:`Gap`,get value(){return U(d)},min:0,max:4,step:.0625,unit:`rem`,help:`--sf-gap — spacing between layout items (cluster, grid, reel, stack, sidebar, bento)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-gap`,`${e}rem`),onReset:()=>t.onReset(`--sf-gap`),rawDefault:`var(--sf-space-m)`,get variableOptions(){return of},get currentRaw(){return t.overrides[`--sf-gap`]},onRawSet:e=>t.onSet(`--sf-gap`,e)})}var i=V(r,2);{let e=I(()=>`--sf-content-gap`in t.overrides);$(i,{label:`Content gap`,get value(){return U(p)},min:0,max:2,step:.0625,unit:`rem`,help:`--sf-content-gap — tighter gap within components (defaults to space-s)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-content-gap`,`${e}rem`),onReset:()=>t.onReset(`--sf-content-gap`),rawDefault:`var(--sf-space-s)`,get variableOptions(){return of},get currentRaw(){return t.overrides[`--sf-content-gap`]},onRawSet:e=>t.onSet(`--sf-content-gap`,e)})}var a=V(i,2);{let e=I(()=>`--sf-gutter`in t.overrides);$(a,{label:`Gutter`,get value(){return U(f)},min:0,max:6,step:.0625,unit:`rem`,help:`--sf-gutter — wide page/section side gutter (containers, .sf-section--guttered)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-gutter`,`${e}rem`),onReset:()=>t.onReset(`--sf-gutter`),rawDefault:`var(--sf-space-l)`,get variableOptions(){return of},get currentRaw(){return t.overrides[`--sf-gutter`]},onRawSet:e=>t.onSet(`--sf-gutter`,e)})}K(e,n)};J(E,e=>{U(g)&&e(D)}),F(S);var O=V(S,4),k=z(O),A=V(z(k),2),ee=z(A,!0);F(A),F(k);var j=V(k,2),te=e=>{var r=pf(),i=V(B(r),2);{let e=I(()=>`--sf-fluid-min-vw`in t.overrides||`--sf-fluid-max-vw`in t.overrides);wd(i,{title:`Viewport range`,get minValue(){return U(m)},get maxValue(){return U(h)},min:15,max:120,step:.5,unit:`rem`,minLabel:`Mobile`,maxLabel:`Desktop`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-fluid-min-vw`),t.onReset(`--sf-fluid-max-vw`)},onMinChange:e=>t.onSet(`--sf-fluid-min-vw`,String(e)),onMaxChange:e=>t.onSet(`--sf-fluid-max-vw`,String(e))})}var a=V(i,2);{let e=I(()=>`--sf-space-base-min`in t.overrides||`--sf-space-base-max`in t.overrides);wd(a,{title:`Base unit & ratio`,get minValue(){return U(c)},get maxValue(){return U(l)},min:.5,max:4,step:.05,unit:`rem`,minLabel:`Mobile`,maxLabel:`Desktop`,previewKind:`space`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-space-base-min`),t.onReset(`--sf-space-base-max`)},onMinChange:e=>t.onSet(`--sf-space-base-min`,String(e)),onMaxChange:e=>t.onSet(`--sf-space-base-max`,String(e)),get ratioPresets(){return n},get ratioMin(){return U(o)},get ratioMax(){return U(s)},ratioMin_bound:1.1,ratioMax_bound:1.8,onRatioMinChange:e=>t.onSet(`--sf-space-ratio-min`,String(e)),onRatioMaxChange:e=>t.onSet(`--sf-space-ratio-max`,String(e))})}K(e,r)};J(j,e=>{U(_)&&e(te)}),F(O);var ne=V(O,4),M=z(ne),re=V(z(M),2),ie=z(re,!0);F(re),F(M);var ae=V(M,2),oe=e=>{var n=mf();Y(n,21,()=>i,e=>e.name,(e,n)=>{du(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(n),K(e,n)};J(ae,e=>{U(v)&&e(oe)}),F(ne),F(y),H(()=>{Q(C,`aria-expanded`,U(g)),q(T,U(g)?`▲`:`▼`),Q(k,`aria-expanded`,U(_)),q(ee,U(_)?`▲`:`▼`),Q(M,`aria-expanded`,U(v)),q(ie,U(v)?`▲`:`▼`)}),W(`click`,C,()=>{R(g,!U(g))}),W(`click`,k,()=>{R(_,!U(_))}),W(`click`,M,()=>{R(v,!U(v))}),K(e,y),We()}Br([`click`]);var _f=G(`
`),vf=G(`
Narrow
Prose
Default
Wide
`,1),yf=G(` `,1),bf=G(`
col
`),xf=G(`
Named sizes (grid-min-xs → 2xl)
Preview at 360px panel width
`,1),Sf=G(`
`),Cf=G(`
Mobile
Desktop
`,1),wf=G(`

Offsets position:sticky elements below a fixed header. Defaults to header heights.

Mobile
Desktop
`,1),Tf=G(`
`,1),Ef=G(`
`),Df=G(``),Of=G(``),kf=G(`
`),Af=G(``),jf=G(`
Switcher
Sidebar content
Cluster
Equal columns (flowing)
Content flows between columns like a newspaper — use .sf-grid for discrete grid cells instead.
Rule style
Rule color
Cover
Frame ratio

--sf-frame-ratio — aspect ratio for .sf-frame

Reel

--sf-reel-item-width — width of each item in a horizontal .sf-reel

Height
Imposter
Content grid (breakout)
Alternate (zigzag)
`),Mf=G(`
`),Nf=G(`

Override the built-in named aspect ratios used by .sf-ratio-* utilities.

`),Pf=G(`

Default values for the .sf-bg-layer full-bleed background utility.

`),Ff=G(`
`);function If(e,t){Ue(t,!0);let n=[`solid`,`dashed`,`dotted`],r=I(()=>qo.value===`dark`?`#16161e`:`#ffffff`);function i(e,t){if(!e)return t;let n=parseFloat(e);return isNaN(n)?t:n}let a=I(()=>i(t.overrides[`--sf-container-narrow`],38)),o=I(()=>i(t.overrides[`--sf-container-prose`],65)),s=I(()=>i(t.overrides[`--sf-container-default`],75)),c=I(()=>i(t.overrides[`--sf-container-wide`],90)),l=I(()=>i(t.overrides[`--sf-center-max`],75)),u=I(()=>i(t.overrides[`--sf-center-gutter`],1)),d=I(()=>i(t.overrides[`--sf-grid-min`],16)),f=I(()=>i(t.overrides[`--sf-header-height-mobile`],3.5)),p=I(()=>i(t.overrides[`--sf-header-height-desktop`],5)),m=I(()=>i(t.overrides[`--sf-sidebar-width`],18)),h=I(()=>i(t.overrides[`--sf-sticky-offset-mobile`],3.5)),g=I(()=>i(t.overrides[`--sf-sticky-offset-desktop`],5)),_=[{label:`Columns`,token:`--sf-bento-cols-default`,min:1,max:12,step:1,unit:``,default:4},{label:`Row default`,token:`--sf-bento-row-default`,min:4,max:24,step:.5,unit:`rem`,default:10},{label:`Row compact`,token:`--sf-bento-row-compact`,min:2,max:16,step:.5,unit:`rem`,default:6},{label:`Row tall`,token:`--sf-bento-row-tall`,min:8,max:32,step:.5,unit:`rem`,default:16}],v=L(!1),y=L(!1),b=L(!1),x=L(!1),S=L(!1),C=L(!1),w=L(!1),T=L(!1),E=L(!1),D=L(!1);function O(e){let n=t.overrides[e.token];return n?parseFloat(n):e.default}let k=I(()=>i(t.overrides[`--sf-switcher-threshold`],30)),A=I(()=>i(t.overrides[`--sf-sidebar-min-width`],50)),ee=I(()=>i(t.overrides[`--sf-equal-min-col`],16)),j=I(()=>i(t.overrides[`--sf-equal-rule-width`],0)),te=I(()=>t.overrides[`--sf-equal-rule-color`]??``),ne=I(()=>i(t.overrides[`--sf-cover-min-height`],100)),M=I(()=>i(t.overrides[`--sf-imposter-margin`],1)),re=I(()=>i(t.overrides[`--sf-breakout-width`],90)),ie=I(()=>i(t.overrides[`--sf-content-width`],75)),ae=I(()=>i(t.overrides[`--sf-alternate-inner-gap`],1)),oe=I(()=>t.overrides[`--sf-frame-ratio`]??`16 / 9`),se=I(()=>t.overrides[`--sf-reel-item-width`]??`max-content`),N=[`16 / 9`,`4 / 3`,`3 / 2`,`1 / 1`,`21 / 9`],ce=[{label:`auto`,value:`max-content`},{label:`12rem`,value:`12rem`},{label:`16rem`,value:`16rem`},{label:`20rem`,value:`20rem`}];var le=Ff(),ue=z(le),de=z(ue),fe=V(z(de),2),pe=z(fe,!0);F(fe),F(de);var me=V(de,2),he=e=>{var n=vf(),r=B(n),i=z(r),l=V(z(i),2);{let e=I(()=>`--sf-container-narrow`in t.overrides);$(l,{label:``,get value(){return U(a)},min:20,max:60,step:1,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-container-narrow`,`${e}rem`),onReset:()=>t.onReset(`--sf-container-narrow`)})}F(i);var u=V(i,2),d=V(z(u),2);{let e=I(()=>`--sf-container-prose`in t.overrides);$(d,{label:``,get value(){return U(o)},min:40,max:90,step:1,unit:`ch`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-container-prose`,`${e}ch`),onReset:()=>t.onReset(`--sf-container-prose`)})}F(u);var f=V(u,2),p=V(z(f),2);{let e=I(()=>`--sf-container-default`in t.overrides);$(p,{label:``,get value(){return U(s)},min:50,max:120,step:1,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-container-default`,`${e}rem`),onReset:()=>t.onReset(`--sf-container-default`)})}F(f);var m=V(f,2),h=V(z(m),2);{let e=I(()=>`--sf-container-wide`in t.overrides);$(h,{label:``,get value(){return U(c)},min:60,max:160,step:1,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-container-wide`,`${e}rem`),onReset:()=>t.onReset(`--sf-container-wide`)})}F(m),F(r);var g=V(r,2);Y(g,21,()=>[{label:`narrow`,value:U(a),max:U(c),unit:`rem`},{label:`prose`,value:U(o),max:U(c)*1.5,unit:`ch`},{label:`default`,value:U(s),max:U(c),unit:`rem`},{label:`wide`,value:U(c),max:U(c),unit:`rem`}],e=>e.label,(e,t)=>{var n=_f(),r=z(n),i=z(r,!0);F(r);var a=V(r,2),o=z(a);F(a);var s=V(a,2),c=z(s);F(s),F(n),H(e=>{q(i,U(t).label),Z(o,e),q(c,`${U(t).value??``}${U(t).unit??``}`)},[()=>`width: ${Math.min(U(t).value/U(t).max*100,100)}%`]),K(e,n)}),F(g),K(e,n)};J(me,e=>{U(v)&&e(he)}),F(ue);var ge=V(ue,4),_e=z(ge),ve=V(z(_e),2),ye=z(ve,!0);F(ve),F(_e);var be=V(_e,2),xe=e=>{var n=yf(),r=B(n);{let e=I(()=>`--sf-center-max`in t.overrides);$(r,{label:`Max width`,get value(){return U(l)},min:30,max:160,step:1,unit:`rem`,help:`--sf-center-max — max-width of the .sf-center centering wrapper`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-center-max`,`${e}rem`),onReset:()=>t.onReset(`--sf-center-max`),rawDefault:`var(--sf-container-default)`,get variableOptions(){return lf},get currentRaw(){return t.overrides[`--sf-center-max`]},onRawSet:e=>t.onSet(`--sf-center-max`,e)})}var i=V(r,2);{let e=I(()=>`--sf-center-gutter`in t.overrides);$(i,{label:`Gutter`,get value(){return U(u)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-center-gutter — minimum side padding inside the center wrapper`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-center-gutter`,`${e}rem`),onReset:()=>t.onReset(`--sf-center-gutter`),rawDefault:`var(--sf-gutter)`,get variableOptions(){return of},get currentRaw(){return t.overrides[`--sf-center-gutter`]},onRawSet:e=>t.onSet(`--sf-center-gutter`,e)})}K(e,n)};J(be,e=>{U(y)&&e(xe)}),F(ge);var Se=V(ge,4),Ce=z(Se),we=V(z(Ce),2),Te=z(we,!0);F(we),F(Ce);var Ee=V(Ce,2),De=e=>{var n=xf(),r=B(n);{let e=I(()=>`--sf-grid-min`in t.overrides);$(r,{label:`Grid min cell width`,get value(){return U(d)},min:8,max:40,step:.5,unit:`rem`,help:`sf-grid minimum column width — browser auto-fills columns`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-grid-min`,`${e}rem`),onReset:()=>t.onReset(`--sf-grid-min`)})}var a=V(r,2),o=V(z(a),2);Y(o,20,()=>[{label:`xs`,token:`--sf-grid-min-xs`,def:10},{label:`s`,token:`--sf-grid-min-s`,def:13},{label:`m`,token:`--sf-grid-min-m`,def:16},{label:`l`,token:`--sf-grid-min-l`,def:20},{label:`xl`,token:`--sf-grid-min-xl`,def:24},{label:`2xl`,token:`--sf-grid-min-2xl`,def:28}],e=>e.token,(e,n)=>{{let r=I(()=>i(t.overrides[n.token],n.def)),a=I(()=>n.token in t.overrides);$(e,{get label(){return n.label},get value(){return U(r)},min:6,max:40,step:.5,unit:`rem`,get overridden(){return U(a)},onChange:e=>t.onSet(n.token,`${e}rem`),onReset:()=>t.onReset(n.token)})}}),F(o),F(a);var s=V(a,2),c=V(z(s),2);Y(c,20,()=>Array.from({length:8}),ii,(e,t)=>{K(e,bf())}),F(c),F(s),H(e=>Z(c,e),[()=>`grid-template-columns: repeat(auto-fill, minmax(${Math.min(U(d)*16*(360/1200),120)}px, 1fr))`]),K(e,n)};J(Ee,e=>{U(b)&&e(De)}),F(Se);var P=V(Se,4),Oe=z(P),ke=V(z(Oe),2),Ae=z(ke,!0);F(ke),F(Oe);var je=V(Oe,2),Ne=e=>{var n=Cf(),r=B(n),i=z(r),a=V(z(i),2);{let e=I(()=>`--sf-header-height-mobile`in t.overrides);$(a,{label:``,get value(){return U(f)},min:2,max:8,step:.25,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-header-height-mobile`,`${e}rem`),onReset:()=>t.onReset(`--sf-header-height-mobile`)})}F(i);var o=V(i,2),s=V(z(o),2);{let e=I(()=>`--sf-header-height-desktop`in t.overrides);$(s,{label:``,get value(){return U(p)},min:3,max:10,step:.25,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-header-height-desktop`,`${e}rem`),onReset:()=>t.onReset(`--sf-header-height-desktop`)})}F(o),F(r);var c=V(r,2),l=z(c),u=V(z(l),2);Y(u,20,()=>[1,2,3],e=>e,(e,t)=>{K(e,Sf())}),F(u),F(l);var d=V(l,2),m=z(d);F(d),F(c),H(e=>{Z(l,e),q(m,`${U(f)??``}rem mobile · ${U(p)??``}rem desktop`)},[()=>`height: ${Math.min(U(f)*12,64)}px`]),K(e,n)};J(je,e=>{U(x)&&e(Ne)}),F(P);var Pe=V(P,4),Fe=z(Pe),Ie=V(z(Fe),2),Le=z(Ie,!0);F(Ie),F(Fe);var Re=V(Fe,2),ze=e=>{var n=wf(),r=V(B(n),2),i=z(r),a=V(z(i),2);{let e=I(()=>`--sf-sticky-offset-mobile`in t.overrides);$(a,{label:``,get value(){return U(h)},min:0,max:12,step:.25,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-sticky-offset-mobile`,`${e}rem`),onReset:()=>t.onReset(`--sf-sticky-offset-mobile`),rawDefault:`var(--sf-header-height-mobile)`,get currentRaw(){return t.overrides[`--sf-sticky-offset-mobile`]},onRawSet:e=>t.onSet(`--sf-sticky-offset-mobile`,e)})}F(i);var o=V(i,2),s=V(z(o),2);{let e=I(()=>`--sf-sticky-offset-desktop`in t.overrides);$(s,{label:``,get value(){return U(g)},min:0,max:12,step:.25,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-sticky-offset-desktop`,`${e}rem`),onReset:()=>t.onReset(`--sf-sticky-offset-desktop`),rawDefault:`var(--sf-header-height-desktop)`,get currentRaw(){return t.overrides[`--sf-sticky-offset-desktop`]},onRawSet:e=>t.onSet(`--sf-sticky-offset-desktop`,e)})}F(o),F(r),K(e,n)};J(Re,e=>{U(S)&&e(ze)}),F(Pe);var Be=V(Pe,4),Ve=z(Be),He=V(z(Ve),2),Ge=z(He,!0);F(He),F(Ve);var Ke=V(Ve,2),qe=e=>{var n=Tf(),r=B(n);{let e=I(()=>`--sf-sidebar-width`in t.overrides);$(r,{label:`Sidebar width`,get value(){return U(m)},min:10,max:32,step:.5,unit:`rem`,help:`--sf-sidebar-width — default sidebar / drawer width`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-sidebar-width`,`${e}rem`),onReset:()=>t.onReset(`--sf-sidebar-width`)})}var i=V(r,2),a=z(i),o=z(a),s=z(o);F(o),F(a),Me(2),F(i),H(e=>{Z(a,e),q(s,`${U(m)??``}rem`)},[()=>`width: ${Math.min(U(m)*3.5,100)}px`]),K(e,n)};J(Ke,e=>{U(C)&&e(qe)}),F(Be);var Je=V(Be,4),Ye=z(Je),Xe=V(z(Ye),2),Ze=z(Xe,!0);F(Xe),F(Ye);var Qe=V(Ye,2),$e=e=>{var n=Ef();Y(n,21,()=>_,e=>e.token,(e,n)=>{{let r=I(()=>O(U(n))),i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},get min(){return U(n).min},get max(){return U(n).max},get step(){return U(n).step},get unit(){return U(n).unit},get help(){return U(n).token},get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,U(n).unit?`${e}${U(n).unit}`:String(e)),onReset:()=>t.onReset(U(n).token)})}}),F(n),K(e,n)};J(Qe,e=>{U(w)&&e($e)}),F(Je);var et=V(Je,4),tt=z(et),nt=V(z(tt),2),rt=z(nt,!0);F(nt),F(tt);var it=V(tt,2),at=e=>{var i=jf(),a=z(i),o=V(z(a),2);{let e=I(()=>`--sf-switcher-threshold`in t.overrides);$(o,{label:`Threshold`,get value(){return U(k)},min:10,max:60,step:1,unit:`rem`,help:`--sf-switcher-threshold — width below which .sf-switcher stacks vertically`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-switcher-threshold`,`${e}rem`),onReset:()=>t.onReset(`--sf-switcher-threshold`)})}F(a);var s=V(a,2),c=V(z(s),2);{let e=I(()=>`--sf-sidebar-min-width`in t.overrides);$(c,{label:`Content min width`,get value(){return U(A)},min:20,max:80,step:1,unit:`%`,help:`--sf-sidebar-min-width — minimum width of the .sf-sidebar content column before it wraps`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-sidebar-min-width`,`${e}%`),onReset:()=>t.onReset(`--sf-sidebar-min-width`)})}F(s);var l=V(s,2);Y(V(z(l),2),16,()=>[{label:`Align`,token:`--sf-cluster-align`,def:`center`,opts:[`flex-start`,`center`,`flex-end`,`stretch`,`baseline`]},{label:`Justify`,token:`--sf-cluster-justify`,def:`flex-start`,opts:[`flex-start`,`center`,`flex-end`,`space-between`,`space-around`]}],e=>e.token,(e,n)=>{var i=kf(),a=z(i),o=z(a,!0);F(a);var s=V(a,2);Y(s,20,()=>n.opts,e=>e,(e,t)=>{var n=Df(),i=z(n,!0);F(n);var a={};H(()=>{Z(n,`background:${U(r)};`),q(i,t),a!==(a=t)&&(n.value=(n.__value=t)??``)}),K(e,n)}),F(s);var c;Di(s);var l=V(s,2),u=e=>{var r=Of();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(l,e=>{n.token in t.overrides&&e(u)}),F(i),H(()=>{q(o,n.label),c!==(c=t.overrides[n.token]??n.def)&&(s.value=(s.__value=t.overrides[n.token]??n.def)??``,Ei(s,t.overrides[n.token]??n.def))}),W(`change`,s,e=>{let r=e.target.value;r===n.def?t.onReset(n.token):t.onSet(n.token,r)}),K(e,i)}),F(l);var u=V(l,2),d=V(z(u),4);{let e=I(()=>`--sf-equal-min-col`in t.overrides);$(d,{label:`Min column width`,get value(){return U(ee)},min:6,max:36,step:.5,unit:`rem`,help:`--sf-equal-min-col — column-width floor for .sf-equal`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-equal-min-col`,`${e}rem`),onReset:()=>t.onReset(`--sf-equal-min-col`)})}var f=V(d,2);{let e=I(()=>`--sf-equal-rule-width`in t.overrides);$(f,{label:`Rule width`,get value(){return U(j)},min:0,max:4,step:.5,unit:`px`,help:`--sf-equal-rule-width — column-rule width between flowing columns, 0 = off`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-equal-rule-width`,`${e}px`),onReset:()=>t.onReset(`--sf-equal-rule-width`)})}var p=V(f,2),m=V(z(p),2);Y(m,20,()=>n,e=>e,(e,t)=>{var n=Df(),i=z(n,!0);F(n);var a={};H(()=>{Z(n,`background:${U(r)};`),q(i,t),a!==(a=t)&&(n.value=(n.__value=t)??``)}),K(e,n)}),F(m);var h;Di(m);var g=V(m,2),_=e=>{var n=Of();W(`click`,n,()=>t.onReset(`--sf-equal-rule-style`)),K(e,n)};J(g,e=>{`--sf-equal-rule-style`in t.overrides&&e(_)}),F(p);var v=V(p,2),y=V(z(v),2);{let e=I(()=>`--sf-equal-rule-color`in t.overrides);Au(y,{token:`--sf-equal-rule-color`,get value(){return U(te)},placeholder:`inherits border`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-equal-rule-color`,e),onReset:()=>t.onReset(`--sf-equal-rule-color`)})}F(v),F(u);var b=V(u,2),x=V(z(b),2);{let e=I(()=>`--sf-cover-min-height`in t.overrides);$(x,{label:`Min height`,get value(){return U(ne)},min:20,max:100,step:1,unit:`dvh`,help:`--sf-cover-min-height — minimum height of the .sf-cover layout`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-cover-min-height`,`${e}dvh`),onReset:()=>t.onReset(`--sf-cover-min-height`)})}F(b);var S=V(b,2),C=V(z(S),4);Y(C,20,()=>N,e=>e,(e,n)=>{var r=Af(),i=z(r,!0);F(r),H(e=>{X(r,1,e),q(i,n)},[()=>`py-1 rounded-lg text-[9px] border transition-all cursor-pointer font-mono ${U(oe).replace(/\s/g,``)===n.replace(/\s/g,``)?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`]),W(`click`,r,()=>n===`16 / 9`?t.onReset(`--sf-frame-ratio`):t.onSet(`--sf-frame-ratio`,n)),K(e,r)}),F(C),F(S);var w=V(S,2),T=V(z(w),4);Y(T,21,()=>ce,e=>e.value,(e,n)=>{var r=Af(),i=z(r,!0);F(r),H(()=>{X(r,1,`py-1 rounded-lg text-[9px] border transition-all cursor-pointer ${U(se)===U(n).value?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(i,U(n).label)}),W(`click`,r,()=>U(n).value===`max-content`?t.onReset(`--sf-reel-item-width`):t.onSet(`--sf-reel-item-width`,U(n).value)),K(e,r)}),F(T);var E=V(T,2),D=V(z(E),2);zi(D);var O=V(D,2),le=e=>{var n=Of();W(`click`,n,()=>t.onReset(`--sf-reel-height`)),K(e,n)};J(O,e=>{`--sf-reel-height`in t.overrides&&e(le)}),F(E),F(w);var ue=V(w,2),de=V(z(ue),2);{let e=I(()=>`--sf-imposter-margin`in t.overrides);$(de,{label:`Margin`,get value(){return U(M)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-imposter-margin — viewport inset for the centered .sf-imposter overlay`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-imposter-margin`,`${e}rem`),onReset:()=>t.onReset(`--sf-imposter-margin`),rawDefault:`var(--sf-space-m)`,get variableOptions(){return of},get currentRaw(){return t.overrides[`--sf-imposter-margin`]},onRawSet:e=>t.onSet(`--sf-imposter-margin`,e)})}F(ue);var fe=V(ue,2),pe=V(z(fe),2);{let e=I(()=>`--sf-content-width`in t.overrides);$(pe,{label:`Content width`,get value(){return U(ie)},min:40,max:120,step:1,unit:`rem`,help:`--sf-content-width — default reading column width in .sf-content-grid`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-content-width`,`${e}rem`),onReset:()=>t.onReset(`--sf-content-width`),rawDefault:`var(--sf-container-default)`,get variableOptions(){return lf},get currentRaw(){return t.overrides[`--sf-content-width`]},onRawSet:e=>t.onSet(`--sf-content-width`,e)})}var me=V(pe,2);{let e=I(()=>`--sf-breakout-width`in t.overrides);$(me,{label:`Breakout width`,get value(){return U(re)},min:50,max:160,step:1,unit:`rem`,help:`--sf-breakout-width — wide breakout column width in .sf-content-grid`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-breakout-width`,`${e}rem`),onReset:()=>t.onReset(`--sf-breakout-width`),rawDefault:`var(--sf-container-wide)`,get variableOptions(){return lf},get currentRaw(){return t.overrides[`--sf-breakout-width`]},onRawSet:e=>t.onSet(`--sf-breakout-width`,e)})}F(fe);var he=V(fe,2),ge=V(z(he),2);{let e=I(()=>`--sf-alternate-inner-gap`in t.overrides);$(ge,{label:`Inner gap`,get value(){return U(ae)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-alternate-inner-gap — gap between media and text within an .sf-alternate row`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-alternate-inner-gap`,`${e}rem`),onReset:()=>t.onReset(`--sf-alternate-inner-gap`),rawDefault:`var(--sf-gap)`,get variableOptions(){return of},get currentRaw(){return t.overrides[`--sf-alternate-inner-gap`]},onRawSet:e=>t.onSet(`--sf-alternate-inner-gap`,e)})}F(he),F(i),H(()=>{h!==(h=t.overrides[`--sf-equal-rule-style`]??`solid`)&&(m.value=(m.__value=t.overrides[`--sf-equal-rule-style`]??`solid`)??``,Ei(m,t.overrides[`--sf-equal-rule-style`]??`solid`)),Bi(D,t.overrides[`--sf-reel-height`]??``)}),W(`change`,m,e=>{let n=e.target.value;n===`solid`?t.onReset(`--sf-equal-rule-style`):t.onSet(`--sf-equal-rule-style`,n)}),W(`input`,D,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-reel-height`,n):t.onReset(`--sf-reel-height`)}),K(e,i)};J(it,e=>{U(T)&&e(at)}),F(et);var ot=V(et,4),st=z(ot),ct=V(z(st),2),lt=z(ct,!0);F(ct),F(st);var ut=V(st,2),dt=e=>{var n=Nf();Y(V(z(n),2),16,()=>[{label:`Square`,token:`--sf-ratio-square`,def:`1`},{label:`Portrait`,token:`--sf-ratio-portrait`,def:`3 / 4`},{label:`3:2`,token:`--sf-ratio-3-2`,def:`3 / 2`},{label:`4:3`,token:`--sf-ratio-4-3`,def:`4 / 3`},{label:`Video`,token:`--sf-ratio-video`,def:`16 / 9`},{label:`Cinema`,token:`--sf-ratio-cinema`,def:`21 / 9`},{label:`Golden`,token:`--sf-ratio-golden`,def:`1.618 / 1`}],e=>e.token,(e,n)=>{var r=Mf(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=Of();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.def)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),F(n),K(e,n)};J(ut,e=>{U(D)&&e(dt)}),F(ot);var ft=V(ot,4),pt=z(ft),mt=V(z(pt),2),ht=z(mt,!0);F(mt),F(pt);var gt=V(pt,2),_t=e=>{var n=Pf(),a=V(z(n),2);Y(a,16,()=>[{label:`Fit`,token:`--sf-bg-layer-fit`,placeholder:`cover`,opts:[`cover`,`contain`,`fill`,`none`,`scale-down`]},{label:`Position`,token:`--sf-bg-layer-position`,placeholder:`50% 50%`,opts:[`50% 50%`,`top`,`bottom`,`left`,`right`,`center`]}],e=>e.token,(e,n)=>{var i=kf(),a=z(i),o=z(a,!0);F(a);var s=V(a,2);Y(s,20,()=>n.opts,e=>e,(e,t)=>{var n=Df(),i=z(n,!0);F(n);var a={};H(()=>{Z(n,`background:${U(r)};`),q(i,t),a!==(a=t)&&(n.value=(n.__value=t)??``)}),K(e,n)}),F(s);var c;Di(s);var l=V(s,2),u=e=>{var r=Of();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(l,e=>{n.token in t.overrides&&e(u)}),F(i),H(()=>{q(o,n.label),c!==(c=t.overrides[n.token]??n.placeholder)&&(s.value=(s.__value=t.overrides[n.token]??n.placeholder)??``,Ei(s,t.overrides[n.token]??n.placeholder))}),W(`change`,s,e=>{let r=e.target.value;r===n.placeholder?t.onReset(n.token):t.onSet(n.token,r)}),K(e,i)});var o=V(a,2);{let e=I(()=>i(t.overrides[`--sf-bg-layer-inset`],0)),n=I(()=>`--sf-bg-layer-inset`in t.overrides);$(o,{label:`Inset`,get value(){return U(e)},min:0,max:4,step:.25,unit:`rem`,help:`--sf-bg-layer-inset — inset the background from the container edges`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-bg-layer-inset`,`${e}rem`),onReset:()=>t.onReset(`--sf-bg-layer-inset`)})}var s=V(o,2);{let e=I(()=>i(t.overrides[`--sf-bg-layer-radius`],0)),n=I(()=>`--sf-bg-layer-radius`in t.overrides);$(s,{label:`Radius`,get value(){return U(e)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-bg-layer-radius — corner radius of the background element`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-bg-layer-radius`,`${e}rem`),onReset:()=>t.onReset(`--sf-bg-layer-radius`)})}var c=V(s,2);{let e=I(()=>i(t.overrides[`--sf-bg-layer-z`],-2)),n=I(()=>`--sf-bg-layer-z`in t.overrides);$(c,{label:`Z-index`,get value(){return U(e)},min:-10,max:0,step:1,help:`--sf-bg-layer-z — stack order of the background pseudo-element (typically negative)`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-bg-layer-z`,String(e)),onReset:()=>t.onReset(`--sf-bg-layer-z`)})}F(n),K(e,n)};J(gt,e=>{U(E)&&e(_t)}),F(ft),F(le),H(()=>{Q(de,`aria-expanded`,U(v)),q(pe,U(v)?`▲`:`▼`),Q(_e,`aria-expanded`,U(y)),q(ye,U(y)?`▲`:`▼`),Q(Ce,`aria-expanded`,U(b)),q(Te,U(b)?`▲`:`▼`),Q(Oe,`aria-expanded`,U(x)),q(Ae,U(x)?`▲`:`▼`),Q(Fe,`aria-expanded`,U(S)),q(Le,U(S)?`▲`:`▼`),Q(Ve,`aria-expanded`,U(C)),q(Ge,U(C)?`▲`:`▼`),Q(Ye,`aria-expanded`,U(w)),q(Ze,U(w)?`▲`:`▼`),Q(tt,`aria-expanded`,U(T)),q(rt,U(T)?`▲`:`▼`),Q(st,`aria-expanded`,U(D)),q(lt,U(D)?`▲`:`▼`),Q(pt,`aria-expanded`,U(E)),q(ht,U(E)?`▲`:`▼`)}),W(`click`,de,()=>{R(v,!U(v))}),W(`click`,_e,()=>{R(y,!U(y))}),W(`click`,Ce,()=>{R(b,!U(b))}),W(`click`,Oe,()=>{R(x,!U(x))}),W(`click`,Fe,()=>{R(S,!U(S))}),W(`click`,Ve,()=>{R(C,!U(C))}),W(`click`,Ye,()=>{R(w,!U(w))}),W(`click`,tt,()=>{R(T,!U(T))}),W(`click`,st,()=>{R(D,!U(D))}),W(`click`,pt,()=>{R(E,!U(E))}),K(e,le),We()}Br([`click`,`change`,`input`]);var Lf=G(`

Drives --sf-color-border--strong, --subtle, --translucent automatically.

`,1),Rf=G(`
`),zf=G(`
`,1),Bf=G(``),Vf=G(`
`),Hf=G(`
Border sample
`,1),Uf=G(`
Color
`,1),Wf=G(`
Ring color
Focus preview
`,1),Gf=G(`
`),Kf=G(`
`),qf=G(`
`),Jf=G(`

--sf-media-radius — 0 by default (off). Rounds every <img>/<figure> globally via a + zero-specificity :where() rule; .sf-bg-layer and component-level radii still win.

`,1),Yf=G(`
`),Xf=G(`
`),Zf=G(`
Radius
`);function Qf(e,t){Ue(t,!0);let n=[`solid`,`dashed`,`dotted`],r=[`xs`,`s`,`m`,`l`,`xl`,`2xl`,`full`],i={xs:2,s:4,m:8,l:12,xl:16,"2xl":24,full:9999},a=[{step:`xs`,name:`--sf-radius-xs`,default:2,max:16,step_size:.5,rawDefault:`calc(2px * var(--sf-radius-scale))`},{step:`s`,name:`--sf-radius-s`,default:4,max:24,step_size:.5,rawDefault:`calc(4px * var(--sf-radius-scale))`},{step:`m`,name:`--sf-radius-m`,default:8,max:32,step_size:1,rawDefault:`calc(8px * var(--sf-radius-scale))`},{step:`l`,name:`--sf-radius-l`,default:12,max:48,step_size:1,rawDefault:`calc(12px * var(--sf-radius-scale))`},{step:`xl`,name:`--sf-radius-xl`,default:16,max:64,step_size:1,rawDefault:`calc(16px * var(--sf-radius-scale))`},{step:`2xl`,name:`--sf-radius-2xl`,default:24,max:80,step_size:2,rawDefault:`calc(24px * var(--sf-radius-scale))`}],o=[{label:`Field radius`,token:`--sf-field-radius`,unit:`rem`,min:0,max:2,step:.05,default:.5,rawDefault:`var(--sf-radius-m)`,help:`--sf-field-radius`,variableOptions:sf},{label:`Field padding block`,token:`--sf-field-padding-block`,unit:`rem`,min:0,max:1,step:.025,default:.375,rawDefault:`var(--sf-space-xs)`,help:`--sf-field-padding-block`,variableOptions:of},{label:`Field padding inline`,token:`--sf-field-padding-inline`,unit:`rem`,min:0,max:2,step:.025,default:.75,rawDefault:`var(--sf-space-s)`,help:`--sf-field-padding-inline`,variableOptions:of}],s=ql.borders??[],c=L(!1),l=L(!1),u=L(!1),d=L(!1),f=L(!1),p=L(!1),m=L(!1),h=L(!1),g=L(!1),_=L(!1);function v(e,t,n){if(!e)return t;let r=parseFloat(n?e.replace(n,``):e);return isNaN(r)?t:r}let y=I(()=>v(t.overrides[`--sf-radius-scale`],1)),b=I(()=>v(t.overrides[`--sf-border-scale`],1)),x=I(()=>v(t.overrides[`--sf-focus-ring-width`],2,`px`)),S=I(()=>v(t.overrides[`--sf-focus-ring-offset`],2,`px`)),C=I(()=>v(t.overrides[`--sf-divider-width`]?.replace(`px`,``),1)),w=I(()=>v(t.overrides[`--sf-divider-gap`]?.replace(`rem`,``),1)),T=I(()=>t.overrides[`--sf-color-border`]??``),E=I(()=>t.overrides[`--sf-border-style`]??`solid`),D=I(()=>t.overrides[`--sf-focus-ring-color`]??``),O=I(()=>t.overrides[`--sf-divider-color`]??``),k=I(()=>v(t.overrides[`--sf-media-radius`]?.replace(`rem`,``),0));function A(e,n){return t.overrides[e]??n}function ee(e){let n=t.overrides[e.name];if(!n||/^(var|calc|clamp)\(/.test(n.trim()))return e.default;let r=parseFloat(n);return isNaN(r)?e.default:r}function j(e){let n=t.overrides[e.token];if(!n||/^(var|calc|clamp)\(/.test(n.trim()))return e.default;let r=parseFloat(n);return isNaN(r)?e.default:r}var te=Zf(),ne=z(te),M=z(ne),re=V(z(M),2),ie=z(re,!0);F(re),F(M);var ae=V(M,2),oe=e=>{var n=Lf(),r=B(n);{let e=I(()=>`--sf-color-border`in t.overrides);Au(r,{token:`--sf-color-border`,get value(){return U(T)},placeholder:`auto-derived`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-color-border`,e),onReset:()=>t.onReset(`--sf-color-border`)})}Me(2),K(e,n)};J(ae,e=>{U(c)&&e(oe)}),F(ne);var se=V(ne,4),N=z(se),ce=V(z(N),2),le=z(ce,!0);F(ce),F(N);var ue=V(N,2),de=e=>{var n=zf(),r=B(n);{let e=I(()=>`--sf-border-scale`in t.overrides);$(r,{label:`Border scale`,get value(){return U(b)},min:0,max:4,step:.25,help:`Multiplier applied to all border widths. 0 hides all borders.`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-border-scale`,String(e)),onReset:()=>t.onReset(`--sf-border-scale`)})}var i=V(r,2);{let e=I(()=>v(t.overrides[`--sf-border-width-hairline`]?.replace(`px`,``),.5)),n=I(()=>`--sf-border-width-hairline`in t.overrides);$(i,{label:`Hairline`,get value(){return U(e)},min:0,max:1,step:.25,unit:`px`,help:`--sf-border-width-hairline — ultra-thin border for retina displays`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-border-width-hairline`,`${e}px`),onReset:()=>t.onReset(`--sf-border-width-hairline`)})}var a=V(i,2);{let e=I(()=>v(t.overrides[`--sf-box-border-width`]?.replace(`px`,``),0)),n=I(()=>`--sf-box-border-width`in t.overrides);$(a,{label:`Box border`,get value(){return U(e)},min:0,max:4,step:.5,unit:`px`,help:`--sf-box-border-width — box-shadow border drawn without affecting layout`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-box-border-width`,`${e}px`),onReset:()=>t.onReset(`--sf-box-border-width`)})}var o=V(a,2);Y(o,20,()=>[1,2,3,4],e=>e,(e,t)=>{var n=Rf(),r=z(n),i=z(r);F(r);var a=V(r,2),o=V(a,2),s=z(o);F(o),F(n),H((e,n)=>{q(i,`${t??``}px →`),Z(a,e),q(s,`${n??``}px`)},[()=>`height: ${Math.max(t*U(b),.5)}px`,()=>(t*U(b)).toFixed(1)]),K(e,n)}),F(o),K(e,n)};J(ue,e=>{U(l)&&e(de)}),F(se);var fe=V(se,4),pe=z(fe),me=V(z(pe),2),he=z(me,!0);F(me),F(pe);var ge=V(pe,2),_e=e=>{var r=Hf(),i=B(r);Y(i,20,()=>[{label:`Border`,token:`--sf-border-style`,default:`solid`},{label:`Divider`,token:`--sf-divider-style`,default:`solid`}],e=>e.token,(e,r)=>{var i=Vf(),a=z(i),o=z(a,!0);F(a);var s=V(a,2);Y(s,20,()=>n,e=>e,(e,n)=>{let i=I(()=>A(r.token,r.default));var a=Bf(),o=z(a),s=V(o);F(a),H(()=>{X(a,1,`px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer text-center ${U(i)===n?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),Z(o,`width: 20px; height: 0; border-bottom: 2px ${n} currentColor; opacity: 0.7`),q(s,` ${n??``}`)}),W(`click`,a,()=>n===r.default?t.onReset(r.token):t.onSet(r.token,n)),K(e,a)}),F(s),F(i),H(()=>q(o,r.label)),K(e,i)}),F(i);var a=V(i,2),o=z(a),s=V(o,2),c=z(s);F(s),F(a),H((e,t)=>{Z(o,e),q(c,`${t??``}px · ${U(E)??``}`)},[()=>`border: ${Math.max(U(b),.5)}px ${U(E)} ${U(T)||`var(--sf-color-border, #64748b)`}`,()=>(1*U(b)).toFixed(1)]),K(e,r)};J(ge,e=>{U(u)&&e(_e)}),F(fe);var ve=V(fe,4),ye=z(ve),be=V(z(ye),2),xe=z(be,!0);F(be),F(ye);var Se=V(ye,2),Ce=e=>{var n=Uf(),r=B(n),i=V(z(r),2);{let e=I(()=>`--sf-divider-color`in t.overrides);Au(i,{token:`--sf-divider-color`,get value(){return U(O)},placeholder:`inherits border`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-divider-color`,e),onReset:()=>t.onReset(`--sf-divider-color`)})}F(r);var a=V(r,2);{let e=I(()=>`--sf-divider-width`in t.overrides);$(a,{label:`Width`,get value(){return U(C)},min:.5,max:4,step:.5,unit:`px`,help:`--sf-divider-width`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-divider-width`,`${e}px`),onReset:()=>t.onReset(`--sf-divider-width`),rawDefault:`var(--sf-border-width-1)`,get variableOptions(){return cf},get currentRaw(){return t.overrides[`--sf-divider-width`]},onRawSet:e=>t.onSet(`--sf-divider-width`,e)})}var o=V(a,2);{let e=I(()=>`--sf-divider-gap`in t.overrides);$(o,{label:`Gap`,get value(){return U(w)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-divider-gap — spacing around divider lines`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-divider-gap`,`${e}rem`),onReset:()=>t.onReset(`--sf-divider-gap`),rawDefault:`var(--sf-space-m)`,get variableOptions(){return of},get currentRaw(){return t.overrides[`--sf-divider-gap`]},onRawSet:e=>t.onSet(`--sf-divider-gap`,e)})}K(e,n)};J(Se,e=>{U(d)&&e(Ce)}),F(ve);var we=V(ve,4),Te=z(we),Ee=V(z(Te),2),De=z(Ee,!0);F(Ee),F(Te);var P=V(Te,2),Oe=e=>{var n=Wf(),r=B(n);{let e=I(()=>`--sf-focus-ring-width`in t.overrides);$(r,{label:`Ring width`,get value(){return U(x)},min:0,max:6,step:.5,unit:`px`,help:`Thickness of the keyboard focus indicator`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-focus-ring-width`,`${e}px`),onReset:()=>t.onReset(`--sf-focus-ring-width`)})}var i=V(r,2);{let e=I(()=>`--sf-focus-ring-offset`in t.overrides);$(i,{label:`Ring offset`,get value(){return U(S)},min:0,max:8,step:.5,unit:`px`,help:`Gap between element edge and focus ring`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-focus-ring-offset`,`${e}px`),onReset:()=>t.onReset(`--sf-focus-ring-offset`)})}var a=V(i,2),o=V(z(a),2);{let e=I(()=>`--sf-focus-ring-color`in t.overrides);Au(o,{token:`--sf-focus-ring-color`,get value(){return U(D)},placeholder:`default (action)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-focus-ring-color`,e),onReset:()=>t.onReset(`--sf-focus-ring-color`)})}F(a);var s=V(a,2),c=z(s);F(s),H(()=>Z(c,`outline: ${U(x)}px solid ${U(D)||`oklch(0.7 0.2 235)`}; outline-offset: ${U(S)}px`)),K(e,n)};J(P,e=>{U(f)&&e(Oe)}),F(we);var ke=V(we,6),Ae=z(ke),je=V(z(Ae),2),Ne=z(je,!0);F(je),F(Ae);var Pe=V(Ae,2),Fe=e=>{var n=Gf();Y(n,21,()=>a,e=>e.name,(e,n)=>{{let r=I(()=>ee(U(n))),i=I(()=>U(n).name in t.overrides);$(e,{get label(){return U(n).step},get value(){return U(r)},min:0,get max(){return U(n).max},get step(){return U(n).step_size},unit:`px`,get overridden(){return U(i)},onChange:e=>t.onSet(U(n).name,`${e}px`),onReset:()=>t.onReset(U(n).name),get rawDefault(){return U(n).rawDefault},get currentRaw(){return t.overrides[U(n).name]},onRawSet:e=>t.onSet(U(n).name,e)})}}),F(n),K(e,n)};J(Pe,e=>{U(g)&&e(Fe)}),F(ke);var Ie=V(ke,2),Le=z(Ie),Re=V(z(Le),2),ze=z(Re,!0);F(Re),F(Le);var Be=V(Le,2),Ve=e=>{var t=qf(),n=z(t);Y(n,20,()=>r,e=>e,(e,t)=>{let n=I(()=>i[t]??6),r=I(()=>t===`full`?9999:U(n)*U(y));var a=Kf(),o=z(a),s=V(o,2),c=z(s,!0);F(s),F(a),H(e=>{Z(o,e),q(c,t)},[()=>`border-radius: ${Math.min(U(r),9999)}px`]),K(e,a)}),F(n),F(t),K(e,t)};J(Be,e=>{U(m)&&e(Ve)}),F(Ie);var He=V(Ie,4),Ge=z(He),Ke=V(z(Ge),2),qe=z(Ke,!0);F(Ke),F(Ge);var Je=V(Ge,2),Ye=e=>{var n=Jf(),r=V(B(n),2);{let e=I(()=>`--sf-media-radius`in t.overrides);$(r,{label:`Radius`,get value(){return U(k)},min:0,max:2,step:.05,unit:`rem`,help:`--sf-media-radius`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-media-radius`,`${e}rem`),onReset:()=>t.onReset(`--sf-media-radius`),rawDefault:`var(--sf-radius-m)`,get variableOptions(){return sf},get currentRaw(){return t.overrides[`--sf-media-radius`]},onRawSet:e=>t.onSet(`--sf-media-radius`,e)})}var i=V(r,2),a=z(i);F(i),H(()=>Z(a,`border-radius: ${U(k)}rem`)),K(e,n)};J(Je,e=>{U(h)&&e(Ye)}),F(He);var Xe=V(He,4),Ze=z(Xe),Qe=V(z(Ze),2),$e=z(Qe,!0);F(Qe),F(Ze);var et=V(Ze,2),tt=e=>{var n=Yf();Y(n,21,()=>o,e=>e.token,(e,n)=>{{let r=I(()=>j(U(n))),i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},get min(){return U(n).min},get max(){return U(n).max},get step(){return U(n).step},get unit(){return U(n).unit},get help(){return U(n).help},get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,`${e}${U(n).unit}`),onReset:()=>t.onReset(U(n).token),get rawDefault(){return U(n).rawDefault},get variableOptions(){return U(n).variableOptions},get currentRaw(){return t.overrides[U(n).token]},onRawSet:e=>t.onSet(U(n).token,e)})}}),F(n),K(e,n)};J(et,e=>{U(_)&&e(tt)}),F(Xe);var nt=V(Xe,4),rt=z(nt),it=V(z(rt),2),at=z(it,!0);F(it),F(rt);var ot=V(rt,2),st=e=>{var n=Xf();Y(n,21,()=>s,e=>e.name,(e,n)=>{du(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(n),K(e,n)};J(ot,e=>{U(p)&&e(st)}),F(nt),F(te),H(()=>{Q(M,`aria-expanded`,U(c)),q(ie,U(c)?`▲`:`▼`),Q(N,`aria-expanded`,U(l)),q(le,U(l)?`▲`:`▼`),Q(pe,`aria-expanded`,U(u)),q(he,U(u)?`▲`:`▼`),Q(ye,`aria-expanded`,U(d)),q(xe,U(d)?`▲`:`▼`),Q(Te,`aria-expanded`,U(f)),q(De,U(f)?`▲`:`▼`),Q(Ae,`aria-expanded`,U(g)),q(Ne,U(g)?`▲`:`▼`),Q(Le,`aria-expanded`,U(m)),q(ze,U(m)?`▲`:`▼`),Q(Ge,`aria-expanded`,U(h)),q(qe,U(h)?`▲`:`▼`),Q(Ze,`aria-expanded`,U(_)),q($e,U(_)?`▲`:`▼`),Q(rt,`aria-expanded`,U(p)),q(at,U(p)?`▲`:`▼`)}),W(`click`,M,()=>{R(c,!U(c))}),W(`click`,N,()=>{R(l,!U(l))}),W(`click`,pe,()=>{R(u,!U(u))}),W(`click`,ye,()=>{R(d,!U(d))}),W(`click`,Te,()=>{R(f,!U(f))}),W(`click`,Ae,()=>{R(g,!U(g))}),W(`click`,Le,()=>{R(m,!U(m))}),W(`click`,Ge,()=>{R(h,!U(h))}),W(`click`,Ze,()=>{R(_,!U(_))}),W(`click`,rt,()=>{R(p,!U(p))}),K(e,te),We()}Br([`click`]);var $f=G(`
`),ep=G(`
Shadow color

Warm, cool or brand-tinted shadows. Default uses neutral hue.

`),tp=G(`
Glow color

Which brand color radiates the glow. Defaults to primary.

`),np=G(`

Glow disabled.

`),rp=G(`
Shadow glow
Ambient glow on elevated surfaces
`,1),ip=G(`
`),ap=G(`
`);function op(e,t){Ue(t,!0);let n=[`xs`,`s`,`m`,`l`,`xl`,`2xl`],r=ql.shadows??[],i=I(()=>(()=>{let e=parseFloat(t.overrides[`--sf-shadow-lightness`]??`0.15`);return isFinite(e)?e:.15})()),a=I(()=>t.overrides[`--sf-shadow-color`]??``),o=I(()=>t.overrides[`--sf-shadow-glow-color`]??``),s=I(()=>t.overrides[`--sf-shadow-glow`]===`none`),c=L(!1),l=L(!1),u=L(!1);var d=ap(),f=z(d);Y(f,22,()=>n,e=>e,(e,t,n)=>{var r=$f(),i=z(r),a=V(i,2),o=z(a,!0);F(a),F(r),H(()=>{Z(i,`width: ${40+U(n)*4}px; height: ${40+U(n)*4}px; box-shadow: var(--sf-shadow-${t})`),q(o,t)}),K(e,r)}),F(f);var p=V(f,4);{let e=I(()=>`--sf-shadow-lightness`in t.overrides);$(p,{label:`Shadow lightness`,get value(){return U(i)},min:0,max:.5,step:.01,help:`--sf-shadow-lightness — OKLCH lightness of the shadow color. Lower = darker, more visible shadows.`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-shadow-lightness`,String(e)),onReset:()=>t.onReset(`--sf-shadow-lightness`)})}var m=V(p,4),h=z(m),g=V(z(h),2),_=z(g,!0);F(g),F(h);var v=V(h,2),y=e=>{var n=ep(),r=V(z(n),2);{let e=I(()=>`--sf-shadow-color`in t.overrides);Au(r,{token:`--sf-shadow-color`,get value(){return U(a)},placeholder:`auto (neutral hue)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-shadow-color`,e),onReset:()=>t.onReset(`--sf-shadow-color`)})}Me(2),F(n),K(e,n)};J(v,e=>{U(c)&&e(y)}),F(m);var b=V(m,4),x=z(b),S=V(z(x),2),C=z(S,!0);F(S),F(x);var w=V(x,2),T=e=>{var n=rp(),r=B(n),i=V(z(r),2),a=z(i);F(i),F(r);var c=V(r,2),l=e=>{var n=tp(),r=V(z(n),2);{let e=I(()=>`--sf-shadow-glow-color`in t.overrides);Au(r,{token:`--sf-shadow-glow-color`,get value(){return U(o)},placeholder:`default (primary color)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-shadow-glow-color`,e),onReset:()=>t.onReset(`--sf-shadow-glow-color`)})}Me(2),F(n),K(e,n)};J(c,e=>{U(s)||e(l)});var u=V(c,2),d=z(u);F(u);var f=V(u,2),p=e=>{K(e,np())};J(f,e=>{U(s)&&e(p)}),H(()=>{Q(i,`aria-label`,U(s)?`Enable shadow glow`:`Disable shadow glow`),X(i,1,`w-9 h-5 rounded-full transition-colors relative cursor-pointer ${U(s)?`bg-black/10 dark:bg-white/10`:`bg-indigo-600`}`),X(a,1,`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${U(s)?`translate-x-0.5`:`translate-x-4`}`),Z(d,`box-shadow: ${U(s)?`none`:`var(--sf-shadow-glow)`}`)}),W(`click`,i,()=>{U(s)?t.onReset(`--sf-shadow-glow`):t.onSet(`--sf-shadow-glow`,`none`)}),K(e,n)};J(w,e=>{U(l)&&e(T)}),F(b);var E=V(b,4),D=z(E),O=V(z(D),2),k=z(O,!0);F(O),F(D);var A=V(D,2),ee=e=>{var n=ip();Y(n,21,()=>r,e=>e.name,(e,n)=>{du(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(n),K(e,n)};J(A,e=>{U(u)&&e(ee)}),F(E),F(d),H(()=>{Q(h,`aria-expanded`,U(c)),q(_,U(c)?`▲`:`▼`),Q(x,`aria-expanded`,U(l)),q(C,U(l)?`▲`:`▼`),Q(D,`aria-expanded`,U(u)),q(k,U(u)?`▲`:`▼`)}),W(`click`,h,()=>{R(c,!U(c))}),W(`click`,x,()=>{R(l,!U(l))}),W(`click`,D,()=>{R(u,!U(u))}),K(e,d),We()}Br([`click`]);var sp=G(`

Motion is disabled — duration & easing have no effect while scale is 0.

`),cp=G(``),lp=G(`(No effect while motion is disabled.)`),up=G(`
`),dp=G(`

Named duration tokens. Drag to set an absolute ms value, overriding the global scale.

`,1),fp=G(``),pp=G(`
`),mp=G(`

Edit the named easing tokens. Accepts any CSS timing function — cubic-bezier(…) or linear(…). Use “Live preview” above to feel a curve.

`,1),hp=G(``),gp=G(`
`),_p=G(`

One slider sets all five stagger delays (delay-1 through delay-5 are multiples of this base).

Stagger base
`,1),vp=G(``),yp=G(`
`),bp=G(`

Default animation-range for scroll-driven animations using the .sf-entrance--* / .sf-exit--* macros.

`,1),xp=G(`
Disable motion
Respects prefers-reduced-motion
Live preview
`);function Sp(e,t){Ue(t,!0);let n=I(()=>qo.value===`dark`?`#16161e`:`#ffffff`),r=[{label:`Instant`,token:`--sf-duration-instant`,base:100,max:300},{label:`Fast`,token:`--sf-duration-fast`,base:150,max:500},{label:`Normal`,token:`--sf-duration-normal`,base:250,max:800},{label:`Slow`,token:`--sf-duration-slow`,base:400,max:1200},{label:`Slower`,token:`--sf-duration-slower`,base:600,max:2e3}],i=[{label:`Linear`,token:`--sf-ease-linear`,value:`linear`,preview:`M0,40 L40,0`},{label:`Ease out`,token:`--sf-ease-out`,value:`cubic-bezier(0.25, 0, 0.15, 1)`,preview:`M0,40 C8,40 28,0 40,0`},{label:`Ease in`,token:`--sf-ease-in`,value:`cubic-bezier(0.5, 0, 0.75, 0.25)`,preview:`M0,40 C12,40 32,32 40,0`},{label:`Ease in-out`,token:`--sf-ease-in-out`,value:`cubic-bezier(0.4, 0, 0.2, 1)`,preview:`M0,40 C8,40 32,0 40,0`},{label:`Spring`,token:`--sf-ease-spring`,value:`linear(0, 0.5, 1.1, 0.95, 1.02, 1)`,preview:`M0,40 C10,20 20,-4 28,-2 S38,2 40,0`},{label:`Bounce`,token:`--sf-ease-bounce`,value:`linear(0, 0.35 18%, 1 32%, 0.86 42%, 1.02 56%, 0.98 72%, 1)`,preview:`M0,40 L12,16 L20,0 L26,6 L32,-1 L36,1 L40,0`},{label:`Elastic`,token:`--sf-ease-elastic`,value:`linear(0, 0.3, 1.2, 0.9, 1.05, 1)`,preview:`M0,40 C8,40 16,-10 24,-2 S36,2 40,0`},{label:`Overshoot`,token:`--sf-ease-overshoot`,value:`linear(0, 0.6 30%, 1.08 55%, 0.98 75%, 1)`,preview:`M0,40 C8,40 20,-10 40,0`}],a=[`--sf-animation-delay-1`,`--sf-animation-delay-2`,`--sf-animation-delay-3`,`--sf-animation-delay-4`,`--sf-animation-delay-5`],o=ql.motion??[],s=I(()=>(()=>{let e=parseFloat(t.overrides[`--sf-motion-scale`]??`1`);return isFinite(e)?e:1})()),c=I(()=>t.overrides[`--sf-motion-scale`]===`0`),l=I(()=>(()=>{let e=parseFloat(t.overrides[`--sf-theme-transition-duration`]?.replace(`ms`,``)??String(300*U(s)));return isFinite(e)?e:Math.round(300*U(s))})()),u=I(()=>{let e=t.overrides[a[0]];return e?parseFloat(e.replace(`ms`,``)):75*U(s)}),d=L(!1),f=L(0),p=L(`--sf-ease-out`),m=L(`--sf-duration-normal`),h=L(!1),g=L(!1),_=L(!1),v=L(!1);function y(e,n){let r=t.overrides[e];if(r){let e=parseFloat(r);if(isFinite(e))return e}return Math.round(n*U(s))}function b(e){return t.overrides[e]??i.find(t=>t.token===e)?.value??`ease`}function x(){if(U(d))return;let e=r.find(e=>e.token===U(m))?.base??250,t=y(U(m),e);R(d,!0),R(f,180),setTimeout(()=>{R(f,0),setTimeout(()=>{R(d,!1)},t)},t)}function S(e){let n={};for(let t=1;t<=5;t++)n[`--sf-animation-delay-${t}`]=`${Math.round(e*t)}ms`;t.onBulkChange(n)}function C(){let e={};for(let t=1;t<=5;t++)e[`--sf-animation-delay-${t}`]=null;t.onBulkChange(e)}var w=xp(),T=z(w),E=V(z(T),2),D=z(E);F(E),F(T);var O=V(T,2),k=e=>{K(e,sp())};J(O,e=>{U(c)&&e(k)});var A=V(O,2),ee=V(z(A),2),j=z(ee),te=z(j);F(j);var ne=V(j,2),M=z(ne);Y(M,21,()=>i,e=>e.token,(e,t)=>{var r=cp(),i=z(r,!0);F(r);var a={};H(()=>{Z(r,`background:${U(n)};`),q(i,U(t).label),a!==(a=U(t).token)&&(r.value=(r.__value=U(t).token)??``)}),K(e,r)}),F(M);var re;Di(M);var ie=V(M,2);Y(ie,21,()=>r,e=>e.token,(e,t)=>{var r=cp(),i=z(r,!0);F(r);var a={};H(()=>{Z(r,`background:${U(n)};`),q(i,U(t).label),a!==(a=U(t).token)&&(r.value=(r.__value=U(t).token)??``)}),K(e,r)}),F(ie);var ae;Di(ie);var oe=V(ie,2),se=z(oe,!0);F(oe),F(ne),F(ee),F(A);var N=V(A,4),ce=z(N),le=V(z(ce),2),ue=z(le,!0);F(le),F(ce);var de=V(ce,2),fe=e=>{var n=dp(),i=B(n),a=V(z(i)),o=e=>{K(e,lp())};J(a,e=>{U(c)&&e(o)}),F(i);var s=V(i,2);Y(s,17,()=>r,e=>e.token,(e,n)=>{let r=I(()=>y(U(n).token,U(n).base));{let i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:0,get max(){return U(n).max},step:10,unit:`ms`,get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,`${e}ms`),onReset:()=>t.onReset(U(n).token)})}});var l=V(s,2);Y(l,21,()=>r,e=>e.label,(e,t)=>{let n=I(()=>y(U(t).token,U(t).base));var r=up(),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o);F(o);var c=V(o,2),l=z(c);F(c),F(r),H(e=>{q(a,U(t).label),Z(s,e),q(l,`${U(n)??``}ms`)},[()=>`width: ${Math.min(U(n)/1200*100,100)}%`]),K(e,r)}),F(l),K(e,n)};J(de,e=>{U(h)&&e(fe)}),F(N);var pe=V(N,4),me=z(pe),he=V(z(me),2),ge=z(he,!0);F(he),F(me);var _e=V(me,2),ve=e=>{var n=mp(),r=V(B(n),2);Y(r,21,()=>i,e=>e.token,(e,n)=>{let r=I(()=>U(n).token in t.overrides);var i=pp(),a=z(i),o=z(a),s=z(o);F(o);var c=V(o,2),l=z(c),u=z(l),d=z(u,!0);F(u);var f=V(u,2),m=z(f),h=V(m,2),g=e=>{var r=fp();W(`click`,r,()=>t.onReset(U(n).token)),K(e,r)};J(h,e=>{U(r)&&e(g)}),F(f),F(l);var _=V(l,2);zi(_),F(c),F(a),F(i),H(()=>{X(i,1,`p-2.5 rounded-xl border transition-all ${U(r)?`bg-indigo-500/10 border-indigo-500/30`:`border-black/8 dark:border-white/8 bg-black/3 dark:bg-white/3`}`),Q(s,`d`,U(n).preview),q(d,U(n).label),Bi(_,t.overrides[U(n).token]??``),Q(_,`placeholder`,U(n).value)}),W(`click`,m,()=>{R(p,U(n).token,!0),x()}),W(`input`,_,e=>{let r=e.target.value.trim();r?t.onSet(U(n).token,r):t.onReset(U(n).token)}),K(e,i)}),F(r),K(e,n)};J(_e,e=>{U(g)&&e(ve)}),F(pe);var ye=V(pe,4),be=z(ye),xe=V(z(be),2),Se=z(xe,!0);F(xe),F(be);var Ce=V(be,2),we=e=>{var n=_p(),r=V(B(n),2),i=z(r),o=V(z(i),2),s=e=>{var t=hp();W(`click`,t,C),K(e,t)},c=I(()=>a.some(e=>e in t.overrides));J(o,e=>{U(c)&&e(s)}),F(i);var l=V(i,2);{let e=I(()=>Math.round(U(u))),n=I(()=>a.some(e=>e in t.overrides));$(l,{label:``,get value(){return U(e)},min:0,max:200,step:5,unit:`ms`,help:`Base unit for --sf-animation-delay-1 through -5`,get overridden(){return U(n)},onChange:e=>S(e),onReset:C})}F(r);var d=V(r,2);Y(d,20,()=>[1,2,3,4,5],e=>e,(e,t)=>{let n=I(()=>Math.round(U(u)*t));var r=gp(),i=z(r),a=z(i);F(i);var o=V(i,2),s=z(o);F(o);var c=V(o,2),l=z(c);F(c),F(r),H(e=>{q(a,`–${t??``}`),Z(s,e),q(l,`${U(n)??``}ms`)},[()=>`width: ${Math.min(U(n)/600*100,100)}%`]),K(e,r)}),F(d),K(e,n)};J(Ce,e=>{U(_)&&e(we)}),F(ye);var Te=V(ye,4),Ee=z(Te),De=V(z(Ee),2),P=z(De,!0);F(De),F(Ee);var Oe=V(Ee,2),ke=e=>{var n=bp(),r=B(n);Y(r,21,()=>o,e=>e.name,(e,n)=>{du(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(r);var i=V(r,2);{let e=I(()=>`--sf-theme-transition-duration`in t.overrides);$(i,{label:`Theme switch speed`,get value(){return U(l)},min:0,max:600,step:10,unit:`ms`,help:`--sf-theme-transition-duration — dark/light color-scheme switch animation speed`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-theme-transition-duration`,`${e}ms`),onReset:()=>t.onReset(`--sf-theme-transition-duration`)})}var a=V(i,2);Y(V(z(a),2),16,()=>[{label:`Entry start`,token:`--sf-scroll-timeline-range-start`,placeholder:`entry 0%`},{label:`Entry end`,token:`--sf-scroll-timeline-range-end`,placeholder:`cover 30%`},{label:`Exit start`,token:`--sf-scroll-timeline-range-exit-start`,placeholder:`cover 70%`},{label:`Exit end`,token:`--sf-scroll-timeline-range-exit-end`,placeholder:`exit 100%`}],e=>e.token,(e,n)=>{var r=yp(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=vp();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.placeholder)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),F(a),K(e,n)};J(Oe,e=>{U(v)&&e(ke)}),F(Te),F(w),H(e=>{Q(E,`title`,U(c)?`Enable motion`:`Disable motion`),X(E,1,`w-9 h-5 rounded-full transition-colors relative cursor-pointer ${U(c)?`bg-indigo-600`:`bg-black/10 dark:bg-white/10`}`),X(D,1,`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${U(c)?`translate-x-4`:`translate-x-0.5`}`),Z(te,e),re!==(re=U(p))&&(M.value=(M.__value=U(p))??``,Ei(M,U(p))),ae!==(ae=U(m))&&(ie.value=(ie.__value=U(m))??``,Ei(ie,U(m))),oe.disabled=U(d),q(se,U(d)?`…`:`▶ Play`),Q(ce,`aria-expanded`,U(h)),q(ue,U(h)?`▲`:`▼`),Q(me,`aria-expanded`,U(g)),q(ge,U(g)?`▲`:`▼`),Q(be,`aria-expanded`,U(_)),q(Se,U(_)?`▲`:`▼`),Q(Ee,`aria-expanded`,U(v)),q(P,U(v)?`▲`:`▼`)},[()=>`transform: translateX(${U(f)}px); transition: transform ${y(U(m),r.find(e=>e.token===U(m))?.base??250)}ms ${b(U(p))}`]),W(`click`,E,()=>{U(c)?t.onReset(`--sf-motion-scale`):t.onSet(`--sf-motion-scale`,`0`)}),W(`change`,M,e=>{R(p,e.target.value,!0)}),W(`change`,ie,e=>{R(m,e.target.value,!0)}),W(`click`,oe,x),W(`click`,ce,()=>{R(h,!U(h))}),W(`click`,me,()=>{R(g,!U(g))}),W(`click`,be,()=>{R(_,!U(_))}),W(`click`,Ee,()=>{R(v,!U(v))}),K(e,w),We()}Br([`click`,`change`,`input`]);var Cp=G(`
`),wp=G(`
`,1),Tp=G(`
`),Ep=G(`
`,1),Dp=G(``),Op=G(`

Gradient overlay for hero images and media content. Used by the .sf-scrim macro.

Color
Direction
Scrim preview
`,1),kp=G(`
`),Ap=G(`
Scrollbar preview
`,1),jp=G(``),Mp=G(`
`),Np=G(`

Controls text legibility over images. Applied via text-shadow: var(--sf-text-shadow-m). Edit each token directly — use none to disable.

`,1),Pp=G(`
`),Fp=G(`

filter: drop-shadow(…) — unlike box-shadow, follows the element's actual alpha shape (SVG icons, PNG cutouts, transparent logos). Edit each token directly — - use none to disable.

`,1),Ip=G(`
`);function Lp(e,t){Ue(t,!0);let n=[{label:`To top`,value:`to top`},{label:`To bottom`,value:`to bottom`},{label:`To left`,value:`to left`},{label:`To right`,value:`to right`}],r=[{label:`Extra small`,token:`--sf-text-shadow-xs`,default:`0 0.5px 1px oklch(…)`},{label:`Small`,token:`--sf-text-shadow-s`,default:`0 1px 2px oklch(…)`},{label:`Medium`,token:`--sf-text-shadow-m`,default:`0 2px 4px oklch(…)`},{label:`Large`,token:`--sf-text-shadow-l`,default:`0 4px 8px oklch(…)`},{label:`Extra large`,token:`--sf-text-shadow-xl`,default:`0 8px 16px oklch(…)`}],i=[`xs`,`s`,`m`,`l`,`xl`];function a(e,t,n){if(!e)return t;let r=parseFloat(n?e.replace(n,``):e);return isNaN(r)?t:r}let o=I(()=>a(t.overrides[`--sf-blur`],12,`px`)),s=I(()=>a(t.overrides[`--sf-opacity-muted`],.5)),c=I(()=>a(t.overrides[`--sf-opacity-disabled`],.45)),l=I(()=>t.overrides[`--sf-scrim-direction`]??`to top`),u=I(()=>t.overrides[`--sf-scrim-color`]??``),d=I(()=>a(t.overrides[`--sf-scroll-shadow-size`]?.replace(`rem`,``),2)),f=I(()=>a(t.overrides[`--sf-state-pending-opacity`],.7)),p=I(()=>t.overrides[`--sf-scrollbar-thumb`]??``),m=I(()=>t.overrides[`--sf-scrollbar-track`]??``),h=L(!1),g=L(!1),_=L(!1),v=L(!1),y=L(!1),b=L(!1),x=L(!1);var S=Ip(),C=z(S),w=z(C),T=V(z(w),2),E=z(T,!0);F(T),F(w);var D=V(w,2),O=e=>{var n=wp(),r=B(n);{let e=I(()=>`--sf-blur`in t.overrides);$(r,{label:`Blur radius`,get value(){return U(o)},min:0,max:48,step:1,unit:`px`,help:`--sf-blur — used for frosted glass, modals, tooltips`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-blur`,`${e}px`),onReset:()=>t.onReset(`--sf-blur`)})}var i=V(r,2),a=z(i);Y(a,20,()=>Array.from({length:12}),ii,(e,t,n)=>{var r=Cp();X(r,1,yi(n%3==0?`bg-indigo-500/50`:n%3==1?`bg-purple-500/40`:`bg-blue-500/30`)),K(e,r)}),F(a);var s=V(a,2),c=z(s),l=z(c);F(c),F(s),F(i),H(()=>{Z(s,`backdrop-filter: blur(${U(o)}px)`),q(l,`${U(o)??``}px`)}),K(e,n)};J(D,e=>{U(h)&&e(O)}),F(C);var k=V(C,4),A=z(k),ee=V(z(A),2),te=z(ee,!0);F(ee),F(A);var j=V(A,2),ne=e=>{var n=Ep(),r=B(n);{let e=I(()=>`--sf-opacity-muted`in t.overrides);$(r,{label:`Muted opacity`,get value(){return U(s)},min:0,max:1,step:.05,help:`--sf-opacity-muted — secondary text, icons, and placeholder content`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-opacity-muted`,String(e)),onReset:()=>t.onReset(`--sf-opacity-muted`)})}var i=V(r,2);{let e=I(()=>`--sf-opacity-disabled`in t.overrides);$(i,{label:`Disabled opacity`,get value(){return U(c)},min:0,max:1,step:.05,help:`--sf-opacity-disabled — disabled form controls and interactive elements`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-opacity-disabled`,String(e)),onReset:()=>t.onReset(`--sf-opacity-disabled`)})}var a=V(i,2);{let e=I(()=>`--sf-state-pending-opacity`in t.overrides);$(a,{label:`Pending opacity`,get value(){return U(f)},min:.1,max:1,step:.05,help:`--sf-state-pending-opacity — opacity of elements in loading/pending state`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-state-pending-opacity`,String(e)),onReset:()=>t.onReset(`--sf-state-pending-opacity`)})}var o=V(a,2);Y(o,21,()=>[{label:`muted`,val:U(s)},{label:`disabled`,val:U(c)},{label:`pending`,val:U(f)}],e=>e.label,(e,t)=>{var n=Tp(),r=z(n),i=z(r,!0);F(r);var a=V(r,2),o=V(a,2),s=z(o,!0);F(o),F(n),H(()=>{q(i,U(t).label),Z(a,`opacity: ${U(t).val}`),q(s,U(t).val)}),K(e,n)}),F(o),K(e,n)};J(j,e=>{U(g)&&e(ne)}),F(k);var M=V(k,4),re=z(M),ie=V(z(re),2),ae=z(ie,!0);F(ie),F(re);var oe=V(re,2),se=e=>{var r=Op(),i=V(B(r),2),a=V(z(i),2);{let e=I(()=>`--sf-scrim-color`in t.overrides);Au(a,{token:`--sf-scrim-color`,get value(){return U(u)},placeholder:`default (base color)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-scrim-color`,e),onReset:()=>t.onReset(`--sf-scrim-color`)})}F(i);var o=V(i,2),s=V(z(o),2);Y(s,21,()=>n,e=>e.value,(e,n)=>{var r=Dp(),i=z(r,!0);F(r),H(()=>{X(r,1,`py-2 px-3 rounded-lg text-[10px] border transition-all cursor-pointer text-left ${U(l)===U(n).value?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(i,U(n).label)}),W(`click`,r,()=>U(n).value===`to top`?t.onReset(`--sf-scrim-direction`):t.onSet(`--sf-scrim-direction`,U(n).value)),K(e,r)}),F(s),F(o);var c=V(o,2),d=z(c),f=z(d);Me(2),F(d),F(c),H(()=>Z(f,`background: linear-gradient(${U(l)}, ${U(u)||`oklch(0 0 0 / 0.6)`}, transparent)`)),K(e,r)};J(oe,e=>{U(_)&&e(se)}),F(M);var N=V(M,4),ce=z(N),le=V(z(ce),2),ue=z(le,!0);F(le),F(ce);var de=V(ce,2),fe=e=>{var n=Ap(),r=B(n);Y(r,17,()=>[{label:`Thumb color`,token:`--sf-scrollbar-thumb`,val:U(p)},{label:`Track color`,token:`--sf-scrollbar-track`,val:U(m)}],e=>e.token,(e,n)=>{var r=kp(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);{let e=I(()=>U(n).token in t.overrides);Au(o,{get token(){return U(n).token},get value(){return U(n).val},placeholder:`default`,get isOverridden(){return U(e)},onSet:e=>t.onSet(U(n).token,e),onReset:()=>t.onReset(U(n).token)})}F(r),H(()=>q(a,U(n).label)),K(e,r)});var i=V(r,2),a=z(i);let o;var s=z(a);let c;F(a),Me(2),F(i),H(()=>{o=Z(a,``,o,{background:U(m)||`rgba(255,255,255,0.08)`}),c=Z(s,``,c,{background:U(p)||`oklch(0.52 0.025 260)`})}),K(e,n)};J(de,e=>{U(v)&&e(fe)}),F(N);var pe=V(N,4),me=z(pe),he=V(z(me),2),ge=z(he,!0);F(he),F(me);var _e=V(me,2),ve=e=>{{let n=I(()=>`--sf-scroll-shadow-size`in t.overrides);$(e,{label:`Shadow size`,get value(){return U(d)},min:0,max:6,step:.25,unit:`rem`,help:`--sf-scroll-shadow-size — gradient edge mask on .sf-scroll-shadow elements`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-scroll-shadow-size`,`${e}rem`),onReset:()=>t.onReset(`--sf-scroll-shadow-size`)})}};J(_e,e=>{U(y)&&e(ve)}),F(pe);var ye=V(pe,4),be=z(ye),xe=V(z(be),2),Se=z(xe,!0);F(xe),F(be);var Ce=V(be,2),we=e=>{var n=Np(),i=V(B(n),2);Y(i,21,()=>r,e=>e.token,(e,n)=>{var r=Mp(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=jp();W(`click`,r,()=>t.onReset(U(n).token)),K(e,r)};J(s,e=>{U(n).token in t.overrides&&e(c)}),F(r),H(()=>{q(a,U(n).label),Bi(o,t.overrides[U(n).token]??``),Q(o,`placeholder`,U(n).default)}),W(`input`,o,e=>{let r=e.target.value;r.trim()?t.onSet(U(n).token,r):t.onReset(U(n).token)}),K(e,r)}),F(i),K(e,n)};J(Ce,e=>{U(b)&&e(we)}),F(ye);var Te=V(ye,4),Ee=z(Te),De=V(z(Ee),2),P=z(De,!0);F(De),F(Ee);var Oe=V(Ee,2),ke=e=>{var n=Fp(),r=V(B(n),2);Y(r,20,()=>[{label:`Extra small`,token:`--sf-drop-shadow-xs`,default:`drop-shadow(0 0.5px 1px oklch(…))`},{label:`Small`,token:`--sf-drop-shadow-s`,default:`drop-shadow(0 1px 2px oklch(…))`},{label:`Medium`,token:`--sf-drop-shadow-m`,default:`drop-shadow(0 4px 6px oklch(…))`},{label:`Large`,token:`--sf-drop-shadow-l`,default:`drop-shadow(0 8px 16px oklch(…))`},{label:`Extra large`,token:`--sf-drop-shadow-xl`,default:`drop-shadow(0 16px 32px oklch(…))`}],e=>e.token,(e,n)=>{var r=Mp(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=jp();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.default)}),W(`input`,o,e=>{let r=e.target.value;r.trim()?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),F(r);var a=V(r,2);Y(a,20,()=>i,e=>e,(e,t)=>{var n=Pp(),r=z(n),i=V(r,2),a=z(i,!0);F(i),F(n),H(()=>{X(r,0,`sf-drop-shadow-${t}`),q(a,t)}),K(e,n)}),F(a),K(e,n)};J(Oe,e=>{U(x)&&e(ke)}),F(Te),F(S),H(()=>{Q(w,`aria-expanded`,U(h)),q(E,U(h)?`▲`:`▼`),Q(A,`aria-expanded`,U(g)),q(te,U(g)?`▲`:`▼`),Q(re,`aria-expanded`,U(_)),q(ae,U(_)?`▲`:`▼`),Q(ce,`aria-expanded`,U(v)),q(ue,U(v)?`▲`:`▼`),Q(me,`aria-expanded`,U(y)),q(ge,U(y)?`▲`:`▼`),Q(be,`aria-expanded`,U(b)),q(Se,U(b)?`▲`:`▼`),Q(Ee,`aria-expanded`,U(x)),q(P,U(x)?`▲`:`▼`)}),W(`click`,w,()=>{R(h,!U(h))}),W(`click`,A,()=>{R(g,!U(g))}),W(`click`,re,()=>{R(_,!U(_))}),W(`click`,ce,()=>{R(v,!U(v))}),W(`click`,me,()=>{R(y,!U(y))}),W(`click`,be,()=>{R(b,!U(b))}),W(`click`,Ee,()=>{R(x,!U(x))}),K(e,S),We()}Br([`click`,`input`]);var Rp=G(`
`),zp=G(`
`,1),Bp=G(`

SLASHED is a token-first CSS framework. This sample paragraph repeats so you + use none to disable.

`,1),Ip=G(`
`);function Lp(e,t){Ue(t,!0);let n=[{label:`To top`,value:`to top`},{label:`To bottom`,value:`to bottom`},{label:`To left`,value:`to left`},{label:`To right`,value:`to right`}],r=[{label:`Extra small`,token:`--sf-text-shadow-xs`,default:`0 0.5px 1px oklch(…)`},{label:`Small`,token:`--sf-text-shadow-s`,default:`0 1px 2px oklch(…)`},{label:`Medium`,token:`--sf-text-shadow-m`,default:`0 2px 4px oklch(…)`},{label:`Large`,token:`--sf-text-shadow-l`,default:`0 4px 8px oklch(…)`},{label:`Extra large`,token:`--sf-text-shadow-xl`,default:`0 8px 16px oklch(…)`}],i=[`xs`,`s`,`m`,`l`,`xl`];function a(e,t,n){if(!e)return t;let r=parseFloat(n?e.replace(n,``):e);return isNaN(r)?t:r}let o=I(()=>a(t.overrides[`--sf-blur`],12,`px`)),s=I(()=>a(t.overrides[`--sf-opacity-muted`],.5)),c=I(()=>a(t.overrides[`--sf-opacity-disabled`],.45)),l=I(()=>t.overrides[`--sf-scrim-direction`]??`to top`),u=I(()=>t.overrides[`--sf-scrim-color`]??``),d=I(()=>a(t.overrides[`--sf-scroll-shadow-size`]?.replace(`rem`,``),2)),f=I(()=>a(t.overrides[`--sf-state-pending-opacity`],.7)),p=I(()=>t.overrides[`--sf-scrollbar-thumb`]??``),m=I(()=>t.overrides[`--sf-scrollbar-track`]??``),h=L(!1),g=L(!1),_=L(!1),v=L(!1),y=L(!1),b=L(!1),x=L(!1);var S=Ip(),C=z(S),w=z(C),T=V(z(w),2),E=z(T,!0);F(T),F(w);var D=V(w,2),O=e=>{var n=wp(),r=B(n);{let e=I(()=>`--sf-blur`in t.overrides);$(r,{label:`Blur radius`,get value(){return U(o)},min:0,max:48,step:1,unit:`px`,help:`--sf-blur — used for frosted glass, modals, tooltips`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-blur`,`${e}px`),onReset:()=>t.onReset(`--sf-blur`)})}var i=V(r,2),a=z(i);Y(a,20,()=>Array.from({length:12}),ii,(e,t,n)=>{var r=Cp();X(r,1,yi(n%3==0?`bg-indigo-500/50`:n%3==1?`bg-purple-500/40`:`bg-blue-500/30`)),K(e,r)}),F(a);var s=V(a,2),c=z(s),l=z(c);F(c),F(s),F(i),H(()=>{Z(s,`backdrop-filter: blur(${U(o)}px)`),q(l,`${U(o)??``}px`)}),K(e,n)};J(D,e=>{U(h)&&e(O)}),F(C);var k=V(C,4),A=z(k),ee=V(z(A),2),j=z(ee,!0);F(ee),F(A);var te=V(A,2),ne=e=>{var n=Ep(),r=B(n);{let e=I(()=>`--sf-opacity-muted`in t.overrides);$(r,{label:`Muted opacity`,get value(){return U(s)},min:0,max:1,step:.05,help:`--sf-opacity-muted — secondary text, icons, and placeholder content`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-opacity-muted`,String(e)),onReset:()=>t.onReset(`--sf-opacity-muted`)})}var i=V(r,2);{let e=I(()=>`--sf-opacity-disabled`in t.overrides);$(i,{label:`Disabled opacity`,get value(){return U(c)},min:0,max:1,step:.05,help:`--sf-opacity-disabled — disabled form controls and interactive elements`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-opacity-disabled`,String(e)),onReset:()=>t.onReset(`--sf-opacity-disabled`)})}var a=V(i,2);{let e=I(()=>`--sf-state-pending-opacity`in t.overrides);$(a,{label:`Pending opacity`,get value(){return U(f)},min:.1,max:1,step:.05,help:`--sf-state-pending-opacity — opacity of elements in loading/pending state`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-state-pending-opacity`,String(e)),onReset:()=>t.onReset(`--sf-state-pending-opacity`)})}var o=V(a,2);Y(o,21,()=>[{label:`muted`,val:U(s)},{label:`disabled`,val:U(c)},{label:`pending`,val:U(f)}],e=>e.label,(e,t)=>{var n=Tp(),r=z(n),i=z(r,!0);F(r);var a=V(r,2),o=V(a,2),s=z(o,!0);F(o),F(n),H(()=>{q(i,U(t).label),Z(a,`opacity: ${U(t).val}`),q(s,U(t).val)}),K(e,n)}),F(o),K(e,n)};J(te,e=>{U(g)&&e(ne)}),F(k);var M=V(k,4),re=z(M),ie=V(z(re),2),ae=z(ie,!0);F(ie),F(re);var oe=V(re,2),se=e=>{var r=Op(),i=V(B(r),2),a=V(z(i),2);{let e=I(()=>`--sf-scrim-color`in t.overrides);Au(a,{token:`--sf-scrim-color`,get value(){return U(u)},placeholder:`default (base color)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-scrim-color`,e),onReset:()=>t.onReset(`--sf-scrim-color`)})}F(i);var o=V(i,2),s=V(z(o),2);Y(s,21,()=>n,e=>e.value,(e,n)=>{var r=Dp(),i=z(r,!0);F(r),H(()=>{X(r,1,`py-2 px-3 rounded-lg text-[10px] border transition-all cursor-pointer text-left ${U(l)===U(n).value?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(i,U(n).label)}),W(`click`,r,()=>U(n).value===`to top`?t.onReset(`--sf-scrim-direction`):t.onSet(`--sf-scrim-direction`,U(n).value)),K(e,r)}),F(s),F(o);var c=V(o,2),d=z(c),f=z(d);Me(2),F(d),F(c),H(()=>Z(f,`background: linear-gradient(${U(l)}, ${U(u)||`oklch(0 0 0 / 0.6)`}, transparent)`)),K(e,r)};J(oe,e=>{U(_)&&e(se)}),F(M);var N=V(M,4),ce=z(N),le=V(z(ce),2),ue=z(le,!0);F(le),F(ce);var de=V(ce,2),fe=e=>{var n=Ap(),r=B(n);Y(r,17,()=>[{label:`Thumb color`,token:`--sf-scrollbar-thumb`,val:U(p)},{label:`Track color`,token:`--sf-scrollbar-track`,val:U(m)}],e=>e.token,(e,n)=>{var r=kp(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);{let e=I(()=>U(n).token in t.overrides);Au(o,{get token(){return U(n).token},get value(){return U(n).val},placeholder:`default`,get isOverridden(){return U(e)},onSet:e=>t.onSet(U(n).token,e),onReset:()=>t.onReset(U(n).token)})}F(r),H(()=>q(a,U(n).label)),K(e,r)});var i=V(r,2),a=z(i);let o;var s=z(a);let c;F(a),Me(2),F(i),H(()=>{o=Z(a,``,o,{background:U(m)||`rgba(255,255,255,0.08)`}),c=Z(s,``,c,{background:U(p)||`oklch(0.52 0.025 260)`})}),K(e,n)};J(de,e=>{U(v)&&e(fe)}),F(N);var pe=V(N,4),me=z(pe),he=V(z(me),2),ge=z(he,!0);F(he),F(me);var _e=V(me,2),ve=e=>{{let n=I(()=>`--sf-scroll-shadow-size`in t.overrides);$(e,{label:`Shadow size`,get value(){return U(d)},min:0,max:6,step:.25,unit:`rem`,help:`--sf-scroll-shadow-size — gradient edge mask on .sf-scroll-shadow elements`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-scroll-shadow-size`,`${e}rem`),onReset:()=>t.onReset(`--sf-scroll-shadow-size`)})}};J(_e,e=>{U(y)&&e(ve)}),F(pe);var ye=V(pe,4),be=z(ye),xe=V(z(be),2),Se=z(xe,!0);F(xe),F(be);var Ce=V(be,2),we=e=>{var n=Np(),i=V(B(n),2);Y(i,21,()=>r,e=>e.token,(e,n)=>{var r=Mp(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=jp();W(`click`,r,()=>t.onReset(U(n).token)),K(e,r)};J(s,e=>{U(n).token in t.overrides&&e(c)}),F(r),H(()=>{q(a,U(n).label),Bi(o,t.overrides[U(n).token]??``),Q(o,`placeholder`,U(n).default)}),W(`input`,o,e=>{let r=e.target.value;r.trim()?t.onSet(U(n).token,r):t.onReset(U(n).token)}),K(e,r)}),F(i),K(e,n)};J(Ce,e=>{U(b)&&e(we)}),F(ye);var Te=V(ye,4),Ee=z(Te),De=V(z(Ee),2),P=z(De,!0);F(De),F(Ee);var Oe=V(Ee,2),ke=e=>{var n=Fp(),r=V(B(n),2);Y(r,20,()=>[{label:`Extra small`,token:`--sf-drop-shadow-xs`,default:`drop-shadow(0 0.5px 1px oklch(…))`},{label:`Small`,token:`--sf-drop-shadow-s`,default:`drop-shadow(0 1px 2px oklch(…))`},{label:`Medium`,token:`--sf-drop-shadow-m`,default:`drop-shadow(0 4px 6px oklch(…))`},{label:`Large`,token:`--sf-drop-shadow-l`,default:`drop-shadow(0 8px 16px oklch(…))`},{label:`Extra large`,token:`--sf-drop-shadow-xl`,default:`drop-shadow(0 16px 32px oklch(…))`}],e=>e.token,(e,n)=>{var r=Mp(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=jp();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.default)}),W(`input`,o,e=>{let r=e.target.value;r.trim()?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),F(r);var a=V(r,2);Y(a,20,()=>i,e=>e,(e,t)=>{var n=Pp(),r=z(n),i=V(r,2),a=z(i,!0);F(i),F(n),H(()=>{X(r,0,`sf-drop-shadow-${t}`),q(a,t)}),K(e,n)}),F(a),K(e,n)};J(Oe,e=>{U(x)&&e(ke)}),F(Te),F(S),H(()=>{Q(w,`aria-expanded`,U(h)),q(E,U(h)?`▲`:`▼`),Q(A,`aria-expanded`,U(g)),q(j,U(g)?`▲`:`▼`),Q(re,`aria-expanded`,U(_)),q(ae,U(_)?`▲`:`▼`),Q(ce,`aria-expanded`,U(v)),q(ue,U(v)?`▲`:`▼`),Q(me,`aria-expanded`,U(y)),q(ge,U(y)?`▲`:`▼`),Q(be,`aria-expanded`,U(b)),q(Se,U(b)?`▲`:`▼`),Q(Ee,`aria-expanded`,U(x)),q(P,U(x)?`▲`:`▼`)}),W(`click`,w,()=>{R(h,!U(h))}),W(`click`,A,()=>{R(g,!U(g))}),W(`click`,re,()=>{R(_,!U(_))}),W(`click`,ce,()=>{R(v,!U(v))}),W(`click`,me,()=>{R(y,!U(y))}),W(`click`,be,()=>{R(b,!U(b))}),W(`click`,Ee,()=>{R(x,!U(x))}),K(e,S),We()}Br([`click`,`input`]);var Rp=G(`
`),zp=G(`
`,1),Bp=G(`

SLASHED is a token-first CSS framework. This sample paragraph repeats so you can see exactly how many lines survive the clamp before the ellipsis kicks in. Drag the slider above and watch the visible line count change in real time. - Extra filler text keeps the block taller than the clamp at every setting.

`,1),Vp=G(``),Hp=G(`

--sf-aspect — default ratio for .sf-aspect / .sf-frame

`,1),Up=G(`
`,1),Wp=G(``),Gp=G(`

--sf-scrim-color / --sf-scrim-direction — darkening gradient for .sf-scrim

Color
Direction
Caption over scrim
Text shadow
`,1),Kp=G(`

Spacing tokens for .sf-prose. Defaults track the space scale; sliders write rem overrides.

Marker color
`,1),qp=G(`

--sf-content-intrinsic-size — placeholder size used with content-visibility: auto to improve scroll performance on tall pages.

Intrinsic size
`,1),Jp=G(`
`),Yp=G(`
`),Xp=G(`

--sf-surface-bg-* — input set composed by the .sf-surface-bg macro into a single reusable background (color, image, overlay, sizing and animation).

.sf-surface-bg preview
`,1),Zp=G(`

Tokens for the framework's utility macros — .sf-prose, .sf-flow, .sf-line-clamp, .sf-aspect, .sf-scroll-shadow and .sf-scrim.

All tokens tab — edit every prose, scrim and surface token directly.

`);function Qp(e,t){Ue(t,!0);function n(e,n,r){let i=t.overrides[e];if(!i)return n;let a=parseFloat(r?i.replace(r,``):i);return isNaN(a)?n:a}let r=[{label:`16 / 9`,value:`16 / 9`},{label:`4 / 3`,value:`4 / 3`},{label:`3 / 2`,value:`3 / 2`},{label:`1 / 1`,value:`1 / 1`},{label:`21 / 9`,value:`21 / 9`},{label:`9 / 16`,value:`9 / 16`}],i=[{label:`↑ top`,value:`to top`},{label:`↓ bottom`,value:`to bottom`},{label:`← left`,value:`to left`},{label:`→ right`,value:`to right`},{label:`↗ top-right`,value:`to top right`},{label:`↖ top-left`,value:`to top left`}],a=[`cover`,`contain`,`auto`,`100% 100%`],o=[`center`,`top`,`bottom`,`left`,`right`,`top left`],s=[`no-repeat`,`repeat`,`repeat-x`,`repeat-y`,`space`,`round`],c=[`scroll`,`fixed`,`local`],l=[{label:`Color`,token:`--sf-surface-bg-color`,placeholder:`transparent`},{label:`Image`,token:`--sf-surface-bg-image`,placeholder:`url("/hero.avif")`},{label:`Overlay`,token:`--sf-surface-bg-overlay`,placeholder:`var(--sf-scrim-gradient)`},{label:`Animation`,token:`--sf-surface-bg-animation`,placeholder:`sf-pan 40s linear infinite`}],u=[{label:`Size`,token:`--sf-surface-bg-size`,opts:a},{label:`Position`,token:`--sf-surface-bg-position`,opts:o},{label:`Repeat`,token:`--sf-surface-bg-repeat`,opts:s},{label:`Attachment`,token:`--sf-surface-bg-attachment`,opts:c}],d=[{label:`Heading gap`,token:`--sf-prose-heading-gap`,def:.75,max:3,raw:`var(--sf-space-s)`},{label:`List gap`,token:`--sf-prose-list-gap`,def:.5,max:2,raw:`var(--sf-space-xs)`},{label:`Block margin`,token:`--sf-prose-block-margin`,def:1,max:4,raw:`var(--sf-space-m)`},{label:`Media margin`,token:`--sf-prose-media-margin`,def:1,max:4,raw:`var(--sf-space-m)`},{label:`Figure margin`,token:`--sf-prose-figure-margin`,def:1.5,max:4,raw:`var(--sf-space-l)`},{label:`Blockquote padding`,token:`--sf-prose-blockquote-padding`,def:1,max:3,raw:`var(--sf-space-m)`},{label:`HR margin`,token:`--sf-prose-hr-margin`,def:1.5,max:4,raw:`var(--sf-space-l)`}],f=L(!1),p=L(!1),m=L(!1),h=L(!1),g=L(!1),_=L(!1),v=L(!1),y=L(!1),b=I(()=>n(`--sf-line-clamp`,3)),x=I(()=>n(`--sf-flow-space`,.5,`rem`)),S=I(()=>n(`--sf-scroll-shadow-size`,2,`rem`)),C=I(()=>t.overrides[`--sf-aspect`]??`16 / 9`),w=I(()=>t.overrides[`--sf-scrim-color`]??`oklch(0 0 0 / 0.55)`),T=I(()=>t.overrides[`--sf-scrim-direction`]??`to top`),E=I(()=>n(`--sf-prose-media-radius`,6,`px`)),D=I(()=>t.overrides[`--sf-surface-bg-image`]??`none`),O=I(()=>t.overrides[`--sf-surface-bg-overlay`]??`none`),k=I(()=>t.overrides[`--sf-surface-bg-color`]??`transparent`),A=I(()=>t.overrides[`--sf-surface-bg-size`]??`cover`),ee=I(()=>t.overrides[`--sf-surface-bg-position`]??`center`),te=I(()=>t.overrides[`--sf-surface-bg-repeat`]??`no-repeat`),j=I(()=>t.overrides[`--sf-surface-bg-attachment`]??`scroll`),ne=I(()=>t.overrides[`--sf-surface-bg-animation`]??`none`);function M(e){let n=t.overrides[e.token];if(!n)return e.def;let r=parseFloat(n);return isNaN(r)?e.def:r}var re=Zp(),ie=V(z(re),2),ae=z(ie),oe=V(z(ae),2),se=z(oe,!0);F(oe),F(ae);var N=V(ae,2),ce=e=>{var n=zp(),r=B(n);{let e=I(()=>`--sf-flow-space`in t.overrides);$(r,{label:`Flow space`,get value(){return U(x)},min:0,max:4,step:.0625,unit:`rem`,help:`--sf-flow-space — vertical gap between adjacent children of .sf-flow`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-flow-space`,`${e}rem`),onReset:()=>t.onReset(`--sf-flow-space`),rawDefault:`var(--sf-content-gap)`,get variableOptions(){return of},get currentRaw(){return t.overrides[`--sf-flow-space`]},onRawSet:e=>t.onSet(`--sf-flow-space`,e)})}var i=V(r,2);Y(i,20,()=>[0,1,2],e=>e,(e,t)=>{var n=Rp();H(()=>Z(n,`width:${90-t*12}%`)),K(e,n)}),F(i),H(()=>Z(i,`display:flex;flex-direction:column;gap:${U(x)}rem`)),K(e,n)};J(N,e=>{U(f)&&e(ce)}),F(ie);var le=V(ie,4),ue=z(le),de=V(z(ue),2),fe=z(de,!0);F(de),F(ue);var pe=V(ue,2),me=e=>{var n=Bp(),r=B(n);{let e=I(()=>`--sf-line-clamp`in t.overrides);$(r,{label:`Default lines`,get value(){return U(b)},min:1,max:8,step:1,help:`--sf-line-clamp — default line count for .sf-line-clamp (override per element)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-line-clamp`,String(e)),onReset:()=>t.onReset(`--sf-line-clamp`)})}var i=V(r,2),a=z(i);F(i),H(()=>Z(a,`display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:${U(b)};overflow:hidden`)),K(e,n)};J(pe,e=>{U(p)&&e(me)}),F(le);var he=V(le,4),ge=z(he),_e=V(z(ge),2),ve=z(_e,!0);F(_e),F(ge);var ye=V(ge,2),be=e=>{var n=Hp(),i=V(B(n),2);Y(i,21,()=>r,e=>e.value,(e,n)=>{var r=Vp(),i=z(r,!0);F(r),H(e=>{X(r,1,e),q(i,U(n).label)},[()=>`py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(C).replace(/\s/g,``)===U(n).value.replace(/\s/g,``)?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`]),W(`click`,r,()=>U(n).value===`16 / 9`?t.onReset(`--sf-aspect`):t.onSet(`--sf-aspect`,U(n).value)),K(e,r)}),F(i);var a=V(i,2),o=z(a),s=z(o,!0);F(o),F(a),H(()=>{Z(o,`aspect-ratio:${U(C)};max-height:120px;max-width:100%;width:auto;height:120px`),q(s,U(C))}),K(e,n)};J(ye,e=>{U(m)&&e(be)}),F(he);var xe=V(he,4),Se=z(xe),Ce=V(z(Se),2),we=z(Ce,!0);F(Ce),F(Se);var Te=V(Se,2),Ee=e=>{var n=Up(),r=B(n);{let e=I(()=>`--sf-scroll-shadow-size`in t.overrides);$(r,{label:`Fade size`,get value(){return U(S)},min:0,max:6,step:.25,unit:`rem`,help:`--sf-scroll-shadow-size — size of the edge fade mask on .sf-scroll-shadow / .sf-overflow-fade`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-scroll-shadow-size`,`${e}rem`),onReset:()=>t.onReset(`--sf-scroll-shadow-size`)})}var i=V(r,2),a=z(i);F(i),H(()=>Z(a,`mask:linear-gradient(to right, transparent, #000 ${U(S)}rem, #000 calc(100% - ${U(S)}rem), transparent)`)),K(e,n)};J(Te,e=>{U(h)&&e(Ee)}),F(xe);var De=V(xe,4),P=z(De),Oe=V(z(P),2),ke=z(Oe,!0);F(Oe),F(P);var Ae=V(P,2),je=e=>{var n=Gp(),r=V(B(n),2),a=V(z(r),2);zi(a);var o=V(a,2),s=e=>{var n=Wp();W(`click`,n,()=>t.onReset(`--sf-scrim-color`)),K(e,n)};J(o,e=>{`--sf-scrim-color`in t.overrides&&e(s)}),F(r);var c=V(r,2),l=V(z(c),2);Y(l,21,()=>i,e=>e.value,(e,n)=>{var r=Vp(),i=z(r,!0);F(r),H(()=>{X(r,1,`py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(T)===U(n).value?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(i,U(n).label)}),W(`click`,r,()=>U(n).value===`to top`?t.onReset(`--sf-scrim-direction`):t.onSet(`--sf-scrim-direction`,U(n).value)),K(e,r)}),F(l),F(c);var u=V(c,2),d=z(u);Me(2),F(u);var f=V(u,2),p=V(z(f),2);zi(p);var m=V(p,2),h=e=>{var n=Wp();W(`click`,n,()=>t.onReset(`--sf-scrim-text-shadow`)),K(e,n)};J(m,e=>{`--sf-scrim-text-shadow`in t.overrides&&e(h)}),F(f),H(()=>{Bi(a,t.overrides[`--sf-scrim-color`]??``),Z(d,`background:linear-gradient(${U(T)}, ${U(w)}, transparent)`),Bi(p,t.overrides[`--sf-scrim-text-shadow`]??``)}),W(`input`,a,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-scrim-color`,n):t.onReset(`--sf-scrim-color`)}),W(`input`,p,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-scrim-text-shadow`,n):t.onReset(`--sf-scrim-text-shadow`)}),K(e,n)};J(Ae,e=>{U(g)&&e(je)}),F(De);var Ne=V(De,4),Pe=z(Ne),Fe=V(z(Pe),2),Ie=z(Fe,!0);F(Fe),F(Pe);var Le=V(Pe,2),Re=e=>{var n=Kp(),r=V(B(n),2),i=z(r);Y(i,17,()=>d,e=>e.token,(e,n)=>{{let r=I(()=>M(U(n))),i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:0,get max(){return U(n).max},step:.0625,unit:`rem`,get help(){return U(n).token},get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,`${e}rem`),onReset:()=>t.onReset(U(n).token),get rawDefault(){return U(n).raw},get variableOptions(){return of},get currentRaw(){return t.overrides[U(n).token]},onRawSet:e=>t.onSet(U(n).token,e)})}});var a=V(i,2);{let e=I(()=>`--sf-prose-media-radius`in t.overrides);$(a,{label:`Media radius`,get value(){return U(E)},min:0,max:32,step:1,unit:`px`,help:`--sf-prose-media-radius — corner radius on prose images/video`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-prose-media-radius`,`${e}px`),onReset:()=>t.onReset(`--sf-prose-media-radius`),rawDefault:`var(--sf-radius-m)`,get variableOptions(){return sf},get currentRaw(){return t.overrides[`--sf-prose-media-radius`]},onRawSet:e=>t.onSet(`--sf-prose-media-radius`,e)})}var o=V(a,2),s=V(z(o),2);zi(s);var c=V(s,2),l=e=>{var n=Wp();W(`click`,n,()=>t.onReset(`--sf-prose-marker-color`)),K(e,n)};J(c,e=>{`--sf-prose-marker-color`in t.overrides&&e(l)}),F(o),F(r),H(()=>Bi(s,t.overrides[`--sf-prose-marker-color`]??``)),W(`input`,s,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-prose-marker-color`,n):t.onReset(`--sf-prose-marker-color`)}),K(e,n)};J(Le,e=>{U(_)&&e(Re)}),F(Ne);var ze=V(Ne,2),Be=z(ze),Ve=V(z(Be),2),He=z(Ve,!0);F(Ve),F(Be);var Ge=V(Be,2),Ke=e=>{var n=qp(),r=V(B(n),2),i=V(z(r),2);zi(i);var a=V(i,2),o=e=>{var n=Wp();W(`click`,n,()=>t.onReset(`--sf-content-intrinsic-size`)),K(e,n)};J(a,e=>{`--sf-content-intrinsic-size`in t.overrides&&e(o)}),F(r),H(()=>Bi(i,t.overrides[`--sf-content-intrinsic-size`]??``)),W(`input`,i,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-content-intrinsic-size`,n):t.onReset(`--sf-content-intrinsic-size`)}),K(e,n)};J(Ge,e=>{U(v)&&e(Ke)}),F(ze);var qe=V(ze,4),Je=z(qe),Ye=V(z(Je),2),Xe=z(Ye,!0);F(Ye),F(Je);var Ze=V(Je,2),Qe=e=>{var n=Xp(),r=V(B(n),2);Y(r,17,()=>l,e=>e.token,(e,n)=>{var r=Jp(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=Wp();W(`click`,r,()=>t.onReset(U(n).token)),K(e,r)};J(s,e=>{U(n).token in t.overrides&&e(c)}),F(r),H(()=>{q(a,U(n).label),Bi(o,t.overrides[U(n).token]??``),Q(o,`placeholder`,U(n).placeholder)}),W(`input`,o,e=>{let r=e.target.value;r.trim()?t.onSet(U(n).token,r):t.onReset(U(n).token)}),K(e,r)});var i=V(r,2);Y(i,17,()=>u,e=>e.token,(e,n)=>{var r=Yp(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);Y(o,20,()=>U(n).opts,e=>e,(e,r)=>{var i=Vp(),a=z(i,!0);F(i),H(()=>{X(i,1,`py-1 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${(t.overrides[U(n).token]??U(n).opts[0])===r?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(a,r)}),W(`click`,i,()=>r===U(n).opts[0]?t.onReset(U(n).token):t.onSet(U(n).token,r)),K(e,i)}),F(o),F(r),H(()=>q(a,U(n).label)),K(e,r)});var a=V(i,2);H(()=>Z(a,`background-color:${U(k)};background-image:${U(O)}, ${U(D)};background-size:${U(A)};background-position:${U(ee)};background-repeat:${U(te)};background-attachment:${U(j)};animation:${U(ne)}`)),K(e,n)};J(Ze,e=>{U(y)&&e(Qe)}),F(qe),Me(2),F(re),H(()=>{Q(ae,`aria-expanded`,U(f)),q(se,U(f)?`▲`:`▼`),Q(ue,`aria-expanded`,U(p)),q(fe,U(p)?`▲`:`▼`),Q(ge,`aria-expanded`,U(m)),q(ve,U(m)?`▲`:`▼`),Q(Se,`aria-expanded`,U(h)),q(we,U(h)?`▲`:`▼`),Q(P,`aria-expanded`,U(g)),q(ke,U(g)?`▲`:`▼`),Q(Pe,`aria-expanded`,U(_)),q(Ie,U(_)?`▲`:`▼`),Q(Be,`aria-expanded`,U(v)),q(He,U(v)?`▲`:`▼`),Q(Je,`aria-expanded`,U(y)),q(Xe,U(y)?`▲`:`▼`)}),W(`click`,ae,()=>{R(f,!U(f))}),W(`click`,ue,()=>{R(p,!U(p))}),W(`click`,ge,()=>{R(m,!U(m))}),W(`click`,Se,()=>{R(h,!U(h))}),W(`click`,P,()=>{R(g,!U(g))}),W(`click`,Pe,()=>{R(_,!U(_))}),W(`click`,Be,()=>{R(v,!U(v))}),W(`click`,Je,()=>{R(y,!U(y))}),K(e,re),We()}Br([`click`,`input`]);var $p=G(`

Minimum interactive area — ensures accessibility on touch devices.

`,1),em=G(``),tm=G(`
`),nm=G(`
`),rm=G(`

Override individual z-index tokens in the "All tokens" tab.

`,1),im=G(`
Selection background
Selection text color

Select this text to preview the selection color.

.sf-selection--alt — alternate + Extra filler text keeps the block taller than the clamp at every setting.

`,1),Vp=G(``),Hp=G(`

--sf-aspect — default ratio for .sf-aspect / .sf-frame

`,1),Up=G(`
`,1),Wp=G(``),Gp=G(`

--sf-scrim-color / --sf-scrim-direction — darkening gradient for .sf-scrim

Color
Direction
Caption over scrim
Text shadow
`,1),Kp=G(`

Spacing tokens for .sf-prose. Defaults track the space scale; sliders write rem overrides.

Marker color
`,1),qp=G(`

--sf-content-intrinsic-size — placeholder size used with content-visibility: auto to improve scroll performance on tall pages.

Intrinsic size
`,1),Jp=G(`
`),Yp=G(`
`),Xp=G(`

--sf-surface-bg-* — input set composed by the .sf-surface-bg macro into a single reusable background (color, image, overlay, sizing and animation).

.sf-surface-bg preview
`,1),Zp=G(`

Tokens for the framework's utility macros — .sf-prose, .sf-flow, .sf-line-clamp, .sf-aspect, .sf-scroll-shadow and .sf-scrim.

All tokens tab — edit every prose, scrim and surface token directly.

`);function Qp(e,t){Ue(t,!0);function n(e,n,r){let i=t.overrides[e];if(!i)return n;let a=parseFloat(r?i.replace(r,``):i);return isNaN(a)?n:a}let r=[{label:`16 / 9`,value:`16 / 9`},{label:`4 / 3`,value:`4 / 3`},{label:`3 / 2`,value:`3 / 2`},{label:`1 / 1`,value:`1 / 1`},{label:`21 / 9`,value:`21 / 9`},{label:`9 / 16`,value:`9 / 16`}],i=[{label:`↑ top`,value:`to top`},{label:`↓ bottom`,value:`to bottom`},{label:`← left`,value:`to left`},{label:`→ right`,value:`to right`},{label:`↗ top-right`,value:`to top right`},{label:`↖ top-left`,value:`to top left`}],a=[`cover`,`contain`,`auto`,`100% 100%`],o=[`center`,`top`,`bottom`,`left`,`right`,`top left`],s=[`no-repeat`,`repeat`,`repeat-x`,`repeat-y`,`space`,`round`],c=[`scroll`,`fixed`,`local`],l=[{label:`Color`,token:`--sf-surface-bg-color`,placeholder:`transparent`},{label:`Image`,token:`--sf-surface-bg-image`,placeholder:`url("/hero.avif")`},{label:`Overlay`,token:`--sf-surface-bg-overlay`,placeholder:`var(--sf-scrim-gradient)`},{label:`Animation`,token:`--sf-surface-bg-animation`,placeholder:`sf-pan 40s linear infinite`}],u=[{label:`Size`,token:`--sf-surface-bg-size`,opts:a},{label:`Position`,token:`--sf-surface-bg-position`,opts:o},{label:`Repeat`,token:`--sf-surface-bg-repeat`,opts:s},{label:`Attachment`,token:`--sf-surface-bg-attachment`,opts:c}],d=[{label:`Heading gap`,token:`--sf-prose-heading-gap`,def:.75,max:3,raw:`var(--sf-space-s)`},{label:`List gap`,token:`--sf-prose-list-gap`,def:.5,max:2,raw:`var(--sf-space-xs)`},{label:`Block margin`,token:`--sf-prose-block-margin`,def:1,max:4,raw:`var(--sf-space-m)`},{label:`Media margin`,token:`--sf-prose-media-margin`,def:1,max:4,raw:`var(--sf-space-m)`},{label:`Figure margin`,token:`--sf-prose-figure-margin`,def:1.5,max:4,raw:`var(--sf-space-l)`},{label:`Blockquote padding`,token:`--sf-prose-blockquote-padding`,def:1,max:3,raw:`var(--sf-space-m)`},{label:`HR margin`,token:`--sf-prose-hr-margin`,def:1.5,max:4,raw:`var(--sf-space-l)`}],f=L(!1),p=L(!1),m=L(!1),h=L(!1),g=L(!1),_=L(!1),v=L(!1),y=L(!1),b=I(()=>n(`--sf-line-clamp`,3)),x=I(()=>n(`--sf-flow-space`,.5,`rem`)),S=I(()=>n(`--sf-scroll-shadow-size`,2,`rem`)),C=I(()=>t.overrides[`--sf-aspect`]??`16 / 9`),w=I(()=>t.overrides[`--sf-scrim-color`]??`oklch(0 0 0 / 0.55)`),T=I(()=>t.overrides[`--sf-scrim-direction`]??`to top`),E=I(()=>n(`--sf-prose-media-radius`,6,`px`)),D=I(()=>t.overrides[`--sf-surface-bg-image`]??`none`),O=I(()=>t.overrides[`--sf-surface-bg-overlay`]??`none`),k=I(()=>t.overrides[`--sf-surface-bg-color`]??`transparent`),A=I(()=>t.overrides[`--sf-surface-bg-size`]??`cover`),ee=I(()=>t.overrides[`--sf-surface-bg-position`]??`center`),j=I(()=>t.overrides[`--sf-surface-bg-repeat`]??`no-repeat`),te=I(()=>t.overrides[`--sf-surface-bg-attachment`]??`scroll`),ne=I(()=>t.overrides[`--sf-surface-bg-animation`]??`none`);function M(e){let n=t.overrides[e.token];if(!n)return e.def;let r=parseFloat(n);return isNaN(r)?e.def:r}var re=Zp(),ie=V(z(re),2),ae=z(ie),oe=V(z(ae),2),se=z(oe,!0);F(oe),F(ae);var N=V(ae,2),ce=e=>{var n=zp(),r=B(n);{let e=I(()=>`--sf-flow-space`in t.overrides);$(r,{label:`Flow space`,get value(){return U(x)},min:0,max:4,step:.0625,unit:`rem`,help:`--sf-flow-space — vertical gap between adjacent children of .sf-flow`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-flow-space`,`${e}rem`),onReset:()=>t.onReset(`--sf-flow-space`),rawDefault:`var(--sf-content-gap)`,get variableOptions(){return of},get currentRaw(){return t.overrides[`--sf-flow-space`]},onRawSet:e=>t.onSet(`--sf-flow-space`,e)})}var i=V(r,2);Y(i,20,()=>[0,1,2],e=>e,(e,t)=>{var n=Rp();H(()=>Z(n,`width:${90-t*12}%`)),K(e,n)}),F(i),H(()=>Z(i,`display:flex;flex-direction:column;gap:${U(x)}rem`)),K(e,n)};J(N,e=>{U(f)&&e(ce)}),F(ie);var le=V(ie,4),ue=z(le),de=V(z(ue),2),fe=z(de,!0);F(de),F(ue);var pe=V(ue,2),me=e=>{var n=Bp(),r=B(n);{let e=I(()=>`--sf-line-clamp`in t.overrides);$(r,{label:`Default lines`,get value(){return U(b)},min:1,max:8,step:1,help:`--sf-line-clamp — default line count for .sf-line-clamp (override per element)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-line-clamp`,String(e)),onReset:()=>t.onReset(`--sf-line-clamp`)})}var i=V(r,2),a=z(i);F(i),H(()=>Z(a,`display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:${U(b)};overflow:hidden`)),K(e,n)};J(pe,e=>{U(p)&&e(me)}),F(le);var he=V(le,4),ge=z(he),_e=V(z(ge),2),ve=z(_e,!0);F(_e),F(ge);var ye=V(ge,2),be=e=>{var n=Hp(),i=V(B(n),2);Y(i,21,()=>r,e=>e.value,(e,n)=>{var r=Vp(),i=z(r,!0);F(r),H(e=>{X(r,1,e),q(i,U(n).label)},[()=>`py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(C).replace(/\s/g,``)===U(n).value.replace(/\s/g,``)?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`]),W(`click`,r,()=>U(n).value===`16 / 9`?t.onReset(`--sf-aspect`):t.onSet(`--sf-aspect`,U(n).value)),K(e,r)}),F(i);var a=V(i,2),o=z(a),s=z(o,!0);F(o),F(a),H(()=>{Z(o,`aspect-ratio:${U(C)};max-height:120px;max-width:100%;width:auto;height:120px`),q(s,U(C))}),K(e,n)};J(ye,e=>{U(m)&&e(be)}),F(he);var xe=V(he,4),Se=z(xe),Ce=V(z(Se),2),we=z(Ce,!0);F(Ce),F(Se);var Te=V(Se,2),Ee=e=>{var n=Up(),r=B(n);{let e=I(()=>`--sf-scroll-shadow-size`in t.overrides);$(r,{label:`Fade size`,get value(){return U(S)},min:0,max:6,step:.25,unit:`rem`,help:`--sf-scroll-shadow-size — size of the edge fade mask on .sf-scroll-shadow / .sf-overflow-fade`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-scroll-shadow-size`,`${e}rem`),onReset:()=>t.onReset(`--sf-scroll-shadow-size`)})}var i=V(r,2),a=z(i);F(i),H(()=>Z(a,`mask:linear-gradient(to right, transparent, #000 ${U(S)}rem, #000 calc(100% - ${U(S)}rem), transparent)`)),K(e,n)};J(Te,e=>{U(h)&&e(Ee)}),F(xe);var De=V(xe,4),P=z(De),Oe=V(z(P),2),ke=z(Oe,!0);F(Oe),F(P);var Ae=V(P,2),je=e=>{var n=Gp(),r=V(B(n),2),a=V(z(r),2);zi(a);var o=V(a,2),s=e=>{var n=Wp();W(`click`,n,()=>t.onReset(`--sf-scrim-color`)),K(e,n)};J(o,e=>{`--sf-scrim-color`in t.overrides&&e(s)}),F(r);var c=V(r,2),l=V(z(c),2);Y(l,21,()=>i,e=>e.value,(e,n)=>{var r=Vp(),i=z(r,!0);F(r),H(()=>{X(r,1,`py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(T)===U(n).value?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(i,U(n).label)}),W(`click`,r,()=>U(n).value===`to top`?t.onReset(`--sf-scrim-direction`):t.onSet(`--sf-scrim-direction`,U(n).value)),K(e,r)}),F(l),F(c);var u=V(c,2),d=z(u);Me(2),F(u);var f=V(u,2),p=V(z(f),2);zi(p);var m=V(p,2),h=e=>{var n=Wp();W(`click`,n,()=>t.onReset(`--sf-scrim-text-shadow`)),K(e,n)};J(m,e=>{`--sf-scrim-text-shadow`in t.overrides&&e(h)}),F(f),H(()=>{Bi(a,t.overrides[`--sf-scrim-color`]??``),Z(d,`background:linear-gradient(${U(T)}, ${U(w)}, transparent)`),Bi(p,t.overrides[`--sf-scrim-text-shadow`]??``)}),W(`input`,a,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-scrim-color`,n):t.onReset(`--sf-scrim-color`)}),W(`input`,p,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-scrim-text-shadow`,n):t.onReset(`--sf-scrim-text-shadow`)}),K(e,n)};J(Ae,e=>{U(g)&&e(je)}),F(De);var Ne=V(De,4),Pe=z(Ne),Fe=V(z(Pe),2),Ie=z(Fe,!0);F(Fe),F(Pe);var Le=V(Pe,2),Re=e=>{var n=Kp(),r=V(B(n),2),i=z(r);Y(i,17,()=>d,e=>e.token,(e,n)=>{{let r=I(()=>M(U(n))),i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:0,get max(){return U(n).max},step:.0625,unit:`rem`,get help(){return U(n).token},get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,`${e}rem`),onReset:()=>t.onReset(U(n).token),get rawDefault(){return U(n).raw},get variableOptions(){return of},get currentRaw(){return t.overrides[U(n).token]},onRawSet:e=>t.onSet(U(n).token,e)})}});var a=V(i,2);{let e=I(()=>`--sf-prose-media-radius`in t.overrides);$(a,{label:`Media radius`,get value(){return U(E)},min:0,max:32,step:1,unit:`px`,help:`--sf-prose-media-radius — corner radius on prose images/video`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-prose-media-radius`,`${e}px`),onReset:()=>t.onReset(`--sf-prose-media-radius`),rawDefault:`var(--sf-radius-m)`,get variableOptions(){return sf},get currentRaw(){return t.overrides[`--sf-prose-media-radius`]},onRawSet:e=>t.onSet(`--sf-prose-media-radius`,e)})}var o=V(a,2),s=V(z(o),2);zi(s);var c=V(s,2),l=e=>{var n=Wp();W(`click`,n,()=>t.onReset(`--sf-prose-marker-color`)),K(e,n)};J(c,e=>{`--sf-prose-marker-color`in t.overrides&&e(l)}),F(o),F(r),H(()=>Bi(s,t.overrides[`--sf-prose-marker-color`]??``)),W(`input`,s,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-prose-marker-color`,n):t.onReset(`--sf-prose-marker-color`)}),K(e,n)};J(Le,e=>{U(_)&&e(Re)}),F(Ne);var ze=V(Ne,2),Be=z(ze),Ve=V(z(Be),2),He=z(Ve,!0);F(Ve),F(Be);var Ge=V(Be,2),Ke=e=>{var n=qp(),r=V(B(n),2),i=V(z(r),2);zi(i);var a=V(i,2),o=e=>{var n=Wp();W(`click`,n,()=>t.onReset(`--sf-content-intrinsic-size`)),K(e,n)};J(a,e=>{`--sf-content-intrinsic-size`in t.overrides&&e(o)}),F(r),H(()=>Bi(i,t.overrides[`--sf-content-intrinsic-size`]??``)),W(`input`,i,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-content-intrinsic-size`,n):t.onReset(`--sf-content-intrinsic-size`)}),K(e,n)};J(Ge,e=>{U(v)&&e(Ke)}),F(ze);var qe=V(ze,4),Je=z(qe),Ye=V(z(Je),2),Xe=z(Ye,!0);F(Ye),F(Je);var Ze=V(Je,2),Qe=e=>{var n=Xp(),r=V(B(n),2);Y(r,17,()=>l,e=>e.token,(e,n)=>{var r=Jp(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=Wp();W(`click`,r,()=>t.onReset(U(n).token)),K(e,r)};J(s,e=>{U(n).token in t.overrides&&e(c)}),F(r),H(()=>{q(a,U(n).label),Bi(o,t.overrides[U(n).token]??``),Q(o,`placeholder`,U(n).placeholder)}),W(`input`,o,e=>{let r=e.target.value;r.trim()?t.onSet(U(n).token,r):t.onReset(U(n).token)}),K(e,r)});var i=V(r,2);Y(i,17,()=>u,e=>e.token,(e,n)=>{var r=Yp(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);Y(o,20,()=>U(n).opts,e=>e,(e,r)=>{var i=Vp(),a=z(i,!0);F(i),H(()=>{X(i,1,`py-1 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${(t.overrides[U(n).token]??U(n).opts[0])===r?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(a,r)}),W(`click`,i,()=>r===U(n).opts[0]?t.onReset(U(n).token):t.onSet(U(n).token,r)),K(e,i)}),F(o),F(r),H(()=>q(a,U(n).label)),K(e,r)});var a=V(i,2);H(()=>Z(a,`background-color:${U(k)};background-image:${U(O)}, ${U(D)};background-size:${U(A)};background-position:${U(ee)};background-repeat:${U(j)};background-attachment:${U(te)};animation:${U(ne)}`)),K(e,n)};J(Ze,e=>{U(y)&&e(Qe)}),F(qe),Me(2),F(re),H(()=>{Q(ae,`aria-expanded`,U(f)),q(se,U(f)?`▲`:`▼`),Q(ue,`aria-expanded`,U(p)),q(fe,U(p)?`▲`:`▼`),Q(ge,`aria-expanded`,U(m)),q(ve,U(m)?`▲`:`▼`),Q(Se,`aria-expanded`,U(h)),q(we,U(h)?`▲`:`▼`),Q(P,`aria-expanded`,U(g)),q(ke,U(g)?`▲`:`▼`),Q(Pe,`aria-expanded`,U(_)),q(Ie,U(_)?`▲`:`▼`),Q(Be,`aria-expanded`,U(v)),q(He,U(v)?`▲`:`▼`),Q(Je,`aria-expanded`,U(y)),q(Xe,U(y)?`▲`:`▼`)}),W(`click`,ae,()=>{R(f,!U(f))}),W(`click`,ue,()=>{R(p,!U(p))}),W(`click`,ge,()=>{R(m,!U(m))}),W(`click`,Se,()=>{R(h,!U(h))}),W(`click`,P,()=>{R(g,!U(g))}),W(`click`,Pe,()=>{R(_,!U(_))}),W(`click`,Be,()=>{R(v,!U(v))}),W(`click`,Je,()=>{R(y,!U(y))}),K(e,re),We()}Br([`click`,`input`]);var $p=G(`

Minimum interactive area — ensures accessibility on touch devices.

`,1),em=G(``),tm=G(`
`),nm=G(`
`),rm=G(`

Override individual z-index tokens in the "All tokens" tab.

`,1),im=G(`
Selection background
Selection text color

Select this text to preview the selection color.

.sf-selection--alt — alternate treatment for surfaces that invert colors relative to the page (e.g. a dark card on a light page).

Alt selection background
Alt selection text color

Select this text to preview the alt selection color.

`),am=G(`
`,1),om=G(`
`),sm=G(`

Controls the height / tap-target of all sized components (buttons, inputs, badges).

`,1),cm=G(``),lm=G(`
Caret color
Underline thickness

A sample link with the current underline settings.

`,1),um=G(`

Icon scale tokens used by .sf-icon-* utilities. Values are in em units relative to surrounding text.

`,1),dm=G(``),fm=G(``),pm=G(`

Default values for .sf-media images and replaced elements.

Fit
Position
`,1),mm=G(`
`),hm=G(`

Default to the device's env(safe-area-inset-*). Override only if you need fixed padding regardless of notch/home-indicator.

`,1),gm=G(`
`),_m=G(`

Applied inside @media print via optional/print.css.

Page size
`,1),vm=G(`
`),ym=G(`

Boolean CSS custom property flags (0 = off, 1 = on). Components toggle these to activate state-specific styles. Overriding globally forces all matching elements into that state — useful for testing and demos.

Required marker
`,1),bm=G(`

Selection colors, caret, links, focus ring, borders and sizes all render in the live preview (try the Components template). Scroll behavior applies to the page - itself and can't be shown in the static canvas.

`);function xm(e,t){Ue(t,!0);let n=[{label:`Below`,token:`--sf-z-below`,note:`Behind content (e.g. decorative BG)`},{label:`Raised`,token:`--sf-z-raised`,note:`Slightly above flow`},{label:`Dropdown`,token:`--sf-z-dropdown`,note:`Dropdowns, popovers`},{label:`Sticky`,token:`--sf-z-sticky`,note:`Sticky headers, toolbars`},{label:`Fixed`,token:`--sf-z-fixed`,note:`Fixed UI chrome`},{label:`Overlay`,token:`--sf-z-overlay`,note:`Modals, drawers backdrop`},{label:`Modal`,token:`--sf-z-modal`,note:`Modal dialogs`},{label:`Popover`,token:`--sf-z-popover`,note:`Tooltips, menus`},{label:`Tooltip`,token:`--sf-z-tooltip`,note:`Inline tooltips`},{label:`Toast`,token:`--sf-z-toast`,note:`Notifications`}],r=[{label:`Smooth`,value:`smooth`},{label:`Auto`,value:`auto`}],i=[{label:`XS`,token:`--sf-size-xs`,default:1.5},{label:`S`,token:`--sf-size-s`,default:2},{label:`M`,token:`--sf-size-m`,default:2.5},{label:`L`,token:`--sf-size-l`,default:2.75},{label:`XL`,token:`--sf-size-xl`,default:3.5}];function a(e,t,n){if(!e)return t;let r=parseFloat(n?e.replace(n,``):e);return isNaN(r)?t:r}let o=I(()=>a(t.overrides[`--sf-touch-target`],44,`px`)),s=I(()=>t.overrides[`--sf-scroll-behavior`]??`smooth`),c=I(()=>a(t.overrides[`--sf-z-base`],0)),l=I(()=>t.overrides[`--sf-caret-color`]??``),u=I(()=>a(t.overrides[`--sf-link-underline-offset`]?.replace(`em`,``),.15)),d=I(()=>t.overrides[`--sf-link-underline-thickness`]??`auto`),f=I(()=>t.overrides[`--sf-focus-ring-style`]??`solid`),p=L(!1),m=L(!1),g=L(!1),_=L(!1),v=L(!1),y=L(!1),b=L(!1),x=L(!1),S=L(!1),C=L(!1),w=L(!1),T=L(!1);function E(e){return a(t.overrides[e.token]?.replace(`rem`,``),e.default)}var D=bm(),O=z(D),k=z(O),A=V(z(k),2),ee=z(A,!0);F(A),F(k);var te=V(k,2),j=e=>{var n=$p(),r=B(n);{let e=I(()=>`--sf-touch-target`in t.overrides);$(r,{label:`Min touch size`,get value(){return U(o)},min:32,max:64,step:1,unit:`px`,help:`--sf-touch-target — minimum tappable area for interactive elements (WCAG 2.5.5)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-touch-target`,`${e}px`),onReset:()=>t.onReset(`--sf-touch-target`),rawDefault:`var(--sf-size-l)`,get variableOptions(){return uf},get currentRaw(){return t.overrides[`--sf-touch-target`]},onRawSet:e=>t.onSet(`--sf-touch-target`,e)})}var i=V(r,2),a=z(i),s=z(a);F(a),Me(2),F(i),H(()=>{Z(a,`width: ${U(o)}px; height: ${U(o)}px`),q(s,`${U(o)??``}px`)}),K(e,n)};J(te,e=>{U(p)&&e(j)}),F(O);var ne=V(O,4),M=z(ne),re=V(z(M),2),ie=z(re,!0);F(re),F(M);var ae=V(M,2),oe=e=>{var n=tm();Y(n,21,()=>r,e=>e.value,(e,n)=>{var r=em(),i=z(r,!0);F(r),H(()=>{X(r,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${U(s)===U(n).value?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(i,U(n).label)}),W(`click`,r,()=>U(n).value===`smooth`?t.onReset(`--sf-scroll-behavior`):t.onSet(`--sf-scroll-behavior`,U(n).value)),K(e,r)}),F(n),K(e,n)};J(ae,e=>{U(m)&&e(oe)}),F(ne);var se=V(ne,4),N=z(se),ce=V(z(N),2),le=z(ce,!0);F(ce),F(N);var ue=V(N,2),de=e=>{var r=rm(),i=B(r);{let e=I(()=>`--sf-z-base`in t.overrides);$(i,{label:`Base offset`,get value(){return U(c)},min:0,max:1e3,step:10,help:`--sf-z-base — added to all z-index tokens to avoid conflicts with existing stacking contexts`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-z-base`,String(e)),onReset:()=>t.onReset(`--sf-z-base`)})}var a=V(i,2);Y(a,21,()=>n,e=>e.token,(e,n)=>{let r=I(()=>U(n).token in t.overrides);var i=nm(),a=z(i),o=V(a,2),s=z(o,!0);F(o);var c=V(o,2),l=z(c,!0);F(c);var u=V(c,2),d=z(u,!0);F(u),F(i),H(e=>{X(a,1,`w-1.5 h-1.5 rounded-full shrink-0 ${U(r)?`bg-amber-400`:`bg-black/20 dark:bg-white/20`}`),q(s,U(n).label),q(l,U(n).note),q(d,e)},[()=>U(n).token.replace(`--sf-z-`,``)]),K(e,i)}),F(a),Me(2),K(e,r)};J(ue,e=>{U(g)&&e(de)}),F(se);var fe=V(se,4),pe=z(fe),me=V(z(pe),2),he=z(me,!0);F(me),F(pe);var ge=V(pe,2),_e=e=>{var n=im(),r=z(n),i=V(z(r),2);{let e=I(()=>t.overrides[`--sf-color-selection-bg`]??``),n=I(()=>`--sf-color-selection-bg`in t.overrides);Au(i,{token:`--sf-color-selection-bg`,get value(){return U(e)},placeholder:`default`,get isOverridden(){return U(n)},onSet:e=>t.onSet(`--sf-color-selection-bg`,e),onReset:()=>t.onReset(`--sf-color-selection-bg`)})}F(r);var a=V(r,2),o=V(z(a),2);{let e=I(()=>t.overrides[`--sf-color-selection-text`]??``),n=I(()=>`--sf-color-selection-text`in t.overrides);Au(o,{token:`--sf-color-selection-text`,get value(){return U(e)},placeholder:`default`,get isOverridden(){return U(n)},onSet:e=>t.onSet(`--sf-color-selection-text`,e),onReset:()=>t.onReset(`--sf-color-selection-text`)})}F(a);var s=V(a,2),c=z(s);F(s);var l=V(s,6),u=V(z(l),2);{let e=I(()=>t.overrides[`--sf-color-selection-bg--alt`]??``),n=I(()=>`--sf-color-selection-bg--alt`in t.overrides);Au(u,{token:`--sf-color-selection-bg--alt`,get value(){return U(e)},placeholder:`default`,get isOverridden(){return U(n)},onSet:e=>t.onSet(`--sf-color-selection-bg--alt`,e),onReset:()=>t.onReset(`--sf-color-selection-bg--alt`)})}F(l);var d=V(l,2),f=V(z(d),2);{let e=I(()=>t.overrides[`--sf-color-selection-text--alt`]??``),n=I(()=>`--sf-color-selection-text--alt`in t.overrides);Au(f,{token:`--sf-color-selection-text--alt`,get value(){return U(e)},placeholder:`default`,get isOverridden(){return U(n)},onSet:e=>t.onSet(`--sf-color-selection-text--alt`,e),onReset:()=>t.onReset(`--sf-color-selection-text--alt`)})}F(d);var p=V(d,2),m=z(p);F(p),F(n),H(()=>{Z(c,`--sf-color-selection-bg: ${t.overrides[`--sf-color-selection-bg`]??`#6366f1`}; --sf-color-selection-text: ${t.overrides[`--sf-color-selection-text`]??`#ffffff`}`),Z(m,`--sf-color-selection-bg: ${t.overrides[`--sf-color-selection-bg--alt`]??`#4338ca`}; --sf-color-selection-text: ${t.overrides[`--sf-color-selection-text--alt`]??`#e0e7ff`}`)}),K(e,n)};J(ge,e=>{U(_)&&e(_e)}),F(fe);var ve=V(fe,4),ye=z(ve),be=V(z(ye),2),xe=z(be,!0);F(be),F(ye);var Se=V(ye,2),Ce=e=>{var n=am(),r=B(n);Y(r,20,()=>[`solid`,`dashed`,`dotted`],e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-focus-ring-style`]??`solid`);var i=em(),a=z(i,!0);F(i),H(()=>{X(i,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer capitalize ${U(r)===n?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(a,n)}),W(`click`,i,()=>n===`solid`?t.onReset(`--sf-focus-ring-style`):t.onSet(`--sf-focus-ring-style`,n)),K(e,i)}),F(r);var i=V(r,2),a=z(i),o=z(a);F(a),F(i),H(()=>{Z(a,`outline: 2px ${U(f)} ${t.overrides[`--sf-focus-ring-color`]||`oklch(0.7 0.2 235)`}; outline-offset: 2px`),q(o,`Focus ring · ${U(f)??``}`)}),K(e,n)};J(Se,e=>{U(v)&&e(Ce)}),F(ve);var we=V(ve,4),Te=z(we),Ee=V(z(Te),2),De=z(Ee,!0);F(Ee),F(Te);var P=V(Te,2),Oe=e=>{var n=sm(),r=V(B(n),2);Y(r,21,()=>i,e=>e.token,(e,n)=>{let r=I(()=>E(U(n)));{let i=I(()=>`${U(n).token} — component size step ${U(n).label}`),a=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:1,max:5,step:.05,unit:`rem`,get help(){return U(i)},get overridden(){return U(a)},onChange:e=>t.onSet(U(n).token,`${e}rem`),onReset:()=>t.onReset(U(n).token)})}}),F(r);var a=V(r,2);Y(a,21,()=>i,e=>e.token,(e,t)=>{let n=I(()=>E(U(t)));var r=om(),i=z(r),a=V(i,2),o=z(a,!0);F(a),F(r),H(e=>{Z(i,e),q(o,U(t).label)},[()=>`height: ${Math.min(U(n)*14,64)}px`]),K(e,r)}),F(a),K(e,n)};J(P,e=>{U(y)&&e(Oe)}),F(we);var ke=V(we,4),Ae=z(ke),je=V(z(Ae),2),Ne=z(je,!0);F(je),F(Ae);var Pe=V(Ae,2),Fe=e=>{var n=lm(),r=B(n),i=V(z(r),2);{let e=I(()=>`--sf-caret-color`in t.overrides);Au(i,{token:`--sf-caret-color`,get value(){return U(l)},placeholder:`default (action color)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-caret-color`,e),onReset:()=>t.onReset(`--sf-caret-color`)})}F(r);var a=V(r,2);{let e=I(()=>`--sf-link-underline-offset`in t.overrides);$(a,{label:`Underline offset`,get value(){return U(u)},min:0,max:.5,step:.01,unit:`em`,help:`--sf-link-underline-offset — gap between text baseline and underline`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-link-underline-offset`,`${e}em`),onReset:()=>t.onReset(`--sf-link-underline-offset`)})}var o=V(a,2),s=z(o),c=V(z(s),2),f=e=>{var n=cm();W(`click`,n,()=>t.onReset(`--sf-link-underline-thickness`)),K(e,n)};J(c,e=>{`--sf-link-underline-thickness`in t.overrides&&e(f)}),F(s);var p=V(s,2);Y(p,20,()=>[[`auto`,`auto`],[`1px`,`1px`],[`2px`,`2px`],[`3px`,`3px`]],([e,t])=>t,(e,n)=>{var r=I(()=>h(n,2));let i=()=>U(r)[0],a=()=>U(r)[1];var o=em(),s=z(o,!0);F(o),H(()=>{X(o,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${U(d)===a()?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(s,i())}),W(`click`,o,()=>a()===`auto`?t.onReset(`--sf-link-underline-thickness`):t.onSet(`--sf-link-underline-thickness`,a())),K(e,o)}),F(p),F(o);var m=V(o,2),g=z(m),_=V(g,2),v=V(z(_));Me(),F(_),F(m),H(()=>{Z(g,`caret-color:${U(l)||`#6366f1`}`),Z(v,`text-decoration:underline;text-underline-offset:${U(u)}em;text-decoration-thickness:${U(d)}`)}),W(`click`,v,e=>e.preventDefault()),K(e,n)};J(Pe,e=>{U(b)&&e(Fe)}),F(ke);var Ie=V(ke,4),Le=z(Ie),Re=V(z(Le),2),ze=z(Re,!0);F(Re),F(Le);var Be=V(Le,2),Ve=e=>{var n=um(),r=V(B(n),2);Y(r,20,()=>[{label:`xs`,token:`--sf-icon-xs`,def:.875},{label:`s`,token:`--sf-icon-s`,def:1},{label:`m`,token:`--sf-icon-m`,def:1.5},{label:`l`,token:`--sf-icon-l`,def:2},{label:`xl`,token:`--sf-icon-xl`,def:3},{label:`2xl`,token:`--sf-icon-2xl`,def:4}],e=>e.token,(e,n)=>{{let r=I(()=>a(t.overrides[n.token]?.replace(`em`,``),n.def)),i=I(()=>n.token in t.overrides);$(e,{get label(){return n.label},get value(){return U(r)},min:.5,max:6,step:.125,unit:`em`,get overridden(){return U(i)},onChange:e=>t.onSet(n.token,`${e}em`),onReset:()=>t.onReset(n.token)})}}),F(r);var i=V(r,2);{let e=I(()=>a(t.overrides[`--sf-icon-box-pad`]?.replace(`em`,``),.5)),n=I(()=>`--sf-icon-box-pad`in t.overrides);$(i,{label:`Box padding`,get value(){return U(e)},min:0,max:2,step:.125,unit:`em`,help:`--sf-icon-box-pad — padding around icon when using .sf-icon-box`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-icon-box-pad`,`${e}em`),onReset:()=>t.onReset(`--sf-icon-box-pad`)})}K(e,n)};J(Be,e=>{U(x)&&e(Ve)}),F(Ie);var He=V(Ie,4),Ge=z(He),Ke=V(z(Ge),2),qe=z(Ke,!0);F(Ke),F(Ge);var Je=V(Ge,2),Ye=e=>{var n=pm(),r=V(B(n),2),i=V(z(r),2);Y(i,20,()=>[`cover`,`contain`,`fill`,`none`],e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-object-fit`]??`cover`);var i=em(),a=z(i,!0);F(i),H(()=>{X(i,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${U(r)===n?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(a,n)}),W(`click`,i,()=>n===`cover`?t.onReset(`--sf-object-fit`):t.onSet(`--sf-object-fit`,n)),K(e,i)}),F(i);var a=V(i,2),o=e=>{var n=dm();W(`click`,n,()=>t.onReset(`--sf-object-fit`)),K(e,n)};J(a,e=>{`--sf-object-fit`in t.overrides&&e(o)}),F(r);var s=V(r,2),c=V(z(s),2);zi(c);var l=V(c,2),u=e=>{var n=fm();W(`click`,n,()=>t.onReset(`--sf-object-position`)),K(e,n)};J(l,e=>{`--sf-object-position`in t.overrides&&e(u)}),F(s),H(()=>Bi(c,t.overrides[`--sf-object-position`]??``)),W(`input`,c,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-object-position`,n):t.onReset(`--sf-object-position`)}),K(e,n)};J(Je,e=>{U(S)&&e(Ye)}),F(He);var Xe=V(He,4),Ze=z(Xe),Qe=V(z(Ze),2),$e=z(Qe,!0);F(Qe),F(Ze);var et=V(Ze,2),tt=e=>{var n=hm(),r=V(B(n),2);Y(r,20,()=>[{label:`Top`,token:`--sf-safe-top`,placeholder:`env(safe-area-inset-top, 0px)`},{label:`Right`,token:`--sf-safe-right`,placeholder:`env(safe-area-inset-right, 0px)`},{label:`Bottom`,token:`--sf-safe-bottom`,placeholder:`env(safe-area-inset-bottom, 0px)`},{label:`Left`,token:`--sf-safe-left`,placeholder:`env(safe-area-inset-left, 0px)`}],e=>e.token,(e,n)=>{var r=mm(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=fm();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.placeholder)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),F(r),K(e,n)};J(et,e=>{U(w)&&e(tt)}),F(Xe);var nt=V(Xe,4),rt=z(nt),it=V(z(rt),2),at=z(it,!0);F(it),F(rt);var ot=V(rt,2),st=e=>{var n=_m(),r=V(B(n),2),i=V(z(r),2);Y(i,20,()=>[`a4`,`letter`,`legal`,`a3`],e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-print-page-size`]??`a4`);var i=em(),a=z(i,!0);F(i),H(()=>{X(i,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${U(r)===n?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(a,n)}),W(`click`,i,()=>n===`a4`?t.onReset(`--sf-print-page-size`):t.onSet(`--sf-print-page-size`,n)),K(e,i)}),F(i),F(r),Y(V(r,2),16,()=>[{label:`Base size`,token:`--sf-print-base-size`,placeholder:`11pt`},{label:`Page margin`,token:`--sf-print-page-margin`,placeholder:`2cm`}],e=>e.token,(e,n)=>{var r=gm(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=fm();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.placeholder)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),K(e,n)};J(ot,e=>{U(C)&&e(st)}),F(nt);var ct=V(nt,4),lt=z(ct),ut=V(z(lt),2),dt=z(ut,!0);F(ut),F(lt);var ft=V(lt,2),pt=e=>{var n=ym(),r=V(B(n),2);Y(r,20,()=>[{label:`sf-is-active`,token:`--sf-is-active`,note:`Active/selected state`},{label:`sf-is-current`,token:`--sf-is-current`,note:`Current page/item`},{label:`sf-is-open`,token:`--sf-is-open`,note:`Open/expanded state`},{label:`sf-is-pressed`,token:`--sf-is-pressed`,note:`Pressed/depressed state`}],e=>e.token,(e,n)=>{let r=I(()=>t.overrides[n.token]??`0`);var i=vm(),a=z(i),o=z(a);F(a);var s=V(a,2),c=z(s,!0);F(s);var l=V(s,2),u=z(l,!0);F(l);var d=V(l,2),f=e=>{var r=fm();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(d,e=>{n.token in t.overrides&&e(f)}),F(i),H(()=>{Q(a,`aria-label`,n.label),Q(a,`aria-pressed`,U(r)===`1`),X(a,1,`w-8 h-4 rounded-full transition-colors relative cursor-pointer shrink-0 ${U(r)===`1`?`bg-indigo-600`:`bg-black/10 dark:bg-white/10`}`),X(o,1,`absolute top-0.5 w-3 h-3 bg-white rounded-full shadow transition-transform ${U(r)===`1`?`translate-x-4`:`translate-x-0.5`}`),q(c,n.label),q(u,n.note)}),W(`click`,a,()=>U(r)===`1`?t.onReset(n.token):t.onSet(n.token,`1`)),K(e,i)}),F(r);var i=V(r,2),a=V(z(i),2);zi(a);var o=V(a,2),s=e=>{var n=fm();W(`click`,n,()=>t.onReset(`--sf-field-required-marker`)),K(e,n)};J(o,e=>{`--sf-field-required-marker`in t.overrides&&e(s)}),F(i),H(()=>Bi(a,t.overrides[`--sf-field-required-marker`]??``)),W(`input`,a,e=>{let n=e.target.value;n?t.onSet(`--sf-field-required-marker`,n):t.onReset(`--sf-field-required-marker`)}),K(e,n)};J(ft,e=>{U(T)&&e(pt)}),F(ct),Me(4),F(D),H(()=>{Q(k,`aria-expanded`,U(p)),q(ee,U(p)?`▲`:`▼`),Q(M,`aria-expanded`,U(m)),q(ie,U(m)?`▲`:`▼`),Q(N,`aria-expanded`,U(g)),q(le,U(g)?`▲`:`▼`),Q(pe,`aria-expanded`,U(_)),q(he,U(_)?`▲`:`▼`),Q(ye,`aria-expanded`,U(v)),q(xe,U(v)?`▲`:`▼`),Q(Te,`aria-expanded`,U(y)),q(De,U(y)?`▲`:`▼`),Q(Ae,`aria-expanded`,U(b)),q(Ne,U(b)?`▲`:`▼`),Q(Le,`aria-expanded`,U(x)),q(ze,U(x)?`▲`:`▼`),Q(Ge,`aria-expanded`,U(S)),q(qe,U(S)?`▲`:`▼`),Q(Ze,`aria-expanded`,U(w)),q($e,U(w)?`▲`:`▼`),Q(rt,`aria-expanded`,U(C)),q(at,U(C)?`▲`:`▼`),Q(lt,`aria-expanded`,U(T)),q(dt,U(T)?`▲`:`▼`)}),W(`click`,k,()=>{R(p,!U(p))}),W(`click`,M,()=>{R(m,!U(m))}),W(`click`,N,()=>{R(g,!U(g))}),W(`click`,pe,()=>{R(_,!U(_))}),W(`click`,ye,()=>{R(v,!U(v))}),W(`click`,Te,()=>{R(y,!U(y))}),W(`click`,Ae,()=>{R(b,!U(b))}),W(`click`,Le,()=>{R(x,!U(x))}),W(`click`,Ge,()=>{R(S,!U(S))}),W(`click`,Ze,()=>{R(w,!U(w))}),W(`click`,rt,()=>{R(C,!U(C))}),W(`click`,lt,()=>{R(T,!U(T))}),K(e,D),We()}Br([`click`,`input`]);var Sm=G(``),Cm=G(`
Variant (preview only)
Style
Size
Label size — --sf-btn-font-size
Label weight — --sf-btn-font-weight
`,1),wm=G(`

Card title

Body copy showing padding, gap, and background live.

Radius (outer, computed)

--sf-card-radius-outer = radius + padding (concentric math) — not independently overridable, always computed from the two sliders above.

Background — --sf-card-bg
Border color — --sf-card-border-color
Shadow — --sf-card-shadow
Elevated shadow — --sf-card-shadow--elevated
Hover shadow (interactive) — --sf-card-shadow--hover
Media aspect ratio — --sf-card-media-ratio
Title size — --sf-card-heading-size
Nested button size — --sf-card-btn-font-size
Media object-fit — --sf-object-fit (global, affects all img/video)
`,1),Tm=G(`
`);function Em(e,t){Ue(t,!0);let n=[`2xs`,`xs`,`s`,`m`,`l`,`xl`,`2xl`],r=[`xs`,`s`,`m`,`l`,`xl`,`2xl`],i=[`square`,`video`,`cinema`,`4-3`,`3-2`,`portrait`,`golden`],a=[`100`,`200`,`300`,`400`,`500`,`600`,`700`,`800`,`900`],o=[`default`,`primary`,`neutral`,`success`,`warning`,`info`,`danger`],s=[{id:`fill`,label:`Fill`},{id:`secondary`,label:`Secondary`},{id:`ghost`,label:`Ghost`},{id:`outline`,label:`Outline`}],c=[`xs`,`s`,`m`,`l`,`xl`],l=[{step:`surface`,label:`Surface`},{step:`base`,label:`Base`},{step:`inset`,label:`Inset`},{step:`raised`,label:`Raised`}],u=[{step:`border`,label:`Default`},{step:`border--subtle`,label:`Subtle`},{step:`border--strong`,label:`Strong`}],d=[{label:`Radius`,token:`--sf-btn-radius`,unit:`rem`,min:0,max:2,step:.05,default:.5,rawDefault:`var(--sf-radius-m)`,variableOptions:sf},{label:`Padding block`,token:`--sf-btn-padding-block`,unit:`rem`,min:0,max:1,step:.025,default:.375,rawDefault:`var(--sf-space-xs)`,variableOptions:of},{label:`Padding inline`,token:`--sf-btn-padding-inline`,unit:`rem`,min:0,max:2,step:.025,default:1,rawDefault:`var(--sf-space-m)`,variableOptions:of},{label:`Gap (icon+label)`,token:`--sf-btn-gap`,unit:`rem`,min:0,max:1,step:.0125,default:.25,rawDefault:`var(--sf-space-2xs)`,variableOptions:of},{label:`Border width`,token:`--sf-btn-border-width`,unit:`px`,min:0,max:4,step:.5,default:1,rawDefault:`var(--sf-border-width-1)`,variableOptions:cf},{label:`Min height`,token:`--sf-btn-min-height`,unit:`rem`,min:1,max:4,step:.125,default:2.75,rawDefault:`var(--sf-touch-target)`,variableOptions:uf}],f=[{label:`Padding`,token:`--sf-card-padding`,unit:`rem`,min:0,max:3,step:.05,default:1.5,rawDefault:`var(--sf-space-l)`,variableOptions:of},{label:`Gap (header/footer)`,token:`--sf-card-gap`,unit:`rem`,min:0,max:2,step:.05,default:1,rawDefault:`var(--sf-space-m)`,variableOptions:of},{label:`Radius (inner)`,token:`--sf-card-radius`,unit:`rem`,min:0,max:2,step:.05,default:.5,rawDefault:`var(--sf-radius-m)`,variableOptions:sf},{label:`Border width`,token:`--sf-card-border-width`,unit:`px`,min:0,max:4,step:.5,default:1,rawDefault:`var(--sf-border-width-1)`,variableOptions:cf},{label:`Media radius`,token:`--sf-card-media-radius`,unit:`rem`,min:0,max:2,step:.05,default:.5,rawDefault:`var(--sf-card-radius, var(--sf-radius-m))`,variableOptions:sf}],p=L(!1),m=L(!1),h=L(`primary`),g=L(`fill`),_=L(`m`),v=L(!1),y=L(!1),b=L(!1),x=L(!1),S=L(!1);function C(){let e=[`sf-btn`];return U(h)!=="default"&&e.push(`sf-btn--${U(h)}`),U(g)!==`fill`&&e.push(`sf-btn--${U(g)}`),U(_)!==`m`&&e.push(`sf-btn--${U(_)}`),e.join(` `)}function w(){let e=[`sf-card`];return U(b)&&e.push(`sf-card--bordered`),U(x)&&e.push(`sf-card--elevated`),U(S)&&e.push(`sf-card--interactive`),e.join(` `)}function T(e){let n=t.overrides[e.token];if(!n||/^(var|calc|clamp)\(/.test(n.trim()))return e.default;let r=parseFloat(n);return isNaN(r)?e.default:r}function E(e,n,r,i){let a=t.overrides[e];if(!a)return i;let o=a.match(RegExp(`^var\\(--sf-${n}-([\\w-]+)\\)$`));return o&&r.includes(o[1])?o[1]:i}function D(e,n,r,i){r===i?t.onReset(e):t.onSet(e,`var(--sf-${n}-${r})`)}function O(e){return!!e&&/^(var|calc|clamp)\(/.test(e.trim())}let k=f.find(e=>e.token===`--sf-card-radius`),A=f.find(e=>e.token===`--sf-card-padding`),ee=I(()=>T(k)),te=I(()=>T(A)),j=I(()=>O(t.overrides[k.token])||O(t.overrides[A.token]));var ne=Tm(),M=z(ne),re=z(M),ie=V(z(re),2),ae=z(ie,!0);F(ie),F(re);var oe=V(re,2),se=e=>{var r=Cm(),i=B(r),l=V(z(i),2);Y(l,20,()=>o,e=>e,(e,t)=>{var n=Sm(),r=z(n,!0);F(n),H(()=>{X(n,1,`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer capitalize ${U(h)===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(r,t)}),W(`click`,n,()=>{R(h,t,!0)}),K(e,n)}),F(l);var u=V(l,4);Y(u,21,()=>s,e=>e.id,(e,t)=>{var n=Sm(),r=z(n,!0);F(n),H(()=>{X(n,1,`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(g)===U(t).id?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(r,U(t).label)}),W(`click`,n,()=>{R(g,U(t).id,!0)}),K(e,n)}),F(u);var f=V(u,4);Y(f,20,()=>c,e=>e,(e,t)=>{var n=Sm(),r=z(n,!0);F(n),H(()=>{X(n,1,`px-2.5 py-1 rounded-lg text-[10px] border transition-all cursor-pointer uppercase ${U(_)===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(r,t)}),W(`click`,n,()=>{R(_,t,!0)}),K(e,n)}),F(f);var p=V(f,2),m=z(p),b=z(m);zi(b),Me(),F(m);var x=V(m,2),S=z(x);zi(S),Me(),F(x),F(p),F(i);var w=V(i,2),O=z(w);let k;var A=z(O,!0);F(O),F(w);var ee=V(w,2),te=z(ee);Y(te,17,()=>d,e=>e.token,(e,n)=>{{let r=I(()=>T(U(n))),i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},get min(){return U(n).min},get max(){return U(n).max},get step(){return U(n).step},get unit(){return U(n).unit},get help(){return U(n).token},get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,`${e}${U(n).unit}`),onReset:()=>t.onReset(U(n).token),get rawDefault(){return U(n).rawDefault},get variableOptions(){return U(n).variableOptions},get currentRaw(){return t.overrides[U(n).token]},onRawSet:e=>t.onSet(U(n).token,e)})}});var j=V(te,2),ne=V(z(j),2);Y(ne,20,()=>n,e=>e,(e,t)=>{let r=I(()=>E(`--sf-btn-font-size`,`text`,n,`m`));var i=Sm(),a=z(i,!0);F(i),H(()=>{X(i,1,`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(r)===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(a,t)}),W(`click`,i,()=>D(`--sf-btn-font-size`,`text`,t,`m`)),K(e,i)}),F(ne),F(j);var M=V(j,2),re=V(z(M),2);Y(re,20,()=>a,e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-btn-font-weight`]??`600`);var i=Sm(),a=z(i,!0);F(i),H(e=>{Z(i,e),X(i,1,`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(r)===n?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(a,n)},[()=>`font-weight:${parseInt(n)}`]),W(`click`,i,()=>n===`600`?t.onReset(`--sf-btn-font-weight`):t.onSet(`--sf-btn-font-weight`,n)),K(e,i)}),F(re),F(M),F(ee),H(e=>{k=X(O,1,e,null,k,{"sf-is-loading":U(y)}),O.disabled=U(v),q(A,U(y)?`Loading`:`Button label`)},[()=>yi(C())]),Ji(b,()=>U(v),e=>R(v,e)),Ji(S,()=>U(y),e=>R(y,e)),K(e,r)};J(oe,e=>{U(p)&&e(se)}),F(M);var N=V(M,4),ce=z(N),le=V(z(ce),2),ue=z(le,!0);F(le),F(ce);var de=V(ce,2),fe=e=>{var a=wm(),o=B(a),s=z(o),c=z(s);zi(c),Me(),F(s);var d=V(s,2),p=z(d);zi(p),Me(),F(d);var m=V(d,2),h=z(m);zi(h),Me(),F(m),F(o);var g=V(o,2),_=z(g);F(g);var v=V(g,2),y=z(v);Y(y,17,()=>f,e=>e.token,(e,n)=>{{let r=I(()=>T(U(n))),i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},get min(){return U(n).min},get max(){return U(n).max},get step(){return U(n).step},get unit(){return U(n).unit},get help(){return U(n).token},get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,`${e}${U(n).unit}`),onReset:()=>t.onReset(U(n).token),get rawDefault(){return U(n).rawDefault},get variableOptions(){return U(n).variableOptions},get currentRaw(){return t.overrides[U(n).token]},onRawSet:e=>t.onSet(U(n).token,e)})}});var C=V(y,2),O=V(z(C),2),k=z(O,!0);F(O),F(C);var A=V(C,4),ne=V(z(A),2);Y(ne,21,()=>l,e=>e.step,(e,t)=>{let n=I(()=>E(`--sf-card-bg`,`color`,l.map(e=>e.step),`surface`));var r=Sm(),i=z(r,!0);F(r),H(()=>{X(r,1,`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(n)===U(t).step?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(i,U(t).label)}),W(`click`,r,()=>D(`--sf-card-bg`,`color`,U(t).step,`surface`)),K(e,r)}),F(ne),F(A);var M=V(A,2),re=V(z(M),2);Y(re,21,()=>u,e=>e.step,(e,t)=>{let n=I(()=>E(`--sf-card-border-color`,`color`,u.map(e=>e.step),`border`));var r=Sm(),i=z(r,!0);F(r),H(()=>{X(r,1,`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(n)===U(t).step?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(i,U(t).label)}),W(`click`,r,()=>D(`--sf-card-border-color`,`color`,U(t).step,`border`)),K(e,r)}),F(re),F(M);var ie=V(M,2),ae=V(z(ie),2);Y(ae,20,()=>r,e=>e,(e,t)=>{let n=I(()=>E(`--sf-card-shadow`,`shadow`,r,`s`));var i=Sm(),a=z(i,!0);F(i),H(()=>{X(i,1,`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(n)===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(a,t)}),W(`click`,i,()=>D(`--sf-card-shadow`,`shadow`,t,`s`)),K(e,i)}),F(ae),F(ie);var oe=V(ie,2),se=V(z(oe),2);Y(se,20,()=>r,e=>e,(e,t)=>{let n=I(()=>E(`--sf-card-shadow--elevated`,`shadow`,r,`l`));var i=Sm(),a=z(i,!0);F(i),H(()=>{X(i,1,`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(n)===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(a,t)}),W(`click`,i,()=>D(`--sf-card-shadow--elevated`,`shadow`,t,`l`)),K(e,i)}),F(se),F(oe);var N=V(oe,2),ce=V(z(N),2);Y(ce,20,()=>r,e=>e,(e,t)=>{let n=I(()=>E(`--sf-card-shadow--hover`,`shadow`,r,`l`));var i=Sm(),a=z(i,!0);F(i),H(()=>{X(i,1,`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(n)===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(a,t)}),W(`click`,i,()=>D(`--sf-card-shadow--hover`,`shadow`,t,`l`)),K(e,i)}),F(ce),F(N);var le=V(N,2),ue=V(z(le),2);Y(ue,20,()=>i,e=>e,(e,t)=>{let n=I(()=>E(`--sf-card-media-ratio`,`ratio`,i,`video`));var r=Sm(),a=z(r,!0);F(r),H(()=>{X(r,1,`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(n)===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(a,t)}),W(`click`,r,()=>D(`--sf-card-media-ratio`,`ratio`,t,`video`)),K(e,r)}),F(ue),F(le);var de=V(le,2),fe=V(z(de),2);Y(fe,20,()=>n,e=>e,(e,t)=>{let r=I(()=>E(`--sf-card-heading-size`,`text`,n,`xl`));var i=Sm(),a=z(i,!0);F(i),H(()=>{X(i,1,`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(r)===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(a,t)}),W(`click`,i,()=>D(`--sf-card-heading-size`,`text`,t,`xl`)),K(e,i)}),F(fe),F(de);var pe=V(de,2),me=V(z(pe),2);Y(me,20,()=>n,e=>e,(e,t)=>{let r=I(()=>E(`--sf-card-btn-font-size`,`text`,n,`s`));var i=Sm(),a=z(i,!0);F(i),H(()=>{X(i,1,`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(r)===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(a,t)}),W(`click`,i,()=>D(`--sf-card-btn-font-size`,`text`,t,`s`)),K(e,i)}),F(me),F(pe);var he=V(pe,2),ge=V(z(he),2);Y(ge,20,()=>[`cover`,`contain`],e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-object-fit`]??`cover`);var i=Sm(),a=z(i,!0);F(i),H(()=>{X(i,1,`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(r)===n?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(a,n)}),W(`click`,i,()=>n===`cover`?t.onReset(`--sf-object-fit`):t.onSet(`--sf-object-fit`,n)),K(e,i)}),F(ge),F(he),F(v),H((e,t)=>{X(_,1,e),q(k,t)},[()=>yi(w()),()=>U(j)?`depends on variable`:`${(U(ee)+U(te)).toFixed(2)}rem`]),Ji(c,()=>U(b),e=>R(b,e)),Ji(p,()=>U(x),e=>R(x,e)),Ji(h,()=>U(S),e=>R(S,e)),K(e,a)};J(de,e=>{U(m)&&e(fe)}),F(N),F(ne),H(()=>{Q(re,`aria-expanded`,U(p)),q(ae,U(p)?`▲`:`▼`),Q(ce,`aria-expanded`,U(m)),q(ue,U(m)?`▲`:`▼`)}),W(`click`,re,()=>{R(p,!U(p))}),W(`click`,ce,()=>{R(m,!U(m))}),K(e,ne),We()}Br([`click`]);var Dm=G(`

No saved themes yet.

Configure your tokens, then save them above.

`),Om=G(`
`),km=G(`
`),Am=G(` `),jm=G(`
`),Mm=G(`
`),Nm=G(``),Pm=G(`
Themes

Save your current configuration as a named theme, then re-apply it any time. - Themes are stored in this browser.

Save current

`);function Fm(e,t){Ue(t,!0);let n=L(nn(yc())),r=L(``),i=I(()=>Object.keys(t.overrides).length);function a(e,t){let n=Object.keys(e);return n.length===Object.keys(t).length?n.every(n=>e[n]===t[n]):!1}let o=I(()=>U(n).find(e=>a(e.overrides,t.overrides))?.id??``);function s(){U(i)!==0&&(R(n,bc(U(r),t.overrides),!0),R(r,``))}function c(e){R(n,xc(e),!0)}var l=Pm(),u=V(z(l),4),d=V(z(u),2),f=z(d);zi(f);var p=V(f,2);oo(z(p),{class:`w-3 h-3`}),Me(),F(p),F(d);var m=V(d,2),g=z(m),_=e=>{K(e,Yr(`No active overrides yet — adjust some tokens first.`))},v=e=>{var t=Yr();H(()=>q(t,`Captures all ${U(i)??``} active override${U(i)===1?``:`s`}.`)),K(e,t)};J(g,e=>{U(i)===0?e(_):e(v,-1)}),F(m),F(u);var y=V(u,2),b=z(y),x=e=>{K(e,Dm())},S=e=>{var r=Xr();Y(B(r),17,()=>U(n),e=>e.id,(e,n)=>{let r=I(()=>Object.keys(U(n).overrides).length);var i=Mm(),a=z(i),s=z(a),l=z(s,!0);F(s);var u=V(s,2),d=z(u),f=z(d),p=V(f),m=e=>{va(e,{class:`w-3 h-3 text-indigo-600 dark:text-indigo-400`})};J(p,e=>{U(o)===U(n).id&&e(m)}),F(d);var g=V(d,2),_=z(g);F(g),F(u);var v=V(u,2),y=z(v),b=V(y,2);Do(z(b),{class:`w-3.5 h-3.5`}),F(b),F(v),F(a);var x=V(a,2),S=e=>{var t=jm(),i=z(t);Y(i,17,()=>Object.entries(U(n).overrides).slice(0,5),([e,t])=>e,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=km(),o=z(a),s=e=>{var t=Om();let n;H(()=>n=Z(t,``,n,{background:i()})),K(e,t)},c=I(()=>r().includes(`color`)||r().includes(`source`));J(o,e=>{U(c)&&e(s)});var l=V(o,2),u=z(l,!0);F(l),F(a),H(e=>q(u,e),[()=>r().replace(`--sf-`,``)]),K(e,a)});var a=V(i,2),o=e=>{var t=Am(),n=z(t);F(t),H(()=>q(n,`+${U(r)-5} more`)),K(e,t)};J(a,e=>{U(r)>5&&e(o)}),F(t),K(e,t)};J(x,e=>{U(r)>0&&e(S)}),F(i),H(()=>{X(i,1,`group rounded-xl border transition-all overflow-hidden ${U(o)===U(n).id?`border-indigo-500/40 bg-indigo-500/10`:`border-black/8 dark:border-white/8 bg-black/4 dark:bg-white/4 hover:bg-black/6 dark:hover:bg-white/6 hover:border-black/14 dark:hover:border-white/14`}`),q(l,U(n).icon),q(f,`${U(n).name??``} `),q(_,`${U(r)??``} override${U(r)===1?``:`s`}`)}),W(`click`,y,()=>t.onApplyTheme(U(n).overrides)),W(`click`,b,()=>c(U(n).id)),K(e,i)}),K(e,r)};J(b,e=>{U(n).length===0?e(x):e(S,-1)}),F(y);var C=V(y,2),w=e=>{var n=Nm();W(`click`,n,function(...e){t.onResetAll?.apply(this,e)}),K(e,n)};J(C,e=>{U(i)>0&&e(w)}),F(l),H(()=>p.disabled=U(i)===0),W(`keydown`,f,e=>{e.key===`Enter`&&s()}),qi(f,()=>U(r),e=>R(r,e)),W(`click`,p,s),K(e,l),We()}Br([`keydown`,`click`]);var Im=G(` Link copied!`,1),Lm=G(` Copy shareable link`,1),Rm=G(`
Export

CSS output
Usage
Paste this CSS into your project after the SLASHED import.
`);function zm(e,t){Ue(t,!0);let n=L(`layer`),r=L(!1),i=L(!1),a=I(()=>cc(t.overrides,{mode:U(n),banner:!0})),o=I(()=>Object.keys(t.overrides).length);async function s(){try{await navigator.clipboard.writeText(U(a)),R(r,!0),setTimeout(()=>{R(r,!1)},2e3)}catch{}}async function c(){try{let e=fc(t.overrides,Ic());await navigator.clipboard.writeText(e),R(i,!0),setTimeout(()=>{R(i,!1)},2e3)}catch{}}function l(){let e=new Blob([U(a)],{type:`text/css`}),t=URL.createObjectURL(e),n=document.createElement(`a`);n.href=t,n.download=`slashed-overrides.css`,n.click(),URL.revokeObjectURL(t)}function u(e){return e.includes(`color`)||e.includes(`scrim-color`)||e.includes(`shadow-color`)?`color`:e.includes(`duration`)||e.includes(`delay`)||e.includes(`transition-duration`)?`duration`:e.includes(`radius`)||e.includes(`space`)||e.includes(`size`)||e.includes(`width`)||e.includes(`height`)||e.includes(`gap`)||e.includes(`blur`)||e.includes(`text-`)||e.includes(`leading`)||e.includes(`tracking`)?`dimension`:e.includes(`font-family`)||e.includes(`font-mono`)||e.includes(`font-body`)||e.includes(`font-heading`)||e.includes(`font-code`)?`fontFamily`:e.includes(`font-weight`)||e.includes(`weight`)?`fontWeight`:`string`}function d(){let e={};for(let[n,r]of Object.entries(t.overrides)){let t=n.replace(/^--sf-/,``).replace(/-/g,`.`);e[t]={$value:r,$type:u(n)}}let n=JSON.stringify({$schema:`https://design-tokens.github.io/community-group/format/`,...e},null,2),r=new Blob([n],{type:`application/json`}),i=URL.createObjectURL(r),a=document.createElement(`a`);a.href=i,a.download=`slashed-tokens.w3c.json`,a.click(),URL.revokeObjectURL(i)}var f=Rm(),p=z(f),m=V(z(p),2),h=z(m,!0);F(m),F(p);var g=V(p,2),_=z(g),v=e=>{var t=Im();va(B(t),{class:`w-3 h-3 text-emerald-600 dark:text-emerald-400`}),Me(2),K(e,t)},y=e=>{var t=Lm();Ra(B(t),{class:`w-3 h-3`}),Me(),K(e,t)};J(_,e=>{U(i)?e(v):e(y,-1)}),F(g);var b=V(g,2),x=V(z(b),2),S=z(x),C=V(S,2);F(x),F(b);var w=V(b,2),T=z(w),E=z(T,!0);F(T);var D=V(T,2),O=z(D),k=z(O),A=e=>{va(e,{class:`w-3 h-3 text-emerald-600 dark:text-emerald-400`})},ee=e=>{Ea(e,{class:`w-3 h-3`})};J(k,e=>{U(r)?e(A):e(ee,-1)}),F(O);var te=V(O,2);Oa(z(te),{class:`w-3 h-3`}),F(te),F(D),F(w);var j=V(w,2);Oa(z(j),{class:`w-3 h-3`}),Me(),F(j);var ne=V(j,2),M=V(z(ne),4);M.textContent=`@import 'slashed/slashed.full.css';
-@import './slashed-overrides.css';`,F(ne),F(f),H(()=>{q(h,U(o)>0?`${U(o)} override${U(o)===1?``:`s`} ready to export.`:`No overrides yet. Customise tokens, then export.`),g.disabled=U(o)===0,X(S,1,`flex-1 py-1.5 rounded-md text-[11px] font-bold transition-all cursor-pointer ${U(n)===`layer`?`bg-indigo-600 text-white`:`text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200`}`),X(C,1,`flex-1 py-1.5 rounded-md text-[11px] font-bold transition-all cursor-pointer ${U(n)===`root`?`bg-indigo-600 text-white`:`text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200`}`),q(E,U(a)||`/* No overrides */`),j.disabled=U(o)===0}),W(`click`,g,c),W(`click`,S,()=>{R(n,`layer`)}),W(`click`,C,()=>{R(n,`root`)}),W(`click`,O,s),W(`click`,te,l),W(`click`,j,d),K(e,f),We()}Br([`click`]);var Bm={_sync:{generatedBy:`configurator/scripts/sync-api.mjs`,source:`docs/api-index.json`},classes:[{name:`no-motion`,selector:`.no-motion`,kind:`accessibility`,category:`Accessibility`,group:`Reduced motion. Token override helps components that read`,description:`Suppresses all animations and transitions within the subtree. Apply to a container to create a reduced-motion zone without relying on the system preference.`,optional:!1,layer:`slashed.accessibility`},{name:`no-print`,selector:`.no-print`,kind:`print`,category:`Print`,group:`Print visibility utilities`,description:`Hides the element in @media print. Use on sidebars, navigation bars, and decorative elements that should not appear on paper.`,optional:!1,layer:`slashed.print`},{name:`print-color-exact`,selector:`.print-color-exact`,kind:`print`,category:`Print`,group:`Opt-in colour treatment`,description:`Forces exact color rendering in print (print-color-adjust: exact). Use on charts and colored badges that must preserve their fill colors in print.`,optional:!1,layer:`slashed.print`},{name:`print-no-color`,selector:`.print-no-color`,kind:`print`,category:`Print`,group:`Opt-in colour treatment`,description:`Strips color information in print (print-color-adjust: economy). Defers to the printer's ink-saving mode for backgrounds and non-critical color fills.`,optional:!1,layer:`slashed.print`},{name:`print-only`,selector:`.print-only`,kind:`print`,category:`Print`,group:`Print visibility utilities`,description:`Hides the element on screen (display: none) but shows it in @media print. Use for print-only headers, footers, and supplementary content not needed on screen.`,optional:!1,layer:`slashed.print`},{name:`sf-alternate`,selector:`.sf-alternate`,kind:`layout`,category:`Layout primitives`,group:`Alternate (zigzag / media-object)`,description:`Zigzag / alternating two-column layout. Even children align image-left/text-right; odd children flip. Collapses to a single column below the breakpoint.`,optional:!1,layer:`slashed.layout`},{name:`sf-aspect`,selector:`.sf-aspect`,kind:`macro`,category:`Macro classes`,group:`Aspect`,description:`Sets aspect-ratio from a --sf-aspect-ratio scoped token. Override the token inline to get any ratio without a new class.`,optional:!1,layer:`slashed.macros`},{name:`sf-bento`,selector:`.sf-bento`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Auto-fill bento grid for card dashboards. Children span 1 column by default; use span modifiers (sf-bento-wide, sf-bento-tall, sf-bento-full, sf-bento-featured) to break the grid.`,optional:!1,layer:`slashed.layout`},{name:`sf-bento--2`,selector:`.sf-bento--2`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Bento grid variant with a 2-column base layout.`,optional:!1,layer:`slashed.layout`},{name:`sf-bento--3`,selector:`.sf-bento--3`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Bento grid variant with a 3-column base layout.`,optional:!1,layer:`slashed.layout`},{name:`sf-bento--6`,selector:`.sf-bento--6`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Bento grid variant with a 6-column base layout.`,optional:!1,layer:`slashed.layout`},{name:`sf-bento--compact`,selector:`.sf-bento--compact`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Bento grid variant with shorter default row height.`,optional:!1,layer:`slashed.layout`},{name:`sf-bento--tall`,selector:`.sf-bento--tall`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Bento grid variant with taller default row height.`,optional:!1,layer:`slashed.layout`},{name:`sf-bento-featured`,selector:`.sf-bento-featured`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Span modifier for a bento item: takes up 2×2 cells (featured hero placement).`,optional:!1,layer:`slashed.layout`},{name:`sf-bento-full`,selector:`.sf-bento-full`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Span modifier for a bento item: stretches across all columns (full-width banner).`,optional:!1,layer:`slashed.layout`},{name:`sf-bento-tall`,selector:`.sf-bento-tall`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Span modifier for a bento item: doubles the row height (tall card).`,optional:!1,layer:`slashed.layout`},{name:`sf-bento-wide`,selector:`.sf-bento-wide`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Span modifier for a bento item: spans 2 columns (wide card).`,optional:!1,layer:`slashed.layout`},{name:`sf-bg-layer`,selector:`.sf-bg-layer`,kind:`layout`,category:`Layout primitives`,group:``,description:`Background layer — absolutely-positioned cover media that sits behind a parent's content. The parent is auto-promoted to a positioned, isolated stacking context via :has(), so .sf-bg-layer composes natively under .sf-scrim (background → scrim gradient → content). Works as a bare  or as a wrapper with a nested > img / > video / > picture.`,optional:!1,layer:`slashed.layout`},{name:`sf-box`,selector:`.sf-box`,kind:`layout`,category:`Layout primitives`,group:`Box`,description:`Minimal padding container that applies --sf-component-pad on all sides. The simplest layout primitive for adding breathing room.`,optional:!1,layer:`slashed.layout`},{name:`sf-breakout`,selector:`.sf-breakout`,kind:`layout`,category:`Layout primitives`,group:`Content grid (breakout pattern)`,description:`Breaks a child element out of a parent sf-content-grid, spanning full bleed (or a named grid area) regardless of the parent column. Useful for full-width sections inside constrained prose.`,optional:!1,layer:`slashed.layout`},{name:`sf-btn`,selector:`.sf-btn`,kind:`component`,category:`Components`,group:`.sf-btn`,description:`Interactive call-to-action button. Apply to 
`),Jm=G(` 
`,1),Ym=G(`
 
 `,1),Xm=G(`knob`),Zm=G(`advanced`),Qm=G(`
 
`),$m=G(`
   
  
 
`),eh=G(`
Classes & Variables
  
 
 
`);function th(e,t){Ue(t,!0);let n=Bm.classes,r=Vm.tokens.filter(e=>e.tier===`PUBLIC`||e.tier===`PUBLIC-ADVANCED`),i=L(``),a=L(`classes`),o=L(``),s=I(()=>()=>{let e=U(i).trim().toLowerCase();return e?n.filter(t=>t.name.toLowerCase().includes(e)||t.selector?.toLowerCase().includes(e)||t.description?.toLowerCase().includes(e)||t.group?.toLowerCase().includes(e)):n}),c=I(()=>()=>{let e=U(i).trim().toLowerCase();return e?r.filter(t=>t.name.toLowerCase().includes(e)||t.description?.toLowerCase().includes(e)||t.group?.toLowerCase().includes(e)||t.value?.toLowerCase().includes(e)):r});function l(e){let t=new Map;for(let n of e){let e=n.category||`Other`,r=n.group||``;t.has(e)||t.set(e,new Map);let i=t.get(e);i.has(r)||i.set(r,[]),i.get(r).push(n)}return t}let u=I(()=>l(U(s)())),d=I(()=>l(U(c)())),f=null;async function p(e){try{await navigator.clipboard.writeText(e),R(o,e,!0),f&&clearTimeout(f),f=setTimeout(()=>{U(o)===e&&R(o,``),f=null},1500)}catch{}}let m={layout:`text-violet-600 dark:text-violet-400`,macro:`text-sky-600 dark:text-sky-400`,state:`text-amber-600 dark:text-amber-400`,accessibility:`text-emerald-600 dark:text-emerald-400`,motion:`text-pink-600 dark:text-pink-400`,print:`text-slate-600 dark:text-slate-400`,form:`text-orange-600 dark:text-orange-400`,component:`text-indigo-600 dark:text-indigo-400`,theme:`text-teal-600 dark:text-teal-400`};var g=eh(),_=z(g),v=V(z(_),2);zi(v);var y=V(v,2),b=z(y),x=z(b);F(b);var S=V(b,2),C=z(S);F(S),F(y),F(_);var w=V(_,2),T=z(w),E=e=>{var t=Xr(),n=B(t),r=e=>{var t=Hm(),n=z(t);F(t),H(()=>q(n,`No classes match "${U(i)??``}"`)),K(e,t)},a=I(()=>U(s)().length===0),c=e=>{var t=Xr();Y(B(t),17,()=>[...U(u).entries()],([e,t])=>e,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=Ym(),s=B(a),c=z(s),l=z(c,!0);F(c),F(s),Y(V(s,2),17,()=>[...i().entries()],([e,t])=>e,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=Jm(),s=B(a),c=e=>{var t=Um(),n=z(t,!0);F(t),H(()=>q(n,r())),K(e,t)};J(s,e=>{r()&&e(c)});var l=V(s,2);Y(l,21,i,e=>e.name,(e,t)=>{var n=qm(),r=z(n),i=z(r),a=z(i),s=z(a,!0);F(a);var c=V(a,2),l=e=>{var n=Wm(),r=z(n,!0);F(n),H(()=>{X(n,1,`text-[8px] font-bold uppercase ${m[U(t).kind]??`text-slate-500`}`),q(r,U(t).kind)}),K(e,n)};J(c,e=>{U(t).kind&&e(l)});var u=V(c,2),d=e=>{K(e,Gm())};J(u,e=>{U(t).optional&&e(d)}),F(i);var f=V(i,2),h=e=>{var n=Km(),r=z(n,!0);F(n),H(()=>q(r,U(t).description)),K(e,n)};J(f,e=>{U(t).description&&e(h)}),F(r);var g=V(r,2),_=z(g),v=e=>{va(e,{class:`w-3 h-3 text-emerald-600 dark:text-emerald-400`})},y=e=>{Ea(e,{class:`w-3 h-3 text-slate-500`})};J(_,e=>{U(o)===U(t).selector?e(v):e(y,-1)}),F(g),F(n),H(()=>q(s,U(t).selector)),W(`click`,g,()=>p(U(t).selector)),K(e,n)}),F(l),K(e,a)}),H(()=>q(l,r())),K(e,a)}),K(e,t)};J(n,e=>{U(a)?e(r):e(c,-1)}),K(e,t)},D=e=>{var t=Xr(),n=B(t),r=e=>{var t=Hm(),n=z(t);F(t),H(()=>q(n,`No tokens match "${U(i)??``}"`)),K(e,t)},a=I(()=>U(c)().length===0),s=e=>{var t=Xr();Y(B(t),17,()=>[...U(d).entries()],([e,t])=>e,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=Ym(),s=B(a),c=z(s),l=z(c,!0);F(c),F(s),Y(V(s,2),17,()=>[...i().entries()],([e,t])=>e,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=Jm(),s=B(a),c=e=>{var t=Um(),n=z(t,!0);F(t),H(()=>q(n,r())),K(e,t)};J(s,e=>{r()&&e(c)});var l=V(s,2);Y(l,21,i,e=>e.name,(e,t)=>{var n=$m(),r=z(n),i=z(r),a=z(i),s=z(a,!0);F(a);var c=V(a,2),l=e=>{K(e,Xm())};J(c,e=>{U(t).role===`knob`&&e(l)});var u=V(c,2),d=e=>{K(e,Zm())};J(u,e=>{U(t).tier===`PUBLIC-ADVANCED`&&e(d)}),F(i);var f=V(i,2),m=e=>{var n=Qm(),r=z(n,!0);F(n),H(()=>q(r,U(t).value)),K(e,n)};J(f,e=>{U(t).value&&e(m)});var h=V(f,2),g=e=>{var n=Km(),r=z(n,!0);F(n),H(()=>q(r,U(t).description)),K(e,n)};J(h,e=>{U(t).description&&e(g)}),F(r);var _=V(r,2),v=z(_),y=e=>{va(e,{class:`w-3 h-3 text-emerald-600 dark:text-emerald-400`})},b=e=>{Ea(e,{class:`w-3 h-3 text-slate-500`})};J(v,e=>{U(o)===`var(${U(t).name})`?e(y):e(b,-1)}),F(_),F(n),H(()=>q(s,U(t).name)),W(`click`,_,()=>p(`var(${U(t).name})`)),K(e,n)}),F(l),K(e,a)}),H(()=>q(l,r())),K(e,a)}),K(e,t)};J(n,e=>{U(a)?e(r):e(s,-1)}),K(e,t)};J(T,e=>{U(a)===`classes`?e(E):e(D,-1)}),F(w),F(g),H((e,t)=>{X(b,1,`flex-1 py-1.5 rounded text-[10px] font-bold transition-all cursor-pointer ${U(a)===`classes`?`bg-indigo-600/30 text-indigo-800 dark:text-indigo-200 border border-indigo-500/30`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(x,`CSS classes (${e??``})`),X(S,1,`flex-1 py-1.5 rounded text-[10px] font-bold transition-all cursor-pointer ${U(a)===`tokens`?`bg-indigo-600/30 text-indigo-800 dark:text-indigo-200 border border-indigo-500/30`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(C,`CSS vars (${t??``})`)},[()=>U(s)().length,()=>U(c)().length]),qi(v,()=>U(i),e=>R(i,e)),W(`click`,b,()=>{R(a,`classes`)}),W(`click`,S,()=>{R(a,`tokens`)}),K(e,g),We()}Br([`click`]);var nh=G(`
`),rh=G(`
`),ih=G(`
 
`),ah=G(``),oh=G(` `),sh=G(``),ch=G(``),lh=G(`
  
 
 
  
`);function uh(e,t){Ue(t,!0);let n=L(!1);function r(e){let t=e.name;if(t.includes(`color`)||t.includes(`source`)||t.includes(`-bg`)||t.includes(`-border`))return`color`;if(t.includes(`font`)||t.includes(`family`))return`font`;let n=e.syntax?.toLowerCase()??``;return n.includes(`number`)||n.includes(`length`)||n.includes(`integer`)?`number`:`text`}let i=I(()=>t.overrideValue??t.token.value),a=I(()=>t.overrideValue!==void 0),o=I(()=>r(t.token)),s=I(()=>t.token.name.replace(`--sf-`,``));function c(e){return fl.value,vl(e)||vl(`var(${t.token.name})`)||e}let l=I(()=>U(o)===`color`?c(U(i)):``);var u=lh(),d=z(u),f=V(d,2),p=e=>{var t=nh();let n;H(()=>n=Z(t,``,n,{background:U(l)})),K(e,t)},m=e=>{K(e,rh())};J(f,e=>{U(o)===`color`?e(p):e(m,-1)});var h=V(f,2),g=z(h),_=z(g,!0);F(g);var v=V(g,2),y=e=>{var n=ih(),r=z(n,!0);F(n),H(()=>q(r,t.token.description)),K(e,n)};J(v,e=>{t.token.description&&e(y)}),F(h);var b=V(h,2),x=e=>{var r=ah();zi(r),H(()=>Bi(r,U(i))),zr(`blur`,r,e=>{let r=e.target.value.trim();r&&r!==t.token.value?t.onSet(r):(!r||r===t.token.value)&&t.onReset(),R(n,!1)}),W(`keydown`,r,e=>{e.key===`Enter`&&e.currentTarget.blur(),e.key===`Escape`&&R(n,!1)}),K(e,r)},S=e=>{var t=sh(),r=z(t),o=e=>{var t=oh(),n=z(t,!0);F(t),H(()=>q(n,U(i))),K(e,t)},s=e=>{var t=Yr();H(()=>q(t,U(i))),K(e,t)};J(r,e=>{U(a)?e(o):e(s,-1)}),F(t),H(()=>Q(t,`title`,U(i))),W(`click`,t,()=>{R(n,!0)}),K(e,t)};J(b,e=>{U(n)?e(x):e(S,-1)});var C=V(b,2),w=e=>{var n=ch();W(`click`,n,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(C,e=>{U(a)&&e(w)}),F(u),H(()=>{X(u,1,`flex items-center gap-2 px-3 py-1.5 rounded-lg transition-colors group ${U(a)?`bg-indigo-500/8 border border-indigo-500/15`:`hover:bg-black/4 dark:hover:bg-white/4`}`),X(d,1,`w-1.5 h-1.5 rounded-full shrink-0 ${U(a)?`bg-indigo-500`:`bg-transparent`}`),Q(g,`title`,t.token.name),q(_,U(s))}),K(e,u),We()}Br([`keydown`,`click`]);var dh=G(` `),fh=G(`
No tokens found
`),ph=G(`
 
`),mh=G(`
 
`),hh=G(`
 
 
  
`);function gh(e,t){Ue(t,!0);let n=L(``),r=I(()=>()=>{let e=t.patterns??[t.domain];return t.tokens.filter(t=>e.some(e=>t.name.includes(e))&&t.tier!==`INTERNAL`)}),i=I(()=>()=>{if(!U(n))return U(r)();let e=U(n).toLowerCase();return U(r)().filter(t=>t.name.toLowerCase().includes(e)||t.description?.toLowerCase().includes(e))}),a=I(()=>U(i)().filter(e=>e.name in t.overrides).length);var o=hh(),s=z(o),c=z(s),l=z(c);F(c);var u=V(c,2),d=e=>{var t=dh(),n=z(t);F(t),H(()=>q(n,`${U(a)??``} modified`)),K(e,t)};J(u,e=>{U(a)>0&&e(d)}),F(s);var f=V(s,2);zi(f);var p=V(f,2),m=e=>{K(e,fh())},h=I(()=>U(i)().length===0),g=e=>{var n=mh(),r=z(n);Y(r,17,()=>U(i)().slice(0,60),e=>e.name,(e,n)=>{uh(e,{get token(){return U(n)},get overrideValue(){return t.overrides[U(n).name]},onSet:e=>t.onSet(U(n).name,e),onReset:()=>t.onReset(U(n).name)})});var a=V(r,2),o=e=>{var t=ph(),n=z(t);F(t),H(e=>q(n,`${e??``} more — refine your search`),[()=>U(i)().length-60]),K(e,t)},s=I(()=>U(i)().length>60);J(a,e=>{U(s)&&e(o)}),F(n),K(e,n)};J(p,e=>{U(h)?e(m):e(g,-1)}),F(o),H(()=>{q(l,`${t.domain??``} tokens`),Q(f,`placeholder`,`Search ${t.domain} tokens…`),Bi(f,U(n))}),W(`input`,f,e=>{R(n,e.target.value,!0)}),K(e,o),We()}Br([`input`]);var _h=G(`
`),vh=G(`
  
`),yh=G(`
 
`),bh=G(`
`),xh=G(`
`),Sh=G(`
  
`),Ch=G(`
`),wh=G(`
 
   
 
  
 
  
 
 
 
`);function Th(e,t){Ue(t,!0);let n={PUBLIC:0,"PUBLIC-ADVANCED":1,INTERNAL:2},r=L(``),i=L(!1),a=L(!1),o=I(()=>t.tokens.filter(e=>t.patterns.some(t=>e.name.includes(t))).sort((e,t)=>{let r=n[e.tier??`INTERNAL`]??2,i=n[t.tier??`INTERNAL`]??2;return r===i?e.name.localeCompare(t.name):r-i})),s=I(()=>()=>{let e=U(o);if(U(i)||(e=e.filter(e=>e.tier!==`INTERNAL`)),U(a)&&(e=e.filter(e=>e.name in t.overrides)),U(r)){let t=U(r).toLowerCase();e=e.filter(e=>e.name.toLowerCase().includes(t)||e.description?.toLowerCase().includes(t))}return e}),c=I(()=>U(o).filter(e=>e.name in t.overrides).length),l=I(()=>U(o).filter(e=>e.tier===`PUBLIC`).length),u=I(()=>U(o).filter(e=>e.tier===`PUBLIC-ADVANCED`).length),d=I(()=>U(o).filter(e=>e.tier===`INTERNAL`).length);var f=wh(),p=z(f),m=z(p);zi(m);var h=V(m,2),g=z(h),_=z(g),v=z(_),y=e=>{K(e,_h())};J(v,e=>{U(a)&&e(y)}),F(_);var b=V(_);F(g);var x=V(g,2),S=z(x),C=z(S),w=e=>{K(e,_h())};J(C,e=>{U(i)&&e(w)}),F(S);var T=V(S);F(x);var E=V(x,2),D=z(E);F(E),F(h);var O=V(h,2),k=z(O),A=V(z(k),2),ee=z(A);F(A),F(k);var te=V(k,2),j=V(z(te),2),ne=z(j);F(j),F(te);var M=V(te,2),re=e=>{var t=vh(),n=V(z(t),2),r=z(n);F(n),F(t),H(()=>q(r,`Internal (${U(d)??``})`)),K(e,t)};J(M,e=>{U(i)&&e(re)}),F(O),F(p);var ie=V(p,4),ae=z(ie),oe=e=>{var t=yh(),n=z(t,!0);F(t),H(()=>q(n,U(a)?`No modified tokens in this domain`:`No tokens found`)),K(e,t)},se=I(()=>U(s)().length===0),N=e=>{var n=Ch();Y(n,21,()=>U(s)(),e=>e.name,(e,n)=>{var r=Sh(),i=z(r),a=e=>{K(e,bh())};J(i,e=>{U(n).tier===`PUBLIC-ADVANCED`&&e(a)});var o=V(i,2),s=e=>{K(e,xh())};J(o,e=>{U(n).tier===`INTERNAL`&&e(s)}),uh(V(o,2),{get token(){return U(n)},get overrideValue(){return t.overrides[U(n).name]},onSet:e=>t.onSet(U(n).name,e),onReset:()=>t.onReset(U(n).name)}),F(r),K(e,r)}),F(n),K(e,n)};J(ae,e=>{U(se)?e(oe):e(N,-1)}),F(ie),F(f),H(e=>{Bi(m,U(r)),X(g,1,`flex items-center gap-1 text-[9px] font-bold transition-colors cursor-pointer ${U(a)?`text-indigo-600 dark:text-indigo-400`:`text-slate-400 dark:text-slate-600 hover:text-slate-600 dark:hover:text-slate-400`}`),X(_,1,`w-2.5 h-2.5 rounded border flex items-center justify-center transition-colors ${U(a)?`bg-indigo-600 border-indigo-500`:`border-black/20 dark:border-white/20`}`),q(b,` Modified only ${U(c)>0?`(${U(c)})`:``}`),Q(x,`aria-expanded`,U(i)),X(x,1,`flex items-center gap-1 text-[9px] font-bold transition-colors cursor-pointer ${U(i)?`text-amber-600 dark:text-amber-400`:`text-slate-400 dark:text-slate-600 hover:text-slate-600 dark:hover:text-slate-400`}`),X(S,1,`w-2.5 h-2.5 rounded border flex items-center justify-center transition-colors ${U(i)?`bg-amber-600 border-amber-500`:`border-black/20 dark:border-white/20`}`),q(T,` Internal (${U(d)??``})`),q(D,`${e??``}/${U(o).length??``}`),q(ee,`Public (${U(l)??``})`),q(ne,`Advanced (${U(u)??``})`)},[()=>U(s)().length]),W(`input`,m,e=>{R(r,e.target.value,!0)}),W(`click`,g,()=>{R(a,!U(a))}),W(`click`,x,()=>{R(i,!U(i))}),K(e,f),We()}Br([`input`,`click`]);var Eh=G(``),Dh=G(`
    
 
       
`),Oh=G(`
Waiting for live preview…
`),kh=G(``),Ah=G(`
Pick an editable brand/status (base) color as the foreground to enable auto-fix.
`),jh=G(`
 
`),Mh=G(`
 
 
 
 
 
`),Nh=G(`
 
`),Ph=G(`
Foreground
 
  
Background
 
 
Aa Bb Cc
 
 
Auto-fix to pass   
 
`,1),Fh=G(` `),Ih=G(``),Lh=G(`·`),Rh=G(` `),zh=G(`
Foreground (rows) × background (cols). Click a cell to load it above.
 
`,1),Bh=G(`
Contrast checker
 
Live WCAG ratios computed from the actual rendered preview colors — including derived steps and your overrides.
 
 
 
 
 
`);function Vh(e,t){Ue(t,!0);let n=I(()=>qo.value===`dark`?`#16161e`:`#ffffff`),r=[{label:`Text`,expr:`var(--sf-color-text)`},{label:`Text secondary`,expr:`var(--sf-color-text--secondary)`},{label:`Text muted`,expr:`var(--sf-color-text--muted)`},{label:`White`,expr:`#ffffff`},{label:`Black`,expr:`#000000`}],i=[{label:`Surface`,expr:`var(--sf-color-surface)`},{label:`Bg`,expr:`var(--sf-color-bg)`},{label:`Border`,expr:`var(--sf-color-border)`}],a=[{key:`primary`,srcLight:`--sf-color-primary-source-light`,defLight:`oklch(0.47 0.27 264)`,srcDark:`--sf-color-primary-source-dark`,defDark:`oklch(0.715 0.243 264)`},{key:`secondary`,srcLight:`--sf-color-secondary-source-light`,defLight:`oklch(0.22 0.04 264)`,srcDark:`--sf-color-secondary-source-dark`,defDark:`oklch(0.84 0.036 264)`},{key:`tertiary`,srcLight:`--sf-color-tertiary-source-light`,defLight:`oklch(0.42 0.22 295)`,srcDark:`--sf-color-tertiary-source-dark`,defDark:`oklch(0.74 0.198 295)`},{key:`action`,srcLight:`--sf-color-action-source-light`,defLight:`oklch(0.50 0.22 235)`,srcDark:`--sf-color-action-source-dark`,defDark:`oklch(0.70 0.198 235)`},{key:`neutral`,srcLight:`--sf-color-neutral-source-light`,defLight:`oklch(0.52 0.025 260)`,srcDark:`--sf-color-neutral-source-dark`,defDark:`oklch(0.69 0.0225 260)`},{key:`success`,srcLight:`--sf-color-success-source-light`,defLight:`oklch(0.50 0.16 145)`,srcDark:`--sf-color-success-source-dark`,defDark:`oklch(0.70 0.144 145)`},{key:`warning`,srcLight:`--sf-color-warning-source-light`,defLight:`oklch(0.75 0.17 80)`,srcDark:`--sf-color-warning-source-dark`,defDark:`oklch(0.65 0.153 80)`},{key:`danger`,srcLight:`--sf-color-danger-source-light`,defLight:`oklch(0.48 0.22 12)`,srcDark:`--sf-color-danger-source-dark`,defDark:`oklch(0.71 0.198 12)`},{key:`info`,srcLight:`--sf-color-info-source-light`,defLight:`oklch(0.48 0.18 235)`,srcDark:`--sf-color-info-source-dark`,defDark:`oklch(0.71 0.162 235)`}],o=a.flatMap(e=>[{label:`${e.key} (base)`,expr:`var(--sf-color-${e.key})`,editKey:e.key},{label:`${e.key}-100`,expr:`var(--sf-color-${e.key}-100)`},{label:`${e.key}-600`,expr:`var(--sf-color-${e.key}-600)`},{label:`${e.key}-900`,expr:`var(--sf-color-${e.key}-900)`}]),s=[...r,...i,...o],c=Object.fromEntries(a.map(e=>[e.key,e])),l=[{label:`text`,expr:`var(--sf-color-text)`},{label:`white`,expr:`#ffffff`},{label:`black`,expr:`#000000`},{label:`primary`,expr:`var(--sf-color-primary)`,editKey:`primary`}],u=[{label:`surface`,expr:`var(--sf-color-surface)`},{label:`primary`,expr:`var(--sf-color-primary)`},{label:`neutral-100`,expr:`var(--sf-color-neutral-100)`},{label:`success`,expr:`var(--sf-color-success)`},{label:`warning`,expr:`var(--sf-color-warning)`},{label:`danger`,expr:`var(--sf-color-danger)`}],d=L(`White`),f=L(`primary (base)`),p=L(`AA`),m=I(()=>s.find(e=>e.label===U(d))??s[0]),h=I(()=>s.find(e=>e.label===U(f))??s[0]);function g(e,t){fl.value;let n=Sl(e),r=Sl(t);return!n||!r?null:Xl(Yl(...n),Yl(...r))}function _(e){return e>=7?{tag:`AAA`,cls:`bg-emerald-500/25 text-emerald-800 dark:text-emerald-200`}:e>=4.5?{tag:`AA`,cls:`bg-emerald-500/15 text-emerald-700 dark:text-emerald-300`}:e>=3?{tag:`AA-L`,cls:`bg-amber-500/20 text-amber-700 dark:text-amber-300`}:{tag:`Fail`,cls:`bg-rose-500/20 text-rose-700 dark:text-rose-300`}}let v=I(()=>g(U(m).expr,U(h).expr));function y(){let e=U(d);R(d,U(f),!0),R(f,e,!0)}function b(e,t){let n=s.find(t=>t.expr===e),r=s.find(e=>e.expr===t);n&&R(d,n.label,!0),r&&R(f,r.label,!0)}function x(e){return fl.value,vl(e)||e}let S=L(!1),C=L(!1),w=L(null);function T(){R(w,null);let e=U(m).editKey?c[U(m).editKey]:null;if(!e)return;let n=hl()===`dark`,r=n?e.srcDark:e.srcLight,i=n?e.defDark:e.defLight,{c:a,h:o,l:s,valid:l}=Zl(t.overrides[r]??i);if(!l)return;let u=Sl(U(h).expr);if(!u)return;let d=Yl(...u),f=U(p)===`AAA`?7:4.5,g=null;for(let e=0;e<=1.0001;e+=.005){let[t,n,r]=Jl(e,a,o);Xl(Yl(t,n,r),d)>=f&&(g===null||Math.abs(e-s){if(!U(S)){R(w,null);return}fl.value,U(d),U(f),U(p),U(m).editKey&&U(v)!==null&&U(v)<(U(p)===`AAA`?7:4.5)?T():R(w,null)});var D=Bh(),O=V(z(D),2),k=z(O),A=V(z(k),2),ee=z(A,!0);F(A),F(k);var te=V(k,2),j=e=>{var t=Ph(),r=B(t),i=z(r),a=V(z(i),2);Y(a,21,()=>s,e=>e.label,(e,t)=>{var r=Eh(),i=z(r,!0);F(r);var a={};H(()=>{Z(r,`background:${U(n)};`),q(i,U(t).label),a!==(a=U(t).label)&&(r.value=(r.__value=U(t).label)??``)}),K(e,r)}),F(a),F(i);var o=V(i,2),c=V(o,2),l=V(z(c),2);Y(l,21,()=>s,e=>e.label,(e,t)=>{var r=Eh(),i=z(r,!0);F(r);var a={};H(()=>{Z(r,`background:${U(n)};`),q(i,U(t).label),a!==(a=U(t).label)&&(r.value=(r.__value=U(t).label)??``)}),K(e,r)}),F(l),F(c),F(r);var u=V(r,2),g=z(u),b=z(g);F(g);var S=V(g,2),C=e=>{let t=I(()=>_(U(v)));var n=Dh(),r=z(n),i=z(r);F(r);var a=V(r,2),o=z(a,!0);F(a);var s=V(a,4),c=z(s),l=z(c);F(c);var u=V(c,2),d=z(u);F(u);var f=V(u,2),p=z(f);F(f);var m=V(f,2),h=z(m);F(m),F(s),F(n),H(e=>{q(i,`${e??``}:1`),X(a,1,`text-[10px] font-bold px-2 py-0.5 rounded ${U(t).cls}`),q(o,U(t).tag),X(c,1,yi(U(v)>=4.5?`text-emerald-700 dark:text-emerald-300`:`text-rose-700 dark:text-rose-300`)),q(l,`${U(v)>=4.5?`✓`:`✗`} AA normal`),X(u,1,yi(U(v)>=3?`text-emerald-700 dark:text-emerald-300`:`text-rose-700 dark:text-rose-300`)),q(d,`${U(v)>=3?`✓`:`✗`} AA large`),X(f,1,yi(U(v)>=7?`text-emerald-700 dark:text-emerald-300`:`text-rose-700 dark:text-rose-300`)),q(p,`${U(v)>=7?`✓`:`✗`} AAA normal`),X(m,1,yi(U(v)>=4.5?`text-emerald-700 dark:text-emerald-300`:`text-rose-700 dark:text-rose-300`)),q(h,`${U(v)>=4.5?`✓`:`✗`} AAA large`)},[()=>U(v).toFixed(2)]),K(e,n)},T=e=>{K(e,Oh())};J(S,e=>{U(v)===null?e(T,-1):e(C)}),F(u);var D=V(u,2),O=z(D),k=z(O),A=V(z(k)),ee=z(A);F(A),F(k);var te=V(k,2);Y(te,20,()=>[`AA`,`AAA`],e=>e,(e,t)=>{var n=kh(),r=z(n,!0);F(n),H(()=>{X(n,1,`px-2 py-0.5 rounded-md text-[10px] font-bold cursor-pointer ${U(p)===t?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(r,t)}),W(`click`,n,()=>{R(p,t,!0)}),K(e,n)}),F(te),F(O);var j=V(O,2),ne=e=>{K(e,Ah())},M=e=>{var t=jh(),n=z(t);F(t),H(()=>q(n,`Already passes ${U(p)??``}. 🎉`)),K(e,t)},re=e=>{var t=Mh(),n=z(t),r=V(n,2),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o);F(o),F(r);var c=V(r,2);F(t),H((e,t)=>{Z(n,e),q(a,U(w).value),q(s,`→ ${t??``}:1 (${U(p)??``} ✓)`)},[()=>`background:${x(U(w).value)}`,()=>U(w).ratio.toFixed(2)]),W(`click`,c,E),K(e,t)},ie=e=>{var t=Nh(),n=z(t);F(t),H(()=>q(n,`No lightness of this hue reaches ${U(p)??``} on this background — try a different background or hue.`)),K(e,t)};J(j,e=>{U(m).editKey?U(v)!==null&&U(v)>=(U(p)===`AAA`?7:4.5)?e(M,1):U(w)?e(re,2):e(ie,-1):e(ne)}),F(D),H((e,t,n)=>{Z(g,e),Z(b,t),q(ee,`(for ${n??``} mode)`)},[()=>`background:${x(U(h).expr)}`,()=>`color:${x(U(m).expr)}`,()=>hl()]),Oi(a,()=>U(d),e=>R(d,e)),W(`click`,o,y),Oi(l,()=>U(f),e=>R(f,e)),K(e,t)};J(te,e=>{U(S)&&e(j)}),F(O);var ne=V(O,4),M=z(ne),re=V(z(M),2),ie=z(re,!0);F(re),F(M);var ae=V(M,2),oe=e=>{var t=zh(),n=V(B(t),2),r=z(n),i=z(r),a=z(i);Y(V(z(a)),17,()=>u,e=>e.label,(e,t)=>{var n=Fh(),r=z(n,!0);F(n),H(()=>q(r,U(t).label)),K(e,n)}),F(a),F(i);var o=V(i);Y(o,21,()=>l,e=>e.label,(e,t)=>{var n=Rh(),r=z(n),i=z(r,!0);F(r),Y(V(r),17,()=>u,e=>e.label,(e,n)=>{let r=I(()=>g(U(t).expr,U(n).expr));var i=Xr(),a=B(i),o=e=>{let i=I(()=>_(U(r)));var a=Ih(),o=z(a),s=z(o,!0);F(o),F(a),H((e,t)=>{Q(o,`title`,e),X(o,1,`w-full px-1.5 py-1 rounded font-mono font-bold cursor-pointer ${U(i).cls}`),q(s,t)},[()=>`${U(t).label} on ${U(n).label} — ${U(r).toFixed(2)}:1`,()=>U(r).toFixed(1)]),W(`click`,o,()=>b(U(t).expr,U(n).expr)),K(e,a)},s=e=>{K(e,Lh())};J(a,e=>{U(r)===null?e(s,-1):e(o)}),K(e,i)}),F(n),H(()=>q(i,U(t).label)),K(e,n)}),F(o),F(r),F(n),K(e,t)};J(ae,e=>{U(C)&&e(oe)}),F(ne),F(D),H(()=>{Q(k,`aria-expanded`,U(S)),q(ee,U(S)?`▲`:`▼`),Q(M,`aria-expanded`,U(C)),q(ie,U(C)?`▲`:`▼`)}),W(`click`,k,()=>{R(S,!U(S))}),W(`click`,M,()=>{R(C,!U(C))}),K(e,D),We()}Br([`click`]);var Hh=G(`
`),Uh=G(` `),Wh=G(`
 
 
 
`);function Gh(e,t){Ue(t,!0);let n=new Set([`home`,`themes`,`wcag`,`setup`,`cheatsheet`]),r=L(`controls`);On(()=>{t.domain,R(r,`controls`)});let i=I(()=>Fl[t.domain]??[t.domain]),a=I(()=>t.tokens.filter(e=>Il(e.name)===t.domain&&e.name in t.overrides).length);var o=Xr(),s=B(o),c=e=>{var n=Xr(),r=B(n),i=e=>{Kl(e,{get overrides(){return t.overrides},get onSelect(){return t.onSelectDomain},get onApplyTheme(){return t.onApplyTheme},get onResetAll(){return t.onResetAll}})},a=e=>{Fm(e,{get overrides(){return t.overrides},get onApplyTheme(){return t.onApplyTheme},get onResetAll(){return t.onResetAll}})},o=e=>{Vh(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onBulkChange(){return t.onBulkChange}})},s=e=>{zm(e,{get overrides(){return t.overrides}})},c=e=>{th(e,{})};J(r,e=>{t.domain===`home`?e(i):t.domain===`themes`?e(a,1):t.domain===`wcag`?e(o,2):t.domain===`setup`?e(s,3):t.domain===`cheatsheet`&&e(c,4)}),K(e,n)},l=I(()=>n.has(t.domain)),u=e=>{var n=Wh(),o=z(n),s=z(o),c=e=>{var n=Hh(),r=z(n),i=e=>{hd(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange},get onSelectDomain(){return t.onSelectDomain}})},a=e=>{rf(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange}})},o=e=>{gf(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},s=e=>{If(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange}})},c=e=>{Qf(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},l=e=>{op(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},u=e=>{Sp(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange}})},d=e=>{Lp(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},f=e=>{Qp(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},p=e=>{xm(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange}})},m=e=>{Em(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},h=e=>{gh(e,{get domain(){return t.domain},get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})};J(r,e=>{t.domain===`colors`?e(i):t.domain===`typography`?e(a,1):t.domain===`spacing`?e(o,2):t.domain===`layout`?e(s,3):t.domain===`borders`?e(c,4):t.domain===`shadows`?e(l,5):t.domain===`motion`?e(u,6):t.domain===`effects`?e(d,7):t.domain===`macros`?e(f,8):t.domain===`misc`?e(p,9):t.domain===`components`?e(m,10):e(h,-1)}),F(n),K(e,n)},l=e=>{Th(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get patterns(){return U(i)},get onSet(){return t.onSet},get onReset(){return t.onReset}})};J(s,e=>{U(r)===`controls`?e(c):e(l,-1)}),F(o);var u=V(o,2),d=z(u);po(z(d),{class:`w-3 h-3`}),Me(),F(d);var f=V(d,4),p=z(f);Ba(p,{class:`w-3 h-3`});var m=V(p,2),h=e=>{var t=Uh(),n=z(t,!0);F(t),H(()=>q(n,U(a))),K(e,t)};J(m,e=>{U(a)>0&&e(h)}),F(f),F(u),F(n),H(()=>{X(d,1,`flex-1 flex items-center justify-center gap-1.5 py-2 text-[10px] font-bold transition-all cursor-pointer ${U(r)===`controls`?`text-indigo-700 dark:text-indigo-300 bg-indigo-600/10 border-t-2 border-t-indigo-500 -mt-px`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),X(f,1,`flex-1 flex items-center justify-center gap-1.5 py-2 text-[10px] font-bold transition-all cursor-pointer ${U(r)===`tokens`?`text-indigo-700 dark:text-indigo-300 bg-indigo-600/10 border-t-2 border-t-indigo-500 -mt-px`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`)}),W(`click`,d,()=>{R(r,`controls`)}),W(`click`,f,()=>{R(r,`tokens`)}),K(e,n)};J(s,e=>{U(l)?e(c):e(u,-1)}),K(e,o),We()}Br([`click`]);var Kh=G(`
 
`),qh=G(`
Type to search tokens by name or description
`),Jh=G(`overridden`),Yh=G(`
 
`),Xh=G(``),Zh=G(`
↑↓ navigate ↵ open panel Esc close
`),Qh=G(``);function $h(e,t){Ue(t,!0);let n=L(``),r=L(0),i=L(null),a={colors:`Colors`,typography:`Typography`,spacing:`Spacing`,layout:`Layout`,borders:`Borders`,shadows:`Shadows`,motion:`Motion`,effects:`Effects`,macros:`Macros`,misc:`Misc`,components:`Components`},o=I(()=>(()=>{let e=U(n).trim().toLowerCase();if(!e)return[];let r=[];for(let n of t.tokens){if(n.tier===`INTERNAL`)continue;let i=n.name.toLowerCase().includes(e),a=n.description?.toLowerCase().includes(e)??!1;if((i||a)&&(r.push({token:n,domain:Il(n.name),overridden:n.name in t.overrides}),r.length>=40))break}return r})());On(()=>{U(n),R(r,0)}),On(()=>{U(i)&&U(i).focus()});function s(e){t.onNavigate(e),t.onClose()}function c(e){if(e.key===`Escape`){e.preventDefault(),t.onClose();return}if(U(o).length===0&&(e.key===`ArrowDown`||e.key===`ArrowUp`)){e.preventDefault(),R(r,0);return}if(e.key===`ArrowDown`){e.preventDefault(),R(r,Math.min(U(r)+1,U(o).length-1),!0);return}if(e.key===`ArrowUp`){e.preventDefault(),R(r,Math.max(U(r)-1,0),!0);return}e.key===`Enter`&&U(o)[U(r)]&&(e.preventDefault(),s(U(o)[U(r)].domain))}var l=Qh(),u=z(l),d=z(u),f=V(z(d),2);zi(f),Qi(f,e=>R(i,e),()=>U(i)),Me(2),F(d);var p=V(d,2),m=z(p),h=e=>{var t=Kh(),r=z(t);F(t),H(()=>q(r,`No tokens matching "${U(n)??``}"`)),K(e,t)},g=I(()=>U(n).trim()&&U(o).length===0),_=e=>{K(e,qh())},v=I(()=>!U(n).trim()),y=e=>{var n=Xr();Y(B(n),19,()=>U(o),e=>e.token.name,(e,n,i)=>{var o=Xh(),c=z(o),l=z(c),u=z(l),d=z(u,!0);F(u);var f=V(u,2),p=e=>{K(e,Jh())};J(f,e=>{U(n).overridden&&e(p)}),F(l);var m=V(l,2),h=e=>{var t=Yh(),r=z(t,!0);F(t),H(()=>q(r,U(n).token.description)),K(e,t)};J(m,e=>{U(n).token.description&&e(h)}),F(c);var g=V(c,2),_=z(g),v=z(_,!0);F(_);var y=V(_,2),b=z(y,!0);F(y),F(g),F(o),H(()=>{X(o,1,`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors cursor-pointer ${U(r)===U(i)?`bg-indigo-500/15`:`hover:bg-black/4 dark:hover:bg-white/4`}`),q(d,U(n).token.name),q(v,U(n).overridden?t.overrides[U(n).token.name]:U(n).token.value),q(b,a[U(n).domain]??U(n).domain)}),zr(`mouseenter`,o,()=>{R(r,U(i),!0)}),W(`click`,o,()=>s(U(n).domain)),K(e,o)}),K(e,n)};J(m,e=>{U(g)?e(h):U(v)?e(_,1):e(y,-1)}),F(p);var b=V(p,2),x=e=>{K(e,Zh())};J(b,e=>{U(o).length>0&&e(x)}),F(u),F(l),W(`mousedown`,l,e=>{e.target===e.currentTarget&&t.onClose()}),W(`keydown`,f,c),qi(f,()=>U(n),e=>R(n,e)),K(e,l),We()}Br([`mousedown`,`keydown`,`click`]);var eg=G(` `),tg=G(``),ng=G(``),rg=G(`
 
 
 
 
  
 
 
  
`);function ig(e,t){Ue(t,!0);let n=(e,t=f,n=f,r=f)=>{var i=tg(),a=z(i);mi(a,n,(e,t)=>{t(e,{class:`w-3.5 h-3.5`})});var o=V(a),s=V(o),c=e=>{var t=eg(),n=z(t,!0);F(t),H(()=>q(n,U(v)>9?`9+`:U(v))),K(e,t)};J(s,e=>{t()===`preview`&&U(v)>0&&e(c)}),F(i),H(()=>{Q(i,`aria-pressed`,U(p)===t()),X(i,1,`flex-1 flex items-center justify-center gap-1.5 py-2.5 text-[11px] font-bold transition-colors cursor-pointer ${U(p)===t()?`text-indigo-700 dark:text-indigo-300 bg-indigo-500/10`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(o,` ${r()??``} `)}),W(`click`,i,()=>{R(p,t(),!0)}),K(e,i)},r=Vm.tokens??Vm,i={home:`Home`,colors:`Colors`,typography:`Typography`,spacing:`Spacing`,layout:`Layout`,borders:`Borders`,shadows:`Shadows`,motion:`Motion`,effects:`Effects`,macros:`Macros`,misc:`Misc`,components:`Components`,themes:`Themes`,wcag:`WCAG`,setup:`Install`,cheatsheet:`Classes`};function a(e){let t={};for(let n of Object.keys(e)){let e=Il(n);t[e]=(t[e]??0)+1}return t}let o=Lc(),s=L(nn(Rc())),c=L(nn([])),l=L(nn([])),u=L(`home`),d=L(!1),p=L(`controls`),m=L(`light`),h=L(`fluid`),g=L(`normal`),_=L(`marketing`),v=I(()=>Object.keys(U(s)).length),y=I(()=>a(U(s))),b=I(()=>Object.keys(U(s)).filter(e=>Il(e)===U(u))),x=I(()=>U(b).length),S=I(()=>U(c).length>0),C=I(()=>U(l).length>0);function w(e,t){let n=Object.keys(e);return n.length===Object.keys(t).length?n.every(n=>e[n]===t[n]):!1}let T=L(nn(Cr(()=>({...U(s)})))),E=L(`idle`),D=I(()=>!w(U(s),U(T))),O=null;On(()=>{zc(U(s))});function k(e){let t=U(s),n=typeof e==`function`?e(t):e;w(t,n)||(R(c,[...U(c).slice(-49),t],!0),R(l,[],!0),(U(E)===`saved`||U(E)===`error`)&&R(E,`idle`)),R(s,n,!0)}async function A(){if(!U(D)||U(E)===`saving`)return;let e={...U(s)};R(E,`saving`);try{await Hc(U(s)),w(U(s),e)?(R(T,e,!0),R(E,`saved`),O&&clearTimeout(O),O=setTimeout(()=>{U(E)===`saved`&&R(E,`idle`),O=null},2e3)):R(E,`idle`)}catch(e){console.warn(`slashed: save failed`,e),R(E,`error`)}}function ee(e,t){k(n=>({...n,[e]:t}))}function te(e){k(t=>{let n={...t};return delete n[e],n})}function j(e){k(t=>{let n={...t};for(let[t,r]of Object.entries(e))r===null?delete n[t]:n[t]=r;return n})}function ne(e){k({...e})}function M(){k({})}function re(){let e={};for(let t of U(b))e[t]=null;j(e)}function ie(){if(U(c).length===0)return;let e=U(c)[U(c).length-1],t=U(s);R(c,U(c).slice(0,-1),!0),R(l,[t,...U(l)],!0),R(s,e,!0)}function ae(){if(U(l).length===0)return;let e=U(l)[0],t=U(s);R(l,U(l).slice(1),!0),R(c,[...U(c),t],!0),R(s,e,!0)}function oe(){let e=document.createElement(`input`);e.type=`file`,e.accept=`.css,.json`,e.onchange=e=>{let t=e.target.files?.[0];if(!t)return;let n=new FileReader;n.onload=e=>{let n=e.target?.result;if(n)if(t.name.endsWith(`.json`))try{let e=JSON.parse(n);if(typeof e==`object`&&e&&!Array.isArray(e)){let t=Object.fromEntries(Object.entries(e).filter(([e,t])=>typeof t==`string`&&/^--sf-[\w-]+$/.test(e)));Object.keys(t).length>0&&k(t)}}catch{}else{let e={},t=/(--sf-[\w-]+)\s*:\s*([^;]+);/g,r;for(;(r=t.exec(n))!==null;)e[r[1].trim()]=r[2].trim();Object.keys(e).length>0&&k(t=>({...t,...e}))}},n.readAsText(t)},e.click()}function se(){let e=cc(U(s),{mode:`layer`,banner:!0}),t=new Blob([e],{type:`text/css`}),n=URL.createObjectURL(t),r=document.createElement(`a`);r.href=n,r.download=`slashed-overrides.css`,r.click(),URL.revokeObjectURL(n)}ia(()=>{let e=e=>{(e.ctrlKey||e.metaKey)&&!e.shiftKey&&e.key===`z`&&(e.preventDefault(),ie()),(e.ctrlKey||e.metaKey)&&(e.shiftKey&&e.key===`z`||e.key===`y`)&&(e.preventDefault(),ae()),(e.ctrlKey||e.metaKey)&&!e.shiftKey&&e.key.toLowerCase()===`s`&&(e.preventDefault(),A()),(e.ctrlKey||e.metaKey)&&!e.repeat&&e.key.toLowerCase()===`k`&&(e.preventDefault(),R(d,!U(d)))};return window.addEventListener(`keydown`,e),()=>{window.removeEventListener(`keydown`,e),O&&clearTimeout(O)}});var N=rg(),ce=z(N);Xc(ce,{get overrides(){return U(s)},get overridesCount(){return U(v)},get canUndo(){return U(S)},get canRedo(){return U(C)},get hasPendingChanges(){return U(D)},get saveState(){return U(E)},onUndo:ie,onRedo:ae,onResetAll:M,onImport:oe,onExport:se,onSave:A});var le=V(ce,2),ue=z(le);n(ue,()=>`controls`,()=>po,()=>`Controls`),n(V(ue,2),()=>`preview`,()=>Ma,()=>`Preview`),F(le);var de=V(le,2),fe=z(de);el(z(fe),{get activeId(){return U(u)},onSelect:e=>{R(u,e,!0)},get overridesByDomain(){return U(y)}}),F(fe);var pe=V(fe,2),me=z(pe),he=z(me),ge=z(he,!0);F(he);var _e=V(he,2),ve=e=>{var t=ng(),n=z(t);no(n,{class:`w-3 h-3`});var r=V(n);F(t),H(()=>{Q(t,`title`,`Reset ${U(x)} override${U(x)===1?``:`s`} in ${i[U(u)]??U(u)}`),q(r,` Reset ${U(x)??``}`)}),W(`click`,t,re),K(e,t)};J(_e,e=>{U(x)>0&&e(ve)}),F(me);var ye=V(me,2);Gh(z(ye),{get domain(){return U(u)},get tokens(){return r},get overrides(){return U(s)},onSet:ee,onReset:te,onBulkChange:j,onApplyTheme:ne,onSelectDomain:e=>{R(u,e,!0)},onResetAll:M}),F(ye),F(pe);var be=V(pe,2);Pl(z(be),{get overrides(){return U(s)},get previewTheme(){return U(m)},get previewWidth(){return U(h)},get previewMotion(){return U(g)},get previewTemplate(){return U(_)},onThemeChange:e=>{R(m,e,!0)},onWidthChange:e=>{R(h,e,!0)},onMotionChange:e=>{R(g,e,!0)},onTemplateChange:e=>{R(_,e,!0)}}),F(be),F(de);var xe=V(de,2);{let e=I(()=>i[U(u)]??U(u));rl(xe,{get overridesCount(){return U(v)},get domain(){return U(e)}})}var Se=V(xe,2),Ce=e=>{$h(e,{get tokens(){return r},get overrides(){return U(s)},onNavigate:e=>{R(u,e,!0)},onClose:()=>{R(d,!1)}})};J(Se,e=>{U(d)&&e(Ce)}),F(N),H(()=>{X(N,1,`${o?`w-full h-full`:`w-screen h-screen`} flex flex-col overflow-hidden bg-slate-50 dark:bg-[#0a0a0f] text-slate-800 dark:text-slate-200 font-sans`),X(fe,1,`shrink-0 ${U(p)===`preview`?`hidden md:flex`:`flex`}`),X(pe,1,`flex-1 min-w-0 md:flex-none md:w-[360px] bg-slate-50 dark:bg-[#0c0c15] border-r border-black/8 dark:border-white/8 flex-col min-h-0 ${U(p)===`preview`?`hidden md:flex`:`flex`}`),q(ge,i[U(u)]??U(u)),X(be,1,`flex-1 flex-col min-h-0 min-w-0 ${U(p)===`controls`?`hidden md:flex`:`flex`}`)}),K(e,N),We()}Br([`click`]);var ag=document.getElementById(`app`)??document.getElementById(`slashed-admin-app`);ag&&(ag.innerHTML=``,Xo(ag),Zr(ig,{target:ag}));var og=G(``),sg=G(` `),cg=G(``),lg=G(` 
/
 SLASHED    
    
    
 
 
 
 
 
  
`,1);function ug(e,t){Ue(t,!0);let n=Vm.tokens??Vm,r=`slashed-overlay/open`,i=`slashed-overlay/domain`,a={home:`Home`,colors:`Colors`,typography:`Typography`,spacing:`Spacing`,layout:`Layout`,borders:`Borders`,shadows:`Shadows`,motion:`Motion`,effects:`Effects`,macros:`Macros`,misc:`Misc`,themes:`Themes`,wcag:`WCAG`,setup:`Install`,cheatsheet:`Classes`};function o(e){let t={};for(let n of Object.keys(e)){let e=Il(n);t[e]=(t[e]??0)+1}return t}function s(e,t){try{let n=localStorage.getItem(e);return n===null?t:n!==`false`}catch{return t}}function c(e,t){try{return localStorage.getItem(e)??t}catch{return t}}let l=L(nn(s(r,!0))),u=L(nn(typeof window<`u`?window.matchMedia(`(max-width: 768px)`).matches:!1)),d=L(nn(Rc())),f=L(nn([])),p=L(nn([])),m=L(nn(c(i,`home`))),h=L(!1),g=L(!1),_=L(null),v=L(null);On(()=>{U(g)&&br().then(()=>U(_)?.focus())});let y=I(()=>Object.keys(U(d)).length),b=I(()=>o(U(d))),x=I(()=>U(f).length>0),S=I(()=>U(p).length>0);function C(e,t){let n=Object.keys(e);return n.length===Object.keys(t).length?n.every(n=>e[n]===t[n]):!1}let w=L(nn(Cr(()=>({...U(d)})))),T=L(`idle`),E=I(()=>!C(U(d),U(w))),D=null;function O(){let e=document.getElementById(`slashed-frontend-overlay`);if(!e)return;let t=`var(--wp-admin--admin-bar--height, 32px)`;e.style.position=`fixed`,e.style.right=`0`,e.style.zIndex=`99998`,e.style.pointerEvents=`auto`,U(l)?(e.style.top=t,e.style.width=U(u)?`100vw`:`420px`,e.style.height=`calc(100vh - ${t})`):(e.style.top=`calc(${t} + 16px)`,e.style.width=`40px`,e.style.height=`64px`)}On(()=>{let e=U(d),t=requestAnimationFrame(()=>{zc(e),ml(document)});return()=>cancelAnimationFrame(t)}),On(()=>{!U(u)&&U(l)?document.documentElement.classList.add(`sf-panel-active`):document.documentElement.classList.remove(`sf-panel-active`)}),On(()=>{O()}),On(()=>{try{localStorage.setItem(r,String(U(l)))}catch{}}),On(()=>{try{localStorage.setItem(i,U(m))}catch{}});function k(){R(l,!U(l))}function A(e){let t=U(d),n=typeof e==`function`?e(t):e;C(t,n)||(R(f,[...U(f).slice(-49),t],!0),R(p,[],!0),(U(T)===`saved`||U(T)===`error`)&&R(T,`idle`)),R(d,n,!0)}async function ee(){if(!U(E)||U(T)===`saving`)return;let e={...U(d)};R(T,`saving`);try{await Hc(U(d)),C(U(d),e)?(R(w,e,!0),R(T,`saved`),D&&clearTimeout(D),D=setTimeout(()=>{U(T)===`saved`&&R(T,`idle`),D=null},2e3)):R(T,`idle`)}catch(e){console.warn(`slashed: save failed`,e),R(T,`error`)}}function te(e,t){A(n=>({...n,[e]:t}))}function j(e){A(t=>{let n={...t};return delete n[e],n})}function ne(e){A(t=>{let n={...t};for(let[t,r]of Object.entries(e))r===null?delete n[t]:n[t]=r;return n})}function M(e){A({...e})}function re(){R(g,!0)}function ie(){R(g,!1),A({})}function ae(){R(g,!1)}function oe(){if(!U(f).length)return;let e=U(f)[U(f).length-1];R(p,[U(d),...U(p)],!0),R(f,U(f).slice(0,-1),!0),R(d,e,!0)}function se(){if(!U(p).length)return;let e=U(p)[0];R(f,[...U(f),U(d)],!0),R(p,U(p).slice(1),!0),R(d,e,!0)}function N(){let e=cc(U(d),{mode:`layer`,banner:!0}),t=new Blob([e],{type:`text/css`}),n=URL.createObjectURL(t),r=document.createElement(`a`);r.href=n,r.download=`slashed-overrides.css`,r.click(),URL.revokeObjectURL(n)}function ce(){let e=document.createElement(`input`);e.type=`file`,e.accept=`.css,.json`,e.onchange=e=>{let t=e.target.files?.[0];if(!t)return;let n=new FileReader;n.onload=e=>{let n=e.target?.result;if(n)if(t.name.endsWith(`.json`))try{let e=JSON.parse(n);typeof e==`object`&&e&&!Array.isArray(e)&&A(Object.fromEntries(Object.entries(e).filter(([e,t])=>typeof t==`string`&&/^--sf-[\w-]+$/.test(e))))}catch{}else{let e={},t=/(--sf-[\w-]+)\s*:\s*([^;]+);/g,r;for(;(r=t.exec(n))!==null;)e[r[1].trim()]=r[2].trim();Object.keys(e).length&&A(t=>({...t,...e}))}},n.readAsText(t)},e.click()}ia(()=>{let e=document.createElement(`style`);e.id=`sf-panel-push`,e.textContent=[`html { transition: padding-right 200ms ease-in-out; }`,`html.sf-panel-active { padding-right: 420px !important; overflow-x: clip; }`].join(`
-`),document.head.appendChild(e);let t=window.matchMedia(`(max-width: 768px)`),n=e=>{R(u,e.matches,!0)};t.addEventListener(`change`,n);let r=e=>{let t=e.key.toLowerCase();U(l)&&((e.ctrlKey||e.metaKey)&&!e.shiftKey&&t===`z`&&(e.preventDefault(),oe()),(e.ctrlKey||e.metaKey)&&(e.shiftKey&&t===`z`||t===`y`)&&(e.preventDefault(),se()),(e.ctrlKey||e.metaKey)&&!e.repeat&&t===`k`&&(e.preventDefault(),R(h,!U(h))),(e.ctrlKey||e.metaKey)&&!e.shiftKey&&t===`s`&&(e.preventDefault(),ee()))},i=()=>k();return window.addEventListener(`keydown`,r),document.addEventListener(`slashed:toggle-overlay`,i),()=>{e.remove(),document.documentElement.classList.remove(`sf-panel-active`),t.removeEventListener(`change`,n),window.removeEventListener(`keydown`,r),document.removeEventListener(`slashed:toggle-overlay`,i),D&&clearTimeout(D)}});var le=lg(),ue=B(le),de=e=>{var t=og();ba(V(z(t),2),{class:`w-3 h-3 opacity-70 rotate-180`}),F(t),W(`click`,t,k),K(e,t)};J(ue,e=>{U(l)||e(de)});var fe=V(ue,2);let pe,me;var he=z(fe),ge=V(z(he),4),_e=z(ge,!0);F(ge);var ve=V(ge,2),ye=e=>{var t=sg(),n=z(t,!0);F(t),H(()=>q(n,U(y))),K(e,t)};J(ve,e=>{U(y)>0&&e(ye)});var be=V(ve,4),xe=z(be),Se=e=>{Lo(e,{class:`w-3 h-3 animate-spin`})},Ce=e=>{va(e,{class:`w-3 h-3`})},we=e=>{Vo(e,{class:`w-3 h-3`})},Te=e=>{oo(e,{class:`w-3 h-3`})};J(xe,e=>{U(T)===`saving`?e(Se):U(T)===`saved`?e(Ce,1):U(T)===`error`?e(we,2):e(Te,-1)}),F(be);var Ee=V(be,2);jo(z(Ee),{class:`w-3 h-3`}),F(Ee);var De=V(Ee,2);Qa(z(De),{class:`w-3 h-3`}),F(De);var P=V(De,4);Pa(z(P),{class:`w-3 h-3`}),F(P);var Oe=V(P,2);Oa(z(Oe),{class:`w-3 h-3`}),F(Oe);var ke=V(Oe,2);Do(z(ke),{class:`w-3 h-3`}),F(ke);var Ae=V(ke,4);ba(z(Ae),{class:`w-3 h-3`}),F(Ae),F(he);var je=V(he,2),Me=z(je);el(Me,{get activeId(){return U(m)},onSelect:e=>{R(m,e,!0)},get overridesByDomain(){return U(b)}});var Ne=V(Me,2),Pe=z(Ne),Fe=z(Pe),Ie=z(Fe,!0);F(Fe),F(Pe);var Le=V(Pe,2);Gh(z(Le),{get domain(){return U(m)},get tokens(){return n},get overrides(){return U(d)},onSet:te,onReset:j,onBulkChange:ne,onApplyTheme:M,onSelectDomain:e=>{R(m,e,!0)},onResetAll:re}),F(Le),F(Ne),F(je);var Re=V(je,2),ze=e=>{$h(e,{get tokens(){return n},get overrides(){return U(d)},onNavigate:e=>{R(m,e,!0)},onClose:()=>{R(h,!1)}})};J(Re,e=>{U(h)&&e(ze)});var Be=V(Re,2),Ve=e=>{var t=cg(),n=z(t),r=V(z(n),2),i=z(r);F(r);var a=V(r,2),o=z(a);Qi(o,e=>R(_,e),()=>U(_));var s=V(o,2);Qi(s,e=>R(v,e),()=>U(v)),F(a),F(n),F(t),H(()=>q(i,`This will clear all ${U(y)??``} customisation${U(y)===1?``:`s`}.
+      itself and can't be shown in the static canvas.
`);function xm(e,t){Ue(t,!0);let n=[{label:`Below`,token:`--sf-z-below`,note:`Behind content (e.g. decorative BG)`},{label:`Raised`,token:`--sf-z-raised`,note:`Slightly above flow`},{label:`Dropdown`,token:`--sf-z-dropdown`,note:`Dropdowns, popovers`},{label:`Sticky`,token:`--sf-z-sticky`,note:`Sticky headers, toolbars`},{label:`Fixed`,token:`--sf-z-fixed`,note:`Fixed UI chrome`},{label:`Overlay`,token:`--sf-z-overlay`,note:`Modals, drawers backdrop`},{label:`Modal`,token:`--sf-z-modal`,note:`Modal dialogs`},{label:`Popover`,token:`--sf-z-popover`,note:`Tooltips, menus`},{label:`Tooltip`,token:`--sf-z-tooltip`,note:`Inline tooltips`},{label:`Toast`,token:`--sf-z-toast`,note:`Notifications`}],r=[{label:`Smooth`,value:`smooth`},{label:`Auto`,value:`auto`}],i=[{label:`XS`,token:`--sf-size-xs`,default:1.5},{label:`S`,token:`--sf-size-s`,default:2},{label:`M`,token:`--sf-size-m`,default:2.5},{label:`L`,token:`--sf-size-l`,default:2.75},{label:`XL`,token:`--sf-size-xl`,default:3.5}];function a(e,t,n){if(!e)return t;let r=parseFloat(n?e.replace(n,``):e);return isNaN(r)?t:r}let o=I(()=>a(t.overrides[`--sf-touch-target`],44,`px`)),s=I(()=>t.overrides[`--sf-scroll-behavior`]??`smooth`),c=I(()=>a(t.overrides[`--sf-z-base`],0)),l=I(()=>t.overrides[`--sf-caret-color`]??``),u=I(()=>a(t.overrides[`--sf-link-underline-offset`]?.replace(`em`,``),.15)),d=I(()=>t.overrides[`--sf-link-underline-thickness`]??`auto`),f=I(()=>t.overrides[`--sf-focus-ring-style`]??`solid`),p=L(!1),m=L(!1),g=L(!1),_=L(!1),v=L(!1),y=L(!1),b=L(!1),x=L(!1),S=L(!1),C=L(!1),w=L(!1),T=L(!1);function E(e){return a(t.overrides[e.token]?.replace(`rem`,``),e.default)}var D=bm(),O=z(D),k=z(O),A=V(z(k),2),ee=z(A,!0);F(A),F(k);var j=V(k,2),te=e=>{var n=$p(),r=B(n);{let e=I(()=>`--sf-touch-target`in t.overrides);$(r,{label:`Min touch size`,get value(){return U(o)},min:32,max:64,step:1,unit:`px`,help:`--sf-touch-target — minimum tappable area for interactive elements (WCAG 2.5.5)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-touch-target`,`${e}px`),onReset:()=>t.onReset(`--sf-touch-target`),rawDefault:`var(--sf-size-l)`,get variableOptions(){return uf},get currentRaw(){return t.overrides[`--sf-touch-target`]},onRawSet:e=>t.onSet(`--sf-touch-target`,e)})}var i=V(r,2),a=z(i),s=z(a);F(a),Me(2),F(i),H(()=>{Z(a,`width: ${U(o)}px; height: ${U(o)}px`),q(s,`${U(o)??``}px`)}),K(e,n)};J(j,e=>{U(p)&&e(te)}),F(O);var ne=V(O,4),M=z(ne),re=V(z(M),2),ie=z(re,!0);F(re),F(M);var ae=V(M,2),oe=e=>{var n=tm();Y(n,21,()=>r,e=>e.value,(e,n)=>{var r=em(),i=z(r,!0);F(r),H(()=>{X(r,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${U(s)===U(n).value?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(i,U(n).label)}),W(`click`,r,()=>U(n).value===`smooth`?t.onReset(`--sf-scroll-behavior`):t.onSet(`--sf-scroll-behavior`,U(n).value)),K(e,r)}),F(n),K(e,n)};J(ae,e=>{U(m)&&e(oe)}),F(ne);var se=V(ne,4),N=z(se),ce=V(z(N),2),le=z(ce,!0);F(ce),F(N);var ue=V(N,2),de=e=>{var r=rm(),i=B(r);{let e=I(()=>`--sf-z-base`in t.overrides);$(i,{label:`Base offset`,get value(){return U(c)},min:0,max:1e3,step:10,help:`--sf-z-base — added to all z-index tokens to avoid conflicts with existing stacking contexts`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-z-base`,String(e)),onReset:()=>t.onReset(`--sf-z-base`)})}var a=V(i,2);Y(a,21,()=>n,e=>e.token,(e,n)=>{let r=I(()=>U(n).token in t.overrides);var i=nm(),a=z(i),o=V(a,2),s=z(o,!0);F(o);var c=V(o,2),l=z(c,!0);F(c);var u=V(c,2),d=z(u,!0);F(u),F(i),H(e=>{X(a,1,`w-1.5 h-1.5 rounded-full shrink-0 ${U(r)?`bg-amber-400`:`bg-black/20 dark:bg-white/20`}`),q(s,U(n).label),q(l,U(n).note),q(d,e)},[()=>U(n).token.replace(`--sf-z-`,``)]),K(e,i)}),F(a),Me(2),K(e,r)};J(ue,e=>{U(g)&&e(de)}),F(se);var fe=V(se,4),pe=z(fe),me=V(z(pe),2),he=z(me,!0);F(me),F(pe);var ge=V(pe,2),_e=e=>{var n=im(),r=z(n),i=V(z(r),2);{let e=I(()=>t.overrides[`--sf-color-selection-bg`]??``),n=I(()=>`--sf-color-selection-bg`in t.overrides);Au(i,{token:`--sf-color-selection-bg`,get value(){return U(e)},placeholder:`default`,get isOverridden(){return U(n)},onSet:e=>t.onSet(`--sf-color-selection-bg`,e),onReset:()=>t.onReset(`--sf-color-selection-bg`)})}F(r);var a=V(r,2),o=V(z(a),2);{let e=I(()=>t.overrides[`--sf-color-selection-text`]??``),n=I(()=>`--sf-color-selection-text`in t.overrides);Au(o,{token:`--sf-color-selection-text`,get value(){return U(e)},placeholder:`default`,get isOverridden(){return U(n)},onSet:e=>t.onSet(`--sf-color-selection-text`,e),onReset:()=>t.onReset(`--sf-color-selection-text`)})}F(a);var s=V(a,2),c=z(s);F(s);var l=V(s,6),u=V(z(l),2);{let e=I(()=>t.overrides[`--sf-color-selection-bg--alt`]??``),n=I(()=>`--sf-color-selection-bg--alt`in t.overrides);Au(u,{token:`--sf-color-selection-bg--alt`,get value(){return U(e)},placeholder:`default`,get isOverridden(){return U(n)},onSet:e=>t.onSet(`--sf-color-selection-bg--alt`,e),onReset:()=>t.onReset(`--sf-color-selection-bg--alt`)})}F(l);var d=V(l,2),f=V(z(d),2);{let e=I(()=>t.overrides[`--sf-color-selection-text--alt`]??``),n=I(()=>`--sf-color-selection-text--alt`in t.overrides);Au(f,{token:`--sf-color-selection-text--alt`,get value(){return U(e)},placeholder:`default`,get isOverridden(){return U(n)},onSet:e=>t.onSet(`--sf-color-selection-text--alt`,e),onReset:()=>t.onReset(`--sf-color-selection-text--alt`)})}F(d);var p=V(d,2),m=z(p);F(p),F(n),H(()=>{Z(c,`--sf-color-selection-bg: ${t.overrides[`--sf-color-selection-bg`]??`#6366f1`}; --sf-color-selection-text: ${t.overrides[`--sf-color-selection-text`]??`#ffffff`}`),Z(m,`--sf-color-selection-bg: ${t.overrides[`--sf-color-selection-bg--alt`]??`#4338ca`}; --sf-color-selection-text: ${t.overrides[`--sf-color-selection-text--alt`]??`#e0e7ff`}`)}),K(e,n)};J(ge,e=>{U(_)&&e(_e)}),F(fe);var ve=V(fe,4),ye=z(ve),be=V(z(ye),2),xe=z(be,!0);F(be),F(ye);var Se=V(ye,2),Ce=e=>{var n=am(),r=B(n);Y(r,20,()=>[`solid`,`dashed`,`dotted`],e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-focus-ring-style`]??`solid`);var i=em(),a=z(i,!0);F(i),H(()=>{X(i,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer capitalize ${U(r)===n?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(a,n)}),W(`click`,i,()=>n===`solid`?t.onReset(`--sf-focus-ring-style`):t.onSet(`--sf-focus-ring-style`,n)),K(e,i)}),F(r);var i=V(r,2),a=z(i),o=z(a);F(a),F(i),H(()=>{Z(a,`outline: 2px ${U(f)} ${t.overrides[`--sf-focus-ring-color`]||`oklch(0.7 0.2 235)`}; outline-offset: 2px`),q(o,`Focus ring · ${U(f)??``}`)}),K(e,n)};J(Se,e=>{U(v)&&e(Ce)}),F(ve);var we=V(ve,4),Te=z(we),Ee=V(z(Te),2),De=z(Ee,!0);F(Ee),F(Te);var P=V(Te,2),Oe=e=>{var n=sm(),r=V(B(n),2);Y(r,21,()=>i,e=>e.token,(e,n)=>{let r=I(()=>E(U(n)));{let i=I(()=>`${U(n).token} — component size step ${U(n).label}`),a=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:1,max:5,step:.05,unit:`rem`,get help(){return U(i)},get overridden(){return U(a)},onChange:e=>t.onSet(U(n).token,`${e}rem`),onReset:()=>t.onReset(U(n).token)})}}),F(r);var a=V(r,2);Y(a,21,()=>i,e=>e.token,(e,t)=>{let n=I(()=>E(U(t)));var r=om(),i=z(r),a=V(i,2),o=z(a,!0);F(a),F(r),H(e=>{Z(i,e),q(o,U(t).label)},[()=>`height: ${Math.min(U(n)*14,64)}px`]),K(e,r)}),F(a),K(e,n)};J(P,e=>{U(y)&&e(Oe)}),F(we);var ke=V(we,4),Ae=z(ke),je=V(z(Ae),2),Ne=z(je,!0);F(je),F(Ae);var Pe=V(Ae,2),Fe=e=>{var n=lm(),r=B(n),i=V(z(r),2);{let e=I(()=>`--sf-caret-color`in t.overrides);Au(i,{token:`--sf-caret-color`,get value(){return U(l)},placeholder:`default (action color)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-caret-color`,e),onReset:()=>t.onReset(`--sf-caret-color`)})}F(r);var a=V(r,2);{let e=I(()=>`--sf-link-underline-offset`in t.overrides);$(a,{label:`Underline offset`,get value(){return U(u)},min:0,max:.5,step:.01,unit:`em`,help:`--sf-link-underline-offset — gap between text baseline and underline`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-link-underline-offset`,`${e}em`),onReset:()=>t.onReset(`--sf-link-underline-offset`)})}var o=V(a,2),s=z(o),c=V(z(s),2),f=e=>{var n=cm();W(`click`,n,()=>t.onReset(`--sf-link-underline-thickness`)),K(e,n)};J(c,e=>{`--sf-link-underline-thickness`in t.overrides&&e(f)}),F(s);var p=V(s,2);Y(p,20,()=>[[`auto`,`auto`],[`1px`,`1px`],[`2px`,`2px`],[`3px`,`3px`]],([e,t])=>t,(e,n)=>{var r=I(()=>h(n,2));let i=()=>U(r)[0],a=()=>U(r)[1];var o=em(),s=z(o,!0);F(o),H(()=>{X(o,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${U(d)===a()?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(s,i())}),W(`click`,o,()=>a()===`auto`?t.onReset(`--sf-link-underline-thickness`):t.onSet(`--sf-link-underline-thickness`,a())),K(e,o)}),F(p),F(o);var m=V(o,2),g=z(m),_=V(g,2),v=V(z(_));Me(),F(_),F(m),H(()=>{Z(g,`caret-color:${U(l)||`#6366f1`}`),Z(v,`text-decoration:underline;text-underline-offset:${U(u)}em;text-decoration-thickness:${U(d)}`)}),W(`click`,v,e=>e.preventDefault()),K(e,n)};J(Pe,e=>{U(b)&&e(Fe)}),F(ke);var Ie=V(ke,4),Le=z(Ie),Re=V(z(Le),2),ze=z(Re,!0);F(Re),F(Le);var Be=V(Le,2),Ve=e=>{var n=um(),r=V(B(n),2);Y(r,20,()=>[{label:`xs`,token:`--sf-icon-xs`,def:.875},{label:`s`,token:`--sf-icon-s`,def:1},{label:`m`,token:`--sf-icon-m`,def:1.5},{label:`l`,token:`--sf-icon-l`,def:2},{label:`xl`,token:`--sf-icon-xl`,def:3},{label:`2xl`,token:`--sf-icon-2xl`,def:4}],e=>e.token,(e,n)=>{{let r=I(()=>a(t.overrides[n.token]?.replace(`em`,``),n.def)),i=I(()=>n.token in t.overrides);$(e,{get label(){return n.label},get value(){return U(r)},min:.5,max:6,step:.125,unit:`em`,get overridden(){return U(i)},onChange:e=>t.onSet(n.token,`${e}em`),onReset:()=>t.onReset(n.token)})}}),F(r);var i=V(r,2);{let e=I(()=>a(t.overrides[`--sf-icon-box-pad`]?.replace(`em`,``),.5)),n=I(()=>`--sf-icon-box-pad`in t.overrides);$(i,{label:`Box padding`,get value(){return U(e)},min:0,max:2,step:.125,unit:`em`,help:`--sf-icon-box-pad — padding around icon when using .sf-icon-box`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-icon-box-pad`,`${e}em`),onReset:()=>t.onReset(`--sf-icon-box-pad`)})}K(e,n)};J(Be,e=>{U(x)&&e(Ve)}),F(Ie);var He=V(Ie,4),Ge=z(He),Ke=V(z(Ge),2),qe=z(Ke,!0);F(Ke),F(Ge);var Je=V(Ge,2),Ye=e=>{var n=pm(),r=V(B(n),2),i=V(z(r),2);Y(i,20,()=>[`cover`,`contain`,`fill`,`none`],e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-object-fit`]??`cover`);var i=em(),a=z(i,!0);F(i),H(()=>{X(i,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${U(r)===n?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(a,n)}),W(`click`,i,()=>n===`cover`?t.onReset(`--sf-object-fit`):t.onSet(`--sf-object-fit`,n)),K(e,i)}),F(i);var a=V(i,2),o=e=>{var n=dm();W(`click`,n,()=>t.onReset(`--sf-object-fit`)),K(e,n)};J(a,e=>{`--sf-object-fit`in t.overrides&&e(o)}),F(r);var s=V(r,2),c=V(z(s),2);zi(c);var l=V(c,2),u=e=>{var n=fm();W(`click`,n,()=>t.onReset(`--sf-object-position`)),K(e,n)};J(l,e=>{`--sf-object-position`in t.overrides&&e(u)}),F(s),H(()=>Bi(c,t.overrides[`--sf-object-position`]??``)),W(`input`,c,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-object-position`,n):t.onReset(`--sf-object-position`)}),K(e,n)};J(Je,e=>{U(S)&&e(Ye)}),F(He);var Xe=V(He,4),Ze=z(Xe),Qe=V(z(Ze),2),$e=z(Qe,!0);F(Qe),F(Ze);var et=V(Ze,2),tt=e=>{var n=hm(),r=V(B(n),2);Y(r,20,()=>[{label:`Top`,token:`--sf-safe-top`,placeholder:`env(safe-area-inset-top, 0px)`},{label:`Right`,token:`--sf-safe-right`,placeholder:`env(safe-area-inset-right, 0px)`},{label:`Bottom`,token:`--sf-safe-bottom`,placeholder:`env(safe-area-inset-bottom, 0px)`},{label:`Left`,token:`--sf-safe-left`,placeholder:`env(safe-area-inset-left, 0px)`}],e=>e.token,(e,n)=>{var r=mm(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=fm();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.placeholder)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),F(r),K(e,n)};J(et,e=>{U(w)&&e(tt)}),F(Xe);var nt=V(Xe,4),rt=z(nt),it=V(z(rt),2),at=z(it,!0);F(it),F(rt);var ot=V(rt,2),st=e=>{var n=_m(),r=V(B(n),2),i=V(z(r),2);Y(i,20,()=>[`a4`,`letter`,`legal`,`a3`],e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-print-page-size`]??`a4`);var i=em(),a=z(i,!0);F(i),H(()=>{X(i,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${U(r)===n?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(a,n)}),W(`click`,i,()=>n===`a4`?t.onReset(`--sf-print-page-size`):t.onSet(`--sf-print-page-size`,n)),K(e,i)}),F(i),F(r),Y(V(r,2),16,()=>[{label:`Base size`,token:`--sf-print-base-size`,placeholder:`11pt`},{label:`Page margin`,token:`--sf-print-page-margin`,placeholder:`2cm`}],e=>e.token,(e,n)=>{var r=gm(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=fm();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.placeholder)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),K(e,n)};J(ot,e=>{U(C)&&e(st)}),F(nt);var ct=V(nt,4),lt=z(ct),ut=V(z(lt),2),dt=z(ut,!0);F(ut),F(lt);var ft=V(lt,2),pt=e=>{var n=ym(),r=V(B(n),2);Y(r,20,()=>[{label:`sf-is-active`,token:`--sf-is-active`,note:`Active/selected state`},{label:`sf-is-current`,token:`--sf-is-current`,note:`Current page/item`},{label:`sf-is-open`,token:`--sf-is-open`,note:`Open/expanded state`},{label:`sf-is-pressed`,token:`--sf-is-pressed`,note:`Pressed/depressed state`}],e=>e.token,(e,n)=>{let r=I(()=>t.overrides[n.token]??`0`);var i=vm(),a=z(i),o=z(a);F(a);var s=V(a,2),c=z(s,!0);F(s);var l=V(s,2),u=z(l,!0);F(l);var d=V(l,2),f=e=>{var r=fm();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(d,e=>{n.token in t.overrides&&e(f)}),F(i),H(()=>{Q(a,`aria-label`,n.label),Q(a,`aria-pressed`,U(r)===`1`),X(a,1,`w-8 h-4 rounded-full transition-colors relative cursor-pointer shrink-0 ${U(r)===`1`?`bg-indigo-600`:`bg-black/10 dark:bg-white/10`}`),X(o,1,`absolute top-0.5 w-3 h-3 bg-white rounded-full shadow transition-transform ${U(r)===`1`?`translate-x-4`:`translate-x-0.5`}`),q(c,n.label),q(u,n.note)}),W(`click`,a,()=>U(r)===`1`?t.onReset(n.token):t.onSet(n.token,`1`)),K(e,i)}),F(r);var i=V(r,2),a=V(z(i),2);zi(a);var o=V(a,2),s=e=>{var n=fm();W(`click`,n,()=>t.onReset(`--sf-field-required-marker`)),K(e,n)};J(o,e=>{`--sf-field-required-marker`in t.overrides&&e(s)}),F(i),H(()=>Bi(a,t.overrides[`--sf-field-required-marker`]??``)),W(`input`,a,e=>{let n=e.target.value;n?t.onSet(`--sf-field-required-marker`,n):t.onReset(`--sf-field-required-marker`)}),K(e,n)};J(ft,e=>{U(T)&&e(pt)}),F(ct),Me(4),F(D),H(()=>{Q(k,`aria-expanded`,U(p)),q(ee,U(p)?`▲`:`▼`),Q(M,`aria-expanded`,U(m)),q(ie,U(m)?`▲`:`▼`),Q(N,`aria-expanded`,U(g)),q(le,U(g)?`▲`:`▼`),Q(pe,`aria-expanded`,U(_)),q(he,U(_)?`▲`:`▼`),Q(ye,`aria-expanded`,U(v)),q(xe,U(v)?`▲`:`▼`),Q(Te,`aria-expanded`,U(y)),q(De,U(y)?`▲`:`▼`),Q(Ae,`aria-expanded`,U(b)),q(Ne,U(b)?`▲`:`▼`),Q(Le,`aria-expanded`,U(x)),q(ze,U(x)?`▲`:`▼`),Q(Ge,`aria-expanded`,U(S)),q(qe,U(S)?`▲`:`▼`),Q(Ze,`aria-expanded`,U(w)),q($e,U(w)?`▲`:`▼`),Q(rt,`aria-expanded`,U(C)),q(at,U(C)?`▲`:`▼`),Q(lt,`aria-expanded`,U(T)),q(dt,U(T)?`▲`:`▼`)}),W(`click`,k,()=>{R(p,!U(p))}),W(`click`,M,()=>{R(m,!U(m))}),W(`click`,N,()=>{R(g,!U(g))}),W(`click`,pe,()=>{R(_,!U(_))}),W(`click`,ye,()=>{R(v,!U(v))}),W(`click`,Te,()=>{R(y,!U(y))}),W(`click`,Ae,()=>{R(b,!U(b))}),W(`click`,Le,()=>{R(x,!U(x))}),W(`click`,Ge,()=>{R(S,!U(S))}),W(`click`,Ze,()=>{R(w,!U(w))}),W(`click`,rt,()=>{R(C,!U(C))}),W(`click`,lt,()=>{R(T,!U(T))}),K(e,D),We()}Br([`click`,`input`]);var Sm=G(``),Cm=G(`
Variant (preview only)
 
 
Style
 
 
Size
 
 
  
 
 
 
Label size — --sf-btn-font-size
 
 
Label weight — --sf-btn-font-weight
 
`,1),wm=G(`
  
 
 
Card title
 
Body copy showing padding, gap, and background live.
 
 
 
Radius (outer, computed)  
 
--sf-card-radius-outer = radius + padding (concentric math) — not independently overridable, always computed from the two sliders above.
 
Background — --sf-card-bg
 
 
Border color — --sf-card-border-color
 
 
Shadow — --sf-card-shadow
 
 
Elevated shadow — --sf-card-shadow--elevated
 
 
Hover shadow (interactive) — --sf-card-shadow--hover
 
 
Media aspect ratio — --sf-card-media-ratio
 
 
Title size — --sf-card-heading-size
 
 
Nested button size — --sf-card-btn-font-size
 
 
Media object-fit — --sf-object-fit (global, affects all img/video)
 
`,1),Tm=G(`
 
 
 
 
`);function Em(e,t){Ue(t,!0);let n=[`2xs`,`xs`,`s`,`m`,`l`,`xl`,`2xl`],r=[`xs`,`s`,`m`,`l`,`xl`,`2xl`],i=[`square`,`video`,`cinema`,`4-3`,`3-2`,`portrait`,`golden`],a=[`100`,`200`,`300`,`400`,`500`,`600`,`700`,`800`,`900`],o=[`default`,`primary`,`secondary`,`tertiary`,`action`,`base`,`neutral`,`success`,`warning`,`info`,`danger`],s=[{id:`fill`,label:`Fill`},{id:`soft`,label:`Soft`},{id:`outline`,label:`Outline`}],c=[`xs`,`s`,`m`,`l`,`xl`],l=new Set([`default`,`primary`,`secondary`,`tertiary`,`action`]),u=[{step:`surface`,label:`Surface`},{step:`base`,label:`Base`},{step:`inset`,label:`Inset`},{step:`raised`,label:`Raised`}],d=[{step:`border`,label:`Default`},{step:`border--subtle`,label:`Subtle`},{step:`border--strong`,label:`Strong`}],f=[{label:`Radius`,token:`--sf-btn-radius`,unit:`rem`,min:0,max:2,step:.05,default:.5,rawDefault:`var(--sf-radius-m)`,variableOptions:sf},{label:`Padding block`,token:`--sf-btn-padding-block`,unit:`rem`,min:0,max:1,step:.025,default:.375,rawDefault:`var(--sf-space-xs)`,variableOptions:of},{label:`Padding inline`,token:`--sf-btn-padding-inline`,unit:`rem`,min:0,max:2,step:.025,default:1,rawDefault:`var(--sf-space-m)`,variableOptions:of},{label:`Gap (icon+label)`,token:`--sf-btn-gap`,unit:`rem`,min:0,max:1,step:.0125,default:.25,rawDefault:`var(--sf-space-2xs)`,variableOptions:of},{label:`Border width`,token:`--sf-btn-border-width`,unit:`px`,min:0,max:4,step:.5,default:1,rawDefault:`var(--sf-border-width-1)`,variableOptions:cf},{label:`Min height`,token:`--sf-btn-min-height`,unit:`rem`,min:1,max:4,step:.125,default:2.75,rawDefault:`var(--sf-touch-target)`,variableOptions:uf}],p=[{label:`Padding`,token:`--sf-card-padding`,unit:`rem`,min:0,max:3,step:.05,default:1.5,rawDefault:`var(--sf-space-l)`,variableOptions:of},{label:`Gap (header/footer)`,token:`--sf-card-gap`,unit:`rem`,min:0,max:2,step:.05,default:1,rawDefault:`var(--sf-space-m)`,variableOptions:of},{label:`Radius (inner)`,token:`--sf-card-radius`,unit:`rem`,min:0,max:2,step:.05,default:.5,rawDefault:`var(--sf-radius-m)`,variableOptions:sf},{label:`Border width`,token:`--sf-card-border-width`,unit:`px`,min:0,max:4,step:.5,default:1,rawDefault:`var(--sf-border-width-1)`,variableOptions:cf},{label:`Media radius`,token:`--sf-card-media-radius`,unit:`rem`,min:0,max:2,step:.05,default:.5,rawDefault:`var(--sf-card-radius, var(--sf-radius-m))`,variableOptions:sf}],m=L(!1),h=L(!1),g=L(`primary`),_=L(`fill`),v=L(!1),y=L(`m`),b=L(!1),x=L(!1),S=L(!1),C=L(!1),w=L(!1);function T(){let e=[`sf-btn`];return U(g)!=="default"&&e.push(`sf-btn--${U(g)}`),U(_)!==`fill`&&e.push(`sf-btn--${U(_)}`),U(v)&&U(_)!==`soft`&&l.has(U(g))&&e.push(`sf-btn--gradient`),U(y)!==`m`&&e.push(`sf-btn--${U(y)}`),e.join(` `)}function E(){let e=[`sf-card`];return U(S)&&e.push(`sf-card--bordered`),U(C)&&e.push(`sf-card--elevated`),U(w)&&e.push(`sf-card--interactive`),e.join(` `)}function D(e){let n=t.overrides[e.token];if(!n||/^(var|calc|clamp)\(/.test(n.trim()))return e.default;let r=parseFloat(n);return isNaN(r)?e.default:r}function O(e,n,r,i){let a=t.overrides[e];if(!a)return i;let o=a.match(RegExp(`^var\\(--sf-${n}-([\\w-]+)\\)$`));return o&&r.includes(o[1])?o[1]:i}function k(e,n,r,i){r===i?t.onReset(e):t.onSet(e,`var(--sf-${n}-${r})`)}function A(e){return!!e&&/^(var|calc|clamp)\(/.test(e.trim())}let ee=p.find(e=>e.token===`--sf-card-radius`),j=p.find(e=>e.token===`--sf-card-padding`),te=I(()=>D(ee)),ne=I(()=>D(j)),M=I(()=>A(t.overrides[ee.token])||A(t.overrides[j.token]));var re=Tm(),ie=z(re),ae=z(ie),oe=V(z(ae),2),se=z(oe,!0);F(oe),F(ae);var N=V(ae,2),ce=e=>{var r=Cm(),i=B(r),u=V(z(i),2);Y(u,20,()=>o,e=>e,(e,t)=>{var n=Sm(),r=z(n,!0);F(n),H(()=>{X(n,1,`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer capitalize ${U(g)===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(r,t)}),W(`click`,n,()=>{R(g,t,!0)}),K(e,n)}),F(u);var d=V(u,4);Y(d,21,()=>s,e=>e.id,(e,t)=>{var n=Sm(),r=z(n,!0);F(n),H(()=>{X(n,1,`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(_)===U(t).id?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(r,U(t).label)}),W(`click`,n,()=>{R(_,U(t).id,!0)}),K(e,n)}),F(d);var p=V(d,4);Y(p,20,()=>c,e=>e,(e,t)=>{var n=Sm(),r=z(n,!0);F(n),H(()=>{X(n,1,`px-2.5 py-1 rounded-lg text-[10px] border transition-all cursor-pointer uppercase ${U(y)===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(r,t)}),W(`click`,n,()=>{R(y,t,!0)}),K(e,n)}),F(p);var m=V(p,2),h=z(m),S=z(h);zi(S),Me(),F(h);var C=V(h,2),w=z(C);zi(w),Me(),F(C);var E=V(C,2),A=z(E);zi(A),Me(),F(E),F(m),F(i);var ee=V(i,2),j=z(ee);let te;var ne=z(j,!0);F(j),F(ee);var M=V(ee,2),re=z(M);Y(re,17,()=>f,e=>e.token,(e,n)=>{{let r=I(()=>D(U(n))),i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},get min(){return U(n).min},get max(){return U(n).max},get step(){return U(n).step},get unit(){return U(n).unit},get help(){return U(n).token},get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,`${e}${U(n).unit}`),onReset:()=>t.onReset(U(n).token),get rawDefault(){return U(n).rawDefault},get variableOptions(){return U(n).variableOptions},get currentRaw(){return t.overrides[U(n).token]},onRawSet:e=>t.onSet(U(n).token,e)})}});var ie=V(re,2),ae=V(z(ie),2);Y(ae,20,()=>n,e=>e,(e,t)=>{let r=I(()=>O(`--sf-btn-font-size`,`text`,n,`m`));var i=Sm(),a=z(i,!0);F(i),H(()=>{X(i,1,`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(r)===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(a,t)}),W(`click`,i,()=>k(`--sf-btn-font-size`,`text`,t,`m`)),K(e,i)}),F(ae),F(ie);var oe=V(ie,2),se=V(z(oe),2);Y(se,20,()=>a,e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-btn-font-weight`]??`600`);var i=Sm(),a=z(i,!0);F(i),H(e=>{Z(i,e),X(i,1,`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(r)===n?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(a,n)},[()=>`font-weight:${parseInt(n)}`]),W(`click`,i,()=>n===`600`?t.onReset(`--sf-btn-font-weight`):t.onSet(`--sf-btn-font-weight`,n)),K(e,i)}),F(se),F(oe),F(M),H((e,t,n,r)=>{X(h,1,e),Q(h,`title`,t),S.disabled=n,te=X(j,1,r,null,te,{"sf-is-loading":U(x)}),j.disabled=U(b),q(ne,U(x)?`Loading`:`Button label`)},[()=>`flex items-center gap-1.5 text-[9px] ${l.has(U(g))&&U(_)!==`soft`?`text-slate-500 cursor-pointer`:`text-slate-400 dark:text-slate-600 cursor-not-allowed`}`,()=>l.has(U(g))&&U(_)!==`soft`?`Paint the fill (or the outline ring) with the family gradient`:`Gradient covers the core-4 brand families (primary/secondary/tertiary/action) and is ignored under Soft`,()=>!l.has(U(g))||U(_)===`soft`,()=>yi(T())]),Ji(S,()=>U(v),e=>R(v,e)),Ji(w,()=>U(b),e=>R(b,e)),Ji(A,()=>U(x),e=>R(x,e)),K(e,r)};J(N,e=>{U(m)&&e(ce)}),F(ie);var le=V(ie,4),ue=z(le),de=V(z(ue),2),fe=z(de,!0);F(de),F(ue);var pe=V(ue,2),me=e=>{var a=wm(),o=B(a),s=z(o),c=z(s);zi(c),Me(),F(s);var l=V(s,2),f=z(l);zi(f),Me(),F(l);var m=V(l,2),h=z(m);zi(h),Me(),F(m),F(o);var g=V(o,2),_=z(g);F(g);var v=V(g,2),y=z(v);Y(y,17,()=>p,e=>e.token,(e,n)=>{{let r=I(()=>D(U(n))),i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},get min(){return U(n).min},get max(){return U(n).max},get step(){return U(n).step},get unit(){return U(n).unit},get help(){return U(n).token},get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,`${e}${U(n).unit}`),onReset:()=>t.onReset(U(n).token),get rawDefault(){return U(n).rawDefault},get variableOptions(){return U(n).variableOptions},get currentRaw(){return t.overrides[U(n).token]},onRawSet:e=>t.onSet(U(n).token,e)})}});var b=V(y,2),x=V(z(b),2),T=z(x,!0);F(x),F(b);var A=V(b,4),ee=V(z(A),2);Y(ee,21,()=>u,e=>e.step,(e,t)=>{let n=I(()=>O(`--sf-card-bg`,`color`,u.map(e=>e.step),`surface`));var r=Sm(),i=z(r,!0);F(r),H(()=>{X(r,1,`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(n)===U(t).step?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(i,U(t).label)}),W(`click`,r,()=>k(`--sf-card-bg`,`color`,U(t).step,`surface`)),K(e,r)}),F(ee),F(A);var j=V(A,2),re=V(z(j),2);Y(re,21,()=>d,e=>e.step,(e,t)=>{let n=I(()=>O(`--sf-card-border-color`,`color`,d.map(e=>e.step),`border`));var r=Sm(),i=z(r,!0);F(r),H(()=>{X(r,1,`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(n)===U(t).step?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(i,U(t).label)}),W(`click`,r,()=>k(`--sf-card-border-color`,`color`,U(t).step,`border`)),K(e,r)}),F(re),F(j);var ie=V(j,2),ae=V(z(ie),2);Y(ae,20,()=>r,e=>e,(e,t)=>{let n=I(()=>O(`--sf-card-shadow`,`shadow`,r,`s`));var i=Sm(),a=z(i,!0);F(i),H(()=>{X(i,1,`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(n)===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(a,t)}),W(`click`,i,()=>k(`--sf-card-shadow`,`shadow`,t,`s`)),K(e,i)}),F(ae),F(ie);var oe=V(ie,2),se=V(z(oe),2);Y(se,20,()=>r,e=>e,(e,t)=>{let n=I(()=>O(`--sf-card-shadow--elevated`,`shadow`,r,`l`));var i=Sm(),a=z(i,!0);F(i),H(()=>{X(i,1,`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(n)===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(a,t)}),W(`click`,i,()=>k(`--sf-card-shadow--elevated`,`shadow`,t,`l`)),K(e,i)}),F(se),F(oe);var N=V(oe,2),ce=V(z(N),2);Y(ce,20,()=>r,e=>e,(e,t)=>{let n=I(()=>O(`--sf-card-shadow--hover`,`shadow`,r,`l`));var i=Sm(),a=z(i,!0);F(i),H(()=>{X(i,1,`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(n)===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(a,t)}),W(`click`,i,()=>k(`--sf-card-shadow--hover`,`shadow`,t,`l`)),K(e,i)}),F(ce),F(N);var le=V(N,2),ue=V(z(le),2);Y(ue,20,()=>i,e=>e,(e,t)=>{let n=I(()=>O(`--sf-card-media-ratio`,`ratio`,i,`video`));var r=Sm(),a=z(r,!0);F(r),H(()=>{X(r,1,`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(n)===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(a,t)}),W(`click`,r,()=>k(`--sf-card-media-ratio`,`ratio`,t,`video`)),K(e,r)}),F(ue),F(le);var de=V(le,2),fe=V(z(de),2);Y(fe,20,()=>n,e=>e,(e,t)=>{let r=I(()=>O(`--sf-card-heading-size`,`text`,n,`xl`));var i=Sm(),a=z(i,!0);F(i),H(()=>{X(i,1,`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(r)===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(a,t)}),W(`click`,i,()=>k(`--sf-card-heading-size`,`text`,t,`xl`)),K(e,i)}),F(fe),F(de);var pe=V(de,2),me=V(z(pe),2);Y(me,20,()=>n,e=>e,(e,t)=>{let r=I(()=>O(`--sf-card-btn-font-size`,`text`,n,`s`));var i=Sm(),a=z(i,!0);F(i),H(()=>{X(i,1,`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(r)===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(a,t)}),W(`click`,i,()=>k(`--sf-card-btn-font-size`,`text`,t,`s`)),K(e,i)}),F(me),F(pe);var he=V(pe,2),ge=V(z(he),2);Y(ge,20,()=>[`cover`,`contain`],e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-object-fit`]??`cover`);var i=Sm(),a=z(i,!0);F(i),H(()=>{X(i,1,`px-2 py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(r)===n?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(a,n)}),W(`click`,i,()=>n===`cover`?t.onReset(`--sf-object-fit`):t.onSet(`--sf-object-fit`,n)),K(e,i)}),F(ge),F(he),F(v),H((e,t)=>{X(_,1,e),q(T,t)},[()=>yi(E()),()=>U(M)?`depends on variable`:`${(U(te)+U(ne)).toFixed(2)}rem`]),Ji(c,()=>U(S),e=>R(S,e)),Ji(f,()=>U(C),e=>R(C,e)),Ji(h,()=>U(w),e=>R(w,e)),K(e,a)};J(pe,e=>{U(h)&&e(me)}),F(le),F(re),H(()=>{Q(ae,`aria-expanded`,U(m)),q(se,U(m)?`▲`:`▼`),Q(ue,`aria-expanded`,U(h)),q(fe,U(h)?`▲`:`▼`)}),W(`click`,ae,()=>{R(m,!U(m))}),W(`click`,ue,()=>{R(h,!U(h))}),K(e,re),We()}Br([`click`]);var Dm=G(`
No saved themes yet.
 
Configure your tokens, then save them above.
`),Om=G(`
`),km=G(`
  
`),Am=G(` `),jm=G(`
 
`),Mm=G(`
  
 
 
 
 
 
 
`),Nm=G(``),Pm=G(`
Themes
 
Save your current configuration as a named theme, then re-apply it any time.
+    Themes are stored in this browser.
 
Save current
 
 
 
 
 
`);function Fm(e,t){Ue(t,!0);let n=L(nn(yc())),r=L(``),i=I(()=>Object.keys(t.overrides).length);function a(e,t){let n=Object.keys(e);return n.length===Object.keys(t).length?n.every(n=>e[n]===t[n]):!1}let o=I(()=>U(n).find(e=>a(e.overrides,t.overrides))?.id??``);function s(){U(i)!==0&&(R(n,bc(U(r),t.overrides),!0),R(r,``))}function c(e){R(n,xc(e),!0)}var l=Pm(),u=V(z(l),4),d=V(z(u),2),f=z(d);zi(f);var p=V(f,2);oo(z(p),{class:`w-3 h-3`}),Me(),F(p),F(d);var m=V(d,2),g=z(m),_=e=>{K(e,Yr(`No active overrides yet — adjust some tokens first.`))},v=e=>{var t=Yr();H(()=>q(t,`Captures all ${U(i)??``} active override${U(i)===1?``:`s`}.`)),K(e,t)};J(g,e=>{U(i)===0?e(_):e(v,-1)}),F(m),F(u);var y=V(u,2),b=z(y),x=e=>{K(e,Dm())},S=e=>{var r=Xr();Y(B(r),17,()=>U(n),e=>e.id,(e,n)=>{let r=I(()=>Object.keys(U(n).overrides).length);var i=Mm(),a=z(i),s=z(a),l=z(s,!0);F(s);var u=V(s,2),d=z(u),f=z(d),p=V(f),m=e=>{va(e,{class:`w-3 h-3 text-indigo-600 dark:text-indigo-400`})};J(p,e=>{U(o)===U(n).id&&e(m)}),F(d);var g=V(d,2),_=z(g);F(g),F(u);var v=V(u,2),y=z(v),b=V(y,2);Do(z(b),{class:`w-3.5 h-3.5`}),F(b),F(v),F(a);var x=V(a,2),S=e=>{var t=jm(),i=z(t);Y(i,17,()=>Object.entries(U(n).overrides).slice(0,5),([e,t])=>e,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=km(),o=z(a),s=e=>{var t=Om();let n;H(()=>n=Z(t,``,n,{background:i()})),K(e,t)},c=I(()=>r().includes(`color`)||r().includes(`source`));J(o,e=>{U(c)&&e(s)});var l=V(o,2),u=z(l,!0);F(l),F(a),H(e=>q(u,e),[()=>r().replace(`--sf-`,``)]),K(e,a)});var a=V(i,2),o=e=>{var t=Am(),n=z(t);F(t),H(()=>q(n,`+${U(r)-5} more`)),K(e,t)};J(a,e=>{U(r)>5&&e(o)}),F(t),K(e,t)};J(x,e=>{U(r)>0&&e(S)}),F(i),H(()=>{X(i,1,`group rounded-xl border transition-all overflow-hidden ${U(o)===U(n).id?`border-indigo-500/40 bg-indigo-500/10`:`border-black/8 dark:border-white/8 bg-black/4 dark:bg-white/4 hover:bg-black/6 dark:hover:bg-white/6 hover:border-black/14 dark:hover:border-white/14`}`),q(l,U(n).icon),q(f,`${U(n).name??``} `),q(_,`${U(r)??``} override${U(r)===1?``:`s`}`)}),W(`click`,y,()=>t.onApplyTheme(U(n).overrides)),W(`click`,b,()=>c(U(n).id)),K(e,i)}),K(e,r)};J(b,e=>{U(n).length===0?e(x):e(S,-1)}),F(y);var C=V(y,2),w=e=>{var n=Nm();W(`click`,n,function(...e){t.onResetAll?.apply(this,e)}),K(e,n)};J(C,e=>{U(i)>0&&e(w)}),F(l),H(()=>p.disabled=U(i)===0),W(`keydown`,f,e=>{e.key===`Enter`&&s()}),qi(f,()=>U(r),e=>R(r,e)),W(`click`,p,s),K(e,l),We()}Br([`keydown`,`click`]);var Im=G(` Link copied!`,1),Lm=G(` Copy shareable link`,1),Rm=G(`
Export
 
 
  
CSS output
 
 
 
 
 
 
  
Usage
 
Paste this CSS into your project after the SLASHED import.
 
`);function zm(e,t){Ue(t,!0);let n=L(`layer`),r=L(!1),i=L(!1),a=I(()=>cc(t.overrides,{mode:U(n),banner:!0})),o=I(()=>Object.keys(t.overrides).length);async function s(){try{await navigator.clipboard.writeText(U(a)),R(r,!0),setTimeout(()=>{R(r,!1)},2e3)}catch{}}async function c(){try{let e=fc(t.overrides,Ic());await navigator.clipboard.writeText(e),R(i,!0),setTimeout(()=>{R(i,!1)},2e3)}catch{}}function l(){let e=new Blob([U(a)],{type:`text/css`}),t=URL.createObjectURL(e),n=document.createElement(`a`);n.href=t,n.download=`slashed-overrides.css`,n.click(),URL.revokeObjectURL(t)}function u(e){return e.includes(`color`)||e.includes(`scrim-color`)||e.includes(`shadow-color`)?`color`:e.includes(`duration`)||e.includes(`delay`)||e.includes(`transition-duration`)?`duration`:e.includes(`radius`)||e.includes(`space`)||e.includes(`size`)||e.includes(`width`)||e.includes(`height`)||e.includes(`gap`)||e.includes(`blur`)||e.includes(`text-`)||e.includes(`leading`)||e.includes(`tracking`)?`dimension`:e.includes(`font-family`)||e.includes(`font-mono`)||e.includes(`font-body`)||e.includes(`font-heading`)||e.includes(`font-code`)?`fontFamily`:e.includes(`font-weight`)||e.includes(`weight`)?`fontWeight`:`string`}function d(){let e={};for(let[n,r]of Object.entries(t.overrides)){let t=n.replace(/^--sf-/,``).replace(/-/g,`.`);e[t]={$value:r,$type:u(n)}}let n=JSON.stringify({$schema:`https://design-tokens.github.io/community-group/format/`,...e},null,2),r=new Blob([n],{type:`application/json`}),i=URL.createObjectURL(r),a=document.createElement(`a`);a.href=i,a.download=`slashed-tokens.w3c.json`,a.click(),URL.revokeObjectURL(i)}var f=Rm(),p=z(f),m=V(z(p),2),h=z(m,!0);F(m),F(p);var g=V(p,2),_=z(g),v=e=>{var t=Im();va(B(t),{class:`w-3 h-3 text-emerald-600 dark:text-emerald-400`}),Me(2),K(e,t)},y=e=>{var t=Lm();Ra(B(t),{class:`w-3 h-3`}),Me(),K(e,t)};J(_,e=>{U(i)?e(v):e(y,-1)}),F(g);var b=V(g,2),x=V(z(b),2),S=z(x),C=V(S,2);F(x),F(b);var w=V(b,2),T=z(w),E=z(T,!0);F(T);var D=V(T,2),O=z(D),k=z(O),A=e=>{va(e,{class:`w-3 h-3 text-emerald-600 dark:text-emerald-400`})},ee=e=>{Ea(e,{class:`w-3 h-3`})};J(k,e=>{U(r)?e(A):e(ee,-1)}),F(O);var j=V(O,2);Oa(z(j),{class:`w-3 h-3`}),F(j),F(D),F(w);var te=V(w,2);Oa(z(te),{class:`w-3 h-3`}),Me(),F(te);var ne=V(te,2),M=V(z(ne),4);M.textContent=`@import 'slashed/slashed.full.css';
+@import './slashed-overrides.css';`,F(ne),F(f),H(()=>{q(h,U(o)>0?`${U(o)} override${U(o)===1?``:`s`} ready to export.`:`No overrides yet. Customise tokens, then export.`),g.disabled=U(o)===0,X(S,1,`flex-1 py-1.5 rounded-md text-[11px] font-bold transition-all cursor-pointer ${U(n)===`layer`?`bg-indigo-600 text-white`:`text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200`}`),X(C,1,`flex-1 py-1.5 rounded-md text-[11px] font-bold transition-all cursor-pointer ${U(n)===`root`?`bg-indigo-600 text-white`:`text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200`}`),q(E,U(a)||`/* No overrides */`),te.disabled=U(o)===0}),W(`click`,g,c),W(`click`,S,()=>{R(n,`layer`)}),W(`click`,C,()=>{R(n,`root`)}),W(`click`,O,s),W(`click`,j,l),W(`click`,te,d),K(e,f),We()}Br([`click`]);var Bm={_sync:{generatedBy:`configurator/scripts/sync-api.mjs`,source:`docs/api-index.json`},classes:[{name:`no-motion`,selector:`.no-motion`,kind:`accessibility`,category:`Accessibility`,group:`Reduced motion. Token override helps components that read`,description:`Suppresses all animations and transitions within the subtree. Apply to a container to create a reduced-motion zone without relying on the system preference.`,optional:!1,layer:`slashed.accessibility`},{name:`no-print`,selector:`.no-print`,kind:`print`,category:`Print`,group:`Print visibility utilities`,description:`Hides the element in @media print. Use on sidebars, navigation bars, and decorative elements that should not appear on paper.`,optional:!1,layer:`slashed.print`},{name:`print-color-exact`,selector:`.print-color-exact`,kind:`print`,category:`Print`,group:`Opt-in colour treatment`,description:`Forces exact color rendering in print (print-color-adjust: exact). Use on charts and colored badges that must preserve their fill colors in print.`,optional:!1,layer:`slashed.print`},{name:`print-no-color`,selector:`.print-no-color`,kind:`print`,category:`Print`,group:`Opt-in colour treatment`,description:`Strips color information in print (print-color-adjust: economy). Defers to the printer's ink-saving mode for backgrounds and non-critical color fills.`,optional:!1,layer:`slashed.print`},{name:`print-only`,selector:`.print-only`,kind:`print`,category:`Print`,group:`Print visibility utilities`,description:`Hides the element on screen (display: none) but shows it in @media print. Use for print-only headers, footers, and supplementary content not needed on screen.`,optional:!1,layer:`slashed.print`},{name:`sf-alternate`,selector:`.sf-alternate`,kind:`layout`,category:`Layout primitives`,group:`Alternate (zigzag / media-object)`,description:`Zigzag / alternating two-column layout. Even children align image-left/text-right; odd children flip. Collapses to a single column below the breakpoint.`,optional:!1,layer:`slashed.layout`},{name:`sf-aspect`,selector:`.sf-aspect`,kind:`macro`,category:`Macro classes`,group:`Aspect`,description:`Sets aspect-ratio from a --sf-aspect-ratio scoped token. Override the token inline to get any ratio without a new class.`,optional:!1,layer:`slashed.macros`},{name:`sf-bento`,selector:`.sf-bento`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Auto-fill bento grid for card dashboards. Children span 1 column by default; use span modifiers (sf-bento-wide, sf-bento-tall, sf-bento-full, sf-bento-featured) to break the grid.`,optional:!1,layer:`slashed.layout`},{name:`sf-bento--2`,selector:`.sf-bento--2`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Bento grid variant with a 2-column base layout.`,optional:!1,layer:`slashed.layout`},{name:`sf-bento--3`,selector:`.sf-bento--3`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Bento grid variant with a 3-column base layout.`,optional:!1,layer:`slashed.layout`},{name:`sf-bento--6`,selector:`.sf-bento--6`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Bento grid variant with a 6-column base layout.`,optional:!1,layer:`slashed.layout`},{name:`sf-bento--compact`,selector:`.sf-bento--compact`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Bento grid variant with shorter default row height.`,optional:!1,layer:`slashed.layout`},{name:`sf-bento--tall`,selector:`.sf-bento--tall`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Bento grid variant with taller default row height.`,optional:!1,layer:`slashed.layout`},{name:`sf-bento-featured`,selector:`.sf-bento-featured`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Span modifier for a bento item: takes up 2×2 cells (featured hero placement).`,optional:!1,layer:`slashed.layout`},{name:`sf-bento-full`,selector:`.sf-bento-full`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Span modifier for a bento item: stretches across all columns (full-width banner).`,optional:!1,layer:`slashed.layout`},{name:`sf-bento-tall`,selector:`.sf-bento-tall`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Span modifier for a bento item: doubles the row height (tall card).`,optional:!1,layer:`slashed.layout`},{name:`sf-bento-wide`,selector:`.sf-bento-wide`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Span modifier for a bento item: spans 2 columns (wide card).`,optional:!1,layer:`slashed.layout`},{name:`sf-bg-layer`,selector:`.sf-bg-layer`,kind:`layout`,category:`Layout primitives`,group:``,description:`Background layer — absolutely-positioned cover media that sits behind a parent's content. The parent is auto-promoted to a positioned, isolated stacking context via :has(), so .sf-bg-layer composes natively under .sf-scrim (background → scrim gradient → content). Works as a bare  or as a wrapper with a nested > img / > video / > picture.`,optional:!1,layer:`slashed.layout`},{name:`sf-box`,selector:`.sf-box`,kind:`layout`,category:`Layout primitives`,group:`Box`,description:`Minimal padding container that applies --sf-component-pad on all sides. The simplest layout primitive for adding breathing room.`,optional:!1,layer:`slashed.layout`},{name:`sf-breakout`,selector:`.sf-breakout`,kind:`layout`,category:`Layout primitives`,group:`Content grid (breakout pattern)`,description:`Breaks a child element out of a parent sf-content-grid, spanning full bleed (or a named grid area) regardless of the parent column. Useful for full-width sections inside constrained prose.`,optional:!1,layer:`slashed.layout`},{name:`sf-btn`,selector:`.sf-btn`,kind:`component`,category:`Components`,group:`.sf-btn`,description:`Interactive call-to-action button. Apply to `),Jm=G(` 
`,1),Ym=G(`
 
 `,1),Xm=G(`knob`),Zm=G(`advanced`),Qm=G(`
 
`),$m=G(`
   
  
 
`),eh=G(`
Classes & Variables
  
 
 
`);function th(e,t){Ue(t,!0);let n=Bm.classes,r=Vm.tokens.filter(e=>e.tier===`PUBLIC`||e.tier===`PUBLIC-ADVANCED`),i=L(``),a=L(`classes`),o=L(``),s=I(()=>()=>{let e=U(i).trim().toLowerCase();return e?n.filter(t=>t.name.toLowerCase().includes(e)||t.selector?.toLowerCase().includes(e)||t.description?.toLowerCase().includes(e)||t.group?.toLowerCase().includes(e)):n}),c=I(()=>()=>{let e=U(i).trim().toLowerCase();return e?r.filter(t=>t.name.toLowerCase().includes(e)||t.description?.toLowerCase().includes(e)||t.group?.toLowerCase().includes(e)||t.value?.toLowerCase().includes(e)):r});function l(e){let t=new Map;for(let n of e){let e=n.category||`Other`,r=n.group||``;t.has(e)||t.set(e,new Map);let i=t.get(e);i.has(r)||i.set(r,[]),i.get(r).push(n)}return t}let u=I(()=>l(U(s)())),d=I(()=>l(U(c)())),f=null;async function p(e){try{await navigator.clipboard.writeText(e),R(o,e,!0),f&&clearTimeout(f),f=setTimeout(()=>{U(o)===e&&R(o,``),f=null},1500)}catch{}}let m={layout:`text-violet-600 dark:text-violet-400`,macro:`text-sky-600 dark:text-sky-400`,state:`text-amber-600 dark:text-amber-400`,accessibility:`text-emerald-600 dark:text-emerald-400`,motion:`text-pink-600 dark:text-pink-400`,print:`text-slate-600 dark:text-slate-400`,form:`text-orange-600 dark:text-orange-400`,component:`text-indigo-600 dark:text-indigo-400`,theme:`text-teal-600 dark:text-teal-400`};var g=eh(),_=z(g),v=V(z(_),2);zi(v);var y=V(v,2),b=z(y),x=z(b);F(b);var S=V(b,2),C=z(S);F(S),F(y),F(_);var w=V(_,2),T=z(w),E=e=>{var t=Xr(),n=B(t),r=e=>{var t=Hm(),n=z(t);F(t),H(()=>q(n,`No classes match "${U(i)??``}"`)),K(e,t)},a=I(()=>U(s)().length===0),c=e=>{var t=Xr();Y(B(t),17,()=>[...U(u).entries()],([e,t])=>e,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=Ym(),s=B(a),c=z(s),l=z(c,!0);F(c),F(s),Y(V(s,2),17,()=>[...i().entries()],([e,t])=>e,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=Jm(),s=B(a),c=e=>{var t=Um(),n=z(t,!0);F(t),H(()=>q(n,r())),K(e,t)};J(s,e=>{r()&&e(c)});var l=V(s,2);Y(l,21,i,e=>e.name,(e,t)=>{var n=qm(),r=z(n),i=z(r),a=z(i),s=z(a,!0);F(a);var c=V(a,2),l=e=>{var n=Wm(),r=z(n,!0);F(n),H(()=>{X(n,1,`text-[8px] font-bold uppercase ${m[U(t).kind]??`text-slate-500`}`),q(r,U(t).kind)}),K(e,n)};J(c,e=>{U(t).kind&&e(l)});var u=V(c,2),d=e=>{K(e,Gm())};J(u,e=>{U(t).optional&&e(d)}),F(i);var f=V(i,2),h=e=>{var n=Km(),r=z(n,!0);F(n),H(()=>q(r,U(t).description)),K(e,n)};J(f,e=>{U(t).description&&e(h)}),F(r);var g=V(r,2),_=z(g),v=e=>{va(e,{class:`w-3 h-3 text-emerald-600 dark:text-emerald-400`})},y=e=>{Ea(e,{class:`w-3 h-3 text-slate-500`})};J(_,e=>{U(o)===U(t).selector?e(v):e(y,-1)}),F(g),F(n),H(()=>q(s,U(t).selector)),W(`click`,g,()=>p(U(t).selector)),K(e,n)}),F(l),K(e,a)}),H(()=>q(l,r())),K(e,a)}),K(e,t)};J(n,e=>{U(a)?e(r):e(c,-1)}),K(e,t)},D=e=>{var t=Xr(),n=B(t),r=e=>{var t=Hm(),n=z(t);F(t),H(()=>q(n,`No tokens match "${U(i)??``}"`)),K(e,t)},a=I(()=>U(c)().length===0),s=e=>{var t=Xr();Y(B(t),17,()=>[...U(d).entries()],([e,t])=>e,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=Ym(),s=B(a),c=z(s),l=z(c,!0);F(c),F(s),Y(V(s,2),17,()=>[...i().entries()],([e,t])=>e,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=Jm(),s=B(a),c=e=>{var t=Um(),n=z(t,!0);F(t),H(()=>q(n,r())),K(e,t)};J(s,e=>{r()&&e(c)});var l=V(s,2);Y(l,21,i,e=>e.name,(e,t)=>{var n=$m(),r=z(n),i=z(r),a=z(i),s=z(a,!0);F(a);var c=V(a,2),l=e=>{K(e,Xm())};J(c,e=>{U(t).role===`knob`&&e(l)});var u=V(c,2),d=e=>{K(e,Zm())};J(u,e=>{U(t).tier===`PUBLIC-ADVANCED`&&e(d)}),F(i);var f=V(i,2),m=e=>{var n=Qm(),r=z(n,!0);F(n),H(()=>q(r,U(t).value)),K(e,n)};J(f,e=>{U(t).value&&e(m)});var h=V(f,2),g=e=>{var n=Km(),r=z(n,!0);F(n),H(()=>q(r,U(t).description)),K(e,n)};J(h,e=>{U(t).description&&e(g)}),F(r);var _=V(r,2),v=z(_),y=e=>{va(e,{class:`w-3 h-3 text-emerald-600 dark:text-emerald-400`})},b=e=>{Ea(e,{class:`w-3 h-3 text-slate-500`})};J(v,e=>{U(o)===`var(${U(t).name})`?e(y):e(b,-1)}),F(_),F(n),H(()=>q(s,U(t).name)),W(`click`,_,()=>p(`var(${U(t).name})`)),K(e,n)}),F(l),K(e,a)}),H(()=>q(l,r())),K(e,a)}),K(e,t)};J(n,e=>{U(a)?e(r):e(s,-1)}),K(e,t)};J(T,e=>{U(a)===`classes`?e(E):e(D,-1)}),F(w),F(g),H((e,t)=>{X(b,1,`flex-1 py-1.5 rounded text-[10px] font-bold transition-all cursor-pointer ${U(a)===`classes`?`bg-indigo-600/30 text-indigo-800 dark:text-indigo-200 border border-indigo-500/30`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(x,`CSS classes (${e??``})`),X(S,1,`flex-1 py-1.5 rounded text-[10px] font-bold transition-all cursor-pointer ${U(a)===`tokens`?`bg-indigo-600/30 text-indigo-800 dark:text-indigo-200 border border-indigo-500/30`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(C,`CSS vars (${t??``})`)},[()=>U(s)().length,()=>U(c)().length]),qi(v,()=>U(i),e=>R(i,e)),W(`click`,b,()=>{R(a,`classes`)}),W(`click`,S,()=>{R(a,`tokens`)}),K(e,g),We()}Br([`click`]);var nh=G(`
`),rh=G(`
`),ih=G(`
 
`),ah=G(``),oh=G(` `),sh=G(``),ch=G(``),lh=G(`
  
 
 
  
`);function uh(e,t){Ue(t,!0);let n=L(!1);function r(e){let t=e.name;if(t.includes(`color`)||t.includes(`source`)||t.includes(`-bg`)||t.includes(`-border`))return`color`;if(t.includes(`font`)||t.includes(`family`))return`font`;let n=e.syntax?.toLowerCase()??``;return n.includes(`number`)||n.includes(`length`)||n.includes(`integer`)?`number`:`text`}let i=I(()=>t.overrideValue??t.token.value),a=I(()=>t.overrideValue!==void 0),o=I(()=>r(t.token)),s=I(()=>t.token.name.replace(`--sf-`,``));function c(e){return fl.value,vl(e)||vl(`var(${t.token.name})`)||e}let l=I(()=>U(o)===`color`?c(U(i)):``);var u=lh(),d=z(u),f=V(d,2),p=e=>{var t=nh();let n;H(()=>n=Z(t,``,n,{background:U(l)})),K(e,t)},m=e=>{K(e,rh())};J(f,e=>{U(o)===`color`?e(p):e(m,-1)});var h=V(f,2),g=z(h),_=z(g,!0);F(g);var v=V(g,2),y=e=>{var n=ih(),r=z(n,!0);F(n),H(()=>q(r,t.token.description)),K(e,n)};J(v,e=>{t.token.description&&e(y)}),F(h);var b=V(h,2),x=e=>{var r=ah();zi(r),H(()=>Bi(r,U(i))),zr(`blur`,r,e=>{let r=e.target.value.trim();r&&r!==t.token.value?t.onSet(r):(!r||r===t.token.value)&&t.onReset(),R(n,!1)}),W(`keydown`,r,e=>{e.key===`Enter`&&e.currentTarget.blur(),e.key===`Escape`&&R(n,!1)}),K(e,r)},S=e=>{var t=sh(),r=z(t),o=e=>{var t=oh(),n=z(t,!0);F(t),H(()=>q(n,U(i))),K(e,t)},s=e=>{var t=Yr();H(()=>q(t,U(i))),K(e,t)};J(r,e=>{U(a)?e(o):e(s,-1)}),F(t),H(()=>Q(t,`title`,U(i))),W(`click`,t,()=>{R(n,!0)}),K(e,t)};J(b,e=>{U(n)?e(x):e(S,-1)});var C=V(b,2),w=e=>{var n=ch();W(`click`,n,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(C,e=>{U(a)&&e(w)}),F(u),H(()=>{X(u,1,`flex items-center gap-2 px-3 py-1.5 rounded-lg transition-colors group ${U(a)?`bg-indigo-500/8 border border-indigo-500/15`:`hover:bg-black/4 dark:hover:bg-white/4`}`),X(d,1,`w-1.5 h-1.5 rounded-full shrink-0 ${U(a)?`bg-indigo-500`:`bg-transparent`}`),Q(g,`title`,t.token.name),q(_,U(s))}),K(e,u),We()}Br([`keydown`,`click`]);var dh=G(` `),fh=G(`
No tokens found
`),ph=G(`
 
`),mh=G(`
 
`),hh=G(`
 
 
  
`);function gh(e,t){Ue(t,!0);let n=L(``),r=I(()=>()=>{let e=t.patterns??[t.domain];return t.tokens.filter(t=>e.some(e=>t.name.includes(e))&&t.tier!==`INTERNAL`)}),i=I(()=>()=>{if(!U(n))return U(r)();let e=U(n).toLowerCase();return U(r)().filter(t=>t.name.toLowerCase().includes(e)||t.description?.toLowerCase().includes(e))}),a=I(()=>U(i)().filter(e=>e.name in t.overrides).length);var o=hh(),s=z(o),c=z(s),l=z(c);F(c);var u=V(c,2),d=e=>{var t=dh(),n=z(t);F(t),H(()=>q(n,`${U(a)??``} modified`)),K(e,t)};J(u,e=>{U(a)>0&&e(d)}),F(s);var f=V(s,2);zi(f);var p=V(f,2),m=e=>{K(e,fh())},h=I(()=>U(i)().length===0),g=e=>{var n=mh(),r=z(n);Y(r,17,()=>U(i)().slice(0,60),e=>e.name,(e,n)=>{uh(e,{get token(){return U(n)},get overrideValue(){return t.overrides[U(n).name]},onSet:e=>t.onSet(U(n).name,e),onReset:()=>t.onReset(U(n).name)})});var a=V(r,2),o=e=>{var t=ph(),n=z(t);F(t),H(e=>q(n,`${e??``} more — refine your search`),[()=>U(i)().length-60]),K(e,t)},s=I(()=>U(i)().length>60);J(a,e=>{U(s)&&e(o)}),F(n),K(e,n)};J(p,e=>{U(h)?e(m):e(g,-1)}),F(o),H(()=>{q(l,`${t.domain??``} tokens`),Q(f,`placeholder`,`Search ${t.domain} tokens…`),Bi(f,U(n))}),W(`input`,f,e=>{R(n,e.target.value,!0)}),K(e,o),We()}Br([`input`]);var _h=G(`
`),vh=G(`
  
`),yh=G(`
 
`),bh=G(`
`),xh=G(`
`),Sh=G(`
  
`),Ch=G(`
`),wh=G(`
 
   
 
  
 
  
 
 
 
`);function Th(e,t){Ue(t,!0);let n={PUBLIC:0,"PUBLIC-ADVANCED":1,INTERNAL:2},r=L(``),i=L(!1),a=L(!1),o=I(()=>t.tokens.filter(e=>t.patterns.some(t=>e.name.includes(t))).sort((e,t)=>{let r=n[e.tier??`INTERNAL`]??2,i=n[t.tier??`INTERNAL`]??2;return r===i?e.name.localeCompare(t.name):r-i})),s=I(()=>()=>{let e=U(o);if(U(i)||(e=e.filter(e=>e.tier!==`INTERNAL`)),U(a)&&(e=e.filter(e=>e.name in t.overrides)),U(r)){let t=U(r).toLowerCase();e=e.filter(e=>e.name.toLowerCase().includes(t)||e.description?.toLowerCase().includes(t))}return e}),c=I(()=>U(o).filter(e=>e.name in t.overrides).length),l=I(()=>U(o).filter(e=>e.tier===`PUBLIC`).length),u=I(()=>U(o).filter(e=>e.tier===`PUBLIC-ADVANCED`).length),d=I(()=>U(o).filter(e=>e.tier===`INTERNAL`).length);var f=wh(),p=z(f),m=z(p);zi(m);var h=V(m,2),g=z(h),_=z(g),v=z(_),y=e=>{K(e,_h())};J(v,e=>{U(a)&&e(y)}),F(_);var b=V(_);F(g);var x=V(g,2),S=z(x),C=z(S),w=e=>{K(e,_h())};J(C,e=>{U(i)&&e(w)}),F(S);var T=V(S);F(x);var E=V(x,2),D=z(E);F(E),F(h);var O=V(h,2),k=z(O),A=V(z(k),2),ee=z(A);F(A),F(k);var j=V(k,2),te=V(z(j),2),ne=z(te);F(te),F(j);var M=V(j,2),re=e=>{var t=vh(),n=V(z(t),2),r=z(n);F(n),F(t),H(()=>q(r,`Internal (${U(d)??``})`)),K(e,t)};J(M,e=>{U(i)&&e(re)}),F(O),F(p);var ie=V(p,4),ae=z(ie),oe=e=>{var t=yh(),n=z(t,!0);F(t),H(()=>q(n,U(a)?`No modified tokens in this domain`:`No tokens found`)),K(e,t)},se=I(()=>U(s)().length===0),N=e=>{var n=Ch();Y(n,21,()=>U(s)(),e=>e.name,(e,n)=>{var r=Sh(),i=z(r),a=e=>{K(e,bh())};J(i,e=>{U(n).tier===`PUBLIC-ADVANCED`&&e(a)});var o=V(i,2),s=e=>{K(e,xh())};J(o,e=>{U(n).tier===`INTERNAL`&&e(s)}),uh(V(o,2),{get token(){return U(n)},get overrideValue(){return t.overrides[U(n).name]},onSet:e=>t.onSet(U(n).name,e),onReset:()=>t.onReset(U(n).name)}),F(r),K(e,r)}),F(n),K(e,n)};J(ae,e=>{U(se)?e(oe):e(N,-1)}),F(ie),F(f),H(e=>{Bi(m,U(r)),X(g,1,`flex items-center gap-1 text-[9px] font-bold transition-colors cursor-pointer ${U(a)?`text-indigo-600 dark:text-indigo-400`:`text-slate-400 dark:text-slate-600 hover:text-slate-600 dark:hover:text-slate-400`}`),X(_,1,`w-2.5 h-2.5 rounded border flex items-center justify-center transition-colors ${U(a)?`bg-indigo-600 border-indigo-500`:`border-black/20 dark:border-white/20`}`),q(b,` Modified only ${U(c)>0?`(${U(c)})`:``}`),Q(x,`aria-expanded`,U(i)),X(x,1,`flex items-center gap-1 text-[9px] font-bold transition-colors cursor-pointer ${U(i)?`text-amber-600 dark:text-amber-400`:`text-slate-400 dark:text-slate-600 hover:text-slate-600 dark:hover:text-slate-400`}`),X(S,1,`w-2.5 h-2.5 rounded border flex items-center justify-center transition-colors ${U(i)?`bg-amber-600 border-amber-500`:`border-black/20 dark:border-white/20`}`),q(T,` Internal (${U(d)??``})`),q(D,`${e??``}/${U(o).length??``}`),q(ee,`Public (${U(l)??``})`),q(ne,`Advanced (${U(u)??``})`)},[()=>U(s)().length]),W(`input`,m,e=>{R(r,e.target.value,!0)}),W(`click`,g,()=>{R(a,!U(a))}),W(`click`,x,()=>{R(i,!U(i))}),K(e,f),We()}Br([`input`,`click`]);var Eh=G(``),Dh=G(`
    
 
       
`),Oh=G(`
Waiting for live preview…
`),kh=G(``),Ah=G(`
Pick an editable brand/status (base) color as the foreground to enable auto-fix.
`),jh=G(`
 
`),Mh=G(`
 
 
 
 
 
`),Nh=G(`
 
`),Ph=G(`
Foreground
 
  
Background
 
 
Aa Bb Cc
 
 
Auto-fix to pass   
 
`,1),Fh=G(` `),Ih=G(``),Lh=G(`·`),Rh=G(` `),zh=G(`
Foreground (rows) × background (cols). Click a cell to load it above.
 
`,1),Bh=G(`
Contrast checker
 
Live WCAG ratios computed from the actual rendered preview colors — including derived steps and your overrides.
 
 
 
 
 
`);function Vh(e,t){Ue(t,!0);let n=I(()=>qo.value===`dark`?`#16161e`:`#ffffff`),r=[{label:`Text`,expr:`var(--sf-color-text)`},{label:`Text secondary`,expr:`var(--sf-color-text--secondary)`},{label:`Text muted`,expr:`var(--sf-color-text--muted)`},{label:`White`,expr:`#ffffff`},{label:`Black`,expr:`#000000`}],i=[{label:`Surface`,expr:`var(--sf-color-surface)`},{label:`Bg`,expr:`var(--sf-color-bg)`},{label:`Border`,expr:`var(--sf-color-border)`}],a=[{key:`primary`,srcLight:`--sf-color-primary-source-light`,defLight:`oklch(0.47 0.27 264)`,srcDark:`--sf-color-primary-source-dark`,defDark:`oklch(0.715 0.243 264)`},{key:`secondary`,srcLight:`--sf-color-secondary-source-light`,defLight:`oklch(0.22 0.04 264)`,srcDark:`--sf-color-secondary-source-dark`,defDark:`oklch(0.84 0.036 264)`},{key:`tertiary`,srcLight:`--sf-color-tertiary-source-light`,defLight:`oklch(0.42 0.22 295)`,srcDark:`--sf-color-tertiary-source-dark`,defDark:`oklch(0.74 0.198 295)`},{key:`action`,srcLight:`--sf-color-action-source-light`,defLight:`oklch(0.50 0.22 235)`,srcDark:`--sf-color-action-source-dark`,defDark:`oklch(0.70 0.198 235)`},{key:`neutral`,srcLight:`--sf-color-neutral-source-light`,defLight:`oklch(0.52 0.025 260)`,srcDark:`--sf-color-neutral-source-dark`,defDark:`oklch(0.69 0.0225 260)`},{key:`success`,srcLight:`--sf-color-success-source-light`,defLight:`oklch(0.50 0.16 145)`,srcDark:`--sf-color-success-source-dark`,defDark:`oklch(0.70 0.144 145)`},{key:`warning`,srcLight:`--sf-color-warning-source-light`,defLight:`oklch(0.75 0.17 80)`,srcDark:`--sf-color-warning-source-dark`,defDark:`oklch(0.65 0.153 80)`},{key:`danger`,srcLight:`--sf-color-danger-source-light`,defLight:`oklch(0.48 0.22 12)`,srcDark:`--sf-color-danger-source-dark`,defDark:`oklch(0.71 0.198 12)`},{key:`info`,srcLight:`--sf-color-info-source-light`,defLight:`oklch(0.48 0.18 235)`,srcDark:`--sf-color-info-source-dark`,defDark:`oklch(0.71 0.162 235)`}],o=a.flatMap(e=>[{label:`${e.key} (base)`,expr:`var(--sf-color-${e.key})`,editKey:e.key},{label:`${e.key}-100`,expr:`var(--sf-color-${e.key}-100)`},{label:`${e.key}-600`,expr:`var(--sf-color-${e.key}-600)`},{label:`${e.key}-900`,expr:`var(--sf-color-${e.key}-900)`}]),s=[...r,...i,...o],c=Object.fromEntries(a.map(e=>[e.key,e])),l=[{label:`text`,expr:`var(--sf-color-text)`},{label:`white`,expr:`#ffffff`},{label:`black`,expr:`#000000`},{label:`primary`,expr:`var(--sf-color-primary)`,editKey:`primary`}],u=[{label:`surface`,expr:`var(--sf-color-surface)`},{label:`primary`,expr:`var(--sf-color-primary)`},{label:`neutral-100`,expr:`var(--sf-color-neutral-100)`},{label:`success`,expr:`var(--sf-color-success)`},{label:`warning`,expr:`var(--sf-color-warning)`},{label:`danger`,expr:`var(--sf-color-danger)`}],d=L(`White`),f=L(`primary (base)`),p=L(`AA`),m=I(()=>s.find(e=>e.label===U(d))??s[0]),h=I(()=>s.find(e=>e.label===U(f))??s[0]);function g(e,t){fl.value;let n=Sl(e),r=Sl(t);return!n||!r?null:Xl(Yl(...n),Yl(...r))}function _(e){return e>=7?{tag:`AAA`,cls:`bg-emerald-500/25 text-emerald-800 dark:text-emerald-200`}:e>=4.5?{tag:`AA`,cls:`bg-emerald-500/15 text-emerald-700 dark:text-emerald-300`}:e>=3?{tag:`AA-L`,cls:`bg-amber-500/20 text-amber-700 dark:text-amber-300`}:{tag:`Fail`,cls:`bg-rose-500/20 text-rose-700 dark:text-rose-300`}}let v=I(()=>g(U(m).expr,U(h).expr));function y(){let e=U(d);R(d,U(f),!0),R(f,e,!0)}function b(e,t){let n=s.find(t=>t.expr===e),r=s.find(e=>e.expr===t);n&&R(d,n.label,!0),r&&R(f,r.label,!0)}function x(e){return fl.value,vl(e)||e}let S=L(!1),C=L(!1),w=L(null);function T(){R(w,null);let e=U(m).editKey?c[U(m).editKey]:null;if(!e)return;let n=hl()===`dark`,r=n?e.srcDark:e.srcLight,i=n?e.defDark:e.defLight,{c:a,h:o,l:s,valid:l}=Zl(t.overrides[r]??i);if(!l)return;let u=Sl(U(h).expr);if(!u)return;let d=Yl(...u),f=U(p)===`AAA`?7:4.5,g=null;for(let e=0;e<=1.0001;e+=.005){let[t,n,r]=Jl(e,a,o);Xl(Yl(t,n,r),d)>=f&&(g===null||Math.abs(e-s){if(!U(S)){R(w,null);return}fl.value,U(d),U(f),U(p),U(m).editKey&&U(v)!==null&&U(v)<(U(p)===`AAA`?7:4.5)?T():R(w,null)});var D=Bh(),O=V(z(D),2),k=z(O),A=V(z(k),2),ee=z(A,!0);F(A),F(k);var j=V(k,2),te=e=>{var t=Ph(),r=B(t),i=z(r),a=V(z(i),2);Y(a,21,()=>s,e=>e.label,(e,t)=>{var r=Eh(),i=z(r,!0);F(r);var a={};H(()=>{Z(r,`background:${U(n)};`),q(i,U(t).label),a!==(a=U(t).label)&&(r.value=(r.__value=U(t).label)??``)}),K(e,r)}),F(a),F(i);var o=V(i,2),c=V(o,2),l=V(z(c),2);Y(l,21,()=>s,e=>e.label,(e,t)=>{var r=Eh(),i=z(r,!0);F(r);var a={};H(()=>{Z(r,`background:${U(n)};`),q(i,U(t).label),a!==(a=U(t).label)&&(r.value=(r.__value=U(t).label)??``)}),K(e,r)}),F(l),F(c),F(r);var u=V(r,2),g=z(u),b=z(g);F(g);var S=V(g,2),C=e=>{let t=I(()=>_(U(v)));var n=Dh(),r=z(n),i=z(r);F(r);var a=V(r,2),o=z(a,!0);F(a);var s=V(a,4),c=z(s),l=z(c);F(c);var u=V(c,2),d=z(u);F(u);var f=V(u,2),p=z(f);F(f);var m=V(f,2),h=z(m);F(m),F(s),F(n),H(e=>{q(i,`${e??``}:1`),X(a,1,`text-[10px] font-bold px-2 py-0.5 rounded ${U(t).cls}`),q(o,U(t).tag),X(c,1,yi(U(v)>=4.5?`text-emerald-700 dark:text-emerald-300`:`text-rose-700 dark:text-rose-300`)),q(l,`${U(v)>=4.5?`✓`:`✗`} AA normal`),X(u,1,yi(U(v)>=3?`text-emerald-700 dark:text-emerald-300`:`text-rose-700 dark:text-rose-300`)),q(d,`${U(v)>=3?`✓`:`✗`} AA large`),X(f,1,yi(U(v)>=7?`text-emerald-700 dark:text-emerald-300`:`text-rose-700 dark:text-rose-300`)),q(p,`${U(v)>=7?`✓`:`✗`} AAA normal`),X(m,1,yi(U(v)>=4.5?`text-emerald-700 dark:text-emerald-300`:`text-rose-700 dark:text-rose-300`)),q(h,`${U(v)>=4.5?`✓`:`✗`} AAA large`)},[()=>U(v).toFixed(2)]),K(e,n)},T=e=>{K(e,Oh())};J(S,e=>{U(v)===null?e(T,-1):e(C)}),F(u);var D=V(u,2),O=z(D),k=z(O),A=V(z(k)),ee=z(A);F(A),F(k);var j=V(k,2);Y(j,20,()=>[`AA`,`AAA`],e=>e,(e,t)=>{var n=kh(),r=z(n,!0);F(n),H(()=>{X(n,1,`px-2 py-0.5 rounded-md text-[10px] font-bold cursor-pointer ${U(p)===t?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(r,t)}),W(`click`,n,()=>{R(p,t,!0)}),K(e,n)}),F(j),F(O);var te=V(O,2),ne=e=>{K(e,Ah())},M=e=>{var t=jh(),n=z(t);F(t),H(()=>q(n,`Already passes ${U(p)??``}. 🎉`)),K(e,t)},re=e=>{var t=Mh(),n=z(t),r=V(n,2),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o);F(o),F(r);var c=V(r,2);F(t),H((e,t)=>{Z(n,e),q(a,U(w).value),q(s,`→ ${t??``}:1 (${U(p)??``} ✓)`)},[()=>`background:${x(U(w).value)}`,()=>U(w).ratio.toFixed(2)]),W(`click`,c,E),K(e,t)},ie=e=>{var t=Nh(),n=z(t);F(t),H(()=>q(n,`No lightness of this hue reaches ${U(p)??``} on this background — try a different background or hue.`)),K(e,t)};J(te,e=>{U(m).editKey?U(v)!==null&&U(v)>=(U(p)===`AAA`?7:4.5)?e(M,1):U(w)?e(re,2):e(ie,-1):e(ne)}),F(D),H((e,t,n)=>{Z(g,e),Z(b,t),q(ee,`(for ${n??``} mode)`)},[()=>`background:${x(U(h).expr)}`,()=>`color:${x(U(m).expr)}`,()=>hl()]),Oi(a,()=>U(d),e=>R(d,e)),W(`click`,o,y),Oi(l,()=>U(f),e=>R(f,e)),K(e,t)};J(j,e=>{U(S)&&e(te)}),F(O);var ne=V(O,4),M=z(ne),re=V(z(M),2),ie=z(re,!0);F(re),F(M);var ae=V(M,2),oe=e=>{var t=zh(),n=V(B(t),2),r=z(n),i=z(r),a=z(i);Y(V(z(a)),17,()=>u,e=>e.label,(e,t)=>{var n=Fh(),r=z(n,!0);F(n),H(()=>q(r,U(t).label)),K(e,n)}),F(a),F(i);var o=V(i);Y(o,21,()=>l,e=>e.label,(e,t)=>{var n=Rh(),r=z(n),i=z(r,!0);F(r),Y(V(r),17,()=>u,e=>e.label,(e,n)=>{let r=I(()=>g(U(t).expr,U(n).expr));var i=Xr(),a=B(i),o=e=>{let i=I(()=>_(U(r)));var a=Ih(),o=z(a),s=z(o,!0);F(o),F(a),H((e,t)=>{Q(o,`title`,e),X(o,1,`w-full px-1.5 py-1 rounded font-mono font-bold cursor-pointer ${U(i).cls}`),q(s,t)},[()=>`${U(t).label} on ${U(n).label} — ${U(r).toFixed(2)}:1`,()=>U(r).toFixed(1)]),W(`click`,o,()=>b(U(t).expr,U(n).expr)),K(e,a)},s=e=>{K(e,Lh())};J(a,e=>{U(r)===null?e(s,-1):e(o)}),K(e,i)}),F(n),H(()=>q(i,U(t).label)),K(e,n)}),F(o),F(r),F(n),K(e,t)};J(ae,e=>{U(C)&&e(oe)}),F(ne),F(D),H(()=>{Q(k,`aria-expanded`,U(S)),q(ee,U(S)?`▲`:`▼`),Q(M,`aria-expanded`,U(C)),q(ie,U(C)?`▲`:`▼`)}),W(`click`,k,()=>{R(S,!U(S))}),W(`click`,M,()=>{R(C,!U(C))}),K(e,D),We()}Br([`click`]);var Hh=G(`
`),Uh=G(` `),Wh=G(`
 
 
 
`);function Gh(e,t){Ue(t,!0);let n=new Set([`home`,`themes`,`wcag`,`setup`,`cheatsheet`]),r=L(`controls`);On(()=>{t.domain,R(r,`controls`)});let i=I(()=>Fl[t.domain]??[t.domain]),a=I(()=>t.tokens.filter(e=>Il(e.name)===t.domain&&e.name in t.overrides).length);var o=Xr(),s=B(o),c=e=>{var n=Xr(),r=B(n),i=e=>{Kl(e,{get overrides(){return t.overrides},get onSelect(){return t.onSelectDomain},get onApplyTheme(){return t.onApplyTheme},get onResetAll(){return t.onResetAll}})},a=e=>{Fm(e,{get overrides(){return t.overrides},get onApplyTheme(){return t.onApplyTheme},get onResetAll(){return t.onResetAll}})},o=e=>{Vh(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onBulkChange(){return t.onBulkChange}})},s=e=>{zm(e,{get overrides(){return t.overrides}})},c=e=>{th(e,{})};J(r,e=>{t.domain===`home`?e(i):t.domain===`themes`?e(a,1):t.domain===`wcag`?e(o,2):t.domain===`setup`?e(s,3):t.domain===`cheatsheet`&&e(c,4)}),K(e,n)},l=I(()=>n.has(t.domain)),u=e=>{var n=Wh(),o=z(n),s=z(o),c=e=>{var n=Hh(),r=z(n),i=e=>{hd(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange},get onSelectDomain(){return t.onSelectDomain}})},a=e=>{rf(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange}})},o=e=>{gf(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},s=e=>{If(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange}})},c=e=>{Qf(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},l=e=>{op(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},u=e=>{Sp(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange}})},d=e=>{Lp(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},f=e=>{Qp(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},p=e=>{xm(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange}})},m=e=>{Em(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},h=e=>{gh(e,{get domain(){return t.domain},get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})};J(r,e=>{t.domain===`colors`?e(i):t.domain===`typography`?e(a,1):t.domain===`spacing`?e(o,2):t.domain===`layout`?e(s,3):t.domain===`borders`?e(c,4):t.domain===`shadows`?e(l,5):t.domain===`motion`?e(u,6):t.domain===`effects`?e(d,7):t.domain===`macros`?e(f,8):t.domain===`misc`?e(p,9):t.domain===`components`?e(m,10):e(h,-1)}),F(n),K(e,n)},l=e=>{Th(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get patterns(){return U(i)},get onSet(){return t.onSet},get onReset(){return t.onReset}})};J(s,e=>{U(r)===`controls`?e(c):e(l,-1)}),F(o);var u=V(o,2),d=z(u);po(z(d),{class:`w-3 h-3`}),Me(),F(d);var f=V(d,4),p=z(f);Ba(p,{class:`w-3 h-3`});var m=V(p,2),h=e=>{var t=Uh(),n=z(t,!0);F(t),H(()=>q(n,U(a))),K(e,t)};J(m,e=>{U(a)>0&&e(h)}),F(f),F(u),F(n),H(()=>{X(d,1,`flex-1 flex items-center justify-center gap-1.5 py-2 text-[10px] font-bold transition-all cursor-pointer ${U(r)===`controls`?`text-indigo-700 dark:text-indigo-300 bg-indigo-600/10 border-t-2 border-t-indigo-500 -mt-px`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),X(f,1,`flex-1 flex items-center justify-center gap-1.5 py-2 text-[10px] font-bold transition-all cursor-pointer ${U(r)===`tokens`?`text-indigo-700 dark:text-indigo-300 bg-indigo-600/10 border-t-2 border-t-indigo-500 -mt-px`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`)}),W(`click`,d,()=>{R(r,`controls`)}),W(`click`,f,()=>{R(r,`tokens`)}),K(e,n)};J(s,e=>{U(l)?e(c):e(u,-1)}),K(e,o),We()}Br([`click`]);var Kh=G(`
 
`),qh=G(`
Type to search tokens by name or description
`),Jh=G(`overridden`),Yh=G(`
 
`),Xh=G(``),Zh=G(`
↑↓ navigate ↵ open panel Esc close
`),Qh=G(``);function $h(e,t){Ue(t,!0);let n=L(``),r=L(0),i=L(null),a={colors:`Colors`,typography:`Typography`,spacing:`Spacing`,layout:`Layout`,borders:`Borders`,shadows:`Shadows`,motion:`Motion`,effects:`Effects`,macros:`Macros`,misc:`Misc`,components:`Components`},o=I(()=>(()=>{let e=U(n).trim().toLowerCase();if(!e)return[];let r=[];for(let n of t.tokens){if(n.tier===`INTERNAL`)continue;let i=n.name.toLowerCase().includes(e),a=n.description?.toLowerCase().includes(e)??!1;if((i||a)&&(r.push({token:n,domain:Il(n.name),overridden:n.name in t.overrides}),r.length>=40))break}return r})());On(()=>{U(n),R(r,0)}),On(()=>{U(i)&&U(i).focus()});function s(e){t.onNavigate(e),t.onClose()}function c(e){if(e.key===`Escape`){e.preventDefault(),t.onClose();return}if(U(o).length===0&&(e.key===`ArrowDown`||e.key===`ArrowUp`)){e.preventDefault(),R(r,0);return}if(e.key===`ArrowDown`){e.preventDefault(),R(r,Math.min(U(r)+1,U(o).length-1),!0);return}if(e.key===`ArrowUp`){e.preventDefault(),R(r,Math.max(U(r)-1,0),!0);return}e.key===`Enter`&&U(o)[U(r)]&&(e.preventDefault(),s(U(o)[U(r)].domain))}var l=Qh(),u=z(l),d=z(u),f=V(z(d),2);zi(f),Qi(f,e=>R(i,e),()=>U(i)),Me(2),F(d);var p=V(d,2),m=z(p),h=e=>{var t=Kh(),r=z(t);F(t),H(()=>q(r,`No tokens matching "${U(n)??``}"`)),K(e,t)},g=I(()=>U(n).trim()&&U(o).length===0),_=e=>{K(e,qh())},v=I(()=>!U(n).trim()),y=e=>{var n=Xr();Y(B(n),19,()=>U(o),e=>e.token.name,(e,n,i)=>{var o=Xh(),c=z(o),l=z(c),u=z(l),d=z(u,!0);F(u);var f=V(u,2),p=e=>{K(e,Jh())};J(f,e=>{U(n).overridden&&e(p)}),F(l);var m=V(l,2),h=e=>{var t=Yh(),r=z(t,!0);F(t),H(()=>q(r,U(n).token.description)),K(e,t)};J(m,e=>{U(n).token.description&&e(h)}),F(c);var g=V(c,2),_=z(g),v=z(_,!0);F(_);var y=V(_,2),b=z(y,!0);F(y),F(g),F(o),H(()=>{X(o,1,`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors cursor-pointer ${U(r)===U(i)?`bg-indigo-500/15`:`hover:bg-black/4 dark:hover:bg-white/4`}`),q(d,U(n).token.name),q(v,U(n).overridden?t.overrides[U(n).token.name]:U(n).token.value),q(b,a[U(n).domain]??U(n).domain)}),zr(`mouseenter`,o,()=>{R(r,U(i),!0)}),W(`click`,o,()=>s(U(n).domain)),K(e,o)}),K(e,n)};J(m,e=>{U(g)?e(h):U(v)?e(_,1):e(y,-1)}),F(p);var b=V(p,2),x=e=>{K(e,Zh())};J(b,e=>{U(o).length>0&&e(x)}),F(u),F(l),W(`mousedown`,l,e=>{e.target===e.currentTarget&&t.onClose()}),W(`keydown`,f,c),qi(f,()=>U(n),e=>R(n,e)),K(e,l),We()}Br([`mousedown`,`keydown`,`click`]);var eg=G(` `),tg=G(``),ng=G(``),rg=G(`
 
 
 
 
  
 
 
  
`);function ig(e,t){Ue(t,!0);let n=(e,t=f,n=f,r=f)=>{var i=tg(),a=z(i);mi(a,n,(e,t)=>{t(e,{class:`w-3.5 h-3.5`})});var o=V(a),s=V(o),c=e=>{var t=eg(),n=z(t,!0);F(t),H(()=>q(n,U(v)>9?`9+`:U(v))),K(e,t)};J(s,e=>{t()===`preview`&&U(v)>0&&e(c)}),F(i),H(()=>{Q(i,`aria-pressed`,U(p)===t()),X(i,1,`flex-1 flex items-center justify-center gap-1.5 py-2.5 text-[11px] font-bold transition-colors cursor-pointer ${U(p)===t()?`text-indigo-700 dark:text-indigo-300 bg-indigo-500/10`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(o,` ${r()??``} `)}),W(`click`,i,()=>{R(p,t(),!0)}),K(e,i)},r=Vm.tokens??Vm,i={home:`Home`,colors:`Colors`,typography:`Typography`,spacing:`Spacing`,layout:`Layout`,borders:`Borders`,shadows:`Shadows`,motion:`Motion`,effects:`Effects`,macros:`Macros`,misc:`Misc`,components:`Components`,themes:`Themes`,wcag:`WCAG`,setup:`Install`,cheatsheet:`Classes`};function a(e){let t={};for(let n of Object.keys(e)){let e=Il(n);t[e]=(t[e]??0)+1}return t}let o=Lc(),s=L(nn(Rc())),c=L(nn([])),l=L(nn([])),u=L(`home`),d=L(!1),p=L(`controls`),m=L(`light`),h=L(`fluid`),g=L(`normal`),_=L(`marketing`),v=I(()=>Object.keys(U(s)).length),y=I(()=>a(U(s))),b=I(()=>Object.keys(U(s)).filter(e=>Il(e)===U(u))),x=I(()=>U(b).length),S=I(()=>U(c).length>0),C=I(()=>U(l).length>0);function w(e,t){let n=Object.keys(e);return n.length===Object.keys(t).length?n.every(n=>e[n]===t[n]):!1}let T=L(nn(Cr(()=>({...U(s)})))),E=L(`idle`),D=I(()=>!w(U(s),U(T))),O=null;On(()=>{zc(U(s))});function k(e){let t=U(s),n=typeof e==`function`?e(t):e;w(t,n)||(R(c,[...U(c).slice(-49),t],!0),R(l,[],!0),(U(E)===`saved`||U(E)===`error`)&&R(E,`idle`)),R(s,n,!0)}async function A(){if(!U(D)||U(E)===`saving`)return;let e={...U(s)};R(E,`saving`);try{await Hc(U(s)),w(U(s),e)?(R(T,e,!0),R(E,`saved`),O&&clearTimeout(O),O=setTimeout(()=>{U(E)===`saved`&&R(E,`idle`),O=null},2e3)):R(E,`idle`)}catch(e){console.warn(`slashed: save failed`,e),R(E,`error`)}}function ee(e,t){k(n=>({...n,[e]:t}))}function j(e){k(t=>{let n={...t};return delete n[e],n})}function te(e){k(t=>{let n={...t};for(let[t,r]of Object.entries(e))r===null?delete n[t]:n[t]=r;return n})}function ne(e){k({...e})}function M(){k({})}function re(){let e={};for(let t of U(b))e[t]=null;te(e)}function ie(){if(U(c).length===0)return;let e=U(c)[U(c).length-1],t=U(s);R(c,U(c).slice(0,-1),!0),R(l,[t,...U(l)],!0),R(s,e,!0)}function ae(){if(U(l).length===0)return;let e=U(l)[0],t=U(s);R(l,U(l).slice(1),!0),R(c,[...U(c),t],!0),R(s,e,!0)}function oe(){let e=document.createElement(`input`);e.type=`file`,e.accept=`.css,.json`,e.onchange=e=>{let t=e.target.files?.[0];if(!t)return;let n=new FileReader;n.onload=e=>{let n=e.target?.result;if(n)if(t.name.endsWith(`.json`))try{let e=JSON.parse(n);if(typeof e==`object`&&e&&!Array.isArray(e)){let t=Object.fromEntries(Object.entries(e).filter(([e,t])=>typeof t==`string`&&/^--sf-[\w-]+$/.test(e)));Object.keys(t).length>0&&k(t)}}catch{}else{let e={},t=/(--sf-[\w-]+)\s*:\s*([^;]+);/g,r;for(;(r=t.exec(n))!==null;)e[r[1].trim()]=r[2].trim();Object.keys(e).length>0&&k(t=>({...t,...e}))}},n.readAsText(t)},e.click()}function se(){let e=cc(U(s),{mode:`layer`,banner:!0}),t=new Blob([e],{type:`text/css`}),n=URL.createObjectURL(t),r=document.createElement(`a`);r.href=n,r.download=`slashed-overrides.css`,r.click(),URL.revokeObjectURL(n)}ia(()=>{let e=e=>{(e.ctrlKey||e.metaKey)&&!e.shiftKey&&e.key===`z`&&(e.preventDefault(),ie()),(e.ctrlKey||e.metaKey)&&(e.shiftKey&&e.key===`z`||e.key===`y`)&&(e.preventDefault(),ae()),(e.ctrlKey||e.metaKey)&&!e.shiftKey&&e.key.toLowerCase()===`s`&&(e.preventDefault(),A()),(e.ctrlKey||e.metaKey)&&!e.repeat&&e.key.toLowerCase()===`k`&&(e.preventDefault(),R(d,!U(d)))};return window.addEventListener(`keydown`,e),()=>{window.removeEventListener(`keydown`,e),O&&clearTimeout(O)}});var N=rg(),ce=z(N);Xc(ce,{get overrides(){return U(s)},get overridesCount(){return U(v)},get canUndo(){return U(S)},get canRedo(){return U(C)},get hasPendingChanges(){return U(D)},get saveState(){return U(E)},onUndo:ie,onRedo:ae,onResetAll:M,onImport:oe,onExport:se,onSave:A});var le=V(ce,2),ue=z(le);n(ue,()=>`controls`,()=>po,()=>`Controls`),n(V(ue,2),()=>`preview`,()=>Ma,()=>`Preview`),F(le);var de=V(le,2),fe=z(de);el(z(fe),{get activeId(){return U(u)},onSelect:e=>{R(u,e,!0)},get overridesByDomain(){return U(y)}}),F(fe);var pe=V(fe,2),me=z(pe),he=z(me),ge=z(he,!0);F(he);var _e=V(he,2),ve=e=>{var t=ng(),n=z(t);no(n,{class:`w-3 h-3`});var r=V(n);F(t),H(()=>{Q(t,`title`,`Reset ${U(x)} override${U(x)===1?``:`s`} in ${i[U(u)]??U(u)}`),q(r,` Reset ${U(x)??``}`)}),W(`click`,t,re),K(e,t)};J(_e,e=>{U(x)>0&&e(ve)}),F(me);var ye=V(me,2);Gh(z(ye),{get domain(){return U(u)},get tokens(){return r},get overrides(){return U(s)},onSet:ee,onReset:j,onBulkChange:te,onApplyTheme:ne,onSelectDomain:e=>{R(u,e,!0)},onResetAll:M}),F(ye),F(pe);var be=V(pe,2);Pl(z(be),{get overrides(){return U(s)},get previewTheme(){return U(m)},get previewWidth(){return U(h)},get previewMotion(){return U(g)},get previewTemplate(){return U(_)},onThemeChange:e=>{R(m,e,!0)},onWidthChange:e=>{R(h,e,!0)},onMotionChange:e=>{R(g,e,!0)},onTemplateChange:e=>{R(_,e,!0)}}),F(be),F(de);var xe=V(de,2);{let e=I(()=>i[U(u)]??U(u));rl(xe,{get overridesCount(){return U(v)},get domain(){return U(e)}})}var Se=V(xe,2),Ce=e=>{$h(e,{get tokens(){return r},get overrides(){return U(s)},onNavigate:e=>{R(u,e,!0)},onClose:()=>{R(d,!1)}})};J(Se,e=>{U(d)&&e(Ce)}),F(N),H(()=>{X(N,1,`${o?`w-full h-full`:`w-screen h-screen`} flex flex-col overflow-hidden bg-slate-50 dark:bg-[#0a0a0f] text-slate-800 dark:text-slate-200 font-sans`),X(fe,1,`shrink-0 ${U(p)===`preview`?`hidden md:flex`:`flex`}`),X(pe,1,`flex-1 min-w-0 md:flex-none md:w-[360px] bg-slate-50 dark:bg-[#0c0c15] border-r border-black/8 dark:border-white/8 flex-col min-h-0 ${U(p)===`preview`?`hidden md:flex`:`flex`}`),q(ge,i[U(u)]??U(u)),X(be,1,`flex-1 flex-col min-h-0 min-w-0 ${U(p)===`controls`?`hidden md:flex`:`flex`}`)}),K(e,N),We()}Br([`click`]);var ag=document.getElementById(`app`)??document.getElementById(`slashed-admin-app`);ag&&(ag.innerHTML=``,Xo(ag),Zr(ig,{target:ag}));var og=G(``),sg=G(` `),cg=G(``),lg=G(` 
/
 SLASHED    
    
    
 
 
 
 
 
  
`,1);function ug(e,t){Ue(t,!0);let n=Vm.tokens??Vm,r=`slashed-overlay/open`,i=`slashed-overlay/domain`,a={home:`Home`,colors:`Colors`,typography:`Typography`,spacing:`Spacing`,layout:`Layout`,borders:`Borders`,shadows:`Shadows`,motion:`Motion`,effects:`Effects`,macros:`Macros`,misc:`Misc`,themes:`Themes`,wcag:`WCAG`,setup:`Install`,cheatsheet:`Classes`};function o(e){let t={};for(let n of Object.keys(e)){let e=Il(n);t[e]=(t[e]??0)+1}return t}function s(e,t){try{let n=localStorage.getItem(e);return n===null?t:n!==`false`}catch{return t}}function c(e,t){try{return localStorage.getItem(e)??t}catch{return t}}let l=L(nn(s(r,!0))),u=L(nn(typeof window<`u`?window.matchMedia(`(max-width: 768px)`).matches:!1)),d=L(nn(Rc())),f=L(nn([])),p=L(nn([])),m=L(nn(c(i,`home`))),h=L(!1),g=L(!1),_=L(null),v=L(null);On(()=>{U(g)&&br().then(()=>U(_)?.focus())});let y=I(()=>Object.keys(U(d)).length),b=I(()=>o(U(d))),x=I(()=>U(f).length>0),S=I(()=>U(p).length>0);function C(e,t){let n=Object.keys(e);return n.length===Object.keys(t).length?n.every(n=>e[n]===t[n]):!1}let w=L(nn(Cr(()=>({...U(d)})))),T=L(`idle`),E=I(()=>!C(U(d),U(w))),D=null;function O(){let e=document.getElementById(`slashed-frontend-overlay`);if(!e)return;let t=`var(--wp-admin--admin-bar--height, 32px)`;e.style.position=`fixed`,e.style.right=`0`,e.style.zIndex=`99998`,e.style.pointerEvents=`auto`,U(l)?(e.style.top=t,e.style.width=U(u)?`100vw`:`420px`,e.style.height=`calc(100vh - ${t})`):(e.style.top=`calc(${t} + 16px)`,e.style.width=`40px`,e.style.height=`64px`)}On(()=>{let e=U(d),t=requestAnimationFrame(()=>{zc(e),ml(document)});return()=>cancelAnimationFrame(t)}),On(()=>{!U(u)&&U(l)?document.documentElement.classList.add(`sf-panel-active`):document.documentElement.classList.remove(`sf-panel-active`)}),On(()=>{O()}),On(()=>{try{localStorage.setItem(r,String(U(l)))}catch{}}),On(()=>{try{localStorage.setItem(i,U(m))}catch{}});function k(){R(l,!U(l))}function A(e){let t=U(d),n=typeof e==`function`?e(t):e;C(t,n)||(R(f,[...U(f).slice(-49),t],!0),R(p,[],!0),(U(T)===`saved`||U(T)===`error`)&&R(T,`idle`)),R(d,n,!0)}async function ee(){if(!U(E)||U(T)===`saving`)return;let e={...U(d)};R(T,`saving`);try{await Hc(U(d)),C(U(d),e)?(R(w,e,!0),R(T,`saved`),D&&clearTimeout(D),D=setTimeout(()=>{U(T)===`saved`&&R(T,`idle`),D=null},2e3)):R(T,`idle`)}catch(e){console.warn(`slashed: save failed`,e),R(T,`error`)}}function j(e,t){A(n=>({...n,[e]:t}))}function te(e){A(t=>{let n={...t};return delete n[e],n})}function ne(e){A(t=>{let n={...t};for(let[t,r]of Object.entries(e))r===null?delete n[t]:n[t]=r;return n})}function M(e){A({...e})}function re(){R(g,!0)}function ie(){R(g,!1),A({})}function ae(){R(g,!1)}function oe(){if(!U(f).length)return;let e=U(f)[U(f).length-1];R(p,[U(d),...U(p)],!0),R(f,U(f).slice(0,-1),!0),R(d,e,!0)}function se(){if(!U(p).length)return;let e=U(p)[0];R(f,[...U(f),U(d)],!0),R(p,U(p).slice(1),!0),R(d,e,!0)}function N(){let e=cc(U(d),{mode:`layer`,banner:!0}),t=new Blob([e],{type:`text/css`}),n=URL.createObjectURL(t),r=document.createElement(`a`);r.href=n,r.download=`slashed-overrides.css`,r.click(),URL.revokeObjectURL(n)}function ce(){let e=document.createElement(`input`);e.type=`file`,e.accept=`.css,.json`,e.onchange=e=>{let t=e.target.files?.[0];if(!t)return;let n=new FileReader;n.onload=e=>{let n=e.target?.result;if(n)if(t.name.endsWith(`.json`))try{let e=JSON.parse(n);typeof e==`object`&&e&&!Array.isArray(e)&&A(Object.fromEntries(Object.entries(e).filter(([e,t])=>typeof t==`string`&&/^--sf-[\w-]+$/.test(e))))}catch{}else{let e={},t=/(--sf-[\w-]+)\s*:\s*([^;]+);/g,r;for(;(r=t.exec(n))!==null;)e[r[1].trim()]=r[2].trim();Object.keys(e).length&&A(t=>({...t,...e}))}},n.readAsText(t)},e.click()}ia(()=>{let e=document.createElement(`style`);e.id=`sf-panel-push`,e.textContent=[`html { transition: padding-right 200ms ease-in-out; }`,`html.sf-panel-active { padding-right: 420px !important; overflow-x: clip; }`].join(`
+`),document.head.appendChild(e);let t=window.matchMedia(`(max-width: 768px)`),n=e=>{R(u,e.matches,!0)};t.addEventListener(`change`,n);let r=e=>{let t=e.key.toLowerCase();U(l)&&((e.ctrlKey||e.metaKey)&&!e.shiftKey&&t===`z`&&(e.preventDefault(),oe()),(e.ctrlKey||e.metaKey)&&(e.shiftKey&&t===`z`||t===`y`)&&(e.preventDefault(),se()),(e.ctrlKey||e.metaKey)&&!e.repeat&&t===`k`&&(e.preventDefault(),R(h,!U(h))),(e.ctrlKey||e.metaKey)&&!e.shiftKey&&t===`s`&&(e.preventDefault(),ee()))},i=()=>k();return window.addEventListener(`keydown`,r),document.addEventListener(`slashed:toggle-overlay`,i),()=>{e.remove(),document.documentElement.classList.remove(`sf-panel-active`),t.removeEventListener(`change`,n),window.removeEventListener(`keydown`,r),document.removeEventListener(`slashed:toggle-overlay`,i),D&&clearTimeout(D)}});var le=lg(),ue=B(le),de=e=>{var t=og();ba(V(z(t),2),{class:`w-3 h-3 opacity-70 rotate-180`}),F(t),W(`click`,t,k),K(e,t)};J(ue,e=>{U(l)||e(de)});var fe=V(ue,2);let pe,me;var he=z(fe),ge=V(z(he),4),_e=z(ge,!0);F(ge);var ve=V(ge,2),ye=e=>{var t=sg(),n=z(t,!0);F(t),H(()=>q(n,U(y))),K(e,t)};J(ve,e=>{U(y)>0&&e(ye)});var be=V(ve,4),xe=z(be),Se=e=>{Lo(e,{class:`w-3 h-3 animate-spin`})},Ce=e=>{va(e,{class:`w-3 h-3`})},we=e=>{Vo(e,{class:`w-3 h-3`})},Te=e=>{oo(e,{class:`w-3 h-3`})};J(xe,e=>{U(T)===`saving`?e(Se):U(T)===`saved`?e(Ce,1):U(T)===`error`?e(we,2):e(Te,-1)}),F(be);var Ee=V(be,2);jo(z(Ee),{class:`w-3 h-3`}),F(Ee);var De=V(Ee,2);Qa(z(De),{class:`w-3 h-3`}),F(De);var P=V(De,4);Pa(z(P),{class:`w-3 h-3`}),F(P);var Oe=V(P,2);Oa(z(Oe),{class:`w-3 h-3`}),F(Oe);var ke=V(Oe,2);Do(z(ke),{class:`w-3 h-3`}),F(ke);var Ae=V(ke,4);ba(z(Ae),{class:`w-3 h-3`}),F(Ae),F(he);var je=V(he,2),Me=z(je);el(Me,{get activeId(){return U(m)},onSelect:e=>{R(m,e,!0)},get overridesByDomain(){return U(b)}});var Ne=V(Me,2),Pe=z(Ne),Fe=z(Pe),Ie=z(Fe,!0);F(Fe),F(Pe);var Le=V(Pe,2);Gh(z(Le),{get domain(){return U(m)},get tokens(){return n},get overrides(){return U(d)},onSet:j,onReset:te,onBulkChange:ne,onApplyTheme:M,onSelectDomain:e=>{R(m,e,!0)},onResetAll:re}),F(Le),F(Ne),F(je);var Re=V(je,2),ze=e=>{$h(e,{get tokens(){return n},get overrides(){return U(d)},onNavigate:e=>{R(m,e,!0)},onClose:()=>{R(h,!1)}})};J(Re,e=>{U(h)&&e(ze)});var Be=V(Re,2),Ve=e=>{var t=cg(),n=z(t),r=V(z(n),2),i=z(r);F(r);var a=V(r,2),o=z(a);Qi(o,e=>R(_,e),()=>U(_));var s=V(o,2);Qi(s,e=>R(v,e),()=>U(v)),F(a),F(n),F(t),H(()=>q(i,`This will clear all ${U(y)??``} customisation${U(y)===1?``:`s`}.
           You can still undo this before saving.`)),W(`keydown`,t,e=>{e.key===`Escape`&&(e.stopPropagation(),ae()),e.key===`Tab`&&(e.preventDefault(),document.activeElement===U(_)?U(v)?.focus():U(_)?.focus())}),W(`click`,o,ae),W(`click`,s,ie),K(e,t)};J(Be,e=>{U(g)&&e(Ve)}),F(fe),H(e=>{pe=X(fe,1,`dark fixed right-0 z-[99998] pointer-events-auto flex flex-col bg-[#0a0a0f] text-slate-200 font-sans shadow-2xl shadow-black/60 border-l border-white/8 transition-transform duration-200 ease-in-out`,null,pe,{"translate-x-full":!U(l),"translate-x-0":U(l),"pointer-events-none":!U(l)}),me=Z(fe,`top: var(--wp-admin--admin-bar--height, 32px); width: ${U(u)?`100vw`:`420px`}; height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));`,me,{visibility:U(l)?void 0:`hidden`}),Q(fe,`aria-hidden`,!U(l)),fe.inert=!U(l)||void 0,q(_e,a[U(m)]??U(m)),be.disabled=!U(E)||U(T)===`saving`,Q(be,`title`,U(T)===`error`?`Save failed — click to retry`:U(E)?`Save changes (Ctrl+S)`:`No unsaved changes`),Q(be,`aria-label`,U(T)===`saving`?`Saving changes`:U(T)===`error`?`Save failed`:U(E)?`Save changes`:`No unsaved changes`),X(be,1,e),Ee.disabled=!U(x),De.disabled=!U(S),Oe.disabled=U(y)===0,ke.disabled=U(y)===0,q(Ie,a[U(m)]??U(m))},[()=>yi([`p-1 rounded transition-colors cursor-pointer shrink-0 disabled:pointer-events-none`,U(T)===`error`?`text-red-400`:U(T)===`saved`?`text-emerald-300`:U(E)?`text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/10`:`text-slate-500 opacity-40`].join(` `))]),W(`click`,be,ee),W(`click`,Ee,oe),W(`click`,De,se),W(`click`,P,ce),W(`click`,Oe,N),W(`click`,ke,re),W(`click`,Ae,k),K(e,le),We()}Br([`click`,`keydown`]);function dg(){return window.slashedApp?.cssUrl}function fg(e){try{return new URL(e,location.href).origin===location.origin}catch{return!1}}function pg(){let e=document.getElementById(`slashed-frontend-overlay`);if(!e||e.shadowRoot)return;$o(`dark`);let t=e.attachShadow({mode:`open`}),n=document.createElement(`div`);t.appendChild(n);let r=!1,i=()=>{r||(Zr(ug,{target:n}),r=!0,e.setAttribute(`data-slashed-ready`,``))},a=dg();if(a&&fg(a)){let e=document.createElement(`link`);e.rel=`stylesheet`,e.href=a;let n=setTimeout(i,5e3),r=()=>{clearTimeout(n),i()};e.addEventListener(`load`,r),e.addEventListener(`error`,r),t.appendChild(e)}else i()}document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,pg):pg();
 //# sourceMappingURL=app.js.map
\ No newline at end of file
diff --git a/SLASHED-for-WP/data/inventory.json b/SLASHED-for-WP/data/inventory.json
index b2b9d2bc..f9be6645 100644
--- a/SLASHED-for-WP/data/inventory.json
+++ b/SLASHED-for-WP/data/inventory.json
@@ -2,8 +2,8 @@
   "_meta": {
     "source": "source (core/ + optional/ token and class files)",
     "counts": {
-      "variables": 729,
-      "sf_classes": 316,
+      "variables": 735,
+      "sf_classes": 320,
       "is_classes": 0
     }
   },
@@ -75,6 +75,7 @@
     "--sf-btn-padding-block",
     "--sf-btn-padding-inline",
     "--sf-btn-radius",
+    "--sf-card-avatar-size",
     "--sf-card-bg",
     "--sf-card-border-color",
     "--sf-card-border-width",
@@ -116,7 +117,6 @@
     "--sf-color-action-a50",
     "--sf-color-action-a80",
     "--sf-color-action-darker",
-    "--sf-color-action-ghost",
     "--sf-color-action-lighter",
     "--sf-color-action-muted",
     "--sf-color-action-source-dark",
@@ -124,6 +124,7 @@
     "--sf-color-action-subtle",
     "--sf-color-action-superdark",
     "--sf-color-action-superlight",
+    "--sf-color-action-tint",
     "--sf-color-action-xdark",
     "--sf-color-action-xlight",
     "--sf-color-base",
@@ -145,11 +146,11 @@
     "--sf-color-base-a30",
     "--sf-color-base-a50",
     "--sf-color-base-a80",
-    "--sf-color-base-ghost",
     "--sf-color-base-muted",
     "--sf-color-base-source-dark",
     "--sf-color-base-source-light",
     "--sf-color-base-subtle",
+    "--sf-color-base-tint",
     "--sf-color-bg",
     "--sf-color-bg--active",
     "--sf-color-bg--disabled",
@@ -171,6 +172,7 @@
     "--sf-color-danger-source-light",
     "--sf-color-danger-strong",
     "--sf-color-danger-subtle",
+    "--sf-color-danger-tint",
     "--sf-color-dim",
     "--sf-color-heading",
     "--sf-color-info",
@@ -179,6 +181,7 @@
     "--sf-color-info-source-light",
     "--sf-color-info-strong",
     "--sf-color-info-subtle",
+    "--sf-color-info-tint",
     "--sf-color-inset",
     "--sf-color-inverse",
     "--sf-color-link",
@@ -209,7 +212,6 @@
     "--sf-color-neutral-a50",
     "--sf-color-neutral-a80",
     "--sf-color-neutral-darker",
-    "--sf-color-neutral-ghost",
     "--sf-color-neutral-lighter",
     "--sf-color-neutral-muted",
     "--sf-color-neutral-source-dark",
@@ -217,6 +219,7 @@
     "--sf-color-neutral-subtle",
     "--sf-color-neutral-superdark",
     "--sf-color-neutral-superlight",
+    "--sf-color-neutral-tint",
     "--sf-color-neutral-xdark",
     "--sf-color-neutral-xlight",
     "--sf-color-overlay",
@@ -240,7 +243,6 @@
     "--sf-color-primary-a50",
     "--sf-color-primary-a80",
     "--sf-color-primary-darker",
-    "--sf-color-primary-ghost",
     "--sf-color-primary-lighter",
     "--sf-color-primary-muted",
     "--sf-color-primary-source-dark",
@@ -248,6 +250,7 @@
     "--sf-color-primary-subtle",
     "--sf-color-primary-superdark",
     "--sf-color-primary-superlight",
+    "--sf-color-primary-tint",
     "--sf-color-primary-xdark",
     "--sf-color-primary-xlight",
     "--sf-color-raised",
@@ -272,7 +275,6 @@
     "--sf-color-secondary-a50",
     "--sf-color-secondary-a80",
     "--sf-color-secondary-darker",
-    "--sf-color-secondary-ghost",
     "--sf-color-secondary-lighter",
     "--sf-color-secondary-muted",
     "--sf-color-secondary-source-dark",
@@ -280,6 +282,7 @@
     "--sf-color-secondary-subtle",
     "--sf-color-secondary-superdark",
     "--sf-color-secondary-superlight",
+    "--sf-color-secondary-tint",
     "--sf-color-secondary-xdark",
     "--sf-color-secondary-xlight",
     "--sf-color-selection-bg",
@@ -292,6 +295,7 @@
     "--sf-color-success-source-light",
     "--sf-color-success-strong",
     "--sf-color-success-subtle",
+    "--sf-color-success-tint",
     "--sf-color-surface",
     "--sf-color-tertiary",
     "--sf-color-tertiary--active",
@@ -313,7 +317,6 @@
     "--sf-color-tertiary-a50",
     "--sf-color-tertiary-a80",
     "--sf-color-tertiary-darker",
-    "--sf-color-tertiary-ghost",
     "--sf-color-tertiary-lighter",
     "--sf-color-tertiary-muted",
     "--sf-color-tertiary-source-dark",
@@ -321,6 +324,7 @@
     "--sf-color-tertiary-subtle",
     "--sf-color-tertiary-superdark",
     "--sf-color-tertiary-superlight",
+    "--sf-color-tertiary-tint",
     "--sf-color-tertiary-xdark",
     "--sf-color-tertiary-xlight",
     "--sf-color-text",
@@ -346,6 +350,7 @@
     "--sf-color-warning-source-light",
     "--sf-color-warning-strong",
     "--sf-color-warning-subtle",
+    "--sf-color-warning-tint",
     "--sf-color-white",
     "--sf-component-pad",
     "--sf-container-default",
@@ -430,6 +435,7 @@
     "--sf-font-weight-strong",
     "--sf-frame-ratio",
     "--sf-gap",
+    "--sf-gradient-action",
     "--sf-gradient-brand",
     "--sf-gradient-fade--b",
     "--sf-gradient-fade--l",
@@ -755,10 +761,12 @@
     "sf-box",
     "sf-breakout",
     "sf-btn",
+    "sf-btn--action",
+    "sf-btn--base",
     "sf-btn--block",
     "sf-btn--block-cq",
     "sf-btn--danger",
-    "sf-btn--ghost",
+    "sf-btn--gradient",
     "sf-btn--info",
     "sf-btn--l",
     "sf-btn--neutral",
@@ -766,7 +774,9 @@
     "sf-btn--primary",
     "sf-btn--s",
     "sf-btn--secondary",
+    "sf-btn--soft",
     "sf-btn--success",
+    "sf-btn--tertiary",
     "sf-btn--warning",
     "sf-btn--xl",
     "sf-btn--xs",
diff --git a/SLASHED-for-WP/data/variables-hints.json b/SLASHED-for-WP/data/variables-hints.json
index 8ccf9877..1fdc7ede 100644
--- a/SLASHED-for-WP/data/variables-hints.json
+++ b/SLASHED-for-WP/data/variables-hints.json
@@ -267,6 +267,10 @@
     "description": "Corner radius for .sf-btn. Defaults to --sf-radius-m; gives buttons a distinct radius from form fields without touching global tokens.",
     "category": "Component tokens"
   },
+  "sf-card-avatar-size": {
+    "description": "Diameter of .sf-card__avatar. Defaults to 2.5rem.",
+    "category": "Component tokens"
+  },
   "sf-card-bg": {
     "description": "Background surface for .sf-card. Defaults to --sf-color-surface.",
     "category": "Component tokens"
@@ -431,10 +435,6 @@
     "description": "Deep action shade for high-contrast contexts.",
     "category": "Core tokens"
   },
-  "sf-color-action-ghost": {
-    "description": "Near-transparent action tint for ghost-button hover backgrounds.",
-    "category": "Core tokens"
-  },
   "sf-color-action-lighter": {
     "description": "Light action shade for soft accents.",
     "category": "Core tokens"
@@ -463,6 +463,10 @@
     "description": "Near-white action shade for maximum contrast on dark surfaces.",
     "category": "Core tokens"
   },
+  "sf-color-action-tint": {
+    "description": "Near-transparent action tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
+    "category": "Core tokens"
+  },
   "sf-color-action-xdark": {
     "description": "Extra-dark action shade.",
     "category": "Core tokens"
@@ -547,10 +551,6 @@
     "description": "80% opacity base-surface tint.",
     "category": "Core tokens"
   },
-  "sf-color-base-ghost": {
-    "description": "Near-transparent base-surface tint for ghost backgrounds.",
-    "category": "Core tokens"
-  },
   "sf-color-base-muted": {
     "description": "Medium base-surface fill for muted containers or overlays.",
     "category": "Core tokens"
@@ -567,6 +567,10 @@
     "description": "Subtle base-surface tint for low-emphasis backgrounds.",
     "category": "Core tokens"
   },
+  "sf-color-base-tint": {
+    "description": "Near-transparent base-surface tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
+    "category": "Core tokens"
+  },
   "sf-color-bg": {
     "description": "Base page / component background. The canvas all other surfaces layer on top of.",
     "category": "Core tokens"
@@ -651,6 +655,10 @@
     "description": "Light danger tint for error row backgrounds and alert container fills.",
     "category": "Core tokens"
   },
+  "sf-color-danger-tint": {
+    "description": "Near-transparent danger tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
+    "category": "Core tokens"
+  },
   "sf-color-dim": {
     "description": "Backdrop overlay color for modals, drawers, and lightboxes.",
     "category": "Core tokens"
@@ -683,6 +691,10 @@
     "description": "Light info tint for informational note backgrounds.",
     "category": "Core tokens"
   },
+  "sf-color-info-tint": {
+    "description": "Near-transparent info tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
+    "category": "Core tokens"
+  },
   "sf-color-inset": {
     "description": "Slightly inset surface for nested areas — inputs, code blocks, sidebar panels.",
     "category": "Core tokens"
@@ -803,10 +815,6 @@
     "description": "Deep neutral shade for high-contrast contexts.",
     "category": "Core tokens"
   },
-  "sf-color-neutral-ghost": {
-    "description": "Near-transparent neutral tint for ghost-button hover backgrounds.",
-    "category": "Core tokens"
-  },
   "sf-color-neutral-lighter": {
     "description": "Light neutral shade.",
     "category": "Core tokens"
@@ -835,6 +843,10 @@
     "description": "Near-white neutral shade.",
     "category": "Core tokens"
   },
+  "sf-color-neutral-tint": {
+    "description": "Near-transparent neutral tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
+    "category": "Core tokens"
+  },
   "sf-color-neutral-xdark": {
     "description": "Extra-dark neutral shade.",
     "category": "Core tokens"
@@ -927,10 +939,6 @@
     "description": "Deep primary shade.",
     "category": "Core tokens"
   },
-  "sf-color-primary-ghost": {
-    "description": "Near-transparent primary tint for ghost-button hover backgrounds.",
-    "category": "Core tokens"
-  },
   "sf-color-primary-lighter": {
     "description": "Light primary shade.",
     "category": "Core tokens"
@@ -959,6 +967,10 @@
     "description": "Near-white primary shade.",
     "category": "Core tokens"
   },
+  "sf-color-primary-tint": {
+    "description": "Near-transparent primary tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
+    "category": "Core tokens"
+  },
   "sf-color-primary-xdark": {
     "description": "Extra-dark primary shade.",
     "category": "Core tokens"
@@ -1055,10 +1067,6 @@
     "description": "Deep secondary shade.",
     "category": "Core tokens"
   },
-  "sf-color-secondary-ghost": {
-    "description": "Near-transparent secondary tint for ghost-button hover backgrounds.",
-    "category": "Core tokens"
-  },
   "sf-color-secondary-lighter": {
     "description": "Light secondary shade.",
     "category": "Core tokens"
@@ -1087,6 +1095,10 @@
     "description": "Near-white secondary shade.",
     "category": "Core tokens"
   },
+  "sf-color-secondary-tint": {
+    "description": "Near-transparent secondary tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
+    "category": "Core tokens"
+  },
   "sf-color-secondary-xdark": {
     "description": "Extra-dark secondary shade.",
     "category": "Core tokens"
@@ -1135,6 +1147,10 @@
     "description": "Light success tint for confirmation backgrounds.",
     "category": "Core tokens"
   },
+  "sf-color-success-tint": {
+    "description": "Near-transparent success tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
+    "category": "Core tokens"
+  },
   "sf-color-surface": {
     "description": "Default component surface color. Alias of --sf-color-base; use --sf-color-raised for an elevated card/background level.",
     "category": "Core tokens"
@@ -1219,10 +1235,6 @@
     "description": "Deep tertiary shade.",
     "category": "Core tokens"
   },
-  "sf-color-tertiary-ghost": {
-    "description": "Near-transparent tertiary tint for ghost-button hover backgrounds.",
-    "category": "Core tokens"
-  },
   "sf-color-tertiary-lighter": {
     "description": "Light tertiary shade.",
     "category": "Core tokens"
@@ -1251,6 +1263,10 @@
     "description": "Near-white tertiary shade.",
     "category": "Core tokens"
   },
+  "sf-color-tertiary-tint": {
+    "description": "Near-transparent tertiary tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
+    "category": "Core tokens"
+  },
   "sf-color-tertiary-xdark": {
     "description": "Extra-dark tertiary shade.",
     "category": "Core tokens"
@@ -1351,6 +1367,10 @@
     "description": "Light warning tint for warning notification backgrounds.",
     "category": "Core tokens"
   },
+  "sf-color-warning-tint": {
+    "description": "Near-transparent warning tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
+    "category": "Core tokens"
+  },
   "sf-color-white": {
     "description": "Absolute white reference value.",
     "category": "Core tokens"
@@ -1548,15 +1568,15 @@
     "category": "Core tokens"
   },
   "sf-field-padding-block": {
-    "description": "Vertical (block) inner padding for form field inputs.",
+    "description": "Vertical (block) inner padding for form field inputs. Reserved for a future .sf-field class — declared but not yet consumed by any shipped rule.",
     "category": "Component tokens"
   },
   "sf-field-padding-inline": {
-    "description": "Horizontal (inline) inner padding for form field inputs.",
+    "description": "Horizontal (inline) inner padding for form field inputs. Reserved for a future .sf-field class — declared but not yet consumed by any shipped rule.",
     "category": "Component tokens"
   },
   "sf-field-radius": {
-    "description": "Border radius for form field inputs. Defaults to --sf-radius-m; override to reshape all inputs at once.",
+    "description": "Border radius for form field inputs. Defaults to --sf-radius-m; override to reshape all inputs at once. Reserved for a future .sf-field class — declared but not yet consumed by any shipped rule.",
     "category": "Component tokens"
   },
   "sf-field-required-marker": {
@@ -1687,6 +1707,10 @@
     "description": "Default gap between components (the loose rhythm). Layout primitives like cluster/grid/sidebar default to it. Override globally to retune them all at once, or set a primitive token (e.g. --sf-cluster-gap) for one element.",
     "category": "Core tokens"
   },
+  "sf-gradient-action": {
+    "description": "Gradient using action palette colors (light to saturated). Core-4 parity with the primary/secondary/tertiary gradients; drives the default .sf-btn--gradient fill.",
+    "category": "Core tokens"
+  },
   "sf-gradient-brand": {
     "description": "Multi-stop brand gradient spanning primary and secondary palette colors. Use for hero backgrounds and brand accents.",
     "category": "Core tokens"
diff --git a/SLASHED-for-WP/dist/slashed.full.css b/SLASHED-for-WP/dist/slashed.full.css
index ddc826f8..4ce1b8db 100644
--- a/SLASHED-for-WP/dist/slashed.full.css
+++ b/SLASHED-for-WP/dist/slashed.full.css
@@ -1,4 +1,4 @@
-/*! SLASHED v0.7.6 — slashed.full.css | MIT License | github.com/codeslash-dev/SLASHED */
+/*! SLASHED v0.7.7 — slashed.full.css | MIT License | github.com/codeslash-dev/SLASHED */
 
 /* ─── core/layers.css ─── */
 /* SLASHED — core/layers.css
@@ -611,27 +611,38 @@
       --sf-color-mark-bg: oklch(from var(--sf-color-warning) l c h / 0.25);
 
       /* ----------------------------------------------------------
-         Status triplets — subtle/muted (alpha variants)
-         bg/border use same formula both modes
+         Status triplets — subtle/muted/tint (alpha variants)
+         bg/border use same formula both modes. -tint is the 5%
+         near-transparent rung, mirroring the brand families'
+         --sf-color-{family}-tint aliases (full 10-family coverage).
          ---------------------------------------------------------- */
       --sf-color-success-subtle: oklch(from var(--sf-color-success) l c h / 0.12);
       --sf-color-success-muted:  oklch(from var(--sf-color-success) l c h / 0.3);
+      --sf-color-success-tint:   oklch(from var(--sf-color-success) l c h / 0.05);
 
       --sf-color-warning-subtle: oklch(from var(--sf-color-warning) l c h / 0.12);
       --sf-color-warning-muted:  oklch(from var(--sf-color-warning) l c h / 0.3);
+      --sf-color-warning-tint:   oklch(from var(--sf-color-warning) l c h / 0.05);
 
       --sf-color-info-subtle:    oklch(from var(--sf-color-info) l c h / 0.1);
       --sf-color-info-muted:     oklch(from var(--sf-color-info) l c h / 0.3);
+      --sf-color-info-tint:      oklch(from var(--sf-color-info) l c h / 0.05);
 
       --sf-color-danger-subtle:  oklch(from var(--sf-color-danger) l c h / 0.1);
       --sf-color-danger-muted:   oklch(from var(--sf-color-danger) l c h / 0.3);
+      --sf-color-danger-tint:    oklch(from var(--sf-color-danger) l c h / 0.05);
 
       /* ----------------------------------------------------------
          Gradients — derived from brand colors (auto-adapt)
+         All 4 core brand families (primary/secondary/tertiary/action)
+         share the same darkening formula; --sf-gradient-brand is a
+         separate decorative hue-shift option, independent of the
+         colour axis.
          ---------------------------------------------------------- */
       --sf-gradient-primary:   linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) calc(l - 0.08) c h));
       --sf-gradient-secondary: linear-gradient(in oklch 135deg, var(--sf-color-secondary), oklch(from var(--sf-color-secondary) calc(l - 0.08) c h));
       --sf-gradient-tertiary:  linear-gradient(in oklch 135deg, var(--sf-color-tertiary), oklch(from var(--sf-color-tertiary) calc(l - 0.08) c h));
+      --sf-gradient-action:    linear-gradient(in oklch 135deg, var(--sf-color-action), oklch(from var(--sf-color-action) calc(l - 0.08) c h));
       --sf-gradient-brand:     linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) l c calc(h + 30)));
       --sf-gradient-surface:   linear-gradient(in oklab 180deg, var(--sf-color-surface), var(--sf-color-bg));
 
@@ -757,7 +768,7 @@
     --sf-color-primary--active:    var(--sf-color-primary-xdark);
     --sf-color-primary-subtle:     var(--sf-color-primary-a10);
     --sf-color-primary-muted:      var(--sf-color-primary-a30);
-    --sf-color-primary-ghost:      var(--sf-color-primary-a5);
+    --sf-color-primary-tint:      var(--sf-color-primary-a5);
 
 
 
@@ -792,7 +803,7 @@
     --sf-color-secondary--active:    var(--sf-color-secondary-xdark);
     --sf-color-secondary-subtle:     var(--sf-color-secondary-a10);
     --sf-color-secondary-muted:      var(--sf-color-secondary-a30);
-    --sf-color-secondary-ghost:      var(--sf-color-secondary-a5);
+    --sf-color-secondary-tint:      var(--sf-color-secondary-a5);
 
 
 
@@ -827,7 +838,7 @@
     --sf-color-tertiary--active:    var(--sf-color-tertiary-xdark);
     --sf-color-tertiary-subtle:     var(--sf-color-tertiary-a10);
     --sf-color-tertiary-muted:      var(--sf-color-tertiary-a30);
-    --sf-color-tertiary-ghost:      var(--sf-color-tertiary-a5);
+    --sf-color-tertiary-tint:      var(--sf-color-tertiary-a5);
 
 
 
@@ -862,7 +873,7 @@
     --sf-color-action--active:    var(--sf-color-action-xdark);
     --sf-color-action-subtle:     var(--sf-color-action-a10);
     --sf-color-action-muted:      var(--sf-color-action-a30);
-    --sf-color-action-ghost:      var(--sf-color-action-a5);
+    --sf-color-action-tint:      var(--sf-color-action-a5);
 
 
 
@@ -897,7 +908,7 @@
     --sf-color-neutral--active:    var(--sf-color-neutral-xdark);
     --sf-color-neutral-subtle:     var(--sf-color-neutral-a10);
     --sf-color-neutral-muted:      var(--sf-color-neutral-a30);
-    --sf-color-neutral-ghost:      var(--sf-color-neutral-a5);
+    --sf-color-neutral-tint:      var(--sf-color-neutral-a5);
 
 
 
@@ -955,7 +966,7 @@
     --sf-color-base--active:    oklch(from var(--sf-color-base) clamp(0.01, calc(l - 0.08 + var(--sf-is-dark) * 0.16), 0.99) c h);
     --sf-color-base-subtle:     var(--sf-color-base-a10);
     --sf-color-base-muted:      var(--sf-color-base-a30);
-    --sf-color-base-ghost:      var(--sf-color-base-a5);
+    --sf-color-base-tint:      var(--sf-color-base-a5);
 
 
   }
@@ -1012,7 +1023,10 @@
     --sf-font-weight-body:        var(--sf-font-weight-normal);    /* body copy            */
     --sf-font-weight-heading:     var(--sf-font-weight-semibold);  /* h1–h6                */
     --sf-font-weight-display:     var(--sf-font-weight-bold);      /* hero / display       */
-    --sf-font-weight-interactive: var(--sf-font-weight-semibold);  /* buttons, badges, nav */
+    --sf-font-weight-interactive: var(--sf-font-weight-semibold);  /* buttons, badges, nav.
+       Note: "interactive" here names a TYPOGRAPHY WEIGHT TIER; .sf-card--interactive
+       names a card BEHAVIOUR modifier. Deliberate coexistence (different property
+       spaces) — do not introduce a third meaning of "interactive". */
     --sf-font-weight-strong:      var(--sf-font-weight-bold);      /*  / emphasis  */
 
     /* State token — consumed by .sf-is-current in states.css.
@@ -4639,6 +4653,7 @@
      * token; inner media radius mirrors the card's inner radius. */
     --sf-card-media-ratio:    var(--sf-ratio-video);
     --sf-card-media-radius:   var(--sf-card-radius, var(--sf-radius-m));
+    --sf-card-avatar-size:    2.5rem;
     --sf-card-heading-size:   var(--sf-text-xl);
     --sf-card-btn-font-size:  var(--sf-text-s);
 
@@ -4703,9 +4718,11 @@
    @layer slashed.components
    Component class surface: button and card.
 
-   .sf-btn and .sf-card are LIVE since v0.7.0. These are the only two
-   components SLASHED ships — the framework stays BEM-first and token-first
-   and does not carry a broad component library.
+   .sf-btn and .sf-card are LIVE since v0.7.0. Further components
+   (badge, tag, alert, avatar, modal, skeleton) are planned — see
+   docs/roadmap.md and issue #384. The framework stays BEM-first and
+   token-first: anything not shipped here is authored as project BEM
+   classes reading SLASHED tokens.
    Imports optional component tokens. */
 
 
@@ -4714,9 +4731,14 @@
   /* ============================================================
    * .sf-btn
    * Interactive call-to-action element. Apply to  
  
 
 
  
 
 
 `,1);function Lc(e,t){Je(t,!0);let n={add:`Attaches a new BEM class to each element without removing any existing classes.`,rename:`Renames an existing class family to the new name (its settings carry over). When an element has several classes, pick which family to rename per row; other classes are kept unless "Remove all existing classes" is on.`,replace:`Swaps classes for a new BEM class with empty settings. Pick a family to replace just that one (keeping the rest), or leave "— All classes —" / enable "Remove all existing classes" to clear the element.`,migrate:`Lifts inline element styles (padding, color, typography, etc.) into a new global class.`,mixed:`Per-element control — every row defaults to Add. Switch any row to Rename (targets one class family, keeps others) or Replace (a selected family, or all classes). "Remove all existing classes" clears every renamed/replaced row.`};function r(e){return e===`rename`||e===`replace`||e===`mixed`}function i(e){let t=e?._cssGlobalClasses;return t?(Array.isArray(t)?t:Object.values(t)).filter(e=>typeof e==`string`&&e.length>0):[]}let a=R(`add`),o=R(!0),s=R(!1),c=R(er([])),l=R(er([])),u=R(null),d=R(null),f=F(()=>K(c)[0]?.originalLabel??``),p=F(()=>K(c).length===0?new Map:Ls(K(c),t.rootId)),m=F(()=>{if(K(a)!==`migrate`)return null;let e=0,t=0;for(let n of K(c))n.include&&(e+=n.migrateKeys?.length??0,t+=n.skippedKeys?.length??0);return{willMigrate:e,willSkip:t}}),h=F(()=>{if(K(c).length===0)return new Map;let e=Rs({rootId:t.rootId,rows:K(c),mode:K(a)}),n=new Map;if(!e.ok)return n;for(let t of e.ops){let e=[t.finalClass];for(let n of t.modifierSlugs??[])e.push(`${t.finalClass}--${n}`);n.set(t.row.id,e)}return n});Pa(()=>{let e=Ga(t.rootId);z(l,qa().slice(),!0);let n=e.map((e,t)=>{let n=t===0,r=e.label||``,a=Ds(r),o=e.name||``,s,c;if(a)s=a,c=`label`;else if(n)s=`block`,c=`fallback`;else if(o&&!Qs(o)){let e=Zs(o,``);if(e)s=e,c=`element-type`;else{let e=Ds(Za(o));e&&As(e).ok?(s=e,c=`element-type`):(s=`item`,c=`fallback`)}}else s=`item`,c=`fallback`;let l=i(e.settings);return{id:e.id,depth:e.depth,bricksType:o,originalLabel:r||(n?`block`:`element`),name:s,modifiers:[``],isBlockRoot:!1,include:!0,suggestedFrom:c,migrateKeys:Ms(e.settings),skippedKeys:Ps(e.settings),currentClassCount:l.length,currentClassIds:l,op:`add`,renameFamilyId:``}});if(n.length>1){let t=new Map(e.map(e=>[e.id,[]])),r=[];for(let n of e){for(;r.length&&r[r.length-1].depth>=n.depth;)r.pop();r.length&&t.get(r[r.length-1].id).push(n.id),r.push(n)}let i=new Map(e.map(e=>[e.id,e])),a=new Map(n.map(e=>[e.id,e]));for(let[,e]of t){if(!e.length)continue;let t=new Map;for(let n of e){let e=i.get(n)?.name;e&&t.set(e,(t.get(e)??0)+1)}for(let n of e){let e=a.get(n),r=i.get(n);if(!(!e||!r||e.suggestedFrom===`label`)){if(Qs(r.name))e.name=ec(r.name),e.suggestedFrom=`element-type`;else if((t.get(r.name)??0)===1){let t=$s[r.name];t&&(e.name=t,e.suggestedFrom=`element-type`)}}}}}z(c,n,!0)});function g(e){if(e.key===`Escape`){t.onClose?.();return}K(d)&&e.target instanceof Node&&K(d).contains(e.target)&&e.key===`Enter`&&(e.target?.tagName===`INPUT`||e.target?.tagName===`SELECT`)&&(e.preventDefault(),v())}let _=null;function v(){let e=As(Ds(K(c)[0]?.name??``));if(!e.ok){z(u,{kind:`error`,message:e.reason},!0);return}for(let e of K(c)){if(!e.isBlockRoot||!e.include)continue;let t=As(Ds(e.name??``));if(!t.ok){z(u,{kind:`error`,message:`Sub-block "${e.originalLabel}": ${t.reason}`},!0);return}}let n=zs({rootId:t.rootId,rows:K(c),mode:K(a),syncLabels:K(o),removeExisting:K(s)});n.ok?(z(u,{kind:`success`,message:`Applied to ${n.count} element${n.count===1?``:`s`}.`},!0),_&&clearTimeout(_),_=setTimeout(()=>t.onClose?.(),800)):z(u,{kind:`error`,message:n.error},!0)}wr(()=>()=>{_&&clearTimeout(_)});var y=Ic();Ci(`keydown`,rr,g);var b=V(y),x=B(b),S=B(x),ee=H(B(S)),te=B(ee,!0);D(ee),D(S);var ne=H(S,2);D(x);var C=H(x,2),re=B(C),ie=H(B(re),2),ae=B(ie);ae.value=ae.__value=`add`;var oe=H(ae);oe.value=oe.__value=`rename`;var se=H(oe);se.value=se.__value=`replace`;var ce=H(se);ce.value=ce.__value=`migrate`;var le=H(ce);le.value=le.__value=`mixed`,D(ie),D(re);var ue=H(re,2),de=B(ue);ga(de),ze(2),D(ue);var fe=H(ue,2),pe=e=>{var t=Mc(),n=B(t);ga(n),ze(2),D(t),xa(n,()=>K(s),e=>z(s,e)),Y(e,t)},me=F(()=>r(K(a)));Z(fe,e=>{K(me)&&e(pe)}),D(C);var he=H(C,2),ge=B(he,!0);D(he);var _e=H(he,2),ve=e=>{var t=Fc();let n;var r=B(t),i=e=>{Y(e,ji(`No migratable style keys found on any included element. Apply will attach empty classes.`))},a=e=>{var t=Nc(),n=H(V(t)),r=B(n,!0);D(n);var i=H(n);U(()=>{X(r,K(m).willMigrate),X(i,` style key${K(m).willMigrate===1?``:`s`} into new classes.`)}),Y(e,t)};Z(r,e=>{K(m).willMigrate===0?e(i):e(a,-1)});var o=H(r,2),s=e=>{var t=Pc(),n=B(t);D(t),U(()=>X(n,`${K(m).willSkip??``} key${K(m).willSkip===1?``:`s`} not on the allowlist will stay on the element.`)),Y(e,t)};Z(o,e=>{K(m).willSkip>0&&e(s)}),D(t),U(()=>n=oa(t,1,`rebemer-panel__notice`,null,n,{"rebemer-panel__notice--warn":K(m).willSkip>0||K(m).willMigrate===0})),Y(e,t)};Z(_e,e=>{K(m)&&e(ve)});var ye=H(_e,2);Q(ye,23,()=>K(c),e=>e.id,(e,n,r)=>{{let i=F(()=>K(p).get(K(n).id)??``),o=F(()=>K(n).id===t.rootId||K(n).isBlockRoot),u=F(()=>K(h).get(K(n).id)??[]);kc(e,{get mode(){return K(a)},get blockName(){return K(i)},get isRoot(){return K(o)},get rootId(){return t.rootId},get globalClasses(){return K(l)},get removeExisting(){return K(s)},get finalClassNames(){return K(u)},get row(){return K(c)[K(r)]},set row(e){K(c)[K(r)]=e}})}}),D(ye);var be=H(ye,2),xe=B(be),Se=H(xe,2);D(be),D(b),Ma(b,e=>z(d,e),()=>K(d));var Ce=H(b,2),we=e=>{jc(e,{get kind(){return K(u).kind},get message(){return K(u).message},onDismiss:()=>{z(u,null)}})};Z(Ce,e=>{K(u)&&e(we)}),U(()=>{X(te,K(f)),X(ge,n[K(a)])}),q(`click`,ne,()=>t.onClose?.()),da(ie,()=>K(a),e=>z(a,e)),xa(de,()=>K(o),e=>z(o,e)),q(`click`,xe,()=>t.onClose?.()),q(`click`,Se,v),Y(e,y),Ye()}wi([`click`]);var Rc=J(``);function zc(e,t){var n=Rc();let r;U(()=>{r=oa(n,1,`slashed-cp-launch`,null,r,{"slashed-cp-launch--on":t.open}),$(n,`aria-pressed`,t.open)}),q(`click`,n,function(...e){t.onToggle?.apply(this,e)}),Y(e,n)}wi([`click`]);var Bc=`--sf-color-`,Vc=[`primary`,`secondary`,`tertiary`,`action`,`neutral`,`base`],Hc=[`success`,`warning`,`error`,`info`,`danger`],Uc=[`a5`,`a10`,`a20`,`a30`,`a40`,`a50`,`a60`,`a70`,`a80`,`a90`,`a95`],Wc=[`superlight`,`xlight`,`lighter`,`darker`,`xdark`,`superdark`,`hover`,`active`,`strong`,`subtle`,`muted`,`ghost`],Gc=[`text`,`heading`,`bg`,`surface`,`inset`,`raised`,`overlay`,`inverse`,`border`,`link`,`code`,`selection`,`mark`,`dim`],Kc=(e=>new Set(e))([...Vc,...Hc]),qc={primary:{tagline:`Brand identity & main emphasis`,use:`Headlines, primary buttons, key brand moments.`},secondary:{tagline:`Supporting brand tone`,use:`Secondary surfaces and muted brand accents.`},tertiary:{tagline:`Accent / highlight`,use:`Badges, tags, decorative highlights.`},action:{tagline:`Interactive & links`,use:`Links, focus rings, anything clickable.`},neutral:{tagline:`Text, icons & dividers`,use:`Body text, borders, neutral UI chrome.`},base:{tagline:`Page & surface backgrounds`,use:`Page background and raised surfaces.`},success:{tagline:`Positive / confirmation`,use:`Success messages and valid state.`},warning:{tagline:`Caution`,use:`Warnings and at-risk / pending state.`},error:{tagline:`Form & validation errors`,use:`Invalid inputs and error messages.`},info:{tagline:`Informational`,use:`Tips and neutral notices.`},danger:{tagline:`Destructive actions`,use:`Delete / remove and irreversible actions.`},semantic:{tagline:`Ready-made role tokens`,use:`Pre-wired roles that already adapt to light/dark.`}},Jc=[{id:`text-on`,label:`Text on color`,match:e=>e.startsWith(`text--on`)},{id:`text`,label:`Text`,match:e=>e===`text`||e===`heading`||e.startsWith(`text-`)},{id:`state`,label:`Interactive states`,match:e=>e.startsWith(`bg--`)},{id:`surface`,label:`Surfaces & backgrounds`,match:e=>[`bg`,`surface`,`inset`,`raised`,`overlay`,`inverse`].some(t=>e===t||e.startsWith(t+`-`))},{id:`border`,label:`Borders`,match:e=>e===`border`||e.startsWith(`border-`)},{id:`link`,label:`Links`,match:e=>e===`link`||e.startsWith(`link-`)},{id:`select`,label:`Selection & marks`,match:e=>e.startsWith(`selection`)||e.startsWith(`mark`)||e===`dim`},{id:`code`,label:`Code`,match:e=>e.startsWith(`code`)}];function Yc(e){if(typeof e!=`string`||e.indexOf(Bc)!==0)return null;let t=e.slice(11);if(!t||t===`scheme`)return null;let n=t.indexOf(`-`),r=n===-1?t:t.slice(0,n);if(!Kc.has(r))return{family:`semantic`,kind:`semantic`,step:null,key:t};let i=n===-1?``:t.slice(n+1);return i===``?{family:r,kind:`base`,step:null,key:t}:i===`light`||i===`dark`?null:/^[0-9]+$/.test(i)?{family:r,kind:`scale`,step:Number(i),key:t}:/^a[0-9]+$/.test(i)?{family:r,kind:`alpha`,step:i,key:t}:{family:r,kind:`alias`,step:i,key:t}}function Xc(e){return e.kind===`alpha`?!0:/(?:^|-)(?:subtle|muted|ghost|translucent|overlay|dim|underline)$/.test(e.key)}function Zc(e){switch(e.kind){case`base`:return Qc(e.family);case`scale`:return String(e.step);case`alpha`:return String(e.step).toUpperCase();case`alias`:return Qc(String(e.step));default:return $c(e.key)}}function Qc(e){return e&&e.charAt(0).toUpperCase()+e.slice(1)}function $c(e){return e.split(`--`).map(e=>e.split(`-`).map(Qc).join(` `)).join(` · `)}function el(e,t,n,r){let i=n[e];if(typeof i!=`string`||!i)return null;let a=typeof r[e]==`string`&&r[e]?r[e]:i;return{var:e,name:e.slice(2),label:Zc(t),light:i,dark:a,alpha:Xc(t)}}function tl(e,t){let n={base:0,scale:1,alias:2,alpha:3};if(n[e.info.kind]!==n[t.info.kind])return n[e.info.kind]-n[t.info.kind];if(e.info.kind===`scale`)return e.info.step-t.info.step;if(e.info.kind===`alpha`)return Uc.indexOf(e.info.step)-Uc.indexOf(t.info.step);if(e.info.kind===`alias`){let n=Wc.indexOf(e.info.step),r=Wc.indexOf(t.info.step),i=n===-1?999:n,a=r===-1?999:r;return i===a?String(e.info.step).localeCompare(String(t.info.step)):i-a}return 0}function nl(e,t){let n=Gc.findIndex(t=>e.info.key===t||e.info.key.startsWith(t+`-`)),r=Gc.findIndex(e=>t.info.key===e||t.info.key.startsWith(e+`-`)),i=n===-1?Gc.length:n,a=r===-1?Gc.length:r;return i===a?e.info.key.localeCompare(t.info.key):i-a}function rl(e,t,n){let r=Array.isArray(e)?e:[],i=t&&typeof t==`object`?t:{},a=n&&typeof n==`object`?n:{},o=new Map,s=[];for(let e of r){let t=Yc(e);if(!t)continue;let n=el(e,t,i,a);if(!n)continue;let r={swatch:n,info:t};if(t.family===`semantic`){s.push(r);continue}o.has(t.family)||o.set(t.family,[]),o.get(t.family).push(r)}let c=[],l=(e,t)=>{let n=o.get(e);if(!n||n.length===0)return;n.sort(tl);let r=n.filter(e=>e.info.kind===`base`||e.info.kind===`scale`),i=n.filter(e=>e.info.kind===`alias`),a=n.filter(e=>e.info.kind===`alpha`),s=[];r.length&&s.push({id:`scale`,label:`Shades & tints`,swatches:r.map(e=>e.swatch)}),a.length&&s.push({id:`alpha`,label:`Transparent`,swatches:a.map(e=>e.swatch)}),i.length&&s.push({id:`alias`,label:`Semantic`,swatches:i.map(e=>e.swatch)});let l=qc[e]||{};c.push({id:e,label:Qc(e),type:t,count:n.length,tagline:l.tagline||``,use:l.use||``,sections:s})};for(let e of Vc)l(e,`brand`);for(let e of Hc)l(e,`status`);if(s.length){s.sort(nl);let e=new Map(Jc.map(e=>[e.id,[]])),t=[];for(let n of s){let r=Jc.find(e=>e.match(n.info.key));r?e.get(r.id).push(n.swatch):t.push(n.swatch)}let n=[];for(let t of Jc){let r=e.get(t.id);r.length&&n.push({id:t.id,label:t.label,swatches:r})}t.length&&n.push({id:`other`,label:`Other`,swatches:t});let r=qc.semantic||{};c.push({id:`semantic`,label:`Semantic`,type:`semantic`,count:s.length,tagline:r.tagline||``,use:r.use||``,sections:n})}return{groups:c}}function il(e,t){let n=String(t||``).trim().toLowerCase();if(!n)return e;if(!e||!Array.isArray(e.groups))return{groups:[]};let r=[];for(let t of e.groups){if(!Array.isArray(t.sections))continue;let e=[];for(let r of t.sections){if(!Array.isArray(r.swatches))continue;let i=r.swatches.filter(e=>e.name.toLowerCase().includes(n)||e.label.toLowerCase().includes(n)||t.label.toLowerCase().includes(n));i.length&&e.push({...r,swatches:i})}if(e.length){let n=e.reduce((e,t)=>e+t.swatches.length,0);r.push({...t,sections:e,count:n})}}return{groups:r}}function al(e){return`var(${e.var})`}function ol(e,t){return t===`dark`?e.dark:e.light}var sl=[{id:`typography`,label:`Typography`,tokens:[{var:`--sf-color-heading`,label:`Heading`},{var:`--sf-color-text`,label:`Text`},{var:`--sf-color-text--muted`,label:`Text · Muted`},{var:`--sf-color-text--secondary`,label:`Text · Secondary`},{var:`--sf-color-text--on-primary`,label:`On Primary`},{var:`--sf-color-text--on-secondary`,label:`On Secondary`}]},{id:`surfaces`,label:`Surfaces`,tokens:[{var:`--sf-color-bg`,label:`Background`},{var:`--sf-color-surface`,label:`Surface`},{var:`--sf-color-raised`,label:`Raised`},{var:`--sf-color-inset`,label:`Inset`},{var:`--sf-color-overlay`,label:`Overlay`},{var:`--sf-color-inverse`,label:`Inverse`}]},{id:`structure`,label:`Structure`,tokens:[{var:`--sf-color-border`,label:`Border`},{var:`--sf-color-border--subtle`,label:`Border · Subtle`},{var:`--sf-color-border--strong`,label:`Border · Strong`},{var:`--sf-color-link`,label:`Link`},{var:`--sf-color-link--hover`,label:`Link · Hover`}]},{id:`brand`,label:`Brand`,tokens:[{var:`--sf-color-primary`,label:`Primary`},{var:`--sf-color-secondary`,label:`Secondary`},{var:`--sf-color-tertiary`,label:`Tertiary`},{var:`--sf-color-action`,label:`Action`},{var:`--sf-color-neutral`,label:`Neutral`},{var:`--sf-color-base`,label:`Base`}]},{id:`feedback`,label:`Feedback`,tokens:[{var:`--sf-color-success`,label:`Success`},{var:`--sf-color-success-subtle`,label:`Success · Subtle`},{var:`--sf-color-warning`,label:`Warning`},{var:`--sf-color-warning-subtle`,label:`Warning · Subtle`},{var:`--sf-color-error`,label:`Error`},{var:`--sf-color-error-subtle`,label:`Error · Subtle`},{var:`--sf-color-info`,label:`Info`},{var:`--sf-color-danger`,label:`Danger`}]}];function cl(e,t,n){let r=t&&typeof t==`object`?t:{},i=n&&typeof n==`object`?n:{},a=[];for(let e of sl){let t=[];for(let n of e.tokens){let e=r[n.var];if(!e)continue;let a=i[n.var]||e;t.push({var:n.var,name:n.var.slice(2),label:n.label,light:e,dark:a,alpha:/overlay|subtle|ghost|muted|dim|alpha/i.test(n.var)})}t.length&&a.push({id:e.id,label:e.label,swatches:t})}return{groups:a}}var ll=J(``);function ul(e,t){Je(t,!0);let n=Na(t,`onPick`,3,void 0),r=F(()=>`${t.swatch.name}\nlight ${t.swatch.light}  ·  dark ${t.swatch.dark}`);var i=ll();let a;U(e=>{a=oa(i,1,`slashed-cp-swatch`,null,a,{"slashed-cp-swatch--alpha":t.swatch.alpha,"slashed-cp-swatch--split":t.mode===`both`}),ca(i,`--cp-l:${t.swatch.light??``}; --cp-d:${t.swatch.dark??``}; --cp-solid:${e??``};`),$(i,`title`,K(r)),$(i,`aria-label`,t.swatch.name)},[()=>ol(t.swatch,t.mode===`dark`?`dark`:`light`)]),q(`click`,i,()=>n()?.(t.swatch)),Y(e,i),Ye()}wi([`click`]);var dl=J(``),fl=J(``),pl=J(``),ml=J(`
  
`),hl=J(`
 
 
`,1),gl=J(``),_l=J(`
Scale 50 → 950
 
`,1),vl=J(``),yl=J(`
`),bl=J(` `,1),xl=J(`
   
`),Sl=J(`
 
`),Cl=J(`
`),wl=J(``),Tl=J(`
 
`),El=J(` `),Dl=J(`
 
`),Ol=J(`
  •     
    • `),kl=J(`
      `),Al=J(`
      `),jl=J(` `,1),Ml=J(`
         
       
      `),Nl=J(``),Pl=J(`
       
       
      `),Fl=J(`
      Quick Use
       
       
      Palette
       
      Brand
        
      Status
       
      `,1),Il=J(``),Ll=J(`
      Color System
       
       
       
       
       
        var()
       `,1);function Rl(e,t){Je(t,!0);let n=(e,t=d)=>{var n=Cl();Q(n,21,t,e=>e.id,(e,t)=>{let n=F(()=>oe(K(t))),r=F(()=>se(K(t))),i=F(()=>K(u)===K(t).id);var a=Sl(),o=B(a);let c;var l=B(o),d=e=>{var t=dl();U(()=>ca(t,`--sw-l: ${K(n).light??``}; --sw-d: ${K(n).dark??``}`)),Y(e,t)};Z(l,e=>{K(n)&&e(d)});var p=H(l,2),m=B(p,!0);D(p);var h=H(p,2),g=B(h,!0);D(h);var _=H(h,2);Q(_,21,()=>K(r),e=>e.var,(e,t)=>{var n=fl();U(()=>{ca(n,`--sw-l: ${K(t).light??``}; --sw-d: ${K(t).dark??``}`),$(n,`title`,K(t).label)}),Y(e,n)}),D(_);var v=H(_,2),y=B(v,!0);D(v),D(o);var b=H(o,2),x=e=>{let r=F(()=>ae(K(t),`alias`)),i=F(()=>ce(K(t))),a=F(()=>ae(K(t),`alpha`));var o=xl(),c=B(o),l=e=>{var r=pl(),i=B(r),a=B(i,!0);D(i),D(r),U(()=>{ca(r,`--sw-l: ${K(n).light??``}; --sw-d: ${K(n).dark??``}`),$(r,`title`,`${K(t).label??``} base — ${K(n).name??``}`),X(a,K(t).label)}),q(`click`,r,()=>C(K(n))),Y(e,r)};Z(c,e=>{K(n)&&e(l)});var u=H(c,2),d=e=>{var t=hl(),n=V(t),i=B(n);D(n);var a=H(n,2);Q(a,21,()=>K(r).swatches,e=>e.var,(e,t)=>{var n=ml(),r=B(n);ul(r,{get swatch(){return K(t)},get mode(){return K(s)},onPick:C});var i=H(r,2),a=B(i,!0);D(i),D(n),U(()=>X(a,K(t).label)),Y(e,n)}),D(a),U(()=>X(i,`Aliases · ${K(r).swatches.length??``}`)),Y(e,t)};Z(u,e=>{K(r)?.swatches.length&&e(d)});var p=H(u,2),m=e=>{var t=_l(),n=H(V(t),2);Q(n,21,()=>K(i),e=>e.var,(e,t)=>{var n=gl();U(()=>{$(n,`title`,`${K(t).label??``} — ${K(t).name??``}`),ca(n,`--sw-l: ${K(t).light??``}; --sw-d: ${K(t).dark??``}`)}),q(`click`,n,()=>C(K(t))),Y(e,n)}),D(n),Y(e,t)};Z(p,e=>{K(i).length&&e(m)});var h=H(p,2),g=e=>{var n=bl(),r=V(n),i=B(r),o=B(i,!0);D(i),ze(),D(r);var s=H(r,2),c=e=>{var t=yl();Q(t,21,()=>K(a).swatches,e=>e.var,(e,t)=>{var n=vl();U(()=>{$(n,`title`,`${K(t).label??``} — ${K(t).name??``}`),ca(n,`--sw-l: ${K(t).light??``}; --sw-d: ${K(t).dark??``}`)}),q(`click`,n,()=>C(K(t))),Y(e,n)}),D(t),Y(e,t)},l=F(()=>K(f).has(K(t).id));Z(s,e=>{K(l)&&e(c)}),U(e=>X(o,e),[()=>K(f).has(K(t).id)?`▾`:`▸`]),q(`click`,r,()=>ie(K(t).id)),Y(e,n)};Z(h,e=>{K(a)?.swatches.length&&e(g)}),D(o),Y(e,o)};Z(b,e=>{K(i)&&e(x)}),D(a),U(()=>{c=oa(o,1,`slashed-cp__scan-row`,null,c,{"slashed-cp__scan-row--open":K(i)}),$(o,`aria-expanded`,K(i)),X(m,K(t).label),X(g,K(t).tagline),X(y,K(i)?`▾`:`▸`)}),q(`click`,o,()=>re(K(t).id)),Y(e,a)}),D(n),Y(e,n)},r=Na(t,`dockedLeft`,3,null),i=F(()=>typeof t.onPickValue==`function`),a=[{id:`both`,label:`Both`},{id:`light`,label:`Light`},{id:`dark`,label:`Dark`}],o=[`Hover`,`Active`,`Subtle`,`Ghost`,`Superlight`],s=R(`both`),c=R(``),l=R(null),u=R(null),f=R(er(new Set)),p=F(()=>rl(t.source?.variables,t.source?.light,t.source?.dark)),m=F(()=>K(c).trim()),h=F(()=>il(K(p),K(m))),g=F(()=>cl(t.source?.variables,t.source?.light,t.source?.dark)),_=F(()=>K(p).groups.reduce((e,t)=>e+t.count,0)),v=F(()=>K(p).groups.filter(e=>e.type===`brand`)),y=F(()=>K(p).groups.filter(e=>e.type===`status`)),b;function x(){if(typeof document>`u`)return null;let e=document.querySelector(`iframe#bricks-builder-iframe, iframe[name="bricks-builder-iframe"], #bricks-builder-area iframe`);try{return e?.contentDocument?.documentElement??null}catch{return null}}function S(e){let t=x();if(t)try{b===void 0&&(b=t.getAttribute(`data-theme`)),e===`light`||e===`dark`?t.setAttribute(`data-theme`,e):b===null?t.removeAttribute(`data-theme`):t.setAttribute(`data-theme`,b)}catch{}}function ee(){let e=x();if(!(!e||b===void 0))try{b===null?e.removeAttribute(`data-theme`):e.setAttribute(`data-theme`,b)}catch{}}function te(e){z(s,e,!0),S(e)}Pa(()=>()=>ee());async function ne(e){try{if(navigator?.clipboard?.writeText)return await navigator.clipboard.writeText(e),!0}catch{}try{let t=document.createElement(`textarea`);t.value=e,t.style.cssText=`position:fixed;opacity:0`,document.body.appendChild(t),t.select();let n=document.execCommand(`copy`);return t.remove(),n}catch{return!1}}async function C(e){let n=al(e);if(K(i)){if(t.onPickValue(n)===!1){z(l,{kind:`error`,message:`Couldn't apply ${n} — input not found`},!0);return}t.onPick?.();return}z(l,await ne(n)?{kind:`info`,message:`Copied — ${e.name}`}:{kind:`error`,message:`Couldn't copy ${n}`},!0)}function re(e){z(u,K(u)===e?null:e,!0),z(f,new Set,!0)}function ie(e){let t=new Set(K(f));t.has(e)?t.delete(e):t.add(e),z(f,t,!0)}function ae(e,t){return e.sections.find(e=>e.id===t)}function oe(e){return ae(e,`scale`)?.swatches[0]??null}function se(e){let t=ae(e,`alias`);if(!t?.swatches.length)return[];let n=o.map(e=>t.swatches.find(t=>t.label===e)).filter(Boolean);return n.length?n:t.swatches.slice(0,5)}function ce(e){return ae(e,`scale`)?.swatches.slice(1)??[]}function le(e){e.key===`Escape`&&t.onClose?.()}var ue=Ll();Ci(`keydown`,rr,le);var de=V(ue);let fe;var pe=B(de),me=H(B(pe),2);Q(me,21,()=>a,e=>e.id,(e,t)=>{var n=wl();let r;var i=B(n,!0);D(n),U(()=>{r=oa(n,1,`slashed-cp__seg-btn`,null,r,{"slashed-cp__seg-btn--on":K(s)===K(t).id}),$(n,`aria-pressed`,K(s)===K(t).id),X(i,K(t).label)}),q(`click`,n,()=>te(K(t).id)),Y(e,n)}),D(me);var he=H(me,2);D(pe);var ge=H(pe,2),_e=B(ge);ga(_e),D(ge);var ve=H(ge,2),ye=B(ve),be=e=>{var t=jl(),n=V(t),r=e=>{var t=Tl(),n=B(t);D(t),U(()=>X(n,`No tokens match "${K(m)??``}".`)),Y(e,t)};Z(n,e=>{K(h).groups.length===0&&e(r)}),Q(H(n,2),17,()=>K(h).groups,e=>e.id,(e,t)=>{var n=Ml(),r=B(n),i=B(r),a=B(i),o=H(a),c=e=>{var n=El(),r=B(n,!0);D(n),U(()=>X(r,K(t).tagline)),Y(e,n)};Z(o,e=>{K(t).tagline&&e(c)});var l=H(o,2),u=B(l,!0);D(l),D(i),D(r),Q(H(r,2),17,()=>K(t).sections,e=>e.id,(e,n)=>{var r=jl(),i=V(r),a=e=>{var t=Dl(),r=B(t,!0);D(t),U(()=>X(r,K(n).label)),Y(e,t)};Z(i,e=>{K(n).label&&e(a)});var o=H(i,2),c=e=>{var t=kl();Q(t,21,()=>K(n).swatches,e=>e.var,(e,t)=>{var n=Ol(),r=B(n);ul(r,{get swatch(){return K(t)},get mode(){return K(s)},onPick:C});var i=H(r,2),a=B(i,!0);D(i);var o=H(i,2),c=B(o,!0);D(o),D(n),U(()=>{X(a,K(t).label),X(c,K(t).name)}),Y(e,n)}),D(t),Y(e,t)},l=e=>{var t=Al();Q(t,21,()=>K(n).swatches,e=>e.var,(e,t)=>{var n=ml(),r=B(n);ul(r,{get swatch(){return K(t)},get mode(){return K(s)},onPick:C});var i=H(r,2),a=B(i,!0);D(i),D(n),U(()=>X(a,K(t).label)),Y(e,n)}),D(t),Y(e,t)};Z(o,e=>{K(t).type===`semantic`?e(c):e(l,-1)}),Y(e,r)}),D(n),U(()=>{$(n,`data-type`,K(t).type),X(a,`${K(t).label??``} `),X(u,K(t).count)}),Y(e,n)}),Y(e,t)},xe=e=>{var t=Fl(),r=V(t);Q(H(B(r),2),17,()=>K(g).groups,e=>e.id,(e,t)=>{var n=Pl(),r=B(n),i=B(r,!0);D(r);var a=H(r,2);Q(a,21,()=>K(t).swatches,e=>e.var,(e,t)=>{var n=Nl(),r=B(n);let i;var a=H(r,2),o=B(a,!0);D(a),D(n),U(()=>{$(n,`title`,K(t).name),i=oa(r,1,`slashed-cp__qu-sw`,null,i,{"slashed-cp__qu-sw--alpha":K(t).alpha}),ca(r,`--sw-l: ${K(t).light??``}; --sw-d: ${K(t).dark??``}`),X(o,K(t).label)}),q(`click`,n,()=>C(K(t))),Y(e,n)}),D(a),D(n),U(()=>X(i,K(t).label)),Y(e,n)}),D(r);var i=H(r,2),a=H(B(i),4);n(a,()=>K(v)),n(H(a,4),()=>K(y)),D(i),Y(e,t)};Z(ye,e=>{K(m)?e(be):e(xe,-1)}),D(ve);var Se=H(ve,2),Ce=B(Se),we=e=>{Y(e,Il())};Z(Ce,e=>{K(s)===`both`&&e(we)});var Te=H(Ce,2),Ee=B(Te);ze(),D(Te),D(Se),D(de);var De=H(de,2),Oe=e=>{jc(e,{get kind(){return K(l).kind},get message(){return K(l).message},onDismiss:()=>{z(l,null)}})};Z(De,e=>{K(l)&&e(Oe)}),U(()=>{fe=oa(de,1,`slashed-cp`,null,fe,{"slashed-cp--docked":K(i)}),$(de,`data-mode`,K(s)),ca(de,K(i)&&r()!=null?`--cp-dock-left: ${r()}px`:``),$(_e,`placeholder`,`Search ${K(_)} tokens…`),X(Ee,`${K(i)?`Click to insert`:`Click to copy`} `)}),q(`click`,de,e=>e.stopPropagation()),q(`mousedown`,de,e=>e.stopPropagation()),q(`pointerdown`,de,e=>e.stopPropagation()),q(`touchstart`,de,e=>e.stopPropagation(),void 0,!0),q(`click`,he,()=>t.onClose?.()),ba(_e,()=>K(c),e=>z(c,e)),Y(e,ue),Ye()}wi([`click`,`mousedown`,`pointerdown`,`touchstart`]);var zl=J(` `,1);function Bl(e,t){let n=R(!1);var r=zl(),i=V(r);zc(i,{get open(){return K(n)},onToggle:()=>z(n,!K(n))});var a=H(i,2),o=e=>{Rl(e,{get source(){return t.source},onClose:()=>z(n,!1)})};Z(a,e=>{K(n)&&e(o)}),Y(e,r)}var Vl=`#bricks-structure`,Hl=`li[data-id]`,Ul=`slashed-rebemer-host`,Wl=400,Gl=25,Kl=(e,...t)=>console[e](`[reBEMer]`,...t),ql=new AbortController,{signal:Jl}=ql,Yl=new Map,Xl=null,Zl=null,Ql=null;function $l(){let e=document.getElementById(Ul);return e||(e=document.createElement(`div`),e.id=Ul,document.body.appendChild(e)),e}var eu=null;function tu(){eu=window.slashedBricksEditor,eu&&typeof eu==`object`&&(To(eu.showClassHints,eu.classHints,{signal:Jl}),Jo(eu.showColorSwatches,eu.colorHexMap,{signal:Jl,onOpenPanel:eu.showColorPanel?e=>uu(e):void 0}),xs(eu.variableHints||{},{signal:Jl}));let e=0,t=()=>{if(!Jl.aborted){if(Va()){nu();return}if(++e>=Gl){Kl(`warn`,`Bricks Vue app not detected after grace window — reBEMer disabled on this page.`);return}setTimeout(t,Wl)}};t()}function nu(){if(ou(),eu&&eu.rebemerEnabled===!1)return;let e=document.querySelector(Vl);if(e){ru(e);return}let t=new MutationObserver(()=>{let e=document.querySelector(Vl);e&&(t.disconnect(),ru(e))});t.observe(document.body,{childList:!0,subtree:!0}),Jl.addEventListener(`abort`,()=>t.disconnect(),{once:!0})}function ru(e){let t=null,n=new MutationObserver(()=>{t===null&&(t=setTimeout(()=>{t=null,iu(e)},50))});n.observe(e,{childList:!0,subtree:!0}),Jl.addEventListener(`abort`,()=>{n.disconnect(),t!==null&&clearTimeout(t)},{once:!0}),iu(e)}function iu(e){for(let[e,t]of Yl)if(!t.host.isConnected){try{Li(t.instance)}catch(e){Kl(`warn`,`badge unmount failed`,e)}Yl.delete(e)}let t=e.querySelectorAll(Hl);for(let e of t){let t=e.getAttribute(`data-id`);if(!t)continue;let n=Yl.get(t);n&&n.host.isConnected&&e.contains(n.host)||au(e)}}function au(e){let t=e.getAttribute(`data-id`);if(!t)return;let n=e.querySelector(`:scope > .structure-item`)||e,r=n.querySelector(`:scope > ul.actions`)||n.querySelector(`:scope > .actions`)||n.querySelector(`:scope > .structure-item-actions`),i=document.createElement(`span`);i.className=`rebemer-badge-host`,r?n.insertBefore(i,r):n.appendChild(i);let a=n.querySelector(`:scope > .title, :scope > .structure-item-title, :scope > .name, :scope .label`),o=Ni(Es,{target:i,props:{elementId:t,label:a?a.textContent.trim():``,onActivate:fu}}),s=Yl.get(t);if(s){try{Li(s.instance)}catch(e){Kl(`warn`,`badge remount cleanup failed`,e)}s.host.isConnected&&s.host.remove()}Yl.set(t,{instance:o,host:i})}function ou(){if(Zl)return;let e=eu&&eu.colorPanel;if(!eu?.showColorPanel||!e||!Array.isArray(e.variables)||e.variables.length===0)return;let t=document.createElement(`div`);$l().appendChild(t),Zl={instance:Ni(Bl,{target:t,props:{source:e}}),node:t}}function su(){if(Zl){try{Li(Zl.instance)}catch(e){Kl(`warn`,`color app unmount failed`,e)}Zl.node.remove(),Zl=null}}function cu(e,t){if(!e||!e.isConnected)return!1;try{let n=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,`value`)?.set;return n?n.call(e,t):e.value=t,e.dispatchEvent(new Event(`input`,{bubbles:!0})),!0}catch{return!1}}function lu(e){let t=[`#bricks-panel-inner`,`#bricks-panel`,`[id^="bricks-panel"]`];if(e)for(let n of t){let t=e.closest(n);if(t){let e=t.getBoundingClientRect();if(e.width>100)return Math.ceil(e.right)}}for(let e of t){let t=document.querySelector(e);if(t){let e=t.getBoundingClientRect();if(e.width>100)return Math.ceil(e.right)}}return null}function uu(e){du();let t=eu?.colorPanel;if(!t||!Array.isArray(t.variables)||t.variables.length===0)return;let n=lu(e),r=document.createElement(`div`);$l().appendChild(r),Ql={instance:Ni(Rl,{target:r,props:{source:t,dockedLeft:n,onPickValue:t=>{let n=cu(e?.querySelector(`input[type="text"]`)??e?.querySelector(`input:not([type="hidden"],[type="submit"],[type="button"],[type="checkbox"],[type="radio"],[type="file"])`),t);if(n){let n=t.match(/^var\((--[^)]+)\)/)?.[1],r=n?eu?.colorHexMap?.[n]??null:null,i=(e?.closest(`[data-control="color"]`))?.querySelector(`:scope > .slashed-sf-color-btn`);if(i){let e=i.querySelector(`.slashed-sf-color-btn__dot`);e&&(r?(e.style.background=r,e.style.removeProperty(`box-shadow`)):e.style.removeProperty(`background`)),i.classList.toggle(`slashed-sf-color-btn--active`,!!r)}if(r){let t=e?.closest(`[data-control="color"]`);requestAnimationFrame(()=>{if(!t)return;let e=t.querySelector(`.bricks-control-preview`);e&&(Ho(e,!0),e.classList.remove(`empty`))})}}return n},onPick:du,onClose:du}}),node:r}}function du(){if(Ql){try{Li(Ql.instance)}catch(e){Kl(`warn`,`color picker panel unmount failed`,e)}Ql.node.remove(),Ql=null}}function fu(e){pu();let t=document.createElement(`div`);$l().appendChild(t),Xl={instance:Ni(Lc,{target:t,props:{rootId:e,onClose:pu}}),node:t}}function pu(){if(Xl){try{Li(Xl.instance)}catch(e){Kl(`warn`,`panel unmount failed`,e)}Xl.node.remove(),Xl=null}}window.addEventListener(`beforeunload`,()=>{ql.abort(),pu(),su(),du(),Eo(),Yo(),Ss();for(let{instance:e}of Yl.values())try{Li(e)}catch{}Yl.clear()},{once:!0}),document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,tu,{once:!0}):tu();
+        creating a duplicate.`,1),Sc=J(`
      `),Cc=J(` `),wc=J(`Migrate: `,1),Tc=J(`No migratable keys on this element.`),Ec=J(` `),Dc=J(`
       
      `),Oc=J(`
       
         
       
       
       
          
      `);function kc(e,t){Je(t,!0);let n=Na(t,`row`,15),r=Na(t,`rootId`,3,``),i=Na(t,`globalClasses`,19,()=>[]),a=Na(t,`removeExisting`,3,!1),o=Na(t,`finalClassNames`,19,()=>[]),s=F(()=>t.mode!==`migrate`),c=F(()=>t.mode===`migrate`),l=F(()=>t.mode===`mixed`),u=F(()=>!t.isRoot&&t.blockName?`${t.blockName}__`:``),d=F(()=>K(l)?n().op??`add`:t.mode===`rename`?`rename`:t.mode===`replace`?`replace`:`add`),f=F(()=>{if(K(d)!==`rename`&&K(d)!==`replace`||!Array.isArray(n().currentClassIds))return[];let e=[];for(let t of n().currentClassIds){let r=i().find(e=>e?.id===t);if(!r||r.name.includes(`--`))continue;let a=n().currentClassIds.filter(e=>i().find(t=>t?.id===e)?.name.startsWith(r.name+`--`)).length;e.push({id:r.id,name:r.name,modCount:a})}for(let t of n().currentClassIds){let n=i().find(e=>e?.id===t);if(!n||!n.name.includes(`--`))continue;let r=n.name.slice(0,n.name.indexOf(`--`));e.some(e=>e.name===r)||e.push({id:n.id,name:n.name,modCount:0})}return e}),p=F(()=>K(f).find(e=>e.id===n().renameFamilyId)??K(f)[0]??null);wr(()=>{K(d)!==`rename`||!K(f).length||K(f).some(e=>e.id===n().renameFamilyId)||n(n().renameFamilyId=K(f)[0].id,!0)});let m=F(()=>n().isBlockRoot===!0&&n().id!==r()),h=F(()=>n().id!==r()),g=F(()=>n().suggestedFrom===`element-type`||n().suggestedFrom===`fallback`),_=F(()=>{if(!o().length||!n().include||!Array.isArray(i()))return null;for(let e of o()){let t=i().find(t=>t&&t.name===e);if(t)return t}return null}),v=F(()=>!Array.isArray(n().modifiers)||n().modifiers.every(e=>!Ds(e)));function y(){n().suggestedFrom!==`user`&&n(n().suggestedFrom=`user`,!0)}function b(e){return e.startsWith(`_`)?e.slice(1):e}var x=Oc();let S;var ee=B(x),te=B(ee);ga(te),D(ee);var ne=H(ee,2),C=B(ne),re=B(C,!0);D(C);var ie=H(C,2),ae=e=>{var t=tc();let r;var i=B(t,!0);D(t),U(e=>{r=oa(t,1,`rebemer-row__type rebemer-row__type--toggle`,null,r,{"rebemer-row__type--block":K(m)}),$(t,`title`,K(m)?`Sub-block root — click to revert to element`:`Click to promote to block root`),t.disabled=!n().include,X(i,e)},[()=>K(m)?`BLOCK`:(n().bricksType||`ELEM`).toUpperCase()]),q(`click`,t,()=>{n(n().isBlockRoot=!n().isBlockRoot,!0)}),Y(e,t)},oe=e=>{Y(e,nc())};Z(ie,e=>{K(h)?e(ae):e(oe,-1)});var se=H(ie,2),ce=e=>{var t=rc();U(()=>$(t,`title`,`Pre-filled from ${n().suggestedFrom===`element-type`?`Bricks element type`:`fallback`}`)),Y(e,t)};Z(se,e=>{K(g)&&n().include&&e(ce)}),D(ne);var le=H(ne,2),ue=B(le),de=B(ue),fe=e=>{var t=ic(),n=B(t,!0);D(t),U(()=>X(n,K(u))),Y(e,t)};Z(de,e=>{K(u)&&e(fe)});var pe=H(de,2);ga(pe),D(ue);var me=H(ue,2),he=e=>{var t=cc(),r=B(t);Q(r,17,()=>n().modifiers,Ki,(e,t,r)=>{var i=oc(),a=B(i);ga(a);var o=H(a,2),s=e=>{var t=ac();U(()=>t.disabled=!n().include),q(`click`,t,()=>{n(n().modifiers=n().modifiers.filter((e,t)=>t!==r),!0)}),Y(e,t)};Z(o,e=>{n().modifiers.length>1&&e(s)}),D(i),U(()=>a.disabled=!n().include),ba(a,()=>n().modifiers[r],e=>n(n().modifiers[r]=e,!0)),Y(e,i)});var i=H(r,2),a=e=>{var t=sc();U(()=>t.disabled=!n().include),q(`click`,t,()=>{n(n().modifiers=[...n().modifiers,``],!0)}),Y(e,t)};Z(i,e=>{K(v)||e(a)}),D(t),Y(e,t)};Z(me,e=>{K(s)&&e(he)}),D(le);var ge=H(le,2),_e=e=>{var t=lc(),r=B(t);let i;var a=H(r,2);let o;var s=H(a,2);let c;D(t),U(()=>{i=oa(r,1,`rebemer-row__op-btn`,null,i,{"rebemer-row__op-btn--on":n().op===`add`}),$(r,`aria-pressed`,n().op===`add`),o=oa(a,1,`rebemer-row__op-btn`,null,o,{"rebemer-row__op-btn--on":n().op===`rename`}),$(a,`aria-pressed`,n().op===`rename`),c=oa(s,1,`rebemer-row__op-btn`,null,c,{"rebemer-row__op-btn--on":n().op===`replace`}),$(s,`aria-pressed`,n().op===`replace`)}),q(`click`,r,()=>{n(n().op=`add`,!0)}),q(`click`,a,()=>{n(n().op=`rename`,!0),!n().renameFamilyId&&K(f).length&&n(n().renameFamilyId=K(f)[0].id,!0)}),q(`click`,s,()=>{n(n().op=`replace`,!0),n(n().renameFamilyId=``,!0)}),Y(e,t)};Z(ge,e=>{K(l)&&n().include&&e(_e)});var ve=H(ge,2),ye=e=>{var t=Mi(),r=V(t),i=e=>{var t=Mi(),r=V(t),i=e=>{Y(e,uc())},o=e=>{var t=hc(),r=V(t),i=e=>{var t=fc(),r=H(B(t),2);Q(r,21,()=>K(f),Ki,(e,t)=>{var n=dc(),r=B(n);D(n);var i={};U(()=>{X(r,`${K(t).name??``}${K(t).modCount>0?` (+ ${K(t).modCount} modifier${K(t).modCount>1?`s`:``})`:``}`),i!==(i=K(t).id)&&(n.value=(n.__value=K(t).id)??``)}),Y(e,n)}),D(r),D(t),da(r,()=>n().renameFamilyId,e=>n(n().renameFamilyId=e,!0)),Y(e,t)};Z(r,e=>{K(f).length>1&&e(i)});var o=H(r,2),s=e=>{let t=F(()=>1+K(p).modCount);var r=Mi(),i=V(r),o=e=>{var t=pc(),n=H(B(t)),r=B(n,!0);D(n);var i=H(n);D(t),U(()=>{X(r,K(p).name),X(i,`${K(p).modCount>0?` (+ ${K(p).modCount} modifier${K(p).modCount>1?`s`:``})`:``} and remove all other classes from this element.`)}),Y(e,t)},s=e=>{var r=mc(),i=H(B(r)),a=B(i,!0);D(i);var o=H(i);D(r),U(()=>{X(a,K(p).name),X(o,`${K(p).modCount>0?` (+ ${K(p).modCount} modifier${K(p).modCount>1?`s`:``})`:``}${(n().currentClassIds?.length??0)>K(t)?` Other classes kept.`:``}`)}),Y(e,r)};Z(i,e=>{a()?e(o):e(s,-1)}),Y(e,r)};Z(o,e=>{K(p)&&e(s)}),Y(e,t)};Z(r,e=>{K(f).length===0?e(i):e(o,-1)}),Y(e,t)},o=e=>{var t=hc(),r=V(t),i=e=>{var t=gc(),r=H(B(t),2),i=B(r);i.value=i.__value=``,Q(H(i),17,()=>K(f),Ki,(e,t)=>{var n=dc(),r=B(n);D(n);var i={};U(()=>{X(r,`${K(t).name??``}${K(t).modCount>0?` (+ ${K(t).modCount} modifier${K(t).modCount>1?`s`:``})`:``}`),i!==(i=K(t).id)&&(n.value=(n.__value=K(t).id)??``)}),Y(e,n)}),D(r),D(t),U(()=>r.disabled=a()),da(r,()=>n().renameFamilyId,e=>n(n().renameFamilyId=e,!0)),Y(e,t)};Z(r,e=>{K(f).length>0&&e(i)});var o=H(r,2),s=e=>{Y(e,_c())},c=e=>{Y(e,vc())},l=e=>{Y(e,yc())},u=e=>{Y(e,_c())};Z(o,e=>{a()?e(s):K(f).length===0?e(c,1):n().renameFamilyId?e(l,2):e(u,-1)}),Y(e,t)};Z(r,e=>{K(d)===`rename`?e(i):e(o,-1)}),Y(e,t)};Z(ve,e=>{(K(d)===`rename`||K(d)===`replace`)&&n().include&&e(ye)});var be=H(ve,2),xe=e=>{var t=Sc(),n=B(t),r=e=>{var t=bc(),n=H(V(t)),r=B(n,!0);D(n),ze(),U(()=>X(r,K(_).name)),Y(e,t)},i=e=>{var t=xc(),n=H(V(t)),r=B(n,!0);D(n),ze(),U(()=>X(r,K(_).name)),Y(e,t)};Z(n,e=>{K(c)?e(r):e(i,-1)}),D(t),Y(e,t)};Z(be,e=>{K(_)&&e(xe)});var Se=H(be,2),Ce=e=>{var t=Dc(),r=B(t),i=e=>{var t=wc();Q(H(V(t),2),17,()=>n().migrateKeys,Ki,(e,t)=>{var n=Cc(),r=B(n,!0);D(n),U(e=>{$(n,`title`,`Will be lifted into ${(o()[0]||`the new class`)??``}`),X(r,e)},[()=>b(K(t))]),Y(e,n)}),Y(e,t)},a=e=>{Y(e,Tc())};Z(r,e=>{n().migrateKeys?.length?e(i):e(a,-1)});var s=H(r,2),c=e=>{var t=Ec(),r=B(t);D(t),U(()=>X(r,`${n().skippedKeys.length??``} skipped`)),Y(e,t)};Z(s,e=>{n().skippedKeys?.length&&e(c)}),D(t),Y(e,t)};Z(Se,e=>{K(c)&&n().include&&e(Ce)}),D(x),U(()=>{S=oa(x,1,`rebemer-row`,null,S,{"rebemer-row--disabled":!n().include,"rebemer-row--suggested":K(g)}),ca(x,`--rebemer-row-depth: ${n().depth??0??``}`),X(re,n().originalLabel),$(pe,`placeholder`,t.isRoot?`block-name`:`element-name`),pe.disabled=!n().include}),xa(te,()=>n().include,e=>n(n().include=e,!0)),q(`input`,pe,y),ba(pe,()=>n().name,e=>n(n().name=e,!0)),Y(e,x),Ye()}wi([`click`,`input`]);var Ac=J(` `);function jc(e,t){Je(t,!0);let n=Na(t,`kind`,3,`info`),r=Na(t,`duration`,3,3e3),i=R(!0);wr(()=>{if(!K(i)||r()<=0)return;let e=setTimeout(()=>{z(i,!1),t.onDismiss?.()},r());return()=>clearTimeout(e)});let a=F(()=>n()===`error`?`alert`:`status`);var o=Mi(),s=V(o),c=e=>{var r=Ac(),o=B(r,!0);D(r),U(()=>{oa(r,1,`rebemer-toast rebemer-toast--${n()??``}`),$(r,`role`,K(a)),$(r,`aria-live`,n()===`error`?`assertive`:`polite`),X(o,t.message)}),q(`click`,r,()=>{z(i,!1),t.onDismiss?.()}),Y(e,r)};Z(s,e=>{K(i)&&e(c)}),Y(e,o),Ye()}wi([`click`]);var Mc=J(``),Nc=J(`Will migrate   `,1),Pc=J(` `),Fc=J(``),Ic=J(` `,1);function Lc(e,t){Je(t,!0);let n={add:`Attaches a new BEM class to each element without removing any existing classes.`,rename:`Renames an existing class family to the new name (its settings carry over). When an element has several classes, pick which family to rename per row; other classes are kept unless "Remove all existing classes" is on.`,replace:`Swaps classes for a new BEM class with empty settings. Pick a family to replace just that one (keeping the rest), or leave "— All classes —" / enable "Remove all existing classes" to clear the element.`,migrate:`Lifts inline element styles (padding, color, typography, etc.) into a new global class.`,mixed:`Per-element control — every row defaults to Add. Switch any row to Rename (targets one class family, keeps others) or Replace (a selected family, or all classes). "Remove all existing classes" clears every renamed/replaced row.`};function r(e){return e===`rename`||e===`replace`||e===`mixed`}function i(e){let t=e?._cssGlobalClasses;return t?(Array.isArray(t)?t:Object.values(t)).filter(e=>typeof e==`string`&&e.length>0):[]}let a=R(`add`),o=R(!0),s=R(!1),c=R(er([])),l=R(er([])),u=R(null),d=R(null),f=F(()=>K(c)[0]?.originalLabel??``),p=F(()=>K(c).length===0?new Map:Ls(K(c),t.rootId)),m=F(()=>{if(K(a)!==`migrate`)return null;let e=0,t=0;for(let n of K(c))n.include&&(e+=n.migrateKeys?.length??0,t+=n.skippedKeys?.length??0);return{willMigrate:e,willSkip:t}}),h=F(()=>{if(K(c).length===0)return new Map;let e=Rs({rootId:t.rootId,rows:K(c),mode:K(a)}),n=new Map;if(!e.ok)return n;for(let t of e.ops){let e=[t.finalClass];for(let n of t.modifierSlugs??[])e.push(`${t.finalClass}--${n}`);n.set(t.row.id,e)}return n});Pa(()=>{let e=Ga(t.rootId);z(l,qa().slice(),!0);let n=e.map((e,t)=>{let n=t===0,r=e.label||``,a=Ds(r),o=e.name||``,s,c;if(a)s=a,c=`label`;else if(n)s=`block`,c=`fallback`;else if(o&&!Qs(o)){let e=Zs(o,``);if(e)s=e,c=`element-type`;else{let e=Ds(Za(o));e&&As(e).ok?(s=e,c=`element-type`):(s=`item`,c=`fallback`)}}else s=`item`,c=`fallback`;let l=i(e.settings);return{id:e.id,depth:e.depth,bricksType:o,originalLabel:r||(n?`block`:`element`),name:s,modifiers:[``],isBlockRoot:!1,include:!0,suggestedFrom:c,migrateKeys:Ms(e.settings),skippedKeys:Ps(e.settings),currentClassCount:l.length,currentClassIds:l,op:`add`,renameFamilyId:``}});if(n.length>1){let t=new Map(e.map(e=>[e.id,[]])),r=[];for(let n of e){for(;r.length&&r[r.length-1].depth>=n.depth;)r.pop();r.length&&t.get(r[r.length-1].id).push(n.id),r.push(n)}let i=new Map(e.map(e=>[e.id,e])),a=new Map(n.map(e=>[e.id,e]));for(let[,e]of t){if(!e.length)continue;let t=new Map;for(let n of e){let e=i.get(n)?.name;e&&t.set(e,(t.get(e)??0)+1)}for(let n of e){let e=a.get(n),r=i.get(n);if(!(!e||!r||e.suggestedFrom===`label`)){if(Qs(r.name))e.name=ec(r.name),e.suggestedFrom=`element-type`;else if((t.get(r.name)??0)===1){let t=$s[r.name];t&&(e.name=t,e.suggestedFrom=`element-type`)}}}}}z(c,n,!0)});function g(e){if(e.key===`Escape`){t.onClose?.();return}K(d)&&e.target instanceof Node&&K(d).contains(e.target)&&e.key===`Enter`&&(e.target?.tagName===`INPUT`||e.target?.tagName===`SELECT`)&&(e.preventDefault(),v())}let _=null;function v(){let e=As(Ds(K(c)[0]?.name??``));if(!e.ok){z(u,{kind:`error`,message:e.reason},!0);return}for(let e of K(c)){if(!e.isBlockRoot||!e.include)continue;let t=As(Ds(e.name??``));if(!t.ok){z(u,{kind:`error`,message:`Sub-block "${e.originalLabel}": ${t.reason}`},!0);return}}let n=zs({rootId:t.rootId,rows:K(c),mode:K(a),syncLabels:K(o),removeExisting:K(s)});n.ok?(z(u,{kind:`success`,message:`Applied to ${n.count} element${n.count===1?``:`s`}.`},!0),_&&clearTimeout(_),_=setTimeout(()=>t.onClose?.(),800)):z(u,{kind:`error`,message:n.error},!0)}wr(()=>()=>{_&&clearTimeout(_)});var y=Ic();Ci(`keydown`,rr,g);var b=V(y),x=B(b),S=B(x),ee=H(B(S)),te=B(ee,!0);D(ee),D(S);var ne=H(S,2);D(x);var C=H(x,2),re=B(C),ie=H(B(re),2),ae=B(ie);ae.value=ae.__value=`add`;var oe=H(ae);oe.value=oe.__value=`rename`;var se=H(oe);se.value=se.__value=`replace`;var ce=H(se);ce.value=ce.__value=`migrate`;var le=H(ce);le.value=le.__value=`mixed`,D(ie),D(re);var ue=H(re,2),de=B(ue);ga(de),ze(2),D(ue);var fe=H(ue,2),pe=e=>{var t=Mc(),n=B(t);ga(n),ze(2),D(t),xa(n,()=>K(s),e=>z(s,e)),Y(e,t)},me=F(()=>r(K(a)));Z(fe,e=>{K(me)&&e(pe)}),D(C);var he=H(C,2),ge=B(he,!0);D(he);var _e=H(he,2),ve=e=>{var t=Fc();let n;var r=B(t),i=e=>{Y(e,ji(`No migratable style keys found on any included element. Apply will attach empty classes.`))},a=e=>{var t=Nc(),n=H(V(t)),r=B(n,!0);D(n);var i=H(n);U(()=>{X(r,K(m).willMigrate),X(i,` style key${K(m).willMigrate===1?``:`s`} into new classes.`)}),Y(e,t)};Z(r,e=>{K(m).willMigrate===0?e(i):e(a,-1)});var o=H(r,2),s=e=>{var t=Pc(),n=B(t);D(t),U(()=>X(n,`${K(m).willSkip??``} key${K(m).willSkip===1?``:`s`} not on the allowlist will stay on the element.`)),Y(e,t)};Z(o,e=>{K(m).willSkip>0&&e(s)}),D(t),U(()=>n=oa(t,1,`rebemer-panel__notice`,null,n,{"rebemer-panel__notice--warn":K(m).willSkip>0||K(m).willMigrate===0})),Y(e,t)};Z(_e,e=>{K(m)&&e(ve)});var ye=H(_e,2);Q(ye,23,()=>K(c),e=>e.id,(e,n,r)=>{{let i=F(()=>K(p).get(K(n).id)??``),o=F(()=>K(n).id===t.rootId||K(n).isBlockRoot),u=F(()=>K(h).get(K(n).id)??[]);kc(e,{get mode(){return K(a)},get blockName(){return K(i)},get isRoot(){return K(o)},get rootId(){return t.rootId},get globalClasses(){return K(l)},get removeExisting(){return K(s)},get finalClassNames(){return K(u)},get row(){return K(c)[K(r)]},set row(e){K(c)[K(r)]=e}})}}),D(ye);var be=H(ye,2),xe=B(be),Se=H(xe,2);D(be),D(b),Ma(b,e=>z(d,e),()=>K(d));var Ce=H(b,2),we=e=>{jc(e,{get kind(){return K(u).kind},get message(){return K(u).message},onDismiss:()=>{z(u,null)}})};Z(Ce,e=>{K(u)&&e(we)}),U(()=>{X(te,K(f)),X(ge,n[K(a)])}),q(`click`,ne,()=>t.onClose?.()),da(ie,()=>K(a),e=>z(a,e)),xa(de,()=>K(o),e=>z(o,e)),q(`click`,xe,()=>t.onClose?.()),q(`click`,Se,v),Y(e,y),Ye()}wi([`click`]);var Rc=J(``);function zc(e,t){var n=Rc();let r;U(()=>{r=oa(n,1,`slashed-cp-launch`,null,r,{"slashed-cp-launch--on":t.open}),$(n,`aria-pressed`,t.open)}),q(`click`,n,function(...e){t.onToggle?.apply(this,e)}),Y(e,n)}wi([`click`]);var Bc=`--sf-color-`,Vc=[`primary`,`secondary`,`tertiary`,`action`,`neutral`,`base`],Hc=[`success`,`warning`,`error`,`info`,`danger`],Uc=[`a5`,`a10`,`a20`,`a30`,`a40`,`a50`,`a60`,`a70`,`a80`,`a90`,`a95`],Wc=[`superlight`,`xlight`,`lighter`,`darker`,`xdark`,`superdark`,`hover`,`active`,`strong`,`subtle`,`muted`,`tint`],Gc=[`text`,`heading`,`bg`,`surface`,`inset`,`raised`,`overlay`,`inverse`,`border`,`link`,`code`,`selection`,`mark`,`dim`],Kc=(e=>new Set(e))([...Vc,...Hc]),qc={primary:{tagline:`Brand identity & main emphasis`,use:`Headlines, primary buttons, key brand moments.`},secondary:{tagline:`Supporting brand tone`,use:`Secondary surfaces and muted brand accents.`},tertiary:{tagline:`Accent / highlight`,use:`Badges, tags, decorative highlights.`},action:{tagline:`Interactive & links`,use:`Links, focus rings, anything clickable.`},neutral:{tagline:`Text, icons & dividers`,use:`Body text, borders, neutral UI chrome.`},base:{tagline:`Page & surface backgrounds`,use:`Page background and raised surfaces.`},success:{tagline:`Positive / confirmation`,use:`Success messages and valid state.`},warning:{tagline:`Caution`,use:`Warnings and at-risk / pending state.`},error:{tagline:`Form & validation errors`,use:`Invalid inputs and error messages.`},info:{tagline:`Informational`,use:`Tips and neutral notices.`},danger:{tagline:`Destructive actions`,use:`Delete / remove and irreversible actions.`},semantic:{tagline:`Ready-made role tokens`,use:`Pre-wired roles that already adapt to light/dark.`}},Jc=[{id:`text-on`,label:`Text on color`,match:e=>e.startsWith(`text--on`)},{id:`text`,label:`Text`,match:e=>e===`text`||e===`heading`||e.startsWith(`text-`)},{id:`state`,label:`Interactive states`,match:e=>e.startsWith(`bg--`)},{id:`surface`,label:`Surfaces & backgrounds`,match:e=>[`bg`,`surface`,`inset`,`raised`,`overlay`,`inverse`].some(t=>e===t||e.startsWith(t+`-`))},{id:`border`,label:`Borders`,match:e=>e===`border`||e.startsWith(`border-`)},{id:`link`,label:`Links`,match:e=>e===`link`||e.startsWith(`link-`)},{id:`select`,label:`Selection & marks`,match:e=>e.startsWith(`selection`)||e.startsWith(`mark`)||e===`dim`},{id:`code`,label:`Code`,match:e=>e.startsWith(`code`)}];function Yc(e){if(typeof e!=`string`||e.indexOf(Bc)!==0)return null;let t=e.slice(11);if(!t||t===`scheme`)return null;let n=t.indexOf(`-`),r=n===-1?t:t.slice(0,n);if(!Kc.has(r))return{family:`semantic`,kind:`semantic`,step:null,key:t};let i=n===-1?``:t.slice(n+1);return i===``?{family:r,kind:`base`,step:null,key:t}:i===`light`||i===`dark`?null:/^[0-9]+$/.test(i)?{family:r,kind:`scale`,step:Number(i),key:t}:/^a[0-9]+$/.test(i)?{family:r,kind:`alpha`,step:i,key:t}:{family:r,kind:`alias`,step:i,key:t}}function Xc(e){return e.kind===`alpha`?!0:/(?:^|-)(?:subtle|muted|tint|translucent|overlay|dim|underline)$/.test(e.key)}function Zc(e){switch(e.kind){case`base`:return Qc(e.family);case`scale`:return String(e.step);case`alpha`:return String(e.step).toUpperCase();case`alias`:return Qc(String(e.step));default:return $c(e.key)}}function Qc(e){return e&&e.charAt(0).toUpperCase()+e.slice(1)}function $c(e){return e.split(`--`).map(e=>e.split(`-`).map(Qc).join(` `)).join(` · `)}function el(e,t,n,r){let i=n[e];if(typeof i!=`string`||!i)return null;let a=typeof r[e]==`string`&&r[e]?r[e]:i;return{var:e,name:e.slice(2),label:Zc(t),light:i,dark:a,alpha:Xc(t)}}function tl(e,t){let n={base:0,scale:1,alias:2,alpha:3};if(n[e.info.kind]!==n[t.info.kind])return n[e.info.kind]-n[t.info.kind];if(e.info.kind===`scale`)return e.info.step-t.info.step;if(e.info.kind===`alpha`)return Uc.indexOf(e.info.step)-Uc.indexOf(t.info.step);if(e.info.kind===`alias`){let n=Wc.indexOf(e.info.step),r=Wc.indexOf(t.info.step),i=n===-1?999:n,a=r===-1?999:r;return i===a?String(e.info.step).localeCompare(String(t.info.step)):i-a}return 0}function nl(e,t){let n=Gc.findIndex(t=>e.info.key===t||e.info.key.startsWith(t+`-`)),r=Gc.findIndex(e=>t.info.key===e||t.info.key.startsWith(e+`-`)),i=n===-1?Gc.length:n,a=r===-1?Gc.length:r;return i===a?e.info.key.localeCompare(t.info.key):i-a}function rl(e,t,n){let r=Array.isArray(e)?e:[],i=t&&typeof t==`object`?t:{},a=n&&typeof n==`object`?n:{},o=new Map,s=[];for(let e of r){let t=Yc(e);if(!t)continue;let n=el(e,t,i,a);if(!n)continue;let r={swatch:n,info:t};if(t.family===`semantic`){s.push(r);continue}o.has(t.family)||o.set(t.family,[]),o.get(t.family).push(r)}let c=[],l=(e,t)=>{let n=o.get(e);if(!n||n.length===0)return;n.sort(tl);let r=n.filter(e=>e.info.kind===`base`||e.info.kind===`scale`),i=n.filter(e=>e.info.kind===`alias`),a=n.filter(e=>e.info.kind===`alpha`),s=[];r.length&&s.push({id:`scale`,label:`Shades & tints`,swatches:r.map(e=>e.swatch)}),a.length&&s.push({id:`alpha`,label:`Transparent`,swatches:a.map(e=>e.swatch)}),i.length&&s.push({id:`alias`,label:`Semantic`,swatches:i.map(e=>e.swatch)});let l=qc[e]||{};c.push({id:e,label:Qc(e),type:t,count:n.length,tagline:l.tagline||``,use:l.use||``,sections:s})};for(let e of Vc)l(e,`brand`);for(let e of Hc)l(e,`status`);if(s.length){s.sort(nl);let e=new Map(Jc.map(e=>[e.id,[]])),t=[];for(let n of s){let r=Jc.find(e=>e.match(n.info.key));r?e.get(r.id).push(n.swatch):t.push(n.swatch)}let n=[];for(let t of Jc){let r=e.get(t.id);r.length&&n.push({id:t.id,label:t.label,swatches:r})}t.length&&n.push({id:`other`,label:`Other`,swatches:t});let r=qc.semantic||{};c.push({id:`semantic`,label:`Semantic`,type:`semantic`,count:s.length,tagline:r.tagline||``,use:r.use||``,sections:n})}return{groups:c}}function il(e,t){let n=String(t||``).trim().toLowerCase();if(!n)return e;if(!e||!Array.isArray(e.groups))return{groups:[]};let r=[];for(let t of e.groups){if(!Array.isArray(t.sections))continue;let e=[];for(let r of t.sections){if(!Array.isArray(r.swatches))continue;let i=r.swatches.filter(e=>e.name.toLowerCase().includes(n)||e.label.toLowerCase().includes(n)||t.label.toLowerCase().includes(n));i.length&&e.push({...r,swatches:i})}if(e.length){let n=e.reduce((e,t)=>e+t.swatches.length,0);r.push({...t,sections:e,count:n})}}return{groups:r}}function al(e){return`var(${e.var})`}function ol(e,t){return t===`dark`?e.dark:e.light}var sl=[{id:`typography`,label:`Typography`,tokens:[{var:`--sf-color-heading`,label:`Heading`},{var:`--sf-color-text`,label:`Text`},{var:`--sf-color-text--muted`,label:`Text · Muted`},{var:`--sf-color-text--secondary`,label:`Text · Secondary`},{var:`--sf-color-text--on-primary`,label:`On Primary`},{var:`--sf-color-text--on-secondary`,label:`On Secondary`}]},{id:`surfaces`,label:`Surfaces`,tokens:[{var:`--sf-color-bg`,label:`Background`},{var:`--sf-color-surface`,label:`Surface`},{var:`--sf-color-raised`,label:`Raised`},{var:`--sf-color-inset`,label:`Inset`},{var:`--sf-color-overlay`,label:`Overlay`},{var:`--sf-color-inverse`,label:`Inverse`}]},{id:`structure`,label:`Structure`,tokens:[{var:`--sf-color-border`,label:`Border`},{var:`--sf-color-border--subtle`,label:`Border · Subtle`},{var:`--sf-color-border--strong`,label:`Border · Strong`},{var:`--sf-color-link`,label:`Link`},{var:`--sf-color-link--hover`,label:`Link · Hover`}]},{id:`brand`,label:`Brand`,tokens:[{var:`--sf-color-primary`,label:`Primary`},{var:`--sf-color-secondary`,label:`Secondary`},{var:`--sf-color-tertiary`,label:`Tertiary`},{var:`--sf-color-action`,label:`Action`},{var:`--sf-color-neutral`,label:`Neutral`},{var:`--sf-color-base`,label:`Base`}]},{id:`feedback`,label:`Feedback`,tokens:[{var:`--sf-color-success`,label:`Success`},{var:`--sf-color-success-subtle`,label:`Success · Subtle`},{var:`--sf-color-warning`,label:`Warning`},{var:`--sf-color-warning-subtle`,label:`Warning · Subtle`},{var:`--sf-color-error`,label:`Error`},{var:`--sf-color-error-subtle`,label:`Error · Subtle`},{var:`--sf-color-info`,label:`Info`},{var:`--sf-color-danger`,label:`Danger`}]}];function cl(e,t,n){let r=t&&typeof t==`object`?t:{},i=n&&typeof n==`object`?n:{},a=[];for(let e of sl){let t=[];for(let n of e.tokens){let e=r[n.var];if(!e)continue;let a=i[n.var]||e;t.push({var:n.var,name:n.var.slice(2),label:n.label,light:e,dark:a,alpha:/overlay|subtle|tint|muted|dim|alpha/i.test(n.var)})}t.length&&a.push({id:e.id,label:e.label,swatches:t})}return{groups:a}}var ll=J(``);function ul(e,t){Je(t,!0);let n=Na(t,`onPick`,3,void 0),r=F(()=>`${t.swatch.name}\nlight ${t.swatch.light}  ·  dark ${t.swatch.dark}`);var i=ll();let a;U(e=>{a=oa(i,1,`slashed-cp-swatch`,null,a,{"slashed-cp-swatch--alpha":t.swatch.alpha,"slashed-cp-swatch--split":t.mode===`both`}),ca(i,`--cp-l:${t.swatch.light??``}; --cp-d:${t.swatch.dark??``}; --cp-solid:${e??``};`),$(i,`title`,K(r)),$(i,`aria-label`,t.swatch.name)},[()=>ol(t.swatch,t.mode===`dark`?`dark`:`light`)]),q(`click`,i,()=>n()?.(t.swatch)),Y(e,i),Ye()}wi([`click`]);var dl=J(``),fl=J(``),pl=J(``),ml=J(`
        
      `),hl=J(`
       
       
      `,1),gl=J(``),_l=J(`
      Scale 50 → 950
       
      `,1),vl=J(``),yl=J(`
      `),bl=J(` `,1),xl=J(`
         
      `),Sl=J(`
       
      `),Cl=J(`
      `),wl=J(``),Tl=J(`
       
      `),El=J(` `),Dl=J(`
       
      `),Ol=J(`
    •     
      • `),kl=J(`
        `),Al=J(`
        `),jl=J(` `,1),Ml=J(`
           
         
        `),Nl=J(``),Pl=J(`
         
         
        `),Fl=J(`
        Quick Use
         
         
        Palette
         
        Brand
          
        Status
         
        `,1),Il=J(``),Ll=J(`
        Color System
         
         
         
         
         
          var()
         `,1);function Rl(e,t){Je(t,!0);let n=(e,t=d)=>{var n=Cl();Q(n,21,t,e=>e.id,(e,t)=>{let n=F(()=>oe(K(t))),r=F(()=>se(K(t))),i=F(()=>K(u)===K(t).id);var a=Sl(),o=B(a);let c;var l=B(o),d=e=>{var t=dl();U(()=>ca(t,`--sw-l: ${K(n).light??``}; --sw-d: ${K(n).dark??``}`)),Y(e,t)};Z(l,e=>{K(n)&&e(d)});var p=H(l,2),m=B(p,!0);D(p);var h=H(p,2),g=B(h,!0);D(h);var _=H(h,2);Q(_,21,()=>K(r),e=>e.var,(e,t)=>{var n=fl();U(()=>{ca(n,`--sw-l: ${K(t).light??``}; --sw-d: ${K(t).dark??``}`),$(n,`title`,K(t).label)}),Y(e,n)}),D(_);var v=H(_,2),y=B(v,!0);D(v),D(o);var b=H(o,2),x=e=>{let r=F(()=>ae(K(t),`alias`)),i=F(()=>ce(K(t))),a=F(()=>ae(K(t),`alpha`));var o=xl(),c=B(o),l=e=>{var r=pl(),i=B(r),a=B(i,!0);D(i),D(r),U(()=>{ca(r,`--sw-l: ${K(n).light??``}; --sw-d: ${K(n).dark??``}`),$(r,`title`,`${K(t).label??``} base — ${K(n).name??``}`),X(a,K(t).label)}),q(`click`,r,()=>C(K(n))),Y(e,r)};Z(c,e=>{K(n)&&e(l)});var u=H(c,2),d=e=>{var t=hl(),n=V(t),i=B(n);D(n);var a=H(n,2);Q(a,21,()=>K(r).swatches,e=>e.var,(e,t)=>{var n=ml(),r=B(n);ul(r,{get swatch(){return K(t)},get mode(){return K(s)},onPick:C});var i=H(r,2),a=B(i,!0);D(i),D(n),U(()=>X(a,K(t).label)),Y(e,n)}),D(a),U(()=>X(i,`Aliases · ${K(r).swatches.length??``}`)),Y(e,t)};Z(u,e=>{K(r)?.swatches.length&&e(d)});var p=H(u,2),m=e=>{var t=_l(),n=H(V(t),2);Q(n,21,()=>K(i),e=>e.var,(e,t)=>{var n=gl();U(()=>{$(n,`title`,`${K(t).label??``} — ${K(t).name??``}`),ca(n,`--sw-l: ${K(t).light??``}; --sw-d: ${K(t).dark??``}`)}),q(`click`,n,()=>C(K(t))),Y(e,n)}),D(n),Y(e,t)};Z(p,e=>{K(i).length&&e(m)});var h=H(p,2),g=e=>{var n=bl(),r=V(n),i=B(r),o=B(i,!0);D(i),ze(),D(r);var s=H(r,2),c=e=>{var t=yl();Q(t,21,()=>K(a).swatches,e=>e.var,(e,t)=>{var n=vl();U(()=>{$(n,`title`,`${K(t).label??``} — ${K(t).name??``}`),ca(n,`--sw-l: ${K(t).light??``}; --sw-d: ${K(t).dark??``}`)}),q(`click`,n,()=>C(K(t))),Y(e,n)}),D(t),Y(e,t)},l=F(()=>K(f).has(K(t).id));Z(s,e=>{K(l)&&e(c)}),U(e=>X(o,e),[()=>K(f).has(K(t).id)?`▾`:`▸`]),q(`click`,r,()=>ie(K(t).id)),Y(e,n)};Z(h,e=>{K(a)?.swatches.length&&e(g)}),D(o),Y(e,o)};Z(b,e=>{K(i)&&e(x)}),D(a),U(()=>{c=oa(o,1,`slashed-cp__scan-row`,null,c,{"slashed-cp__scan-row--open":K(i)}),$(o,`aria-expanded`,K(i)),X(m,K(t).label),X(g,K(t).tagline),X(y,K(i)?`▾`:`▸`)}),q(`click`,o,()=>re(K(t).id)),Y(e,a)}),D(n),Y(e,n)},r=Na(t,`dockedLeft`,3,null),i=F(()=>typeof t.onPickValue==`function`),a=[{id:`both`,label:`Both`},{id:`light`,label:`Light`},{id:`dark`,label:`Dark`}],o=[`Hover`,`Active`,`Subtle`,`Ghost`,`Superlight`],s=R(`both`),c=R(``),l=R(null),u=R(null),f=R(er(new Set)),p=F(()=>rl(t.source?.variables,t.source?.light,t.source?.dark)),m=F(()=>K(c).trim()),h=F(()=>il(K(p),K(m))),g=F(()=>cl(t.source?.variables,t.source?.light,t.source?.dark)),_=F(()=>K(p).groups.reduce((e,t)=>e+t.count,0)),v=F(()=>K(p).groups.filter(e=>e.type===`brand`)),y=F(()=>K(p).groups.filter(e=>e.type===`status`)),b;function x(){if(typeof document>`u`)return null;let e=document.querySelector(`iframe#bricks-builder-iframe, iframe[name="bricks-builder-iframe"], #bricks-builder-area iframe`);try{return e?.contentDocument?.documentElement??null}catch{return null}}function S(e){let t=x();if(t)try{b===void 0&&(b=t.getAttribute(`data-theme`)),e===`light`||e===`dark`?t.setAttribute(`data-theme`,e):b===null?t.removeAttribute(`data-theme`):t.setAttribute(`data-theme`,b)}catch{}}function ee(){let e=x();if(!(!e||b===void 0))try{b===null?e.removeAttribute(`data-theme`):e.setAttribute(`data-theme`,b)}catch{}}function te(e){z(s,e,!0),S(e)}Pa(()=>()=>ee());async function ne(e){try{if(navigator?.clipboard?.writeText)return await navigator.clipboard.writeText(e),!0}catch{}try{let t=document.createElement(`textarea`);t.value=e,t.style.cssText=`position:fixed;opacity:0`,document.body.appendChild(t),t.select();let n=document.execCommand(`copy`);return t.remove(),n}catch{return!1}}async function C(e){let n=al(e);if(K(i)){if(t.onPickValue(n)===!1){z(l,{kind:`error`,message:`Couldn't apply ${n} — input not found`},!0);return}t.onPick?.();return}z(l,await ne(n)?{kind:`info`,message:`Copied — ${e.name}`}:{kind:`error`,message:`Couldn't copy ${n}`},!0)}function re(e){z(u,K(u)===e?null:e,!0),z(f,new Set,!0)}function ie(e){let t=new Set(K(f));t.has(e)?t.delete(e):t.add(e),z(f,t,!0)}function ae(e,t){return e.sections.find(e=>e.id===t)}function oe(e){return ae(e,`scale`)?.swatches[0]??null}function se(e){let t=ae(e,`alias`);if(!t?.swatches.length)return[];let n=o.map(e=>t.swatches.find(t=>t.label===e)).filter(Boolean);return n.length?n:t.swatches.slice(0,5)}function ce(e){return ae(e,`scale`)?.swatches.slice(1)??[]}function le(e){e.key===`Escape`&&t.onClose?.()}var ue=Ll();Ci(`keydown`,rr,le);var de=V(ue);let fe;var pe=B(de),me=H(B(pe),2);Q(me,21,()=>a,e=>e.id,(e,t)=>{var n=wl();let r;var i=B(n,!0);D(n),U(()=>{r=oa(n,1,`slashed-cp__seg-btn`,null,r,{"slashed-cp__seg-btn--on":K(s)===K(t).id}),$(n,`aria-pressed`,K(s)===K(t).id),X(i,K(t).label)}),q(`click`,n,()=>te(K(t).id)),Y(e,n)}),D(me);var he=H(me,2);D(pe);var ge=H(pe,2),_e=B(ge);ga(_e),D(ge);var ve=H(ge,2),ye=B(ve),be=e=>{var t=jl(),n=V(t),r=e=>{var t=Tl(),n=B(t);D(t),U(()=>X(n,`No tokens match "${K(m)??``}".`)),Y(e,t)};Z(n,e=>{K(h).groups.length===0&&e(r)}),Q(H(n,2),17,()=>K(h).groups,e=>e.id,(e,t)=>{var n=Ml(),r=B(n),i=B(r),a=B(i),o=H(a),c=e=>{var n=El(),r=B(n,!0);D(n),U(()=>X(r,K(t).tagline)),Y(e,n)};Z(o,e=>{K(t).tagline&&e(c)});var l=H(o,2),u=B(l,!0);D(l),D(i),D(r),Q(H(r,2),17,()=>K(t).sections,e=>e.id,(e,n)=>{var r=jl(),i=V(r),a=e=>{var t=Dl(),r=B(t,!0);D(t),U(()=>X(r,K(n).label)),Y(e,t)};Z(i,e=>{K(n).label&&e(a)});var o=H(i,2),c=e=>{var t=kl();Q(t,21,()=>K(n).swatches,e=>e.var,(e,t)=>{var n=Ol(),r=B(n);ul(r,{get swatch(){return K(t)},get mode(){return K(s)},onPick:C});var i=H(r,2),a=B(i,!0);D(i);var o=H(i,2),c=B(o,!0);D(o),D(n),U(()=>{X(a,K(t).label),X(c,K(t).name)}),Y(e,n)}),D(t),Y(e,t)},l=e=>{var t=Al();Q(t,21,()=>K(n).swatches,e=>e.var,(e,t)=>{var n=ml(),r=B(n);ul(r,{get swatch(){return K(t)},get mode(){return K(s)},onPick:C});var i=H(r,2),a=B(i,!0);D(i),D(n),U(()=>X(a,K(t).label)),Y(e,n)}),D(t),Y(e,t)};Z(o,e=>{K(t).type===`semantic`?e(c):e(l,-1)}),Y(e,r)}),D(n),U(()=>{$(n,`data-type`,K(t).type),X(a,`${K(t).label??``} `),X(u,K(t).count)}),Y(e,n)}),Y(e,t)},xe=e=>{var t=Fl(),r=V(t);Q(H(B(r),2),17,()=>K(g).groups,e=>e.id,(e,t)=>{var n=Pl(),r=B(n),i=B(r,!0);D(r);var a=H(r,2);Q(a,21,()=>K(t).swatches,e=>e.var,(e,t)=>{var n=Nl(),r=B(n);let i;var a=H(r,2),o=B(a,!0);D(a),D(n),U(()=>{$(n,`title`,K(t).name),i=oa(r,1,`slashed-cp__qu-sw`,null,i,{"slashed-cp__qu-sw--alpha":K(t).alpha}),ca(r,`--sw-l: ${K(t).light??``}; --sw-d: ${K(t).dark??``}`),X(o,K(t).label)}),q(`click`,n,()=>C(K(t))),Y(e,n)}),D(a),D(n),U(()=>X(i,K(t).label)),Y(e,n)}),D(r);var i=H(r,2),a=H(B(i),4);n(a,()=>K(v)),n(H(a,4),()=>K(y)),D(i),Y(e,t)};Z(ye,e=>{K(m)?e(be):e(xe,-1)}),D(ve);var Se=H(ve,2),Ce=B(Se),we=e=>{Y(e,Il())};Z(Ce,e=>{K(s)===`both`&&e(we)});var Te=H(Ce,2),Ee=B(Te);ze(),D(Te),D(Se),D(de);var De=H(de,2),Oe=e=>{jc(e,{get kind(){return K(l).kind},get message(){return K(l).message},onDismiss:()=>{z(l,null)}})};Z(De,e=>{K(l)&&e(Oe)}),U(()=>{fe=oa(de,1,`slashed-cp`,null,fe,{"slashed-cp--docked":K(i)}),$(de,`data-mode`,K(s)),ca(de,K(i)&&r()!=null?`--cp-dock-left: ${r()}px`:``),$(_e,`placeholder`,`Search ${K(_)} tokens…`),X(Ee,`${K(i)?`Click to insert`:`Click to copy`} `)}),q(`click`,de,e=>e.stopPropagation()),q(`mousedown`,de,e=>e.stopPropagation()),q(`pointerdown`,de,e=>e.stopPropagation()),q(`touchstart`,de,e=>e.stopPropagation(),void 0,!0),q(`click`,he,()=>t.onClose?.()),ba(_e,()=>K(c),e=>z(c,e)),Y(e,ue),Ye()}wi([`click`,`mousedown`,`pointerdown`,`touchstart`]);var zl=J(` `,1);function Bl(e,t){let n=R(!1);var r=zl(),i=V(r);zc(i,{get open(){return K(n)},onToggle:()=>z(n,!K(n))});var a=H(i,2),o=e=>{Rl(e,{get source(){return t.source},onClose:()=>z(n,!1)})};Z(a,e=>{K(n)&&e(o)}),Y(e,r)}var Vl=`#bricks-structure`,Hl=`li[data-id]`,Ul=`slashed-rebemer-host`,Wl=400,Gl=25,Kl=(e,...t)=>console[e](`[reBEMer]`,...t),ql=new AbortController,{signal:Jl}=ql,Yl=new Map,Xl=null,Zl=null,Ql=null;function $l(){let e=document.getElementById(Ul);return e||(e=document.createElement(`div`),e.id=Ul,document.body.appendChild(e)),e}var eu=null;function tu(){eu=window.slashedBricksEditor,eu&&typeof eu==`object`&&(To(eu.showClassHints,eu.classHints,{signal:Jl}),Jo(eu.showColorSwatches,eu.colorHexMap,{signal:Jl,onOpenPanel:eu.showColorPanel?e=>uu(e):void 0}),xs(eu.variableHints||{},{signal:Jl}));let e=0,t=()=>{if(!Jl.aborted){if(Va()){nu();return}if(++e>=Gl){Kl(`warn`,`Bricks Vue app not detected after grace window — reBEMer disabled on this page.`);return}setTimeout(t,Wl)}};t()}function nu(){if(ou(),eu&&eu.rebemerEnabled===!1)return;let e=document.querySelector(Vl);if(e){ru(e);return}let t=new MutationObserver(()=>{let e=document.querySelector(Vl);e&&(t.disconnect(),ru(e))});t.observe(document.body,{childList:!0,subtree:!0}),Jl.addEventListener(`abort`,()=>t.disconnect(),{once:!0})}function ru(e){let t=null,n=new MutationObserver(()=>{t===null&&(t=setTimeout(()=>{t=null,iu(e)},50))});n.observe(e,{childList:!0,subtree:!0}),Jl.addEventListener(`abort`,()=>{n.disconnect(),t!==null&&clearTimeout(t)},{once:!0}),iu(e)}function iu(e){for(let[e,t]of Yl)if(!t.host.isConnected){try{Li(t.instance)}catch(e){Kl(`warn`,`badge unmount failed`,e)}Yl.delete(e)}let t=e.querySelectorAll(Hl);for(let e of t){let t=e.getAttribute(`data-id`);if(!t)continue;let n=Yl.get(t);n&&n.host.isConnected&&e.contains(n.host)||au(e)}}function au(e){let t=e.getAttribute(`data-id`);if(!t)return;let n=e.querySelector(`:scope > .structure-item`)||e,r=n.querySelector(`:scope > ul.actions`)||n.querySelector(`:scope > .actions`)||n.querySelector(`:scope > .structure-item-actions`),i=document.createElement(`span`);i.className=`rebemer-badge-host`,r?n.insertBefore(i,r):n.appendChild(i);let a=n.querySelector(`:scope > .title, :scope > .structure-item-title, :scope > .name, :scope .label`),o=Ni(Es,{target:i,props:{elementId:t,label:a?a.textContent.trim():``,onActivate:fu}}),s=Yl.get(t);if(s){try{Li(s.instance)}catch(e){Kl(`warn`,`badge remount cleanup failed`,e)}s.host.isConnected&&s.host.remove()}Yl.set(t,{instance:o,host:i})}function ou(){if(Zl)return;let e=eu&&eu.colorPanel;if(!eu?.showColorPanel||!e||!Array.isArray(e.variables)||e.variables.length===0)return;let t=document.createElement(`div`);$l().appendChild(t),Zl={instance:Ni(Bl,{target:t,props:{source:e}}),node:t}}function su(){if(Zl){try{Li(Zl.instance)}catch(e){Kl(`warn`,`color app unmount failed`,e)}Zl.node.remove(),Zl=null}}function cu(e,t){if(!e||!e.isConnected)return!1;try{let n=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,`value`)?.set;return n?n.call(e,t):e.value=t,e.dispatchEvent(new Event(`input`,{bubbles:!0})),!0}catch{return!1}}function lu(e){let t=[`#bricks-panel-inner`,`#bricks-panel`,`[id^="bricks-panel"]`];if(e)for(let n of t){let t=e.closest(n);if(t){let e=t.getBoundingClientRect();if(e.width>100)return Math.ceil(e.right)}}for(let e of t){let t=document.querySelector(e);if(t){let e=t.getBoundingClientRect();if(e.width>100)return Math.ceil(e.right)}}return null}function uu(e){du();let t=eu?.colorPanel;if(!t||!Array.isArray(t.variables)||t.variables.length===0)return;let n=lu(e),r=document.createElement(`div`);$l().appendChild(r),Ql={instance:Ni(Rl,{target:r,props:{source:t,dockedLeft:n,onPickValue:t=>{let n=cu(e?.querySelector(`input[type="text"]`)??e?.querySelector(`input:not([type="hidden"],[type="submit"],[type="button"],[type="checkbox"],[type="radio"],[type="file"])`),t);if(n){let n=t.match(/^var\((--[^)]+)\)/)?.[1],r=n?eu?.colorHexMap?.[n]??null:null,i=(e?.closest(`[data-control="color"]`))?.querySelector(`:scope > .slashed-sf-color-btn`);if(i){let e=i.querySelector(`.slashed-sf-color-btn__dot`);e&&(r?(e.style.background=r,e.style.removeProperty(`box-shadow`)):e.style.removeProperty(`background`)),i.classList.toggle(`slashed-sf-color-btn--active`,!!r)}if(r){let t=e?.closest(`[data-control="color"]`);requestAnimationFrame(()=>{if(!t)return;let e=t.querySelector(`.bricks-control-preview`);e&&(Ho(e,!0),e.classList.remove(`empty`))})}}return n},onPick:du,onClose:du}}),node:r}}function du(){if(Ql){try{Li(Ql.instance)}catch(e){Kl(`warn`,`color picker panel unmount failed`,e)}Ql.node.remove(),Ql=null}}function fu(e){pu();let t=document.createElement(`div`);$l().appendChild(t),Xl={instance:Ni(Lc,{target:t,props:{rootId:e,onClose:pu}}),node:t}}function pu(){if(Xl){try{Li(Xl.instance)}catch(e){Kl(`warn`,`panel unmount failed`,e)}Xl.node.remove(),Xl=null}}window.addEventListener(`beforeunload`,()=>{ql.abort(),pu(),su(),du(),Eo(),Yo(),Ss();for(let{instance:e}of Yl.values())try{Li(e)}catch{}Yl.clear()},{once:!0}),document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,tu,{once:!0}):tu();
 //# sourceMappingURL=app.js.map
\ No newline at end of file
diff --git a/SLASHED-for-WP/integrations/bricks/editor-app/src/lib/color-model.js b/SLASHED-for-WP/integrations/bricks/editor-app/src/lib/color-model.js
index 66b20e88..fa914530 100644
--- a/SLASHED-for-WP/integrations/bricks/editor-app/src/lib/color-model.js
+++ b/SLASHED-for-WP/integrations/bricks/editor-app/src/lib/color-model.js
@@ -44,7 +44,7 @@ const ALPHA_STEPS = ['a5', 'a10', 'a20', 'a30', 'a40', 'a50', 'a60', 'a70', 'a80
 /** Named semantic aliases, ordered light → dark → translucent. */
 const ALIAS_ORDER = [
   'superlight', 'xlight', 'lighter', 'darker', 'xdark', 'superdark',
-  'hover', 'active', 'strong', 'subtle', 'muted', 'ghost',
+  'hover', 'active', 'strong', 'subtle', 'muted', 'tint',
 ];
 
 /**
@@ -159,7 +159,7 @@ function isTranslucent(info) {
   if (info.kind === 'alpha') return true;
   // Named alpha-ish aliases and semantic overlays that resolve to a
   // translucent value in the framework.
-  return /(?:^|-)(?:subtle|muted|ghost|translucent|overlay|dim|underline)$/.test(info.key);
+  return /(?:^|-)(?:subtle|muted|tint|translucent|overlay|dim|underline)$/.test(info.key);
 }
 
 /**
@@ -512,7 +512,7 @@ export function buildQuickUseModel(_variables, light, dark) {
         label: token.label,
         light: l,
         dark:  d,
-        alpha: /overlay|subtle|ghost|muted|dim|alpha/i.test(token.var),
+        alpha: /overlay|subtle|tint|muted|dim|alpha/i.test(token.var),
       });
     }
     if (swatches.length) groups.push({ id: groupDef.id, label: groupDef.label, swatches });
diff --git a/SLASHED-for-WP/integrations/gutenberg/assets/editor/color-model.js b/SLASHED-for-WP/integrations/gutenberg/assets/editor/color-model.js
index 66b20e88..fa914530 100644
--- a/SLASHED-for-WP/integrations/gutenberg/assets/editor/color-model.js
+++ b/SLASHED-for-WP/integrations/gutenberg/assets/editor/color-model.js
@@ -44,7 +44,7 @@ const ALPHA_STEPS = ['a5', 'a10', 'a20', 'a30', 'a40', 'a50', 'a60', 'a70', 'a80
 /** Named semantic aliases, ordered light → dark → translucent. */
 const ALIAS_ORDER = [
   'superlight', 'xlight', 'lighter', 'darker', 'xdark', 'superdark',
-  'hover', 'active', 'strong', 'subtle', 'muted', 'ghost',
+  'hover', 'active', 'strong', 'subtle', 'muted', 'tint',
 ];
 
 /**
@@ -159,7 +159,7 @@ function isTranslucent(info) {
   if (info.kind === 'alpha') return true;
   // Named alpha-ish aliases and semantic overlays that resolve to a
   // translucent value in the framework.
-  return /(?:^|-)(?:subtle|muted|ghost|translucent|overlay|dim|underline)$/.test(info.key);
+  return /(?:^|-)(?:subtle|muted|tint|translucent|overlay|dim|underline)$/.test(info.key);
 }
 
 /**
@@ -512,7 +512,7 @@ export function buildQuickUseModel(_variables, light, dark) {
         label: token.label,
         light: l,
         dark:  d,
-        alpha: /overlay|subtle|ghost|muted|dim|alpha/i.test(token.var),
+        alpha: /overlay|subtle|tint|muted|dim|alpha/i.test(token.var),
       });
     }
     if (swatches.length) groups.push({ id: groupDef.id, label: groupDef.label, swatches });
diff --git a/SLASHED-for-WP/integrations/gutenberg/includes/class-presets.php b/SLASHED-for-WP/integrations/gutenberg/includes/class-presets.php
index 8ddb2530..90d8803f 100644
--- a/SLASHED-for-WP/integrations/gutenberg/includes/class-presets.php
+++ b/SLASHED-for-WP/integrations/gutenberg/includes/class-presets.php
@@ -73,7 +73,7 @@ class Slashed_Gutenberg_Presets {
 		'strong',
 		'subtle',
 		'muted',
-		'ghost',
+		'tint',
 	);
 
 	/**
diff --git a/tests-php/ColorResolverTest.php b/tests-php/ColorResolverTest.php
index a94ff0dc..e9177dde 100644
--- a/tests-php/ColorResolverTest.php
+++ b/tests-php/ColorResolverTest.php
@@ -83,7 +83,7 @@ public function test_semantic_aliases_point_at_their_target_steps() {
 			'active' => '800',
 			'subtle' => 'a10',
 			'muted'  => 'a30',
-			'ghost'  => 'a5',
+			'tint'   => 'a5',
 		);
 		foreach ( $aliases as $alias => $target ) {
 			$this->assertSame(