@abuzareal/contour-ui 0.3.0 → 0.5.0

package/dist/hooks/useFloatingPanel.js

@@ -0,0 +1,157 @@
+"use client";
+import { useLayoutEffect } from "react";
+import { autoUpdate, computePosition, flip, offset, shift, size, platform, } from "@floating-ui/dom";
+export function floatingContainer(anchor, options) {
+    // Select the enclosing native dialog before showModal runs: default-open children
+    // render in the same commit, while its open attribute is still absent.
+    const modal = anchor.closest("dialog");
+    if (options.container &&
+        options.container.ownerDocument === anchor.ownerDocument &&
+        (!modal || modal.contains(options.container)))
+        return options.container;
+    return modal ?? anchor.ownerDocument.body;
+}
+/** DOM adapter: clean up observers and ignore obsolete asynchronous positioning results. */
+export default function useFloatingPanel(anchor, panel, open, { side = "bottom", align = "start", sideOffset = 8, collisionPadding = 8, container, }) {
+    useLayoutEffect(() => {
+        const reference = anchor.current, floating = panel.current;
+        const gap = Number.isFinite(sideOffset) ? sideOffset : 8;
+        const inset = Number.isFinite(collisionPadding)
+            ? Math.max(0, collisionPadding)
+            : 8;
+        if (!open || !reference || !floating)
+            return;
+        let disposed = false, revision = 0;
+        const properties = [
+            "position",
+            "left",
+            "right",
+            "top",
+            "bottom",
+            "transform",
+            "max-width",
+            "max-height",
+            "min-width",
+        ];
+        const previous = properties.map((name) => ({
+            name,
+            value: floating.style.getPropertyValue(name),
+            priority: floating.style.getPropertyPriority(name),
+        }));
+        const previousPlacement = floating.getAttribute("data-placement");
+        const view = reference.ownerDocument.defaultView;
+        const update = async () => {
+            const request = ++revision;
+            if (disposed || !floating.isConnected)
+                return;
+            floating.style.position = "fixed";
+            try {
+                const scale = await platform.getScale(floating);
+                const offsetParent = await platform.getOffsetParent(floating);
+                if (disposed || request !== revision)
+                    return;
+                // A window offset parent does not normalize inherited CSS zoom. Measure its
+                // rendered dimensions and convert viewport coordinates back to local CSS pixels.
+                const windowScaled = offsetParent === view && (scale.x !== 1 || scale.y !== 1);
+                const factorX = windowScaled ? scale.x : 1;
+                const factorY = windowScaled ? scale.y : 1;
+                const padding = {
+                    left: inset * factorX,
+                    right: inset * factorX,
+                    top: inset * factorY,
+                    bottom: inset * factorY,
+                };
+                const result = await computePosition(reference, floating, {
+                    strategy: "fixed",
+                    placement: align === "center" ? side : `${side}-${align}`,
+                    platform: windowScaled
+                        ? {
+                            ...platform,
+                            getDimensions(element) {
+                                if (element === floating) {
+                                    const rect = floating.getBoundingClientRect();
+                                    return { width: rect.width, height: rect.height };
+                                }
+                                return platform.getDimensions(element);
+                            },
+                        }
+                        : platform,
+                    middleware: [
+                        offset(gap * (side === "left" || side === "right" ? factorX : factorY)),
+                        flip({ padding }),
+                        shift({ padding, crossAxis: true }),
+                        size({
+                            padding,
+                            apply({ availableWidth, availableHeight }) {
+                                if (disposed || request !== revision)
+                                    return;
+                                const maximumWidth = Math.max(0, availableWidth / factorX);
+                                floating.style.maxWidth = `${maximumWidth}px`;
+                                floating.style.maxHeight = `${Math.max(0, availableHeight / factorY)}px`;
+                                // A CSS minimum must not defeat the viewport constraint at high zoom.
+                                const minimum = Number.parseFloat(view?.getComputedStyle(floating).minWidth ?? "0");
+                                if (Number.isFinite(minimum) && minimum > maximumWidth)
+                                    floating.style.minWidth = `${maximumWidth}px`;
+                            },
+                        }),
+                    ],
+                });
+                if (disposed || request !== revision)
+                    return;
+                Object.assign(floating.style, {
+                    position: "fixed",
+                    left: `${result.x / factorX}px`,
+                    top: `${result.y / factorY}px`,
+                    right: "auto",
+                    bottom: "auto",
+                    transform: "none",
+                });
+                floating.dataset.placement = result.placement;
+            }
+            catch (error) {
+                if (disposed || request !== revision)
+                    return;
+                // Preserve reachable content if the owner document cannot provide geometry.
+                Object.assign(floating.style, {
+                    position: "fixed",
+                    left: `${inset}px`,
+                    top: `${inset}px`,
+                    right: "auto",
+                    bottom: "auto",
+                    transform: "none",
+                });
+                floating.dataset.placement = "fallback";
+                console.warn("Contour floating positioning used its viewport fallback.", error);
+            }
+        };
+        const cleanup = autoUpdate(reference, floating, () => {
+            void update();
+        }, {
+            elementResize: typeof view?.ResizeObserver === "function",
+            layoutShift: typeof view?.IntersectionObserver === "function",
+        });
+        return () => {
+            disposed = true;
+            cleanup();
+            for (const { name, value, priority } of previous) {
+                if (value)
+                    floating.style.setProperty(name, value, priority);
+                else
+                    floating.style.removeProperty(name);
+            }
+            if (previousPlacement === null)
+                floating.removeAttribute("data-placement");
+            else
+                floating.setAttribute("data-placement", previousPlacement);
+        };
+    }, [
+        anchor,
+        panel,
+        open,
+        side,
+        align,
+        sideOffset,
+        collisionPadding,
+        container,
+    ]);
+}

