@12-apps/ui 6.52.1 → 6.53.0

package/dist/navigation/AppHeader.js

@@ -9,7 +9,7 @@ import {
 } from "../chunk-AH4XGLE2.js";
 import {
   AppHeaderDetails
-} from "../chunk-FRP7NM6X.js";
+} from "../chunk-6WZUKV55.js";
 import {
   AppHeaderBrand
 } from "../chunk-GWFAINQ7.js";
@@ -18,13 +18,13 @@ import {
   highlightOf,
   initialsOf
 } from "../chunk-IQU4HKND.js";
-import "../chunk-LZQQ4JXY.js";
-import "../chunk-TBDAH7WC.js";
-import "../chunk-LYVTJLCF.js";
-import "../chunk-CRN4KKNI.js";
+import "../chunk-HGVPPJKE.js";
 import "../chunk-3U3H3BZM.js";
+import "../chunk-TBDAH7WC.js";
 import "../chunk-FPVYD7BO.js";
+import "../chunk-56JF5PZK.js";
 import "../chunk-IM4DMKH4.js";
+import "../chunk-CRN4KKNI.js";
 import "../chunk-MQ277OLB.js";
 import "../chunk-ST7B54JN.js";
 import "../chunk-Z2JH5KW5.js";

package/dist/pt-BR.js

