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

@@ -68,6 +68,11 @@
       "name": "persist",
       "type": "boolean | readonly AppPreferenceAxis[]"
     },
+    {
+      "description": "The languages the app stores USER CONTENT in, in order, source language first — e.g. `[\"ja\", \"en\", \"vi\"]` for a Japanese-first catalogue (gh#1347). A different fact from the UI locale (`defaultLocale`) and from the registered UI catalogs: a Japanese UI can edit content in three languages, and content may be stored in a language the UI has no catalog for. Every `TranslatableInput` / `TranslatableTextarea` without its own `locales` takes its tabs from this list and opens on its first entry; a field's `locales` / `defaultLocale` still override. Omit (or `[]`) to keep the field default (`getRegisteredLocales()`, first tab = the UI locale). App configuration: not persisted, no setter. Read it from `useAppContext().contentLocales` (`undefined` when unset).",
+      "name": "contentLocales",
+      "type": "readonly string[]"
+    },
     {
       "defaultValue": "false",
       "description": "OFF by default and deliberately opt-in: `name` decides what a native <form> submit sends, so switching it on for every consumer of a shared package would make apps start posting new keys to their backend on a library upgrade. Turn it on for apps that need native form posts or a screen-automation (RPA) contract on their controls. The inert `data-field` companion attribute is emitted regardless; a `name` written on the control itself always wins. NOT persisted to localStorage: it is the app's configuration, not a user choice.",
@@ -100,6 +105,7 @@
     "DO set `defaultTimezone='system'` together with `systemTimezone={serverTimezone}` when your backend knows the legal entity's canonical timezone (e.g. 'Asia/Ho_Chi_Minh'). Use `defaultTimezone='browser'` (the default) only when you want the user's browser clock. Do NOT pass a raw IANA string to `defaultTimezone` if the user may be in a different zone — use the named aliases.",
     "DO wire `onLocaleChange`, `onTimezoneChange`, `onTimeFormatChange`, `onDateFormatChange` to persist changes server-side (e.g. patch user profile via Inertia router) in addition to the automatic localStorage write. These callbacks fire after state is set, so the new value is already reflected in context.",
     "DO set `emitFieldNames` on AppProvider when the app is driven by screen automation (RPA) or posts native forms — every control under a FormField then carries a real `name` taken from the field key, and legacy automation that addressed controls by `name` keeps working after a rewrite. Leave it off (the default) otherwise: it changes what a native submit sends. The `data-field` attribute is emitted either way, so e2e selectors do not depend on this flag.",
+    "DO pass `contentLocales` when the app edits translatable content (`TranslatableInput` / `TranslatableTextarea`) — `contentLocales={[\"ja\", \"en\", \"vi\"]}` — so the tab order and the source-language first tab are stated once, not repeated as `locales` on every field. It is NOT the UI language list: leave `defaultLocale` / `registerLocale` to the UI.",
     "DO restrict the timezone dropdown by passing `timezoneOptions={APP_TIMEZONE_PRESET}` (an exported constant) to AppProvider — every `AppSettingPicker kind=\"timezone\"` inherits this restricted list from context. Without it the picker offers the full IANA list (~600 entries)."
   ],
   "useCases": [

package/agent/components/Form.json

@@ -16,7 +16,7 @@
       "type": "number | string"
     },
     {
-      "description": "Cap the control width (number→px). Omit to fill the column.",
+      "description": "Cap the control width (number→px). Omit to fill the column. Caps the control only — the helper and error still span the field column.",
       "name": "controlWidth",
       "type": "number | string"
     },

package/agent/components/FormField.json

@@ -64,7 +64,7 @@
       "type": "number | string"
     },
     {
-      "description": "Override the Form's control width for this field.",
+      "description": "Override the Form's control width for this field. Caps the control only — the helper and error still span the field column.",
       "name": "controlWidth",
       "type": "number | string"
     },

package/agent/components/TranslatableInput.json

