@godxjp/ui 31.31.7 → 32.0.0

package/docs/layout/auth-recovery/examples/password-recovery.tsx

@@ -1,197 +0,0 @@
-import { useState } from "react";
-
-import { Alert, AlertDescription, AlertTitle } from "@godxjp/ui/feedback";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Form, FormField, Input, PasswordInput, PasswordStrength } from "@godxjp/ui/data-entry";
-import { Button, Logo, Text } from "@godxjp/ui/general";
-import { AuthFooter, AuthShell, AuthStack, Flex } from "@godxjp/ui/layout";
-import { AppSettingPicker } from "@godxjp/ui/navigation";
-
-/**
- * PASSWORD RECOVERY — the four canonical SCR-008 panel states, stacked at the real 432px measure.
- *
- * All four are the SAME anatomy; only the notice, the fields and the copy change:
- *   Card > CardHeader(CardTitle + CardDescription) > CardContent > AuthStack
- *          [notice Alert] → [fields] → [Button fullWidth] → [fallback row]
- *
- * A real route renders ONE of these panels with `CardTitle level={1}`. This standalone comparison
- * keeps that contract on the first panel, then uses `level={2}` for the remaining state sections,
- * so the frame has exactly one meaningful page heading and every state keeps a valid outline.
- *
- * State coverage: request (idle) · sent (success notice + DISABLED resend during cooldown) ·
- * new-password (field ERROR + strength meter) · expired (destructive notice). The LOADING state is
- * covered by the MFA example. Every panel's primary action spans the panel; every fallback row is
- * `Flex justify="between" wrap`, so it collapses to a stack when the labels stop fitting.
- */
-export default function Demo() {
-  const [email, setEmail] = useState("hanako@example.co.jp");
-  const [password, setPassword] = useState("Godx-2026");
-  const [confirmation, setConfirmation] = useState("Godx-202");
-
-  const maskedEmail = "h*****@example.co.jp";
-
-  return (
-    <AuthShell
-      variant="canonical"
-      preset="account-recovery"
-      brand={
-        <Flex align="center" gap="sm">
-          <Logo mark="godx" tone="success" />
-          <Text weight="medium">GoDX ID</Text>
-        </Flex>
-      }
-      footer={
-        <AuthFooter
-          product="GoDX ID"
-          terms="利用規約"
-          privacy="プライバシー"
-          locale={<AppSettingPicker kind="locale" appearance="labeled" compact />}
-        />
-      }
-    >
-      <Flex direction="col" gap="lg">
-        <Text size="xs" tone="muted" mono>
-          1 / 4 · request · リセットリンクの発行を依頼する
-        </Text>
-        <Card>
-          <CardHeader>
-            <CardTitle level={1}>パスワードをリセット</CardTitle>
-            <CardDescription>
-              登録済みのメールアドレスにリセットリンクをお送りします。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <AuthStack>
-              <FormField id="recovery-email" label="メールアドレス" required>
-                <Input
-                  type="email"
-                  autoComplete="username"
-                  placeholder="you@example.com"
-                  value={email}
-                  onChange={(event) => setEmail(event.target.value)}
-                />
-              </FormField>
-              <Button fullWidth>リセットリンクを送信</Button>
-              <Flex justify="between" gap="sm" wrap>
-                <Button variant="ghost" size="sm">
-                  サインインに戻る
-                </Button>
-                <Button variant="ghost" size="sm">
-                  サポートに連絡
-                </Button>
-              </Flex>
-            </AuthStack>
-          </CardContent>
-        </Card>
-
-        <Text size="xs" tone="muted" mono>
-          2 / 4 · sent · 送信済み（成功通知 + 再送クールダウン中は disabled）
-        </Text>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>メールを確認してください</CardTitle>
-            <CardDescription>
-              リセットリンクを送信しました。リンクの有効期限は 30 分です。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <AuthStack>
-              <Alert tone="success">
-                <AlertTitle>{maskedEmail} に送信しました</AlertTitle>
-                <AlertDescription>
-                  メールが届かない場合は、迷惑メールフォルダもご確認ください。
-                </AlertDescription>
-              </Alert>
-              <Button fullWidth disabled>
-                メールを再送する（60 秒後）
-              </Button>
-              <Flex justify="between" gap="sm" wrap>
-                <Button variant="ghost" size="sm">
-                  サインインに戻る
-                </Button>
-                <Button variant="ghost" size="sm">
-                  別のアドレスを使う
-                </Button>
-              </Flex>
-            </AuthStack>
-          </CardContent>
-        </Card>
-
-        <Text size="xs" tone="muted" mono>
-          3 / 4 · new-password · 新しいパスワードの設定（確認欄の不一致エラー）
-        </Text>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>新しいパスワードを設定</CardTitle>
-            <CardDescription>
-              他のサービスで使用していないパスワードを設定してください。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Form>
-              <AuthStack>
-                <FormField id="recovery-new-password" label="新しいパスワード" required>
-                  <PasswordInput
-                    autoComplete="new-password"
-                    value={password}
-                    onChange={(event) => setPassword(event.target.value)}
-                  />
-                </FormField>
-                <PasswordStrength value={password} />
-                <FormField
-                  id="recovery-confirm-password"
-                  label="新しいパスワード（確認）"
-                  error="パスワードが一致しません。"
-                  required
-                >
-                  <PasswordInput
-                    autoComplete="new-password"
-                    value={confirmation}
-                    onChange={(event) => setConfirmation(event.target.value)}
-                  />
-                </FormField>
-                <Button fullWidth>パスワードを更新</Button>
-                <Flex justify="between" gap="sm" wrap>
-                  <Button variant="ghost" size="sm">
-                    サインインに戻る
-                  </Button>
-                </Flex>
-              </AuthStack>
-            </Form>
-          </CardContent>
-        </Card>
-
-        <Text size="xs" tone="muted" mono>
-          4 / 4 · expired · リンクの有効期限切れ（destructive 通知）
-        </Text>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>リンクの有効期限が切れています</CardTitle>
-            <CardDescription>
-              セキュリティのため、リセットリンクは発行から 30 分で失効します。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <AuthStack>
-              <Alert tone="destructive">
-                <AlertTitle>このリンクは使用できません</AlertTitle>
-                <AlertDescription>
-                  期限切れ、または既に使用されたリンクです。新しいリンクを発行してください。
-                </AlertDescription>
-              </Alert>
-              <Button fullWidth>新しいリンクを発行</Button>
-              <Flex justify="between" gap="sm" wrap>
-                <Button variant="ghost" size="sm">
-                  サインインに戻る
-                </Button>
-                <Button variant="ghost" size="sm">
-                  サポートに連絡
-                </Button>
-              </Flex>
-            </AuthStack>
-          </CardContent>
-        </Card>
-      </Flex>
-    </AuthShell>
-  );
-}

