@semics-tech/emdash-events-suite 0.0.0-stage → 1.0.0-rc.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 semics
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,83 @@
-# Temporary Holding Version
+# @semics-tech/emdash-events-suite
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Links [semics Events](../events) and [semics E-sign](../esign) on one EmDash site: one config call,
+and `<BookingWithWaiver>`, a booking form whose waivers are signed inline, on the same visit.
+
+The suite adds no plugin code of its own: no capabilities, storage or routes. It wires the two products
+together through their public routes. Waivers are an Events Pro feature; with the Free Events core
+the same form makes a plain booking.
+
+**Documentation:** [install](https://github.com/semics-uk/emdash-plugins/blob/main/apps/docs/pages/install.md)
+and [waivers](https://github.com/semics-uk/emdash-plugins/blob/main/apps/docs/pages/waivers.md).
+
+## Install
+
+```sh
+pnpm add @semics-tech/emdash-events @semics-tech/emdash-esign @semics-tech/emdash-events-suite @emdash-cms/sandbox-workerd
+```
+
+```js
+// astro.config.mjs
+import { eventsSuite } from "@semics-tech/emdash-events-suite";
+import { defineConfig } from "astro/config";
+import emdash from "emdash/astro";
+
+const suite = eventsSuite();
+
+export default defineConfig({
+	output: "server",
+	integrations: [
+		...suite.integrations,
+		emdash({
+			siteUrl: "https://events.example.com",
+			sandboxRunner: "@emdash-cms/sandbox-workerd/sandbox",
+			sandboxed: suite.sandboxed,
+			plugins: suite.plugins,
+		}),
+	],
+});
+```
+
+`eventsSuite()` returns both sandboxed cores, both UI descriptors, and the Astro integrations of both
+products plus the suite's waiver page (`/_events/waiver`). Each part gets the plugin id of each core it
+calls, so nothing assumes a slug. Pass a Pro build as `eventsSuite({ events: <the Events Pro export> })`, or,
+for cores installed from the registry, their ids:
+
+```js
+import { eventsSuite } from "@semics-tech/emdash-events-suite";
+
+// Cores installed from the registry: only the ids, which start with r_.
+export const suite = eventsSuite({ events: { pluginId: "r_events_id" }, esign: { pluginId: "r_esign_id" } });
+```
+
+Pair the two cores in the admin: create an integration client in E-sign (Integrations), paste its
+pairing string into the Events settings, and allow `https://<your site>/booking` as a return URL.
+
+## Book with a waiver
+
+```astro
+---
+import { getEmDashEntry } from "emdash";
+import BookingWithWaiver from "@semics-tech/emdash-events-suite/astro/BookingWithWaiver.astro";
+
+const { entry } = await getEmDashEntry("events", Astro.params.slug ?? "");
+---
+{entry && <BookingWithWaiver event={entry.data.id} />}
+```
+
+The form lists the buyer and one row per attendee, each with an "under 18" control (`seats`, default
+4, at most 10). Names and emails with control characters are refused before anything is booked.
+It posts to `/_events/waiver`, which reserves the seats and passes the attendees on. When the event
+requires a waiver (Events Pro), each signing intent is redeemed with E-sign: the buyer signs inline,
+for themselves and as guardian for every attendee under 18, one ceremony after another on that page;
+other adults are emailed their own waiver. Each receipt is forwarded to Events as the ceremony ends,
+and the buyer lands on `/booking`, confirmed. It works without JavaScript.
+
+`/_events/waiver` sends E-sign's ceremony Content-Security-Policy, `Referrer-Policy: no-referrer` and
+`no-store`. Signing tokens never appear in a URL: they are kept in an HttpOnly, SameSite=Strict cookie
+scoped to that page.
+
+Paid waiver events: when continue answers with a payment step, the browser goes to the
+provider's checkout.
+
+The suite's own pages are English only for now.

package/dist/ts/index.d.ts

@@ -0,0 +1,72 @@
+import type { PluginDescriptor } from "emdash";
+/**
+ * A core the suite links: a sandboxed descriptor to load from npm (the product package's default
+ * export, or a Pro build of the same slug), or `{ pluginId }` for a core installed from the
+ * registry, whose id is an `r_…` value the operator copies from the admin.
+ */
+export type SuiteCore = PluginDescriptor | {
+    pluginId: string;
+};
+export interface EventsSuiteOptions {
+    /** Default: the Free Events core of `@semics-tech/emdash-events`. */
+    events?: SuiteCore;
+    /** Default: the Free E-sign core of `@semics-tech/emdash-esign`. */
+    esign?: SuiteCore;
+}
+/** The slice of Astro's integration API the injected pages need (no `astro` dependency). */
+interface SetupArgs {
+    injectRoute(route: {
+        pattern: string;
+        entrypoint: string;
+        prerender?: boolean;
+    }): void;
+    updateConfig(config: {
+        vite: {
+            plugins: unknown[];
+        };
+    }): void;
+}
+export interface SuiteAstroIntegration {
+    name: string;
+    hooks: {
+        "astro:config:setup": (args: SetupArgs) => void;
+    };
+}
+export interface EventsSuite {
+    /** Spread into `emdash({ sandboxed })`: the cores loaded from npm (none for registry installs). */
+    sandboxed: PluginDescriptor[];
+    /** Spread into `emdash({ plugins })`: both native UI descriptors. */
+    plugins: PluginDescriptor[];
+    /** Spread into Astro's `integrations`: both products' pages and the suite's waiver page. */
+    integrations: SuiteAstroIntegration[];
+    /** The id each core runs under on this site. */
+    pluginIds: {
+        events: string;
+        esign: string;
+    };
+}
+/** The suite's own page: the inline signing step of <BookingWithWaiver>. */
+export declare const WAIVER_ROUTE = "/_events/waiver";
+/** The suite's catalogue page: where the Events panel's Refresh templates link lands (T066). */
+export declare const TEMPLATES_ROUTE = "/_events/templates";
+/**
+ * Injects `/_events/waiver` (the booking and signing steps of `<BookingWithWaiver>`) and gives it,
+ * through a virtual module, the id of each core. `eventsSuite()` adds it for you.
+ */
+export declare function suiteIntegration(ids: {
+    eventsPluginId: string;
+    esignPluginId: string;
+}): SuiteAstroIntegration;
+/**
+ * Events and E-sign on one site (SX-FR-01). Every part is told the id of each core it calls, taken
+ * from the descriptor or the registry id given here, never assumed:
+ *
+ * ```js
+ * const suite = eventsSuite(); // or eventsSuite({ events: eventsPro(), esign: { pluginId: "r_…" } })
+ * export default defineConfig({
+ *   integrations: [...suite.integrations, emdash({ sandboxed: suite.sandboxed, plugins: suite.plugins })],
+ * });
+ * ```
+ */
+export declare function eventsSuite(options?: EventsSuiteOptions): EventsSuite;
+export default eventsSuite;

package/dist/ts/index.js

@@ -0,0 +1,88 @@
+import esignCore from "@semics-tech/emdash-esign";
+import { esignIntegration } from "@semics-tech/emdash-esign/integration";
+import { esignUi } from "@semics-tech/emdash-esign/ui";
+import eventsCore from "@semics-tech/emdash-events";
+import { eventsIntegration } from "@semics-tech/emdash-events/integration";
+import { eventsUi } from "@semics-tech/emdash-events/ui";
+/** A plugin id is a route segment (`/_emdash/api/plugins/<id>/…`): a slug or a registry `r_…` id. */
+const PLUGIN_ID = /^[A-Za-z0-9_-]{1,128}$/;
+function resolveCore(core) {
+    const descriptor = "id" in core ? core : undefined;
+    const id = descriptor ? descriptor.id : core.pluginId;
+    if (typeof id !== "string" || !PLUGIN_ID.test(id)) {
+        throw new Error(`eventsSuite: invalid plugin id ${JSON.stringify(id)} (letters, digits, "_" and "-" only)`);
+    }
+    return descriptor ? { id, descriptor } : { id };
+}
+const VIRTUAL = "virtual:semics-events-suite/config";
+const RESOLVED = `\0${VIRTUAL}`;
+/** The suite's own page: the inline signing step of <BookingWithWaiver>. */
+export const WAIVER_ROUTE = "/_events/waiver";
+/** The suite's catalogue page: where the Events panel's Refresh templates link lands (T066). */
+export const TEMPLATES_ROUTE = "/_events/templates";
+/** What Events' booking page runs for a booking waiting for signatures (T066). */
+const RECONCILE_MODULE = "@semics-tech/emdash-events-suite/astro/lib/reconcile";
+/**
+ * Injects `/_events/waiver` (the booking and signing steps of `<BookingWithWaiver>`) and gives it,
+ * through a virtual module, the id of each core. `eventsSuite()` adds it for you.
+ */
+export function suiteIntegration(ids) {
+    const config = [
+        `export const eventsPluginId = ${JSON.stringify(ids.eventsPluginId)};`,
+        `export const esignPluginId = ${JSON.stringify(ids.esignPluginId)};`,
+    ].join("\n");
+    return {
+        name: "semics-events-suite",
+        hooks: {
+            "astro:config:setup": ({ injectRoute, updateConfig }) => {
+                injectRoute({
+                    pattern: WAIVER_ROUTE,
+                    entrypoint: "@semics-tech/emdash-events-suite/astro/WaiverPage.astro",
+                    prerender: false,
+                });
+                injectRoute({
+                    pattern: TEMPLATES_ROUTE,
+                    entrypoint: "@semics-tech/emdash-events-suite/astro/TemplatesPage.astro",
+                    prerender: false,
+                });
+                updateConfig({
+                    vite: {
+                        plugins: [
+                            {
+                                name: "semics-events-suite-config",
+                                resolveId: (id) => (id === VIRTUAL ? RESOLVED : undefined),
+                                load: (id) => (id === RESOLVED ? config : undefined),
+                            },
+                        ],
+                    },
+                });
+            },
+        },
+    };
+}
+/**
+ * Events and E-sign on one site (SX-FR-01). Every part is told the id of each core it calls, taken
+ * from the descriptor or the registry id given here, never assumed:
+ *
+ * ```js
+ * const suite = eventsSuite(); // or eventsSuite({ events: eventsPro(), esign: { pluginId: "r_…" } })
+ * export default defineConfig({
+ *   integrations: [...suite.integrations, emdash({ sandboxed: suite.sandboxed, plugins: suite.plugins })],
+ * });
+ * ```
+ */
+export function eventsSuite(options = {}) {
+    const events = resolveCore(options.events ?? eventsCore);
+    const esign = resolveCore(options.esign ?? esignCore);
+    return {
+        sandboxed: [events.descriptor, esign.descriptor].filter((d) => d !== undefined),
+        plugins: [eventsUi(), esignUi()],
+        integrations: [
+            eventsIntegration({ pluginId: events.id, esignPluginId: esign.id, reconcile: RECONCILE_MODULE }),
+            esignIntegration({ pluginId: esign.id }),
+            suiteIntegration({ eventsPluginId: events.id, esignPluginId: esign.id }),
+        ],
+        pluginIds: { events: events.id, esign: esign.id },
+    };
+}
+export default eventsSuite;

package/package.json

@@ -1,6 +1,49 @@
 {
   "name": "@semics-tech/emdash-events-suite",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0-rc.0",
+  "type": "module",
+  "description": "Links semics Events and E-sign on one EmDash site: one config call and a booking flow with inline waiver signing",
+  "license": "MIT",
+  "main": "dist/ts/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/ts/index.js",
+      "types": "./dist/ts/index.d.ts"
+    },
+    "./astro": "./src/astro/index.js",
+    "./astro/BookingWithWaiver.astro": "./src/astro/BookingWithWaiver.astro",
+    "./astro/WaiverPage.astro": "./src/astro/WaiverPage.astro",
+    "./astro/TemplatesPage.astro": "./src/astro/TemplatesPage.astro",
+    "./astro/lib/*": "./src/astro/lib/*.ts"
+  },
+  "files": [
+    "dist",
+    "src/astro"
+  ],
+  "dependencies": {
+    "@semics-tech/emdash-esign": "1.0.0-rc.0",
+    "@semics-tech/emdash-events": "1.0.0-rc.0"
+  },
+  "peerDependencies": {
+    "emdash": ">=1.2.0 <2"
+  },
+  "devDependencies": {
+    "@vitest/coverage-v8": "4.1.12",
+    "emdash": "1.2.0",
+    "typescript": "^5.9.0",
+    "vitest": "^4.1.12"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/semics-uk/emdash-plugins",
+    "directory": "packages/events-suite"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage --reporter=dot",
+    "test:verify": "vitest run --reporter=dot ${CI:+--coverage}",
+    "verify": "pnpm run typecheck && pnpm run test:verify && pnpm run build"
+  }
 }

