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

package/tag-group/index.jsx

@@ -0,0 +1,565 @@
+// Ported from react-aria-components (src/TagGroup.tsx), Apache-2.0, © Adobe.
+//
+// TagGroup, TagList, Tag + contexts: a focusable list of labels, categories, keywords, filters or
+// other items with keyboard navigation (horizontal, RTL), selection, actions, links and removal
+// (`onRemove`, Delete / Backspace, a `<Button slot="remove">` per tag), on the @react-aria/tag port
+// (`./behaviour.ts`) over the @react-aria/gridlist port (`../grid-list/behaviour.ts`).
+//
+// Rivet:
+// - B5 LIVE collection mode, as GridList: the tags render in place (`data-key`), handlers read the
+//   collection back from the TagList's DOM per event; resumed pages need no item model.
+// - TagGroup owns the list state (`createListState`) and provides it to TagList / Tag through
+//   `TagGroupInternalContext` (RAC: `ListStateContext` + `TagListContext` gridProps + useTagGroup's
+//   `hookData` for `onRemove`). `TagListContext` is the public ContextValue of TagList's own props.
+// - Render props are accessors (`class={({ isSelected }) => (isSelected() ? "on" : "")}`); hover /
+//   focus-visible / pressed states are written on the element by the handlers.
+// - `className` → `class` (default `rv-TagGroup`, `rv-TagList`, `rv-Tag`).
+// - After the items change, a removed focused tag hands focus to the next / previous enabled tag, or the
+//   TagList when none is left (react-stately useFocusedKeyReset + react-aria focus effects;
+//   `gridListItemsChanged`).
+// Deviation: `isEmpty` (role group, empty state) is known for `items` collections and, when
+//   `renderEmptyState` is set, for static children (built with `collectionOf`); other static children
+//   count as non-empty.
+// Deviation: the remove description (`aria-describedby`, keyboard modality) is attached while the tag
+//   has focus (see `./behaviour.ts`).
+// `render` (RAC DOMRenderProps) on TagGroup / TagList / Tag: given, the attributes object goes to `render(attrs, renderProps)` instead of the default `<div>`. The SharedElementTransition scope is a `SharedElementContext` provider entry.
+// Integration points: `SelectableCollectionContext` filtering (Autocomplete) — rows the `filter` rejects do
+//   not render; `ListStateContext` — B5 ListBox.
+import { computed, createContext, signal, untrack, useContext } from "@rivetjs/reactivity";
+import { Show, clientEffect, ref as createRef } from "@rivetjs/runtime/dom";
+import { buildCollection, ItemNode } from "../collections/base.js";
+import { Collection, CollectionRendererContext, DefaultCollectionRenderer, collectionOf, createLeafComponent, } from "../collections/components.jsx";
+import { createListState, listSelectionManager } from "../collections/list-state.js";
+import {} from "../utils/render.js";
+import { globalDOMProps } from "../utils/dom-props.js";
+import { dataBool, focusStateBlur, focusStateFocus, hoverStateEnter, hoverStateLeave, setDataAttr, } from "../utils/data-attrs.jsx";
+import { focusRingBlur, focusRingFocus } from "../focus/focus-ring.jsx";
+import { useRouter } from "../utils/links.jsx";
+import { useLocale } from "../i18n/index.js";
+import { createId } from "../utils/id.js";
+import { Provider, contextProps, createSlot, createSlotId, mergeRefValues, renderProps as resolveRenderProps, resumableContext, slotIdRef, } from "../slots/index.jsx";
+import { ButtonContext } from "../button/index.jsx";
+import { LabelContext } from "../label/index.jsx";
+import { TextContext } from "../text/index.jsx";
+import { SelectionIndicatorContext } from "../selection-indicator/context.js";
+import { SharedElementContext } from "../shared-element-transition/transition.jsx";
+import { SelectableCollectionContext } from "../autocomplete/contexts.js";
+import { gridListBlur, gridListFocus, gridListHighlightDescription, gridListItemClick, gridListItemDoubleClick, gridListItemDragStart, gridListItemFocus, gridListItemKeyUp, gridListItemPointerCancel, gridListItemPointerDown, gridListItemPointerUp, gridListItemsChanged, gridListKeyDown, gridListKeyDownCapture, gridListMouseDown, listStateView, } from "../grid-list/behaviour.js";
+import { eventNode, isFn, ringOf, rowCollection, rowSpec } from "../grid-list/row.js";
+import { tagBlur, tagFocus, tagGroupKeyboardDelegate, tagGroupOptions, tagGroupProps, tagKeyDown, tagProps, tagRemove, } from "./behaviour.js";
+import { hasLive, isLive, liveClass, liveKeys } from "../utils/live.jsx";
+import { liveRenderProps } from "../slots/index.jsx";
+/** RAC `TagGroupContext`. */
+export const TagGroupContext = resumableContext(createContext(null, { id: "rv-tag-group" }));
+/** The TagGroup a TagList / Tag renders in (null outside one). */
+export const TagGroupInternalContext = resumableContext(createContext(null, { id: "rv-tag-group-internal" }));
+/** A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal (RAC `TagGroup`). */
+export function TagGroup(inProps) {
+    const [ownProps, ref] = contextProps(inProps, inProps.ref, TagGroupContext);
+    // RAC TagGroupInner: an Autocomplete passes its collection props (filter).
+    const [props] = contextProps(ownProps, undefined, SelectableCollectionContext);
+    // Resumable closures / bags read locals only (a `props.x` read captures the whole props object).
+    const { onAction, shouldSelectOnPressUp, escapeKeyBehavior, onRemove, filter, children } = props;
+    const ariaLabel = props["aria-label"], ownLabelledBy = props["aria-labelledby"], ownDescribedBy = props["aria-describedby"], ariaDetails = props["aria-details"];
+    const { locale, direction } = useLocale();
+    const state = createListState({
+        selectionMode: props.selectionMode,
+        selectionBehavior: props.selectionBehavior,
+        // Live props: a controlled `selectedKeys={keys()}` stays live (accessor; never written).
+        selectedKeys: liveKeys(props, "selectedKeys"),
+        defaultSelectedKeys: props.defaultSelectedKeys,
+        onSelectionChange: props.onSelectionChange,
+        disabledKeys: props.disabledKeys,
+        disabledBehavior: props.disabledBehavior,
+        disallowEmptySelection: props.disallowEmptySelection,
+        allowDuplicateSelectionEvents: props.allowDuplicateSelectionEvents,
+    });
+    const shared = { id: state.id, onAction, linkBehavior: "override", keyboardNavigationBehavior: "tab", shouldSelectOnPressUp };
+    // react-aria useField (labelElementType span) + useSlot: the label id while a Label renders.
+    const [labelRef, hasLabel] = createSlot(!ariaLabel && !ownLabelledBy);
+    const labelId = createId();
+    const descriptionId = createSlotId(state.id + "-description");
+    const errorId = createSlotId(state.id + "-error");
+    const labelledBy = () => [hasLabel() ? labelId : undefined, ownLabelledBy].filter(Boolean).join(" ") || undefined;
+    const describedBy = () => [slotIdRef(descriptionId), slotIdRef(errorId), ownDescribedBy].filter(Boolean).join(" ") || undefined;
+    const internal = {
+        state,
+        shared,
+        locale,
+        direction,
+        labelledBy,
+        describedBy,
+        ariaLabel,
+        ariaDetails,
+        escapeKeyBehavior,
+        onRemove,
+        filter,
+    };
+    const dom = globalDOMProps(props, ["style"]);
+    // Live props (P5): a live `class` is an accessor the spread binds (typed as the static string).
+    const className = (isLive(props, "class") ? liveClass(props, "rv-TagGroup") : (props.class ?? "rv-TagGroup"));
+    dom.class = className;
+    const style = props.style;
+    const slot = props.slot || undefined;
+    if (props.render) {
+        const attrs = {
+            ...dom,
+            ref: ref,
+            id: props.id,
+            slot,
+            class: className,
+            style: style,
+            children: () => (<Provider values={[
+                    [LabelContext, { id: labelId, elementType: "span", ref: labelRef }],
+                    [TagGroupInternalContext, internal],
+                    [TextContext, { slots: { description: { id: descriptionId }, errorMessage: { id: errorId } } }],
+                ]}>
+          {children}
+        </Provider>),
+        };
+        return props.render(attrs, undefined);
+    }
+    return (<div {...dom} ref={ref} id={props.id} slot={slot} style={style}>
+      <Provider values={[
+            [LabelContext, { id: labelId, elementType: "span", ref: labelRef }],
+            [TagGroupInternalContext, internal],
+            [TextContext, { slots: { description: { id: descriptionId }, errorMessage: { id: errorId } } }],
+        ]}>
+        {children}
+      </Provider>
+    </div>);
+}
+/** RAC `TagListContext` (the TagList's own props; RAC also passes useTagGroup's gridProps through it). */
+export const TagListContext = resumableContext(createContext(null, { id: "rv-tag-list" }));
+/** A tag list is a container for tags within a TagGroup (RAC `TagList`). */
+export function TagList(inProps) {
+    const ctx = useContext(TagGroupInternalContext);
+    const [props, ref] = contextProps(inProps, inProps.ref, TagListContext);
+    const { items, children, idScope, renderEmptyState, onMouseDown } = props;
+    // RAC: outside a TagGroup (its collection build pass) a TagList is a plain Collection.
+    if (!ctx)
+        return (<Collection items={items} idScope={idScope}>
+        {children}
+      </Collection>);
+    const { state, shared, locale, direction, labelledBy, describedBy, ariaLabel, ariaDetails, escapeKeyBehavior } = ctx;
+    const renderer = useContext(CollectionRendererContext);
+    // Resumable: the lazy collection slot captures `customRenderer` (undefined for the default renderer).
+    const customRenderer = renderer === DefaultCollectionRenderer ? undefined : renderer;
+    const sharedElements = {};
+    const descriptionId = state.id + "-highlight";
+    const options = tagGroupOptions({
+        id: state.id,
+        "aria-label": ariaLabel,
+        "aria-details": ariaDetails,
+        escapeKeyBehavior,
+        onAction: shared.onAction,
+        shouldSelectOnPressUp: shared.shouldSelectOnPressUp,
+        direction,
+        locale,
+        orientation: "horizontal",
+        descriptionId,
+    });
+    const view = () => listStateView(state, shared);
+    const eventOptions = (v, el) => ({
+        ...options,
+        "aria-labelledby": labelledBy(),
+        "aria-describedby": describedBy(),
+        keyboardDelegate: tagGroupKeyboardDelegate(v, el, direction),
+    });
+    const content = () => (<Collection items={items} idScope={idScope}>
+      {children}
+    </Collection>);
+    const itemsOf = items;
+    const isEmpty = itemsOf != null
+        ? () => {
+            const list = typeof itemsOf === "function" ? itemsOf() : itemsOf;
+            for (const _ of list)
+                return false;
+            return true;
+        }
+        : renderEmptyState
+            ? (() => {
+                const built = collectionOf(content);
+                return () => built().size === 0;
+            })()
+            : () => false;
+    const version = itemsOf != null ? (typeof itemsOf === "function" ? itemsOf : () => itemsOf) : () => null;
+    const focusWithin = signal(false);
+    const wantsStates = isFn(props.class) || isFn(props.style) || !!renderEmptyState;
+    const focused = wantsStates ? signal(false) : undefined;
+    const focusVisible = wantsStates ? signal(false) : undefined;
+    const ring = { states: wantsStates ? { isFocused: focused, isFocusVisible: focusVisible } : undefined };
+    const values = {
+        isEmpty,
+        isFocused: () => !!focused?.(),
+        isFocusVisible: () => !!focusVisible?.(),
+        state,
+    };
+    const rp = untrack(() => resolveRenderProps({ class: props.class, style: props.style, values, defaultClassName: "rv-TagList" }, hasLive(props) ? liveRenderProps(props) : undefined));
+    // Grid attributes (reactive): the render view only needs the size and the focused key.
+    const gridAttrs = computed(() => {
+        const empty = isEmpty();
+        const collection = buildCollection([]);
+        const v = {
+            collection: { ...collection, size: empty ? 0 : 1 },
+            selectionManager: listSelectionManager(state, collection),
+            disabledKeys: state.disabledKeys,
+            list: shared,
+        };
+        return tagGroupProps({ ...options, "aria-labelledby": labelledBy(), "aria-describedby": describedBy() }, v, focusWithin());
+    });
+    const attr = (name) => gridAttrs()[name];
+    const highlight = () => {
+        const collection = buildCollection([]);
+        return gridListHighlightDescription(options, {
+            collection,
+            selectionManager: listSelectionManager(state, collection),
+            disabledKeys: state.disabledKeys,
+            list: shared,
+        });
+    };
+    const dom = globalDOMProps(props, ["onMouseDown", "style"]);
+    const gridEl = createRef();
+    const rootRef = mergeRefValues(ref, gridEl);
+    // After the items changed: focused-key reset + focus restoration (useListState / useTagGroup effects).
+    const cache = {};
+    clientEffect(() => {
+        version();
+        const el = gridEl();
+        if (!el)
+            return;
+        queueMicrotask(() => (cache.items = gridListItemsChanged(state, el, cache.items)));
+    });
+    const tagDescription = (<Show when={() => highlight() != null}>
+      {() => (<div id={descriptionId} hidden>
+          {highlight()}
+        </div>)}
+    </Show>);
+    if (props.render) {
+        const attrs = {
+            ...dom,
+            ref: rootRef,
+            id: state.id,
+            role: () => attr("role"),
+            class: () => rp.class(),
+            style: () => rp.style(),
+            "aria-label": () => attr("aria-label"),
+            "aria-labelledby": () => attr("aria-labelledby"),
+            "aria-describedby": () => attr("aria-describedby"),
+            "aria-details": () => attr("aria-details"),
+            "aria-multiselectable": () => attr("aria-multiselectable"),
+            "aria-atomic": "false",
+            "aria-relevant": "additions",
+            "aria-live": () => attr("aria-live"),
+            tabindex: () => attr("tabIndex"),
+            "data-empty": () => dataBool(isEmpty()),
+            onKeyDownCapture: (e) => {
+                const v = view();
+                gridListKeyDownCapture(e, eventOptions(v, e.currentTarget), v);
+            },
+            onKeyDown: (e) => {
+                const v = view();
+                gridListKeyDown(e, eventOptions(v, e.currentTarget), v);
+            },
+            onFocusIn: (e) => {
+                const v = view();
+                gridListFocus(e, eventOptions(v, e.currentTarget), v);
+                focusWithin.set(true);
+            },
+            onFocusOut: (e) => {
+                const v = view();
+                gridListBlur(e, eventOptions(v, e.currentTarget), v);
+                const next = e.relatedTarget;
+                if (!next || !e.currentTarget.contains(next))
+                    focusWithin.set(false);
+            },
+            onMouseDown: (e) => {
+                const v = view();
+                gridListMouseDown(e, eventOptions(v, e.currentTarget), v);
+                onMouseDown?.(e);
+            },
+            onFocus: (e) => focusStateFocus(ring, e),
+            onBlur: (e) => focusStateBlur(ring, e),
+            children: () => (<Provider values={[[SharedElementContext, sharedElements]]}>
+          <Show when={() => !(renderEmptyState && isEmpty())}>
+            {() => (customRenderer ?? DefaultCollectionRenderer).CollectionRoot({ collection: null, content, idScope })}
+          </Show>
+          <Show when={() => !!renderEmptyState && isEmpty()}>{() => renderEmptyState(values)}</Show>
+        </Provider>),
+        };
+        return (<>
+        {props.render(attrs, values)}
+        {tagDescription}
+      </>);
+    }
+    return (<>
+      <div {...dom} ref={rootRef} id={state.id} role={attr("role")} class={rp.class()} style={rp.style()} aria-label={attr("aria-label")} aria-labelledby={attr("aria-labelledby")} aria-describedby={attr("aria-describedby")} aria-details={attr("aria-details")} aria-multiselectable={attr("aria-multiselectable")} aria-atomic="false" aria-relevant="additions" aria-live={attr("aria-live")} tabIndex={attr("tabIndex")} data-empty={dataBool(isEmpty())} onKeyDownCapture={(e) => {
+            const v = view();
+            gridListKeyDownCapture(e, eventOptions(v, e.currentTarget), v);
+        }} onKeyDown={(e) => {
+            const v = view();
+            gridListKeyDown(e, eventOptions(v, e.currentTarget), v);
+        }} onFocusIn={(e) => {
+            const v = view();
+            gridListFocus(e, eventOptions(v, e.currentTarget), v);
+            focusWithin.set(true);
+        }} onFocusOut={(e) => {
+            const v = view();
+            gridListBlur(e, eventOptions(v, e.currentTarget), v);
+            // react-aria useFocusWithin: only when focus leaves the list.
+            const next = e.relatedTarget;
+            if (!next || !e.currentTarget.contains(next))
+                focusWithin.set(false);
+        }} onMouseDown={(e) => {
+            const v = view();
+            gridListMouseDown(e, eventOptions(v, e.currentTarget), v);
+            onMouseDown?.(e);
+        }} onFocus={(e) => focusStateFocus(ring, e)} onBlur={(e) => focusStateBlur(ring, e)}>
+        {/* RAC: the tags share one SharedElementTransition scope (a SelectionIndicator animates between them). */}
+        <Provider values={[[SharedElementContext, sharedElements]]}>
+          <Show when={() => !(renderEmptyState && isEmpty())}>
+            {() => (customRenderer ?? DefaultCollectionRenderer).CollectionRoot({ collection: null, content, idScope })}
+          </Show>
+          <Show when={() => !!renderEmptyState && isEmpty()}>{() => renderEmptyState(values)}</Show>
+        </Provider>
+      </div>
+      <Show when={() => highlight() != null}>
+        {() => (<div id={descriptionId} hidden>
+            {highlight()}
+          </div>)}
+      </Show>
+    </>);
+}
+const TAG_OWNED = ["onPointerDown", "onPointerUp", "onPointerCancel", "onClick", "onDblClick", "onPointerEnter", "onPointerLeave", "style", "id"];
+const isDev = () => typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
+/** A Tag is an individual item within a TagList (RAC `Tag`). */
+export const Tag = /*#__PURE__*/ createLeafComponent(ItemNode, function Tag(props, forwardedRef, item) {
+    const ctx = useContext(TagGroupInternalContext);
+    if (!ctx)
+        throw new Error("Tag must be rendered inside a TagGroup.");
+    const { state, shared, locale, direction, onRemove } = ctx;
+    const key = item.key;
+    const spec = rowSpec(key, item, props);
+    const removeButtonId = createId();
+    const router = useRouter();
+    if (!item.textValue && isDev() && typeof document !== "undefined")
+        console.warn("A `textValue` prop is required for <Tag> elements with non-plain text children for accessibility.");
+    // Resumable closures / bags read locals only (a `props.x` read captures the whole props object).
+    const { onHoverStart, onHoverEnd, onHoverChange, onFocus, onBlur, onFocusChange } = props;
+    const itemOptions = (node) => ({ node, isVirtualized: false, router, locale, direction, onRemove, removeButtonId });
+    const aria = computed(() => {
+        const collection = rowCollection(spec);
+        const v = {
+            collection,
+            selectionManager: listSelectionManager(state, collection),
+            disabledKeys: state.disabledKeys,
+            list: shared,
+        };
+        return {
+            ...tagProps(itemOptions(collection.getItem(key)), v),
+            selectionMode: v.selectionManager.selectionMode,
+            selectionBehavior: v.selectionManager.selectionBehavior,
+        };
+    });
+    // Render props read the selection alone (not the whole `aria` bag, which also follows focus / press): a resumed
+    // render-function child is a region re-created on the first change of any signal it read, so reading `aria()`
+    // there re-created the content (and its pressed remove button) on pointerdown.
+    const selected = computed(() => listSelectionManager(state, rowCollection(spec)).isSelected(key));
+    const view = () => listStateView(state, shared);
+    // Resumable: a local const arrow called from the inline JSX handlers (no factory-made closures).
+    const fire = (handler, e) => {
+        const v = view();
+        handler(e, itemOptions(eventNode(v, spec)), v);
+    };
+    const wantsStates = isFn(props.class) || isFn(props.style) || isFn(props.children);
+    const hovered = wantsStates ? signal(false) : undefined;
+    const pressed = wantsStates ? signal(false) : undefined;
+    const focusVisible = wantsStates ? signal(false) : undefined;
+    const hover = {
+        isDisabled: () => !aria().allowsSelection && !aria().hasAction,
+        onHoverStart,
+        onHoverEnd,
+        onHoverChange,
+        states: wantsStates ? { isHovered: hovered } : undefined,
+    };
+    // RA usePress state (not reactive in selectable-item): mirror it on the row after press events.
+    const syncPressed = (e) => {
+        const el = e.currentTarget;
+        const v = view();
+        const isPressed = tagProps({ ...itemOptions(eventNode(v, spec)), ref: el }, v).isPressed;
+        setDataAttr(el, "data-pressed", isPressed);
+        pressed?.set(isPressed);
+    };
+    const allowsRemoving = !!onRemove;
+    const values = {
+        id: key,
+        isHovered: () => !!hovered?.(),
+        isPressed: () => !!pressed?.(),
+        isSelected: () => selected(),
+        isFocused: () => aria().isFocused,
+        isFocusVisible: () => !!focusVisible?.(),
+        isDisabled: () => aria().isDisabled,
+        selectionMode: untrack(() => aria().selectionMode),
+        selectionBehavior: () => aria().selectionBehavior,
+        allowsRemoving,
+        state,
+    };
+    const rp = untrack(() => resolveRenderProps({ class: props.class, style: props.style, children: props.children, values, defaultClassName: "rv-Tag" }, hasLive(props) ? liveRenderProps(props) : undefined));
+    const row = (name) => aria().rowProps[name];
+    const cell = (name) => aria().gridCellProps[name];
+    const dom = globalDOMProps(props, TAG_OWNED);
+    const { onPointerDown, onPointerUp, onPointerCancel, onDblClick, onPointerEnter, onPointerLeave } = props;
+    const focusEvents = { onRemove, locale, onFocus, onBlur, onFocusChange };
+    const removeButtonProps = {
+        id: removeButtonId,
+        "aria-label": untrack(() => aria().removeButtonProps["aria-label"]),
+        "aria-labelledby": untrack(() => aria().removeButtonProps["aria-labelledby"]),
+        isDisabled: untrack(() => aria().removeButtonProps.isDisabled),
+        onPress: () => tagRemove({ onRemove, node: { key } }),
+    };
+    const renderRow = () => {
+        if (props.render) {
+            const attrs = {
+                ...dom,
+                ref: forwardedRef,
+                id: () => row("id"),
+                role: "row",
+                class: () => rp.class(),
+                style: () => rp.style(),
+                "data-key": () => row("data-key"),
+                "data-key-type": () => row("data-key-type"),
+                "data-collection": state.id,
+                "data-text-value": item.textValue || undefined,
+                tabindex: () => row("tabIndex"),
+                "aria-label": () => row("aria-label"),
+                "aria-labelledby": () => row("aria-labelledby"),
+                "aria-selected": () => (row("aria-selected") === undefined ? undefined : String(row("aria-selected"))),
+                "aria-disabled": () => (row("aria-disabled") ? "true" : undefined),
+                "data-href": () => row("data-href"),
+                "data-target": () => row("data-target"),
+                "data-rel": () => row("data-rel"),
+                "data-download": () => row("data-download"),
+                "data-ping": () => row("data-ping"),
+                "data-referrer-policy": () => row("data-referrer-policy"),
+                "data-selected": () => dataBool(aria().isSelected),
+                "data-disabled": () => dataBool(aria().isDisabled),
+                "data-focused": () => dataBool(aria().isFocused),
+                "data-allows-removing": dataBool(allowsRemoving),
+                "data-selection-mode": () => (aria().selectionMode === "none" ? undefined : aria().selectionMode),
+                onKeyDown: (e) => {
+                    fire(tagKeyDown, e);
+                    syncPressed(e);
+                },
+                onKeyUp: (e) => {
+                    fire(gridListItemKeyUp, e);
+                    syncPressed(e);
+                },
+                onFocusIn: (e) => fire(gridListItemFocus, e),
+                onFocus: (e) => {
+                    focusRingFocus(ringOf(e.currentTarget, false, "data-focus-visible", focusVisible), e);
+                    tagFocus(e, focusEvents);
+                },
+                onBlur: (e) => {
+                    focusRingBlur(ringOf(e.currentTarget, false, "data-focus-visible", focusVisible), e);
+                    tagBlur(e, focusEvents);
+                },
+                onPointerDown: (e) => {
+                    fire(gridListItemPointerDown, e);
+                    syncPressed(e);
+                    onPointerDown?.(e);
+                },
+                onPointerUp: (e) => {
+                    fire(gridListItemPointerUp, e);
+                    syncPressed(e);
+                    onPointerUp?.(e);
+                },
+                onPointerCancel: (e) => {
+                    fire(gridListItemPointerCancel, e);
+                    syncPressed(e);
+                    onPointerCancel?.(e);
+                },
+                onClick: (e) => {
+                    fire(gridListItemClick, e);
+                    syncPressed(e);
+                },
+                onDblClick: (e) => {
+                    fire(gridListItemDoubleClick, e);
+                    onDblClick?.(e);
+                },
+                onDragStart: (e) => fire(gridListItemDragStart, e),
+                onPointerEnter: (e) => {
+                    hoverStateEnter(hover, e);
+                    onPointerEnter?.(e);
+                },
+                onPointerLeave: (e) => {
+                    hoverStateLeave(hover, e);
+                    onPointerLeave?.(e);
+                },
+                children: () => (<div role="gridcell" aria-colindex={1} aria-errormessage={cell("aria-errormessage")} aria-label={cell("aria-label")} style={{ display: "contents" }}>
+            <Provider values={[
+                        [ButtonContext, { slots: { remove: removeButtonProps } }],
+                        [CollectionRendererContext, DefaultCollectionRenderer],
+                        [SelectionIndicatorContext, { isSelected: () => selected() }],
+                    ]}>
+              {rp.children()}
+            </Provider>
+          </div>),
+            };
+            return props.render(attrs, values);
+        }
+        return (<div {...dom} ref={forwardedRef} id={row("id")} role="row" class={rp.class()} style={rp.style()} data-key={row("data-key")} data-key-type={row("data-key-type")} data-collection={state.id} data-text-value={item.textValue || undefined} tabIndex={row("tabIndex")} aria-label={row("aria-label")} aria-labelledby={row("aria-labelledby")} aria-selected={row("aria-selected") === undefined ? undefined : String(row("aria-selected"))} aria-disabled={row("aria-disabled") ? "true" : undefined} data-href={row("data-href")} data-target={row("data-target")} data-rel={row("data-rel")} data-download={row("data-download")} data-ping={row("data-ping")} data-referrer-policy={row("data-referrer-policy")} data-selected={dataBool(aria().isSelected)} data-disabled={dataBool(aria().isDisabled)} data-focused={dataBool(aria().isFocused)} data-allows-removing={dataBool(allowsRemoving)} data-selection-mode={aria().selectionMode === "none" ? undefined : aria().selectionMode} onKeyDown={(e) => {
+                fire(tagKeyDown, e);
+                syncPressed(e);
+            }} onKeyUp={(e) => {
+                fire(gridListItemKeyUp, e);
+                syncPressed(e);
+            }} onFocusIn={(e) => fire(gridListItemFocus, e)} onFocus={(e) => {
+                focusRingFocus(ringOf(e.currentTarget, false, "data-focus-visible", focusVisible), e);
+                tagFocus(e, focusEvents);
+            }} onBlur={(e) => {
+                focusRingBlur(ringOf(e.currentTarget, false, "data-focus-visible", focusVisible), e);
+                tagBlur(e, focusEvents);
+            }} onPointerDown={(e) => {
+                fire(gridListItemPointerDown, e);
+                syncPressed(e);
+                onPointerDown?.(e);
+            }} onPointerUp={(e) => {
+                fire(gridListItemPointerUp, e);
+                syncPressed(e);
+                onPointerUp?.(e);
+            }} onPointerCancel={(e) => {
+                fire(gridListItemPointerCancel, e);
+                syncPressed(e);
+                onPointerCancel?.(e);
+            }} onClick={(e) => {
+                fire(gridListItemClick, e);
+                syncPressed(e);
+            }} onDblClick={(e) => {
+                fire(gridListItemDoubleClick, e);
+                onDblClick?.(e);
+            }} onDragStart={(e) => fire(gridListItemDragStart, e)} onPointerEnter={(e) => {
+                hoverStateEnter(hover, e);
+                onPointerEnter?.(e);
+            }} onPointerLeave={(e) => {
+                hoverStateLeave(hover, e);
+                onPointerLeave?.(e);
+            }}>
+        <div role="gridcell" aria-colindex={1} aria-errormessage={cell("aria-errormessage")} aria-label={cell("aria-label")} style={{ display: "contents" }}>
+          <Provider values={[
+                [ButtonContext, { slots: { remove: removeButtonProps } }],
+                [CollectionRendererContext, DefaultCollectionRenderer],
+                [SelectionIndicatorContext, { isSelected: () => selected() }],
+            ]}>
+            {rp.children()}
+          </Provider>
+        </div>
+      </div>);
+    };
+    const filter = ctx.filter;
+    if (!filter)
+        return renderRow();
+    // Autocomplete filtering (live mode: per tag; RAC UNSTABLE_useFilteredListState).
+    const visible = () => filter(spec.textValue ?? "", rowCollection(spec).getItem(key));
+    // Server: render right away, inside the collection row's resume region (runtime gap: a function child renders after it closed).
+    return <Show when={visible}>{typeof document === "undefined" ? (visible() ? renderRow() : null) : renderRow}</Show>;
+});