@@ -20,12 +20,12 @@
       "type": "(value: TranslatableValue) => void"
     },
     {
-      "description": "The BCP-47 tags the field edits, in tab order. Default: every locale registered with the app (`getRegisteredLocales()` — built-in `vi`/`en`/`ja` plus `registerLocale`). Tabs are named by `Intl.DisplayNames` in the reader's UI language; the tags stay the keys.",
+      "description": "The BCP-47 tags the field edits, in tab order. Default: AppProvider `contentLocales` when set (gh#1347 — state the content languages once at the root instead of on every field), else every locale registered with the app (`getRegisteredLocales()` — built-in `vi`/`en`/`ja` plus `registerLocale`). Tabs are named by `Intl.DisplayNames` in the reader's UI language; the tags stay the keys.",
       "name": "locales",
       "type": "readonly string[]"
     },
     {
-      "description": "The locale tab selected first. Default: the AppProvider's active locale when it is in `locales`, else the fallback locale.",
+      "description": "The locale tab selected first. Default: the first of AppProvider `contentLocales` (the source language) when set and in `locales`, else the AppProvider's active locale when it is in `locales`, else the fallback locale.",
       "name": "defaultLocale",
       "type": "string"
     },
@@ -77,6 +77,7 @@
   "storyPath": "data-entry/translatable-input.tsx",
   "tagline": "ONE text field holding a value per locale (`{ ja, en, vi }`), switched by locale tabs above it (gh#1336). For user content stored per locale — a product name, a category label, a menu description (Astrotomic / Spatie `*_translations`). Locales, first tab and fallback come from AppProvider; an empty locale shows the fallback locale's text as its placeholder; a locale with an error is marked on its tab. Every other `Input` prop applies to the one control.",
   "usage": [
+    "DO set the app's content languages ONCE on the root provider — `<AppProvider contentLocales={[\"ja\", \"en\", \"vi\"]}>` — when every translatable field edits the same list; each field then needs no `locales` and opens on the source language (the first). Pass `locales` on a field only where it differs.",
     "DO wrap it in FormField: the label names the control together with the active locale («商品名 English») and names the tab strip («商品名 Language»), `required`/`helper` reach the control, and the active locale's error renders in FormField's error line.",
     "DO pass the per-locale error map from your validator as `errors` (e.g. Laravel `name.ja` → `errors.ja`). Don't pass the same message to FormField `error` as well: FormField's own `error` wins over the reported one, and it would mark the field invalid on every locale.",
     "DO set `fallbackLocale` to the content's SOURCE language (often `ja`) when it differs from the AppProvider's UI fallback — the placeholder of an untranslated locale then shows the source text to translate from.",

package/agent/components/TranslatableTextarea.json

@@ -20,12 +20,12 @@
       "type": "(value: TranslatableValue) => void"
     },
     {
-      "description": "The BCP-47 tags the field edits, in tab order. Default: the app's registered locales.",
+      "description": "The BCP-47 tags the field edits, in tab order. Default: AppProvider `contentLocales` when set, else the app's registered locales.",
       "name": "locales",
       "type": "readonly string[]"
     },
     {
-      "description": "The locale tab selected first. Default: the AppProvider's active locale.",
+      "description": "The locale tab selected first. Default: the first of AppProvider `contentLocales` when set and in `locales`, else the AppProvider's active locale.",
       "name": "defaultLocale",
       "type": "string"
     },

package/agent/components.json

@@ -5713,7 +5713,7 @@
         "type": "number | string"
       },
       {
-        "description": "Cap the control width (number→px). Omit to fill the column.",
+        "description": "Cap the control width (number→px). Omit to fill the column. Caps the control only — the helper and error still span the field column.",
         "name": "controlWidth",
         "type": "number | string"
       },
@@ -5849,7 +5849,7 @@
         "type": "number | string"
       },
       {
-        "description": "Override the Form's control width for this field.",
+        "description": "Override the Form's control width for this field. Caps the control only — the helper and error still span the field column.",
         "name": "controlWidth",
         "type": "number | string"
       },
@@ -7148,12 +7148,12 @@
         "type": "(value: TranslatableValue) => void"
       },
       {
-        "description": "The BCP-47 tags the field edits, in tab order. Default: every locale registered with the app (`getRegisteredLocales()` — built-in `vi`/`en`/`ja` plus `registerLocale`). Tabs are named by `Intl.DisplayNames` in the reader's UI language; the tags stay the keys.",
+        "description": "The BCP-47 tags the field edits, in tab order. Default: AppProvider `contentLocales` when set (gh#1347 — state the content languages once at the root instead of on every field), else every locale registered with the app (`getRegisteredLocales()` — built-in `vi`/`en`/`ja` plus `registerLocale`). Tabs are named by `Intl.DisplayNames` in the reader's UI language; the tags stay the keys.",
         "name": "locales",
         "type": "readonly string[]"
       },
       {
-        "description": "The locale tab selected first. Default: the AppProvider's active locale when it is in `locales`, else the fallback locale.",
+        "description": "The locale tab selected first. Default: the first of AppProvider `contentLocales` (the source language) when set and in `locales`, else the AppProvider's active locale when it is in `locales`, else the fallback locale.",
         "name": "defaultLocale",
         "type": "string"
       },
