@12-apps/ui 6.55.0 → 6.56.1

package/dist/types/components/layout/Screen/Screen.base.d.ts

@@ -0,0 +1,16 @@
+import type { BoxBaseProps } from '../Box/Box.base';
+/** Physical screen edges, independent of a native dependency. */
+export type ScreenEdge = 'top' | 'right' | 'bottom' | 'left';
+export declare const SCREEN_EDGES: readonly ScreenEdge[];
+/** Padding and gap apply to the content, inside the selected safe-area edges. */
+export interface ScreenBaseProps extends Pick<BoxBaseProps, 'children' | 'p' | 'px' | 'py' | 'pt' | 'pr' | 'pb' | 'pl' | 'gap' | 'bg' | 'testID' | 'dataTestId'> {
+    /** Vertical scrolling; turn off when a child owns scrolling. Default true. */
+    scroll?: boolean;
+    /** Omit bottom when a navigator's tab bar already owns that inset. */
+    safeAreaEdges?: readonly ScreenEdge[];
+    /** Lift the native viewport above the soft keyboard. Default true. */
+    keyboardAvoiding?: boolean;
+    /** Native distance from the window top to the screen's parent, in dp. */
+    keyboardVerticalOffset?: number;
+}
+//# sourceMappingURL=Screen.base.d.ts.map

package/dist/types/components/layout/Screen/Screen.base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Screen.base.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Screen/Screen.base.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,iEAAiE;AACjE,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC7D,eAAO,MAAM,YAAY,EAAE,SAAS,UAAU,EAAuC,CAAC;AAEtF,iFAAiF;AACjF,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,YAAY,EACZ,UAAU,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,IAAI,GAAG,QAAQ,GAAG,YAAY,CACpG;IACC,8EAA8E;IAC9E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sEAAsE;IACtE,aAAa,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IACtC,sEAAsE;IACtE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yEAAyE;IACzE,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC"}

package/dist/types/components/layout/Screen/Screen.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+/** A bounded page viewport; browser keyboards remain the browser's responsibility. */
+export declare const Screen: React.ForwardRefExoticComponent<import("./Screen.base").ScreenBaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, keyof import("./Screen.base").ScreenBaseProps> & {
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
+    contentSx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
+} & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Screen.d.ts.map

package/dist/types/components/layout/Screen/Screen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Screen.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Screen/Screen.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,sFAAsF;AACtF,eAAO,MAAM,MAAM;;;wCAwBjB,CAAC"}

package/dist/types/components/layout/Screen/Screen.types.d.ts

@@ -0,0 +1,9 @@
+import type { SxProps, Theme } from '@mui/material/styles/index.js';
+import type * as React from 'react';
+import type { ScreenBaseProps } from './Screen.base';
+export type { ScreenBaseProps, ScreenEdge } from './Screen.base';
+export type ScreenProps = ScreenBaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, keyof ScreenBaseProps> & {
+    sx?: SxProps<Theme>;
+    contentSx?: SxProps<Theme>;
+};
+//# sourceMappingURL=Screen.types.d.ts.map

package/dist/types/components/layout/Screen/Screen.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Screen.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Screen/Screen.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACjE,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,eAAe,CAAC,GAAG;IAC9G,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CAC5B,CAAC"}

package/dist/types/components/layout/Screen/index.d.ts

@@ -0,0 +1,3 @@
+export { Screen } from './Screen';
+export type { ScreenProps, ScreenBaseProps, ScreenEdge } from './Screen.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/layout/Screen/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Screen/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/types/icons/paths.generated.d.ts

