@12-apps/ui 6.74.1 → 6.75.0

package/NATIVE.md

@@ -113,5 +113,5 @@ Ported: **28 of 149** public subpaths carry a `react-native` condition.
 | `@12-apps/ui/typography/Heading` | 26 | 1 | `gradient` paints the gradient's first stop as a flat colour: React Native has no `background-clip: text` and no gradient fill in core. A host wanting the real thing adds a masked-gradient library. |
 | `@12-apps/ui/typography/Paragraph` | 17 | 1 | — |
 | `@12-apps/ui/typography/Text` | 26 | 3 | — |
-| `@12-apps/ui/layout/Screen` | 10 | 0 | 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. |
+| `@12-apps/ui/layout/Screen` | 11 | 0 | 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. |
 <!-- native-parity:end -->

package/dist/_internal/components/index.js

@@ -130,13 +130,13 @@ import "../../chunk-3AIRFAI3.js";
 import "../../chunk-R26KYJHK.js";
 import {
   SectionNav
-} from "../../chunk-27F2VXS4.js";
+} from "../../chunk-7IXXASQ6.js";
 import "../../chunk-SNWCT6JN.js";
 import "../../chunk-ILJ3FXIC.js";
 import {
   sectionNavBarInset
-} from "../../chunk-URSYEHPU.js";
-import "../../chunk-NM46HQSW.js";
+} from "../../chunk-PMRLFNBT.js";
+import "../../chunk-J26ZWYQI.js";
 import {
   RaisedActionButton
 } from "../../chunk-UKUGSU3Y.js";
@@ -201,7 +201,7 @@ import {
   Drawer,
   DrawerContent,
   DrawerHeader
-} from "../../chunk-UALPKKAY.js";
+} from "../../chunk-F742IMLQ.js";
 import "../../chunk-ENORM6S2.js";
 import {
   Resizable

package/dist/_internal/components/layout/Drawer/Drawer.js

@@ -2,7 +2,7 @@ import {
   Drawer,
   DrawerContent,
   DrawerHeader
-} from "../../../../chunk-UALPKKAY.js";
+} from "../../../../chunk-F742IMLQ.js";
 import "../../../../chunk-XJAD6E3V.js";
 import "../../../../chunk-F5H2ZXST.js";
 import "../../../../chunk-N3GAFIXG.js";

package/dist/_internal/components/layout/index.js

@@ -58,7 +58,7 @@ import {
   Drawer,
   DrawerContent,
   DrawerHeader
-} from "../../../chunk-UALPKKAY.js";
+} from "../../../chunk-F742IMLQ.js";
 import "../../../chunk-ENORM6S2.js";
 import {
   Resizable

package/dist/_internal/components/navigation/SectionNav/SectionNav.bar.js

@@ -2,13 +2,13 @@ import {
   SectionNavBar,
   sectionNavBarInset,
   sectionNavSheetOffset
-} from "../../../../chunk-URSYEHPU.js";
-import "../../../../chunk-NM46HQSW.js";
+} from "../../../../chunk-PMRLFNBT.js";
+import "../../../../chunk-J26ZWYQI.js";
 import "../../../../chunk-UKUGSU3Y.js";
 import "../../../../chunk-24HHUCWB.js";
 import "../../../../chunk-YCCWJ5XQ.js";
 import "../../../../chunk-TMSWLFL4.js";
-import "../../../../chunk-UALPKKAY.js";
+import "../../../../chunk-F742IMLQ.js";
 import "../../../../chunk-PUFA7FQ7.js";
 import "../../../../chunk-5AK2EZG5.js";
 import "../../../../chunk-N5PVD4J5.js";

package/dist/_internal/components/navigation/SectionNav/SectionNav.js

@@ -1,15 +1,15 @@
 import {
   SectionNav
-} from "../../../../chunk-27F2VXS4.js";
+} from "../../../../chunk-7IXXASQ6.js";
 import "../../../../chunk-SNWCT6JN.js";
 import "../../../../chunk-ILJ3FXIC.js";
-import "../../../../chunk-URSYEHPU.js";
-import "../../../../chunk-NM46HQSW.js";
+import "../../../../chunk-PMRLFNBT.js";
+import "../../../../chunk-J26ZWYQI.js";
 import "../../../../chunk-UKUGSU3Y.js";
 import "../../../../chunk-24HHUCWB.js";
 import "../../../../chunk-YCCWJ5XQ.js";
 import "../../../../chunk-TMSWLFL4.js";
-import "../../../../chunk-UALPKKAY.js";
+import "../../../../chunk-F742IMLQ.js";
 import "../../../../chunk-PUFA7FQ7.js";
 import "../../../../chunk-5AK2EZG5.js";
 import "../../../../chunk-N5PVD4J5.js";

package/dist/_internal/components/navigation/SectionNav/SectionNav.sheet.js

@@ -1,10 +1,10 @@
 import {
   SectionNavSheet
-} from "../../../../chunk-NM46HQSW.js";
+} from "../../../../chunk-J26ZWYQI.js";
 import "../../../../chunk-24HHUCWB.js";
 import "../../../../chunk-YCCWJ5XQ.js";
 import "../../../../chunk-TMSWLFL4.js";
