@botiverse/raft-ui 0.11.0 → 0.13.0

package/dist/wip.mjs

@@ -1,12 +1,11 @@
-import { D as DialogTitle, I as useThemeScopeProps, L as useTheme, M as defaultNativeButton, O as DialogTrigger, a as DrawerContent, c as DrawerHeader, d as DrawerTitle, f as DrawerTrigger, g as Dialog, i as DrawerClose, k as Button$1, n as DrawerActions, r as DrawerBody, s as DrawerFooter, t as Drawer, v as DialogClose, y as DialogContent, z as tv } from "./drawer-yZD16Ybl.mjs";
-import { Check, ChevronDown, LoaderCircle, Plus, Search, X } from "lucide-react";
+import { Bn as DialogTitle, Gn as defaultNativeButton, Hn as Button$1, Mn as DialogContent, Qn as tv, Rt as useOverflowTitle, Vn as DialogTrigger, Xn as useTheme, Yn as useThemeScopeProps, ct as MessageItemDelegatedAvatar, dt as MessageItemDelegatedByName, i as MessageListJumpPillGroup, jn as DialogClose, kn as Dialog, lt as MessageItemDelegatedBy, n as MessageListJumpPill, p as MessageQuotedPreviewAuthorDelegatedBy, r as MessageListJumpPillDismiss, t as MessageListJumpControls, ut as MessageItemDelegatedByButton } from "./message-list-DP03T8gF.mjs";
+import { Check, ChevronDown, LoaderCircle, Plus, X } from "lucide-react";
 import { createContext, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@base-ui/react/button";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { Combobox } from "@base-ui/react/combobox";
-import { Select } from "@base-ui/react/select";
 //#region src/lib/phone-media.ts
 /**
 * A phone: a touch screen narrower than the desktop layout. The complement, on
@@ -28,28 +27,17 @@ function getSnapshot() {
 function usePhoneMedia() {
 	return useSyncExternalStore(subscribe, getSnapshot, () => false);
 }
-function resolveComboboxSelectMode({ phone, optionCount, sheetThreshold = 10, create = false, remote = false }) {
-	if (!phone) return "field";
-	if (create || remote) return "sheet";
-	return optionCount > sheetThreshold ? "sheet" : "list";
-}
-/** Options people can pick, flat or grouped: disabled options don't count. */
-function countSelectableOptions(groups) {
-	let count = 0;
-	for (const group of groups) for (const item of group.items) if (!item.disabled) count += 1;
-	return count;
-}
-/** The tallest the anchored list gets (`.r-combobox-select__list`, 16rem). */
-const LIST_MAX_HEIGHT = 256;
 /**
-* The side the anchored list opens on, chosen once when it opens so it never
-* flips while it is open (a phone's visual viewport keeps changing under it).
-* Below, unless the room below is short of the list and there is more above.
+* The side a phone's list opens on, chosen once when it opens so it never flips
+* while it is open (a phone's visual viewport keeps changing under it, as the
+* keyboard and the address bar come and go). Below, unless the room below is
+* short of the list and there is more above. `listHeight` is the list's full
+* height and `maxHeight` its cap (`listMaxHeight`), both in pixels.
 */
-function preferredListSide(anchor, viewport, listHeight) {
+function preferredListSide(anchor, viewport, listHeight, maxHeight) {
 	const below = viewport.top + viewport.height - anchor.bottom;
 	const above = anchor.top - viewport.top;
-	return below >= Math.min(listHeight, LIST_MAX_HEIGHT) || below >= above ? "bottom" : "top";
+	return below >= Math.min(listHeight, maxHeight) || below >= above ? "bottom" : "top";
 }
 //#endregion
 //#region src/components/combobox-select/combobox-select.options.ts
@@ -79,25 +67,24 @@ const defaultMessages = {
 	selected: "Selected options",
 	chipDescription: "Press Backspace or Delete to remove",
 	inputDescription: "From the start of the input, press Left Arrow to focus selected options",
-	remove: (label) => `Remove ${label}`,
-	search: "Search",
-	done: "Done",
-	close: "Close"
+	remove: (label) => `Remove ${label}`
 };
 const defaultRenderCreateLabel = (query) => `Create “${query}”`;
+/** An option's or a chip's text, with its whole value as the title when it is cut off. */
+function OverflowText({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref: useOverflowTitle(),
+		className: "r-combobox-select__text",
+		children
+	});
+}
 function recordLabel(record, renderLabel) {
 	return record.option === void 0 ? record.label : renderLabel?.(record.option) ?? record.label;
 }
 function renderOptionContent({ record, selected, renderLabel, renderOption, renderCreateLabel }) {
-	if (record.createQuery !== void 0) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Plus, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", {
-		className: "r-combobox-select__text",
-		children: renderCreateLabel(record.label)
-	})] });
+	if (record.createQuery !== void 0) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Plus, { "aria-hidden": true }), /* @__PURE__ */ jsx(OverflowText, { children: renderCreateLabel(record.label) })] });
 	const content = record.option === void 0 ? record.label : renderOption?.(record.option, { selected }) ?? recordLabel(record, renderLabel);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-		className: "r-combobox-select__text",