package/tag-group/intl.d.ts

@@ -0,0 +1,2 @@
+import type { LocalizedStrings } from "../_adapters/intl.js";
+export declare const strings: LocalizedStrings;

package/tag-group/intl.js

@@ -0,0 +1,36 @@
+export const strings = {
+    "ar-AE": { removeButtonLabel: "إزالة", removeDescription: "اضغط على مفتاح DELETE لإزالة علامة." },
+    "bg-BG": { removeButtonLabel: "Премахване", removeDescription: "Натиснете Delete, за да премахнете маркера." },
+    "cs-CZ": { removeButtonLabel: "Odebrat", removeDescription: "Stisknutím klávesy Delete odeberete značku." },
+    "da-DK": { removeButtonLabel: "Fjern", removeDescription: "Tryk på Slet for at fjerne tag." },
+    "de-DE": { removeButtonLabel: "Entfernen", removeDescription: "Auf „Löschen“ drücken, um das Tag zu entfernen." },
+    "el-GR": { removeButtonLabel: "Κατάργηση", removeDescription: "Πατήστε Διαγραφή για να καταργήσετε την ετικέτα." },
+    "en-US": { removeDescription: "Press Delete to remove tag.", removeButtonLabel: "Remove" },
+    "es-ES": { removeButtonLabel: "Quitar", removeDescription: "Pulse Eliminar para quitar la etiqueta." },
+    "et-EE": { removeButtonLabel: "Eemalda", removeDescription: "Sildi eemaldamiseks vajutage kustutusklahvi Delete." },
+    "fi-FI": { removeButtonLabel: "Poista", removeDescription: "Poista tunniste painamalla Poista-painiketta." },
+    "fr-FR": { removeButtonLabel: "Supprimer", removeDescription: "Appuyez sur Supprimer pour supprimer l’étiquette." },
+    "he-IL": { removeButtonLabel: "הסר", removeDescription: "לחץ על מחק כדי להסיר תג." },
+    "hr-HR": { removeButtonLabel: "Ukloni", removeDescription: "Pritisnite Delete za uklanjanje oznake." },
+    "hu-HU": { removeButtonLabel: "Eltávolítás", removeDescription: "Nyomja meg a Delete billentyűt a címke eltávolításához." },
+    "it-IT": { removeButtonLabel: "Rimuovi", removeDescription: "Premi Elimina per rimuovere il tag." },
+    "ja-JP": { removeButtonLabel: "削除", removeDescription: "タグを削除するには、Delete キーを押します。" },
+    "ko-KR": { removeButtonLabel: "제거", removeDescription: "태그를 제거하려면 Delete 키를 누르십시오." },
+    "lt-LT": { removeButtonLabel: "Pašalinti", removeDescription: "Norėdami pašalinti žymą, paspauskite „Delete“ klavišą." },
+    "lv-LV": { removeButtonLabel: "Noņemt", removeDescription: "Nospiediet Delete [Dzēst], lai noņemtu tagu." },
+    "nb-NO": { removeButtonLabel: "Fjern", removeDescription: "Trykk på Slett for å fjerne taggen." },
+    "nl-NL": { removeButtonLabel: "Verwijderen", removeDescription: "Druk op Verwijderen om de tag te verwijderen." },
+    "pl-PL": { removeButtonLabel: "Usuń", removeDescription: "Naciśnij Usuń, aby usunąć znacznik." },
+    "pt-BR": { removeButtonLabel: "Remover", removeDescription: "Pressione Delete para remover a tag." },
+    "pt-PT": { removeButtonLabel: "Eliminar", removeDescription: "Prima Delete para eliminar a tag." },
+    "ro-RO": { removeButtonLabel: "Îndepărtaţi", removeDescription: "Apăsați pe Delete (Ștergere) pentru a elimina eticheta." },
+    "ru-RU": { removeButtonLabel: "Удалить", removeDescription: "Нажмите DELETE, чтобы удалить тег." },
+    "sk-SK": { removeButtonLabel: "Odstrániť", removeDescription: "Ak chcete odstrániť značku, stlačte kláves Delete." },
+    "sl-SI": { removeButtonLabel: "Odstrani", removeDescription: "Pritisnite Delete, da odstranite oznako." },
+    "sr-SP": { removeButtonLabel: "Ukloni", removeDescription: "Pritisnite Obriši da biste uklonili oznaku." },
+    "sv-SE": { removeButtonLabel: "Ta bort", removeDescription: "Tryck på Radera för att ta bort taggen." },
+    "tr-TR": { removeButtonLabel: "Kaldır", removeDescription: "Etiketi kaldırmak için Sil tuşuna basın." },
+    "uk-UA": { removeButtonLabel: "Вилучити", removeDescription: "Натисніть Delete, щоб вилучити тег." },
+    "zh-CN": { removeButtonLabel: "删除", removeDescription: "按下“删除”以删除标记。" },
+    "zh-TW": { removeButtonLabel: "移除", removeDescription: "按 Delete 鍵以移除標記。" },
+};

