@flood-md/react 0.2.11 → 0.2.13

package/dist/histogram.d.ts

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

package/dist/histogram.js

@@ -0,0 +1,78 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useState } from "react";
+import { Inline, Surface, Text, VisuallyHidden } from "./index.js";
+const defaultBoundary = new Intl.NumberFormat("en", { maximumSignificantDigits: 12 });
+const defaultCount = new Intl.NumberFormat("en", { maximumFractionDigits: 0 });
+export const HistogramPlot = /* @__PURE__ */ forwardRef(function HistogramPlot({ label, xLabel, showXAxisLabel = true, start, binWidth, counts, maxCount, countLabel = "Count", formatBoundary = defaultBoundary.format, formatCount = defaultCount.format, emptyLabel = "No observations", navigationLabel = "Use arrow keys to explore intervals, or Home and End to jump.", className, ...props }, ref) {
+    const instructions = useId();
+    const [cursor, setCursor] = useState(0);
+    const [hovered, setHovered] = useState();
+    const [tapped, setTapped] = useState();
+    const [focused, setFocused] = useState(false);
+    if (!Number.isFinite(start) || !Number.isFinite(binWidth) || binWidth <= 0) {
+        throw new RangeError("Flood Histogram requires a finite start and positive finite bin width");
+    }
+    let largest = 0;
+    let previous = start;
+    const bins = counts.map((count, i) => {
+        const end = start + (i + 1) * binWidth;
+        if (!Number.isSafeInteger(count) || count < 0 || !Number.isFinite(end) || end <= previous) {
+            throw new RangeError("Flood Histogram requires nonnegative integer counts and increasing finite boundaries");
+        }
+        const bin = { start: previous, end, count };
+        previous = end;
+        largest = Math.max(largest, count);
+        return bin;
+    });
+    const limit = maxCount ?? (largest || 1);
+    if (!Number.isFinite(limit) || limit <= 0 || limit < largest) {
+        throw new RangeError("Flood Histogram maxCount must be finite, positive and at least the largest count");
+    }
+    const last = bins.length - 1;
+    const active = Math.min(last, hovered ?? tapped ?? cursor);
+    const selected = bins[active];
+    const inspecting = hovered !== undefined || tapped !== undefined || focused;
+    const interval = selected && `${formatBoundary(selected.start)}–${formatBoundary(selected.end)}`;
+    const value = selected && formatCount(selected.count);
+    const valueText = selected && `${xLabel}: ${interval}, ${countLabel}: ${value}`;
+    const middle = bins[Math.floor(bins.length / 2)];
+    const navigate = (event) => {
+        let next;
+        switch (event.key) {
+            case "ArrowLeft":
+            case "ArrowDown":
+                next = active - 1;
+                break;
+            case "ArrowRight":
+            case "ArrowUp":
+                next = active + 1;
+                break;
+            case "Home":
+                next = 0;
+                break;
+            case "End":
+                next = last;
+                break;
+            case "Escape":
+                if (inspecting)
+                    event.preventDefault();
+                setHovered(undefined);
+                setTapped(undefined);
+                setFocused(false);
+                return;
+            default: return;
+        }
+        event.preventDefault();
+        setHovered(undefined);
+        setTapped(undefined);
+        setFocused(true);
+        setCursor(Math.max(0, Math.min(last, next)));
+    };
+    return _jsx("div", { ...props, ref: ref, className: ["flood-histogram", className].filter(Boolean).join(" "), role: "group", "aria-label": label, children: selected ? _jsxs(_Fragment, { children: [last > 0 && _jsx(VisuallyHidden, { id: instructions, children: navigationLabel }), _jsxs("div", { className: "flood-histogram__plot", dir: "ltr", role: last > 0 ? "slider" : "img", tabIndex: last > 0 ? 0 : undefined, "aria-label": last > 0 ? label : valueText, "aria-describedby": last > 0 ? instructions : undefined, "aria-valuemin": last > 0 ? 1 : undefined, "aria-valuemax": last > 0 ? bins.length : undefined, "aria-valuenow": last > 0 ? active + 1 : undefined, "aria-valuetext": last > 0 ? valueText : undefined, onFocus: event => setFocused(event.currentTarget.matches(":focus-visible")), onBlur: () => setFocused(false), onKeyDown: navigate, onPointerLeave: () => setHovered(undefined), children: [_jsx("div", { className: "flood-histogram__columns", "aria-hidden": "true", children: bins.map((bin, i) => _jsx("div", { className: "flood-histogram__bin", "data-active": inspecting && i === active || undefined, onPointerEnter: event => { if (event.pointerType !== "touch")
+                                    setHovered(i); }, onPointerUp: event => { if (event.pointerType === "touch")
+                                    setTapped(current => current === i ? undefined : i); }, children: _jsx("span", { className: "flood-histogram__bar", "data-zero": bin.count === 0 || undefined, style: { "--flood-histogram-bin-height": `${bin.count / limit * 100}%` } }) }, i)) }), inspecting && _jsxs(Surface, { className: "flood-chart__tooltip flood-histogram__tooltip", padding: "2", elevation: "raised", "aria-hidden": "true", style: {
+                                "--flood-histogram-active": `${(active + .5) / bins.length * 100}%`,
+                                "--flood-histogram-half-bin": `${50 / bins.length}%`,
+                                "--flood-histogram-tip-side": active >= bins.length / 2 ? -1 : 0,
+                            }, children: [_jsx(Text, { size: "helper", children: interval }), _jsxs(Inline, { gap: "2", align: "baseline", className: "flood-histogram__tooltip-count", children: [_jsx(Text, { size: "helper", tone: "subtle", children: countLabel }), _jsx(Text, { size: "helper", children: value })] })] })] }), _jsxs("div", { className: "flood-histogram__axis", dir: "ltr", "aria-hidden": "true", children: [_jsx(Text, { size: "helper", tone: "subtle", children: formatBoundary(start) }), last > 0 && _jsx(Text, { className: "flood-histogram__mid-label", size: "helper", tone: "subtle", style: { left: `${Math.floor(bins.length / 2) / bins.length * 100}%` }, children: formatBoundary(middle.start) }), _jsx(Text, { size: "helper", tone: "subtle", children: formatBoundary(previous) })] }), showXAxisLabel && _jsx(Text, { className: "flood-histogram__axis-label", size: "helper", tone: "subtle", dir: "auto", "aria-hidden": "true", children: xLabel })] }) : _jsx(Text, { className: "flood-histogram__empty", size: "compact", tone: "subtle", children: emptyLabel }) });
+});

