@flood-md/react 0.2.2 → 0.2.4

package/dist/index.js

@@ -1,39 +1,252 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, createElement, useId, } from "react";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, createElement, useId, useState, } from "react";
+import { useFocusableHidden } from "./focusable-hidden.js";
+import { resolveFieldStatus, hasFieldContent, mergeDescriptions } from "./field-state.js";
+import { SingleSelect } from "./select.js";
+import { MixedCheckbox } from "./checkbox.js";
+import { OverlayScrollArea } from "./scroll-area.js";
+import { ChoiceGroup } from "./choice-group.js";
+import { Disclosure } from "./disclosure.js";
+import { AnchoredOverlay, ModalOverlay } from "./overlays.js";
+import { TabNavigation, BreadcrumbNavigation, PageNavigation } from "./navigation.js";
+import { AvatarArtwork } from "./avatar.js";
+import { ValueIndicator, FeedbackMessage } from "./feedback.js";
+import { DescribedData, TabularData } from "./data-display.js";
+import { ActionMenu } from "./menu.js";
+import { RovingToolbar } from "./toolbar.js";
 const classes = (...values) => values.filter(Boolean).join(" ");
 export const Button = forwardRef(function Button({ variant = "solid", size = "md", loading = false, disabled, type = "button", className, children, ...props }, ref) {
-    return (_jsxs("button", { ...props, ref: ref, type: type, disabled: disabled || loading, "aria-busy": loading || undefined, className: classes("flood-button", `flood-button--${variant}`, `flood-button--${size}`, className), children: [loading && _jsx("span", { className: "flood-spinner", "aria-hidden": "true" }), children] }));
+    return (_jsxs("button", { ...props, ref: ref, type: type, disabled: disabled || loading, "aria-busy": loading || undefined, className: classes("flood-button", `flood-button--${variant}`, `flood-button--${size}`, className), children: [loading && _jsx(Spinner, { decorative: true }), children] }));
 });
