@ttoss/fsl-theme 1.1.21 → 1.1.22

package/README.md

@@ -11,7 +11,7 @@ pnpm add @ttoss/fsl-theme
 ## Entry points
 
 | Import                     | Exports                                                                                                                                                                                         |
-| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| :------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `@ttoss/fsl-theme`         | `createTheme`, `darkAlternate`, built-in themes (`bruttal`, `corporate`, `oca`, `ventures`), types (`ThemeTokens`, `ThemeBundle`, `SemanticTokens`, `ModeOverride`, `DeepPartial`, `ThemeMode`) |
 | `@ttoss/fsl-theme/react`   | `ThemeProvider`, `ThemeHead`, `ThemeScript`, `ThemeStyles`, `useColorMode`, `useTokens`, `useResolvedTokens`                                                                                    |
 | `@ttoss/fsl-theme/dataviz` | `withDataviz`, `useDatavizTokens`                                                                                                                                                               |
@@ -164,9 +164,9 @@ Find the CSS property you are setting, then follow the branch to the leaf.
 
 ## Per-family specs
 
-Full grammar rules, decision matrices, and anti-patterns live in the family specs. Each file follows the pattern `02-families/{family}.md`:
+Full grammar rules, decision matrices, and anti-patterns live in the family specs. Each file follows the pattern `families/{family}.md`:
 
