@evinvest/kitstart 0.1.0 → 0.3.0

package/README.md

@@ -18,7 +18,7 @@ stays in the brand.
 | `@evinvest/kitstart/proxy` | edge | `createProxy(site)`, `PROXY_MATCHER` |
 | `@evinvest/kitstart/next` | Next server (routes, RSC) | `quoteRoute`, `sitemapRoute`, `robotsRoute`, `ogRoute`, `healthRoute`, `createPlaceLoader`, `loadLocale`, `placeMetadata` / `brandMetadata` / `statusMetadata`, `metadataBase` |
 | `@evinvest/kitstart/next/config` | `next.config.ts`, `vitest.config.ts` | `withLanding`, `buildEnv` and the `assets/` readers |
-| `@evinvest/kitstart/react` | either side | `LangSwitch`, `CallBar`, `StatusScreen`, `PlaceDirectory`, `AreaChips`, `Coverage`, `MapFacade` (client), `QuoteFormShell`, `Faq`, `AnalyticsBoundary` (client), plus the kit and marketing pieces a landing composes with |
+| `@evinvest/kitstart/react` | either side | `LangSwitch`, `CallBar`, `StatusScreen`, `PlaceDirectory`, `AreaChips`, `Coverage`, `MapFacade` (client), `QuoteFormShell`, `FormSelect` (client), `Faq`, `AnalyticsBoundary` (client), plus the kit and marketing pieces a landing composes with |
 | `@evinvest/kitstart/testing` | a brand's vitest | `describeLandingContract(site, { globalsCss, proxySource, text })`, `describeLeadStoreContract(name, harness)`, `storefrontPlace`, `serviceAreaPlace`, `testLead` |
 | `@evinvest/kitstart/testing/e2e` | a brand's Playwright | `defineSectionSuite(sections)`, `settle(page, selector)`, `BREAKPOINTS` |
 | bin `kitstart-size` | plain node | `kitstart-size [<build root>] [--route …] [--budget …]`: first-load JS of a place page against `tests/bundle_budget.txt`; fails closed |
