@godxjp/ui 27.4.1 → 27.5.0

package/dist/components/data-entry/upload-file-kind.d.ts

@@ -0,0 +1,25 @@
+/**
+ * What a listed file IS, at the coarseness a row can actually draw (gh#720).
+ *
+ * A picture list shows a thumbnail for an image and a glyph for everything else, so the buckets
+ * are exactly the marks we have: five, not one per MIME type. The kind is also written onto the
+ * row as `data-file-kind`, so a service can retint a bucket without forking the component.
+ */
+export type UploadFileKind = "image" | "pdf" | "archive" | "text" | "file";
+/** The kind of one listed file, from its MIME type when it has one and its extension otherwise. */
+export declare function uploadFileKind(item: {
+    name?: string;
+    mimeType?: string;
+}): UploadFileKind;
+/**
+ * The mark per kind. PDF takes the prose-lines document (`FileText`) because lucide ships no PDF
+ * glyph, which is also why plain/structured text takes the `</>` mark rather than the same one: a
+ * `.pdf` and a `.json` on adjacent rows must not draw identically.
+ */
+export declare const UPLOAD_FILE_KIND_GLYPHS: {
+    readonly image: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly pdf: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly archive: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly text: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly file: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+};

package/dist/components/data-entry/upload-file-kind.js

@@ -0,0 +1,88 @@
+import { File as FileGlyph, FileArchive, FileCode, FileImage, FileText } from "lucide-react";
+const MIME_KINDS = {
+  "application/pdf": "pdf",
+  "application/x-pdf": "pdf",
+  "application/zip": "archive",
+  "application/x-zip-compressed": "archive",
+  "application/x-7z-compressed": "archive",
+  "application/vnd.rar": "archive",
+  "application/x-rar-compressed": "archive",
+  "application/gzip": "archive",
+  "application/x-tar": "archive",
+  "application/x-bzip": "archive",
+  "application/x-bzip2": "archive",
+  "application/json": "text",
+  "application/ld+json": "text",
+  "application/xml": "text",
+  "application/yaml": "text",
+  "application/x-yaml": "text"
+};
+const EXTENSION_KINDS = {
+  png: "image",
+  jpg: "image",
+  jpeg: "image",
+  gif: "image",
+  webp: "image",
+  avif: "image",
+  svg: "image",
+  bmp: "image",
+  ico: "image",
+  heic: "image",
+  heif: "image",
+  tif: "image",
+  tiff: "image",
+  pdf: "pdf",
+  zip: "archive",
+  tar: "archive",
+  gz: "archive",
+  tgz: "archive",
+  rar: "archive",
+  "7z": "archive",
+  bz2: "archive",
+  xz: "archive",
+  zst: "archive",
+  txt: "text",
+  md: "text",
+  markdown: "text",
+  json: "text",
+  jsonl: "text",
+  csv: "text",
+  tsv: "text",
+  log: "text",
+  xml: "text",
+  yml: "text",
+  yaml: "text",
+  html: "text",
+  htm: "text",
+  css: "text",
+  js: "text",
+  ts: "text"
+};
+function uploadFileKind(item) {
+  const mime = item.mimeType?.trim().toLowerCase();
+  if (mime) {
+    if (mime.startsWith("image/")) return "image";
+    if (mime.startsWith("text/")) return "text";
+    const known = MIME_KINDS[mime];
+    if (known) return known;
+  }
+  const name = item.name ?? "";
+  const dot = name.lastIndexOf(".");
+  if (dot > 0) {
+    const extension = name.slice(dot + 1).toLowerCase();
+    const known = EXTENSION_KINDS[extension];
+    if (known) return known;
+  }
+  return "file";
+}
+const UPLOAD_FILE_KIND_GLYPHS = {
+  image: FileImage,
+  pdf: FileText,
+  archive: FileArchive,
+  text: FileCode,
+  file: FileGlyph
+};
+export {
+  UPLOAD_FILE_KIND_GLYPHS,
+  uploadFileKind
+};