package/docs/layout/auth-recovery/examples/wrapping-ja-en-vi.md

@@ -1,27 +0,0 @@
----
-title: Long labels — ja / en / vi
-viewport: 1440x1500
----
-
-## The panel width is a constant; the copy is not
-
-All three panels are 432px wide because the measure is
-`--auth-shell-recovery-card-max-width`, not a function of the copy. What changes with locale is the
-panel's **height** (the title and description wrap inside the content column) and whether the
-**fallback row** stays on one line.
-
-| Locale | Longest fallback pair                                   | Behaviour at 432px                         |
-| ------ | ------------------------------------------------------- | ------------------------------------------ |
-| ja     | リカバリコードを使う · パスキーで再試行する             | one row                                    |
-| en     | Use a recovery code · Try passkey again                 | one row                                    |
-| vi     | Dùng mã khôi phục dự phòng · Thử lại bằng khóa truy cập | one row → wraps first as the panel narrows |
-
-The reflow is **content-driven** (`Flex wrap`), never a media query and never a per-locale override,
-so a translation that grows after launch degrades gracefully instead of overflowing the panel.
-
-## What is deliberately not tuned per locale
-
-No locale gets a different measure, a different type ramp or a shortened label. If a translation is
-so long that the stacked fallback row makes the panel uncomfortable, the fix belongs to the
-consumer's copy, or to `--auth-shell-recovery-card-max-width` in the service theme — never to a
-locale-conditional branch in the markup.

package/docs/layout/auth-recovery/examples/wrapping-ja-en-vi.tsx

