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

package/bidi/index.d.ts

@@ -0,0 +1,58 @@
+import { type Signal } from "@rivetjs/reactivity";
+export type { Direction } from "../collections/types.js";
+import type { Direction } from "../collections/types.js";
+/** Whether `locale` is written right-to-left (by script / language subtag). */
+export declare const isRtlLocale: (locale: string) => boolean;
+/**
+ * Resolves a raw `dir` value to a direction: case-insensitive `"rtl"` → rtl; `"auto"` → from
+ * `navigator.language` (browser) ; anything else → ltr.
+ */
+export declare function _resolveDirectionality(rawValue: string | null | undefined): Direction;
+/** Angular `Directionality`: the direction of the application or of a `<Dir>` subtree. */
+export interface Directionality {
+    /** The current direction (reactive). */
+    readonly valueSignal: () => Direction;
+    /** The `dir` value as given by the consumer (`"auto"`, `"RTL"`, …); rendered as the `dir` attribute. */
+    readonly rawDir: () => string;
+}
+/** A writable `Directionality` (`createDir`, `documentDirectionality`): `setDir` changes it. */
+export interface DirState extends Directionality {
+    readonly valueSignal: Signal<Direction>;
+    readonly rawDir: Signal<string>;
+}
+/** The current 'ltr' / 'rtl' value of a directionality (Angular `dir.value`). Reads the signal. */
+export declare const directionValue: (dir: Directionality) => Direction;
+/** Minimal document shape read by `documentDirectionality` (tests pass fakes, like Angular's `DIR_DOCUMENT`). */
+export interface DirDocument {
+    body?: {
+        dir?: string;
+    } | null;
+    documentElement?: {
+        dir?: string;
+    } | null;
+}
+/**
+ * The root `Directionality`: `<body dir>`, else `<html dir>`, else ltr (Angular's root service).
+ * Server (no document): ltr.
+ */
+export declare function documentDirectionality(doc?: DirDocument | null | undefined): DirState;
+/**
+ * State of a `[dir]` element (Angular `Dir` directive): `rawDir` keeps the consumer value (rendered
+ * as-is, so `dir="auto"` stays `auto`), `valueSignal` is the normalized direction.
+ */
+export declare function createDir(dir?: Direction | "auto" | string): DirState;
+/**
+ * Set the `dir` input of a `Dir` state (Angular `dir.dir = value`). Returns true when the
+ * normalized direction changed (Angular emits `dirChange` then, once initialized).
+ */
+export declare function setDir(state: DirState, value: Direction | "auto" | string): boolean;
+/** Context through which `<Dir>` provides itself as the `Directionality` of its subtree. */
+export declare const DirectionalityContext: import("@rivetjs/reactivity").Context<Directionality | null>;
+/** Angular `inject(Directionality)`: the closest `<Dir>`, else the document's direction. */
+export declare function injectDirectionality(): Directionality;
+/** Reactive direction accessor for components: closest `<Dir>` value, else the document's. */
+export declare function useDirection(): () => Direction;
+/** Direction at `element`: nearest `dir` attribute, else computed `direction`, else `<html dir>`. Server: "ltr". */
+export declare function direction(element?: Element | null): Direction;
+/** Swap ArrowLeft / ArrowRight in right-to-left text, so handlers can reason in "start" / "end". */
+export declare function logicalKey(key: string, dir: Direction): string;

package/bidi/index.js

