@godxjp/ui 27.1.0 → 27.4.1

package/docs/data-display/timeline.tsx

@@ -91,6 +91,10 @@ export default function Demo() {
     new Intl.DateTimeFormat(locale, { month: "short", day: "numeric", timeZone: "UTC" }).format(
       Date.UTC(2026, 8, day),
     );
+  const monthLabel = (month: number) =>
+    new Intl.DateTimeFormat(locale, { year: "numeric", month: "long", timeZone: "UTC" }).format(
+      Date.UTC(2026, month, 1),
+    );
   return (
     <PageContainer title="Timeline" subtitle="現在のステップを強調する縦型のイベント一覧">
       <Flex direction="col" gap="lg">
@@ -162,23 +166,83 @@ export default function Demo() {
         <Card>
           <CardHeader>
             <CardTitle level={2}>RangeTimeline</CardTitle>
+            <CardDescription>
+              日単位の軸。行ごとの区切り線と、列ごとの縦線が本体全体に引かれます（bordered は既定で
+              true）。土日は columns[].muted
+              で本体の高さいっぱいに塗り分け、表示範囲の外にある期間は、その方向の端に矢印付きで示します。
+            </CardDescription>
           </CardHeader>
           <CardContent>
             <RangeTimeline
               label={t("rangeTimeline.schedule")}
-              bands={[
-                {
-                  label: new Intl.DateTimeFormat(locale, {
-                    year: "numeric",
-                    month: "long",
-                    timeZone: "UTC",
-                  }).format(Date.UTC(2026, 8, 1)),
-                  units: 7,
-                },
+              today={8}
+              bands={[{ label: monthLabel(8), units: 14 }]}
+              columns={Array.from({ length: 14 }, (_, index) => {
+                const weekday = new Date(Date.UTC(2026, 8, index + 1)).getUTCDay();
+                return {
+                  label: new Intl.NumberFormat(locale).format(index + 1),
+                  units: 1,
+                  muted: weekday === 0 || weekday === 6,
+                };
+              })}
+              rows={[
+                { id: "design", label: "要件定義", start: 0, end: 3 },
+                { id: "build", label: "実装", start: 3, end: 10 },
+                { id: "review", label: "レビュー", start: 9, end: 12 },
+                { id: "kickoff", label: "キックオフ（前月）", start: -12, end: -9 },
+                { id: "release", label: "リリース（来月）", start: 20, end: 22 },
+              ].map((row) => ({
+                ...row,
+                startLabel: dayLabel(row.start + 1),
+                endLabel: dayLabel(row.end + 1),
+              }))}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>月単位の軸（列ごとに units が異なる）</CardTitle>
+            <CardDescription>
+              units
+              は日数です。9月30・10月31・11月30と幅が異なっても、本体の縦線はヘッダーの列の境界に揃います。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <RangeTimeline
+              label={t("rangeTimeline.schedule")}
+              columns={[
+                { label: monthLabel(8), units: 30 },
+                { label: monthLabel(9), units: 31 },
+                { label: monthLabel(10), units: 30 },
               ]}
+              rows={[
+                { id: "phase-1", label: "第1期", start: 0, end: 44 },
+                { id: "phase-2", label: "第2期", start: 45, end: 90 },
+              ].map((row) => ({
+                ...row,
+                startLabel: dayLabel(row.start + 1),
+                endLabel: dayLabel(row.end + 1),
+              }))}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>罫線なし（bordered=false）</CardTitle>
+            <CardDescription>
+              ヘッダーの列線だけを残し、本体の罫線を外します。muted の列の塗りは残ります。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <RangeTimeline
+              label={t("rangeTimeline.schedule")}
+              bordered={false}
               columns={Array.from({ length: 7 }, (_, index) => ({
                 label: dayLabel(index + 1),
                 units: 1,
+                muted: index === 5,
               }))}
               rows={[
                 {

package/docs/data-entry/command.tsx

@@ -1,7 +1,17 @@
 import { useEffect, useState } from "react";
 
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
 import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@godxjp/ui/data-display";
+import {
+  Checkbox,
   Command,
   CommandEmpty,
   CommandGroup,
@@ -10,7 +20,9 @@ import {
   CommandList,
 } from "@godxjp/ui/data-entry";
 import { Skeleton } from "@godxjp/ui/feedback";
+import { Button } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { ChevronDown } from "lucide-react";
 
 /**
  * Command — キーボードナビゲーション対応のコマンドパレット。
@@ -30,6 +42,14 @@ const VENDOR_DIRECTORY: Suggestion[] = [
   { value: "v-005", label: "田中物産" },
 ];
 
+const MEMBERS: Suggestion[] = [
+  { value: "m-001", label: "山田 太郎" },
+  { value: "m-002", label: "佐藤 花子" },
+  { value: "m-003", label: "鈴木 一郎" },
+  { value: "m-004", label: "高橋 美咲" },
+  { value: "m-005", label: "PHAM THAI DUONG（プロジェクト外）" },
+];
+
 export default function Demo() {
   // Card 1: grouped quick-select. Controlled `value` pre-highlights an item so the
   // [aria-selected=true] accent is visible at rest, without keyboard interaction.
@@ -44,6 +64,13 @@ export default function Demo() {
   const [loading, setLoading] = useState<boolean>(true);
   const [results, setResults] = useState<Suggestion[]>([]);
 
+  // Card 4: filter facet — a checklist, so the list is `split` (ruled rows, 0 list padding).
+  const [assignees, setAssignees] = useState<string[]>(["m-002"]);
+  const toggleAssignee = (member: string) =>
+    setAssignees((current) =>
+      current.includes(member) ? current.filter((m) => m !== member) : [...current, member],
+    );
+
   useEffect(() => {
     let active = true;
     setLoading(true);
@@ -131,6 +158,58 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>担当者フィルター（split）</CardTitle>
+            <CardDescription>
+              Popover + Command に split を付けると、行間に区切り線・リスト余白 0・行は popover
+              の端まで届く一つの箱として描画されます。チェックボックスで複数選択（選択中:{" "}
+              {assignees.length} 名）。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button variant="outline">
+                  担当者{assignees.length > 0 ? ` (${assignees.length})` : ""}
+                  <ChevronDown aria-hidden="true" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent flush align="start">
+                <Command label="担当者を絞り込む" split>
+                  <CommandInput placeholder="担当者 を絞り込む" />
+                  <CommandList>
+                    <CommandEmpty>該当する担当者がいません。</CommandEmpty>
+                    <CommandGroup>
+                      {MEMBERS.map((member) => {
+                        const checked = assignees.includes(member.value);
+                        return (
+                          <CommandItem
+                            key={member.value}
+                            value={member.label}
+                            aria-checked={checked}
+                            onSelect={() => toggleAssignee(member.value)}
+                          >
+                            {/* The ROW is the option and owns the click; the box only mirrors it,
+                                so it leaves the tab ring (TreeSelect does the same). */}
+                            <Checkbox
+                              checked={checked}
+                              tabIndex={-1}
+                              onCheckedChange={() => toggleAssignee(member.value)}
+                              aria-labelledby={`assignee-${member.value}`}
+                            />
+                            <span id={`assignee-${member.value}`}>{member.label}</span>
+                          </CommandItem>
+                        );
+                      })}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>勤怠アクションパレット（Cmd+K 想定）</CardTitle>

package/docs/data-entry/form-root.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { z } from "zod";
 import { Alert, AlertDescription } from "@godxjp/ui/feedback";
-import { Input } from "@godxjp/ui/data-entry";
+import { Checkbox, Input } from "@godxjp/ui/data-entry";
 import { Button } from "@godxjp/ui/general";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
@@ -10,12 +10,13 @@ import { FormFieldControl, FormRoot, useZodForm } from "@godxjp/ui/form";
 const schema = z.object({
   name: z.string().min(1, "組織名を入力してください"),
   email: z.string().email("有効なメールアドレスを入力してください"),
+  is_shared: z.boolean(),
 });
 
 export default function Demo() {
   const [status, setStatus] = useState<"idle" | "pending" | "success" | "server-error">("idle");
   const form = useZodForm(schema, {
-    defaultValues: { name: "株式会社アクメ", email: "billing@example.jp" },
+    defaultValues: { name: "株式会社アクメ", email: "billing@example.jp", is_shared: false },
   });
 
   async function submit() {
@@ -70,6 +71,15 @@ export default function Demo() {
                 />
               )}
             </FormFieldControl>
+            {/* Boolean field (antd `valuePropName="checked"`): the label is the Checkbox's children,
+                on the same line as the box — no label row above it. */}
+            <FormFieldControl name="is_shared" valuePropName="checked">
+              {(field) => (
+                <Checkbox {...field} disabled={status === "pending"}>
+                  請求書をプロジェクトメンバーに共有する
+                </Checkbox>
+              )}
+            </FormFieldControl>
             <Flex gap="sm" wrap>
               <Button type="submit" loading={status === "pending"}>
                 保存

package/docs/general/icon.tsx

@@ -0,0 +1,215 @@
+import {
+  ArrowUpRight,
+  Check,
+  Download,
+  FileWarning,
+  Globe,
+  Lock,
+  ShieldCheck,
+  Smartphone,
+  Unlock,
+} from "lucide-react";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Button, Heading, Icon, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer, Separator } from "@godxjp/ui/layout";
+
+/**
+ * Icon · a glyph on the `--icon-size-*` scale, and the only supported way to draw a standalone one.
+ *
+ * A lucide component ships `width="24" height="24"`. Four rules in this library override that
+ * (`.ui-button svg`, the menu row, the topbar cell, the ListRow leading slot) and nothing else
+ * does · so a glyph in a `Text`, a table cell or an `<a>` draws at 24px beside 14px type, 1.7× the
+ * text it annotates. `docs/CONSUMER-RULES.md` §3/§8 forbid the `size-4` / `w-[16px]` escape, which
+ * left a consumer with 38 oversized glyphs and no supported fix (gh#712).
+ *
+ * `Icon` renders ONTO the glyph · the sized element is the `<svg>` itself · so it composes
+ * anywhere a bare glyph does and adds no box to the row. Decorative (`aria-hidden`) by default;
+ * `label` switches it to `role="img"` with that accessible name.
+ *
+ * Composed only from real @godxjp/ui components. All copy is consumer-owned and localized.
+ */
+
+/** The nine steps, with the px each resolves to at a 16px root · docs/TOKENS.md. */
+const SIZES = [
+  { size: "2xs", px: "10px", note: "アバターの在席ドット" },
+  { size: "xs", px: "12px", note: "表の並べ替えカーソル" },
+  { size: "sm", px: "14px", note: 'size="sm" のコントロール' },
+  { size: "md", px: "16px", note: "既定のアイコン段" },
+  { size: "lg", px: "20px", note: "アラート・ランチャー" },
+  { size: "xl", px: "24px", note: "アップロードタイル" },
+  { size: "2xl", px: "36px", note: "StatCard のメダリオン" },
+  { size: "3xl", px: "40px", note: "ドロップゾーン" },
+  { size: "4xl", px: "48px", note: "空状態の枠" },
+] as const;
+
+/** `tone` shares Text's vocabulary · one table for the glyph and the label beside it. */
+const TONES = [
+  { tone: "default", label: "default · 前景色" },
+  { tone: "muted", label: "muted · 補足" },
+  { tone: "primary", label: "primary · 主要導線" },
+  { tone: "success", label: "success · 有効" },
+  { tone: "warning", label: "warning · 要確認" },
+  { tone: "destructive", label: "destructive · 失敗" },
+  { tone: "info", label: "info · 情報" },
+  { tone: "inherit", label: "inherit · 面の色を継承" },
+] as const;
+
+/** The real screen: a security settings list whose status is carried by a glyph beside 14px text. */
+const SESSIONS = [
+  {
+    id: "s1",
+    device: "MacBook Pro · 東京",
+    detail: "2026-09-17 09:12 · 192.0.2.24",
+    secure: true,
+  },
+  {
+    id: "s2",
+    device: "iPhone 15 · 大阪",
+    detail: "2026-09-16 21:40 · 198.51.100.7",
+    secure: true,
+  },
+  {
+    id: "s3",
+    device: "Windows PC · 未確認の拠点",
+    detail: "2026-09-15 02:05 · 203.0.113.19",
+    secure: false,
+  },
+];
+
+export default function Demo() {
+  return (
+    <PageContainer
+      title="Icon"
+      subtitle='--icon-size-* の9段にグリフを載せる唯一の方法 · 既定は装飾（aria-hidden）· label で role="img"'
+    >
+      <Flex direction="col" gap="lg">
+        {/* ── The real screen · the defect this primitive exists for: a status glyph inline with
+             14px body text, where no context rule would ever have sized it. ── */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>サインイン中の端末</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              {SESSIONS.map((session) => (
+                <Flex key={session.id} direction="row" gap="sm" align="center" justify="between">
+                  <Flex direction="row" gap="sm" align="center">
+                    <Icon
+                      as={session.secure ? ShieldCheck : FileWarning}
+                      size="lg"
+                      tone={session.secure ? "success" : "warning"}
+                      label={session.secure ? "保護された接続" : "確認が必要な接続"}
+                    />
+                    <Flex direction="col">
+                      <Text weight="medium">{session.device}</Text>
+                      {/* A decorative glyph INSIDE 14px text · `sm` puts it on the type's own step. */}
+                      <Text size="xs" tone="muted">
+                        <Icon as={Globe} size="xs" /> {session.detail}
+                      </Text>
+                    </Flex>
+                  </Flex>
+                  <Button variant="outline" size="sm">
+                    <Icon as={session.secure ? Lock : Unlock} size="sm" />
+                    サインアウト
+                  </Button>
+                </Flex>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* ── Every step of the scale ── */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>size · 9段のアイコンスケール</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              {SIZES.map((step) => (
+                <Flex key={step.size} direction="row" gap="md" align="center">
+                  <Flex direction="row" gap="sm" align="center">
+                    <Icon as={Smartphone} size={step.size} />
+                  </Flex>
+                  <Text size="sm" mono>
+                    {step.size}
+                  </Text>
+                  <Text size="sm" tone="muted" mono>
+                    {step.px}
+                  </Text>
+                  <Text size="sm" tone="muted">
+                    {step.note}
+                  </Text>
+                </Flex>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* ── Every tone, beside the Text that shares the vocabulary ── */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>tone · Text と同じ意味の語彙</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              {TONES.map((entry) => (
+                <Flex key={entry.tone} direction="row" gap="sm" align="center">
+                  <Icon as={Check} size="md" tone={entry.tone} />
+                  <Text size="sm" tone={entry.tone}>
+                    {entry.label}
+                  </Text>
+                </Flex>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* ── Where it composes · inside Text, inside a Button, standalone in a link ── */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>合成 · Text の中・Button の中・単独</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex direction="col" gap="xs">
+                <Heading level={3}>Text の中</Heading>
+                <Text size="sm">
+                  請求書は <Icon as={Lock} size="sm" tone="muted" /> 暗号化されて保管されます。
+                </Text>
+              </Flex>
+
+              <Separator />
+
+              <Flex direction="col" gap="xs">
+                <Heading level={3}>Button の中 · 明示した段が Button の既定に勝つ</Heading>
+                <Flex direction="row" gap="sm" align="center">
+                  <Button size="sm">
+                    <Icon as={Download} size="sm" />
+                    書き出す
+                  </Button>
+                  <Button variant="outline">
+                    <Icon as={Download} size="lg" />
+                    大きめのグリフ
+                  </Button>
+                </Flex>
+              </Flex>
+
+              <Separator />
+
+              <Flex direction="col" gap="xs">
+                <Heading level={3}>単独 · 名前を持つグリフ</Heading>
+                <Flex direction="row" gap="sm" align="center">
+                  <Text as="a" href="#icon-standalone" size="sm" tone="primary">
+                    監査ログを開く <Icon as={ArrowUpRight} size="sm" />
+                  </Text>
+                  <Icon as={ShieldCheck} size="md" tone="success" label="二要素認証は有効です" />
+                </Flex>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/layout/flex.tsx

@@ -5,6 +5,7 @@ import {
   CardDescription,
   CardHeader,
   CardTitle,
+  ListRow,
 } from "@godxjp/ui/data-display";
 import { Button, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
@@ -309,6 +310,64 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>marker=&quot;none&quot; · 装飾のない意味的リスト</CardTitle>
+            <CardDescription>
+              as=&quot;ul&quot; は既定で中黒と字下げが付きます。設定メニューのような「行の一覧」では
+              marker=&quot;none&quot; を指定すると、ul と li の意味づけと gap トークンは残したまま、
+              中黒も字下げも消えます。行は ListRow as=&quot;li&quot;
+              で、区切り線は行が自分で描きます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <Flex id="semantic-list" as="ul" marker="none" direction="col" gap="none">
+              <ListRow
+                as="li"
+                title="二要素認証"
+                description="認証アプリ · 有効"
+                trailing={
+                  <Button size="xs" variant="outline">
+                    管理
+                  </Button>
+                }
+              />
+              <ListRow
+                as="li"
+                title="パスキー"
+                description="2 件登録済み"
+                trailing={
+                  <Button size="xs" variant="outline">
+                    管理
+                  </Button>
+                }
+              />
+              <ListRow
+                as="li"
+                title="回復コード"
+                description="未発行"
+                trailing={
+                  <Button size="xs" variant="outline">
+                    発行
+                  </Button>
+                }
+              />
+            </Flex>
+          </CardContent>
+          <CardContent>
+            <Flex id="semantic-list-gap" as="ul" marker="none" gap="sm" wrap>
+              <Flex as="li">
+                <Badge variant="outline">監査ログ</Badge>
+              </Flex>
+              <Flex as="li">
+                <Badge variant="outline">IP 制限</Badge>
+              </Flex>
+              <Flex as="li">
+                <Badge variant="outline">SSO</Badge>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
         <Card>
           <CardHeader>
             <CardTitle level={2}>軽い強調と行アクション</CardTitle>

package/docs/layout/responsive-grid.tsx

@@ -1,11 +1,20 @@
+import { useState } from "react";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
+  ScrollArea,
   StatCard,
 } from "@godxjp/ui/data-display";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@godxjp/ui/data-entry";
 import { Text } from "@godxjp/ui/general";
 import { Flex, PageContainer, ResponsiveGrid, SplitPane } from "@godxjp/ui/layout";
 
@@ -20,7 +29,25 @@ import { Flex, PageContainer, ResponsiveGrid, SplitPane } from "@godxjp/ui/layou
  * recognised collection shape instead of hand-rolling the breakpoint map. Composed only from
  * real @godxjp/ui components.
  */
+const KANBAN_LANES = [
+  { key: "todo", title: "未着手" },
+  { key: "doing", title: "進行中" },
+  { key: "done", title: "完了" },
+] as const;
+
+type KanbanLane = (typeof KANBAN_LANES)[number]["key"];
+
+const KANBAN_TASKS: { id: string; title: string; lane: KanbanLane; priority: string }[] = [
+  { id: "T-101", title: "請求書テンプレートの改訂", lane: "todo", priority: "high" },
+  { id: "T-102", title: "取引先マスタの重複整理", lane: "todo", priority: "medium" },
+  { id: "T-103", title: "月次締めチェックリスト", lane: "doing", priority: "low" },
+];
+
 export default function Demo() {
+  // Kanban: which lane each card is in, moved by native drag and drop.
+  const [tasks, setTasks] = useState(KANBAN_TASKS);
+  const moveTask = (id: string, lane: KanbanLane) =>
+    setTasks((current) => current.map((task) => (task.id === id ? { ...task, lane } : task)));
   return (
     <PageContainer
       title="ResponsiveGrid"
@@ -255,6 +282,79 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>
+              flow=&quot;columns&quot; align=&quot;stretch&quot; · カンバンのレーン
+            </CardTitle>
+            <CardDescription>
+              align=&quot;stretch&quot;（antd Row
+              align）で全レーンが最も高いレーンと同じ高さになり、空の
+              「完了」レーンも全高のドロップ先になる。省略時は columns フローが start、rows フローが
+              stretch のまま。カードはドラッグでき、中の Select
+              はドラッグ画像をカードの外へ広げない。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ScrollArea orientation="horizontal">
+              <ResponsiveGrid flow="columns" align="stretch">
+                {KANBAN_LANES.map((lane) => (
+                  <Card
+                    key={lane.key}
+                    data-lane={lane.key}
+                    onDragOver={(event) => event.preventDefault()}
+                    onDrop={(event) => {
+                      event.preventDefault();
+                      moveTask(event.dataTransfer.getData("text/plain"), lane.key);
+                    }}
+                  >
+                    <CardHeader>
+                      <CardTitle>{lane.title}</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <Flex direction="col" gap="sm">
+                        {tasks
+                          .filter((task) => task.lane === lane.key)
+                          .map((task) => (
+                            <Card
+                              key={task.id}
+                              draggable
+                              data-task={task.id}
+                              onDragStart={(event) =>
+                                event.dataTransfer.setData("text/plain", task.id)
+                              }
+                            >
+                              <CardContent>
+                                <Flex direction="col" gap="xs">
+                                  <Text tone="muted">{task.id}</Text>
+                                  <Text>{task.title}</Text>
+                                  <Select
+                                    aria-label={`${task.id} 優先度`}
+                                    name={`priority-${task.id}`}
+                                    defaultValue={task.priority}
+                                  >
+                                    <SelectTrigger aria-label={`${task.id} 優先度`} size="sm">
+                                      <SelectValue />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                      <SelectItem value="high">高</SelectItem>
+                                      <SelectItem value="medium">中</SelectItem>
+                                      <SelectItem value="low">低</SelectItem>
+                                    </SelectContent>
+                                  </Select>
+                                </Flex>
+                              </CardContent>
+                            </Card>
+                          ))}
+                      </Flex>
+                    </CardContent>
+                  </Card>
+                ))}
+              </ResponsiveGrid>
+            </ScrollArea>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>一覧と補助情報 2:1</CardTitle>