@12-apps/ui 6.32.0 → 6.33.0

package/dist/form/Menubar.js

@@ -2,16 +2,17 @@ import "../chunk-XLUADX33.js";
 import {
   Menubar,
   MenubarGroup
-} from "../chunk-TCLBB7U4.js";
-import "../chunk-NFLY5JMP.js";
+} from "../chunk-BM4CGQED.js";
+import "../chunk-4LMY5I5E.js";
 import {
   MenubarSeparator
 } from "../chunk-YMGHTZA6.js";
-import "../chunk-KCFCEWF7.js";
-import "../chunk-HQZRWOSS.js";
+import "../chunk-RJXRZW66.js";
+import "../chunk-KJHQYPKT.js";
 import "../chunk-42VH7N5L.js";
 import "../chunk-HPK33ACY.js";
-import "../chunk-3DO5MFXA.js";
+import "../chunk-XCP5L665.js";
+import "../chunk-YKCAJ2TN.js";
 import "../chunk-7ZPUN7TV.js";
 import "../chunk-PT6TCWIW.js";
 import "../chunk-CGO452DC.js";

package/dist/form/PhoneInput.js

@@ -1,10 +1,10 @@
 import "../chunk-GQ6WEQCZ.js";
 import {
   PhoneInput
-} from "../chunk-HEVST4CS.js";
-import "../chunk-BGYLL467.js";
-import "../chunk-5P6OV64V.js";
+} from "../chunk-SGGDMTKP.js";
+import "../chunk-TXHJX2NG.js";
 import "../chunk-3JDP5OUR.js";
+import "../chunk-5P6OV64V.js";
 import "../chunk-CGO452DC.js";
 import "../chunk-GDN2LUTZ.js";
 import "../chunk-7FDU3FIN.js";

package/dist/form/total-form.js

@@ -1,3 +1,6 @@
+import {
+  SubmitButton
+} from "../chunk-JPXG7IFW.js";
 import {
   FormErrorSnackbar
 } from "../chunk-XJUEHG72.js";
