@businessdash/sdk 0.9.81 → 0.9.90

package/dist/vanilla.js

@@ -1,17 +1,17 @@
 /**
- * `@businessdash/sdk/vanilla` — framework-free imperative DOM binding for `<BiabForm>`.
+ * `@businessdash/sdk/vanilla` — framework-free imperative DOM binding for `<BdForm>`.
  *
- * `mountBiabForm(elOrSelector, opts)` mounts a fully-rendered, schema-driven form
+ * `mountBdForm(elOrSelector, opts)` mounts a fully-rendered, schema-driven form
  * into any DOM node. It owns nothing of the form's logic — all of that lives in
  * the headless `createFormController` core (`@businessdash/sdk/forms`). This binding
  * is the "render layer": it subscribes to the controller's `snapshot()` and, on
  * every notify, rebuilds the form's DOM by walking `snapshot.visibleFields` and
  * dispatching per field `type`. It is a faithful port of the dashboard renderer
- * (`FormPreview.tsx`) so a drop-in `<biab-form>` reproduces the builder preview.
+ * (`FormPreview.tsx`) so a drop-in `<bd-form>` reproduces the builder preview.
  *
  * Rendering rules (kept identical to the dashboard):
  *   - Light DOM, no shadow root, so the consumer's CSS cascades straight in.
- *   - Stable `biab-*` class hooks + `data-biab-*` attributes on every node.
+ *   - Stable `bd-*` class hooks + `data-bd-*` attributes on every node.
  *   - Applies `schema.settings`: animation (none/fade/slide/scale/scroll),
  *     multi-step ("consecutive") nav, progress bar/steps, concurrent-reveal
  *     gating inside groups, plus the org icon when `showOrgIcon` is set.
@@ -19,7 +19,7 @@
  *     walked exactly as the core's validation helpers expect.
  *
  * Compiled to dist (plain TS, no JSX). The web-component binding
- * (`@businessdash/sdk/element`) wraps this same `mountBiabForm`.
+ * (`@businessdash/sdk/element`) wraps this same `mountBdForm`.
  */
 import { resolveFieldAutocomplete, } from "./forms-core/autocomplete.js";
 import { concurrentRevealCount, createFormController, evalCondition, } from "./forms-core/index.js";