@@ -0,0 +1,84 @@
+// Text direction.
+// Ported from angular/components src/cdk/bidi (MIT, © Google LLC): `Directionality`, the `[dir]`
+// directive (`Dir`), `_resolveDirectionality`. Markup uses the `dir` attribute and CSS logical
+// properties (RTL needs no JS); handlers ask `direction(element)` when a key maps to a visual side.
+//
+// Rivet shape: `Directionality` is plain state (`valueSignal` + raw value accessors) so it resumes;
+// Angular's DI lookup ("closest `[dir]` directive, else the document") is `injectDirectionality()`
+// reading `DirectionalityContext` (provided by `<Dir>` from `@rivetjs/cdk/bidi-dir`) and falling back
+// to the document. The `change` EventEmitter is the signal: read `valueSignal()` in a binding /
+// effect, or pass `onDirChange` to `<Dir>`.
+import { computed, createContext, signal, untrack, useContext } from "@rivetjs/reactivity";
+import { resumableContext } from "@rivetjs/runtime/resume-format";
+/** Regex that matches locales with an RTL script. Taken from `goog.i18n.bidi.isRtlLanguage`. */
+const RTL_LOCALE_PATTERN = /^(ar|ckb|dv|he|iw|fa|nqo|ps|sd|ug|ur|yi|.*[-_](Adlm|Arab|Hebr|Nkoo|Rohg|Thaa))(?!.*[-_](Latn|Cyrl)($|-|_))($|-|_)/i;
+/** Whether `locale` is written right-to-left (by script / language subtag). */
+export const isRtlLocale = (locale) => RTL_LOCALE_PATTERN.test(locale);
+/**
+ * Resolves a raw `dir` value to a direction: case-insensitive `"rtl"` → rtl; `"auto"` → from
+ * `navigator.language` (browser) ; anything else → ltr.
+ */
+export function _resolveDirectionality(rawValue) {
+    const value = rawValue?.toLowerCase() || "";
+    if (value === "auto" && typeof navigator !== "undefined" && navigator?.language)
+        return isRtlLocale(navigator.language) ? "rtl" : "ltr";
+    return value === "rtl" ? "rtl" : "ltr";
+}
+/** The current 'ltr' / 'rtl' value of a directionality (Angular `dir.value`). Reads the signal. */
+export const directionValue = (dir) => dir.valueSignal();
+/**
+ * The root `Directionality`: `<body dir>`, else `<html dir>`, else ltr (Angular's root service).
+ * Server (no document): ltr.
+ */
+export function documentDirectionality(doc = typeof document === "undefined" ? undefined : document) {
+    let raw = "ltr";
+    if (doc)
+        raw = (doc.body ? doc.body.dir : null) || (doc.documentElement ? doc.documentElement.dir : null) || "ltr";
+    return { valueSignal: signal(_resolveDirectionality(raw)), rawDir: signal(raw) };
+}
+/**
+ * State of a `[dir]` element (Angular `Dir` directive): `rawDir` keeps the consumer value (rendered
+ * as-is, so `dir="auto"` stays `auto`), `valueSignal` is the normalized direction.
+ */
+export function createDir(dir = "") {
+    return { valueSignal: signal(_resolveDirectionality(dir)), rawDir: signal(dir) };
+}
+/**
+ * Set the `dir` input of a `Dir` state (Angular `dir.dir = value`). Returns true when the
+ * normalized direction changed (Angular emits `dirChange` then, once initialized).
+ */
+export function setDir(state, value) {
+    const previous = untrack(state.valueSignal);
+    const next = _resolveDirectionality(value);
+    state.rawDir.set(value);
+    state.valueSignal.set(next);
+    return previous !== next;
+}
+/** Context through which `<Dir>` provides itself as the `Directionality` of its subtree. */
+export const DirectionalityContext = resumableContext(createContext(null, { id: "rv-directionality" }));
+/** Angular `inject(Directionality)`: the closest `<Dir>`, else the document's direction. */
+export function injectDirectionality() {
+    return useContext(DirectionalityContext) ?? documentDirectionality();
+}
+/** Reactive direction accessor for components: closest `<Dir>` value, else the document's. */
+export function useDirection() {
+    const dir = injectDirectionality();
+    return computed(() => dir.valueSignal());
+}
+/** Direction at `element`: nearest `dir` attribute, else computed `direction`, else `<html dir>`. Server: "ltr". */
+export function direction(element) {
+    if (typeof document === "undefined")
+        return "ltr";
+    const owner = element?.closest("[dir]")?.getAttribute("dir")?.toLowerCase();
+    if (owner === "rtl" || owner === "ltr")
+        return owner;
+    if (element && typeof getComputedStyle === "function")
+        return getComputedStyle(element).direction === "rtl" ? "rtl" : "ltr";
+    return document.documentElement.dir.toLowerCase() === "rtl" ? "rtl" : "ltr";
+}
+/** Swap ArrowLeft / ArrowRight in right-to-left text, so handlers can reason in "start" / "end". */
+export function logicalKey(key, dir) {
+    if (dir !== "rtl")
+        return key;
+    return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
+}

package/breadcrumbs/behaviour.d.ts

@@ -0,0 +1,6 @@
+import type { AriaLabelingProps, DOMProps } from "../utils/types.js";
+/** RA `AriaBreadcrumbsProps`. */
+export interface AriaBreadcrumbsProps extends DOMProps, AriaLabelingProps {
+}
+/** RA `useBreadcrumbs` `navProps`: labelable DOM props + `aria-label` (default: localized "Breadcrumbs"). */
+export declare function breadcrumbsProps(props: AriaBreadcrumbsProps): Record<string, unknown>;

package/breadcrumbs/behaviour.js