@@ -6,10 +9,11 @@ import {
 } from "../chunk-E6OILRUU.js";
 import {
   Fields_exports
-} from "../chunk-5NH24MF5.js";
+} from "../chunk-TUYN6XZI.js";
+import "../chunk-2SKNSQCP.js";
 import {
   CategoryField
-} from "../chunk-DAQ2ZDU2.js";
+} from "../chunk-LE7IHEU4.js";
 import "../chunk-KAPKMVKR.js";
 import {
   TextField
@@ -17,10 +21,6 @@ import {
 import {
   SelectField
 } from "../chunk-65JHGT5F.js";
-import "../chunk-2SKNSQCP.js";
-import {
-  SubmitButton
-} from "../chunk-JPXG7IFW.js";
 import {
   FormContext,
   useFormContext
@@ -35,21 +35,21 @@ import "../chunk-JXUWWPZR.js";
 import "../chunk-6XLMTOJ3.js";
 import "../chunk-5FA5S2YN.js";
 import "../chunk-N5ZWC6CB.js";
-import "../chunk-3NA7AO6H.js";
+import "../chunk-URWNRC2P.js";
 import "../chunk-LMXWI3DD.js";
-import "../chunk-MGP5LLEK.js";
+import "../chunk-IGO5DC7D.js";
+import "../chunk-V6Z4XS3I.js";
 import "../chunk-NU3EQX2L.js";
 import "../chunk-MQZDTGGJ.js";
 import "../chunk-67N6TH6E.js";
+import "../chunk-XHHR6G35.js";
 import "../chunk-PH5XJGKJ.js";
 import "../chunk-KMUSTQA6.js";
 import "../chunk-DMNZD3Q7.js";
 import "../chunk-LGLHU55A.js";
-import "../chunk-V6Z4XS3I.js";
 import "../chunk-RZVUY2MO.js";
 import "../chunk-USJPZ5Q7.js";
 import "../chunk-R2AZOWEZ.js";
-import "../chunk-XHHR6G35.js";
 import "../chunk-PN4HVM43.js";
 import "../chunk-QYKDY4EI.js";
 import "../chunk-P3L42CBB.js";

package/dist/icons.js

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "./chunk-NLBIG5LU.js";
+} from "./chunk-IZBDSPTW.js";
 import {
   ICON_NAMES,
   ICON_PATHS
@@ -10,10 +10,11 @@ import {
   ICON_SIZES,
   iconSize
 } from "./chunk-RTSK5OZT.js";
-import "./chunk-H4NWU2ZN.js";
-import "./chunk-2DJIS2WQ.js";
+import "./chunk-TK36COCP.js";
+import "./chunk-KCBAPMLH.js";
 import "./chunk-TYJR4GOF.js";
-import "./chunk-3DO5MFXA.js";
+import "./chunk-XCP5L665.js";
+import "./chunk-YKCAJ2TN.js";
 import "./chunk-7ZPUN7TV.js";
 import "./chunk-PT6TCWIW.js";
 import "./chunk-CGO452DC.js";

package/dist/layout/Box.js

@@ -1,14 +1,15 @@
 import {
   Box
-} from "../chunk-YZKA7UJK.js";
+} from "../chunk-GCWF5AQE.js";
 import {
   resolveBoxLayout
 } from "../chunk-7V6ZRQYW.js";
 import "../chunk-OCUVKI63.js";
-import "../chunk-H4NWU2ZN.js";
-import "../chunk-2DJIS2WQ.js";
+import "../chunk-TK36COCP.js";
+import "../chunk-KCBAPMLH.js";
 import "../chunk-TYJR4GOF.js";
-import "../chunk-3DO5MFXA.js";
+import "../chunk-XCP5L665.js";
+import "../chunk-YKCAJ2TN.js";
 import "../chunk-7ZPUN7TV.js";
 import "../chunk-PT6TCWIW.js";
 import "../chunk-CGO452DC.js";

package/dist/layout/ContentToolbar.js

@@ -1,4 +1,7 @@
 import "../chunk-MOLQGQEQ.js";
+import {
+  ContentToolbar
+} from "../chunk-SZB2Z6QN.js";
 import {
   ColumnsMenu
 } from "../chunk-MMPJ2MCE.js";
@@ -18,9 +21,6 @@ import "../chunk-VNHLYDTX.js";
 import {
   FilterTrigger
 } from "../chunk-JLWAYBOP.js";
-import {
-  ContentToolbar
-} from "../chunk-SZB2Z6QN.js";
 import "../chunk-CGO452DC.js";
 import "../chunk-GDN2LUTZ.js";
 import "../chunk-7FDU3FIN.js";

package/dist/layout/Skeleton.js

@@ -1,10 +1,10 @@
 import "../chunk-724ZONOL.js";
 import {
   Skeleton
-} from "../chunk-YD77RANW.js";
+} from "../chunk-7VN7LFBA.js";
+import "../chunk-7WDPC46N.js";
 import "../chunk-ZOW2CCMO.js";
 import "../chunk-BRMGHMYB.js";
-import "../chunk-7WDPC46N.js";
 import "../chunk-TYJR4GOF.js";
 import "../chunk-PZ5AY32C.js";
 export {

package/dist/layout/Stack.js

@@ -1,14 +1,15 @@
 import {
   Stack
-} from "../chunk-U3ON6YW3.js";
+} from "../chunk-NNAACCN2.js";
 import "../chunk-4GGH6ZQ7.js";
-import "../chunk-YZKA7UJK.js";
+import "../chunk-GCWF5AQE.js";
 import "../chunk-7V6ZRQYW.js";
 import "../chunk-OCUVKI63.js";
-import "../chunk-H4NWU2ZN.js";
-import "../chunk-2DJIS2WQ.js";
+import "../chunk-TK36COCP.js";
+import "../chunk-KCBAPMLH.js";
 import "../chunk-TYJR4GOF.js";
-import "../chunk-3DO5MFXA.js";
+import "../chunk-XCP5L665.js";
+import "../chunk-YKCAJ2TN.js";
 import "../chunk-7ZPUN7TV.js";
 import "../chunk-PT6TCWIW.js";
 import "../chunk-CGO452DC.js";

package/dist/navigation/AppHeader.js

@@ -6,10 +6,10 @@ import {
 import {
   AppHeaderIdentity,
   AppHeaderStatus
-} from "../chunk-R2I3LUUH.js";
+} from "../chunk-FTCCYWF4.js";
 import {
   AppHeaderDetails
-} from "../chunk-5U4SJ2DA.js";
+} from "../chunk-Y6JDIPV7.js";
 import {
   AppHeaderBrand
 } from "../chunk-H37GIAAM.js";
