@medalsocial/meda 3.2.0 → 3.4.0

package/README.md

@@ -81,13 +81,47 @@ ships no default language and no brand. Override, cheapest first:
 1. **CSS variables** — the shadcn tokens the bridge maps (`--primary`, `--card`,
    `--muted`, `--border`, `--ring`, `--radius`, …). Colours come from nowhere else.
 2. **`labels`** — a flat record (`'who.heading'`, …); `BookingLabels` is the full set
-   and `BOOKING_LABEL_KEYS` lists it. `{placeholders}` are filled by the screen.
+   and `BOOKING_LABEL_KEYS` lists it. `{placeholders}` are filled by the screen. A
+   value is a `BookingLabel`: a **string** renders as one text node once filled (like
+   a template literal), a **string array** renders one text node per element, each
+   element filled with the same values (see below).
 3. **`classNames`** — per documented slot (`root`, `card`, `cardSelected`, `chip`, …),
    merged after the defaults so an override wins.
 4. **`components`** — card renderers (`ServiceCard`, `StylistCard`, `TimeChip`,
    `DayChip`, `PersonCard`, …). The defaults are exported (`DefaultServiceCard`, …)
    so an override can wrap them.
 
+### Where a sentence breaks into text nodes
+
+A browser lays text out per DOM text node, so the same sentence split differently can
+land its later glyphs a sub-pixel apart. The pack decides; a screen never splits a
+string on its own:
+
+```ts
+// One text node: «Total 840 kr · paid at the salon».
+const asOneNode = {
+  'confirmation.party.total': 'Total {total} · paid at the salon',
+} satisfies Partial<BookingLabels>;
+
+// Four text nodes, the DOM of `Total {total}{' · '}paid at the salon` in JSX.
+const asPieces = {
+  'confirmation.party.total': ['Total ', '{total}', ' · ', 'paid at the salon'],
+} satisfies Partial<BookingLabels>;
+```
+
+- An element that fills to `''` renders nothing; a label that fills to nothing renders
+  nothing at all.
+- Lines joined from several parts (the confirmation card's `service · stylist · when ·
+  price`, the portal's booking lines) are one text node while every part is a string,
+  and in pieces (each part and separator its own node) once one of their labels is an
+  array. `joinLabelParts(parts, separator, { pieces })` forces either.
+- Text-only targets — `aria-label`, `placeholder`, file names, error and status
+  messages, live-region announcements, a value filled into another label, and a custom
+  component's `string` prop — read the label flattened (`fillLabel`, `labelText`).
+- Helpers, for UI composed around the screens: `renderLabel(label, values)` (element
+  children), `fillLabel(label, values)` (text), `labelParts(label, { hole: <el/> })`
+  (element holes), `fillLabelPieces`, `labelText`, `joinLabelParts`.
+
 ```css
 @import 'tailwindcss';
 @import '@medalsocial/meda/styles/bridge.css';      /* your own shadcn tokens */

package/dist/booking/add-child-sheet.d.ts

@@ -1,4 +1,5 @@
 import type { BookingFormat } from './format.js';
+import { type BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 import type { NewChild, SaveResult } from './types.js';
 /**
@@ -13,7 +14,7 @@ import type { NewChild, SaveResult } from './types.js';
  * save — so a child is never shown as added before it exists.
  */
 export declare const ADD_CHILD_SHEET_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"];
-export type AddChildSheetLabels = Record<(typeof ADD_CHILD_SHEET_LABEL_KEYS)[number], string>;
+export type AddChildSheetLabels = Record<(typeof ADD_CHILD_SHEET_LABEL_KEYS)[number], BookingLabel>;
 /**
  * - `root` — the dashed trigger card (the only element in the page flow)
  * - `content` — the sheet (`<dialog>`)

package/dist/booking/add-child-sheet.js

@@ -7,6 +7,7 @@ import { Input } from '../primitives/input.js';
 import { Sheet } from '../primitives/sheet.js';
 import { Textarea } from '../primitives/textarea.js';
 import { BOOKING_INPUT_CLASS, BOOKING_SELECT_CLASS, BOOKING_TEXTAREA_CLASS, BookingButton, } from './internal/ui.js';
+import { labelText } from './labels.js';
 import { slotClass } from './slots.js';
 /**
  * «+ Add child» — a dashed card that opens a small sheet: name, birth year,
@@ -58,7 +59,7 @@ export function AddChildSheet({ labels, format, saveNotes, disabled, onSave, cur
         event.preventDefault();
         const trimmed = name.trim();
         if (trimmed === '' || year === '') {
-            setError(labels['addChild.missing']);
+            setError(labelText(labels['addChild.missing']));
             return;
         }
         startTransition(async () => {

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

@@ -1,7 +1,8 @@
+import type { BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 export declare const BOOKING_SKELETON_LABEL_KEYS: readonly ["bookingSkeleton.opening"];
 /** Copy for the pending skeleton: the sentence a screen reader hears while it is up. */
-export type BookingSkeletonLabels = Record<(typeof BOOKING_SKELETON_LABEL_KEYS)[number], string>;
+export type BookingSkeletonLabels = Record<(typeof BOOKING_SKELETON_LABEL_KEYS)[number], BookingLabel>;
 /**
  * `classNames` slots: `root` the fixed overlay · `frame` the pulsing column ·
  * `bar` the active step-bar segment · `chip` one of the four person chips.

package/dist/booking/confirmation.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentType } from 'react';
 import type { BookingFormat } from './format.js';
+import { type BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 import type { WizardItem } from './types.js';
 /**
@@ -14,7 +15,7 @@ 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], string>;
+export type ConfirmationLabels = Record<(typeof CONFIRMATION_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.

package/dist/booking/confirmation.js

@@ -1,7 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { joinLabelParts, 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';
 /**
  * The confirmation screen — the one the whole flow exists to reach.
@@ -50,24 +51,21 @@ export function Confirmation({ lines: rawLines, startTs, totalOre, address = nul
     }));
     const linkClass = slotClass(classNames, 'link', 'font-semibold text-primary underline underline-offset-4');
     const first = lines[0];
-    const singleCard = first ? (_jsx("p", { className: slotClass(classNames, 'card', 'rounded-lg border border-border bg-card px-5 py-4 font-medium'), children: [
+    const singleCard = first ? (_jsx("p", { className: slotClass(classNames, 'card', 'rounded-lg border border-border bg-card px-5 py-4 font-medium'), children: joinLabelParts([
             first.item.bookedForName
-                ? fillLabel(labels['confirmation.serviceFor'], {
+                ? renderLabel(labels['confirmation.serviceFor'], {
                     service: first.item.service.name,
                     name: first.item.bookedForName,
                 })
                 : first.item.service.name,
             first.stylistName,
-            fillLabel(labels['confirmation.when'], {
+            renderLabel(labels['confirmation.when'], {
                 day: clock.dayLabel(startTs, now),
                 time: clock.formatTime(startTs),
             }),
             // This line's own price, which for one person is the whole total.
             format.price(first.priceOre),
-        ]
-            // Filtered, not conditionally joined: an absent stylist closes the gap.
-            .filter((part) => Boolean(part))
-            .join(SEPARATOR) })) : null;
+        ], SEPARATOR) })) : null;
     return (_jsxs("section", { "aria-labelledby": "booking-confirmed-heading", className: slotClass(classNames, 'root', 'space-y-6'), children: [_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'] }), lines.length > 1 ? (_jsx(PartyCard, { lines: lines, totalOre: totalOre, now: now, format: format, labels: labels, classNames: classNames, PartyLine: components?.PartyLine ?? DefaultPartyLine })) : (singleCard), address && (_jsx("p", { className: slotClass(classNames, 'address', 'text-sm text-muted-foreground'), children: address })), _jsxs("div", { className: "flex flex-wrap gap-4", children: [calendarHref && (_jsx("a", { href: calendarHref, download: calendarFileName, className: linkClass, children: labels['confirmation.calendar'] })), lines.length === 1 && first?.manageHref && (_jsx("a", { href: first.manageHref, className: linkClass, children: labels['confirmation.manage'] }))] }), portalHref && (_jsx("p", { className: "text-sm", children: _jsx("a", { href: portalHref, className: linkClass, children: labels['confirmation.portal'] }) })), onStartOver && (_jsx("div", { children: _jsx(BookingButton, { variant: "outline", className: slotClass(classNames, 'startOver'), onClick: onStartOver, children: labels['confirmation.startOver'] }) }))] }));
 }
 /**
@@ -77,7 +75,9 @@ export function Confirmation({ lines: rawLines, startTs, totalOre, address = nul
 function PartyCard({ lines, totalOre, now, format, labels, classNames, PartyLine, }) {
     const { clock } = format;
     const firstStart = lines[0]?.startTs ?? 0;
-    return (_jsxs("div", { className: slotClass(classNames, 'partyCard', 'space-y-2 rounded-lg border border-border bg-card px-5 py-4'), children: [_jsx("p", { className: "font-semibold", children: fillLabel(labels['confirmation.party.heading'], { day: clock.dayLabel(firstStart, now) }) }), _jsx("ul", { className: "space-y-1", children: lines.map((line, index) => {
+    return (_jsxs("div", { className: slotClass(classNames, 'partyCard', 'space-y-2 rounded-lg border border-border bg-card px-5 py-4'), children: [_jsx("p", { className: "font-semibold", children: renderLabel(labels['confirmation.party.heading'], {
+                    day: clock.dayLabel(firstStart, now),
+                }) }), _jsx("ul", { className: "space-y-1", children: lines.map((line, index) => {
                     const time = clock.formatTime(line.startTs);
                     const text = fillLabel(labels['confirmation.party.line'], {
                         time,
@@ -94,9 +94,9 @@ function PartyCard({ lines, totalOre, now, format, labels, classNames, PartyLine
                         .trim();
                     return (_jsx(PartyLine
                     // biome-ignore lint/suspicious/noArrayIndexKey: two lines can share a service; the index is the identity
-                    , { line: line, text: text, manageLabel: labels['confirmation.manage'], manageAriaLabel: fillLabel(labels['confirmation.manageFor'], {
+                    , { line: line, text: text, manageLabel: labelText(labels['confirmation.manage']), manageAriaLabel: fillLabel(labels['confirmation.manageFor'], {
                             who: line.item.bookedForName ?? line.item.service.name,
                             time,
                         }), linkClassName: slotClass(classNames, 'link', 'text-sm font-semibold text-primary underline underline-offset-4') }, index));
-                }) }), _jsx("p", { className: "font-semibold", children: fillLabel(labels['confirmation.party.total'], { total: format.price(totalOre) }) })] }));
+                }) }), _jsx("p", { className: "font-semibold", children: renderLabel(labels['confirmation.party.total'], { total: format.price(totalOre) }) })] }));
 }

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

@@ -1,5 +1,6 @@
 import { type ComponentType } from 'react';
 import type { BookingFormat } from './format.js';
+import { type BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 import type { BookingFamilyMember, WizardAction, WizardError, WizardState } from './types.js';
 /**
@@ -14,7 +15,7 @@ import type { BookingFamilyMember, WizardAction, WizardError, WizardState } from
  */
 export declare const DETAILS_SCREEN_LABEL_KEYS: readonly ["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"];
 export type DetailsScreenLabelKey = (typeof DETAILS_SCREEN_LABEL_KEYS)[number];
-export type DetailsScreenLabels = Record<DetailsScreenLabelKey, string>;
+export type DetailsScreenLabels = Record<DetailsScreenLabelKey, BookingLabel>;
 /**
  * The label key for each failure the wizard can carry. Exported because some
  * of them (e.g. `maxParty`) are raised on earlier steps, where the shell shows

package/dist/booking/details-screen.js

@@ -5,8 +5,9 @@ import { Checkbox } from '../primitives/checkbox.js';
 import { Field } from '../primitives/field.js';
 import { Input } from '../primitives/input.js';
 import { Textarea } from '../primitives/textarea.js';
+import { renderLabel } from './internal/label-parts.js';
 import { BOOKING_CHECKBOX_CLASS, BOOKING_INPUT_CLASS, BOOKING_TEXTAREA_CLASS, BookingButton, } from './internal/ui.js';
-import { fillLabel } from './labels.js';
+import { fillLabel, labelText } from './labels.js';
 import { slotClass } from './slots.js';
 /**
  * The last step of the booking wizard: contact details, who each seat is for,
@@ -153,10 +154,10 @@ function knownWho(state, index, labels) {
     const item = state.items[index];
     if (item?.adult) {
         return state.people[index]?.key === 'self'
-            ? labels['details.known.self']
-            : labels['details.known.adult'];
+            ? labelText(labels['details.known.self'])
+            : labelText(labels['details.known.adult']);
     }
-    return item?.bookedForName ?? labels['details.known.child'];
+    return item?.bookedForName ?? labelText(labels['details.known.child']);
 }
 /**
  * Whether step 1 already said who sits in this seat: a saved person's card
@@ -199,7 +200,8 @@ export function DetailsScreen({ state, onChange, onSubmit, lines, totalOre, phon
     const showEmailError = !emailValid && (attempted || focused !== 'email');
     const showTermsError = attempted && !state.consentTerms;
     const price = format.price(totalOre);
-    const phonePrefix = labels['details.phone.prefix'];
+    // `null` when the pack leaves it blank, in either form: no box, no description.
+    const phonePrefix = renderLabel(labels['details.phone.prefix']);
     const FamilyChip = components?.FamilyChip ?? DefaultFamilyChip;
     function setContact(name, value) {
         onChange({ type: 'setContact', field: name, value });
@@ -285,11 +287,11 @@ export function DetailsScreen({ state, onChange, onSubmit, lines, totalOre, phon
     }
     const inputClass = (...extra) => slotClass(classNames, 'input', BOOKING_INPUT_CLASS, ...extra);
     const fieldClass = slotClass(classNames, 'field');
-    return (_jsxs("section", { "aria-labelledby": "booking-details-heading", className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx("h2", { id: "booking-details-heading", tabIndex: -1, className: slotClass(classNames, 'heading', 'font-sans text-2xl font-bold outline-none md:text-3xl'), children: labels['details.heading'] }), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('phone'), children: labels['details.phone.label'] }), _jsxs("div", { className: "flex items-stretch", children: [phonePrefix && (_jsx("span", { id: field('phone-prefix'), className: "flex h-12 items-center rounded-l-[4px] border border-r-0 border-input bg-muted px-4 text-base text-muted-foreground", children: phonePrefix })), _jsx(Input, { id: field('phone'), ref: phoneRef, type: "tel", inputMode: "numeric", autoComplete: "tel-national", className: inputClass(phonePrefix ? 'rounded-l-none' : ''), value: state.contact.phone, "aria-describedby": phonePrefix ? field('phone-prefix') : undefined, "aria-invalid": showPhoneError || undefined, onFocus: () => setFocused('phone'), onBlur: () => setFocused(null), onChange: (event) => setContact('phone', event.target.value) })] }), showPhoneError && _jsx(Field.Error, { children: labels['details.phone.error'] })] }), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('name'), children: labels['details.name.label'] }), _jsx(Input, { id: field('name'), autoComplete: "name", className: inputClass(), value: state.contact.name, onChange: (event) => setContact('name', event.target.value) })] }), state.items.some((_, index) => isKnownChair(state, index)) && (_jsx("ul", { "aria-label": labels['details.known.label'], className: "space-y-1 text-sm", children: state.items.map((item, index) => isKnownChair(state, index) ? (_jsxs("li", { children: [_jsx("span", { className: "font-semibold", children: item.service.name }), ' ', fillLabel(labels['details.known.for'], { who: knownWho(state, index, labels) })] }, index)) : null) })), state.items.map((item, index) => 
+    return (_jsxs("section", { "aria-labelledby": "booking-details-heading", className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx("h2", { id: "booking-details-heading", tabIndex: -1, className: slotClass(classNames, 'heading', 'font-sans text-2xl font-bold outline-none md:text-3xl'), children: labels['details.heading'] }), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('phone'), children: labels['details.phone.label'] }), _jsxs("div", { className: "flex items-stretch", children: [phonePrefix && (_jsx("span", { id: field('phone-prefix'), className: "flex h-12 items-center rounded-l-[4px] border border-r-0 border-input bg-muted px-4 text-base text-muted-foreground", children: phonePrefix })), _jsx(Input, { id: field('phone'), ref: phoneRef, type: "tel", inputMode: "numeric", autoComplete: "tel-national", className: inputClass(phonePrefix ? 'rounded-l-none' : ''), value: state.contact.phone, "aria-describedby": phonePrefix ? field('phone-prefix') : undefined, "aria-invalid": showPhoneError || undefined, onFocus: () => setFocused('phone'), onBlur: () => setFocused(null), onChange: (event) => setContact('phone', event.target.value) })] }), showPhoneError && _jsx(Field.Error, { children: labels['details.phone.error'] })] }), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('name'), children: labels['details.name.label'] }), _jsx(Input, { id: field('name'), autoComplete: "name", className: inputClass(), value: state.contact.name, onChange: (event) => setContact('name', event.target.value) })] }), state.items.some((_, index) => isKnownChair(state, index)) && (_jsx("ul", { "aria-label": labelText(labels['details.known.label']), className: "space-y-1 text-sm", children: state.items.map((item, index) => isKnownChair(state, index) ? (_jsxs("li", { children: [_jsx("span", { className: "font-semibold", children: item.service.name }), ' ', renderLabel(labels['details.known.for'], { who: knownWho(state, index, labels) })] }, index)) : null) })), state.items.map((item, index) => 
             // A seat step 1 already named is not asked again: a second answer could disagree.
             isKnownChair(state, index) ? null : (_jsx(ChildFields
             // biome-ignore lint/suspicious/noArrayIndexKey: two lines can share a service; the index is the identity
-            , { legend: state.items.length > 1 ? item.service.name : null, nameId: field(`child-name-${index}`), yearId: field(`child-year-${index}`), value: childAt(index), family: family, labels: labels, classNames: classNames, FamilyChip: FamilyChip, onChange: (patch, personId) => setChild(index, patch, personId) }, index))), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('email'), children: labels['details.email.label'] }), _jsx(Input, { id: field('email'), ref: emailRef, type: "email", autoComplete: "email", className: inputClass(), value: state.contact.email, "aria-describedby": field('email-help'), "aria-invalid": showEmailError || undefined, onFocus: () => setFocused('email'), onBlur: () => setFocused(null), onChange: (event) => setContact('email', event.target.value) }), _jsx(Field.Description, { id: field('email-help'), children: labels['details.email.help'] }), showEmailError && _jsx(Field.Error, { children: labels['details.email.error'] })] }), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('notes'), children: labels['details.notes.label'] }), _jsx(Textarea, { id: field('notes'), rows: 3, className: slotClass(classNames, 'input', BOOKING_TEXTAREA_CLASS), placeholder: labels['details.notes.placeholder'], value: state.notes, onChange: (event) => onChange({ type: 'setNotes', value: event.target.value }) })] }), _jsxs(Field, { orientation: "horizontal", className: slotClass(classNames, 'consent'), children: [_jsx(Checkbox, { id: field('terms'), ref: termsRef, className: BOOKING_CHECKBOX_CLASS, checked: state.consentTerms, "aria-invalid": showTermsError || undefined, onCheckedChange: (accepted) => onChange({ type: 'setConsent', which: 'terms', accepted }) }), _jsx(Field.Label, { htmlFor: field('terms'), className: "cursor-pointer font-normal", children: labels['details.terms.text'] }), termsHref && (_jsx("a", { href: termsHref, className: "col-start-2 text-sm font-semibold text-primary underline underline-offset-4", children: labels['details.terms.link'] }))] }), marketingConsent && (_jsxs(Field, { orientation: "horizontal", className: slotClass(classNames, 'consent'), children: [_jsx(Checkbox, { id: field('marketing'), className: BOOKING_CHECKBOX_CLASS, checked: state.consentMarketing, onCheckedChange: (accepted) => onChange({ type: 'setConsent', which: 'marketing', accepted }) }), _jsx(Field.Label, { htmlFor: field('marketing'), className: "cursor-pointer font-normal", children: labels['details.marketing.text'] })] })), state.error && (_jsx(SubmitFailure, { error: state.error, phone: phone, format: format, labels: labels, className: slotClass(classNames, 'error', 'rounded-lg border border-destructive/40 bg-destructive/10 px-5 py-3 text-sm') })), _jsx(BookingButton, { size: "lg", className: slotClass(classNames, 'submit', 'w-full'), disabled: submitting, "aria-busy": submitting || undefined, onClick: handleSubmit, children: fillLabel(labels['details.submit'], { price }) })] }));
+            , { legend: state.items.length > 1 ? item.service.name : null, nameId: field(`child-name-${index}`), yearId: field(`child-year-${index}`), value: childAt(index), family: family, labels: labels, classNames: classNames, FamilyChip: FamilyChip, onChange: (patch, personId) => setChild(index, patch, personId) }, index))), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('email'), children: labels['details.email.label'] }), _jsx(Input, { id: field('email'), ref: emailRef, type: "email", autoComplete: "email", className: inputClass(), value: state.contact.email, "aria-describedby": field('email-help'), "aria-invalid": showEmailError || undefined, onFocus: () => setFocused('email'), onBlur: () => setFocused(null), onChange: (event) => setContact('email', event.target.value) }), _jsx(Field.Description, { id: field('email-help'), children: labels['details.email.help'] }), showEmailError && _jsx(Field.Error, { children: labels['details.email.error'] })] }), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('notes'), children: labels['details.notes.label'] }), _jsx(Textarea, { id: field('notes'), rows: 3, className: slotClass(classNames, 'input', BOOKING_TEXTAREA_CLASS), placeholder: labelText(labels['details.notes.placeholder']), value: state.notes, onChange: (event) => onChange({ type: 'setNotes', value: event.target.value }) })] }), _jsxs(Field, { orientation: "horizontal", className: slotClass(classNames, 'consent'), children: [_jsx(Checkbox, { id: field('terms'), ref: termsRef, className: BOOKING_CHECKBOX_CLASS, checked: state.consentTerms, "aria-invalid": showTermsError || undefined, onCheckedChange: (accepted) => onChange({ type: 'setConsent', which: 'terms', accepted }) }), _jsx(Field.Label, { htmlFor: field('terms'), className: "cursor-pointer font-normal", children: labels['details.terms.text'] }), termsHref && (_jsx("a", { href: termsHref, className: "col-start-2 text-sm font-semibold text-primary underline underline-offset-4", children: labels['details.terms.link'] }))] }), marketingConsent && (_jsxs(Field, { orientation: "horizontal", className: slotClass(classNames, 'consent'), children: [_jsx(Checkbox, { id: field('marketing'), className: BOOKING_CHECKBOX_CLASS, checked: state.consentMarketing, onCheckedChange: (accepted) => onChange({ type: 'setConsent', which: 'marketing', accepted }) }), _jsx(Field.Label, { htmlFor: field('marketing'), className: "cursor-pointer font-normal", children: labels['details.marketing.text'] })] })), state.error && (_jsx(SubmitFailure, { error: state.error, phone: phone, format: format, labels: labels, className: slotClass(classNames, 'error', 'rounded-lg border border-destructive/40 bg-destructive/10 px-5 py-3 text-sm') })), _jsx(BookingButton, { size: "lg", className: slotClass(classNames, 'submit', 'w-full'), disabled: submitting, "aria-busy": submitting || undefined, onClick: handleSubmit, children: renderLabel(labels['details.submit'], { price }) })] }));
 }
 /**
  * The name and birth year for one line. Wrapped in a fieldset only when there
@@ -297,7 +299,7 @@ export function DetailsScreen({ state, onChange, onSubmit, lines, totalOre, phon
  * them is how one child's name lands on the other's booking.
  */
 function ChildFields({ legend, nameId, yearId, value, family, labels, classNames, FamilyChip, onChange, }) {
-    const fields = (_jsxs("div", { className: "grid grid-cols-[1fr_7rem] gap-3", children: [_jsxs(Field, { className: slotClass(classNames, 'field'), children: [_jsx(Field.Label, { htmlFor: nameId, children: labels['details.child.name'] }), _jsx(Input, { id: nameId, className: slotClass(classNames, 'input', BOOKING_INPUT_CLASS), value: value.name, onChange: (event) => onChange({ name: event.target.value }) })] }), _jsxs(Field, { className: slotClass(classNames, 'field'), children: [_jsx(Field.Label, { htmlFor: yearId, children: labels['details.child.year'] }), _jsx(Input, { id: yearId, inputMode: "numeric", maxLength: 4, className: slotClass(classNames, 'input', BOOKING_INPUT_CLASS), placeholder: labels['details.child.yearPlaceholder'], value: value.birthYear, onChange: (event) => onChange({ birthYear: event.target.value }) })] })] }));
+    const fields = (_jsxs("div", { className: "grid grid-cols-[1fr_7rem] gap-3", children: [_jsxs(Field, { className: slotClass(classNames, 'field'), children: [_jsx(Field.Label, { htmlFor: nameId, children: labels['details.child.name'] }), _jsx(Input, { id: nameId, className: slotClass(classNames, 'input', BOOKING_INPUT_CLASS), value: value.name, onChange: (event) => onChange({ name: event.target.value }) })] }), _jsxs(Field, { className: slotClass(classNames, 'field'), children: [_jsx(Field.Label, { htmlFor: yearId, children: labels['details.child.year'] }), _jsx(Input, { id: yearId, inputMode: "numeric", maxLength: 4, className: slotClass(classNames, 'input', BOOKING_INPUT_CLASS), placeholder: labelText(labels['details.child.yearPlaceholder']), value: value.birthYear, onChange: (event) => onChange({ birthYear: event.target.value }) })] })] }));
     const withSuggestions = (_jsxs("div", { className: "space-y-3", children: [family !== undefined && family.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: family.map((member) => (_jsx(FamilyChip, { member: member, pressed: value.name === member.name && value.birthYear === String(member.birthYear), onPick: () => onChange({ name: member.name, birthYear: String(member.birthYear) }, member.personId) }, `${member.name}-${member.birthYear}`))) })), fields] }));
     if (legend === null)
         return withSuggestions;