package/dist/index.d.ts

@@ -80,8 +80,12 @@ export interface CollectionToolbarProps extends Omit<FieldsetProps, "children" |
     onRemoveFilter?: (id: string) => void;
     appliedFiltersLabel?: string;
     summaryPrefix?: ReactNode;
+    /** Align search and filters as a group to the end of a shared control row. */
+    align?: "stretch" | "end";
     /** At most two task-important quick filters; move additional properties into filterContent. */
     quickFilters?: ReactNode;
+    /** Additional commands beside Filters in the same tool row. */
+    actions?: ReactNode;
     filterContent?: ReactNode;
     filtersLabel?: string;
     filterTitle?: string;
@@ -277,10 +281,21 @@ export declare const ImagePreview: import("react").ForwardRefExoticComponent<Ima
 export interface DataTableColumn {
     id: string;
     label: string;
+    /** Short unit shown alongside the label, such as USD or kg. */
+    unit?: string;
     sortable?: boolean;
     numeric?: boolean;
     align?: "start" | "end";
     width?: CSSProperties["width"];
+    /** Keep this column visible when the host or Columns menu hides other columns. */
+    hideable?: boolean;
+    /** Opt into pointer and keyboard width adjustments for this column. */
+    resizable?: boolean;
+    /** Interactive width bounds in CSS pixels. */
+    minWidth?: number;
+    maxWidth?: number;
+    /** Keep the column at a logical edge when the table scrolls horizontally. */
+    pinned?: "start" | "end";
 }
 export interface DataTableRow {
     id: string;
@@ -288,6 +303,8 @@ export interface DataTableRow {
     cells: Readonly<Record<string, ReactNode>>;
     sortValues?: Readonly<Record<string, string | number | null>>;
     selectionDisabled?: boolean;
+    /** Related detail rendered in a separate full-width row on disclosure. */
+    expandedContent?: ReactNode;
     /** One named record-opening action. Other controls in the row remain independent. */
     primaryAction?: {
         column: string;
@@ -312,6 +329,13 @@ export interface DataTableLabels {
     results?: (from: number, to: number, total: number) => string;
     selection?: (selected: number, total: number) => string;
     sort?: (label: string) => string;
+    columns?: string;
+    resetColumns?: string;
+    sortedColumn?: (label: string) => string;
+    resizeColumn?: (label: string) => string;
+    expandRow?: (label: string) => string;
+    collapseRow?: (label: string) => string;
+    rowDetails?: string;
     pagination?: string;
     previousPage?: string;
     nextPage?: string;
@@ -319,17 +343,33 @@ export interface DataTableLabels {
 }
 export interface DataTableProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     /** Host-owned heading, search and filters aligned with the outer table cells. */
-    toolbar?: ReactNode;
+    toolbar?: ReactNode | ((controls: {
+        columns: ReactNode;
+    }) => ReactNode);
     inset?: "standard" | "roomy";
     /** Ready with no rows only. Compose EmptyState/actions here; loading and error keep their owners. */
     emptyContent?: ReactNode;
     caption: string;
     hideCaption?: boolean;
     columns: readonly DataTableColumn[];
+    showColumnVisibility?: boolean;
+    hiddenColumnIds?: readonly string[];
+    /** Initial hidden columns and the layout restored by Reset columns. */
+    defaultHiddenColumnIds?: readonly string[];
+    onHiddenColumnIdsChange?: (ids: string[]) => void;
+    columnWidths?: Readonly<Record<string, number>>;
+    defaultColumnWidths?: Readonly<Record<string, number>>;
+    onColumnWidthsChange?: (widths: Record<string, number>) => void;
     rows: readonly DataTableRow[];
+    expandedIds?: readonly string[];
+    defaultExpandedIds?: readonly string[];
+    onExpandedChange?: (ids: string[]) => void;
     density?: "compact" | "comfortable";
     striped?: boolean;
     minWidth?: CSSProperties["minWidth"];
+    /** Maximum height of the scroll viewport, including the header. */
+    maxViewportHeight?: CSSProperties["maxBlockSize"];
+    stickyHeader?: boolean;
     sort?: DataTableSort | null;
     defaultSort?: DataTableSort | null;
     onSortChange?: (sort: DataTableSort | null) => void;
@@ -344,6 +384,8 @@ export interface DataTableProps extends Omit<HTMLAttributes<HTMLDivElement>, "ch
     onPageChange?: (page: number) => void;
     /** Hide the result range while preserving selection and pagination controls. */
     showResults?: boolean;
+    /** Hide the visible selection count while retaining its accessible status. */
+    showSelection?: boolean;
     /** Server mode renders rows as the supplied page, without local sorting/slicing. */
     paginationMode?: "client" | "server";
     totalRows?: number;
@@ -355,6 +397,267 @@ export interface DataTableProps extends Omit<HTMLAttributes<HTMLDivElement>, "ch
 }
 /** A client-side table composed from native table, checkbox and pagination. @since 0.2.8 */
 export declare const DataTable: import("react").ForwardRefExoticComponent<DataTableProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface SparklineProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label" | "aria-labelledby"> {
+    /** Equally spaced observations in order. Missing or nonfinite values break the line. */
+    values: readonly (number | null)[];
+    /** Localized text conveying the trend or the absence of data. */
+    label: string;
+    showLabel?: boolean;
+    /** Shared lower and upper bounds for comparisons. Values outside the bounds are clipped. */
+    domain?: readonly [number, number];
+    size?: "sm" | "md";
+    tone?: "neutral" | "accent" | "success" | "warning" | "error";
+    variant?: "line" | "area";
+}
+/** @since 0.2.11 */
+export declare const Sparkline: import("react").ForwardRefExoticComponent<SparklineProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface LineChartSeries {
+    id: string;
+    label: string;
+    /** One observation per category. Missing and nonfinite values break the line. */
+    values: readonly (number | null)[];
+}
+export type ChartSeries = LineChartSeries;
+export interface LineChartProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label"> {
+    label: string;
+    /** Equally spaced categories in the order supplied. */
+    categories: readonly string[];
+    /** One to four comparable series sharing a scale. An empty array is also supported. */
+    series: readonly LineChartSeries[];
+    /** Shared finite bounds containing every observation. */
+    domain?: readonly [number, number];
+    variant?: "line" | "area";
+    /** Shape-preserving interpolation between observations. */
+    curve?: "linear" | "smooth";
+    /** Show the numeric scale and horizontal reference lines. */
+    showYAxis?: boolean;
+    /** Show the series key below the plot. Defaults to false. */
+    showLegend?: boolean;
+    formatValue?: (value: number) => string;
+    emptyLabel?: string;
+    missingLabel?: string;
+    navigationLabel?: string;
+}
+export declare const LineChart: import("react").ForwardRefExoticComponent<LineChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface BarChartProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label"> {
+    label: string;
+    categories: readonly string[];
+    /** Compare series side by side, by cumulative magnitude, or by share of each total. Defaults to grouped. */
+    layout?: "grouped" | "stacked" | "percent";
+    /** One to four grouped series. Use null for a missing value. */
+    series: readonly ChartSeries[];
+    /** Finite bounds containing zero and each observation or signed stack extent. Percent uses a fixed scale. */
+    domain?: readonly [number, number];
+    /** Show the series key below the plot. Defaults to false. */
+    showLegend?: boolean;
+    formatValue?: (value: number) => string;
+    /** Format a fraction from 0 to 1 in percent layout. */
+    formatShare?: (share: number) => string;
+    emptyLabel?: string;
+    missingLabel?: string;
+    navigationLabel?: string;
+}
+export declare const BarChart: import("react").ForwardRefExoticComponent<BarChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface DonutChartItem {
+    id: string;
+    label: string;
+    /** A finite nonnegative part of the whole. */
+    value: number;
+}
+export interface DonutChartProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label"> {
+    label: string;
+    /** Up to six categories in display order. */
+    items: readonly DonutChartItem[];
+    totalLabel?: string;
+    emptyLabel?: string;
+    navigationLabel?: string;
+    showLegend?: boolean;
+    formatValue?: (value: number) => string;
+    /** Receives the share as a fraction from 0 to 1. */
+    formatShare?: (share: number) => string;
+}
+export declare const DonutChart: import("react").ForwardRefExoticComponent<DonutChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface HeatmapProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    label: string;
+    columns: readonly string[];
+    rows: readonly {
+        id: string;
+        label: string;
+        values: readonly (number | null)[];
+    }[];
+    /** Shared zero-based scale. Defaults to the largest observed value. */
+    max?: number;
+    formatValue?: (value: number) => string;
+    missingLabel?: string;
+    emptyLabel?: string;
+}
+export declare const Heatmap: import("react").ForwardRefExoticComponent<HeatmapProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface ScatterChartPoint {
+    id: string;
+    label?: string;
+    x: number;
+    y: number;
+}
+export interface ScatterChartProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label"> {
+    label: string;
+    xLabel: string;
+    yLabel: string;
+    /** Observations in keyboard navigation order, with stable, unique IDs. */
+    points: readonly ScatterChartPoint[];
+    /** Finite, increasing bounds that contain all x observations. */
+    xDomain?: readonly [number, number];
+    /** Finite, increasing bounds that contain all y observations. */
+    yDomain?: readonly [number, number];
+    formatX?: (value: number) => string;
+    formatY?: (value: number) => string;
+    emptyLabel?: string;
+    navigationLabel?: string;
+}
+export declare const ScatterChart: import("react").ForwardRefExoticComponent<ScatterChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface RangeChartItem {
+    id: string;
+    label: string;
+    /** A missing bound leaves an empty category. */
+    low: number | null;
+    high: number | null;
+    /** Optional observed value within the interval, such as a median. */
+    midpoint?: number;
+}
+export interface RangeChartProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label"> {
+    label: string;
+    items: readonly RangeChartItem[];
+    /** Finite increasing bounds containing all complete intervals. */
+    domain?: readonly [number, number];
+    formatValue?: (value: number) => string;
+    lowLabel?: string;
+    highLabel?: string;
+    midpointLabel?: string;
+    emptyLabel?: string;
+    missingLabel?: string;
+    navigationLabel?: string;
+}
+export declare const RangeChart: import("react").ForwardRefExoticComponent<RangeChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface DumbbellChartItem {
+    id: string;
+    label: string;
+    before: number | null;
+    after: number | null;
+}
+export interface DumbbellChartProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label"> {
+    label: string;
+    items: readonly DumbbellChartItem[];
+    /** Finite, increasing bounds containing all observed endpoints. */
+    domain?: readonly [number, number];
+    beforeLabel?: string;
+    afterLabel?: string;
+    missingLabel?: string;
+    emptyLabel?: string;
+    formatValue?: (value: number) => string;
+    navigationLabel?: string;
+}
+export declare const DumbbellChart: import("react").ForwardRefExoticComponent<DumbbellChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface BoxPlotSummary {
+    low: number;
+    q1: number;
+    median: number;
+    q3: number;
+    high: number;
+}
+export interface BoxPlotItem {
+    id: string;
+    label: string;
+    /** Ordered whiskers, quartiles and median. Null preserves an empty row. */
+    summary: BoxPlotSummary | null;
+    /** Optional observations beyond the supplied whiskers. */
+    outliers?: readonly number[];
+}
+export interface BoxPlotProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label"> {
+    label: string;
+    items: readonly BoxPlotItem[];
+    /** Finite increasing bounds containing every observation. */
+    domain?: readonly [number, number];
+    formatValue?: (value: number) => string;
+    /** Format axis ticks independently of exact values. Defaults to formatValue. */
+    formatAxisValue?: (value: number) => string;
+    emptyLabel?: string;
+    missingLabel?: string;
+    navigationLabel?: string;
+    statisticLabels?: Partial<Record<keyof BoxPlotSummary | "outliers" | "whiskers", string>>;
+}
+export declare const BoxPlot: import("react").ForwardRefExoticComponent<BoxPlotProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface BulletChartItem {
+    id: string;
+    label: string;
+    value: number;
+    target: number;
+}
+export interface BulletChartProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label"> {
+    label: string;
+    items: readonly BulletChartItem[];
+    /** Shared scale maximum. Defaults to the largest actual or target. */
+    max?: number;
+    formatValue?: (value: number) => string;
+    valueLabel?: string;
+    targetLabel?: string;
+    emptyLabel?: string;
+}
+export declare const BulletChart: import("react").ForwardRefExoticComponent<BulletChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface WaterfallChartStep {
+    id: string;
+    label: string;
+    value: number;
+    /** A change adjusts the running total. A total is an absolute checkpoint. */
+    kind?: "change" | "total";
+}
+export interface WaterfallChartProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label"> {
+    label: string;
+    steps: readonly WaterfallChartStep[];
+    /** Finite increasing bounds containing zero and every running total. */
+    domain?: readonly [number, number];
+    formatValue?: (value: number) => string;
+    changeLabel?: string;
+    totalLabel?: string;
+    emptyLabel?: string;
+    navigationLabel?: string;
+}
+export declare const WaterfallChart: import("react").ForwardRefExoticComponent<WaterfallChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface HistogramProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label"> {
+    label: string;
+    /** Name and unit for the numeric axis. */
+    xLabel: string;
+    /** Show the axis title below the numeric ticks. Defaults to true. */
+    showXAxisLabel?: boolean;
+    /** Inclusive lower boundary of the first bin. */
+    start: number;
+    /** Positive width shared by all bins. */
+    binWidth: number;
+    /** Counts in ascending bin order. Zero is a measured empty bin. */
+    counts: readonly number[];
+    /** Common count scale for comparing histograms. Defaults to the largest count or one. */
+    maxCount?: number;
+    countLabel?: string;
+    formatBoundary?: (value: number) => string;
+    formatCount?: (count: number) => string;
+    emptyLabel?: string;
+    navigationLabel?: string;
+}
+export declare const Histogram: import("react").ForwardRefExoticComponent<HistogramProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface BarListItem {
+    id: string;
+    label: string;
+    value: number;
+    valueText?: string;
+}
+export interface BarListProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label"> {
+    label: string;
+    /** Nonnegative values in display order. */
+    items: readonly BarListItem[];
+    /** Shared positive upper bound. Defaults to the largest value, or 1 when all are zero. */
+    max?: number;
+    tone?: SemanticTone;
+    emptyLabel?: string;
+}
+export declare const BarList: import("react").ForwardRefExoticComponent<BarListProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface DataListProps extends Omit<HTMLAttributes<HTMLUListElement>, "role"> {
     density?: "compact" | "comfortable";
     dividers?: boolean;
@@ -898,6 +1201,12 @@ export interface EditableProps extends Omit<HTMLAttributes<HTMLDivElement>, "def
     onEditingChange?: (editing: boolean) => void;
     onCommit?: (value: string) => void;
     onCancel?: () => void;
+    /** Return a message to keep the draft open and prevent a commit. */
+    validate?: (value: string) => string | undefined;
+    inputMode?: InputHTMLAttributes<HTMLInputElement>["inputMode"];
+    previewVariant?: "subtle" | "ghost";
+    /** Render the editor over its trigger at this preferred width. */
+    editorOverlayWidth?: CSSProperties["inlineSize"];
     blurAction?: "commit" | "cancel" | "none";
     readOnly?: boolean;
     disabled?: boolean;
@@ -970,6 +1279,9 @@ export interface TableProps extends Omit<TableHTMLAttributes<HTMLTableElement>,
     density?: DataDensity;
     striped?: boolean;
     scrollLabel?: string;
+    /** Maximum height of the scroll viewport, including the header and caption. */
+    maxViewportHeight?: CSSProperties["maxBlockSize"];
+    stickyHeader?: boolean;
     /** Shared cell alignment. Middle keeps mixed record/action rows coherent; top is an explicit prose-table choice. */
     cellVerticalAlign?: "top" | "middle" | "bottom";
 }
