@salesforce/webapp-template-feature-react-global-search-experimental 1.25.0 → 1.25.2

package/dist/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.25.2](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.25.1...v1.25.2) (2026-02-11)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
+## [1.25.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.25.0...v1.25.1) (2026-02-11)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
 # [1.25.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.24.0...v1.25.0) (2026-02-11)
 
 **Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental

package/dist/force-app/main/default/webapplications/feature-react-global-search/src/api/objectDetailService.ts

@@ -0,0 +1,97 @@
+import { uiApiClient } from "@salesforce/webapp-experimental/api";
+import type { LayoutResponse } from "../types/recordDetail/recordDetail";
+import { LayoutResponseSchema } from "../types/recordDetail/recordDetail";
+import type { SearchResultRecordData } from "../types/search/searchResults";
+import { SearchResultRecordDataSchema } from "../types/search/searchResults";
+import { fetchAndValidate, safeEncodePath } from "../utils/apiUtils";
+import { calculateFieldsToFetch } from "../utils/recordUtils";
+import { objectInfoService } from "./objectInfoService";
+import type { ObjectInfoResult } from "../types/objectInfo/objectInfo";
+
+/** Fallback when record type is unknown. Prefer recordTypeId from the record (e.g. from search or record response) when available. */
+const DEFAULT_RECORD_TYPE_ID = "012000000000000AAA";
+
+/** Builds optionalFields list from layout (delegates to recordUtils for LWC-aligned logic). */
+export function extractFieldsFromLayout(
+	objectMetadata: ObjectInfoResult,
+	layout: LayoutResponse,
+): string[] {
+	const [optionalFields] = calculateFieldsToFetch(objectMetadata, layout, true);
+	return optionalFields;
+}
+
+export async function getLayout(
+	objectApiName: string,
+	recordTypeId: string = DEFAULT_RECORD_TYPE_ID,
+	signal?: AbortSignal,
+): Promise<LayoutResponse> {
+	const params = new URLSearchParams({
+		layoutType: "Full",
+		mode: "View",
+		recordTypeId,
+	});
+	return fetchAndValidate(
+		(abortSignal) =>
+			uiApiClient.get(`/layout/${safeEncodePath(objectApiName)}?${params.toString()}`, {
+				signal: abortSignal,
+			}),
+		{
+			schema: LayoutResponseSchema,
+			errorContext: `layout for ${objectApiName}`,
+			signal,
+		},
+	);
+}
+
+export async function getRecord(
+	recordId: string,
+	optionalFields: string[],
+	signal?: AbortSignal,
+): Promise<SearchResultRecordData> {
+	const optionalFieldsParam = optionalFields.length > 0 ? optionalFields.join(",") : "";
+	const query = optionalFieldsParam
+		? `?optionalFields=${encodeURIComponent(optionalFieldsParam)}`
+		: "";
+	const validated = await fetchAndValidate(
+		(abortSignal) =>
+			uiApiClient.get(`/records/${safeEncodePath(recordId)}${query}`, {
+				signal: abortSignal,
+			}),
+		{
+			schema: SearchResultRecordDataSchema,
+			errorContext: `record ${recordId}`,
+			signal,
+		},
+	);
+	return validated as SearchResultRecordData;
+}
+
+export interface RecordDetailResult {
+	layout: LayoutResponse;
+	record: SearchResultRecordData;
+	objectMetadata: ObjectInfoResult;
+}
+
+export async function getRecordDetail(
+	objectApiName: string,
+	recordId: string,
+	recordTypeId: string = DEFAULT_RECORD_TYPE_ID,
+	signal?: AbortSignal,
+): Promise<RecordDetailResult> {
+	const layout = await getLayout(objectApiName, recordTypeId, signal);
+	const objectMetadata = await objectInfoService.getObjectInfoBatch(objectApiName, signal);
+	const firstResult = objectMetadata?.results?.[0]?.result;
+	if (!firstResult) {
+		throw new Error(`Object metadata not found for ${objectApiName}`);
+	}
+	const [optionalFields] = calculateFieldsToFetch(firstResult, layout, true);
+	const record = await getRecord(recordId, optionalFields, signal);
+	return { layout, record, objectMetadata: firstResult };
+}
+
+export const objectDetailService = {
+	extractFieldsFromLayout,
+	getLayout,
+	getRecord,
+	getRecordDetail,
+};