package/dist/components/data-entry/upload.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { UploadProp } from "../../props/components/data-entry.prop.js";
-export type { UploadProp, UploadProp as UploadProps, UploadFileItemProp, UploadVariantProp, } from "../../props/components/data-entry.prop.js";
+export type { UploadProp, UploadProp as UploadProps, UploadFileItemProp, UploadVariantProp, UploadListTypeProp, } from "../../props/components/data-entry.prop.js";
 export type { UploadFileItem, UploadVariant, UploadCommitAction } from "./upload-types.js";
 export { collectUploadCommitActions, createUploadItem, UPLOAD_LIST_IGNORE } from "./upload-types.js";
 export { useUploadDraft } from "./use-upload-draft.js";
-export declare function Upload({ variant, triggerSize, triggerVariant, value, defaultValue, onValueChange, accept: acceptProp, multiple: multipleProp, maxCount: maxCountProp, maxSizeBytes, disabled: disabledProp, readOnly, directory, pastable, openFileDialogOnClick, name, action, method, headers, data, withCredentials, beforeUpload, onReject, onRemove, onPreview, onDownload, previewFile, onDrop, showUploadList, itemRender, removable, onUpload, id, className, children, ...ariaProps }: UploadProp): React.JSX.Element;
+export declare function Upload({ variant, listType, triggerSize, triggerVariant, value, defaultValue, onValueChange, accept: acceptProp, multiple: multipleProp, maxCount: maxCountProp, maxSizeBytes, disabled: disabledProp, readOnly, directory, pastable, openFileDialogOnClick, name, action, method, headers, data, withCredentials, beforeUpload, onReject, onRemove, onPreview, onDownload, previewFile, onDrop, showUploadList, itemRender, removable, onUpload, id, className, children, ...ariaProps }: UploadProp): React.JSX.Element;

package/dist/components/data-entry/upload.js

@@ -15,9 +15,10 @@ import { useTranslation } from "../../i18n/use-translation.js";
 import { formatBytes } from "../../lib/format.js";
 import { cn } from "../../lib/utils.js";
 import { resolveFieldA11y } from "../../lib/field-a11y.js";
-import { controlIconClass } from "../../lib/control-styles.js";
 import { Button } from "../general/button.js";
+import { Icon } from "../general/icon.js";
 import { UploadCropDialog } from "./upload-crop-dialog.js";
