@12-apps/ui 6.52.0 → 6.53.0

package/dist/types-native/components/feedback/Dialog/Dialog.look.native.d.ts

@@ -29,6 +29,18 @@ export interface DialogLook {
     /** The paper's corner radius, for the pulse ring to follow. */
     radius: number;
 }
+/**
+ * The overlay's bottom inset while the soft keyboard covers `overlap` dp of it
+ * (FUT-3021), or nothing while it covers none.
+ *
+ * The inset grows by exactly the overlap, on top of the margin the variant
+ * already keeps, so the space the paper may fill — its `maxHeight: '100%'`, or
+ * the `height: '100%'` of `fullscreen` and `drawer` — shrinks by the same
+ * amount and ends where the keyboard starts. A centred paper re-centres in what
+ * is left, and a body taller than that scrolls inside `DialogContent` with the
+ * actions still on screen.
+ */
+export declare function dialogKeyboardLift(theme: UiTheme, variant: DialogVariant, overlap: number): ViewStyle | null;
 /**
  * Everything the dialog paints, decided once per render.
  *

package/dist/types-native/components/feedback/Dialog/Dialog.look.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.look.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/Dialog/Dialog.look.native.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAanF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErD;;;;;;;;GAQG;AAEH,oCAAoC;AACpC,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,kBAAkB,GAAG,MAAM,CAE/E;AAED,4EAA4E;AAC5E,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,CAIxD;AAYD,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,aAAa,CAAC;IACvB,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,EAAE,kBAAkB,CAAC;IACjC,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,UAAU;IACzB,4EAA4E;IAC5E,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,+DAA+D;IAC/D,MAAM,EAAE,MAAM,CAAC;CAChB;AA0DD;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,cAAc,GAAG,UAAU,CAyBxE"}
+{"version":3,"file":"Dialog.look.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/Dialog/Dialog.look.native.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAanF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErD;;;;;;;;GAQG;AAEH,oCAAoC;AACpC,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,kBAAkB,GAAG,MAAM,CAE/E;AAED,4EAA4E;AAC5E,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,CAIxD;AAYD,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,aAAa,CAAC;IACvB,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,EAAE,kBAAkB,CAAC;IACjC,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,UAAU;IACzB,4EAA4E;IAC5E,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,+DAA+D;IAC/D,MAAM,EAAE,MAAM,CAAC;CAChB;AA0DD;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAI5G;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,cAAc,GAAG,UAAU,CAyBxE"}

package/dist/types-native/components/feedback/Dialog/Dialog.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/Dialog/Dialog.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAiBzD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAwDlF,wBAAgB,MAAM,CAAC,QAAQ,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAmE/D;yBAnEe,MAAM"}
+{"version":3,"file":"Dialog.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/Dialog/Dialog.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAkBzD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAwDlF,wBAAgB,MAAM,CAAC,QAAQ,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA4E/D;yBA5Ee,MAAM"}

package/dist/types-native/platform/keyboard-overlap.native.d.ts

@@ -0,0 +1,36 @@
+import { type LayoutChangeEvent } from 'react-native';
+/**
+ * HOW FAR THE SOFT KEYBOARD COVERS A FULL-WINDOW VIEW, AND NOTHING MORE.
+ *
+ * React Native's `Modal` asks Android for `SOFT_INPUT_ADJUST_RESIZE`, and under
+ * edge-to-edge that asks for nothing: the window keeps its full height and the
+ * keyboard is drawn over it. iOS never resized a modal at all. So an overlay
+ * that fills the modal has its bottom under the keyboard, and whatever sits
+ * there — a dialog's actions — is hidden until the keyboard goes away.
+ *
+ * This reads the keyboard's own top edge from the `Keyboard` events and the
+ * view's own bottom edge from its layout, and answers the difference. Reading
+ * the OVERLAP rather than the keyboard's height is what keeps it right when the
+ * window DID resize (a host that is not edge-to-edge): the view then already
+ * ends at the keyboard, the overlap is zero, and nothing is lifted twice. No
+ * soft-input mode is set here, deliberately — a second one would fight the one
+ * `Modal` already asks for.
+ *
+ * The view's layout `y` is relative to its parent, so the view is expected to
+ * be the root of a window that starts at the top of the screen — which a
+ * `transparent` modal is, on iOS and under Android edge-to-edge alike.
+ */
+export declare function keyboardOverlap(viewBottom: number | null, keyboardTop: number | null): number;
+export interface KeyboardOverlap {
+    /** How many dp of the view the keyboard covers; `0` while it is down. */
+    overlap: number;
+    /** Goes on the view being measured. */
+    onLayout: (event: LayoutChangeEvent) => void;
+}
+/**
+ * The keyboard's overlap with the view `onLayout` is put on. Android re-sends
+ * `keyboardDidShow` when the keyboard changes height while it stays up (an
+ * emoji panel, a suggestion strip), so the overlap follows those too.
+ */
+export declare function useKeyboardOverlap(): KeyboardOverlap;
+//# sourceMappingURL=keyboard-overlap.native.d.ts.map