package/dist/force-app/main/default/webapplications/feature-react-global-search/src/components/FiltersPanel.tsx

@@ -36,6 +36,7 @@ import type { Filter, FilterCriteria } from "../types/filters/filters";
 import type { PicklistValue } from "../types/filters/picklist";
 import { parseFilterValue } from "../utils/filterUtils";
 import { sanitizeFilterValue } from "../utils/sanitizationUtils";
+import { getFormValueByPath } from "../utils/formUtils";
 
 interface FiltersPanelProps {
 	filters: Filter[];
@@ -144,7 +145,8 @@ export default function FiltersPanel({
 							}
 						}
 					} else {
-						const fieldValueRaw = value[filter.targetFieldPath] || "";
+						const fieldValueRaw =
+							getFormValueByPath(value as Record<string, unknown>, filter.targetFieldPath) || "";
 						const fieldValue = sanitizeFilterValue(fieldValueRaw);
 
 						if (fieldValue) {

package/dist/force-app/main/default/webapplications/feature-react-global-search/src/components/SearchResultCard.tsx

@@ -6,7 +6,7 @@
  *
  * @param record - The search result record data to display
  * @param columns - Array of column definitions for field display
- * @param objectApiName - Optional API name of the object (deprecated, kept for backward compatibility)
+ * @param objectApiName - API name of the object (path param in detail URL: /object/:objectApiName/:recordId)
  *
  * @remarks
  * - Automatically identifies the primary field (usually "Name")
@@ -29,6 +29,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
 import type { Column, SearchResultRecordData } from "../types/search/searchResults";
 import { getNestedFieldValue } from "../utils/fieldUtils";
 import ResultCardFields from "./search/ResultCardFields";
+import { OBJECT_API_NAMES } from "../constants";
 
 interface SearchResultCardProps {
 	record: SearchResultRecordData;
@@ -55,11 +56,14 @@ export default function SearchResultCard({
 		return null;
 	}
 
+	const detailPath = useMemo(
+		() => `/object/${objectApiName?.trim() || OBJECT_API_NAMES[0]}/${record.id}`,
+		[record.id, objectApiName],
+	);
+
 	const handleClick = useCallback(() => {
-		if (record.id) {
-			navigate(`/detail/${record.id}`);
-		}
-	}, [record.id, navigate]);
+		if (record.id) navigate(detailPath);
+	}, [record.id, detailPath, navigate]);
 
 	const handleKeyDown = useCallback(
 		(e: React.KeyboardEvent) => {

package/dist/force-app/main/default/webapplications/feature-react-global-search/src/components/detail/DetailFields.tsx

@@ -1,25 +1,13 @@
 /**
- * DetailFields Component
+ * Alternative detail rendering: columns + record → label/value list.
  *
- * Displays all fields for a record in the detail page.
- * Shows field labels and values in a structured layout.
+ * Use when you have list columns + record (e.g. from useRecordDetail or getObjectListInfo
+ * + searchResults) and do not need the Layout API. The primary detail view (DetailPage)
+ * uses DetailForm via UiApiDetailForm; use this component for list-to-detail flows
+ * that rely on column metadata instead of layout.
  *
- * @param record - The record data to display
- * @param columns - Array of column definitions for field display
- *
- * @remarks
- * - Displays all available fields from the record
- * - Handles nested field paths (e.g., "Owner.Alias")
- * - Skips fields with null/undefined/empty values
- * - Responsive layout (vertical on mobile, horizontal on desktop)
- *
- * @example
- * ```tsx
- * <DetailFields
- *   record={recordData}
- *   columns={columns}
- * />
- * ```
+ * @param record - Record data to display
+ * @param columns - Column definitions (e.g. from getObjectListInfo)
  */
 import type { Column, SearchResultRecordData } from "../../types/search/searchResults";
 import { getNestedFieldValue } from "../../utils/fieldUtils";
@@ -29,23 +17,34 @@ interface DetailFieldsProps {
 	columns: Column[];
 }
 
-export default function DetailFields({ record, columns }: DetailFieldsProps) {
-	return (
-		<dl className="space-y-4" role="list">
-			{columns.map((column) => {
-				if (!column || !column.fieldApiName) return null;
+function hasVisibleValue(value: string | number | boolean | null | undefined): boolean {
+	return value !== null && value !== undefined && value !== "";
+}
 
-				const displayValue = getNestedFieldValue(record.fields, column.fieldApiName);
+export default function DetailFields({ record, columns }: DetailFieldsProps) {
+	const rows = columns.filter(
+		(col) =>
+			col?.fieldApiName && hasVisibleValue(getNestedFieldValue(record.fields, col.fieldApiName)),
+	);
 
-				if (displayValue === null || displayValue === undefined || displayValue === "") {
-					return null;
-				}
+	if (columns.length > 0 && rows.length === 0) {
+		return (
+			<div role="status" className="text-sm text-muted-foreground py-4">
+				No field values to display
+			</div>
+		);
+	}
 
+	return (
+		<dl className="space-y-4" role="list">
+			{rows.map((column) => {
+				const fieldApiName = column.fieldApiName as string;
+				const displayValue = getNestedFieldValue(record.fields, fieldApiName);
 				return (
-					<div key={column.fieldApiName} className="border-b pb-4 last:border-0" role="listitem">
+					<div key={fieldApiName} className="border-b pb-4 last:border-0" role="listitem">
 						<div className="flex flex-col sm:flex-row sm:items-start gap-2">
 							<dt className="font-semibold text-sm text-muted-foreground min-w-[150px]">
-								{column.label || column.fieldApiName}:
+								{column.label || fieldApiName}:
 							</dt>
 							<dd className="text-sm text-foreground flex-1">{displayValue}</dd>
 						</div>

package/dist/force-app/main/default/webapplications/feature-react-global-search/src/components/detail/DetailForm.tsx

@@ -0,0 +1,143 @@
+import { useState, useCallback, useMemo, useId } from "react";
+import type { LayoutResponse } from "../../types/recordDetail/recordDetail";
+import type { SearchResultRecordData } from "../../types/search/searchResults";
+import type { FieldValue } from "../../types/search/searchResults";
+import {
+	getDisplayValueForDetailField,
+	getDisplayValueForLayoutItem,
+} from "../../utils/fieldUtils";
+import { calculateFormData } from "../../utils/formDataTransformUtils";
+import type { ObjectInfoMetadata } from "../../utils/formDataTransformUtils";
+import {
+	getTransformedSections,
+	type LayoutTransformContext,
+	type ObjectInfo,
+	type PicklistOption,
+	type TransformedLayoutItem,
+} from "../../utils/layoutTransformUtils";
+import { FieldValueDisplay } from "./formatted";
+import { Section } from "./Section";
+import { SectionRow } from "./SectionRow";
+
+export interface DetailFormProps {
+	layout: LayoutResponse;
+	record: SearchResultRecordData;
+	metadata?: ObjectInfoMetadata | null;
+	objectInfo?: ObjectInfo | null;
+	lookupRecords?: Record<string, PicklistOption[] | null> | null;
+	showSectionHeaders?: boolean;
+	collapsibleSections?: boolean;
+}
+
+function FieldCell({
+	item,
+	fields,
+}: {
+	item: TransformedLayoutItem;
+	fields: Record<string, FieldValue>;
+}) {
+	if (!item.isField || item.apiName == null) return null;
+	const label = item.label ?? item.apiName;
+	const value =
+		item.layoutComponentApiNames && item.layoutComponentApiNames.length > 0
+			? getDisplayValueForLayoutItem(fields, item.layoutComponentApiNames).value
+			: getDisplayValueForDetailField(fields[item.apiName]);
+	const dataType = item.dataType ?? undefined;
+	const labelId = useId();
+	const valueId = useId();
+	return (
+		<div
+			className="flex flex-col gap-1"
+			role="listitem"
+			aria-labelledby={labelId}
+			aria-describedby={valueId}
+		>
+			<dt id={labelId} className="text-sm font-medium text-muted-foreground">
+				{label}
+			</dt>
+			<dd id={valueId} className="text-sm text-foreground">
+				<FieldValueDisplay value={value} dataType={dataType} />
+			</dd>
+		</div>
+	);
+}
+
+/**
+ * Read-only detail form: layout API + record (+ optional object info) drive sections, rows, and
+ * field values. Uses layoutComponents to club multi-component items (address, Created By, etc.).
+ */
+export function DetailForm({
+	layout,
+	record,
+	metadata = null,
+	objectInfo = null,
+	lookupRecords = null,
+	showSectionHeaders = true,
+	collapsibleSections = true,
+}: DetailFormProps) {
+	const [collapsedSections, setCollapsedSections] = useState<Record<string, boolean>>({});
+
+	const formData = useMemo(
+		() => calculateFormData(record, metadata ?? undefined),
+		[record, metadata],
+	);
+
+	const displayFields: Record<string, FieldValue> = formData.formValues[record.id] ?? record.fields;
+
+	const layoutObjectInfo = objectInfo ?? metadata;
+
+	const transformContext: LayoutTransformContext = useMemo(
+		() => ({
+			recordId: record.id,
+			objectInfo: layoutObjectInfo,
+			lookupRecords,
+			getSectionCollapsedState: (sectionId: string) => Boolean(collapsedSections[sectionId]),
+		}),
+		[record.id, layoutObjectInfo, lookupRecords, collapsedSections],
+	);
+
+	const computedSections = useMemo(
+		() => getTransformedSections(layout.sections, transformContext),
+		[layout.sections, transformContext],
+	);
+
+	const handleSectionToggle = useCallback((sectionId: string, collapsed: boolean) => {
+		setCollapsedSections((prev) => ({ ...prev, [sectionId]: collapsed }));
+	}, []);
+
+	return (
+		<div
+			className="space-y-6"
+			role="region"
+			aria-label="Record details"
+			aria-roledescription="Detail form"
+		>
+			{computedSections.map((section) => (
+				<Section
+					key={section.key}
+					sectionId={section.id}
+					titleLabel={section.heading}
+					showHeader={showSectionHeaders && section.useHeading}
+					collapsible={collapsibleSections && section.collapsible}
+					collapsed={section.collapsed}
+					onToggle={handleSectionToggle}
+				>
+					<div className="space-y-4">
+						{section.layoutRows.map((row) => (
+							<SectionRow key={row.key}>
+								{row.layoutItems.map((item) => {
+									const cellKey = `${section.key}-${row.key}-${item.apiName ?? item.key}`;
+									return item.isField ? (
+										<FieldCell key={cellKey} item={item} fields={displayFields} />
+									) : (
+										<div key={cellKey} className="min-h-[2.5rem]" aria-hidden="true" />
+									);
+								})}
+							</SectionRow>
+						))}
+					</div>
+				</Section>
+			))}
+		</div>
+	);
+}

package/dist/force-app/main/default/webapplications/feature-react-global-search/src/components/detail/DetailHeader.tsx

@@ -1,23 +1,8 @@
 /**
- * DetailHeader Component
+ * Back button and title for the record detail page.
  *
- * Displays a back button for navigating away from the detail page.
- *
- * @param title - Title text (currently unused but kept for consistency)
- * @param onBack - Callback function to navigate back
- *
- * @remarks
- * - Simple component with just a back button
- * - Uses ghost variant for subtle styling
- * - Includes accessibility label
- *
- * @example
- * ```tsx
- * <DetailHeader
- *   title="Record Details"
- *   onBack={() => navigate(-1)}
- * />
- * ```
+ * @param title - Record title (e.g. record name) shown next to the back control.
+ * @param onBack - Called when the user activates the back control.
  */
 import { Button } from "../ui/button";
 import { ArrowLeft } from "lucide-react";
@@ -27,16 +12,23 @@ interface DetailHeaderProps {
 	onBack: () => void;
 }
 
-export default function DetailHeader({ onBack }: DetailHeaderProps) {
+export default function DetailHeader({ title, onBack }: DetailHeaderProps) {
 	return (
-		<Button
-			variant="ghost"
-			onClick={onBack}
-			className="mb-6"
-			aria-label="Go back to search results"
-		>
-			<ArrowLeft className="h-4 w-4 mr-2" aria-hidden="true" />
-			Back
-		</Button>
+		<div className="mb-6 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
+			<Button
+				variant="ghost"
+				onClick={onBack}
+				className="w-fit"
+				aria-label="Go back to search results"
+			>
+				<ArrowLeft className="h-4 w-4 mr-2" aria-hidden="true" />
+				Back
+			</Button>
+			{title ? (
+				<h1 className="text-xl font-semibold text-foreground truncate" id="detail-page-title">
+					{title}
+				</h1>
+			) : null}
+		</div>
 	);
 }

package/dist/force-app/main/default/webapplications/feature-react-global-search/src/components/detail/DetailLayoutSections.tsx

@@ -0,0 +1,80 @@
+/**
+ * Alternative detail rendering: layout sections → rows → items → label/value grid.
+ *
+ * Use when you have raw Layout API response + record and do not need the full
+ * layoutTransformUtils + formDataTransformUtils pipeline. The primary detail view
+ * (DetailPage) uses DetailForm via UiApiDetailForm; use this component for other
+ * entry points that already have layout + record in hand.
+ */
+import type { LayoutResponse } from "../../types/recordDetail/recordDetail";
+import type { SearchResultRecordData } from "../../types/search/searchResults";
+import { getNestedFieldValue } from "../../utils/fieldUtils";
+
+interface DetailLayoutSectionsProps {
+	layout: LayoutResponse;
+	record: SearchResultRecordData;
+}
+
+interface FieldEntry {
+	key: string;
+	label: string;
+	value: string | number | boolean | null;
+}
+
+function getSectionFieldEntries(
+	section: LayoutResponse["sections"][number],
+	record: SearchResultRecordData,
+): FieldEntry[] {
+	const entries: FieldEntry[] = [];
+	section.layoutRows.forEach((row, rowIdx) => {
+		row.layoutItems.forEach((item, itemIdx) => {
+			item.layoutComponents.forEach((comp, compIdx) => {
+				if (comp.componentType !== "Field" || !comp.apiName) return;
+				const value = getNestedFieldValue(record.fields, comp.apiName);
+				const label = comp.label ?? item.label;
+				entries.push({
+					key: `${section.id}-${rowIdx}-${itemIdx}-${comp.apiName ?? compIdx}`,
+					label: label || comp.apiName,
+					value: value ?? null,
+				});
+			});
+		});
+	});
+	return entries;
+}
+
+export default function DetailLayoutSections({ layout, record }: DetailLayoutSectionsProps) {
+	return (
+		<div className="space-y-8" role="region" aria-label="Record details">
+			{layout.sections.map((section) => {
+				const entries = getSectionFieldEntries(section, record);
+				if (entries.length === 0) return null;
+
+				return (
+					<section
+						key={section.id}
+						className="space-y-4"
+						aria-labelledby={section.useHeading ? `section-${section.id}` : undefined}
+					>
+						{section.useHeading && section.heading ? (
+							<h3
+								id={`section-${section.id}`}
+								className="text-base font-semibold text-foreground border-b pb-2"
+							>
+								{section.heading}
+							</h3>
+						) : null}
+						<dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-4">
+							{entries.map(({ key, label, value }) => (
+								<div key={key} className="flex flex-col gap-1">
+									<dt className="text-sm font-medium text-muted-foreground">{label}</dt>
+									<dd className="text-sm text-foreground">{value || "—"}</dd>
+								</div>
+							))}
+						</dl>
+					</section>
+				);
+			})}
+		</div>
+	);
+}

package/dist/force-app/main/default/webapplications/feature-react-global-search/src/components/detail/Section.tsx

@@ -0,0 +1,108 @@
+import { useState, useCallback, useEffect, useRef } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import type { ReactNode } from "react";
+
+export interface SectionProps {
+	sectionId: string;
+	titleLabel: string;
+	showHeader: boolean;
+	collapsible: boolean;
+	/** When provided, section is controlled (parent owns state). When undefined, section is uncontrolled (internal state). */
+	collapsed?: boolean;
+	onToggle?: (sectionId: string, collapsed: boolean) => void;
+	children: ReactNode;
+}
+
+/**
+ * Section block with optional heading and collapsible content. Controlled when
+ * `collapsed` is passed; uncontrolled otherwise. Accessible: aria-expanded, aria-controls, keyboard (Enter/Space).
+ */
+export function Section({
+	sectionId,
+	titleLabel,
+	showHeader,
+	collapsible,
+	collapsed: controlledCollapsed,
+	onToggle,
+	children,
+}: SectionProps) {
+	const [internalCollapsed, setInternalCollapsed] = useState(false);
+	const isControlled = controlledCollapsed !== undefined;
+	const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
+
+	const warnedUncontrolledRef = useRef(false);
+	useEffect(() => {
+		if (
+			process.env.NODE_ENV === "development" &&
+			onToggle != null &&
+			!isControlled &&
+			!warnedUncontrolledRef.current
+		) {
+			warnedUncontrolledRef.current = true;
+			console.warn(
+				"[Section] onToggle is passed but collapsed is undefined; section is uncontrolled. Pass collapsed to control from parent.",
+			);
+		}
+	}, [onToggle, isControlled]);
+
+	const contentId = `section-content-${sectionId}`;
+	const headerId = `section-header-${sectionId}`;
+
+	const handleToggle = useCallback(() => {
+		const next = !collapsed;
+		if (!isControlled) setInternalCollapsed(next);
+		onToggle?.(sectionId, next);
+	}, [collapsed, isControlled, onToggle, sectionId]);
+
+	const handleKeyDown = useCallback(
+		(e: React.KeyboardEvent) => {
+			if (!collapsible) return;
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				handleToggle();
+			}
+		},
+		[collapsible, handleToggle],
+	);
+
+	return (
+		<section
+			className="border-b border-border last:border-b-0 pb-6 last:pb-0"
+			aria-labelledby={showHeader ? headerId : undefined}
+		>
+			{showHeader && titleLabel && (
+				<h3 id={headerId} className="text-base font-semibold text-foreground mb-4">
+					{collapsible ? (
+						<button
+							type="button"
+							className="flex items-center gap-2 w-full text-left hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded"
+							onClick={handleToggle}
+							onKeyDown={handleKeyDown}
+							aria-expanded={!collapsed}
+							aria-controls={contentId}
+							aria-label={`${titleLabel}, ${collapsed ? "expand" : "collapse"} section`}
+							aria-roledescription="Section toggle"
+						>
+							{collapsed ? (
+								<ChevronRight className="h-4 w-4 shrink-0" aria-hidden />
+							) : (
+								<ChevronDown className="h-4 w-4 shrink-0" aria-hidden />
+							)}
+							<span>{titleLabel}</span>
+						</button>
+					) : (
+						<span className="block">{titleLabel}</span>
+					)}
+				</h3>
+			)}
+			<div
+				id={contentId}
+				className={showHeader && collapsible ? "mt-2" : ""}
+				aria-hidden={collapsible ? collapsed : undefined}
+				hidden={collapsible && collapsed}
+			>
+				{children}
+			</div>
+		</section>
+	);
+}

package/dist/force-app/main/default/webapplications/feature-react-global-search/src/components/detail/SectionRow.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+
+export interface SectionRowProps {
+	children: ReactNode;
+}
+
+/**
+ * One row of the detail form: definition list (dl) with two-column grid. Each child
+ * is a layout item (field cell or placeholder) from the layout API row.
+ */
+export function SectionRow({ children }: SectionRowProps) {
+	return (
+		<dl
+			className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-4 sm:gap-y-2"
+			aria-label="Row of fields"
+		>
+			{children}
+		</dl>
+	);
+}