Controllers

Overview

The spec includes production-ready Stimulus controllers for common UI patterns. Each controller is:

• Fully documented with usage examples
• Accessible by default (ARIA attributes, keyboard support)
• Lightweight with no external dependencies
• Easy to customize via Stimulus values and targets

Available Controllers

Controller	Purpose
toggle	Generic show/hide functionality
mobile_nav	Mobile menu drawer with backdrop
animate	Scroll-triggered animations
form	Async form submission
reading_progress	Progress bar for long content
clipboard	Copy to clipboard with feedback
toc	Table of contents highlighting
search	Search modal with Pagefind

Controller Registration

Controllers are registered manually in application.js:

import { Application } from "@hotwired/stimulus";

const application = Application.start();

import ToggleController from "./controllers/toggle_controller.js";
application.register("toggle", ToggleController);

// Register more controllers...

Usage Pattern

All controllers follow the same pattern:

<div data-controller="controller-name">
  <button data-action="click->controller-name#methodName">
    Trigger
  </button>
  <div data-controller-name-target="targetName">
    Content
  </div>
</div>

Customization

Controllers accept configuration via Stimulus values:

<div data-controller="toc"
     data-toc-offset-value="100">
  ...
</div>