@flood-md/react 0.2.10 → 0.2.12

package/dist/data-table-expansion.js

@@ -0,0 +1,79 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { IconButton } from "./index.js";
+import { useLayerExitContent } from "./overlay-runtime.js";
+function hasExpandedContent(row) {
+    return row.expandedContent != null && typeof row.expandedContent !== "boolean";
+}
+export function useDataTableExpansion(rows, expandedIds, defaultExpandedIds, onExpandedChange) {
+    const [localExpandedIds, setLocalExpandedIds] = useState(defaultExpandedIds ?? []);
+    const expanded = new Set(expandedIds ?? localExpandedIds);
+    const enabled = expandedIds !== undefined || defaultExpandedIds !== undefined || rows.some(hasExpandedContent);
+    function toggle(id) {
+        const next = new Set(expanded);
+        if (next.has(id))
+            next.delete(id);
+        else
+            next.add(id);
+        const ids = [...next];
+        if (expandedIds === undefined)
+            setLocalExpandedIds(ids);
+        onExpandedChange?.(ids);
+    }
+    return { enabled, expanded, toggle };
+}
+export function DataTableExpandableRow({ row, showDisclosure, expanded, colSpan, labels, onToggle, disclosureCellProps, viewportWidth, disclosureWidth, children }) {
+    const detailId = useId();
+    const toggle = useRef(null);
+    const reveal = useRef(null);
+    const detail = useRef(null);
+    const lastFocusedDetail = useRef(null);
+    const expandable = showDisclosure && hasExpandedContent(row);
+    const open = expandable && expanded;
+    const showDetail = useLayerExitContent(reveal, open, expandable, "grid-template-rows");
+    useEffect(() => {
+        const content = detail.current;
+        const header = content?.querySelector("table")?.tHead?.rows[0];
+        if (!content || !header)
+            return;
+        const alignBranch = () => {
+            const bounds = content.getBoundingClientRect();
+            if (!bounds.height)
+                return;
+            const heading = header.getBoundingClientRect();
+            const center = (heading.top + heading.height / 2 - bounds.top) * content.offsetHeight / bounds.height;
+            const value = `${center}px`;
+            if (content.style.getPropertyValue("--flood-data-table-branch-target") !== value) {
+                content.style.setProperty("--flood-data-table-branch-target", value);
+            }
+        };
+        alignBranch();
+        const observer = new ResizeObserver(alignBranch);
+        observer.observe(content);
+        observer.observe(header);
+        return () => {
+            observer.disconnect();
+            content.style.removeProperty("--flood-data-table-branch-target");
+        };
+    }, [showDetail, row.expandedContent]);
+    useEffect(() => {
+        if (open)
+            return;
+        const previousFocus = lastFocusedDetail.current;
+        lastFocusedDetail.current = null;
+        const button = toggle.current;
+        const active = button?.ownerDocument.activeElement;
+        if (button && previousFocus && (active === button.ownerDocument.body || reveal.current?.contains(active ?? null))) {
+            button.focus({ preventScroll: true });
+        }
+    }, [open]);
+    const label = row.label ?? row.primaryAction?.title ?? row.id;
+    const actionLabel = open ? labels.collapseRow ?? (name => `Collapse ${name}`) : labels.expandRow ?? (name => `Expand ${name}`);
+    return _jsxs(_Fragment, { children: [children(showDisclosure ? _jsx("td", { ...disclosureCellProps, "data-data-table-utility": "expansion", "data-detail-visible": showDetail || undefined, className: "flood-data-table__expand", children: expandable && _jsx(IconButton, { ref: toggle, label: actionLabel(label), size: "sm", iconSize: "xs", variant: "ghost", className: "flood-data-table__disclosure", type: "button", "aria-expanded": open, "aria-controls": open ? detailId : undefined, onClick: onToggle, children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "m6 9 6 6 6-6" }) }) }) }) : null), showDetail && _jsx("tr", { id: detailId, className: "flood-data-table__expanded-row", "aria-hidden": open ? undefined : true, onFocusCapture: event => {
+                    if (event.currentTarget.contains(event.target))
+                        lastFocusedDetail.current = event.target;
+                }, children: _jsx("td", { colSpan: colSpan, children: _jsx("div", { ref: reveal, className: "flood-data-table__detail-reveal", "data-open": open || undefined, children: _jsx("div", { className: "flood-data-table__detail-clip", children: _jsx("div", { ref: detail, className: "flood-data-table__expanded-content", style: {
+                                    maxInlineSize: viewportWidth ? `max(0px, calc(${viewportWidth}px - 2 * var(--flood-data-table-edge) - var(--flood-scroll-content-inline, 0px)))` : undefined,
+                                    "--flood-data-table-disclosure-center": disclosureWidth === undefined ? undefined : `${disclosureWidth / 2}px`,
+                                }, children: row.expandedContent }) }) }) }) })] });
+}

package/dist/data-table.js