@@ -23,6 +23,9 @@ export declare const ICON_PATHS: {
     readonly ExpandLess: readonly ["m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"];
     readonly ExpandMore: readonly ["M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"];
     readonly FilterList: readonly ["M10 18h4v-2h-4zM3 6v2h18V6zm3 7h12v-2H6z"];
+    readonly FitnessCenter: readonly ["M20.57 14.86 22 13.43 20.57 12 17 15.57 8.43 7 12 3.43 10.57 2 9.14 3.43 7.71 2 5.57 4.14 4.14 2.71 2.71 4.14l1.43 1.43L2 7.71l1.43 1.43L2 10.57 3.43 12 7 8.43 15.57 17 12 20.57 13.43 22l1.43-1.43L16.29 22l2.14-2.14 1.43 1.43 1.43-1.43-1.43-1.43L22 16.29z"];
+    readonly History: readonly ["M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9m-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8z"];
+    readonly Home: readonly ["M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"];
     readonly IndeterminateCheckBox: readonly ["M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-2 10H7v-2h10z"];
     readonly Info: readonly ["M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"];
     readonly InfoOutlined: readonly ["M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"];

package/dist/types/icons/paths.generated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paths.generated.d.ts","sourceRoot":"","sources":["../../../src/icons/paths.generated.ts"],"names":[],"mappings":"AAOA,mDAAmD;AACnD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4Cb,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAC;AAE/C,eAAO,MAAM,UAAU,EAA8B,SAAS,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"paths.generated.d.ts","sourceRoot":"","sources":["../../../src/icons/paths.generated.ts"],"names":[],"mappings":"AAOA,mDAAmD;AACnD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Cb,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAC;AAE/C,eAAO,MAAM,UAAU,EAA8B,SAAS,QAAQ,EAAE,CAAC"}

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

@@ -80,6 +80,10 @@ export declare function surfaces(theme: Theme): UiSurfaces;
  * Opaque on purpose. A translucent `alpha(main, 0.08)` is a different colour
  * on every surface it lands on, and its contrast with the signal's own text
  * cannot be known in advance; a composited value is the same colour anywhere.
+ *
+ * A palette MUI accepts but cannot decompose — a named colour (`white`), a
+ * `var(--…)`, a `color(display-p3 …)` — gets the same mix from the browser,
+ * as a CSS `color-mix()`, rather than throwing at render.
  */
 export declare function softSignal(theme: Theme, signal: SoftSignal): string;
 //# sourceMappingURL=surfaces.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"surfaces.d.ts","sourceRoot":"","sources":["../../../src/tokens/surfaces.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAI3D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,sEAAsE;AACtE,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAElE,sEAAsE;AACtE,eAAO,MAAM,YAAY,EAAE,SAAS,UAAU,EAA4C,CAAC;AAE3F;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,OAAO,CAAC;AAExC;;;;;;GAMG;AACH,MAAM,WAAW,UAAU;IACzB,4EAA4E;IAC5E,MAAM,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,MAAM,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,OAAO,QAAQ,sBAAsB,CAAC;IACpC,UAAU,KAAK;QACb,2EAA2E;QAC3E,UAAU,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;QACjC,uFAAuF;QACvF,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;KACpD;IACD,UAAU,YAAY;QACpB;;;;WAIG;QACH,UAAU,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;QACjC;;;WAGG;QACH,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;KACpD;CACF;AAED,uFAAuF;AACvF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,UAAU,CAUjD;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,GAAG,MAAM,CAInE"}
