@medalsocial/meda 3.10.0 → 3.11.0

package/dist/booking/booking-panel.d.ts

@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react';
+import type { BookingFormat } from './format.js';
+import { type BookingLabel } from './labels.js';
+import { type SlotClassNames } from './slots.js';
+/**
+ * «Your appointment» — the desktop's sticky side panel: everything chosen so
+ * far, the price, and the way on, in the half of a wide window a single
+ * column leaves empty.
+ *
+ * Presentational, like the summary bar it replaces from `lg` up: the rows,
+ * the total and whether «continue» does anything come in precomputed from the
+ * caller's machine. A row with no answer yet says so in muted text rather
+ * than disappearing, so the panel keeps its shape while it fills in.
+ */
+export declare const BOOKING_PANEL_LABEL_KEYS: readonly ["panel.heading", "panel.who", "panel.service", "panel.time", "panel.stylist", "panel.notChosen", "panel.firstAvailable", "panel.alsoFree", "panel.swap", "panel.swapTo", "panel.total", "panel.continue"];
+export type BookingPanelLabels = Record<(typeof BOOKING_PANEL_LABEL_KEYS)[number], BookingLabel>;
+export interface BookingPanelStylist {
+    name: string;
+    photoUrl?: string | null;
+    /** «First available» chose them. */
+    firstAvailable?: boolean;
+}
+export interface BookingPanelAlternative {
+    resourceId: string;
+    name: string;
+    photoUrl?: string | null;
+}
+/** The small print under the button: the change rule, how to pay, where. */
+export interface BookingPanelNote {
+    kind: 'change' | 'payment' | 'place';
+    text: ReactNode;
+}
+/**
+ * - `root` the `<aside>`
+ * - `heading` the `<h2>`
+ * - `total` the total row
+ * - `continue` the button
+ */
+export type BookingPanelSlot = 'root' | 'heading' | 'total' | 'continue';
+export interface BookingPanelProps {
+    labels: BookingPanelLabels;
+    format: BookingFormat;
+    /** «1 child, 1 adult»; `null` while nobody is chosen. */
+    who: string | null;
+    /** «Boys' cut · 30 min»; `null` while nothing is chosen. */
+    services: string | null;
+    /** The chosen start; `null` before a time is picked. */
+    startTs: number | null;
+    /**
+     * `null` before one is chosen; `undefined` draws no row at all (a family
+     * seen at once has a stylist per person, which the time chips already name).
+     */
+    stylist?: BookingPanelStylist | null;
+    /** Others free at the same start. Drawn with `onSwap`; at most two. */
+    alternatives?: readonly BookingPanelAlternative[];
+    onSwap?: (resourceId: string) => void;
+    /** The visit's total in minor units; `null` draws no total. */
+    totalOre: number | null;
+    /** Absent: no button (a step with its own, like the details form). */
+    onContinue?: () => void;
+    canContinue?: boolean;
+    notes?: readonly BookingPanelNote[];
+    classNames?: SlotClassNames<BookingPanelSlot>;
+}
+export declare function BookingPanel({ labels, format, who, services, startTs, stylist, alternatives, onSwap, totalOre, onContinue, canContinue, notes, classNames, }: BookingPanelProps): import("react").JSX.Element;

package/dist/booking/booking-panel.js

@@ -0,0 +1,76 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeftRight, CreditCard, MapPin } from 'lucide-react';
+import { cn } from '../lib/utils.js';
+import { renderLabel } from './internal/label-parts.js';
+import { BookingButton } from './internal/ui.js';
+import { fillLabel } from './labels.js';
+import { slotClass } from './slots.js';
+/**
+ * «Your appointment» — the desktop's sticky side panel: everything chosen so
+ * far, the price, and the way on, in the half of a wide window a single
+ * column leaves empty.
+ *
+ * Presentational, like the summary bar it replaces from `lg` up: the rows,
+ * the total and whether «continue» does anything come in precomputed from the
+ * caller's machine. A row with no answer yet says so in muted text rather
+ * than disappearing, so the panel keeps its shape while it fills in.
+ */
+export const BOOKING_PANEL_LABEL_KEYS = [
+    /** The panel's heading, «Your appointment». */
+    'panel.heading',
+    /** Row names. */
+    'panel.who',
+    'panel.service',
+    'panel.time',
+    'panel.stylist',
+    /** A row with nothing chosen yet, «Not chosen». */
+    'panel.notChosen',
+    /** After the stylist's name when «first available» picked them, «first available». */
+    'panel.firstAvailable',
+    /** Leads the swap row, «Also free then:». */
+    'panel.alsoFree',
+    /** The swap button's words, «Switch». */
+    'panel.swap',
+    /**
+     * `{name}` — read after `panel.swap` by a screen reader, «to {name}», so
+     * the button's name starts with the word on it (speech control matches it).
+     */
+    'panel.swapTo',
+    /** The total's words, «Total, paid at the salon». */
+    'panel.total',
+    /** The button, «Continue». */
+    'panel.continue',
+];
+const NOTE_ICONS = { change: ArrowLeftRight, payment: CreditCard, place: MapPin };
+const MAX_ALTERNATIVES = 2;
+function Face({ photoUrl }) {
+    if (!photoUrl)
+        return null;
+    return (_jsx("img", { src: photoUrl, alt: "", width: 24, height: 24, decoding: "async", className: "size-6 shrink-0 rounded-full object-cover" }));
+}
+export function BookingPanel({ labels, format, who, services, startTs, stylist, alternatives, onSwap, totalOre, onContinue, canContinue = false, notes = [], classNames, }) {
+    const notChosen = (_jsx("span", { className: "text-muted-foreground", children: renderLabel(labels['panel.notChosen']) }));
+    const swaps = onSwap ? (alternatives ?? []).slice(0, MAX_ALTERNATIVES) : [];
+    const rows = [
+        { name: labels['panel.who'], value: who ?? notChosen },
+        { name: labels['panel.service'], value: services ?? notChosen },
+        {
+            name: labels['panel.time'],
+            value: startTs === null ? notChosen : format.clock.dateTime(startTs),
+            strong: startTs !== null,
+        },
+    ];
+    if (stylist !== undefined) {
+        rows.push({
+            name: labels['panel.stylist'],
+            value: stylist ? (_jsxs("span", { className: "inline-flex flex-wrap items-center gap-1.5", children: [_jsx(Face, { photoUrl: stylist.photoUrl }), format.stylistName(stylist.name), stylist.firstAvailable && ' ', stylist.firstAvailable && (_jsx("span", { className: "text-xs text-muted-foreground", children: renderLabel(labels['panel.firstAvailable']) }))] })) : (notChosen),
+        });
+    }
+    return (_jsxs("aside", { "aria-labelledby": "booking-panel-heading", "data-testid": "booking-panel", className: slotClass(classNames, 'root', 'rounded-lg border border-border bg-card p-5 shadow-sm'), children: [_jsx("h2", { id: "booking-panel-heading", className: slotClass(classNames, 'heading', 'font-sans text-xl font-bold'), children: renderLabel(labels['panel.heading']) }), _jsx("dl", { className: "mt-3 divide-y divide-border text-sm", children: rows.map((row) => (_jsxs("div", { className: "flex gap-3 py-2.5", children: [_jsx("dt", { className: "w-14 shrink-0 text-muted-foreground", children: renderLabel(row.name) }), _jsx("dd", { className: cn('min-w-0 flex-1', row.strong && 'font-semibold tabular-nums'), children: row.value })] }, fillLabel(row.name, {})))) }), swaps.length > 0 && (_jsxs("p", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 ps-[4.25rem] pb-2 text-sm text-muted-foreground", children: [renderLabel(labels['panel.alsoFree']), swaps.map((alternative) => (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(Face, { photoUrl: alternative.photoUrl }), format.stylistName(alternative.name), _jsxs("button", { type: "button", onClick: () => onSwap?.(alternative.resourceId), className: "font-semibold text-primary underline-offset-4 hover:underline focus-visible:underline focus-visible:outline-none", children: [renderLabel(labels['panel.swap']), ' ', _jsx("span", { className: "sr-only", children: fillLabel(labels['panel.swapTo'], {
+                                            name: format.stylistName(alternative.name),
+                                        }) })] })] }, alternative.resourceId)))] })), totalOre !== null && (_jsxs("p", { className: slotClass(classNames, 'total', 'mt-2 flex items-baseline justify-between gap-3 border-t border-border pt-3 text-sm'), children: [_jsx("span", { className: "text-muted-foreground", children: renderLabel(labels['panel.total']) }), _jsx("span", { className: "font-sans text-lg font-bold tabular-nums", children: format.price(totalOre) })] })), onContinue && (_jsx(BookingButton, { size: "lg", className: slotClass(classNames, 'continue', 'mt-4 w-full'), disabled: !canContinue, onClick: onContinue, children: renderLabel(labels['panel.continue']) })), notes.length > 0 && (_jsx("ul", { className: "mt-4 space-y-2 text-sm text-muted-foreground", children: notes.map((note, index) => {
+                    const Icon = NOTE_ICONS[note.kind];
+                    return (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx(Icon, { "aria-hidden": "true", className: "size-4 shrink-0" }), _jsx("span", { children: note.text })] }, `${note.kind}-${index}`));
+                }) }))] }));
+}

package/dist/booking/confirmation.d.ts

@@ -15,7 +15,20 @@ import type { WizardItem } from './types.js';
  * link to a page that 404s reads as a booking that did not quite happen.
  */
 export declare const CONFIRMATION_LABEL_KEYS: readonly ["confirmation.heading", "confirmation.serviceFor", "confirmation.when", "confirmation.party.heading", "confirmation.party.line", "confirmation.party.stylist", "confirmation.party.total", "confirmation.calendar", "confirmation.manage", "confirmation.manageFor", "confirmation.portal", "confirmation.startOver"];
-export type ConfirmationLabels = Record<(typeof CONFIRMATION_LABEL_KEYS)[number], BookingLabel>;
+/**
+ * Opt-in keys for `layout="hero"`. Each piece is drawn only when its label is
+ * there, so a pack can take the leaf and the buttons without the tip.
+ *
+ * - `confirmation.sent` — under the heading, «The confirmation is on its way by text and e-mail».
+ * - `confirmation.leafTime` `{time}` — the leaf's last line, «at {time}».
+ * - `confirmation.detail.service` / `.stylist` / `.where` — the details card's row names.
+ * - `confirmation.duration` `{minutes}` — after the service, «{minutes} min».
+ * - `confirmation.directions` — the second button (needs `directionsHref`).
+ * - `confirmation.tip.heading` / `confirmation.tip.body` — the «before you come» card.
+ * - `confirmation.manageUntil` `{day}` `{time}` — after «change or cancel», until when it is free.
+ */
+export declare const CONFIRMATION_HERO_LABEL_KEYS: readonly ["confirmation.sent", "confirmation.leafTime", "confirmation.detail.service", "confirmation.detail.stylist", "confirmation.detail.where", "confirmation.duration", "confirmation.directions", "confirmation.tip.heading", "confirmation.tip.body", "confirmation.manageUntil"];
+export type ConfirmationLabels = Record<(typeof CONFIRMATION_LABEL_KEYS)[number], BookingLabel> & Partial<Record<(typeof CONFIRMATION_HERO_LABEL_KEYS)[number], BookingLabel>>;
 /**
  * One booked line (one person's appointment). One array rather than parallel
  * lists, because every part answers about the SAME line.
@@ -27,6 +40,8 @@ export interface ConfirmationLine {
     bookingId: string;
     /** Who takes this line; `null` = «first available» not worth naming. Cleaned with `format.stylistName`. */
     stylistName: string | null;
