@ttoss/fsl-theme 2.1.0 → 2.1.2

package/dist/{Types-a_sfpbha.d.cts → Types-8o6d09ll.d.cts}

@@ -824,21 +824,20 @@ interface CoreSizeViewport {
     full: RawValue;
   };
 }
-/** Three-step hit target size ramp (min / base / prominent). */
-interface CoreSizeHitScale {
-  min: RawValue;
-  base: RawValue;
-  prominent: RawValue;
-}
 /**
- * Hit target sizes split by pointer type.
- * `toCssVars` automatically injects the `coarse` values under `@media (any-pointer: coarse)`.
+ * Hit target floors split by pointer type.
+ *
+ * A **single ergonomic floor per pointer profile** — the minimum interactive
+ * target, never a visual size and never a scale. The theme defines one value;
+ * `toCssVars` injects the `coarse` value under `@media (any-pointer: coarse)`.
+ * (Evidence: the former three-step ramp shipped with only `base` ever consumed
+ * — see ADR-020.)
  */
 interface CoreSizeHit {
-  /** Fine pointer (mouse/trackpad) hit targets */
-  fine: CoreSizeHitScale;
-  /** Coarse pointer (touch) hit targets */
-  coarse: CoreSizeHitScale;
+  /** Fine pointer (mouse/trackpad) hit target floor. */
+  fine: RawValue;
+  /** Coarse pointer (touch) hit target floor. */
+  coarse: RawValue;
 }
 interface CoreSizing {
   ramp: {
@@ -852,20 +851,20 @@ interface CoreSizing {
 }
 interface SemanticSizing {
   /**
-   * Ergonomic hit targets. Each token resolves to the **fine-pointer** value.
-   * The CSS output layer (`toCssVars`) automatically injects coarse-pointer
-   * overrides inside `@media (any-pointer: coarse)` — no component code needed.
+   * Ergonomic hit target — a **single interactive floor** (min interactive
+   * area), not a visual size and not a scale. Enforce via `min-height` /
+   * `min-width`; the visible control size comes from its inset + type, with
+   * `hit` only guaranteeing the ergonomic minimum.
    *
-   * Fine-pointer values (`core.sizing.hit.fine.*`) may use `clamp(floor, preferred, max)`
-   * where `floor` is a fixed `Npx` ergonomic minimum — this guarantees accessibility
-   * while allowing themes to express density preferences (e.g. via the rem scale).
-   * Coarse-pointer values (`core.sizing.hit.coarse.*`) are always fixed `px`.
+   * Resolves to the **fine-pointer** value (`core.sizing.hit.fine`), which may
+   * use `clamp(floor, preferred, max)` where `floor` is a fixed `Npx`
+   * ergonomic minimum — guaranteeing accessibility while letting the rem
+   * `preferred` respect user font-size. The CSS output layer (`toCssVars`)
+   * automatically injects the coarse-pointer override (`core.sizing.hit.coarse`,
+   * always fixed `px`) inside `@media (any-pointer: coarse)` — no component
+   * code needed.
    */
-  hit: {
-    /** Minimum interactive area for small / secondary targets (icon-only buttons, toolbar items). Enforce via `min-width` / `min-height`; not a visual size. */min: CoreSizingRef; /** Default interactive area for standard buttons, inputs, and toggles. Pick when no other step applies. */
-    base: CoreSizingRef; /** Prominent interactive area for high-emphasis or low-density targets (CTAs, dialog actions). */
-    prominent: CoreSizingRef;
-  };
+  hit: CoreSizingRef;
   /**
    * Visual glyph dimensions. Set on the icon element itself; never used to
    * gate the hit target that wraps it (that is `hit.*`).

package/dist/{Types-a_sfpbha.d.mts → Types-8o6d09ll.d.mts}

@@ -824,21 +824,20 @@ interface CoreSizeViewport {
     full: RawValue;
   };
 }
-/** Three-step hit target size ramp (min / base / prominent). */
-interface CoreSizeHitScale {
-  min: RawValue;
-  base: RawValue;
-  prominent: RawValue;
-}
 /**
- * Hit target sizes split by pointer type.
- * `toCssVars` automatically injects the `coarse` values under `@media (any-pointer: coarse)`.
+ * Hit target floors split by pointer type.
+ *
+ * A **single ergonomic floor per pointer profile** — the minimum interactive
+ * target, never a visual size and never a scale. The theme defines one value;
+ * `toCssVars` injects the `coarse` value under `@media (any-pointer: coarse)`.
+ * (Evidence: the former three-step ramp shipped with only `base` ever consumed
+ * — see ADR-020.)
  */
 interface CoreSizeHit {
-  /** Fine pointer (mouse/trackpad) hit targets */
-  fine: CoreSizeHitScale;
-  /** Coarse pointer (touch) hit targets */
-  coarse: CoreSizeHitScale;
+  /** Fine pointer (mouse/trackpad) hit target floor. */
+  fine: RawValue;
+  /** Coarse pointer (touch) hit target floor. */
+  coarse: RawValue;
 }
 interface CoreSizing {
   ramp: {
@@ -852,20 +851,20 @@ interface CoreSizing {
 }
 interface SemanticSizing {
   /**
-   * Ergonomic hit targets. Each token resolves to the **fine-pointer** value.
-   * The CSS output layer (`toCssVars`) automatically injects coarse-pointer
-   * overrides inside `@media (any-pointer: coarse)` — no component code needed.
+   * Ergonomic hit target — a **single interactive floor** (min interactive
+   * area), not a visual size and not a scale. Enforce via `min-height` /
+   * `min-width`; the visible control size comes from its inset + type, with
+   * `hit` only guaranteeing the ergonomic minimum.
    *
-   * Fine-pointer values (`core.sizing.hit.fine.*`) may use `clamp(floor, preferred, max)`
-   * where `floor` is a fixed `Npx` ergonomic minimum — this guarantees accessibility
-   * while allowing themes to express density preferences (e.g. via the rem scale).
-   * Coarse-pointer values (`core.sizing.hit.coarse.*`) are always fixed `px`.
+   * Resolves to the **fine-pointer** value (`core.sizing.hit.fine`), which may
+   * use `clamp(floor, preferred, max)` where `floor` is a fixed `Npx`
+   * ergonomic minimum — guaranteeing accessibility while letting the rem
+   * `preferred` respect user font-size. The CSS output layer (`toCssVars`)
+   * automatically injects the coarse-pointer override (`core.sizing.hit.coarse`,
+   * always fixed `px`) inside `@media (any-pointer: coarse)` — no component
+   * code needed.
    */
-  hit: {
-    /** Minimum interactive area for small / secondary targets (icon-only buttons, toolbar items). Enforce via `min-width` / `min-height`; not a visual size. */min: CoreSizingRef; /** Default interactive area for standard buttons, inputs, and toggles. Pick when no other step applies. */
-    base: CoreSizingRef; /** Prominent interactive area for high-emphasis or low-density targets (CTAs, dialog actions). */
-    prominent: CoreSizingRef;
-  };
+  hit: CoreSizingRef;
   /**
    * Visual glyph dimensions. Set on the icon element itself; never used to
    * gate the hit target that wraps it (that is `hit.*`).

package/dist/{baseBundle-CXdxj_re.mjs → baseBundle-C6RP-2Qb.mjs}

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

package/dist/{baseBundle-a9LDsqYy.cjs → baseBundle-C6yVk4x0.cjs}

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

package/dist/{createTheme-B7H0xSVp.cjs → createTheme-BzlJdFAG.cjs}

@@ -58,7 +58,9 @@ var baseTheme = {
         300: "#cbd5e1",
         400: "#94a3b8",
         500: "#64748b",
+        600: "#475569",
         700: "#334155",
+        800: "#1e293b",
         900: "#0f172a",
         1e3: "#020617"
       },
@@ -239,16 +241,8 @@ var baseTheme = {
         }
       },
       hit: {
-        fine: {
-          min: "clamp(28px, 1.75rem, 32px)",
-          base: "clamp(32px, 2rem, 40px)",
-          prominent: "clamp(40px, 2.5rem, 48px)"
-        },
-        coarse: {
-          min: "32px",
-          base: "48px",
-          prominent: "56px"
-        }
+        fine: "clamp(32px, 2rem, 36px)",
+        coarse: "48px"
       }
     },
     radii: {
@@ -953,6 +947,11 @@ var baseTheme = {
         raised: "{core.elevation.level.2}",
         overlay: "{core.elevation.level.3}",
         blocking: "{core.elevation.level.4}"
+      },
+      tonal: {
+        raised: "{core.colors.neutral.0}",
+        overlay: "{core.colors.neutral.0}",
+        blocking: "{core.colors.neutral.0}"
       }
     },
     text: {
@@ -1108,9 +1107,9 @@ var baseTheme = {
     spacing: {
       inset: {
         control: {
-          sm: "{core.spacing.3}",
-          md: "{core.spacing.4}",
-          lg: "{core.spacing.6}"
+          sm: "{core.spacing.1}",
+          md: "{core.spacing.2}",
+          lg: "{core.spacing.4}"
         },
         surface: {
           sm: "{core.spacing.4}",
@@ -1145,11 +1144,7 @@ var baseTheme = {
       }
     },
     sizing: {
-      hit: {
-        min: "{core.sizing.hit.fine.min}",
-        base: "{core.sizing.hit.fine.base}",
-        prominent: "{core.sizing.hit.fine.prominent}"
-      },
+      hit: "{core.sizing.hit.fine}",
       icon: {
         sm: "{core.sizing.ramp.ui.2}",
         md: "{core.sizing.ramp.ui.3}",
@@ -1744,6 +1739,11 @@ var darkAlternate = {
         raised: "{core.elevation.emphatic.2}",
         overlay: "{core.elevation.emphatic.3}",
         blocking: "{core.elevation.emphatic.4}"
+      },
+      tonal: {
+        raised: "{core.colors.neutral.800}",
+        overlay: "{core.colors.neutral.700}",
+        blocking: "{core.colors.neutral.700}"
       }
     }
   }

package/dist/{createTheme-Bm9LVQ4w.mjs → createTheme-gTjIryKH.mjs}

@@ -58,7 +58,9 @@ var baseTheme = {
         300: "#cbd5e1",
         400: "#94a3b8",
         500: "#64748b",
+        600: "#475569",
         700: "#334155",
+        800: "#1e293b",
         900: "#0f172a",
         1e3: "#020617"
       },
@@ -239,16 +241,8 @@ var baseTheme = {
         }
       },
       hit: {
-        fine: {
-          min: "clamp(28px, 1.75rem, 32px)",
-          base: "clamp(32px, 2rem, 40px)",
-          prominent: "clamp(40px, 2.5rem, 48px)"
-        },
-        coarse: {
-          min: "32px",
-          base: "48px",
-          prominent: "56px"
-        }
+        fine: "clamp(32px, 2rem, 36px)",
+        coarse: "48px"
       }
     },
     radii: {
@@ -953,6 +947,11 @@ var baseTheme = {
         raised: "{core.elevation.level.2}",
         overlay: "{core.elevation.level.3}",
         blocking: "{core.elevation.level.4}"
+      },
+      tonal: {
+        raised: "{core.colors.neutral.0}",
+        overlay: "{core.colors.neutral.0}",
+        blocking: "{core.colors.neutral.0}"
       }
     },
     text: {
@@ -1108,9 +1107,9 @@ var baseTheme = {
     spacing: {
       inset: {
         control: {
-          sm: "{core.spacing.3}",
-          md: "{core.spacing.4}",
-          lg: "{core.spacing.6}"
+          sm: "{core.spacing.1}",
+          md: "{core.spacing.2}",
+          lg: "{core.spacing.4}"
         },
         surface: {
           sm: "{core.spacing.4}",
@@ -1145,11 +1144,7 @@ var baseTheme = {
       }
     },
     sizing: {
-      hit: {
-        min: "{core.sizing.hit.fine.min}",
-        base: "{core.sizing.hit.fine.base}",
-        prominent: "{core.sizing.hit.fine.prominent}"
-      },
+      hit: "{core.sizing.hit.fine}",
       icon: {
         sm: "{core.sizing.ramp.ui.2}",
         md: "{core.sizing.ramp.ui.3}",
@@ -1744,6 +1739,11 @@ var darkAlternate = {
         raised: "{core.elevation.emphatic.2}",
         overlay: "{core.elevation.emphatic.3}",
         blocking: "{core.elevation.emphatic.4}"
+      },
+      tonal: {
+        raised: "{core.colors.neutral.800}",
+        overlay: "{core.colors.neutral.700}",
+        blocking: "{core.colors.neutral.700}"
       }
     }
   }

package/dist/css-BVePVvTJ.mjs

@@ -0,0 +1,96 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { n as toCssVars } from "./toCssVars-CTGqZ_t3.mjs";
+
+//#region src/roots/preflight.ts
+/**
+* The theme's base stylesheet as a raw CSS string — box-sizing reset, body
+* typography/colour bound to semantic tokens, and the reduced-motion guard.
+* Inject once at the app root. Requires the `--tt-*` custom properties to be
+* present (via `getThemeStylesContent` / `<ThemeStyles>` / `<ThemeProvider>`).
+*/
+var PREFLIGHT_CSS = `*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--tt-text-body-md-font-family, system-ui, sans-serif);
+  font-size: var(--tt-text-body-md-font-size);
+  line-height: var(--tt-text-body-md-line-height);
+  color: var(--tt-colors-informational-primary-text-default);
+  background-color: var(--tt-colors-informational-primary-background-default);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}`;
+/**
+* Returns the theme's base stylesheet — see {@link PREFLIGHT_CSS}. A function
+* for API symmetry with `getThemeStylesContent`; the value is static.
+*
+* @example
+* ```ts
+* import { getPreflightStyles } from '@ttoss/fsl-theme/css';
+* res.type('text/css').send(getPreflightStyles());
+* ```
+*/
+var getPreflightStyles = () => {
+  return PREFLIGHT_CSS;
+};
+
+//#endregion
+//#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 { PREFLIGHT_CSS as n, getPreflightStyles as r, getThemeStylesContent as t };

package/dist/css-CKvOE4mT.cjs

@@ -0,0 +1,113 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+const require_toCssVars = require('./toCssVars-NGi4K2Oc.cjs');
+
+//#region src/roots/preflight.ts
+/**
+* The theme's base stylesheet as a raw CSS string — box-sizing reset, body
+* typography/colour bound to semantic tokens, and the reduced-motion guard.
+* Inject once at the app root. Requires the `--tt-*` custom properties to be
+* present (via `getThemeStylesContent` / `<ThemeStyles>` / `<ThemeProvider>`).
+*/
+var PREFLIGHT_CSS = `*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--tt-text-body-md-font-family, system-ui, sans-serif);
+  font-size: var(--tt-text-body-md-font-size);
+  line-height: var(--tt-text-body-md-line-height);
+  color: var(--tt-colors-informational-primary-text-default);
+  background-color: var(--tt-colors-informational-primary-background-default);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}`;
+/**
+* Returns the theme's base stylesheet — see {@link PREFLIGHT_CSS}. A function
+* for API symmetry with `getThemeStylesContent`; the value is static.
+*
+* @example
+* ```ts
+* import { getPreflightStyles } from '@ttoss/fsl-theme/css';
+* res.type('text/css').send(getPreflightStyles());
+* ```
+*/
+var getPreflightStyles = () => {
+  return PREFLIGHT_CSS;
+};
+
+//#endregion
+//#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 require_toCssVars.toCssVars(bundle, {
+    themeId,
+    systemModeFallback: options?.systemModeFallback
+  }).toCssString();
+};
+
+//#endregion
+Object.defineProperty(exports, 'PREFLIGHT_CSS', {
+  enumerable: true,
+  get: function () {
+    return PREFLIGHT_CSS;
+  }
+});
+Object.defineProperty(exports, 'getPreflightStyles', {
+  enumerable: true,
+  get: function () {
+    return getPreflightStyles;
+  }
+});
+Object.defineProperty(exports, 'getThemeStylesContent', {
+  enumerable: true,
+  get: function () {
+    return getThemeStylesContent;
+  }
+});

package/dist/css.cjs

@@ -3,47 +3,11 @@ Object.defineProperty(exports, Symbol.toStringTag, {
   value: 'Module'
 });
 const require_helpers = require('./helpers-BU40JvFA.cjs');
-const require_toCssVars = require('./toCssVars-D0BR23cP.cjs');
-
-//#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 require_toCssVars.toCssVars(bundle, {
-    themeId,
-    systemModeFallback: options?.systemModeFallback
-  }).toCssString();
-};
-
-//#endregion
-exports.getThemeStylesContent = getThemeStylesContent;
+const require_toCssVars = require('./toCssVars-NGi4K2Oc.cjs');
+const require_css = require('./css-CKvOE4mT.cjs');
+exports.PREFLIGHT_CSS = require_css.PREFLIGHT_CSS;
+exports.getPreflightStyles = require_css.getPreflightStyles;
+exports.getThemeStylesContent = require_css.getThemeStylesContent;
 exports.toCssVarName = require_toCssVars.toCssVarName;
 exports.toCssVars = require_toCssVars.toCssVars;
 exports.toFlatTokens = require_helpers.toFlatTokens;

