Baby spinach

Use soon · Fridge

… ``` `.ha-bar--solid` for a bar that is always solid; the router adds `.ha-bar--instant` for one frame on a screen change. **Tab bar** ```html ``` Current tab: accent label at 600 **and** a soft pill behind the icon (shape and colour). The router sets `aria-current`. **Grouped list and rows** ```html

Items 8

Oat milkFridge · 1 left Expired

A note under the group.

``` Rows are `a`, `button` or `label` (the whole row is the target), at least 50px. Leading: `.ha-row-icon` (30px tinted tile; `--grey`, `--bad`) or `.ha-row-thumb` (44px). Trailing: `.ha-row-value` (muted text), `.ha-row-trail` (badge, button), `.ha-row-chevron`, a `.ha-switch`, or a `.ha-stepper`. Hairlines are inset to the text. Variants `.ha-row--action` (accent title), `--danger`, `--center`; `.is-done` strikes a ticked item through. At large text sizes the trailing part wraps under the title instead of squeezing it. **Cards and stats:** `.ha-card` (`.ha-card-kicker`, `.ha-card-title`, `.ha-card-text`, `.ha-card-actions`); a pressable card is an `a` or `button`. `.ha-stats > .ha-stat > .ha-stat-value + .ha-stat-label` for two to four numbers. `.ha-panel` for a quiet note. **Buttons:** `.ha-btn` (tinted, the default secondary) + `--primary` (accent; **one per screen**), `--secondary`, `--outline`, `--plain`, `--quiet` (muted icon buttons in rows), `--danger`; sizes `--compact` (44px), `--small` (36px drawn, 44px to tap), `--icon` (44px round), `--block` (full width). Default 50px, 17px 600. Pressed: scale 0.97 and a darker fill. Disabled: `disabled` or `aria-disabled="true"`. Rows of buttons `.ha-btn-row`, stacks `.ha-btn-stack`. **Segmented control** (2 to 4 short options, one row): ```html

Show To buy Bought

