@medalsocial/meda 3.3.0 → 3.5.0

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;
@@ -144,7 +145,7 @@ function GuestChips({ choices, people, labels, classNames, onChoose, }) {
         }) }));
 }
 function CheckCircle({ checked }) {
-    return (_jsx("span", { "aria-hidden": "true", className: cn('flex size-6 shrink-0 items-center justify-center rounded-full border', checked ? 'border-primary bg-primary text-primary-foreground' : 'border-border'), children: checked && _jsx(Check, { className: "size-4" }) }));
+    return (_jsx("span", { "aria-hidden": "true", className: cn('flex size-6 shrink-0 items-center justify-center rounded-full border', checked ? 'border-primary bg-primary text-primary-foreground' : 'border-muted-foreground'), children: checked && _jsx(Check, { className: "size-4" }) }));
 }
 /** The default person card: an initial on a tinted avatar, the name, a line, a tick. */
 export function DefaultPersonCard({ name, line, index, selected, disabled, describedBy, onToggle, className, selectedClassName, }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medalsocial/meda",
-  "version": "3.3.0",
+  "version": "3.5.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`.