@godxjp/ui 31.28.3 → 31.29.0

package/dist/components/data-entry/sortable-list.js

@@ -0,0 +1,237 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { GripVertical } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../general/button.js";
+const DRAG_THRESHOLD = 4;
+function move(list, from, to) {
+  const next = list.slice();
+  const [item] = next.splice(from, 1);
+  next.splice(to, 0, item);
+  return next;
+}
+function reconcile(order, items) {
+  const known = new Set(items.map((item) => item.value));
+  const kept = order.filter((key) => known.has(key));
+  const seen = new Set(kept);
+  return [...kept, ...items.map((item) => item.value).filter((key) => !seen.has(key))];
+}
+const SortableList = React.forwardRef(
+  function SortableList2({
+    items,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    renderItem,
+    layout = "list",
+    disabled = false,
+    "aria-label": ariaLabel,
+    id,
+    className
+  }, ref) {
+    const { t, locale } = useTranslation();
+    const hintId = React.useId();
+    const [inner, setInner] = React.useState(
+      () => defaultValue ?? items.map((item) => item.value)
+    );
+    const committed = reconcile(valueProp ?? inner, items);
+    const [preview, setPreview] = React.useState(null);
+    const [held, setHeld] = React.useState(
+      null
+    );
+    const [announcement, setAnnouncement] = React.useState("");
+    const order = preview ?? committed;
+    const byKey = React.useMemo(() => new Map(items.map((item) => [item.value, item])), [items]);
+    const listRef = React.useRef(null);
+    const number = React.useMemo(() => new Intl.NumberFormat(locale), [locale]);
+    const position = (keys, key) => ({
+      label: byKey.get(key)?.label ?? key,
+      position: number.format(keys.indexOf(key) + 1),
+      count: number.format(keys.length)
+    });
+    const commit = (keys) => {
+      if (keys.join("\0") !== committed.join("\0")) {
+        if (valueProp === void 0) setInner(keys);
+        onValueChange?.(keys);
+      }
+    };
+    const lift = (key, via) => {
+      setHeld({ key, via });
+      setPreview(committed);
+      setAnnouncement(t("dataEntry.sortableList.lifted", position(committed, key)));
+    };
+    const drop = () => {
+      if (!held || !preview) return;
+      commit(preview);
+      setAnnouncement(t("dataEntry.sortableList.dropped", position(preview, held.key)));
+      setHeld(null);
+      setPreview(null);
+    };
+    const cancel = () => {
+      if (!held) return;
+      setAnnouncement(t("dataEntry.sortableList.cancelled", position(committed, held.key)));
+      setHeld(null);
+      setPreview(null);
+    };
+    const moveTo = (key, target) => {
+      setPreview((current) => {
+        const keys = current ?? committed;
+        const from = keys.indexOf(key);
+        const to = Math.max(0, Math.min(keys.length - 1, target));
+        if (from < 0 || from === to) return keys;
+        const next = move(keys, from, to);
+        setAnnouncement(t("dataEntry.sortableList.moved", position(next, key)));
+        return next;
+      });
+    };
+    const onKeyDown = (key) => (event) => {
+      if (event.key === " " || event.key === "Enter") {
+        event.preventDefault();
+        if (held?.key === key) drop();
+        else if (!held) lift(key, "keyboard");
+        return;
+      }
+      if (held?.key !== key) return;
+      const index = order.indexOf(key);
+      const step = {
+        ArrowUp: -1,
+        ArrowLeft: -1,
+        ArrowDown: 1,
+        ArrowRight: 1
+      };
+      if (event.key in step) {
+        event.preventDefault();
+        moveTo(key, index + (step[event.key] ?? 0));
+      } else if (event.key === "Home") {
+        event.preventDefault();
+        moveTo(key, 0);
+      } else if (event.key === "End") {
+        event.preventDefault();
+        moveTo(key, order.length - 1);
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        cancel();
+      }
+    };
+    const indexAt = (x, y) => {
+      const nodes = Array.from(
+        listRef.current?.querySelectorAll("[data-sortable-value]") ?? []
+      );
+      let best = -1;
+      let bestDistance = Number.POSITIVE_INFINITY;
+      nodes.forEach((node, index) => {
+        const box = node.getBoundingClientRect();
+        if (x >= box.left && x <= box.right && y >= box.top && y <= box.bottom) {
+          best = index;
+          bestDistance = -1;
+          return;
+        }
+        if (bestDistance < 0) return;
+        const distance = Math.hypot(x - (box.left + box.width / 2), y - (box.top + box.height / 2));
+        if (distance < bestDistance) {
+          bestDistance = distance;
+          best = index;
+        }
+      });
+      return best;
+    };
+    const press = React.useRef(
+      null
+    );
+    const latest = React.useRef({ lift, moveTo, drop, cancel, indexAt });
+    latest.current = { lift, moveTo, drop, cancel, indexAt };
+    const onPointerDown = (key) => (event) => {
+      if (event.button !== 0 || held) return;
+      press.current = { key, x: event.clientX, y: event.clientY, dragging: false };
+      const onMove = (move2) => {
+        const current = press.current;
+        if (!current) return;
+        if (!current.dragging) {
+          if (Math.hypot(move2.clientX - current.x, move2.clientY - current.y) < DRAG_THRESHOLD)
+            return;
+          current.dragging = true;
+          latest.current.lift(current.key, "pointer");
+        }
+        const target = latest.current.indexAt(move2.clientX, move2.clientY);
+        if (target >= 0) latest.current.moveTo(current.key, target);
+      };
+      const end = (cancelled) => () => {
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+        window.removeEventListener("pointercancel", onCancel);
+        window.removeEventListener("keydown", onKey);
+        const current = press.current;
+        press.current = null;
+        if (!current?.dragging) return;
+        if (cancelled) latest.current.cancel();
+        else latest.current.drop();
+      };
+      const onUp = end(false);
+      const onCancel = end(true);
+      const onKey = (key2) => {
+        if (key2.key === "Escape" && press.current?.dragging) end(true)();
+      };
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+      window.addEventListener("pointercancel", onCancel);
+      window.addEventListener("keydown", onKey);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        id,
+        className: cn("ui-sortable-list", className),
+        "data-layout": layout,
+        "data-disabled": disabled || void 0,
+        children: [
+          /* @__PURE__ */ jsx("ul", { ref: listRef, className: "ui-sortable-list-items", "aria-label": ariaLabel, children: order.map((key, index) => {
+            const item = byKey.get(key);
+            if (!item) return null;
+            const dragging = held?.key === key;
+            const itemDisabled = disabled || item.disabled;
+            return /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: "ui-sortable-list-item",
+                "data-sortable-value": key,
+                "data-dragging": dragging || void 0,
+                "data-disabled": itemDisabled || void 0,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      size: "icon-sm",
+                      className: "ui-sortable-list-handle",
+                      disabled: itemDisabled,
+                      "aria-label": t("dataEntry.sortableList.handle", { label: item.label }),
+                      "aria-describedby": hintId,
+                      "aria-pressed": dragging,
+                      onKeyDown: onKeyDown(key),
+                      onBlur: () => {
+                        if (held?.key === key && held.via === "keyboard") cancel();
+                      },
+                      onPointerDown: onPointerDown(key),
+                      children: /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "ui-sortable-list-content", children: renderItem ? renderItem(item, { index, dragging }) : item.label })
+                ]
+              },
+              key
+            );
+          }) }),
+          /* @__PURE__ */ jsx("span", { id: hintId, className: "sr-only", children: t("dataEntry.sortableList.hint") }),
+          /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: announcement })
+        ]
+      }
+    );
+  }
+);
+export {
+  SortableList
+};

