@godxjp/ui 28.4.0 → 28.6.0

package/docs/data-entry/input.tsx

@@ -1,16 +1,33 @@
 import { useState } from "react";
 
+import { Building2, CalendarDays, Hash, Link2, Mail, MapPin, Phone } from "lucide-react";
+
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { FormField, Input } from "@godxjp/ui/data-entry";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { FormField, Input, NumberInput, PasswordInput, SearchInput } from "@godxjp/ui/data-entry";
+import { Icon, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
 
 /**
  * Input — styled wrapper around the native input. Always pair with FormField for
  * a labelled, a11y-wired field. Never a raw <input>. Composed only from real
  * @godxjp/ui components.
+ *
+ * This page is deliberately long: a text field is trivial with a short placeholder
+ * and an empty box, so every section below puts something in it that a real
+ * enterprise form puts in it — a 40-character machine id, a three-line Japanese
+ * label, an address that overflows the box, zero versus empty, Arabic.
  */
 export default function Demo() {
   const [contractValue, setContractValue] = useState("制御値");
+  const [emptyText, setEmptyText] = useState("");
+  const [zeroText, setZeroText] = useState("0");
+  const [emptyNumber, setEmptyNumber] = useState<number | null>(null);
+  const [zeroNumber, setZeroNumber] = useState<number | null>(0);
+  const [overflow, setOverflow] = useState(
+    "東京都港区芝公園四丁目2番8号 東京タワーフットタウン3階 株式会社ゴドー商事 経理部 請求管理課",
+  );
+  const [partnerQuery, setPartnerQuery] = useState("ゴドー");
+
   return (
     <PageContainer
       title="Input"
@@ -19,21 +36,71 @@ export default function Demo() {
       <Flex direction="col" gap="lg">
         <Card>
           <CardHeader>
-            <CardTitle level={2}>States</CardTitle>
+            <CardTitle level={2}>サイズ · 高さラダー</CardTitle>
+            <CardDescription>
+              WHY: 一行に複数のコントロールが並ぶツールバーやフィルタ行では、高さが 1px
+              でもずれると行が波打つ。横に並べて初めて段差が見える。size は xs / sm / md / lg
+              の4段で、既定は md。xs は長らく Input の型にだけ無く、CSS もトークンも揃っていたのに
+              union が塞いでいた。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex direction="row" gap="sm" align="center" wrap>
+                <Flex width={140}>
+                  <Input aria-label="極小 (xs)" size="xs" defaultValue="xs · 極小" />
+                </Flex>
+                <Flex width={140}>
+                  <Input aria-label="小 (sm)" size="sm" defaultValue="sm · 小" />
+                </Flex>
+                <Flex width={140}>
+                  <Input aria-label="標準 (md)" size="md" defaultValue="md · 標準" />
+                </Flex>
+                <Flex width={140}>
+                  <Input aria-label="大 (lg)" size="lg" defaultValue="lg · 大" />
+                </Flex>
+              </Flex>
+              <Text size="sm" tone="muted">
+                同じ段をアフィックス付きでも揃える。prefix / addon
+                は箱の高さを継承するので、段が変わっても行は揃ったまま。
+              </Text>
+              <Flex direction="row" gap="sm" align="center" wrap>
+                <Flex width={180}>
+                  <Input aria-label="極小 (xs) 金額" size="xs" prefix="¥" defaultValue="12,000" />
+                </Flex>
+                <Flex width={180}>
+                  <Input aria-label="小 (sm) 金額" size="sm" prefix="¥" defaultValue="12,000" />
+                </Flex>
+                <Flex width={180}>
+                  <Input aria-label="標準 (md) 金額" size="md" prefix="¥" defaultValue="12,000" />
+                </Flex>
+                <Flex width={180}>
+                  <Input aria-label="大 (lg) 金額" size="lg" prefix="¥" defaultValue="12,000" />
+                </Flex>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>状態 · 既定 / 入力済み / disabled / readOnly</CardTitle>
             <CardDescription>
-              Placeholder, filled, disabled, readOnly, and invalid (aria-invalid). Focus an empty
-              field to see the focus-visible ring.
+              WHY: disabled と readOnly を取り違えると、送信されるはずの値が消える。disabled
+              は操作もフォーカスも送信もしない。readOnly
+              はフォーカスでき、選択・コピーでき、値はそのまま送信される。空のフィールドに Tab
+              で入るとフォーカスリングが出る（静的な画面では再現できないので自分で試すこと）。
             </CardDescription>
           </CardHeader>
           <CardContent>
             <Flex direction="col" gap="md">
-              <Input aria-label="プレースホルダー状態" placeholder="プレースホルダー" />
-              <Input aria-label="入力済み状態" defaultValue="入力済みの値" />
-              <Input aria-label="無効状態" disabled defaultValue="無効 (disabled)" />
+              <Input aria-label="プレースホルダー状態" placeholder="株式会社ゴドー商事" />
+              <Input aria-label="入力済み状態" defaultValue="株式会社ゴドー商事" />
+              <Input aria-label="無効状態" disabled defaultValue="無効 (disabled) · 送信されない" />
               <Input
                 aria-label="読み取り専用状態"
                 readOnly
-                defaultValue="読み取り専用 (readOnly)"
+                defaultValue="読み取り専用 (readOnly) · 送信される"
               />
               <Input
                 aria-label="不正な値の状態"
@@ -46,110 +113,653 @@ export default function Demo() {
 
         <Card>
           <CardHeader>
-            <CardTitle level={2}>Owned affordances · controlled and uncontrolled</CardTitle>
+            <CardTitle level={2}>検証状態 · error / warning / success / validating</CardTitle>
+            <CardDescription>
+              WHY: 赤い枠だけでは「何が悪いのか」は伝わらない。error は枠と文言の両方が要る。success
+              と validating（サーバー照会中）は Input の status には無く、FormField の
+              validateStatus + hasFeedback
+              が持つ。理由は非対称ではなく分担で、アイコン付きフィードバックの欄は FormField
+              の持ち物だから。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <FormField
+                id="state-error"
+                label="メールアドレス"
+                required
+                error="メールアドレスの形式が正しくありません"
+              >
+                <Input id="state-error" type="email" defaultValue="keiri@godo-shoji" />
+              </FormField>
+              <FormField
+                id="state-warning"
+                label="請求先メールアドレス"
+                validateStatus="warning"
+                hasFeedback
+                helper="フリーメールは請求書の到達率が下がる場合がある"
+              >
+                <Input id="state-warning" type="email" defaultValue="godo.keiri@example.com" />
+              </FormField>
+              <FormField
+                id="state-success"
+                label="法人番号"
+                validateStatus="success"
+                hasFeedback
+                helper="国税庁の法人番号システムと照合済み"
+              >
+                <Input id="state-success" defaultValue="7010001008844" inputMode="numeric" />
+              </FormField>
+              <FormField
+                id="state-validating"
+                label="サブドメイン"
+                validateStatus="validating"
+                hasFeedback
+                helper="使用可能かどうかを照会中"
+              >
+                <Input id="state-validating" addonAfter=".godx.jp" defaultValue="godo-shoji" />
+              </FormField>
+              <Text size="sm" tone="muted">
+                status は Input が自分で塗る2値（error / warning）。error だけが aria-invalid
+                も立てるので、赤い枠とスクリーンリーダーが聞く内容が一致する。
+              </Text>
+              <Input aria-label="status=error" status="error" defaultValue="status=error" />
+              <Input aria-label="status=warning" status="warning" defaultValue="status=warning" />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>アフィックス · 箱の内側 (prefix / suffix)</CardTitle>
+            <CardDescription>
+              WHY: 単位のない数字は読み手に単位を推測させる。prefix / suffix
+              は箱のパディングの内側に入るので、値と同じ一つの塊に見える。prefix は aria-hidden
+              ではない（単位は意味であって装飾ではない）。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Input aria-label="金額 (prefix)" prefix="¥" defaultValue="1,234,567" />
+              <Input aria-label="割引率 (suffix)" suffix="%" defaultValue="15" />
+              <Input
+                aria-label="税込金額 (prefix + suffix)"
+                prefix="¥"
+                suffix="円"
+                defaultValue="12,000"
+              />
+              <Input aria-label="重量" suffix="kg" defaultValue="18.5" />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>アドオン · 箱の外側 (addonBefore / addonAfter)</CardTitle>
+            <CardDescription>
+              WHY: プロトコルやドメイン接尾辞はユーザーが打つ値ではない。addon
+              は独立した面として境界の外側に溶接され、接合側の角を閉じる。つまり「打つ場所」と「打たない場所」が形で分かれる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Input
+                aria-label="サイトURL"
+                addonBefore="https://"
+                addonAfter=".co.jp"
+                defaultValue="godo-shoji"
+              />
+              <Input
+                aria-label="社内ポータル"
+                addonBefore="https://"
+                defaultValue="portal.godx.jp/invoice"
+              />
+              <Input
+                aria-label="メール (ドメイン固定)"
+                addonAfter="@godo-shoji.co.jp"
+                defaultValue="keiri"
+              />
+              <Input
+                aria-label="単価 (アドオンとアフィックスの併用)"
+                addonBefore="¥"
+                addonAfter="/ 件"
+                prefix={<Icon as={Hash} size="sm" tone="muted" />}
+                defaultValue="480"
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>アイコンとクリア · 先頭・末尾は1つずつ</CardTitle>
             <CardDescription>
-              Leading/trailing content and allowClear/onClear are rendered with both value modes.
+              WHY: 末尾のスロットは1つしかない。allowClear に値があるとき、クリアの✕は設定した
+              trailingIcon
+              を「置き換える」。両方が同時に出ることはない。これを知らずに自前の✕を重ねると二重になる。
             </CardDescription>
           </CardHeader>
           <CardContent>
             <Flex direction="col" gap="md">
+              <Input
+                aria-label="先頭アイコンのみ"
+                leadingIcon={<Icon as={Building2} size="sm" tone="muted" />}
+                placeholder="取引先名で絞り込む"
+              />
+              <Input
+                aria-label="末尾アイコンのみ"
+                trailingIcon={<Icon as={CalendarDays} size="sm" tone="muted" />}
+                defaultValue="2026-09-30"
+                readOnly
+              />
+              <Input
+                aria-label="先頭と末尾の両方"
+                leadingIcon={<Icon as={Mail} size="sm" tone="muted" />}
+                trailingIcon={<Icon as={Hash} size="sm" tone="muted" />}
+                defaultValue="keiri@godo-shoji.co.jp"
+              />
               <Input
                 aria-label="制御されたクリア可能入力"
                 value={contractValue}
-                onChange={(event) => setContractValue(event.target.value)}
+                onValueChange={setContractValue}
                 allowClear
                 onClear={() => setContractValue("")}
-                leadingIcon={<span aria-hidden="true">¥</span>}
+                leadingIcon={<Icon as={Building2} size="sm" tone="muted" />}
               />
               <Input
-                aria-label="非制御の装飾付き入力"
-                defaultValue="INV-2026-001"
-                allowClear={false}
-                trailingIcon={<span aria-hidden="true">#</span>}
+                aria-label="非制御のクリア可能入力"
+                defaultValue="INV-2026-0912-0031"
+                allowClear
+                trailingIcon={<Icon as={Hash} size="sm" tone="muted" />}
               />
+              <Text size="sm" tone="muted">
+                すぐ上の2つは値を持っているので、設定した trailingIcon ではなく✕が出ている。✕
+                で空にすると trailingIcon が戻る。
+              </Text>
+              <Input
+                aria-label="文字数カウンタ"
+                count={{ max: 20 }}
+                defaultValue="東京都の請求書"
+                placeholder="件名"
+              />
+              <Input aria-label="文字数超過" count={{ max: 5 }} defaultValue="長すぎる件名です" />
+              <Text size="sm" tone="muted">
+                カウンタは超過を「報告」するだけで、値を切らない。入力中の IME
+                変換を途中で刈り取らないための判断。
+              </Text>
             </Flex>
           </CardContent>
         </Card>
 
         <Card>
           <CardHeader>
-            <CardTitle level={2}>Types</CardTitle>
+            <CardTitle level={2}>実データの型 · メール / 電話 / 郵便番号 / URL / 機械ID</CardTitle>
             <CardDescription>
-              The native type attribute drives the input mode and built-in UI; type="file" uses the
-              file: styling baked into the component.
+              WHY: type と inputMode
+              はモバイルのキーボードと自動入力を決める。既定の文字キーボードで電話番号を打たせるのは設計の放棄。40
+              文字の機械 ID は箱より長いので、ここで初めて「はみ出したらどうなるか」が見える。
             </CardDescription>
           </CardHeader>
           <CardContent>
             <Flex direction="col" gap="md">
-              <Input aria-label="パスワード型" type="password" defaultValue="secret-value" />
-              <Input aria-label="数値型" type="number" defaultValue={42} />
-              <Input aria-label="日付型" type="date" defaultValue="2026-06-04" />
-              <Input type="file" aria-label="ファイルを選択" />
+              <FormField id="ct-email" label="担当者メールアドレス" required>
+                <Input
+                  id="ct-email"
+                  type="email"
+                  name="contact_email"
+                  autoComplete="email"
+                  leadingIcon={<Icon as={Mail} size="sm" tone="muted" />}
+                  defaultValue="keiri@godo-shoji.co.jp"
+                />
+              </FormField>
+              <FormField id="ct-tel" label="代表電話番号" helper="市外局番から半角で入力">
+                <Input
+                  id="ct-tel"
+                  type="tel"
+                  name="tel"
+                  inputMode="tel"
+                  autoComplete="tel"
+                  leadingIcon={<Icon as={Phone} size="sm" tone="muted" />}
+                  defaultValue="03-6205-3371"
+                />
+              </FormField>
+              <FormField id="ct-postal" label="郵便番号" helper="ハイフンなし7桁でも可">
+                <Input
+                  id="ct-postal"
+                  name="postal_code"
+                  inputMode="numeric"
+                  autoComplete="postal-code"
+                  leadingIcon={<Icon as={MapPin} size="sm" tone="muted" />}
+                  addonBefore="〒"
+                  defaultValue="105-0011"
+                />
+              </FormField>
+              <FormField id="ct-url" label="会社サイト">
+                <Input
+                  id="ct-url"
+                  type="url"
+                  name="website"
+                  autoComplete="url"
+                  leadingIcon={<Icon as={Link2} size="sm" tone="muted" />}
+                  addonBefore="https://"
+                  defaultValue="www.godo-shoji.co.jp"
+                />
+              </FormField>
+              <FormField
+                id="ct-machine"
+                label="連携キー"
+                helper="40文字。箱より長い値は折り返さず、箱の中で横スクロールする"
+              >
+                <Input
+                  id="ct-machine"
+                  name="integration_key"
+                  readOnly
+                  allowClear={false}
+                  className="font-mono"
+                  defaultValue="a3f9c1e07b2d4856ab10ef93cd77420159be8d36"
+                />
+              </FormField>
             </Flex>
           </CardContent>
         </Card>
 
         <Card>
           <CardHeader>
-            <CardTitle level={2}>In FormField · label / helper / required / error</CardTitle>
+            <CardTitle level={2}>数値と金額 · 桁が動かないこと</CardTitle>
             <CardDescription>
-              FormField wires the label and aria-describedby for you.
+              WHY:
+              金額を縦に並べたとき、プロポーショナル数字だと桁の位置が1行ごとにずれて比較できない。Input
+              には tabular
+              プロップが無いので等幅数字はクラスで足している（既知のギャップ）。刻み・クランプ・ロケール整形が要るなら
+              Input ではなく NumberInput が正解。
             </CardDescription>
           </CardHeader>
           <CardContent>
             <Flex direction="col" gap="md">
-              <FormField id="partner" label="取引先名" required helper="最大50文字">
-                <Input id="partner" placeholder="株式会社..." />
+              <Flex direction="col" gap="xs">
+                <Text size="sm" tone="muted">
+                  Input · 等幅数字なし（桁が揃わない）
+                </Text>
+                <Input aria-label="金額 (等幅なし) 1" prefix="¥" defaultValue="1,234,567" />
+                <Input aria-label="金額 (等幅なし) 2" prefix="¥" defaultValue="9,888,111" />
+              </Flex>
+              <Flex direction="col" gap="xs">
+                <Text size="sm" tone="muted">
+                  Input · 等幅数字あり（桁が揃う）
+                </Text>
+                <Input
+                  aria-label="金額 (等幅あり) 1"
+                  prefix="¥"
+                  className="tabular-nums"
+                  defaultValue="1,234,567"
+                />
+                <Input
+                  aria-label="金額 (等幅あり) 2"
+                  prefix="¥"
+                  className="tabular-nums"
+                  defaultValue="9,888,111"
+                />
+              </Flex>
+              <Flex direction="col" gap="xs">
+                <Text size="sm" tone="muted">
+                  NumberInput · ステッパー・クランプ・Intl 整形つき
+                </Text>
+                <ResponsiveGrid columns={{ base: 1, md: 2 }} gap="md" align="start">
+                  <FormField id="num-amount" label="請求金額">
+                    <NumberInput
+                      id="num-amount"
+                      value={zeroNumber}
+                      onValueChange={setZeroNumber}
+                      min={0}
+                      step={1000}
+                      prefix="¥"
+                    />
+                  </FormField>
+                  <FormField id="num-rate" label="割引率">
+                    <NumberInput
+                      id="num-rate"
+                      value={emptyNumber}
+                      onValueChange={setEmptyNumber}
+                      min={0}
+                      max={100}
+                      step={5}
+                      suffix="%"
+                      placeholder="未設定"
+                    />
+                  </FormField>
+                </ResponsiveGrid>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>専用コンポーネントに譲る場面</CardTitle>
+            <CardDescription>
+              WHY: Input
+              で代用すると必ず何かが抜ける。パスワードなら表示切替・CapsLock・autocomplete
+              契約、検索ならデバウンスとクリアと role=searchbox。3つとも自前実装では落ちる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <FormField id="pw-current" label="現在のパスワード" required>
+                <PasswordInput
+                  id="pw-current"
+                  name="current_password"
+                  autoComplete="current-password"
+                  placeholder="パスワードを入力"
+                />
               </FormField>
-              <FormField id="email" label="メール" error="メールアドレスの形式が正しくありません">
-                <Input id="email" type="email" defaultValue="invalid@" />
+              {/* xs を PasswordInput でも一度は描く。size は Input の型をそのまま継いでいるので、
+                  片方だけ描いて済ませると frame-contracts が「宣言した分岐に証拠が無い」と落ちる
+                  ── 公開した分岐は描いて証明する、というのがこのリポジトリの契約。 */}
+              <Flex width={220}>
+                <PasswordInput
+                  id="pw-pin"
+                  size="xs"
+                  name="pin"
+                  aria-label="PIN (xs)"
+                  autoComplete="off"
+                  defaultValue="8412"
+                />
+              </Flex>
+              <FormField id="pw-api" label="APIシークレット" helper="発行後は再表示できない">
+                <PasswordInput
+                  id="pw-api"
+                  name="api_secret"
+                  autoComplete="new-password"
+                  defaultValue="sk_live_9f2c41ab77de"
+                />
               </FormField>
+              <SearchInput
+                label="取引先を検索"
+                value={partnerQuery}
+                onValueChange={setPartnerQuery}
+                onSearch={setPartnerQuery}
+                placeholder="取引先名・法人番号で検索"
+              />
+              <Text size="sm" tone="muted">
+                逆に、フォーム送信で name を伴う検索欄なら SearchInput ではなく FormField + Input
+                が正しい。SearchInput は値を送らないフィルタ用のウィジェット。
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>幅の振る舞い · 箱は常に親の幅を埋める</CardTitle>
+            <CardDescription>
+              WHY: Input に width プロップは無い（既知のギャップ）。箱は必ず親を 100%
+              埋めるので、幅を決めるのは常に外側のレイアウト。これを知らないと「なぜツールバーで巨大になるのか」が分からない。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex direction="col" gap="xs">
+                <Text size="sm" tone="muted">
+                  フォームの中 · 全幅（FormField がそのまま親を埋める）
+                </Text>
+                <FormField id="w-full" label="取引先名" required helper="最大50文字">
+                  <Input id="w-full" placeholder="株式会社ゴドー商事" />
+                </FormField>
+              </Flex>
+              <Flex direction="col" gap="xs">
+                <Text size="sm" tone="muted">
+                  ツールバーの中 · 内容に合わせて親側で詰める
+                </Text>
+                <Flex direction="row" gap="sm" align="center" wrap>
+                  <Flex width={220}>
+                    <Input aria-label="請求番号で絞り込む" size="sm" placeholder="請求番号" />
+                  </Flex>
+                  <Flex width={120}>
+                    <Input aria-label="年度" size="sm" defaultValue="2026" inputMode="numeric" />
+                  </Flex>
+                  <Flex width={160}>
+                    <Input aria-label="担当者コード" size="sm" placeholder="担当者コード" />
+                  </Flex>
+                </Flex>
+              </Flex>
+              <Flex direction="col" gap="xs">
+                <Text size="sm" tone="muted">
+                  短い項目と長い項目を同じ行に · 比率は親のグリッドが決める
+                </Text>
+                <ResponsiveGrid columns={{ base: 1, md: 4 }} gap="md" align="start">
+                  <FormField id="w-short" label="階数" helper="数字のみ">
+                    <Input id="w-short" inputMode="numeric" defaultValue="3" />
+                  </FormField>
+                  <FormField id="w-long" label="建物名・部屋番号" colSpan={3}>
+                    <Input id="w-long" defaultValue="東京タワーフットタウン 経理部 請求管理課" />
+                  </FormField>
+                </ResponsiveGrid>
+              </Flex>
             </Flex>
           </CardContent>
         </Card>
+
         <Card>
           <CardHeader>
-            <CardTitle level={2}>Ant Design axes · status, variant, size</CardTitle>
+            <CardTitle level={2}>ストレス · 箱に収まらない値</CardTitle>
             <CardDescription>
-              status is the validation state a form paints consistently (error also reports
-              aria-invalid; warning does not, because a warning is not a validity failure). variant
-              is how much chrome the field draws. size is the shared control-height ladder.
+              WHY: 実務の住所・部署名は必ず箱より長い。Input
+              は単一行なので折り返さず、省略記号も付けず、箱の中で横スクロールする。フォーカスを抜けると先頭に戻る。長さが問題になるなら
+              Textarea か、値を全部見せる Descriptions に譲る判断が要る。
             </CardDescription>
           </CardHeader>
           <CardContent>
             <Flex direction="col" gap="md">
-              <Input aria-label="エラー状態" status="error" defaultValue="不正な値" />
-              <Input aria-label="警告状態" status="warning" defaultValue="確認してください" />
-              <Input aria-label="枠線あり" variant="outlined" defaultValue="outlined" />
-              <Input aria-label="塗りつぶし" variant="filled" defaultValue="filled" />
-              <Input aria-label="枠線なし" variant="borderless" defaultValue="borderless" />
-              <Input aria-label="小さいサイズ" size="sm" placeholder="Compact tier (sm)" />
-              <Input aria-label="標準サイズ" size="md" placeholder="Default tier (md)" />
-              <Input aria-label="大きいサイズ" size="lg" placeholder="Comfortable tier (lg)" />
+              <FormField
+                id="stress-overflow"
+                label="請求書送付先"
+                helper="46文字。末尾までキャレットを送ると先頭が隠れる"
+              >
+                <Input
+                  id="stress-overflow"
+                  value={overflow}
+                  onValueChange={setOverflow}
+                  allowClear
+                  onClear={() => setOverflow("")}
+                />
+              </FormField>
+              <FormField id="stress-overflow-sm" label="同じ値を sm の箱で">
+                <Input id="stress-overflow-sm" size="sm" readOnly defaultValue={overflow} />
+              </FormField>
+              <FormField
+                id="stress-overflow-addon"
+                label="アドオンがあると箱はさらに狭くなる"
+                helper="addon は固定幅を取り、残りが入力領域になる"
+              >
+                <Input
+                  id="stress-overflow-addon"
+                  addonBefore="送付先"
+                  addonAfter="宛"
+                  readOnly
+                  defaultValue={overflow}
+                />
+              </FormField>
             </Flex>
           </CardContent>
         </Card>
 
         <Card>
           <CardHeader>
-            <CardTitle level={2}>Affixes · prefix / suffix inside, addons outside</CardTitle>
+            <CardTitle level={2}>ストレス · 空とゼロは別物</CardTitle>
             <CardDescription>
-              A prefix or suffix sits inside the field&apos;s own box, in its padding. An addon is a
-              separate surface welded to the outside of the border: a protocol, a currency, a unit.
-              The counter reports an overrun and never edits the value.
+              WHY:
+              「0」と「未入力」を同じものとして扱うと、値引き0円と値引き未定の区別が消える。テキストの
+              Input では空文字が「未入力」、&quot;0&quot; は入力済み。NumberInput では null
+              が「未入力」で、0 に置き換えてはいけない。
             </CardDescription>
           </CardHeader>
           <CardContent>
             <Flex direction="col" gap="md">
-              <Input aria-label="金額" prefix="¥" suffix="円" defaultValue="12000" />
+              <ResponsiveGrid columns={{ base: 1, md: 2 }} gap="md" align="start">
+                <FormField
+                  id="empty-text"
+                  label="値引き額（テキスト）"
+                  helper={
+                    emptyText === "" ? "現在の値: 空文字（未入力）" : `現在の値: ${emptyText}`
+                  }
+                >
+                  <Input
+                    id="empty-text"
+                    value={emptyText}
+                    onValueChange={setEmptyText}
+                    prefix="¥"
+                    placeholder="未入力"
+                    allowClear
+                  />
+                </FormField>
+                <FormField
+                  id="zero-text"
+                  label="値引き額（0が入っている）"
+                  helper={zeroText === "" ? "現在の値: 空文字（未入力）" : `現在の値: ${zeroText}`}
+                >
+                  <Input
+                    id="zero-text"
+                    value={zeroText}
+                    onValueChange={setZeroText}
+                    prefix="¥"
+                    placeholder="未入力"
+                    allowClear
+                  />
+                </FormField>
+              </ResponsiveGrid>
+              <Text size="sm" tone="muted">
+                プレースホルダーが見えている側が「未入力」。✕
+                で空にすると、両者は見た目でも状態でも同じになる。
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>ストレス · ラベルの長さが揃わない行</CardTitle>
+            <CardDescription>
+              WHY:
+              日本語のラベルは2文字にも3行にもなる。ラベル行が伸びても入力欄の上端が揃うのは、行の
+              align が start で、各セルが独立して縦に伸びるから。center
+              にすると短いラベルの箱が下がって崩れる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveGrid columns={{ base: 1, md: 3 }} gap="md" align="start">
+              <FormField id="label-short" label="都道" helper="2文字ラベル">
+                <Input id="label-short" defaultValue="東京都" />
+              </FormField>
+              <FormField
+                id="label-long"
+                label="請求書の送付先として登録されている経理担当部署の正式名称"
+                helper="3行になるラベル"
+              >
+                <Input id="label-long" defaultValue="経理部 請求管理課" />
+              </FormField>
+              <FormField id="label-mid" label="内線番号" helper="4桁">
+                <Input id="label-mid" inputMode="numeric" defaultValue="4182" />
+              </FormField>
+            </ResponsiveGrid>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>ストレス · RTL</CardTitle>
+            <CardDescription>
+              WHY: prefix / addonBefore
+              は「開始側」であって「左」ではない。論理プロパティで書かれているので
+              dir=&quot;rtl&quot;
+              で自動的に右端へ移る。物理方向のクラスを1つでも混ぜると、ここで崩れる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md" dir="rtl" lang="ar">
+              <FormField id="rtl-name" label="اسم الشركة" required>
+                <Input
+                  id="rtl-name"
+                  defaultValue="شركة غودو التجارية"
+                  leadingIcon={<Icon as={Building2} size="sm" tone="muted" />}
+                  allowClear
+                />
+              </FormField>
+              <FormField id="rtl-site" label="الموقع الإلكتروني">
+                <Input
+                  id="rtl-site"
+                  addonBefore="https://"
+                  addonAfter=".sa"
+                  defaultValue="godo-shoji"
+                />
+              </FormField>
+              <FormField id="rtl-rate" label="نسبة الخصم">
+                <Input id="rtl-rate" prefix="%" suffix="خصم" defaultValue="15" />
+              </FormField>
+              <FormField id="rtl-subject" label="الموضوع">
+                <Input id="rtl-subject" count={{ max: 20 }} defaultValue="فاتورة سبتمبر" />
+              </FormField>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>chrome の段 · variant</CardTitle>
+            <CardDescription>
+              WHY: 既に枠を描いている面（テーブルのセル、カードの中の小さな箱）に outlined
+              を入れると線が二重になる。borderless はその場合の答えで、密なフォームでは filled
+              が境界の数を減らす。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Input aria-label="枠線あり" variant="outlined" defaultValue="outlined · 既定" />
               <Input
-                aria-label="サイト"
-                addonBefore="https://"
-                addonAfter=".co.jp"
-                defaultValue="example"
+                aria-label="塗りつぶし"
+                variant="filled"
+                defaultValue="filled · 密なフォーム"
               />
-              <Input aria-label="件名" count={{ max: 20 }} defaultValue="東京都の請求書" />
-              <Input aria-label="超過した件名" count={{ max: 5 }} defaultValue="長すぎる件名です" />
+              <Input
+                aria-label="枠線なし"
+                variant="borderless"
+                defaultValue="borderless · 既に枠のある面の中"
+              />
+              <Input
+                aria-label="塗りつぶし・エラー"
+                variant="filled"
+                status="error"
+                defaultValue="filled + status=error"
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>既知のギャップ</CardTitle>
+            <CardDescription>
+              このページを書いている途中で見つかった、Input 側の穴。回避策で隠さずここに書いておく。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              <Text size="sm">
+                1. size に xs 段が無い。NumberInput・Select・Button は xs を受けるのに InputProp は
+                sm / md / lg だけ。CSS 側には .ui-control[data-size=&quot;xs&quot;] も
+                --control-height-xs もあるので、塞がっているのは型だけ。
+              </Text>
+              <Text size="sm">
+                2. tabular プロップが無い。Text と Badge は tabular を持つのに、金額を縦に並べる
+                Input と NumberInput は等幅数字をクラスで足すしかない。
+              </Text>
+              <Text size="sm">
+                3. width プロップが無い。箱は常に親を 100%
+                埋めるので、ツールバーでは必ず外側に幅を持つ箱が要る。
+              </Text>
+              <Text size="sm">
+                4. status に success / validating が無い。FormField の validateStatus + hasFeedback
+                で足りてはいるが、ラベルの無い裸の Input では成功も照会中も表現できない。
+              </Text>
             </Flex>
           </CardContent>
         </Card>