@@ -1,24 +1,129 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo, useState } from "react";
-import { Table, Checkbox, Button, IconSlot, VisuallyHidden, Pagination, Text, Spinner, Alert, Stack } from "./index.js";
-export const ManagedDataTable = /* @__PURE__ */ forwardRef(function ManagedDataTable({ caption, hideCaption = false, columns, rows, density = "comfortable", striped = false, minWidth = "40rem", sort: controlledSort, defaultSort = null, onSortChange, locale = "en", selectable = false, selectedIds, defaultSelectedIds = [], onSelectionChange, page: controlledPage, defaultPage = 1, pageSize = 10, onPageChange, state = "ready", onRetry, labels = {}, className, ...props }, ref) {
+import { createElement as _createElement } from "react";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { Table, Checkbox, Button, Badge, IconSlot, VisuallyHidden, Pagination, Text, Spinner, Alert, Stack, Inline, Menu, Tooltip } from "./index.js";
+import { useDataTableColumnLayout } from "./data-table-columns.js";
+import { DataTableExpandableRow, useDataTableExpansion } from "./data-table-expansion.js";
+const columnName = (column) => column.unit ? `${column.label} ${column.unit}` : column.label;
+function DataTableHeading({ column, sortLabel, disabled, descending, onSort }) {
+    const label = useRef(null);
+    const [truncated, setTruncated] = useState(false);
+    useEffect(() => {
+        const node = label.current;
+        if (!node)
+            return;
+        const measure = () => setTruncated(node.scrollWidth > node.clientWidth);
+        measure();
+        const Observer = node.ownerDocument.defaultView?.ResizeObserver;
+        const observer = Observer && new Observer(measure);
+        observer?.observe(node);
+        const fonts = node.ownerDocument.fonts;
+        fonts?.addEventListener("loadingdone", measure);
+        return () => {
+            observer?.disconnect();
+            fonts?.removeEventListener("loadingdone", measure);
+        };
+    }, [column.label, column.unit]);
+    const content = _jsxs(_Fragment, { children: [_jsx("span", { ref: label, className: "flood-data-table__header-label", children: column.label }), " ", column.unit && _jsx(Badge, { size: "sm", variant: "outline", className: "flood-data-table__header-unit", "aria-hidden": "true", children: column.unit })] });
+    return _jsx(Tooltip, { content: columnName(column), disabled: !truncated, trigger: trigger => column.sortable ? _jsxs(Button, { ...trigger, "aria-describedby": undefined, variant: "ghost", size: "sm", disabled: disabled, className: "flood-data-table__sort", "aria-label": sortLabel, onClick: onSort, children: [content, _jsx(IconSlot, { size: "sm", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: descending ? _jsx("path", { d: "m7 14 5-5 5 5" }) : _jsx("path", { d: "m8 8 4-4 4 4M8 16l4 4 4-4" }) }) })] }) : _jsx("span", { ...trigger, "aria-describedby": undefined, className: "flood-data-table__header-content", tabIndex: truncated ? 0 : undefined, children: content }) });
+}
+function activatePrimaryRowAction(event) {
+    const target = event.target;
+    const row = event.currentTarget;
+    if (!(target instanceof Element) || target.closest("tr") !== row || event.defaultPrevented ||
+        event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+        return;
+    const control = target.closest('button,a,input,label,select,textarea,summary,[role],[tabindex],[contenteditable]:not([contenteditable="false"])');
+    if (control && row.contains(control))
+        return;
+    const selection = row.ownerDocument.getSelection();
+    if (selection && !selection.isCollapsed && selection.containsNode(row, true))
+        return;
+    const button = row.querySelector(":scope > td > .flood-stack > .flood-data-table__primary-action");
+    if (!button || button.disabled || button.getAttribute("aria-disabled") === "true")
+        return;
+    button.focus({ preventScroll: true });
+    button.click();
+}
+export const ManagedDataTable = /* @__PURE__ */ forwardRef(function ManagedDataTable({ caption, hideCaption = false, columns, rows, density = "comfortable", striped = false, minWidth = "40rem", toolbar, inset = "standard", maxViewportHeight, stickyHeader, showColumnVisibility = false, hiddenColumnIds, defaultHiddenColumnIds = [], onHiddenColumnIdsChange, columnWidths, defaultColumnWidths, onColumnWidthsChange, expandedIds, defaultExpandedIds, onExpandedChange, sort: controlledSort, defaultSort = null, onSortChange, locale = "en", selectable = false, selectedIds, defaultSelectedIds = [], onSelectionChange, page: controlledPage, defaultPage = 1, pageSize = 10, onPageChange, showResults = true, showSelection = true, paginationMode = "client", totalRows, selectionScope, state = "ready", onRetry, emptyContent, labels = {}, className, ...props }, ref) {
     if (!caption.trim() || columns.length === 0 || columns.some(column => !column.id.trim() || !column.label.trim()) || new Set(columns.map(column => column.id)).size !== columns.length)
         throw new Error("Flood DataTable requires a caption and unique named columns");
     if (rows.some(row => !row.id.trim() || (row.label !== undefined && !row.label.trim())) || new Set(rows.map(row => row.id)).size !== rows.length)
         throw new Error("Flood DataTable rows require unique nonempty IDs and labels");
+    if (rows.some(({ primaryAction }) => primaryAction && (typeof primaryAction.title !== "string" || !primaryAction.title.trim() ||
+        !columns.some(column => column.id === primaryAction.column))))
+        throw new Error("Flood DataTable primary actions require a nonempty title and an existing column");
     if (!Number.isSafeInteger(pageSize) || pageSize < 1 || !Number.isSafeInteger(defaultPage) || defaultPage < 1 || (controlledPage !== undefined && (!Number.isSafeInteger(controlledPage) || controlledPage < 1)))
         throw new Error("Flood DataTable page and pageSize must be positive safe integers");
+    const server = paginationMode === "server", scope = selectionScope ?? (server ? "page" : "dataset");
+    if (server && (controlledPage === undefined || !onPageChange || !Number.isSafeInteger(totalRows) || (totalRows ?? -1) < 0))
+        throw new Error("Flood server DataTable requires page, onPageChange and a nonnegative totalRows");
+    if (server && columns.some(column => column.sortable) && (controlledSort === undefined || !onSortChange))
+        throw new Error("Flood server sorting requires sort (or null) and onSortChange");
+    if (server && selectable && scope === "dataset" && (selectedIds === undefined || !onSelectionChange))
+        throw new Error("Flood server dataset selection must be controlled");
     const [localSort, setSort] = useState(defaultSort), [localSelected, setSelected] = useState(defaultSelectedIds), [localPage, setPage] = useState(defaultPage);
     const requestedSort = controlledSort === undefined ? localSort : controlledSort;
     const sorting = requestedSort && columns.some(column => column.id === requestedSort.column && column.sortable) ? requestedSort : null;
+    const [localHiddenIds, setHiddenIds] = useState(defaultHiddenColumnIds);
+    const hidden = new Set(hiddenColumnIds ?? localHiddenIds);
+    const required = new Set(rows.flatMap(row => row.primaryAction ? [row.primaryAction.column] : []));
+    if (sorting)
+        required.add(sorting.column);
+    const displayed = columns.filter(column => column.hideable === false || required.has(column.id) || !hidden.has(column.id));
+    const retained = displayed.length > 0 ? displayed : columns.slice(0, 1);
+    const visibleColumns = [
+        ...retained.filter(column => column.pinned === "start"),
+        ...retained.filter(column => !column.pinned),
+        ...retained.filter(column => column.pinned === "end"),
+    ];
+    const expansion = useDataTableExpansion(rows, expandedIds, defaultExpandedIds, onExpandedChange);
+    const columnLayout = useDataTableColumnLayout(columns, visibleColumns, {
+        columnWidths, defaultColumnWidths, onColumnWidthsChange, measureViewport: expansion.enabled,
+    });
+    const columnCount = visibleColumns.length + Number(selectable) + Number(expansion.enabled);
+    const visibleIds = new Set(visibleColumns.map(column => column.id));
+    const normalizeHiddenIds = (ids) => columns.filter(column => column.hideable !== false && ids.has(column.id)).map(column => column.id);
+    const defaultIds = normalizeHiddenIds(new Set(defaultHiddenColumnIds));
+    const requestedIds = normalizeHiddenIds(hidden);
+    const visibilityAtDefaults = requestedIds.length === defaultIds.length && defaultIds.every(id => hidden.has(id));
+    const changeHiddenIds = (next) => {
+        if (hiddenColumnIds === undefined)
+            setHiddenIds(next);
+        onHiddenColumnIdsChange?.(next);
+    };
+    const columnItems = showColumnVisibility ? [
+        ...columns.map((column) => ({
+            id: `column:${column.id}`,
+            type: "checkbox",
+            label: sorting?.column === column.id
+                ? (labels.sortedColumn ?? (label => `${label} (sorted)`))(columnName(column))
+                : columnName(column),
+            checked: visibleIds.has(column.id),
+            disabled: column.hideable === false || required.has(column.id) || (visibleColumns.length === 1 && visibleIds.has(column.id)),
+            onCheckedChange: checked => {
+                const next = new Set(hidden);
+                if (checked)
+                    next.delete(column.id);
+                else
+                    next.add(column.id);
+                changeHiddenIds(normalizeHiddenIds(next));
+            },
+        })),
+        { id: "column-layout-separator", type: "separator" },
+        { id: "reset-columns", label: labels.resetColumns ?? "Reset columns",
+            disabled: visibilityAtDefaults && columnLayout.atDefaults },
+    ] : [];
     const sorted = useMemo(() => {
-        if (!sorting)
+        if (server || !sorting)
             return [...rows];
         const collator = new Intl.Collator(locale, { numeric: true, sensitivity: "base" });
         const value = (row) => {
             const explicit = row.sortValues?.[sorting.column];
             if (explicit !== undefined)
                 return explicit;
+            if (row.primaryAction?.column === sorting.column)
+                return row.primaryAction.title;
             const cell = row.cells[sorting.column];
             return typeof cell === "string" || typeof cell === "number" ? cell : null;
         };
@@ -30,14 +135,17 @@ export const ManagedDataTable = /* @__PURE__ */ forwardRef(function ManagedDataT
             const comparison = typeof left === "number" && typeof right === "number" ? left - right : collator.compare(String(left), String(right));
             return comparison === 0 ? a.index - b.index : comparison * (sorting.direction === "ascending" ? 1 : -1);
         }).map(entry => entry.row);
-    }, [rows, sorting?.column, sorting?.direction, locale]);
-    const pageCount = Math.max(1, Math.ceil(rows.length / pageSize)), page = Math.min(controlledPage ?? localPage, pageCount);
-    const visible = sorted.slice((page - 1) * pageSize, page * pageSize), eligible = new Set(rows.filter(row => !row.selectionDisabled).map(row => row.id));
-    const selection = [...new Set(selectedIds ?? localSelected)].filter(id => eligible.has(id)), chosen = new Set(selection);
+    }, [rows, sorting?.column, sorting?.direction, locale, server]);
+    const total = server ? totalRows : rows.length, pageCount = Math.max(1, Math.ceil(total / pageSize)), page = server ? controlledPage : Math.min(controlledPage ?? localPage, pageCount);
+    if (server && state === "ready" && (page > pageCount || rows.length > pageSize || (page - 1) * pageSize + rows.length > total))
+        throw new Error("Flood server rows and page must match totalRows/pageSize; reconcile the page after a query change");
+    const visible = server ? sorted : sorted.slice((page - 1) * pageSize, page * pageSize), eligible = new Set((scope === "page" ? visible : rows).filter(row => !row.selectionDisabled).map(row => row.id));
+    const accepts = (id) => server && scope === "dataset" ? !rows.some(row => row.id === id && row.selectionDisabled) : eligible.has(id);
+    const selection = [...new Set(selectedIds ?? localSelected)].filter(accepts), chosen = new Set(selection);
     const pageChoices = visible.filter(row => !row.selectionDisabled), all = pageChoices.length > 0 && pageChoices.every(row => chosen.has(row.id)), some = pageChoices.some(row => chosen.has(row.id));
     const blocked = state !== "ready";
     const select = (next) => { if (blocked)
-        return; const accepted = [...new Set(next)].filter(id => eligible.has(id)); if (selectedIds === undefined)
+        return; const accepted = [...new Set(next)].filter(accepts); if (selectedIds === undefined)
         setSelected(accepted); onSelectionChange?.(accepted); };
     const changePage = (next) => { if (blocked)
         return; if (controlledPage === undefined)
@@ -53,6 +161,26 @@ export const ManagedDataTable = /* @__PURE__ */ forwardRef(function ManagedDataT
             changePage(1);
     };
     const resultLabel = labels.results ?? ((from, to, total) => `${from}–${to} of ${total}`);
-    return _jsxs("div", { ...props, ref: ref, className: ["flood-data-table", className].filter(Boolean).join(" "), "aria-busy": state === "loading" || undefined, children: [_jsxs(Table, { caption: caption, hideCaption: hideCaption, density: density, striped: striped, style: { minWidth }, children: [_jsx("thead", { children: _jsxs("tr", { children: [selectable && _jsx("th", { scope: "col", className: "flood-data-table__choice", children: _jsx(Checkbox, { label: _jsx(VisuallyHidden, { children: labels.selectPage ?? "Select rows on this page" }), checked: all, indeterminate: some && !all, disabled: blocked || pageChoices.length === 0, onChange: event => { const ids = new Set(selection); for (const row of pageChoices)
-                                            event.currentTarget.checked ? ids.add(row.id) : ids.delete(row.id); select([...ids]); } }) }), columns.map(column => _jsx("th", { scope: "col", "data-sortable": column.sortable || undefined, "aria-sort": sorting?.column === column.id ? sorting.direction : undefined, style: { textAlign: column.align ?? "start", width: column.width }, children: column.sortable ? _jsxs(Button, { variant: "ghost", size: "sm", disabled: blocked, className: "flood-data-table__sort", "aria-label": (labels.sort ?? ((label) => `Sort by ${label}`))(column.label), onClick: () => changeSort(column.id), children: [column.label, _jsx(IconSlot, { size: "sm", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: sorting?.column === column.id ? _jsx("path", { d: sorting.direction === "ascending" ? "m7 14 5-5 5 5" : "m7 10 5 5 5-5" }) : _jsx("path", { d: "m8 8 4-4 4 4M8 16l4 4 4-4" }) }) })] }) : column.label }, column.id))] }) }), _jsx("tbody", { children: state === "ready" && visible.length > 0 ? visible.map(row => _jsxs("tr", { "data-selected": selectable && chosen.has(row.id) || undefined, children: [selectable && _jsx("td", { className: "flood-data-table__choice", children: _jsx(Checkbox, { label: _jsx(VisuallyHidden, { children: (labels.selectRow ?? ((label) => `Select ${label}`))(row.label ?? row.id) }), checked: chosen.has(row.id), disabled: Boolean(row.selectionDisabled), onChange: event => select(event.currentTarget.checked ? [...selection, row.id] : selection.filter(id => id !== row.id)) }) }), columns.map(column => _jsx("td", { style: { textAlign: column.align ?? "start" }, children: row.cells[column.id] ?? null }, column.id))] }, row.id)) : _jsx("tr", { children: _jsx("td", { colSpan: columns.length + (selectable ? 1 : 0), className: "flood-data-table__state", children: state === "loading" ? _jsx(Spinner, { label: labels.loading ?? "Loading rows…" }) : state === "error" ? _jsxs(Stack, { gap: "3", children: [_jsx(Alert, { tone: "error", announcement: "polite", children: labels.error ?? "Could not load the rows." }), onRetry && _jsx(Button, { variant: "subtle", size: "sm", onClick: onRetry, children: labels.retry ?? "Try again" })] }) : _jsx(Text, { as: "p", size: "compact", tone: "subtle", role: "status", children: labels.empty ?? "No results found." }) }) }) })] }), _jsxs("div", { className: "flood-data-table__footer", children: [_jsx(Text, { as: "p", size: "helper", tone: "subtle", children: state === "ready" ? resultLabel(rows.length ? (page - 1) * pageSize + 1 : 0, Math.min(page * pageSize, rows.length), rows.length) : "" }), selectable && _jsx(Text, { as: "p", size: "helper", tone: "subtle", role: "status", children: (labels.selection ?? ((count, total) => `${count} of ${total} selected`))(selection.length, eligible.size) }), pageCount > 1 && _jsx(Pagination, { page: page, pageCount: pageCount, onPageChange: changePage, disabled: blocked, label: labels.pagination, previousLabel: labels.previousPage, nextLabel: labels.nextPage, pageLabel: labels.page })] })] });
+    const selectionLabel = selectable
+        ? (labels.selection ?? ((count, total) => `${count} of ${total} selected`))(selection.length, server && scope === "dataset" ? total : eligible.size)
+        : null;
+    const renderToolbar = typeof toolbar === "function" ? toolbar : null;
+    const columnsControl = showColumnVisibility ? (_jsx(Menu, { label: labels.columns ?? "Columns", items: columnItems, align: "end", onAction: id => {
+            if (id !== "reset-columns")
+                return;
+            if (!visibilityAtDefaults)
+                changeHiddenIds(defaultIds);
+            columnLayout.reset();
+        }, trigger: trigger => _jsx(Button, { ...trigger, className: renderToolbar ? undefined : "flood-data-table__columns", variant: "subtle", size: "sm", children: labels.columns ?? "Columns" }) })) : null;
+    const toolbarContent = typeof toolbar === "function" ? toolbar({ columns: columnsControl }) : toolbar;
+    const sortLabel = labels.sort ?? ((label) => `Sort by ${label}`);
+    return _jsxs("div", { ...props, ref: ref, className: ["flood-data-table", className].filter(Boolean).join(" "), "data-inset": inset, "aria-busy": state === "loading" || undefined, children: [columnsControl && !renderToolbar ? _jsxs(Inline, { gap: "3", className: "flood-data-table__toolbar", children: [toolbarContent != null && _jsx("div", { className: "flood-data-table__toolbar-content", children: toolbarContent }), columnsControl] }) : toolbarContent != null && _jsx("div", { className: "flood-data-table__toolbar", children: toolbarContent }), _jsxs(Table, { ref: columnLayout.table, className: "flood-data-table__table", caption: caption, hideCaption: hideCaption, density: density, striped: striped, maxViewportHeight: maxViewportHeight, stickyHeader: stickyHeader, "data-inset": inset, "data-fixed-columns": columnLayout.fixedWidth !== undefined || undefined, style: columnLayout.fixedWidth === undefined ? { minWidth } : { minWidth, inlineSize: columnLayout.fixedWidth, tableLayout: "fixed" }, children: [_jsx("thead", { children: _jsxs("tr", { children: [expansion.enabled && _jsx("th", { ...columnLayout.utilityCell("expansion", true), scope: "col", "data-data-table-utility": "expansion", className: "flood-data-table__expand", children: _jsx(VisuallyHidden, { children: labels.rowDetails ?? "Row details" }) }), selectable && _jsx("th", { ...columnLayout.utilityCell("selection", true), scope: "col", className: "flood-data-table__choice", children: _jsx(Checkbox, { label: _jsx(VisuallyHidden, { children: labels.selectPage ?? "Select rows on this page" }), checked: all, indeterminate: some && !all, disabled: blocked || pageChoices.length === 0, onChange: event => { const ids = new Set(selection); for (const row of pageChoices)
+                                            event.currentTarget.checked ? ids.add(row.id) : ids.delete(row.id); select([...ids]); } }) }), visibleColumns.map(column => {
+                                    const name = columnName(column);
+                                    return _createElement("th", { ...columnLayout.columnCell(column, true), key: column.id, scope: "col", "data-numeric": column.numeric || undefined, "data-align": column.align, "data-sortable": column.sortable || undefined, "data-resize-edge": column.resizable ? column.pinned === "end" ? "start" : "end" : undefined, "aria-label": column.sortable ? sortLabel(name) : name, "aria-sort": sorting?.column === column.id ? sorting.direction : undefined },
+                                        _jsx(DataTableHeading, { column: column, sortLabel: sortLabel(name), disabled: blocked, descending: sorting?.column === column.id, onSort: () => changeSort(column.id) }),
+                                        column.resizable && columnLayout.renderHandle(column, (labels.resizeColumn ?? (label => `Resize ${label} column`))(name), blocked));
+                                })] }) }), _jsx("tbody", { children: state === "ready" && visible.length > 0 ? visible.map(row => _jsx(DataTableExpandableRow, { row: row, showDisclosure: expansion.enabled, expanded: expansion.expanded.has(row.id), colSpan: columnCount, labels: labels, onToggle: () => expansion.toggle(row.id), disclosureCellProps: columnLayout.utilityCell("expansion"), viewportWidth: columnLayout.viewportWidth, disclosureWidth: columnLayout.disclosureWidth, children: disclosure => _jsxs("tr", { "data-selected": selectable && chosen.has(row.id) || undefined, "data-primary-action": row.primaryAction && !row.primaryAction.buttonProps.disabled && row.primaryAction.buttonProps["aria-disabled"] !== "true" || undefined, onClick: row.primaryAction ? activatePrimaryRowAction : undefined, children: [disclosure, selectable && _jsx("td", { ...columnLayout.utilityCell("selection"), className: "flood-data-table__choice", children: _jsx(Checkbox, { label: _jsx(VisuallyHidden, { children: (labels.selectRow ?? ((label) => `Select ${label}`))(row.label ?? row.id) }), checked: chosen.has(row.id), disabled: Boolean(row.selectionDisabled), onChange: event => select(event.currentTarget.checked ? [...selection, row.id] : selection.filter(id => id !== row.id)) }) }), visibleColumns.map(column => _createElement("td", { ...columnLayout.columnCell(column), key: column.id, "data-numeric": column.numeric || undefined, "data-align": column.align }, row.primaryAction?.column === column.id
+                                        ? _jsxs(Stack, { gap: "1", children: [_jsx(Button, { ...row.primaryAction.buttonProps, type: "button", variant: "ghost", size: "sm", className: ["flood-data-table__primary-action", row.primaryAction.buttonProps.className].filter(Boolean).join(" "), children: row.primaryAction.title }), row.primaryAction.description != null && _jsx(Text, { as: "div", size: "helper", tone: "subtle", children: row.primaryAction.description })] })
+                                        : row.cells[column.id] ?? null))] }) }, row.id)) : _jsx("tr", { children: _jsx("td", { colSpan: columnCount, className: "flood-data-table__state", children: state === "loading" ? _jsx(Spinner, { label: labels.loading ?? "Loading rows…" }) : state === "error" ? _jsxs(Stack, { gap: "3", children: [_jsx(Alert, { tone: "error", announcement: "polite", children: labels.error ?? "Could not load the rows." }), onRetry && _jsx(Button, { variant: "subtle", size: "sm", onClick: onRetry, children: labels.retry ?? "Try again" })] }) : emptyContent ?? _jsx(Text, { as: "p", size: "compact", tone: "subtle", role: "status", children: labels.empty ?? "No results found." }) }) }) })] }), selectable && !showSelection && _jsx(VisuallyHidden, { role: "status", children: selectionLabel }), (showResults || (selectable && showSelection) || pageCount > 1) && _jsxs("div", { className: "flood-data-table__footer", children: [showResults && _jsx(Text, { as: "p", size: "helper", tone: "subtle", children: state === "ready" ? resultLabel(visible.length ? (page - 1) * pageSize + 1 : 0, visible.length ? (page - 1) * pageSize + visible.length : 0, total) : "" }), selectable && showSelection && _jsx(Text, { as: "p", size: "helper", tone: "subtle", role: "status", children: selectionLabel }), pageCount > 1 && _jsx(Pagination, { page: Math.min(page, pageCount), pageCount: pageCount, onPageChange: changePage, disabled: blocked, label: labels.pagination, previousLabel: labels.previousPage, nextLabel: labels.nextPage, pageLabel: labels.page })] })] });
 });