@@ -45,7 +45,7 @@ brand's `flake.nix` is its own config plus one call — `template/flake.nix` is
 the whole of one:
 
 ```nix
-inputs.ev.url = "github:EV-invest/lib?ref=@evinvest/kitstart-v0.1.0"; # the version in package-lock.json
+inputs.ev.url = "github:EV-invest/lib?ref=@evinvest/kitstart-v0.2.0"; # the version in package-lock.json
 inputs.ev.inputs.v_flakes.follows = "v_flakes";
 
 landing = ev.lib.mkLanding {
@@ -98,16 +98,77 @@ the two must be one release. Pin the flake to the matching
 Structural only — where behaviour matters more than look. Marketing sections
 (hero, prices, reviews…) stay in the brand until two brands hold the same one.
 Each widget is a Server Component unless it needs the browser (`MapFacade`,
-`AnalyticsBoundary`), styled with the kit's token roles only, restyled through
+`AnalyticsBoundary`, `FormSelect`), styled with the kit's token roles only, restyled through
 `className` — and, where a brand needs geometry inside one (`Faq`, `CallBar`,
 `StatusScreen`, `PlaceDirectory`, `Coverage`), through its named parts:
 `classNames={{ list: "rounded-none", answer: "px-2" }}`, merged after the
 kit's classes so the brand's utility wins. No descendant selectors: they
-break silently when a widget's markup moves. `QuoteFormShell` is headless: it owns the hidden fields and the
+break silently when a widget's markup moves. A size in a part keeps the
+kit's line height: tailwind-merge drops an earlier `leading-*` for any later
+font size, so the widgets put their `leading-*` after the brand's classes —
+`code: "text-[88px]"` stays `leading-none`. To change the line height, name
+it (`"text-[88px] leading-tight"`, or `"text-lg/7"`). The header's language
+switch is `StatusScreen`'s `lang`: below `md` it takes a row of its own
+(`order-last w-full`); `lang: "order-none w-auto"` keeps one row.
+`QuoteFormShell` is headless: it owns the hidden fields and the
 honeypot the funnel reads; the visible fields are the brand's children.
 `StatusScreen` takes the brand's name and marks as props, so the client error
 boundary never imports the site config.
 
+### `FormSelect`: a choice that posts without JavaScript
+
+A form's select, for the fields inside `QuoteFormShell`. On the server and
+without JavaScript it is the kit's `NativeSelect` — a real `<select name>`
+the form posts as is. After hydration (`useSyncExternalStore`, so the
+server's HTML and the first client render agree) it is the kit's `Select`:
+the list drawn in the palette, never the platform's menu, and the value in an
+input of the same `name`. Both states are one box — height, width, border,
+radius and inset — so the swap moves nothing (checked by the template's e2e,
+which CI runs: `npm run check:template -- --e2e`).
+
+```tsx
+<Field className="flex flex-col gap-2">
+  <FieldLabel>{t.quoteLabels.subject}</FieldLabel>
+  <FormSelect
+    name={LEAD.wire.subject}
+    size="lg"
+    defaultValue={LEAD.subjects[0]}
+    options={LEAD.subjects.map(s => ({ value: s, label: t.subjects[s] }))}
+  />
+</Field>
+```
+
+| Prop | |
+|---|---|
+| `name`, `options: { value, label }[]` | the posted field and its choices (labels are text) |
+| `defaultValue` | without it: empty under a `placeholder`, else the first option — the native rule |
+| `placeholder` | an empty, unpickable choice shown until one is made |
+| `required`, `disabled` | as on a `<select>`: required refuses the submit, disabled posts nothing |
+| `size` | `sm` · `md` · `lg` (the landing's) — the kit's form scale |
+| `id`, `aria-describedby`, `aria-invalid` | inside a `Field` the id comes from it: its `FieldLabel` names the `<select>` before hydration and the trigger after |
+| `className` · `classNames={{ trigger, content, item }}` | the shared box · the control in both states, the list, its rows |
+| `onValueChange` | the chosen value, after hydration |
+
+- **The value survives the swap.** A choice made in the native select before
+  the script arrived is read in the hydration commit; a form `reset` puts the
+  default back in both states. With nothing chosen (under a `placeholder`) it
+  posts nothing, as a native select on its disabled placeholder does.
+- **`required` still refuses the submit.** A `type="hidden"` input is never
+  validated, so under `required` the value rides in a transparent input under
+  the trigger, out of the tab order, the accessibility tree and autofill. An
+  invalid field's trigger takes `aria-invalid` (the error border). On a submit
+  — and only then — the form's first invalid field also takes focus with its
+  list open, where the browser's bubble would have pointed at nothing; a
+  script's `checkValidity()` marks it and moves nothing.
+- **Keyboard and screen readers** are the kit's `Select` (its README has the
+  focus pattern): the arrows open it, opening lands on the chosen option,
+  letters jump, Enter chooses, Escape and Tab close with focus back on the
+  trigger; the trigger is a `combobox` named by the `FieldLabel`, and so is
+  its list, with the kit's focus ring.
+- **Weight.** It is a client module and pulls the kit's `Select` into the
+  page: 3.8 KB gz of first-load JS on the template's place page (152,774 →
+  156,565 B of its 158,000 B budget).
+
 Tailwind v4 does not scan `node_modules`; the brand's `globals.css` names the
 package:
 

package/dist/react/AreaChips.d.ts

@@ -2,7 +2,8 @@
  * Where the van goes, as chips. A visitor's first question is whether you
  * come to them at all; a service-area business has no map to show instead.
  */
-export declare function AreaChips({ areas, className }: {
+export declare function AreaChips({ areas, className, chipClassName }: {
     areas: readonly string[];
     className?: string;
+    chipClassName?: string;
 }): import("react").JSX.Element | null;

package/dist/react/AreaChips.js

@@ -4,8 +4,8 @@ import { cn } from "@evinvest/uikit";
  * Where the van goes, as chips. A visitor's first question is whether you
  * come to them at all; a service-area business has no map to show instead.
  */
-export function AreaChips({ areas, className }) {
+export function AreaChips({ areas, className, chipClassName }) {
     if (areas.length === 0)
         return null;
-    return (_jsx("ul", { className: cn("flex flex-wrap gap-2 md:gap-2.5", className), children: areas.map(area => (_jsx("li", { className: "rounded-full border border-border bg-muted px-4 py-2 text-sm font-medium text-ink-mid", children: area }, area))) }));
+    return (_jsx("ul", { className: cn("flex flex-wrap gap-2 md:gap-2.5", className), children: areas.map(area => (_jsx("li", { className: cn("rounded-full border border-border bg-muted px-4 py-2 text-sm font-medium text-ink-mid", chipClassName), children: area }, area))) }));
 }

package/dist/react/Coverage.d.ts

@@ -1,7 +1,8 @@
 import type { ReactNode } from "react";
 import { type Place } from "../core/place/types.js";
 import type { PartClassNames } from "./parts.js";
-export type CoveragePart = "chips" | "landmark" | "map";
+/** `chip` is each commune in `chips`; `mapShow` and `mapAddress` are the map button's two lines. */
+export type CoveragePart = "chips" | "chip" | "landmark" | "map" | "mapShow" | "mapAddress";
 /**
  * Where a place works: its communes as chips, and — for a storefront only —
  * its landmark and a map behind a click. A service-area business has no

package/dist/react/Coverage.js

@@ -6,5 +6,6 @@ import { MapFacade } from "./MapFacade.js";
 export function Coverage({ place, locale, map, head, className, classNames: c }) {
     const front = storefrontOf(place);
     const address = front && `${front.address.street}, ${front.address.postalCode} ${front.address.locality}`;
-    return (_jsxs("div", { className: cn("flex flex-col gap-6 md:gap-8", className), children: [head, _jsx(AreaChips, { areas: servedLocalities(place), ...(c?.chips ? { className: c.chips } : {}) }), front?.landmark && _jsx("p", { className: cn("text-sm text-ink-soft", c?.landmark), children: front.landmark[locale] }), address && map && _jsx(MapFacade, { query: `${place.gbpName}, ${address}`, title: map.title, show: map.show, address: address, ...(c?.map ? { className: c.map } : {}) })] }));
+    const mapParts = { ...(c?.mapShow ? { show: c.mapShow } : {}), ...(c?.mapAddress ? { address: c.mapAddress } : {}) };
+    return (_jsxs("div", { className: cn("flex flex-col gap-6 md:gap-8", className), children: [head, _jsx(AreaChips, { areas: servedLocalities(place), ...(c?.chips ? { className: c.chips } : {}), ...(c?.chip ? { chipClassName: c.chip } : {}) }), front?.landmark && _jsx("p", { className: cn("text-sm text-ink-soft", c?.landmark), children: front.landmark[locale] }), address && map && _jsx(MapFacade, { query: `${place.gbpName}, ${address}`, title: map.title, show: map.show, address: address, ...(c?.map ? { className: c.map } : {}), classNames: mapParts })] }));
 }

package/dist/react/Faq.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import type { QuestionAnswer } from "../core/seo/ld.js";
-import type { PartClassNames } from "./parts.js";
+import { type PartClassNames } from "./parts.js";
 export type FaqPart = "list" | "item" | "summary" | "question" | "icon" | "answer";
 /**
  * `<details>`, not an accordion component: it opens without hydration, is

package/dist/react/Faq.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "@evinvest/uikit";
+import { partWithLeading } from "./parts.js";
 export function Faq({ items, head, id = "faq", className, classNames: c }) {
-    return (_jsxs("div", { id: id, className: cn("flex flex-col gap-6 md:gap-11", className), children: [head, _jsx("div", { className: cn("overflow-hidden rounded-xl border border-border bg-background", c?.list), children: items.map(item => (_jsxs("details", { className: cn("group border-b border-border last:border-b-0", c?.item), children: [_jsxs("summary", { className: cn("flex cursor-pointer list-none items-start gap-4 px-5 py-5 md:px-8 md:py-6 [&::-webkit-details-marker]:hidden", c?.summary), children: [_jsx("span", { className: cn("flex-1 font-display text-lg font-bold leading-snug text-ink", c?.question), children: item.q }), _jsx("span", { className: cn("text-lg text-primary-ink transition-transform group-open:rotate-45", c?.icon), "aria-hidden": "true", children: "+" })] }), _jsx("p", { className: cn("px-5 pb-5 text-base leading-relaxed text-ink-soft md:px-8 md:pb-6", c?.answer), children: item.a })] }, item.q))) })] }));
+    return (_jsxs("div", { id: id, className: cn("flex flex-col gap-6 md:gap-11", className), children: [head, _jsx("div", { className: cn("overflow-hidden rounded-xl border border-border bg-background", c?.list), children: items.map(item => (_jsxs("details", { className: cn("group border-b border-border last:border-b-0", c?.item), children: [_jsxs("summary", { className: cn("flex cursor-pointer list-none items-start gap-4 px-5 py-5 md:px-8 md:py-6 [&::-webkit-details-marker]:hidden", c?.summary), children: [_jsx("span", { className: partWithLeading("flex-1 font-display text-lg font-bold text-ink", "leading-snug", c?.question), children: item.q }), _jsx("span", { className: cn("text-lg text-primary-ink transition-transform group-open:rotate-45", c?.icon), "aria-hidden": "true", children: "+" })] }), _jsx("p", { className: partWithLeading("px-5 pb-5 text-base text-ink-soft md:px-8 md:pb-6", "leading-relaxed", c?.answer), children: item.a })] }, item.q))) })] }));
 }

package/dist/react/FormSelect.d.ts

@@ -0,0 +1,45 @@
+import { type SelectTriggerSize } from "@evinvest/uikit";
+import type { PartClassNames } from "./parts.js";
+/**
+ * A form's choice that works before any script and looks like the kit after
+ * it. The server, and a browser without JavaScript, get the kit's
+ * `NativeSelect` — a real `<select name>` the form posts as is. Once the page
+ * has hydrated it becomes the kit's `Select`, drawn in the palette instead of
+ * the platform's menu, with the value in an input of the same `name`. Both
+ * are the same box (height, width, border, inset), so the swap moves nothing.
+ *
+ * Inside a `Field`, its label names whichever control is rendered: the
+ * `Field`'s id goes to the `<select>` first and to the trigger after.
+ */
+export interface FormSelectOption {
+    value: string;
+    label: string;
+}
+/** `trigger`: the control in both states; `content` and `item`: the scripted list. */
+export type FormSelectPart = "trigger" | "content" | "item";
+export interface FormSelectProps {
+    name: string;
+    options: readonly FormSelectOption[];
+    /** Without it: empty under a `placeholder`, else the first option — a native select's own rule. */
+    defaultValue?: string | undefined;
+    /** An empty, unpickable choice shown until one is made. */
+    placeholder?: string | undefined;
+    required?: boolean | undefined;
+    disabled?: boolean | undefined;
+    size?: SelectTriggerSize | undefined;
+    id?: string | undefined;
+    /** The box both states share — what a layout sizes. */
+    className?: string | undefined;
+    classNames?: PartClassNames<FormSelectPart> | undefined;
+    onValueChange?: ((value: string) => void) | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-invalid"?: boolean | undefined;
+}
+export declare function FormSelect(props: FormSelectProps): import("react").JSX.Element;
+/**
+ * Both states on demand — for the widget gallery, which renders on the server
+ * and would only ever see the native one. Not part of the package's surface.
+ */
+export declare function FormSelectView({ scripted, ...props }: FormSelectProps & {
+    scripted: boolean;
+}): import("react").JSX.Element;

package/dist/react/FormSelect.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, NativeSelect, NativeSelectOption, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@evinvest/uikit";
+import { useRef, useSyncExternalStore } from "react";
+import { useFormSelectValue } from "./form-select-value.js";
+const BOX = "relative inline-flex w-full";
+// The trigger's geometry matched to `NativeSelect`'s at each size: full width,
+// the same text size (16 px on phones, which keeps iOS from zooming).
+// The chevron at full strength, as the native select draws it: the kit's
+// trigger dims its own arrow.
+const TRIGGER = "w-full min-w-0 text-ink [&>svg]:opacity-100";
+const TRIGGER_TEXT = { sm: "text-base md:text-sm", md: "text-base md:text-sm", lg: "" };
+const subscribe = () => () => { };
+/** `false` on the server and while hydrating, `true` from the render after. */
+const useHydrated = () => useSyncExternalStore(subscribe, () => true, () => false);
+export function FormSelect(props) {
+    return _jsx(FormSelectView, { ...props, scripted: useHydrated() });
+}
+/**
+ * Both states on demand — for the widget gallery, which renders on the server
+ * and would only ever see the native one. Not part of the package's surface.
+ */
+export function FormSelectView({ scripted, ...props }) {
+    const { name, options, placeholder, required, disabled, size = "md", id, className, classNames } = props;
+    const initial = props.defaultValue ?? (placeholder !== undefined ? "" : (options[0]?.value ?? ""));
+    const native = useRef(null);
+    // The box, not the trigger: `SelectTrigger` keeps its own ref for placing the list.
+    const box = useRef(null);
+    const state = useFormSelectValue({ initial, native, box, scripted, onValueChange: props.onValueChange });
+    const hint = placeholder !== undefined ? { placeholder } : {};
+    const aria = { "aria-describedby": props["aria-describedby"], "aria-invalid": props["aria-invalid"] || state.invalid || undefined };
+    if (!scripted) {
+        return (_jsx(NativeSelect, { ref: native, name: name, id: id, size: size, ...hint, required: required, disabled: disabled, defaultValue: initial, wrapperClassName: cn(BOX, className), className: classNames?.trigger, ...aria, children: options.map(o => (_jsx(NativeSelectOption, { value: o.value, children: o.label }, o.value))) }));
+    }
+    return (_jsxs("span", { ref: box, "data-slot": "form-select", className: cn(BOX, className), children: [_jsxs(Select, { value: state.value, onValueChange: state.choose, open: state.open, onOpenChange: state.setOpen, children: [_jsx(SelectTrigger, { id: id, size: size, disabled: disabled, "aria-required": required || undefined, className: cn(TRIGGER, TRIGGER_TEXT[size], classNames?.trigger), ...aria, children: _jsx(SelectValue, { ...hint }) }), _jsx(SelectContent, { className: cn("min-w-(--select-trigger-width)", classNames?.content), children: options.map(o => (_jsx(SelectItem, { value: o.value, className: cn(size === "lg" && "py-2.5 text-base", classNames?.item), children: o.label }, o.value))) })] }), required ? (
+            // Validated, so not `type="hidden"` (which the browser never checks);
+            // under the trigger, out of the tab order, the accessibility tree and
+            // the browser's autofill.
+            _jsx("input", { name: name, value: state.value, required: true, disabled: disabled, tabIndex: -1, "aria-hidden": "true", autoComplete: "off", onChange: () => { }, onInvalid: state.onInvalid, className: "pointer-events-none absolute inset-0 opacity-0" })) : (
+            // Nothing chosen posts nothing, as a native select on its disabled placeholder.
+            state.value !== "" && _jsx("input", { type: "hidden", name: name, value: state.value, disabled: disabled }))] }));
+}

package/dist/react/LangSwitch.js

@@ -12,6 +12,13 @@ export function withLang(href, locale) {
         return `//${url.host}${rest}`;
     return /^[a-z][a-z0-9+.-]*:/i.test(href) ? `${url.origin}${rest}` : rest;
 }
