@godxjp/ui 31.31.7 → 32.0.0

package/docs/layout/auth-footer.tsx

@@ -1,37 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Button } from "@godxjp/ui/general";
-import { AuthFooter, AuthStack, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * AuthFooter — shared hosted-identity legal line. Every item remains consumer-owned React content,
- * allowing real links and locale controls without the layout component inventing navigation.
- */
-export default function Demo() {
-  return (
-    <PageContainer title="AuthFooter" subtitle="製品名 · 規約 · プライバシー · 言語">
-      <Card>
-        <CardHeader>
-          <CardTitle level={2}>認証画面の法務フッター</CardTitle>
-          <CardDescription>
-            localeは任意です。リンク先と遷移方法はconsumerが所有します。
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <AuthStack>
-            <AuthFooter
-              product="Acme Identity"
-              terms={<a href="#terms">利用規約</a>}
-              privacy={<a href="#privacy">プライバシー</a>}
-              locale={
-                <Button type="button" variant="ghost" size="sm">
-                  日本語
-                </Button>
-              }
-            />
-            <AuthFooter product="Godx ID" terms="Terms" privacy="Privacy" />
-          </AuthStack>
-        </CardContent>
-      </Card>
-    </PageContainer>
-  );
-}

package/docs/layout/auth-identity.tsx

@@ -1,70 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Logo } from "@godxjp/ui/general";
-import { AuthAccountSummary, AuthIdentity, AuthStack, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * AuthIdentity — canonical identity title with optional relying-party request context. The
- * requester line is consumer data and may be omitted for first-party authentication.
- *
- * `brand` is the product's own artwork, in the MARK's place: the h1 stays painted and keeps naming
- * the block, and the artwork is decorative whatever fills it — so a lockup that spells "GoDX | ID"
- * is not announced on top of the heading. When the lockup already carries the product name, make
- * `title` the SCREEN'S purpose ("サインイン") rather than repeating the brand.
- */
-export default function Demo() {
-  return (
-    <PageContainer title="AuthIdentity" subtitle="ホストIDと依頼元サービスのコンテキスト">
-      <Card>
-        <CardHeader>
-          <CardTitle level={2}>依頼元あり・なし</CardTitle>
-          <CardDescription>
-            外部サービスからの認証要求だけrequesterを表示し、通常ログインでは省略します。
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <AuthStack>
-            <AuthIdentity title="Godx IDにログイン" requester="勤怠管理が認証を要求しています" />
-            <AuthIdentity title="アカウントを確認" />
-            <AuthIdentity
-              title="Continue to Godx ID"
-              requester="Enterprise Security and Compliance Administration is requesting sign in"
-            />
-            <AuthAccountSummary
-              email="very.long.authoritative.account@example.enterprise.invalid"
-              actionLabel="アカウントを切り替える"
-              onAction={() => {}}
-            />
-          </AuthStack>
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader>
-          <CardTitle level={2}>brand · 製品ロックアップ</CardTitle>
-          <CardDescription>
-            brandを渡すとパッケージのマークが製品のロックアップに置き換わります。h1はtitleを読み上げ名
-            として保持し、ロックアップは装飾扱いになるため製品名は一度だけ読まれます。ロックアップが製品名
-            を含む場合、titleには画面の目的を入れてください。
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <AuthStack>
-            <AuthIdentity
-              title="サインイン"
-              brand={<Logo mark="godx-lockup" productSuffix="ID" />}
-            />
-            <AuthIdentity
-              title="サインイン"
-              brand={<Logo mark="godx-lockup" productSuffix="ID" size="lg" />}
-              requester="勤怠管理が認証を要求しています"
-            />
-            <AuthIdentity
-              title="サインイン"
-              brand={<Logo glyph="a" wordmark="Acme" productSuffix="ID" />}
-            />
-          </AuthStack>
-        </CardContent>
-      </Card>
-    </PageContainer>
-  );
-}

package/docs/layout/auth-recovery/examples/mfa-challenge.md

@@ -1,41 +0,0 @@
----
-title: Sign-in MFA challenge (5 states)
-viewport: 1440x2000
----
-
-## otp · otp/error · otp/loading · recovery-code · passkey-failure
-
-This is the **sign-in challenge**. `TwoFactorSetup` is the **enrollment** Dialog (QR, manual key,
-recovery-code output) — a challenge has no secret to reveal and no dialog to dismiss, it _is_ the
-page. Reusing the enrollment dialog here is the anti-pattern this example exists to prevent.
-
-## Focus order (WAI-ARIA APG + WCAG 2.4.3)
-
-DOM order **is** the task order, so no `tabindex` is needed anywhere:
-
-1. the code field — one `InputOTP` (or one `Input` for a recovery code)
-2. the primary action — `Button fullWidth`
-3. fallback A
-4. fallback B
-
-The 6-slot row is **one field**, not six. `InputOTP` owns paste, arrow keys, backspace and the
-caret, and exposes a single focus stop; six `Input`s would put six stops in the tab ring and break
-paste of a 6-digit code — the single most common real-world MFA interaction.
-
-The error message is rendered by `FormField error` with `role="alert"` and wired as
-`aria-errormessage` on the field, which also carries `aria-invalid` — so a screen-reader user hears
-"wrong code" without leaving the field, and sighted users get the destructive slot borders. State is
-never signalled by colour alone (WCAG 1.4.1): the text is always there.
-
-## Loading
-
-`<Button loading loadingText="検証中…">` keeps the button's box while it is pending, so the panel
-never jumps mid-submit, and the input is `disabled` for the duration. The fallbacks are disabled
-too — a second verification must not race the first.
-
-## Fallback row
-
-`<Flex justify="between" gap="sm" wrap>` with two ghost buttons. The two fallbacks share one
-horizontal row while the localized labels fit the panel and **wrap to a stack** when they do not —
-a content-driven reflow, so it is correct for JA, EN and VI without a media query. See the
-long-label example.

package/docs/layout/auth-recovery/examples/mfa-challenge.tsx

@@ -1,254 +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 { FormField, Input, 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";
-
-/**
- * SIGN-IN MFA CHALLENGE — the three canonical SCR-008 states plus the error / loading paths,
- * stacked at the real 432px measure.
- *
- * This is the SIGN-IN challenge, not enrollment. `TwoFactorSetup` is the enrollment Dialog (QR /
- * manual key / recovery output) and must never be reused here: a challenge has no secret to reveal
- * and no dialog to dismiss — it IS the page.
- *
- * FOCUS ORDER is DOM order, and DOM order is the task order:
- *   1. the code field (OTP row / recovery-code Input)  2. the primary action
- *   3. fallback A                                      4. fallback B
- * The OTP row is ONE field — `InputOTP` owns paste, arrow keys and the caret; six separate
- * `Input`s would put six stops in the tab ring and break paste.
- *
- * State coverage: otp (idle) · otp ERROR (wrong code) · otp LOADING (verifying) · recovery-code ·
- * passkey-failure. The first panel owns the standalone frame's single `level={1}` heading; the
- * remaining state sections use `level={2}`. A real route renders ONE panel at `level={1}`.
- */
-export default function Demo() {
-  const [code, setCode] = useState("");
-  const [wrongCode, setWrongCode] = useState("140228");
-  const [pendingCode, setPendingCode] = useState("482915");
-  const [recoveryCode, setRecoveryCode] = 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 />}
-        />
-      }
-    >
-      <Flex direction="col" gap="lg">
-        <Text size="xs" tone="muted" mono>
-          1 / 5 · otp · 認証アプリの 6 桁コード（1 行 6 スロット）
-        </Text>
-        <Card>
-          <CardHeader>
-            <CardTitle level={1}>二段階認証</CardTitle>
-            <CardDescription>
-              認証アプリに表示されている 6 桁のコードを入力してください。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <AuthStack>
-              <FormField id="mfa-otp-idle" 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>
-              <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 / 5 · otp（error）— コード不一致 · aria-invalid + role=alert
-        </Text>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>二段階認証</CardTitle>
-            <CardDescription>
-              認証アプリに表示されている 6 桁のコードを入力してください。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <AuthStack>
-              <FormField
-                id="mfa-otp-error"
-                label="確認コード"
-                error="コードが正しくありません。残り 4 回入力できます。"
-                required
-              >
-                <InputOTP
-                  maxLength={6}
-                  pattern="^[0-9]+$"
-                  value={wrongCode}
-                  onChange={setWrongCode}
-                >
-                  <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>
-          3 / 5 · otp（loading）— 検証中 · 入力をロックし、ボタンの箱は動かさない
-        </Text>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>二段階認証</CardTitle>
-            <CardDescription>コードを検証しています。しばらくお待ちください。</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <AuthStack>
-              <FormField id="mfa-otp-loading" label="確認コード" required>
-                <InputOTP
-                  disabled
-                  maxLength={6}
-                  pattern="^[0-9]+$"
-                  value={pendingCode}
-                  onChange={setPendingCode}
-                >
-                  <InputOTPGroup>
-                    <InputOTPSlot index={0} />
-                    <InputOTPSlot index={1} />
-                    <InputOTPSlot index={2} />
-                    <InputOTPSlot index={3} />
-                    <InputOTPSlot index={4} />
-                    <InputOTPSlot index={5} />
-                  </InputOTPGroup>
-                </InputOTP>
-              </FormField>
-              <Button fullWidth loading loadingText="検証中…">
-                確認する
-              </Button>
-              <Flex justify="between" gap="sm" wrap>
-                <Button variant="ghost" size="sm" disabled>
-                  リカバリコードを使う
-                </Button>
-                <Button variant="ghost" size="sm" disabled>
-                  パスキーで再試行
-                </Button>
-              </Flex>
-            </AuthStack>
-          </CardContent>
-        </Card>
-
-        <Text size="xs" tone="muted" mono>
-          4 / 5 · recovery-code · 一度きりのリカバリコード（1 つのテキスト入力）
-        </Text>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>リカバリコードを入力</CardTitle>
-            <CardDescription>
-              二段階認証の設定時に保存した、一度だけ使えるコードを入力してください。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <AuthStack>
-              <FormField
-                id="mfa-recovery-code"
-                label="リカバリコード"
-                helper="ハイフンを含めて入力してください（例: 4f7c-92ab-30de）。"
-                required
-              >
-                <Input
-                  autoComplete="one-time-code"
-                  inputMode="text"
-                  spellCheck={false}
-                  placeholder="4f7c-92ab-30de"
-                  value={recoveryCode}
-                  onChange={(event) => setRecoveryCode(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>
-          5 / 5 · passkey-failure · パスキー認証に失敗（destructive 通知 + 代替手段）
-        </Text>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>パスキーで確認できませんでした</CardTitle>
-            <CardDescription>
-              このデバイスのパスキーを読み取れませんでした。別の方法で本人確認を続けられます。
-            </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/mobile-390.md

@@ -1,25 +0,0 @@
---- title: Viewport 390x844 viewport: 390x844 ---
-
-## The 390 reference image is NOT a valid source
-
-It overflows and crops horizontally: the two 432px panels are still laid out side by side. It shows no mobile route, no mobile gutter and no reflow, and it was **not traced**. Accepting its cropped overflow as "intended mobile behaviour" would ship a broken screen with a canonical signature on it, so the issue's own words apply: _a route-level mobile reference or an explicit responsive contract is required_.
-
-What follows is that **explicit contract**, decided in the library and enforced by tokens + tests.
-
-## The contract at ≤ 30rem
-
-| Aspect            | Contract                                                                                                                                     |
-| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
-| Page gutter       | `--auth-shell-recovery-main-padding-mobile` = **15px inline** ⇒ panel `x=15, width=360` at a 390 viewport.                                   |
-| Why 15px          | It is the canonical **Login** mobile gutter (`--auth-shell-canonical-main-padding-mobile`). Login → Recovery must not make the surface jump. |
-| Panel measure     | `min(100%, 27rem)`. 432px is a **max**-width, so the panel simply becomes 360px — it is never scaled, cropped or scrolled.                   |
-| Card inset        | Unchanged (24px, `--auth-shell-compact-card-inset`) ⇒ a **310px** content column.                                                            |
-| OTP row           | Stays **one row of 6 slots**: 6 × 36px = **216px** ≤ 310px. Slots are never shrunk and the row never scrolls.                                |
-| Primary action    | `Button fullWidth` — spans the panel at every width.                                                                                         |
-| Fallback row      | Wraps to a **stack** when the two localized labels exceed the content column; otherwise it stays one row. Content-driven, no media query.    |
-| Title/description | Stay inside the bordered surface; long JA/VI strings wrap inside the 310px column and grow the panel's height.                               |
-| Vertical          | The column stays centred; when the panel is taller than the viewport the shell scrolls from the top — the top of the panel is never clipped. |
-
-## Not defined here
-
-Anything the reference could have specified but did not — a mobile-specific type ramp, a sticky bottom action bar, a full-bleed edge-to-edge panel — is **deliberately absent**. Inventing it would be fabricating a canonical. If SCR-008 later ships a real 390 route artboard and it disagrees with the table above, the fix is a token retune (or a new preset), not consumer CSS.

package/docs/layout/auth-recovery/examples/mobile-390.tsx

@@ -1,82 +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";
-
-/**
- * Viewport fixture — 390x844 (mobile). THE MOBILE CONTRACT, decided here.
- *
- * ⚠️ The 390 canonical reference supplied with is a desktop 2x2 COMPOSITE that overflows and
- * crops horizontally. It is not a route-level mobile artboard and it was NOT traced. The behaviour
- * below is a decided, documented contract — see the Overview page.
- *
- * At <=30rem the `account-recovery` preset switches its page gutter to
- * `--auth-shell-recovery-main-padding-mobile` (15px inline), so the panel is x=15, width=360 — the
- * SAME page rhythm as the canonical Login flow, so moving from Login to Recovery on a phone never
- * makes the surface jump. The panel keeps its full 24px card inset, giving a 310px content column;
- * the 6-slot OTP row (6 x 36px = 216px) fits that column at every supported width with no scroll,
- * no shrunken slots and no horizontal overflow.
- */
-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-mobile" 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>
-              <Flex justify="between" gap="sm" wrap>
-                <Button variant="ghost" size="sm">
-                  リカバリコードを使う
-                </Button>
-                <Button variant="ghost" size="sm">
-                  パスキーで再試行
-                </Button>
-              </Flex>
-            </AuthStack>
-          </CardContent>
-        </Card>
-      </Reveal>
-    </AuthShell>
-  );
-}

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

@@ -1,24 +0,0 @@
---- title: Password recovery (4 states) viewport: 1440x1700 ---
-
-## request · sent · new-password · expired
-
-One anatomy, four states. Nothing below the `Card` changes shape — only the **notice**, the **fields** and the copy:
-
-| State          | Notice                     | Fields                                             | Primary                               | Fallback row                          |
-| -------------- | -------------------------- | -------------------------------------------------- | ------------------------------------- | ------------------------------------- |
-| `request`      | —                          | email (`autoComplete="username"`)                  | send reset link                       | back to sign-in · contact support     |
-| `sent`         | `Alert tone="success"`     | —                                                  | resend (**disabled** during cooldown) | back to sign-in · use another address |
-| `new-password` | —                          | new + confirm `PasswordInput` + `PasswordStrength` | update password                       | back to sign-in                       |
-| `expired`      | `Alert tone="destructive"` | —                                                  | request a new link                    | back to sign-in · contact support     |
-
-## What is presentation and what is not
-
-The panel renders **only** what the consumer passes it. It does **not** know reset semantics: no route, no token lifetime, no "is this link still valid" decision, no password policy. The `sent` panel prints the masked address the **server** sent (`h*****@example.co.jp`) — the library never reconstructs an identifier from an email.
-
-## Error, loading and disabled
-
-- **Error** — `FormField error` puts `aria-invalid` + `aria-errormessage` on the control and renders the message with `role="alert"`. The confirm field above shows the canonical mismatch case. - **Disabled** — a resend cooldown is `<Button disabled>`. Never a hidden button: the affordance stays visible so the user knows resending is possible, just not yet. - **Loading** — `<Button loading loadingText="…">` (demonstrated in the MFA example).
-
-## Heading level
-
-A real route renders **one** panel and its `CardTitle` is the page `h1`. The four panels are stacked here at `level={2}` under a caption line purely so the states can be compared at an identical measure — do not copy `level={2}` into a route that has no other heading.