@godxjp/ui 32.3.2 → 32.4.0

package/agent/START-HERE.md

@@ -3,7 +3,7 @@
 You are about to write code against a design system you did not author. This file is the whole
 contract. Read it before you write JSX.
 
-**This catalog describes `@godxjp/ui` 32.3.2.** If the project you are editing has a different
+**This catalog describes `@godxjp/ui` 32.4.0.** If the project you are editing has a different
 version in its `package.json`, read the pinned catalog for THAT version instead
 (`…/v<their-version>/agent/…`). A catalog newer than the installed package describes props that do
 not exist yet; older, and it hides props that do. Neither failure announces itself.

package/agent/components/Upload.json

@@ -42,7 +42,7 @@
       "type": "number"
     },
     {
-      "description": "Files larger than this limit are rejected with localized feedback and onReject.",
+      "description": "Files larger than this limit are rejected with ONE localized message that states the limit (「big.pdf: ファイルが大きすぎます（上限 10.0 MB）。」, gh#1280) and onReject.",
       "name": "maxSizeBytes",
       "type": "number"
     },
@@ -68,7 +68,7 @@
       "type": "string"
     },
     {
-      "description": "Lands on the native `<input type=\"file\">`, NOT on the wrapper — the hidden input is the semantic focus target, so this is what makes a `<label htmlFor>` (or FormField, which injects it) actually focus the picker. Putting it on the visible dropzone instead is the usual reason a label click does nothing.",
+      "description": "Lands on the native `<input type=\"file\">` (so `#id` file attachment in e2e works), NOT on the wrapper. Since gh#1280 that input is plumbing — `aria-hidden`, `tabIndex={-1}`, and it forwards focus to the visible trigger, so a FormField label click lands on the dropzone/button. The FormField contract (name = label + the trigger's own action text, helper, aria-invalid/errormessage) is on that trigger, and the \"nothing picked\" state is read as 「未選択」/\"Chưa chọn tệp\" in the APP's locale — the browser's own 「選択されていません」 is no longer exposed.",
       "name": "id",
       "type": "string"
     },

package/agent/components.json

@@ -9719,7 +9719,7 @@
         "type": "number"
       },
       {
-        "description": "Files larger than this limit are rejected with localized feedback and onReject.",
+        "description": "Files larger than this limit are rejected with ONE localized message that states the limit (「big.pdf: ファイルが大きすぎます（上限 10.0 MB）。」, gh#1280) and onReject.",
         "name": "maxSizeBytes",
         "type": "number"
       },
@@ -9745,7 +9745,7 @@
         "type": "string"
       },
       {
-        "description": "Lands on the native `<input type=\"file\">`, NOT on the wrapper — the hidden input is the semantic focus target, so this is what makes a `<label htmlFor>` (or FormField, which injects it) actually focus the picker. Putting it on the visible dropzone instead is the usual reason a label click does nothing.",
+        "description": "Lands on the native `<input type=\"file\">` (so `#id` file attachment in e2e works), NOT on the wrapper. Since gh#1280 that input is plumbing — `aria-hidden`, `tabIndex={-1}`, and it forwards focus to the visible trigger, so a FormField label click lands on the dropzone/button. The FormField contract (name = label + the trigger's own action text, helper, aria-invalid/errormessage) is on that trigger, and the \"nothing picked\" state is read as 「未選択」/\"Chưa chọn tệp\" in the APP's locale — the browser's own 「選択されていません」 is no longer exposed.",
         "name": "id",
         "type": "string"
       },

package/agent/index.json

@@ -48,7 +48,7 @@
   "note": "Pin to the tag that matches the @godxjp/ui version you installed. A catalog newer than your package describes props you do not have; older, and it hides props you do.",
   "read": {
     "live": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/index.json",
-    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v32.3.2/agent/index.json"
+    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v32.4.0/agent/index.json"
   },
   "source": "mcp/src/data — the same data @godxjp/ui-mcp serves — plus the foundation and semantic token tiers, read from src/tokens/*.css",
   "start": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/START-HERE.md",