+{"version":3,"file":"surfaces.d.ts","sourceRoot":"","sources":["../../../src/tokens/surfaces.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAI3D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,sEAAsE;AACtE,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAElE,sEAAsE;AACtE,eAAO,MAAM,YAAY,EAAE,SAAS,UAAU,EAA4C,CAAC;AAE3F;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,OAAO,CAAC;AAExC;;;;;;GAMG;AACH,MAAM,WAAW,UAAU;IACzB,4EAA4E;IAC5E,MAAM,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,MAAM,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,OAAO,QAAQ,sBAAsB,CAAC;IACpC,UAAU,KAAK;QACb,2EAA2E;QAC3E,UAAU,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;QACjC,uFAAuF;QACvF,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;KACpD;IACD,UAAU,YAAY;QACpB;;;;WAIG;QACH,UAAU,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;QACjC;;;WAGG;QACH,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;KACpD;CACF;AAED,uFAAuF;AACvF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,UAAU,CAUjD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,GAAG,MAAM,CAUnE"}

package/dist/types-native/components/layout/Screen/Screen.base.d.ts

@@ -0,0 +1,16 @@
+import type { BoxBaseProps } from '../Box/Box.base';
+/** Physical screen edges, independent of a native dependency. */
+export type ScreenEdge = 'top' | 'right' | 'bottom' | 'left';
+export declare const SCREEN_EDGES: readonly ScreenEdge[];
+/** Padding and gap apply to the content, inside the selected safe-area edges. */
+export interface ScreenBaseProps extends Pick<BoxBaseProps, 'children' | 'p' | 'px' | 'py' | 'pt' | 'pr' | 'pb' | 'pl' | 'gap' | 'bg' | 'testID' | 'dataTestId'> {
+    /** Vertical scrolling; turn off when a child owns scrolling. Default true. */
+    scroll?: boolean;
+    /** Omit bottom when a navigator's tab bar already owns that inset. */
+    safeAreaEdges?: readonly ScreenEdge[];
+    /** Lift the native viewport above the soft keyboard. Default true. */
+    keyboardAvoiding?: boolean;
+    /** Native distance from the window top to the screen's parent, in dp. */
+    keyboardVerticalOffset?: number;
+}
+//# sourceMappingURL=Screen.base.d.ts.map

package/dist/types-native/components/layout/Screen/Screen.base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Screen.base.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Screen/Screen.base.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,iEAAiE;AACjE,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC7D,eAAO,MAAM,YAAY,EAAE,SAAS,UAAU,EAAuC,CAAC;AAEtF,iFAAiF;AACjF,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,YAAY,EACZ,UAAU,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,IAAI,GAAG,QAAQ,GAAG,YAAY,CACpG;IACC,8EAA8E;IAC9E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sEAAsE;IACtE,aAAa,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IACtC,sEAAsE;IACtE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yEAAyE;IACzE,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC"}

package/dist/types-native/components/layout/Screen/Screen.native.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { View } from 'react-native';
+export declare const Screen: React.ForwardRefExoticComponent<import("./Screen.base").ScreenBaseProps & Omit<import("react-native").ViewProps, keyof import("./Screen.base").ScreenBaseProps> & {
+    contentContainerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    scrollViewProps?: Omit<import("react-native").ScrollViewProps, "children" | "style" | "contentContainerStyle" | "horizontal" | "scrollEnabled" | "automaticallyAdjustKeyboardInsets" | "automaticallyAdjustContentInsets" | "contentInsetAdjustmentBehavior">;
+} & React.RefAttributes<View>>;
+//# sourceMappingURL=Screen.native.d.ts.map

package/dist/types-native/components/layout/Screen/Screen.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Screen.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Screen/Screen.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA0D,IAAI,EAAE,MAAM,cAAc,CAAC;AAwB5F,eAAO,MAAM,MAAM;;;8BA6BjB,CAAC"}

package/dist/types-native/components/layout/Screen/Screen.types.native.d.ts

@@ -0,0 +1,9 @@
+import type { ScrollViewProps, StyleProp, ViewProps, ViewStyle } from 'react-native';
+import type { ScreenBaseProps } from './Screen.base';
+export type { ScreenBaseProps, ScreenEdge } from './Screen.base';
+export type ScreenProps = ScreenBaseProps & Omit<ViewProps, keyof ScreenBaseProps> & {
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    /** Scroll events/indicators; Screen owns orientation, size and keyboard insets. */
+    scrollViewProps?: Omit<ScrollViewProps, 'children' | 'style' | 'contentContainerStyle' | 'horizontal' | 'scrollEnabled' | 'automaticallyAdjustKeyboardInsets' | 'automaticallyAdjustContentInsets' | 'contentInsetAdjustmentBehavior'>;
+};
+//# sourceMappingURL=Screen.types.native.d.ts.map

package/dist/types-native/components/layout/Screen/Screen.types.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Screen.types.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Screen/Screen.types.native.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAErF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACjE,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,eAAe,CAAC,GAAG;IACnF,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7C,mFAAmF;IACnF,eAAe,CAAC,EAAE,IAAI,CAAC,eAAe,EACpC,UAAU,GAAG,OAAO,GAAG,uBAAuB,GAAG,YAAY,GAAG,eAAe,GAC/E,mCAAmC,GAAG,kCAAkC,GAAG,gCAAgC,CAC5G,CAAC;CACH,CAAC"}

package/dist/types-native/components/layout/Screen/index.native.d.ts

@@ -0,0 +1,3 @@
+export { Screen } from './Screen.native';
+export type { ScreenProps, ScreenBaseProps, ScreenEdge } from './Screen.types.native';
+//# sourceMappingURL=index.native.d.ts.map

package/dist/types-native/components/layout/Screen/index.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Screen/index.native.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/types-native/icons/paths.generated.d.ts

@@ -23,6 +23,9 @@ export declare const ICON_PATHS: {
     readonly ExpandLess: readonly ["m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"];
     readonly ExpandMore: readonly ["M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"];
     readonly FilterList: readonly ["M10 18h4v-2h-4zM3 6v2h18V6zm3 7h12v-2H6z"];
+    readonly FitnessCenter: readonly ["M20.57 14.86 22 13.43 20.57 12 17 15.57 8.43 7 12 3.43 10.57 2 9.14 3.43 7.71 2 5.57 4.14 4.14 2.71 2.71 4.14l1.43 1.43L2 7.71l1.43 1.43L2 10.57 3.43 12 7 8.43 15.57 17 12 20.57 13.43 22l1.43-1.43L16.29 22l2.14-2.14 1.43 1.43 1.43-1.43-1.43-1.43L22 16.29z"];
+    readonly History: readonly ["M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9m-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8z"];
+    readonly Home: readonly ["M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"];
     readonly IndeterminateCheckBox: readonly ["M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-2 10H7v-2h10z"];
     readonly Info: readonly ["M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"];
     readonly InfoOutlined: readonly ["M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"];

package/dist/types-native/icons/paths.generated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paths.generated.d.ts","sourceRoot":"","sources":["../../../src/icons/paths.generated.ts"],"names":[],"mappings":"AAOA,mDAAmD;AACnD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4Cb,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAC;AAE/C,eAAO,MAAM,UAAU,EAA8B,SAAS,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"paths.generated.d.ts","sourceRoot":"","sources":["../../../src/icons/paths.generated.ts"],"names":[],"mappings":"AAOA,mDAAmD;AACnD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Cb,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAC;AAE/C,eAAO,MAAM,UAAU,EAA8B,SAAS,QAAQ,EAAE,CAAC"}

package/dist/user-avatar.js

@@ -1,13 +1,13 @@
 import {
   UserAvatar,
   UserMenu
-} from "./chunk-4JZ6XDVA.js";
+} from "./chunk-I6ESCBY3.js";
 import "./chunk-UDQSIRAP.js";
