Input with icon and kbd

Keyboard

• The inner <input> is the only tab stop; icon and kbd chip are not focusable.
• The chip announces a shortcut that the screen must implement (⌘K / / focus the field, Esc clears or blurs); the DS ships the visual only.
• .is-disabled on the wrapper is visual — add disabled to the input to remove it from the tab order.

ARIA

• The wrapper is a plain <span>; no role. Name the input with aria-label ("Search") — the placeholder alone is not a reliable name.
• The icon is decorative (aria-hidden from <Icon>); the kbd chip is plain text and is read as "command K" — acceptable, or hide it with aria-hidden and put the shortcut in aria-keyshortcuts on the input.
• For a search field use type="search" or role="searchbox" so it is listed as such.
• Error: aria-invalid on the input with .is-error on the wrapper.

Focus

• .acrm-inputwrap:focus-within draws the ring on the wrapper (accent border + 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent)); the inner input has outline: 0 so there is one ring, on the box.
• Applies to pointer focus as well (:focus-within, not :focus-visible).

Contrast

Computed from packages/ui/src/tokens/tokens.css:

• Input text --fg on --surface-100 = 17.59:1 (light); on --surface-50 = 13.09:1 (dark).
• Icon and kbd text --fg-secondary #7d8184 on white = 3.93:1 (light); #9a9ca1 on #232529 = 5.59:1 (dark). Kbd is 11px text — below AA 4.5:1 in light.
• Kbd border --border-strong = 1.38:1 (light), 1.55:1 (dark).
• Placeholder --fg-muted = 2.85:1 (light), 3.27:1 (dark).
• Focus border --accent = 4.44:1 (light), 3.83:1 (dark); error border --critical = 3.91:1 / 4.35:1.

Known limits

• The shortcut in .acrm-kbd is not bound by the DS; an unbound chip is a false promise.
• Kbd text (11px, 3.93:1) and the placeholder are below AA in light theme.
• No slot for a clear button; the field cannot be emptied by pointer without a separate control.
• .is-disabled does not disable the input by itself.