# Goldstones Family Farm — component inventory

Every component in the system, where it is used, and its provenance. Components added
after the block 4 freeze are flagged **POST-FREEZE**.

Source of truth for values: `tokens.json` / `tokens.css`.
Source of truth for markup and states: `components.html`.

**All thirteen page templates are built and block 6 hardening has been run.** An earlier
revision of this file carried a *(built)* marker in the tables that meant the opposite —
it dated from a pass when only Home existed. Those markers have been removed; the
"Templates built" section below is the accurate record.

---

## Block 2 — Global furniture

| Component | States built | Used on |
|---|---|---|
| Header — desktop | top of page, scrolled (sticky, e3), over hero photograph, over navy (`/shoots/`) | all pages |
| Header — mobile | closed, drawer open | all pages |
| Logo slot | fixed bounding box, clear space defined, max height per breakpoint | all pages |
| Mobile navigation drawer | open, closing, page-behind treatment | all pages |
| Footer | 4-column desktop, stacked mobile | all pages |
| Button — primary | default, hover, focus, active, disabled, loading | all pages |
| Button — secondary | default, hover, focus, active, disabled, loading | all pages |
| Button — tertiary | default, hover, focus, active, disabled | all pages |
| Button — external link | default, hover, focus, active — carries ↗ indicator | Stay, Shoots, Fish, Shop |
| Button — full-width mobile | default | all pages, ≤430 |
| Field — text | default, focus, filled, disabled, error, success | Contact, Contracting, Match enquiry |
| Field — textarea | default, focus, filled, error | Contact, Contracting, Match enquiry |
| Field — select | default, focus, filled, disabled | Contact |
| Field — checkbox | default, focus, checked, disabled | Contact, Checkout |
| Field — radio | default, focus, selected, disabled | Shop (delivery/collection) |
| Field — quantity stepper | default, focus, at-minimum, at-maximum | Shop, Product detail, Basket, Day tickets |
| Field — date input | default, focus, error | Match enquiry |
| Turnstile slot | unverified, verified | all three forms |
| Honeypot | visually hidden | all three forms |

## Block 3 — Content components

| Component | States built | Used on |
|---|---|---|
| Hero — home | full-bleed photo, H1, standfirst, two buttons | Home |
| Hero — section | photo, H1, standfirst, one button | Stay, Fish, Contracting, Shop, About |
| Hero — utility | no photograph | Contact, Privacy, Terms |
| Gate card | default, hover | Home |
| Cottage card | default, hover; three-image interior cluster | Stay, Home |
| Key-facts row | up to 4 facts + 1 provisional slot; wraps at 375 | Cottage card, Cottage detail |
| Product card | available, collection only, out of stock | Shop |
| Service card | default, hover — **no image slot by design** | Contracting |
| Amenity list | 2-col desktop, 1-col mobile | Cottage detail |
| Rules list | numbered, 2-col desktop, 1-col mobile | Fish |
| Seasonal band | with image + button, no image + no button, image + button, 4-word and 20-word headings | Home |
| Sister-brand band | navy, contained within page margin | Home, Stay, Fish |
| Gallery | 4-up grid with +N overflow, lightbox, swipeable mobile | Cottage detail, Fish |
| Prose block | body, subheads, list, inline link, pull quote; 68ch measure | About, Home (short form) |
| Empty state | shop empty | Shop |
| 404 | moss ground | 404 |

## Block 4 — Commerce and booking

| Component | States built | Used on |
|---|---|---|
| Product detail | gallery + thumbnails, unit panel, spec table, delivery note, stepper, add to basket | Product detail |
| Unit panel | given its own line and weight — the component that prevents a phone call | Product detail |
| Basket | drawer (desktop), full page (mobile), line items, qty edit, remove, subtotal, delivery note | Shop, Product detail |
| Delivery / collection choice | delivery selected, collection selected | Basket |
| Stripe hand-off panel | leaving-site state | Checkout |
| Stripe return page | success | Order confirmation |
| Day ticket purchase | date picker, two steppers (adult/under-16), live total, buy button | Fish |
| Date picker | open, chosen, closed (struck through), match day (tint + dot), horizontally scrollable ≤430 | Day ticket purchase |
| Availability chip | available, limited, full — **shown per lake, always visible** | Day ticket purchase |
| Sold-out fallback | names the reason, offers next date + all open dates | Day ticket purchase |
| Match price panel | £100 per lake, moss ground | Fish |
| Match enquiry form | 7 fields + Turnstile + honeypot | Fish |
| Contracting enquiry form | 8 fields + Turnstile + honeypot, success panel, error state | Contracting |
| General contact form | 5 fields + Turnstile + honeypot | Contact |