package/dist/types-native/platform/keyboard-overlap.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-overlap.native.d.ts","sourceRoot":"","sources":["../../../src/platform/keyboard-overlap.native.ts"],"names":[],"mappings":"AACA,OAAO,EAKL,KAAK,iBAAiB,EACvB,MAAM,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,EAAE,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAG7F;AAQD,MAAM,WAAW,eAAe;IAC9B,yEAAyE;IACzE,OAAO,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC9C;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,IAAI,eAAe,CAuBpD"}

package/dist/user-avatar.js

@@ -1,13 +1,13 @@
 import {
   UserAvatar,
   UserMenu
-} from "./chunk-EOTV5BLM.js";
+} from "./chunk-WOP2DRMC.js";
 import "./chunk-UDQSIRAP.js";
-import "./chunk-PGPPN63I.js";
-import "./chunk-TNQDSTIA.js";
+import "./chunk-EMEXXAQI.js";
+import "./chunk-Y6C4MYZE.js";
+import "./chunk-MTEQEPNY.js";
 import "./chunk-6ZZGK5DT.js";
 import "./chunk-3ZVUNSFF.js";
-import "./chunk-MTEQEPNY.js";
 import "./chunk-VUHLNYAE.js";
 import "./chunk-2GSIEDGN.js";
 import "./chunk-WN5PNP6F.js";

package/package.json

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

package/src/components/data-display/InteractiveTooltip/InteractiveTooltip.hooks.ts

@@ -97,3 +97,39 @@ export const usePinnedTooltip = ({ clickable, onPin, onUnpin }: PinOptions) => {
 
   return { isPinned, isControlledOpen, wrapperRef, handleClick };
 };
+
+type OnOpen = NonNullable<InteractiveTooltipProps['onOpen']>;
+type OnClose = NonNullable<InteractiveTooltipProps['onClose']>;
+
+/**
+ * The hover half of the tooltip's open state, so the MUI Tooltip is controlled
+ * from its first render (FUT-3013). It used to receive `open={undefined}` while
+ * hovering and a boolean once pinned, which MUI reports as a component switching
+ * from uncontrolled to controlled on the first click. The caller's own
+ * onOpen/onClose still run.
+ *
+ * Unpinning also closes it: the hover listeners are off while pinned, so a
+ * hover state left `true` from before the pin would otherwise keep the tooltip
+ * open after the click outside that unpinned it.
+ */
+export const useHoverOpen = (
+  isPinned: boolean,
+  onOpen?: OnOpen,
+  onClose?: OnClose,
+): { open: boolean; onOpen: OnOpen; onClose: OnClose } => {
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    if (!isPinned) setOpen(false);
+  }, [isPinned]);
+  return {
+    open,
+    onOpen: (event) => {
+      setOpen(true);
+      onOpen?.(event);
+    },
+    onClose: (event) => {
+      setOpen(false);
+      onClose?.(event);
+    },
+  };
+};