@@ -1134,6 +1446,8 @@ export interface MenuProps extends Omit<HTMLAttributes<HTMLDivElement>, "childre
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
+    /** Resolve a fallback after close if the opener can no longer receive focus. */
+    getFallbackFocus?: () => HTMLElement | null;
     disabled?: boolean;
     side?: "top" | "bottom" | "left" | "right";
     align?: "start" | "center" | "end";
@@ -1183,6 +1497,8 @@ export interface DialogProps extends Omit<HTMLAttributes<HTMLDialogElement>, "ch
     closeLabel?: string;
     closeOnOutsideClick?: boolean;
     initialFocusRef?: RefObject<HTMLElement | null>;
+    /** Resolve a fallback after close if the opener can no longer receive focus. */
+    getFallbackFocus?: () => HTMLElement | null;
 }
 export declare const Dialog: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<HTMLDialogElement>>;
 export interface CommandPaletteProps extends Omit<DialogProps, "children" | "description" | "initialFocusRef"> {
@@ -1206,6 +1522,9 @@ export interface DrawerProps extends DialogProps {
     footer?: ReactNode;
 }
 export declare const Drawer: import("react").ForwardRefExoticComponent<DrawerProps & import("react").RefAttributes<HTMLDialogElement>>;
+export type SheetProps = Omit<DrawerProps, "side">;
+/** A modal bottom sheet for a short task or a list of choices. @since 0.2.12 */
+export declare const Sheet: import("react").ForwardRefExoticComponent<SheetProps & import("react").RefAttributes<HTMLDialogElement>>;
 export interface AlertDialogProps extends Omit<DialogProps, "children" | "role" | "description" | "closeLabel" | "closeOnOutsideClick" | "initialFocusRef"> {
     description: string;
     confirmLabel?: string;
@@ -1504,7 +1823,7 @@ export interface TextProps extends HTMLAttributes<HTMLElement> {
 export declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<HTMLElement>>;
 export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
-    size?: "display" | "large" | "page" | "section";
+    size?: "display" | "large" | "page" | "section" | "group";
 }
 export declare const Heading: import("react").ForwardRefExoticComponent<HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
 export type Space = "0" | "1" | "2" | "3" | "4" | "6" | "8" | "12";
@@ -1597,6 +1916,8 @@ export declare const Divider: import("react").ForwardRefExoticComponent<HTMLAttr
 export interface CodeSnippetProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     code: string;
     codeDirection?: "ltr" | "rtl" | "auto";
+    /** A decorative prompt placed beside the code, outside the selectable text. @since 0.2.13 */
+    prompt?: string;
     action?: ReactNode;
 }
 /** Selectable code with an optional host-owned action; no clipboard side effects. */
@@ -1609,6 +1930,8 @@ export interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
 export declare const ScrollArea: import("react").ForwardRefExoticComponent<ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface CopyButtonProps extends Omit<ButtonProps, "children" | "value" | "type" | "onClick" | "loading"> {
     value: string;
+    /** Use a named square icon action with the same clipboard feedback. @since 0.2.13 */
+    iconOnly?: boolean;
     copyLabel?: string;
     copiedLabel?: string;
     errorLabel?: string;
@@ -1748,7 +2071,7 @@ export interface SectionProps extends Omit<HTMLAttributes<HTMLElement>, "title">
     description?: ReactNode;
     actions?: ReactNode;
     headingLevel?: 2 | 3 | 4 | 5 | 6;
-    headingSize?: "display" | "large" | "page" | "section";
+    headingSize?: HeadingProps["size"];
 }
 export declare const Section: import("react").ForwardRefExoticComponent<SectionProps & import("react").RefAttributes<HTMLElement>>;
 export interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
@@ -1792,6 +2115,8 @@ export interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
     mainRef?: Ref<HTMLElement>;
     scrollLabel?: string;
     scrollOrientation?: ScrollAreaProps["orientation"];
+    /** Keep the content width stable with "none" when the layout already clears the overlay rails. */
+    scrollContentInset?: ScrollAreaProps["contentInset"];
     skipLabel?: string;
 }
 /** Composes application navigation and a main landmark with optional bounded scrolling. @since 0.2.11 */

