@astryxdesign/core 0.7.6-canary.fdabeba → 0.7.6

package/src/TextArea/TextArea.tsx

@@ -4,7 +4,8 @@
 
 /**
  * @file TextArea.tsx
- * @input Uses React, useId, ChangeEvent, ClipboardEvent, FocusEvent, Field, Icon, Spinner
+ * @input Uses React, useId, ChangeEvent, ClipboardEvent, FocusEvent, Field, Icon, Spinner,
+ *   textEntryTraits (the touch-keyboard trait props)
  * @output Exports TextArea component, TextAreaProps, TextAreaStatus, TextAreaStatusType
  * @position Core implementation; consumed by index.ts, tested by TextArea.test.tsx
  *
@@ -41,9 +42,9 @@ import {
   inputStatusBorderStyles,
   inputStatusHoverShadowStyles,
   inputStatusFocusWithinStyles,
-  type FieldStatusVariant,
 } from '../Field';
 import {Icon, renderIconSlot, type IconType} from '../Icon';
+import {isRenderable} from '../utils/isRenderable';
 import {Spinner} from '../Spinner';
 import {useTooltip} from '../Tooltip';
 import {mergeProps} from '../utils';
@@ -62,10 +63,21 @@ import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {useSize} from '../SizeContext/SizeContext';
 import {themeProps} from '../utils/themeProps';
 import {characterCount} from '../utils/characters';
-import {useTranslator} from '../i18n';
+import {
+  textEntryTraitAttributes,
+  type TextEntryTraitProps,
+} from '../Field/textEntryTraits';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
 import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
+import type {FieldStatusPlacement} from '../Field/fieldStatusPlacement';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/TextArea/TextArea.generated';
+
+registerEnglishFallback(english);
 const COUNTER_WARNING_THRESHOLD = 0.8;
 
 const styles = stylex.create({
@@ -201,10 +213,10 @@ export interface TextAreaStatus {
   message?: string;
 }
 
-export interface TextAreaProps extends Omit<
-  FieldInputBaseProps,
-  'onChange' | 'defaultValue'
-> {
+export interface TextAreaProps
+  extends
+    Omit<FieldInputBaseProps, 'onChange' | 'defaultValue'>,
+    TextEntryTraitProps {
   /** Ref forwarded to the root element */
   ref?: React.Ref<HTMLTextAreaElement>;
   /**
@@ -304,7 +316,7 @@ export interface TextAreaProps extends Omit<
    * - 'tooltip': no message box; the status icon becomes a focusable info-tip button that reveals the message on hover, keyboard focus, or tap
    * @default 'attached'
    */
