@proyecto-viviana/solidaria-components 0.5.0 → 0.5.1

package/src/DateField.tsx

@@ -305,8 +305,7 @@ function DateFieldInner<T extends DateValue = CalendarDate>(
   // onto the <Input> via InputContext so useFormReset/useFormValidation target
   // that element. We mirror that: create it here, hand it to createDateField
   // below, and attach it to the same input through the context getter.
-  const [validationInputRef, setValidationInputRef] =
-    createSignal<HTMLInputElement | null>(null);
+  const [validationInputRef, setValidationInputRef] = createSignal<HTMLInputElement | null>(null);
 
   const state = createDateFieldState(stateProps);
 
@@ -474,9 +473,7 @@ function RootHiddenDateInput(props: RootHiddenDateInputProps): JSX.Element {
     const value = props.state.value();
     if (!value) return "";
     if (granularity() === "day") return toCalendarDate(value).toString();
-    return toCalendarDateTime(
-      "timeZone" in value ? toLocalTimeZone(value) : value,
-    ).toString();
+    return toCalendarDateTime("timeZone" in value ? toLocalTimeZone(value) : value).toString();
   };
 
   const onChange: JSX.EventHandler<HTMLInputElement, Event> = (event) => {
@@ -484,8 +481,9 @@ function RootHiddenDateInput(props: RootHiddenDateInputProps): JSX.Element {
     if (!targetString) return;
     try {
       const g = granularity();
-      const targetValue = (g === "day" ? parseDate(targetString) : parseDateTime(targetString)) as
-        unknown as Record<string, number>;
+      const targetValue = (g === "day"
+        ? parseDate(targetString)
+        : parseDateTime(targetString)) as unknown as Record<string, number>;
       let timeSegments = HIDDEN_TIME_SEGMENTS;
       if (HIDDEN_TIME_SEGMENTS.includes(g)) {
         timeSegments = HIDDEN_TIME_SEGMENTS.slice(0, HIDDEN_GRANULARITY_MAP[g]);

package/src/DatePicker.tsx

@@ -601,10 +601,10 @@ function DatePickerInner<T extends DateValue = CalendarDate>(
         >
           <CalendarContext.Provider value={calendarState as unknown as CalendarState<DateValue>}>
             {/* BARE ROLELESS root — mirrors RAC `DatePicker`'s outer `<div>`. The
-              * presentation FieldGroup shell (rendered as a child via
-              * `DatePickerFieldGroup`) is what carries `pickerAria.groupProps`
-              * (role="presentation" + label/describedby + arrow-nav/press). A
-              * described node here would be a spurious AX entry the S2 oracle lacks. */}
+             * presentation FieldGroup shell (rendered as a child via
+             * `DatePickerFieldGroup`) is what carries `pickerAria.groupProps`
+             * (role="presentation" + label/describedby + arrow-nav/press). A
+             * described node here would be a spurious AX entry the S2 oracle lacks. */}
             <div
               ref={setFieldRef}
               class={renderProps.class()}
@@ -960,12 +960,12 @@ function DateRangePickerInner<T extends DateValue = CalendarDate>(
           value={calendarState as unknown as RangeCalendarState<DateValue>}
         >
           {/* BARE ROLELESS root — mirrors RAC `DateRangePicker`'s outer `<div>`.
-            * The presentation FieldGroup shell (rendered as a child via the styled
-            * DateRangeDisplay) is what carries `pickerAria.groupProps` (role=
-            * "presentation" + label/describedby + outer arrow-nav/press). A described
-            * or role="group" node here would be a spurious AX entry the S2 oracle
-            * lacks. The ref scopes the shared segment focus manager across both
-            * fields (see createDateRangePicker). */}
+           * The presentation FieldGroup shell (rendered as a child via the styled
+           * DateRangeDisplay) is what carries `pickerAria.groupProps` (role=
+           * "presentation" + label/describedby + outer arrow-nav/press). A described
+           * or role="group" node here would be a spurious AX entry the S2 oracle
+           * lacks. The ref scopes the shared segment focus manager across both
+           * fields (see createDateRangePicker). */}
           <div
             ref={setFieldRef}
             class={renderProps.class()}
@@ -1409,14 +1409,14 @@ export function DatePickerContent(props: DatePickerContentProps): JSX.Element {
       <Portal mount={portalContainer()}>
         <FocusScope contain restoreFocus>
           {/* Un-folded to mirror S2's `<Popover>` DOM. The OUTER role-null `<div>`
-            * is the positioned surface that carries the enter motion + chrome —
-            * this is the element RAC/S2 animate (`AriaPopover`'s div: role null, no
-            * tabindex, accessible name computed from the calendar's textContent).
-            * A nested `role="dialog"` element (RAC's `Dialog`, which S2's
-            * CalendarPopover wraps the Calendar in) carries the dialog semantics.
-            * Folding both onto one `<section role="dialog">` made D2 animate the
-            * dialog node instead of the role-null div; the role-null wrapper is
-            * pruned from the AX tree so D5/D6 are unaffected. */}
+           * is the positioned surface that carries the enter motion + chrome —
+           * this is the element RAC/S2 animate (`AriaPopover`'s div: role null, no
+           * tabindex, accessible name computed from the calendar's textContent).
+           * A nested `role="dialog"` element (RAC's `Dialog`, which S2's
+           * CalendarPopover wraps the Calendar in) carries the dialog semantics.
+           * Folding both onto one `<section role="dialog">` made D2 animate the
+           * dialog node instead of the role-null div; the role-null wrapper is
+           * pruned from the AX tree so D5/D6 are unaffected. */}
           <div
             ref={setContentRef}
             {...cleanPopoverProps()}
@@ -1426,8 +1426,8 @@ export function DatePickerContent(props: DatePickerContentProps): JSX.Element {
             data-entering={dataAttr(isEntering())}
           >
             {/* RAC's `Dialog` renders a `<section role="dialog">` by default — the
-              * D5 roving trail records this element's tag, so it must be `section`
-              * (a `<div>` here regressed the focus-trail tag match). */}
+             * D5 roving trail records this element's tag, so it must be `section`
+             * (a `<div>` here regressed the focus-trail tag match). */}
             <section {...context.pickerAria.dialogProps} tabIndex={-1}>
               {props.children}
             </section>
@@ -1514,11 +1514,11 @@ export function DateRangePickerContent(props: DateRangePickerContentProps): JSX.
       <Portal mount={portalContainer()}>
         <FocusScope contain restoreFocus>
           {/* Un-folded to mirror S2's `<Popover>` DOM (see DatePickerContent).
-            * OUTER role-null `<div>` = positioned surface carrying the enter
-            * motion + chrome (the element RAC/S2 animate; pruned from the AX
-            * tree). Nested `<section role="dialog">` carries the dialog
-            * semantics — the D5 roving trail records this tag, so it must be
-            * `section`, not a folded `div`. */}
+           * OUTER role-null `<div>` = positioned surface carrying the enter
+           * motion + chrome (the element RAC/S2 animate; pruned from the AX
+           * tree). Nested `<section role="dialog">` carries the dialog
+           * semantics — the D5 roving trail records this tag, so it must be
+           * `section`, not a folded `div`. */}
           <div
             ref={setContentRef}
             {...cleanPopoverProps()}

package/src/Form.tsx

@@ -121,6 +121,23 @@ export function Form(props: FormProps): JSX.Element {
 
   const filteredDomProps = filterFormDOMProps(domProps);
 
+  // FormContext is only consumed for `validationBehavior` (TextField, Checkbox,
+  // DateField, …). Never spread `props` into the context value: in Solid,
+  // `props.children` is a getter that *creates* the child tree when read. Eager
+  // `{...props}` therefore builds every child once for the discarded context
+  // object and again for `renderChildren()`, double-advancing createUniqueId
+  // and desyncing SSR hydration keys. RAC can spread props because React
+  // elements are already-built descriptors; Solid cannot.
+  //
+  // Surface symptom (effect-latam /perfil, /foros): Form+sole Spectrum Button
+  // → "Hydration Mismatch" / "template is not a function" and a blank route.
+  // Form+TextField (multiple children) often still hydrates because array/
+  // fragment child paths mask the slot drift — the double-create is still
+  // wrong either way.
+  const formContextValue: FormProps = {
+    validationBehavior,
+  };
+
   return (
     <form
       {...filteredDomProps}
@@ -130,7 +147,7 @@ export function Form(props: FormProps): JSX.Element {
       style={renderProps.style()}
       slot={local.slot}
     >
-      <FormContext.Provider value={{ ...props, validationBehavior }}>
+      <FormContext.Provider value={formContextValue}>
         <FormValidationContext.Provider value={errors}>
           {renderProps.renderChildren()}
         </FormValidationContext.Provider>

package/src/ListBox.tsx

@@ -596,8 +596,7 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
   const dropIndicatorTargetsEqual = (
     a: DropTarget | null | undefined,
     b: ItemDropTarget,
-  ): boolean =>
-    !!a && a.type === "item" && a.key === b.key && a.dropPosition === b.dropPosition;
+  ): boolean => !!a && a.type === "item" && a.key === b.key && a.dropPosition === b.dropPosition;
   // Faithful port of useDropIndicator's label logic: "Drop on X" for an on-item
   // target, else "Insert between X and Y" / "Insert before X" / "Insert after X"
   // resolved from the target's neighbours in the collection.
@@ -860,132 +859,132 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
     >
       <ListBoxStateContext.Provider value={state}>
         <CollectionRendererContext.Provider value={collectionRenderer()}>
-         <DropIndicatorContext.Provider value={dropIndicatorContextValue}>
-          <>
-            <Show when={ariaProps.label}>
-              <span {...cleanLabelProps()}>{ariaProps.label as JSX.Element}</span>
-            </Show>
-            <div
-              {...mergeProps(
-                domProps(),
-                cleanListBoxProps(),
-                cleanFocusProps(),
-                (droppableCollection()?.collectionProps as Record<string, unknown> | undefined) ??
-                  {},
-              )}
-              ref={(el) => {
-                setListRef(el);
-                assignRef(local.ref, el);
-                autocompleteCtx?.collectionRef(el);
-              }}
-              class={renderProps.class()}
-              style={renderProps.style()}
-              data-focused={state.isFocused() || undefined}
-              data-focus-visible={isFocusVisible() || undefined}
-              data-disabled={resolveDisabled() || undefined}
-              data-empty={isEmpty() || undefined}
-              data-layout={stateProps.layout}
-              data-orientation={stateProps.orientation}
-              data-drop-target={isRootDropTarget() || undefined}
-              slot={local.slot}
-            >
-              <SharedElementTransition>
-                {isEmpty() && local.renderEmptyState ? (
-                  <div role="option" style={{ display: "contents" }} data-empty-state>
-                    {local.renderEmptyState()}
-                  </div>
-                ) : hasSections() ? (
-                  <For each={sectionedRenderEntries()}>
-                    {(entry) =>
-                      entry.type === "section" ? (
-                        <div role="presentation" data-section-wrapper>
-                          <Section class="solidaria-ListBox-section">
-                            {entry.section.title != null && (
-                              <Header class="solidaria-ListBox-sectionHeader">
-                                {entry.section.title}
-                              </Header>
-                            )}
-                            <Group class="solidaria-ListBox-sectionGroup">
-                              <div role="group" aria-label={entry.section["aria-label"]}>
-                                <For each={entry.items}>
-                                  {(indexedItem) => (
-                                    <>
-                                      {collectionRenderer().renderDropIndicator?.(
-                                        indexedItem.index,
-                                        "before",
-                                      )}
-                                      {collectionRenderer().renderDropIndicator?.(
-                                        indexedItem.index,
-                                        "on",
-                                      )}
-                                      {local.children(indexedItem.item)}
-                                      {collectionRenderer().renderDropIndicator?.(
-                                        indexedItem.index,
-                                        "after",
-                                      )}
-                                    </>
-                                  )}
-                                </For>
-                              </div>
-                            </Group>
-                          </Section>
-                        </div>
-                      ) : (
-                        <>
-                          {collectionRenderer().renderDropIndicator?.(entry.item.index, "before")}
-                          {collectionRenderer().renderDropIndicator?.(entry.item.index, "on")}
-                          {local.children(entry.item.item)}
-                          {collectionRenderer().renderDropIndicator?.(entry.item.index, "after")}
-                        </>
-                      )
-                    }
-                  </For>
-                ) : (
-                  <>
-                    {virtualRange()?.offsetTop ? (
-                      <div
-                        role="presentation"
-                        aria-hidden="true"
-                        style={virtualSpacerStyle(virtualRange()!.offsetTop)}
-                        data-virtualizer-spacer="top"
-                      />
-                    ) : null}
-                    <For each={visibleItems()}>
-                      {(item, index) => {
-                        const itemIndex = () => (virtualRange()?.start ?? 0) + index();
-                        const beforeIndicator = () =>
-                          collectionRenderer().renderDropIndicator?.(itemIndex(), "before");
-                        const onIndicator = () =>
-                          collectionRenderer().renderDropIndicator?.(itemIndex(), "on");
-                        const afterIndicator = () =>
-                          collectionRenderer().renderDropIndicator?.(itemIndex(), "after");
-                        return (
+          <DropIndicatorContext.Provider value={dropIndicatorContextValue}>
+            <>
+              <Show when={ariaProps.label}>
+                <span {...cleanLabelProps()}>{ariaProps.label as JSX.Element}</span>
+              </Show>
+              <div
+                {...mergeProps(
+                  domProps(),
+                  cleanListBoxProps(),
+                  cleanFocusProps(),
+                  (droppableCollection()?.collectionProps as Record<string, unknown> | undefined) ??
+                    {},
+                )}
+                ref={(el) => {
+                  setListRef(el);
+                  assignRef(local.ref, el);
+                  autocompleteCtx?.collectionRef(el);
+                }}
+                class={renderProps.class()}
+                style={renderProps.style()}
+                data-focused={state.isFocused() || undefined}
+                data-focus-visible={isFocusVisible() || undefined}
+                data-disabled={resolveDisabled() || undefined}
+                data-empty={isEmpty() || undefined}
+                data-layout={stateProps.layout}
+                data-orientation={stateProps.orientation}
+                data-drop-target={isRootDropTarget() || undefined}
+                slot={local.slot}
+              >
+                <SharedElementTransition>
+                  {isEmpty() && local.renderEmptyState ? (
+                    <div role="option" style={{ display: "contents" }} data-empty-state>
+                      {local.renderEmptyState()}
+                    </div>
+                  ) : hasSections() ? (
+                    <For each={sectionedRenderEntries()}>
+                      {(entry) =>
+                        entry.type === "section" ? (
+                          <div role="presentation" data-section-wrapper>
+                            <Section class="solidaria-ListBox-section">
+                              {entry.section.title != null && (
+                                <Header class="solidaria-ListBox-sectionHeader">
+                                  {entry.section.title}
+                                </Header>
+                              )}
+                              <Group class="solidaria-ListBox-sectionGroup">
+                                <div role="group" aria-label={entry.section["aria-label"]}>
+                                  <For each={entry.items}>
+                                    {(indexedItem) => (
+                                      <>
+                                        {collectionRenderer().renderDropIndicator?.(
+                                          indexedItem.index,
+                                          "before",
+                                        )}
+                                        {collectionRenderer().renderDropIndicator?.(
+                                          indexedItem.index,
+                                          "on",
+                                        )}
+                                        {local.children(indexedItem.item)}
+                                        {collectionRenderer().renderDropIndicator?.(
+                                          indexedItem.index,
+                                          "after",
+                                        )}
+                                      </>
+                                    )}
+                                  </For>
+                                </div>
+                              </Group>
+                            </Section>
+                          </div>
+                        ) : (
                           <>
-                            {beforeIndicator()}
-                            {onIndicator()}
-                            {local.children(item as T)}
-                            {afterIndicator()}
+                            {collectionRenderer().renderDropIndicator?.(entry.item.index, "before")}
+                            {collectionRenderer().renderDropIndicator?.(entry.item.index, "on")}
+                            {local.children(entry.item.item)}
+                            {collectionRenderer().renderDropIndicator?.(entry.item.index, "after")}
                           </>
-                        );
-                      }}
+                        )
+                      }
                     </For>
-                    {virtualRange()?.offsetBottom ? (
-                      <div
-                        role="presentation"
-                        aria-hidden="true"
-                        style={virtualSpacerStyle(virtualRange()!.offsetBottom)}
-                        data-virtualizer-spacer="bottom"
-                      />
-                    ) : null}
-                  </>
+                  ) : (
+                    <>
+                      {virtualRange()?.offsetTop ? (
+                        <div
+                          role="presentation"
+                          aria-hidden="true"
+                          style={virtualSpacerStyle(virtualRange()!.offsetTop)}
+                          data-virtualizer-spacer="top"
+                        />
+                      ) : null}
+                      <For each={visibleItems()}>
+                        {(item, index) => {
+                          const itemIndex = () => (virtualRange()?.start ?? 0) + index();
+                          const beforeIndicator = () =>
+                            collectionRenderer().renderDropIndicator?.(itemIndex(), "before");
+                          const onIndicator = () =>
+                            collectionRenderer().renderDropIndicator?.(itemIndex(), "on");
+                          const afterIndicator = () =>
+                            collectionRenderer().renderDropIndicator?.(itemIndex(), "after");
+                          return (
+                            <>
+                              {beforeIndicator()}
+                              {onIndicator()}
+                              {local.children(item as T)}
+                              {afterIndicator()}
+                            </>
+                          );
+                        }}
+                      </For>
+                      {virtualRange()?.offsetBottom ? (
+                        <div
+                          role="presentation"
+                          aria-hidden="true"
+                          style={virtualSpacerStyle(virtualRange()!.offsetBottom)}
+                          data-virtualizer-spacer="bottom"
+                        />
+                      ) : null}
+                    </>
+                  )}
+                </SharedElementTransition>
+                {local.hasMore && local.onLoadMore && (
+                  <ListBoxLoadMoreItem onLoadMore={local.onLoadMore} isLoading={local.isLoading} />
                 )}
-              </SharedElementTransition>
-              {local.hasMore && local.onLoadMore && (
-                <ListBoxLoadMoreItem onLoadMore={local.onLoadMore} isLoading={local.isLoading} />
-              )}
-            </div>
-          </>
-         </DropIndicatorContext.Provider>
+              </div>
+            </>
+          </DropIndicatorContext.Provider>
         </CollectionRendererContext.Provider>
       </ListBoxStateContext.Provider>
     </ListBoxContext.Provider>

package/src/SearchField.tsx

@@ -272,9 +272,7 @@ export function SearchField(props: SearchFieldProps): JSX.Element {
     : undefined;
 
   const mergedProps = withFormValidationBehavior(
-    autocompleteProps
-      ? (mergeProps(baseProps, autocompleteProps) as SearchFieldProps)
-      : baseProps,
+    autocompleteProps ? (mergeProps(baseProps, autocompleteProps) as SearchFieldProps) : baseProps,
     formContext,
   );
 

package/src/SharedElementTransition.tsx

@@ -202,82 +202,79 @@ export function SharedElement(props: SharedElementProps): JSX.Element | null {
   // fresh-enter branch: with no committed div there is nothing to measure, so we
   // wait — exactly as React never runs the body before commit.
   createEffect(
-    on(
-      [() => local.isVisible !== false, element] as const,
-      ([isVisible, el]) => {
-        const name = local.name;
+    on([() => local.isVisible !== false, element] as const, ([isVisible, el]) => {
+      const name = local.name;
 
-        if (frame != null) {
-          cancelAnimationFrame(frame);
-          frame = undefined;
-        }
+      if (frame != null) {
+        cancelAnimationFrame(frame);
+        frame = undefined;
+      }
 
-        if (isVisible && el) {
-          const prevSnapshot = scope.snapshots[name];
+      if (isVisible && el) {
+        const prevSnapshot = scope.snapshots[name];
 
-          if (prevSnapshot) {
-            // FLIP: Element is transitioning from a previous instance.
-            setLifecycle("visible");
-            const animations = getAnimations(el);
-
-            // Set properties to animate from.
-            const values = prevSnapshot.style.map(([property, prevValue]) => {
-              const value = el.style.getPropertyValue(property);
-              if (property === "translate") {
-                const prevRect = prevSnapshot.rect;
-                const currentRect = el.getBoundingClientRect();
-                const deltaX = prevRect.left - currentRect.left;
-                const deltaY = prevRect.top - currentRect.top;
-                el.style.setProperty("translate", `${deltaX}px ${deltaY}px`);
-              } else {
-                el.style.setProperty(property, prevValue);
-              }
-              return [property, value] as [string, string];
-            });
-
-            // Cancel any new animations triggered by these properties.
-            for (const a of getAnimations(el)) {
-              if (!animations.includes(a)) {
-                a.cancel();
-              }
+        if (prevSnapshot) {
+          // FLIP: Element is transitioning from a previous instance.
+          setLifecycle("visible");
+          const animations = getAnimations(el);
+
+          // Set properties to animate from.
+          const values = prevSnapshot.style.map(([property, prevValue]) => {
+            const value = el.style.getPropertyValue(property);
+            if (property === "translate") {
+              const prevRect = prevSnapshot.rect;
+              const currentRect = el.getBoundingClientRect();
+              const deltaX = prevRect.left - currentRect.left;
+              const deltaY = prevRect.top - currentRect.top;
+              el.style.setProperty("translate", `${deltaX}px ${deltaY}px`);
+            } else {
+              el.style.setProperty(property, prevValue);
             }
+            return [property, value] as [string, string];
+          });
 
-            // Remove overrides after one frame to animate to the current values.
-            frame = requestAnimationFrame(() => {
-              frame = undefined;
-              for (const [property, value] of values) {
-                el.style.setProperty(property, value);
-              }
-            });
-
-            delete scope.snapshots[name];
-          } else {
-            // No previous instance exists, apply the entering state.
-            queueMicrotask(() => setLifecycle("entering"));
-            frame = requestAnimationFrame(() => {
-              frame = undefined;
-              setLifecycle("visible");
-            });
+          // Cancel any new animations triggered by these properties.
+          for (const a of getAnimations(el)) {
+            if (!animations.includes(a)) {
+              a.cancel();
+            }
           }
-        } else if (!isVisible && el) {
-          // Wait a microtask to check if a snapshot still exists (meaning no new
-          // SharedElement consumed it), then enter exiting state.
-          queueMicrotask(() => {
-            if (scope.snapshots[name]) {
-              delete scope.snapshots[name];
-              setLifecycle("exiting");
-              // Wait for animations to finish before hiding.
-              Promise.all(getAnimations(el).map((a) => a.finished))
-                .then(() => setLifecycle("hidden"))
-                .catch(() => {});
-            } else {
-              // Snapshot was consumed by another instance, unmount immediately.
-              setLifecycle("hidden");
+
+          // Remove overrides after one frame to animate to the current values.
+          frame = requestAnimationFrame(() => {
+            frame = undefined;
+            for (const [property, value] of values) {
+              el.style.setProperty(property, value);
             }
           });
+
+          delete scope.snapshots[name];
+        } else {
+          // No previous instance exists, apply the entering state.
+          queueMicrotask(() => setLifecycle("entering"));
+          frame = requestAnimationFrame(() => {
+            frame = undefined;
+            setLifecycle("visible");
+          });
         }
-      },
-    ),
+      } else if (!isVisible && el) {
+        // Wait a microtask to check if a snapshot still exists (meaning no new
+        // SharedElement consumed it), then enter exiting state.
+        queueMicrotask(() => {
+          if (scope.snapshots[name]) {
+            delete scope.snapshots[name];
+            setLifecycle("exiting");
+            // Wait for animations to finish before hiding.
+            Promise.all(getAnimations(el).map((a) => a.finished))
+              .then(() => setLifecycle("hidden"))
+              .catch(() => {});
+          } else {
+            // Snapshot was consumed by another instance, unmount immediately.
+            setLifecycle("hidden");
+          }
+        });
+      }
+    }),
   );
 
   // Cancel any pending FLIP frame on disposal. The snapshot store lives in the

package/src/TimeField.tsx

@@ -32,11 +32,7 @@ import {
   type TimeSegment as TimeSegmentType,
   type TimeValue,
 } from "@proyecto-viviana/solid-stately";
-import {
-  DateFieldContext,
-  DateFieldStateContext,
-  type DateFieldContextValue,
-} from "./DateField";
+import { DateFieldContext, DateFieldStateContext, type DateFieldContextValue } from "./DateField";
 import {
   type ClassNameOrFunction,
   type StyleOrFunction,
@@ -220,8 +216,7 @@ function TimeFieldInner<T extends TimeValue = TimeValue>(
   // Ref to the hidden validation <input> (the DateInput's `<Input>` sibling).
   // Mirrors DateField: create it here, hand it to createTimeField below, and
   // attach it to the same input through the DateFieldContext getter.
-  const [validationInputRef, setValidationInputRef] =
-    createSignal<HTMLInputElement | null>(null);
+  const [validationInputRef, setValidationInputRef] = createSignal<HTMLInputElement | null>(null);
 
   const state = createTimeFieldState(stateProps);
 
@@ -307,9 +302,7 @@ function TimeFieldInner<T extends TimeValue = TimeValue>(
 
   return (
     <TimeFieldStateContext.Provider value={state as unknown as TimeFieldState<TimeValue>}>
-      <DateFieldStateContext.Provider
-        value={state as unknown as DateFieldContextValue["state"]}
-      >
+      <DateFieldStateContext.Provider value={state as unknown as DateFieldContextValue["state"]}>
         <DateFieldContext.Provider value={dateFieldContextValue}>
           <TimeFieldContext.Provider
             value={{