-[colors](https://github.com/ttoss/ttoss/blob/main/docs/website/docs/design/01-design-system/02-design-tokens/02-families/colors.md) · [spacing](https://github.com/ttoss/ttoss/blob/main/docs/website/docs/design/01-design-system/02-design-tokens/02-families/spacing.md) · [typography](https://github.com/ttoss/ttoss/blob/main/docs/website/docs/design/01-design-system/02-design-tokens/02-families/typography.md) · [sizing](https://github.com/ttoss/ttoss/blob/main/docs/website/docs/design/01-design-system/02-design-tokens/02-families/sizing.md) · [radii](https://github.com/ttoss/ttoss/blob/main/docs/website/docs/design/01-design-system/02-design-tokens/02-families/radii.md) · [borders](https://github.com/ttoss/ttoss/blob/main/docs/website/docs/design/01-design-system/02-design-tokens/02-families/borders.md) · [elevation](https://github.com/ttoss/ttoss/blob/main/docs/website/docs/design/01-design-system/02-design-tokens/02-families/elevation.md) · [opacity](https://github.com/ttoss/ttoss/blob/main/docs/website/docs/design/01-design-system/02-design-tokens/02-families/opacity.md) · [motion](https://github.com/ttoss/ttoss/blob/main/docs/website/docs/design/01-design-system/02-design-tokens/02-families/motion.md) · [z-index](https://github.com/ttoss/ttoss/blob/main/docs/website/docs/design/01-design-system/02-design-tokens/02-families/z-index.md) · [breakpoints](https://github.com/ttoss/ttoss/blob/main/docs/website/docs/design/01-design-system/02-design-tokens/02-families/breakpoints.md)
+[colors](https://github.com/ttoss/ttoss/blob/main/docs/website/docs/design/design-system/design-tokens/families/colors.md) · [spacing](https://github.com/ttoss/ttoss/blob/main/docs/website/docs/design/design-system/design-tokens/families/spacing.md) · [typography](https://github.com/ttoss/ttoss/blob/main/docs/website/docs/design/design-system/design-tokens/families/typography.md) · [sizing](https://github.com/ttoss/ttoss/blob/main/docs/website/docs/design/design-system/design-tokens/families/sizing.md) · [radii](https://github.com/ttoss/ttoss/blob/main/docs/website/docs/design/design-system/design-tokens/families/radii.md) · [borders](https://github.com/ttoss/ttoss/blob/main/docs/website/docs/design/design-system/design-tokens/families/borders.md) · [elevation](https://github.com/ttoss/ttoss/blob/main/docs/website/docs/design/design-system/design-tokens/families/elevation.md) · [opacity](https://github.com/ttoss/ttoss/blob/main/docs/website/docs/design/design-system/design-tokens/families/opacity.md) · [motion](https://github.com/ttoss/ttoss/blob/main/docs/website/docs/design/design-system/design-tokens/families/motion.md) · [z-index](https://github.com/ttoss/ttoss/blob/main/docs/website/docs/design/design-system/design-tokens/families/z-index.md) · [breakpoints](https://github.com/ttoss/ttoss/blob/main/docs/website/docs/design/design-system/design-tokens/families/breakpoints.md)
 
 ## createTheme
 

package/dist/{baseBundle-BXvPJYzj.cjs → baseBundle-BWbICg4p.cjs}

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

package/dist/{baseBundle-BLvD8XVS.mjs → baseBundle-DiYlHNG5.mjs}

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { i as darkAlternate, n as createTheme, r as baseTheme } from "./createTheme-DzLnsknT.mjs";
+import { i as darkAlternate, n as createTheme, r as baseTheme } from "./createTheme-C1r5nJco.mjs";
 
 //#region src/baseBundle.ts
 /**

package/dist/{createTheme-JOu16Shb.cjs → createTheme-BHGc1IFI.cjs}

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-const require_helpers = require('./helpers-C29fy-Ad.cjs');
+const require_helpers = require('./helpers-CIqeJ8yd.cjs');
 
 //#region src/baseTheme.ts
 /**
@@ -7,6 +7,33 @@ const require_helpers = require('./helpers-C29fy-Ad.cjs');
 *
 * System fonts, gray palette, and balanced proportions. Serves as the
 * canonical base that all other themes extend via `createTheme`.
+*
+* ## Theme brief
+*
+* Every value in this file is chosen so that the resolved bundle satisfies
+* this brief. Changes that contradict the brief belong in a different theme,
+* not in `baseTheme`.
+*
+* ```yaml
+* name: base
+* purpose: default built-in foundation for modern product UI
+* primaryPosture: productive
+* secondaryPosture: calm
+* densityProfile: balanced
+* readingMode: mixed
+* pointerProfile: hybrid
+* interactionRisk: medium
+* surfaceModel: lightly-layered
+* brandEnergy: quiet
+* accessibilityTarget: AA+
+* colorModeStrategy: dark-supported
+* platformBias: web
+* ```
+*
+* Intended feel: practical, calm, modern, trustworthy, easy to extend.
+* Avoided feel: flashy, ornamental, cramped, fragile, overly branded.
+*
+* @see /docs/website/docs/design/design-system/design-tokens/theme-authoring.md#recommended-base-theme-brief
 */
 var baseTheme = {
   core: {
@@ -1077,23 +1104,23 @@ var baseTheme = {
     spacing: {
       inset: {
         control: {
-          sm: "{core.spacing.2}",
-          md: "{core.spacing.3}",
-          lg: "{core.spacing.4}"
-        },
-        surface: {
           sm: "{core.spacing.3}",
           md: "{core.spacing.4}",
           lg: "{core.spacing.6}"
+        },
+        surface: {
+          sm: "{core.spacing.4}",
+          md: "{core.spacing.6}",
+          lg: "{core.spacing.8}"
         }
       },
       gap: {
         stack: {
           xs: "{core.spacing.2}",
-          sm: "{core.spacing.3}",
-          md: "{core.spacing.4}",
-          lg: "{core.spacing.6}",
-          xl: "{core.spacing.8}"
+          sm: "{core.spacing.4}",
+          md: "{core.spacing.6}",
+          lg: "{core.spacing.8}",
+          xl: "{core.spacing.12}"
         },
         inline: {
           xs: "{core.spacing.1}",
@@ -1104,12 +1131,12 @@ var baseTheme = {
         }
       },
       gutter: {
-        page: "clamp({core.spacing.4}, {core.spacing.6}, {core.spacing.12})",
-        section: "clamp({core.spacing.3}, {core.spacing.4}, {core.spacing.12})"
+        page: "clamp({core.spacing.6}, {core.spacing.12}, {core.spacing.16})",
+        section: "clamp({core.spacing.4}, {core.spacing.8}, {core.spacing.16})"
       },
       separation: {
         interactive: {
-          min: "clamp(8px, {core.spacing.2}, 12px)"
+          min: "clamp(8px, {core.spacing.3}, 16px)"
         }
       }
     },
@@ -1715,6 +1742,76 @@ var darkAlternate = {
   }
 };
 
+//#endregion
+//#region src/roots/validateRefs.ts
+/**
+* Compute the Levenshtein edit distance between two strings.
+* Used exclusively by `validateRefs` to power "did you mean?" suggestions.
+*/
+var levenshtein = (a, b) => {
+  const m = a.length;
+  const n = b.length;
+  const dp = Array.from({
+    length: m + 1
+  }, () => {
+    return Array.from({
+      length: n + 1
+    }, () => {
+      return 0;
+    });
+  });
+  for (let i = 0; i <= m; i++) dp[i][0] = i;
+  for (let j = 0; j <= n; j++) dp[0][j] = j;
+  for (let i = 1; i <= m; i++) for (let j = 1; j <= n; j++) dp[i][j] = a[i - 1] === b[j - 1] ? dp[i - 1][j - 1] : 1 + Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1]);
+  return dp[m][n];
+};
+/**
+* Validate that every `{ref}` in the merged theme points to an existing path.
+* Emits `console.warn` for each broken reference with a "did you mean?" suggestion.
+*
+* **DEV-only** — callers gate this behind `process.env.NODE_ENV !== 'production'`
+* so bundlers tree-shake the entire call in production builds.
+*/
+var validateRefs = theme => {
+  const {
+    core,
+    semantic
+  } = require_helpers.flattenTheme(theme);
+  const all = {
+    ...core,
+    ...semantic
+  };
+  const allKeys = Object.keys(all);
+  const findSuggestion = (refPath, candidates) => {
+    if (candidates.length === 0) return "";
+    let bestDist = Infinity;
+    let bestKey = "";
+    for (const candidate of candidates) {
+      const dist = levenshtein(refPath, candidate);
+      if (dist < bestDist) {
+        bestDist = dist;
+        bestKey = candidate;
+      }
+    }
+    if (bestDist <= Math.ceil(refPath.length * .4)) return `\n   Did you mean '{${bestKey}}'?`;
+    return "";
+  };
+  for (const [ownerKey, value] of Object.entries(all)) {
+    if (typeof value !== "string" || !value.includes("{")) continue;
+    let match;
+    const re = new RegExp(require_helpers.COMPOUND_REF_RE.source, require_helpers.COMPOUND_REF_RE.flags);
+    while ((match = re.exec(value)) !== null) {
+      const refPath = match[1];
+      if (all[refPath] !== void 0) continue;
+      const prefix = refPath.split(".")[0];
+      const suggestion = findSuggestion(refPath, allKeys.filter(k => {
+        return k.startsWith(prefix + ".");
+      }));
+      console.warn(`[fsl-theme] Invalid token reference '{${refPath}}' at path '${ownerKey}'.${suggestion}`);
+    }
+  }
+};
+
 //#endregion
 //#region src/createTheme.ts
 /**
@@ -1728,7 +1825,7 @@ var buildTheme = ({
   overrides = {}
 } = {}) => {
   const merged = require_helpers.deepMerge(base, overrides);
-  if (process.env.NODE_ENV !== "production") require_helpers.validateRefs(merged);
+  if (process.env.NODE_ENV !== "production") validateRefs(merged);
   return structuredClone(merged);
 };
 var resolveAlternate = (alternate, parentBundle) => {

package/dist/{createTheme-DzLnsknT.mjs → createTheme-C1r5nJco.mjs}

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { c as validateRefs, r as deepMerge } from "./helpers-CA4Qkxct.mjs";
+import { a as flattenTheme, r as deepMerge, t as COMPOUND_REF_RE } from "./helpers-Dz7NfNK6.mjs";
 
 //#region src/baseTheme.ts
 /**
@@ -7,6 +7,33 @@ import { c as validateRefs, r as deepMerge } from "./helpers-CA4Qkxct.mjs";
 *
 * System fonts, gray palette, and balanced proportions. Serves as the
 * canonical base that all other themes extend via `createTheme`.
+*
+* ## Theme brief
+*
+* Every value in this file is chosen so that the resolved bundle satisfies
+* this brief. Changes that contradict the brief belong in a different theme,
+* not in `baseTheme`.
+*
+* ```yaml
+* name: base
+* purpose: default built-in foundation for modern product UI
+* primaryPosture: productive
+* secondaryPosture: calm
+* densityProfile: balanced
+* readingMode: mixed
+* pointerProfile: hybrid
+* interactionRisk: medium
+* surfaceModel: lightly-layered
+* brandEnergy: quiet
+* accessibilityTarget: AA+
+* colorModeStrategy: dark-supported
+* platformBias: web
+* ```
+*
+* Intended feel: practical, calm, modern, trustworthy, easy to extend.
+* Avoided feel: flashy, ornamental, cramped, fragile, overly branded.
+*
+* @see /docs/website/docs/design/design-system/design-tokens/theme-authoring.md#recommended-base-theme-brief
 */
 var baseTheme = {
   core: {
@@ -1077,23 +1104,23 @@ var baseTheme = {
     spacing: {
       inset: {
         control: {
-          sm: "{core.spacing.2}",
-          md: "{core.spacing.3}",
-          lg: "{core.spacing.4}"
-        },
-        surface: {
           sm: "{core.spacing.3}",
           md: "{core.spacing.4}",
           lg: "{core.spacing.6}"
+        },
+        surface: {
+          sm: "{core.spacing.4}",
+          md: "{core.spacing.6}",
+          lg: "{core.spacing.8}"
         }
       },
       gap: {
         stack: {
           xs: "{core.spacing.2}",
-          sm: "{core.spacing.3}",
-          md: "{core.spacing.4}",
-          lg: "{core.spacing.6}",
-          xl: "{core.spacing.8}"
+          sm: "{core.spacing.4}",
+          md: "{core.spacing.6}",
+          lg: "{core.spacing.8}",
+          xl: "{core.spacing.12}"
         },
         inline: {
           xs: "{core.spacing.1}",
@@ -1104,12 +1131,12 @@ var baseTheme = {
         }
       },
       gutter: {
-        page: "clamp({core.spacing.4}, {core.spacing.6}, {core.spacing.12})",
-        section: "clamp({core.spacing.3}, {core.spacing.4}, {core.spacing.12})"
+        page: "clamp({core.spacing.6}, {core.spacing.12}, {core.spacing.16})",
+        section: "clamp({core.spacing.4}, {core.spacing.8}, {core.spacing.16})"
       },
       separation: {
         interactive: {
-          min: "clamp(8px, {core.spacing.2}, 12px)"
+          min: "clamp(8px, {core.spacing.3}, 16px)"
         }
       }
     },
@@ -1715,6 +1742,76 @@ var darkAlternate = {
   }
 };
 
+//#endregion
+//#region src/roots/validateRefs.ts
+/**
+* Compute the Levenshtein edit distance between two strings.
+* Used exclusively by `validateRefs` to power "did you mean?" suggestions.
+*/
+var levenshtein = (a, b) => {
+  const m = a.length;
+  const n = b.length;
+  const dp = Array.from({
+    length: m + 1
+  }, () => {
+    return Array.from({
+      length: n + 1
+    }, () => {
+      return 0;
+    });
+  });
+  for (let i = 0; i <= m; i++) dp[i][0] = i;
+  for (let j = 0; j <= n; j++) dp[0][j] = j;
+  for (let i = 1; i <= m; i++) for (let j = 1; j <= n; j++) dp[i][j] = a[i - 1] === b[j - 1] ? dp[i - 1][j - 1] : 1 + Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1]);
+  return dp[m][n];
+};
+/**
+* Validate that every `{ref}` in the merged theme points to an existing path.
+* Emits `console.warn` for each broken reference with a "did you mean?" suggestion.
+*
+* **DEV-only** — callers gate this behind `process.env.NODE_ENV !== 'production'`
+* so bundlers tree-shake the entire call in production builds.
+*/
+var validateRefs = theme => {
+  const {
+    core,
+    semantic
+  } = flattenTheme(theme);
+  const all = {
+    ...core,
+    ...semantic
+  };
+  const allKeys = Object.keys(all);
+  const findSuggestion = (refPath, candidates) => {
+    if (candidates.length === 0) return "";
+    let bestDist = Infinity;
+    let bestKey = "";
+    for (const candidate of candidates) {
+      const dist = levenshtein(refPath, candidate);
+      if (dist < bestDist) {
+        bestDist = dist;
+        bestKey = candidate;
+      }
+    }
+    if (bestDist <= Math.ceil(refPath.length * .4)) return `\n   Did you mean '{${bestKey}}'?`;
+    return "";
+  };
+  for (const [ownerKey, value] of Object.entries(all)) {
+    if (typeof value !== "string" || !value.includes("{")) continue;
+    let match;
+    const re = new RegExp(COMPOUND_REF_RE.source, COMPOUND_REF_RE.flags);
+    while ((match = re.exec(value)) !== null) {
+      const refPath = match[1];
+      if (all[refPath] !== void 0) continue;
+      const prefix = refPath.split(".")[0];
+      const suggestion = findSuggestion(refPath, allKeys.filter(k => {
+        return k.startsWith(prefix + ".");
+      }));
+      console.warn(`[fsl-theme] Invalid token reference '{${refPath}}' at path '${ownerKey}'.${suggestion}`);
+    }
+  }
+};
+
 //#endregion
 //#region src/createTheme.ts
 /**

package/dist/css.cjs

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, {
   value: 'Module'
 });
-const require_helpers = require('./helpers-C29fy-Ad.cjs');
-const require_toCssVars = require('./toCssVars-CUiqx2kh.cjs');
+const require_helpers = require('./helpers-CIqeJ8yd.cjs');
+const require_toCssVars = require('./toCssVars-DDowz4wU.cjs');
 
 //#region src/css.ts
 /**

package/dist/css.mjs

@@ -1,6 +1,6 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { s as toFlatTokens } from "./helpers-CA4Qkxct.mjs";
-import { n as toCssVars, t as toCssVarName } from "./toCssVars-BHRiSykR.mjs";
+import { s as toFlatTokens } from "./helpers-Dz7NfNK6.mjs";
+import { n as toCssVars, t as toCssVarName } from "./toCssVars-CeckLjW1.mjs";
 
 //#region src/css.ts
 /**

package/dist/dataviz/index.cjs

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, {
   value: 'Module'
 });
-const require_react = require('../react-CoWIQYx_.cjs');
-const require_withDataviz = require('../withDataviz-BlJcYhcw.cjs');
+const require_react = require('../react-BKLEzIN8.cjs');
+const require_withDataviz = require('../withDataviz-BzZwFV2e.cjs');
 
 //#region src/dataviz/useDatavizTokens.ts
 /**

package/dist/dataviz/index.mjs

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { n as coreDataviz, r as semanticDataviz, t as withDataviz } from "../withDataviz-DYV1S_xr.mjs";
+import { n as coreDataviz, r as semanticDataviz, t as withDataviz } from "../withDataviz-CrgXLR5A.mjs";
 import { useTokens } from "../react.mjs";
 
 //#region src/dataviz/useDatavizTokens.ts

package/dist/dtcg.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, {
   value: 'Module'
 });
-const require_helpers = require('./helpers-C29fy-Ad.cjs');
+const require_helpers = require('./helpers-CIqeJ8yd.cjs');
 const require_tokenRegistry = require('./tokenRegistry-B9zMRjpL.cjs');
 
 //#region src/roots/toDTCG.ts

package/dist/dtcg.mjs

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { s as toFlatTokens } from "./helpers-CA4Qkxct.mjs";
+import { s as toFlatTokens } from "./helpers-Dz7NfNK6.mjs";
 import { n as DTCG_TYPE_PREFIXES } from "./tokenRegistry-DolhB5Vf.mjs";
 
 //#region src/roots/toDTCG.ts

package/dist/{helpers-C29fy-Ad.cjs → helpers-CIqeJ8yd.cjs}

@@ -69,73 +69,6 @@ var flattenTheme = theme => {
   };
 };
 /**
-* Compute the Levenshtein edit distance between two strings.
-* Used exclusively by `validateRefs` to power "did you mean?" suggestions.
-*/
-var levenshtein = (a, b) => {
-  const m = a.length;
-  const n = b.length;
-  const dp = Array.from({
-    length: m + 1
-  }, () => {
-    return Array.from({
-      length: n + 1
-    }, () => {
-      return 0;
-    });
-  });
-  for (let i = 0; i <= m; i++) dp[i][0] = i;
-  for (let j = 0; j <= n; j++) dp[0][j] = j;
-  for (let i = 1; i <= m; i++) for (let j = 1; j <= n; j++) dp[i][j] = a[i - 1] === b[j - 1] ? dp[i - 1][j - 1] : 1 + Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1]);
-  return dp[m][n];
-};
-/**
-* Validate that every `{ref}` in the merged theme points to an existing path.
-* Emits `console.warn` for each broken reference with a "did you mean?" suggestion.
-*
-* **DEV-only** — callers gate this behind `process.env.NODE_ENV !== 'production'`
-* so bundlers tree-shake the entire call in production builds.
-*/
-var validateRefs = theme => {
-  const {
-    core,
-    semantic
-  } = flattenTheme(theme);
-  const all = {
-    ...core,
-    ...semantic
-  };
-  const allKeys = Object.keys(all);
-  const findSuggestion = (refPath, candidates) => {
-    if (candidates.length === 0) return "";
-    let bestDist = Infinity;
-    let bestKey = "";
-    for (const candidate of candidates) {
-      const dist = levenshtein(refPath, candidate);
-      if (dist < bestDist) {
-        bestDist = dist;
-        bestKey = candidate;
-      }
-    }
-    if (bestDist <= Math.ceil(refPath.length * .4)) return `\n   Did you mean '{${bestKey}}'?`;
-    return "";
-  };
-  for (const [ownerKey, value] of Object.entries(all)) {
-    if (typeof value !== "string" || !value.includes("{")) continue;
-    let match;
-    const re = new RegExp(COMPOUND_REF_RE.source, COMPOUND_REF_RE.flags);
-    while ((match = re.exec(value)) !== null) {
-      const refPath = match[1];
-      if (all[refPath] !== void 0) continue;
-      const prefix = refPath.split(".")[0];
-      const suggestion = findSuggestion(refPath, allKeys.filter(k => {
-        return k.startsWith(prefix + ".");
-      }));
-      console.warn(`[fsl-theme] Invalid token reference '{${refPath}}' at path '${ownerKey}'.${suggestion}`);
-    }
-  }
-};
-/**
 * Flatten a `ThemeTokens` into a `Record<string, string | number>` with
 * every `{ref}` recursively resolved to its final raw value where possible.
 *
@@ -249,10 +182,4 @@ Object.defineProperty(exports, 'toFlatTokens', {
   get: function () {
     return toFlatTokens;
   }
-});
-Object.defineProperty(exports, 'validateRefs', {
-  enumerable: true,
-  get: function () {
-    return validateRefs;
-  }
 });

package/dist/{helpers-CA4Qkxct.mjs → helpers-Dz7NfNK6.mjs}

@@ -69,73 +69,6 @@ var flattenTheme = theme => {
   };
 };
 /**
-* Compute the Levenshtein edit distance between two strings.
-* Used exclusively by `validateRefs` to power "did you mean?" suggestions.
-*/
-var levenshtein = (a, b) => {
-  const m = a.length;
-  const n = b.length;
-  const dp = Array.from({
-    length: m + 1
-  }, () => {
-    return Array.from({
-      length: n + 1
-    }, () => {
-      return 0;
-    });
-  });
-  for (let i = 0; i <= m; i++) dp[i][0] = i;
-  for (let j = 0; j <= n; j++) dp[0][j] = j;
-  for (let i = 1; i <= m; i++) for (let j = 1; j <= n; j++) dp[i][j] = a[i - 1] === b[j - 1] ? dp[i - 1][j - 1] : 1 + Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1]);
-  return dp[m][n];
-};
-/**
-* Validate that every `{ref}` in the merged theme points to an existing path.
-* Emits `console.warn` for each broken reference with a "did you mean?" suggestion.
-*
-* **DEV-only** — callers gate this behind `process.env.NODE_ENV !== 'production'`
-* so bundlers tree-shake the entire call in production builds.
-*/
-var validateRefs = theme => {
-  const {
-    core,
-    semantic
-  } = flattenTheme(theme);
-  const all = {
-    ...core,
-    ...semantic
-  };
-  const allKeys = Object.keys(all);
-  const findSuggestion = (refPath, candidates) => {
-    if (candidates.length === 0) return "";
-    let bestDist = Infinity;
-    let bestKey = "";
-    for (const candidate of candidates) {
-      const dist = levenshtein(refPath, candidate);
-      if (dist < bestDist) {
-        bestDist = dist;
-        bestKey = candidate;
-      }
-    }
-    if (bestDist <= Math.ceil(refPath.length * .4)) return `\n   Did you mean '{${bestKey}}'?`;
-    return "";
-  };
-  for (const [ownerKey, value] of Object.entries(all)) {
-    if (typeof value !== "string" || !value.includes("{")) continue;
-    let match;
-    const re = new RegExp(COMPOUND_REF_RE.source, COMPOUND_REF_RE.flags);
-    while ((match = re.exec(value)) !== null) {
-      const refPath = match[1];
-      if (all[refPath] !== void 0) continue;
-      const prefix = refPath.split(".")[0];
-      const suggestion = findSuggestion(refPath, allKeys.filter(k => {
-        return k.startsWith(prefix + ".");
-      }));
-      console.warn(`[fsl-theme] Invalid token reference '{${refPath}}' at path '${ownerKey}'.${suggestion}`);
-    }
-  }
-};
-/**
 * Flatten a `ThemeTokens` into a `Record<string, string | number>` with
 * every `{ref}` recursively resolved to its final raw value where possible.
 *
@@ -208,4 +141,4 @@ var toFlatTokens = (theme, options = {}) => {
 };
 
 //#endregion
-export { flattenTheme as a, validateRefs as c, flattenObject as i, SAFE_ID_RE as n, isPlainObject as o, deepMerge as r, toFlatTokens as s, COMPOUND_REF_RE as t };
+export { flattenTheme as a, flattenObject as i, SAFE_ID_RE as n, isPlainObject as o, deepMerge as r, toFlatTokens as s, COMPOUND_REF_RE as t };

package/dist/{index-nJrjI0BA.d.mts → index-BuszkWMy.d.mts}

@@ -6,6 +6,33 @@ import { a as DeepPartial, i as ThemeTokens, r as ThemeBundle, t as ModeOverride
  *
  * System fonts, gray palette, and balanced proportions. Serves as the
  * canonical base that all other themes extend via `createTheme`.
+ *
+ * ## Theme brief
+ *
+ * Every value in this file is chosen so that the resolved bundle satisfies
+ * this brief. Changes that contradict the brief belong in a different theme,
+ * not in `baseTheme`.
+ *
+ * ```yaml
+ * name: base
+ * purpose: default built-in foundation for modern product UI
+ * primaryPosture: productive
+ * secondaryPosture: calm
+ * densityProfile: balanced
+ * readingMode: mixed
+ * pointerProfile: hybrid
+ * interactionRisk: medium
+ * surfaceModel: lightly-layered
+ * brandEnergy: quiet
+ * accessibilityTarget: AA+
+ * colorModeStrategy: dark-supported
+ * platformBias: web
+ * ```
+ *
+ * Intended feel: practical, calm, modern, trustworthy, easy to extend.
+ * Avoided feel: flashy, ornamental, cramped, fragile, overly branded.
+ *
+ * @see /docs/website/docs/design/design-system/design-tokens/theme-authoring.md#recommended-base-theme-brief
  */
 declare const baseTheme: ThemeTokens;
 declare const darkAlternate: ModeOverride;

