schema-components 1.28.2 → 2.0.0

package/dist/html/html.d.mts

@@ -65,6 +65,7 @@ type AttrValue = string | number | boolean | undefined;
  * arbitrary `data-*` and `aria-*` keys are allowed via index signature.
  */
 type HtmlAttributes = Record<string, AttrValue>;
+/** HTML5 void-element tag names — self-closing, must not carry children. */
 declare const VOID_ELEMENTS: Set<string>;
 /**
  * Build an HTML element node.
@@ -103,7 +104,17 @@ declare function raw(html: string): HtmlRaw;
  * @returns HTML string
  */
 declare function serialize(node: HtmlNode): string;
+/**
+ * Serialise a single {@link HtmlElement} to a string, taking care of
+ * void-element self-closing, attribute serialisation, and recursive
+ * child rendering. Use {@link serialize} for arbitrary nodes.
+ */
 declare function serializeElement(el: HtmlElement): string;
+/**
+ * Serialise an attribute map to the `key="value"` form used inside an
+ * opening tag. `false` / `undefined` values are omitted; `true` renders
+ * as a boolean attribute (just the name).
+ */
 declare function serializeAttributes(attrs: HtmlAttributes): string;
 /**
  * Serialise an HTML node to chunks, yielded at natural element boundaries.

package/dist/html/html.mjs

@@ -1,4 +1,5 @@
 //#region src/html/html.ts
+/** HTML5 void-element tag names — self-closing, must not carry children. */
 const VOID_ELEMENTS = new Set([
 	"area",
 	"base",
@@ -80,6 +81,11 @@ function serialize(node) {
 	if (node.tag === "") return node.children.map((child) => serialize(child)).join("");
 	return serializeElement(node);
 }
+/**
+* Serialise a single {@link HtmlElement} to a string, taking care of
+* void-element self-closing, attribute serialisation, and recursive
+* child rendering. Use {@link serialize} for arbitrary nodes.
+*/
 function serializeElement(el) {
 	const attrs = serializeAttributes(el.attributes);
 	if (VOID_ELEMENTS.has(el.tag)) return `<${el.tag}${attrs}>`;
@@ -87,6 +93,11 @@ function serializeElement(el) {
 	const inner = el.children.map((child) => serialize(child)).join("");
 	return `<${el.tag}${attrs}>${inner}</${el.tag}>`;
 }
+/**
+* Serialise an attribute map to the `key="value"` form used inside an
+* opening tag. `false` / `undefined` values are omitted; `true` renders
+* as a boolean attribute (just the name).
+*/
 function serializeAttributes(attrs) {
 	const parts = [];
 	for (const [key, value] of Object.entries(attrs)) {

package/dist/html/renderToHtml.d.mts

@@ -1,21 +1,42 @@
-import { w as SchemaMeta } from "../types-BTB73MB8.mjs";
-import { o as HtmlResolver } from "../renderer-Ul9taFYp.mjs";
+import { w as SchemaMeta } from "../types-BrYbjC7_.mjs";
+import { SchemaIoSide } from "../core/adapter.mjs";
+import { HtmlResolver } from "../core/renderer.mjs";
+import { RejectUnrepresentableZod } from "../core/typeInference.mjs";
+import { a as InferredValue, t as InferFields } from "../inferValue-PPXWJpbN.mjs";
 
 //#region src/html/renderToHtml.d.ts
 /**
- * Build the recursion-cap sentinel element. The label is interpolated
- * via `h()` + `serialize` so any HTML in `meta.description` (which is
+ * Build the recursion-cap sentinel element used when the renderer
+ * encounters circular schema references. The label is interpolated via
+ * `h()` + `serialize` so any HTML in `meta.description` (which is
  * schema-author content but can equally be sourced from user-supplied
  * JSON Schema input) is escaped — never interpolated into raw markup.
+ *
+ * @group HTML
  */
 declare function recursionSentinelHtml(label: string): string;
-interface RenderToHtmlOptions {
-  /** The data value to render. */
-  value?: unknown;
+/**
+ * Options accepted by {@link renderToHtml}.
+ *
+ * The generic parameters mirror `<SchemaComponent>` so a typed
+ * `schema` argument drives typed `value`, `ref`, and `fields` options.
+ *
+ * @group HTML
+ */
+interface RenderToHtmlOptions<T = unknown, Ref extends string | undefined = undefined, Mode extends SchemaIoSide = "output"> {
+  /**
+   * The data value to render. Typed against `InferredValue<T, Ref, undefined, Mode>`
+   * so a typed `schema` argument drives the rendered value's shape.
+   */
+  value?: InferredValue<T, Ref, undefined, Mode>;
   /** For OpenAPI: a ref string like "#/components/schemas/User". */
-  ref?: string;
-  /** Per-field meta overrides. */
-  fields?: Record<string, unknown>;
+  ref?: Ref;
+  /**
+   * Per-field meta overrides — nested object mirroring schema shape.
+   * Typed against {@link InferFields} so a typed `schema` argument
+   * drives autocomplete on the override map.
+   */
+  fields?: InferFields<T, Ref>;
   /** Meta overrides applied to the root schema. */
   meta?: SchemaMeta;
   /** Force all fields read-only. */
@@ -28,12 +49,24 @@ interface RenderToHtmlOptions {
   resolver?: HtmlResolver;
 }
 /**
- * Render a schema to an HTML string.
+ * Render a schema to a semantic HTML string.
+ *
+ * Framework-agnostic alternative to the React rendering pipeline.
+ * Shares the same normalise → walk → render pipeline, but emits
+ * escaped HTML with `sc-` prefixed classes rather than ReactNodes.
+ * Pass `resolver` to plug in a custom HTML renderer.
  *
+ * @group HTML
  * @param schema - Zod schema, JSON Schema, or OpenAPI document
  * @param options - Value, overrides, and resolver options
  * @returns Semantic HTML string with `sc-` prefixed classes
+ * @example
+ * ```tsx
+ * import { renderToHtml } from "schema-components/html/renderToHtml";
+ *
+ * const html = renderToHtml(userSchema, { value: user, readOnly: true });
+ * ```
  */
-declare function renderToHtml(schema: unknown, options?: RenderToHtmlOptions): string;
+declare function renderToHtml<T = unknown, Ref extends string | undefined = undefined, Mode extends SchemaIoSide = "output">(schema: RejectUnrepresentableZod<T>, options?: RenderToHtmlOptions<T, Ref, Mode>): string;
 //#endregion
 export { RenderToHtmlOptions, recursionSentinelHtml, renderToHtml };

package/dist/html/renderToHtml.mjs

@@ -1,3 +1,4 @@
+import { toRecordOrUndefined } from "../core/guards.mjs";
 import "../core/limits.mjs";
 import { normaliseSchema } from "../core/adapter.mjs";
 import { getHtmlRenderFn, mergeHtmlResolvers } from "../core/renderer.mjs";
@@ -27,20 +28,35 @@ import { defaultHtmlResolver } from "./renderers.mjs";
 *   });
 */
 /**
-* Build the recursion-cap sentinel element. The label is interpolated
-* via `h()` + `serialize` so any HTML in `meta.description` (which is
+* Build the recursion-cap sentinel element used when the renderer
+* encounters circular schema references. The label is interpolated via
+* `h()` + `serialize` so any HTML in `meta.description` (which is
 * schema-author content but can equally be sourced from user-supplied
 * JSON Schema input) is escaped — never interpolated into raw markup.
+*
+* @group HTML
 */
 function recursionSentinelHtml(label) {
 	return serialize(h("fieldset", { class: "sc-recursive" }, h("em", {}, `↻ ${label} (recursive)`)));
 }
 /**
-* Render a schema to an HTML string.
+* Render a schema to a semantic HTML string.
+*
+* Framework-agnostic alternative to the React rendering pipeline.
+* Shares the same normalise → walk → render pipeline, but emits
+* escaped HTML with `sc-` prefixed classes rather than ReactNodes.
+* Pass `resolver` to plug in a custom HTML renderer.
 *
+* @group HTML
 * @param schema - Zod schema, JSON Schema, or OpenAPI document
 * @param options - Value, overrides, and resolver options
 * @returns Semantic HTML string with `sc-` prefixed classes
+* @example
+* ```tsx
+* import { renderToHtml } from "schema-components/html/renderToHtml";
+*
+* const html = renderToHtml(userSchema, { value: user, readOnly: true });
+* ```
 */
 function renderToHtml(schema, options = {}) {
 	const mergedMeta = { ...options.meta };
@@ -51,7 +67,7 @@ function renderToHtml(schema, options = {}) {
 	const tree = walk(jsonSchema, {
 		componentMeta: mergedMeta,
 		rootMeta,
-		fieldOverrides: options.fields,
+		fieldOverrides: toRecordOrUndefined(options.fields),
 		rootDocument
 	});
 	const resolver = options.resolver ?? defaultHtmlResolver;

package/dist/html/renderToHtmlStream.d.mts

@@ -1,14 +1,34 @@
-import { w as SchemaMeta } from "../types-BTB73MB8.mjs";
-import { o as HtmlResolver } from "../renderer-Ul9taFYp.mjs";
+import { w as SchemaMeta } from "../types-BrYbjC7_.mjs";
+import { SchemaIoSide } from "../core/adapter.mjs";
+import { HtmlResolver } from "../core/renderer.mjs";
+import { RejectUnrepresentableZod } from "../core/typeInference.mjs";
+import { a as InferredValue, t as InferFields } from "../inferValue-PPXWJpbN.mjs";
 
 //#region src/html/renderToHtmlStream.d.ts
-interface StreamRenderOptions {
-  /** The data value to render. */
-  value?: unknown;
+/**
+ * Options accepted by the streaming HTML renderers
+ * ({@link renderToHtmlChunks}, {@link renderToHtmlStream},
+ * {@link renderToHtmlReadable}).
+ *
+ * The generic parameters mirror `<SchemaComponent>` so a typed
+ * `schema` argument drives typed `value`, `ref`, and `fields` options.
+ *
+ * @group HTML
+ */
+interface StreamRenderOptions<T = unknown, Ref extends string | undefined = undefined, Mode extends SchemaIoSide = "output"> {
+  /**
+   * The data value to render. Typed against `InferredValue<T, Ref, undefined, Mode>`
+   * so a typed `schema` argument drives the rendered value's shape.
+   */
+  value?: InferredValue<T, Ref, undefined, Mode>;
   /** For OpenAPI: a ref string like "#/components/schemas/User". */
-  ref?: string;
-  /** Per-field meta overrides. */
-  fields?: Record<string, unknown>;
+  ref?: Ref;
+  /**
+   * Per-field meta overrides — nested object mirroring schema shape.
+   * Typed against {@link InferFields} so a typed `schema` argument
+   * drives autocomplete on the override map.
+   */
+  fields?: InferFields<T, Ref>;
   /** Meta overrides applied to the root schema. */
   meta?: SchemaMeta;
   /** Force all fields read-only. */
@@ -21,20 +41,45 @@ interface StreamRenderOptions {
   resolver?: HtmlResolver;
 }
 /**
- * Render a schema as an iterable of HTML string chunks.
- * Each chunk is a self-contained HTML fragment.
+ * Render a schema as a synchronous iterable of HTML string chunks. Each
+ * chunk is a self-contained HTML fragment, ready to write to a stream
+ * or concatenate into a single string. Use when the host can flush
+ * output incrementally but does not need cooperative scheduling.
+ *
+ * @group HTML
+ * @example
+ * ```tsx
+ * import { renderToHtmlChunks } from "schema-components/html/renderToHtmlStream";
+ *
+ * for (const chunk of renderToHtmlChunks(userSchema, { value: user })) {
+ *   response.write(chunk);
+ * }
+ * ```
  */
-declare function renderToHtmlChunks(schema: unknown, options?: StreamRenderOptions): Iterable<string>;
+declare function renderToHtmlChunks<T = unknown, Ref extends string | undefined = undefined, Mode extends SchemaIoSide = "output">(schema: RejectUnrepresentableZod<T>, options?: StreamRenderOptions<T, Ref, Mode>): Iterable<string>;
 /**
- * Render a schema as an async iterable of HTML string chunks.
- * Yields `undefined` between chunks to allow the event loop to process
- * other tasks (cooperative scheduling).
+ * Render a schema as an async iterable of HTML string chunks. Yields
+ * back to the event loop between chunks via a microtask so other tasks
+ * (queued I/O, timers) can run between fragments.
+ *
+ * @group HTML
  */
-declare function renderToHtmlStream(schema: unknown, options?: StreamRenderOptions): AsyncIterable<string>;
+declare function renderToHtmlStream<T = unknown, Ref extends string | undefined = undefined, Mode extends SchemaIoSide = "output">(schema: RejectUnrepresentableZod<T>, options?: StreamRenderOptions<T, Ref, Mode>): AsyncIterable<string>;
 /**
- * Render a schema as a web `ReadableStream<string>`.
- * Uses the async rendering pipeline internally.
+ * Render a schema as a web `ReadableStream<string>` so it can be piped
+ * into a `Response` body. Pulls chunks lazily from the synchronous
+ * chunk iterator under the hood.
+ *
+ * @group HTML
+ * @example
+ * ```tsx
+ * import { renderToHtmlReadable } from "schema-components/html/renderToHtmlStream";
+ *
+ * return new Response(renderToHtmlReadable(userSchema, { value: user }), {
+ *   headers: { "content-type": "text/html" },
+ * });
+ * ```
  */
-declare function renderToHtmlReadable(schema: unknown, options?: StreamRenderOptions): ReadableStream<string>;
+declare function renderToHtmlReadable<T = unknown, Ref extends string | undefined = undefined, Mode extends SchemaIoSide = "output">(schema: RejectUnrepresentableZod<T>, options?: StreamRenderOptions<T, Ref, Mode>): ReadableStream<string>;
 //#endregion
 export { StreamRenderOptions, renderToHtmlChunks, renderToHtmlReadable, renderToHtmlStream };

package/dist/html/renderToHtmlStream.mjs

@@ -1,3 +1,4 @@
+import { toRecordOrUndefined } from "../core/guards.mjs";
 import { normaliseSchema } from "../core/adapter.mjs";
 import { mergeHtmlResolvers } from "../core/renderer.mjs";
 import { walk } from "../core/walker.mjs";
@@ -19,17 +20,31 @@ import { streamField } from "./streamRenderers.mjs";
 * - `renderToHtmlReadable(schema, options)` → web `ReadableStream<string>`
 */
 /**
-* Render a schema as an iterable of HTML string chunks.
-* Each chunk is a self-contained HTML fragment.
+* Render a schema as a synchronous iterable of HTML string chunks. Each
+* chunk is a self-contained HTML fragment, ready to write to a stream
+* or concatenate into a single string. Use when the host can flush
+* output incrementally but does not need cooperative scheduling.
+*
+* @group HTML
+* @example
+* ```tsx
+* import { renderToHtmlChunks } from "schema-components/html/renderToHtmlStream";
+*
+* for (const chunk of renderToHtmlChunks(userSchema, { value: user })) {
+*   response.write(chunk);
+* }
+* ```
 */
 function renderToHtmlChunks(schema, options = {}) {
 	const { tree, resolver } = prepareTree(schema, options);
 	return streamField(tree, options.value ?? tree.defaultValue, mergeHtmlResolvers(resolver, defaultHtmlResolver), "", resolver);
 }
 /**
-* Render a schema as an async iterable of HTML string chunks.
-* Yields `undefined` between chunks to allow the event loop to process
-* other tasks (cooperative scheduling).
+* Render a schema as an async iterable of HTML string chunks. Yields
+* back to the event loop between chunks via a microtask so other tasks
+* (queued I/O, timers) can run between fragments.
+*
+* @group HTML
 */
 async function* renderToHtmlStream(schema, options = {}) {
 	const { tree, resolver } = prepareTree(schema, options);
@@ -41,8 +56,19 @@ async function* renderToHtmlStream(schema, options = {}) {
 	}
 }
 /**
-* Render a schema as a web `ReadableStream<string>`.
-* Uses the async rendering pipeline internally.
+* Render a schema as a web `ReadableStream<string>` so it can be piped
+* into a `Response` body. Pulls chunks lazily from the synchronous
+* chunk iterator under the hood.
+*
+* @group HTML
+* @example
+* ```tsx
+* import { renderToHtmlReadable } from "schema-components/html/renderToHtmlStream";
+*
+* return new Response(renderToHtmlReadable(userSchema, { value: user }), {
+*   headers: { "content-type": "text/html" },
+* });
+* ```
 */
 function renderToHtmlReadable(schema, options = {}) {
 	const { tree, resolver } = prepareTree(schema, options);
@@ -63,7 +89,7 @@ function prepareTree(schema, options) {
 		tree: walk(jsonSchema, {
 			componentMeta: mergedMeta,
 			rootMeta,
-			fieldOverrides: options.fields,
+			fieldOverrides: toRecordOrUndefined(options.fields),
 			rootDocument
 		}),
 		resolver: options.resolver ?? defaultHtmlResolver

package/dist/html/renderers.d.mts

@@ -1,39 +1,14 @@
+import { HtmlResolver } from "../core/renderer.mjs";
 import { dateInputType } from "../core/formats.mjs";
-import { o as HtmlResolver } from "../renderer-Ul9taFYp.mjs";
 import { matchUnionOption } from "../core/unionMatch.mjs";
 
 //#region src/html/renderers.d.ts
 /**
- * Thin wrapper over `fieldDomId` from `core/idPath.ts`. Every render
- * pipeline must derive ids from the same canonical normaliser so that
- * `aria-controls`, `aria-labelledby`, and `htmlFor` references resolve
- * consistently across the React, sync-HTML, and streaming-HTML outputs.
- *
- * The wrapper tolerates an empty path here (returning `sc-`) so that
- * a leaf renderer at the schema root — `renderToHtml(z.string())` — has
- * a usable id without throwing. Container renderers always thread a
- * non-empty path through `renderChild`, so the empty-id fallback can
- * never produce sibling collisions inside a structured form.
+ * Default HTML resolver used by `renderToHtml` and the streaming
+ * renderers when the consumer does not pass a custom resolver. Maps
+ * every `WalkedField` variant to a semantic HTML renderer built on the
+ * `h()` element builder.
  */
-declare function fieldId(path: string): string;
-/**
- * Tab-panel id for a discriminated union at `path`. Delegates to the
- * canonical `panelIdFor` from `core/idPath.ts` for the normal case so
- * the sync, streaming, and React renderers all emit identical ids; falls
- * back to a structurally-equivalent string when the renderer is invoked
- * with an empty root path (a discriminated union at the schema root —
- * see the `fieldId` doc comment for the wider context).
- *
- * Exported because `streamRenderers.ts` needs to derive identical ids
- * — the panel id on the `<div role="tabpanel">` must match the
- * `aria-controls` on every tab regardless of which pipeline rendered it.
- */
-declare function panelId(path: string): string;
-/**
- * Tab id for tab `i` within a discriminated union at `path`. Mirror of
- * `panelId` above — see its comment.
- */
-declare function tabId(path: string, i: number): string;
 declare const defaultHtmlResolver: HtmlResolver;
 //#endregion
-export { dateInputType, defaultHtmlResolver, fieldId, matchUnionOption, panelId, tabId };
+export { dateInputType, defaultHtmlResolver, matchUnionOption };

package/dist/html/renderers.mjs

@@ -9,56 +9,13 @@ import { displayJsonValue } from "../core/walkBuilders.mjs";
 import { h, raw, serialize } from "./html.mjs";
 import { ariaDescribedByAttrs, ariaLabelAttrs, ariaReadonlyAttrs, ariaRequiredAttrs, buildHintElement, buildInputId, requiredIndicator } from "./a11y.mjs";
 //#region src/html/renderers.ts
-/**
-* Thin wrapper over `fieldDomId` from `core/idPath.ts`. Every render
-* pipeline must derive ids from the same canonical normaliser so that
-* `aria-controls`, `aria-labelledby`, and `htmlFor` references resolve
-* consistently across the React, sync-HTML, and streaming-HTML outputs.
-*
-* The wrapper tolerates an empty path here (returning `sc-`) so that
-* a leaf renderer at the schema root — `renderToHtml(z.string())` — has
-* a usable id without throwing. Container renderers always thread a
-* non-empty path through `renderChild`, so the empty-id fallback can
-* never produce sibling collisions inside a structured form.
-*/
-function fieldId(path) {
-	if (path.length === 0) return "sc-";
-	return fieldDomId(path);
-}
-/**
-* Tab-panel id for a discriminated union at `path`. Delegates to the
-* canonical `panelIdFor` from `core/idPath.ts` for the normal case so
-* the sync, streaming, and React renderers all emit identical ids; falls
-* back to a structurally-equivalent string when the renderer is invoked
-* with an empty root path (a discriminated union at the schema root —
-* see the `fieldId` doc comment for the wider context).
-*
-* Exported because `streamRenderers.ts` needs to derive identical ids
-* — the panel id on the `<div role="tabpanel">` must match the
-* `aria-controls` on every tab regardless of which pipeline rendered it.
-*/
-function panelId(path) {
-	if (path.length === 0) return `${fieldId(path)}-panel`;
-	return panelIdFor(path);
-}
-/**
-* Tab id for tab `i` within a discriminated union at `path`. Mirror of
-* `panelId` above — see its comment.
-*/
-function tabId(path, i) {
-	if (path.length === 0) return `${fieldId(path)}-tab-${String(i)}`;
-	return tabIdFor(path, i);
-}
 function renderStringHtml(props) {
 	if (props.readOnly) return serialize(renderStringReadOnly(props));
 	return serialize(renderStringEditable(props));
 }
 function renderStringReadOnly(props) {
 	const strValue = typeof props.value === "string" ? props.value : void 0;
-	if (strValue === void 0 || strValue.length === 0) return h("span", {
-		class: SC_CLASSES.valueEmpty,
-		...ariaReadonlyAttrs()
-	}, "—");
+	if (strValue === void 0 || strValue.length === 0) return h("span", { class: SC_CLASSES.valueEmpty }, "—");
 	const format = props.constraints.format;
 	if (format === "email" && isSafeMailtoAddress(strValue)) return h("a", {
 		class: SC_CLASSES.value,
@@ -70,22 +27,22 @@ function renderStringReadOnly(props) {
 		href: strValue,
 		...ariaReadonlyAttrs()
 	}, strValue);
-	return h("span", {
-		class: SC_CLASSES.value,
-		...ariaReadonlyAttrs()
-	}, strValue);
+	return h("span", { class: SC_CLASSES.value }, strValue);
 }
 function renderStringEditable(props) {
 	const strValue = typeof props.value === "string" ? props.value : "";
 	const format = props.constraints.format;
-	const inputType = dateInputType(format) ?? (format === "email" ? "email" : format === "uri" ? "url" : "text");
-	const id = fieldId(props.path);
+	const dateType = dateInputType(format);
+	const isCredential = props.writeOnly && format === "password";
+	const inputType = dateType ?? (isCredential ? "password" : format === "email" ? "email" : format === "uri" ? "url" : "text");
+	const id = fieldDomId(props.path);
 	const attrs = {
 		class: SC_CLASSES.input,
 		id,
 		type: inputType,
 		name: id
 	};
+	if (isCredential) attrs.autocomplete = strValue.length > 0 ? "current-password" : "new-password";
 	if (!props.writeOnly) attrs.value = strValue;
 	if (typeof props.meta.description === "string") attrs.placeholder = props.meta.description;
 	if (props.constraints.minLength !== void 0) attrs.minlength = String(props.constraints.minLength);
@@ -99,24 +56,24 @@ function renderNumberHtml(props) {
 	return serialize(renderNumberEditable(props));
 }
 function renderNumberReadOnly(props) {
-	if (typeof props.value !== "number") return h("span", {
-		class: SC_CLASSES.valueEmpty,
-		...ariaReadonlyAttrs()
-	}, "—");
-	return h("span", {
-		class: SC_CLASSES.value,
-		...ariaReadonlyAttrs()
-	}, props.value.toLocaleString());
+	if (typeof props.value !== "number") return h("span", { class: SC_CLASSES.valueEmpty }, "—");
+	return h("span", { class: SC_CLASSES.value }, props.value.toLocaleString());
 }
 function renderNumberEditable(props) {
 	const numValue = typeof props.value === "number" ? String(props.value) : "";
-	const id = fieldId(props.path);
+	const id = fieldDomId(props.path);
+	const isInteger = props.tree.type === "number" ? props.tree.isInteger : false;
+	const inputMode = isInteger ? "numeric" : "decimal";
+	const multipleOf = props.constraints.multipleOf;
 	const attrs = {
 		class: SC_CLASSES.input,
 		id,
 		type: "number",
-		name: id
+		name: id,
+		inputmode: inputMode
 	};
+	if (multipleOf !== void 0) attrs.step = String(multipleOf);
+	else if (isInteger) attrs.step = "1";
 	if (!props.writeOnly) attrs.value = numValue;
 	if (props.constraints.minimum !== void 0) attrs.min = String(props.constraints.minimum);
 	if (props.constraints.maximum !== void 0) attrs.max = String(props.constraints.maximum);
@@ -129,17 +86,11 @@ function renderBooleanHtml(props) {
 	return serialize(renderBooleanEditable(props));
 }
 function renderBooleanReadOnly(props) {
-	if (typeof props.value !== "boolean") return h("span", {
-		class: SC_CLASSES.valueEmpty,
-		...ariaReadonlyAttrs()
-	}, "—");
-	return h("span", {
-		class: "sc-value sc-value--boolean",
-		...ariaReadonlyAttrs()
-	}, props.value ? "Yes" : "No");
+	if (typeof props.value !== "boolean") return h("span", { class: SC_CLASSES.valueEmpty }, "—");
+	return h("span", { class: "sc-value sc-value--boolean" }, props.value ? "Yes" : "No");
 }
 function renderBooleanEditable(props) {
-	const id = fieldId(props.path);
+	const id = fieldDomId(props.path);
 	const attrs = {
 		class: SC_CLASSES.input,
 		id,
@@ -157,18 +108,12 @@ function renderEnumHtml(props) {
 }
 function renderEnumReadOnly(props) {
 	const enumValue = typeof props.value === "string" ? props.value : "";
-	if (enumValue.length === 0) return h("span", {
-		class: SC_CLASSES.valueEmpty,
-		...ariaReadonlyAttrs()
-	}, "—");
-	return h("span", {
-		class: SC_CLASSES.value,
-		...ariaReadonlyAttrs()
-	}, enumValue);
+	if (enumValue.length === 0) return h("span", { class: SC_CLASSES.valueEmpty }, "—");
+	return h("span", { class: SC_CLASSES.value }, enumValue);
 }
 function renderEnumEditable(props) {
 	const enumValue = typeof props.value === "string" ? props.value : "";
-	const id = fieldId(props.path);
+	const id = fieldDomId(props.path);
 	const selectedValue = props.writeOnly ? "" : enumValue;
 	const enumValues = props.tree.type === "enum" ? props.tree.enumValues : [];
 	const optionNodes = [h("option", { value: "" }, `Select…`), ...enumValues.map((v) => {
@@ -268,8 +213,12 @@ function renderRecordNode(props) {
 	}
 	const children = [];
 	for (const [key, val] of Object.entries(obj)) {
+		const childInputId = buildInputId(props.path, key);
 		const childHtml = props.renderChild(valueType, val, key);
-		children.push(h("div", { class: SC_CLASSES.field }, h("label", { class: SC_CLASSES.label }, key), raw(childHtml)));
+		children.push(h("div", { class: SC_CLASSES.field }, h("label", {
+			class: SC_CLASSES.label,
+			for: childInputId
+		}, key), raw(childHtml)));
 	}
 	return h("div", attrs, ...children);
 }
@@ -307,14 +256,14 @@ function renderDiscriminatedUnionHtml(props) {
 		if (activeOption !== void 0) return props.renderChild(activeOption, props.value);
 		return serialize(h("span", { class: SC_CLASSES.valueEmpty }, "—"));
 	}
-	const tabPanelId = panelId(props.path);
+	const tabPanelId = panelIdFor(props.path);
 	const tabButtons = options.map((_opt, i) => {
 		return h("button", {
 			type: "button",
 			role: "tab",
 			class: i === activeIndex ? SC_CLASSES.tabActive : SC_CLASSES.tab,
-			id: tabId(props.path, i),
-			"aria-selected": i === activeIndex ? "true" : void 0,
+			id: tabIdFor(props.path, i),
+			"aria-selected": i === activeIndex ? "true" : "false",
 			"aria-controls": tabPanelId,
 			tabindex: i === activeIndex ? "0" : "-1"
 		}, optionLabels[i]);
@@ -322,25 +271,25 @@ function renderDiscriminatedUnionHtml(props) {
 	const children = [h("div", {
 		role: "tablist",
 		class: SC_CLASSES.tabs,
-		"aria-label": "Select variant"
+		"aria-label": "Select variant",
+		"aria-orientation": "horizontal"
 	}, ...tabButtons)];
 	if (activeOption !== void 0) {
 		const childHtml = props.renderChild(activeOption, props.value);
 		children.push(h("div", {
 			role: "tabpanel",
 			id: tabPanelId,
-			"aria-labelledby": tabId(props.path, activeIndex)
+			"aria-labelledby": tabIdFor(props.path, activeIndex)
 		}, raw(childHtml)));
 	}
 	return serialize(h("div", { class: SC_CLASSES.discriminatedUnion }, ...children));
 }
 function renderFileHtml(props) {
-	const id = fieldId(props.path);
+	const id = fieldDomId(props.path);
 	const accept = props.constraints.mimeTypes?.join(",");
 	if (props.readOnly) return serialize(h("span", {
 		class: SC_CLASSES.value,
-		id,
-		...ariaReadonlyAttrs()
+		id
 	}, "File field"));
 	const attrs = {
 		class: SC_CLASSES.input,
@@ -407,7 +356,7 @@ function renderNegationHtml(props) {
 * The only valid value is `null`, so render an em-dash placeholder.
 */
 function renderNullHtml(props) {
-	const id = fieldId(props.path);
+	const id = fieldDomId(props.path);
 	return serialize(h("span", {
 		class: SC_CLASSES.valueEmpty,
 		id,
@@ -424,10 +373,15 @@ function renderNullHtml(props) {
 function renderNeverHtml(props) {
 	return serialize(h("span", {
 		class: "sc-value sc-never",
-		id: fieldId(props.path),
-		...ariaReadonlyAttrs()
+		id: fieldDomId(props.path)
 	}, h("em", {}, "never matches")));
 }
+/**
+* Default HTML resolver used by `renderToHtml` and the streaming
+* renderers when the consumer does not pass a custom resolver. Maps
+* every `WalkedField` variant to a semantic HTML renderer built on the
+* `h()` element builder.
+*/
 const defaultHtmlResolver = {
 	string: renderStringHtml,
 	number: renderNumberHtml,
@@ -448,4 +402,4 @@ const defaultHtmlResolver = {
 	unknown: renderUnknownHtml
 };
 //#endregion
-export { dateInputType, defaultHtmlResolver, fieldId, matchUnionOption, panelId, tabId };
+export { dateInputType, defaultHtmlResolver, matchUnionOption };