@sankhyatronics/sankhya-cms 0.2.0 → 0.3.0

package/dist/chunk-DPANTC3O.js

@@ -0,0 +1,1714 @@
+import {
+  codePointLength,
+  fillTemplate,
+  parseRetryAfter
+} from "./chunk-CZUGPKXV.js";
+import {
+  controlBaseStyles,
+  fontFamilyStyles
+} from "./chunk-NXUS2CH7.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/booking/Booking.ts
+import { LitElement, css, html, nothing, svg } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+// src/booking/BookingEvents.ts
+var BOOKING_CREATED_EVENT = "st-booking-created";
+var BOOKING_RESCHEDULED_EVENT = "st-booking-rescheduled";
+var BOOKING_CANCELLED_EVENT = "st-booking-cancelled";
+var BOOKING_ERROR_EVENT = "st-booking-error";
+
+// src/booking/booking-client.ts
+var BOOKING_FIELD_NAMES = ["name", "email", "phone", "notes", "consent"];
+var BOOKING_LIMITS = { nameMax: 100, emailMax: 254, phoneMax: 30, notesMax: 1e3 };
+var BOOKING_TIMEOUT_MS = 15e3;
+var MAX_AVAILABILITY_MS = 31 * 24 * 36e5 - 36e5;
+var MAX_MONTH_LOOKAHEAD = 3;
+var EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+var PHONE_PATTERN = /^[0-9 +\-().]+$/;
+var REFERENCE_MAX_LENGTH = 2048;
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function str(value) {
+  return typeof value === "string" ? value : "";
+}
+function validInstant(value) {
+  return typeof value === "string" && !Number.isNaN(Date.parse(value));
+}
+function parseServices(input) {
+  if (!Array.isArray(input)) return [];
+  const services = [];
+  for (const item of input) {
+    if (!isPlainObject(item)) continue;
+    const id = str(item.id).trim();
+    const name = str(item.name).trim();
+    if (id === "" || name === "") continue;
+    const staff = [];
+    if (Array.isArray(item.staff)) {
+      for (const member of item.staff) {
+        if (isPlainObject(member) && str(member.id).trim() !== "" && str(member.name).trim() !== "") {
+          staff.push({ id: str(member.id).trim(), name: str(member.name).trim() });
+        }
+      }
+    }
+    const minutes = typeof item.durationMinutes === "number" && item.durationMinutes > 0 ? Math.round(item.durationMinutes) : 0;
+    services.push({ id, name, description: str(item.description).trim(), durationMinutes: minutes, online: item.online === true, staff });
+  }
+  return services;
+}
+function parseSlots(input) {
+  if (!Array.isArray(input)) return [];
+  const slots = [];
+  for (const item of input) {
+    if (!isPlainObject(item) || !validInstant(item.start) || !validInstant(item.end)) continue;
+    const staffIds = Array.isArray(item.staffIds) ? item.staffIds.filter((id) => typeof id === "string") : [];
+    slots.push({ start: item.start, end: item.end, staffIds });
+  }
+  return slots.sort((a, b) => Date.parse(a.start) - Date.parse(b.start));
+}
+function parseBooking(input) {
+  if (!isPlainObject(input)) return void 0;
+  const reference = str(input.reference).trim();
+  if (reference === "" || reference.length > REFERENCE_MAX_LENGTH || !validInstant(input.start) || !validInstant(input.end)) return void 0;
+  return { reference, serviceId: str(input.serviceId), serviceName: str(input.serviceName), start: input.start, end: input.end };
+}
+var DEFAULT_BOOKING_ERROR_MESSAGES = {
+  required: "{field} is required.",
+  tooLong: "{field} must be {max} characters or fewer.",
+  invalidEmail: "Enter a valid email address.",
+  invalidPhone: "Use only digits, spaces and + - ( ) . in the phone number.",
+  consentRequired: "Please accept to continue."
+};
+function validateBooking(values, labels, messages) {
+  const errors = {};
+  const name = values.name.trim();
+  const email = values.email.trim();
+  const phone = values.phone.trim();
+  const notes = values.notes.trim();
+  const required = (field) => fillTemplate(messages.required, { field: labels[field] });
+  const tooLong = (field, max) => fillTemplate(messages.tooLong, { field: labels[field], max });
+  if (name === "") errors.name = required("name");
+  else if (codePointLength(name) > BOOKING_LIMITS.nameMax) errors.name = tooLong("name", BOOKING_LIMITS.nameMax);
+  if (email === "") errors.email = required("email");
+  else if (codePointLength(email) > BOOKING_LIMITS.emailMax) errors.email = tooLong("email", BOOKING_LIMITS.emailMax);
+  else if (!EMAIL_PATTERN.test(email)) errors.email = messages.invalidEmail;
+  if (phone !== "") {
+    if (codePointLength(phone) > BOOKING_LIMITS.phoneMax) errors.phone = tooLong("phone", BOOKING_LIMITS.phoneMax);
+    else if (!PHONE_PATTERN.test(phone)) errors.phone = messages.invalidPhone;
+  }
+  if (codePointLength(notes) > BOOKING_LIMITS.notesMax) errors.notes = tooLong("notes", BOOKING_LIMITS.notesMax);
+  if (!values.consent) errors.consent = messages.consentRequired;
+  return errors;
+}
+function firstInvalidBookingField(errors) {
+  return BOOKING_FIELD_NAMES.find((name) => errors[name] !== void 0);
+}
+function buildBookingPayload(values, choice) {
+  if (!values.consent) throw new Error("A booking needs consent.");
+  const payload = {
+    serviceId: choice.serviceId,
+    start: choice.start,
+    name: values.name.trim(),
+    email: values.email.trim(),
+    phone: values.phone.trim(),
+    notes: values.notes.trim(),
+    consent: true,
+    website: values.website ?? ""
+  };
+  if (choice.staffId) payload.staffId = choice.staffId;
+  return payload;
+}
+function parseJsonObject(text) {
+  try {
+    const value = JSON.parse(text);
+    return isPlainObject(value) ? value : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function interpretBookingResponse(status, retryAfter, bodyText, readOk) {
+  if (status === 429) {
+    const retryAfterSeconds = parseRetryAfter(retryAfter);
+    return retryAfterSeconds === void 0 ? { kind: "rate_limited" } : { kind: "rate_limited", retryAfterSeconds };
+  }
+  const body = parseJsonObject(bodyText);
+  if (!body) return { kind: "unavailable" };
+  if (status >= 200 && status < 300) {
+    if (body.ok !== true) return { kind: "unavailable" };
+    const data = readOk(body);
+    return data === void 0 ? { kind: "unavailable" } : { kind: "ok", data };
+  }
+  if (status === 400 && body.error === "validation" && isPlainObject(body.errors)) {
+    const errors = {};
+    for (const [key, message] of Object.entries(body.errors)) {
+      if (typeof message === "string" && message.trim() !== "") errors[key] = message;
+    }
+    return Object.keys(errors).length > 0 ? { kind: "validation", errors } : { kind: "unavailable" };
+  }
+  if (status === 409 && body.error === "slot_taken") return { kind: "slot_taken" };
+  if (status === 409 && body.error === "too_late") return { kind: "too_late" };
+  if (status === 404 && body.error === "not_found") return { kind: "not_found" };
+  return { kind: "unavailable" };
+}
+function isCallableBase(base) {
+  if (base.trim() === "") return false;
+  try {
+    const url = new URL(base);
+    return url.protocol === "https:" || url.protocol === "http:";
+  } catch {
+    return false;
+  }
+}
+function bookingUrl(base, path) {
+  return `${base.trim().replace(/\/+$/, "")}/public/v1/bookings${path}`;
+}
+function appointmentPath(reference, suffix = "") {
+  return `/appointments/${encodeURIComponent(reference)}${suffix}`;
+}
+async function callBookings(call) {
+  const { base, method, path, body, readOk, signal, timeoutMs = BOOKING_TIMEOUT_MS, fetchImpl = globalThis.fetch } = call;
+  if (!isCallableBase(base) || signal?.aborted) return { kind: "unavailable" };
+  const controller = new AbortController();
+  const abort = () => controller.abort();
+  const timer = setTimeout(abort, timeoutMs);
+  signal?.addEventListener("abort", abort, { once: true });
+  try {
+    const headers = { Accept: "application/json" };
+    if (body !== void 0) headers["Content-Type"] = "application/json";
+    const response = await fetchImpl(bookingUrl(base, path), {
+      method,
+      mode: "cors",
+      credentials: "omit",
+      cache: "no-store",
+      referrerPolicy: "no-referrer",
+      headers,
+      body: body === void 0 ? void 0 : JSON.stringify(body),
+      signal: controller.signal
+    });
+    const text = await response.text();
+    return interpretBookingResponse(response.status, response.headers.get("Retry-After"), text, readOk);
+  } catch {
+    return { kind: "unavailable" };
+  } finally {
+    clearTimeout(timer);
+    signal?.removeEventListener("abort", abort);
+  }
+}
+var readServices = (body) => parseServices(body.services);
+var readSlots = (body) => parseSlots(body.slots);
+var readBooking = (body) => parseBooking(body.booking);
+var readNothing = () => true;
+function readReferenceParam(search, hash) {
+  const fromQuery = new URLSearchParams(search).get("ref");
+  if (fromQuery?.trim()) return fromQuery.trim();
+  const fragment = hash.replace(/^#/, "");
+  const queryStart = fragment.indexOf("?");
+  const params = new URLSearchParams(queryStart >= 0 ? fragment.slice(queryStart + 1) : fragment);
+  const fromHash = params.get("ref");
+  return fromHash?.trim() ? fromHash.trim() : null;
+}
+function buildManageUrl(pageUrl, reference) {
+  const url = new URL(pageUrl);
+  url.searchParams.delete("ref");
+  url.hash = `ref=${encodeURIComponent(reference)}`;
+  return url.toString();
+}
+function dayKey(date) {
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${date.getFullYear()}-${month}-${day}`;
+}
+function parseDayKey(key) {
+  const [year, month, day] = key.split("-").map(Number);
+  return new Date(year ?? 1970, (month ?? 1) - 1, day ?? 1);
+}
+function startOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function addMonths(month, count) {
+  return new Date(month.getFullYear(), month.getMonth() + count, 1);
+}
+function addDays(date, count) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + count);
+}
+function monthWindow(month, now) {
+  const first = startOfMonth(month);
+  const from = first.getTime() > now.getTime() ? first : now;
+  const end = addMonths(first, 1);
+  const to = new Date(Math.min(end.getTime(), from.getTime() + MAX_AVAILABILITY_MS));
+  return { from, to };
+}
+function groupSlotsByDay(slots) {
+  const days = /* @__PURE__ */ new Map();
+  for (const slot of slots) {
+    const key = dayKey(new Date(slot.start));
+    const list = days.get(key);
+    if (list) list.push(slot);
+    else days.set(key, [slot]);
+  }
+  return days;
+}
+function monthCells(month, weekStart) {
+  const first = startOfMonth(month);
+  const lead = (first.getDay() - weekStart + 7) % 7;
+  const count = new Date(first.getFullYear(), first.getMonth() + 1, 0).getDate();
+  const cells = Array.from({ length: lead }, () => null);
+  for (let day = 1; day <= count; day += 1) cells.push(new Date(first.getFullYear(), first.getMonth(), day));
+  while (cells.length % 7 !== 0) cells.push(null);
+  return cells;
+}
+function staffIdToSend(chosen) {
+  return chosen === "" ? void 0 : chosen;
+}
+
+// src/booking/booking-labels.ts
+var DEFAULT_BOOKING_LABELS = {
+  stepService: "Service",
+  stepTime: "Date and time",
+  stepDetails: "Your details",
+  stepDone: "Confirmation",
+  stepsLabel: "Booking steps",
+  serviceHeading: "Choose a service",
+  staffLegend: "Who would you like to see?",
+  anyStaff: "Any available",
+  duration: "{minutes} min",
+  online: "Online meeting",
+  noServices: "No services can be booked online right now. Please try again later.",
+  timeHeading: "Pick a date and time",
+  rescheduleHeading: "Pick a new date and time",
+  previousMonth: "Previous month",
+  nextMonth: "Next month",
+  timesHeading: "Times on {date}",
+  timeZoneNote: "Times are shown in your time zone: {zone}.",
+  chooseDay: "Choose a date to see the available times.",
+  slotsAvailable: "{count} times available on {date}.",
+  noSlots: "No times are available in {month}.",
+  loading: "Loading\u2026",
+  back: "Back",
+  continue: "Continue",
+  confirmReschedule: "Confirm new time",
+  detailsHeading: "Your details",
+  nameLabel: "Full name",
+  namePlaceholder: "Your name",
+  emailLabel: "Email",
+  emailPlaceholder: "you@example.com",
+  phoneLabel: "Phone (optional)",
+  notesLabel: "Notes (optional)",
+  notesPlaceholder: "Anything we should know beforehand",
+  notesCounter: "{count} / {max}",
+  consentLabel: "I agree that these details may be used to arrange and confirm my appointment.",
+  requiredLabel: "required",
+  requiredNote: "* Required",
+  submit: "Book appointment",
+  sending: "Booking\u2026",
+  bookedHeading: "Your appointment is booked",
+  bookingHeading: "Your appointment",
+  bookedNote: "Your appointment is booked.",
+  rescheduledNote: "Your appointment has been moved to the new time.",
+  serviceLabel: "Service",
+  whenLabel: "When",
+  manageLinkLabel: "Link to manage this appointment",
+  manageLinkHint: "Keep this link private. Anyone who has it can change or cancel your appointment.",
+  copyLink: "Copy link",
+  linkCopied: "Link copied.",
+  reschedule: "Reschedule",
+  cancel: "Cancel appointment",
+  cancelConfirm: "Cancel this appointment?",
+  cancelYes: "Yes, cancel it",
+  cancelNo: "Keep it",
+  cancelledHeading: "Your appointment is cancelled",
+  cancelledNote: "The appointment has been cancelled.",
+  bookAnother: "Book another appointment",
+  errorNote: "Sorry, the booking service could not be reached. Please try again later.",
+  retry: "Try again",
+  slotTakenNote: "That time has just been taken. Please choose another.",
+  tooLateNote: "This appointment can no longer be changed online. Please contact us.",
+  notFoundNote: "We could not find this appointment. It may have been cancelled, or the link is incomplete.",
+  rateLimitedNote: "Too many requests in a short time. Please wait {seconds} seconds and try again.",
+  rateLimitedGenericNote: "Too many requests in a short time. Please wait a little and try again.",
+  validationNote: "Please check the highlighted fields."
+};
+
+// src/booking/Booking.ts
+var CHECK_ICON = svg`<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 12l5 5L20 7" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path></svg>`;
+var MAX_MONTHS_AHEAD = 12;
+var Booking = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.endpoint = "";
+    this.reference = "";
+    this.serviceId = "";
+    this.weekStart = 1;
+    this.locale = "";
+    this.manageUrl = "";
+    this.labels = {};
+    this.errorMessages = {};
+    this.view = "loading";
+    this.mode = "new";
+    this.services = [];
+    this.staffId = "";
+    this.month = startOfMonth(/* @__PURE__ */ new Date());
+    this.slots = [];
+    this.slotsLoading = false;
+    this.selectedDay = "";
+    this.focusDay = "";
+    this.banner = "";
+    this.confirmingCancel = false;
+    this.busy = false;
+    this.errors = {};
+    this.alertText = "";
+    this.notice = "";
+    this.notesLength = 0;
+    /** The reference in use: the property, the page URL, or the one the API just gave. Never rendered or sent anywhere but the API. */
+    this.activeReference = "";
+    this.inflight = null;
+    this.slotsRun = 0;
+    /** What the details form held when the visitor went back to change the time, so nothing typed is lost. */
+    this.draft = {};
+  }
+  disconnectedCallback() {
+    this.inflight?.abort();
+    this.inflight = null;
+    this.slotsRun += 1;
+    super.disconnectedCallback();
+  }
+  updated(changed) {
+    if (changed.has("endpoint") || changed.has("reference") || changed.has("serviceId")) void this.start();
+  }
+  /* ------------------------------------------------------------ text and formatting */
+  text(key, values = {}) {
+    const label = this.labels[key];
+    return fillTemplate(typeof label === "string" ? label : DEFAULT_BOOKING_LABELS[key], values);
+  }
+  messages() {
+    const merged = { ...DEFAULT_BOOKING_ERROR_MESSAGES };
+    for (const key of Object.keys(merged)) {
+      const override = this.errorMessages[key];
+      if (typeof override === "string") merged[key] = override;
+    }
+    return merged;
+  }
+  fieldLabels() {
+    return { name: this.text("nameLabel"), email: this.text("emailLabel"), phone: this.text("phoneLabel"), notes: this.text("notesLabel") };
+  }
+  format(options) {
+    const tag = this.locale || document.documentElement.lang || void 0;
+    try {
+      return new Intl.DateTimeFormat(tag, options);
+    } catch {
+      return new Intl.DateTimeFormat(void 0, options);
+    }
+  }
+  fullDate(date) {
+    return this.format({ weekday: "long", year: "numeric", month: "long", day: "numeric" }).format(date);
+  }
+  timeOfDay(iso) {
+    return this.format({ hour: "numeric", minute: "2-digit" }).format(new Date(iso));
+  }
+  whenText(iso) {
+    return this.format({ weekday: "long", year: "numeric", month: "long", day: "numeric", hour: "numeric", minute: "2-digit", timeZoneName: "short" }).format(new Date(iso));
+  }
+  monthName(month) {
+    return this.format({ month: "long", year: "numeric" }).format(month);
+  }
+  zoneName() {
+    return new Intl.DateTimeFormat().resolvedOptions().timeZone;
+  }
+  /* ------------------------------------------------------------ flow */
+  resetState() {
+    this.service = void 0;
+    this.staffId = "";
+    this.slots = [];
+    this.selectedDay = "";
+    this.focusDay = "";
+    this.selectedSlot = void 0;
+    this.booking = void 0;
+    this.banner = "";
+    this.confirmingCancel = false;
+    this.busy = false;
+    this.errors = {};
+    this.alertText = "";
+    this.notice = "";
+    this.notesLength = 0;
+    this.draft = {};
+    this.mode = "new";
+  }
+  /** Opens an existing booking when there is a reference, else starts at the services. */
+  async start() {
+    this.inflight?.abort();
+    this.slotsRun += 1;
+    const controller = new AbortController();
+    this.inflight = controller;
+    this.resetState();
+    this.view = "loading";
+    this.activeReference = this.reference.trim() || readReferenceParam(window.location.search, window.location.hash) || "";
+    if (this.activeReference !== "") await this.loadBooking(controller);
+    else await this.loadServices(controller);
+  }
+  async loadServices(controller) {
+    const outcome = await callBookings({ base: this.endpoint, method: "GET", path: "/services", readOk: readServices, signal: controller.signal });
+    if (this.inflight !== controller) return;
+    if (outcome.kind !== "ok") {
+      this.fail(outcome.kind, outcome, "fatal");
+      return;
+    }
+    this.services = outcome.data;
+    const preset = outcome.data.find((item) => item.id === this.serviceId.trim());
+    if (preset) {
+      await this.chooseService(preset);
+      return;
+    }
+    this.go("services");
+  }
+  async loadBooking(controller) {
+    const outcome = await callBookings({
+      base: this.endpoint,
+      method: "GET",
+      path: appointmentPath(this.activeReference),
+      readOk: readBooking,
+      signal: controller.signal
+    });
+    if (this.inflight !== controller) return;
+    if (outcome.kind !== "ok") {
+      this.fail(outcome.kind, outcome, outcome.kind === "not_found" ? "notfound" : "fatal");
+      return;
+    }
+    this.booking = outcome.data;
+    this.go("booking");
+  }
+  /** Switches the step, clears the last problem and moves focus to the new step's heading. */
+  go(view) {
+    this.view = view;
+    this.alertText = "";
+    void this.updateComplete.then(() => this.renderRoot.querySelector("#bk-heading")?.focus());
+  }
+  /** Shows the note for a failed call and reports it. `next` is the step to show (when it should change). */
+  fail(kind, outcome, next) {
+    this.busy = false;
+    if (next) {
+      this.view = next;
+      void this.updateComplete.then(() => this.renderRoot.querySelector("#bk-heading")?.focus());
+    }
+    switch (kind) {
+      case "slot_taken":
+        this.alertText = this.text("slotTakenNote");
+        break;
+      case "too_late":
+        this.alertText = this.text("tooLateNote");
+        break;
+      case "not_found":
+        this.alertText = this.text("notFoundNote");
+        break;
+      case "rate_limited": {
+        const seconds = outcome.kind === "rate_limited" ? outcome.retryAfterSeconds : void 0;
+        this.alertText = seconds === void 0 ? this.text("rateLimitedGenericNote") : this.text("rateLimitedNote", { seconds });
+        break;
+      }
+      case "validation":
+        this.alertText = this.text("validationNote");
+        break;
+      case "unavailable":
+        this.alertText = this.text("errorNote");
+        break;
+    }
+    this.dispatchEvent(
+      new CustomEvent(BOOKING_ERROR_EVENT, { detail: { kind }, bubbles: true, composed: true })
+    );
+  }
+  async chooseService(service) {
+    this.service = service;
+    this.staffId = "";
+    this.mode = "new";
+    this.selectedSlot = void 0;
+    this.selectedDay = "";
+    this.month = startOfMonth(/* @__PURE__ */ new Date());
+    this.go("time");
+    await this.loadSlots(true);
+  }
+  /** Loads the current month's times. With `advance`, an empty month moves on to the next, up to a few months. */
+  async loadSlots(advance) {
+    const service = this.service;
+    if (!service) return;
+    const run = this.slotsRun += 1;
+    this.slotsLoading = true;
+    this.slots = [];
+    let lookahead = 0;
+    for (; ; ) {
+      const { from, to } = monthWindow(this.month, /* @__PURE__ */ new Date());
+      const query = new URLSearchParams({ serviceId: service.id, from: from.toISOString(), to: to.toISOString() });
+      const staff = staffIdToSend(this.staffId);
+      if (staff) query.set("staffId", staff);
+      const outcome = await callBookings({
+        base: this.endpoint,
+        method: "GET",
+        path: `/availability?${query.toString()}`,
+        readOk: readSlots,
+        signal: this.inflight?.signal
+      });
+      if (run !== this.slotsRun || !this.isConnected) return;
+      if (outcome.kind !== "ok") {
+        this.slotsLoading = false;
+        this.fail(outcome.kind, outcome);
+        return;
+      }
+      if (outcome.data.length === 0 && advance && lookahead < MAX_MONTH_LOOKAHEAD) {
+        lookahead += 1;
+        this.month = addMonths(this.month, 1);
+        continue;
+      }
+      this.slots = outcome.data;
+      break;
+    }
+    this.slotsLoading = false;
+    const days = groupSlotsByDay(this.slots);
+    const first = [...days.keys()][0];
+    this.focusDay = first ?? dayKey(this.month);
+    this.notice = this.slots.length === 0 ? this.text("noSlots", { month: this.monthName(this.month) }) : "";
+  }
+  async shiftMonth(count) {
+    const next = addMonths(this.month, count);
+    const nowMonth = startOfMonth(/* @__PURE__ */ new Date());
+    if (next.getTime() < nowMonth.getTime() || next.getTime() > addMonths(nowMonth, MAX_MONTHS_AHEAD).getTime()) return;
+    this.month = next;
+    this.selectedDay = "";
+    this.selectedSlot = void 0;
+    await this.loadSlots(false);
+  }
+  onStaffChange(event) {
+    this.staffId = event.target.value;
+    this.selectedDay = "";
+    this.selectedSlot = void 0;
+    this.alertText = "";
+    void this.loadSlots(false);
+  }
+  pickDay(key) {
+    const days = groupSlotsByDay(this.slots);
+    this.focusDay = key;
+    if (!days.has(key)) return;
+    this.selectedDay = key;
+    this.selectedSlot = void 0;
+    this.alertText = "";
+    const count = days.get(key)?.length ?? 0;
+    this.notice = this.text("slotsAvailable", { count, date: this.fullDate(parseDayKey(key)) });
+  }
+  pickSlot(slot) {
+    this.selectedSlot = slot;
+    this.alertText = "";
+  }
+  onGridKeydown(event) {
+    const key = event.target.dataset.day;
+    if (!key) return;
+    const current = parseDayKey(key);
+    const moves = {
+      ArrowLeft: addDays(current, -1),
+      ArrowRight: addDays(current, 1),
+      ArrowUp: addDays(current, -7),
+      ArrowDown: addDays(current, 7),
+      Home: addDays(current, -((current.getDay() - this.weekStart + 7) % 7)),
+      End: addDays(current, 6 - (current.getDay() - this.weekStart + 7) % 7),
+      PageUp: new Date(current.getFullYear(), current.getMonth() - 1, current.getDate()),
+      PageDown: new Date(current.getFullYear(), current.getMonth() + 1, current.getDate())
+    };
+    const target = moves[event.key];
+    if (!target) return;
+    event.preventDefault();
+    const targetKey = dayKey(target);
+    const sameMonth = target.getMonth() === this.month.getMonth() && target.getFullYear() === this.month.getFullYear();
+    this.focusDay = targetKey;
+    if (!sameMonth) void this.shiftMonth(this.monthDelta(target)).then(() => this.focusDayButton(targetKey));
+    else this.focusDayButton(targetKey);
+  }
+  monthDelta(target) {
+    return (target.getFullYear() - this.month.getFullYear()) * 12 + target.getMonth() - this.month.getMonth();
+  }
+  focusDayButton(key) {
+    this.focusDay = key;
+    void this.updateComplete.then(() => this.renderRoot.querySelector(`[data-day="${key}"]`)?.focus());
+  }
+  continueFromTime() {
+    if (!this.selectedSlot) return;
+    if (this.mode === "reschedule") void this.reschedule(this.selectedSlot);
+    else this.go("details");
+  }
+  backFromTime() {
+    if (this.mode === "reschedule") this.go("booking");
+    else if (this.services.length > 0) this.go("services");
+  }
+  /* ------------------------------------------------------------ calls */
+  async book(event) {
+    event.preventDefault();
+    const slot = this.selectedSlot;
+    const service = this.service;
+    if (this.busy || !slot || !service) return;
+    const form = event.currentTarget;
+    const values = this.readValues(form);
+    this.draft = { name: values.name, email: values.email, phone: values.phone, notes: values.notes, consent: values.consent };
+    this.alertText = "";
+    const errors = validateBooking(values, this.fieldLabels(), this.messages());
+    this.errors = errors;
+    const invalid = firstInvalidBookingField(errors);
+    if (invalid) {
+      this.focusField(invalid);
+      return;
+    }
+    const payload = buildBookingPayload(values, { serviceId: service.id, staffId: staffIdToSend(this.staffId), start: slot.start });
+    this.busy = true;
+    const controller = this.freshController();
+    const outcome = await callBookings({ base: this.endpoint, method: "POST", path: "/appointments", body: payload, readOk: readBooking, signal: controller.signal });
+    if (this.inflight !== controller) return;
+    this.busy = false;
+    if (outcome.kind === "ok") {
+      this.booking = outcome.data;
+      this.activeReference = outcome.data.reference;
+      this.banner = "booked";
+      this.draft = {};
+      this.errors = {};
+      this.go("booking");
+      this.dispatchEvent(
+        new CustomEvent(BOOKING_CREATED_EVENT, { detail: { serviceId: outcome.data.serviceId || service.id, start: outcome.data.start }, bubbles: true, composed: true })
+      );
+      return;
+    }
+    if (outcome.kind === "validation") {
+      this.applyServerErrors(outcome.errors);
+      this.fail("validation", outcome);
+      return;
+    }
+    if (outcome.kind === "slot_taken") {
+      this.selectedSlot = void 0;
+      this.fail("slot_taken", outcome, "time");
+      void this.loadSlots(false).then(() => {
+        this.alertText = this.text("slotTakenNote");
+      });
+      return;
+    }
+    this.fail(outcome.kind, outcome);
+  }
+  /** Server messages go on the fields that exist; a rejected start or staff means the time must be picked again. */
+  applyServerErrors(errors) {
+    const shown = {};
+    const rest = [];
+    const names = BOOKING_FIELD_NAMES;
+    for (const [key, message] of Object.entries(errors)) {
+      if (names.includes(key)) shown[key] = message;
+      else rest.push(message);
+    }
+    this.errors = shown;
+    const invalid = firstInvalidBookingField(shown);
+    if (invalid) this.focusField(invalid);
+    if (rest.length > 0) {
+      this.selectedSlot = void 0;
+      void this.loadSlots(false);
+      this.go("time");
+      this.alertText = rest.join(" ");
+    }
+  }
+  async reschedule(slot) {
+    const booking = this.booking;
+    if (this.busy || !booking) return;
+    this.busy = true;
+    const controller = this.freshController();
+    const outcome = await callBookings({
+      base: this.endpoint,
+      method: "POST",
+      path: appointmentPath(this.activeReference, "/reschedule"),
+      body: { start: slot.start },
+      readOk: readBooking,
+      signal: controller.signal
+    });
+    if (this.inflight !== controller) return;
+    this.busy = false;
+    if (outcome.kind === "ok") {
+      this.booking = outcome.data;
+      this.activeReference = outcome.data.reference;
+      this.banner = "rescheduled";
+      this.mode = "new";
+      this.go("booking");
+      this.dispatchEvent(
+        new CustomEvent(BOOKING_RESCHEDULED_EVENT, { detail: { serviceId: outcome.data.serviceId || booking.serviceId, start: outcome.data.start }, bubbles: true, composed: true })
+      );
+      return;
+    }
+    if (outcome.kind === "slot_taken") {
+      this.selectedSlot = void 0;
+      this.fail("slot_taken", outcome);
+      void this.loadSlots(false).then(() => {
+        this.alertText = this.text("slotTakenNote");
+      });
+      return;
+    }
+    if (outcome.kind === "too_late") {
+      this.mode = "new";
+      this.fail("too_late", outcome, "booking");
+      return;
+    }
+    this.fail(outcome.kind, outcome, outcome.kind === "not_found" ? "notfound" : void 0);
+  }
+  startReschedule() {
+    const booking = this.booking;
+    if (!booking) return;
+    this.service = { id: booking.serviceId, name: booking.serviceName, description: "", durationMinutes: 0, online: false, staff: [] };
+    this.staffId = "";
+    this.mode = "reschedule";
+    this.selectedSlot = void 0;
+    this.selectedDay = "";
+    this.banner = "";
+    this.confirmingCancel = false;
+    this.month = startOfMonth(/* @__PURE__ */ new Date());
+    this.go("time");
+    void this.loadSlots(true);
+  }
+  async cancelBooking() {
+    const booking = this.booking;
+    if (this.busy || !booking) return;
+    this.busy = true;
+    const controller = this.freshController();
+    const outcome = await callBookings({ base: this.endpoint, method: "DELETE", path: appointmentPath(this.activeReference), readOk: readNothing, signal: controller.signal });
+    if (this.inflight !== controller) return;
+    this.busy = false;
+    this.confirmingCancel = false;
+    if (outcome.kind === "ok") {
+      this.activeReference = "";
+      this.banner = "";
+      this.go("cancelled");
+      this.dispatchEvent(
+        new CustomEvent(BOOKING_CANCELLED_EVENT, { detail: { serviceId: booking.serviceId }, bubbles: true, composed: true })
+      );
+      return;
+    }
+    this.fail(outcome.kind, outcome, outcome.kind === "not_found" ? "notfound" : void 0);
+  }
+  freshController() {
+    this.inflight?.abort();
+    const controller = new AbortController();
+    this.inflight = controller;
+    return controller;
+  }
+  bookAnother() {
+    this.reference = "";
+    this.activeReference = "";
+    this.inflight?.abort();
+    const controller = new AbortController();
+    this.inflight = controller;
+    this.resetState();
+    this.view = "loading";
+    void this.loadServices(controller);
+  }
+  async copyLink() {
+    const link = this.manageLink();
+    try {
+      await navigator.clipboard.writeText(link);
+      this.notice = this.text("linkCopied");
+    } catch {
+      const input = this.renderRoot.querySelector("#bk-link");
+      input?.focus();
+      input?.select();
+    }
+  }
+  manageLink() {
+    return buildManageUrl(this.manageUrl.trim() || window.location.href, this.activeReference);
+  }
+  /* ------------------------------------------------------------ details form */
+  readText(form, name) {
+    const field = form.elements.namedItem(name);
+    return field instanceof HTMLInputElement || field instanceof HTMLTextAreaElement ? field.value : "";
+  }
+  readValues(form) {
+    const consent = form.elements.namedItem("consent");
+    return {
+      name: this.readText(form, "name"),
+      email: this.readText(form, "email"),
+      phone: this.readText(form, "phone"),
+      notes: this.readText(form, "notes"),
+      consent: consent instanceof HTMLInputElement && consent.checked,
+      website: this.readText(form, "website")
+    };
+  }
+  focusField(name) {
+    void this.updateComplete.then(() => this.renderRoot.querySelector(`#bk-${name}`)?.focus());
+  }
+  /* ------------------------------------------------------------ rendering */
+  heading(text) {
+    return html`<h2 id="bk-heading" part="heading" tabindex="-1">${text}</h2>`;
+  }
+  renderSteps() {
+    if (this.mode === "reschedule" || !["services", "time", "details"].includes(this.view)) return nothing;
+    const steps = [
+      { view: "services", label: this.text("stepService") },
+      { view: "time", label: this.text("stepTime") },
+      { view: "details", label: this.text("stepDetails") }
+    ];
+    return html`<ol class="steps" part="steps" aria-label=${this.text("stepsLabel")}>
+      ${steps.map((step) => html`<li aria-current=${step.view === this.view ? "step" : nothing}>${step.label}</li>`)}
+    </ol>`;
+  }
+  renderServices() {
+    return html`
+      ${this.heading(this.text("serviceHeading"))}
+      ${this.services.length === 0 ? html`<p class="note">${this.text("noServices")}</p>` : html`<ul class="options">
+            ${this.services.map(
+      (service) => html`<li>
+                <button class="service" part="service" type="button" @click=${() => void this.chooseService(service)}>
+                  <span class="service-name">${service.name}</span>
+                  ${service.description ? html`<span>${service.description}</span>` : nothing}
+                  <span class="meta">
+                    ${service.durationMinutes > 0 ? this.text("duration", { minutes: service.durationMinutes }) : nothing}${service.online ? html`${service.durationMinutes > 0 ? " \xB7 " : ""}${this.text("online")}` : nothing}
+                  </span>
+                </button>
+              </li>`
+    )}
+          </ul>`}
+    `;
+  }
+  renderStaff() {
+    const staff = this.service?.staff ?? [];
+    if (this.mode === "reschedule" || staff.length < 2) return nothing;
+    return html`<fieldset>
+      <legend>${this.text("staffLegend")}</legend>
+      <label class="choice">
+        <input type="radio" name="staff" value="" .checked=${this.staffId === ""} @change=${this.onStaffChange} />
+        ${this.text("anyStaff")}
+      </label>
+      ${staff.map(
+      (member) => html`<label class="choice">
+          <input type="radio" name="staff" value=${member.id} .checked=${this.staffId === member.id} @change=${this.onStaffChange} />
+          ${member.name}
+        </label>`
+    )}
+    </fieldset>`;
+  }
+  renderCalendar(days) {
+    const first = startOfMonth(/* @__PURE__ */ new Date());
+    const canGoBack = this.month.getTime() > first.getTime();
+    const canGoForward = this.month.getTime() < addMonths(first, MAX_MONTHS_AHEAD).getTime();
+    const cells = monthCells(this.month, this.weekStart === 0 ? 0 : 1);
+    const weekdays = Array.from({ length: 7 }, (_, index) => {
+      const date = new Date(2021, 0, 3 + (index + this.weekStart) % 7);
+      return { long: this.format({ weekday: "long" }).format(date), short: this.format({ weekday: "short" }).format(date) };
+    });
+    const todayKey = dayKey(/* @__PURE__ */ new Date());
+    const monthKeys = cells.filter((cell) => cell !== null).map(dayKey);
+    const rovingKey = monthKeys.includes(this.focusDay) ? this.focusDay : monthKeys.find((key) => days.has(key)) ?? monthKeys[0];
+    const rows = [];
+    for (let index = 0; index < cells.length; index += 7) rows.push(cells.slice(index, index + 7));
+    return html`<div>
+      <div class="month-bar">
+        <button class="btn icon-btn" part="button" type="button" ?disabled=${!canGoBack || this.slotsLoading} aria-label=${this.text("previousMonth")} @click=${() => void this.shiftMonth(-1)}>‹</button>
+        <span class="month-name" id="bk-month" aria-live="polite">${this.monthName(this.month)}</span>
+        <button class="btn icon-btn" part="button" type="button" ?disabled=${!canGoForward || this.slotsLoading} aria-label=${this.text("nextMonth")} @click=${() => void this.shiftMonth(1)}>›</button>
+      </div>
+      <table part="calendar" role="grid" aria-labelledby="bk-month" aria-busy=${this.slotsLoading ? "true" : "false"} @keydown=${this.onGridKeydown}>
+        <thead>
+          <tr>${weekdays.map((day) => html`<th scope="col" abbr=${day.long}>${day.short}</th>`)}</tr>
+        </thead>
+        <tbody>
+          ${rows.map(
+      (row) => html`<tr>
+              ${row.map((cell) => {
+        if (!cell) return html`<td></td>`;
+        const key = dayKey(cell);
+        const available = days.has(key) && key >= todayKey;
+        return html`<td role="gridcell">
+                  <button
+                    class="day ${available ? "has-slots" : ""}"
+                    part="day"
+                    type="button"
+                    data-day=${key}
+                    tabindex=${key === rovingKey ? "0" : "-1"}
+                    aria-disabled=${available ? "false" : "true"}
+                    aria-pressed=${available ? key === this.selectedDay ? "true" : "false" : nothing}
+                    aria-label=${this.fullDate(cell)}
+                    @click=${() => this.pickDay(key)}
+                  >
+                    ${cell.getDate()}
+                  </button>
+                </td>`;
+      })}
+            </tr>`
+    )}
+        </tbody>
+      </table>
+    </div>`;
+  }
+  renderTime() {
+    const days = groupSlotsByDay(this.slots);
+    const daySlots = days.get(this.selectedDay) ?? [];
+    const heading = this.mode === "reschedule" ? this.text("rescheduleHeading") : this.text("timeHeading");
+    const dayDate = this.selectedDay ? parseDayKey(this.selectedDay) : void 0;
+    return html`
+      ${this.heading(heading)}
+      ${this.service ? html`<p class="meta">${this.service.name}</p>` : nothing}
+      ${this.renderStaff()}
+      <div class="time-layout">
+        ${this.renderCalendar(days)}
+        <div>
+          ${this.slotsLoading ? html`<p class="loading" role="status">${this.text("loading")}</p>` : this.slots.length === 0 ? html`<p class="note">${this.text("noSlots", { month: this.monthName(this.month) })}</p>` : dayDate ? html`<h3>${this.text("timesHeading", { date: this.fullDate(dayDate) })}</h3>
+                    <ul class="slots" aria-label=${this.text("timesHeading", { date: this.fullDate(dayDate) })}>
+                      ${daySlots.map(
+      (slot) => html`<li>
+                          <button class="slot" part="slot" type="button" aria-pressed=${slot === this.selectedSlot ? "true" : "false"} @click=${() => this.pickSlot(slot)}>
+                            ${this.timeOfDay(slot.start)}
+                          </button>
+                        </li>`
+    )}
+                    </ul>` : html`<p class="note">${this.text("chooseDay")}</p>`}
+          <p class="note">${this.text("timeZoneNote", { zone: this.zoneName() })}</p>
+        </div>
+      </div>
+      <div class="actions">
+        ${this.mode === "reschedule" || this.services.length > 0 ? html`<button class="btn" part="button" type="button" @click=${this.backFromTime}>${this.text("back")}</button>` : nothing}
+        <button class="btn primary" part="primary" type="button" ?disabled=${!this.selectedSlot || this.busy} @click=${this.continueFromTime}>
+          ${this.mode === "reschedule" ? this.text("confirmReschedule") : this.text("continue")}
+        </button>
+      </div>
+    `;
+  }
+  requiredMark() {
+    return html`<span aria-hidden="true"> *</span><span class="sr-only"> (${this.text("requiredLabel")})</span>`;
+  }
+  renderInput(name, label, options) {
+    const error = this.errors[name];
+    return html`<div class="field" part="field">
+      <label class="label" part="label" for="bk-${name}">${label}${options.required ? this.requiredMark() : nothing}</label>
+      <input
+        class="input"
+        part="input"
+        id="bk-${name}"
+        name=${name}
+        type=${options.type}
+        autocomplete=${options.autocomplete}
+        inputmode=${name === "phone" ? "tel" : nothing}
+        placeholder=${options.placeholder || nothing}
+        .value=${this.draft[name] ?? ""}
+        ?required=${options.required}
+        aria-invalid=${error ? "true" : "false"}
+        aria-describedby=${error ? `bk-${name}-error` : nothing}
+      />
+      ${error ? html`<p class="error" part="error" id="bk-${name}-error">${error}</p>` : nothing}
+    </div>`;
+  }
+  renderDetails() {
+    const slot = this.selectedSlot;
+    const notesError = this.errors.notes;
+    const consentError = this.errors.consent;
+    const over = this.notesLength > BOOKING_LIMITS.notesMax;
+    return html`
+      ${this.heading(this.text("detailsHeading"))}
+      ${this.service && slot ? html`<p class="meta" part="summary">${this.service.name} · ${this.whenText(slot.start)}</p>` : nothing}
+      <form novalidate aria-busy=${this.busy ? "true" : "false"} @submit=${this.book} class="root">
+        <p class="note">${this.text("requiredNote")}</p>
+        ${this.renderInput("name", this.text("nameLabel"), { type: "text", autocomplete: "name", placeholder: this.text("namePlaceholder"), required: true })}
+        ${this.renderInput("email", this.text("emailLabel"), { type: "email", autocomplete: "email", placeholder: this.text("emailPlaceholder"), required: true })}
+        ${this.renderInput("phone", this.text("phoneLabel"), { type: "tel", autocomplete: "tel", required: false })}
+        <div class="field" part="field">
+          <label class="label" part="label" for="bk-notes">${this.text("notesLabel")}</label>
+          <textarea
+            class="input"
+            part="input"
+            id="bk-notes"
+            name="notes"
+            rows="4"
+            placeholder=${this.text("notesPlaceholder") || nothing}
+            .value=${this.draft.notes ?? ""}
+            aria-invalid=${notesError ? "true" : "false"}
+            aria-describedby=${notesError ? "bk-notes-error" : nothing}
+            @input=${(event) => this.notesLength = codePointLength(event.target.value.trim())}
+          ></textarea>
+          ${this.notesLength >= BOOKING_LIMITS.notesMax * 0.8 ? html`<p class="counter ${over ? "over" : ""}">${this.text("notesCounter", { count: this.notesLength, max: BOOKING_LIMITS.notesMax })}</p>` : nothing}
+          ${notesError ? html`<p class="error" part="error" id="bk-notes-error">${notesError}</p>` : nothing}
+        </div>
+        <div class="field" part="field">
+          <label class="consent">
+            <input
+              type="checkbox"
+              id="bk-consent"
+              name="consent"
+              required
+              .checked=${this.draft.consent === true}
+              aria-invalid=${consentError ? "true" : "false"}
+              aria-describedby=${consentError ? "bk-consent-error" : nothing}
+            />
+            <span>${this.text("consentLabel")}${this.requiredMark()}</span>
+          </label>
+          ${consentError ? html`<p class="error" part="error" id="bk-consent-error">${consentError}</p>` : nothing}
+        </div>
+        <div class="hp" aria-hidden="true" inert>
+          <input type="text" name="website" tabindex="-1" autocomplete="off" aria-hidden="true" />
+        </div>
+        <div class="actions">
+          <button class="btn" part="button" type="button" ?disabled=${this.busy} @click=${() => this.go("time")}>${this.text("back")}</button>
+          <button class="btn primary" part="primary" type="submit" ?disabled=${this.busy}>${this.busy ? this.text("sending") : this.text("submit")}</button>
+        </div>
+      </form>
+    `;
+  }
+  renderBooking() {
+    const booking = this.booking;
+    if (!booking) return nothing;
+    const heading = this.banner === "booked" ? this.text("bookedHeading") : this.text("bookingHeading");
+    return html`
+      ${this.heading(heading)}
+      ${this.banner ? html`<div class="success" part="success">
+            <span class="success-icon" aria-hidden="true">${CHECK_ICON}</span>
+            <p>${this.banner === "booked" ? this.text("bookedNote") : this.text("rescheduledNote")}</p>
+          </div>` : nothing}
+      <dl class="summary" part="summary">
+        <dt>${this.text("serviceLabel")}</dt>
+        <dd>${booking.serviceName}</dd>
+        <dt>${this.text("whenLabel")}</dt>
+        <dd>${this.whenText(booking.start)}</dd>
+      </dl>
+      ${this.banner === "booked" ? html`<div class="field">
+            <label class="label" for="bk-link">${this.text("manageLinkLabel")}</label>
+            <div class="link-row">
+              <input class="input" id="bk-link" type="text" readonly aria-describedby="bk-link-hint" .value=${this.manageLink()} @focus=${(event) => event.target.select()} />
+              <button class="btn" part="button" type="button" @click=${() => void this.copyLink()}>${this.text("copyLink")}</button>
+            </div>
+            <p class="note" id="bk-link-hint">${this.text("manageLinkHint")}</p>
+          </div>` : nothing}
+      ${this.confirmingCancel ? html`<div role="group" aria-labelledby="bk-cancel-q" class="field">
+            <p id="bk-cancel-q" class="label">${this.text("cancelConfirm")}</p>
+            <div class="actions">
+              <button class="btn danger" part="button" type="button" ?disabled=${this.busy} @click=${() => void this.cancelBooking()}>${this.text("cancelYes")}</button>
+              <button class="btn" part="button" type="button" ?disabled=${this.busy} @click=${() => this.confirmingCancel = false}>${this.text("cancelNo")}</button>
+            </div>
+          </div>` : html`<div class="actions">
+            <button class="btn primary" part="primary" type="button" @click=${this.startReschedule}>${this.text("reschedule")}</button>
+            <button class="btn danger" part="button" type="button" @click=${() => this.confirmingCancel = true}>${this.text("cancel")}</button>
+          </div>`}
+    `;
+  }
+  renderCancelled() {
+    return html`
+      ${this.heading(this.text("cancelledHeading"))}
+      <p>${this.text("cancelledNote")}</p>
+      <div class="actions"><button class="btn primary" part="primary" type="button" @click=${this.bookAnother}>${this.text("bookAnother")}</button></div>
+    `;
+  }
+  renderRetry(label) {
+    return html`<div class="actions"><button class="btn primary" part="primary" type="button" @click=${() => void this.start()}>${label}</button></div>`;
+  }
+  renderView() {
+    switch (this.view) {
+      case "loading":
+        return html`<p class="loading" role="status">${this.text("loading")}</p>`;
+      case "services":
+        return this.renderServices();
+      case "time":
+        return this.renderTime();
+      case "details":
+        return this.renderDetails();
+      case "booking":
+        return this.renderBooking();
+      case "cancelled":
+        return this.renderCancelled();
+      case "notfound":
+        return html`${this.heading(this.text("bookingHeading"))}
+        <div class="actions"><button class="btn primary" part="primary" type="button" @click=${this.bookAnother}>${this.text("bookAnother")}</button></div>`;
+      case "fatal":
+        return html`${this.heading(this.text("bookingHeading"))}${this.renderRetry(this.text("retry"))}`;
+    }
+  }
+  render() {
+    return html`
+      <div class="root" aria-busy=${this.view === "loading" || this.slotsLoading ? "true" : "false"}>
+        ${this.renderSteps()}
+        <div class="alert ${this.alertText ? "has-text" : ""}" part="alert" role="alert">${this.alertText}</div>
+        <p class="sr-only" role="status" aria-live="polite">${this.notice}</p>
+        ${this.renderView()}
+      </div>
+    `;
+  }
+};
+Booking.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      display: block;
+      box-sizing: border-box;
+      ${fontFamilyStyles}
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    .root {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      min-width: 0;
+      color: var(--st-color-text);
+    }
+
+    /* Text uses the theme's own colour tokens (they swap in dark themes), as st-contact-form does. */
+    h2 {
+      margin: 0;
+      font-size: 22px;
+      line-height: 1.3;
+      color: var(--st-color-text-strong);
+    }
+
+    h2:focus-visible {
+      outline: 2px solid var(--st-cms-brand-azure);
+      outline-offset: 4px;
+    }
+
+    h3 {
+      margin: 0;
+      font-size: 16px;
+      color: var(--st-color-text-strong);
+    }
+
+    p {
+      margin: 0;
+    }
+
+    .steps {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      font-size: 13px;
+    }
+
+    .steps li {
+      padding: 4px 12px;
+      border-radius: 9999px;
+      background: var(--st-color-subtle, var(--st-cms-surface-soft));
+      color: var(--st-color-text);
+    }
+
+    .steps li[aria-current='step'] {
+      background: var(--st-cms-brand-navy);
+      color: var(--st-cms-on-dark);
+      font-weight: var(--st-font-weight-semibold);
+    }
+
+    .options {
+      display: grid;
+      gap: 12px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    .service {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      width: 100%;
+      min-height: 44px;
+      padding: 16px 18px;
+      border: 1px solid var(--st-color-border, var(--st-cms-primary-200));
+      border-radius: 16px;
+      background: var(--st-color-surface);
+      color: var(--st-color-text);
+      font: inherit;
+      text-align: left;
+      cursor: pointer;
+    }
+
+    .service:hover {
+      border-color: var(--st-cms-brand-navy);
+    }
+
+    .service-name {
+      font-size: 17px;
+      font-weight: var(--st-font-weight-semibold);
+      color: var(--st-color-text-strong);
+    }
+
+    .meta {
+      font-size: 14px;
+      color: var(--st-color-text-muted);
+    }
+
+    fieldset {
+      min-width: 0;
+      margin: 0;
+      padding: 0;
+      border: 0;
+    }
+
+    legend {
+      padding: 0;
+      margin-bottom: 8px;
+      font-size: 14px;
+      font-weight: var(--st-font-weight-semibold);
+      color: var(--st-color-text-strong);
+    }
+
+    .choice {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      min-height: 44px;
+      margin-right: 16px;
+      font-size: 15px;
+      cursor: pointer;
+    }
+
+    .choice input {
+      width: 20px;
+      height: 20px;
+      margin: 0;
+      accent-color: var(--st-cms-brand-navy);
+    }
+
+    .time-layout {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      gap: 20px;
+    }
+
+    @media (min-width: 720px) {
+      .time-layout {
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      }
+    }
+
+    .month-bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+
+    .month-name {
+      font-size: 16px;
+      font-weight: var(--st-font-weight-semibold);
+      color: var(--st-color-text-strong);
+    }
+
+    table {
+      width: 100%;
+      border-collapse: separate;
+      border-spacing: 4px;
+      table-layout: fixed;
+    }
+
+    th {
+      padding: 4px 0;
+      font-size: 12px;
+      font-weight: var(--st-font-weight-semibold);
+      color: var(--st-color-text-muted);
+    }
+
+    td {
+      padding: 0;
+      text-align: center;
+    }
+
+    .day {
+      width: 100%;
+      min-height: 44px;
+      padding: 0;
+      border: 1px solid transparent;
+      border-radius: 12px;
+      background: transparent;
+      color: var(--st-color-text-muted);
+      font: inherit;
+      font-size: 15px;
+      cursor: default;
+    }
+
+    .day.has-slots {
+      border-color: var(--st-color-border, var(--st-cms-primary-200));
+      background: var(--st-color-surface);
+      color: var(--st-color-text-strong);
+      font-weight: var(--st-font-weight-semibold);
+      cursor: pointer;
+    }
+
+    .day.has-slots:hover {
+      border-color: var(--st-cms-brand-navy);
+    }
+
+    .day[aria-pressed='true'] {
+      background: var(--st-cms-brand-navy);
+      border-color: var(--st-cms-brand-navy);
+      color: var(--st-cms-on-dark);
+    }
+
+    .slots {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
+      gap: 8px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    .slot {
+      width: 100%;
+      min-height: 44px;
+      padding: 0 8px;
+      border: 1px solid var(--st-color-border, var(--st-cms-primary-200));
+      border-radius: 12px;
+      background: var(--st-color-surface);
+      color: var(--st-color-text-strong);
+      font: inherit;
+      font-size: 15px;
+      cursor: pointer;
+    }
+
+    .slot:hover {
+      border-color: var(--st-cms-brand-navy);
+    }
+
+    .slot[aria-pressed='true'] {
+      background: var(--st-cms-brand-navy);
+      border-color: var(--st-cms-brand-navy);
+      color: var(--st-cms-on-dark);
+    }
+
+    .day:focus-visible,
+    .slot:focus-visible,
+    .service:focus-visible,
+    .btn:focus-visible,
+    .input:focus-visible,
+    .choice input:focus-visible,
+    .consent input:focus-visible {
+      outline: 2px solid var(--st-cms-brand-azure);
+      outline-offset: 2px;
+    }
+
+    .note {
+      font-size: 14px;
+      color: var(--st-color-text-muted);
+    }
+
+    .field {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      min-width: 0;
+    }
+
+    .label {
+      font-size: 14px;
+      font-weight: var(--st-font-weight-semibold);
+      color: var(--st-color-text-strong);
+    }
+
+    .input {
+      width: 100%;
+      min-height: 44px;
+      padding: 10px 14px;
+      border: 1px solid var(--st-color-border, var(--st-cms-primary-200));
+      border-radius: 12px;
+      background: var(--st-color-surface);
+      color: var(--st-color-text-strong);
+      /* 16px stops iOS zooming into the field. */
+      font: inherit;
+      font-size: 16px;
+    }
+
+    .input::placeholder {
+      color: var(--st-color-text-muted);
+      opacity: 1;
+    }
+
+    textarea.input {
+      min-height: 104px;
+      resize: vertical;
+    }
+
+    .input[aria-invalid='true'] {
+      border-color: var(--st-color-danger);
+      box-shadow: inset 0 0 0 1px var(--st-color-danger);
+    }
+
+    .error {
+      font-size: 13px;
+      line-height: 1.4;
+      color: var(--st-color-danger-text);
+    }
+
+    .counter {
+      align-self: flex-end;
+      font-size: 12px;
+      color: var(--st-color-text-muted);
+    }
+
+    .counter.over {
+      color: var(--st-color-danger-text);
+      font-weight: var(--st-font-weight-semibold);
+    }
+
+    .consent {
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
+      min-height: 44px;
+      font-size: 14px;
+      line-height: 1.5;
+      cursor: pointer;
+    }
+
+    .consent input {
+      flex: none;
+      width: 20px;
+      height: 20px;
+      margin: 2px 0 0;
+      accent-color: var(--st-cms-brand-navy);
+    }
+
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      padding: 0;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    /* Off-screen, not display:none: the browser still fills it in, a person and a screen reader do not see it. */
+    .hp {
+      position: absolute;
+      left: -10000px;
+      top: auto;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+    }
+
+    .actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+    }
+
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 48px;
+      padding: 0 24px;
+      border: 1px solid var(--st-cms-brand-navy);
+      border-radius: 9999px;
+      background: transparent;
+      color: var(--st-color-text-strong);
+      font: inherit;
+      font-size: 16px;
+      font-weight: var(--st-font-weight-semibold);
+      cursor: pointer;
+      transition: opacity 150ms ease;
+    }
+
+    .btn.primary {
+      background: var(--st-cms-brand-navy);
+      color: var(--st-cms-on-dark);
+    }
+
+    .btn.danger {
+      border-color: var(--st-color-danger);
+      color: var(--st-color-danger-text);
+    }
+
+    .btn:hover:not(:disabled) {
+      opacity: 0.92;
+    }
+
+    .btn:disabled {
+      opacity: 0.6;
+      cursor: progress;
+    }
+
+    .icon-btn {
+      min-width: 44px;
+      padding: 0;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .btn {
+        transition: none;
+      }
+    }
+
+    .alert {
+      margin: 0;
+    }
+
+    .alert.has-text {
+      padding: 12px 14px;
+      border-radius: 12px;
+      background: var(--st-color-danger-subtle);
+      color: var(--st-color-danger-text);
+      font-size: 14px;
+      line-height: 1.5;
+    }
+
+    .success {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      padding: 16px 18px;
+      border-radius: 16px;
+      background: var(--st-color-subtle, var(--st-cms-surface-soft));
+      color: var(--st-color-text-strong);
+      font-size: 15px;
+      line-height: 1.6;
+    }
+
+    .success-icon {
+      flex: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      border-radius: 9999px;
+      background: var(--st-cms-highlight);
+      color: var(--st-cms-navy);
+    }
+
+    .success-icon svg {
+      width: 18px;
+      height: 18px;
+    }
+
+    dl.summary {
+      display: grid;
+      grid-template-columns: max-content minmax(0, 1fr);
+      gap: 8px 16px;
+      margin: 0;
+      padding: 16px 18px;
+      border: 1px solid var(--st-color-border, var(--st-cms-primary-200));
+      border-radius: 16px;
+      background: var(--st-color-surface);
+    }
+
+    dl.summary dt {
+      font-weight: var(--st-font-weight-semibold);
+      color: var(--st-color-text-strong);
+    }
+
+    dl.summary dd {
+      margin: 0;
+      overflow-wrap: anywhere;
+    }
+
+    .link-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .link-row .input {
+      flex: 1 1 220px;
+      width: auto;
+    }
+
+    .loading {
+      padding: 24px 0;
+      color: var(--st-color-text-muted);
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], Booking.prototype, "endpoint", 2);
+__decorateClass([
+  property({ type: String })
+], Booking.prototype, "reference", 2);
+__decorateClass([
+  property({ type: String, attribute: "service-id" })
+], Booking.prototype, "serviceId", 2);
+__decorateClass([
+  property({ type: Number, attribute: "week-start" })
+], Booking.prototype, "weekStart", 2);
+__decorateClass([
+  property({ type: String })
+], Booking.prototype, "locale", 2);
+__decorateClass([
+  property({ type: String, attribute: "manage-url" })
+], Booking.prototype, "manageUrl", 2);
+__decorateClass([
+  property({ attribute: false })
+], Booking.prototype, "labels", 2);
+__decorateClass([
+  property({ attribute: false })
+], Booking.prototype, "errorMessages", 2);
+__decorateClass([
+  state()
+], Booking.prototype, "view", 2);
+__decorateClass([
+  state()
+], Booking.prototype, "mode", 2);
+__decorateClass([
+  state()
+], Booking.prototype, "services", 2);
+__decorateClass([
+  state()
+], Booking.prototype, "service", 2);
+__decorateClass([
+  state()
+], Booking.prototype, "staffId", 2);
+__decorateClass([
+  state()
+], Booking.prototype, "month", 2);
+__decorateClass([
+  state()
+], Booking.prototype, "slots", 2);
+__decorateClass([
+  state()
+], Booking.prototype, "slotsLoading", 2);
+__decorateClass([
+  state()
+], Booking.prototype, "selectedDay", 2);
+__decorateClass([
+  state()
+], Booking.prototype, "focusDay", 2);
+__decorateClass([
+  state()
+], Booking.prototype, "selectedSlot", 2);
+__decorateClass([
+  state()
+], Booking.prototype, "booking", 2);
+__decorateClass([
+  state()
+], Booking.prototype, "banner", 2);
+__decorateClass([
+  state()
+], Booking.prototype, "confirmingCancel", 2);
+__decorateClass([
+  state()
+], Booking.prototype, "busy", 2);
+__decorateClass([
+  state()
+], Booking.prototype, "errors", 2);
+__decorateClass([
+  state()
+], Booking.prototype, "alertText", 2);
+__decorateClass([
+  state()
+], Booking.prototype, "notice", 2);
+__decorateClass([
+  state()
+], Booking.prototype, "notesLength", 2);
+Booking = __decorateClass([
+  customElement("st-booking")
+], Booking);
+
+export {
+  BOOKING_CREATED_EVENT,
+  BOOKING_RESCHEDULED_EVENT,
+  BOOKING_CANCELLED_EVENT,
+  BOOKING_ERROR_EVENT,
+  DEFAULT_BOOKING_LABELS,
+  Booking
+};
+//# sourceMappingURL=chunk-DPANTC3O.js.map