@godxjp/ui 19.2.0 → 19.4.0

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,12 +405,13 @@ 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 }}>
         {/* Default: top-packed. Short content does NOT stretch · the space below is
             just neutral page background, never a jarring void. */}
+        {/* ui-audit-disable-next-line no-hand-rolled-surface — a bounded viewport so the page-level scroll behaviour is visible in a docs page — a frame around the demo, not product chrome */}
         <div className="h-80 overflow-auto rounded-md border">
           <PageContainer title="既定（top-pack）" subtitle="fill なし · 余白は中立な背景">
             <Card>
@@ -424,6 +425,7 @@ export default function Demo() {
         </div>
 
         {/* fill: body grows to fill the shell; the composer footer pins to the bottom. */}
+        {/* ui-audit-disable-next-line no-hand-rolled-surface — a bounded viewport so the page-level scroll behaviour is visible in a docs page — a frame around the demo, not product chrome */}
         <div className="h-80 overflow-auto rounded-md border">
           <PageContainer
             fill
@@ -450,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 以上では両者は同一。
@@ -503,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 の終端が
@@ -603,6 +605,7 @@ export default function Demo() {
           帯の内側（--page-toolbar-pad-block）だけ。 */}
       <ResponsiveGrid columns={{ sm: 1, md: 2 }}>
         {/* fill · 帯は固定、トランスクリプトだけがその下でスクロールする（帯の下に潜り込まない）。 */}
+        {/* ui-audit-disable-next-line no-hand-rolled-surface — a bounded viewport so the page-level scroll behaviour is visible in a docs page — a frame around the demo, not product chrome */}
         <div className="h-80 overflow-auto rounded-md border">
           <PageContainer
             fill
@@ -739,6 +742,7 @@ export default function Demo() {
             footer の上罫線も --page-footer-divider で消せます · 入力欄が自前で枠を持つ Card の
             場合、全幅の罫線がその真上に重なって 2 本目の線になるためです。既定は「引く」のまま
             （フォームの保存／取消バーはこの線で本文と分かれる）。 */}
+        {/* ui-audit-disable-next-line no-hand-rolled-surface — a bounded viewport so the page-level scroll behaviour is visible in a docs page — a frame around the demo, not product chrome */}
         <div className="h-80 overflow-auto rounded-md border">
           <PageContainer
             fill
@@ -803,6 +807,7 @@ export default function Demo() {
           テナントごとの再テーマも効かなくなるためです。帯を塗るなら内側の余白も一緒に
           （--page-toolbar-pad-block）· 既定の 0 は「透明な帯には内側がない」ことに由来します。 */}
       <ResponsiveGrid columns={{ sm: 1, md: 2 }}>
+        {/* ui-audit-disable-next-line no-hand-rolled-surface — a bounded viewport so the page-level scroll behaviour is visible in a docs page — a frame around the demo, not product chrome */}
         <div className="h-80 overflow-auto rounded-md border">
           <PageContainer
             fill
@@ -837,6 +842,7 @@ export default function Demo() {
           </PageContainer>
         </div>
 
+        {/* ui-audit-disable-next-line no-hand-rolled-surface — a bounded viewport so the page-level scroll behaviour is visible in a docs page — a frame around the demo, not product chrome */}
         <div className="h-80 overflow-auto rounded-md border" style={TOOLBAR_CHROME_TOKENS}>
           <PageContainer
             fill
@@ -859,7 +865,7 @@ export default function Demo() {
               {[
                 "帯がカード面に乗り、本文から分離して読めます。",
                 "塗った帯には内側の余白が要るので pad-block も同じテーマで指定します。",
-                "呼び出し側の bg-card / py-1.5 は不要 · どちらもトークンの仕事です。",
+                "呼び出し側で背景色や上下の余白を足す必要はありません · どちらもトークンの仕事です。",
               ].map((message) => (
                 <Card key={message}>
                   <CardContent>
@@ -881,6 +887,7 @@ export default function Demo() {
           --app-shell-bar-height にすると帯は 48px に固定され、タイトル列も extra も帯の中心
           （y=24）に載ります。min なので、より背の高い extra は今までどおり収まります。 */}
       <ResponsiveGrid columns={{ sm: 1, md: 2 }}>
+        {/* ui-audit-disable-next-line no-hand-rolled-surface — a bounded viewport so the page-level scroll behaviour is visible in a docs page — a frame around the demo, not product chrome */}
         <div className="h-80 overflow-auto rounded-md border">
           <PageContainer
             fill
@@ -911,6 +918,7 @@ export default function Demo() {
           </PageContainer>
         </div>
 
+        {/* ui-audit-disable-next-line no-hand-rolled-surface — a bounded viewport so the page-level scroll behaviour is visible in a docs page — a frame around the demo, not product chrome */}
         <div className="h-80 overflow-auto rounded-md border" style={CHROME_BAND_TOKENS}>
           <PageContainer
             fill

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
@@ -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 件" />
@@ -78,10 +78,18 @@ export default function Demo() {
           <CardContent>
             <Flex direction="col" gap="md">
               {["max-w-80", "max-w-3xl"].map((width) => (
-                <div key={width} className={`${width} border p-2`}>
+                <div
+                  key={width}
+                  className={width}
+                  style={{ border: "1px solid hsl(var(--border))", padding: "var(--space-2)" }}
+                >
                   <ResponsiveGrid columns={4}>
                     {Array.from({ length: 4 }, (_, index) => (
-                      <div key={index} className="bg-muted rounded p-3 text-center">
+                      <div
+                        key={index}
+                        className="bg-muted rounded text-center"
+                        style={{ padding: "var(--space-3)" }}
+                      >
                         {index + 1}
                       </div>
                     ))}

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

@@ -13,14 +13,14 @@ import {
 } from "@godxjp/ui/layout";
 import type { SidebarItemData, SidebarRenderItemProp, SidebarSectionProp } from "@godxjp/ui/layout";
 import {
+  Avatar,
+  AvatarFallback,
+  Badge,
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-  Badge,
-  Avatar,
-  AvatarFallback,
 } from "@godxjp/ui/data-display";
 import { Button, Text } from "@godxjp/ui/general";
 import {
@@ -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.
@@ -313,34 +313,40 @@ export default function Demo() {
               </CardDescription>
             </CardHeader>
             <CardContent>
-              <Flex direction="col" className="bg-card h-80 w-64 overflow-hidden rounded-lg border">
-                <Sidebar
-                  ariaLabel="ブランド例のナビゲーション"
-                  activeId={brandActiveId}
-                  onSelect={setBrandActiveId}
-                  sections={BRAND_SECTIONS}
-                  aria-label="brand プロップ例のナビゲーション"
-                  brand={
-                    <SidebarHeader>
-                      <span className="bg-primary text-primary-foreground grid size-7 shrink-0 place-items-center rounded-md">
-                        <Boxes className="size-4" aria-hidden="true" />
-                      </span>
-                      <span className="flex min-w-0 flex-col">
-                        <Text weight="bold" truncate>
-                          Acme Suite
-                        </Text>
-                        <Text size="xs" tone="muted" truncate>
-                          v7.0 Enterprise
-                        </Text>
-                      </span>
-                    </SidebarHeader>
-                  }
-                />
-              </Flex>
+              <Card className="h-80 w-64 overflow-hidden">
+                <CardContent flush>
+                  <Flex direction="col">
+                    <Sidebar
+                      ariaLabel="ブランド例のナビゲーション"
+                      activeId={brandActiveId}
+                      onSelect={setBrandActiveId}
+                      sections={BRAND_SECTIONS}
+                      aria-label="brand プロップ例のナビゲーション"
+                      brand={
+                        <SidebarHeader>
+                          <Avatar className="size-7 shrink-0 rounded-md">
+                            <AvatarFallback className="bg-primary text-primary-foreground">
+                              <Boxes className="size-4" aria-hidden="true" />
+                            </AvatarFallback>
+                          </Avatar>
+                          <Flex direction="col" gap="xs" className="min-w-0">
+                            <Text weight="bold" truncate>
+                              Acme Suite
+                            </Text>
+                            <Text size="xs" tone="muted" truncate>
+                              v7.0 Enterprise
+                            </Text>
+                          </Flex>
+                        </SidebarHeader>
+                      }
+                    />
+                  </Flex>
+                </CardContent>
+              </Card>
             </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>
@@ -356,38 +362,40 @@ export default function Demo() {
             </CardHeader>
             <CardContent>
               <Flex gap="md" wrap>
-                <Flex
-                  direction="col"
-                  className="bg-card h-72 w-64 overflow-hidden rounded-lg border"
-                >
-                  <Sidebar
-                    ariaLabel="ルーターリンク行のナビゲーション"
-                    activeId={routedActiveId}
-                    onSelect={setRoutedActiveId}
-                    sections={ROUTED_SECTIONS}
-                    linkComponent={RouterLink}
-                    aria-label="linkComponent プロップ例のナビゲーション（展開）"
-                  />
-                </Flex>
-                <Flex
-                  direction="col"
-                  className="bg-card h-72 w-16 overflow-hidden rounded-lg border"
-                >
-                  <Sidebar
-                    ariaLabel="折りたたみレールのルーターリンク"
-                    activeId={routedActiveId}
-                    onSelect={setRoutedActiveId}
-                    sections={ROUTED_SECTIONS}
-                    linkComponent={RouterLink}
-                    collapsed
-                    aria-label="linkComponent プロップ例のナビゲーション（折りたたみ）"
-                  />
-                </Flex>
+                <Card className="h-72 w-64 overflow-hidden">
+                  <CardContent flush>
+                    <Flex direction="col">
+                      <Sidebar
+                        ariaLabel="ルーターリンク行のナビゲーション"
+                        activeId={routedActiveId}
+                        onSelect={setRoutedActiveId}
+                        sections={ROUTED_SECTIONS}
+                        linkComponent={RouterLink}
+                        aria-label="linkComponent プロップ例のナビゲーション（展開）"
+                      />
+                    </Flex>
+                  </CardContent>
+                </Card>
+                <Card className="h-72 w-16 overflow-hidden">
+                  <CardContent flush>
+                    <Flex direction="col">
+                      <Sidebar
+                        ariaLabel="折りたたみレールのルーターリンク"
+                        activeId={routedActiveId}
+                        onSelect={setRoutedActiveId}
+                        sections={ROUTED_SECTIONS}
+                        linkComponent={RouterLink}
+                        collapsed
+                        aria-label="linkComponent プロップ例のナビゲーション（折りたたみ）"
+                      />
+                    </Flex>
+                  </CardContent>
+                </Card>
               </Flex>
             </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>
@@ -401,18 +409,22 @@ export default function Demo() {
               </CardDescription>
             </CardHeader>
             <CardContent>
-              <Flex direction="col" className="bg-card h-72 w-64 overflow-hidden rounded-lg border">
-                <Sidebar
-                  ariaLabel="カスタム行例のナビゲーション"
-                  activeId={renderActiveId}
-                  onSelect={setRenderActiveId}
-                  sections={FAVOURITE_SECTIONS}
-                  renderItem={(item, rowProps) =>
-                    renderFavouriteRow(item, rowProps, setRenderActiveId)
-                  }
-                  aria-label="renderItem プロップ例のナビゲーション"
-                />
-              </Flex>
+              <Card className="h-72 w-64 overflow-hidden">
+                <CardContent flush>
+                  <Flex direction="col">
+                    <Sidebar
+                      ariaLabel="カスタム行例のナビゲーション"
+                      activeId={renderActiveId}
+                      onSelect={setRenderActiveId}
+                      sections={FAVOURITE_SECTIONS}
+                      renderItem={(item, rowProps) =>
+                        renderFavouriteRow(item, rowProps, setRenderActiveId)
+                      }
+                      aria-label="renderItem プロップ例のナビゲーション"
+                    />
+                  </Flex>
+                </CardContent>
+              </Card>
             </CardContent>
           </Card>
 
@@ -430,52 +442,54 @@ export default function Demo() {
             </CardHeader>
             <CardContent>
               <Flex gap="md" wrap>
-                <Flex
-                  direction="col"
-                  className="bg-card h-64 w-64 overflow-hidden rounded-lg border"
-                >
-                  <Sidebar
-                    ariaLabel="構成可能な例のナビゲーション"
-                    activeId={composedActiveId}
-                    onSelect={setComposedActiveId}
-                  >
-                    <SidebarSection label="お気に入り">
-                      {COMPOSED_ITEMS.map((item) => (
-                        <SidebarItem
-                          key={item.id}
-                          item={item}
-                          active={composedActiveId === item.id}
-                          onActivate={setComposedActiveId}
-                        />
-                      ))}
-                    </SidebarSection>
-                  </Sidebar>
-                </Flex>
-                <Flex
-                  direction="col"
-                  className="bg-card h-64 w-64 overflow-hidden rounded-lg border"
-                >
-                  <Sidebar
-                    ariaLabel="asChild 例のナビゲーション"
-                    activeId={composedActiveId}
-                    onSelect={setComposedActiveId}
-                    aria-label="SidebarItem asChild 例のナビゲーション"
-                  >
-                    <SidebarSection label="お気に入り（asChild）">
-                      {COMPOSED_ITEMS.map((item) => (
-                        <SidebarItem
-                          key={item.id}
-                          item={item}
-                          active={composedActiveId === item.id}
-                          onActivate={setComposedActiveId}
-                          asChild
-                        >
-                          <Link to={item.href ?? "/"} />
-                        </SidebarItem>
-                      ))}
-                    </SidebarSection>
-                  </Sidebar>
-                </Flex>
+                <Card className="h-64 w-64 overflow-hidden">
+                  <CardContent flush>
+                    <Flex direction="col">
+                      <Sidebar
+                        ariaLabel="構成可能な例のナビゲーション"
+                        activeId={composedActiveId}
+                        onSelect={setComposedActiveId}
+                      >
+                        <SidebarSection label="お気に入り">
+                          {COMPOSED_ITEMS.map((item) => (
+                            <SidebarItem
+                              key={item.id}
+                              item={item}
+                              active={composedActiveId === item.id}
+                              onActivate={setComposedActiveId}
+                            />
+                          ))}
+                        </SidebarSection>
+                      </Sidebar>
+                    </Flex>
+                  </CardContent>
+                </Card>
+                <Card className="h-64 w-64 overflow-hidden">
+                  <CardContent flush>
+                    <Flex direction="col">
+                      <Sidebar
+                        ariaLabel="asChild 例のナビゲーション"
+                        activeId={composedActiveId}
+                        onSelect={setComposedActiveId}
+                        aria-label="SidebarItem asChild 例のナビゲーション"
+                      >
+                        <SidebarSection label="お気に入り（asChild）">
+                          {COMPOSED_ITEMS.map((item) => (
+                            <SidebarItem
+                              key={item.id}
+                              item={item}
+                              active={composedActiveId === item.id}
+                              onActivate={setComposedActiveId}
+                              asChild
+                            >
+                              <Link to={item.href ?? "/"} />
+                            </SidebarItem>
+                          ))}
+                        </SidebarSection>
+                      </Sidebar>
+                    </Flex>
+                  </CardContent>
+                </Card>
               </Flex>
             </CardContent>
           </Card>
@@ -496,19 +510,23 @@ export default function Demo() {
               </CardDescription>
             </CardHeader>
             <CardContent>
-              <Flex direction="col" className="bg-card h-64 w-64 overflow-hidden rounded-lg border">
-                <Sidebar
-                  ariaLabel="チャンネル一覧のナビゲーション"
-                  activeId={mentionActiveId}
-                  onSelect={setMentionActiveId}
-                  sections={MENTION_SECTIONS}
-                  aria-label="badgeTone 例のナビゲーション"
-                />
-              </Flex>
+              <Card className="h-64 w-64 overflow-hidden">
+                <CardContent flush>
+                  <Flex direction="col">
+                    <Sidebar
+                      ariaLabel="チャンネル一覧のナビゲーション"
+                      activeId={mentionActiveId}
+                      onSelect={setMentionActiveId}
+                      sections={MENTION_SECTIONS}
+                      aria-label="badgeTone 例のナビゲーション"
+                    />
+                  </Flex>
+                </CardContent>
+              </Card>
             </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>
@@ -522,31 +540,36 @@ export default function Demo() {
             </CardHeader>
             <CardContent>
               <Flex gap="md" wrap>
-                <Flex
-                  direction="col"
-                  className="bg-card h-64 w-64 overflow-hidden rounded-lg border"
-                >
-                  <Sidebar
-                    ariaLabel="既定の配色のナビゲーション"
-                    activeId={tokenActiveId}
-                    onSelect={setTokenActiveId}
-                    sections={FAVOURITE_SECTIONS}
-                    aria-label="既定の配色（アイコンは行の色を継承）"
-                  />
-                </Flex>
-                <Flex
-                  direction="col"
-                  className="bg-card h-64 w-64 overflow-hidden rounded-lg border"
-                  style={CANONICAL_NAV_TOKENS}
-                >
-                  <Sidebar
-                    ariaLabel="アイコンを濃くしたナビゲーション"
-                    activeId={tokenActiveId}
-                    onSelect={setTokenActiveId}
-                    sections={FAVOURITE_SECTIONS}
-                    aria-label="トークン上書き（アイコンのみ --foreground）"
-                  />
-                </Flex>
+                <Card className="h-64 w-64 overflow-hidden">
+                  <CardContent flush>
+                    <Flex direction="col">
+                      <Sidebar
+                        ariaLabel="既定の配色のナビゲーション"
+                        activeId={tokenActiveId}
+                        onSelect={setTokenActiveId}
+                        sections={FAVOURITE_SECTIONS}
+                        aria-label="既定の配色（アイコンは行の色を継承）"
+                      />
+                    </Flex>
+                  </CardContent>
+                </Card>
+                <Card className="h-64 w-64 overflow-hidden">
+                  <CardContent flush>
+                    <Flex
+                      direction="col"
+
+                      style={CANONICAL_NAV_TOKENS}
+                    >
+                      <Sidebar
+                        ariaLabel="アイコンを濃くしたナビゲーション"
+                        activeId={tokenActiveId}
+                        onSelect={setTokenActiveId}
+                        sections={FAVOURITE_SECTIONS}
+                        aria-label="トークン上書き（アイコンのみ --foreground）"
+                      />
+                    </Flex>
+                  </CardContent>
+                </Card>
               </Flex>
             </CardContent>
           </Card>