package/dist/components/feedback/dialog.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ToneProp } from "../../props/vocabulary/index.js";
+import type { ToneProp, WidthProp } from "../../props/vocabulary/index.js";
 import type { AlertDialogProp, DialogContentProp, DialogProp } from "../../props/components/feedback.prop.js";
 export type { AlertDialogProp, AlertDialogProp as AlertDialogProps, DialogProp, DialogProp as DialogProps, DialogContentProp, DialogContentProp as DialogContentProps, } from "../../props/components/feedback.prop.js";
 interface OverlayOpenProps {
@@ -57,8 +57,14 @@ interface DialogContentProps extends Omit<React.ComponentPropsWithRef<"section">
     forceMount?: true;
     /** Giữ tên prop của Radix — xem `useCloseAutoFocus`. */
     onCloseAutoFocus?: (event: Event) => void;
+    /**
+     * Panel width (antd Modal `width`, the same vocabulary as SheetContent `width`). A number is px;
+     * a string is any CSS length. Capped at the viewport minus `--dialog-viewport-inset`, so a wide
+     * dialog never leaves a phone screen. Omit to keep `--dialog-width-default` (32rem).
+     */
+    width?: WidthProp;
 }
-declare function DialogContent({ className, children, showClose, showCloseButton: showCloseButtonProp, overlayClassName, variant: variantProp, forceMount: _forceMount, ...props }: DialogContentProps): React.JSX.Element;
+declare function DialogContent({ className, children, showClose, showCloseButton: showCloseButtonProp, overlayClassName, variant: variantProp, forceMount: _forceMount, width, style, ...props }: DialogContentProps): React.JSX.Element;
 declare namespace DialogContent {
     var displayName: string;
 }

