@xh/hoist 86.0.1 → 86.1.0

package/icon/Icon.ts

@@ -651,6 +651,9 @@ export const Icon = {
     shieldCheck(p?: IconProps) {
         return Icon.icon({...p, iconName: 'shield-check'});
     },
+    shieldHalved(p?: IconProps) {
+        return Icon.icon({...p, iconName: 'shield-halved'});
+    },
     sigma(p?: IconProps) {
         return Icon.icon({...p, iconName: 'sigma'});
     },

package/icon/index.ts

@@ -176,6 +176,7 @@ import {
     faServer as faServerLight,
     faShieldAlt as faShieldAltLight,
     faShieldCheck as faShieldCheckLight,
+    faShieldHalved as faShieldHalvedLight,
     faSigma as faSigmaLight,
     faSignIn as faSignInLight,
     faSignOut as faSignOutLight,
@@ -392,6 +393,7 @@ import {
     faServer,
     faShieldAlt,
     faShieldCheck,
+    faShieldHalved,
     faSigma,
     faSignIn,
     faSignOut,
@@ -608,6 +610,7 @@ import {
     faServer as faServerSolid,
     faShieldAlt as faShieldAltSolid,
     faShieldCheck as faShieldCheckSolid,
+    faShieldHalved as faShieldHalvedSolid,
     faSigma as faSigmaSolid,
     faSignIn as faSignInSolid,
     faSignOut as faSignOutSolid,
@@ -825,6 +828,7 @@ import {
     faServer as faServerThin,
     faShieldAlt as faShieldAltThin,
     faShieldCheck as faShieldCheckThin,
+    faShieldHalved as faShieldHalvedThin,
     faSigma as faSigmaThin,
     faSignIn as faSignInThin,
     faSignOut as faSignOutThin,
@@ -1540,6 +1544,10 @@ library.add(
     faShieldCheckLight,
     faShieldCheckSolid,
     faShieldCheckThin,
+    faShieldHalved,
+    faShieldHalvedLight,
+    faShieldHalvedSolid,
+    faShieldHalvedThin,
     faSigma,
     faSigmaLight,
     faSigmaSolid,

package/mobile/appcontainer/LoginPanel.scss

@@ -1,18 +1,59 @@
 .xh-login {
-  .xh-toolbar {
-    font-size: var(--xh-appbar-title-font-size-px);
-    background-color: var(--xh-appbar-bg);
-    color: var(--xh-appbar-title-color);
+  .xh-panel__content {
+    align-items: center;
+    justify-content: center;
   }
 
-  &__body {
-    margin: 40px;
+  &__content {
+    display: flex;
+    flex-direction: column;
+    width: 90vw;
+    max-width: 400px;
+    padding: 0 40px;
   }
 
-  .xh-input {
-    width: 100%;
+  &__icon {
+    align-self: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 64px;
+    height: 64px;
+    margin-bottom: var(--xh-pad-double-px);
+    font-size: 26px;
+    color: var(--xh-intent-primary);
+    background-color: var(--xh-intent-primary-trans1);
+    border-radius: 10px;
+  }
+
+  &__title {
+    color: var(--xh-text-color);
+    font-size: var(--xh-font-size-large-px);
+    font-weight: 500;
+    text-align: center;
+  }
+
+  &__subtitle {
+    color: var(--xh-text-color-muted);
+    font-size: var(--xh-font-size-small-px);
+    margin: 3px 0 var(--xh-pad-double-px);
+    text-align: center;
+  }
+
+  &__field {
     margin-bottom: var(--xh-pad-px);
-    padding: 4px 8px;
+  }
+
+  &__field-label {
+    margin-bottom: var(--xh-pad-half-px);
+    font-size: var(--xh-font-size-small-px);
+    color: var(--xh-text-color-muted);
+  }
+
+  .xh-text-input {
+    width: 100%;
+    border: var(--xh-border-solid);
+    border-radius: var(--xh-border-radius-px);
   }
 
   &__warning,
@@ -32,7 +73,8 @@
     background-color: var(--xh-bg-alt);
   }
 
-  .xh-button {
-    padding: 1.5em 0;
+  &__submit {
+    margin-top: var(--xh-pad-px);
+    padding: var(--xh-pad-double-px) 0;
   }
 }

package/mobile/appcontainer/LoginPanel.ts

@@ -5,13 +5,12 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 import {LoginPanelModel} from '@xh/hoist/appcontainer/login/LoginPanelModel';
-import {div, filler, form} from '@xh/hoist/cmp/layout';
+import {box, div, form, viewport} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp, XH} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {button} from '@xh/hoist/mobile/cmp/button';
 import {textInput} from '@xh/hoist/mobile/cmp/input';
 import {panel} from '@xh/hoist/mobile/cmp/panel';
-import {toolbar} from '@xh/hoist/mobile/cmp/toolbar';
 import './LoginPanel.scss';
 
 /**
@@ -25,59 +24,85 @@ export const loginPanel = hoistCmp.factory({
     model: creates(LoginPanelModel),
 
     render({model}) {
-        const {loginMessage} = XH.appSpec,
-            {isValid, loadObserver, warning, loginInProgress} = model;
+        const {loginMessage, loginPanelIcon, clientAppName} = XH.appSpec,
+            {warning, loginInProgress} = model;
 
-        return panel({
-            className: 'xh-login',
-            testId: 'xh-login',
-            items: [
-                toolbar(filler(), XH.clientAppName, filler()),
-                panel({
-                    className: 'xh-login__body',
-                    mask: loadObserver,
+        return viewport(
+            panel({
+                className: 'xh-login',
+                testId: 'xh-login',
+                item: div({
+                    className: 'xh-login__content',
                     items: [
+                        box({
+                            className: 'xh-login__icon',
+                            item: loginPanelIcon ?? Icon.shieldHalved({prefix: 'fas'})
+                        }),
+                        div({className: 'xh-login__title', item: `Login to ${clientAppName}`}),
+                        div({
+                            className: 'xh-login__subtitle',
+                            item: 'Enter your credentials to continue.'
+                        }),
                         form({
                             className: 'xh-login__fields',
                             items: [
-                                textInput({
-                                    bind: 'username',
-                                    placeholder: 'Username',
-                                    autoComplete: 'username',
-                                    autoCapitalize: 'none',
-                                    commitOnChange: true,
-                                    testId: 'xh-login-username'
+                                field({
+                                    label: 'Username',
+                                    input: textInput({
+                                        bind: 'username',
+                                        leftIcon: Icon.user(),
+                                        autoComplete: 'username',
+                                        autoCapitalize: 'none',
+                                        commitOnChange: true,
+                                        testId: 'xh-login-username'
+                                    })
+                                }),
+                                field({
+                                    label: 'Password',
+                                    input: textInput({
+                                        bind: 'password',
+                                        leftIcon: Icon.lock(),
+                                        type: 'password',
+                                        autoComplete: 'current-password',
+                                        commitOnChange: true,
+                                        testId: 'xh-login-password'
+                                    })
                                 }),
-                                textInput({
-                                    bind: 'password',
-                                    placeholder: 'Password',
-                                    autoComplete: 'current-password',
-                                    type: 'password',
-                                    commitOnChange: true,
-                                    testId: 'xh-login-password'
+                                div({
+                                    className: 'xh-login__message',
+                                    omit: !loginMessage,
+                                    item: loginMessage
+                                }),
+                                div({
+                                    className: 'xh-login__warning',
+                                    omit: !warning,
+                                    item: warning
+                                }),
+                                button({
+                                    className: 'xh-login__submit',
+                                    icon: loginInProgress
+                                        ? Icon.spinner({spin: true})
+                                        : Icon.login(),
+                                    text: loginInProgress ? 'Logging in...' : 'Login',
+                                    intent: 'primary',
+                                    onClick: () => model.submitAsync(),
+                                    testId: 'xh-login-btn'
                                 })
                             ]
-                        }),
-                        div({
-                            className: 'xh-login__message',
-                            omit: !loginMessage,
-                            item: loginMessage
-                        }),
-                        div({
-                            className: 'xh-login__warning',
-                            omit: !warning,
-                            item: warning
-                        }),
-                        button({
-                            icon: Icon.login(),
-                            text: loginInProgress ? 'Please wait...' : 'Login',
-                            disabled: !isValid || loginInProgress,
-                            onClick: () => model.submitAsync(),
-                            testId: 'xh-login-btn'
                         })
                     ]
                 })
-            ]
+            })
+        );
+    }
+});
+
+const field = hoistCmp.factory({
+    model: false,
+    render({label, input}) {
+        return div({
+            className: 'xh-login__field',
+            items: [div({className: 'xh-login__field-label', item: label}), input]
         });
     }
 });

package/mobile/cmp/appOption/SizingModeAppOption.ts

@@ -5,8 +5,7 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 import {AppOptionSpec, SizingMode, XH} from '@xh/hoist/core';
-import {button} from '@xh/hoist/mobile/cmp/button';
-import {buttonGroupInput, ButtonGroupInputProps} from '@xh/hoist/mobile/cmp/input';
+import {segmentedControl, SegmentedControlProps} from '@xh/hoist/mobile/cmp/input';
 import {startCase, values} from 'lodash';
 import {FormFieldProps} from '../form/FormField';
 import '@xh/hoist/mobile/register';
@@ -16,8 +15,8 @@ interface SizingModeAppOptionSpec {
     modes?: SizingMode[];
     /** Props for nested FormField. */
     formFieldProps?: Partial<FormFieldProps>;
-    /** Props for nested ButtonGroupInput. */
-    inputProps?: Partial<ButtonGroupInputProps>;
+    /** Props for nested SegmentedControl. */
+    inputProps?: Partial<SegmentedControlProps>;
 }
 
 /**
@@ -33,18 +32,8 @@ export const sizingModeAppOption = ({
         name: 'sizingMode',
         formField: {
             label: 'Grid sizing',
-            item: buttonGroupInput({
-                items: modes.map(mode =>
-                    button({
-                        value: mode,
-                        text: startCase(mode),
-                        flex: 1,
-                        style: {
-                            fontSize: `var(--xh-grid-${mode}-font-size-px)`
-                        }
-                    })
-                ),
-                width: '100%',
+            item: segmentedControl({
+                options: modes.map(mode => ({value: mode, label: startCase(mode)})),
                 ...inputProps
             }),
             ...formFieldProps

package/mobile/cmp/appOption/ThemeAppOption.ts

@@ -6,16 +6,15 @@
  */
 import {AppOptionSpec, XH} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon/Icon';
-import {button} from '@xh/hoist/mobile/cmp/button';
 import {FormFieldProps} from '@xh/hoist/mobile/cmp/form';
-import {buttonGroupInput, ButtonGroupInputProps} from '@xh/hoist/mobile/cmp/input';
+import {segmentedControl, SegmentedControlProps} from '@xh/hoist/mobile/cmp/input';
 import '@xh/hoist/mobile/register';
 
 interface ThemeAppOptionSpec {
     /** Props for nested FormField */
     formFieldProps?: Partial<FormFieldProps>;
-    /** Props for nested ButtonGroupInput */
-    inputProps?: Partial<ButtonGroupInputProps>;
+    /** Props for nested SegmentedControl */
+    inputProps?: Partial<SegmentedControlProps>;
 }
 
 /**
@@ -29,28 +28,12 @@ export const themeAppOption = ({
         name: 'theme',
         formField: {
             label: 'Theme',
-            item: buttonGroupInput({
-                items: [
-                    button({
-                        value: 'light',
-                        text: 'Light',
-                        icon: Icon.sun(),
-                        width: '33.33%'
-                    }),
-                    button({
-                        value: 'dark',
-                        text: 'Dark',
-                        icon: Icon.moon(),
-                        width: '33.33%'
-                    }),
-                    button({
-                        value: 'system',
-                        text: 'System',
-                        icon: Icon.sync(),
-                        width: '33.33%'
-                    })
+            item: segmentedControl({
+                options: [
+                    {value: 'light', label: 'Light', icon: Icon.sun()},
+                    {value: 'dark', label: 'Dark', icon: Icon.moon()},
+                    {value: 'system', label: 'System', icon: Icon.sync()}
                 ],
-                width: '100%',
                 ...inputProps
             }),
             ...formFieldProps

package/mobile/cmp/error/impl/ErrorMessage.ts

@@ -5,7 +5,7 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 import {hoistCmp} from '@xh/hoist/core';
-import {div, filler, hbox, p} from '@xh/hoist/cmp/layout';
+import {div, p, vbox} from '@xh/hoist/cmp/layout';
 import {ErrorMessageProps} from '@xh/hoist/cmp/error';
 import {button, ButtonProps} from '@xh/hoist/mobile/cmp/button';
 import {Icon} from '@xh/hoist/icon';
@@ -21,15 +21,11 @@ export const errorMessageImpl = hoistCmp.factory<
     Omit<ErrorMessageProps, 'error' | 'actionFn' | 'detailsFn'>
 >({
     render({message, title, actionButtonProps, detailsButtonProps}) {
-        let buttons = [],
-            buttonBar = null;
+        // Stack action buttons vertically and full-width - idiomatic for mobile.
+        const buttons = [];
         if (detailsButtonProps) buttons.push(detailsButton(detailsButtonProps as ButtonProps));
         if (actionButtonProps) buttons.push(actionButton(actionButtonProps as ButtonProps));
-        if (buttons.length == 1) {
-            buttonBar = buttons[0];
-        } else if (buttons.length == 2) {
-            buttonBar = hbox(buttons[0], filler(), buttons[1]);
-        }
+        const buttonBar = buttons.length ? vbox({gap: true, items: buttons}) : null;
 
         return div({
             className: 'xh-error-message__inner',

package/mobile/cmp/input/SegmentedControl.scss

@@ -0,0 +1,126 @@
+/*
+ * 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.
+ */
+
+// Scoped under .xh-app to win specificity over the .xh-app-scoped mobile Button styles.
+.xh-app {
+  .xh-segmented-control {
+    // The tray - a recessed container the selected option rises out of.
+    display: flex;
+    align-items: stretch;
+    // Size the whole control (tray padding included) to one standard control height, so it matches
+    // a button / input rather than standing taller. Options stretch to fill the tray (below) rather
+    // than each taking the full button height, which - plus the tray padding - would overshoot.
+    box-sizing: border-box;
+    height: var(--xh-button-height);
+    background-color: var(--xh-segmented-control-bg);
+    border-radius: var(--xh-segmented-control-border-radius-px);
+    padding: var(--xh-segmented-control-pad-px);
+    gap: var(--xh-segmented-control-pad-px);
+
+    // Options - buttons receding into the tray by default. Override the minimal Button base so
+    // the tray background shows through and our segmented text color applies.
+    .xh-button.xh-segmented-control-option {
+      flex: 0 0 auto;
+      // Fill the tray height (via the tray's align-items: stretch) instead of the fixed button
+      // height, so tray padding does not add on top of a full-height button.
+      height: auto;
+      // Allow the button to shrink below its content width so the label can ellipsis-truncate
+      // (flex items default to min-width: auto, which forces overflow / hard clipping instead).
+      min-width: 0;
+      border-radius: var(--xh-segmented-control-border-radius-px);
+      background-color: transparent;
+      color: var(--xh-segmented-control-text-color);
+
+      // Keep icons at full size - only the label gives way when space is tight.
+      > svg {
+        flex: 0 0 auto;
+      }
+    }
+
+    // Label - truncate with an ellipsis when its segment is too narrow to fit the full text.
+    .xh-segmented-control-option__label {
+      overflow: hidden;
+      min-width: 0;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    // Selected option - a solid tile standing out from the tray.
+    .xh-button.xh-segmented-control-option--selected {
+      background-color: var(--xh-segmented-control-selected-bg);
+      color: var(--xh-segmented-control-selected-text-color);
+    }
+
+    // Per-option intents - keyed off the className applied to each button. Renders the selected
+    // option as a solid fill in the intent color, and tints unselected options' text so an intent
+    // (e.g. danger) reads as such even before it is chosen.
+    @each $intent in (primary, success, warning, danger) {
+      .xh-button.xh-segmented-control-option--#{$intent} {
+        color: var(--xh-intent-#{$intent}-text-color);
+      }
+
+      .xh-button.xh-segmented-control-option--#{$intent}.xh-segmented-control-option--selected {
+        background-color: var(--xh-intent-#{$intent});
+        color: var(--xh-white);
+      }
+    }
+
+    // Fill mode (default) - options grow to fill the available width. The basis set here is `auto`
+    // (content), so without `equalSegmentWidths` each option keeps its content width and only the
+    // leftover space is shared out - a wider label yields a wider segment. The equal-widths rule
+    // below (the default) overrides this basis. Options still shrink + ellipsis (see above) when
+    // the set genuinely cannot fit.
+    &.xh-segmented-control--fill .xh-button.xh-segmented-control-option {
+      flex: 1 1 auto;
+    }
+
+    // Equal-width segments (default, via the `equalSegmentWidths` prop) - a 0 flex-basis divides
+    // the row into equal parts regardless of label length, the conventional segmented-control
+    // appearance. Higher specificity than the content-basis rule above, so it wins when applied.
+    &.xh-segmented-control--fill.xh-segmented-control--equal-widths
+      .xh-button.xh-segmented-control-option {
+      flex-basis: 0;
+    }
+
+    // Outlined mode - border around the tray with no inner background fill.
+    &.xh-segmented-control--outlined {
+      background-color: transparent;
+      border: 1px solid var(--xh-border-color);
+
+      // 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.
+      .xh-button.xh-segmented-control-option {
+        border: 1px solid transparent;
+      }
+
+      .xh-button.xh-segmented-control-option--selected {
+        border-color: currentColor;
+      }
+    }
+
+    @each $intent in (primary, success, warning, danger) {
+      &.xh-segmented-control--outlined.xh-segmented-control--#{$intent} {
+        border-color: var(--xh-intent-#{$intent});
+      }
+    }
+
+    // Validation borders
+    &.xh-input--invalid {
+      border: var(--xh-form-field-invalid-border);
+    }
+
+    &.xh-input--warning {
+      border: var(--xh-form-field-warning-border);
+    }
+
+    &.xh-input--info {
+      border: var(--xh-form-field-info-border);
+    }
+  }
+}