@businessdash/sdk 0.9.81 → 0.9.90

package/src/angular/{biab-form.component.ts → bd-form.component.ts}

@@ -1,5 +1,5 @@
 /**
- * `@businessdash/sdk/angular` — `<biab-form>` drop-in Angular component.
+ * `@businessdash/sdk/angular` — `<bd-form>` drop-in Angular component.
  *
  * Ship mode: SOURCE. This file is a single standalone Angular component shipped
  * as plain `.ts` (no ng-packagr / APF) and compiled by the CONSUMER's Angular
@@ -14,13 +14,13 @@
  * multi-step nav + progress, concurrent reveal, submission + file uploads — live
  * in the core. This component:
  *
- *   1. Creates a controller from `slug` + an injected/`@Input` `BiabClient` (or
+ *   1. Creates a controller from `slug` + an injected/`@Input` `BdClient` (or
  *      a pre-fetched `schema` for SSR).
  *   2. Mirrors the controller's `snapshot()` into a single Angular `signal`,
  *      re-publishing on every `subscribe` notify (so OnPush change detection
  *      fires precisely when the form state changes).
  *   3. Renders the FULL nested field tree from `snapshot.visibleFields` using
- *      the `biab-*` light-DOM class convention (no shadow root), so the org's
+ *      the `bd-*` light-DOM class convention (no shadow root), so the org's
  *      own CSS cascades exactly as it does on the dashboard renderer.
  *   4. Applies `schema.settings` — animation, multi-step + progress
  *      (bar/steps), concurrent reveal, and the org icon — so the drop-in
@@ -30,8 +30,8 @@
  * field renderer, mapped onto Angular template control flow. Because the tree is
  * recursive (`input_group` / `condition_block` / `or_condition` / `flex_row`
  * with children), the component renders itself recursively via the private
- * `<biab-form-node>` sub-component below — the public surface stays a single
- * `<biab-form>` tag.
+ * `<bd-form-node>` sub-component below — the public surface stays a single
+ * `<bd-form>` tag.
  */
 
 import {
@@ -49,7 +49,7 @@ import {
 } from "@angular/core";
 
 import {
-	type BiabClient,
+	type BdClient,
 	type FieldError,
 	type FormController,
 	type FormCoreField,
@@ -72,42 +72,42 @@ import {
 } from "../forms-core/autocomplete.js";
 
 // ─────────────────────────────────────────────────────────────────────────────
-// DI — provide a shared BiabClient app-wide so consumers don't repeat it on
-// every `<biab-form>`. Mirrors the React `<DashboardProvider>` ergonomics but
+// DI — provide a shared BdClient app-wide so consumers don't repeat it on
+// every `<bd-form>`. Mirrors the React `<DashboardProvider>` ergonomics but
 // uses Angular's idiomatic InjectionToken + provider helper.
 // ─────────────────────────────────────────────────────────────────────────────
 
 /**
- * Optional DI token carrying the shared {@link BiabClient}. Provide it once at
- * the app root (e.g. via {@link provideBiabClient}) and every `<biab-form>`
+ * Optional DI token carrying the shared {@link BdClient}. Provide it once at
+ * the app root (e.g. via {@link provideBdClient}) and every `<bd-form>`
  * picks it up automatically — no `[client]` binding required. A `[client]`
  * input still wins per-instance when both are present.
  */
-export const BIAB_CLIENT = new InjectionToken<BiabClient>("BIAB_CLIENT");
+export const BD_CLIENT = new InjectionToken<BdClient>("BD_CLIENT");
 
 /**
  * Provider helper for the application config. Drop into `bootstrapApplication`'s
- * `providers` (or a route's `providers`) so `<biab-form slug="…">` works with no
+ * `providers` (or a route's `providers`) so `<bd-form slug="…">` works with no
  * per-instance `[client]`:
  *
  * ```ts
  * bootstrapApplication(App, {
- *   providers: [provideBiabClient(myBiabClient)],
+ *   providers: [provideBdClient(myBdClient)],
  * });
  * ```
  */
-export function provideBiabClient(client: BiabClient) {
-	return { provide: BIAB_CLIENT, useValue: client };
+export function provideBdClient(client: BdClient) {
+	return { provide: BD_CLIENT, useValue: client };
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Recursive field-tree renderer — one node + its subtree. Private to the module;
-// the public API is only `<biab-form>`. Faithful port of FormPreview's
-// `RenderTree` + `FieldRow` + `FieldInput`, using the same `biab-*` classes and
-// `data-biab-*` hooks so org CSS targets the same selectors as the dashboard.
+// the public API is only `<bd-form>`. Faithful port of FormPreview's
+// `RenderTree` + `FieldRow` + `FieldInput`, using the same `bd-*` classes and
+// `data-bd-*` hooks so org CSS targets the same selectors as the dashboard.
 // ─────────────────────────────────────────────────────────────────────────────
 
-/** Stable CSS hook for a field (the `data-biab-field` value): explicit key →
+/** Stable CSS hook for a field (the `data-bd-field` value): explicit key →
  *  camelCase label slug → id. Mirrors FormPreview's `fieldCssKey`. */
 function fieldCssKey(field: FormCoreField): string {
 	const explicit =
@@ -136,17 +136,17 @@ function fieldCssKey(field: FormCoreField): string {
 const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 
 @Component({
-	selector: "biab-form-node",
+	selector: "bd-form-node",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
 		@switch (field.type) {
 			@case ("input_group") {
-				<div class="biab-group" [attr.data-biab-group]="cssKey()">
+				<div class="bd-group" [attr.data-bd-group]="cssKey()">
 					@if (field.label && field.showGroupLabel) {
-						<div class="biab-group__label">{{ field.label }}</div>
+						<div class="bd-group__label">{{ field.label }}</div>
 					}
 					@for (child of revealedChildren(); track child.id) {
-						<biab-form-node
+						<bd-form-node
 							[field]="child"
 							[values]="values"
 							[errors]="errors"
@@ -161,7 +161,7 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 			@case ("condition_block") {
 				@if (conditionPasses()) {
 					@for (child of children(); track child.id) {
-						<biab-form-node
+						<bd-form-node
 							[field]="child"
 							[values]="values"
 							[errors]="errors"
@@ -175,23 +175,23 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 			}
 			@case ("or_condition") {
 				<div
-					class="biab-or"
-					[class.biab-or--error]="isErrored()"
-					[attr.data-biab-or]="cssKey()"
+					class="bd-or"
+					[class.bd-or--error]="isErrored()"
+					[attr.data-bd-or]="cssKey()"
 				>
 					@if (field.label) {
-						<div class="biab-or__label">
+						<div class="bd-or__label">
 							{{ field.label }}
-							<span class="biab-or__hint">Fill at least one side</span>
+							<span class="bd-or__hint">Fill at least one side</span>
 						</div>
 					}
-					<div class="biab-or__grid">
-						<div class="biab-or__side">
-							<div class="biab-or__side-label">
+					<div class="bd-or__grid">
+						<div class="bd-or__side">
+							<div class="bd-or__side-label">
 								{{ orLeftLabel() }}
 							</div>
 							@if (children()[0]; as left) {
-								<biab-form-node
+								<bd-form-node
 									[field]="left"
 									[values]="values"
 									[errors]="errors"
@@ -202,13 +202,13 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 								/>
 							}
 						</div>
-						<div class="biab-or__divider"><span>OR</span></div>
-						<div class="biab-or__side">
-							<div class="biab-or__side-label">
+						<div class="bd-or__divider"><span>OR</span></div>
+						<div class="bd-or__side">
+							<div class="bd-or__side-label">
 								{{ orRightLabel() }}
 							</div>
 							@if (children()[1]; as right) {
-								<biab-form-node
+								<bd-form-node
 									[field]="right"
 									[values]="values"
 									[errors]="errors"
@@ -221,15 +221,15 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 						</div>
 					</div>
 					@if (isErrored()) {
-						<p class="biab-field__error">Fill in at least one side to continue.</p>
+						<p class="bd-field__error">Fill in at least one side to continue.</p>
 					}
 				</div>
 			}
 			@case ("flex_row") {
-				<div class="biab-flex-row">
+				<div class="bd-flex-row">
 					@for (child of children(); track child.id) {
-						<div class="biab-flex-row__cell">
-							<biab-form-node
+						<div class="bd-flex-row__cell">
+							<bd-form-node
 								[field]="child"
 								[values]="values"
 								[errors]="errors"
@@ -245,44 +245,44 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 			@default {
 				<!-- Leaf field row -->
 				<div
-					class="biab-field"
+					class="bd-field"
 					[class]="rowClass()"
 					[attr.data-field-id]="field.id"
-					[attr.data-biab-field]="cssKey()"
-					[attr.data-biab-type]="field.type"
+					[attr.data-bd-field]="cssKey()"
+					[attr.data-bd-type]="field.type"
 				>
 					@if (showLabel()) {
-						<label class="biab-field__label" [for]="field.id">
+						<label class="bd-field__label" [for]="field.id">
 							{{ field.label || "" }}
 							@if (field.required) {
-								<span class="biab-field__required">*</span>
+								<span class="bd-field__required">*</span>
 							}
 						</label>
 					}
 
 					@switch (field.type) {
 						@case ("title") {
-							<h2 class="biab-field__title">{{ field.label || "Untitled" }}</h2>
+							<h2 class="bd-field__title">{{ field.label || "Untitled" }}</h2>
 						}
 						@case ("subtitle") {
-							<h3 class="biab-field__subtitle">{{ field.label || "" }}</h3>
+							<h3 class="bd-field__subtitle">{{ field.label || "" }}</h3>
 						}
 						@case ("separator") {
-							<hr class="biab-field__separator" />
+							<hr class="bd-field__separator" />
 						}
 						@case ("richtext") {
 							<!-- content is org-authored HTML; the host page is trusted same-origin.
 							     Sanitize upstream if you accept untrusted form authors. -->
-							<div class="biab-field__richtext" [innerHTML]="field.content || ''"></div>
+							<div class="bd-field__richtext" [innerHTML]="field.content || ''"></div>
 						}
 						@case ("image") {
 							@if (imageSrc()) {
-								<img class="biab-field__image" [src]="imageSrc()" alt="" />
+								<img class="bd-field__image" [src]="imageSrc()" alt="" />
 							}
 						}
 						@case ("textarea") {
 							<textarea
-								class="biab-input biab-input--textarea"
+								class="bd-input bd-input--textarea"
 								[id]="field.id"
 								[value]="stringValue()"
 								[placeholder]="field.placeholder || ''"
@@ -297,22 +297,22 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 								     the worse default. A list attribute plus a datalist gives
 								     native typeahead: no JS, no styling opinion. -->
 								<input
-									class="biab-input biab-combobox"
+									class="bd-input bd-combobox"
 									type="text"
 									[id]="field.id"
-									[attr.list]="'biab-list-' + field.id"
+									[attr.list]="'bd-list-' + field.id"
 									[placeholder]="field.placeholder || 'Search…'"
 									[value]="stringValue()"
 									(input)="onInput($event)"
 								/>
-								<datalist [id]="'biab-list-' + field.id">
+								<datalist [id]="'bd-list-' + field.id">
 									@for (opt of field.options || []; track opt) {
 										<option [value]="opt"></option>
 									}
 								</datalist>
 							} @else {
 								<select
-									class="biab-input biab-input--select"
+									class="bd-input bd-input--select"
 									[id]="field.id"
 									[value]="stringValue()"
 									(change)="onInput($event)"
@@ -328,16 +328,16 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 							<!-- The value is an icon NAME; art resolves against the
 							     platform's icon route, so no icon library ships in the
 							     SDK bundle. -->
-							<div class="biab-iconselect">
+							<div class="bd-iconselect">
 								<input
-									class="biab-input biab-iconselect__search"
+									class="bd-input bd-iconselect__search"
 									type="text"
 									[placeholder]="field.placeholder || 'Search icons…'"
 									[value]="iconQuery()"
 									(input)="onIconQuery($event)"
 								/>
 								@if (stringValue()) {
-									<span class="biab-iconselect__current">
+									<span class="bd-iconselect__current">
 										<img
 											[src]="iconSrc(stringValue())"
 											[alt]="stringValue()"
@@ -346,18 +346,18 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 										/>
 										<button
 											type="button"
-											class="biab-iconselect__clear"
+											class="bd-iconselect__clear"
 											(click)="setIconValue('')"
 										>
 											×
 										</button>
 									</span>
 								}
-								<div class="biab-iconselect__grid">
+								<div class="bd-iconselect__grid">
 									@for (name of visibleIcons(); track name) {
 										<button
 											type="button"
-											class="biab-iconselect__item"
+											class="bd-iconselect__item"
 											[class.is-selected]="stringValue() === name"
 											[title]="name"
 											[attr.aria-label]="name"
@@ -372,12 +372,12 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 						}
 						@case ("image_input") {
 							<!-- One image, either source; the value is a plain URL string. -->
-							<div class="biab-imageinput">
+							<div class="bd-imageinput">
 								@if (imageSources() === "both") {
-									<div class="biab-imageinput__modes">
+									<div class="bd-imageinput__modes">
 										<button
 											type="button"
-											class="biab-imageinput__mode"
+											class="bd-imageinput__mode"
 											[class.is-active]="imageMode() === 'upload'"
 											[attr.aria-pressed]="imageMode() === 'upload'"
 											(click)="setImageMode('upload')"
@@ -386,7 +386,7 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 										</button>
 										<button
 											type="button"
-											class="biab-imageinput__mode"
+											class="bd-imageinput__mode"
 											[class.is-active]="imageMode() === 'url'"
 											[attr.aria-pressed]="imageMode() === 'url'"
 											(click)="setImageMode('url')"
@@ -397,14 +397,14 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 								}
 								@if (imageMode() === "upload" && imageSources() !== "url") {
 									<input
-										class="biab-input biab-imageinput__file"
+										class="bd-input bd-imageinput__file"
 										type="file"
 										[attr.accept]="imageAccept()"
 										(change)="onImagePick($event)"
 									/>
 								} @else {
 									<input
-										class="biab-input biab-imageinput__url"
+										class="bd-input bd-imageinput__url"
 										type="url"
 										[placeholder]="
 											field.placeholder || 'https://example.com/image.png'
@@ -415,7 +415,7 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 								}
 								@if (showImagePreview() && stringValue()) {
 									<img
-										class="biab-imageinput__preview"
+										class="bd-imageinput__preview"
 										[src]="stringValue()"
 										alt=""
 									/>
@@ -423,9 +423,9 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 							</div>
 						}
 						@case ("radio") {
-							<div class="biab-input biab-input--radio">
+							<div class="bd-input bd-input--radio">
 								@for (opt of field.options || []; track opt) {
-									<label class="biab-radio__item">
+									<label class="bd-radio__item">
 										<input
 											type="radio"
 											[name]="field.id"
@@ -439,9 +439,9 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 							</div>
 						}
 						@case ("checkbox") {
-							<div class="biab-input biab-input--checkbox">
+							<div class="bd-input bd-input--checkbox">
 								@for (opt of field.options || []; track opt) {
-									<label class="biab-checkbox__item">
+									<label class="bd-checkbox__item">
 										<input
 											type="checkbox"
 											[value]="opt"
@@ -454,7 +454,7 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 							</div>
 						}
 						@case ("boolean") {
-							<label class="biab-input biab-input--boolean">
+							<label class="bd-input bd-input--boolean">
 								<input
 									type="checkbox"
 									[checked]="booleanValue()"
@@ -465,7 +465,7 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 						}
 						@case ("date") {
 							<input
-								class="biab-input biab-input--date"
+								class="bd-input bd-input--date"
 								type="date"
 								[id]="field.id"
 								[value]="stringValue()"
@@ -474,7 +474,7 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 						}
 						@case ("email") {
 							<input
-								class="biab-input biab-input--email"
+								class="bd-input bd-input--email"
 								type="email"
 								[id]="field.id"
 								[value]="stringValue()"
@@ -485,7 +485,7 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 						}
 						@case ("phone") {
 							<input
-								class="biab-input biab-input--phone"
+								class="bd-input bd-input--phone"
 								type="tel"
 								[id]="field.id"
 								[value]="stringValue()"
@@ -496,7 +496,7 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 						}
 						@case ("number") {
 							<input
-								class="biab-input biab-input--number"
+								class="bd-input bd-input--number"
 								type="number"
 								[id]="field.id"
 								[value]="numberInputValue()"
@@ -505,21 +505,21 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 							/>
 						}
 						@case ("stepper") {
-							<div class="biab-input biab-input--stepper">
-								<button type="button" class="biab-btn biab-stepper__dec" (click)="bumpStepper(-1)">
+							<div class="bd-input bd-input--stepper">
+								<button type="button" class="bd-btn bd-stepper__dec" (click)="bumpStepper(-1)">
 									−
 								</button>
-								<span class="biab-stepper__value">{{ numberValue() }}</span>
-								<button type="button" class="biab-btn biab-stepper__inc" (click)="bumpStepper(1)">
+								<span class="bd-stepper__value">{{ numberValue() }}</span>
+								<button type="button" class="bd-btn bd-stepper__inc" (click)="bumpStepper(1)">
 									+
 								</button>
 							</div>
 						}
 						@case ("slider") {
-							<div class="biab-input biab-input--slider">
-								<div class="biab-slider__readout">
+							<div class="bd-input bd-input--slider">
+								<div class="bd-slider__readout">
 									<span>{{ sliderFmt(sliderMin()) }}</span>
-									<span class="biab-slider__current">{{ sliderFmt(numberValue()) }}</span>
+									<span class="bd-slider__current">{{ sliderFmt(numberValue()) }}</span>
 									<span>{{ sliderFmt(sliderMax()) }}</span>
 								</div>
 								<input
@@ -533,12 +533,12 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 							</div>
 						}
 						@case ("star_rating") {
-							<div class="biab-input biab-input--stars">
+							<div class="bd-input bd-input--stars">
 								@for (i of starIndexes(); track i) {
 									<button
 										type="button"
-										class="biab-star"
-										[class.biab-star--on]="i < numberValue()"
+										class="bd-star"
+										[class.bd-star--on]="i < numberValue()"
 										(click)="setValue(i + 1)"
 										[attr.aria-label]="i + 1 + ' stars'"
 									>
@@ -548,12 +548,12 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 							</div>
 						}
 						@case ("happiness_rating") {
-							<div class="biab-input biab-input--happiness">
+							<div class="bd-input bd-input--happiness">
 								@for (face of happinessFaces(); track $index) {
 									<button
 										type="button"
-										class="biab-happiness__face"
-										[class.biab-happiness__face--on]="$index === numberValue()"
+										class="bd-happiness__face"
+										[class.bd-happiness__face--on]="$index === numberValue()"
 										(click)="setValue($index)"
 									>
 										{{ face }}
@@ -562,12 +562,12 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 							</div>
 						}
 						@case ("color_picker") {
-							<div class="biab-input biab-input--colors">
+							<div class="bd-input bd-input--colors">
 								@for (color of field.options || []; track color) {
 									<button
 										type="button"
-										class="biab-color"
-										[class.biab-color--on]="stringValue() === color"
+										class="bd-color"
+										[class.bd-color--on]="stringValue() === color"
 										[style.backgroundColor]="color"
 										[title]="color"
 										(click)="setValue(color)"
@@ -576,12 +576,12 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 							</div>
 						}
 						@case ("date_range") {
-							<div class="biab-input biab-input--date-range">
-								<label class="biab-subfield">
+							<div class="bd-input bd-input--date-range">
+								<label class="bd-subfield">
 									<span>Start</span>
 									<input type="date" [value]="rangeStart()" (input)="onRange('start', $event)" />
 								</label>
-								<label class="biab-subfield">
+								<label class="bd-subfield">
 									<span>End</span>
 									<input type="date" [value]="rangeEnd()" (input)="onRange('end', $event)" />
 								</label>
@@ -590,24 +590,24 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 						@case ("time_picker") {
 							@switch (timeMode()) {
 								@case ("time_block") {
-									<div class="biab-input biab-input--time-block">
-										<label class="biab-subfield">
+									<div class="bd-input bd-input--time-block">
+										<label class="bd-subfield">
 											<span>Start</span>
 											<input type="time" [value]="rangeStart()" (input)="onRange('start', $event)" />
 										</label>
-										<label class="biab-subfield">
+										<label class="bd-subfield">
 											<span>End</span>
 											<input type="time" [value]="rangeEnd()" (input)="onRange('end', $event)" />
 										</label>
 									</div>
 								}
 								@case ("appointment") {
-									<div class="biab-input biab-input--appointment">
-										<label class="biab-subfield">
+									<div class="bd-input bd-input--appointment">
+										<label class="bd-subfield">
 											<span>Date</span>
 											<input type="date" [value]="apptDate()" (input)="onAppt('date', $event)" />
 										</label>
-										<label class="biab-subfield">
+										<label class="bd-subfield">
 											<span>Time</span>
 											<input type="time" [value]="apptTime()" (input)="onAppt('time', $event)" />
 										</label>
@@ -615,7 +615,7 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 								}
 								@default {
 									<input
-										class="biab-input biab-input--time"
+										class="bd-input bd-input--time"
 										type="time"
 										[value]="stringValue()"
 										(input)="onInput($event)"
@@ -623,9 +623,75 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 								}
 							}
 						}
+						@case ("name") {
+							<div class="bd-input bd-input--name">
+								@if (nameCfg().prefix) {
+									<label class="bd-subfield bd-subfield--full">
+										<span>Title</span>
+										<input
+											placeholder="Dr."
+											[value]="nameField('prefix')"
+											[attr.autocomplete]="nameAutoComplete('honorific-prefix')"
+											(input)="onName('prefix', $event)"
+										/>
+									</label>
+								}
+								<label class="bd-subfield">
+									<span>First name</span>
+									<input
+										placeholder="Jane"
+										[value]="nameField('first')"
+										[attr.autocomplete]="nameAutoComplete('given-name')"
+										(input)="onName('first', $event)"
+									/>
+								</label>
+								@if (nameCfg().middle) {
+									<label class="bd-subfield">
+										<span>Middle name</span>
+										<input
+											placeholder="Quinn"
+											[value]="nameField('middle')"
+											[attr.autocomplete]="nameAutoComplete('additional-name')"
+											(input)="onName('middle', $event)"
+										/>
+									</label>
+								}
+								<label class="bd-subfield" [class.bd-subfield--full]="nameLastFull()">
+									<span>Last name</span>
+									<input
+										placeholder="Doe"
+										[value]="nameField('last')"
+										[attr.autocomplete]="nameAutoComplete('family-name')"
+										(input)="onName('last', $event)"
+									/>
+								</label>
+								@if (nameCfg().suffix) {
+									<label class="bd-subfield" [class.bd-subfield--full]="nameSuffixFull()">
+										<span>Suffix</span>
+										<input
+											placeholder="Jr."
+											[value]="nameField('suffix')"
+											[attr.autocomplete]="nameAutoComplete('honorific-suffix')"
+											(input)="onName('suffix', $event)"
+										/>
+									</label>
+								}
+								@if (nameCfg().nicknames) {
+									<!-- Raw comma-separated string while typing; submit normalizes it into a string[]. -->
+									<label class="bd-subfield bd-subfield--full">
+										<span>Nicknames</span>
+										<input
+											placeholder="Johnny, JM — separate with commas"
+											[value]="nameNicknamesText()"
+											(input)="onName('nicknames', $event)"
+										/>
+									</label>
+								}
+							</div>
+						}
 						@case ("address") {
-							<div class="biab-input biab-input--address">
-								<label class="biab-subfield biab-subfield--full">
+							<div class="bd-input bd-input--address">
+								<label class="bd-subfield bd-subfield--full">
 									<span>Address Line 1</span>
 									<input
 										[value]="addrField('line1')"
@@ -633,7 +699,7 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 										(input)="onAddr('line1', $event)"
 									/>
 								</label>
-								<label class="biab-subfield biab-subfield--full">
+								<label class="bd-subfield bd-subfield--full">
 									<span>Address Line 2</span>
 									<input
 										[value]="addrField('line2')"
@@ -641,7 +707,7 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 										(input)="onAddr('line2', $event)"
 									/>
 								</label>
-								<label class="biab-subfield">
+								<label class="bd-subfield">
 									<span>City</span>
 									<input
 										[value]="addrField('city')"
@@ -649,7 +715,7 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 										(input)="onAddr('city', $event)"
 									/>
 								</label>
-								<label class="biab-subfield">
+								<label class="bd-subfield">
 									<span>State</span>
 									<input
 										[value]="addrField('state')"
@@ -657,7 +723,7 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 										(input)="onAddr('state', $event)"
 									/>
 								</label>
-								<label class="biab-subfield biab-subfield--full">
+								<label class="bd-subfield bd-subfield--full">
 									<span>Zip</span>
 									<input
 										[value]="addrField('zip')"
@@ -668,7 +734,7 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 							</div>
 						}
 						@case ("file_upload") {
-							<div class="biab-input biab-input--file">
+							<div class="bd-input bd-input--file">
 								<input
 									type="file"
 									[multiple]="fileMultiple()"
@@ -676,9 +742,9 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 									(change)="onFile($event)"
 								/>
 								@if (fileList().length) {
-									<ul class="biab-file__list">
+									<ul class="bd-file__list">
 										@for (f of fileList(); track f.storageId) {
-											<li class="biab-file__item">{{ f.name }}</li>
+											<li class="bd-file__item">{{ f.name }}</li>
 										}
 									</ul>
 								}
@@ -687,7 +753,7 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 						@default {
 							<!-- text and any plain-text input -->
 							<input
-								class="biab-input biab-input--text"
+								class="bd-input bd-input--text"
 								type="text"
 								[id]="field.id"
 								[value]="stringValue()"
@@ -699,24 +765,24 @@ const NO_LABEL_TYPES = new Set(["title", "subtitle", "separator", "richtext"]);
 					}
 
 					@if (isErrored()) {
-						<p class="biab-field__error">{{ errorMessage() }}</p>
+						<p class="bd-field__error">{{ errorMessage() }}</p>
 					}
 					@if (field.helpText) {
-						<p class="biab-field__help">{{ field.helpText }}</p>
+						<p class="bd-field__help">{{ field.helpText }}</p>
 					}
 				</div>
 			}
 		}
 	`,
 })
-export class BiabFormNodeComponent {
+export class BdFormNodeComponent {
 	/** The field (subtree root) to render. */
 	@Input({ required: true }) field!: FormCoreField;
 	/** Working values, keyed by field id (the snapshot's `values`). */
 	@Input({ required: true }) values!: Record<string, unknown>;
 	/** Field-level errors, keyed by field id (the snapshot's `errors`). */
 	@Input({ required: true }) errors!: Record<string, FieldError>;
-	/** Autofill config threaded from `<biab-form>` (global switch + per-field
+	/** Autofill config threaded from `<bd-form>` (global switch + per-field
 	 *  overrides). Drives the `autocomplete` attribute on value-bearing inputs. */
 	@Input() autocompleteConfig: AutocompleteConfig = {};
 
@@ -759,6 +825,12 @@ export class BiabFormNodeComponent {
 		return this.autoCompleteOff() ? "off" : token;
 	}
 
+	/** Fixed token for a name composite sub-field, suppressed to "off" when the
+	 *  field's resolved token is "off". */
+	nameAutoComplete(token: string): string {
+		return this.autoCompleteOff() ? "off" : token;
+	}
+
 	children(): FormCoreField[] {
 		return (this.field.children ?? []) as FormCoreField[];
 	}
@@ -787,9 +859,9 @@ export class BiabFormNodeComponent {
 	}
 
 	rowClass(): string {
-		const parts = [`biab-field--${this.field.type}`];
-		if (this.field.required) parts.push("biab-field--required");
-		if (this.isErrored()) parts.push("biab-field--error");
+		const parts = [`bd-field--${this.field.type}`];
+		if (this.field.required) parts.push("bd-field--required");
+		if (this.isErrored()) parts.push("bd-field--error");
 		return parts.join(" ");
 	}
 
@@ -1036,6 +1108,42 @@ export class BiabFormNodeComponent {
 		this.setValue({ ...this.addrObj(), [key]: value });
 	}
 
+	// ── name ──
+	private nameObj(): Record<string, unknown> {
+		const v = this.raw();
+		return v && typeof v === "object" ? (v as Record<string, unknown>) : {};
+	}
+	nameCfg(): NonNullable<FormCoreField["nameConfig"]> {
+		return this.field.nameConfig ?? {};
+	}
+	nameField(key: string): string {
+		const v = this.nameObj()[key];
+		return typeof v === "string" ? v : "";
+	}
+	/** Last name spans the row only when a middle name shares the first row with
+	 *  the first name and no suffix follows to pair with it. */
+	nameLastFull(): boolean {
+		const cfg = this.nameCfg();
+		return cfg.middle === true && cfg.suffix !== true;
+	}
+	/** Suffix spans the row when it isn't paired with the last name. */
+	nameSuffixFull(): boolean {
+		return this.nameCfg().middle !== true;
+	}
+	/** The nicknames input holds the raw comma-separated string while the
+	 *  visitor types; submit normalizes it into a string[]. */
+	nameNicknamesText(): string {
+		const v = this.nameObj()["nicknames"];
+		if (Array.isArray(v)) {
+			return v.filter((n): n is string => typeof n === "string").join(", ");
+		}
+		return typeof v === "string" ? v : "";
+	}
+	onName(key: string, event: Event): void {
+		const value = (event.target as HTMLInputElement).value;
+		this.setValue({ ...this.nameObj(), [key]: value });
+	}
+
 	// ── phone ──
 	phonePlaceholder(): string {
 		if (this.field.placeholder) return this.field.placeholder;
@@ -1072,62 +1180,62 @@ export class BiabFormNodeComponent {
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Public component — `<biab-form>`. Owns the controller, mirrors its snapshot
+// Public component — `<bd-form>`. Owns the controller, mirrors its snapshot
 // into a signal, and orchestrates steps / progress / submit. Renders each
-// visible top-level node via `<biab-form-node>`.
+// visible top-level node via `<bd-form-node>`.
 // ─────────────────────────────────────────────────────────────────────────────
 
 @Component({
-	selector: "biab-form",
+	selector: "bd-form",
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [BiabFormNodeComponent],
+	imports: [BdFormNodeComponent],
 	host: {
-		class: "biab-form",
-		"[class.biab-form--submitting]": "snapshot().submitting",
-		"[class.biab-form--submitted]": "snapshot().submitted",
-		"[attr.data-biab-animation]": "snapshot().settings.animation",
+		class: "bd-form",
+		"[class.bd-form--submitting]": "snapshot().submitting",
+		"[class.bd-form--submitted]": "snapshot().submitted",
+		"[attr.data-bd-animation]": "snapshot().settings.animation",
 	},
 	template: `
 		@let snap = snapshot();
 
 		@if (snap.orgIcon) {
-			<img class="biab-form__org-icon" [src]="snap.orgIcon" alt="" />
+			<img class="bd-form__org-icon" [src]="snap.orgIcon" alt="" />
 		}
 
 		@switch (snap.status) {
 			@case ("loading") {
-				<div class="biab-form__loading">Loading…</div>
+				<div class="bd-form__loading">Loading…</div>
 			}
 			@case ("error") {
-				<div class="biab-form__load-error">
+				<div class="bd-form__load-error">
 					{{ snap.loadError || "Couldn't load this form." }}
 				</div>
 			}
 			@default {
 				@if (snap.submitted) {
-					<div class="biab-form__success">
+					<div class="bd-form__success">
 						{{ successMessage() }}
 					</div>
 				} @else {
 					<form
-						class="biab-form__body"
-						[attr.data-biab-step]="snap.step"
+						class="bd-form__body"
+						[attr.data-bd-step]="snap.step"
 						(ngSubmit)="onSubmit()"
 					>
 						@if (showSteps()) {
-							<div class="biab-progress biab-progress--steps">
-								<div class="biab-progress__title">Form Progress</div>
-								<ol class="biab-progress__list">
+							<div class="bd-progress bd-progress--steps">
+								<div class="bd-progress__title">Form Progress</div>
+								<ol class="bd-progress__list">
 									@for (s of snap.steps; track $index; let i = $index) {
 										<li
-											class="biab-progress__step"
-											[class.biab-progress__step--current]="i === snap.step"
-											[class.biab-progress__step--done]="i < snap.step"
+											class="bd-progress__step"
+											[class.bd-progress__step--current]="i === snap.step"
+											[class.bd-progress__step--done]="i < snap.step"
 										>
-											<span class="biab-progress__index">
+											<span class="bd-progress__index">
 												{{ i < snap.step ? "✓" : i + 1 }}
 											</span>
-											<span class="biab-progress__label">{{ stepTitle(s, i) }}</span>
+											<span class="bd-progress__label">{{ stepTitle(s, i) }}</span>
 										</li>
 									}
 								</ol>
@@ -1135,13 +1243,13 @@ export class BiabFormNodeComponent {
 						}
 
 						@if (showBar()) {
-							<div class="biab-progress biab-progress--bar">
-								<span class="biab-progress__count">
+							<div class="bd-progress bd-progress--bar">
+								<span class="bd-progress__count">
 									{{ snap.step + 1 }} / {{ snap.stepCount }}
 								</span>
-								<div class="biab-progress__track">
+								<div class="bd-progress__track">
 									<div
-										class="biab-progress__fill"
+										class="bd-progress__fill"
 										[style.width.%]="snap.progressPercent"
 									></div>
 								</div>
@@ -1149,21 +1257,21 @@ export class BiabFormNodeComponent {
 						}
 
 						@if (snap.errorList.length) {
-							<div class="biab-form__errors" role="alert">
-								<div class="biab-form__errors-title">
+							<div class="bd-form__errors" role="alert">
+								<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">
 									{{ errorLabels() }}
 								</div>
 							</div>
 						}
 
-						<div class="biab-form__fields" [attr.data-biab-direction]="snap.forward ? 'forward' : 'back'">
+						<div class="bd-form__fields" [attr.data-bd-direction]="snap.forward ? 'forward' : 'back'">
 							@for (node of snap.visibleFields; track node.id) {
-								<biab-form-node
+								<bd-form-node
 									[field]="node"
 									[values]="snap.values"
 									[errors]="snap.errors"
@@ -1175,11 +1283,11 @@ export class BiabFormNodeComponent {
 							}
 						</div>
 
-						<div class="biab-nav">
+						<div class="bd-nav">
 							@if (isMultiStep()) {
 								<button
 									type="button"
-									class="biab-btn biab-btn--back"
+									class="bd-btn bd-btn--back"
 									[disabled]="snap.isFirstStep"
 									(click)="back()"
 								>
@@ -1189,7 +1297,7 @@ export class BiabFormNodeComponent {
 							@if (isMultiStep() && !snap.isLastStep) {
 								<button
 									type="button"
-									class="biab-btn biab-btn--next"
+									class="bd-btn bd-btn--next"
 									[disabled]="!snap.canAdvance"
 									(click)="next()"
 								>
@@ -1198,7 +1306,7 @@ export class BiabFormNodeComponent {
 							} @else {
 								<button
 									type="submit"
-									class="biab-btn biab-btn--submit"
+									class="bd-btn bd-btn--submit"
 									[disabled]="snap.submitting || snap.uploading"
 								>
 									{{ snap.submitting ? "Sending…" : submitLabel() }}
@@ -1207,7 +1315,7 @@ export class BiabFormNodeComponent {
 						</div>
 
 						@if (failureMessage()) {
-							<p class="biab-form__submit-error" role="alert">{{ failureMessage() }}</p>
+							<p class="bd-form__submit-error" role="alert">{{ failureMessage() }}</p>
 						}
 					</form>
 				}
@@ -1215,10 +1323,10 @@ export class BiabFormNodeComponent {
 		}
 	`,
 })
-export class BiabFormComponent implements OnInit {
+export class BdFormComponent implements OnInit {
 	private readonly destroyRef = inject(DestroyRef);
 	/** App-wide client from DI (optional). A `[client]` input wins over it. */
-	private readonly injectedClient = inject(BIAB_CLIENT, { optional: true });
+	private readonly injectedClient = inject(BD_CLIENT, { optional: true });
 
 	// ── Inputs (signal inputs; the public, framework-consistent surface) ──
 
@@ -1229,7 +1337,7 @@ export class BiabFormComponent implements OnInit {
 	 *  submit / upload. */
 	readonly schema = input<FormSchema | undefined>(undefined);
 	/** Per-instance client override. Falls back to the DI-provided client. */
-	readonly client = input<BiabClient | undefined>(undefined);
+	readonly client = input<BdClient | undefined>(undefined);
 	/** Submit button label (final step). Defaults to "Submit". */
 	readonly submitLabel = input<string>("Submit");
 	/** Validate-only submit: nothing is stored, no side effects. */
@@ -1275,7 +1383,7 @@ export class BiabFormComponent implements OnInit {
 	private controller: FormController | null = null;
 
 	// Resolve the effective client: per-instance input → DI token.
-	private resolveClient(): BiabClient | undefined {
+	private resolveClient(): BdClient | undefined {
 		return this.client() ?? this.injectedClient ?? undefined;
 	}