package/dist/hooks/useFormReset.d.ts

@@ -1,3 +1,3 @@
 import { type RefObject } from "react";
 /** Native reset fires before the browser restores default values. */
-export default function useFormReset<T extends HTMLInputElement | HTMLTextAreaElement>(ref: RefObject<T | null>, sync: () => void): void;
+export default function useFormReset<T extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | HTMLFieldSetElement>(ref: RefObject<T | null>, sync: () => void): void;

package/dist/hooks/useLayerDismiss.d.ts

@@ -0,0 +1,4 @@
+import { type RefObject } from "react";
+import { type DismissReason } from "../lib/layers.js";
+import type { DismissOptions } from "./useDismiss.js";
+export default function useLayerDismiss(container: RefObject<HTMLElement | null>, active: boolean, onDismiss: (reason: DismissReason, event: KeyboardEvent | PointerEvent) => void, options?: DismissOptions): symbol;

package/dist/hooks/useLayerDismiss.js

@@ -0,0 +1,48 @@
+"use client";
+import { useContext, useState, useLayoutEffect, useRef, } from "react";
+import { LayerParent, registerLayer, refreshLayerStack, } from "../lib/layers.js";
+export default function useLayerDismiss(container, active, onDismiss, options = {}) {
+    const [id] = useState(() => Symbol("contour-layer"));
+    const parent = useContext(LayerParent);
+    const latest = useRef({ onDismiss, options });
+    const registration = useRef(undefined);
+    // Reconcile each commit so owner-document moves rebind listeners, without reordering on updates.
+    useLayoutEffect(() => {
+        latest.current = { onDismiss, options };
+        const doc = active ? container.current?.ownerDocument : undefined;
+        if (registration.current &&
+            (registration.current.doc !== doc ||
+                registration.current.parent !== parent)) {
+            registration.current.dispose();
+            registration.current = undefined;
+        }
+        if (!doc)
+            return;
+        if (registration.current) {
+            refreshLayerStack(doc);
+            return;
+        }
+        registration.current = {
+            doc,
+            parent,
+            dispose: registerLayer(doc, {
+                id,
+                parent,
+                elements: () => [
+                    container.current,
+                    ...(latest.current.options.branches ?? []).map((ref) => ref.current),
+                ],
+                floating: () => latest.current.options.layerElement?.current ?? null,
+                dismiss: (reason, event) => latest.current.onDismiss(reason, event),
+                get outside() {
+                    return latest.current.options.outside !== false;
+                },
+            }),
+        };
+    });
+    useLayoutEffect(() => () => {
+        registration.current?.dispose();
+        registration.current = undefined;
+    }, []);
+    return id;
+}

