@12-apps/ui 6.30.1 → 6.30.3

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

@@ -0,0 +1,81 @@
+# SettingGroup
+
+## Purpose
+
+**One subject**: a main switch, plus the settings that only mean something
+while it is on, indented beneath it. "Notifications" on or off, and — while on —
+which notifications and when.
+
+When the main switch is off the dependent rows **stay where they are**: dimmed,
+disabled, and explained by a short hint. They are not removed. A reader
+deciding whether to turn a feature on is helped by seeing what it would let
+them configure, and a layout that jumps when a switch flips moves the thing
+they were about to press.
+
+Part of the `layout/SettingCard` family.
+
+## One group per subject — not a container for a page
+
+A `SettingGroup` is for several settings of **the same subject**, where the
+main switch decides whether the others apply at all. It is not a way to put
+several unrelated settings in one box.
+
+| these are… | use |
+|---|---|
+| Notifications (main switch) + digest, mentions, quiet hours | **one** `SettingGroup` — the rows mean nothing with notifications off |
+| Session timeout, two-step sign-in, language | **three** cards — a `SettingCard`, a `SettingToggle`, a `SettingCard` — laid out by a `SettingGrid` |
+| Backups (main switch) + frequency, retention | **one** `SettingGroup` |
+| Backups and notifications | **two** groups, never one |
+
+The test: if turning the main switch off would **not** make a row meaningless,
+that row is a different subject and belongs in its own card. Squeezing two
+subjects into one group gives one of them a main switch it does not have, and a
+hint ("inactive until X is on") that is false for it.
+
+## Usage
+
+```tsx
+import { SettingGroup, SettingToggle } from '@12-apps/ui/layout/SettingCard';
+
+<SettingGroup
+  copy={switchCopy}
+  title="Notifications"
+  summary="What we tell you about, and when."
+  inactiveHint="Turn notifications on to choose which ones you get."
+  checked={settings.notifications}
+  onChange={(next) => api.setNotifications(next)}
+>
+  <SettingToggle variant="row" copy={switchCopy} title="Weekly digest" checked={settings.digest} onChange={api.setDigest} />
+  <SettingToggle variant="row" copy={switchCopy} title="Mentions" checked={settings.mentions} onChange={api.setMentions} />
+  <NumberField label="Quiet hours from" value={quietFrom} onChange={setQuietFrom} min={0} max={23} suffix="h" />
+</SettingGroup>
+```
+
+## Props
+
+| prop | type | default | effect |
+|---|---|---|---|
+| `copy` | `SettingSwitchCopy` | **required** | The main switch's "saving" announcement and fallback error. |
+| `title` | `string` | **required** | The subject. Names the main switch and the dependent rows' group. |
+| `checked` | `boolean` | **required** | The main switch's persisted value. |
+| `onChange` | `(checked: boolean) => void \| Promise<unknown>` | **required** | Persist the main switch — same async contract as [`SettingToggle`](./SettingToggle.md). |
+| `inactiveHint` | `string` | **required** | Why the rows are inactive. Shown only while they are. |
+| `children` | `ReactNode` | **required** | The dependent rows — `SettingToggle variant="row"`, fields, anything. |
+| `summary` | `ReactNode` | — | Explanation under the title. |
+| `disabled` | `boolean` | `false` | Disables the main switch; the rows are then inactive too. |
+| `formatError`, `icon`, `dataTestId`, `className`, `sx` | | | As on `SettingToggle`. Parts add `-dependents` and `-hint`. |
+
+## When the rows are active
+
+Only while the main switch is on **and saved**: turning it on lights the rows
+once the save lands (so nobody edits rows a failed save then disables), and
+turning it off dims them at once.
+
+## Accessibility
+
+- The dependent rows are a `role="group"` named by the subject.
+- Inactive, the group is `inert` — nothing in it is focusable or clickable,
+  whatever the host put there — and `aria-disabled`, described by the hint.
+- The family's own rows (`SettingToggle`) also render `disabled`, so they read
+  as disabled rather than merely unreachable.
+- Opacity alone never carries "inactive"; the hint says it in words.

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