@@ -7205,6 +7205,7 @@
     "storyPath": "data-entry/translatable-input.tsx",
     "tagline": "ONE text field holding a value per locale (`{ ja, en, vi }`), switched by locale tabs above it (gh#1336). For user content stored per locale — a product name, a category label, a menu description (Astrotomic / Spatie `*_translations`). Locales, first tab and fallback come from AppProvider; an empty locale shows the fallback locale's text as its placeholder; a locale with an error is marked on its tab. Every other `Input` prop applies to the one control.",
     "usage": [
+      "DO set the app's content languages ONCE on the root provider — `<AppProvider contentLocales={[\"ja\", \"en\", \"vi\"]}>` — when every translatable field edits the same list; each field then needs no `locales` and opens on the source language (the first). Pass `locales` on a field only where it differs.",
       "DO wrap it in FormField: the label names the control together with the active locale («商品名 English») and names the tab strip («商品名 Language»), `required`/`helper` reach the control, and the active locale's error renders in FormField's error line.",
       "DO pass the per-locale error map from your validator as `errors` (e.g. Laravel `name.ja` → `errors.ja`). Don't pass the same message to FormField `error` as well: FormField's own `error` wins over the reported one, and it would mark the field invalid on every locale.",
       "DO set `fallbackLocale` to the content's SOURCE language (often `ja`) when it differs from the AppProvider's UI fallback — the placeholder of an untranslated locale then shows the source text to translate from.",
@@ -7240,12 +7241,12 @@
         "type": "(value: TranslatableValue) => void"
       },
       {
-        "description": "The BCP-47 tags the field edits, in tab order. Default: the app's registered locales.",
+        "description": "The BCP-47 tags the field edits, in tab order. Default: AppProvider `contentLocales` when set, else the app's registered locales.",
         "name": "locales",
         "type": "readonly string[]"
       },
       {
-        "description": "The locale tab selected first. Default: the AppProvider's active locale.",
+        "description": "The locale tab selected first. Default: the first of AppProvider `contentLocales` when set and in `locales`, else the AppProvider's active locale.",
         "name": "defaultLocale",
         "type": "string"
       },
@@ -9059,6 +9060,11 @@
         "name": "persist",
         "type": "boolean | readonly AppPreferenceAxis[]"
       },
+      {
+        "description": "The languages the app stores USER CONTENT in, in order, source language first — e.g. `[\"ja\", \"en\", \"vi\"]` for a Japanese-first catalogue (gh#1347). A different fact from the UI locale (`defaultLocale`) and from the registered UI catalogs: a Japanese UI can edit content in three languages, and content may be stored in a language the UI has no catalog for. Every `TranslatableInput` / `TranslatableTextarea` without its own `locales` takes its tabs from this list and opens on its first entry; a field's `locales` / `defaultLocale` still override. Omit (or `[]`) to keep the field default (`getRegisteredLocales()`, first tab = the UI locale). App configuration: not persisted, no setter. Read it from `useAppContext().contentLocales` (`undefined` when unset).",
+        "name": "contentLocales",
+        "type": "readonly string[]"
+      },
       {
         "defaultValue": "false",
         "description": "OFF by default and deliberately opt-in: `name` decides what a native <form> submit sends, so switching it on for every consumer of a shared package would make apps start posting new keys to their backend on a library upgrade. Turn it on for apps that need native form posts or a screen-automation (RPA) contract on their controls. The inert `data-field` companion attribute is emitted regardless; a `name` written on the control itself always wins. NOT persisted to localStorage: it is the app's configuration, not a user choice.",
@@ -9091,6 +9097,7 @@
       "DO set `defaultTimezone='system'` together with `systemTimezone={serverTimezone}` when your backend knows the legal entity's canonical timezone (e.g. 'Asia/Ho_Chi_Minh'). Use `defaultTimezone='browser'` (the default) only when you want the user's browser clock. Do NOT pass a raw IANA string to `defaultTimezone` if the user may be in a different zone — use the named aliases.",
       "DO wire `onLocaleChange`, `onTimezoneChange`, `onTimeFormatChange`, `onDateFormatChange` to persist changes server-side (e.g. patch user profile via Inertia router) in addition to the automatic localStorage write. These callbacks fire after state is set, so the new value is already reflected in context.",
       "DO set `emitFieldNames` on AppProvider when the app is driven by screen automation (RPA) or posts native forms — every control under a FormField then carries a real `name` taken from the field key, and legacy automation that addressed controls by `name` keeps working after a rewrite. Leave it off (the default) otherwise: it changes what a native submit sends. The `data-field` attribute is emitted either way, so e2e selectors do not depend on this flag.",
+      "DO pass `contentLocales` when the app edits translatable content (`TranslatableInput` / `TranslatableTextarea`) — `contentLocales={[\"ja\", \"en\", \"vi\"]}` — so the tab order and the source-language first tab are stated once, not repeated as `locales` on every field. It is NOT the UI language list: leave `defaultLocale` / `registerLocale` to the UI.",
       "DO restrict the timezone dropdown by passing `timezoneOptions={APP_TIMEZONE_PRESET}` (an exported constant) to AppProvider — every `AppSettingPicker kind=\"timezone\"` inherits this restricted list from context. Without it the picker offers the full IANA list (~600 entries)."
     ],
     "useCases": [

package/agent/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.4.1/agent/index.json"
+    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v33.5.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",
@@ -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.4.1"
+  "version": "33.5.0"
 }

