@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.1

package/dialog/index.jsx

@@ -0,0 +1,301 @@
+// Ported from packages/react-aria-components/src/Dialog.tsx (DialogTrigger, Dialog), Apache-2.0, © Adobe.
+// RAC composition: `<DialogTrigger><Button/><Modal|Popover><Dialog>…</Dialog></…></DialogTrigger>`.
+// Rivet:
+// - `DialogTrigger` renders no element: it provides OverlayTriggerStateContext / DialogContext /
+//   PopoverContext (`../overlay/contexts.ts`) and a `PressResponder` whose trigger props reach the user's
+//   `<Button>` (`aria-expanded` / `aria-controls` / `isPressed` as accessors, read in the button's bindings).
+//   State = `createMenuTriggerState` (react-stately useMenuTriggerState, so a menu inside the dialog can
+//   open submenus); the trigger ref is region state (`ref()`, serializable).
+// - `Dialog`: useDialog = `dialogProps` (./behaviour.tsx) with slot ids (`createSlotId`): the Heading
+//   (`slot="title"`) and Text (`slot="description"`) mark them rendered (with their own `id` prop when set: RA
+//   mergeIds, the owner follows it). Server: the children are called inside the body Provider's slot, which runs
+//   while `body` is built, before the `<section>` record reads its attributes, so `aria-labelledby` /
+//   `aria-describedby` are final in the server HTML; client: an accessor (reactive binding), the attribute
+//   bindings follow the slot ids' `rendered` signals. No title → the trigger id from context (RAC fallback).
+//   `close` = `closeOverlay` of the context state.
+// - render props / `class` / `style` functions via `renderProps` (`../slots`); default class `rv-Dialog`.
+//   Client: children reach the body Provider as `[() => rp.children()]` (a reactive binding): plain text children
+//   (`A {p()}`) update like RAC re-renders; Provider alone resolves its slot once. Server: `rp.children()` (above).
+// - `trigger` (DialogTrigger): Rivet extension, RAC vocabulary — see DialogTriggerProps.trigger; hover / focus use
+//   `../overlay/hover-trigger.tsx` (safe area attached while open from an own anchor site), longPress RA useLongPress.
+// `render` (RAC DOMRenderProps, renderProps `undefined`) replaces the `<section>`. Deviations: an `[autofocus]` descendant is focused on mount (React's `autoFocus`); the iOS VoiceOver refocus and the focus-on-mount run from a client effect
+// (a server-rendered Dialog whose effect wakes after the user moved focus does not take it: `focusMovedByUser`);
+// in a collection's hidden build pass (`isHidden()`) DialogTrigger renders nothing (RAC `useIsHidden`).
+import { _regionState, untrack, useContext } from "@rivetjs/reactivity";
+import { Show, clientEffect, ref as createRef } from "@rivetjs/runtime/dom";
+import { createId, idSignal } from "../utils/id.js";
+import { isFocusWithin } from "../utils/dom.js";
+import { focusMovedByUser, focusSafely } from "../focus/index.js";
+import {} from "../utils/render.js";
+import { globalDOMProps } from "../utils/dom-props.js";
+import { read } from "../interactions/utils.js";
+import { PressResponder } from "../interactions/pressable.jsx";
+import { OverlayTriggerStateContext, PopoverContext } from "../overlay/contexts.js";
+import { closeOverlay, openOverlay } from "../state/overlays.js";
+import { createMenuTriggerState, toggleMenu } from "../state/menu.js";
+import { longPressEnd, longPressStart } from "../interactions/long-press.jsx";
+import { attachHoverTrigger, hoverTriggerBlur, hoverTriggerFocus, hoverTriggerOverlayBlurWithin, hoverTriggerOverlayFocusWithin, hoverTriggerPointerEnter, hoverTriggerPointerLeave, } from "../overlay/hover-trigger.jsx";
+import { isHidden } from "../collections/components.jsx";
+import { ButtonContext } from "../button/index.jsx";
+import { HeadingContext } from "../heading/index.jsx";
+import { TextContext } from "../text/index.jsx";
+import { probeSlots, slotProbing } from "#server";
+import { DEFAULT_SLOT, Provider, contextProps, createSlotId, mergeRefValues, renderProps, } from "../slots/index.jsx";
+import { dialogBlur, dialogFocus, dialogProps, dialogTitleWarning } from "./behaviour.jsx";
+import { DialogContext } from "./contexts.js";
+import { renderPropsOf } from "../slots/index.jsx";
+import { hasLive, liveOptions } from "../utils/live.jsx";
+export { DialogContext, OverlayTriggerStateContext };
+/** A DialogTrigger opens a dialog when a trigger element is pressed (RAC `DialogTrigger`). */
+export function DialogTrigger(props) {
+    // Use the menu trigger state instead of the overlay trigger state in case a menu is embedded in the dialog.
+    // This is needed to handle submenus.
+    // Live props: a controlled `isOpen={open()}` stays live (accessor; `controllable` reads it, never writes it).
+    const state = createMenuTriggerState({ isOpen: liveOptions(props, [], ["isOpen"]).isOpen, defaultOpen: props.defaultOpen, onOpenChange: props.onOpenChange });
+    const buttonRef = _regionState(() => createRef());
+    // useOverlayTrigger({ type: "dialog" }): no aria-haspopup for dialogs; `aria-controls` while open.
+    const overlayId = idSignal();
+    // Label dialog by the trigger as a fallback if there is no title slot.
+    // This is done in RAC instead of hooks because otherwise we cannot distinguish
+    // between context and props. Normally aria-labelledby overrides the title
+    // but when sent by context we want the title to win.
+    const triggerId = idSignal();
+    // Initial ids (plain strings for the contexts / trigger props; a merged id updates the signals, read in accessors).
+    const initialOverlayId = untrack(overlayId), initialTriggerId = untrack(triggerId);
+    // If within a collection (e.g. Tabs), render nothing.
+    if (isHidden())
+        return null;
+    const children = props.children;
+    const mode = props.trigger ?? "press";
+    // Live `delay` / `closeDelay` (LIVE-SWEEP round 2): accessors the hover handlers read at event time.
+    const timing = hasLive(props) ? liveOptions(props, ["delay", "closeDelay"]) : props;
+    // useOverlayTrigger trigger props (accessors: read in the Button's bindings).
+    const triggerProps = {
+        id: initialTriggerId,
+        "aria-expanded": () => state.isOpen(),
+        "aria-controls": () => (state.isOpen() ? overlayId() : undefined),
+    };
+    // Server, open: the trigger's `aria-controls` is written before the Dialog renders, so a Dialog with its own `id` (RA
+    // mergeIds, `idRef`) would leave the generated id in the server HTML (an IDREF to nothing; the client render follows
+    // the merge). Probe the children first (`probeSlots`, browser: a no-op): a probed Dialog sets `idRef` and renders
+    // nothing. Only server-open triggers pay the probe (their overlay subtree renders twice up to the Dialog).
+    if (SERVER && untrack(state.isOpen))
+        probeSlots([
+            [OverlayTriggerStateContext, state],
+            [DialogContext, { id: initialOverlayId, idRef: overlayId }],
+        ], children);
+    if (mode === "press" || mode === "focus") {
+        return (<Provider values={[
+                [OverlayTriggerStateContext, state],
+                [DialogContext, { id: initialOverlayId, "aria-labelledby": () => triggerId(), idRef: overlayId }],
+                [PopoverContext, { trigger: "DialogTrigger", triggerRef: buttonRef, id: initialOverlayId, "aria-labelledby": () => triggerId() }],
+            ]}>
+        {mode === "press" ? (<PressResponder {...triggerProps} onPress={() => toggleMenu(state)} ref={buttonRef} isPressed={() => state.isOpen()}>
+            {children}
+          </PressResponder>) : (<HoverModeTrigger state={state} mode="focus" triggerProps={triggerProps} buttonRef={buttonRef} overlayId={initialOverlayId} triggerId={triggerId} idRef={overlayId}>
+            {children}
+          </HoverModeTrigger>)}
+      </Provider>);
+    }
+    if (mode === "longPress") {
+        // useMenuTrigger `trigger: 'longPress'`: a long press opens; a keyboard / virtual press toggles.
+        const longPress = { props: { onLongPress: () => openOverlay(state) }, state: { timer: undefined, globals: [] } };
+        const description = props.longPressAccessibilityDescription;
+        const descriptionId = description ? createId() : undefined;
+        return (<Provider values={[
+                [OverlayTriggerStateContext, state],
+                [DialogContext, { id: initialOverlayId, "aria-labelledby": () => triggerId(), idRef: overlayId }],
+                [PopoverContext, { trigger: "DialogTrigger", triggerRef: buttonRef, id: initialOverlayId, "aria-labelledby": () => triggerId() }],
+            ]}>
+        <PressResponder {...triggerProps} aria-describedby={descriptionId} onPressStart={(e) => {
+                if (e.pointerType === "mouse" || e.pointerType === "touch")
+                    longPressStart(longPress, e);
+            }} onPressEnd={(e) => longPressEnd(longPress, e)} onPress={(e) => {
+                if (e.pointerType !== "mouse" && e.pointerType !== "touch")
+                    toggleMenu(state);
+            }} ref={buttonRef} isPressed={() => state.isOpen()}>
+          {children}
+        </PressResponder>
+        {description ? (<span id={descriptionId} hidden>
+            {description}
+          </span>) : null}
+      </Provider>);
+    }
+    return (<HoverModeTrigger state={state} mode="hover" delay={timing.delay} closeDelay={timing.closeDelay} triggerProps={triggerProps} buttonRef={buttonRef} overlayId={initialOverlayId} triggerId={triggerId} idRef={overlayId}>
+      {children}
+    </HoverModeTrigger>);
+}
+/** `trigger="hover" | "focus"`: C1b's hover-trigger handlers (`../overlay/hover-trigger.tsx`) on the trigger and popover. */
+function HoverModeTrigger(input) {
+    const { state, mode, triggerProps, buttonRef, overlayId, triggerId, idRef } = input;
+    const children = input.children;
+    const overlayRef = createRef();
+    const hover = { trigger: mode, delay: input.delay, closeDelay: input.closeDelay, triggerRef: buttonRef, overlayRef };
+    const responderProps = {
+        ...triggerProps,
+        onPointerEnter: (e) => {
+            if (mode === "hover")
+                hoverTriggerPointerEnter(e, hover, state);
+        },
+        onPointerLeave: (e) => {
+            if (mode === "hover")
+                hoverTriggerPointerLeave(e, hover, state);
+        },
+        onFocus: (e) => hoverTriggerFocus(e, hover, state),
+        onBlur: (e) => hoverTriggerBlur(e, hover, state),
+        onPress: (e) => {
+            // Hover mode: mouse / pen open by hovering; touch, keyboard and screen readers keep the press toggle.
+            if (mode === "focus" || (e.pointerType !== "mouse" && e.pointerType !== "pen"))
+                toggleMenu(state);
+        },
+    };
+    return (<Provider values={[
+            [OverlayTriggerStateContext, state],
+            [DialogContext, { id: overlayId, "aria-labelledby": () => triggerId(), idRef }],
+            [
+                PopoverContext,
+                {
+                    trigger: "DialogTrigger",
+                    triggerRef: buttonRef,
+                    ref: overlayRef,
+                    id: overlayId,
+                    "aria-labelledby": () => triggerId(),
+                    onFocusWithin: () => hoverTriggerOverlayFocusWithin(state),
+                    onBlurWithin: (e) => hoverTriggerOverlayBlurWithin(e, hover, state),
+                },
+            ],
+        ]}>
+      <PressResponder {...responderProps} ref={buttonRef} isPressed={() => state.isOpen()}>
+        {children}
+      </PressResponder>
+      {/* Safe area while open (an own binding site: re-created alone on a resumed page). */}
+      <span data-rv-overlay-anchor="" style={{ display: "contents" }}>
+        <Show when={() => state.isOpen()}>{() => <HoverSafeArea hover={hover} state={state}/>}</Show>
+      </span>
+    </Provider>);
+}
+function HoverSafeArea(input) {
+    const { hover, state } = input;
+    clientEffect(() => attachHoverTrigger(hover, state));
+    return null;
+}
+const OWNED = ["style"];
+const SERVER = typeof document === "undefined";
+/** A dialog is an overlay shown above other content in an application (RAC `Dialog`). */
+export function Dialog(inProps) {
+    const originalAriaLabelledby = inProps["aria-labelledby"];
+    // RA mergeIds: a user id replaces the trigger's generated overlay id, so `aria-controls` follows it
+    // (Rivet: the trigger's id signal travels in context, `idRef`; resumable, unlike mergeIds' browser map).
+    const rawContext = useContext(DialogContext);
+    if (rawContext?.idRef && inProps.id)
+        rawContext.idRef.set(inProps.id);
+    // A server-open DialogTrigger's probe: the id merge above is all it needs.
+    if (slotProbing)
+        return null;
+    const [merged, contextRef] = contextProps(inProps, inProps.ref, DialogContext);
+    const { idRef: _idRef, ...props } = merged;
+    if (rawContext?.idRef && inProps.id)
+        props.id = inProps.id;
+    const title = createSlotId();
+    const content = createSlotId();
+    const { dialogProps: d, titleProps, contentProps, } = dialogProps({
+        ...props,
+        // Only pass aria-labelledby from props, not context.
+        // Context is used as a fallback below.
+        "aria-labelledby": originalAriaLabelledby,
+        isEntering: undefined,
+    }, { title, content });
+    const state = useContext(OverlayTriggerStateContext);
+    // If aria-labelledby exists on props (and not on the original props), it came from context: the fallback
+    // when there is no title slot.
+    const contextLabelledBy = props["aria-labelledby"] !== originalAriaLabelledby ? props["aria-labelledby"] : undefined;
+    const ariaLabel = d["aria-label"];
+    const labelledBy = () => (ariaLabel ? undefined : (d["aria-labelledby"]() ?? read(contextLabelledBy)));
+    // One local arrow (R2: render props capture it), not `state ? f : g`.
+    const close = () => {
+        if (state)
+            closeOverlay(state);
+    };
+    const rp = renderPropsOf(props, { defaultClassName: "rv-Dialog", values: { close } });
+    // Client: an accessor, not `{rp.children()}`: Provider resolves its slot once (untracked), so plain text
+    // children (`A {p()}`) would stay static; a function inside an array is inserted as a reactive binding (a
+    // bare function child is a render prop: Provider would call it once).
+    // Server: the children run inside the Provider's slot, which the server Provider calls while `body` is built —
+    // before the `<section>` record reads aria-labelledby / -describedby — so the title / description parts have
+    // marked their slot ids (an own `id` prop included: RA mergeIds). The traversal would call the accessor later,
+    // after the open tag's attributes. Same work, same owner (the provide scope); the server inserts no binding
+    // for a function child of a component either way.
+    const childContent = () => rp.children();
+    // Rivet (server): an alert dialog's `aria-describedby` names its description only when a part takes it (the content id
+    // was kept by expectation: an IDREF to nothing without one) — probe which description part renders (`probeSlots`).
+    if (SERVER && contentProps.id)
+        probeSlots([[TextContext, { slots: { [DEFAULT_SLOT]: {}, description: { id: content } } }]], childContent);
+    const body = (<Provider values={[
+            [HeadingContext, { slots: { [DEFAULT_SLOT]: {}, title: { id: titleProps.id ? title : undefined, level: 2 } } }],
+            [TextContext, { slots: { [DEFAULT_SLOT]: {}, description: { id: contentProps.id ? content : undefined } } }],
+            [
+                ButtonContext,
+                {
+                    slots: {
+                        [DEFAULT_SLOT]: {},
+                        close: {
+                            onPress: () => {
+                                if (state)
+                                    closeOverlay(state);
+                            },
+                        },
+                    },
+                },
+            ],
+        ]}>
+      {SERVER ? childContent() : [childContent]}
+    </Provider>);
+    const element = createRef();
+    const ref = mergeRefValues(element, contextRef);
+    const isEntering = props.isEntering;
+    // Rendered by the server: the mount effect runs on a resumed page when its chunk wakes (idle / visible).
+    const resumed = typeof document === "undefined";
+    // useDialog: focus the dialog itself on mount (or once it has entered), unless a child element is already focused.
+    clientEffect(() => {
+        const el = element();
+        // Resumed page: the user already moved focus elsewhere (React focuses at hydration, before any interaction).
+        if (resumed && el && !isFocusWithin(el) && focusMovedByUser(el.ownerDocument))
+            return;
+        const entering = !!read(isEntering);
+        // React focuses an `autoFocus` child on mount (commit, before useDialog's effect); a re-inserted Rivet
+        // element only carries the `autofocus` attribute, which the browser ignores after page load.
+        if (el && !entering && !isFocusWithin(el)) {
+            const auto = el.querySelector("[autofocus]");
+            if (auto)
+                focusSafely(auto);
+        }
+        return dialogFocus(el, entering);
+    });
+    if (isDev())
+        clientEffect(() => dialogTitleWarning(element()));
+    const dom = globalDOMProps(props, OWNED);
+    const id = d.id, role = d.role, ariaDetails = d["aria-details"], describedBy = d["aria-describedby"], slot = props.slot ?? undefined;
+    if (props.render) {
+        const attrs = {
+            ...dom,
+            id,
+            slot,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            ref,
+            role,
+            tabindex: -1,
+            "aria-label": ariaLabel,
+            "aria-labelledby": () => labelledBy(),
+            "aria-describedby": () => describedBy(),
+            "aria-details": ariaDetails,
+            onBlur: (event) => dialogBlur(event),
+            children: () => body,
+        };
+        return props.render(attrs, undefined);
+    }
+    return (<section {...dom} id={id} slot={slot} class={rp.class()} style={rp.style()} ref={ref} role={role} tabIndex={-1} aria-label={ariaLabel} aria-labelledby={labelledBy()} aria-describedby={describedBy()} aria-details={ariaDetails} onBlur={(event) => dialogBlur(event)}>
+      {body}
+    </section>);
+}
+const isDev = () => globalThis.process?.env?.NODE_ENV === "development";