@@ -62,5 +62,5 @@
     "foundation": "the seeds a consumer is invited to set — --primary, --background, --radius",
     "semantic": "named roles that follow the seeds — --ring, --text-link, --overlay-background"
   },
-  "version": "32.3.2"
+  "version": "32.4.0"
 }

package/agent/llms.txt

@@ -1,10 +1,10 @@
 # @godxjp/ui
 
 > A Japanese-enterprise React design system: 161 components, 2195 design tokens,
-> 43 cardinal rules. This file is the entry point for AI agents. Catalog version 32.3.2.
+> 43 cardinal rules. This file is the entry point for AI agents. Catalog version 32.4.0.
 
 If your client can run a process, do not read these files — run the MCP server instead
-(`npx @godxjp/ui-mcp@32.3.2`). It is searchable and version-locked. These files exist for agents
+(`npx @godxjp/ui-mcp@32.4.0`). It is searchable and version-locked. These files exist for agents
 that can only fetch URLs.
 
 ## Start
@@ -26,7 +26,7 @@ that can only fetch URLs.
 ## Pinning
 
 Every URL above tracks `main`. To pin to the release a project actually installed, swap `main` for
-the tag: `.../godx-jp/godxjp-ui/v32.3.2/agent/...`. A catalog that does not match the installed
+the tag: `.../godx-jp/godxjp-ui/v32.4.0/agent/...`. A catalog that does not match the installed
 package describes props that are absent, or hides props that are present, and says nothing either way.
 
 Pinned catalogs only exist for releases whose tag actually contains `agent/`. If `…/v<version>/agent/index.json` returns 404, that release predates this catalog: read `…/main/…` instead and compare `index.json` → `version` against the package you have, so you at least know which way it drifted.

package/dist/app/app-provider.js