package/dist/date-picker.js

@@ -4,7 +4,7 @@ import { Calendar, DateField, IconButton, Popover } from "./index.js";
 const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 const triggerSizes = { sm: "xs", md: "sm", lg: "md", xl: "lg" };
 /** Calendar selection and keyboard date entry share one DateField value/form bridge. */
-export const CalendarDatePicker = /* @__PURE__ */ forwardRef(function CalendarDatePicker({ value, defaultValue = "", onValueChange, open: controlledOpen, defaultOpen = false, onOpenChange, calendarLabel, openCalendarLabel, locale, weekStartsOn, today, previousMonthLabel, nextMonthLabel, label, disabled = false, readOnly = false, controlSize = "md", min, max, form, className, onKeyDown, ...props }, forwardedRef) {
+export const CalendarDatePicker = /* @__PURE__ */ forwardRef(function CalendarDatePicker({ value, defaultValue = "", onValueChange, open: controlledOpen, defaultOpen = false, onOpenChange, calendarLabel, openCalendarLabel, viewLabels, locale, weekStartsOn, today, previousMonthLabel, nextMonthLabel, label, disabled = false, readOnly = false, controlSize = "md", min, max, form, className, onKeyDown, ...props }, forwardedRef) {
     const panelLabel = calendarLabel ?? `${label} calendar`;
     const triggerLabel = openCalendarLabel ?? `Open calendar: ${label}`;
     if (!panelLabel.trim() || !triggerLabel.trim())
@@ -100,7 +100,7 @@ export const CalendarDatePicker = /* @__PURE__ */ forwardRef(function CalendarDa
                 event.preventDefault();
                 requestOpen(true);
             }
-        }, end: _jsx(Popover, { title: panelLabel, className: "flood-date-picker__panel", align: "end", positionReference: positionReference, style: { "--flood-date-picker-width": fieldWidth === undefined ? undefined : `${fieldWidth}px` }, open: !blocked && requestedOpen, onOpenChange: requestOpen, disabled: blocked, trigger: trigger => _jsx(IconButton, { ...trigger, label: triggerLabel, variant: "ghost", size: triggerSizes[controlSize], children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "3", y: "5", width: "18", height: "16", rx: "2" }), _jsx("path", { d: "M16 3v4M8 3v4M3 11h18" })] }) }), children: _jsx(Calendar, { label: panelLabel, value: committed, min: min, max: max, locale: locale, weekStartsOn: weekStartsOn, today: today, previousMonthLabel: previousMonthLabel, nextMonthLabel: nextMonthLabel, autoFocus: true, onValueChange: changeDate, onDateSelect: () => {
+        }, end: _jsx(Popover, { title: panelLabel, chrome: "minimal", className: "flood-date-picker__panel", align: "end", positionReference: positionReference, style: { "--flood-date-picker-width": fieldWidth === undefined ? undefined : `${fieldWidth}px` }, open: !blocked && requestedOpen, onOpenChange: requestOpen, disabled: blocked, trigger: trigger => _jsx(IconButton, { ...trigger, label: triggerLabel, variant: "ghost", size: triggerSizes[controlSize], children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "3", y: "5", width: "18", height: "16", rx: "2" }), _jsx("path", { d: "M16 3v4M8 3v4M3 11h18" })] }) }), children: _jsx(Calendar, { label: panelLabel, viewLabels: viewLabels, value: committed, min: min, max: max, locale: locale, weekStartsOn: weekStartsOn, today: today, previousMonthLabel: previousMonthLabel, nextMonthLabel: nextMonthLabel, autoFocus: true, onValueChange: changeDate, onDateSelect: () => {
                     if (blocked || nativeDisabled())
                         return;
                     requestOpen(false);

package/dist/date-range-picker.js

@@ -4,7 +4,7 @@ import { DateRangeField, IconButton, Popover, RangeCalendar } from "./index.js";
 import { emptyDateRange } from "./date-range-value.js";
 const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 const triggerSizes = { sm: "xs", md: "sm", lg: "md", xl: "lg" };
-export const CalendarDateRangePicker = /* @__PURE__ */ forwardRef(function CalendarDateRangePicker({ value, defaultValue = emptyDateRange(), onValueChange, open: controlledOpen, defaultOpen = false, onOpenChange, label, calendarLabel, openCalendarLabel, locale, weekStartsOn, today, previousMonthLabel, nextMonthLabel, rangeLabels, disabled = false, readOnly = false, controlSize = "md", min, max, isDateDisabled, isRangeDisabled, form, className, onKeyDown, ...props }, forwardedRef) {
+export const CalendarDateRangePicker = /* @__PURE__ */ forwardRef(function CalendarDateRangePicker({ value, defaultValue = emptyDateRange(), onValueChange, open: controlledOpen, defaultOpen = false, onOpenChange, label, calendarLabel, openCalendarLabel, viewLabels, locale, weekStartsOn, today, previousMonthLabel, nextMonthLabel, rangeLabels, disabled = false, readOnly = false, controlSize = "md", min, max, isDateDisabled, isRangeDisabled, form, className, onKeyDown, ...props }, forwardedRef) {
     const panelLabel = calendarLabel ?? `${label} calendar`, triggerLabel = openCalendarLabel ?? `Open calendar: ${label}`;
     if (!panelLabel.trim() || !triggerLabel.trim())
         throw new Error("Flood DateRangePicker requires nonempty calendar and trigger labels");
@@ -76,6 +76,6 @@ export const CalendarDateRangePicker = /* @__PURE__ */ forwardRef(function Calen
                 event.preventDefault();
                 requestOpen(true);
             }
-        }, end: _jsx(Popover, { title: panelLabel, className: "flood-date-range-picker__panel", align: "end", positionReference: positionReference, style: { "--flood-date-range-picker-width": fieldWidth ? `${fieldWidth}px` : undefined }, open: !blocked && requestedOpen, onOpenChange: requestOpen, disabled: blocked, trigger: trigger => _jsx(IconButton, { ...trigger, label: triggerLabel, variant: "ghost", size: triggerSizes[controlSize], children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "3", y: "5", width: "18", height: "16", rx: "2" }), _jsx("path", { d: "M16 3v4M8 3v4M3 11h18" })] }) }), children: _jsx(RangeCalendar, { label: panelLabel, value: committed, min: min, max: max, isDateDisabled: isDateDisabled, isRangeDisabled: isRangeDisabled, locale: locale, weekStartsOn: weekStartsOn, today: today, previousMonthLabel: previousMonthLabel, nextMonthLabel: nextMonthLabel, rangeLabels: rangeLabels, autoFocus: true, onValueChange: change, onRangeSelect: () => { if (!blocked && !nativeDisabled())
+        }, end: _jsx(Popover, { title: panelLabel, chrome: "minimal", className: "flood-date-range-picker__panel", align: "end", positionReference: positionReference, style: { "--flood-date-range-picker-width": fieldWidth ? `${fieldWidth}px` : undefined }, open: !blocked && requestedOpen, onOpenChange: requestOpen, disabled: blocked, trigger: trigger => _jsx(IconButton, { ...trigger, label: triggerLabel, variant: "ghost", size: triggerSizes[controlSize], children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "3", y: "5", width: "18", height: "16", rx: "2" }), _jsx("path", { d: "M16 3v4M8 3v4M3 11h18" })] }) }), children: _jsx(RangeCalendar, { label: panelLabel, viewLabels: viewLabels, value: committed, min: min, max: max, isDateDisabled: isDateDisabled, isRangeDisabled: isRangeDisabled, locale: locale, weekStartsOn: weekStartsOn, today: today, previousMonthLabel: previousMonthLabel, nextMonthLabel: nextMonthLabel, rangeLabels: rangeLabels, autoFocus: true, onValueChange: change, onRangeSelect: () => { if (!blocked && !nativeDisabled())
                     requestOpen(false); } }) }) });
 });