+// A hit area around each code, centred on it by a pseudo-element so the visual
+// size and the focus ring stay the link's own: 44 px tall (Apple's HIG), and
+// 6 px wider on each side — about half the gap-dot-gap between codes, so
+// neighbours never overlap and a tap always lands on the code it is nearest to.
+// That still clears WCAG 2.5.8's 24 px; a full 44 px width would need wider
+// spacing between the codes.
+const HIT_AREA = "relative after:absolute after:top-1/2 after:left-1/2 after:h-full after:min-h-11 after:w-[calc(100%+0.75rem)] after:-translate-x-1/2 after:-translate-y-1/2";
 export function LangSwitch({ current, locales, hrefs, labels, label = "Language", className }) {
-    return (_jsx("nav", { "aria-label": label, className: cn("flex items-center gap-1.5", className), children: locales.map((locale, i) => (_jsxs("span", { className: "flex items-center gap-1.5", children: [i > 0 && (_jsx("span", { "aria-hidden": "true", className: "opacity-40", children: "\u00B7" })), _jsx("a", { href: withLang(hrefs[locale], locale), hrefLang: locale, lang: locale, "aria-label": labels?.[locale], "aria-current": locale === current ? "true" : undefined, className: locale === current ? "font-semibold" : "opacity-60 hover:opacity-100", children: locale.toUpperCase() })] }, locale))) }));
+    return (_jsx("nav", { "aria-label": label, className: cn("flex items-center gap-1.5", className), children: locales.map((locale, i) => (_jsxs("span", { className: "flex items-center gap-1.5", children: [i > 0 && (_jsx("span", { "aria-hidden": "true", className: "opacity-40", children: "\u00B7" })), _jsx("a", { href: withLang(hrefs[locale], locale), hrefLang: locale, lang: locale, "aria-label": labels?.[locale], "aria-current": locale === current ? "true" : undefined, className: cn(HIT_AREA, locale === current ? "font-semibold" : "opacity-60 hover:opacity-100"), children: locale.toUpperCase() })] }, locale))) }));
 }