package/dist/components/feedback/dialog.js

@@ -45,7 +45,7 @@ const DialogLabelContext = React.createContext(null);
 const DialogVariantContext = React.createContext("default");
 const DialogModalContext = React.createContext(true);
 const OVERLAY_CLASS = "ui-dialog-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0";
-const CONTENT_CLASS = "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 duration-200 outline-none";
+const CONTENT_CLASS = "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 outline-none";
 function DialogShell({
   role = "dialog",
   className,
@@ -177,6 +177,8 @@ function DialogContent({
   overlayClassName,
   variant: variantProp,
   forceMount: _forceMount,
+  width,
+  style,
   ...props
 }) {
   const { t } = useTranslation();
@@ -184,6 +186,10 @@ function DialogContent({
   const variant = variantProp ?? inheritedVariant;
   const isDestructive = variant === "destructive";
   const showCloseButton = showCloseButtonProp ?? showClose ?? !isDestructive;
+  const mergedStyle = width == null ? style : {
+    ...style,
+    ["--dialog-width"]: typeof width === "number" ? `${width}px` : width
+  };
   return /* @__PURE__ */ jsx(DialogVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsxs(
     DialogShell,
     {
@@ -192,6 +198,7 @@ function DialogContent({
       "data-variant": variant,
       className,
       overlayClassName,
+      style: mergedStyle,
       ...props,
       children: [
         children,

package/dist/components/feedback/sheet.js

@@ -91,7 +91,7 @@ function SheetOverlay(_props) {
 SheetOverlay.displayName = "SheetOverlay";
 const SHEET_OVERLAY_CLASS = "ui-sheet-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed";
 const sheetVariants = cva(
-  "ui-sheet-panel fixed flex flex-col gap-[var(--space-chrome-gap)] text-foreground px-[var(--sheet-pad-x)] py-[var(--sheet-pad-y)] transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
+  "ui-sheet-panel fixed flex flex-col gap-[var(--space-chrome-gap)] text-foreground px-[var(--sheet-pad-x)] py-[var(--sheet-pad-y)] transition ease-in-out data-[state=closed]:animate-out data-[state=open]:animate-in",
   {
     variants: {
       // `side` is a deliberately PHYSICAL API (left/right/top/bottom) — a sheet

package/dist/components/layout/app-launcher.d.ts

@@ -31,4 +31,4 @@ type DataAttributes = {
  *   single product where switching workspace is constant enough to be worth permanent screen width
  *   (Slack). Shipping both puts one scope in two places and makes neither authoritative.
  */
-export declare function AppLauncher({ apps, groups, labels, columns, linkComponent, loading, error, onRetry, responsive, appearance, side, align, open, onOpenChange, className, ...rest }: AppLauncherProp & Pick<React.ComponentPropsWithoutRef<"button">, "id"> & DataAttributes): React.JSX.Element;
+export declare function AppLauncher({ apps, groups, labels, columns, linkComponent, loading, error, onRetry, responsive, appearance, side, align, footer, open, onOpenChange, className, ...rest }: AppLauncherProp & Pick<React.ComponentPropsWithoutRef<"button">, "id"> & DataAttributes): React.JSX.Element;

package/dist/components/layout/app-launcher.js

@@ -165,6 +165,7 @@ function AppLauncher({
   appearance = "bar",
   side,
   align,
+  footer,
   open,
   onOpenChange,
   className,
@@ -194,20 +195,23 @@ function AppLauncher({
     ...rest
   };
   const trigger = appearance === "bar" ? /* @__PURE__ */ jsx(TopbarItem, { ...triggerProps, children: /* @__PURE__ */ jsx(Grip, { "aria-hidden": "true" }) }) : /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", ...triggerProps, children: /* @__PURE__ */ jsx(Grip, { "aria-hidden": "true" }) });
-  const panel = /* @__PURE__ */ jsx(
-    AppLauncherPanel,
-    {
-      apps,
-      groups,
-      labels,
-      columns,
-      linkComponent,
-      loading,
-      error,
-      onRetry,
-      close
-    }
-  );
+  const panel = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      AppLauncherPanel,
+      {
+        apps,
+        groups,
+        labels,
+        columns,
+        linkComponent,
+        loading,
+        error,
+        onRetry,
+        close
+      }
+    ),
+    footer != null && footer !== false ? /* @__PURE__ */ jsx("div", { "data-slot": "app-launcher-footer", className: "ui-app-launcher-footer", children: footer }) : null
+  ] });
   if (launchpad) {
     return /* @__PURE__ */ jsxs(Dialog, { open: resolvedOpen, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: trigger }),

package/dist/components/layout/responsive-grid.d.ts

@@ -24,15 +24,30 @@ export type ResponsiveGridProps = {
      * to strip its old `columns` prop.
      */
     preset?: ResponsiveGridPresetProp;
+    /**
+     * Dense packing (`grid-auto-flow: row dense`): a later, smaller cell back-fills the hole a wide
+     * or tall cell left earlier in the row — a widget board of 1×1 / 2×1 / 1×2 cells without gaps
+     * (gh#1175). It changes VISUAL order only; DOM and focus order stay as written, so use it where
+     * the cells are independent (widgets, tiles), not where reading order matters. Ignored under
+     * `flow="columns"`, whose sequence is the point.
+     */
+    dense?: boolean;
     children: ReactNode;
 };
-export declare function ResponsiveGrid({ columns, flow, align, gap, pad, padRaw, preset, className, children, }: ResponsiveGridProps): import("react").JSX.Element;
+export declare function ResponsiveGrid({ columns, flow, align, gap, pad, padRaw, preset, dense, className, children, }: ResponsiveGridProps): import("react").JSX.Element;
 export declare namespace ResponsiveGrid {
     export { ResponsiveGridItem as Item };
 }
 /** A grid item owns its responsive span; no extra implicit columns on a narrow container. */
-export declare function ResponsiveGridItem({ span, children, className, }: {
+export declare function ResponsiveGridItem({ span, rowSpan, children, className, }: {
     span?: ResponsiveGridColumnsProp;
+    /**
+     * Rows the cell spans — the tall (1×2) widget of a board (gh#1175). Same shape as `span`: a
+     * number spans that many rows from the `sm` step up and one row at `base`, where the grid is a
+     * single stacked column and a tall cell would only stretch; an object sets each step. Pair with
+     * `ResponsiveGrid dense` so the cells after it fill the space beside it.
+     */
+    rowSpan?: ResponsiveGridColumnsProp;
     children?: ReactNode;
     className?: string;
 }): import("react").JSX.Element;

package/dist/components/layout/responsive-grid.js

@@ -36,6 +36,7 @@ function ResponsiveGrid({
   pad,
   padRaw,
   preset,
+  dense = false,
   className,
   children
 }) {
@@ -47,21 +48,33 @@ function ResponsiveGrid({
       "data-gap": gap,
       "data-flow": flow === "columns" ? "columns" : void 0,
       "data-align": align,
+      "data-dense": dense && flow !== "columns" ? "" : void 0,
       style: { ...toStyle(resolved), ...padStyle(pad, padRaw) },
       "data-pad-raw": padRaw === void 0 ? void 0 : "",
       children
     }
   ) });
 }
+function resolveSpan(span) {
+  return typeof span === "number" ? { base: 1, sm: span, md: span, lg: span } : resolveColumns(span);
+}
 function ResponsiveGridItem({
   span = 1,
+  rowSpan,
   children,
   className
 }) {
-  const steps = typeof span === "number" ? { base: 1, sm: span, md: span, lg: span } : resolveColumns(span);
-  const style = Object.fromEntries(
-    Object.entries(steps).map(([step, value]) => [`--responsive-grid-item-${step}`, value])
-  );
+  const style = Object.fromEntries([
+    ...Object.entries(resolveSpan(span)).map(([step, value]) => [
+      `--responsive-grid-item-${step}`,
+      value
+    ]),
+    // Only when asked: an item without `rowSpan` renders the style it always had.
+    ...rowSpan === void 0 ? [] : Object.entries(resolveSpan(rowSpan)).map(([step, value]) => [
+      `--responsive-grid-item-row-${step}`,
+      value
+    ])
+  ]);
   return /* @__PURE__ */ jsx("div", { className: cn("ui-responsive-grid-item", className), style, children });
 }
 ResponsiveGrid.Item = ResponsiveGridItem;

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

@@ -47,4 +47,4 @@ export { createSidebarLink } from "./sidebar-link.js";
  * Sidebar — data-driven vertical nav rail. Use {@link createSidebarLink} to adapt a router `Link`,
  * or `SidebarItem asChild` when composing rows by hand.
  */
-export declare function Sidebar({ ariaLabel: ariaLabelCamel, scrollRef, activeId, onSelect, sections, product, onProductClick, brand, collapsed, children, linkComponent, renderItem, footer, "aria-label": ariaLabel, }: SidebarProp): React.JSX.Element;
+export declare function Sidebar({ ariaLabel: ariaLabelCamel, scrollRef, activeId, onSelect, sections, product, onProductClick, brand, action, collapsed, children, linkComponent, renderItem, footer, "aria-label": ariaLabel, }: SidebarProp): React.JSX.Element;

package/dist/components/layout/sidebar.js

@@ -301,6 +301,7 @@ function Sidebar({
   product,
   onProductClick,
   brand,
+  action,
   collapsed = false,
   children,
   linkComponent,
@@ -314,6 +315,7 @@ function Sidebar({
   collapsed = surface === "drawer" ? false : collapsed;
   const brandNode = typeof brand === "function" ? brand(collapsed) : brand;
   const footerNode = typeof footer === "function" ? footer(collapsed) : footer;
+  const actionNode = typeof action === "function" ? action(collapsed) : action;
   return /* @__PURE__ */ jsxs("div", { className: "sb-root", "data-collapsed": collapsed ? "true" : void 0, children: [
     brand !== void 0 ? /* @__PURE__ */ jsx(SidebarHeader, { children: brandNode }) : product ? (() => {
       const interactive = onProductClick != null;
@@ -352,6 +354,7 @@ function Sidebar({
         meta
       ] });
     })() : null,
+    actionNode ? /* @__PURE__ */ jsx("div", { className: "sb-action", "data-slot": "sidebar-action", children: actionNode }) : null,
     /* @__PURE__ */ jsx(
       "nav",
       {

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

@@ -16,7 +16,7 @@ const TopbarItem = React.forwardRef(function TopbarItem2({
   ...props
 }, ref) {
   const Comp = asChild ? Slot : "button";
-  const showBadge = !asChild && badge !== void 0 && badge !== "";
+  const showBadge = badge !== void 0 && badge !== "";
   const iconNode = icon !== void 0 && icon !== null && icon !== false ? /* @__PURE__ */ jsx(
     "span",
     {
@@ -35,7 +35,6 @@ const TopbarItem = React.forwardRef(function TopbarItem2({
       children: label
     }
   );
-  const slotted = asChild && (iconNode !== null || labelHideBelow !== void 0) && React.isValidElement(children) ? React.cloneElement(children, void 0, iconNode, labelOf(children.props.children)) : children;
   const badgeNode = showBadge ? /* @__PURE__ */ jsx(
     "span",
     {
@@ -45,6 +44,13 @@ const TopbarItem = React.forwardRef(function TopbarItem2({
       children: badge
     }
   ) : null;
+  const slotted = asChild && (iconNode !== null || labelHideBelow !== void 0 || badgeNode !== null) && React.isValidElement(children) ? React.cloneElement(
+    children,
+    void 0,
+    iconNode,
+    labelOf(children.props.children),
+    badgeNode
+  ) : children;
   return /* @__PURE__ */ jsx(
     Comp,
     {

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

@@ -1,12 +1,14 @@
 import * as React from "react";
 import { type ImageLoadingStatus } from "../../lib/image-loading-status.js";
-import type { AvatarProp } from "../../props/components/data-display.prop.js";
+import type { AvatarImageFitProp, AvatarProp } from "../../props/components/data-display.prop.js";
 export declare const Avatar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     asChild?: boolean;
 } & 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;
+    /** `cover` (default) crops to fill; `contain` shows a logo or app icon whole (gh#1176). */
+    fit?: AvatarImageFitProp;
 } & React.RefAttributes<HTMLImageElement>>;
 export declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     asChild?: boolean;

package/dist/components/ui/avatar.js

@@ -53,7 +53,7 @@ const Avatar = React.forwardRef(
   }
 );
 Avatar.displayName = "Avatar";
-const AvatarImage = React.forwardRef(({ className, src, onLoadingStatusChange, asChild = false, ...props }, ref) => {
+const AvatarImage = React.forwardRef(({ className, src, onLoadingStatusChange, asChild = false, fit, ...props }, ref) => {
   const { imageLoadingStatus, setImageLoadingStatus } = useAvatarContext("AvatarImage");
   const status = useImageLoadingStatus(src, {
     referrerPolicy: props.referrerPolicy,
@@ -78,6 +78,7 @@ const AvatarImage = React.forwardRef(({ className, src, onLoadingStatusChange, a
     {
       ref,
       "data-slot": "avatar-image",
+      "data-fit": fit === "contain" ? "contain" : void 0,
       className: cn("ui-avatar-image", className),
       ...props,
       src

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": "31.28.3",
+  "version": "31.29.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/i18n/messages/en.json

@@ -232,6 +232,14 @@
         "symbols": "Symbols",
         "flags": "Flags"
       }
+    },
+    "sortableList": {
+      "handle": "Reorder {label}",
+      "hint": "Press Space to pick up, the arrow keys to move, Space to drop, Escape to cancel.",
+      "lifted": "Picked up {label}. Position {position} of {count}.",
+      "moved": "{label}: position {position} of {count}.",
+      "dropped": "Dropped {label} at position {position} of {count}.",
+      "cancelled": "Move cancelled. {label} is back at position {position} of {count}."
     }
   },
   "feedback": {

package/dist/i18n/messages/ja.json

@@ -228,6 +228,14 @@
         "symbols": "記号",
         "flags": "旗"
       }
+    },
+    "sortableList": {
+      "handle": "{label} を並べ替え",
+      "hint": "Space で持ち上げ、矢印キーで移動、Space で確定、Esc で取り消します。",
+      "lifted": "{label} を持ち上げました。{count} 件中 {position} 番目です。",
+      "moved": "{label}: {count} 件中 {position} 番目。",
+      "dropped": "{label} を {count} 件中 {position} 番目に置きました。",
+      "cancelled": "移動を取り消しました。{label} は {count} 件中 {position} 番目に戻りました。"
     }
   },
   "feedback": {

package/dist/i18n/messages/vi.json

@@ -229,6 +229,14 @@
         "symbols": "Ký hiệu",
         "flags": "Cờ"
       }
+    },
+    "sortableList": {
+      "handle": "Sắp xếp lại {label}",
+      "hint": "Nhấn Space để nhấc, phím mũi tên để di chuyển, Space để thả, Esc để huỷ.",
+      "lifted": "Đã nhấc {label}. Vị trí {position}/{count}.",
+      "moved": "{label}: vị trí {position}/{count}.",
+      "dropped": "Đã thả {label} ở vị trí {position}/{count}.",
+      "cancelled": "Đã huỷ di chuyển. {label} trở lại vị trí {position}/{count}."
     }
   },
   "feedback": {

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

@@ -303,6 +303,15 @@ export type AvatarPresenceProp = "online" | "away" | "busy" | "offline";
  * @see Avatar
  */
 export type AvatarAppearanceProp = "default" | "tinted";
+/**
+ * How an `AvatarImage` fills its frame (`object-fit`). `cover` (default) fills the frame and crops
+ * — right for a photo of a face. `contain` shows the whole image inside the frame — right for a
+ * logo or an app icon that is wide, transparent or not centred, which `cover` would cut off
+ * (gh#1176). A full-bleed square icon (the GoDX service icon set) wants `cover`.
+ *
+ * @see Avatar
+ */
+export type AvatarImageFitProp = "cover" | "contain";
 /** @see Badge */
 export type BadgeProp = {
     /**

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

@@ -2361,6 +2361,40 @@ export type AttachmentsRefProp = {
         multiple?: boolean;
     }) => void;
 };
+/** One row of a {@link SortableListProp}: its key (`value`), and the name the announcements speak. */
+export type SortableListItemProp = {
+    /** Stable key — the order is reported as these keys. */
+    value: string;
+    /** Spoken in the handle's name and the live announcements; rendered when there is no `renderItem`. */
+    label: string;
+    /** This item's grip is inert; other items still move past it. */
+    disabled?: boolean;
+};
+/**
+ * @see SortableList — reorder a flat list or a grid of tiles (gh#1173): pointer drag on each
+ * item's grip, or the keyboard (Space/Enter lift, arrows / Home / End move, Space/Enter drop, Esc
+ * cancel), with every step announced politely ("2 / 3"). The order is the value.
+ */
+export type SortableListProp = {
+    items: SortableListItemProp[];
+    /** The item keys in order. Controlled with `onValueChange`; keys not in `items` are ignored. */
+    value?: ValueProp<string[]>;
+    defaultValue?: DefaultValueProp<string[]>;
+    /** Called once per drop with the keys in their new order (not on every preview step). */
+    onValueChange?: OnValueChangeProp<string[]>;
+    /** Draws an item's content beside its grip. Default: the item's `label`. */
+    renderItem?: (item: SortableListItemProp, state: {
+        index: number;
+        dragging: boolean;
+    }) => React.ReactNode;
+    /** `list` stacks rows; `grid` flows tiles into auto-filled columns. Default `list`. */
+    layout?: "list" | "grid";
+    disabled?: DisabledProp;
+    /** Accessible name of the list. */
+    "aria-label"?: string;
+    id?: IdProp;
+    className?: ClassNameProp;
+};
 /**
  * @see EmojiPicker — a page icon / reaction picker (gh#1164): search by ja / en / vi keywords
  * (emojibase-data, loaded for the active locale on first open), categories, per-user recents, a