The parts

tokens

Every swatch is painted by a semantic utility, so this panel follows theme.css instead of repeating it.

• Aa

  --background

  --foreground

• Aa

  --card

  --card-foreground

• Aa

  --muted

  --muted-foreground

• Aa

  --secondary

  --secondary-foreground

• Aa

  --accent

  --accent-foreground

• Aa

  --primary

  --primary-foreground

• --primary · -hover · -active

• --input-border · 3.0+ everywhere

• --shadow-color · warm, never black

• --radius · 0.375rem, plus pills

• --border · hairline

• --ring · focus outline

• --surface-tint · quiet hover

Three shipped faces, self-hosted under OFL: Newsreader for display, Karla for text and UI, and Spline Sans Mono for prices, SKUs and dates. The display ladder steps by 1.333 from 1.5rem; tracking belongs to the step, not to the author.

• --text-d4One at a time
• --text-d3In stock now
• --text-d2Six weeks from clay
• --text-d1Order summary
• --text-leadThrown by hand in Whitstable, fired four times a year.
• --text-body250 ml, 9 cm tall, dishwasher and microwave safe.
• --text-smallFree UK delivery over £60
• --text-captionUnsubscribe from any email in one click
• --tracking-labelWhitstable, Kent
• --font-mono£146 · MRL-014 · 14 March · 1,260°C

Button, ButtonLink, Badge, Eyebrow, Container, the KilnMark, the mode toggle, and the field family every Kiln form is built from, in each state a shop actually reaches. The cart is a sheet now — it is in the header above and it has its own frame below; the store behind it is ui/cart-store.

ui/accordion-disclosure

src/components/ui/accordion-disclosure.tsx

The returns questions, the product specs and the cart's gift note. Native <details>, so the answers are in the page a crawler reads and the row opens before hydration.

Enter and Space open a row. Escape inside an open answer closes it and puts focus back on the question — the one thing <details> does not do.

ui/sheet-drawer

src/components/ui/sheet-drawer.tsx

The cart and the narrow-width nav, which through 2.6.0 were two hand-written panels drawn as sheets with no role, no trap and no Escape.

Enter and Space open it. Tab is held inside the panel, the page behind stops scrolling, the scrim closes it, and Escape hands focus back to the control that opened it.

ui/quantity-stepper

src/components/ui/quantity-stepper.tsx

One control for a quantity, in the cart and on the product page. The figure is a real number input: it posts, the browser clamps it, and six is two keystrokes.

Up and Down step it. A typed figure commits on blur or Enter; an emptied field falls back to the last good value, never to one.

ui/variant-selector

src/components/ui/variant-selector.tsx

The glaze axis on the product page: native radios in a fieldset, so the choice posts with no script at all.

One tab stop for the group. Arrow keys move and select; an option that is out is skipped, and its reason is inside its own label.

ui/rating-input

src/components/ui/rating-input.tsx

The rating a buyer sets, in the review form under the quotes. Whole marks only — a half-mark input is a pointer gesture a keyboard cannot reach.

One tab stop. Arrow keys move and select; the first option is No rating, so ArrowLeft from one star takes the rating back off.

ui/filter-chip

src/components/ui/filter-chip.tsx

The collection browser's active-filter receipts. The value is text and the control is named for the value, so what a buyer reads is what a screen reader hears.

Removing a chip moves focus to the control that set the filter — a node that survives the removal — before the chip goes.

ui/search-input

src/components/ui/search-input.tsx

The shelf search, over name, piece family and glaze. A real type=search with a persistent label — never a placeholder standing in for one.

The clear control returns focus to the field before it empties the value, so the button that vanishes never takes focus with it.

ui/pagination

src/components/ui/pagination.tsx

The reviews, three to a page. The ends disable rather than wrap, and the range sentence is the announcement a filter reset would otherwise make in silence.

Every target is a real button. Previous and Next leave the tab order when they run out.

ui/field

src/components/ui/field.tsx

One shell for the input, the select and the textarea. One message line per field, precedence error then success then description — so a form that is wrong in one place does not reveal every sentence it holds.

Every id derives from the control's own, which is what lets the error summary link to it in markup a server rendered.

ui/form-error-summary

src/components/ui/form-error-summary.tsx

Where focus lands when more than one field is refused. One field goes straight to the control instead, because a summary listing one item is a redirection for no reason.

The panel is a -1 tab stop that only exists when it has something to say; each row is a link to the control it is about.

A8: the statement offset on the plaster wall, the studio photograph bleeding off the page.

Whitstable, Kent

One at a time

Everything here was thrown by hand and came out of the kiln last week.

Shop the new batchSee the making

• Posted within two days
• Packed in wool
• 30 days to send it back

The shelf: the full-bleed hairline plate. Props: heading, lede, only, showFiringNote, surface.

A search field, availability, price and sort over one catalogue fixture, with removable receipts — shown in default, five-result, sparse and no-result states.

Gallery, the glaze selector, the quantity stepper, a working add to cart, spec disclosures at prose width.

Ridge tumbler

£28

4.8from 6 reviews of this piece

• 
• 

A short, heavy-bottomed cup for water, whisky or a flat white. Thrown with the ridges left in, so it sits in the hand without trying.

Glaze

RustIn this batchSandIn this batchAshNext firing

Rust glaze, £28, 6 left

Quantity

One fewer Ridge tumblerOne more Ridge tumbler

1 to add

6 left from this firing

Add to cart

2 in your cart, rust glaze·View cart

Free UK delivery over £60, posted within two days, 30 days to send it back.

MRL-014

Size and care

250 ml, 9 cm tall, 8 cm across the rim. Dishwasher and microwave safe. Each one is thrown by hand, so heights vary by a few millimetres.

Delivery and returns

Free UK delivery over £60, otherwise £4.20 tracked. Posted within two days of your order. 30 days to send it back unused, postage included.

About the rust glaze

Wood ash, iron oxide and a little tin, poured over the upper half so it breaks where the clay ridges catch it. No two come out of the kiln alike.

The live cart above, reading the same store the header does; the designed empty state below via variant='empty'.

Process photograph beside the four stages, split seven columns to five. Optional moreHref adds the link to the long version.

The making

Six weeks from clay to kitchen

Nothing here is cast, and nothing is finished by anyone who did not throw it.

1. 01

   Wedge

   20 min

   Clay from a pit in Devon, wedged by hand until there is no air left in it.

2. 02

   Throw

   1 morning

   Nell throws twelve at a sitting. Nine usually survive trimming the next day.

3. 03

   Glaze

   2 days

   Iwan mixes in five-litre buckets: wood ash, iron oxide, a little tin.

4. 04

   Fire

   36 hours

   Two firings up to 1,260°C. What the kiln does to the glaze is not up to us.

The whole process

The kiln year: a reading block at prose width, the next date at display size, and the four firings in the hairline plate.

Dispatch, packing and returns: the three objections a fragile object raises. Optional moreHref points at the full terms.

The threshold at display size beside a real table of costs and transit windows, five columns to seven.

Four questions on ui/accordion-disclosure, the same part the product page's specs and the cart's gift note use.

Who you buy from, when an order is an order, what happens to your email. Unboxed on purpose, because /delivery already runs a plate.

Named buyers, each quote tied to the piece they own, three to a page. The write-a-review form under them is the theme's only multi-field form and the rating input's home.

The restock list, which replaces a back-order button — and the theme's simplest submit flow: one field, a pending button, a receipt focus lands on.

Editorial opener with a constrained measure, for every page that is not the shop front.