@@ -309,6 +311,7 @@ function ChildFields({ legend, nameId, yearId, value, family, labels, classNames
  * visitor cannot fix by trying harder.
  */
 function SubmitFailure({ error, phone, format, labels, className, }) {
-    const call = phone ? fillLabel(labels['details.call.link'], { phone }) : null;
-    return (_jsxs("p", { role: "alert", className: className, children: [labels[DETAILS_ERROR_LABEL_KEYS[error]], ' ', phone && call ? (_jsx("a", { href: format.telHref(phone), "aria-label": call, className: "font-semibold text-primary underline underline-offset-4", children: call })) : (labels['details.call.none'])] }));
+    const template = labels['details.call.link'];
+    const call = phone ? fillLabel(template, { phone }) : null;
+    return (_jsxs("p", { role: "alert", className: className, children: [labels[DETAILS_ERROR_LABEL_KEYS[error]], ' ', phone && call ? (_jsx("a", { href: format.telHref(phone), "aria-label": call, className: "font-semibold text-primary underline underline-offset-4", children: renderLabel(template, { phone }) })) : (labels['details.call.none'])] }));
 }

package/dist/booking/index.d.ts

@@ -3,9 +3,10 @@ export * from './booking-skeleton.js';
 export * from './confirmation.js';
 export * from './details-screen.js';
 export type { BookingClock, BookingDaypart, BookingFormat } from './format.js';
+export { type JoinLabelPartsOptions, joinLabelParts, labelParts, renderLabel, } from './internal/label-parts.js';
 export * from './internal/ui.js';
 export * from './label-keys.js';
-export { fillLabel } from './labels.js';
+export { type BookingLabel, fillLabel, fillLabelPieces, labelText } from './labels.js';
 export * from './live-status.js';
 export * from './login-panel.js';
 export * from './login-sheet.js';

package/dist/booking/index.js

@@ -10,9 +10,10 @@ export * from './add-child-sheet.js';
 export * from './booking-skeleton.js';
 export * from './confirmation.js';
 export * from './details-screen.js';
+export { joinLabelParts, labelParts, renderLabel, } from './internal/label-parts.js';
 export * from './internal/ui.js';
 export * from './label-keys.js';
-export { fillLabel } from './labels.js';
+export { fillLabel, fillLabelPieces, labelText } from './labels.js';
 export * from './live-status.js';
 export * from './login-panel.js';
 export * from './login-sheet.js';

package/dist/booking/internal/label-parts.d.ts

@@ -1,8 +1,43 @@
 import { type ReactNode } from 'react';
+import { type BookingLabel } from '../labels.js';
 /**
- * `fillLabel` for templates whose placeholders are elements (a link, a
+ * A filled label as element children (see `BookingLabel`): a string renders
+ * as one text node, an array as one text node per element. Prefer it over
+ * `fillLabel` wherever a label is rendered as children, so the pack decides
+ * where the sentence breaks.
+ *
+ * Returns the string itself for a one-node label, an array of strings for a
+ * split one, and `null` for a label that fills to nothing at all. Text-only
+ * targets (`aria-label`, `title`, a file name) keep `fillLabel`.
+ */
+export declare function renderLabel(template: BookingLabel, values?: Readonly<Record<string, string | number>>): string | string[] | null;
+/**
+ * `renderLabel` for templates whose placeholders include elements (a link, a
  * button) rather than strings: `'Have an account? {trigger} – …'` with
- * `{ trigger: <button>…</button> }`. Text parts stay text; unknown
- * placeholders are left as written.
+ * `{ trigger: <button>…</button> }`. Each element sits in its own place; the
+ * text around it follows the label's form — a string's text runs stay whole
+ * between elements, an array's elements stay separate. String and number
+ * values join the text they sit in. Unknown placeholders are left as written.
+ */
+export declare function labelParts(template: BookingLabel, parts: Readonly<Record<string, ReactNode>>): ReactNode;
+export interface JoinLabelPartsOptions {
+    /**
+     * `false`: the line is ONE text node (every part is flattened to text and
+     * joined). `true`: every part and every separator is its own text node, and
+     * a split part (an array, from a `string[]` label) keeps its pieces.
+     *
+     * Default: one text node when every part is plain text, pieces as soon as
+     * one part is split (a pack wrote one of the line's labels as an array) or
+     * is an element. A part that cannot be flattened (an element) always
+     * renders in pieces.
+     */
+    pieces?: boolean;
+}
+/**
+ * `parts.filter(Boolean).join(separator)` as element children. Blank parts
+ * drop out, so an absent one closes the gap rather than leaving a doubled
+ * separator. Whether the line is one text node or one per part and separator
+ * follows the parts' own form (see `JoinLabelPartsOptions.pieces`): plain
+ * strings join into one, as `[a, b].join(' · ')` in JSX did.
  */
-export declare function labelParts(template: string, parts: Readonly<Record<string, ReactNode>>): ReactNode;
+export declare function joinLabelParts(parts: ReadonlyArray<ReactNode>, separator: string, options?: JoinLabelPartsOptions): ReactNode;

package/dist/booking/internal/label-parts.js

@@ -1,19 +1,85 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
+import { fillLabelPieces } from '../labels.js';
 /**
- * `fillLabel` for templates whose placeholders are elements (a link, a
+ * A filled label as element children (see `BookingLabel`): a string renders
+ * as one text node, an array as one text node per element. Prefer it over
+ * `fillLabel` wherever a label is rendered as children, so the pack decides
+ * where the sentence breaks.
+ *
+ * Returns the string itself for a one-node label, an array of strings for a
+ * split one, and `null` for a label that fills to nothing at all. Text-only
+ * targets (`aria-label`, `title`, a file name) keep `fillLabel`.
+ */
+export function renderLabel(template, values = {}) {
+    const pieces = fillLabelPieces(template, values);
+    if (pieces.length === 0)
+        return null;
+    return typeof template === 'string' ? pieces[0] : pieces;
+}
+/**
+ * `renderLabel` for templates whose placeholders include elements (a link, a
  * button) rather than strings: `'Have an account? {trigger} – …'` with
- * `{ trigger: <button>…</button> }`. Text parts stay text; unknown
- * placeholders are left as written.
+ * `{ trigger: <button>…</button> }`. Each element sits in its own place; the
+ * text around it follows the label's form — a string's text runs stay whole
+ * between elements, an array's elements stay separate. String and number
+ * values join the text they sit in. Unknown placeholders are left as written.
  */
 export function labelParts(template, parts) {
-    const pieces = template.split(/(\{\w+\})/g);
-    return pieces.map((piece, index) => {
-        const match = /^\{(\w+)\}$/.exec(piece);
-        if (match && Object.hasOwn(parts, match[1])) {
-            // biome-ignore lint/suspicious/noArrayIndexKey: the pieces of a fixed template never reorder
-            return _jsx(Fragment, { children: parts[match[1]] }, index);
+    const pieces = typeof template === 'string' ? [template] : template;
+    const nodes = [];
+    for (const piece of pieces) {
+        let run = '';
+        for (const token of piece.split(/(\{\w+\})/g)) {
+            const name = /^\{(\w+)\}$/.exec(token)?.[1];
+            const value = name !== undefined && Object.hasOwn(parts, name) ? parts[name] : token;
+            if (typeof value === 'string' || typeof value === 'number') {
+                run += String(value);
+                continue;
+            }
+            if (run !== '')
+                nodes.push(run);
+            run = '';
+            nodes.push(_jsx(Fragment, { children: value }, nodes.length));
+        }
+        if (run !== '')
+            nodes.push(run);
+    }
+    return nodes;
+}
+/** A part as plain text, or `null` when it holds an element. */
+function partText(part) {
+    if (typeof part === 'string' || typeof part === 'number')
+        return String(part);
+    if (Array.isArray(part)) {
+        let text = '';
+        for (const piece of part) {
+            const pieceText = partText(piece);
+            if (pieceText === null)
+                return null;
+            text += pieceText;
+        }
+        return text;
+    }
+    return null;
+}
+/**
+ * `parts.filter(Boolean).join(separator)` as element children. Blank parts
+ * drop out, so an absent one closes the gap rather than leaving a doubled
+ * separator. Whether the line is one text node or one per part and separator
+ * follows the parts' own form (see `JoinLabelPartsOptions.pieces`): plain
+ * strings join into one, as `[a, b].join(' · ')` in JSX did.
+ */
+export function joinLabelParts(parts, separator, options = {}) {
+    // Blank = renders no text: nothing at all, or text pieces that are all empty.
+    const present = parts.filter((part) => part !== null && part !== undefined && typeof part !== 'boolean' && partText(part) !== '');
+    const pieces = options.pieces ?? present.some((part) => typeof part !== 'string' && typeof part !== 'number');
+    if (!pieces) {
+        const texts = present.map(partText);
+        if (texts.every((text) => text !== null)) {
+            const line = texts.join(separator);
+            return line === '' ? null : line;
         }
-        return piece;
-    });
+    }
+    return present.map((part, index) => (_jsxs(Fragment, { children: [index > 0 && separator, part] }, index)));
 }

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';
@@ -31,4 +32,4 @@ import { WHO_SCREEN_LABEL_KEYS } from './who-screen.js';
 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 type BookingLabels = Record<BookingLabelKey, BookingLabel>;

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[];