package/dist/{index-CsIjfw86.d.cts → index-Djro6G4e.d.cts}

@@ -6,6 +6,33 @@ import { a as DeepPartial, i as ThemeTokens, r as ThemeBundle, t as ModeOverride
  *
  * System fonts, gray palette, and balanced proportions. Serves as the
  * canonical base that all other themes extend via `createTheme`.
+ *
+ * ## Theme brief
+ *
+ * Every value in this file is chosen so that the resolved bundle satisfies
+ * this brief. Changes that contradict the brief belong in a different theme,
+ * not in `baseTheme`.
+ *
+ * ```yaml
+ * name: base
+ * purpose: default built-in foundation for modern product UI
+ * primaryPosture: productive
+ * secondaryPosture: calm
+ * densityProfile: balanced
+ * readingMode: mixed
+ * pointerProfile: hybrid
+ * interactionRisk: medium
+ * surfaceModel: lightly-layered
+ * brandEnergy: quiet
+ * accessibilityTarget: AA+
+ * colorModeStrategy: dark-supported
+ * platformBias: web
+ * ```
+ *
+ * Intended feel: practical, calm, modern, trustworthy, easy to extend.
+ * Avoided feel: flashy, ornamental, cramped, fragile, overly branded.
+ *
+ * @see /docs/website/docs/design/design-system/design-tokens/theme-authoring.md#recommended-base-theme-brief
  */
 declare const baseTheme: ThemeTokens;
 declare const darkAlternate: ModeOverride;

package/dist/index.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, {
   value: 'Module'
 });
