@godxjp/ui 19.3.1 → 19.4.1

package/docs/layout/page-container.tsx

@@ -47,7 +47,7 @@ const TOOLBAR_CHROME_TOKENS = {
 } as CSSProperties;
 
 /**
- * `--page-header-min-block-size-chrome` · クロム帯の「高さ」（gh#331）。文書のヘッダーは中身なりの
+ * `--page-header-min-block-size-chrome` · クロム帯の「高さ」。文書のヘッダーは中身なりの
  * 高さで正しい · 見出しは見出しの高さだからです。クロムは逆で、家具には「ものが中央に収まる帯」が
  * 要ります。既定は `auto`（＝rule #44 の最も静かな状態）なので、このトークンを置くまで DOM も
  * 見え方も従来どおり · 文書ページはそもそもこの規則に一致しません。
@@ -109,7 +109,7 @@ const journalColumns: ColumnDef<JournalEntry>[] = [
  * PageContainer · mandatory page shell.
  * Covers: title/subtitle/status/extra/footer/breadcrumb/linkComponent + variant
  * default/narrow/flush/ghost + density compact/default/comfortable + PageContainer.Inset.
- * The embedded header is the CANONICAL DXS PageHeader (gh#255) — status/meta band included.
+ * The embedded header is the CANONICAL DXS PageHeader — status/meta band included.
  * Each example is standalone (no AppShell) so the variant behaviour is visible in
  * isolation. Composed only from real @godxjp/ui components.
  */
