@abuzareal/contour-ui 0.5.0 → 0.6.0

package/dist/components/ui/Combobox.js

@@ -0,0 +1,120 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext, useId, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import { DirectionProvider } from "@base-ui/react/direction-provider";
+import { Check, ChevronDown } from "lucide-react";
+import { ccx } from "../../lib/classNames.js";
+import { fieldDescribedBy } from "../../lib/a11y.js";
+import { composeRefs } from "../../lib/composeRefs.js";
+import { LayerVisibility } from "../../lib/layers.js";
+import { floatingContainer } from "../../hooks/useFloatingPanel.js";
+import useControlRef from "../../hooks/useControlRef.js";
+import useFormReset from "../../hooks/useFormReset.js";
+import useLayerDismiss from "../../hooks/useLayerDismiss.js";
+import useOpenState from "../../hooks/useOpenState.js";
+import useComboboxAnchor from "../../hooks/useComboboxAnchor.js";
+import FloatingScope from "./FloatingScope.js";
+import Field from "./Field.js";
+/** Searchable allowed-value selection. The forwarded ref targets the visible input. */
+const Combobox = forwardRef(function Combobox({ label, options, filteredOptions, value: controlledValue, defaultValue = null, onValueChange, inputValue, defaultInputValue, onInputValueChange, open: controlledOpen, defaultOpen = false, onOpenChange, id: providedId, name, form, required, disabled, readOnly, hint, error, hideLabel, loading = false, searchError, onRetry, loadingText = "Loading choices…", emptyText = "No matching choices.", retryLabel = "Retry search", triggerLabel = "Show choices", missingValueText = "Selected option is unavailable. Choose another.", side = "bottom", align = "start", sideOffset = 8, collisionPadding = 8, portal = true, container, inputProps, popupProps, rootProps, }, forwardedRef) {
+    const generatedId = useId();
+    const id = providedId ?? generatedId;
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const value = controlledValue === undefined ? internalValue : controlledValue;
+    const selected = options.find((option) => option.value === value);
+    const missing = value !== null && !selected;
+    const [query, setQuery] = useState(defaultInputValue ?? null);
+    const [open, changeOpen] = useOpenState(controlledOpen, defaultOpen, onOpenChange);
+    const available = useContext(LayerVisibility) && !disabled && !readOnly;
+    const visible = available && open;
+    const { ref: input, attach } = useControlRef(forwardedRef);
+    const [anchor, setAnchor] = useState(null);
+    const attachInput = useMemo(() => composeRefs(attach, inputProps?.ref, setAnchor), [attach, inputProps?.ref]);
+    const root = useRef(null);
+    const attachRoot = useMemo(() => composeRefs(root, rootProps?.ref), [rootProps?.ref]);
+    const positioner = useRef(null);
+    const [, mountedPositioner] = useState(null);
+    const attachPositioner = useMemo(() => composeRefs(positioner, mountedPositioner), []);
+    const [direction, setDirection] = useState("ltr");
+    const target = anchor && portal ? floatingContainer(anchor, { container }) : null;
+    const collection = useMemo(() => BaseCombobox.createItems(options, {
+        getValue: (option) => option.value,
+        getLabel: (option) => option.label,
+    }), [options]);
+    const close = () => {
+        changeOpen(false);
+        setQuery(null);
+    };
+    useLayerDismiss(root, visible, close, {
+        branches: [positioner, input],
+        layerElement: positioner,
+    });
+    useFormReset(input, () => {
+        if (controlledValue === undefined)
+            setInternalValue(defaultValue);
+        setQuery(null);
+        changeOpen(false);
+    });
+    useLayoutEffect(() => {
+        const element = input.current;
+        element?.setCustomValidity(missing ? missingValueText : "");
+        return () => element?.setCustomValidity("");
+    }, [input, missing, missingValueText]);
+    const fieldError = error ?? (missing ? missingValueText : undefined);
+    const results = loading || searchError ? [] : filteredOptions;
+    const statusId = `${id}-search-status`;
+    const positioning = useComboboxAnchor(anchor, positioner);
+    const popup = (_jsx(FloatingScope, { anchor: anchor, open: visible, target: target, onDirectionChange: setDirection, children: _jsx(BaseCombobox.Positioner, { ...positioning, ref: attachPositioner, className: ccx("combobox-positioner"), positionMethod: "fixed", side: side, align: align, sideOffset: Number.isFinite(sideOffset) ? sideOffset : 8, collisionPadding: Number.isFinite(collisionPadding) ? Math.max(0, collisionPadding) : 8, children: _jsxs(BaseCombobox.Popup, { ...popupProps, className: ccx("combobox-popup", popupProps?.className), children: [_jsx(BaseCombobox.Empty, { className: ccx("combobox-status"), children: loading ? loadingText : (searchError ?? emptyText) }), searchError && onRetry && (_jsx("button", { type: "button", className: ccx("combobox-retry"), onClick: onRetry, children: retryLabel })), _jsx(BaseCombobox.List, { className: ccx("combobox-list"), children: (option) => (_jsxs(BaseCombobox.Item, { className: ccx("combobox-option"), value: option.value, disabled: option.disabled, children: [_jsx("span", { children: option.label }), _jsx(BaseCombobox.ItemIndicator, { children: _jsx(Check, { size: 14, "aria-hidden": "true" }) })] }, option.value)) })] }) }) }));
+    return (_jsx(DirectionProvider, { direction: direction, children: _jsx("div", { ...rootProps, ref: attachRoot, className: ccx("combobox", rootProps?.className), children: _jsxs(BaseCombobox.Root, { items: collection, filteredItems: results, value: missing ? null : value, onValueChange: (next) => {
+                    if (controlledValue === undefined)
+                        setInternalValue(next);
+                    setQuery(null);
+                    onValueChange?.(next);
+                }, inputValue: inputValue ?? query ?? selected?.label ?? "", onInputValueChange: (next, details) => {
+                    setQuery(details.reason === "input-change" ||
+                        details.reason === "input-clear"
+                        ? next
+                        : null);
+                    onInputValueChange?.(next);
+                }, open: visible, onOpenChange: (next, details) => {
+                    // Keep native observers informed; a prevented Escape must not dismiss the host layer.
+                    details.allowPropagation();
+                    if ((next && !available) ||
+                        (details.reason === "escape-key" &&
+                            details.event.defaultPrevented)) {
+                        details.cancel();
+                        return;
+                    }
+                    if (!next)
+                        setQuery(null);
+                    changeOpen(next);
+                }, name: name, form: form, required: required, disabled: disabled, readOnly: readOnly, children: [_jsx(Field, { id: id, label: label, hint: hint, error: fieldError, required: required, disabled: disabled, hideLabel: hideLabel, children: _jsxs(BaseCombobox.InputGroup, { className: ccx("field-control combobox-control"), children: [_jsx(BaseCombobox.Input, { ...inputProps, onMouseDown: (event) => {
+                                        inputProps?.onMouseDown?.(event);
+                                        // Own activation on click; leave native focus/caret behavior intact and avoid stale touch timers.
+                                        event.preventBaseUIHandler();
+                                    }, onClick: (event) => {
+                                        inputProps?.onClick?.(event);
+                                        if (!event.defaultPrevented && available)
+                                            changeOpen(true);
+                                    }, onKeyDown: (event) => {
+                                        inputProps?.onKeyDown?.(event);
+                                        // Contour preserves a closed selection and lets the enclosing layer own Escape.
+                                        // Cancelling only Base UI's handler leaves the native document event intact.
+                                        if (event.defaultPrevented ||
+                                            (event.key === "Escape" && !visible))
+                                            event.preventBaseUIHandler();
+                                    }, ref: attachInput, id: id, form: form, "aria-labelledby": [
+                                        `${id}-label`,
+                                        inputProps?.["aria-labelledby"],
+                                    ]
+                                        .filter(Boolean)
+                                        .join(" "), "aria-invalid": fieldError ? true : inputProps?.["aria-invalid"], "aria-busy": loading || undefined, "aria-describedby": [
+                                        inputProps?.["aria-describedby"],
+                                        fieldDescribedBy(id, hint, fieldError),
+                                        statusId,
+                                    ]
+                                        .filter(Boolean)
+                                        .join(" ") }), _jsx(BaseCombobox.Trigger, { disabled: disabled || readOnly, className: ccx("combobox-trigger"), "aria-label": triggerLabel, children: _jsx(ChevronDown, { size: 16, "aria-hidden": "true" }) })] }) }), _jsx("span", { id: statusId, role: "status", className: ccx("visually-hidden"), children: loading ? loadingText : (searchError ?? "") }), _jsx(BaseCombobox.Portal, { container: portal ? (target ?? undefined) : root, children: popup })] }) }) }));
+});
+export default Combobox;