-const require_createTheme = require('./createTheme-JOu16Shb.cjs');
+const require_createTheme = require('./createTheme-BHGc1IFI.cjs');
 const require_themes_bruttal = require('./themes/bruttal.cjs');
 const require_themes_corporate = require('./themes/corporate.cjs');
 const require_themes_oca = require('./themes/oca.cjs');

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 
 import { a as DeepPartial, i as ThemeTokens, n as SemanticTokens, r as ThemeBundle, t as ModeOverride } from "./Types-BiBa17RL.cjs";
-import { a as createTheme, i as bruttal, n as oca, o as baseTheme, r as corporate, s as darkAlternate, t as ventures } from "./index-CsIjfw86.cjs";
+import { a as createTheme, i as bruttal, n as oca, o as baseTheme, r as corporate, s as darkAlternate, t as ventures } from "./index-Djro6G4e.cjs";
 import { o as ThemeMode } from "./ssrScript-BVysxDws.cjs";
-import { c as ThemeStylesProps, n as ThemeHeadProps } from "./react-CGa6FlNL.cjs";
+import { c as ThemeStylesProps, n as ThemeHeadProps } from "./react-BXqSYnmk.cjs";
 export { type DeepPartial, type ModeOverride, type SemanticTokens, type ThemeBundle, type ThemeHeadProps, type ThemeMode, type ThemeStylesProps, type ThemeTokens, baseTheme, bruttal, corporate, createTheme, darkAlternate, oca, ventures };

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 
 import { a as DeepPartial, i as ThemeTokens, n as SemanticTokens, r as ThemeBundle, t as ModeOverride } from "./Types-BiBa17RL.mjs";