package/disclosure/behaviour.d.ts

@@ -0,0 +1,50 @@
+import type { PressEvent } from "../interactions/press.jsx";
+import { type DisclosureState } from "../state/disclosure.js";
+export interface AriaDisclosureProps {
+    /** Id base of the button / panel (Rivet: replaces `useId`). */
+    id: string;
+    /** Rivet: the panel element (RA `ref`), read by the `hidden` binding in the browser. */
+    panelRef?: () => HTMLElement | null | undefined;
+    /** Whether the disclosure is disabled (Rivet, live props: an accessor read at press time). */
+    isDisabled?: boolean | (() => boolean);
+}
+export interface DisclosureAria {
+    /** Props for the disclosure button (AriaButtonProps: spread onto / pass to a Button). */
+    buttonProps: {
+        id: string;
+        "aria-expanded": () => boolean;
+        "aria-controls": string;
+        isDisabled: boolean | (() => boolean);
+        onPress: (e: PressEvent) => void;
+        onPressStart: (e: PressEvent) => void;
+    };
+    /** Props for the disclosure panel. */
+    panelProps: {
+        id: string;
+        role: "group";
+        "aria-labelledby": string;
+        "aria-hidden": () => boolean;
+        hidden: () => "until-found" | undefined;
+    };
+}
+export declare const disclosureTriggerId: (id: string) => string;
+export declare const disclosurePanelId: (id: string) => string;
+/** `onPress` of the button: toggles for non-keyboard presses. */
+export declare function disclosureButtonPress(e: PressEvent, props: AriaDisclosureProps, state: DisclosureState): void;
+/** `onPressStart` of the button: keyboard presses toggle on key down. */
+export declare function disclosureButtonPressStart(e: PressEvent, props: AriaDisclosureProps, state: DisclosureState): void;
+/** `beforematch` on the panel (find-in-page hit a collapsed panel): expand, restore `until-found` next frame. */
+export declare function disclosurePanelBeforeMatch(e: Event, _props: AriaDisclosureProps, state: DisclosureState): void;
+/** Server style of the panel: the size variables of the initial state. */
+export declare const disclosurePanelStyle: (isExpanded: boolean) => string;
+/**
+ * The panel's `hidden` value (binding): on the server / first read the static value; in the browser on
+ * each change the upstream layout effect (size variables in px, wait for the animations, then `auto` /
+ * `hidden="until-found"`).
+ */
+export declare function disclosurePanelHidden(state: DisclosureState, panelRef: () => HTMLElement | null | undefined): "until-found" | undefined;
+/**
+ * Provides the behavior and accessibility implementation for a disclosure component
+ * (react-aria `useDisclosure`).
+ */
+export declare function disclosureProps(props: AriaDisclosureProps, state: DisclosureState): DisclosureAria;

