@xh/hoist 87.1.1 → 87.3.0

package/inspector/instances/InstancesModel.ts

@@ -16,6 +16,7 @@ import {action, bindable, isObservableProp, makeObservable, runInAction} from '@
 import {wait} from '@xh/hoist/promise';
 import {trimToDepth} from '@xh/hoist/utils/js';
 import {compact, find, forIn, head, without} from 'lodash';
+import {instanceLabel} from '../impl/InspectorUtils';
 import {StatsModel} from '../stats/StatsModel';
 import {DiagnosticsModel} from './DiagnosticsModel';
 
@@ -48,6 +49,9 @@ export class InstancesModel extends HoistModel {
     @bindable @persist instancesStoreFilter;
     @bindable @persist propertiesStoreFilter;
 
+    /** Keys of favorited instances (`{className}:{xhName}`) - requires an `xhName` to pin. */
+    @bindable.ref @persist favorites: string[] = [];
+
     @bindable @persist instQuickFilters = ['showInGroups'];
     get showInGroups() {
         return this.instQuickFilters?.includes('showInGroups');
@@ -55,6 +59,9 @@ export class InstancesModel extends HoistModel {
     get showXhImpl() {
         return this.instQuickFilters?.includes('showXhImpl');
     }
+    get favoritesOnly() {
+        return this.instQuickFilters?.includes('favoritesOnly');
+    }
 
     @bindable @persist propQuickFilters = [];
     get showUnderscoreProps() {
@@ -68,7 +75,9 @@ export class InstancesModel extends HoistModel {
     }
 
     get selectedInstances(): HoistBase[] {
-        return this.instancesGridModel.selectedIds.map((it: string) => this.getInstance(it));
+        return compact(
+            this.instancesGridModel.selectedIds.map((it: string) => this.getInstance(it))
+        );
     }
 
     constructor() {
@@ -160,6 +169,13 @@ export class InstancesModel extends HoistModel {
         }
     }
 
+    toggleFavorite(record: StoreRecord) {
+        const key = favoriteKey(record?.data);
+        if (!key) return;
+        const {favorites} = this;
+        this.favorites = favorites.includes(key) ? without(favorites, key) : [...favorites, key];
+    }
+
     togglePropsWatchlistItem(record: StoreRecord) {
         const {instanceXhId, property, isGetter} = record.data,
             {propsWatchlist} = this,
@@ -195,6 +211,9 @@ export class InstancesModel extends HoistModel {
             store: {
                 fields: [
                     {name: 'className', type: 'string'},
+                    {name: 'xhName', type: 'string'},
+                    {name: 'isFavorite', type: 'bool'},
+                    {name: 'alive', type: 'bool'},
                     {name: 'displayGroup', type: 'string'},
                     {name: 'created', type: 'date'},
                     {name: 'syncRun', type: 'number'},
@@ -218,12 +237,29 @@ export class InstancesModel extends HoistModel {
             columns: [
                 {
                     ...actionCol,
-                    width: calcActionColWidth(2),
+                    width: calcActionColWidth(3),
                     actions: [
                         {
                             icon: Icon.terminal(),
                             tooltip: 'Log to console',
-                            actionFn: ({record}) => this.logInstanceToConsole(record)
+                            actionFn: ({record}) => this.logInstanceToConsole(record),
+                            displayFn: ({record}) => ({hidden: !record.data.alive})
+                        },
+                        {
+                            icon: Icon.favorite(),
+                            actionFn: ({record}) => this.toggleFavorite(record),
+                            displayFn: ({record}) => {
+                                const {xhName, isFavorite} = record.data;
+                                return {
+                                    disabled: !xhName,
+                                    tooltip: xhName
+                                        ? 'Toggle Favorite'
+                                        : 'Set xhName to enable favorites',
+                                    icon: isFavorite
+                                        ? Icon.favorite({intent: 'warning', prefix: 'fas'})
+                                        : Icon.favorite({className: 'xh-text-color-muted'})
+                                };
+                            }
                         },
                         {
                             icon: Icon.refresh({intent: 'success'}),
@@ -234,7 +270,11 @@ export class InstancesModel extends HoistModel {
                         }
                     ]
                 },
-                {field: 'id', displayName: 'xhId'},
+                {
+                    field: 'id',
+                    displayName: 'xhId',
+                    renderer: (v, {record}) => (record.data.alive ? v : null)
+                },
                 {
                     field: 'syncRun',
                     displayName: 'Sync',
@@ -252,6 +292,8 @@ export class InstancesModel extends HoistModel {
                     renderer: v => (v ? Icon.link() : null)
                 },
                 {field: 'displayGroup', hidden: true},
+                {field: 'isFavorite', ...boolCheckCol, hidden: true},
+                {field: 'xhName', flex: 1, minWidth: 150},
                 {field: 'className', flex: 1, minWidth: 150},
                 {
                     field: 'lastLoadCompleted',
@@ -263,10 +305,8 @@ export class InstancesModel extends HoistModel {
                 },
                 {field: 'created', align: 'right', renderer: timestampRenderer}
             ],
-            rowClassFn: rec => {
-                return rec?.data.isXhImpl ? 'xh-impl-row' : null;
-            },
-            onRowDoubleClicked: ({data: rec}) => this.logInstanceToConsole(rec),
+            rowClassFn: rec => (rec?.data.isXhImpl || !rec?.data.alive ? 'xh-impl-row' : null),
+            onRowDoubleClicked: ({data: rec}) => rec?.data.alive && this.logInstanceToConsole(rec),
             xhImpl: true
         });
     }
@@ -387,11 +427,15 @@ export class InstancesModel extends HoistModel {
     private autoLoadInstancesGrid() {
         this.addAutorun({
             run: () => {
-                const {showXhImpl, instancesGridModel, selectedSyncRun} = this,
+                const {showXhImpl, favoritesOnly, favorites, instancesGridModel, selectedSyncRun} =
+                        this,
                     data = [];
 
                 XH.inspectorService.activeInstances.forEach(inst => {
-                    if (!showXhImpl && inst.isXhImpl) return;
+                    const isFavorite = favorites.includes(favoriteKey(inst));
+
+                    // A star is an explicit opt-in, so favorites show regardless of the xhImpl filter.
+                    if (favoritesOnly ? !isFavorite : !showXhImpl && inst.isXhImpl) return;
                     if (selectedSyncRun && inst.syncRun !== selectedSyncRun) return;
 
                     const displayGroup = inst.isHoistService
@@ -403,9 +447,29 @@ export class InstancesModel extends HoistModel {
                             : inst.isView
                               ? 'Views'
                               : 'Models';
-                    data.push({...inst, displayGroup});
+                    data.push({...inst, displayGroup, isFavorite, alive: true});
                 });
 
+                // Favorites with no live instance - shown so they can be seen and un-starred.
+                if (favoritesOnly && !selectedSyncRun) {
+                    const aliveKeys = new Set(data.map(favoriteKey));
+                    favorites
+                        .filter(key => !aliveKeys.has(key))
+                        .forEach(key => {
+                            const sep = key.indexOf(':'),
+                                className = key.slice(0, sep),
+                                xhName = key.slice(sep + 1);
+                            data.push({
+                                id: key,
+                                className,
+                                xhName,
+                                displayGroup: 'Not Alive',
+                                isFavorite: true,
+                                alive: false
+                            });
+                        });
+                }
+
                 instancesGridModel.loadData(data);
             }
         });
@@ -482,8 +546,7 @@ export class InstancesModel extends HoistModel {
             return null;
 
         const {xhId} = instance,
-            ctorName = instance.constructor.name,
-            instanceDisplayName = `${ctorName} [${xhId}]`,
+            instanceDisplayName = instanceLabel(instance),
             isLoadedGetter = isGetter && this.shouldLoadGetter(xhId, property),
             v = !isGetter || isLoadedGetter ? instance[property] : null,
             // Detect FormModel.values Proxy object - throws otherwise on attempt to render in grid.
@@ -554,7 +617,11 @@ export class InstancesModel extends HoistModel {
     }
 }
 
-const GROUP_SORT_ORDER = ['Models', 'Services', 'Cubes', 'Views', 'Stores'];
+const GROUP_SORT_ORDER = ['Models', 'Services', 'Cubes', 'Views', 'Stores', 'Not Alive'];
+
+/** Persistent identity for Favorites - null when the instance has no `xhName` to pin by. */
+const favoriteKey = (inst: {className?: string; xhName?: string}): string =>
+    inst?.xhName ? `${inst.className}:${inst.xhName}` : null;
 
 const timestampRenderer = v => fmtDate(v, {fmt: 'HH:mm:ss.SSS'});
 

package/inspector/instances/InstancesPanel.ts

@@ -132,6 +132,12 @@ const instanceGridBar = hoistCmp.factory<InstancesModel>(({model}) => {
                         value: 'showXhImpl',
                         tooltip:
                             'Show instances created as part of internal Hoist model/component implementations'
+                    }),
+                    button({
+                        text: 'Favorites',
+                        value: 'favoritesOnly',
+                        tooltip:
+                            'Show only favorited instances, including any not currently alive. Star any instance with an xhName to favorite it - favorites persist across reloads.'
                     })
                 ]
             }),

package/kit/react-day-picker/index.ts

@@ -6,11 +6,11 @@
  */
 import {elementFactory} from '@xh/hoist/core';
 import {ComponentType} from 'react';
-import {DayPicker} from 'react-day-picker';
-import 'react-day-picker/style.css';
+import {DayPicker} from '@daypicker/react';
+import '@daypicker/react/style.css';
 
 export {DayPicker};
-export type {DayPickerProps, Matcher} from 'react-day-picker';
+export type {DayPickerProps, Matcher} from '@daypicker/react';
 
 // DayPicker's props are a discriminated union over its selection modes. Cast to ComponentType to
 // keep our element factory ergonomic and produce portable type declarations.

package/mobile/appcontainer/LoginPanel.ts

@@ -52,6 +52,7 @@ export const loginPanel = hoistCmp.factory({
                                         bind: 'username',
                                         leftIcon: Icon.user(),
                                         autoComplete: 'username',
+                                        enablePasswordManagers: true,
                                         autoCapitalize: 'none',
                                         commitOnChange: true,
                                         testId: 'xh-login-username'
@@ -64,6 +65,7 @@ export const loginPanel = hoistCmp.factory({
                                         leftIcon: Icon.lock(),
                                         type: 'password',
                                         autoComplete: 'current-password',
+                                        enablePasswordManagers: true,
                                         commitOnChange: true,
                                         testId: 'xh-login-password'
                                     })

package/mobile/cmp/button/Button.ts

@@ -6,6 +6,7 @@
  */
 import {hspacer} from '@xh/hoist/cmp/layout';
 import {
+    DomAttrsProps,
     LayoutProps,
     StyleProps,
     hoistCmp,
@@ -23,7 +24,7 @@ import {ReactNode, ReactElement, MouseEvent} from 'react';
 import './Button.scss';
 
 export interface ButtonProps<M extends HoistModel = HoistModel>
-    extends HoistProps<M>, TestSupportProps, LayoutProps, StyleProps {
+    extends HoistProps<M>, TestSupportProps, DomAttrsProps, LayoutProps, StyleProps {
     active?: boolean;
     disabled?: boolean;
     icon?: ReactElement;
@@ -51,8 +52,19 @@ export const [Button, button] = hoistCmp.withFactory<ButtonProps>({
             classes = [],
             items = [];
 
-        const {active, className, disabled, icon, intent, onClick, style, testId, text, ...rest} =
-            nonLayoutProps;
+        const {
+            active,
+            className,
+            disabled,
+            domAttrs,
+            icon,
+            intent,
+            onClick,
+            style,
+            testId,
+            text,
+            ...rest
+        } = nonLayoutProps;
 
         let {outlined, minimal} = nonLayoutProps;
         if (disabled) {
@@ -91,6 +103,7 @@ export const [Button, button] = hoistCmp.withFactory<ButtonProps>({
                 ...layoutProps
             },
             [TEST_ID]: testId,
+            ...domAttrs,
             ...rest
         });
     }

package/mobile/cmp/form/FormField.ts

@@ -160,6 +160,7 @@ export const [FormField, formField] = hoistCmp.withFactory<FormFieldProps>({
         return box({
             ref,
             testId,
+            domAttrs: props.domAttrs,
             className: classNames(className, classes),
             ...layoutProps,
             items: [

package/mobile/cmp/input/Checkbox.ts

@@ -46,6 +46,7 @@ const cmp = hoistCmp.factory<CheckboxInputModel>(({model, className, ...props},
 
         style: props.style,
         [TEST_ID]: props.testId,
+        ...props.domAttrs,
 
         onBlur: model.onBlur,
         onFocus: model.onFocus,

package/mobile/cmp/input/DateInput.ts

@@ -163,6 +163,7 @@ const cmp = hoistCmp.factory<DateInputModel>(({model, className, ...props}, ref)
                 style: {textAlign},
                 tabIndex: props.tabIndex,
                 [TEST_ID]: props.testId,
+                ...props.domAttrs,
                 item: model.formattedRenderValue,
                 onClick: () => model.openPicker()
             }),

package/mobile/cmp/input/Label.ts

@@ -8,6 +8,7 @@ import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cm
 import {div} from '@xh/hoist/cmp/layout';
 import {hoistCmp, HoistProps, StyleProps} from '@xh/hoist/core';
 import '@xh/hoist/mobile/register';
+import {TEST_ID} from '@xh/hoist/utils/js';
 import './Label.scss';
 
 export interface LabelProps extends HoistProps, HoistInputProps, StyleProps {}
@@ -30,11 +31,15 @@ class LabelInputModel extends HoistInputModel {
 //-----------------------
 // Implementation
 //-----------------------
-const cmp = hoistCmp.factory(({model, className, style, width, children}, ref) => {
-    return div({
-        className,
-        style: {...style, whiteSpace: 'nowrap', width},
-        items: children,
-        ref
-    });
-});
+const cmp = hoistCmp.factory(
+    ({model, className, style, width, children, testId, domAttrs}, ref) => {
+        return div({
+            className,
+            [TEST_ID]: testId,
+            ...domAttrs,
+            style: {...style, whiteSpace: 'nowrap', width},
+            items: children,
+            ref
+        });
+    }
+);

package/mobile/cmp/input/NumberInput.ts

@@ -4,7 +4,13 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
+import {
+    getPasswordManagerAttrs,
+    HoistInputModel,
+    HoistInputProps,
+    PasswordManagerSupportProps,
+    useHoistInputModel
+} from '@xh/hoist/cmp/input';
 import {hoistCmp, HoistProps, LayoutProps, StyleProps} from '@xh/hoist/core';
 import {fmtNumber, NumericPrecision, Precision, ZeroPad} from '@xh/hoist/format';
 import {input} from '@xh/hoist/kit/onsen';
@@ -16,7 +22,8 @@ import type {Property} from 'csstype';
 import {debounce, isNaN, isNil, isNumber, round} from 'lodash';
 import './NumberInput.scss';
 
-export interface NumberInputProps extends HoistProps, HoistInputProps, StyleProps, LayoutProps {
+export interface NumberInputProps
+    extends HoistProps, HoistInputProps, PasswordManagerSupportProps, StyleProps, LayoutProps {
     value?: number;
 
     /** True to commit on every change/keystroke, default false. */
@@ -257,6 +264,8 @@ const cmp = hoistCmp.factory<NumberInputModel>(
             },
             spellCheck: false,
             [TEST_ID]: props.testId,
+            ...getPasswordManagerAttrs(props.enablePasswordManagers),
+            ...props.domAttrs,
 
             onInput: model.onValueChange,
             onKeyDown: model.onKeyDown,

package/mobile/cmp/input/SearchInput.ts

@@ -94,6 +94,7 @@ const cmp = hoistCmp.factory<SearchInputModel>(({model, className, ...props}, re
             textAlign: withDefault(props.textAlign, 'left')
         },
         [TEST_ID]: props.testId,
+        ...props.domAttrs,
 
         onInput: model.onChange,
         onKeyDown: model.onKeyDown,

package/mobile/cmp/input/SegmentedControl.scss

@@ -86,21 +86,51 @@
       flex-basis: 0;
     }
 
-    // Outlined mode - border around the tray with no inner background fill.
+    // Outlined mode (default) - a border around the tray. Independent of the tray fill, which is
+    // governed by --no-tray-bg below.
     &.xh-segmented-control--outlined {
-      background-color: transparent;
       border: 1px solid var(--xh-border-color);
+    }
+
+    // Tray background suppressed - a lighter presentation, with no fill behind the options.
+    &.xh-segmented-control--no-tray-bg {
+      background-color: transparent;
 
-      // Reserve border space on every option so selecting one does not shift the row. The
-      // transparent tray offers no recessed backdrop to set a filled tile against, so indicate
-      // selection with a ring instead - currentColor keeps it in step with the option's
-      // text / intent color.
+      // Reserve border space on every option so selecting one does not shift the row. With no
+      // tray there is no recessed backdrop to set a filled tile against, so indicate selection
+      // with a ring instead - currentColor keeps it in step with the option's text / intent color.
       .xh-button.xh-segmented-control-option {
         border: 1px solid transparent;
       }
 
       .xh-button.xh-segmented-control-option--selected {
         border-color: currentColor;
+        background-color: transparent;
+      }
+    }
+
+    // Option dividers - internal structure for a tray whose options are otherwise undifferentiated,
+    // most notably in the empty state where no selected option breaks up the row. Drawn in the gap
+    // to the left of each option after the first, and suppressed on either side of the selected
+    // option so they never crowd it.
+    &.xh-segmented-control--dividers {
+      .xh-button.xh-segmented-control-option {
+        position: relative;
+      }
+
+      .xh-segmented-control-option + .xh-segmented-control-option::before {
+        content: '';
+        position: absolute;
+        left: calc(var(--xh-segmented-control-pad-px) / -2);
+        top: 20%;
+        bottom: 20%;
+        width: 1px;
+        background-color: var(--xh-border-color);
+      }
+
+      .xh-segmented-control-option--selected::before,
+      .xh-segmented-control-option--selected + .xh-segmented-control-option::before {
+        display: none;
       }
     }
 

package/mobile/cmp/input/SegmentedControl.ts

@@ -17,7 +17,6 @@ import {hoistCmp, HoistProps, Intent} from '@xh/hoist/core';
 import {button} from '@xh/hoist/mobile/cmp/button';
 import '@xh/hoist/mobile/register';
 import {computed, makeObservable} from '@xh/hoist/mobx';
-import {TEST_ID} from '@xh/hoist/utils/js';
 import {getLayoutProps, getNonLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
 import {filter, isObject} from 'lodash';
@@ -34,8 +33,8 @@ export interface SegmentedControlProps extends HoistProps, HoistInputProps {
     equalSegmentWidths?: boolean;
 
     /**
-     * True (default) to stretch the control to fill available width,
-     * distributing space equally among options.
+     * True (default) to stretch the control to fill available width. Set false to size the control
+     * to its options. See `equalSegmentWidths` for how the filled width is divided up.
      */
     fill?: boolean;
 
@@ -54,10 +53,26 @@ export interface SegmentedControlProps extends HoistProps, HoistInputProps {
     options: Array<SegmentedControlOption | SegmentedControlNullOption | OptionPrimitive>;
 
     /**
-     * True to render with an outlined style - a border around the control tray
-     * with no inner background fill. Border color follows the current intent.
+     * True (default) to render a border around the control tray. Border color follows the current
+     * intent. Note this controls the tray border only - it does not remove the tray background,
+     * which is governed independently by `showTrayBackground`.
      */
     outlined?: boolean;
+
+    /**
+     * True (default) to fill the control tray with a background, setting it off from the surface
+     * behind it. Set false to omit that fill for a lighter presentation. With no tray to set a
+     * filled tile against, the selected option is indicated with a ring instead.
+     */
+    showTrayBackground?: boolean;
+
+    /**
+     * True to render dividers between options, adding internal structure to the tray. Dividers
+     * are suppressed on either side of the selected option so they do not compete with it.
+     * Defaults to 'auto', showing dividers only while no option is selected - the state in which
+     * the tray offers no other cue that its options are separate and selectable.
+     */
+    showOptionDividers?: boolean | 'auto';
 }
 
 /**
@@ -114,11 +129,14 @@ class SegmentedControlModel extends HoistInputModel {
         });
     }
 
-    /** Map the current render value to the string key used to identify the selected option. */
+    /**
+     * Key of the option matching the current render value, or null if no option matches -
+     * including whenever the bound value is itself null.
+     */
     @computed
-    get selectedKey(): string {
+    get selectedKey(): string | null {
         const {renderValue, normalizedOptions} = this;
-        return normalizedOptions.find(o => o.value === renderValue)?._key;
+        return normalizedOptions.find(o => o.value === renderValue)?._key ?? null;
     }
 
     get enabledButtons(): HTMLButtonElement[] {
@@ -160,13 +178,18 @@ const cmp = hoistCmp.factory<SegmentedControlModel>(({model, className, ...props
         equalSegmentWidths = true,
         fill = true,
         intent,
-        outlined,
+        outlined = true,
+        showTrayBackground = true,
+        showOptionDividers = 'auto',
         testId,
+        domAttrs,
         ...rest
     } = getNonLayoutProps(props);
 
     const {selectedKey} = model,
-        defaultIntent = intent && intent !== 'none' ? intent : null;
+        defaultIntent = intent && intent !== 'none' ? intent : null,
+        // 'auto' dividers track the empty state - shown only while nothing is selected.
+        dividers = showOptionDividers === 'auto' ? selectedKey == null : showOptionDividers;
 
     const buttons = model.normalizedOptions.map(opt => {
         const optIntent = opt.intent ?? defaultIntent,
@@ -200,6 +223,8 @@ const cmp = hoistCmp.factory<SegmentedControlModel>(({model, className, ...props
             className,
             defaultIntent && `xh-segmented-control--${defaultIntent}`,
             outlined && 'xh-segmented-control--outlined',
+            !showTrayBackground && 'xh-segmented-control--no-tray-bg',
+            dividers && 'xh-segmented-control--dividers',
             fill && 'xh-segmented-control--fill',
             fill && equalSegmentWidths && 'xh-segmented-control--equal-widths'
         ),
@@ -207,7 +232,8 @@ const cmp = hoistCmp.factory<SegmentedControlModel>(({model, className, ...props
         onFocus: model.onFocus,
         onBlur: model.onBlur,
         ...getLayoutProps(props),
-        [TEST_ID]: testId,
+        testId,
+        domAttrs,
         items: buttons,
         ...rest
     });

package/mobile/cmp/input/Select.ts

@@ -696,6 +696,7 @@ const cmp = hoistCmp.factory<SelectInputModel>(({model, className, ...props}, re
                     item: factory(rsProps),
                     className,
                     testId: props.testId,
+                    domAttrs: props.domAttrs,
                     ref
                 })
             }),
@@ -708,6 +709,7 @@ const cmp = hoistCmp.factory<SelectInputModel>(({model, className, ...props}, re
             ...layoutProps,
             width: withDefault(width, null),
             testId: props.testId,
+            domAttrs: props.domAttrs,
             ref
         });
     }

package/mobile/cmp/input/SwitchInput.ts

@@ -47,6 +47,7 @@ const cmp = hoistCmp.factory<SwitchInputModel>(({model, className, ...props}, re
         className,
         style: props.style,
         [TEST_ID]: props.testId,
+        ...props.domAttrs,
 
         onBlur: model.onBlur,
         onFocus: model.onFocus,

package/mobile/cmp/input/TextArea.ts

@@ -4,7 +4,13 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
+import {
+    getPasswordManagerAttrs,
+    HoistInputModel,
+    HoistInputProps,
+    PasswordManagerSupportProps,
+    useHoistInputModel
+} from '@xh/hoist/cmp/input';
 import {div, textarea as textareaTag} from '@xh/hoist/cmp/layout';
 import {hoistCmp, HoistProps, LayoutProps, StyleProps} from '@xh/hoist/core';
 import '@xh/hoist/mobile/register';
@@ -12,7 +18,8 @@ import {TEST_ID, withDefault} from '@xh/hoist/utils/js';
 import {getLayoutProps} from '@xh/hoist/utils/react';
 import './TextArea.scss';
 
-export interface TextAreaProps extends HoistProps, HoistInputProps, StyleProps, LayoutProps {
+export interface TextAreaProps
+    extends HoistProps, HoistInputProps, PasswordManagerSupportProps, StyleProps, LayoutProps {
     value?: string;
 
     /** True to commit on every change/keystroke, default false. */
@@ -85,6 +92,8 @@ const cmp = hoistCmp.factory<TextAreaInputModel>(({model, className, ...props},
             spellCheck: withDefault(props.spellCheck, false),
             tabIndex: props.tabIndex,
             [TEST_ID]: props.testId,
+            ...getPasswordManagerAttrs(props.enablePasswordManagers),
+            ...props.domAttrs,
 
             onChange: model.onChange,
             onKeyDown: model.onKeyDown,

package/mobile/cmp/input/TextInput.ts

@@ -4,7 +4,13 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
+import {
+    getPasswordManagerAttrs,
+    HoistInputModel,
+    HoistInputProps,
+    PasswordManagerSupportProps,
+    useHoistInputModel
+} from '@xh/hoist/cmp/input';
 import {box, hbox} from '@xh/hoist/cmp/layout';
 import {hoistCmp, HoistProps, LayoutProps, StyleProps} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
@@ -18,7 +24,8 @@ import {isEmpty} from 'lodash';
 import {ReactElement} from 'react';
 import './TextInput.scss';
 
-export interface TextInputProps extends HoistProps, HoistInputProps, StyleProps, LayoutProps {
+export interface TextInputProps
+    extends HoistProps, HoistInputProps, PasswordManagerSupportProps, StyleProps, LayoutProps {
     value?: string;
 
     /**
@@ -145,6 +152,8 @@ const cmp = hoistCmp.factory<TextInputModel>(({model, className, ...props}, ref)
                 className: 'xh-text-input__input',
                 style: {textAlign: withDefault(props.textAlign, 'left')},
                 [TEST_ID]: props.testId,
+                ...getPasswordManagerAttrs(props.enablePasswordManagers),
+                ...props.domAttrs,
 
                 onInput: model.onChange,
                 onKeyDown: model.onKeyDown,