@flood-md/react 0.2.3 → 0.2.5

package/dist/navigation-layout.js

@@ -0,0 +1,77 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { IconSlot, Heading } from "./index.js";
+const classes = (...names) => names.filter(Boolean).join(" ");
+function uniqueValues(items, component) {
+    if (items.some(item => !item.value.trim()) || new Set(items.map(item => item.value)).size !== items.length)
+        throw new Error(`Flood ${component} items require unique nonempty values`);
+}
+export const NavigationMenu = forwardRef(function NavigationMenu({ items, label, currentValue, size = "md", className, ...props }, ref) {
+    uniqueValues(items, "NavigationList");
+    if (!label.trim() || items.some(item => !item.label.trim() || !item.href.trim()))
+        throw new Error("Flood NavigationList requires a name and labelled links with destinations");
+    const id = useId();
+    const groups = [];
+    for (const item of items) {
+        const previous = groups.at(-1);
+        if (previous?.label === (item.group ?? ""))
+            previous.items.push(item);
+        else
+            groups.push({ label: item.group ?? "", items: [item] });
+    }
+    const links = (entries) => entries.map(item => _jsx("li", { children: _jsxs("a", { ...item.linkProps, href: item.href, "aria-current": item.value === currentValue ? "page" : undefined, className: classes("flood-navigation-list__link", item.linkProps?.className), children: [item.icon != null && _jsx(IconSlot, { size: size, children: item.icon }), _jsxs("span", { className: "flood-navigation-list__text", children: [_jsx("span", { className: "flood-navigation-list__label", children: item.label }), item.description && _jsx("span", { className: "flood-navigation-list__description", children: item.description })] })] }) }, item.value));
+    return _jsx("nav", { ...props, ref: ref, "aria-label": label, className: classes("flood-navigation-list", className), "data-size": size, children: _jsx("ul", { role: "list", className: "flood-navigation-list__groups", children: groups.map((group, index) => group.label ? _jsxs("li", { className: "flood-navigation-list__group", children: [_jsx("p", { className: "flood-navigation-list__group-title", id: `${id}-${index}`, children: group.label }), _jsx("ul", { role: "list", "aria-labelledby": `${id}-${index}`, children: links(group.items) })] }, index) : links(group.items)) }) });
+});
+export const StepSequence = forwardRef(function StepSequence({ items, label, currentValue = items[0]?.value, orientation = "horizontal", onStepChange, statusLabels = { complete: "Completed", current: "Current step", upcoming: "Upcoming", error: "Needs attention" }, className, ...props }, ref) {
+    uniqueValues(items, "Steps");
+    if (!label.trim() || items.some(item => !item.title.trim()))
+        throw new Error("Flood Steps requires a sequence name and step titles");
+    const currentIndex = items.findIndex(item => item.value === currentValue);
+    if (currentValue !== undefined && currentIndex < 0)
+        throw new Error("Flood Steps currentValue must identify a step");
+    return _jsx("ol", { ...props, ref: ref, role: "list", "aria-label": label, "data-orientation": orientation, className: classes("flood-steps", className), children: items.map((item, index) => {
+            const current = index === currentIndex;
+            const state = item.status === "error" ? "error" : current ? "current" : item.status ?? (index < currentIndex ? "complete" : "upcoming");
+            const content = _jsxs(_Fragment, { children: [_jsx("span", { className: "flood-steps__indicator", "aria-hidden": "true", children: state === "complete" ? _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m5 12 4 4 10-10" }) }) : state === "error" ? "!" : index + 1 }), _jsxs("span", { className: "flood-steps__text", children: [_jsx("span", { className: "flood-steps__title", children: item.title }), _jsx("span", { className: "flood-visually-hidden", children: statusLabels[state] }), item.description && _jsx("span", { className: "flood-steps__description", children: item.description })] })] });
+            return _jsx("li", { "data-state": state, "aria-current": current ? "step" : undefined, children: onStepChange ? _jsx("button", { type: "button", className: "flood-steps__content flood-steps__action", disabled: item.disabled, onClick: () => onStepChange(item.value), children: content }) : _jsx("div", { className: "flood-steps__content", children: content }) }, item.value);
+        }) });
+});
+export const ContentSection = forwardRef(function ContentSection({ title, description, actions, headingLevel = 2, headingSize = "section", children, id: explicitId, className, "aria-labelledby": labelledBy, ...props }, ref) {
+    if (!title.trim() || ![2, 3, 4, 5, 6].includes(headingLevel))
+        throw new Error("Flood Section requires a nonempty title and headingLevel from 2 to 6");
+    const generated = useId(), headingId = `${explicitId ?? `flood-section-${generated}`}-title`;
+    return _jsxs("section", { ...props, ref: ref, id: explicitId, "aria-labelledby": labelledBy ?? headingId, className: classes("flood-section", className), children: [_jsxs("header", { className: "flood-section__header", children: [_jsxs("div", { className: "flood-section__heading", children: [_jsx(Heading, { id: headingId, level: headingLevel, size: headingSize, className: "flood-section__title", children: title }), description != null && _jsx("div", { className: "flood-section__description", children: description })] }), actions != null && _jsx("div", { className: "flood-section__actions", children: actions })] }), children != null && _jsx("div", { className: "flood-section__body", children: children })] });
+});
+export const SplitLayout = forwardRef(function SplitLayout({ main, aside, side = "end", ratio = "main", collapseAt = "md", gap = "6", className, style, ...props }, ref) {
+    const primary = _jsx("div", { className: "flood-split__main", children: main }, "main"), secondary = _jsx("div", { className: "flood-split__aside", children: aside }, "aside");
+    return _jsx("div", { ...props, ref: ref, className: classes("flood-split", className), style: { "--flood-layout-gap": `var(--flood-sys-space-${gap})`, ...style }, children: _jsx("div", { className: "flood-split__layout", "data-side": side, "data-ratio": ratio, "data-collapse": collapseAt, children: side === "start" ? [secondary, primary] : [primary, secondary] }) });
+});
+export const CenterLayout = forwardRef(function CenterLayout({ inline = false, maxWidth, minHeight, className, style, children, ...props }, ref) {
+    return _jsx("div", { ...props, ref: ref, className: classes("flood-center", className), "data-inline": inline || undefined, style: { minBlockSize: minHeight, "--flood-center-max": maxWidth, ...style }, children: _jsx("div", { className: "flood-center__content", children: children }) });
+});
+export const SkipNavigation = forwardRef(function SkipNavigation({ children = "Skip to content", className, onClick, href, ...props }, ref) {
+    if (!href.startsWith("#") || href.length < 2)
+        throw new Error("Flood SkipLink requires a nonempty same-page fragment href");
+    return _jsx("a", { ...props, ref: ref, href: href, className: classes("flood-skip-link", className), onClick: event => {
+            onClick?.(event);
+            if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.altKey || event.shiftKey || (props.target && props.target !== "_self"))
+                return;
+            const document = event.currentTarget.ownerDocument, view = document.defaultView;
+            let id;
+            try {
+                id = decodeURIComponent(href.slice(1));
+            }
+            catch {
+                return;
+            }
+            const target = document.getElementById(id);
+            if (!target || !view)
+                return;
+            view.requestAnimationFrame(() => {
+                if (!target.isConnected)
+                    return;
+                target.focus({ preventScroll: true });
+                target.scrollIntoView({ block: "start", behavior: view.matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "auto" });
+            });
+        }, children: children });
+});

package/dist/navigation.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
-import { OverlayScrollArea } from "./scroll-area.js";
+import { Button, IconSlot, Link, ScrollArea } from "./index.js";
 import { pageWindow } from "./page-window.js";
 const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 export const TabNavigation = forwardRef(function TabNavigation({ label, items, value, defaultValue, onValueChange, activationMode = "automatic", orientation = "horizontal", controlSize = "md", disabled = false, iconOnly = false, className, onKeyDown, id: explicitId, ...props }, ref) {
@@ -31,7 +31,7 @@ export const TabNavigation = forwardRef(function TabNavigation({ label, items, v
     }, [selected, id, items]);
     return _jsxs("div", { ...props, ref: root, id: id, className: ["flood-tabs", className].filter(Boolean).join(" "), "data-orientation": orientation, onKeyDown: event => {
             onKeyDown?.(event);
-            if (event.defaultPrevented)
+            if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing)
                 return;
             const buttons = Array.from(list.current?.querySelectorAll(':scope > button[role="tab"]:not(:disabled)') ?? []), index = buttons.indexOf(event.target);
             if (index < 0)
@@ -45,22 +45,22 @@ export const TabNavigation = forwardRef(function TabNavigation({ label, items, v
                 if (activationMode === "automatic")
                     select(buttons[next].dataset.value);
             }
-        }, children: [_jsx(OverlayScrollArea, { orientation: orientation, tabIndex: -1, className: "flood-tabs__scroll", children: _jsx("div", { ref: list, role: "tablist", "aria-label": label, "aria-orientation": orientation, className: "flood-tabs__list", onBlur: event => { if (!event.currentTarget.contains(event.relatedTarget))
-                        setFocused(undefined); }, children: items.map((item, index) => _jsxs("button", { id: `${id}-tab-${index}`, type: "button", role: "tab", "aria-selected": item.value === selected, "aria-controls": `${id}-panel-${index}`, "data-value": item.value, disabled: disabled || item.disabled, tabIndex: item.value === tabStop ? 0 : -1, "aria-label": iconOnly ? item.label : undefined, className: `flood-button flood-button--ghost flood-button--${controlSize} flood-tab${iconOnly ? " flood-icon-button" : ""}`, onFocus: () => setFocused(item.value), onClick: () => select(item.value), children: [item.icon && _jsx("span", { className: `flood-icon flood-icon--${controlSize}`, "aria-hidden": "true", children: item.icon }), !iconOnly && item.label] }, item.value)) }) }), items.map((item, index) => _jsx("div", { id: `${id}-panel-${index}`, role: "tabpanel", "aria-labelledby": `${id}-tab-${index}`, tabIndex: 0, hidden: item.value !== selected, className: "flood-tabs__panel", onFocusCapture: () => { focusedPanel.current = item.value; }, onBlurCapture: event => { if (!event.currentTarget.hidden)
+        }, children: [_jsx(ScrollArea, { orientation: orientation, tabIndex: -1, className: "flood-tabs__scroll", children: _jsx("div", { ref: list, role: "tablist", "aria-label": label, "aria-orientation": orientation, className: "flood-tabs__list", onBlur: event => { if (!event.currentTarget.contains(event.relatedTarget))
+                        setFocused(undefined); }, children: items.map((item, index) => _jsxs(Button, { variant: "ghost", size: controlSize, id: `${id}-tab-${index}`, type: "button", role: "tab", "aria-selected": item.value === selected, "aria-controls": `${id}-panel-${index}`, "data-value": item.value, disabled: disabled || item.disabled, tabIndex: item.value === tabStop ? 0 : -1, "aria-label": iconOnly ? item.label : undefined, className: `flood-tab${iconOnly ? " flood-icon-button" : ""}`, onFocus: () => setFocused(item.value), onClick: () => select(item.value), children: [item.icon && _jsx(IconSlot, { size: controlSize, children: item.icon }), !iconOnly && item.label] }, item.value)) }) }), items.map((item, index) => _jsx("div", { id: `${id}-panel-${index}`, role: "tabpanel", "aria-labelledby": `${id}-tab-${index}`, tabIndex: 0, hidden: item.value !== selected, className: "flood-tabs__panel", onFocusCapture: () => { focusedPanel.current = item.value; }, onBlurCapture: event => { if (!event.currentTarget.hidden)
                     focusedPanel.current = undefined; }, children: item.content }, item.value))] });
 });
 export const BreadcrumbNavigation = forwardRef(function BreadcrumbNavigation({ items, label = "Breadcrumb", separator = "/", className, ...props }, ref) {
-    return _jsx("nav", { ...props, ref: ref, "aria-label": label, className: ["flood-breadcrumb", className].filter(Boolean).join(" "), children: _jsx("ol", { children: items.map((item, index) => _jsxs("li", { children: [index > 0 && _jsx("span", { className: "flood-breadcrumb__separator", "aria-hidden": "true", children: separator }), item.href !== undefined ? _jsx("a", { className: "flood-link", href: item.href, "aria-current": index === items.length - 1 ? "page" : undefined, children: item.label }) : _jsx("span", { "aria-current": index === items.length - 1 ? "page" : undefined, children: item.label })] }, index)) }) });
+    return _jsx("nav", { ...props, ref: ref, "aria-label": label, className: ["flood-breadcrumb", className].filter(Boolean).join(" "), children: _jsx("ol", { children: items.map((item, index) => _jsxs("li", { children: [index > 0 && _jsx("span", { className: "flood-breadcrumb__separator", "aria-hidden": "true", children: separator }), item.href !== undefined ? _jsx(Link, { href: item.href, "aria-current": index === items.length - 1 ? "page" : undefined, children: item.label }) : _jsx("span", { "aria-current": index === items.length - 1 ? "page" : undefined, children: item.label })] }, index)) }) });
 });
 export const PageNavigation = forwardRef(function PageNavigation({ page, pageCount, onPageChange, getHref, siblingCount = 1, controlSize = "sm", disabled = false, label = "Pagination", previousLabel = "Previous page", nextLabel = "Next page", pageLabel = page => `Page ${page}`, className, ...props }, ref) {
     const pages = pageWindow(page, pageCount, siblingCount);
     const control = (target, text, name, unavailable = false) => {
         const inactive = disabled || unavailable, current = target === page;
-        const shared = { className: `flood-button flood-button--subtle flood-button--${controlSize} flood-page`, "aria-label": name, "aria-current": current && !unavailable ? "page" : undefined };
+        const shared = { className: "flood-page", "aria-label": name, "aria-current": current && !unavailable ? "page" : undefined };
         if (getHref)
-            return inactive ? _jsx("span", { ...shared, role: "link", "aria-disabled": "true", children: text }) : _jsx("a", { ...shared, href: getHref(target), onClick: event => { if (!event.defaultPrevented && event.button === 0 && !event.ctrlKey && !event.metaKey && !event.shiftKey && !event.altKey && !current)
+            return inactive ? _jsx("span", { ...shared, className: `flood-button flood-button--subtle flood-button--${controlSize} flood-page`, role: "link", "aria-disabled": "true", children: text }) : _jsx(Link, { ...shared, variant: "subtle", size: controlSize, href: getHref(target), onClick: event => { if (!event.defaultPrevented && event.button === 0 && !event.ctrlKey && !event.metaKey && !event.shiftKey && !event.altKey && !current)
                     onPageChange?.(target); }, children: text });
-        return _jsx("button", { ...shared, type: "button", disabled: inactive, onClick: () => { if (!current)
+        return _jsx(Button, { ...shared, variant: "subtle", size: controlSize, type: "button", disabled: inactive, onClick: () => { if (!current)
                 onPageChange?.(target); }, children: text });
     };
     const arrow = (previous) => _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: previous ? "m15 5-7 7 7 7" : "m9 5 7 7-7 7" }) });

package/dist/numeric-input.d.ts

@@ -0,0 +1,8 @@
+import type { NumberInputProps, InputGroup, IconButton } from "./index.js";
+interface Props extends NumberInputProps {
+    inputComponent: typeof InputGroup;
+    buttonComponent: typeof IconButton;
+}
+/** The browser owns decimal stepping, validity, editing and form submission. */
+export declare const NumericStepper: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/numeric-input.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+/** The browser owns decimal stepping, validity, editing and form submission. */
+export const NumericStepper = forwardRef(function NumericStepper({ inputComponent: Group, buttonComponent: Action, value, defaultValue = 0, onValueChange, min, max, step = 1, disabled, readOnly, controlSize = "md", decreaseLabel = "Decrease value", increaseLabel = "Increase value", className, onBlur, onKeyDown, ...props }, ref) {
+    if (!Number.isFinite(step) || step <= 0 || (min !== undefined && !Number.isFinite(min)) || (max !== undefined && !Number.isFinite(max)) || (min !== undefined && max !== undefined && min > max))
+        throw new Error("Flood NumberInput requires finite bounds and a positive step");
+    for (const number of [value, defaultValue])
+        if (number !== undefined && number !== null && !Number.isFinite(number))
+            throw new Error("Flood NumberInput value must be finite or null");
+    if (!decreaseLabel.trim() || !increaseLabel.trim())
+        throw new Error("Flood NumberInput step actions require accessible names");
+    const input = useRef(null);
+    useImperativeHandle(ref, () => input.current, []);
+    const initial = useRef(defaultValue === null ? "" : String(defaultValue));
+    const [local, setLocal] = useState(initial.current);
+    const [, refresh] = useState(0);
+    const current = value === undefined ? local : value === null ? "" : String(value);
+    const number = current === "" ? null : Number(current);
+    const publish = (text) => {
+        setLocal(text);
+        refresh(revision => revision + 1);
+        onValueChange?.(text === "" ? null : Number(text));
+    };
+    useEffect(() => {
+        const form = input.current?.form;
+        if (!form || value !== undefined)
+            return;
+        const reset = (event) => queueMicrotask(() => { if (!event.defaultPrevented)
+            setLocal(initial.current); });
+        form.addEventListener("reset", reset);
+        return () => form.removeEventListener("reset", reset);
+    }, [value, props.form]);
+    const move = (direction) => {
+        const node = input.current;
+        if (!node || disabled || readOnly || node.matches(":disabled"))
+            return;
+        const before = node.value;
+        if (direction > 0)
+            node.stepUp();
+        else
+            node.stepDown();
+        if (node.value !== before)
+            publish(node.value);
+    };
+    const glyph = (increase) => _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M5 12h14" }), increase && _jsx("path", { d: "M12 5v14" })] });
+    return _jsx(Group, { ...props, ref: input, type: "number", value: current, min: min, max: max, step: step, controlSize: controlSize, disabled: disabled, readOnly: readOnly, className: ["flood-number-input", className].filter(Boolean).join(" "), onChange: event => { if (!readOnly && !disabled)
+            publish(event.currentTarget.value); }, onBlur: event => {
+            onBlur?.(event);
+            if (event.defaultPrevented || readOnly || disabled || event.currentTarget.value === "")
+                return;
+            const node = event.currentTarget;
+            const before = node.value;
+            if (node.validity.rangeUnderflow && min !== undefined)
+                node.value = String(min);
+            if (node.validity.rangeOverflow && max !== undefined)
+                node.value = String(max);
+            if (node.value !== before)
+                publish(node.value);
+        }, onKeyDown: event => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.nativeEvent.isComposing || readOnly || disabled)
+                return;
+            if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+                event.preventDefault();
+                move(event.key === "ArrowUp" ? 1 : -1);
+            }
+        }, start: _jsx(Action, { label: decreaseLabel, variant: "ghost", size: controlSize, disabled: disabled || readOnly || (number !== null && min !== undefined && number <= min), onClick: () => move(-1), children: glyph(false) }), end: _jsx(Action, { label: increaseLabel, variant: "ghost", size: controlSize, disabled: disabled || readOnly || (number !== null && max !== undefined && number >= max), onClick: () => move(1), children: glyph(true) }) });
+});

package/dist/overlay-runtime.js

@@ -15,11 +15,17 @@ export function placeOverlay(anchor, size, viewport, side, align, gap, rtl = fal
     return { left, top, side };
 }
 export function tabbables(root) {
-    const candidates = Array.from(root.querySelectorAll('a[href],button,input,select,textarea,[tabindex],[contenteditable="true"],iframe')).filter(node => node.tabIndex >= 0 && !node.matches(':disabled,input[type="hidden"]') && !node.closest('[hidden],[inert]') && node.getClientRects().length > 0 && getComputedStyle(node).visibility !== "hidden");
+    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 instanceof HTMLInputElement) || node.type !== "radio" || !node.name)
+        if (node.localName !== "input" || node.type !== "radio" || !node.name)
             return true;
-        const group = candidates.filter((other) => other instanceof HTMLInputElement && other.type === "radio" && other.name === node.name && other.form === node.form);
+        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));
 }
@@ -31,7 +37,7 @@ export function registerLayer(document, layer) {
         stacks.set(document, layers);
     }
     layers.push(layer);
-    const top = () => layers.filter(item => item.panel.isConnected && (item.panel instanceof HTMLDialogElement ? item.panel.open : item.panel.matches(":popover-open"))).at(-1);
+    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) => {
@@ -45,6 +51,9 @@ export function registerLayer(document, layer) {
         }
         else if (path.includes(layer.panel) || path.includes(layer.anchor()))
             return;
+        // A modal backdrop must not move focus to the document after close cleanup.
+        if (layer.modal)
+            event.preventDefault();
         (layer.outside ?? layer.close)();
     };
     const focus = (event) => {
@@ -62,24 +71,42 @@ export function registerLayer(document, layer) {
 }
 const locks = new WeakMap();
 export function lockScroll(document) {
-    const style = document.documentElement.style;
+    const root = document.documentElement, style = root.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") };
+        const view = document.defaultView;
+        const computed = getComputedStyle(root);
+        const rect = root.getBoundingClientRect();
+        // Chromium can include a stable thin gutter in clientWidth while excluding it
+        // from the root's actual layout box. Preserve that box, not just clientWidth.
+        const gutter = Math.max(0, (view?.innerWidth ?? root.clientWidth) - Math.min(root.clientWidth, rect.width));
+        const leftGutter = Math.min(gutter, Math.max(0, rect.left));
+        const rightGutter = gutter - leftGutter;
+        const paddingLeft = parseFloat(computed.paddingLeft) || 0;
+        const paddingRight = parseFloat(computed.paddingRight) || 0;
+        lock = { count: 0, saved: ["overflow", "scrollbar-gutter", "padding-left", "padding-right"].map(key => [key, style.getPropertyValue(key), style.getPropertyPriority(key)]) };
         locks.set(document, lock);
+        // A stable root gutter clips top-layer painting even when its rect fills the viewport.
+        // Replace the gutter with normal-flow padding while keeping fixed modal edges flush.
+        style.setProperty("scrollbar-gutter", "auto", "important");
         style.setProperty("overflow", "hidden", "important");
-        if (reserve)
-            style.setProperty("scrollbar-gutter", "stable", "important");
+        if (leftGutter)
+            style.setProperty("padding-left", `${paddingLeft + leftGutter}px`, "important");
+        if (rightGutter)
+            style.setProperty("padding-right", `${paddingRight + rightGutter}px`, "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); };
+    return () => {
+        if (--lock.count !== 0)
+            return;
+        for (const [key, value, priority] of lock.saved) {
+            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;

package/dist/overlays.d.ts

@@ -3,5 +3,11 @@ 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>>;
+interface ModalOverlayProps extends DialogProps {
+    showCloseButton?: boolean;
+    role?: "dialog" | "alertdialog";
+    scrollBody?: boolean;
+    footer?: import("react").ReactNode;
+}
+export declare const ModalOverlay: import("react").ForwardRefExoticComponent<ModalOverlayProps & import("react").RefAttributes<HTMLDialogElement>>;
 export {};

package/dist/overlays.js

@@ -1,13 +1,22 @@
 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 { IconButton, ScrollArea } 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 target = preferred?.isConnected && panel.contains(preferred) ? preferred : panel.querySelector('[autofocus],[data-flood-autofocus]') ?? tabbables(panel.querySelector(".flood-overlay-body") ?? panel)[0] ?? tabbables(panel)[0] ?? panel;
-    target.focus({ preventScroll: true });
+    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" }) }) });
@@ -71,7 +80,7 @@ export const AnchoredOverlay = forwardRef(function AnchoredOverlay(allProps, for
                 positionLayer(anchor.current, element, side, align); frame = view.requestAnimationFrame(update); };
             frame = view.requestAnimationFrame(update);
         };
-        frame = view.requestAnimationFrame(start);
+        start();
         const toggle = (event) => {
             if (!alive || event.newState !== "closed" || element.matches(":popover-open") || !current.current.open)
                 return;
@@ -104,7 +113,7 @@ export const AnchoredOverlay = forwardRef(function AnchoredOverlay(allProps, for
                     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) {
+export const ModalOverlay = forwardRef(function ModalOverlay({ showCloseButton = true, scrollBody = false, footer, 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)
@@ -129,6 +138,8 @@ export const ModalOverlay = forwardRef(function ModalOverlay({ title, descriptio
             if (typeof element.showModal !== "function")
                 throw new Error("Flood Dialog requires native showModal");
             const previous = document.activeElement;
+            if (scrollBody)
+                element.dataset.drawerDirection = getComputedStyle(element).direction;
             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)
@@ -166,5 +177,5 @@ export const ModalOverlay = forwardRef(function ModalOverlay({ title, descriptio
                         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 })] })] });
+                }, children: [_jsxs("div", { className: "flood-overlay-header", children: [_jsx("h2", { id: `${id}-title`, className: "flood-overlay-title", children: title }), showCloseButton && _jsx(OverlayClose, { label: closeLabel, onClick: () => request(false) })] }), description && _jsx("p", { id: `${id}-description`, className: "flood-overlay-description", children: description }), open && (scrollBody ? _jsx("div", { className: "flood-drawer__body", children: _jsx(ScrollArea, { className: "flood-overlay-body", style: { height: "100%" }, children: children }) }) : _jsx("div", { className: "flood-overlay-body", children: children })), open && footer && _jsx("div", { className: "flood-drawer__footer", children: footer })] })] });
 });

package/dist/scroll-area.js

@@ -84,7 +84,7 @@ function cornerBounds(node, axis, crossStart, crossEnd, start, end, 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, ...props }, forwardedRef) {
+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);
@@ -216,5 +216,20 @@ export const OverlayScrollArea = forwardRef(function OverlayScrollArea({ orienta
         "--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", 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, "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")] });
+    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")] });
 });