@xh/hoist 87.1.1 → 87.2.0

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,

package/mobile/cmp/navigator/NavigatorModel.ts

@@ -52,6 +52,9 @@ export interface NavigatorConfig {
      * See enum for description of supported modes.
      */
     refreshMode?: RefreshMode;
+
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 
 /**
@@ -101,10 +104,12 @@ export class NavigatorModel extends HoistModel {
         pullDownToRefresh = true,
         transitionMs = 500,
         renderMode = 'lazy',
-        refreshMode = 'onShowLazy'
+        refreshMode = 'onShowLazy',
+        xhName = null
     }: NavigatorConfig) {
         super();
         makeObservable(this);
+        this.xhName = xhName;
 
         ensureNotEmpty(pages, 'NavigatorModel needs at least one page.');
         ensureUniqueBy(pages, 'id', 'Multiple NavigatorModel PageModels have the same id.');

package/mobile/cmp/navigator/PageModel.ts

@@ -62,6 +62,9 @@ export interface PageConfig {
      * no need to specify manually.
      */
     navigatorModel?: NavigatorModel;
+
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 
 /**
@@ -116,7 +119,8 @@ export class PageModel extends HoistModel {
         renderMode,
         refreshMode,
         disableDirectLink,
-        disableAppRefreshButton
+        disableAppRefreshButton,
+        xhName = null
     }: PageConfig) {
         super();
         makeObservable(this);
@@ -127,6 +131,7 @@ export class PageModel extends HoistModel {
 
         this.id = id;
         this.navigatorModel = navigatorModel;
+        this.xhName = xhName ?? navigatorModel?.childXhName(id);
         this.content = content;
         this.props = withDefault(props, {});
         this.disableDirectLink = withDefault(disableDirectLink, false);

package/mobile/cmp/tab/impl/TabContainer.ts

@@ -20,7 +20,13 @@ import {TabContainerProps, TabModel, TabSwitcherProps} from '@xh/hoist/cmp/tab';
  *
  * @internal
  */
-export function tabContainerImpl({model, className, testId, ...props}: TabContainerProps) {
+export function tabContainerImpl({
+    model,
+    className,
+    testId,
+    domAttrs,
+    ...props
+}: TabContainerProps) {
     const switcherProps = getSwitcherProps(props),
         {activeTab} = model,
         tabs = model.tabs.filter(it => !it.excludeFromSwitcher),
@@ -34,6 +40,7 @@ export function tabContainerImpl({model, className, testId, ...props}: TabContai
     if (isEmpty(tabs)) {
         return page({
             [TEST_ID]: testId,
+            ...domAttrs,
             className: 'xh-tab-page',
             item: placeholder(model.emptyText)
         });
@@ -41,6 +48,7 @@ export function tabContainerImpl({model, className, testId, ...props}: TabContai
 
     return onsenTabbar({
         [TEST_ID]: testId,
+        ...domAttrs,
         className: classNames(className, `xh-tab-container--${switcherProps?.orientation}`),
         position: switcherProps?.orientation,
         activeIndex: activeTab ? tabs.indexOf(activeTab) : 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "87.1.1",
+  "version": "87.2.0",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": {
     "type": "git",
@@ -48,8 +48,9 @@
     "@codemirror/language": "^6.12.4",
     "@codemirror/language-data": "^6.5.2",
     "@codemirror/lint": "^6.9.7",
-    "@codemirror/state": "^6.7.1",
-    "@codemirror/view": "^6.43.9",
+    "@codemirror/state": "^6.7.4",
+    "@codemirror/view": "^6.43.11",
+    "@daypicker/react": "^10.0.1",
     "@floating-ui/react": "^0.27.20",
     "@fortawesome/fontawesome-pro": "^7.3.1",
     "@fortawesome/fontawesome-svg-core": "^7.3.1",
@@ -64,9 +65,9 @@
     "classnames": "^2.5.1",
     "commander": "^15.0.0",
     "core-js": "^3.50.0",
-    "dompurify": "^3.4.14",
+    "dompurify": "^3.4.15",
     "fast-deep-equal": "^3.1.3",
-    "filesize": "~11.0.22",
+    "filesize": "~11.0.23",
     "http-status-codes": "^2.3.0",
     "inter-ui": "~4.1.1",
     "jwt-decode": "^4.0.0",
@@ -77,14 +78,13 @@
     "moment": "~2.30.1",
     "numbro": "~2.5.0",
     "onsenui": "~2.12.9",
-    "qs": "^6.15.3",
-    "react-day-picker": "^9.14.0",
+    "qs": "^6.16.0",
     "react-dropzone": "~20.1.1",
     "react-grid-layout": "~2.2.4",
     "react-markdown": "~10.1.0",
     "react-onsenui": "~1.13.3",
     "react-select": "~5.10.2",
-    "react-window": "~2.3.0",
+    "react-window": "~2.3.1",
     "react-windowed-select": "~5.2.0",
     "remark-breaks": "~4.0.0",
     "remark-gfm": "~4.0.1",
@@ -96,10 +96,10 @@
     "store2": "^2.14.4",
     "swiper": "~12.2.0",
     "ts-morph": "^27.0.2",
-    "tsx": "^4.23.12",
+    "tsx": "^4.23.13",
     "ua-parser-js": "^2.0.10",
     "unified": "~11.0.5",
-    "zod": "^4.4.3"
+    "zod": "^4.5.4"
   },
   "peerDependencies": {
     "react": "^19.2.0",
@@ -108,25 +108,25 @@
   "devDependencies": {
     "@types/lodash": "^4.17.25",
     "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.5",
-    "@xh/eslint-config": "^8.0.0",
-    "@xh/hoist-dev-utils": "^14.0.1",
+    "@types/react-dom": "^19.2.7",
+    "@xh/eslint-config": "^8.0.1",
+    "@xh/hoist-dev-utils": "^15.0.1",
     "ag-grid-community": "^35.3.1",
     "ag-grid-react": "^35.3.1",
     "csstype": "^3.2.3",
-    "eslint": "^10.9.1",
+    "eslint": "^10.10.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-tsdoc": "^0.5.2",
-    "globals": "^17.11.0",
+    "globals": "^17.12.0",
     "husky": "^9.1.7",
-    "lint-staged": "^17.3.0",
-    "postcss": "^8.5.26",
+    "lint-staged": "^17.5.0",
+    "postcss": "^8.5.28",
     "prettier": "^3.9.6",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "stylelint": "^17.14.1",
+    "stylelint": "^17.15.0",
     "stylelint-config-recommended-scss": "^17.0.1",
-    "type-fest": "^5.8.0",
+    "type-fest": "^5.9.0",
     "typescript": "^5.9.3"
   },
   "scripts": {

package/styles/vars.scss

@@ -684,7 +684,7 @@ body {
   //------------------------
   // Segmented Control
   //------------------------
-  --xh-segmented-control-bg: var(--segmented-control-bg, #{color.mix(mc('blue-grey', '100'), mc('blue-grey', '50'))});
+  --xh-segmented-control-bg: var(--segmented-control-bg, var(--xh-bg-alt));
   --xh-segmented-control-selected-bg: var(--segmented-control-selected-bg, var(--xh-bg));
   --xh-segmented-control-text-color: var(--segmented-control-text-color, color-mix(in srgb, var(--xh-text-color) 75%, var(--xh-segmented-control-bg)));
   --xh-segmented-control-selected-text-color: var(--segmented-control-selected-text-color, var(--xh-text-color));
@@ -694,10 +694,40 @@ body {
   --xh-segmented-control-pad-px: calc(var(--xh-segmented-control-pad) * 1px);
 
   &.xh-dark {
-    --xh-segmented-control-bg: var(--segmented-control-bg, #{color.mix(mc('blue-grey', '800'), mc('blue-grey', '900'))});
+    // Tray bg follows --xh-bg-alt in both themes - no dark-mode override needed.
     --xh-segmented-control-selected-bg: var(--segmented-control-selected-bg, #{mc('blue-grey', '700')});
   }
 
+  //------------------------
+  // Intent Input
+  //------------------------
+  --xh-intent-input-swatch-size-px: var(--intent-input-swatch-size-px, 20px);
+  --xh-intent-input-compact-swatch-size-px: var(--intent-input-compact-swatch-size-px, 16px);
+  --xh-intent-input-gap-px: var(--intent-input-gap-px, var(--xh-pad-half-px));
+  --xh-intent-input-border-radius-px: var(--intent-input-border-radius-px, var(--xh-border-radius-px));
+
+  //------------------------
+  // Date Range Picker
+  //------------------------
+  --xh-date-range-picker-popover-width: var(--date-range-picker-popover-width, 640px);
+  --xh-date-range-picker-popover-single-width: var(--date-range-picker-popover-single-width, 300px);
+  --xh-date-range-picker-popover-min-height: var(--date-range-picker-popover-min-height, 322px);
+  --xh-date-range-picker-accent: var(--date-range-picker-accent, var(--xh-intent-primary));
+  --xh-date-range-picker-accent-text-color: var(--date-range-picker-accent-text-color, var(--xh-white));
+  --xh-date-range-picker-selected-bg: var(--date-range-picker-selected-bg, var(--xh-bg-highlight));
+  --xh-date-range-picker-hover-bg: var(--date-range-picker-hover-bg, var(--xh-grid-bg-hover));
+  --xh-date-range-picker-date-font-family: var(--date-range-picker-date-font-family, var(--xh-font-family-mono));
+  --xh-date-range-picker-date-font-size: var(--date-range-picker-date-font-size, 12px);
+  --xh-date-range-picker-row-height: var(--date-range-picker-row-height, 32px);
+  --xh-date-range-picker-day-size: var(--date-range-picker-day-size, 26px);
+  --xh-date-range-picker-footer-bg: var(--date-range-picker-footer-bg, var(--xh-tbar-bg));
+  // Tab rail stays on the popover background in light theme, where a distinct fill would set
+  // muted tab labels on grey and lose contrast. In dark theme a distinct fill reads well.
+  --xh-date-range-picker-rail-bg: var(--date-range-picker-rail-bg, transparent);
+
+  &.xh-dark {
+    --xh-date-range-picker-rail-bg: var(--date-range-picker-rail-bg, var(--xh-tbar-bg));
+  }
 
   //------------------------
   // Mask + LoadingIndicator

package/svc/InspectorService.ts

@@ -201,6 +201,7 @@ export class InspectorService extends HoistService {
                 return {
                     id: xhId,
                     className: inst.constructor.name,
+                    xhName: inst.xhName,
                     created: inst._created,
                     isHoistService: inst.isHoistService,
                     isHoistModel: inst.isHoistModel,
@@ -239,6 +240,7 @@ export class InspectorService extends HoistService {
 
 interface InspectorInstanceData {
     className: string;
+    xhName: string;
     created: number;
     isHoistModel: boolean;
     isHoistService: boolean;