@@ -1,156 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { FormField, InputOTP, InputOTPGroup, InputOTPSlot } from "@godxjp/ui/data-entry";
-import { Button, Logo, Text } from "@godxjp/ui/general";
-import { AuthFooter, AuthShell, AuthStack, Flex } from "@godxjp/ui/layout";
-import { AppSettingPicker } from "@godxjp/ui/navigation";
-
-/**
- * LONG-LABEL WRAPPING — the same MFA challenge panel in ja / en / vi at the identical 432px measure.
- *
- * Vietnamese is the stress case: its fallback labels are the longest of the three, so the fallback
- * row is where the reflow shows. `Flex justify="between" wrap` keeps the two fallbacks on ONE row
- * while they fit the panel and stacks them when they do not — the decision is made by the CONTENT,
- * so it is right for every locale without a media query or a per-locale override.
- *
- * The title and description wrap inside the panel and grow its height; the panel width never
- * changes, because 432px is a max-width owned by `--auth-shell-recovery-card-max-width` and not a
- * function of the copy.
- */
-export default function Demo() {
-  return (
-    <AuthShell
-      variant="canonical"
-      preset="account-recovery"
-      brand={
-        <Flex align="center" gap="sm">
-          <Logo mark="godx" tone="success" />
-          <Text weight="medium">GoDX ID</Text>
-        </Flex>
-      }
-      footer={
-        <AuthFooter
-          product="GoDX ID"
-          terms="利用規約"
-          privacy="プライバシー"
-          locale={<AppSettingPicker kind="locale" appearance="labeled" compact />}
-        />
-      }
-    >
-      <Flex direction="col" gap="lg">
-        <Text size="xs" tone="muted" mono>
-          ja · 認証アプリのコード
-        </Text>
-        <Card>
-          <CardHeader>
-            <CardTitle level={1}>二段階認証コードを入力してください</CardTitle>
-            <CardDescription>
-              お使いの認証アプリに表示されている 6
-              桁の確認コードを入力すると、サインインが完了します。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <AuthStack>
-              <FormField id="wrap-otp-ja" label="確認コード" required>
-                <InputOTP maxLength={6} pattern="^[0-9]+$">
-                  <InputOTPGroup>
-                    <InputOTPSlot index={0} />
-                    <InputOTPSlot index={1} />
-                    <InputOTPSlot index={2} />
-                    <InputOTPSlot index={3} />
-                    <InputOTPSlot index={4} />
-                    <InputOTPSlot index={5} />
-                  </InputOTPGroup>
-                </InputOTP>
-              </FormField>
-              <Button fullWidth>コードを確認してサインイン</Button>
-              <Flex justify="between" gap="sm" wrap>
-                <Button variant="ghost" size="sm">
-                  リカバリコードを使う
-                </Button>
-                <Button variant="ghost" size="sm">
-                  パスキーで再試行する
-                </Button>
-              </Flex>
-            </AuthStack>
-          </CardContent>
-        </Card>
-
-        <Text size="xs" tone="muted" mono>
-          en · authenticator app code
-        </Text>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Enter your two-factor authentication code</CardTitle>
-            <CardDescription>
-              Type the 6-digit verification code shown in your authenticator app to finish signing
-              in to your account.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <AuthStack>
-              <FormField id="wrap-otp-en" label="Verification code" required>
-                <InputOTP maxLength={6} pattern="^[0-9]+$">
-                  <InputOTPGroup>
-                    <InputOTPSlot index={0} />
-                    <InputOTPSlot index={1} />
-                    <InputOTPSlot index={2} />
-                    <InputOTPSlot index={3} />
-                    <InputOTPSlot index={4} />
-                    <InputOTPSlot index={5} />
-                  </InputOTPGroup>
-                </InputOTP>
-              </FormField>
-              <Button fullWidth>Verify code and sign in</Button>
-              <Flex justify="between" gap="sm" wrap>
-                <Button variant="ghost" size="sm">
-                  Use a recovery code
-                </Button>
-                <Button variant="ghost" size="sm">
-                  Try passkey again
-                </Button>
-              </Flex>
-            </AuthStack>
-          </CardContent>
-        </Card>
-
-        <Text size="xs" tone="muted" mono>
-          vi · mã ứng dụng xác thực（最長ラベル）
-        </Text>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Nhập mã xác thực hai lớp của bạn</CardTitle>
-            <CardDescription>
-              Nhập mã xác minh gồm 6 chữ số hiển thị trong ứng dụng xác thực của bạn để hoàn tất
-              việc đăng nhập vào tài khoản.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <AuthStack>
-              <FormField id="wrap-otp-vi" label="Mã xác minh" required>
-                <InputOTP maxLength={6} pattern="^[0-9]+$">
-                  <InputOTPGroup>
-                    <InputOTPSlot index={0} />
-                    <InputOTPSlot index={1} />
-                    <InputOTPSlot index={2} />
-                    <InputOTPSlot index={3} />
-                    <InputOTPSlot index={4} />
-                    <InputOTPSlot index={5} />
-                  </InputOTPGroup>
-                </InputOTP>
-              </FormField>
-              <Button fullWidth>Xác minh mã và đăng nhập</Button>
-              <Flex justify="between" gap="sm" wrap>
-                <Button variant="ghost" size="sm">
-                  Dùng mã khôi phục dự phòng
-                </Button>
-                <Button variant="ghost" size="sm">
-                  Thử lại bằng khóa truy cập
-                </Button>
-              </Flex>
-            </AuthStack>
-          </CardContent>
-        </Card>
-      </Flex>
-    </AuthShell>
-  );
-}

