@adia-ai/web-components 0.5.6 → 0.5.8

package/components/accordion/accordion-item.a2ui.json

@@ -34,12 +34,29 @@
     "anti_patterns": [],
     "category": "layout",
     "composes": [],
-    "events": {},
+    "events": {
+      "toggle": {
+        "description": "Fired when the section opens or closes.",
+        "detail": {
+          "open": {
+            "description": "New open state.",
+            "type": "boolean"
+          }
+        }
+      }
+    },
     "examples": [],
     "keywords": [],
     "name": "UIAccordionItem",
     "related": [],
-    "slots": {},
+    "slots": {
+      "action": {
+        "description": "§206 (v0.5.7): action buttons inside a custom header (e.g. Copy /\nDownload / settings). Children placed at `[slot=\"action\"]` (or\n`[slot=\"actions\"]`, or marked `[data-no-toggle]`) are excluded from\nthe toggle-on-click cascade — clicking them fires their own handler\nwithout also toggling the section."
+      },
+      "header": {
+        "description": "Custom header content. By default `[text]` renders as a plain header\nlabel, but a `[slot=\"header\"]` override lets consumers author rich\nheaders (icon + title + action buttons + caret)."
+      }
+    },
     "states": [],
     "synonyms": {},
     "tag": "accordion-item-ui",

package/components/accordion/accordion-item.yaml

@@ -25,3 +25,23 @@ props:
     description: Whether the section is expanded.
     type: boolean
     default: false
+slots:
+  header:
+    description: |-
+      Custom header content. By default `[text]` renders as a plain header
+      label, but a `[slot="header"]` override lets consumers author rich
+      headers (icon + title + action buttons + caret).
+  action:
+    description: |-
+      §206 (v0.5.7): action buttons inside a custom header (e.g. Copy /
+      Download / settings). Children placed at `[slot="action"]` (or
+      `[slot="actions"]`, or marked `[data-no-toggle]`) are excluded from
+      the toggle-on-click cascade — clicking them fires their own handler
+      without also toggling the section.
+events:
+  toggle:
+    description: Fired when the section opens or closes.
+    detail:
+      open:
+        type: boolean
+        description: New open state.

package/components/accordion/accordion.a2ui.json

