@flood-md/react 0.2.2 → 0.2.4

package/dist/select.js

@@ -0,0 +1,333 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveFieldStatus } from "./field-state.js";
+import { Children, Fragment, forwardRef, isValidElement, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState, } from "react";
+import { ScrollArea } from "./index.js";
+import { positionLayer, registerLayer, returnFocus } from "./overlay-runtime.js";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const text = (children) => Children.toArray(children).map((child) => typeof child === "string" || typeof child === "number" ? String(child) : isValidElement(child) ? text(child.props.children) : "").join("");
+function initialChoices(children, group, groupDisabled = false, groupHidden = false) {
+    return Children.toArray(children).flatMap((child) => {
+        if (!isValidElement(child))
+            return [];
+        if (child.type === Fragment)
+            return initialChoices(child.props.children, group, groupDisabled, groupHidden);
+        if (child.type === "optgroup")
+            return initialChoices(child.props.children, child.props.label, groupDisabled || Boolean(child.props.disabled), groupHidden || Boolean(child.props.hidden));
+        if (child.type !== "option")
+            return [];
+        const label = text(child.props.children);
+        return [{ value: String(child.props.value ?? label), label: child.props.label ?? label, disabled: groupDisabled || Boolean(child.props.disabled), hidden: groupHidden || Boolean(child.props.hidden), group }];
+    });
+}
+/** Internal implementation. The public entry retains the native SelectProps/ref contract. */
+export const SingleSelect = forwardRef(function SingleSelect({ children, value, defaultValue, onChange, onInvalid, onFocus, onBlur, onKeyDown, onKeyUp, onClick, disabled, required, id, className, style, title, autoFocus, invalid, status, controlSize = "md", "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": describedBy, "aria-invalid": ariaInvalid, ...nativeProps }, forwardedRef) {
+    const generatedId = useId();
+    const triggerId = id ?? `flood-select-${generatedId}`;
+    const menuId = `${triggerId}-options`, validationId = `${triggerId}-validation`;
+    const native = useRef(null), trigger = useRef(null), menu = useRef(null);
+    const scrollViewport = useRef(null);
+    const [choices, setChoices] = useState(() => initialChoices(children));
+    const [selected, setSelected] = useState(() => String(defaultValue ?? initialChoices(children).find((choice) => !choice.disabled && !choice.hidden)?.value ?? ""));
+    const [open, setOpen] = useState(false), [active, setActive] = useState(-1);
+    const activeIndex = useRef(active);
+    activeIndex.current = active;
+    const [validation, setValidation] = useState("");
+    const controlled = value !== undefined;
+    const currentValue = controlled ? String(value) : selected;
+    const current = useRef({ controlled, value: currentValue });
+    current.current = { controlled, value: currentValue };
+    const search = useRef({ value: "", time: 0 });
+    useImperativeHandle(forwardedRef, () => native.current, []);
+    function readChoices() {
+        if (!native.current)
+            return choices;
+        return Array.from(native.current.options).map((option) => {
+            const parent = option.parentElement;
+            const group = parent?.tagName === "OPTGROUP" ? parent : undefined;
+            return { value: option.value, label: option.label, disabled: option.disabled || Boolean(group?.disabled), hidden: Boolean(option.hidden) || Boolean(group?.hidden), group: group?.label };
+        });
+    }
+    useBrowserLayoutEffect(() => {
+        setChoices(readChoices());
+        if (!controlled && native.current)
+            setSelected(native.current.value);
+    }, [children, value]);
+    useBrowserLayoutEffect(() => {
+        const control = native.current;
+        if (!control)
+            return;
+        const focus = control.focus;
+        control.focus = (options) => trigger.current?.focus(options);
+        return () => { control.focus = focus; };
+    }, []);
+    useEffect(() => { if (autoFocus)
+        trigger.current?.focus(); }, [autoFocus]);
+    useEffect(() => {
+        const form = native.current?.form;
+        if (!form)
+            return;
+        const reset = (event) => setTimeout(() => {
+            if (event.defaultPrevented || !native.current)
+                return;
+            if (current.current.controlled)
+                native.current.value = current.current.value;
+            else
+                setSelected(native.current.value);
+            setChoices(readChoices());
+            setValidation("");
+            setOpen(false);
+        }, 0);
+        form.addEventListener("reset", reset);
+        return () => form.removeEventListener("reset", reset);
+    }, [nativeProps.form]);
+    useEffect(() => {
+        const observer = new MutationObserver(() => { if (trigger.current?.matches(":disabled"))
+            setOpen(false); });
+        let parent = trigger.current?.parentElement;
+        while (parent) {
+            if (parent.tagName === "FIELDSET")
+                observer.observe(parent, { attributes: true, attributeFilter: ["disabled"] });
+            parent = parent.parentElement;
+        }
+        return () => observer.disconnect();
+    }, []);
+    useEffect(() => { if (disabled || nativeProps.hidden)
+        setOpen(false); }, [disabled, nativeProps.hidden]);
+    function enabled(choice) { return !choice.disabled && !choice.hidden; }
+    function openMenu(index) {
+        if (trigger.current?.matches(":disabled"))
+            return;
+        const fresh = readChoices();
+        setChoices(fresh);
+        const nativeValue = !current.current.controlled && native.current ? native.current.value : current.current.value;
+        if (!current.current.controlled)
+            setSelected(nativeValue);
+        const selectedIndex = fresh.findIndex((choice) => choice.value === nativeValue && enabled(choice));
+        setActive(index ?? (selectedIndex >= 0 ? selectedIndex : fresh.findIndex(enabled)));
+        search.current = { value: "", time: 0 };
+        setOpen(true);
+    }
+    function commit(index) {
+        const choice = choices[index], control = native.current;
+        if (!choice || !enabled(choice) || !control || trigger.current?.matches(":disabled")) {
+            setOpen(false);
+            return;
+        }
+        if (choice.value !== control.value) {
+            control.value = choice.value;
+            control.dispatchEvent(new Event("input", { bubbles: true }));
+            control.dispatchEvent(new Event("change", { bubbles: true }));
+        }
+        setOpen(false);
+    }
+    function change(event) {
+        const next = event.currentTarget.value;
+        onChange?.(event);
+        if (!current.current.controlled)
+            setSelected(next);
+        queueMicrotask(() => {
+            if (!native.current)
+                return;
+            if (current.current.controlled)
+                native.current.value = current.current.value;
+            if (native.current.validity.valid)
+                setValidation("");
+        });
+    }
+    // Native callbacks receive events dispatched on the actual select, never a cast button event.
+    function mirror(event) { return native.current?.dispatchEvent(event) ?? true; }
+    function navigate(delta) {
+        const fresh = readChoices();
+        if (!open) {
+            openMenu();
+            return;
+        }
+        let index = active;
+        for (let step = 0; step < fresh.length; step++) {
+            const next = index + delta;
+            if (next < 0 || next >= fresh.length)
+                break;
+            index = next;
+            if (enabled(fresh[index])) {
+                setActive(index);
+                break;
+            }
+        }
+    }
+    function revealOption(index) {
+        const option = menu.current?.querySelector(`[data-option-index="${index}"]`), viewport = scrollViewport.current;
+        if (!option || !viewport)
+            return;
+        const item = option.getBoundingClientRect(), bounds = viewport.getBoundingClientRect();
+        if (item.top < bounds.top)
+            viewport.scrollTop -= bounds.top - item.top;
+        else if (item.bottom > bounds.bottom)
+            viewport.scrollTop += item.bottom - bounds.bottom;
+    }
+    useBrowserLayoutEffect(() => {
+        if (!open || !menu.current || !trigger.current)
+            return;
+        const popup = menu.current, button = trigger.current, document = popup.ownerDocument, view = document.defaultView;
+        let alive = true, frame = 0, lastViewportHeight = -1, unregister = () => { };
+        const assign = (element, property, value) => {
+            if (element.style.getPropertyValue(property) !== value)
+                element.style.setProperty(property, value);
+        };
+        const update = () => {
+            if (!alive)
+                return;
+            if (!button.isConnected || !button.getClientRects().length) {
+                setOpen(false);
+                return;
+            }
+            const rect = button.getBoundingClientRect(), visual = view.visualViewport;
+            const viewportTop = visual?.offsetTop ?? 0, viewportWidth = visual?.width ?? view.innerWidth, viewportHeight = visual?.height ?? view.innerHeight;
+            const rootSize = parseFloat(view.getComputedStyle(document.documentElement).fontSize);
+            const length = (name) => { const raw = view.getComputedStyle(button).getPropertyValue(name).trim(); return parseFloat(raw) * (raw.endsWith("rem") ? rootSize : 1); };
+            const gap = length("--flood-sys-space-2") || 0;
+            const below = Math.max(0, viewportTop + viewportHeight - rect.bottom - gap * 2), above = Math.max(0, rect.top - viewportTop - gap * 2);
+            const maxHeight = Math.min(length("--flood-sys-control-md-height") * 8, Math.max(below, above));
+            assign(popup, "width", `${Math.min(rect.width, Math.max(0, viewportWidth - gap * 2))}px`);
+            assign(popup, "max-height", `${maxHeight}px`);
+            // The shared positioner reads column-gap as its placement gap. On this
+            // block listbox it does not add layout space between options.
+            assign(popup, "column-gap", "var(--flood-sys-space-2)");
+            const css = view.getComputedStyle(popup);
+            const inset = parseFloat(css.paddingTop) + parseFloat(css.paddingBottom) + parseFloat(css.borderTopWidth) + parseFloat(css.borderBottomWidth);
+            const optionHeight = Math.max(0, maxHeight - inset);
+            if (scrollViewport.current)
+                assign(scrollViewport.current, "max-height", `${optionHeight}px`);
+            positionLayer(button, popup, "bottom", "start");
+            if (optionHeight !== lastViewportHeight) {
+                lastViewportHeight = optionHeight;
+                revealOption(activeIndex.current);
+            }
+            frame = view.requestAnimationFrame(update);
+        };
+        const start = () => {
+            if (!alive || !button.isConnected)
+                return;
+            const parent = button.closest("dialog");
+            if (parent && !parent.open) {
+                frame = view.requestAnimationFrame(start);
+                return;
+            }
+            if (typeof popup.showPopover !== "function")
+                throw new Error("Flood Select requires the native Popover API");
+            popup.style.visibility = "hidden";
+            popup.showPopover();
+            update();
+            unregister = registerLayer(document, {
+                panel: popup,
+                // Native callbacks are mirrored on the hidden select inside this span.
+                // Those synthetic focus events belong to this control, not outside it.
+                anchor: () => trigger.current?.parentElement ?? trigger.current,
+                close: () => setOpen(false),
+            });
+        };
+        const toggle = (event) => {
+            if (alive && event.newState === "closed" && !popup.matches(":popover-open"))
+                setOpen(false);
+        };
+        popup.addEventListener("toggle", toggle);
+        start();
+        return () => {
+            alive = false;
+            view.cancelAnimationFrame(frame);
+            unregister();
+            popup.removeEventListener("toggle", toggle);
+            returnFocus(popup, trigger.current);
+            if (popup.matches(":popover-open"))
+                popup.hidePopover();
+        };
+    }, [open]);
+    useEffect(() => {
+        if (!open || (choices[active] && enabled(choices[active])))
+            return;
+        const selectedIndex = choices.findIndex((choice) => choice.value === currentValue && enabled(choice));
+        setActive(selectedIndex >= 0 ? selectedIndex : choices.findIndex(enabled));
+    }, [choices, open, active, currentValue]);
+    useEffect(() => { if (open)
+        revealOption(active); }, [open, active]);
+    const displayed = choices.find((choice) => choice.value === currentValue)?.label ?? "Select an option";
+    const descriptions = [describedBy, validation && validationId].filter(Boolean).join(" ") || undefined;
+    const visibleAttributes = Object.fromEntries(Object.entries(nativeProps).filter(([key]) => key.startsWith("data-") || key.startsWith("aria-")));
+    const nativeAttributes = Object.fromEntries(Object.entries(nativeProps).filter(([key]) => !key.startsWith("data-") && !key.startsWith("aria-") && !["tabIndex", "accessKey", "dir", "lang", "hidden"].includes(key)));
+    const groups = [];
+    choices.forEach((choice, index) => {
+        if (choice.hidden)
+            return;
+        const previous = groups[groups.length - 1];
+        if (previous && previous.label === choice.group)
+            previous.items.push({ choice, index });
+        else
+            groups.push({ label: choice.group, items: [{ choice, index }] });
+    });
+    const renderOption = ({ choice, index }) => _jsxs("div", { id: `${menuId}-${index}`, role: "option", "aria-selected": choice.value === currentValue, "aria-disabled": choice.disabled || undefined, className: "flood-select__option", "data-active": index === active || undefined, "data-option-index": index, onPointerDown: (event) => { if (event.pointerType === "mouse")
+            event.preventDefault(); }, onPointerMove: () => { if (enabled(choice))
+            setActive(index); }, onClick: () => { if (enabled(choice))
+            commit(index); }, children: [_jsx("span", { children: choice.label }), _jsx("span", { className: "flood-select__selected", "aria-hidden": "true", children: choice.value === currentValue ? "✓" : "" })] }, `${index}-${choice.value}`);
+    return _jsxs("span", { className: `flood-select flood-select--custom flood-control--${controlSize}`, dir: nativeProps.dir, lang: nativeProps.lang, hidden: nativeProps.hidden, children: [_jsx("button", { ...visibleAttributes, ref: trigger, id: triggerId, type: "button", role: "combobox", disabled: disabled, tabIndex: nativeProps.tabIndex, accessKey: nativeProps.accessKey, dir: nativeProps.dir, lang: nativeProps.lang, hidden: nativeProps.hidden, className: ["flood-input flood-select__control", `flood-control--${controlSize}`, className].filter(Boolean).join(" "), style: style, title: title, "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": descriptions, "data-status": resolveFieldStatus(status, invalid || Boolean(validation), ariaInvalid), "aria-invalid": invalid || status === "error" || ariaInvalid || Boolean(validation) || undefined, "aria-required": required || undefined, "aria-expanded": open, "aria-haspopup": "listbox", "aria-controls": menuId, "aria-activedescendant": open && active >= 0 && choices[active] && !choices[active].hidden ? `${menuId}-${active}` : undefined, onFocus: (event) => { if (onFocus)
+                    mirror(new FocusEvent("focusin", { bubbles: true, relatedTarget: event.relatedTarget })); }, onBlur: (event) => { if (onBlur)
+                    mirror(new FocusEvent("focusout", { bubbles: true, relatedTarget: event.relatedTarget })); }, onClick: () => { if (onClick && !mirror(new MouseEvent("click", { bubbles: true, cancelable: true })))
+                    return; if (open)
+                    setOpen(false);
+                else
+                    openMenu(); }, onKeyUp: (event) => { if (onKeyUp)
+                    mirror(new KeyboardEvent("keyup", { key: event.key, bubbles: true, cancelable: true })); }, onKeyDown: (event) => {
+                    if (onKeyDown && !mirror(new KeyboardEvent("keydown", { key: event.key, code: event.code, bubbles: true, cancelable: true, ctrlKey: event.ctrlKey, shiftKey: event.shiftKey, altKey: event.altKey, metaKey: event.metaKey }))) {
+                        event.preventDefault();
+                        return;
+                    }
+                    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                        event.preventDefault();
+                        navigate(event.key === "ArrowDown" ? 1 : -1);
+                    }
+                    else if (event.key === "Home" || event.key === "End") {
+                        event.preventDefault();
+                        const fresh = readChoices();
+                        const index = event.key === "Home" ? fresh.findIndex(enabled) : fresh.reduce((last, choice, index) => enabled(choice) ? index : last, -1);
+                        if (open)
+                            setActive(index);
+                        else
+                            openMenu(index);
+                    }
+                    else if (event.key === "Enter" || event.key === " ") {
+                        event.preventDefault();
+                        if (open)
+                            commit(active);
+                        else
+                            openMenu();
+                    }
+                    else if (event.key === "Escape" && open) {
+                        event.preventDefault();
+                        setOpen(false);
+                    }
+                    else if (event.key === "Tab" && open)
+                        commit(active);
+                    else if (event.key.length === 1 && !event.ctrlKey && !event.altKey && !event.metaKey) {
+                        event.preventDefault();
+                        const now = Date.now();
+                        const fresh = readChoices();
+                        const query = (now - search.current.time > 700 ? "" : search.current.value) + event.key.toLocaleLowerCase();
+                        search.current = { value: query, time: now };
+                        const repeated = [...query].every((character) => character === query[0]);
+                        const needle = repeated ? query[0] : query;
+                        const from = repeated ? active + 1 : Math.max(0, active);
+                        const index = fresh.map((_, offset) => (from + offset + fresh.length) % fresh.length).find((candidate) => enabled(fresh[candidate]) && fresh[candidate].label.toLocaleLowerCase().startsWith(needle));
+                        if (!open) {
+                            setChoices(fresh);
+                            setOpen(true);
+                        }
+                        if (index !== undefined)
+                            setActive(index);
+                    }
+                }, children: _jsx("span", { className: "flood-select__value", children: displayed }) }), _jsx("select", { ...nativeAttributes, ref: native, id: `${triggerId}-native`, className: "flood-select__native", hidden: true, "aria-hidden": "true", tabIndex: -1, disabled: disabled, required: required, value: value, defaultValue: defaultValue, onChange: change, onFocus: onFocus, onBlur: onBlur, 
+                // This bridge exists only to give the callback its native select target.
+                // Ancestors must receive the original trigger event after Select handles it.
+                onKeyDown: (event) => { onKeyDown?.(event); event.stopPropagation(); }, onKeyUp: onKeyUp, onClick: onClick, onInvalid: (event) => { onInvalid?.(event); const prevented = event.defaultPrevented; event.preventDefault(); if (!prevented) {
+                    setValidation(event.currentTarget.validationMessage);
+                    trigger.current?.focus();
+                } }, children: children }), open && _jsx("div", { ref: menu, id: menuId, role: "listbox", "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : labelledBy ?? triggerId, popover: "manual", className: "flood-select__menu", onPointerDown: (event) => { if (event.pointerType === "mouse")
+                    event.preventDefault(); }, onClick: (event) => event.preventDefault(), children: _jsxs(ScrollArea, { ref: scrollViewport, orientation: "vertical", tabIndex: -1, className: "flood-select__viewport", children: [!choices.some((choice) => !choice.hidden) && _jsx("div", { className: "flood-select__empty", children: "No options" }), groups.map((group, index) => group.label ? _jsxs("div", { role: "group", "aria-label": group.label, children: [_jsx("div", { className: "flood-select__group", "aria-hidden": "true", children: group.label }), group.items.map(renderOption)] }, index) : _jsx(Fragment, { children: group.items.map(renderOption) }, index))] }) }), validation && _jsx("span", { className: "flood-select__validation", id: validationId, role: "alert", children: validation })] });
+});