package/src/components/data-display/InteractiveTooltip/InteractiveTooltip.tsx

@@ -2,7 +2,7 @@ import MuiTooltip from '@mui/material/Tooltip/index.js';
 import { styled } from '@mui/material/styles/index.js';
 import React from 'react';
 
-import { resolveTooltipProps, usePinnedTooltip } from './InteractiveTooltip.hooks';
+import { resolveTooltipProps, useHoverOpen, usePinnedTooltip } from './InteractiveTooltip.hooks';
 import {
   arrowColor,
   emphasisStyles,
@@ -58,6 +58,8 @@ export const InteractiveTooltip = React.forwardRef<HTMLDivElement, InteractiveTo
       onUnpin,
       className,
       children,
+      onOpen,
+      onClose,
       ...props
     } = resolveTooltipProps(rawProps);
 
@@ -66,6 +68,7 @@ export const InteractiveTooltip = React.forwardRef<HTMLDivElement, InteractiveTo
       onPin,
       onUnpin,
     });
+    const hover = useHoverOpen(isPinned, onOpen, onClose);
 
     // Determine which content to show
     const tooltipContent = isPinned ? pinnedContent : hoverContent;
@@ -94,7 +97,9 @@ export const InteractiveTooltip = React.forwardRef<HTMLDivElement, InteractiveTo
           glow={glow}
           pulse={pulse}
           title={tooltipContent}
-          open={isPinned ? isControlledOpen : undefined}
+          open={isPinned ? isControlledOpen : hover.open}
+          onOpen={hover.onOpen}
+          onClose={hover.onClose}
           enterDelay={isPinned ? 0 : 100}
           leaveDelay={0}
           disableHoverListener={isPinned}

package/src/components/feedback/Dialog/Dialog.look.native.ts

@@ -120,6 +120,23 @@ function overlayFor(theme: UiTheme, variant: DialogVariant): ViewStyle {
   return centredOverlay(theme);
 }
 
