@godxjp/ui 19.2.0 → 19.3.1

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 {
@@ -313,30 +313,36 @@ 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>
 
@@ -356,33 +362,35 @@ 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>
@@ -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,15 +510,19 @@ 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>
 
@@ -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>

package/docs/layout/split-pane.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Flex, PageContainer, ResponsiveGrid, SplitPane } from "@godxjp/ui/layout";
+import { Flex, PageContainer, ResponsiveGrid, Separator, SplitPane } from "@godxjp/ui/layout";
 import {
   Card,
   CardContent,
@@ -188,7 +188,7 @@ export default function Demo() {
                   </CardTitle>
                 </CardHeader>
                 <CardContent>
-                  <Flex direction="col" gap="sm">
+                  <Flex direction="col" gap="xs">
                     <Flex direction="row" justify="between">
                       <Text tone="muted">小計</Text>
                       <Text tabular>{selected.amount}</Text>
@@ -197,7 +197,8 @@ export default function Demo() {
                       <Text tone="muted">消費税 (10%)</Text>
                       <Text tabular>{yen(base * 0.1)}</Text>
                     </Flex>
-                    <div className="border-border mt-1 border-t pt-2">
+                    <Separator />
+                    <div>
                       <Flex direction="row" justify="between">
                         <Text weight="bold">合計</Text>
                         <Text weight="bold" tabular>
@@ -417,31 +418,47 @@ export default function Demo() {
           <CardContent>
             <Flex direction="col" gap="md">
               {/* Narrow embed → stays single column (the container is < 48rem). */}
-              <div className="max-w-md border p-2">
-                <Text size="xs" tone="muted">
-                  約 28rem のコンテナ → 縦積み
-                </Text>
-                <SplitPane
-                  asideLabel="補助パネル（狭い埋め込み）"
-                  asideWidth="sm"
-                  aside={<div className="bg-muted p-4">補助パネル</div>}
-                >
-                  <div className="bg-muted p-4">メインコンテンツ</div>
-                </SplitPane>
-              </div>
+              <Card className="max-w-md">
+                <CardContent>
+                  <Text size="xs" tone="muted">
+                    約 28rem のコンテナ → 縦積み
+                  </Text>
+                  <SplitPane
+                    asideLabel="補助パネル（狭い埋め込み）"
+                    asideWidth="sm"
+                    aside={
+                      <Card variant="muted">
+                        <CardContent>補助パネル</CardContent>
+                      </Card>
+                    }
+                  >
+                    <Card variant="muted">
+                      <CardContent>メインコンテンツ</CardContent>
+                    </Card>
+                  </SplitPane>
+                </CardContent>
+              </Card>
               {/* Wide embed → splits into two columns (the container is ≥ 48rem). */}
-              <div className="max-w-4xl border p-2">
-                <Text size="xs" tone="muted">
-                  約 56rem のコンテナ → 2 カラム
-                </Text>
-                <SplitPane
-                  asideLabel="補助パネル（広い埋め込み）"
-                  asideWidth="sm"
-                  aside={<div className="bg-muted p-4">補助パネル</div>}
-                >
-                  <div className="bg-muted p-4">メインコンテンツ</div>
-                </SplitPane>
-              </div>
+              <Card className="max-w-4xl">
+                <CardContent>
+                  <Text size="xs" tone="muted">
+                    約 56rem のコンテナ → 2 カラム
+                  </Text>
+                  <SplitPane
+                    asideLabel="補助パネル（広い埋め込み）"
+                    asideWidth="sm"
+                    aside={
+                      <Card variant="muted">
+                        <CardContent>補助パネル</CardContent>
+                      </Card>
+                    }
+                  >
+                    <Card variant="muted">
+                      <CardContent>メインコンテンツ</CardContent>
+                    </Card>
+                  </SplitPane>
+                </CardContent>
+              </Card>
             </Flex>
           </CardContent>
         </Card>

package/docs/layout/topbar.tsx

@@ -98,7 +98,7 @@ export default function Demo() {
         {collapsed ? <PanelLeftOpen /> : <PanelLeftClose />}
       </Button>
       {/* Decorative mark — hidden below sm so the budget goes to the two real controls. */}
-      <Avatar className="hidden rounded-md sm:flex">
+      <Avatar className="rounded-md">
         <AvatarFallback className="bg-primary text-primary-foreground font-bold">C</AvatarFallback>
       </Avatar>
       <DropdownMenu>
@@ -120,7 +120,7 @@ export default function Demo() {
           <DropdownMenuSeparator />
           {ENTITIES.map((e) => (
             <DropdownMenuItem key={e.id} onSelect={() => setActiveEntity(e)}>
-              <Building2 className="me-2 size-4" />
+              <Building2 className="size-4" />
               {e.name}
               {activeEntity.id === e.id ? (
                 <Badge variant="secondary" className="ms-auto text-xs">
@@ -157,7 +157,7 @@ export default function Demo() {
           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="hidden text-xs sm:inline-flex">
+      <Badge tone="warning" className="text-xs">
         ステージング
       </Badge>
       <Button
@@ -184,16 +184,16 @@ export default function Demo() {
           <DropdownMenuLabel>佐藤 花子</DropdownMenuLabel>
           <DropdownMenuSeparator />
           <DropdownMenuItem>
-            <UserRound className="me-2 size-4" />
+            <UserRound className="size-4" />
             プロフィール
           </DropdownMenuItem>
           <DropdownMenuItem>
-            <Settings className="me-2 size-4" />
+            <Settings className="size-4" />
             アカウント設定
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem>
-            <LogOut className="me-2 size-4" />
+            <LogOut className="size-4" />
             ログアウト
           </DropdownMenuItem>
         </DropdownMenuContent>
@@ -291,9 +291,9 @@ export default function Demo() {
                   { prop: "children", desc: "3 slot を使わず完全カスタムにする場合の逃げ道" },
                 ].map(({ prop, desc }) => (
                   <Flex key={prop} align="start" gap="sm">
-                    <code className="bg-muted shrink-0 rounded px-1.5 py-0.5 font-mono text-xs">
+                    <Badge variant="secondary" className="shrink-0">
                       {prop}
-                    </code>
+                    </Badge>
                     <Text tone="muted">{desc}</Text>
                   </Flex>
                 ))}
@@ -331,13 +331,15 @@ export default function Demo() {
               </CardDescription>
             </CardHeader>
             <CardContent>
-              <div className="max-w-80 overflow-hidden border p-2">
-                <Topbar
-                  start={<Text weight="medium">株式会社とても長い組織名称</Text>}
-                  center={<Button variant="outline">すべての取引を検索</Button>}
-                  end={<Button variant="ghost">山田 太郎 システム管理者</Button>}
-                />
-              </div>
+              <Card className="max-w-80 overflow-hidden">
+                <CardContent>
+                  <Topbar
+                    start={<Text weight="medium">株式会社とても長い組織名称</Text>}
+                    center={<Button variant="outline">すべての取引を検索</Button>}
+                    end={<Button variant="ghost">山田 太郎 システム管理者</Button>}
+                  />
+                </CardContent>
+              </Card>
             </CardContent>
           </Card>
         </Flex>

package/docs/navigation/app-setting-picker.tsx

@@ -90,9 +90,11 @@ export default function Demo() {
               </CardDescription>
             </CardHeader>
             <CardContent>
-              <div className="max-w-80 border p-3" lang="ja">
-                <AppSettingPicker kind="timezone" id="setting-timezone-narrow" />
-              </div>
+              <Card className="max-w-80" lang="ja">
+                <CardContent>
+                  <AppSettingPicker kind="timezone" id="setting-timezone-narrow" />
+                </CardContent>
+              </Card>
             </CardContent>
           </Card>
 
@@ -106,7 +108,6 @@ export default function Demo() {
             </CardHeader>
             <CardContent>
               <Topbar
-                className="rounded-md border"
                 start={
                   <Avatar className="rounded-md">
                     <AvatarFallback>G</AvatarFallback>

package/docs/navigation/breadcrumb.tsx

@@ -1,6 +1,13 @@
 import { forwardRef } from "react";
 import type { AnchorHTMLAttributes } from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  CodeBlock,
+} from "@godxjp/ui/data-display";
 import { Text } from "@godxjp/ui/general";
 import { Breadcrumb } from "@godxjp/ui/layout";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
@@ -110,15 +117,15 @@ export default function Demo() {
               {/* tabIndex: the snippet scrolls sideways on a narrow viewport and holds no
                   focusable content, so without its own tab stop a keyboard user cannot reach the
                   clipped end of the line (WCAG 2.1.1). */}
-              <pre tabIndex={0} className="bg-muted overflow-x-auto rounded p-3 text-xs">
+              <CodeBlock size="xs" wrap={false}>
                 {`<Breadcrumb items={[{ label: "ホーム", to: "/" }, { label: "現在ページ" }]} />`}
-              </pre>
+              </CodeBlock>
               <Text as="p" size="xs" tone="muted">
                 PageContainer / AppShell の breadcrumb プロップに (任意):
               </Text>
-              <pre tabIndex={0} className="bg-muted overflow-x-auto rounded p-3 text-xs">
+              <CodeBlock size="xs" wrap={false}>
                 {`<PageContainer title="仕訳詳細" breadcrumb={[{ label: "ホーム", to: "/" }, { label: "JE-0042" }]}>`}
-              </pre>
+              </CodeBlock>
             </Flex>
           </CardContent>
         </Card>

package/docs/navigation/context-menu.tsx

@@ -47,8 +47,11 @@ export default function Demo() {
           </CardHeader>
           <CardContent>
             <ContextMenu>
-              <ContextMenuTrigger className="border-border flex h-36 w-full cursor-context-menu items-center justify-center rounded-md border border-dashed">
-                <Text tone="muted">ここを右クリックしてください</Text>
+              {/* 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">
+                <Flex align="center" justify="center" gap="xs">
+                  <Text tone="muted">ここを右クリックしてください</Text>
+                </Flex>
               </ContextMenuTrigger>
               <ContextMenuContent>
                 <ContextMenuLabel>仕訳操作</ContextMenuLabel>
@@ -89,8 +92,11 @@ export default function Demo() {
           </CardHeader>
           <CardContent>
             <ContextMenu>
-              <ContextMenuTrigger className="border-border flex h-36 w-full cursor-context-menu items-center justify-center rounded-md border border-dashed">
-                <Text tone="muted">右クリック · 表示設定</Text>
+              {/* 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">
+                <Flex align="center" justify="center" gap="xs">
+                  <Text tone="muted">右クリック · 表示設定</Text>
+                </Flex>
               </ContextMenuTrigger>
               <ContextMenuContent>
                 <ContextMenuLabel>表示オプション</ContextMenuLabel>