package/docs/layout/auth-recovery/index.md

@@ -1,140 +0,0 @@
---- title: Overview viewport: 1440x900 ---
-
-# Password recovery & sign-in MFA challenge (SCR-008)
-
-A **composition pattern**, not a component. `@godxjp/ui` ships **no `PasswordRecoveryPanel`** and **no `MfaChallengePanel`**: both fail the Framework-Component Test. What the package owns is the **measure** (`AuthShell preset="account-recovery"`), the tokens, and this canonical body.
-
-This surface is **presentation only**. It defines no route, no reset semantics, no OTP verification, no recovery-code consumption, no passkey authentication and no permissions. Every string, every value and every action handler belongs to the consumer.
-
-## Gate 0 — why there is no `<RecoveryPanel state=… />` (gh#233)
-
-| #                                               | Verdict | Reasoning                                                                                                                                                                                                                                                                                                                                              |
-| ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| C1 universal                                    | ✅ pass | Every product with accounts ships password recovery and a second-factor challenge.                                                                                                                                                                                                                                                                     |
-| C2 owns reusable behaviour                      | ❌ FAIL | It owns **none**. The one piece of real behaviour in the whole surface — paste / arrow keys / caret / backspace across six slots — already belongs to `InputOTP`. Focus order is DOM order. "State" is not state: it is _which body the server told you to render_. This is the criterion's own FAIL example: "pure static layout/visual arrangement". |
-| C3 not expressible from existing primitives     | ❌ FAIL | It is expressible **today**: `Card` + `CardHeader`/`CardTitle`/`CardDescription` + `AuthStack` + `Alert` + `FormField` + `Input`/`PasswordInput`/`InputOTP` + `Button fullWidth` + `Flex`. The single real gap was the 432px measure — closed with a **token-owned preset**, per "add the token, not a component".                                     |
-| C4 single responsibility + controlled-vocab API | ❌ FAIL | A `state="request \| sent \| new-password \| expired"` prop is the "grab-bag with a bespoke, screen-shaped API" anti-pattern (the same call as `ErrorSurface`'s `mode`). It would also **lie**: `sent` renders no field, `new-password` renders two plus a strength meter, `passkey-failure` renders none. One prop, five incompatible bodies.         |
-| C5 fully token-themeable                        | ✅ pass | Every part is token-driven already; the new measure is three `--auth-shell-recovery-*` tokens.                                                                                                                                                                                                                                                         |
-| C6 earns the international contract             | ➖      | The copy is the consumer's `t()` catalog either way; the a11y contract is already owned by `FormField` / `InputOTP` / `Button`.                                                                                                                                                                                                                        |
-| C7 earns its bundle cost                        | ❌ FAIL | Two page-shaped blocks shipped to every consumer for screens each app renders once.                                                                                                                                                                                                                                                                    |
-
-A recovery panel is a measure, some slots and some copy.
-
-> **The state is not a prop — the state IS the body you render.** The server answers "we sent a
-> link" / "that link expired" / "wrong code, 4 attempts left", and the route renders the matching
-> body inside the same 432px panel. Nothing is reconstructed, because nothing was torn down.
-
-## What the package now owns
-
-`AuthShell preset="account-recovery"` — a named flow **measure**, orthogonal to `variant`:
-
-```tsx
-<AuthShell variant="canonical" preset="account-recovery" brand={…} footer={…}>
-  <Card>…the panel…</Card>
-</AuthShell>
-```
-
-| Token                                       | Default                 | Owns                                                                                                    |
-| ------------------------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------- |
-| `--auth-shell-recovery-card-max-width`      | `27rem`                 | the **432px** SCR-008 panel measure, shared by both panels                                              |
-| `--auth-shell-recovery-main-padding`        | `1rem`                  | desktop/tablet page gutter                                                                              |
-| `--auth-shell-recovery-main-padding-mobile` | `0.9375rem`             | **15px** inline gutter at ≤30rem ⇒ panel `x=15, width=360` at 390                                       |
-| `--otp-slot-size`                           | `var(--control-height)` | the OTP slot box — widen the challenge row **without** re-scoping `--control-height` for the whole card |
-
-Backward compatibility is total: the canonical Login measure (`--auth-shell-canonical-card-max-width: 22.5rem` / 360px) and the un-preset shell (`24rem`) are untouched, `--otp-slot-size` defaults to the live `--control-height` tier so every existing OTP row renders identically, and `preset` remains optional with a `"default"` default.
-
-## The canonical panel anatomy (identical for all seven states)
-
-```tsx
-<Card>
-  <CardHeader>
-    {/* title + description sit INSIDE the bordered surface — this is the SCR-008 hierarchy.
-        Do NOT put AuthIdentity above the card here: it always renders the hosted mark. */}
-    <CardTitle level={1}>{t("mfa.title")}</CardTitle>
-    <CardDescription>{t("mfa.description")}</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <AuthStack>
-      {notice && <Alert tone="destructive">…</Alert>} {/* notice slot   */}
-      <FormField id="code" label={t("mfa.codeLabel")} error={error} required>
-        <InputOTP maxLength={6} pattern="^[0-9]+$" value={code} onChange={setCode}>
-          <InputOTPGroup>{/* six InputOTPSlot — ONE field, one focus stop */}</InputOTPGroup>
-        </InputOTP>
-      </FormField>
-      <Button fullWidth loading={pending} loadingText={t("common.verifying")}>
-        {t("mfa.verify")}
-      </Button>
-      {/* fallback slot — the two recovery affordances share one row, wrap when they must */}
-      <Flex justify="between" gap="sm" wrap>
-        <Button variant="ghost" size="sm">
-          {t("mfa.useRecoveryCode")}
-        </Button>
-        <Button variant="ghost" size="sm">
-          {t("mfa.retryPasskey")}
-        </Button>
-      </Flex>
-    </AuthStack>
-  </CardContent>
-</Card>
-```
-
-| Slot        | Built from                                       | Geometry owned by                                                                                                    |
-| ----------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- |
-| title       | `CardTitle`                                      | `--auth-shell-canonical-heading-size`, `--auth-shell-card-gap-compact`                                               |
-| description | `CardDescription`                                | `--auth-shell-card-gap-compact`, `--auth-shell-card-body-gap-compact`                                                |
-| fields      | `FormField` + `Input`/`PasswordInput`/`InputOTP` | `--auth-stack-gap`, `--auth-shell-field-label-*`, `--otp-slot-size`, the `--control-height` tier                     |
-| primary     | `Button fullWidth`                               | `--control-height` tier (never a literal height)                                                                     |
-| notice      | `Alert tone=…`                                   | `--alert-*`                                                                                                          |
-| fallback    | `Flex justify="between" gap="sm" wrap`           | `--space-*` via the gap scale; reflow is content-driven                                                              |
-| panel box   | `Card` inside the shell's card slot              | `--auth-shell-recovery-card-max-width`, `--auth-shell-compact-card-inset`, `--auth-shell-card-padding-block-compact` |
-
-## Seven states, one anatomy
-
-| Flow              | State             | Notice        | Fields                             | Primary                           |
-| ----------------- | ----------------- | ------------- | ---------------------------------- | --------------------------------- |
-| password recovery | `request`         | —             | email                              | send reset link                   |
-| password recovery | `sent`            | `success`     | —                                  | resend (disabled during cooldown) |
-| password recovery | `new-password`    | —             | new + confirm + `PasswordStrength` | update password                   |
-| password recovery | `expired`         | `destructive` | —                                  | request a new link                |
-| sign-in MFA       | `otp`             | —             | one 6-slot `InputOTP` row          | verify                            |
-| sign-in MFA       | `recovery-code`   | —             | one `Input`                        | verify                            |
-| sign-in MFA       | `passkey-failure` | `destructive` | —                                  | retry passkey                     |
-
-## Accessibility
-
-- **Focus order = DOM order**: code field → primary → fallback A → fallback B. No `tabindex` anywhere, no positive tabindex, no focus trap (this is a page, not a dialog). - **One field, not six.** `InputOTP` is a single focus stop that owns paste, arrows, backspace and the caret. Six `Input`s would break paste — the most common real MFA interaction. - **Errors** are `FormField error` ⇒ `aria-invalid` + `aria-errormessage` on the control and a `role="alert"` message.
-
-## Responsive contract
-
-| Width | Panel                                     | OTP row                       | Fallback row                                                |
-| ----- | ----------------------------------------- | ----------------------------- | ----------------------------------------------------------- |
-| 1440  | `432px`, centred, 16px page gutter        | one row, 6 × 36px = 216px     | one row                                                     |
-| 1024  | `432px`, centred, 16px page gutter        | one row, identical            | one row                                                     |
-| 390   | `360px` (`x=15`), 15px inline page gutter | one row, identical, no scroll | one row; stacks when labels exceed the 310px content column |
-
-**The supplied 390 reference image is not a valid source.** It is a desktop 2×2 composite that overflows and crops horizontally; it shows no mobile route and no reflow. The 390 row above is a **decided contract**, documented in the mobile example and pinned by tests — not a trace of that image. See **Examples → Viewport 390×844**.
-
-## Measured in Chromium (headless, `deviceScaleFactor: 1`)
-
-Real `getBoundingClientRect()` numbers from these pages, not estimates:
-
-| Viewport | Panel `x` / `w`    | Page gutter | Content column | OTP row (6 slots) | Primary action | Fallback row                           | `scrollWidth`      |
-| -------- | ------------------ | ----------- | -------------- | ----------------- | -------------- | -------------------------------------- | ------------------ |
-| 1440×900 | `504` / **432**    | 16px        | 382px          | **216px** (6×36)  | 382×36         | one row                                | 1440 (no overflow) |
-| 1024×900 | `296` / **432**    | 16px        | 382px          | 216px (6×36)      | 382×36         | one row                                | 1024 (no overflow) |
-| 390×844  | **`15`** / **360** | 15px        | 310px          | 216px (6×36)      | 310×36         | one row (ja) → stacks on longer labels | 390 (no overflow)  |
-
-At 390 all three wrap. The reflow is purely content-driven — there is no locale branch and no media query.
-
-RTL (`dir="rtl"`, 1440): the panel stays `x=504, w=432`; the OTP slots mirror (slot 1 is the right-most at `x=875`, running to `x=695`) with `border-inline-start` and `border-start-start-radius` still on the logical first slot; the fallback row's reading order flips; `scrollWidth` stays 1440.
-
-Focus order, driven with real `Tab` presses from the OTP field: `input.ui-otp-input` (accessible name "確認コード") → 確認する → リカバリコードを使う → パスキーで再試行 → the footer locale control. Typing `482915` into that **single** focus stop fills all six slots. Zero positive `tabindex` on the page. axe-core (wcag2a/2aa/21a/21aa/22aa) reports **0 violations** on all five pages at 1440 and 390, with a clean console.
-
-> **Width is a contract; height is content.** The issue's artboard heights (request `h=248`, MFA
-> `h=324`) are measurements of that artboard's copy. The panels here measure `h=275.5` with the
-> Japanese copy above and `h=332.5` once a fallback row wraps. Pinning a panel height would clip a
-> longer translation, so the pattern owns the measure and lets the panel grow.
-
-## Anti-patterns
-
-- ❌ `TwoFactorSetup` for a sign-in challenge — that is the **enrollment** dialog (QR / manual key / recovery output). A challenge has no secret to reveal and no dialog to dismiss. - ❌ `AuthIdentity` above the panel on SCR-008 — it always renders the hosted mark, and the canonical hierarchy puts the heading **inside** the bordered surface. - ❌ Six `Input`s for the OTP row — one `InputOTP`. - ❌ A page-local `--auth-shell-card-max-width` override, a `.recovery-panel { width: 432px }` class or any consumer media query — that is exactly the geometry this preset took over. - ❌ Re-scoping `--control-height` on the card to widen the OTP slots — that resizes the button and every input too. Use `--otp-slot-size`. - ❌ Two primary actions.

