@lumiose/ui 0.1.0 → 0.1.2

package/README.md

@@ -5,8 +5,8 @@ elements first (`<dialog>`, popover, invoker commands, CSS anchor positioning),
 elements (`lu-*`) only where the platform falls short, server-rendered without hydration. Parts
 follow [Base UI](https://base-ui.com)'s anatomy; the approach is [Timeless](https://timeless.build)'s.
 
-**In development**: not on npm yet. It keeps its own 0.x versions, apart from the version the other
-Lumiose packages share.
+**In development**, on npm: `pnpm add @lumiose/ui` in a Lumiose app (`lumiose` is its peer
+dependency). It keeps its own 0.x versions, apart from the version the other Lumiose packages share.
 
 ```tsx
 import { Dialog } from "@lumiose/ui";

package/dist/accordion/accordion.tsx

@@ -17,6 +17,7 @@ import {
 } from "lumiose";
 import defineAccordion from "./accordion.script.ts?client";
 import type { LuAccordion } from "./accordion.script.ts";
+import { batched } from "../batched.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -223,13 +224,13 @@ function Item({
         }}
         name={accordion.multiple ? undefined : accordion.id}
         open={shown}
-        on:toggle={(event: ToggleEvent) => {
+        on:toggle={batched((event: ToggleEvent) => {
           const now = event.newState === "open";
           accordion.onToggle(key, now);
           if (now === shown) return;
           shown = now;
           onOpenChange?.(now);
-        }}
+        })}
       >
         {children}
       </details>

package/dist/autocomplete/autocomplete.tsx

@@ -24,6 +24,7 @@ import comboboxScript from "../combobox/combobox.script.ts?client";
 import { ComboboxContext, type ComboboxContextValue } from "../combobox/context.ts";
 import { controlId, useField, useFormValues } from "../field/context.ts";
 import { onFormReset } from "../form/reset.ts";
+import { batched } from "../batched.ts";
 
 /**
  * How the suggestions complete the text, as in Base UI: `"list"` filters them by the text,
@@ -193,13 +194,13 @@ function Root({
         submit-on-item-click={submitOnItemClick}
         limit={limit}
         disabled={context.disabled()}
-        on:input={(event: Event) => {
+        on:input={batched((event: Event) => {
           const input = host()?.input;
           if (input && event.target === input) onValueChange?.(input.value);
-        }}
-        on:openchange={(event: CustomEvent<ComboboxOpenChangeDetail>) =>
-          onOpenChange?.(event.detail.open)
-        }
+        })}
+        on:openchange={batched((event: CustomEvent<ComboboxOpenChangeDetail>) =>
+          onOpenChange?.(event.detail.open),
+        )}
       >
         {children}
       </lu-combobox>

package/dist/avatar/avatar.tsx

@@ -12,6 +12,7 @@ import type {
   AvatarLoadingStatus,
   AvatarLoadingStatusChangeDetail,
 } from "./avatar.script.ts";
+import { batched } from "../batched.ts";
 
 export type { AvatarLoadingStatus } from "./avatar.script.ts";
 
@@ -75,9 +76,9 @@ function Image({ onLoadingStatusChange, ...rest }: AvatarImageProps) {
       {...rest}
       ref={image}
       data-loading
-      on:loadingstatuschange={(event: CustomEvent<AvatarLoadingStatusChangeDetail>) =>
-        report(event.detail.status)
-      }
+      on:loadingstatuschange={batched((event: CustomEvent<AvatarLoadingStatusChangeDetail>) =>
+        report(event.detail.status),
+      )}
     />
   );
 }

package/dist/batched.ts

@@ -0,0 +1,11 @@
+// The components' native listeners (`on:`) run inside `batch()`, as Lumiose's delegated event
+// handlers do (TASK-540): the signal writes of a listener and of the callbacks it calls
+// (`onValueChange`, `onOpenChange`, …) render together, before the event's dispatch returns, so
+// the DOM is current right after it instead of a microtask later.
+import { batch } from "lumiose";
+
+/** `listener`, run inside `batch()`. */
+export const batched =
+  <E>(listener: (event: E) => void) =>
+  (event: E): void =>
+    batch(() => listener(event));

package/dist/checkbox/checkbox.tsx

@@ -9,6 +9,7 @@ import { fieldProps, useField, useFormValues } from "../field/context.ts";
 import checkboxScript from "./checkbox.script.ts?client";
 import { CheckboxGroupContext, optionId, type CheckboxGroupContextValue } from "./context.ts";
 import { afterFormReset, onFormReset } from "../form/reset.ts";
+import { batched } from "../batched.ts";
 
 /**
  * The native checkbox props Root passes through (`name`, `required`, `disabled`, `form`, `id`,
@@ -137,9 +138,9 @@ function Root({
       data-parent={parent ? "" : undefined}
       aria-readonly={readOnly ? "true" : undefined}
       data-unchecked-value={uncheckedValue}
-      on:change={(event: Event) =>
-        onCheckedChange?.((event.currentTarget as HTMLInputElement).checked)
-      }
+      on:change={batched((event: Event) =>
+        onCheckedChange?.((event.currentTarget as HTMLInputElement).checked),
+      )}
     />
   );
 }

package/dist/checkbox-group/checkbox-group.tsx

@@ -7,6 +7,7 @@ import checkboxScript from "../checkbox/checkbox.script.ts?client";
 import { CheckboxGroupContext } from "../checkbox/context.ts";
 import { describedBy, labelledBy, useField, useFormValues } from "../field/context.ts";
 import { onFormReset } from "../form/reset.ts";
+import { batched } from "../batched.ts";
 
 /** The fieldset props CheckboxGroup passes through, without the brand of intrinsic elements' props. */
 type FieldsetProps = Omit<JSX.IntrinsicElements["fieldset"], symbol>;
@@ -98,11 +99,11 @@ export function CheckboxGroup({
         }
         aria-describedby={rest["aria-describedby"] ?? (field ? describedBy(field) : undefined)}
         aria-invalid={rest["aria-invalid"] ?? (field?.invalid() ? "true" : undefined)}
-        on:change={(event: Event) => {
+        on:change={batched((event: Event) => {
           if (!(event.target as Element).matches("input[type=checkbox]")) return;
           // checkbox.script.ts ran first, for a parent's toggle.
           report(checked(event.currentTarget as HTMLFieldSetElement));
-        }}
+        })}
       >
         {children}
       </fieldset>

package/dist/collapsible/collapsible.tsx

@@ -6,6 +6,7 @@
 // trigger. Ported from Timeless's approach (https://timeless.build).
 import { createContext, effect, ref, untrack, useContext, useId } from "lumiose";
 import collapsibleScript from "./collapsible.script.ts?client";
+import { batched } from "../batched.ts";
 
 /**
  * The `<details>` props Root passes on (`class`, `style`, `name`, `data-*`, `aria-*`, events),
@@ -96,12 +97,12 @@ function Root({
           forwarded?.(element);
         }}
         open={shown}
-        on:toggle={(event: ToggleEvent) => {
+        on:toggle={batched((event: ToggleEvent) => {
           const now = event.newState === "open";
           if (now === shown) return;
           shown = now;
           onOpenChange?.(now);
-        }}
+        })}
       >
         {children}
       </details>

package/dist/combobox/combobox.tsx

@@ -27,6 +27,7 @@ import { controlId, describedBy, labelledBy, useField, useFormValues } from "../
 import { onFormReset } from "../form/reset.ts";
 import { anchorName, placement, withStyle, type PlacementProps } from "../placement/placement.ts";
 import { ComboboxContext, register, useCombobox, type ComboboxContextValue } from "./context.ts";
+import { batched } from "../batched.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -266,14 +267,14 @@ function Root<Multiple extends boolean | undefined = false>({
         disabled={context.disabled()}
         multiple={multiple}
         filter={filter}
-        on:change={() => {
+        on:change={batched(() => {
           const next = host()!.value;
           selected.set(list(next));
           onValueChange?.(next as ComboboxValue<Multiple>);
-        }}
-        on:openchange={(event: CustomEvent<ComboboxOpenChangeDetail>) =>
-          onOpenChange?.(event.detail.open)
-        }
+        })}
+        on:openchange={batched((event: CustomEvent<ComboboxOpenChangeDetail>) =>
+          onOpenChange?.(event.detail.open),
+        )}
       >
         {children}
       </lu-combobox>

package/dist/context-menu/context-menu.tsx

@@ -19,6 +19,7 @@ import type { MenuElement, MenuOpenChangeDetail } from "../menu/menu.script.ts";
 import { anchorName } from "../placement/placement.ts";
 import contextMenuScript from "./context-menu.script.ts?client";
 import type { ContextMenuElement } from "./context-menu.script.ts";
+import { batched } from "../batched.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -126,9 +127,9 @@ function Popup(props: ContextMenuPopupProps) {
   return (
     <lu-menu
       ref={context.host}
-      on:openchange={(event: CustomEvent<MenuOpenChangeDetail>) =>
-        context.onOpenChange(event.detail.open)
-      }
+      on:openchange={batched((event: CustomEvent<MenuOpenChangeDetail>) =>
+        context.onOpenChange(event.detail.open),
+      )}
     >
       {/* The point the popup is anchored to: the script moves it to the pointer. */}
       <span

package/dist/dialog/dialog.tsx

@@ -16,6 +16,7 @@ import {
   type Signal,
 } from "lumiose";
 import dialogScript from "./dialog.script.ts?client";
+import { batched } from "../batched.ts";
 
 /**
  * `Dialog.Root` renders no element: it holds the dialog's state and the ids its parts share.
@@ -148,7 +149,7 @@ function Popup({ children, ref: forwarded, ...rest }: DialogPopupProps) {
         forwarded?.(element);
       }}
       id={dialog.popupId}
-      on:toggle={(event: ToggleEvent) => dialog.onToggle(event.newState === "open")}
+      on:toggle={batched((event: ToggleEvent) => dialog.onToggle(event.newState === "open"))}
     >
       {isServer ? content : children}
     </dialog>

package/dist/field/field.tsx

@@ -31,6 +31,7 @@ import {
 import fieldScript from "./field.script.ts?client";
 import { listenToForm, reportValidity } from "../form/native.ts";
 import { Input, type InputProps } from "../input/input.tsx";
+import { batched } from "../batched.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -288,7 +289,7 @@ function Root({
    * (cleared while it waits): its check runs now, and a synchronous one that fails stops the
    * submission, which the form then reports. An async check still waits for the server.
    */
-  const onSubmit = (event: Event) => {
+  const onSubmit = batched((event: Event) => {
     if (!due) return;
     clearTimeout(timer);
     due();
@@ -297,7 +298,7 @@ function Root({
     event.preventDefault();
     event.stopImmediatePropagation();
     reportValidity(event.currentTarget as HTMLFormElement);
-  };
+  });
   effect(() => {
     if (!validate) return;
     const element = document.getElementById(controlId(field));
@@ -314,13 +315,13 @@ function Root({
     }
   });
   // A submit attempt checks every control (`invalid` does not bubble); a reset clears the checks.
-  const onInvalid = (event: Event) => snapshot(event.target);
-  const onReset = () => {
+  const onInvalid = batched((event: Event) => snapshot(event.target));
+  const onReset = batched(() => {
     checked.set(undefined);
     checking = undefined;
     // The controls take their default values after the event.
     setTimeout(() => run(document.getElementById(controlId(field)), 0, true));
-  };
+  });
   onMount(() => {
     const element = host();
     if (!element) return;
@@ -349,15 +350,15 @@ function Root({
         }}
         id={id}
         validation-mode={validationMode ?? form?.validationMode()}
-        on:input={(event: Event) => {
+        on:input={batched((event: Event) => {
           run(event.target, validationDebounceTime);
           snapshot(event.target);
-        }}
-        on:change={(event: Event) => {
+        })}
+        on:change={batched((event: Event) => {
           run(event.target);
           snapshot(event.target);
-        }}
-        on:focusout={(event: Event) => snapshot(event.target)}
+        })}
+        on:focusout={batched((event: Event) => snapshot(event.target))}
       >
         {children}
       </lu-field>

package/dist/form/reset.ts

@@ -4,7 +4,7 @@
 // value when its form resets and again a task later, once the controls (and the elements'
 // scripts, which follow the reset the same way) hold their defaults, and reports the new value
 // when it differs.
-import { onCleanup, onMount } from "lumiose";
+import { batch, onCleanup, onMount } from "lumiose";
 import { listenToForm } from "./native.ts";
 
 const same = (a: unknown, b: unknown) =>
@@ -20,10 +20,12 @@ function listen(element: () => Element | undefined, atReset: () => () => void):
       (host as { form?: HTMLFormElement | null } | undefined)?.form ?? host?.closest("form");
     if (!form) return;
     let timer: ReturnType<typeof setTimeout> | undefined;
+    // In `batch()`, as the components' listeners (../batched.ts): the callbacks' writes render
+    // together.
     const listener = () => {
       const later = atReset();
       clearTimeout(timer);
-      timer = setTimeout(later);
+      timer = setTimeout(() => batch(later));
     };
     const stop = listenToForm(form, "reset", listener);
     onCleanup(() => {

package/dist/input/input.tsx

@@ -4,6 +4,7 @@
 import { ref, untrack } from "lumiose";
 import { fieldProps, useField, useFormValues } from "../field/context.ts";
 import { onFormReset } from "../form/reset.ts";
+import { batched } from "../batched.ts";
 
 /**
  * An element's props without the brand of intrinsic elements' props, so that the component's
@@ -61,7 +62,9 @@ export function Input({ value, defaultValue, onValueChange, ...rest }: InputProp
         rest.ref?.(element);
       }}
       value={value !== undefined ? value : untrack(() => sent?.[0] ?? defaultValue)}
-      on:input={(event: Event) => onValueChange?.((event.currentTarget as HTMLInputElement).value)}
+      on:input={batched((event: Event) =>
+        onValueChange?.((event.currentTarget as HTMLInputElement).value),
+      )}
     />
   );
 }

package/dist/menu/menu.tsx

@@ -21,6 +21,7 @@ import type { MenuCheckedChangeDetail, MenuElement, MenuOpenChangeDetail } from
 import menuScript from "./menu.script.ts?client";
 import { anchorName, placement, withStyle, type Align, type Side } from "../placement/placement.ts";
 import { OUTSIDE_TOOLBAR, ToolbarContext } from "../toolbar/context.ts";
+import { batched } from "../batched.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -244,9 +245,9 @@ function menuRoot(props: MenuRootProps, submenu: boolean) {
       <lu-menu
         ref={host}
         role={context.menubar ? "none" : undefined}
-        on:openchange={(event: CustomEvent<MenuOpenChangeDetail>) =>
-          props.onOpenChange?.(event.detail.open)
-        }
+        on:openchange={batched((event: CustomEvent<MenuOpenChangeDetail>) =>
+          props.onOpenChange?.(event.detail.open),
+        )}
       >
         {props.children}
       </lu-menu>
@@ -377,9 +378,9 @@ function CheckboxItem({
       {...rest}
       role="menuitemcheckbox"
       aria-checked={checked ?? defaultChecked ?? false}
-      on:checkedchange={(event: CustomEvent<MenuCheckedChangeDetail>) =>
-        onCheckedChange?.(event.detail.checked)
-      }
+      on:checkedchange={batched((event: CustomEvent<MenuCheckedChangeDetail>) =>
+        onCheckedChange?.(event.detail.checked),
+      )}
     >
       {children}
     </button>
@@ -442,12 +443,12 @@ function RadioGroup({
         <GroupElement
           {...rest}
           group={group}
-          on:checkedchange={(event: CustomEvent<MenuCheckedChangeDetail>) => {
+          on:checkedchange={batched((event: CustomEvent<MenuCheckedChangeDetail>) => {
             const item = event.target as HTMLButtonElement;
             if (item.getAttribute("role") === "menuitemradio" && event.detail.checked) {
               onValueChange?.(item.value);
             }
-          }}
+          })}
         >
           {children}
         </GroupElement>

package/dist/navigation-menu/navigation-menu.tsx

@@ -15,6 +15,7 @@ import type {
   NavigationMenuElement,
   NavigationMenuValueChangeDetail,
 } from "./navigation-menu.script.ts";
+import { batched } from "../batched.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -150,9 +151,9 @@ function Root({
         data-delay={delay}
         data-close-delay={closeDelay}
         data-orientation={vertical() ? "vertical" : "horizontal"}
-        on:valuechange={(event: CustomEvent<NavigationMenuValueChangeDetail>) =>
-          onValueChange?.(event.detail.value)
-        }
+        on:valuechange={batched((event: CustomEvent<NavigationMenuValueChangeDetail>) =>
+          onValueChange?.(event.detail.value),
+        )}
       >
         {/* A nested menu is a `<div>`, inside its parent's landmark. */}
         <Dynamic component={nested ? "div" : "nav"} {...attributes()}>

package/dist/number-field/number-field.tsx

@@ -24,6 +24,7 @@ import { onFormReset } from "../form/reset.ts";
 import { formatNumber, formatter } from "./format.ts";
 import type { NumberFieldElement } from "./number-field.script.ts";
 import numberFieldScript from "./number-field.script.ts?client";
+import { batched } from "../batched.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -260,11 +261,11 @@ function Root({
         locale={locale}
         allow-wheel-scrub={allowWheelScrub}
         allow-out-of-range={allowOutOfRange}
-        on:input={report}
-        on:change={() => {
+        on:input={batched(report)}
+        on:change={batched(() => {
           report();
           onValueCommitted?.(element()?.value ?? null);
-        }}
+        })}
       >
         <input
           type="hidden"

package/dist/otp-field/otp-field.tsx

@@ -12,6 +12,7 @@ import { controlId, describedBy, useField } from "../field/context.ts";
 import { onFormReset } from "../form/reset.ts";
 import type { OTPFieldElement, OTPFieldValueDetail } from "./otp-field.script.ts";
 import otpFieldScript from "./otp-field.script.ts?client";
+import { batched } from "../batched.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -234,19 +235,19 @@ function Root({
         validation-type={type()}
         mask={mask}
         auto-submit={autoSubmit}
-        on:input={(event: Event) => {
+        on:input={batched((event: Event) => {
           const input = element()?.input;
           // A composition reports once committed (the element fires `input` then, TASK-432).
           if (input && event.target === input && !(event as InputEvent).isComposing) {
             onValueChange?.(input.value);
           }
-        }}
-        on:valuecomplete={(event: CustomEvent<OTPFieldValueDetail>) =>
-          onValueComplete?.(event.detail.value)
-        }
-        on:valueinvalid={(event: CustomEvent<OTPFieldValueDetail>) =>
-          onValueInvalid?.(event.detail.value)
-        }
+        })}
+        on:valuecomplete={batched((event: CustomEvent<OTPFieldValueDetail>) =>
+          onValueComplete?.(event.detail.value),
+        )}
+        on:valueinvalid={batched((event: CustomEvent<OTPFieldValueDetail>) =>
+          onValueInvalid?.(event.detail.value),
+        )}
       >
         {children}
       </lu-otp-field>

package/dist/popover/popover-hover.script.ts

@@ -0,0 +1,27 @@
+// Popover's hover script (TASK-394, TASK-541): only a Popover.Trigger with `openOnHover` loads it,
+// so a page without one goes without the hover timing (hover.ts). A trigger with
+// `data-open-on-hover` opens its popover after `data-delay` of hover by a mouse or a pen, and the
+// popover closes `data-close-delay` after the pointer left both (popover.script.ts, which this
+// script hands the timing to, follows what it opened: focus, a click on the trigger).
+// It must not import `lumiose`: server-rendered pages load it without the runtime.
+import { hoverIntent } from "./hover.ts";
+import { isPopover, useHover } from "./popover.script.ts";
+
+useHover(
+  hoverIntent({
+    triggerAt: (node) =>
+      node.closest?.<HTMLElement>("button[data-open-on-hover][popovertarget]") ?? undefined,
+    popupOf: (trigger) => {
+      const popup = document.getElementById(trigger.getAttribute("popovertarget")!);
+      return isPopover(popup) ? popup : undefined;
+    },
+    show: (trigger, popup) => {
+      // A hover-opened popover leaves focus where it is (popover.script.ts's `toggle`).
+      popup.popover = "manual";
+      (popup.showPopover as (options?: { source?: HTMLElement }) => void)({ source: trigger });
+    },
+    hide: (popup) => popup.hidePopover(),
+    delay: 300,
+    closeDelay: 0,
+  }),
+);

package/dist/popover/popover.script.ts

@@ -21,6 +21,8 @@
 //   focus. It stays open while the pointer is on the trigger or the popup (WCAG 1.4.13: hoverable)
 //   and closes `data-close-delay` (0 ms, at least a 100 ms grace to cross the gap) after it left
 //   both. A click on the trigger keeps it open until it is dismissed (an outside press, Escape).
+//   The hover timing is popover-hover.script.ts's, which only a trigger with `openOnHover` loads
+//   (TASK-541); this script follows the popovers it opened.
 // - A modal popover is a modal `<dialog data-side>` opened by `command="show-modal"`: placement,
 //   focus and `aria-expanded` as above; Dialog's script and the native dialog do the rest.
 // - `data-trap-focus` (`modal="trap-focus"`, TASK-410): Tab and Shift+Tab go around the open
@@ -34,7 +36,7 @@
 //
 // It must not import `lumiose`: server-rendered pages load it without the runtime.
 import { openLayer } from "../layer/layer.ts";
-import { hoverIntent } from "./hover.ts";
+import type { HoverIntent } from "./hover.ts";
 import { anchoring, place } from "../placement/place.ts";
 
 /** The last press, until a key is pressed: what an opening came from. */
@@ -75,7 +77,7 @@ function tabStops(popup: HTMLElement): HTMLElement[] {
   });
 }
 
-const isPopover = (node: unknown): node is HTMLElement =>
+export const isPopover = (node: unknown): node is HTMLElement =>
   node instanceof HTMLElement &&
   node.matches("[popover][data-side][role=dialog], dialog[data-side]");
 
@@ -135,9 +137,9 @@ on("click", (event) => {
   const popup = trigger && document.getElementById(trigger.getAttribute("popovertarget")!);
   if (!isPopover(popup) || trigger!.matches("[popovertargetaction=hide]")) return;
   if (!popup.matches(":popover-open")) popup.popover = "manual";
-  else if (hovered.has(popup)) {
+  else if (hovered(popup)) {
     event.preventDefault();
-    hover.forget(popup);
+    hover!.forget(popup);
   }
 });
 
@@ -158,25 +160,17 @@ on("focusout", (event) => {
   }
 });
 
-// Open on hover (hover.ts) -------------------------------------------------------------------
+// Open on hover: popover-hover.script.ts, which only hover triggers load, hands its timing here.
 
-const hover = hoverIntent({
-  triggerAt: (node) =>
-    node.closest?.<HTMLElement>("button[data-open-on-hover][popovertarget]") ?? undefined,
-  popupOf: (trigger) => {
-    const popup = document.getElementById(trigger.getAttribute("popovertarget")!);
-    return isPopover(popup) ? popup : undefined;
-  },
-  show: (trigger, popup) => {
-    // A hover-opened popover leaves focus where it is (see `toggle`).
-    popup.popover = "manual";
-    (popup.showPopover as (options?: { source?: HTMLElement }) => void)({ source: trigger });
-  },
-  hide: (popup) => popup.hidePopover(),
-  delay: 300,
-  closeDelay: 0,
-});
-const hovered = hover.hovered;
+let hover: HoverIntent | undefined;
+
+/** Takes the hover timing of popover-hover.script.ts. */
+export function useHover(intent: HoverIntent): void {
+  hover = intent;
+}
+
+/** Whether a hover opened `popup`, and no click on its trigger has kept it open since. */
+const hovered = (popup: HTMLElement) => hover?.hovered.has(popup) === true;
 
 /** Stops dismissing `popup`: as it closes, so the next close request goes to the layer below. */
 function release(popup: HTMLElement) {
@@ -226,7 +220,7 @@ on("toggle", (event) => {
 
   if (open) {
     // A hover opens it without taking focus from where it is.
-    if (hovered.has(popup) || popup.contains(document.activeElement)) return;
+    if (hovered(popup) || popup.contains(document.activeElement)) return;
     const touch = press?.pointerType === "touch" && event.timeStamp - press.timeStamp < 1000;
     const first = touch ? undefined : tabStops(popup)[0];
     if (first) first.focus();
@@ -238,10 +232,10 @@ on("toggle", (event) => {
   }
 
   placed.delete(popup);
-  const wasHovered = hovered.has(popup);
+  const wasHovered = hovered(popup);
   const held = holding.has(popup);
   holding.delete(popup);
-  hover.forget(popup);
+  hover?.forget(popup);
   // A hover opened it and focus was elsewhere: closing it moves no focus.
   if (wasHovered && !held) return;
   const active = document.activeElement;

package/dist/popover/popover.tsx

@@ -6,7 +6,8 @@
 // `onOpenChange`. Ported from Timeless's approach (https://timeless.build).
 //
 // TASK-394: a trigger may open the popover on hover (`openOnHover`, after `delay`, closing
-// `closeDelay` after the pointer leaves both), which popover.script.ts runs. A `modal` popover is a
+// `closeDelay` after the pointer leaves both), which popover-hover.script.ts times (only hover
+// triggers load it, TASK-541) and popover.script.ts follows. A `modal` popover is a
 // modal `<dialog>` instead, opened by the trigger's `command="show-modal"`: the page behind it is
 // inert and does not scroll, focus stays inside, and a press outside or Escape closes it.
 import {
@@ -24,7 +25,9 @@ import {
 import dialogScript from "../dialog/dialog.script.ts?client";
 import { anchorName, placement, withStyle, type PlacementProps } from "../placement/placement.ts";
 import popoverScript from "./popover.script.ts?client";
+import popoverHoverScript from "./popover-hover.script.ts?client";
 import { OUTSIDE_TOOLBAR, ToolbarContext } from "../toolbar/context.ts";
+import { batched } from "../batched.ts";
 
 /**
  * `Popover.Root` renders no element: it holds the ids its parts share. `bind:open={signal}`
@@ -176,6 +179,8 @@ function Trigger({
     openOnHover && !popover.modal && !off
       ? { "data-open-on-hover": "", "data-delay": delay, "data-close-delay": closeDelay }
       : {};
+  // Only a hover trigger loads the hover timing on a server page (TASK-541).
+  if (untrack(() => openOnHover)) popoverHoverScript();
   return (
     <button
       type="button"
@@ -228,7 +233,7 @@ function Popup({
       ref={attach}
       id={popover.popupId}
       closedby="any"
-      on:toggle={toggle}
+      on:toggle={batched(toggle)}
     >
       {isServer ? content : inside()}
     </dialog>
@@ -247,7 +252,7 @@ function Popup({
       id={popover.popupId}
       popover="auto"
       data-trap-focus={popover.trapFocus ? "" : undefined}
-      on:toggle={toggle}
+      on:toggle={batched(toggle)}
     >
       {isServer ? content : inside()}
     </div>