@godxjp/ui 33.8.1 → 33.9.1

package/agent/index.json

@@ -1,7 +1,7 @@
 {
   "counts": {
     "anti-ai-tells": 35,
-    "components": 166,
+    "components": 169,
     "patterns": 28,
     "rules": 44,
     "tokens": 2235,
@@ -16,7 +16,7 @@
     },
     {
       "file": "components-index.json",
-      "note": "50 KB — name + group + tagline for all 166. FETCH THIS FIRST, then fetch only the components you chose.",
+      "note": "52 KB — name + group + tagline for all 169. FETCH THIS FIRST, then fetch only the components you chose.",
       "url": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json"
     },
     {
@@ -54,7 +54,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/v33.8.1/agent/index.json"
+    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v33.9.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",
@@ -68,5 +68,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": "33.8.1"
+  "version": "33.9.1"
 }

package/agent/llms.txt

@@ -1,10 +1,10 @@
 # @godxjp/ui
 
-> A Japanese-enterprise React design system: 166 components, 2235 design tokens,
-> 44 cardinal rules. This file is the entry point for AI agents. Catalog version 33.8.1.
+> A Japanese-enterprise React design system: 169 components, 2235 design tokens,
+> 44 cardinal rules. This file is the entry point for AI agents. Catalog version 33.9.1.
 
 If your client can run a process, do not read these files — run the MCP server instead
-(`npx @godxjp/ui-mcp@33.8.1`). It is searchable and version-locked. These files exist for agents
+(`npx @godxjp/ui-mcp@33.9.1`). It is searchable and version-locked. These files exist for agents
 that can only fetch URLs.
 
 ## Start
@@ -16,7 +16,7 @@ that can only fetch URLs.
 ## Catalog
 
 - [patterns-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/patterns-index.json): 28 whole-task patterns (name, tagline, tags). Start here when the task is a TASK — "build a settings page" — then fetch `patterns/<name>.json` for complete code.
-- [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 50 KB — all 166 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
+- [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 52 KB — all 169 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
 - [components/&lt;Name&gt;.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components/Select.json): one file per component (1 KB–37 KB, median 6 KB). Read the index, then fetch only the ones you chose — this is the selective route, and the reason you do not need the blob.
 - [components.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components.json): 1.3 MB — every entry in one file. Most URL fetchers truncate a response this size without saying so; prefer the per-component files.
 - [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 216 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 113 `semantic` roles, 1906 `component` knobs.
@@ -27,7 +27,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/v33.8.1/agent/...`. A catalog that does not match the installed
+the tag: `.../godx-jp/godxjp-ui/v33.9.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/components/data-entry/index.d.ts

@@ -9,8 +9,8 @@ export { CheckboxGroup } from "./checkbox-group.js";
 export { Radio, RadioGroup, RadioItem, RadioGroupRoot } from "./radio.js";
 export { Textarea } from "./textarea.js";
 export type { TextareaProps } from "./textarea.js";
-export { TranslatableInput, TranslatableTextarea } from "./translatable-input.js";
-export type { TranslatableValue, TranslatableInputProp, TranslatableInputProps, TranslatableTextareaProp, TranslatableTextareaProps, } from "./translatable-input.js";
+export { TranslatableField, TranslatableInput, TranslatableTextarea } from "./translatable-input.js";
+export type { TranslatableValue, TranslatableLocaleProp, TranslatableFieldProp, TranslatableFieldProps, TranslatableFieldControlProp, TranslatableInputProp, TranslatableInputProps, TranslatableTextareaProp, TranslatableTextareaProps, } from "./translatable-input.js";
 export { Form, useFormLayout, type FormLayoutContextValue } from "./form.js";
 export type { FormProp, FormProps } from "./form.js";
 export { FormField } from "./form-field.js";

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

@@ -17,7 +17,7 @@ import { Checkbox } from "./checkbox.js";
 import { CheckboxGroup } from "./checkbox-group.js";
 import { Radio, RadioGroup, RadioItem, RadioGroupRoot } from "./radio.js";
 import { Textarea } from "./textarea.js";
-import { TranslatableInput, TranslatableTextarea } from "./translatable-input.js";
+import { TranslatableField, TranslatableInput, TranslatableTextarea } from "./translatable-input.js";
 import { Form, useFormLayout } from "./form.js";
 import { FormField } from "./form-field.js";
 import { FormErrors, FormErrorsProvider } from "./form-errors.js";
@@ -126,6 +126,7 @@ export {
   ToggleGroup,
   ToggleGroupItem,
   Transfer,
+  TranslatableField,
   TranslatableInput,
   TranslatableTextarea,
   TreeSelect,

package/dist/components/data-entry/translatable-input.d.ts

@@ -1,6 +1,26 @@
 import * as React from "react";
-import type { TranslatableValue } from "../../props/components/data-entry.prop.js";
-export type { TranslatableValue, TranslatableInputProp, TranslatableInputProp as TranslatableInputProps, TranslatableTextareaProp, TranslatableTextareaProp as TranslatableTextareaProps, } from "../../props/components/data-entry.prop.js";
+import type { TranslatableFieldProp } from "../../props/components/data-entry.prop.js";
+export type { TranslatableValue, TranslatableLocaleProp, TranslatableFieldProp, TranslatableFieldProp as TranslatableFieldProps, TranslatableFieldControlProp, TranslatableInputProp, TranslatableInputProp as TranslatableInputProps, TranslatableTextareaProp, TranslatableTextareaProp as TranslatableTextareaProps, } from "../../props/components/data-entry.prop.js";
+/**
+ * TranslatableField — the shared engine of {@link TranslatableInput}, {@link TranslatableTextarea}
+ * and `@godxjp/block-editor`'s `TranslatableRichText` (gh#1365): it owns the locale list, the active
+ * tab, the per-locale map, the fallback placeholder, the error marks and the FormField error report,
+ * and renders the ONE control in the panel through `renderControl`. Every prop it does not own is
+ * passed through to that control.
+ *
+ * WHY THE SWITCHER IS `Tabs`, NOT `Segmented`. The WAI-ARIA APG radio group is for CHOOSING A VALUE
+ * — a segmented control's choice is form state and is submitted with the form. The locale here is
+ * not form state: every locale's text is submitted together, and the switcher only decides which
+ * of them the one editing region shows. That is the APG tabs pattern — a tablist whose selected
+ * tab controls one tabpanel — so a screen reader announces "English, tab, 2 of 3" and the region
+ * that follows, instead of offering a "language" question the form never asks.
+ *
+ * ONE CONTROL, NOT ONE PER LOCALE. The panel holds a single control whose value, `lang` and
+ * placeholder follow the active tab (`Tabs.controls` points the tab at it, gh#1021). Swapping
+ * elements per tab would hand the forwarded `ref`, the FormField `id` and an IME composition to a
+ * new node on every switch.
+ */
+export declare function TranslatableField({ renderControl, toPlaceholder, value: valueProp, defaultValue, onValueChange, locales: localesProp, defaultLocale, fallbackLocale: fallbackLocaleProp, errors, size, placeholder, className, ...rest }: TranslatableFieldProp): React.JSX.Element;
 /**
  * TranslatableInput — ONE text field that holds a value per locale (`{ ja, en, vi }`), switched by
  * locale tabs above it (gh#1336). The locale list and the first tab come from `AppProvider`
@@ -8,22 +28,6 @@ export type { TranslatableValue, TranslatableInputProp, TranslatableInputProp as
  * its placeholder; a locale with an error is marked on its tab. Every other `Input` prop applies to
  * the single control, and `ref` is that control's `<input>`.
  */
-export declare const TranslatableInput: React.ForwardRefExoticComponent<Omit<import("./input.js").InputProp, "defaultValue" | "lang" | "onValueChange" | "value"> & {
-    value?: import("../../props/index.js").ValueProp<TranslatableValue>;
-    defaultValue?: import("../../props/index.js").DefaultValueProp<TranslatableValue>;
-    onValueChange?: import("../../props/index.js").OnValueChangeProp<TranslatableValue>;
-    locales?: readonly string[];
-    defaultLocale?: string;
-    fallbackLocale?: string;
-    errors?: Partial<Record<string, import("../../props/index.js").ErrorProp>>;
-} & React.RefAttributes<HTMLInputElement>>;
+export declare const TranslatableInput: React.ForwardRefExoticComponent<Omit<import("./input.js").InputProp, "defaultValue" | "lang" | "onValueChange" | "value"> & import("./translatable-input.js").TranslatableLocaleProp & React.RefAttributes<HTMLInputElement>>;
 /** TranslatableTextarea — {@link TranslatableInput} over a `Textarea`; `ref` is the `<textarea>`. */
-export declare const TranslatableTextarea: React.ForwardRefExoticComponent<Omit<import("./textarea.js").TextareaProp, "defaultValue" | "lang" | "onValueChange" | "value"> & {
-    value?: import("../../props/index.js").ValueProp<TranslatableValue>;
-    defaultValue?: import("../../props/index.js").DefaultValueProp<TranslatableValue>;
-    onValueChange?: import("../../props/index.js").OnValueChangeProp<TranslatableValue>;
-    locales?: readonly string[];
-    defaultLocale?: string;
-    fallbackLocale?: string;
-    errors?: Partial<Record<string, import("../../props/index.js").ErrorProp>>;
-} & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const TranslatableTextarea: React.ForwardRefExoticComponent<Omit<import("./textarea.js").TextareaProp, "defaultValue" | "lang" | "onValueChange" | "value"> & import("./translatable-input.js").TranslatableLocaleProp & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/data-entry/translatable-input.js

@@ -21,7 +21,8 @@ function localeName(code, uiLocale) {
 }
 const idPart = (code) => code.replace(/[^A-Za-z0-9_-]/g, "_");
 function TranslatableField({
-  kind,
+  renderControl,
+  toPlaceholder,
   value: valueProp,
   defaultValue,
   onValueChange,
@@ -32,7 +33,6 @@ function TranslatableField({
   size,
   placeholder,
   className,
-  forwardedRef,
   ...rest
 }) {
   const { t, locale: uiLocale, fallbackLocale: appFallbackLocale } = useTranslation();
@@ -74,11 +74,11 @@ function TranslatableField({
   const showOwnError = hasActiveError && !insideFormField;
   const controlProps = {
     ...rest,
-    ref: forwardedRef,
+    size,
     lang: active,
     value: activeText,
     onValueChange: handleText,
-    placeholder: fallbackText ? fallbackText : placeholder,
+    placeholder: fallbackText ? toPlaceholder?.(fallbackText) ?? fallbackText : placeholder,
     // The control is named by the field AND the locale it holds: "商品名 English".
     "aria-labelledby": labelledBy ? `${labelledBy} ${localeNameId}` : void 0,
     "aria-invalid": hasActiveError ? true : rest["aria-invalid"],
@@ -139,19 +139,7 @@ function TranslatableField({
             id: panelId,
             "aria-labelledby": tabId(active),
             className: "ui-translatable-field-panel",
-            children: kind === "input" ? /* @__PURE__ */ jsx(
-              Input,
-              {
-                ...controlProps,
-                size
-              }
-            ) : /* @__PURE__ */ jsx(
-              Textarea,
-              {
-                ...controlProps,
-                size
-              }
-            )
+            children: renderControl(controlProps)
           }
         ),
         showOwnError ? /* @__PURE__ */ jsx("p", { id: ownErrorId, role: "alert", className: "ui-form-field-note text-error-strong text-xs", children: activeError }) : null
@@ -164,8 +152,7 @@ const TranslatableInput = React.forwardRef(
     TranslatableField,
     {
       ...props,
-      kind: "input",
-      forwardedRef: ref
+      renderControl: (control) => /* @__PURE__ */ jsx(Input, { ...control, ref })
     }
   )
 );
@@ -175,13 +162,13 @@ const TranslatableTextarea = React.forwardRef(
     TranslatableField,
     {
       ...props,
-      kind: "textarea",
-      forwardedRef: ref
+      renderControl: (control) => /* @__PURE__ */ jsx(Textarea, { ...control, ref })
     }
   )
 );
 TranslatableTextarea.displayName = "TranslatableTextarea";
 export {
+  TranslatableField,
   TranslatableInput,
   TranslatableTextarea
 };

package/dist/components/navigation/tabs-scroll.d.ts

@@ -15,10 +15,6 @@ export type TabsScrollBox = {
  * coordinates, so it is direction- and orientation-agnostic (LTR, RTL, vertical rail alike).
  */
 export declare function isTabFullyVisible(scrollport: TabsScrollBox, trigger: TabsScrollBox): boolean;
-/**
- * The trigger the strip must keep reachable: the focused trigger when the roving focus is inside
- * this list (manual activation can park focus off the selected tab), otherwise the active one.
- */
 export declare function resolveTabScrollTarget(list: HTMLElement): HTMLElement | null;
 /** `true` when the user has asked for reduced motion (falsy/unsupported environments say no). */
 export declare function prefersReducedMotion(): boolean;
@@ -80,7 +76,7 @@ export declare function useTabsScrollReporter(listRef: React.RefObject<HTMLEleme
  * removed) and the strip scrolling (the user swiping, or `useKeepActiveTabVisible` re-pinning a
  * trigger).
  *
- * `values` is joined into the effect key rather than passed as a dependency, so a consumer that
+ * `values` is serialized into the effect key rather than passed as a dependency, so a consumer that
  * rebuilds its `items` array on every render does not re-arm the observers on every render.
  *
  * The first measurement ALWAYS reports, even when nothing is hidden. Suppressing it looks harmless

package/dist/components/navigation/tabs-scroll.js

@@ -7,12 +7,15 @@ function isTabFullyVisible(scrollport, trigger) {
   if (width <= 0 && height <= 0) return true;
   return trigger.left >= scrollport.left - VISIBILITY_EPSILON && trigger.right <= scrollport.right + VISIBILITY_EPSILON && trigger.top >= scrollport.top - VISIBILITY_EPSILON && trigger.bottom <= scrollport.bottom + VISIBILITY_EPSILON;
 }
+const TAB_TRIGGER_SELECTOR = '[role="tab"], [data-slot="tabs-trigger"]';
 function resolveTabScrollTarget(list) {
   const focused = list.ownerDocument?.activeElement;
-  if (focused instanceof HTMLElement && focused !== list && list.contains(focused) && focused.getAttribute("role") === "tab") {
+  if (focused instanceof HTMLElement && focused !== list && list.contains(focused) && focused.matches(TAB_TRIGGER_SELECTOR)) {
     return focused;
   }
-  return list.querySelector('[role="tab"][data-state="active"]');
+  return list.querySelector(
+    '[role="tab"][data-state="active"], [data-slot="tabs-trigger"][data-state="active"]'
+  );
 }
 function prefersReducedMotion() {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
@@ -69,7 +72,7 @@ function useKeepActiveTabVisible(listRef) {
 }
 function resolveHiddenTabValues(list, values) {
   const scrollport = list.getBoundingClientRect();
-  const triggers = [...list.querySelectorAll('[role="tab"]')];
+  const triggers = [...list.querySelectorAll(TAB_TRIGGER_SELECTOR)];
   const hidden = [];
   triggers.forEach((trigger, index) => {
     const value = values[index];
@@ -115,16 +118,30 @@ function useTabsOverflowValues(listRef, values, onChange) {
   React.useEffect(() => {
     onChangeRef.current = onChange;
   });
-  const key = values === void 0 ? null : values.join(" ");
-  React.useEffect(() => {
+  const key = values === void 0 ? null : JSON.stringify(values);
+  React.useLayoutEffect(() => {
     if (key === null) return void 0;
     const list = listRef.current;
     if (!list) return void 0;
-    const all = key === "" ? [] : key.split(" ");
+    const all = JSON.parse(key);
     let last = null;
     const measure = () => {
-      const hidden = resolveHiddenTabValues(list, all);
-      const next = hidden.join(" ");
+      const triggers = [...list.querySelectorAll(TAB_TRIGGER_SELECTOR)];
+      const menu = list.parentElement?.querySelector(".ui-tabs-overflow");
+      const vertical = list.dataset.orientation === "vertical";
+      const style = getComputedStyle(list);
+      const boxes = triggers.map((trigger) => trigger.getBoundingClientRect());
+      const extent = boxes.length ? Math.max(...boxes.map((box2) => vertical ? box2.bottom : box2.right)) - Math.min(...boxes.map((box2) => vertical ? box2.top : box2.left)) : 0;
+      const padding = vertical ? parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) : parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+      const box = list.getBoundingClientRect();
+      const menuBox = menu?.getBoundingClientRect();
+      const gap = menu && list.parentElement ? parseFloat(getComputedStyle(list.parentElement).gap) || 0 : 0;
+      const fitsWithoutMenu = menuBox && extent + padding <= (vertical ? box.height + menuBox.height : box.width + menuBox.width) + gap;
+      const hidden = fitsWithoutMenu ? [] : resolveHiddenTabValues(list, all);
+      triggers.forEach((trigger, index) => {
+        trigger.toggleAttribute("data-overflow-hidden", hidden.includes(all[index]));
+      });
+      const next = JSON.stringify(hidden);
       if (next === last) return;
       last = next;
       onChangeRef.current(hidden);
@@ -139,12 +156,18 @@ function useTabsOverflowValues(listRef, values, onChange) {
     if (typeof ResizeObserver !== "undefined") {
       const resizeObserver = new ResizeObserver(measure);
       resizeObserver.observe(list);
+      list.querySelectorAll(TAB_TRIGGER_SELECTOR).forEach((trigger) => {
+        resizeObserver.observe(trigger);
+      });
       cleanups.push(() => {
         resizeObserver.disconnect();
       });
     }
     return () => {
       for (const cleanup of cleanups) cleanup();
+      list.querySelectorAll(TAB_TRIGGER_SELECTOR).forEach((trigger) => {
+        trigger.removeAttribute("data-overflow-hidden");
+      });
     };
   }, [key, listRef]);
 }

package/dist/components/navigation/tabs.d.ts

@@ -8,7 +8,7 @@ export type TabsProps = Omit<React.ComponentPropsWithoutRef<"div">, "defaultValu
     dir?: "ltr" | "rtl";
     activationMode?: "manual" | "automatic";
 };
-export declare function Tabs({ className, orientation, items, value, defaultValue, onValueChange, activationMode, dir, variant, tabPlacement, size, centered, bodied, extra, destroyOnHidden, onEdit, addIcon, hideAdd, closeIcon, onTabClick, overflow, animated, indicator, moreIcon, onTabScroll, controls, listClassName, contentClassName, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: TabsProps): React.JSX.Element;
+export declare function Tabs({ className, orientation, items, value, defaultValue, onValueChange, activationMode, dir, variant, tabPlacement, size, centered, bodied, extra, destroyOnHidden, onEdit, addIcon, hideAdd, closeIcon, onTabClick, overflow, animated, indicator, moreIcon, onTabScroll, controls, linkComponent, listClassName, contentClassName, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: TabsProps): React.JSX.Element;
 export declare const TabsList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     variant?: "default" | "line";
     /**