@godxjp/ui 27.0.0 → 27.3.1

package/dist/styles/table-layout.css

@@ -40,7 +40,47 @@
   }
 
   .ui-table-row[data-tone] {
-    background: hsl(var(--table-row-tone-color) / var(--table-row-tone-wash-alpha));
+    background-image: linear-gradient(
+      hsl(var(--table-row-tone-color) / var(--table-row-tone-wash-alpha)),
+      hsl(var(--table-row-tone-color) / var(--table-row-tone-wash-alpha))
+    );
+  }
+
+  :where([data-slot="table"] > tbody > tr:nth-child(even of :not([data-expanded-row]))) {
+    background-color: color-mix(
+      in srgb,
+      var(--table-row-striped-background, hsl(var(--muted) / 0.8)) var(--table-row-striped-alpha),
+      transparent
+    );
+  }
+
+  :where(
+    [data-slot="table"]
+      > tbody
+      > tr:nth-child(even of :not([data-expanded-row]))
+      + tr[data-expanded-row]
+      > td
+  ) {
+    background-image: linear-gradient(
+      color-mix(
+        in srgb,
+        var(--table-row-striped-background, hsl(var(--muted) / 0.8)) var(--table-row-striped-alpha),
+        transparent
+      ),
+      color-mix(
+        in srgb,
+        var(--table-row-striped-background, hsl(var(--muted) / 0.8)) var(--table-row-striped-alpha),
+        transparent
+      )
+    );
+  }
+
+  [data-slot="table"][data-striped=""] {
+    --table-row-striped-alpha: 100%;
+  }
+
+  [data-slot="table"][data-striped="false"] {
+    --table-row-striped-alpha: 0%;
   }
 
   .ui-table-row[data-tone] > [data-slot="table-cell"]:first-child {
@@ -172,6 +212,14 @@
     min-width: 0;
   }
 
+  .ui-data-table-pagination--footer > .ui-pagination {
+    flex: 1 1 auto;
+  }
+
+  .ui-data-table-pagination--footer:empty {
+    display: none;
+  }
+
   .ui-data-table-page-size {
     flex: 0 0 auto;
     flex-wrap: nowrap;
@@ -213,10 +261,6 @@
     min-inline-size: var(--table-surface-min-inline-size);
   }
 
-  .ui-data-table-surface[data-striped] tbody tr:nth-child(even):not([data-state="selected"]) {
-    background-color: var(--table-row-striped-background, hsl(var(--muted) / 0.4));
-  }
-
   .ui-data-table-empty {
     padding: var(--empty-state-space-y) var(--empty-state-space-x);
   }
@@ -332,6 +376,13 @@
     box-shadow: var(--table-fixed-shadow-start);
   }
 
+  [data-slot="card"]
+    .ui-data-table-surface
+    tbody
+    :is(.ui-data-table-pin-end, .ui-data-table-pin-start) {
+    background-color: hsl(var(--card-background, var(--card)));
+  }
+
   th.ui-data-table-pin-end,
   th.ui-data-table-pin-start {
     background-color: hsl(var(--secondary));
@@ -345,11 +396,27 @@
     box-shadow: 6px 0 6px -5px hsl(var(--foreground) / 0.12);
   }
 
+  :where([data-slot="table"] > tbody > tr:nth-child(even of :not([data-expanded-row])))
+    > :is(.ui-data-table-pin-end, .ui-data-table-pin-start) {
+    background-image: linear-gradient(
+      color-mix(
+        in srgb,
+        var(--table-row-striped-background, hsl(var(--muted) / 0.8)) var(--table-row-striped-alpha),
+        transparent
+      ),
+      color-mix(
+        in srgb,
+        var(--table-row-striped-background, hsl(var(--muted) / 0.8)) var(--table-row-striped-alpha),
+        transparent
+      )
+    );
+  }
+
   .ui-data-table-surface tbody tr:hover > .ui-data-table-pin-end,
   .ui-data-table-surface tbody tr:hover > .ui-data-table-pin-start {
     background-image: linear-gradient(
-      var(--table-row-hover-background, hsl(var(--muted) / 0.5)),
-      var(--table-row-hover-background, hsl(var(--muted) / 0.5))
+      var(--table-row-hover-background, hsl(var(--accent) / 0.7)),
+      var(--table-row-hover-background, hsl(var(--accent) / 0.7))
     );
   }
 