@@ -18,17 +18,17 @@ import {
   highlightOf,
   initialsOf
 } from "../chunk-IQU4HKND.js";
-import "../chunk-B4BU5CS6.js";
-import "../chunk-AZ2KKHID.js";
+import "../chunk-LZHXF66R.js";
+import "../chunk-VF2XC76U.js";
 import "../chunk-OLZTGVBT.js";
 import "../chunk-CRN4KKNI.js";
 import "../chunk-JBMBFYFA.js";
 import "../chunk-U437KFDI.js";
 import "../chunk-F52N6ACD.js";
-import "../chunk-D6HDJVQW.js";
-import "../chunk-GYXUCS37.js";
+import "../chunk-YANLN6HP.js";
 import "../chunk-5KEMPCW4.js";
 import "../chunk-VM3HRSAU.js";
+import "../chunk-GYXUCS37.js";
 import "../chunk-73BEVJCS.js";
 import "../chunk-6MDBMCFK.js";
 import "../chunk-QRUCR4YZ.js";
@@ -37,7 +37,8 @@ import "../chunk-TAMIZE4Q.js";
 import "../chunk-TYJR4GOF.js";
 import "../chunk-AKZWDZCZ.js";
 import "../chunk-HPK33ACY.js";
-import "../chunk-3DO5MFXA.js";
+import "../chunk-XCP5L665.js";
+import "../chunk-YKCAJ2TN.js";
 import "../chunk-7ZPUN7TV.js";
 import "../chunk-PT6TCWIW.js";
 import "../chunk-CGO452DC.js";

package/dist/navigation/CommandPalette.js

@@ -1,11 +1,11 @@
 import "../chunk-P5WJUR7X.js";
 import {
   CommandPalette
-} from "../chunk-PXH24VIP.js";
+} from "../chunk-B6IURHSZ.js";
 import "../chunk-SQSFMZTF.js";
+import "../chunk-5EIW2FZY.js";
 import "../chunk-SUZXPDUQ.js";
 import "../chunk-4VRDFZ4G.js";
-import "../chunk-5EIW2FZY.js";
 import "../chunk-PZ5AY32C.js";
 export {
   CommandPalette

package/dist/provider.js

@@ -1,15 +1,16 @@
 import {
   UiProvider
-} from "./chunk-5KZR3RXL.js";
+} from "./chunk-OFVYNUYV.js";
 import "./chunk-XZTRZ3HO.js";
 import {
   useUiTheme
-} from "./chunk-H4NWU2ZN.js";
+} from "./chunk-TK36COCP.js";
 import {
   muiThemeOptionsFrom,
   uiThemeFromMui
-} from "./chunk-2DJIS2WQ.js";
-import "./chunk-3DO5MFXA.js";
+} from "./chunk-KCBAPMLH.js";
+import "./chunk-XCP5L665.js";
+import "./chunk-YKCAJ2TN.js";
 import "./chunk-7ZPUN7TV.js";
 import "./chunk-PT6TCWIW.js";
 import "./chunk-CGO452DC.js";

package/dist/tokens.js