package/dist/react/MapFacade.d.ts

@@ -1,3 +1,5 @@
+import type { PartClassNames } from "./parts.js";
+export type MapFacadePart = "show" | "address";
 /**
  * Google's map behind a click. Until the visitor asks, the page holds a button
  * and nothing else — no Google request, no cookie — so a cookieless page stays
@@ -14,5 +16,6 @@ export interface MapFacadeProps {
     /** The address, printed under the call to action. */
     address: string;
     className?: string;
+    classNames?: PartClassNames<MapFacadePart>;
 }
-export declare function MapFacade({ query, title, show, address, className }: MapFacadeProps): import("react").JSX.Element;
+export declare function MapFacade({ query, title, show, address, className, classNames: c }: MapFacadeProps): import("react").JSX.Element;

package/dist/react/MapFacade.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ClickToLoad } from "@evinvest/marketing/click-to-load";
 import { cn } from "@evinvest/uikit";
-export function MapFacade({ query, title, show, address, className }) {
+export function MapFacade({ query, title, show, address, className, classNames: c }) {
     const src = `https://www.google.com/maps?q=${encodeURIComponent(query)}&output=embed`;
-    return (_jsx(ClickToLoad, { className: cn("relative aspect-video w-full overflow-hidden rounded-xl border border-border bg-muted md:aspect-[21/9]", className), placeholder: load => (_jsxs("button", { type: "button", onClick: load, className: "flex size-full flex-col items-center justify-center gap-2 px-6 text-center hover:bg-hover", children: [_jsx("span", { className: "font-display text-lg font-bold text-ink", children: show }), _jsx("span", { className: "text-sm text-ink-soft", children: address })] })), children: _jsx("iframe", { title: title, src: src, loading: "lazy", referrerPolicy: "no-referrer-when-downgrade", className: "absolute inset-0 size-full border-0" }) }));
+    return (_jsx(ClickToLoad, { className: cn("relative aspect-video w-full overflow-hidden rounded-xl border border-border bg-muted md:aspect-[21/9]", className), placeholder: load => (_jsxs("button", { type: "button", onClick: load, className: "flex size-full flex-col items-center justify-center gap-2 px-6 text-center hover:bg-hover", children: [_jsx("span", { className: cn("font-display text-lg font-bold text-ink", c?.show), children: show }), _jsx("span", { className: cn("text-sm text-ink-soft", c?.address), children: address })] })), children: _jsx("iframe", { title: title, src: src, loading: "lazy", referrerPolicy: "no-referrer-when-downgrade", className: "absolute inset-0 size-full border-0" }) }));
 }

package/dist/react/PlaceDirectory.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import { type Place } from "../core/place/types.js";
-import type { PartClassNames } from "./parts.js";
+import { type PartClassNames } from "./parts.js";
 export type PlaceDirectoryPart = "list" | "card" | "name" | "address" | "phone" | "link";
 /**
  * The apex's one job on a `subdomains` site: send the visitor to their place.

package/dist/react/PlaceDirectory.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "@evinvest/uikit";
 import { telHref } from "@evinvest/marketing";
 import { storefrontOf } from "../core/place/types.js";
+import { partWithLeading } from "./parts.js";
 export function PlaceDirectory(props) {
     const { places, head, id = "points", className } = props;
     return (_jsxs("div", { id: id, className: cn("flex flex-col gap-7 md:gap-10", className), children: [head, _jsx("ul", { className: cn("grid gap-4 sm:grid-cols-2 lg:grid-cols-3", props.classNames?.list), children: places.map(place => (_jsx(PlaceCard, { place: place, ...props }, place.slug))) })] }));
@@ -9,5 +10,5 @@ export function PlaceDirectory(props) {
 function PlaceCard({ place, locale, hrefOf, phoneOf, openLabel, classNames: c }) {
     const phone = phoneOf(place);
     const front = storefrontOf(place);
-    return (_jsxs("li", { className: cn("flex flex-col gap-3 rounded-xl border border-border bg-card p-6 md:p-7", c?.card), children: [_jsx("p", { className: cn("font-display text-xl font-bold text-ink", c?.name), children: place.name[locale] }), front && (_jsxs("address", { className: cn("text-sm not-italic leading-relaxed text-ink-soft", c?.address), children: [front.address.street, _jsx("br", {}), front.address.postalCode, " ", front.address.locality] })), phone && (_jsx("a", { href: telHref(phone), className: cn("font-display text-lg font-bold text-primary-ink", c?.phone), children: phone })), _jsxs("a", { href: hrefOf(place), className: cn("mt-auto text-sm font-medium text-ink underline-offset-4 hover:underline", c?.link), children: [openLabel, " \u2192"] })] }));
+    return (_jsxs("li", { className: cn("flex flex-col gap-3 rounded-xl border border-border bg-card p-6 md:p-7", c?.card), children: [_jsx("p", { className: cn("font-display text-xl font-bold text-ink", c?.name), children: place.name[locale] }), front && (_jsxs("address", { className: partWithLeading("text-sm not-italic text-ink-soft", "leading-relaxed", c?.address), children: [front.address.street, _jsx("br", {}), front.address.postalCode, " ", front.address.locality] })), phone && (_jsx("a", { href: telHref(phone), className: cn("font-display text-lg font-bold text-primary-ink", c?.phone), children: phone })), _jsxs("a", { href: hrefOf(place), className: cn("mt-auto text-sm font-medium text-ink underline-offset-4 hover:underline", c?.link), children: [openLabel, " \u2192"] })] }));
 }

package/dist/react/StatusScreen.d.ts

@@ -1,8 +1,8 @@
 import type { ReactNode } from "react";
 import type { CopySlice, StatusCopy, StatusScreenText } from "../core/content.js";
 import type { StatusTarget } from "../core/status.js";
-import type { PartClassNames } from "./parts.js";
-export type StatusScreenPart = "header" | "logo" | "phone" | "main" | "eyebrow" | "code" | "headline" | "body" | "actions" | "primaryButton" | "secondaryButton" | "strip" | "footer";
+import { type PartClassNames } from "./parts.js";
+export type StatusScreenPart = "header" | "logo" | "lang" | "phone" | "main" | "eyebrow" | "code" | "headline" | "body" | "actions" | "primaryButton" | "secondaryButton" | "strip" | "footer";
 /**
  * The 404, the 500 and the post-submit confirmation: one screen over a
  * `StatusCopy`, differing only in eyebrow, numeral, headline and buttons. A

package/dist/react/StatusScreen.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { telHref } from "@evinvest/marketing";
 import { Button, Check, cn } from "@evinvest/uikit";
 import { LangSwitch } from "./LangSwitch.js";
+import { partWithLeading } from "./parts.js";
 export function StatusScreen(props) {
     const { copy, status, target, locales, labels, brandName, logo, mark, className, buttonClassName, classNames: c } = props;
     const { t, f } = copy;
@@ -15,8 +16,5 @@ export function StatusScreen(props) {
     // A brand with no phone falls back to "home" rather than a dead button.
     const primary = action(status.primary) ?? action("home");
     const secondary = action(status.secondary);
-    return (_jsxs("div", { className: cn("relative flex min-h-screen flex-col bg-background text-ink", className), children: [_jsxs("header", { className: cn("relative flex flex-wrap items-center gap-x-4 gap-y-2 border-b border-border px-5 py-3 md:flex-nowrap md:gap-5 md:px-12 md:py-5", c?.header), children: [_jsx("a", { href: target.home, "aria-label": brandName, className: cn("shrink-0 text-ink", c?.logo), children: logo ?? _jsx("span", { className: "font-display text-lg font-bold md:text-xl", children: brandName }) }), _jsx("div", { className: "flex-1" }), _jsx(LangSwitch, { current: copy.locale, locales: locales, hrefs: target.langHrefs, ...(labels ? { labels } : {}), className: "order-last w-full text-sm font-medium text-ink-soft md:order-none md:w-auto" }), target.phone && (_jsx("a", { href: telHref(target.phone), className: cn("whitespace-nowrap font-display text-base font-bold text-primary-ink md:text-xl", c?.phone), children: target.phone }))] }), _jsxs("main", { className: cn("relative flex flex-1 flex-col items-center gap-5 px-5 py-12 text-center md:gap-6 md:py-24", c?.main), children: [mark, _jsx("p", { className: cn("text-xs font-medium tracking-widest text-primary-ink", c?.eyebrow), children: status.eyebrow }), _jsx("p", { className: cn("font-display text-8xl font-bold leading-none tracking-tight text-ink md:text-9xl", c?.code), children: status.code }), _jsxs("h1", { className: cn("font-display text-2xl font-bold leading-snug text-ink md:text-4xl", c?.headline), children: [status.headline[0], _jsx("span", { className: "text-primary-ink", children: status.headline[1] })] }), _jsx("p", { className: cn("max-w-2xl text-base leading-relaxed text-ink-soft md:text-lg", c?.body), children: status.body(f) }), _jsxs("div", { className: cn("flex flex-col gap-3.5 sm:flex-row", c?.actions), children: [primary && (_jsx(Button, { href: primary.href, size: "xl", className: cn(buttonClassName, c?.primaryButton), children: primary.label })), secondary && secondary.href !== primary?.href && (
-                            // The kit's outline border is `--border`, 14 % ink: 1.4:1 on the
-                            // dark polarity. Half ink clears 3:1 for a control on either one.
-                            _jsx(Button, { href: secondary.href, size: "xl", variant: "outline", className: cn("border-ink/50", buttonClassName, c?.secondaryButton), children: secondary.label }))] }), _jsx("ul", { className: cn("flex flex-col items-center gap-3 text-sm sm:flex-row sm:gap-6", c?.strip), children: t.statusStrip.map(term => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx(Check, {}), _jsx("span", { className: "font-medium text-ink-soft", children: term })] }, term))) })] }), _jsx("footer", { className: cn("relative border-t border-border px-5 py-6 text-xs uppercase tracking-wider text-ink-soft md:px-12 md:py-7", c?.footer), children: _jsx("p", { children: t.facts(f).join(" · ") }) })] }));
+    return (_jsxs("div", { className: cn("relative flex min-h-screen flex-col bg-background text-ink", className), children: [_jsxs("header", { className: cn("relative flex flex-wrap items-center gap-x-4 gap-y-2 border-b border-border px-5 py-3 md:flex-nowrap md:gap-5 md:px-12 md:py-5", c?.header), children: [_jsx("a", { href: target.home, "aria-label": brandName, className: cn("shrink-0 text-ink", c?.logo), children: logo ?? _jsx("span", { className: "font-display text-lg font-bold md:text-xl", children: brandName }) }), _jsx("div", { className: "flex-1" }), _jsx(LangSwitch, { current: copy.locale, locales: locales, hrefs: target.langHrefs, ...(labels ? { labels } : {}), className: cn("order-last w-full text-sm font-medium text-ink-soft md:order-none md:w-auto", c?.lang) }), target.phone && (_jsx("a", { href: telHref(target.phone), className: cn("whitespace-nowrap font-display text-base font-bold text-primary-ink md:text-xl", c?.phone), children: target.phone }))] }), _jsxs("main", { className: cn("relative flex flex-1 flex-col items-center gap-5 px-5 py-12 text-center md:gap-6 md:py-24", c?.main), children: [mark, _jsx("p", { className: cn("text-xs font-medium tracking-widest text-primary-ink", c?.eyebrow), children: status.eyebrow }), _jsx("p", { className: partWithLeading("font-display text-8xl font-bold tracking-tight text-ink md:text-9xl", "leading-none", c?.code), children: status.code }), _jsxs("h1", { className: partWithLeading("font-display text-2xl font-bold text-ink md:text-4xl", "leading-snug", c?.headline), children: [status.headline[0], _jsx("span", { className: "text-primary-ink", children: status.headline[1] })] }), _jsx("p", { className: partWithLeading("max-w-2xl text-base text-ink-soft md:text-lg", "leading-relaxed", c?.body), children: status.body(f) }), _jsxs("div", { className: cn("flex flex-col gap-3.5 sm:flex-row", c?.actions), children: [primary && (_jsx(Button, { href: primary.href, size: "xl", className: cn(buttonClassName, c?.primaryButton), children: primary.label })), secondary && secondary.href !== primary?.href && (_jsx(Button, { href: secondary.href, size: "xl", variant: "outline", className: cn(buttonClassName, c?.secondaryButton), children: secondary.label }))] }), _jsx("ul", { className: cn("flex flex-col items-center gap-3 text-sm sm:flex-row sm:gap-6", c?.strip), children: t.statusStrip.map(term => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx(Check, {}), _jsx("span", { className: "font-medium text-ink-soft", children: term })] }, term))) })] }), _jsx("footer", { className: cn("relative border-t border-border px-5 py-6 text-xs uppercase tracking-wider text-ink-soft md:px-12 md:py-7", c?.footer), children: _jsx("p", { children: t.facts(f).join(" · ") }) })] }));
 }

package/dist/react/form-select-value.d.ts

@@ -0,0 +1,20 @@
+import { type InvalidEvent, type RefObject } from "react";
+/**
+ * The value `FormSelect` posts, across the swap from the native select and
+ * through the form's own life: a reset, and a required check that points at
+ * the kit's trigger instead of an input nobody sees.
+ */
+export declare function useFormSelectValue(opts: {
+    initial: string;
+    native: RefObject<HTMLSelectElement | null>;
+    box: RefObject<HTMLElement | null>;
+    scripted: boolean;
+    onValueChange: ((value: string) => void) | undefined;
+}): {
+    value: string;
+    choose: (next: string) => void;
+    invalid: boolean;
+    open: boolean;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    onInvalid: (e: InvalidEvent<HTMLInputElement>) => void;
+};

package/dist/react/form-select-value.js

@@ -0,0 +1,72 @@
+"use client";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+/**
+ * The value `FormSelect` posts, across the swap from the native select and
+ * through the form's own life: a reset, and a required check that points at
+ * the kit's trigger instead of an input nobody sees.
+ */
+export function useFormSelectValue(opts) {
+    const { initial, native, box, scripted, onValueChange } = opts;
+    const [value, setValue] = useState(initial);
+    const [invalid, setInvalid] = useState(false);
+    const [open, setOpen] = useState(false);
+    const initialRef = useRef(initial);
+    initialRef.current = initial;
+    // A choice made in the native select before the script arrived survives the
+    // swap: read in the hydration commit, before the scripted render. Once —
+    // later renders never hold the native select.
+    useLayoutEffect(() => {
+        if (native.current)
+            setValue(native.current.value);
+    }, [native]);
+    // A form reset puts a native select back on its default; so does this.
+    // Interactive validation — the browser's own, on a submit — is told apart
+    // from a script's `checkValidity()` by the submit that starts it.
+    const submitting = useRef(false);
+    useEffect(() => {
+        const form = box.current?.closest("form");
+        if (!scripted || !form)
+            return;
+        const reset = () => setValue(initialRef.current);
+        // On the document, not the form: a submit button may sit outside it
+        // (`form="…"`), and the click may land on an icon inside the button.
+        const submit = (e) => {
+            const control = e.target?.closest?.("button, input");
+            if (!(control instanceof HTMLButtonElement || control instanceof HTMLInputElement))
+                return;
+            if (control.form !== form || control.type !== "submit")
+                return;
+            submitting.current = true;
+            // The invalid events of this submit fire before the task ends.
+            setTimeout(() => (submitting.current = false), 0);
+        };
+        form.addEventListener("reset", reset);
+        document.addEventListener("click", submit, true);
+        return () => {
+            form.removeEventListener("reset", reset);
+            document.removeEventListener("click", submit, true);
+        };
+    }, [box, scripted]);
+    const choose = (next) => {
+        setValue(next);
+        setInvalid(false);
+        onValueChange?.(next);
+    };
+    // The browser's bubble would point at an input nobody sees: the trigger
+    // takes the error state instead. On a submit, the form's first invalid
+    // field also takes focus with its list open, where the bubble would have
+    // been; a script's quiet `checkValidity()` moves nothing.
+    const onInvalid = (e) => {
+        e.preventDefault();
+        setInvalid(true);
+        if (!submitting.current)
+            return;
+        // `validity`, not `:invalid`: jsdom answers that selector by firing `invalid` again.
+        const first = Array.from(e.currentTarget.form?.elements ?? []).find(el => "validity" in el && !el.validity.valid);
+        if (first === e.currentTarget) {
+            box.current?.querySelector("button")?.focus();
+            setOpen(true);
+        }
+    };
+    return { value, choose, invalid, open, setOpen, onInvalid };
+}

package/dist/react/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * `@evinvest/kitstart/react` — the structural widgets every landing shares,
  * where behaviour matters more than look. Server components by default; only
- * `MapFacade` and `AnalyticsBoundary` are client modules, each its own file
+ * `MapFacade`, `AnalyticsBoundary` and `FormSelect` are client modules, each its own file
  * with its own `"use client"`, so a page pays for what it renders.
  *
  * Styled with the kit's token roles only (`text-ink`, `border-border`,
@@ -15,8 +15,9 @@ export { AreaChips } from "./AreaChips.js";
 export { CallBar, type CallBarPart, type CallBarProps } from "./CallBar.js";
 export { Coverage, type CoveragePart, type CoverageProps } from "./Coverage.js";
 export { Faq, type FaqPart, type FaqProps } from "./Faq.js";
+export { FormSelect, type FormSelectOption, type FormSelectPart, type FormSelectProps } from "./FormSelect.js";
 export { LangSwitch, withLang, type LangSwitchProps } from "./LangSwitch.js";
-export { MapFacade, type MapFacadeProps } from "./MapFacade.js";
+export { MapFacade, type MapFacadePart, type MapFacadeProps } from "./MapFacade.js";
 export { PlaceDirectory, type PlaceDirectoryPart, type PlaceDirectoryProps } from "./PlaceDirectory.js";
 export { PHONE_INPUT_PROPS, QuoteFormShell, type QuoteFormShellProps } from "./QuoteFormShell.js";
 export { StatusScreen, type StatusScreenPart, type StatusScreenProps } from "./StatusScreen.js";

package/dist/react/index.js

@@ -1,7 +1,7 @@
 /**
  * `@evinvest/kitstart/react` — the structural widgets every landing shares,
  * where behaviour matters more than look. Server components by default; only
- * `MapFacade` and `AnalyticsBoundary` are client modules, each its own file
+ * `MapFacade`, `AnalyticsBoundary` and `FormSelect` are client modules, each its own file
  * with its own `"use client"`, so a page pays for what it renders.
  *
  * Styled with the kit's token roles only (`text-ink`, `border-border`,
@@ -15,6 +15,7 @@ export { AreaChips } from "./AreaChips.js";
 export { CallBar } from "./CallBar.js";
 export { Coverage } from "./Coverage.js";
 export { Faq } from "./Faq.js";
+export { FormSelect } from "./FormSelect.js";
 export { LangSwitch, withLang } from "./LangSwitch.js";
 export { MapFacade } from "./MapFacade.js";
 export { PlaceDirectory } from "./PlaceDirectory.js";

package/dist/react/parts.d.ts

@@ -5,3 +5,10 @@
  * when the widget's markup moves.
  */
 export type PartClassNames<P extends string> = Readonly<Partial<Record<P, string>>>;
+/**
+ * `cn(base, part)` for a part that has a line height: tailwind-merge drops an
+ * earlier `leading-*` for any later font size, so `text-[88px]` from a brand
+ * would silently take the kit's `leading-none` with it. `leading` goes after
+ * the brand's classes instead — unless they set a line height themselves.
+ */
+export declare function partWithLeading(base: string, leading: string, part: string | undefined): string;

package/dist/react/parts.js

@@ -1 +1,33 @@
-export {};
+import { cn } from "@evinvest/uikit";
+// Probes no brand writes: a probe equal to a brand's class would merge into it
+// and read as "no conflict".
+const LEADING_PROBE = "leading-[0.001]";
+const SIZE_PROBE = "text-[0.001px]";
+const conflictsWith = (probe, token) => !cn(probe, token).split(" ").includes(probe);
+/**
+ * Whether a part's classes set a line height of their own — a `leading-*`, or
+ * a size with one (`text-lg/7`) — at the base variant. tailwind-merge decides
+ * the conflicts, so variants and `!` are read the way the merge reads them.
+ */
+function setsLineHeight(part) {
+    return part
+        .split(/\s+/)
+        .filter(Boolean)
+        .some(token => {
+        if (!conflictsWith(LEADING_PROBE, token))
+            return false;
+        if (!conflictsWith(SIZE_PROBE, token))
+            return true;
+        // A size: it carries a line height only after a `/` outside brackets.
+        return token.replace(/\[[^\]]*\]/g, "").includes("/");
+    });
+}
+/**
+ * `cn(base, part)` for a part that has a line height: tailwind-merge drops an
+ * earlier `leading-*` for any later font size, so `text-[88px]` from a brand
+ * would silently take the kit's `leading-none` with it. `leading` goes after
+ * the brand's classes instead — unless they set a line height themselves.
+ */
+export function partWithLeading(base, leading, part) {
+    return part && setsLineHeight(part) ? cn(base, part) : cn(base, part, leading);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evinvest/kitstart",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Landing-site machinery for local-service brands: a site composition root, the Place/Presence/ServiceArea model with a publication gate, host/locale routing, schema.org and SEO builders, the lead funnel with its antispam, and analytics events. Pure core at '.', more subpaths per runtime.",
   "license": "BlueOak-1.0.0",
   "publishConfig": {
@@ -80,7 +80,7 @@
     "@evinvest/analytics": ">=0.3.0 <1",
     "@evinvest/i18n": ">=0.9.0 <1",
     "@evinvest/marketing": ">=0.3.0 <1",
-    "@evinvest/uikit": ">=0.20.0 <1",
+    "@evinvest/uikit": ">=0.21.0 <1",
     "next": "^16",
     "react": "^19",
     "server-only": "*"

package/template/README.md

@@ -22,6 +22,9 @@ launch — `noindex` everywhere until `assets/card.toml` gets a `site`.
 8. `src/entities/content`: `Text extends CoreText`, one object per language,
    checked with `satisfies`. Every word on a page comes from here.
 9. `src/shared/config/lead.ts`: what the form asks (`subjects`, `wire`, `extras`).
+   A choice in the form is `FormSelect`: a native `<select>` until the page
+   hydrates (the form posts without JavaScript), the kit's list after — never
+   a bare `NativeSelect`, whose popup is the platform's menu.
 10. `src/views/`: the brand's sections around the package's widgets.
 11. Tests: `tests/contract.test.ts` runs the landing contract; add the copy's
     own, the e2e sections (`tests/e2e`, baselines from CI on Linux) and set

package/template/flake.nix

@@ -3,7 +3,7 @@
     v_flakes.url = "github:valeratrades/v_flakes?ref=v1.6";
     # The lib flake at the tag of the @evinvest/kitstart version in
     # package-lock.json — mkLanding refuses a mismatch.
-    ev.url = "github:EV-invest/lib?ref=@evinvest/kitstart-v0.1.0";
+    ev.url = "github:EV-invest/lib?ref=@evinvest/kitstart-v0.2.0";
     ev.inputs.v_flakes.follows = "v_flakes";
   };
 

package/template/package.json

@@ -20,9 +20,9 @@
   "dependencies": {
     "@evinvest/analytics": "^0.3.0",
     "@evinvest/i18n": "^0.9.0",
-    "@evinvest/kitstart": "^0.1.0",
+    "@evinvest/kitstart": "^0.2.0",
     "@evinvest/marketing": "^0.3.0",
-    "@evinvest/uikit": "^0.20.0",
+    "@evinvest/uikit": "^0.21.0",
     "next": "16.3.6",
     "react": "19.3.0",
     "react-dom": "19.3.0",

package/template/src/views/home/ui/PlaceHome.tsx

@@ -7,10 +7,9 @@ import {
   Faq,
   Field,
   FieldLabel,
+  FormSelect,
   Input,
   JsonLd,
-  NativeSelect,
-  NativeSelectOption,
   PHONE_INPUT_PROPS,
   QuoteFormShell,
   Section,
@@ -42,13 +41,12 @@ export function PlaceHome({ view, copy, renderedAt }: { view: PlaceView<Locale>;
             <p className="font-display text-2xl font-bold text-ink">{t.quoteForm.title}</p>
             <Field className="flex flex-col gap-2">
               <FieldLabel>{t.quoteLabels.subject}</FieldLabel>
-              <NativeSelect name={LEAD.wire.subject} size="lg" defaultValue={LEAD.subjects[0]}>
-                {LEAD.subjects.map(s => (
-                  <NativeSelectOption key={s} value={s}>
-                    {t.subjects[s]}
-                  </NativeSelectOption>
-                ))}
-              </NativeSelect>
+              <FormSelect
+                name={LEAD.wire.subject}
+                size="lg"
+                defaultValue={LEAD.subjects[0]}
+                options={LEAD.subjects.map(s => ({ value: s, label: t.subjects[s] }))}
+              />
             </Field>
             <Field className="flex flex-col gap-2">
               <FieldLabel>{t.quoteLabels.locality}</FieldLabel>

package/template/tests/e2e/quote-form.spec.ts

@@ -0,0 +1,82 @@
+import { expect, test, type Page } from "@playwright/test";
+
+// The quote form's contract with the visitor: it posts before any script
+// (the one standing in water may be on a bad connection), and once the script
+// is there the choice is the kit's list, not the platform's menu — in the
+// same box, so nothing moves when one becomes the other.
+const SUBJECT = "Prestation";
+
+async function fillAndSend(page: Page) {
+  await page.getByLabel("Ville ou code postal").fill("75011");
+  await page.getByLabel("Mobile").fill("0612345678");
+  await page.getByRole("button", { name: "Recevoir le prix" }).click();
+}
+
+test.describe("without JavaScript", () => {
+  // Reduced motion drops the page's smooth scroll, which without a script
+  // Playwright never sees settle before it clicks.
+  test.use({ javaScriptEnabled: false, reducedMotion: "reduce" });
+
+  test("the form posts the native select's value", async ({ page }) => {
+    await page.goto("/fr#quote");
+    const select = page.locator("#quote select[name=subject]");
+    await expect(select).toBeVisible();
+    await expect(page.getByLabel(SUBJECT)).toHaveJSProperty("tagName", "SELECT");
+    await select.selectOption("deep");
+    const posted = page.waitForRequest(r => r.method() === "POST" && new URL(r.url()).pathname === "/quote");
+    await fillAndSend(page);
+    expect(new URLSearchParams((await posted).postData() ?? "").get("subject")).toBe("deep");
+    await expect(page).toHaveURL(/\/fr\/thanks$/);
+  });
+});
+
+test.describe("with JavaScript", () => {
+  test("the choice is the kit's list, and the form posts it", async ({ page }) => {
+    await page.goto("/fr#quote");
+    const trigger = page.getByRole("combobox", { name: SUBJECT });
+    await expect(trigger).toBeVisible();
+    await expect(page.locator("#quote select")).toHaveCount(0);
+    await trigger.click();
+    const list = page.getByRole("listbox");
+    await expect(list).toBeVisible();
+    await list.getByRole("option", { name: "Grand ménage" }).click();
+    await expect(list).toBeHidden();
+    await expect(trigger).toHaveText("Grand ménage");
+    const posted = page.waitForRequest(r => r.method() === "POST" && new URL(r.url()).pathname === "/quote");
+    await fillAndSend(page);
+    expect(new URLSearchParams((await posted).postData() ?? "").get("subject")).toBe("deep");
+    await expect(page).toHaveURL(/\/fr\/thanks$/);
+  });
+
+  test("works from the keyboard", async ({ page }) => {
+    await page.goto("/fr#quote");
+    const trigger = page.getByRole("combobox", { name: SUBJECT });
+    await trigger.focus();
+    await page.keyboard.press("ArrowDown");
+    await expect(page.getByRole("option", { name: "Ménage courant" })).toBeFocused();
+    await page.keyboard.press("ArrowDown");
+    await page.keyboard.press("Enter");
+    await expect(page.getByRole("listbox")).toBeHidden();
+    await expect(trigger).toBeFocused();
+    await expect(trigger).toHaveText("Grand ménage");
+    await page.keyboard.press("Tab");
+    await expect(page.getByLabel("Ville ou code postal")).toBeFocused();
+  });
+});
+
+test("the field is the same box before and after hydration", async ({ browser }) => {
+  const box = async (javaScriptEnabled: boolean) => {
+    const context = await browser.newContext({ javaScriptEnabled });
+    const page = await context.newPage();
+    await page.goto("/fr#quote");
+    const control = javaScriptEnabled ? page.getByRole("combobox", { name: SUBJECT }) : page.locator("#quote select[name=subject]");
+    await expect(control).toBeVisible();
+    const rect = await control.evaluate(el => {
+      const r = el.getBoundingClientRect();
+      return { width: r.width, height: r.height, x: r.x, border: getComputedStyle(el).borderTopWidth, radius: getComputedStyle(el).borderTopLeftRadius };
+    });
+    await context.close();
+    return rect;
+  };
+  expect(await box(true)).toEqual(await box(false));
+});