@lumiose/ui 0.1.1 → 0.1.3

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

@@ -12,6 +12,8 @@ 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";
+import { notInside } from "../not-inside.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -144,7 +146,7 @@ const OTPFieldContext = createContext<OTPFieldContextValue>();
 
 function useOTPField(part: string): OTPFieldContextValue {
   const context = useContext(OTPFieldContext);
-  if (!context) throw new Error(`OTPField.${part} must be inside <OTPField.Root>.`);
+  if (!context) throw notInside(`OTPField.${part}`, "<OTPField.Root>");
   return context;
 }
 
@@ -234,19 +236,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/hover.ts

@@ -157,7 +157,8 @@ export function hoverIntent(source: HoverSource): HoverIntent {
     const { popup, x, y } = corridor;
     // Arrived (the popup's `pointerover` cancelled the close), or closed already.
     if (!closing.has(popup)) corridor = undefined;
-    else if (toward(popup.getBoundingClientRect(), x, y, event.clientX, event.clientY)) close(popup);
+    else if (toward(popup.getBoundingClientRect(), x, y, event.clientX, event.clientY))
+      close(popup);
     else corridor = undefined;
   });
 

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,10 @@ 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";
+import { notInside } from "../not-inside.ts";
 
 /**
  * `Popover.Root` renders no element: it holds the ids its parts share. `bind:open={signal}`
@@ -94,7 +98,7 @@ const PopoverContext = createContext<PopoverContextValue>();
 
 function usePopover(): PopoverContextValue {
   const context = useContext(PopoverContext);
-  if (!context) throw new Error("Popover parts must be inside <Popover.Root>.");
+  if (!context) throw notInside("Popover parts", "<Popover.Root>");
   return context;
 }
 
@@ -171,11 +175,16 @@ function Trigger({
       ? { command: "show-modal", commandfor: popover.popupId, "aria-expanded": "false" as const }
       : { popovertarget: popover.popupId };
   // A function, so hover opening and its delays follow the props: the script reads them from
-  // the trigger at each hover (TASK-477).
-  const hover = () =>
-    openOnHover && !popover.modal && !off
-      ? { "data-open-on-hover": "", "data-delay": delay, "data-close-delay": closeDelay }
-      : {};
+  // the trigger at each hover (TASK-477). Only a hover trigger loads the hover timing (TASK-541),
+  // on a server page or in an island, once `openOnHover` is on: the call is conditional, so an
+  // island loads the script when it is made (TASK-551).
+  const hover = () => {
+    if (openOnHover && !popover.modal && !off) {
+      popoverHoverScript();
+      return { "data-open-on-hover": "", "data-delay": delay, "data-close-delay": closeDelay };
+    }
+    return {};
+  };
   return (
     <button
       type="button"
@@ -228,7 +237,7 @@ function Popup({
       ref={attach}
       id={popover.popupId}
       closedby="any"
-      on:toggle={toggle}
+      on:toggle={batched(toggle)}
     >
       {isServer ? content : inside()}
     </dialog>
@@ -247,7 +256,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>

package/dist/preview-card/preview-card.tsx

@@ -7,6 +7,8 @@
 import { createContext, effect, ref, useContext, useId } from "lumiose";
 import { anchorName, placement, withStyle, type PlacementProps } from "../placement/placement.ts";
 import previewCardScript from "./preview-card.script.ts?client";
+import { batched } from "../batched.ts";
+import { notInside } from "../not-inside.ts";
 
 /**
  * `PreviewCard.Root` renders no element: it holds the ids its parts share. `bind:open={signal}`
@@ -43,7 +45,7 @@ const PreviewCardContext = createContext<PreviewCardContextValue>();
 
 function usePreviewCard(part: string): PreviewCardContextValue {
   const context = useContext(PreviewCardContext);
-  if (!context) throw new Error(`PreviewCard.${part} must be inside <PreviewCard.Root>.`);
+  if (!context) throw notInside(`PreviewCard.${part}`, "<PreviewCard.Root>");
   return context;
 }
 
@@ -106,7 +108,7 @@ function Popup({
       id={card.popupId}
       popover="manual"
       data-preview-card-popup=""
-      on:toggle={(event: ToggleEvent) => card.onToggle(event.newState === "open")}
+      on:toggle={batched((event: ToggleEvent) => card.onToggle(event.newState === "open"))}
     >
       {children}
     </div>

package/dist/progress/progress.tsx

@@ -6,6 +6,7 @@
 import { createContext, useContext, useId } from "lumiose";
 import { withStyle } from "../placement/placement.ts";
 import { formatValue, percent } from "./value.ts";
+import { notInside } from "../not-inside.ts";
 
 interface ProgressContextValue {
   id: string;
@@ -52,7 +53,7 @@ export type ProgressValueProps = Omit<JSX.IntrinsicElements["span"], "children">
 
 function useProgress(part: string): ProgressContextValue {
   const context = useContext(ProgressContext);
-  if (!context) throw new Error(`Progress.${part} must be inside <Progress.Root>.`);
+  if (!context) throw notInside(`Progress.${part}`, "<Progress.Root>");
   return context;
 }
 

package/dist/radio-group/radio-group.tsx

@@ -7,6 +7,8 @@ import { createContext, effect, ref, signal, untrack, useContext, useId } from "
 import checkboxScript from "../checkbox/checkbox.script.ts?client";
 import { describedBy, labelledBy, useField, useFormValues } from "../field/context.ts";
 import { onFormReset } from "../form/reset.ts";
+import { batched } from "../batched.ts";
+import { notInside } from "../not-inside.ts";
 
 interface RadioGroupContextValue {
   name: () => string;
@@ -121,12 +123,12 @@ export function RadioGroup({
         role="radiogroup"
         aria-required={required ? "true" : undefined}
         aria-readonly={readOnly ? "true" : undefined}
-        on:change={(event: Event) => {
+        on:change={batched((event: Event) => {
           const radio = event.target as HTMLInputElement;
           if (radio.type !== "radio" || !radio.checked) return;
           selected.set(radio.value);
           onValueChange?.(radio.value);
-        }}
+        })}
       >
         {children}
       </fieldset>
@@ -136,7 +138,7 @@ export function RadioGroup({
 
 function Root({ value, ...rest }: RadioRootProps) {
   const group = useContext(RadioGroupContext);
-  if (!group) throw new Error("Radio.Root must be inside <RadioGroup>.");
+  if (!group) throw notInside("Radio.Root", "<RadioGroup>");
   return (
     <input
       required={group.required() || undefined}

package/dist/select/select.script.ts

@@ -0,0 +1,26 @@
+// Select's client script (decision-63, TASK-537), loaded by a Select whose items have a `label`.
+// A customizable select's picker (`appearance: base-select`) shows an option's `label` attribute
+// instead of its content, through the browser's own style, which no CSS overrides. When such a
+// select is pressed or takes focus, before its picker opens, this script removes the attribute from
+// the options that Select.Item rendered with a label: the picker then shows their content,
+// typeahead matches the label's hidden copy first in it, and their `aria-label` keeps their name.
+// The classic select keeps the attribute, which it shows and typeahead matches; so does server HTML
+// before the script runs, where the customizable picker shows the label.
+// It must not import `lumiose`: server-rendered pages load it without the runtime.
+
+/** The hidden copy of a label that Select.Item puts first in its option. */
+const LABELLED = "option[label] > [data-label]:first-child";
+
+/** Shows the content of the labelled items of the customizable select at or around `target`. */
+export function showContent(target: EventTarget | null): void {
+  const select = (target as Element | null)?.closest?.("select");
+  if (!select || getComputedStyle(select).appearance !== "base-select") return;
+  for (const copy of select.querySelectorAll(LABELLED))
+    copy.parentElement!.removeAttribute("label");
+}
+
+for (const type of ["pointerdown", "focusin"]) {
+  document.addEventListener(type, (event) => showContent(event.target), true);
+}
+// A select focused before the script ran (`autofocus`).
+showContent(document.activeElement);

