design-components:
  version: 1
  components:
    - id: button
      state: stable
      surfaces: [public-web, product-app, interactive-learning, developer-platform]
      recipe: actions/button.yaml
      examples: [primary-task, secondary-task, destructive-confirmation]
      anti-examples: [multiple-primary-actions, icon-without-name]
      tokens: [color.accent, color.danger, radius.control, motion.fast]
    - id: field
      state: stable
      surfaces: [public-web, product-app, interactive-learning, developer-platform]
      recipe: forms/field.yaml
      examples: [labeled-input, inline-validation]
      anti-examples: [placeholder-as-label, error-by-color-only]
      tokens: [color.text, color.text-muted, color.border, radius.control]
    - id: status-panel
      state: candidate
      surfaces: [product-app, interactive-learning, developer-platform]
      recipe: feedback/status-panel.yaml
      examples: [empty, loading, error, partial, completed]
      anti-examples: [blank-screen, spinner-without-context]
      tokens: [color.surface, color.text, color.danger, radius.surface]