+/**
+ * The overlay's bottom inset while the soft keyboard covers `overlap` dp of it
+ * (FUT-3021), or nothing while it covers none.
+ *
+ * The inset grows by exactly the overlap, on top of the margin the variant
+ * already keeps, so the space the paper may fill — its `maxHeight: '100%'`, or
+ * the `height: '100%'` of `fullscreen` and `drawer` — shrinks by the same
+ * amount and ends where the keyboard starts. A centred paper re-centres in what
+ * is left, and a body taller than that scrolls inside `DialogContent` with the
+ * actions still on screen.
+ */
+export function dialogKeyboardLift(theme: UiTheme, variant: DialogVariant, overlap: number): ViewStyle | null {
+  if (overlap <= 0) return null;
+  const margin = variant === 'fullscreen' || variant === 'drawer' ? 0 : theme.spacing(DIALOG_MARGIN_UNITS);
+  return { paddingBottom: margin + overlap };
+}
+
 /**
  * Everything the dialog paints, decided once per render.
  *

package/src/components/feedback/Dialog/Dialog.native.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Modal, Pressable, ScrollView, StyleSheet, View } from 'react-native';
 
 import { hasSpacingSlot, withDialogDefaults } from './Dialog.helpers';
-import { dialogBackdrop, dialogLook } from './Dialog.look.native';
+import { dialogBackdrop, dialogKeyboardLift, dialogLook } from './Dialog.look.native';
 import { DIALOG_BODY_PADDING_UNITS, DIALOG_PULSE } from './Dialog.metrics';
 import type { DialogProps } from './Dialog.types.native';
 import {
@@ -12,6 +12,7 @@ import {
   DialogTitledContext,
   dialogBodyTextStyle,
 } from './DialogParts.native';
+import { useKeyboardOverlap } from '../../../platform/keyboard-overlap.native';
 import { PulseRing } from '../../../platform/pulse-ring.native';
 import { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
 import { renderTextChildren } from '../../../platform/text-children';
@@ -106,9 +107,18 @@ export function Dialog(rawProps: DialogProps): React.JSX.Element {
   // backdrop and Escape (which `Modal` routes through `onRequestClose`).
   const dismiss = persistent ? undefined : onClose;
 
+  // Edge-to-edge defeats the `SOFT_INPUT_ADJUST_RESIZE` that `Modal` asks for,
+  // so the window never shrinks for the keyboard and nothing else moves the
+  // paper: the overlay measures how much of it the keyboard covers and takes
+  // that off the paper's room itself (FUT-3021).
+  const keyboard = useKeyboardOverlap();
+
   return (
     <Modal visible={open} transparent onRequestClose={dismiss} {...modalProps}>
-      <View style={look.overlay}>
+      <View
+        style={[look.overlay, dialogKeyboardLift(theme, variant, keyboard.overlap)]}
+        onLayout={keyboard.onLayout}
+      >
         <Pressable
           aria-hidden
           tabIndex={-1}

package/src/components/layout/SettingCard/SettingCard.md

@@ -51,7 +51,7 @@ const [draft, setDraft] = useState<number | null>(saved);
 | `title` | `string` | **required** | The setting's name. A heading, and the accessible name of the card's region. |
 | `onSave` | `() => void \| Promise<unknown>` | **required** | Persist the draft. See *Saving* below. |
 | `children` | `ReactNode` | **required** | The form. Rendered only while open. |
-| `summary` | `ReactNode` | — | The one line a closed card shows. Ends in an ellipsis rather than wrapping. |
+| `summary` | `ReactNode` | — | What a closed card shows under its title: two lines at most, then an ellipsis. While it is cut, an [i] beside the title shows the whole text (hover, or a click/tap that pins it). |
 | `status` | `{ label: string; color?: ColorValue }` | — | The pill beside the title. `label` is always shown, so colour never carries the meaning alone. |
 | `learnMore` | `ReactNode` | — | Longer explanation behind a disclosure in the open card. Omit for no disclosure. |
 | `onCancel` | `() => void` | — | The card closed without saving. Reset the host's draft here. |

package/src/components/layout/SettingCard/SettingCard.metrics.ts

@@ -13,6 +13,11 @@ export const SETTING_CARD = {
   groupRuleWidth: 2,
   /** The narrowest a grid column gets by default. */
   gridMinColumnWidth: 320,
+  /** The widest the [i]'s full-summary tooltip gets. */
+  infoMaxWidth: 360,
+  /** The [i]'s keyboard focus ring: its width, and its gap from the glyph. */
+  infoFocusRingWidth: 2,
+  infoFocusRingOffset: 2,
 } as const;
 
 /** The grid's default gap, in theme SPACING units (not px): what `sx`'s `gap: 2` means. */

package/src/components/layout/SettingCard/SettingCard.parts.tsx

@@ -28,6 +28,8 @@ interface HeaderProps {
   trailing?: React.ReactNode;
   /** Renders the title as a `<label>` for this control instead of a heading. */
   labelFor?: string;
+  /** Beside the title, after the status pill — the [i] while the summary is cut. */
+  info?: React.ReactNode;
   dataTestId?: string;
 }
 
@@ -46,6 +48,7 @@ export const SettingHeader: React.FC<HeaderProps> = ({
   status,
   trailing,
   labelFor,
+  info,
   dataTestId,
 }) => {
   const theme = useTheme();
@@ -75,6 +78,7 @@ export const SettingHeader: React.FC<HeaderProps> = ({
             dataTestId={partTestId(dataTestId, 'status')}
           />
         )}
+        {info}
       </Box>
       {trailing}
     </Box>

package/src/components/layout/SettingCard/SettingCard.styles.ts

@@ -78,17 +78,29 @@ export const titleStyles = (theme: Theme): CSSObject => ({
   overflowWrap: 'anywhere',
 });
 
-/** The one line a closed card shows. Long values end in an ellipsis, not a second line. */
+/** The most lines a card's summary shows before the rest goes behind the [i]. */
+export const SUMMARY_MAX_LINES = 2;
+
+/**
+ * Two lines at most, cut with an ellipsis. Visual only: the whole sentence stays
+ * in the DOM, so a switch that is `aria-describedby` it still reads all of it.
+ */
+export const clampStyles: CSSObject = {
+  display: '-webkit-box',
+  WebkitLineClamp: SUMMARY_MAX_LINES,
+  WebkitBoxOrient: 'vertical',
+  overflow: 'hidden',
+};
+
+/** A closed card's value: two lines at most, the rest behind the [i]. */
 export const summaryStyles = (theme: Theme): CSSObject => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
   margin: 0,
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
+  ...clampStyles,
 });
 