package/dist/css.d.cts

@@ -1,5 +1,5 @@
 
-import { a as ThemeTokens, i as ThemeBundle } from "./Types-a_sfpbha.cjs";
+import { a as ThemeTokens, i as ThemeBundle } from "./Types-8o6d09ll.cjs";
 
 //#region src/roots/helpers.d.ts
 /**
@@ -24,6 +24,26 @@ declare const toFlatTokens: (theme: ThemeTokens, options?: {
  */
 type FlatTokenMap = Record<string, string | number>;
 //#endregion
+//#region src/roots/preflight.d.ts
+/**
+ * The theme's base stylesheet as a raw CSS string — box-sizing reset, body
+ * typography/colour bound to semantic tokens, and the reduced-motion guard.
+ * Inject once at the app root. Requires the `--tt-*` custom properties to be
+ * present (via `getThemeStylesContent` / `<ThemeStyles>` / `<ThemeProvider>`).
+ */
+declare const PREFLIGHT_CSS = "*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n}\n\nbody {\n  font-family: var(--tt-text-body-md-font-family, system-ui, sans-serif);\n  font-size: var(--tt-text-body-md-font-size);\n  line-height: var(--tt-text-body-md-line-height);\n  color: var(--tt-colors-informational-primary-text-default);\n  background-color: var(--tt-colors-informational-primary-background-default);\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}";
+/**
+ * Returns the theme's base stylesheet — see {@link PREFLIGHT_CSS}. A function
+ * for API symmetry with `getThemeStylesContent`; the value is static.
+ *
+ * @example
+ * ```ts
+ * import { getPreflightStyles } from '@ttoss/fsl-theme/css';
+ * res.type('text/css').send(getPreflightStyles());
+ * ```
+ */
+declare const getPreflightStyles: () => string;
+//#endregion
 //#region src/roots/toCssVars.d.ts
 /**
  * Convert a full token path to a CSS custom property name.
@@ -184,4 +204,4 @@ declare const getThemeStylesContent: (bundle: ThemeBundle, themeId?: string, opt
   systemModeFallback?: boolean;
 }) => string;
 //#endregion
-export { type BundleCssVarsOptions, type BundleCssVarsResult, type CssVarsOptions, type CssVarsResult, type FlatTokenMap, getThemeStylesContent, toCssVarName, toCssVars, toFlatTokens };
+export { type BundleCssVarsOptions, type BundleCssVarsResult, type CssVarsOptions, type CssVarsResult, type FlatTokenMap, PREFLIGHT_CSS, getPreflightStyles, getThemeStylesContent, toCssVarName, toCssVars, toFlatTokens };

package/dist/css.d.mts

@@ -1,5 +1,5 @@
 
-import { a as ThemeTokens, i as ThemeBundle } from "./Types-a_sfpbha.mjs";
+import { a as ThemeTokens, i as ThemeBundle } from "./Types-8o6d09ll.mjs";
 
 //#region src/roots/helpers.d.ts
 /**
@@ -24,6 +24,26 @@ declare const toFlatTokens: (theme: ThemeTokens, options?: {
  */
 type FlatTokenMap = Record<string, string | number>;
 //#endregion