@@ -0,0 +1,17 @@
+// Ported from react-aria `useBreadcrumbs` (packages/react-aria/src/breadcrumbs/useBreadcrumbs.ts), Apache-2.0, © Adobe.
+// Rivet (naming convention): `useBreadcrumbs(props).navProps` → `breadcrumbsProps(props)` (the list's attribute
+// bag; default `aria-label` localized from `./intl.ts`). RA `useBreadcrumbItem` is not ported as a hook: RAC
+// Breadcrumb composes a `<Link>` through `LinkContext` (as upstream RAC does).
+import { getStringsForLocale, useLocale } from "../i18n/index.js";
+import { breadcrumbsMessages } from "./intl.js";
+/** RA `useBreadcrumbs` `navProps`: labelable DOM props + `aria-label` (default: localized "Breadcrumbs"). */
+export function breadcrumbsProps(props) {
+    const ariaLabel = props["aria-label"];
+    return {
+        id: props.id,
+        "aria-labelledby": props["aria-labelledby"],
+        "aria-describedby": props["aria-describedby"],
+        "aria-details": props["aria-details"],
+        "aria-label": ariaLabel || getStringsForLocale(breadcrumbsMessages, useLocale().locale).breadcrumbs,
+    };
+}

package/breadcrumbs/index.d.ts

@@ -0,0 +1,68 @@
+import type { Content } from "@rivetjs/runtime/jsx-runtime";
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+import { type DOMRenderProps } from "../utils/render.js";
+import { type MaybeAccessor } from "../interactions/utils.js";
+import { type ContextValue, type RefValue, type RenderProps, type SlotProps, type StyleProps } from "../slots/index.jsx";
+import { type CollectionProps } from "../collections/components.jsx";
+import type { Key } from "../collections/types.js";
+import type { AriaLabelingProps } from "../utils/types.js";
+import { type AriaBreadcrumbsProps } from "./behaviour.js";
+export type { Key } from "../collections/types.js";
+export { breadcrumbsProps, type AriaBreadcrumbsProps } from "./behaviour.js";
+export interface BreadcrumbsProps<T> extends Omit<CollectionProps<T>, "idScope">, AriaBreadcrumbsProps, StyleProps, SlotProps, DOMRenderProps<"ol", undefined>, Omit<GlobalDOMAttributes<HTMLOListElement>, "style"> {
+    /** @default 'rv-Breadcrumbs' */
+    class?: string;
+    /** Whether the breadcrumbs are disabled (may be an accessor). */
+    isDisabled?: MaybeAccessor<boolean | undefined>;
+    /** Handler that is called when a breadcrumb is clicked. */
+    onAction?: (key: Key) => void;
+    ref?: RefValue<HTMLOListElement>;
+    /**
+     * Rivet addition (React Spectrum Breadcrumbs collapsing, `overflowMode` name from Spectrum ActionGroup): `"collapse"`
+     * measures the list and collapses the breadcrumbs that do not fit into one overflow item rendered by `renderOverflow`.
+     * Read once at mount (it picks the collapsing implementation). @default 'wrap'
+     */
+    overflowMode?: "wrap" | "collapse";
+    /** `overflowMode="collapse"`: always show the root item while it fits (Spectrum `showRoot`). Read once at mount (the overflow measurer's options). */
+    showRoot?: boolean;
+    /** `overflowMode="collapse"`: at most this many breadcrumbs stay visible, the overflow item included (Spectrum: 4). Read once at mount. @default 4 */
+    maxVisibleItems?: number | "auto";
+    /** `overflowMode="collapse"`: visible breadcrumbs before the browser measures (server render). Read once at mount. @default every item */
+    defaultVisibleItems?: number;
+    /** `overflowMode="collapse"`: the overflow item's content for the collapsed breadcrumbs (e.g. a "…" button opening a Menu). Inline arrow. */
+    renderOverflow?: (items: BreadcrumbsOverflowItem[]) => Content;
+    /** `overflowMode="collapse"`: class of the overflow `<li>`. @default 'rv-Breadcrumb' */
+    overflowClass?: string;
+}
+/** A collapsed breadcrumb, as `renderOverflow` gets it. */
+export interface BreadcrumbsOverflowItem {
+    /** The Breadcrumb's `id` (pass it to `onAction`). */
+    key: Key;
+    /** The Breadcrumb's `textValue`, else its text as last rendered. */
+    textValue: string;
+    /** The Breadcrumb's `href` prop, else the href of the link it last rendered. */
+    href: string | undefined;
+    /** The Breadcrumb's props. */
+    props: Record<string, unknown>;
+}
+/** RAC `BreadcrumbsContext` (slot props for the list; the Breadcrumbs re-provides `{ isDisabled, onAction }` to its items). */
+export declare const BreadcrumbsContext: import("@rivetjs/reactivity").Context<ContextValue<BreadcrumbsProps<any>, HTMLOListElement>>;
+/** Breadcrumbs display a hierarchy of links to the current page or resource in an application (RAC `Breadcrumbs`). */
+export declare function Breadcrumbs<T>(inProps: BreadcrumbsProps<T>): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface BreadcrumbRenderProps {
+    /** Whether the breadcrumb is for the current page. `[data-current]` */
+    isCurrent: () => boolean;
+    /** Whether the breadcrumb is disabled. `[data-disabled]` */
+    isDisabled: () => boolean;
+}
+export interface BreadcrumbProps extends RenderProps<BreadcrumbRenderProps>, DOMRenderProps<"li", BreadcrumbRenderProps>, AriaLabelingProps, Omit<GlobalDOMAttributes<HTMLLIElement>, "style"> {
+    /** @default 'rv-Breadcrumb' */
+    class?: RenderProps<BreadcrumbRenderProps>["class"];
+    /** A unique id for the breadcrumb, which will be passed to `onAction` when the breadcrumb is pressed. */
+    id?: Key;
+    /** Rivet: the breadcrumb's text for the Breadcrumbs overflow item (`renderOverflow`); default: its text as rendered. */
+    textValue?: string;
+    ref?: RefValue<HTMLLIElement>;
+}
+/** A Breadcrumb represents an individual item in a `<Breadcrumbs>` list (RAC `Breadcrumb`). */
+export declare const Breadcrumb: (props: BreadcrumbProps) => unknown;