-/** A switch card's explanation, which may wrap: it is read, not scanned. */
+/** A switch card's explanation; `SettingSwitchBlock` clamps it (see `clampStyles`). */
 export const descriptionStyles = (theme: Theme): CSSObject => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,

package/src/components/layout/SettingCard/SettingCard.summary.tsx

@@ -0,0 +1,100 @@
+import Box from '@mui/material/Box/index.js';
+import { useTheme } from '@mui/material/styles/index.js';
+import React, { useCallback, useLayoutEffect, useState } from 'react';
+
+import { Icon } from '../../../icons';
+import { rem } from '../../../tokens/relative';
+import { InteractiveTooltip } from '../../data-display/InteractiveTooltip';
+
+import { SETTING_CARD } from './SettingCard.metrics';
+import { partTestId } from './SettingCard.parts';
+
+/**
+ * Whether a clamped element is hiding text — measured, never guessed from the
+ * string's length, because what fits depends on the width the card is GIVEN.
+ * Re-measured whenever the element resizes, so a card that widens drops its [i].
+ */
+export const useClamped = (content?: unknown): { ref: (node: HTMLElement | null) => void; clamped: boolean } => {
+  const [node, setNode] = useState<HTMLElement | null>(null);
+  const [clamped, setClamped] = useState(false);
+  const ref = useCallback((next: HTMLElement | null) => setNode(next), []);
+
+  useLayoutEffect(() => {
+    if (!node) return undefined;
+    const measure = (): void => setClamped(node.scrollHeight > node.clientHeight + 1);
+    measure();
+    if (typeof ResizeObserver === 'undefined') return undefined;
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    return () => observer.disconnect();
+    // `content` too: a summary that grows from two lines to three inside the
+    // same clamped height fires no resize, so the text changing re-measures.
+  }, [node, content]);
+
+  return { ref, clamped };
+};
+
+/**
+ * The [i] beside a card's title while its summary is cut: hover shows the whole
+ * text, a click or tap pins it — so it works on a phone, where there is no hover.
+ */
+export const SummaryInfo: React.FC<{ label: string; summary: React.ReactNode; dataTestId?: string }> = ({
+  label,
+  summary,
+  dataTestId,
+}) => {
+  const theme = useTheme();
+  return (
+    <InteractiveTooltip
+      variant="light"
+      size="sm"
+      maxWidth={SETTING_CARD.infoMaxWidth}
+      hoverContent={summary}
+      pinnedContent={summary}
+      dataTestId={partTestId(dataTestId, 'info')}
+    >
+      <Box
+        component="button"
+        type="button"
+        aria-label={label}
+        sx={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 0,
+          border: 0,
+          background: 'none',
+          color: theme.palette.text.secondary,
+          cursor: 'pointer',
+          borderRadius: '50%',
+          '&:focus-visible': {
+            outline: `${rem(theme, SETTING_CARD.infoFocusRingWidth)} solid ${theme.palette.primary.main}`,
+            outlineOffset: rem(theme, SETTING_CARD.infoFocusRingOffset),
+          },
+        }}
+      >
+        <Icon name="InfoOutlined" size="xs" />
+      </Box>
+    </InteractiveTooltip>
+  );
+};
+
+/**
+ * The summary's measuring ref, and the [i] for the header while it is cut —
+ * `null` when there is no summary, it fits, or `show` is false (an open card).
+ */
+export const useSummaryInfo = ({
+  summary,
+  show = true,
+  label,
+  dataTestId,
+}: {
+  summary: React.ReactNode;
+  show?: boolean;
+  label: string;
+  dataTestId?: string;
+}): { ref: (node: HTMLElement | null) => void; info: React.ReactNode } => {
+  const { ref, clamped } = useClamped(summary);
+  const visible = show && clamped && summary != null;
+  return { ref, info: visible ? <SummaryInfo label={label} summary={summary} dataTestId={dataTestId} /> : null };
+};

