@flood-md/react 0.2.2 → 0.2.4

package/dist/overlay-runtime.d.ts

@@ -0,0 +1,38 @@
+export type Side = "top" | "bottom" | "left" | "right";
+export type Align = "start" | "center" | "end";
+type Rect = {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+};
+/** Pure collision handling in layout-viewport coordinates. */
+export declare function placeOverlay(anchor: Rect, size: {
+    width: number;
+    height: number;
+}, viewport: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}, side: Side, align: Align, gap: number, rtl?: boolean): {
+    left: number;
+    top: number;
+    side: Side;
+};
+export declare function tabbables(root: HTMLElement): HTMLElement[];
+type Layer = {
+    panel: HTMLElement;
+    anchor: () => HTMLElement | null;
+    close: () => void;
+    outside?: () => void;
+    modal?: boolean;
+    tooltip?: boolean;
+};
+export declare function registerLayer(document: Document, layer: Layer): () => void;
+export declare function lockScroll(document: Document): () => void;
+export declare function positionLayer(anchor: HTMLElement, panel: HTMLElement, side: Side, align: Align): void;
+export declare function returnFocus(panel: HTMLElement, anchor: HTMLElement | null): void;
+export {};

package/dist/overlay-runtime.js

@@ -0,0 +1,110 @@
+/** Pure collision handling in layout-viewport coordinates. */
+export function placeOverlay(anchor, size, viewport, side, align, gap, rtl = false) {
+    const edge = { left: viewport.left + gap, right: viewport.left + viewport.width - gap, top: viewport.top + gap, bottom: viewport.top + viewport.height - gap };
+    const space = { top: anchor.top - edge.top, bottom: edge.bottom - anchor.bottom, left: anchor.left - edge.left, right: edge.right - anchor.right };
+    const opposite = { top: "bottom", bottom: "top", left: "right", right: "left" };
+    const needed = (side === "top" || side === "bottom" ? size.height : size.width) + gap;
+    if (space[side] < needed && space[opposite[side]] > space[side])
+        side = opposite[side];
+    const horizontal = side === "top" || side === "bottom";
+    const resolved = horizontal && rtl ? (align === "start" ? "end" : align === "end" ? "start" : align) : align;
+    let left = horizontal ? (resolved === "start" ? anchor.left : resolved === "end" ? anchor.right - size.width : anchor.left + (anchor.width - size.width) / 2) : side === "left" ? anchor.left - size.width - gap : anchor.right + gap;
+    let top = horizontal ? (side === "top" ? anchor.top - size.height - gap : anchor.bottom + gap) : (resolved === "start" ? anchor.top : resolved === "end" ? anchor.bottom - size.height : anchor.top + (anchor.height - size.height) / 2);
+    left = Math.max(edge.left, Math.min(left, edge.right - size.width));
+    top = Math.max(edge.top, Math.min(top, edge.bottom - size.height));
+    return { left, top, side };
+}
+export function tabbables(root) {
+    const candidates = Array.from(root.querySelectorAll('a[href],button,input,select,textarea,[tabindex],[contenteditable]:not([contenteditable="false"]),details > summary:first-of-type,audio[controls],video[controls],iframe')).filter(node => {
+        // Editing roots and native media may report -1 without an explicit tabindex
+        // while still participating in sequential focus. Nested editing hosts do not.
+        const implicit = !node.hasAttribute("tabindex") && ((node.isContentEditable && !node.parentElement?.isContentEditable) || node.matches("audio[controls],video[controls]"));
+        return (node.tabIndex >= 0 || implicit) && !node.matches(':disabled,input[type="hidden"]') && !node.closest('[hidden],[inert]') && node.getClientRects().length > 0 && getComputedStyle(node).visibility !== "hidden";
+    });
+    return candidates.filter(node => {
+        if (node.localName !== "input" || node.type !== "radio" || !node.name)
+            return true;
+        const radio = node;
+        const group = candidates.filter((other) => other.localName === "input" && other.type === "radio" && other.name === radio.name && other.form === radio.form);
+        return node === (group.find(other => other.checked) ?? group[0]);
+    }).sort((a, b) => (a.tabIndex > 0 ? a.tabIndex : Infinity) - (b.tabIndex > 0 ? b.tabIndex : Infinity));
+}
+const stacks = new WeakMap();
+export function registerLayer(document, layer) {
+    let layers = stacks.get(document);
+    if (!layers) {
+        layers = [];
+        stacks.set(document, layers);
+    }
+    layers.push(layer);
+    const top = () => layers.filter(item => item.panel.isConnected && (item.panel.localName === "dialog" ? item.panel.open : item.panel.matches(":popover-open"))).at(-1);
+    const key = (event) => { if (event.defaultPrevented || event.key !== "Escape" || top() !== layer)
+        return; event.preventDefault(); event.stopPropagation(); layer.close(); };
+    const pointer = (event) => {
+        if (event.defaultPrevented || top() !== layer)
+            return;
+        const path = event.composedPath();
+        if (layer.modal) {
+            const rect = layer.panel.getBoundingClientRect();
+            if (event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom)
+                return;
+        }
+        else if (path.includes(layer.panel) || path.includes(layer.anchor()))
+            return;
+        (layer.outside ?? layer.close)();
+    };
+    const focus = (event) => {
+        if (top() !== layer || layer.modal)
+            return;
+        const target = event.target;
+        if (!layer.panel.contains(target) && !layer.anchor()?.contains(target))
+            layer.close();
+    };
+    document.addEventListener("keydown", key);
+    document.addEventListener("pointerdown", pointer);
+    document.addEventListener("focusin", focus);
+    return () => { const index = layers.indexOf(layer); if (index >= 0)
+        layers.splice(index, 1); document.removeEventListener("keydown", key); document.removeEventListener("pointerdown", pointer); document.removeEventListener("focusin", focus); };
+}
+const locks = new WeakMap();
+export function lockScroll(document) {
+    const style = document.documentElement.style;
+    let lock = locks.get(document);
+    if (!lock) {
+        const reserve = (document.defaultView?.innerWidth ?? 0) - document.documentElement.clientWidth > 0;
+        lock = { count: 0, overflow: style.getPropertyValue("overflow"), overflowPriority: style.getPropertyPriority("overflow"), gutter: style.getPropertyValue("scrollbar-gutter"), gutterPriority: style.getPropertyPriority("scrollbar-gutter") };
+        locks.set(document, lock);
+        style.setProperty("overflow", "hidden", "important");
+        if (reserve)
+            style.setProperty("scrollbar-gutter", "stable", "important");
+    }
+    lock.count++;
+    return () => { if (--lock.count !== 0)
+        return; for (const [key, value, priority] of [["overflow", lock.overflow, lock.overflowPriority], ["scrollbar-gutter", lock.gutter, lock.gutterPriority]]) {
+        if (value)
+            style.setProperty(key, value, priority);
+        else
+            style.removeProperty(key);
+    } locks.delete(document); };
+}
+export function positionLayer(anchor, panel, side, align) {
+    const view = panel.ownerDocument.defaultView;
+    const visual = view.visualViewport;
+    const viewport = { left: visual?.offsetLeft ?? 0, top: visual?.offsetTop ?? 0, width: visual?.width ?? view.innerWidth, height: visual?.height ?? view.innerHeight };
+    const gap = parseFloat(getComputedStyle(panel).columnGap) || 8;
+    panel.style.setProperty("--flood-overlay-available-width", `${Math.max(0, viewport.width - 2 * gap)}px`);
+    panel.style.setProperty("--flood-overlay-available-height", `${Math.max(0, viewport.height - 2 * gap)}px`);
+    const position = placeOverlay(anchor.getBoundingClientRect(), panel.getBoundingClientRect(), viewport, side, align, gap, getComputedStyle(anchor).direction === "rtl");
+    const left = `${position.left}px`, top = `${position.top}px`;
+    if (panel.style.left !== left)
+        panel.style.left = left;
+    if (panel.style.top !== top)
+        panel.style.top = top;
+    panel.dataset.side = position.side;
+    panel.style.visibility = "visible";
+}
+export function returnFocus(panel, anchor) {
+    const active = panel.ownerDocument.activeElement;
+    if (anchor?.isConnected && !anchor.matches(":disabled") && (panel.contains(active) || active === panel.ownerDocument.body))
+        anchor.focus({ preventScroll: true });
+}