package/breadcrumbs/index.jsx

@@ -0,0 +1,224 @@
+// Ported from react-aria-components `Breadcrumbs` / `Breadcrumb` (packages/react-aria-components/src/Breadcrumbs.tsx)
+// and react-aria `useBreadcrumbs` (packages/react-aria/src/breadcrumbs/useBreadcrumbs.ts), Apache-2.0, © Adobe.
+// Breadcrumbs display a hierarchy of links to the current page or resource: an `<ol>` collection of
+// `<Breadcrumb>` parts; each provides `LinkContext` (`aria-current="page"` + disabled on the last one,
+// `onAction(id)` on press) to the `<Link>` inside it.
+// Rivet:
+// - the collection is built (B5 `collectionOf`, build mode) so a Breadcrumb knows it is last (RAC
+//   `node.nextKey == null`); `isCurrent` is read from that collection by key (an appended item moves it).
+// - `items` + a render function (RAC dynamic collections) is the data-driven preset over the parts.
+// - render props are accessors (`{({ isCurrent }) => (isCurrent() ? "Current" : name)}`); `class` = RAC
+//   `className` (defaults `rv-Breadcrumbs` / `rv-Breadcrumb`); `isDisabled` may be an accessor.
+// - Overflow (Rivet addition, React Spectrum v3 Breadcrumbs collapse; `../overflow/index.tsx`): `overflowMode="collapse"`
+//   measures the `<ol>` and renders `[root?, overflow item, ...last]` (Spectrum `showRoot`, `maxVisibleItems`); the overflow
+//   `<li>` holds `renderOverflow(hiddenItems)` (e.g. a "…" MenuTrigger). Default `overflowMode="wrap"` = RAC (no measuring).
+// `render` (RAC DOMRenderProps) on Breadcrumbs (`<ol>`, renderProps `undefined`) and Breadcrumb (`<li>`, BreadcrumbRenderProps): given, the attributes object goes to `render` instead of the default element.
+import { computed, createContext, provide, signal, untrack, useContext } from "@rivetjs/reactivity";
+import { For, Provider as ContextProvider, ref as createRef } from "@rivetjs/runtime/dom";
+import { globalDOMProps } from "../utils/dom-props.js";
+import {} from "../utils/render.js";
+import { dataBool } from "../utils/data-attrs.jsx";
+import { read } from "../interactions/utils.js";
+import { contextProps, resumableContext, slottedContext, } from "../slots/index.jsx";
+import { Collection, CollectionRendererContext, DefaultCollectionRenderer, collectionOf, createLeafComponent, renderNodeAt, } from "../collections/components.jsx";
+import { mergeRefs } from "../interactions/merge-props.jsx";
+import { OVERFLOW, createOverflow } from "../overflow/index.jsx";
+import { CollectionNode } from "../collections/base.js";
+import { LinkContext } from "../link/index.jsx";
+import { breadcrumbsProps } from "./behaviour.js";
+import { hasLive, isLive, liveClass, liveOptions } from "../utils/live.jsx";
+import { renderPropsOf } from "../slots/index.jsx";
+export { breadcrumbsProps } from "./behaviour.js";
+/** RAC `BreadcrumbsContext` (slot props for the list; the Breadcrumbs re-provides `{ isDisabled, onAction }` to its items). */
+export const BreadcrumbsContext = resumableContext(createContext(null, { id: "rv-breadcrumbs" }));
+/** Rivet: the built collection of the enclosing Breadcrumbs (a Breadcrumb's `isCurrent` reads it). */
+const BreadcrumbsCollectionContext = resumableContext(createContext(null, { id: "rv-breadcrumbs-collection" }));
+/** Breadcrumbs display a hierarchy of links to the current page or resource in an application (RAC `Breadcrumbs`). */
+export function Breadcrumbs(inProps) {
+    // Live props (P5): `isDisabled` becomes an accessor (every Breadcrumb reads it with `read`), a live `class` goes
+    // through the spread; the rest of the body is read once (untracked).
+    return untrack(() => breadcrumbs(inProps));
+}
+function breadcrumbs(inProps) {
+    const [ctxProps, ref] = contextProps(inProps, inProps.ref, BreadcrumbsContext);
+    const props = hasLive(ctxProps) ? liveOptions(ctxProps, ["isDisabled"]) : ctxProps;
+    // A custom renderer comes from context; the default one is referenced by import (a captured module-level
+    // object is not serializable on a resumed page).
+    const renderer = useContext(CollectionRendererContext);
+    const customRenderer = renderer === DefaultCollectionRenderer ? undefined : renderer;
+    const items = props.items;
+    const children = props.children;
+    // Object-literal function value = a resumable symbol: the collection computed captures it, so a resumed
+    // binding that reads the collection (Breadcrumb `isCurrent`) can rebuild it (a bare arrow argument is not).
+    const build = { content: () => Collection({ items, children }) };
+    const collection = collectionOf(build.content);
+    const nav = breadcrumbsProps(props);
+    const dom = globalDOMProps(props, ["style"]);
+    const slot = props.slot || undefined;
+    const style = props.style;
+    const className = isLive(props, "class") ? liveClass(props, "rv-Breadcrumbs") : (props.class ?? "rv-Breadcrumbs");
+    dom.class = className;
+    const itemsContext = { isDisabled: props.isDisabled, onAction: props.onAction };
+    if (props.overflowMode === "collapse")
+        return collapsingBreadcrumbs(props, ref, collection, nav, dom, slot, style, className, itemsContext);
+    if (props.render) {
+        const attrs = {
+            ...dom,
+            ref: ref,
+            id: nav.id,
+            "aria-label": nav["aria-label"],
+            "aria-labelledby": nav["aria-labelledby"],
+            "aria-describedby": nav["aria-describedby"],
+            "aria-details": nav["aria-details"],
+            slot: slot,
+            style: style,
+            class: className,
+            children: () => (<ContextProvider token={BreadcrumbsContext} value={itemsContext}>
+          <ContextProvider token={BreadcrumbsCollectionContext} value={collection}>
+            {(customRenderer ?? DefaultCollectionRenderer).CollectionRoot({ collection })}
+          </ContextProvider>
+        </ContextProvider>),
+        };
+        return props.render(attrs, undefined);
+    }
+    return (<ol {...dom} ref={ref} id={nav.id} aria-label={nav["aria-label"]} aria-labelledby={nav["aria-labelledby"]} aria-describedby={nav["aria-describedby"]} aria-details={nav["aria-details"]} slot={slot} style={style}>
+      <ContextProvider token={BreadcrumbsContext} value={itemsContext}>
+        <ContextProvider token={BreadcrumbsCollectionContext} value={collection}>
+          {(customRenderer ?? DefaultCollectionRenderer).CollectionRoot({ collection })}
+        </ContextProvider>
+      </ContextProvider>
+    </ol>);
+}
+const isServer = typeof document === "undefined";
+/** Breadcrumbs with `overflowMode="collapse"` (React Spectrum v3 Breadcrumbs: `[root?, menu, ...last]`). */
+function collapsingBreadcrumbs(props, ref, collection, nav, dom, slot, style, className, itemsContext) {
+    // The measured `<ol>`: the caller's `ref()` when it is one (resumes), else our own (merged in the browser).
+    const own = typeof ref === "function" && "set" in ref;
+    const listRef = own ? ref : createRef();
+    const olRef = own || !ref ? listRef : isServer ? ref : mergeRefs(ref, listRef);
+    const renderOverflow = props.renderOverflow;
+    const overflowClass = props.overflowClass ?? "rv-Breadcrumb";
+    const keys = computed(() => {
+        const out = [];
+        for (const node of collection())
+            if (node.type !== "content")
+                out.push(node.key);
+        return out;
+    });
+    // Text / href of every breadcrumb as last rendered (read while every item is shown): the collapsed ones are not in the DOM.
+    const seen = signal({});
+    const overflow = createOverflow({
+        ref: listRef,
+        items: keys,
+        collapse: "start",
+        showRoot: props.showRoot,
+        maxVisibleItems: props.maxVisibleItems,
+        defaultVisibleItems: props.defaultVisibleItems,
+        onMeasureAll: (elements) => {
+            const all = untrack(keys);
+            const record = {};
+            elements.forEach((element, i) => {
+                if (i < all.length)
+                    record[String(all[i])] = { textValue: (element.textContent ?? "").trim(), href: element.querySelector("a[href]")?.getAttribute("href") ?? undefined };
+            });
+            seen.set(record);
+        },
+    });
+    const rows = overflow.items;
+    const hidden = overflow.hidden;
+    const hiddenItems = computed(() => {
+        const c = collection();
+        const last = seen();
+        return hidden().map((key) => {
+            const node = c.getItem(key);
+            const nodeProps = (node?.props ?? {});
+            const dom = last[String(key)];
+            return { key, textValue: node?.textValue || dom?.textValue || "", href: nodeProps.href ?? dom?.href, props: nodeProps };
+        });
+    });
+    if (props.render) {
+        const attrs = {
+            ...dom,
+            ref: olRef,
+            id: nav.id,
+            "aria-label": nav["aria-label"],
+            "aria-labelledby": nav["aria-labelledby"],
+            "aria-describedby": nav["aria-describedby"],
+            "aria-details": nav["aria-details"],
+            slot: slot,
+            style: style,
+            class: className,
+            children: () => (<ContextProvider token={BreadcrumbsContext} value={itemsContext}>
+          <ContextProvider token={BreadcrumbsCollectionContext} value={collection}>
+            <For each={rows} by={(key) => key}>
+              {(key) => untrack(key) === OVERFLOW ? (<li class={overflowClass} data-overflow="true">
+                    {renderOverflow?.(hiddenItems())}
+                  </li>) : renderNodeAt(collection, key)}
+            </For>
+          </ContextProvider>
+        </ContextProvider>),
+        };
+        return props.render(attrs, undefined);
+    }
+    return (<ol {...dom} ref={olRef} id={nav.id} aria-label={nav["aria-label"]} aria-labelledby={nav["aria-labelledby"]} aria-describedby={nav["aria-describedby"]} aria-details={nav["aria-details"]} slot={slot} style={style}>
+      <ContextProvider token={BreadcrumbsContext} value={itemsContext}>
+        <ContextProvider token={BreadcrumbsCollectionContext} value={collection}>
+          <For each={rows} by={(key) => key}>
+            {(key) => untrack(key) === OVERFLOW ? (<li class={overflowClass} data-overflow="true">
+                  {renderOverflow?.(hiddenItems())}
+                </li>) : renderNodeAt(collection, key)}
+          </For>
+        </ContextProvider>
+      </ContextProvider>
+    </ol>);
+}
+/** RAC `BreadcrumbNode`. */
+class BreadcrumbNode extends CollectionNode {
+    static type = "item";
+}
+/** A Breadcrumb represents an individual item in a `<Breadcrumbs>` list (RAC `Breadcrumb`). */
+export const Breadcrumb = /*#__PURE__*/ createLeafComponent(BreadcrumbNode, function Breadcrumb(props, ref, node) {
+    // Recreating useBreadcrumbItem because we want to use composition instead of having the link builtin.
+    const key = node.key;
+    const collection = useContext(BreadcrumbsCollectionContext);
+    // Capture plain data only (never `node`, a class instance): the closures resume.
+    const isLast = node.nextKey == null;
+    const isCurrent = () => (collection ? collection().getItem(key)?.nextKey == null : isLast);
+    const { isDisabled: listDisabled, onAction } = (slottedContext(BreadcrumbsContext) ?? {});
+    const isDisabled = () => !!read(listDisabled) || isCurrent();
+    const linkProps = {
+        "aria-current": () => (isCurrent() ? "page" : undefined),
+        isDisabled,
+        onPress: () => onAction?.(key),
+    };
+    const rp = renderPropsOf(props, {
+        values: { isDisabled, isCurrent },
+        defaultClassName: "rv-Breadcrumb",
+    });
+    const dom = globalDOMProps(props, ["style"]);
+    const ariaLabel = props["aria-label"];
+    const labelledBy = props["aria-labelledby"];
+    const describedBy = props["aria-describedby"];
+    const details = props["aria-details"];
+    if (props.render) {
+        const attrs = {
+            ...dom,
+            ref: (props.ref ?? ref),
+            class: () => rp.class(),
+            style: () => rp.style(),
+            "aria-label": ariaLabel,
+            "aria-labelledby": labelledBy,
+            "aria-describedby": describedBy,
+            "aria-details": details,
+            "data-disabled": () => dataBool(isDisabled()),
+            "data-current": () => dataBool(isCurrent()),
+            children: () => (<ContextProvider token={LinkContext} value={linkProps}>
+          {rp.children()}
+        </ContextProvider>),
+        };
+        return props.render(attrs, { isDisabled, isCurrent });
+    }
+    return (<li {...dom} ref={(props.ref ?? ref)} class={rp.class()} style={rp.style()} aria-label={ariaLabel} aria-labelledby={labelledBy} aria-describedby={describedBy} aria-details={details} data-disabled={dataBool(isDisabled())} data-current={dataBool(isCurrent())}>
+      {provide(LinkContext, linkProps, () => rp.children())}
+    </li>);
+});