-		children: content
-	}), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(OverflowText, { children: content }), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
 		className: "r-combobox-select__indicator",
 		children: /* @__PURE__ */ jsx(Check, { "aria-hidden": true })
 	})] });
@@ -111,72 +98,34 @@ function renderSelectedChip({ record, index, tagLimit, strings, renderLabel, ren
 		"data-overflow": overflow || void 0,
 		"aria-label": record.label,
 		"aria-description": strings.chipDescription,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "r-combobox-select__text",
-			children: content
-		}), /* @__PURE__ */ jsx(Combobox.ChipRemove, {
+		children: [/* @__PURE__ */ jsx(OverflowText, { children: content }), /* @__PURE__ */ jsx(Combobox.ChipRemove, {
 			className: "r-combobox-select__remove",
 			"aria-label": strings.remove(record.label),
 			children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
 		})]
 	}, optionKey(record.value));
 }
-/** An option of the phone's anchored list: the same content as the field's list. */
-function renderSelectOption({ record, selected, loading, renderLabel, renderOption }) {
-	const content = record.option === void 0 ? record.label : renderOption?.(record.option, { selected }) ?? recordLabel(record, renderLabel);
-	return /* @__PURE__ */ jsxs(Select.Item, {
-		value: record,
-		label: record.label,
-		disabled: record.disabled || loading,
-		className: "r-combobox-select__option",
-		children: [/* @__PURE__ */ jsx(Select.ItemText, {
-			className: "r-combobox-select__text",
-			children: content
-		}), /* @__PURE__ */ jsx(Select.ItemIndicator, {
-			className: "r-combobox-select__indicator",
-			children: /* @__PURE__ */ jsx(Check, { "aria-hidden": true })
-		})]
-	}, optionKey(record.value));
-}
-/** Change details for the phone's own changes: the clear button outside any Base UI root, the sheet's search emptied as it closes. */
-function syntheticDetails(reason, event) {
-	let canceled = false;
-	return {
-		reason,
-		event,
-		trigger: void 0,
-		cancel() {
-			canceled = true;
-		},
-		allowPropagation() {},
-		get isCanceled() {
-			return canceled;
-		},
-		get isPropagationAllowed() {
-			return false;
-		}
-	};
-}
-function assignRef(ref, value) {
-	if (typeof ref === "function") ref(value);
-	else if (ref) ref.current = value;
-}
-/** The text that names a field: its `aria-labelledby` elements, else its `<label>`. */
-function readFieldLabel(element, labelledBy) {
-	if (!element) return "";
-	const doc = element.ownerDocument;
-	const fromIds = (labelledBy ?? "").split(/\s+/).filter(Boolean).map((labelId) => doc.getElementById(labelId)?.textContent?.trim() ?? "").filter(Boolean).join(" ");
-	if (fromIds) return fromIds;
-	return [...element.labels ?? []].map((label) => label.textContent?.trim() ?? "").filter(Boolean).join(" ");
-}
-/** The phone's anchored list keeps the side it opened on: it never flips while open. */
+/**
+* On a phone the list keeps the side it opened on: it never flips while it is
+* open, as the keyboard or the address bar change the visual viewport under it.
+*/
 const PHONE_LIST_COLLISION = {
 	side: "none",
 	align: "shift",
 	fallbackAxisSide: "none"
 };
