# Material Index (Moonarc)

What the work is made of, as a short index: each material a row with its name, where it comes from and a small swatch, and beside the rows a large card for the one picked, with the swatch drawn big (a weave, a speckle, a grain, a crumb or a ripple, in the colours of its block), a note and what it goes into. The rows are radio buttons, so a click, a tap or the arrow keys pick one; pointing at a row shows its card while the pointer rests there. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/material-index` (license key required)
- Tier B · category section · trigger click, hover
- Readout: `<MaterialIndex materials={[{ name, origin, note, used, swatch }]} />`
- Browser support: newly (Chrome 105 · Firefox 121 · Safari 15.4); elsewhere: the first material's card stays shown and the rows still read as a list
- Measured cost: 0 B JS (CSS 15.4 kB raw)
- Page: https://moonarc.dev/components/material-index/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `materials` | `{ name, origin?, note, used?, swatch?, block? }[]` | none | Two to eight materials. swatch: weave, speckle, grain, crumb, ripple or solid (in turn when unset); block the colours it is drawn in. |
| `eyebrow` | `string` | none | A short line above the heading. |
| `headline` | `string` | none | The heading. Slot "headline" wins and may hold an <em>, set in the emphasis face and colour. |
| `copy` | `string` | none | A line under the heading. |
| `label` | `string` | `'Materials'` | Accessible name of the rows (the fieldset's legend). |
| `usedLabel` | `string` | `'Goes into'` | The words before what a material goes into. |
| `level` | `2 | 3` | `2` | Heading level of the section's heading; each card's title is one below. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The section's ground; the swatches keep their blocks on every tone. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import MaterialIndex from '@/components/moonarc/pro/MaterialIndex.astro';
---
<MaterialIndex
  eyebrow="Materials"
  copy="Three clays and the glazes we mix from them."
  materials={[
    { name: 'Speckled stoneware', origin: 'Clay', note: 'A grey clay with iron spots that come through the glaze.', used: 'Cups, bowls', swatch: 'speckle', block: 3 },
    { name: 'Porcelain', origin: 'Clay', note: 'White, smooth and hard to throw thin.', used: 'Espresso cups', swatch: 'solid', block: 4 },
    { name: 'Ash glaze', origin: 'Glaze', note: 'Wood ash and feldspar; it runs in the kiln.', used: 'Vases', swatch: 'ripple', block: 2 },
  ]}
>
  <span slot="headline">What the pieces are <em>made of</em></span>
</MaterialIndex>
```

## Reduced motion

A picked card shows at once, without its short rise.

## With ClientRouter

CSS only; nothing to rebind.

## Craft

- The swatches are CSS gradients in the block's ground and its two drawing colours: a speckle is five dot layers on tiles of prime sizes, so the dots never line up into a pattern the eye catches.
- The rows are a fieldset of radio buttons, so the card that shows is state a keyboard can set and a screen reader announces.
- A pointer resting on a row previews its card without picking it; moving away brings the picked one back.
- On a wide box the card holds beside the rows while the page scrolls past it.

## Replaces

- Ingredient tabs (Shopify themes)
- Material swatch galleries

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/material-index` with a key in components.json (https://moonarc.dev/account/).