-import "./chunk-AKC5GRJF.js";
-import "./chunk-NVXRV3PL.js";
-import "./chunk-MTEQEPNY.js";
-import "./chunk-6ZZGK5DT.js";
+import "./chunk-G76BNXWE.js";
 import "./chunk-3ZVUNSFF.js";
+import "./chunk-GYDUXL3D.js";
+import "./chunk-6ZZGK5DT.js";
+import "./chunk-MTEQEPNY.js";
 import "./chunk-VUHLNYAE.js";
 import "./chunk-2GSIEDGN.js";
 import "./chunk-J2QIICWP.js";

package/dist/utility/WorkflowStep.js

@@ -10,7 +10,7 @@ import "../chunk-BRHRK7BK.js";
 import "../chunk-25MSGLNU.js";
 import "../chunk-GAXHYRX6.js";
 import "../chunk-NP6SHLQ3.js";
-import "../chunk-RHCRHZ6D.js";
+import "../chunk-TZ23DNKY.js";
 import "../chunk-7ZPUN7TV.js";
 import "../chunk-PT6TCWIW.js";
 import "../chunk-RGVNXES5.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.55.0",
+  "version": "6.56.1",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",
@@ -707,6 +707,14 @@
     "./locales": {
       "types": "./dist/types/locales.d.ts",
       "default": "./dist/locales.js"
+    },
+    "./layout/Screen": {
+      "react-native": {
+        "types": "./dist/types-native/components/layout/Screen/index.native.d.ts",
+        "default": "./dist/native/layout/Screen.js"
+      },
+      "types": "./dist/types/components/layout/Screen/index.d.ts",
+      "default": "./dist/layout/Screen.js"
     }
   },
   "typesVersions": {
@@ -779,7 +787,8 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-native": ">=0.79.0",
-    "react-native-svg": ">=15.0.0"
+    "react-native-svg": ">=15.0.0",
+    "react-native-safe-area-context": ">=5.0.0"
   },
   "dependencies": {
     "@12-apps/forms-core": "^1.21.0",
@@ -834,7 +843,8 @@
     "typescript": "^5.8.2",
     "vite": "^6.4.1",
     "vite-plugin-istanbul": "^7.2.1",
-    "vitest": "^3.2.4"
+    "vitest": "^3.2.4",
+    "react-native-safe-area-context": "5.7.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -868,6 +878,9 @@
     },
     "react-native-svg": {
       "optional": true
+    },
+    "react-native-safe-area-context": {
+      "optional": true
     }
   }
 }

