@ttoss/fsl-theme 2.1.1 → 2.1.2

package/dist/css.mjs

@@ -1,43 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import { s as toFlatTokens } from "./helpers-BXaKe2s3.mjs";
-import { n as toCssVars, t as toCssVarName } from "./toCssVars-CWTlp9St.mjs";
-
-//#region src/css.ts
-/**
-* Returns the full CSS string for a theme bundle — all `--tt-*` custom
-* properties, coarse-pointer overrides, reduced-motion overrides, and
-* container query progressive enhancement — ready to inject into a
-* `<style>` tag or serve as a static `.css` file.
-*
-* Symmetric counterpart to `getThemeScriptContent()` for CSS.
-* Use `<ThemeStyles>` from `@ttoss/fsl-theme/react` for React apps.
-*
-* When `themeId` is omitted (canonical 1-theme model), CSS targets `:root` and
-* the alternate mode selector becomes `:root[data-tt-mode="dark"]`. Pass
-* `themeId` only for multi-theme scenarios (Storybook, micro-frontends).
-*
-* @example
-* ```ts
-* // Canonical: no themeId needed (CSS goes to :root)
-* import { createTheme } from '@ttoss/fsl-theme';
-* import { getThemeStylesContent } from '@ttoss/fsl-theme/css';
-*
-* const myBundle = createTheme();
-*
-* app.get('/theme.css', (_, res) => {
-*   res.type('text/css').send(getThemeStylesContent(myBundle));
-* });
-*
-* // Multi-theme: explicit themeId for scoping
-* res.type('text/css').send(getThemeStylesContent(myBundle, 'myTheme'));
-* ```
-*/
-var getThemeStylesContent = (bundle, themeId, options) => {
-  return toCssVars(bundle, {
-    themeId,
-    systemModeFallback: options?.systemModeFallback
-  }).toCssString();
-};
-
-//#endregion
-export { getThemeStylesContent, toCssVarName, toCssVars, toFlatTokens };
+import { n as toCssVars, t as toCssVarName } from "./toCssVars-CTGqZ_t3.mjs";
+import { n as PREFLIGHT_CSS, r as getPreflightStyles, t as getThemeStylesContent } from "./css-BVePVvTJ.mjs";
+export { PREFLIGHT_CSS, getPreflightStyles, getThemeStylesContent, toCssVarName, toCssVars, toFlatTokens };

package/dist/dataviz/index.cjs

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

package/dist/dataviz/index.d.cts

@@ -1,5 +1,5 @@
 
-import { c as SemanticDataviz, i as ThemeBundle, s as CoreDataviz } from "../Types-a_sfpbha.cjs";
+import { c as SemanticDataviz, i as ThemeBundle, s as CoreDataviz } from "../Types-8o6d09ll.cjs";
 
 //#region src/dataviz/baseTheme.d.ts
 /**

package/dist/dataviz/index.d.mts

@@ -1,5 +1,5 @@
 
-import { c as SemanticDataviz, i as ThemeBundle, s as CoreDataviz } from "../Types-a_sfpbha.mjs";
+import { c as SemanticDataviz, i as ThemeBundle, s as CoreDataviz } from "../Types-8o6d09ll.mjs";
 
 //#region src/dataviz/baseTheme.d.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-Ln3sEwb7.mjs";
+import { n as coreDataviz, r as semanticDataviz, t as withDataviz } from "../withDataviz-B3mEhBPh.mjs";
 import { useTokens } from "../react.mjs";
 
 //#region src/dataviz/useDatavizTokens.ts

package/dist/dtcg.cjs

@@ -55,23 +55,21 @@ var setNestedValue = (root, path, value) => {
   }
   current[segments[segments.length - 1]] = value;
 };
-/** Semantic hit token prefix that carries coarse-pointer overrides. */
-var SEMANTIC_HIT_PREFIX = "semantic.sizing.hit.";
+/** Semantic hit token path that carries the coarse-pointer override. */
+var SEMANTIC_HIT_PATH = "semantic.sizing.hit";
 /**
-* Build the `$extensions` metadata for a semantic hit token.
+* Build the `$extensions` metadata for the semantic hit token.
 *
-* Each `semantic.sizing.hit.{step}` token defaults to the fine-pointer value.
-* The extension declares the corresponding coarse-pointer raw value so that
+* `semantic.sizing.hit` defaults to the fine-pointer value. The extension
+* declares the coarse-pointer raw value (`core.sizing.hit.coarse`) so that
 * non-CSS consumers (React Native, design tool pipelines) can locate and
-* apply touch-target overrides without reading `toCssVars` source code.
+* apply the touch-target override without reading `toCssVars` source code.
 */
