@xh/hoist 87.1.1 → 87.3.0

package/cmp/form/FormModel.ts

@@ -59,6 +59,9 @@ export interface FormConfig {
     disabled?: boolean;
     readonly?: boolean;
 
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
+
     /** @internal */
     xhImpl?: boolean;
 }
@@ -140,11 +143,13 @@ export class FormModel extends HoistModel {
         disabled = false,
         persistWith = null,
         readonly = false,
+        xhName = null,
         xhImpl = false
     }: FormConfig = {}) {
         super();
         makeObservable(this);
         this.xhImpl = xhImpl;
+        this.xhName = xhName;
 
         this.disabled = disabled;
         this.readonly = readonly;
@@ -171,6 +176,7 @@ export class FormModel extends HoistModel {
         forOwn(this.fields, f => {
             f.formModel = this;
             f.xhImpl = xhImpl;
+            f.xhName ??= this.childXhName(f.name);
         });
     }
 

package/cmp/form/README.md

@@ -108,6 +108,7 @@ const formModel = new FormModel({
 | `disabled` | `boolean` | Disable all fields |
 | `readonly` | `boolean` | Make all fields read-only |
 | `persistWith` | `FormPersistOptions` | Options for persisting form state |
+| `xhName` | `string` | Developer-facing name for logs, telemetry, and Inspector |
 
 ### Working with Data
 

package/cmp/grid/GridModel.ts

@@ -392,6 +392,9 @@ export interface GridConfig {
     /** Extra app-specific data for the GridModel. */
     appData?: PlainObject;
 
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
+
     /** @internal */
     xhImpl?: boolean;
 }
@@ -707,11 +710,13 @@ export class GridModel extends HoistModel {
             enableFullWidthScroll = GridModel.defaults.enableFullWidthScroll,
             experimental,
             appData,
+            xhName = null,
             xhImpl,
             ...rest
         }: GridConfig = config;
 
         this.xhImpl = xhImpl;
+        this.xhName = xhName;
 
         this._defaultState = {columns, sortBy, groupBy, expandLevel};
 
@@ -776,6 +781,7 @@ export class GridModel extends HoistModel {
         sizingMode = this.parseSizingMode(sizingMode);
 
         this.agGridModel = new AgGridModel({
+            xhName: this.childXhName('agGridModel'),
             sizingMode,
             showHover,
             rowBorders,
@@ -1894,7 +1900,11 @@ export class GridModel extends HoistModel {
             store = storeOrConfig;
         } else {
             storeOrConfig = this.enhanceStoreConfigFromColumns(storeOrConfig);
-            store = new Store({loadTreeData: this.treeMode, ...storeOrConfig});
+            store = new Store({
+                xhName: this.childXhName('store'),
+                loadTreeData: this.treeMode,
+                ...storeOrConfig
+            });
             store.xhImpl = this.xhImpl;
             this.markManaged(store);
         }
@@ -2106,7 +2116,12 @@ export class GridModel extends HoistModel {
         }
 
         return this.markManaged(
-            new StoreSelectionModel({...selModel, store: this.store, xhImpl: true})
+            new StoreSelectionModel({
+                xhName: this.childXhName('selModel'),
+                ...selModel,
+                store: this.store,
+                xhImpl: true
+            })
         );
     }
 
@@ -2114,7 +2129,10 @@ export class GridModel extends HoistModel {
         if (XH.isMobileApp || !filterModel) return null;
 
         filterModel = filterModel === true ? {} : filterModel;
-        return new GridFilterModel({bind: this.store, ...filterModel}, this);
+        return new GridFilterModel(
+            {xhName: this.childXhName('filterModel'), bind: this.store, ...filterModel},
+            this
+        );
     }
 
     private parseExperimental(experimental: GridExperimentalFlags) {
@@ -2146,7 +2164,9 @@ export class GridModel extends HoistModel {
               ? DesktopDockedColChooserModel
               : DesktopModalColChooserModel;
 
-        return this.markManaged(new modelClass({...config, gridModel: this}));
+        const ret = this.markManaged(new modelClass({...config, gridModel: this}));
+        ret.xhName = this.childXhName('colChooserModel');
+        return ret;
     }
 
     private isGroupSpec(col: ColumnOrGroupSpec): col is ColumnGroupSpec {

package/cmp/grid/Types.ts

@@ -161,6 +161,9 @@ export interface GridFilterModelConfig {
      * Defaults to `Icon.filter()` (the standard funnel icon in regular/outline style).
      */
     activeFilterIcon?: ReactElement;
+
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 
 /**

package/cmp/grid/filter/GridFilterModel.ts

@@ -65,12 +65,14 @@ export class GridFilterModel extends HoistModel {
             commitOnChange = false,
             fieldSpecs,
             fieldSpecDefaults,
-            activeFilterIcon
+            activeFilterIcon,
+            xhName = null
         }: GridFilterModelConfig,
         gridModel: GridModel
     ) {
         super();
         makeObservable(this);
+        this.xhName = xhName;
         this.gridModel = gridModel;
         this.bind = bind;
         this.commitOnChange = commitOnChange;

package/cmp/grid/impl/ColumnWidthCalculator.ts

@@ -111,8 +111,7 @@ export class ColumnWidthCalculator {
     }
 
     async calcLevelWidthAsync(gridModel, records, column, options, indentationPx = 0) {
-        const {field, getValueFn, renderer, rendererIsComplex, cellClassFn, cellClassRules} =
-                column,
+        const {field, getValueFn, renderer, rendererIsComplex, cellClassRules} = column,
             {store, sizingMode, rowClassFn, rowClassRules} = gridModel,
             bufferPx = column.autosizeBufferPx ?? options.bufferPx;
 
@@ -163,11 +162,11 @@ export class ColumnWidthCalculator {
         await forEachAsync(sample, ({value, records}) => {
             // Get unique combinations of row and cell classes applied
             const classNames = new Set<string>();
-            if (rowClassFn || cellClassFn || !isEmpty(rowClassRules) || !isEmpty(cellClassRules)) {
+            if (rowClassFn || !isEmpty(rowClassRules) || !isEmpty(cellClassRules)) {
                 records.forEach(record => {
                     const rawValue = getValueFn({record, field, column, gridModel, store}),
                         rowClass = this.getRowClass(gridModel, record),
-                        cellClass = this.getCellClass(gridModel, column, record, rawValue);
+                        cellClass = this.getCellClass(column, record, rawValue);
                     classNames.add(rowClass + '|' + cellClass);
                 });
             } else {
@@ -342,14 +341,10 @@ export class ColumnWidthCalculator {
         return this._cellEl;
     }
 
-    getCellClass(gridModel, column, record, value) {
-        const {cellClassFn, cellClassRules} = column,
+    getCellClass(column, record, value) {
+        const {cellClassRules} = column,
             ret = [];
 
-        if (cellClassFn) {
-            ret.push(cellClassFn({record, column, gridModel}));
-        }
-
         if (cellClassRules) {
             forOwn(cellClassRules, (fn, className) => {
                 if (fn({value, data: record})) {

package/cmp/grouping/GroupingChooserModel.ts

@@ -76,6 +76,9 @@ export interface GroupingChooserConfig {
      * provided in the `dimensions` config.
      */
     sortDimensions?: boolean;
+
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 
 export interface GroupingChooserModelDefaults {
@@ -159,10 +162,12 @@ export class GroupingChooserModel extends HoistModel {
         initialValue = [],
         maxDepth = null,
         persistWith = null,
-        sortDimensions = true
+        sortDimensions = true,
+        xhName = null
     }: GroupingChooserConfig) {
         super();
         makeObservable(this);
+        this.xhName = xhName;
 
         this.allowEmpty = allowEmpty;
         this.bind = bind;

package/cmp/input/HoistInputProps.ts

@@ -5,9 +5,9 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 
-import {TestSupportProps} from '@xh/hoist/core';
+import {DomAttrsProps, TestSupportProps} from '@xh/hoist/core';
 
-export interface HoistInputProps extends TestSupportProps {
+export interface HoistInputProps extends TestSupportProps, DomAttrsProps {
     /**
      * Field or model property name from which this component should read and write its value
      * in controlled mode. Can be set by parent FormField.
@@ -32,3 +32,51 @@ export interface HoistInputProps extends TestSupportProps {
     /** Value of the control, if provided directly. */
     value?: any;
 }
+
+/**
+ * Props for text-like inputs that browser password managers may treat as credential fields.
+ *
+ * Extended by the inputs that render a free-text `<input>` or `<textarea>` - the elements password
+ * manager extensions scan. Controls that cannot present as a credential field (checkboxes, sliders,
+ * segmented controls, and similar) do not accept this prop.
+ */
+export interface PasswordManagerSupportProps {
+    /**
+     * True to allow browser password managers to offer autofill on this input. Defaults to false,
+     * suppressing them.
+     *
+     * Password managers flag any field that *looks* like a username, email, or password and offer
+     * a saved-login prompt, whether or not the field has anything to do with signing in. That is
+     * unwanted on the ordinary data-entry forms most Hoist applications are built from, so Hoist
+     * opts out by default - the same posture as {@link TextInputProps.autoComplete}, which defaults
+     * to 'off'. Note `autocomplete="off"` alone does not stop password managers, which have ignored
+     * it on login-like fields for years.
+     *
+     * Set true on genuine credential fields so users get real password manager support.
+     */
+    enablePasswordManagers?: boolean;
+}
+
+/**
+ * Vendor-specific attributes that tell a password manager to skip a field. Each manager checks its
+ * own attribute - there is no cross-vendor standard. Covers 1Password, LastPass, and Bitwarden.
+ *
+ * Frozen and module-level so it adds no per-render allocation.
+ */
+export const PW_MANAGER_IGNORE_ATTRS = Object.freeze({
+    'data-1p-ignore': 'true',
+    'data-lpignore': 'true',
+    'data-bwignore': 'true'
+});
+
+/**
+ * Resolve the password manager attributes for an input, given its `enablePasswordManagers` prop.
+ * Spread onto the element rendering the native `<input>` / `<textarea>`, ahead of any `domAttrs`
+ * so an explicit caller attribute wins.
+ *
+ * Note these must be present in the DOM before a field is first focused - 1Password caches its
+ * assessment of a field on first interaction - so apply them during render, never in an effect.
+ */
+export function getPasswordManagerAttrs(enablePasswordManagers: boolean) {
+    return enablePasswordManagers ? null : PW_MANAGER_IGNORE_ATTRS;
+}

package/cmp/input/README.md

@@ -139,6 +139,48 @@ The common props interface extended by all input components.
 | `onCommit` | `(value, oldValue) => void` | Called when value is committed |
 | `tabIndex` | `number` | Tab order for focus (-1 to skip) |
 | `id` | `string` | DOM ID for the input element |
+| `testId` | `string` | Emits `data-testid` on the input's primary DOM element |
+| `domAttrs` | `data-*` / `aria-*` / `role` keys | Extra HTML attributes for that same element |
+
+### Extra DOM Attributes with `domAttrs`
+
+Input components pass an explicit, named set of props to the element they render, so any other
+attribute is dropped. Use `domAttrs` to apply `data-*` or `aria-*` attributes that Hoist does not
+model with a dedicated prop.
+
+```typescript
+textInput({
+    bind: 'email',
+    domAttrs: {'data-analytics-id': 'signup-email', 'aria-describedby': 'email-help'}
+});
+```
+
+Keys are constrained by type to `data-*` and `aria-*` attributes, plus `role`, so the prop cannot
+reach attributes the component manages itself.
+
+> **Mobile caveat:** `TextInput` and `NumberInput` on mobile render Onsen's `<ons-input>` custom
+> element, and `SearchInput` renders `<ons-search-input>`. Both mirror only a fixed allowlist of
+> attributes onto the real `<input>` they create. Attributes supplied via `domAttrs` are applied to the `<ons-input>` wrapper,
+> not to the inner `<input>`. This matches where `testId` lands today. Mobile `TextArea` is
+> unaffected - it renders a native `<textarea>`.
+
+### Password Managers
+
+Password manager extensions flag any field that *looks* like a username, email, or password and
+offer a saved-login prompt, whether or not the field has anything to do with signing in. Note that
+`autocomplete="off"` does not stop them - they have ignored it on login-like fields for years.
+
+`TextInput`, `TextArea`, and `NumberInput` therefore opt out by default, applying the vendor
+attributes for 1Password, LastPass, and Bitwarden. Set `enablePasswordManagers: true` on genuine
+credential fields, as Hoist's own `LoginPanel` does:
+
+```typescript
+textInput({bind: 'password', type: 'password', autoComplete: 'current-password',
+           enablePasswordManagers: true});
+```
+
+The attributes are applied during render, never in an effect - 1Password caches its assessment of
+a field on first focus, so they must already be present. The mobile caveat above applies here too.
 
 ## Integration with Forms
 

package/cmp/layout/Box.ts

@@ -35,12 +35,13 @@ export const [Box, box] = hoistCmp.withFactory<BoxComponentProps>({
         // Note `model` destructured off of non-layout props to avoid setting
         // model as a bogus DOM attribute. This low-level component may easily be passed one from
         // a parent that has not properly managed its own props.
-        let [layoutProps, {children, model, testId, ...restProps}] = splitLayoutProps(props);
+        let [layoutProps, {children, model, testId, domAttrs, ...restProps}] =
+            splitLayoutProps(props);
 
         restProps = mergeDeep(
             {style: {display: 'flex', overflow: 'hidden', position: 'relative'}},
             {style: layoutProps},
-            {[TEST_ID]: testId},
+            {[TEST_ID]: testId, ...domAttrs},
             restProps
         );
 

package/cmp/tab/TabContainerModel.ts

@@ -93,6 +93,9 @@ export interface TabContainerConfig {
 
     /** @internal */
     xhImpl?: boolean;
+
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 
 /**
@@ -149,6 +152,7 @@ export class TabContainerModel extends HoistModel {
             refreshMode = 'onShowLazy',
             persistWith,
             emptyText = 'No tabs to display.',
+            xhName = null,
             xhImpl = false,
             switcher = {mode: 'static'}
         }: TabContainerConfig,
@@ -157,6 +161,7 @@ export class TabContainerModel extends HoistModel {
         super();
         makeObservable(this);
         this.xhImpl = xhImpl;
+        this.xhName = xhName;
 
         this.depth = depth;
         this.renderMode = renderMode;
@@ -168,6 +173,7 @@ export class TabContainerModel extends HoistModel {
         this.setTabs(tabs);
         this.refreshContextModel = new RefreshContextModel();
         this.refreshContextModel.xhImpl = xhImpl;
+        this.refreshContextModel.xhName = this.childXhName('refreshContextModel');
         this.switcherConfig = switcher;
         this.dynamicTabSwitcherModel = this.parseSwitcher(switcher);
 
@@ -419,7 +425,9 @@ export class TabContainerModel extends HoistModel {
         if (!switcher || switcher.mode === 'static') return null;
         throwIf(XH.isMobileApp, 'DynamicTabSwitcherModel not supported for mobile TabContainer.');
 
-        return this.markManaged(new DynamicTabSwitcherModel(switcher, this));
+        const ret = this.markManaged(new DynamicTabSwitcherModel(switcher, this));
+        ret.xhName = this.childXhName('dynamicTabSwitcherModel');
+        return ret;
     }
 
     private initPersist({

package/cmp/tab/TabModel.ts

@@ -75,6 +75,9 @@ export interface TabConfig {
 
     /** @internal */
     xhImpl?: boolean;
+
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 
 /**
@@ -119,6 +122,7 @@ export class TabModel extends HoistModel {
             content,
             refreshMode,
             renderMode,
+            xhName = null,
             xhImpl = false
         }: TabConfig,
         containerModel: TabContainerModel
@@ -133,6 +137,7 @@ export class TabModel extends HoistModel {
         );
 
         this.id = id.toString();
+        this.xhName = xhName ?? containerModel.childXhName(this.id);
         this.title = title;
         this.icon = icon;
         this.tooltip = tooltip;

package/cmp/treemap/SplitTreeMapModel.ts

@@ -64,8 +64,10 @@ export class SplitTreeMapModel extends HoistModel {
             mapTitleFn,
             showSplitter = false,
             orientation = 'vertical',
+            xhName = null,
             ...rest
         } = config ?? {};
+        this.xhName = xhName;
 
         this.mapFilter = withDefault(mapFilter, this.defaultMapFilter);
         this.mapTitleFn = mapTitleFn;
@@ -77,8 +79,16 @@ export class SplitTreeMapModel extends HoistModel {
         );
         this.orientation = orientation;
 
-        this.primaryMapModel = new TreeMapModel({...rest, filter: r => this.mapFilter(r)});
-        this.secondaryMapModel = new TreeMapModel({...rest, filter: r => !this.mapFilter(r)});
+        this.primaryMapModel = new TreeMapModel({
+            xhName: this.childXhName('primaryMapModel'),
+            ...rest,
+            filter: r => this.mapFilter(r)
+        });
+        this.secondaryMapModel = new TreeMapModel({
+            xhName: this.childXhName('secondaryMapModel'),
+            ...rest,
+            filter: r => !this.mapFilter(r)
+        });
     }
 
     // Getters derived from both underlying TreeMapModels.

package/cmp/treemap/TreeMapModel.ts

@@ -90,6 +90,9 @@ export interface TreeMapConfig {
 
     /** Data filter to apply to records. */
     filter?: FilterLike;
+
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 
 export interface TreeMapModelDefaults {
@@ -178,8 +181,10 @@ export class TreeMapModel extends HoistModel {
             onDoubleClick,
             tooltip = true,
             emptyText,
-            filter
+            filter,
+            xhName = null
         }: TreeMapConfig = config ?? {};
+        this.xhName = xhName;
 
         this.gridModel = gridModel;
         this.store = store ? store : gridModel ? gridModel.store : null;

package/cmp/viewmanager/ViewManagerModel.ts

@@ -154,6 +154,9 @@ export interface ViewManagerConfig {
      * ViewManager menu.
      */
     viewMenuItemFn?: (view: ViewInfo, model: ViewManagerModel) => ReactNode;
+
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 
 /**
@@ -328,10 +331,12 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
         enableGlobal = true,
         enableSharing = true,
         preserveUnsavedChanges = true,
-        initialViewSpec = null
+        initialViewSpec = null,
+        xhName = null
     }: ViewManagerConfig) {
         super();
         makeObservable(this);
+        this.xhName = xhName ?? type;
 
         throwIf(
             !enableDefault && !initialViewSpec,

package/cmp/zoneGrid/ZoneGridModel.ts

@@ -301,6 +301,9 @@ export interface ZoneGridConfig {
 
     /** @internal */
     xhImpl?: boolean;
+
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 
 /**
@@ -364,8 +367,10 @@ export class ZoneGridModel extends HoistModel {
             restoreDefaultsFn,
             restoreDefaultsWarning,
             persistWith,
+            xhName = null,
             ...rest
         } = config;
+        this.xhName = xhName;
 
         this.availableColumns = columns
             .filter(it => !executeIfFunction(it.omit))
@@ -392,6 +397,7 @@ export class ZoneGridModel extends HoistModel {
         this.setGroupBy(groupBy);
 
         this.mapperModel = this.parseMapperModel(zoneMapperModel);
+        if (this.mapperModel) this.mapperModel.xhName = this.childXhName('mapperModel');
         if (persistWith) initPersist(this, persistWith);
 
         this.addReaction({
@@ -569,6 +575,7 @@ export class ZoneGridModel extends HoistModel {
     //-----------------------
     private createGridModel(config: GridConfig): GridModel {
         return new GridModel({
+            xhName: this.childXhName('gridModel'),
             ...config,
             xhImpl: true,
             contextMenu: withDefault(config.contextMenu, this.getDefaultContextMenu),

package/core/HoistBase.ts

@@ -92,6 +92,12 @@ export abstract class HoistBase {
      */
     xhImpl: boolean = undefined;
 
+    /**
+     * Optional developer-facing name for this instance, shown in place of its class name in log
+     * output, telemetry, and the Inspector. Uniqueness is not enforced.
+     */
+    xhName: string = null;
+
     // Internal State
     private managedInstances = [];
     private disposers = [];
@@ -272,6 +278,11 @@ export abstract class HoistBase {
         return getOrCreate(this, '_xhId', XH.genId);
     }
 
+    /** Name for a child of this object - `{xhName}.{key}`, or null if this object is unnamed. */
+    childXhName(key: string): string {
+        return this.xhName ? `${this.xhName}.${key}` : null;
+    }
+
     /**
      * Mark an object as managed by this object.
      *

package/core/HoistProps.ts

@@ -76,6 +76,7 @@ export interface BoxProps
     extends
         LayoutProps,
         TestSupportProps,
+        DomAttrsProps,
         Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'contextMenu'> {}
 
 /**
@@ -99,6 +100,32 @@ export interface TestSupportProps {
     testId?: string;
 }
 
+/**
+ * Props to support applying arbitrary HTML attributes to the primary DOM element rendered by a
+ * component.
+ *
+ * Intended as an escape hatch for `data-*` and `aria-*` attributes that Hoist does not model with
+ * a dedicated prop - e.g. attributes read by analytics libraries, browser extensions, or
+ * third-party test tooling. Hoist components pick the props they pass to the elements they render,
+ * so attributes specified any other way are typically dropped and never reach the DOM.
+ */
+export interface DomAttrsProps {
+    /**
+     * Additional HTML attributes to apply to the primary DOM element rendered by this component -
+     * the same element that receives `data-testid` when {@link TestSupportProps.testId} is set.
+     *
+     * Keys are constrained to `data-*` and `aria-*` attributes, plus `role`, so this cannot be
+     * used to override attributes the component manages itself (`className`, `style`, `value`).
+     * Note the constraint applies to object literals only - a pre-built `Record<string, string>`
+     * will still assign, for the rare case that calls for an attribute outside this set. Take care
+     * there: precedence against component-managed attributes is not guaranteed and varies by
+     * component.
+     */
+    domAttrs?: Record<`data-${string}` | `aria-${string}`, string | number | boolean> & {
+        role?: string;
+    };
+}
+
 export interface LayoutProps {
     margin?: string | number | boolean;
     marginTop?: string | number | boolean;

package/core/README.md

@@ -117,6 +117,19 @@ class MyModel extends HoistModel {
 }
 ```
 
+**Instance Naming**
+
+Set `xhName` to distinguish instances of the same class in logs, telemetry, and the Inspector.
+Config-driven models accept it as a config; any `HoistBase` can set it directly.
+
+```typescript
+new GridModel({xhName: 'positionsGrid', store: {...}});
+
+export class PositionsModel extends HoistModel {
+    override xhName = 'positions';
+}
+```
+
 ### Core API
 
 | Method | Purpose |
@@ -128,6 +141,8 @@ class MyModel extends HoistModel {
 | `setBindable(prop, val)` | Set value via conventional setter |
 | `destroy()` | Clean up all managed resources |
 | `xhId` | Unique identifier for this instance |
+| `xhName` | Optional developer-facing name for logs, telemetry, and Inspector |
+| `childXhName(key)` | `{xhName}.{key}`, for naming child objects |
 
 ## HoistModel
 
@@ -538,6 +553,37 @@ Button.defaults.minimal = false;
 This pattern is analogous to `static defaults` on Model and Service classes (e.g.
 `GridModel.defaults`), adapted for functional components created via `hoistCmp`.
 
+### Extra DOM Attributes with `domAttrs`
+
+Hoist components choose which props they pass along to the elements they render. An attribute that
+a component does not model with a dedicated prop is therefore dropped and never reaches the DOM.
+
+`DomAttrsProps` provides the escape hatch. Components that support it accept a `domAttrs` object
+and apply its entries to their primary DOM element - the same element that receives `data-testid`
+when `testId` is set.
+
+```typescript
+textInput({
+    bind: 'email',
+    testId: 'signup-email',
+    domAttrs: {'data-analytics-id': 'signup-email', 'aria-describedby': 'email-help'}
+});
+```
+
+Keys are constrained by type to `data-*` and `aria-*` attributes, plus `role`, so the prop cannot
+be used to reach for attributes the component manages itself (`className`, `style`, `value`). The
+constraint applies to object literals only; a pre-built `Record<string, string>` still assigns, for
+the rare attribute outside that set. Take care there - precedence against component-managed
+attributes is not guaranteed and varies by component.
+
+As with `style`, an inline `domAttrs` literal is a new object on each render, so hoist a constant
+out of the render function when passing one to a component that relies on `memo`.
+
+Support is provided by `Box` and the layout components built on it (and therefore by `Panel`,
+`Toolbar`, and similar containers), by `Button` and `ButtonGroup`, by `Card` and `Badge`, and by
+the input components in `/cmp/input/`. See [`/cmp/input/README.md`](../cmp/input/README.md) for
+notes specific to inputs.
+
 ## Element Factories
 
 **File**: `elem.ts`

package/core/impl/InstallServices.ts

@@ -34,7 +34,11 @@ export async function installServicesAsync(
     const notSvc = serviceClasses.find((it: any) => !it.isHoistService);
     throwIf(notSvc, `Cannot initialize ${notSvc?.name} - does not extend HoistService`);
 
-    const svcs = serviceClasses.map(c => createSingleton(c));
+    const svcs = serviceClasses.map(c => {
+        const svc = createSingleton(c);
+        svc.xhName ??= camelCase(c.name);
+        return svc;
+    });
     await initServicesInternalAsync(svcs, ctx);
 
     svcs.forEach(svc => {