package/dist/select/select.tsx

@@ -3,14 +3,23 @@
 // already does everything Base UI's Select does around the value: the combobox role, the keyboard
 // and typeahead (on the closed control too), the top-layer picker anchored to the control, forms
 // (`name`, `required`, autofill, reset, a disabled fieldset) and the mobile pickers. So Select
-// ships no script: it works in server HTML, with no JavaScript, and in islands, where `value` drives
-// the control when it changes and its `change` event reports back through `onValueChange`. Where
-// customizable select is supported, `Select.Trigger` and `Select.Value` style the button and show
-// the selected option's content, and options may hold more than text. TASK-358 records why it is
-// native rather than the listbox pattern.
+// works in server HTML, with no JavaScript, and in islands, where `value` drives the control when
+// it changes and its `change` event reports back through `onValueChange`. Where customizable select
+// is supported, `Select.Trigger` and `Select.Value` style the button and show the selected option's
+// content, and options may hold more than text. TASK-358 records why it is native rather than the
+// listbox pattern.
+//
+// An item's `label` (TASK-537) names it: the option's `label` attribute, which the classic select
+// shows and typeahead matches, a hidden copy first in its content, which typeahead matches once
+// the attribute is gone, and its `aria-label`. A customizable select's picker shows an option's
+// `label` attribute instead of its content (the browser's style, which no CSS overrides), so
+// select.script.ts removes the attribute from a customizable select's items as it takes focus.
 import { createContext, effect, ref, untrack, useContext } from "lumiose";
