Rosette

Usage

<Button href="/plant-finder/" variant="primary" iconAfter="arrow">Find your plant</Button>
<Button type="submit" variant="ink">Get my answer</Button>
<Button size="sm" icon="sliders">Display</Button>

Props

Accessibility

• Use a link for navigation and a button for actions — the component picks the right element for you.
• Labels are always visible text. Icons are hidden from screen readers.
• Touch targets are at least 44×44px.

Usage

<Chip icon="sprout">Beginner friendly</Chip>
<Chip variant="ink" icon="alert">Toxic to pets</Chip>
<Chip variant="mint" icon="check">Totally normal</Chip>

Props

Accessibility

• The words carry the meaning; color only reinforces it.
• Group related chips in a list with an aria-label.
• Plant facts come from one component, PlantFacts, so cards and plant pages always use the same words and icons.

Usage

<Card tone="sun">
  <h3><a class="card-link" href="/care/watering/">Watering</a></h3>
  <p>The soak-and-dry method, step by step.</p>
</Card>

Props

Accessibility

• The stretched-link pattern keeps one focusable link per card, with a clear name, instead of wrapping everything in a link.
• Focus shows on the whole card with the yellow halo.

Usage

<Callout kind="tip" title="Use terracotta pots">
  <p>Unglazed clay breathes, so soil dries faster.</p>
</Callout>

Props

Accessibility

• Rendered with role="note", named by its label and title. Not an <aside>, so it adds no landmark inside <main>.
• The kind is written out, not shown by color alone.

Usage

<CareMeter kind="light" level={3} />
<CareMeter kind="water" level={1} />

Props

Accessibility

• Icons are hidden from screen readers. They hear “Water: Low (1 of 3)”.
• Empty steps are dashed outlines, not faded, so they stay visible.

Usage

<ChoiceGroup
  legend="How much light does the spot get?"
  name="light"
  number={2}
  hint="Direct sun means sunlight falling right on the plant."
  options={[
    { value: 'sun', label: '4+ hours of direct sun' },
    { value: 'some', label: 'A little direct sun' },
  ]}
/>

Props

Accessibility

• Real inputs underneath, so arrow keys, Space and screen readers work as expected.
• Selected pills turn ink and gain a ✓, so selection never relies on color.

Usage

<TextField label="Search the glossary" name="q" type="search" icon="search" />
<TextField label="Email" name="email" type="email" required
  error="Enter an email address like name@example.com" />

Props

Accessibility

• Errors are text, not just a red border: the field also gets a thicker dashed outline.
• Error and hint text are both read out when the field is focused.

Usage

<QuantityStepper label="Quantity" name="qty" value={1} min={1} max={10} />

Props

Accessibility

• Buttons at the limit are marked aria-disabled instead of disabled, so keyboard focus doesn’t jump away.
• Each change is announced politely, e.g. “Quantity: 3”.

Usage

<Steps items={[
  { title: 'Soak', body: 'Water until it runs out of the drainage hole.' },
  { title: 'Drain', body: 'Never leave the pot sitting in water.' },
  { title: 'Dry', body: 'Wait until the soil is dry all the way down.' },
]} />

Props

Accessibility

• A real ordered list, so screen readers announce “1 of 3”.

Usage

<Table caption="Watering by season" striped stack>
  <thead>
    <tr><th scope="col">Season</th><th scope="col">Roughly</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Spring and summer</th><td>Every 1–2 weeks</td></tr>
    <tr><th scope="row">Winter, indoors</th><td>Every 3–6 weeks</td></tr>
  </tbody>
  <Fragment slot="note">A starting point. Always check the soil first.</Fragment>
</Table>

Props

Accessibility

• A real <table> with a <caption>. Use <th scope="col"> for column headers and <th scope="row"> for the first cell of each row.
• The scroll region is focusable, so keyboard users can scroll it with arrow keys, and it is named by the caption.
• Stripes are a scanning aid only; every color pairing keeps AAA contrast.
• With stack, the markup gets explicit ARIA table roles at build time, so the table stays a table for screen readers after the layout changes. The visible cell labels are hidden from screen readers, which already announce the column header.

Usage

<Tabs
  label="Care by season"
  items={[
    { id: 'spring', label: 'Spring' },
    { id: 'summer', label: 'Summer' },
    { id: 'winter', label: 'Winter' },
  ]}
>
  <p slot="spring">Growth starts. Water when the soil is dry.</p>
  <p slot="summer">Bright and warm. Watch for sunburn.</p>
  <p slot="winter">Most rest. Water much less.</p>
</Tabs>

Props

Accessibility

• Without JavaScript: a labelled nav of in-page links, then every panel with its own heading. Nothing is hidden.
• With JavaScript: the ARIA tabs pattern. Left and Right arrows, Home and End move between tabs and select them; Tab moves into the panel.
• The selected tab is a solid ink fill, not just a color change, and uses the system highlight in forced-colors mode.
• Panels are not landmarks, so many tab sets on one page (like the Usage / Props / Accessibility tabs on this page) do not crowd the landmark list.

Usage

<Disclosure summary="Should I mist my succulents?" group="faq">
  <p>No. Water the soil deeply instead.</p>
</Disclosure>

Props

Accessibility

• Works without JavaScript and announces expanded/collapsed state natively.
• The + / − marker is decorative.

Usage

<SectionHeading eyebrow="Plant library" title="Meet the regulars"
  lede="The succulents you’re most likely to find.">
  <Button slot="action" href="/plants/">All plants</Button>
</SectionHeading>

Props

Accessibility

• Only the title is a heading; the eyebrow is plain text so the outline stays clean.

Usage

<PageHeader tone="mint" eyebrow="Plant library" title="Find your succulent"
  lede="12 popular succulents, each with a care card."
  crumbs={[{ href: '/', label: 'Home' }, { label: 'Plants' }]}>
  <PlantArt slot="art" kind="aloe" leaf="#5aa679" />
</PageHeader>

Props

Accessibility

• Contains the page’s only h1.
• Art in the art slot is hidden from screen readers.

Usage

<Breadcrumbs items={[{ href: '/', label: 'Home' }, { href: '/plants/', label: 'Plant library' }, { label: 'Jade Plant' }]} />

Props

Accessibility

• A labelled nav with an ordered list. The current page has aria-current="page".
• Separators are hidden from screen readers.

Usage

<Divider />
<Divider icons={['cactus', 'pot', 'cactus']} />

Props

Accessibility

• Purely decorative and hidden from screen readers. Use headings to structure content.