package/dist/index.js

@@ -51,6 +51,15 @@ import { ClockTimePicker } from "./time-picker.js";
 import { CivilDateTimeRangePicker } from "./date-time-range-picker.js";
 import { FileRecord, UploadRecord, ModalImagePreview, FileMetadata } from "./file-records.js";
 import { ManagedDataTable } from "./data-table.js";
+import { TrendPlot } from "./sparkline.js";
+import { SeriesPlot, GroupedBars, RankedBars, ShareRing, HeatmapGrid } from "./charts.js";
+import { ScatterPlot } from "./scatter-chart.js";
+import { RangePlot } from "./range-chart.js";
+import { DumbbellPlot } from "./dumbbell-chart.js";
+import { DistributionBoxes } from "./box-plot.js";
+import { BulletPlot } from "./bullet-chart.js";
+import { HistogramPlot } from "./histogram.js";
+import { WaterfallPlot } from "./waterfall-chart.js";
 import { CheckableCard, ExclusiveCard } from "./collection-cards.js";
 import { ColorPreview, ColorEditor } from "./color-controls.js";
 import { HoverPreview } from "./hover-card.js";
@@ -96,6 +105,46 @@ export const UploadList = /* @__PURE__ */ forwardRef(function UploadList(props,
 export const ImagePreview = /* @__PURE__ */ forwardRef(function ImagePreview(props, ref) { return _jsx(ModalImagePreview, { ...props, ref: ref }); });
 /** A client-side table composed from native table, checkbox and pagination. @since 0.2.8 */
 export const DataTable = /* @__PURE__ */ forwardRef(function DataTable(props, ref) { return _jsx(ManagedDataTable, { ...props, ref: ref }); });
+/** @since 0.2.11 */
+export const Sparkline = /* @__PURE__ */ forwardRef(function Sparkline({ showLabel = false, size = "md", tone = "accent", variant = "area", ...props }, ref) {
+    return _jsx(TrendPlot, { ...props, showLabel: showLabel, size: size, tone: tone, variant: variant, ref: ref });
+});
+export const LineChart = /* @__PURE__ */ forwardRef(function LineChart({ variant = "area", curve = "smooth", showYAxis = false, emptyLabel = "No data", missingLabel = "No value", navigationLabel = "Use the arrow keys to explore values, or Home and End to jump.", ...props }, ref) {
+    return _jsx(SeriesPlot, { ...props, variant: variant, curve: curve, showYAxis: showYAxis, emptyLabel: emptyLabel, missingLabel: missingLabel, navigationLabel: navigationLabel, ref: ref });
+});
+export const BarChart = /* @__PURE__ */ forwardRef(function BarChart({ emptyLabel = "No data", missingLabel = "No value", navigationLabel = "Use the arrow keys to explore categories, or Home and End to jump.", ...props }, ref) {
+    return _jsx(GroupedBars, { ...props, emptyLabel: emptyLabel, missingLabel: missingLabel, navigationLabel: navigationLabel, ref: ref });
+});
+export const DonutChart = /* @__PURE__ */ forwardRef(function DonutChart({ totalLabel = "Total", emptyLabel = "No data", navigationLabel = "Use the arrow keys to explore segments, or Home and End to jump.", ...props }, ref) {
+    return _jsx(ShareRing, { ...props, totalLabel: totalLabel, emptyLabel: emptyLabel, navigationLabel: navigationLabel, ref: ref });
+});
+export const Heatmap = /* @__PURE__ */ forwardRef(function Heatmap({ missingLabel = "No data", emptyLabel = "No observations", ...props }, ref) {
+    return _jsx(HeatmapGrid, { ...props, missingLabel: missingLabel, emptyLabel: emptyLabel, ref: ref });
+});
+export const ScatterChart = /* @__PURE__ */ forwardRef(function ScatterChart(props, ref) {
+    return _jsx(ScatterPlot, { ...props, ref: ref });
+});
+export const RangeChart = /* @__PURE__ */ forwardRef(function RangeChart(props, ref) {
+    return _jsx(RangePlot, { ...props, ref: ref });
+});
+export const DumbbellChart = /* @__PURE__ */ forwardRef(function DumbbellChart(props, ref) {
+    return _jsx(DumbbellPlot, { ...props, ref: ref });
+});
+export const BoxPlot = /* @__PURE__ */ forwardRef(function BoxPlot(props, ref) {
+    return _jsx(DistributionBoxes, { ...props, ref: ref });
+});
+export const BulletChart = /* @__PURE__ */ forwardRef(function BulletChart(props, ref) {
+    return _jsx(BulletPlot, { ...props, ref: ref });
+});
+export const WaterfallChart = /* @__PURE__ */ forwardRef(function WaterfallChart(props, ref) {
+    return _jsx(WaterfallPlot, { ...props, ref: ref });
+});
+export const Histogram = /* @__PURE__ */ forwardRef(function Histogram(props, ref) {
+    return _jsx(HistogramPlot, { ...props, ref: ref });
+});
+export const BarList = /* @__PURE__ */ forwardRef(function BarList({ tone = "accent", emptyLabel = "No data", ...props }, ref) {
+    return _jsx(RankedBars, { ...props, tone: tone, emptyLabel: emptyLabel, ref: ref });
+});
 /** A native list; links and actions stay independent. @since 0.2.8 */
 export const DataList = /* @__PURE__ */ forwardRef(function DataList({ density = "comfortable", dividers = true, className, ...props }, ref) {
     return _jsx("ul", { ...props, ref: ref, role: "list", "data-density": density, "data-dividers": dividers, className: classes("flood-data-list", className) });
@@ -184,8 +233,8 @@ export const DescriptionList = /* @__PURE__ */ forwardRef(function DescriptionLi
     return _jsx(DescribedData, { ...props, ref: ref, items: items, layout: layout, density: density, dividers: dividers });
 });
 /** @since 0.2.4 */
-export const Table = /* @__PURE__ */ forwardRef(function Table({ caption, children, hideCaption = false, density = "comfortable", striped = false, scrollLabel, cellVerticalAlign = "middle", ...props }, ref) {
-    return _jsx(TabularData, { ...props, ref: ref, caption: caption, hideCaption: hideCaption, density: density, striped: striped, scrollLabel: scrollLabel, cellVerticalAlign: cellVerticalAlign, children: children });
+export const Table = /* @__PURE__ */ forwardRef(function Table({ caption, children, hideCaption = false, density = "comfortable", striped = false, scrollLabel, cellVerticalAlign = "middle", stickyHeader = false, ...props }, ref) {
+    return _jsx(TabularData, { ...props, ref: ref, caption: caption, hideCaption: hideCaption, density: density, striped: striped, scrollLabel: scrollLabel, cellVerticalAlign: cellVerticalAlign, stickyHeader: stickyHeader, children: children });
 });
 /** @since 0.2.4 */
 export const Badge = /* @__PURE__ */ forwardRef(function Badge({ size = "md", tone = "neutral", variant = "subtle", className, ...props }, ref) {
@@ -242,6 +291,10 @@ export const CommandPalette = /* @__PURE__ */ forwardRef(function CommandPalette
 export const Drawer = /* @__PURE__ */ forwardRef(function Drawer({ side = "end", size = "md", defaultOpen = false, closeLabel = "Close", closeOnOutsideClick = true, className, footer, ...props }, ref) {
     return _jsx(ModalOverlay, { ...props, ref: ref, defaultOpen: defaultOpen, closeLabel: closeLabel, closeOnOutsideClick: closeOnOutsideClick, className: classes("flood-drawer", className), "data-side": side, "data-size": size, scrollBody: true, footer: footer });
 });
+/** A modal bottom sheet for a short task or a list of choices. @since 0.2.12 */
+export const Sheet = /* @__PURE__ */ forwardRef(function Sheet({ className, size = "md", ...props }, ref) {
+    return _jsx(ModalOverlay, { ...props, ref: ref, "data-side": "bottom", "data-size": size, className: classes("flood-drawer", "flood-sheet", className), scrollBody: true, bodyContentInset: "none" });
+});
 export const AlertDialog = /* @__PURE__ */ forwardRef(function AlertDialog({ defaultOpen = false, confirmLabel = "Continue", cancelLabel = "Cancel", confirmDisabled = false, ...props }, ref) {
     return _jsx(ConfirmationDialog, { ...props, ref: ref, defaultOpen: defaultOpen, confirmLabel: confirmLabel, cancelLabel: cancelLabel, confirmDisabled: confirmDisabled });
 });
@@ -531,8 +584,8 @@ export const Divider = /* @__PURE__ */ forwardRef(function Divider({ className,
     return _jsx("hr", { ...props, ref: ref, className: classes("flood-divider", className) });
 });
 /** Selectable code with an optional host-owned action; no clipboard side effects. */
-export const CodeSnippet = /* @__PURE__ */ forwardRef(function CodeSnippet({ code, codeDirection = "ltr", action, className, ...props }, ref) {
-    return (_jsxs("div", { ...props, ref: ref, className: classes("flood-code-snippet", className), children: [_jsx("code", { dir: codeDirection, className: "flood-code-snippet__code", children: code }), action != null && _jsx("div", { className: "flood-code-snippet__action", children: action })] }));
+export const CodeSnippet = /* @__PURE__ */ forwardRef(function CodeSnippet({ code, codeDirection = "ltr", prompt, action, className, ...props }, ref) {
+    return (_jsxs("div", { ...props, ref: ref, className: classes("flood-code-snippet", className), children: [_jsxs("div", { dir: codeDirection === "rtl" ? "rtl" : "ltr", className: "flood-code-snippet__line", children: [prompt && _jsx("span", { "aria-hidden": "true", className: "flood-code-snippet__prompt", children: prompt }), _jsx("code", { dir: codeDirection, className: "flood-code-snippet__code", children: code })] }), action != null && _jsx("div", { className: "flood-code-snippet__action", children: action })] }));
 });
 /** Native scrolling with inset overlay tracks; the ref targets the scrollable viewport. */
 export const ScrollArea = /* @__PURE__ */ forwardRef(function ScrollArea({ orientation = "vertical", contentInset = "scrollbar", ...props }, ref) {

package/dist/menu.d.ts

@@ -15,6 +15,7 @@ interface MenuLayerProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"
     rootAnchor: () => HTMLElement | null;
     rootPanel?: () => HTMLDivElement | null;
     onAction?: (id: string) => void;
+    getFallbackFocus?: MenuProps["getFallbackFocus"];
     edge?: () => Edge;
     nested?: boolean;
     position?: (panel: HTMLDivElement) => void;