@ttoss/fsl-theme 1.1.22 → 2.1.0

package/dist/{ssrScript-D3mYscp1.cjs → ssrScript-D73WcrCM.cjs}

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-const require_helpers = require('./helpers-CIqeJ8yd.cjs');
+const require_helpers = require('./helpers-BU40JvFA.cjs');
 
 //#region src/themeBootstrap.ts
 /**
@@ -18,7 +18,7 @@ var resolveTheme = cfg => {
   const mode = stored != null && stored.mode != null && cfg.validModes.indexOf(stored.mode) !== -1 ? stored.mode : cfg.defaultMode;
   return {
     mode,
-    resolvedMode: mode === "system" ? typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : mode
+    resolvedMode: mode === "system" ? typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : mode
   };
 };
 
@@ -34,6 +34,20 @@ var writeStorage = (key, data) => {
     localStorage.setItem(key, JSON.stringify(data));
   } catch {}
 };
+var createMediaQuery = () => {
+  if (typeof window.matchMedia === "function") return window.matchMedia("(prefers-color-scheme: dark)");
+  return {
+    matches: false,
+    addEventListener: () => {},
+    removeEventListener: () => {}
+  };
+};
+/**
+* DEV-only registry of live runtimes per root element. Two runtimes writing
+* `data-tt-*` to the same root overwrite each other (last writer wins), so
+* the second attach warns. Entries are decremented on `destroy()`.
+*/
+var activeRuntimesPerRoot = /* @__PURE__ */new WeakMap();
 /**
 * Creates a framework-agnostic runtime that manages theme switching.
 *
@@ -60,6 +74,11 @@ var createThemeRuntime = (config = {}) => {
   } = config;
   const listeners = /* @__PURE__ */new Set();
   let destroyed = false;