@@ -385,7 +452,12 @@
   }
 
   .ui-data-table-expanded-row > [data-slot="table-cell"] {
-    background-color: var(--table-row-expanded-background, hsl(var(--muted) / 0.3));
+    background-color: color-mix(
+      in srgb,
+      var(--table-row-expanded-background, hsl(var(--muted) / 0.3))
+        calc(100% - var(--table-row-striped-alpha)),
+      transparent
+    );
   }
 
   .ui-data-table-summary {

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/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/FORMS.md

@@ -59,16 +59,17 @@ export function CreateCustomerForm({ onSubmit }: { onSubmit: (v: Values) => void
 
 `onSubmit` runs only after validation passes (antd `onFinish`). Everything else is optional:
 
-| Prop                                                              | antd                    | Notes                                                                                    |
-| ----------------------------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------- |
-| `onSubmitFailed(errors)`                                          | `onFinishFailed`        | RHF error tree; the first invalid field is focused regardless                            |
-| `onSubmitError(error)`                                            | —                       | Optional error callback; rejected submissions show localized feedback and retain values  |
-| `onReset`                                                         | —                       | A native `<Button type="reset">` restores `defaultValues`; this runs after               |
-| `scrollToFirstError`                                              | `scrollToFirstError`    | Default `true`; centres the field row, honours `prefers-reduced-motion`                  |
-| `disabled`                                                        | Form `disabled`         | Disables fields and submission; values remain in state. Buttons read `useFormDisabled()` |
-| `layout` `labelWidth` `controlWidth` `labelAlign` `collapseBelow` | `layout` `labelCol` …   | Renders the `Form` layout shell (see the spacing note below)                             |
-| `density` / `requiredMark`                                        | `size` / `requiredMark` | Forwarded to the same shell                                                              |
-| `errors`                                                          | —                       | Server error bag; fields claim their keys, `<FormErrors />` shows the rest               |
+| Prop                                                              | antd                    | Notes                                                                                              |
+| ----------------------------------------------------------------- | ----------------------- | -------------------------------------------------------------------------------------------------- |
+| `onSubmitFailed(errors)`                                          | `onFinishFailed`        | RHF error tree; the first invalid field is focused regardless                                      |
+| `onSubmitError(error)`                                            | —                       | Optional error callback; rejected submissions show localized feedback and retain values            |
+| `submitFailedMessage`                                             | —                       | Rejection banner text; `false` never shows it. Skipped for a 400/422 once `errors` holds a message |
+| `onReset`                                                         | —                       | A native `<Button type="reset">` restores `defaultValues`; this runs after                         |
+| `scrollToFirstError`                                              | `scrollToFirstError`    | Default `true`; centres the field row, honours `prefers-reduced-motion`                            |
+| `disabled`                                                        | Form `disabled`         | Disables fields and submission; values remain in state. Buttons read `useFormDisabled()`           |
+| `layout` `labelWidth` `controlWidth` `labelAlign` `collapseBelow` | `layout` `labelCol` …   | Renders the `Form` layout shell (see the spacing note below)                                       |
+| `density` / `requiredMark`                                        | `size` / `requiredMark` | Forwarded to the same shell                                                                        |
+| `errors`                                                          | —                       | Server error bag; fields claim their keys, `<FormErrors />` shows the rest                         |
 
 > **Spacing.** A bare `FormRoot` stacks its children with `ui-stack-md`. Passing ANY layout prop
 > switches it to the `Form` shell, whose `--form-block-gap` owns the spacing instead — the two are

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>