division-ds 0.1.2 → 0.2.0

package/public/docs/components/alert.md

@@ -0,0 +1,173 @@
+# Alert
+
+> A message that sits in the page. It shows its tone three ways, as an icon, a word and a colour, so it still reads on a greyscale screen and through a screen reader.
+
+- **Best for:** A message that sits in the page and stays there: a warning about this screen, or a failed load with a retry.
+- **Not for:** Something that will go away on its own: use Toast.
+- Molecule. Source: `src/components/molecules/alert/Alert.tsx`
+- Rendered docs page: `/components/alert`
+
+## Import
+
+```tsx
+import { Alert } from 'src/components/molecules/alert/Alert'
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `tone` | `'info' \| 'ok' \| 'warning' \| 'hostile'` | `'info'` | Which colour, icon and word the alert carries. |
+| `title` | `string` |  | Required. Screen readers hear the tone word in front of it. |
+| `children` | `ReactNode` |  | The body text. |
+| `live` | `boolean` | `false` | Only for an alert added after the page has loaded. It sets the role screen readers use to announce it: hostile and warning get role=alert (announced at once), info and ok get role=status (announced politely). |
+| `onDismiss` | `() => void` |  | Adds the dismiss button. It runs once the alert has faded and its height has collapsed (M7), not on the click itself, so remove the alert from the page here. With reduced motion it runs straight away. |
+| `dismissLabel` | `string` | `'Dismiss'` | The name screen readers give the dismiss button. |
+| `action` | `ReactNode` |  | For example, a small Button. |
+| `compact` | `boolean` | `false` | One line, for a toolbar, table header or card. The body sits inside the title paragraph, so pass plain inline text, not blocks. |
+| `className` | `string` |  | Merged onto the root. |
+| `ref` | `Ref<HTMLDivElement>` |  | Passed through to the root DOM element. |
+| `...rest` | `Omit<HTMLAttributes<HTMLDivElement>, 'title' \| 'role'>` |  | You can't set role yourself: live decides it. |
+
+## Examples
+
+Each is compiled and rendered on the docs page. Imports are omitted; see above.
+
+### Tones
+
+```tsx
+<div className="flex flex-col gap-4 w-full">
+  <Alert tone="info" title="Depot hours changed">
+    Weekend pickup now opens at 8am.
+  </Alert>
+  <Alert tone="ok" title="Manifest saved" />
+  <Alert tone="warning" title="Depot closes early">
+    The Brasov depot closes at 4pm today for maintenance.
+  </Alert>
+  <Alert tone="hostile" title="Sync failed">
+    The last manifest sync could not reach the server.
+  </Alert>
+</div>
+```
+
+### With body and action
+
+```tsx
+<Alert
+  title="Offline"
+  action={
+    <Button variant="secondary" size="sm">
+      Retry
+    </Button>
+  }
+>
+  Changes are kept on this device.
+</Alert>
+```
+
+### Compact
+
+```tsx
+<div className="flex flex-col gap-3 w-full">
+  <Alert compact tone="info" title="Depot hours changed">
+    Weekend pickup opens at 8am.
+  </Alert>
+  <Alert
+    compact
+    tone="warning"
+    title="Low stock"
+    action={
+      <Button variant="secondary" size="sm">
+        Reorder
+      </Button>
+    }
+  >
+    Three replicas left.
+  </Alert>
+</div>
+```
+
+### Dismissible (it has a close button), without the live prop, because it was on the page from the start
+
+```tsx
+function DismissibleExample() {
+  const [dismissed, setDismissed] = useState(false)
+
+  return dismissed ? (
+    <Button variant="secondary" size="sm" onClick={() => setDismissed(false)}>
+      Restore alert
+    </Button>
+  ) : (
+    <Alert
+      tone="warning"
+      title="Depot closes early"
+      onDismiss={() => setDismissed(true)}
+      dismissLabel="Dismiss depot notice"
+    >
+      The Brasov depot closes at 4pm today for maintenance.
+    </Alert>
+  )
+}
+
+<DismissibleExample />
+```
+
+### Live: it appears after a click, and a screen reader announces it straight away
+
+```tsx
+function LiveExample() {
+  const [shown, setShown] = useState(false)
+
+  return (
+    <div className="flex flex-col gap-3 w-full">
+      <Button
+        variant="secondary"
+        size="sm"
+        wrapperClassName="self-start"
+        onClick={() => setShown(true)}
+      >
+        Trigger a live alert
+      </Button>
+      {shown ? (
+        <Alert live tone="hostile" title="Sync failed" onDismiss={() => setShown(false)}>
+          The last manifest sync could not reach the server.
+        </Alert>
+      ) : null}
+    </div>
+  )
+}
+
+<LiveExample />
+```
+
+## Keyboard
+
+| Keys | Result |
+|---|---|
+| `Tab` | Reaches the action, then the dismiss button. The alert itself isn't a stop. |
+
+## Do
+
+- Start the title with what happened, and the body with what to do.
+- Use live only when the alert appears in response to something the person did.
+- Name the dismiss button for what it closes when there's more than one alert on a page.
+- Use compact where a full alert would push the content it describes out of view, and keep the body to a short phrase.
+- After dismiss, move keyboard focus to the next sensible control. The alert's own dismiss button disappears with it, and focus would otherwise drop back to the top of the page.
+
+## Don't
+
+- Don't use an alert for something that will go away on its own. That's a Toast.
+- Don't colour the body text in the tone.
+- Don't put paragraphs or lists inside a compact alert. It's one line of text.
+- Don't stack more than two alerts. The second one is usually detail for the first.
+
+## Anatomy
+
+- **Container**: A raised surface with a 1px (one pixel) border in the tone's text colour on all four sides. There's no stripe down one side.
+- **Icon**: Shows the tone without relying on colour. Marked aria-hidden, so screen readers skip it.
+- **Tone word**: 'Warning:' before the title. It's hidden on screen and read out by screen readers.
+- **Title**: Required.
+- **Body**: In secondary text, not in the tone colour.
+- **Action**: Optional, usually a small Button.
+- **Dismiss**: Optional. A ghost IconButton (an icon-only button with no fill).
+- **Compact layout**: One line: a 16px icon, then the title and body as one sentence, then the action and dismiss button. Long text wraps onto a new line instead of being cut off.

package/public/docs/components/approval-request.md

@@ -0,0 +1,146 @@
+# ApprovalRequest
+
+> A pause before an action that changes something in the real world (a side effect). It shows a preview of exactly what will happen, Approve and Reject buttons, and then a status line that takes keyboard focus.
+
+- **Best for:** An assistant is about to send, change or spend something outside the conversation.
+- **Not for:** Confirming a destructive action on an ordinary screen: use AlertDialog.
+- Molecule. Source: `src/components/molecules/approval-request/ApprovalRequest.tsx`
+- Rendered docs page: `/components/approval-request`
+
+## Import
+
+```tsx
+import { ApprovalRequest } from 'src/components/molecules/approval-request/ApprovalRequest'
+```
+
+## Requires
+
+- A parent that holds the state and sets it to approved or rejected in onApprove and onReject.
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `title` | `string` |  | Required. The action as a question. It also names the section. |
+| `state` | `'pending' \| 'approved' \| 'rejected'` |  | Required. Pending shows the buttons; approved or rejected shows the status line. |
+| `onApprove` | `() => void` |  | Required. Run the action, then set state to approved. |
+| `onReject` | `() => void` |  | Required. Set state to rejected. Nothing else happens. |
+| `approveLabel` | `string` | `'Approve'` | The approve button. Say the action, like "Send". |
+| `rejectLabel` | `string` | `'Reject'` | The reject button, like "Don't send". |
+| `approvedLabel` | `string` | `'Approved by you'` | The status line once approved. |
+| `rejectedLabel` | `string` | `'Rejected'` | The status line once rejected. |
+| `className` | `string` |  | Goes on the section. |
+
+## Types and helpers
+
+Exported beside the component, from the same file. Import a type with `import type { ... }`.
+
+```ts
+export type ApprovalState = 'pending' | 'approved' | 'rejected'
+```
+
+## Examples
+
+Each is compiled and rendered on the docs page. Imports are omitted; see above.
+
+### Pending: approve or reject, and the keyboard focus then moves to the result
+
+```tsx
+function LiveApproval() {
+  const [state, setState] = useState<ApprovalState>('pending')
+  return (
+    <div className="flex w-full max-w-xl flex-col items-start gap-3">
+      <ApprovalRequest
+        title="Send this reorder to the supplier?"
+        state={state}
+        onApprove={() => setState('approved')}
+        onReject={() => setState('rejected')}
+        approveLabel="Send reorder"
+        rejectLabel="Don't send"
+        className="w-full"
+      >
+        <p>To: Arad replica supply</p>
+        <p>10 × K-41 field radio, 8 × trail pack. Delivery to Depot 4 by Thursday 22 October.</p>
+      </ApprovalRequest>
+      {state === 'pending' ? null : (
+        <Button size="sm" variant="ghost" onClick={() => setState('pending')}>
+          Reset the example
+        </Button>
+      )}
+    </div>
+  )
+}
+
+<LiveApproval />
+```
+
+### Resolved
+
+```tsx
+<div className="flex w-full max-w-xl flex-col gap-3">
+  <ApprovalRequest title="Move the Friday pickup to Thursday?" state="approved" onApprove={() => {}} onReject={() => {}}>
+    Pickup at Depot 4, Thursday 08:00 instead of Friday 08:00.
+  </ApprovalRequest>
+  <ApprovalRequest title="Cancel order ORD-1182?" state="rejected" onApprove={() => {}} onReject={() => {}}>
+    Two replicas, already packed.
+  </ApprovalRequest>
+</div>
+```
+
+## Keyboard
+
+| Keys | Result |
+|---|---|
+| `Tab` | Moves to Approve, then Reject. |
+| `Enter` `Space` | Approves or rejects. Focus then moves to the status line that replaces the buttons. |
+
+## Do
+
+- Ask before every action that reaches outside the conversation: a message sent, a record changed, money spent.
+- Name the buttons for the action ("Send", "Don't send") when the title alone leaves any doubt.
+- Keep the decided request in the thread. It's the record of what was agreed.
+
+## Don't
+
+- Don't run the action before onApprove. The preview is a promise of what will happen, not a report.
+- Don't focus the Approve button when the request appears: someone in the middle of typing would approve it with their next Enter.
+- Don't summarise the preview. Show the email, the change, the amount.
+
+## Common mistakes
+
+Wrong:
+
+```tsx
+<ApprovalRequest title="Send the email?" ...>An email to the depot lead.</ApprovalRequest>
+```
+
+Right:
+
+```tsx
+<ApprovalRequest title="Send this email to Ilse Varga?" ...><p>Subject: Thursday pickup</p><p>Hi Ilse, ...</p></ApprovalRequest>
+```
+
+A person can only approve what they can see. The preview is the content itself, not a summary of it.
+
+Wrong:
+
+```tsx
+{state === "pending" && <ApprovalRequest ... />}
+```
+
+Right:
+
+```tsx
+<ApprovalRequest state={state} ... />
+```
+
+Removing it from the page once it's decided drops focus back to the page and wipes the record of what was decided. The component swaps its own buttons for a status line instead.
+
+## Anatomy
+
+- **Section**: Named by the title. Outlined in the signal colour while pending, and a thin line once it's decided.
+- **Label**: "Needs your approval" with a shield icon while pending, then "Approval".
+- **Title**: The action as a question: "Send this order to Arad depot?"
+- **Preview**: Exactly what will happen, beside a thin line.
+- **Actions**: Approve (primary) and Reject (secondary). Neither has focus when the request appears.
+- **Status line**: Takes the place of the buttons: "Approved by you" or "Rejected". It has tabIndex -1 so it can receive focus from code, and focus moves here when the decision was made here.

package/public/docs/components/auth-form.md

@@ -0,0 +1,130 @@
+# AuthForm
+
+> One form with four modes: sign in, create an account, reset a password, or enter a two-step code. It's built so password managers, pasting and keyboards all just work.
+
+- **Best for:** Sign in, create an account, reset a password or enter a two-step code.
+- **Not for:** A newsletter sign-up: use NewsletterForm. Any other form: build it from FormField controls.
+- Organism. Source: `src/components/organisms/auth-form/AuthForm.tsx`
+- Rendered docs page: `/components/auth-form`
+
+## Import
+
+```tsx
+import { AuthForm } from 'src/components/organisms/auth-form/AuthForm'
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `mode` | `'sign-in' \| 'create-account' \| 'reset-password' \| 'verify-code'` |  | Required. Which form shows. |
+| `onSubmit` | `(values: AuthValues, mode: AuthMode) => void \| AuthErrors \| Promise<void \| AuthErrors>` |  | Required. Runs once every field passes its checks. Resolve with errors keyed by field name to show them. If it rejects, a general alert for the whole form appears, so the failure isn't lost. |
+| `onModeChange` | `(mode: AuthMode) => void` |  | Offers the other modes and reports when someone switches. |
+| `headingLevel` | `2 \| 3 \| 4` | `2` | Match the page's heading outline. The error summary sits one level below. The exception is 4, the lowest heading this system uses: there the summary stays an h4 (a level-4 heading) too. |
+| `className` | `string` |  | Merged with the root classes. Later Tailwind utilities win. |
+| `ref` | `Ref<HTMLFormElement>` |  | The form. |
+
+## Types and helpers
+
+Exported beside the component, from the same file. Import a type with `import type { ... }`.
+
+```ts
+export type AuthMode = 'sign-in' | 'create-account' | 'reset-password' | 'verify-code'
+```
+
+```ts
+export type AuthField = 'name' | 'email' | 'password' | 'code'
+```
+
+```ts
+export type AuthValues = Record<AuthField, string>
+```
+
+```ts
+export type AuthErrors = FieldErrors<AuthField>
+```
+
+## Examples
+
+Each is compiled and rendered on the docs page. Imports are omitted; see above.
+
+### Sign in, with a server error, and the other modes
+
+```tsx
+const wait = (ms: number) => new Promise(resolve => window.setTimeout(resolve, ms))
+
+function AccountExample() {
+  const [mode, setMode] = useState<AuthMode>('sign-in')
+  const [signedIn, setSignedIn] = useState('')
+  const submit = async (values: AuthValues, current: AuthMode) => {
+    await wait(600)
+    if (current === 'sign-in' && values.password !== 'hexline') {
+      return { password: 'That email and password do not match.' }
+    }
+    if (current === 'sign-in' || current === 'create-account') setSignedIn(`Signed in as ${values.email}. This is a demo.`)
+    return undefined
+  }
+  return (
+    <div className="flex flex-col gap-3 w-full max-w-sm">
+      <p className="font-body text-sm text-[var(--color-text-secondary)]">
+        Demo: any email works, and the password <code className="font-mono">hexline</code> signs in.
+      </p>
+      <AuthForm
+        mode={mode}
+        onModeChange={next => {
+          setMode(next)
+          setSignedIn('')
+        }}
+        onSubmit={submit}
+        headingLevel={4}
+      />
+      <p role="status" className="font-body text-sm text-[var(--color-text-primary)]">
+        {signedIn}
+      </p>
+    </div>
+  )
+}
+
+<AccountExample />
+```
+
+### Two-step sign-in with a code
+
+```tsx
+const wait = (ms: number) => new Promise(resolve => window.setTimeout(resolve, ms))
+
+<AuthForm mode="verify-code" onSubmit={() => wait(600).then(() => undefined)} headingLevel={4} />
+```
+
+## Keyboard
+
+| Keys | Result |
+|---|---|
+| `Tab` | Moves through the fields (the password field, then its Show password button), the submit button and the mode links. |
+| `Enter` | In a field, submits. On an error summary entry or a mode link, activates it. |
+| `Space` | On Show password, toggles it. On a mode link, activates it. |
+
+## Do
+
+- Let password managers work. Every field has its autocomplete token, and pasting is never blocked.
+- Resolve onSubmit with errors keyed by field (a wrong password, say), so they show in the summary and at the field.
+- Expect a rejected onSubmit to show up as its own alert instead of failing silently. There's no field to attach it to.
+- Keep the reset confirmation neutral. It never says whether an account exists.
+
+## Don't
+
+- Don't add a CAPTCHA, a puzzle or a copy-paste block. Signing in mustn't test memory or copying by hand (WCAG success criterion 3.3.8; WCAG is the Web Content Accessibility Guidelines, the public rulebook for usable websites).
+- Don't disable the submit button while fields are empty. The error summary says what's missing.
+- Don't validate on every keystroke.
+- Don't count on an error keyed to a field the current mode doesn't show (name while signing in, for example) landing where you'd expect. It's moved onto email, and a console.warn that only shows in development names it. Key it to a field the mode actually shows instead.
+
+## Anatomy
+
+- **Heading**: Names the form. Focus (the place your keyboard typing goes) moves here after a mode switch.
+- **Error summary**: Shows up when a submit fails and takes focus. Each entry jumps to its field. It waits for a real submit attempt: leaving a field (a blur) never brings it up, so it can't shove aside a field someone's about to click.
+- **Fields**: A FormField around each Input, with its help and error text connected to it.
+- **Show password**: An icon button inside the password field that shows the typed text. It uses Input's revealable option, reports on or off through aria-pressed (ARIA, Accessible Rich Internet Applications, is a set of attributes that tell screen readers what a control is doing), and keeps the same name either way. The text hides again on submit and on a mode switch.
+- **Submit**: A Button that stays focusable and shows it's busy while the caller works.
+- **Confirmation**: A status line that's always on the page. Reset mode uses it.
+- **Submit error**: An alert that's always present and gets its text when onSubmit rejects (the visible copy only appears then). It clears on the next submit and on a mode switch.
+- **Mode links**: Shown when onModeChange is given: forgot password, create an account, back to sign in. They're buttons, since they change the form in place, but they look exactly like Link: signal text, an underline that thickens on hover, a pointer cursor and a focus ring.

