@flood-md/react 0.2.10 → 0.2.12

package/dist/index.js

@@ -1,7 +1,14 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, createElement, useId, useState, } from "react";
+import { forwardRef, createElement, useId, useRef, useState, } from "react";
 import { useFocusableHidden } from "./focusable-hidden.js";
+import { PredicateRow } from "./filter-condition.js";
+import { PredicateGroup } from "./filter-group.js";
+import { CollectionQueryBar } from "./collection-toolbar.js";
+import { CollectionViewSelector } from "./collection-view-switcher.js";
+import { WorkspaceSidebar } from "./sidebar.js";
+import { NavigationRow } from "./navigation-item.js";
+import { NavigationSection } from "./navigation-group.js";
 import { resolveFieldStatus, hasFieldContent, mergeDescriptions } from "./field-state.js";
 import { SingleSelect } from "./select.js";
 import { MixedCheckbox } from "./checkbox.js";
@@ -18,7 +25,8 @@ 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 { NavigationMenu, StepSequence, ContentSection, PageHeading, SplitLayout, CenterLayout, SkipNavigation } from "./navigation-layout.js";
+import { ApplicationShell, ApplicationTopBar } from "./app-shell.js";
 import { CollectionListBox, SegmentedPinInput, StarRating, FileDropzone, SupportingCharacterCount } from "./form-controls.js";
 import { ClipboardAction, NotificationRegion } from "./feedback-actions.js";
 import { ConfirmationDialog } from "./alert-dialog.js";
@@ -43,12 +51,30 @@ import { ClockTimePicker } from "./time-picker.js";
 import { CivilDateTimeRangePicker } from "./date-time-range-picker.js";
 import { FileRecord, UploadRecord, ModalImagePreview, FileMetadata } from "./file-records.js";
 import { ManagedDataTable } from "./data-table.js";
+import { TrendPlot } from "./sparkline.js";
 import { CheckableCard, ExclusiveCard } from "./collection-cards.js";
 import { ColorPreview, ColorEditor } from "./color-controls.js";
 import { HoverPreview } from "./hover-card.js";
 import { HierarchicalSelect } from "./tree-select.js";
 import { CivilDateTimePicker } from "./date-time-picker.js";
 import { HierarchicalNavigation } from "./navigation-tree.js";
+import { AdaptiveActions } from "./overflow-actions.js";
+import { SelectionActionBar } from "./bulk-action-bar.js";
+import { ApplicationMenubar } from "./menubar.js";
+/** Priority-based overflow composed from Toolbar, Button and Menu. @since 0.2.11 */
+export const OverflowActions = /* @__PURE__ */ forwardRef(function OverflowActions(props, ref) { return _jsx(AdaptiveActions, { ...props, ref: ref }); });
+/** One finite-choice filter predicate; the host owns application and query semantics. @since 0.2.11 */
+export const FilterCondition = /* @__PURE__ */ forwardRef(function FilterCondition(props, ref) { return _jsx(PredicateRow, { ...props, ref: ref }); });
+/** A flat controlled group of finite-choice predicates, without query execution or Apply/Cancel ownership. @since 0.2.11 */
+export const FilterGroup = /* @__PURE__ */ forwardRef(function FilterGroup(props, ref) { return _jsx(PredicateGroup, { ...props, ref: ref }); });
+/** Search, accepted summaries and staged filter disclosure; saved views and query semantics stay host-owned. @since 0.2.11 */
+export const CollectionToolbar = /* @__PURE__ */ forwardRef(function CollectionToolbar(props, ref) { return _jsx(CollectionQueryBar, { ...props, ref: ref }); });
+/** Controlled saved/preset view choice with optional adaptive commands. @since 0.2.11 */
+export const CollectionViewSwitcher = /* @__PURE__ */ forwardRef(function CollectionViewSwitcher(props, ref) { return _jsx(CollectionViewSelector, { ...props, ref: ref }); });
+/** A bounded single-row selection command capsule. The host owns positioning and updates. @since 0.2.11 */
+export const BulkActionBar = /* @__PURE__ */ forwardRef(function BulkActionBar(props, ref) { return _jsx(SelectionActionBar, { ...props, ref: ref }); });
+/** Desktop application commands; destinations use native links instead. @since 0.2.11 */
+export const Menubar = /* @__PURE__ */ forwardRef(function Menubar(props, ref) { return _jsx(ApplicationMenubar, { ...props, ref: ref }); });
 /** @since 0.2.8 */
 export const TimePicker = /* @__PURE__ */ forwardRef(function TimePicker(props, ref) { return _jsx(ClockTimePicker, { ...props, ref: ref }); });
 /** Four atomic civil date/time form values, without timezone conversion. @since 0.2.8 */