+import selectScript from "./select.script.ts?client";
 import { fieldProps, useField, useFormValues } from "../field/context.ts";
 import { onFormReset } from "../form/reset.ts";
+import { batched } from "../batched.ts";
+import { notInside } from "../not-inside.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -67,6 +76,11 @@ export type SelectValueProps = Omit<JSX.IntrinsicElements["selectedcontent"], "c
 export type SelectItemProps = Omit<JSX.IntrinsicElements["option"], "value" | "selected"> & {
   /** The value the select takes, and submits, when the option is selected. */
   value: string;
+  /**
+   * The option's name, for typeahead, assistive technology and the classic select, when its
+   * content starts with an icon or holds more than text. The picker shows the content.
+   */
+  label?: string;
   /** The option cannot be selected. */
   disabled?: boolean;
 };
@@ -112,9 +126,9 @@ function Root({ value, defaultValue, onValueChange, children, ...rest }: SelectR
           select(element);
           rest.ref?.(element);
         }}
-        on:change={(event: Event) =>
-          onValueChange?.((event.currentTarget as HTMLSelectElement).value)
-        }
+        on:change={batched((event: Event) =>
+          onValueChange?.((event.currentTarget as HTMLSelectElement).value),
+        )}
       >
         {children}
       </select>
@@ -134,11 +148,29 @@ function Value(props: SelectValueProps) {
   return <selectedcontent {...props} />;
 }
 