package/src/components/layout/SettingCard/SettingCard.tsx

@@ -7,6 +7,7 @@ import { Button } from '../../form/Button';
 import { useSettingCard } from './SettingCard.hooks';
 import { LearnMore, PendingSpinner, SaveError, SettingHeader, partTestId } from './SettingCard.parts';
 import { SETTING_CARD_OPEN_ATTR, actionsStyles, summaryStyles, surfaceStyles, withCallerSx } from './SettingCard.styles';
+import { useSummaryInfo } from './SettingCard.summary';
 import type { SettingCardCopy, SettingCardProps } from './SettingCard.types';
 
 interface OpenBodyProps {
@@ -82,7 +83,8 @@ const OpenBody: React.FC<OpenBodyProps> = ({
 /**
  * A setting, summarised while closed and edited in place.
  *
- * Closed: title, status pill, a one-line summary and Edit. Edit opens the card
+ * Closed: title, status pill, a summary of at most two lines (an [i] beside the
+ * title holds the rest) and Edit. Edit opens the card
  * where it is — no dialog, no route — around the host's form, a "learn more"
  * disclosure and Cancel / Save. Save may be async: the card holds its saving
  * state while the promise is pending, closes when it resolves, and stays open
@@ -134,6 +136,7 @@ export const SettingCard = forwardRef<HTMLElement, SettingCardProps>(function Se
   const titleId = `${baseId}-title`;
   const card = useSettingCard(props);
   const { open } = card;
+  const clamp = useSummaryInfo({ summary, show: !open, label: copy.moreInfo ?? title, dataTestId });
 
   return (
     <Box
@@ -153,6 +156,7 @@ export const SettingCard = forwardRef<HTMLElement, SettingCardProps>(function Se
         headingLevel={headingLevel}
         icon={icon}
         status={status}
+        info={clamp.info}
         trailing={
           open ? null : (
             <EditTrigger
@@ -169,7 +173,7 @@ export const SettingCard = forwardRef<HTMLElement, SettingCardProps>(function Se
         dataTestId={dataTestId}
       />
       {!open && summary != null && (
-        <Box component="p" sx={summaryStyles} data-testid={partTestId(dataTestId, 'summary')}>
+        <Box component="p" ref={clamp.ref} sx={summaryStyles} data-testid={partTestId(dataTestId, 'summary')}>
           {summary}
         </Box>
       )}

package/src/components/layout/SettingCard/SettingSwitch.tsx

@@ -7,7 +7,8 @@ import { SR_ONLY_SX } from '../../form/Label/Label.styles';
 
 import { useAsyncSwitch } from './SettingCard.hooks';
 import { PendingSpinner, SaveError, SettingHeader, partTestId } from './SettingCard.parts';
-import { descriptionStyles } from './SettingCard.styles';
+import { clampStyles, descriptionStyles } from './SettingCard.styles';
+import { useSummaryInfo } from './SettingCard.summary';
 import type { SettingToggleProps } from './SettingCard.types';
 
 /** Everything the switch-driven cards share, minus the surface each draws around it. */
@@ -46,6 +47,7 @@ export const SettingSwitchBlock: React.FC<
   SettingSwitchBlockProps & { ids: SettingSwitchIds; state: ReturnType<typeof useAsyncSwitch> }
 > = ({ title, headingLevel = 'h3', icon, summary, copy, disabled, dataTestId, ids, state }) => {
   const theme = useTheme();
+  const clamp = useSummaryInfo({ summary, label: copy.moreInfo ?? title, dataTestId });
   const { shown, saving, error, flip } = state;
   const describedBy = [summary != null ? ids.summaryId : null, error ? ids.errorId : null]
     .filter(Boolean)
@@ -76,10 +78,17 @@ export const SettingSwitchBlock: React.FC<
         icon={icon}
         labelFor={ids.inputId}
         trailing={control}
+        info={clamp.info}
         dataTestId={dataTestId}
       />
       {summary != null && (
-        <Box component="p" id={ids.summaryId} sx={descriptionStyles(theme)} data-testid={partTestId(dataTestId, 'summary')}>
+        <Box
+          component="p"
+          ref={clamp.ref}
+          id={ids.summaryId}
+          sx={{ ...descriptionStyles(theme), ...clampStyles }}
+          data-testid={partTestId(dataTestId, 'summary')}
+        >
           {summary}
         </Box>
       )}

package/src/components/layout/SettingCard/SettingToggle.md

@@ -28,7 +28,7 @@ import { SettingToggle } from '@12-apps/ui/layout/SettingCard';
 | `title` | `string` | **required** | The switch's `<label>` — its accessible name, and a tap target far larger than the track. |
 | `checked` | `boolean` | **required** | The persisted value. |
 | `onChange` | `(checked: boolean) => void \| Promise<unknown>` | **required** | Persist a flip. See below. |
-| `summary` | `ReactNode` | — | Explanation under the title; the switch is `aria-describedby` it. |
+| `summary` | `ReactNode` | — | Explanation under the title; the switch is `aria-describedby` it. Two lines at most — while it is cut, an [i] beside the title shows the rest. The whole text stays in the DOM, so the description a screen reader hears is complete. |
 | `variant` | `'card' \| 'row'` | `'card'` | `row` drops the surface — for a dependent row inside a [`SettingGroup`](./SettingGroup.md). |
 | `disabled` | `boolean` | `false` | Disables the switch. Also disabled inside a `SettingGroup` whose main switch is off. |
 | `formatError` | `(error: unknown) => string \| undefined` | — | The sentence for a rejected save; `undefined` falls back to `copy.saveFailed`. |

package/src/copy/layout.ts

@@ -33,6 +33,12 @@ export interface SettingCardCopy {
   learnMore: string;
   /** Shown when the save rejected and the host's `formatError` gave no sentence of its own. */
   saveFailed: string;
+  /**
+   * The accessible name of the [i] beside the title while the summary is cut to
+   * two lines. Optional so a host's own copy object keeps compiling; without it
+   * the [i] is named after the card's title.
+   */
+  moreInfo?: string;
 }
 
 /**
@@ -44,4 +50,6 @@ export interface SettingSwitchCopy {
   saving: string;
   /** Shown when the save rejected and the host's `formatError` gave no sentence of its own. */
   saveFailed: string;
+  /** The [i]'s accessible name — see `SettingCardCopy.moreInfo`. */
+  moreInfo?: string;
 }

package/src/en-US.layout.ts

@@ -23,9 +23,11 @@ export const EN_US_SETTING_CARD_COPY: SettingCardCopy = {
   saving: "Saving…",
   learnMore: "Learn more",
   saveFailed: "Could not save. Please try again.",
+  moreInfo: "Show the full text",
 };
 
 export const EN_US_SETTING_SWITCH_COPY: SettingSwitchCopy = {
   saving: "Saving…",
   saveFailed: "Could not save. Please try again.",
+  moreInfo: "Show the full text",
 };

package/src/platform/keyboard-overlap.native.ts

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import {
+  Keyboard,
+  Platform,
+  type KeyboardEvent,
+  type KeyboardEventName,
+  type LayoutChangeEvent,
+} from 'react-native';
+
+/**
+ * HOW FAR THE SOFT KEYBOARD COVERS A FULL-WINDOW VIEW, AND NOTHING MORE.
+ *
+ * React Native's `Modal` asks Android for `SOFT_INPUT_ADJUST_RESIZE`, and under
+ * edge-to-edge that asks for nothing: the window keeps its full height and the
+ * keyboard is drawn over it. iOS never resized a modal at all. So an overlay
+ * that fills the modal has its bottom under the keyboard, and whatever sits
+ * there — a dialog's actions — is hidden until the keyboard goes away.
+ *
+ * This reads the keyboard's own top edge from the `Keyboard` events and the
+ * view's own bottom edge from its layout, and answers the difference. Reading
+ * the OVERLAP rather than the keyboard's height is what keeps it right when the
+ * window DID resize (a host that is not edge-to-edge): the view then already
+ * ends at the keyboard, the overlap is zero, and nothing is lifted twice. No
+ * soft-input mode is set here, deliberately — a second one would fight the one
+ * `Modal` already asks for.
+ *
+ * The view's layout `y` is relative to its parent, so the view is expected to
+ * be the root of a window that starts at the top of the screen — which a
+ * `transparent` modal is, on iOS and under Android edge-to-edge alike.
+ */
+export function keyboardOverlap(viewBottom: number | null, keyboardTop: number | null): number {
+  if (viewBottom === null || keyboardTop === null) return 0;
+  return Math.max(0, viewBottom - keyboardTop);
+}
+
+/** iOS announces the keyboard before it moves; Android only once it has. */
+const KEYBOARD_EVENTS: { show: KeyboardEventName; hide: KeyboardEventName } =
+  Platform.OS === 'ios'
+    ? { show: 'keyboardWillShow', hide: 'keyboardWillHide' }
+    : { show: 'keyboardDidShow', hide: 'keyboardDidHide' };
+
+export interface KeyboardOverlap {
+  /** How many dp of the view the keyboard covers; `0` while it is down. */
+  overlap: number;
+  /** Goes on the view being measured. */
+  onLayout: (event: LayoutChangeEvent) => void;
+}
+
+/**
+ * The keyboard's overlap with the view `onLayout` is put on. Android re-sends
+ * `keyboardDidShow` when the keyboard changes height while it stays up (an
+ * emoji panel, a suggestion strip), so the overlap follows those too.
+ */
+export function useKeyboardOverlap(): KeyboardOverlap {
+  const [viewBottom, setViewBottom] = React.useState<number | null>(null);
+  const [keyboardTop, setKeyboardTop] = React.useState<number | null>(null);
+
+  React.useEffect(() => {
+    const shown = Keyboard.addListener(KEYBOARD_EVENTS.show, (event: KeyboardEvent) => {
+      setKeyboardTop(event.endCoordinates.screenY);
+    });
+    const hidden = Keyboard.addListener(KEYBOARD_EVENTS.hide, () => {
+      setKeyboardTop(null);
+    });
+    return () => {
+      shown.remove();
+      hidden.remove();
+    };
+  }, []);
+
+  const onLayout = React.useCallback((event: LayoutChangeEvent) => {
+    const { y, height } = event.nativeEvent.layout;
+    setViewBottom(y + height);
+  }, []);
+
+  return { overlap: keyboardOverlap(viewBottom, keyboardTop), onLayout };
+}

package/src/pt-BR.layout.ts

@@ -23,9 +23,11 @@ export const PT_BR_SETTING_CARD_COPY: SettingCardCopy = {
   saving: "Salvando…",
   learnMore: "Saiba mais",
   saveFailed: "Não foi possível salvar. Tente novamente.",
+  moreInfo: "Ver o texto inteiro",
 };
 
 export const PT_BR_SETTING_SWITCH_COPY: SettingSwitchCopy = {
   saving: "Salvando…",
   saveFailed: "Não foi possível salvar. Tente novamente.",
+  moreInfo: "Ver o texto inteiro",
 };