@adia-ai/web-components 0.4.2 → 0.4.4

package/components/col/col.yaml

@@ -18,6 +18,11 @@ props:
       or a numeric rung on the spacing scale ("1"…"16", mapped to --a-space-N).
     type: string
     default: md
+  grow:
+    description: Fills remaining space in a flex parent (e.g. inside a Row). CSS-only attribute via :scope[grow] in col.css.
+    type: boolean
+    default: false
+    reflect: true
   justify:
     description: Justify content
     type: string

package/components/field/field.a2ui.json

@@ -42,7 +42,20 @@
   ],
   "unevaluatedProperties": false,
   "x-adiaui": {
-    "anti_patterns": [],
+    "anti_patterns": [
+      {
+        "description": "Wrapping a check-ui (or switch-ui / radio-ui / toggle-ui) in field-ui. The widget already carries its own visible [label] via the CSS attr() pattern; field-ui adds a redundant label row and the inline-mode `justify-self: end` rule for compact controls pushes the widget to the right edge of the row, breaking the expected \"checkbox-left, label-right\" consent-row layout.",
+        "right": "<check-ui label=\"I agree to the Terms of Service\"></check-ui>\n",
+        "rule": "Small self-labeling widgets MUST NOT be wrapped in field-ui.",
+        "wrong": "<field-ui inline>\n  <check-ui label=\"I agree to the Terms of Service\"></check-ui>\n</field-ui>\n"
+      },
+      {
+        "description": "Using field-ui[inline] around a switch-ui to build a settings row. The settings-row layout (label-left, control-right) IS the switch-ui's own [label] rendering — field-ui adds no value and breaks the layout via the `justify-self: end` rule for compact widgets.",
+        "right": "<switch-ui label=\"Email notifications\"></switch-ui>\n",
+        "rule": "Use the widget's own [label] attribute for settings + consent rows. field-ui is for wide-control rows only.",
+        "wrong": "<field-ui inline label=\"Email notifications\">\n  <switch-ui></switch-ui>\n</field-ui>\n"
+      }
+    ],
     "category": "form",
     "events": {},
     "examples": [
@@ -69,14 +82,12 @@
       "input",
       "select",
       "textarea",
-      "check",
-      "radio",
-      "switch",
-      "slider"
+      "slider",
+      "range"
     ],
     "slots": {
       "default": {
-        "description": "The form control — input-ui, select-ui, textarea-ui, check-ui, switch-ui, radio-ui, slider-ui, etc. Auto-id'd for the label's [for] binding."
+        "description": "The form control — a WIDE control like input-ui, select-ui, textarea-ui, slider-ui, range-ui, calendar-picker-ui, color-picker-ui, upload-ui, otp-input-ui. Auto-id'd for the label's [for] binding.\nDO NOT wrap small self-labeling widgets here. check-ui, switch-ui, radio-ui, toggle-ui all carry their own [label] attribute that renders inline next to the control — wrapping them in field-ui produces broken layouts (settings-row `justify-self: end` rule pushes the control to the trailing edge, away from the label that field-ui stamps; the widget's own label then renders again on the right, creating a doubled / right-justified affordance). See anti_patterns below for the canonical alternatives."
       },
       "action": {
         "description": "Button adjacent to the control for inline actions (clear, reset, help popover)."

package/components/field/field.test.js

@@ -1,6 +1,12 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import '../../core/element.js';
 import './field.js';
+// Preload <input-ui> at module top so the error-mirror test can rely on
+// UIFormElement being registered without a dynamic import. The dynamic
+// `await import('../input/input.js')` inside the test body was a known
+// flake source under the full-suite parallel transform pipeline; moving
+// it to top-level removes that race entirely.
+import '../input/input.js';
 
 const tick = () => new Promise((r) => queueMicrotask(r));
 
@@ -116,8 +122,8 @@ describe('field-ui', () => {
     // Per field.js error-mirror architecture: field-ui reads .error from
     // the CHILD UIFormElement control (not from its own attribute). So
     // the test sets [error] on <input-ui> (UIFormElement-extending) — not
-    // <input> (raw HTML, no .error getter).
-    await import('../input/input.js');
+    // <input> (raw HTML, no .error getter). input-ui is preloaded at the
+    // top of this file to avoid a flake-prone dynamic import here.
     const f = mount('<field-ui label="E" hint="hi"><input-ui error="Required"></input-ui></field-ui>');
     await tick();
     const hint = f.querySelector('[data-field-hint]');

package/components/field/field.yaml

@@ -53,9 +53,20 @@ props:
 slots:
   default:
     description: >-
-      The form control — input-ui, select-ui, textarea-ui,
-      check-ui, switch-ui, radio-ui, slider-ui, etc. Auto-id'd for
-      the label's [for] binding.
+      The form control — a WIDE control like input-ui, select-ui,
+      textarea-ui, slider-ui, range-ui, calendar-picker-ui,
+      color-picker-ui, upload-ui, otp-input-ui. Auto-id'd for the
+      label's [for] binding.
+
+      DO NOT wrap small self-labeling widgets here. check-ui,
+      switch-ui, radio-ui, toggle-ui all carry their own [label]
+      attribute that renders inline next to the control — wrapping
+      them in field-ui produces broken layouts (settings-row
+      `justify-self: end` rule pushes the control to the trailing
+      edge, away from the label that field-ui stamps; the widget's
+      own label then renders again on the right, creating a doubled
+      / right-justified affordance). See anti_patterns below for the
+      canonical alternatives.
   trailing:
     description: >-
       Secondary text or badge aligned with the label in the stacked
@@ -93,8 +104,38 @@ tokens:
   --field-error-size:
     description: Error text size.
 a2ui:
-  rules: []
-anti_patterns: []
+  rules:
+    - "field-ui is for WIDE controls (input-ui, select-ui, textarea-ui, slider-ui, etc.) that need a separate label row. Small self-labeling widgets (check-ui, switch-ui, radio-ui, toggle-ui) carry their own [label] attribute and MUST NOT be wrapped in field-ui."
+    - "field-ui[inline] is for inline WIDE-control rows (e.g. search field with trailing kbd hint), NOT for compact-widget rows. For settings rows or consent rows, use the widget's own [label] attribute directly without a field-ui wrapper."
+anti_patterns:
+  - description: >-
+      Wrapping a check-ui (or switch-ui / radio-ui / toggle-ui) in
+      field-ui. The widget already carries its own visible [label]
+      via the CSS attr() pattern; field-ui adds a redundant label row
+      and the inline-mode `justify-self: end` rule for compact
+      controls pushes the widget to the right edge of the row,
+      breaking the expected "checkbox-left, label-right" consent-row
+      layout.
+    wrong: |
+      <field-ui inline>
+        <check-ui label="I agree to the Terms of Service"></check-ui>
+      </field-ui>
+    right: |
+      <check-ui label="I agree to the Terms of Service"></check-ui>
+    rule: Small self-labeling widgets MUST NOT be wrapped in field-ui.
+  - description: >-
+      Using field-ui[inline] around a switch-ui to build a settings
+      row. The settings-row layout (label-left, control-right) IS the
+      switch-ui's own [label] rendering — field-ui adds no value and
+      breaks the layout via the `justify-self: end` rule for compact
+      widgets.
+    wrong: |
+      <field-ui inline label="Email notifications">
+        <switch-ui></switch-ui>
+      </field-ui>
+    right: |
+      <switch-ui label="Email notifications"></switch-ui>
+    rule: Use the widget's own [label] attribute for settings + consent rows. field-ui is for wide-control rows only.
 examples:
   - name: stacked-email-field
     description: >-
@@ -146,7 +187,8 @@ related:
   - input
   - select
   - textarea
-  - check
-  - radio
-  - switch
   - slider
+  - range
+  # check, switch, radio, toggle removed from related — they are
+  # self-labeling widgets that should NOT be wrapped in field-ui.
+  # See anti_patterns above.

package/components/index.js

@@ -11,6 +11,7 @@ import '../core/data-stream.js';
 
 export { UIIcon } from './icon/icon.js';
 export { UIButton } from './button/button.js';
+export { UILink } from './link/link.js';
 export { UIInput } from './input/input.js';
 export { UITextarea } from './textarea/textarea.js';
 export { UICheck } from './check/check.js';

package/components/input/input.a2ui.json

@@ -38,6 +38,11 @@
       "type": "boolean",
       "default": false
     },
+    "autocomplete": {
+      "description": "Browser autofill behavior per HTML autocomplete spec. Routed via setAttribute to the host element. Common values: off, on, cc-number, cc-exp, cc-csc, cc-name, email, username, current-password, new-password, one-time-code, given-name, family-name, street-address, postal-code.",
+      "type": "string",
+      "default": ""
+    },
     "component": {
       "const": "Input"
     },
@@ -51,11 +56,31 @@
       "type": "string",
       "default": ""
     },
+    "inputmode": {
+      "description": "Mobile keyboard hint per HTML inputmode spec. Routed via setAttribute to the host element. Values: text, decimal, numeric, tel, search, email, url.",
+      "type": "string",
+      "enum": [
+        "text",
+        "decimal",
+        "numeric",
+        "tel",
+        "search",
+        "email",
+        "url",
+        "none"
+      ],
+      "default": null
+    },
     "label": {
       "description": "Inline label rendered as a leading caption inside the input chrome, between any prefix and the value. Wires aria-labelledby on the editable surface. For stacked label / hint / error compositions, wrap with field-ui.",
       "type": "string",
       "default": ""
     },
+    "locale": {
+      "description": "BCP-47 locale tag for `type=\"number\"`, e.g. `de-DE`, `fr-FR`, `en-IN`. When set, the input accepts both `.` AND the locale's decimal separator (e.g. `,` in de-DE), uses `Intl.NumberFormat` for display, and groups thousands on blur (e.g. en-US `1,234,567.89`, de-DE `1.234.567,89`). On focus, the input reverts to ungrouped form for easy editing. `.value` always stores the ungrouped, locale-decimal form so `Number(#toCanonical(v))` round-trips. Default empty = en-US-equivalent path (no behavior change).",
+      "type": "string",
+      "default": ""
+    },
     "max": {
       "description": "Maximum numeric value. Applies when `type=\"number\"`. Clamps + drives aria-valuemax + the [+] button's disabled state.",
       "type": "number",

package/components/input/input.js

@@ -53,6 +53,13 @@ class UIInput extends UIFormElement {
     max:         { type: Number,  default: null, reflect: true },
     step:        { type: Number,  default: 1,    reflect: true },
     precision:   { type: Number,  default: null, reflect: true },
+    // BCP-47 locale tag, e.g. "de-DE" / "fr-FR" / "en-IN". Default empty =
+    // en-US (`.` decimal separator, no thousands grouping). When set, the
+    // input accepts both `.` AND the locale's decimal separator (so en-US-
+    // formatted programmatic values still parse), and `#format` uses
+    // `Intl.NumberFormat` for display. Internal storage stays in JS-Number
+    // canonical form so `.value` round-trips through `Number(v)` unchanged.
+    locale:      { type: String,  default: '',   reflect: true },
   };
 
   static template = () => null;
@@ -62,15 +69,30 @@ class UIInput extends UIFormElement {
   #upBtn = null;
   #downBtn = null;
   #valueAtFocus = '';
+  #repeatTimer = null;
+  #repeatDelayTimer = null;
+  #cachedSep = '.';
+  #cachedGroup = '';
+  #cachedSepFor = null;
   static #labelSeq = 0;
 
+  // Hold-to-repeat tuning. Initial delay before autorepeat begins, and the
+  // interval between repeats. Values match the cadence of the native
+  // <input type="number"> spinner behavior in Chromium/Safari.
+  static #REPEAT_INITIAL_MS = 400;
+  static #REPEAT_INTERVAL_MS = 60;
+
   get #isNativePassword() { return this.type === 'password'; }
   get #isNumberMode()     { return this.type === 'number'; }
 
-  /** Parsed numeric value. NaN when empty or unparseable. */
+  /** Parsed numeric value. NaN when empty or unparseable. When `locale` is
+   *  set, the value may carry the locale's decimal separator (e.g. "1,5" in
+   *  de-DE); we canonicalize to JS form before `Number(…)`. */
   get valueAsNumber() {
-    const s = String(this.value ?? '').trim();
-    if (!s || s === '-' || s === '.') return NaN;
+    const raw = String(this.value ?? '').trim();
+    if (!raw) return NaN;
+    const s = this.#toCanonical(raw);
+    if (s === '-' || s === '.' || s === '-.') return NaN;
     const n = Number(s);
     return Number.isFinite(n) ? n : NaN;
   }
@@ -111,11 +133,15 @@ class UIInput extends UIFormElement {
     }
 
     // pointerdown.preventDefault keeps focus on the contenteditable surface
-    // when the user pokes a stepper button with a pointing device.
-    this.#upBtn?.addEventListener('pointerdown', this.#onStepperDown);
-    this.#downBtn?.addEventListener('pointerdown', this.#onStepperDown);
-    this.#upBtn?.addEventListener('click', this.#onStepUp);
-    this.#downBtn?.addEventListener('click', this.#onStepDown);
+    // when the user pokes a stepper button with a pointing device. Same
+    // handler fires the initial step + arms hold-to-repeat; pointerup/leave/
+    // cancel on document stops it (the user can drag off the button to
+    // abort the repeat without lifting their finger first).
+    this.#upBtn?.addEventListener('pointerdown', this.#onStepperUpDown);
+    this.#downBtn?.addEventListener('pointerdown', this.#onStepperDownDown);
+    // Stop autorepeat on any pointer release, anywhere — captures the
+    // "drag-off-then-lift" abort path without per-button leave/cancel
+    // bookkeeping. Cheap; runs only while a stepper is held.
 
     // In non-Vite static deploys, the icon registry loads asynchronously
     // after the manifest fetch resolves. If our prefix/suffix were checked
@@ -273,9 +299,12 @@ class UIInput extends UIFormElement {
   }
 
   #runNumberConstraints(val) {
-    const s = String(val ?? '').trim();
+    const raw = String(val ?? '').trim();
     // Empty is handled by `required` in the base class; nothing to check here.
-    if (!s) return true;
+    if (!raw) return true;
+    // Canonicalize for `Number(…)` parse — when `locale` is set the raw
+    // value may carry the locale's decimal separator.
+    const s = this.#toCanonical(raw);
     const n = Number(s);
     if (!Number.isFinite(n)) {
       this.internals.setValidity(
@@ -312,12 +341,87 @@ class UIInput extends UIFormElement {
     return (stepStr.split('.')[1] || '').length;
   }
 
+  /** Locale's decimal separator, or '.' for the default en-US-equivalent path.
+   *  Result cached per-locale on the host so `Intl.NumberFormat.formatToParts`
+   *  isn't called per keystroke. */
+  #decimalSep() {
+    if (!this.locale) return '.';
+    if (this.#cachedSepFor === this.locale) return this.#cachedSep;
+    this.#refreshSepCache();
+    return this.#cachedSep;
+  }
+
+  /** Locale's thousands/grouping separator (e.g. `,` in en-US, `.` in de-DE).
+   *  Returns '' for the default path (no locale → no grouping). Cached
+   *  alongside the decimal separator. */
+  #groupSep() {
+    if (!this.locale) return '';
+    if (this.#cachedSepFor === this.locale) return this.#cachedGroup;
+    this.#refreshSepCache();
+    return this.#cachedGroup;
+  }
+
+  #refreshSepCache() {
+    try {
+      const parts = new Intl.NumberFormat(this.locale).formatToParts(1234567.89);
+      this.#cachedSep   = parts.find((p) => p.type === 'decimal')?.value || '.';
+      this.#cachedGroup = parts.find((p) => p.type === 'group')?.value   || '';
+    } catch {
+      this.#cachedSep   = '.';
+      this.#cachedGroup = '';
+    }
+    this.#cachedSepFor = this.locale;
+  }
+
+  /** Convert a locale-formatted numeric string to the JS-canonical form
+   *  (decimal `.`, no thousands grouping). Strips group separators first so
+   *  "1.234,5" (de-DE) → "1234.5", "1,234.5" (en-US) → "1234.5". Pure string
+   *  transform; no validation. */
+  #toCanonical(s) {
+    const sep = this.#decimalSep();
+    const group = this.#groupSep();
+    let out = String(s);
+    if (group) out = out.split(group).join('');
+    if (sep !== '.') out = out.replace(new RegExp(`\\${sep}`, 'g'), '.');
+    return out;
+  }
+
+  /** Internal/edit-mode format: locale decimal separator, NO thousands
+   *  grouping. Used for `this.value` storage and for the textContent
+   *  rendering while the input is focused (so the user can edit without
+   *  the group separator jumping around as they type). */
   #format(n) {
     if (!Number.isFinite(n)) return '';
     const d = this.#decimals();
+    if (this.locale) {
+      try {
+        return new Intl.NumberFormat(this.locale, {
+          minimumFractionDigits: d,
+          maximumFractionDigits: d,
+          useGrouping: false,
+        }).format(n);
+      } catch { /* fall through to JS toFixed */ }
+    }
     return d > 0 ? n.toFixed(d) : String(Math.round(n));
   }
 
+  /** Display-mode format: locale decimal separator + thousands grouping when
+   *  the locale supports it. Used for the textContent rendering when the
+   *  input is NOT focused (initial render + post-blur). Returns the same as
+   *  `#format` when no `locale` is set. */
+  #formatDisplay(n) {
+    if (!Number.isFinite(n)) return '';
+    if (!this.locale) return this.#format(n);
+    const d = this.#decimals();
+    try {
+      return new Intl.NumberFormat(this.locale, {
+        minimumFractionDigits: d,
+        maximumFractionDigits: d,
+        useGrouping: true,
+      }).format(n);
+    } catch { return this.#format(n); }
+  }
+
   /** Display value derived from the stored string. During focus we leave
    *  the user's raw text alone; otherwise reformat (e.g. "9.9" → "9.90"
    *  for precision=2). Non-numeric stored strings pass through unchanged
@@ -325,9 +429,16 @@ class UIInput extends UIFormElement {
   #formatStored(stored) {
     const s = String(stored ?? '');
     if (!s) return '';
-    const n = Number(s);
+    // Canonicalize before Number() — `.value` may carry the locale's
+    // decimal separator if the host has `locale` set.
+    const n = Number(this.#toCanonical(s));
     if (!Number.isFinite(n)) return s;
-    return this.#format(n);
+    // If the input is currently focused, render without grouping so the
+    // user can edit naturally; otherwise group when locale is set. Falls
+    // back to #format (ungrouped) when there's no locale.
+    return document.activeElement === this.#textEl
+      ? this.#format(n)
+      : this.#formatDisplay(n);
   }
 
   #snap(raw) {
@@ -404,23 +515,40 @@ class UIInput extends UIFormElement {
   #isNumericProspect(s) {
     // Permissive while typing: allow lone '-', lone '.', and trailing '.'.
     // Reject scientific notation, multiple decimals, multiple signs.
-    if (s === '' || s === '-' || s === '.' || s === '-.') {
-      return s === '' || s === '-' || (this.min == null || this.min < 0) ? true : false;
+    // When `locale` is set, accept both '.' AND the locale's decimal
+    // separator, and silently strip thousands-group separators (paste of
+    // "1,234.5" or "1.234,5" both validate).
+    const c = this.#toCanonical(s);
+    if (c === '' || c === '-' || c === '.' || c === '-.') {
+      return c === '' || c === '-' || (this.min == null || this.min < 0) ? true : false;
     }
-    if (!/^-?\d*\.?\d*$/.test(s)) return false;
-    if (s.startsWith('-') && this.min != null && this.min >= 0) return false;
+    if (!/^-?\d*\.?\d*$/.test(c)) return false;
+    if (c.startsWith('-') && this.min != null && this.min >= 0) return false;
     return true;
   }
 
   #sanitizeNumeric(s) {
     // Strip everything but digits / one leading minus / one decimal point.
+    // The decimal mark is the locale's separator; characters that match the
+    // locale's group separator (e.g. `.` in de-DE, `,` in en-US) are silently
+    // dropped — never preserved in `this.value`. The blur handler re-renders
+    // with grouping for display via `#formatDisplay`.
+    //
+    // Note on programmatic `.value = "1.5"` in de-DE: that path doesn't run
+    // through sanitization (UIFormElement.value setter is string-only), so
+    // canonical-form programmatic values still parse correctly via
+    // `valueAsNumber` (which canonicalizes through `#toCanonical`). Only
+    // user-typed/-pasted input flows through this sanitizer, and there the
+    // locale interpretation (`.` = group when sep=`,`) is the correct read.
+    const sep = this.#decimalSep();
     let out = '';
-    let sawDot = false;
+    let sawDecimal = false;
     for (let i = 0; i < s.length; i++) {
       const c = s[i];
       if (c >= '0' && c <= '9') out += c;
       else if (c === '-' && out === '' && (this.min == null || this.min < 0)) out += c;
-      else if (c === '.' && !sawDot) { out += c; sawDot = true; }
+      else if (c === sep && !sawDecimal) { out += sep; sawDecimal = true; }
+      // group separator and other punctuation silently dropped
     }
     return out;
   }
@@ -487,6 +615,18 @@ class UIInput extends UIFormElement {
 
   #onFocus = () => {
     this.#valueAtFocus = this.value ?? '';
+    // When focused: re-render textContent without thousands grouping so the
+    // user can edit naturally — group separators jumping mid-keystroke is
+    // disorienting. Only matters when `locale` is set AND the post-blur
+    // render added grouping; no-op for the default `.` path.
+    if (this.#isNumberMode && this.locale) {
+      const raw = String(this.value ?? '').trim();
+      if (!raw) return;
+      const n = Number(this.#toCanonical(raw));
+      if (!Number.isFinite(n)) return;
+      const ungrouped = this.#format(n);
+      if (this.#textEl.textContent !== ungrouped) this.#textEl.textContent = ungrouped;
+    }
   };
 
   #onBlur = () => {
@@ -497,18 +637,24 @@ class UIInput extends UIFormElement {
   #commitOnBlur() {
     const raw = String(this.value ?? '').trim();
     if (!raw) return;
-    const n = Number(raw);
+    // Canonicalize before Number() — `this.value` may carry the locale's
+    // decimal separator (e.g. "1,5" in de-DE).
+    const n = Number(this.#toCanonical(raw));
     if (!Number.isFinite(n)) return; // leave the bad input visible for the error UX
     const snapped = this.#snap(n);
-    const formatted = this.#format(snapped);
-    if (this.value !== formatted) {
-      this.value = formatted;
-      this.syncValue(formatted);
+    // `this.value` stores the ungrouped, locale-decimal form (round-trippable
+    // through #toCanonical → Number → #format). textContent shows the
+    // grouped display form when `locale` is set.
+    const stored    = this.#format(snapped);
+    const displayed = this.#formatDisplay(snapped);
+    if (this.value !== stored) {
+      this.value = stored;
+      this.syncValue(stored);
       this.dispatchEvent(new Event('input', { bubbles: true }));
     }
-    if (this.#textEl.textContent !== formatted) {
-      this.#textEl.textContent = formatted;
-      this.#textEl.toggleAttribute('data-empty', !formatted);
+    if (this.#textEl.textContent !== displayed) {
+      this.#textEl.textContent = displayed;
+      this.#textEl.toggleAttribute('data-empty', !displayed);
     }
   }
 
@@ -530,13 +676,50 @@ class UIInput extends UIFormElement {
     document.execCommand('insertText', false, text);
   };
 
-  #onStepperDown = (e) => {
+  // Hold-to-repeat: pointerdown fires the initial step + arms an autorepeat
+  // timer. The first repeat fires after REPEAT_INITIAL_MS; subsequent ones
+  // every REPEAT_INTERVAL_MS. pointerup on document stops everything. We
+  // also stop on a stale value (disabled at min/max boundary) so the
+  // browser doesn't keep firing input events for no-op increments.
+  #onStepperUpDown   = (e) => this.#startStepperHold(e, 1);
+  #onStepperDownDown = (e) => this.#startStepperHold(e, -1);
+
+  #startStepperHold(e, multiplier) {
     // Keep focus on the editable surface when the button is pressed.
     e.preventDefault();
-  };
+    if (this.disabled || this.readonly) return;
+    // Initial step fires immediately on press.
+    this.#stepBy(multiplier);
+    this.#stopStepperHold();
+    // Listen for release on document (cheap; only while held).
+    document.addEventListener('pointerup',     this.#onStepperRelease, { once: true });
+    document.addEventListener('pointercancel', this.#onStepperRelease, { once: true });
+    // Initial delay → then continuous repeat.
+    this.#repeatDelayTimer = window.setTimeout(() => {
+      this.#repeatDelayTimer = null;
+      this.#repeatTimer = window.setInterval(() => {
+        const before = this.valueAsNumber;
+        this.#stepBy(multiplier);
+        // Boundary hit → no-op; cancel to avoid wasted intervals + event spam.
+        if (this.valueAsNumber === before) this.#stopStepperHold();
+      }, UIInput.#REPEAT_INTERVAL_MS);
+    }, UIInput.#REPEAT_INITIAL_MS);
+  }
 
-  #onStepUp = () => { this.#stepBy(1); };
-  #onStepDown = () => { this.#stepBy(-1); };
+  #onStepperRelease = () => this.#stopStepperHold();
+
+  #stopStepperHold() {
+    if (this.#repeatDelayTimer != null) {
+      window.clearTimeout(this.#repeatDelayTimer);
+      this.#repeatDelayTimer = null;
+    }
+    if (this.#repeatTimer != null) {
+      window.clearInterval(this.#repeatTimer);
+      this.#repeatTimer = null;
+    }
+    document.removeEventListener('pointerup',     this.#onStepperRelease);
+    document.removeEventListener('pointercancel', this.#onStepperRelease);
+  }
 
   focus() { this.#textEl?.focus(); }
 
@@ -563,10 +746,12 @@ class UIInput extends UIFormElement {
       this.#textEl.removeEventListener('paste',    this.#onPaste);
       this.#textEl.removeEventListener('beforeinput', this.#onBeforeInput);
     }
-    this.#upBtn?.removeEventListener('pointerdown', this.#onStepperDown);
-    this.#downBtn?.removeEventListener('pointerdown', this.#onStepperDown);
-    this.#upBtn?.removeEventListener('click', this.#onStepUp);
-    this.#downBtn?.removeEventListener('click', this.#onStepDown);
+    this.#upBtn?.removeEventListener('pointerdown', this.#onStepperUpDown);
+    this.#downBtn?.removeEventListener('pointerdown', this.#onStepperDownDown);
+    // Cancel any in-flight hold (the document-level pointerup listener
+    // is `{once: true}` so it self-cleans on fire; this also clears the
+    // timers if the host disconnects mid-hold).
+    this.#stopStepperHold();
     this.#textEl = null;
     this.#labelEl = null;
     this.#upBtn = null;
@@ -576,3 +761,4 @@ class UIInput extends UIFormElement {
 customElements.define('input-ui', UIInput);
 
 export { UIInput };
+

package/components/input/input.yaml

@@ -64,6 +64,21 @@ props:
     description: Minimum character length for validation
     type: number
     default: null
+  inputmode:
+    description: >-
+      Mobile keyboard hint per HTML inputmode spec. Routed via setAttribute
+      to the host element. Values: text, decimal, numeric, tel, search, email, url.
+    type: string
+    default: null
+    enum: [text, decimal, numeric, tel, search, email, url, none]
+  autocomplete:
+    description: >-
+      Browser autofill behavior per HTML autocomplete spec. Routed via
+      setAttribute to the host element. Common values: off, on, cc-number,
+      cc-exp, cc-csc, cc-name, email, username, current-password, new-password,
+      one-time-code, given-name, family-name, street-address, postal-code.
+    type: string
+    default: ""
   min:
     description: Minimum numeric value. Applies when `type="number"`. Clamps + drives aria-valuemin
       + the [-] button's disabled state.
@@ -84,6 +99,15 @@ props:
       decimal-count from `step` — e.g. `step=1 precision=2` formats "10.00".
     type: number
     default: null
+  locale:
+    description: BCP-47 locale tag for `type="number"`, e.g. `de-DE`, `fr-FR`, `en-IN`. When set,
+      the input accepts both `.` AND the locale's decimal separator (e.g. `,` in de-DE), uses
+      `Intl.NumberFormat` for display, and groups thousands on blur (e.g. en-US `1,234,567.89`,
+      de-DE `1.234.567,89`). On focus, the input reverts to ungrouped form for easy editing.
+      `.value` always stores the ungrouped, locale-decimal form so `Number(#toCanonical(v))`
+      round-trips. Default empty = en-US-equivalent path (no behavior change).
+    type: string
+    default: ""
   pattern:
     description: Regex pattern for validation. Tested as ^(?:pattern)$ against the value.
     type: string