@pudge-ui/mcp-server 0.1.0

package/spec/components/dials/mode-dial.md

@@ -0,0 +1,123 @@
+---
+name: Mode Dial
+id: mode-dial-body
+class: .mode-dial-body
+category: dials
+index: 2
+materials: [panel, chrome]
+sizes: [md]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# Mode Dial
+
+## Physical Analog
+**Reference devices**: Nikon D850 mode dial (P/S/A/M), Canon EOS 5D mode dial, Sony Alpha PASM dial.
+**Mechanism**: Detented rotary selector switch with fixed number of positions (typically 6-12 modes). Mechanically limited to defined arc with hard stops. Wiper contact rotates across circular array of fixed contacts on PCB. More assertive detent than encoder (larger ball bearing, stiffer spring).
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Outer ring | 120x120px, stationary reference with tick marks |
+| Inner rotor | 96x96px, rotating knurled element |
+| Center cap | inset 20px, displays mode letter |
+| Amber notch | 4x18px at top, pointer to selected mode |
+| Detent spacing | 360/N degrees (N = number of modes) |
+
+## CSS Recipe
+
+### Wrapper
+```css
+.mode-dial-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
+```
+
+### Outer Ring (Stationary Reference)
+```css
+.mode-dial-outer {
+  width: 120px; height: 120px; border-radius: 50%;
+  background: #111; border: 2px solid #0a0a0a;
+  box-shadow: 0 4px 0 #080808, 0 6px 12px rgba(0,0,0,0.6);
+  position: relative; display: flex; align-items: center; justify-content: center;
+}
+```
+
+### Rotating Inner Body
+```css
+.mode-dial-body {
+  width: 96px; height: 96px; border-radius: 50%;
+  background: radial-gradient(circle at 38% 32%, #363636, #1a1a1a 70%);
+  border: 2px solid #0a0a0a; position: relative; cursor: pointer;
+  box-shadow: 0 2px 0 #0a0a0a, inset 0 1px 0 #444;
+}
+```
+
+### Position Pointer (Amber Notch)
+```css
+.mode-dial-notch {
+  position: absolute; top: 6px; left: 50%;
+  width: 4px; height: 18px;
+  background: linear-gradient(to bottom, var(--amber), var(--amber-dim));
+  border-radius: 2px; transform: translateX(-50%);
+  box-shadow: 0 0 8px var(--amber-glow);
+  transition: transform 0.35s var(--spring);
+  z-index: 2;
+}
+```
+
+### Center Cap (Mode Display)
+```css
+.mode-dial-center {
+  position: absolute; inset: 20px; border-radius: 50%;
+  background: radial-gradient(circle at 40% 35%, #2e2e2e, #161616);
+  border: 2px solid #111;
+  box-shadow: inset 0 1px 0 #3a3a3a, 0 1px 3px #000;
+  display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+}
+.mode-dial-label { font-family: var(--font-display); font-size: 13px; color: var(--amber); letter-spacing: 1px; line-height: 1; }
+.mode-dial-sub { font-size: 7px; letter-spacing: 1px; color: var(--text-muted); margin-top: 2px; font-family: var(--font-ui); }
+```
+
+## HTML Structure
+```html
+<div class="mode-dial-wrap">
+  <div class="mode-dial-outer">
+    <div class="mode-dial-body">
+      <div class="mode-dial-notch"></div>
+      <div class="mode-dial-center">
+        <div class="mode-dial-label">M</div>
+        <div class="mode-dial-sub">MANUAL</div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+## Size Variants
+No explicit size variants. Fixed at 120px outer / 96px inner.
+
+## Material Variants
+- Outer ring: Dark recessed housing
+- Inner rotor: Lathe-turned surface (radial-gradient with off-center highlight)
+- Center cap: Recessed with sunken gradient
+
+## Theme Behavior
+- Uses hardcoded dark colors (camera mode dials are always dark metal)
+- Amber indicator is fixed
+- May need light theme overrides for outer ring contrast
+
+## Constraints
+1. Notch transition MUST use `--spring` easing at 0.35s -- overshoot mimics spring-loaded detent snap.
+2. Notch is rotated via JS by increments of `360/N` degrees where N = number of modes.
+3. Center cap MUST display the current mode letter (updated via JS).
+4. Outer ring is STATIONARY -- only the inner body and notch rotate.
+5. Off-center highlight at `38% 32%` simulates lathe-turned surface.
+
+## Accessibility
+- Add `tabindex="0"` and `role="listbox"` or custom role
+- Keyboard: Arrow keys to rotate between modes
+- `aria-label` should indicate current mode
+- Requires JS for rotation and mode switching

package/spec/components/dials/radial-knob.md

@@ -0,0 +1,150 @@
+---
+name: Radial Knob
+id: radial-knob
+class: .radial-knob
+category: dials
+index: 3
+materials: [rubber, brushed-metal, glossy]
+sizes: [md]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# Radial Knob
+
+## Physical Analog
+**Reference devices**: Technics SL-1200 pitch control, Pioneer DJM mixer EQ knobs, Mackie mixer gain/pan knobs, hi-fi amplifier volume knobs.
+**Mechanism**: Rotary potentiometer with fixed rotation range (270-300 degrees). Carbon film or cermet resistive element with wiper contact. Dead zone at bottom (60-90 degrees). Three material variants: rubber (DJ/studio), brushed aluminum (hi-fi), glossy polycarbonate (consumer).
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Knob body | 80x80px |
+| Rotation range | 270-300 degrees with hard stops |
+| Indicator | 3x12px amber bar, rotates from center |
+| Center cap | 24x24px recessed circle |
+
+## CSS Recipe
+
+### Container
+```css
+.radial-dial { display: flex; flex-direction: column; align-items: center; gap: 12px; }
+```
+
+### Knob Body (Default: Rubber)
+```css
+.radial-knob {
+  width: 80px; height: 80px; border-radius: 50%;
+  position: relative; cursor: grab; user-select: none;
+  background: linear-gradient(145deg, #3a3835, #1a1816);
+  border: 2px solid var(--border-mid);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
+  display: flex; align-items: center; justify-content: center;
+}
+.radial-knob:active { cursor: grabbing; }
+```
+
+### Indicator
+```css
+.radial-indicator {
+  position: absolute; width: 3px; height: 12px; border-radius: 2px;
+  top: 6px; left: 50%; margin-left: -1.5px;
+  background: var(--amber); transform-origin: 50% 34px;
+  box-shadow: 0 0 6px var(--amber-glow);
+}
+```
+
+### Center Cap
+```css
+.radial-knob .knob-center {
+  width: 24px; height: 24px; border-radius: 50%;
+  background: var(--bg-inset); border: 1px solid var(--border-subtle);
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
+}
+```
+
+### Metal Variant
+```css
+.radial-knob.variant-metal {
+  background: linear-gradient(145deg, #d8d6d0, #b8b6b0);
+  border-color: #a8a6a0;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.5);
+}
+```
+
+### Glossy Variant
+```css
+.radial-knob.variant-glossy {
+  background: linear-gradient(145deg, var(--bg-surface), var(--bg-panel));
+  border-color: var(--border-mid);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 var(--glossy-hi);
+}
+```
+
+### Value Label
+```css
+.radial-value {
+  font-family: var(--font-display); font-size: 12px;
+  color: var(--text-primary); letter-spacing: 1px;
+}
+```
+
+## HTML Structure
+```html
+<!-- Rubber (default) -->
+<div class="radial-dial">
+  <div class="radial-knob">
+    <div class="radial-indicator"></div>
+    <div class="knob-center"></div>
+  </div>
+  <span class="radial-value">RUBBER</span>
+</div>
+
+<!-- Metal variant -->
+<div class="radial-dial">
+  <div class="radial-knob variant-metal">
+    <div class="radial-indicator"></div>
+    <div class="knob-center"></div>
+  </div>
+  <span class="radial-value">METAL</span>
+</div>
+
+<!-- Glossy variant -->
+<div class="radial-dial">
+  <div class="radial-knob variant-glossy">
+    <div class="radial-indicator"></div>
+    <div class="knob-center"></div>
+  </div>
+  <span class="radial-value">GLOSSY</span>
+</div>
+```
+
+## Size Variants
+No explicit size variants. Fixed at 80x80px.
+
+## Material Variants
+
+| Variant | Background | Border | Highlight Opacity |
+|---------|-----------|--------|-------------------|
+| default (rubber) | `linear-gradient(145deg, #3a3835, #1a1816)` | `var(--border-mid)` | 0.08 |
+| `.variant-metal` | `linear-gradient(145deg, #d8d6d0, #b8b6b0)` | `#a8a6a0` | 0.5 |
+| `.variant-glossy` | `linear-gradient(145deg, bg-surface, bg-panel)` | `var(--border-mid)` | 0.14 |
+
+## Theme Behavior
+- Rubber and metal variants use hardcoded gradients
+- Glossy variant adapts via surface tokens
+- Amber indicator is fixed across themes
+
+## Constraints
+1. Indicator MUST rotate via `transform-origin` set to knob center (`50% 34px`).
+2. Three material variants MUST use the Material Recipes from Section 3.
+3. Cursor MUST change from `grab` to `grabbing` on `:active`.
+4. Center cap represents shaft nut / set-screw cover.
+5. Highlight opacity MUST match material: rubber=0.08, metal=0.5, glossy=0.14.
+
+## Accessibility
+- Add `tabindex="0"` and `role="slider"` with `aria-valuenow`, `aria-valuemin`, `aria-valuemax`
+- Keyboard: Arrow keys to rotate
+- Requires JS for rotation interaction

package/spec/components/dials/rotary-encoder.md

@@ -0,0 +1,118 @@
+---
+name: Rotary Encoder
+id: rotary
+class: .rotary
+category: dials
+index: 1
+materials: [panel, chrome]
+sizes: [md]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# Rotary Encoder
+
+## Physical Analog
+**Reference devices**: Behringer DJX700 browse knob, Akai MPC2000 data wheel, Roland SP-404 volume, Mackie mixer pan/aux knobs.
+**Mechanism**: Incremental optical or mechanical rotary encoder. Unlike a potentiometer, can rotate infinitely. Slotted disc generates quadrature pulses, typically 16-24 detents per revolution. Ball bearing on spring presses against machined notches for click-click-click feel.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Knob body | 100x100px, machined aluminum or molded plastic |
+| Knurled edge | 8px ring around body (repeating-conic-gradient) |
+| Center cap | inset 22px from all sides |
+| Indicator notch | 4x20px amber bar at 12 o'clock |
+| Detent per revolution | 16-24 clicks |
+
+## CSS Recipe
+
+### Wrapper
+```css
+.rotary-wrap { display: flex; align-items: center; gap: 24px; }
+```
+
+### Knob Body
+```css
+.rotary {
+  width: 100px; height: 100px; border-radius: 50%;
+  position: relative; cursor: pointer;
+  background: radial-gradient(circle at 35% 30%, #4b4b4b, #1b1b1b 70%);
+  border: 2px solid #0c0c0c;
+  box-shadow: 0 4px 0 #090909, inset 0 1px 0 #666, 0 8px 20px rgba(0,0,0,0.4);
+  transition: transform 220ms var(--snap-fast);
+}
+```
+
+### Hover (One Detent Click)
+```css
+.rotary:hover { transform: rotate(8deg); }
+```
+
+### Knurled Edge Ring
+```css
+.rotary::before {
+  content: ''; position: absolute; inset: -8px; border-radius: 50%;
+  background: repeating-conic-gradient(#202020 0deg 4deg, #0d0d0d 4deg 8deg);
+  z-index: -1;
+}
+```
+
+### Position Indicator Notch
+```css
+.rotary-notch {
+  position: absolute; top: 10px; left: 50%;
+  width: 4px; height: 20px; transform: translateX(-50%);
+  border-radius: 10px;
+  background: linear-gradient(180deg, #ffc14d, #b56b00);
+  box-shadow: 0 0 14px var(--amber-glow);
+}
+```
+
+### Center Cap (Shaft Nut Cover)
+```css
+.rotary-center {
+  position: absolute; inset: 22px; border-radius: 50%;
+  background: radial-gradient(circle at 30% 30%, #2c2c2c, #141414);
+  display: flex; align-items: center; justify-content: center;
+  border: 1px solid #2c2c2c;
+}
+.rotary-text { font-family: var(--font-display); color: var(--amber); font-size: 14px; }
+```
+
+## HTML Structure
+```html
+<div class="rotary-wrap">
+  <div class="rotary">
+    <div class="rotary-notch"></div>
+    <div class="rotary-center"><div class="rotary-text">AUX</div></div>
+  </div>
+</div>
+```
+
+## Size Variants
+No explicit size variants defined. Fixed at 100x100px.
+
+## Material Variants
+- Body: Machined aluminum look (radial-gradient with off-center highlight)
+- Knurled edge: Conic gradient simulating diamond-pattern cut
+- Center cap: Recessed metallic cap
+
+## Theme Behavior
+- Knob body uses hardcoded dark grays (metal is always dark/reflective)
+- Amber indicator and glow are fixed
+- Shadow depths may need lightening in light theme
+
+## Constraints
+1. Off-center highlight (`circle at 35% 30%`) is REQUIRED -- simulates domed/convex top catching light.
+2. Knurled edge MUST use `repeating-conic-gradient` at 4deg intervals.
+3. Hover rotation of 8deg simulates one detent click -- provides immediate feedback.
+4. Position indicator (notch) MUST be at 12 o'clock position, rotated via JS.
+5. Shadow stack MUST include both bottom edge (`0 4px 0`) AND ambient (`0 8px 20px`).
+
+## Accessibility
+- Add `tabindex="0"` and `role="slider"` with `aria-valuenow`, `aria-valuemin`, `aria-valuemax`
+- Keyboard: Arrow keys to rotate (increment/decrement)
+- Requires JS for rotation interaction and value updates

package/spec/components/forms/color-picker.md

@@ -0,0 +1,99 @@
+---
+name: Color Picker
+id: color-picker
+class: .color-bar-picker
+category: forms
+index: 5
+materials: [phosphor-screen]
+sizes: [default]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# Color Picker
+
+## Physical Analog
+**Reference devices**: SMPTE/EBU color bar test pattern, broadcast monitor calibration, chroma key color selectors.
+**Mechanism**: Derived from the SMPTE color bar test signal -- a standardized video test pattern used since 1978 to calibrate broadcast monitors. The seven vertical bars (white, yellow, cyan, green, magenta, red, blue) are arranged in a specific order representing decreasing luminance. In this UI, each bar is selectable -- clicking a bar selects that color, shown by a white dot indicator at the bottom.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Height | 40px |
+| Border radius | `--radius-sm` (4px) |
+| Bars | 7 equal-width columns |
+| Selection dot | 6x6px circle |
+
+## CSS Recipe
+
+### Container (`.color-bar-picker`)
+```css
+.color-bar-picker {
+  display: flex; height: 40px; border-radius: var(--radius-sm);
+  overflow: hidden; border: 1px solid var(--border-subtle);
+  box-shadow: var(--shadow-inset); cursor: pointer;
+}
+```
+
+### Swatch (`.color-bar-swatch`)
+```css
+.color-bar-swatch {
+  flex: 1; transition: opacity 0.15s; position: relative;
+}
+```
+
+### Swatch hover
+```css
+.color-bar-swatch:hover { opacity: 0.8; }
+```
+
+### Swatch selected
+```css
+.color-bar-swatch.selected::after {
+  content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
+  width: 6px; height: 6px; background: #fff; border-radius: 50%;
+  box-shadow: 0 0 6px rgba(255,255,255,0.5);
+}
+```
+
+## HTML Structure
+```html
+<div class="color-bar-picker" style="width:210px">
+  <div class="color-bar-swatch" style="background:#fff"></div>
+  <div class="color-bar-swatch selected" style="background:#ffff00"></div>
+  <div class="color-bar-swatch" style="background:#00ffff"></div>
+  <div class="color-bar-swatch" style="background:#00ff00"></div>
+  <div class="color-bar-swatch" style="background:#ff00ff"></div>
+  <div class="color-bar-swatch" style="background:#ff0000"></div>
+  <div class="color-bar-swatch" style="background:#0000ff"></div>
+</div>
+```
+
+## Size Variants
+No size variants defined.
+
+## Material Variants
+No material variants. Uses recessed inset styling to simulate a display/monitor cavity.
+
+## Theme Behavior
+- Border swaps via `--border-subtle`
+- Inset shadow adapts by theme
+- SMPTE colors are absolute (do not change with theme)
+- Selection dot is always white with white glow
+
+## Constraints
+1. MUST use SMPTE color bar order: white, yellow, cyan, green, magenta, red, blue
+2. MUST use recessed styling (inset shadow) to simulate a monitor display
+3. Selected bar MUST show a white dot with glow at the bottom
+4. Hover MUST reduce opacity to 0.8 (light leaking through pressed key)
+5. Only ONE bar can be `.selected` at a time
+6. Bars MUST be equal width (`flex: 1`)
+7. MUST use `overflow: hidden` to clip bar corners to the container radius
+
+## Accessibility
+- Container should have `role="radiogroup"` with `aria-label="Color picker"`
+- Each swatch should have `role="radio"` with `aria-checked`
+- Include `aria-label` on each swatch with the color name
+- Support Left/Right arrow key navigation between swatches

package/spec/components/forms/file-input.md

@@ -0,0 +1,105 @@
+---
+name: File Input
+id: file-input
+class: .file-input
+category: forms
+index: 6
+materials: [glossy-polycarbonate]
+sizes: [default]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# File Input
+
+## Physical Analog
+**Reference devices**: CompactFlash card slot on Nikon cameras, SD card slot on Sony cameras, Memory Stick slot on Sony devices.
+**Mechanism**: A spring-loaded card slot with an eject mechanism. The user pushes a memory card into a recessed slot until it clicks (a spring-loaded catch engages). To remove, the user pushes the card again (push-push release mechanism) or presses an adjacent eject button. The dashed border in the UI represents the card slot opening, and the eject button icon represents the physical eject mechanism.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Width | 220px |
+| Padding | 10px 14px |
+| Border | 2px dashed |
+| Border radius | `--radius-md` (8px) |
+| Icon font size | 18px |
+| Text font size | 10px |
+| Eject button | 24x24px |
+| Element gap | 10px |
+
+## CSS Recipe
+
+### Container (`.file-input`)
+```css
+.file-input {
+  display: flex; align-items: center; gap: 10px;
+  padding: 10px 14px; background: var(--bg-surface);
+  border: 2px dashed var(--border-mid); border-radius: var(--radius-md);
+  cursor: pointer; transition: border-color 0.15s;
+  width: 220px;
+}
+```
+
+### Hover
+```css
+.file-input:hover { border-color: var(--amber); }
+```
+
+### Icon (`.file-input-icon`)
+```css
+.file-input-icon { font-size: 18px; color: var(--text-muted); }
+```
+
+### Text (`.file-input-text`)
+```css
+.file-input-text { font-family: var(--font-ui); font-size: 10px; font-weight: 500; color: var(--text-muted); letter-spacing: 1px; }
+```
+
+### Eject button (`.file-input-eject`)
+```css
+.file-input-eject {
+  margin-left: auto; width: 24px; height: 24px; border-radius: var(--radius-sm);
+  background: var(--bg-panel); border: 1px solid var(--border-subtle);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 10px; color: var(--text-muted); cursor: pointer;
+}
+```
+
+## HTML Structure
+```html
+<div class="file-input">
+  <span class="file-input-icon">&#128190;</span>
+  <span class="file-input-text">INSERT CARD</span>
+  <div class="file-input-eject">&#9166;</div>
+</div>
+```
+
+## Size Variants
+No size variants defined.
+
+## Material Variants
+No material variants. Uses raised surface background with dashed border for the slot opening.
+
+## Theme Behavior
+- Background swaps via `--bg-surface`
+- Border color swaps via `--border-mid`
+- Hover border always uses `--amber`
+- Eject button adapts via panel/subtle tokens
+
+## Constraints
+1. MUST use dashed border (2px) to represent the card slot opening
+2. MUST include eject button on the right side
+3. Hover MUST highlight border in amber (card slot LED indicator)
+4. MUST use `margin-left: auto` on eject to push it to the right
+5. Label text MUST use uppercase with letter-spacing (equipment labeling convention)
+6. Eject button MUST be 24x24px square with `--radius-sm` corners
+
+## Accessibility
+- Should wrap a hidden `<input type="file">` element
+- Container should be labelled with `aria-label="File upload"` or associated label
+- Eject button should have `aria-label="Remove file"` and `role="button"`
+- Support keyboard activation (Enter/Space to open file dialog)
+- After file is selected, display filename in the text area

package/spec/components/forms/search-bar.md

@@ -0,0 +1,96 @@
+---
+name: Search Bar
+id: search-bar
+class: .search-bar
+category: forms
+index: 3
+materials: [phosphor-screen]
+sizes: [default]
+interactive: true
+requires_js: false
+canvas: false
+---
+
+# Search Bar
+
+## Physical Analog
+**Reference devices**: iPod search (introduced in iPod Photo), camera image search/filter.
+**Mechanism**: A text input combined with a magnifying glass icon, contained in a pill-shaped housing. The pill shape (full border-radius) distinguishes it from standard text inputs and signals a "find/filter" action rather than data entry. Derived from the physical "search" button on remote controls and CD/DVD players.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Width | 220px |
+| Height | 36px |
+| Padding | 0 12px |
+| Border radius | `--radius-pill` (100px) |
+| Icon-input gap | 8px |
+| Font size | 11px |
+| Icon font size | 14px |
+
+## CSS Recipe
+
+### Container (`.search-bar`)
+```css
+.search-bar {
+  display: flex; align-items: center; gap: 8px;
+  width: 220px; height: 36px; padding: 0 12px;
+  background: var(--bg-inset); border: 1px solid var(--border-mid);
+  border-radius: var(--radius-pill); box-shadow: var(--shadow-inset);
+}
+```
+
+### Icon (`.search-bar-icon`)
+```css
+.search-bar-icon { color: var(--text-muted); font-size: 14px; flex-shrink: 0; }
+```
+
+### Input
+```css
+.search-bar input {
+  flex: 1; background: transparent; border: none; outline: none;
+  color: var(--text-primary); font-family: var(--font-ui); font-size: 11px;
+  font-weight: 500; letter-spacing: 0.5px;
+}
+.search-bar input::placeholder { color: var(--text-muted); }
+```
+
+### Focus
+```css
+.search-bar:focus-within { border-color: var(--amber); }
+```
+
+## HTML Structure
+```html
+<div class="search-bar">
+  <span class="search-bar-icon">&#128269;</span>
+  <input type="text" placeholder="Search files...">
+</div>
+```
+
+## Size Variants
+No size variants defined.
+
+## Material Variants
+No material variants. Uses phosphor screen (recessed) styling with pill shape.
+
+## Theme Behavior
+- Background uses `--bg-inset` (recessed cavity)
+- Inset shadow adapts by theme
+- Focus-within border always amber
+- Icon and placeholder use `--text-muted`
+
+## Constraints
+1. MUST use pill border-radius (`--radius-pill`, 100px) to distinguish from text inputs
+2. MUST include magnifying glass icon on the left
+3. MUST use `focus-within` on the container (not `:focus` on the input) for border highlight
+4. Input inside MUST be transparent background with no border
+5. MUST use recessed styling (inset shadow + `--bg-inset`)
+6. MUST use UI font (`--font-ui`), not monospace, for search queries
+
+## Accessibility
+- Use `role="search"` on the container or wrap in a `<search>` element
+- Input should have `type="search"` for proper semantics
+- Include `aria-label="Search"` if no visible label
+- Support Enter to submit and Escape to clear