@godxjp/ui 32.3.3 → 32.4.1

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.3.** If the project you are editing has a different
+**This catalog describes `@godxjp/ui` 32.4.1.** 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/AlertDialog.json

@@ -31,7 +31,7 @@
       "type": "string"
     },
     {
-      "description": "Dismiss action label (defaults to translated cancel).",
+      "description": "Dismiss action label. Defaults to `feedback.alert.cancel` — en 'Cancel', ja 'キャンセル', vi 'Quay lại' (not 'Hủy': in Vietnamese that is also the verb of the destructive actions a confirm guards, gh#1284). A development warning fires when `confirmLabel` and the cancel label are the same word once tone marks are ignored.",
       "name": "cancelLabel",
       "type": "string"
     },

package/agent/components/AppProvider.json

@@ -10,7 +10,7 @@
       "type": "string (BCP-47)"
     },
     {
-      "description": "Product defaults the host opts into — `import { godxPreset } from \"@godxjp/ui/themes/godx\"` (pair it with `@godxjp/ui/themes/godx.css` after the base stylesheet; a shadow root that embeds `@godxjp/ui/styles/core` takes the font-free `@godxjp/ui/themes/godx-tokens.css` instead, since `@font-face` must live in the document). Its `defaultLocale` and `timeZone` fill only what the props leave unset, its `brandMark` is what an `AuthIdentity` with no `brand` draws, and its `name` is written to `<html data-preset>`. Omit for the neutral defaults (ink primary, `en`, no product mark).",
+      "description": "Product defaults the host opts into — `import { godxPreset } from \"@godxjp/ui/themes/godx\"` (pair it with `@godxjp/ui/themes/godx.css` after the base stylesheet; a shadow root that embeds `@godxjp/ui/styles/core` takes the font-free `@godxjp/ui/themes/godx-tokens.css` instead, since `@font-face` must live in the document). Its `defaultLocale` fills only what the props leave unset — it pins NO `timeZone` since 32.4.1 (gh#1282: it pinned `Asia/Ho_Chi_Minh` and every app showed Vietnam time to users in Japan; pass `defaultTimezone` for a fixed zone), its `brandMark` is what an `AuthIdentity` with no `brand` draws, and its `name` is written to `<html data-preset>`. Omit for the neutral defaults (ink primary, `en`, no product mark).",
       "name": "preset",
       "type": "AppPreset"
     },

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

@@ -7664,7 +7664,7 @@
         "type": "string"
       },
       {
-        "description": "Dismiss action label (defaults to translated cancel).",
+        "description": "Dismiss action label. Defaults to `feedback.alert.cancel` — en 'Cancel', ja 'キャンセル', vi 'Quay lại' (not 'Hủy': in Vietnamese that is also the verb of the destructive actions a confirm guards, gh#1284). A development warning fires when `confirmLabel` and the cancel label are the same word once tone marks are ignored.",
         "name": "cancelLabel",
         "type": "string"
       },
@@ -8641,7 +8641,7 @@
         "type": "string (BCP-47)"
       },
       {
-        "description": "Product defaults the host opts into — `import { godxPreset } from \"@godxjp/ui/themes/godx\"` (pair it with `@godxjp/ui/themes/godx.css` after the base stylesheet; a shadow root that embeds `@godxjp/ui/styles/core` takes the font-free `@godxjp/ui/themes/godx-tokens.css` instead, since `@font-face` must live in the document). Its `defaultLocale` and `timeZone` fill only what the props leave unset, its `brandMark` is what an `AuthIdentity` with no `brand` draws, and its `name` is written to `<html data-preset>`. Omit for the neutral defaults (ink primary, `en`, no product mark).",
+        "description": "Product defaults the host opts into — `import { godxPreset } from \"@godxjp/ui/themes/godx\"` (pair it with `@godxjp/ui/themes/godx.css` after the base stylesheet; a shadow root that embeds `@godxjp/ui/styles/core` takes the font-free `@godxjp/ui/themes/godx-tokens.css` instead, since `@font-face` must live in the document). Its `defaultLocale` fills only what the props leave unset — it pins NO `timeZone` since 32.4.1 (gh#1282: it pinned `Asia/Ho_Chi_Minh` and every app showed Vietnam time to users in Japan; pass `defaultTimezone` for a fixed zone), its `brandMark` is what an `AuthIdentity` with no `brand` draws, and its `name` is written to `<html data-preset>`. Omit for the neutral defaults (ink primary, `en`, no product mark).",
         "name": "preset",
         "type": "AppPreset"
       },