+import { UPLOAD_FILE_KIND_GLYPHS, uploadFileKind } from "./upload-file-kind.js";
 import {
   UPLOAD_LIST_IGNORE,
   createUploadItem,
@@ -66,6 +67,7 @@ function useUploadList(controlled, defaultValue, onValueChange) {
 }
 function Upload({
   variant = "dropzone",
+  listType,
   triggerSize,
   triggerVariant = "outline",
   value,
@@ -109,6 +111,7 @@ function Upload({
     triggerOwnsAriaLabel ? { ...ariaProps, "aria-label": void 0 } : ariaProps,
     t("dataEntry.upload.inputLabel")
   );
+  const resolvedListType = listType ?? (variant === "picture" ? "picture" : "text");
   const accept = acceptProp ?? defaultAcceptForVariant(variant);
   const maxCount = maxCountProp ?? defaultMaxCount(variant);
   const multiple = multipleProp ?? (maxCount === 1 ? false : true);
@@ -380,7 +383,7 @@ function Upload({
       hasCustomPreview: Boolean(onPreview),
       onDownload,
       itemRender,
-      showThumbnails: variant === "picture"
+      listType: resolvedListType
     }
   ) : null;
   const hiddenInput = /* @__PURE__ */ jsx(
@@ -571,7 +574,7 @@ function Upload({
           onClick: openPicker,
           className: "ui-upload-picture-empty",
           children: [
-            /* @__PURE__ */ jsx(ImagePlus, { className: controlIconClass, "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx(ImagePlus, { className: "ui-upload-picture-empty-icon", "aria-hidden": "true" }),
             /* @__PURE__ */ jsx("span", { className: "ui-upload-picture-empty-label", children: t("dataEntry.upload.addImage") })
           ]
         }
@@ -621,7 +624,7 @@ function Upload({
           className: "ui-upload-avatar ui-focus-ring",
           "aria-label": t("dataEntry.upload.avatarLabel"),
           children: [
-            !showPlaceholder && item?.previewUrl ? /* @__PURE__ */ jsx("img", { src: item.previewUrl, alt: "", className: "ui-upload-avatar-image" }) : /* @__PURE__ */ jsx("span", { className: "ui-upload-avatar-placeholder", children: /* @__PURE__ */ jsx(Camera, { className: controlIconClass, "aria-hidden": "true" }) }),
+            !showPlaceholder && item?.previewUrl ? /* @__PURE__ */ jsx("img", { src: item.previewUrl, alt: "", className: "ui-upload-avatar-image" }) : /* @__PURE__ */ jsx("span", { className: "ui-upload-avatar-placeholder", children: /* @__PURE__ */ jsx(Camera, { className: "ui-upload-avatar-icon", "aria-hidden": "true" }) }),
             !disabled && /* @__PURE__ */ jsx("span", { className: "ui-upload-avatar-change", children: t("dataEntry.upload.change") })
           ]
         }
@@ -750,12 +753,13 @@ function UploadFileList({
   hasCustomPreview,
   onDownload,
   itemRender,
-  showThumbnails
+  listType
 }) {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsx("ul", { className: "ui-stack-xs", children: items.map((item) => {
+    const kind = uploadFileKind(item);
     const node = /* @__PURE__ */ jsxs("div", { className: "ui-upload-row", children: [
-      showThumbnails && item.previewUrl && /* @__PURE__ */ jsx("img", { src: item.previewUrl, alt: "", className: "ui-upload-list-thumb" }),
+      listType === "picture" && (item.previewUrl ? /* @__PURE__ */ jsx("img", { src: item.previewUrl, alt: "", className: "ui-upload-list-thumb" }) : /* @__PURE__ */ jsx("span", { className: "ui-upload-list-glyph", "data-file-kind": kind, children: /* @__PURE__ */ jsx(Icon, { as: UPLOAD_FILE_KIND_GLYPHS[kind], size: "lg" }) })),
       /* @__PURE__ */ jsxs("div", { className: "ui-upload-row-main", children: [
         /* @__PURE__ */ jsx("div", { className: "truncate font-medium", children: item.name }),
         /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground text-xs", children: [

package/dist/components/ui/avatar.d.ts

@@ -19,7 +19,7 @@ import type { AvatarProp } from "../../props/components/data-display.prop.js";
 type ImageLoadingStatus = "idle" | "loading" | "loaded" | "error";
 export declare const Avatar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     asChild?: boolean;
-} & Pick<AvatarProp, "appearance" | "presence" | "presenceLabel" | "shape"> & React.RefAttributes<HTMLSpanElement>>;
+} & Pick<AvatarProp, "appearance" | "presence" | "presenceLabel" | "shape" | "size"> & React.RefAttributes<HTMLSpanElement>>;
 export declare const AvatarImage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
     asChild?: boolean;
     onLoadingStatusChange?: (status: ImageLoadingStatus) => void;

package/dist/components/ui/avatar.js

@@ -53,6 +53,7 @@ const Avatar = React.forwardRef(
   ({
     className,
     shape = "circle",
+    size = "md",
     appearance = "default",
     presence,
     presenceLabel,
@@ -73,6 +74,7 @@ const Avatar = React.forwardRef(
         ref,
         "data-slot": "avatar",
         "data-shape": shape === "square" ? "square" : void 0,
+        "data-size": size === "md" ? void 0 : size,
         "data-appearance": appearance === "tinted" ? "tinted" : void 0,
         "data-presence": presence,
         className: cn("ui-avatar", className),

package/dist/components/ui/segmented.d.ts

@@ -42,8 +42,13 @@ export type SegmentedProp = {
     block?: boolean;
     /** antd `vertical` — stack the choices in a column. Arrow keys follow the axis. */
     vertical?: boolean;
-    /** Control height tier: `md` (default), `sm` or `lg` — the same tiers as every other control. */
-    size?: "sm" | "md" | "lg";
+    /**
+     * Control height tier: `md` (default), `xs`, `sm` or `lg` — the same `--control-height-*` tier
+     * every other control reads. `xs` is the fourth step (gh#719, the one Toggle/ToggleGroup took in
+     * gh#716): a 24px-dense row can carry a real segmented control instead of a hand-rolled row of
+     * Buttons.
+     */
+    size?: "xs" | "sm" | "md" | "lg";
     /** Disable the whole group. */
     disabled?: boolean;
     /** Form field name — submits the selected value with the form. */

package/dist/components/ui/toggle.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "lg" | "md" | "sm" | null | undefined;
+    size?: "lg" | "md" | "sm" | "xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Not exported on its own — it is folded into `ToggleProp` and `ToggleGroupItemProp` so there is
@@ -69,7 +69,7 @@ export type ToggleProp = React.ComponentPropsWithoutRef<"button"> & TogglePresse
 export type ToggleProps = ToggleProp;
 export declare const Toggle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & TogglePressedFields & VariantProps<(props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "lg" | "md" | "sm" | null | undefined;
+    size?: "lg" | "md" | "sm" | "xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & ToggleCountFields & React.RefAttributes<HTMLButtonElement>>;
 export { toggleVariants, useCounterPill, restoreDomProps };
 export type { ToggleCountFields, TogglePressedFields };

package/dist/components/ui/toggle.js

@@ -13,6 +13,10 @@ const toggleVariants = cva("ui-toggle", {
       outline: "ui-toggle-outline"
     },
     size: {
+      // The fourth step of the shared control ladder (gh#716): 24px, `--control-height-xs`, the
+      // same tier `Button size="xs"` reads — so a 24px-dense row can carry a segmented control
+      // instead of someone hand-rolling one out of Buttons.
+      xs: "ui-toggle-xs",
       sm: "ui-toggle-sm",
       md: "ui-toggle-default-size",
       lg: "ui-toggle-lg"

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "27.4.1",
+  "version": "27.5.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/props/components/data-display.prop.d.ts

@@ -208,6 +208,20 @@ export type DescriptionsItemProp = {
  */
 export type AvatarProp = React.ComponentPropsWithoutRef<"span"> & {
     shape?: AvatarShapeProp;
+    /**
+     * Box size on the shared control ladder — `md` (default) is `--control-height`, and `xs`/`sm`/
+     * `lg` are `--control-height-xs/-sm/-lg`, the SAME tier Button and Input read. State it when the
+     * mark has to sit in a row the row's height already decided: inside an `icon-sm` trigger, in a
+     * 24px dense table row, beside a `size="sm"` Button. Before gh#716 the box was welded to
+     * `--control-height`, so a 32px mark inside a 28px trigger overflowed it and the only legal move
+     * left was raising the whole row.
+     *
+     * The initials' type step and a glyph's box move with the box — one step of the type scale and
+     * one step of the `--icon-size-*` scale per step — so a small mark is small, not clipped.
+     * `shape="square"` rides the identical ladder. Beyond the ladder (a 96px profile mark) is a
+     * `className` size utility, exactly as before; the ladder is for the control row.
+     */
+    size?: SizeProp;
     appearance?: AvatarAppearanceProp;
     /**
      * Presence — WHO is reachable right now, drawn as an indicator at the block-end/inline-end

package/dist/props/components/data-entry.prop.d.ts

@@ -1464,9 +1464,34 @@ export type SelectDataProp = SearchSelectBaseProp & {
 export type UploadFileItemProp = UploadFileItem;
 /** @see Upload */
 export type UploadVariantProp = "dropzone" | "button" | "picture-card" | "picture" | "avatar" | "avatar-crop";
+/**
+ * Upload `listType` — HOW THE CHOSEN FILES ARE LISTED, ported from antd (gh#720).
+ *
+ * antd separates two axes and this component had only one: `variant` says how a file is PICKED
+ * (drag area, button, tile grid, avatar), `listType` says how the picked ones are DRAWN. Welding
+ * the second onto the first meant a `variant="dropzone"` could not show a thumbnail even for an
+ * item that already carried a `previewUrl`, and its rows carried no per-type mark at all — a
+ * drawer listing a `.png` beside a `.json` and a `.txt` could draw only three identical
+ * name-and-size rows.
+ *
+ * - `text` — name, size, actions. The row every dropzone/button list has always drawn.
+ * - `picture` — a leading box on every row: the thumbnail when the item has a `previewUrl`, and
+ *   otherwise the glyph for its file kind (image / pdf / archive / text / generic). Both boxes are
+ *   the same size, so a mixed list keeps one row height.
+ *
+ * antd's third value, `picture-card`, is `variant="picture-card"` here: in that variant the tile
+ * grid IS the picker (the add tile sits inside the grid), so it is not a listing that can be put
+ * under a different trigger. It is deliberately not offered as a `listType`.
+ */
+export type UploadListTypeProp = "text" | "picture";
 /** @see Upload — presentational; wire `onUpload` to media-service in app api.ts */
 export type UploadProp = FieldA11yProps & {
     variant?: UploadVariantProp;
+    /**
+     * @see UploadListTypeProp — an axis of its own, independent of `variant`. Defaults to the
+     * listing each variant already drew: `picture` for `variant="picture"`, `text` everywhere else.
+     */
+    listType?: UploadListTypeProp;
     value?: ValueProp<UploadFileItemProp[]>;
     defaultValue?: DefaultValueProp<UploadFileItemProp[]>;
     onValueChange?: OnValueChangeProp<UploadFileItemProp[]>;

package/dist/props/registry.d.ts

@@ -1650,6 +1650,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/data-entry.prop.ts";
         readonly vocabulary: readonly [];
     };
+    readonly UploadListTypeProp: {
+        readonly group: "data-entry";
+        readonly file: "components/data-entry.prop.ts";
+        readonly vocabulary: readonly [];
+    };
     readonly TreeOptionProp: {
         readonly group: "data-entry";
         readonly file: "components/data-entry.prop.ts";
@@ -1708,7 +1713,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly AvatarProp: {
         readonly group: "data-display";
         readonly file: "components/data-display.prop.ts";
-        readonly vocabulary: readonly ["AvatarShapeProp", "LabelProp", "ChildrenProp", "ClassNameProp"];
+        readonly vocabulary: readonly ["AvatarShapeProp", "SizeProp", "LabelProp", "ChildrenProp", "ClassNameProp"];
     };
     readonly AvatarAppearanceProp: {
         readonly group: "data-display";

package/dist/props/registry.js

@@ -1935,6 +1935,11 @@ const COMPONENT_PROP_REGISTRY = {
     vocabulary: []
   },
   UploadVariantProp: { group: "data-entry", file: "components/data-entry.prop.ts", vocabulary: [] },
+  UploadListTypeProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: []
+  },
   TreeOptionProp: {
     group: "data-entry",
     file: "components/data-entry.prop.ts",
@@ -2042,7 +2047,7 @@ const COMPONENT_PROP_REGISTRY = {
   AvatarProp: {
     group: "data-display",
     file: "components/data-display.prop.ts",
-    vocabulary: ["AvatarShapeProp", "LabelProp", "ChildrenProp", "ClassNameProp"]
+    vocabulary: ["AvatarShapeProp", "SizeProp", "LabelProp", "ChildrenProp", "ClassNameProp"]
   },
   AvatarAppearanceProp: {
     group: "data-display",

package/dist/styles/control.css

@@ -31,6 +31,12 @@
     padding-inline: var(--space-3);
   }
 
+  .ui-toggle-xs {
+    min-height: var(--control-height-xs);
+    padding-inline: var(--space-1);
+    font-size: var(--toggle-xs-font-size);
+  }
+
   .ui-toggle-sm {
     min-height: var(--control-height-sm);
     padding-inline: var(--space-2);
@@ -3135,6 +3141,12 @@
     justify-content: flex-start;
   }
 
+  .ui-segmented[data-size="xs"] {
+    --control-height: var(--control-height-xs);
+    --segmented-item-padding-inline: var(--segmented-xs-item-padding-inline);
+    font-size: var(--segmented-xs-font-size);
+  }
+
   .ui-segmented[data-size="sm"] {
     --control-height: var(--control-height-sm);
   }

package/dist/styles/data-display-layout.css

@@ -2,8 +2,8 @@
   .ui-avatar {
     position: relative;
     display: inline-flex;
-    width: var(--control-height);
-    height: var(--control-height);
+    width: var(--avatar-size);
+    height: var(--avatar-size);
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
@@ -13,7 +13,7 @@
       linear-gradient(var(--avatar-tint), var(--avatar-tint)),
       var(--avatar-background, hsl(var(--muted)));
     color: hsl(var(--muted-foreground));
-    font-size: var(--font-size-base);
+    font-size: var(--avatar-font-size);
     font-weight: var(--font-weight-medium);
   }
 
@@ -36,6 +36,36 @@
     flex: none;
   }
 
+  .ui-avatar[data-size="xs"] {
+    --avatar-size: var(--avatar-size-xs);
+    --avatar-square-size: var(--avatar-size-xs);
+    --avatar-font-size: var(--avatar-font-size-xs);
+    --avatar-glyph-size: var(--avatar-glyph-size-xs);
+    --avatar-tinted-glyph-size: var(--avatar-glyph-size-xs);
+  }
+
+  .ui-avatar[data-size="sm"] {
+    --avatar-size: var(--avatar-size-sm);
+    --avatar-square-size: var(--avatar-size-sm);
+    --avatar-font-size: var(--avatar-font-size-sm);
+    --avatar-glyph-size: var(--avatar-glyph-size-sm);
+    --avatar-tinted-glyph-size: var(--avatar-glyph-size-sm);
+  }
+
+  .ui-avatar[data-size="lg"] {
+    --avatar-size: var(--avatar-size-lg);
+    --avatar-square-size: var(--avatar-size-lg);
+    --avatar-font-size: var(--avatar-font-size-lg);
+    --avatar-glyph-size: var(--avatar-glyph-size-lg);
+    --avatar-tinted-glyph-size: var(--avatar-glyph-size-lg);
+  }
+
+  .ui-avatar[data-size] svg {
+    inline-size: var(--avatar-glyph-size);
+    block-size: var(--avatar-glyph-size);
+    flex: none;
+  }
+
   .ui-avatar-image {
     width: 100%;
     height: 100%;
@@ -1066,8 +1096,8 @@
   }
 
   .ui-prose a {
-    color: hsl(var(--primary));
-    text-decoration: underline;
+    color: hsl(var(--prose-link-color, var(--primary)));
+    text-decoration-line: var(--prose-link-decoration-line);
   }
 
   .ui-prose table {

package/dist/styles/data-entry-layout.css

@@ -199,6 +199,18 @@
     flex-shrink: 0;
   }
 
+  .ui-upload-list-glyph {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--control-height-lg);
+    block-size: var(--control-height-lg);
+    border-radius: var(--radius);
+    background-color: hsl(var(--muted));
+    color: hsl(var(--muted-foreground));
+    flex-shrink: 0;
+  }
+
   .ui-upload-picture-item {
     inline-size: var(--upload-tile-size);
     overflow-wrap: anywhere;
@@ -336,6 +348,11 @@
     border-color: hsl(var(--primary));
   }
 
+  .ui-upload-picture-empty-icon {
+    inline-size: var(--upload-picture-icon-size);
+    block-size: var(--upload-picture-icon-size);
+  }
+
   .ui-upload-picture-empty-label {
     margin-block-start: var(--upload-picture-empty-label-space-block-start);
     font-size: var(--upload-picture-empty-label-font-size);
@@ -370,6 +387,11 @@
     color: hsl(var(--muted-foreground));
   }
 
+  .ui-upload-avatar-icon {
+    inline-size: var(--upload-avatar-icon-size);
+    block-size: var(--upload-avatar-icon-size);
+  }
+
   .ui-upload-avatar-change {
     position: absolute;
     inset-inline: 0;

package/dist/tokens/components/control.css

@@ -166,6 +166,7 @@
   --search-input-label-font-size: var(--font-size-xs);
   --tag-input-chip-font-size: var(--font-size-xs);
   --toggle-sm-font-size: var(--font-size-xs);
+  --toggle-xs-font-size: var(--font-size-xs);
   --button-sm-font-size: var(--font-size-xs);
 }
 

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-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.5.0",
+  "godxUiMcp": "27.5.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",