package/agent/llms.txt

@@ -1,10 +1,10 @@
 # @godxjp/ui
 
 > A Japanese-enterprise React design system: 166 components, 2232 design tokens,
-> 44 cardinal rules. This file is the entry point for AI agents. Catalog version 33.4.1.
+> 44 cardinal rules. This file is the entry point for AI agents. Catalog version 33.5.0.
 
 If your client can run a process, do not read these files — run the MCP server instead
-(`npx @godxjp/ui-mcp@33.4.1`). It is searchable and version-locked. These files exist for agents
+(`npx @godxjp/ui-mcp@33.5.0`). It is searchable and version-locked. These files exist for agents
 that can only fetch URLs.
 
 ## Start
@@ -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.4.1/agent/...`. A catalog that does not match the installed
+the tag: `.../godx-jp/godxjp-ui/v33.5.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.d.ts

@@ -4,7 +4,7 @@ import type { AppContextValue, AppProviderProp } from "../props/components/app.p
 export type { AppProviderProp, AppContextValue } from "../props/components/app.prop.js";
 /** `AppProvider`'s props (`preset` included since v32, gh#1219 / gh#1220). */
 export type AppProviderProps = AppProviderProp;
-export declare function AppProvider({ children, preset, defaultLocale: defaultLocaleProp, fallbackLocale, defaultTimezone: defaultTimezoneProp, systemTimezone, defaultTimeFormat, defaultDateFormat, timezoneOptions, storageKey, persist, theme: initialTheme, brand: initialBrand, density: initialDensity, fontSize: initialFontSize, scaling: initialScaling, emitFieldNames, onLocaleChange, onTimezoneChange, onTimeFormatChange, onDateFormatChange, onThemeChange, onBrandChange, onDensityChange, onFontSizeChange, onScalingChange, }: AppProviderProps): React.JSX.Element;
+export declare function AppProvider({ children, preset, defaultLocale: defaultLocaleProp, fallbackLocale, defaultTimezone: defaultTimezoneProp, systemTimezone, defaultTimeFormat, defaultDateFormat, timezoneOptions, contentLocales: contentLocalesProp, storageKey, persist, theme: initialTheme, brand: initialBrand, density: initialDensity, fontSize: initialFontSize, scaling: initialScaling, emitFieldNames, onLocaleChange, onTimezoneChange, onTimeFormatChange, onDateFormatChange, onThemeChange, onBrandChange, onDensityChange, onFontSizeChange, onScalingChange, }: AppProviderProps): React.JSX.Element;
 export declare function useAppContext(): AppContextValue;
 /** Returns null outside AppProvider — used by pickers for optional context. */
 export declare function useOptionalAppContext(): AppContextValue | null;

package/dist/app/app-provider.js

