@medalsocial/meda 3.3.0 → 3.5.0

package/dist/booking/internal/service-multi.js

@@ -0,0 +1,83 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+import { LiveStatus } from '../live-status.js';
+import { slotClass } from '../slots.js';
+import { renderLabel } from './label-parts.js';
+import { BookingButton } from './ui.js';
+/**
+ * The service step's multi-select parts (`ServiceScreenProps.selection`):
+ * the per-person tabs, the sticky total bar and the checkbox card. Internal —
+ * `ServiceScreen` composes them; the package does not export them.
+ */
+export const serviceTabId = (index) => `booking-service-tab-${index}`;
+export const serviceTabPanelId = (index) => `booking-service-panel-${index}`;
+/**
+ * One tab per person on the multi-select step, a tick on everyone who has
+ * something. The WAI-ARIA tabs pattern: one tab stop, arrows move between
+ * people, Home / End jump to the ends; moving selects (one short panel, no
+ * cost to showing it).
+ */
+export function PersonTabs({ people, active, done, onSelect, labels, labelledBy, describedBy, classNames, }) {
+    function onKeyDown(event) {
+        const last = people.length - 1;
+        const moves = {
+            ArrowRight: active === last ? 0 : active + 1,
+            ArrowLeft: active === 0 ? last : active - 1,
+            Home: 0,
+            End: last,
+        };
+        const next = Object.hasOwn(moves, event.key) ? moves[event.key] : null;
+        if (next === null)
+            return;
+        event.preventDefault();
+        onSelect(next);
+        document.getElementById(serviceTabId(next))?.focus();
+    }
+    return (_jsx("div", { role: "tablist", "aria-labelledby": labelledBy, "aria-describedby": describedBy, onKeyDown: onKeyDown, className: "-mx-1 flex gap-2 overflow-x-auto px-1 py-1", children: people.map((person, index) => {
+            const selected = index === active;
+            const finished = done(index);
+            return (_jsxs("button", { type: "button", role: "tab", id: serviceTabId(index), "aria-selected": selected, "aria-controls": selected ? serviceTabPanelId(index) : undefined, tabIndex: selected ? 0 : -1, onClick: () => onSelect(index), 
+                // Weight and ring carry the open tab alongside the colour, as the
+                // category pills do. Focus is an outline, so it stacks on the
+                // selection ring instead of replacing it with a fainter one.
+                className: cn('inline-flex h-11 shrink-0 items-center gap-1.5 rounded-full border-[1.5px] px-4 text-sm whitespace-nowrap transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring', selected
+                    ? 'border-primary bg-primary/10 font-bold text-foreground ring-2 ring-primary'
+                    : 'border-primary/35 font-normal text-primary hover:border-primary hover:bg-primary/5', classNames?.tab, selected && classNames?.tabSelected), children: [finished && _jsx(Check, { "aria-hidden": "true", className: "size-4 shrink-0" }), person.label, finished && (_jsxs("span", { className: "sr-only", children: [', ', renderLabel(labels['service.tabDone'])] }))] }, person.key));
+        }) }));
+}
+/**
+ * The multi-select step's sticky bar: the running total, what is still
+ * missing, and «Next». The same bar as `SummaryBar`, so the step reads as one
+ * flow; a caller that also renders `SummaryBar` hides it on this step.
+ *
+ * «Next» is never disabled. A disabled button explains nothing and is skipped
+ * by a screen reader's tab order; this one stays, the line says what is
+ * missing, and the caller decides what pressing it does.
+ */
+export function TotalBar({ selection, format, classNames, }) {
+    const { total, canContinue, labels } = selection;
+    return (_jsxs("div", { className: slotClass(classNames, 'bar', 'sticky bottom-0 z-40 border-t border-border bg-background/95 backdrop-blur-md'), children: [_jsx(LiveStatus, { text: selection.notice ?? null, className: "px-5 text-sm font-medium text-foreground [&:not(:empty)]:pt-3" }), _jsxs("div", { className: "flex h-16 items-center justify-between gap-4 px-5", children: [_jsxs("div", { "aria-live": "polite", "aria-atomic": "true", className: "min-w-0 text-sm tabular-nums", children: [total !== null && (_jsx("p", { className: "truncate font-semibold", children: renderLabel(labels['service.total'], {
+                                    minutes: total.minutes,
+                                    price: format.price(total.priceOre),
+                                }) })), !canContinue && (_jsx("p", { className: "truncate text-muted-foreground", children: renderLabel(labels['service.chooseFirst']) }))] }), _jsx(BookingButton, { size: "lg", onClick: selection.onContinue, children: renderLabel(labels['service.continue']) })] })] }));
+}
+/**
+ * A service card on the multi-select step: a real checkbox inside its label.
+ * Space (and Enter) toggles it, the label's whole box is the target, and a
+ * screen reader hears «checkbox, checked».
+ */
+export function MultiServiceCard({ name, selected, onPick, duration, price, className, selectedClassName, }) {
+    return (_jsxs("label", { className: cn('flex min-h-14 w-full cursor-pointer items-center gap-4 rounded-lg border px-5 py-4 text-left transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-primary', selected ? 'border-primary bg-primary/5' : 'border-border bg-card hover:border-primary', className, selected && selectedClassName), children: [_jsx("input", { type: "checkbox", className: "sr-only", checked: selected, onChange: onPick, 
+                // Enter as well as Space: on a phone-sized list the card reads as a
+                // button, and a keyboard visitor presses it like one.
+                onKeyDown: (event) => {
+                    if (event.key !== 'Enter')
+                        return;
+                    event.preventDefault();
+                    onPick();
+                } }), _jsx("span", { "aria-hidden": "true", className: cn('flex size-6 shrink-0 items-center justify-center rounded-[4px] border-[1.5px] transition-colors', 
+                // The empty box needs 3:1 against the card to be seen at all.
+                selected ? 'border-primary bg-primary text-primary-foreground' : 'border-muted-foreground'), children: selected && _jsx(Check, { className: "size-4" }) }), _jsxs("span", { className: "flex min-w-0 flex-1 items-baseline justify-between gap-4", children: [_jsx("span", { className: "font-medium", children: name }), _jsxs("span", { className: "flex items-baseline gap-4 text-right", children: [_jsx("span", { className: "text-sm text-muted-foreground tabular-nums", children: duration }), price] })] })] }));
+}

