@godxjp/ui 27.4.1 → 27.6.0

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

@@ -30,6 +30,10 @@
   --prose-code-font-size: calc(1em / var(--font-size-ratio));
   --prose-code-space-inline: var(--space-1);
   --prose-code-radius: var(--radius-sm);
+
+  --prose-link-color: initial;
+
+  --prose-link-decoration-line: underline;
   --prose-image-radius: var(--radius-md);
   --timeline-note-font-size: var(--font-size-xs);
 
@@ -37,6 +41,28 @@
 
   --avatar-tint: transparent;
 
+  --avatar-size: var(--control-height);
+
+  --avatar-size-xs: var(--control-height-xs);
+
+  --avatar-size-sm: var(--control-height-sm);
+
+  --avatar-size-lg: var(--control-height-lg);
+
+  --avatar-font-size: var(--font-size-base);
+
+  --avatar-font-size-xs: var(--font-size-2xs);
+
+  --avatar-font-size-sm: var(--font-size-xs);
+
+  --avatar-font-size-lg: var(--font-size-lg);
+
+  --avatar-glyph-size-xs: calc(var(--icon-size-xs) * var(--scaling));
+
+  --avatar-glyph-size-sm: calc(var(--icon-size-sm) * var(--scaling));
+
+  --avatar-glyph-size-lg: calc(var(--icon-size-lg) * var(--scaling));
+
   --avatar-square-radius: var(--radius-lg);
   --avatar-square-size: var(--control-height);
   --avatar-square-background: initial;

package/dist/tokens/components/segmented.css

@@ -11,6 +11,10 @@
 
   --segmented-item-padding-inline: calc(var(--control-padding-x) - 1px);
 
+  --segmented-xs-font-size: var(--font-size-xs);
+
+  --segmented-xs-item-padding-inline: calc(var(--control-padding-x-compact) - 1px);
+
   --segmented-item-gap: calc(var(--space-3) / 2);
 
   --segmented-item-color: var(--muted-foreground);

package/dist/tokens/components/upload.css

@@ -30,6 +30,8 @@
   --upload-picture-radius: var(--radius-md);
   --upload-picture-preview-max-height: 12rem;
   --upload-picture-empty-height: 8rem;
+
+  --upload-picture-icon-size: var(--icon-size-2xl);
   --upload-picture-empty-label-space-block-start: var(--space-2);
   --upload-picture-empty-label-font-size: var(--font-size-sm);
   --upload-picture-overlay-font-size: var(--font-size-sm);
@@ -41,6 +43,8 @@
   --upload-picture-badge-font-size: var(--font-size-xs);
 
   --upload-avatar-size: 6rem;
+
+  --upload-avatar-icon-size: var(--icon-size-xl);
   --upload-avatar-border-width: var(--stroke-md);
   --upload-avatar-change-space-block: var(--space-1);
 

package/docs/CUSTOMER-THEMING.md

@@ -213,6 +213,32 @@ Density (`<PageContainer density>`) scales component sizes, not the grid. - **Pi
 
 ---
 
