improvement(emcn): drop the number-stepper reset for plain text numeric fields

The stepper was suppressed with a vendor-pseudo-element class string inside
`ChipInput`. Removing browser chrome with custom CSS is the wrong end of the
problem: the fields never wanted a stepper in the first place.

They are text fields with a numeric input mode now — the choice the retry
settings field already documents ("the native spinner is all that buys, and it
does not fit the field chrome"). No CSS, the numeric keypad is unchanged, and
`ChipModalField` gained an `inputMode` prop so a modal field can say the same
thing without asking for the stepper.

This also fixes a real defect in the credit-limit field. A number input reports
`''` for anything the browser considers invalid, so a typo arrived
indistinguishable from a cleared field and saved as "no limit"; as text it reaches
the `Number.isInteger` check and is refused. The usage-limit field's `min`
attribute went the same way — the minimum is enforced on commit, where it can
explain itself, rather than silently by the browser.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/settings/components/billing/components/usage-limit-field/usage-limit-field.tsx

@@ -121,10 +121,14 @@ export function UsageLimitField({
 
   return (
     <SettingsSection label='Usage limit' headerAccessory={USAGE_LIMIT_INFO}>
+      {/*
+        Text with a numeric input mode rather than `type='number'`: the native stepper
+        is all that type buys and it does not fit the chip chrome. The minimum is
+        enforced on commit below, where it can explain itself, rather than by a `min`
+        attribute the browser enforces silently.
+      */}
       <ChipInput
-        type='number'
         inputMode='numeric'
-        min={dollarsToCredits(minimumLimit)}
         value={draft}
         onChange={(e) => setDraft(e.target.value)}
         placeholder={

apps/sim/app/workspace/[workspaceId]/settings/components/manage-credits-modal/manage-credits-modal.tsx

@@ -109,9 +109,17 @@ export function ManageCreditsModal({
           value={isLoading ? 'Loading…' : creditsUsed}
           copyLabel='Copy credits used'
         />
+        {/*
+          Text with a numeric input mode, not `inputType='number'` — the same choice
+          the retry settings field documents. The native stepper is all the number
+          type buys, and it paints browser chrome inside a flat chip surface. It also
+          reports `''` for anything the browser considers invalid, so a typo arrived
+          here indistinguishable from a cleared field and saved as "no limit"; as text
+          it reaches the `Number.isInteger` check below and is refused.
+        */}
         <ChipModalField
           type='input'
-          inputType='number'
+          inputMode='numeric'
           title={
             <span className='inline-flex items-center gap-1.5'>
               Credit limit

apps/sim/ee/session-policy/components/session-policy-settings.tsx

@@ -40,7 +40,6 @@ function HourField({ id, title, hint, value, onChange }: HourFieldProps) {
       </Label>
       <ChipInput
         id={id}
-        type='number'
         inputMode='numeric'
         value={value}
         onChange={(event) => onChange(event.target.value)}

packages/emcn/src/components/chip-input/chip-input.test.tsx

@@ -9,12 +9,12 @@ import { ChipInput } from './chip-input'
 let root: Root | null = null
 let container: HTMLDivElement | null = null
 
-function mount(type?: string): HTMLInputElement {
+function mount(): HTMLInputElement {
   ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
   container = document.createElement('div')
   document.body.appendChild(container)
   root = createRoot(container)
-  act(() => root?.render(<ChipInput aria-label='Search' type={type} />))
+  act(() => root?.render(<ChipInput aria-label='Search' />))
 
   const input = container.querySelector<HTMLInputElement>('input')
   if (!input) throw new Error('ChipInput did not render an input')
@@ -35,21 +35,4 @@ describe('ChipInput', () => {
     expect(input.className).toContain('-ml-1')
     expect(input.className).toContain('indent-1')
   })
-
-  /**
-   * A chip field owns its chrome, and the browser's number stepper paints a bordered
-   * double-arrow inside it that belongs to no design token. Suppressing it lives on
-   * the component so no caller re-derives the three vendor rules by hand.
-   */
-  it('suppresses the native number spinner on a number field', () => {
-    const input = mount('number')
-
-    expect(input.className).toContain('[appearance:textfield]')
-    expect(input.className).toContain('[&::-webkit-inner-spin-button]:appearance-none')
-    expect(input.className).toContain('[&::-webkit-outer-spin-button]:appearance-none')
-  })
-
-  it('leaves a text field untouched, since it has no stepper to hide', () => {
-    expect(mount().className).not.toContain('[appearance:textfield]')
-  })
 })

packages/emcn/src/components/chip-input/chip-input.tsx

@@ -30,21 +30,6 @@ import * as React from 'react'
 import { cn } from '../../lib/cn'
 import { chipFieldSurfaceClass, chipFieldTextClass, chipGeometryClass } from '../chip/chip-chrome'
 
-/**
- * Suppresses the native number spinner.
- *
- * A `type='number'` field is still a chip field: it owns a flat 30px surface with
- * no focus ring, and the browser's stepper paints its own chrome inside it —
- * a bordered double-arrow that belongs to no design token and shifts the value's
- * right edge on hover. Removing it belongs to the component rather than to every
- * caller, or each one re-derives the same three vendor rules by hand.
- *
- * `appearance: textfield` covers Firefox; the WebKit pseudo-elements cover
- * Chrome and Safari, which ignore it.
- */
-const NUMBER_SPINNER_RESET =
-  '[appearance:textfield] [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none'
-
 type ChipInputIcon = React.ComponentType<{ className?: string }>
 
 export interface ChipInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
@@ -96,7 +81,6 @@ export const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
         className={cn(
           '-ml-1 h-full w-full bg-transparent indent-1 disabled:cursor-not-allowed',
           chipFieldTextClass,
-          type === 'number' && NUMBER_SPINNER_RESET,
           inputClassName
         )}
         {...props}

packages/emcn/src/components/chip-modal/chip-modal.tsx

@@ -556,6 +556,16 @@ interface ChipModalInputFieldProps extends ChipModalFieldBaseProps, ChipModalSin
    * native password input. See {@link ChipModalPasswordControl}.
    */
   inputType?: 'text' | 'password' | 'url' | 'tel' | 'search' | 'number'
+  /**
+   * Virtual-keyboard hint, independent of {@link inputType}.
+   *
+   * A field holding a number usually wants `inputMode='numeric'` on a `'text'` input
+   * rather than `inputType='number'`: the numeric type renders the browser's stepper,
+   * which paints its own chrome inside a flat chip surface, and reports `''` for any
+   * value it considers invalid — so the caller cannot tell an empty field from a
+   * rejected keystroke.
+   */
+  inputMode?: 'numeric' | 'decimal' | 'tel'
   /**
    * Renders the value in the monospace stack (`font-mono`). Use for
    * code-like values (identifiers, keys, snippets) where the proportional
@@ -814,6 +824,7 @@ function renderChipModalControl(
         <ChipInput
           id={id}
           type={props.type === 'email' ? 'email' : (props.inputType ?? 'text')}
+          inputMode={props.type === 'input' ? props.inputMode : undefined}
           value={props.value}
           onChange={(event) => props.onChange(event.target.value)}
           onKeyDown={onKeyDown}