package/tailwind.css

@@ -0,0 +1,12 @@
+/* Tailwind v4 variants for Rivet aria's non-ARIA state attributes (zero runtime). Overlay transitions:
+   entering: / exiting: (RAC), data-closed: / data-enter: / data-leave: (Headless UI). ARIA states use
+   Tailwind's built-ins: aria-selected:, aria-pressed:, aria-expanded:, aria-disabled:, open:, … */
+@custom-variant focused (&[data-focused]);
+@custom-variant placement-top (&[data-placement^="top"]);
+@custom-variant placement-bottom (&[data-placement^="bottom"]);
+@custom-variant placement-left (&[data-placement^="left"]);
+@custom-variant placement-right (&[data-placement^="right"]);
+@custom-variant orientation-vertical (&[data-orientation="vertical"]);
+@custom-variant orientation-horizontal (&[data-orientation="horizontal"]);
+@custom-variant entering (&[data-entering]);
+@custom-variant exiting (&[data-exiting]);

package/tests-components/app/src/routes/index.d.ts

@@ -0,0 +1,4 @@
+export declare const head: {
+    title: string;
+};
+export default function Index(): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/tests-components/app/src/routes/index.jsx

@@ -0,0 +1,7 @@
+export const head = { title: "Rivet aria stories" };
+export default function Index() {
+    return (<section>
+      <h1>Rivet aria stories</h1>
+      <p>Resumed pages: no library code runs until you interact.</p>
+    </section>);
+}

package/text/index.d.ts

@@ -0,0 +1,15 @@
+import type { Content } from "@rivetjs/runtime/jsx-runtime";
+import { type DOMRenderProps } from "../utils/render.js";
+import { type ContextValue, type HTMLProps, type RefValue, type SlotProps, type StyleObject } from "../slots/index.jsx";
+export interface TextProps extends HTMLProps<"span">, SlotProps, DOMRenderProps<"span", undefined> {
+    /** @default "rv-Text" */
+    class?: string;
+    style?: StyleObject;
+    /** @default "span" */
+    elementType?: string;
+    ref?: RefValue<HTMLElement>;
+    /** Content; a function (not lazy JSX) is reactive content, rendered in a binding (e.g. a context-provided `children: () => title`). */
+    children?: Content | (() => Content);
+}
+export declare const TextContext: import("@rivetjs/reactivity").Context<ContextValue<TextProps, HTMLElement>>;
+export declare function Text(props: TextProps): unknown;