package/disclosure/behaviour.jsx

@@ -0,0 +1,128 @@
+// Ported from react-aria disclosure/useDisclosure.ts (packages/react-aria/src/disclosure), Apache-2.0, © Adobe.
+//
+// Rivet:
+// - `useDisclosure(props, state, ref)` → `disclosureProps(props, state)` returning `{ buttonProps, panelProps }`
+//   (RA keys); reactive values are accessors (bind them). Handlers are free functions
+//   (`disclosureButtonPress`, `disclosureButtonPressStart`, `disclosurePanelBeforeMatch`) for inline arrows.
+// - Ids derive from `props.id` (`<id>-trigger`, `<id>-panel`) instead of `useId`, so they are stable
+//   across server render and resume.
+// - The layout effect (hidden + `--disclosure-panel-width/height` + animation wait) runs inside the
+//   panel's `hidden` binding (`disclosurePanelHidden`): the server renders the final value
+//   (`hidden="until-found"` when collapsed, which unsupporting browsers treat as `hidden`), the browser
+//   runs it only on a change, so nothing runs at load.
+// Deviation: upstream SSR renders boolean `hidden` and switches to `until-found` in a layout effect; Rivet's
+// binding returns `until-found` from the start and every target writes the keyword verbatim (server
+// `template.ts`, compiler literals `html.rs`, DOM v1 / v2), so the server HTML is already `hidden="until-found"`.
+import { untrack } from "@rivetjs/reactivity";
+import { toggleDisclosure } from "../state/disclosure.js";
+export const disclosureTriggerId = (id) => id + "-trigger";
+export const disclosurePanelId = (id) => id + "-panel";
+const disabledNow = (props) => !!(typeof props.isDisabled === "function" ? props.isDisabled() : props.isDisabled);
+/** `onPress` of the button: toggles for non-keyboard presses. */
+export function disclosureButtonPress(e, props, state) {
+    if (!disabledNow(props) && e.pointerType !== "keyboard")
+        toggleDisclosure(state);
+}
+/** `onPressStart` of the button: keyboard presses toggle on key down. */
+export function disclosureButtonPressStart(e, props, state) {
+    if (e.pointerType === "keyboard" && !disabledNow(props))
+        toggleDisclosure(state);
+}
+// Pending "restore until-found" frames, by panel (upstream `raf` ref).
+const frames = new WeakMap();
+// Last expanded value the browser applied, by panel (upstream `isExpandedRef`).
+const applied = new WeakMap();
+/** `beforematch` on the panel (find-in-page hit a collapsed panel): expand, restore `until-found` next frame. */
+export function disclosurePanelBeforeMatch(e, _props, state) {
+    const panel = e.currentTarget;
+    if (!panel)
+        return;
+    // Wait a frame to revert browser's removal of hidden attribute.
+    frames.set(panel, requestAnimationFrame(() => panel.setAttribute("hidden", "until-found")));
+    toggleDisclosure(state);
+}
+const setSize = (panel, width, height) => {
+    panel.style.setProperty("--disclosure-panel-width", width);
+    panel.style.setProperty("--disclosure-panel-height", height);
+};
+/** Server style of the panel: the size variables of the initial state. */
+export const disclosurePanelStyle = (isExpanded) => isExpanded ? "--disclosure-panel-width:auto;--disclosure-panel-height:auto" : "--disclosure-panel-width:0px;--disclosure-panel-height:0px";
+/**
+ * The panel's `hidden` value (binding): on the server / first read the static value; in the browser on
+ * each change the upstream layout effect (size variables in px, wait for the animations, then `auto` /
+ * `hidden="until-found"`).
+ */
+export function disclosurePanelHidden(state, panelRef) {
+    const isExpanded = state.isExpanded();
+    const value = isExpanded ? undefined : "until-found";
+    // Server render / first read: no element yet.
+    const panel = untrack(panelRef);
+    if (!panel)
+        return value;
+    // Cancel any pending RAF to prevent stale updates.
+    const frame = frames.get(panel);
+    if (frame !== undefined) {
+        cancelAnimationFrame(frame);
+        frames.delete(panel);
+    }
+    const previous = applied.has(panel) ? applied.get(panel) : !panel.hasAttribute("hidden");
+    applied.set(panel, isExpanded);
+    if (typeof panel.getAnimations !== "function") {
+        // Without animation support (and in tests), set attributes without animation.
+        setSize(panel, isExpanded ? "auto" : "0px", isExpanded ? "auto" : "0px");
+        return value;
+    }
+    if (isExpanded === previous)
+        return value;
+    if (isExpanded) {
+        panel.removeAttribute("hidden");
+        // Set the width and height as pixels so they can be animated.
+        setSize(panel, panel.scrollWidth + "px", panel.scrollHeight + "px");
+        Promise.all(panel.getAnimations().map((a) => a.finished))
+            // After the animations complete, switch back to auto so the content can resize.
+            .then(() => untrack(state.isExpanded) && setSize(panel, "auto", "auto"))
+            .catch(() => { });
+        return undefined;
+    }
+    setSize(panel, panel.scrollWidth + "px", panel.scrollHeight + "px");
+    // Force style re-calculation to trigger animations.
+    void panel.ownerDocument.defaultView?.getComputedStyle(panel).height;
+    // Animate to zero size.
+    setSize(panel, "0px", "0px");
+    const animations = panel.getAnimations();
+    if (!animations.length)
+        return value;
+    // Wait for animations to apply the hidden attribute.
+    Promise.all(animations.map((a) => a.finished))
+        .then(() => !untrack(state.isExpanded) && panel.setAttribute("hidden", "until-found"))
+        .catch(() => { });
+    return undefined;
+}
+/**
+ * Provides the behavior and accessibility implementation for a disclosure component
+ * (react-aria `useDisclosure`).
+ */
+export function disclosureProps(props, state) {
+    const { isDisabled = false } = props;
+    const triggerId = disclosureTriggerId(props.id);
+    const panelId = disclosurePanelId(props.id);
+    const panelRef = props.panelRef ?? (() => null);
+    return {
+        buttonProps: {
+            id: triggerId,
+            "aria-expanded": () => state.isExpanded(),
+            "aria-controls": panelId,
+            isDisabled,
+            onPress: (e) => disclosureButtonPress(e, props, state),
+            onPressStart: (e) => disclosureButtonPressStart(e, props, state),
+        },
+        panelProps: {
+            id: panelId,
+            // This can be overridden at the panel element level.
+            role: "group",
+            "aria-labelledby": triggerId,
+            "aria-hidden": () => !state.isExpanded(),
+            hidden: () => disclosurePanelHidden(state, panelRef),
+        },
+    };
+}