-import { a as createTheme, i as bruttal, n as oca, o as baseTheme, r as corporate, s as darkAlternate, t as ventures } from "./index-nJrjI0BA.mjs";
+import { a as createTheme, i as bruttal, n as oca, o as baseTheme, r as corporate, s as darkAlternate, t as ventures } from "./index-BuszkWMy.mjs";
 import { o as ThemeMode } from "./ssrScript-BVysxDws.mjs";
-import { c as ThemeStylesProps, n as ThemeHeadProps } from "./react-DnKxR2gK.mjs";
+import { c as ThemeStylesProps, n as ThemeHeadProps } from "./react-D2J482kx.mjs";
 export { type DeepPartial, type ModeOverride, type SemanticTokens, type ThemeBundle, type ThemeHeadProps, type ThemeMode, type ThemeStylesProps, type ThemeTokens, baseTheme, bruttal, corporate, createTheme, darkAlternate, oca, ventures };

package/dist/index.mjs

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { i as darkAlternate, n as createTheme, r as baseTheme } from "./createTheme-DzLnsknT.mjs";
+import { i as darkAlternate, n as createTheme, r as baseTheme } from "./createTheme-C1r5nJco.mjs";
 import { bruttal } from "./themes/bruttal.mjs";
 import { corporate } from "./themes/corporate.mjs";
 import { oca } from "./themes/oca.mjs";

package/dist/{react-CoWIQYx_.cjs → react-BKLEzIN8.cjs}

@@ -26,9 +26,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 }) : target, mod));
 
 //#endregion
-const require_helpers = require('./helpers-C29fy-Ad.cjs');
+const require_helpers = require('./helpers-CIqeJ8yd.cjs');
 const require_css = require('./css.cjs');
