@flood-md/react 0.2.10 → 0.2.12

package/dist/navigation-tree.js

@@ -1,16 +1,24 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
-import { IconButton, IconSlot, Link } from "./index.js";
+import { NavigationItem, Popover, NavigationTree } from "./index.js";
 const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 const branch = (item) => item.children !== undefined || item.content !== undefined;
 /** Ordinary website navigation uses disclosure lists, not application tree selection semantics. */
-export const HierarchicalNavigation = /* @__PURE__ */ forwardRef(function HierarchicalNavigation({ label, items, currentValue, expandedValues, defaultExpandedValues = [], onExpandedValuesChange, expandLabel = (item, expanded) => `${expanded ? "Collapse" : "Expand"} ${item.label}`, size = "md", id: explicitId, className, tabIndex = -1, ...props }, forwardedRef) {
+export const HierarchicalNavigation = /* @__PURE__ */ forwardRef(function HierarchicalNavigation({ label, items, currentValue, currentKind = "page", expandedValues, defaultExpandedValues = [], onExpandedValuesChange, expandLabel = (item, expanded) => `${expanded ? "Collapse" : "Expand"} ${item.label}`, size = "md", variant = "quiet", compact = false, flyoutSide = "right", branchGuides = false, id: explicitId, className, tabIndex = -1, ...props }, forwardedRef) {
     if (!label.trim())
         throw new Error("Flood NavigationTree requires a nonempty label");
     const generated = useId(), id = explicitId ?? `flood-navigation-tree-${generated}`;
     const root = useRef(null);
     useImperativeHandle(forwardedRef, () => root.current, []);
     const [local, setLocal] = useState(() => [...new Set(defaultExpandedValues)]);
+    const [flyout, setFlyout] = useState(null);
+    const hoverTimer = useRef(undefined);
+    const clearHover = () => clearTimeout(hoverTimer.current);
+    useEffect(() => { setFlyout(null); return clearHover; }, [compact, currentValue]);
+    const leaveFlyout = (value) => {
+        clearHover();
+        hoverTimer.current = setTimeout(() => setFlyout(current => current?.value === value && current.preview ? null : current), 240);
+    };
     const expanded = new Set(expandedValues ?? local);
     const known = new Set(), visible = new Set();
     const parents = new Map();
@@ -32,11 +40,17 @@ export const HierarchicalNavigation = /* @__PURE__ */ forwardRef(function Hierar
                 pending.push({ items: item.children, parent: item.value, shown: level.shown && expanded.has(item.value), ancestors });
         }
     }
+    const currentAncestors = new Set();
+    for (let parent = currentValue === undefined ? undefined : parents.get(currentValue); parent !== undefined; parent = parents.get(parent)) {
+        currentAncestors.add(parent);
+    }
     const latest = useRef({ visible, parents });
     latest.current = { visible, parents };
     const destinations = useRef(new Map());
     const refs = useRef(new Map());
     const refAncestors = useRef(new Map());
+    const railAnchors = useRef(new Map());
+    const railRefs = useRef(new Map());
     const repair = (removed, ancestors) => {
         const active = removed.ownerDocument.activeElement;
         if (!active || !removed.contains(active))
@@ -66,11 +80,21 @@ export const HierarchicalNavigation = /* @__PURE__ */ forwardRef(function Hierar
         }
         return refs.current.get(key);
     };
+    const bindRail = (value, anchor) => {
+        const key = `disclosure:${value}`;
+        railAnchors.current.set(key, anchor);
+        bind(key, []);
+        if (!railRefs.current.has(key))
+            railRefs.current.set(key, node => { bind(key, [])(node); railAnchors.current.get(key)?.(node); });
+        return railRefs.current.get(key);
+    };
     useBrowserLayoutEffect(() => {
         for (const key of refs.current.keys())
             if (!known.has(key.slice(key.indexOf(":") + 1))) {
                 refs.current.delete(key);
                 refAncestors.current.delete(key);
+                railRefs.current.delete(key);
+                railAnchors.current.delete(key);
             }
     }, [items]);
     const toggle = (value) => {
@@ -90,9 +114,29 @@ export const HierarchicalNavigation = /* @__PURE__ */ forwardRef(function Hierar
         const disclosureLabel = expandable ? expandLabel(item, open) : "";
         if (expandable && !disclosureLabel.trim())
             throw new Error("Flood NavigationTree disclosure labels must be nonempty");
-        const body = _jsxs(_Fragment, { children: [item.icon != null && _jsx(IconSlot, { size: size, children: item.icon }), _jsx("span", { className: "flood-navigation-tree__label", children: item.label })] });
-        return _jsxs("li", { children: [_jsxs("div", { className: "flood-navigation-tree__row", "data-current": current || undefined, children: [item.href !== undefined && !item.disabled ? _jsx(Link, { ...item.linkProps, href: item.href, ref: bind(`link:${item.value}`, ancestors), variant: "ghost", size: size, "aria-current": current ? "page" : undefined, className: ["flood-navigation-tree__link", item.linkProps?.className].filter(Boolean).join(" "), children: body })
-                            : _jsx("span", { className: "flood-navigation-tree__text", "aria-disabled": item.disabled || undefined, "aria-current": current ? "page" : undefined, children: body }), expandable && _jsx(IconButton, { ref: bind(`disclosure:${item.value}`, ancestors), variant: "ghost", size: size, label: disclosureLabel, className: "flood-navigation-tree__disclosure", disabled: item.disabled, "aria-expanded": open, "aria-controls": open ? contentId : undefined, onClick: () => toggle(item.value), children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m9 5 7 7-7 7" }) }) })] }), expandable && open && _jsxs("div", { id: contentId, ref: bind(`group:${item.value}`, [item.value, ...ancestors]), className: "flood-navigation-tree__branch", children: [item.children && item.children.length > 0 && _jsx("ul", { children: render(item.children, [item.value, ...ancestors]) }), item.content != null && _jsx("div", { className: "flood-navigation-tree__content", children: item.content })] })] }, item.value);
+        const ancestorCurrent = currentAncestors.has(item.value) && (compact ? flyout?.value !== item.value : !open);
+        const linkProps = { ...item.linkProps, className: ["flood-navigation-tree__link", item.linkProps?.className].filter(Boolean).join(" ") };
+        const shared = { label: item.label, icon: item.icon, reserveIcon: entries.some(entry => entry.icon != null), size, variant, current, currentKind, ancestorCurrent, disabled: item.disabled, className: "flood-navigation-tree__row" };
+        if (compact) {
+            const shown = flyout?.value === item.value;
+            const preview = shown && flyout.preview;
+            const hover = item.flyout?.openOnHover && !item.disabled;
+            return _jsx("li", { children: expandable ? _jsxs(Popover, { title: item.label, chrome: "title-only", side: flyoutSide, align: "start", open: shown, disabled: item.disabled, positionReference: item.flyout?.positionReference, focusOnOpen: !preview, onOpenChange: open => { clearHover(); setFlyout(open ? { value: item.value, preview: false } : null); }, className: "flood-navigation-tree__flyout", onPointerEnter: hover ? clearHover : undefined, onPointerLeave: hover ? () => leaveFlyout(item.value) : undefined, onFocusCapture: hover && preview ? () => { clearHover(); setFlyout({ value: item.value, preview: false }); } : undefined, onClick: event => { if (!event.defaultPrevented && event.target.closest('a[href]')) {
+                        clearHover();
+                        setFlyout(null);
+                    } }, trigger: ({ ref: anchor, ...trigger }) => _jsx(NavigationItem, { ...shared, compact: true, actionProps: { ...trigger,
+                            onPointerEnter: hover ? event => {
+                                if (event.pointerType !== "mouse")
+                                    return;
+                                clearHover();
+                                hoverTimer.current = setTimeout(() => setFlyout(current => current && !current.preview ? current : { value: item.value, preview: true }), 130);
+                            } : undefined,
+                            onPointerLeave: hover ? () => leaveFlyout(item.value) : undefined,
+                            onClick: preview ? () => { clearHover(); setFlyout({ value: item.value, preview: false }); } : trigger.onClick,
+                        }, controlRef: bindRail(item.value, anchor), tooltip: !hover && !shown, tooltipSide: flyoutSide }), children: [(item.href || item.children?.length) ? _jsx(NavigationTree, { label: item.label, size: size, variant: variant, currentValue: currentValue, currentKind: currentKind, branchGuides: branchGuides, items: [...(item.href ? [{ ...item, children: undefined, content: undefined }] : []), ...(item.children ?? [])], expandedValues: expandedValues ?? local, onExpandedValuesChange: values => { if (expandedValues === undefined)
+                                setLocal(values); onExpandedValuesChange?.(values); }, expandLabel: expandLabel }) : null, item.content] }) : _jsx(NavigationItem, { ...shared, compact: true, href: item.href, linkProps: linkProps, controlRef: bind(`link:${item.value}`, []), tooltipSide: flyoutSide }) }, item.value);
+        }
+        return _jsxs("li", { children: [_jsx(NavigationItem, { ...shared, href: item.href, linkProps: linkProps, trailing: item.trailing, trailingAction: item.trailingAction, controlRef: bind(`${item.href !== undefined ? 'link' : 'disclosure'}:${item.value}`, ancestors), disclosureRef: bind(`disclosure:${item.value}`, ancestors), disclosure: expandable ? { expanded: open, onExpandedChange: () => toggle(item.value), label: disclosureLabel, controls: open ? contentId : undefined } : undefined }), expandable && open && _jsxs("div", { id: contentId, ref: bind(`group:${item.value}`, [item.value, ...ancestors]), className: "flood-navigation-tree__branch", children: [item.children && item.children.length > 0 && _jsx("ul", { children: render(item.children, [item.value, ...ancestors]) }), item.content != null && _jsx("div", { className: "flood-navigation-tree__content", children: item.content })] })] }, item.value);
     });
-    return _jsx("nav", { ...props, ref: root, id: id, "aria-label": label, tabIndex: tabIndex, "data-size": size, className: ["flood-navigation-tree", className].filter(Boolean).join(" "), children: _jsx("ul", { children: render(items) }) });
+    return _jsx("nav", { ...props, ref: root, id: id, "aria-label": label, tabIndex: tabIndex, "data-size": size, "data-compact": compact || undefined, "data-branch-guides": branchGuides || undefined, className: ["flood-navigation-tree", className].filter(Boolean).join(" "), children: _jsx("ul", { children: render(items) }) });
 });

package/dist/navigation.js

@@ -3,7 +3,7 @@ import { forwardRef, useEffect, useId, useImperativeHandle, useLayoutEffect, use
 import { Button, IconSlot, Link, ScrollArea } from "./index.js";
 import { pageWindow } from "./page-window.js";
 const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
-export const TabNavigation = /* @__PURE__ */ forwardRef(function TabNavigation({ label, items, value, defaultValue, onValueChange, activationMode = "automatic", orientation = "horizontal", controlSize = "md", disabled = false, iconOnly = false, className, onKeyDown, id: explicitId, ...props }, ref) {
+export const TabNavigation = /* @__PURE__ */ forwardRef(function TabNavigation({ label, items, value, defaultValue, onValueChange, activationMode = "automatic", orientation = "horizontal", variant = "contained", controlSize = "md", disabled = false, iconOnly = false, className, onKeyDown, id: explicitId, ...props }, ref) {
     const generated = useId(), id = explicitId ?? `flood-tabs-${generated}`;
     const [local, setLocal] = useState(defaultValue), [focused, setFocused] = useState();
     const root = useRef(null), list = useRef(null), focusedPanel = useRef(undefined);
@@ -29,7 +29,7 @@ export const TabNavigation = /* @__PURE__ */ forwardRef(function TabNavigation({
         }
         focusedPanel.current = undefined;
     }, [selected, id, items]);
-    return _jsxs("div", { ...props, ref: root, id: id, className: ["flood-tabs", className].filter(Boolean).join(" "), "data-orientation": orientation, onKeyDown: event => {
+    return _jsxs("div", { ...props, ref: root, id: id, className: ["flood-tabs", className].filter(Boolean).join(" "), "data-orientation": orientation, "data-variant": variant, onKeyDown: event => {
             onKeyDown?.(event);
             if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing)
                 return;

package/dist/overflow-actions.d.ts

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

package/dist/overflow-actions.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { Button, IconSlot, Menu, Toolbar } from "./index.js";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+export const AdaptiveActions = /* @__PURE__ */ forwardRef(function AdaptiveActions({ label, items, onAction, moreLabel = "More actions", size = "md", variant = "subtle", shape = "pill", containerVariant = "contained", disabled = false, leading, trailing, maxVisibleActions, className, ...props }, ref) {
+    if (!label.trim() || !moreLabel.trim() || items.some(item => !item.id.trim() || !item.label.trim() || (item.priority !== undefined && !Number.isFinite(item.priority))) || new Set(items.map(item => item.id)).size !== items.length)
+        throw new Error("Flood OverflowActions requires unique named actions and finite priorities");
+    if (maxVisibleActions !== undefined && (!Number.isInteger(maxVisibleActions) || maxVisibleActions < 0))
+        throw new Error("Flood OverflowActions maxVisibleActions must be a nonnegative integer");
+    const root = useRef(null), measure = useRef(null), more = useRef(null);
+    const before = useRef(null), after = useRef(null);
+    const menuAnchor = useRef(null);
+    const setMore = useCallback((node) => { more.current = node; menuAnchor.current?.(node); }, []);
+    useImperativeHandle(ref, () => root.current, []);
+    const [visibleIds, setVisibleIds] = useState(() => items.map(item => item.id));
+    const [open, setOpen] = useState(false), focusAfter = useRef(false);
+    const visible = items.filter(item => visibleIds.includes(item.id)), hidden = items.filter(item => !visibleIds.includes(item.id));
+    const action = (item, measuring = false) => _jsxs(Button, { size: size, variant: variant, tone: item.tone, disabled: disabled || item.disabled, "data-overflow-action": measuring ? undefined : item.id, "data-measure-action": measuring ? item.id : undefined, tabIndex: measuring ? -1 : undefined, onClick: measuring ? undefined : () => onAction?.(item.id), children: [item.icon && _jsx(IconSlot, { size: size, children: item.icon }), item.label] }, item.id);
+    const overflow = (measuring = false) => _jsxs(Button, { size: size, variant: variant, disabled: disabled, tabIndex: measuring ? -1 : undefined, "data-measure-more": measuring || undefined, children: [moreLabel, _jsx(IconSlot, { size: size, children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: [_jsx("circle", { cx: "5", cy: "12", r: "1.5" }), _jsx("circle", { cx: "12", cy: "12", r: "1.5" }), _jsx("circle", { cx: "19", cy: "12", r: "1.5" })] }) })] });
+    useBrowserLayoutEffect(() => {
+        const node = root.current, measured = measure.current, view = node?.ownerDocument.defaultView;
+        if (!node || !measured || !view)
+            return;
+        const update = () => {
+            const widths = new Map([...measured.querySelectorAll('[data-measure-action]')].map(item => [item.dataset.measureAction, item.getBoundingClientRect().width]));
+            const bar = node.querySelector('[role="toolbar"]'), gap = bar ? parseFloat(view.getComputedStyle(bar).columnGap) || 0 : 0;
+            const barStyle = bar ? view.getComputedStyle(bar) : null;
+            const rootStyle = view.getComputedStyle(node);
+            const available = Math.max(0, node.clientWidth - parseFloat(rootStyle.paddingLeft) - parseFloat(rootStyle.paddingRight) - (barStyle ? parseFloat(barStyle.paddingLeft) + parseFloat(barStyle.paddingRight) + parseFloat(barStyle.borderLeftWidth) + parseFloat(barStyle.borderRightWidth) : 0)), extra = measured.querySelector('[data-measure-more]')?.getBoundingClientRect().width ?? 0;
+            const fixed = [before.current, after.current].filter((item) => item !== null);
+            const fixedWidth = fixed.reduce((sum, item) => sum + item.getBoundingClientRect().width, 0);
+            const kept = new Set(items.map(item => item.id));
+            const width = (withMore) => fixedWidth + items.filter(item => kept.has(item.id)).reduce((sum, item) => sum + (widths.get(item.id) ?? 0), 0) + (withMore ? extra : 0) + Math.max(0, kept.size + fixed.length + (withMore ? 1 : 0) - 1) * gap;
+            const order = items.map((item, index) => ({ item, index })).sort((a, b) => (a.item.priority ?? 0) - (b.item.priority ?? 0) || b.index - a.index);
+            for (const { item } of order) {
+                if (kept.size <= (maxVisibleActions ?? items.length) && width(kept.size < items.length) <= available)
+                    break;
+                kept.delete(item.id);
+            }
+            const next = items.filter(item => kept.has(item.id)).map(item => item.id);
+            const active = node.ownerDocument.activeElement;
+            const activeId = active?.dataset.overflowAction;
+            if ((activeId && !kept.has(activeId)) || (!items.some(item => !kept.has(item.id)) && more.current?.contains(active)))
+                focusAfter.current = true;
+            setVisibleIds(previous => previous.join("\0") === next.join("\0") ? previous : next);
+        };
+        update();
+        const observer = view.ResizeObserver ? new view.ResizeObserver(update) : undefined;
+        observer?.observe(node);
+        observer?.observe(measured);
+        if (before.current)
+            observer?.observe(before.current);
+        if (after.current)
+            observer?.observe(after.current);
+        let alive = true;
+        void node.ownerDocument.fonts?.ready.then(() => { if (alive)
+            update(); });
+        return () => { alive = false; observer?.disconnect(); };
+    }, [items, size, variant, moreLabel, disabled, leading, trailing, maxVisibleActions]);
+    useBrowserLayoutEffect(() => {
+        if (!hidden.length && open) {
+            setOpen(false);
+            focusAfter.current = true;
+        }
+        if (focusAfter.current) {
+            focusAfter.current = false;
+            (more.current ?? root.current?.querySelector('[data-overflow-action]:not(:disabled)'))?.focus({ preventScroll: true });
+        }
+    }, [visibleIds, hidden.length, open]);
+    return _jsxs("div", { ...props, ref: root, className: ["flood-overflow-actions", className].filter(Boolean).join(" "), children: [_jsxs(Toolbar, { label: label, shape: shape, variant: containerVariant, className: "flood-overflow-actions__bar", children: [leading != null && _jsx("div", { ref: before, className: "flood-overflow-actions__leading", children: leading }), visible.map(item => action(item)), hidden.length > 0 && _jsx(Menu, { label: moreLabel, items: hidden, open: open, onOpenChange: setOpen, onAction: onAction, disabled: disabled, controlSize: size, trigger: trigger => {
+                            menuAnchor.current = trigger.ref;
+                            return _jsxs(Button, { ...trigger, ref: setMore, size: size, variant: variant, children: [moreLabel, _jsx(IconSlot, { size: size, children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: [_jsx("circle", { cx: "5", cy: "12", r: "1.5" }), _jsx("circle", { cx: "12", cy: "12", r: "1.5" }), _jsx("circle", { cx: "19", cy: "12", r: "1.5" })] }) })] });
+                        } }), trailing != null && _jsx("div", { ref: after, className: "flood-overflow-actions__trailing", children: trailing })] }), _jsxs("div", { ref: node => { measure.current = node; if (node)
+                    node.inert = true; }, className: "flood-overflow-actions__measure", "aria-hidden": "true", children: [items.map(item => action(item, true)), overflow(true)] })] });
+});

package/dist/overlay-runtime.d.ts

@@ -1,3 +1,4 @@
+import { type RefObject } from "react";
 export type Side = "top" | "bottom" | "left" | "right";
 export type Align = "start" | "center" | "end";
 type Rect = {
@@ -17,7 +18,7 @@ export declare function placeOverlay(anchor: Rect, size: {
     top: number;
     width: number;
     height: number;
-}, side: Side, align: Align, gap: number, rtl?: boolean): {
+}, side: Side, align: Align, gap: number, rtl?: boolean, overlap?: boolean): {
     left: number;
     top: number;
     side: Side;
@@ -28,11 +29,14 @@ type Layer = {
     anchor: () => HTMLElement | null;
     close: () => void;
     outside?: () => void;
+    closeOnFocusOutside?: boolean;
     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 positionLayer(anchor: HTMLElement, panel: HTMLElement, side: Side, align: Align, overlap?: boolean): void;
 export declare function returnFocus(panel: HTMLElement, anchor: HTMLElement | null): void;
+/** Retain pixels for a CSS exit after the native layer has released focus. */
+export declare function useLayerExitContent(panel: RefObject<HTMLElement | null>, open: boolean, enabled?: boolean, transitionProperty?: string): boolean;
 export {};

package/dist/overlay-runtime.js

@@ -1,15 +1,18 @@
+import { useEffect, useLayoutEffect, useState } from "react";
 /** Pure collision handling in layout-viewport coordinates. */
-export function placeOverlay(anchor, size, viewport, side, align, gap, rtl = false) {
+export function placeOverlay(anchor, size, viewport, side, align, gap, rtl = false, overlap = 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])
+    if (!overlap && 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);
+    if (overlap)
+        top = anchor.top;
     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 };
@@ -57,7 +60,7 @@ export function registerLayer(document, layer) {
         (layer.outside ?? layer.close)();
     };
     const focus = (event) => {
-        if (top() !== layer || layer.modal)
+        if (top() !== layer || layer.modal || layer.closeOnFocusOutside === false)
             return;
         const target = event.target;
         if (!layer.panel.contains(target) && !layer.anchor()?.contains(target))
@@ -108,14 +111,19 @@ export function lockScroll(document) {
         locks.delete(document);
     };
 }
-export function positionLayer(anchor, panel, side, align) {
+export function positionLayer(anchor, panel, side, align, overlap = false) {
     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 bounds = anchor.getBoundingClientRect(), anchorWidth = `${bounds.width}px`, anchorHeight = `${bounds.height}px`;
+    if (panel.style.getPropertyValue("--flood-overlay-anchor-width") !== anchorWidth)
+        panel.style.setProperty("--flood-overlay-anchor-width", anchorWidth);
+    if (panel.style.getPropertyValue("--flood-overlay-anchor-height") !== anchorHeight)
+        panel.style.setProperty("--flood-overlay-anchor-height", anchorHeight);
+    const position = placeOverlay(bounds, panel.getBoundingClientRect(), viewport, side, align, gap, getComputedStyle(anchor).direction === "rtl", overlap);
     const left = `${position.left}px`, top = `${position.top}px`;
     if (panel.style.left !== left)
         panel.style.left = left;
@@ -129,3 +137,31 @@ export function returnFocus(panel, anchor) {
     if (anchor?.isConnected && !anchor.matches(":disabled") && (panel.contains(active) || active === panel.ownerDocument.body))
         anchor.focus({ preventScroll: true });
 }
+/** Retain pixels for a CSS exit after the native layer has released focus. */
+export function useLayerExitContent(panel, open, enabled = true, transitionProperty = "opacity") {
+    const [retained, setRetained] = useState(false);
+    useLayerLayoutEffect(() => {
+        const node = panel.current;
+        if (!enabled || !node) {
+            setRetained(false);
+            return;
+        }
+        if (open) {
+            setRetained(true);
+            return;
+        }
+        node.inert = true;
+        const transitions = node.getAnimations().filter(animation => "transitionProperty" in animation && animation.transitionProperty === transitionProperty);
+        let active = true;
+        if (!transitions.length)
+            setRetained(false);
+        else
+            void Promise.allSettled(transitions.map(animation => animation.finished)).then(() => {
+                if (active)
+                    setRetained(false);
+            });
+        return () => { active = false; node.inert = false; };
+    }, [panel, open, enabled, transitionProperty]);
+    return open || enabled && retained;
+}
+const useLayerLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;

package/dist/overlays.d.ts

@@ -7,6 +7,7 @@ interface ModalOverlayProps extends DialogProps {
     showCloseButton?: boolean;
     role?: "dialog" | "alertdialog";
     scrollBody?: boolean;
+    bodyContentInset?: "none" | "scrollbar";
     footer?: import("react").ReactNode;
 }
 export declare const ModalOverlay: import("react").ForwardRefExoticComponent<ModalOverlayProps & import("react").RefAttributes<HTMLDialogElement>>;

package/dist/overlays.js

@@ -1,7 +1,7 @@
 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, ScrollArea, VisuallyHidden } from "./index.js";
-import { positionLayer, registerLayer, returnFocus, lockScroll, tabbables } from "./overlay-runtime.js";
+import { positionLayer, registerLayer, returnFocus, lockScroll, tabbables, useLayerExitContent } 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; }
@@ -19,7 +19,7 @@ function focusContent(panel, preferred) {
     }
 }
 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" }) }) });
+    return _jsx(IconButton, { label: label, size: "sm", variant: "ghost", 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 = /* @__PURE__ */ forwardRef(function AnchoredOverlay(allProps, forwardedRef) {
     const { kind, trigger, side = "bottom", align = "start", disabled = false, id: explicitId, className, style, ...native } = allProps;
@@ -38,7 +38,9 @@ export const AnchoredOverlay = /* @__PURE__ */ forwardRef(function AnchoredOverl
         suppressed.current = true;
         overPanel.current = false;
     } request(false); };
-    const current = useCurrent({ close, request, disabled, open, initialFocusRef: pop.initialFocusRef, positionReference: pop.positionReference });
+    const focusOnOpen = pop.focusOnOpen ?? true;
+    const current = useCurrent({ close, request, disabled, open, focusOnOpen, initialFocusRef: pop.initialFocusRef, positionReference: pop.positionReference });
+    const previousFocusOnOpen = useRef(focusOnOpen);
     const positionReference = () => { const node = current.current.positionReference?.current; return node?.isConnected && node.ownerDocument === panel.current?.ownerDocument ? node : anchor.current; };
     useImperativeHandle(forwardedRef, () => panel.current, []);
     useEffect(() => () => clearTimeout(timer.current), []);
@@ -74,7 +76,7 @@ export const AnchoredOverlay = /* @__PURE__ */ forwardRef(function AnchoredOverl
             element.showPopover();
             positionLayer(positionReference(), element, side, align);
             unregister = registerLayer(document, { panel: element, anchor: () => anchor.current, close: () => current.current.close(), tooltip: kind === "tooltip" });
-            if (kind === "popover")
+            if (kind === "popover" && current.current.focusOnOpen)
                 focusContent(element, current.current.initialFocusRef?.current);
             const update = () => { if (!alive)
                 return; if (anchor.current?.isConnected)
@@ -89,32 +91,42 @@ export const AnchoredOverlay = /* @__PURE__ */ forwardRef(function AnchoredOverl
             queueMicrotask(() => { if (alive && current.current.open && element.isConnected && !element.matches(":popover-open") && anchor.current?.isConnected) {
                 element.showPopover();
                 positionLayer(positionReference(), element, side, align);
-                if (kind === "popover")
+                if (kind === "popover" && current.current.focusOnOpen)
                     focusContent(element, current.current.initialFocusRef?.current);
             } });
         };
         element.addEventListener("toggle", toggle);
-        return () => { alive = false; view.cancelAnimationFrame(frame); unregister(); element.removeEventListener("toggle", toggle); if (kind === "popover")
+        return () => { alive = false; view.cancelAnimationFrame(frame); unregister(); element.removeEventListener("toggle", toggle); if (kind === "popover" && (previousFocusOnOpen.current || element.contains(document.activeElement)))
             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) }) };
+    const titleOnly = kind === "popover" && pop.chrome === "title-only";
+    const showContent = useLayerExitContent(panel, open, titleOnly);
+    useBrowserLayoutEffect(() => {
+        const element = panel.current;
+        if (focusOnOpen && !previousFocusOnOpen.current && element?.matches(":popover-open") && !element.contains(element.ownerDocument.activeElement)) {
+            focusContent(element, pop.initialFocusRef?.current);
+        }
+        previousFocusOnOpen.current = focusOnOpen;
+    }, [focusOnOpen]);
+    const tooltipTriggerProps = { ref: setAnchor,
+        "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(); },
+    };
+    const popoverTriggerProps = { ref: setAnchor, type: "button", 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, chrome: unusedChrome, content: unusedContent, children: unusedChildren, open: unusedOpen, defaultOpen: unusedDefault, onOpenChange: unusedChange, delay: unusedDelay, closeLabel: unusedClose, initialFocusRef: unusedFocus, positionReference: unusedPosition, ...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, "data-chrome": kind === "popover" ? pop.chrome : 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") {
+    const { title: unusedTitle, chrome: unusedChrome, content: unusedContent, children: unusedChildren, open: unusedOpen, defaultOpen: unusedDefault, onOpenChange: unusedChange, delay: unusedDelay, closeLabel: unusedClose, initialFocusRef: unusedFocus, positionReference: unusedPosition, focusOnOpen: unusedFocusOnOpen, ...attributes } = native;
+    return _jsxs(_Fragment, { children: [kind === "tooltip" ? tip.trigger(tooltipTriggerProps) : pop.trigger(popoverTriggerProps), _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, "aria-hidden": titleOnly && !open ? true : attributes["aria-hidden"], "data-chrome": kind === "popover" ? pop.chrome : 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: [pop.chrome === "minimal" ? _jsx(VisuallyHidden, { children: _jsx("h2", { id: `${id}-title`, children: pop.title }) }) : _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 })] }) })] });
+                } }, children: kind === "tooltip" ? tip.content : _jsxs(_Fragment, { children: [pop.chrome === "minimal" ? _jsx(VisuallyHidden, { children: _jsx("h2", { id: `${id}-title`, children: pop.title }) }) : _jsxs("div", { className: "flood-overlay-header", children: [_jsx("h2", { id: `${id}-title`, className: "flood-overlay-title", children: pop.title }), !titleOnly && _jsx(OverlayClose, { label: pop.closeLabel ?? "Close", onClick: close })] }), showContent && _jsx("div", { className: "flood-overlay-body", children: pop.children })] }) })] });
 });
-export const ModalOverlay = /* @__PURE__ */ 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) {
+export const ModalOverlay = /* @__PURE__ */ forwardRef(function ModalOverlay({ showCloseButton = true, scrollBody = false, bodyContentInset, 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)
@@ -161,7 +173,11 @@ export const ModalOverlay = /* @__PURE__ */ forwardRef(function ModalOverlay({ s
         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 => {
+    return _jsxs(_Fragment, { children: [trigger({ ref: setAnchor, type: "button", disabled, "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": id, onClick: event => {
+                    // WebKit can leave pointer-activated buttons unfocused before showModal().
+                    event.currentTarget.focus({ preventScroll: true });
+                    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;
@@ -178,5 +194,5 @@ export const ModalOverlay = /* @__PURE__ */ forwardRef(function ModalOverlay({ s
                         event.preventDefault();
                         first.focus();
                     }
-                }, 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 })] })] });
+                }, 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", contentInset: bodyContentInset, 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/select.js

@@ -187,7 +187,10 @@ export const SingleSelect = /* @__PURE__ */ forwardRef(function SingleSelect({ c
             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`);
+            const availableWidth = Math.max(0, viewportWidth - gap * 2);
+            assign(popup, "width", "max-content");
+            assign(popup, "min-width", `${Math.min(rect.width, availableWidth)}px`);
+            assign(popup, "max-width", `${availableWidth}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.

package/dist/sidebar.d.ts

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

package/dist/sidebar.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import { IconButton, NavigationTree, NavigationGroup, ScrollArea, Stack } from './index.js';
+const useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+export const WorkspaceSidebar = /* @__PURE__ */ forwardRef(function WorkspaceSidebar({ label, groups, currentValue, currentKind = "page", collapsed: controlled, defaultCollapsed = false, onCollapsedChange, collapsible = true, collapseLabel = 'Collapse sidebar', expandLabel = 'Expand sidebar', expandedValues, defaultExpandedValues = [], onExpandedValuesChange, expandItemLabel, size = 'md', variant = 'quiet', side = 'start', width = '16rem', header, headerLayout = 'stacked', footer, footerSeparator = false, headerSeparator = false, className, style, ...props }, ref) {
+    if (!label.trim() || !collapseLabel.trim() || !expandLabel.trim() || new Set(groups.map(group => group.id)).size !== groups.length || groups.some(group => !group.id.trim() || !group.label.trim()))
+        throw new Error('Flood Sidebar requires named unique groups and controls');
+    const known = new Set(), pending = groups.flatMap(group => [...group.items]);
+    while (pending.length) {
+        const item = pending.pop();
+        if (known.has(item.value))
+            throw new Error('Flood Sidebar item values must be globally unique');
+        known.add(item.value);
+        if (item.children)
+            pending.push(...item.children);
+    }
+    const [local, setLocal] = useState(defaultCollapsed), [expanded, setExpanded] = useState(defaultExpandedValues);
+    const collapsed = controlled ?? local, root = useRef(null), toggle = useRef(null), body = useRef(null);
+    const lastOwnedFocus = useRef(null);
+    const [rtl, setRtl] = useState(false);
+    useImperativeHandle(ref, () => root.current, []);
+    useBrowserLayoutEffect(() => {
+        const node = root.current;
+        if (!node)
+            return;
+        const view = node.ownerDocument.defaultView, update = () => setRtl(view.getComputedStyle(node).direction === 'rtl');
+        update();
+        const observer = new view.MutationObserver(update);
+        for (let ancestor = node; ancestor; ancestor = ancestor.parentElement)
+            observer.observe(ancestor, { attributes: true, attributeFilter: ['dir', 'style', 'class'] });
+        view.addEventListener('resize', update);
+        return () => { observer.disconnect(); view.removeEventListener('resize', update); };
+    }, []);
+    useBrowserLayoutEffect(() => {
+        const node = root.current;
+        if (!node)
+            return;
+        const document = node.ownerDocument;
+        const track = (event) => { const target = event.target; lastOwnedFocus.current = node.contains(target) ? target : null; };
+        document.addEventListener('focusin', track, true);
+        return () => document.removeEventListener('focusin', track, true);
+    }, []);
+    useBrowserLayoutEffect(() => {
+        const node = root.current, previous = lastOwnedFocus.current;
+        if (node && previous && !previous.isConnected && node.ownerDocument.activeElement === node.ownerDocument.body)
+            (toggle.current ?? node).focus({ preventScroll: true });
+    }, [collapsed]);
+    const slot = (value) => typeof value === 'function' ? value({ collapsed }) : value;
+    const headerContent = slot(header), footerContent = slot(footer), panelOnLeft = (side === 'start') !== rtl;
+    return _jsxs("aside", { ...props, ref: root, "aria-label": label, tabIndex: -1, "data-footer-separator": footerSeparator, "data-header-separator": headerSeparator, "data-header-layout": headerLayout, "data-flood-surface": "filled", "data-size": size, "data-variant": variant, "data-collapsed": collapsed, "data-side": side, className: ['flood-sidebar', className].filter(Boolean).join(' '), style: { '--flood-sidebar-width': typeof width === 'number' ? `${width}px` : width, ...style }, children: [(headerContent != null || collapsible) && _jsxs("div", { className: "flood-sidebar__header", "data-collapsible": collapsible, children: [collapsible && _jsx(IconButton, { ref: toggle, className: "flood-sidebar__toggle", label: collapsed ? expandLabel : collapseLabel, title: collapsed ? expandLabel : collapseLabel, size: size, variant: "ghost", "aria-expanded": !collapsed, onClick: () => { toggle.current?.focus({ preventScroll: true }); if (controlled === undefined)
+                            setLocal(!collapsed); onCollapsedChange?.(!collapsed); }, children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("rect", { x: "3", y: "4", width: "18", height: "16", rx: "4" }), _jsx("path", { d: panelOnLeft ? 'M9 4v16' : 'M15 4v16' }), _jsx("path", { d: panelOnLeft ? (collapsed ? 'm14 9 3 3-3 3' : 'm17 9-3 3 3 3') : (collapsed ? 'm10 9-3 3 3 3' : 'm7 9 3 3-3 3') })] }) }), headerContent != null && _jsx("div", { className: "flood-sidebar__identity", children: headerContent })] }), _jsx(ScrollArea, { ref: body, className: "flood-sidebar__body", contentInset: "none", onFocus: event => {
+                    // WebKit can focus the tree landmark on pointer down. Keep the row under
+                    // the pointer instead of scrolling to reveal the entire tree.
+                    if (event.target.matches('nav.flood-navigation-tree'))
+                        event.preventDefault();
+                }, children: _jsx(Stack, { gap: "4", className: "flood-sidebar__navigation", children: groups.map(group => _jsx(NavigationGroup, { label: group.label, hideLabel: group.hideLabel, headingAction: group.headingAction, separator: group.separator, collapsible: group.collapsible, expanded: group.expanded, defaultExpanded: group.defaultExpanded, onExpandedChange: group.onExpandedChange, compact: collapsed, size: size, className: "flood-sidebar__group", "data-icon-column": group.items.some(item => item.icon != null) || undefined, children: _jsx(NavigationTree, { label: group.label, items: group.items, currentValue: currentValue, currentKind: currentKind, size: size, variant: variant, compact: collapsed, branchGuides: group.branchGuides, flyoutSide: panelOnLeft ? 'right' : 'left', expandedValues: expandedValues ?? expanded, onExpandedValuesChange: values => { if (expandedValues === undefined)
+                                setExpanded(values); onExpandedValuesChange?.(values); }, expandLabel: expandItemLabel }) }, group.id)) }) }), footerContent != null && _jsx("div", { className: "flood-sidebar__footer", children: footerContent })] });
+});

package/dist/sparkline.d.ts

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