@@ -71,6 +97,10 @@ export const UploadList = /* @__PURE__ */ forwardRef(function UploadList(props,
 export const ImagePreview = /* @__PURE__ */ forwardRef(function ImagePreview(props, ref) { return _jsx(ModalImagePreview, { ...props, ref: ref }); });
 /** A client-side table composed from native table, checkbox and pagination. @since 0.2.8 */
 export const DataTable = /* @__PURE__ */ forwardRef(function DataTable(props, ref) { return _jsx(ManagedDataTable, { ...props, ref: ref }); });
+/** @since 0.2.11 */
+export const Sparkline = /* @__PURE__ */ forwardRef(function Sparkline({ showLabel = false, size = "md", tone = "accent", variant = "area", ...props }, ref) {
+    return _jsx(TrendPlot, { ...props, showLabel: showLabel, size: size, tone: tone, variant: variant, ref: ref });
+});
 /** A native list; links and actions stay independent. @since 0.2.8 */
 export const DataList = /* @__PURE__ */ forwardRef(function DataList({ density = "comfortable", dividers = true, className, ...props }, ref) {
     return _jsx("ul", { ...props, ref: ref, role: "list", "data-density": density, "data-dividers": dividers, className: classes("flood-data-list", className) });
@@ -99,10 +129,16 @@ export const DateTimePicker = /* @__PURE__ */ forwardRef(function DateTimePicker
 export const Tree = /* @__PURE__ */ forwardRef(function Tree(props, ref) {
     return _jsx(SelectionTree, { ...props, ref: ref });
 });
+/** Shared navigation row geometry and native destination/action behavior. @since 0.2.11 */
+export const NavigationItem = /* @__PURE__ */ forwardRef(function NavigationItem(props, ref) { return _jsx(NavigationRow, { ...props, ref: ref }); });
+/** Related navigation with independently configurable presentation. @since 0.2.11 */
+export const NavigationGroup = /* @__PURE__ */ forwardRef(function NavigationGroup(props, ref) { return _jsx(NavigationSection, { ...props, ref: ref }); });
 /** @since 0.2.7 */
 export const NavigationTree = /* @__PURE__ */ forwardRef(function NavigationTree(props, ref) {
     return _jsx(HierarchicalNavigation, { ...props, ref: ref });
 });
+/** Bounded desktop navigation composed from NavigationTree and ScrollArea. @since 0.2.11 */
+export const Sidebar = /* @__PURE__ */ forwardRef(function Sidebar(props, ref) { return _jsx(WorkspaceSidebar, { ...props, ref: ref }); });
 /** @since 0.2.7 */
 export const ErrorSummary = /* @__PURE__ */ forwardRef(function ErrorSummary({ announcement = "off", autoFocus = false, ...props }, ref) { return _jsx(ValidationErrorSummary, { ...props, ref: ref, announcement: announcement, autoFocus: autoFocus }); });
 /** @since 0.2.7 */
@@ -128,8 +164,8 @@ export const TagInput = /* @__PURE__ */ forwardRef(function TagInput({ controlSi
 /** @since 0.2.7 */
 export const Editable = /* @__PURE__ */ forwardRef(function Editable({ controlSize = "md", blurAction = "commit", showActions = true, ...props }, ref) { return _jsx(InlineEditable, { ...props, ref: ref, controlSize: controlSize, blurAction: blurAction, showActions: showActions }); });
 const classes = (...values) => values.filter(Boolean).join(" ");
-export const Button = /* @__PURE__ */ 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(Spinner, { decorative: true }), children] }));
+export const Button = /* @__PURE__ */ forwardRef(function Button({ variant = "solid", tone = "default", size = "md", loading = false, disabled, type = "button", className, children, ...props }, ref) {
+    return (_jsxs("button", { ...props, ref: ref, type: type, "data-tone": tone === "danger" ? tone : undefined, 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 = /* @__PURE__ */ forwardRef(function Tag({ size = "md", icon, disabled = false, onRemove, removeLabel, removeButtonProps, className, children, ...props }, ref) {
@@ -153,8 +189,8 @@ export const DescriptionList = /* @__PURE__ */ forwardRef(function DescriptionLi
     return _jsx(DescribedData, { ...props, ref: ref, items: items, layout: layout, density: density, dividers: dividers });
 });
 /** @since 0.2.4 */
-export const Table = /* @__PURE__ */ forwardRef(function Table({ caption, children, hideCaption = false, density = "comfortable", striped = false, scrollLabel, cellVerticalAlign = "middle", ...props }, ref) {
-    return _jsx(TabularData, { ...props, ref: ref, caption: caption, hideCaption: hideCaption, density: density, striped: striped, scrollLabel: scrollLabel, cellVerticalAlign: cellVerticalAlign, children: children });
+export const Table = /* @__PURE__ */ forwardRef(function Table({ caption, children, hideCaption = false, density = "comfortable", striped = false, scrollLabel, cellVerticalAlign = "middle", stickyHeader = false, ...props }, ref) {
+    return _jsx(TabularData, { ...props, ref: ref, caption: caption, hideCaption: hideCaption, density: density, striped: striped, scrollLabel: scrollLabel, cellVerticalAlign: cellVerticalAlign, stickyHeader: stickyHeader, children: children });
 });
 /** @since 0.2.4 */
 export const Badge = /* @__PURE__ */ forwardRef(function Badge({ size = "md", tone = "neutral", variant = "subtle", className, ...props }, ref) {
@@ -197,9 +233,24 @@ export const Menu = /* @__PURE__ */ forwardRef(function Menu({ defaultOpen = fal
 export const Tooltip = /* @__PURE__ */ 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 = /* @__PURE__ */ 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 = /* @__PURE__ */ 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 }); });
+/** @since 0.2.11 */
+export const CommandPalette = /* @__PURE__ */ forwardRef(function CommandPalette({ searchLabel, items, density = "comfortable", query, defaultQuery, onQueryChange, onAction, loading, placeholder, emptyMessage, loadingMessage, open, defaultOpen = false, onOpenChange, className, ...props }, ref) {
+    const input = useRef(null);
+    const [localOpen, setLocalOpen] = useState(defaultOpen);
+    const requestOpen = (next) => {
+        if (open === undefined)
+            setLocalOpen(next);
+        onOpenChange?.(next);
+    };
+    return _jsxs(Dialog, { ...props, ref: ref, open: open ?? localOpen, onOpenChange: requestOpen, initialFocusRef: input, className: classes("flood-command-palette", className), children: [_jsx("div", { className: "flood-command-palette__search-icon", children: _jsx(IconSlot, { size: "sm", children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", "aria-hidden": "true", focusable: "false", children: [_jsx("circle", { cx: "10.5", cy: "10.5", r: "5.75" }), _jsx("path", { d: "m15 15 4 4" })] }) }) }), _jsx(SearchCommandList, { ref: input, label: searchLabel, hideLabel: true, integrated: true, items: items, controlSize: density === "compact" ? "sm" : "md", query: query, defaultQuery: defaultQuery, onQueryChange: onQueryChange, loading: loading, placeholder: placeholder, emptyMessage: emptyMessage, loadingMessage: loadingMessage, onAction: id => { requestOpen(false); onAction(id); } })] });
+});
 export const Drawer = /* @__PURE__ */ forwardRef(function Drawer({ side = "end", size = "md", defaultOpen = false, closeLabel = "Close", closeOnOutsideClick = true, className, footer, ...props }, ref) {
     return _jsx(ModalOverlay, { ...props, ref: ref, defaultOpen: defaultOpen, closeLabel: closeLabel, closeOnOutsideClick: closeOnOutsideClick, className: classes("flood-drawer", className), "data-side": side, "data-size": size, scrollBody: true, footer: footer });
 });
+/** A modal bottom sheet for a short task or a list of choices. @since 0.2.12 */
+export const Sheet = /* @__PURE__ */ forwardRef(function Sheet({ className, size = "md", ...props }, ref) {
+    return _jsx(ModalOverlay, { ...props, ref: ref, "data-side": "bottom", "data-size": size, className: classes("flood-drawer", "flood-sheet", className), scrollBody: true, bodyContentInset: "none" });
+});
 export const AlertDialog = /* @__PURE__ */ forwardRef(function AlertDialog({ defaultOpen = false, confirmLabel = "Continue", cancelLabel = "Cancel", confirmDisabled = false, ...props }, ref) {
     return _jsx(ConfirmationDialog, { ...props, ref: ref, defaultOpen: defaultOpen, confirmLabel: confirmLabel, cancelLabel: cancelLabel, confirmDisabled: confirmDisabled });
 });
@@ -304,6 +355,10 @@ export const SearchInput = /* @__PURE__ */ forwardRef(function SearchInput({ cle
 export const PasswordInput = /* @__PURE__ */ 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 });
 });
+/** A free text field with suggestions; FormData contains text rather than an option ID. @since 0.2.11 */
+export const Autocomplete = /* @__PURE__ */ forwardRef(function Autocomplete({ value, defaultValue = "", onValueChange, onOptionSelect, ...props }, ref) {
+    return _jsx(SearchSelection, { ...props, ref: ref, freeText: true, textValue: value, initialText: defaultValue, onTextChange: onValueChange, onOptionSelect: onOptionSelect, initialValues: [] });
+});
 /** @since 0.2.5 */
 export const Combobox = /* @__PURE__ */ 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 });
@@ -360,7 +415,9 @@ export const RadioGroup = /* @__PURE__ */ forwardRef(function RadioGroup({ value
 export const SegmentedControl = /* @__PURE__ */ 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 => {
+    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.count == null || option.count === "" ? option.label
+                            : _jsxs("span", { className: "flood-segmented__counted-label", children: [option.label, " ", _jsx("span", { className: "flood-segmented__count", children: option.count })] })] }) })), onKeyDown: event => {
             onKeyDown?.(event);
             if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing)
                 return;
@@ -476,8 +533,8 @@ export const Card = /* @__PURE__ */ forwardRef(function Card({ title, descriptio
 export const IconSlot = /* @__PURE__ */ 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 });
 });
-export const IconButton = /* @__PURE__ */ forwardRef(function IconButton({ label, size = "md", variant = "subtle", className, children, ...props }, ref) {
-    return _jsx(Button, { ...props, ref: ref, size: size, variant: variant, "aria-label": label, className: classes("flood-icon-button", className), children: _jsx(IconSlot, { size: size, children: children }) });
+export const IconButton = /* @__PURE__ */ forwardRef(function IconButton({ label, size = "md", iconSize = size, variant = "subtle", className, children, ...props }, ref) {
+    return _jsx(Button, { ...props, ref: ref, size: size, variant: variant, "aria-label": label, className: classes("flood-icon-button", className), children: _jsx(IconSlot, { size: iconSize, children: children }) });
 });
 export const Divider = /* @__PURE__ */ forwardRef(function Divider({ className, ...props }, ref) {
     return _jsx("hr", { ...props, ref: ref, className: classes("flood-divider", className) });
@@ -510,6 +567,12 @@ export const Timeline = /* @__PURE__ */ forwardRef(function Timeline(props, ref)
 export const NavigationList = /* @__PURE__ */ forwardRef(function NavigationList({ size = "md", ...props }, ref) { return _jsx(NavigationMenu, { ...props, ref: ref, size: size }); });
 export const Steps = /* @__PURE__ */ forwardRef(function Steps({ orientation = "horizontal", ...props }, ref) { return _jsx(StepSequence, { ...props, ref: ref, orientation: orientation }); });
 export const Section = /* @__PURE__ */ forwardRef(function Section({ headingLevel = 2, headingSize = "section", ...props }, ref) { return _jsx(ContentSection, { ...props, ref: ref, headingLevel: headingLevel, headingSize: headingSize }); });
+/** The primary heading and associated actions inside a page's main region. @since 0.2.11 */
+export const PageHeader = /* @__PURE__ */ forwardRef(function PageHeader({ headingSize = "large", headingLevel = 1, ...props }, ref) { return _jsx(PageHeading, { ...props, ref: ref, headingSize: headingSize, headingLevel: headingLevel }); });
+/** Persistent application chrome with independent context and action slots. @since 0.2.11 */
+export const AppTopBar = /* @__PURE__ */ forwardRef(function AppTopBar({ bordered = false, ...props }, ref) { return _jsx(ApplicationTopBar, { ...props, ref: ref, bordered: bordered }); });
+/** Composes application navigation and a main landmark with optional bounded scrolling. @since 0.2.11 */
+export const AppShell = /* @__PURE__ */ forwardRef(function AppShell({ navigationSide = "start", scroll = "content", mainAs = "main", ...props }, ref) { return _jsx(ApplicationShell, { ...props, ref: ref, navigationSide: navigationSide, scroll: scroll, mainAs: mainAs }); });
 export const Split = /* @__PURE__ */ 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 = /* @__PURE__ */ forwardRef(function Center({ inline = false, ...props }, ref) { return _jsx(CenterLayout, { ...props, ref: ref, inline: inline }); });
 export const SkipLink = /* @__PURE__ */ forwardRef(function SkipLink({ children = "Skip to content", ...props }, ref) { return _jsx(SkipNavigation, { ...props, ref: ref, children: children }); });

package/dist/menu.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, 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";
+import { positionLayer, registerLayer, returnFocus, tabbables, useLayerExitContent } from "./overlay-runtime.js";
 const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 /** Validate each level while retaining globally unique action IDs. */
 export function validateMenuTree(items) {
@@ -171,6 +171,7 @@ export const MenuLayer = /* @__PURE__ */ forwardRef(function MenuLayerRender({ l
                 element.hidePopover();
         };
     }, [open, side, align, nested]);
+    const showContent = useLayerExitContent(panel, open);
     useBrowserLayoutEffect(() => {
         if (openChild && !items.some(item => item.id === openChild && item.type === "submenu" && !item.disabled))
             setOpenChild(undefined);
@@ -211,7 +212,7 @@ export const MenuLayer = /* @__PURE__ */ forwardRef(function MenuLayerRender({ l
         if (item.type === "separator")
             return _jsx("div", { role: "separator", className: "flood-menu__separator" }, item.id);
         const submenu = item.type === "submenu", childId = `${id}-submenu-${encodeURIComponent(item.id)}`;
-        return _jsxs(Fragment, { children: [_jsxs(Button, { ref: anchorRef(item.id), role: item.type === "checkbox" ? "menuitemcheckbox" : item.type === "radio" ? "menuitemradio" : "menuitem", "aria-checked": item.type === "checkbox" || item.type === "radio" ? item.checked : undefined, "aria-haspopup": submenu ? "menu" : undefined, "aria-expanded": submenu ? openChild === item.id && !item.disabled : undefined, "aria-controls": submenu ? childId : undefined, tabIndex: -1, variant: "ghost", size: controlSize, "aria-label": item.label, "aria-disabled": item.disabled || undefined, "data-label": item.label, "data-menu-id": item.id, "data-tone": "tone" in item ? item.tone : undefined, "data-submenu": submenu || undefined, className: "flood-menu__item", onPointerDown: event => { pointerType.current = event.pointerType; }, onPointerEnter: event => { if (event.pointerType === "mouse")
+        return _jsxs(Fragment, { children: [_jsxs(Button, { ref: anchorRef(item.id), role: item.type === "checkbox" ? "menuitemcheckbox" : item.type === "radio" ? "menuitemradio" : "menuitem", "aria-checked": item.type === "checkbox" || item.type === "radio" ? item.checked : undefined, "aria-haspopup": submenu ? "menu" : undefined, "aria-expanded": submenu ? openChild === item.id && !item.disabled : undefined, "aria-controls": submenu ? childId : undefined, tabIndex: -1, variant: "ghost", size: controlSize, "aria-label": item.label, "aria-disabled": item.disabled || undefined, "data-label": item.label, "data-menu-id": item.id, tone: "tone" in item ? item.tone : undefined, "data-submenu": submenu || undefined, className: "flood-menu__item", onPointerDown: event => { pointerType.current = event.pointerType; }, onPointerEnter: event => { if (event.pointerType === "mouse")
                         scheduleHover(item, event.currentTarget); }, onPointerLeave: () => clearHover(), onPointerMove: event => {
                         if (event.pointerType === "touch" || openChild)
                             return;
@@ -262,7 +263,7 @@ export const MenuLayer = /* @__PURE__ */ forwardRef(function MenuLayerRender({ l
             group.push(items[++index]);
         rows.push(_jsxs("div", { role: "group", "aria-label": item.group, children: [_jsx("div", { className: "flood-menu__group-label", "aria-hidden": "true", children: item.group }), group.map(renderItem)] }, `radio-${item.id}`));
     }
-    return _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", nested && "flood-menu--submenu", className].filter(Boolean).join(" "), onKeyDown: event => {
+    return _jsx("div", { ...props, ref: panel, id: id, popover: "manual", role: "menu", "aria-label": label, "aria-orientation": "vertical", "aria-hidden": !open || undefined, tabIndex: -1, className: ["flood-overlay-panel", "flood-menu", nested && "flood-menu--submenu", className].filter(Boolean).join(" "), onKeyDown: event => {
             if (event.target.closest('[role="menu"]') !== panel.current)
                 return;
             onKeyDown?.(event);
@@ -325,7 +326,7 @@ export const MenuLayer = /* @__PURE__ */ forwardRef(function MenuLayerRender({ l
                 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: rows }) });
+        }, children: showContent && _jsx(ScrollArea, { orientation: "vertical", role: "group", tabIndex: -1, className: "flood-menu__viewport", children: rows }) });
 });
 export const ActionMenu = /* @__PURE__ */ forwardRef(function ActionMenu({ label, trigger, items, onAction, open: controlled, defaultOpen, onOpenChange, disabled, side = "bottom", align = "start", controlSize = "sm", ...props }, forwardedRef) {
     if (!label.trim())

package/dist/menubar.d.ts

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

package/dist/menubar.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { Button, Menu } from "./index.js";
+import { tabbables } from "./overlay-runtime.js";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+export const ApplicationMenubar = /* @__PURE__ */ forwardRef(function ApplicationMenubar({ label, menus, openValue, defaultOpenValue = null, onOpenValueChange, onAction, controlSize = "sm", disabled = false, className, onKeyDown, onKeyDownCapture, ...props }, ref) {
+    if (!label.trim() || menus.some(menu => !menu.id.trim() || !menu.label.trim()) || new Set(menus.map(menu => menu.id)).size !== menus.length)
+        throw new Error("Flood Menubar requires unique named menus");
+    const root = useRef(null);
+    useImperativeHandle(ref, () => root.current, []);
+    const [local, setLocal] = useState(defaultOpenValue), [active, setActive] = useState();
+    const requested = openValue === undefined ? local : openValue;
+    const enabled = menus.filter(menu => !disabled && !menu.disabled), open = enabled.some(menu => menu.id === requested) ? requested : null;
+    const current = useRef(open);
+    current.current = open;
+    const activeId = enabled.some(menu => menu.id === active) ? active : enabled[0]?.id;
+    const request = (next) => { if (openValue === undefined)
+        setLocal(next); onOpenValueChange?.(next); };
+    const trigger = (id) => [...root.current?.querySelectorAll('[data-menubar-trigger]') ?? []].find(node => node.dataset.menubarTrigger === id);
+    const move = (id, delta) => {
+        const at = enabled.findIndex(menu => menu.id === id), next = enabled[(at + delta + enabled.length) % enabled.length];
+        if (!next)
+            return;
+        setActive(next.id);
+        if (open)
+            request(next.id);
+        else
+            trigger(next.id)?.focus({ preventScroll: true });
+    };
+    useBrowserLayoutEffect(() => { if (open)
+        setActive(open); }, [open]);
+    useEffect(() => { if (requested && !open)
+        request(null); }, [requested, open]);
+    return _jsx("div", { ...props, ref: root, role: "menubar", "aria-label": label, "aria-orientation": "horizontal", "aria-disabled": disabled || undefined, tabIndex: enabled.length ? undefined : 0, className: ["flood-menubar", className].filter(Boolean).join(" "), onKeyDownCapture: event => {
+            onKeyDownCapture?.(event);
+            if (event.defaultPrevented || event.key !== "Tab" || event.altKey || event.ctrlKey || event.metaKey || !open)
+                return;
+            // Capture also sees nested menus; their ordinary Menu Tab contract returns
+            // to its trigger, while an application menubar exits the whole bar.
+            const anchor = trigger(open), scope = anchor?.closest('dialog[open]') ?? anchor?.ownerDocument.body;
+            if (anchor && scope) {
+                const stops = tabbables(scope), at = stops.indexOf(anchor);
+                const next = event.shiftKey ? stops.slice(0, at).reverse().find(node => !root.current?.contains(node)) : stops.slice(at + 1).find(node => !root.current?.contains(node));
+                if (next) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    next.focus();
+                    request(null);
+                }
+            }
+        }, onKeyDown: event => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing)
+                return;
+            const source = event.target.closest('[data-menubar-trigger]');
+            if (!source)
+                return;
+            const id = source.dataset.menubarTrigger, rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+            if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+                event.preventDefault();
+                move(id, event.key === (rtl ? "ArrowLeft" : "ArrowRight") ? 1 : -1);
+            }
+            else if (event.key === "Home" || event.key === "End") {
+                event.preventDefault();
+                const next = event.key === "Home" ? enabled[0] : enabled.at(-1);
+                if (next) {
+                    setActive(next.id);
+                    trigger(next.id)?.focus();
+                }
+            }
+        }, children: menus.map(menu => _jsx(Menu, { label: menu.label, items: menu.items, open: open === menu.id, disabled: disabled || menu.disabled, controlSize: controlSize, onOpenChange: next => { if (next)
+                request(menu.id);
+            else if (current.current === menu.id)
+                request(null); }, onAction: id => onAction?.(menu.id, id), onKeyDown: event => {
+                if (event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing)
+                    return;
+                const rtl = getComputedStyle(root.current).direction === "rtl", forward = event.key === (rtl ? "ArrowLeft" : "ArrowRight");
+                if ((forward || (event.key === (rtl ? "ArrowRight" : "ArrowLeft"))) && !(forward && event.target.closest('[aria-haspopup="menu"]'))) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    move(menu.id, forward ? 1 : -1);
+                }
+            }, trigger: binding => _jsx(Button, { ...binding, role: "menuitem", "data-menubar-trigger": menu.id, tabIndex: menu.id === activeId ? 0 : -1, variant: "ghost", size: controlSize, onFocus: () => setActive(menu.id), onPointerEnter: () => { if (open && open !== menu.id && !disabled && !menu.disabled)
+                    request(menu.id); }, children: menu.label }) }, menu.id)) });
+});

package/dist/navigation-group.d.ts

@@ -0,0 +1,3 @@
+import type { NavigationGroupProps } from "./index.js";
+/** Related navigation with optional presentation and an independent disclosure owner. */
+export declare const NavigationSection: import("react").ForwardRefExoticComponent<NavigationGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/navigation-group.js

@@ -0,0 +1,13 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Collapsible, Text } from "./index.js";
+/** Related navigation with optional presentation and an independent disclosure owner. */
+export const NavigationSection = /* @__PURE__ */ forwardRef(function NavigationSection({ label, hideLabel = false, headingAction, separator = false, collapsible = false, expanded, defaultExpanded = true, onExpandedChange, compact = false, size = "md", collapseDisabled = false, className, children, ...props }, ref) {
+    if (label !== undefined && !label.trim())
+        throw new Error("Flood NavigationGroup label must be nonempty when provided");
+    if (collapsible && !label?.trim())
+        throw new Error("Flood collapsible NavigationGroup requires a nonempty label");
+    const action = headingAction == null ? undefined : _jsx("div", { className: "flood-navigation-group__action", children: headingAction });
+    const body = _jsx("div", { className: "flood-navigation-group__body", children: children });
+    return _jsx("div", { ...props, ref: ref, role: label ? "group" : props.role, "aria-label": props["aria-label"] ?? label, "data-size": size, "data-compact": compact || undefined, "data-hide-label": hideLabel || undefined, "data-separator": separator || undefined, "data-collapsible": collapsible || undefined, className: ["flood-navigation-group", className].filter(Boolean).join(" "), children: collapsible ? _jsx(Collapsible, { title: label, open: compact ? true : expanded, defaultOpen: defaultExpanded, onOpenChange: compact ? undefined : onExpandedChange, disabled: collapseDisabled, controlSize: size, headerAction: action, className: "flood-navigation-group__disclosure", children: body }) : _jsxs(_Fragment, { children: [(!compact && label && !hideLabel || action) && _jsxs("div", { className: "flood-navigation-group__heading", children: [!compact && label && !hideLabel && _jsx(Text, { size: "helper", tone: "subtle", className: "flood-navigation-group__label", children: label }), action] }), body] }) });
+});

package/dist/navigation-item.d.ts

@@ -0,0 +1,3 @@
+import type { NavigationItemProps } from "./index.js";
+/** Shared anatomy for destinations, commands and navigation disclosures. */
+export declare const NavigationRow: import("react").ForwardRefExoticComponent<NavigationItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/navigation-item.js

@@ -0,0 +1,68 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useRef } from 'react';
+import { Button, IconButton, IconSlot, Link, Text, Tooltip } from './index.js';
+function assignRef(ref, node) { if (typeof ref === 'function')
+    ref(node);
+else if (ref)
+    ref.current = node; }
+const classes = (...values) => values.filter(Boolean).join(' ');
+/** Shared anatomy for destinations, commands and navigation disclosures. */
+export const NavigationRow = /* @__PURE__ */ forwardRef(function NavigationRow({ label, description, icon, reserveIcon = false, trailing, trailingAction, href, linkProps, onAction, actionProps, disclosure, current = false, currentKind = 'page', ancestorCurrent = false, disabled = false, size = 'md', compact = false, variant = 'quiet', tooltip = true, tooltipSide = 'right', controlRef, disclosureRef, className, ...props }, ref) {
+    if (!label.trim())
+        throw new Error('Flood NavigationItem requires a nonempty label');
+    if (href !== undefined && !href.trim())
+        throw new Error('Flood NavigationItem requires a nonempty destination');
+    if (href !== undefined && onAction)
+        throw new Error('Flood NavigationItem uses either a destination or a command');
+    if (compact && disclosure && (href !== undefined || onAction || actionProps?.onClick))
+        throw new Error('Flood compact rows with separate actions and disclosure require a branch composition such as NavigationTree');
+    if (disclosure && !disclosure.label.trim())
+        throw new Error('Flood NavigationItem requires a named disclosure');
+    const toggleOnly = Boolean(disclosure && href === undefined && !onAction);
+    const hasAction = !compact && trailingAction != null;
+    const unavailable = disabled || Boolean(toggleOnly && disclosure?.disabled) || Boolean(href === undefined && actionProps?.disabled);
+    const hintRef = useRef(undefined);
+    const setControl = useCallback((node) => { assignRef(controlRef, node); hintRef.current?.(node); }, [controlRef]);
+    const glyph = icon ?? (compact ? _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", "aria-hidden": "true", children: _jsx("rect", { x: "5", y: "5", width: "14", height: "14", rx: "4" }) }) : null);
+    const chevron = _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "m9 6 6 6-6 6" }) });
+    const content = _jsxs(_Fragment, { children: [(icon != null || reserveIcon || compact) && _jsx(IconSlot, { size: size, children: glyph }), _jsxs("span", { className: "flood-navigation-item__content", children: [_jsx(Text, { as: "span", className: "flood-navigation-item__label", children: label }), !compact && description && _jsx(Text, { as: "span", size: "helper", tone: "subtle", className: "flood-navigation-item__description", children: description })] }), !compact && !hasAction && trailing != null && _jsx("span", { className: "flood-navigation-item__trailing", children: trailing }), !compact && toggleOnly && _jsx("span", { className: "flood-navigation-item__indicator", children: _jsx(IconSlot, { size: size === 'lg' ? 'xs' : '2xs', children: chevron }) })] });
+    const primary = (hint) => {
+        hintRef.current = hint?.ref;
+        const hintEvents = {
+            onPointerEnter: (event) => { if (href !== undefined)
+                linkProps?.onPointerEnter?.(event);
+            else
+                actionProps?.onPointerEnter?.(event); if (!event.defaultPrevented)
+                hint?.onPointerEnter?.(event); },
+            onPointerLeave: (event) => { if (href !== undefined)
+                linkProps?.onPointerLeave?.(event);
+            else
+                actionProps?.onPointerLeave?.(event); hint?.onPointerLeave?.(event); },
+            onFocus: (event) => { if (href !== undefined)
+                linkProps?.onFocus?.(event);
+            else
+                actionProps?.onFocus?.(event); if (!event.defaultPrevented)
+                hint?.onFocus?.(event); },
+            onBlur: (event) => { if (href !== undefined)
+                linkProps?.onBlur?.(event);
+            else
+                actionProps?.onBlur?.(event); hint?.onBlur?.(event); },
+        };
+        const source = href !== undefined ? linkProps : actionProps;
+        const descriptionIds = [source?.['aria-describedby'], hint?.['aria-describedby']].filter(Boolean).join(' ') || undefined;
+        const controlClass = classes('flood-navigation-item__control', source?.className);
+        if (href !== undefined) {
+            if (unavailable)
+                return _jsx("span", { ref: setControl, role: "link", "aria-disabled": "true", "aria-label": compact ? linkProps?.['aria-label'] ?? label : linkProps?.['aria-label'], "aria-current": current ? currentKind : undefined, className: controlClass, children: content });
+            return _jsx(Link, { ...linkProps, ...hintEvents, ref: setControl, href: href, variant: "ghost", size: size, className: controlClass, title: hint ? undefined : linkProps?.title, "aria-label": compact ? linkProps?.['aria-label'] ?? label : linkProps?.['aria-label'], "aria-describedby": descriptionIds, "aria-current": current ? currentKind : undefined, children: content });
+        }
+        if (onAction || toggleOnly || actionProps?.onClick)
+            return _jsx(Button, { ...actionProps, ...hintEvents, ref: setControl, type: "button", variant: "ghost", size: size, className: controlClass, disabled: unavailable || actionProps?.disabled, "aria-label": actionProps?.['aria-label'] ?? (toggleOnly ? disclosure.label : compact ? label : undefined), "aria-describedby": descriptionIds, "aria-current": current ? currentKind : undefined, "aria-expanded": toggleOnly ? disclosure.expanded : actionProps?.['aria-expanded'], "aria-controls": toggleOnly ? disclosure.controls : actionProps?.['aria-controls'], onClick: event => { actionProps?.onClick?.(event); if (event.defaultPrevented)
+                    return; if (toggleOnly)
+                    disclosure.onExpandedChange(!disclosure.expanded);
+                else
+                    onAction?.(); }, children: content });
+        return _jsx("span", { ref: setControl, className: controlClass, "aria-disabled": unavailable || undefined, "aria-current": current ? currentKind : undefined, children: content });
+    };
+    return _jsxs("div", { ...props, ref: ref, className: classes('flood-navigation-item', className), "data-size": size, "data-variant": variant, "data-compact": compact || undefined, "data-current": current || undefined, "data-ancestor-current": ancestorCurrent || undefined, "data-disabled": unavailable || undefined, "data-disclosure": disclosure && !toggleOnly && !compact || undefined, "data-trailing-action": hasAction || undefined, "data-expanded": disclosure?.expanded, children: [compact ? _jsx(Tooltip, { content: label, side: tooltipSide, disabled: !tooltip || unavailable, trigger: hint => primary(hint) }) : primary(), hasAction && _jsxs("div", { className: "flood-navigation-item__accessories", children: [trailing != null && _jsx("span", { className: "flood-navigation-item__metadata", children: trailing }), _jsx("div", { className: "flood-navigation-item__action", children: trailingAction })] }), disclosure && !toggleOnly && !compact && _jsx(IconButton, { ref: disclosureRef, label: disclosure.label, size: size, iconSize: size === 'lg' ? 'xs' : '2xs', variant: "ghost", className: "flood-navigation-item__disclosure", disabled: disabled || disclosure.disabled, "aria-expanded": disclosure.expanded, "aria-controls": disclosure.controls, onClick: () => disclosure.onExpandedChange(!disclosure.expanded), children: chevron })] });
+});

package/dist/navigation-layout.d.ts

@@ -1,6 +1,7 @@
-import type { NavigationListProps, StepsProps, SectionProps, SplitProps, CenterProps, SkipLinkProps } from "./index.js";
+import type { NavigationListProps, StepsProps, SectionProps, PageHeaderProps, 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 PageHeading: import("react").ForwardRefExoticComponent<PageHeaderProps & import("react").RefAttributes<HTMLElement>>;
 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>>;

package/dist/navigation-layout.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId } from "react";
-import { IconSlot, Heading } from "./index.js";
+import { Heading, NavigationGroup, NavigationItem } from "./index.js";
 const classes = (...names) => names.filter(Boolean).join(" ");
 function uniqueValues(items, component) {
     if (items.some(item => !item.value.trim()) || new Set(items.map(item => item.value)).size !== items.length)
@@ -19,8 +19,8 @@ export const NavigationMenu = /* @__PURE__ */ forwardRef(function NavigationMenu
         else
             groups.push({ label: item.group ?? "", items: [item] });
     }
-    const links = (entries) => entries.map(item => _jsx("li", { children: _jsxs("a", { ...item.linkProps, href: item.href, "aria-current": item.value === currentValue ? "page" : undefined, className: classes("flood-navigation-list__link", item.linkProps?.className), children: [item.icon != null && _jsx(IconSlot, { size: size, children: item.icon }), _jsxs("span", { className: "flood-navigation-list__text", children: [_jsx("span", { className: "flood-navigation-list__label", children: item.label }), item.description && _jsx("span", { className: "flood-navigation-list__description", children: item.description })] })] }) }, item.value));
-    return _jsx("nav", { ...props, ref: ref, "aria-label": label, className: classes("flood-navigation-list", className), "data-size": size, children: _jsx("ul", { role: "list", className: "flood-navigation-list__groups", children: groups.map((group, index) => group.label ? _jsxs("li", { className: "flood-navigation-list__group", children: [_jsx("p", { className: "flood-navigation-list__group-title", id: `${id}-${index}`, children: group.label }), _jsx("ul", { role: "list", "aria-labelledby": `${id}-${index}`, children: links(group.items) })] }, index) : links(group.items)) }) });
+    const links = (entries) => entries.map(item => _jsx("li", { children: _jsx(NavigationItem, { label: item.label, description: item.description, href: item.href, icon: item.icon, reserveIcon: entries.some(entry => entry.icon != null), current: item.value === currentValue, size: size, linkProps: { ...item.linkProps, className: classes("flood-navigation-list__link", item.linkProps?.className) } }) }, item.value));
+    return _jsx("nav", { ...props, ref: ref, "aria-label": label, className: classes("flood-navigation-list", className), "data-size": size, children: _jsx("ul", { role: "list", className: "flood-navigation-list__groups", children: groups.map((group, index) => group.label ? _jsx("li", { className: "flood-navigation-list__group", children: _jsx(NavigationGroup, { label: group.label, id: `${id}-${index}`, size: size, children: _jsx("ul", { role: "list", "aria-labelledby": `${id}-${index}`, children: links(group.items) }) }) }, index) : links(group.items)) }) });
 });
 export const StepSequence = /* @__PURE__ */ forwardRef(function StepSequence({ items, label, currentValue = items[0]?.value, orientation = "horizontal", onStepChange, statusLabels = { complete: "Completed", current: "Current step", upcoming: "Upcoming", error: "Needs attention" }, className, ...props }, ref) {
     uniqueValues(items, "Steps");
@@ -36,11 +36,19 @@ export const StepSequence = /* @__PURE__ */ forwardRef(function StepSequence({ i
             return _jsx("li", { "data-state": state, "aria-current": current ? "step" : undefined, children: onStepChange ? _jsx("button", { type: "button", className: "flood-steps__content flood-steps__action", disabled: item.disabled, onClick: () => onStepChange(item.value), children: content }) : _jsx("div", { className: "flood-steps__content", children: content }) }, item.value);
         }) });
 });
+const ContentHeader = /* @__PURE__ */ forwardRef(function ContentHeader({ title, description, actions, headingId, headingLevel, headingSize, className, ...props }, ref) {
+    return _jsxs("header", { ...props, ref: ref, className: classes("flood-section__header", className), children: [_jsxs("div", { className: "flood-section__heading", children: [_jsx(Heading, { id: headingId, level: headingLevel, size: headingSize, className: "flood-section__title", children: title }), description != null && _jsx("div", { className: "flood-section__description", children: description })] }), actions != null && _jsx("div", { className: "flood-section__actions", children: actions })] });
+});
+export const PageHeading = /* @__PURE__ */ forwardRef(function PageHeader({ title, headingSize = "large", headingLevel = 1, className, ...props }, ref) {
+    if (!title.trim())
+        throw new Error("Flood PageHeader requires a nonempty title");
+    return _jsx(ContentHeader, { ...props, ref: ref, title: title, headingLevel: headingLevel, headingSize: headingSize, className: classes("flood-page-header", className) });
+});
 export const ContentSection = /* @__PURE__ */ forwardRef(function ContentSection({ title, description, actions, headingLevel = 2, headingSize = "section", children, id: explicitId, className, "aria-labelledby": labelledBy, ...props }, ref) {
     if (!title.trim() || ![2, 3, 4, 5, 6].includes(headingLevel))
         throw new Error("Flood Section requires a nonempty title and headingLevel from 2 to 6");
     const generated = useId(), headingId = `${explicitId ?? `flood-section-${generated}`}-title`;
-    return _jsxs("section", { ...props, ref: ref, id: explicitId, "aria-labelledby": labelledBy ?? headingId, className: classes("flood-section", className), children: [_jsxs("header", { className: "flood-section__header", children: [_jsxs("div", { className: "flood-section__heading", children: [_jsx(Heading, { id: headingId, level: headingLevel, size: headingSize, className: "flood-section__title", children: title }), description != null && _jsx("div", { className: "flood-section__description", children: description })] }), actions != null && _jsx("div", { className: "flood-section__actions", children: actions })] }), children != null && _jsx("div", { className: "flood-section__body", children: children })] });
+    return _jsxs("section", { ...props, ref: ref, id: explicitId, "aria-labelledby": labelledBy ?? headingId, className: classes("flood-section", className), children: [_jsx(ContentHeader, { title: title, description: description, actions: actions, headingId: headingId, headingLevel: headingLevel, headingSize: headingSize }), children != null && _jsx("div", { className: "flood-section__body", children: children })] });
 });
 export const SplitLayout = /* @__PURE__ */ forwardRef(function SplitLayout({ main, aside, side = "end", ratio = "main", collapseAt = "md", gap = "6", className, style, ...props }, ref) {
     const primary = _jsx("div", { className: "flood-split__main", children: main }, "main"), secondary = _jsx("div", { className: "flood-split__aside", children: aside }, "aside");