@businessdash/sdk 0.9.80 → 0.9.90

package/src/vue/{BiabForm.vue → BdForm.vue}

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 /**
- * <BiabForm> — Vue 3 drop-in binding for the headless `@businessdash/sdk/forms`
+ * <BdForm> — Vue 3 drop-in binding for the headless `@businessdash/sdk/forms`
  * core. Ship mode: SOURCE (.vue). The consumer's Vite/Nuxt toolchain compiles
- * this single-file component; biab-dev does NOT pre-build it.
+ * this single-file component; bd does NOT pre-build it.
  *
  * It is a faithful port of the dashboard renderer (`FormPreview.tsx`): the same
  * per-field rendering by `type`, the same `condition_block` / `or_condition`
  * evaluation, the same multi-step ("consecutive") nav + progress bar/steps, the
  * same concurrent-reveal gating, default seeding, and form-settings application
  * (animation, showProgress/progressStyle, showOrgIcon + org icon). Everything
- * renders into LIGHT DOM (no shadow root) using the `biab-*` CSS class +
- * `data-biab-*` attribute conventions, so a consumer's own CSS cascades 1:1
+ * renders into LIGHT DOM (no shadow root) using the `bd-*` CSS class +
+ * `data-bd-*` attribute conventions, so a consumer's own CSS cascades 1:1
  * with the dashboard preview.
  *
  * All runtime state + behaviour lives in `createFormController` (values,
@@ -27,12 +27,12 @@
  *     client). `onSuccess` / `onError` still fire.
  *
  * The recursive field-tree renderer is declared as a local render-function
- * component (`BiabFieldTree`) right here in `<script setup>` so the whole
+ * component (`BdFieldTree`) right here in `<script setup>` so the whole
  * binding stays ONE self-contained `.vue` file (the SOURCE ship-mode contract)
  * while still supporting self-reference for nested groups / conditions.
  */
 
