Components

The built-in components are examples built on defineComponent. Use them directly or as reference for your own.

Tabs

<div data-tabs>
  <div data-tab-list>
    <button data-tab>Tab 1</button>
    <button data-tab>Tab 2</button>
  </div>
  <div data-tab-panel>Panel 1</div>
  <div data-tab-panel>Panel 2</div>
</div>

import { enhance } from "@beardcoder/stitch-js";
import { tabs } from "@beardcoder/stitch-js/components/tabs";

enhance("[data-tabs]", tabs({ defaultIndex: 0 }));

Options:

Option	Description
listSelector	Selector for the tab list container
tabSelector	Selector for individual tab buttons
panelSelector	Selector for tab panels
defaultIndex	Initially active tab index

Keyboard: Arrow Left/Right, Home, End.

Accordion

<div data-accordion>
  <div data-accordion-item>
    <button data-accordion-trigger>Section 1</button>
    <div data-accordion-content>Content</div>
  </div>
</div>

import { enhance } from "@beardcoder/stitch-js";
import { accordion } from "@beardcoder/stitch-js/components/accordion";

enhance("[data-accordion]", accordion({ multiple: false }));

Options:

Option	Description
itemSelector	Selector for accordion items
triggerSelector	Selector for trigger buttons
contentSelector	Selector for content panels
multiple	Allow multiple panels open simultaneously

Keyboard: Arrow Up/Down, Home, End.

Form

Progressively enhances a <form> to submit via fetch (AJAX) instead of a full page reload.

<form data-form action="/api/contact" method="post">
  <input name="email" type="email" required />
  <button type="submit">Send</button>
</form>

import { enhance } from "@beardcoder/stitch-js";
import { form } from "@beardcoder/stitch-js/components/form";

enhance("[data-form]", form({
  onSuccess: (el, res) => console.log("Sent!", res),
  onError: (el, err) => console.error("Failed", err),
}));

Animate

Triggers a CSS class when the element enters the viewport using IntersectionObserver.

<div data-animate class="fade-in">Appears on scroll</div>

.fade-in {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.fade-in.is-visible {
  opacity: 1;
}

import { enhance } from "@beardcoder/stitch-js";
import { animate } from "@beardcoder/stitch-js/components/animate";

enhance("[data-animate]", animate({ once: true }));