+//#region src/roots/preflight.d.ts
+/**
+ * The theme's base stylesheet as a raw CSS string — box-sizing reset, body
+ * typography/colour bound to semantic tokens, and the reduced-motion guard.
+ * Inject once at the app root. Requires the `--tt-*` custom properties to be
+ * present (via `getThemeStylesContent` / `<ThemeStyles>` / `<ThemeProvider>`).
+ */
+declare const PREFLIGHT_CSS = "*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n}\n\nbody {\n  font-family: var(--tt-text-body-md-font-family, system-ui, sans-serif);\n  font-size: var(--tt-text-body-md-font-size);\n  line-height: var(--tt-text-body-md-line-height);\n  color: var(--tt-colors-informational-primary-text-default);\n  background-color: var(--tt-colors-informational-primary-background-default);\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}";
+/**
+ * Returns the theme's base stylesheet — see {@link PREFLIGHT_CSS}. A function
+ * for API symmetry with `getThemeStylesContent`; the value is static.
+ *
+ * @example
+ * ```ts
+ * import { getPreflightStyles } from '@ttoss/fsl-theme/css';
+ * res.type('text/css').send(getPreflightStyles());
+ * ```
+ */
+declare const getPreflightStyles: () => string;
+//#endregion
 //#region src/roots/toCssVars.d.ts
 /**
  * Convert a full token path to a CSS custom property name.
@@ -184,4 +204,4 @@ declare const getThemeStylesContent: (bundle: ThemeBundle, themeId?: string, opt
   systemModeFallback?: boolean;
 }) => string;
 //#endregion
-export { type BundleCssVarsOptions, type BundleCssVarsResult, type CssVarsOptions, type CssVarsResult, type FlatTokenMap, getThemeStylesContent, toCssVarName, toCssVars, toFlatTokens };
+export { type BundleCssVarsOptions, type BundleCssVarsResult, type CssVarsOptions, type CssVarsResult, type FlatTokenMap, PREFLIGHT_CSS, getPreflightStyles, getThemeStylesContent, toCssVarName, toCssVars, toFlatTokens };