-export const Input = forwardRef(function Input({ invalid, controlSize = "md", className, ...props }, ref) {
-    return (_jsx("input", { ...props, ref: ref, "aria-invalid": invalid || props["aria-invalid"], className: classes("flood-input", `flood-control--${controlSize}`, className) }));
+/** @since 0.2.4 */
+export const Kbd = forwardRef(function Kbd({ size = "sm", className, ...props }, ref) {
+    return _jsx("kbd", { ...props, ref: ref, className: classes("flood-kbd", className), "data-size": size });
 });
-export const Textarea = forwardRef(function Textarea({ invalid, controlSize = "md", className, ...props }, ref) {
-    return (_jsx("textarea", { ...props, ref: ref, "aria-invalid": invalid || props["aria-invalid"], className: classes("flood-input", "flood-textarea", `flood-control--${controlSize}`, className) }));
+/** @since 0.2.4 */
+export const Toolbar = forwardRef(function Toolbar({ label, orientation = "horizontal", loop = true, ...props }, ref) {
+    return _jsx(RovingToolbar, { ...props, ref: ref, label: label, orientation: orientation, loop: loop });
 });
-export const Checkbox = forwardRef(function Checkbox({ label, className, ...props }, ref) {
-    return (_jsxs("label", { className: classes("flood-choice", className), children: [_jsx("input", { ...props, ref: ref, type: "checkbox", className: "flood-check" }), _jsx("span", { children: label })] }));
+/** @since 0.2.4 */
+export const DescriptionList = forwardRef(function DescriptionList({ items, layout = "inline", density = "compact", dividers = false, ...props }, ref) {
+    return _jsx(DescribedData, { ...props, ref: ref, items: items, layout: layout, density: density, dividers: dividers });
+});
+/** @since 0.2.4 */
+export const Table = forwardRef(function Table({ caption, children, hideCaption = false, density = "comfortable", striped = false, scrollLabel, ...props }, ref) {
+    return _jsx(TabularData, { ...props, ref: ref, caption: caption, hideCaption: hideCaption, density: density, striped: striped, scrollLabel: scrollLabel, children: children });
+});
+/** @since 0.2.4 */
+export const Badge = forwardRef(function Badge({ size = "md", tone = "neutral", variant = "subtle", className, ...props }, ref) {
+    return _jsx("span", { ...props, ref: ref, className: classes("flood-badge", className), "data-size": size, "data-tone": tone, "data-variant": variant });
+});
+/** @since 0.2.4 */
+export const Spinner = forwardRef(function Spinner({ size = "md", label = "Loading", decorative = false, className, ...props }, ref) {
+    return _jsxs("span", { ...props, ref: ref, className: classes("flood-loading", className), "data-size": size, role: decorative ? undefined : "status", "aria-hidden": decorative || undefined, children: [_jsx("span", { className: "flood-spinner", "aria-hidden": "true" }), !decorative && _jsx(VisuallyHidden, { children: label })] });
+});
+/** @since 0.2.4 */
+export const Skeleton = forwardRef(function Skeleton({ shape = "text", width, height, animate = true, className, style, ...props }, ref) {
+    return _jsx("span", { ...props, ref: ref, className: classes("flood-skeleton", className), "data-shape": shape, "data-animate": animate, "aria-hidden": "true", style: { width, height, ...style } });
+});
+/** @since 0.2.4 */
+export const Avatar = forwardRef(function Avatar({ name, src, fallback, size = "md", shape = "circle", decorative = false, className, ...props }, ref) {
+    const initials = name.trim().split(/\s+/u).filter(Boolean).slice(0, 2).map(word => Array.from(word)[0]).join("").toUpperCase();
+    return _jsx("span", { ...props, ref: ref, className: classes("flood-avatar", className), "data-size": size, "data-shape": shape, role: decorative ? undefined : "img", "aria-label": decorative ? undefined : name, "aria-hidden": decorative || undefined, children: _jsx(AvatarArtwork, { src: src, fallback: fallback ?? (initials || "?") }, src ?? "") });
+});
+/** @since 0.2.4 */
+export const Progress = forwardRef(function Progress({ label, value, max = 100, valueText, size = "md", tone = "accent", hideLabel = false, ...props }, ref) {
+    return _jsx(ValueIndicator, { ...props, ref: ref, kind: "progress", label: label, value: value, min: 0, max: max, valueText: valueText, size: size, tone: tone, hideLabel: hideLabel });
+});
+/** @since 0.2.4 */
+export const Meter = forwardRef(function Meter({ label, value, min = 0, max = 100, valueText, size = "md", tone = "neutral", hideLabel = false, ...props }, ref) {
+    return _jsx(ValueIndicator, { ...props, ref: ref, kind: "meter", label: label, value: value, min: min, max: max, valueText: valueText, size: size, tone: tone, hideLabel: hideLabel });
+});
+/** @since 0.2.4 */
+export const Alert = forwardRef(function Alert({ title, tone = "info", icon, announcement = "off", ...props }, ref) {
+    return _jsx(FeedbackMessage, { ...props, ref: ref, title: title, tone: tone, icon: icon, announcement: announcement });
+});
+export const Tabs = forwardRef(function Tabs({ activationMode = "automatic", orientation = "horizontal", controlSize = "md", disabled = false, iconOnly = false, ...props }, ref) { return _jsx(TabNavigation, { ...props, ref: ref, activationMode: activationMode, orientation: orientation, controlSize: controlSize, disabled: disabled, iconOnly: iconOnly }); });
+export const Breadcrumb = forwardRef(function Breadcrumb({ label = "Breadcrumb", separator = "/", ...props }, ref) { return _jsx(BreadcrumbNavigation, { ...props, ref: ref, label: label, separator: separator }); });
+export const Pagination = forwardRef(function Pagination({ siblingCount = 1, controlSize = "sm", disabled = false, label = "Pagination", previousLabel = "Previous page", nextLabel = "Next page", ...props }, ref) { return _jsx(PageNavigation, { ...props, ref: ref, siblingCount: siblingCount, controlSize: controlSize, disabled: disabled, label: label, previousLabel: previousLabel, nextLabel: nextLabel }); });
+/** @since 0.2.4 */
+export const Menu = forwardRef(function Menu({ defaultOpen = false, disabled = false, side = "bottom", align = "start", controlSize = "sm", ...props }, ref) {
+    return _jsx(ActionMenu, { ...props, ref: ref, defaultOpen: defaultOpen, disabled: disabled, side: side, align: align, controlSize: controlSize });
+});
+export const Tooltip = forwardRef(function Tooltip({ side = "top", align = "center", delay = 300, disabled = false, ...props }, ref) { return _jsx(AnchoredOverlay, { ...props, ref: ref, kind: "tooltip", side: side, align: align, delay: delay, disabled: disabled }); });
+export const Popover = forwardRef(function Popover({ side = "bottom", align = "start", defaultOpen = false, disabled = false, closeLabel = "Close", ...props }, ref) { return _jsx(AnchoredOverlay, { ...props, ref: ref, kind: "popover", side: side, align: align, defaultOpen: defaultOpen, disabled: disabled, closeLabel: closeLabel }); });
+export const Dialog = forwardRef(function Dialog({ defaultOpen = false, disabled = false, closeLabel = "Close", closeOnOutsideClick = true, ...props }, ref) { return _jsx(ModalOverlay, { ...props, ref: ref, defaultOpen: defaultOpen, disabled: disabled, closeLabel: closeLabel, closeOnOutsideClick: closeOnOutsideClick }); });
+export const Collapsible = forwardRef(function Collapsible({ open, defaultOpen = false, onOpenChange, disabled = false, controlSize = "md", ...props }, ref) {
+    const [local, setLocal] = useState(defaultOpen);
+    return _jsx(Disclosure, { ...props, ref: ref, expanded: open ?? local, disabled: disabled, controlSize: controlSize, onExpandedChange: next => {
+            if (open === undefined)
+                setLocal(next);
+            onOpenChange?.(next);
+        } });
+});
+export const Accordion = forwardRef(function Accordion({ label, items, expansionMode = "single", value, defaultValue = [], onValueChange, disabled = false, controlSize = "md", headingLevel = 3, className, onKeyDown, ...props }, ref) {
+    const [local, setLocal] = useState(() => [...new Set(defaultValue)]);
+    const expanded = value ?? local;
+    if (new Set(items.map(item => item.value)).size !== items.length)
+        throw new Error("Flood accordion item values must be unique");
+    if (expansionMode === "single" && new Set(expanded).size > 1)
+        throw new Error("Flood single Accordion accepts at most one value");
+    return _jsx("div", { ...props, ref: ref, role: "group", "aria-label": label, className: classes("flood-accordion", className), onKeyDown: event => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing)
+                return;
+            const buttons = Array.from(event.currentTarget.querySelectorAll(":scope > .flood-disclosure > .flood-disclosure__heading > .flood-disclosure__trigger:not(:disabled)"));
+            const index = buttons.indexOf(event.target);
+            if (index < 0)
+                return;
+            const next = event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : event.key === "ArrowDown" ? (index + 1) % buttons.length : event.key === "ArrowUp" ? (index - 1 + buttons.length) % buttons.length : -1;
+            if (next >= 0) {
+                event.preventDefault();
+                buttons[next].focus();
+            }
+        }, children: items.map(item => _jsx(Collapsible, { title: item.title, open: expanded.includes(item.value), disabled: disabled || item.disabled, controlSize: controlSize, headingLevel: headingLevel, onOpenChange: active => {
+                const next = active ? expansionMode === "single" ? [item.value] : [...new Set([...expanded, item.value])] : expanded.filter(value => value !== item.value);
+                if (value === undefined)
+                    setLocal(next);
+                onValueChange?.([...next]);
+            }, children: item.content }, item.value)) });
+});
+/** A native toggle button; its accessible name stays stable when pressed. */
+export const Toggle = forwardRef(function Toggle({ pressed, defaultPressed = false, onPressedChange, iconOnly = false, size = "md", variant = "subtle", onClick, className, children, disabled, loading, ...props }, ref) {
+    const [local, setLocal] = useState(defaultPressed);
+    const selected = pressed ?? local;
+    return _jsx(Button, { ...props, ref: ref, type: "button", "aria-pressed": selected, size: size, variant: variant, disabled: disabled, loading: loading, className: classes("flood-toggle", iconOnly && "flood-icon-button", className), onClick: event => {
+            onClick?.(event);
+            if (event.defaultPrevented || disabled || loading)
+                return;
+            if (pressed === undefined)
+                setLocal(!selected);
+            onPressedChange?.(!selected);
+        }, children: iconOnly ? _jsx(IconSlot, { size: size, children: children }) : children });
+});
+/** Optional selections exposed as pressed buttons, not radios, tabs or a toolbar. */
+export const ToggleGroup = forwardRef(function ToggleGroup({ label, options, selectionMode = "multiple", value, defaultValue = [], onValueChange, orientation = "horizontal", size = "md", variant = "subtle", disabled = false, iconOnly = false, className, onKeyDown, ...props }, ref) {
+    const [local, setLocal] = useState(() => [...new Set(defaultValue)]);
+    const selected = value ?? local;
+    if (new Set(options.map(option => option.value)).size !== options.length)
+        throw new Error("Flood toggle option values must be unique");
+    if (selectionMode === "single" && new Set(selected).size > 1)
+        throw new Error("Flood single ToggleGroup accepts at most one value");
+    if (iconOnly && options.some(option => !option.icon))
+        throw new Error("Flood icon-only toggle options require icons");
+    return _jsx(ScrollArea, { orientation: "horizontal", tabIndex: -1, role: "group", "aria-label": `${label} scrolling`, className: "flood-connected-scroll", hidden: props.hidden, dir: props.dir, lang: props.lang, style: { maxInlineSize: "100%" }, children: _jsx("div", { ...props, ref: ref, role: "group", "aria-label": label, "data-orientation": orientation, "data-selection-mode": selectionMode, className: classes("flood-button-group", "flood-toggle-group", className), onKeyDown: event => {
+                onKeyDown?.(event);
+                if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing)
+                    return;
+                const buttons = Array.from(event.currentTarget.querySelectorAll(":scope > .flood-toggle:not(:disabled)"));
+                const index = buttons.indexOf(event.target);
+                if (index < 0)
+                    return;
+                const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+                const nextKey = orientation === "vertical" ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight";
+                const previousKey = orientation === "vertical" ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+                const next = event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : event.key === nextKey ? (index + 1) % buttons.length : event.key === previousKey ? (index - 1 + buttons.length) % buttons.length : -1;
+                if (next >= 0) {
+                    event.preventDefault();
+                    buttons[next].focus();
+                }
+            }, children: options.map(option => _jsx(Toggle, { size: size, variant: variant, disabled: disabled || option.disabled, pressed: selected.includes(option.value), iconOnly: iconOnly, "aria-label": iconOnly ? option.label : undefined, onPressedChange: active => {
+                    const next = active ? selectionMode === "single" ? [option.value] : [...new Set([...selected, option.value])] : selected.filter(item => item !== option.value);
+                    if (value === undefined)
+                        setLocal(next);
+                    onValueChange?.([...next]);
+                }, children: iconOnly ? option.icon : _jsxs(_Fragment, { children: [option.icon && _jsx(IconSlot, { size: size, children: option.icon }), option.label] }) }, option.value)) }) });
+});
+/** Connected actions keep their ordinary Tab order; this is not a toolbar. */
+export const ButtonGroup = forwardRef(function ButtonGroup({ label, orientation = "horizontal", className, ...props }, ref) {
+    return _jsx(ScrollArea, { orientation: "horizontal", tabIndex: -1, role: "group", "aria-label": `${label} scrolling`, className: "flood-connected-scroll", hidden: props.hidden, dir: props.dir, lang: props.lang, style: { maxInlineSize: "100%" }, children: _jsx("div", { ...props, ref: ref, role: "group", "aria-label": label, "data-orientation": orientation, className: classes("flood-button-group", className) }) });
+});
+export const Input = forwardRef(function Input({ invalid, status, controlSize = "md", className, ...props }, ref) {
+    return (_jsx("input", { ...props, ref: ref, "data-status": resolveFieldStatus(status, invalid, props["aria-invalid"]), "aria-invalid": invalid || status === "error" || props["aria-invalid"], className: classes("flood-input", `flood-control--${controlSize}`, className) }));
+});
+/** One real Input with host-owned logical start/end adornments. Ref and native attributes target the input. */
+export const InputGroup = forwardRef(function InputGroup({ start, end, controlSize = "md", className, style, invalid, status, disabled, readOnly, ...props }, ref) {
+    return _jsxs("div", { hidden: props.hidden, dir: props.dir, lang: props.lang, className: classes("flood-input-group", `flood-control--${controlSize}`, className), style: style, "data-status": resolveFieldStatus(status, invalid, props["aria-invalid"]), "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, children: [hasFieldContent(start) && _jsx("div", { className: "flood-input-group__addon flood-input-group__addon--start", children: typeof start === "string" ? _jsx("bdi", { dir: "auto", children: start }) : start }), _jsx(Input, { ...props, ref: ref, controlSize: controlSize, invalid: invalid, status: status, disabled: disabled, readOnly: readOnly }), hasFieldContent(end) && _jsx("div", { className: "flood-input-group__addon flood-input-group__addon--end", children: typeof end === "string" ? _jsx("bdi", { dir: "auto", children: end }) : end })] });
+});
+export const Textarea = forwardRef(function Textarea({ invalid, status, controlSize = "md", className, ...props }, ref) {
+    return (_jsx("textarea", { ...props, ref: ref, "data-status": resolveFieldStatus(status, invalid, props["aria-invalid"]), "aria-invalid": invalid || status === "error" || props["aria-invalid"], className: classes("flood-input", "flood-textarea", `flood-control--${controlSize}`, className) }));
+});
+/** Native select and option semantics with an independent visual control size. */
+export const Select = forwardRef(function Select({ invalid, status, controlSize = "md", className, multiple, size, ...props }, ref) {
+    const listbox = multiple || (size !== undefined && size > 1);
+    if (!listbox)
+        return _jsx(SingleSelect, { ...props, status: status, invalid: invalid, controlSize: controlSize, className: className, size: size, ref: ref });
+    return (_jsx("span", { hidden: props.hidden, dir: props.dir, lang: props.lang, className: classes("flood-select", `flood-control--${controlSize}`, listbox && "flood-select--listbox"), children: _jsx("select", { ...props, ref: ref, multiple: multiple, size: size, "data-status": resolveFieldStatus(status, invalid, props["aria-invalid"]), "aria-invalid": invalid || status === "error" || props["aria-invalid"], className: classes("flood-input", "flood-select__control", `flood-control--${controlSize}`, className) }) }));
+});
+export const Checkbox = forwardRef(function Checkbox({ label, indeterminate = false, className, ...props }, ref) {
+    return (_jsxs("label", { hidden: props.hidden, dir: props.dir, lang: props.lang, className: classes("flood-choice", className), children: [_jsx(MixedCheckbox, { ...props, ref: ref, indeterminate: indeterminate }), _jsx("span", { children: label })] }));
 });
 export const Radio = forwardRef(function Radio({ label, className, ...props }, ref) {
-    return (_jsxs("label", { className: classes("flood-choice", className), children: [_jsx("input", { ...props, ref: ref, type: "radio", className: "flood-check" }), _jsx("span", { children: label })] }));
+    return (_jsxs("label", { hidden: props.hidden, dir: props.dir, lang: props.lang, className: classes("flood-choice", className), children: [_jsx("input", { ...props, ref: ref, type: "radio", className: "flood-check" }), _jsx("span", { children: label })] }));
 });
 export const Switch = forwardRef(function Switch({ label, className, ...props }, ref) {
-    return (_jsxs("label", { className: classes("flood-choice", "flood-switch", className), children: [_jsx("span", { children: label }), _jsx("input", { ...props, ref: ref, type: "checkbox", role: "switch", className: "flood-switch-input" })] }));
+    return (_jsxs("label", { hidden: props.hidden, dir: props.dir, lang: props.lang, className: classes("flood-choice", "flood-switch", className), children: [_jsx("span", { children: label }), _jsx("input", { ...props, ref: ref, type: "checkbox", role: "switch", className: "flood-switch-input" })] }));
+});
+/** A native label; the required marker never substitutes for the control's required prop. */
+export const Label = forwardRef(function Label({ required, children, className, ...props }, ref) {
+    return _jsxs("label", { ...props, ref: ref, className: classes("flood-label", className), children: [children, required && _jsx("span", { "aria-hidden": "true", children: " *" })] });
 });
-export function Field({ id: explicitId, label, hint, error, required, describedBy, children, }) {
+/** A native group: disabled, form ownership and nested fieldsets retain browser behavior. */
+export const Fieldset = forwardRef(function Fieldset({ legend, hideLabel = false, hint, error, message, status, children, className, id: explicitId, "aria-describedby": describedBy, "aria-invalid": ariaInvalid, ...props }, ref) {
     const generatedId = useId();
     const id = explicitId ?? `flood-${generatedId}`;
-    const description = [describedBy, hint && `${id}-hint`, error && `${id}-error`].filter(Boolean).join(" ") ||
-        undefined;
-    return (_jsxs("div", { className: "flood-field", children: [_jsxs("label", { className: "flood-label", htmlFor: id, children: [label, required && _jsx("span", { "aria-hidden": "true", children: " *" })] }), children({
+    const legendRef = useFocusableHidden(hideLabel);
+    const hasHint = hasFieldContent(hint), hasError = hasFieldContent(error), hasMessage = hasFieldContent(message) && !hasError;
+    const resolvedStatus = resolveFieldStatus(status, hasError, ariaInvalid);
+    const description = mergeDescriptions(describedBy, hasHint && `${id}-hint`, hasError && `${id}-error`, hasMessage && `${id}-message`);
+    return _jsxs("fieldset", { ...props, ref: ref, id: id, className: classes("flood-fieldset", className), "data-hide-label": hideLabel || undefined, "data-status": resolvedStatus, "aria-describedby": description, "aria-invalid": resolvedStatus === "error" || ariaInvalid || undefined, children: [_jsx("legend", { ref: legendRef, className: classes("flood-legend", hideLabel && "flood-visually-hidden--focusable"), children: legend }), _jsxs("div", { className: "flood-fieldset__body", children: [hasHint && _jsx("div", { id: `${id}-hint`, className: "flood-hint", children: hint }), children, hasMessage && _jsx("div", { id: `${id}-message`, className: "flood-message", role: resolvedStatus === "error" ? "alert" : undefined, children: message }), hasError && _jsx("div", { id: `${id}-error`, className: "flood-error", role: "alert", children: error })] })] });
+});
+export const RadioGroup = forwardRef(function RadioGroup({ value, defaultValue, onValueChange, orientation = "vertical", ...props }, ref) {
+    return _jsx(ChoiceGroup, { ...props, ref: ref, kind: "radio", orientation: orientation, selected: value === undefined ? undefined : [value], initial: defaultValue === undefined ? [] : [defaultValue], onSelectionChange: next => onValueChange?.(next[0] ?? ""), fieldsetComponent: Fieldset, choiceComponent: Radio });
+});
+/** A segmented presentation of native single-choice inputs, retaining forms and reset. */
+export const SegmentedControl = forwardRef(function SegmentedControl({ label, options, controlSize = "md", iconOnly = false, fullWidth = false, orientation = "horizontal", className, onKeyDown, ...props }, ref) {
+    if (iconOnly && options.some(option => !option.icon))
+        throw new Error("Flood icon-only segments require icons");
+    return _jsx(RadioGroup, { ...props, ref: ref, legend: label, orientation: orientation, className: classes("flood-segmented", `flood-control--${controlSize}`, iconOnly && "flood-segmented--icons", fullWidth && "flood-segmented--full", className), options: options.map(option => ({ ...option, label: _jsxs(_Fragment, { children: [option.icon && _jsx(IconSlot, { size: controlSize, children: option.icon }), iconOnly ? _jsx("span", { className: "flood-segmented__name", children: option.label }) : option.label] }) })), onKeyDown: event => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing)
+                return;
+            const inputs = Array.from(event.currentTarget.querySelectorAll(":scope > .flood-fieldset__body > .flood-choice-group > .flood-choice > input[type=radio]:not(:disabled)"));
+            const index = inputs.indexOf(event.target);
+            if (index < 0)
+                return;
+            const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+            const next = event.key === "Home" ? 0 : event.key === "End" ? inputs.length - 1
+                : event.key === "ArrowDown" || event.key === (rtl ? "ArrowLeft" : "ArrowRight") ? (index + 1) % inputs.length
+                    : event.key === "ArrowUp" || event.key === (rtl ? "ArrowRight" : "ArrowLeft") ? (index - 1 + inputs.length) % inputs.length : -1;
+            if (next >= 0) {
+                event.preventDefault();
+                inputs[next].focus();
+                inputs[next].click();
+            }
+        } });
+});
+export const CheckboxGroup = forwardRef(function CheckboxGroup({ value, defaultValue = [], onValueChange, orientation = "vertical", ...props }, ref) {
+    return _jsx(ChoiceGroup, { ...props, ref: ref, kind: "checkbox", orientation: orientation, selected: value, initial: defaultValue, onSelectionChange: onValueChange, fieldsetComponent: Fieldset, choiceComponent: Checkbox });
+});
+export function Field({ status, message, id: explicitId, label, hideLabel = false, hint, error, required, describedBy, children, }) {
+    const generatedId = useId();
+    const id = explicitId ?? `flood-${generatedId}`;
+    const labelRef = useFocusableHidden(hideLabel);
+    const hasMessage = hasFieldContent(message);
+    const hasHint = hasFieldContent(hint);
+    const hasError = hasFieldContent(error);
+    const resolvedStatus = hasError ? "error" : status;
+    const description = mergeDescriptions(describedBy, hasHint && `${id}-hint`, hasError && `${id}-error`, hasMessage && !hasError && `${id}-message`);
+    return (_jsxs("div", { className: "flood-field", "data-hide-label": hideLabel || undefined, "data-status": resolvedStatus, children: [_jsx(Label, { ref: labelRef, htmlFor: id, required: required, className: hideLabel ? "flood-visually-hidden--focusable" : undefined, children: label }), children({
                 id,
                 "aria-describedby": description,
-                "aria-invalid": error ? true : undefined,
+                "aria-invalid": hasError || resolvedStatus === "error" ? true : undefined,
+                status: resolvedStatus,
                 required,
-            }), hint && (_jsx("div", { id: `${id}-hint`, className: "flood-hint", children: hint })), error && (_jsx("div", { id: `${id}-error`, className: "flood-error", role: "alert", children: error }))] }));
+            }), hasHint && (_jsx("div", { id: `${id}-hint`, className: "flood-hint", children: hint })), hasMessage && !hasError && _jsx("div", { id: `${id}-message`, className: "flood-message", role: resolvedStatus === "error" ? "alert" : undefined, children: message }), hasError && (_jsx("div", { id: `${id}-error`, className: "flood-error", role: "alert", children: error }))] }));
 }
-export const Link = forwardRef(function Link({ className, ...props }, ref) {
-    return (_jsx("a", { ...props, ref: ref, className: classes("flood-link", className) }));
+export const Link = forwardRef(function Link({ variant = "text", size = "md", className, ...props }, ref) {
+    return (_jsx("a", { ...props, ref: ref, className: classes("flood-link", variant !== "text" && "flood-link--button", variant !== "text" && "flood-button", variant !== "text" && `flood-button--${variant}`, variant !== "text" && `flood-button--${size}`, className) }));
 });
 /** Explicit opt-in to the dark foundations profile; no global theme mutation. */
 export const FloodRoot = forwardRef(function FloodRoot({ className, ...props }, ref) {
@@ -54,6 +267,57 @@ export const Inline = forwardRef(function Inline({ gap = "2", align = "center",
 export const Surface = forwardRef(function Surface({ elevation = "default", padding = "6", style, className, ...props }, ref) {
     return _jsx("div", { ...props, ref: ref, "data-flood-elevation": elevation, className: classes("flood-surface", className), style: { background: `var(--flood-sys-color-surface-${elevation})`, padding: `var(--flood-sys-space-${padding})`, ...style } });
 });
+/** Centered content with logical gutters; max width includes padding. @since 0.2.4 */
+export const Container = forwardRef(function Container({ size = "lg", gutter = "6", className, style, ...props }, ref) {
+    return _jsx("div", { ...props, ref: ref, className: classes("flood-container", className), style: {
+            "--flood-container-max": size === "full" ? "none" : `var(--flood-sys-size-container-${size})`,
+            "--flood-container-gutter": `var(--flood-sys-space-${gutter})`, ...style,
+        } });
+});
+/** Auto-fit by default; explicit columns retain their count at every width. @since 0.2.4 */
+export const Grid = forwardRef(function Grid({ columns, minItemWidth, gap = "4", className, style, ...props }, ref) {
+    return _jsx("div", { ...props, ref: ref, className: classes("flood-grid", className), style: {
+            gridTemplateColumns: columns ? `repeat(${columns}, minmax(0, 1fr))` : undefined,
+            "--flood-grid-min": minItemWidth, "--flood-layout-gap": `var(--flood-sys-space-${gap})`, ...style,
+        } });
+});
+/** Nonvisual content, with optional reveal when a descendant receives focus. @since 0.2.4 */
+export const VisuallyHidden = forwardRef(function VisuallyHidden({ as = "span", focusable = false, className, ...props }, ref) {
+    const hiddenRef = useFocusableHidden(focusable, ref);
+    return createElement(as, { ...props, ref: hiddenRef, className: classes(focusable ? "flood-visually-hidden--focusable" : "flood-visually-hidden", className) });
+});
+/** Reserve media geometry. Child content may overflow rather than being clipped. @since 0.2.4 */
+export const AspectRatio = forwardRef(function AspectRatio({ ratio = 16 / 9, className, style, children, ...props }, ref) {
+    if (!Number.isFinite(ratio) || ratio <= 0)
+        throw new RangeError("Flood AspectRatio requires a finite positive ratio");
+    return _jsx("div", { ...props, ref: ref, className: classes("flood-aspect-ratio", className), style: { aspectRatio: String(ratio), ...style }, children: _jsx("div", { className: "flood-aspect-ratio__content", children: children }) });
+});
+/** Native image semantics, explicit alternative text and bounded media fitting. @since 0.2.4 */
+export const Image = forwardRef(function Image({ alt, fit = "cover", className, ...props }, ref) {
+    if (typeof alt !== "string")
+        throw new TypeError("Flood Image requires explicit alt text (empty for decorative images)");
+    return _jsx("img", { ...props, ref: ref, alt: alt, "data-fit": fit, className: classes("flood-image", className) });
+});
+/** Native list items supplied by the host; hidden markers retain list semantics. @since 0.2.4 */
+export const List = forwardRef(function List({ ordered = false, start, reversed, marker = true, gap = "2", className, style, ...props }, ref) {
+    if (start !== undefined && !Number.isSafeInteger(start))
+        throw new RangeError("Flood List start requires a safe integer");
+    return createElement(ordered ? "ol" : "ul", { ...props, ref, start: ordered ? start : undefined,
+        reversed: ordered ? reversed : undefined, role: marker ? undefined : "list", "data-marker": marker,
+        className: classes("flood-list", className), style: { "--flood-layout-gap": `var(--flood-sys-space-${gap})`, ...style } });
+});
+/** Static empty content, not loading, an error boundary or a live announcement. @since 0.2.4 */
+export const EmptyState = forwardRef(function EmptyState({ title, description, icon, actions, headingLevel = 2, density = "comfortable", className, ...props }, ref) {
+    if (typeof title !== "string" || !title.trim())
+        throw new Error("Flood EmptyState requires a nonempty title");
+    return _jsxs(Stack, { ...props, ref: ref, gap: "4", "data-density": density, className: classes("flood-empty-state", className), children: [hasFieldContent(icon) && _jsx("div", { className: "flood-empty-state__icon", children: _jsx(IconSlot, { size: "2xl", children: icon }) }), _jsxs(Stack, { gap: "1", children: [_jsx(Heading, { level: headingLevel, size: "section", children: title }), hasFieldContent(description) && _jsx(Text, { as: "div", size: "compact", tone: "subtle", children: description })] }), hasFieldContent(actions) && _jsx(Inline, { gap: "2", className: "flood-empty-state__actions", children: actions })] });
+});
+/** A structured content surface, not an interactive wrapper. @since 0.2.4 */
+export const Card = forwardRef(function Card({ title, description, actions, footer, headingLevel = 2, density = "comfortable", elevation = "default", children, className, ...props }, ref) {
+    const present = hasFieldContent;
+    const heading = present(title), hint = present(description), action = present(actions);
+    return _jsxs(Surface, { ...props, ref: ref, elevation: elevation, padding: density === "compact" ? "4" : "6", "data-density": density, className: classes("flood-card", className), children: [(heading || hint || action) && _jsxs("div", { className: "flood-card__header", children: [(heading || hint) && _jsxs("div", { className: "flood-card__intro", children: [heading && _jsx(Heading, { level: headingLevel, size: "section", children: title }), hint && _jsx(Text, { as: "div", size: "compact", tone: "subtle", children: description })] }), action && _jsx("div", { className: "flood-card__actions", children: actions })] }), present(children) && _jsx("div", { className: "flood-card__body", children: children }), present(footer) && _jsx("div", { className: "flood-card__footer", children: footer })] });
+});
 /** Adapter for the host's SVG icon package; glyphs are not bundled. */
 export const IconSlot = forwardRef(function IconSlot({ size = "md", label, className, children, ...props }, ref) {
     return _jsx("span", { ...props, ref: ref, role: label ? "img" : undefined, "aria-label": label, "aria-hidden": label ? undefined : true, className: classes("flood-icon", `flood-icon--${size}`, className), children: children });
@@ -65,6 +329,10 @@ export const Divider = forwardRef(function Divider({ className, ...props }, ref)
     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 = forwardRef(function CodeSnippet({ code, action, className, ...props }, ref) {
-    return (_jsxs("div", { ...props, ref: ref, className: classes("flood-code-snippet", className), children: [_jsx("code", { className: "flood-code-snippet__code", children: code }), action != null && _jsx("div", { className: "flood-code-snippet__action", children: action })] }));
+export const CodeSnippet = 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 })] }));
+});
+/** Native scrolling with inset overlay tracks; the ref targets the scrollable viewport. */
+export const ScrollArea = forwardRef(function ScrollArea({ orientation = "vertical", contentInset = "scrollbar", ...props }, ref) {
+    return _jsx(OverlayScrollArea, { ...props, orientation: orientation, contentInset: contentInset, ref: ref });
 });

package/dist/menu.d.ts

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

package/dist/menu.js

@@ -0,0 +1,130 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { Button, Kbd, ScrollArea } from "./index.js";
+import { positionLayer, registerLayer, returnFocus, tabbables } from "./overlay-runtime.js";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+export const ActionMenu = forwardRef(function ActionMenu({ label, trigger, items, onAction, open: controlled, defaultOpen, onOpenChange, disabled, side = "bottom", align = "start", controlSize = "sm", id: explicitId, className, onKeyDown, ...props }, ref) {
+    const [local, setLocal] = useState(Boolean(defaultOpen)), open = controlled ?? local;
+    const anchor = useRef(null), panel = useRef(null);
+    const generated = useId(), id = explicitId ?? `flood-menu-${generated}`;
+    const pending = useRef(undefined);
+    const edge = useRef("first"), search = useRef({ text: "", time: 0 });
+    if (!items.some(item => item.type !== "separator"))
+        throw new Error("Flood Menu requires at least one action item");
+    if (new Set(items.map(item => item.id)).size !== items.length || items.some(item => !item.id.trim() || (item.type !== "separator" && !item.label.trim())))
+        throw new Error("Flood menu items need unique nonempty IDs and action labels");
+    const request = (next) => {
+        if (pending.current === next)
+            return;
+        pending.current = next;
+        queueMicrotask(() => { pending.current = undefined; });
+        if (controlled === undefined)
+            setLocal(next);
+        onOpenChange?.(next);
+    };
+    const current = useRef({ open, request });
+    useBrowserLayoutEffect(() => { current.current = { open, request }; });
+    const setAnchor = useCallback((node) => { anchor.current = node; }, []);
+    useImperativeHandle(ref, () => panel.current, []);
+    const buttons = () => Array.from(panel.current?.querySelectorAll('[role="menuitem"]') ?? []);
+    const focusEdge = () => { const all = buttons(); ((edge.current === "last" ? all.at(-1) : all[0]) ?? panel.current)?.focus({ preventScroll: true }); };
+    useBrowserLayoutEffect(() => {
+        if (!open || !panel.current)
+            return;
+        const element = panel.current, document = element.ownerDocument, view = document.defaultView;
+        let alive = true, frame = 0, unregister = () => { };
+        const start = () => {
+            if (!alive || !anchor.current?.isConnected)
+                return;
+            const parent = anchor.current.closest("dialog");
+            if (parent && !parent.open) {
+                frame = view.requestAnimationFrame(start);
+                return;
+            }
+            if (typeof element.showPopover !== "function")
+                throw new Error("Flood Menu requires the native Popover API");
+            element.style.visibility = "hidden";
+            element.showPopover();
+            positionLayer(anchor.current, element, side, align);
+            unregister = registerLayer(document, { panel: element, anchor: () => anchor.current, close: () => current.current.request(false) });
+            search.current = { text: "", time: 0 };
+            focusEdge();
+            const update = () => { if (!alive)
+                return; if (anchor.current?.isConnected)
+                positionLayer(anchor.current, element, side, align); frame = view.requestAnimationFrame(update); };
+            frame = view.requestAnimationFrame(update);
+        };
+        start();
+        const toggle = (event) => {
+            if (!alive || event.newState !== "closed" || element.matches(":popover-open") || !current.current.open)
+                return;
+            current.current.request(false);
+            queueMicrotask(() => { if (alive && current.current.open && element.isConnected && !element.matches(":popover-open") && anchor.current?.isConnected) {
+                element.showPopover();
+                positionLayer(anchor.current, element, side, align);
+                focusEdge();
+            } });
+        };
+        element.addEventListener("toggle", toggle);
+        return () => { alive = false; view.cancelAnimationFrame(frame); unregister(); element.removeEventListener("toggle", toggle); returnFocus(element, anchor.current); if (element.matches(":popover-open"))
+            element.hidePopover(); };
+    }, [open, side, align]);
+    useBrowserLayoutEffect(() => {
+        if (open && panel.current?.matches(":popover-open") && panel.current.ownerDocument.activeElement === panel.current.ownerDocument.body)
+            focusEdge();
+    }, [items, open]);
+    const triggerProps = { ref: setAnchor, type: "button", disabled, "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": id,
+        onClick: () => { edge.current = "first"; request(!open); },
+        onKeyDown: event => { if (event.defaultPrevented || disabled || event.altKey || event.ctrlKey || event.metaKey || !["ArrowDown", "ArrowUp"].includes(event.key))
+            return; event.preventDefault(); edge.current = event.key === "ArrowUp" ? "last" : "first"; if (open && panel.current?.matches(":popover-open"))
+            focusEdge();
+        else
+            request(true); },
+    };
+    const hasIcons = items.some(item => item.type !== "separator" && item.icon != null);
+    return _jsxs(_Fragment, { children: [trigger(triggerProps), _jsx("div", { ...props, ref: panel, id: id, popover: "manual", role: "menu", "aria-label": label, "aria-orientation": "vertical", tabIndex: -1, className: ["flood-overlay-panel", "flood-menu", className].filter(Boolean).join(" "), onKeyDown: event => {
+                    onKeyDown?.(event);
+                    if (event.defaultPrevented)
+                        return;
+                    const all = buttons(), index = all.indexOf(event.target);
+                    if (event.key === "Tab") {
+                        const button = anchor.current;
+                        if (button) {
+                            const scope = button.closest("dialog[open]") ?? button.ownerDocument.body;
+                            const stops = tabbables(scope).filter(node => !panel.current?.contains(node));
+                            const at = stops.indexOf(button), target = event.shiftKey ? button : at >= 0 ? stops[at + 1] : undefined;
+                            if (target) {
+                                event.preventDefault();
+                                target.focus();
+                            }
+                            else
+                                button.focus();
+                        }
+                        request(false);
+                        return;
+                    }
+                    if (event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing)
+                        return;
+                    let next = event.key === "Home" ? 0 : event.key === "End" ? all.length - 1 : event.key === "ArrowDown" ? (index + 1) % all.length : event.key === "ArrowUp" ? (index - 1 + all.length) % all.length : -1;
+                    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key))
+                        search.current = { text: "", time: 0 };
+                    if (event.key.length === 1 && event.key !== " ") {
+                        const now = Date.now();
+                        search.current = { text: (now - search.current.time < 700 ? search.current.text : "") + event.key.toLocaleLowerCase(), time: now };
+                        const text = Array.from(search.current.text).every(char => char === search.current.text[0]) ? search.current.text[0] : search.current.text;
+                        const start = text.length === 1 ? index + 1 : Math.max(0, index);
+                        next = Array.from({ length: all.length }, (_, offset) => (start + offset) % all.length).find(candidate => all[candidate].dataset.label?.toLocaleLowerCase().startsWith(text)) ?? -1;
+                        event.preventDefault();
+                    }
+                    if (next >= 0 && all[next]) {
+                        event.preventDefault();
+                        all[next].focus({ preventScroll: true });
+                        all[next].scrollIntoView({ block: "nearest", inline: "nearest" });
+                    }
+                }, children: open && _jsx(ScrollArea, { orientation: "vertical", role: "group", tabIndex: -1, className: "flood-menu__viewport", children: items.map(item => item.type === "separator" ? _jsx("div", { role: "separator", className: "flood-menu__separator" }, item.id) :
+                        _jsxs(Button, { role: "menuitem", tabIndex: -1, variant: "ghost", size: controlSize, "aria-label": item.label, "aria-disabled": item.disabled || undefined, "data-label": item.label, "data-tone": item.tone, className: "flood-menu__item", onPointerMove: event => { if (event.pointerType !== "touch" && event.currentTarget.ownerDocument.activeElement !== event.currentTarget)
+                                event.currentTarget.focus({ preventScroll: true }); }, onClick: event => { if (item.disabled) {
+                                event.preventDefault();
+                                return;
+                            } request(false); onAction?.(item.id); }, children: [hasIcons && _jsx("span", { className: "flood-menu__icon", "aria-hidden": "true", children: item.icon }), _jsx("span", { className: "flood-menu__label", children: item.label }), item.shortcut && _jsx("span", { className: "flood-menu__shortcut", "aria-hidden": "true", children: _jsx(Kbd, { children: item.shortcut }) })] }, item.id)) }) })] });
+});

package/dist/navigation.d.ts

@@ -0,0 +1,4 @@
+import type { TabsProps, BreadcrumbProps, PaginationProps } from "./index.js";
+export declare const TabNavigation: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const BreadcrumbNavigation: import("react").ForwardRefExoticComponent<BreadcrumbProps & import("react").RefAttributes<HTMLElement>>;
+export declare const PageNavigation: import("react").ForwardRefExoticComponent<PaginationProps & import("react").RefAttributes<HTMLElement>>;

package/dist/navigation.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { Button, IconSlot, Link, ScrollArea } from "./index.js";
+import { pageWindow } from "./page-window.js";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+export const TabNavigation = forwardRef(function TabNavigation({ label, items, value, defaultValue, onValueChange, activationMode = "automatic", orientation = "horizontal", controlSize = "md", disabled = false, iconOnly = false, className, onKeyDown, id: explicitId, ...props }, ref) {
+    const generated = useId(), id = explicitId ?? `flood-tabs-${generated}`;
+    const [local, setLocal] = useState(defaultValue), [focused, setFocused] = useState();
+    const root = useRef(null), list = useRef(null), focusedPanel = useRef(undefined);
+    useImperativeHandle(ref, () => root.current, []);
+    if (new Set(items.map(item => item.value)).size !== items.length)
+        throw new Error("Flood tab values must be unique");
+    if (iconOnly && items.some(item => !item.icon))
+        throw new Error("Flood icon-only tabs require icons");
+    const available = items.filter(item => !item.disabled), enabled = disabled ? [] : available;
+    const selected = available.find(item => item.value === (value ?? local))?.value ?? available[0]?.value;
+    const tabStop = enabled.some(item => item.value === focused) ? focused : selected;
+    const select = (next) => { if (next === selected)
+        return; if (value === undefined)
+        setLocal(next); onValueChange?.(next); };
+    useBrowserLayoutEffect(() => {
+        if (focusedPanel.current === undefined || focusedPanel.current === selected)
+            return;
+        const index = items.findIndex(item => item.value === focusedPanel.current), panel = root.current?.ownerDocument.getElementById(`${id}-panel-${index}`);
+        const active = root.current?.ownerDocument.activeElement;
+        if (active === root.current?.ownerDocument.body || panel?.contains(active ?? null)) {
+            const next = items.findIndex(item => item.value === selected);
+            root.current?.ownerDocument.getElementById(`${id}-tab-${next}`)?.focus();
+        }
+        focusedPanel.current = undefined;
+    }, [selected, id, items]);
+    return _jsxs("div", { ...props, ref: root, id: id, className: ["flood-tabs", className].filter(Boolean).join(" "), "data-orientation": orientation, onKeyDown: event => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing)
+                return;
+            const buttons = Array.from(list.current?.querySelectorAll(':scope > button[role="tab"]:not(:disabled)') ?? []), index = buttons.indexOf(event.target);
+            if (index < 0)
+                return;
+            const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+            const nextKey = orientation === "vertical" ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", previousKey = orientation === "vertical" ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+            const next = event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : event.key === nextKey ? (index + 1) % buttons.length : event.key === previousKey ? (index - 1 + buttons.length) % buttons.length : -1;
+            if (next >= 0) {
+                event.preventDefault();
+                buttons[next].focus();
+                if (activationMode === "automatic")
+                    select(buttons[next].dataset.value);
+            }
+        }, children: [_jsx(ScrollArea, { orientation: orientation, tabIndex: -1, className: "flood-tabs__scroll", children: _jsx("div", { ref: list, role: "tablist", "aria-label": label, "aria-orientation": orientation, className: "flood-tabs__list", onBlur: event => { if (!event.currentTarget.contains(event.relatedTarget))
+                        setFocused(undefined); }, children: items.map((item, index) => _jsxs(Button, { variant: "ghost", size: controlSize, id: `${id}-tab-${index}`, type: "button", role: "tab", "aria-selected": item.value === selected, "aria-controls": `${id}-panel-${index}`, "data-value": item.value, disabled: disabled || item.disabled, tabIndex: item.value === tabStop ? 0 : -1, "aria-label": iconOnly ? item.label : undefined, className: `flood-tab${iconOnly ? " flood-icon-button" : ""}`, onFocus: () => setFocused(item.value), onClick: () => select(item.value), children: [item.icon && _jsx(IconSlot, { size: controlSize, children: item.icon }), !iconOnly && item.label] }, item.value)) }) }), items.map((item, index) => _jsx("div", { id: `${id}-panel-${index}`, role: "tabpanel", "aria-labelledby": `${id}-tab-${index}`, tabIndex: 0, hidden: item.value !== selected, className: "flood-tabs__panel", onFocusCapture: () => { focusedPanel.current = item.value; }, onBlurCapture: event => { if (!event.currentTarget.hidden)
+                    focusedPanel.current = undefined; }, children: item.content }, item.value))] });
+});
+export const BreadcrumbNavigation = forwardRef(function BreadcrumbNavigation({ items, label = "Breadcrumb", separator = "/", className, ...props }, ref) {
+    return _jsx("nav", { ...props, ref: ref, "aria-label": label, className: ["flood-breadcrumb", className].filter(Boolean).join(" "), children: _jsx("ol", { children: items.map((item, index) => _jsxs("li", { children: [index > 0 && _jsx("span", { className: "flood-breadcrumb__separator", "aria-hidden": "true", children: separator }), item.href !== undefined ? _jsx(Link, { href: item.href, "aria-current": index === items.length - 1 ? "page" : undefined, children: item.label }) : _jsx("span", { "aria-current": index === items.length - 1 ? "page" : undefined, children: item.label })] }, index)) }) });
+});
+export const PageNavigation = forwardRef(function PageNavigation({ page, pageCount, onPageChange, getHref, siblingCount = 1, controlSize = "sm", disabled = false, label = "Pagination", previousLabel = "Previous page", nextLabel = "Next page", pageLabel = page => `Page ${page}`, className, ...props }, ref) {
+    const pages = pageWindow(page, pageCount, siblingCount);
+    const control = (target, text, name, unavailable = false) => {
+        const inactive = disabled || unavailable, current = target === page;
+        const shared = { className: "flood-page", "aria-label": name, "aria-current": current && !unavailable ? "page" : undefined };
+        if (getHref)
+            return inactive ? _jsx("span", { ...shared, className: `flood-button flood-button--subtle flood-button--${controlSize} flood-page`, role: "link", "aria-disabled": "true", children: text }) : _jsx(Link, { ...shared, variant: "subtle", size: controlSize, href: getHref(target), onClick: event => { if (!event.defaultPrevented && event.button === 0 && !event.ctrlKey && !event.metaKey && !event.shiftKey && !event.altKey && !current)
+                    onPageChange?.(target); }, children: text });
+        return _jsx(Button, { ...shared, variant: "subtle", size: controlSize, type: "button", disabled: inactive, onClick: () => { if (!current)
+                onPageChange?.(target); }, children: text });
+    };
+    const arrow = (previous) => _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: previous ? "m15 5-7 7 7 7" : "m9 5 7 7-7 7" }) });
+    return _jsx("nav", { ...props, ref: ref, "aria-label": label, className: ["flood-pagination", className].filter(Boolean).join(" "), children: _jsxs("ul", { children: [_jsx("li", { children: control(page - 1, arrow(true), previousLabel, page === 1) }), pages.map(item => _jsx("li", { "aria-hidden": typeof item === "string" ? true : undefined, children: typeof item === "number" ? control(item, String(item), pageLabel(item)) : _jsx("span", { className: "flood-page-gap", children: "\u2026" }) }, item)), _jsx("li", { children: control(page + 1, arrow(false), nextLabel, page === pageCount) })] }) });
+});