package/dist/hooks/useMobileMenu.d.ts

@@ -1,3 +1,2 @@
-/** Open state for the mobile menu, closing on Escape, outside pointer, or desktop resize. */
 import { type RefObject } from "react";
 export default function useMobileMenu(container: RefObject<HTMLElement | null>, toggleButton: RefObject<HTMLButtonElement | null>): readonly [boolean, import("react").Dispatch<import("react").SetStateAction<boolean>>];

package/dist/hooks/useMobileMenu.js

@@ -1,35 +1,30 @@
 "use client";
 /** Open state for the mobile menu, closing on Escape, outside pointer, or desktop resize. */
+import useDismiss from "./useDismiss.js";
 import { useEffect, useState } from "react";
 const desktopQuery = "(min-width: 768px)";
 export default function useMobileMenu(container, toggleButton) {
     const [open, setOpen] = useState(false);
+    useDismiss(container, open, (reason) => {
+        setOpen(false);
+        if (reason === "escape" && toggleButton.current?.isConnected)
+            toggleButton.current.focus();
+    }, { branches: [toggleButton] });
     useEffect(() => {
         if (!open)
             return;
-        const closeOnEscape = (event) => {
-            if (event.key !== "Escape")
-                return;
-            setOpen(false);
-            toggleButton.current?.focus();
-        };
-        const closeOnOutsidePointer = (event) => {
-            if (!container.current?.contains(event.target))
-                setOpen(false);
-        };
-        const desktop = window.matchMedia(desktopQuery);
+        const view = container.current?.ownerDocument.defaultView;
+        if (!view)
+            return;
+        const desktop = view.matchMedia(desktopQuery);
         const closeOnDesktop = () => {
             if (desktop.matches)
                 setOpen(false);
         };
-        document.addEventListener("keydown", closeOnEscape);
-        document.addEventListener("pointerdown", closeOnOutsidePointer);
         desktop.addEventListener("change", closeOnDesktop);
         return () => {
-            document.removeEventListener("keydown", closeOnEscape);
-            document.removeEventListener("pointerdown", closeOnOutsidePointer);
             desktop.removeEventListener("change", closeOnDesktop);
         };
-    }, [open, container, toggleButton]);
+    });
     return [open, setOpen];
 }

package/dist/hooks/usePanelFocus.d.ts

@@ -0,0 +1,10 @@
+import { type RefObject } from "react";
+export type PanelFocusOptions = {
+    initialFocus?: RefObject<HTMLElement | null> | false;
+    onOpenAutoFocus?: (event: Event) => void;
+    onCloseAutoFocus?: (event: Event) => void;
+};
+/** Reconcile actual node/document moves without treating new callback props as a close. */
+export default function usePanelFocus(open: boolean, trigger: RefObject<HTMLElement | null>, panel: RefObject<HTMLElement | null>, reason: RefObject<{
+    value: string | undefined;
+}>, options: PanelFocusOptions, anchorElement?: HTMLElement | null, layer?: symbol): void;

package/dist/hooks/usePanelFocus.js

