@flikk/ui 1.0.0-beta.32 → 1.0.0-beta.33

package/dist/components/forms/InputCounter/InputCounter.js

@@ -1,14 +1,16 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useId, useMemo, useEffect, useCallback } from 'react';
+import React__default, { useId, useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
 import { inputCounterTheme } from './InputCounter.theme.js';
 import { Button } from '../../core/Button/Button.js';
-import { SlidingNumber } from '../../core/SlidingNumber/SlidingNumber.js';
+import { SLIDING_NUMBER_CHAR_WIDTH_EM, SlidingNumber } from '../../core/SlidingNumber/SlidingNumber.js';
 import { cn } from '../../../utils/cn.js';
 import { Minus, Plus } from '@phosphor-icons/react';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 
+/** Lands a typed value in place instead of rolling the digits to it. */
+const INSTANT_TRANSITION = { duration: 0 };
 /**
  * InputCounter component with animated number display
  *
@@ -35,12 +37,44 @@ import { FormLabel } from '../FormLabel/FormLabel.js';
  * );
  * ```
  */
-const InputCounter = React__default.forwardRef(({ value, onChange, state = "default", label, helperText, errorMessage, min, max, step = 1, disabled = false, decimalPlaces, formatNumber = (n) => n.toString(), className, buttonProps, theme, transition = { type: "spring", bounce: 0, stiffness: 300, damping: 30 }, "aria-label": ariaLabel = "Counter", onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...props }, ref) => {
+const InputCounter = React__default.forwardRef(({ value, onChange, size = "md", editable = true, state = "default", label, helperText, errorMessage, min, max, step = 1, disabled = false, decimalPlaces, className, buttonProps, theme, transition = { type: "spring", bounce: 0, stiffness: 300, damping: 30 }, "aria-label": ariaLabel = "Counter", onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...props }, ref) => {
     const shouldReduceMotion = useReducedMotion();
     const shouldDisableAnimations = !!shouldReduceMotion;
     const generatedId = useId();
     const isDisabled = state === "disabled" || disabled;
     const isInvalid = state === "invalid";
+    // --- Manual entry ---------------------------------------------------
+    // Clicking the number swaps SlidingNumber for a real field. Typing is
+    // free-form (no clamping, no onChange) so "5" on the way to "50" under
+    // min=10 isn't eaten; the value is parsed, clamped and emitted only on
+    // commit. `editSession` guards the commit path: Enter and Escape both
+    // unmount the field, which fires a blur that must not commit a second
+    // time (or re-commit a value Escape just discarded).
+    const [isEditing, setIsEditing] = useState(false);
+    const [draft, setDraft] = useState("");
+    /**
+     * True when the value on screen got there by being TYPED. The odometer roll
+     * is feedback for stepping — it shows the value travelling by one step. A
+     * number entered outright never travelled, so rolling 4 → 9 through 5, 6, 7,
+     * 8 reads as the control second-guessing the entry; it should simply appear.
+     *
+     * Carried as state rather than a remount: remounting SlidingNumber makes it
+     * animate from zero instead (a motion element without `initial` animates ON
+     * MOUNT), which is the same roll in a worse costume. Every emit declares
+     * which kind it is via `emitValue`, so an async parent that applies the value
+     * a tick later still lands it instantly, and the next step still animates.
+     */
+    const [landsInstantly, setLandsInstantly] = useState(false);
+    const fieldRef = useRef(null);
+    const containerRef = useRef(null);
+    const editSessionRef = useRef("idle");
+    const setContainerRef = useCallback((node) => {
+        containerRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
     // Auto-detect decimal places from step if not explicitly provided
     const autoDecimalPlaces = useMemo(() => {
         if (decimalPlaces !== undefined)
@@ -58,6 +92,16 @@ const InputCounter = React__default.forwardRef(({ value, onChange, state = "defa
         ...inputCounterTheme,
         ...theme,
     }), [theme]);
+    /**
+     * The single emit path. Every value change declares whether it was typed
+     * (lands instantly) or stepped (rolls), so the flag can never drift out of
+     * sync with what is on screen.
+     */
+    const emitValue = useCallback((next, options) => {
+        var _a;
+        setLandsInstantly((_a = options === null || options === void 0 ? void 0 : options.typed) !== null && _a !== void 0 ? _a : false);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    }, [onChange]);
     // Auto-clamp value to min/max bounds when they change
     useEffect(() => {
         let clampedValue = value;
@@ -73,9 +117,9 @@ const InputCounter = React__default.forwardRef(({ value, onChange, state = "defa
             needsUpdate = true;
         }
         if (needsUpdate) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(clampedValue);
+            emitValue(clampedValue);
         }
-    }, [min, max, value, onChange]);
+    }, [min, max, value, emitValue]);
     // Handle increment
     const handleIncrement = useCallback(() => {
         if (isDisabled)
@@ -91,8 +135,8 @@ const InputCounter = React__default.forwardRef(({ value, onChange, state = "defa
             }
             return;
         }
-        onChange === null || onChange === void 0 ? void 0 : onChange(roundedValue);
-    }, [value, step, max, isDisabled, onChange]);
+        emitValue(roundedValue);
+    }, [value, step, max, isDisabled, emitValue]);
     // Handle decrement
     const handleDecrement = useCallback(() => {
         if (isDisabled)
@@ -108,8 +152,113 @@ const InputCounter = React__default.forwardRef(({ value, onChange, state = "defa
             }
             return;
         }
-        onChange === null || onChange === void 0 ? void 0 : onChange(roundedValue);
-    }, [value, step, min, isDisabled, onChange]);
+        emitValue(roundedValue);
+    }, [value, step, min, isDisabled, emitValue]);
+    const canEdit = editable && !isDisabled;
+    // --- Value slot width -----------------------------------------------
+    // SlidingNumber gives every character (digit, `-`, `.`) the same fixed em
+    // box, so an exact width can be reserved from a character COUNT without
+    // measuring. Both states are laid into that one box, which is what keeps
+    // clicking the number from resizing the control: the edit field used to
+    // size itself via the `size` attribute — the browser's average character
+    // width — and landed 1–3px wider than the number it replaced, a gap the
+    // root's `layout` animation then made visible as a wobble.
+    const formatChars = useCallback((n) => (autoDecimalPlaces > 0
+        ? Number(n).toFixed(autoDecimalPlaces)
+        : String(Math.round(n))).length, [autoDecimalPlaces]);
+    // Bounded counters reserve room for their widest legal value up front, so
+    // stepping 9 → 10 doesn't resize the box either.
+    //
+    // 🔴 The floor is TWO characters, not one, and it is load-bearing at `sm`:
+    // the steppers there are undersized for WCAG 2.2 SC 2.5.8 and clear it via
+    // the spacing exception, which is measured to this slot's centre (it is a
+    // click-to-edit target). A 1-character slot pulls those centres to 21.6px
+    // and fails; two characters keeps them at 25.2px. See InputCounter.theme.ts.
+    const slotChars = useMemo(() => {
+        let chars = Math.max(formatChars(value), 2);
+        if (min !== undefined)
+            chars = Math.max(chars, formatChars(min));
+        if (max !== undefined)
+            chars = Math.max(chars, formatChars(max));
+        if (isEditing)
+            chars = Math.max(chars, draft.length);
+        return chars;
+    }, [formatChars, value, min, max, isEditing, draft]);
+    /**
+     * A draft that parses to a number outside min/max. Typing stays free-form —
+     * clamping mid-edit would eat the `5` of `50` under `min={10}` — so the
+     * counter instead shows the shared invalid edge the moment the value is out
+     * of range, and clamps on commit. Unparseable input isn't "out of range";
+     * it simply reverts.
+     */
+    const draftOutOfRange = useMemo(() => {
+        if (!isEditing)
+            return false;
+        const trimmed = draft.trim();
+        if (trimmed === "")
+            return false;
+        const parsed = Number(trimmed);
+        if (!Number.isFinite(parsed))
+            return false;
+        return ((min !== undefined && parsed < min) || (max !== undefined && parsed > max));
+    }, [isEditing, draft, min, max]);
+    const beginEdit = useCallback(() => {
+        if (!canEdit)
+            return;
+        editSessionRef.current = "active";
+        setDraft(autoDecimalPlaces > 0 ? value.toFixed(autoDecimalPlaces) : String(value));
+        setIsEditing(true);
+    }, [canEdit, value, autoDecimalPlaces]);
+    /** Focus and select the field once it exists, so typing replaces. */
+    useEffect(() => {
+        if (!isEditing)
+            return;
+        const field = fieldRef.current;
+        if (!field)
+            return;
+        field.focus();
+        field.select();
+    }, [isEditing]);
+    const endEdit = useCallback((commit, refocusContainer) => {
+        var _a;
+        if (editSessionRef.current !== "active")
+            return;
+        editSessionRef.current = "idle";
+        // Every exit from an edit session lands instantly, not just a changed
+        // value: the display is MOUNTED FRESH when the field unmounts, and a
+        // motion element without `initial` animates on mount — so without this,
+        // even Escape would roll the untouched number up from zero.
+        setLandsInstantly(true);
+        setIsEditing(false);
+        if (refocusContainer)
+            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        if (!commit)
+            return;
+        const trimmed = draft.trim();
+        if (trimmed === "")
+            return; // empty is a revert, not a zero
+        const parsed = Number(trimmed);
+        if (!Number.isFinite(parsed))
+            return; // unparseable reverts
+        let next = Number(parsed.toFixed(autoDecimalPlaces));
+        if (min !== undefined && next < min)
+            next = min;
+        if (max !== undefined && next > max)
+            next = max;
+        // §9: never emit a change the user didn't produce.
+        if (next !== value)
+            emitValue(next, { typed: true });
+    }, [draft, autoDecimalPlaces, min, max, value, emitValue]);
+    const handleFieldKeyDown = useCallback((event) => {
+        if (event.key === "Enter") {
+            event.preventDefault();
+            endEdit(true, true);
+        }
+        else if (event.key === "Escape") {
+            event.preventDefault();
+            endEdit(false, true);
+        }
+    }, [endEdit]);
     // Keyboard support — scoped to THIS counter instance via onKeyDown on the
     // focusable root. Because the root is focusable (tabIndex 0) and its child
     // buttons bubble keydown to it, this fires only when focus is within THIS
@@ -117,7 +266,20 @@ const InputCounter = React__default.forwardRef(({ value, onChange, state = "defa
     const handleKeyDown = useCallback((event) => {
         if (isDisabled)
             return;
+        // While the edit field is open its keys belong to it — arrows move the
+        // caret, they must not step the counter.
+        if (isEditing)
+            return;
         switch (event.key) {
+            // Enter opens the edit field, so manual entry is reachable without a
+            // mouse. Field-level keys are handled by the field itself; this
+            // handler bails while editing (see the isEditing guard above).
+            case "Enter":
+                if (canEdit) {
+                    event.preventDefault();
+                    beginEdit();
+                }
+                break;
             case "ArrowUp":
                 event.preventDefault();
                 handleIncrement();
@@ -130,10 +292,10 @@ const InputCounter = React__default.forwardRef(({ value, onChange, state = "defa
                 event.preventDefault();
                 const pageUpValue = value + step * 10;
                 if (max === undefined || pageUpValue <= max) {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(pageUpValue);
+                    emitValue(pageUpValue);
                 }
                 else if (max !== undefined) {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(max);
+                    emitValue(max);
                 }
                 break;
             }
@@ -141,21 +303,24 @@ const InputCounter = React__default.forwardRef(({ value, onChange, state = "defa
                 event.preventDefault();
                 const pageDownValue = value - step * 10;
                 if (min === undefined || pageDownValue >= min) {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(pageDownValue);
+                    emitValue(pageDownValue);
                 }
                 else if (min !== undefined) {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(min);
+                    emitValue(min);
                 }
                 break;
             }
         }
     }, [
+        isEditing,
+        canEdit,
+        beginEdit,
         value,
         step,
         min,
         max,
         isDisabled,
-        onChange,
+        emitValue,
         handleIncrement,
         handleDecrement,
     ]);
@@ -166,7 +331,7 @@ const InputCounter = React__default.forwardRef(({ value, onChange, state = "defa
     // errorMessage takes precedence over helperText while invalid; helperText
     // behavior is unchanged otherwise.
     const displayedMessage = isInvalid && errorMessage ? errorMessage : helperText;
-    return (jsxs("div", { className: "flex flex-col", children: [label && (typeof label === "string" ? (jsx(FormLabel, { htmlFor: `${generatedId}-counter`, state: isDisabled ? "disabled" : isInvalid ? "invalid" : "default", className: "mb-1.5", children: label })) : (jsx("div", { className: "mb-1.5", children: label }))), jsxs(motion.div, { ref: ref, id: `${generatedId}-counter`, "data-counter": "true", layout: true, transition: shouldDisableAnimations ? undefined : transition, className: cn(mergedTheme.baseStyle, isInvalid && "ring-1 ring-[var(--color-danger)]", className), role: "spinbutton", "aria-label": ariaLabel, "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": isDisabled, "aria-invalid": isInvalid || undefined, "aria-describedby": displayedMessage ? helperId : undefined, tabIndex: isDisabled ? -1 : 0, onKeyDown: handleKeyDown, ...props, children: [jsx(motion.div, { className: mergedTheme.buttonWrapperStyle, 
+    return (jsxs("div", { className: "flex flex-col", children: [label && (typeof label === "string" ? (jsx(FormLabel, { htmlFor: `${generatedId}-counter`, state: isDisabled ? "disabled" : isInvalid ? "invalid" : "default", className: "mb-1.5", children: label })) : (jsx("div", { className: "mb-1.5", children: label }))), jsxs(motion.div, { ref: setContainerRef, id: `${generatedId}-counter`, "data-counter": "true", "data-size": size, layout: true, transition: shouldDisableAnimations ? undefined : transition, className: cn(mergedTheme.baseStyle, mergedTheme.sizes[size], isDisabled && mergedTheme.disabledStyle, (isInvalid || draftOutOfRange) && mergedTheme.invalidStyle, className), role: "spinbutton", "aria-label": ariaLabel, "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": isDisabled, "aria-invalid": isInvalid || undefined, "aria-describedby": displayedMessage ? helperId : undefined, tabIndex: isDisabled ? -1 : 0, onKeyDown: handleKeyDown, ...props, children: [jsx(motion.div, { className: mergedTheme.buttonWrapperStyle, 
                         // Framer Motion's press gesture (triggered by `whileTap`) adds
                         // `tabIndex=0` to any non-natively-focusable element that
                         // doesn't already declare a `tabindex`, to make tap gestures
@@ -175,7 +340,16 @@ const InputCounter = React__default.forwardRef(({ value, onChange, state = "defa
                         // focusable <Button>, so an explicit tabIndex={-1} keeps it out
                         // of the tab order (motion.js only adds its own when the
                         // attribute is absent).
-                        tabIndex: -1, whileHover: !isDisabled && !shouldDisableAnimations ? { scale: 1.05 } : undefined, whileTap: !isDisabled && !shouldDisableAnimations ? { scale: 0.95 } : undefined, children: jsx(Button, { size: "sm", variant: "ghost", iconOnly: true, ...buttonProps, onClick: handleDecrement, disabled: !canDecrement, "aria-label": "Decrement", children: jsx(Minus, { className: "size-4 text-[var(--color-text-primary)]", weight: "bold" }) }) }), jsx(SlidingNumber, { value: value, decimalPlaces: autoDecimalPlaces, className: mergedTheme.numberStyle, transition: transition }), jsx(motion.div, { className: mergedTheme.buttonWrapperStyle, 
+                        tabIndex: -1, whileHover: !isDisabled && !shouldDisableAnimations ? { scale: 1.05 } : undefined, whileTap: !isDisabled && !shouldDisableAnimations ? { scale: 0.95 } : undefined, children: jsx(Button, { size: mergedTheme.buttonSizes[size], variant: "ghost", iconOnly: true, ...buttonProps, 
+                            // The square comes from the COUNTER's height, not Button's size
+                            // scale; a consumer className still wins (shadcn, §4).
+                            className: cn(mergedTheme.stepperSizes[size], buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.className), onClick: handleDecrement, disabled: !canDecrement, "aria-label": "Decrement", children: jsx(Minus, { className: cn(mergedTheme.stepperIconSizes[size], "text-[var(--color-text-primary)]"), weight: "bold" }) }) }), jsx("span", { "data-testid": "input-counter-slot", className: cn(mergedTheme.valueSlotStyle, mergedTheme.textSizes[size]), 
+                        // The one box both states occupy, sized in the same `em` metric
+                        // SlidingNumber lays its characters out on — so the field that
+                        // replaces the number is exactly as wide as the number was.
+                        style: {
+                            width: `calc(${slotChars} * ${SLIDING_NUMBER_CHAR_WIDTH_EM}em)`,
+                        }, children: isEditing ? (jsx("input", { ref: fieldRef, type: "text", inputMode: "decimal", "aria-label": ariaLabel, "aria-invalid": draftOutOfRange || isInvalid || undefined, value: draft, className: cn(mergedTheme.editFieldStyle, mergedTheme.textSizes[size]), onChange: (event) => setDraft(event.target.value), onKeyDown: handleFieldKeyDown, onBlur: () => endEdit(true, false) })) : (jsx("span", { "data-testid": "input-counter-value", onClick: beginEdit, className: cn("flex w-full items-center justify-center", canEdit && "cursor-text"), children: jsx(SlidingNumber, { value: value, decimalPlaces: autoDecimalPlaces, className: cn(mergedTheme.numberStyle, mergedTheme.textSizes[size], isDisabled && mergedTheme.numberDisabledStyle), transition: landsInstantly ? INSTANT_TRANSITION : transition }) })) }), jsx(motion.div, { className: mergedTheme.buttonWrapperStyle, 
                         // Framer Motion's press gesture (triggered by `whileTap`) adds
                         // `tabIndex=0` to any non-natively-focusable element that
                         // doesn't already declare a `tabindex`, to make tap gestures
@@ -184,7 +358,10 @@ const InputCounter = React__default.forwardRef(({ value, onChange, state = "defa
                         // focusable <Button>, so an explicit tabIndex={-1} keeps it out
                         // of the tab order (motion.js only adds its own when the
                         // attribute is absent).
-                        tabIndex: -1, whileHover: !isDisabled && !shouldDisableAnimations ? { scale: 1.05 } : undefined, whileTap: !isDisabled && !shouldDisableAnimations ? { scale: 0.95 } : undefined, children: jsx(Button, { size: "sm", variant: "ghost", iconOnly: true, ...buttonProps, onClick: handleIncrement, disabled: !canIncrement, "aria-label": "Increment", children: jsx(Plus, { className: "size-4 text-[var(--color-text-primary)]", weight: "bold" }) }) })] }), displayedMessage && (jsx("div", { id: helperId, role: isInvalid ? "alert" : undefined, className: cn("text-sm mt-1", isInvalid
+                        tabIndex: -1, whileHover: !isDisabled && !shouldDisableAnimations ? { scale: 1.05 } : undefined, whileTap: !isDisabled && !shouldDisableAnimations ? { scale: 0.95 } : undefined, children: jsx(Button, { size: mergedTheme.buttonSizes[size], variant: "ghost", iconOnly: true, ...buttonProps, 
+                            // The square comes from the COUNTER's height, not Button's size
+                            // scale; a consumer className still wins (shadcn, §4).
+                            className: cn(mergedTheme.stepperSizes[size], buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.className), onClick: handleIncrement, disabled: !canIncrement, "aria-label": "Increment", children: jsx(Plus, { className: cn(mergedTheme.stepperIconSizes[size], "text-[var(--color-text-primary)]"), weight: "bold" }) }) })] }), displayedMessage && (jsx("div", { id: helperId, role: isInvalid ? "alert" : undefined, className: cn("text-sm mt-1", isInvalid
                     ? "text-[var(--color-danger)]"
                     : "text-[var(--color-text-muted)]"), children: displayedMessage }))] }));
 });

package/dist/components/forms/InputCounter/InputCounter.theme.d.ts

@@ -2,5 +2,17 @@ import { InputCounterTheme } from "./InputCounter.types";
 /**
  * InputCounter theme configuration
  * Follows Flikkui design system with CSS variables
+ *
+ * 🔴 Sizing comes from the SHARED `--form-*` scale (`formsBaseTheme.sizes`), not
+ * from literals — a counter sits in the same column as an Input/Select and has
+ * to land on the same baseline. Before this, height was implicit (`p-1` plus a
+ * hardcoded `size="sm"` Button) and the number was locked to `text-sm`, so a
+ * counter could not be made to match the fields around it.
+ *
+ * 🔴 The edge is the shared inset box-shadow (`formsBaseTheme.inputGroupBorderStyle`),
+ * NOT a real `border` — CLAUDE.md §9. A real border was doing three kinds of damage:
+ * it read differently from the Select beside it, it consumed 2px of the fixed
+ * `--form-min-h-*` height (which is what made the `sm` steppers overflow the box),
+ * and it left the counter as the only tabbable form control with no focus ring.
  */
 export declare const inputCounterTheme: InputCounterTheme;

package/dist/components/forms/InputCounter/InputCounter.theme.js

@@ -1,11 +1,101 @@
+import { formsBaseTheme } from '../forms.theme.js';
+
 /**
  * InputCounter theme configuration
  * Follows Flikkui design system with CSS variables
+ *
+ * 🔴 Sizing comes from the SHARED `--form-*` scale (`formsBaseTheme.sizes`), not
+ * from literals — a counter sits in the same column as an Input/Select and has
+ * to land on the same baseline. Before this, height was implicit (`p-1` plus a
+ * hardcoded `size="sm"` Button) and the number was locked to `text-sm`, so a
+ * counter could not be made to match the fields around it.
+ *
+ * 🔴 The edge is the shared inset box-shadow (`formsBaseTheme.inputGroupBorderStyle`),
+ * NOT a real `border` — CLAUDE.md §9. A real border was doing three kinds of damage:
+ * it read differently from the Select beside it, it consumed 2px of the fixed
+ * `--form-min-h-*` height (which is what made the `sm` steppers overflow the box),
+ * and it left the counter as the only tabbable form control with no focus ring.
  */
 const inputCounterTheme = {
-    baseStyle: "flex items-center gap-3 transition-all p-1 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--form-radius)] w-fit",
+    baseStyle: "flex items-center gap-1 w-fit bg-[var(--field-fill)] " +
+        // 🔴 Explicitly listed properties, never `transition-all`: this root is a
+        // motion element carrying `layout`, and a CSS transition covering
+        // `transform` re-interpolates motion's per-frame writes (§12).
+        "transition-[box-shadow,background-color] duration-[var(--motion-duration-fast)] " +
+        formsBaseTheme.inputGroupBorderStyle,
+    invalidStyle: formsBaseTheme.states.invalid,
+    // The same disabled treatment every other field gets (disabled fill, resting
+    // border held, no hover edge, not-allowed cursor on the steppers). The number
+    // is a <span>, not an <input>, so `states.disabled`'s `[&_input]` text rule
+    // can't reach it — `numberDisabledStyle` greys it explicitly.
+    disabledStyle: formsBaseTheme.states.disabled,
+    numberDisabledStyle: "text-[var(--color-text-disabled)]",
     buttonWrapperStyle: "flex-shrink-0",
-    numberStyle: "min-w-fit text-center text-sm font-medium text-[var(--color-text-primary)] tabular-nums select-none",
+    numberStyle: "min-w-fit text-center text-[var(--color-text-primary)] tabular-nums select-none",
+    // The value slot is a fixed box both states share — the animated number at rest
+    // and the edit field while typing. Its width is set inline from the character
+    // count (see InputCounter.tsx), so clicking the number cannot resize the
+    // control: the `size` attribute the field used to carry sized it by the
+    // browser's average character width, which is NOT SlidingNumber's fixed
+    // per-character em box, so the box grew ~1–3px on every click.
+    valueSlotStyle: "relative flex items-center justify-center flex-shrink-0",
+    // Inset all round, so the stepper squares come out 20 / 26 / 30 against the
+    // 28 / 36 / 40 heights. md/lg take 5px — the button lands at roughly 0.7× the
+    // control height, and at 4px the square read as filling its box.
+    //
+    // 🔴 `sm` is the one rung where WCAG 2.2 SC 2.5.8 (Target Size, AA) binds. A
+    // 28px box cannot hold a 24px square at any sensible inset, so the steppers
+    // are undersized and have to clear the spacing exception instead: a 24px
+    // circle centred on each target must not intersect the next one's. The
+    // neighbour is the click-to-edit value, so `sm` widens the gap to 8px, which
+    // puts the centres 25.2px apart (`gap-1` gave 21.2px and failed). The value
+    // slot's 2-character floor (see InputCounter.tsx) is what keeps that true for
+    // a single-digit counter — a 1-char slot would pull the centres back to 21.6px.
+    sizes: {
+        sm: `${formsBaseTheme.sizes.sm.height} p-1 gap-2`,
+        md: `${formsBaseTheme.sizes.md.height} p-[5px]`,
+        lg: `${formsBaseTheme.sizes.lg.height} p-[5px]`,
+    },
+    textSizes: {
+        sm: formsBaseTheme.sizes.sm.text,
+        md: formsBaseTheme.sizes.md.text,
+        lg: formsBaseTheme.sizes.lg.text,
+    },
+    // The steppers are squares derived from the COUNTER's height — `--form-min-h-*`
+    // minus the container's inset on each side (20 / 26 / 30 at the default
+    // theme) — rather than from Button's own size scale. The old `buttonSizes` map
+    // landed on whichever Button size was closest, which gave `sm` and `md` the
+    // SAME 32px stepper and, at `sm`, a square TALLER than the counter's content
+    // box: the ghost hover fill punched straight through the border.
+    // Radius is concentric with the container's (`--form-radius` − the 5px inset),
+    // the same construction `--form-dropdown-inner-radius` uses for dropdown rows.
+    // 🔴 Written out per size, never assembled from a template — Tailwind scans
+    // source text, so an interpolated class name emits no CSS at all (§3). The
+    // `_-_` is the codebase's arbitrary-value spelling for the whitespace CSS
+    // requires around a calc `-`.
+    stepperSizes: {
+        sm: "size-[calc(var(--form-min-h-sm)_-_8px)] p-0 rounded-[calc(var(--form-radius)_-_4px)]",
+        md: "size-[calc(var(--form-min-h-md)_-_10px)] p-0 rounded-[calc(var(--form-radius)_-_5px)]",
+        lg: "size-[calc(var(--form-min-h-lg)_-_10px)] p-0 rounded-[calc(var(--form-radius)_-_5px)]",
+    },
+    // Icons ramp with the square they sit in (12 / 14 / 16px inside 22 / 26 / 30),
+    // holding roughly the same optical breathing room at every size. They were a
+    // flat size-4 at all three, which is what made the `sm` stepper look packed.
+    stepperIconSizes: {
+        sm: "size-3",
+        md: "size-3.5",
+        lg: "size-4",
+    },
+    buttonSizes: {
+        sm: "sm",
+        md: "sm",
+        lg: "md",
+    },
+    // The counter's own container paints the border, background and radius — this
+    // field is the text layer inside it, so it stays transparent and chrome-free
+    // (the same split Input uses between its group wrapper and inner <input>).
+    // `w-full` fills the shared value slot; it must NOT size itself.
+    editFieldStyle: "w-full min-w-0 bg-transparent border-0 outline-none text-center text-[var(--color-text-primary)] tabular-nums p-0 focus:outline-none",
 };
 
 export { inputCounterTheme };

package/dist/components/forms/InputCounter/InputCounter.types.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { Transition } from 'motion/react';
 import { ButtonProps } from '../../core/Button/Button.types';
 export type InputCounterState = 'default' | 'disabled' | 'invalid';
+export type InputCounterSize = 'sm' | 'md' | 'lg';
 /**
  * InputCounter component props
  * @property {number} value - Current counter value (controlled)
@@ -10,7 +11,6 @@ export type InputCounterState = 'default' | 'disabled' | 'invalid';
  * @property {number} max - Maximum allowed value (optional)
  * @property {number} step - Increment/decrement step size (default: 1)
  * @property {boolean} disabled - Whether the counter is disabled
- * @property {function} formatNumber - Custom number formatter
  * @property {object} buttonProps - Props to pass to increment/decrement buttons
  * @property {object} theme - Theme overrides for styling
  * @property {object} transition - Custom Framer Motion transition
@@ -20,6 +20,18 @@ export interface InputCounterProps extends Omit<React.HTMLAttributes<HTMLDivElem
     value: number;
     /** Callback when value changes */
     onChange?: (value: number) => void;
+    /**
+     * Control size, drawn from the shared `--form-*` scale so a counter lines up
+     * with the Input/Select/Combobox it sits beside.
+     * @default 'md'
+     */
+    size?: InputCounterSize;
+    /**
+     * Whether clicking the number swaps it for a text field so the value can be
+     * typed directly. Committed on Enter or blur; Escape reverts.
+     * @default true
+     */
+    editable?: boolean;
     /** Validation/interaction state */
     state?: InputCounterState;
     /** Field label rendered above the counter */
@@ -42,8 +54,6 @@ export interface InputCounterProps extends Omit<React.HTMLAttributes<HTMLDivElem
     disabled?: boolean;
     /** Number of decimal places to display (auto-detected from step if not specified) */
     decimalPlaces?: number;
-    /** Custom number formatter (e.g., for decimals or localization) */
-    formatNumber?: (value: number) => string;
     /** Additional class names */
     className?: string;
     /** Props to pass to increment/decrement buttons (omitting onClick) */
@@ -59,10 +69,43 @@ export interface InputCounterProps extends Omit<React.HTMLAttributes<HTMLDivElem
  * Theme configuration for InputCounter component
  */
 export interface InputCounterTheme {
-    /** Base container style */
+    /** Base container style — includes the shared inset-shadow field edge */
     baseStyle: string;
+    /** Invalid edge, from the shared `formsBaseTheme.states.invalid` */
+    invalidStyle: string;
+    /** Disabled treatment, from the shared `formsBaseTheme.states.disabled` */
+    disabledStyle: string;
+    /** Number colour while disabled (the span `states.disabled` can't reach) */
+    numberDisabledStyle: string;
     /** Wrapper style for button animations */
     buttonWrapperStyle: string;
     /** Number display style */
     numberStyle: string;
+    /**
+     * The fixed box the animated number and the edit field share, so swapping one
+     * for the other cannot change the control's width. Its WIDTH is set inline
+     * from the character count, not by this class.
+     */
+    valueSlotStyle: string;
+    /** Per-size container height/padding, from the shared `--form-*` scale */
+    sizes: Record<InputCounterSize, string>;
+    /** Per-size text sizing, shared by the number display and the edit field */
+    textSizes: Record<InputCounterSize, string>;
+    /**
+     * Per-size stepper geometry — a square derived from the counter's own height
+     * (`--form-min-h-*` minus the container inset) with a concentric radius, applied
+     * over whatever `buttonSizes` picks. This is what makes the steppers scale with
+     * the counter rather than with Button's size scale.
+     */
+    stepperSizes: Record<InputCounterSize, string>;
+    /** Per-size stepper icon sizing, tracking the type ramp */
+    stepperIconSizes: Record<InputCounterSize, string>;
+    /**
+     * Which Button size the steppers take at each counter size. Mapped rather
+     * than derived: Button has only three sizes and both must nest inside the
+     * counter's own height. `stepperSizes` then sets the exact square.
+     */
+    buttonSizes: Record<InputCounterSize, ButtonProps['size']>;
+    /** The transparent, centered edit field swapped in on click */
+    editFieldStyle: string;
 }

package/dist/components/forms/InputCreditCard/InputCreditCard.js

@@ -21,7 +21,7 @@ import { formsBaseTheme } from '../forms.theme.js';
  * />
  * ```
  */
-const InputCreditCard = React__default.forwardRef(({ state = 'default', errorMessage, error, onCardNumberChange, onExpiryDateChange, onCvcChange, expiryDateLabel = "MM / YY", cvcLabel = "CVC", legendText = "Payment Information", cardNumberInputProps = {}, expiryDateInputProps = {}, cvcInputProps = {}, className = "", theme = {}, }, ref) => {
+const InputCreditCard = React__default.forwardRef(({ state = 'default', size = 'md', errorMessage, error, onCardNumberChange, onExpiryDateChange, onCvcChange, expiryDateLabel = "MM / YY", cvcLabel = "CVC", legendText = "Payment Information", cardNumberInputProps = {}, expiryDateInputProps = {}, cvcInputProps = {}, className = "", theme = {}, }, ref) => {
     var _a;
     const isDisabled = state === 'disabled';
     // Clear the error visually as soon as the user starts re-entering after an error.
@@ -90,9 +90,9 @@ const InputCreditCard = React__default.forwardRef(({ state = 'default', errorMes
     const fieldState = isDisabled ? 'disabled' : 'default';
     // Merge top-level state into each field's props; strip per-field helperText
     // so only the consolidated error message is shown at the bottom.
-    const { helperText: _cn, ...cardProps } = { state: fieldState, ...cardNumberInputProps };
-    const { helperText: _ex, ...expiryProps } = { state: fieldState, ...expiryDateInputProps };
-    const { helperText: _cv, ...cvcProps } = { state: fieldState, ...cvcInputProps };
+    const { helperText: _cn, ...cardProps } = { state: fieldState, size, ...cardNumberInputProps };
+    const { helperText: _ex, ...expiryProps } = { state: fieldState, size, ...expiryDateInputProps };
+    const { helperText: _cv, ...cvcProps } = { state: fieldState, size, ...cvcInputProps };
     return (jsxs("fieldset", { ref: ref, className: `w-full border-0 m-0 p-0 ${isInvalid ? 'state-invalid' : ''} ${className}`, "data-testid": "input-credit-card-fieldset", "aria-invalid": isInvalid || undefined, "aria-errormessage": isInvalid && resolvedError ? errorId : undefined, children: [jsx("legend", { className: `block text-sm/6 font-medium mb-2 text-[var(--color-text-primary)] ${(_a = mergedTheme.legendStyles) !== null && _a !== void 0 ? _a : ""}`, children: legendText }), jsxs("div", { className: `relative grid gap-0 ${mergedTheme.contentStyles}`, "data-testid": "input-credit-card-content", children: [jsx("div", { className: "w-full relative focus-within:z-10 hover:z-10", "data-testid": "input-card-number", children: jsx(Input, { id: cardNumberId, type: "creditCard", value: cardNumber, onChange: handleCardNumberChange, placeholder: "Card Number", "aria-label": "card number", onFocus: () => handleFocus("cardNumber"), onBlur: handleBlur, inputGroupClassName: "rounded-b-none", ...cardProps }) }), jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 w-full -mt-px relative focus-within:z-10 hover:z-10", children: [jsx("div", { className: `${mergedTheme.expiryDateWrapperStyles || ""} w-full sm:pr-0 relative focus-within:z-10 hover:z-10`, "data-testid": "input-expiry-date", children: jsx(Input, { id: expiryDateId, type: "expiryDate", value: expiryDate, onChange: handleExpiryDateChange, placeholder: expiryDateLabel, "aria-label": expiryDateLabel, onFocus: () => handleFocus("expiryDate"), onBlur: handleBlur, inputGroupClassName: "sm:rounded-bl-[var(--form-radius)] rounded-t-none sm:rounded-tr-none sm:rounded-br-none", ...expiryProps }) }), jsx("div", { className: `${mergedTheme.cvcWrapperStyles || ""} w-full -mt-px sm:mt-0 sm:-ml-px sm:w-[calc(100%+1px)] relative focus-within:z-10 hover:z-10`, "data-testid": "input-cvc", children: jsx(Input, { id: cvcId, type: "tel", maxLength: 3, pattern: "[0-9]*", inputMode: "numeric", value: cvc, onChange: handleCvcChange, placeholder: cvcLabel, "aria-label": cvcLabel, onFocus: () => handleFocus("cvc"), onBlur: handleBlur, inputGroupClassName: " sm:rounded-br-[var(--form-radius)] rounded-t-none rounded-bl-[var(--form-radius)] sm:rounded-bl-none", ...cvcProps }) })] }), isInvalid && jsx("div", { "aria-hidden": "true", className: formsBaseTheme.groupInvalidOverlayStyle })] }), isInvalid && resolvedError && (jsx("p", { id: errorId, role: "alert", className: formsBaseTheme.helperText, children: resolvedError }))] }));
 });
 InputCreditCard.displayName = "InputCreditCard";

package/dist/components/forms/InputCreditCard/InputCreditCard.types.d.ts

@@ -13,6 +13,13 @@ import { InputProps, InputTheme } from '../Input/Input.types';
 export interface InputCreditCardProps {
     /** Visual/validation state of the entire card group */
     state?: 'default' | 'disabled' | 'invalid';
+    /**
+     * Size of every field in the group, from the shared `--form-*` scale, so the
+     * card block lines up with the Inputs and Selects around it. A per-field
+     * `*InputProps.size` still wins.
+     * @default 'md'
+     */
+    size?: InputProps['size'];
     /** Consolidated error message shown below all fields when `state="invalid"` */
     errorMessage?: React.ReactNode;
     /**