Dialog

# Aster Component Implementation Prompt — Dialog

## 1. Component Purpose & Canonical Role
- **Component:** Dialog (`dialog`)
- **Category:** Overlays & Dialogs
- **Native Element:** `<dialog>`
- **Summary:** A window that stops the page until people respond.
- **When to Use:** Focused system specs, irreversible confirmations, critical warnings, and modal workflows.
- **When Not to Use:** Deep multi-section inspection (use Drawer) or passive status updates (use Toast).

## 2. Authoritative Repository Files
- **Component CSS:** `components/dialog/dialog.css`
- **Component Spec:** `docs/components/dialog.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
<dialog class="as-dialog" id="system-spec-modal" aria-labelledby="modal-title" aria-describedby="modal-desc">
  <div class="as-dialog__surface">
    <div class="as-dialog__header">
      <span class="as-dialog__title" id="modal-title">SYSTEM SPEC</span>
      <button type="button" class="as-dialog__close" data-dialog-close aria-label="Close dialog"></button>
    </div>
    <div class="as-dialog__hero">
      <h2 class="as-dialog__hero-title">SYSTEM SPEC</h2>
      <p class="as-dialog__hero-subtitle" id="modal-desc">The fundamental laws governing the creation of this digital artifact.</p>
    </div>
    <div class="as-dialog__body">
      <div class="as-dialog__section">
        <div class="as-dialog__section-title">
          <svg width="20" height="20" viewBox="0 0 256 256" fill="currentColor"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"/></svg>
          <span>CORE RULES</span>
        </div>
        <ol class="as-dialog__rule-list">
          <li class="as-dialog__rule-item"><span class="as-dialog__rule-num">1.</span><span>Hide complexity until desired.</span></li>
        </ol>
      </div>
    </div>
    <div class="as-dialog__footer">
      <button type="button" class="as-button as-button--primary as-button--lg as-button--pill-cta" data-dialog-close>
        <svg width="18" height="18" viewBox="0 0 256 256" fill="currentColor"><path d="M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z"/></svg>
        <span class="as-button__label">COPY AS MARKDOWN</span>
      </button>
    </div>
  </div>
</dialog>
```

## 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
```