package/disclosure/details.d.ts

@@ -0,0 +1,21 @@
+import type { Content } from "@rivetjs/runtime/jsx-runtime";
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+/** Global DOM events / attributes go on the `<details>` root. */
+export interface DetailsDisclosureProps extends GlobalDOMAttributes<HTMLDetailsElement> {
+    /** The `<summary>` content. */
+    title: Content;
+    /** Whether the disclosure starts open. */
+    defaultExpanded?: boolean;
+    /** Exclusive accordion: at most one open disclosure per group name (native `name`). */
+    group?: string;
+    id?: string;
+    /** @default 'rv-DetailsDisclosure' */
+    class?: string;
+    /** @default 'rv-DetailsDisclosure-summary' */
+    summaryClass?: string;
+    /** @default 'rv-DetailsDisclosure-panel' */
+    panelClass?: string;
+    children?: Content;
+}
+/** A disclosure on native `<details>` (no JavaScript). */
+export declare function DetailsDisclosure(props: DetailsDisclosureProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/disclosure/details.jsx

@@ -0,0 +1,14 @@
+import { globalDOMProps } from "../utils/dom-props.js";
+/** A disclosure on native `<details>` (no JavaScript). */
+export function DetailsDisclosure(props) {
+    const dom = globalDOMProps(props);
+    const idProp = props.id;
+    const className = props.class;
+    const group = props.group;
+    const defaultExpanded = props.defaultExpanded;
+    const summaryClass = props.summaryClass ?? "rv-DetailsDisclosure-summary", panelClass = props.panelClass ?? "rv-DetailsDisclosure-panel";
+    return (<details {...dom} id={idProp} class={className ?? "rv-DetailsDisclosure"} name={group} open={defaultExpanded}>
+      <summary class={summaryClass}>{props.title}</summary>
+      <div class={panelClass}>{props.children}</div>
+    </details>);
+}

package/disclosure/index.d.ts

@@ -0,0 +1,92 @@
+import { type Signal } from "@rivetjs/reactivity";
+import type { Content } from "@rivetjs/runtime/jsx-runtime";
+import { type ClassNameOrFunction, type ContextValue, type RefValue, type SlotProps, type StyleOrFunction } from "../slots/index.jsx";
+import { type DOMRenderProps } from "../utils/render.js";
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+import { allowsMultiple, createDisclosureGroupState, createDisclosureState, closeAll, openAll, type DisclosureGroupProps as StatelyDisclosureGroupProps, type DisclosureGroupState, type DisclosureState, type Key } from "../state/disclosure.js";
+export type { DisclosureGroupState, DisclosureState, Key };
+export { allowsMultiple, createDisclosureGroupState, createDisclosureState, openAll, closeAll };
+export { DetailsDisclosure, type DetailsDisclosureProps } from "./details.jsx";
+export interface DisclosureGroupRenderProps {
+    /** Whether the disclosure group is disabled. @selector [data-disabled] */
+    isDisabled: boolean;
+    /** State of the disclosure group. */
+    state: DisclosureGroupState;
+}
+export interface DisclosureGroupProps extends StatelyDisclosureGroupProps, SlotProps, DOMRenderProps<"div", DisclosureGroupRenderProps>, Omit<GlobalDOMAttributes<HTMLDivElement>, "style"> {
+    /** The CSS class for the element. A function may be provided to compute the class based on component state. @default 'rv-DisclosureGroup' */
+    class?: ClassNameOrFunction<DisclosureGroupRenderProps>;
+    style?: StyleOrFunction<DisclosureGroupRenderProps>;
+    children?: Content | ((values: DisclosureGroupRenderProps & {
+        defaultChildren: Content | undefined;
+    }) => Content);
+    id?: string;
+    /** Rivet (Angular CDK accordion extra): an existing group state, e.g. for `openAll` / `closeAll` from outside the group. */
+    state?: DisclosureGroupState;
+    ref?: RefValue<HTMLDivElement>;
+}
+/** RAC `DisclosureGroupStateContext`. */
+export declare const DisclosureGroupStateContext: import("@rivetjs/reactivity").Context<DisclosureGroupState | null>;
+/** A DisclosureGroup is a grouping of related disclosures, sometimes called an accordion (RAC `DisclosureGroup`). */
+export declare function DisclosureGroup(props: DisclosureGroupProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface DisclosureRenderProps {
+    /** Whether the disclosure is expanded. @selector [data-expanded] */
+    isExpanded: () => boolean;
+    /** Whether the disclosure has keyboard focus. @selector [data-focus-visible-within] */
+    isFocusVisibleWithin: () => boolean;
+    /** Whether the disclosure is disabled. @selector [data-disabled] */
+    isDisabled: boolean;
+    /** State of the disclosure. */
+    state: DisclosureState;
+}
+export interface DisclosureProps extends SlotProps, DOMRenderProps<"div", DisclosureRenderProps>, Omit<GlobalDOMAttributes<HTMLDivElement>, "style" | "id"> {
+    /** An id for the disclosure when used within a DisclosureGroup, matching the id used in `expandedKeys`. */
+    id?: Key;
+    /** Whether the disclosure is disabled. */
+    isDisabled?: boolean;
+    /** Whether the disclosure is expanded (controlled): a plain value or a two-way Signal. */
+    isExpanded?: boolean | Signal<boolean>;
+    /** Whether the disclosure is expanded by default (uncontrolled). */
+    defaultExpanded?: boolean;
+    /** Handler that is called when the disclosure's expanded state changes. */
+    onExpandedChange?: (isExpanded: boolean) => void;
+    /** Rivet (Angular CDK accordion item `opened`): called after the disclosure expands. */
+    onOpened?: () => void;
+    /** Rivet (Angular CDK accordion item `closed`): called after the disclosure collapses (also when the group collapses it). */
+    onClosed?: () => void;
+    /** Rivet (Angular CDK accordion item `destroyed`): called when the disclosure is removed (client-rendered). */
+    onDestroyed?: () => void;
+    /** The CSS class for the element. A function may be provided to compute the class based on component state. @default 'rv-Disclosure' */
+    class?: ClassNameOrFunction<DisclosureRenderProps>;
+    style?: StyleOrFunction<DisclosureRenderProps>;
+    children?: Content | ((values: DisclosureRenderProps & {
+        defaultChildren: Content | undefined;
+    }) => Content);
+    ref?: RefValue<HTMLDivElement>;
+}
+/** RAC `DisclosureContext`. */
+export declare const DisclosureContext: import("@rivetjs/reactivity").Context<ContextValue<DisclosureProps, HTMLDivElement>>;
+/** RAC `DisclosureStateContext`. */
+export declare const DisclosureStateContext: import("@rivetjs/reactivity").Context<DisclosureState | null>;
+/** A disclosure is a collapsible section of content (RAC `Disclosure`). */
+export declare function Disclosure(inProps: DisclosureProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface DisclosurePanelRenderProps {
+    /** Whether keyboard focus is within the disclosure panel. @selector [data-focus-visible-within] */
+    isFocusVisibleWithin: () => boolean;
+}
+export interface DisclosurePanelProps extends DOMRenderProps<"div", DisclosurePanelRenderProps>, Omit<GlobalDOMAttributes<HTMLDivElement>, "style"> {
+    /** The accessibility role for the disclosure's panel. @default 'group' */
+    role?: "group" | "region";
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    /** The CSS class for the element. @default 'rv-DisclosurePanel' */
+    class?: ClassNameOrFunction<DisclosurePanelRenderProps>;
+    style?: StyleOrFunction<DisclosurePanelRenderProps>;
+    children?: Content | ((values: DisclosurePanelRenderProps & {
+        defaultChildren: Content | undefined;
+    }) => Content);
+    ref?: RefValue<HTMLDivElement>;
+}
+/** A DisclosurePanel provides the content for a disclosure (RAC `DisclosurePanel`). */
+export declare function DisclosurePanel(props: DisclosurePanelProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;