+  if (process.env.NODE_ENV !== "production") {
+    const count = (activeRuntimesPerRoot.get(root) ?? 0) + 1;
+    activeRuntimesPerRoot.set(root, count);
+    if (count > 1) console.warn("[fsl-theme] Multiple theme runtimes are attached to the same root element. They overwrite each other's data-tt-* attributes (last writer wins) and their mode states do not sync. Render a single <ThemeProvider> per root, or pass a distinct `root` to each.");
+  }
   const init = resolveTheme({
     storageKey,
     defaultMode,
@@ -94,7 +113,7 @@ var createThemeRuntime = (config = {}) => {
     const state = getState();
     for (const listener of listeners) listener(state);
   };
-  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  const mediaQuery = createMediaQuery();
   const onSystemChange = () => {
     if (destroyed) return;
     resolvedMode = mediaQuery.matches ? "dark" : "light";
@@ -107,6 +126,30 @@ var createThemeRuntime = (config = {}) => {
     if (active) mediaQuery.addEventListener("change", onSystemChange);
   };
   syncMediaListener(mode === "system");
+  /** Parse + validate a persisted `{ mode }` payload; null when unusable. */
+  const parseStoredMode = raw => {
+    let stored = null;
+    try {
+      stored = JSON.parse(raw);
+    } catch {
+      return null;
+    }
+    const nextMode = stored?.mode;
+    return nextMode && VALID_MODES.includes(nextMode) ? nextMode : null;
+  };
+  const onStorage = event => {
+    if (destroyed || event.key !== storageKey || event.newValue === null) return;
+    if (event.storageArea != null && event.storageArea !== localStorage) return;
+    const nextMode = parseStoredMode(event.newValue);
+    if (!nextMode) return;
+    mode = nextMode;
+    resolvedMode = mode === "system" ? mediaQuery.matches ? "dark" : "light" : mode;
+    syncMediaListener(mode === "system");
+    applyState({
+      persist: false
+    });
+  };
+  window.addEventListener("storage", onStorage);
   const setMode = newMode => {
     if (destroyed || !VALID_MODES.includes(newMode)) return;
     mode = newMode;
@@ -126,7 +169,12 @@ var createThemeRuntime = (config = {}) => {
   const destroy = () => {
     destroyed = true;
     syncMediaListener(false);
+    window.removeEventListener("storage", onStorage);
     listeners.clear();
+    if (process.env.NODE_ENV !== "production") {
+      const count = activeRuntimesPerRoot.get(root) ?? 0;
+      activeRuntimesPerRoot.set(root, Math.max(0, count - 1));
+    }
   };
   return {
     getState,
@@ -173,7 +221,7 @@ var getThemeScriptContent = (config = {}) => {
     defaultTheme,
     defaultMode,
     validModes: [...VALID_MODES]
-  })};var d=document.documentElement;var s=null;try{var r=localStorage.getItem(cfg.storageKey);if(r)s=JSON.parse(r);}catch(e){}var m=(s!=null&&s.mode!=null&&cfg.validModes.indexOf(s.mode)!==-1)?s.mode:cfg.defaultMode;var rm=m==="system"?(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"):m;if(cfg.defaultTheme){d.setAttribute("data-tt-theme",cfg.defaultTheme);}else{d.removeAttribute("data-tt-theme");}d.setAttribute("data-tt-mode",rm);d.style.colorScheme=rm;})()`;
+  }).replace(/</g, "\\u003C")};var d=document.documentElement;var s=null;try{var r=localStorage.getItem(cfg.storageKey);if(r)s=JSON.parse(r);}catch(e){}var m=(s!=null&&s.mode!=null&&cfg.validModes.indexOf(s.mode)!==-1)?s.mode:cfg.defaultMode;var rm=m==="system"?(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"):m;if(cfg.defaultTheme){d.setAttribute("data-tt-theme",cfg.defaultTheme);}else{d.removeAttribute("data-tt-theme");}d.setAttribute("data-tt-mode",rm);d.style.colorScheme=rm;})()`;
 };
 
 //#endregion

package/dist/{ssrScript-DfmopH-w.mjs → ssrScript-zDK1dqXr.mjs}

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { n as SAFE_ID_RE } from "./helpers-Dz7NfNK6.mjs";
+import { n as SAFE_ID_RE } from "./helpers-BXaKe2s3.mjs";
 
 //#region src/themeBootstrap.ts
 /**
@@ -18,7 +18,7 @@ var resolveTheme = cfg => {
   const mode = stored != null && stored.mode != null && cfg.validModes.indexOf(stored.mode) !== -1 ? stored.mode : cfg.defaultMode;
   return {
     mode,
-    resolvedMode: mode === "system" ? typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : mode
+    resolvedMode: mode === "system" ? typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : mode
   };
 };
 
@@ -34,6 +34,20 @@ var writeStorage = (key, data) => {
     localStorage.setItem(key, JSON.stringify(data));
   } catch {}
 };
+var createMediaQuery = () => {
+  if (typeof window.matchMedia === "function") return window.matchMedia("(prefers-color-scheme: dark)");
+  return {
+    matches: false,
+    addEventListener: () => {},
+    removeEventListener: () => {}
+  };
+};
+/**
+* DEV-only registry of live runtimes per root element. Two runtimes writing
+* `data-tt-*` to the same root overwrite each other (last writer wins), so
+* the second attach warns. Entries are decremented on `destroy()`.
+*/
+var activeRuntimesPerRoot = /* @__PURE__ */new WeakMap();
 /**
 * Creates a framework-agnostic runtime that manages theme switching.
 *
@@ -60,6 +74,11 @@ var createThemeRuntime = (config = {}) => {
   } = config;
   const listeners = /* @__PURE__ */new Set();
   let destroyed = false;
+  if (process.env.NODE_ENV !== "production") {
+    const count = (activeRuntimesPerRoot.get(root) ?? 0) + 1;
+    activeRuntimesPerRoot.set(root, count);
+    if (count > 1) console.warn("[fsl-theme] Multiple theme runtimes are attached to the same root element. They overwrite each other's data-tt-* attributes (last writer wins) and their mode states do not sync. Render a single <ThemeProvider> per root, or pass a distinct `root` to each.");
+  }
   const init = resolveTheme({
     storageKey,
     defaultMode,
@@ -94,7 +113,7 @@ var createThemeRuntime = (config = {}) => {
     const state = getState();
     for (const listener of listeners) listener(state);
   };
-  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  const mediaQuery = createMediaQuery();
   const onSystemChange = () => {
     if (destroyed) return;
     resolvedMode = mediaQuery.matches ? "dark" : "light";
@@ -107,6 +126,30 @@ var createThemeRuntime = (config = {}) => {
     if (active) mediaQuery.addEventListener("change", onSystemChange);
   };
   syncMediaListener(mode === "system");
+  /** Parse + validate a persisted `{ mode }` payload; null when unusable. */
+  const parseStoredMode = raw => {
+    let stored = null;
+    try {
+      stored = JSON.parse(raw);
+    } catch {
+      return null;
+    }
+    const nextMode = stored?.mode;
+    return nextMode && VALID_MODES.includes(nextMode) ? nextMode : null;
+  };
+  const onStorage = event => {
+    if (destroyed || event.key !== storageKey || event.newValue === null) return;
+    if (event.storageArea != null && event.storageArea !== localStorage) return;
+    const nextMode = parseStoredMode(event.newValue);
+    if (!nextMode) return;
+    mode = nextMode;
+    resolvedMode = mode === "system" ? mediaQuery.matches ? "dark" : "light" : mode;
+    syncMediaListener(mode === "system");
+    applyState({
+      persist: false
+    });
+  };
+  window.addEventListener("storage", onStorage);
   const setMode = newMode => {
     if (destroyed || !VALID_MODES.includes(newMode)) return;
     mode = newMode;
@@ -126,7 +169,12 @@ var createThemeRuntime = (config = {}) => {
   const destroy = () => {
     destroyed = true;
     syncMediaListener(false);
+    window.removeEventListener("storage", onStorage);
     listeners.clear();
+    if (process.env.NODE_ENV !== "production") {
+      const count = activeRuntimesPerRoot.get(root) ?? 0;
+      activeRuntimesPerRoot.set(root, Math.max(0, count - 1));
+    }
   };
   return {
     getState,
@@ -173,7 +221,7 @@ var getThemeScriptContent = (config = {}) => {
     defaultTheme,
     defaultMode,
     validModes: [...VALID_MODES]
-  })};var d=document.documentElement;var s=null;try{var r=localStorage.getItem(cfg.storageKey);if(r)s=JSON.parse(r);}catch(e){}var m=(s!=null&&s.mode!=null&&cfg.validModes.indexOf(s.mode)!==-1)?s.mode:cfg.defaultMode;var rm=m==="system"?(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"):m;if(cfg.defaultTheme){d.setAttribute("data-tt-theme",cfg.defaultTheme);}else{d.removeAttribute("data-tt-theme");}d.setAttribute("data-tt-mode",rm);d.style.colorScheme=rm;})()`;
+  }).replace(/</g, "\\u003C")};var d=document.documentElement;var s=null;try{var r=localStorage.getItem(cfg.storageKey);if(r)s=JSON.parse(r);}catch(e){}var m=(s!=null&&s.mode!=null&&cfg.validModes.indexOf(s.mode)!==-1)?s.mode:cfg.defaultMode;var rm=m==="system"?(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"):m;if(cfg.defaultTheme){d.setAttribute("data-tt-theme",cfg.defaultTheme);}else{d.removeAttribute("data-tt-theme");}d.setAttribute("data-tt-mode",rm);d.style.colorScheme=rm;})()`;
 };
 
 //#endregion

package/dist/themes/bruttal.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, {
   value: 'Module'
 });
-const require_createTheme = require('../createTheme-BHGc1IFI.cjs');
-const require_helpers = require('../helpers-CIqeJ8yd.cjs');
-const require_withDataviz = require('../withDataviz-BzZwFV2e.cjs');
+const require_createTheme = require('../createTheme-B7H0xSVp.cjs');
+const require_helpers = require('../helpers-BU40JvFA.cjs');
+const require_withDataviz = require('../withDataviz-DrUtw8cc.cjs');
 
 //#region src/themes/bruttal.ts
 /**
@@ -67,7 +67,22 @@ var bundle = require_createTheme.createTheme({
         }
       }
     }
-  })
+  }),
+  brief: {
+    name: "bruttal",
+    purpose: "warm-brown brutalist brand identity",
+    primaryPosture: "expressive",
+    secondaryPosture: "technical",
+    densityProfile: "balanced",
+    readingMode: "mixed",
+    pointerProfile: "hybrid",
+    interactionRisk: "medium",
+    surfaceModel: "flat",
+    brandEnergy: "expressive",
+    accessibilityTarget: "AA+",
+    colorModeStrategy: "dark-supported",
+    platformBias: "web"
+  }
 });
 var bruttal = require_withDataviz.withDataviz(bundle);
 

package/dist/themes/bruttal.d.cts

@@ -1,3 +1,3 @@
 
-import { i as bruttal } from "../index-Djro6G4e.cjs";
+import { t as bruttal } from "../index-BmZQVd3G.cjs";
 export { bruttal };

package/dist/themes/bruttal.d.mts

@@ -1,3 +1,3 @@
 
-import { i as bruttal } from "../index-BuszkWMy.mjs";
+import { t as bruttal } from "../index-XZsRrMTF.mjs";
 export { bruttal };

package/dist/themes/bruttal.mjs

@@ -1,7 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { i as darkAlternate, n as createTheme } from "../createTheme-C1r5nJco.mjs";
-import { r as deepMerge } from "../helpers-Dz7NfNK6.mjs";
-import { t as withDataviz } from "../withDataviz-CrgXLR5A.mjs";
+import { a as darkAlternate, n as createTheme } from "../createTheme-Bm9LVQ4w.mjs";
+import { r as deepMerge } from "../helpers-BXaKe2s3.mjs";
+import { t as withDataviz } from "../withDataviz-Ln3sEwb7.mjs";
 
 //#region src/themes/bruttal.ts
 /**
@@ -64,7 +64,22 @@ var bundle = createTheme({
         }
       }
     }
-  })
+  }),
+  brief: {
+    name: "bruttal",
+    purpose: "warm-brown brutalist brand identity",
+    primaryPosture: "expressive",
+    secondaryPosture: "technical",
+    densityProfile: "balanced",
+    readingMode: "mixed",
+    pointerProfile: "hybrid",
+    interactionRisk: "medium",
+    surfaceModel: "flat",
+    brandEnergy: "expressive",
+    accessibilityTarget: "AA+",
+    colorModeStrategy: "dark-supported",
+    platformBias: "web"
+  }
 });
 var bruttal = withDataviz(bundle);
 

package/dist/{toCssVars-CeckLjW1.mjs → toCssVars-CWTlp9St.mjs}

@@ -1,6 +1,6 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { a as flattenTheme, i as flattenObject, n as SAFE_ID_RE, r as deepMerge, t as COMPOUND_REF_RE } from "./helpers-Dz7NfNK6.mjs";
-import { t as CSS_PATH_PREFIXES } from "./tokenRegistry-DolhB5Vf.mjs";
+import { a as flattenTheme, i as flattenObject, n as SAFE_ID_RE, r as deepMerge, t as COMPOUND_REF_RE } from "./helpers-BXaKe2s3.mjs";
+import { t as CSS_PATH_PREFIXES } from "./tokenRegistry-DviyqDeE.mjs";
 
 //#region src/roots/toCssVars.ts
 /**
@@ -11,7 +11,7 @@ import { t as CSS_PATH_PREFIXES } from "./tokenRegistry-DolhB5Vf.mjs";
 */
 var toCssVarName = tokenPath => {
   for (const [prefix, cssPrefix] of CSS_PATH_PREFIXES) if (tokenPath.startsWith(prefix)) return `${cssPrefix}${tokenPath.slice(prefix.length).replace(/\./g, "-")}`;
-  return `--tt-${tokenPath.replace(/\./g, "-")}`;
+  return `--tt-${(tokenPath.startsWith("semantic.") ? tokenPath.slice(9) : tokenPath).replace(/\./g, "-")}`;
 };
 /**
 * Replace all embedded `{token.path}` refs inside a raw string with `var(--tt-...)` references.
@@ -26,6 +26,27 @@ var inlineRefsToVars = value => {
   });
 };
 /**
+* Assert that no two token paths collapse to the same CSS custom property name.
+*
+* `toCssVarName` is first-match-wins with no duplicate detection, so two
+* distinct token paths sharing a `cssPrefix` (e.g. a future
+* `semantic.dataviz.color.state.*` vs `semantic.dataviz.geo.state.*`) could
+* silently overwrite each other in the flat record. This guards the whole
+* registry, not just dataviz.
+*
+* **DEV-only** — callers gate this behind `process.env.NODE_ENV !== 'production'`
+* so bundlers tree-shake the entire call in production builds.
+*/
+var assertDistinctCssVars = flat => {
+  const byVarName = /* @__PURE__ */new Map();
+  for (const path of Object.keys(flat)) {
+    const varName = toCssVarName(path);
+    const existing = byVarName.get(varName);
+    if (existing !== void 0 && existing !== path) throw new Error(`[fsl-theme] CSS variable name collision: '${varName}' is produced by both '${existing}' and '${path}'. Give one of them a distinct token path or CSS prefix (see roots/tokenRegistry.ts).`);
+    byVarName.set(varName, path);
+  }
+};
+/**
 * Build a flat CSS custom properties record from a ThemeTokens.
 *
 * Core tokens get raw values. Semantic tokens get `var()` references
@@ -42,6 +63,10 @@ var buildCssVars = theme => {
     const varName = toCssVarName(path);
     if (typeof value === "string" && value.includes("{")) vars[varName] = inlineRefsToVars(value);else vars[varName] = value;
   }
+  if (process.env.NODE_ENV !== "production") assertDistinctCssVars({
+    ...coreFlat,
+    ...semanticFlat
+  });
   return vars;
 };
 var sanitizeId = value => {
@@ -187,6 +212,34 @@ var isThemeBundle = input => {
   return "baseMode" in input && "base" in input;
 };
 /**
+* Build the no-JS / pre-hydration system-mode fallback block.
+*
+* Canonical 1-theme model only (no `themeId`): before the runtime (or the SSR
+* bootstrap script) stamps `data-tt-mode`, and for users with JavaScript
+* disabled, the alternate mode would otherwise never apply. This block scopes
+* the alternate diff vars to `@media (prefers-color-scheme: <mode>)` behind
+* `:root:not([data-tt-mode])`, so it applies exactly while no explicit mode
+* attribute exists and gets out of the way the moment the runtime writes one
+* (persisted user choice always wins over the OS preference).
+*/
+var buildSystemModeFallbackBlock = ({
+  mode,
+  vars
+}) => {
+  const entries = Object.entries(vars);
+  const selector = ":root:not([data-tt-mode])";
+  const lines = entries.map(([name, value]) => {
+    return `    ${name}: ${hasCqUnits(value) ? toViewportFallback(String(value)) : value};`;
+  });
+  const cqEntries = entries.filter(([, value]) => {
+    return hasCqUnits(value);
+  });
+  const cqBlock = cqEntries.length > 0 ? `\n\n  @supports (width: 1cqi) {\n  ${selector} {\n${cqEntries.map(([name, value]) => {
+    return `      ${name}: ${value};`;
+  }).join("\n")}\n  }\n  }` : "";
+  return `@media (prefers-color-scheme: ${mode}) {\n  ${selector} {\n    color-scheme: ${mode};\n${lines.join("\n")}\n  }${cqBlock}\n}`;
+};
+/**
 * Compute a diff record: only entries in `full` whose values differ from `base`.
 */
 var diffCssVars = ({
@@ -213,7 +266,8 @@ var diffCssVars = ({
 */
 var bundleToCssVars = (bundle, options) => {
   const {
-    themeId
+    themeId,
+    systemModeFallback = true
   } = options;
   const {
     baseMode,
@@ -272,7 +326,13 @@ var bundleToCssVars = (bundle, options) => {
     alternate: alternateResult,
     toCssString: () => {
       const parts = [baseResult.toCssString()];
-      if (Object.keys(diffVars).length > 0) parts.push(alternateResult.toCssString());
+      if (Object.keys(diffVars).length > 0) {
+        parts.push(alternateResult.toCssString());
+        if (!themeId && systemModeFallback) parts.push(buildSystemModeFallbackBlock({
+          mode: alternateMode,
+          vars: diffVars
+        }));
+      }
       return parts.join("\n\n");
     }
   };

package/dist/{toCssVars-DDowz4wU.cjs → toCssVars-D0BR23cP.cjs}

@@ -1,6 +1,6 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-const require_helpers = require('./helpers-CIqeJ8yd.cjs');
-const require_tokenRegistry = require('./tokenRegistry-B9zMRjpL.cjs');
+const require_helpers = require('./helpers-BU40JvFA.cjs');
+const require_tokenRegistry = require('./tokenRegistry-f_Bx_BAN.cjs');
 
 //#region src/roots/toCssVars.ts
 /**
@@ -11,7 +11,7 @@ const require_tokenRegistry = require('./tokenRegistry-B9zMRjpL.cjs');
 */
 var toCssVarName = tokenPath => {
   for (const [prefix, cssPrefix] of require_tokenRegistry.CSS_PATH_PREFIXES) if (tokenPath.startsWith(prefix)) return `${cssPrefix}${tokenPath.slice(prefix.length).replace(/\./g, "-")}`;
-  return `--tt-${tokenPath.replace(/\./g, "-")}`;
+  return `--tt-${(tokenPath.startsWith("semantic.") ? tokenPath.slice(9) : tokenPath).replace(/\./g, "-")}`;
 };
 /**
 * Replace all embedded `{token.path}` refs inside a raw string with `var(--tt-...)` references.
@@ -26,6 +26,27 @@ var inlineRefsToVars = value => {
   });
 };
 /**
+* Assert that no two token paths collapse to the same CSS custom property name.
+*
+* `toCssVarName` is first-match-wins with no duplicate detection, so two
+* distinct token paths sharing a `cssPrefix` (e.g. a future
+* `semantic.dataviz.color.state.*` vs `semantic.dataviz.geo.state.*`) could
+* silently overwrite each other in the flat record. This guards the whole
+* registry, not just dataviz.
+*
+* **DEV-only** — callers gate this behind `process.env.NODE_ENV !== 'production'`
+* so bundlers tree-shake the entire call in production builds.
+*/
+var assertDistinctCssVars = flat => {
+  const byVarName = /* @__PURE__ */new Map();
+  for (const path of Object.keys(flat)) {
+    const varName = toCssVarName(path);
+    const existing = byVarName.get(varName);
+    if (existing !== void 0 && existing !== path) throw new Error(`[fsl-theme] CSS variable name collision: '${varName}' is produced by both '${existing}' and '${path}'. Give one of them a distinct token path or CSS prefix (see roots/tokenRegistry.ts).`);
+    byVarName.set(varName, path);
+  }
+};
+/**
 * Build a flat CSS custom properties record from a ThemeTokens.
 *
 * Core tokens get raw values. Semantic tokens get `var()` references
@@ -42,6 +63,10 @@ var buildCssVars = theme => {
     const varName = toCssVarName(path);
     if (typeof value === "string" && value.includes("{")) vars[varName] = inlineRefsToVars(value);else vars[varName] = value;
   }
+  if (process.env.NODE_ENV !== "production") assertDistinctCssVars({
+    ...coreFlat,
+    ...semanticFlat
+  });
   return vars;
 };
 var sanitizeId = value => {
@@ -187,6 +212,34 @@ var isThemeBundle = input => {
   return "baseMode" in input && "base" in input;
 };
 /**
+* Build the no-JS / pre-hydration system-mode fallback block.
+*
+* Canonical 1-theme model only (no `themeId`): before the runtime (or the SSR
+* bootstrap script) stamps `data-tt-mode`, and for users with JavaScript
+* disabled, the alternate mode would otherwise never apply. This block scopes
+* the alternate diff vars to `@media (prefers-color-scheme: <mode>)` behind
+* `:root:not([data-tt-mode])`, so it applies exactly while no explicit mode
+* attribute exists and gets out of the way the moment the runtime writes one
+* (persisted user choice always wins over the OS preference).
+*/
+var buildSystemModeFallbackBlock = ({
+  mode,
+  vars
+}) => {
+  const entries = Object.entries(vars);
+  const selector = ":root:not([data-tt-mode])";
+  const lines = entries.map(([name, value]) => {
+    return `    ${name}: ${hasCqUnits(value) ? toViewportFallback(String(value)) : value};`;
+  });
+  const cqEntries = entries.filter(([, value]) => {
+    return hasCqUnits(value);
+  });
+  const cqBlock = cqEntries.length > 0 ? `\n\n  @supports (width: 1cqi) {\n  ${selector} {\n${cqEntries.map(([name, value]) => {
+    return `      ${name}: ${value};`;
+  }).join("\n")}\n  }\n  }` : "";
+  return `@media (prefers-color-scheme: ${mode}) {\n  ${selector} {\n    color-scheme: ${mode};\n${lines.join("\n")}\n  }${cqBlock}\n}`;
+};
+/**
 * Compute a diff record: only entries in `full` whose values differ from `base`.
 */
 var diffCssVars = ({
@@ -213,7 +266,8 @@ var diffCssVars = ({
 */
 var bundleToCssVars = (bundle, options) => {
   const {
-    themeId
+    themeId,
+    systemModeFallback = true
   } = options;
   const {
     baseMode,
@@ -272,7 +326,13 @@ var bundleToCssVars = (bundle, options) => {
     alternate: alternateResult,
     toCssString: () => {
       const parts = [baseResult.toCssString()];
-      if (Object.keys(diffVars).length > 0) parts.push(alternateResult.toCssString());
+      if (Object.keys(diffVars).length > 0) {
+        parts.push(alternateResult.toCssString());
+        if (!themeId && systemModeFallback) parts.push(buildSystemModeFallbackBlock({
+          mode: alternateMode,
+          vars: diffVars
+        }));
+      }
       return parts.join("\n\n");
     }
   };

package/dist/{tokenRegistry-DolhB5Vf.mjs → tokenRegistry-DviyqDeE.mjs}

@@ -20,28 +20,25 @@ var TOKEN_PATH_REGISTRY = [{
   dtcgType: "number"
 }, {
   path: "core.dataviz.",
-  cssPrefix: "--tt-core-dataviz-",
-  dtcgType: "string"
+  cssPrefix: "--tt-core-dataviz-"
 }, {
   path: "semantic.dataviz.color.",
-  cssPrefix: "--tt-dataviz-",
+  cssPrefix: "--tt-dataviz-color-",
   dtcgType: "color"
 }, {
   path: "semantic.dataviz.encoding.opacity.",
-  cssPrefix: "--tt-dataviz-",
+  cssPrefix: "--tt-dataviz-encoding-opacity-",
   dtcgType: "number"
 }, {
   path: "semantic.dataviz.geo.",
-  cssPrefix: "--tt-dataviz-",
+  cssPrefix: "--tt-dataviz-geo-",
   dtcgType: "color"
 }, {
   path: "semantic.dataviz.encoding.",
-  cssPrefix: "--tt-dataviz-",
-  dtcgType: "string"
+  cssPrefix: "--tt-dataviz-encoding-"
 }, {
   path: "semantic.dataviz.",
-  cssPrefix: "--tt-dataviz-",
-  dtcgType: "string"
+  cssPrefix: "--tt-dataviz-"
 }, {
   path: "core.colors.",
   cssPrefix: "--tt-core-colors-",
@@ -72,12 +69,10 @@ var TOKEN_PATH_REGISTRY = [{
   dtcgType: "dimension"
 }, {
   path: "core.font.optical.",
-  cssPrefix: "--tt-core-font-optical-",
-  dtcgType: "string"
+  cssPrefix: "--tt-core-font-optical-"
 }, {
   path: "core.font.numeric.",
-  cssPrefix: "--tt-core-font-numeric-",
-  dtcgType: "string"
+  cssPrefix: "--tt-core-font-numeric-"
 }, {
   path: "core.font.scale.",
   cssPrefix: "--tt-core-font-scale-",
@@ -88,8 +83,7 @@ var TOKEN_PATH_REGISTRY = [{
   dtcgType: "dimension"
 }, {
   path: "core.sizing.behavior.",
-  cssPrefix: "--tt-core-sizing-behavior-",
-  dtcgType: "string"
+  cssPrefix: "--tt-core-sizing-behavior-"
 }, {
   path: "core.sizing.",
   cssPrefix: "--tt-core-sizing-",
@@ -104,8 +98,7 @@ var TOKEN_PATH_REGISTRY = [{
   dtcgType: "dimension"
 }, {
   path: "core.border.style.",
-  cssPrefix: "--tt-core-border-style-",
-  dtcgType: "string"
+  cssPrefix: "--tt-core-border-style-"
 }, {
   path: "core.opacity.",
   cssPrefix: "--tt-core-opacity-",
@@ -116,8 +109,7 @@ var TOKEN_PATH_REGISTRY = [{
   dtcgType: "duration"
 }, {
   path: "core.motion.easing.",
-  cssPrefix: "--tt-core-motion-easing-",
-  dtcgType: "string"
+  cssPrefix: "--tt-core-motion-easing-"
 }, {
   path: "core.zIndex.level.",
   cssPrefix: "--tt-core-z-index-",
@@ -136,8 +128,7 @@ var TOKEN_PATH_REGISTRY = [{
   dtcgType: "shadow"
 }, {
   path: "semantic.text.",
-  cssPrefix: "--tt-text-",
-  dtcgType: "string"
+  cssPrefix: "--tt-text-"
 }, {
   path: "semantic.spacing.",
   cssPrefix: "--tt-spacing-",
@@ -152,24 +143,21 @@ var TOKEN_PATH_REGISTRY = [{
   dtcgType: "dimension"
 }, {
   path: "semantic.focus.",
-  cssPrefix: "--tt-focus-",
-  dtcgType: "string"
+  cssPrefix: "--tt-focus-"
 }, {
   path: "semantic.overlay.",
   cssPrefix: "--tt-overlay-",
   dtcgType: "color"
 }, {
   path: "semantic.border.",
-  cssPrefix: "--tt-border-",
-  dtcgType: "string"
+  cssPrefix: "--tt-border-"
 }, {
   path: "semantic.opacity.",
   cssPrefix: "--tt-opacity-",
   dtcgType: "number"
 }, {
   path: "semantic.motion.",
-  cssPrefix: "--tt-motion-",
-  dtcgType: "string"
+  cssPrefix: "--tt-motion-"
 }, {
   path: "semantic.zIndex.layer.",
   cssPrefix: "--tt-z-index-",
@@ -179,7 +167,10 @@ var TOKEN_PATH_REGISTRY = [{
 var CSS_PATH_PREFIXES = TOKEN_PATH_REGISTRY.map(e => {
   return [e.path, e.cssPrefix];
 });
-/** Derived lookup table: `[path, dtcgType]` pairs. */
+/**
+* Derived lookup table: `[path, dtcgType]` pairs. `dtcgType` is `undefined` for
+* opaque tokens — `toDTCG` omits `$type` when the matched entry has none.
+*/
 var DTCG_TYPE_PREFIXES = TOKEN_PATH_REGISTRY.map(e => {
   return [e.path, e.dtcgType];
 });