---

## POST-FREEZE additions

The brief freezes the component system at the end of block 4. Two changes were made
after that point. Both came from confirmed farm facts arriving late, and both are
recorded here rather than absorbed silently.

| Component | Change | Why | Impact |
|---|---|---|---|
| **Match price panel** — POST-FREEZE | New component | Match booking became an enquiry, not a purchase (£100 per lake, date must be agreed). Replaced the competition entry card. | Additive. Built from the existing band pattern + Block 2 fields, so no new primitives. |
| **Date picker — scrollable variant** — POST-FREEZE | New behaviour on an existing component | Seven 44px columns need 320px; a 375px phone offers 279px inside the card. The month now scrolls horizontally below ~430 rather than shrinking targets or clipping a column. | Behavioural only. No new markup pattern, no new tokens. |

### Components deleted after the freeze

| Component | Reason |
|---|---|
| Ticket type selector | Dawn till dusk confirmed — one ticket type, so the control had nothing to choose between. |
| Availability chip — *hidden* state | Capacity confirmed as real, so the chip is always visible. Three states remain. |
| Competition entry card (4 states) | Matches are an enquiry, not a capped Stripe Payment Link. |

---

## Token changes after handover

| Change | Reason |
|---|---|
| `--gs-cream-alt` retired as an alias of `--gs-surface` | Indistinguishable as adjacent surfaces; three tokens were doing two jobs |
| Error family deepened (#93301F / #F7E4DE / #7E2C1A) | Old red read as a darker amber in the availability chip row |

Both re-exported in `tokens.json` and `tokens.css`. See `NOTES.md` §5a.

## Templates built

All thirteen. Every one assembled only from the components above; nothing was invented
at page level.

| Template | File | Notes |
|---|---|---|
| Home | `home.html` | Hero, four gate cards, About strip, seasonal band, sister band |
| Fish | `fish.html` | Day tickets, per-lake chips, rules list, gallery, match panel + enquiry, sold-out state, closed-lake notice |
| Shop | `shop.html` | Category chips, product cards in all three states, delivery/collection, empty state |
| Product detail | `product.html` | Gallery, unit panel, spec table, stepper, related products |
| Stay | `stay.html` | Both cottage cards, amenity list, Cottages.com hand-off, seasonal band |
| Cottage detail | `cottage.html` | Key facts, prose, pull quote, gallery, booking panel |
| Contracting | `contracting.html` | Six service cards (no images by design), enquiry form, error state |
| About | `about.html` | Prose block, pull quote, facts table, sister band |
| Contact | `contact.html` | Utility hero, contact form, success panel, quick links |
| Shoots | `shoots.html` | Navy ground — the only page carrying GSG navy |
| Thank-you (enquiry) | `thank-you-enquiry.html` | Success panel, what-happens-next, onward links |
| Thank-you (order) | `thank-you-order.html` | Order summary, delivery expectation, onward links |
| 404 | `404.html` | Moss panel + four gate links |

`breakpoints.html` shows all thirteen at 375 / 768 / 1440 in live viewports.

## Block 6 — real-data hardening

Run. `block6-extremes.html` renders each case rather than describing it:

| Case | Result |
|---|---|
| Longest (20-word) and shortest (2-word) headings in one band | Passes — heading capped at 34ch, band has no min-height |
| The two near-identical barn cards side by side at 375 | Passes — interior clusters differentiate before the names do; facts wrap to two rows |
| Service card with no image | Passes — no image slot exists, so nothing can fail |
| Product card with no image | Passes — moss-tint panel with the relevant line mark |
| Empty shop category | Passes — explains why, says when, offers an action |
| "Cottages.com" unbreakable in a 375 card | Passes — block button wraps to two lines rather than forcing a scrollbar |
| Date picker at 375 / 360 / 320 | Passes — 44px held at every width; no scrollbar at or above 375, guard engages below |

Two open items are content, not layout: the cottage differentiator is inferred from
photographs and marked provisional, and the lake names are placeholders.