package/dist/overlays.d.ts

@@ -0,0 +1,7 @@
+import type { TooltipProps, PopoverProps, DialogProps } from "./index.js";
+type AnchoredProps = (TooltipProps | PopoverProps) & {
+    kind: "tooltip" | "popover";
+};
+export declare const AnchoredOverlay: import("react").ForwardRefExoticComponent<AnchoredProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ModalOverlay: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<HTMLDialogElement>>;
+export {};

package/dist/overlays.js

@@ -0,0 +1,179 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { IconButton } from "./index.js";
+import { positionLayer, registerLayer, returnFocus, lockScroll, tabbables } from "./overlay-runtime.js";
+import { mergeDescriptions } from "./field-state.js";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function useCurrent(value) { const ref = useRef(value); useBrowserLayoutEffect(() => { ref.current = value; }); return ref; }
+function focusContent(panel, preferred) {
+    const available = (node) => Boolean(node?.isConnected && panel.contains(node) && !node.matches(":disabled") && !node.closest("[hidden],[inert]") && node.getClientRects().length && getComputedStyle(node).visibility !== "hidden");
+    const candidates = [preferred, ...panel.querySelectorAll('[autofocus],[data-flood-autofocus]'), ...tabbables(panel.querySelector(".flood-overlay-body") ?? panel), ...tabbables(panel), panel];
+    for (const target of candidates) {
+        if (!available(target))
+            continue;
+        const previous = panel.ownerDocument.activeElement;
+        target.focus({ preventScroll: true });
+        // A host focus handler may intentionally redirect focus elsewhere.
+        if (panel.ownerDocument.activeElement === target || panel.ownerDocument.activeElement !== previous)
+            return;
+    }
+}
+function OverlayClose({ label, onClick }) {
+    return _jsx(IconButton, { label: label, size: "sm", variant: "subtle", className: "flood-overlay-close", onClick: onClick, children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "m4 4 16 16M20 4 4 20" }) }) });
+}
+export const AnchoredOverlay = forwardRef(function AnchoredOverlay(allProps, forwardedRef) {
+    const { kind, trigger, side = "bottom", align = "start", disabled = false, id: explicitId, className, style, ...native } = allProps;
+    const pop = allProps, tip = allProps;
+    const [local, setLocal] = useState(kind === "popover" ? Boolean(pop.defaultOpen) : false);
+    const open = kind === "tooltip" ? local : pop.open ?? local;
+    const anchor = useRef(null), panel = useRef(null), generated = useId();
+    const id = explicitId ?? `flood-overlay-${generated}`, setAnchor = useCallback((node) => { anchor.current = node; }, []);
+    const hovered = useRef(false), overPanel = useRef(false), focused = useRef(false), suppressed = useRef(false);
+    const timer = useRef(undefined);
+    const clear = () => { clearTimeout(timer.current); timer.current = undefined; };
+    const request = (next) => { if (kind === "tooltip" || pop.open === undefined)
+        setLocal(next); if (kind === "popover")
+        pop.onOpenChange?.(next); };
+    const close = () => { clear(); if (kind === "tooltip") {
+        suppressed.current = true;
+        overPanel.current = false;
+    } request(false); };
+    const current = useCurrent({ close, request, disabled, open, initialFocusRef: pop.initialFocusRef });
+    useImperativeHandle(forwardedRef, () => panel.current, []);
+    useEffect(() => () => clearTimeout(timer.current), []);
+    useEffect(() => { if (kind === "tooltip" && disabled) {
+        clear();
+        setLocal(false);
+    } }, [disabled, kind]);
+    const leave = () => { clear(); if (!hovered.current && !overPanel.current && !focused.current) {
+        suppressed.current = false;
+        timer.current = setTimeout(() => request(false), 120);
+    } };
+    const enter = (immediate = false) => { clear(); if (disabled || suppressed.current)
+        return; if (immediate)
+        setLocal(true);
+    else
+        timer.current = setTimeout(() => setLocal(true), Number.isFinite(tip.delay) ? Math.max(0, tip.delay ?? 300) : 300); };
+    useBrowserLayoutEffect(() => {
+        if (!open || !panel.current)
+            return;
+        const element = panel.current, document = element.ownerDocument, view = document.defaultView;
+        let alive = true, unregister = () => { }, frame = 0;
+        const start = () => {
+            if (!alive || !anchor.current?.isConnected)
+                return;
+            const parent = anchor.current.closest("dialog");
+            if (parent && !parent.open) {
+                frame = view.requestAnimationFrame(start);
+                return;
+            }
+            if (typeof element.showPopover !== "function")
+                throw new Error("Flood overlays require the native Popover API");
+            element.style.visibility = "hidden";
+            element.showPopover();
+            positionLayer(anchor.current, element, side, align);
+            unregister = registerLayer(document, { panel: element, anchor: () => anchor.current, close: () => current.current.close(), tooltip: kind === "tooltip" });
+            if (kind === "popover")
+                focusContent(element, current.current.initialFocusRef?.current);
+            const update = () => { if (!alive)
+                return; if (anchor.current?.isConnected)
+                positionLayer(anchor.current, element, side, align); frame = view.requestAnimationFrame(update); };
+            frame = view.requestAnimationFrame(update);
+        };
+        start();
+        const toggle = (event) => {
+            if (!alive || event.newState !== "closed" || element.matches(":popover-open") || !current.current.open)
+                return;
+            current.current.request(false);
+            queueMicrotask(() => { if (alive && current.current.open && element.isConnected && !element.matches(":popover-open") && anchor.current?.isConnected) {
+                element.showPopover();
+                positionLayer(anchor.current, element, side, align);
+                if (kind === "popover")
+                    focusContent(element, current.current.initialFocusRef?.current);
+            } });
+        };
+        element.addEventListener("toggle", toggle);
+        return () => { alive = false; view.cancelAnimationFrame(frame); unregister(); element.removeEventListener("toggle", toggle); if (kind === "popover")
+            returnFocus(element, anchor.current); if (element.matches(":popover-open"))
+            element.hidePopover(); };
+    }, [open, side, align, kind]);
+    const triggerProps = { ref: setAnchor, type: "button", ...(kind === "tooltip" ? {
+            "aria-describedby": disabled ? undefined : id,
+            onPointerEnter: event => { if (event.pointerType === "touch")
+                return; hovered.current = true; enter(); },
+            onPointerLeave: () => { hovered.current = false; leave(); }, onFocus: () => { focused.current = true; enter(true); }, onBlur: () => { focused.current = false; leave(); },
+        } : { disabled, "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": id, onClick: () => request(!open) }) };
+    // Remove component-only props before forwarding native div attributes.
+    const { title: unusedTitle, content: unusedContent, children: unusedChildren, open: unusedOpen, defaultOpen: unusedDefault, onOpenChange: unusedChange, delay: unusedDelay, closeLabel: unusedClose, initialFocusRef: unusedFocus, ...attributes } = native;
+    return _jsxs(_Fragment, { children: [trigger(triggerProps), _jsx("div", { ...attributes, ref: panel, id: id, popover: "manual", role: kind === "tooltip" ? "tooltip" : "dialog", "aria-labelledby": kind === "popover" ? `${id}-title` : undefined, tabIndex: kind === "popover" ? -1 : undefined, className: ["flood-overlay-panel", kind === "tooltip" ? "flood-tooltip" : "flood-popover", className].filter(Boolean).join(" "), style: style, onPointerEnter: event => { attributes.onPointerEnter?.(event); if (kind === "tooltip") {
+                    overPanel.current = true;
+                    clear();
+                } }, onPointerLeave: event => { attributes.onPointerLeave?.(event); if (kind === "tooltip") {
+                    overPanel.current = false;
+                    leave();
+                } }, children: kind === "tooltip" ? tip.content : _jsxs(_Fragment, { children: [_jsxs("div", { className: "flood-overlay-header", children: [_jsx("h2", { id: `${id}-title`, className: "flood-overlay-title", children: pop.title }), _jsx(OverlayClose, { label: pop.closeLabel ?? "Close", onClick: close })] }), open && _jsx("div", { className: "flood-overlay-body", children: pop.children })] }) })] });
+});
+export const ModalOverlay = forwardRef(function ModalOverlay({ title, description, trigger, children, open: controlled, defaultOpen = false, onOpenChange, disabled = false, closeLabel = "Close", closeOnOutsideClick = true, initialFocusRef, id: explicitId, className, onKeyDown, "aria-describedby": describedBy, ...props }, forwardedRef) {
+    const [local, setLocal] = useState(defaultOpen), open = controlled ?? local;
+    const dialog = useRef(null), anchor = useRef(null), generated = useId(), id = explicitId ?? `flood-dialog-${generated}`;
+    const request = (next) => { if (controlled === undefined)
+        setLocal(next); onOpenChange?.(next); };
+    const current = useCurrent({ open, request, closeOnOutsideClick, initialFocusRef });
+    const setAnchor = useCallback((node) => { anchor.current = node; }, []);
+    useImperativeHandle(forwardedRef, () => dialog.current, []);
+    useBrowserLayoutEffect(() => {
+        if (!open || !dialog.current)
+            return;
+        const element = dialog.current, document = element.ownerDocument;
+        const view = document.defaultView;
+        let alive = true, frame = 0, dispose = () => { };
+        const start = () => {
+            if (!alive)
+                return;
+            const parent = element.parentElement?.closest("dialog");
+            if (parent && !parent.open) {
+                frame = view.requestAnimationFrame(start);
+                return;
+            }
+            if (typeof element.showModal !== "function")
+                throw new Error("Flood Dialog requires native showModal");
+            const previous = document.activeElement;
+            element.showModal();
+            const unlock = lockScroll(document);
+            const unregister = registerLayer(document, { panel: element, anchor: () => anchor.current, modal: true, close: () => current.current.request(false), outside: () => { if (current.current.closeOnOutsideClick)
+                    current.current.request(false); } });
+            // Escape always closes, even when outside dismissal is disabled.
+            const cancel = (event) => { event.preventDefault(); current.current.request(false); };
+            const closed = () => { if (element.open || !current.current.open)
+                return; current.current.request(false); queueMicrotask(() => { if (current.current.open && element.isConnected && !element.open) {
+                element.showModal();
+                focusContent(element, current.current.initialFocusRef?.current);
+            } }); };
+            element.addEventListener("cancel", cancel);
+            element.addEventListener("close", closed);
+            focusContent(element, current.current.initialFocusRef?.current);
+            dispose = () => { unregister(); unlock(); element.removeEventListener("cancel", cancel); element.removeEventListener("close", closed); if (element.open)
+                element.close(); returnFocus(element, anchor.current ?? previous); };
+        };
+        start();
+        return () => { alive = false; view.cancelAnimationFrame(frame); dispose(); };
+    }, [open]);
+    return _jsxs(_Fragment, { children: [trigger({ ref: setAnchor, type: "button", disabled, "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": id, onClick: () => request(true) }), _jsxs("dialog", { ...props, ref: dialog, id: id, "aria-modal": "true", "aria-labelledby": `${id}-title`, "aria-describedby": mergeDescriptions(describedBy, Boolean(description) && `${id}-description`), className: ["flood-dialog", className].filter(Boolean).join(" "), onKeyDown: event => {
+                    onKeyDown?.(event);
+                    if (event.defaultPrevented || event.key !== "Tab")
+                        return;
+                    const items = tabbables(event.currentTarget), first = items[0], last = items.at(-1), active = event.currentTarget.ownerDocument.activeElement;
+                    if (!first) {
+                        event.preventDefault();
+                        return;
+                    }
+                    if (event.shiftKey && (active === first || !items.includes(active))) {
+                        event.preventDefault();
+                        last?.focus();
+                    }
+                    else if (!event.shiftKey && (active === last || !items.includes(active))) {
+                        event.preventDefault();
+                        first.focus();
+                    }
+                }, children: [_jsxs("div", { className: "flood-overlay-header", children: [_jsx("h2", { id: `${id}-title`, className: "flood-overlay-title", children: title }), _jsx(OverlayClose, { label: closeLabel, onClick: () => request(false) })] }), description && _jsx("p", { id: `${id}-description`, className: "flood-overlay-description", children: description }), open && _jsx("div", { className: "flood-overlay-body", children: children })] })] });
+});

