@astryxdesign/core 0.7.6-canary.fdabeba → 0.7.6

package/src/Field/PanelSearchInput.tsx

@@ -45,10 +45,8 @@ import type {StyleXStyles} from '@stylexjs/stylex';
 import {Icon} from '../Icon/Icon';
 import {InputClearButton} from './InputClearButton';
 import {mergeProps} from '../utils/mergeProps';
-import {
-  getInteractionModality,
-  useInteractionModalityTracking,
-} from '../utils/interactionModality';
+import {useInteractionModalityTracking} from '../utils/interactionModality';
+import {useMergedRefs} from '../hooks/useMergedRefs';
 import {
   colorVars,
   durationVars,
@@ -220,14 +218,15 @@ export function PanelSearchInput({
   // stays `:focus-visible`, this only narrows it.
   const [isKeyboardFocus, setIsKeyboardFocus] = useState(false);
 
-  useInteractionModalityTracking();
+  const {ref: modalityRef, readModality} = useInteractionModalityTracking();
+  const mergedInputRef = useMergedRefs(ref, modalityRef);
 
   const handleFocus = useCallback(
     (e: React.FocusEvent<HTMLInputElement>) => {
-      setIsKeyboardFocus(getInteractionModality() === 'keyboard');
+      setIsKeyboardFocus(readModality() === 'keyboard');
       onFocus?.(e);
     },
-    [onFocus],
+    [onFocus, readModality],
   );
 
   const handleBlur = useCallback(
@@ -272,7 +271,7 @@ export function PanelSearchInput({
         )}>
         <Icon icon="search" size="sm" color="secondary" xstyle={styles.icon} />
         <input
-          ref={ref}
+          ref={mergedInputRef}
           type="text"
           aria-label={label}
           placeholder={placeholder}

package/src/Field/fieldStatusPlacement.ts

@@ -0,0 +1,18 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file fieldStatusPlacement.ts
+ * @input The FieldStatus variant map
+ * @output FieldStatusPlacement, where a field control shows its status
+ * @position Field family type behind every field control's `statusVariant`
+ *
+ * A field control places its status message as a FieldStatus variant, or under
+ * `'tooltip'`, which the Field family consumes before rendering FieldStatus and
+ * shows through the control's on-field status icon (`component:FieldStatus`
+ * FR7, DEC-2). `'tooltip'` belongs here, not to FieldStatus itself, whose map
+ * keeps it only as a deprecated entry until the next minor.
+ */
+
+import type {FieldStatusVariantMap} from '../FieldStatus';
+
+export type FieldStatusPlacement = keyof FieldStatusVariantMap | 'tooltip';

package/src/Field/index.ts

@@ -5,7 +5,8 @@
 /**
  * @file index.ts
  * @input Imports Field component and types from Field.tsx, FieldLabel from FieldLabel.tsx, FieldStatus from FieldStatus.tsx
- * @output Exports Field, FieldProps, FieldStatusInput, FieldStatusType, FieldLabel, FieldLabelProps, FieldStatus component
+ * @output Exports Field, FieldProps, FieldStatusInput, FieldStatusType, FieldLabel, FieldLabelProps, FieldStatus component,
+ *   and the shared input types (including the text-entry keyboard trait types)
  * @position Component entry point; re-exported by /packages/core/src/index.ts
  *
  * SYNC: When modified, update this header and /packages/core/src/Field/Field.doc.mjs
@@ -21,6 +22,7 @@ export type {
   FieldStatusVariant,
   FieldStatusVariantMap,
 } from '../FieldStatus';
+export type {FieldStatusPlacement} from './fieldStatusPlacement';
 
 // Shared input types
 export type {InputStatus, InputStatusType, InputSize} from './types';
@@ -30,6 +32,7 @@ export type {
   FieldControlStyleProps,
   FieldPartStyleProps,
 } from './fieldParts';
+export type {AutoCapitalize, EnterKeyHint, InputMode} from './textEntryTraits';
 
 // Shared input styles
 export {

package/src/Field/inputDisabledFocus.ts

@@ -3,8 +3,9 @@
 /**
  * @file inputDisabledFocus.ts
  * @input Uses StyleX and theme tokens
- * @output inputDisabledFocusStyles (internal; not re-exported from Field/index.ts)
- * @position Field wrapper style shared by TextInput and TextArea
+ * @output inputDisabledFocusStyles (internal; not re-exported from Field/index.ts):
+ *   the one place every field's disabled focus ring is defined
+ * @position Field wrapper style shared by the text-entry fields
  */
 
 import * as stylex from '@stylexjs/stylex';
@@ -17,12 +18,69 @@ export const inputDisabledFocusStyles = stylex.create({
   ring: {
     borderColor: {
       default: colorVars['--color-border-emphasized'],
-      ':has(> [aria-disabled="true"]:focus-visible)':
-        colorVars['--color-accent'],
+      ':has(> [aria-disabled="true"]:focus-visible)': {
+        default: colorVars['--color-accent'],
+        // Forced colors repaint author borders in one system color and drop
+        // the inset shadow; Highlight keeps the focused field visible.
+        '@media (forced-colors: active)': 'Highlight',
+      },
     },
     boxShadow: {
       default: 'none',
       ':has(> [aria-disabled="true"]:focus-visible)': `inset 0px 0px 0px 2px ${colorVars['--color-accent-muted']}`,
     },
   },
+  // The same ring for a field whose input sits deeper than the wrapper's
+  // direct children (Typeahead, Tokenizer). Keyed on the input itself, so a
+  // focused token or status button keeps only its own outline.
+  nestedRing: {
+    borderColor: {
+      default: colorVars['--color-border-emphasized'],
+      ':has(input[aria-disabled="true"]:focus-visible)': {
+        default: colorVars['--color-accent'],
+        // Forced colors repaint author borders in one system color and drop
+        // the inset shadow; Highlight keeps the focused field visible.
+        '@media (forced-colors: active)': 'Highlight',
+      },
+    },
+    boxShadow: {
+      default: 'none',
+      ':has(input[aria-disabled="true"]:focus-visible)': `inset 0px 0px 0px 2px ${colorVars['--color-accent-muted']}`,
+    },
+  },
+
+  // The same ring for a field that restores it while focus is anywhere inside
+  // it (TimeInput, DateRangeInput, DateTimeInput and their touch fields).
+  withinRing: {
+    borderColor: {
+      default: colorVars['--color-border-emphasized'],
+      ':focus-within': {
+        default: colorVars['--color-accent'],
+        // Forced colors repaint author borders in one system color and drop
+        // the inset shadow; Highlight keeps the focused field visible.
+        '@media (forced-colors: active)': 'Highlight',
+      },
+    },
+    boxShadow: {
+      default: 'none',
+      ':focus-within': `inset 0px 0px 0px 2px ${colorVars['--color-accent-muted']}`,
+    },
+  },
+  // The same ring for a field that restores it while its text input has focus
+  // (DateInput and its native and touch fields).
+  inputFocusRing: {
+    borderColor: {
+      default: colorVars['--color-border-emphasized'],
+      ':has(input:focus)': {
+        default: colorVars['--color-accent'],
+        // Forced colors repaint author borders in one system color and drop
+        // the inset shadow; Highlight keeps the focused field visible.
+        '@media (forced-colors: active)': 'Highlight',
+      },
+    },
+    boxShadow: {
+      default: 'none',
+      ':has(input:focus)': `inset 0px 0px 0px 2px ${colorVars['--color-accent-muted']}`,
+    },
+  },
 });

package/src/Field/inputStyles.stylex.ts

@@ -41,9 +41,16 @@ export const inputWrapperStyles = stylex.create({
     paddingInline: spacingVars['--spacing-2'],
     borderWidth: borderVars['--border-width'],
     borderStyle: 'solid',
+    // Forced colors drop the inset shadow below and repaint author border
+    // colors in one system color, so the field-focus treatment would vanish
+    // there. A focused field's border takes the system Highlight color instead
+    // (`spec:AST-020` FR1).
     borderColor: {
       default: colorVars['--color-border-emphasized'],
-      ':focus-within': colorVars['--color-accent'],
+      ':focus-within': {
+        default: colorVars['--color-accent'],
+        '@media (forced-colors: active)': 'Highlight',
+      },
     },
     '--_field-radius': radiusVars['--radius-element'],
     borderRadius: 'var(--_field-radius)',
@@ -75,17 +82,37 @@ export const inputWrapperStyles = stylex.create({
 
 /**
  * Status border colors for input wrappers.
- * Keyed by InputStatusType.
+ * Keyed by InputStatusType. Under forced colors a focused field's border is
+ * Highlight, as in the base style, for wrappers that apply no status focus
+ * style of their own (Selector, MultiSelector).
  */
 export const inputStatusBorderStyles = stylex.create({
   warning: {
-    borderColor: colorVars['--color-border-warning'],
+    borderColor: {
+      default: colorVars['--color-border-warning'],
+      ':focus-within': {
+        default: colorVars['--color-border-warning'],
+        '@media (forced-colors: active)': 'Highlight',
+      },
+    },
   },
   error: {
-    borderColor: colorVars['--color-border-error'],
+    borderColor: {
+      default: colorVars['--color-border-error'],
+      ':focus-within': {
+        default: colorVars['--color-border-error'],
+        '@media (forced-colors: active)': 'Highlight',
+      },
+    },
   },
   success: {
-    borderColor: colorVars['--color-border-success'],
+    borderColor: {
+      default: colorVars['--color-border-success'],
+      ':focus-within': {
+        default: colorVars['--color-border-success'],
+        '@media (forced-colors: active)': 'Highlight',
+      },
+    },
   },
 });
 
@@ -124,7 +151,8 @@ export const inputStatusHoverShadowStyles = stylex.create({
 });
 
 /**
- * Status focus border styles using :focus-within.
+ * Status focus border styles using :focus-within. Under forced colors the
+ * focused border is Highlight, as in the base style.
  * Used by input wrappers that contain a child input/textarea element.
  * Keyed by InputStatusType.
  */
@@ -132,19 +160,28 @@ export const inputStatusFocusWithinStyles = stylex.create({
   warning: {
     borderColor: {
       default: colorVars['--color-border-warning'],
-      ':focus-within': colorVars['--color-border-warning'],
+      ':focus-within': {
+        default: colorVars['--color-border-warning'],
+        '@media (forced-colors: active)': 'Highlight',
+      },
     },
   },
   error: {
     borderColor: {
       default: colorVars['--color-border-error'],
-      ':focus-within': colorVars['--color-border-error'],
+      ':focus-within': {
+        default: colorVars['--color-border-error'],
+        '@media (forced-colors: active)': 'Highlight',
+      },
     },
   },
   success: {
     borderColor: {
       default: colorVars['--color-border-success'],
-      ':focus-within': colorVars['--color-border-success'],
+      ':focus-within': {
+        default: colorVars['--color-border-success'],
+        '@media (forced-colors: active)': 'Highlight',
+      },
     },
   },
 });

package/src/Field/textEntryTraits.ts

@@ -0,0 +1,116 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file textEntryTraits.ts
+ * @input The keyboard-trait props a text field accepts
+ * @output Exports the closed value unions EnterKeyHint, InputMode and
+ *   AutoCapitalize (the package entry exports these three), the fields' prop
+ *   mixin TextEntryTraitProps, and textEntryTraitAttributes, which maps the
+ *   props onto the native attributes of the editable element
+ * @position Shared by TextInput and TextArea: the one place that says how a
+ *   field tells a touch keyboard what it holds
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/TextInput/TextInput.tsx and TextInput.doc.mjs
+ * - /packages/core/src/TextArea/TextArea.tsx and TextArea.doc.mjs
+ * - /packages/core/src/Field/index.ts (type exports)
+ */
+
+/**
+ * What the Return key of a touch keyboard says. 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 single-line field's key reads Next while another field
+ * follows and a multi-line field's keeps Return, and a `type="url"` field
+ * shows Next instead of `go` while another field follows.
+ */
+export type EnterKeyHint =
+  'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+
+/**
+ * Which touch keyboard a field asks for, by the HTML standard's `inputmode`
+ * values. `numeric` brings up the number pad, and on iOS `search` brings up
+ * the web-search keyboard (a period key and a Go key, whatever
+ * `enterKeyHint` says).
+ */
+export type InputMode =
+  'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+
+/**
+ * When a touch keyboard capitalizes as you type: `off` and `none` never,
+ * `on` and `sentences` at the start of each sentence (the HTML standard names
+ * each of these two states twice), `words` at the start of each word, and
+ * `characters` every letter.
+ */
+export type AutoCapitalize =
+  'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
+
+/**
+ * Keyboard traits of a text field: a prop mixin for TextInput and TextArea,
+ * not a component's props. A touch keyboard reads these traits from the
+ * focused element. An absent prop renders no attribute, so the browser keeps
+ * its own default (on iOS a field capitalizes sentences, except a URL field).
+ */
+export interface TextEntryTraitProps {
+  /**
+   * What the Return key of a touch keyboard says (the native `enterkeyhint`).
+   * It only labels the key: what Enter does stays with the field's own
+   * handlers.
+   */
+  enterKeyHint?: EnterKeyHint;
+  /**
+   * Which touch keyboard the field asks for (the native `inputmode`),
+   * without changing what the field accepts.
+   */
+  inputMode?: InputMode;
+  /**
+   * When a touch keyboard capitalizes as you type (the native
+   * `autocapitalize`).
+   */
+  autoCapitalize?: AutoCapitalize;
+  /**
+   * Whether a touch keyboard corrects words as you type (the native
+   * `autocorrect`).
+   */
+  hasAutoCorrect?: boolean;
+}
+
+/** The native attributes the traits render as. */
+export interface TextEntryTraitAttributes {
+  enterKeyHint?: EnterKeyHint;
+  inputMode?: InputMode;
+  autoCapitalize?: AutoCapitalize;
+  autoCorrect?: 'on' | 'off';
+}
+
+/**
+ * Maps keyboard-trait props onto the native attributes for the editable
+ * element. Absent props produce no attribute.
+ *
+ * @example
+ * ```
+ * <input {...textEntryTraitAttributes({enterKeyHint: 'search', hasAutoCorrect: false})} />
+ * ```
+ */
+export function textEntryTraitAttributes({
+  enterKeyHint,
+  inputMode,
+  autoCapitalize,
+  hasAutoCorrect,
+}: TextEntryTraitProps): TextEntryTraitAttributes {
+  const attributes: TextEntryTraitAttributes = {};
+  if (enterKeyHint != null) {
+    attributes.enterKeyHint = enterKeyHint;
+  }
+  if (inputMode != null) {
+    attributes.inputMode = inputMode;
+  }
+  if (autoCapitalize != null) {
+    attributes.autoCapitalize = autoCapitalize;
+  }
+  if (hasAutoCorrect != null) {
+    attributes.autoCorrect = hasAutoCorrect ? 'on' : 'off';
+  }
+  return attributes;
+}

package/src/FieldStatus/FieldStatus.tsx

@@ -67,6 +67,8 @@ const styles = stylex.create({
     // URL). Let such an unbroken token wrap inside the field instead of
     // painting past its edges (WCAG 2.2 SC 1.4.10 Reflow).
     overflowWrap: 'anywhere',
+    // Text inside keeps `anywhere` too (Text FR3).
+    '--_astryx-text-overflow-wrap': 'anywhere',
   },
   attached: {
     marginTop: `calc(-1 * ${ATTACHED_OVERLAP})`,
@@ -143,6 +145,28 @@ export interface FieldStatusProps extends BaseProps<HTMLDivElement> {
   variant?: FieldStatusVariant;
 }
 
+// A direct `tooltip` resolves to the deprecated signature first; every other
+// call, a `FieldStatusVariant`-typed value included, resolves to the second,
+// which `ComponentProps<typeof FieldStatus>` reads.
+/**
+ * @deprecated FieldStatus has no `tooltip` presentation
+ * (`component:FieldStatus` FR7): it draws a plain message box with no tooltip.
+ * Set `statusVariant="tooltip"` on the field control instead, which shows the
+ * message from its on-field status icon. Removed in the next minor release.
+ */
+export function FieldStatus(
+  props: FieldStatusProps & {variant: 'tooltip'},
+): React.JSX.Element;
+/**
+ * A status message component for form fields: an `attached` message under a
+ * field, or a `detached` one with its own status icon.
+ *
+ * @example
+ * ```
+ * <FieldStatus type="error" message="This field is required" />
+ * ```
+ */
+export function FieldStatus(props: FieldStatusProps): React.JSX.Element;
 /**
  * A status message component for form fields.
  *
@@ -151,9 +175,10 @@ export interface FieldStatusProps extends BaseProps<HTMLDivElement> {
  * decorative for assistive tech (`aria-hidden`): the message text already names
  * the status in words and is announced through the live region. The `attached`
  * variant keeps its status affordance on the bordered input, so it renders no
- * icon here to avoid a duplicate. The `tooltip` variant renders no message box
- * at all — the input surfaces the status through a tooltip on its on-field
- * icon — so callers skip rendering FieldStatus for it.
+ * icon here to avoid a duplicate. FieldStatus has no `tooltip` presentation:
+ * a field control given `statusVariant="tooltip"` surfaces the status through
+ * a tooltip on its on-field icon and renders no FieldStatus for it
+ * (`component:FieldStatus` FR7).
  *
  * Screen-reader announcements go through the persistent `useAnnounce` live
  * regions (assertive for errors, polite otherwise) rather than `role`/

package/src/FieldStatus/index.ts

@@ -25,6 +25,13 @@
 export interface FieldStatusVariantMap {
   attached: true;
   detached: true;
+  /**
+   * @deprecated FieldStatus has no `tooltip` presentation
+   * (`component:FieldStatus` FR7): given it directly, it draws a plain message
+   * box with no tooltip. Set `statusVariant="tooltip"` on the field control
+   * (TextInput, Selector, and the rest), which shows the message from its
+   * on-field status icon. Removed in the next minor release.
+   */
   tooltip: true;
 }
 

package/src/FileInput/FileInput.doc.mjs

@@ -123,7 +123,7 @@ export const docs = {
       name: 'statusVariant',
       type: "'attached' | 'detached' | 'tooltip'",
       description:
-        'How the status message is placed relative to the input. attached overlaps directly below the input (bordered treatment); detached floats below as a separate element with spacing; tooltip hides the message box and surfaces it in a tooltip on the status icon.',
+        'How the status message is placed relative to the input. attached overlaps directly below the input (bordered treatment); detached floats below as a separate element with spacing; tooltip hides the message box and surfaces it in a tooltip on the status icon. Dropzone mode does not support attached: use detached or tooltip. From the next minor release, a dropzone resolves attached to detached and defaults to it.',
       default: "'attached'",
     },
     {
@@ -296,7 +296,7 @@ export const docsZh = {
       name: 'statusVariant',
       type: "'attached' | 'detached' | 'tooltip'",
       description:
-        '状态消息相对于输入框的放置方式。attached 直接叠加在输入框下方（带边框处理）；detached 作为独立元素浮于下方并留有间距；tooltip 隐藏消息框，并在状态图标上以提示气泡形式显示。',
+        '状态消息相对于输入框的放置方式。attached 直接叠加在输入框下方（带边框处理）；detached 作为独立元素浮于下方并留有间距；tooltip 隐藏消息框，并在状态图标上以提示气泡形式显示。dropzone 模式不支持 attached：请使用 detached 或 tooltip。从下一个次版本起，dropzone 会将 attached 解析为 detached，并以其为默认值。',
       default: "'attached'",
     },
     {
@@ -408,7 +408,7 @@ export const docsDense = {
     placeholder: 'Placeholder when no files selected.',
     mode: "Visual mode: 'input' (compact) or 'dropzone' (drag-and-drop).",
     status: 'Validation status; colored border. Message floats below.',
-    statusVariant: 'How status message is placed: attached overlaps below input; detached floats below w/ spacing; tooltip hides the box and shows it on the status icon.',
+    statusVariant: 'How status message is placed: attached overlaps below input; detached floats below w/ spacing; tooltip hides the box and shows it on the status icon. Dropzone: attached unsupported; use detached or tooltip (detached default from next minor).',
     labelTooltip: 'Tooltip in info icon at label end.',
   },
 };

package/src/FileInput/FileInput.tsx

@@ -37,12 +37,7 @@ import {
   durationVars,
   easeVars,
 } from '../theme/tokens.stylex';
-import {
-  Field,
-  InputClearButton,
-  type InputStatus,
-  type FieldStatusVariant,
-} from '../Field';
+import {Field, InputClearButton, type InputStatus} from '../Field';
 import {Icon} from '../Icon';
 import {Spinner} from '../Spinner';
 import {VisuallyHidden} from '../VisuallyHidden';
@@ -64,12 +59,19 @@ import {
 } from '../Field/fieldParts';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
 import type {TranslatorFn} from '../i18n';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
 import {useListFormatter} from '../i18n/useListFormatter';
 import {useResolvedRequired} from '../hooks/useResolvedRequired';
+import type {FieldStatusPlacement} from '../Field/fieldStatusPlacement';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/FileInput/FileInput.generated';
+
+registerEnglishFallback(english);
 function formatFileSize(bytes: number, t: TranslatorFn): string {
   if (bytes < 1024) {
     return t('@astryx.fileInput.fileSize.bytes', {size: bytes});
@@ -408,9 +410,13 @@ export interface FileInputProps extends Omit<
    * - 'attached': message overlaps directly below the input (bordered treatment)
    * - 'detached': message floats below as a separate element with spacing
    * - 'tooltip': no message box; the status icon becomes a focusable info-tip button that reveals the message on hover, keyboard focus, or tap
+   *
+   * Dropzone mode does not support 'attached': its tall surface cannot carry an
+   * overlapping message. Use 'detached' or 'tooltip' there. From the next minor
+   * release, a dropzone resolves 'attached' to 'detached' and defaults to it.
    * @default 'attached'
    */
-  statusVariant?: FieldStatusVariant;
+  statusVariant?: FieldStatusPlacement;
   /**
    * Description text displayed below the label.
    */
@@ -489,7 +495,7 @@ export function FileInput({
     containerClassName,
     containerStyle,
   });
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const generatedID = useId();
   const id = idProp ?? generatedID;
   const descriptionID = useId();
@@ -575,6 +581,31 @@ export function FileInput({
       .filter(Boolean)
       .join(' ') || undefined;
 
+  // The native input keeps taking the caller's base props (the shared FR10
+  // contract), but it is `aria-hidden` and never focused, so a caller's
+  // `aria-*` props are also set on the trigger, the field's focusable control,
+  // where assistive tech reads them. The ones the trigger composes itself are
+  // not copied, and a caller's description is joined to its own, first.
+  const {
+    'aria-describedby': callerDescribedBy,
+    'aria-label': _callerLabel,
+    'aria-labelledby': _callerLabelledBy,
+    'aria-hidden': _callerHidden,
+    'aria-disabled': _callerDisabled,
+    'aria-busy': _callerBusy,
+    'aria-invalid': _callerInvalid,
+    ...otherRest
+  } = rest as typeof rest & Record<string, unknown>;
+  const triggerAriaProps: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(otherRest)) {
+    // Booleans and numbers are valid ARIA values too: React serializes them.
+    if (key.startsWith('aria-') && value != null) {
+      triggerAriaProps[key] = value;
+    }
+  }
+  const triggerDescribedBy =
+    [callerDescribedBy, ariaDescribedBy].filter(Boolean).join(' ') || undefined;
+
   const defaultPlaceholder = isMultiple
     ? t('@astryx.fileInput.placeholderMultiple')
     : t('@astryx.fileInput.placeholder');
@@ -946,8 +977,9 @@ export function FileInput({
                 : label
             }
             aria-busy={isBusy || undefined}
-            aria-describedby={ariaDescribedBy}
             aria-invalid={status?.type === 'error' ? 'true' : undefined}
+            {...triggerAriaProps}
+            aria-describedby={triggerDescribedBy}
           />
         </VisuallyHidden>
         <input

package/src/Grid/Grid.doc.mjs

@@ -106,14 +106,14 @@ export const docs = {
     {
       name: 'align',
       type: "'start' | 'center' | 'end' | 'stretch'",
-      description: 'Vertical alignment of items.',
-      default: "'stretch'",
+      description:
+        'Vertical alignment of items (`align-items`). Unset leaves the browser default, `normal`, which stretches items that have no natural size or aspect ratio.',
     },
     {
       name: 'justify',
       type: "'start' | 'center' | 'end' | 'stretch'",
-      description: 'Horizontal alignment of items.',
-      default: "'stretch'",
+      description:
+        'Horizontal alignment of items (`justify-items`). Unset leaves the browser default, `normal`, which stretches items that have no natural size or aspect ratio.',
     },
     {
       name: 'children',

package/src/Grid/Grid.tsx

@@ -129,14 +129,16 @@ export interface GridProps extends BaseProps<HTMLDivElement> {
   rowHeight?: number;
 
   /**
-   * Vertical alignment of grid items (align-items).
-   * @default 'stretch'
+   * Vertical alignment of grid items (align-items). Unset leaves the browser
+   * default, `normal`, which stretches items that have no natural size or
+   * aspect ratio.
    */
   align?: GridAlignment;
 
   /**
-   * Horizontal alignment of grid items (justify-items).
-   * @default 'stretch'
+   * Horizontal alignment of grid items (justify-items). Unset leaves the browser
+   * default, `normal`, which stretches items that have no natural size or
+   * aspect ratio.
    */
   justify?: GridAlignment;