package/src/components/feedback/StackedModal/StackedModal.md

@@ -164,6 +164,21 @@ const { stack, push, pop, clear } = useModalStack();
 - Semantic HTML structure
 - Accessible loading states
 
+### The title is one heading
+
+With a `navigationTitle`, the panel has exactly ONE heading: the title, an
+`h2`, carrying the id the dialog's `aria-labelledby` points at (the
+`aria-labelledby` prop's value, or `modal-title-<modalId>`). The bar around it
+(the ✕ or back button and the header actions) is a plain `div`, so the dialog's
+accessible name is the title alone, and a screen reader announces it once.
+
+Until 6.56.0 the bar was itself MUI's `DialogTitle` `h2` with the title nested
+in it as a second `h2`: the same words read twice, a heading inside a heading,
+and a dialog named by everything in the bar ("close Title Save").
+
+Without a `navigationTitle` the bar is still MUI's `h2` and holds the id, as
+before. Give such a panel its own `aria-labelledby` if it needs a name.
+
 ## Testing
 
 The StackedModal component provides comprehensive test IDs for all interactive elements through the `dataTestId` prop. When provided, it generates consistent test IDs for all child elements.
@@ -175,8 +190,8 @@ When you provide `dataTestId="my-modal"`, the following test IDs are automatical
 | Element | Test ID | Description |
 |---------|---------|-------------|
 | Modal Container | `my-modal` | The root dialog element |
-| Header | `my-modal-header` | The modal header container |
-| Title | `my-modal-title` | The navigation title text |
+| Header | `my-modal-header` | The modal header bar (a `div` when there is a title) |
+| Title | `my-modal-title` | The navigation title — the panel's one `h2` |
 | Close Button | `my-modal-close-button` | The close button (when no modals stacked) |
 | Back Button | `my-modal-back-button` | The back button (when modals are stacked) |
 | Header Actions | `my-modal-header-actions` | Container for header actions (desktop) |

package/src/components/feedback/StackedModal/StackedModal.parts.tsx

@@ -9,7 +9,7 @@ import IconButton from '@mui/material/IconButton/index.js';
 import Skeleton from '@mui/material/Skeleton/index.js';
 import Typography from '@mui/material/Typography/index.js';
 import { styled, useTheme } from '@mui/material/styles/index.js';
-import type { FC, ReactNode } from 'react';
+import type { ElementType, FC, ReactNode } from 'react';
 import React from 'react';
 import { rem } from '../../../tokens/relative';
 import { safeAreaBottom } from '../../../utils/viewport';
@@ -21,9 +21,10 @@ import {
   titleStyles,
 } from './StackedModal.styles';
 
+// `component` typed through: the bar is a `div` when it holds a title (`ModalHeader`).
 const StyledDialogTitle = styled(DialogTitle, {
   shouldForwardProp: (prop) => prop !== 'rtl',
-})<{ rtl?: boolean }>(({ theme, rtl }) => titleStyles(theme, rtl));
+})<{ rtl?: boolean; component?: ElementType }>(({ theme, rtl }) => titleStyles(theme, rtl));
 
 const DialogTitleLeft = styled(Box)(({ theme }) => titleLeftStyles(theme));
 const DialogTitleRight = styled(Box)(({ theme }) => titleRightStyles(theme));
