Repository: wagtail/wagtail
File: client/src/controllers/RevealController.ts (TypeScript)

Code before:
export class RevealController extends Controller<HTMLElement> {
  static classes = [
    'closed',
    'closeIcon',
    'opened',
    'openedContent',
    'openIcon',
  ];

  static targets = ['content', 'toggle'];

  static values = {
    closed: { default: false, type: Boolean },
    peeking: { default: false, type: Boolean },
    peekTarget: { default: '', type: String },
    storageKey: { default: '', type: String },
  };

  declare closedValue: boolean;
  declare peekingValue: boolean;

  declare readonly closedClasses: string[];
  declare readonly closeIconClass: string;
  declare readonly hasCloseIconClass: string;
  declare readonly hasOpenIconClass: string;
  declare readonly openedClasses: string[];
  declare readonly openedContentClasses: string[];
  declare readonly openIconClass: string;

  /** Content element target, to be shown/hidden with classes when opened/closed. */
  declare readonly contentTargets: HTMLElement[];

  /** Global selector string to be used to determine the container to add the mouseleave listener to. */
  declare readonly peekTargetValue: string;

  /**  Local storage key to be used to backup the open state of this controller, this can be unique or shared across multiple controllers, it uses the controller identifier for the base.If not provided, the controller will not attempt to store the state to local storage. */
  declare readonly storageKeyValue: string;

  /**  Toggle button element(s) to have their classes and aria attributes updated. */
  declare readonly toggleTargets: HTMLButtonElement[];

  cleanUpPeekListener?: () => void;

  /**
   * Connect the controller, setting up the peeking listener if required,
   * and setting the initial state based on the stored value if available.
   *
   * Finally, dispatch the ready event to signal the controller is ready.
   */
  connect() {
    // If peeking is being used, set up listener and its removal on disconnect

Review comment (suggestion):
Let's add another example above

```ts
 * @example - Saving to local storage
 * ```html
 * <section data-controller="w-reveal" data-w-reveal-storage-key="saved-state">
 *   <button type="button" aria-controls="my-content" type="button" data-action="w-reveal#toggle" data-w-reveal-target="toggle">Toggle</button>
 *   <div id="my-content">CONTENT</div>
 * </section>
 * ```
 */
```

Code after:
 *   <button type="button" data-action="w-reveal#toggle" data-w-reveal-target="toggle" aria-controls="my-content" type="button">Toggle</button>
 *   <div id="my-content">CONTENT</div>
 * </section>
 * ```
 *
 * @example - Saving to local storage
 * ```html
 * <section data-controller="w-reveal" data-w-reveal-storage-key="saved-state">
 *   <button type="button" aria-controls="my-content" type="button" data-action="w-reveal#toggle" data-w-reveal-target="toggle">Toggle</button>
 *   <div id="my-content">CONTENT</div>
 * </section>
 * ```
 */
export class RevealController extends Controller<HTMLElement> {
  static classes = [
    'closed',
    'closeIcon',
    'opened',
    'openedContent',
    'openIcon',
  ];

  static targets = ['content', 'toggle'];

  static values = {
    closed: { default: false, type: Boolean },
    peeking: { default: false, type: Boolean },
    peekTarget: { default: '', type: String },
    storageKey: { default: '', type: String },
  };

  declare closedValue: boolean;
  declare peekingValue: boolean;

  declare readonly closedClasses: string[];
  declare readonly closeIconClass: string;
  declare readonly hasCloseIconClass: string;
  declare readonly hasOpenIconClass: string;
  declare readonly openedClasses: string[];
  declare readonly openedContentClasses: string[];
  declare readonly openIconClass: string;

  /** Content element target, to be shown/hidden with classes when opened/closed. */
  declare readonly contentTargets: HTMLElement[];
  /** Global selector string to be used to determine the container to add the mouseleave listener to. */
  declare readonly peekTargetValue: string;
  /**  Local storage key to be used to backup the open state of this controller, this can be unique or shared across multiple controllers, it uses the controller identifier for the base.If not provided, the controller will not attempt to store the state to local storage. */
  declare readonly storageKeyValue: string;
  /**  Toggle button element(s) to have their classes and aria attributes updated. */
  declare readonly toggleTargets: HTMLButtonElement[];