-import "../../../../chunk-UALPKKAY.js";
+import "../../../../chunk-F742IMLQ.js";
 import "../../../../chunk-PUFA7FQ7.js";
 import "../../../../chunk-5AK2EZG5.js";
 import "../../../../chunk-N5PVD4J5.js";

package/dist/_internal/components/navigation/index.js

@@ -54,20 +54,20 @@ import "../../../chunk-3AIRFAI3.js";
 import "../../../chunk-R26KYJHK.js";
 import {
   SectionNav
-} from "../../../chunk-27F2VXS4.js";
+} from "../../../chunk-7IXXASQ6.js";
 import "../../../chunk-SNWCT6JN.js";
 import "../../../chunk-ILJ3FXIC.js";
 import {
   sectionNavBarInset
-} from "../../../chunk-URSYEHPU.js";
-import "../../../chunk-NM46HQSW.js";
+} from "../../../chunk-PMRLFNBT.js";
+import "../../../chunk-J26ZWYQI.js";
 import {
   RaisedActionButton
 } from "../../../chunk-UKUGSU3Y.js";
 import "../../../chunk-24HHUCWB.js";
 import "../../../chunk-YCCWJ5XQ.js";
 import "../../../chunk-TMSWLFL4.js";
-import "../../../chunk-UALPKKAY.js";
+import "../../../chunk-F742IMLQ.js";
 import "../../../chunk-7K23NEZO.js";
 import "../../../chunk-5MMAV7XK.js";
 import "../../../chunk-3ROCD7XF.js";

package/dist/{chunk-27F2VXS4.js → chunk-7IXXASQ6.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-SNWCT6JN.js";
 import {
   SectionNavBar
-} from "./chunk-URSYEHPU.js";
+} from "./chunk-PMRLFNBT.js";
 
 // src/components/navigation/SectionNav/SectionNav.tsx
 import { jsx } from "react/jsx-runtime";
