@xh/hoist 87.1.1 → 87.3.0

package/desktop/cmp/input/IntentInput.ts

@@ -0,0 +1,213 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2026 Extremely Heavy Industries Inc.
+ */
+import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
+import {div} from '@xh/hoist/cmp/layout';
+import {elementFactory, hoistCmp, HoistProps, Intent} from '@xh/hoist/core';
+import '@xh/hoist/desktop/register';
+import {Icon} from '@xh/hoist/icon';
+import {computed, makeObservable} from '@xh/hoist/mobx';
+import {getTestId, TEST_ID} from '@xh/hoist/utils/js';
+import {getLayoutProps, getNonLayoutProps} from '@xh/hoist/utils/react';
+import classNames from 'classnames';
+import {capitalize, filter, isEmpty} from 'lodash';
+import {KeyboardEvent} from 'react';
+import './IntentInput.scss';
+
+export const INTENTS: Intent[] = ['primary', 'success', 'warning', 'danger'];
+
+export interface IntentInputProps extends HoistProps, HoistInputProps {
+    /** True to render in a compact mode with reduced sizing for space-constrained contexts. */
+    compact?: boolean;
+
+    /**
+     * True to offer a null value, rendered as an additional outlined swatch ahead of the intents
+     * and holding the check while the value is null. Defaults to false, leaving the control a
+     * required single-select.
+     */
+    enableClear?: boolean;
+
+    /**
+     * Intents to offer, in render order. Defaults to all four Hoist intents - specify a subset
+     * to restrict or reorder the available choices.
+     */
+    intents?: Intent[];
+
+    /**
+     * True to render each intent's name alongside its swatch. Defaults to false, for the most
+     * compact presentation - note swatches always carry their intent name as a tooltip and as
+     * their accessible label, so an unlabelled control remains identifiable.
+     */
+    showNames?: boolean;
+}
+
+/**
+ * An input for selecting a Hoist Intent, rendered as a compact row of color swatches drawn in
+ * the intent colors themselves. The selected swatch is marked with a check and a surrounding
+ * ring; names can optionally be rendered alongside each swatch.
+ *
+ * Set `enableClear` to offer a null value, rendered as an additional outlined swatch ahead of
+ * the intents.
+ *
+ * Designed to fit within a toolbar or a dense form without additional chrome. Swatches are
+ * rendered as an ARIA radiogroup, supporting selection via click, enter/space, and arrow keys.
+ */
+export const [IntentInput, intentInput] = hoistCmp.withFactory<IntentInputProps>({
+    displayName: 'IntentInput',
+    className: 'xh-intent-input',
+    render(props, ref) {
+        return useHoistInputModel(cmp, props, ref, IntentInputModel);
+    }
+});
+(IntentInput as any).hasLayoutSupport = true;
+
+//-----------------------
+// Implementation
+//-----------------------
+const buttonEl = elementFactory('button');
+
+class IntentInputModel extends HoistInputModel {
+    override xhImpl = true;
+
+    @computed
+    get intents(): Intent[] {
+        const {intents} = this.componentProps;
+        return isEmpty(intents) ? INTENTS : intents;
+    }
+
+    /**
+     * Selectable values in render order - the offered intents, preceded by a null entry when
+     * `enableClear` is set. Null is a value here like any other, so it selects, renders a check,
+     * and takes part in keyboard nav without any special-casing.
+     */
+    @computed
+    get options(): Intent[] {
+        const {intents} = this;
+        return this.componentProps.enableClear ? [null, ...intents] : intents;
+    }
+
+    get enabledButtons(): HTMLButtonElement[] {
+        const btns = this.domEl?.querySelectorAll('button') ?? [];
+        return filter(btns, (b: HTMLButtonElement) => !b.disabled) as HTMLButtonElement[];
+    }
+
+    constructor() {
+        super();
+        makeObservable(this);
+    }
+
+    onSwatchClick = (intent: Intent) => {
+        this.noteValueChange(intent);
+    };
+
+    /**
+     * Arrow keys move the selection to the adjacent option, as expected of a radiogroup. Wraps
+     * around at either end, and starts from the first option when the current value is not among
+     * those offered.
+     */
+    onKeyDown = (e: KeyboardEvent) => {
+        const delta = e.key === 'ArrowRight' ? 1 : e.key === 'ArrowLeft' ? -1 : null;
+        if (delta == null) return;
+
+        const {options, renderValue} = this,
+            currIdx = options.indexOf(renderValue);
+
+        e.preventDefault();
+
+        const nextIdx = currIdx === -1 ? 0 : (currIdx + delta + options.length) % options.length;
+        this.noteValueChange(options[nextIdx]);
+        this.enabledButtons[nextIdx]?.focus();
+    };
+
+    override blur() {
+        this.enabledButtons.forEach(it => it.blur());
+    }
+
+    override focus() {
+        this.enabledButtons[0]?.focus();
+    }
+}
+
+const cmp = hoistCmp.factory<IntentInputModel>(({model, className, ...props}, ref) => {
+    const {
+        // HoistInput props - exclude from passthrough to the container
+        bind,
+        disabled,
+        onChange,
+        onCommit,
+        tabIndex,
+        value,
+        commitOnChange,
+        // Consumed by model
+        enableClear,
+        intents,
+        // Consumed by this component
+        compact,
+        showNames,
+        testId,
+        domAttrs,
+        // Remainder passed to the container div
+        ...rest
+    } = getNonLayoutProps(props);
+
+    const {renderValue} = model;
+
+    return div({
+        ...rest,
+        className: classNames(
+            className,
+            compact && 'xh-intent-input--compact',
+            showNames && 'xh-intent-input--with-names'
+        ),
+        ref,
+        role: 'radiogroup',
+        onFocus: model.onFocus,
+        onBlur: model.onBlur,
+        onKeyDown: disabled ? null : model.onKeyDown,
+        ...getLayoutProps(props),
+        [TEST_ID]: testId,
+        ...domAttrs,
+        items: model.options.map(intent => {
+            const isSelected = renderValue === intent,
+                isNull = intent == null,
+                name = isNull ? 'None' : capitalize(intent);
+
+            return buttonEl({
+                key: intent ?? 'none',
+                type: 'button',
+                className: classNames(
+                    'xh-intent-input__swatch',
+                    `xh-intent-input__swatch--${intent ?? 'none'}`,
+                    isSelected && 'xh-intent-input__swatch--selected'
+                ),
+                role: 'radio',
+                'aria-checked': isSelected,
+                'aria-label': name,
+                title: name,
+                disabled,
+                tabIndex,
+                onClick: () => model.onSwatchClick(intent),
+                [TEST_ID]: getTestId(testId, intent ?? 'none'),
+                items: [
+                    div({
+                        className: 'xh-intent-input__swatch__fill',
+                        // Check is always rendered, and hidden via `visibility` when unselected.
+                        // Omitting it instead would change the swatch's baseline, which shifts
+                        // baseline-aligned siblings (e.g. an inline FormField label) on every
+                        // selection change - see the note in IntentInput.scss.
+                        item: Icon.check({
+                            className: classNames(
+                                'xh-intent-input__swatch__check',
+                                !isSelected && 'xh-intent-input__swatch__check--hidden'
+                            )
+                        })
+                    }),
+                    div({omit: !showNames, className: 'xh-intent-input__swatch__name', item: name})
+                ]
+            });
+        })
+    });
+});