package/dist/components/ui/Combobox.types.d.ts

@@ -0,0 +1,46 @@
+import type { NativePartProps } from "../../lib/componentProps.js";
+import type { FloatingOptions } from "../../hooks/useFloatingPanel.js";
+export type ComboboxOption = {
+    /** Unique, nonempty form value. Labels are presentation, never identity. */
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+type InputPart = Omit<NativePartProps<"input">, "value" | "defaultValue" | "name" | "form" | "id" | "disabled" | "required" | "readOnly" | "type">;
+export type ComboboxProps = FloatingOptions & {
+    label: string;
+    options: readonly ComboboxOption[];
+    /** Application-filtered results. Retain the selected option in options for async searches. */
+    filteredOptions?: readonly ComboboxOption[];
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+    inputValue?: string;
+    defaultInputValue?: string;
+    onInputValueChange?: (query: string) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    id?: string;
+    name?: string;
+    form?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    hint?: string;
+    error?: string;
+    hideLabel?: boolean;
+    loading?: boolean;
+    /** Search/service failure, distinct from field validation. Results are hidden until retry succeeds. */
+    searchError?: string;
+    onRetry?: () => void;
+    loadingText?: string;
+    emptyText?: string;
+    retryLabel?: string;
+    triggerLabel?: string;
+    missingValueText?: string;
+    inputProps?: InputPart;
+    popupProps?: NativePartProps<"div">;
+    rootProps?: NativePartProps<"div">;
+};
+export {};

package/dist/components/ui/Combobox.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ui/DataTable.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ccx } from "../../lib/classNames.js";
 /** Editorial data table with mono headers, optional column sorting, and horizontal scroll on small screens. */
 import { useMemo, useState } from "react";
