division-ds 0.1.1 → 0.2.0

package/public/docs/components/card.md

@@ -0,0 +1,255 @@
+# Card
+
+> A surface that groups related content. It gets the crosshair corners, the visual mark this system uses for a frame around several things. It never gets the cut corner, because cards hold buttons.
+
+- **Best for:** Grouping related content on one surface, or one item in a grid whose whole surface is one link.
+- **Not for:** A card inside another card: cards don't nest.
+- Molecule. Source: `src/components/molecules/card/Card.tsx`
+- Rendered docs page: `/components/card`
+
+## Import
+
+```tsx
+import { Card, CardActions, CardBody, CardDescription, CardFooter, CardHeader, CardMedia, CardTitle, cardLinkClass } from 'src/components/molecules/card/Card'
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `as` | `'article' \| 'section' \| 'div'` | `'article'` | article for an item that stands on its own, section for a group inside a page, div for neither. |
+| `interactive` | `boolean` | `false` | Says the whole card is one click target, through a link or button stretched over it. Adds the hover and focus border and a 4px lift. It adds no role and no Tab stop: the link inside is still the control. |
+| `level (CardTitle)` | `2 \| 3 \| 4` | `3` | The heading level, set on CardTitle only. Card itself takes no level. The page decides its own outline. |
+| `src (CardMedia)` | `string` |  | The picture, drawn with object-cover (it fills the box and crops the overflow) and loaded lazily (only when it's about to scroll into view). Leave it out to show CardMedia's children instead, such as a placeholder. |
+| `alt (CardMedia)` | `string` | `''` | The alt text screen readers read for the picture. Empty by default: the picture is decorative because the card title already names it. Write real text only when the picture says something the title doesn't. |
+| `aspect (CardMedia)` | `'16/9' \| '4/3' \| '1/1'` | `'16/9'` | The shape of the box the picture is cropped to. |
+| `className` | `string` |  | Merged onto any part. |
+| `...rest` | `HTMLAttributes<...>` |  | Standard HTML attributes on every part, except aria-labelledby on Card: the Card points that at its CardTitle itself, and the types won't accept one passed in. Give CardTitle an id only if something else needs it. |
+| `ref` | `Ref<HTMLElement>` |  | Passed through to the Card root DOM element. |
+
+## Types and helpers
+
+Exported beside the component, from the same file. Import a type with `import type { ... }`.
+
+```ts
+/** The stretched link an interactive card needs, for the `a` (or button) in its title: the link
+ *  is the name's own, its `::after` covers the card, and the focus ring is drawn there, around the
+ *  whole card. The shape ProductCard uses. Exported so a consumer never copies the string. */
+export const cardLinkClass =
+  "outline-none hover:underline underline-offset-2 after:absolute after:inset-0 after:content-[''] focus-visible:after:outline-2 focus-visible:after:outline-offset-2 focus-visible:after:outline-[var(--color-focus-ring)]"
+```
+
+## Examples
+
+Each is compiled and rendered on the docs page. Imports are omitted; see above.
+
+### Depot
+
+```tsx
+function Depot({ title = 'North field depot' }: { title?: string }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>Open until 18:00.</CardDescription>
+      </CardHeader>
+      <CardBody>Twelve kits ready for collection.</CardBody>
+      <CardFooter>
+        <Button size="sm" variant="ghost">
+          Details
+        </Button>
+        <Button size="sm">Collect</Button>
+      </CardFooter>
+    </Card>
+  )
+}
+
+<div className="max-w-sm w-full">
+  <Depot />
+</div>
+```
+
+### With an image: edge to edge, no padding around it. The title already names the picture, so its alt text (the description a screen reader reads out) is empty
+
+```tsx
+<div className="max-w-sm w-full">
+  <Card>
+    <CardMedia src="/media/hero-poster-960.webp" aspect="16/9" />
+    <CardHeader className="pt-5">
+      <CardTitle>Range hall depot</CardTitle>
+      <CardDescription>Open until 18:00.</CardDescription>
+    </CardHeader>
+    <CardBody>Twelve kits ready for collection.</CardBody>
+  </Card>
+</div>
+```
+
+### A row of three
+
+```tsx
+function Depot({ title = 'North field depot' }: { title?: string }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>Open until 18:00.</CardDescription>
+      </CardHeader>
+      <CardBody>Twelve kits ready for collection.</CardBody>
+      <CardFooter>
+        <Button size="sm" variant="ghost">
+          Details
+        </Button>
+        <Button size="sm">Collect</Button>
+      </CardFooter>
+    </Card>
+  )
+}
+
+<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 w-full">
+  <Depot title="West site depot" />
+  <Card>
+    <CardHeader>
+      <CardTitle>South gate depot</CardTitle>
+      <CardDescription>Open until 20:00.</CardDescription>
+    </CardHeader>
+    <CardBody>Four kits ready for collection, three on order.</CardBody>
+    <CardFooter>
+      <Button size="sm" variant="ghost">
+        Details
+      </Button>
+      <Button size="sm">Collect</Button>
+    </CardFooter>
+  </Card>
+  <Card>
+    <CardHeader>
+      <CardTitle>Harbour depot</CardTitle>
+      <CardDescription>Closed today.</CardDescription>
+    </CardHeader>
+    <CardBody>Nothing ready. Next opening tomorrow, 08:00.</CardBody>
+    <CardFooter>
+      <Button size="sm" variant="secondary">
+        Notify me
+      </Button>
+    </CardFooter>
+  </Card>
+</div>
+```
+
+### Actions inside the content, no action bar: left-aligned, primary first, secondary after
+
+```tsx
+<div className="max-w-sm w-full">
+  <Card>
+    <CardHeader>
+      <CardTitle>Marsh depot</CardTitle>
+      <CardDescription>Open until 17:00.</CardDescription>
+    </CardHeader>
+    <CardBody>
+      Twelve kits ready for collection. Bring your booking number.
+      <CardActions>
+        <Button size="sm">Collect</Button>
+        <Button size="sm" variant="secondary">
+          Details
+        </Button>
+      </CardActions>
+    </CardBody>
+  </Card>
+</div>
+```
+
+### Interactive: the whole card is one link. Hover over it, or press Tab to reach it
+
+```tsx
+function DepotLink({ title, note, href }: { title: string; note: string; href: string }) {
+  return (
+    <Card interactive className="h-full">
+      <CardBody className="flex flex-col gap-1">
+        <CardTitle>
+          <a href={href} className={cardLinkClass}>
+            {title}
+          </a>
+        </CardTitle>
+        <CardDescription>{note}</CardDescription>
+      </CardBody>
+    </Card>
+  )
+}
+
+<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 w-full">
+  <DepotLink title="Ridge depot" note="Open until 18:00. Twelve kits ready." href="#ridge-depot" />
+  <DepotLink title="Quarry depot" note="Open until 20:00. Four kits ready." href="#quarry-depot" />
+  <DepotLink title="Mill depot" note="Closed today. Opens tomorrow, 08:00." href="#mill-depot" />
+</div>
+```
+
+### As a section
+
+```tsx
+<div className="max-w-sm w-full">
+  <Card as="section">
+    <CardHeader>
+      <CardTitle level={2}>Totals</CardTitle>
+      <CardDescription>This week, all depots.</CardDescription>
+    </CardHeader>
+    <CardBody>128 kits collected, 6 outstanding.</CardBody>
+  </Card>
+</div>
+```
+
+## Keyboard
+
+| Keys | Result |
+|---|---|
+| `Tab` | Moves through the card's own buttons and links. The card itself isn't a stop, interactive or not. Focus on anything inside an interactive card lights its border and lifts it 4px. |
+
+## Do
+
+- Put actions in CardFooter when the card ends in an action bar. It's a right-aligned row with the gap between buttons already set and the primary last. A fullWidth button fills it.
+- Put actions in CardActions, inside CardBody, when the button belongs to the text above it and there should be no bar. Primary first, then the secondary.
+- Wherever a card has a primary button, put a secondary or ghost button beside it (Details, Cancel), unless the card really has only one action.
+- Give every card a title, even a short one. It names the card for screen readers.
+- Put CardMedia first in the card, and give a row of cards the same aspect, so the titles line up.
+- Give every card in a row the same parts, so they line up.
+- Use section for a group inside a page and article for an item that stands on its own.
+- Set interactive on a card whose whole surface is one link, and only on those: a product, a category tile.
+- Make the click target a real link stretched over the card from its title, so the name, the focus ring and middle-click all belong to the link.
+
+## Don't
+
+- Don't make the whole card a link by wrapping it in an a element. That puts clickable things inside a clickable thing. Stretch the title's link over the card and set interactive.
+- Don't set interactive on a card that only holds a button or a link somewhere inside it. The lit border promises that a click anywhere does something.
+- Don't add your own hover border, lift or glow to a card. There's one prop and one treatment, so every clickable card responds the same way.
+- Don't clip an interactive card: it lifts 4px and its crosshair arms reach 5px outside it. Carousel leaves that room by itself.
+- Don't put CardActions and CardFooter in the same card. Two places to act, with opposite alignment and order, read as two different decisions.
+- Don't right-align CardActions or put the primary last in it. The two parts differ on purpose: the bar is on the right with the primary last, the inline row is on the left with the primary first.
+- Don't pad around a picture to fake CardMedia, or wrap it in CardBody. The picture runs edge to edge, so it goes directly in the Card.
+- Don't bevel a card.
+- Don't nest cards.
+
+## Common mistakes
+
+Wrong:
+
+```tsx
+<Card className="border-2 border-[var(--color-accent-signal-fill)]">
+```
+
+Right:
+
+```tsx
+<Card style={{ border: '2px solid var(--color-accent-signal-fill)' }}>
+```
+
+The panel sets its own border outside any CSS cascade layer, so a border utility class never wins. To highlight or select a card, set the border inline, using a token (one of the system's named design values).
+
+## Anatomy
+
+- **Card**: The root. An article element by default, named by its title. Uses the .panel and .crosshair classes.
+- **Interactive state**: Only with interactive. On hover, and while anything inside has keyboard focus, the thin border turns accent.signal.fill and the whole card slides up 4px (four pixels). It slides back down when the pointer leaves or focus moves on. It's a CSS transform, so nothing around it moves. When someone has turned on reduced motion (prefers-reduced-motion), the border still changes but the card doesn't move.
+- **CardMedia**: A picture across the full width of the card, flush with the top and side edges inside the border, cropped to an aspect ratio. It's the first child, before CardHeader or CardBody. Without a src, its children fill the box instead (a placeholder).
+- **CardHeader**: Groups the title and description.
+- **CardTitle**: A heading at whatever level the page needs, 3 by default.
+- **CardDescription**: A short secondary line under the title.
+- **CardBody**: Grows to fill the space, so the footers in a row of cards line up.
+- **CardFooter**: The action bar: right-aligned, with the primary button last (rightmost), above a thin line that runs edge to edge. It's where a task ends, the same position as DialogFooter.
+- **CardActions**: Actions inside the content, placed in CardBody after the text. A row that wraps, left-aligned, primary first and secondary after it, with no line and no bar. It's on the left because people read a body down its left edge, so the button stays next to the text it acts on at any card width.

package/public/docs/components/carousel.md

@@ -0,0 +1,128 @@
+# Carousel
+
+> A row of items that scrolls sideways. The browser does the scrolling, and Previous and Next move it a page at a time. Nothing ever moves on its own.
+
+- **Best for:** A sideways preview of more items than fit, with a link to the full list nearby.
+- **Not for:** A few items that fit: use a grid. And it's not for the only copy of anything.
+- Organism. Source: `src/components/organisms/carousel/Carousel.tsx`
+- Rendered docs page: `/components/carousel`
+
+## Import
+
+```tsx
+import { Carousel } from 'src/components/organisms/carousel/Carousel'
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` | `string` |  | Required. The region's accessible name (the name a screen reader announces), for example "Offers". Leaving it out is a compile error. |
+| `children` | `ReactNode` |  | Each child becomes one list item and keeps its own key. |
+| `itemWidth` | `string` | `'min(18rem, 80%)'` | Any CSS length. A percentage is a share of the track's width. Keep it under the full width, so the edge of the next item shows. |
+| `gutter` | `string` | `'0.5rem'` | The space between the track's edge and the first and last item, in any CSS length (rem is a unit tied to the base text size). It's never less than 0.5rem, whatever you pass, because an edge item draws its focus ring there. Set it to the page gutter to run the track edge to edge. |
+| `className` | `string` |  | Merged onto the region. |
+| `ref` | `Ref<HTMLElement>` |  | Forwarded to the region. |
+
+## Examples
+
+Each is compiled and rendered on the docs page. Imports are omitted; see above.
+
+### Product cards
+
+```tsx
+const photo = (id: string) => ({ src: `/media/products/${id}.webp` })
+
+const OFFERS: Product[] = [
+  { id: 'kestrel-k', name: 'Kestrel K compact replica', href: '#kestrel-k', price: 12900, compareAtPrice: 14900, badge: 'Sale' },
+  { id: 'field-goggles', name: 'Field goggles', href: '#field-goggles', price: 3400, compareAtPrice: 3900, badge: 'Sale' },
+  { id: 'beam-600', name: 'Beam 600 rail light', href: '#beam-600', price: 2400, compareAtPrice: 2900 },
+  { id: 'speed-loader', name: 'Speed loader, 150 BBs', href: '#speed-loader', price: 790, compareAtPrice: 990 },
+  { id: 'magazine-amber', name: 'Amber magazine, 48 BBs', href: '#magazine-amber', price: 890, compareAtPrice: 1090 },
+  { id: 'knee-pads', name: 'Knee pads, pair', href: '#knee-pads', price: 2400, compareAtPrice: 2900 },
+].map(product => ({ ...product, image: photo(product.id) }))
+
+function ProductCardsExample() {
+  const { toast } = useToast()
+  return (
+    <Carousel label="Offers" itemWidth="min(16rem, 80%)">
+      {OFFERS.map(product => (
+        <ProductCard
+          key={product.id}
+          product={product}
+          headingLevel={4}
+          onAddToCart={added => toast({ title: 'Added to cart', description: added.name, tone: 'ok' })}
+        />
+      ))}
+    </Carousel>
+  )
+}
+
+<ProductCardsExample />
+```
+
+### Nothing inside takes keyboard focus, so the Tab key stops on the track itself
+
+```tsx
+const STEPS = ['Unload', 'Disconnect', 'Wipe down', 'Clean the barrel', 'Check the hop-up', 'Store']
+
+<Carousel label="Cleaning steps" itemWidth="12rem">
+  {STEPS.map((step, index) => (
+    <div
+      key={step}
+      className="flex h-28 flex-col justify-between border border-[var(--color-border-hairline-strong)] p-4"
+    >
+      <span className="font-mono text-xs tabular-nums text-[var(--color-text-secondary)]">
+        {String(index + 1).padStart(2, '0')}
+      </span>
+      <span className="font-display font-semibold text-[var(--color-text-primary)]">{step}</span>
+    </div>
+  ))}
+</Carousel>
+```
+
+### Three short items: both buttons do nothing while everything fits
+
+```tsx
+<Carousel label="Kestrel lengths" itemWidth="8rem">
+  {['Kestrel K', 'Kestrel C', 'Kestrel L'].map(name => (
+    <div
+      key={name}
+      className="flex h-20 items-center justify-center border border-[var(--color-border-hairline-strong)] font-display font-semibold text-[var(--color-text-primary)]"
+    >
+      {name}
+    </div>
+  ))}
+</Carousel>
+```
+
+## Keyboard
+
+| Keys | Result |
+|---|---|
+| `Tab` | Moves to Previous, then Next, then through anything focusable in each item. An item scrolls into view as it takes focus. |
+| `Enter` `Space` | On Previous or Next, scrolls one page of items. Does nothing (it's inert) at the matching end. |
+| `←` `→` | Scroll the track when the track itself has focus. The track is only a tab stop when no item holds anything focusable. |
+
+## Do
+
+- Name it for what it holds: "Offers", "Top-rated accessories".
+- Give it enough items to scroll. Three that fit are a grid.
+- Link to the full list nearby. A carousel is a preview, so it shouldn't be the only way to reach the rest.
+- Set the gutter to the page gutter when the track should run to the edge of the page.
+
+## Don't
+
+- Don't add autoplay. Content that moves on its own needs a pause control, and it pulls attention away from whoever's reading the page.
+- Don't put the only copy of anything in it. What's off to the side is easy to miss.
+- Don't hide the buttons on touch screens. A pointer, a switch device or a screen magnifier may be all someone has.
+- Don't wrap it in an element with overflow hidden to tidy the edges. That clips the focus ring the gutter is there to show.
+
+## Anatomy
+
+- **Region**: A section with aria-roledescription="carousel", named by the label. (ARIA, Accessible Rich Internet Applications, is a set of attributes that tell screen readers what an element is.)
+- **Position**: Monospaced text such as "1 to 3 of 8", saying which items are showing. It updates on every scroll, but it isn't a live region, so screen readers don't read it out each time.
+- **Previous / Next**: Secondary IconButtons, placed before the items in the Tab order. At the ends they're marked aria-disabled instead of disabled, so each stays a tab stop (a place the Tab key lands).
+- **Track**: A list that's the browser's own scroll container, with scroll snap and no visible scrollbar. It's padded on all four sides, so an item at the edge draws its focus ring inside the track.
+- **Item**: A list item, one per child, at the item width. The edge of the next one always shows.
+- **Status**: Hidden from view, read by screen readers. Says where the track stopped after a press on Previous or Next.

package/public/docs/components/cart.md

@@ -0,0 +1,170 @@
+# Cart
+
+> The lines someone means to buy, with quantities, line totals and a subtotal that screen readers announce as it changes. Removing a line can be undone, and focus (where keyboard input goes) is never lost.
+
+- **Best for:** The lines someone means to buy: quantities, line totals, a subtotal and removal that can be undone.
+- **Not for:** Collecting shipping and payment: use CheckoutForm.
+- Organism. Source: `src/components/organisms/cart/Cart.tsx`
+- Rendered docs page: `/components/cart`
+
+## Import
+
+```tsx
+import { Cart } from 'src/components/organisms/cart/Cart'
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `lines` | `CartLine[]` |  | Required. The cart doesn't keep any lines of its own. |
+| `onQuantityChange` | `(id: string, quantity: number) => void` |  | Required. Called when a line's QuantityStepper changes. |
+| `onRemove` | `(id: string) => void` |  | Required. Called when Remove is pressed. |
+| `onRestore` | `(line: CartLine, index: number) => void` |  | Puts a removed line back at its old position. When you pass it, the removal toast offers Undo. |
+| `title` | `string` | `'Cart'` | The heading's text, and the cart's accessible name (the name a screen reader announces). |
+| `headingLevel` | `2 \| 3 \| 4` | `2` | Match the page's heading outline. |
+| `emptyMessage` | `string` | `'Your cart is empty.'` | Shown in place of the list. |
+| `footer` | `ReactNode` |  | Under the subtotal, such as a checkout button. Hidden while the cart's empty. |
+| `currency` | `string` | `'EUR'` | Passed to formatMoney. |
+| `locale` | `string` | `'en-IE'` | Passed to formatMoney. |
+| `renderLink` | `(props: LinkRenderProps) => ReactNode` | `a plain anchor` | Draws a line name that has an href. |
+| `className` | `string` |  | Merged with the root classes. Later Tailwind utilities win. |
+| `ref` | `Ref<HTMLElement>` |  | The section. |
+
+## Types and helpers
+
+Exported beside the component, from the same file. Import a type with `import type { ... }`.
+
+```ts
+export type CartLine = {
+  /** Unique within lines: rows are keyed by it, and callbacks identify lines by it. */
+  id: string
+  name: string
+  href?: string
+  /** Size, colour and the like: "Size M · Ember". */
+  detail?: string
+  /** In the currency's minor unit (cents for EUR). */
+  unitPrice: number
+  quantity: number
+  /** @default 99 */
+  maxQuantity?: number
+}
+```
+
+## Examples
+
+Each is compiled and rendered on the docs page. Imports are omitted; see above.
+
+### In the page
+
+```tsx
+const LINES: CartLine[] = [
+  { id: 'kestrel-c', name: 'Kestrel C carbine replica', href: '#kestrel-c', detail: 'Black', unitPrice: 13900, quantity: 1 },
+  {
+    id: 'prism-holo-sight',
+    name: 'Prism holo sight',
+    href: '#prism-holo-sight',
+    unitPrice: 4900,
+    quantity: 2,
+  },
+  { id: 'beam-600', name: 'Beam 600 rail light', href: '#beam-600', unitPrice: 2400, quantity: 1 },
+]
+
+function useCart(initial: CartLine[]) {
+  const [lines, setLines] = useState(initial)
+  return {
+    lines,
+    onQuantityChange: (id: string, quantity: number) =>
+      setLines(all => all.map(line => (line.id === id ? { ...line, quantity } : line))),
+    onRemove: (id: string) => setLines(all => all.filter(line => line.id !== id)),
+    onRestore: (line: CartLine, index: number) => setLines(all => [...all.slice(0, index), line, ...all.slice(index)]),
+  }
+}
+
+function InThePageExample() {
+  const cart = useCart(LINES)
+  return <Cart {...cart} title="Cart" headingLevel={4} footer={<Button>Check out</Button>} />
+}
+
+<InThePageExample />
+```
+
+### In a sheet
+
+```tsx
+const LINES: CartLine[] = [
+  { id: 'kestrel-c', name: 'Kestrel C carbine replica', href: '#kestrel-c', detail: 'Black', unitPrice: 13900, quantity: 1 },
+  {
+    id: 'prism-holo-sight',
+    name: 'Prism holo sight',
+    href: '#prism-holo-sight',
+    unitPrice: 4900,
+    quantity: 2,
+  },
+  { id: 'beam-600', name: 'Beam 600 rail light', href: '#beam-600', unitPrice: 2400, quantity: 1 },
+]
+
+function useCart(initial: CartLine[]) {
+  const [lines, setLines] = useState(initial)
+  return {
+    lines,
+    onQuantityChange: (id: string, quantity: number) =>
+      setLines(all => all.map(line => (line.id === id ? { ...line, quantity } : line))),
+    onRemove: (id: string) => setLines(all => all.filter(line => line.id !== id)),
+    onRestore: (line: CartLine, index: number) => setLines(all => [...all.slice(0, index), line, ...all.slice(index)]),
+  }
+}
+
+function InASheetExample() {
+  const cart = useCart(LINES)
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="secondary">Open cart</Button>
+      </SheetTrigger>
+      <SheetContent title="Your cart">
+        <Cart {...cart} title="Items" headingLevel={3} footer={<Button>Check out</Button>} />
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+<InASheetExample />
+```
+
+### Empty
+
+```tsx
+<Cart lines={[]} onQuantityChange={() => {}} onRemove={() => {}} headingLevel={4} title="Saved for later" />
+```
+
+## Keyboard
+
+| Keys | Result |
+|---|---|
+| `Tab` | Moves through each line's link, quantity and Remove. |
+| `↑` `↓` | On a quantity, steps it by one. |
+| `Enter` | On Remove, removes the line. Focus moves to the next line. |
+| `F8` | Jumps to the removal toast, so you can reach Undo. |
+
+## Do
+
+- Pass onRestore, so a removal can be undone.
+- Store prices in the currency's smallest unit (cents for EUR).
+- Put the cart in a Sheet on narrow screens. The Undo toast shows inside it.
+- Remove a line on the page, then open a sheet: the Undo toast moves into the sheet and still works there.
+- Expect Undo pressed there to leave focus on the sheet's own toast list, inside its focus trap (the sheet keeps keyboard focus inside itself), never on the page body. The page's cart is hidden and can't take it.
+
+## Don't
+
+- Don't let a quantity reach zero. Remove is how a line leaves.
+- Don't remove a line without telling the cart. It's controlled: it shows only the lines you pass in.
+
+## Anatomy
+
+- **Heading**: Names the cart. Focus lands here once it's empty.
+- **Line**: Name (a link when it has an href), detail, unit price, quantity, line total and Remove.
+- **Quantity**: A QuantityStepper named '{name} quantity', starting at 1.
+- **Remove**: A ghost icon button named 'Remove {name}'.
+- **Subtotal**: A status line visible only to screen readers (sr-only), plus a visual twin. Screen readers announce the status as it changes. The twin, in tabular figures, is what sighted readers see, and it's aria-hidden (hidden from screen readers) so nothing is announced twice.
+- **Footer**: Optional actions, such as Check out.