@ttoss/fsl-ui 0.2.4 → 0.2.5

package/dist/components/Surface/Surface.d.mts

@@ -0,0 +1,72 @@
+
+import { EvaluationsFor } from "../../semantics/taxonomy.mjs";
+import * as React from "react";
+
+//#region src/components/Surface/Surface.d.ts
+/** Formal semantic identity — Surface root (Structure entity, depth container). */
+declare const surfaceMeta: {
+  readonly displayName: "Surface";
+  readonly entity: "Structure";
+  readonly structure: "root";
+};
+/** The elevation strata a Surface can express (elevation.md surface contract). */
+type SurfaceLevel = 'flat' | 'raised' | 'overlay' | 'blocking';
+/** Inner padding drawn from the surface inset scale. */
+type SurfacePadding = 'none' | 'sm' | 'md' | 'lg';
+/** Props for the Surface component. */
+interface SurfaceProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'className'> {
+  /**
+   * Elevation stratum. `flat` sits flush with the page (no shadow); `raised`
+   * is the default card/panel depth; `overlay` floats above raised content;
+   * `blocking` is the strongest in-flow depth (dialog bodies). Depth is
+   * carried by the paired shadow recipe *and* the tonal surface colour, so it
+   * reads correctly in both light and dark (dark depth is the tonal step —
+   * shadows go invisible on a near-black canvas).
+   * @default 'raised'
+   */
+  level?: SurfaceLevel;
+  /**
+   * Inner padding from the surface inset scale. `none` removes padding for
+   * surfaces that host their own edge-to-edge content (lists, media).
+   * @default 'md'
+   */
+  padding?: SurfacePadding;
+  /**
+   * Emphasis of the hairline boundary. `muted` is the quiet default that lets
+   * elevation carry the separation; `primary` draws a firmer edge.
+   * @default 'muted'
+   */
+  evaluation?: EvaluationsFor<(typeof surfaceMeta)['entity']>;
+  /** The surface's content. */
+  children?: React.ReactNode;
+}
+/**
+ * A depth-bearing container — the surface primitive of the FSL grammar.
+ *
+ * Entity = Structure. Use it wherever a region needs to read as a distinct
+ * surface: cards, panels, sheets, the body of a dialog. Pick the `level` by
+ * how the surface should sit relative to the page, not by how it should look —
+ * the theme decides the shadow and tonal treatment per mode. Non-interactive:
+ * it owns no hover/focus chrome; interactivity belongs to the controls placed
+ * inside it.
+ *
+ * @example
+ * ```tsx
+ * <Surface level="raised" padding="lg">
+ *   <Heading level={3}>Storage</Heading>
+ *   <Meter aria-label="Used" label="Used" value={72} />
+ * </Surface>
+ * ```
+ */
+declare const Surface: {
+  ({
+    level,
+    padding,
+    evaluation,
+    children,
+    ...props
+  }: SurfaceProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "Surface";
+};
+//#endregion
+export { Surface, SurfaceLevel, SurfacePadding, SurfaceProps, surfaceMeta };

package/dist/components/Surface/Surface.mjs

@@ -0,0 +1,83 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { vars } from "@ttoss/fsl-theme/vars";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Surface/Surface.tsx
+/** Formal semantic identity — Surface root (Structure entity, depth container). */
+var surfaceMeta = {
+  displayName: "Surface",
+  entity: "Structure",
+  structure: "root"
+};
+/** Inset padding per scale step; `none` collapses to zero. */
+var PADDING_BY_KEY = {
+  none: "0",
+  sm: vars.spacing.inset.surface.sm,
+  md: vars.spacing.inset.surface.md,
+  lg: vars.spacing.inset.surface.lg
+};
+/** Text colour for content sitting on the surface. */
+var SURFACE_TEXT = vars.colors.informational.primary.text?.default;
+/**
+* The surface's background colour. Raised strata read the tonal surface colour
+* (the "colour at depth"); `flat` — or a theme that ships no tonal group — is
+* canvas, so it falls back to the primary informational background.
+*/
+var backgroundFor = level => {
+  const tonal = vars.elevation.tonal;
+  if (level === "flat" || tonal === void 0) return vars.colors.informational.primary.background?.default;
+  return tonal[level];
+};
+/** The hairline boundary colour for the given evaluation. */
+var borderColorFor = evaluation => {
+  return vars.colors.informational[evaluation]?.border?.default ?? "transparent";
+};
+/**
+* A depth-bearing container — the surface primitive of the FSL grammar.
+*
+* Entity = Structure. Use it wherever a region needs to read as a distinct
+* surface: cards, panels, sheets, the body of a dialog. Pick the `level` by
+* how the surface should sit relative to the page, not by how it should look —
+* the theme decides the shadow and tonal treatment per mode. Non-interactive:
+* it owns no hover/focus chrome; interactivity belongs to the controls placed
+* inside it.
+*
+* @example
+* ```tsx
+* <Surface level="raised" padding="lg">
+*   <Heading level={3}>Storage</Heading>
+*   <Meter aria-label="Used" label="Used" value={72} />
+* </Surface>
+* ```
+*/
+var Surface = ({
+  level = "raised",
+  padding = "md",
+  evaluation = "muted",
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */jsx("div", {
+    ...props,
+    "data-scope": "surface",
+    "data-part": "root",
+    "data-level": level,
+    "data-evaluation": evaluation,
+    style: {
+      boxSizing: "border-box",
+      padding: PADDING_BY_KEY[padding],
+      color: SURFACE_TEXT,
+      background: backgroundFor(level),
+      boxShadow: vars.elevation.surface[level],
+      borderRadius: vars.radii.surface,
+      borderWidth: vars.border.outline.surface.width,
+      borderStyle: vars.border.outline.surface.style,
+      borderColor: borderColorFor(evaluation)
+    },
+    children
+  });
+};
+Surface.displayName = surfaceMeta.displayName;
+
+//#endregion
+export { Surface, surfaceMeta };

package/dist/components/Switch/Switch.cjs

@@ -2,8 +2,8 @@
 const require_focusRing = require('../../tokens/focusRing.cjs');
 const require_resolveInteractiveStyle = require('../../tokens/resolveInteractiveStyle.cjs');
 let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
-let react_aria_components = require("react-aria-components");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
 
 //#region src/components/Switch/Switch.tsx
 /** Formal semantic identity — Switch root (Selection entity, toggle.binary). */
@@ -81,7 +81,7 @@ var resolveLabelColor = ({
 *
 * Entity = Selection → reads `vars.colors.input.primary.*`, radii: `round`
 * (pill track + circular thumb), border: `outline.control`,
-* sizing: `hit.base`, motion: `feedback`.
+* sizing: `hit`, motion: `feedback`.
 *
 * @example
 * ```tsx
@@ -106,7 +106,7 @@ var Switch = ({
         display: "inline-flex",
         alignItems: "center",
         gap: _ttoss_fsl_theme_vars.vars.spacing.gap.inline.sm,
-        minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit.base,
+        minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit,
         cursor: isDisabled ? "not-allowed" : "pointer",
         opacity: isDisabled ? _ttoss_fsl_theme_vars.vars.opacity.disabled : void 0,
         ..._ttoss_fsl_theme_vars.vars.text.label.md,

package/dist/components/Switch/Switch.d.cts

@@ -24,7 +24,7 @@ interface SwitchProps$1 extends Omit<SwitchProps, 'style' | 'children'> {
  *
  * Entity = Selection → reads `vars.colors.input.primary.*`, radii: `round`
  * (pill track + circular thumb), border: `outline.control`,
- * sizing: `hit.base`, motion: `feedback`.
+ * sizing: `hit`, motion: `feedback`.
  *
  * @example
  * ```tsx

package/dist/components/Switch/Switch.d.mts

@@ -24,7 +24,7 @@ interface SwitchProps$1 extends Omit<SwitchProps, 'style' | 'children'> {
  *
  * Entity = Selection → reads `vars.colors.input.primary.*`, radii: `round`
  * (pill track + circular thumb), border: `outline.control`,
- * sizing: `hit.base`, motion: `feedback`.
+ * sizing: `hit`, motion: `feedback`.
  *
  * @example
  * ```tsx

package/dist/components/Switch/Switch.mjs

@@ -2,8 +2,8 @@
 import { focusRingOutline } from "../../tokens/focusRing.mjs";
 import { resolveInteractiveStyle } from "../../tokens/resolveInteractiveStyle.mjs";
 import { vars } from "@ttoss/fsl-theme/vars";
-import { Switch } from "react-aria-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Switch } from "react-aria-components";
 
 //#region src/components/Switch/Switch.tsx
 /** Formal semantic identity — Switch root (Selection entity, toggle.binary). */
@@ -81,7 +81,7 @@ var resolveLabelColor = ({
 *
 * Entity = Selection → reads `vars.colors.input.primary.*`, radii: `round`
 * (pill track + circular thumb), border: `outline.control`,
-* sizing: `hit.base`, motion: `feedback`.
+* sizing: `hit`, motion: `feedback`.
 *
 * @example
 * ```tsx
@@ -106,7 +106,7 @@ var Switch$1 = ({
         display: "inline-flex",
         alignItems: "center",
         gap: vars.spacing.gap.inline.sm,
-        minHeight: vars.sizing.hit.base,
+        minHeight: vars.sizing.hit,
         cursor: isDisabled ? "not-allowed" : "pointer",
         opacity: isDisabled ? vars.opacity.disabled : void 0,
         ...vars.text.label.md,

package/dist/components/Tabs/Tabs.cjs

@@ -2,8 +2,8 @@
 const require_focusRing = require('../../tokens/focusRing.cjs');
 const require_resolveInteractiveStyle = require('../../tokens/resolveInteractiveStyle.cjs');
 let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
-let react_aria_components = require("react-aria-components");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
 
 //#region src/components/Tabs/Tabs.tsx
 /** Formal semantic identity — Tabs root (Navigation entity). */

package/dist/components/Tabs/Tabs.mjs

@@ -2,8 +2,8 @@
 import { focusRingOutline } from "../../tokens/focusRing.mjs";
 import { resolveInteractiveStyle } from "../../tokens/resolveInteractiveStyle.mjs";
 import { vars } from "@ttoss/fsl-theme/vars";
-import { Tab, TabList, TabPanel, Tabs } from "react-aria-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Tab, TabList, TabPanel, Tabs } from "react-aria-components";
 
 //#region src/components/Tabs/Tabs.tsx
 /** Formal semantic identity — Tabs root (Navigation entity). */

package/dist/components/Text/Text.cjs

@@ -0,0 +1,69 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Text/Text.tsx
+/** Formal semantic identity — Text root (Structure entity, body/label text). */
+var textMeta = {
+  displayName: "Text",
+  entity: "Structure",
+  structure: "root"
+};
+/** Typography token per variant — the scale reaches the DOM only here. */
+var TYPE_BY_VARIANT = {
+  "body-lg": _ttoss_fsl_theme_vars.vars.text.body.lg,
+  "body-md": _ttoss_fsl_theme_vars.vars.text.body.md,
+  "body-sm": _ttoss_fsl_theme_vars.vars.text.body.sm,
+  "label-lg": _ttoss_fsl_theme_vars.vars.text.label.lg,
+  "label-md": _ttoss_fsl_theme_vars.vars.text.label.md,
+  "label-sm": _ttoss_fsl_theme_vars.vars.text.label.sm
+};
+/** Muted text colour; `default` tone inherits (no colour set). */
+var colorForTone = tone => {
+  return tone === "muted" ? _ttoss_fsl_theme_vars.vars.colors.informational.muted.text?.default : "inherit";
+};
+/**
+* Running copy and labels bound to the FSL type scale.
+*
+* Entity = Structure. `variant` picks the step of the body/label scale — there
+* is no raw font-size vocabulary, which is how the theme's typography reaches
+* the screen consistently. `tone="muted"` is the sanctioned way to build text
+* hierarchy (secondary copy recedes); otherwise colour is inherited from the
+* surface.
+*
+* @example
+* ```tsx
+* <Text>Your changes are saved automatically.</Text>
+* <Text variant="label-md" tone="muted">Last updated 2 minutes ago</Text>
+* ```
+*/
+var Text = ({
+  variant = "body-md",
+  tone = "default",
+  align = "start",
+  numeric = "normal",
+  as = "p",
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(as, {
+    ...props,
+    "data-scope": "text",
+    "data-part": "root",
+    "data-variant": variant,
+    "data-tone": tone,
+    style: {
+      margin: 0,
+      color: colorForTone(tone),
+      textAlign: align,
+      fontVariantNumeric: numeric === "tabular" ? "tabular-nums" : void 0,
+      ...TYPE_BY_VARIANT[variant]
+    },
+    children
+  });
+};
+Text.displayName = textMeta.displayName;
+
+//#endregion
+exports.Text = Text;
+exports.textMeta = textMeta;

package/dist/components/Text/Text.d.cts

@@ -0,0 +1,84 @@
+
+import * as React from "react";
+
+//#region src/components/Text/Text.d.ts
+/** Formal semantic identity — Text root (Structure entity, body/label text). */
+declare const textMeta: {
+  readonly displayName: "Text";
+  readonly entity: "Structure";
+  readonly structure: "root";
+};
+/** A step of the body/label type scale (`{family}-{step}`). */
+type TextVariant = 'body-lg' | 'body-md' | 'body-sm' | 'label-lg' | 'label-md' | 'label-sm';
+/** The tone of the text colour — default inherits; `muted` recedes. */
+type TextTone = 'default' | 'muted';
+/** Inline text alignment. */
+type TextAlign = 'start' | 'center' | 'end';
+/** Numeric figure style — `tabular` aligns digits in columns (metrics, tables). */
+type TextNumeric = 'normal' | 'tabular';
+/** The element Text renders as. */
+type TextAs = 'p' | 'span' | 'div';
+/** Props for the Text component. */
+interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'style' | 'className'> {
+  /**
+   * Step of the body/label type scale. `body-*` is running copy; `label-*` is
+   * the tighter, slightly heavier form for field labels and captions.
+   * @default 'body-md'
+   */
+  variant?: TextVariant;
+  /**
+   * Colour tone. `default` inherits the surrounding surface's text colour;
+   * `muted` recedes to the muted informational text colour for secondary copy.
+   * @default 'default'
+   */
+  tone?: TextTone;
+  /**
+   * Inline alignment (`text-align`). A layout keyword, not a design token.
+   * @default 'start'
+   */
+  align?: TextAlign;
+  /**
+   * Numeric figure style. `tabular` renders `tabular-nums` so digits occupy
+   * equal width — use it for metrics, counts, and any figures that must line up
+   * in a column. A rendering *meaning*, not a raw style.
+   * @default 'normal'
+   */
+  numeric?: TextNumeric;
+  /**
+   * The element to render. `p` for paragraphs, `span` for inline runs, `div`
+   * for grouping.
+   * @default 'p'
+   */
+  as?: TextAs;
+  /** The text content. */
+  children?: React.ReactNode;
+}
+/**
+ * Running copy and labels bound to the FSL type scale.
+ *
+ * Entity = Structure. `variant` picks the step of the body/label scale — there
+ * is no raw font-size vocabulary, which is how the theme's typography reaches
+ * the screen consistently. `tone="muted"` is the sanctioned way to build text
+ * hierarchy (secondary copy recedes); otherwise colour is inherited from the
+ * surface.
+ *
+ * @example
+ * ```tsx
+ * <Text>Your changes are saved automatically.</Text>
+ * <Text variant="label-md" tone="muted">Last updated 2 minutes ago</Text>
+ * ```
+ */
+declare const Text: {
+  ({
+    variant,
+    tone,
+    align,
+    numeric,
+    as,
+    children,
+    ...props
+  }: TextProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "Text";
+};
+//#endregion
+export { Text, TextAlign, TextAs, TextNumeric, TextProps, TextTone, TextVariant, textMeta };

package/dist/components/Text/Text.d.mts

@@ -0,0 +1,84 @@
+
+import * as React from "react";
+
+//#region src/components/Text/Text.d.ts
+/** Formal semantic identity — Text root (Structure entity, body/label text). */
+declare const textMeta: {
+  readonly displayName: "Text";
+  readonly entity: "Structure";
+  readonly structure: "root";
+};
+/** A step of the body/label type scale (`{family}-{step}`). */
+type TextVariant = 'body-lg' | 'body-md' | 'body-sm' | 'label-lg' | 'label-md' | 'label-sm';
+/** The tone of the text colour — default inherits; `muted` recedes. */
+type TextTone = 'default' | 'muted';
+/** Inline text alignment. */
+type TextAlign = 'start' | 'center' | 'end';
+/** Numeric figure style — `tabular` aligns digits in columns (metrics, tables). */
+type TextNumeric = 'normal' | 'tabular';
+/** The element Text renders as. */
+type TextAs = 'p' | 'span' | 'div';
+/** Props for the Text component. */
+interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'style' | 'className'> {
+  /**
+   * Step of the body/label type scale. `body-*` is running copy; `label-*` is
+   * the tighter, slightly heavier form for field labels and captions.
+   * @default 'body-md'
+   */
+  variant?: TextVariant;
+  /**
+   * Colour tone. `default` inherits the surrounding surface's text colour;
+   * `muted` recedes to the muted informational text colour for secondary copy.
+   * @default 'default'
+   */
+  tone?: TextTone;
+  /**
+   * Inline alignment (`text-align`). A layout keyword, not a design token.
+   * @default 'start'
+   */
+  align?: TextAlign;
+  /**
+   * Numeric figure style. `tabular` renders `tabular-nums` so digits occupy
+   * equal width — use it for metrics, counts, and any figures that must line up
+   * in a column. A rendering *meaning*, not a raw style.
+   * @default 'normal'
+   */
+  numeric?: TextNumeric;
+  /**
+   * The element to render. `p` for paragraphs, `span` for inline runs, `div`
+   * for grouping.
+   * @default 'p'
+   */
+  as?: TextAs;
+  /** The text content. */
+  children?: React.ReactNode;
+}
+/**
+ * Running copy and labels bound to the FSL type scale.
+ *
+ * Entity = Structure. `variant` picks the step of the body/label scale — there
+ * is no raw font-size vocabulary, which is how the theme's typography reaches
+ * the screen consistently. `tone="muted"` is the sanctioned way to build text
+ * hierarchy (secondary copy recedes); otherwise colour is inherited from the
+ * surface.
+ *
+ * @example
+ * ```tsx
+ * <Text>Your changes are saved automatically.</Text>
+ * <Text variant="label-md" tone="muted">Last updated 2 minutes ago</Text>
+ * ```
+ */
+declare const Text: {
+  ({
+    variant,
+    tone,
+    align,
+    numeric,
+    as,
+    children,
+    ...props
+  }: TextProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "Text";
+};
+//#endregion
+export { Text, TextAlign, TextAs, TextNumeric, TextProps, TextTone, TextVariant, textMeta };

package/dist/components/Text/Text.mjs

@@ -0,0 +1,68 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { vars } from "@ttoss/fsl-theme/vars";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Text/Text.tsx
+/** Formal semantic identity — Text root (Structure entity, body/label text). */
+var textMeta = {
+  displayName: "Text",
+  entity: "Structure",
+  structure: "root"
+};
+/** Typography token per variant — the scale reaches the DOM only here. */
+var TYPE_BY_VARIANT = {
+  "body-lg": vars.text.body.lg,
+  "body-md": vars.text.body.md,
+  "body-sm": vars.text.body.sm,
+  "label-lg": vars.text.label.lg,
+  "label-md": vars.text.label.md,
+  "label-sm": vars.text.label.sm
+};
+/** Muted text colour; `default` tone inherits (no colour set). */
+var colorForTone = tone => {
+  return tone === "muted" ? vars.colors.informational.muted.text?.default : "inherit";
+};
+/**
+* Running copy and labels bound to the FSL type scale.
+*
+* Entity = Structure. `variant` picks the step of the body/label scale — there
+* is no raw font-size vocabulary, which is how the theme's typography reaches
+* the screen consistently. `tone="muted"` is the sanctioned way to build text
+* hierarchy (secondary copy recedes); otherwise colour is inherited from the
+* surface.
+*
+* @example
+* ```tsx
+* <Text>Your changes are saved automatically.</Text>
+* <Text variant="label-md" tone="muted">Last updated 2 minutes ago</Text>
+* ```
+*/
+var Text = ({
+  variant = "body-md",
+  tone = "default",
+  align = "start",
+  numeric = "normal",
+  as = "p",
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */jsx(as, {
+    ...props,
+    "data-scope": "text",
+    "data-part": "root",
+    "data-variant": variant,
+    "data-tone": tone,
+    style: {
+      margin: 0,
+      color: colorForTone(tone),
+      textAlign: align,
+      fontVariantNumeric: numeric === "tabular" ? "tabular-nums" : void 0,
+      ...TYPE_BY_VARIANT[variant]
+    },
+    children
+  });
+};
+Text.displayName = textMeta.displayName;
+
+//#endregion
+export { Text, textMeta };

package/dist/components/Toast/Toast.cjs

@@ -3,8 +3,8 @@ const require_focusRing = require('../../tokens/focusRing.cjs');
 const require_resolveInteractiveStyle = require('../../tokens/resolveInteractiveStyle.cjs');
 const require_Icon = require('../Icon/Icon.cjs');
 let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
-let react_aria_components = require("react-aria-components");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
 
 //#region src/components/Toast/Toast.tsx
 /** Formal semantic identity — Toast root (Feedback entity). */

package/dist/components/Toast/Toast.mjs

@@ -3,8 +3,8 @@ import { focusRingOutline } from "../../tokens/focusRing.mjs";
 import { resolveInteractiveStyle } from "../../tokens/resolveInteractiveStyle.mjs";
 import { Icon } from "../Icon/Icon.mjs";
 import { vars } from "@ttoss/fsl-theme/vars";
-import { Button, Text, UNSTABLE_Toast, UNSTABLE_ToastContent, UNSTABLE_ToastQueue, UNSTABLE_ToastRegion } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Text, UNSTABLE_Toast, UNSTABLE_ToastContent, UNSTABLE_ToastQueue, UNSTABLE_ToastRegion } from "react-aria-components";
 
 //#region src/components/Toast/Toast.tsx
 /** Formal semantic identity — Toast root (Feedback entity). */

package/dist/components/ToggleButton/ToggleButton.cjs

@@ -1,8 +1,8 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 const require_focusRing = require('../../tokens/focusRing.cjs');
 let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
-let react_aria_components = require("react-aria-components");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
 
 //#region src/components/ToggleButton/ToggleButton.tsx
 /** Formal semantic identity — ToggleButton root (Action entity, toggle). */
@@ -99,7 +99,7 @@ var ToggleButton = ({
         borderRadius: _ttoss_fsl_theme_vars.vars.radii.control,
         borderWidth: _ttoss_fsl_theme_vars.vars.border.outline.control.width,
         borderStyle: _ttoss_fsl_theme_vars.vars.border.outline.control.style,
-        minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit.base,
+        minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit,
         paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.control.sm,
         paddingInline: _ttoss_fsl_theme_vars.vars.spacing.inset.control.lg,
         ..._ttoss_fsl_theme_vars.vars.text.label.md,

package/dist/components/ToggleButton/ToggleButton.mjs

@@ -1,8 +1,8 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import { focusRingOutline } from "../../tokens/focusRing.mjs";
 import { vars } from "@ttoss/fsl-theme/vars";
-import { ToggleButton } from "react-aria-components";
 import { jsx } from "react/jsx-runtime";
+import { ToggleButton } from "react-aria-components";
 
 //#region src/components/ToggleButton/ToggleButton.tsx
 /** Formal semantic identity — ToggleButton root (Action entity, toggle). */
@@ -99,7 +99,7 @@ var ToggleButton$1 = ({
         borderRadius: vars.radii.control,
         borderWidth: vars.border.outline.control.width,
         borderStyle: vars.border.outline.control.style,
-        minHeight: vars.sizing.hit.base,
+        minHeight: vars.sizing.hit,
         paddingBlock: vars.spacing.inset.control.sm,
         paddingInline: vars.spacing.inset.control.lg,
         ...vars.text.label.md,

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.cjs

@@ -1,7 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
-let react_aria_components = require("react-aria-components");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
 
 //#region src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
 /** Formal semantic identity — ToggleButtonGroup root (Selection entity). */

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.mjs

@@ -1,7 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import { vars } from "@ttoss/fsl-theme/vars";
-import { ToggleButtonGroup } from "react-aria-components";
 import { jsx } from "react/jsx-runtime";
+import { ToggleButtonGroup } from "react-aria-components";
 
 //#region src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
 /** Formal semantic identity — ToggleButtonGroup root (Selection entity). */

package/dist/components/Toolbar/Toolbar.cjs

@@ -1,7 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
-let react_aria_components = require("react-aria-components");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
 
 //#region src/components/Toolbar/Toolbar.tsx
 /** Formal semantic identity — Toolbar root (Structure entity, actions bar). */

package/dist/components/Toolbar/Toolbar.mjs

@@ -1,7 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import { vars } from "@ttoss/fsl-theme/vars";
-import { Toolbar } from "react-aria-components";
 import { jsx } from "react/jsx-runtime";
+import { Toolbar } from "react-aria-components";
 
 //#region src/components/Toolbar/Toolbar.tsx
 /** Formal semantic identity — Toolbar root (Structure entity, actions bar). */