+import Table from "./Table.js";
 import { ArrowDown, ArrowUp } from "lucide-react";
 export default function DataTable({ caption, columns, rows, rowKey, }) {
     const [sort, setSort] = useState(null);
@@ -22,8 +23,8 @@ export default function DataTable({ caption, columns, rows, rowKey, }) {
     const toggleSort = (key) => setSort((current) => current?.key === key && current.direction === "ascending"
         ? { key, direction: "descending" }
         : { key, direction: "ascending" });
-    return (_jsx("div", { className: ccx("table-scroll"), tabIndex: 0, role: "region", "aria-label": caption, children: _jsxs("table", { className: ccx("data-table"), children: [_jsx("caption", { className: ccx("visually-hidden"), children: caption }), _jsx("thead", { className: ccx("mono"), children: _jsx("tr", { children: columns.map((column) => {
-                            const direction = sort?.key === column.key ? sort.direction : undefined;
-                            return (_jsx("th", { scope: "col", "aria-sort": column.sortable ? (direction ?? "none") : undefined, "data-align": column.align, children: column.sortable ? (_jsxs("button", { type: "button", onClick: () => toggleSort(column.key), children: [column.header, direction === "descending" ? (_jsx(ArrowDown, { size: 12, "aria-hidden": "true" })) : (_jsx(ArrowUp, { size: 12, "aria-hidden": "true", className: ccx(direction ? undefined : "data-table-idle") }))] })) : (column.header) }, column.key));
-                        }) }) }), _jsx("tbody", { children: sortedRows.map((row) => (_jsx("tr", { children: columns.map((column) => (_jsx("td", { "data-align": column.align, children: column.render ? column.render(row) : row[column.key] }, column.key))) }, String(row[rowKey])))) })] }) }));
+    return (_jsxs(Table, { caption: caption, children: [_jsx("thead", { className: ccx("mono"), children: _jsx("tr", { children: columns.map((column) => {
+                        const direction = sort?.key === column.key ? sort.direction : undefined;
+                        return (_jsx("th", { scope: "col", "aria-sort": column.sortable ? (direction ?? "none") : undefined, "data-align": column.align, children: column.sortable ? (_jsxs("button", { type: "button", onClick: () => toggleSort(column.key), children: [column.header, direction === "descending" ? (_jsx(ArrowDown, { size: 12, "aria-hidden": "true" })) : (_jsx(ArrowUp, { size: 12, "aria-hidden": "true", className: ccx(direction ? undefined : "data-table-idle") }))] })) : (column.header) }, column.key));
+                    }) }) }), _jsx("tbody", { children: sortedRows.map((row) => (_jsx("tr", { children: columns.map((column) => (_jsx("td", { "data-align": column.align, children: column.render ? column.render(row) : row[column.key] }, column.key))) }, String(row[rowKey])))) })] }));
 }

package/dist/components/ui/Field.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertCircle } from "lucide-react";
 import { ccx } from "../../lib/classNames.js";
 export default function Field({ id, label, children, hint, error, required, hideLabel, counter, disabled, }) {
-    return (_jsxs("div", { className: ccx("field", error && "field-invalid", disabled && "field-disabled"), children: [_jsxs("label", { htmlFor: id, className: ccx("field-label mono", hideLabel && "visually-hidden"), children: [label, required && (_jsx("span", { className: ccx("field-required"), "aria-hidden": "true", children: "*" }))] }), children, (hint || error || counter) && (_jsxs("div", { className: ccx("field-footer mono"), children: [error ? (_jsxs("span", { id: `${id}-error`, className: ccx("field-error"), children: [_jsx(AlertCircle, { size: 13, "aria-hidden": "true" }), error] })) : (hint && _jsx("span", { id: `${id}-hint`, children: hint })), counter && _jsx("span", { className: ccx("field-counter"), children: counter })] }))] }));
+    return (_jsxs("div", { className: ccx("field", error && "field-invalid", disabled && "field-disabled"), children: [_jsxs("label", { htmlFor: id, className: ccx("field-label mono", hideLabel && "visually-hidden"), children: [_jsx("span", { id: `${id}-label`, children: label }), required && (_jsx("span", { className: ccx("field-required"), "aria-hidden": "true", children: "*" }))] }), children, (hint || error || counter) && (_jsxs("div", { className: ccx("field-footer mono"), children: [error ? (_jsxs("span", { id: `${id}-error`, className: ccx("field-error"), children: [_jsx(AlertCircle, { size: 13, "aria-hidden": "true" }), error] })) : (hint && _jsx("span", { id: `${id}-hint`, children: hint })), counter && _jsx("span", { className: ccx("field-counter"), children: counter })] }))] }));
 }

