@ttoss/fsl-ui 0.2.4 → 0.2.5

package/dist/components/Grid/Grid.d.mts

@@ -0,0 +1,87 @@
+
+import * as React from "react";
+
+//#region src/components/Grid/Grid.d.ts
+/** Formal semantic identity — Grid root (Structure entity, 2D layout). */
+declare const gridMeta: {
+  readonly displayName: "Grid";
+  readonly entity: "Structure";
+  readonly structure: "root";
+};
+/** A step of the gap scale. */
+type GridGap = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Track (item) alignment along an axis. */
+type GridAlign = 'start' | 'center' | 'end' | 'stretch';
+/**
+ * Minimum column width for a responsive auto-fit grid. A small named
+ * threshold scale (like a breakpoint), not a per-use length — the grid fits as
+ * many equal columns as the container allows, each at least this wide, and
+ * reflows the count automatically.
+ */
+type GridMinColumnWidth = 'xs' | 'sm' | 'md' | 'lg';
+/** Props for the Grid component. */
+interface GridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'className'> {
+  /**
+   * Number of equal-fraction columns (`repeat(N, minmax(0, 1fr))`). A
+   * structural integer, not a length — there is no raw track template.
+   * Ignored when `minColumnWidth` is set (responsive auto-fit takes over).
+   * @default 1
+   */
+  columns?: number;
+  /**
+   * Make the grid **responsive**: fit as many equal columns as the container
+   * allows, each at least this wide, reflowing the count automatically
+   * (`repeat(auto-fit, minmax(…, 1fr))`). Takes a named threshold, not a
+   * length. When set, it overrides `columns`.
+   */
+  minColumnWidth?: GridMinColumnWidth;
+  /**
+   * Number of equal-fraction rows. Omit to let rows size to content (the
+   * common case); set it only for explicit row grids.
+   */
+  rows?: number;
+  /**
+   * Space between tracks (row and column), from the gap scale. There is no
+   * raw-length vocabulary — rhythm always comes from the scale.
+   * @default 'md'
+   */
+  gap?: GridGap;
+  /** Block-axis alignment of items within their tracks (`align-items`). @default 'stretch' */
+  align?: GridAlign;
+  /** Inline-axis alignment of items within their tracks (`justify-items`). @default 'stretch' */
+  justify?: GridAlign;
+  /** The grid items. */
+  children?: React.ReactNode;
+}
+/**
+ * The 2D layout primitive — a CSS grid spaced from the FSL gap scale.
+ *
+ * Entity = Structure. Use it for card grids, form field matrices, and any
+ * two-dimensional arrangement. `columns`/`rows` are structural integers that
+ * resolve to equal, overflow-safe fraction tracks; `gap` draws only from the
+ * named scale, so grid rhythm stays consistent across a product. For a single
+ * axis of flow, reach for `Stack` instead.
+ *
+ * @example
+ * ```tsx
+ * // Fixed columns
+ * <Grid columns={3} gap="lg">…</Grid>
+ * // Responsive: as many ≥16rem columns as fit, reflowing automatically
+ * <Grid minColumnWidth="sm" gap="lg">…</Grid>
+ * ```
+ */
+declare const Grid: {
+  ({
+    columns,
+    minColumnWidth,
+    rows,
+    gap,
+    align,
+    justify,
+    children,
+    ...props
+  }: GridProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "Grid";
+};
+//#endregion
+export { Grid, GridAlign, GridGap, GridMinColumnWidth, GridProps, gridMeta };

package/dist/components/Grid/Grid.mjs

@@ -0,0 +1,87 @@
+/** 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/Grid/Grid.tsx
+/** Formal semantic identity — Grid root (Structure entity, 2D layout). */
+var gridMeta = {
+  displayName: "Grid",
+  entity: "Structure",
+  structure: "root"
+};
+var GAP = {
+  xs: vars.spacing.gap.stack.xs,
+  sm: vars.spacing.gap.stack.sm,
+  md: vars.spacing.gap.stack.md,
+  lg: vars.spacing.gap.stack.lg,
+  xl: vars.spacing.gap.stack.xl
+};
+var MIN_COLUMN_WIDTH = {
+  xs: "12rem",
+  sm: "16rem",
+  md: "20rem",
+  lg: "24rem"
+};
+var ALIGN = {
+  start: "start",
+  center: "center",
+  end: "end",
+  stretch: "stretch"
+};
+/** Equal-fraction track template with an overflow-safe minimum. */
+var tracks = count => {
+  return `repeat(${count}, minmax(0, 1fr))`;
+};
+/** Responsive auto-fit template — as many ≥`min`-wide columns as fit. */
+var autoTracks = min => {
+  return `repeat(auto-fit, minmax(min(100%, ${MIN_COLUMN_WIDTH[min]}), 1fr))`;
+};
+/**
+* The 2D layout primitive — a CSS grid spaced from the FSL gap scale.
+*
+* Entity = Structure. Use it for card grids, form field matrices, and any
+* two-dimensional arrangement. `columns`/`rows` are structural integers that
+* resolve to equal, overflow-safe fraction tracks; `gap` draws only from the
+* named scale, so grid rhythm stays consistent across a product. For a single
+* axis of flow, reach for `Stack` instead.
+*
+* @example
+* ```tsx
+* // Fixed columns
+* <Grid columns={3} gap="lg">…</Grid>
+* // Responsive: as many ≥16rem columns as fit, reflowing automatically
+* <Grid minColumnWidth="sm" gap="lg">…</Grid>
+* ```
+*/
+var Grid = ({
+  columns = 1,
+  minColumnWidth,
+  rows,
+  gap = "md",
+  align = "stretch",
+  justify = "stretch",
+  children,
+  ...props
+}) => {
+  const templateColumns = minColumnWidth === void 0 ? tracks(columns) : autoTracks(minColumnWidth);
+  return /* @__PURE__ */jsx("div", {
+    ...props,
+    "data-scope": "grid",
+    "data-part": "root",
+    "data-columns": minColumnWidth === void 0 ? columns : "auto",
+    "data-gap": gap,
+    style: {
+      display: "grid",
+      gridTemplateColumns: templateColumns,
+      gridTemplateRows: rows === void 0 ? void 0 : tracks(rows),
+      gap: GAP[gap],
+      alignItems: ALIGN[align],
+      justifyItems: ALIGN[justify]
+    },
+    children
+  });
+};
+Grid.displayName = gridMeta.displayName;
+
+//#endregion
+export { Grid, gridMeta };

package/dist/components/GridList/GridList.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/GridList/GridList.tsx
 /** Formal semantic identity — GridList root (Collection entity, surface). */
@@ -33,7 +33,7 @@ var buildRowStyle = ({
     display: "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,
     paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.control.sm,
     paddingInline: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
     borderRadius: _ttoss_fsl_theme_vars.vars.radii.control,

package/dist/components/GridList/GridList.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 { Checkbox, GridList, GridListItem } from "react-aria-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox, GridList, GridListItem } from "react-aria-components";
 
 //#region src/components/GridList/GridList.tsx
 /** Formal semantic identity — GridList root (Collection entity, surface). */
@@ -33,7 +33,7 @@ var buildRowStyle = ({
     display: "flex",
     alignItems: "center",
     gap: vars.spacing.gap.inline.sm,
-    minHeight: vars.sizing.hit.base,
+    minHeight: vars.sizing.hit,
     paddingBlock: vars.spacing.inset.control.sm,
     paddingInline: vars.spacing.inset.control.md,
     borderRadius: vars.radii.control,

package/dist/components/Group/Group.cjs

@@ -1,8 +1,8 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 const require_runtime = require('../../_virtual/_rolldown/runtime.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");
 let react = require("react");
 react = require_runtime.__toESM(react);
 

package/dist/components/Group/Group.mjs

@@ -1,7 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import { vars } from "@ttoss/fsl-theme/vars";
-import { Group } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Group } from "react-aria-components";
 import * as React from "react";
 
 //#region src/components/Group/Group.tsx

package/dist/components/Heading/Heading.cjs

@@ -0,0 +1,78 @@
+/** 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/Heading/Heading.tsx
+/** Formal semantic identity — Heading root (Structure entity, heading text). */
+var headingMeta = {
+  displayName: "Heading",
+  entity: "Structure",
+  structure: "root"
+};
+/** Typography token per heading size — the scale reaches the DOM only here. */
+var TYPE_BY_SIZE = {
+  "display-lg": _ttoss_fsl_theme_vars.vars.text.display.lg,
+  "display-md": _ttoss_fsl_theme_vars.vars.text.display.md,
+  "display-sm": _ttoss_fsl_theme_vars.vars.text.display.sm,
+  "headline-lg": _ttoss_fsl_theme_vars.vars.text.headline.lg,
+  "headline-md": _ttoss_fsl_theme_vars.vars.text.headline.md,
+  "headline-sm": _ttoss_fsl_theme_vars.vars.text.headline.sm,
+  "title-lg": _ttoss_fsl_theme_vars.vars.text.title.lg,
+  "title-md": _ttoss_fsl_theme_vars.vars.text.title.md,
+  "title-sm": _ttoss_fsl_theme_vars.vars.text.title.sm
+};
+/**
+* Default visual size per rank. Rank drives document structure (a11y); `size`
+* can override the visual step independently so heading order stays correct
+* even when the design wants a smaller-looking `<h2>`.
+*/
+var DEFAULT_SIZE_BY_LEVEL = {
+  1: "headline-lg",
+  2: "headline-md",
+  3: "title-lg",
+  4: "title-md",
+  5: "title-sm",
+  6: "title-sm"
+};
+/**
+* A document heading bound to the FSL type scale.
+*
+* Entity = Structure. `level` sets the `<h1>`…`<h6>` element (structure and
+* accessibility); `size` optionally overrides the visual step. There is no way
+* to pass a raw font size — the scale is the only vocabulary — which is how the
+* theme's typography reaches the screen consistently. Colour is inherited from
+* the surrounding surface.
+*
+* @example
+* ```tsx
+* <Heading level={1}>Billing</Heading>
+* <Heading level={2} size="title-md">Payment methods</Heading>
+* ```
+*/
+var Heading = ({
+  level,
+  size,
+  align = "start",
+  children,
+  ...props
+}) => {
+  const resolvedSize = size ?? DEFAULT_SIZE_BY_LEVEL[level];
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(`h${level}`, {
+    ...props,
+    "data-scope": "heading",
+    "data-part": "root",
+    "data-size": resolvedSize,
+    style: {
+      margin: 0,
+      color: "inherit",
+      textAlign: align,
+      ...TYPE_BY_SIZE[resolvedSize]
+    },
+    children
+  });
+};
+Heading.displayName = headingMeta.displayName;
+
+//#endregion
+exports.Heading = Heading;
+exports.headingMeta = headingMeta;

package/dist/components/Heading/Heading.d.cts

@@ -0,0 +1,63 @@
+
+import * as React from "react";
+
+//#region src/components/Heading/Heading.d.ts
+/** Formal semantic identity — Heading root (Structure entity, heading text). */
+declare const headingMeta: {
+  readonly displayName: "Heading";
+  readonly entity: "Structure";
+  readonly structure: "root";
+};
+/** Heading rank — sets the rendered `<h1>`…`<h6>` element and the default size. */
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+/** Inline heading alignment. */
+type HeadingAlign = 'start' | 'center' | 'end';
+/** A step of the heading type scale (`{family}-{step}`). */
+type HeadingSize = 'display-lg' | 'display-md' | 'display-sm' | 'headline-lg' | 'headline-md' | 'headline-sm' | 'title-lg' | 'title-md' | 'title-sm';
+/** Props for the Heading component. */
+interface HeadingProps extends Omit<React.HTMLAttributes<HTMLHeadingElement>, 'style' | 'className'> {
+  /**
+   * Heading rank — renders the matching `<h1>`…`<h6>`. Choose it for document
+   * structure and screen-reader navigation, not for visual size.
+   */
+  level: HeadingLevel;
+  /**
+   * Visual size from the heading type scale, overriding the rank's default.
+   * Use it to decouple appearance from rank (e.g. a visually small `<h2>`).
+   */
+  size?: HeadingSize;
+  /**
+   * Inline alignment (`text-align`). A layout keyword, not a design token.
+   * @default 'start'
+   */
+  align?: HeadingAlign;
+  /** The heading text. */
+  children?: React.ReactNode;
+}
+/**
+ * A document heading bound to the FSL type scale.
+ *
+ * Entity = Structure. `level` sets the `<h1>`…`<h6>` element (structure and
+ * accessibility); `size` optionally overrides the visual step. There is no way
+ * to pass a raw font size — the scale is the only vocabulary — which is how the
+ * theme's typography reaches the screen consistently. Colour is inherited from
+ * the surrounding surface.
+ *
+ * @example
+ * ```tsx
+ * <Heading level={1}>Billing</Heading>
+ * <Heading level={2} size="title-md">Payment methods</Heading>
+ * ```
+ */
+declare const Heading: {
+  ({
+    level,
+    size,
+    align,
+    children,
+    ...props
+  }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "Heading";
+};
+//#endregion
+export { Heading, HeadingAlign, HeadingLevel, HeadingProps, HeadingSize, headingMeta };

package/dist/components/Heading/Heading.d.mts

@@ -0,0 +1,63 @@
+
+import * as React from "react";
+
+//#region src/components/Heading/Heading.d.ts
+/** Formal semantic identity — Heading root (Structure entity, heading text). */
+declare const headingMeta: {
+  readonly displayName: "Heading";
+  readonly entity: "Structure";
+  readonly structure: "root";
+};
+/** Heading rank — sets the rendered `<h1>`…`<h6>` element and the default size. */
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+/** Inline heading alignment. */
+type HeadingAlign = 'start' | 'center' | 'end';
+/** A step of the heading type scale (`{family}-{step}`). */
+type HeadingSize = 'display-lg' | 'display-md' | 'display-sm' | 'headline-lg' | 'headline-md' | 'headline-sm' | 'title-lg' | 'title-md' | 'title-sm';
+/** Props for the Heading component. */
+interface HeadingProps extends Omit<React.HTMLAttributes<HTMLHeadingElement>, 'style' | 'className'> {
+  /**
+   * Heading rank — renders the matching `<h1>`…`<h6>`. Choose it for document
+   * structure and screen-reader navigation, not for visual size.
+   */
+  level: HeadingLevel;
+  /**
+   * Visual size from the heading type scale, overriding the rank's default.
+   * Use it to decouple appearance from rank (e.g. a visually small `<h2>`).
+   */
+  size?: HeadingSize;
+  /**
+   * Inline alignment (`text-align`). A layout keyword, not a design token.
+   * @default 'start'
+   */
+  align?: HeadingAlign;
+  /** The heading text. */
+  children?: React.ReactNode;
+}
+/**
+ * A document heading bound to the FSL type scale.
+ *
+ * Entity = Structure. `level` sets the `<h1>`…`<h6>` element (structure and
+ * accessibility); `size` optionally overrides the visual step. There is no way
+ * to pass a raw font size — the scale is the only vocabulary — which is how the
+ * theme's typography reaches the screen consistently. Colour is inherited from
+ * the surrounding surface.
+ *
+ * @example
+ * ```tsx
+ * <Heading level={1}>Billing</Heading>
+ * <Heading level={2} size="title-md">Payment methods</Heading>
+ * ```
+ */
+declare const Heading: {
+  ({
+    level,
+    size,
+    align,
+    children,
+    ...props
+  }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "Heading";
+};
+//#endregion
+export { Heading, HeadingAlign, HeadingLevel, HeadingProps, HeadingSize, headingMeta };

package/dist/components/Heading/Heading.mjs

@@ -0,0 +1,77 @@
+/** 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/Heading/Heading.tsx
+/** Formal semantic identity — Heading root (Structure entity, heading text). */
+var headingMeta = {
+  displayName: "Heading",
+  entity: "Structure",
+  structure: "root"
+};
+/** Typography token per heading size — the scale reaches the DOM only here. */
+var TYPE_BY_SIZE = {
+  "display-lg": vars.text.display.lg,
+  "display-md": vars.text.display.md,
+  "display-sm": vars.text.display.sm,
+  "headline-lg": vars.text.headline.lg,
+  "headline-md": vars.text.headline.md,
+  "headline-sm": vars.text.headline.sm,
+  "title-lg": vars.text.title.lg,
+  "title-md": vars.text.title.md,
+  "title-sm": vars.text.title.sm
+};
+/**
+* Default visual size per rank. Rank drives document structure (a11y); `size`
+* can override the visual step independently so heading order stays correct
+* even when the design wants a smaller-looking `<h2>`.
+*/
+var DEFAULT_SIZE_BY_LEVEL = {
+  1: "headline-lg",
+  2: "headline-md",
+  3: "title-lg",
+  4: "title-md",
+  5: "title-sm",
+  6: "title-sm"
+};
+/**
+* A document heading bound to the FSL type scale.
+*
+* Entity = Structure. `level` sets the `<h1>`…`<h6>` element (structure and
+* accessibility); `size` optionally overrides the visual step. There is no way
+* to pass a raw font size — the scale is the only vocabulary — which is how the
+* theme's typography reaches the screen consistently. Colour is inherited from
+* the surrounding surface.
+*
+* @example
+* ```tsx
+* <Heading level={1}>Billing</Heading>
+* <Heading level={2} size="title-md">Payment methods</Heading>
+* ```
+*/
+var Heading = ({
+  level,
+  size,
+  align = "start",
+  children,
+  ...props
+}) => {
+  const resolvedSize = size ?? DEFAULT_SIZE_BY_LEVEL[level];
+  return /* @__PURE__ */jsx(`h${level}`, {
+    ...props,
+    "data-scope": "heading",
+    "data-part": "root",
+    "data-size": resolvedSize,
+    style: {
+      margin: 0,
+      color: "inherit",
+      textAlign: align,
+      ...TYPE_BY_SIZE[resolvedSize]
+    },
+    children
+  });
+};
+Heading.displayName = headingMeta.displayName;
+
+//#endregion
+export { Heading, headingMeta };

package/dist/components/Link/Link.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/Link/Link.tsx
 /**

package/dist/components/Link/Link.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 { Link } from "react-aria-components";
 import { jsx } from "react/jsx-runtime";
+import { Link } from "react-aria-components";
 
 //#region src/components/Link/Link.tsx
 /**

package/dist/components/ListBox/ListBox.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/ListBox/ListBox.tsx
 /** Formal semantic identity — ListBox root (Collection entity, surface). */

package/dist/components/ListBox/ListBox.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 { ListBox, ListBoxItem } from "react-aria-components";
 import { jsx } from "react/jsx-runtime";
+import { ListBox, ListBoxItem } from "react-aria-components";
 
 //#region src/components/ListBox/ListBox.tsx
 /** Formal semantic identity — ListBox root (Collection entity, surface). */

package/dist/components/Meter/Meter.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/Meter/Meter.tsx
 /** Formal semantic identity — Meter root (Feedback entity). */
@@ -89,17 +89,27 @@ var Meter = ({
             display: "flex",
             justifyContent: "space-between",
             alignItems: "baseline",
+            gap: _ttoss_fsl_theme_vars.vars.spacing.gap.inline.sm,
             color: c?.text?.default,
             ..._ttoss_fsl_theme_vars.vars.text.label.md
           },
           children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)("span", {
             "data-scope": "meter",
             "data-part": "title",
+            style: {
+              minInlineSize: 0,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            },
             children: label
           }), showValueLabel && /* @__PURE__ */(0, react_jsx_runtime.jsx)("span", {
             "data-scope": "meter",
             "data-part": "status",
             "aria-hidden": true,
+            style: {
+              flex: "none"
+            },
             children: valueText ?? `${Math.round(percentage)}%`
           })]
         }), /* @__PURE__ */(0, react_jsx_runtime.jsx)("div", {

package/dist/components/Meter/Meter.mjs

@@ -1,7 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import { vars } from "@ttoss/fsl-theme/vars";
-import { Meter } from "react-aria-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Meter } from "react-aria-components";
 
 //#region src/components/Meter/Meter.tsx
 /** Formal semantic identity — Meter root (Feedback entity). */
@@ -89,17 +89,27 @@ var Meter$1 = ({
             display: "flex",
             justifyContent: "space-between",
             alignItems: "baseline",
+            gap: vars.spacing.gap.inline.sm,
             color: c?.text?.default,
             ...vars.text.label.md
           },
           children: [/* @__PURE__ */jsx("span", {
             "data-scope": "meter",
             "data-part": "title",
+            style: {
+              minInlineSize: 0,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            },
             children: label
           }), showValueLabel && /* @__PURE__ */jsx("span", {
             "data-scope": "meter",
             "data-part": "status",
             "aria-hidden": true,
+            style: {
+              flex: "none"
+            },
             children: valueText ?? `${Math.round(percentage)}%`
           })]
         }), /* @__PURE__ */jsx("div", {

package/dist/components/NumberField/NumberField.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/NumberField/NumberField.tsx
 /** Formal semantic identity — NumberField root (Input entity). */
@@ -24,7 +24,7 @@ var buildControlBoxStyle = ({
     boxSizing: "border-box",
     display: "inline-flex",
     alignItems: "center",
-    minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit.base,
+    minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit,
     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,