-  statusVariant?: FieldStatusVariant;
+  statusVariant?: FieldStatusPlacement;
   /**
    * Width of the field. Numbers are treated as pixels, strings are used as-is
    * (e.g. `'100%'`). Sizes the whole field (label, control, and status) so they
@@ -401,6 +413,10 @@ export function TextArea({
   labelTooltip,
   startIcon,
   hasSpellCheck = true,
+  enterKeyHint,
+  inputMode,
+  autoCapitalize,
+  hasAutoCorrect,
   onPaste,
   maxLength,
   hasAutoFocus = false,
@@ -427,7 +443,11 @@ export function TextArea({
     containerStyle,
   });
   const size = useSize(sizeProp, 'md');
-  const t = useTranslator();
+  // One presence check for the start icon's slot and its padding
+  // (`architecture:react-component-runtime` INV16), on the value the caller
+  // passed: an icon component counts as present, as any non-empty value does.
+  const hasStartIcon = isRenderable(startIcon as ReactNode);
+  const t = useComponentTranslator();
   const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
   const announce = useAnnounce();
   const generatedID = useId();
@@ -622,7 +642,7 @@ export function TextArea({
           controlClassName,
           controlStyle,
         )}>
-        {startIcon && (
+        {hasStartIcon && (
           <span {...stylex.props(styles.startIcon)}>
             {renderIconSlot(startIcon, {size: 'sm', color: 'secondary'})}
           </span>
@@ -639,6 +659,12 @@ export function TextArea({
           onBlur={onBlur}
           placeholder={placeholder}
           rows={rows}
+          {...textEntryTraitAttributes({
+            enterKeyHint,
+            inputMode,
+            autoCapitalize,
+            hasAutoCorrect,
+          })}
           // A disabled textarea keeps its place in the tab order
           // (spec:AST-085): aria-disabled instead of the native attribute,
           // with readOnly + the handleChange guard keeping the value from
@@ -673,7 +699,7 @@ export function TextArea({
               styles.textarea,
               textareaSizeStyles[size],
               isDisabled && styles.textareaDisabled,
-              Boolean(startIcon) && styles.textareaWithStartIcon,
+              hasStartIcon && styles.textareaWithStartIcon,
               // Reserve trailing space only when the end slot actually renders
               // something (spinner or on-field status icon). The `detached`
               // status variant suppresses the on-field icon — its glyph lives
@@ -691,6 +717,7 @@ export function TextArea({
             {statusIcon}
           </span>
         )}
+        {/* eslint-disable-next-line @astryx/no-nullish-jsx-guard -- `maxLength` is a number; 0 still shows its counter */}
         {maxLength != null && (
           <div
             id={counterID}

package/src/TextInput/TextInput.doc.mjs

@@ -10,9 +10,9 @@ export const docs = {
   props: [
     {
       name: 'type',
-      type: "'text' | 'password' | 'email'",
+      type: "'text' | 'password' | 'email' | 'search' | 'tel' | 'url'",
       description:
-        'The HTML input type.',
+        'The HTML input type. `email`, `tel` and `url` also bring up the matching touch keyboard (email, phone pad, URL); `search` makes the field a search box (pair it with `enterKeyHint="search"` for a Search key on iOS; Chrome on Android shows one for `type="search"` alone).',
       default: "'text'",
     },
     {
@@ -168,7 +168,37 @@ export const docs = {
       name: 'autoComplete',
       type: 'string',
       description:
-        'The native autocomplete attribute, forwarded to the input unchanged. Does not affect the controlled value.',
+        'The native autocomplete attribute, forwarded to the input unchanged. Does not affect the controlled value. It is also how AutoFill knows what a field holds: tag sign-in, address and payment fields (`username`, `new-password`, `one-time-code`, `email`, `tel`, `street-address`, …).',
+    },
+    {
+      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, `enter` and `previous` included; with no hint the key reads Next while another field follows, and a `type="url"` field shows Next instead of `go` while another field follows. 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"`; Chrome on Android shows the Enter key for `inputMode="search"` alone).',
+    },
+    {
+      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, except in a URL field. `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: 'hasSpellCheck',
+      type: 'boolean',
+      description:
+        'Whether misspelled words are underlined (the native `spellcheck`). Unset, the browser decides.',
     },
     {
       name: 'containerXstyle',
@@ -216,6 +246,7 @@ export const docs = {
       {guidance: true, description: 'Use validation status with a message to explain what went wrong: "Email must include @" is better than just turning the border red.'},
       {guidance: true, description: 'Size the input to match the expected content length so users can gauge how much to type: small for zip codes, medium for names, large for URLs.'},
       {guidance: true, description: 'Add a clear button for search and filter inputs so users can quickly reset without selecting all text.'},
+      {guidance: true, description: 'Tell a touch keyboard what the field holds: `type="email"`, `"tel"` or `"url"` for those values, `inputMode="numeric"` for digits that are not a number (a one-time code), `enterKeyHint` for what Return does (Search, Send, Next), and `autoComplete` so AutoFill can fill it.'},
       {guidance: false, description: "Don't use placeholder text as a replacement for a label; placeholders disappear on focus and are not reliably read by screen readers."},
       {guidance: false, description: "Don't use TextInput for multi-line content like comments or descriptions; use TextArea instead."},
       {guidance: false, description: "Don't mark every field as required; only flag mandatory fields so users are not overwhelmed by validation errors."},
@@ -240,8 +271,9 @@ export const docsZh = {
   props: [
     {
       name: 'type',
-      type: "'text' | 'password' | 'email'",
-      description: 'HTML 输入框类型。',
+      type: "'text' | 'password' | 'email' | 'search' | 'tel' | 'url'",
+      description:
+        'HTML 输入框类型。`email`、`tel` 和 `url` 还会调出对应的触屏键盘（邮箱、电话键盘、URL）；`search` 让字段成为搜索框（在 iOS 上配合 `enterKeyHint="search"` 显示搜索键；Android 上的 Chrome 单独设置 `type="search"` 即显示搜索键）。',
       default: "'text'",
     },
     {
@@ -379,7 +411,37 @@ export const docsZh = {
       name: 'autoComplete',
       type: 'string',
       description:
-        '原生 autocomplete 属性，原样转发给输入框。不影响受控的值。',
+        '原生 autocomplete 属性，原样转发给输入框。不影响受控的值。自动填充也靠它判断字段的内容：请为登录、地址和支付字段设置对应的值（`username`、`new-password`、`one-time-code`、`email`、`tel`、`street-address` 等）。',
+    },
+    {
+      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）为每个值显示各自的按键，包括 `enter` 和 `previous`；未设置时，后面还有字段则显示“下一项”；`type="url"` 的字段后面还有字段时，即使设为 `go` 也显示“下一项”。它只改变按键的标签：按下回车做什么仍由你的处理函数决定。',
+    },
+    {
+      name: 'inputMode',
+      type: "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'",
+      description:
+        '字段请求的触屏键盘（原生 `inputmode`），不改变字段接受的内容：`numeric` 显示数字键盘，`decimal` 显示带小数点的数字键盘，`tel` 显示电话键盘，`search` 显示网页搜索键盘（即使设置了 `enterKeyHint="search"`，iOS 上它的回车键仍显示为“前往”；Android 上的 Chrome 对单独的 `inputMode="search"` 显示回车键）。',
+    },
+    {
+      name: 'autoCapitalize',
+      type: "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'",
+      description:
+        '触屏键盘在输入时何时自动大写（原生 `autocapitalize`）。未设置时，iOS 会将句首大写，但 URL 字段除外。`off` 与 `none` 从不大写；`on` 与 `sentences` 将每句句首大写。',
+    },
+    {
+      name: 'hasAutoCorrect',
+      type: 'boolean',
+      description:
+        '触屏键盘是否在输入时自动更正单词（原生 `autocorrect`）。未设置时由浏览器决定；对用户名、验证码等不是单词的值请关闭它。',
+    },
+    {
+      name: 'hasSpellCheck',
+      type: 'boolean',
+      description:
+        '是否为拼错的单词加下划线（原生 `spellcheck`）。未设置时由浏览器决定。',
     },
     {
       name: 'containerXstyle',
@@ -427,6 +489,7 @@ export const docsZh = {
       {guidance: true, description: 'Use validation status with a message to explain what went wrong: "Email must include @" is better than just turning the border red.'},
       {guidance: true, description: 'Size the input to match the expected content length so users can gauge how much to type: small for zip codes, medium for names, large for URLs.'},
       {guidance: true, description: 'Add a clear button for search and filter inputs so users can quickly reset without selecting all text.'},
+      {guidance: true, description: 'Tell a touch keyboard what the field holds: `type="email"`, `"tel"` or `"url"` for those values, `inputMode="numeric"` for digits that are not a number (a one-time code), `enterKeyHint` for what Return does (Search, Send, Next), and `autoComplete` so AutoFill can fill it.'},
       {guidance: false, description: "Don't use placeholder text as a replacement for a label; placeholders disappear on focus and are not reliably read by screen readers."},
       {guidance: false, description: "Don't use TextInput for multi-line content like comments or descriptions; use TextArea instead."},
       {guidance: false, description: "Don't mark every field as required; only flag mandatory fields so users are not overwhelmed by validation errors."},
@@ -455,6 +518,7 @@ export const docsDense = {
       {guidance: true, description: 'Use validation status with a message to explain what went wrong: "Email must include @" is better than just turning the border red.'},
       {guidance: true, description: 'Size the input to match the expected content length so users can gauge how much to type: small for zip codes, medium for names, large for URLs.'},
       {guidance: true, description: 'Add a clear button for search and filter inputs so users can quickly reset without selecting all text.'},
+      {guidance: true, description: 'Tell a touch keyboard what the field holds: `type="email"`, `"tel"` or `"url"` for those values, `inputMode="numeric"` for digits that are not a number (a one-time code), `enterKeyHint` for what Return does (Search, Send, Next), and `autoComplete` so AutoFill can fill it.'},
       {guidance: false, description: "Don't use placeholder text as a replacement for a label; placeholders disappear on focus and are not reliably read by screen readers."},
       {guidance: false, description: "Don't use TextInput for multi-line content like comments or descriptions; use TextArea instead."},
       {guidance: false, description: "Don't mark every field as required; only flag mandatory fields so users are not overwhelmed by validation errors."},

package/src/TextInput/TextInput.tsx

@@ -4,8 +4,9 @@
 
 /**
  * @file TextInput.tsx
- * @input Uses React, useId, ChangeEvent, Field, Icon, InputGroupContext
- * @output Exports TextInput component, TextInputProps
+ * @input Uses React, useId, ChangeEvent, Field, Icon, InputGroupContext,
+ *   textEntryTraits (the touch-keyboard trait props)
+ * @output Exports TextInput component, TextInputProps, TextInputType
  * @position Core implementation; consumed by index.ts, tested by TextInput.test.tsx
  *
  * SYNC: When modified, update these files to stay in sync:
@@ -42,13 +43,17 @@ import {
   inputStatusBorderStyles,
   inputStatusHoverShadowStyles,
   inputStatusFocusWithinStyles,
-  type FieldStatusVariant,
 } from '../Field';
 import {renderIconSlot, type IconType} from '../Icon';
+import {isRenderable} from '../utils/isRenderable';
 import {Spinner} from '../Spinner';
 import {useTooltip} from '../Tooltip';
 import {VisuallyHidden} from '../VisuallyHidden';
 import {getInputARIA, isImeKeyEvent} from '../utils';
+import {
+  textEntryTraitAttributes,
+  type TextEntryTraitProps,
+} from '../Field/textEntryTraits';
 import {joinAriaIDs} from '../utils/inputAria';
 
 const styles = stylex.create({
@@ -119,20 +124,35 @@ import {
 import {inputDisabledFocusStyles} from '../Field/inputDisabledFocus';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
 import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
-export type TextInputType = 'text' | 'password' | 'email';
+import type {FieldStatusPlacement} from '../Field/fieldStatusPlacement';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/TextInput/TextInput.generated';
 
-export interface TextInputProps extends Omit<
-  FieldInputBaseProps,
-  'onChange' | 'defaultValue'
-> {
+registerEnglishFallback(english);
+/**
+ * The HTML input type. Beyond their meaning, `email`, `tel`, `url` and
+ * `password` choose a touch keyboard (email, phone pad, URL) and its
+ * capitalization; `search` makes the field a search box.
+ */
+export type TextInputType =
+  'text' | 'password' | 'email' | 'search' | 'tel' | 'url';
+
+export interface TextInputProps
+  extends
+    Omit<FieldInputBaseProps, 'onChange' | 'defaultValue'>,
+    TextEntryTraitProps {
   /** Ref forwarded to the root element */
   ref?: React.Ref<HTMLInputElement>;
   /**
-   * The HTML input type.
+   * The HTML input type. `email`, `tel` and `url` also bring up the matching
+   * touch keyboard (email, phone pad, URL); `search` makes the field a search
+   * box (pair it with `enterKeyHint="search"` for a Search key).
    * @default 'text'
    */
   type?: TextInputType;
@@ -214,7 +234,7 @@ export interface TextInputProps extends Omit<
    * - 'tooltip': no message box; the status icon becomes a focusable info-tip button that reveals the message on hover, keyboard focus, or tap
    * @default 'attached'
    */
-  statusVariant?: FieldStatusVariant;
+  statusVariant?: FieldStatusPlacement;
   /**
    * The size of the input.
    * - 'sm': Compact size (18px height)
@@ -282,6 +302,11 @@ export interface TextInputProps extends Omit<
    * session-scoped field that must not reuse a prior value).
    */
   autoComplete?: React.InputHTMLAttributes<HTMLInputElement>['autoComplete'];
+  /**
+   * Whether misspelled words are underlined (the native `spellcheck`).
+   * Unset, the browser decides.
+   */
+  hasSpellCheck?: boolean;
 }
 
 /**
@@ -318,6 +343,11 @@ export function TextInput({
   htmlName,
   onEnter,
   onKeyDown,
+  enterKeyHint,
+  inputMode,
+  autoCapitalize,
+  hasAutoCorrect,
+  hasSpellCheck,
   width,
   containerXstyle,
   containerClassName,
@@ -339,7 +369,7 @@ export function TextInput({
     containerClassName,
     containerStyle,
   });
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
   // A disabled field keeps its tab stop but, like a natively disabled one,
   // runs no caller event handler other than focus and blur (`spec:AST-085` FR2).
@@ -487,7 +517,11 @@ export function TextInput({
         controlClassName,
         controlStyle,
       )}>
-      {startIcon && renderIconSlot(startIcon, {size: 'sm', color: 'secondary'})}
+      {/* The shared presence check decides the slot
+          (`architecture:react-component-runtime` INV16); an icon component
+          counts as present, as any non-empty value does. */}
+      {isRenderable(startIcon as ReactNode) &&
+        renderIconSlot(startIcon, {size: 'sm', color: 'secondary'})}
       {inputGroup && <VisuallyHidden id={inputLabelID}>{label}</VisuallyHidden>}
       <input
         {...fieldProps}
@@ -495,6 +529,14 @@ export function TextInput({
         id={id}
         name={isDisabled ? undefined : htmlName}
         type={type}
+        {...textEntryTraitAttributes({
+          enterKeyHint,
+          inputMode,
+          autoCapitalize,
+          hasAutoCorrect,
+        })}
+        // Only when set, so an untyped `spellCheck` passed through still applies.
+        {...(hasSpellCheck != null ? {spellCheck: hasSpellCheck} : {})}
         value={optimisticValue}
         onChange={handleChange}
         onKeyDown={

package/src/Thumbnail/Thumbnail.tsx

@@ -48,7 +48,13 @@ import {themeProps} from '../utils/themeProps';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {usePressFeedback} from '../hooks/usePressFeedback';
-import {useTranslator} from '../i18n';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Thumbnail/Thumbnail.generated';
+
+registerEnglishFallback(english);
 
 export interface ThumbnailProps extends BaseProps<HTMLDivElement> {
   /** Ref forwarded to the root element */
@@ -358,7 +364,7 @@ export function Thumbnail({
   ...props
 }: ThumbnailProps) {
   const pressable = usePressFeedback();
-  const t = useTranslator();
+  const t = useComponentTranslator();
 
   // Track the exact src that failed (rather than a boolean) so a changed src
   // gets a fresh load attempt instead of the stale error.

package/src/TimeInput/TimeInput.tsx

@@ -31,6 +31,7 @@ import {
   type FocusEvent,
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
+import {inputDisabledFocusStyles} from '../Field/inputDisabledFocus';
 import {
   colorVars,
   sizeVars,
@@ -45,7 +46,6 @@ import {
   inputStatusBorderStyles,
   inputStatusHoverShadowStyles,
   inputStatusFocusWithinStyles,
-  type FieldStatusVariant,
 } from '../Field';
 import {Icon} from '../Icon';
 import {Spinner} from '../Spinner';
@@ -78,7 +78,7 @@ import {InputGroupInternalContext} from '../InputGroup/InputGroupInternalContext
 import {groupStyles, inputGroupItemProps} from '../InputGroup/groupStyles';
 import {useTooltip} from '../Tooltip';
 import {themeProps} from '../utils/themeProps';
-import {useLocale, useTranslator} from '../i18n';
+import {useLocale} from '../i18n';
 import {
   formatLocaleTime,
   parseLocaleTime,
@@ -94,22 +94,18 @@ import {
   type InputPresentation,
 } from '../utils/inputPresentation';
 import {useDevWarning} from '../hooks/useDevWarning';
+import type {FieldStatusPlacement} from '../Field/fieldStatusPlacement';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/TimeInput/TimeInput.generated';
+
+registerEnglishFallback(english);
 
 const TOUCH_POINTER_QUERY = '(pointer: coarse)';
 
 const styles = stylex.create({
-  // The shared disabled style drops the focus ring; restore it while a
-  // control inside the field holds focus (spec:AST-085 FR6). Defaults repeat it.
-  disabledFocusRing: {
-    borderColor: {
-      default: colorVars['--color-border-emphasized'],
-      ':focus-within': colorVars['--color-accent'],
-    },
-    boxShadow: {
-      default: 'none',
-      ':focus-within': `inset 0px 0px 0px 2px ${colorVars['--color-accent-muted']}`,
-    },
-  },
   icon: {
     display: 'flex',
     alignItems: 'center',
@@ -377,7 +373,7 @@ export interface TimeInputProps extends Omit<
    * - 'tooltip': no message box; the status icon becomes a focusable info-tip button that reveals the message on hover, keyboard focus, or tap
    * @default 'attached'
    */
-  statusVariant?: FieldStatusVariant;
+  statusVariant?: FieldStatusPlacement;
 
   /**
    * Width of the field. Numbers are treated as pixels, strings are used as-is
@@ -454,7 +450,7 @@ function TimeField({
     onKeyDown: onKeyDownProp,
     ...controlProps
   } = rest;
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const locale = useLocale();
   const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
   const placeholder =
@@ -785,7 +781,7 @@ function TimeField({
           inputWrapperStyles.base,
           sizeStyles[size],
           isDisabled && inputWrapperStyles.disabled,
-          isDisabled && styles.disabledFocusRing,
+          isDisabled && inputDisabledFocusStyles.withinRing,
           status && inputStatusBorderStyles[status.type],
           status && !isDisabled && inputStatusHoverShadowStyles[status.type],
           status && inputStatusFocusWithinStyles[status.type],

package/src/TimeInput/TouchTimeField.tsx

@@ -27,6 +27,7 @@ import {
   type KeyboardEvent,
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
+import {inputDisabledFocusStyles} from '../Field/inputDisabledFocus';
 import {BottomSheet} from '../BottomSheet';
 import {Button} from '../Button';
 import {
@@ -46,9 +47,9 @@ import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
 import {useMergedRefs} from '../hooks/useMergedRefs';
 import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {Icon} from '../Icon';
-import {useLocale, useTranslator} from '../i18n';
+import {useLocale} from '../i18n';
 import {formatLocaleTime} from '../utils/timeFormat';
-import {colorVars, sizeVars, spacingVars} from '../theme/tokens.stylex';
+import {sizeVars, spacingVars} from '../theme/tokens.stylex';
 import {useSize} from '../SizeContext/SizeContext';
 import {Spinner} from '../Spinner';
 import {useTooltip} from '../Tooltip';
@@ -67,6 +68,13 @@ import {
 } from '../utils';
 import {chainEventHandlers} from '../utils/chainEventHandlers';
 import type {TimeInputProps} from './TimeInput';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/TimeInput/TouchTimeField.generated';
+
+registerEnglishFallback(english);
 
 const sizeStyles = stylex.create({
   sm: {height: sizeVars['--size-element-sm'], minWidth: 120},
@@ -75,17 +83,6 @@ const sizeStyles = stylex.create({
 });
 
 const styles = stylex.create({
-  // Same as TimeInput's: the focus ring for a focused disabled field.
-  disabledFocusRing: {
-    borderColor: {
-      default: colorVars['--color-border-emphasized'],
-      ':focus-within': colorVars['--color-accent'],
-    },
-    boxShadow: {
-      default: 'none',
-      ':focus-within': `inset 0px 0px 0px 2px ${colorVars['--color-accent-muted']}`,
-    },
-  },
   iconButton: {
     display: 'flex',
     alignItems: 'center',
@@ -236,7 +233,7 @@ export function TouchTimeField({
     onClick: onClickProp,
     ...controlProps
   } = rest;
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const locale = useLocale();
   const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
   const placeholder =
@@ -468,7 +465,7 @@ export function TouchTimeField({
           inputWrapperStyles.base,
           sizeStyles[size],
           isDisabled && inputWrapperStyles.disabled,
-          isDisabled && styles.disabledFocusRing,
+          isDisabled && inputDisabledFocusStyles.withinRing,
           status && inputStatusBorderStyles[status.type],
           status && !isDisabled && inputStatusHoverShadowStyles[status.type],
           status && inputStatusFocusWithinStyles[status.type],

package/src/Timer/Timer.tsx

@@ -9,7 +9,7 @@
  * @position Core content primitive for elapsed duration in active operations
  *
  * SYNC: When modified, update these files to stay in sync:
- * - /packages/core/src/Timer/Timer.spec.md
+ * - /docs/specs/components/Timer/Timer.spec.md
  * - /packages/core/src/Timer/Timer.doc.mjs
  * - /packages/core/src/Timer/Timer.test.tsx
  * - /packages/core/src/Timer/index.ts

package/src/Timestamp/Timestamp.tsx

@@ -30,7 +30,6 @@ import {Text} from '../Text';
 import type {TextType, TextSize, TextColor, TextWeight} from '../theme/types';
 import {mergeProps} from '../utils';
 import {useDevWarning} from '../hooks/useDevWarning';
-import {useTranslator} from '../i18n';
 import {useLocale} from '../i18n/useLocale';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
@@ -43,6 +42,13 @@ import type {
 } from './tooltipEntries';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Timestamp/Timestamp.generated';
+
+registerEnglishFallback(english);
 // Load the overlay lazily so a card-less Timestamp — the default — never
 // bundles HoverCard or the copy affordance's Icon/IconButton. Mirrors the code
 // split the read-only Tooltip path used before it.
@@ -289,7 +295,7 @@ export function Timestamp({
   'data-testid': testId,
   ...rest
 }: TimestampProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const locale = useLocale();
   const timeRef = useRef<HTMLTimeElement>(null);
   const mergedTimeRef = useMergedRefs(ref, timeRef);

package/src/Timestamp/TimestampHoverCard.tsx

@@ -30,7 +30,6 @@ import {HoverCard} from '../HoverCard/HoverCard';
 import {IconButton} from '../IconButton/IconButton';
 import {Icon} from '../Icon/Icon';
 import {useClipboard} from '../hooks/useClipboard';
-import {useTranslator} from '../i18n/useTranslator';
 import {themeProps} from '../utils/themeProps';
 import {
   colorVars,
@@ -39,6 +38,13 @@ import {
   fontWeightVars,
 } from '../theme/tokens.stylex';
 import type {TimestampTooltipLine} from './tooltipEntries';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Timestamp/TimestampHoverCard.generated';
+
+registerEnglishFallback(english);
 
 const styles = stylex.create({
   // The card is a definition list laid out as a grid so cells align into
@@ -117,7 +123,7 @@ const COPY_FEEDBACK_MS = 1500;
  * of this machinery.
  */
 function CopyButton({value}: {value: string}) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const {copy, isCopied: copied} = useClipboard({
     announce: t('@astryx.timestamp.copied'),
     resetAfterMs: COPY_FEEDBACK_MS,