package/dist/components/ui/FloatingPortal.js

@@ -1,51 +1,13 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useLayoutEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import useFloatingPanel, { floatingContainer, } from "../../hooks/useFloatingPanel.js";
+import FloatingScope from "./FloatingScope.js";
 export default function FloatingPortal({ anchor, anchorElement, panel, open, options, children, }) {
-    const scope = useRef(null);
     const target = anchorElement && options.portal !== false
         ? floatingContainer(anchorElement, options)
         : null;
-    useLayoutEffect(() => {
-        const root = scope.current;
-        if (!open || !anchorElement || !root)
-            return;
-        const view = anchorElement.ownerDocument.defaultView;
-        if (!view)
-            return;
-        const synchronize = () => {
-            const computed = view.getComputedStyle(anchorElement);
-            // Copy inherited CSS variables without controlling the host document's theme.
-            for (let index = 0; index < computed.length; index++) {
-                const name = computed.item(index);
-                if (name.startsWith("--"))
-                    root.style.setProperty(name, computed.getPropertyValue(name));
-            }
-            root.dir = computed.direction;
-            root.style.fontFamily = computed.fontFamily;
-            root.style.color = computed.color;
-        };
-        synchronize();
-        const observer = new view.MutationObserver(synchronize);
-        let ancestor = anchorElement;
-        while (ancestor) {
-            observer.observe(ancestor, {
-                attributes: true,
-                attributeFilter: [
-                    "style",
-                    "class",
-                    "dir",
-                    "data-theme",
-                    "data-contour-theme",
-                ],
-            });
-            ancestor = ancestor.parentElement;
-        }
-        return () => observer.disconnect();
-    }, [anchorElement, target, open]);
     useFloatingPanel(anchor, panel, open, { ...options, container: target });
-    const content = (_jsx("span", { ref: scope, className: "contour-floating-root contour-root", style: { display: "contents" }, children: children }));
+    const content = (_jsx(FloatingScope, { anchor: anchorElement, open: open, target: target, children: children }));
     return target ? createPortal(content, target) : content;
 }