package/breadcrumbs/intl.d.ts

@@ -0,0 +1,3 @@
+import type { LocalizedStrings } from "../i18n/index.js";
+export type BreadcrumbsMessageKey = "breadcrumbs";
+export declare const breadcrumbsMessages: LocalizedStrings<BreadcrumbsMessageKey>;

package/breadcrumbs/intl.js

@@ -0,0 +1,104 @@
+export const breadcrumbsMessages = {
+    "ar-AE": {
+        breadcrumbs: "عناصر الواجهة",
+    },
+    "bg-BG": {
+        breadcrumbs: "Трохи хляб",
+    },
+    "cs-CZ": {
+        breadcrumbs: "Popis cesty",
+    },
+    "da-DK": {
+        breadcrumbs: "Brødkrummer",
+    },
+    "de-DE": {
+        breadcrumbs: "Breadcrumbs",
+    },
+    "el-GR": {
+        breadcrumbs: "Πλοηγήσεις breadcrumb",
+    },
+    "en-US": {
+        breadcrumbs: "Breadcrumbs",
+    },
+    "es-ES": {
+        breadcrumbs: "Migas de pan",
+    },
+    "et-EE": {
+        breadcrumbs: "Lingiread",
+    },
+    "fi-FI": {
+        breadcrumbs: "Navigointilinkit",
+    },
+    "fr-FR": {
+        breadcrumbs: "Chemin de navigation",
+    },
+    "he-IL": {
+        breadcrumbs: "שבילי ניווט",
+    },
+    "hr-HR": {
+        breadcrumbs: "Navigacijski putovi",
+    },
+    "hu-HU": {
+        breadcrumbs: "Morzsamenü",
+    },
+    "it-IT": {
+        breadcrumbs: "Breadcrumb",
+    },
+    "ja-JP": {
+        breadcrumbs: "パンくずリスト",
+    },
+    "ko-KR": {
+        breadcrumbs: "탐색 표시",
+    },
+    "lt-LT": {
+        breadcrumbs: "Naršymo kelias",
+    },
+    "lv-LV": {
+        breadcrumbs: "Atpakaļceļi",
+    },
+    "nb-NO": {
+        breadcrumbs: "Navigasjonsstier",
+    },
+    "nl-NL": {
+        breadcrumbs: "Broodkruimels",
+    },
+    "pl-PL": {
+        breadcrumbs: "Struktura nawigacyjna",
+    },
+    "pt-BR": {
+        breadcrumbs: "Caminho detalhado",
+    },
+    "pt-PT": {
+        breadcrumbs: "Categorias",
+    },
+    "ro-RO": {
+        breadcrumbs: "Miez de pâine",
+    },
+    "ru-RU": {
+        breadcrumbs: "Навигация",
+    },
+    "sk-SK": {
+        breadcrumbs: "Navigačné prvky Breadcrumbs",
+    },
+    "sl-SI": {
+        breadcrumbs: "Drobtine",
+    },
+    "sr-SP": {
+        breadcrumbs: "Putanje navigacije",
+    },
+    "sv-SE": {
+        breadcrumbs: "Sökvägar",
+    },
+    "tr-TR": {
+        breadcrumbs: "İçerik haritaları",
+    },
+    "uk-UA": {
+        breadcrumbs: "Навігаційна стежка",
+    },
+    "zh-CN": {
+        breadcrumbs: "导航栏",
+    },
+    "zh-TW": {
+        breadcrumbs: "導覽列",
+    },
+};