@@ -165,7 +165,7 @@ export default function Demo() {
         </ResponsiveGrid>
       </PageContainer>
 
-      {/* ── 1b. Canonical page-header contract (gh#255) · status/meta band ── */}
+      {/* ── 1b. Canonical page-header contract · status/meta band ── */}
       {/* PageContainer's embedded header IS the DXS PageHeader: breadcrumbs + title +
           subtitle + status/meta + actions + responsive overflow on ONE renderer. The
           `status` band shares the title line at --page-header-status-gap and wraps
@@ -405,7 +405,7 @@ export default function Demo() {
         </Card>
       </PageContainer>
 
-      {/* ── 6. fill · body height behaviour on a tall shell (gh#103) ──
+      {/* ── 6. fill · body height behaviour on a tall shell ──
           Each PageContainer sits in a fixed-height framed box that stands in for the
           viewport-tall app shell, so the two behaviours are visible side by side. */}
       <ResponsiveGrid columns={{ sm: 1, md: 2 }}>
@@ -452,7 +452,7 @@ export default function Demo() {
         </div>
       </ResponsiveGrid>
 
-      {/* ── 7. headerLayout · 390px でヘッダー extra をタイトル行に残す (gh#231) ──
+      {/* ── 7. headerLayout · 390px でヘッダー extra をタイトル行に残す ──
           stack (既定) は 640px 未満で extra を subtitle の下の全幅行に落とす。
           responsive-inline は --page-header-extra-measure (11rem) の測度で
           title 帯の横に残す。640px 以上では両者は同一。
@@ -505,7 +505,7 @@ export default function Demo() {
         </PageContainer>
       </ResponsiveGrid>
 
-      {/* ── 8. measure · ヘッダーとボディを 1 つの測度で束ねる (gh#245 / gh#247) ──
+      {/* ── 8. measure · ヘッダーとボディを 1 つの測度で束ねる ──
           measure は variant（クローム）と直交する第 3 の軸。variant="narrow" は
           .ui-page-body しか絞らないため、ヘッダーのアクションはページ端に取り残される。
           measure はヘッダーとボディの両方を同じトークン測度で絞るので、extra の終端が

package/docs/layout/responsive-grid.tsx

@@ -13,7 +13,7 @@ import { Flex, PageContainer, ResponsiveGrid, SplitPane } from "@godxjp/ui/layou
  * ResponsiveGrid · equal-width multi-column tile grid with automatic responsive
  * collapse (CSS container queries, not viewport). It OWNS its query container
  * (container-type: inline-size), so it responds to the width available to the grid
- * with no external container-type declaration (gh#165). Direct children are typically
+ * with no external container-type declaration. Direct children are typically
  * StatCard (self-contained bordered card · never wrap in Card/CardContent) or
  * Card+CardContent for richer tile bodies. columns accepts a number OR breakpoint
  * object { sm?, md?, lg? } — or use the named `preset` prop (e.g. "pricing-plans") for a
@@ -35,8 +35,8 @@ export default function Demo() {
               列、右の狭いサイドバー（約 20rem）は 1 列に折り返す。ビューポート幅は同一なので、
               折り返しの基準がコンテナ幅であることが分かる。ResponsiveGrid は自身のクエリコンテナ
               （container-type: inline-size）を持つため、外側に @container を用意しなくても正しく
-              折り返す（gh#165）。閾値はコンテナ幅 40 / 48 / 64rem。 列間の gap は
-              var(--space-stack-md) に固定で、prop では変更できない。
+              折り返す。閾値はコンテナ幅 40 / 48 / 64rem。 列間の gap は var(--space-stack-md)
+              に固定で、prop では変更できない。
             </CardDescription>
           </CardHeader>
           <CardContent>
@@ -45,7 +45,7 @@ export default function Demo() {
               aside={
                 <Flex direction="col" gap="sm">
                   <Text tone="muted">狭いコンテナ（約 20rem）→ sm=1 列</Text>
-                  {/* No wrapping `@container` needed — ResponsiveGrid OWNS its query container (gh#165). */}
+                  {/* No wrapping `@container` needed — ResponsiveGrid OWNS its query container. */}
                   <ResponsiveGrid columns={4}>
                     <StatCard label="今日の入金" value="¥420,000" />
                     <StatCard label="未処理" value="6 件" />
@@ -72,7 +72,7 @@ export default function Demo() {
             <CardDescription>
               固定幅の親の中でも、同じ columns=&#123;4&#125; が親幅で列数を変える。親には
               container-type を付けていない。ResponsiveGrid が自身のスコープでクエリするため、
-              外側にコンテナ宣言がなくても 1 列に潰れない（gh#165）。
+              外側にコンテナ宣言がなくても 1 列に潰れない。
             </CardDescription>
           </CardHeader>
           <CardContent>

package/docs/layout/separator.tsx

@@ -19,7 +19,7 @@ import { Flex, PageContainer, Separator } from "@godxjp/ui/layout";
  * defaults to true · set false only when the divider carries semantic meaning for
  * a11y.
  *
- * gh#308 — `label` INTERRUPTS the rule: a message stream's day divider, a "new messages"
+ * `label` INTERRUPTS the rule: a message stream's day divider, a "new messages"
  * watermark, an auth conjunction. A labelled rule flips `decorative` to false, so it is a real
  * role="separator" NAMED by the label (the visible node is aria-hidden, so the string is announced
  * exactly once). `labelAlign` is a controlled vocabulary value — start | center | end, logical, so
@@ -172,7 +172,7 @@ export default function Demo() {
           </CardContent>
         </Card>
 
-        {/* ── gh#308 — the real screen the labelled rule exists for ─────────────────────────── */}
+        {/* ── — the real screen the labelled rule exists for ─────────────────────────── */}
         <Card>
           <CardHeader>
             <CardTitle level={2}>実画面 · チャンネルの投稿ストリーム</CardTitle>

package/docs/layout/service-role-panel.tsx

@@ -1,5 +1,5 @@
 /**
- * ServiceRolePanel — ロール一覧 ⇄ 詳細 (canonical master-detail roles surface, gh#257).
+ * ServiceRolePanel — ロール一覧 ⇄ 詳細 (canonical master-detail roles surface).
  *
  * MasterDetail (rail=master) underneath owns all geometry: two tracks at 1440/1024, stacked
  * list-then-detail at 390. The panel adds selection (aria-current rows), locked system roles,

package/docs/layout/sidebar.tsx

@@ -127,7 +127,7 @@ const MENTION_SECTIONS: SidebarSectionProp[] = [
 ];
 
 /**
- * gh#228 · nav row and nav icon read SEPARATE colour tokens. A service normally sets these once in
+ * nav row and nav icon read SEPARATE colour tokens. A service normally sets these once in
  * its theme.css (`:root` or a scoped `[data-tenant] .app-sidebar`); here they are scoped to one
  * demo frame so the default rail can sit next to the themed one. Icons only — geometry (16px icon,
  * 32px row, 10px gap) is untouched.
@@ -138,7 +138,7 @@ const CANONICAL_NAV_TOKENS = {
 } as CSSProperties;
 
 /**
- * gh#213 · THE router-link contract. `createSidebarLink` adapts any router `Link` — React Router /
+ * THE router-link contract. `createSidebarLink` adapts any router `Link` — React Router /
  * TanStack use `to`, Inertia and Next.js use `href` (the default, and
  * `inertiaSidebarLink(Link)` from `@godxjp/ui/inertia` is the same thing pre-bound). The consumer
  * writes NO row markup: the Sidebar composes the icon slot, the label, the badge, the active state
@@ -171,7 +171,7 @@ const ROUTED_SECTIONS: SidebarSectionProp[] = [
 ];
 
 /**
- * renderItem · DEPRECATED (gh#213) — kept working for existing consumers. It leaves the row CONTENT
+ * renderItem · DEPRECATED — kept working for existing consumers. It leaves the row CONTENT
  * to the caller, which is how a `<Link>{item.label}</Link>` silently dropped every icon in
  * production. `rowProps` now carries the library-composed `children`, so spreading it (or rendering
  * `rowProps.children`) restores the canonical row; the star is a decorative, non-interactive affix.
@@ -346,7 +346,7 @@ export default function Demo() {
             </CardContent>
           </Card>
 
-          {/* linkComponent prop · THE router-link contract (gh#213) — library composes the row. */}
+          {/* linkComponent prop · THE router-link contract — library composes the row. */}
           <Card>
             <CardHeader>
               <CardTitle level={2}>linkComponent プロップ（ルーターリンク）</CardTitle>
@@ -395,14 +395,14 @@ export default function Demo() {
             </CardContent>
           </Card>
 
-          {/* renderItem prop · DEPRECATED escape hatch (gh#213) — kept for back-compat. */}
+          {/* renderItem prop · DEPRECATED escape hatch — kept for back-compat. */}
           <Card>
             <CardHeader>
               <CardTitle level={2}>renderItem プロップ（非推奨）</CardTitle>
               <CardDescription>
                 行の中身まで利用側が書く旧エスケープハッチ。これが原因で
                 <code>&lt;Link&gt;{"{item.label}"}&lt;/Link&gt;</code>
-                がアイコンを全て落とす回帰が発生しました（gh#213）。 現在は rowProps.children
+                がアイコンを全て落とす回帰が発生しました。 現在は rowProps.children
                 にライブラリ製の行内容が入るので、それを描画すれば 正規の行が復元されます（ここでは
                 その右にお気に入りスターを添えています）。 新規コードでは linkComponent か
                 SidebarItem asChild を使ってください。
@@ -436,7 +436,7 @@ export default function Demo() {
                 sections を使わず SidebarSection / SidebarItem を直接組み立てて、
                 ナビゲーション全体を 自前で構成します。右は同じ構成に SidebarItem の asChild
                 を足したものです。子として ルーターの Link
-                を「要素だけ」渡すと、アイコン・ラベル・バッジは ライブラリが差し込みます（gh#213。
+                を「要素だけ」渡すと、アイコン・ラベル・バッジは ライブラリが差し込みます（。
                 children は書きません）。
               </CardDescription>
             </CardHeader>
@@ -526,7 +526,7 @@ export default function Demo() {
             </CardContent>
           </Card>
 
-          {/* Nav colour tokens · icon and label are themed SEPARATELY (gh#228). */}
+          {/* Nav colour tokens · icon and label are themed SEPARATELY. */}
           <Card>
             <CardHeader>
               <CardTitle level={2}>ナビの配色トークン（アイコンとラベルを別々に）</CardTitle>
@@ -590,7 +590,7 @@ export default function Demo() {
                   "badgeTone で未読（neutral）と自分宛て（destructive）を色だけで区別",
                   "disabled=true で項目を非活性化（クリック不可）",
                   "footer prop でスクロール外にユーザー情報を固定",
-                  "linkComponent · ルーター Link は「要素だけ」渡す。行の中身はライブラリが組み立てる（gh#213）",
+                  "linkComponent · ルーター Link は「要素だけ」渡す。行の中身はライブラリが組み立てる",
                   "linkComponent は葉・サブメニュー・折りたたみレール・フライアウトの全てに適用される",
                   "グループのトリガーは aria-expanded を持つ開閉ボタンのままなので linkComponent は適用されない",
                 ].map((note) => (

package/docs/layout/split-pane.tsx

@@ -17,7 +17,7 @@ import { FileText, Building2, Calendar, CreditCard, ArrowRight } from "lucide-re
  * Shows: main list + detail panel, asideWidth sm/md, nested inside PageContainer.
  * It OWNS its query container (container-type: inline-size), so the two-column split
  * is chosen from the PANE's own width (≥48rem), not the viewport — a narrow embedded
- * pane on a large screen correctly stays single-column (gh#165).
+ * pane on a large screen correctly stays single-column.
  * Composed only from real @godxjp/ui components.
  *
  * NOTE: <Flex> defaults to direction="row"; vertical stacks set direction="col"
@@ -302,8 +302,8 @@ export default function Demo() {
                   </Text>
                   <Text as="p" tone="muted">
                     パネル自身の幅が 48rem 未満になると縦積みにフォールバックします
-                    （ビューポートではなくコンテナ基準 · gh#165）。
-                    常にサイドバイサイドが必要な場合は CSS Grid を使用してください。
+                    （ビューポートではなくコンテナ基準）。 常にサイドバイサイドが必要な場合は CSS
+                    Grid を使用してください。
                   </Text>
                 </Flex>
               </CardContent>
@@ -410,9 +410,8 @@ export default function Demo() {
           <CardHeader>
             <CardTitle level={2}>Container stress · narrow vs wide embed</CardTitle>
             <CardDescription>
-              大きな viewport 内でも、パネル自身の幅で分割が決まる（gh#165）。狭い埋め込み（約
-              28rem）は 1 カラムに潰れ、広い埋め込み（約 56rem）は 2 カラムに分割する。ビューポート
-              幅は同一。
+              大きな viewport 内でも、パネル自身の幅で分割が決まる。狭い埋め込み（約 28rem）は 1
+              カラムに潰れ、広い埋め込み（約 56rem）は 2 カラムに分割する。ビューポート 幅は同一。
             </CardDescription>
           </CardHeader>
           <CardContent>

package/docs/layout/topbar.tsx

@@ -37,10 +37,7 @@ import {
 
 /**
  * Topbar · a PURE SLOT bar. The shell only positions `start` / `center` / `end`; the CONSUMER
- * composes every control. This demo builds the chrome the OLD baked Topbar used to force ·
- * sidebar toggle, brand mark (Avatar), an entity switcher, a search trigger, a notifications button, a
- * user menu · entirely from real primitives, so you can see there is no hidden template (and no
- * dead dropdown: a control exists ONLY because it's placed here).
+ * composes every control.
  */
 const SECTIONS: SidebarSectionProp[] = [
   {
@@ -153,10 +150,7 @@ export default function Demo() {
   // end · notifications + user menu, both consumer-composed.
   const end = (
     <>
-      {/* The end slot is `flex: 0 0 auto` — whatever sits here is taken out of the start slot's
-          budget before it gets a say. At 320 this environment chip alone claimed 93 of the bar's
-          198px, squeezing start to 25px and clipping the entity switcher inside it. An ambient
-          status label is the first thing a compact bar drops, so it appears from sm up. */}
+      {}
       <Badge tone="warning" className="text-xs">
         ステージング
       </Badge>

package/docs/navigation/context-menu.tsx

@@ -48,7 +48,12 @@ export default function Demo() {
           <CardContent>
             <ContextMenu>
               {/* ui-audit-disable-next-line no-hand-rolled-surface — the dashed area is the right-click target the demo asks you to use */}
-              <ContextMenuTrigger className="border-border h-36 w-full cursor-context-menu rounded-md border border-dashed">
+              {/* data-axe-open="contextmenu": check-frame-axe right-clicks here before its
+                  overlay scan. */}
+              <ContextMenuTrigger
+                data-axe-open="contextmenu"
+                className="border-border h-36 w-full cursor-context-menu rounded-md border border-dashed"
+              >
                 <Flex align="center" justify="center" gap="xs">
                   <Text tone="muted">ここを右クリックしてください</Text>
                 </Flex>

package/docs/navigation/dropdown-menu.tsx

@@ -52,7 +52,8 @@ export default function Demo() {
               <Text>JE-0042 · 売上計上 ¥480,000</Text>
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" size="icon-sm" aria-label="行アクション">
+                  {/* data-axe-open: opened by check-frame-axe before its overlay scan. */}
+                  <Button data-axe-open variant="ghost" size="icon-sm" aria-label="行アクション">
                     <MoreHorizontal />
                   </Button>
                 </DropdownMenuTrigger>

package/docs/navigation/filter-bar.tsx

@@ -39,7 +39,7 @@ export default function Demo() {
   const [period, setPeriod] = useState("all");
   const hasActiveFilters = query !== "" || status !== "all";
 
-  // Typed model (gh#258) — ALL state is consumer data; the bar only renders it.
+  // Typed model — ALL state is consumer data; the bar only renders it.
   const [modelQuery, setModelQuery] = useState("田中");
   const [modelStatus, setModelStatus] = useState("active");
   const [modelRole, setModelRole] = useState("");
@@ -80,7 +80,7 @@ export default function Demo() {
       subtitle="Search, labelled filters, active state, consumer-owned reset, and both responsive overflow strategies"
     >
       <Flex direction="col" gap="lg">
-        {/* Typed model (gh#258) — search/filters/chips/reset/result-count/actions as DATA.
+        {/* Typed model — search/filters/chips/reset/result-count/actions as DATA.
             The bar owns layout, token widths, chip lifecycle and keyboard order; the page owns
             every piece of state. Remove a chip, reset, or pick a filter and watch the chips row
             and the localized result count follow. */}

package/docs/navigation/pagination.tsx

@@ -97,7 +97,7 @@ export default function Demo() {
           onValueChange={handleChange}
         />
 
-        {/* Regression: total=0, exactly one page, multiple pages, + the single-page opt-in (gh#153). */}
+        {/* Regression: total=0, exactly one page, multiple pages, + the single-page opt-in. */}
         <Card>
           <CardHeader>
             <CardTitle level={2}>境界状態 · 0 件 / 1 ページ / 複数ページ</CardTitle>
@@ -136,7 +136,7 @@ export default function Demo() {
           </CardContent>
         </Card>
 
-        {/* Long localized total label — the row stays ONE line and never wraps on desktop (gh#153). */}
+        {/* Long localized total label — the row stays ONE line and never wraps on desktop. */}
         <Card>
           <CardHeader>
             <CardTitle level={2}>長いローカライズ済みラベル · 折り返さない</CardTitle>

package/docs/navigation/steps.tsx

@@ -229,7 +229,7 @@ export default function Demo() {
           </CardContent>
         </Card>
 
-        {/* Inline row — the hosted-identity / device progression (gh#12) */}
+        {/* Inline row — the hosted-identity / device progression */}
         <Card>
           <CardHeader>
             <CardTitle level={2}>

package/docs/navigation/tabs.tsx

@@ -67,13 +67,13 @@ export default function Demo() {
           </CardContent>
         </Card>
 
-        {/* Disabled first item — fallback selection must skip it (gh#175) */}
+        {/* Disabled first item — fallback selection must skip it */}
         <Card>
           <CardHeader>
             <CardTitle level={2}>先頭タブが disabled · フォールバック選択</CardTitle>
             <CardDescription>
               defaultValue/value を渡さない場合、Tabs は先頭の ENABLED タブを自動選択する(disabled
-              の先頭タブは選ばない)。全タブが disabled の場合は何も選択しない (gh#175)。
+              の先頭タブは選ばない)。全タブが disabled の場合は何も選択しない。
             </CardDescription>
           </CardHeader>
           <CardContent>
@@ -106,7 +106,7 @@ export default function Demo() {
             <CardTitle level={2}>320px stress · 長いローカライズラベル</CardTitle>
             <CardDescription>
               狭いコンテナでも長いラベルはクリップされず、水平タブリストが自身でスクロールする
-              (gh#175)。compact navigation への変換は Tabs API に存在しないため擬似実装しない —
+              。compact navigation への変換は Tabs API に存在しないため擬似実装しない —
               スクロールが意図した縮退動作。
             </CardDescription>
           </CardHeader>

package/docs/showcase/acme-portal.tsx

@@ -50,6 +50,7 @@ import {
   CardContent,
   CardHeader,
   CardTitle,
+  ListRow,
   Progress,
   StatCard,
   Table,
@@ -353,27 +354,25 @@ export default function AcmePortalShowcase() {
                 <CardContent flush>
                   <ul className="divide-border divide-y">
                     {QUEUE.map((q) => (
-                      <li key={q.title} className="px-4 py-3">
-                        <Flex align="center" gap="md">
+                      <ListRow
+                        as="li"
+                        key={q.title}
+                        leading={
                           <Badge
                             tone={q.tone}
                             variant="outline"
                             icon={q.icon}
                             aria-label={q.title}
                           />
-                          <div className="min-w-0 flex-1">
-                            <Text as="div" size="sm" weight="medium" truncate>
-                              {q.title}
-                            </Text>
-                            <Text as="div" size="xs" tone="muted" truncate>
-                              {q.meta}
-                            </Text>
-                          </div>
+                        }
+                        title={q.title}
+                        description={q.meta}
+                        trailing={
                           <Button variant="outline" size="sm">
                             {q.action}
                           </Button>
-                        </Flex>
-                      </li>
+                        }
+                      />
                     ))}
                   </ul>
                 </CardContent>

package/docs/showcase/acme-website.tsx

@@ -237,7 +237,7 @@ function SectionHead({
   center?: boolean;
 }) {
   return (
-    <div className={center ? "mx-auto mb-10 text-center" : "mb-8"}>
+    <div className={center ? "mx-auto text-center" : undefined}>
       <div className="tx-eyebrow">{eyebrow}</div>
       <h2 className="tx-h2">{title}</h2>
       {sub ? <p className="tx-lead mx-auto">{sub}</p> : null}
@@ -272,7 +272,7 @@ function Services() {
   ];
   return (
     <section className="bg-card tx-section">
-      <div className={SHELL}>
+      <Flex direction="col" gap="xl" className={SHELL}>
         <SectionHead
           center
           eyebrow="Dịch vụ"
@@ -296,7 +296,7 @@ function Services() {
             </Card>
           ))}
         </ResponsiveGrid>
-      </div>
+      </Flex>
     </section>
   );
 }
@@ -310,7 +310,7 @@ function Steps() {
   ];
   return (
     <section className="bg-background tx-section">
-      <div className={SHELL}>
+      <Flex direction="col" gap="xl" className={SHELL}>
         <SectionHead eyebrow="Quy trình" title="Mua hàng quốc tế trong 4 bước" />
         <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 4 }}>
           {steps.map(([Icon, t, d], i) => (
@@ -332,7 +332,7 @@ function Steps() {
             </Flex>
           ))}
         </ResponsiveGrid>
-      </div>
+      </Flex>
     </section>
   );
 }
@@ -346,7 +346,7 @@ function Routes() {
   ];
   return (
     <section className="bg-card tx-section">
-      <div className={SHELL}>
+      <Flex direction="col" gap="xl" className={SHELL}>
         <SectionHead eyebrow="Tuyến vận chuyển" title="Giá cước rõ ràng theo từng tuyến" />
         <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 4 }}>
           {routes.map(([c, code, mode, price]) => (
@@ -370,7 +370,7 @@ function Routes() {
             </Card>
           ))}
         </ResponsiveGrid>
-      </div>
+      </Flex>
     </section>
   );
 }

package/docs/showcase/case1-warehouse-dashboard.tsx

@@ -43,6 +43,7 @@ import {
   CardContent,
   CardHeader,
   CardTitle,
+  ListRow,
   Progress,
   StatCard,
   Table,
@@ -241,27 +242,25 @@ export default function WarehouseDashboardShowcase() {
                 <ul className="divide-border divide-y">
                   {QUEUE.map((q) => {
                     return (
-                      <li key={q.title} className="px-4 py-3">
-                        <Flex align="center" gap="md">
+                      <ListRow
+                        as="li"
+                        key={q.title}
+                        leading={
                           <Badge
                             tone={q.tone}
                             variant="outline"
                             icon={q.icon}
                             aria-label={q.title}
                           />
-                          <div className="min-w-0 flex-1">
-                            <Text as="div" size="sm" weight="medium" truncate>
-                              {q.title}
-                            </Text>
-                            <Text as="div" size="2xs" tone="muted" truncate>
-                              {q.meta}
-                            </Text>
-                          </div>
+                        }
+                        title={q.title}
+                        description={q.meta}
+                        trailing={
                           <Button variant="outline" size="sm">
                             {q.action}
                           </Button>
-                        </Flex>
-                      </li>
+                        }
+                      />
                     );
                   })}
                 </ul>

package/docs/showcase/case2-employee-me.tsx

@@ -44,6 +44,7 @@ import {
   CardContent,
   CardHeader,
   CardTitle,
+  Descriptions,
   StatCard,
   Table,
   TableBody,
@@ -58,6 +59,7 @@ import {
   Flex,
   PageContainer,
   ResponsiveGrid,
+  Separator,
   Sidebar,
   type SidebarSectionProp,
 } from "@godxjp/ui/layout";
@@ -228,7 +230,8 @@ function PunchCard() {
           </Flex>
 
           {/* Demo state stepper — lets a reader walk every FSM state at rest. */}
-          <Flex direction="row" wrap gap="xs" className="border-t pt-3">
+          <Separator />
+          <Flex direction="row" wrap gap="xs">
             <Text size="2xs" tone="muted" className="self-center">
               状態:
             </Text>
@@ -415,25 +418,16 @@ export default function EmployeeMeShowcase() {
                   本日のサマリー · Hôm nay
                 </CardTitle>
               </CardHeader>
-              <CardContent flush>
-                <dl className="divide-border divide-y">
+              <CardContent>
+                <Descriptions columns={1} layout="horizontal" labelAlign="start">
                   {SUMMARY.map((s) => (
-                    <Flex
-                      key={s.label}
-                      align="center"
-                      justify="between"
-                      gap="md"
-                      className="px-4 py-2.5"
-                    >
-                      <Text as="dt" size="sm" tone="muted" className="whitespace-nowrap">
-                        {s.label}
-                      </Text>
-                      <Text as="dd" size="sm" weight="medium" align="end" tabular>
+                    <Descriptions.Item key={s.label} label={s.label}>
+                      <Text size="sm" weight="medium" tabular>
                         {s.value}
                       </Text>
-                    </Flex>
+                    </Descriptions.Item>
                   ))}
-                </dl>
+                </Descriptions>
               </CardContent>
             </Card>
           </ResponsiveGrid>