-function Item({ children, value, ...rest }: SelectItemProps) {
+function Item({ children, value, label, ...rest }: SelectItemProps) {
   const select = useContext(SelectContext);
-  if (!select) throw new Error("Select parts must be inside <Select.Root>.");
+  if (!select) throw notInside("Select parts", "<Select.Root>");
+  // Only items with a label need the script. Read where the attribute is, so a label that appears
+  // after an island's first render still loads it (TASK-552; the call is conditional, so an island
+  // loads the script when it is made, TASK-551).
+  const labelled = () => {
+    if (label !== undefined) selectScript();
+    return label;
+  };
   return (
-    <option {...rest} value={value} selected={select.initial === value || undefined}>
+    <option
+      aria-label={label}
+      {...rest}
+      label={labelled()}
+      value={value}
+      selected={select.initial === value || undefined}
+    >
+      {label === undefined ? null : (
+        <span hidden data-label="">
+          {label}
+        </span>
+      )}
       {children}
     </option>
   );

package/dist/slider/slider.tsx

@@ -13,6 +13,8 @@ import { percent } from "../progress/value.ts";
 import { formatValues } from "./format.ts";
 import type { SliderElement } from "./slider.script.ts";
 import sliderScript from "./slider.script.ts?client";
+import { batched } from "../batched.ts";
+import { notInside } from "../not-inside.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -155,7 +157,7 @@ const SliderContext = createContext<SliderContextValue>();
 
 function useSlider(part: string): SliderContextValue {
   const context = useContext(SliderContext);
-  if (!context) throw new Error(`Slider.${part} must be inside <Slider.Root>.`);
+  if (!context) throw notInside(`Slider.${part}`, "<Slider.Root>");
   return context;
 }
 
@@ -259,12 +261,12 @@ function Root<V extends SliderValue = number>({
         format={format ? JSON.stringify(format) : undefined}
         locale={locale}
         style={withStyle(style, untrack(range))}
-        on:input={() => {
+        on:input={batched(() => {
           const next = current();
           values.set(asList(next, low()));
           onValueChange?.(next);
-        }}
-        on:change={() => onValueCommitted?.(current())}
+        })}
+        on:change={batched(() => onValueCommitted?.(current()))}
       >
         {children}
       </lu-slider>

package/dist/switch/switch.tsx

@@ -7,6 +7,7 @@ import { ref, untrack } from "lumiose";
 import checkboxScript from "../checkbox/checkbox.script.ts?client";
 import { fieldProps, useField, useFormValues } from "../field/context.ts";
 import { onFormReset } from "../form/reset.ts";
+import { batched } from "../batched.ts";
 
 /**
  * The native checkbox props Root passes through, without the brand of intrinsic elements' props,
@@ -73,9 +74,9 @@ function Root({
       checked={checked ?? initial}
       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/tabs/tabs.tsx

@@ -19,6 +19,8 @@ import {
 import { withStyle } from "../placement/placement.ts";
 import defineTabs from "./tabs.script.ts?client";
 import type { LuTabs } from "./tabs.script.ts";
+import { batched } from "../batched.ts";
+import { notInside } from "../not-inside.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -113,7 +115,7 @@ const TabsContext = createContext<TabsContextValue>();
 
 function useTabs(): TabsContextValue {
   const context = useContext(TabsContext);
-  if (!context) throw new Error("Tabs parts must be inside <Tabs.Root>.");
+  if (!context) throw notInside("Tabs parts", "<Tabs.Root>");
   return context;
 }
 
@@ -166,12 +168,12 @@ function Root({
         ref={element}
         // The anchor the selected tab carries for a Tabs.Indicator (tabs.css).
         style={withStyle(rest.style, { "--lu-tabs-anchor": `--lu-tabs-${id}` })}
-        on:valuechange={() => {
+        on:valuechange={batched(() => {
           const next = element()?.value;
           if (next == null) return;
           selected.set(next);
           onValueChange?.(next);
-        }}
+        })}
       >
         {children}
       </lu-tabs>

package/dist/toast/toast.tsx

@@ -16,6 +16,8 @@ import { afterAnimations } from "../animation/animation.ts";
 import toastScript from "./toast.script.ts?client";
 import { CLOSE_COMMAND } from "./command.ts";
 import type { LuToastViewport } from "./toast.script.ts";
+import { batched } from "../batched.ts";
+import { notInside } from "../not-inside.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -254,7 +256,7 @@ const ToastItemContext = createContext<ToastItemContextValue>();
 
 function useToastItem(): ToastItemContextValue {
   const context = useContext(ToastItemContext);
-  if (!context) throw new Error("Toast parts must be inside <Toast.Root>.");
+  if (!context) throw notInside("Toast parts", "<Toast.Root>");
   return context;
 }
 
@@ -326,12 +328,12 @@ function Root({ toast, swipeDirection, children, ref: forwarded, ...rest }: Toas
         data-timeout={String(toast.timeout ?? provider?.timeout() ?? DEFAULT_TIMEOUT)}
         data-swipe-directions={(swipeDirection ?? ["down", "right"]).join(" ") || undefined}
         data-ending-style={ending() ? "" : undefined}
-        on:close={(event: Event) => {
+        on:close={batched((event: Event) => {
           // The script closes it: a managed toast leaves through its manager.
           if (!owner) return;
           event.preventDefault();
           owner.close(toast.id!);
-        }}
+        })}
       >
         {children}
       </div>

package/dist/toggle/toggle.tsx

@@ -6,6 +6,7 @@ import { effect, onCleanup, signal, untrack, useContext } from "lumiose";
 import type { ToggleChangeDetail } from "../toggle-group/toggle-group.script.ts";
 import { ToolbarContext } from "../toolbar/context.ts";
 import { ToggleGroupContext, type ToggleRecord } from "./context.ts";
+import { batched } from "../batched.ts";
 
 /**
  * The button props Toggle passes through, without the brand of intrinsic elements' props, so that
@@ -82,16 +83,16 @@ export function Toggle({
       aria-disabled={toolbar?.disabled() ? "true" : rest["aria-disabled"]}
       value={value}
       aria-pressed={on() ? "true" : "false"}
-      on:click={(event: MouseEvent) => {
+      on:click={batched((event: MouseEvent) => {
         // In a group, the group's element presses it and reports `pressedchange`.
         if (group || event.defaultPrevented) return;
         const next = !state();
         state.set(next);
         onPressedChange?.(next);
-      }}
-      on:pressedchange={(event: CustomEvent<ToggleChangeDetail>) =>
-        onPressedChange?.(event.detail.pressed)
-      }
+      })}
+      on:pressedchange={batched((event: CustomEvent<ToggleChangeDetail>) =>
+        onPressedChange?.(event.detail.pressed),
+      )}
     >
       {children}
     </button>

package/dist/toggle-group/toggle-group.script.ts

@@ -51,16 +51,24 @@ export class ToggleGroupElement extends HTMLElement {
     );
   }
 
-  /** The pressed toggles' values. Setting it presses those toggles, without events. */
+  /**
+   * The pressed toggles' values. Setting it presses those toggles, without events; a value equal
+   * to the current one changes nothing and measures nothing (TASK-539).
+   */
   get value(): string[] {
     return this.items.filter(pressed).map((item) => item.value);
   }
 
   set value(next: readonly string[] | null | undefined) {
     const values = next ?? [];
-    for (const item of this.items)
-      item.setAttribute("aria-pressed", String(values.includes(item.value)));
-    this.#rove();
+    let changed = false;
+    for (const item of this.items) {
+      const on = String(values.includes(item.value));
+      if (item.getAttribute("aria-pressed") === on) continue;
+      item.setAttribute("aria-pressed", on);
+      changed = true;
+    }
+    if (changed) this.#rove();
   }
 
   /** Whether several toggles can be pressed; reflects the `multiple` attribute. */