@godxjp/ui 27.4.1 → 27.6.0

package/dist/components/data-display/range-timeline.js

@@ -44,7 +44,10 @@ const RangeTimeline = React.forwardRef(
           "div",
           {
             className: "ui-range-timeline-canvas",
-            style: { "--range-timeline-columns": Math.max(1, columns.length) },
+            style: {
+              "--range-timeline-columns": Math.max(1, columns.length),
+              "--range-timeline-units": units
+            },
             children: [
               bands && bands.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-header", children: [
                 /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-label", "aria-hidden": "true" }),
@@ -52,7 +55,7 @@ const RangeTimeline = React.forwardRef(
                   "div",
                   {
                     className: "ui-range-timeline-column",
-                    style: { flex: band.units },
+                    style: { gridColumn: `span ${band.units}` },
                     children: /* @__PURE__ */ jsx(Text, { size: "xs", weight: "medium", children: band.label })
                   },
                   index
@@ -64,15 +67,15 @@ const RangeTimeline = React.forwardRef(
                   "div",
                   {
                     className: "ui-range-timeline-column",
-                    style: { flex: column.units },
+                    style: { gridColumn: `span ${column.units}` },
                     children: /* @__PURE__ */ jsx(Text, { size: "xs", children: column.label })
                   },
                   index
                 )) })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-body", children: [
-                (bordered || columns.some((column) => column.muted)) && // Decorative: the same flex/units layout as the header columns, laid once behind every
-                // row so each vertical rule runs the full body height exactly under its header column.
+                (bordered || columns.some((column) => column.muted)) && // Decorative: the same unit tracks as the header columns, laid once behind every row so
+                // each vertical rule runs the full body height exactly under its header column.
                 /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-grid", "aria-hidden": "true", children: [
                   /* @__PURE__ */ jsx("div", {}),
                   /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-columns", children: columns.map((column, index) => /* @__PURE__ */ jsx(
@@ -80,7 +83,7 @@ const RangeTimeline = React.forwardRef(
                     {
                       className: "ui-range-timeline-grid-column",
                       "data-muted": column.muted ? "true" : void 0,
-                      style: { flex: column.units }
+                      style: { gridColumn: `span ${column.units}` }
                     },
                     index
                   )) })

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.6.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

@@ -745,8 +745,9 @@ export type CalendarProp = DayPickerProps & CalendarFooterProp & {
      *
      * Default `true` — the owner's call, from a real screen: with no ruling the month read as a
      * cloud of numbers and was "very hard to read". Pass `bordered={false}` for the floating-button
-     * look. The line colour is `--calendar-grid-border-color` (default `--input`, the ≥3:1 tier;
-     * the decorative `--border` measured 1.15:1 and was invisible as a 1px ruling).
+     * look. The line colour is `--calendar-grid-border-color` (default `--input` at 0.5 alpha,
+     * 1.74:1 light / 1.95:1 dark on the popover; the full `--input` read too dark, and the
+     * decorative `--border` measured 1.15:1 and was invisible as a 1px ruling).
      */
     bordered?: boolean;
     /** Decorate a day cell — 祝日, a booked day, a deadline. @see CalendarCellRenderProp */
@@ -1464,9 +1465,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);
@@ -2223,13 +2229,13 @@
 
   .ui-calendar[data-bordered="true"] .ui-calendar-day,
   .ui-calendar[data-bordered="true"] .ui-calendar-weekday {
-    border-inline-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
-    border-block-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
+    border-inline-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input) / 0.5));
+    border-block-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input) / 0.5));
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-week,
   .ui-calendar[data-bordered="true"] .ui-calendar-weekdays {
-    border-inline-end: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
+    border-inline-end: 1px solid var(--calendar-grid-border-color, hsl(var(--input) / 0.5));
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-weekday {
@@ -2241,7 +2247,7 @@
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-grid {
-    border-block-end: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
+    border-block-end: 1px solid var(--calendar-grid-border-color, hsl(var(--input) / 0.5));
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-day.invisible {
@@ -2262,8 +2268,8 @@
 
   .ui-calendar[data-bordered="true"] .ui-calendar-week-number,
   .ui-calendar[data-bordered="true"] .ui-calendar-week-number-header {
-    border-inline-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
-    border-block-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
+    border-inline-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input) / 0.5));
+    border-block-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input) / 0.5));
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-day {
@@ -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 {
@@ -1321,8 +1351,10 @@
     padding: var(--space-2);
     border-inline-end: 1px solid hsl(var(--range-timeline-border-color));
   }
+
   .ui-range-timeline-columns {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(var(--range-timeline-units, 1), minmax(0, 1fr));
   }
   .ui-range-timeline-column {
     min-inline-size: 0;
@@ -1360,12 +1392,12 @@
   .ui-range-timeline[data-bordered="true"] .ui-range-timeline-column,
   .ui-range-timeline[data-bordered="true"] .ui-range-timeline-label,
   .ui-range-timeline[data-bordered="true"] .ui-range-timeline-grid-column {
-    border-inline-end-color: var(--range-timeline-grid-color, hsl(var(--input)));
+    border-inline-end-color: var(--range-timeline-grid-color, hsl(var(--input) / 0.5));
   }
   .ui-range-timeline[data-bordered="true"] .ui-range-timeline-header + .ui-range-timeline-header,
   .ui-range-timeline[data-bordered="true"] .ui-range-timeline-row {
     border-block-start: var(--range-timeline-grid-width) solid
-      var(--range-timeline-grid-color, hsl(var(--input)));
+      var(--range-timeline-grid-color, hsl(var(--input) / 0.5));
   }
   .ui-range-timeline-outside {
     position: absolute;

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);
 }