@godxjp/ui 27.12.1 → 28.1.0

package/dist/styles/navigation-layout.css

@@ -245,6 +245,115 @@
     box-shadow: inset calc(-1 * var(--tabs-card-rail-border-width)) 0 0 hsl(var(--border));
   }
 
+  [data-slot="tabs"][data-bodied="true"] {
+    --tabs-root-gap: 0px;
+  }
+
+  [data-slot="tabs"][data-bodied="true"][data-variant="card"] [data-slot="tabs-list"],
+  [data-slot="tabs"][data-bodied="true"][data-variant="editable-card"] [data-slot="tabs-list"],
+  [dir="rtl"] [data-slot="tabs"][data-bodied="true"][data-variant="card"] [data-slot="tabs-list"],
+  [dir="rtl"]
+    [data-slot="tabs"][data-bodied="true"][data-variant="editable-card"]
+    [data-slot="tabs-list"] {
+    box-shadow: none;
+  }
+
+  [data-slot="tabs"][data-bodied="true"][data-placement="top"] .ui-tabs-bar {
+    align-items: flex-end;
+  }
+
+  [data-slot="tabs"][data-bodied="true"][data-placement="bottom"] .ui-tabs-bar {
+    align-items: flex-start;
+  }
+
+  [data-slot="tabs"][data-bodied="true"] > [data-slot="tabs-panel"],
+  [data-slot="tabs"][data-bodied="true"] > [data-slot="tabs-content"] {
+    border: var(--tabs-panel-border-width) solid hsl(var(--border));
+    border-radius: var(--tabs-panel-radius);
+    background: hsl(var(--tabs-panel-background, var(--background)));
+    padding: var(--tabs-panel-space-inset);
+  }
+
+  [data-slot="tabs"][data-bodied="true"][data-placement="top"] > [data-slot="tabs-panel"],
+  [data-slot="tabs"][data-bodied="true"][data-placement="top"] > [data-slot="tabs-content"] {
+    margin-block-start: calc(-1 * var(--tabs-panel-border-width));
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+
+  [data-slot="tabs"][data-bodied="true"][data-placement="bottom"] > [data-slot="tabs-panel"],
+  [data-slot="tabs"][data-bodied="true"][data-placement="bottom"] > [data-slot="tabs-content"] {
+    margin-block-end: calc(-1 * var(--tabs-panel-border-width));
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  [data-slot="tabs"][data-bodied="true"][data-placement="start"] > [data-slot="tabs-panel"],
+  [data-slot="tabs"][data-bodied="true"][data-placement="start"] > [data-slot="tabs-content"] {
+    margin-inline-start: calc(-1 * var(--tabs-panel-border-width));
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  [data-slot="tabs"][data-bodied="true"][data-placement="end"] > [data-slot="tabs-panel"],
+  [data-slot="tabs"][data-bodied="true"][data-placement="end"] > [data-slot="tabs-content"] {
+    margin-inline-end: calc(-1 * var(--tabs-panel-border-width));
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  @media (forced-colors: active) {
+    [data-slot="tabs"][data-bodied="true"] > [data-slot="tabs-panel"],
+    [data-slot="tabs"][data-bodied="true"] > [data-slot="tabs-content"] {
+      border-color: CanvasText;
+    }
+
+    [data-slot="tabs"][data-bodied="true"][data-placement="top"]
+      [data-slot="tabs-trigger"][data-state="active"] {
+      border-block-end-style: none;
+    }
+
+    [data-slot="tabs"][data-bodied="true"][data-placement="bottom"]
+      [data-slot="tabs-trigger"][data-state="active"] {
+      border-block-start-style: none;
+    }
+  }
+
+  .ui-tabs-count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--tabs-count-min-width);
+    margin-inline-start: var(--tabs-count-gap);
+    border-radius: var(--tabs-count-radius);
+    padding-inline: var(--tabs-count-space-inline);
+    background: var(--tabs-count-background, hsl(var(--muted)));
+    color: var(--tabs-count-color, hsl(var(--muted-foreground)));
+    font-size: var(--tabs-count-font-size);
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+  }
+
+  [data-slot="tabs"][data-variant="card"]
+    [data-slot="tabs-trigger"]:not([data-state="active"])
+    .ui-tabs-count,
+  [data-slot="tabs"][data-variant="editable-card"]
+    [data-slot="tabs-trigger"]:not([data-state="active"])
+    .ui-tabs-count {
+    background: var(--tabs-count-card-background, hsl(var(--background)));
+  }
+
+  [data-slot="tabs-trigger"][data-state="active"] .ui-tabs-count {
+    background: var(--tabs-count-active-background, hsl(var(--primary)));
+    color: var(--tabs-count-active-color, hsl(var(--primary-foreground)));
+  }
+
+  @media (forced-colors: active) {
+    [data-slot="tabs-trigger"][data-state="active"] .ui-tabs-count {
+      outline: var(--tabs-count-forced-outline-width) solid currentColor;
+    }
+  }
+
   .ui-tabs-tab-remove {
     display: inline-flex;
     flex: 0 0 auto;

package/dist/tokens/components/navigation.css

@@ -78,6 +78,24 @@
   --tabs-card-rail-border-width: var(--stroke-hairline);
   --tabs-card-background: initial;
 
+  --tabs-panel-background: initial;
+  --tabs-panel-border-width: var(--tabs-card-rail-border-width);
+  --tabs-panel-radius: var(--tabs-card-radius);
+  --tabs-panel-space-inset: var(--space-4);
+
+  --tabs-count-min-width: var(--space-4);
+  --tabs-count-space-inline: var(--space-1);
+  --tabs-count-gap: var(--space-1);
+  --tabs-count-font-size: var(--font-size-xs);
+  --tabs-count-radius: var(--radius-pill);
+  --tabs-count-background: initial;
+
+  --tabs-count-card-background: initial;
+  --tabs-count-color: initial;
+  --tabs-count-active-background: initial;
+  --tabs-count-active-color: initial;
+  --tabs-count-forced-outline-width: var(--stroke-hairline);
+
   --tabs-bar-gap: var(--space-2);
   --tabs-extra-gap: var(--space-2);
 

package/docs/DESIGN-AUTHORITY.md

@@ -335,6 +335,39 @@ expandable.expandedRowKeys` / `onExpandedRowsChange`. This library already mappe
   role that carries a level without promising the `tree` / `treegrid` arrow-key model. A timeline
   with no `depth > 0` keeps its pre-#724 markup byte for byte.
 
+- **`ToggleGroup.disallowEmptySelection` — React Aria's name, and a deliberate divergence from
+  Radix's MARKUP (gh#744).** antd has no ToggleGroup at all (its nearest controls are `Segmented`
+  and `Radio.Group`, both of which are always-one-selected by construction and name nothing here),
+  and Radix's `ToggleGroup` has no such prop — so there is no antd spelling to port and no Radix
+  spelling to keep. The name is taken from the library this component is actually built on:
+  `react-stately`'s `useToggleGroupState` and `react-aria`'s `AriaToggleButtonGroupProps` both
+  call it `disallowEmptySelection`, and it is already the state hook's own switch, so a second
+  spelling would be a rename of a prop we pass straight through. It is a negative boolean, which
+  the vocabulary otherwise avoids (`allowClear`, `allowEmpty`, `allowEmptySubmit`) — `allowEmpty`
+  was rejected because `RangePicker.allowEmpty` already means `[boolean, boolean]` on the same
+  prop surface, and one word must not carry two shapes.
+
+  The divergence is not the name, it is the markup. Radix's single group emits
+  `role="radiogroup"` / `role="radio"` + `aria-checked` **and still lets the user clear the
+  selection by pressing the checked item again** — React Aria inherited exactly the same shape
+  (`useToggleButtonGroupItem` hardcodes the radio role on `selectionMode === "single"` without
+  ever reading `disallowEmptySelection`). ARIA has no press-again-to-deselect for a radio: a
+  radiogroup that has a selection always has exactly one checked item, so the state a user reaches
+  by pressing the checked chip once more — a radiogroup with nothing checked — is not expressible,
+  and a screen reader reads an empty radio group immediately after the user activated one of its
+  radios. This library's own catalog said as much in two places (`Radio.optionType` and
+  `Segmented`, both of which justify themselves by calling ToggleGroup "a row of aria-pressed
+  buttons" that "permits 'none chosen'"), so the two entries contradicted the ToggleGroup entry
+  about the same case.
+
+  So here the emptiness rule DECIDES the role. Default (`false`, today's behaviour — no existing
+  group changes): `role="group"` + `aria-pressed` per item, and no `aria-orientation`, which
+  `group` does not take. With the prop: `role="radiogroup"` + `role="radio"` / `aria-checked`,
+  the checked item is the single tab stop, and the arrow keys move the SELECTION as APG's
+  radio-group pattern requires rather than only the focus. `type="multiple"` is untouched
+  (`role="toolbar"`, `aria-pressed`); the prop there only keeps the last item selected.
+  Divergence from Radix's markup is the point of the change, not a side effect of it.
+
 **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
 replace the rendered markup. This library answers that layer with tokens (cardinal rule #45), so

package/docs/data-entry/toggle-group.tsx

@@ -21,6 +21,16 @@ const folderTags = [
   { value: "archive", label: "アーカイブ", count: 311 },
 ];
 
+/** A one-of-N setting: a list always has A sort order, so this row may never be empty (gh#744). */
+const sortOrders = [
+  { value: "updated", label: "更新日" },
+  { value: "created", label: "作成日" },
+  { value: "name", label: "名前" },
+  { value: "size", label: "サイズ" },
+  { value: "owner", label: "所有者" },
+  { value: "relevance", label: "関連度" },
+];
+
 /**
  * ToggleGroup — single or multi-select toggle set. type='single' for mutually
  * exclusive modes; type='multiple' for independent selections. Never raw radio
@@ -31,6 +41,8 @@ export default function Demo() {
   const [formats, setFormats] = useState<string[]>(["pdf"]);
   const [view, setView] = useState<string>("list");
   const [tags, setTags] = useState<string[]>(["design", "runbook"]);
+  const [facet, setFacet] = useState<string>("design");
+  const [sort, setSort] = useState<string>("updated");
 
   return (
     <PageContainer
@@ -50,10 +62,9 @@ export default function Demo() {
             <FormField id="period" label="集計期間">
               <ToggleGroup
                 type="single"
+                disallowEmptySelection
                 value={period}
-                onValueChange={(v) => {
-                  if (v) setPeriod(v);
-                }}
+                onValueChange={setPeriod}
               >
                 <ToggleGroupItem value="daily">日次</ToggleGroupItem>
                 <ToggleGroupItem value="monthly">月次</ToggleGroupItem>
@@ -64,6 +75,76 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>disallowEmptySelection · 空を許すかどうかが role を決める</CardTitle>
+            <CardDescription>
+              ARIA には「もう一度押して選択を外す」という radio
+              がない。選択のある radiogroup には必ずちょうど一つ checked
+              な項目があるので、ユーザーが今押したばかりの radiogroup
+              が空になった状態はスクリーンリーダーが読み上げられない。だから空を許すかどうかが
+              role を決める（gh#744）。既定（空を許す）は role=&quot;group&quot; ＋ 各項目
+              aria-pressed で、同じチップをもう一度押せば選択が外れ onValueChange(&quot;&quot;)
+              が飛ぶ。disallowEmptySelection を付けると role=&quot;radiogroup&quot; ＋
+              role=&quot;radio&quot; / aria-checked になり、選択中の項目をもう一度押しても外れず、矢印キーが
+              APG の radio group どおり選択ごと動く。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  既定（空を許す）· タグ絞り込み · role=&quot;group&quot; ＋
+                  aria-pressed。矢印キーはフォーカスだけを動かす
+                </Text>
+                <ToggleGroup
+                  type="single"
+                  variant="soft"
+                  shape="pill"
+                  wrap
+                  value={facet}
+                  onValueChange={(v) => setFacet(v as string)}
+                  aria-label="ファセット絞り込み"
+                >
+                  {folderTags.slice(0, 6).map((tag) => (
+                    <ToggleGroupItem key={tag.value} value={tag.value}>
+                      {tag.label}
+                    </ToggleGroupItem>
+                  ))}
+                </ToggleGroup>
+                <Text as="p" size="sm" tone="muted">
+                  選択中: {facet === "" ? "なし" : facet}
+                </Text>
+              </Flex>
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  disallowEmptySelection · 並び替え · role=&quot;radiogroup&quot; ＋
+                  aria-checked。タブ位置は選択中の項目ひとつ、矢印キーが選択ごと動く
+                </Text>
+                <ToggleGroup
+                  type="single"
+                  variant="soft"
+                  shape="pill"
+                  wrap
+                  disallowEmptySelection
+                  value={sort}
+                  onValueChange={(v) => setSort(v as string)}
+                  aria-label="並び替え"
+                >
+                  {sortOrders.map((order) => (
+                    <ToggleGroupItem key={order.value} value={order.value}>
+                      {order.label}
+                    </ToggleGroupItem>
+                  ))}
+                </ToggleGroup>
+                <Text as="p" size="sm" tone="muted">
+                  選択中: {sort === "" ? "なし" : sort}
+                </Text>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Multiple selection (type=“multiple”)</CardTitle>
@@ -98,10 +179,9 @@ export default function Demo() {
           <CardContent>
             <ToggleGroup
               type="single"
+              disallowEmptySelection
               value={view}
-              onValueChange={(v) => {
-                if (v) setView(v);
-              }}
+              onValueChange={setView}
             >
               <ToggleGroupItem value="list">一覧</ToggleGroupItem>
               <ToggleGroupItem value="card">カード</ToggleGroupItem>

package/docs/navigation/card-tabs.tsx

@@ -0,0 +1,344 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Button, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { Tabs } from "@godxjp/ui/navigation";
+
+/**
+ * CARD TABS — the strip and its panel as ONE object (gh#762).
+ *
+ * The screen this page is built from is the one the issue draws in ASCII: a saved-view strip over
+ * a list, antd `type="editable-card"` shaped — closable views, a `+`, an action parked on the
+ * trailing edge of the bar, and a body that the open tab opens INTO rather than sits above.
+ *
+ * Everything here is `Tabs` with documented props. There is no page-local CSS and no wrapper box
+ * around the panel: the point of `bodied` is that the consumer no longer has to guess which box
+ * to put underneath, because all three guesses were wrong (`<Card>` added a second 1px border at
+ * a 9.708px radius over an 8px gap; `<Card variant="borderless">` and no box at all left the same
+ * 8px gap). Measured after: 0px of gap, one continuous 1px line, and no line at all across the
+ * active tab.
+ */
+
+type SavedView = {
+  value: string;
+  label: string;
+  count: number;
+  /** antd `Tab.closable` — 「すべての課題」 is the system view and cannot be deleted. */
+  closable?: boolean;
+  rows: string[];
+};
+
+const INITIAL_VIEWS: SavedView[] = [
+  {
+    value: "all",
+    label: "すべての課題",
+    count: 340,
+    closable: false,
+    rows: [
+      "TASK-1042 · 請求書の様式を更新",
+      "TASK-1041 · 監査ログの保存期間",
+      "TASK-1038 · 権限表の棚卸",
+    ],
+  },
+  {
+    value: "mine",
+    label: "自分の担当",
+    count: 12,
+    rows: ["TASK-1042 · 請求書の様式を更新", "TASK-1029 · 締め処理の手順書"],
+  },
+  {
+    value: "review",
+    label: "レビュー待ち",
+    count: 0,
+    rows: [],
+  },
+];
+
+/** The list body a saved view opens into — a real panel, not a placeholder paragraph. */
+function ViewBody({ view }: { view: SavedView }) {
+  if (view.rows.length === 0) {
+    return (
+      <Text as="p" tone="muted">
+        この条件に一致する課題はありません。
+      </Text>
+    );
+  }
+  return (
+    <Flex direction="col" gap="sm">
+      {view.rows.map((row) => (
+        <Text key={row} as="p">
+          {row}
+        </Text>
+      ))}
+    </Flex>
+  );
+}
+
+const PLACEMENT_ITEMS = [
+  { value: "summary", label: "サマリ", content: <Text as="p">当月の売上合計 ¥4,820,000</Text> },
+  { value: "detail", label: "明細", content: <Text as="p">明細 24 件 · 未承認 2 件</Text> },
+  { value: "audit", label: "監査", content: <Text as="p">監査ログ 96 件</Text> },
+];
+
+const COUNT_ITEMS = [
+  {
+    value: "open",
+    label: "未対応",
+    count: 12,
+    countLabel: "件の課題",
+    content: <Text as="p">未対応 12 件</Text>,
+  },
+  {
+    value: "doing",
+    label: "対応中",
+    count: 340,
+    overflowCount: 999,
+    countLabel: "件の課題",
+    content: <Text as="p">対応中 340 件</Text>,
+  },
+  {
+    value: "capped",
+    label: "全期間",
+    count: 1280,
+    countLabel: "件の課題",
+    content: <Text as="p">全期間 1,280 件 · 既定の overflowCount は 99</Text>,
+  },
+  {
+    value: "empty",
+    label: "保留",
+    count: 0,
+    countLabel: "件の課題",
+    content: <Text as="p">保留 0 件</Text>,
+  },
+  {
+    value: "hidden-zero",
+    label: "却下",
+    count: 0,
+    showZero: false,
+    countLabel: "件の課題",
+    content: <Text as="p">showZero={"{false}"} なので 0 のピルは描かれない</Text>,
+  },
+  {
+    value: "off",
+    label: "アーカイブ",
+    disabled: true,
+    count: 7,
+    countLabel: "件の課題",
+    content: <Text as="p">アーカイブ</Text>,
+  },
+];
+
+export default function Demo() {
+  const [views, setViews] = useState(INITIAL_VIEWS);
+  const [activeView, setActiveView] = useState("all");
+  const [nextView, setNextView] = useState(1);
+
+  return (
+    <PageContainer
+      title="カードタブ"
+      subtitle="ストリップとパネルをひとつの箱にする bodied と、タブの件数バッジ。"
+    >
+      <Flex direction="col" gap="lg">
+        {/* THE SCREEN THE ISSUE DRAWS — saved views over a list. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>保存したビュー · editable-card + bodied</CardTitle>
+            <CardDescription>
+              antd の <code>type=&quot;editable-card&quot;</code> と同じ形。
+              <code>bodied</code> がパネルの枠・角丸・背景を描くので、ストリップとパネルが
+              ひとつの箱として読める。「すべての課題」は <code>closable: false</code>
+              なので × が出ない。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Tabs
+              id="saved-views"
+              variant="editable-card"
+              bodied
+              value={activeView}
+              onValueChange={setActiveView}
+              extra={
+                <Button size="sm" variant="outline">
+                  フィルタを保存
+                </Button>
+              }
+              onEdit={(target, action) => {
+                if (action === "add") {
+                  const value = `view-${nextView}`;
+                  setViews((prev) => [
+                    ...prev,
+                    { value, label: `新しいビュー ${nextView}`, count: 0, rows: [] },
+                  ]);
+                  setNextView((n) => n + 1);
+                  setActiveView(value);
+                  return;
+                }
+                const key = String(target);
+                setViews((prev) => prev.filter((view) => view.value !== key));
+                setActiveView((current) =>
+                  current === key ? (views.find((v) => v.value !== key)?.value ?? "all") : current,
+                );
+              }}
+              items={views.map((view) => ({
+                value: view.value,
+                label: view.label,
+                closable: view.closable,
+                count: view.count,
+                overflowCount: 999,
+                countLabel: "件の課題",
+                content: <ViewBody view={view} />,
+              }))}
+            />
+          </CardContent>
+        </Card>
+
+        {/* THE DEFECT, SIDE BY SIDE. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>bodied なし / あり</CardTitle>
+            <CardDescription>
+              <code>bodied</code> なしの card ストリップは 8px 離れた透明なパネルの上に浮く —「card
+              と tab が 1 つに融合していない」と報告された形。あり側は隙間 0px、 線は 1
+              本、アクティブなタブの下辺だけが開いている。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="lg">
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  bodied なし（28.0.0 まで）
+                </Text>
+                <Tabs
+                  id="card-unbodied"
+                  defaultValue="summary"
+                  variant="card"
+                  items={PLACEMENT_ITEMS}
+                />
+              </Flex>
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  bodied
+                </Text>
+                <Tabs
+                  id="card-bodied"
+                  defaultValue="summary"
+                  variant="card"
+                  bodied
+                  items={PLACEMENT_ITEMS}
+                />
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* EVERY PLACEMENT — the joined edge follows the strip. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>bodied × tabPlacement</CardTitle>
+            <CardDescription>
+              角丸が落ちる辺・枠が重なる辺は、ストリップの位置に従う。
+              <code>start</code> / <code>end</code> は論理値なので RTL でも反転する （48rem 以下では
+              top / bottom に折り返す）。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="lg">
+              {(["top", "bottom", "start", "end"] as const).map((placement) => (
+                <Flex key={placement} direction="col" gap="sm">
+                  <Text as="p" size="sm" tone="muted">
+                    tabPlacement=&quot;{placement}&quot;
+                  </Text>
+                  <Tabs
+                    id={`card-bodied-${placement}`}
+                    defaultValue="summary"
+                    variant="card"
+                    bodied
+                    tabPlacement={placement}
+                    items={PLACEMENT_ITEMS}
+                  />
+                </Flex>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* THE COUNT. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>タブの件数バッジ · count / countLabel</CardTitle>
+            <CardDescription>
+              <code>count</code> は Button・Toggle と同じカウンタ語彙で、
+              <code>Intl.NumberFormat</code> でロケール整形される。読み上げ名は 「未対応, 12
+              件の課題」 — 数字が直接ラベルに連結しないよう、ピルは <code>aria-hidden</code>、
+              読み上げ用の文だけが <code>sr-only</code> で隣に置かれる。 既定の上限は 99（
+              <code>overflowCount</code> で変更）、 0 を隠すには <code>showZero={"{false}"}</code>。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="lg">
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  variant=&quot;line&quot;
+                </Text>
+                <Tabs id="count-line" defaultValue="open" variant="line" items={COUNT_ITEMS} />
+              </Flex>
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  variant=&quot;card&quot; + bodied
+                </Text>
+                <Tabs
+                  id="count-card"
+                  defaultValue="open"
+                  variant="card"
+                  bodied
+                  items={COUNT_ITEMS}
+                />
+              </Flex>
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  size=&quot;sm&quot; / &quot;md&quot; / &quot;lg&quot;
+                </Text>
+                {(["sm", "md", "lg"] as const).map((size) => (
+                  <Tabs
+                    key={size}
+                    id={`count-${size}`}
+                    defaultValue="open"
+                    variant="line"
+                    size={size}
+                    items={COUNT_ITEMS.slice(0, 3)}
+                  />
+                ))}
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* The other joined pair the package already ships. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>もうひとつの「ひとつの箱」· Card tabList</CardTitle>
+            <CardDescription>
+              ストリップがカードの見出しの下に入る形は <code>Card tabList</code> が担当する （antd
+              `Card` の <code>tabList</code>）。枠はカードのもので、
+              <code>bodied</code> は要らない。card 系のストリップを単体で置くときだけ
+              <code>bodied</code> を使う。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Card
+              tabList={[
+                { key: "all", tab: "すべての課題", closable: false },
+                { key: "mine", tab: "自分の担当" },
+              ]}
+            >
+              <CardContent>
+                <Text as="p">カードの枠がそのままパネルの枠になる。</Text>
+              </CardContent>
+            </Card>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "27.12.1",
-  "godxUiMcp": "27.12.1",
+  "version": "28.1.0",
+  "godxUiMcp": "28.1.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",