package/dist/page-window.d.ts

@@ -0,0 +1 @@
+export declare function pageWindow(page: number, count: number, siblings: 0 | 1 | 2): Array<number | "gap-start" | "gap-end">;

package/dist/page-window.js

@@ -0,0 +1,15 @@
+export function pageWindow(page, count, siblings) {
+    if (!Number.isSafeInteger(count) || count < 1 || !Number.isSafeInteger(page) || page < 1 || page > count)
+        throw new RangeError("Flood Pagination requires a valid page within a positive safe-integer pageCount");
+    if (![0, 1, 2].includes(siblings))
+        throw new RangeError("Flood Pagination siblingCount must be 0, 1 or 2");
+    const range = (from, to) => Array.from({ length: Math.max(0, to - from + 1) }, (_, index) => from + index);
+    const budget = 2 * siblings + 5;
+    if (count <= budget)
+        return range(1, count);
+    if (page <= siblings + 3)
+        return [...range(1, 2 * siblings + 3), "gap-end", count];
+    if (page >= count - siblings - 2)
+        return [1, "gap-start", ...range(count - 2 * siblings - 2, count)];
+    return [1, "gap-start", ...range(page - siblings, page + siblings), "gap-end", count];
+}

package/dist/scroll-area.d.ts

@@ -0,0 +1,3 @@
+import type { ScrollAreaProps } from "./index.js";
+/** Original overlay chrome; the viewport itself remains a browser-native scroll container. */
+export declare const OverlayScrollArea: import("react").ForwardRefExoticComponent<ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/scroll-area.js