+    /** Their face, for `layout="hero"`. */
+    stylistPhotoUrl?: string | null;
     /** Where this line's own booking is managed; `null` draws no link. */
     manageHref: string | null;
     /** When this line starts (a sequential party runs back to back). */
@@ -78,9 +93,20 @@ export interface ConfirmationProps {
     onStartOver?: () => void;
     /** «today» is relative to this. Read once, so it cannot change mid-card. */
     now?: number;
+    /**
+     * `card` (the default) — heading, one card, text links. `hero` — the day as
+     * a large calendar leaf, a details card (service, stylist, where), the
+     * calendar and directions as buttons, an optional tip, and until when a
+     * change is free. Opt-in: the extra words are `CONFIRMATION_HERO_LABEL_KEYS`.
+     */
+    layout?: 'card' | 'hero';
+    /** With `hero`: a maps link for the directions button. `null` draws no button. */
+    directionsHref?: string | null;
+    /** With `hero`: until when a change or cancellation is free. `null` says nothing. */
+    freeChangeUntilTs?: number | null;
     format: BookingFormat;
     labels: ConfirmationLabels;
     classNames?: SlotClassNames<ConfirmationSlot>;
     components?: ConfirmationComponents;
 }
-export declare function Confirmation({ lines: rawLines, startTs, totalOre, address, calendarHref, calendarFileName, portalHref, onStartOver, now, format, labels, classNames, components, }: ConfirmationProps): import("react").JSX.Element;
+export declare function Confirmation({ lines: rawLines, startTs, totalOre, address, calendarHref, calendarFileName, portalHref, onStartOver, now, layout, directionsHref, freeChangeUntilTs, format, labels, classNames, components, }: ConfirmationProps): import("react").JSX.Element;

package/dist/booking/confirmation.js

@@ -1,7 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CalendarPlus, MapPin } from 'lucide-react';
+import { cn } from '../lib/utils.js';
 import { joinLabelParts, renderLabel } from './internal/label-parts.js';
-import { BookingButton } from './internal/ui.js';
+import { BookingButton, bookingButtonClass } from './internal/ui.js';
 import { visitName } from './internal/visit.js';
 import { fillLabel, labelText } from './labels.js';
 import { slotClass } from './slots.js';
@@ -37,13 +39,40 @@ export const CONFIRMATION_LABEL_KEYS = [
     'confirmation.portal',
     'confirmation.startOver',
 ];
+/**
+ * Opt-in keys for `layout="hero"`. Each piece is drawn only when its label is
+ * there, so a pack can take the leaf and the buttons without the tip.
+ *
+ * - `confirmation.sent` — under the heading, «The confirmation is on its way by text and e-mail».
+ * - `confirmation.leafTime` `{time}` — the leaf's last line, «at {time}».
+ * - `confirmation.detail.service` / `.stylist` / `.where` — the details card's row names.
+ * - `confirmation.duration` `{minutes}` — after the service, «{minutes} min».
+ * - `confirmation.directions` — the second button (needs `directionsHref`).
+ * - `confirmation.tip.heading` / `confirmation.tip.body` — the «before you come» card.
+ * - `confirmation.manageUntil` `{day}` `{time}` — after «change or cancel», until when it is free.
+ */
+export const CONFIRMATION_HERO_LABEL_KEYS = [
+    'confirmation.sent',
+    'confirmation.leafTime',
+    'confirmation.detail.service',
+    'confirmation.detail.stylist',
+    'confirmation.detail.where',
+    'confirmation.duration',
+    'confirmation.directions',
+    'confirmation.tip.heading',
+    'confirmation.tip.body',
+    'confirmation.manageUntil',
+];
 /** One row of the family card: the line and its own manage link. Renders an `<li>`. */
 export function DefaultPartyLine({ line, text, manageLabel, manageAriaLabel, linkClassName, }) {
     return (_jsxs("li", { className: "flex flex-wrap items-baseline gap-x-3", children: [_jsx("span", { className: "tabular-nums", children: text }), line.manageHref && (_jsx("a", { href: line.manageHref, "aria-label": manageAriaLabel, className: linkClassName ?? 'text-sm font-semibold text-primary underline underline-offset-4', children: manageLabel }))] }));
 }
 const SEPARATOR = ' · ';
-export function Confirmation({ lines: rawLines, startTs, totalOre, address = null, calendarHref = null, calendarFileName = 'booking.ics', portalHref = null, onStartOver, now = Date.now(), format, labels, classNames, components, }) {
+export function Confirmation({ lines: rawLines, startTs, totalOre, address = null, calendarHref = null, calendarFileName = 'booking.ics', portalHref = null, onStartOver, now = Date.now(), layout = 'card', directionsHref = null, freeChangeUntilTs = null, format, labels, classNames, components, }) {
     const { clock } = format;
+    if (layout === 'hero') {
+        return (_jsx(HeroConfirmation, { lines: rawLines, startTs: startTs, totalOre: totalOre, address: address, calendarHref: calendarHref, calendarFileName: calendarFileName, portalHref: portalHref, onStartOver: onStartOver, now: now, directionsHref: directionsHref, freeChangeUntilTs: freeChangeUntilTs, format: format, labels: labels, classNames: classNames, components: components }));
+    }
     // Cleaned here as well as upstream: a restored confirmation carries whatever
     // name was resolved when it was stored.
     const lines = rawLines.map((line) => ({
@@ -101,3 +130,83 @@ function PartyCard({ lines, totalOre, now, format, labels, classNames, PartyLine
                         }), linkClassName: slotClass(classNames, 'link', 'text-sm font-semibold text-primary underline underline-offset-4') }, index));
                 }) }), _jsx("p", { className: "font-semibold", children: renderLabel(labels['confirmation.party.total'], { total: format.price(totalOre) }) })] }));
 }
+/** A visit's minutes: every service in it, back to back. */
+function visitMinutes(item) {
+    return [item.service, ...(item.extraServices ?? [])].reduce((minutes, service) => minutes + service.durationMinutes, 0);
+}
+/**
+ * `layout="hero"`: the day first, as a large calendar leaf, then what was
+ * booked, and the two things a parent does next — put it in the calendar and
+ * find the way — as buttons rather than links.
+ */
+function HeroConfirmation({ lines: rawLines, startTs, totalOre, address, calendarHref, calendarFileName, portalHref, onStartOver, now, directionsHref, freeChangeUntilTs, format, labels, classNames, components, }) {
+    const { clock } = format;
+    const lines = rawLines.map((line) => ({
+        ...line,
+        stylistName: line.stylistName ? format.stylistName(line.stylistName) || null : null,
+    }));
+    const first = lines[0];
+    const [, month, day] = clock.dayKey(startTs).split('-').map(Number);
+    const linkClass = slotClass(classNames, 'link', 'font-semibold text-primary underline underline-offset-4');
+    const label = (key) => labels[key];
+    const when = renderLabel(labels['confirmation.when'], {
+        day: clock.dayLabel(startTs, now),
+        time: clock.formatTime(startTs),
+    });
+    const rows = [];
+    // A pack without the hero's row names still says what was booked: the card
+    // layout's one line, rather than a confirmation with no service on it.
+    const plainLine = first && lines.length === 1 && !label('confirmation.detail.service') ? (_jsx("p", { className: slotClass(classNames, 'card', 'rounded-lg border border-border bg-card px-5 py-4 font-medium'), children: joinLabelParts([
+            first.item.bookedForName
+                ? renderLabel(labels['confirmation.serviceFor'], {
+                    service: visitName(first.item),
+                    name: first.item.bookedForName,
+                })
+                : visitName(first.item),
+            first.stylistName,
+            when,
+            format.price(first.priceOre),
+        ], SEPARATOR) })) : null;
+    if (first && lines.length === 1) {
+        const service = first.item.bookedForName
+            ? renderLabel(labels['confirmation.serviceFor'], {
+                service: visitName(first.item),
+                name: first.item.bookedForName,
+            })
+            : visitName(first.item);
+        const duration = label('confirmation.duration');
+        if (label('confirmation.detail.service')) {
+            rows.push({
+                name: label('confirmation.detail.service'),
+                // The price stays with what was booked, as on the card layout.
+                value: joinLabelParts([
+                    service,
+                    duration ? renderLabel(duration, { minutes: visitMinutes(first.item) }) : null,
+                    format.price(first.priceOre),
+                ], SEPARATOR),
+            });
+        }
+        if (first.stylistName && label('confirmation.detail.stylist')) {
+            rows.push({
+                name: label('confirmation.detail.stylist'),
+                value: (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [first.stylistPhotoUrl && (_jsx("img", { src: first.stylistPhotoUrl, alt: "", width: 24, height: 24, decoding: "async", className: "size-6 shrink-0 rounded-full object-cover" })), first.stylistName] })),
+            });
+        }
+    }
+    if (address && label('confirmation.detail.where')) {
+        rows.push({ name: label('confirmation.detail.where'), value: address });
+    }
+    const manageUntil = label('confirmation.manageUntil');
+    return (_jsxs("section", { "aria-labelledby": "booking-confirmed-heading", className: slotClass(classNames, 'root', 'space-y-5'), children: [_jsxs("div", { className: "flex flex-col items-center gap-3 pt-2 text-center", children: [_jsxs("span", { "aria-hidden": "true", "data-testid": "confirmation-leaf", className: "flex w-28 flex-col overflow-hidden rounded-xl border border-border bg-card shadow-sm", children: [_jsx("span", { className: "bg-primary px-2 py-1 text-xs font-bold uppercase tracking-wider text-primary-foreground", children: clock.weekday(startTs) }), _jsx("span", { className: "pt-2 font-sans text-5xl font-bold leading-none tabular-nums", children: day }), _jsx("span", { className: "pt-1 text-sm text-muted-foreground", children: month ? clock.monthName(month) : '' }), _jsx("span", { className: "pb-2 text-sm font-semibold tabular-nums", children: label('confirmation.leafTime')
+                                    ? fillLabel(label('confirmation.leafTime'), {
+                                        time: clock.formatTime(startTs),
+                                    })
+                                    : clock.formatTime(startTs) })] }), _jsx("h2", { id: "booking-confirmed-heading", tabIndex: -1, className: slotClass(classNames, 'heading', 'font-sans text-2xl font-bold outline-none md:text-3xl'), children: labels['confirmation.heading'] }), _jsx("p", { className: "sr-only", children: when }), label('confirmation.sent') && (_jsx("p", { className: "text-sm text-muted-foreground", children: renderLabel(label('confirmation.sent')) }))] }), plainLine, lines.length > 1 && (_jsx(PartyCard, { lines: lines, totalOre: totalOre, now: now, format: format, labels: labels, classNames: classNames, PartyLine: components?.PartyLine ?? DefaultPartyLine })), rows.length > 0 && (_jsx("dl", { className: slotClass(classNames, 'card', 'divide-y divide-border rounded-lg border border-border bg-card px-5'), children: rows.map((row) => (_jsxs("div", { className: "flex items-center gap-4 py-3 text-sm", children: [_jsx("dt", { className: "w-16 shrink-0 text-muted-foreground", children: renderLabel(row.name) }), _jsx("dd", { className: "min-w-0 font-medium", children: row.value })] }, labelText(row.name)))) })), (calendarHref || (directionsHref && label('confirmation.directions'))) && (_jsxs("div", { className: "grid grid-cols-2 gap-2", children: [calendarHref && (_jsxs("a", { href: calendarHref, download: calendarFileName, className: bookingButtonClass({ size: 'lg', className: 'gap-2' }), children: [_jsx(CalendarPlus, { "aria-hidden": "true", className: "size-4" }), labels['confirmation.calendar']] })), directionsHref && label('confirmation.directions') && (_jsxs("a", { href: directionsHref, target: "_blank", rel: "noopener", className: bookingButtonClass({
+                            variant: 'outline',
+                            size: 'lg',
+                            className: cn('gap-2', !calendarHref && 'col-span-2'),
+                        }), children: [_jsx(MapPin, { "aria-hidden": "true", className: "size-4" }), renderLabel(label('confirmation.directions'))] }))] })), label('confirmation.tip.heading') && label('confirmation.tip.body') && (_jsxs("div", { className: "rounded-lg bg-muted px-5 py-4 text-sm", children: [_jsx("p", { className: "font-semibold", children: renderLabel(label('confirmation.tip.heading')) }), _jsx("p", { className: "text-muted-foreground", children: renderLabel(label('confirmation.tip.body')) })] })), lines.length === 1 && first?.manageHref && (_jsxs("p", { className: "text-center text-sm", children: [_jsx("a", { href: first.manageHref, className: linkClass, children: labels['confirmation.manage'] }), manageUntil && freeChangeUntilTs !== null && freeChangeUntilTs !== undefined && (_jsxs("span", { className: "text-muted-foreground", children: [SEPARATOR, fillLabel(manageUntil, {
+                                day: clock.dayLabel(freeChangeUntilTs, now),
+                                time: clock.formatTime(freeChangeUntilTs),
+                            })] }))] })), portalHref && (_jsx("p", { className: "text-center text-sm", children: _jsx("a", { href: portalHref, className: linkClass, children: labels['confirmation.portal'] }) })), onStartOver && (_jsx("div", { className: "flex justify-center", children: _jsx(BookingButton, { variant: "outline", className: slotClass(classNames, 'startOver'), onClick: onStartOver, children: labels['confirmation.startOver'] }) }))] }));
+}

