schema-components 2.0.2 → 2.1.0

package/src/svelte/renderers/Conditional.svelte

@@ -0,0 +1,67 @@
+<!--
+    Headless Svelte 5 renderer for conditional fields — JSON Schema
+    `if` / `then` / `else`. Mirror of
+    `react/headlessRenderers.tsx :: renderConditional`.
+
+    Conditional schemas describe constraints rather than a single
+    value shape, so the renderer surfaces each clause as a labelled
+    section inside a `<fieldset>`. Mirrors the HTML renderer's
+    annotation approach and gives a predictable structure for theme
+    adapters that want to override it.
+-->
+<script lang="ts">
+    import type { SvelteRenderProps } from "../types.ts";
+    import { SC_CLASSES } from "../../core/cssClasses.ts";
+    import Mount from "./Mount.svelte";
+
+    const props = $props<SvelteRenderProps>();
+
+    const ifClause = $derived(
+        props.tree.type === "conditional" ? props.tree.ifClause : undefined
+    );
+    const thenClause = $derived(
+        props.tree.type === "conditional" ? props.tree.thenClause : undefined
+    );
+    const elseClause = $derived(
+        props.tree.type === "conditional" ? props.tree.elseClause : undefined
+    );
+
+    const ifChild = $derived(
+        ifClause !== undefined
+            ? props.renderChild(ifClause, props.value, props.onChange)
+            : null
+    );
+    const thenChild = $derived(
+        thenClause !== undefined
+            ? props.renderChild(thenClause, props.value, props.onChange)
+            : null
+    );
+    const elseChild = $derived(
+        elseClause !== undefined
+            ? props.renderChild(elseClause, props.value, props.onChange)
+            : null
+    );
+</script>
+
+{#if ifClause !== undefined}
+    <fieldset class={SC_CLASSES.conditional}>
+        <div class={SC_CLASSES.conditionalIf}>
+            <strong>if:</strong>
+            {#if ifChild !== null}
+                <Mount descriptor={ifChild} />
+            {/if}
+        </div>
+        {#if thenClause !== undefined && thenChild !== null}
+            <div class={SC_CLASSES.conditionalThen}>
+                <strong>then:</strong>
+                <Mount descriptor={thenChild} />
+            </div>
+        {/if}
+        {#if elseClause !== undefined && elseChild !== null}
+            <div class={SC_CLASSES.conditionalElse}>
+                <strong>else:</strong>
+                <Mount descriptor={elseChild} />
+            </div>
+        {/if}
+    </fieldset>
+{/if}

package/src/svelte/renderers/DiscriminatedUnion.svelte

@@ -0,0 +1,197 @@
+<!--
+    Headless Svelte 5 renderer for `DiscriminatedUnionField` —
+    tabbed UI driven by the discriminator. Mirror of
+    `react/headlessRenderers.tsx :: renderDiscriminatedUnion` plus
+    the embedded `DiscriminatedUnionTabs` component.
+
+    Implements the WAI-ARIA "Tabs with Automatic Activation" pattern:
+    ArrowRight / ArrowLeft move between tabs (wrapping at the
+    extremes), Home / End jump to the first / last tab, every tab
+    carries explicit `aria-selected` (NVDA / JAWS browse-mode read
+    selection state only when the attribute is present on every tab),
+    `aria-controls` references the shared tab-panel id, and a roving
+    `tabindex` (`0` on the active tab, `-1` elsewhere) keeps keyboard
+    focus inside the tablist.
+
+    Focus management state machine — mirrors the React equivalent:
+
+      1. Component renders with `activeIndex` derived from the value.
+      2. User presses an arrow / Home / End key → handler computes
+         the new index, sets the `pendingFocus` flag, and calls
+         `props.onChange({ [discKey]: newLabel })`.
+      3. Parent re-renders with the new value; `activeIndex` updates.
+      4. `$effect` observes the `activeIndex` change AND
+         `pendingFocus`; if both are set, focus the new tab and clear
+         the flag.
+
+    Clicks already move focus (the browser's default), so the
+    `pendingFocus` flag is only ever set inside the keyboard handler.
+    The flag is held in `$state` rather than a plain variable so the
+    effect re-runs reliably when it transitions.
+
+    `$bindable` is intentionally not used — `value`/`onChange` is the
+    canonical contract across React, HTML, and Svelte. Consumers who
+    want `bind:value` ergonomics use `<SchemaComponent {schema}
+    bind:value />` at the call site; Svelte translates that into an
+    `onChange` that mutates the bound rune-backed reference, so this
+    component never sees the binding.
+-->
+<script lang="ts">
+    import type { SvelteRenderProps } from "../types.ts";
+    import { panelIdFor, tabIdFor } from "../../core/idPath.ts";
+    import { EM_DASH } from "../../core/cssClasses.ts";
+    import { isObject } from "../../core/guards.ts";
+    import { resolveDiscriminatedActive } from "../../core/unionMatch.ts";
+    import {
+        discriminatedUnionValueForTab,
+        wrapTabIndex,
+    } from "../headlessFns.ts";
+    import Mount from "./Mount.svelte";
+
+    const props = $props<SvelteRenderProps>();
+
+    const tabRefs: (HTMLButtonElement | null)[] = $state([]);
+    let pendingFocus = $state(false);
+
+    const valueObject = $derived(
+        isObject(props.value) ? props.value : undefined
+    );
+
+    const resolved = $derived(
+        props.tree.type === "discriminatedUnion"
+            ? resolveDiscriminatedActive(
+                  props.tree.options,
+                  props.tree.discriminator,
+                  valueObject
+              )
+            : { optionLabels: [], activeIndex: 0, activeOption: undefined }
+    );
+
+    const options = $derived(
+        props.tree.type === "discriminatedUnion" ? props.tree.options : []
+    );
+
+    const discKey = $derived(
+        props.tree.type === "discriminatedUnion" ? props.tree.discriminator : ""
+    );
+
+    const panelId = $derived(panelIdFor(props.path));
+
+    function handleTabChange(newIndex: number): void {
+        const next = discriminatedUnionValueForTab(
+            resolved.optionLabels,
+            discKey,
+            newIndex
+        );
+        if (next === undefined) return;
+        props.onChange(next);
+    }
+
+    function handleKeyDown(e: KeyboardEvent): void {
+        let target: number | undefined;
+        if (e.key === "ArrowRight")
+            target = wrapTabIndex(resolved.activeIndex + 1, options.length);
+        else if (e.key === "ArrowLeft")
+            target = wrapTabIndex(resolved.activeIndex - 1, options.length);
+        else if (e.key === "Home") target = 0;
+        else if (e.key === "End") target = options.length - 1;
+        if (target === undefined) return;
+        e.preventDefault();
+        if (target === resolved.activeIndex) return;
+        pendingFocus = true;
+        handleTabChange(target);
+    }
+
+    /**
+     * After a keyboard-driven activeIndex change, move focus to the
+     * newly active tab. Skipped on initial mount and after clicks
+     * because `pendingFocus` is only set inside `handleKeyDown`.
+     */
+    $effect(() => {
+        // Re-run when `activeIndex` changes.
+        const index = resolved.activeIndex;
+        if (!pendingFocus) return;
+        pendingFocus = false;
+        const tab = tabRefs[index];
+        if (tab !== null && tab !== undefined) tab.focus();
+    });
+</script>
+
+{#if props.tree.type !== "discriminatedUnion" || options.length === 0}
+    {#if props.value === undefined || props.value === null}
+        <span>{EM_DASH}</span>
+    {:else}
+        <span>{JSON.stringify(props.value)}</span>
+    {/if}
+{:else if props.readOnly}
+    {#if resolved.activeOption !== undefined}
+        {@const child = props.renderChild(
+            resolved.activeOption,
+            props.value,
+            props.onChange
+        )}
+        {#if child !== null}
+            <Mount descriptor={child} />
+        {:else}
+            <span>{EM_DASH}</span>
+        {/if}
+    {:else}
+        <span>{EM_DASH}</span>
+    {/if}
+{:else}
+    <div>
+        <!--
+            `role="tablist"` requires a tabindex per WAI-ARIA. The
+            tablist itself never receives focus directly — the roving
+            tabindex on the individual tabs handles keyboard entry —
+            so set `tabindex=-1` to satisfy the rule without
+            introducing a redundant focus stop.
+        -->
+        <div
+            role="tablist"
+            tabindex={-1}
+            aria-label="Select variant"
+            aria-orientation="horizontal"
+            style="display: flex; gap: 0.25rem; margin-bottom: 0.5rem;"
+            onkeydown={handleKeyDown}
+        >
+            {#each options as _opt, i (i)}
+                <button
+                    bind:this={tabRefs[i]}
+                    type="button"
+                    role="tab"
+                    id={tabIdFor(props.path, i)}
+                    aria-selected={i === resolved.activeIndex ? "true" : "false"}
+                    aria-controls={panelId}
+                    tabindex={i === resolved.activeIndex ? 0 : -1}
+                    onclick={() => handleTabChange(i)}
+                    style="padding: 0.25rem 0.75rem; border: 1px solid {i ===
+                    resolved.activeIndex
+                        ? '#3b82f6'
+                        : '#d1d5db'}; border-radius: 0.25rem; background: {i ===
+                    resolved.activeIndex
+                        ? '#eff6ff'
+                        : 'transparent'}; cursor: pointer; font-size: 0.875rem;"
+                >
+                    {resolved.optionLabels[i]}
+                </button>
+            {/each}
+        </div>
+        <div
+            role="tabpanel"
+            id={panelId}
+            aria-labelledby={tabIdFor(props.path, resolved.activeIndex)}
+        >
+            {#if resolved.activeOption !== undefined}
+                {@const child = props.renderChild(
+                    resolved.activeOption,
+                    props.value,
+                    props.onChange
+                )}
+                {#if child !== null}
+                    <Mount descriptor={child} />
+                {/if}
+            {/if}
+        </div>
+    </div>
+{/if}

package/src/svelte/renderers/Enum.svelte

@@ -0,0 +1,53 @@
+<!--
+    Headless Svelte 5 renderer for `EnumField` — plain `<select>`
+    mirror of `react/headlessRenderers.tsx :: renderEnum`. Lists
+    every enumerated value through `displayJsonValue` and wires the
+    constraint hint via `aria-describedby` when present.
+
+    Read-only mode emits the current value through a `<span>`, falling
+    back to an em-dash for empty / undefined values.
+-->
+<script lang="ts">
+    import type { SvelteRenderProps } from "../types.ts";
+    import { fieldDomId } from "../../core/idPath.ts";
+    import { EM_DASH, ELLIPSIS } from "../../core/cssClasses.ts";
+    import { displayJsonValue } from "../../core/walkBuilders.ts";
+    import { buildAriaAttrs, buildHintInfo } from "../a11y.ts";
+
+    const props = $props<SvelteRenderProps>();
+
+    const id = $derived(fieldDomId(props.path));
+    const enumValue = $derived(
+        typeof props.value === "string" ? props.value : ""
+    );
+</script>
+
+{#if props.readOnly}
+    <span {id}>{enumValue.length > 0 ? enumValue : EM_DASH}</span>
+{:else}
+    {@const ariaAttrs = buildAriaAttrs(props.tree)}
+    {@const hintInfo = buildHintInfo(id, props.constraints)}
+    {@const enumValues =
+        props.tree.type === "enum" ? props.tree.enumValues : []}
+
+    <select
+        {id}
+        value={props.writeOnly ? "" : enumValue}
+        onchange={(e) => {
+            const target = e.currentTarget;
+            if (target instanceof HTMLSelectElement) {
+                props.onChange(target.value);
+            }
+        }}
+        aria-describedby={hintInfo?.ariaDescribedBy}
+        {...ariaAttrs}
+    >
+        <option value="">Select{ELLIPSIS}</option>
+        {#each enumValues as v (displayJsonValue(v))}
+            <option value={displayJsonValue(v)}>{displayJsonValue(v)}</option>
+        {/each}
+    </select>
+    {#if hintInfo !== undefined}
+        <small id={hintInfo.id} class="sc-hint">{hintInfo.hint}</small>
+    {/if}
+{/if}

package/src/svelte/renderers/Fallback.svelte

@@ -0,0 +1,24 @@
+<!--
+    Fallback Svelte renderer emitted by the dispatcher when no widget
+    or resolver render function produced output. Mirror of the React
+    fallback `<span>—</span>` / `<span>{JSON.stringify(value)}</span>`
+    in `react/SchemaComponent.tsx :: renderField`.
+
+    Renders an em-dash for undefined / null values and a stringified
+    JSON projection otherwise so unhandled positions remain visible
+    without a runtime crash.
+-->
+<script lang="ts">
+    import type { SvelteRenderProps } from "../types.ts";
+    import { EM_DASH } from "../../core/cssClasses.ts";
+
+    const props = $props<SvelteRenderProps>();
+</script>
+
+{#if props.value === undefined || props.value === null}
+    <span>{EM_DASH}</span>
+{:else if typeof props.value === "string"}
+    <span>{props.value}</span>
+{:else}
+    <span>{JSON.stringify(props.value)}</span>
+{/if}

package/src/svelte/renderers/File.svelte

@@ -0,0 +1,46 @@
+<!--
+    Headless Svelte 5 renderer for `FileField` — plain
+    `<input type="file">`. Mirror of
+    `react/headlessRenderers.tsx :: renderFile`.
+
+    Wires the first MIME type / array of MIME types from the
+    constraint bag into the `accept` attribute. Read-only mode emits
+    a placeholder span — file inputs cannot meaningfully be rendered
+    read-only.
+-->
+<script lang="ts">
+    import type { SvelteRenderProps } from "../types.ts";
+    import { fieldDomId } from "../../core/idPath.ts";
+    import { buildAriaAttrs, buildHintInfo } from "../a11y.ts";
+
+    const props = $props<SvelteRenderProps>();
+
+    const id = $derived(fieldDomId(props.path));
+    const accept = $derived(props.constraints.mimeTypes?.join(","));
+</script>
+
+{#if props.readOnly}
+    <span {id}>{"File field"}</span>
+{:else}
+    {@const ariaAttrs = buildAriaAttrs(props.tree, props.meta.description)}
+    {@const hintInfo = buildHintInfo(id, props.constraints)}
+    <input
+        {id}
+        type="file"
+        {accept}
+        onchange={(e) => {
+            const target = e.currentTarget;
+            if (target instanceof HTMLInputElement) {
+                const file = target.files?.[0];
+                if (file !== undefined) {
+                    props.onChange(file);
+                }
+            }
+        }}
+        aria-describedby={hintInfo?.ariaDescribedBy}
+        {...ariaAttrs}
+    />
+    {#if hintInfo !== undefined}
+        <small id={hintInfo.id} class="sc-hint">{hintInfo.hint}</small>
+    {/if}
+{/if}

package/src/svelte/renderers/Literal.svelte

@@ -0,0 +1,29 @@
+<!--
+    Headless Svelte 5 renderer for literal fields — `z.literal("a")` or
+    `{ const: 5 }`. Mirror of
+    `react/headlessRenderers.tsx :: renderLiteral`.
+
+    Literals are non-editable by nature (the value is fixed at the
+    schema level), so both read-only and editable modes display the
+    declared value(s). Multiple literals (`z.literal(["a", "b"])`)
+    render comma-separated through `displayJsonValue`.
+-->
+<script lang="ts">
+    import type { SvelteRenderProps } from "../types.ts";
+    import { fieldDomId } from "../../core/idPath.ts";
+    import { EM_DASH } from "../../core/cssClasses.ts";
+    import { displayJsonValue } from "../../core/walkBuilders.ts";
+
+    const props = $props<SvelteRenderProps>();
+
+    const id = $derived(fieldDomId(props.path));
+    const literalValues = $derived(
+        props.tree.type === "literal" ? props.tree.literalValues : []
+    );
+</script>
+
+{#if props.tree.type !== "literal" || literalValues.length === 0}
+    <span {id}>{EM_DASH}</span>
+{:else}
+    <span {id}>{literalValues.map((v) => displayJsonValue(v)).join(", ")}</span>
+{/if}

package/src/svelte/renderers/Mount.svelte

@@ -0,0 +1,24 @@
+<!--
+    Utility component that mounts a {@link SvelteRenderDescriptor}
+    returned by `props.renderChild(...)`. Centralised so every
+    container renderer (`Object`, `Array`, `Tuple`, `Record`,
+    `Union`, `DiscriminatedUnion`, `Conditional`, `Negation`) uses
+    the same `<svelte:component>`-equivalent code path.
+
+    Svelte 5's dynamic-component feature renders a capitalised local
+    variable that references a `Component<Props>` constructor as
+    `<Var ... />`. The descriptor is destructured once here so the
+    consumer just writes `<Mount {descriptor} />`.
+-->
+<script lang="ts">
+    import type { SvelteRenderDescriptor } from "../types.ts";
+
+    interface Props {
+        descriptor: SvelteRenderDescriptor;
+    }
+
+    const { descriptor }: Props = $props();
+    const Component = $derived(descriptor.component);
+</script>
+
+<Component {...descriptor.props} />

package/src/svelte/renderers/Negation.svelte

@@ -0,0 +1,35 @@
+<!--
+    Headless Svelte 5 renderer for negation fields — JSON Schema
+    `{ not: { ... } }`. Mirror of
+    `react/headlessRenderers.tsx :: renderNegation`.
+
+    Negation describes a constraint ("value must NOT match this
+    schema") rather than a value shape. The renderer surfaces the
+    negated schema beneath an explanatory preamble inside a
+    `<fieldset>`.
+-->
+<script lang="ts">
+    import type { SvelteRenderProps } from "../types.ts";
+    import { SC_CLASSES } from "../../core/cssClasses.ts";
+    import Mount from "./Mount.svelte";
+
+    const props = $props<SvelteRenderProps>();
+
+    const negated = $derived(
+        props.tree.type === "negation" ? props.tree.negated : undefined
+    );
+    const child = $derived(
+        negated !== undefined
+            ? props.renderChild(negated, props.value, props.onChange)
+            : null
+    );
+</script>
+
+{#if negated !== undefined}
+    <fieldset class={SC_CLASSES.negation}>
+        <strong>Must NOT match:</strong>
+        {#if child !== null}
+            <Mount descriptor={child} />
+        {/if}
+    </fieldset>
+{/if}

package/src/svelte/renderers/Never.svelte

@@ -0,0 +1,24 @@
+<!--
+    Headless Svelte 5 renderer for `NeverField` — `z.never()` or
+    `{ not: {} }` / `false` schemas. Mirror of
+    `react/headlessRenderers.tsx :: renderNever`.
+
+    `never` indicates a position that cannot hold any value. Render a
+    visible placeholder rather than throwing because some valid
+    schemas intentionally contain `never` branches (e.g. exhaustive
+    discriminated unions), and a runtime crash on render would be
+    worse than a visible indicator.
+-->
+<script lang="ts">
+    import type { SvelteRenderProps } from "../types.ts";
+    import { fieldDomId } from "../../core/idPath.ts";
+    import { SC_CLASSES } from "../../core/cssClasses.ts";
+
+    const props = $props<SvelteRenderProps>();
+
+    const id = $derived(fieldDomId(props.path));
+</script>
+
+<span {id} class={SC_CLASSES.never}>
+    <em>never matches</em>
+</span>

package/src/svelte/renderers/Null.svelte

@@ -0,0 +1,19 @@
+<!--
+    Headless Svelte 5 renderer for null fields — `z.null()` or
+    `{ type: "null" }`. Mirror of
+    `react/headlessRenderers.tsx :: renderNull`.
+
+    The only valid value is `null`, so render an em-dash placeholder
+    regardless of mode. There is nothing the user can usefully change.
+-->
+<script lang="ts">
+    import type { SvelteRenderProps } from "../types.ts";
+    import { fieldDomId } from "../../core/idPath.ts";
+    import { EM_DASH } from "../../core/cssClasses.ts";
+
+    const props = $props<SvelteRenderProps>();
+
+    const id = $derived(fieldDomId(props.path));
+</script>
+
+<span {id}>{EM_DASH}</span>

package/src/svelte/renderers/Number.svelte

@@ -0,0 +1,68 @@
+<!--
+    Headless Svelte 5 renderer for `NumberField` — plain
+    `<input type="number">` mirror of
+    `react/headlessRenderers.tsx :: renderNumber`.
+
+    Drives `inputmode` from the walked field's `isInteger` flag
+    (`numeric` for integers, `decimal` otherwise) and the step
+    attribute from `multipleOf` — falling back to `step="1"` for
+    integer schemas without `multipleOf`, omitted otherwise so the
+    browser default applies.
+
+    Read-only mode emits the value through `toLocaleString()` so
+    locale-aware thousands separators / decimal marks match the
+    React equivalent.
+-->
+<script lang="ts">
+    import type { SvelteRenderProps } from "../types.ts";
+    import { fieldDomId } from "../../core/idPath.ts";
+    import { EM_DASH } from "../../core/cssClasses.ts";
+    import { buildAriaAttrs, buildHintInfo } from "../a11y.ts";
+
+    const props = $props<SvelteRenderProps>();
+
+    const id = $derived(fieldDomId(props.path));
+</script>
+
+{#if props.readOnly}
+    {#if typeof props.value !== "number"}
+        <span {id}>{EM_DASH}</span>
+    {:else}
+        <span {id}>{props.value.toLocaleString()}</span>
+    {/if}
+{:else}
+    {@const numValue = typeof props.value === "number" ? props.value : ""}
+    {@const ariaAttrs = buildAriaAttrs(props.tree)}
+    {@const hintInfo = buildHintInfo(id, props.constraints)}
+    {@const isInteger =
+        props.tree.type === "number" ? props.tree.isInteger : false}
+    {@const inputMode = isInteger ? "numeric" : "decimal"}
+    {@const multipleOf = props.constraints.multipleOf}
+    {@const step =
+        multipleOf !== undefined
+            ? String(multipleOf)
+            : isInteger
+              ? "1"
+              : undefined}
+
+    <input
+        {id}
+        type="number"
+        inputmode={inputMode}
+        {step}
+        value={props.writeOnly ? "" : numValue}
+        onchange={(e) => {
+            const target = e.currentTarget;
+            if (target instanceof HTMLInputElement) {
+                props.onChange(Number(target.value));
+            }
+        }}
+        min={props.constraints.minimum}
+        max={props.constraints.maximum}
+        aria-describedby={hintInfo?.ariaDescribedBy}
+        {...ariaAttrs}
+    />
+    {#if hintInfo !== undefined}
+        <small id={hintInfo.id} class="sc-hint">{hintInfo.hint}</small>
+    {/if}
+{/if}

package/src/svelte/renderers/Object.svelte

@@ -0,0 +1,74 @@
+<!--
+    Headless Svelte 5 renderer for `ObjectField` — `<fieldset>` per
+    object with one labelled child per property. Mirrors
+    `react/headlessRenderers.tsx :: renderObject`.
+
+    Each property is rendered by calling `props.renderChild(field,
+    childValue, childOnChange, key)` and mounting the returned
+    descriptor via `<Mount descriptor={…} />` (the shared utility
+    component in this directory).
+    The label text falls back to the structural key when no
+    `meta.description` is supplied — every input gets an accessible
+    name even on an undecorated `z.object({...})`.
+-->
+<script lang="ts">
+    import type { SvelteRenderProps } from "../types.ts";
+    import { fieldDomId } from "../../core/idPath.ts";
+    import { sortFieldsByOrder } from "../../core/fieldOrder.ts";
+    import { isObject } from "../../core/guards.ts";
+    import Mount from "./Mount.svelte";
+
+    const props = $props<SvelteRenderProps>();
+
+    /**
+     * Narrow once at the top — the dispatcher only calls this renderer
+     * when `tree.type === "object"`. The check is defensive against
+     * misconfigured custom resolvers wiring this component into the
+     * wrong slot.
+     */
+    const fields = $derived(
+        props.tree.type === "object" ? props.tree.fields : {}
+    );
+
+    const obj = $derived<Record<string, unknown>>(
+        isObject(props.value) ? props.value : {}
+    );
+
+    const sortedEntries = $derived(sortFieldsByOrder(fields));
+</script>
+
+<fieldset>
+    {#if typeof props.meta.description === "string"}
+        <legend>{props.meta.description}</legend>
+    {/if}
+    {#each sortedEntries.filter(([, field]) => field.meta.visible !== false) as [key, field] (key)}
+        {@const childValue = obj[key]}
+        {@const childId = fieldDomId(`${props.path}.${key}`)}
+        {@const labelText =
+            typeof field.meta.description === "string"
+                ? field.meta.description
+                : key}
+        {@const childOnChange = (v: unknown) => {
+            const updated: Record<string, unknown> = {};
+            for (const [k, val] of Object.entries(obj)) {
+                updated[k] = val;
+            }
+            updated[key] = v;
+            props.onChange(updated);
+        }}
+        {@const child = props.renderChild(field, childValue, childOnChange, key)}
+        {#if child !== null}
+            <div>
+                <label for={childId}>
+                    {labelText}
+                    {#if field.isOptional === false}
+                        <span aria-hidden="true" style="color: #dc2626"
+                            >{" *"}</span
+                        >
+                    {/if}
+                </label>
+                <Mount descriptor={child} />
+            </div>
+        {/if}
+    {/each}
+</fieldset>