package/dist/styles.css

@@ -1,6 +1,15 @@
 @import "@flood-md/tokens/tokens.css";
 @import "./foundations.css";
 
+/* A named loading indicator; buttons opt into decorative presentation. */
+.flood-loading { --flood-loading-size: 1.25rem; display: inline-flex; position: relative; flex: none; vertical-align: middle; inline-size: var(--flood-loading-size); block-size: var(--flood-loading-size); }
+.flood-loading[data-size="sm"] { --flood-loading-size: 1rem; }
+.flood-loading[data-size="lg"] { --flood-loading-size: 1.5rem; }
+.flood-loading > .flood-spinner { display: block; box-sizing: border-box; width: 100%; height: 100%; }
+.flood-root .flood-loading .flood-spinner { inline-size: 100%; block-size: 100%; }
+.flood-root .flood-button .flood-loading { --flood-loading-size: var(--flood-control-icon); }
+.flood-loading[hidden] { display: none; }
+
 :where(.flood-button, .flood-input, .flood-choice, .flood-field, .flood-link) {
   box-sizing: border-box;
   font-family: var(--flood-font-sans);
@@ -160,6 +169,8 @@
   text-underline-offset: 4px;
   text-decoration-thickness: 1px;
 }
+.flood-link--button { text-decoration: none; }
+.flood-link--button:where(.flood-button--solid) { color: var(--flood-action-text); }
 .flood-spinner {
   width: 12px;
   height: 12px;

package/dist/toolbar.d.ts

@@ -0,0 +1,2 @@
+import type { ToolbarProps } from "./index.js";
+export declare const RovingToolbar: import("react").ForwardRefExoticComponent<ToolbarProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/toolbar.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const selector = 'button:not([role]),button[role="button"],a[href]:not([role]),a[href][role="link"]';
+const independent = '[role="menu"],[role="tablist"],[role="radiogroup"],[role="listbox"],[role="combobox"],.flood-toggle-group';
+export const RovingToolbar = forwardRef(function RovingToolbar({ label, orientation = "horizontal", loop = true, className, onKeyDown, onKeyDownCapture, onFocus, ...props }, ref) {
+    const root = useRef(null), current = useRef(null), within = useRef(false);
+    const refresh = useRef(() => []);
+    useImperativeHandle(ref, () => root.current, []);
+    useBrowserLayoutEffect(() => {
+        const element = root.current, document = element.ownerDocument, view = document.defaultView;
+        const original = new Map();
+        let alive = true;
+        const restore = (node) => { const value = original.get(node); if (value == null)
+            node.removeAttribute("tabindex");
+        else
+            node.setAttribute("tabindex", value); };
+        const sync = () => {
+            if (!alive)
+                return [];
+            const owned = Array.from(element.querySelectorAll(selector)).filter(node => node.closest('[role="toolbar"]') === element && !node.closest(independent));
+            const active = document.activeElement;
+            const hadFocus = active === element || original.has(active) || (active === document.body && within.current);
+            for (const node of original.keys())
+                if (!owned.includes(node)) {
+                    restore(node);
+                    original.delete(node);
+                }
+            const enabled = owned.filter(node => !node.matches(':disabled,[aria-disabled="true"]') && !node.closest('[hidden],[inert]') && node.getClientRects().length > 0 && getComputedStyle(node).visibility !== "hidden");
+            const entry = enabled.includes(active) ? active : enabled.includes(current.current) ? current.current : enabled[0] ?? null;
+            current.current = entry;
+            for (const node of owned) {
+                if (!original.has(node))
+                    original.set(node, node.getAttribute("tabindex"));
+                const value = node === entry ? "0" : "-1";
+                if (node.getAttribute("tabindex") !== value)
+                    node.setAttribute("tabindex", value);
+            }
+            const value = entry ? "-1" : "0";
+            if (element.getAttribute("tabindex") !== value)
+                element.setAttribute("tabindex", value);
+            if (hadFocus && active !== entry && !enabled.includes(active) && element.getClientRects().length)
+                (entry ?? element).focus({ preventScroll: true });
+            return enabled;
+        };
+        refresh.current = sync;
+        sync();
+        const observer = new MutationObserver(records => { if (records.some(record => !(record.target instanceof Element) || !record.target.closest(independent)))
+            sync(); });
+        observer.observe(element, { subtree: true, childList: true, attributes: true, attributeFilter: ["disabled", "aria-disabled", "hidden", "inert", "style", "class", "tabindex", "href", "role"] });
+        const resize = typeof ResizeObserver === "function" ? new ResizeObserver(() => sync()) : undefined;
+        resize?.observe(element);
+        const focus = (event) => { within.current = element.contains(event.target); };
+        document.addEventListener("focusin", focus);
+        view.addEventListener("resize", sync);
+        return () => { alive = false; observer.disconnect(); resize?.disconnect(); document.removeEventListener("focusin", focus); view.removeEventListener("resize", sync); for (const node of original.keys())
+            restore(node); refresh.current = () => []; };
+    }, []);
+    const move = (event) => {
+        const controls = refresh.current(), index = controls.indexOf(event.target);
+        if (index < 0 || event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing)
+            return;
+        const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+        const nextKey = orientation === "vertical" ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", previousKey = orientation === "vertical" ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+        const step = event.key === nextKey ? 1 : event.key === previousKey ? -1 : 0;
+        const wanted = event.key === "Home" ? 0 : event.key === "End" ? controls.length - 1 : step ? index + step : -1;
+        if (wanted < 0 && !step)
+            return;
+        const next = loop ? (wanted + controls.length) % controls.length : Math.max(0, Math.min(controls.length - 1, wanted));
+        event.preventDefault();
+        current.current = controls[next];
+        controls[next].focus({ preventScroll: true });
+        controls[next].scrollIntoView({ block: "nearest", inline: "nearest" });
+        refresh.current();
+    };
+    return _jsx("div", { ...props, ref: root, role: "toolbar", "aria-label": label, "aria-orientation": orientation, tabIndex: -1, "data-orientation": orientation, className: ["flood-toolbar", className].filter(Boolean).join(" "), onFocus: event => { onFocus?.(event); if (event.defaultPrevented)
+            return; within.current = true; refresh.current(); }, onKeyDownCapture: event => { onKeyDownCapture?.(event); if (!event.defaultPrevented && orientation === "vertical" && event.target.getAttribute("aria-haspopup") === "menu" && ["ArrowUp", "ArrowDown"].includes(event.key))
+            move(event); }, onKeyDown: event => { onKeyDown?.(event); if (!event.defaultPrevented)
+            move(event); } });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flood-md/react",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "type": "module",
   "description": "Original Flood components for React and Next.js.",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "dependencies": {
-    "@flood-md/tokens": "0.2.2"
+    "@flood-md/tokens": "0.2.4"
   },
   "publishConfig": {
     "access": "public"