package/dist/date-time-picker.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { DatePicker, TimePicker, Fieldset } from "./index.js";
 /** A civil date and wall-clock time. The host owns timezone conversion. */
-export const CivilDateTimePicker = /* @__PURE__ */ forwardRef(function CivilDateTimePicker({ label, validationMessage, timeInterval, hideLabel = false, hideFieldLabels = false, value, defaultValue = { date: "", time: "" }, onValueChange, dateLabel = "Date", timeLabel = "Time", dateName, timeName, form, required = false, disabled = false, readOnly = false, controlSize = "md", precision = "minute", order = "month-day-year", locale = "en-US", minDate, maxDate, minTime, maxTime, step, status, description, className, ...props }, ref) {
+export const CivilDateTimePicker = /* @__PURE__ */ forwardRef(function CivilDateTimePicker({ label, validationMessage, timeInterval, hideLabel = false, hideFieldLabels = false, value, defaultValue = { date: "", time: "" }, onValueChange, dateLabel = "Date", timeLabel = "Time", datePickerLabels, timePickerLabels, dateName, timeName, form, required = false, disabled = false, readOnly = false, controlSize = "md", precision = "minute", order = "month-day-year", locale = "en-US", minDate, maxDate, minTime, maxTime, step, status, description, className, ...props }, ref) {
     const [local, setLocal] = useState(defaultValue);
     const root = useRef(null), initial = useRef(defaultValue);
     useImperativeHandle(ref, () => root.current, []);
@@ -27,5 +27,5 @@ export const CivilDateTimePicker = /* @__PURE__ */ forwardRef(function CivilDate
     };
     // Each field owns native validity, reset and submission. Values are deliberately
     // separate: neither a timezone nor an instant is inferred from this pair.
-    return _jsx("div", { ...props, ref: root, className: ["flood-date-time-picker", className].filter(Boolean).join(" "), children: _jsx(Fieldset, { legend: label, hideLabel: hideLabel, hint: description, disabled: disabled, children: _jsxs("div", { className: "flood-date-time-picker__fields", children: [_jsx(DatePicker, { label: dateLabel, hideLabel: hideFieldLabels, value: value === undefined ? undefined : selected.date, defaultValue: defaultValue.date, onValueChange: next => change("date", next), name: dateName, form: form, required: required, disabled: disabled, readOnly: readOnly, controlSize: controlSize, order: order, locale: locale, min: minDate, max: maxDate, status: status, validationMessage: validationMessage }), _jsx(TimePicker, { label: timeLabel, hideLabel: hideFieldLabels, value: value === undefined ? undefined : selected.time, defaultValue: defaultValue.time, onValueChange: next => change("time", next), name: timeName, form: form, required: required, disabled: disabled, readOnly: readOnly, controlSize: controlSize, precision: precision, min: minTime, max: maxTime, step: step, interval: timeInterval, status: status })] }) }) });
+    return _jsx("div", { ...props, ref: root, className: ["flood-date-time-picker", className].filter(Boolean).join(" "), children: _jsx(Fieldset, { legend: label, hideLabel: hideLabel, hint: description, disabled: disabled, children: _jsxs("div", { className: "flood-date-time-picker__fields", children: [_jsx(DatePicker, { ...datePickerLabels, label: dateLabel, hideLabel: hideFieldLabels, value: value === undefined ? undefined : selected.date, defaultValue: defaultValue.date, onValueChange: next => change("date", next), name: dateName, form: form, required: required, disabled: disabled, readOnly: readOnly, controlSize: controlSize, order: order, locale: locale, min: minDate, max: maxDate, status: status, validationMessage: validationMessage }), _jsx(TimePicker, { ...timePickerLabels, label: timeLabel, hideLabel: hideFieldLabels, value: value === undefined ? undefined : selected.time, defaultValue: defaultValue.time, onValueChange: next => change("time", next), name: timeName, form: form, required: required, disabled: disabled, readOnly: readOnly, controlSize: controlSize, precision: precision, min: minTime, max: maxTime, step: step, interval: timeInterval, status: status })] }) }) });
 });

package/dist/date-time-range-picker.js

@@ -6,7 +6,7 @@ import { parseTime, timeOnStep } from "./time-value.js";
 const empty = () => ({ start: { date: "", time: "" }, end: { date: "", time: "" } });
 const copy = (value) => ({ start: { ...value.start }, end: { ...value.end } });
 const signature = (value) => [value.start.date, value.start.time, value.end.date, value.end.time].join("|");
-export const CivilDateTimeRangePicker = /* @__PURE__ */ forwardRef(function CivilDateTimeRangePicker({ label, hideLabel = false, value, defaultValue = empty(), onValueChange, startDateName, startTimeName, endDateName, endTimeName, startLabel = "Start", endLabel = "End", startDateLabel = "Start date", startTimeLabel = "Start time", endDateLabel = "End date", endTimeLabel = "End time", form, required = false, disabled = false, readOnly = false, controlSize = "md", precision = "minute", order = "month-day-year", locale = "en-US", minDate, maxDate, step: explicitStep, interval, status, description, incompleteMessage = "Complete both dates and times.", reversedMessage = "End must not precede start.", className, onBlur, ...props }, ref) {
+export const CivilDateTimeRangePicker = /* @__PURE__ */ forwardRef(function CivilDateTimeRangePicker({ label, hideLabel = false, value, defaultValue = empty(), onValueChange, startDateName, startTimeName, endDateName, endTimeName, startLabel = "Start", endLabel = "End", startDateLabel = "Start date", startTimeLabel = "Start time", endDateLabel = "End date", endTimeLabel = "End time", startDatePickerLabels, endDatePickerLabels, startTimePickerLabels, endTimePickerLabels, form, required = false, disabled = false, readOnly = false, controlSize = "md", precision = "minute", order = "month-day-year", locale = "en-US", minDate, maxDate, step: explicitStep, interval, status, description, incompleteMessage = "Complete both dates and times.", reversedMessage = "End must not precede start.", className, onBlur, ...props }, ref) {
     if (![label, startLabel, endLabel, startDateLabel, startTimeLabel, endDateLabel, endTimeLabel, incompleteMessage, reversedMessage].every(text => text.trim()))
         throw new Error("Flood DateTimeRangePicker requires nonempty labels and messages");
     const initial = useRef(copy(defaultValue)), [local, setLocal] = useState(() => copy(defaultValue)), [proposal, setProposal] = useState();
@@ -47,5 +47,5 @@ export const CivilDateTimeRangePicker = /* @__PURE__ */ forwardRef(function Civi
             onBlur?.(event);
             if (!event.defaultPrevented && !event.currentTarget.contains(event.relatedTarget))
                 setProposal(undefined);
-        }, children: [_jsx(Fieldset, { legend: label, hideLabel: hideLabel, hint: description, disabled: disabled, children: _jsxs(Stack, { gap: "4", children: [_jsx(DateTimePicker, { ...shared, label: startLabel, dateLabel: startDateLabel, timeLabel: startTimeLabel, value: selected.start, defaultValue: initial.current.start, onValueChange: next => change("start", next), validationMessage: constraint }), _jsx(DateTimePicker, { ...shared, label: endLabel, dateLabel: endDateLabel, timeLabel: endTimeLabel, value: selected.end, defaultValue: initial.current.end, onValueChange: next => change("end", next) })] }) }), [[startDateName, selected.start.date], [startTimeName, selected.start.time], [endDateName, selected.end.date], [endTimeName, selected.end.time]].map(([name, part], index) => name && _jsx("input", { type: "hidden", name: name, form: form, value: accepted ? part : "", disabled: disabled }, index))] });
+        }, children: [_jsx(Fieldset, { legend: label, hideLabel: hideLabel, hint: description, disabled: disabled, children: _jsxs(Stack, { gap: "4", children: [_jsx(DateTimePicker, { ...shared, datePickerLabels: startDatePickerLabels, timePickerLabels: startTimePickerLabels, label: startLabel, dateLabel: startDateLabel, timeLabel: startTimeLabel, value: selected.start, defaultValue: initial.current.start, onValueChange: next => change("start", next), validationMessage: constraint }), _jsx(DateTimePicker, { ...shared, datePickerLabels: endDatePickerLabels, timePickerLabels: endTimePickerLabels, label: endLabel, dateLabel: endDateLabel, timeLabel: endTimeLabel, value: selected.end, defaultValue: initial.current.end, onValueChange: next => change("end", next) })] }) }), [[startDateName, selected.start.date], [startTimeName, selected.start.time], [endDateName, selected.end.date], [endTimeName, selected.end.time]].map(([name, part], index) => name && _jsx("input", { type: "hidden", name: name, form: form, value: accepted ? part : "", disabled: disabled }, index))] });
 });