@@ -0,0 +1,60 @@
+"use client";
+import { layerOwnsFocus, isTopLayer } from "../lib/layers.js";
+import { useLayoutEffect, useRef } from "react";
+/** Reconcile actual node/document moves without treating new callback props as a close. */
+export default function usePanelFocus(open, trigger, panel, reason, options, anchorElement, layer) {
+    const policy = useRef(options);
+    const registration = useRef(undefined);
+    useLayoutEffect(() => {
+        policy.current = options;
+        const node = open && anchorElement ? panel.current : null;
+        const old = registration.current;
+        if (old && (!node || old.node !== node || old.doc !== node.ownerDocument)) {
+            old.dispose(!open);
+            registration.current = undefined;
+        }
+        if (!node || registration.current)
+            return;
+        const doc = node.ownerDocument, returnTarget = trigger.current, returnReason = reason.current;
+        const owns = () => node.contains(doc.activeElement) ||
+            (layer !== undefined && layerOwnsFocus(doc, layer));
+        let ownedFocus = owns();
+        const observeFocus = () => {
+            ownedFocus = owns();
+        };
+        doc.addEventListener("focusin", observeFocus);
+        const EventType = doc.defaultView?.Event ?? Event;
+        const event = new EventType("contour-open-auto-focus", {
+            cancelable: true,
+        });
+        policy.current.onOpenAutoFocus?.(event);
+        if (!event.defaultPrevented &&
+            (layer === undefined || isTopLayer(doc, layer)) &&
+            policy.current.initialFocus !== false)
+            (policy.current.initialFocus?.current ?? node).focus();
+        ownedFocus = owns();
+        const currentPolicy = policy;
+        registration.current = {
+            node,
+            doc,
+            dispose(returnFocus) {
+                doc.removeEventListener("focusin", observeFocus);
+                if (!returnFocus)
+                    return;
+                const closeEvent = new EventType("contour-close-auto-focus", {
+                    cancelable: true,
+                });
+                currentPolicy.current.onCloseAutoFocus?.(closeEvent);
+                if (returnReason?.value !== "outside" &&
+                    !closeEvent.defaultPrevented &&
+                    returnTarget?.isConnected &&
+                    (returnReason?.value === "escape" || ownedFocus))
+                    returnTarget.focus();
+            },
+        };
+    });
+    useLayoutEffect(() => () => {
+        registration.current?.dispose(true);
+        registration.current = undefined;
+    }, []);
+}

package/dist/hooks/useTheme.d.ts

@@ -2,4 +2,5 @@ export type Theme = "light" | "dark";
 export default function useTheme(animate?: boolean): {
     theme: Theme;
     toggle: (origin: HTMLElement) => void;
+    canToggle: boolean;
 };

package/dist/hooks/useTheme.js

@@ -1,6 +1,7 @@
 "use client";
 /** Light/dark theme state: persisted choice, system fallback, and the animated switch. */
-import { useCallback, useEffect, useSyncExternalStore } from "react";
+import { useCallback, useContext, useEffect, useSyncExternalStore, } from "react";
+import { ThemeScopeContext } from "../lib/themeScope.js";
 import { flushSync } from "react-dom";
 import { readStorage, storageKeys, writeStorage } from "../lib/storage.js";
 import { themeColors } from "../lib/themeBootstrap.js";
