Input & Form Field

# Aster Component Implementation Prompt — Input & Form Field

## 1. Component Purpose & Canonical Role
- **Component:** Input & Form Field (`input`)
- **Category:** Form Controls
- **Native Element:** `<input>`
- **Summary:** A field for one line of text.
- **When to Use:** Names, email addresses, slugs, search queries, API keys, and numeric strings.
- **When Not to Use:** Multi-line text (use Textarea) or selecting from predefined options (use Select).

## 2. Authoritative Repository Files
- **Component CSS:** `components/input/input.css`
- **Component Spec:** `docs/components/input.md`
- **Agent Contract:** `skills/using-aster-components/SKILL.md`
- **Compiled Bundle:** `dist/css/aster.css` and `dist/js/aster.js`

## 3. Canonical HTML Structure & Classes
```html
<div class="as-form-field">
  <label class="as-form-field__label" for="ws-name">Workspace Name</label>
  <div class="as-input-box">
    <input class="as-input" type="text" id="ws-name" name="ws-name" data-validate="slug" aria-describedby="ws-name-help ws-name-err" />
    <button type="button" class="as-input__action" data-clear-for="ws-name" aria-label="Clear workspace name">
      <svg class="as-icon" aria-hidden="true"><use href="#i-x"/></svg>
    </button>
  </div>
  <p class="as-form-field__helper" id="ws-name-help">Must be unique across your organization.</p>
  <p class="as-form-field__message as-form-field__error" id="ws-name-err" hidden><span class="as-form-field__error-text"></span></p>
</div>
```

## 4. Measured Geometry
Measured from the rendered component when this page loads.

## 5. Non-Negotiable Aster Constraints
1. **Zero Primitive Color Leaks:** Bind colors strictly to `--as-semantic-color-*` custom properties. Never use `--as-color-primitive-*` or hardcoded hex values in component usage.
2. **Minimum 4px Radius Policy:** Never use `2px` border-radius. Use `--as-radius-sm` (`4px`), `--as-radius-md` (`8px`), `--as-radius-lg` (`12px`), or `--as-radius-full` (`9999px`).
3. **Single Standard Density Mode:** Compact mode (`data-density="compact"` / `.as-*--compact`) is permanently retired. Do not emit compact classes or attributes.
4. **WCAG 2.2 AA Accessibility:** Maintain >= 4.5:1 text contrast, >= 3:1 UI/border contrast, >= 24x24px interactive hit targets, and full keyboard operability (`Tab`, `Enter`, `Space`, `Escape`, Arrow keys).

## 6. Verification Commands
```bash
npm run test:components
npm run test:contrast
npm run test:browser
```