@@ -7,7 +7,7 @@ import {
   PT_BR_LIGHTBOX_COPY,
   PT_BR_MAP_PREVIEW_COPY,
   PT_BR_TIMING_DIAGRAM_COPY
-} from "./chunk-V5ZLUJV7.js";
+} from "./chunk-HRMB72E4.js";
 import {
   PT_BR_INSTALL_PROMPT_COPY,
   PT_BR_USER_AVATAR_COPY
@@ -28,7 +28,7 @@ import {
   PT_BR_SETTING_CARD_COPY,
   PT_BR_SETTING_SWITCH_COPY,
   PT_BR_TABLE_FILTER_COPY
-} from "./chunk-33L26P4J.js";
+} from "./chunk-3ZKGNEP2.js";
 import {
   PT_BR_ADDRESS_AUTOCOMPLETE_COPY,
   PT_BR_AUTOCOMPLETE_COPY,

package/dist/types/components/data-display/InteractiveTooltip/InteractiveTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InteractiveTooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/InteractiveTooltip/InteractiveTooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAgC1E,eAAO,MAAM,kBAAkB,6GAwE9B,CAAC"}
+{"version":3,"file":"InteractiveTooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/InteractiveTooltip/InteractiveTooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAgC1E,eAAO,MAAM,kBAAkB,6GA6E9B,CAAC"}

package/dist/types/components/data-display/InteractiveTooltip/InteractiveTooltip.hooks.d.ts

@@ -19,5 +19,23 @@ export declare const usePinnedTooltip: ({ clickable, onPin, onUnpin }: PinOption
     wrapperRef: React.RefObject<HTMLDivElement | null>;
     handleClick: (e: React.MouseEvent) => void;
 };
+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 declare const useHoverOpen: (isPinned: boolean, onOpen?: OnOpen, onClose?: OnClose) => {
+    open: boolean;
+    onOpen: OnOpen;
+    onClose: OnClose;
+};
 export {};
 //# sourceMappingURL=InteractiveTooltip.hooks.d.ts.map

package/dist/types/components/data-display/InteractiveTooltip/InteractiveTooltip.hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InteractiveTooltip.hooks.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/InteractiveTooltip/InteractiveTooltip.hooks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAG1E,KAAK,oBAAoB,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,WAAW,CAAC;AAEhF,KAAK,oBAAoB,GAAG,uBAAuB,GACjD,QAAQ,CAAC,IAAI,CAAC,uBAAuB,EAAE,oBAAoB,CAAC,CAAC,CAAC;AAiBhE,eAAO,MAAM,mBAAmB,GAC9B,OAAO,uBAAuB,KAC7B,oBACwE,CAAC;AAE5E,UAAU,UAAU;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,+BAA+B,UAAU;;;;qBAkClE,KAAK,CAAC,UAAU;CAuBvB,CAAC"}
+{"version":3,"file":"InteractiveTooltip.hooks.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/InteractiveTooltip/InteractiveTooltip.hooks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAG1E,KAAK,oBAAoB,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,WAAW,CAAC;AAEhF,KAAK,oBAAoB,GAAG,uBAAuB,GACjD,QAAQ,CAAC,IAAI,CAAC,uBAAuB,EAAE,oBAAoB,CAAC,CAAC,CAAC;AAiBhE,eAAO,MAAM,mBAAmB,GAC9B,OAAO,uBAAuB,KAC7B,oBACwE,CAAC;AAE5E,UAAU,UAAU;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,+BAA+B,UAAU;;;;qBAkClE,KAAK,CAAC,UAAU;CAuBvB,CAAC;AAEF,KAAK,MAAM,GAAG,WAAW,CAAC,uBAAuB,CAAC,QAAQ,CAAC,CAAC,CAAC;AAC7D,KAAK,OAAO,GAAG,WAAW,CAAC,uBAAuB,CAAC,SAAS,CAAC,CAAC,CAAC;AAE/D;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,GACvB,UAAU,OAAO,EACjB,SAAS,MAAM,EACf,UAAU,OAAO,KAChB;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAgBnD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"SettingCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/SettingCard/SettingCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAQjD,OAAO,KAAK,EAAmB,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AA+G7E;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,sFAgEtB,CAAC"}
+{"version":3,"file":"SettingCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/SettingCard/SettingCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AASjD,OAAO,KAAK,EAAmB,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAgH7E;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,sFAkEtB,CAAC"}

package/dist/types/components/layout/SettingCard/SettingCard.metrics.d.ts

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

package/dist/types/components/layout/SettingCard/SettingCard.metrics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingCard.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/SettingCard/SettingCard.metrics.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,YAAY;IACvB,sCAAsC;;IAEtC,4DAA4D;;IAE5D,oEAAoE;;IAEpE,0DAA0D;;IAE1D,mDAAmD;;CAE3C,CAAC;AAEX,2FAA2F;AAC3F,eAAO,MAAM,sBAAsB,IAAI,CAAC;AAExC,2EAA2E;AAC3E,eAAO,MAAM,8BAA8B,MAAM,CAAC"}
+{"version":3,"file":"SettingCard.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/SettingCard/SettingCard.metrics.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,YAAY;IACvB,sCAAsC;;IAEtC,4DAA4D;;IAE5D,oEAAoE;;IAEpE,0DAA0D;;IAE1D,mDAAmD;;IAEnD,sDAAsD;;IAEtD,4EAA4E;;;CAGpE,CAAC;AAEX,2FAA2F;AAC3F,eAAO,MAAM,sBAAsB,IAAI,CAAC;AAExC,2EAA2E;AAC3E,eAAO,MAAM,8BAA8B,MAAM,CAAC"}

package/dist/types/components/layout/SettingCard/SettingCard.parts.d.ts

@@ -12,6 +12,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;
 }
 /**

package/dist/types/components/layout/SettingCard/SettingCard.parts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingCard.parts.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/SettingCard/SettingCard.parts.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAW/C,OAAO,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE9E,uEAAuE;AACvE,eAAO,MAAM,UAAU,GAAI,MAAM,MAAM,GAAG,SAAS,EAAE,MAAM,MAAM,KAAG,MAAM,GAAG,SACvC,CAAC;AAEvC,UAAU,WAAW;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,mBAAmB,CAAC;IAClC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAyC/C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAY3F,CAAC;AAEF,wGAAwG;AACxG,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAU5D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAsCA,CAAC"}
+{"version":3,"file":"SettingCard.parts.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/SettingCard/SettingCard.parts.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAW/C,OAAO,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE9E,uEAAuE;AACvE,eAAO,MAAM,UAAU,GAAI,MAAM,MAAM,GAAG,SAAS,EAAE,MAAM,MAAM,KAAG,MAAM,GAAG,SACvC,CAAC;AAEvC,UAAU,WAAW;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,mBAAmB,CAAC;IAClC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kFAAkF;IAClF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA2C/C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAY3F,CAAC;AAEF,wGAAwG;AACxG,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAU5D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAsCA,CAAC"}

package/dist/types/components/layout/SettingCard/SettingCard.styles.d.ts

@@ -29,9 +29,16 @@ export declare const headerStyles: (theme: Theme) => CSSObject;
  * take the page's text colour onto its own surface.
  */
 export declare const titleStyles: (theme: Theme) => CSSObject;
-/** 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 declare 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 declare const clampStyles: CSSObject;
+/** A closed card's value: two lines at most, the rest behind the [i]. */
 export declare const summaryStyles: (theme: Theme) => CSSObject;
-/** A switch card's explanation, which may wrap: it is read, not scanned. */
+/** A switch card's explanation; `SettingSwitchBlock` clamps it (see `clampStyles`). */
 export declare const descriptionStyles: (theme: Theme) => CSSObject;
 /** The inactive group's hint: a glyph and the sentence, so it does not read as a second summary. */
 export declare const hintStyles: (theme: Theme) => CSSObject;

package/dist/types/components/layout/SettingCard/SettingCard.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingCard.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/SettingCard/SettingCard.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAO/E;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAE/D,+FAA+F;AAC/F,eAAO,MAAM,YAAY,GACvB,KAAK,OAAO,CAAC,KAAK,CAAC,EACnB,IAAI,OAAO,CAAC,KAAK,CAAC,GAAG,SAAS,KAC7B,OAAO,CAAC,KAAK,CAAgE,CAAC;AAEjF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,EAAE,MAAM,OAAO,KAAG,SAgB1D,CAAC;AAEH,mEAAmE;AACnE,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,KAAG,SAMxC,CAAC;AAEH,eAAO,MAAM,YAAY,GAAI,OAAO,KAAK,KAAG,SAK1C,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,KAAG,SAOzC,CAAC;AAEH,2FAA2F;AAC3F,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,KAAG,SAO3C,CAAC;AAEH,4EAA4E;AAC5E,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,KAAG,SAI/C,CAAC;AAEH,oGAAoG;AACpG,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,KAAG,SAOxC,CAAC;AAEH,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,KAAG,SAIzC,CAAC;AAEH,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,KAAG,SAM3C,CAAC;AAEH,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,KAAG,SAIxC,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,OAAO,KAAK,EAAE,QAAQ,OAAO,KAAG,SAQ/D,CAAC"}
+{"version":3,"file":"SettingCard.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/SettingCard/SettingCard.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAO/E;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAE/D,+FAA+F;AAC/F,eAAO,MAAM,YAAY,GACvB,KAAK,OAAO,CAAC,KAAK,CAAC,EACnB,IAAI,OAAO,CAAC,KAAK,CAAC,GAAG,SAAS,KAC7B,OAAO,CAAC,KAAK,CAAgE,CAAC;AAEjF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,EAAE,MAAM,OAAO,KAAG,SAgB1D,CAAC;AAEH,mEAAmE;AACnE,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,KAAG,SAMxC,CAAC;AAEH,eAAO,MAAM,YAAY,GAAI,OAAO,KAAK,KAAG,SAK1C,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,KAAG,SAOzC,CAAC;AAEH,iFAAiF;AACjF,eAAO,MAAM,iBAAiB,IAAI,CAAC;AAEnC;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,SAKzB,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,KAAG,SAK3C,CAAC;AAEH,uFAAuF;AACvF,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,KAAG,SAI/C,CAAC;AAEH,oGAAoG;AACpG,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,KAAG,SAOxC,CAAC;AAEH,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,KAAG,SAIzC,CAAC;AAEH,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,KAAG,SAM3C,CAAC;AAEH,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,KAAG,SAIxC,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,OAAO,KAAK,EAAE,QAAQ,OAAO,KAAG,SAQ/D,CAAC"}

package/dist/types/components/layout/SettingCard/SettingCard.summary.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+/**
+ * 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 declare const useClamped: (content?: unknown) => {
+    ref: (node: HTMLElement | null) => void;
+    clamped: boolean;
+};
+/**
+ * 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 declare const SummaryInfo: React.FC<{
+    label: string;
+    summary: React.ReactNode;
+    dataTestId?: string;
+}>;
+/**
+ * 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 declare const useSummaryInfo: ({ summary, show, label, dataTestId, }: {
+    summary: React.ReactNode;
+    show?: boolean;
+    label: string;
+    dataTestId?: string;
+}) => {
+    ref: (node: HTMLElement | null) => void;
+    info: React.ReactNode;
+};
+//# sourceMappingURL=SettingCard.summary.d.ts.map

package/dist/types/components/layout/SettingCard/SettingCard.summary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingCard.summary.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/SettingCard/SettingCard.summary.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAStE;;;;GAIG;AACH,eAAO,MAAM,UAAU,GAAI,UAAU,OAAO,KAAG;IAAE,GAAG,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAkBzG,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAuClG,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,uCAK5B;IACD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,KAAG;IAAE,GAAG,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;CAInE,CAAC"}

package/dist/types/components/layout/SettingCard/SettingSwitch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingSwitch.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/SettingCard/SettingSwitch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAKrC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAGrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAE9D,wFAAwF;AACxF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,kBAAkB,EAClB,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,GAAG,YAAY,CAC/G,GAAG;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,CAAC;AAE1B,mFAAmF;AACnF,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,mBAAmB,QAAO,gBAQtC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CACvC,uBAAuB,GAAG;IAAE,GAAG,EAAE,gBAAgB,CAAC;IAAC,KAAK,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;CAAE,CA8C9F,CAAC"}
+{"version":3,"file":"SettingSwitch.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/SettingCard/SettingSwitch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAKrC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAIrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAE9D,wFAAwF;AACxF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,kBAAkB,EAClB,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,GAAG,YAAY,CAC/G,GAAG;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,CAAC;AAE1B,mFAAmF;AACnF,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,mBAAmB,QAAO,gBAQtC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CACvC,uBAAuB,GAAG;IAAE,GAAG,EAAE,gBAAgB,CAAC;IAAC,KAAK,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;CAAE,CAsD9F,CAAC"}

package/dist/types/copy/layout.d.ts

@@ -31,6 +31,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;
 }
 /**
  * What a switch that saves the moment it flips says about that save — shared
@@ -41,5 +47,7 @@ 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;
 }
 //# sourceMappingURL=layout.d.ts.map

package/dist/types/copy/layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/copy/layout.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,eAAe;IAC9B,kEAAkE;IAClE,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,YAAY,EAAE,MAAM,CAAC;IACrB,2EAA2E;IAC3E,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,oFAAoF;IACpF,IAAI,EAAE,MAAM,CAAC;IACb,mCAAmC;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,0FAA0F;IAC1F,MAAM,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,SAAS,EAAE,MAAM,CAAC;IAClB,6FAA6F;IAC7F,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,+CAA+C;IAC/C,MAAM,EAAE,MAAM,CAAC;IACf,6FAA6F;IAC7F,UAAU,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/copy/layout.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,eAAe;IAC9B,kEAAkE;IAClE,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,YAAY,EAAE,MAAM,CAAC;IACrB,2EAA2E;IAC3E,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,oFAAoF;IACpF,IAAI,EAAE,MAAM,CAAC;IACb,mCAAmC;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,0FAA0F;IAC1F,MAAM,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,SAAS,EAAE,MAAM,CAAC;IAClB,6FAA6F;IAC7F,UAAU,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,+CAA+C;IAC/C,MAAM,EAAE,MAAM,CAAC;IACf,6FAA6F;IAC7F,UAAU,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB"}

package/dist/types/en-US.layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en-US.layout.d.ts","sourceRoot":"","sources":["../../src/en-US.layout.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EACV,eAAe,EACf,iBAAiB,EACjB,eAAe,EAChB,MAAM,QAAQ,CAAC;AAEhB,eAAO,MAAM,uBAAuB,EAAE,eAMrC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,eAOrC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,iBAGvC,CAAC"}
+{"version":3,"file":"en-US.layout.d.ts","sourceRoot":"","sources":["../../src/en-US.layout.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EACV,eAAe,EACf,iBAAiB,EACjB,eAAe,EAChB,MAAM,QAAQ,CAAC;AAEhB,eAAO,MAAM,uBAAuB,EAAE,eAMrC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,eAQrC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,iBAIvC,CAAC"}

package/dist/types/pt-BR.layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pt-BR.layout.d.ts","sourceRoot":"","sources":["../../src/pt-BR.layout.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EACV,eAAe,EACf,iBAAiB,EACjB,eAAe,EAChB,MAAM,QAAQ,CAAC;AAEhB,eAAO,MAAM,uBAAuB,EAAE,eAMrC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,eAOrC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,iBAGvC,CAAC"}
+{"version":3,"file":"pt-BR.layout.d.ts","sourceRoot":"","sources":["../../src/pt-BR.layout.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EACV,eAAe,EACf,iBAAiB,EACjB,eAAe,EAChB,MAAM,QAAQ,CAAC;AAEhB,eAAO,MAAM,uBAAuB,EAAE,eAMrC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,eAQrC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,iBAIvC,CAAC"}

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.1",
+  "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/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`. |