-/** The side the phone's anchored list opens on, from the room around the field. */
-function measureListSide(anchor, groups) {
+/** A CSS length in pixels, as the document resolves it (rem, vh, calc()). */
+function resolveLength(doc, length) {
+	const probe = doc.createElement("div");
+	probe.style.cssText = "position:absolute;visibility:hidden;pointer-events:none;width:0";
+	probe.style.height = length;
+	doc.body.append(probe);
+	const height = probe.getBoundingClientRect().height;
+	probe.remove();
+	return height;
+}
+/** The side the phone's list opens on, from the room around the field and the list's cap. */
+function measureListSide(anchor, groups, maxHeight) {
 	const view = anchor?.ownerDocument.defaultView;
 	if (!anchor || !view) return "bottom";
 	const visual = view.visualViewport;
@@ -187,7 +136,7 @@ function measureListSide(anchor, groups) {
 	} : {
 		top: 0,
 		height: view.innerHeight
-	}, rows * 36 + 12);
+	}, rows * 36 + 12, resolveLength(anchor.ownerDocument, maxHeight));
 }
 /** Options-driven composition. The stable compound Combobox API stays unchanged. */
 function isItemEqualToValue(a, b) {
@@ -199,7 +148,7 @@ function itemToStringLabel(record) {
 function itemToStringValue(record) {
 	return String(record.value);
 }
-function ComboboxSelect({ options, multiple, value, defaultValue, onValueChange, labelField = "label", valueField = "value", disabledField = "disabled", fallbackOption, filterable = true, filter, remote = false, onSearch, loading = false, create = false, creatable, onCreate, clearable = false, showArrow = true, clearFilterAfterSelect = true, onClear, maxTagCount, size = "md", status, placeholder = "Select an option", renderLabel, renderOption, renderTag, renderCreateLabel = defaultRenderCreateLabel, emptyContent = "No options found", loadingContent = "Loading…", messages, sheetThreshold = 10, sheetTitle, inputProps, portalProps, positionerProps, popupProps, className, style, id: idProp, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, inputValue, defaultInputValue, onInputValueChange, disabled, readOnly, autoHighlight = true, ...rootProps }) {
+function ComboboxSelect({ options, multiple, value, defaultValue, onValueChange, labelField = "label", valueField = "value", disabledField = "disabled", fallbackOption, filterable = true, filter, remote = false, onSearch, loading = false, create = false, creatable, onCreate, clearable = false, showArrow = true, clearFilterAfterSelect = true, onClear, maxTagCount, size = "md", status, placeholder = "Select an option", renderLabel, renderOption, renderTag, renderCreateLabel = defaultRenderCreateLabel, emptyContent = "No options found", loadingContent = "Loading…", messages, listMaxHeight, inputProps, portalProps, positionerProps, popupProps, className, style, id: idProp, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, inputValue, defaultInputValue, onInputValueChange, disabled, readOnly, autoHighlight = true, onOpenChange, ...rootProps }) {
 	const generatedId = useId();
 	const id = idProp ?? generatedId;
 	const { resolvedMode } = useTheme();
@@ -288,15 +237,18 @@ function ComboboxSelect({ options, multiple, value, defaultValue, onValueChange,
 	const css = `r-combobox-select r-combobox-select--${size}${resolvedMode === "dark" ? " r-combobox-select--dark" : ""}`;
 	const tagLimit = maxTagCount === void 0 ? Infinity : Math.max(0, Math.floor(maxTagCount));
 	const inputClassName = ["r-combobox-select__input", typeof inputProps?.className === "string" ? inputProps.className : null].filter(Boolean).join(" ");
+	const phone = usePhoneMedia();
 	const controlClassName = [
 		css,
 		"r-combobox-select__control has-focus-visible:shadow-focus",
+		phone ? "r-combobox-select__control--phone" : null,
 		className
 	].filter(Boolean).join(" ");
 	const positionerClassName = ["r-combobox-select__positioner", typeof positionerProps?.className === "string" ? positionerProps.className : null].filter(Boolean).join(" ");
 	const popupClassName = [
 		css,
 		"r-combobox-select__popup",
+		phone ? "r-combobox-select__popup--anchored" : null,
 		typeof popupProps?.className === "string" ? popupProps.className : null
 	].filter(Boolean).join(" ");
 	const inputRef = ref ?? inputProps?.ref;
@@ -468,293 +420,30 @@ function ComboboxSelect({ options, multiple, value, defaultValue, onValueChange,
 		]
 	});
 	const valueChange = handleValueChange;
-	const mode = resolveComboboxSelectMode({
-		phone: usePhoneMedia(),
-		optionCount: countSelectableOptions(normalized.groups),
-		sheetThreshold,
-		create: Boolean(create || creatable),
-		remote
-	});
+	const listHeight = typeof listMaxHeight === "number" ? `${listMaxHeight}px` : listMaxHeight;
 	const fieldRef = useRef(null);
-	const triggerRef = useRef(null);
-	const searchInputRef = useRef(null);
-	const [uncontrolledPhoneOpen, setUncontrolledPhoneOpen] = useState(Boolean(rootProps.defaultOpen));
-	const phoneOpen = rootProps.open ?? uncontrolledPhoneOpen;
 	const [listSide, setListSide] = useState("bottom");
-	const [fieldLabel, setFieldLabel] = useState("");
-	const sheetNamed = sheetTitle != null || Boolean(inputLabel);
-	useLayoutEffect(() => {
-		if (mode !== "sheet" || !phoneOpen || sheetNamed) return;
-		setFieldLabel(readFieldLabel(triggerRef.current, inputLabelledBy));
-	}, [
-		mode,
-		phoneOpen,
-		sheetNamed,
-		inputLabelledBy
-	]);
-	const setSearchInput = useCallback((element) => {
-		searchInputRef.current = element;
-		assignRef(inputRef, element);
-	}, [inputRef]);
-	const onOpenChangeProp = rootProps.onOpenChange;
-	const openProp = rootProps.open;
 	const groups = normalized.groups;
-	const handlePhoneOpenChange = useCallback((next, details) => {
-		onOpenChangeProp?.(next, details);
-		if (details.isCanceled) return;
-		if (next && mode === "list") setListSide(measureListSide(fieldRef.current, groups));
-		if (!next && mode === "sheet") handleInputValueChange("", syntheticDetails("input-clear", details.event));
-		if (openProp === void 0) setUncontrolledPhoneOpen(next);
+	const handleOpenChange = useCallback((next, details) => {
+		onOpenChange?.(next, details);
+		if (next && phone && !details.isCanceled) setListSide(measureListSide(fieldRef.current, groups, listHeight ?? "16rem"));
 	}, [
-		onOpenChangeProp,
-		openProp,
-		mode,
+		onOpenChange,
+		phone,
 		groups,
-		handleInputValueChange
-	]);
-	const handleSheetValueChange = useCallback((next, details) => {
-		handleValueChange(next, details);
-		if (!multiple && !details.isCanceled) handlePhoneOpenChange(false, details);
-	}, [
-		handleValueChange,
-		multiple,
-		handlePhoneOpenChange
+		listHeight
 	]);
-	const handlePhoneClear = useCallback((event) => {
-		handleValueChange(multiple ? [] : null, syntheticDetails("clear-press", event.nativeEvent));
-	}, [handleValueChange, multiple]);
-	const focusSearchInput = useCallback(() => searchInputRef.current, []);
-	if (mode !== "field") {
-		const placeholderText = /* @__PURE__ */ jsx("span", {
-			className: "r-combobox-select__placeholder",
-			children: placeholder
-		});
-		const phoneValue = multiple ? selected.length ? /* @__PURE__ */ jsxs("span", {
-			className: "r-combobox-select__chips",
-			children: [selected.slice(0, tagLimit).map((record) => /* @__PURE__ */ jsx("span", {
-				className: "r-combobox-select__chip",
-				children: /* @__PURE__ */ jsx("span", {
-					className: "r-combobox-select__text",
-					children: record.option === void 0 ? record.label : renderTag?.(record.option) ?? recordLabel(record, renderLabel)
-				})
-			}, optionKey(record.value))), overflow]
-		}) : placeholderText : selected[0] ? /* @__PURE__ */ jsx("span", {
-			className: "r-combobox-select__value",
-			children: selected[0].label
-		}) : placeholderText;
-		const phoneClear = clearable && selected.length > 0 && !disabled && !readOnly ? /* @__PURE__ */ jsx("button", {
-			type: "button",
-			className: "r-combobox-select__action r-combobox-select__clear",
-			"aria-label": strings.clear,
-			onClick: handlePhoneClear,
-			children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
-		}) : null;
-		const phoneActions = /* @__PURE__ */ jsxs("span", {
-			className: "r-combobox-select__actions",
-			children: [
-				loadingIndicator,
-				phoneClear,
-				showArrow ? /* @__PURE__ */ jsx("span", {
-					className: "r-combobox-select__action r-combobox-select__arrow",
-					"aria-hidden": true,
-					children: /* @__PURE__ */ jsx(ChevronDown, {})
-				}) : null
-			]
-		});
-		const phoneControlClassName = [
-			css,
-			"r-combobox-select__control r-combobox-select__control--trigger has-focus-visible:shadow-focus",
-			className
-		].filter(Boolean).join(" ");
-		const triggerProps = {
-			ref: triggerRef,
-			id,
-			"data-slot": "combobox-select-trigger",
-			className: "r-combobox-select__trigger",
-			"aria-label": inputLabel,
-			"aria-labelledby": inputLabelledBy,
-			"aria-describedby": inputDescribedBy,
-			"aria-invalid": inputInvalid
-		};
-		const field = (trigger) => /* @__PURE__ */ jsxs("div", {
-			ref: fieldRef,
-			"data-slot": "combobox-select",
-			"data-status": status,
-			"data-disabled": disabled || void 0,
-			"data-readonly": readOnly || void 0,
-			"data-popup-open": phoneOpen || void 0,
-			className: phoneControlClassName,
-			style,
-			children: [trigger, phoneActions]
+	const popupPropsStyle = popupProps?.style;
+	const popupStyle = useMemo(() => {
+		if (listHeight === void 0) return popupPropsStyle;
+		return (state) => ({
+			...typeof popupPropsStyle === "function" ? popupPropsStyle(state) : popupPropsStyle,
+			"--combobox-select-list-max-height": listHeight
 		});
-		if (mode === "list") {
-			const anchoredPopupClassName = `${popupClassName} r-combobox-select__popup--anchored`;
-			const hasOptions = normalized.groups.some((group) => group.items.length > 0);
-			return /* @__PURE__ */ jsxs(Select.Root, {
-				multiple,
-				value: controlValue,
-				onValueChange: valueChange,
-				open: phoneOpen,
-				onOpenChange: handlePhoneOpenChange,
-				onOpenChangeComplete: rootProps.onOpenChangeComplete,
-				modal: false,
-				name: rootProps.name,
-				form: rootProps.form,
-				required: rootProps.required,
-				autoComplete: rootProps.autoComplete,
-				disabled,
-				readOnly,
-				itemToStringLabel,
-				itemToStringValue,
-				isItemEqualToValue,
-				children: [field(/* @__PURE__ */ jsx(Select.Trigger, {
-					...triggerProps,
-					children: phoneValue
-				})), /* @__PURE__ */ jsx(Select.Portal, {
-					...scopedPortalProps,
-					children: /* @__PURE__ */ jsx(Select.Positioner, {
-						anchor: fieldRef,
-						side: listSide,
-						align: "start",
-						sideOffset: 4,
-						alignItemWithTrigger: false,
-						collisionAvoidance: PHONE_LIST_COLLISION,
-						className: positionerClassName,
-						children: /* @__PURE__ */ jsxs(Select.Popup, {
-							"data-slot": "combobox-select-popup",
-							className: anchoredPopupClassName,
-							children: [
-								loading ? /* @__PURE__ */ jsx("div", {
-									role: "status",
-									className: "r-combobox-select__message",
-									children: loadingContent
-								}) : null,
-								/* @__PURE__ */ jsx(Select.List, {
-									className: "r-combobox-select__list",
-									"aria-busy": loading,
-									children: normalized.groups.map((group) => /* @__PURE__ */ jsxs(Select.Group, { children: [group.label == null ? null : /* @__PURE__ */ jsx(Select.GroupLabel, {
-										className: "r-combobox-select__group-label",
-										children: group.label
-									}), group.items.map((record) => renderSelectOption({
-										record,
-										selected: selected.some((item) => item.value === record.value),
-										loading,
-										renderLabel,
-										renderOption
-									}))] }, group.key))
-								}),
-								!hasOptions ? emptyMessage : null
-							]
-						})
-					})
-				})]
-			});
-		}
-		const titleId = `${id}-sheet-title`;
-		const sheetCss = `r-combobox-select r-combobox-select--md${resolvedMode === "dark" ? " r-combobox-select--dark" : ""} r-combobox-select__sheet`;
-		const hiddenInputs = rootProps.name ? selectedKeys.map((key) => /* @__PURE__ */ jsx("input", {
-			type: "hidden",
-			name: rootProps.name,
-			form: rootProps.form,
-			value: String(key),
-			disabled
-		}, optionKey(key))) : null;
-		return /* @__PURE__ */ jsxs(Drawer, {
-			open: phoneOpen,
-			onOpenChange: handlePhoneOpenChange,
-			onOpenChangeComplete: rootProps.onOpenChangeComplete,
-			children: [
-				field(/* @__PURE__ */ jsx(DrawerTrigger, {
-					...triggerProps,
-					disabled,
-					role: "combobox",
-					"aria-haspopup": "dialog",
-					"aria-expanded": phoneOpen,
-					"aria-readonly": readOnly || void 0,
-					"aria-required": rootProps.required || void 0,
-					children: phoneValue
-				})),
-				hiddenInputs,
-				/* @__PURE__ */ jsx(DrawerContent, {
-					portalProps,
-					"data-slot": "combobox-select-sheet",
-					className: "r-combobox-select__sheet-popup",
-					initialFocus: create || creatable ? focusSearchInput : void 0,
-					children: /* @__PURE__ */ jsxs("div", {
-						className: sheetCss,
-						children: [
-							/* @__PURE__ */ jsxs(DrawerHeader, {
-								className: "r-combobox-select__sheet-header",
-								children: [/* @__PURE__ */ jsx(DrawerTitle, {
-									id: titleId,
-									className: "r-combobox-select__sheet-title",
-									children: sheetTitle ?? inputLabel ?? (fieldLabel || placeholder)
-								}), /* @__PURE__ */ jsx(DrawerClose, { "aria-label": strings.close })]
-							}),
-							/* @__PURE__ */ jsxs(Combobox.Root, {
-								inline: true,
-								multiple,
-								disabled,
-								readOnly,
-								items,
-								value: controlValue,
-								onValueChange: handleSheetValueChange,
-								inputValue,
-								defaultInputValue,
-								onInputValueChange: handleInputValueChange,
-								filter: filterOptions,
-								itemToStringLabel,
-								itemToStringValue,
-								isItemEqualToValue,
-								autoHighlight,
-								children: [/* @__PURE__ */ jsx("div", {
-									className: "r-combobox-select__sheet-search",
-									children: /* @__PURE__ */ jsxs(Combobox.InputGroup, {
-										className: "r-combobox-select__control has-focus-visible:shadow-focus",
-										children: [
-											/* @__PURE__ */ jsx(Search, {
-												className: "r-combobox-select__search-icon",
-												"aria-hidden": true
-											}),
-											/* @__PURE__ */ jsx(Combobox.Input, {
-												...inputProps,
-												ref: setSearchInput,
-												id: `${id}-search`,
-												"data-slot": "combobox-select-input",
-												className: inputClassName,
-												"aria-labelledby": titleId,
-												placeholder: strings.search,
-												readOnly: inputReadOnly,
-												enterKeyHint: "search"
-											}),
-											loadingIndicator
-										]
-									})
-								}), /* @__PURE__ */ jsxs(DrawerBody, {
-									className: "r-combobox-select__sheet-body",
-									children: [
-										/* @__PURE__ */ jsx(Combobox.Status, { children: loadingMessage }),
-										/* @__PURE__ */ jsx(Combobox.List, {
-											className: "r-combobox-select__list",
-											"aria-busy": loading,
-											children: renderGroup
-										}),
-										/* @__PURE__ */ jsx(Combobox.Empty, { children: emptyMessage })
-									]
-								})]
-							}),
-							multiple ? /* @__PURE__ */ jsx(DrawerFooter, { children: /* @__PURE__ */ jsx(DrawerActions, { children: /* @__PURE__ */ jsx(DrawerClose, {
-								render: /* @__PURE__ */ jsx(Button$1, { size: "lg" }),
-								children: strings.done
-							}) }) }) : null
-						]
-					})
-				})
-			]
-		});
-	}
+	}, [listHeight, popupPropsStyle]);
 	return /* @__PURE__ */ jsxs(Combobox.Root, {
 		...rootProps,
+		onOpenChange: handleOpenChange,
 		id,
 		multiple,
 		disabled,
@@ -771,6 +460,7 @@ function ComboboxSelect({ options, multiple, value, defaultValue, onValueChange,
 		isItemEqualToValue,
 		autoHighlight,
 		children: [/* @__PURE__ */ jsxs(Combobox.InputGroup, {
+			ref: fieldRef,
 			"data-slot": "combobox-select",
 			"data-status": status,
 			className: controlClassName,
@@ -781,12 +471,18 @@ function ComboboxSelect({ options, multiple, value, defaultValue, onValueChange,
 			children: /* @__PURE__ */ jsx(Combobox.Positioner, {
 				sideOffset: 4,
 				align: "start",
+				collisionPadding: 8,
+				...phone ? {
+					side: listSide,
+					collisionAvoidance: PHONE_LIST_COLLISION
+				} : null,
 				...positionerProps,
 				className: positionerClassName,
 				children: /* @__PURE__ */ jsxs(Combobox.Popup, {
 					initialFocus: false,
 					finalFocus: false,
 					...popupProps,
+					style: popupStyle,
 					"data-slot": "combobox-select-popup",
 					className: popupClassName,
 					children: [
@@ -938,7 +634,7 @@ const comment = tv({
 		cardTrigger: [
 			"absolute -inset-px z-10 cursor-pointer",
 			"rounded-container border-0 bg-transparent p-0",
-			"hover:bg-fill-pressed active:bg-fill-pressed",
+			"hover:bg-fill-row-hover active:bg-fill-pressed",
 			"outline-none focus-visible:shadow-focus"
 		],
 		cardQuote: ["sr-only"],
@@ -1410,4 +1106,4 @@ function useCommentMarginFits(element, { minWidth = 784 } = {}) {
 	return desktop && element !== null && width >= minWidth;
 }
 //#endregion
-export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits };
+export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botiverse/raft-ui",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",