@@ -186,7 +187,21 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
   rtl,
   dataTestId,
 }) => (
-  <StyledDialogTitle id={titleId} rtl={rtl} data-testid={testId(dataTestId, 'header')}>
+  // The BAR is not a heading: it holds the ✕ or back button and the header
+  // actions. The title inside it is the panel's one heading and carries the id
+  // the dialog's `aria-labelledby` names, so the dialog is named by the title
+  // alone — not "close Title Save" — and a screen reader hears it once.
+  //
+  // The bar's id is stated, never left to MUI: `DialogTitle` falls back to the
+  // Dialog's `aria-labelledby` and would claim the title's id a second time.
+  // With NO title the bar is drawn exactly as it always was — MUI's own `h2`,
+  // holding the id — so an untitled panel keeps its markup and its name.
+  <StyledDialogTitle
+    component={navigationTitle ? 'div' : 'h2'}
+    id={navigationTitle ? `${titleId}-bar` : titleId}
+    rtl={rtl}
+    data-testid={testId(dataTestId, 'header')}
+  >
     <DialogTitleLeft>
       <HeaderLeadingButton
         canGoBack={canGoBack}
@@ -199,6 +214,7 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
       />
       {navigationTitle && (
         <Typography
+          id={titleId}
           variant="h6"
           component="h2"
           noWrap

package/src/components/layout/Screen/NATIVE-NOTES.md

@@ -0,0 +1,2 @@
+- Keyboard geometry uses React Native KeyboardAvoidingView; react-native-web unit/story lanes verify its wiring, not a real Android/iOS keyboard. Device keyboard/rotation QA remains explicit.
+- Web safe-area values come from CSS environment variables; native values come from the existing navigator or an internal safe-area provider. Browser keyboard resizing remains browser-managed.

package/src/components/layout/Screen/Screen.base.ts

@@ -0,0 +1,20 @@
+import type { BoxBaseProps } from '../Box/Box.base';
+
+/** Physical screen edges, independent of a native dependency. */
+export type ScreenEdge = 'top' | 'right' | 'bottom' | 'left';
+export const SCREEN_EDGES: readonly ScreenEdge[] = ['top', 'right', 'bottom', 'left'];
+
+/** Padding and gap apply to the content, inside the selected safe-area edges. */
+export interface ScreenBaseProps extends Pick<
+  BoxBaseProps,
+  'children' | 'p' | 'px' | 'py' | 'pt' | 'pr' | 'pb' | 'pl' | 'gap' | 'bg' | 'testID' | 'dataTestId'
+> {
+  /** Vertical scrolling; turn off when a child owns scrolling. Default true. */
+  scroll?: boolean;
+  /** Omit bottom when a navigator's tab bar already owns that inset. */
+  safeAreaEdges?: readonly ScreenEdge[];
+  /** Lift the native viewport above the soft keyboard. Default true. */
+  keyboardAvoiding?: boolean;
+  /** Native distance from the window top to the screen's parent, in dp. */
+  keyboardVerticalOffset?: number;
+}

package/src/components/layout/Screen/Screen.md

@@ -0,0 +1,71 @@
+# Screen
+
+`@12-apps/ui/layout/Screen` is a bounded page viewport on web, Android and iOS.
+It combines safe-area edges, vertical scrolling and native keyboard avoidance.
+It renders existing Box/Stack/form components without consumer imports from a
+visual platform library. It is for ordinary screens, not virtualized lists.
+
+```tsx
+import { Screen } from '@12-apps/ui/layout/Screen';
+import { Text } from '@12-apps/ui/typography/Text';
+
+<Screen p={2} gap={2} safeAreaEdges={['top', 'left', 'right']}>
+  <Text>Content above a navigator-owned bottom tab bar</Text>
+</Screen>
+```
+
+## Props
+
+- `children`: screen content
+- `scroll` (true): a vertical scrolling viewport; use false if a child owns scrolling
+- `safeAreaEdges` (all four): physical edges; use an empty array when an ancestor
+  already owns every inset. Exclude bottom when a tab bar owns that edge
+- `p`, `px`, `py`, `pt`, `pr`, `pb`, `pl`, `gap`: content spacing in theme units,
+  inside the safe area; side overrides axis, axis overrides shorthand
+- `bg` (`default`): the same surface/palette role as Box
+- `keyboardAvoiding` (true): native keyboard lift; disable if a parent owns it
+- `keyboardVerticalOffset` (0): native distance from the window top to the
+  screen's parent, in dp; set for a non-overlay navigation header
+- `testID` / `dataTestId`: outer screen id; scroll viewport also has `<id>-viewport`
+- Native: View accessibility props, `style`, `contentContainerStyle`,
+  `scrollViewProps` for scroll callbacks and indicators
+- Web: div accessibility props, `sx`, `contentSx`, `style`
+- Ref: native outer View / web outer div
+
+## Native setup
+
+Install the optional peer `react-native-safe-area-context` (5+) using the version
+supported by your Expo/RN app. A web-only consumer does not need this peer. Screen
+reuses the navigator's safe-area context. Without one it creates a provider
+outside the scroll viewport. Do not wrap Screen in another safe-area view;
+select the edges the screen actually owns instead.
+
+The safe-area view wraps React Native's KeyboardAvoidingView, which uses padding
+on iOS and height on Android. Its measured viewport already excludes the bottom
+safe area, so the home-indicator inset is not added again above the keyboard.
+ScrollView automatic keyboard and content insets are off so those owners do not
+also apply the same lift/insets. Handled child taps remain usable with the
+keyboard open; dragging dismisses it. `scrollViewProps` can change tap/dismiss
+policy, but cannot override the viewport geometry or automatic inset ownership.
+
+## Layout and accessibility
+
+The parent must give Screen a bounded height (a navigator does this). On the web,
+the ancestor chain must carry a definite height/flex size; Screen grows within it.
+Content has a minimum viewport height, so short screens fill the available area
+and long screens scroll. No app-specific padding, colors, header or footer are
+invented. Use a meaningful accessibility label where the screen needs one;
+children retain their own focus and accessibility semantics.
+
+The web uses CSS `env(safe-area-inset-*)`; set viewport-fit=cover when deploying
+edge-to-edge. Browser keyboard/visual-viewport behavior belongs to the browser;
+the native keyboard props are accepted but not forwarded to the DOM.
+
+## Verification boundary
+
+Shared Storybook tests prove bounded scrolling and text entry on both browser
+renderers. Native unit tests exercise safe-area/keyboard/scroll ownership and
+rerenders, but react-native-web does not simulate a device keyboard. Device QA
+must cover both OSes, a notched screen, bottom tabs, keyboard show/hide/resize,
+last-field reachability, rotation and Android back dismissal before claiming
+that those device behaviors have been observed.

package/src/components/layout/Screen/Screen.native.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { KeyboardAvoidingView, Platform, ScrollView, StyleSheet, View } from 'react-native';
+import { SafeAreaInsetsContext, SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+
+import { SCREEN_EDGES } from './Screen.base';
+import type { ScreenProps } from './Screen.types.native';
+import { resolveBoxLayout, splitBoxProps } from '../Box/box-layout';
+import { resolveTestId } from '../../../platform/test-id';
+import { useUiTheme } from '../../../provider/use-ui-theme.native';
+
+const styles = StyleSheet.create({ fill: { flex: 1 }, content: { flexGrow: 1 } });
+
+function keyboardBehavior(enabled: boolean): 'padding' | 'height' | undefined {
+  if (!enabled) return undefined;
+  return Platform.OS === 'ios' ? 'padding' : 'height';
+}
+
+/** Reuse a navigator's context, or own one outside the scrolling view. */
+function ScreenBoundary({ children }: { children: React.ReactNode }): React.JSX.Element {
+  const insets = React.useContext(SafeAreaInsetsContext);
+  return insets === null
+    ? <SafeAreaProvider style={styles.fill}>{children}</SafeAreaProvider>
+    : <>{children}</>;
+}
+
+export const Screen = React.forwardRef<View, ScreenProps>(({
+  children, scroll = true, safeAreaEdges = SCREEN_EDGES,
+  keyboardAvoiding = true, keyboardVerticalOffset = 0, bg = 'default',
+  style, contentContainerStyle, scrollViewProps, ...props
+}, ref) => {
+  const theme = useUiTheme();
+  const { layout, rest } = splitBoxProps(props);
+  const testID = resolveTestId(layout);
+  const contentStyle = [styles.content, resolveBoxLayout({ ...layout, direction: 'column' }, theme), contentContainerStyle];
+  return (
+    <ScreenBoundary>
+      <View ref={ref} testID={testID} {...rest} style={[styles.fill, resolveBoxLayout({ bg }, theme), style]}>
+        <SafeAreaView edges={safeAreaEdges} style={styles.fill}>
+          <KeyboardAvoidingView style={styles.fill} enabled={keyboardAvoiding}
+            behavior={keyboardBehavior(keyboardAvoiding)} keyboardVerticalOffset={keyboardVerticalOffset}>
+            {scroll ? (
+              <ScrollView keyboardShouldPersistTaps="handled" keyboardDismissMode="on-drag" {...scrollViewProps}
+                testID={scrollViewProps?.testID ?? (testID ? `${testID}-viewport` : undefined)}
+                style={styles.fill} contentContainerStyle={contentStyle}
+                horizontal={false} automaticallyAdjustKeyboardInsets={false}
+                automaticallyAdjustContentInsets={false} contentInsetAdjustmentBehavior="never">
+                {children}
+              </ScrollView>
+            ) : <View style={[styles.fill, contentStyle]}>{children}</View>}
+          </KeyboardAvoidingView>
+        </SafeAreaView>
+      </View>
+    </ScreenBoundary>
+  );
+});
+Screen.displayName = 'Screen';

package/src/components/layout/Screen/Screen.tsx

@@ -0,0 +1,41 @@
+import MuiBox from '@mui/material/Box/index.js';
+import * as React from 'react';
+
+import { SCREEN_EDGES } from './Screen.base';
+import type { ScreenProps } from './Screen.types';
+import { Box } from '../Box/Box';
+import { splitBoxProps } from '../Box/box-layout';
+import { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
+
+function sxEntries(sx: ScreenProps['sx']) {
+  if (sx === undefined) return [];
+  return Array.isArray(sx) ? sx : [sx];
+}
+
+/** A bounded page viewport; browser keyboards remain the browser's responsibility. */
+export const Screen = React.forwardRef<HTMLDivElement, ScreenProps>(({
+  children, scroll = true, safeAreaEdges = SCREEN_EDGES,
+  keyboardAvoiding: _keyboardAvoiding = true, keyboardVerticalOffset: _keyboardVerticalOffset = 0,
+  bg = 'default', sx, contentSx, ...props
+}, ref) => {
+  const { layout, rest } = splitBoxProps(props);
+  const testID = resolveTestId(layout);
+  const safeArea = Object.fromEntries(SCREEN_EDGES.map((edge) => [
+    `padding${edge[0]!.toUpperCase()}${edge.slice(1)}`,
+    safeAreaEdges.includes(edge) ? `env(safe-area-inset-${edge}, 0px)` : 0,
+  ]));
+  return (
+    <Box ref={ref} bg={bg} dataTestId={testID} {...rest}
+      sx={[{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0, minWidth: 0, overflow: 'hidden', ...safeArea },
+        ...sxEntries(sx)]}>
+      <MuiBox data-testid={testID ? `${testID}-viewport` : undefined}
+        sx={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0, overflowY: scroll ? 'auto' : 'hidden' }}>
+        <Box {...withoutTestIdProps(layout)} direction="column"
+          sx={[scroll ? { flexGrow: 1, flexShrink: 0 } : { flex: 1, minHeight: 0, minWidth: 0 }, ...sxEntries(contentSx)]}>
+          {children}
+        </Box>
+      </MuiBox>
+    </Box>
+  );
+});
+Screen.displayName = 'Screen';

package/src/components/layout/Screen/Screen.types.native.ts

@@ -0,0 +1,13 @@
+import type { ScrollViewProps, StyleProp, ViewProps, ViewStyle } from 'react-native';
+
+import type { ScreenBaseProps } from './Screen.base';
+
+export type { ScreenBaseProps, ScreenEdge } from './Screen.base';
+export type ScreenProps = ScreenBaseProps & Omit<ViewProps, keyof ScreenBaseProps> & {
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  /** Scroll events/indicators; Screen owns orientation, size and keyboard insets. */
+  scrollViewProps?: Omit<ScrollViewProps,
+    'children' | 'style' | 'contentContainerStyle' | 'horizontal' | 'scrollEnabled' |
+    'automaticallyAdjustKeyboardInsets' | 'automaticallyAdjustContentInsets' | 'contentInsetAdjustmentBehavior'
+  >;
+};

package/src/components/layout/Screen/Screen.types.ts

@@ -0,0 +1,10 @@
+import type { SxProps, Theme } from '@mui/material/styles/index.js';
+import type * as React from 'react';
+
+import type { ScreenBaseProps } from './Screen.base';
+
+export type { ScreenBaseProps, ScreenEdge } from './Screen.base';
+export type ScreenProps = ScreenBaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, keyof ScreenBaseProps> & {
+  sx?: SxProps<Theme>;
+  contentSx?: SxProps<Theme>;
+};

package/src/components/layout/Screen/index.native.ts

@@ -0,0 +1,2 @@
+export { Screen } from './Screen.native';
+export type { ScreenProps, ScreenBaseProps, ScreenEdge } from './Screen.types.native';

package/src/components/layout/Screen/index.ts

@@ -0,0 +1,2 @@
+export { Screen } from './Screen';
+export type { ScreenProps, ScreenBaseProps, ScreenEdge } from './Screen.types';