``` Selected: a raised white thumb and 600 text. Radios give arrow keys and screen readers for free. More than four options, or long labels: radio rows in a list instead. **Switch:** `…`: 51×31, accent when on, the knob slides and stretches while pressed. On/off settings only (not for choosing between things). **Chips:** `.ha-chips > button.ha-chip[aria-pressed]` (+ `.ha-chip-count`). One row that scrolls sideways and bleeds to the screen edge; `.ha-chips--wrap` to wrap instead. On: tinted, an accent border and a tick. **Badges and pills:** `.ha-badge` (`--accent`, `--ok`, `--warn`, `--bad`). Status badges for use-by dates: **Expired** (`--bad`, filled dot), **2 days / Use soon** (`--warn`, ring), **Fresh** (`--ok`, tick). Always a word. `.ha-pill` for counters ("3 of 7"). **Search:** `.ha-search` > icon + `input[type=search]` + `.ha-search-clear` (shows only when there is text). Give the wrapper `role="search"` and the input a label. **Fields:** `label.ha-field > .ha-field-label + .ha-input` (text, date, textarea) or `.ha-select`; `.ha-field-hint`; errors with `aria-invalid="true"` and `.ha-field-error` (icon and words). `.ha-input--inline` puts a value inside a row, as in iOS Settings. Inputs are at least 16px so iOS never zooms. **Stepper:** `div.ha-stepper[role=group][aria-labelledby] > button[data-step="-1"] + output + button[data-step="1"]`, wired by `haStepper()`; 44px buttons, the ends disable at the limits. **Progress and charts:** `progress.ha-progress` (6px, accent; `--ok`), with `.ha-progress-label` above. Horizontal bars: `ul.ha-chart > li.ha-chart-row > .ha-chart-label + .ha-chart-track > .ha-chart-fill[style="--v:60%"] + .ha-chart-value`. Columns: `ul.ha-cols > li.ha-col > .ha-col-value + .ha-col-bar[style="--v:40%"] + label`, `.is-current` for today. Always print the numbers as text; the bars are the picture, not the data. **Bottom sheet:** `haSheet({ title, body, footer })` builds `dialog.ha-sheet` with a grabber, a head (title centred, Done / Cancel at the right, an optional leading button), a scrolling `.ha-sheet-body` and a sticky `.ha-sheet-foot` above the safe area. Detents: `--medium` (60dvh), `--large` (92dvh), or fit content. `--grey` for a sheet of grouped lists. Closes with back, Escape, a tap on the backdrop, dragging the head down or a `[data-ha-close]` button; focus returns to the opener. A sheet in the page's markup works too: `haSheet(document.querySelector('#my-sheet'))`. **Toast:** `haToast('Bread removed', { action: 'Undo', onAction })`: dark, above the tab bar, one at a time, 4 seconds (6 with an action). Every destructive action that can be undone offers Undo instead of asking first. **Empty state:** `.ha-empty > .ha-empty-icon + .ha-empty-title + .ha-empty-text + one button`. **Skeleton:** `.ha-skeleton` (`--line`, `--short`, `--thumb`) inside real row shapes, `aria-busy="true"` on the list. No spinners. **Version lines:** `haVersion(el, '')` at the very end of settings (see Behaviour). ## Behaviour - **Native basics (in the kit):** no tap highlight, `touch-action: manipulation` (no double-tap zoom delay), `user-select: none` and no long-press callout on controls, `overscroll-behavior-y: contain` (no accidental pull-to-refresh), `100dvh`, safe areas on every edge bar. `app.js` adds the empty passive `touchstart` listener iOS needs before it shows `:active` press states. - **History:** `haRouter({ render })` draws screens from hash routes (`#/`, `#/shop`, `#/item/3`). Every pushed screen and every sheet is a history entry, so the iOS edge swipe and Android back always work. `haBack(fallback)` goes back, or to the fallback when the app was opened straight onto a deep link. Going to a new screen with a sheet open replaces the sheet's entry, so back never needs pressing twice. - **Undo over confirm:** remove at once and offer Undo in a toast; ask first (`haConfirm`) only for things that can't be undone, such as clearing everything. - **Haptics:** `haHaptic()` gives a 10ms tick on Android where allowed (the stepper uses it); nothing on iOS. - **Respond within 100ms** of every tap; save on every change so a killed app resumes where it was. - **App version lines** (the owner's rule for every app with a service worker), last on the settings screen, as small muted text: - `App version 2026-10-14 (3f9a2c1d)`, read from `caches.keys()`: the cache starting `-` (the deploy names it `--`). A cache name without a date shows as it is; no cache, no line. - A link-styled button `Not updating? Get the latest version`. It fetches the app's `sw.js` with `cache: 'no-store'` first; with no signal it says so and changes nothing. Then it unregisters only this app's service worker, deletes only caches starting `-`, and reloads. Saved data (localStorage, IndexedDB, sign-in) is never touched. - `haVersion(document.getElementById('version'), 'pantry')` does all of it. ## Motion | What | Duration | Curve | |---|---|---| | Press in | 90ms | standard `cubic-bezier(.2,0,0,1)` | | Fades, tab switch, chip and segment change | 150ms | standard | | Switch knob, bar changes | 250ms | iOS `cubic-bezier(.32,.72,0,1)` | | Push and pop screens | 350ms | iOS curve: the new screen slides in from the right, the old one shifts 30% left | | Sheet up and down | 420ms | iOS curve; the backdrop fades to 32% ink | | Toast in / out | 420ms / 250ms | arriving `cubic-bezier(.05,.7,.1,1)` / leaving `cubic-bezier(.3,0,.8,.15)` | | Chart bars | 600ms, once | arriving | Screen pushes use the View Transitions API (`html[data-ha-nav="push" | "pop" | "tab"]`); without it, screens swap instantly. **Reduced motion:** every duration drops to about zero, the skeleton stops shimmering, pushes become plain swaps. No confetti, sounds or looping animation. ## Accessibility - WCAG 2.2 AA: text 4.5:1, controls and focus 3:1; every pair is checked by `test/contrast.test.mjs`. - Targets at least 44×44: rows 50, buttons 50 (compact 44, small 36 drawn with a 44 tap area), segments 44, chips 44, bar buttons 44, tabs 50, stepper buttons 44. - Focus visible on everything: 2px accent ring, 2px offset; inset inside rows and tabs so rounded groups don't clip it. - Landmarks: `header` bar, `main`, `nav` tab bar with `aria-current="page"`. Icon-only buttons have `aria-label`; toggles use `aria-pressed`; switches `role="switch"`; the toast is `role="status"`; sheets are labelled dialogs and move focus to their title. - State is never colour alone: ticks on chips, a pill behind the current tab, words and shapes on status badges, strike-through on done items, words for screen readers (`.ha-sr`). - **Dimmed text uses colour, not opacity** (opacity drops contrast below 4.5:1). Only disabled controls use opacity. - `[hidden]` always hides a kit component (`!important`), so `el.hidden = true` is enough. - Holds at 200% text: rem sizes, wrapping rows, stats reflow to one column, `main` clips sideways overflow (the e2e test checks every screen). - axe clean (WCAG 2.2 AA and best practice) at 390, 360 and 320px and on a desktop. ## Do and don't **Do** - Use the kit's classes; add app-specific CSS (under the app's own prefix) only for content. - Give every screen a large title (top level) or a back button (pushed). - Keep one primary button per screen, and one centre action in the tab bar at most. - Put settings and lists in grouped sections; end settings with `haVersion`. - Offer Undo after deleting; confirm only what can't be undone. **Don't** - Don't add colours beyond the tokens, a second accent, gradients or shadows on content. - Don't put more than five tabs in the tab bar or more than four segments in a control. - Don't use hover-only affordances, spinners, emoji, or any sentence under 16px. - Don't dim text with opacity; don't signal state by colour alone. - Don't fork the kit inside an app: improve it here and note it in `STATUS.md`. - Don't put real names, family details or household data in samples: the repo is public.