package/dist/booking/internal/visit.d.ts

@@ -0,0 +1,13 @@
+import type { WizardService } from '../types.js';
+/**
+ * One person's visit: their first service and, when they booked more, the
+ * ones after it — done back to back, with one stylist.
+ */
+export interface VisitLike {
+    service: WizardService;
+    extraServices?: ReadonlyArray<WizardService>;
+}
+/** Every service in the visit, in the order they are done. */
+export declare function visitServices(item: VisitLike): WizardService[];
+/** The visit's services by name: «Klipp + Vask». */
+export declare function visitName(item: VisitLike): string;

package/dist/booking/internal/visit.js

@@ -0,0 +1,10 @@
+/** Every service in the visit, in the order they are done. */
+export function visitServices(item) {
+    return [item.service, ...(item.extraServices ?? [])];
+}
+/** The visit's services by name: «Klipp + Vask». */
+export function visitName(item) {
+    return visitServices(item)
+        .map((service) => service.name)
+        .join(' + ');
+}

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

@@ -2,6 +2,7 @@ import { ADD_CHILD_SHEET_LABEL_KEYS } from './add-child-sheet.js';
 import { BOOKING_SKELETON_LABEL_KEYS } from './booking-skeleton.js';
 import { 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';
 import { MANAGE_SCREEN_LABEL_KEYS } from './manage-screen.js';
 import { CHILD_CARDS_LABEL_KEYS } from './portal/child-cards.js';
@@ -15,7 +16,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 } from './service-screen.js';
+import { SERVICE_SCREEN_LABEL_KEYS, SERVICE_SCREEN_MULTI_LABEL_KEYS } from './service-screen.js';
 import { STYLIST_SCREEN_LABEL_KEYS } from './stylist-screen.js';
 import { SUMMARY_BAR_LABEL_KEYS } from './summary-bar.js';
 import { TIME_SCREEN_LABEL_KEYS } from './time-screen.js';
@@ -28,7 +29,14 @@ import { WHO_SCREEN_LABEL_KEYS } from './who-screen.js';
  * (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" | "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.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.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" | "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.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" | "summary.placeholder.who" | "summary.placeholder.service" | "summary.next" | "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")[];
-export type BookingLabelKey = (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. */
-export type BookingLabels = Record<BookingLabelKey, string>;
+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" | "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.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.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" | "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" | "summary.placeholder.who" | "summary.placeholder.service" | "summary.next" | "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")[];
+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];
+/** 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. */
+export type BookingLabels = Record<BookingRequiredLabelKey, BookingLabel> & Partial<Record<BookingOptionalLabelKey, BookingLabel>>;

package/dist/booking/label-keys.js

@@ -15,7 +15,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 } from './service-screen.js';
+import { SERVICE_SCREEN_LABEL_KEYS, SERVICE_SCREEN_MULTI_LABEL_KEYS } from './service-screen.js';
 import { STYLIST_SCREEN_LABEL_KEYS } from './stylist-screen.js';
 import { SUMMARY_BAR_LABEL_KEYS } from './summary-bar.js';
 import { TIME_SCREEN_LABEL_KEYS } from './time-screen.js';