@@ -13,7 +13,8 @@ import {
 import { AppPresetContext } from "./preset.js";
 import { warnUnknownLocale } from "../i18n/locale-tags.js";
 import { syncAppRequestHeaders } from "./request-headers.js";
-import { syncI18nLocale } from "../i18n/translate.js";
+import { syncI18nLocale, translate } from "../i18n/translate.js";
+import { useOverlayDismissLabel } from "../lib/overlay-dismiss-label.js";
 const RTL_LANGUAGE_SUBTAGS = /* @__PURE__ */ new Set(["ar", "he", "fa", "ur", "ps", "sd", "yi", "dv", "ckb"]);
 function localeDirection(locale) {
   return RTL_LANGUAGE_SUBTAGS.has(locale.split("-")[0]?.toLowerCase() ?? "") ? "rtl" : "ltr";
@@ -430,6 +431,10 @@ function AppProvider({
       setScaling
     ]
   );
+  const isOutermostProvider = React.useContext(AppContext) === null;
+  useOverlayDismissLabel(
+    isOutermostProvider ? translate(locale, fallbackLocale, "common.dismiss") : null
+  );
   return /* @__PURE__ */ jsx(I18nProvider, { locale, children: /* @__PURE__ */ jsx(AppPresetContext.Provider, { value: preset, children: /* @__PURE__ */ jsx(AppContext.Provider, { value, children }) }) });
 }
 function useAppContext() {

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

@@ -14,7 +14,7 @@ import {
 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 { mergeAriaIds, pickFieldA11y } from "../../lib/field-a11y.js";
 import { Button } from "../general/button.js";
 import { Icon } from "../general/icon.js";
 import { UploadCropDialog } from "./upload-crop-dialog.js";
@@ -105,13 +105,17 @@ function Upload({
   children,
   ...ariaProps
 }) {
-  const { t } = useTranslation();
+  const { t, locale } = useTranslation();
   const disabled = disabledProp || readOnly;
-  const triggerOwnsAriaLabel = variant === "button";
-  const inputA11y = resolveFieldA11y(
-    triggerOwnsAriaLabel ? { ...ariaProps, "aria-label": void 0 } : ariaProps,
-    t("dataEntry.upload.inputLabel")
-  );
+  const fieldA11y = pickFieldA11y(ariaProps);
+  const fieldLabelledBy = fieldA11y["aria-labelledby"];
+  const triggerId = React.useId();
+  const selectionId = React.useId();
+  const triggerRef = React.useRef(null);
+  const callerAriaLabel = fieldLabelledBy ? void 0 : fieldA11y["aria-label"];
+  const setTriggerRef = (element) => {
+    triggerRef.current = element;
+  };
   const resolvedListType = listType ?? (variant === "picture" ? "picture" : "text");
   const accept = acceptProp ?? defaultAcceptForVariant(variant);
   const maxCount = maxCountProp ?? defaultMaxCount(variant);
@@ -121,6 +125,18 @@ function Upload({
   const [cropFile, setCropFile] = React.useState(null);
   const [previewItem, setPreviewItem] = React.useState(null);
   const [items, setItems] = useUploadList(value, defaultValue, onValueChange);
+  const triggerIsGroup = variant === "dropzone" && !openFileDialogOnClick;
+  const triggerA11y = {
+    id: triggerId,
+    "aria-labelledby": fieldLabelledBy ? `${fieldLabelledBy} ${triggerId}` : void 0,
+    "aria-describedby": mergeAriaIds(
+      fieldA11y["aria-describedby"],
+      triggerIsGroup && fieldA11y["aria-invalid"] ? fieldA11y["aria-errormessage"] : void 0,
+      items.length === 0 ? selectionId : void 0
+    ),
+    "aria-errormessage": triggerIsGroup ? void 0 : fieldA11y["aria-errormessage"],
+    "aria-invalid": triggerIsGroup ? void 0 : fieldA11y["aria-invalid"]
+  };
   const isSingleAvatar = variant === "avatar" || variant === "avatar-crop" || variant === "picture" && maxCount === 1;
   const singleItem = isSingleAvatar ? items[0] ?? null : null;
   const draft = useUploadDraft({
@@ -235,7 +251,8 @@ function Upload({
     setRejection(
       t(
         `dataEntry.upload.reject${reason[0].toUpperCase()}${reason.slice(1)}`,
-        { name: file.name }
+        // `max` is the limit the size message states (gh#1280); the other reasons ignore it.
+        { name: file.name, max: maxSizeBytes != null ? formatBytes(maxSizeBytes, locale) : "" }
       )
     );
     onReject?.({ file, reason, error });
@@ -402,10 +419,13 @@ function Upload({
       type: "file",
       ...directory ? { webkitdirectory: "", directory: "" } : {},
       className: "sr-only",
+      "aria-hidden": "true",
+      tabIndex: -1,
+      "data-field": fieldA11y["data-field"],
       accept,
       multiple: multiple && !isSingleAvatar,
       disabled,
-      ...inputA11y,
+      onFocus: () => triggerRef.current?.focus(),
       onChange: (e) => {
         pickFiles(e.target.files);
         e.target.value = "";
@@ -436,7 +456,8 @@ function Upload({
         ] })
       }
     ),
-    /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", "data-slot": "upload-status", children: rejection ?? (errorCount > 0 ? t("dataEntry.upload.statusFailed", { count: errorCount }) : uploadingCount > 0 ? t("dataEntry.upload.statusUploading", { count: uploadingCount }) : items.length > 0 ? t("dataEntry.upload.statusReady", { count: items.length, done: doneCount }) : "") })
+    /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", "data-slot": "upload-status", children: errorCount > 0 ? t("dataEntry.upload.statusFailed", { count: errorCount }) : uploadingCount > 0 ? t("dataEntry.upload.statusUploading", { count: uploadingCount }) : items.length > 0 ? t("dataEntry.upload.statusReady", { count: items.length, done: doneCount }) : "" }),
+    items.length === 0 ? /* @__PURE__ */ jsx("span", { id: selectionId, className: "sr-only", "data-slot": "upload-selection", children: t("dataEntry.upload.noFileSelected") }) : null
   ] });
   const openPicker = () => {
     if (!disabled && openFileDialogOnClick) inputRef.current?.click();
@@ -449,10 +470,12 @@ function Upload({
       /* @__PURE__ */ jsxs(
         "div",
         {
+          ref: setTriggerRef,
           role: openFileDialogOnClick ? "button" : "group",
           tabIndex: disabled ? -1 : 0,
           "aria-disabled": disabled,
-          "aria-label": t("dataEntry.upload.dropzoneLabel"),
+          ...triggerA11y,
+          "aria-label": callerAriaLabel ?? t("dataEntry.upload.dropzoneLabel"),
           onClick: openPicker,
           onKeyDown: (e) => {
             if (e.key === "Enter" || e.key === " ") {
@@ -490,7 +513,7 @@ function Upload({
   if (variant === "button") {
     const iconOnly = typeof triggerSize === "string" && triggerSize.startsWith("icon");
     const label = children ?? t("dataEntry.upload.buttonLabel");
-    const triggerAriaLabel = ariaProps["aria-label"] ?? (iconOnly ? typeof label === "string" ? label : t("dataEntry.upload.buttonLabel") : void 0);
+    const triggerAriaLabel = callerAriaLabel ?? (iconOnly ? typeof label === "string" ? label : t("dataEntry.upload.buttonLabel") : void 0);
     return /* @__PURE__ */ jsxs("div", { ...pasteProps, className: cn("ui-stack-sm", className), children: [
       hiddenInput,
       liveRegion,
@@ -503,6 +526,8 @@ function Upload({
           size: triggerSize,
           disabled,
           onClick: openPicker,
+          ref: setTriggerRef,
+          ...triggerA11y,
           "aria-label": triggerAriaLabel,
           className: "ui-upload-trigger",
           children: [
@@ -547,7 +572,9 @@ function Upload({
           onClick: openPicker,
           "data-disabled": disabled ? "" : void 0,
           className: "ui-upload-tile-add",
-          "aria-label": t("dataEntry.upload.addImage"),
+          ref: setTriggerRef,
+          ...triggerA11y,
+          "aria-label": callerAriaLabel ?? t("dataEntry.upload.addImage"),
           children: [
             /* @__PURE__ */ jsx(ImagePlus, { className: "ui-upload-tile-add-icon", "aria-hidden": "true" }),
             /* @__PURE__ */ jsx("span", { className: "ui-upload-tile-add-label", children: t("dataEntry.upload.addImage") })
@@ -568,6 +595,9 @@ function Upload({
           disabled,
           variant: triggerVariant,
           onClick: openPicker,
+          ref: setTriggerRef,
+          ...triggerA11y,
+          "aria-label": callerAriaLabel,
           className: "ui-upload-trigger",
           children: children ?? t("dataEntry.upload.addImage")
         }
@@ -591,6 +621,9 @@ function Upload({
           type: "button",
           disabled,
           onClick: openPicker,
+          ref: setTriggerRef,
+          ...triggerA11y,
+          "aria-label": callerAriaLabel,
           className: "ui-upload-picture-empty",
           children: [
             /* @__PURE__ */ jsx(ImagePlus, { className: "ui-upload-picture-empty-icon", "aria-hidden": "true" }),
@@ -641,7 +674,9 @@ function Upload({
           "data-pending-delete": item?.pendingDelete ? "" : void 0,
           "data-disabled": disabled ? "" : void 0,
           className: "ui-upload-avatar ui-focus-ring",
-          "aria-label": t("dataEntry.upload.avatarLabel"),
+          ref: setTriggerRef,
+          ...triggerA11y,
+          "aria-label": callerAriaLabel ?? 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: "ui-upload-avatar-icon", "aria-hidden": "true" }) }),
             !disabled && /* @__PURE__ */ jsx("span", { className: "ui-upload-avatar-change", children: t("dataEntry.upload.change") })

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": "32.3.2",
+  "version": "32.4.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

@@ -15,7 +15,8 @@
     "next": "Next",
     "selectedCount": "{count} selected",
     "selectedOfTotal": "{count} of {total} selected",
-    "typeToConfirm": "Type {phrase} to confirm"
+    "typeToConfirm": "Type {phrase} to confirm",
+    "dismiss": "Dismiss"
   },
   "dataEntry": {
     "calendar": {
@@ -89,7 +90,6 @@
       "cropTitle": "Crop photo",
       "cropZoom": "Zoom",
       "cropConfirm": "Use photo",
-      "inputLabel": "Choose files",
       "statusUploading": "Uploading {count} file(s)…",
       "statusReady": "{count} file(s), {done} uploaded",
       "statusFailed": "{count} upload(s) failed",
@@ -102,11 +102,12 @@
       "start": "Upload",
       "cancel": "Cancel",
       "rejectAccept": "{name}: file type is not allowed.",
-      "rejectSize": "{name}: file is too large.",
+      "rejectSize": "{name}: file is too large (limit {max}).",
       "rejectCount": "{name}: file limit reached.",
       "rejectBeforeUpload": "{name}: file validation failed.",
       "readFailed": "Could not read the selected folder.",
-      "callbackFailed": "The selected files could not be added."
+      "callbackFailed": "The selected files could not be added.",
+      "noFileSelected": "No file selected"
     },
     "cascader": {
       "placeholder": "Select…",

package/dist/i18n/messages/ja.json

@@ -15,7 +15,8 @@
     "next": "次へ",
     "selectedCount": "{count} 件選択",
     "selectedOfTotal": "{total} 件中 {count} 件選択",
-    "typeToConfirm": "確認のため {phrase} と入力"
+    "typeToConfirm": "確認のため {phrase} と入力",
+    "dismiss": "閉じる"
   },
   "dataEntry": {
     "calendar": {
@@ -88,7 +89,6 @@
       "cropTitle": "写真を切り抜き",
       "cropZoom": "ズーム",
       "cropConfirm": "この写真を使用",
-      "inputLabel": "ファイルを選択",
       "statusUploading": "{count} 件をアップロード中…",
       "statusReady": "{count} 件中 {done} 件アップロード済み",
       "statusFailed": "{count} 件のアップロードに失敗",
@@ -101,11 +101,12 @@
       "start": "アップロード",
       "cancel": "キャンセル",
       "rejectAccept": "{name}: 許可されていない形式です。",
-      "rejectSize": "{name}: ファイルが大きすぎます。",
+      "rejectSize": "{name}: ファイルが大きすぎます（上限 {max}）。",
       "rejectCount": "{name}: ファイル数の上限です。",
       "rejectBeforeUpload": "{name}: ファイルの検証に失敗しました。",
       "readFailed": "選択したフォルダーを読み取れませんでした。",
-      "callbackFailed": "選択したファイルを追加できませんでした。"
+      "callbackFailed": "選択したファイルを追加できませんでした。",
+      "noFileSelected": "未選択"
     },
     "cascader": {
       "placeholder": "選択…",

package/dist/i18n/messages/vi.json

@@ -15,7 +15,8 @@
     "next": "Tiếp",
     "selectedCount": "{count} đã chọn",
     "selectedOfTotal": "Đã chọn {count}/{total}",
-    "typeToConfirm": "Nhập {phrase} để xác nhận"
+    "typeToConfirm": "Nhập {phrase} để xác nhận",
+    "dismiss": "Bỏ qua"
   },
   "dataEntry": {
     "calendar": {
@@ -88,7 +89,6 @@
       "cropTitle": "Cắt ảnh",
       "cropZoom": "Thu phóng",
       "cropConfirm": "Dùng ảnh này",
-      "inputLabel": "Chọn tệp",
       "statusUploading": "Đang tải lên {count} tệp…",
       "statusReady": "{count} tệp, đã tải lên {done}",
       "statusFailed": "{count} tệp tải lên thất bại",
@@ -101,11 +101,12 @@
       "start": "Tải lên",
       "cancel": "Huỷ",
       "rejectAccept": "{name}: loại tệp không được phép.",
-      "rejectSize": "{name}: tệp quá lớn.",
+      "rejectSize": "{name}: tệp quá lớn (tối đa {max}).",
       "rejectCount": "{name}: đã đủ số lượng tệp.",
       "rejectBeforeUpload": "{name}: kiểm tra tệp thất bại.",
       "readFailed": "Không thể đọc thư mục đã chọn.",
-      "callbackFailed": "Không thể thêm các tệp đã chọn."
+      "callbackFailed": "Không thể thêm các tệp đã chọn.",
+      "noFileSelected": "Chưa chọn tệp"
     },
     "cascader": {
       "placeholder": "Chọn…",

package/dist/lib/overlay-dismiss-label.d.ts

@@ -0,0 +1,2 @@
+/** Keep every React Aria dismiss button in the document named `label`; `null` does nothing. */
+export declare function useOverlayDismissLabel(label: string | null): void;

package/dist/lib/overlay-dismiss-label.js

@@ -0,0 +1,41 @@
+"use client";
+import * as React from "react";
+const CANDIDATE = 'button[tabindex="-1"]';
+function isDismissButton(element) {
+  return element instanceof HTMLButtonElement && element.matches(CANDIDATE) && element.style.width === "1px" && element.style.height === "1px";
+}
+function relabel(root, label) {
+  const candidates = root.matches(CANDIDATE) ? [root] : Array.from(root.querySelectorAll(CANDIDATE));
+  for (const element of candidates) {
+    if (isDismissButton(element) && element.getAttribute("aria-label") !== label) {
+      element.setAttribute("aria-label", label);
+    }
+  }
+}
+function useOverlayDismissLabel(label) {
+  React.useEffect(() => {
+    if (label === null || typeof MutationObserver === "undefined" || !document.body) return;
+    relabel(document.body, label);
+    const observer = new MutationObserver((records) => {
+      for (const record of records) {
+        if (record.type === "attributes") {
+          if (record.target instanceof Element) relabel(record.target, label);
+          continue;
+        }
+        for (const node of record.addedNodes) {
+          if (node instanceof Element) relabel(node, label);
+        }
+      }
+    });
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["aria-label"]
+    });
+    return () => observer.disconnect();
+  }, [label]);
+}
+export {
+  useOverlayDismissLabel
+};

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "32.3.2",
+  "version": "32.4.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",

package/dist/styles/table-layout.css

@@ -431,6 +431,25 @@
     transform: translateY(-50%);
   }
 
+  [data-slot="table-head"][data-wrap].text-center:has(> .ui-data-table-sort-button) {
+    padding-inline: max(
+      var(--table-cell-space-x, var(--space-section-active)),
+      calc(var(--table-sort-icon-size) + var(--space-inline-xs))
+    );
+  }
+
+  [data-slot="table-head"][data-wrap].text-center > .ui-data-table-sort-button {
+    margin-inline: calc(-1 * (var(--table-sort-icon-size) + var(--space-inline-xs)));
+    max-inline-size: calc(100% + 2 * (var(--table-sort-icon-size) + var(--space-inline-xs)));
+  }
+
+  [data-slot="table-head"][data-wrap].text-center
+    > .ui-data-table-sort-button
+    > .ui-data-table-sort-label {
+    padding-inline: calc(var(--table-sort-icon-size) + var(--space-inline-xs));
+    overflow-wrap: anywhere;
+  }
+
   .ui-data-table-scroll {
     position: relative;
     overflow-x: auto;