package/dist/booking/index.d.ts

@@ -1,4 +1,5 @@
 export * from './add-child-sheet.js';
+export * from './booking-panel.js';
 export * from './booking-recap.js';
 export * from './booking-skeleton.js';
 export * from './confirmation.js';

package/dist/booking/index.js

@@ -7,6 +7,7 @@
 // Styles: import `@medalsocial/meda/booking/styles.css` and
 // `@medalsocial/meda/primitives/styles.css` after the bridge.
 export * from './add-child-sheet.js';
+export * from './booking-panel.js';
 export * from './booking-recap.js';
 export * from './booking-skeleton.js';
 export * from './confirmation.js';

package/dist/booking/label-keys.d.ts

@@ -1,7 +1,8 @@
 import { ADD_CHILD_SHEET_LABEL_KEYS } from './add-child-sheet.js';
+import { BOOKING_PANEL_LABEL_KEYS } from './booking-panel.js';
 import { BOOKING_RECAP_LABEL_KEYS } from './booking-recap.js';
 import { BOOKING_SKELETON_LABEL_KEYS } from './booking-skeleton.js';
-import { CONFIRMATION_LABEL_KEYS } from './confirmation.js';
+import { CONFIRMATION_HERO_LABEL_KEYS, CONFIRMATION_LABEL_KEYS } from './confirmation.js';
 import { DETAILS_SCREEN_LABEL_KEYS } from './details-screen.js';
 import type { BookingLabel } from './labels.js';
 import { LOGIN_SHEET_LABEL_KEYS } from './login-sheet.js';
@@ -17,7 +18,7 @@ import { REBOOK_CARDS_LABEL_KEYS } from './portal/rebook-cards.js';
 import { UPCOMING_BOOKINGS_LABEL_KEYS } from './portal/upcoming-bookings.js';
 import { VIPPS_LINK_ROW_LABEL_KEYS } from './portal/vipps-link-row.js';
 import { VISIT_HISTORY_LABEL_KEYS } from './portal/visit-history.js';
-import { SERVICE_SCREEN_LABEL_KEYS, SERVICE_SCREEN_MULTI_LABEL_KEYS } from './service-screen.js';
+import { SERVICE_SCREEN_LABEL_KEYS, SERVICE_SCREEN_MULTI_LABEL_KEYS, SERVICE_SCREEN_SEARCH_LABEL_KEYS } from './service-screen.js';
 import { STYLIST_SCREEN_LABEL_KEYS, STYLIST_SCREEN_SEAT_LABEL_KEYS } from './stylist-screen.js';
 import { SUMMARY_BAR_HINT_LABEL_KEYS, SUMMARY_BAR_LABEL_KEYS } from './summary-bar.js';
 import { TIME_SCREEN_FINDER_LABEL_KEYS, TIME_SCREEN_LABEL_KEYS } from './time-screen.js';