-import type { BiabClient } from "@businessdash/sdk";
+import type { BdClient } from "@businessdash/sdk";
 import {
 	concurrentRevealCount,
 	createFormController,
@@ -68,7 +68,7 @@ import {
 	watch,
 } from "vue";
 
-import { BIAB_CLIENT_KEY } from "./index";
+import { BD_CLIENT_KEY } from "./index";
 
 // ─── Props / emits ────────────────────────────────────────────────────────────
 
@@ -84,10 +84,10 @@ const props = withDefaults(
 		 *  given without a `client`, pair it with `onSubmit` to post the payload
 		 *  through your own server proxy. */
 		schema?: FormSchema;
-		/** SDK client. Optional — falls back to a `provide(BIAB_CLIENT_KEY, …)` /
-		 *  `<BiabProvider>` ancestor. Browser-only: never pass a server-bound key in
+		/** SDK client. Optional — falls back to a `provide(BD_CLIENT_KEY, …)` /
+		 *  `<BdProvider>` ancestor. Browser-only: never pass a server-bound key in
 		 *  a client-rendered tree (use `schema` + `onSubmit` instead). */
-		client?: BiabClient;
+		client?: BdClient;
 		/** Submit-options merged into every submit (the call's own options win). */
 		submitOptions?: FormSubmitOptions;
 		/** Validate on the server, store nothing (no side effects). */
@@ -108,7 +108,7 @@ const props = withDefaults(
 			payload: FormData,
 			opts: FormSubmitOptions,
 		) => void | FormSubmitResult | Promise<void | FormSubmitResult>;
-		/** Class(es) merged onto the root `.biab-form` element. */
+		/** Class(es) merged onto the root `.bd-form` element. */
 		class?: unknown;
 		/** Alias for `class` (cross-framework parity). */
 		className?: string;
@@ -141,8 +141,8 @@ const emit = defineEmits<{
 
 // ─── Resolve the client (prop → injected provider) ──────────────────────────────
 
-const injectedClient = inject(BIAB_CLIENT_KEY, null);
-const resolvedClient = computed<BiabClient | undefined>(
+const injectedClient = inject(BD_CLIENT_KEY, null);
+const resolvedClient = computed<BdClient | undefined>(
 	() => props.client ?? injectedClient ?? undefined,
 );
 
@@ -378,13 +378,13 @@ const entranceClass = computed(() => {
 	const fwd = snap.value.forward;
 	switch (a) {
 		case "fade":
-			return "biab-anim biab-anim--fade";
+			return "bd-anim bd-anim--fade";
 		case "scale":
-			return "biab-anim biab-anim--scale";
+			return "bd-anim bd-anim--scale";
 		case "slide":
 			return fwd
-				? "biab-anim biab-anim--slide-fwd"
-				: "biab-anim biab-anim--slide-back";
+				? "bd-anim bd-anim--slide-fwd"
+				: "bd-anim bd-anim--slide-back";
 		default:
 			return "";
 	}
@@ -399,7 +399,7 @@ function stepTitle(step: FormCoreField[], i: number): string {
 	);
 }
 
-const rootClass = computed(() => ["biab-form", props.className, props.class]);
+const rootClass = computed(() => ["bd-form", props.className, props.class]);
 const submitDisabled = computed(
 	() => snap.value.submitting || snap.value.uploading,
 );
@@ -453,7 +453,7 @@ async function loadIconIndex(): Promise<void> {
 /** Which side of an `image_input` the visitor is on, per field id. */
 const imageModes = ref<Record<string, "upload" | "url">>({});
 
-// ─── BiabFieldTree — recursive render-function component (FormPreview port) ──────
+// ─── BdFieldTree — recursive render-function component (FormPreview port) ──────
 
 const STATIC_NO_LABEL = new Set(["title", "subtitle", "separator", "richtext"]);
 
@@ -462,8 +462,8 @@ function cssKey(f: FormCoreField): string {
 	return explicit || f.key || f.id;
 }
 
-const BiabFieldTree = defineComponent({
-	name: "BiabFieldTree",
+const BdFieldTree = defineComponent({
+	name: "BdFieldTree",
 	props: {
 		nodes: { type: Array as PropType<FormCoreField[]>, required: true },
 		flat: { type: Boolean, default: false },
@@ -481,15 +481,15 @@ const BiabFieldTree = defineComponent({
 
 			switch (f.type) {
 				case "title":
-					return h("h2", { class: "biab-field__title" }, f.label || "");
+					return h("h2", { class: "bd-field__title" }, f.label || "");
 				case "subtitle":
-					return h("h3", { class: "biab-field__subtitle" }, f.label || "");
+					return h("h3", { class: "bd-field__subtitle" }, f.label || "");
 				case "separator":
-					return h("hr", { class: "biab-field__separator" });
+					return h("hr", { class: "bd-field__separator" });
 				case "richtext":
 					return f.content
 						? h("div", {
-								class: "biab-field__richtext",
+								class: "bd-field__richtext",
 								innerHTML: String(f.content),
 							})
 						: null;
@@ -505,7 +505,7 @@ const BiabFieldTree = defineComponent({
 							| undefined) ?? {};
 					return cfg.src
 						? h("img", {
-								class: "biab-field__image",
+								class: "bd-field__image",
 								src: cfg.src,
 								alt: cfg.alt || "",
 								style: {
@@ -523,7 +523,7 @@ const BiabFieldTree = defineComponent({
 							| undefined) ?? {};
 					return h("textarea", {
 						autocomplete,
-						class: "biab-textarea biab-field__control",
+						class: "bd-textarea bd-field__control",
 						value: typeof value === "string" ? value : "",
 						placeholder: f.placeholder || "",
 						rows: cfg.rows ?? 4,
@@ -543,12 +543,12 @@ const BiabFieldTree = defineComponent({
 							(f as { display?: string }).display,
 						)
 					) {
-						const listId = `biab-list-${f.id}`;
+						const listId = `bd-list-${f.id}`;
 						// A wrapper rather than a fragment: `renderInput` is typed to one
 						// VNode, and `<datalist>` renders nothing visually anyway.
-						return h("div", { class: "biab-combobox-wrap" }, [
+						return h("div", { class: "bd-combobox-wrap" }, [
 							h("input", {
-								class: "biab-input biab-combobox biab-field__control",
+								class: "bd-input bd-combobox bd-field__control",
 								type: "text",
 								list: listId,
 								placeholder: f.placeholder || "Search…",
@@ -566,7 +566,7 @@ const BiabFieldTree = defineComponent({
 					return h(
 						"select",
 						{
-							class: "biab-input biab-field__control",
+							class: "bd-input bd-field__control",
 							value: typeof value === "string" ? value : "",
 							onChange: (e: Event) =>
 								set((e.target as HTMLSelectElement).value),
@@ -592,9 +592,9 @@ const BiabFieldTree = defineComponent({
 						void loadIconIndex();
 					}
 					const selected = typeof value === "string" ? value : "";
-					return h("div", { class: "biab-iconselect" }, [
+					return h("div", { class: "bd-iconselect" }, [
 						h("input", {
-							class: "biab-input biab-iconselect__search",
+							class: "bd-input bd-iconselect__search",
 							type: "text",
 							placeholder: f.placeholder || "Search icons…",
 							value: iconQuery.value,
@@ -603,7 +603,7 @@ const BiabFieldTree = defineComponent({
 							},
 						}),
 						selected
-							? h("span", { class: "biab-iconselect__current" }, [
+							? h("span", { class: "bd-iconselect__current" }, [
 									h("img", {
 										src: iconUrl(selected),
 										alt: selected,
@@ -614,7 +614,7 @@ const BiabFieldTree = defineComponent({
 										"button",
 										{
 											type: "button",
-											class: "biab-iconselect__clear",
+											class: "bd-iconselect__clear",
 											onClick: () => set(""),
 										},
 										"×",
@@ -623,14 +623,14 @@ const BiabFieldTree = defineComponent({
 							: null,
 						h(
 							"div",
-							{ class: "biab-iconselect__grid" },
+							{ class: "bd-iconselect__grid" },
 							filterIconNames(names, iconQuery.value).map((name) =>
 								h(
 									"button",
 									{
 										key: name,
 										type: "button",
-										class: `biab-iconselect__item${
+										class: `bd-iconselect__item${
 											selected === name ? " is-selected" : ""
 										}`,
 										title: name,
@@ -667,18 +667,18 @@ const BiabFieldTree = defineComponent({
 					const sources = cfg.sources ?? "both";
 					const url = typeof value === "string" ? value : "";
 					const mode = imageModes.value[f.id] ?? "upload";
-					return h("div", { class: "biab-imageinput" }, [
+					return h("div", { class: "bd-imageinput" }, [
 						sources === "both"
 							? h(
 									"div",
-									{ class: "biab-imageinput__modes" },
+									{ class: "bd-imageinput__modes" },
 									(["upload", "url"] as const).map((m) =>
 										h(
 											"button",
 											{
 												key: m,
 												type: "button",
-												class: `biab-imageinput__mode${
+												class: `bd-imageinput__mode${
 													mode === m ? " is-active" : ""
 												}`,
 												"aria-pressed": mode === m,
@@ -696,7 +696,7 @@ const BiabFieldTree = defineComponent({
 							: null,
 						mode === "upload" && sources !== "url"
 							? h("input", {
-									class: "biab-input biab-imageinput__file",
+									class: "bd-input bd-imageinput__file",
 									type: "file",
 									accept: (cfg.allowedTypes ?? ["image/*"]).join(","),
 									onChange: (e: Event) => {
@@ -713,7 +713,7 @@ const BiabFieldTree = defineComponent({
 									},
 								})
 							: h("input", {
-									class: "biab-input biab-imageinput__url",
+									class: "bd-input bd-imageinput__url",
 									type: "url",
 									placeholder:
 										f.placeholder || "https://example.com/image.png",
@@ -723,7 +723,7 @@ const BiabFieldTree = defineComponent({
 								}),
 						cfg.showPreview !== false && url
 							? h("img", {
-									class: "biab-imageinput__preview",
+									class: "bd-imageinput__preview",
 									src: url,
 									alt: "",
 								})
@@ -733,9 +733,9 @@ const BiabFieldTree = defineComponent({
 				case "radio":
 					return h(
 						"div",
-						{ class: "biab-field__radio-group" },
+						{ class: "bd-field__radio-group" },
 						(f.options ?? []).map((opt) =>
-							h("label", { key: opt, class: "biab-field__radio" }, [
+							h("label", { key: opt, class: "bd-field__radio" }, [
 								h("input", {
 									type: "radio",
 									name: id,
@@ -751,9 +751,9 @@ const BiabFieldTree = defineComponent({
 					const arr = Array.isArray(value) ? (value as string[]) : [];
 					return h(
 						"div",
-						{ class: "biab-field__checkbox-group" },
+						{ class: "bd-field__checkbox-group" },
 						(f.options ?? []).map((opt) =>
-							h("label", { key: opt, class: "biab-field__checkbox" }, [
+							h("label", { key: opt, class: "bd-field__checkbox" }, [
 								h("input", {
 									type: "checkbox",
 									checked: arr.includes(opt),
@@ -770,7 +770,7 @@ const BiabFieldTree = defineComponent({
 					);
 				}
 				case "boolean":
-					return h("label", { class: "biab-field__switch" }, [
+					return h("label", { class: "bd-field__switch" }, [
 						h("input", {
 							type: "checkbox",
 							checked: Boolean(value),
@@ -782,7 +782,7 @@ const BiabFieldTree = defineComponent({
 				case "date":
 					return h("input", {
 						type: "date",
-						class: "biab-input biab-field__control",
+						class: "bd-input bd-field__control",
 						value: typeof value === "string" ? value : "",
 						onInput: (e: Event) =>
 							set((e.target as HTMLInputElement).value),
@@ -810,7 +810,7 @@ const BiabFieldTree = defineComponent({
 						return h(
 							"select",
 							{
-								class: "biab-input biab-field__control",
+								class: "bd-input bd-field__control",
 								value: typeof value === "string" ? value : "",
 								onChange: (e: Event) =>
 									set((e.target as HTMLSelectElement).value),
@@ -830,16 +830,16 @@ const BiabFieldTree = defineComponent({
 					const partA = mode === "time_block" ? "start" : "date";
 					const partB = mode === "time_block" ? "end" : "time";
 					const typeA = mode === "time_block" ? "time" : "date";
-					return h("div", { class: "biab-field__grid-2" }, [
+					return h("div", { class: "bd-field__grid-2" }, [
 						h("div", {}, [
 							h(
 								"label",
-								{ class: "biab-field__sublabel" },
+								{ class: "bd-field__sublabel" },
 								mode === "time_block" ? "Start" : "Date",
 							),
 							h("input", {
 								type: typeA,
-								class: "biab-input",
+								class: "bd-input",
 								value: struct[partA] ?? "",
 								onInput: (e: Event) =>
 									set({
@@ -851,12 +851,12 @@ const BiabFieldTree = defineComponent({
 						h("div", {}, [
 							h(
 								"label",
-								{ class: "biab-field__sublabel" },
+								{ class: "bd-field__sublabel" },
 								mode === "time_block" ? "End" : "Time",
 							),
 							h("input", {
 								type: "time",
-								class: "biab-input",
+								class: "bd-input",
 								value: struct[partB] ?? "",
 								onInput: (e: Event) =>
 									set({
@@ -872,12 +872,12 @@ const BiabFieldTree = defineComponent({
 						value && typeof value === "object" && !Array.isArray(value)
 							? (value as Record<string, string>)
 							: {};
-					return h("div", { class: "biab-field__grid-2" }, [
+					return h("div", { class: "bd-field__grid-2" }, [
 						h("div", {}, [
-							h("label", { class: "biab-field__sublabel" }, "Start"),
+							h("label", { class: "bd-field__sublabel" }, "Start"),
 							h("input", {
 								type: "date",
-								class: "biab-input",
+								class: "bd-input",
 								value: struct.start ?? "",
 								onInput: (e: Event) =>
 									set({
@@ -887,10 +887,10 @@ const BiabFieldTree = defineComponent({
 							}),
 						]),
 						h("div", {}, [
-							h("label", { class: "biab-field__sublabel" }, "End"),
+							h("label", { class: "bd-field__sublabel" }, "End"),
 							h("input", {
 								type: "date",
-								class: "biab-input",
+								class: "bd-input",
 								value: struct.end ?? "",
 								onInput: (e: Event) =>
 									set({
@@ -913,15 +913,15 @@ const BiabFieldTree = defineComponent({
 								? `${n}%`
 								: `${n}`;
 					const v = typeof value === "number" ? value : min;
-					return h("div", { class: "biab-field__slider" }, [
-						h("div", { class: "biab-field__slider-scale" }, [
+					return h("div", { class: "bd-field__slider" }, [
+						h("div", { class: "bd-field__slider-scale" }, [
 							h("span", fmt(min)),
-							h("span", { class: "biab-field__slider-value" }, fmt(v)),
+							h("span", { class: "bd-field__slider-value" }, fmt(v)),
 							h("span", fmt(max)),
 						]),
 						h("input", {
 							type: "range",
-							class: "biab-field__slider-input",
+							class: "bd-field__slider-input",
 							min,
 							max,
 							step: stepv,
@@ -936,14 +936,14 @@ const BiabFieldTree = defineComponent({
 					const v = typeof value === "number" ? value : 0;
 					return h(
 						"div",
-						{ class: "biab-field__stars" },
+						{ class: "bd-field__stars" },
 						Array.from({ length: max }).map((_, i) =>
 							h(
 								"button",
 								{
 									key: i,
 									type: "button",
-									class: ["biab-field__star", i < v ? "is-on" : ""],
+									class: ["bd-field__star", i < v ? "is-on" : ""],
 									onClick: () => set(i + 1),
 								},
 								"★",
@@ -955,14 +955,14 @@ const BiabFieldTree = defineComponent({
 					const v = typeof value === "number" ? value : -1;
 					return h(
 						"div",
-						{ class: "biab-field__happiness" },
+						{ class: "bd-field__happiness" },
 						["😞", "😕", "😐", "🙂", "😄"].map((emoji, i) =>
 							h(
 								"button",
 								{
 									key: emoji,
 									type: "button",
-									class: ["biab-field__happy", i === v ? "is-on" : ""],
+									class: ["bd-field__happy", i === v ? "is-on" : ""],
 									onClick: () => set(i),
 								},
 								emoji,
@@ -972,32 +972,145 @@ const BiabFieldTree = defineComponent({
 				}
 				case "stepper": {
 					const v = typeof value === "number" ? value : 0;
-					return h("div", { class: "biab-field__stepper" }, [
+					return h("div", { class: "bd-field__stepper" }, [
 						h(
 							"button",
 							{
 								type: "button",
-								class: "biab-btn biab-btn--ghost biab-field__stepper-btn",
+								class: "bd-btn bd-btn--ghost bd-field__stepper-btn",
 								onClick: () => set(v - 1),
 							},
 							"−",
 						),
 						h(
 							"span",
-							{ class: "biab-field__stepper-value" },
+							{ class: "bd-field__stepper-value" },
 							String(v),
 						),
 						h(
 							"button",
 							{
 								type: "button",
-								class: "biab-btn biab-btn--ghost biab-field__stepper-btn",
+								class: "bd-btn bd-btn--ghost bd-field__stepper-btn",
 								onClick: () => set(v + 1),
 							},
 							"+",
 						),
 					]);
 				}
+				case "name": {
+					const a = (
+						value && typeof value === "object" && !Array.isArray(value)
+							? value
+							: {}
+					) as {
+						prefix?: string;
+						first?: string;
+						middle?: string;
+						last?: string;
+						suffix?: string;
+						nicknames?: string[] | string;
+					};
+					const cfg = f.nameConfig ?? {};
+					// Fixed per-part autofill tokens, suppressed to "off" when autofill
+					// is off for this field (global switch or per-field override).
+					const acOff = autocomplete === "off";
+					const part = (
+						k: "prefix" | "first" | "middle" | "last" | "suffix",
+						label: string,
+						ac: string,
+						placeholder: string,
+						full = false,
+					) =>
+						h(
+							"div",
+							{
+								class: full
+									? "bd-field__name-full"
+									: "bd-field__name-half",
+							},
+							[
+								h("label", { class: "bd-field__sublabel" }, label),
+								h("input", {
+									autocomplete: acOff ? "off" : ac,
+									class: "bd-input",
+									placeholder,
+									value: a[k] ?? "",
+									onInput: (e: Event) =>
+										set({
+											...a,
+											[k]: (e.target as HTMLInputElement).value,
+										}),
+								}),
+							],
+						);
+					// The nicknames input keeps the raw comma-separated string while
+					// the visitor types; submit normalizes it into a string[] (and
+					// the server re-normalizes authoritatively).
+					const nicknamesText = Array.isArray(a.nicknames)
+						? a.nicknames.join(", ")
+						: typeof a.nicknames === "string"
+							? a.nicknames
+							: "";
+					return h("div", { class: "bd-field__name" }, [
+						...(cfg.prefix
+							? [part("prefix", "Title", "honorific-prefix", "Dr.", true)]
+							: []),
+						part("first", "First name", "given-name", "Jane"),
+						...(cfg.middle
+							? [
+									part(
+										"middle",
+										"Middle name",
+										"additional-name",
+										"Quinn",
+									),
+								]
+							: []),
+						part(
+							"last",
+							"Last name",
+							"family-name",
+							"Doe",
+							cfg.middle === true && cfg.suffix !== true,
+						),
+						...(cfg.suffix
+							? [
+									part(
+										"suffix",
+										"Suffix",
+										"honorific-suffix",
+										"Jr.",
+										cfg.middle !== true,
+									),
+								]
+							: []),
+						...(cfg.nicknames
+							? [
+									h("div", { class: "bd-field__name-full" }, [
+										h(
+											"label",
+											{ class: "bd-field__sublabel" },
+											"Nicknames",
+										),
+										h("input", {
+											class: "bd-input",
+											placeholder:
+												"Johnny, JM — separate with commas",
+											value: nicknamesText,
+											onInput: (e: Event) =>
+												set({
+													...a,
+													nicknames: (
+														e.target as HTMLInputElement
+													).value,
+												}),
+										}),
+									]),
+								]
+							: []),
+					]);
+				}
 				case "address": {
 					const a =
 						value && typeof value === "object" && !Array.isArray(value)
@@ -1016,14 +1129,14 @@ const BiabFieldTree = defineComponent({
 							"div",
 							{
 								class: full
-									? "biab-field__addr-full"
-									: "biab-field__addr-half",
+									? "bd-field__addr-full"
+									: "bd-field__addr-half",
 							},
 							[
-								h("label", { class: "biab-field__sublabel" }, label),
+								h("label", { class: "bd-field__sublabel" }, label),
 								h("input", {
 									autocomplete: acOff ? "off" : ac,
-									class: "biab-input",
+									class: "bd-input",
 									value: a[k] ?? "",
 									onInput: (e: Event) =>
 										set({
@@ -1033,7 +1146,7 @@ const BiabFieldTree = defineComponent({
 								}),
 							],
 						);
-					return h("div", { class: "biab-field__address" }, [
+					return h("div", { class: "bd-field__address" }, [
 						part("line1", "Address Line 1", "street-address", true),
 						part("line2", "Address Line 2", "address-line2", true),
 						part("city", "City", "address-level2"),
@@ -1045,12 +1158,12 @@ const BiabFieldTree = defineComponent({
 					const v = typeof value === "string" ? value : "";
 					return h(
 						"div",
-						{ class: "biab-field__colors" },
+						{ class: "bd-field__colors" },
 						(f.options ?? []).map((color) =>
 							h("button", {
 								key: color,
 								type: "button",
-								class: ["biab-field__color", v === color ? "is-on" : ""],
+								class: ["bd-field__color", v === color ? "is-on" : ""],
 								style: { backgroundColor: color },
 								title: color,
 								onClick: () => set(color),
@@ -1065,10 +1178,10 @@ const BiabFieldTree = defineComponent({
 					const maxFiles = f.fileConfig?.maxFiles ?? 1;
 					const allowed = f.fileConfig?.allowedTypes;
 					const remaining = Math.max(maxFiles - files.length, 0);
-					return h("div", { class: "biab-field__file" }, [
+					return h("div", { class: "bd-field__file" }, [
 						h("input", {
 							type: "file",
-							class: "biab-field__file-input",
+							class: "bd-field__file-input",
 							multiple: maxFiles > 1,
 							accept:
 								allowed && allowed.length
@@ -1080,27 +1193,27 @@ const BiabFieldTree = defineComponent({
 						files.length
 							? h(
 									"ul",
-									{ class: "biab-field__file-list" },
+									{ class: "bd-field__file-list" },
 									files.map((file, idx) =>
 										h(
 											"li",
-											{ key: idx, class: "biab-field__file-item" },
+											{ key: idx, class: "bd-field__file-item" },
 											[
 												h(
 													"span",
-													{ class: "biab-field__file-name" },
+													{ class: "bd-field__file-name" },
 													file.name,
 												),
 												h(
 													"span",
-													{ class: "biab-field__file-size" },
+													{ class: "bd-field__file-size" },
 													`${Math.round(file.size / 1024)} KB`,
 												),
 												h(
 													"button",
 													{
 														type: "button",
-														class: "biab-field__file-remove",
+														class: "bd-field__file-remove",
 														"aria-label": "Remove file",
 														onClick: () => p.ctx.removeFile(id, idx),
 													},
@@ -1117,7 +1230,7 @@ const BiabFieldTree = defineComponent({
 					return h("input", {
 						autocomplete,
 						type: "tel",
-						class: "biab-input biab-field__control",
+						class: "bd-input bd-field__control",
 						value: typeof value === "string" ? value : "",
 						placeholder:
 							f.placeholder ||
@@ -1131,7 +1244,7 @@ const BiabFieldTree = defineComponent({
 					return h("input", {
 						autocomplete,
 						type: "email",
-						class: "biab-input biab-field__control",
+						class: "bd-input bd-field__control",
 						value: typeof value === "string" ? value : "",
 						placeholder: f.placeholder || "you@example.com",
 						onInput: (e: Event) =>
@@ -1140,7 +1253,7 @@ const BiabFieldTree = defineComponent({
 				case "number":
 					return h("input", {
 						type: "number",
-						class: "biab-input biab-field__control",
+						class: "bd-input bd-field__control",
 						value:
 							typeof value === "number"
 								? value
@@ -1156,7 +1269,7 @@ const BiabFieldTree = defineComponent({
 				default:
 					return h("input", {
 						autocomplete,
-						class: "biab-input biab-field__control",
+						class: "bd-input bd-field__control",
 						value: typeof value === "string" ? value : "",
 						placeholder: f.placeholder || "",
 						onInput: (e: Event) =>
@@ -1172,21 +1285,21 @@ const BiabFieldTree = defineComponent({
 				"div",
 				{
 					"data-field-id": f.id,
-					"data-biab-field": cssKey(f),
-					"data-biab-type": f.type,
+					"data-bd-field": cssKey(f),
+					"data-bd-type": f.type,
 					class: [
-						"biab-field",
-						`biab-field--${f.type}`,
-						f.required ? "biab-field--required" : "",
-						errored ? "biab-field--error" : "",
+						"bd-field",
+						`bd-field--${f.type}`,
+						f.required ? "bd-field--required" : "",
+						errored ? "bd-field--error" : "",
 					],
 				},
 				[
 					showLabel
-						? h("label", { class: "biab-field__label biab-label" }, [
+						? h("label", { class: "bd-field__label bd-label" }, [
 								f.label || "",
 								f.required
-									? h("span", { class: "biab-field__required" }, " *")
+									? h("span", { class: "bd-field__required" }, " *")
 									: null,
 							])
 						: null,
@@ -1194,12 +1307,12 @@ const BiabFieldTree = defineComponent({
 					errored
 						? h(
 								"p",
-								{ class: "biab-field__error" },
+								{ class: "bd-field__error" },
 								p.ctx.errors[f.id]?.message ?? "This field is required.",
 							)
 						: null,
 					f.helpText
-						? h("p", { class: "biab-field__help" }, f.helpText)
+						? h("p", { class: "bd-field__help" }, f.helpText)
 						: null,
 				],
 			);
@@ -1218,14 +1331,14 @@ const BiabFieldTree = defineComponent({
 					"div",
 					{
 						key: f.id,
-						"data-biab-group": cssKey(f),
-						class: ["biab-group", p.flat ? "biab-group--flat" : ""],
+						"data-bd-group": cssKey(f),
+						class: ["bd-group", p.flat ? "bd-group--flat" : ""],
 					},
 					[
 						f.label && f.showGroupLabel === true
-							? h("div", { class: "biab-group__label" }, f.label)
+							? h("div", { class: "bd-group__label" }, f.label)
 							: null,
-						h(BiabFieldTree, {
+						h(BdFieldTree, {
 							nodes: shown,
 							flat: p.flat,
 							ctx: p.ctx,
@@ -1236,7 +1349,7 @@ const BiabFieldTree = defineComponent({
 			// condition_block
 			if (f.type === "condition_block") {
 				if (!evalCondition(f.conditionRule, p.ctx.values)) return null;
-				return h(BiabFieldTree, {
+				return h(BdFieldTree, {
 					key: f.id,
 					nodes: (f.children ?? []) as FormCoreField[],
 					flat: p.flat,
@@ -1256,29 +1369,29 @@ const BiabFieldTree = defineComponent({
 					"div",
 					{
 						key: f.id,
-						class: ["biab-or", errored ? "biab-or--error" : ""],
-						"data-biab-field": cssKey(f),
+						class: ["bd-or", errored ? "bd-or--error" : ""],
+						"data-bd-field": cssKey(f),
 					},
 					[
 						f.label
-							? h("div", { class: "biab-or__label" }, [
+							? h("div", { class: "bd-or__label" }, [
 									f.label,
 									h(
 										"span",
-										{ class: "biab-or__hint" },
+										{ class: "bd-or__hint" },
 										" Fill at least one side",
 									),
 								])
 							: null,
-						h("div", { class: "biab-or__grid" }, [
-							h("div", { class: "biab-or__side" }, [
+						h("div", { class: "bd-or__grid" }, [
+							h("div", { class: "bd-or__side" }, [
 								h(
 									"div",
-									{ class: "biab-or__side-label" },
+									{ class: "bd-or__side-label" },
 									cfg.leftLabel || "Option A",
 								),
 								left
-									? h(BiabFieldTree, {
+									? h(BdFieldTree, {
 											nodes: [left],
 											flat: p.flat,
 											ctx: p.ctx,
@@ -1287,17 +1400,17 @@ const BiabFieldTree = defineComponent({
 							]),
 							h(
 								"div",
-								{ class: "biab-or__divider" },
+								{ class: "bd-or__divider" },
 								h("span", "OR"),
 							),
-							h("div", { class: "biab-or__side" }, [
+							h("div", { class: "bd-or__side" }, [
 								h(
 									"div",
-									{ class: "biab-or__side-label" },
+									{ class: "bd-or__side-label" },
 									cfg.rightLabel || "Option B",
 								),
 								right
-									? h(BiabFieldTree, {
+									? h(BdFieldTree, {
 											nodes: [right],
 											flat: p.flat,
 											ctx: p.ctx,
@@ -1308,7 +1421,7 @@ const BiabFieldTree = defineComponent({
 						errored
 							? h(
 									"p",
-									{ class: "biab-or__error" },
+									{ class: "bd-or__error" },
 									"Fill in at least one side to continue.",
 								)
 							: null,
@@ -1328,16 +1441,16 @@ const BiabFieldTree = defineComponent({
 					{
 						key: f.id,
 						class: [
-							"biab-flex-row",
-							`biab-flex-row--justify-${justify}`,
-							`biab-flex-row--align-${align}`,
+							"bd-flex-row",
+							`bd-flex-row--justify-${justify}`,
+							`bd-flex-row--align-${align}`,
 						],
 						style: { gap: `${cfg.gap ?? 12}px` },
 					},
 					(f.children ?? []).map((child) =>
 						h(
 							"div",
-							{ key: child.id, class: "biab-flex-row__item" },
+							{ key: child.id, class: "bd-flex-row__item" },
 							renderFieldRow(child as FormCoreField),
 						),
 					),
@@ -1350,7 +1463,7 @@ const BiabFieldTree = defineComponent({
 		return () =>
 			h(
 				"div",
-				{ class: "biab-tree" },
+				{ class: "bd-tree" },
 				p.nodes.map((n) => renderNode(n)),
 			);
 	},
@@ -1361,17 +1474,17 @@ const BiabFieldTree = defineComponent({
 	<!-- Loading / idle gate -->
 	<div
 		v-if="snap.status === 'loading' || snap.status === 'idle'"
-		class="biab-form biab-form--loading"
+		class="bd-form bd-form--loading"
 	>
 		<slot name="loading">
-			<p class="biab-form__loading">Loading form…</p>
+			<p class="bd-form__loading">Loading form…</p>
 		</slot>
 	</div>
 
 	<!-- Schema-load error gate -->
-	<div v-else-if="snap.status === 'error'" class="biab-form biab-form--error">
+	<div v-else-if="snap.status === 'error'" class="bd-form bd-form--error">
 		<slot name="error" :message="snap.loadError">
-			<p class="biab-form__load-error">
+			<p class="bd-form__load-error">
 				{{ snap.loadError ?? "This form could not be loaded." }}
 			</p>
 		</slot>
@@ -1381,14 +1494,14 @@ const BiabFieldTree = defineComponent({
 	<div
 		v-else-if="effectiveSubmitted && !hideSuccess"
 		:class="rootClass"
-		data-biab-state="submitted"
+		data-bd-state="submitted"
 	>
 		<slot name="success" :result="effectiveResult">
-			<div class="biab-form__success">
-				<h2 class="biab-form__success-title">
+			<div class="bd-form__success">
+				<h2 class="bd-form__success-title">
 					{{ snap.title ?? "Thank you" }}
 				</h2>
-				<p class="biab-form__success-body">Your submission was received.</p>
+				<p class="bd-form__success-body">Your submission was received.</p>
 			</div>
 		</slot>
 	</div>
@@ -1400,31 +1513,31 @@ const BiabFieldTree = defineComponent({
 			v-if="snap.orgIcon"
 			:src="snap.orgIcon"
 			alt=""
-			class="biab-form__org-icon"
+			class="bd-form__org-icon"
 			style="position: absolute; right: 0; top: 0"
 		/>
 
 		<!-- Title / description -->
-		<div v-if="snap.title || snap.description" class="biab-form__header">
-			<h2 v-if="snap.title" class="biab-form__title">{{ snap.title }}</h2>
-			<p v-if="snap.description" class="biab-form__description">
+		<div v-if="snap.title || snap.description" class="bd-form__header">
+			<h2 v-if="snap.title" class="bd-form__title">{{ snap.title }}</h2>
+			<p v-if="snap.description" class="bd-form__description">
 				{{ snap.description }}
 			</p>
 		</div>
 
 		<!-- Progress: labeled steps -->
-		<div v-if="showStepsProgress" class="biab-progress biab-progress--steps">
-			<div class="biab-progress__heading">Form Progress</div>
-			<div class="biab-progress__track">
+		<div v-if="showStepsProgress" class="bd-progress bd-progress--steps">
+			<div class="bd-progress__heading">Form Progress</div>
+			<div class="bd-progress__track">
 				<template v-for="(s, i) in snap.steps" :key="`progress-${i}`">
 					<div
 						v-if="i > 0"
-						class="biab-progress__connector"
+						class="bd-progress__connector"
 						:class="{ 'is-done': i <= snap.step }"
 					/>
-					<div class="biab-progress__step">
+					<div class="bd-progress__step">
 						<span
-							class="biab-progress__dot"
+							class="bd-progress__dot"
 							:class="{
 								'is-current': i === snap.step,
 								'is-done': i < snap.step,
@@ -1434,7 +1547,7 @@ const BiabFieldTree = defineComponent({
 							<span v-else>{{ i + 1 }}</span>
 						</span>
 						<span
-							class="biab-progress__label"
+							class="bd-progress__label"
 							:class="{ 'is-current': i === snap.step }"
 							>{{ stepTitle(s, i) }}</span
 						>
@@ -1444,13 +1557,13 @@ const BiabFieldTree = defineComponent({
 		</div>
 
 		<!-- Progress: thin bar -->
-		<div v-if="showBarProgress" class="biab-progress biab-progress--bar">
-			<span class="biab-progress__count"
+		<div v-if="showBarProgress" class="bd-progress bd-progress--bar">
+			<span class="bd-progress__count"
 				>{{ snap.step + 1 }} / {{ snap.stepCount }}</span
 			>
-			<div class="biab-progress__bar-track">
+			<div class="bd-progress__bar-track">
 				<div
-					class="biab-progress__bar-fill"
+					class="bd-progress__bar-fill"
 					:style="{ width: `${snap.progressPercent}%` }"
 				/>
 			</div>
@@ -1459,22 +1572,22 @@ const BiabFieldTree = defineComponent({
 		<!-- Form-level error summary -->
 		<div
 			v-if="snap.errorList.length > 0"
-			class="biab-form__errors"
+			class="bd-form__errors"
 			role="alert"
 		>
-			<div class="biab-form__errors-title">
+			<div class="bd-form__errors-title">
 				Please complete the highlighted required field{{
 					snap.errorList.length === 1 ? "" : "s"
 				}}.
 			</div>
-			<div class="biab-form__errors-list">
+			<div class="bd-form__errors-list">
 				{{ snap.errorList.map((er) => er.label).join(", ") }}
 			</div>
 		</div>
 
 		<!-- Field tree for the active step (single-page = all fields) -->
 		<div :key="`step-${snap.step}`" :class="entranceClass">
-			<BiabFieldTree
+			<BdFieldTree
 				:nodes="snap.visibleFields"
 				:flat="isConsecutive"
 				:ctx="fieldCtx"
@@ -1482,10 +1595,10 @@ const BiabFieldTree = defineComponent({
 		</div>
 
 		<!-- Navigation -->
-		<div v-if="isMultiStep" class="biab-nav">
+		<div v-if="isMultiStep" class="bd-nav">
 			<button
 				type="button"
-				class="biab-btn biab-btn--back"
+				class="bd-btn bd-btn--back"
 				:disabled="snap.isFirstStep"
 				@click="controller.back()"
 			>
@@ -1494,7 +1607,7 @@ const BiabFieldTree = defineComponent({
 			<button
 				v-if="!snap.isLastStep"
 				type="button"
-				class="biab-btn biab-btn--next"
+				class="bd-btn bd-btn--next"
 				:disabled="!snap.canAdvance"
 				@click="controller.next()"
 			>
@@ -1503,7 +1616,7 @@ const BiabFieldTree = defineComponent({
 			<button
 				v-else
 				type="button"
-				class="biab-btn biab-btn--submit"
+				class="bd-btn bd-btn--submit"
 				:disabled="submitDisabled"
 				@click="handleSubmit()"
 			>
@@ -1511,10 +1624,10 @@ const BiabFieldTree = defineComponent({
 			</button>
 		</div>
 
-		<div v-else class="biab-nav">
+		<div v-else class="bd-nav">
 			<button
 				type="button"
-				class="biab-btn biab-btn--submit"
+				class="bd-btn bd-btn--submit"
 				:disabled="submitDisabled"
 				@click="handleSubmit()"
 			>
@@ -1529,7 +1642,7 @@ const BiabFieldTree = defineComponent({
 				!effectiveResult.ok &&
 				snap.errorList.length === 0
 			"
-			class="biab-form__submit-error"
+			class="bd-form__submit-error"
 			role="alert"
 		>
 			{{ effectiveResult.message }}