package/desktop/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 '@xh/hoist/desktop/register';
 import {fmtNumber, NumericPrecision, parseNumber, Precision, ZeroPad} from '@xh/hoist/format';
@@ -16,7 +22,8 @@ import type {Property} from 'csstype';
 import {debounce, isNaN, isNil, isNumber, round} from 'lodash';
 import {KeyboardEventHandler, ReactElement, ReactNode, Ref, useLayoutEffect} from 'react';
 
-export interface NumberInputProps extends HoistProps, LayoutProps, StyleProps, HoistInputProps {
+export interface NumberInputProps
+    extends HoistProps, LayoutProps, StyleProps, HoistInputProps, PasswordManagerSupportProps {
     value?: number;
 
     /** True to focus the control on render. */
@@ -278,6 +285,8 @@ const cmp = hoistCmp.factory<NumberInputModel>(({model, className, ...props}, re
             textAlign: withDefault(props.textAlign, 'right')
         },
         [TEST_ID]: props.testId,
+        ...getPasswordManagerAttrs(props.enablePasswordManagers),
+        ...props.domAttrs,
         onBlur: model.onBlur,
         onFocus: model.onFocus,
         onKeyDown: model.onKeyDown,

package/desktop/cmp/input/Picker.ts

@@ -478,6 +478,7 @@ const triggerButton = hoistCmp.factory<PickerModel>(({model, props, nothingSelec
         width: withDefault(width, 160),
         style: props.style,
         [TEST_ID]: getTestId(props, 'trigger'),
+        ...props.domAttrs,
         onClick: () => {
             if (model.popoverIsOpen) {
                 model.closePopover();

package/desktop/cmp/input/RadioInput.ts

@@ -113,6 +113,7 @@ const cmp = hoistCmp.factory<RadioInputModel>(({model, className, ...props}, ref
         inline: props.inline,
         selectedValue: model.renderValue,
         onChange: model.onChange,
-        [TEST_ID]: props.testId
+        [TEST_ID]: props.testId,
+        ...props.domAttrs
     });
 });

package/desktop/cmp/input/SegmentedControl.scss

@@ -59,20 +59,71 @@
     }
   }
 
-  // Outlined mode - border around control tray with no inner background.
+  // Outlined mode (default) - a border around the control tray. Independent of the tray fill,
+  // which is governed by --no-tray-bg below.
   &--outlined .bp6-segmented-control {
-    background-color: transparent;
     border: 1px solid var(--xh-border-color);
   }
 
+  // Not filling - shrink the tray to its options. The tray is a block-level flex container, so it
+  // spans its parent regardless; BP's fill class governs only whether the options themselves grow.
+  // Without this, an unfilled control leaves an empty run of tray to the right of its options.
+  &:not(#{&}--fill) .bp6-segmented-control {
+    width: fit-content;
+  }
+
+  // Equal segment widths - zeroing the flex basis makes each option take an identical share of the
+  // tray. BP's flex-grow alone divides only the leftover space, leaving options at differing widths.
+  // The min-width keeps that equal share from shrinking an option below its own label. A zero
+  // basis otherwise lets each option fall to BP's fixed 30px floor, which is unrelated to its
+  // content: the horizontal padding is eaten first, then a single-word label spills past the
+  // border, since it can neither wrap nor ellipsize. Options only stop sharing equally once there
+  // is genuinely not enough room, and then only the ones that need the space keep it.
+  &--fill#{&}--equal-widths .bp6-segmented-control > .bp6-button {
+    flex-basis: 0;
+    min-width: min-content;
+  }
+
+  // Tray background suppressed - a lighter presentation, with no fill behind the options.
+  &--no-tray-bg .bp6-segmented-control {
+    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.
+  &--dividers .bp6-segmented-control {
+    > .bp6-button {
+      position: relative;
+    }
+
+    > .bp6-button + .bp6-button::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);
+    }
+
+    > .bp6-button:not(.bp6-minimal)::before,
+    > .bp6-button:not(.bp6-minimal) + .bp6-button::before {
+      display: none;
+    }
+  }
+
   @each $intent in (primary, success, warning, danger) {
     &--outlined#{&}--#{$intent} .bp6-segmented-control {
       border-color: var(--xh-intent-#{$intent});
     }
   }
 
-  // Compact mode - reduced sizing for toolbars and space-constrained contexts.
-  &--compact .bp6-segmented-control {
+  // Compact mode - via the `compact` prop, or implicitly within a compact Toolbar, whose
+  // item height the standard sizing above would overflow.
+  &--compact .bp6-segmented-control,
+  .xh-toolbar--compact & .bp6-segmented-control {
     padding: 0;
     gap: 0;
 
@@ -89,7 +140,8 @@
   }
 
   // Compact + outlined - shrink buttons to account for the border.
-  &--compact#{&}--outlined .bp6-segmented-control > .bp6-button {
+  &--compact#{&}--outlined .bp6-segmented-control > .bp6-button,
+  .xh-toolbar--compact &#{&}--outlined .bp6-segmented-control > .bp6-button {
     --compact-btn-h: calc(var(--xh-tbar-compact-item-height-px) - 2px);
     min-height: var(--compact-btn-h);
     max-height: var(--compact-btn-h);

package/desktop/cmp/input/SegmentedControl.ts

@@ -28,8 +28,17 @@ export interface SegmentedControlProps extends HoistProps, HoistInputProps {
     compact?: boolean;
 
     /**
-     * True (default) to stretch the control to fill available width,
-     * distributing space equally among options.
+     * True (default) to render all segments at an equal width when {@link fill} is enabled,
+     * dividing the available width into equal parts regardless of label length - the conventional
+     * segmented-control appearance. Set false to instead size each segment to its content and
+     * share only the leftover space, so a longer label yields a wider segment. No effect when
+     * `fill` is false.
+     */
+    equalSegmentWidths?: boolean;
+
+    /**
+     * 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;
 
@@ -48,10 +57,25 @@ 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.
+     */
+    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';
 }
 
 /**
@@ -77,6 +101,14 @@ export const [SegmentedControl, segmentedControl] = hoistCmp.withFactory<Segment
 //-----------------------
 // Implementation
 //-----------------------
+
+/**
+ * Key handed to the Blueprint control when no option is selected. Option keys are always
+ * `String(index)`, so this cannot collide with a real option - and unlike a nullish value, it
+ * keeps Blueprint from falling back to its own internal selection state. See usage note below.
+ */
+const NO_SELECTION_KEY = '__xh_no_selection__';
+
 interface NormalizedOption extends SegmentedControlOption {
     label: string;
     intent?: Intent;
@@ -109,11 +141,15 @@ class SegmentedControlModel extends HoistInputModel {
         });
     }
 
-    /** Map the current render value to the string key used by the Blueprint control. */
+    /**
+     * Key of the option matching the current render value, or null if no option matches -
+     * including whenever the bound value is itself null. Note this is the model's own view of
+     * the selection: the key actually handed to Blueprint is resolved at its point of use below.
+     */
     @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[] {
@@ -154,13 +190,21 @@ const cmp = hoistCmp.factory<SegmentedControlModel>(({model, className, ...props
         options,
         // Consumed by this component
         compact,
+        equalSegmentWidths = true,
+        fill = true,
         intent,
-        outlined,
+        outlined = true,
+        showTrayBackground = true,
+        showOptionDividers = 'auto',
         testId,
+        domAttrs,
         // Remainder passed to BP SegmentedControl
         ...bpProps
     } = getNonLayoutProps(props);
 
+    // 'auto' dividers track the empty state - shown only while nothing is selected.
+    const dividers = showOptionDividers === 'auto' ? model.selectedKey == null : showOptionDividers;
+
     // Resolve the effective intent per option (own intent wins over control-level default),
     // applied via a per-button className that our SCSS keys its solid/hint coloring off of.
     const defaultIntent = intent && intent !== 'none' ? intent : null,
@@ -181,20 +225,31 @@ const cmp = hoistCmp.factory<SegmentedControlModel>(({model, className, ...props
         className: classNames(
             className,
             compact && 'xh-segmented-control--compact',
+            fill && 'xh-segmented-control--fill',
+            fill && equalSegmentWidths && 'xh-segmented-control--equal-widths',
             defaultIntent && `xh-segmented-control--${defaultIntent}`,
-            outlined && 'xh-segmented-control--outlined'
+            outlined && 'xh-segmented-control--outlined',
+            !showTrayBackground && 'xh-segmented-control--no-tray-bg',
+            dividers && 'xh-segmented-control--dividers'
         ),
         ref,
         onFocus: model.onFocus,
         onBlur: model.onBlur,
         ...getLayoutProps(props),
         [TEST_ID]: props.testId,
+        ...domAttrs,
         item: bpSegmentedControl({
             ...bpProps,
-            fill: bpProps.fill ?? true,
+            fill,
             size: compact ? 'small' : undefined,
             options: bpOptions,
-            value: model.selectedKey,
+            // Blueprint resolves its selection as `value ?? internalState`, where the internal
+            // state is set on every click even when controlled. Passing a nullish value for a
+            // selection matching no option would fall back to the last-clicked segment,
+            // leaving it highlighted after the bound value is cleared. Pass a sentinel key
+            // instead, keeping the control fully controlled - Blueprint handles a value matching
+            // no option natively (see `isAnySelected`) and emits no warning.
+            value: model.selectedKey ?? NO_SELECTION_KEY,
             onValueChange: model.onValueChange,
             disabled
         })

package/desktop/cmp/input/Select.ts

@@ -27,7 +27,7 @@ import {
     reactWindowedSelect
 } from '@xh/hoist/kit/react-select';
 import {action, bindable, makeObservable, observable, override} from '@xh/hoist/mobx';
-import {debouncePromise, wait} from '@xh/hoist/promise';
+import {debouncePromise, wait, waitFor} from '@xh/hoist/promise';
 import {elemWithin, getTestId, mergeDeep, TEST_ID, throwIf, withDefault} from '@xh/hoist/utils/js';
 import {createObservableRef, getLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
@@ -820,13 +820,14 @@ const cmp = hoistCmp.factory<SelectInputModel>(({model, className, ...props}, re
         rsProps.inputValue = model.inputValue || '';
         rsProps.onInputChange = model.onInputChange;
         rsProps.controlShouldRenderValue = !model.hasFocus;
+    }
+
+    // Scroll selected option into view on open - react-select's own does not fire for portalled menus.
+    if (!model.multiMode && model.renderValue) {
         rsProps.onMenuOpen = () => {
-            wait().then(() => {
-                const selectedEl = document.getElementsByClassName(
-                    'xh-select__option--is-selected'
-                )[0];
-                selectedEl?.scrollIntoView({block: 'end'});
-            });
+            const getSel = () =>
+                document.getElementsByClassName('xh-select__option--is-selected')[0];
+            waitFor(() => !!getSel()).then(() => getSel().scrollIntoView({block: 'end'}));
         };
     }
 
@@ -874,6 +875,7 @@ const cmp = hoistCmp.factory<SelectInputModel>(({model, className, ...props}, re
             }
         },
         testId: props.testId,
+        domAttrs: props.domAttrs,
         ...layoutProps,
         width: withDefault(width, 200),
         height: height,

package/desktop/cmp/input/Slider.ts

@@ -114,6 +114,8 @@ const cmp = hoistCmp.factory<SliderInputModel>(({model, className, ...props}, re
         ...layoutProps,
         width: withDefault(width, 200),
         className,
+        testId: props.testId,
+        domAttrs: props.domAttrs,
 
         onBlur: model.onBlur,
         onFocus: model.onFocus,

package/desktop/cmp/input/SwitchInput.ts

@@ -63,6 +63,7 @@ const cmp = hoistCmp.factory<SwitchInputModel>(({model, className, ...props}, re
         className,
 
         [TEST_ID]: props.testId,
+        ...props.domAttrs,
         onBlur: model.onBlur,
         onFocus: model.onFocus,
         onChange: e => model.noteValueChange(e.target.checked),

package/desktop/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 {hoistCmp, HoistProps, LayoutProps, StyleProps} from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import {textArea as bpTextarea} from '@xh/hoist/kit/blueprint';
@@ -13,7 +19,8 @@ import {useComposedRefs, getLayoutProps} from '@xh/hoist/utils/react';
 import {Ref} from 'react';
 import './TextArea.scss';
 
-export interface TextAreaProps extends HoistProps, HoistInputProps, LayoutProps, StyleProps {
+export interface TextAreaProps
+    extends HoistProps, HoistInputProps, PasswordManagerSupportProps, LayoutProps, StyleProps {
     value?: string;
 
     /** True to focus the control on render. */
@@ -91,6 +98,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,
         id: props.id,
         className,
         style: {

package/desktop/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 {div} from '@xh/hoist/cmp/layout';
 import {hoistCmp, HoistProps, LayoutProps, StyleProps} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
@@ -17,7 +23,8 @@ import type {Property} from 'csstype';
 import {isEmpty} from 'lodash';
 import {FocusEvent, KeyboardEventHandler, ReactElement, ReactNode, Ref} from 'react';
 
-export interface TextInputProps extends HoistProps, HoistInputProps, LayoutProps, StyleProps {
+export interface TextInputProps
+    extends HoistProps, HoistInputProps, PasswordManagerSupportProps, LayoutProps, StyleProps {
     value?: string;
 
     /**
@@ -155,6 +162,8 @@ const cmp = hoistCmp.factory<TextInputProps & {model: TextInputModel}>(
                     textAlign: withDefault(props.textAlign, 'left')
                 },
                 [TEST_ID]: props.testId,
+                ...getPasswordManagerAttrs(props.enablePasswordManagers),
+                ...props.domAttrs,
                 onChange: model.onChange,
                 onKeyDown: model.onKeyDown
             }),

package/desktop/cmp/input/index.ts

@@ -3,6 +3,7 @@ export * from './Checkbox';
 export * from './CheckboxButton';
 export * from './CodeInput';
 export * from './DateInput';
+export * from './IntentInput';
 export * from './JsonInput';
 export * from './NumberInput';
 export * from './Picker';

package/desktop/cmp/leftrightchooser/LeftRightChooserModel.ts

@@ -49,6 +49,9 @@ export interface LeftRightChooserConfig {
 
     /** @internal */
     xhImpl?: boolean;
+
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 
 /** Data record object for a LeftRightChooser value item. */
@@ -146,11 +149,13 @@ export class LeftRightChooserModel extends HoistModel {
         rightGroupingExpanded = true,
         rightEmptyText = null,
         showCounts = true,
+        xhName = null,
         xhImpl = false
     }: LeftRightChooserConfig) {
         super();
         makeObservable(this);
         this.xhImpl = xhImpl;
+        this.xhName = xhName;
 
         this.onChange = onChange;
         this._ungroupedName = ungroupedName;