@flood-md/react 0.2.3 → 0.2.5

package/dist/index.js

@@ -1,23 +1,104 @@
 "use client";
 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";
+import { NumericStepper } from "./numeric-input.js";
+import { RangeControl } from "./slider.js";
+import { GroupedAvatars, NamedStatus, CaptionedFigure, AttributedQuote, InlineCodeText, MeasuredValue, EventTimeline } from "./content-elements.js";
+import { NavigationMenu, StepSequence, ContentSection, SplitLayout, CenterLayout, SkipNavigation } from "./navigation-layout.js";
+import { CollectionListBox, SegmentedPinInput, StarRating, FileDropzone, SupportingCharacterCount } from "./form-controls.js";
+import { ClipboardAction, NotificationRegion } from "./feedback-actions.js";
+import { ConfirmationDialog } from "./alert-dialog.js";
+import { FilePicker } from "./file-input.js";
+import { SearchField, PasswordField } from "./text-inputs.js";
+import { SearchSelection } from "./combobox.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] }));
+});
+/** @since 0.2.5 */
+export const Tag = forwardRef(function Tag({ size = "md", icon, disabled = false, onRemove, removeLabel, removeButtonProps, className, children, ...props }, ref) {
+    const label = removeLabel ?? (typeof children === "string" || typeof children === "number" ? `Remove ${children}` : "");
+    if (onRemove && !label.trim())
+        throw new Error("Flood Tag removal needs an accessible removeLabel for rich content");
+    const iconSize = size === "sm" ? "2xs" : size === "md" ? "xs" : "sm";
+    return _jsxs("span", { ...props, ref: ref, className: classes("flood-tag", className), "data-size": size, "data-disabled": disabled || undefined, children: [hasFieldContent(icon) && _jsx(IconSlot, { size: iconSize, children: icon }), _jsx("span", { className: "flood-tag__label", children: children }), onRemove && _jsx(IconButton, { ...removeButtonProps, type: "button", className: classes("flood-tag__remove", removeButtonProps?.className), label: label, variant: "ghost", size: iconSize, disabled: disabled, onClick: () => { if (!disabled)
+                    onRemove(); }, children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "m6 6 12 12M18 6 6 18" }) }) })] });
+});
+/** @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 });
+});
+/** @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 });
+});
+/** @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 Drawer = 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 });
+});
+export const AlertDialog = 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 });
+});
 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 => {
@@ -35,7 +116,7 @@ export const Accordion = forwardRef(function Accordion({ label, items, expansion
         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)
+            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);
@@ -76,39 +157,64 @@ export const ToggleGroup = forwardRef(function ToggleGroup({ label, options, sel
         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("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)
-                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)) });
+    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("div", { ...props, ref: ref, role: "group", "aria-label": label, "data-orientation": orientation, className: classes("flood-button-group", className) });
+    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: 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: end })] });
+    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 FileInput = forwardRef(function FileInput({ clearable = true, clearLabel = "Clear files", controlSize = "md", ...props }, ref) {
+    return _jsx(FilePicker, { ...props, ref: ref, clearable: clearable, clearLabel: clearLabel, controlSize: controlSize, actionComponent: IconButton, iconComponent: IconSlot });
+});
+export const SearchInput = forwardRef(function SearchInput({ clearable = true, clearLabel = "Clear search", controlSize = "md", ...props }, ref) {
+    return _jsx(SearchField, { ...props, ref: ref, clearable: clearable, clearLabel: clearLabel, controlSize: controlSize, group: InputGroup, action: IconButton, icon: IconSlot });
+});
+export const PasswordInput = forwardRef(function PasswordInput({ defaultVisible = false, showPasswordLabel = "Show password", hidePasswordLabel = "Hide password", controlSize = "md", ...props }, ref) {
+    return _jsx(PasswordField, { ...props, ref: ref, defaultVisible: defaultVisible, showPasswordLabel: showPasswordLabel, hidePasswordLabel: hidePasswordLabel, controlSize: controlSize, group: InputGroup, action: IconButton, icon: IconSlot });
+});
+/** @since 0.2.5 */
+export const Combobox = forwardRef(function Combobox({ value, defaultValue = "", onValueChange, clearable = false, emptyMessage = "No results found.", listLabel = "Options", toggleLabel = "Show options", clearLabel = "Clear selection", invalidSelectionMessage = "Select an option.", controlSize = "md", ...props }, ref) {
+    return _jsx(SearchSelection, { ...props, ref: ref, multiple: false, selectedValues: value === undefined ? undefined : value ? [value] : [], initialValues: defaultValue ? [defaultValue] : [], onSelectionChange: next => onValueChange?.(next[0] ?? ""), clearable: clearable, emptyMessage: emptyMessage, listLabel: listLabel, toggleLabel: toggleLabel, clearLabel: clearLabel, invalidSelectionMessage: invalidSelectionMessage, controlSize: controlSize });
+});
+/** @since 0.2.5 */
+export const MultiSelect = forwardRef(function MultiSelect({ value, defaultValue = [], onValueChange, removeItemLabel = "Remove", clearable = false, emptyMessage = "No results found.", listLabel = "Options", toggleLabel = "Show options", clearLabel = "Clear selection", invalidSelectionMessage = "Select at least one option.", controlSize = "md", ...props }, ref) {
+    return _jsx(SearchSelection, { ...props, ref: ref, multiple: true, selectedValues: value, initialValues: defaultValue, onSelectionChange: onValueChange, removeItemLabel: removeItemLabel, clearable: clearable, emptyMessage: emptyMessage, listLabel: listLabel, toggleLabel: toggleLabel, clearLabel: clearLabel, invalidSelectionMessage: invalidSelectionMessage, controlSize: controlSize });
+});
+/** @since 0.2.5 */
+export const NumberInput = forwardRef(function NumberInput({ defaultValue = 0, step = 1, controlSize = "md", decreaseLabel = "Decrease value", increaseLabel = "Increase value", ...props }, ref) {
+    return _jsx(NumericStepper, { ...props, ref: ref, defaultValue: defaultValue, step: step, controlSize: controlSize, decreaseLabel: decreaseLabel, increaseLabel: increaseLabel, inputComponent: InputGroup, buttonComponent: IconButton });
+});
+/** @since 0.2.5 */
+export const Slider = forwardRef(function Slider({ defaultValue = [50], min = 0, max = 100, step = 1, showValue = true, readOnly = false, controlSize = "md", ...props }, ref) {
+    return _jsx(RangeControl, { ...props, ref: ref, defaultValue: defaultValue, min: min, max: max, step: step, showValue: showValue, readOnly: readOnly, controlSize: controlSize, fieldsetComponent: Fieldset });
 });
 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) }));