@@ -33,6 +33,7 @@ export const BOOKING_LABEL_KEYS = [
         ...WHO_SCREEN_LABEL_KEYS,
         ...ADD_CHILD_SHEET_LABEL_KEYS,
         ...SERVICE_SCREEN_LABEL_KEYS,
+        ...SERVICE_SCREEN_MULTI_LABEL_KEYS,
         ...STYLIST_SCREEN_LABEL_KEYS,
         ...TIME_SCREEN_LABEL_KEYS,
         ...MANAGE_SCREEN_LABEL_KEYS,

package/dist/booking/labels.d.ts

@@ -3,13 +3,42 @@
  *
  * Every word a booking screen shows arrives through its `labels` prop — meda
  * ships no default brand and no default language. A screen's labels are a flat
- * record of strings keyed `'<screen>.<thing>'` (e.g. `'who.heading'`), so one
- * merged pack (`BookingLabels`) can be handed to every screen, and a customer
- * can override a single sentence without touching the rest.
+ * record keyed `'<screen>.<thing>'` (e.g. `'who.heading'`), so one merged pack
+ * (`BookingLabels`) can be handed to every screen, and a customer can override
+ * a single sentence without touching the rest.
  *
- * Values are plain strings, so a pack is serialisable (it can travel from a
- * server component to the client as a prop). Variable parts are `{name}`
- * placeholders, filled by `fillLabel`.
+ * A label is a `BookingLabel`: a string, or an array of strings. Both are
+ * serialisable, so a pack can travel from a server component to the client as
+ * a prop. Variable parts are `{name}` placeholders.
+ *
+ * The two forms differ only in the DOM they render as element children:
+ *
+ * - a **string** renders as ONE text node once filled, like a template
+ *   literal: `'Total {total} · paid at the salon'` → «Total 840 kr · paid at
+ *   the salon», one node;
+ * - an **array** renders one text node per element, each element filled with
+ *   the same values: `['Total ', '{total}', ' · ', 'paid at the salon']` →
+ *   four nodes, the same DOM as `Total {total}{' · '}paid at the salon` in JSX.
+ *   An element that fills to `''` renders nothing.
+ *
+ * A browser lays text out per text node, so the same sentence split
+ * differently can land its later glyphs a sub-pixel apart. The pack decides
+ * where a sentence breaks; a screen never splits a string on its own.
+ *
+ * Text-only targets (`aria-label`, `title`, a file name, an error string) read
+ * a label through `fillLabel` / `labelText`, which join an array's elements.
+ */
+/** One label: a string (one text node) or one string per text node. */
+export type BookingLabel = string | readonly string[];
+/** A label as plain text: an array's elements joined, a string as it is. */
+export declare function labelText(label: BookingLabel): string;
+/**
+ * Replaces `{key}` placeholders in `template`, as plain text. An array is
+ * filled element by element and joined. Unknown keys are left as written.
+ */
+export declare function fillLabel(template: BookingLabel, values: Readonly<Record<string, string | number>>): string;
+/**
+ * The text nodes a label fills to: one for a string, one per element for an
+ * array, with empty ones dropped. `[]` when the label fills to nothing.
  */
-/** Replaces `{key}` placeholders in `template`. Unknown keys are left as written. */
-export declare function fillLabel(template: string, values: Readonly<Record<string, string | number>>): string;
+export declare function fillLabelPieces(template: BookingLabel, values: Readonly<Record<string, string | number>>): string[];

package/dist/booking/labels.js

@@ -3,15 +3,52 @@
  *
  * Every word a booking screen shows arrives through its `labels` prop — meda
  * ships no default brand and no default language. A screen's labels are a flat
- * record of strings keyed `'<screen>.<thing>'` (e.g. `'who.heading'`), so one
- * merged pack (`BookingLabels`) can be handed to every screen, and a customer
- * can override a single sentence without touching the rest.
+ * record keyed `'<screen>.<thing>'` (e.g. `'who.heading'`), so one merged pack
+ * (`BookingLabels`) can be handed to every screen, and a customer can override
+ * a single sentence without touching the rest.
  *
- * Values are plain strings, so a pack is serialisable (it can travel from a
- * server component to the client as a prop). Variable parts are `{name}`
- * placeholders, filled by `fillLabel`.
+ * A label is a `BookingLabel`: a string, or an array of strings. Both are
+ * serialisable, so a pack can travel from a server component to the client as
+ * a prop. Variable parts are `{name}` placeholders.
+ *
+ * The two forms differ only in the DOM they render as element children:
+ *
+ * - a **string** renders as ONE text node once filled, like a template
+ *   literal: `'Total {total} · paid at the salon'` → «Total 840 kr · paid at
+ *   the salon», one node;
+ * - an **array** renders one text node per element, each element filled with
+ *   the same values: `['Total ', '{total}', ' · ', 'paid at the salon']` →
+ *   four nodes, the same DOM as `Total {total}{' · '}paid at the salon` in JSX.
+ *   An element that fills to `''` renders nothing.
+ *
+ * A browser lays text out per text node, so the same sentence split
+ * differently can land its later glyphs a sub-pixel apart. The pack decides
+ * where a sentence breaks; a screen never splits a string on its own.
+ *
+ * Text-only targets (`aria-label`, `title`, a file name, an error string) read
+ * a label through `fillLabel` / `labelText`, which join an array's elements.
  */
-/** Replaces `{key}` placeholders in `template`. Unknown keys are left as written. */
-export function fillLabel(template, values) {
+/** A label as plain text: an array's elements joined, a string as it is. */
+export function labelText(label) {
+    return typeof label === 'string' ? label : label.join('');
+}
+function fillOne(template, values) {
     return template.replace(/\{(\w+)\}/g, (match, key) => Object.hasOwn(values, key) ? String(values[key]) : match);
 }
+/**
+ * Replaces `{key}` placeholders in `template`, as plain text. An array is
+ * filled element by element and joined. Unknown keys are left as written.
+ */
+export function fillLabel(template, values) {
+    return typeof template === 'string'
+        ? fillOne(template, values)
+        : template.map((piece) => fillOne(piece, values)).join('');
+}
+/**
+ * The text nodes a label fills to: one for a string, one per element for an
+ * array, with empty ones dropped. `[]` when the label fills to nothing.
+ */
+export function fillLabelPieces(template, values) {
+    const pieces = typeof template === 'string' ? [template] : template;
+    return pieces.map((piece) => fillOne(piece, values)).filter((piece) => piece !== '');
+}

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

@@ -1,4 +1,5 @@
 import { type Dispatch, type ReactNode, type SetStateAction } from 'react';
+import type { BookingLabel } from './labels.js';
 import { type OtpSlotsLabels, type OtpSlotsSlot } from './otp-slots.js';
 import { type SlotClassNames } from './slots.js';
 import type { BookingGuardian } from './types.js';
@@ -9,7 +10,7 @@ export declare const LOGIN_PANEL_LABEL_KEYS: readonly ["login.heading", "login.c
  * Placeholders: `login.codeHelp` `{email}`, `login.vippsSentTo` `{to}`,
  * `login.cooldownWait` `{seconds}`, `login.resendIn` `{time}` («0:30»).
  */
-export type LoginPanelLabels = Record<(typeof LOGIN_PANEL_OWN_LABEL_KEYS)[number], string> & OtpSlotsLabels & VippsButtonLabels;
+export type LoginPanelLabels = Record<(typeof LOGIN_PANEL_OWN_LABEL_KEYS)[number], BookingLabel> & OtpSlotsLabels & VippsButtonLabels;
 /**
  * - `root`: the panel's column.
  * - `notice`: a non-error sentence in the live region (errors use `Field.Error`).
@@ -82,7 +83,7 @@ export interface LoginPanelProps {
     memory?: LoginPanelMemory;
     onMemoryChange?: Dispatch<SetStateAction<LoginPanelMemory>>;
     /** Draws the heading («Log in» / «Check your e-mail»). Default: none — the page has its own. */
-    heading?: (text: string) => ReactNode;
+    heading?: (text: ReactNode) => ReactNode;
     /** Drawn above the Vipps button on the first screen. */
     intro?: ReactNode;
     /** Wait between codes. Default 30 s. */

package/dist/booking/login-panel.js

@@ -211,7 +211,8 @@ export function LoginPanel({ labels, onStartLogin, onVerify, onSignedIn, onVipps
         setNotice(null);
     }
     const isFieldError = notice !== null && FIELD_ERRORS.has(notice);
-    const noticeText = notice === null ? null : labels[`login.notice.${notice}`];
+    // `null` for a blank notice, so no input is described by an empty one.
+    const noticeText = notice === null ? null : renderLabel(labels[`login.notice.${notice}`]);
     // One live region for the whole flow, ABOVE the switch between the two
     // screens so it stays mounted across it: a region that arrives already
     // holding its sentence is often read as nothing at all. It doubles as the
@@ -225,7 +226,7 @@ export function LoginPanel({ labels, onStartLogin, onVerify, onSignedIn, onVipps
         : labels['login.cooldownReady'];
     const cooldownRegion = (_jsx("p", { "aria-live": "polite", className: "sr-only", children: mode === 'code' ? cooldownSentence : null }));
     const link = slotClass(classNames, 'link', 'font-semibold text-primary underline underline-offset-4 disabled:no-underline disabled:opacity-60');
-    return (_jsxs("div", { className: slotClass(classNames, 'root', 'space-y-6'), children: [heading(mode === 'start' ? labels['login.heading'] : labels['login.codeHeading']), mode === 'vipps' && (_jsx("p", { className: "text-muted-foreground", children: sentTo === ''
+    return (_jsxs("div", { className: slotClass(classNames, 'root', 'space-y-6'), children: [heading(renderLabel(labels[mode === 'start' ? 'login.heading' : 'login.codeHeading'])), mode === 'vipps' && (_jsx("p", { className: "text-muted-foreground", children: sentTo === ''
                     ? labels['login.vippsSentToUnknown']
                     : renderLabel(labels['login.vippsSentTo'], { to: sentTo }) })), liveRegion, cooldownRegion, mode === 'start' ? (_jsxs(_Fragment, { children: [intro, onVipps && (_jsxs(_Fragment, { children: [_jsx(VippsButton, { onVipps: onVipps, next: vippsNext, label: vippsLabel, labels: labels, classNames: vippsClassNames }), _jsxs("div", { className: slotClass(classNames, 'divider', 'flex items-center gap-4 text-sm text-muted-foreground'), "aria-hidden": "true", children: [_jsx("span", { className: "h-px flex-1 bg-border" }), labels['login.or'], _jsx("span", { className: "h-px flex-1 bg-border" })] })] })), _jsx("p", { className: "text-muted-foreground", children: labels['login.emailIntro'] }), _jsxs("form", { onSubmit: submitEmail, className: slotClass(classNames, 'form', 'space-y-6'), children: [_jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: emailId, children: labels['login.emailLabel'] }), _jsx(Input, { id: emailId, type: "email", autoComplete: "email", required: true, value: email, "aria-describedby": noticeText ? noticeId : undefined, "aria-invalid": isFieldError || undefined, onChange: (event) => setEmail(event.target.value), className: slotClass(classNames, 'input', BOOKING_INPUT_CLASS) })] }), _jsx(BookingButton, { type: "submit", size: "lg", className: slotClass(classNames, 'submit', 'w-full'), disabled: pending, children: labels['login.sendCode'] })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("form", { onSubmit: submitCode, className: slotClass(classNames, 'form', 'space-y-6'), children: [_jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: codeId, children: labels['login.codeLabel'] }), _jsx("div", { ref: codeRef, children: _jsx(OtpSlots, { id: codeId, value: code, 
                                             // Read-only rather than disabled while a request is out, so

package/dist/booking/login-sheet.d.ts

@@ -1,10 +1,11 @@
+import { type BookingLabel } from './labels.js';
 import { type LoginPanelLabels, type LoginPanelProps } from './login-panel.js';
 import { type SlotClassNames } from './slots.js';
 import type { BookingGuardian } from './types.js';
 export declare const LOGIN_SHEET_OWN_LABEL_KEYS: readonly ["loginSheet.prompt", "loginSheet.trigger", "loginSheet.intro", "loginSheet.vipps", "loginSheet.close"];
 export declare const LOGIN_SHEET_LABEL_KEYS: readonly ["loginSheet.prompt", "loginSheet.trigger", "loginSheet.intro", "loginSheet.vipps", "loginSheet.close", "login.heading", "login.codeHeading", "login.or", "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", "otp.label", "vipps.button", "vipps.unavailable", "vipps.throttled"];
 /** `loginSheet.prompt` holds a `{trigger}` placeholder where the trigger button goes. */
-export type LoginSheetLabels = Record<(typeof LOGIN_SHEET_OWN_LABEL_KEYS)[number], string> & LoginPanelLabels;
+export type LoginSheetLabels = Record<(typeof LOGIN_SHEET_OWN_LABEL_KEYS)[number], BookingLabel> & LoginPanelLabels;
 /**
  * - `prompt`: the «have an account? Log in» row.
  * - `trigger`: the button inside it.

package/dist/booking/login-sheet.js

@@ -5,6 +5,7 @@ import { useState } from 'react';
 import { Sheet } from '../primitives/sheet.js';
 import { labelParts } from './internal/label-parts.js';
 import { BookingButton } from './internal/ui.js';
+import { labelText } from './labels.js';
 import { LOGIN_PANEL_LABEL_KEYS, LoginPanel, loginMemoryFor, } from './login-panel.js';
 import { slotClass } from './slots.js';
 export const LOGIN_SHEET_OWN_LABEL_KEYS = [
@@ -41,7 +42,7 @@ export function LoginSheet({ labels, onStartLogin, onVerify, onVipps, onSignedIn
     const [signedIn, setSignedIn] = useState(false);
     return (_jsxs(Sheet, { open: open, onOpenChange: setOpen, children: [trigger && !signedIn && (_jsx("p", { className: slotClass(classNames, 'prompt', 'text-sm text-muted-foreground'), children: labelParts(labels['loginSheet.prompt'], {
                     trigger: (_jsx(Sheet.Trigger, { className: slotClass(classNames, 'trigger', 'font-semibold text-primary underline underline-offset-4'), children: labels['loginSheet.trigger'] })),
-                }) })), _jsxs(Sheet.Content, { className: slotClass(classNames, 'content', 'z-50'), children: [_jsx(LoginPanel, { labels: labels, memory: memory, onMemoryChange: setMemory, onStartLogin: onStartLogin, onVerify: onVerify, onVipps: onVipps, vippsNext: resumePath, vippsLabel: labels['loginSheet.vipps'], resendCooldownMs: resendCooldownMs, classNames: panelClassNames, otpClassNames: otpClassNames, vippsClassNames: vippsClassNames, onSignedIn: (guardian) => {
+                }) })), _jsxs(Sheet.Content, { className: slotClass(classNames, 'content', 'z-50'), children: [_jsx(LoginPanel, { labels: labels, memory: memory, onMemoryChange: setMemory, onStartLogin: onStartLogin, onVerify: onVerify, onVipps: onVipps, vippsNext: resumePath, vippsLabel: labelText(labels['loginSheet.vipps']), resendCooldownMs: resendCooldownMs, classNames: panelClassNames, otpClassNames: otpClassNames, vippsClassNames: vippsClassNames, onSignedIn: (guardian) => {
                             setSignedIn(true);
                             setOpen(false);
                             onSignedIn(guardian);

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

@@ -1,4 +1,5 @@
 import type { BookingDaypart, BookingFormat } from './format.js';
+import { type BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 import { type TimeScreenComponents, type TimeScreenLabels, type TimeScreenSlot } from './time-screen.js';
 import type { BookingDayDto, BookingManageDto, BookingSlotDto } from './types.js';
@@ -33,7 +34,7 @@ export declare const MANAGE_SCREEN_LABEL_KEYS: readonly ["manage.heading", "mana
  * The three `cancel.reason.*` strings are both the chips' text and the value
  * `onCancel` receives.
  */
-export type ManageScreenLabels = Record<(typeof MANAGE_SCREEN_LABEL_KEYS)[number], string> & TimeScreenLabels;
+export type ManageScreenLabels = Record<(typeof MANAGE_SCREEN_LABEL_KEYS)[number], BookingLabel> & TimeScreenLabels;
 /** Why a mutation failed. Map anything the route did not name to `unavailable`. */
 export type ManageErrorCode = 'windowPassed' | 'slotTaken' | 'notFound' | 'conflict' | 'invalidInput' | 'unavailable';
 /**

package/dist/booking/manage-screen.js

@@ -4,7 +4,7 @@ import { useEffect, useState } from '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 { fillLabel, labelText } from './labels.js';
 import { slotClass } from './slots.js';
 import { TimeScreen, } from './time-screen.js';
 /**
@@ -121,7 +121,7 @@ const LINK_CLASS = 'font-semibold text-primary underline underline-offset-4';
 /** «Name's appointment» when a name was given, the bare noun when not. */
 function theirAppointment(labels, name) {
     if (!name)
-        return labels['manage.appointment.unnamed'];
+        return labelText(labels['manage.appointment.unnamed']);
     return fillLabel(labels[/[sxz]$/i.test(name) ? 'manage.appointment.namedSibilant' : 'manage.appointment.named'], { name });
 }
 /**
@@ -142,16 +142,20 @@ function remainingLabel(labels, ms) {
         return fillLabel(labels['manage.remaining.in'], { amount: hourPart });
     const minutes = Math.floor((ms % HOUR_MS) / 60_000);
     if (minutes < 1)
-        return labels['manage.remaining.underMinute'];
+        return labelText(labels['manage.remaining.underMinute']);
     return fillLabel(labels['manage.remaining.in'], {
         amount: fillLabel(labels[minutes === 1 ? 'manage.remaining.minute.one' : 'manage.remaining.minute.other'], { count: minutes }),
     });
 }
 function ringUs(labels, phone) {
-    return phone ? fillLabel(labels['manage.ringUsOn'], { phone }) : labels['manage.ringUs'];
+    return phone
+        ? fillLabel(labels['manage.ringUsOn'], { phone })
+        : labelText(labels['manage.ringUs']);
 }
 function callUs(labels, phone) {
-    return phone ? fillLabel(labels['manage.callUsOn'], { phone }) : labels['manage.callUs'];
+    return phone
+        ? fillLabel(labels['manage.callUsOn'], { phone })
+        : labelText(labels['manage.callUs']);
 }
 /** What the visitor is told went wrong — never the upstream's own words. */
 function errorSentence(labels, code, phone) {
@@ -159,13 +163,13 @@ function errorSentence(labels, code, phone) {
         case 'windowPassed':
             return fillLabel(labels['manage.error.windowPassed'], { ringUs: ringUs(labels, phone) });
         case 'slotTaken':
-            return labels['manage.error.slotTaken'];
+            return labelText(labels['manage.error.slotTaken']);
         case 'notFound':
             return fillLabel(labels['manage.error.notFound'], { callUs: callUs(labels, phone) });
         case 'conflict':
             return fillLabel(labels['manage.error.conflict'], { ringUs: ringUs(labels, phone) });
         case 'invalidInput':
-            return labels['manage.error.invalidInput'];
+            return labelText(labels['manage.error.invalidInput']);
         default:
             return fillLabel(labels['manage.error.unavailable'], { ringUs: ringUs(labels, phone) });
     }
@@ -200,7 +204,7 @@ export function ManageScreen({ labels, format, dayparts, booking, phone = null,
         ? null
         : format.stylistName(booking.resourceName) || null;
     const serviceLabel = booking.serviceName === UNKNOWN_SERVICE
-        ? labels['manage.serviceFallback']
+        ? labelText(labels['manage.serviceFallback'])
         : booking.serviceName;
     // The LARGER window wins: the sentence promises both actions, and the earlier
     // of the two deadlines is the one true of both.
@@ -330,7 +334,7 @@ function ClosedBooking({ labels, format, status, bookingHref, phone, className,
  * contiguous, which the sub-line says.
  */
 function PartyChoice({ labels, format, bookedForName, phone, onJustThisOne, onBack, className, }) {
-    const who = bookedForName ?? labels['manage.party.unnamed'];
+    const who = bookedForName ?? labelText(labels['manage.party.unnamed']);
     return (_jsxs("div", { className: className, children: [_jsx("h2", { className: "font-sans text-lg font-bold", children: renderLabel(labels['manage.party.heading'], { who }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsx(BookingButton, { size: "lg", onClick: onJustThisOne, children: renderLabel(labels['manage.party.justThisOne'], { who }) }), _jsx(BookingButton, { size: "lg", variant: "outline", onClick: onBack, children: labels['manage.back'] })] }), _jsxs("p", { className: "text-sm text-muted-foreground", children: [labels['manage.party.note'], ' ', _jsx(PhoneSentence, { format: format, phone: phone, children: ringUs(labels, phone) }), labels['manage.party.noteSuffix']] })] }));
 }
 /**
@@ -362,11 +366,12 @@ function ConfirmCancel({ labels, format, booking, reason, busy, onPickReason, on
                     dateTime: format.clock.dateTime(booking.startTs),
                     hours: booking.cancelWindowHours,
                 }) }), _jsxs("fieldset", { className: "flex flex-wrap gap-2", children: [_jsx("legend", { className: "sr-only", children: labels['manage.cancel.reasonLegend'] }), CANCEL_REASON_KEYS.map((key) => {
-                        const option = labels[key];
+                        // The reason travels as text; the chip shows the label in its own pieces.
+                        const option = labelText(labels[key]);
                         const picked = reason === option;
                         return (_jsx(BookingButton, { variant: "outline", size: "sm", "aria-pressed": picked, 
                             // Tapping the chosen chip again clears it: the answer is
                             // optional, so there has to be a way back to having given none.
-                            onClick: () => onPickReason(picked ? null : option), className: cn('rounded-full', picked ? 'border-primary ring-2 ring-primary' : ''), children: option }, key));
+                            onClick: () => onPickReason(picked ? null : option), className: cn('rounded-full', picked ? 'border-primary ring-2 ring-primary' : ''), children: labels[key] }, key));
                     })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsx(BookingButton, { size: "lg", disabled: busy, onClick: onConfirm, children: labels['manage.cancel.confirm'] }), _jsx(BookingButton, { size: "lg", variant: "outline", disabled: busy, onClick: onBack, children: labels['manage.cancel.keep'] })] })] }));
 }

package/dist/booking/otp-slots.d.ts

@@ -1,6 +1,7 @@
+import { type BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 export declare const OTP_SLOTS_LABEL_KEYS: readonly ["otp.label"];
-export type OtpSlotsLabels = Record<(typeof OTP_SLOTS_LABEL_KEYS)[number], string>;
+export type OtpSlotsLabels = Record<(typeof OTP_SLOTS_LABEL_KEYS)[number], BookingLabel>;
 /**
  * - `root`: the positioned wrapper.
  * - `row`: the six-box grid.

package/dist/booking/otp-slots.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useLayoutEffect, useRef, useState, } from 'react';
 import { cn } from '../lib/utils.js';
+import { labelText } from './labels.js';
 import { slotClass } from './slots.js';
 const LENGTH = 6;
 function digitsOnly(value) {
@@ -98,7 +99,7 @@ export function OtpSlots({ id, name = 'code', value, disabled = false, readOnly
     return (_jsxs("div", { className: slotClass(classNames, 'root', 'relative'), children: [_jsx("input", { ref: hiddenRef, id: fieldId, name: name, inputMode: "numeric", autoComplete: "one-time-code", autoCorrect: "off", spellCheck: false, 
                 // `\d*` rather than `[0-9]{6}`: it is the spelling iOS reads as «show the
                 // number pad», and the length is `minLength`/`maxLength`'s job.
-                pattern: "\\d*", minLength: LENGTH, maxLength: LENGTH, required: true, disabled: disabled, readOnly: readOnly, "aria-busy": readOnly || undefined, value: digits, "aria-invalid": invalid || undefined, "aria-describedby": describedBy, "aria-label": labels['otp.label'], onChange: handleChange, onKeyDown: handleKeyDown, onKeyUp: (event) => syncCaret(event.currentTarget), onSelect: (event) => syncCaret(event.currentTarget), onClick: (event) => syncCaret(event.currentTarget), onPaste: handlePaste, className: "absolute inset-0 z-10 h-full w-full cursor-text opacity-0" }), _jsx("div", { "aria-hidden": "true", "data-slot": "otp-row", className: slotClass(classNames, 'row', 'grid grid-cols-6 gap-1.5 sm:gap-2.5'), onMouseDown: (event) => {
+                pattern: "\\d*", minLength: LENGTH, maxLength: LENGTH, required: true, disabled: disabled, readOnly: readOnly, "aria-busy": readOnly || undefined, value: digits, "aria-invalid": invalid || undefined, "aria-describedby": describedBy, "aria-label": labelText(labels['otp.label']), onChange: handleChange, onKeyDown: handleKeyDown, onKeyUp: (event) => syncCaret(event.currentTarget), onSelect: (event) => syncCaret(event.currentTarget), onClick: (event) => syncCaret(event.currentTarget), onPaste: handlePaste, className: "absolute inset-0 z-10 h-full w-full cursor-text opacity-0" }), _jsx("div", { "aria-hidden": "true", "data-slot": "otp-row", className: slotClass(classNames, 'row', 'grid grid-cols-6 gap-1.5 sm:gap-2.5'), onMouseDown: (event) => {
                     event.preventDefault();
                     focusHidden();
                 }, children: Array.from({ length: LENGTH }, (_, index) => {

package/dist/booking/portal/age-confirm-card.d.ts

@@ -1,7 +1,8 @@
+import type { BookingLabel } from '../labels.js';
 import { type SlotClassNames } from '../slots.js';
 export declare const AGE_CONFIRM_CARD_LABEL_KEYS: readonly ["ageConfirm.heading", "ageConfirm.lead", "ageConfirm.legend", "ageConfirm.birthYear", "ageConfirm.birthMonth", "ageConfirm.birthMonthUnknown", "ageConfirm.confirm", "ageConfirm.dismiss"];
 /** `heading` and `legend` take `{name}`. */
-export type AgeConfirmCardLabels = Record<(typeof AGE_CONFIRM_CARD_LABEL_KEYS)[number], string>;
+export type AgeConfirmCardLabels = Record<(typeof AGE_CONFIRM_CARD_LABEL_KEYS)[number], BookingLabel>;
 /** `root` (the section), `heading`, `form`, `actions` (the button row). */
 export type AgeConfirmCardSlot = 'root' | 'heading' | 'form' | 'actions';
 export interface AgeConfirmCardProps {

package/dist/booking/portal/child-cards.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentType, ReactNode } from 'react';
 import type { BookingFormat } from '../format.js';
+import type { BookingLabel } from '../labels.js';
 import { type SlotClassNames } from '../slots.js';
 import type { ChildSummary } from '../types.js';
 export declare const CHILD_CARDS_LABEL_KEYS: readonly ["childCards.empty", "childCards.neverVisited", "childCards.lastVisit", "childCards.lastVisitNoService", "childCards.book", "childCards.stylist", "childCards.next", "childCards.none"];
@@ -8,7 +9,7 @@ export declare const CHILD_CARDS_LABEL_KEYS: readonly ["childCards.empty", "chil
  * `{age}` `{service}` `{date}`; `childCards.lastVisitNoService` `{age}`
  * `{date}`; `childCards.book` `{name}`.
  */
-export type ChildCardsLabels = Record<(typeof CHILD_CARDS_LABEL_KEYS)[number], string>;
+export type ChildCardsLabels = Record<(typeof CHILD_CARDS_LABEL_KEYS)[number], BookingLabel>;
 /**
  * - `list`: the grid. - `card`: one child. - `avatar`: the initial.
  * - `name`, `detail`: the two lines. - `details`: the full card's facts.

package/dist/booking/portal/data-controls.d.ts

@@ -1,3 +1,4 @@
+import { type BookingLabel } from '../labels.js';
 import { type SlotClassNames } from '../slots.js';
 import { type PortalActionFailure, type PortalActionResult } from './action-result.js';
 export declare const DATA_CONTROLS_LABEL_KEYS: readonly ["dataControls.heading", "dataControls.export", "dataControls.delete", "dataControls.confirmHeading", "dataControls.consequences", "dataControls.confirmLabel", "dataControls.confirmHelp", "dataControls.wrongWord", "dataControls.deleteForever", "dataControls.cancel", "dataControls.unreachable", "dataControls.confirmWord"];
@@ -5,7 +6,7 @@ export declare const DATA_CONTROLS_LABEL_KEYS: readonly ["dataControls.heading",
  * `confirmWord` is the literal the visitor must type (e.g. «DELETE»);
  * `confirmLabel` and `wrongWord` take `{word}`.
  */
-export type DataControlsLabels = Record<(typeof DATA_CONTROLS_LABEL_KEYS)[number], string>;
+export type DataControlsLabels = Record<(typeof DATA_CONTROLS_LABEL_KEYS)[number], BookingLabel>;
 /**
  * `root` (the section), `heading`, `actions` (the export/delete row),
  * `confirm` (the confirm panel form).