package/dist/components/ui/FloatingScope.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+/** Carry the anchor's inherited theme into a portal without changing its host. */
+export default function FloatingScope({ anchor, open, target, onDirectionChange, children, }: {
+    anchor: HTMLElement | null;
+    open: boolean;
+    target: Node | null;
+    onDirectionChange?: (direction: "ltr" | "rtl") => void;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/ui/FloatingScope.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
+/** Carry the anchor's inherited theme into a portal without changing its host. */
+export default function FloatingScope({ anchor, open, target, onDirectionChange, children, }) {
+    const scope = useRef(null);
+    useLayoutEffect(() => {
+        const root = scope.current;
+        const view = anchor?.ownerDocument.defaultView;
+        if (!open || !anchor || !root || !view)
+            return;
+        const synchronize = () => {
+            const computed = view.getComputedStyle(anchor);
+            for (let index = 0; index < computed.length; index++) {
+                const name = computed.item(index);
+                if (name.startsWith("--"))
+                    root.style.setProperty(name, computed.getPropertyValue(name));
+            }
+            root.dir = computed.direction;
+            root.style.fontFamily = computed.fontFamily;
+            root.style.color = computed.color;
+            onDirectionChange?.(computed.direction === "rtl" ? "rtl" : "ltr");
+        };
+        synchronize();
+        const observer = new view.MutationObserver(synchronize);
+        let ancestor = anchor;
+        while (ancestor) {
+            observer.observe(ancestor, {
+                attributes: true,
+                attributeFilter: [
+                    "style",
+                    "class",
+                    "dir",
+                    "data-theme",
+                    "data-contour-theme",
+                ],
+            });
+            ancestor = ancestor.parentElement;
+        }
+        return () => observer.disconnect();
+    }, [anchor, target, open, onDirectionChange]);
+    return (_jsx("span", { ref: scope, className: "contour-floating-root contour-root", style: { display: "contents" }, children: children }));
+}

package/dist/components/ui/Table.d.ts

@@ -0,0 +1,20 @@
+import { type TableHTMLAttributes, type ReactNode } from "react";
+import type { NativePartProps } from "../../lib/componentProps.js";
+export type TableProps = Omit<TableHTMLAttributes<HTMLTableElement>, "children"> & {
+    /** Accessible table name. The component owns the caption element. */
+    caption: string;
+    children: ReactNode;
+    /** Show the caption visually; it remains accessible when false. @default false */
+    showCaption?: boolean;
+    scrollProps?: NativePartProps<"div">;
+};
+/** Semantic table styling for application-owned rows, cells and table engines. */
+declare const Table: import("react").ForwardRefExoticComponent<Omit<TableHTMLAttributes<HTMLTableElement>, "children"> & {
+    /** Accessible table name. The component owns the caption element. */
+    caption: string;
+    children: ReactNode;
+    /** Show the caption visually; it remains accessible when false. @default false */
+    showCaption?: boolean;
+    scrollProps?: NativePartProps<"div">;
+} & import("react").RefAttributes<HTMLTableElement>>;
+export default Table;

package/dist/components/ui/Table.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ccx } from "../../lib/classNames.js";
+/** Semantic table styling for application-owned rows, cells and table engines. */
+const Table = forwardRef(function Table({ caption, children, showCaption = false, scrollProps, className, ...rest }, ref) {
+    return (_jsx("div", { ...scrollProps, className: ccx("table-scroll", scrollProps?.className), tabIndex: scrollProps?.tabIndex ?? 0, role: scrollProps?.role ?? "region", "aria-label": scrollProps?.["aria-label"] ?? caption, children: _jsxs("table", { ...rest, ref: ref, className: ccx("data-table", className), children: [_jsx("caption", { className: showCaption ? undefined : ccx("visually-hidden"), children: caption }), children] }) }));
+});
+export default Table;

package/dist/hooks/useComboboxAnchor.d.ts

@@ -0,0 +1,17 @@
+import { type RefObject } from "react";
+/** Use public virtual-anchor/Rect extension points; keep upstream focus/selection and positioning. */
+export default function useComboboxAnchor(input: HTMLInputElement | null, floating: RefObject<HTMLDivElement | null>): {
+    anchor?: undefined;
+    collisionBoundary?: undefined;
+} | {
+    anchor: {
+        contextElement: HTMLElement;
+        getBoundingClientRect(): DOMRect;
+    };
+    collisionBoundary: {
+        readonly x: number;
+        readonly y: number;
+        readonly width: number;
+        readonly height: number;
+    };
+};

package/dist/hooks/useComboboxAnchor.js

@@ -0,0 +1,61 @@
+"use client";
+import { useMemo } from "react";
+import { platform } from "@floating-ui/dom";
+/** Fixed children of a zoomed body need anchor and viewport in the same local CSS units. */
+function windowScale(element) {
+    if (!element ||
+        platform.getOffsetParent?.(element) !== element.ownerDocument.defaultView)
+        return { x: 1, y: 1 };
+    const scale = platform.getScale?.(element);
+    if (!scale ||
+        !("x" in scale) ||
+        !("y" in scale) ||
+        !Number.isFinite(scale.x) ||
+        !Number.isFinite(scale.y) ||
+        scale.x <= 0 ||
+        scale.y <= 0)
+        return { x: 1, y: 1 };
+    return scale;
+}
+/** Use public virtual-anchor/Rect extension points; keep upstream focus/selection and positioning. */
+export default function useComboboxAnchor(input, floating) {
+    return useMemo(() => {
+        const source = input?.parentElement ?? input;
+        if (!source)
+            return {};
+        return {
+            anchor: {
+                contextElement: source,
+                getBoundingClientRect() {
+                    const rect = source.getBoundingClientRect(), scale = windowScale(floating.current);
+                    rect.x /= scale.x;
+                    rect.y /= scale.y;
+                    rect.width /= scale.x;
+                    rect.height /= scale.y;
+                    return rect;
+                },
+            },
+            // Getters are evaluated on each upstream update, including scroll, zoom and mobile viewport resize.
+            collisionBoundary: {
+                get x() {
+                    return ((source.ownerDocument.defaultView?.visualViewport?.offsetLeft ??
+                        0) / windowScale(floating.current).x);
+                },
+                get y() {
+                    return ((source.ownerDocument.defaultView?.visualViewport?.offsetTop ?? 0) /
+                        windowScale(floating.current).y);
+                },
+                get width() {
+                    return ((source.ownerDocument.defaultView?.visualViewport?.width ??
+                        source.ownerDocument.documentElement.clientWidth) /
+                        windowScale(floating.current).x);
+                },
+                get height() {
+                    return ((source.ownerDocument.defaultView?.visualViewport?.height ??
+                        source.ownerDocument.documentElement.clientHeight) /
+                        windowScale(floating.current).y);
+                },
+            },
+        };
+    }, [input, floating]);
+}

package/dist/index.d.ts

@@ -132,3 +132,5 @@ export type * from "./components/ui/ThemeScope.js";
 export type { FloatingOptions } from "./hooks/useFloatingPanel.js";
 export type { PanelFocusOptions } from "./hooks/usePanelFocus.js";
 export type { DismissReason } from "./lib/layers.js";
+export { default as Table, type TableProps } from "./components/ui/Table.js";
+export { default as Combobox, type ComboboxProps, type ComboboxOption, } from "./components/ui/Combobox.js";

package/dist/index.js

@@ -67,3 +67,5 @@ export * from "./lib/motion.js";
 export { default as SceneBoundary } from "./components/hero/SceneBoundary.js";
 export { safeHref } from "./lib/safeHref.js";
 export { default as ThemeScope } from "./components/ui/ThemeScope.js";
+export { default as Table } from "./components/ui/Table.js";
+export { default as Combobox, } from "./components/ui/Combobox.js";

package/dist/kit/data-display.css

@@ -277,12 +277,18 @@
 }
 
 .data-table {
+  color: var(--fg);
   width: 100%;
   min-width: 560px;
   border-collapse: collapse;
   font-size: 14px;
 }
 