@@ -0,0 +1,73 @@
+import Box from '@mui/material/Box/index.js';
+import { useTheme } from '@mui/material/styles/index.js';
+import { forwardRef, useId, useMemo } from 'react';
+
+import { Icon } from '../../../icons';
+
+import { useAsyncSwitch } from './SettingCard.hooks';
+import { partTestId } from './SettingCard.parts';
+import { dependentsStyles, hintStyles, surfaceStyles, withCallerSx } from './SettingCard.styles';
+import type { SettingGroupProps } from './SettingCard.types';
+import { SettingGroupContext } from './SettingGroup.context';
+import { SettingSwitchBlock, useSettingSwitchIds } from './SettingSwitch';
+
+/**
+ * ONE subject: a main switch, and the settings that only mean something while
+ * it is on, indented beneath it.
+ *
+ * With the main switch off the dependent rows stay where they are — dimmed,
+ * `inert`, and explained by `inactiveHint` — rather than disappearing. A
+ * reader deciding whether to turn a feature on is helped by seeing what it
+ * would let them configure, and a layout that jumps when a switch flips moves
+ * the thing they were about to press.
+ *
+ * The rows are active only while the main switch is on AND saved: turning it
+ * on lights them once the save lands; turning it off dims them at once.
+ *
+ * Several subjects are several cards, never one group — see `SettingGroup.md`.
+ */
+export const SettingGroup = forwardRef<HTMLElement, SettingGroupProps>(function SettingGroup(props, ref) {
+  const {
+    checked, onChange, copy, formatError, inactiveHint, children, disabled = false, dataTestId, className, sx,
+  } = props;
+  const theme = useTheme();
+  const ids = useSettingSwitchIds();
+  const hintId = `${useId()}-hint`;
+  const state = useAsyncSwitch({ checked, onChange, formatError, fallback: copy.saveFailed });
+  const active = checked && state.shown && !disabled;
+  const context = useMemo(() => ({ inactive: !active }), [active]);
+
+  return (
+    <Box
+      component="section"
+      ref={ref}
+      aria-labelledby={ids.titleId}
+      aria-busy={state.saving || undefined}
+      data-active={active}
+      data-testid={dataTestId}
+      className={className}
+      sx={withCallerSx((t) => surfaceStyles(t, false), sx)}
+    >
+      <SettingSwitchBlock {...props} disabled={disabled} ids={ids} state={state} />
+      {!active && (
+        <Box component="p" id={hintId} sx={hintStyles(theme)} data-testid={partTestId(dataTestId, 'hint')}>
+          <Icon name="InfoOutlined" size="xs" />
+          <span>{inactiveHint}</span>
+        </Box>
+      )}
+      <Box
+        role="group"
+        aria-labelledby={ids.titleId}
+        aria-describedby={active ? undefined : hintId}
+        aria-disabled={active ? undefined : true}
+        inert={!active}
+        sx={dependentsStyles(theme, active)}
+        data-testid={partTestId(dataTestId, 'dependents')}
+      >
+        <SettingGroupContext.Provider value={context}>{children}</SettingGroupContext.Provider>
+      </Box>
+    </Box>
+  );
+});
+
+SettingGroup.displayName = 'SettingGroup';

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