@@ -65,17 +65,17 @@ function fieldCssKey(field) {
 }
 const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 /** tw-style entrance class hook for the active step (consumer CSS animates these).
- *  Matches the `biab-anim--*` convention so orgs can target each animation. */
+ *  Matches the `bd-anim--*` convention so orgs can target each animation. */
 function animClass(animation, forward) {
     switch (animation) {
         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 forward
-                ? "biab-anim biab-anim--slide biab-anim--slide-forward"
-                : "biab-anim biab-anim--slide biab-anim--slide-back";
+                ? "bd-anim bd-anim--slide bd-anim--slide-forward"
+                : "bd-anim bd-anim--slide bd-anim--slide-back";
         default:
             return "";
     }
@@ -93,22 +93,22 @@ function setAutocomplete(el, token) {
 function renderFieldInput(field, snapshot, set, upload, autoComplete) {
     const value = snapshot.values[field.id];
     const str = typeof value === "string" ? value : "";
-    // Address composite suppresses its fixed sub-field tokens to "off" when the
-    // field's resolved token is "off" (global switch or per-field override).
+    // Address/name composites suppress their fixed sub-field tokens to "off" when
+    // the field's resolved token is "off" (global switch or per-field override).
     const acOff = autoComplete === "off";
     switch (field.type) {
         case "title":
-            return el("h2", { class: "biab-field__title" }, [
+            return el("h2", { class: "bd-field__title" }, [
                 field.label || "Untitled",
             ]);
         case "subtitle":
-            return el("h3", { class: "biab-field__subtitle" }, [field.label || ""]);
+            return el("h3", { class: "bd-field__subtitle" }, [field.label || ""]);
         case "separator":
-            return el("hr", { class: "biab-field__separator" });
+            return el("hr", { class: "bd-field__separator" });
         case "richtext": {
             if (!field.content)
                 return null;
-            const div = el("div", { class: "biab-field__richtext biab-prose" });
+            const div = el("div", { class: "bd-field__richtext bd-prose" });
             // The published `content` is server-sanitized HTML.
             div.innerHTML = field.content;
             return div;
@@ -118,7 +118,7 @@ function renderFieldInput(field, snapshot, set, upload, autoComplete) {
             if (!cfg.src)
                 return null;
             return el("img", {
-                class: "biab-field__image",
+                class: "bd-field__image",
                 src: cfg.src,
                 alt: cfg.alt || "",
                 ...(cfg.width ? { width: cfg.width } : {}),
@@ -128,7 +128,7 @@ function renderFieldInput(field, snapshot, set, upload, autoComplete) {
         case "textarea": {
             const cfg = (field["textareaConfig"] ?? {});
             const node = el("textarea", {
-                class: classNames("biab-textarea", cfg.resizable === false && "biab-textarea--fixed"),
+                class: classNames("bd-textarea", cfg.resizable === false && "bd-textarea--fixed"),
                 rows: cfg.rows ?? 4,
                 placeholder: field.placeholder || "",
             });
@@ -138,7 +138,7 @@ function renderFieldInput(field, snapshot, set, upload, autoComplete) {
             return node;
         }
         case "select": {
-            const node = el("select", { class: "biab-select" });
+            const node = el("select", { class: "bd-select" });
             node.append(el("option", { value: "" }, [field.placeholder || "Select..."]));
             for (const opt of field.options ?? []) {
                 node.append(el("option", { value: opt }, [opt]));
@@ -148,11 +148,11 @@ function renderFieldInput(field, snapshot, set, upload, autoComplete) {
             return node;
         }
         case "radio": {
-            const wrap = el("div", { class: "biab-radio-group" });
+            const wrap = el("div", { class: "bd-radio-group" });
             for (const opt of field.options ?? []) {
                 const id = `${field.id}-${opt}`;
                 const input = el("input", {
-                    class: "biab-radio",
+                    class: "bd-radio",
                     type: "radio",
                     name: field.id,
                     id,
@@ -160,7 +160,7 @@ function renderFieldInput(field, snapshot, set, upload, autoComplete) {
                 });
                 input.checked = str === opt;
                 input.addEventListener("change", () => set(opt));
-                wrap.append(el("label", { class: "biab-radio-option", for: id }, [
+                wrap.append(el("label", { class: "bd-radio-option", for: id }, [
                     input,
                     el("span", {}, [opt]),
                 ]));
@@ -169,10 +169,10 @@ function renderFieldInput(field, snapshot, set, upload, autoComplete) {
         }
         case "checkbox": {
             const arr = Array.isArray(value) ? value : [];
-            const wrap = el("div", { class: "biab-checkbox-group" });
+            const wrap = el("div", { class: "bd-checkbox-group" });
             for (const opt of field.options ?? []) {
                 const input = el("input", {
-                    class: "biab-checkbox",
+                    class: "bd-checkbox",
                     type: "checkbox",
                     value: opt,
                 });
@@ -183,7 +183,7 @@ function renderFieldInput(field, snapshot, set, upload, autoComplete) {
                         : arr.filter((x) => x !== opt);
                     set(next);
                 });
-                wrap.append(el("label", { class: "biab-checkbox-option" }, [
+                wrap.append(el("label", { class: "bd-checkbox-option" }, [
                     input,
                     el("span", {}, [opt]),
                 ]));
@@ -192,21 +192,21 @@ function renderFieldInput(field, snapshot, set, upload, autoComplete) {
         }
         case "boolean": {
             const input = el("input", {
-                class: "biab-switch",
+                class: "bd-switch",
                 type: "checkbox",
             });
             input.checked = value === true;
             input.addEventListener("change", () => set(input.checked));
-            return el("label", { class: "biab-boolean" }, [
+            return el("label", { class: "bd-boolean" }, [
                 input,
-                el("span", { class: "biab-boolean__label" }, [
+                el("span", { class: "bd-boolean__label" }, [
                     field.placeholder || "Yes / No",
                 ]),
             ]);
         }
         case "date": {
             const node = el("input", {
-                class: "biab-input",
+                class: "bd-input",
                 type: "date",
             });
             node.value = str;
@@ -215,7 +215,7 @@ function renderFieldInput(field, snapshot, set, upload, autoComplete) {
         }
         case "email": {
             const node = el("input", {
-                class: "biab-input",
+                class: "bd-input",
                 type: "email",
                 placeholder: field.placeholder || "you@example.com",
             });
@@ -225,14 +225,14 @@ function renderFieldInput(field, snapshot, set, upload, autoComplete) {
             return node;
         }
         case "phone": {
-            const wrap = el("div", { class: "biab-phone" });
+            const wrap = el("div", { class: "bd-phone" });
             if (field.phoneConfig?.showFlags) {
-                wrap.append(el("span", { class: "biab-phone__flag", "aria-hidden": "true" }, [
+                wrap.append(el("span", { class: "bd-phone__flag", "aria-hidden": "true" }, [
                     "\u{1F1FA}\u{1F1F8}",
                 ]));
             }
             const node = el("input", {
-                class: "biab-input",
+                class: "bd-input",
                 type: "tel",
                 placeholder: field.placeholder ||
                     (field.phoneConfig?.international
@@ -247,7 +247,7 @@ function renderFieldInput(field, snapshot, set, upload, autoComplete) {
         }
         case "number": {
             const node = el("input", {
-                class: "biab-input",
+                class: "bd-input",
                 type: "number",
                 placeholder: field.placeholder || "",
             });
@@ -259,12 +259,12 @@ function renderFieldInput(field, snapshot, set, upload, autoComplete) {
         }
         case "stepper": {
             const v = typeof value === "number" ? value : 0;
-            const out = el("span", { class: "biab-stepper__value" }, [String(v)]);
-            const minus = el("button", { class: "biab-btn biab-btn--ghost biab-stepper__btn", type: "button" }, ["−"]);
-            const plus = el("button", { class: "biab-btn biab-btn--ghost biab-stepper__btn", type: "button" }, ["+"]);
+            const out = el("span", { class: "bd-stepper__value" }, [String(v)]);
+            const minus = el("button", { class: "bd-btn bd-btn--ghost bd-stepper__btn", type: "button" }, ["−"]);
+            const plus = el("button", { class: "bd-btn bd-btn--ghost bd-stepper__btn", type: "button" }, ["+"]);
             minus.addEventListener("click", () => set(v - 1));
             plus.addEventListener("click", () => set(v + 1));
-            return el("div", { class: "biab-stepper" }, [minus, out, plus]);
+            return el("div", { class: "bd-stepper" }, [minus, out, plus]);
         }
         case "slider": {
             const min = field.sliderConfig?.min ?? 0;
@@ -273,9 +273,9 @@ function renderFieldInput(field, snapshot, set, upload, autoComplete) {
             const unit = field.sliderConfig?.unit;
             const fmt = (n) => unit === "currency" ? `$${n}` : unit === "percent" ? `${n}%` : `${n}`;
             const v = typeof value === "number" ? value : min;
-            const readout = el("span", { class: "biab-slider__value" }, [fmt(v)]);
+            const readout = el("span", { class: "bd-slider__value" }, [fmt(v)]);
             const input = el("input", {
-                class: "biab-slider",
+                class: "bd-slider",
                 type: "range",
                 min,
                 max,
@@ -287,8 +287,8 @@ function renderFieldInput(field, snapshot, set, upload, autoComplete) {
                 readout.textContent = fmt(n);
                 set(n);
             });
-            return el("div", { class: "biab-slider-wrap" }, [
-                el("div", { class: "biab-slider__scale" }, [
+            return el("div", { class: "bd-slider-wrap" }, [
+                el("div", { class: "bd-slider__scale" }, [
                     el("span", {}, [fmt(min)]),
                     readout,
                     el("span", {}, [fmt(max)]),
@@ -299,10 +299,10 @@ function renderFieldInput(field, snapshot, set, upload, autoComplete) {
         case "star_rating": {
             const max = field.starRatingConfig?.maxStars ?? 5;
             const v = typeof value === "number" ? value : 0;
-            const wrap = el("div", { class: "biab-stars" });
+            const wrap = el("div", { class: "bd-stars" });
             for (let i = 0; i < max; i++) {
                 const btn = el("button", {
-                    class: classNames("biab-star", i < v && "biab-star--filled"),
+                    class: classNames("bd-star", i < v && "bd-star--filled"),
                     type: "button",
                     "aria-label": `${i + 1} star${i === 0 ? "" : "s"}`,
                 }, ["★"]);
@@ -313,10 +313,10 @@ function renderFieldInput(field, snapshot, set, upload, autoComplete) {
         }
         case "happiness_rating": {
             const v = typeof value === "number" ? value : -1;
-            const wrap = el("div", { class: "biab-happiness" });
+            const wrap = el("div", { class: "bd-happiness" });
             ["\u{1F61E}", "\u{1F615}", "\u{1F610}", "\u{1F642}", "\u{1F604}"].forEach((emoji, i) => {
                 const btn = el("button", {
-                    class: classNames("biab-happiness__face", i === v && "biab-happiness__face--active"),
+                    class: classNames("bd-happiness__face", i === v && "bd-happiness__face--active"),
                     type: "button",
                 }, [emoji]);
                 btn.addEventListener("click", () => set(i));
@@ -326,10 +326,10 @@ function renderFieldInput(field, snapshot, set, upload, autoComplete) {
         }
         case "color_picker": {
             const v = str;
-            const wrap = el("div", { class: "biab-colors" });
+            const wrap = el("div", { class: "bd-colors" });
             for (const color of field.options ?? []) {
                 const btn = el("button", {
-                    class: classNames("biab-color", v === color && "biab-color--selected"),
+                    class: classNames("bd-color", v === color && "bd-color--selected"),
                     type: "button",
                     title: color,
                     style: `background-color:${color}`,
@@ -351,7 +351,7 @@ function renderFieldInput(field, snapshot, set, upload, autoComplete) {
                 const format = field.timeConfig?.format ?? "12h";
                 const step = Math.max(field.timeConfig?.stepMinutes ?? 30, 1);
                 const node = el("select", {
-                    class: "biab-select",
+                    class: "bd-select",
                 });
                 node.append(el("option", { value: "" }, [field.placeholder || "Select time"]));
                 for (let h = 0; h < 24; h++) {
@@ -380,19 +380,68 @@ function renderFieldInput(field, snapshot, set, upload, autoComplete) {
                 : { date: "", time: "" };
             return twoField("Date", v.date ?? "", "Time", v.time ?? "", ["date", "time"], (date, time) => set({ ...v, date, time }));
         }
+        case "name": {
+            const v = (value && typeof value === "object" ? value : {});
+            const cfg = field.nameConfig ?? {};
+            const grid = el("div", { class: "bd-name" });
+            // Fixed per-sub-field autofill tokens, suppressed to "off" when the
+            // composite's resolved token is "off". Mirrors the React renderer.
+            const part = (key, label, token, placeholder, full = false) => {
+                const input = el("input", {
+                    class: "bd-input",
+                    placeholder,
+                });
+                setAutocomplete(input, acOff ? "off" : token);
+                input.value = v[key] ?? "";
+                input.addEventListener("input", () => set({ ...v, [key]: input.value }));
+                return el("label", {
+                    class: classNames("bd-name__field", full && "bd-name__field--full"),
+                }, [el("span", { class: "bd-name__label" }, [label]), input]);
+            };
+            if (cfg.prefix) {
+                grid.append(part("prefix", "Title", "honorific-prefix", "Dr.", true));
+            }
+            grid.append(part("first", "First name", "given-name", "Jane"));
+            if (cfg.middle) {
+                grid.append(part("middle", "Middle name", "additional-name", "Quinn"));
+            }
+            grid.append(part("last", "Last name", "family-name", "Doe", cfg.middle === true && cfg.suffix !== true));
+            if (cfg.suffix) {
+                grid.append(part("suffix", "Suffix", "honorific-suffix", "Jr.", cfg.middle !== true));
+            }
+            if (cfg.nicknames) {
+                // The nicknames input keeps the raw comma-separated string while the
+                // visitor types; submit normalizes it into a string[].
+                const input = el("input", {
+                    class: "bd-input",
+                    placeholder: "Johnny, JM — separate with commas",
+                });
+                input.value = Array.isArray(v.nicknames)
+                    ? v.nicknames.join(", ")
+                    : typeof v.nicknames === "string"
+                        ? v.nicknames
+                        : "";
+                input.addEventListener("input", () => set({ ...v, nicknames: input.value }));
+                grid.append(el("label", { class: "bd-name__field bd-name__field--full" }, [
+                    el("span", { class: "bd-name__label" }, ["Nicknames"]),
+                    input,
+                ]));
+            }
+            return grid;
+        }
         case "address": {
             const v = (value && typeof value === "object" ? value : {});
-            const grid = el("div", { class: "biab-address" });
+            const grid = el("div", { class: "bd-address" });
             // Fixed per-sub-field autofill tokens, suppressed to "off" when the
             // composite's resolved token is "off". Mirrors the React renderer.
             const part = (key, label, token, full = false) => {
-                const input = el("input", { class: "biab-input" });
+                const input = el("input", { class: "bd-input" });
                 setAutocomplete(input, acOff ? "off" : token);
                 input.value = v[key] ?? "";
                 input.addEventListener("input", () => set({ ...v, [key]: input.value }));
                 return el("label", {
-                    class: classNames("biab-address__field", full && "biab-address__field--full"),
-                }, [el("span", { class: "biab-address__label" }, [label]), input]);
+                    class: classNames("bd-address__field", full && "bd-address__field--full"),
+                }, [el("span", { class: "bd-address__label" }, [label]), input]);
             };
             grid.append(part("line1", "Address Line 1", "street-address", true), part("line2", "Address Line 2", "address-line2", true), part("city", "City", "address-level2"), part("state", "State", "address-level1"), part("zip", "Zip", "postal-code", true));
             return grid;
@@ -402,9 +451,9 @@ function renderFieldInput(field, snapshot, set, upload, autoComplete) {
             const maxFiles = field.fileConfig?.maxFiles ?? 1;
             const allowed = field.fileConfig?.allowedTypes;
             const remaining = Math.max(maxFiles - files.length, 0);
-            const wrap = el("div", { class: "biab-file" });
+            const wrap = el("div", { class: "bd-file" });
             const input = el("input", {
-                class: "biab-file__input",
+                class: "bd-file__input",
                 type: "file",
                 ...(maxFiles > 1 ? { multiple: true } : {}),
                 ...(allowed && allowed.length > 0 ? { accept: allowed.join(",") } : {}),
@@ -419,7 +468,7 @@ function renderFieldInput(field, snapshot, set, upload, autoComplete) {
                 input.value = "";
             });
             const trigger = el("button", {
-                class: "biab-file__trigger",
+                class: "bd-file__trigger",
                 type: "button",
                 ...(snapshot.uploading || remaining === 0 ? { disabled: true } : {}),
             }, [
@@ -432,17 +481,17 @@ function renderFieldInput(field, snapshot, set, upload, autoComplete) {
             trigger.addEventListener("click", () => input.click());
             wrap.append(input, trigger);
             if (files.length > 0) {
-                const list = el("ul", { class: "biab-file__list" });
+                const list = el("ul", { class: "bd-file__list" });
                 files.forEach((f, idx) => {
                     const remove = el("button", {
-                        class: "biab-file__remove",
+                        class: "bd-file__remove",
                         type: "button",
                         "aria-label": "Remove file",
                     }, ["✕"]);
                     remove.addEventListener("click", () => set(files.filter((_, i) => i !== idx)));
-                    list.append(el("li", { class: "biab-file__item" }, [
-                        el("span", { class: "biab-file__name" }, [f.name]),
-                        el("span", { class: "biab-file__size" }, [
+                    list.append(el("li", { class: "bd-file__item" }, [
+                        el("span", { class: "bd-file__name" }, [f.name]),
+                        el("span", { class: "bd-file__size" }, [
                             `${Math.round(f.size / 1024)} KB`,
                         ]),
                         remove,
@@ -454,7 +503,7 @@ function renderFieldInput(field, snapshot, set, upload, autoComplete) {
         }
         default: {
             const node = el("input", {
-                class: "biab-input",
+                class: "bd-input",
                 type: "text",
                 placeholder: field.placeholder || "",
             });
@@ -469,24 +518,24 @@ function renderFieldInput(field, snapshot, set, upload, autoComplete) {
 function twoField(leftLabel, leftValue, rightLabel, rightValue, type, onChange) {
     const [lt, rt] = Array.isArray(type) ? type : [type, type];
     const left = el("input", {
-        class: "biab-input",
+        class: "bd-input",
         type: lt,
     });
     const right = el("input", {
-        class: "biab-input",
+        class: "bd-input",
         type: rt,
     });
     left.value = leftValue;
     right.value = rightValue;
     left.addEventListener("input", () => onChange(left.value, right.value));
     right.addEventListener("input", () => onChange(left.value, right.value));
-    return el("div", { class: "biab-grid biab-grid--2" }, [
-        el("label", { class: "biab-grid__cell" }, [
-            el("span", { class: "biab-grid__label" }, [leftLabel]),
+    return el("div", { class: "bd-grid bd-grid--2" }, [
+        el("label", { class: "bd-grid__cell" }, [
+            el("span", { class: "bd-grid__label" }, [leftLabel]),
             left,
         ]),
-        el("label", { class: "biab-grid__cell" }, [
-            el("span", { class: "biab-grid__label" }, [rightLabel]),
+        el("label", { class: "bd-grid__cell" }, [
+            el("span", { class: "bd-grid__label" }, [rightLabel]),
             right,
         ]),
     ]);
@@ -496,10 +545,10 @@ function renderFieldRow(field, ctx, flat) {
     const showLabel = !NO_LABEL_TYPES.has(field.type);
     const children = [];
     if (showLabel && field.label) {
-        children.push(el("label", { class: "biab-field__label" }, [
+        children.push(el("label", { class: "bd-field__label" }, [
             field.label,
             field.required
-                ? el("span", { class: "biab-field__required" }, [" *"])
+                ? el("span", { class: "bd-field__required" }, [" *"])
                 : null,
         ]));
     }
@@ -507,26 +556,26 @@ function renderFieldRow(field, ctx, flat) {
     if (input)
         children.push(input);
     if (errored) {
-        children.push(el("p", { class: "biab-field__error" }, [
+        children.push(el("p", { class: "bd-field__error" }, [
             ctx.snapshot.errors[field.id]?.message ?? "This field is required.",
         ]));
     }
     if (field.helpText) {
-        children.push(el("p", { class: "biab-field__help" }, [field.helpText]));
+        children.push(el("p", { class: "bd-field__help" }, [field.helpText]));
     }
     // `flat` is accepted for signature parity with the group renderer; rows look
     // the same flat or nested.
     void flat;
     return el("div", {
-        class: classNames("biab-field", `biab-field--${field.type}`, field.required && "biab-field--required", errored && "biab-field--error"),
+        class: classNames("bd-field", `bd-field--${field.type}`, field.required && "bd-field--required", errored && "bd-field--error"),
         "data-field-id": field.id,
-        "data-biab-field": fieldCssKey(field),
-        "data-biab-type": field.type,
+        "data-bd-field": fieldCssKey(field),
+        "data-bd-type": field.type,
     }, children);
 }
 /** Recursively render a list of fields, handling every layout/condition node. */
 function renderTree(fields, ctx, flat) {
-    const container = el("div", { class: "biab-tree" });
+    const container = el("div", { class: "bd-tree" });
     for (const field of fields) {
         if (field.type === "input_group") {
             const groupChildren = (field.children ?? []);
@@ -538,11 +587,11 @@ function renderTree(fields, ctx, flat) {
                 ? groupChildren.slice(0, revealCount)
                 : groupChildren;
             const groupNode = el("div", {
-                class: classNames("biab-group", flat ? "biab-group--flat" : "biab-group--card"),
-                "data-biab-group": fieldCssKey(field),
+                class: classNames("bd-group", flat ? "bd-group--flat" : "bd-group--card"),
+                "data-bd-group": fieldCssKey(field),
             }, []);
             if (field.label && field.showGroupLabel === true) {
-                groupNode.append(el("div", { class: "biab-group__label" }, [field.label]));
+                groupNode.append(el("div", { class: "bd-group__label" }, [field.label]));
             }
             groupNode.append(renderTree(visible, ctx, flat));
             container.append(groupNode);
@@ -558,25 +607,25 @@ function renderTree(fields, ctx, flat) {
             const errored = Boolean(ctx.snapshot.errors[field.id]);
             const left = field.children?.[0];
             const right = field.children?.[1];
-            const box = el("div", { class: classNames("biab-or", errored && "biab-or--error") }, []);
+            const box = el("div", { class: classNames("bd-or", errored && "bd-or--error") }, []);
             if (field.label) {
-                box.append(el("div", { class: "biab-or__label" }, [
+                box.append(el("div", { class: "bd-or__label" }, [
                     field.label,
-                    el("span", { class: "biab-or__hint" }, [" Fill at least one side"]),
+                    el("span", { class: "bd-or__hint" }, [" Fill at least one side"]),
                 ]));
             }
-            const grid = el("div", { class: "biab-or__grid" }, [
-                el("div", { class: "biab-or__side" }, [
-                    el("div", { class: "biab-or__side-label" }, [
+            const grid = el("div", { class: "bd-or__grid" }, [
+                el("div", { class: "bd-or__side" }, [
+                    el("div", { class: "bd-or__side-label" }, [
                         field.orConditionConfig?.leftLabel || "Option A",
                     ]),
                     left ? renderTree([left], ctx, flat) : null,
                 ]),
-                el("div", { class: "biab-or__divider" }, [
-                    el("span", { class: "biab-or__badge" }, ["OR"]),
+                el("div", { class: "bd-or__divider" }, [
+                    el("span", { class: "bd-or__badge" }, ["OR"]),
                 ]),
-                el("div", { class: "biab-or__side" }, [
-                    el("div", { class: "biab-or__side-label" }, [
+                el("div", { class: "bd-or__side" }, [
+                    el("div", { class: "bd-or__side-label" }, [
                         field.orConditionConfig?.rightLabel || "Option B",
                     ]),
                     right ? renderTree([right], ctx, flat) : null,
@@ -584,7 +633,7 @@ function renderTree(fields, ctx, flat) {
             ]);
             box.append(grid);
             if (errored) {
-                box.append(el("p", { class: "biab-or__error" }, [
+                box.append(el("p", { class: "bd-or__error" }, [
                     "Fill in at least one side to continue.",
                 ]));
             }
@@ -592,9 +641,9 @@ function renderTree(fields, ctx, flat) {
             continue;
         }
         if (field.type === "flex_row") {
-            const row = el("div", { class: "biab-flex-row" }, []);
+            const row = el("div", { class: "bd-flex-row" }, []);
             for (const child of (field.children ?? [])) {
-                row.append(el("div", { class: "biab-flex-row__cell" }, [
+                row.append(el("div", { class: "bd-flex-row__cell" }, [
                     renderFieldRow(child, ctx, flat),
                 ]));
             }
@@ -613,16 +662,16 @@ function renderProgress(snapshot, onJump) {
     if (!settings.isConsecutive || !settings.showProgress || stepCount <= 1)
         return null;
     if (settings.progressStyle === "bar") {
-        const fill = el("div", { class: "biab-progress__fill" });
+        const fill = el("div", { class: "bd-progress__fill" });
         fill.style.width = `${((step + 1) / stepCount) * 100}%`;
-        return el("div", { class: "biab-progress biab-progress--bar" }, [
-            el("span", { class: "biab-progress__count" }, [
+        return el("div", { class: "bd-progress bd-progress--bar" }, [
+            el("span", { class: "bd-progress__count" }, [
                 `${step + 1} / ${stepCount}`,
             ]),
-            el("div", { class: "biab-progress__track" }, [fill]),
+            el("div", { class: "bd-progress__track" }, [fill]),
         ]);
     }
-    const track = el("div", { class: "biab-progress__steps" });
+    const track = el("div", { class: "bd-progress__steps" });
     steps.forEach((s, i) => {
         const f = s[0];
         const title = (typeof f?.stepTitle === "string" && f.stepTitle) ||
@@ -632,37 +681,37 @@ function renderProgress(snapshot, onJump) {
         const current = i === step;
         if (i > 0) {
             track.append(el("div", {
-                class: classNames("biab-progress__line", i <= step && "biab-progress__line--done"),
+                class: classNames("bd-progress__line", i <= step && "bd-progress__line--done"),
             }));
         }
         const dot = el("span", {
-            class: classNames("biab-progress__dot", current && "biab-progress__dot--current", done && "biab-progress__dot--done"),
+            class: classNames("bd-progress__dot", current && "bd-progress__dot--current", done && "bd-progress__dot--done"),
         }, [done ? "✓" : String(i + 1)]);
         const stepNode = el("button", {
-            class: classNames("biab-progress__step", current && "biab-progress__step--current"),
+            class: classNames("bd-progress__step", current && "bd-progress__step--current"),
             type: "button",
-        }, [dot, el("span", { class: "biab-progress__title" }, [title])]);
+        }, [dot, el("span", { class: "bd-progress__title" }, [title])]);
         stepNode.addEventListener("click", () => onJump(i));
         track.append(stepNode);
     });
-    return el("div", { class: "biab-progress biab-progress--steps" }, [
-        el("div", { class: "biab-progress__heading" }, ["Form Progress"]),
+    return el("div", { class: "bd-progress bd-progress--steps" }, [
+        el("div", { class: "bd-progress__heading" }, ["Form Progress"]),
         track,
     ]);
 }
 // ─────────────────────────────────────────────────────────────────────────────
-// mountBiabForm — wire a controller to a host element and render reactively.
+// mountBdForm — wire a controller to a host element and render reactively.
 // ─────────────────────────────────────────────────────────────────────────────
 function resolveHost(elOrSelector) {
     const host = typeof elOrSelector === "string"
         ? document.querySelector(elOrSelector)
         : elOrSelector;
     if (!host) {
-        throw new Error(`mountBiabForm: no element found for ${typeof elOrSelector === "string" ? `selector "${elOrSelector}"` : "the provided node"}.`);
+        throw new Error(`mountBdForm: no element found for ${typeof elOrSelector === "string" ? `selector "${elOrSelector}"` : "the provided node"}.`);
     }
     return host;
 }
-export function mountBiabForm(elOrSelector, opts) {
+export function mountBdForm(elOrSelector, opts) {
     const host = resolveHost(elOrSelector);
     const extraClass = opts.class ?? opts.className;
     // HTML autofill config built from the mount options, threaded to every field.
@@ -739,25 +788,25 @@ export function mountBiabForm(elOrSelector, opts) {
     }
     function render(snapshot) {
         const root = el("div", {
-            class: classNames("biab-form", extraClass),
-            "data-biab-status": snapshot.status,
+            class: classNames("bd-form", extraClass),
+            "data-bd-status": snapshot.status,
         });
         // Org icon (when the form opted into showOrgIcon).
         if (snapshot.orgIcon) {
             root.append(el("img", {
-                class: "biab-form__org-icon",
+                class: "bd-form__org-icon",
                 src: snapshot.orgIcon,
                 alt: "",
             }));
         }
         // Loading / error states.
         if (snapshot.status === "loading" || snapshot.status === "idle") {
-            root.append(el("div", { class: "biab-form__loading" }, ["Loading…"]));
+            root.append(el("div", { class: "bd-form__loading" }, ["Loading…"]));
             swap(root);
             return;
         }
         if (snapshot.status === "error") {
-            root.append(el("div", { class: "biab-form__error" }, [
+            root.append(el("div", { class: "bd-form__error" }, [
                 snapshot.loadError || "Could not load this form.",
             ]));
             swap(root);
@@ -765,21 +814,19 @@ export function mountBiabForm(elOrSelector, opts) {
         }
         // Submitted confirmation.
         if (snapshot.submitted) {
-            root.append(el("div", { class: "biab-form__success" }, [
-                el("p", { class: "biab-form__success-title" }, [
-                    "Thanks — we got it.",
-                ]),
+            root.append(el("div", { class: "bd-form__success" }, [
+                el("p", { class: "bd-form__success-title" }, ["Thanks — we got it."]),
             ]));
             swap(root);
             return;
         }
         // Header (title / description).
         if (snapshot.title || snapshot.description) {
-            const header = el("div", { class: "biab-form__header" }, []);
+            const header = el("div", { class: "bd-form__header" }, []);
             if (snapshot.title)
-                header.append(el("h2", { class: "biab-form__title" }, [snapshot.title]));
+                header.append(el("h2", { class: "bd-form__title" }, [snapshot.title]));
             if (snapshot.description) {
-                header.append(el("p", { class: "biab-form__description" }, [snapshot.description]));
+                header.append(el("p", { class: "bd-form__description" }, [snapshot.description]));
             }
             root.append(header);
         }
@@ -789,11 +836,11 @@ export function mountBiabForm(elOrSelector, opts) {
             root.append(progress);
         // Error summary banner.
         if (snapshot.errorList.length > 0) {
-            root.append(el("div", { class: "biab-form__error-summary" }, [
-                el("div", { class: "biab-form__error-summary-title" }, [
+            root.append(el("div", { class: "bd-form__error-summary" }, [
+                el("div", { class: "bd-form__error-summary-title" }, [
                     `Please complete the highlighted required field${snapshot.errorList.length === 1 ? "" : "s"}.`,
                 ]),
-                el("div", { class: "biab-form__error-summary-list" }, [
+                el("div", { class: "bd-form__error-summary-list" }, [
                     snapshot.errorList.map((e) => e.label).join(", "),
                 ]),
             ]));
@@ -810,13 +857,13 @@ export function mountBiabForm(elOrSelector, opts) {
         const flat = snapshot.settings.isConsecutive;
         const stepWrap = el("div", {
             class: animClass(snapshot.settings.animation, snapshot.forward),
-            "data-biab-step": String(snapshot.step),
+            "data-bd-step": String(snapshot.step),
         });
         if (snapshot.settings.animation === "scroll") {
             // Reveal each top-level field on scroll. Class is the hook; CSS owns the
             // transition. We add the visible state once it intersects.
             for (const vf of snapshot.visibleFields) {
-                const reveal = el("div", { class: "biab-reveal" }, [
+                const reveal = el("div", { class: "bd-reveal" }, [
                     renderTree([vf], ctx, flat),
                 ]);
                 stepWrap.append(reveal);
@@ -835,7 +882,7 @@ export function mountBiabForm(elOrSelector, opts) {
         const submitLabel = opts.submitLabel ?? "Submit";
         if (snapshot.settings.isConsecutive && snapshot.stepCount > 1) {
             const back = el("button", {
-                class: "biab-btn biab-btn--ghost biab-btn--back",
+                class: "bd-btn bd-btn--ghost bd-btn--back",
                 type: "button",
                 ...(snapshot.isFirstStep ? { disabled: true } : {}),
             }, ["Back"]);
@@ -843,7 +890,7 @@ export function mountBiabForm(elOrSelector, opts) {
             let advance;
             if (!snapshot.isLastStep) {
                 advance = el("button", {
-                    class: "biab-btn biab-btn--next",
+                    class: "bd-btn bd-btn--next",
                     type: "button",
                     ...(snapshot.canAdvance ? {} : { disabled: true }),
                 }, ["Next"]);
@@ -851,21 +898,21 @@ export function mountBiabForm(elOrSelector, opts) {
             }
             else {
                 advance = el("button", {
-                    class: "biab-btn biab-btn--submit",
+                    class: "bd-btn bd-btn--submit",
                     type: "button",
                     ...(snapshot.submitting ? { disabled: true } : {}),
                 }, [snapshot.submitting ? "Sending…" : submitLabel]);
                 advance.addEventListener("click", () => void doSubmit());
             }
-            return el("div", { class: "biab-nav" }, [back, advance]);
+            return el("div", { class: "bd-nav" }, [back, advance]);
         }
         const submit = el("button", {
-            class: "biab-btn biab-btn--submit",
+            class: "bd-btn bd-btn--submit",
             type: "button",
             ...(snapshot.submitting ? { disabled: true } : {}),
         }, [snapshot.submitting ? "Sending…" : submitLabel]);
         submit.addEventListener("click", () => void doSubmit());
-        return el("div", { class: "biab-nav" }, [submit]);
+        return el("div", { class: "bd-nav" }, [submit]);
     }
     const unsubscribe = controller.subscribe(render);
     // Initial paint + load (load() notifies, which re-renders).
@@ -883,16 +930,16 @@ export function mountBiabForm(elOrSelector, opts) {
         },
     };
 }
-/** Add the `biab-reveal--shown` hook once an element scrolls into view (scroll anim). */
+/** Add the `bd-reveal--shown` hook once an element scrolls into view (scroll anim). */
 function observeReveal(node) {
     if (typeof IntersectionObserver === "undefined") {
-        node.classList.add("biab-reveal--shown");
+        node.classList.add("bd-reveal--shown");
         return;
     }
     const obs = new IntersectionObserver((entries) => {
         for (const entry of entries) {
             if (entry.isIntersecting) {
-                node.classList.add("biab-reveal--shown");
+                node.classList.add("bd-reveal--shown");
                 obs.disconnect();
                 break;
             }
@@ -915,12 +962,12 @@ function observeReveal(node) {
 // Remember to `destroy()` when the surface goes away.
 // ─────────────────────────────────────────────────────────────────────────────
 import { createChatController, } from "./chat-core/index.js";
-import { BiabDevClient as BiabDevClientForSurfaces } from "./client.js";
+import { BdApiClient as BdClientForSurfaces } from "./client.js";
 import { createStoreController, } from "./store-core/index.js";
 /** Headless storefront + cart. Call `load()` to populate it. */
 export function createStorefront(options) {
     return createStoreController({
-        client: new BiabDevClientForSurfaces({
+        client: new BdClientForSurfaces({
             apiKey: options.apiKey,
             baseUrl: options.baseUrl,
         }),
@@ -932,7 +979,7 @@ export function createStorefront(options) {
 /** Headless Front Desk chat — the native alternative to the iframe widget. */
 export function createChat(options) {
     return createChatController({
-        client: new BiabDevClientForSurfaces({
+        client: new BdClientForSurfaces({
             apiKey: options.apiKey,
             baseUrl: options.baseUrl,
         }),
@@ -943,7 +990,7 @@ import { createBlogController, } from "./blog-core/index.js";
 /** Headless blog — posts, taxonomy, a single post, comments and likes. */
 export function createBlog(options) {
     return createBlogController({
-        client: new BiabDevClientForSurfaces({
+        client: new BdClientForSurfaces({
             apiKey: options.apiKey,
             baseUrl: options.baseUrl,
         }),
@@ -957,11 +1004,11 @@ export function createBlog(options) {
 }
 import { createFollowersController, createUserController, } from "./account-core/index.js";
 import { createCheckoutController, } from "./checkout-core/index.js";
-import { createBiabClient as createBiabClientForFollowers } from "./sdk.js";
+import { createBdClient as createBdClientForFollowers } from "./sdk.js";
 /** Headless checkout — mint a Stripe session, then `redirect()` or render it. */
 export function createCheckout(options) {
     return createCheckoutController({
-        client: new BiabDevClientForSurfaces({
+        client: new BdClientForSurfaces({
             apiKey: options.apiKey,
             baseUrl: options.baseUrl,
         }),
@@ -974,11 +1021,11 @@ export function createUser(options = {}) {
 }
 /** Newsletter / follower subscribe, bound to a publishable token. */
 export function createFollowers(options) {
-    // Followers hang off the PUBLISHABLE client (`createBiabClient`), not
-    // `BiabDevClient`: they are the one surface a browser calls directly with an
+    // Followers hang off the PUBLISHABLE client (`createBdClient`), not
+    // `BdApiClient`: they are the one surface a browser calls directly with an
     // origin-locked `pk_…` token and no backend.
     return createFollowersController({
-        client: createBiabClientForFollowers({
+        client: createBdClientForFollowers({
             apiKey: options.token,
             siteId: options.siteId,
             baseUrl: options.baseUrl ?? DEFAULT_PACKAGE_BASE_URL_FOR_SURFACES,
@@ -1001,7 +1048,7 @@ import { createVerifyController, } from "./verify-core/index.js";
  */
 export function createMarketing(options) {
     return createMarketingController({
-        client: createBiabClientForFollowers({
+        client: createBdClientForFollowers({
             apiKey: options.token,
             siteId: options.siteId,
             baseUrl: options.baseUrl ?? DEFAULT_PACKAGE_BASE_URL_FOR_SURFACES,
@@ -1013,7 +1060,7 @@ export function createMarketing(options) {
 export function createVerify(options) {
     const { apiKey, baseUrl, ...rest } = options;
     return createVerifyController({
-        client: new BiabDevClientForSurfaces({ apiKey, baseUrl }),
+        client: new BdClientForSurfaces({ apiKey, baseUrl }),
         ...rest,
     });
 }
@@ -1025,7 +1072,7 @@ import { createPortalController, } from "./portal-core/index.js";
  */
 export function createPortal(options) {
     return createPortalController({
-        client: new BiabDevClientForSurfaces({
+        client: new BdClientForSurfaces({
             apiKey: options.apiKey,
             baseUrl: options.baseUrl,
         }),