@@ -63,8 +64,12 @@ function subscribe(onChange) {
     };
 }
 export default function useTheme(animate = true) {
-    const theme = useSyncExternalStore(subscribe, readTheme, () => "light");
+    const scope = useContext(ThemeScopeContext);
+    const scopedSubscribe = useCallback((listener) => (scope ? () => { } : subscribe(listener)), [scope]);
+    const theme = useSyncExternalStore(scopedSubscribe, readTheme, () => "light");
     useEffect(() => {
+        if (scope)
+            return;
         const media = window.matchMedia("(prefers-color-scheme: dark)");
         const followSystem = () => {
             if (readStorage("local", storageKeys.theme) !== null)
@@ -74,8 +79,12 @@ export default function useTheme(animate = true) {
         };
         media.addEventListener("change", followSystem);
         return () => media.removeEventListener("change", followSystem);
-    }, []);
+    }, [scope]);
     const toggle = useCallback((origin) => {
+        if (scope) {
+            scope.onThemeChange?.(scope.theme === "dark" ? "light" : "dark");
+            return;
+        }
         const next = readTheme() === "dark" ? "light" : "dark";
         writeStorage("local", storageKeys.theme, next);
         const commit = () => {
@@ -94,6 +103,10 @@ export default function useTheme(animate = true) {
             return;
         }
         animateReveal(document.startViewTransition(commit), origin);
-    }, [animate]);
-    return { theme, toggle };
+    }, [animate, scope]);
+    return {
+        theme: scope?.theme ?? theme,
+        toggle,
+        canToggle: scope ? !!scope.onThemeChange : true,
+    };
 }

package/dist/index.d.ts

@@ -127,3 +127,8 @@ export * from "./lib/motion.js";
 export type { Section } from "./types.js";
 export { default as SceneBoundary } from "./components/hero/SceneBoundary.js";
 export { safeHref } from "./lib/safeHref.js";
+export { default as ThemeScope } from "./components/ui/ThemeScope.js";
+export type * from "./components/ui/ThemeScope.js";
+export type { FloatingOptions } from "./hooks/useFloatingPanel.js";
+export type { PanelFocusOptions } from "./hooks/usePanelFocus.js";
+export type { DismissReason } from "./lib/layers.js";

package/dist/index.js

@@ -66,3 +66,4 @@ export * from "./lib/a11y.js";
 export * from "./lib/motion.js";
 export { default as SceneBoundary } from "./components/hero/SceneBoundary.js";
 export { safeHref } from "./lib/safeHref.js";
+export { default as ThemeScope } from "./components/ui/ThemeScope.js";

package/dist/kit/forms.css

