@godxjp/ui 27.3.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/general/icon.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+export type { IconGlyphProp, IconGlyphProp as IconProps, } from "../../props/components/general.prop.js";
+/**
+ * Icon — a glyph on the `--icon-size-*` scale, and the only supported way to draw a standalone one.
+ *
+ * WHY THIS EXISTS (gh#712). A lucide component ships `width="24" height="24"`, and exactly four
+ * rules in this library ever override that: `.ui-button svg`, `.ui-dropdown-menu-item > svg`,
+ * `.ui-topbar-item > svg` and `[data-slot="list-row-leading"] > svg`. Anywhere else — in a `Text`,
+ * in a table cell, in an `<a>` — the glyph draws at 24px beside 14px type, 1.71× the text it
+ * annotates. A consumer cannot fix that themselves: `size-4` and `w-[16px]` are what
+ * docs/CONSUMER-RULES.md §3/§8 forbid, and `size={16}` hard-codes a number the theme owns. One
+ * consumer measured 38 such glyphs in a single app.
+ *
+ * RENDERS ONTO THE GLYPH, NOT AROUND IT. `as={Lock}` is invoked with the class, the size and the
+ * a11y wiring, so the element that carries the metric IS the `<svg>`. A wrapper `<span>` would add
+ * a box to every flex row that holds an icon, and would break `Button`'s own `svg` rule by putting
+ * an element between the two.
+ *
+ * DECORATIVE BY DEFAULT. Without `label` the glyph is `aria-hidden` — a glyph beside a visible
+ * label is decoration, and announcing it twice is the usual defect (WCAG 2.2 SC 1.1.1). Pass
+ * `label` only when the glyph is the ONLY thing saying what it says; it then renders as
+ * `role="img"` + that name, which is how a graphic gets a name in WAI-ARIA 1.2. The string is the
+ * consumer's to localize — the library ships no copy for it.
+ */
+export declare const Icon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "children" | "ref"> & {
+    as: React.ComponentType<React.SVGProps<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+    size?: import("../../props/index.js").IconSizeProp;
+    tone?: import("../../props/index.js").TextToneProp;
+    label?: string;
+    className?: import("../../props/index.js").ClassNameProp;
+} & React.RefAttributes<SVGSVGElement>>;

package/dist/components/general/icon.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+const Icon = React.forwardRef(function Icon2({ as: Glyph, size = "md", tone, label, className, ...props }, ref) {
+  const named = label !== void 0 && label !== "";
+  return /* @__PURE__ */ jsx(
+    Glyph,
+    {
+      ref,
+      "data-slot": "icon",
+      "data-size": size,
+      "data-tone": tone,
+      className: cn("ui-icon", className),
+      role: named ? "img" : void 0,
+      "aria-label": named ? label : void 0,
+      "aria-hidden": named ? void 0 : true,
+      ...props
+    }
+  );
+});
+export {
+  Icon
+};

package/dist/components/general/index.d.ts

@@ -2,6 +2,8 @@ export { Button, buttonVariants } from "./button.js";
 export type { ButtonProps } from "./button.js";
 export { Text, Heading, Typography, Title, Paragraph, Link } from "./typography.js";
 export type { TextProps, HeadingProps, TextProp, HeadingProp, TypographyProp, TypographyProps, TypographyBlockProp, TypographyTitleProp, TitleProps, ParagraphProp, ParagraphProps, LinkProp, LinkProps, } from "./typography.js";
+export { Icon } from "./icon.js";
+export type { IconGlyphProp, IconProps } from "./icon.js";
 export { Logo } from "./logo.js";
 export type { LogoMark, LogoProps, LogoSize, LogoTone } from "./logo.js";
 export { Reveal } from "./reveal.js";

package/dist/components/general/index.js

@@ -1,5 +1,6 @@
 import { Button, buttonVariants } from "./button.js";
 import { Text, Heading, Typography, Title, Paragraph, Link } from "./typography.js";
+import { Icon } from "./icon.js";
 import { Logo } from "./logo.js";
 import { Reveal } from "./reveal.js";
 import { FloatButton } from "./float-button.js";