+.data-table caption {
+  color: inherit;
+  text-align: left;
+}
+
 .data-table th {
   padding: 14px 16px 14px 0;
   border-bottom: 1px solid var(--line);

package/dist/kit/forms.css

@@ -370,3 +370,37 @@ textarea {
     var(--line-strong) var(--progress)
   );
 }
+
+/* Combobox uses the same native field frame; the popup is an allowed-value list. */
+.combobox { min-width: 0; }
+.combobox-control { display: flex; align-items: center; gap: 8px; }
+.combobox-control input { min-width: 0; flex: 1; }
+.combobox-trigger, .combobox-retry {
+  border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer;
+}
+.combobox-trigger { display: grid; place-items: center; min-width: 36px; min-height: 36px; flex: none; }
+.combobox-trigger:disabled { cursor: default; opacity: .45; }
+.combobox-positioner { z-index: 30; }
+.combobox-popup {
+  width: var(--anchor-width, 16rem);
+  max-width: var(--available-width, calc(100vw - 16px));
+  max-height: min(320px, var(--available-height, 320px));
+  overflow: auto; overscroll-behavior: contain;
+  border: 1px solid var(--line); border-radius: var(--radius-sm);
+  background: var(--bg); color: var(--fg); padding: 4px;
+  box-shadow: 0 8px 28px rgb(0 0 0 / .12);
+}
+.combobox-list { outline: none; }
+.combobox-option { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; overflow-wrap: anywhere; cursor: default; }
+.combobox-option[data-highlighted] { background: var(--invert-bg); color: var(--invert-fg); outline: 2px solid currentColor; outline-offset: -2px; }
+.combobox-option[data-disabled] { opacity: .45; }
+.combobox-status { padding: 12px; font-size: 14px; }
+.combobox-retry { padding: 10px 12px; text-decoration: underline; }
+.combobox-trigger:focus-visible, .combobox-retry:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+@media (forced-colors: active) {
+  .combobox-popup { border-color: CanvasText; background: Canvas; color: CanvasText; }
+  .combobox-option[data-highlighted] { background: Highlight; color: HighlightText; }
+  .combobox-option[data-disabled] { color: GrayText; opacity: 1; }
+}
+/* Keep the live region mounted without a blank row when there is no message. */
+.combobox-status:empty { padding: 0; }

package/dist/lib/componentClasses.js

@@ -1,2 +1,2 @@
 // Generated compatibility aliases; unknown consumer classes pass through unchanged.