@@ -272,7 +272,7 @@ textarea {
 .switch-thumb {
   position: absolute;
   top: 3px;
-  left: 3px;
+  inset-inline-start: 3px;
   width: 16px;
   height: 16px;
   border-radius: 50%;
@@ -287,7 +287,7 @@ textarea {
 
 .switch-track[aria-checked="true"] .switch-thumb {
   background: var(--ink);
-  transform: translateX(20px);
+  inset-inline-start: 23px;
 }
 
 .switch-track:disabled {
@@ -361,3 +361,12 @@ textarea {
   outline: 2px solid var(--fg);
   outline-offset: 6px;
 }
+
+:dir(rtl) .slider input[type="range"]::-webkit-slider-runnable-track,
+:dir(rtl) .slider input[type="range"]::-moz-range-track {
+  background: linear-gradient(
+    to left,
+    var(--fg) var(--progress),
+    var(--line-strong) var(--progress)
+  );
+}

package/dist/kit/navigation.css

@@ -260,3 +260,7 @@
     min-width: 14px;
   }
 }
+
+:dir(rtl) .pagination-step svg {
+  transform: scaleX(-1);
+}

package/dist/kit/overlays.css

@@ -10,10 +10,12 @@
   z-index: 40;
   width: max-content;
   max-width: 220px;
+  overflow: auto;
+  overflow-wrap: anywhere;
   padding: 6px 10px;
-  background: var(--ink);
-  color: var(--paper);
-  pointer-events: none;
+  background: var(--invert-bg);
+  color: var(--invert-fg);
+  pointer-events: auto;
   opacity: 0;
   visibility: hidden;
   transition:
@@ -230,7 +232,9 @@
   position: absolute;
   top: calc(100% + 8px);
   z-index: 30;
-  min-width: 220px;
+  min-width: min(220px, calc(100vw - 16px));
+  overflow: auto;
+  overflow-wrap: anywhere;
   padding: 6px;
   border: 1px solid var(--line);
   background: var(--surface);

package/dist/lib/classNames.d.ts

@@ -1,5 +1,7 @@
 /** Builds a className string from optional parts, skipping falsy values. */
 export declare const cx: (...parts: (string | false | null | undefined)[]) => string;
+/** Prefixed hooks alongside compatibility classes; never use this for IDs or ARIA references. */
+export declare const ccx: (...parts: (string | false | null | undefined)[]) => string;
 export type ButtonVariant = "primary" | "accent" | "secondary" | "ghost" | "danger";
 export type ButtonSize = "sm" | "md" | "lg";
 /** Button classes, shared so anchors can look like buttons without duplicating styles. */

package/dist/lib/classNames.js

@@ -1,4 +1,19 @@
+import { componentClasses } from "./componentClasses.js";
 /** Builds a className string from optional parts, skipping falsy values. */
 export const cx = (...parts) => parts.filter(Boolean).join(" ");
+/** Prefixed hooks alongside compatibility classes; never use this for IDs or ARIA references. */
+export const ccx = (...parts) => {
+    const names = cx(...parts)
+        .split(/\s+/)
+        .filter(Boolean);
+    return [
+        ...new Set([
+            ...names,
+            ...names
+                .filter((name) => componentClasses.has(name))
+                .map((name) => `contour-${name}`),
+        ]),
+    ].join(" ");
+};
 /** Button classes, shared so anchors can look like buttons without duplicating styles. */
-export const buttonClassName = (variant = "primary", size = "md", className) => cx("button", `button-${variant}`, `button-${size}`, className);
+export const buttonClassName = (variant = "primary", size = "md", className) => ccx("button", `button-${variant}`, `button-${size}`, className);

package/dist/lib/componentClasses.d.ts

@@ -0,0 +1 @@
+export declare const componentClasses: Set<string>;

package/dist/lib/componentClasses.js

@@ -0,0 +1,2 @@
+// Generated compatibility aliases; unknown consumer classes pass through unchanged.
+export const componentClasses = new Set(["alert", "alert-accent", "alert-action", "alert-banner", "alert-body", "alert-content", "alert-danger", "alert-dismiss", "alert-icon", "alert-info", "alert-success", "alert-title", "alert-warning", "avatar", "avatar-group", "avatar-initials", "avatar-lg", "avatar-sm", "avatar-status", "avatar-status-away", "avatar-status-online", "avatar-xl", "badge", "badge-danger", "badge-dot", "badge-info", "badge-invert", "badge-neutral", "badge-success", "badge-warning", "brand", "breadcrumbs", "button", "button-accent", "button-danger", "button-ghost", "button-icon", "button-lg", "button-secondary", "button-sm", "card", "card-acid", "card-body", "card-footer", "card-icon", "card-ink", "card-interactive", "card-title", "card-top", "choice", "choice-box", "choice-control", "choice-description", "choice-error", "choice-input", "choice-invalid", "choice-label", "choice-radio", "choice-text", "count-up", "css", "data-table", "data-table-idle", "depth-button", "depth-button-face", "dialog", "dialog-body", "dialog-close", "dialog-description", "dialog-footer", "dialog-header", "dialog-left", "dialog-panel", "dialog-right", "disclosure", "disclosure-icon", "divider", "divider-labelled", "empty-state", "empty-state-icon", "field", "field-chevron", "field-control", "field-counter", "field-disabled", "field-error", "field-footer", "field-icon", "field-invalid", "field-label", "field-required", "field-select", "field-trailing", "flip-back", "flip-card", "flip-face", "flip-front", "flip-stage", "flip-toggle", "hero-letter", "icon-button", "icon-button-accent", "icon-button-lg", "icon-button-sm", "icon-button-solid", "icon-button-spin", "inline-link", "is-flipped", "is-open", "is-visible", "kbd", "magnetic", "marquee", "marquee-inner", "marquee-track", "menu", "menu-chevron", "menu-end", "menu-item", "menu-item-danger", "menu-list", "menu-start", "menu-trigger", "mono", "opening-sequence", "page-width", "pagination", "pagination-gap", "pagination-page", "pagination-step", "popover", "popover-end", "popover-panel", "popover-start", "popover-title", "progress", "progress-accent", "progress-danger", "progress-fill", "progress-header", "progress-indeterminate", "progress-success", "progress-track", "radio-group", "radio-group-inline", "reveal", "scroll-progress", "sculpture-canvas", "section-label", "segmented", "segmented-option", "site-shell", "skeleton", "skeleton-block", "skeleton-circle", "skeleton-line", "skip-link", "slider", "slider-header", "spinner", "stage-canvas", "stat", "stat-suffix", "stepper", "stepper-complete", "stepper-current", "stepper-description", "stepper-label", "stepper-marker", "stepper-step", "stepper-text", "stepper-upcoming", "switch", "switch-thumb", "switch-track", "table-scroll", "tabs", "tabs-list", "tabs-panel", "tabs-tab", "tag", "tag-removable", "tag-remove", "text-link", "theme-fading", "theme-icon-moon", "theme-icon-sun", "theme-toggle", "tilt-card", "tilt-glare", "tilt-stage", "timeline", "timeline-body", "timeline-current", "timeline-date", "timeline-entry", "timeline-title", "toast", "toast-bar", "toast-close", "toast-content", "toast-danger", "toast-info", "toast-success", "toast-viewport", "toast-warning", "tooltip", "tooltip-anchor", "tooltip-bottom", "tooltip-left", "tooltip-right", "tooltip-top", "ts", "type-line", "type-run", "visually-hidden"]);

package/dist/lib/keyboard.d.ts

@@ -4,5 +4,5 @@ type Orientation = "horizontal" | "vertical";
  * Returns the index to move to for an arrow, Home, or End key press,
  * wrapping at both ends, or null when the key is not a navigation key.
  */
-export declare function nextIndexForKey(key: string, current: number, count: number, orientation?: Orientation): number | null;
+export declare function nextIndexForKey(key: string, current: number, count: number, orientation?: Orientation, direction?: "ltr" | "rtl"): number | null;
 export {};

package/dist/lib/keyboard.js

@@ -6,10 +6,13 @@ const keysFor = (orientation) => orientation === "horizontal"
  * Returns the index to move to for an arrow, Home, or End key press,
  * wrapping at both ends, or null when the key is not a navigation key.
  */
-export function nextIndexForKey(key, current, count, orientation = "horizontal") {
+export function nextIndexForKey(key, current, count, orientation = "horizontal", direction = "ltr") {
     if (count <= 0)
         return null;
-    const { previous, next } = keysFor(orientation);
+    const keys = keysFor(orientation);
+    const { previous, next } = orientation === "horizontal" && direction === "rtl"
+        ? { previous: keys.next, next: keys.previous }
+        : keys;
     if (key === next)
         return (current + 1) % count;
     if (key === previous)

package/dist/lib/layers.d.ts

@@ -0,0 +1,18 @@
+export type DismissReason = "escape" | "outside";
+export declare const LayerVisibility: import("react").Context<boolean>;
+export declare const LayerParent: import("react").Context<symbol | undefined>;
+type Layer = {
+    id: symbol;
+    parent?: symbol;
+    elements: () => (HTMLElement | null)[];
+    dismiss: (reason: DismissReason, event: KeyboardEvent | PointerEvent) => void;
+    outside: boolean;
+    floating?: () => HTMLElement | null;
+};
+export declare function layerOwnsFocus(doc: Document, id: symbol): boolean;
+/** Paint order follows dismissal order, including later-opened siblings and portaled children. */
+export declare function refreshLayerStack(doc: Document): void;
+export declare function isTopLayer(doc: Document, id: symbol): boolean;
+/** One bubble listener per owner document. Never stop propagation or cascade a dismissal. */
+export declare function registerLayer(doc: Document, layer: Layer): () => void;
+export {};