@12-apps/ui 6.52.1 → 6.54.0

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.54.0",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/data-display/AlertDialog/AlertDialog.md

@@ -34,6 +34,7 @@ The AlertDialog component provides a modal dialog for alerts, confirmations, and
 | `showCancel`      | `boolean`  | true      | Whether to show the cancel button                 |
 | `confirmDisabled` | `boolean`  | false     | Whether the confirm button is disabled            |
 | `loading`         | `boolean`  | false     | Shows loading state on confirm button             |
+| `emphasis`        | `'confirm' \| 'cancel'` | 'confirm' | Which button is filled and takes the primary slot (right, or top when the row stacks). Use `cancel` when the confirm is the loss, e.g. "discard what you wrote?": the confirm becomes the neutral outline, both buttons grow to share the row, and focus opens on the cancel. Ignored when `showCancel` is false |
 
 ### Visual Props
 
@@ -124,6 +125,35 @@ function DeleteConfirmation() {
 />
 ```
 
+### Steering Toward Cancel
+
+When confirming throws work away, make keeping it the primary action: the
+filled cancel takes the primary slot and the confirm becomes the neutral
+outline — primary and neutral, even on the destructive variant.
+
+```tsx
+<AlertDialog
+  open={open}
+  variant="destructive"
+  emphasis="cancel"
+  initialFocus="cancel"
+  title="Discard this order?"
+  description="You have already written 3 items."
+  confirmText="Discard"
+  cancelText="Keep writing"
+  onConfirm={handleDiscard}
+  onCancel={() => setOpen(false)}
+  onClose={() => setOpen(false)}
+/>
+```
+
+### Button Layout
+
+The action row wraps whole buttons and never breaks a label inside one. A pair
+that fits keeps its natural widths, pushed to the right; a pair that does not
+stacks, with the primary on top. With `emphasis="cancel"` the two buttons also
+grow to share the row, so stacked they take its full width.
+
 ### Without Cancel Button
 
 ```tsx

package/src/components/data-display/AlertDialog/AlertDialog.parts.tsx

@@ -0,0 +1,180 @@
+/**
+ * The AlertDialog's action row, kept apart from the dialog shell so each stays
+ * inside the complexity budget: which button is filled, where each one sits,
+ * and how the row wraps.
+ */
+import type { ButtonProps } from '@mui/material/Button/index.js';
+import Button from '@mui/material/Button/index.js';
+import CircularProgress from '@mui/material/CircularProgress/index.js';
+import DialogActions from '@mui/material/DialogActions/index.js';
+import { styled, useTheme } from '@mui/material/styles/index.js';
+import React from 'react';
+
+import { rem } from '../../../tokens/relative';
+
+import type { AlertDialogProps } from './AlertDialog.types';
+
+/**
+ * The action row WRAPS WHOLE BUTTONS; it never breaks a label inside one. A pair
+ * that did not fit side by side used to squeeze the longer label onto two
+ * lines, so one button stood twice as tall as its neighbour. Now the row breaks
+ * instead. `wrap-reverse` puts the LAST button — the primary, whichever
+ * `emphasis` picks — on top when it stacks, the same slot it holds on the right
+ * when the row fits. A pair that fits is laid out exactly as before: natural
+ * widths, pushed to the right.
+ *
+ * `fill` — set only by `emphasis="cancel"` — lets the buttons grow to share the
+ * row, and so to take the full width of their line once it stacks. It is not
+ * the default because growing also stretches a pair that fits, which would
+ * redraw every existing dialog's footer.
+ *
+ * Rendered with `disableSpacing`: MUI's own spacing is a left margin on every
+ * button after the first, which would indent a button that wrapped onto a line
+ * of its own. The gaps below replace it, at the same 16px across.
+ */
+const StyledDialogActions = styled(DialogActions, {
+  shouldForwardProp: (prop) => prop !== 'fill',
+})<{ fill: boolean }>(({ theme, fill }) => ({
+  padding: theme.spacing(2, 3, 3, 3),
+  flexWrap: 'wrap-reverse',
+  columnGap: theme.spacing(2),
+  rowGap: theme.spacing(1),
+  ...(fill && { '& > .MuiButton-root': { flexGrow: 1 } }),
+}));
+
+const confirmButtonColor = (variant: AlertDialogProps['variant']): 'error' | 'primary' =>
+  variant === 'destructive' ? 'error' : 'primary';
+
+interface ButtonLook {
+  variant: ButtonProps['variant'];
+  color: ButtonProps['color'];
+}
+
+/**
+ * How each button is drawn, by `emphasis`: the emphasised one is filled, the
+ * other a NEUTRAL outline. Primary / neutral both ways round — a confirm that
+ * steps down drops the variant's colour too, so the one filled button is the
+ * only coloured thing in the row and the eye has a single place to land.
+ */
+const buttonLooks = (
+  emphasis: AlertDialogProps['emphasis'],
+  variant: AlertDialogProps['variant'],
+): { cancel: ButtonLook; confirm: ButtonLook } =>
+  emphasis === 'cancel'
+    ? {
+        cancel: { variant: 'contained', color: 'primary' },
+        confirm: { variant: 'outlined', color: 'inherit' },
+      }
+    : {
+        cancel: { variant: 'outlined', color: 'inherit' },
+        confirm: { variant: 'contained', color: confirmButtonColor(variant) },
+      };
+
+/**
+ * The emphasis that applies: `cancel` only while the cancel is shown. A hidden
+ * cancel with the confirm stepped down would leave a dialog with no primary.
+ */
+const effectiveEmphasis = (
+  emphasis: AlertDialogProps['emphasis'],
+  showCancel: boolean,
+): NonNullable<AlertDialogProps['emphasis']> =>
+  emphasis === 'cancel' && showCancel ? 'cancel' : 'confirm';
+
+/**
+ * Whether the cancel owns focus on open: what `initialFocus` says, and when it
+ * says nothing, the emphasised button — so Enter on a steered question keeps
+ * the work instead of completing the loss.
+ */
+const focusesCancel = (
+  initialFocus: AlertDialogProps['initialFocus'],
+  emphasis: NonNullable<AlertDialogProps['emphasis']>,
+): boolean => (initialFocus ?? emphasis) === 'cancel';
+
+/** The two buttons in slot order: the emphasised one LAST, the primary slot. */
+const inSlotOrder = (
+  emphasis: AlertDialogProps['emphasis'],
+  cancel: React.ReactNode,
+  confirm: React.ReactNode,
+): React.ReactNode[] => (emphasis === 'cancel' ? [confirm, cancel] : [cancel, confirm]);
+
+/**
+ * Action row: the optional cancel button and the (variant-coloured) confirm,
+ * with the emphasised one LAST — the primary slot, on the right or, once the
+ * row stacks, on top. DOM order is the tab order, so it follows the same rule.
+ */
+export function AlertDialogFooter({
+  variant,
+  cancelText = 'Cancel',
+  confirmText = 'Confirm',
+  showCancel = true,
+  loading = false,
+  confirmDisabled = false,
+  initialFocus,
+  emphasis: asked,
+  onCancel,
+  onConfirm,
+  dataTestId,
+}: Pick<
+  AlertDialogProps,
+  | 'variant'
+  | 'cancelText'
+  | 'confirmText'
+  | 'showCancel'
+  | 'loading'
+  | 'confirmDisabled'
+  | 'initialFocus'
+  | 'emphasis'
+> & {
+  onCancel: () => void;
+  onConfirm: () => void;
+  dataTestId: string;
+}): React.ReactElement {
+  const theme = useTheme();
+  const emphasis = effectiveEmphasis(asked, showCancel);
+  const look = buttonLooks(emphasis, variant);
+  const cancelFocused = focusesCancel(initialFocus, emphasis);
+  const cancel = showCancel && (
+    <Button
+      key="cancel"
+      onClick={onCancel}
+      variant={look.cancel.variant}
+      color={look.cancel.color}
+      disabled={loading}
+      autoFocus={cancelFocused}
+      data-testid={`${dataTestId}-cancel-button`}
+    >
+      {cancelText}
+    </Button>
+  );
+  const confirm = (
+    <Button
+      key="confirm"
+      onClick={onConfirm}
+      variant={look.confirm.variant}
+      color={look.confirm.color}
+      disabled={confirmDisabled || loading}
+      startIcon={
+        loading ? (
+          <CircularProgress
+            size={rem(theme, 16)}
+            color="inherit"
+            data-testid={`${dataTestId}-loading-spinner`}
+          />
+        ) : undefined
+      }
+      autoFocus={!cancelFocused}
+      data-testid={`${dataTestId}-confirm-button`}
+    >
+      {confirmText}
+    </Button>
+  );
+  return (
+    <StyledDialogActions
+      disableSpacing
+      fill={emphasis === 'cancel'}
+      data-testid={`${dataTestId}-actions`}
+    >
+      {inSlotOrder(emphasis, cancel, confirm)}
+    </StyledDialogActions>
+  );
+}

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

@@ -1,22 +1,19 @@
 import Close from '@mui/icons-material/Close';
 import Error from '@mui/icons-material/Error';
 import Info from '@mui/icons-material/Info';
-import type { ButtonProps } from '@mui/material/Button/index.js';
-import Button from '@mui/material/Button/index.js';
-import CircularProgress from '@mui/material/CircularProgress/index.js';
 import Dialog from '@mui/material/Dialog/index.js';
-import DialogActions from '@mui/material/DialogActions/index.js';
 import DialogContent from '@mui/material/DialogContent/index.js';
 import DialogContentText from '@mui/material/DialogContentText/index.js';
 import DialogTitle from '@mui/material/DialogTitle/index.js';
 import IconButton from '@mui/material/IconButton/index.js';
 import Typography from '@mui/material/Typography/index.js';
-import { alpha, keyframes, styled, useTheme } from '@mui/material/styles/index.js';
+import { alpha, keyframes, styled } from '@mui/material/styles/index.js';
 import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { neutralTones } from '../../../tokens/ink';
 
+import { AlertDialogFooter } from './AlertDialog.parts';
 import type { AlertDialogProps } from './AlertDialog.types';
 import { rem, rems } from '../../../tokens/relative';
 
@@ -140,11 +137,6 @@ const StyledDialogContent = styled(DialogContent)(({ theme }) => ({
   paddingBottom: theme.spacing(2),
 }));
 
-const StyledDialogActions = styled(DialogActions)(({ theme }) => ({
-  padding: theme.spacing(2, 3, 3, 3),
-  gap: theme.spacing(1),
-}));
-
 const CloseButton = styled(IconButton)(({ theme }) => ({
   position: 'absolute',
   right: theme.spacing(1),
@@ -208,11 +200,6 @@ function ariaSlotProps(
   };
 }
 
-/** Both variants render a filled confirm; only the colour distinguishes them. */
-const CONFIRM_BUTTON_VARIANT: ButtonProps['variant'] = 'contained';
-const confirmButtonColor = (variant: AlertDialogProps['variant']): 'error' | 'primary' =>
-  variant === 'destructive' ? 'error' : 'primary';
-
 /** Title row: the variant icon (unless explicitly suppressed with `null`) + the title. */
 function AlertDialogHeader({
   title,
@@ -238,70 +225,6 @@ function AlertDialogHeader({
   );
 }
 
-/** Action row: the optional cancel button and the (variant-coloured) confirm. */
-function AlertDialogFooter({
-  variant,
-  cancelText = 'Cancel',
-  confirmText = 'Confirm',
-  showCancel = true,
-  loading = false,
-  confirmDisabled = false,
-  initialFocus = 'confirm',
-  onCancel,
-  onConfirm,
-  dataTestId,
-}: Pick<
-  AlertDialogProps,
-  | 'variant'
-  | 'cancelText'
-  | 'confirmText'
-  | 'showCancel'
-  | 'loading'
-  | 'confirmDisabled'
-  | 'initialFocus'
-> & {
-  onCancel: () => void;
-  onConfirm: () => void;
-  dataTestId: string;
-}): React.ReactElement {
-  const theme = useTheme();
-  return (
-    <StyledDialogActions data-testid={`${dataTestId}-actions`}>
-      {showCancel && (
-        <Button
-          onClick={onCancel}
-          variant="outlined"
-          color="inherit"
-          disabled={loading}
-          autoFocus={initialFocus === 'cancel'}
-          data-testid={`${dataTestId}-cancel-button`}
-        >
-          {cancelText}
-        </Button>
-      )}
-      <Button
-        onClick={onConfirm}
-        variant={CONFIRM_BUTTON_VARIANT}
-        color={confirmButtonColor(variant)}
-        disabled={confirmDisabled || loading}
-        startIcon={
-          loading ? (
-            <CircularProgress
-              size={rem(theme, 16)}
-              color="inherit"
-              data-testid={`${dataTestId}-loading-spinner`}
-            />
-          ) : undefined
-        }
-        autoFocus={initialFocus !== 'cancel'}
-        data-testid={`${dataTestId}-confirm-button`}
-      >
-        {confirmText}
-      </Button>
-    </StyledDialogActions>
-  );
-}
-
 export const AlertDialog = React.forwardRef<HTMLDivElement, AlertDialogProps>(
   ({
     variant = 'default',
@@ -318,6 +241,7 @@ export const AlertDialog = React.forwardRef<HTMLDivElement, AlertDialogProps>(
     loading,
     confirmDisabled,
     initialFocus,
+    emphasis,
     children,
     onClose,
     'data-testid': dataTestId = 'alert-dialog',
@@ -348,12 +272,7 @@ export const AlertDialog = React.forwardRef<HTMLDivElement, AlertDialogProps>(
           <Close />
         </CloseButton>
 
-        <AlertDialogHeader
-          title={title}
-          icon={icon}
-          variant={variant}
-          dataTestId={dataTestId}
-        />
+        <AlertDialogHeader title={title} icon={icon} variant={variant} dataTestId={dataTestId} />
 
         <StyledDialogContent data-testid={`${dataTestId}-content`}>
           {description && (
@@ -375,6 +294,7 @@ export const AlertDialog = React.forwardRef<HTMLDivElement, AlertDialogProps>(
           loading={loading}
           confirmDisabled={confirmDisabled}
           initialFocus={initialFocus}
+          emphasis={emphasis}
           onCancel={handleCancel}
           onConfirm={() => onConfirm?.()}
           dataTestId={dataTestId}

package/src/components/data-display/AlertDialog/AlertDialog.types.ts

@@ -68,12 +68,26 @@ export interface AlertDialogProps extends Omit<MuiDialogProps, 'variant'> {
   confirmDisabled?: boolean;
 
   /**
-   * Which button owns focus when the dialog opens. Defaults to `confirm`, which
-   * is right for an acknowledgement; a destructive dialog should pass `cancel`
-   * so a stray Enter on the trigger cannot complete the action.
+   * Which button owns focus when the dialog opens. Defaults to the emphasised
+   * one — `confirm`, unless `emphasis="cancel"` — which is right for an
+   * acknowledgement; a destructive dialog should pass `cancel` so a stray Enter
+   * on the trigger cannot complete the action.
    */
   initialFocus?: 'confirm' | 'cancel';
 
+  /**
+   * Which button is the filled, primary one. Defaults to `confirm`. Pass
+   * `cancel` when backing out is the action to steer toward — a "discard what
+   * you wrote?" question, where the confirm is the loss: cancel is then filled
+   * and takes the primary slot (right, or on top once the row stacks), and the
+   * confirm steps down to the neutral outline cancel normally wears — primary
+   * and neutral, whatever the variant. The two buttons then grow to share the
+   * row, so once it stacks each takes its full width; focus opens on the cancel
+   * unless `initialFocus` says otherwise. With `showCancel={false}` it has no
+   * effect: the confirm keeps its default, filled look.
+   */
+  emphasis?: 'confirm' | 'cancel';
+
   /**
    * Optional data-testid attribute for testing
    */

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. */