@jobber/components 8.9.1 → 8.11.0

package/dist/Icon-cjs.js

@@ -15,7 +15,8 @@ function Icon({ name, color, customColor, size = "base", testID, UNSAFE_classNam
         icon = getTruck(pathStyle, customColor);
     }
     else {
-        icon = paths.map((path) => (React.createElement("path", { key: path, style: Object.assign(Object.assign({}, pathStyle), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.path), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.path, d: path, fill: customColor })));
+        // getIcon returns undefined paths for an unknown icon name; render nothing rather than crash.
+        icon = (paths !== null && paths !== void 0 ? paths : []).map((path) => (React.createElement("path", { key: path, style: Object.assign(Object.assign({}, pathStyle), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.path), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.path, d: path, fill: customColor })));
     }
     return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, style: Object.assign(Object.assign({}, svgStyle), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.svg), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.svg, "data-testid": testID || name }, icon));
 }

package/dist/Icon-es.js

@@ -13,7 +13,8 @@ function Icon({ name, color, customColor, size = "base", testID, UNSAFE_classNam
         icon = getTruck(pathStyle, customColor);
     }
     else {
-        icon = paths.map((path) => (React__default.createElement("path", { key: path, style: Object.assign(Object.assign({}, pathStyle), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.path), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.path, d: path, fill: customColor })));
+        // getIcon returns undefined paths for an unknown icon name; render nothing rather than crash.
+        icon = (paths !== null && paths !== void 0 ? paths : []).map((path) => (React__default.createElement("path", { key: path, style: Object.assign(Object.assign({}, pathStyle), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.path), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.path, d: path, fill: customColor })));
     }
     return (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, style: Object.assign(Object.assign({}, svgStyle), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.svg), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.svg, "data-testid": testID || name }, icon));
 }

package/dist/InputNumberExperimental-cjs.js

@@ -2,6 +2,7 @@
 
 var React = require('react');
 var classnames = require('classnames');
+var ActivityIndicator = require('./ActivityIndicator-cjs.js');
 var Button = require('./Button-cjs.js');
 var Icon = require('./Icon-cjs.js');
 var useValueChanged = require('./useValueChanged-cjs.js');
@@ -607,10 +608,11 @@ const FieldDescription = /*#__PURE__*/React__namespace.forwardRef(function Field
 });
 if (process.env.NODE_ENV !== "production") FieldDescription.displayName = "FieldDescription";
 