package/dist/disclosure.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from "react";
+import { type HTMLAttributes, type ReactNode } from "react";
 interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     title: string;
     expanded: boolean;
@@ -6,6 +6,7 @@ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     disabled?: boolean;
     controlSize: "sm" | "md" | "lg" | "xl";
     headingLevel?: 2 | 3 | 4 | 5 | 6;
+    headerAction?: ReactNode;
 }
 /** Shared original disclosure anatomy. The closed panel stays mounted but hidden. */
 export declare const Disclosure: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;

package/dist/disclosure.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement, forwardRef, useEffect, useId, useLayoutEffect, useRef, useImperativeHandle } from "react";
-import { Button } from "./index.js";
+import { Button, IconSlot } from "./index.js";
 const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 /** Shared original disclosure anatomy. The closed panel stays mounted but hidden. */
-export const Disclosure = /* @__PURE__ */ forwardRef(function Disclosure({ title, expanded, onExpandedChange, disabled, controlSize, headingLevel, className, children, id: explicitId, ...props }, ref) {
+export const Disclosure = /* @__PURE__ */ forwardRef(function Disclosure({ title, expanded, onExpandedChange, disabled, controlSize, headingLevel, headerAction, className, children, id: explicitId, ...props }, ref) {
     const generatedId = useId(), id = explicitId ?? `flood-disclosure-${generatedId}`;
     const root = useRef(null), panel = useRef(null), trigger = useRef(null);
     const focusedInside = useRef(false);
@@ -15,7 +15,7 @@ export const Disclosure = /* @__PURE__ */ forwardRef(function Disclosure({ title
         if (!expanded)
             focusedInside.current = false;
     }, [expanded, disabled]);
-    const button = _jsxs(Button, { ref: trigger, variant: "ghost", size: controlSize, id: `${id}-trigger`, type: "button", disabled: disabled, "aria-expanded": expanded, "aria-controls": `${id}-panel`, className: "flood-disclosure__trigger", onClick: () => onExpandedChange(!expanded), children: [_jsx("span", { className: "flood-disclosure__title", children: title }), _jsx("span", { className: "flood-disclosure__indicator", "aria-hidden": "true" })] });
-    return _jsxs("div", { ...props, id: id, ref: root, "data-open": expanded, className: ["flood-disclosure", `flood-control--${controlSize}`, className].filter(Boolean).join(" "), children: [createElement(headingLevel ? `h${headingLevel}` : "div", { className: "flood-disclosure__heading" }, button), _jsx("div", { ref: panel, id: `${id}-panel`, className: "flood-disclosure__panel", hidden: !expanded, onFocusCapture: () => { focusedInside.current = true; }, onBlurCapture: event => { if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget))
+    const button = _jsxs(Button, { ref: trigger, variant: "ghost", size: controlSize, id: `${id}-trigger`, type: "button", disabled: disabled, "aria-expanded": expanded, "aria-controls": `${id}-panel`, className: "flood-disclosure__trigger", onClick: () => onExpandedChange(!expanded), children: [_jsx("span", { className: "flood-disclosure__title", children: title }), _jsx(IconSlot, { size: "2xs", className: "flood-disclosure__indicator", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m3 8 9 8 9-8" }) }) })] });
+    return _jsxs("div", { ...props, id: id, ref: root, "data-open": expanded, className: ["flood-disclosure", `flood-control--${controlSize}`, className].filter(Boolean).join(" "), children: [createElement(headingLevel ? `h${headingLevel}` : "div", { className: "flood-disclosure__heading" }, button, headerAction != null && _jsx("div", { className: "flood-disclosure__action", children: headerAction })), _jsx("div", { ref: panel, id: `${id}-panel`, className: "flood-disclosure__panel", hidden: !expanded, onFocusCapture: () => { focusedInside.current = true; }, onBlurCapture: event => { if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget))
                     focusedInside.current = false; }, children: children })] });
 });

package/dist/editable.js

@@ -1,10 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
-import { Button, IconButton, IconSlot, Input, InputGroup } from "./index.js";
+import { Button, IconButton, IconSlot, Input, InputGroup, Text } from "./index.js";
+import { mergeDescriptions } from "./field-state.js";
+import { positionLayer, registerLayer } from "./overlay-runtime.js";
 const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 const cx = (...values) => values.filter(Boolean).join(" ");
 /** A draft is private until explicitly committed; native forms receive committed text. */
-export const InlineEditable = /* @__PURE__ */ forwardRef(function InlineEditable({ label, hideLabel = false, value, defaultValue = "", onValueChange, editing, defaultEditing = false, onEditingChange, onCommit, onCancel, blurAction = "commit", readOnly = false, disabled = false, placeholder = "Empty", controlSize = "md", showActions = true, editLabel = "Edit", saveLabel = "Save", cancelLabel = "Cancel", inputRef, name, form, id: explicitId, className, onBlur, onKeyDown, ...props }, forwardedRef) {
+export const InlineEditable = /* @__PURE__ */ forwardRef(function InlineEditable({ label, hideLabel = false, value, defaultValue = "", onValueChange, editing, defaultEditing = false, onEditingChange, onCommit, onCancel, validate, inputMode, previewVariant = "subtle", editorOverlayWidth, blurAction = "commit", readOnly = false, disabled = false, placeholder = "Empty", controlSize = "md", showActions = true, editLabel = "Edit", saveLabel = "Save", cancelLabel = "Cancel", inputRef, name, form, id: explicitId, className, onBlur, onKeyDown, ...props }, forwardedRef) {
     if (![label, editLabel, saveLabel, cancelLabel].every(text => text.trim()))
         throw new Error("Flood Editable requires nonempty control and action labels");
     const initial = useRef(defaultValue), [local, setLocal] = useState(defaultValue);
@@ -12,9 +14,13 @@ export const InlineEditable = /* @__PURE__ */ forwardRef(function InlineEditable
     const [localEditing, setLocalEditing] = useState(defaultEditing);
     const requested = editing ?? localEditing, active = requested && !disabled && !readOnly;
     const [draft, setDraft] = useState(committed);
+    const [validationError, setValidationError] = useState();
     const root = useRef(null), editor = useRef(null), bridge = useRef(null), preview = useRef(null);
-    const current = useRef({ committed, active, draft, value, editing, onValueChange, onEditingChange, onCommit, onCancel });
-    current.current = { committed, active, draft, value, editing, onValueChange, onEditingChange, onCommit, onCancel };
+    const layer = useRef(null);
+    const floating = editorOverlayWidth !== undefined;
+    const fitDraft = editorOverlayWidth === "fit-content";
+    const current = useRef({ committed, active, draft, value, editing, onValueChange, onEditingChange, onCommit, onCancel, validate });
+    current.current = { committed, active, draft, value, editing, onValueChange, onEditingChange, onCommit, onCancel, validate };
     const composing = useRef(false), resolved = useRef(false), wasActive = useRef(false);
     const generated = useId(), id = explicitId ?? `flood-editable-${generated}`, inputId = `${id}-input`, previewId = `${id}-preview`;
     useImperativeHandle(forwardedRef, () => root.current, []);
@@ -34,8 +40,12 @@ export const InlineEditable = /* @__PURE__ */ forwardRef(function InlineEditable
     const finish = (action, restoreFocus) => {
         if (!current.current.active || resolved.current || (composing.current && action === "commit") || editor.current?.matches(":disabled"))
             return;
-        resolved.current = true;
         const next = current.current.draft;
+        const message = action === "commit" ? current.current.validate?.(next) : undefined;
+        setValidationError(message);
+        if (message)
+            return;
+        resolved.current = true;
         if (action === "commit") {
             if (next !== current.current.committed) {
                 if (current.current.value === undefined)
@@ -62,10 +72,35 @@ export const InlineEditable = /* @__PURE__ */ forwardRef(function InlineEditable
         // A controlled host may refuse to close and allow a later deliberate attempt.
         queueMicrotask(() => { resolved.current = false; });
     };
+    useBrowserLayoutEffect(() => {
+        const panel = layer.current, anchor = preview.current;
+        if (!active || !floating || !panel || !anchor)
+            return;
+        const document = panel.ownerDocument, view = document.defaultView;
+        panel.showPopover();
+        let frame = 0;
+        const position = () => {
+            positionLayer(anchor, panel, "bottom", "end", true);
+            frame = view.requestAnimationFrame(position);
+        };
+        position();
+        const unregister = registerLayer(document, {
+            panel, anchor: () => anchor, close: () => finish("cancel", true), closeOnFocusOutside: false,
+            outside: () => { if (blurAction !== "none")
+                finish(blurAction, false); },
+        });
+        return () => {
+            unregister();
+            view.cancelAnimationFrame(frame);
+            if (panel.matches(":popover-open"))
+                panel.hidePopover();
+        };
+    }, [active, floating, blurAction]);
     useBrowserLayoutEffect(() => {
         let frame = 0;
         if (active && !wasActive.current) {
             setDraft(current.current.committed);
+            setValidationError(undefined);
             resolved.current = false;
             composing.current = false;
             const view = editor.current?.ownerDocument.defaultView;
@@ -106,7 +141,20 @@ export const InlineEditable = /* @__PURE__ */ forwardRef(function InlineEditable
         return () => { owner.removeEventListener("reset", reset); clearTimeout(timer); };
     }, [form]);
     const glyph = (kind) => _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: kind === "save" ? _jsx("path", { d: "m5 12 4 4L19 6" }) : kind === "cancel" ? _jsx("path", { d: "m6 6 12 12M18 6 6 18" }) : _jsx(_Fragment, { children: _jsx("path", { d: "m15 5 4 4M4 20l4-1L20 7a2.1 2.1 0 0 0-3-3L5 16l-1 4Z" }) }) });
-    const editorProps = { id: inputId, "aria-describedby": props["aria-describedby"], "aria-invalid": props["aria-invalid"], controlSize, disabled };
+    const errorId = `${inputId}-error`;
+    const editorProps = { id: inputId, inputMode, "aria-describedby": mergeDescriptions(props["aria-describedby"], active && validationError ? errorId : undefined),
+        "aria-invalid": active && validationError ? true : props["aria-invalid"], controlSize, disabled };
+    const editButton = _jsxs(Button, { ref: preview, id: previewId, type: "button", variant: previewVariant, size: controlSize, disabled: disabled, className: "flood-editable__preview", "aria-describedby": props["aria-describedby"], "aria-label": `${editLabel}: ${label}. ${committed || placeholder}`, "aria-hidden": active && floating || undefined, tabIndex: active && floating ? -1 : undefined, onClick: start, children: [_jsx("span", { className: "flood-editable__value", "data-empty": !committed || undefined, children: committed || placeholder }), _jsx(IconSlot, { size: controlSize, children: glyph("edit") })] });
+    const editorContent = active && _jsxs(_Fragment, { children: [_jsx(InputGroup, { ...editorProps, ref: editor, value: draft, placeholder: placeholder, size: fitDraft ? Math.max(4, (draft || placeholder).length + 1) : undefined, onChange: event => { setValidationError(undefined); setDraft(event.currentTarget.value); current.current.draft = event.currentTarget.value; }, onCompositionStart: () => { composing.current = true; }, onCompositionEnd: event => {
+                    composing.current = false;
+                    setDraft(event.currentTarget.value);
+                    current.current.draft = event.currentTarget.value;
+                    const document = event.currentTarget.ownerDocument;
+                    if (blurAction !== "none" && !root.current?.contains(document.activeElement))
+                        queueMicrotask(() => finish(blurAction, false));
+                }, end: showActions ? _jsxs("div", { className: "flood-editable__actions", children: [_jsx(IconButton, { type: "button", label: saveLabel, size: controlSize, variant: "ghost", onPointerDown: event => { if (event.pointerType === "mouse")
+                                event.preventDefault(); }, onMouseDown: event => event.preventDefault(), onClick: () => finish("commit", true), children: glyph("save") }), _jsx(IconButton, { type: "button", label: cancelLabel, size: controlSize, variant: "ghost", onPointerDown: event => { if (event.pointerType === "mouse")
+                                event.preventDefault(); }, onMouseDown: event => event.preventDefault(), onClick: () => finish("cancel", true), children: glyph("cancel") })] }) : undefined }), validationError && _jsx(Text, { as: "p", id: errorId, role: "alert", size: "helper", tone: "error", className: "flood-editable__error", children: validationError })] });
     return _jsxs("div", { ...props, ref: root, id: id, className: cx("flood-editable", className), "data-editing": active || undefined, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, onKeyDown: event => {
             onKeyDown?.(event);
             if (event.defaultPrevented || !current.current.active || event.target !== editor.current || event.nativeEvent.isComposing || composing.current || event.keyCode === 229 || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
@@ -120,16 +168,7 @@ export const InlineEditable = /* @__PURE__ */ forwardRef(function InlineEditable
             if (event.defaultPrevented || !current.current.active || event.currentTarget.contains(event.relatedTarget) || blurAction === "none")
                 return;
             finish(blurAction, false);
-        }, children: [_jsx("label", { htmlFor: active || readOnly ? inputId : previewId, className: cx("flood-label", hideLabel && "flood-visually-hidden"), children: label }), _jsx("input", { ref: bridge, type: "hidden", name: name, form: form, value: committed, disabled: disabled }), active ? _jsx(InputGroup, { ...editorProps, ref: editor, value: draft, placeholder: placeholder, onChange: event => { setDraft(event.currentTarget.value); current.current.draft = event.currentTarget.value; }, onCompositionStart: () => { composing.current = true; }, onCompositionEnd: event => {
-                    composing.current = false;
-                    setDraft(event.currentTarget.value);
-                    current.current.draft = event.currentTarget.value;
-                    const document = event.currentTarget.ownerDocument;
-                    if (blurAction !== "none" && !root.current?.contains(document.activeElement))
-                        queueMicrotask(() => finish(blurAction, false));
-                }, end: showActions ? _jsxs("div", { className: "flood-editable__actions", children: [_jsx(IconButton, { type: "button", label: saveLabel, size: controlSize, variant: "ghost", onPointerDown: event => { if (event.pointerType === "mouse")
-                                event.preventDefault(); }, onMouseDown: event => event.preventDefault(), onClick: () => finish("commit", true), children: glyph("save") }), _jsx(IconButton, { type: "button", label: cancelLabel, size: controlSize, variant: "ghost", onPointerDown: event => { if (event.pointerType === "mouse")
-                                event.preventDefault(); }, onMouseDown: event => event.preventDefault(), onClick: () => finish("cancel", true), children: glyph("cancel") })] }) : undefined })
-                : readOnly ? _jsx(Input, { ...editorProps, ref: editor, value: committed, readOnly: true })
-                    : _jsxs(Button, { ref: preview, id: previewId, type: "button", variant: "subtle", size: controlSize, disabled: disabled, className: "flood-editable__preview", "aria-describedby": props["aria-describedby"], "aria-label": `${editLabel}: ${label}. ${committed || placeholder}`, onClick: start, children: [_jsx("span", { className: "flood-editable__value", "data-empty": !committed || undefined, children: committed || placeholder }), _jsx(IconSlot, { size: controlSize, children: glyph("edit") })] })] });
+        }, children: [_jsx("label", { htmlFor: active || readOnly ? inputId : previewId, className: cx("flood-label", hideLabel && "flood-visually-hidden"), children: label }), _jsx("input", { ref: bridge, type: "hidden", name: name, form: form, value: committed, disabled: disabled }), readOnly ? _jsx(Input, { ...editorProps, ref: editor, value: committed, readOnly: true }) : (!active || floating) && editButton, active && (floating
+                ? _jsx("div", { ref: layer, popover: "manual", className: "flood-overlay-panel flood-editable__overlay", "data-fit-draft": fitDraft || undefined, style: { inlineSize: editorOverlayWidth }, children: editorContent })
+                : editorContent)] });
 });

package/dist/filter-condition.d.ts

@@ -0,0 +1,3 @@
+import { type FilterConditionProps } from './index.js';
+/** One controlled finite-choice predicate. Query execution and draft/application belong to the host. */
+export declare const PredicateRow: import("react").ForwardRefExoticComponent<FilterConditionProps & import("react").RefAttributes<HTMLFieldSetElement>>;

package/dist/filter-condition.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Field, Fieldset, Grid, IconButton, MultiSelect, Select } from './index.js';
+/** One controlled finite-choice predicate. Query execution and draft/application belong to the host. */
+export const PredicateRow = /* @__PURE__ */ forwardRef(function PredicateRow({ label, properties, value, onValueChange, onRemove, controlSize = 'sm', labels, disabled = false, hideLabel = true, className, ...props }, ref) {
+    const property = properties.find(property => property.id === value.property);
+    if (!label.trim() || !properties.length || new Set(properties.map(property => property.id)).size !== properties.length ||
+        properties.some(property => !property.id.trim() || !property.label.trim()) || !property ||
+        !['is', 'is-not'].includes(value.operator))
+        throw new Error('Flood FilterCondition requires named unique properties and a supported predicate');
+    const names = {
+        property: `${label} property`, operator: `${label} operator`, values: `${label} values`,
+        include: 'is any of', exclude: 'is none of', placeholder: 'Choose values…', remove: `Remove ${label.charAt(0).toLowerCase()}${label.slice(1)}`,
+        ...labels,
+    };
+    return _jsx(Fieldset, { ...props, ref: ref, legend: label, hideLabel: hideLabel, disabled: disabled, className: ['flood-filter-condition', className].filter(Boolean).join(' '), "data-removable": Boolean(onRemove), children: _jsxs(Grid, { gap: "2", className: "flood-filter-condition__row", children: [_jsx(Field, { label: names.property, hideLabel: true, children: field => _jsx(Select, { ...field, controlSize: controlSize, value: value.property, disabled: disabled, onChange: event => { if (!disabled)
+                            onValueChange({ ...value, property: event.currentTarget.value, values: [] }); }, children: properties.map(property => _jsx("option", { value: property.id, disabled: property.disabled, children: property.label }, property.id)) }) }), _jsx(Field, { label: names.operator, hideLabel: true, children: field => _jsxs(Select, { ...field, controlSize: controlSize, value: value.operator, disabled: disabled, onChange: event => { if (!disabled)
+                            onValueChange({ ...value, operator: event.currentTarget.value }); }, children: [_jsx("option", { value: "is", children: names.include }), _jsx("option", { value: "is-not", children: names.exclude })] }) }), _jsx("div", { className: "flood-filter-condition__values", children: _jsx(Field, { label: names.values, hideLabel: true, children: field => _jsx(MultiSelect, { ...field, controlSize: controlSize, options: property.options, value: value.values, placeholder: names.placeholder, disabled: disabled, onValueChange: values => { if (!disabled)
+                                onValueChange({ ...value, values }); } }) }) }), onRemove && _jsx(IconButton, { label: names.remove, size: controlSize, variant: "subtle", disabled: disabled, className: "flood-filter-condition__remove", onClick: () => { if (!disabled)
+                        onRemove(); }, children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "m6 6 12 12M18 6 6 18" }) }) })] }) });
+});

package/dist/filter-group.d.ts

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