@@ -0,0 +1,92 @@
+import Box from '@mui/material/Box/index.js';
+import { useTheme } from '@mui/material/styles/index.js';
+import React, { useId } from 'react';
+
+import { Switch } from '../../form/Switch';
+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 type { SettingToggleProps } from './SettingCard.types';
+
+/** Everything the switch-driven cards share, minus the surface each draws around it. */
+export type SettingSwitchBlockProps = Pick<
+  SettingToggleProps,
+  'title' | 'headingLevel' | 'icon' | 'summary' | 'checked' | 'onChange' | 'copy' | 'formatError' | 'dataTestId'
+> & { disabled: boolean };
+
+/** The ids one switch block wires its label, description and failure line with. */
+export interface SettingSwitchIds {
+  titleId: string;
+  inputId: string;
+  summaryId: string;
+  errorId: string;
+}
+
+export const useSettingSwitchIds = (): SettingSwitchIds => {
+  const base = useId();
+  return {
+    titleId: `${base}-title`,
+    inputId: `${base}-switch`,
+    summaryId: `${base}-summary`,
+    errorId: `${base}-error`,
+  };
+};
+
+/**
+ * Title-as-label, the switch, its explanation and the failure line.
+ *
+ * The switch is never `disabled` while it saves, for the reason Save is not
+ * (`SettingCard.tsx`): a disabled control drops keyboard focus. It says
+ * `aria-busy` instead, ignores flips until the save settles (see
+ * `useAsyncSwitch`), shows a spinner, and a polite live region says the words.
+ */
+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 { shown, saving, error, flip } = state;
+  const describedBy = [summary != null ? ids.summaryId : null, error ? ids.errorId : null]
+    .filter(Boolean)
+    .join(' ');
+
+  const control = (
+    <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 1, flexShrink: 0 }}>
+      {saving && <PendingSpinner dataTestId={dataTestId} />}
+      <Switch
+        id={ids.inputId}
+        checked={shown}
+        onChange={(event) => void flip(event.target.checked)}
+        disabled={disabled}
+        error={Boolean(error)}
+        aria-describedby={describedBy || undefined}
+        inputProps={{ role: 'switch', 'aria-busy': saving }}
+        dataTestId={partTestId(dataTestId, 'switch')}
+      />
+    </Box>
+  );
+
+  return (
+    <>
+      <SettingHeader
+        titleId={ids.titleId}
+        title={title}
+        headingLevel={headingLevel}
+        icon={icon}
+        labelFor={ids.inputId}
+        trailing={control}
+        dataTestId={dataTestId}
+      />
+      {summary != null && (
+        <Box component="p" id={ids.summaryId} sx={descriptionStyles(theme)} data-testid={partTestId(dataTestId, 'summary')}>
+          {summary}
+        </Box>
+      )}
+      <SaveError id={ids.errorId} message={error} dataTestId={dataTestId} />
+      <Box role="status" aria-live="polite" sx={SR_ONLY_SX}>
+        {saving ? copy.saving : ''}
+      </Box>
+    </>
+  );
+};

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