+## Selectors the package promises are YOURS
+
+A `data-*` attribute the package never writes is a selector you can hold a stylesheet against — the one place where CSS of your own is the documented route rather than a workaround. Each of these is a promise held by a test, not an accident of the current markup:
+
+| You write | The package promises | Why it exists |
+| --- | --- | --- |
+| `.ui-prose a[data-…]` | Prose writes `data-*` on its **own root only** — never on a descendant. Every `data-*` on an `a` inside it is yours, survives the render, and stays selectable (gh#717) | A renderer knows things about a link that the package cannot: in a wiki, a link whose target **does not exist yet** must read differently from one that resolves |
+| `<TableRow data-expanded-row="">` | The striping counts records, not DOM rows — a row you mark is skipped in the count and wears its record's stripe | A detail row under a record is your composition, not a row of data |
+| `[data-tenant]`, `[data-program]` | Every anchor token re-resolves at the scope (below) | One app, many brands |
+
+**Style a marked link through the knob, not around it.** `--prose-link-color` is read as `hsl(var(--prose-link-color, var(--primary)))` **at the anchor**, so declaring the custom property inside your own higher-specificity selector is enough — you never have to restate the `color` declaration, and a later package change to how the ink is painted still reaches you:
+
+```css
+/* your app's stylesheet */
+.ui-prose a[data-unresolved="true"] {
+  --prose-link-color: var(--text-error); /* the TEXT tier — 7.25:1 light, 5.51:1 dark on a card */
+  text-decoration-style: dashed;
+}
+```
+
+Use `--text-error`, not `--destructive`: the fill tier is tuned for a white label on top of it and measures 2.95:1 as ink on the dark card (gh#610). The whole family is `--prose-link-color` (default `hsl(var(--primary))`, resolved at the anchor so a scoped re-tint reaches it) and `--prose-link-decoration-line` (default `underline`). Set the first on `[data-tenant]` to re-tint every wiki link at once.
+
+There is **no prop** naming the attribute, deliberately: the attribute IS the API, the same way `data-expanded-row` and `data-axe-open` are. A prop would make the package own a name only your renderer knows, and would let exactly one state be marked.
+
+---
+
 ## Multi-tenant (one app, many brands)
 
 Scope the overrides under a tenant attribute instead of `:root`. The colour utilities are declared with `@theme inline`, so a scoped `--primary` (and the other anchors) **re-resolve at the element** — `bg-primary`, `text-success`, every component surface, the focus ring, the brand glow, gradients and the modal scrim all retint inside the scope:

package/docs/data-display/avatar.tsx

@@ -9,7 +9,7 @@ import {
   CardTitle,
   ListRow,
 } from "@godxjp/ui/data-display";
-import { Text } from "@godxjp/ui/general";
+import { Button, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 import { Building2, KeyRound, ShieldCheck, Sparkles } from "lucide-react";
 
@@ -34,7 +34,9 @@ import portraitSlate from "../assets/portrait-slate.svg";
 /**
  * Avatar — identity image with a readable fallback (users, teams, entities).
  * Always compose AvatarImage + AvatarFallback so broken/missing images degrade
- * gracefully. Size via className. Composed only from real @godxjp/ui components.
+ * gracefully. Size on the control ladder with `size` (xs/sm/md/lg, the same
+ * --control-height tier Button reads); className only for sizes off that ladder.
+ * Composed only from real @godxjp/ui components.
  */
 export default function Demo() {
   return (
@@ -322,25 +324,140 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        {/* size — the control ladder (gh#716) */}
         <Card>
           <CardHeader>
-            <CardTitle level={2}>Sizes</CardTitle>
+            <CardTitle level={2}>サイズ · size</CardTitle>
             <CardDescription>
-              Default is var(--control-height); override with a size-* utility (size-8 / size-10 /
-              size-12).
+              xs 24px / sm 28px / md 32px（既定） / lg 36px。すべて Button や Input と同じ
+              --control-height の段なので、同じ段の Button
+              と並べたときに高さがそろう。イニシャルの級数もグリフの箱も同じ段で動くため、小さい
+              マークは「小さい」であって「切れている」ではない。shape=&quot;square&quot;
+              も同じ段に乗る。 ラダーの外側のサイズ（プロフィール用の 96px マークなど）は従来どおり
+              className。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex direction="row" wrap align="center" gap="md">
+                <Avatar size="xs">
+                  <AvatarFallback>XS</AvatarFallback>
+                </Avatar>
+                <Avatar size="sm">
+                  <AvatarFallback>SM</AvatarFallback>
+                </Avatar>
+                <Avatar>
+                  <AvatarFallback>MD</AvatarFallback>
+                </Avatar>
+                <Avatar size="lg">
+                  <AvatarFallback>LG</AvatarFallback>
+                </Avatar>
+              </Flex>
+              {/* square rides the identical ladder */}
+              <Flex direction="row" wrap align="center" gap="md">
+                <Avatar size="xs" shape="square">
+                  <AvatarFallback>山</AvatarFallback>
+                </Avatar>
+                <Avatar size="sm" shape="square">
+                  <AvatarFallback>山</AvatarFallback>
+                </Avatar>
+                <Avatar shape="square">
+                  <AvatarFallback>山</AvatarFallback>
+                </Avatar>
+                <Avatar size="lg" shape="square">
+                  <AvatarFallback>山</AvatarFallback>
+                </Avatar>
+              </Flex>
+              {/* the glyph steps with the box, so a medallion is never clipped */}
+              <Flex direction="row" wrap align="center" gap="md">
+                <Avatar size="xs" shape="square" appearance="tinted">
+                  <AvatarFallback>
+                    <ShieldCheck aria-hidden="true" />
+                  </AvatarFallback>
+                </Avatar>
+                <Avatar size="sm" shape="square" appearance="tinted">
+                  <AvatarFallback>
+                    <ShieldCheck aria-hidden="true" />
+                  </AvatarFallback>
+                </Avatar>
+                <Avatar shape="square" appearance="tinted">
+                  <AvatarFallback>
+                    <ShieldCheck aria-hidden="true" />
+                  </AvatarFallback>
+                </Avatar>
+                <Avatar size="lg" shape="square" appearance="tinted">
+                  <AvatarFallback>
+                    <ShieldCheck aria-hidden="true" />
+                  </AvatarFallback>
+                </Avatar>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* The row that could not be built before #716 */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>行に入るマーク · size=&quot;sm&quot; と icon-sm</CardTitle>
+            <CardDescription>
+              行の高さが先に決まっている場所（28px の icon-sm トリガ、24/28px
+              の密なテーブル行）では、マークの側が行に合わせる。#716 以前は箱が --control-height
+              に固定されていたため、28px のトリガに 32px
+              のマークが入って外へはみ出し、消費側に残された手は「行全体を 32px
+              に上げる」だけだった。 下の 1 段目は同じ段の Button と並べたもの、2 段目は icon-sm
+              トリガの中に入れたもの。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex direction="row" wrap align="center" gap="sm">
+                <Avatar size="sm">
+                  <AvatarImage src={portraitSlate} alt="" />
+                  <AvatarFallback>田</AvatarFallback>
+                </Avatar>
+                <Button size="sm" variant="outline">
+                  担当者を変更
+                </Button>
+                <Avatar size="xs">
+                  <AvatarFallback>佐</AvatarFallback>
+                </Avatar>
+                <Button size="xs" variant="outline">
+                  履歴
+                </Button>
+              </Flex>
+              <Flex direction="row" wrap align="center" gap="sm">
+                <Button size="icon-sm" variant="ghost" aria-label="担当者 田中 未来">
+                  <Avatar size="sm">
+                    <AvatarImage src={portraitMoss} alt="" />
+                    <AvatarFallback>田</AvatarFallback>
+                  </Avatar>
+                </Button>
+                <Button size="icon-xs" variant="ghost" aria-label="担当者 佐藤 玲">
+                  <Avatar size="xs">
+                    <AvatarFallback>佐</AvatarFallback>
+                  </Avatar>
+                </Button>
+                <Text as="p" size="xs" tone="muted">
+                  マークはトリガの内寸に収まる（28px の中に 28px、24px の中に 24px）。
+                </Text>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>ラダーの外 · className</CardTitle>
+            <CardDescription>
+              コントロール行の段に無いサイズ（プロフィールヘッダの大きなマークなど）は、従来どおり
+              size-* ユーティリティで指定する。
             </CardDescription>
           </CardHeader>
           <CardContent>
             <Flex direction="row" wrap align="center" gap="md">
-              <Avatar className="size-8">
-                <AvatarFallback>S</AvatarFallback>
-              </Avatar>
               <Avatar className="size-10">
                 <AvatarFallback>M</AvatarFallback>
               </Avatar>
-              <Avatar>
-                <AvatarFallback>D</AvatarFallback>
-              </Avatar>
               <Avatar className="size-12">
                 <AvatarFallback>L</AvatarFallback>
               </Avatar>

package/docs/data-display/prose.tsx

@@ -13,6 +13,34 @@ import { Flex, PageContainer } from "@godxjp/ui/layout";
  * semantic HTML inside it from the tokens; the HTML can come from react-markdown, a sanitised
  * string or JSX. Composed only from real @godxjp/ui components.
  */
+
+/**
+ * A CONSUMER'S OWN STYLESHEET — the file their app already has, not part of the package. It is
+ * inlined here so the third card below is the real thing rather than a description of it.
+ *
+ * Both halves of the gh#717 contract are exercised:
+ *   · `--prose-link-*` — the service tunes every link in its wiki once, through the knob;
+ *   · `a[data-unresolved]` — Prose writes `data-*` on its own ROOT only, so every `data-*` on a
+ *     descendant `a` is the consumer's and stays selectable. That is a promise, held by
+ *     src/components/data-display/__tests__/prose-link-717.test.tsx.
+ *
+ * Measured on the card surface (#fdfdfc light / #21201c dark):
+ *   resolved   --text-link  #6400d4 → 8.29:1 light · #dcbcff → 9.85:1 dark
+ *   unresolved --text-error #aa181f → 7.25:1 light · #eb7076 → 5.51:1 dark
+ * The TEXT tier, never `--destructive`: that is the FILL tier, tuned for a white label on top of
+ * it, and it measures 2.95:1 as ink on the dark card (gh#610).
+ */
+const WIKI_STYLESHEET = `
+[data-wiki] {
+  --prose-link-color: var(--text-link);
+}
+
+[data-wiki] a[data-unresolved="true"] {
+  --prose-link-color: var(--text-error);
+  text-decoration-style: dashed;
+}
+`;
+
 export default function Demo() {
   return (
     <PageContainer title="Prose" subtitle="レンダリングされた本文のタイポグラフィ">
@@ -99,6 +127,42 @@ export default function Demo() {
             </Prose>
           </CardContent>
         </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Wiki body · リンクの状態 (--prose-link-*)</CardTitle>
+            <CardDescription>
+              リンクの色と下線は --prose-link-color / --prose-link-decoration-line で調整する。Prose
+              は自身のルート以外に data-* を書かないため、a[data-…]
+              は利用側が所有するセレクタとして保証される。ここではまだ存在しないページへのリンクを
+              --text-error ＋破線で示した。カード面でのコントラストは、解決済み 8.29:1 (ライト) /
+              9.85:1 (ダーク)、未解決 7.25:1 / 5.51:1。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <style>{WIKI_STYLESHEET}</style>
+            <Prose size="md" data-wiki="">
+              <h2>出張費の精算</h2>
+              <p>
+                原則は <a href="#rules">精算規程</a> に従う。宿泊費の上限は地域区分で変わるため、
+                <a href="#lodging" data-unresolved="true">
+                  宿泊費区分表
+                </a>{" "}
+                を参照すること（このページはまだ書かれていない）。
+              </p>
+              <ul>
+                <li>
+                  <a href="#receipt">領収書の要件</a>
+                </li>
+                <li>
+                  <a href="#foreign" data-unresolved="true">
+                    海外出張の為替レート
+                  </a>
+                </li>
+              </ul>
+            </Prose>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/data-display/timeline.tsx

@@ -200,6 +200,42 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>月をまたぐ日単位の軸（bands）</CardTitle>
+            <CardDescription>
+              9月25日から10月7日まで。bands
+              の月の境界は、その月の1日の列の境界にぴったり重なります。
+              始まりが月の途中なので、最初の月の帯は6日分だけの幅です。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <RangeTimeline
+              label={t("rangeTimeline.schedule")}
+              bands={[
+                { label: monthLabel(8), units: 6 },
+                { label: monthLabel(9), units: 7 },
+              ]}
+              columns={Array.from({ length: 13 }, (_, index) => {
+                const date = new Date(Date.UTC(2026, 8, 25 + index));
+                return {
+                  label: new Intl.NumberFormat(locale).format(date.getUTCDate()),
+                  units: 1,
+                  muted: date.getUTCDay() === 0 || date.getUTCDay() === 6,
+                };
+              })}
+              rows={[
+                { id: "migration", label: "移行", start: 3, end: 8 },
+                { id: "october", label: "10月の作業", start: 6, end: 12 },
+              ].map((row) => ({
+                ...row,
+                startLabel: dayLabel(25 + row.start),
+                endLabel: dayLabel(25 + row.end),
+              }))}
+            />
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>月単位の軸（列ごとに units が異なる）</CardTitle>

package/docs/data-entry/calendar.tsx

@@ -77,9 +77,8 @@ export default function Demo() {
               罫線 (bordered) · 既定で表示 / bordered={"{false}"} で解除
             </CardTitle>
             <CardDescription>
-              日と日の間に罫線を引くのが既定。線色は --calendar-grid-border-color (既定
-              --input、背景に対し 3:1
-              以上)。選択日・今日・範囲の始点/中間/終点・無効日・前後月の日が
+              日と日の間に罫線を引くのが既定。線色は --calendar-grid-border-color (既定 --input の
+              50%、背景に対し約 1.7:1)。選択日・今日・範囲の始点/中間/終点・無効日・前後月の日が
               罫線の中でも判別できる。罫線なしの浮いたボタン表示にしたい場合のみ bordered=
               {"{false}"} を渡す。
             </CardDescription>

package/docs/data-entry/segmented.tsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { FormField, Segmented } from "@godxjp/ui/data-entry";
-import { Text, VisuallyHidden } from "@godxjp/ui/general";
+import { FormField, Segmented, ToggleGroup, ToggleGroupItem } from "@godxjp/ui/data-entry";
+import { Button, Text, VisuallyHidden } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 import { CalendarDays, Columns3, LayoutList, Monitor, Moon, Sun } from "lucide-react";
 
@@ -110,14 +110,25 @@ export default function Demo() {
           <CardHeader>
             <CardTitle level={2}>size · vertical · block</CardTitle>
             <CardDescription>
-              size は 3 段（sm / md / lg）。トラックの高さは --control-height そのもので、
-              MobileShell のようにその変数をスコープする領域では自動的にタッチ段（44px）になります。
-              vertical では 1 行ぶんが 1 コントロールの高さになります。横 1 行のときだけトラック
+              size は 4 段（xs 24px / sm 28px / md 32px / lg 36px）。トラックの高さは
+              --control-height そのもので、MobileShell のようにその変数をスコープする領域では
+              自動的にタッチ段（44px）になります。vertical では 1 行ぶんが 1
+              コントロールの高さになります。横 1 行のときだけトラック
               内側の余白を引くので、積んだときは引きません。block は幅いっぱいに広げます。
             </CardDescription>
           </CardHeader>
           <CardContent>
             <Flex direction="col" gap="md" align="start">
+              <Segmented
+                aria-label="サイズ xs"
+                size="xs"
+                defaultValue="a"
+                options={[
+                  { value: "a", label: "小" },
+                  { value: "b", label: "中" },
+                  { value: "c", label: "大" },
+                ]}
+              />
               <Segmented
                 aria-label="サイズ sm"
                 size="sm"
@@ -162,6 +173,45 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>24px の密な行 · size=&quot;xs&quot;</CardTitle>
+            <CardDescription>
+              行の高さが 24px に決まっている監査ログや明細ツールバーでは、xs
+              のトラックがそのまま収まる。同じ段の ToggleGroup size=&quot;xs&quot; と Button
+              size=&quot;xs&quot; と高さが一致するので、行が段差にならない。ここで xs
+              が無かったころは Button を並べて自作するしかなく、radiogroup
+              の読み上げも矢印キーも失われていた。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              <Flex direction="row" gap="sm" align="center">
+                <Segmented
+                  aria-label="表示期間"
+                  size="xs"
+                  defaultValue="week"
+                  options={[
+                    { value: "day", label: "日" },
+                    { value: "week", label: "週" },
+                    { value: "month", label: "月" },
+                  ]}
+                />
+                <ToggleGroup type="single" size="xs" defaultValue="list" aria-label="表示形式">
+                  <ToggleGroupItem value="list">一覧</ToggleGroupItem>
+                  <ToggleGroupItem value="board">ボード</ToggleGroupItem>
+                </ToggleGroup>
+                <Button size="xs" variant="outline">
+                  絞り込み
+                </Button>
+              </Flex>
+              <Text as="p" size="xs" tone="muted">
+                いずれも --control-height-xs（24px）。
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>短い記号を出して、長い名前を読ませる</CardTitle>

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

@@ -129,14 +129,26 @@ export default function Demo() {
 
         <Card>
           <CardHeader>
-            <CardTitle level={2}>size · sm / md / lg</CardTitle>
+            <CardTitle level={2}>size · xs / sm / md / lg</CardTitle>
             <CardDescription>
-              size も ToggleGroup にだけ指定すれば全アイテムへ伝播する。md
-              が既定。周囲のコントロール密度に合わせて sm または lg を選ぶ。
+              size も ToggleGroup にだけ指定すれば全アイテムへ伝播する。md が既定。xs 24px / sm 28px
+              / md 32px / lg 36px はすべて --control-height
+              の同じ段なので、行の高さが先に決まっている場所ではその段を選ぶ。xs は 24px
+              の密な行にセグメントを載せるための段。
             </CardDescription>
           </CardHeader>
           <CardContent>
             <Flex direction="col" gap="md">
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  size=&quot;xs&quot; · 24px の密な行
+                </Text>
+                <ToggleGroup type="single" size="xs" defaultValue="day">
+                  <ToggleGroupItem value="day">日次</ToggleGroupItem>
+                  <ToggleGroupItem value="month">月次</ToggleGroupItem>
+                  <ToggleGroupItem value="year">年次</ToggleGroupItem>
+                </ToggleGroup>
+              </Flex>
               <Flex direction="col" gap="sm">
                 <Text as="p" size="sm" tone="muted">
                   size=&quot;sm&quot;

package/docs/data-entry/toggle.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
 import { Toggle } from "@godxjp/ui/data-entry";
+import { Button, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
 /**
@@ -73,10 +74,18 @@ export default function Demo() {
         <Card>
           <CardHeader>
             <CardTitle level={2}>Sizes</CardTitle>
-            <CardDescription>sm / md / lg · match surrounding density.</CardDescription>
+            <CardDescription>
+              xs 24px / sm 28px / md 32px / lg 36px · すべて --control-height
+              の同じ段。行の高さが先に決まっている場所では、その段を選ぶ。xs は 24px
+              の密な行にセグメント状のチップを載せるための段で、Button
+              を並べて自作する代わりになる。
+            </CardDescription>
           </CardHeader>
           <CardContent>
             <Flex direction="row" gap="md" align="center">
+              <Toggle size="xs" aria-label="極小サイズ">
+                極小
+              </Toggle>
               <Toggle size="sm" aria-label="小サイズ">
                 小
               </Toggle>
@@ -90,6 +99,35 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>24px の密な行 · size=&quot;xs&quot;</CardTitle>
+            <CardDescription>
+              行の高さが 24px に決まっている監査ログや明細ツールバーでは、xs
+              のチップがそのまま収まる。同じ段の Button size=&quot;xs&quot;
+              と高さが一致するので、行が段差にならない。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              <Flex direction="row" gap="sm" align="center">
+                <Toggle size="xs" defaultPressed aria-label="未読のみ">
+                  未読のみ
+                </Toggle>
+                <Toggle size="xs" aria-label="添付あり">
+                  添付あり
+                </Toggle>
+                <Button size="xs" variant="outline">
+                  絞り込み
+                </Button>
+              </Flex>
+              <Text as="p" size="xs" tone="muted">
+                いずれも --control-height-xs（24px）。
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Count</CardTitle>

package/docs/data-entry/upload.tsx

@@ -36,6 +36,25 @@ export default function Demo() {
   const [pictureItem, setPictureItem] = useState<UploadFileItem[]>([]);
   const [avatarItem, setAvatarItem] = useState<UploadFileItem[]>([]);
   const [avatarCropItem, setAvatarCropItem] = useState<UploadFileItem[]>([]);
+  /** A test-result drawer: one screenshot, one machine-readable result, one log, one archive. */
+  const mixedItems: UploadFileItem[] = [
+    {
+      uid: "mixed-screenshot",
+      name: "screenshot.png",
+      size: 184 * 1024,
+      mimeType: "image/png",
+      status: "done",
+      previewUrl:
+        "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72'><rect width='72' height='72' fill='%23c9c6bd'/><circle cx='26' cy='26' r='9' fill='%238a877d'/></svg>",
+    },
+    // Server media whose thumbnail has not been generated yet: still an image, still marked as one.
+    { uid: "mixed-original", name: "photo-original.png", size: 4 * 1024 * 1024, status: "done" },
+    { uid: "mixed-result", name: "result.json", size: 12 * 1024, status: "done" },
+    { uid: "mixed-log", name: "run.txt", size: 3 * 1024, status: "done" },
+    { uid: "mixed-bundle", name: "evidence.zip", size: 2 * 1024 * 1024, status: "done" },
+    { uid: "mixed-spec", name: "spec.pdf", size: 640 * 1024, status: "done" },
+    { uid: "mixed-dump", name: "device-dump", size: 96 * 1024, status: "done" },
+  ];
   const failedItems: UploadFileItem[] = [
     {
       uid: "failed-invoice",
@@ -105,6 +124,25 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>List type · 添付ファイル一覧</CardTitle>
+            <CardDescription>
+              listType は variant と独立した軸です。dropzone のまま listType=&quot;picture&quot;
+              にすると、画像はサムネイル、それ以外はファイル種別のアイコンで並びます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Upload
+              variant="dropzone"
+              listType="picture"
+              value={mixedItems}
+              onValueChange={() => {}}
+              onDownload={() => {}}
+            />
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Error and recovery</CardTitle>

package/package.json

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