package/docs/layout/auth-recovery/index.tsx

@@ -1,96 +0,0 @@
-import { useState } from "react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { FormField, InputOTP, InputOTPGroup, InputOTPSlot } from "@godxjp/ui/data-entry";
-import { Button, Logo, Reveal, Text } from "@godxjp/ui/general";
-import { AuthFooter, AuthShell, AuthStack, Flex } from "@godxjp/ui/layout";
-import { AppSettingPicker } from "@godxjp/ui/navigation";
-
-/**
- * SIGN-IN MFA CHALLENGE (SCR-008) — a COMPOSITION PATTERN, not a component.
- *
- * `@godxjp/ui` ships NO MfaChallengePanel / PasswordRecoveryPanel: both failed the
- * Framework-Component Test (docs/COMPOSITION-VS-COMPONENT.md) — they own no behaviour and are
- * expressible today from `Card` + `AuthStack` + `FormField` + `InputOTP` + `Button` + `Alert`.
- * The only real gap was the 432px SCR-008 panel MEASURE, which is now a token-owned AuthShell
- * preset: `preset="account-recovery"`. Nothing on this page sets a width, an inset or a colour.
- *
- * THE CANONICAL PANEL ANATOMY (identical for all seven states — see the Examples):
- *   Card > CardHeader(CardTitle + CardDescription)      ← title + description INSIDE the surface
- *        > CardContent > AuthStack
- *            [notice]        Alert, when the state has one
- *            [fields]        FormField(s) — here ONE 6-slot InputOTP row
- *            [primary]       Button fullWidth — spans the panel
- *            [fallback]      Flex justify="between" wrap — the two fallbacks share ONE row
- *
- * There is deliberately no `AuthIdentity` above the card: the SCR-008 hierarchy puts the heading
- * INSIDE the bordered surface, and `AuthIdentity` always renders the hosted mark above it.
- * `TwoFactorSetup` is the ENROLLMENT dialog (QR / manual key / recovery output) and must never be
- * used for this sign-in challenge.
- *
- * FOCUS ORDER is DOM order: code field → verify → recovery-code fallback → passkey fallback.
- * Verify at 1440x900 · 1024x900 · 390x844 (the mobile contract is documented in the Overview —
- * the supplied 390 canonical reference is a cropped desktop composite and is NOT a valid source).
- */
-export default function Demo() {
-  const [code, setCode] = useState("");
-
-  return (
-    <AuthShell
-      variant="canonical"
-      preset="account-recovery"
-      brand={
-        <Flex align="center" gap="sm">
-          <Logo mark="godx" tone="success" />
-          <Text weight="medium">GoDX ID</Text>
-        </Flex>
-      }
-      footer={
-        <AuthFooter
-          product="GoDX ID"
-          terms="利用規約"
-          privacy="プライバシー"
-          locale={<AppSettingPicker kind="locale" appearance="labeled" compact />}
-        />
-      }
-    >
-      <Reveal>
-        <Card>
-          <CardHeader>
-            <CardTitle level={1}>二段階認証</CardTitle>
-            <CardDescription>
-              認証アプリに表示されている 6 桁のコードを入力してください。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <AuthStack>
-              <FormField id="mfa-code" label="確認コード" required>
-                <InputOTP maxLength={6} pattern="^[0-9]+$" value={code} onChange={setCode}>
-                  <InputOTPGroup>
-                    <InputOTPSlot index={0} />
-                    <InputOTPSlot index={1} />
-                    <InputOTPSlot index={2} />
-                    <InputOTPSlot index={3} />
-                    <InputOTPSlot index={4} />
-                    <InputOTPSlot index={5} />
-                  </InputOTPGroup>
-                </InputOTP>
-              </FormField>
-              <Button fullWidth>確認する</Button>
-              {/* FALLBACK ROW — the two recovery affordances share one horizontal row and wrap to
-                  a stack only when the localized labels no longer fit the panel. */}
-              <Flex justify="between" gap="sm" wrap>
-                <Button variant="ghost" size="sm">
-                  リカバリコードを使う
-                </Button>
-                <Button variant="ghost" size="sm">
-                  パスキーで再試行
-                </Button>
-              </Flex>
-            </AuthStack>
-          </CardContent>
-        </Card>
-      </Reveal>
-    </AuthShell>
-  );
-}