@@ -80,6 +80,7 @@ function AppProvider({
   defaultTimeFormat = "locale",
   defaultDateFormat = "locale",
   timezoneOptions,
+  contentLocales: contentLocalesProp,
   storageKey = DEFAULT_STORAGE_KEY,
   persist = true,
   theme: initialTheme = "light",
@@ -133,6 +134,12 @@ function AppProvider({
     scaling
   });
   const persistKey = Array.isArray(persist) ? [...persist].sort().join(",") : String(persist);
+  const contentLocalesKey = contentLocalesProp?.join(",");
+  const contentLocales = React.useMemo(
+    () => contentLocalesProp,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [contentLocalesKey]
+  );
   const persistedAxes = React.useMemo(
     () => resolvePersistedAxes(persist),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -400,6 +407,7 @@ function AppProvider({
       dayPickerLocale: getDayPickerLocale(locale),
       requestHeaders,
       timezoneOptions,
+      contentLocales,
       theme,
       brand,
       density,
@@ -425,6 +433,7 @@ function AppProvider({
       dateFnsLocale,
       requestHeaders,
       timezoneOptions,
+      contentLocales,
       theme,
       brand,
       density,

package/dist/components/data-entry/form-field.js

@@ -175,7 +175,7 @@ function FormField({
             "fieldset",
             {
               role: "presentation",
-              className: "contents",
+              className: "ui-form-field-input",
               disabled: form?.disabled && childProps?.disabled !== false,
               children: childWithA11y
             }

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

@@ -3,8 +3,8 @@ import type { TranslatableValue } from "../../props/components/data-entry.prop.j
 export type { TranslatableValue, TranslatableInputProp, TranslatableInputProp as TranslatableInputProps, TranslatableTextareaProp, TranslatableTextareaProp as TranslatableTextareaProps, } from "../../props/components/data-entry.prop.js";
 /**
  * TranslatableInput — ONE text field that holds a value per locale (`{ ja, en, vi }`), switched by
- * locale tabs above it (gh#1336). The locale list, the first tab and the fallback come from
- * `AppProvider` and are overridable per field; an empty locale shows the fallback locale's text as
+ * locale tabs above it (gh#1336). The locale list and the first tab come from `AppProvider`
+ * `contentLocales` (gh#1347), the fallback from its `fallbackLocale`; each is overridable per field; an empty locale shows the fallback locale's text 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>`.
  */

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

@@ -2,6 +2,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { CircleAlert } from "lucide-react";
+import { useOptionalAppContext } from "../../app/app-provider.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { getRegisteredLocales } from "../../i18n/locale-tags.js";
 import { mergeAriaIds, useReportFieldError } from "../../lib/field-a11y.js";
@@ -35,14 +36,16 @@ function TranslatableField({
   ...rest
 }) {
   const { t, locale: uiLocale, fallbackLocale: appFallbackLocale } = useTranslation();
+  const appContentLocales = useOptionalAppContext()?.contentLocales;
+  const contentLocales = appContentLocales?.length ? appContentLocales : void 0;
   const locales = React.useMemo(() => {
-    const list = localesProp ?? getRegisteredLocales();
+    const list = localesProp ?? contentLocales ?? getRegisteredLocales();
     return list.length > 0 ? list : [uiLocale];
-  }, [localesProp, uiLocale]);
+  }, [localesProp, contentLocales, uiLocale]);
   const pick = (candidates) => candidates.find((code) => code !== void 0 && locales.includes(code)) ?? locales[0];
   const fallbackLocale = pick([fallbackLocaleProp, appFallbackLocale]);
   const [activeState, setActiveState] = React.useState(
-    () => pick([defaultLocale, uiLocale, fallbackLocale])
+    () => pick([defaultLocale, contentLocales?.[0], uiLocale, fallbackLocale])
   );
   const active = locales.includes(activeState) ? activeState : pick([defaultLocale, fallbackLocale]);
   const [innerValue, setInnerValue] = React.useState(defaultValue ?? NO_VALUE);

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

package/dist/props/components/app.prop.d.ts

@@ -46,6 +46,15 @@ export type AppProviderProp = {
      * the full IANA list; set to restrict (e.g.
      */
     timezoneOptions?: readonly AppTimezone[];
+    /**
+     * The languages the app stores USER CONTENT in (a product name in `ja`/`en`/`vi`), in order —
+     * source language first. Not the UI locale and not the registered UI catalogs: a Japanese UI
+     * can edit content in ja · en · vi, and content may be stored in a language the UI has no
+     * catalog for. Every `TranslatableInput` / `TranslatableTextarea` without its own `locales`
+     * takes its tabs from here and selects the first one. Omit to keep the per-field default
+     * (`getRegisteredLocales()`, first tab = the UI locale). App configuration, never persisted.
+     */
+    contentLocales?: readonly string[];
     /** localStorage key. Default: `godxjp.app`. */
     storageKey?: string;
     /**
@@ -167,6 +176,8 @@ export type AppContextValue = {
     requestHeaders: AppRequestHeaders;
     /** Configured timezone list; `undefined` → full IANA in the timezone-picker recipe. */
     timezoneOptions?: readonly AppTimezone[];
+    /** The app's content languages, source first; `undefined` when `contentLocales` is not set. */
+    contentLocales?: readonly string[];
     /**
      * Current theme axes (mirror `<html data-*>` / inline `--scaling`). `theme` is the user's
      * CHOICE — it can be `"system"`, which `<html data-theme>` never is.

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

@@ -244,11 +244,15 @@ type TranslatableFieldProp = {
     /** The WHOLE map after an edit — every other locale's text is carried over untouched. */
     onValueChange?: OnValueChangeProp<TranslatableValue>;
     /**
-     * The locales the field edits, in tab order. Default: every locale registered with the app
-     * (`getRegisteredLocales()` — the built-in `vi`/`en`/`ja` plus `registerLocale(...)`).
+     * The locales the field edits, in tab order. Default: the AppProvider's `contentLocales` when
+     * set, else every locale registered with the app (`getRegisteredLocales()` — the built-in
+     * `vi`/`en`/`ja` plus `registerLocale(...)`).
      */
     locales?: readonly string[];
-    /** The locale tab selected first. Default: the AppProvider's active locale when it is in `locales`. */
+    /**
+     * The locale tab selected first. Default: the first of the AppProvider's `contentLocales` (the
+     * source language) when set and in `locales`, else the AppProvider's active locale when it is.
+     */
     defaultLocale?: string;
     /**
      * The locale whose text shows as the placeholder of an EMPTY locale. Default: the AppProvider's

package/dist/styles/card-layout.css

@@ -705,15 +705,16 @@
   .ui-card-bar[data-surface="muted"] {
     background: hsl(var(--muted));
   }
+
   .ui-card-bar[data-border="none"] {
-    border-block: 0;
+    border-block-width: 0;
   }
   .ui-card-bar[data-border="block-start"] {
-    border-block-end: 0;
+    border-block-end-width: 0;
     border-block-start: var(--stroke-hairline) solid hsl(var(--border));
   }
   .ui-card-bar[data-border="block-end"] {
-    border-block-start: 0;
+    border-block-start-width: 0;
     border-block-end: var(--stroke-hairline) solid hsl(var(--border));
   }
   .ui-card-bar[data-border="both"] {

package/dist/styles/control.css

@@ -215,7 +215,8 @@
     height: auto;
     min-height: 0;
     padding: 0;
-    border: 0;
+
+    border-width: 0;
     background: transparent;
     color: inherit;
     font: inherit;
@@ -897,7 +898,7 @@
     width: 100%;
     flex: 1;
     height: var(--control-height);
-    border: 0;
+    border-width: 0;
     background: transparent;
     padding-inline: 0;
     box-shadow: none;

package/dist/styles/data-display-layout.css

@@ -3460,7 +3460,7 @@
     display: inline-block;
     max-inline-size: 100%;
     padding: 0;
-    border: 0;
+    border-width: 0;
     border-radius: var(--image-radius, var(--radius));
     background: none;
     color: inherit;

package/dist/styles/form-layout.css

@@ -87,8 +87,6 @@
     gap: var(--space-stack-xs);
     min-width: 0;
 
-    max-inline-size: var(--form-control-width, none);
-
     min-height: var(--control-height);
     align-content: center;
 
@@ -96,10 +94,32 @@
     align-items: center;
   }
 
+  .ui-form-field-control > :not(.ui-form-field-note, .ui-form-feedback) {
+    max-inline-size: var(--form-control-width, none);
+  }
+
+  .ui-form-field-input {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: inherit;
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  .ui-form-field-input > * {
+    min-width: 0;
+  }
+
   .ui-form-field-control:has(> .ui-form-field-note:first-child) {
     grid-template-rows: none;
   }
 
+  .ui-form-field-control
+    > fieldset:has(> :is(.ui-choice-group[data-orientation="vertical"], .ui-choice-field)) {
+    align-self: start;
+  }
   .ui-form-field-control
     > fieldset
     > :is(.ui-choice-group[data-orientation="vertical"], .ui-choice-field) {

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "33.4.1",
+  "version": "33.5.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/shell-layout.css

@@ -2283,7 +2283,7 @@
     justify-content: center;
     gap: var(--topbar-item-gap);
     padding-inline: var(--topbar-item-padding-inline);
-    border: 0;
+    border-width: 0;
     border-radius: var(--topbar-item-radius);
     background: transparent;
     color: hsl(var(--topbar-item-color, var(--muted-foreground)));