@@ -0,0 +1,61 @@
+# SettingToggle
+
+## Purpose
+
+A setting that is **one switch and nothing else**. There is no edit state:
+flipping the switch is the edit, and it saves at once. Part of the
+`layout/SettingCard` family.
+
+## Usage
+
+```tsx
+import { SettingToggle } from '@12-apps/ui/layout/SettingCard';
+
+<SettingToggle
+  copy={copy}                       // SettingSwitchCopy — saving + saveFailed
+  title="Two-step sign-in"
+  summary="Ask for a code on a new device."
+  checked={settings.twoStep}
+  onChange={(next) => api.setTwoStep(next)}   // may return a promise
+/>
+```
+
+## Props
+
+| prop | type | default | effect |
+|---|---|---|---|
+| `copy` | `SettingSwitchCopy` | **required** | The "saving" announcement and the fallback error. No shipped default. |
+| `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. |
+| `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`. |
+| `icon`, `dataTestId`, `className`, `sx` | | | As on `SettingCard`. Parts: `-switch`, `-title`, `-summary`, `-saving`, `-error`. |
+
+## Saving
+
+- The switch shows the new value **at once** and holds it while the promise is
+  pending, with a spinner beside it, `aria-busy` on the input, and
+  `copy.saving` in a polite live region.
+- **Resolved:** the switch hands back to `checked`, which the host has updated.
+- **Rejected:** the switch returns to `checked` (the value actually saved) and
+  the error appears under it in a `role="alert"` line the switch is described
+  by.
+- A flip while a save is pending is **ignored**, not queued: two racing writes
+  of a boolean have no right answer.
+- The switch is never `disabled` while saving, so keyboard focus stays on it.
+
+## Accessibility
+
+- `role="switch"` on the input, named by the title, described by the summary
+  (and the error, when there is one).
+- The whole title is a `<label for>` the switch — clicking the words flips it.
+
+## Best practices
+
+- Use it only when the setting is **exactly** one boolean. Anything with a
+  value to type or pick is a [`SettingCard`](./SettingCard.md).
+- Several switches about one subject belong in a
+  [`SettingGroup`](./SettingGroup.md) with `variant="row"`.

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

@@ -0,0 +1,43 @@
+import Box from '@mui/material/Box/index.js';
+import { forwardRef } from 'react';
+
+import { useAsyncSwitch } from './SettingCard.hooks';
+import { flatStyles, surfaceStyles, withCallerSx } from './SettingCard.styles';
+import type { SettingToggleProps } from './SettingCard.types';
+import { useSettingGroup } from './SettingGroup.context';
+import { SettingSwitchBlock, useSettingSwitchIds } from './SettingSwitch';
+
+/**
+ * A setting that is one switch and nothing else. There is no edit state:
+ * flipping it IS the edit, and it saves at once.
+ *
+ * `onChange` may be async. The switch shows the new value while the promise is
+ * pending, with a spinner and an announced "saving"; a rejection flips it back
+ * to `checked` and shows the error under it.
+ *
+ * Inside a `SettingGroup` whose main switch is off, it renders disabled.
+ */
+export const SettingToggle = forwardRef<HTMLElement, SettingToggleProps>(function SettingToggle(props, ref) {
+  const { checked, onChange, copy, formatError, disabled = false, variant = 'card', dataTestId, className, sx } = props;
+  const group = useSettingGroup();
+  const ids = useSettingSwitchIds();
+  const state = useAsyncSwitch({ checked, onChange, formatError, fallback: copy.saveFailed });
+  const card = variant === 'card';
+
+  return (
+    <Box
+      component={card ? 'section' : 'div'}
+      ref={ref}
+      aria-labelledby={ids.titleId}
+      aria-busy={state.saving || undefined}
+      data-variant={variant}
+      data-testid={dataTestId}
+      className={className}
+      sx={withCallerSx((theme) => (card ? surfaceStyles(theme, false) : flatStyles(theme)), sx)}
+    >
+      <SettingSwitchBlock {...props} disabled={disabled || group.inactive} ids={ids} state={state} />
+    </Box>
+  );
+});
+
+SettingToggle.displayName = 'SettingToggle';

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

@@ -0,0 +1,18 @@
+export { SettingCard } from './SettingCard';
+export { SettingToggle } from './SettingToggle';
+export { SettingGroup } from './SettingGroup';
+export { SettingGrid, SETTING_GRID_CONTAINER } from './SettingGrid';
+export type {
+  SettingCardCopy,
+  SettingCardProps,
+  SettingErrorFormatter,
+  SettingGridColumns,
+  SettingGridProps,
+  SettingGroupProps,
+  SettingHeadingLevel,
+  SettingSaveResult,
+  SettingStatus,
+  SettingSwitchCopy,
+  SettingToggleProps,
+  SettingToggleVariant,
+} from './SettingCard.types';

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

@@ -0,0 +1,68 @@
+# SettingCard family Test Status Tracking
+
+`SettingCard`, `SettingToggle`, `SettingGroup` and `SettingGrid` share this
+folder and this file.
+
+## Test Files Status
+
+- [x] SettingCard.test.stories.tsx, SettingToggle.test.stories.tsx, SettingGroup.test.stories.tsx, SettingGrid.test.stories.tsx created
+- [x] `__tests__/` Vitest suites for all four
+- [x] Core categories implemented (interaction, keyboard, screen reader, focus, responsive/layout, visual states, edge cases)
+
+## Storybook Tests Status
+
+### Test Results
+
+| Test Name                                   | Status | Pass/Fail | Notes                                                  |
+| ------------------------------------------- | ------ | --------- | ------------------------------------------------------ |
+| SettingCard › Opens in place                | PASS   | Pass      | form inside the same card; no dialog                   |
+| SettingCard › Focus round trip              | PASS   | Pass      | first field on open, Edit on close                     |
+| SettingCard › Keyboard only                 | PASS   | Pass      | Tab to Edit, Enter opens, Escape cancels               |
+| SettingCard › Save resolves                 | PASS   | Pass      | "Saving…", `aria-busy`, then new summary + focus       |
+| SettingCard › Save rejects                  | PASS   | Pass      | stays open, draft intact, focus stays on Save          |
+| SettingCard › Cancel discards               | PASS   | Pass      | reopened form shows the saved value                    |
+| SettingCard › Accessible names              | PASS   | Pass      | region, heading, "Edit <title>"                        |
+| SettingCard › Learn more disclosure         | PASS   | Pass      | `aria-expanded` toggles, content visible               |
+| SettingToggle › Flip saves                  | PASS   | Pass      | optimistic value, busy but enabled, then settles       |
+| SettingToggle › Reject reverts              | PASS   | Pass      | back to saved value, error shown                       |
+| SettingToggle › Keyboard flip               | PASS   | Pass      | Space flips; focus stays on the switch while saving    |
+| SettingToggle › Label is the tap target     | PASS   | Pass      | clicking the title flips                               |
+| SettingGroup › Off dims and disables        | PASS   | Pass      | rows rendered, `inert`, opacity < 1, hint shown        |
+| SettingGroup › Off rows skipped by Tab      | PASS   | Pass      | focus never enters the inert rows                      |
+| SettingGroup › Turn on activates            | PASS   | Pass      | rows live, hint gone, fields accept input              |
+| SettingGrid › Columns follow the container  | PASS   | Pass      | 1 / 2 / 3 columns at 360 / 720 / 1080 px containers    |
+| SettingGrid › Rows share height             | PASS   | Pass      | three cards of different content, one height           |
+| SettingGrid › Open card spans the row       | PASS   | Pass      | open card width equals the grid's; back on cancel      |
+
+Legend: Pending | Running | PASS | FAIL
+
+## Static Stories Status
+
+- [x] Default story (each component)
+- [x] Open, Saving, SaveRejected, HostErrorMessage (SettingCard)
+- [x] Saving, SaveRejected, Rows (SettingToggle)
+- [x] Off (dimmed), On, Disabled, OneSubjectPerGroup (SettingGroup)
+- [x] ResponsiveByContainer, OpenCardSpansRow, TwoColumnsMax, Empty (SettingGrid)
+- [x] Disabled state stories
+- [x] Loading (saving) state stories
+- [x] Error state stories
+- [x] Long content / edge cases
+- [x] Dark theme (SettingCard)
+
+## Lint Status
+
+- [x] No lint errors
+- [x] No warnings
+
+## TypeCheck Status
+
+- [x] No type errors
+- [x] All props properly typed
+
+## Overall Component Status
+
+- [x] All tests passing
+- [x] Lint clean
+- [x] TypeCheck clean
+- [x] Stories working
+- [ ] Ready for production (pending review)

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

@@ -0,0 +1,63 @@
+# SettingCard family
+
+Four settings-screen building blocks under one subpath,
+`@12-apps/ui/layout/SettingCard` (FUT-2823). `SettingCard` summarises a setting
+while closed and edits it in place, with an async save that stays open on
+failure and a focus round trip. `SettingToggle` is a switch that saves as it
+flips. `SettingGroup` is one subject's main switch with dependent rows that dim
+(never vanish) while it is off. `SettingGrid` lays them out in 1–3 columns by
+container query, with equal-height rows and a full-row span for an open card.
+App-agnostic: every word comes in through props (`SettingCardCopy`,
+`SettingSwitchCopy`, titles, summaries, hints).
+
+## Props
+
+- **SettingCard** — `copy`, `title`, `onSave` (may be async), `children` (the
+  form), `summary`, `status`, `learnMore`, `onCancel`, `open` / `defaultOpen` /
+  `onOpenChange`, `disabled`, `saveDisabled`, `formatError`, `headingLevel`,
+  `icon`, `dataTestId`, `className`, `sx`.
+- **SettingToggle** — `copy`, `title`, `checked`, `onChange` (may be async),
+  `summary`, `variant` (`card` | `row`), `disabled`, `formatError`, `icon`,
+  `dataTestId`, `className`, `sx`.
+- **SettingGroup** — `SettingToggle`'s switch props plus `inactiveHint` and
+  `children` (the dependent rows).
+- **SettingGrid** — `children`, `minColumnWidth`, `maxColumns`, `gap`,
+  `aria-label`, `dataTestId`, `className`, `sx`.
+
+## Lint
+
+- Clean (`pnpm lint:files src/components/layout/SettingCard`), plus the
+  complexity and flakiness gates.
+
+## Type Errors
+
+- None (`pnpm typecheck`, `tsc -p tsconfig.stories.json`).
+
+## Testing Scenarios
+
+- Closed/open rendering, in-place open, Escape, controlled mode, no focus steal
+  on mount; save pending / resolved / rejected / thrown / double-press /
+  `saveDisabled`; cancel discarding uncontrolled drafts; toggle optimistic flip,
+  revert, ignored second flip; group inert rows, hint, activation only after
+  the save lands; grid container-query CSS, row sizing, open-card span; layout
+  measured in Chromium by the test stories.
+
+## Storybook Tests List
+
+- Layout/SettingCard/Tests → 8, Layout/SettingToggle/Tests → 4,
+  Layout/SettingGroup/Tests → 3, Layout/SettingGrid/Tests → 3.
+
+## Current
+
+- 2026-09-26 16:40 BRT — v1: all four components, copy packs in both locales,
+  docs per component. Remaining TODO: first host adoption in the origin host
+  (FUT-1659 is the admin screens that would fold onto it).
+- 2026-09-26 21:33 BRT — backported onto the `ui-6.30.x` maintenance line
+  (FUT-2823). `SettingCard.hooks.ts`'s focus-on-open and `SettingCard.styles.ts`
+  / `SettingCard.parts.tsx` / `SettingGrid.tsx`'s size tokens now use
+  `SettingCard.focus.ts` / `SettingCard.rem.ts`, private copies of
+  `feedback/Dialog`'s `focusFirstTabbable` and `tokens/relative`'s `rem()` —
+  both shipped on `main` after this line's fork point, and pulling either
+  module forward would drag its own unrelated fix (a Dialog focus-trap change,
+  a whole lint gate) onto a line that takes only security and backport fixes.
+  Behaviour is unchanged; only where the two helpers live differs from `main`.

package/src/components/layout/index.ts

@@ -8,6 +8,7 @@ export * from './Drawer';
 export * from './Resizable';
 export * from './ScrollArea';
 export * from './Separator';
+export * from './SettingCard';
 export * from './Sidebar';
 export * from './Skeleton/Skeleton';
 export * from './TableFilter';

package/src/copy/layout.ts

@@ -16,3 +16,32 @@ export interface TableFilterCopy {
   rangeMin: string;
   rangeMax: string;
 }
+
+/**
+ * The chrome words of an editable `SettingCard`. The card's own title, summary
+ * and status are per-card props; these are the words every card repeats.
+ */
+export interface SettingCardCopy {
+  /** The closed card's trigger. Its accessible name also carries the card's title. */
+  edit: string;
+  /** Discard the draft and close. */
+  cancel: string;
+  save: string;
+  /** Announced (and shown to sighted users as the Save label) while the save is pending. */
+  saving: string;
+  /** The disclosure that reveals the card's longer explanation. */
+  learnMore: string;
+  /** Shown when the save rejected and the host's `formatError` gave no sentence of its own. */
+  saveFailed: string;
+}
+
+/**
+ * What a switch that saves the moment it flips says about that save — shared
+ * by `SettingToggle` and `SettingGroup`'s main switch.
+ */
+export interface SettingSwitchCopy {
+  /** Announced while the flip is being saved. */
+  saving: string;
+  /** Shown when the save rejected and the host's `formatError` gave no sentence of its own. */
+  saveFailed: string;
+}

package/src/en-US.layout.ts

@@ -3,6 +3,8 @@
  * is — see `en-US.ts` for why the packs live in per-family files.
  */
 import type {
+  SettingCardCopy,
+  SettingSwitchCopy,
   TableFilterCopy,
 } from './copy';
 
@@ -13,3 +15,17 @@ export const EN_US_TABLE_FILTER_COPY: TableFilterCopy = {
   rangeMin: "Minimum",
   rangeMax: "Maximum",
 };
+
+export const EN_US_SETTING_CARD_COPY: SettingCardCopy = {
+  edit: "Edit",
+  cancel: "Cancel",
+  save: "Save",
+  saving: "Saving…",
+  learnMore: "Learn more",
+  saveFailed: "Could not save. Please try again.",
+};
+
+export const EN_US_SETTING_SWITCH_COPY: SettingSwitchCopy = {
+  saving: "Saving…",
+  saveFailed: "Could not save. Please try again.",
+};

package/src/locales.ts

@@ -38,6 +38,8 @@ import type {
   PhoneInputCopy,
   RichEditorToolbarCopy,
   SectionOnboardingCopy,
+  SettingCardCopy,
+  SettingSwitchCopy,
   SocialLoginCopy,
   TableFilterCopy,
   TimingDiagramCopy,
@@ -115,6 +117,14 @@ export const TABLE_FILTER_COPY = pack<TableFilterCopy>(
   pt.PT_BR_TABLE_FILTER_COPY,
   en.EN_US_TABLE_FILTER_COPY,
 );
+export const SETTING_CARD_COPY = pack<SettingCardCopy>(
+  pt.PT_BR_SETTING_CARD_COPY,
+  en.EN_US_SETTING_CARD_COPY,
+);
+export const SETTING_SWITCH_COPY = pack<SettingSwitchCopy>(
+  pt.PT_BR_SETTING_SWITCH_COPY,
+  en.EN_US_SETTING_SWITCH_COPY,
+);
 
 // navigation
 export const COMMAND_PALETTE_COPY = pack<CommandPaletteCopy>(

package/src/pt-BR.layout.ts

@@ -3,6 +3,8 @@
  * barrel over this folder — see that file for why.
  */
 import type {
+  SettingCardCopy,
+  SettingSwitchCopy,
   TableFilterCopy,
 } from './copy';
 
@@ -13,3 +15,17 @@ export const PT_BR_TABLE_FILTER_COPY: TableFilterCopy = {
   rangeMin: "Mínimo",
   rangeMax: "Máximo",
 };
+
+export const PT_BR_SETTING_CARD_COPY: SettingCardCopy = {
+  edit: "Editar",
+  cancel: "Cancelar",
+  save: "Salvar",
+  saving: "Salvando…",
+  learnMore: "Saiba mais",
+  saveFailed: "Não foi possível salvar. Tente novamente.",
+};
+
+export const PT_BR_SETTING_SWITCH_COPY: SettingSwitchCopy = {
+  saving: "Salvando…",
+  saveFailed: "Não foi possível salvar. Tente novamente.",
+};

package/dist/chunk-A7RIZOAL.js

@@ -1,13 +0,0 @@
-// src/pt-BR.layout.ts
-var PT_BR_TABLE_FILTER_COPY = {
-  clearAllFilters: "Limpar todos os filtros",
-  clearKeyword: "Limpar a busca",
-  invalidRange: "O m\xE1ximo deve ser maior ou igual ao m\xEDnimo.",
-  rangeMin: "M\xEDnimo",
-  rangeMax: "M\xE1ximo"
-};
-
-export {
-  PT_BR_TABLE_FILTER_COPY
-};
-//# sourceMappingURL=chunk-A7RIZOAL.js.map

package/dist/chunk-A7RIZOAL.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/pt-BR.layout.ts"],"sourcesContent":["/**\n * The pt-BR pack for the layout family. Split out of `pt-BR.ts`, which is a\n * barrel over this folder — see that file for why.\n */\nimport type {\n  TableFilterCopy,\n} from './copy';\n\nexport const PT_BR_TABLE_FILTER_COPY: TableFilterCopy = {\n  clearAllFilters: \"Limpar todos os filtros\",\n  clearKeyword: \"Limpar a busca\",\n  invalidRange: \"O máximo deve ser maior ou igual ao mínimo.\",\n  rangeMin: \"Mínimo\",\n  rangeMax: \"Máximo\",\n};\n"],"mappings":";AAQO,IAAM,0BAA2C;AAAA,EACtD,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AACZ;","names":[]}

package/dist/chunk-BY3JEK5T.js

@@ -1 +0,0 @@
-//# sourceMappingURL=chunk-BY3JEK5T.js.map