@@ -1,6 +1,13 @@
 import {
   accentFor
-} from "./chunk-3DO5MFXA.js";
+} from "./chunk-XCP5L665.js";
+import {
+  rem,
+  remPx,
+  rems,
+  resetRootFontCache,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 import {
   COLOR_VALUES,
   SIZE_VALUES,
@@ -122,6 +129,11 @@ export {
   muiSize,
   paletteKey,
   px,
-  recomposeColor
+  recomposeColor,
+  rem,
+  remPx,
+  rems,
+  resetRootFontCache,
+  sxRem
 };
 //# sourceMappingURL=tokens.js.map

package/dist/types/tokens/relative.d.ts

@@ -0,0 +1,55 @@
+import type { Theme } from '@mui/material/styles/index.js';
+/**
+ * THE ONE WAY A COMPONENT WRITES A SIZE (FUT-2585).
+ *
+ * A density mode — a compact admin, a roomy kiosk — is one decision taken in
+ * the theme, and it only works if every size a component draws is RELATIVE to
+ * something the theme owns. Before this file the package said the same number
+ * four ways: `'14px'`, `'0.875rem'`, `fontSize: 14` and `px(14)` from a
+ * `*.metrics.ts` table, and none of the four moved with the theme. The audit
+ * that opened FUT-2585 counted 1,269 `NNpx` literals, 246 hand-typed `rem`
+ * literals and 24 reads of `theme.typography`.
+ *
+ * So there is one vocabulary: the px a design was drawn at, handed to the
+ * theme's own type scale. `rem(theme, 14)` is `theme.typography.pxToRem(14)` —
+ * `0.875rem` at MUI's defaults, which is what the origin host's theme
+ * runs on, so converting a literal changes nothing on screen. A host that sets
+ * `typography.fontSize` scales every size written through it (MUI multiplies
+ * by `fontSize / 14`), and so does a reader who raises the browser's base font
+ * — the rule the field height already follows (`./field-height.core.ts`).
+ * `htmlFontSize` is not a knob: it DECLARES what the root already is. Values
+ * that are relative another way stay so — `sx` spacing units and
+ * `theme.spacing()` follow the spacing unit — so a density mode sets the type
+ * scale, the spacing unit and `fieldHeight` together.
+ *
+ * Everything goes through it — font sizes, heights, widths, padding, offsets,
+ * radii, shadow offsets, blurs and keyframe distances — because a density mode
+ * that shrinks the box but not its shadow, or the text but not the gap beside
+ * it, is visibly half-applied. The one literal left is the 1px hairline
+ * border, which must stay one device pixel (`FIELD_BORDER_WIDTH`).
+ *
+ * `scripts/ui-tokens-gate.mjs` refuses a raw size or colour in a component, so
+ * this is enforced rather than hoped for.
+ */
+/** A size drawn at `px` in the design, as rem through the theme's type scale. */
+export declare function rem(theme: Theme, px: number): string;
+/**
+ * {@link rem} as an `sx` value: `sx={{ width: sxRem(40) }}`.
+ *
+ * `sx` reads a NUMBER on `width` as pixels and on `padding` as spacing units,
+ * so a bare number there is never density-safe; a theme callback is.
+ */
+export declare function sxRem(px: number): (theme: Theme) => string;
+/** A length list (`'0 8px 32px'`-shaped) with every entry through {@link rem}. */
+export declare function rems(theme: Theme, ...px: number[]): string;
+/** Forget the measured root font size — for a test, or a host that changes it at runtime. */
+export declare function resetRootFontCache(): void;
+/**
+ * The pixels `rem(theme, px)` renders at, for layout that is computed in
+ * JavaScript — a virtualiser's row height, an overflow cost table, a cell size.
+ *
+ * CSS and JS have to agree: a virtualiser that still assumes 52px rows while
+ * the rows it positions have shrunk to 45 leaves a gap under every one of them.
+ */
+export declare function remPx(theme: Theme, px: number): number;
+//# sourceMappingURL=relative.d.ts.map

package/dist/types/tokens/relative.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"relative.d.ts","sourceRoot":"","sources":["../../../src/tokens/relative.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,iFAAiF;AACjF,wBAAgB,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAEpD;AAED;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,GAAG,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAE1D;AAED,kFAAkF;AAClF,wBAAgB,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,MAAM,EAAE,GAAG,MAAM,CAE1D;AAMD,6FAA6F;AAC7F,wBAAgB,kBAAkB,IAAI,IAAI,CAEzC;AAmCD;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAEtD"}

package/dist/types/tokens/scales.d.ts

@@ -10,6 +10,7 @@ export * from './vocabulary';
 export { headingMetrics } from './typography';
 export * from './theme';
 export * from './color';
+export { rem, rems, remPx, resetRootFontCache, sxRem } from './relative';
 export { DEFAULT_FIELD_RADIUS, fieldRadius, fieldRadiusOverrides, fieldRadiusPx, fieldRootStyles } from './field-radius';
 export { asFieldSize, DEFAULT_FIELD_HEIGHT, FIELD_BORDER_WIDTH, FIELD_HEIGHT_SCALE, fieldBorder, fieldControlStyles, fieldHeight, fieldHeightOverrides, fieldHeightPx, fieldHeightRem, fieldOverrides, fieldTextFieldStyles, } from './field-height';
 export interface Accent {

package/dist/types/tokens/scales.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scales.d.ts","sourceRoot":"","sources":["../../../src/tokens/scales.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAE3D,OAAO,KAAK,EAAE,UAAU,EAAY,MAAM,cAAc,CAAC;AAEzD;;;;;GAKG;AACH,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,oBAAoB,EAAE,WAAW,EAAE,oBAAoB,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACzH,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,EACX,kBAAkB,EAClB,WAAW,EACX,oBAAoB,EACpB,aAAa,EACb,cAAc,EACd,cAAc,EACd,oBAAoB,GACrB,MAAM,gBAAgB,CAAC;AAExB,MAAM,WAAW,MAAM;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,GAAG,MAAM,CAmBjE"}
+{"version":3,"file":"scales.d.ts","sourceRoot":"","sources":["../../../src/tokens/scales.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAE3D,OAAO,KAAK,EAAE,UAAU,EAAY,MAAM,cAAc,CAAC;AAEzD;;;;;GAKG;AACH,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACzE,OAAO,EAAE,oBAAoB,EAAE,WAAW,EAAE,oBAAoB,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACzH,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,EACX,kBAAkB,EAClB,WAAW,EACX,oBAAoB,EACpB,aAAa,EACb,cAAc,EACd,cAAc,EACd,oBAAoB,GACrB,MAAM,gBAAgB,CAAC;AAExB,MAAM,WAAW,MAAM;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,GAAG,MAAM,CAmBjE"}

package/dist/utility/InfiniteScroll.js

@@ -1,9 +1,9 @@
 import "../chunk-H7NA4TXY.js";
 import {
   InfiniteScroll
-} from "../chunk-WROCSDVL.js";
-import "../chunk-QF6LTUCE.js";
+} from "../chunk-GSFNH4C5.js";
 import "../chunk-ATSHKSSD.js";
+import "../chunk-QF6LTUCE.js";
 import "../chunk-PZ5AY32C.js";
 export {
   InfiniteScroll

package/dist/utility/InstallPrompt.js

@@ -1,11 +1,11 @@
 import "../chunk-3QQVEYOR.js";
 import {
   InstallPrompt
-} from "../chunk-5ZOJLYD2.js";
-import "../chunk-GY62N32G.js";
+} from "../chunk-JE6RZ5L6.js";
 import {
   usePwaInstall
 } from "../chunk-5GMHJ7Y5.js";
+import "../chunk-GY62N32G.js";
 import "../chunk-WXYLH3QZ.js";
 import {
   PWA_INSTALL_AVAILABLE_EVENT,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.32.0",
+  "version": "6.33.0",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/tokens/relative.ts

@@ -0,0 +1,107 @@
+import type { Theme } from '@mui/material/styles/index.js';
+
+/**
+ * THE ONE WAY A COMPONENT WRITES A SIZE (FUT-2585).
+ *
+ * A density mode — a compact admin, a roomy kiosk — is one decision taken in
+ * the theme, and it only works if every size a component draws is RELATIVE to
+ * something the theme owns. Before this file the package said the same number
+ * four ways: `'14px'`, `'0.875rem'`, `fontSize: 14` and `px(14)` from a
+ * `*.metrics.ts` table, and none of the four moved with the theme. The audit
+ * that opened FUT-2585 counted 1,269 `NNpx` literals, 246 hand-typed `rem`
+ * literals and 24 reads of `theme.typography`.
+ *
+ * So there is one vocabulary: the px a design was drawn at, handed to the
+ * theme's own type scale. `rem(theme, 14)` is `theme.typography.pxToRem(14)` —
+ * `0.875rem` at MUI's defaults, which is what the origin host's theme
+ * runs on, so converting a literal changes nothing on screen. A host that sets
+ * `typography.fontSize` scales every size written through it (MUI multiplies
+ * by `fontSize / 14`), and so does a reader who raises the browser's base font
+ * — the rule the field height already follows (`./field-height.core.ts`).
+ * `htmlFontSize` is not a knob: it DECLARES what the root already is. Values
+ * that are relative another way stay so — `sx` spacing units and
+ * `theme.spacing()` follow the spacing unit — so a density mode sets the type
+ * scale, the spacing unit and `fieldHeight` together.
+ *
+ * Everything goes through it — font sizes, heights, widths, padding, offsets,
+ * radii, shadow offsets, blurs and keyframe distances — because a density mode
+ * that shrinks the box but not its shadow, or the text but not the gap beside
+ * it, is visibly half-applied. The one literal left is the 1px hairline
+ * border, which must stay one device pixel (`FIELD_BORDER_WIDTH`).
+ *
+ * `scripts/ui-tokens-gate.mjs` refuses a raw size or colour in a component, so
+ * this is enforced rather than hoped for.
+ */
+
+/** A size drawn at `px` in the design, as rem through the theme's type scale. */
+export function rem(theme: Theme, px: number): string {
+  return theme.typography.pxToRem(px);
+}
+
+/**
+ * {@link rem} as an `sx` value: `sx={{ width: sxRem(40) }}`.
+ *
+ * `sx` reads a NUMBER on `width` as pixels and on `padding` as spacing units,
+ * so a bare number there is never density-safe; a theme callback is.
+ */
+export function sxRem(px: number): (theme: Theme) => string {
+  return (theme) => rem(theme, px);
+}
+
+/** A length list (`'0 8px 32px'`-shaped) with every entry through {@link rem}. */
+export function rems(theme: Theme, ...px: number[]): string {
+  return px.map((value) => (value === 0 ? '0' : rem(theme, value))).join(' ');
+}
+
+const FALLBACK_ROOT_PX = 16;
+let rootPxCache: number | null = null;
+let watchingRoot = false;
+
+/** Forget the measured root font size — for a test, or a host that changes it at runtime. */
+export function resetRootFontCache(): void {
+  rootPxCache = null;
+}
+
+/**
+ * Drop the cache whenever the root's own style or class changes (a host
+ * toggling `html { font-size }` for a density) or the window resizes (a
+ * viewport-relative root). A browser-setting change is not observable from the
+ * page; it takes a reload, as it does for everything else measured in px.
+ */
+function watchRoot(): void {
+  if (watchingRoot || typeof MutationObserver === 'undefined') return;
+  watchingRoot = true;
+  new MutationObserver(resetRootFontCache).observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['style', 'class'],
+  });
+  if (typeof window !== 'undefined') window.addEventListener('resize', resetRootFontCache);
+}
+
+/**
+ * The document's root font size in px — what `1rem` actually renders at.
+ * Without a document (server render) it is the theme's declared
+ * `htmlFontSize`; a failed measurement is not cached, so a later call can
+ * still measure.
+ */
+function rootFontPx(theme: Theme): number {
+  if (rootPxCache !== null) return rootPxCache;
+  const fallback = theme.typography.htmlFontSize ?? FALLBACK_ROOT_PX;
+  if (typeof document === 'undefined' || typeof getComputedStyle !== 'function') return fallback;
+  const measured = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+  if (!(Number.isFinite(measured) && measured > 0)) return fallback;
+  rootPxCache = measured;
+  watchRoot();
+  return measured;
+}
+
+/**
+ * The pixels `rem(theme, px)` renders at, for layout that is computed in
+ * JavaScript — a virtualiser's row height, an overflow cost table, a cell size.
+ *
+ * CSS and JS have to agree: a virtualiser that still assumes 52px rows while
+ * the rows it positions have shrunk to 45 leaves a gap under every one of them.
+ */
+export function remPx(theme: Theme, px: number): number {
+  return Number.parseFloat(rem(theme, px)) * rootFontPx(theme);
+}

package/src/tokens/scales.ts

@@ -14,6 +14,8 @@ export { headingMetrics } from './typography';
 // host can build a `UiTheme` from the same module path a native one does.
 export * from './theme';
 export * from './color';
+// The relative-size vocabulary every component writes its sizes in (FUT-2585).
+export { rem, rems, remPx, resetRootFontCache, sxRem } from './relative';
 export { DEFAULT_FIELD_RADIUS, fieldRadius, fieldRadiusOverrides, fieldRadiusPx, fieldRootStyles } from './field-radius';
 export {
   asFieldSize,

package/dist/chunk-3DO5MFXA.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/tokens/scales.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\n\nimport type { ColorValue, MuiColor } from './vocabulary';\n\n/**\n * `@12-apps/ui/tokens` keeps its whole surface here. The vocabulary itself —\n * the size and colour unions and their runtime lists — lives in\n * `./vocabulary`, which imports nothing, so the native renderer can read it\n * without this file's MUI `Theme` import following it into `dist/types-native`.\n */\nexport * from './vocabulary';\nexport { headingMetrics } from './typography';\n// The renderer-neutral theme and the colour arithmetic behind it, so a web\n// host can build a `UiTheme` from the same module path a native one does.\nexport * from './theme';\nexport * from './color';\nexport { DEFAULT_FIELD_RADIUS, fieldRadius, fieldRadiusOverrides, fieldRadiusPx, fieldRootStyles } from './field-radius';\nexport {\n  asFieldSize,\n  DEFAULT_FIELD_HEIGHT,\n  FIELD_BORDER_WIDTH,\n  FIELD_HEIGHT_SCALE,\n  fieldBorder,\n  fieldControlStyles,\n  fieldHeight,\n  fieldHeightOverrides,\n  fieldHeightPx,\n  fieldHeightRem,\n  fieldOverrides,\n  fieldTextFieldStyles,\n} from './field-height';\n\nexport interface Accent {\n  main: string;\n  light: string;\n  dark: string;\n  contrastText: string;\n}\n\nexport function accentFor(theme: Theme, color: ColorValue): Accent {\n  if (color === 'neutral') {\n    const grey = theme.palette.grey;\n    return {\n      // Explicit fallbacks: the ramp is indexed, and under\n      // `noUncheckedIndexedAccess` every stop is `string | undefined`.\n      main: grey[600] ?? '#757575',\n      light: grey[400] ?? '#bdbdbd',\n      dark: grey[800] ?? '#424242',\n      // Grey 600 carries white text in both themes.\n      contrastText: '#fff',\n    };\n  }\n  // Past the `neutral` return, `paletteKey` can only produce a `MuiColor` — but\n  // its signature still admits `'grey'`, and TS cannot narrow a return type by\n  // the argument. Naming the key here keeps the accent branch honestly typed\n  // instead of casting the hole shut.\n  const key: MuiColor = color === 'danger' ? 'error' : color;\n  return theme.palette[key];\n}\n"],"mappings":";AAuCO,SAAS,UAAU,OAAc,OAA2B;AACjE,MAAI,UAAU,WAAW;AACvB,UAAM,OAAO,MAAM,QAAQ;AAC3B,WAAO;AAAA;AAAA;AAAA,MAGL,MAAM,KAAK,GAAG,KAAK;AAAA,MACnB,OAAO,KAAK,GAAG,KAAK;AAAA,MACpB,MAAM,KAAK,GAAG,KAAK;AAAA;AAAA,MAEnB,cAAc;AAAA,IAChB;AAAA,EACF;AAKA,QAAM,MAAgB,UAAU,WAAW,UAAU;AACrD,SAAO,MAAM,QAAQ,GAAG;AAC1B;","names":[]}