package/src/astro/BookingWithWaiver.astro

@@ -0,0 +1,295 @@
+---
+// <BookingWithWaiver event={entryId} /> (SX-FR-02): books an event whose tickets need a signed waiver,
+// in one flow: this form → `/_events/waiver` (reserve, attendees, signing intents) → the waiver
+// signed inline on that page → back to the booking page, confirmed. A plain form post: no JavaScript.
+//
+// One row per attendee, each with an "under 18" control: the buyer signs for themselves and, as
+// guardian, for every attendee under 18; other adults sign their own waiver from an email. Without
+// Events Pro (waivers are Pro) the same form makes a plain booking. All text is rendered as text.
+import { eventsPluginId } from "virtual:semics-events-suite/config";
+import { callPublicRoute } from "@semics-tech/emdash-events/astro/lib/call";
+import { formatMoney, newIdempotencyKey, type PublicEvent } from "@semics-tech/emdash-events/astro/lib/widget";
+
+import {
+	DEFAULT_SEATS,
+	MAX_SEATS,
+	readWaiverState,
+	safeReturnPath,
+	seatField,
+	WAIVER_MESSAGES,
+	WAIVER_PATH,
+	waiverAnchor,
+} from "./lib/form";
+
+interface Props {
+	/** The event's content entry id. */
+	event: string;
+	/** The `public/event` answer, when the page already has it. */
+	data?: PublicEvent;
+	heading?: string;
+	/** Attendee rows to offer (1-10, default 4). */
+	seats?: number;
+	locale?: string;
+}
+
+const { event: eventId, heading = "Book with waiver", locale = "en-GB" } = Astro.props;
+const seats = Math.min(MAX_SEATS, Math.max(1, Math.trunc(Astro.props.seats ?? DEFAULT_SEATS)));
+let data = Astro.props.data;
+if (!data) {
+	const result = await callPublicRoute<PublicEvent>(Astro, { path: "public/event", pluginId: eventsPluginId, body: { eventId } });
+	if (result.ok) data = result.data;
+}
+
+const id = waiverAnchor(eventId);
+const state = readWaiverState(Astro.url, eventId);
+const alert = state.code ? (WAIVER_MESSAGES[state.code] ?? WAIVER_MESSAGES.INTERNAL) : "";
+const bad = (field: string) => (state.fields.includes(field) ? "true" : undefined);
+const returnTo = safeReturnPath(`${Astro.url.pathname}${Astro.url.search}`, Astro.url.origin) ?? "";
+const ticketTypes = (data?.ticketTypes ?? []).filter((t) => t.available !== 0);
+const occurrences = data?.occurrences ?? [];
+const onSale = data?.status === "on_sale" && ticketTypes.length > 0;
+const siteKey = data?.turnstileSiteKey ?? "";
+const price = (minor: number) => formatMoney(minor, data?.currency ?? "GBP", locale);
+const when = (iso: string) => {
+	const options = { dateStyle: "full", timeStyle: "short" } as const;
+	try {
+		return new Intl.DateTimeFormat(locale, { ...options, timeZone: data?.timezone ?? "UTC" }).format(new Date(iso));
+	} catch {
+		return new Intl.DateTimeFormat(locale, { ...options, timeZone: "UTC" }).format(new Date(iso));
+	}
+};
+// Attendee rows are only for an event whose waiver is required (`public/event` says so, T066); any other
+// event is booked by ticket type and quantity, as a plain booking.
+const needsWaiver = data?.waiver === true;
+const rows = needsWaiver ? Array.from({ length: seats }, (_, i) => i + 1) : [];
+const single = ticketTypes.length === 1 ? ticketTypes[0] : undefined;
+---
+<section id={id} class="semics-events semics-waiver-widget" aria-labelledby={`${id}-title`} data-testid="booking-with-waiver">
+	<h2 id={`${id}-title`}>{heading}</h2>
+	{
+		!onSale ? (
+			<p data-testid="booking-unavailable">Booking is not available for this event right now.</p>
+		) : (
+			<form method="post" action={WAIVER_PATH}>
+				<p class="semics-form-alert" role="alert" data-testid="waiver-alert" hidden={!alert}>{alert}</p>
+				<input type="hidden" name="intent" value="book" />
+				<input type="hidden" name="eventId" value={eventId} />
+				<input type="hidden" name="returnTo" value={returnTo} />
+				<input type="hidden" name="idempotencyKey" value={newIdempotencyKey()} />
+
+				{occurrences.length > 0 && (
+					<div class="semics-field">
+						<input type="hidden" name="needsOccurrence" value="1" />
+						<label for={`${id}-occurrence`}>Date</label>
+						<select id={`${id}-occurrence`} name="occurrenceId" required aria-invalid={bad("occurrence")}>
+							<option value="">Choose a date</option>
+							{occurrences.map((o) => (
+								<option value={o.id} disabled={o.available === 0}>
+									{when(o.startsAt)}
+									{o.available === 0 ? " (sold out)" : ""}
+								</option>
+							))}
+						</select>
+					</div>
+				)}
+
+				<fieldset>
+					<legend>You</legend>
+					<div class="semics-field">
+						<label for={`${id}-name`}>Your name</label>
+						<input id={`${id}-name`} name="name" type="text" autocomplete="name" required maxlength="200" aria-invalid={bad("name")} />
+					</div>
+					<div class="semics-field">
+						<label for={`${id}-email`}>Your email</label>
+						<input id={`${id}-email`} name="email" type="email" autocomplete="email" required maxlength="254" aria-invalid={bad("email")} />
+					</div>
+				</fieldset>
+
+				{!needsWaiver && (
+					<fieldset data-testid="waiver-plain">
+						<legend>Tickets</legend>
+						<input type="hidden" name="plain" value="1" />
+						<div class="semics-field">
+							<label for={`${id}-plain-type`}>Ticket</label>
+							<select id={`${id}-plain-type`} name="ticketTypeId" aria-invalid={bad("tickets")}>
+								{ticketTypes.map((t) => (
+									<option value={t.id}>{t.name} ({price(t.priceMinor)})</option>
+								))}
+							</select>
+						</div>
+						<div class="semics-field">
+							<label for={`${id}-plain-qty`}>How many</label>
+							<input id={`${id}-plain-qty`} name="qty" type="number" min="1" max={MAX_SEATS} value="1" required aria-invalid={bad("tickets")} />
+						</div>
+					</fieldset>
+				)}
+
+				{needsWaiver && (
+					<p class="semics-note" id={`${id}-who`}>
+						List everyone attending, including you if you are going. You sign the waiver now, for yourself and
+						for anyone under 18. Other adults need their own email address: they are sent their waiver to sign.
+					</p>
+				)}
+				{bad("attendees") && <p class="semics-field-error" data-testid="waiver-attendees-error">Add at least one attendee, and an email for each other adult.</p>}
+
+				{rows.map((n) => (
+					<fieldset class="semics-attendee" data-testid="waiver-attendee" aria-describedby={`${id}-who`}>
+						<legend>Attendee {n}</legend>
+						{single ? (
+							<input type="hidden" name={seatField(n, "ticketTypeId")} value={single.id} />
+						) : (
+							<div class="semics-field">
+								<label for={`${id}-${n}-type`}><span class="semics-sr">Attendee {n} </span>Ticket</label>
+								<select id={`${id}-${n}-type`} name={seatField(n, "ticketTypeId")} aria-invalid={bad(seatField(n, "ticketTypeId"))}>
+									{ticketTypes.map((t) => (
+										<option value={t.id}>{t.name} ({price(t.priceMinor)})</option>
+									))}
+								</select>
+							</div>
+						)}
+						<div class="semics-field">
+							<label for={`${id}-${n}-name`}><span class="semics-sr">Attendee {n} </span>Name</label>
+							<input id={`${id}-${n}-name`} name={seatField(n, "name")} type="text" maxlength="200" required={n === 1 || undefined} aria-invalid={bad(seatField(n, "name"))} />
+						</div>
+						<div class="semics-field">
+							<label for={`${id}-${n}-email`}><span class="semics-sr">Attendee {n} </span>Email (optional)</label>
+							<input id={`${id}-${n}-email`} name={seatField(n, "email")} type="email" maxlength="254" aria-invalid={bad(seatField(n, "email"))} />
+						</div>
+						<div class="semics-check">
+							<input id={`${id}-${n}-minor`} name={seatField(n, "minor")} type="checkbox" />
+							<label for={`${id}-${n}-minor`}><span class="semics-sr">Attendee {n} is </span>Under 18</label>
+						</div>
+					</fieldset>
+				))}
+
+				{needsWaiver && single && <p class="semics-note">{single.name}: {price(single.priceMinor)} per attendee.</p>}
+
+				{siteKey && (
+					<>
+						<div class="cf-turnstile" data-sitekey={siteKey}></div>
+						{/* Compact below 300 px so a 320 px screen never scrolls sideways (WCAG 1.4.10). */}
+						<script is:inline>(function (s) { var t = s && s.previousElementSibling; if (t && t.clientWidth < 300) t.setAttribute("data-size", "compact"); })(document.currentScript);</script>
+						<noscript><p class="semics-note">This form uses a security check that needs JavaScript.</p></noscript>
+						<script is:inline src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
+					</>
+				)}
+
+				<button type="submit">Book</button>
+			</form>
+		)
+	}
+</section>
+
+<style>
+	.semics-waiver-widget {
+		--_fg: var(--events-fg, #1a1a1a);
+		--_muted: var(--events-muted, #4a4a4a);
+		--_bg: var(--events-bg, #ffffff);
+		--_border: var(--events-border, #6b6b6b);
+		--_accent: var(--events-accent, #0b57d0);
+		--_accent-fg: var(--events-accent-fg, #ffffff);
+		--_error: var(--events-error, #b3261e);
+		--_radius: var(--events-radius, 6px);
+		box-sizing: border-box;
+		max-inline-size: 36rem;
+		padding: 1rem;
+		border: 1px solid var(--_border);
+		border-radius: var(--_radius);
+		background: var(--_bg);
+		color: var(--_fg);
+		overflow-wrap: anywhere;
+	}
+	.semics-waiver-widget *,
+	.semics-waiver-widget *::before,
+	.semics-waiver-widget *::after {
+		box-sizing: border-box;
+	}
+	.semics-waiver-widget h2 {
+		margin: 0 0 0.75rem;
+		font-size: 1.25rem;
+	}
+	.semics-waiver-widget form {
+		display: grid;
+		gap: 0.75rem;
+	}
+	.semics-waiver-widget fieldset {
+		display: grid;
+		gap: 0.5rem;
+		margin: 0;
+		padding: 0.5rem 0.75rem;
+		border: 1px solid var(--_border);
+		border-radius: var(--_radius);
+		min-inline-size: 0;
+	}
+	.semics-field {
+		display: grid;
+		gap: 0.25rem;
+	}
+	.semics-check {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+	.semics-waiver-widget input:not([type="checkbox"]),
+	.semics-waiver-widget select,
+	.semics-waiver-widget button {
+		font: inherit;
+		min-block-size: 2.75rem;
+		max-inline-size: 100%;
+	}
+	.semics-waiver-widget input:not([type="checkbox"]),
+	.semics-waiver-widget select {
+		inline-size: 100%;
+		padding: 0.375rem 0.5rem;
+		border: 1px solid var(--_border);
+		border-radius: var(--_radius);
+		background: var(--_bg);
+		color: var(--_fg);
+	}
+	.semics-waiver-widget input[type="checkbox"] {
+		inline-size: 1.25rem;
+		block-size: 1.25rem;
+	}
+	.semics-waiver-widget [aria-invalid="true"] {
+		border-color: var(--_error);
+		outline: 1px solid var(--_error);
+	}
+	.semics-note {
+		margin: 0;
+		color: var(--_muted);
+	}
+	.semics-field-error,
+	.semics-form-alert {
+		margin: 0;
+		color: var(--_error);
+	}
+	.semics-form-alert {
+		padding: 0.5rem 0.75rem;
+		border: 1px solid var(--_error);
+		border-radius: var(--_radius);
+	}
+	.semics-sr {
+		position: absolute;
+		inline-size: 1px;
+		block-size: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
+	.semics-waiver-widget button {
+		justify-self: start;
+		padding: 0.5rem 1.5rem;
+		border: 0;
+		border-radius: var(--_radius);
+		background: var(--_accent);
+		color: var(--_accent-fg);
+		cursor: pointer;
+	}
+	.semics-waiver-widget :focus-visible {
+		outline: 3px solid var(--_accent);
+		outline-offset: 2px;
+	}
+	.semics-waiver-widget [hidden] {
+		display: none !important;
+	}
+</style>