-var styles = {"container":"_6HZLFIOZh4s-","inline":"_-6ndFYNKKaM-","wrapper":"c20czk-FSyY-","disabled":"_-2INirAxaU4-","small":"NsFBA5oqRAA-","large":"ExKqck-6xVs-","center":"UWiqNi57G8g-","right":"po25PZwJpe4-","inputWrapper":"k9dAO6d010o-","input":"D-PmE-l-hZU-","stepper":"t42w4ZDiDyI-","label":"Ggk3aaMcIJU-","hideLabel":"C7d6qmoZiKU-","affixLabel":"_4u1JHjUYvkY-","prefix":"rEWH41rUUEE-","suffix":"_4-iNl6jdfmM-","affixIcon":"_5-Iw-2c-wXk-","compoundAffix":"tZjZRRcAShY-","affixLabelText":"mbEcqyBQoEg-","stepperButton":"zzrCzYF-8u0-","belowField":"_0mcAZAtwQ2o-","description":"xxp2uGc-B6o-","fieldError":"q-WsOi6joGo-","spinning":"d0TEiLWObKU-"};
+var styles = {"container":"_6HZLFIOZh4s-","inline":"_-6ndFYNKKaM-","wrapper":"c20czk-FSyY-","disabled":"_-2INirAxaU4-","small":"NsFBA5oqRAA-","large":"ExKqck-6xVs-","center":"UWiqNi57G8g-","right":"po25PZwJpe4-","inputWrapper":"k9dAO6d010o-","input":"D-PmE-l-hZU-","stepper":"t42w4ZDiDyI-","loadingIndicator":"NLptJ1t9Pj4-","label":"Ggk3aaMcIJU-","hideLabel":"C7d6qmoZiKU-","affixLabel":"_4u1JHjUYvkY-","prefix":"rEWH41rUUEE-","suffix":"_4-iNl6jdfmM-","affixIcon":"_5-Iw-2c-wXk-","compoundAffix":"tZjZRRcAShY-","affixLabelText":"mbEcqyBQoEg-","stepperButton":"zzrCzYF-8u0-","belowField":"_0mcAZAtwQ2o-","description":"xxp2uGc-B6o-","fieldError":"q-WsOi6joGo-","spinning":"d0TEiLWObKU-"};
 
 /**
- * Preserve user-typed decimals on blur. Without `maximumFractionDigits: 20`,
+ * Default formatting used only when the consumer does not pass `format`.
+ * Preserves user-typed decimals on blur: without `maximumFractionDigits: 20`,
  * `Intl.NumberFormat` rounds to 3 digits and silently truncates input.
  */
 const DEFAULT_FORMAT = {
@@ -627,7 +629,7 @@ function useInputNumberExperimentalContext(consumer) {
 }
 // eslint-disable-next-line max-statements
 function InputNumberExperimentalInternal(props, ref) {
-    const { align, autocomplete, children, description, disabled, error, id: idProp, inline, invalid, keyboard, max, maxLength, min, name, onBlur, onChange, onEnter, onFocus, onKeyDown, onKeyUp, onValueChange, placeholder, prefix, readonly, showMiniLabel = true, size = "default", suffix, value, } = props;
+    const { align, autocomplete, children, description, disabled, error, format, id: idProp, inline, invalid, keyboard, loading, max, maxLength, min, name, onBlur, onChange, onEnter, onFocus, onKeyDown, onKeyUp, onValueChange, placeholder, prefix, readonly, showMiniLabel = true, size = "default", suffix, value, } = props;
     const generatedId = React.useId();
     const id = idProp !== null && idProp !== void 0 ? idProp : generatedId;
     const innerInputRef = React.useRef(null);
@@ -672,6 +674,7 @@ function InputNumberExperimentalInternal(props, ref) {
         id,
         innerInputRef,
         keyboard,
+        loading,
         maxLength,
         onBlur,
         onFocus,
@@ -688,6 +691,7 @@ function InputNumberExperimentalInternal(props, ref) {
         disabled,
         id,
         keyboard,
+        loading,
         maxLength,
         onBlur,
         onFocus,
@@ -702,7 +706,7 @@ function InputNumberExperimentalInternal(props, ref) {
     const fieldInvalid = invalid || Boolean(error);
     return (React.createElement(FieldRoot, { className: classnames(styles.container, inline && styles.inline), disabled: disabled, invalid: fieldInvalid, name: name },
         React.createElement(InputNumberExperimentalContext.Provider, { value: contextValue },
-            React.createElement(NumberFieldInput.NumberFieldRoot, { allowOutOfRange: true, format: DEFAULT_FORMAT, id: id, max: max, min: min, onValueChange: handleValueChange, onValueCommitted: handleValueCommitted, readOnly: readonly, value: value !== null && value !== void 0 ? value : null },
+            React.createElement(NumberFieldInput.NumberFieldRoot, { allowOutOfRange: true, format: format !== null && format !== void 0 ? format : DEFAULT_FORMAT, id: id, max: max, min: min, onValueChange: handleValueChange, onValueCommitted: handleValueCommitted, readOnly: readonly, value: value !== null && value !== void 0 ? value : null },
                 React.createElement(NumberFieldInput.NumberFieldGroup, { className: classnames(styles.wrapper, align && styles[align], disabled && styles.disabled, size !== "default" && styles[size]) }, isUsingCompoundPattern
                     ? children
                     : renderDefaultComposition({ prefix, suffix, size })))),
@@ -723,9 +727,10 @@ function InputNumberExperimentalInputCompound(props = {}) {
     const ctx = useInputNumberExperimentalContext("Input");
     const labelText = (_a = props.placeholder) !== null && _a !== void 0 ? _a : ctx.placeholder;
     return (React.createElement("div", { className: classnames(styles.inputWrapper, !ctx.showMiniLabel && styles.hideLabel, ctx.size !== "default" && styles[ctx.size], ctx.disabled && styles.disabled) },
-        React.createElement(NumberFieldInput.NumberFieldInput, { autoComplete: resolveAutocomplete(ctx.autocomplete), className: styles.input, inputMode: ctx.keyboard, maxLength: ctx.maxLength, onBlur: ctx.onBlur, onFocus: ctx.onFocus, onKeyDown: ctx.onKeyDown, onKeyUp: ctx.onKeyUp, placeholder: " ", ref: ctx.innerInputRef }),
+        React.createElement(NumberFieldInput.NumberFieldInput, { "aria-busy": ctx.loading || undefined, autoComplete: resolveAutocomplete(ctx.autocomplete), className: styles.input, inputMode: ctx.keyboard, maxLength: ctx.maxLength, onBlur: ctx.onBlur, onFocus: ctx.onFocus, onKeyDown: ctx.onKeyDown, onKeyUp: ctx.onKeyUp, placeholder: " ", ref: ctx.innerInputRef }),
         labelText && (React.createElement("label", { className: styles.label, htmlFor: ctx.id }, labelText)),
-        !ctx.compoundLayout && React.createElement(InputNumberExperimentalStepperCompound, null)));
+        ctx.loading ? (React.createElement("div", { className: styles.loadingIndicator },
+            React.createElement(ActivityIndicator.ActivityIndicator, { size: "small" }))) : (!ctx.compoundLayout && React.createElement(InputNumberExperimentalStepperCompound, null))));
 }
 function InputNumberExperimentalAffixCompound({ variation, label, icon, onClick, ariaLabel, }) {
     const ctx = useInputNumberExperimentalContext("Affix");
@@ -739,7 +744,9 @@ function InputNumberExperimentalAffixCompound({ variation, label, icon, onClick,
 function InputNumberExperimentalStepperCompound({ incrementLabel, decrementLabel, } = {}) {
     var _a;
     const ctx = useInputNumberExperimentalContext("Stepper");
-    if (!ctx.showStepper) {
+    // Hidden while loading; the loading indicator renders in the input wrapper
+    // instead, independent of where this stepper is composed.
+    if (ctx.loading || !ctx.showStepper) {
         return null;
     }
     const labelTarget = (_a = ctx.placeholder) !== null && _a !== void 0 ? _a : "value";

package/dist/InputNumberExperimental-es.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import React__default, { createContext, forwardRef, useId, useRef, useImperativeHandle, useCallback, useMemo, useContext } from 'react';
 import classnames from 'classnames';
+import { A as ActivityIndicator } from './ActivityIndicator-es.js';
 import { B as Button } from './Button-es.js';
 import { I as Icon } from './Icon-es.js';
 import { a as useStableCallback, c as useTimeout, t as transitionStatusMapping, d as useTransitionStatus, u as useIsoLayoutEffect, e as useOpenChangeComplete } from './useValueChanged-es.js';
@@ -587,10 +588,11 @@ const FieldDescription = /*#__PURE__*/React.forwardRef(function FieldDescription
 });
 if (process.env.NODE_ENV !== "production") FieldDescription.displayName = "FieldDescription";
 
-var styles = {"container":"_6HZLFIOZh4s-","inline":"_-6ndFYNKKaM-","wrapper":"c20czk-FSyY-","disabled":"_-2INirAxaU4-","small":"NsFBA5oqRAA-","large":"ExKqck-6xVs-","center":"UWiqNi57G8g-","right":"po25PZwJpe4-","inputWrapper":"k9dAO6d010o-","input":"D-PmE-l-hZU-","stepper":"t42w4ZDiDyI-","label":"Ggk3aaMcIJU-","hideLabel":"C7d6qmoZiKU-","affixLabel":"_4u1JHjUYvkY-","prefix":"rEWH41rUUEE-","suffix":"_4-iNl6jdfmM-","affixIcon":"_5-Iw-2c-wXk-","compoundAffix":"tZjZRRcAShY-","affixLabelText":"mbEcqyBQoEg-","stepperButton":"zzrCzYF-8u0-","belowField":"_0mcAZAtwQ2o-","description":"xxp2uGc-B6o-","fieldError":"q-WsOi6joGo-","spinning":"d0TEiLWObKU-"};
+var styles = {"container":"_6HZLFIOZh4s-","inline":"_-6ndFYNKKaM-","wrapper":"c20czk-FSyY-","disabled":"_-2INirAxaU4-","small":"NsFBA5oqRAA-","large":"ExKqck-6xVs-","center":"UWiqNi57G8g-","right":"po25PZwJpe4-","inputWrapper":"k9dAO6d010o-","input":"D-PmE-l-hZU-","stepper":"t42w4ZDiDyI-","loadingIndicator":"NLptJ1t9Pj4-","label":"Ggk3aaMcIJU-","hideLabel":"C7d6qmoZiKU-","affixLabel":"_4u1JHjUYvkY-","prefix":"rEWH41rUUEE-","suffix":"_4-iNl6jdfmM-","affixIcon":"_5-Iw-2c-wXk-","compoundAffix":"tZjZRRcAShY-","affixLabelText":"mbEcqyBQoEg-","stepperButton":"zzrCzYF-8u0-","belowField":"_0mcAZAtwQ2o-","description":"xxp2uGc-B6o-","fieldError":"q-WsOi6joGo-","spinning":"d0TEiLWObKU-"};
 
 /**
- * Preserve user-typed decimals on blur. Without `maximumFractionDigits: 20`,
+ * Default formatting used only when the consumer does not pass `format`.
+ * Preserves user-typed decimals on blur: without `maximumFractionDigits: 20`,
  * `Intl.NumberFormat` rounds to 3 digits and silently truncates input.
  */
 const DEFAULT_FORMAT = {
@@ -607,7 +609,7 @@ function useInputNumberExperimentalContext(consumer) {
 }
 // eslint-disable-next-line max-statements
 function InputNumberExperimentalInternal(props, ref) {
-    const { align, autocomplete, children, description, disabled, error, id: idProp, inline, invalid, keyboard, max, maxLength, min, name, onBlur, onChange, onEnter, onFocus, onKeyDown, onKeyUp, onValueChange, placeholder, prefix, readonly, showMiniLabel = true, size = "default", suffix, value, } = props;
+    const { align, autocomplete, children, description, disabled, error, format, id: idProp, inline, invalid, keyboard, loading, max, maxLength, min, name, onBlur, onChange, onEnter, onFocus, onKeyDown, onKeyUp, onValueChange, placeholder, prefix, readonly, showMiniLabel = true, size = "default", suffix, value, } = props;
     const generatedId = useId();
     const id = idProp !== null && idProp !== void 0 ? idProp : generatedId;
     const innerInputRef = useRef(null);
@@ -652,6 +654,7 @@ function InputNumberExperimentalInternal(props, ref) {
         id,
         innerInputRef,
         keyboard,
+        loading,
         maxLength,
         onBlur,
         onFocus,
@@ -668,6 +671,7 @@ function InputNumberExperimentalInternal(props, ref) {
         disabled,
         id,
         keyboard,
+        loading,
         maxLength,
         onBlur,
         onFocus,
@@ -682,7 +686,7 @@ function InputNumberExperimentalInternal(props, ref) {
     const fieldInvalid = invalid || Boolean(error);
     return (React__default.createElement(FieldRoot, { className: classnames(styles.container, inline && styles.inline), disabled: disabled, invalid: fieldInvalid, name: name },
         React__default.createElement(InputNumberExperimentalContext.Provider, { value: contextValue },
-            React__default.createElement(NumberFieldRoot, { allowOutOfRange: true, format: DEFAULT_FORMAT, id: id, max: max, min: min, onValueChange: handleValueChange, onValueCommitted: handleValueCommitted, readOnly: readonly, value: value !== null && value !== void 0 ? value : null },
+            React__default.createElement(NumberFieldRoot, { allowOutOfRange: true, format: format !== null && format !== void 0 ? format : DEFAULT_FORMAT, id: id, max: max, min: min, onValueChange: handleValueChange, onValueCommitted: handleValueCommitted, readOnly: readonly, value: value !== null && value !== void 0 ? value : null },
                 React__default.createElement(NumberFieldGroup, { className: classnames(styles.wrapper, align && styles[align], disabled && styles.disabled, size !== "default" && styles[size]) }, isUsingCompoundPattern
                     ? children
                     : renderDefaultComposition({ prefix, suffix, size })))),
@@ -703,9 +707,10 @@ function InputNumberExperimentalInputCompound(props = {}) {
     const ctx = useInputNumberExperimentalContext("Input");
     const labelText = (_a = props.placeholder) !== null && _a !== void 0 ? _a : ctx.placeholder;
     return (React__default.createElement("div", { className: classnames(styles.inputWrapper, !ctx.showMiniLabel && styles.hideLabel, ctx.size !== "default" && styles[ctx.size], ctx.disabled && styles.disabled) },
-        React__default.createElement(NumberFieldInput, { autoComplete: resolveAutocomplete(ctx.autocomplete), className: styles.input, inputMode: ctx.keyboard, maxLength: ctx.maxLength, onBlur: ctx.onBlur, onFocus: ctx.onFocus, onKeyDown: ctx.onKeyDown, onKeyUp: ctx.onKeyUp, placeholder: " ", ref: ctx.innerInputRef }),
+        React__default.createElement(NumberFieldInput, { "aria-busy": ctx.loading || undefined, autoComplete: resolveAutocomplete(ctx.autocomplete), className: styles.input, inputMode: ctx.keyboard, maxLength: ctx.maxLength, onBlur: ctx.onBlur, onFocus: ctx.onFocus, onKeyDown: ctx.onKeyDown, onKeyUp: ctx.onKeyUp, placeholder: " ", ref: ctx.innerInputRef }),
         labelText && (React__default.createElement("label", { className: styles.label, htmlFor: ctx.id }, labelText)),
-        !ctx.compoundLayout && React__default.createElement(InputNumberExperimentalStepperCompound, null)));
+        ctx.loading ? (React__default.createElement("div", { className: styles.loadingIndicator },
+            React__default.createElement(ActivityIndicator, { size: "small" }))) : (!ctx.compoundLayout && React__default.createElement(InputNumberExperimentalStepperCompound, null))));
 }
 function InputNumberExperimentalAffixCompound({ variation, label, icon, onClick, ariaLabel, }) {
     const ctx = useInputNumberExperimentalContext("Affix");
@@ -719,7 +724,9 @@ function InputNumberExperimentalAffixCompound({ variation, label, icon, onClick,
 function InputNumberExperimentalStepperCompound({ incrementLabel, decrementLabel, } = {}) {
     var _a;
     const ctx = useInputNumberExperimentalContext("Stepper");
-    if (!ctx.showStepper) {
+    // Hidden while loading; the loading indicator renders in the input wrapper
+    // instead, independent of where this stepper is composed.
+    if (ctx.loading || !ctx.showStepper) {
         return null;
     }
     const labelTarget = (_a = ctx.placeholder) !== null && _a !== void 0 ? _a : "value";

package/dist/primitives/InputNumberExperimental/index.cjs

@@ -3,6 +3,7 @@
 var InputNumberExperimental = require('../../InputNumberExperimental-cjs.js');
 require('react');
 require('classnames');
+require('../../ActivityIndicator-cjs.js');
 require('../../Button-cjs.js');
 require('../../tslib.es6-cjs.js');
 require('react-router-dom');

package/dist/primitives/InputNumberExperimental/index.mjs

@@ -1,6 +1,7 @@
 export { I as InputNumberExperimental } from '../../InputNumberExperimental-es.js';
 import 'react';
 import 'classnames';
+import '../../ActivityIndicator-es.js';
 import '../../Button-es.js';
 import '../../tslib.es6-es.js';
 import 'react-router-dom';

package/dist/primitives/InputNumberExperimental/types.d.ts

@@ -52,12 +52,25 @@ export interface InputNumberExperimentalProps {
     readonly disabled?: boolean;
     /** When set, renders a styled error message below the field. */
     readonly error?: string;
+    /**
+     * Number formatting for the displayed value, forwarded verbatim to Base UI
+     * `NumberField`'s native `format`. Accepts standard `Intl.NumberFormatOptions`
+     * (e.g. `{ style: "currency", currency: "USD" }` or `{ maximumFractionDigits: 2 }`).
+     * When omitted, typed decimals are preserved without premature rounding.
+     */
+    readonly format?: Intl.NumberFormatOptions;
     readonly id?: string;
     /** Shrink-wrap the field to its content (auto width). */
     readonly inline?: boolean;
     /** Style the error border without showing an error message. */
     readonly invalid?: boolean;
     readonly keyboard?: "numeric" | "decimal";
+    /**
+     * Shows a non-blocking loading indicator in the stepper's slot to signal
+     * background activity. The field stays editable while loading (use `readonly`
+     * or `disabled` to lock it); the stepper is hidden so the two never overlap.
+     */
+    readonly loading?: boolean;
     readonly max?: number;
     readonly maxLength?: number;
     readonly min?: number;

package/dist/primitives/index.cjs

@@ -19,6 +19,7 @@ require('../Text-cjs.js');
 require('../Typography-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
+require('../ActivityIndicator-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
 require('../NumberFieldInput-cjs.js');

package/dist/primitives/index.mjs

@@ -17,6 +17,7 @@ import '../Text-es.js';
 import '../Typography-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
+import '../ActivityIndicator-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
 import '../NumberFieldInput-es.js';

package/dist/styles.css

@@ -4269,7 +4269,8 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
  * enough room for multi-digit values to display.
  */
 
-.k9dAO6d010o-:has(> .t42w4ZDiDyI-) .D-PmE-l-hZU- {
+.k9dAO6d010o-:has(> .t42w4ZDiDyI-) .D-PmE-l-hZU-,
+.k9dAO6d010o-:has(> .NLptJ1t9Pj4-) .D-PmE-l-hZU- {
   padding-right: 2px;
   padding-right: var(--space-smallest);
 }
@@ -4456,8 +4457,9 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 
 /**
  * Compound `<.Affix>`: a single flex sibling of .inputWrapper that bundles
- * icon and/or label inline. Visually slightly less integrated than the default
- * (split) layout but lets users compose freely.
+ * icon and/or label inline. Uses the field's vertical padding so it tracks the
+ * floating mini-label and lines up with the typed value (and the loading
+ * indicator), matching the default split composition.
  */
 
 .tZjZRRcAShY- {
@@ -4467,8 +4469,10 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
       align-items: center;
   gap: 4px;
   gap: var(--space-smaller);
-  padding: 0 16px;
-  padding: 0 var(--space-base);
+  padding: var(--field--padding-top) 16px
+    var(--field--padding-bottom);
+  padding: var(--field--padding-top) var(--space-base)
+    var(--field--padding-bottom);
   color: hsl(197, 21%, 36%);
   color: var(--color-text--secondary);
   font-size: 14px;
@@ -4494,6 +4498,36 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
       flex: 0 0 auto;
 }
 
+/*
+ * Loading indicator: occupies the stepper's slot, always visible (no hover
+ * reveal), vertically centered in the field to match InputText's spinner.
+ * The default right padding is just a small gap from a following suffix.
+ */
+
+.NLptJ1t9Pj4- {
+  display: -ms-flexbox;
+  display: flex;
+  z-index: calc(var(--field--base-elevation) + 1);
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+  padding-right: 4px;
+  padding-right: var(--space-smaller);
+}
+
+/*
+ * When the indicator sits flush to the field's right edge (no suffix follows),
+ * inset it by the field's right padding so it matches InputText's spinner
+ * spacing instead of hugging the border.
+ */
+
+.c20czk-FSyY- > .k9dAO6d010o-:last-child > .NLptJ1t9Pj4- {
+  padding-right: var(--field--padding-right);
+}
+
 /* Default mode: stepper lives inside .inputWrapper. Reveal on local hover/focus. */
 
 .k9dAO6d010o-:hover .t42w4ZDiDyI-,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "8.9.1",
+  "version": "8.11.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -556,5 +556,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "2dd2b2d127e9e7e00f8db56c9a5c8ab05344e128"
+  "gitHead": "b4fe4a75ec2c46f3b252f974a73631e4c7669433"
 }