package/public/docs/components/avatar-group.md

@@ -0,0 +1,150 @@
+# AvatarGroup
+
+> Overlapping avatars (small profile pictures) with a “+N” for the rest. It’s a list named by its count, so a screen reader hears “6 members” and then each person. The people behind the “+N” are named in words, never only counted.
+
+- **Best for:** Several people in one place, with a count: a squad, the people on an order, who’s viewing.
+- **Not for:** Picking people: use MultiSelect.
+- Molecule. Source: `src/components/molecules/avatar-group/AvatarGroup.tsx`
+- Rendered docs page: `/components/avatar-group`
+
+## Import
+
+```tsx
+import { AvatarGroup } from 'src/components/molecules/avatar-group/AvatarGroup'
+```
+
+## Requires
+
+- With overflowTooltip, the root <TooltipProvider>. AppShell and the demo layout each include one.
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `people` | `AvatarGroupPerson[]` |  | Required. Everyone in the group, in the order shown. |
+| `max` | `number` | `4` | The most avatars drawn. The rest go into the +N chip. |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Passed to every Avatar and to the chip. |
+| `label` | `string` |  | What the group is. The count is added on the end: “Alpha squad, 6 members”. |
+| `overflowTooltip` | `boolean` | `false` | Shows the hidden names in a Tooltip on the chip and lets the chip take keyboard focus. |
+| `className` | `string` |  | Merged with the list classes. Later Tailwind utility classes win. |
+| `ref` | `Ref<HTMLUListElement>` |  | Passed through to the list. |
+| `...rest` | `Omit<HTMLAttributes<HTMLUListElement>, 'children' \| 'aria-label'>` |  | Every standard ul prop except children (the people are the content) and aria-label (label builds it, with the count). |
+| `name (AvatarGroupPerson)` | `string` |  | Required. Passed to Avatar. |
+| `src (AvatarGroupPerson)` | `string` |  | Optional image, passed to Avatar. |
+| `status (AvatarGroupPerson)` | `'online' \| 'away' \| 'busy' \| 'offline'` |  | Optional presence (whether they’re online), passed to Avatar, which includes it in the name screen readers hear. |
+
+## Types and helpers
+
+Exported beside the component, from the same file. Import a type with `import type { ... }`.
+
+```ts
+export type AvatarGroupPerson = { name: string; src?: string; status?: AvatarStatus }
+```
+
+## Examples
+
+Each is compiled and rendered on the docs page. Imports are omitted; see above.
+
+### Sizes: four people shown, and the rest counted in a small chip
+
+```tsx
+const ALPHA: AvatarGroupPerson[] = [
+  { name: 'Ilse Varga', status: 'online' },
+  { name: 'Ravi Okonkwo', status: 'away' },
+  { name: 'Mei Tanaka', status: 'busy' },
+  { name: 'Sana Idrissi', status: 'online' },
+  { name: 'Dana Iverson', status: 'offline' },
+  { name: 'Lin Moreau', status: 'online' },
+  { name: 'Tomas Reyes', status: 'offline' },
+]
+
+<div className="flex flex-col gap-4">
+  <AvatarGroup people={ALPHA} size="sm" label="Alpha squad" />
+  <AvatarGroup people={ALPHA} size="md" label="Alpha squad" />
+  <AvatarGroup people={ALPHA} size="lg" label="Alpha squad" />
+</div>
+```
+
+### Everyone fits: no chip
+
+```tsx
+const BRAVO: AvatarGroupPerson[] = [{ name: 'Noor Haddad' }, { name: 'Kai Lindqvist' }, { name: 'Ada Brennan' }]
+
+<AvatarGroup people={BRAVO} label="Bravo squad" />
+```
+
+### The hidden names in a tooltip (press Tab to reach the chip)
+
+```tsx
+const ALPHA: AvatarGroupPerson[] = [
+  { name: 'Ilse Varga', status: 'online' },
+  { name: 'Ravi Okonkwo', status: 'away' },
+  { name: 'Mei Tanaka', status: 'busy' },
+  { name: 'Sana Idrissi', status: 'online' },
+  { name: 'Dana Iverson', status: 'offline' },
+  { name: 'Lin Moreau', status: 'online' },
+  { name: 'Tomas Reyes', status: 'offline' },
+]
+
+<AvatarGroup people={ALPHA} max={3} label="Alpha squad" overflowTooltip />
+```
+
+### In a row, beside the words it summarises
+
+```tsx
+const ALPHA: AvatarGroupPerson[] = [
+  { name: 'Ilse Varga', status: 'online' },
+  { name: 'Ravi Okonkwo', status: 'away' },
+  { name: 'Mei Tanaka', status: 'busy' },
+  { name: 'Sana Idrissi', status: 'online' },
+  { name: 'Dana Iverson', status: 'offline' },
+  { name: 'Lin Moreau', status: 'online' },
+  { name: 'Tomas Reyes', status: 'offline' },
+]
+
+<div className="flex items-center gap-3">
+  <AvatarGroup people={ALPHA} max={3} size="sm" label="Watching this replica" />
+  <p className="text-sm text-[var(--color-text-secondary)]">7 people are watching this replica</p>
+</div>
+```
+
+## Keyboard
+
+| Keys | Result |
+|---|---|
+| `Tab` | With overflowTooltip, focuses the +N chip and opens the tooltip. Otherwise nothing in the group can take focus. |
+
+## Do
+
+- Give it a label that says who the people are: a squad, the people on an order, who’s viewing.
+- Keep max at four or fewer in dense rows. The chip covers the rest.
+- Put the full list somewhere people can reach (a dialog, a roster page) when they need to act on it.
+
+## Don't
+
+- Don't use it as a control. To pick people, use MultiSelect. To open the list, put a Button next to it.
+- Don't set overflowTooltip on every row of a long table, because each chip becomes a Tab stop.
+- Don't pass aria-label. The label plus the count is the name.
+
+## Common mistakes
+
+Wrong:
+
+```tsx
+<div className="flex -space-x-2">{people.map(p => <Avatar name={p.name} />)}</div>
+```
+
+Right:
+
+```tsx
+<AvatarGroup people={people} label="Alpha squad" />
+```
+
+A hand-built stack has no count, no thin outline between the faces, and no words for the people a +N leaves out.
+
+## Anatomy
+
+- **List**: A ul (a bulleted list element) named “<label>, N members”, or just “N members” when there’s no label.
+- **Item**: One Avatar in a 2px (two pixel) frame in surface.base, cut to the same corner. Each one slides a quarter of its width under the one before.
+- **+N chip**: Shaped like an avatar, in monospaced text in text.secondary. The “+2” is aria-hidden (screen readers skip it), and hidden text reading “and 2 more: …” names the people it stands for.
+- **Tooltip**: Optional. Shows the hidden names on hover and on keyboard focus. The chip then becomes a Tab stop, with its focus ring drawn on an outer box that isn’t clipped.