@flood-md/react 0.2.10 → 0.2.11

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 = {
@@ -35,4 +36,6 @@ export declare function registerLayer(document: Document, layer: Layer): () => v
 export declare function lockScroll(document: Document): () => void;
 export declare function positionLayer(anchor: HTMLElement, panel: HTMLElement, side: Side, align: Align): void;
 export declare function returnFocus(panel: HTMLElement, anchor: HTMLElement | null): void;
+/** 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): boolean;
 export {};

package/dist/overlay-runtime.js

@@ -1,3 +1,4 @@
+import { useEffect, useLayoutEffect, useState } from "react";
 /** Pure collision handling in layout-viewport coordinates. */
 export function placeOverlay(anchor, size, viewport, side, align, gap, rtl = false) {
     const edge = { left: viewport.left + gap, right: viewport.left + viewport.width - gap, top: viewport.top + gap, bottom: viewport.top + viewport.height - gap };
@@ -115,7 +116,12 @@ export function positionLayer(anchor, panel, side, align) {
     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");
     const left = `${position.left}px`, top = `${position.top}px`;
     if (panel.style.left !== left)
         panel.style.left = left;
@@ -129,3 +135,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) {
+    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 === "opacity");
+        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]);
+    return open || enabled && retained;
+}
+const useLayerLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;

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,30 +91,40 @@ 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) {
     const [local, setLocal] = useState(defaultOpen), open = controlled ?? local;
@@ -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;

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/toolbar.js

@@ -3,7 +3,7 @@ import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } f
 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 = /* @__PURE__ */ forwardRef(function RovingToolbar({ label, orientation = "horizontal", loop = true, className, onKeyDown, onKeyDownCapture, onFocus, ...props }, ref) {
+export const RovingToolbar = /* @__PURE__ */ forwardRef(function RovingToolbar({ label, orientation = "horizontal", loop = true, shape = "rounded", variant = "contained", className, onKeyDown, onKeyDownCapture, onFocus, ...props }, ref) {
     const root = useRef(null), current = useRef(null), within = useRef(false);
     const refresh = useRef(() => []);
     useImperativeHandle(ref, () => root.current, []);
@@ -73,7 +73,7 @@ export const RovingToolbar = /* @__PURE__ */ forwardRef(function RovingToolbar({
         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 _jsx("div", { ...props, ref: root, role: "toolbar", "aria-label": label, "aria-orientation": orientation, tabIndex: -1, "data-orientation": orientation, "data-shape": shape, "data-variant": variant, 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.10",
+  "version": "0.2.11",
   "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.10"
+    "@flood-md/tokens": "0.2.11"
   },
   "publishConfig": {
     "access": "public"