@astryxdesign/core 0.7.6-canary.fdabeba → 0.7.6

package/src/Table/plugins/filtering/useTableFiltering.tsx

@@ -49,7 +49,7 @@ import type {
   HeaderCellRenderProps,
 } from '../../types';
 import {proportional} from '../../columnUtils';
-import {useLocale, useTranslator} from '../../../i18n';
+import {useLocale} from '../../../i18n';
 import type {
   PowerSearchConfig,
   PowerSearchField,
@@ -64,6 +64,13 @@ import type {
   StringListOperatorValue,
   EntityListOperatorValue,
 } from '../../../PowerSearch/types';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../../../i18n/useComponentTranslator';
+import english from '../../../i18n/generated-english/Table/plugins/filtering/useTableFiltering.generated';
+
+registerEnglishFallback(english);
 
 // =============================================================================
 // Filter Value Types
@@ -430,7 +437,7 @@ function TextFilterControl({
   size: 'sm' | 'md';
   hasClear?: boolean;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const store = useFilterStore();
   const config = store.getConfig();
   const value = config.filters[columnKey];
@@ -540,7 +547,7 @@ function NumberFilterControl({
   size: 'sm' | 'md';
   hasClear?: boolean;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const store = useFilterStore();
   const config = store.getConfig();
   const value = config.filters[columnKey];
@@ -615,7 +622,7 @@ function SelectorFilterControl({
   size: 'sm' | 'md';
   hasClear?: boolean;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const store = useFilterStore();
   const config = store.getConfig();
   const value = config.filters[columnKey];
@@ -679,7 +686,7 @@ function MultiSelectorFilterControl({
   size: 'sm' | 'md';
   hasClear?: boolean;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const store = useFilterStore();
   const config = store.getConfig();
   const value = config.filters[columnKey];
@@ -721,7 +728,7 @@ function DateFilterControl({
   size: 'sm' | 'md';
   hasClear?: boolean;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const store = useFilterStore();
   const value = store.getConfig().filters[columnKey] as string | undefined;
 
@@ -750,7 +757,7 @@ function TimeFilterControl({
   size: 'sm' | 'md';
   hasClear?: boolean;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const store = useFilterStore();
   const value = store.getConfig().filters[columnKey] as string | undefined;
 
@@ -781,7 +788,7 @@ function StringListFilterControl({
   size: 'sm' | 'md';
   hasClear?: boolean;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const store = useFilterStore();
   const value =
     (store.getConfig().filters[columnKey] as string[] | undefined) ?? [];
@@ -923,7 +930,7 @@ function PopoverFilterTrigger({
   header: string;
   operatorValue: OperatorValue;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const store = useFilterStore();
   const config = store.getConfig();
   const value = config.filters[columnKey];

package/src/Table/plugins/groupedRows/useTableGroupedRows.tsx

@@ -21,7 +21,13 @@ import {
 } from '../../../theme/tokens.stylex';
 import {Icon} from '../../../Icon';
 import type {TablePlugin} from '../../types';
-import {useTranslator} from '../../../i18n';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../../../i18n/useComponentTranslator';
+import english from '../../../i18n/generated-english/Table/plugins/groupedRows/useTableGroupedRows.generated';
+
+registerEnglishFallback(english);
 
 // A synthetic group-header row injected into the flattened data. Real rows
 // never carry this marker.
@@ -272,7 +278,7 @@ const styles = stylex.create({
 export function useTableGroupedRows<T extends Record<string, unknown>>(
   config: UseTableGroupedRowsConfig<T>,
 ): UseTableGroupedRowsResult<T> {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const {
     data,
     groupBy,

package/src/Table/plugins/pagination/useTablePagination.tsx

@@ -22,7 +22,13 @@ import {spacingVars} from '../../../theme/tokens.stylex';
 import {Pagination} from '../../../Pagination';
 import type {PaginationProps} from '../../../Pagination';
 import type {TablePlugin} from '../../types';
-import {useTranslator} from '../../../i18n';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../../../i18n/useComponentTranslator';
+import english from '../../../i18n/generated-english/Table/plugins/pagination/useTablePagination.generated';
+
+registerEnglishFallback(english);
 
 // =============================================================================
 // Styles
@@ -197,7 +203,7 @@ export interface UseTablePaginationConfig {
 export function useTablePagination<T extends Record<string, unknown>>(
   config: UseTablePaginationConfig,
 ): TablePlugin<T> {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const {
     page,
     onPageChange,

package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx

@@ -5,7 +5,7 @@
 /**
  * @file useTableRowExpansion.tsx
  * @input React, StyleX, Icon, Table types, table context (density), i18n
- *   (useTranslator)
+ *   (useComponentTranslator)
  * @output Exports useTableRowExpansion hook + config type
  * @position Row-expansion plugin (detail panel); consumed by Table via plugins prop
  *
@@ -42,7 +42,6 @@ import {Icon} from '../../../Icon';
 import {VisuallyHidden} from '../../../VisuallyHidden';
 import {resolveContextActions} from '../../tableContextMenu';
 import {useTableContext} from '../../useTableCellStyles';
-import {useTranslator} from '../../../i18n';
 import {rtlStyles} from '../../../utils';
 import {
   hasInteractiveAncestor,
@@ -72,6 +71,13 @@ import {
   rowEdge,
   type BottomEdge,
 } from '../../glidingDivider';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../../../i18n/useComponentTranslator';
+import english from '../../../i18n/generated-english/Table/plugins/rowExpansion/useTableRowExpansion.generated';
+
+registerEnglishFallback(english);
 
 // =============================================================================
 // Config
@@ -345,7 +351,7 @@ function ExpansionChevron({
   isExpanded: boolean;
   onToggle: () => void;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const ctx = useTableContext();
   return (
     <button
@@ -595,7 +601,7 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
     animatedLayout,
   } = config;
 
-  const t = useTranslator();
+  const t = useComponentTranslator();
 
   // Final rendered column count, captured in transformColumns (pipeline step
   // 1) and read in transformBodyRow for the detail panel's colSpan.

package/src/Table/plugins/rowStatus/useTableRowStatus.tsx

@@ -20,11 +20,17 @@ import {useMemo} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {Icon, type IconColor, type IconName} from '../../../Icon';
 import {Tooltip} from '../../../Tooltip';
-import {useTranslator} from '../../../i18n';
 import {warnOnce} from '../../../utils/devWarning';
 import {VisuallyHidden} from '../../../VisuallyHidden';
 import type {TableRowStatus, TableSemanticRowStatus} from '../../index';
 import type {TableColumn, TablePlugin} from '../../types';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../../../i18n/useComponentTranslator';
+import english from '../../../i18n/generated-english/Table/plugins/rowStatus/useTableRowStatus.generated';
+
+registerEnglishFallback(english);
 
 /**
  * Named colors supported by the custom row-status marker. These resolve to the
@@ -201,7 +207,7 @@ const styles = stylex.create({
 export function useTableRowStatus<T extends Record<string, unknown>>(
   config: UseTableRowStatusConfig<T>,
 ): TablePlugin<T> {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const {getStatus} = config;
 
   return useMemo((): TablePlugin<T> => {

package/src/Table/plugins/selection/useTableSelection.tsx

@@ -53,7 +53,13 @@ import {CheckboxInput} from '../../../CheckboxInput';
 import {mergeRefs} from '../../../utils';
 import type {TablePlugin, TableColumn, BodyRowRenderProps} from '../../types';
 import {pixel} from '../../columnUtils';
-import {useTranslator} from '../../../i18n';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../../../i18n/useComponentTranslator';
+import english from '../../../i18n/generated-english/Table/plugins/selection/useTableSelection.generated';
+
+registerEnglishFallback(english);
 
 // =============================================================================
 // Config Type
@@ -235,7 +241,7 @@ function SelectAllCheckboxInner<T extends Record<string, unknown>>({
 }: {
   store: SelectionStore<T>;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const getSnapshot = useCallback(() => {
     const config = store.getConfig();
     const allSelected = config.getIsAllSelected();
@@ -287,7 +293,7 @@ function SelectionCellContentInner<T extends Record<string, unknown>>({
   store: SelectionStore<T>;
   item: T;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const config = store.getConfig();
   const isSelected = useIsItemSelected(store, item);
   const selectable = config.getIsItemSelectable?.(item) ?? true;

package/src/Table/plugins/sortable/useTableSortable.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file useTableSortable.tsx
- * @input React, types, Icon, theme tokens, i18n (useTranslator)
+ * @input React, types, Icon, theme tokens, i18n (useComponentTranslator)
  * @output Exports useTableSortable hook and sort-related types
  * @position Sortable plugin; consumed by Table via plugins prop
  *
@@ -19,13 +19,19 @@ import {colorVars, spacingVars, radiusVars} from '../../../theme/tokens.stylex';
 import {focusOutlineProps} from '../../../utils/focusOutline.stylex';
 import {Icon} from '../../../Icon';
 import {resolveContextActions} from '../../tableContextMenu';
-import {useTranslator} from '../../../i18n';
 import type {
   TablePlugin,
   HeaderCellRenderProps,
   TableColumn,
   TableContextAction,
 } from '../../types';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../../../i18n/useComponentTranslator';
+import english from '../../../i18n/generated-english/Table/plugins/sortable/useTableSortable.generated';
+
+registerEnglishFallback(english);
 
 // =============================================================================
 // Sort Types
@@ -210,7 +216,7 @@ function SortHeaderButton<T extends Record<string, unknown>>({
   children: ReactNode;
   configRef: React.RefObject<UseTableSortableConfig>;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const config = configRef.current;
   const sortKey = resolveSortKey(column) ?? '';
   const entryIndex = config.sort.findIndex(e => e.sortKey === sortKey);
@@ -303,12 +309,14 @@ function SortHeaderButton<T extends Record<string, unknown>>({
             color={direction != null ? 'accent' : 'secondary'}
           />
         </span>
+        {/* eslint-disable-next-line @astryx/no-nullish-jsx-guard -- `rank` is the column's sort position, a number */}
         {rank != null && (
           <span {...stylex.props(sortStyles.rank)} aria-hidden="true">
             {rank}
           </span>
         )}
       </button>
+      {/* eslint-disable-next-line @astryx/no-nullish-jsx-guard -- `rank` is the column's sort position, a number */}
       {rank != null && (
         // Hidden, so it adds nothing to the button's or the header's name;
         // aria-describedby still reads it.
@@ -349,7 +357,7 @@ export function useTableSortable<
   T extends Record<string, unknown>,
   TSortKey extends string = string,
 >(config: UseTableSortableConfig<TSortKey>): TablePlugin<T> {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const configRef = useRef(config);
   configRef.current = config;
 

package/src/Table/plugins/stickyColumns/useTableStickyColumns.tsx

@@ -33,7 +33,7 @@ import type {
 } from '../../types';
 import {resolveColumnFloorWidths} from '../../columnUtils';
 import {collapsedBottom} from '../../rowDivider';
-import {GLIDING_ATTRIBUTE} from '../../glidingDivider';
+import {GLIDING_ATTRIBUTE, PINNED_ATTRIBUTE} from '../../glidingDivider';
 import {useTheme, useThemeName} from '../../../theme/useTheme';
 
 // =============================================================================
@@ -183,7 +183,6 @@ const SHADOW_VAR_END = '--table-sticky-shadow-end';
 // border on the row, or the next row's top border), it is read after each
 // commit and on resize and carried as the cell's `carry` state
 // (syncPinnedDividers).
-const PINNED_ATTRIBUTE = 'data-astryx-table-pinned';
 /** Spread into a pinned cell's props: the attribute the divider sync finds. */
 const PINNED_PROPS: Record<string, string> = {[PINNED_ATTRIBUTE]: ''};
 const CARRY = 'carry';

package/src/Table/plugins/tree/useTableTreeData.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file useTableTreeData.tsx
- * @input React, StyleX, Icon, Table types, theme tokens, i18n (useTranslator)
+ * @input React, StyleX, Icon, Table types, theme tokens, i18n (useComponentTranslator)
  * @output Exports useTableTreeData hook + config/meta types
  * @position Tree plugin; consumed by Table via plugins prop.
  *   Pairs with useTableTreeState (owns expansion state + flattening).
@@ -53,7 +53,13 @@ import type {
   BodyRowRenderProps,
   HeaderCellRenderProps,
 } from '../../types';
-import {useTranslator} from '../../../i18n';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../../../i18n/useComponentTranslator';
+import english from '../../../i18n/generated-english/Table/plugins/tree/useTableTreeData.generated';
+
+registerEnglishFallback(english);
 
 // =============================================================================
 // Types
@@ -322,7 +328,7 @@ function TreeExpander({
   isExpanded: boolean;
   onToggle: () => void;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   return (
     <button
       type="button"
@@ -370,7 +376,7 @@ function TreeExpandAllToggle({
   onExpandAll: () => void;
   onCollapseAll: () => void;
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const allExpanded = isAllExpanded === true;
   return (
     <button

package/src/Text/Heading.doc.mjs

@@ -79,7 +79,7 @@ export const docs = {
       name: 'wordBreak',
       type: "'break-word' | 'break-all'",
       description:
-        "Word break behavior when truncating. Defaults to 'break-all' for single-line truncation, 'break-word' otherwise.",
+        "Word break behavior when truncating. Defaults to 'break-all' for single-line truncation, 'break-word' otherwise. Without truncation, a token longer than its line (a URL, an ID) wraps (`overflow-wrap: break-word`), so in ordinary flow text does not make the page scroll sideways. Inside a flex row, give the flex child `min-width: 0` so it can shrink. A container you style with `overflow-wrap: anywhere` does not reach this text; Astryx's own containers pass their wrap through.",
     },
     {
       name: 'textWrap',
@@ -111,6 +111,28 @@ export const docs = {
       type: 'string',
       description: 'HTML id attribute.',
     },
+    {
+      name: 'xstyle',
+      type: 'StyleXStyles',
+      description:
+        'StyleX styles applied to the heading element. Must be a stylex.create() value: not an inline style object like style={{}}.',
+    },
+    {
+      name: 'className',
+      type: 'string',
+      description: 'CSS class name applied to the heading element.',
+    },
+    {
+      name: 'style',
+      type: 'React.CSSProperties',
+      description:
+        'Inline styles applied to the heading element. When `maxLines` is above 1, its line clamp replaces any `WebkitLineClamp` in `style`.',
+    },
+    {
+      name: 'ref',
+      type: 'React.Ref<HTMLHeadingElement>',
+      description: 'Ref forwarded to the heading element.',
+    },
   ],
 };
 
@@ -181,7 +203,7 @@ export const docsZh = {
       name: 'wordBreak',
       type: "'break-word' | 'break-all'",
       description:
-        "截断时的断词行为。单行截断默认为 'break-all'，其他情况默认为 'break-word'。",
+        "截断时的断词行为。单行截断默认为 'break-all'，其他情况默认为 'break-word'。不截断时，超过一行宽度的长串（如 URL、ID）会换行（`overflow-wrap: break-word`），因此在普通文档流中文本不会让页面横向滚动。在 flex 行中，请为 flex 子元素设置 `min-width: 0` 以便其收缩。你自己设置了 `overflow-wrap: anywhere` 的容器不会作用于此文本；Astryx 自带的容器会传递其换行方式。",
     },
     {
       name: 'textWrap',
@@ -212,6 +234,28 @@ export const docsZh = {
       type: 'string',
       description: 'HTML id 属性。',
     },
+    {
+      name: 'xstyle',
+      type: 'StyleXStyles',
+      description:
+        '应用于标题元素的 StyleX 样式。必须是 stylex.create() 的值，而不是 style={{}} 这样的内联样式对象。',
+    },
+    {
+      name: 'className',
+      type: 'string',
+      description: '应用于标题元素的 CSS 类名。',
+    },
+    {
+      name: 'style',
+      type: 'React.CSSProperties',
+      description:
+        '应用于标题元素的内联样式。当 `maxLines` 大于 1 时，其行数截断会替换 `style` 中的 `WebkitLineClamp`。',
+    },
+    {
+      name: 'ref',
+      type: 'React.Ref<HTMLHeadingElement>',
+      description: '转发到标题元素的 Ref。',
+    },
   ],
 };
 
@@ -237,12 +281,17 @@ export const docsDense = {
     hasTruncateTooltip:
       "Tooltip for truncated text; true=default position, false=disabled, or a placement ('above' | 'below' | 'start' | 'end').",
     wordBreak:
-      "Word break behavior; defaults 'break-all' for single-line, 'break-word' otherwise.",
+      "Word break behavior when truncating; defaults 'break-all' for single-line, 'break-word' otherwise. Untruncated long tokens wrap (overflow-wrap: break-word); a flex child needs min-width: 0; your own container's overflow-wrap: anywhere does not reach this text (Astryx containers pass theirs through).",
     textWrap: 'Text wrapping behavior.',
     justify:
       "Text alignment (justification); logical values 'start' | 'center' | 'end' for RTL.",
     hasCapsize: 'Optical alignment via text-box-trim; forces block display.',
     hasStrikethrough: 'Strikethrough text decoration.',
     id: 'HTML id attribute.',
+    xstyle: 'StyleX styles on the heading; stylex.create() value only.',
+    className: 'CSS class on the heading.',
+    style:
+      'inline styles on the heading; with maxLines>1 the line clamp replaces WebkitLineClamp.',
+    ref: 'ref to the heading element.',
   },
 };

package/src/Text/Text.doc.mjs

@@ -118,7 +118,7 @@ export const docs = {
       name: 'wordBreak',
       type: "'break-word' | 'break-all'",
       description:
-        "Word break behavior when truncating. Defaults to 'break-all' for single-line truncation, 'break-word' otherwise.",
+        "Word break behavior when truncating. Defaults to 'break-all' for single-line truncation, 'break-word' otherwise. Without truncation, a token longer than its line (a URL, an ID) wraps (`overflow-wrap: break-word`), so in ordinary flow text does not make the page scroll sideways. Inside a flex row, give the flex child `min-width: 0` so it can shrink. A container you style with `overflow-wrap: anywhere` does not reach this text; Astryx's own containers pass their wrap through.",
     },
     {
       name: 'textWrap',

package/src/Text/text.stylex.ts

@@ -229,12 +229,24 @@ export const sizeByLevelStyles = stylex.create({
 // Display Styles
 // =============================================================================
 
+// Text that is not truncated. A token longer than its line (a URL, an ID)
+// wraps instead of overflowing, so in ordinary flow text does not force
+// horizontal scrolling at 320 CSS px (WCAG 2.2 1.4.10; Text and Heading FR3).
+// `break-word` keeps min-content, so tables and auto-sized columns lay out
+// ordinary words as before; a flex child still needs `min-width: 0` from its
+// container. A container that wraps with `anywhere` (an empty state, a toast,
+// a banner) sets the private `--_astryx-text-overflow-wrap` beside its own
+// `overflow-wrap`, so Text inside it keeps `anywhere`.
+const NON_TRUNCATED_OVERFLOW_WRAP =
+  'var(--_astryx-text-overflow-wrap, break-word)';
 export const displayStyles = stylex.create({
   inline: {
     display: 'inline',
+    overflowWrap: NON_TRUNCATED_OVERFLOW_WRAP,
   },
   block: {
     display: 'block',
+    overflowWrap: NON_TRUNCATED_OVERFLOW_WRAP,
   },
 });
 

package/src/TextArea/TextArea.doc.mjs

@@ -212,7 +212,8 @@ export const docs = {
     {
       name: 'hasSpellCheck',
       type: 'boolean',
-      description: 'Enables or disables browser spell checking.',
+      description:
+        'Enables or disables browser spell checking.',
       default: 'true',
     },
     {
@@ -261,6 +262,30 @@ export const docs = {
       description:
         'The native autocomplete attribute, forwarded to the textarea unchanged. Does not affect the controlled value.',
     },
+    {
+      name: 'enterKeyHint',
+      type: "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'",
+      description:
+        'What the Return key of a touch keyboard says (the native `enterkeyhint`). iOS gives `done`, `go`, `next`, `search` and `send` their own key (a glyph on iOS 26: a checkmark, an arrow, a chevron, a magnifier, an up arrow); `enter` and `previous` keep the plain Return key. Chrome on Android (Gboard) gives every value its own key; with no hint a TextArea keeps Return. It only labels the key: what Enter does stays with your handlers.',
+    },
+    {
+      name: 'inputMode',
+      type: "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'",
+      description:
+        'Which touch keyboard the field asks for (the native `inputmode`) without changing what it accepts: `numeric` brings up the number pad, `decimal` the decimal pad, `tel` the phone pad, `search` the web-search keyboard (whose Return key reads Go on iOS even with `enterKeyHint="search"`).',
+    },
+    {
+      name: 'autoCapitalize',
+      type: "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'",
+      description:
+        'When a touch keyboard capitalizes as you type (the native `autocapitalize`). Unset, iOS capitalizes sentences. `off` and `none` never capitalize; `on` and `sentences` capitalize each sentence.',
+    },
+    {
+      name: 'hasAutoCorrect',
+      type: 'boolean',
+      description:
+        'Whether a touch keyboard corrects words as you type (the native `autocorrect`). Unset, the browser decides; turn it off for usernames, codes and other values that are not words.',
+    },
     {
       name: 'containerXstyle',
       type: 'StyleXStyles',
@@ -336,6 +361,11 @@ export const docs = {
         description:
           'Set maxLength with a character counter when there is a defined limit; it helps users stay within bounds before they submit.',
       },
+      {
+        guidance: true,
+        description:
+          'Keep Return a line break in a multi-line field. Relabel it with enterKeyHint (send, done) only when your own Enter handling does what the label says.',
+      },
       {
         guidance: true,
         description:
@@ -535,6 +565,30 @@ export const docsZh = {
       type: 'string',
       description: '原生 autocomplete 属性，原样转发给文本域。不影响受控的值。',
     },
+    {
+      name: 'enterKeyHint',
+      type: "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'",
+      description:
+        '触屏键盘回车键上显示的内容（原生 `enterkeyhint`）。iOS 为 `done`、`go`、`next`、`search` 和 `send` 显示各自的按键（iOS 26 上为图标：对勾、箭头、右尖括号、放大镜、上箭头）；`enter` 和 `previous` 保留普通的回车键。Android 上的 Chrome（Gboard）为每个值显示各自的按键；未设置时 TextArea 保留回车键。它只改变按键的标签：按下回车做什么仍由你的处理函数决定。',
+    },
+    {
+      name: 'inputMode',
+      type: "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'",
+      description:
+        '字段请求的触屏键盘（原生 `inputmode`），不改变字段接受的内容：`numeric` 显示数字键盘，`decimal` 显示带小数点的数字键盘，`tel` 显示电话键盘，`search` 显示网页搜索键盘（即使设置了 `enterKeyHint="search"`，iOS 上它的回车键仍显示为“前往”）。',
+    },
+    {
+      name: 'autoCapitalize',
+      type: "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'",
+      description:
+        '触屏键盘在输入时何时自动大写（原生 `autocapitalize`）。未设置时，iOS 会将句首大写。`off` 与 `none` 从不大写；`on` 与 `sentences` 将每句句首大写。',
+    },
+    {
+      name: 'hasAutoCorrect',
+      type: 'boolean',
+      description:
+        '触屏键盘是否在输入时自动更正单词（原生 `autocorrect`）。未设置时由浏览器决定；对用户名、验证码等不是单词的值请关闭它。',
+    },
     {
       name: 'containerXstyle',
       type: 'StyleXStyles',
@@ -609,6 +663,11 @@ export const docsZh = {
         description:
           'Set maxLength with a character counter when there is a defined limit; it helps users stay within bounds before they submit.',
       },
+      {
+        guidance: true,
+        description:
+          'Keep Return a line break in a multi-line field. Relabel it with enterKeyHint (send, done) only when your own Enter handling does what the label says.',
+      },
       {
         guidance: true,
         description:
@@ -659,6 +718,11 @@ export const docsDense = {
         guidance: true,
         description: 'Set maxLength for character counter when a limit exists.',
       },
+      {
+        guidance: true,
+        description:
+          'Return stays a line break; relabel it (enterKeyHint) only if your Enter handling matches.',
+      },
       {
         guidance: true,
         description: