@godxjp/ui 27.1.0 → 27.4.1

package/dist/styles/text-layout.css

@@ -51,37 +51,45 @@
   }
 
   [data-slot="text"][data-tone="default"],
-  [data-slot="heading"][data-tone="default"] {
+  [data-slot="heading"][data-tone="default"],
+  [data-slot="icon"][data-tone="default"] {
     color: hsl(var(--foreground));
   }
   [data-slot="text"][data-tone="muted"],
-  [data-slot="heading"][data-tone="muted"] {
+  [data-slot="heading"][data-tone="muted"],
+  [data-slot="icon"][data-tone="muted"] {
     color: hsl(var(--muted-foreground));
   }
 
   [data-slot="text"][data-tone="inherit"],
-  [data-slot="heading"][data-tone="inherit"] {
+  [data-slot="heading"][data-tone="inherit"],
+  [data-slot="icon"][data-tone="inherit"] {
     color: inherit;
   }
   [data-slot="text"][data-tone="primary"],
-  [data-slot="heading"][data-tone="primary"] {
+  [data-slot="heading"][data-tone="primary"],
+  [data-slot="icon"][data-tone="primary"] {
     color: hsl(var(--primary));
   }
 
   [data-slot="text"][data-tone="success"],
-  [data-slot="heading"][data-tone="success"] {
+  [data-slot="heading"][data-tone="success"],
+  [data-slot="icon"][data-tone="success"] {
     color: hsl(var(--text-success));
   }
   [data-slot="text"][data-tone="warning"],
-  [data-slot="heading"][data-tone="warning"] {
+  [data-slot="heading"][data-tone="warning"],
+  [data-slot="icon"][data-tone="warning"] {
     color: hsl(var(--text-warning));
   }
   [data-slot="text"][data-tone="destructive"],
-  [data-slot="heading"][data-tone="destructive"] {
+  [data-slot="heading"][data-tone="destructive"],
+  [data-slot="icon"][data-tone="destructive"] {
     color: hsl(var(--text-error));
   }
   [data-slot="text"][data-tone="info"],
-  [data-slot="heading"][data-tone="info"] {
+  [data-slot="heading"][data-tone="info"],
+  [data-slot="icon"][data-tone="info"] {
     color: hsl(var(--text-info));
   }
 

package/dist/tokens/components/control.css

@@ -140,6 +140,11 @@
   --command-item-padding-x: var(--space-2);
 
   --command-item-gap: var(--control-gap);
+
+  --command-list-split-padding: 0;
+  --command-list-split-inset: 0px;
+  --command-item-divider-width: var(--stroke-hairline);
+  --command-item-divider-color: initial;
   --command-palette-width: 35rem;
   --command-palette-inset-top: calc(var(--space-6) * 4);
   --command-palette-viewport-inset: var(--space-3);

package/dist/tokens/components/data-display.css

@@ -151,4 +151,10 @@
   --range-timeline-row-height: var(--control-height-lg);
   --range-timeline-bar-height: var(--control-height-sm);
   --range-timeline-border-color: var(--border);
+
+  --range-timeline-grid-color: initial;
+
+  --range-timeline-grid-width: var(--stroke-hairline);
+
+  --range-timeline-muted-column-background: initial;
 }

package/dist/tokens/components/navigation.css

@@ -11,7 +11,7 @@
 
   --pagination-icon-size: var(--control-icon-size);
 
-  --pagination-control-height-sm: var(--band-height-sm);
+  --pagination-control-height-sm: initial;
 
   --pagination-jumper-gap: var(--space-inline-xs);
   --pagination-jumper-width: 4rem;

package/dist/tokens/components/table.css

@@ -37,6 +37,8 @@
   --table-selection-menu-gap: var(--space-1);
 
   --table-row-striped-background: initial;
+
+  --table-row-striped-alpha: 0%;
   --table-row-hover-background: initial;
   --table-row-selected-background: initial;
 }

package/docs/CONSUMER-RULES.md

@@ -5,9 +5,9 @@ Read this once; the audit enforces it. Everything else in `docs/` is for contrib
 1. Load styles with `@import "@godxjp/ui/styles"` (fonts bundled, 729 sliced woff2 faces, ~11.7 MB), `@import "@godxjp/ui/styles/core"` (no `@font-face` at all), `@import "@godxjp/ui/styles/core-with-fallbacks"` (`core` + six `local()`-only metric-matched faces, still zero network bytes — for when you supply Noto Sans JP yourself) or `@import "@godxjp/ui/styles/core-with-jis-level1"` (`core-with-fallbacks` + Noto Sans JP merged to JIS X 0208 level 1: **3 requests, ~1.53 MB, once** instead of ~8 font requests on every navigation — for a Japanese app that wants the bundled face). Never cherry-pick `*-layout.css`.
 2. Every page is `<PageContainer title subtitle extra footer>`; its sections are spaced by the page. Group items inside a section with `<Flex direction="col" gap>` or `<ResponsiveGrid>`.
 3. No Tailwind layout on your own elements: no `flex`, `grid`, `gap-*`, `p-*`, `m-*`, `space-*`. Rows are `<Flex>` (default row), stacks are `<Flex direction="col">`, grids are `<ResponsiveGrid>`.
-4. No hand-rolled surfaces: no `rounded-* border bg-*` divs. A box is `Card`, a pill is `Badge`, a person is `Avatar`, a row is `ListRow`, a label/value pair is `Descriptions`, an empty area is `EmptyState`, a read-only sample of a colour the USER chose is `Swatch`.
+4. No hand-rolled surfaces: no `rounded-* border bg-*` divs. A box is `Card`, a pill is `Badge`, a person is `Avatar`, a row is `ListRow`, a label/value pair is `Descriptions`, an empty area is `EmptyState`, a read-only sample of a colour the USER chose is `Swatch`. A LIST of those rows is `<Flex as="ul" marker="none" direction="col" gap="none">` with `<ListRow as="li">` children — `marker="none"` keeps the `<ul>`, the `<li>` semantics and the gap token while dropping the bullet and the indent. Never a raw `<ul>`/`<ol>` (it carries no gap token), never `<div role="list">` + `<div role="listitem">`, and never a wrapper around each row: the divider is `:not(:last-child)` among siblings, so a row alone in its own wrapper is always the last one and EVERY divider disappears silently. A bulleted prose list is the same `<Flex as="ul">` without `marker`.
 5. Real controls only: `Button`, `Input`, `Select`, `Textarea`, `Checkbox`… never raw `<button>`/`<input>`; a labelled control lives in `<FormField label>`. A Select outside a form takes `width="auto"`. **A disabled control's reason is visible text, never a tooltip** — see below.
-6. Text is `<Text>` / `<Heading>` with `tone`, `size`, `weight`, `truncate`, `mono` — not `className="text-muted-foreground font-semibold"`.
+6. Text is `<Text>` / `<Heading>` with `tone`, `size`, `weight`, `truncate`, `mono` — not `className="text-muted-foreground font-semibold"`. A STANDALONE glyph is `<Icon as={Lock} size="sm" tone="muted" />` from `@godxjp/ui/general`: a bare lucide icon carries its own `width="24" height="24"` and only four places re-size it for you (`Button`, a `DropdownMenuItem`, a `TopbarItem`, a `ListRow` leading slot), so everywhere else — in a `Text`, a table cell, an `<a>` — it draws at 24px beside 14px type. `size-4` and `w-[16px]` are closed to you by rules 3 and 8, and `size={16}` hard-codes a number the theme owns; `Icon` puts the glyph on the `--icon-size-*` scale (`2xs…4xl`) instead, and is `aria-hidden` unless you give it a `label` (then it is `role="img"` with that name). The audit rule is `lucide-icon-needs-size`.
 7. Colours are semantic tokens (`tone="destructive"`, `bg-primary`), never palette names, hex, or `bg-black` / `text-white`.
 8. Sizes come from props (`size`, `width`, `columns`), never `w-[240px]` / `max-h-[420px]`.
 9. Logical directions (`ms-`, `me-`, `start-`, `end-`) when a utility is unavoidable; never `ml-` / `left-`.

package/docs/DESIGN-AUTHORITY.md

@@ -234,7 +234,12 @@ in page CSS.
 **Three things override antd's spelling, each for a stated reason:**
 
 - **Logical over physical.** antd's `fixed: 'left' | 'right'` cannot mirror for an RTL locale, so
-  only `start` / `end` are published. Same rule that makes `check:rtl` a gate.
+  only `start` / `end` are published. Same rule that makes `check:rtl` a gate. Table
+  `pagination.position` follows it (gh#705): antd `topLeft | topCenter | topRight | bottomLeft |
+bottomCenter | bottomRight | none` is `topStart | topCenter | topEnd | bottomStart | bottomCenter |
+bottomEnd | none` (`TablePaginationPositionProp`, default `['bottomEnd']`), the camelCase shape
+  `DropdownMenuPlacementProp` already uses. antd's `size="small"` Table → small pager is
+  `density="compact"` → `Pagination size="sm"`.
 - **This library's controlled vocabulary wins on values.** antd's `SortOrder` is
   `'ascend' | 'descend'`; here it stays `SortDirectionProp` (`asc` / `desc`), because that type
   already exists and a second spelling of the same axis is exactly what `check:prop-vocabulary`
@@ -266,6 +271,32 @@ in page CSS.
   `dataEntry.chatComposer.hintModEnter` with `{modifier}` from `isApplePlatform()`
   (`@godxjp/ui/lib/utils`). `allowEmptySubmit` (default `false`, antd's behaviour) sends `""`,
   still never while `loading` / `disabled` / `readOnly`.
+- **`Table.striped` / `DataTable.striped` (gh#700).** antd names no zebra capability — its docs
+  stripe through `rowClassName` — so there is no antd spelling to port. Element Plus calls it
+  `stripe`, Bootstrap `.table-striped`, MUI documents `:nth-of-type(odd)`. This library takes
+  `striped`: a positive boolean adjective, the shape `bordered` and `hoverable` already have on the
+  same component, and the spelling `DataTable` had shipped since 17f4a067. It is TRI-STATE on
+  purpose: omitted inherits the service default `--table-row-striped-alpha` (`0%` at `:root`, so
+  one theme line — `:root { --table-row-striped-alpha: 100%; }` — stripes every list table),
+  `true` / `false` override it per table. `rowClassName` is not the answer here: it counts DOM
+  rows, so an expanded detail row shifts every stripe after it, and `ui-audit` blocks the
+  utilities it would need.
+
+- **`Command.split` is antd `List.split`, with this library's default.** Same name, same meaning:
+  a divider between rows and none after the last (gh#699). antd's `List` defaults it to `true`;
+  `Command` defaults it to `false`, because its resting home is a command palette, where inset
+  pill rows are right. The option lists the library renders itself as a checklist
+  (`Select mode="multiple" | "tags"`) set it to `true`, and a consumer composing a filter facet
+  (`Popover` + `Command`) opts in with `split`. It also zeroes the list padding and bleeds rows to
+  the panel edge, which antd's `split` does not need to say because a `List` has no inset rows.
+
+- **`ResponsiveGrid.align` is antd `Row align`, with Flex's values (gh#708).** antd spells the
+  cross-axis `top | middle | bottom | stretch`; this library already names that axis
+  `FlexAlignProp` (`start | center | end | stretch | baseline`), so `ResponsiveGridAlignProp` is
+  `Extract<FlexAlignProp, "start" | "stretch">` — antd `top` → `start`, `stretch` unchanged.
+  `middle` / `bottom` are not offered until a screen needs them. The default differs by flow on
+  purpose: omitted, `flow="columns"` keeps `start` and `flow="rows"` keeps the grid's stretch, so
+  no existing grid moves; antd's `Row` default is `top` in every case.
 
 **A knob that only a fork could reach is not parity either.** antd's `components`,
 `filterDropdown`, `classNames`/`styles` semantic maps and `prefixCls` all exist to let a consumer

package/docs/FRAME-COVERAGE-REPORT.md

@@ -3,8 +3,8 @@
 > Generated by `scripts/frame-coverage.mjs` (issue #163). Do not edit by hand — run `pnpm check:frame-coverage`.
 > Standard: [FRAME-COVERAGE-STANDARD.md](./FRAME-COVERAGE-STANDARD.md). A missing dimension is **UNTESTED**, never a pass.
 
-- Public components: **163**
-- With ≥1 frame: **142** · zero-frame: **21**
+- Public components: **164**
+- With ≥1 frame: **143** · zero-frame: **21**
 - Fully covered (every contract axis declared): **0**
 
 ## UNTESTED — no `/frame/**` route
@@ -74,6 +74,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | Logo | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | Reveal | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | Activity | ✓ | · | N/A | N/A | · | · | · | · | · | · |
+| Icon | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | DataTable | ✓ | ✓ | · | · | · | · | · | · | · | · |
 | Card | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | CardContent | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |

package/docs/data-display/data-table/examples/server-paged.tsx

@@ -0,0 +1,156 @@
+import { useMemo, useState } from "react";
+
+import {
+  Avatar,
+  AvatarFallback,
+  Badge,
+  Card,
+  CardContent,
+  DataTable,
+  type ColumnDef,
+} from "@godxjp/ui/data-display";
+import { Button } from "@godxjp/ui/general";
+import {
+  AppShell,
+  Flex,
+  PageContainer,
+  Sidebar,
+  type SidebarSectionProp,
+  Topbar,
+} from "@godxjp/ui/layout";
+import { Download, FileText, LayoutDashboard, Plus, ReceiptText } from "lucide-react";
+
+/**
+ * Server-paged list (gh#705) — antd's `Table pagination`: the server returns ONE page plus the
+ * total, and the table renders its own footer from `pagination={{ total, current, pageSize,
+ * showTotal, onChange }}` — the real Pagination, total beside the page numbers, bottom-end. The
+ * table is compact, so the pager is `size="sm"` and sits on the same control step as the toolbar
+ * buttons above it. `data` is only the current page; the footer offers ceil(total / pageSize).
+ */
+const sections: SidebarSectionProp[] = [
+  {
+    label: "会計",
+    items: [
+      { id: "dashboard", label: "ダッシュボード", icon: LayoutDashboard },
+      { id: "journal", label: "仕訳", icon: FileText },
+      { id: "invoices", label: "請求書", icon: ReceiptText },
+    ],
+  },
+];
+
+type Invoice = {
+  id: string;
+  partner: string;
+  amount: number;
+  status: "active" | "pending" | "draft" | "failed";
+};
+
+const partners = ["株式会社ベトヤ", "ハノイ物流", "GMO決済", "東京ロジ", "大阪商事"];
+const statuses: Invoice["status"][] = ["active", "pending", "draft", "failed"];
+
+// Stands in for the server: 137 rows exist, but only one page ever reaches the table.
+const SERVER_TOTAL = 137;
+function fetchPage(page: number, pageSize: number): Invoice[] {
+  const first = (page - 1) * pageSize;
+  const count = Math.max(0, Math.min(pageSize, SERVER_TOTAL - first));
+  return Array.from({ length: count }, (_, i) => {
+    const n = first + i + 1;
+    return {
+      id: `INV-2024-${String(n).padStart(4, "0")}`,
+      partner: partners[n % partners.length],
+      amount: 12000 + ((n * 7919) % 480000),
+      status: statuses[n % statuses.length],
+    };
+  });
+}
+
+const yen = new Intl.NumberFormat("ja-JP", {
+  style: "currency",
+  currency: "JPY",
+  maximumFractionDigits: 0,
+});
+
+const columns: ColumnDef<Invoice>[] = [
+  { key: "id", header: "請求書番号", width: "w-40" },
+  { key: "partner", header: "取引先" },
+  {
+    key: "amount",
+    header: "金額",
+    align: "right",
+    render: (row) => <span className="tabular-nums">{yen.format(row.amount)}</span>,
+  },
+  { key: "status", header: "状態", render: (row) => <Badge status={row.status} /> },
+];
+
+export default function Demo() {
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const rows = useMemo(() => fetchPage(page, pageSize), [page, pageSize]);
+
+  return (
+    <AppShell
+      sidebar={
+        <Sidebar
+          activeId="invoices"
+          sections={sections}
+          onSelect={() => {}}
+          product={{ name: "CoreBooks", role: "管理コンソール", color: "hsl(var(--primary))" }}
+        />
+      }
+      topbar={
+        <Topbar
+          start={
+            <Avatar className="rounded-md">
+              <AvatarFallback className="bg-primary text-primary-foreground font-bold">
+                C
+              </AvatarFallback>
+            </Avatar>
+          }
+        />
+      }
+    >
+      <PageContainer
+        title="請求書 一覧"
+        subtitle="サーバー側でページングされた一覧"
+        breadcrumb={[{ label: "請求書" }]}
+        extra={
+          <Button size="sm">
+            <Plus />
+            新規請求書
+          </Button>
+        }
+      >
+        <Card>
+          <CardContent flush>
+            <DataTable
+              data={rows}
+              columns={columns}
+              getRowId={(row) => row.id}
+              pagination={{
+                total: SERVER_TOTAL,
+                current: page,
+                pageSize,
+                pageSizeOptions: [10, 20, 50],
+                showTotal: (total, [from, to]) => `${from}〜${to} 件 / 全 ${total} 件`,
+                onChange: (nextPage, nextPageSize) => {
+                  setPage(nextPage);
+                  setPageSize(nextPageSize);
+                },
+              }}
+            >
+              <DataTable.Toolbar>
+                <Flex direction="row" align="center" gap="sm">
+                  <Button size="sm" variant="outline">
+                    <Download />
+                    エクスポート
+                  </Button>
+                </Flex>
+                <DataTable.ViewOptions />
+              </DataTable.Toolbar>
+            </DataTable>
+          </CardContent>
+        </Card>
+      </PageContainer>
+    </AppShell>
+  );
+}

package/docs/data-display/data-table/examples/striped-list.tsx

@@ -0,0 +1,173 @@
+import { useState } from "react";
+
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  DataTable,
+  Descriptions,
+  type ColumnDef,
+} from "@godxjp/ui/data-display";
+import { Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * DataTable `striped` (gh#700) — a wide issue list striped by LOGICAL record. On one screen: an
+ * expanded detail row (it wears its own record's stripe and does not shift the rows after it), a
+ * frozen inline-end column (its opaque cells wear the stripe too), a pre-selected row (selection
+ * replaces the stripe) and a toned row (the rail and wash stay visible on the stripe).
+ *
+ * To stripe EVERY list table in a service, the theme sets `--table-row-striped-alpha: 100%` on
+ * :root once; `striped` here is the per-table form of the same switch.
+ */
+type Issue = {
+  id: string;
+  key: string;
+  subject: string;
+  type: "bug" | "task" | "story";
+  assignee: string;
+  status: "active" | "pending" | "draft" | "failed";
+  priority: "高" | "中" | "低";
+  due: string;
+  milestone: string;
+};
+
+const TYPE_LABEL = { bug: "バグ", task: "タスク", story: "ストーリー" } as const;
+
+const ROWS: Issue[] = [
+  {
+    id: "1",
+    key: "OPS-128",
+    subject: "請求書 PDF の和暦表記が一部崩れる",
+    type: "bug",
+    assignee: "田中",
+    status: "active",
+    priority: "高",
+    due: "2024-04-12",
+    milestone: "4月リリース",
+  },
+  {
+    id: "2",
+    key: "OPS-127",
+    subject: "取引先マスタの一括取込に重複チェックを追加",
+    type: "story",
+    assignee: "佐藤",
+    status: "pending",
+    priority: "中",
+    due: "2024-04-15",
+    milestone: "4月リリース",
+  },
+  {
+    id: "3",
+    key: "OPS-126",
+    subject: "承認フローの差し戻し理由を必須にする",
+    type: "task",
+    assignee: "鈴木",
+    status: "draft",
+    priority: "中",
+    due: "2024-04-18",
+    milestone: "5月リリース",
+  },
+  {
+    id: "4",
+    key: "OPS-125",
+    subject: "夜間バッチが月末に二重起動する",
+    type: "bug",
+    assignee: "高橋",
+    status: "failed",
+    priority: "高",
+    due: "2024-04-10",
+    milestone: "4月リリース",
+  },
+  {
+    id: "5",
+    key: "OPS-124",
+    subject: "権限マトリクスに監査ログ閲覧を追加",
+    type: "story",
+    assignee: "伊藤",
+    status: "active",
+    priority: "低",
+    due: "2024-04-22",
+    milestone: "5月リリース",
+  },
+  {
+    id: "6",
+    key: "OPS-123",
+    subject: "CSV 出力の文字コードを選べるようにする",
+    type: "task",
+    assignee: "渡辺",
+    status: "pending",
+    priority: "低",
+    due: "2024-04-25",
+    milestone: "5月リリース",
+  },
+];
+
+const columns: ColumnDef<Issue>[] = [
+  { key: "key", header: "キー", width: "110px" },
+  { key: "type", header: "種別", width: "110px", render: (row) => TYPE_LABEL[row.type] },
+  { key: "subject", header: "件名", width: "320px" },
+  { key: "assignee", header: "担当者", width: "110px" },
+  { key: "status", header: "状態", width: "110px", render: (row) => <Badge status={row.status} /> },
+  { key: "priority", header: "優先度", width: "90px" },
+  { key: "milestone", header: "マイルストーン", width: "150px" },
+  // Frozen to the inline end: its cells are opaque, so they must wear the stripe themselves.
+  { key: "due", header: "期日", width: "130px", fixed: "end" },
+];
+
+export default function StripedListDemo() {
+  const [selected, setSelected] = useState<string[]>(["3"]);
+  const [expanded, setExpanded] = useState<string[]>(["2"]);
+
+  return (
+    <PageContainer title="課題一覧" subtitle="DataTable striped · 論理行ごとの縞模様">
+      <Card>
+        <CardHeader>
+          <CardTitle>未完了の課題</CardTitle>
+        </CardHeader>
+        <CardContent flush>
+          <DataTable
+            data={ROWS}
+            columns={columns}
+            getRowId={(row) => row.id}
+            striped
+            hoverable
+            scroll={{ x: 1240 }}
+            rowTone={(row) => (row.status === "failed" ? "destructive" : undefined)}
+            rowSelection={{
+              selectedRowKeys: selected,
+              onChange: (keys) => {
+                setSelected(keys);
+              },
+            }}
+            expandable={{
+              expandedRowKeys: expanded,
+              onExpandedRowsChange: (keys) => {
+                setExpanded(keys);
+              },
+              expandedRowRender: (row) => (
+                <Descriptions bordered columns={{ sm: 2, lg: 3 }} layout="horizontal">
+                  <Descriptions.Item label="キー" mono>
+                    {row.key}
+                  </Descriptions.Item>
+                  <Descriptions.Item label="担当者">{row.assignee}</Descriptions.Item>
+                  <Descriptions.Item label="マイルストーン">{row.milestone}</Descriptions.Item>
+                </Descriptions>
+              ),
+            }}
+          >
+            <DataTable.Content />
+          </DataTable>
+        </CardContent>
+      </Card>
+
+      <Flex direction="col" gap="xs">
+        <Text size="sm" tone="muted">
+          選択中: {selected.length} 件 · 展開中: {expanded.length} 件
+        </Text>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-display/popover.tsx

@@ -14,7 +14,17 @@ import {
   PopoverTitle,
   PopoverTrigger,
 } from "@godxjp/ui/data-display";
-import { Checkbox, FormField, Input, Label } from "@godxjp/ui/data-entry";
+import {
+  Checkbox,
+  FormField,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@godxjp/ui/data-entry";
 import { Button, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 import { Info, SlidersHorizontal } from "lucide-react";
@@ -50,6 +60,38 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Picker in a popover · Select defaultOpen</CardTitle>
+            <CardDescription>
+              Opening the popover opens the workspace list with it. The Select waits for the popover
+              to finish sliding in, so the list sits below its trigger exactly as a click-open does
+              and the first option is never covered.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button variant="outline" data-picker-popover="">
+                  ワークスペースを切り替え
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent aria-label="ワークスペース">
+                <Select aria-label="ワークスペース" defaultOpen defaultValue="tokyo">
+                  <SelectTrigger aria-label="ワークスペース" data-picker-trigger="">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="tokyo">東京本社</SelectItem>
+                    <SelectItem value="osaka">大阪支社</SelectItem>
+                    <SelectItem value="fukuoka">福岡拠点</SelectItem>
+                  </SelectContent>
+                </Select>
+              </PopoverContent>
+            </Popover>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Controlled trigger + content</CardTitle>