@@ -76,7 +76,7 @@
     ],
     "slots": {
       "default": {
-        "description": "pane-ui children"
+        "description": "accordion-item-ui children"
       }
     },
     "states": [

package/components/accordion/accordion.yaml

@@ -25,7 +25,7 @@ events:
         description: New open state of the panel.
 slots:
   default:
-    description: pane-ui children
+    description: accordion-item-ui children
 states:
   - name: idle
     description: Default, ready for interaction.

package/components/accordion/class.js

@@ -128,6 +128,11 @@ export class UIAccordionItem extends UIElement {
   #onClick = (e) => {
     const header = this.querySelector('[slot="header"]');
     if (!header || !header.contains(e.target)) return;
+    // FEEDBACK-16 §2 (v0.5.7 §206): skip toggle when click originates inside an
+    // action slot or an opt-out marker. Lets consumers author action buttons in
+    // custom headers without bubbling-toggle UX. Slot vocabulary matches
+    // drawer-ui + pane-ui.
+    if (e.target.closest('[slot="action"], [slot="actions"], [data-no-toggle]')) return;
 
     this.open = !this.open;
     this.dispatchEvent(new CustomEvent('toggle', {

package/components/agent-artifact/agent-artifact.yaml

@@ -52,6 +52,9 @@ states:
     description: Default, ready for interaction.
 traits: []
 tokens: {}
+requiredIcons:
+  - caret-right
+  - caret-down
 a2ui:
   rules: []
 anti_patterns: []

package/components/agent-artifact/class.js

@@ -58,6 +58,11 @@ export class UIAgentArtifact extends UIElement {
     tone:      { type: String,  default: 'neutral', reflect: true },
   };
 
+  // §205 (v0.5.7): dynamic chevron icons stamped on collapse/expand state
+  // transition (class.js:119+188). Per FEEDBACK-16 §1 + §209 slot-11 ternary-
+  // walker discovery. Note: `this.icon` consumer-supplied — not declared here.
+  static requiredIcons = ['caret-right', 'caret-down'];
+
   static template = () => null;
 
   #headerEl = null;

package/components/calendar-picker/calendar-picker.d.ts

@@ -17,6 +17,16 @@ export class UICalendarPicker extends UIFormElement {
   value: string;
   /** Open/closed reflected state. */
   open: boolean;
+  /** §207 (v0.5.7): label rendered above the trigger. */
+  label: string;
+  /** §207 (v0.5.7): placeholder text when no date is selected. */
+  placeholder: string;
+  /** §207 (v0.5.7): display format for the trigger label (e.g. `"YYYY-MM-DD"`). */
+  format: string;
+  /** §207 (v0.5.7): earliest selectable ISO-date; `null` to disable. */
+  min: string | null;
+  /** §207 (v0.5.7): latest selectable ISO-date; `null` to disable. */
+  max: string | null;
 
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,

package/components/code/code.d.ts

@@ -56,6 +56,14 @@ export class UICode extends UIFormElement {
   /** Drop chrome (border, background) for inline composition. */
   bare: boolean;
   placeholder: string;
+  /** §207 (v0.5.7): native form-element name for `<form>` submission. */
+  name: string;
+  /** §207 (v0.5.7): form-validity `required` flag. */
+  required: boolean;
+  /** §207 (v0.5.7): native `disabled` flag — suppresses input + form submission. */
+  disabled: boolean;
+  /** §207 (v0.5.7): readonly mode — user cannot type but value is form-submitted. */
+  readonly: boolean;
 
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,

package/components/color-picker/class.js

@@ -127,7 +127,13 @@ export class UIColorPicker extends UIFormElement {
   // consumer markup). Aggregated by installIconLoadersForRegistered()
   // across all defined elements. Audited by check-required-icons.mjs
   // (slot 11). Per FEEDBACK-06 §4 + FEEDBACK-07 §4.
-  static requiredIcons = ['copy'];
+  static requiredIcons = ['copy', 'check', 'warning'];
+
+  // §201 (v0.5.7): once-per-element warn dedup for #parseValue malformed
+  // input. Matches the v0.5.5 §184 §8 button-ui icon-only safety-net pattern
+  // + v0.5.7 §215 select-ui parseOptions pattern. Per FEEDBACK-13 §1 +
+  // FEEDBACK-14 §2 (co-credited).
+  static #warnedBadParse = new WeakSet();
 
   static properties = {
     ...UIFormElement.properties,
@@ -418,9 +424,41 @@ export class UIColorPicker extends UIFormElement {
     if (val.startsWith('#')) {
       const o = hexToOklch(val);
       this.#L = o.L; this.#C = o.C; this.#H = o.H;
-    } else if (val.startsWith('oklch(')) {
-      const m = val.match(/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)/);
-      if (m) { this.#L = +m[1]; this.#C = +m[2]; this.#H = +m[3]; }
+      return;
+    }
+    if (val.startsWith('oklch(')) {
+      // §201 (v0.5.7, FEEDBACK-13 §1 + FEEDBACK-14 §2): accept floats, percent
+      // on L, NaN (culori chromaless convention), and 'none' (CSS Color L4
+      // powerless-component syntax). Channel-level normalization: NaN/none → 0;
+      // percent on L → divide by 100. Per the CSS Color L4 "powerless" cascade
+      // (https://www.w3.org/TR/css-color-4/#powerless), zeroing the hue channel
+      // is the spec-defined resolution when chroma is 0 or near-0.
+      const m = val.match(
+        /oklch\(\s*([\d.]+%?|NaN|none)\s+([\d.]+%?|NaN|none)\s+([\d.]+|NaN|none)/i,
+      );
+      if (m) {
+        const parseChan = (s, isL) => {
+          if (s === 'none' || /^NaN$/i.test(s)) return 0;
+          if (isL && s.endsWith('%')) return +s.slice(0, -1) / 100;
+          if (s.endsWith('%')) return +s.slice(0, -1) / 100;
+          return +s;
+        };
+        this.#L = parseChan(m[1], true);
+        this.#C = parseChan(m[2], false);
+        this.#H = parseChan(m[3], false);
+        return;
+      }
+      // No regex match — warn once per element so consumers can correct.
+      // WeakSet dedup matches v0.5.5 §184 §8 button-ui icon-only pattern.
+      if (!UIColorPicker.#warnedBadParse.has(this)) {
+        UIColorPicker.#warnedBadParse.add(this);
+        // eslint-disable-next-line no-console
+        console.warn(
+          `<color-picker-ui>: could not parse value=${JSON.stringify(val)}. ` +
+          `Expected #rrggbb or oklch(L C H) with numeric, NaN, 'none' (CSS L4 ` +
+          `powerless), or % channels. Picker is keeping prior state.`,
+        );
+      }
     }
   }
 

package/components/color-picker/color-picker.test.js

@@ -0,0 +1,96 @@
+/**
+ * color-picker-ui #parseValue tests — §201 (v0.5.7, FEEDBACK-13 §1 +
+ * FEEDBACK-14 §2 co-credited).
+ *
+ * Verifies the relaxed `oklch(L C H)` parser accepts:
+ *   - Numeric channels (regression — the v0.5.6 baseline)
+ *   - `NaN` on any channel (culori chromaless convention; coerces to 0)
+ *   - `none` on any channel (CSS Color L4 powerless syntax; coerces to 0)
+ *   - Percent on L (e.g. `oklch(53% 0.05 240)`; divides by 100)
+ *
+ * Plus:
+ *   - Truly malformed input emits ONE console.warn per element (WeakSet dedup),
+ *     not one per #parseValue call.
+ *   - Hex pass-through remains intact.
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import '../../core/element.js';
+import './color-picker.js';
+
+const tick = () => new Promise((r) => queueMicrotask(r));
+
+function mount(html) {
+  const wrap = document.createElement('div');
+  wrap.innerHTML = html;
+  document.body.appendChild(wrap);
+  return wrap.firstElementChild;
+}
+
+describe('color-picker-ui #parseValue (§201)', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('accepts numeric oklch (baseline regression)', async () => {
+    const p = mount('<color-picker-ui format="oklch" value="oklch(0.6 0.15 240)"></color-picker-ui>');
+    await tick();
+    // Read back via the public value getter — round-tripped through the parser.
+    expect(p.value).toMatch(/oklch/);
+  });
+
+  it('accepts NaN hue (culori chromaless convention)', async () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const p = mount('<color-picker-ui format="oklch" value="oklch(0.53 0.01 NaN)"></color-picker-ui>');
+    await tick();
+    // No warn — NaN is accepted, coerced to 0.
+    expect(warn).not.toHaveBeenCalled();
+    warn.mockRestore();
+  });
+
+  it('accepts `none` (CSS Color L4 powerless)', async () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const p = mount('<color-picker-ui format="oklch" value="oklch(0.5 0 none)"></color-picker-ui>');
+    await tick();
+    expect(warn).not.toHaveBeenCalled();
+    warn.mockRestore();
+  });
+
+  it('accepts percent on L', async () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const p = mount('<color-picker-ui format="oklch" value="oklch(53% 0.05 240)"></color-picker-ui>');
+    await tick();
+    expect(warn).not.toHaveBeenCalled();
+    warn.mockRestore();
+  });
+
+  it('accepts hex (regression)', async () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const p = mount('<color-picker-ui format="hex" value="#3b82f6"></color-picker-ui>');
+    await tick();
+    expect(warn).not.toHaveBeenCalled();
+    warn.mockRestore();
+  });
+
+  it('warns once per element on malformed input', async () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const p = mount('<color-picker-ui format="oklch" value="oklch(banana)"></color-picker-ui>');
+    await tick();
+    // Drive multiple re-parses via setAttribute — should NOT compound the warn count.
+    p.setAttribute('value', 'oklch(orange juice)');
+    await tick();
+    p.setAttribute('value', 'oklch(still broken)');
+    await tick();
+    expect(warn).toHaveBeenCalledTimes(1);
+    expect(warn.mock.calls[0][0]).toMatch(/could not parse value/);
+    warn.mockRestore();
+  });
+
+  it('two independent pickers each get their own warn budget', async () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const p1 = mount('<color-picker-ui format="oklch" value="oklch(broken-1)"></color-picker-ui>');
+    const p2 = mount('<color-picker-ui format="oklch" value="oklch(broken-2)"></color-picker-ui>');
+    await tick();
+    // Two separate instances — each gets their own first-warn.
+    expect(warn).toHaveBeenCalledTimes(2);
+    warn.mockRestore();
+  });
+});

package/components/color-picker/color-picker.yaml

@@ -97,6 +97,8 @@ traits: []
 tokens: {}
 requiredIcons:
   - copy
+  - check
+  - warning
 a2ui:
   rules: []
 anti_patterns: []

package/components/demo-toggle/demo-toggle.a2ui.json

@@ -53,7 +53,9 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "container",
-    "composes": [],
+    "composes": [
+      "switch-ui"
+    ],
     "events": {
       "change": {
         "description": "Fired when the toggle flips. detail contains { state }.",

package/components/demo-toggle/demo-toggle.yaml

@@ -11,6 +11,8 @@ description: >-
   Used on trait detail pages to show "with trait" vs "without trait" on
   the same chrome. data-mode="overlay" stacks the slots on the same
   coordinates so layout never shifts.
+composes:
+  - switch-ui
 props:
   labelOn:
     description: Header label rendered when state is "on".

package/components/feed/feed.css

@@ -133,7 +133,7 @@ feed-item-ui[data-closing] {
     gap: 0.125rem;
   }
   :scope > [slot="body"] strong {
-    font-weight: var(--a-font-weight-strong, 600);
+    font-weight: var(--a-weight-semibold);
   }
   :scope > [data-feed-close] {
     flex-shrink: 0;

package/components/fields/fields.a2ui.json

@@ -43,7 +43,9 @@
       }
     ],
     "category": "form",
-    "composes": [],
+    "composes": [
+      "field-ui"
+    ],
     "events": {},
     "examples": [
       {

package/components/fields/fields.yaml

@@ -14,6 +14,8 @@ description: >-
   The grid alignment lets siblings on the same row line up cleanly —
   consistent label columns + consistent control columns — without
   the wrap-flex jitter of <row-ui wrap>.
+composes:
+  - field-ui
 props:
   inline:
     description: >-

package/components/input/class.js

@@ -16,13 +16,25 @@
  * Uses contenteditable for text entry, ElementInternals for form participation.
  *
  * Slots inside [slot="field"]:
- *   prefix → label → text → suffix → controls (number mode)
+ *   prefix → [leading] → label → text → suffix → [trailing] → controls (number mode)
  *
  *   <input-ui label="Email" placeholder="you@acme.com"></input-ui>
  *   <input-ui label="Email" prefix="user" placeholder="you@acme.com"></input-ui>
  *   <input-ui placeholder="Search" prefix="magnifying-glass"></input-ui>
  *   <input-ui prefix="@" value="kim"></input-ui>
  *
+ *   <!-- Trailing buttons inside the input chrome (§199 v0.5.7) -->
+ *   <input-ui value="Theme 1" suffix="Light">
+ *     <button-ui slot="trailing" icon="arrow-square-out"
+ *                variant="ghost" size="sm"
+ *                aria-label="Open theme browser"></button-ui>
+ *   </input-ui>
+ *
+ *   <!-- Leading button for inline actions before the value -->
+ *   <input-ui value="https://...">
+ *     <button-ui slot="leading" icon="link" variant="ghost" size="sm"></button-ui>
+ *   </input-ui>
+ *
  *   <input-ui type="number" value="42" min="0" max="100" step="1"></input-ui>
  *   <input-ui type="number" value="9.99" step="0.01" precision="2" prefix="$"></input-ui>
  *
@@ -118,9 +130,22 @@ export class UIInput extends UIFormElement {
     super.connected();
     this.setAttribute('role', this.#isNumberMode ? 'spinbutton' : 'textbox');
 
+    // §199 (v0.5.7): consumer-supplied leading/trailing buttons live as
+    // direct children of <input-ui> at author time. Capture references
+    // BEFORE innerHTML wipes them, so we can move them into [slot="field"]
+    // after the shell is built. Querying `:scope > [slot="leading|trailing"]`
+    // (direct-child) avoids matching anything we already moved on a prior
+    // re-render.
+    const leadingNodes = Array.from(this.querySelectorAll(':scope > [slot="leading"]'));
+    const trailingNodes = Array.from(this.querySelectorAll(':scope > [slot="trailing"]'));
+
     if (!this.querySelector('[slot="text"]')) {
       const labelId = this.label ? `input-label-${++UIInput.#labelSeq}` : '';
       this.innerHTML = this.#shellHTML(labelId);
+      // innerHTML wiped the consumer-supplied leading/trailing nodes; re-attach
+      // them into the field at the right positions. Order matches the JSDoc:
+      //   prefix → leading → label → text → suffix → trailing → controls
+      this.#installAffordances(leadingNodes, trailingNodes);
     }
 
     this.#textEl  = this.querySelector('[slot="text"]');
@@ -208,6 +233,81 @@ export class UIInput extends UIFormElement {
     `;
   }
 
+  /**
+   * §199 (v0.5.7) — Move consumer-supplied [slot="leading"] +
+   * [slot="trailing"] nodes into the field at the right insertion points.
+   *
+   * Yaml has declared `leading` + `trailing` slots since v1 ("Leading/
+   * Trailing icon slot, sized to --content-height. Collapses text inline
+   * padding when present.") but the shell never rendered them, so any
+   * consumer-authored `<button-ui slot="trailing">` sat OUTSIDE the
+   * field chrome. §199 closes the schema-vs-impl gap by:
+   *
+   *   1. Capturing the consumer's [slot="leading|trailing"] direct
+   *      children BEFORE `innerHTML = shellHTML` wipes them.
+   *   2. Re-inserting each into `[slot="field"]` at the canonical
+   *      position: leading goes right after [slot="label"] (or after
+   *      [slot="prefix"] when no label), trailing goes right after
+   *      [slot="suffix"] (or after [slot="text"] when no suffix), but
+   *      always BEFORE [slot="controls"] (number-mode stepper column).
+   *
+   * Consumers typically pass `<button-ui slot="trailing">` for inline
+   * actions (copy / clear / open-in-modal); CSS handles the chrome
+   * inheritance (border continuity + size token wiring) via
+   * input.css §199 rules.
+   */
+  #installAffordances(leadingNodes, trailingNodes) {
+    const field = this.querySelector(':scope > [slot="field"]');
+    if (!field) return;
+
+    if (leadingNodes.length) {
+      // Insertion point: after [slot="label"] if present, else after
+      // [slot="prefix"] if present, else as the first child. Walk the
+      // anchor forward so author-order is preserved (first node lands
+      // earliest in DOM).
+      const start =
+        field.querySelector(':scope > [slot="label"]') ||
+        field.querySelector(':scope > [slot="prefix"]');
+      if (start) {
+        let anchor = start;
+        for (const node of leadingNodes) {
+          anchor.after(node);
+          anchor = node;
+        }
+      } else {
+        // No prefix/label — prepend in reverse so the FIRST author-order
+        // node ends up first after all prepends complete.
+        for (const node of leadingNodes.slice().reverse()) field.prepend(node);
+      }
+    }
+
+    if (trailingNodes.length) {
+      // Insertion point: after [slot="suffix"] if present, else after
+      // [slot="text"], but always before [slot="controls"] (number-mode
+      // stepper column). Insert in author order: walk the anchor forward
+      // for each node so the first author-order node lands first in DOM.
+      const controls = field.querySelector(':scope > [slot="controls"]');
+      const after =
+        field.querySelector(':scope > [slot="suffix"]') ||
+        field.querySelector(':scope > [slot="text"]');
+      if (after) {
+        let anchor = after;
+        for (const node of trailingNodes) {
+          anchor.after(node);
+          anchor = node;
+        }
+      } else if (controls) {
+        let anchor = controls.previousElementSibling || controls;
+        for (const node of trailingNodes) {
+          anchor.after(node);
+          anchor = node;
+        }
+      } else {
+        for (const node of trailingNodes) field.appendChild(node);
+      }
+    }
+  }
+
   #promoteAffixes() {
     if (!this.isConnected) return;
     for (const which of ['prefix', 'suffix']) {

package/components/input/input.a2ui.json

@@ -227,13 +227,13 @@
     ],
     "slots": {
       "leading": {
-        "description": "Leading icon slot, sized to --content-height. Collapses text inline padding when present."
+        "description": "Leading affordance slot, inside the field chrome, before the\nvalue. Sized to chrome height. Author `<button-ui slot=\"leading\"\nicon=\"...\" variant=\"ghost\" size=\"sm\">` (or any inline element)\nfor inline actions before the value — e.g. a link-icon button\nnext to a URL input. Wired §199 v0.5.7."
       },
       "text": {
         "description": "Contenteditable text surface for user input"
       },
       "trailing": {
-        "description": "Trailing icon slot, sized to --content-height. Collapses text inline padding when present."
+        "description": "Trailing affordance slot, inside the field chrome, after the\nvalue (and after [slot=\"suffix\"] if present). Sized to chrome\nheight. Author `<button-ui slot=\"trailing\" icon=\"...\"\nvariant=\"ghost\" size=\"sm\" aria-label=\"...\">` for inline actions\nlike copy / clear / open-in-modal. For trailing text/icon\nlabels (e.g. \"Light\" in a theme picker), use the `suffix` prop\ninstead — affordance slots are for interactive buttons, not\ntext. Wired §199 v0.5.7."
       }
     },
     "states": [

package/components/input/input.css

@@ -268,6 +268,63 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     margin-inline-start: auto;
   }
 
+  /* §199 (v0.5.7) — Leading + trailing affordance slots inside the field.
+     Consumer authors `<button-ui slot="leading|trailing">` as a direct
+     child of <input-ui>; class.js#installAffordances moves it into
+     [slot="field"] at the right insertion point on connected(). CSS
+     normalizes the chrome here.
+
+     The yaml declared these slots since v1 ("sized to --content-height,
+     collapses text inline padding when present") but no shell rule ever
+     wired them — the canonical schema-vs-impl gap that motivated audit
+     slot 19 (§192 v0.5.6). §199 closes the gap for input-ui specifically. */
+
+  [slot="field"] > [slot="leading"],
+  [slot="field"] > [slot="trailing"] {
+    flex-shrink: 0;
+    /* Sized to chrome height per yaml contract. The button-ui or icon-ui
+       child receives the sizing tokens; we just constrain the slot box
+       and align it to the field's baseline. */
+    align-self: stretch;
+    display: inline-flex;
+    align-items: center;
+    /* Inline padding moves from [slot="text"] (handled by the field's px)
+       to the slot wrapper, so the button-ui sits flush with the field
+       chrome edge instead of inheriting the field's px gap. Authors who
+       want a gap between value and trailing affordance use [slot="suffix"]
+       for the text — the auto-margin on suffix pushes everything after it
+       to the inline-end edge naturally. */
+  }
+
+  /* Default sizing for `<button-ui>` children of the affordance slots.
+     Token-driven so consumers can override via standard --button-* hooks.
+     Without these defaults, a vanilla `<button-ui slot="trailing" icon="...">`
+     would render at button-ui's default --button-height (40px md) and
+     blow out the input chrome. We bind to the field's content height
+     instead so the button visually matches the input's intrinsic size. */
+  [slot="field"] > [slot="leading"] button-ui,
+  [slot="field"] > [slot="trailing"] button-ui {
+    --button-height: calc(var(--input-height) - 4px);
+    --button-bg: transparent;
+    --button-border: transparent;
+    --button-fg: var(--input-affix-fg);
+    --button-px: var(--a-space-1);
+  }
+
+  [slot="field"] > [slot="leading"] button-ui:hover,
+  [slot="field"] > [slot="trailing"] button-ui:hover {
+    --button-bg: var(--a-ui-bg-hover);
+    --button-fg: var(--a-fg);
+  }
+
+  /* When a trailing affordance is present in number mode, reserve room
+     for the stepper column so it doesn't overlap. (controls is
+     absolutely positioned at inset-inline-end: 0; trailing sits in the
+     flex flow.) Same pattern as [slot="suffix"] in number mode. */
+  [data-number]:has(> [slot="trailing"]) > [slot="trailing"] {
+    margin-inline-end: var(--input-controls-width, calc(var(--input-height) * 0.7));
+  }
+
   /* Disabled */
   :scope[disabled] [slot="field"] {
     background: var(--input-bg-disabled);

package/components/input/input.d.ts

@@ -58,4 +58,6 @@ export class UIInput extends UIFormElement {
   ): void;
   addEventListener(type: 'change', listener: (ev: InputChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener(type: 'input', listener: (ev: InputInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  /** §207 (v0.5.7): Enter-key + native form-submit semantics; dispatched bubbling. */
+  addEventListener(type: 'submit', listener: (ev: Event) => unknown, options?: boolean | AddEventListenerOptions): void;
 }