@@ -30,13 +31,13 @@ import { WHO_SCREEN_LABEL_KEYS, WHO_SCREEN_PARTY_LABEL_KEYS } from './who-screen
  * (Screens that embed another screen already include its keys, e.g. the
  * login sheet carries the login panel's, OTP slots' and Vipps button's.)
  */
-export declare const BOOKING_LABEL_KEYS: readonly ("addChild.trigger" | "addChild.title" | "addChild.description.saved" | "addChild.description.local" | "addChild.name" | "addChild.birthYear" | "addChild.birthYearPlaceholder" | "addChild.birthMonth" | "addChild.birthMonthUnknown" | "addChild.notes" | "addChild.missing" | "addChild.submit" | "addChild.close" | "recap.label" | "recap.time" | "recap.line" | "recap.lineFor" | "recap.anyStylist" | "recap.total" | "recap.edit" | "recap.editLabel" | "recap.alsoFree" | "recap.swapTo" | "bookingSkeleton.opening" | "confirmation.heading" | "confirmation.serviceFor" | "confirmation.when" | "confirmation.party.heading" | "confirmation.party.line" | "confirmation.party.stylist" | "confirmation.party.total" | "confirmation.calendar" | "confirmation.manage" | "confirmation.manageFor" | "confirmation.portal" | "confirmation.startOver" | "details.heading" | "details.phone.label" | "details.phone.prefix" | "details.phone.error" | "details.name.label" | "details.known.label" | "details.known.for" | "details.known.self" | "details.known.adult" | "details.known.child" | "details.child.name" | "details.child.year" | "details.child.yearPlaceholder" | "details.email.label" | "details.email.help" | "details.email.lockedHelp" | "details.email.error" | "details.notes.label" | "details.notes.placeholder" | "details.terms.text" | "details.terms.link" | "details.marketing.text" | "details.error.maxParty" | "details.error.slotTaken" | "details.error.conflict" | "details.error.invalidInput" | "details.error.unconfigured" | "details.error.upstreamError" | "details.error.inProgress" | "details.call.link" | "details.call.none" | "details.submit" | "otp.label" | "vipps.button" | "vipps.unavailable" | "vipps.throttled" | "login.heading" | "login.codeHeading" | "login.or" | "login.continueEmail" | "login.emailIntro" | "login.emailLabel" | "login.sendCode" | "login.codeLabel" | "login.submitCode" | "login.codeHelp" | "login.codeHelpVipps" | "login.vippsSentTo" | "login.vippsSentToUnknown" | "login.cooldownWait" | "login.cooldownReady" | "login.resendIn" | "login.resend" | "login.switchEmail" | "login.useEmailInstead" | "login.notice.sent" | "login.notice.resent" | "login.notice.unreachable" | "login.notice.badEmail" | "login.notice.invalid" | "login.notice.throttled" | "login.notice.vippsInvalid" | "login.notice.vippsConflict" | "loginSheet.prompt" | "loginSheet.trigger" | "loginSheet.intro" | "loginSheet.vipps" | "loginSheet.close" | "time.heading" | "time.dayStrip.legend" | "time.nearest" | "time.current" | "time.nextFree" | "time.shortNotice" | "time.weekend.pct" | "time.weekend.mixed" | "time.month.show" | "time.month.hide" | "time.month.previous" | "time.month.next" | "time.month.heading" | "time.month.note" | "time.party.sequential" | "time.party.parallel" | "time.party.seat" | "time.party.seatSeparator" | "time.parallel.offer.two" | "time.parallel.offer.other" | "time.parallel.accept" | "time.empty.closed" | "time.empty.over" | "time.empty.full" | "time.empty.stylist" | "time.empty.unknown" | "time.empty.callLink" | "time.empty.callLinkAria" | "time.empty.callSuffix" | "time.empty.callPlain" | "time.loading" | "time.skeleton.dayPlaceholder" | "time.taken.message" | "time.taken.close" | "time.soonest.heading" | "time.soonest.pick" | "time.soonest.with" | "time.dayChip.free" | "time.dayChip.freeOne" | "time.dayChip.full" | "time.week.none" | "time.week.more" | "manage.heading" | "manage.serviceFallback" | "manage.card.named" | "manage.card.when" | "manage.card.whenWithStylist" | "manage.appointment.named" | "manage.appointment.namedSibilant" | "manage.appointment.unnamed" | "manage.ringUs" | "manage.ringUsOn" | "manage.callUs" | "manage.callUsOn" | "manage.error.windowPassed" | "manage.error.slotTaken" | "manage.error.notFound" | "manage.error.conflict" | "manage.error.invalidInput" | "manage.error.unavailable" | "manage.freeUntil" | "manage.remaining.in" | "manage.remaining.daysAndHours" | "manage.remaining.underMinute" | "manage.remaining.day.one" | "manage.remaining.day.other" | "manage.remaining.hour.one" | "manage.remaining.hour.other" | "manage.remaining.minute.one" | "manage.remaining.minute.other" | "manage.change" | "manage.cancel" | "manage.callToChange" | "manage.callToCancel" | "manage.blocked" | "manage.blocked.suffix" | "manage.blocked.plain" | "manage.calendar" | "manage.closed.cancelled" | "manage.closed.completed" | "manage.closed.noShow" | "manage.closed.pending" | "manage.closed.pendingCall" | "manage.closed.pendingCallPlain" | "manage.bookNew" | "manage.party.heading" | "manage.party.justThisOne" | "manage.party.unnamed" | "manage.party.note" | "manage.party.noteSuffix" | "manage.back" | "manage.reschedule.lead" | "manage.reschedule.leadWithStylist" | "manage.reschedule.failed" | "manage.reschedule.failedSuffix" | "manage.reschedule.loading" | "manage.move.question" | "manage.move.questionWithStylist" | "manage.move.surcharge" | "manage.move.confirm" | "manage.move.pickAnother" | "manage.cancel.question" | "manage.cancel.reasonLegend" | "manage.cancel.reason.illness" | "manage.cancel.reason.noLongerSuits" | "manage.cancel.reason.other" | "manage.cancel.confirm" | "manage.cancel.keep" | "manage.cancelled" | "manage.cancelled.findNew" | "manage.moved" | "manage.movedTo" | "manage.moved.view" | "manage.moved.noLink" | "manage.moved.noLinkSuffix" | "manage.portal" | "childCards.empty" | "childCards.neverVisited" | "childCards.lastVisit" | "childCards.lastVisitNoService" | "childCards.book" | "childCards.stylist" | "childCards.next" | "childCards.none" | "dataControls.heading" | "dataControls.export" | "dataControls.delete" | "dataControls.confirmHeading" | "dataControls.consequences" | "dataControls.confirmLabel" | "dataControls.confirmHelp" | "dataControls.wrongWord" | "dataControls.deleteForever" | "dataControls.cancel" | "dataControls.unreachable" | "dataControls.confirmWord" | "ageConfirm.heading" | "ageConfirm.lead" | "ageConfirm.legend" | "ageConfirm.birthYear" | "ageConfirm.birthMonth" | "ageConfirm.birthMonthUnknown" | "ageConfirm.confirm" | "ageConfirm.dismiss" | "familyEditor.heading" | "familyEditor.lead" | "familyEditor.empty" | "familyEditor.legend" | "familyEditor.add" | "familyEditor.name" | "familyEditor.birthYear" | "familyEditor.birthYearPlaceholder" | "familyEditor.birthMonth" | "familyEditor.birthMonthUnknown" | "familyEditor.stylist" | "familyEditor.stylistNone" | "familyEditor.stylistFormer" | "familyEditor.notes" | "familyEditor.notesPlaceholder" | "familyEditor.newRow" | "familyEditor.save" | "familyEditor.remove" | "familyEditor.removeNamed" | "familyEditor.removeRow" | "familyEditor.saved" | "familyEditor.savedNoDetails" | "familyEditor.partial" | "familyEditor.removed" | "familyEditor.unreachable" | "familyEditor.ageConfirmed" | "familyEditor.ageSaved" | "logout.button" | "logout.unreachable" | "portalShell.nav" | "portalShell.navBar" | "portalUnreachable.heading" | "portalUnreachable.body" | "portalUnreachable.retry" | "portalUnreachable.call" | "profileForm.heading" | "profileForm.firstName" | "profileForm.lastName" | "profileForm.phone" | "profileForm.email" | "profileForm.emailHelp" | "profileForm.save" | "profileForm.saved" | "profileForm.restored" | "profileForm.marketing" | "profileForm.unreachable" | "rebook.heading" | "rebook.empty" | "rebook.serviceFallback" | "rebook.anyStylist" | "rebook.cta" | "upcoming.heading" | "upcoming.empty" | "upcoming.book" | "upcoming.next" | "upcoming.today" | "upcoming.tomorrow" | "upcoming.inDays" | "upcoming.when" | "upcoming.serviceFallback" | "upcoming.anyStylist" | "upcoming.manage" | "upcoming.noManage" | "upcoming.noManageWithPhone" | "upcoming.call" | "vippsLink.heading" | "vippsLink.linked" | "vippsLink.pitch" | "vippsLink.button" | "vippsLink.success" | "vippsLink.conflict" | "vippsLink.failed" | "vippsLink.unavailable" | "vippsLink.throttled" | "history.heading" | "history.empty" | "history.serviceFallback" | "history.count.one" | "history.count.other" | "history.unknownAmount" | "service.multiHint" | "service.total" | "service.chooseFirst" | "service.continue" | "service.party.nothingBookable" | "service.tabDone" | "service.heading" | "service.categoriesLegend" | "service.sameAsLast" | "service.chooseOther" | "service.duration" | "service.phoneOnly" | "service.phoneOnlyLinkLabel" | "service.ageDivider.named" | "service.ageDivider.unnamed" | "service.party.listLabel" | "service.party.adultAlone" | "service.party.nothingFits" | "service.party.remove" | "stylist.heading" | "stylist.firstAvailable" | "stylist.firstAvailableSubtitle" | "stylist.firstAvailableBadge" | "stylist.pendingName" | "stylist.nextAvailable" | "stylist.loading" | "stylist.party.legend" | "stylist.party.sequential" | "stylist.party.sequentialMinutes" | "stylist.party.parallel.two" | "stylist.party.parallel.three" | "stylist.party.parallel.other" | "stylist.party.parallelMinutes" | "stylist.party.parallelNote.two" | "stylist.party.parallelNote.three" | "stylist.party.parallelNote.other" | "stylist.party.seatsHeading" | "stylist.party.seat" | "summary.placeholder.who" | "summary.placeholder.service" | "summary.next" | "summary.hint.who" | "summary.hint.service" | "summary.hint.when" | "who.heading" | "who.guest.groupLabel" | "who.guest.children.one" | "who.guest.children.other" | "who.guest.adult" | "who.guest.addedList" | "who.family.legend" | "who.family.self" | "who.family.limit" | "who.party.children" | "who.party.childrenNote" | "who.party.adult" | "who.party.adultNote" | "who.party.fewer" | "who.party.more" | "who.party.count")[];
+export declare const BOOKING_LABEL_KEYS: readonly ("addChild.trigger" | "addChild.title" | "addChild.description.saved" | "addChild.description.local" | "addChild.name" | "addChild.birthYear" | "addChild.birthYearPlaceholder" | "addChild.birthMonth" | "addChild.birthMonthUnknown" | "addChild.notes" | "addChild.missing" | "addChild.submit" | "addChild.close" | "panel.heading" | "panel.who" | "panel.service" | "panel.time" | "panel.stylist" | "panel.notChosen" | "panel.firstAvailable" | "panel.alsoFree" | "panel.swap" | "panel.swapTo" | "panel.total" | "panel.continue" | "recap.label" | "recap.time" | "recap.line" | "recap.lineFor" | "recap.anyStylist" | "recap.total" | "recap.edit" | "recap.editLabel" | "recap.alsoFree" | "recap.swapTo" | "bookingSkeleton.opening" | "confirmation.heading" | "confirmation.serviceFor" | "confirmation.when" | "confirmation.party.heading" | "confirmation.party.line" | "confirmation.party.stylist" | "confirmation.party.total" | "confirmation.calendar" | "confirmation.manage" | "confirmation.manageFor" | "confirmation.portal" | "confirmation.startOver" | "confirmation.sent" | "confirmation.leafTime" | "confirmation.detail.service" | "confirmation.detail.stylist" | "confirmation.detail.where" | "confirmation.duration" | "confirmation.directions" | "confirmation.tip.heading" | "confirmation.tip.body" | "confirmation.manageUntil" | "details.heading" | "details.phone.label" | "details.phone.prefix" | "details.phone.error" | "details.name.label" | "details.known.label" | "details.known.for" | "details.known.self" | "details.known.adult" | "details.known.child" | "details.child.name" | "details.child.year" | "details.child.yearPlaceholder" | "details.email.label" | "details.email.help" | "details.email.lockedHelp" | "details.email.error" | "details.notes.label" | "details.notes.placeholder" | "details.terms.text" | "details.terms.link" | "details.marketing.text" | "details.error.maxParty" | "details.error.slotTaken" | "details.error.conflict" | "details.error.invalidInput" | "details.error.unconfigured" | "details.error.upstreamError" | "details.error.inProgress" | "details.call.link" | "details.call.none" | "details.submit" | "otp.label" | "vipps.button" | "vipps.unavailable" | "vipps.throttled" | "login.heading" | "login.codeHeading" | "login.or" | "login.continueEmail" | "login.emailIntro" | "login.emailLabel" | "login.sendCode" | "login.codeLabel" | "login.submitCode" | "login.codeHelp" | "login.codeHelpVipps" | "login.vippsSentTo" | "login.vippsSentToUnknown" | "login.cooldownWait" | "login.cooldownReady" | "login.resendIn" | "login.resend" | "login.switchEmail" | "login.useEmailInstead" | "login.notice.sent" | "login.notice.resent" | "login.notice.unreachable" | "login.notice.badEmail" | "login.notice.invalid" | "login.notice.throttled" | "login.notice.vippsInvalid" | "login.notice.vippsConflict" | "loginSheet.prompt" | "loginSheet.trigger" | "loginSheet.intro" | "loginSheet.vipps" | "loginSheet.close" | "time.heading" | "time.dayStrip.legend" | "time.nearest" | "time.current" | "time.nextFree" | "time.shortNotice" | "time.weekend.pct" | "time.weekend.mixed" | "time.month.show" | "time.month.hide" | "time.month.previous" | "time.month.next" | "time.month.heading" | "time.month.note" | "time.party.sequential" | "time.party.parallel" | "time.party.seat" | "time.party.seatSeparator" | "time.parallel.offer.two" | "time.parallel.offer.other" | "time.parallel.accept" | "time.empty.closed" | "time.empty.over" | "time.empty.full" | "time.empty.stylist" | "time.empty.unknown" | "time.empty.callLink" | "time.empty.callLinkAria" | "time.empty.callSuffix" | "time.empty.callPlain" | "time.loading" | "time.skeleton.dayPlaceholder" | "time.taken.message" | "time.taken.close" | "time.soonest.heading" | "time.soonest.pick" | "time.soonest.with" | "time.dayChip.free" | "time.dayChip.freeOne" | "time.dayChip.full" | "time.week.none" | "time.week.more" | "manage.heading" | "manage.serviceFallback" | "manage.card.named" | "manage.card.when" | "manage.card.whenWithStylist" | "manage.appointment.named" | "manage.appointment.namedSibilant" | "manage.appointment.unnamed" | "manage.ringUs" | "manage.ringUsOn" | "manage.callUs" | "manage.callUsOn" | "manage.error.windowPassed" | "manage.error.slotTaken" | "manage.error.notFound" | "manage.error.conflict" | "manage.error.invalidInput" | "manage.error.unavailable" | "manage.freeUntil" | "manage.remaining.in" | "manage.remaining.daysAndHours" | "manage.remaining.underMinute" | "manage.remaining.day.one" | "manage.remaining.day.other" | "manage.remaining.hour.one" | "manage.remaining.hour.other" | "manage.remaining.minute.one" | "manage.remaining.minute.other" | "manage.change" | "manage.cancel" | "manage.callToChange" | "manage.callToCancel" | "manage.blocked" | "manage.blocked.suffix" | "manage.blocked.plain" | "manage.calendar" | "manage.closed.cancelled" | "manage.closed.completed" | "manage.closed.noShow" | "manage.closed.pending" | "manage.closed.pendingCall" | "manage.closed.pendingCallPlain" | "manage.bookNew" | "manage.party.heading" | "manage.party.justThisOne" | "manage.party.unnamed" | "manage.party.note" | "manage.party.noteSuffix" | "manage.back" | "manage.reschedule.lead" | "manage.reschedule.leadWithStylist" | "manage.reschedule.failed" | "manage.reschedule.failedSuffix" | "manage.reschedule.loading" | "manage.move.question" | "manage.move.questionWithStylist" | "manage.move.surcharge" | "manage.move.confirm" | "manage.move.pickAnother" | "manage.cancel.question" | "manage.cancel.reasonLegend" | "manage.cancel.reason.illness" | "manage.cancel.reason.noLongerSuits" | "manage.cancel.reason.other" | "manage.cancel.confirm" | "manage.cancel.keep" | "manage.cancelled" | "manage.cancelled.findNew" | "manage.moved" | "manage.movedTo" | "manage.moved.view" | "manage.moved.noLink" | "manage.moved.noLinkSuffix" | "manage.portal" | "childCards.empty" | "childCards.neverVisited" | "childCards.lastVisit" | "childCards.lastVisitNoService" | "childCards.book" | "childCards.stylist" | "childCards.next" | "childCards.none" | "dataControls.heading" | "dataControls.export" | "dataControls.delete" | "dataControls.confirmHeading" | "dataControls.consequences" | "dataControls.confirmLabel" | "dataControls.confirmHelp" | "dataControls.wrongWord" | "dataControls.deleteForever" | "dataControls.cancel" | "dataControls.unreachable" | "dataControls.confirmWord" | "ageConfirm.heading" | "ageConfirm.lead" | "ageConfirm.legend" | "ageConfirm.birthYear" | "ageConfirm.birthMonth" | "ageConfirm.birthMonthUnknown" | "ageConfirm.confirm" | "ageConfirm.dismiss" | "familyEditor.heading" | "familyEditor.lead" | "familyEditor.empty" | "familyEditor.legend" | "familyEditor.add" | "familyEditor.name" | "familyEditor.birthYear" | "familyEditor.birthYearPlaceholder" | "familyEditor.birthMonth" | "familyEditor.birthMonthUnknown" | "familyEditor.stylist" | "familyEditor.stylistNone" | "familyEditor.stylistFormer" | "familyEditor.notes" | "familyEditor.notesPlaceholder" | "familyEditor.newRow" | "familyEditor.save" | "familyEditor.remove" | "familyEditor.removeNamed" | "familyEditor.removeRow" | "familyEditor.saved" | "familyEditor.savedNoDetails" | "familyEditor.partial" | "familyEditor.removed" | "familyEditor.unreachable" | "familyEditor.ageConfirmed" | "familyEditor.ageSaved" | "logout.button" | "logout.unreachable" | "portalShell.nav" | "portalShell.navBar" | "portalUnreachable.heading" | "portalUnreachable.body" | "portalUnreachable.retry" | "portalUnreachable.call" | "profileForm.heading" | "profileForm.firstName" | "profileForm.lastName" | "profileForm.phone" | "profileForm.email" | "profileForm.emailHelp" | "profileForm.save" | "profileForm.saved" | "profileForm.restored" | "profileForm.marketing" | "profileForm.unreachable" | "rebook.heading" | "rebook.empty" | "rebook.serviceFallback" | "rebook.anyStylist" | "rebook.cta" | "upcoming.heading" | "upcoming.empty" | "upcoming.book" | "upcoming.next" | "upcoming.today" | "upcoming.tomorrow" | "upcoming.inDays" | "upcoming.when" | "upcoming.serviceFallback" | "upcoming.anyStylist" | "upcoming.manage" | "upcoming.noManage" | "upcoming.noManageWithPhone" | "upcoming.call" | "vippsLink.heading" | "vippsLink.linked" | "vippsLink.pitch" | "vippsLink.button" | "vippsLink.success" | "vippsLink.conflict" | "vippsLink.failed" | "vippsLink.unavailable" | "vippsLink.throttled" | "history.heading" | "history.empty" | "history.serviceFallback" | "history.count.one" | "history.count.other" | "history.unknownAmount" | "service.multiHint" | "service.total" | "service.chooseFirst" | "service.continue" | "service.party.nothingBookable" | "service.tabDone" | "service.heading" | "service.categoriesLegend" | "service.sameAsLast" | "service.chooseOther" | "service.duration" | "service.phoneOnly" | "service.phoneOnlyLinkLabel" | "service.ageDivider.named" | "service.ageDivider.unnamed" | "service.party.listLabel" | "service.party.adultAlone" | "service.party.nothingFits" | "service.party.remove" | "service.search" | "service.searchLabel" | "service.searchEmpty" | "stylist.heading" | "stylist.firstAvailable" | "stylist.firstAvailableSubtitle" | "stylist.firstAvailableBadge" | "stylist.pendingName" | "stylist.nextAvailable" | "stylist.loading" | "stylist.party.legend" | "stylist.party.sequential" | "stylist.party.sequentialMinutes" | "stylist.party.parallel.two" | "stylist.party.parallel.three" | "stylist.party.parallel.other" | "stylist.party.parallelMinutes" | "stylist.party.parallelNote.two" | "stylist.party.parallelNote.three" | "stylist.party.parallelNote.other" | "stylist.party.seatsHeading" | "stylist.party.seat" | "summary.placeholder.who" | "summary.placeholder.service" | "summary.next" | "summary.hint.who" | "summary.hint.service" | "summary.hint.when" | "who.heading" | "who.guest.groupLabel" | "who.guest.children.one" | "who.guest.children.other" | "who.guest.adult" | "who.guest.addedList" | "who.family.legend" | "who.family.self" | "who.family.limit" | "who.party.children" | "who.party.childrenNote" | "who.party.adult" | "who.party.adultNote" | "who.party.fewer" | "who.party.more" | "who.party.count" | "who.party.adultFewer" | "who.party.adultMore" | "who.party.adultCount" | "who.party.lead" | "who.party.togetherHint")[];
 export type BookingLabelKey = BookingRequiredLabelKey | BookingOptionalLabelKey;
 /**
  * Keys added after a screen first shipped, for a feature a caller opts into.
  * A pack may leave them out; a screen using the feature needs them.
  */
-export type BookingOptionalLabelKey = (typeof SERVICE_SCREEN_MULTI_LABEL_KEYS)[number] | (typeof BOOKING_RECAP_LABEL_KEYS)[number] | (typeof TIME_SCREEN_FINDER_LABEL_KEYS)[number] | (typeof STYLIST_SCREEN_SEAT_LABEL_KEYS)[number] | (typeof SUMMARY_BAR_HINT_LABEL_KEYS)[number] | (typeof WHO_SCREEN_PARTY_LABEL_KEYS)[number];
+export type BookingOptionalLabelKey = (typeof SERVICE_SCREEN_MULTI_LABEL_KEYS)[number] | (typeof BOOKING_RECAP_LABEL_KEYS)[number] | (typeof TIME_SCREEN_FINDER_LABEL_KEYS)[number] | (typeof STYLIST_SCREEN_SEAT_LABEL_KEYS)[number] | (typeof SUMMARY_BAR_HINT_LABEL_KEYS)[number] | (typeof WHO_SCREEN_PARTY_LABEL_KEYS)[number] | (typeof SERVICE_SCREEN_SEARCH_LABEL_KEYS)[number] | (typeof CONFIRMATION_HERO_LABEL_KEYS)[number] | (typeof BOOKING_PANEL_LABEL_KEYS)[number];
 /** Keys every complete pack defines. */
 export type BookingRequiredLabelKey = (typeof WHO_SCREEN_LABEL_KEYS)[number] | (typeof ADD_CHILD_SHEET_LABEL_KEYS)[number] | (typeof SERVICE_SCREEN_LABEL_KEYS)[number] | (typeof STYLIST_SCREEN_LABEL_KEYS)[number] | (typeof TIME_SCREEN_LABEL_KEYS)[number] | (typeof MANAGE_SCREEN_LABEL_KEYS)[number] | (typeof DETAILS_SCREEN_LABEL_KEYS)[number] | (typeof SUMMARY_BAR_LABEL_KEYS)[number] | (typeof CONFIRMATION_LABEL_KEYS)[number] | (typeof BOOKING_SKELETON_LABEL_KEYS)[number] | (typeof LOGIN_SHEET_LABEL_KEYS)[number] | (typeof PORTAL_SHELL_LABEL_KEYS)[number] | (typeof PORTAL_UNREACHABLE_LABEL_KEYS)[number] | (typeof UPCOMING_BOOKINGS_LABEL_KEYS)[number] | (typeof VISIT_HISTORY_LABEL_KEYS)[number] | (typeof REBOOK_CARDS_LABEL_KEYS)[number] | (typeof CHILD_CARDS_LABEL_KEYS)[number] | (typeof FAMILY_EDITOR_LABEL_KEYS)[number] | (typeof PROFILE_FORM_LABEL_KEYS)[number] | (typeof DATA_CONTROLS_LABEL_KEYS)[number] | (typeof LOGOUT_BUTTON_LABEL_KEYS)[number] | (typeof VIPPS_LINK_ROW_LABEL_KEYS)[number];
 /** A complete label pack for one locale. The opt-in keys may be absent. */

package/dist/booking/label-keys.js

@@ -1,7 +1,8 @@
 import { ADD_CHILD_SHEET_LABEL_KEYS } from './add-child-sheet.js';
+import { BOOKING_PANEL_LABEL_KEYS } from './booking-panel.js';
 import { BOOKING_RECAP_LABEL_KEYS } from './booking-recap.js';
 import { BOOKING_SKELETON_LABEL_KEYS } from './booking-skeleton.js';
-import { CONFIRMATION_LABEL_KEYS } from './confirmation.js';
+import { CONFIRMATION_HERO_LABEL_KEYS, CONFIRMATION_LABEL_KEYS } from './confirmation.js';
 import { DETAILS_SCREEN_LABEL_KEYS } from './details-screen.js';
 import { LOGIN_SHEET_LABEL_KEYS } from './login-sheet.js';
 import { MANAGE_SCREEN_LABEL_KEYS } from './manage-screen.js';
@@ -16,7 +17,7 @@ import { REBOOK_CARDS_LABEL_KEYS } from './portal/rebook-cards.js';
 import { UPCOMING_BOOKINGS_LABEL_KEYS } from './portal/upcoming-bookings.js';
 import { VIPPS_LINK_ROW_LABEL_KEYS } from './portal/vipps-link-row.js';
 import { VISIT_HISTORY_LABEL_KEYS } from './portal/visit-history.js';
-import { SERVICE_SCREEN_LABEL_KEYS, SERVICE_SCREEN_MULTI_LABEL_KEYS } from './service-screen.js';
+import { SERVICE_SCREEN_LABEL_KEYS, SERVICE_SCREEN_MULTI_LABEL_KEYS, SERVICE_SCREEN_SEARCH_LABEL_KEYS, } from './service-screen.js';
 import { STYLIST_SCREEN_LABEL_KEYS, STYLIST_SCREEN_SEAT_LABEL_KEYS } from './stylist-screen.js';
 import { SUMMARY_BAR_HINT_LABEL_KEYS, SUMMARY_BAR_LABEL_KEYS } from './summary-bar.js';
 import { TIME_SCREEN_FINDER_LABEL_KEYS, TIME_SCREEN_LABEL_KEYS } from './time-screen.js';
@@ -36,16 +37,19 @@ export const BOOKING_LABEL_KEYS = [
         ...ADD_CHILD_SHEET_LABEL_KEYS,
         ...SERVICE_SCREEN_LABEL_KEYS,
         ...SERVICE_SCREEN_MULTI_LABEL_KEYS,
+        ...SERVICE_SCREEN_SEARCH_LABEL_KEYS,
         ...STYLIST_SCREEN_LABEL_KEYS,
         ...STYLIST_SCREEN_SEAT_LABEL_KEYS,
         ...TIME_SCREEN_LABEL_KEYS,
         ...TIME_SCREEN_FINDER_LABEL_KEYS,
         ...MANAGE_SCREEN_LABEL_KEYS,
         ...BOOKING_RECAP_LABEL_KEYS,
+        ...BOOKING_PANEL_LABEL_KEYS,
         ...DETAILS_SCREEN_LABEL_KEYS,
         ...SUMMARY_BAR_LABEL_KEYS,
         ...SUMMARY_BAR_HINT_LABEL_KEYS,
         ...CONFIRMATION_LABEL_KEYS,
+        ...CONFIRMATION_HERO_LABEL_KEYS,
         ...BOOKING_SKELETON_LABEL_KEYS,
         ...LOGIN_SHEET_LABEL_KEYS,
         ...PORTAL_SHELL_LABEL_KEYS,

package/dist/booking/service-screen.d.ts

@@ -34,7 +34,14 @@ export declare const SERVICE_SCREEN_LABEL_KEYS: readonly ["service.heading", "se
 export declare const SERVICE_SCREEN_MULTI_LABEL_KEYS: readonly ["service.multiHint", "service.total", "service.chooseFirst", "service.continue", "service.party.nothingBookable", "service.tabDone"];
 /** The multi-select step's labels, every one required (`ServiceSelection.labels`). */
 export type ServiceMultiLabels = Record<(typeof SERVICE_SCREEN_MULTI_LABEL_KEYS)[number], BookingLabel>;
-export type ServiceScreenLabels = Record<(typeof SERVICE_SCREEN_LABEL_KEYS)[number], BookingLabel> & Partial<ServiceMultiLabels>;
+/**
+ * Opt-in keys for the search field (`ServiceScreenProps.searchFor`):
+ * `service.search` is its placeholder («Search: beard, fringe, colour …»),
+ * `service.searchLabel` its accessible name, and `service.searchEmpty`
+ * `{query}` what shows when nothing matches. Without all three, no field.
+ */
+export declare const SERVICE_SCREEN_SEARCH_LABEL_KEYS: readonly ["service.search", "service.searchLabel", "service.searchEmpty"];
+export type ServiceScreenLabels = Record<(typeof SERVICE_SCREEN_LABEL_KEYS)[number], BookingLabel> & Partial<ServiceMultiLabels> & Partial<Record<(typeof SERVICE_SCREEN_SEARCH_LABEL_KEYS)[number], BookingLabel>>;
 /**
  * - `root` — the `<section>`
  * - `heading` — the `<h2>`
@@ -206,6 +213,12 @@ export interface ServiceScreenProps {
      * Absent: the one-tap step, unchanged.
      */
     selection?: ServiceSelection;
+    /**
+     * Whose list gets a search field, by person (0 for a party of one): a
+     * grown-up's catalogue is long, a child's is short. Needs the
+     * `service.search*` labels. Default: nobody.
+     */
+    searchFor?: (personIndex: number) => boolean;
 }
 export declare function ServiceScreen(props: ServiceScreenProps): import("react").JSX.Element;
 /**

package/dist/booking/service-screen.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Search } from 'lucide-react';
 import { useState } from 'react';
 import { cn } from '../lib/utils.js';
 import { renderLabel } from './internal/label-parts.js';
@@ -57,6 +58,17 @@ export const SERVICE_SCREEN_MULTI_LABEL_KEYS = [
     'service.party.nothingBookable',
     'service.tabDone',
 ];
+/**
+ * Opt-in keys for the search field (`ServiceScreenProps.searchFor`):
+ * `service.search` is its placeholder («Search: beard, fringe, colour …»),
+ * `service.searchLabel` its accessible name, and `service.searchEmpty`
+ * `{query}` what shows when nothing matches. Without all three, no field.
+ */
+export const SERVICE_SCREEN_SEARCH_LABEL_KEYS = [
+    'service.search',
+    'service.searchLabel',
+    'service.searchEmpty',
+];
 const HEADING_ID = 'booking-service-heading';
 function groupHeadingId(category) {
     return `booking-services-${category}`;
@@ -95,6 +107,32 @@ function cardProps(shared) {
 function tickedBy(selection, personIndex) {
     return new Set((selection.lists[personIndex] ?? []).map((service) => service.id));
 }
+/** Lower case, accents gone: «Fargé» finds «farge», «ø» stays «ø». */
+function fold(text) {
+    return text
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .toLowerCase();
+}
+/** Every word of the query is somewhere in the service's name or group. */
+function matchesQuery(service, query, groupLabel) {
+    const haystack = fold(`${service.name} ${groupLabel}`);
+    return fold(query)
+        .split(/\s+/)
+        .filter(Boolean)
+        .every((word) => haystack.includes(word));
+}
+function searchReady(labels) {
+    return SERVICE_SCREEN_SEARCH_LABEL_KEYS.every((key) => labels[key] !== undefined);
+}
+/** The search field, and the sentence for an empty result under it. */
+function ServiceSearch({ id, query, onQuery, empty, labels, }) {
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "relative", children: [_jsx(Search, { "aria-hidden": "true", className: "pointer-events-none absolute start-4 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx("input", { id: id, type: "search", value: query, onChange: (event) => onQuery(event.target.value), "aria-label": labelText(labels['service.searchLabel']), placeholder: labelText(labels['service.search']), autoComplete: "off", enterKeyHint: "search", 
+                        // 16 px: a smaller field makes iOS zoom the page on focus.
+                        className: "h-12 w-full rounded-lg border border-border bg-card ps-11 pe-4 text-base outline-none focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary" })] }), _jsx("p", { "aria-live": "polite", className: "text-sm text-muted-foreground empty:hidden", children: empty && query.trim() !== ''
+                    ? fillLabel(labels['service.searchEmpty'], { query: query.trim() })
+                    : '' })] }));
+}
 export function ServiceScreen(props) {
     const shared = {
         labels: props.labels,
@@ -126,8 +164,10 @@ function UnlikelyForAge({ id, name, services, shared, children, }) {
         return null;
     return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-3 pt-2", children: [_jsx("span", { "aria-hidden": "true", className: "h-px flex-1 bg-border" }), _jsx("p", { id: id, className: "text-sm text-muted-foreground", children: ageDividerLabel(shared.labels, name, shared.possessive) }), _jsx("span", { "aria-hidden": "true", className: "h-px flex-1 bg-border" })] }), _jsx("ul", { "aria-labelledby": id, className: "space-y-2", children: services.map((service) => (_jsx("li", { children: children(service) }, service.id))) })] }));
 }
-function SingleServiceScreen({ services, categories, categoryOf, serviceFits = allFit, phone = null, initialCategory = null, onPick, suggestion = null, chosenId = null, childName = null, selection, shared, }) {
+function SingleServiceScreen({ services, categories, categoryOf, serviceFits = allFit, phone = null, initialCategory = null, onPick, suggestion = null, chosenId = null, childName = null, selection, searchFor, shared, }) {
     const { Card, labels, classNames } = shared;
+    const searchable = searchFor?.(0) === true && searchReady(labels);
+    const [query, setQuery] = useState('');
     const ticked = selection ? tickedBy(selection, 0) : null;
     // One person: a tap either answers the step or, multi-select, ticks.
     const bookable = (service) => ticked && selection
@@ -141,7 +181,11 @@ function SingleServiceScreen({ services, categories, categoryOf, serviceFits = a
     const fileUnder = categoryOf ?? defaultCategoryOf(categories);
     // What certainly does not suit this person moves below a divider, still
     // bookable. Telephone-only cards stay where they are: the list stays whole.
-    const { fitting: offered, unlikely } = byFit(services, (service) => serviceFits(service, 0));
+    const labelOf = (service) => categories.find((category) => category.key === fileUnder(service))?.label ?? '';
+    const found = searchable && query.trim() !== ''
+        ? services.filter((service) => matchesQuery(service, query, labelOf(service)))
+        : services;
+    const { fitting: offered, unlikely } = byFit(found, (service) => serviceFits(service, 0));
     const groups = categories
         .map((category) => ({
         category,
@@ -168,7 +212,7 @@ function SingleServiceScreen({ services, categories, categoryOf, serviceFits = a
             block: 'start',
         });
     }
-    return (_jsxs("section", { "aria-labelledby": HEADING_ID, className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx(Heading, { shared: shared, multiLabels: selection?.labels }), suggestion && (_jsxs("div", { className: "space-y-2", children: [_jsx(SameAsLast, { suggestion: suggestion, selected: ticked ? ticked.has(suggestion.service.id) : chosenId === suggestion.service.id, onPick: () => onPick(suggestion.service), shared: shared }), _jsx("p", { className: "text-sm font-semibold text-muted-foreground", children: labels['service.chooseOther'] })] })), groups.length > 1 && (_jsxs("fieldset", { className: "flex flex-wrap gap-2", children: [_jsx("legend", { className: "sr-only", children: labels['service.categoriesLegend'] }), groups.map(({ category }) => {
+    return (_jsxs("section", { "aria-labelledby": HEADING_ID, className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx(Heading, { shared: shared, multiLabels: selection?.labels }), suggestion && (_jsxs("div", { className: "space-y-2", children: [_jsx(SameAsLast, { suggestion: suggestion, selected: ticked ? ticked.has(suggestion.service.id) : chosenId === suggestion.service.id, onPick: () => onPick(suggestion.service), shared: shared }), _jsx("p", { className: "text-sm font-semibold text-muted-foreground", children: labels['service.chooseOther'] })] })), searchable && (_jsx(ServiceSearch, { id: "booking-service-search", query: query, onQuery: setQuery, empty: offered.length === 0 && unlikely.length === 0, labels: labels })), groups.length > 1 && (_jsxs("fieldset", { className: "flex flex-wrap gap-2", children: [_jsx("legend", { className: "sr-only", children: labels['service.categoriesLegend'] }), groups.map(({ category }) => {
                         const marked = category.key === current;
                         return (_jsx(BookingButton, { variant: "outline", size: "sm", "aria-pressed": marked, onClick: () => jumpTo(category.key), 
                             // Weight and ring carry the selection alongside the colour, so
@@ -197,8 +241,9 @@ function defaultCategoryOf(categories) {
  * (`audience: 'any'`), and an adult everything but the children's — which is
  * often nothing, and they are told so.
  */
-function PartyServiceScreen({ services, categories, categoryOf, childCategory, serviceFits = allFit, party, selection, shared, }) {
+function PartyServiceScreen({ services, categories, categoryOf, childCategory, serviceFits = allFit, party, selection, searchFor, shared, }) {
     const { Card, labels, classNames } = shared;
+    const [queries, setQueries] = useState({});
     const fileUnder = categoryOf ?? defaultCategoryOf(categories);
     const keysFor = (audience) => new Set(categories.filter((group) => group.audience === audience).map((group) => group.key));
     // Children's groups: the configured one plus any group marked 'child'.
@@ -213,11 +258,14 @@ function PartyServiceScreen({ services, categories, categoryOf, childCategory, s
     // comes back from the caller as `selection.notice`.
     const fits = services.filter((service) => service.bookableOnline && (selection !== undefined || service.maxPerBooking >= size));
     function personBody(person, index) {
+        const searchable = searchFor?.(index) === true && searchReady(labels);
+        const query = searchable ? (queries[index] ?? '') : '';
+        const labelOf = (service) => categories.find((category) => category.key === fileUnder(service))?.label ?? '';
         const { fitting: menu, unlikely } = byFit(
         // A grown-up gets the grown-ups' menu and a child the children's —
         // a kids' cut for «myself» is not an answer, it is a way round the
         // note below that books the wrong thing.
-        childCategory === undefined
+        (childCategory === undefined
             ? fits
             : fits.filter((service) => {
                 const key = fileUnder(service);
@@ -229,7 +277,8 @@ function PartyServiceScreen({ services, categories, categoryOf, childCategory, s
                 // built-in display fallback, which files an unlisted (possibly
                 // grown-up) category under the last group.
                 return person.adult || forAnyone.has(categoryOf ? key : service.category);
-            }), (service) => serviceFits(service, index));
+            })).filter((service) => query.trim() === '' || matchesQuery(service, query, labelOf(service))), (service) => serviceFits(service, index));
+        const search = searchable && (_jsx(ServiceSearch, { id: `booking-service-search-${index}`, query: query, onQuery: (next) => setQueries((all) => ({ ...all, [index]: next })), empty: menu.length === 0 && unlikely.length === 0, labels: labels }));
         const ticked = selection ? tickedBy(selection, index) : null;
         const chosen = party.choices[index]?.id ?? null;
         const suggestion = person.suggestion ?? null;
@@ -244,14 +293,15 @@ function PartyServiceScreen({ services, categories, categoryOf, childCategory, s
         const unlikelyList = (_jsx(UnlikelyForAge, { id: `booking-service-unlikely-${index}`, name: person.name, services: unlikely, shared: shared, children: choiceCard }));
         const listLabel = fillLabel(labels['service.party.listLabel'], { label: person.label });
         if (suggestion && menu.some((service) => service.id === suggestion.service.id)) {
-            return (_jsx(PersonWithSuggestion
-            // A fresh disclosure per person: the tabs share one panel.
-            , { listLabel: listLabel, suggestion: suggestion, menu: menu, ticked: ticked, chosen: chosen, onPick: pick, choiceCard: choiceCard, unlikely: unlikelyList, hasUnlikely: unlikely.length > 0, shared: shared }, person.key));
+            return (_jsxs(_Fragment, { children: [search, _jsx(PersonWithSuggestion
+                    // A fresh disclosure per person: the tabs share one panel.
+                    , { listLabel: listLabel, suggestion: suggestion, menu: menu, ticked: ticked, chosen: chosen, onPick: pick, choiceCard: choiceCard, unlikely: unlikelyList, hasUnlikely: unlikely.length > 0, shared: shared }, person.key)] }));
         }
-        if (menu.length === 0 && unlikely.length === 0) {
+        // Nothing matching a search is the search's to say, not «nothing fits».
+        if (menu.length === 0 && unlikely.length === 0 && query.trim() === '') {
             return (_jsx(NothingInThisParty, { person: person, labels: labels, multiLabels: selection?.labels ?? null, onRemove: party.onRemove ? () => party.onRemove?.(index) : undefined }));
         }
-        return (_jsxs(_Fragment, { children: [menu.length > 0 && (_jsx("ul", { "aria-label": listLabel, className: "space-y-2", children: menu.map((service) => (_jsx("li", { children: choiceCard(service) }, service.id))) })), unlikelyList] }));
+        return (_jsxs(_Fragment, { children: [search, menu.length > 0 && (_jsx("ul", { "aria-label": listLabel, className: "space-y-2", children: menu.map((service) => (_jsx("li", { children: choiceCard(service) }, service.id))) })), unlikelyList] }));
     }
     if (selection) {
         // A tab that left the party falls back to the last one still in it.

package/dist/booking/summary-bar.js

@@ -40,12 +40,10 @@ export function SummaryBar({ line, detail, canAdvance, step, onNext, hideNextWhe
     // bottom of a phone is the outcome to avoid.
     if (step === 'details')
         return null;
+    const placeholder = step === 'who' ? labels['summary.placeholder.who'] : labels['summary.placeholder.service'];
     const hintKey = HINT_KEYS[step];
     const hint = hideNextWhenDisabled && !canAdvance && hintKey ? labels[hintKey] : undefined;
     // There from the first step at one fixed height, rather than appearing on
     // the first tap and pushing the page down under the visitor's thumb.
-    return (_jsxs("div", { className: slotClass(classNames, 'root', 'sticky bottom-0 z-40 flex h-16 items-center justify-between gap-4 border-t border-border bg-background/95 px-5 backdrop-blur-md'), children: [_jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("p", { className: slotClass(classNames, 'line', 'min-w-0 truncate text-sm font-medium', !line && 'text-muted-foreground'), children: line ||
-                            (step === 'who'
-                                ? labels['summary.placeholder.who']
-                                : labels['summary.placeholder.service']) }), line && detail && (_jsx("p", { className: slotClass(classNames, 'detail', 'min-w-0 truncate text-xs text-muted-foreground tabular-nums'), children: detail }))] }), hideNextWhenDisabled && !canAdvance ? (hint && (_jsx("p", { className: slotClass(classNames, 'hint', 'shrink-0 text-sm font-medium text-muted-foreground'), children: renderLabel(hint) }))) : (_jsx(BookingButton, { size: "lg", className: slotClass(classNames, 'next'), onClick: onNext, disabled: !canAdvance, children: labels['summary.next'] }))] }));
+    return (_jsxs("div", { className: slotClass(classNames, 'root', 'sticky bottom-0 z-40 flex h-16 items-center justify-between gap-4 border-t border-border bg-background/95 px-5 backdrop-blur-md'), children: [_jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("p", { className: slotClass(classNames, 'line', 'min-w-0 truncate text-sm font-medium', !line && 'text-muted-foreground'), children: line || (hint ? null : placeholder) }), line && detail && (_jsx("p", { className: slotClass(classNames, 'detail', 'min-w-0 truncate text-xs text-muted-foreground tabular-nums'), children: detail }))] }), hideNextWhenDisabled && !canAdvance ? (hint && (_jsx("p", { className: slotClass(classNames, 'hint', 'shrink-0 text-sm font-medium text-muted-foreground'), children: renderLabel(hint) }))) : (_jsx(BookingButton, { size: "lg", className: slotClass(classNames, 'next'), onClick: onNext, disabled: !canAdvance, children: labels['summary.next'] }))] }));
 }

package/dist/booking/who-screen.d.ts

@@ -41,7 +41,7 @@ export declare const WHO_SCREEN_LABEL_KEYS: readonly ["who.heading", "who.guest.
  * stepper buttons' accessible names; `who.party.count` `{count}` is read out
  * when the number changes.
  */
-export declare const WHO_SCREEN_PARTY_LABEL_KEYS: readonly ["who.party.children", "who.party.childrenNote", "who.party.adult", "who.party.adultNote", "who.party.fewer", "who.party.more", "who.party.count"];
+export declare const WHO_SCREEN_PARTY_LABEL_KEYS: readonly ["who.party.children", "who.party.childrenNote", "who.party.adult", "who.party.adultNote", "who.party.fewer", "who.party.more", "who.party.count", "who.party.adultFewer", "who.party.adultMore", "who.party.adultCount", "who.party.lead", "who.party.togetherHint"];
 export type WhoScreenLabels = Record<(typeof WHO_SCREEN_LABEL_KEYS)[number], BookingLabel> & Partial<Record<(typeof WHO_SCREEN_PARTY_LABEL_KEYS)[number], BookingLabel>> & AddChildSheetLabels;
 /**
  * - `root` — the `<section>`
@@ -138,6 +138,15 @@ export interface WhoScreenProps {
          * answer. Default `false`.
          */
         startEmpty?: boolean;
+        /**
+         * The grown-ups' seats, 1-based, when «Voksen» is a number (a stepper)
+         * rather than one check row: two parents, or a parent and a grandparent,
+         * in one booking. Seat 1 must be `adult`. Needs the `who.party.adultFewer`,
+         * `adultMore` and `adultCount` labels; without them the check row stays.
+         */
+        adults?: (seat: number) => WizardPerson & {
+            adult: true;
+        };
     };
     /** Shown under the heading for a guest — e.g. an offer to log in. */
     loginRow?: ReactNode;

package/dist/booking/who-screen.js

@@ -62,12 +62,26 @@ export const WHO_SCREEN_PARTY_LABEL_KEYS = [
     'who.party.childrenNote',
     /** The grown-up's row, e.g. «I'm getting a cut too». */
     'who.party.adult',
-    /** Under it, e.g. «Side by side, at the same time». */
+    /**
+     * Under it. Check row: about sitting beside a child («Side by side, at the
+     * same time»), so shown only while there is one. Stepper
+     * (`guestParty.adults`): it describes the grown-ups' row the way
+     * `childrenNote` does the children's («Cut, beard, colour»), so always.
+     */
     'who.party.adultNote',
     'who.party.fewer',
     'who.party.more',
     /** `{count}` — the children's number, read out, e.g. «{count} children». */
     'who.party.count',
+    /** With `guestParty.adults`: the grown-ups' stepper buttons and their number read out. */
+    'who.party.adultFewer',
+    'who.party.adultMore',
+    /** `{count}` — e.g. «{count} grown-ups». */
+    'who.party.adultCount',
+    /** Under the heading, e.g. «Up to three in one booking». */
+    'who.party.lead',
+    /** Under the steppers while there are children and no grown-up. */
+    'who.party.togetherHint',
 ];
 /** The `who.party.*` keys `guestParty` cannot draw without; the two notes are extras. */
 const PARTY_REQUIRED_LABEL_KEYS = [
@@ -146,11 +160,19 @@ export function WhoScreen({ labels, format, people, family, guestChoices, addedC
  * booking for themselves is one tap like anyone else.
  */
 function GuestParty({ party, people, maxPeople, labels, classNames, onChoose, }) {
-    const adultOn = people.some((person) => person.key === party.adult.key);
-    // The grown-up's seat is never a child, flag or no flag.
-    const childSeats = people.filter((person) => !person.adult && person.key !== party.adult.key);
+    const adultStepper = party.adults !== undefined &&
+        labels['who.party.adultFewer'] !== undefined &&
+        labels['who.party.adultMore'] !== undefined &&
+        labels['who.party.adultCount'] !== undefined;
+    const adultSeat = (seat) => seat === 1 || !party.adults ? party.adult : party.adults(seat);
+    const adultKeys = new Set(Array.from({ length: maxPeople }, (_, index) => adultSeat(index + 1).key));
+    const isAdultSeat = (person) => adultKeys.has(person.key);
+    const adults = people.filter(isAdultSeat).length;
+    const adultOn = adults > 0;
+    // A grown-up's seat is never a child, flag or no flag.
+    const childSeats = people.filter((person) => !person.adult && !isAdultSeat(person));
     const children = childSeats.length;
-    const full = children + (adultOn ? 1 : 0) >= maxPeople;
+    const full = children + adults >= maxPeople;
     // Named children (from the add-child sheet) keep their seats, first; the
     // stepper adds and removes the unnamed ones after them.
     const generatedKeys = new Set(Array.from({ length: maxPeople }, (_, index) => party.child(index + 1).key));
@@ -159,7 +181,8 @@ function GuestParty({ party, people, maxPeople, labels, classNames, onChoose, })
     // The stepper never takes a named child away: their own card does that.
     // Without `startEmpty` it never empties the booking either.
     const floor = Math.max(named.length, adultOn || startEmpty ? 0 : 1);
-    const answer = (count, withAdult) => {
+    const adultFloor = children === 0 && !startEmpty ? 1 : 0;
+    const answer = (count, grownUps) => {
         const kept = named;
         const used = new Set(kept.map((person) => person.key));
         const fill = [];
@@ -168,7 +191,8 @@ function GuestParty({ party, people, maxPeople, labels, classNames, onChoose, })
             if (!used.has(next.key))
                 fill.push(next);
         }
-        onChoose([...kept, ...fill, ...(withAdult ? [party.adult] : [])], false);
+        const seated = Array.from({ length: grownUps }, (_, index) => adultSeat(index + 1));
+        onChoose([...kept, ...fill, ...seated], false);
     };
     // One child whenever the answer becomes empty (first frame or cleared
     // later): an empty answer would leave «next» dead on the most common visit.
@@ -178,7 +202,7 @@ function GuestParty({ party, people, maxPeople, labels, classNames, onChoose, })
     useEffect(() => {
         const empty = people.length === 0;
         if (empty && !wasEmpty.current && !startEmpty)
-            answer(1, false);
+            answer(1, 0);
         // An empty answer `startEmpty` left alone is not one already seen: if the
         // flag goes, the child is still filled in.
         wasEmpty.current = empty && !startEmpty;
@@ -187,11 +211,17 @@ function GuestParty({ party, people, maxPeople, labels, classNames, onChoose, })
         const label = labels[key];
         return label ? fillLabel(label, values) : '';
     };
-    const stepButton = 'flex size-11 shrink-0 items-center justify-center rounded-full border border-border bg-background text-foreground transition-colors hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-40';
-    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: cn('flex items-center gap-4 rounded-lg border border-border bg-card px-5 py-4', classNames?.card), children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "font-semibold", children: text('who.party.children') }), labels['who.party.childrenNote'] && (_jsx("p", { className: "text-sm text-muted-foreground", children: renderLabel(labels['who.party.childrenNote']) }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", "aria-label": text('who.party.fewer'), disabled: children <= floor, onClick: () => answer(children - 1, adultOn), className: stepButton, children: _jsx(Minus, { "aria-hidden": "true", className: "size-4" }) }), _jsxs("span", { "aria-live": "polite", "aria-atomic": "true", className: "w-6 text-center text-lg font-bold tabular-nums", children: [_jsx("span", { "aria-hidden": "true", children: children }), _jsx("span", { className: "sr-only", children: text('who.party.count', { count: children }) })] }), _jsx("button", { type: "button", "aria-label": text('who.party.more'), "aria-describedby": full ? LIMIT_ID : undefined, disabled: full, onClick: () => answer(children + 1, adultOn), className: stepButton, children: _jsx(Plus, { "aria-hidden": "true", className: "size-4" }) })] })] }), _jsxs(CheckRow, { checked: adultOn, 
+    const childrenNote = labels['who.party.childrenNote'];
+    const adultNote = labels['who.party.adultNote'];
+    return (_jsxs("div", { className: "space-y-3", children: [labels['who.party.lead'] && (_jsx("p", { className: "text-sm text-muted-foreground", children: renderLabel(labels['who.party.lead']) })), _jsxs("div", { className: cn('divide-y divide-border rounded-lg border border-border bg-card', classNames?.card), children: [_jsx(StepperRow, { title: text('who.party.children'), note: childrenNote ? renderLabel(childrenNote) : null, value: children, countLabel: text('who.party.count', { count: children }), fewerLabel: text('who.party.fewer'), moreLabel: text('who.party.more'), canFewer: children > floor, canMore: !full, limitId: full ? LIMIT_ID : undefined, onFewer: () => answer(children - 1, adults), onMore: () => answer(children + 1, adults) }), adultStepper && (_jsx(StepperRow, { title: text('who.party.adult'), note: adultNote ? renderLabel(adultNote) : null, value: adults, countLabel: text('who.party.adultCount', { count: adults }), fewerLabel: text('who.party.adultFewer'), moreLabel: text('who.party.adultMore'), canFewer: adults > adultFloor, canMore: !full, limitId: full ? LIMIT_ID : undefined, onFewer: () => answer(children, adults - 1), onMore: () => answer(children, adults + 1) }))] }), !adultStepper && (_jsxs(CheckRow, { checked: adultOn, 
                 // Never down to nobody: the last person in the booking stays — unless
                 // the booking may start (and so stand) empty.
-                disabled: (!adultOn && full) || (adultOn && children === 0 && !startEmpty), describedBy: !adultOn && full ? LIMIT_ID : undefined, onToggle: () => answer(children, !adultOn), className: cn('min-h-14 justify-between px-5 py-3 text-sm', classNames?.card), selectedClassName: classNames?.cardSelected, children: [_jsxs("span", { className: "flex min-w-0 flex-col text-left", children: [_jsx("span", { className: "font-medium", children: text('who.party.adult') }), labels['who.party.adultNote'] && children > 0 && (_jsx("span", { className: "text-muted-foreground", children: renderLabel(labels['who.party.adultNote']) }))] }), _jsx(CheckCircle, { checked: adultOn })] }), _jsx("p", { id: LIMIT_ID, "aria-live": "polite", className: slotClass(classNames, 'limit', 'min-h-5 text-sm text-muted-foreground'), children: full ? renderLabel(labels['who.family.limit'], { max: maxPeople }) : '' })] }));
+                disabled: (!adultOn && full) || (adultOn && children === 0 && !startEmpty), describedBy: !adultOn && full ? LIMIT_ID : undefined, onToggle: () => answer(children, adultOn ? 0 : 1), className: cn('min-h-14 justify-between px-5 py-3 text-sm', classNames?.card), selectedClassName: classNames?.cardSelected, children: [_jsxs("span", { className: "flex min-w-0 flex-col text-left", children: [_jsx("span", { className: "font-medium", children: text('who.party.adult') }), adultNote && children > 0 && (_jsx("span", { className: "text-muted-foreground", children: renderLabel(adultNote) }))] }), _jsx(CheckCircle, { checked: adultOn })] })), labels['who.party.togetherHint'] && children > 0 && !adultOn && !full && (_jsx("p", { className: "text-sm text-muted-foreground", children: renderLabel(labels['who.party.togetherHint']) })), _jsx("p", { id: LIMIT_ID, "aria-live": "polite", className: slotClass(classNames, 'limit', 'min-h-5 text-sm text-muted-foreground'), children: full ? renderLabel(labels['who.family.limit'], { max: maxPeople }) : '' })] }));
+}
+const STEP_BUTTON = 'flex size-11 shrink-0 items-center justify-center rounded-full border border-border bg-background text-foreground transition-colors hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-40';
+/** One «name, note, − n +» row of a guest party. */
+function StepperRow({ title, note, value, countLabel, fewerLabel, moreLabel, canFewer, canMore, limitId, onFewer, onMore, }) {
+    return (_jsxs("div", { className: "flex items-center gap-4 px-5 py-4", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "font-semibold", children: title }), note !== null && _jsx("p", { className: "text-sm text-muted-foreground", children: note })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", "aria-label": fewerLabel, disabled: !canFewer, onClick: onFewer, className: STEP_BUTTON, children: _jsx(Minus, { "aria-hidden": "true", className: "size-4" }) }), _jsxs("span", { "aria-live": "polite", "aria-atomic": "true", className: "w-6 text-center text-lg font-bold tabular-nums", children: [_jsx("span", { "aria-hidden": "true", children: value }), _jsx("span", { className: "sr-only", children: countLabel })] }), _jsx("button", { type: "button", "aria-label": moreLabel, "aria-describedby": limitId, disabled: !canMore, onClick: onMore, className: STEP_BUTTON, children: _jsx(Plus, { "aria-hidden": "true", className: "size-4" }) })] })] }));
 }
 /**
  * The guest chips as a radio group. Roving focus: one chip is in the tab

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medalsocial/meda",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "description": "Shared Meda UI shell and runtime package.",
   "license": "Apache-2.0",
   "repository": {