@@ -15,6 +16,7 @@ export {
   Button,
   FloatButton,
   Heading,
+  Icon,
   Link,
   Logo,
   Paragraph,

package/dist/components/layout/flex.d.ts

@@ -1,3 +1,3 @@
 import type { FlexProp } from "../../props/components/layout.prop.js";
-export type { FlexAlignProp, FlexDirectionProp, FlexJustifyProp, FlexProp, FlexProp as FlexProps, } from "../../props/components/layout.prop.js";
-export declare function Flex({ as: Element, direction, grow, shrink, surface, bleed, reveal, gap, gapRaw, pad, padRaw, align, justify, wrap, hideBelow, hideFrom, hideBelowRaw, hideFromRaw, fill, width, className, style, children, ...props }: FlexProp): import("react").JSX.Element;
+export type { FlexAlignProp, FlexDirectionProp, FlexJustifyProp, FlexMarkerProp, FlexProp, FlexProp as FlexProps, } from "../../props/components/layout.prop.js";
+export declare function Flex({ as: Element, direction, marker, grow, shrink, surface, bleed, reveal, gap, gapRaw, pad, padRaw, align, justify, wrap, hideBelow, hideFrom, hideBelowRaw, hideFromRaw, fill, width, className, style, children, ...props }: FlexProp): import("react").JSX.Element;

package/dist/components/layout/flex.js

@@ -6,9 +6,15 @@ import { flexGapClass, padStyle, padStepToken } from "../../lib/variants.js";
 const toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
 const rawBreakpoint = (value) => typeof value === "number" && Number.isFinite(value) ? value : void 0;
 const rawBreakpointRule = (axis, px) => `@media (width ${axis === "below" ? "<" : ">="} ${px}px){.ui-flex[data-hide-${axis}-raw="${px}"]{display:none}}`;
+const listMarker = (element, marker) => {
+  if (element !== "ul" && element !== "ol") return void 0;
+  const resolved = marker ?? (element === "ul" ? "disc" : "decimal");
+  return resolved === "none" ? void 0 : resolved;
+};
 function Flex({
   as: Element = "div",
   direction = "row",
+  marker,
   grow,
   shrink,
   surface,
@@ -65,7 +71,7 @@ function Flex({
       "data-shrink": shrink === false ? "false" : void 0,
       "data-surface": surface,
       "data-reveal": reveal,
-      "data-list": Element === "ul" ? "disc" : Element === "ol" ? "decimal" : void 0,
+      "data-list": listMarker(Element, marker),
       "data-align": align,
       "data-justify": justify,
       "data-wrap": wrap ? "true" : void 0,

package/dist/components/layout/topbar-item.d.ts

@@ -12,6 +12,7 @@ export type { TopbarItemProp, TopbarItemProp as TopbarItemProps, } from "../../p
  */
 export declare const TopbarItem: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
     hideBelow?: import("../../props/index.js").BreakpointProp;
+    icon?: React.ReactNode;
     badge?: React.ReactNode;
     badgeTone?: import("../../props/components/layout.prop.js").SidebarBadgeToneProp;
     asChild?: boolean;

package/dist/components/layout/topbar-item.js

@@ -2,9 +2,10 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Slot } from "../../lib/slot.js";
 import { cn } from "../../lib/utils.js";
-const TopbarItem = React.forwardRef(function TopbarItem2({ asChild = false, className, type, hideBelow, badge, badgeTone, children, ...props }, ref) {
+const TopbarItem = React.forwardRef(function TopbarItem2({ asChild = false, className, type, hideBelow, icon, badge, badgeTone, children, ...props }, ref) {
   const Comp = asChild ? Slot : "button";
   const showBadge = !asChild && badge !== void 0 && badge !== "";
+  const iconNode = !asChild && icon !== void 0 && icon !== null && icon !== false ? /* @__PURE__ */ jsx("span", { "data-slot": "topbar-item-icon", className: "ui-topbar-item-icon", children: icon }) : null;
   const badgeNode = showBadge ? /* @__PURE__ */ jsx(
     "span",
     {
@@ -24,6 +25,7 @@ const TopbarItem = React.forwardRef(function TopbarItem2({ asChild = false, clas
       type: asChild ? void 0 : type ?? "button",
       ...props,
       children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        iconNode,
         children,
         badgeNode
       ] })

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.3.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/components/general.prop.d.ts

@@ -1,6 +1,6 @@
 /** Foundation component prop types — @see docs/COMPONENTS.md#foundation */
 import type * as React from "react";
-import type { ActivityAnnounceProp, ActivityVariantProp, AsChildProp, ButtonSizeProp, ButtonVariantProp, ChildrenProp, ClassNameProp, DescriptionProp, DisabledProp, FontWeightProp, HeadingLevelProp, IdProp, LabelProp, OnClickProp, OnOpenChangeProp, OpenProp, PendingProp, RevealDelayProp, ShapeProp, SizeProp, TextAlignProp, TextSizeProp, TextToneProp, TextWhitespaceProp, TitleLevelProp, TypographyActionsConfigProp, TypographyCopyConfigProp, TypographyEditConfigProp, TypographyEllipsisConfigProp, TypographyTypeProp } from "../vocabulary/index.js";
+import type { ActivityAnnounceProp, ActivityVariantProp, AsChildProp, ButtonSizeProp, ButtonVariantProp, ChildrenProp, ClassNameProp, DescriptionProp, DisabledProp, FontWeightProp, HeadingLevelProp, IconSizeProp, IdProp, LabelProp, OnClickProp, OnOpenChangeProp, OpenProp, PendingProp, RevealDelayProp, ShapeProp, SizeProp, TextAlignProp, TextSizeProp, TextToneProp, TextWhitespaceProp, TitleLevelProp, TypographyActionsConfigProp, TypographyCopyConfigProp, TypographyEditConfigProp, TypographyEllipsisConfigProp, TypographyTypeProp } from "../vocabulary/index.js";
 /**
  * @see Text — typographic primitive; replaces hand-rolled `<span className="text-[13px] …">`.
  *
@@ -336,6 +336,47 @@ export type ActivityProp = Omit<React.HTMLAttributes<HTMLSpanElement>, "color">
     announce?: ActivityAnnounceProp;
     className?: ClassNameProp;
 };
+/**
+ * @see Icon — the ONE supported way to put a standalone glyph on the `--icon-size-*` scale.
+ *
+ * A lucide component carries `width="24" height="24"` of its own, and only four rules in this
+ * library ever re-size a glyph (`.ui-button svg`, the menu row, the topbar cell, the ListRow
+ * leading slot) — three of them direct-child rules. Outside those four a glyph renders at 24px
+ * beside 14px text, and a consumer has no supported way to fix it: `docs/CONSUMER-RULES.md` §8
+ * forbids `size-4`/`w-[16px]`, and `size={16}` re-derives a scale the theme owns. Measured in a
+ * consumer at 38 such glyphs (gh#712).
+ *
+ * Icon renders ONTO the glyph rather than wrapping it — the sized element IS the `<svg>` — so it
+ * composes anywhere a bare glyph does (inside `Text`, in a `Button`, in a table cell, in an `<a>`)
+ * and adds no box to the layout.
+ */
+export type IconGlyphProp = Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> & {
+    /**
+     * The glyph COMPONENT — `as={Lock}`, not `<Lock />`. Any component that forwards SVG props and a
+     * ref qualifies (every `lucide-react` icon does); Icon hands it the class, the size attributes
+     * and the a11y wiring.
+     */
+    as: React.ComponentType<React.SVGProps<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+    /**
+     * Step of the nine-step icon scale. Default `md` (16px — "the default icon step" in
+     * docs/TOKENS.md). A glyph beside `Text size="sm"` wants `sm`; an empty-state mark wants `4xl`.
+     */
+    size?: IconSizeProp;
+    /**
+     * Semantic colour intent, the same vocabulary `Text` uses. Omitted by default, and that default
+     * is load-bearing: a glyph inherits `currentColor`, so an Icon inside a Button, a Badge or a
+     * toned `Text` paints in that surface's own ink without being told.
+     */
+    tone?: TextToneProp;
+    /**
+     * Accessible NAME, when the glyph carries meaning nothing else on screen says (a lock in a
+     * status cell with no text beside it). Localized by the consumer — the library ships no copy.
+     * Supplying it switches the glyph from `aria-hidden` to `role="img"` + that name; leave it off
+     * (the default) for a decorative glyph beside a visible label, which is the common case.
+     */
+    label?: string;
+    className?: ClassNameProp;
+};
 /**
  * FloatButton `type` — the two fills Ant Design gives the corner mark.
  *

package/dist/props/components/layout.prop.d.ts

@@ -100,6 +100,11 @@ export type PageContainerProp = {
     className?: ClassNameProp;
 };
 export type FlexDirectionProp = "row" | "col";
+/**
+ * List marker for `as="ul"`/`as="ol"` — the CSS `list-style-type` keywords the layer implements,
+ * plus `none` for a list that is SEMANTIC ONLY (gh#714).
+ */
+export type FlexMarkerProp = "disc" | "decimal" | "none";
 export type FlexAlignProp = "start" | "center" | "end" | "stretch" | "baseline";
 export type FlexJustifyProp = "start" | "center" | "end" | "between" | "around" | "evenly";
 /** @see Flex */
@@ -112,6 +117,26 @@ export type FlexProp = React.HTMLAttributes<HTMLElement> & {
      * `.ui-flex` rules carry `display: flex`, so the box is identical either way.
      */
     as?: "div" | "span" | "ul" | "ol" | "li";
+    /**
+     * Marker for a LIST element (`as="ul"` → `disc`, `as="ol"` → `decimal` by default); ignored by
+     * every other tag.
+     *
+     * `marker="none"` emits no `data-list` at all, so the list keeps its element, its `<li>`
+     * semantics and its `gap`, and loses the bullet AND the `--space-5` indent that come with it.
+     *
+     * ## Why the axis exists
+     *
+     * The bullet was unconditional, and the catalog's own idiom — `<ListRow as="li">` inside a list
+     * — could not live with it: `.ui-flex[data-list] > li { display: list-item }` outranks
+     * `[data-slot="list-row"] { display: flex }`, so every row fell out of flex layout (measured on
+     * this page: row height 94.58px → 41.2px once the attribute is gone). The only move left was a
+     * RAW `<ul>`, which carries no gap token and which the consumer rules forbid in spirit — one
+     * consumer kept three `Flex role="list"` divs for exactly that reason (gh#714).
+     *
+     * `disc`/`decimal` stay available so an `<ol>` can be bulleted (or a `<ul>` numbered) without a
+     * `list-style-type` in a className.
+     */
+    marker?: FlexMarkerProp;
     /** Lightweight surfaces for rows and notices; no Card elevation by default. */
     surface?: "muted" | "popover" | "warning";
     /** Negative inline inset, using the same spacing scale as pad. */
@@ -1314,6 +1339,23 @@ export type TopbarItemProp = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
      */
     /** Hide below a shared responsive breakpoint, without changing cell height. */
     hideBelow?: BreakpointProp;
+    /**
+     * The cell's leading glyph, placed in a slot the CELL sizes (`--topbar-icon-size`).
+     *
+     * Passing the glyph as a child works too — but only while it stays a DIRECT child, because
+     * `.ui-topbar-item > svg` is the rule that sizes it. The moment a cell wraps its glyph (a
+     * `<Flex hideBelow>` so the icon drops at narrow widths) the rule can no longer reach it and the
+     * glyph renders at lucide's intrinsic 24px: measured at 390px on an org-switcher cell, 1.5x the
+     * cell's own step (gh#712). This slot survives that, because the wrapper is the one the cell
+     * placed. The alternative — widening the rule to a descendant — was measured to shrink or grow
+     * OTHER components' glyphs inside the cell (a Badge's 12px glyph became 16px), so it is not one.
+     *
+     * Decorative by convention: the cell's accessible name comes from its own `aria-label` or its
+     * visible label, not from the glyph. For a glyph that must carry a name, or one that needs a
+     * step other than the bar's, pass `<Icon as={…} size=… label=… />` — as this prop's value or as
+     * a child — and it keeps its own metric and its own semantics.
+     */
+    icon?: ReactNode;
     /**
      * Unread count OVERLAID on the cell's glyph — the notification-bell affordance the cell's own use
      * cases name (gh#398). Pass the CONTENT ONLY, exactly like `SidebarItemProp.badge`: a number, a