-export const componentClasses = new Set(["alert", "alert-accent", "alert-action", "alert-banner", "alert-body", "alert-content", "alert-danger", "alert-dismiss", "alert-icon", "alert-info", "alert-success", "alert-title", "alert-warning", "avatar", "avatar-group", "avatar-initials", "avatar-lg", "avatar-sm", "avatar-status", "avatar-status-away", "avatar-status-online", "avatar-xl", "badge", "badge-danger", "badge-dot", "badge-info", "badge-invert", "badge-neutral", "badge-success", "badge-warning", "brand", "breadcrumbs", "button", "button-accent", "button-danger", "button-ghost", "button-icon", "button-lg", "button-secondary", "button-sm", "card", "card-acid", "card-body", "card-footer", "card-icon", "card-ink", "card-interactive", "card-title", "card-top", "choice", "choice-box", "choice-control", "choice-description", "choice-error", "choice-input", "choice-invalid", "choice-label", "choice-radio", "choice-text", "count-up", "css", "data-table", "data-table-idle", "depth-button", "depth-button-face", "dialog", "dialog-body", "dialog-close", "dialog-description", "dialog-footer", "dialog-header", "dialog-left", "dialog-panel", "dialog-right", "disclosure", "disclosure-icon", "divider", "divider-labelled", "empty-state", "empty-state-icon", "field", "field-chevron", "field-control", "field-counter", "field-disabled", "field-error", "field-footer", "field-icon", "field-invalid", "field-label", "field-required", "field-select", "field-trailing", "flip-back", "flip-card", "flip-face", "flip-front", "flip-stage", "flip-toggle", "hero-letter", "icon-button", "icon-button-accent", "icon-button-lg", "icon-button-sm", "icon-button-solid", "icon-button-spin", "inline-link", "is-flipped", "is-open", "is-visible", "kbd", "magnetic", "marquee", "marquee-inner", "marquee-track", "menu", "menu-chevron", "menu-end", "menu-item", "menu-item-danger", "menu-list", "menu-start", "menu-trigger", "mono", "opening-sequence", "page-width", "pagination", "pagination-gap", "pagination-page", "pagination-step", "popover", "popover-end", "popover-panel", "popover-start", "popover-title", "progress", "progress-accent", "progress-danger", "progress-fill", "progress-header", "progress-indeterminate", "progress-success", "progress-track", "radio-group", "radio-group-inline", "reveal", "scroll-progress", "sculpture-canvas", "section-label", "segmented", "segmented-option", "site-shell", "skeleton", "skeleton-block", "skeleton-circle", "skeleton-line", "skip-link", "slider", "slider-header", "spinner", "stage-canvas", "stat", "stat-suffix", "stepper", "stepper-complete", "stepper-current", "stepper-description", "stepper-label", "stepper-marker", "stepper-step", "stepper-text", "stepper-upcoming", "switch", "switch-thumb", "switch-track", "table-scroll", "tabs", "tabs-list", "tabs-panel", "tabs-tab", "tag", "tag-removable", "tag-remove", "text-link", "theme-fading", "theme-icon-moon", "theme-icon-sun", "theme-toggle", "tilt-card", "tilt-glare", "tilt-stage", "timeline", "timeline-body", "timeline-current", "timeline-date", "timeline-entry", "timeline-title", "toast", "toast-bar", "toast-close", "toast-content", "toast-danger", "toast-info", "toast-success", "toast-viewport", "toast-warning", "tooltip", "tooltip-anchor", "tooltip-bottom", "tooltip-left", "tooltip-right", "tooltip-top", "ts", "type-line", "type-run", "visually-hidden"]);
+export const componentClasses = new Set(["alert", "alert-accent", "alert-action", "alert-banner", "alert-body", "alert-content", "alert-danger", "alert-dismiss", "alert-icon", "alert-info", "alert-success", "alert-title", "alert-warning", "avatar", "avatar-group", "avatar-initials", "avatar-lg", "avatar-sm", "avatar-status", "avatar-status-away", "avatar-status-online", "avatar-xl", "badge", "badge-danger", "badge-dot", "badge-info", "badge-invert", "badge-neutral", "badge-success", "badge-warning", "brand", "breadcrumbs", "button", "button-accent", "button-danger", "button-ghost", "button-icon", "button-lg", "button-secondary", "button-sm", "card", "card-acid", "card-body", "card-footer", "card-icon", "card-ink", "card-interactive", "card-title", "card-top", "choice", "choice-box", "choice-control", "choice-description", "choice-error", "choice-input", "choice-invalid", "choice-label", "choice-radio", "choice-text", "combobox", "combobox-control", "combobox-list", "combobox-option", "combobox-popup", "combobox-positioner", "combobox-retry", "combobox-status", "combobox-trigger", "count-up", "css", "data-table", "data-table-idle", "depth-button", "depth-button-face", "dialog", "dialog-body", "dialog-close", "dialog-description", "dialog-footer", "dialog-header", "dialog-left", "dialog-panel", "dialog-right", "disclosure", "disclosure-icon", "divider", "divider-labelled", "empty-state", "empty-state-icon", "field", "field-chevron", "field-control", "field-counter", "field-disabled", "field-error", "field-footer", "field-icon", "field-invalid", "field-label", "field-required", "field-select", "field-trailing", "flip-back", "flip-card", "flip-face", "flip-front", "flip-stage", "flip-toggle", "hero-letter", "icon-button", "icon-button-accent", "icon-button-lg", "icon-button-sm", "icon-button-solid", "icon-button-spin", "inline-link", "is-flipped", "is-open", "is-visible", "kbd", "magnetic", "marquee", "marquee-inner", "marquee-track", "menu", "menu-chevron", "menu-end", "menu-item", "menu-item-danger", "menu-list", "menu-start", "menu-trigger", "mono", "opening-sequence", "page-width", "pagination", "pagination-gap", "pagination-page", "pagination-step", "popover", "popover-end", "popover-panel", "popover-start", "popover-title", "progress", "progress-accent", "progress-danger", "progress-fill", "progress-header", "progress-indeterminate", "progress-success", "progress-track", "radio-group", "radio-group-inline", "reveal", "scroll-progress", "sculpture-canvas", "section-label", "segmented", "segmented-option", "site-shell", "skeleton", "skeleton-block", "skeleton-circle", "skeleton-line", "skip-link", "slider", "slider-header", "spinner", "stage-canvas", "stat", "stat-suffix", "stepper", "stepper-complete", "stepper-current", "stepper-description", "stepper-label", "stepper-marker", "stepper-step", "stepper-text", "stepper-upcoming", "switch", "switch-thumb", "switch-track", "table-scroll", "tabs", "tabs-list", "tabs-panel", "tabs-tab", "tag", "tag-removable", "tag-remove", "text-link", "theme-fading", "theme-icon-moon", "theme-icon-sun", "theme-toggle", "tilt-card", "tilt-glare", "tilt-stage", "timeline", "timeline-body", "timeline-current", "timeline-date", "timeline-entry", "timeline-title", "toast", "toast-bar", "toast-close", "toast-content", "toast-danger", "toast-info", "toast-success", "toast-viewport", "toast-warning", "tooltip", "tooltip-anchor", "tooltip-bottom", "tooltip-left", "tooltip-right", "tooltip-top", "ts", "type-line", "type-run", "visually-hidden"]);