-const require_ssrScript = require('./ssrScript-DOpLExaG.cjs');
+const require_ssrScript = require('./ssrScript-D3mYscp1.cjs');
 let react = require("react");
 react = __toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -393,6 +393,12 @@ var ThemeStyles = ({
 * Use in SSR frameworks (Next.js, Remix) where you need explicit `<head>`
 * injection. In CSR apps, `<ThemeProvider theme={...}>` handles everything.
 *
+* **`storageKey` invariant:** `ThemeHead` forwards `storageKey` to `ThemeScript`,
+* which reads localStorage before the first paint. `ThemeProvider` reads the
+* same key at runtime. If you pass a custom `storageKey`, pass the **same value**
+* to both `<ThemeHead>` and `<ThemeProvider>` — a mismatch causes a theme flash
+* exactly in the scenario this component was designed to prevent.
+*
 * @example
 * ```tsx
 * // Next.js app/layout.tsx
@@ -414,6 +420,14 @@ var ThemeStyles = ({
 *   );
 * }
 * ```
+*
+* @example
+* ```tsx
+* // Custom storageKey — must be identical on both sides
+* <ThemeHead theme={myTheme} storageKey="my-app-theme" />
+* // ...
+* <ThemeProvider theme={myTheme} storageKey="my-app-theme">{children}</ThemeProvider>
+* ```
 */
 var ThemeHead = ({
   theme,

package/dist/{react-CGa6FlNL.d.cts → react-BXqSYnmk.d.cts}

@@ -47,6 +47,21 @@ interface ThemeProviderProps {
    * `resolvedMode` (actual: `'light' | 'dark'`), covering all integration
    * needs in one callback.
    *
+   * **System mode:** when `mode` is `'system'`, this callback fires whenever
+   * the OS `prefers-color-scheme` changes (e.g. automatic dark mode at sunset)
+   * — without any user interaction. Avoid side-effects that should only happen
+   * on explicit user action (e.g. API calls, toast notifications):
+   *
+   * ```tsx
+   * onModeChange={(mode, resolvedMode) => {
+   *   // ✓ safe for system-triggered changes
+   *   analytics.track('modeChanged', { mode, resolvedMode });
+   *
+   *   // ✗ guard explicit user actions
+   *   if (mode !== 'system') showToast('Theme updated');
+   * }}
+   * ```
+   *
    * @example
    * ```tsx
    * <ThemeProvider
@@ -337,6 +352,12 @@ interface ThemeHeadProps extends ThemeStylesProps {
  * Use in SSR frameworks (Next.js, Remix) where you need explicit `<head>`
  * injection. In CSR apps, `<ThemeProvider theme={...}>` handles everything.
  *
+ * **`storageKey` invariant:** `ThemeHead` forwards `storageKey` to `ThemeScript`,
+ * which reads localStorage before the first paint. `ThemeProvider` reads the
+ * same key at runtime. If you pass a custom `storageKey`, pass the **same value**
+ * to both `<ThemeHead>` and `<ThemeProvider>` — a mismatch causes a theme flash
+ * exactly in the scenario this component was designed to prevent.
+ *
  * @example
  * ```tsx
  * // Next.js app/layout.tsx
@@ -358,6 +379,14 @@ interface ThemeHeadProps extends ThemeStylesProps {
  *   );
  * }
  * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom storageKey — must be identical on both sides
+ * <ThemeHead theme={myTheme} storageKey="my-app-theme" />
+ * // ...
+ * <ThemeProvider theme={myTheme} storageKey="my-app-theme">{children}</ThemeProvider>
+ * ```
  */
 declare const ThemeHead: ({
   theme,

package/dist/{react-DnKxR2gK.d.mts → react-D2J482kx.d.mts}

@@ -47,6 +47,21 @@ interface ThemeProviderProps {
    * `resolvedMode` (actual: `'light' | 'dark'`), covering all integration
    * needs in one callback.
    *
+   * **System mode:** when `mode` is `'system'`, this callback fires whenever
+   * the OS `prefers-color-scheme` changes (e.g. automatic dark mode at sunset)
+   * — without any user interaction. Avoid side-effects that should only happen
+   * on explicit user action (e.g. API calls, toast notifications):
+   *
+   * ```tsx
+   * onModeChange={(mode, resolvedMode) => {
+   *   // ✓ safe for system-triggered changes
+   *   analytics.track('modeChanged', { mode, resolvedMode });
+   *
+   *   // ✗ guard explicit user actions
+   *   if (mode !== 'system') showToast('Theme updated');
+   * }}
+   * ```
+   *
    * @example
    * ```tsx
    * <ThemeProvider
@@ -337,6 +352,12 @@ interface ThemeHeadProps extends ThemeStylesProps {
  * Use in SSR frameworks (Next.js, Remix) where you need explicit `<head>`
  * injection. In CSR apps, `<ThemeProvider theme={...}>` handles everything.
  *
+ * **`storageKey` invariant:** `ThemeHead` forwards `storageKey` to `ThemeScript`,
+ * which reads localStorage before the first paint. `ThemeProvider` reads the
+ * same key at runtime. If you pass a custom `storageKey`, pass the **same value**
+ * to both `<ThemeHead>` and `<ThemeProvider>` — a mismatch causes a theme flash
+ * exactly in the scenario this component was designed to prevent.
+ *
  * @example
  * ```tsx
  * // Next.js app/layout.tsx
@@ -358,6 +379,14 @@ interface ThemeHeadProps extends ThemeStylesProps {
  *   );
  * }
  * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom storageKey — must be identical on both sides
+ * <ThemeHead theme={myTheme} storageKey="my-app-theme" />
+ * // ...
+ * <ThemeProvider theme={myTheme} storageKey="my-app-theme">{children}</ThemeProvider>
+ * ```
  */
 declare const ThemeHead: ({
   theme,

package/dist/react.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, {
   value: 'Module'
 });
-const require_react = require('./react-CoWIQYx_.cjs');
+const require_react = require('./react-BKLEzIN8.cjs');
 exports.ThemeHead = require_react.ThemeHead;
 exports.ThemeProvider = require_react.ThemeProvider;
 exports.ThemeScript = require_react.ThemeScript;

package/dist/react.d.cts

@@ -1,4 +1,4 @@
 
 import { a as ResolvedMode, o as ThemeMode } from "./ssrScript-BVysxDws.cjs";
-import { a as ThemeScript, c as ThemeStylesProps, d as useResolvedTokens, f as useTokens, i as ThemeProviderProps, l as UseColorModeResult, n as ThemeHeadProps, o as ThemeScriptProps, r as ThemeProvider, s as ThemeStyles, t as ThemeHead, u as useColorMode } from "./react-CGa6FlNL.cjs";
+import { a as ThemeScript, c as ThemeStylesProps, d as useResolvedTokens, f as useTokens, i as ThemeProviderProps, l as UseColorModeResult, n as ThemeHeadProps, o as ThemeScriptProps, r as ThemeProvider, s as ThemeStyles, t as ThemeHead, u as useColorMode } from "./react-BXqSYnmk.cjs";
 export { type ResolvedMode, ThemeHead, ThemeHeadProps, type ThemeMode, ThemeProvider, ThemeProviderProps, ThemeScript, ThemeScriptProps, ThemeStyles, ThemeStylesProps, UseColorModeResult, useColorMode, useResolvedTokens, useTokens };

package/dist/react.d.mts

@@ -1,4 +1,4 @@
 
 import { a as ResolvedMode, o as ThemeMode } from "./ssrScript-BVysxDws.mjs";
-import { a as ThemeScript, c as ThemeStylesProps, d as useResolvedTokens, f as useTokens, i as ThemeProviderProps, l as UseColorModeResult, n as ThemeHeadProps, o as ThemeScriptProps, r as ThemeProvider, s as ThemeStyles, t as ThemeHead, u as useColorMode } from "./react-DnKxR2gK.mjs";
+import { a as ThemeScript, c as ThemeStylesProps, d as useResolvedTokens, f as useTokens, i as ThemeProviderProps, l as UseColorModeResult, n as ThemeHeadProps, o as ThemeScriptProps, r as ThemeProvider, s as ThemeStyles, t as ThemeHead, u as useColorMode } from "./react-D2J482kx.mjs";
 export { type ResolvedMode, ThemeHead, ThemeHeadProps, type ThemeMode, ThemeProvider, ThemeProviderProps, ThemeScript, ThemeScriptProps, ThemeStyles, ThemeStylesProps, UseColorModeResult, useColorMode, useResolvedTokens, useTokens };

package/dist/react.mjs

@@ -1,7 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { r as deepMerge, s as toFlatTokens } from "./helpers-CA4Qkxct.mjs";
+import { r as deepMerge, s as toFlatTokens } from "./helpers-Dz7NfNK6.mjs";
 import { getThemeStylesContent } from "./css.mjs";
-import { i as createThemeRuntime, t as getThemeScriptContent } from "./ssrScript-CoRE6jjq.mjs";
+import { i as createThemeRuntime, t as getThemeScriptContent } from "./ssrScript-DfmopH-w.mjs";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
@@ -365,6 +365,12 @@ var ThemeStyles = ({
 * Use in SSR frameworks (Next.js, Remix) where you need explicit `<head>`
 * injection. In CSR apps, `<ThemeProvider theme={...}>` handles everything.
 *
+* **`storageKey` invariant:** `ThemeHead` forwards `storageKey` to `ThemeScript`,
+* which reads localStorage before the first paint. `ThemeProvider` reads the
+* same key at runtime. If you pass a custom `storageKey`, pass the **same value**
+* to both `<ThemeHead>` and `<ThemeProvider>` — a mismatch causes a theme flash
+* exactly in the scenario this component was designed to prevent.
+*
 * @example
 * ```tsx
 * // Next.js app/layout.tsx
@@ -386,6 +392,14 @@ var ThemeStyles = ({
 *   );
 * }
 * ```
+*
+* @example
+* ```tsx
+* // Custom storageKey — must be identical on both sides
+* <ThemeHead theme={myTheme} storageKey="my-app-theme" />
+* // ...
+* <ThemeProvider theme={myTheme} storageKey="my-app-theme">{children}</ThemeProvider>
+* ```
 */
 var ThemeHead = ({
   theme,

package/dist/runtime-entry.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, {
   value: 'Module'
 });
-const require_ssrScript = require('./ssrScript-DOpLExaG.cjs');
+const require_ssrScript = require('./ssrScript-D3mYscp1.cjs');
 exports.DATA_MODE_ATTR = require_ssrScript.DATA_MODE_ATTR;
 exports.DATA_THEME_ATTR = require_ssrScript.DATA_THEME_ATTR;
 exports.createThemeRuntime = require_ssrScript.createThemeRuntime;

package/dist/runtime-entry.mjs

@@ -1,3 +1,3 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { i as createThemeRuntime, n as DATA_MODE_ATTR, r as DATA_THEME_ATTR, t as getThemeScriptContent } from "./ssrScript-CoRE6jjq.mjs";
+import { i as createThemeRuntime, n as DATA_MODE_ATTR, r as DATA_THEME_ATTR, t as getThemeScriptContent } from "./ssrScript-DfmopH-w.mjs";
 export { DATA_MODE_ATTR, DATA_THEME_ATTR, createThemeRuntime, getThemeScriptContent };

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

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-const require_helpers = require('./helpers-C29fy-Ad.cjs');
+const require_helpers = require('./helpers-CIqeJ8yd.cjs');
 
 //#region src/themeBootstrap.ts
 /**
@@ -96,6 +96,7 @@ var createThemeRuntime = (config = {}) => {
   };
   const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
   const onSystemChange = () => {
+    if (destroyed) return;
     resolvedMode = mediaQuery.matches ? "dark" : "light";
     applyState({
       persist: false

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

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { n as SAFE_ID_RE } from "./helpers-CA4Qkxct.mjs";
+import { n as SAFE_ID_RE } from "./helpers-Dz7NfNK6.mjs";
 
 //#region src/themeBootstrap.ts
 /**
@@ -96,6 +96,7 @@ var createThemeRuntime = (config = {}) => {
   };
   const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
   const onSystemChange = () => {
+    if (destroyed) return;
     resolvedMode = mediaQuery.matches ? "dark" : "light";
     applyState({
       persist: false

package/dist/themes/bruttal.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, {
   value: 'Module'
 });
-const require_createTheme = require('../createTheme-JOu16Shb.cjs');
-const require_helpers = require('../helpers-C29fy-Ad.cjs');
-const require_withDataviz = require('../withDataviz-BlJcYhcw.cjs');
+const require_createTheme = require('../createTheme-BHGc1IFI.cjs');
+const require_helpers = require('../helpers-CIqeJ8yd.cjs');
+const require_withDataviz = require('../withDataviz-BzZwFV2e.cjs');
 
 //#region src/themes/bruttal.ts
 /**

package/dist/themes/bruttal.d.cts

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

package/dist/themes/bruttal.d.mts

@@ -1,3 +1,3 @@
 
-import { i as bruttal } from "../index-nJrjI0BA.mjs";
+import { i as bruttal } from "../index-BuszkWMy.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-DzLnsknT.mjs";
-import { r as deepMerge } from "../helpers-CA4Qkxct.mjs";
-import { t as withDataviz } from "../withDataviz-DYV1S_xr.mjs";
+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";
 
 //#region src/themes/bruttal.ts
 /**

package/dist/themes/corporate.cjs

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, {
   value: 'Module'
 });
-const require_createTheme = require('../createTheme-JOu16Shb.cjs');
-const require_withDataviz = require('../withDataviz-BlJcYhcw.cjs');
+const require_createTheme = require('../createTheme-BHGc1IFI.cjs');
+const require_withDataviz = require('../withDataviz-BzZwFV2e.cjs');
 
 //#region src/themes/corporate.ts
 var bundle = require_createTheme.createTheme({

package/dist/themes/corporate.d.cts

@@ -1,3 +1,3 @@
 
-import { r as corporate } from "../index-CsIjfw86.cjs";
+import { r as corporate } from "../index-Djro6G4e.cjs";
 export { corporate };

package/dist/themes/corporate.d.mts

@@ -1,3 +1,3 @@
 
-import { r as corporate } from "../index-nJrjI0BA.mjs";
+import { r as corporate } from "../index-BuszkWMy.mjs";
 export { corporate };

package/dist/themes/corporate.mjs

@@ -1,6 +1,6 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { n as createTheme } from "../createTheme-DzLnsknT.mjs";
-import { t as withDataviz } from "../withDataviz-DYV1S_xr.mjs";
+import { n as createTheme } from "../createTheme-C1r5nJco.mjs";
+import { t as withDataviz } from "../withDataviz-CrgXLR5A.mjs";
 
 //#region src/themes/corporate.ts
 var bundle = createTheme({

package/dist/themes/oca.cjs

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, {
   value: 'Module'
 });
-const require_createTheme = require('../createTheme-JOu16Shb.cjs');
-const require_withDataviz = require('../withDataviz-BlJcYhcw.cjs');
+const require_createTheme = require('../createTheme-BHGc1IFI.cjs');
+const require_withDataviz = require('../withDataviz-BzZwFV2e.cjs');
 
 //#region src/themes/oca.ts
 var bundle = require_createTheme.createTheme({

package/dist/themes/oca.d.cts

@@ -1,3 +1,3 @@
 
-import { n as oca } from "../index-CsIjfw86.cjs";
+import { n as oca } from "../index-Djro6G4e.cjs";
 export { oca };

package/dist/themes/oca.d.mts

@@ -1,3 +1,3 @@
 
-import { n as oca } from "../index-nJrjI0BA.mjs";
+import { n as oca } from "../index-BuszkWMy.mjs";
 export { oca };

package/dist/themes/oca.mjs

@@ -1,6 +1,6 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { n as createTheme } from "../createTheme-DzLnsknT.mjs";
-import { t as withDataviz } from "../withDataviz-DYV1S_xr.mjs";
+import { n as createTheme } from "../createTheme-C1r5nJco.mjs";
+import { t as withDataviz } from "../withDataviz-CrgXLR5A.mjs";
 
 //#region src/themes/oca.ts
 var bundle = createTheme({

package/dist/themes/ventures.cjs

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, {
   value: 'Module'
 });
-const require_createTheme = require('../createTheme-JOu16Shb.cjs');
-const require_withDataviz = require('../withDataviz-BlJcYhcw.cjs');
+const require_createTheme = require('../createTheme-BHGc1IFI.cjs');
+const require_withDataviz = require('../withDataviz-BzZwFV2e.cjs');
 
 //#region src/themes/ventures.ts
 var bundle = require_createTheme.createTheme({

package/dist/themes/ventures.d.cts

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

package/dist/themes/ventures.d.mts

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

package/dist/themes/ventures.mjs

@@ -1,6 +1,6 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { n as createTheme } from "../createTheme-DzLnsknT.mjs";
-import { t as withDataviz } from "../withDataviz-DYV1S_xr.mjs";
+import { n as createTheme } from "../createTheme-C1r5nJco.mjs";
+import { t as withDataviz } from "../withDataviz-CrgXLR5A.mjs";
 
 //#region src/themes/ventures.ts
 var bundle = createTheme({

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

@@ -1,5 +1,5 @@
 /** 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-CA4Qkxct.mjs";
+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";
 
 //#region src/roots/toCssVars.ts

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

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-const require_helpers = require('./helpers-C29fy-Ad.cjs');
+const require_helpers = require('./helpers-CIqeJ8yd.cjs');
 const require_tokenRegistry = require('./tokenRegistry-B9zMRjpL.cjs');
 
 //#region src/roots/toCssVars.ts

package/dist/vars.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, {
   value: 'Module'
 });
-const require_helpers = require('./helpers-C29fy-Ad.cjs');
-const require_baseBundle = require('./baseBundle-BXvPJYzj.cjs');
-const require_toCssVars = require('./toCssVars-CUiqx2kh.cjs');
+const require_helpers = require('./helpers-CIqeJ8yd.cjs');
+const require_baseBundle = require('./baseBundle-BWbICg4p.cjs');
+const require_toCssVars = require('./toCssVars-DDowz4wU.cjs');
 
 //#region src/roots/toVars.ts
 /**

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-CA4Qkxct.mjs";
-import { t as baseBundle } from "./baseBundle-BLvD8XVS.mjs";
-import { t as toCssVarName } from "./toCssVars-BHRiSykR.mjs";
+import { o as isPlainObject } from "./helpers-Dz7NfNK6.mjs";
+import { t as baseBundle } from "./baseBundle-DiYlHNG5.mjs";
+import { t as toCssVarName } from "./toCssVars-CeckLjW1.mjs";
 
 //#region src/roots/toVars.ts
 /**

package/dist/{withDataviz-BlJcYhcw.cjs → withDataviz-BzZwFV2e.cjs}

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

package/dist/{withDataviz-DYV1S_xr.mjs → withDataviz-CrgXLR5A.mjs}

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

package/llms.txt

@@ -728,4 +728,4 @@ Cross-token semantic correctness (the rules above) is **not** statically validat
 - README — full grammar tables, usage examples per import path
 - `dist/Types-*.d.ts` — every token has co-located JSDoc with semantics + anti-pattern notes
 - `src/themes/{bruttal,corporate,oca,ventures}.ts` — worked customization patterns
-- Family specs (full grammar, decision matrices, ADRs): `docs/design/01-design-system/02-design-tokens/02-families/{family}.md` in the ttoss monorepo
+- Family specs (full grammar, decision matrices, ADRs): `docs/design/design-system/design-tokens/families/{family}.md` in the ttoss monorepo

package/package.json

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