@@ -118,16 +224,16 @@ export const Select = forwardRef(function Select({ invalid, status, controlSize
     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", { 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) }) }));
+    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, 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 })] }));
+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) {
@@ -137,10 +243,11 @@ export const Label = forwardRef(function Label({ required, children, className,
 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 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", { className: classes("flood-legend", hideLabel && "flood-visually-hidden"), 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 })] })] });
+    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 });
@@ -151,7 +258,7 @@ export const SegmentedControl = forwardRef(function SegmentedControl({ label, op
         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)
+            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);
@@ -174,12 +281,13 @@ export const CheckboxGroup = forwardRef(function CheckboxGroup({ value, defaultV
 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, { htmlFor: id, required: required, className: hideLabel ? "flood-visually-hidden" : undefined, children: label }), children({
+    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": hasError || resolvedStatus === "error" ? true : undefined,
@@ -209,6 +317,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 });
@@ -220,10 +379,38 @@ 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 });
 });
+export const CopyButton = forwardRef(function CopyButton({ copyLabel = "Copy", copiedLabel = "Copied", errorLabel = "Failed", resetDelay = 2000, size = "md", variant = "subtle", ...props }, ref) {
+    return _jsx(ClipboardAction, { ...props, ref: ref, copyLabel: copyLabel, copiedLabel: copiedLabel, errorLabel: errorLabel, resetDelay: resetDelay, size: size, variant: variant });
+});
+export const ToastRegion = forwardRef(function ToastRegion({ label = "Notifications", closeLabel = "Dismiss notification", placement = "bottom-end", limit = 3, inline = false, hotkey = true, ...props }, ref) {
+    return _jsx(NotificationRegion, { ...props, ref: ref, label: label, closeLabel: closeLabel, placement: placement, limit: limit, inline: inline, hotkey: hotkey });
+});
+export const AvatarGroup = forwardRef(function AvatarGroup({ max = 4, size = "md", ...props }, ref) { return _jsx(GroupedAvatars, { ...props, ref: ref, max: max, size: size }); });
+export const StatusIndicator = forwardRef(function StatusIndicator({ tone = "neutral", size = "md", announce = false, ...props }, ref) { return _jsx(NamedStatus, { ...props, ref: ref, tone: tone, size: size, announce: announce }); });
+export const Figure = forwardRef(function Figure({ captionPosition = "after", ...props }, ref) { return _jsx(CaptionedFigure, { ...props, ref: ref, captionPosition: captionPosition }); });
+export const Blockquote = forwardRef(function Blockquote(props, ref) {
+    return _jsx(AttributedQuote, { ...props, ref: ref });
+});
+export const InlineCode = forwardRef(function InlineCode({ size = "md", wrap = true, ...props }, ref) { return _jsx(InlineCodeText, { ...props, ref: ref, size: size, wrap: wrap }); });
+export const Metric = forwardRef(function Metric({ size = "md", ...props }, ref) { return _jsx(MeasuredValue, { ...props, ref: ref, size: size }); });
+export const Timeline = forwardRef(function Timeline(props, ref) {
+    return _jsx(EventTimeline, { ...props, ref: ref });
+});
+export const NavigationList = forwardRef(function NavigationList({ size = "md", ...props }, ref) { return _jsx(NavigationMenu, { ...props, ref: ref, size: size }); });
+export const Steps = forwardRef(function Steps({ orientation = "horizontal", ...props }, ref) { return _jsx(StepSequence, { ...props, ref: ref, orientation: orientation }); });
+export const Section = forwardRef(function Section({ headingLevel = 2, headingSize = "section", ...props }, ref) { return _jsx(ContentSection, { ...props, ref: ref, headingLevel: headingLevel, headingSize: headingSize }); });
+export const Split = forwardRef(function Split({ side = "end", ratio = "main", collapseAt = "md", gap = "6", ...props }, ref) { return _jsx(SplitLayout, { ...props, ref: ref, side: side, ratio: ratio, collapseAt: collapseAt, gap: gap }); });
+export const Center = forwardRef(function Center({ inline = false, ...props }, ref) { return _jsx(CenterLayout, { ...props, ref: ref, inline: inline }); });
+export const SkipLink = forwardRef(function SkipLink({ children = "Skip to content", ...props }, ref) { return _jsx(SkipNavigation, { ...props, ref: ref, children: children }); });
+export const ListBox = forwardRef(function ListBox({ multiple = false, disabled = false, readOnly = false, hideLabel = false, controlSize = "md", ...props }, ref) { return _jsx(CollectionListBox, { ...props, ref: ref, multiple: multiple, disabled: disabled, readOnly: readOnly, hideLabel: hideLabel, controlSize: controlSize }); });
+export const PinInput = forwardRef(function PinInput({ length = 6, mode = "numeric", mask = false, hideLabel = false, controlSize = "md", ...props }, ref) { return _jsx(SegmentedPinInput, { ...props, ref: ref, length: length, mode: mode, mask: mask, hideLabel: hideLabel, controlSize: controlSize }); });
+export const Rating = forwardRef(function Rating({ max = 5, defaultValue = 0, hideLabel = false, readOnly = false, size = "md", ...props }, ref) { return _jsx(StarRating, { ...props, ref: ref, max: max, defaultValue: defaultValue, hideLabel: hideLabel, readOnly: readOnly, size: size }); });
+export const Dropzone = forwardRef(function Dropzone({ description = "Drop files here or choose from your device.", multiple = true, ...props }, ref) { return _jsx(FileDropzone, { ...props, ref: ref, description: description, multiple: multiple }); });
+export const CharacterCount = forwardRef(function CharacterCount({ mode = "count", label = "Characters", overLimitLabel = "Over limit", ...props }, ref) { return _jsx(SupportingCharacterCount, { ...props, ref: ref, mode: mode, label: label, overLimitLabel: overLimitLabel }); });

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-layout.d.ts

@@ -0,0 +1,7 @@
+import type { NavigationListProps, StepsProps, SectionProps, SplitProps, CenterProps, SkipLinkProps } from "./index.js";
+export declare const NavigationMenu: import("react").ForwardRefExoticComponent<NavigationListProps & import("react").RefAttributes<HTMLElement>>;
+export declare const StepSequence: import("react").ForwardRefExoticComponent<StepsProps & import("react").RefAttributes<HTMLOListElement>>;
+export declare const ContentSection: import("react").ForwardRefExoticComponent<SectionProps & import("react").RefAttributes<HTMLElement>>;
+export declare const SplitLayout: import("react").ForwardRefExoticComponent<SplitProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CenterLayout: import("react").ForwardRefExoticComponent<CenterProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SkipNavigation: import("react").ForwardRefExoticComponent<SkipLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;