@ttoss/fsl-theme 2.0.0 → 2.1.0

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

@@ -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-DNLlLDps.mjs → ssrScript-zDK1dqXr.mjs}

@@ -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--UFgVlEn.cjs');
+const require_createTheme = require('../createTheme-B7H0xSVp.cjs');
 const require_helpers = require('../helpers-BU40JvFA.cjs');
-const require_withDataviz = require('../withDataviz-CYRf4exT.cjs');
+const require_withDataviz = require('../withDataviz-DrUtw8cc.cjs');
 
 //#region src/themes/bruttal.ts
 /**

package/dist/themes/bruttal.d.cts

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

package/dist/themes/bruttal.d.mts

@@ -1,3 +1,3 @@
 
-import { t as bruttal } from "../index-BmCTIOzh.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 { a as darkAlternate, n as createTheme } from "../createTheme-B6tVIikC.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-BvpZJnFx.mjs";
+import { t as withDataviz } from "../withDataviz-Ln3sEwb7.mjs";
 
 //#region src/themes/bruttal.ts
 /**

package/dist/{toCssVars-C-9yIZDR.mjs → toCssVars-CWTlp9St.mjs}

@@ -11,7 +11,7 @@ import { t as CSS_PATH_PREFIXES } from "./tokenRegistry-DviyqDeE.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.
@@ -212,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 = ({
@@ -238,7 +266,8 @@ var diffCssVars = ({
 */
 var bundleToCssVars = (bundle, options) => {
   const {
-    themeId
+    themeId,
+    systemModeFallback = true
   } = options;
   const {
     baseMode,
@@ -297,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-BseqmMcT.cjs → toCssVars-D0BR23cP.cjs}

@@ -11,7 +11,7 @@ const require_tokenRegistry = require('./tokenRegistry-f_Bx_BAN.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.
@@ -212,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 = ({
@@ -238,7 +266,8 @@ var diffCssVars = ({
 */
 var bundleToCssVars = (bundle, options) => {
   const {
-    themeId
+    themeId,
+    systemModeFallback = true
   } = options;
   const {
     baseMode,
@@ -297,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/vars.cjs

@@ -3,8 +3,8 @@ Object.defineProperty(exports, Symbol.toStringTag, {
   value: 'Module'
 });
 const require_helpers = require('./helpers-BU40JvFA.cjs');
-const require_baseBundle = require('./baseBundle-DdRSa5mf.cjs');
-const require_toCssVars = require('./toCssVars-BseqmMcT.cjs');
+const require_baseBundle = require('./baseBundle-a9LDsqYy.cjs');
+const require_toCssVars = require('./toCssVars-D0BR23cP.cjs');
 
 //#region src/roots/toVars.ts
 /**
@@ -23,7 +23,7 @@ const require_toCssVars = require('./toCssVars-BseqmMcT.cjs');
 *
 * const vars = buildVarsMap(baseTheme);
 * vars.colors.action.primary.background.default
-* // → 'var(--tt-action-primary-background-default)'
+* // → 'var(--tt-colors-action-primary-background-default)'
 * ```
 */
 var buildVarsMap = theme => {
@@ -57,15 +57,15 @@ var buildVarsMap = theme => {
 * import { vars } from '@ttoss/fsl-theme/vars';
 *
 * <Button style={{ background: vars.colors.action.primary.background.default }} />
-* // → background: 'var(--tt-action-primary-background-default)'
+* // → background: 'var(--tt-colors-action-primary-background-default)'
 * ```
 *
 * ## Usage in CSS / CSS Modules
 *
 * ```css
 * .button {
-*   background: var(--tt-action-primary-background-default);
-*   color: var(--tt-action-primary-text-default);
+*   background: var(--tt-colors-action-primary-background-default);
+*   color: var(--tt-colors-action-primary-text-default);
 * }
 * ```
 *
@@ -110,7 +110,7 @@ var buildVarsMap = theme => {
 *   buildVarsMap(myTheme.base) as CssVarsMap<MySemanticTokens>;
 *
 * myVars.colors.brandX.primary.default;
-* // → 'var(--tt-colors-brandx-primary-default)'
+* // → 'var(--tt-colors-brandX-primary-default)'  (camelCase is preserved)
 * ```
 *
 * For one-off custom keys where the extra structure is trivial, use

package/dist/vars.d.cts

@@ -1,5 +1,5 @@
 
-import { a as ThemeTokens, n as SemanticTokens } from "./Types-BkaxtsMv.cjs";
+import { a as ThemeTokens, n as SemanticTokens } from "./Types-a_sfpbha.cjs";
 
 //#region src/roots/toVars.d.ts
 /**
@@ -38,7 +38,7 @@ type CssVarsMap<T> = { [K in keyof T as K extends `$${string}` ? never : K]: Non
  *
  * const vars = buildVarsMap(baseTheme);
  * vars.colors.action.primary.background.default
- * // → 'var(--tt-action-primary-background-default)'
+ * // → 'var(--tt-colors-action-primary-background-default)'
  * ```
  */
 declare const buildVarsMap: (theme: ThemeTokens) => CssVarsMap<ThemeTokens["semantic"]>;
@@ -60,15 +60,15 @@ declare const buildVarsMap: (theme: ThemeTokens) => CssVarsMap<ThemeTokens["sema
  * import { vars } from '@ttoss/fsl-theme/vars';
  *
  * <Button style={{ background: vars.colors.action.primary.background.default }} />
- * // → background: 'var(--tt-action-primary-background-default)'
+ * // → background: 'var(--tt-colors-action-primary-background-default)'
  * ```
  *
  * ## Usage in CSS / CSS Modules
  *
  * ```css
  * .button {
- *   background: var(--tt-action-primary-background-default);
- *   color: var(--tt-action-primary-text-default);
+ *   background: var(--tt-colors-action-primary-background-default);
+ *   color: var(--tt-colors-action-primary-text-default);
  * }
  * ```
  *
@@ -113,7 +113,7 @@ declare const buildVarsMap: (theme: ThemeTokens) => CssVarsMap<ThemeTokens["sema
  *   buildVarsMap(myTheme.base) as CssVarsMap<MySemanticTokens>;
  *
  * myVars.colors.brandX.primary.default;
- * // → 'var(--tt-colors-brandx-primary-default)'
+ * // → 'var(--tt-colors-brandX-primary-default)'  (camelCase is preserved)
  * ```
  *
  * For one-off custom keys where the extra structure is trivial, use

package/dist/vars.d.mts

@@ -1,5 +1,5 @@
 
-import { a as ThemeTokens, n as SemanticTokens } from "./Types-BkaxtsMv.mjs";
+import { a as ThemeTokens, n as SemanticTokens } from "./Types-a_sfpbha.mjs";
 
 //#region src/roots/toVars.d.ts
 /**
@@ -38,7 +38,7 @@ type CssVarsMap<T> = { [K in keyof T as K extends `$${string}` ? never : K]: Non
  *
  * const vars = buildVarsMap(baseTheme);
  * vars.colors.action.primary.background.default
- * // → 'var(--tt-action-primary-background-default)'
+ * // → 'var(--tt-colors-action-primary-background-default)'
  * ```
  */
 declare const buildVarsMap: (theme: ThemeTokens) => CssVarsMap<ThemeTokens["semantic"]>;
@@ -60,15 +60,15 @@ declare const buildVarsMap: (theme: ThemeTokens) => CssVarsMap<ThemeTokens["sema
  * import { vars } from '@ttoss/fsl-theme/vars';
  *
  * <Button style={{ background: vars.colors.action.primary.background.default }} />
- * // → background: 'var(--tt-action-primary-background-default)'
+ * // → background: 'var(--tt-colors-action-primary-background-default)'
  * ```
  *
  * ## Usage in CSS / CSS Modules
  *
  * ```css
  * .button {
- *   background: var(--tt-action-primary-background-default);
- *   color: var(--tt-action-primary-text-default);
+ *   background: var(--tt-colors-action-primary-background-default);
+ *   color: var(--tt-colors-action-primary-text-default);
  * }
  * ```
  *
@@ -113,7 +113,7 @@ declare const buildVarsMap: (theme: ThemeTokens) => CssVarsMap<ThemeTokens["sema
  *   buildVarsMap(myTheme.base) as CssVarsMap<MySemanticTokens>;
  *
  * myVars.colors.brandX.primary.default;
- * // → 'var(--tt-colors-brandx-primary-default)'
+ * // → 'var(--tt-colors-brandX-primary-default)'  (camelCase is preserved)
  * ```
  *
  * For one-off custom keys where the extra structure is trivial, use

package/dist/vars.mjs

@@ -1,7 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import { o as isPlainObject } from "./helpers-BXaKe2s3.mjs";
-import { t as baseBundle } from "./baseBundle-R7WyjyTw.mjs";
-import { t as toCssVarName } from "./toCssVars-C-9yIZDR.mjs";
+import { t as baseBundle } from "./baseBundle-CXdxj_re.mjs";
+import { t as toCssVarName } from "./toCssVars-CWTlp9St.mjs";
 
 //#region src/roots/toVars.ts
 /**
@@ -20,7 +20,7 @@ import { t as toCssVarName } from "./toCssVars-C-9yIZDR.mjs";
 *
 * const vars = buildVarsMap(baseTheme);
 * vars.colors.action.primary.background.default
-* // → 'var(--tt-action-primary-background-default)'
+* // → 'var(--tt-colors-action-primary-background-default)'
 * ```
 */
 var buildVarsMap = theme => {
@@ -54,15 +54,15 @@ var buildVarsMap = theme => {
 * import { vars } from '@ttoss/fsl-theme/vars';
 *
 * <Button style={{ background: vars.colors.action.primary.background.default }} />
-* // → background: 'var(--tt-action-primary-background-default)'
+* // → background: 'var(--tt-colors-action-primary-background-default)'
 * ```
 *
 * ## Usage in CSS / CSS Modules
 *
 * ```css
 * .button {
-*   background: var(--tt-action-primary-background-default);
-*   color: var(--tt-action-primary-text-default);
+*   background: var(--tt-colors-action-primary-background-default);
+*   color: var(--tt-colors-action-primary-text-default);
 * }
 * ```
 *
@@ -107,7 +107,7 @@ var buildVarsMap = theme => {
 *   buildVarsMap(myTheme.base) as CssVarsMap<MySemanticTokens>;
 *
 * myVars.colors.brandX.primary.default;
-* // → 'var(--tt-colors-brandx-primary-default)'
+* // → 'var(--tt-colors-brandX-primary-default)'  (camelCase is preserved)
 * ```
 *
 * For one-off custom keys where the extra structure is trivial, use

package/dist/{withDataviz-CYRf4exT.cjs → withDataviz-DrUtw8cc.cjs}

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-const require_createTheme = require('./createTheme--UFgVlEn.cjs');
+const require_createTheme = require('./createTheme-B7H0xSVp.cjs');
 
 //#region src/dataviz/baseTheme.ts
 /**

package/dist/{withDataviz-BvpZJnFx.mjs → withDataviz-Ln3sEwb7.mjs}

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { t as buildTheme } from "./createTheme-B6tVIikC.mjs";
+import { t as buildTheme } from "./createTheme-Bm9LVQ4w.mjs";
 
 //#region src/dataviz/baseTheme.ts
 /**

package/llms.txt

@@ -289,7 +289,8 @@ Not every state is legal in every `ux` context. Illegal combinations are TypeScr
 | `indeterminate` | — | ✅ | — | — | — |
 | `current` | — | — | ✅ (active route) | — | — |
 | `visited` | — | — | ✅ | — | ✅ (link in content) |
-| `droptarget` | — | ✅ (file input) | — | — | ✅ |
+| `droptarget` | ✅ | ✅ (file input) | ✅ | — | ✅ |
+| `invalid` | — | ✅ (runtime validation outcome — `isInvalid`, never authorial; pairs with `input.negative.*` on the validationMessage) | — | — | — |
 
 State disambiguation rules:
 - **`active` vs `pressed`**: `active` = the brief moment of clicking (transient). `pressed` = persistent toggle engaged ("Bold" button). Never use `active` for toggle state.
@@ -575,7 +576,7 @@ const DarkModeToggle = () => {
 ```tsx
 import { useResolvedTokens } from '@ttoss/fsl-theme/react';
 
-// Keys are full semantic dot-paths; values are resolved raw CSS values (hex, px, etc.)
+// Keys are full semantic dot-paths; values are resolved raw CSS values (hex, numbers, etc.)
 const NativeButton = ({ disabled }: { disabled?: boolean }) => {
   const resolved = useResolvedTokens();
   return (
@@ -584,8 +585,7 @@ const NativeButton = ({ disabled }: { disabled?: boolean }) => {
         backgroundColor: disabled
           ? resolved['semantic.colors.action.primary.background.disabled']
           : resolved['semantic.colors.action.primary.background.default'],
-        minHeight: resolved['semantic.sizing.hit.base'],
-        paddingHorizontal: resolved['semantic.spacing.inset.control.md'],
+        opacity: disabled ? Number(resolved['semantic.opacity.disabled']) : 1,
       }}
     />
   );
@@ -594,6 +594,8 @@ const NativeButton = ({ disabled }: { disabled?: boolean }) => {
 
 `useResolvedTokens()` automatically applies coarse-pointer hit target overrides — mirrors the `@media (any-pointer: coarse)` block that `toCssVars` injects for CSS consumers.
 
+⚠ **CSS-coupled tokens stay unresolved** (model.md §8): spacing steps (`calc(N * var(--tt-core-spacing-engine-unit))`), fluid `text.*.fontSize` / `sizing.hit.*` (`clamp()` + `cqi`), `sizing.viewport.*` (`dvh`/`dvw`), `sizing.measure.reading` (`ch`), and `spacing.gutter.*` are CSS expressions and are **not usable** outside a CSS engine. In non-CSS environments, consume colors, opacity, z-index, font weights/leading, and other scalar tokens — derive dimensional values from your platform's layout system.
+
 ---
 
 # JOB 2 — Customizing a theme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/fsl-theme",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "ttoss theme provider for UI.",
   "keywords": [
     "css-variables",