package/dist/scoped/kit/data-display.css

@@ -273,12 +273,18 @@
 }
 
 .contour-data-table {
+  color: var(--contour-fg);
   width: 100%;
   min-width: 560px;
   border-collapse: collapse;
   font-size: 14px;
 }
 
+.contour-data-table caption {
+  color: inherit;
+  text-align: start;
+}
+
 .contour-data-table th {
   padding: 14px 16px 14px 0;
   border-bottom: 1px solid var(--contour-line);

package/dist/scoped/kit/forms.css

@@ -368,3 +368,37 @@
     var(--contour-line-strong) var(--contour-progress, var(--progress))
   );
 }
+
+/* Combobox uses the same native field frame; the popup is an allowed-value list. */
+.contour-combobox { min-width: 0; }
+.contour-combobox-control { display: flex; align-items: center; gap: 8px; }
+.contour-combobox-control input { min-width: 0; flex: 1; }
+.contour-combobox-trigger, .contour-combobox-retry {
+  border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer;
+}
+.contour-combobox-trigger { display: grid; place-items: center; min-width: 36px; min-height: 36px; flex: none; }
+.contour-combobox-trigger:disabled { cursor: default; opacity: .45; }
+.contour-combobox-positioner { z-index: 30; }
+.contour-combobox-popup {
+  width: var(--anchor-width, 16rem);
+  max-width: var(--available-width, calc(100vw - 16px));
+  max-height: min(320px, var(--available-height, 320px));
+  overflow: auto; overscroll-behavior: contain;
+  border: 1px solid var(--contour-line); border-radius: var(--contour-radius-sm);
+  background: var(--contour-bg); color: var(--contour-fg); padding: 4px;
+  box-shadow: 0 8px 28px rgb(0 0 0 / .12);
+}
+.contour-combobox-list { outline: none; }
+.contour-combobox-option { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; overflow-wrap: anywhere; cursor: default; }
+.contour-combobox-option[data-highlighted] { background: var(--contour-invert-bg); color: var(--contour-invert-fg); outline: 2px solid currentColor; outline-offset: -2px; }
+.contour-combobox-option[data-disabled] { opacity: .45; }
+.contour-combobox-status { padding: 12px; font-size: 14px; }
+.contour-combobox-retry { padding: 10px 12px; text-decoration: underline; }
+.contour-combobox-trigger:focus-visible, .contour-combobox-retry:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+@media (forced-colors: active) {
+  .contour-combobox-popup { border-color: CanvasText; background: Canvas; color: CanvasText; }
+  .contour-combobox-option[data-highlighted] { background: Highlight; color: HighlightText; }
+  .contour-combobox-option[data-disabled] { color: GrayText; opacity: 1; }
+}
+/* Keep the live region mounted without a blank row when there is no message. */
+.contour-combobox-status:empty { padding: 0; }