@medalsocial/meda 3.3.0 → 3.4.0

package/dist/booking/portal/rebook-cards.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { labelText } from '../labels.js';
 import { slotClass } from '../slots.js';
 export const REBOOK_CARDS_LABEL_KEYS = [
     'rebook.heading',
@@ -26,9 +27,9 @@ export function RebookCards({ suggestions, hrefFor, onRebook, labels, headingId
 /** One suggestion (an `<li>`): what · who for · with whom, and the book link. */
 export function DefaultRebookCard({ suggestion, href, onRebook, labels, classNames, }) {
     return (_jsxs("li", { className: slotClass(classNames, 'card', 'space-y-2 rounded-lg border border-border bg-card px-5 py-4'), children: [_jsx("p", { className: "font-semibold", children: [
-                    suggestion.serviceName ?? labels['rebook.serviceFallback'],
+                    suggestion.serviceName ?? labelText(labels['rebook.serviceFallback']),
                     suggestion.bookedForName,
-                    suggestion.resourceName ?? labels['rebook.anyStylist'],
+                    suggestion.resourceName ?? labelText(labels['rebook.anyStylist']),
                 ]
                     .filter(Boolean)
                     .join(SEPARATOR) }), _jsx("a", { href: href, onClick: onRebook ? () => onRebook(suggestion) : undefined, className: slotClass(classNames, 'link', 'text-sm font-semibold text-primary underline underline-offset-4'), children: labels['rebook.cta'] })] }));

package/dist/booking/portal/upcoming-bookings.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 { PortalBookingDto } from '../types.js';
 export declare const UPCOMING_BOOKINGS_LABEL_KEYS: readonly ["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"];
@@ -9,7 +10,7 @@ export declare const UPCOMING_BOOKINGS_LABEL_KEYS: readonly ["upcoming.heading",
  * `upcoming.noManageWithPhone` `{call}` (where the `upcoming.call` link goes),
  * `upcoming.call` `{phone}`.
  */
-export type UpcomingBookingsLabels = Record<(typeof UPCOMING_BOOKINGS_LABEL_KEYS)[number], string>;
+export type UpcomingBookingsLabels = Record<(typeof UPCOMING_BOOKINGS_LABEL_KEYS)[number], BookingLabel>;
 /**
  * - `root`: the section. - `heading`. - `empty`: the no-bookings box.
  * - `list`. - `card`: a plain card; `cardHero`: the first (next) one.

package/dist/booking/portal/upcoming-bookings.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../lib/utils.js';
 import { joinLabelParts, labelParts, renderLabel } from '../internal/label-parts.js';
 import { bookingButtonClass } from '../internal/ui.js';
-import { fillLabel } from '../labels.js';
+import { fillLabel, labelText } from '../labels.js';
 import { slotClass } from '../slots.js';
 export const UPCOMING_BOOKINGS_LABEL_KEYS = [
     'upcoming.heading',
@@ -29,9 +29,9 @@ const SEPARATOR = ' · ';
 function howFarOff(startTs, now, labels, format) {
     const days = format.clock.daysBetween(now, startTs);
     if (days <= 0)
-        return labels['upcoming.today'];
+        return labelText(labels['upcoming.today']);
     if (days === 1)
-        return labels['upcoming.tomorrow'];
+        return labelText(labels['upcoming.tomorrow']);
     return fillLabel(labels['upcoming.inDays'], { count: days });
 }
 /** What is booked and who for. */

package/dist/booking/portal/vipps-link-row.d.ts

@@ -1,6 +1,7 @@
+import { type BookingLabel } from '../labels.js';
 import { type SlotClassNames } from '../slots.js';
 export declare const VIPPS_LINK_ROW_LABEL_KEYS: readonly ["vippsLink.heading", "vippsLink.linked", "vippsLink.pitch", "vippsLink.button", "vippsLink.success", "vippsLink.conflict", "vippsLink.failed", "vippsLink.unavailable", "vippsLink.throttled"];
-export type VippsLinkRowLabels = Record<(typeof VIPPS_LINK_ROW_LABEL_KEYS)[number], string>;
+export type VippsLinkRowLabels = Record<(typeof VIPPS_LINK_ROW_LABEL_KEYS)[number], BookingLabel>;
 /** `root` (the section), `card` (the bordered row), `heading`, `button`, `notice` (the live line). */
 export type VippsLinkRowSlot = 'root' | 'card' | 'heading' | 'button' | 'notice';
 /** The outcome of a link attempt that just returned, as the server recorded it. */

package/dist/booking/portal/vipps-link-row.js

@@ -4,6 +4,7 @@ import { useActionState, useEffect, useId, useRef } from 'react';
 import { useFormStatus } from 'react-dom';
 import { cn } from '../../lib/utils.js';
 import { BookingButton } from '../internal/ui.js';
+import { labelText } from '../labels.js';
 import { slotClass } from '../slots.js';
 export const VIPPS_LINK_ROW_LABEL_KEYS = [
     'vippsLink.heading',
@@ -23,17 +24,17 @@ function LinkButton({ label, className }) {
 /** The sentence under the row: a failed start first, else what the return said. */
 function noticeFor(state, isLinked, flash, labels, announceSuccess) {
     if (state?.reason === 'unavailable')
-        return labels['vippsLink.unavailable'];
+        return labelText(labels['vippsLink.unavailable']);
     if (state?.reason === 'throttled')
-        return labels['vippsLink.throttled'];
+        return labelText(labels['vippsLink.throttled']);
     if (flash === 'linked' && announceSuccess)
-        return labels['vippsLink.success'];
+        return labelText(labels['vippsLink.success']);
     if (isLinked)
         return null;
     if (flash === 'link_conflict')
-        return labels['vippsLink.conflict'];
+        return labelText(labels['vippsLink.conflict']);
     if (flash === 'link_failed')
-        return labels['vippsLink.failed'];
+        return labelText(labels['vippsLink.failed']);
     return null;
 }
 /**
@@ -76,5 +77,5 @@ export function VippsLinkRow({ labels, linked, flash, onStart, onSessionExpired,
     const sentence = noticeFor(state, linked, flash, labels, announceSuccess);
     const headingId = `${id}-heading`;
     const noticeId = `${id}-notice`;
-    return (_jsxs("section", { "aria-labelledby": headingId, className: slotClass(classNames, 'root', 'space-y-2'), children: [_jsxs("div", { className: slotClass(classNames, 'card', 'flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border bg-card px-5 py-4'), children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h2", { id: headingId, className: slotClass(classNames, 'heading', 'font-semibold'), children: labels['vippsLink.heading'] }), _jsx("p", { className: "text-sm text-muted-foreground", children: linked ? labels['vippsLink.linked'] : labels['vippsLink.pitch'] })] }), !linked && (_jsx("form", { action: formAction, "aria-describedby": sentence ? noticeId : undefined, children: _jsx(LinkButton, { label: labels['vippsLink.button'], className: classNames?.button }) }))] }), _jsx("div", { "aria-live": "polite", className: slotClass(classNames, 'notice', 'min-h-5'), children: sentence && (_jsx("p", { id: noticeId, className: "text-sm text-muted-foreground", children: sentence })) })] }));
+    return (_jsxs("section", { "aria-labelledby": headingId, className: slotClass(classNames, 'root', 'space-y-2'), children: [_jsxs("div", { className: slotClass(classNames, 'card', 'flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border bg-card px-5 py-4'), children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h2", { id: headingId, className: slotClass(classNames, 'heading', 'font-semibold'), children: labels['vippsLink.heading'] }), _jsx("p", { className: "text-sm text-muted-foreground", children: linked ? labels['vippsLink.linked'] : labels['vippsLink.pitch'] })] }), !linked && (_jsx("form", { action: formAction, "aria-describedby": sentence ? noticeId : undefined, children: _jsx(LinkButton, { label: labelText(labels['vippsLink.button']), className: classNames?.button }) }))] }), _jsx("div", { "aria-live": "polite", className: slotClass(classNames, 'notice', 'min-h-5'), children: sentence && (_jsx("p", { id: noticeId, className: "text-sm text-muted-foreground", children: sentence })) })] }));
 }

package/dist/booking/portal/visit-history.d.ts

@@ -1,10 +1,11 @@
 import { type ComponentType } from 'react';
 import type { BookingClock, BookingFormat } from '../format.js';
+import type { BookingLabel } from '../labels.js';
 import { type SlotClassNames } from '../slots.js';
 import type { PortalBookingDto } from '../types.js';
 export declare const VISIT_HISTORY_LABEL_KEYS: readonly ["history.heading", "history.empty", "history.serviceFallback", "history.count.one", "history.count.other", "history.unknownAmount"];
 /** `history.count.*` take `{count}` and `{year}`. */
-export type VisitHistoryLabels = Record<(typeof VISIT_HISTORY_LABEL_KEYS)[number], string>;
+export type VisitHistoryLabels = Record<(typeof VISIT_HISTORY_LABEL_KEYS)[number], BookingLabel>;
 /**
  * - `root`: the section. - `heading`. - `empty`: the no-visits box.
  * - `yearChip` / `yearChipSelected`: the year switcher's buttons.

package/dist/booking/service-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 { BookingServiceDto } from './types.js';
 /**
@@ -10,7 +11,7 @@ import type { BookingServiceDto } from './types.js';
  * already holds a child.
  */
 export declare const SERVICE_SCREEN_LABEL_KEYS: readonly ["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"];
-export type ServiceScreenLabels = Record<(typeof SERVICE_SCREEN_LABEL_KEYS)[number], string>;
+export type ServiceScreenLabels = Record<(typeof SERVICE_SCREEN_LABEL_KEYS)[number], BookingLabel>;
 /**
  * - `root` — the `<section>`
  * - `heading` — the `<h2>`

package/dist/booking/service-screen.js

@@ -4,7 +4,7 @@ import { 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';
 /**
  * The service step — what should be done?
@@ -37,7 +37,7 @@ const asIs = (name) => name;
 /** The age divider's sentence for `name`. */
 function ageDividerLabel(labels, name, possessive) {
     if (!name)
-        return labels['service.ageDivider.unnamed'];
+        return labelText(labels['service.ageDivider.unnamed']);
     return fillLabel(labels['service.ageDivider.named'], {
         name,
         nameGenitive: possessive(name),

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

@@ -1,5 +1,6 @@
 import { type ComponentType, type Ref } from 'react';
 import type { BookingFormat } from './format.js';
+import { type BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 import type { BookingResourceDto, PartyMode } from './types.js';
 /**
@@ -20,7 +21,7 @@ import type { BookingResourceDto, PartyMode } from './types.js';
  * available» included. Arrow keys move and choose, Tab enters and leaves once.
  */
 export declare const STYLIST_SCREEN_LABEL_KEYS: readonly ["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"];
-export type StylistScreenLabels = Record<(typeof STYLIST_SCREEN_LABEL_KEYS)[number], string>;
+export type StylistScreenLabels = Record<(typeof STYLIST_SCREEN_LABEL_KEYS)[number], BookingLabel>;
 /**
  * - `root` — the `<section>`
  * - `heading` — the `<h2>`

package/dist/booking/stylist-screen.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, } from 'react';
 import { cn } from '../lib/utils.js';
 import { renderLabel } from './internal/label-parts.js';
+import { labelText } from './labels.js';
 import { LiveStatus } from './live-status.js';
 import { slotClass } from './slots.js';
 /**
@@ -83,10 +84,10 @@ export function StylistScreen({ labels, format, now, serviceIds, resources, sele
     const options = [
         {
             resourceId: null,
-            name: labels['stylist.firstAvailable'],
-            shortName: labels['stylist.firstAvailable'],
-            subtitle: labels['stylist.firstAvailableSubtitle'],
-            badge: labels['stylist.firstAvailableBadge'],
+            name: labelText(labels['stylist.firstAvailable']),
+            shortName: labelText(labels['stylist.firstAvailable']),
+            subtitle: labelText(labels['stylist.firstAvailableSubtitle']),
+            badge: labelText(labels['stylist.firstAvailableBadge']),
         },
         ...(loading
             ? held
@@ -113,7 +114,7 @@ export function StylistScreen({ labels, format, now, serviceIds, resources, sele
                         }), classNames: classNames })] })), party?.mode === 'parallel' ? (_jsx("p", { className: "rounded-lg border border-border bg-card px-5 py-4 text-sm", children: bySize(labels, 'stylist.party.parallelNote', party.size, party.sizeWord) })) : (_jsx(StylistRadioGroup, { options: options, selectedResourceId: selectedResourceId, 
                 // The held option takes one placeholder's place, so the row is
                 // exactly as long as it was and nothing after it moves.
-                skeletons: loading ? Math.max(0, skeletonCount - (options.length - 1)) : 0, busy: loading, onPick: onPick, labels: labels, classNames: classNames, Card: components?.StylistCard ?? DefaultStylistCard })), _jsx(LiveStatus, { text: loading ? labels['stylist.loading'] : notice })] }));
+                skeletons: loading ? Math.max(0, skeletonCount - (options.length - 1)) : 0, busy: loading, onPick: onPick, labels: labels, classNames: classNames, Card: components?.StylistCard ?? DefaultStylistCard })), _jsx(LiveStatus, { text: loading ? labelText(labels['stylist.loading']) : notice })] }));
 }
 /**
  * The options as one radiogroup with a roving tab stop.
@@ -183,7 +184,7 @@ function StylistRadioGroup({ options, selectedResourceId, skeletons, busy, onPic
  * with its next-opening row pulsing like every card still waiting for one. */
 function pendingOption(resourceId, pendingName, labels, format) {
     const known = pendingName?.trim() ? pendingName.trim() : null;
-    const name = known ?? labels['stylist.pendingName'];
+    const name = known ?? labelText(labels['stylist.pendingName']);
     return {
         resourceId,
         name,

package/dist/booking/summary-bar.d.ts

@@ -1,3 +1,4 @@
+import type { BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 import type { WizardStep } from './types.js';
 /**
@@ -9,7 +10,7 @@ import type { WizardStep } from './types.js';
  * wizard it summarises.
  */
 export declare const SUMMARY_BAR_LABEL_KEYS: readonly ["summary.placeholder.who", "summary.placeholder.service", "summary.next"];
-export type SummaryBarLabels = Record<(typeof SUMMARY_BAR_LABEL_KEYS)[number], string>;
+export type SummaryBarLabels = Record<(typeof SUMMARY_BAR_LABEL_KEYS)[number], BookingLabel>;
 /** `root` the bar, `line` the summary sentence, `next` the button. */
 export type SummaryBarSlot = 'root' | 'line' | 'next';
 export interface SummaryBarProps {

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

@@ -1,5 +1,6 @@
 import { type ComponentType } from 'react';
 import type { BookingDaypart, BookingFormat } from './format.js';
+import { type BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 import type { BookingDayDto, BookingSlotDto, PartySlot, WizardItem } from './types.js';
 /**
@@ -26,7 +27,7 @@ export declare const TIME_SCREEN_LABEL_KEYS: readonly ["time.heading", "time.day
  *   finishes (end them with the dash); `closed` and `over` are whole sentences.
  * - `time.empty.callLink|callLinkAria` `{phone}`
  */
-export type TimeScreenLabels = Record<(typeof TIME_SCREEN_LABEL_KEYS)[number], string>;
+export type TimeScreenLabels = Record<(typeof TIME_SCREEN_LABEL_KEYS)[number], BookingLabel>;
 /**
  * `classNames` slots:
  * - `root` the section · `heading` the h2

package/dist/booking/time-screen.js

@@ -5,7 +5,7 @@ import { useEffect, useState } from 'react';
 import { cn } from '../lib/utils.js';
 import { renderLabel } from './internal/label-parts.js';
 import { BookingButton, bookingButtonClass } from './internal/ui.js';
-import { fillLabel } from './labels.js';
+import { fillLabel, labelText } from './labels.js';
 import { LiveStatus } from './live-status.js';
 import { slotClass } from './slots.js';
 /**
@@ -130,7 +130,7 @@ function partyChipLabel(labels, clock, slot, party) {
     });
     return fillLabel(labels['time.party.parallel'], {
         time: clock.formatTime(slot.startTs),
-        seats: seats.join(labels['time.party.seatSeparator']),
+        seats: seats.join(labelText(labels['time.party.seatSeparator'])),
     });
 }
 /**
@@ -283,7 +283,7 @@ export function TakenToast({ labels, takenSlotTs, className }) {
     }, [takenSlotTs]);
     return (_jsx("div", { role: "status", "aria-live": "polite", className: shown
             ? cn('fixed inset-x-4 bottom-24 z-50 mx-auto flex max-w-md items-center gap-3 rounded-lg border border-secondary/40 bg-background px-5 py-3 text-sm shadow-lg', className)
-            : 'sr-only', children: shown && (_jsxs(_Fragment, { children: [_jsx("p", { className: "flex-1", children: labels['time.taken.message'] }), _jsx("button", { type: "button", "aria-label": labels['time.taken.close'], onClick: () => setShown(false), className: "flex size-8 shrink-0 items-center justify-center rounded-full hover:bg-muted", children: _jsx(X, { "aria-hidden": "true", className: "size-4" }) })] })) }));
+            : 'sr-only', children: shown && (_jsxs(_Fragment, { children: [_jsx("p", { className: "flex-1", children: labels['time.taken.message'] }), _jsx("button", { type: "button", "aria-label": labelText(labels['time.taken.close']), onClick: () => setShown(false), className: "flex size-8 shrink-0 items-center justify-center rounded-full hover:bg-muted", children: _jsx(X, { "aria-hidden": "true", className: "size-4" }) })] })) }));
 }
 /**
  * The time step before its openings are in: the same heading, a strip of day
@@ -301,7 +301,7 @@ export function TimeScreenSkeleton({ labels, days = 7, monthView = false, surcha
         size: 'lg',
         className: 'min-w-20 animate-pulse border-border bg-muted text-transparent',
     });
-    return (_jsxs("section", { "aria-labelledby": "booking-time-heading", className: cn('space-y-6', className), children: [_jsx(TimeHeading, { labels: labels }), _jsx(LiveStatus, { text: labels['time.loading'] }), _jsxs("div", { "aria-hidden": "true", className: "space-y-6", children: [_jsx("div", { className: "flex flex-wrap gap-2", children: Array.from({ length: days }, (_, index) => (_jsx("span", { "data-testid": "day-chip-skeleton", className: dayChip, children: labels['time.skeleton.dayPlaceholder'] }, index))) }), monthView && _jsx("span", { className: "block h-8 w-36 animate-pulse rounded bg-muted" }), surchargeRow && _jsx("span", { "data-testid": "surcharge-row-skeleton", className: "block min-h-5" }), _jsxs("div", { className: "space-y-3", children: [_jsx("span", { className: "block h-7 w-32 animate-pulse rounded bg-muted" }), _jsx("div", { className: "flex flex-wrap gap-2", children: Array.from({ length: 8 }, (_, index) => (_jsx("span", { "data-testid": "slot-skeleton", className: slotChip, children: "00:00" }, index))) })] })] })] }));
+    return (_jsxs("section", { "aria-labelledby": "booking-time-heading", className: cn('space-y-6', className), children: [_jsx(TimeHeading, { labels: labels }), _jsx(LiveStatus, { text: labelText(labels['time.loading']) }), _jsxs("div", { "aria-hidden": "true", className: "space-y-6", children: [_jsx("div", { className: "flex flex-wrap gap-2", children: Array.from({ length: days }, (_, index) => (_jsx("span", { "data-testid": "day-chip-skeleton", className: dayChip, children: labels['time.skeleton.dayPlaceholder'] }, index))) }), monthView && _jsx("span", { className: "block h-8 w-36 animate-pulse rounded bg-muted" }), surchargeRow && _jsx("span", { "data-testid": "surcharge-row-skeleton", className: "block min-h-5" }), _jsxs("div", { className: "space-y-3", children: [_jsx("span", { className: "block h-7 w-32 animate-pulse rounded bg-muted" }), _jsx("div", { className: "flex flex-wrap gap-2", children: Array.from({ length: 8 }, (_, index) => (_jsx("span", { "data-testid": "slot-skeleton", className: slotChip, children: "00:00" }, index))) })] })] })] }));
 }
 // ---------------------------------------------------------------------------
 // Month view
@@ -323,7 +323,7 @@ function MonthCalendar({ labels, clock, open, onToggle, monthTs, onMonth, strip,
         year,
     });
     const selectedKey = clock.dayKey(selectedDay);
-    return (_jsxs("div", { className: slotClass(classNames, 'month', 'space-y-3'), children: [_jsxs(BookingButton, { variant: "link", size: "sm", "aria-expanded": open, onClick: onToggle, className: "px-0", children: [open ? labels['time.month.hide'] : labels['time.month.show'], open ? (_jsx(ChevronUp, { "aria-hidden": "true", className: "size-4" })) : (_jsx(ChevronDown, { "aria-hidden": "true", className: "size-4" }))] }), open && (_jsxs("div", { className: "space-y-3 rounded-lg border border-border bg-card px-4 py-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(BookingButton, { variant: "outline", size: "icon", "aria-label": labels['time.month.previous'], onClick: () => onMonth(clock.dayStart(firstOfMonth, -1)), className: "rounded-full", children: _jsx(ChevronLeft, { "aria-hidden": "true", className: "size-4" }) }), _jsx("p", { "aria-live": "polite", className: "font-sans font-bold", children: heading }), _jsx(BookingButton, { variant: "outline", size: "icon", "aria-label": labels['time.month.next'], onClick: () => onMonth(clock.dayStart(firstOfMonth, daysInMonth(year, month))), className: "rounded-full", children: _jsx(ChevronRight, { "aria-hidden": "true", className: "size-4" }) })] }), _jsx("div", { "aria-hidden": "true", className: "grid grid-cols-7 gap-1 text-center", children: clock.weekdayHeads().map((head, index) => (_jsx("span", { className: "text-xs font-bold text-muted-foreground", children: head }, index))) }), _jsx("div", { className: "grid grid-cols-7 gap-1", children: cells.map((cell, index) => {
+    return (_jsxs("div", { className: slotClass(classNames, 'month', 'space-y-3'), children: [_jsxs(BookingButton, { variant: "link", size: "sm", "aria-expanded": open, onClick: onToggle, className: "px-0", children: [open ? labels['time.month.hide'] : labels['time.month.show'], open ? (_jsx(ChevronUp, { "aria-hidden": "true", className: "size-4" })) : (_jsx(ChevronDown, { "aria-hidden": "true", className: "size-4" }))] }), open && (_jsxs("div", { className: "space-y-3 rounded-lg border border-border bg-card px-4 py-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(BookingButton, { variant: "outline", size: "icon", "aria-label": labelText(labels['time.month.previous']), onClick: () => onMonth(clock.dayStart(firstOfMonth, -1)), className: "rounded-full", children: _jsx(ChevronLeft, { "aria-hidden": "true", className: "size-4" }) }), _jsx("p", { "aria-live": "polite", className: "font-sans font-bold", children: heading }), _jsx(BookingButton, { variant: "outline", size: "icon", "aria-label": labelText(labels['time.month.next']), onClick: () => onMonth(clock.dayStart(firstOfMonth, daysInMonth(year, month))), className: "rounded-full", children: _jsx(ChevronRight, { "aria-hidden": "true", className: "size-4" }) })] }), _jsx("div", { "aria-hidden": "true", className: "grid grid-cols-7 gap-1 text-center", children: clock.weekdayHeads().map((head, index) => (_jsx("span", { className: "text-xs font-bold text-muted-foreground", children: head }, index))) }), _jsx("div", { className: "grid grid-cols-7 gap-1", children: cells.map((cell, index) => {
                             if (cell === null) {
                                 // The blanks before the first of the month; the position is
                                 // the only thing that tells them apart.
@@ -366,7 +366,7 @@ function DaypartSections({ labels, clock, dayparts, daySlots, nearest, currentSl
                         else if (partySlot && party) {
                             label = partyChipLabel(labels, clock, partySlot, party);
                         }
-                        return (_jsx(TimeChip, { startTs: slot.startTs, label: label, nearest: isNearest, nearestLabel: labels['time.nearest'], current: current, onPick: () => (partySlot && party ? party.onPick(partySlot) : onPick(slot)), className: cn('min-w-20 tabular-nums', isNearest ? 'border-primary ring-2 ring-primary' : '', classNames?.chip, isNearest ? classNames?.chipNearest : undefined, current ? classNames?.chipCurrent : undefined) }, slot.startTs));
+                        return (_jsx(TimeChip, { startTs: slot.startTs, label: label, nearest: isNearest, nearestLabel: labelText(labels['time.nearest']), current: current, onPick: () => (partySlot && party ? party.onPick(partySlot) : onPick(slot)), className: cn('min-w-20 tabular-nums', isNearest ? 'border-primary ring-2 ring-primary' : '', classNames?.chip, isNearest ? classNames?.chipNearest : undefined, current ? classNames?.chipCurrent : undefined) }, slot.startTs));
                     }) })] }, daypart.key));
     });
 }

package/dist/booking/vipps-button.d.ts

@@ -1,6 +1,7 @@
+import { type BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 export declare const VIPPS_BUTTON_LABEL_KEYS: readonly ["vipps.button", "vipps.unavailable", "vipps.throttled"];
-export type VippsButtonLabels = Record<(typeof VIPPS_BUTTON_LABEL_KEYS)[number], string>;
+export type VippsButtonLabels = Record<(typeof VIPPS_BUTTON_LABEL_KEYS)[number], BookingLabel>;
 /** Why a Vipps start did NOT end in a redirect. `null` is silence. */
 export type VippsStartState = {
     ok: false;

package/dist/booking/vipps-button.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useActionState, useId } from 'react';
 import { useFormStatus } from 'react-dom';
 import { bookingButtonClass } from './internal/ui.js';
+import { labelText } from './labels.js';
 import { slotClass } from './slots.js';
 export const VIPPS_BUTTON_LABEL_KEYS = [
     'vipps.button',
@@ -26,7 +27,7 @@ export function VippsButton({ onVipps, next = null, label, labels, classNames })
     const [state, formAction] = useActionState(onVipps, null);
     const noticeId = `${useId()}-notice`;
     const notice = state === null ? null : labels[`vipps.${state.reason}`];
-    return (_jsxs("form", { action: formAction, className: slotClass(classNames, 'root', 'space-y-3'), "aria-describedby": notice ? noticeId : undefined, children: [next && _jsx("input", { type: "hidden", name: "next", value: next }), _jsx(SubmitButton, { label: label ?? labels['vipps.button'], className: bookingButtonClass({
+    return (_jsxs("form", { action: formAction, className: slotClass(classNames, 'root', 'space-y-3'), "aria-describedby": notice ? noticeId : undefined, children: [next && _jsx("input", { type: "hidden", name: "next", value: next }), _jsx(SubmitButton, { label: label ?? labelText(labels['vipps.button']), className: bookingButtonClass({
                     size: 'lg',
                     className: slotClass(classNames, 'button', 'w-full rounded-full bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring/40'),
                 }) }), _jsx("div", { "aria-live": "polite", children: notice && (_jsx("p", { id: noticeId, className: slotClass(classNames, 'notice', 'text-sm text-muted-foreground'), children: notice })) })] }));

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

@@ -1,6 +1,7 @@
 import { type ComponentType, type ReactNode } from 'react';
 import { type AddChildSheetLabels } from './add-child-sheet.js';
 import type { BookingFormat } from './format.js';
+import { type BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
 import type { NewChild, SaveResult, WizardPerson } from './types.js';
 /**
@@ -35,7 +36,7 @@ import type { NewChild, SaveResult, WizardPerson } from './types.js';
  * from the sheet, grows the list by whole rows and moves nothing sideways.
  */
 export declare const WHO_SCREEN_LABEL_KEYS: readonly ["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", "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 WhoScreenLabels = Record<(typeof WHO_SCREEN_LABEL_KEYS)[number], string> & AddChildSheetLabels;
+export type WhoScreenLabels = Record<(typeof WHO_SCREEN_LABEL_KEYS)[number], BookingLabel> & AddChildSheetLabels;
 /**
  * - `root` — the `<section>`
  * - `heading` — the `<h2>`

package/dist/booking/who-screen.js

@@ -5,6 +5,7 @@ import { useRef } from 'react';
 import { cn } from '../lib/utils.js';
 import { ADD_CHILD_SHEET_LABEL_KEYS, AddChildSheet, } from './add-child-sheet.js';
 import { renderLabel } from './internal/label-parts.js';
+import { labelText } from './labels.js';
 import { slotClass } from './slots.js';
 /**
  * The first step — who is the visit for?
@@ -85,7 +86,7 @@ export function WhoScreen({ labels, format, people, family, guestChoices, addedC
         selectedClassName: classNames?.cardSelected,
     };
     if (family === null) {
-        return (_jsxs("section", { "aria-labelledby": HEADING_ID, className: slotClass(classNames, 'root', 'space-y-6'), children: [heading, loginRow, _jsxs("div", { className: "space-y-4", children: [_jsx(GuestChips, { choices: guestChoices, people: people, labels: labels, classNames: classNames, onChoose: onChoose }), addedChildren.length > 0 && (_jsx("ul", { "aria-label": labels['who.guest.addedList'], className: "space-y-2", children: addedChildren.map((entry, index) => (_jsx("li", { children: _jsx(PersonCard, { name: entry.person.name ?? '', line: entry.line, index: index, selected: true, disabled: false, onToggle: () => onChoose(people.filter((other) => other.key !== entry.person.key), false), ...cardClasses }) }, entry.person.key))) })), sheet(addedChildren.length >= maxPeople, false)] })] }));
+        return (_jsxs("section", { "aria-labelledby": HEADING_ID, className: slotClass(classNames, 'root', 'space-y-6'), children: [heading, loginRow, _jsxs("div", { className: "space-y-4", children: [_jsx(GuestChips, { choices: guestChoices, people: people, labels: labels, classNames: classNames, onChoose: onChoose }), addedChildren.length > 0 && (_jsx("ul", { "aria-label": labelText(labels['who.guest.addedList']), className: "space-y-2", children: addedChildren.map((entry, index) => (_jsx("li", { children: _jsx(PersonCard, { name: entry.person.name ?? '', line: entry.line, index: index, selected: true, disabled: false, onToggle: () => onChoose(people.filter((other) => other.key !== entry.person.key), false), ...cardClasses }) }, entry.person.key))) })), sheet(addedChildren.length >= maxPeople, false)] })] }));
     }
     // Defensively only what this picker draws: the caller clears guest seats
     // when the family appears, and a seat nobody can see must never count
@@ -134,7 +135,7 @@ function GuestChips({ choices, people, labels, classNames, onChoose, }) {
         event.preventDefault();
         refs.current[target]?.focus();
     }
-    return (_jsx("div", { role: "radiogroup", "aria-label": labels['who.guest.groupLabel'], className: "grid grid-cols-2 gap-2 sm:grid-cols-4", children: choices.map((choice, index) => {
+    return (_jsx("div", { role: "radiogroup", "aria-label": labelText(labels['who.guest.groupLabel']), className: "grid grid-cols-2 gap-2 sm:grid-cols-4", children: choices.map((choice, index) => {
             const pressed = index === checked;
             return (_jsx("button", { ref: (element) => {
                     refs.current[index] = element;

package/package.json

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

package/skills/components/SKILL.md

@@ -156,6 +156,10 @@ same wizard / manage page / portal. Rules when editing or adding one:
 - **No copy, no clock.** Every string is a `labels` key (`'<screen>.<thing>'`, declared in
   the screen's `*_LABEL_KEYS` array and rolled up in `label-keys.ts`); every date / price
   goes through the `format: BookingFormat` prop — never `Date` getters or `Intl`.
+- **Labels render in the pack's own pieces.** A label is `string | readonly string[]`:
+  render it as children through `renderLabel` (string → one text node, array → one per
+  element) and as text (`aria-label`, messages) through `fillLabel` / `labelText`. Never
+  split a string label at its `{placeholders}`; test both forms (`childNodes`).
 - **Colours through the bridge only** (`bg-primary`, `text-muted-foreground`, …).
   `pnpm lint:tokens` rejects palette colours (`bg-white`, `text-green-600`) and arbitrary
   colour values in `src/booking`.