@@ -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.3/agent/index.json"
+    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v32.4.1/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.3"
+  "version": "32.4.1"
 }

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.3.
+> 43 cardinal rules. This file is the entry point for AI agents. Catalog version 32.4.1.
 
 If your client can run a process, do not read these files — run the MCP server instead
-(`npx @godxjp/ui-mcp@32.3.3`). It is searchable and version-locked. These files exist for agents
+(`npx @godxjp/ui-mcp@32.4.1`). 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.3/agent/...`. A catalog that does not match the installed
+the tag: `.../godx-jp/godxjp-ui/v32.4.1/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";
@@ -42,6 +43,7 @@ import {
   APP_REQUEST_HEADER_TIME_FORMAT,
   APP_REQUEST_HEADER_TIMEZONE
 } from "./types.js";
+const LEGACY_GODX_PRESET_TIMEZONE = "Asia/Ho_Chi_Minh";
 function resolveProviderLocale(defaultLocale, presetLocale) {
   const fromProp = resolveRegisteredLocale(defaultLocale);
   if (fromProp) return fromProp;
@@ -137,6 +139,7 @@ function AppProvider({
     [persistKey]
   );
   const formatChosenRef = React.useRef({ dateFormat: false, timeFormat: false });
+  const timezoneChosenRef = React.useRef(false);
   const commitPreferences = React.useCallback(() => {
     if (persistedAxes.size === 0) return;
     const out = pickPersistedAxes(prefsRef.current, persistedAxes);
@@ -148,6 +151,10 @@ function AppProvider({
       if (formatChosenRef.current.timeFormat) out.timeFormatChosen = true;
       else delete out.timeFormat;
     }
+    if (out.timezone !== void 0) {
+      if (timezoneChosenRef.current) out.timezoneChosen = true;
+      else delete out.timezone;
+    }
     writeStoredPreferences(storageKey, out);
   }, [persistedAxes, storageKey]);
   React.useEffect(() => {
@@ -165,6 +172,10 @@ function AppProvider({
       );
       if (derivable) delete stored.timeFormat;
     }
+    if (!raw.timezoneChosen && stored.timezone === LEGACY_GODX_PRESET_TIMEZONE) {
+      delete stored.timezone;
+    }
+    timezoneChosenRef.current = stored.timezone !== void 0;
     formatChosenRef.current = {
       dateFormat: stored.dateFormat !== void 0,
       timeFormat: stored.timeFormat !== void 0
@@ -272,6 +283,7 @@ function AppProvider({
   const setTimezone = React.useCallback(
     (next) => {
       prefsRef.current = { ...prefsRef.current, timezone: next };
+      timezoneChosenRef.current = true;
       setTimezoneState(next);
       onTimezoneChange?.(next);
       commitPreferences();
@@ -430,6 +442,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/app/storage.d.ts

@@ -20,6 +20,12 @@ export type StoredAppPreferences = {
      */
     dateFormatChosen?: boolean;
     timeFormatChosen?: boolean;
+    /**
+     * The viewer PICKED the stored timezone (setTimezone), as opposed to it being the default. Only a
+     * picked zone is stored (gh#1282): storing the default froze it, which is how the godx preset's
+     * pinned `Asia/Ho_Chi_Minh` outlived the preset change.
+     */
+    timezoneChosen?: boolean;
 };
 /**
  * The axes a viewer's preferences are made of — the keys of {@link StoredAppPreferences}.

package/dist/app/storage.js

@@ -50,7 +50,8 @@ function readStoredPreferences(storageKey) {
       fontSize: isAppFontSize(parsed.fontSize) ? parsed.fontSize : void 0,
       scaling: typeof parsed.scaling === "number" && Number.isFinite(parsed.scaling) ? parsed.scaling : void 0,
       dateFormatChosen: parsed.dateFormatChosen === true ? true : void 0,
-      timeFormatChosen: parsed.timeFormatChosen === true ? true : void 0
+      timeFormatChosen: parsed.timeFormatChosen === true ? true : void 0,
+      timezoneChosen: parsed.timezoneChosen === true ? true : void 0
     };
   } catch {
     return {};

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

@@ -1,6 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useLayoutEffect } from "@react-aria/utils";
 import {
   Button as AriaButton,
   ButtonContext,
@@ -631,6 +632,11 @@ function DataSelect(props) {
     "aria-label": props["aria-label"],
     "aria-labelledby": props["aria-labelledby"]
   });
+  const [hasNativeLabel, setHasNativeLabel] = React.useState(false);
+  useLayoutEffect(() => {
+    const labelled = typeof document !== "undefined" && props.id !== void 0 && document.querySelector(`label[for="${CSS.escape(props.id)}"]`) !== null;
+    setHasNativeLabel(labelled);
+  }, [props.id]);
   if (props.mode !== void 0 || searchable) {
     const antdFilter = showSearchConfig?.filterOption;
     const filterOption = antdFilter === void 0 ? props.filterOption : antdFilter === false ? () => true : antdFilter === true ? void 0 : (option, query) => antdFilter(query, option);
@@ -696,7 +702,7 @@ function DataSelect(props) {
     Object.entries(rest).filter(([key]) => key.startsWith("aria-"))
   );
   const placeholderName = typeof placeholder === "string" ? placeholder : void 0;
-  const nameFromPlaceholder = ariaProps["aria-label"] === void 0 && ariaProps["aria-labelledby"] === void 0 && inheritedName["aria-label"] === void 0 && inheritedName["aria-labelledby"] === void 0 ? placeholderName : void 0;
+  const nameFromPlaceholder = ariaProps["aria-label"] === void 0 && ariaProps["aria-labelledby"] === void 0 && inheritedName["aria-label"] === void 0 && inheritedName["aria-labelledby"] === void 0 && !hasNativeLabel ? placeholderName : void 0;
   const optionTestId = (optionValue) => dataTestId ? `${dataTestId}-option-${optionValue}` : void 0;
   let flatIndex = 0;
   const renderItem = (option) => {

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/components/feedback/dialog.js

@@ -404,6 +404,11 @@ function DialogCancel({ asChild, className, onClick, ...props }) {
 DialogCancel.displayName = "DialogCancel";
 const AlertDialogAction = DialogAction;
 const AlertDialogCancel = DialogCancel;
+function sameWordIgnoringMarks(a, b) {
+  if (typeof a !== "string" || typeof b !== "string") return false;
+  const base = (text) => text.normalize("NFD").replace(/\p{M}/gu, "").replace(/đ/g, "d").replace(/Đ/g, "D").trim().toLowerCase();
+  return base(a) === base(b);
+}
 function AlertDialog({
   open,
   onOpenChange,
@@ -431,7 +436,13 @@ function AlertDialog({
   const effectiveVariant = needsPhrase ? "destructive" : variant;
   const showDangerIcon = effectiveVariant === "destructive";
   const resolvedConfirm = confirmLabel ?? (needsPhrase ? t("common.delete") : t("common.continue"));
-  const resolvedCancel = cancelLabel ?? t("common.cancel");
+  const resolvedCancel = cancelLabel ?? t("feedback.alert.cancel");
+  React.useEffect(() => {
+    if (!isDevelopment() || !sameWordIgnoringMarks(resolvedConfirm, resolvedCancel)) return;
+    console.warn(
+      `[@godxjp/ui] AlertDialog: confirmLabel "${String(resolvedConfirm)}" and the cancel label "${String(resolvedCancel)}" are the same word once tone marks are ignored \u2014 a reader tells them apart by colour alone and a screen reader not at all. Rename one (gh#1284).`
+    );
+  }, [resolvedConfirm, resolvedCancel]);
   const busy = pending || verifying;
   const confirmLabelText = verifying ? t("feedback.alert.verifying") : pending ? t("common.working") : resolvedConfirm;
   const reset = () => {

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.3",
+  "version": "32.4.1",
   "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…",
@@ -283,7 +284,8 @@
     "alert": {
       "dismiss": "Dismiss",
       "verifying": "Verifying…",
-      "stepUpFailed": "Re-authentication failed. Please try again."
+      "stepUpFailed": "Re-authentication failed. Please try again.",
+      "cancel": "Cancel"
     },
     "toast": {
       "close": "Close notification"

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": "選択…",
@@ -278,7 +279,8 @@
     "alert": {
       "dismiss": "閉じる",
       "verifying": "確認中…",
-      "stepUpFailed": "再認証に失敗しました。もう一度お試しください。"
+      "stepUpFailed": "再認証に失敗しました。もう一度お試しください。",
+      "cancel": "キャンセル"
     },
     "toast": {
       "close": "通知を閉じる"

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",
@@ -99,13 +99,14 @@
       "download": "Tải xuống",
       "retry": "Thử lại",
       "start": "Tải lên",
-      "cancel": "Huỷ",
+      "cancel": "Hủy",
       "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…",
@@ -215,7 +216,7 @@
       "empty": "Không có mục nào khớp",
       "error": "Không tải được",
       "confirm": "Xác nhận",
-      "cancel": "Huỷ",
+      "cancel": "Hủy",
       "clear": "Bỏ chọn",
       "more": "Tải thêm",
       "openDialog": "Chọn từ danh sách",
@@ -279,7 +280,8 @@
     "alert": {
       "dismiss": "Đóng",
       "verifying": "Đang xác minh…",
-      "stepUpFailed": "Xác thực lại thất bại. Vui lòng thử lại."
+      "stepUpFailed": "Xác thực lại thất bại. Vui lòng thử lại.",
+      "cancel": "Quay lại"
     },
     "toast": {
       "close": "Đóng thông báo"

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.3",
+  "version": "32.4.1",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",

package/dist/themes/godx.d.ts

@@ -11,6 +11,10 @@ import type { AppPreset } from "../app/preset.js";
  * A shadow root that embeds `@godxjp/ui/styles/core` adds `@godxjp/ui/themes/godx-tokens.css` (the
  * same colours without the fonts) instead.
  *
+ * NO `timeZone` (gh#1282): a preset must not pin a country's zone. 32.x shipped
+ * `"Asia/Ho_Chi_Minh"` here, so every godx app showed Vietnam time to its users in Japan; the zone
+ * now falls back to the viewer's browser, and an app that needs a fixed one passes `defaultTimezone`.
+ *
  * Core never imports this module, which is what keeps the GoDX artwork out of a neutral bundle.
  */
 export declare const godxPreset: AppPreset;

package/dist/themes/godx.js

@@ -3,7 +3,6 @@ import { Logo } from "../components/general/logo.js";
 const godxPreset = Object.freeze({
   name: "godx",
   defaultLocale: "vi",
-  timeZone: "Asia/Ho_Chi_Minh",
   brandMark: createElement(Logo, { mark: "godx", tone: "success" }),
   emailBrandLabel: "GoDX"
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "32.3.3",
-  "godxUiMcp": "32.3.3",
+  "version": "32.4.1",
+  "godxUiMcp": "32.4.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",