@@ -55,4 +55,4 @@ function SectionNav({
 export {
   SectionNav
 };
-//# sourceMappingURL=chunk-27F2VXS4.js.map
+//# sourceMappingURL=chunk-7IXXASQ6.js.map

package/dist/{chunk-UALPKKAY.js → chunk-F742IMLQ.js}

@@ -122,7 +122,10 @@ var DrawerHeader = ({
       sx: {
         display: "flex",
         alignItems: "center",
-        padding: theme.spacing(2),
+        // 12px above and below: the close button is 40px tall, so the header lands on
+        // its own 64px minimum instead of 72 — the height of the page header beside
+        // a docked drawer (FUT-3476).
+        padding: theme.spacing(1.5, 2),
         borderBottom: `1px solid ${theme.palette.divider}`,
         minHeight: rem(theme, 64),
         justifyContent: "space-between"
@@ -164,4 +167,4 @@ export {
   DrawerHeader,
   DrawerContent
 };
-//# sourceMappingURL=chunk-UALPKKAY.js.map
+//# sourceMappingURL=chunk-F742IMLQ.js.map

package/dist/{chunk-UALPKKAY.js.map → chunk-F742IMLQ.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/layout/Drawer/Drawer.tsx"],"sourcesContent":["import Close from '@mui/icons-material/Close';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport MuiDrawer from '@mui/material/Drawer/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { DrawerContentProps,DrawerHeaderProps, DrawerProps } from './Drawer.types';\nimport { shadowInk } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\n\ntype DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';\n\n/**\n * A `width`/`height` prop as CSS. `sx` reads a number of 1 or less as a\n * fraction of the parent, and that stays so; any other number is design px,\n * through the type scale; a string is as given.\n */\nconst drawerLength = (theme: Theme, value: number | string | undefined): string | undefined => {\n  if (typeof value !== 'number') return value;\n  return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);\n};\n\n// `variant` doubles as a position preset, but an explicit `anchor` always wins.\nconst resolveAnchor = (\n  anchor: DrawerProps['anchor'],\n  variant: DrawerProps['variant'],\n): DrawerAnchor => {\n  if (anchor) return anchor;\n\n  // Map variant to anchor position\n  switch (variant) {\n    case 'right':\n      return 'right';\n    case 'top':\n      return 'top';\n    case 'bottom':\n      return 'bottom';\n    case 'glass':\n      return 'right';\n    case 'left':\n    default:\n      return 'left';\n  }\n};\n\nconst buildDrawerStyles = (\n  theme: Theme,\n  anchor: DrawerAnchor,\n  variant: DrawerProps['variant'],\n  width: DrawerProps['width'],\n  height: DrawerProps['height'],\n  // Merged LAST into the surface's own rules, so a caller can shape the sliding\n  // surface itself (rounded corners on a bottom sheet, a docked panel's offset)\n  // without reaching for the MUI paper class from outside. Undefined by default:\n  // omit it and the drawer styles exactly as it always has.\n  paperSx?: DrawerProps['paperSx'],\n) => {\n  const widthCss = drawerLength(theme, width);\n  const heightCss = drawerLength(theme, height);\n  const baseStyles = {\n    width: ['left', 'right'].includes(anchor) ? widthCss : '100%',\n    height: ['top', 'bottom'].includes(anchor) ? heightCss : '100%',\n    flexShrink: 0,\n  };\n\n  if (variant === 'glass') {\n    return {\n      ...baseStyles,\n      '& .MuiDrawer-paper': {\n        width: widthCss,\n        height: '100%',\n        backgroundColor: alpha(theme.palette.background.paper, 0.1),\n        backdropFilter: `blur(${rem(theme, 20)})`,\n        border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,\n        boxShadow: `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.1)}`,\n        ...paperSx,\n      },\n    };\n  }\n\n  return {\n    ...baseStyles,\n    '& .MuiDrawer-paper': {\n      width: ['left', 'right'].includes(anchor) ? widthCss : '100%',\n      height: ['top', 'bottom'].includes(anchor) ? heightCss : '100%',\n      boxSizing: 'border-box',\n      ...paperSx,\n    },\n  };\n};\n\nexport const Drawer: React.FC<DrawerProps> = ({\n  children,\n  open,\n  onClose,\n  variant = 'left',\n  anchor,\n  width,\n  height = '100%',\n  persistent = false,\n  backdrop = true,\n  hideBackdrop = false,\n  keepMounted = false,\n  paperSx,\n  className,\n  dataTestId,\n  ...rest\n}) => {\n  const theme = useTheme();\n  const drawerAnchor = resolveAnchor(anchor, variant);\n\n  return (\n    <MuiDrawer\n      anchor={drawerAnchor}\n      open={open}\n      onClose={onClose}\n      variant={persistent ? 'persistent' : 'temporary'}\n      ModalProps={{\n        keepMounted,\n        hideBackdrop,\n        BackdropProps: {\n          invisible: !backdrop,\n        },\n      }}\n      sx={buildDrawerStyles(theme, drawerAnchor, variant, width ?? 280, height, paperSx)}\n      className={className}\n      data-testid={dataTestId || 'drawer'}\n      {...rest}\n    >\n      {children}\n    </MuiDrawer>\n  );\n};\n\nexport const DrawerHeader: React.FC<DrawerHeaderProps> = ({\n  children,\n  onClose,\n  showCloseButton = true,\n  closeLabel,\n  dataTestId,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      data-testid={dataTestId || 'drawer-header'}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        padding: theme.spacing(2),\n        borderBottom: `1px solid ${theme.palette.divider}`,\n        minHeight: rem(theme, 64),\n        justifyContent: 'space-between',\n      }}\n    >\n      <Box sx={{ flex: 1 }} data-testid={dataTestId ? `${dataTestId}-title` : 'drawer-title'}>\n        {typeof children === 'string' ? <Typography variant=\"h6\">{children}</Typography> : children}\n      </Box>\n      {showCloseButton && onClose && (\n        <IconButton\n          onClick={onClose}\n          edge=\"end\"\n          aria-label={closeLabel ?? 'Close drawer'}\n          data-testid={dataTestId ? `${dataTestId}-close` : 'drawer-close'}\n        >\n          <Close />\n        </IconButton>\n      )}\n    </Box>\n  );\n};\n\nexport const DrawerContent: React.FC<DrawerContentProps> = ({ children, padding = true, dataTestId }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      data-testid={dataTestId || 'drawer-content'}\n      sx={{\n        flex: 1,\n        overflow: 'auto',\n        padding: padding ? theme.spacing(2) : 0,\n      }}\n    >\n      {children}\n    </Box>\n  );\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/components/layout/Drawer/Drawer.tsx"],"sourcesContent":["import Close from '@mui/icons-material/Close';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport MuiDrawer from '@mui/material/Drawer/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { DrawerContentProps,DrawerHeaderProps, DrawerProps } from './Drawer.types';\nimport { shadowInk } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\n\ntype DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';\n\n/**\n * A `width`/`height` prop as CSS. `sx` reads a number of 1 or less as a\n * fraction of the parent, and that stays so; any other number is design px,\n * through the type scale; a string is as given.\n */\nconst drawerLength = (theme: Theme, value: number | string | undefined): string | undefined => {\n  if (typeof value !== 'number') return value;\n  return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);\n};\n\n// `variant` doubles as a position preset, but an explicit `anchor` always wins.\nconst resolveAnchor = (\n  anchor: DrawerProps['anchor'],\n  variant: DrawerProps['variant'],\n): DrawerAnchor => {\n  if (anchor) return anchor;\n\n  // Map variant to anchor position\n  switch (variant) {\n    case 'right':\n      return 'right';\n    case 'top':\n      return 'top';\n    case 'bottom':\n      return 'bottom';\n    case 'glass':\n      return 'right';\n    case 'left':\n    default:\n      return 'left';\n  }\n};\n\nconst buildDrawerStyles = (\n  theme: Theme,\n  anchor: DrawerAnchor,\n  variant: DrawerProps['variant'],\n  width: DrawerProps['width'],\n  height: DrawerProps['height'],\n  // Merged LAST into the surface's own rules, so a caller can shape the sliding\n  // surface itself (rounded corners on a bottom sheet, a docked panel's offset)\n  // without reaching for the MUI paper class from outside. Undefined by default:\n  // omit it and the drawer styles exactly as it always has.\n  paperSx?: DrawerProps['paperSx'],\n) => {\n  const widthCss = drawerLength(theme, width);\n  const heightCss = drawerLength(theme, height);\n  const baseStyles = {\n    width: ['left', 'right'].includes(anchor) ? widthCss : '100%',\n    height: ['top', 'bottom'].includes(anchor) ? heightCss : '100%',\n    flexShrink: 0,\n  };\n\n  if (variant === 'glass') {\n    return {\n      ...baseStyles,\n      '& .MuiDrawer-paper': {\n        width: widthCss,\n        height: '100%',\n        backgroundColor: alpha(theme.palette.background.paper, 0.1),\n        backdropFilter: `blur(${rem(theme, 20)})`,\n        border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,\n        boxShadow: `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.1)}`,\n        ...paperSx,\n      },\n    };\n  }\n\n  return {\n    ...baseStyles,\n    '& .MuiDrawer-paper': {\n      width: ['left', 'right'].includes(anchor) ? widthCss : '100%',\n      height: ['top', 'bottom'].includes(anchor) ? heightCss : '100%',\n      boxSizing: 'border-box',\n      ...paperSx,\n    },\n  };\n};\n\nexport const Drawer: React.FC<DrawerProps> = ({\n  children,\n  open,\n  onClose,\n  variant = 'left',\n  anchor,\n  width,\n  height = '100%',\n  persistent = false,\n  backdrop = true,\n  hideBackdrop = false,\n  keepMounted = false,\n  paperSx,\n  className,\n  dataTestId,\n  ...rest\n}) => {\n  const theme = useTheme();\n  const drawerAnchor = resolveAnchor(anchor, variant);\n\n  return (\n    <MuiDrawer\n      anchor={drawerAnchor}\n      open={open}\n      onClose={onClose}\n      variant={persistent ? 'persistent' : 'temporary'}\n      ModalProps={{\n        keepMounted,\n        hideBackdrop,\n        BackdropProps: {\n          invisible: !backdrop,\n        },\n      }}\n      sx={buildDrawerStyles(theme, drawerAnchor, variant, width ?? 280, height, paperSx)}\n      className={className}\n      data-testid={dataTestId || 'drawer'}\n      {...rest}\n    >\n      {children}\n    </MuiDrawer>\n  );\n};\n\nexport const DrawerHeader: React.FC<DrawerHeaderProps> = ({\n  children,\n  onClose,\n  showCloseButton = true,\n  closeLabel,\n  dataTestId,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      data-testid={dataTestId || 'drawer-header'}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        // 12px above and below: the close button is 40px tall, so the header lands on\n        // its own 64px minimum instead of 72 — the height of the page header beside\n        // a docked drawer (FUT-3476).\n        padding: theme.spacing(1.5, 2),\n        borderBottom: `1px solid ${theme.palette.divider}`,\n        minHeight: rem(theme, 64),\n        justifyContent: 'space-between',\n      }}\n    >\n      <Box sx={{ flex: 1 }} data-testid={dataTestId ? `${dataTestId}-title` : 'drawer-title'}>\n        {typeof children === 'string' ? <Typography variant=\"h6\">{children}</Typography> : children}\n      </Box>\n      {showCloseButton && onClose && (\n        <IconButton\n          onClick={onClose}\n          edge=\"end\"\n          aria-label={closeLabel ?? 'Close drawer'}\n          data-testid={dataTestId ? `${dataTestId}-close` : 'drawer-close'}\n        >\n          <Close />\n        </IconButton>\n      )}\n    </Box>\n  );\n};\n\nexport const DrawerContent: React.FC<DrawerContentProps> = ({ children, padding = true, dataTestId }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      data-testid={dataTestId || 'drawer-content'}\n      sx={{\n        flex: 1,\n        overflow: 'auto',\n        padding: padding ? theme.spacing(2) : 0,\n      }}\n    >\n      {children}\n    </Box>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-NM46HQSW.js → chunk-J26ZWYQI.js}

@@ -9,7 +9,7 @@ import {
   Drawer,
   DrawerContent,
   DrawerHeader
-} from "./chunk-UALPKKAY.js";
+} from "./chunk-F742IMLQ.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -175,4 +175,4 @@ function SectionNavSheet({
 export {
   SectionNavSheet
 };
-//# sourceMappingURL=chunk-NM46HQSW.js.map
+//# sourceMappingURL=chunk-J26ZWYQI.js.map

package/dist/{chunk-URSYEHPU.js → chunk-PMRLFNBT.js}

@@ -1,6 +1,6 @@
 import {
   SectionNavSheet
-} from "./chunk-NM46HQSW.js";
+} from "./chunk-J26ZWYQI.js";
 import {
   RaisedActionButton,
   raisedLift
@@ -327,4 +327,4 @@ export {
   sectionNavSheetOffset,
   SectionNavBar
 };
-//# sourceMappingURL=chunk-URSYEHPU.js.map
+//# sourceMappingURL=chunk-PMRLFNBT.js.map

package/dist/layout/Drawer.js

@@ -3,7 +3,7 @@ import {
   Drawer,
   DrawerContent,
   DrawerHeader
-} from "../chunk-UALPKKAY.js";
+} from "../chunk-F742IMLQ.js";
 import "../chunk-XJAD6E3V.js";
 import "../chunk-F5H2ZXST.js";
 import "../chunk-N3GAFIXG.js";

package/dist/native/layout/Screen.js

@@ -25,6 +25,9 @@ function keyboardBehavior(enabled) {
   if (!enabled) return void 0;
   return Platform.OS === "ios" ? "padding" : "height";
 }
+function keyboardDismissMode() {
+  return Platform.OS === "web" ? "none" : "on-drag";
+}
 function ScreenBoundary({ children }) {
   const insets = React.useContext(SafeAreaInsetsContext);
   return insets === null ? /* @__PURE__ */ jsx(SafeAreaProvider, { style: styles.fill, children }) : /* @__PURE__ */ jsx(Fragment, { children });
@@ -56,7 +59,7 @@ var Screen = React.forwardRef(({
         ScrollView,
         {
           keyboardShouldPersistTaps: "handled",
-          keyboardDismissMode: "on-drag",
+          keyboardDismissMode: keyboardDismissMode(),
           ...scrollViewProps,
           testID: scrollViewProps?.testID ?? (testID ? `${testID}-viewport` : void 0),
           style: styles.fill,

package/dist/native/layout/Screen.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layout/Screen/Screen.native.tsx","../../../src/components/layout/Screen/Screen.base.ts"],"sourcesContent":["import * as React from 'react';\nimport { KeyboardAvoidingView, Platform, ScrollView, StyleSheet, View } from 'react-native';\nimport { SafeAreaInsetsContext, SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';\n\nimport { SCREEN_EDGES } from './Screen.base';\nimport type { ScreenProps } from './Screen.types.native';\nimport { resolveBoxLayout, splitBoxProps } from '../Box/box-layout';\nimport { resolveTestId } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\n\nconst styles = StyleSheet.create({ fill: { flex: 1 }, content: { flexGrow: 1 } });\n\nfunction keyboardBehavior(enabled: boolean): 'padding' | 'height' | undefined {\n  if (!enabled) return undefined;\n  return Platform.OS === 'ios' ? 'padding' : 'height';\n}\n\n/** Reuse a navigator's context, or own one outside the scrolling view. */\nfunction ScreenBoundary({ children }: { children: React.ReactNode }): React.JSX.Element {\n  const insets = React.useContext(SafeAreaInsetsContext);\n  return insets === null\n    ? <SafeAreaProvider style={styles.fill}>{children}</SafeAreaProvider>\n    : <>{children}</>;\n}\n\nexport const Screen = React.forwardRef<View, ScreenProps>(({\n  children, scroll = true, safeAreaEdges = SCREEN_EDGES,\n  keyboardAvoiding = true, keyboardVerticalOffset = 0, bg = 'default',\n  style, contentContainerStyle, scrollViewProps, ...props\n}, ref) => {\n  const theme = useUiTheme();\n  const { layout, rest } = splitBoxProps(props);\n  const testID = resolveTestId(layout);\n  const contentStyle = [styles.content, resolveBoxLayout({ ...layout, direction: 'column' }, theme), contentContainerStyle];\n  return (\n    <ScreenBoundary>\n      <View ref={ref} testID={testID} {...rest} style={[styles.fill, resolveBoxLayout({ bg }, theme), style]}>\n        <SafeAreaView edges={safeAreaEdges} style={styles.fill}>\n          <KeyboardAvoidingView style={styles.fill} enabled={keyboardAvoiding}\n            behavior={keyboardBehavior(keyboardAvoiding)} keyboardVerticalOffset={keyboardVerticalOffset}>\n            {scroll ? (\n              <ScrollView keyboardShouldPersistTaps=\"handled\" keyboardDismissMode=\"on-drag\" {...scrollViewProps}\n                testID={scrollViewProps?.testID ?? (testID ? `${testID}-viewport` : undefined)}\n                style={styles.fill} contentContainerStyle={contentStyle}\n                horizontal={false} automaticallyAdjustKeyboardInsets={false}\n                automaticallyAdjustContentInsets={false} contentInsetAdjustmentBehavior=\"never\">\n                {children}\n              </ScrollView>\n            ) : <View style={[styles.fill, contentStyle]}>{children}</View>}\n          </KeyboardAvoidingView>\n        </SafeAreaView>\n      </View>\n    </ScreenBoundary>\n  );\n});\nScreen.displayName = 'Screen';\n","import type { BoxBaseProps } from '../Box/Box.base';\n\n/** Physical screen edges, independent of a native dependency. */\nexport type ScreenEdge = 'top' | 'right' | 'bottom' | 'left';\nexport const SCREEN_EDGES: readonly ScreenEdge[] = ['top', 'right', 'bottom', 'left'];\n\n/** Padding and gap apply to the content, inside the selected safe-area edges. */\nexport interface ScreenBaseProps extends Pick<\n  BoxBaseProps,\n  'children' | 'p' | 'px' | 'py' | 'pt' | 'pr' | 'pb' | 'pl' | 'gap' | 'bg' | 'testID' | 'dataTestId'\n> {\n  /** Vertical scrolling; turn off when a child owns scrolling. Default true. */\n  scroll?: boolean;\n  /** Omit bottom when a navigator's tab bar already owns that inset. */\n  safeAreaEdges?: readonly ScreenEdge[];\n  /** Lift the native viewport above the soft keyboard. Default true. */\n  keyboardAvoiding?: boolean;\n  /** Native distance from the window top to the screen's parent, in dp. */\n  keyboardVerticalOffset?: number;\n}\n"],"mappings":";;;;;;;;;;;;;AAAA,YAAY,WAAW;AACvB,SAAS,sBAAsB,UAAU,YAAY,YAAY,YAAY;AAC7E,SAAS,uBAAuB,kBAAkB,oBAAoB;;;ACE/D,IAAM,eAAsC,CAAC,OAAO,SAAS,UAAU,MAAM;;;ADiB9E,SACA,UADA;AAXN,IAAM,SAAS,WAAW,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,UAAU,EAAE,EAAE,CAAC;AAEhF,SAAS,iBAAiB,SAAoD;AAC5E,MAAI,CAAC,QAAS,QAAO;AACrB,SAAO,SAAS,OAAO,QAAQ,YAAY;AAC7C;AAGA,SAAS,eAAe,EAAE,SAAS,GAAqD;AACtF,QAAM,SAAe,iBAAW,qBAAqB;AACrD,SAAO,WAAW,OACd,oBAAC,oBAAiB,OAAO,OAAO,MAAO,UAAS,IAChD,gCAAG,UAAS;AAClB;AAEO,IAAM,SAAe,iBAA8B,CAAC;AAAA,EACzD;AAAA,EAAU,SAAS;AAAA,EAAM,gBAAgB;AAAA,EACzC,mBAAmB;AAAA,EAAM,yBAAyB;AAAA,EAAG,KAAK;AAAA,EAC1D;AAAA,EAAO;AAAA,EAAuB;AAAA,EAAiB,GAAG;AACpD,GAAG,QAAQ;AACT,QAAM,QAAQ,WAAW;AACzB,QAAM,EAAE,QAAQ,KAAK,IAAI,cAAc,KAAK;AAC5C,QAAM,SAAS,cAAc,MAAM;AACnC,QAAM,eAAe,CAAC,OAAO,SAAS,iBAAiB,EAAE,GAAG,QAAQ,WAAW,SAAS,GAAG,KAAK,GAAG,qBAAqB;AACxH,SACE,oBAAC,kBACC,8BAAC,QAAK,KAAU,QAAiB,GAAG,MAAM,OAAO,CAAC,OAAO,MAAM,iBAAiB,EAAE,GAAG,GAAG,KAAK,GAAG,KAAK,GACnG,8BAAC,gBAAa,OAAO,eAAe,OAAO,OAAO,MAChD;AAAA,IAAC;AAAA;AAAA,MAAqB,OAAO,OAAO;AAAA,MAAM,SAAS;AAAA,MACjD,UAAU,iBAAiB,gBAAgB;AAAA,MAAG;AAAA,MAC7C,mBACC;AAAA,QAAC;AAAA;AAAA,UAAW,2BAA0B;AAAA,UAAU,qBAAoB;AAAA,UAAW,GAAG;AAAA,UAChF,QAAQ,iBAAiB,WAAW,SAAS,GAAG,MAAM,cAAc;AAAA,UACpE,OAAO,OAAO;AAAA,UAAM,uBAAuB;AAAA,UAC3C,YAAY;AAAA,UAAO,mCAAmC;AAAA,UACtD,kCAAkC;AAAA,UAAO,gCAA+B;AAAA,UACvE;AAAA;AAAA,MACH,IACE,oBAAC,QAAK,OAAO,CAAC,OAAO,MAAM,YAAY,GAAI,UAAS;AAAA;AAAA,EAC1D,GACF,GACF,GACF;AAEJ,CAAC;AACD,OAAO,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/layout/Screen/Screen.native.tsx","../../../src/components/layout/Screen/Screen.base.ts"],"sourcesContent":["import * as React from 'react';\nimport { KeyboardAvoidingView, Platform, ScrollView, StyleSheet, View } from 'react-native';\nimport { SafeAreaInsetsContext, SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';\n\nimport { SCREEN_EDGES } from './Screen.base';\nimport type { ScreenProps } from './Screen.types.native';\nimport { resolveBoxLayout, splitBoxProps } from '../Box/box-layout';\nimport { resolveTestId } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\n\nconst styles = StyleSheet.create({ fill: { flex: 1 }, content: { flexGrow: 1 } });\n\nfunction keyboardBehavior(enabled: boolean): 'padding' | 'height' | undefined {\n  if (!enabled) return undefined;\n  return Platform.OS === 'ios' ? 'padding' : 'height';\n}\n\n/**\n * Drag-to-dismiss on a device only. react-native-web runs `dismissKeyboard()`\n * on EVERY scroll event of an `on-drag` ScrollView, including the one the\n * browser fires to bring a just-focused field into view, so on the web the\n * field the user tapped lost focus as soon as the viewport moved.\n */\nfunction keyboardDismissMode(): 'on-drag' | 'none' {\n  return Platform.OS === 'web' ? 'none' : 'on-drag';\n}\n\n/** Reuse a navigator's context, or own one outside the scrolling view. */\nfunction ScreenBoundary({ children }: { children: React.ReactNode }): React.JSX.Element {\n  const insets = React.useContext(SafeAreaInsetsContext);\n  return insets === null\n    ? <SafeAreaProvider style={styles.fill}>{children}</SafeAreaProvider>\n    : <>{children}</>;\n}\n\nexport const Screen = React.forwardRef<View, ScreenProps>(({\n  children, scroll = true, safeAreaEdges = SCREEN_EDGES,\n  keyboardAvoiding = true, keyboardVerticalOffset = 0, bg = 'default',\n  style, contentContainerStyle, scrollViewProps, ...props\n}, ref) => {\n  const theme = useUiTheme();\n  const { layout, rest } = splitBoxProps(props);\n  const testID = resolveTestId(layout);\n  const contentStyle = [styles.content, resolveBoxLayout({ ...layout, direction: 'column' }, theme), contentContainerStyle];\n  return (\n    <ScreenBoundary>\n      <View ref={ref} testID={testID} {...rest} style={[styles.fill, resolveBoxLayout({ bg }, theme), style]}>\n        <SafeAreaView edges={safeAreaEdges} style={styles.fill}>\n          <KeyboardAvoidingView style={styles.fill} enabled={keyboardAvoiding}\n            behavior={keyboardBehavior(keyboardAvoiding)} keyboardVerticalOffset={keyboardVerticalOffset}>\n            {scroll ? (\n              <ScrollView keyboardShouldPersistTaps=\"handled\" keyboardDismissMode={keyboardDismissMode()} {...scrollViewProps}\n                testID={scrollViewProps?.testID ?? (testID ? `${testID}-viewport` : undefined)}\n                style={styles.fill} contentContainerStyle={contentStyle}\n                horizontal={false} automaticallyAdjustKeyboardInsets={false}\n                automaticallyAdjustContentInsets={false} contentInsetAdjustmentBehavior=\"never\">\n                {children}\n              </ScrollView>\n            ) : <View style={[styles.fill, contentStyle]}>{children}</View>}\n          </KeyboardAvoidingView>\n        </SafeAreaView>\n      </View>\n    </ScreenBoundary>\n  );\n});\nScreen.displayName = 'Screen';\n","import type { BoxBaseProps } from '../Box/Box.base';\n\n/** Physical screen edges, independent of a native dependency. */\nexport type ScreenEdge = 'top' | 'right' | 'bottom' | 'left';\nexport const SCREEN_EDGES: readonly ScreenEdge[] = ['top', 'right', 'bottom', 'left'];\n\n/** Padding and gap apply to the content, inside the selected safe-area edges. */\nexport interface ScreenBaseProps extends Pick<\n  BoxBaseProps,\n  'children' | 'p' | 'px' | 'py' | 'pt' | 'pr' | 'pb' | 'pl' | 'gap' | 'bg' | 'testID' | 'dataTestId'\n> {\n  /** Vertical scrolling; turn off when a child owns scrolling. Default true. */\n  scroll?: boolean;\n  /** Omit bottom when a navigator's tab bar already owns that inset. */\n  safeAreaEdges?: readonly ScreenEdge[];\n  /** Lift the native viewport above the soft keyboard. Default true. */\n  keyboardAvoiding?: boolean;\n  /** Native distance from the window top to the screen's parent, in dp. */\n  keyboardVerticalOffset?: number;\n}\n"],"mappings":";;;;;;;;;;;;;AAAA,YAAY,WAAW;AACvB,SAAS,sBAAsB,UAAU,YAAY,YAAY,YAAY;AAC7E,SAAS,uBAAuB,kBAAkB,oBAAoB;;;ACE/D,IAAM,eAAsC,CAAC,OAAO,SAAS,UAAU,MAAM;;;AD2B9E,SACA,UADA;AArBN,IAAM,SAAS,WAAW,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,UAAU,EAAE,EAAE,CAAC;AAEhF,SAAS,iBAAiB,SAAoD;AAC5E,MAAI,CAAC,QAAS,QAAO;AACrB,SAAO,SAAS,OAAO,QAAQ,YAAY;AAC7C;AAQA,SAAS,sBAA0C;AACjD,SAAO,SAAS,OAAO,QAAQ,SAAS;AAC1C;AAGA,SAAS,eAAe,EAAE,SAAS,GAAqD;AACtF,QAAM,SAAe,iBAAW,qBAAqB;AACrD,SAAO,WAAW,OACd,oBAAC,oBAAiB,OAAO,OAAO,MAAO,UAAS,IAChD,gCAAG,UAAS;AAClB;AAEO,IAAM,SAAe,iBAA8B,CAAC;AAAA,EACzD;AAAA,EAAU,SAAS;AAAA,EAAM,gBAAgB;AAAA,EACzC,mBAAmB;AAAA,EAAM,yBAAyB;AAAA,EAAG,KAAK;AAAA,EAC1D;AAAA,EAAO;AAAA,EAAuB;AAAA,EAAiB,GAAG;AACpD,GAAG,QAAQ;AACT,QAAM,QAAQ,WAAW;AACzB,QAAM,EAAE,QAAQ,KAAK,IAAI,cAAc,KAAK;AAC5C,QAAM,SAAS,cAAc,MAAM;AACnC,QAAM,eAAe,CAAC,OAAO,SAAS,iBAAiB,EAAE,GAAG,QAAQ,WAAW,SAAS,GAAG,KAAK,GAAG,qBAAqB;AACxH,SACE,oBAAC,kBACC,8BAAC,QAAK,KAAU,QAAiB,GAAG,MAAM,OAAO,CAAC,OAAO,MAAM,iBAAiB,EAAE,GAAG,GAAG,KAAK,GAAG,KAAK,GACnG,8BAAC,gBAAa,OAAO,eAAe,OAAO,OAAO,MAChD;AAAA,IAAC;AAAA;AAAA,MAAqB,OAAO,OAAO;AAAA,MAAM,SAAS;AAAA,MACjD,UAAU,iBAAiB,gBAAgB;AAAA,MAAG;AAAA,MAC7C,mBACC;AAAA,QAAC;AAAA;AAAA,UAAW,2BAA0B;AAAA,UAAU,qBAAqB,oBAAoB;AAAA,UAAI,GAAG;AAAA,UAC9F,QAAQ,iBAAiB,WAAW,SAAS,GAAG,MAAM,cAAc;AAAA,UACpE,OAAO,OAAO;AAAA,UAAM,uBAAuB;AAAA,UAC3C,YAAY;AAAA,UAAO,mCAAmC;AAAA,UACtD,kCAAkC;AAAA,UAAO,gCAA+B;AAAA,UACvE;AAAA;AAAA,MACH,IACE,oBAAC,QAAK,OAAO,CAAC,OAAO,MAAM,YAAY,GAAI,UAAS;AAAA;AAAA,EAC1D,GACF,GACF,GACF;AAEJ,CAAC;AACD,OAAO,cAAc;","names":[]}

package/dist/navigation/SectionNav.js

@@ -1,20 +1,20 @@
 import "../chunk-R26KYJHK.js";
 import {
   SectionNav
-} from "../chunk-27F2VXS4.js";
+} from "../chunk-7IXXASQ6.js";
 import "../chunk-SNWCT6JN.js";
 import "../chunk-ILJ3FXIC.js";
 import {
   sectionNavBarInset
-} from "../chunk-URSYEHPU.js";
-import "../chunk-NM46HQSW.js";
+} from "../chunk-PMRLFNBT.js";
+import "../chunk-J26ZWYQI.js";
 import {
   RaisedActionButton
 } from "../chunk-UKUGSU3Y.js";
 import "../chunk-24HHUCWB.js";
 import "../chunk-YCCWJ5XQ.js";
 import "../chunk-TMSWLFL4.js";
-import "../chunk-UALPKKAY.js";
+import "../chunk-F742IMLQ.js";
 import "../chunk-PUFA7FQ7.js";
 import "../chunk-5AK2EZG5.js";
 import "../chunk-N5PVD4J5.js";

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Drawer/Drawer.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,kBAAkB,EAAC,iBAAiB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAqFxF,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAyCxC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAoCpD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAetD,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Drawer/Drawer.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,kBAAkB,EAAC,iBAAiB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAqFxF,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAyCxC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuCpD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAetD,CAAC"}

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

@@ -1 +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"}
+{"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;AAkC5F,eAAO,MAAM,MAAM;;;8BA6BjB,CAAC"}

package/package.json

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

package/src/components/layout/Drawer/Drawer.tsx

@@ -150,7 +150,10 @@ export const DrawerHeader: React.FC<DrawerHeaderProps> = ({
       sx={{
         display: 'flex',
         alignItems: 'center',
-        padding: theme.spacing(2),
+        // 12px above and below: the close button is 40px tall, so the header lands on
+        // its own 64px minimum instead of 72 — the height of the page header beside
+        // a docked drawer (FUT-3476).
+        padding: theme.spacing(1.5, 2),
         borderBottom: `1px solid ${theme.palette.divider}`,
         minHeight: rem(theme, 64),
         justifyContent: 'space-between',

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

@@ -45,7 +45,9 @@ 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
+keyboard open; on a device, dragging dismisses it. On the web nothing is dismissed
+on scroll: react-native-web would blur the focused field on every scroll event,
+including the browser's own scroll to a just-focused field. `scrollViewProps` can change tap/dismiss
 policy, but cannot override the viewport geometry or automatic inset ownership.
 
 ## Layout and accessibility

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

@@ -15,6 +15,16 @@ function keyboardBehavior(enabled: boolean): 'padding' | 'height' | undefined {
   return Platform.OS === 'ios' ? 'padding' : 'height';
 }
 
+/**
+ * Drag-to-dismiss on a device only. react-native-web runs `dismissKeyboard()`
+ * on EVERY scroll event of an `on-drag` ScrollView, including the one the
+ * browser fires to bring a just-focused field into view, so on the web the
+ * field the user tapped lost focus as soon as the viewport moved.
+ */
+function keyboardDismissMode(): 'on-drag' | 'none' {
+  return Platform.OS === 'web' ? 'none' : 'on-drag';
+}
+
 /** 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);
@@ -39,7 +49,7 @@ export const Screen = React.forwardRef<View, ScreenProps>(({
           <KeyboardAvoidingView style={styles.fill} enabled={keyboardAvoiding}
             behavior={keyboardBehavior(keyboardAvoiding)} keyboardVerticalOffset={keyboardVerticalOffset}>
             {scroll ? (
-              <ScrollView keyboardShouldPersistTaps="handled" keyboardDismissMode="on-drag" {...scrollViewProps}
+              <ScrollView keyboardShouldPersistTaps="handled" keyboardDismissMode={keyboardDismissMode()} {...scrollViewProps}
                 testID={scrollViewProps?.testID ?? (testID ? `${testID}-viewport` : undefined)}
                 style={styles.fill} contentContainerStyle={contentStyle}
                 horizontal={false} automaticallyAdjustKeyboardInsets={false}