-var buildHitExtension = (step, theme) => {
-  const coarseValue = theme.core.sizing.hit.coarse[step];
-  if (coarseValue === void 0) return void 0;
+var buildHitExtension = theme => {
   return {
     "com.ttoss.pointer-override": {
       condition: "any-pointer: coarse",
-      value: coarseValue
+      value: theme.core.sizing.hit.coarse
     }
   };
 };
@@ -90,8 +88,8 @@ var buildHitExtension = (step, theme) => {
 * alias-preserving / composite output is a deferred enhancement (see
 * CONTRIBUTING.md ADR-013).
 *
-* Semantic hit tokens (`semantic.sizing.hit.*`) include a `$extensions`
-* field declaring their coarse-pointer override value, so non-CSS consumers
+* The semantic hit token (`semantic.sizing.hit`) includes a `$extensions`
+* field declaring its coarse-pointer override value, so non-CSS consumers
 * can apply touch-target ergonomics without reading the CSS emitter source.
 *
 * This is the interchange format for design tools (Tokens Studio, Figma,
@@ -119,10 +117,7 @@ var toDTCG = theme => {
       $value: value
     };
     if (dtcgType !== void 0) token.$type = dtcgType;
-    if (path.startsWith(SEMANTIC_HIT_PREFIX)) {
-      const ext = buildHitExtension(path.slice(20), theme);
-      if (ext) token.$extensions = ext;
-    }
+    if (path === SEMANTIC_HIT_PATH) token.$extensions = buildHitExtension(theme);
     setNestedValue(tree, path, token);
   }
   return tree;

package/dist/dtcg.d.cts

@@ -1,5 +1,5 @@
 
-import { a as ThemeTokens } from "./Types-a_sfpbha.cjs";
+import { a as ThemeTokens } from "./Types-8o6d09ll.cjs";
 
 //#region src/roots/toDTCG.d.ts
 /**
@@ -39,8 +39,8 @@ type DTCGTokenTree = DTCGToken | {
  * alias-preserving / composite output is a deferred enhancement (see
  * CONTRIBUTING.md ADR-013).
  *
- * Semantic hit tokens (`semantic.sizing.hit.*`) include a `$extensions`
- * field declaring their coarse-pointer override value, so non-CSS consumers
+ * The semantic hit token (`semantic.sizing.hit`) includes a `$extensions`
+ * field declaring its coarse-pointer override value, so non-CSS consumers
  * can apply touch-target ergonomics without reading the CSS emitter source.
  *
  * This is the interchange format for design tools (Tokens Studio, Figma,

package/dist/dtcg.d.mts

@@ -1,5 +1,5 @@
 
-import { a as ThemeTokens } from "./Types-a_sfpbha.mjs";
+import { a as ThemeTokens } from "./Types-8o6d09ll.mjs";
 
 //#region src/roots/toDTCG.d.ts
 /**
@@ -39,8 +39,8 @@ type DTCGTokenTree = DTCGToken | {
  * alias-preserving / composite output is a deferred enhancement (see
  * CONTRIBUTING.md ADR-013).
  *
- * Semantic hit tokens (`semantic.sizing.hit.*`) include a `$extensions`
- * field declaring their coarse-pointer override value, so non-CSS consumers
+ * The semantic hit token (`semantic.sizing.hit`) includes a `$extensions`
+ * field declaring its coarse-pointer override value, so non-CSS consumers
  * can apply touch-target ergonomics without reading the CSS emitter source.
  *
  * This is the interchange format for design tools (Tokens Studio, Figma,

package/dist/dtcg.mjs

@@ -52,23 +52,21 @@ var setNestedValue = (root, path, value) => {
   }
   current[segments[segments.length - 1]] = value;
 };
-/** Semantic hit token prefix that carries coarse-pointer overrides. */
-var SEMANTIC_HIT_PREFIX = "semantic.sizing.hit.";
+/** Semantic hit token path that carries the coarse-pointer override. */
+var SEMANTIC_HIT_PATH = "semantic.sizing.hit";
 /**
-* Build the `$extensions` metadata for a semantic hit token.
+* Build the `$extensions` metadata for the semantic hit token.
 *
-* Each `semantic.sizing.hit.{step}` token defaults to the fine-pointer value.
-* The extension declares the corresponding coarse-pointer raw value so that
+* `semantic.sizing.hit` defaults to the fine-pointer value. The extension
+* declares the coarse-pointer raw value (`core.sizing.hit.coarse`) so that
 * non-CSS consumers (React Native, design tool pipelines) can locate and
-* apply touch-target overrides without reading `toCssVars` source code.
+* apply the touch-target override without reading `toCssVars` source code.
 */
-var buildHitExtension = (step, theme) => {
-  const coarseValue = theme.core.sizing.hit.coarse[step];
-  if (coarseValue === void 0) return void 0;
+var buildHitExtension = theme => {
   return {
     "com.ttoss.pointer-override": {
       condition: "any-pointer: coarse",
-      value: coarseValue
+      value: theme.core.sizing.hit.coarse
     }
   };
 };
@@ -87,8 +85,8 @@ var buildHitExtension = (step, theme) => {
 * alias-preserving / composite output is a deferred enhancement (see
 * CONTRIBUTING.md ADR-013).
 *
-* Semantic hit tokens (`semantic.sizing.hit.*`) include a `$extensions`
-* field declaring their coarse-pointer override value, so non-CSS consumers
+* The semantic hit token (`semantic.sizing.hit`) includes a `$extensions`
+* field declaring its coarse-pointer override value, so non-CSS consumers
 * can apply touch-target ergonomics without reading the CSS emitter source.
 *
 * This is the interchange format for design tools (Tokens Studio, Figma,
@@ -116,10 +114,7 @@ var toDTCG = theme => {
       $value: value
     };
     if (dtcgType !== void 0) token.$type = dtcgType;
-    if (path.startsWith(SEMANTIC_HIT_PREFIX)) {
-      const ext = buildHitExtension(path.slice(20), theme);
-      if (ext) token.$extensions = ext;
-    }
+    if (path === SEMANTIC_HIT_PATH) token.$extensions = buildHitExtension(theme);
     setNestedValue(tree, path, token);
   }
   return tree;

package/dist/{index-BmZQVd3G.d.cts → index-CIkVRaGC.d.cts}

@@ -1,5 +1,5 @@
 
-import { a as ThemeTokens, i as ThemeBundle, o as DeepPartial, r as ThemeBrief, t as ModeOverride } from "./Types-a_sfpbha.cjs";
+import { a as ThemeTokens, i as ThemeBundle, o as DeepPartial, r as ThemeBrief, t as ModeOverride } from "./Types-8o6d09ll.cjs";
 //#region src/baseTheme.d.ts
 /**
  * **Foundation** — Neutral baseline theme.

package/dist/{index-XZsRrMTF.d.mts → index-OP4B-9hU.d.mts}

@@ -1,5 +1,5 @@
 
-import { a as ThemeTokens, i as ThemeBundle, o as DeepPartial, r as ThemeBrief, t as ModeOverride } from "./Types-a_sfpbha.mjs";
+import { a as ThemeTokens, i as ThemeBundle, o as DeepPartial, r as ThemeBrief, t as ModeOverride } from "./Types-8o6d09ll.mjs";
 //#region src/baseTheme.d.ts
 /**
  * **Foundation** — Neutral baseline theme.

package/dist/index.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, {
   value: 'Module'
 });
-const require_createTheme = require('./createTheme-B7H0xSVp.cjs');
+const require_createTheme = require('./createTheme-BzlJdFAG.cjs');
 const require_themes_bruttal = require('./themes/bruttal.cjs');
 exports.baseTheme = require_createTheme.baseTheme;
 exports.bruttal = require_themes_bruttal.bruttal;

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 
-import { a as ThemeTokens, i as ThemeBundle, n as SemanticTokens, o as DeepPartial, r as ThemeBrief, t as ModeOverride } from "./Types-a_sfpbha.cjs";
-import { i as darkAlternate, n as createTheme, r as baseTheme, t as bruttal } from "./index-BmZQVd3G.cjs";
+import { a as ThemeTokens, i as ThemeBundle, n as SemanticTokens, o as DeepPartial, r as ThemeBrief, t as ModeOverride } from "./Types-8o6d09ll.cjs";
+import { i as darkAlternate, n as createTheme, r as baseTheme, t as bruttal } from "./index-CIkVRaGC.cjs";
 import { o as ThemeMode } from "./ssrScript-BVysxDws.cjs";
-import { c as ThemeStylesProps, n as ThemeHeadProps } from "./react-2D_CNVF2.cjs";
+import { n as ThemeHeadProps, u as ThemeStylesProps } from "./react-CZDLBN6v.cjs";
 export { type DeepPartial, type ModeOverride, type SemanticTokens, type ThemeBrief, type ThemeBundle, type ThemeHeadProps, type ThemeMode, type ThemeStylesProps, type ThemeTokens, baseTheme, bruttal, createTheme, darkAlternate };

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 
-import { a as ThemeTokens, i as ThemeBundle, n as SemanticTokens, o as DeepPartial, r as ThemeBrief, t as ModeOverride } from "./Types-a_sfpbha.mjs";
-import { i as darkAlternate, n as createTheme, r as baseTheme, t as bruttal } from "./index-XZsRrMTF.mjs";
+import { a as ThemeTokens, i as ThemeBundle, n as SemanticTokens, o as DeepPartial, r as ThemeBrief, t as ModeOverride } from "./Types-8o6d09ll.mjs";
+import { i as darkAlternate, n as createTheme, r as baseTheme, t as bruttal } from "./index-OP4B-9hU.mjs";
 import { o as ThemeMode } from "./ssrScript-BVysxDws.mjs";
-import { c as ThemeStylesProps, n as ThemeHeadProps } from "./react-BwnHHvJj.mjs";
+import { n as ThemeHeadProps, u as ThemeStylesProps } from "./react-C9QSshf3.mjs";
 export { type DeepPartial, type ModeOverride, type SemanticTokens, type ThemeBrief, type ThemeBundle, type ThemeHeadProps, type ThemeMode, type ThemeStylesProps, type ThemeTokens, baseTheme, bruttal, createTheme, darkAlternate };

package/dist/index.mjs

@@ -1,4 +1,4 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { a as darkAlternate, i as baseTheme, n as createTheme } from "./createTheme-Bm9LVQ4w.mjs";
+import { a as darkAlternate, i as baseTheme, n as createTheme } from "./createTheme-gTjIryKH.mjs";
 import { bruttal } from "./themes/bruttal.mjs";
 export { baseTheme, bruttal, createTheme, darkAlternate };

package/dist/{react-DQErMGJz.cjs → react-C1WRCOFF.cjs}

@@ -27,7 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 
 //#endregion
 const require_helpers = require('./helpers-BU40JvFA.cjs');
-const require_css = require('./css.cjs');
+const require_css = require('./css-CKvOE4mT.cjs');
 const require_ssrScript = require('./ssrScript-D73WcrCM.cjs');
 let react = require("react");
 react = __toESM(react);
@@ -122,19 +122,18 @@ var useCoarsePointer = () => {
 /**
 * Apply coarse-pointer hit target overrides to a resolved token map.
 *
-* When `isCoarse` is true, replaces `semantic.sizing.hit.{step}` values with
-* the raw coarse values from `core.sizing.hit.coarse.{step}`. This mirrors
-* the `@media (any-pointer: coarse)` block that `toCssVars` emits for CSS
+* When `isCoarse` is true, replaces the `semantic.sizing.hit` value with the
+* raw coarse value from `core.sizing.hit.coarse`. This mirrors the
+* `@media (any-pointer: coarse)` block that `toCssVars` emits for CSS
 * consumers — ensuring non-CSS consumers (React Native, canvas) get
 * touch-appropriate hit targets.
 */
 var applyCoarseHitOverrides = (tokens, theme, isCoarse) => {
   if (!isCoarse) return tokens;
-  const overrides = {
-    ...tokens
+  return {
+    ...tokens,
+    "semantic.sizing.hit": theme.core.sizing.hit.coarse
   };
-  for (const [key, value] of Object.entries(theme.core.sizing.hit.coarse)) if (typeof value === "string") overrides[`semantic.sizing.hit.${key}`] = value;
-  return overrides;
 };
 var SemanticTokensCtx = react.createContext(null);
 /**
@@ -345,7 +344,7 @@ var useTokens = () => {
 *
 * ### ⚠ CSS-coupled tokens stay unresolved
 * A registered set of dimensional tokens (model.md §8 — spacing steps, fluid
-* `text.*.fontSize`, `sizing.hit.*`, `sizing.viewport.*`, `sizing.measure.reading`,
+* `text.*.fontSize`, `sizing.hit`, `sizing.viewport.*`, `sizing.measure.reading`,
 * `spacing.gutter.*`) carry CSS-only constructs (`var()`, `calc()`, `clamp()`,
 * `cqi`, `dvh`, `ch`). This hook returns those **as-is** — they are not usable
 * outside a CSS engine. Colors, opacity, z-index, font weights/leading and
@@ -474,6 +473,35 @@ var ThemeStyles = ({
   });
 };
 /**
+* Injects the theme's base stylesheet (the {@link PREFLIGHT_CSS} preflight):
+* a box-sizing reset, the document body's default typography and colour drawn
+* from the semantic tokens, and the global reduced-motion guard. Render it
+* once at the app root, alongside `<ThemeProvider>` / `<ThemeStyles>` — so the
+* base layer is the theme's responsibility, not hand-written per app.
+*
+* It sets no widths, heights, or component styling (those belong to
+* `@ttoss/fsl-ui` and the app). Requires the `--tt-*` custom properties to be
+* present on the page.
+*
+* @example
+* ```tsx
+* <ThemeProvider theme={theme}>
+*   <ThemeReset />
+*   <App />
+* </ThemeProvider>
+* ```
+*/
+var ThemeReset = ({
+  nonce
+} = {}) => {
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)("style", {
+    nonce,
+    dangerouslySetInnerHTML: {
+      __html: require_css.PREFLIGHT_CSS
+    }
+  });
+};
+/**
 * Convenience component that renders both `<ThemeScript>` and `<ThemeStyles>`
 * in a single line — the complete SSR `<head>` setup for flash-free theming.
 *
@@ -551,6 +579,12 @@ Object.defineProperty(exports, 'ThemeProvider', {
     return ThemeProvider;
   }
 });
+Object.defineProperty(exports, 'ThemeReset', {
+  enumerable: true,
+  get: function () {
+    return ThemeReset;
+  }
+});
 Object.defineProperty(exports, 'ThemeScript', {
   enumerable: true,
   get: function () {

package/dist/{react-BwnHHvJj.d.mts → react-C9QSshf3.d.mts}

@@ -1,5 +1,5 @@
 
-import { i as ThemeBundle, n as SemanticTokens } from "./Types-a_sfpbha.mjs";
+import { i as ThemeBundle, n as SemanticTokens } from "./Types-8o6d09ll.mjs";
 import { a as ResolvedMode, o as ThemeMode, t as ThemeScriptConfig } from "./ssrScript-BVysxDws.mjs";
 import * as React from "react";
 
@@ -242,7 +242,7 @@ declare const useTokens: () => SemanticTokens;
  *
  * ### ⚠ CSS-coupled tokens stay unresolved
  * A registered set of dimensional tokens (model.md §8 — spacing steps, fluid
- * `text.*.fontSize`, `sizing.hit.*`, `sizing.viewport.*`, `sizing.measure.reading`,
+ * `text.*.fontSize`, `sizing.hit`, `sizing.viewport.*`, `sizing.measure.reading`,
  * `spacing.gutter.*`) carry CSS-only constructs (`var()`, `calc()`, `clamp()`,
  * `cqi`, `dvh`, `ch`). This hook returns those **as-is** — they are not usable
  * outside a CSS engine. Colors, opacity, z-index, font weights/leading and
@@ -379,6 +379,33 @@ declare const ThemeStyles: ({
   nonce,
   systemModeFallback
 }: ThemeStylesProps) => import("react/jsx-runtime").JSX.Element;
+/** Props for the `ThemeReset` component. */
+interface ThemeResetProps {
+  /** CSP nonce forwarded to the injected `<style>` element. */
+  nonce?: string;
+}
+/**
+ * Injects the theme's base stylesheet (the {@link PREFLIGHT_CSS} preflight):
+ * a box-sizing reset, the document body's default typography and colour drawn
+ * from the semantic tokens, and the global reduced-motion guard. Render it
+ * once at the app root, alongside `<ThemeProvider>` / `<ThemeStyles>` — so the
+ * base layer is the theme's responsibility, not hand-written per app.
+ *
+ * It sets no widths, heights, or component styling (those belong to
+ * `@ttoss/fsl-ui` and the app). Requires the `--tt-*` custom properties to be
+ * present on the page.
+ *
+ * @example
+ * ```tsx
+ * <ThemeProvider theme={theme}>
+ *   <ThemeReset />
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+declare const ThemeReset: ({
+  nonce
+}?: ThemeResetProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * Props for the `ThemeHead` component.
  */
@@ -439,4 +466,4 @@ declare const ThemeHead: ({
   storageKey
 }: ThemeHeadProps) => import("react/jsx-runtime").JSX.Element;
 //#endregion
-export { ThemeScript as a, ThemeStylesProps as c, useResolvedTokens as d, useTokens as f, ThemeProviderProps as i, UseColorModeResult as l, ThemeHeadProps as n, ThemeScriptProps as o, ThemeProvider as r, ThemeStyles as s, ThemeHead as t, useColorMode as u };
+export { ThemeReset as a, ThemeScriptProps as c, UseColorModeResult as d, useColorMode as f, ThemeProviderProps as i, ThemeStyles as l, useTokens as m, ThemeHeadProps as n, ThemeResetProps as o, useResolvedTokens as p, ThemeProvider as r, ThemeScript as s, ThemeHead as t, ThemeStylesProps as u };

package/dist/{react-2D_CNVF2.d.cts → react-CZDLBN6v.d.cts}

@@ -1,5 +1,5 @@
 
-import { i as ThemeBundle, n as SemanticTokens } from "./Types-a_sfpbha.cjs";
+import { i as ThemeBundle, n as SemanticTokens } from "./Types-8o6d09ll.cjs";
 import { a as ResolvedMode, o as ThemeMode, t as ThemeScriptConfig } from "./ssrScript-BVysxDws.cjs";
 import * as React from "react";
 
@@ -242,7 +242,7 @@ declare const useTokens: () => SemanticTokens;
  *
  * ### ⚠ CSS-coupled tokens stay unresolved
  * A registered set of dimensional tokens (model.md §8 — spacing steps, fluid
- * `text.*.fontSize`, `sizing.hit.*`, `sizing.viewport.*`, `sizing.measure.reading`,
+ * `text.*.fontSize`, `sizing.hit`, `sizing.viewport.*`, `sizing.measure.reading`,
  * `spacing.gutter.*`) carry CSS-only constructs (`var()`, `calc()`, `clamp()`,
  * `cqi`, `dvh`, `ch`). This hook returns those **as-is** — they are not usable
  * outside a CSS engine. Colors, opacity, z-index, font weights/leading and
@@ -379,6 +379,33 @@ declare const ThemeStyles: ({
   nonce,
   systemModeFallback
 }: ThemeStylesProps) => import("react/jsx-runtime").JSX.Element;
+/** Props for the `ThemeReset` component. */
+interface ThemeResetProps {
+  /** CSP nonce forwarded to the injected `<style>` element. */
+  nonce?: string;
+}
+/**
+ * Injects the theme's base stylesheet (the {@link PREFLIGHT_CSS} preflight):
+ * a box-sizing reset, the document body's default typography and colour drawn
+ * from the semantic tokens, and the global reduced-motion guard. Render it
+ * once at the app root, alongside `<ThemeProvider>` / `<ThemeStyles>` — so the
+ * base layer is the theme's responsibility, not hand-written per app.
+ *
+ * It sets no widths, heights, or component styling (those belong to
+ * `@ttoss/fsl-ui` and the app). Requires the `--tt-*` custom properties to be
+ * present on the page.
+ *
+ * @example
+ * ```tsx
+ * <ThemeProvider theme={theme}>
+ *   <ThemeReset />
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+declare const ThemeReset: ({
+  nonce
+}?: ThemeResetProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * Props for the `ThemeHead` component.
  */
@@ -439,4 +466,4 @@ declare const ThemeHead: ({
   storageKey
 }: ThemeHeadProps) => import("react/jsx-runtime").JSX.Element;
 //#endregion
-export { ThemeScript as a, ThemeStylesProps as c, useResolvedTokens as d, useTokens as f, ThemeProviderProps as i, UseColorModeResult as l, ThemeHeadProps as n, ThemeScriptProps as o, ThemeProvider as r, ThemeStyles as s, ThemeHead as t, useColorMode as u };
+export { ThemeReset as a, ThemeScriptProps as c, UseColorModeResult as d, useColorMode as f, ThemeProviderProps as i, ThemeStyles as l, useTokens as m, ThemeHeadProps as n, ThemeResetProps as o, useResolvedTokens as p, ThemeProvider as r, ThemeScript as s, ThemeHead as t, ThemeStylesProps as u };

package/dist/react.cjs

@@ -4,9 +4,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, {
   value: 'Module'
 });
-const require_react = require('./react-DQErMGJz.cjs');
+const require_react = require('./react-C1WRCOFF.cjs');
 exports.ThemeHead = require_react.ThemeHead;
 exports.ThemeProvider = require_react.ThemeProvider;
+exports.ThemeReset = require_react.ThemeReset;
 exports.ThemeScript = require_react.ThemeScript;
 exports.ThemeStyles = require_react.ThemeStyles;
 exports.useColorMode = require_react.useColorMode;

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-2D_CNVF2.cjs";
-export { type ResolvedMode, ThemeHead, ThemeHeadProps, type ThemeMode, ThemeProvider, ThemeProviderProps, ThemeScript, ThemeScriptProps, ThemeStyles, ThemeStylesProps, UseColorModeResult, useColorMode, useResolvedTokens, useTokens };
+import { a as ThemeReset, c as ThemeScriptProps, d as UseColorModeResult, f as useColorMode, i as ThemeProviderProps, l as ThemeStyles, m as useTokens, n as ThemeHeadProps, o as ThemeResetProps, p as useResolvedTokens, r as ThemeProvider, s as ThemeScript, t as ThemeHead, u as ThemeStylesProps } from "./react-CZDLBN6v.cjs";
+export { type ResolvedMode, ThemeHead, ThemeHeadProps, type ThemeMode, ThemeProvider, ThemeProviderProps, ThemeReset, ThemeResetProps, 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-BwnHHvJj.mjs";
-export { type ResolvedMode, ThemeHead, ThemeHeadProps, type ThemeMode, ThemeProvider, ThemeProviderProps, ThemeScript, ThemeScriptProps, ThemeStyles, ThemeStylesProps, UseColorModeResult, useColorMode, useResolvedTokens, useTokens };
+import { a as ThemeReset, c as ThemeScriptProps, d as UseColorModeResult, f as useColorMode, i as ThemeProviderProps, l as ThemeStyles, m as useTokens, n as ThemeHeadProps, o as ThemeResetProps, p as useResolvedTokens, r as ThemeProvider, s as ThemeScript, t as ThemeHead, u as ThemeStylesProps } from "./react-C9QSshf3.mjs";
+export { type ResolvedMode, ThemeHead, ThemeHeadProps, type ThemeMode, ThemeProvider, ThemeProviderProps, ThemeReset, ThemeResetProps, ThemeScript, ThemeScriptProps, ThemeStyles, ThemeStylesProps, UseColorModeResult, useColorMode, useResolvedTokens, useTokens };

package/dist/react.mjs

@@ -2,7 +2,7 @@
 'use client';
 
 import { r as deepMerge, s as toFlatTokens } from "./helpers-BXaKe2s3.mjs";
-import { getThemeStylesContent } from "./css.mjs";
+import { n as PREFLIGHT_CSS, t as getThemeStylesContent } from "./css-BVePVvTJ.mjs";
 import { i as createThemeRuntime, t as getThemeScriptContent } from "./ssrScript-zDK1dqXr.mjs";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -96,19 +96,18 @@ var useCoarsePointer = () => {
 /**
 * Apply coarse-pointer hit target overrides to a resolved token map.
 *
-* When `isCoarse` is true, replaces `semantic.sizing.hit.{step}` values with
-* the raw coarse values from `core.sizing.hit.coarse.{step}`. This mirrors
-* the `@media (any-pointer: coarse)` block that `toCssVars` emits for CSS
+* When `isCoarse` is true, replaces the `semantic.sizing.hit` value with the
+* raw coarse value from `core.sizing.hit.coarse`. This mirrors the
+* `@media (any-pointer: coarse)` block that `toCssVars` emits for CSS
 * consumers — ensuring non-CSS consumers (React Native, canvas) get
 * touch-appropriate hit targets.
 */
 var applyCoarseHitOverrides = (tokens, theme, isCoarse) => {
   if (!isCoarse) return tokens;
-  const overrides = {
-    ...tokens
+  return {
+    ...tokens,
+    "semantic.sizing.hit": theme.core.sizing.hit.coarse
   };
-  for (const [key, value] of Object.entries(theme.core.sizing.hit.coarse)) if (typeof value === "string") overrides[`semantic.sizing.hit.${key}`] = value;
-  return overrides;
 };
 var SemanticTokensCtx = React.createContext(null);
 /**
@@ -319,7 +318,7 @@ var useTokens = () => {
 *
 * ### ⚠ CSS-coupled tokens stay unresolved
 * A registered set of dimensional tokens (model.md §8 — spacing steps, fluid
-* `text.*.fontSize`, `sizing.hit.*`, `sizing.viewport.*`, `sizing.measure.reading`,
+* `text.*.fontSize`, `sizing.hit`, `sizing.viewport.*`, `sizing.measure.reading`,
 * `spacing.gutter.*`) carry CSS-only constructs (`var()`, `calc()`, `clamp()`,
 * `cqi`, `dvh`, `ch`). This hook returns those **as-is** — they are not usable
 * outside a CSS engine. Colors, opacity, z-index, font weights/leading and
@@ -448,6 +447,35 @@ var ThemeStyles = ({
   });
 };
 /**
+* Injects the theme's base stylesheet (the {@link PREFLIGHT_CSS} preflight):
+* a box-sizing reset, the document body's default typography and colour drawn
+* from the semantic tokens, and the global reduced-motion guard. Render it
+* once at the app root, alongside `<ThemeProvider>` / `<ThemeStyles>` — so the
+* base layer is the theme's responsibility, not hand-written per app.
+*
+* It sets no widths, heights, or component styling (those belong to
+* `@ttoss/fsl-ui` and the app). Requires the `--tt-*` custom properties to be
+* present on the page.
+*
+* @example
+* ```tsx
+* <ThemeProvider theme={theme}>
+*   <ThemeReset />
+*   <App />
+* </ThemeProvider>
+* ```
+*/
+var ThemeReset = ({
+  nonce
+} = {}) => {
+  return /* @__PURE__ */jsx("style", {
+    nonce,
+    dangerouslySetInnerHTML: {
+      __html: PREFLIGHT_CSS
+    }
+  });
+};
+/**
 * Convenience component that renders both `<ThemeScript>` and `<ThemeStyles>`
 * in a single line — the complete SSR `<head>` setup for flash-free theming.
 *
@@ -513,4 +541,4 @@ var ThemeHead = ({
 };
 
 //#endregion
-export { ThemeHead, ThemeProvider, ThemeScript, ThemeStyles, useColorMode, useResolvedTokens, useTokens };
+export { ThemeHead, ThemeProvider, ThemeReset, ThemeScript, ThemeStyles, useColorMode, useResolvedTokens, useTokens };

package/dist/themes/bruttal.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, {
   value: 'Module'
 });
-const require_createTheme = require('../createTheme-B7H0xSVp.cjs');
+const require_createTheme = require('../createTheme-BzlJdFAG.cjs');
 const require_helpers = require('../helpers-BU40JvFA.cjs');
-const require_withDataviz = require('../withDataviz-DrUtw8cc.cjs');
+const require_withDataviz = require('../withDataviz-B-XQ1MDT.cjs');
 
 //#region src/themes/bruttal.ts
 /**

package/dist/themes/bruttal.d.cts

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

package/dist/themes/bruttal.d.mts

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