@lumiose/ui 0.1.0 → 0.1.2

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

@@ -7,6 +7,7 @@
 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";
 
 /**
  * `PreviewCard.Root` renders no element: it holds the ids its parts share. `bind:open={signal}`
@@ -106,7 +107,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/radio-group/radio-group.tsx

@@ -7,6 +7,7 @@ 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";
 
 interface RadioGroupContextValue {
   name: () => string;
@@ -121,12 +122,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>

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,22 @@
 // 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";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -67,6 +75,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 +125,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 +147,24 @@ 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>.");
+  // Only items with a label need the script.
+  if (untrack(() => label) !== undefined) selectScript();
   return (
-    <option {...rest} value={value} selected={select.initial === value || undefined}>
+    <option
+      aria-label={label}
+      {...rest}
+      label={label}
+      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,7 @@ 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";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -259,12 +260,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,7 @@ 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";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -166,12 +167,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,7 @@ 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";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -326,12 +327,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. */

package/dist/toggle-group/toggle-group.tsx

@@ -11,6 +11,7 @@ import {
 } from "../toggle/context.ts";
 import type { ToggleGroupElement } from "./toggle-group.script.ts";
 import toggleGroupScript from "./toggle-group.script.ts?client";
+import { batched } from "../batched.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -39,7 +40,10 @@ type ElementProps = {
  * `aria-labelledby`. `bind:value={signal}` stands in for `value` and `onValueChange`.
  */
 export interface ToggleGroupProps extends Omit<ElementProps, "children"> {
-  /** Presses the toggles with these values when it changes. Pair it with `onValueChange`. */
+  /**
+   * The pressed toggles. Pair it with `onValueChange`, which updates it: the toggles show `value`
+   * again after each press, so one that `onValueChange` does not take is undone.
+   */
   value?: string[];
   /** The toggles pressed at first, when `value` is left out. */
   defaultValue?: string[];
@@ -104,11 +108,19 @@ export function ToggleGroup({
         multiple={multiple}
         data-orientation={orientation ?? "horizontal"}
         data-loop-focus={loopFocus === false ? "false" : undefined}
-        on:valuechange={() => {
-          const next = element()!.value;
+        on:valuechange={batched(() => {
+          const host = element()!;
+          const next = host.value;
           values.set(next);
           onValueChange?.(next);
-        }}
+          // Controlled: when the callback leaves `value` as it was, the toggles show it again, as
+          // in Base UI (TASK-538). A changed `value` equals the element's, which then does nothing.
+          const held = value;
+          if (held !== undefined) {
+            values.set(held);
+            host.value = held;
+          }
+        })}
       >
         {children}
       </lu-toggle-group>

package/dist/tooltip/tooltip.tsx

@@ -8,6 +8,7 @@
 import { createContext, effect, ref, useContext, useId } from "lumiose";
 import { anchorName, placement, withStyle, type PlacementProps } from "../placement/placement.ts";
 import tooltipScript from "./tooltip.script.ts?client";
+import { batched } from "../batched.ts";
 
 /**
  * `Tooltip.Root` renders no element: it holds the ids its parts share. `bind:open={signal}`
@@ -128,7 +129,9 @@ function Popup({
       }}
       id={tooltip.popupId}
       popover="hint"
-      on:toggle={(event: ToggleEvent) => tooltip.props.onOpenChange?.(event.newState === "open")}
+      on:toggle={batched((event: ToggleEvent) =>
+        tooltip.props.onOpenChange?.(event.newState === "open"),
+      )}
     >
       {children}
     </span>

package/docs/README.md

@@ -2,9 +2,8 @@
 
 > `@lumiose/ui`: accessible, unstyled UI primitives built on native elements (`<dialog>`, popover, invoker commands, CSS anchor positioning), server-rendered without hydration. Style them with your own CSS or the optional default theme.
 
-**Status:** in development. `@lumiose/ui` keeps its own 0.x versions, apart from the version all
-other Lumiose packages share, and is not on npm yet: today it is used from this repository's
-workspace. The goal for its 1.0 is parity with [Base UI](https://base-ui.com)'s components; the
+**Status:** in development. `@lumiose/ui` is on npm and keeps its own 0.x versions, apart from
+the version all other Lumiose packages share. The goal for its 1.0 is parity with [Base UI](https://base-ui.com)'s components; the
 table below lists them as they land.
 
 These pages ship in the package, in `node_modules/@lumiose/ui/docs`, so they match the installed
@@ -37,7 +36,8 @@ Anatomy, API, Example, Styling, Keyboard and focus, Without JavaScript, Browser
   with `onCheckedChange`, `value` with `onValueChange`. Pass a signal's value and write it back in
   the callback to keep both in sync, or leave both out and the element keeps its own state. Custom
   elements report changes with lowercase DOM events, like native ones: `openchange`,
-  `checkedchange` and `change`.
+  `checkedchange` and `change`. The callbacks run inside `batch()`, as event handlers do: what
+  they write renders together, and the DOM is current as soon as the event returns.
 - **Keyboard contracts.** Every component follows its WAI-ARIA Authoring Practices pattern, and
   its end-to-end tests check the keyboard paths.
 - **WCAG 2.2 AA.** Every component meets it: the components own semantics, keyboard and
@@ -70,7 +70,7 @@ custom properties, named as in shadcn/ui, are listed in [Theming](theming.md#the
 | [Tooltip](tooltip.md)                 | Available: native hint popover, opened by its script                                      |
 | [Menu](menu.md)                       | Available: popover menu, opens without JavaScript                                         |
 | [Combobox](combobox.md)               | Available: `<lu-combobox>`, a form control that filters its options                       |
-| [Select](select.md)                   | Available: native `<select>`, customizable where supported, no script                     |
+| [Select](select.md)                   | Available: native `<select>`, customizable where supported, no script but for `label`s    |
 | [Tabs](tabs.md)                       | Available: server HTML with the full state, `<lu-tabs>` adds the keys                     |
 | [Field](field.md)                     | Available: label, description, errors; native validation in the field                     |
 | [Fieldset](fieldset.md)               | Available: native `<fieldset>` and `<legend>`, no script                                  |
@@ -165,7 +165,10 @@ errors are yours.
 `@lumiose/ui` is opt-in, so its size is reported apart from the runtime's caps:
 `pnpm --filter @lumiose/ui size` prints, per component, the JavaScript a server-rendered page loads
 for its custom elements, the JavaScript an island that uses it loads, and its CSS (minified, gzip
-and brotli).
+and brotli). The scripts load as separate modules, in islands too: each component's script, and
+the modules several scripts share (the dismissal model, the placement fallback, the hover timing),
+each a file of its own, as an app's build splits them. The sizes on the component pages are those
+files' brotli sizes added up.
 
 ## Related
 

package/docs/accordion.md

@@ -187,8 +187,9 @@ closed item are HTML features: an accordion in a server-rendered page works befo
 loads, and with none. Disabled triggers ignore the pointer through CSS. `value`, `onValueChange`
 and `bind:value` need the component to run in an island.
 
-A page that renders an `Accordion` loads a 1 kB (brotli) module once, without the Lumiose runtime;
-islands bundle it. It defines `<lu-accordion>`, which adds the arrow keys, Home and End, and sets
+A page that renders an `Accordion` loads its script once, with the panel and animation modules it
+shares with Collapsible: 1.3 kB (brotli) without the Lumiose runtime; an island loads the same
+modules. It defines `<lu-accordion>`, which adds the arrow keys, Home and End, and sets
 the panels' animation hooks (shared with [Collapsible](collapsible.md)); a disabled trigger does
 not toggle, also from the keyboard.
 

package/docs/autocomplete.md

@@ -1,6 +1,6 @@
 # Autocomplete
 
-> A text input with suggestions, for text that may be anything (a search, a tag, an address): the WAI-ARIA combobox pattern with list autocomplete, after Base UI's Autocomplete. Unlike a [Combobox](combobox.md), the text is the value: the input has the name and submits what is typed, and choosing a suggestion only fills it in. It runs on the Combobox's element (`<lu-combobox free>`, 5.0 kB) and parts, on server-rendered pages and in islands; `bind:value` keeps a signal in sync. Filtering, inline completion, groups, an empty state and a status.
+> A text input with suggestions, for text that may be anything (a search, a tag, an address): the WAI-ARIA combobox pattern with list autocomplete, after Base UI's Autocomplete. Unlike a [Combobox](combobox.md), the text is the value: the input has the name and submits what is typed, and choosing a suggestion only fills it in. It runs on the Combobox's element (`<lu-combobox free>`, 5.8 kB) and parts, on server-rendered pages and in islands; `bind:value` keeps a signal in sync. Filtering, inline completion, groups, an empty state and a status.
 
 ```ts
 import { Autocomplete } from "@lumiose/ui"; // or "@lumiose/ui/autocomplete"
@@ -145,7 +145,7 @@ Focus stays in the input: the highlight moves through `aria-activedescendant`.
 ## Without JavaScript, and the element's script
 
 The input is a native text field with the name: typing, `required`, submission and reset work with
-no script; the suggestions need it. `<lu-combobox>`'s script (5.0 kB brotli, shared with Combobox)
+no script; the suggestions need it. `<lu-combobox>`'s script (5.8 kB brotli, shared with Combobox)
 filters and opens them, moves the highlight, fills in a choice (firing `input` and `change` on the
 input) and runs inline completion.
 

package/docs/avatar.md

@@ -180,8 +180,8 @@ when it fails) and hides its fallback, from sight and from assistive technology,
 the avatar twice; an avatar without an image shows its fallback.
 `onLoadingStatusChange` needs the component to run in an island.
 
-A page that renders an `Avatar` loads a 0.5 kB (brotli) script, without the Lumiose runtime;
-islands bundle it. `<lu-avatar>` reads the image's state when it connects (a cached image shows
+A page that renders an `Avatar` loads a 0.5 kB (brotli) script, without the Lumiose runtime; an
+island loads the same module. `<lu-avatar>` reads the image's state when it connects (a cached image shows
 at once), then follows its `load` and `error` events and changes to its `src` and `srcset`. An
 image that is complete without a size (an SVG without intrinsic dimensions, or a broken image) is
 told apart with `decode()`.

package/docs/checkbox-group.md

@@ -3,7 +3,7 @@
 > A group of checkboxes with one value, the list of the checked ones, after Base UI's CheckboxGroup: a native `<fieldset>` whose checkboxes share a name, so the form submits each checked value and a disabled group disables them all, without JavaScript. A parent checkbox checks them all and shows checked, mixed or unchecked as they are; `bind:value` keeps a signal in sync.
 
 ```ts
-import { CheckboxGroup, Checkbox, Fieldset } from "@lumiose/ui"; // or "@lumiose/ui/checkbox-group"
+import { CheckboxGroup, Checkbox, Fieldset } from "@lumiose/ui"; // or "@lumiose/ui/checkbox-group", "@lumiose/ui/checkbox" and "@lumiose/ui/fieldset"
 import "@lumiose/ui/themes/default.css"; // optional: the default theme
 ```
 

package/docs/checkbox.md

@@ -112,7 +112,7 @@ A native checkbox: toggling, submission, `required`, reset and `disabled` (its o
 work with no script.
 
 A page that renders a Checkbox, Checkbox Group, Radio Group or Switch loads one 1.0 kB (brotli)
-script once, without the Lumiose runtime; islands bundle it. It turns server HTML's
+script once, without the Lumiose runtime; an island loads the same module. It turns server HTML's
 `data-indeterminate` into the `indeterminate` property (which has no attribute), makes read-only
 inputs ignore clicks, Space and the label, runs the parent checkbox of a group and a [Radio
 Group](radio-group.md)'s arrow keys, and adds an

package/docs/collapsible.md

@@ -1,6 +1,6 @@
 # Collapsible
 
-> A panel that its trigger shows and hides: a native `<details>` whose `<summary>` is the trigger, so it works in server HTML with no JavaScript, keeps the browser's keyboard handling, and opens when find-in-page or a link lands inside it. A 0.7 kB script adds Base UI's animation hooks. `bind:open` (or `open` and `onOpenChange`) keeps a signal in sync in islands.
+> A panel that its trigger shows and hides: a native `<details>` whose `<summary>` is the trigger, so it works in server HTML with no JavaScript, keeps the browser's keyboard handling, and opens when find-in-page or a link lands inside it. A 0.9 kB script adds Base UI's animation hooks. `bind:open` (or `open` and `onOpenChange`) keeps a signal in sync in islands.
 
 ```ts
 import { Collapsible } from "@lumiose/ui"; // or "@lumiose/ui/collapsible"
@@ -141,8 +141,9 @@ Collapsible in a server-rendered page works before any script loads, and with no
 trigger ignores the pointer through CSS. `open`, `onOpenChange` and `bind:open` need the component
 to run in an island.
 
-A page that renders a `Collapsible` loads a 0.7 kB (brotli) module once, without the Lumiose
-runtime; islands bundle it. It covers every Collapsible and [Accordion](accordion.md) panel on the
+A page that renders a `Collapsible` loads 0.9 kB (brotli) of modules once (its script, and the
+panel and animation modules it shares with Accordion), without the Lumiose runtime; an island
+loads the same modules. It covers every Collapsible and [Accordion](accordion.md) panel on the
 page:
 
 - the animation hooks above, set on every opening and closing, whatever caused it (the trigger,

package/docs/combobox.md

@@ -1,6 +1,6 @@
 # Combobox
 
-> A text input that filters a list of options, for picking one value or several from many: the WAI-ARIA combobox pattern with list autocomplete, after Base UI's Combobox. The input shows the option's label and the form gets its value. `<lu-combobox>`, a 5.4 kB form-associated light-DOM element, runs it on server-rendered pages and in islands; `bind:value` and `bind:open` keep signals in sync. Groups, an empty state, a status, a clear button, multiple values with chips, validation and async options.
+> A text input that filters a list of options, for picking one value or several from many: the WAI-ARIA combobox pattern with list autocomplete, after Base UI's Combobox. The input shows the option's label and the form gets its value. `<lu-combobox>`, a 5.8 kB form-associated light-DOM element, runs it on server-rendered pages and in islands; `bind:value` and `bind:open` keep signals in sync. Groups, an empty state, a status, a clear button, multiple values with chips, validation and async options.
 
 ```ts
 import { Combobox } from "@lumiose/ui"; // or "@lumiose/ui/combobox"
@@ -313,8 +313,9 @@ In the server HTML the input is empty even with a selected value: the input rend
 options, so the server does not know the selected option's label when it writes the input. The
 script puts the label in as it upgrades the element (decision-62).
 
-A page that renders a `Combobox` loads the script once, as a 5.4 kB (brotli) module without the
-Lumiose runtime, and islands bundle it. It defines `lu-combobox`, which upgrades every combobox on
+A page that renders a `Combobox` loads the script once, with the dismissal and placement modules
+it shares with Menu and Popover: 5.8 kB (brotli) without the Lumiose runtime, and an island loads
+the same modules. It defines `lu-combobox`, which upgrades every combobox on
 the page in place: it reads the selection the server rendered (`aria-selected="true"`), puts its
 label in the input (text typed before it ran is kept, as a search), renders the chips, and from
 then on owns the value, the filtering, the popup,

package/docs/context-menu.md

@@ -1,6 +1,6 @@
 # Context Menu
 
-> A menu opened at the pointer by a right-click in its trigger area, a long press on a touch screen, or Shift+F10 and the ContextMenu key: Menu's popup and items, with Menu's keys, typeahead, submenus and dismissal. A 0.6 kB script on top of Menu's (4.6 kB together) opens it; without JavaScript the browser shows its own menu. `bind:open` (or `open` and `onOpenChange`) keeps a signal in sync in islands.
+> A menu opened at the pointer by a right-click in its trigger area, a long press on a touch screen, or Shift+F10 and the ContextMenu key: Menu's popup and items, with Menu's keys, typeahead, submenus and dismissal. A 0.9 kB script on top of Menu's (5.4 kB together) opens it; without JavaScript the browser shows its own menu. `bind:open` (or `open` and `onOpenChange`) keeps a signal in sync in islands.
 
 ```ts
 import { ContextMenu } from "@lumiose/ui"; // or "@lumiose/ui/context-menu"
@@ -175,8 +175,8 @@ Opening a menu at the pointer needs the script: without JavaScript a right-click
 browser's own menu, and the popup stays hidden. `open`, `onOpenChange` and `bind:open` need the
 component to run in an island.
 
-A page that renders a `ContextMenu` loads Menu's script and a 0.6 kB (brotli) one of its own,
-4.6 kB together, without the Lumiose runtime; islands bundle them. The element opens the menu on a
+A page that renders a `ContextMenu` loads Menu's script and a 0.9 kB (brotli) one of its own,
+5.4 kB together, without the Lumiose runtime; an island loads the same modules. The element opens the menu on a
 right-click, a long press or the keys, at the pointer, through a zero-size anchor that it moves
 there (CSS anchor positioning places the popup, with Menu's flips; without it, the shared
 placement script does). Menu's script does the rest: keys, items, submenus, and dismissal shared

package/docs/dialog.md

@@ -221,7 +221,7 @@ server-rendered page works before any script loads, and with none. `open`, `onOp
 
 Where the native element falls short of Base UI's dialog, a small script closes the gap: a page
 that renders a `Dialog` loads it once, as a 1.5 kB (brotli) module without the Lumiose runtime, and
-islands bundle it. It covers every `<dialog>` on the page:
+an island loads the same module. It covers every `<dialog>` on the page:
 
 - a right-click or a second finger outside does not close the dialog;
 - `data-nested-dialog-open` and `--lu-nested-dialogs` on a dialog with open dialogs inside;

package/docs/drawer.md

@@ -182,8 +182,9 @@ The trigger, the close buttons, Escape and the click outside are HTML features,
 drawer in a server-rendered page works before any script loads, and with none, against its edge.
 `open`, `onOpenChange` and `bind:open` need the component to run in an island.
 
-A page that renders a `Drawer` loads Dialog's script and a 1 kB (brotli) one of its own (2.5 kB
-together), without the Lumiose runtime; islands bundle them. The drawer's script handles the
+A page that renders a `Drawer` loads Dialog's script and a 1.1 kB (brotli) one of its own (2.8 kB
+together, with the animation module it shares with Toast), without the Lumiose runtime; an island
+loads the same modules. The drawer's script handles the
 swipe, with the mouse and pen through pointer events and on touch screens through touch events,
 taking the gesture from scrolling only once it is a swipe.
 

package/docs/field.md

@@ -253,8 +253,8 @@ the message Error's id (`Field.Error` without children or `match`) even when the
 Errors with children or a `match`. Give a field that must read well without JavaScript a message
 Error, and its Descriptions before the control.
 
-A page that renders a `Field` loads a 1.7 kB (brotli) script once, without the Lumiose runtime;
-islands bundle it. On a submit attempt (a submit button, Enter in a field, `requestSubmit()` or
+A page that renders a `Field` loads a 1.7 kB (brotli) script once, without the Lumiose runtime; an
+island loads the same module. On a submit attempt (a submit button, Enter in a field, `requestSubmit()` or
 the form's `reportValidity()`; a silent `checkValidity()` changes nothing) it cancels the browser's
 `invalid` bubble for fields that have an Error part for the problem and shows it there instead (the
 browser's message, or one your `validate` set), with the timing above, and focuses the first

package/docs/installation.md

@@ -2,13 +2,13 @@
 
 > Add `@lumiose/ui` to a Lumiose app and import its stylesheets, and the default theme if you want its look. The components then render in server HTML, without an island, and a page loads only the small scripts of the components it renders.
 
-**Status:** `@lumiose/ui` is not on npm yet. In this repository's workspace, an app adds it as
-`"@lumiose/ui": "workspace:*"` in its `dependencies`.
+**Status:** in development, on npm with its own 0.x versions, apart from the version the other
+Lumiose packages share.
 
 ## Add the package
 
 `@lumiose/ui` needs a Lumiose app: it ships its components as TSX, which the app's build compiles
-with the app's own code, and `lumiose` is its peer dependency. Once it is on npm:
+with the app's own code, and `lumiose` is its peer dependency. Install it from npm:
 
 ```sh
 pnpm add @lumiose/ui