package/button/behaviour.d.ts

@@ -0,0 +1,61 @@
+import { type MaybeAccessor } from "../interactions/utils.js";
+import type { AriaLabelingProps, FocusableDOMProps, FocusableProps, PressEvents } from "../utils/types.js";
+import { type PressOptions } from "./press.js";
+export type { PressEvent, PressEvents, PressOptions, PointerType } from "./press.js";
+/** RA `ButtonProps` (button/useButton). */
+export interface AriaButtonBaseProps extends PressEvents, FocusableProps {
+    /** Whether the button is disabled (Rivet: may be an accessor; `buttonProps` reads it once, bind it yourself to react). */
+    isDisabled?: MaybeAccessor<boolean | undefined>;
+}
+/** RA `AriaBaseButtonProps`. */
+export interface AriaBaseButtonProps extends FocusableDOMProps, Omit<AriaLabelingProps, "aria-label" | "aria-labelledby"> {
+    "aria-label"?: MaybeAccessor<string | undefined>;
+    "aria-labelledby"?: MaybeAccessor<string | undefined>;
+    "aria-disabled"?: MaybeAccessor<boolean | "true" | "false" | undefined>;
+    "aria-expanded"?: MaybeAccessor<boolean | "true" | "false" | undefined>;
+    "aria-haspopup"?: MaybeAccessor<boolean | "menu" | "listbox" | "tree" | "grid" | "dialog" | "true" | "false" | undefined>;
+    "aria-controls"?: MaybeAccessor<string | undefined>;
+    "aria-pressed"?: MaybeAccessor<boolean | "true" | "false" | "mixed" | undefined>;
+    "aria-current"?: MaybeAccessor<boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined>;
+    /** @default "button" (live: a value-form `type={t()}` updates the attribute in place) */
+    type?: "button" | "submit" | "reset";
+    /** Whether to prevent focus from moving to the button when pressing it. Read once at mount (press option). */
+    preventFocusOnPress?: boolean;
+    /** @private RA (undocumented, NumberField steppers): a disabled button gets `tabIndex=-1`. */
+    allowFocusWhenDisabled?: boolean;
+    form?: string;
+    formAction?: string;
+    formEncType?: string;
+    formMethod?: string;
+    formNoValidate?: boolean;
+    formTarget?: string;
+    name?: string;
+    value?: string;
+}
+/** RA `AriaButtonProps` (+ `elementType` / link props for non-`<button>` elements). */
+export interface AriaButtonProps extends AriaButtonBaseProps, AriaBaseButtonProps {
+    /** The element's unique identifier. Read once at mount (the pending progress bar id derives from it). */
+    id?: string;
+    /** `button` (default) or another element given `role="button"`. Read once at mount (element choice). */
+    elementType?: "button" | "a" | "div" | "span" | "input";
+    href?: string;
+    target?: string;
+    rel?: string;
+}
+/**
+ * RA `useButton` attributes (without handlers: wire `buttonPointerDown` / `buttonKeyDown` / `buttonClick` /
+ * … as inline arrows). Includes `useFocusable` attributes (`tabIndex` for `excludeFromTabOrder`,
+ * `autoFocus`) and the labelable DOM props (`id`, `aria-label*`, `aria-describedby`, `aria-details`).
+ */
+export declare function buttonProps(props: AriaButtonProps): Record<string, unknown>;
+type Pending = MaybeAccessor<boolean | undefined> | undefined;
+/** Press options with `isPending` (RAC `useDisableInteractions`: pending buttons ignore presses, keep focus / hover). */
+export declare function pendingOptions(options: PressOptions, isPending: Pending): PressOptions;
+/** Whether `isPending` is set and true now. */
+export declare const isPendingNow: (isPending: Pending) => boolean;
+export declare const buttonKeyDown: (e: KeyboardEvent, o: PressOptions, pending?: Pending) => void;
+export declare const buttonClick: (e: MouseEvent, o: PressOptions, pending?: Pending) => void;
+export declare const buttonPointerDown: (e: PointerEvent, o: PressOptions, pending?: Pending) => void;
+export declare const buttonPointerUp: (e: PointerEvent, o: PressOptions, pending?: Pending) => void;
+export declare const buttonMouseDown: (e: MouseEvent, o: PressOptions) => void;
+export declare const buttonDragStart: (e: DragEvent, o: PressOptions) => void;