@@ -0,0 +1,235 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+const rtlModes = new WeakMap();
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function rtlMode(document) {
+    const saved = rtlModes.get(document);
+    if (saved)
+        return saved;
+    const probe = document.createElement("div"), content = document.createElement("div");
+    probe.dir = "rtl";
+    probe.style.cssText = "position:fixed;left:-10000px;width:4px;height:1px;overflow:scroll;visibility:hidden";
+    content.style.width = "8px";
+    probe.appendChild(content);
+    document.body.appendChild(probe);
+    let mode = "default";
+    if (probe.scrollLeft === 0) {
+        probe.scrollLeft = 1;
+        mode = probe.scrollLeft === 0 ? "negative" : "reverse";
+    }
+    probe.remove();
+    rtlModes.set(document, mode);
+    return mode;
+}
+function horizontalOffset(element, rtl) {
+    const max = element.scrollWidth - element.clientWidth;
+    const value = !rtl ? element.scrollLeft : rtlMode(element.ownerDocument) === "negative" ? max + element.scrollLeft : rtlMode(element.ownerDocument) === "reverse" ? max - element.scrollLeft : element.scrollLeft;
+    return Math.max(0, Math.min(max, value));
+}
+function scrollToOffset(element, axis, value) {
+    if (axis === "vertical") {
+        element.scrollTop = value;
+        return;
+    }
+    const max = element.scrollWidth - element.clientWidth;
+    const next = Math.max(0, Math.min(max, value));
+    element.scrollLeft = getComputedStyle(element).direction !== "rtl" ? next : rtlMode(element.ownerDocument) === "negative" ? next - max : rtlMode(element.ownerDocument) === "reverse" ? max - next : next;
+}
+const emptyBar = { visible: false, length: 0, thumb: 0, position: 0, max: 0, offset: 0, left: 0, top: 0, size: 0 };
+const empty = { enhanced: false, vertical: emptyBar, horizontal: emptyBar };
+const sameBar = (a, b) => a.visible === b.visible && a.length === b.length && a.thumb === b.thumb && a.position === b.position && a.max === b.max && a.offset === b.offset && a.left === b.left && a.top === b.top && a.size === b.size;
+/** Keep the whole rail clear of rounded corners that actually clip this viewport. */
+function cornerBounds(node, axis, crossStart, crossEnd, start, end, inset) {
+    const viewport = node.getBoundingClientRect();
+    const scaleX = node.offsetWidth ? viewport.width / node.offsetWidth : 1;
+    const scaleY = node.offsetHeight ? viewport.height / node.offsetHeight : 1;
+    if (!scaleX || !scaleY)
+        return { start, end };
+    for (let ancestor = node; ancestor; ancestor = ancestor.parentElement) {
+        const css = getComputedStyle(ancestor);
+        if (ancestor !== node && ![css.overflowX, css.overflowY].some(value => ["hidden", "clip", "auto", "scroll"].includes(value)))
+            continue;
+        const radii = [css.borderTopLeftRadius, css.borderTopRightRadius, css.borderBottomRightRadius, css.borderBottomLeftRadius];
+        if (!radii.some(value => value.split(/\s+/).some(part => parseFloat(part) > 0)))
+            continue;
+        const rect = ancestor.getBoundingClientRect();
+        const left = (rect.left - viewport.left) / scaleX - node.clientLeft;
+        const top = (rect.top - viewport.top) / scaleY - node.clientTop;
+        const width = rect.width / scaleX, height = rect.height / scaleY;
+        const radius = (value) => {
+            const [x, y = x] = value.split(/\s+/);
+            const resolve = (part, dimension) => part.endsWith("%") ? parseFloat(part) * dimension / 100 : parseFloat(part) || 0;
+            return { x: resolve(x, width), y: resolve(y, height) };
+        };
+        const corners = radii.map(radius);
+        // CSS scales overlapping elliptical radii together, including asymmetric corners.
+        const [tl, tr, br, bl] = corners;
+        const factor = Math.min(1, width / (tl.x + tr.x || 1), width / (bl.x + br.x || 1), height / (tl.y + bl.y || 1), height / (tr.y + br.y || 1));
+        corners.forEach(corner => { corner.x *= factor; corner.y *= factor; });
+        const isVertical = axis === "vertical";
+        const crossLow = isVertical ? left : top, crossHigh = crossLow + (isVertical ? width : height);
+        const mainLow = isVertical ? top : left, mainHigh = mainLow + (isVertical ? height : width);
+        const cap = (pair) => Math.max(0, ...pair.map((corner, side) => {
+            const crossRadius = isVertical ? corner.x : corner.y;
+            const nearCorner = side === 0 ? crossStart < crossLow + crossRadius + inset : crossEnd > crossHigh - crossRadius - inset;
+            return crossRadius > 0 && nearCorner && crossEnd > crossLow && crossStart < crossHigh ? isVertical ? corner.y : corner.x : 0;
+        }));
+        const startCap = cap(isVertical ? [tl, tr] : [tl, bl]);
+        const endCap = cap(isVertical ? [bl, br] : [tr, br]);
+        if (startCap)
+            start = Math.max(start, mainLow + startCap + inset);
+        if (endCap)
+            end = Math.min(end, mainHigh - endCap - inset);
+    }
+    return { start, end: Math.max(start, end) };
+}
+/** Original overlay chrome; the viewport itself remains a browser-native scroll container. */
+export const OverlayScrollArea = forwardRef(function OverlayScrollArea({ orientation = "vertical", contentInset = "none", children, className, style, tabIndex = 0, role, onFocus, ...props }, forwardedRef) {
+    const id = useId();
+    const viewport = useRef(null), content = useRef(null);
+    const vertical = useRef(null), horizontal = useRef(null);
+    const [measurements, setMeasurements] = useState(empty);
+    const [dragging, setDragging] = useState(null);
+    const metrics = useRef(measurements);
+    metrics.current = measurements;
+    const drag = useRef(null);
+    useImperativeHandle(forwardedRef, () => viewport.current, []);
+    useBrowserLayoutEffect(() => {
+        const node = viewport.current, contents = content.current;
+        if (!node || !contents || typeof ResizeObserver === "undefined")
+            return;
+        let frame = 0;
+        const measure = () => {
+            frame = 0;
+            const computed = getComputedStyle(node), rootSize = parseFloat(getComputedStyle(node.ownerDocument.documentElement).fontSize);
+            const length = (name) => { const value = computed.getPropertyValue(name).trim(); return parseFloat(value) * (value.endsWith("rem") ? rootSize : 1); };
+            const size = length("--flood-sys-scrollbar-size"), inset = length("--flood-sys-scrollbar-inset"), minimum = length("--flood-sys-scrollbar-min-thumb");
+            const enhanced = size > 0 && inset >= 0 && minimum > 0;
+            if (!enhanced) {
+                setMeasurements((old) => old.enhanced ? empty : old);
+                return;
+            }
+            const hasVertical = orientation !== "horizontal" && node.scrollHeight > node.clientHeight + 1;
+            const hasHorizontal = orientation !== "vertical" && node.scrollWidth > node.clientWidth + 1;
+            const rtl = computed.direction === "rtl";
+            const make = (axis) => {
+                const isVertical = axis === "vertical";
+                const client = isVertical ? node.clientHeight : node.clientWidth, total = isVertical ? node.scrollHeight : node.scrollWidth;
+                const cross = isVertical ? rtl ? inset : node.clientWidth - inset - size : node.clientHeight - inset - size;
+                const mainStart = inset + (!isVertical && hasVertical && rtl ? size + inset : 0);
+                const mainEnd = client - inset - ((isVertical ? hasHorizontal : hasVertical && !rtl) ? size + inset : 0);
+                const bounds = cornerBounds(node, axis, cross, cross + size, mainStart, mainEnd, inset);
+                const length = Math.max(0, bounds.end - bounds.start);
+                const thumb = Math.min(length, Math.max(minimum, total > 0 ? length * client / total : length));
+                const max = Math.max(0, total - client), offset = isVertical ? node.scrollTop : horizontalOffset(node, rtl);
+                return { visible: isVertical ? hasVertical : hasHorizontal, length, thumb, max, offset, position: max > 0 ? offset / max * (length - thumb) : 0, size,
+                    left: node.offsetLeft + node.clientLeft + (isVertical ? cross : bounds.start),
+                    top: node.offsetTop + node.clientTop + (isVertical ? bounds.start : cross) };
+            };
+            const next = { enhanced, vertical: make("vertical"), horizontal: make("horizontal") };
+            setMeasurements((old) => old.enhanced === next.enhanced && sameBar(old.vertical, next.vertical) && sameBar(old.horizontal, next.horizontal) ? old : next);
+        };
+        const schedule = () => { if (!frame)
+            frame = requestAnimationFrame(measure); };
+        const resize = new ResizeObserver(schedule);
+        resize.observe(node);
+        resize.observe(contents);
+        const mutation = new MutationObserver(schedule);
+        mutation.observe(contents, { subtree: true, childList: true, characterData: true, attributes: true });
+        // A writing-direction change can move the vertical rail without resizing the content.
+        const direction = new MutationObserver(schedule);
+        let ancestor = node;
+        while (ancestor) {
+            direction.observe(ancestor, { attributes: true, attributeFilter: ["dir", "class", "style"] });
+            ancestor = ancestor.parentElement;
+        }
+        node.addEventListener("scroll", schedule, { passive: true });
+        window.addEventListener("resize", schedule);
+        measure();
+        return () => { if (frame)
+            cancelAnimationFrame(frame); resize.disconnect(); mutation.disconnect(); direction.disconnect(); node.removeEventListener("scroll", schedule); window.removeEventListener("resize", schedule); };
+    }, [orientation, contentInset]);
+    useEffect(() => {
+        const wheel = (event) => {
+            const node = viewport.current;
+            if (!node)
+                return;
+            const computed = getComputedStyle(node);
+            const multiplier = event.deltaMode === 1 ? parseFloat(computed.lineHeight) || 16 : event.deltaMode === 2 ? node.clientHeight : 1;
+            const deltaY = orientation !== "horizontal" ? event.deltaY * multiplier : 0;
+            const deltaX = orientation !== "vertical" ? (orientation === "horizontal" && !event.deltaX ? event.deltaY : event.deltaX) * multiplier : 0;
+            const beforeY = node.scrollTop, beforeX = horizontalOffset(node, computed.direction === "rtl");
+            const nextY = Math.max(0, Math.min(node.scrollHeight - node.clientHeight, beforeY + deltaY));
+            const nextX = Math.max(0, Math.min(node.scrollWidth - node.clientWidth, beforeX + deltaX));
+            const consumed = nextY !== beforeY || nextX !== beforeX;
+            const contained = (deltaY !== 0 && ["contain", "none"].includes(computed.overscrollBehaviorY)) || (deltaX !== 0 && ["contain", "none"].includes(computed.overscrollBehaviorX));
+            if (consumed || contained)
+                event.preventDefault();
+            if (deltaY)
+                node.scrollTop = nextY;
+            if (deltaX)
+                scrollToOffset(node, "horizontal", nextX);
+        };
+        const tracks = [vertical.current, horizontal.current].filter((track) => Boolean(track));
+        tracks.forEach((track) => track.addEventListener("wheel", wheel, { passive: false }));
+        return () => tracks.forEach((track) => track.removeEventListener("wheel", wheel));
+    }, [measurements.vertical.visible, measurements.horizontal.visible, orientation]);
+    function pointerDown(event, axis) {
+        if (event.button !== 0 || !viewport.current)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const bar = metrics.current[axis];
+        drag.current = { axis, pointer: event.pointerId, start: axis === "vertical" ? event.clientY : event.clientX, offset: bar.offset };
+        event.currentTarget.setPointerCapture(event.pointerId);
+        setDragging(axis);
+    }
+    function pointerMove(event) {
+        const active = drag.current, node = viewport.current;
+        if (!active || active.pointer !== event.pointerId || !node)
+            return;
+        const bar = metrics.current[active.axis], distance = (active.axis === "vertical" ? event.clientY : event.clientX) - active.start;
+        if (bar.length > bar.thumb)
+            scrollToOffset(node, active.axis, active.offset + distance * bar.max / (bar.length - bar.thumb));
+    }
+    function pointerEnd() { drag.current = null; setDragging(null); }
+    function trackDown(event, axis) {
+        if (event.button !== 0 || !viewport.current)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const bar = metrics.current[axis], rect = event.currentTarget.getBoundingClientRect();
+        const click = axis === "vertical" ? event.clientY - rect.top : event.clientX - rect.left;
+        if (bar.length > bar.thumb)
+            scrollToOffset(viewport.current, axis, (click - bar.thumb / 2) * bar.max / (bar.length - bar.thumb));
+    }
+    const renderBar = (axis) => {
+        const bar = measurements[axis];
+        if (!measurements.enhanced || !bar.visible)
+            return null;
+        const isVertical = axis === "vertical";
+        return _jsx("div", { ref: isVertical ? vertical : horizontal, className: `flood-scroll-area__track flood-scroll-area__track--${axis}`, "aria-hidden": "true", "data-dragging": dragging === axis || undefined, style: { left: bar.left, top: bar.top, width: isVertical ? bar.size : bar.length, height: isVertical ? bar.length : bar.size }, onPointerDown: (event) => trackDown(event, axis), children: _jsx("div", { className: "flood-scroll-area__thumb", style: { width: isVertical ? "100%" : bar.thumb, height: isVertical ? bar.thumb : "100%", transform: isVertical ? `translateY(${bar.position}px)` : `translateX(${bar.position}px)` }, onPointerDown: (event) => pointerDown(event, axis), onPointerMove: pointerMove, onPointerUp: pointerEnd, onPointerCancel: pointerEnd, onLostPointerCapture: pointerEnd }) });
+    };
+    const rootStyle = { width: style?.width, minWidth: style?.minWidth, maxWidth: style?.maxWidth, inlineSize: style?.inlineSize, minInlineSize: style?.minInlineSize, maxInlineSize: style?.maxInlineSize };
+    const contentStyle = contentInset === "scrollbar" && measurements.enhanced ? {
+        "--flood-scroll-content-inline": measurements.vertical.visible ? "calc(var(--flood-sys-scrollbar-size) + 2 * var(--flood-sys-scrollbar-inset))" : "0px",
+        "--flood-scroll-content-block": measurements.horizontal.visible ? "calc(var(--flood-sys-scrollbar-size) + 2 * var(--flood-sys-scrollbar-inset))" : "0px",
+    } : undefined;
+    const named = props["aria-label"] || props["aria-labelledby"];
+    return _jsxs("div", { className: "flood-scroll-area", hidden: props.hidden, dir: props.dir, lang: props.lang, style: rootStyle, children: [_jsx("div", { ...props, id: props.id ?? `flood-scroll-${id}`, ref: viewport, tabIndex: tabIndex, role: role ?? (named ? "region" : undefined), className: ["flood-scroll-area__viewport", className].filter(Boolean).join(" "), style: style, onFocus: event => {
+                    onFocus?.(event);
+                    if (event.defaultPrevented || event.target === event.currentTarget)
+                        return;
+                    const target = event.target, node = event.currentTarget;
+                    if (node.ownerDocument.activeElement !== target)
+                        return;
+                    const layer = target.closest("[popover], dialog[open]");
+                    if (layer && node.contains(layer))
+                        return;
+                    const box = target.getBoundingClientRect(), bounds = node.getBoundingClientRect();
+                    const outsideX = orientation !== "vertical" && (box.left < bounds.left || box.right > bounds.right);
+                    const outsideY = orientation !== "horizontal" && (box.top < bounds.top || box.bottom > bounds.bottom);
+                    if (outsideX || outsideY)
+                        target.scrollIntoView({ block: "nearest", inline: "nearest" });
+                }, "data-orientation": orientation, "data-scrollbars": measurements.enhanced ? "overlay" : undefined, children: _jsx("div", { className: "flood-scroll-area__content", ref: content, style: contentStyle, children: children }) }), renderBar("vertical"), renderBar("horizontal")] });
+});

package/dist/select.d.ts

@@ -0,0 +1,3 @@
+import type { SelectProps } from "./index.js";
+/** Internal implementation. The public entry retains the native SelectProps/ref contract. */
+export declare const SingleSelect: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLSelectElement>>;