@zovaris/sephiro 0.8.1 → 0.10.0

package/dist/index.js

@@ -133,16 +133,32 @@ function usePortaled() {
 	}, []);
 	return portaled;
 }
+function anchorArea(side, align) {
+	if (side === "left" || side === "right") return `${side} span-all`;
+	return `${side} ${align === "center" ? "span-all" : align === "start" ? "span-right" : "span-left"}`;
+}
 /**
-* Measures trigger and content, then pins the overlay to fixed coordinates.
-* Flips, clamps, and re-measures on scroll (capture, so inner scrollers
-* count) and resize while active.
+* Uses native CSS anchors when supported; otherwise measures fixed coordinates.
+* Native anchors follow scrolling without JS; older browsers re-measure on
+* scroll (including inner scrollers). Both paths react to size changes.
 */
 function useOverlayPosition(triggerRef, contentRef, active, placement = {}) {
 	const { side = "bottom", align = "start", offset = 4, padding = 8, matchWidth = false } = placement;
 	const frameRef = useRef(null);
+	const anchorName = `--sph-overlay-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 	useIsoLayoutEffect(() => {
 		if (!active) return;
+		const trigger = triggerRef.current;
+		const content = contentRef.current;
+		if (!trigger || !content) return;
+		inheritMotionScope(trigger, content);
+		const native = typeof CSS !== "undefined" && CSS.supports("anchor-name", anchorName) && CSS.supports("position-area", "bottom span-right") && CSS.supports("position-try-fallbacks", "flip-block");
+		const previousAnchor = trigger.style.getPropertyValue("anchor-name");
+		if (native) {
+			trigger.style.setProperty("anchor-name", previousAnchor && previousAnchor !== "none" ? `${previousAnchor}, ${anchorName}` : anchorName);
+			content.style.setProperty("position-anchor", anchorName);
+			content.style.setProperty("position-visibility", "anchors-visible");
+		}
 		const update = () => {
 			frameRef.current = null;
 			const trigger = triggerRef.current;
@@ -164,32 +180,65 @@ function useOverlayPosition(triggerRef, contentRef, active, placement = {}) {
 				padding
 			});
 			const style = content.style;
-			style.left = `${resolved.left}px`;
-			style.top = `${resolved.top}px`;
-			style.right = "auto";
-			style.bottom = "auto";
-			style.translate = "none";
+			if (native) {
+				style.inset = "auto";
+				style.translate = "none";
+				style.setProperty("position-area", anchorArea(resolved.side, align));
+				style.setProperty("position-try-fallbacks", side === "left" || side === "right" ? "flip-inline, flip-block, flip-inline flip-block" : "flip-block, flip-inline, flip-block flip-inline");
+				style.margin = `${padding}px`;
+				if (side === "top" || side === "bottom") {
+					if (align === "start") style.marginLeft = "0";
+					if (align === "end") style.marginRight = "0";
+				}
+				style.setProperty(`margin-${resolved.side === "bottom" ? "top" : resolved.side === "top" ? "bottom" : resolved.side === "right" ? "left" : "right"}`, `${offset}px`);
+				style.justifySelf = side === "left" || side === "right" ? "normal" : align === "center" ? "anchor-center" : align;
+				style.alignSelf = side === "left" || side === "right" ? "anchor-center" : "normal";
+			} else {
+				style.left = `${resolved.left}px`;
+				style.top = `${resolved.top}px`;
+				style.right = "auto";
+				style.bottom = "auto";
+				style.translate = "none";
+			}
 			style.transformOrigin = overlayOrigin(resolved.side, align);
 			content.dataset.side = resolved.side;
 		};
 		const schedule = () => {
 			if (frameRef.current === null) frameRef.current = requestAnimationFrame(update);
 		};
-		inheritMotionScope(triggerRef.current, contentRef.current);
 		update();
+		const observer = new ResizeObserver(schedule);
+		observer.observe(trigger);
+		observer.observe(content);
 		window.addEventListener("resize", schedule);
-		document.addEventListener("scroll", schedule, {
+		if (!native) document.addEventListener("scroll", schedule, {
 			capture: true,
 			passive: true
 		});
 		return () => {
+			observer.disconnect();
 			window.removeEventListener("resize", schedule);
 			document.removeEventListener("scroll", schedule, { capture: true });
 			if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
+			frameRef.current = null;
+			if (native) {
+				if (previousAnchor) trigger.style.setProperty("anchor-name", previousAnchor);
+				else trigger.style.removeProperty("anchor-name");
+				for (const name of [
+					"position-anchor",
+					"position-area",
+					"position-try-fallbacks",
+					"position-visibility",
+					"margin",
+					"justify-self",
+					"align-self"
+				]) content.style.removeProperty(name);
+			}
 		};
 	}, [
 		active,
 		align,
+		anchorName,
 		matchWidth,
 		offset,
 		padding,
@@ -343,13 +392,23 @@ function Avatar({ src, name, size = "md", status, className, ...props }) {
 }
 //#endregion
 //#region src/atoms/Badge/index.tsx
-function Badge({ variant = "neutral", size = "sm", className, children, ...props }) {
-	return /* @__PURE__ */ jsx("span", {
+function Badge({ variant = "neutral", size = "sm", onRemove, removeLabel, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
 		...node(props),
 		className: cn("sph-badge", className),
 		"data-variant": variant,
 		"data-size": size,
-		children: node(children)
+		"data-removable": onRemove ? true : void 0,
+		children: [node(children), onRemove ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "sph-badge__remove",
+			"aria-label": removeLabel ?? (typeof children === "string" ? `Remove ${children}` : "Remove"),
+			onClick: onRemove,
+			children: /* @__PURE__ */ jsx(XIcon, {
+				size: 10,
+				"aria-hidden": "true"
+			})
+		}) : null]
 	});
 }
 //#endregion
@@ -466,10 +525,11 @@ function Input({ invalid = false, size = "md", className, "aria-invalid": ariaIn
 }
 //#endregion
 //#region src/atoms/Kbd/index.tsx
-function Kbd({ keys, className }) {
+function Kbd({ keys, variant = "solid", className }) {
 	const caps = Array.isArray(keys) ? keys : [keys];
 	return /* @__PURE__ */ jsx("kbd", {
 		className: cn("sph-kbd", className),
+		"data-variant": variant,
 		children: caps.map((cap, index) => /* @__PURE__ */ jsx("kbd", {
 			className: "sph-kbd__key",
 			children: node(cap)
@@ -677,14 +737,14 @@ function Accordion({ items, type = "single", value, defaultValue, onValueChange,
 	});
 }
 //#endregion
-//#region src/molecules/Alert/index.tsx
-const alertIcons = {
-	info: /* @__PURE__ */ jsx(InfoIcon, { size: 16 }),
-	success: /* @__PURE__ */ jsx(CheckIcon, { size: 16 }),
-	warning: /* @__PURE__ */ jsx(WarningIcon, { size: 16 }),
-	danger: /* @__PURE__ */ jsx(XIcon, { size: 16 })
+//#region src/molecules/Notice/index.tsx
+const noticeIcons = {
+	info: /* @__PURE__ */ jsx(InfoIcon, { size: 14 }),
+	success: /* @__PURE__ */ jsx(CheckIcon, { size: 14 }),
+	warning: /* @__PURE__ */ jsx(WarningIcon, { size: 14 }),
+	danger: /* @__PURE__ */ jsx(XIcon, { size: 14 })
 };
-function Alert({ variant = "info", title, children, dismissible = false, onDismiss, className, role, ...props }) {
+function Notice({ variant = "info", title, children, dismissible = false, onDismiss, className, role, ...props }) {
 	const rootRef = useRef(null);
 	const timerRef = useRef(void 0);
 	const [dismissing, setDismissing] = useState(false);
@@ -708,30 +768,30 @@ function Alert({ variant = "info", title, children, dismissible = false, onDismi
 	return /* @__PURE__ */ jsxs("div", {
 		ref: rootRef,
 		...node(props),
-		className: cn("sph-alert", className),
+		className: cn("sph-notice", className),
 		"data-variant": variant,
 		"data-state": dismissing ? "closed" : "open",
 		role: role ?? (variant === "danger" ? "alert" : "status"),
 		"aria-live": role ? void 0 : variant === "danger" ? "assertive" : "polite",
 		children: [
 			/* @__PURE__ */ jsx("span", {
-				className: "sph-alert__icon",
+				className: "sph-notice__icon",
 				"aria-hidden": "true",
-				children: alertIcons[variant]
+				children: noticeIcons[variant]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "sph-alert__body",
+				className: "sph-notice__body",
 				children: [title !== void 0 && /* @__PURE__ */ jsx("p", {
-					className: "sph-alert__title",
+					className: "sph-notice__title",
 					children: node(title)
 				}), children !== void 0 && /* @__PURE__ */ jsx("div", {
-					className: "sph-alert__content",
+					className: "sph-notice__content",
 					children: node(children)
 				})]
 			}),
 			dismissible && /* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: "sph-alert__dismiss",
+				className: "sph-notice__dismiss",
 				"aria-label": "Dismiss notification",
 				onClick: requestDismiss,
 				children: /* @__PURE__ */ jsx(XIcon, {
@@ -742,7 +802,6 @@ function Alert({ variant = "info", title, children, dismissible = false, onDismi
 		]
 	});
 }
-const Notice = Alert;
 //#endregion
 //#region src/molecules/Attachment/index.tsx
 const IMAGE_EXT = [
@@ -1146,6 +1205,7 @@ function Calendar({ value, onValueChange, month, onMonthChange, min, max, weekSt
 		return /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			role: "gridcell",
+			className: "sph-calendar__day",
 			"data-date": day,
 			"data-today": day === today || void 0,
 			"data-in-range": inSpan || void 0,
@@ -1833,8 +1893,20 @@ function ContextMenu({ children, items, onSelect, disabled = false, label = "Con
 			const target = event.target;
 			if (!rootRef.current?.contains(target) && !contentRef.current?.contains(target)) close();
 		};
+		const handleScroll = (event) => {
+			if (!contentRef.current?.contains(event.target)) close();
+		};
 		document.addEventListener("pointerdown", handlePointerDown);
-		return () => document.removeEventListener("pointerdown", handlePointerDown);
+		document.addEventListener("scroll", handleScroll, {
+			capture: true,
+			passive: true
+		});
+		window.addEventListener("resize", close);
+		return () => {
+			document.removeEventListener("pointerdown", handlePointerDown);
+			document.removeEventListener("scroll", handleScroll, { capture: true });
+			window.removeEventListener("resize", close);
+		};
 	}, [open]);
 	useEffect(() => {
 		if (!open) return;
@@ -1847,7 +1919,12 @@ function ContextMenu({ children, items, onSelect, disabled = false, label = "Con
 		const el = contentRef.current;
 		if (!present || !portaled || !el) return;
 		inheritScope(rootRef.current, el);
-		const rect = el.getBoundingClientRect();
+		const rect = {
+			right: coords.x + el.offsetWidth,
+			bottom: coords.y + el.offsetHeight,
+			width: el.offsetWidth,
+			height: el.offsetHeight
+		};
 		const margin = 8;
 		const flipX = rect.right > window.innerWidth - margin;
 		const flipY = rect.bottom > window.innerHeight - margin;
@@ -1855,7 +1932,11 @@ function ContextMenu({ children, items, onSelect, disabled = false, label = "Con
 		if (flipY) el.style.top = `${Math.max(margin, coords.y - rect.height)}px`;
 		el.style.transformOrigin = `${flipX ? "right" : "left"} ${flipY ? "bottom" : "top"}`;
 		el.dataset.side = flipY ? "top" : "bottom";
-	}, [present, coords]);
+	}, [
+		present,
+		portaled,
+		coords
+	]);
 	return /* @__PURE__ */ jsxs("div", {
 		...node(props),
 		ref: rootRef,
@@ -1954,7 +2035,7 @@ const modals = createLayerStack();
 * themselves (clear a query, pop a level) before closing.
 */
 function useFocusTrap(ref, active, initial, options = {}) {
-	const { fallbackToContainer = false } = options;
+	const { fallbackToContainer = false, trap = true } = options;
 	const initialRef = useRef(initial);
 	useEffect(() => {
 		initialRef.current = initial;
@@ -1969,10 +2050,10 @@ function useFocusTrap(ref, active, initial, options = {}) {
 			const resolve = initialRef.current;
 			const explicit = typeof resolve === "function" ? resolve() : resolve?.current;
 			if (!explicit && container.contains(document.activeElement)) return;
-			(explicit ?? focusable(container)[0] ?? (fallbackToContainer ? container : void 0))?.focus();
+			(explicit ?? focusable(container)[0] ?? (fallbackToContainer ? container : void 0))?.focus({ preventScroll: true });
 		});
 		const handleKeyDown = (event) => {
-			if (event.key !== "Tab" || traps.top() !== layer) return;
+			if (!trap || event.key !== "Tab" || traps.top() !== layer) return;
 			const container = ref.current;
 			const focused = document.activeElement;
 			const lost = !focused || focused === document.body;
@@ -1990,7 +2071,8 @@ function useFocusTrap(ref, active, initial, options = {}) {
 	}, [
 		active,
 		fallbackToContainer,
-		ref
+		ref,
+		trap
 	]);
 }
 function canReceiveFocus(element) {
@@ -2091,11 +2173,13 @@ function inertTargets(keep, root, owned = /* @__PURE__ */ new Set()) {
 }
 const inerted = /* @__PURE__ */ new Set();
 function syncInert() {
-	const top = modals.top()?.element;
+	const layer = modals.top();
+	const top = layer?.element;
+	const root = layer?.root ?? document.body;
 	const next = /* @__PURE__ */ new Set();
-	if (top && document.body.contains(top)) {
-		const regions = Array.from(document.body.querySelectorAll(LIVE_REGION_SELECTOR)).filter((region) => !region.contains(top) && !top.contains(region));
-		for (const element of inertTargets([top, ...regions], document.body, inerted)) next.add(element);
+	if (top && root.contains(top)) {
+		const regions = Array.from(root.querySelectorAll(LIVE_REGION_SELECTOR)).filter((region) => !region.contains(top) && !top.contains(region));
+		for (const element of inertTargets([top, ...regions], root, inerted)) next.add(element);
 	}
 	for (const element of inerted) if (!next.has(element)) {
 		element.removeAttribute("inert");
@@ -2106,13 +2190,16 @@ function syncInert() {
 		inerted.add(element);
 	}
 }
-function useModalLayer(ref, active) {
+function useModalLayer(ref, active, scope = "page") {
 	const layerRef = useRef(null);
 	const handle = useRef(null);
 	handle.current ??= { isTopmost: () => layerRef.current !== null && modals.top() === layerRef.current };
 	useEffect(() => {
 		if (!active) return;
-		const layer = { element: ref.current };
+		const layer = {
+			element: ref.current,
+			root: scope === "local" ? ref.current?.closest("[data-sph-modal-scope]") ?? ref.current?.parentElement?.parentElement ?? void 0 : void 0
+		};
 		layerRef.current = layer;
 		const release = modals.push(layer);
 		syncInert();
@@ -2121,24 +2208,40 @@ function useModalLayer(ref, active) {
 			if (layerRef.current === layer) layerRef.current = null;
 			syncInert();
 		};
-	}, [active, ref]);
+	}, [
+		active,
+		ref,
+		scope
+	]);
 	return handle.current;
 }
 //#endregion
 //#region src/molecules/Dialog/index.tsx
-function Dialog({ open, onClose, title, description, children, footer, closeLabel = "Close dialog", closeOnOverlayClick = true, closeOnEscape = true, initialFocus, returnFocus = true, className }) {
+function Dialog({ open, onClose, title, description, children, footer, closeLabel = "Close dialog", closeOnOverlayClick = true, closeOnEscape = true, initialFocus, returnFocus = true, scope = "page", className }) {
 	const id = useId();
 	const titleId = `${id}-title`;
 	const descriptionId = description !== void 0 ? `${id}-description` : void 0;
 	const { present, state, ref: dialogRef } = usePresence(open);
+	const backdropRef = useRef(null);
+	const portaled = usePortaled();
+	useIsoLayoutEffect(() => {
+		if (scope === "page" && present && portaled) inheritScope(document.activeElement, backdropRef.current);
+	}, [
+		present,
+		portaled,
+		scope
+	]);
 	const active = open && present;
-	const layer = useModalLayer(dialogRef, active);
-	useFocusTrap(dialogRef, active, initialFocus, { fallbackToContainer: true });
+	const layer = useModalLayer(dialogRef, active, scope);
+	useFocusTrap(dialogRef, active, initialFocus, {
+		fallbackToContainer: true,
+		trap: scope === "page"
+	});
 	useReturnFocus(present, {
 		ref: dialogRef,
 		returnFocus
 	});
-	useScrollLock(present);
+	useScrollLock(present && scope === "page");
 	useEffect(() => {
 		if (!open || !closeOnEscape) return;
 		const handleKeyDown = (event) => {
@@ -2156,7 +2259,9 @@ function Dialog({ open, onClose, title, description, children, footer, closeLabe
 		open
 	]);
 	if (!present) return null;
-	return /* @__PURE__ */ jsx("div", {
+	const content = /* @__PURE__ */ jsx("div", {
+		ref: backdropRef,
+		"data-scope": scope,
 		className: "sph-dialog__backdrop",
 		"data-state": state,
 		role: "presentation",
@@ -2167,7 +2272,7 @@ function Dialog({ open, onClose, title, description, children, footer, closeLabe
 			ref: dialogRef,
 			className: cn("sph-dialog", className),
 			role: "dialog",
-			"aria-modal": "true",
+			"aria-modal": scope === "page" ? true : void 0,
 			tabIndex: -1,
 			"aria-labelledby": titleId,
 			"aria-describedby": descriptionId,
@@ -2207,22 +2312,35 @@ function Dialog({ open, onClose, title, description, children, footer, closeLabe
 			]
 		})
 	});
+	return scope === "page" && portaled ? createPortal(content, document.body) : content;
 }
 //#endregion
 //#region src/molecules/Drawer/index.tsx
-function Drawer({ open, onClose, title, description, children, footer, side = "right", size = "md", closeLabel = "Close panel", closeOnOverlayClick = true, closeOnEscape = true, initialFocus, returnFocus = true, className }) {
+function Drawer({ open, onClose, title, description, children, footer, side = "right", size = "md", closeLabel = "Close panel", closeOnOverlayClick = true, closeOnEscape = true, initialFocus, returnFocus = true, scope = "page", className }) {
 	const id = useId();
 	const titleId = `${id}-title`;
 	const descriptionId = description !== void 0 ? `${id}-description` : void 0;
 	const { present, state, ref: drawerRef } = usePresence(open);
+	const backdropRef = useRef(null);
+	const portaled = usePortaled();
+	useIsoLayoutEffect(() => {
+		if (scope === "page" && present && portaled) inheritScope(document.activeElement, backdropRef.current);
+	}, [
+		present,
+		portaled,
+		scope
+	]);
 	const active = open && present;
-	const layer = useModalLayer(drawerRef, active);
-	useFocusTrap(drawerRef, active, initialFocus, { fallbackToContainer: true });
+	const layer = useModalLayer(drawerRef, active, scope);
+	useFocusTrap(drawerRef, active, initialFocus, {
+		fallbackToContainer: true,
+		trap: scope === "page"
+	});
 	useReturnFocus(present, {
 		ref: drawerRef,
 		returnFocus
 	});
-	useScrollLock(present);
+	useScrollLock(present && scope === "page");
 	useEffect(() => {
 		if (!open || !closeOnEscape) return;
 		const handleKeyDown = (event) => {
@@ -2240,7 +2358,9 @@ function Drawer({ open, onClose, title, description, children, footer, side = "r
 		open
 	]);
 	if (!present) return null;
-	return /* @__PURE__ */ jsx("div", {
+	const content = /* @__PURE__ */ jsx("div", {
+		ref: backdropRef,
+		"data-scope": scope,
 		className: "sph-drawer__backdrop",
 		"data-state": state,
 		"data-side": side,
@@ -2254,7 +2374,7 @@ function Drawer({ open, onClose, title, description, children, footer, side = "r
 			"data-side": side,
 			"data-size": size,
 			role: "dialog",
-			"aria-modal": "true",
+			"aria-modal": scope === "page" ? true : void 0,
 			tabIndex: -1,
 			"aria-labelledby": titleId,
 			"aria-describedby": descriptionId,
@@ -2294,6 +2414,7 @@ function Drawer({ open, onClose, title, description, children, footer, side = "r
 			]
 		})
 	});
+	return scope === "page" && portaled ? createPortal(content, document.body) : content;
 }
 //#endregion
 //#region src/molecules/FieldMessage/index.tsx
@@ -3469,6 +3590,8 @@ function firstEnabled(items) {
 }
 function Tabs({ items, value, defaultValue, onValueChange, children, ariaLabel = "Tabs", orientation = "horizontal", className }) {
 	const generatedId = useId();
+	const listRef = useRef(null);
+	const [measured, setMeasured] = useState(false);
 	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? firstEnabled(items) ?? "");
 	const activeValue = value ?? uncontrolledValue;
 	const activeIndex = Math.max(0, items.findIndex((item) => item.value === activeValue));
@@ -3496,15 +3619,44 @@ function Tabs({ items, value, defaultValue, onValueChange, children, ariaLabel =
 		}
 	};
 	const panelId = `${generatedId}-panel`;
+	useIsoLayoutEffect(() => {
+		const list = listRef.current;
+		if (!list) return;
+		const update = () => {
+			const tab = list.querySelectorAll("[role=\"tab\"]")[activeIndex];
+			if (!tab) return;
+			const listRect = list.getBoundingClientRect();
+			const tabRect = tab.getBoundingClientRect();
+			const vertical = orientation === "vertical";
+			list.style.setProperty("--sph-tabs-indicator-at", `${(vertical ? tabRect.top - listRect.top : tabRect.left - listRect.left).toFixed(2)}px`);
+			list.style.setProperty("--sph-tabs-indicator-size", `${(vertical ? tabRect.height : tabRect.width).toFixed(2)}px`);
+			setMeasured(true);
+		};
+		update();
+		if (typeof ResizeObserver === "undefined") {
+			window.addEventListener("resize", update);
+			return () => window.removeEventListener("resize", update);
+		}
+		const observer = new ResizeObserver(update);
+		observer.observe(list);
+		for (const tab of list.querySelectorAll("[role='tab']")) observer.observe(tab);
+		return () => observer.disconnect();
+	}, [
+		activeIndex,
+		items,
+		orientation
+	]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("sph-tabs", className),
 		"data-orientation": orientation,
-		children: [/* @__PURE__ */ jsx("div", {
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: listRef,
 			className: "sph-tabs__list",
 			role: "tablist",
 			"aria-label": ariaLabel,
 			"aria-orientation": orientation,
-			children: items.map((item, index) => {
+			"data-measured": measured || void 0,
+			children: [items.map((item, index) => {
 				const selected = item.value === activeValue;
 				return /* @__PURE__ */ jsx("button", {
 					id: `${generatedId}-${index}`,
@@ -3520,7 +3672,10 @@ function Tabs({ items, value, defaultValue, onValueChange, children, ariaLabel =
 					onKeyDown: (event) => move(event, index),
 					children: node(item.label)
 				}, item.value);
-			})
+			}), /* @__PURE__ */ jsx("span", {
+				className: "sph-tabs__indicator",
+				"aria-hidden": "true"
+			})]
 		}), activeItem && (activeItem.content !== void 0 || children !== void 0) && /* @__PURE__ */ jsx("div", {
 			id: panelId,
 			className: "sph-tabs__panel",
@@ -4419,7 +4574,13 @@ function CommandPalette({ open, onOpenChange, items, onSelect, placeholder = "Ty
 	]);
 	useEffect(() => {
 		if (!visible || active < 0) return;
-		(trackRef.current?.querySelector("[data-active=\"true\"]"))?.scrollIntoView({ block: "nearest" });
+		const option = trackRef.current?.querySelector("[data-active=\"true\"]");
+		const list = innerRef.current;
+		if (!option || !list) return;
+		const top = option.offsetTop;
+		const bottom = top + option.offsetHeight;
+		if (top < list.scrollTop) list.scrollTop = top;
+		else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight;
 	}, [active, visible]);
 	useIsoLayoutEffect(() => {
 		const indicator = indicatorRef.current;
@@ -4427,14 +4588,12 @@ function CommandPalette({ open, onOpenChange, items, onSelect, placeholder = "Ty
 		if (!visible || !indicator || !track || active < 0) return;
 		const option = track.querySelector(`[data-index="${active}"]`);
 		if (!option) return;
-		const trackRect = track.getBoundingClientRect();
-		const optionRect = option.getBoundingClientRect();
 		const first = !indicator.style.width;
 		if (first) indicator.style.transition = "none";
 		indicator.style.opacity = "1";
-		indicator.style.width = `${optionRect.width}px`;
-		indicator.style.height = `${optionRect.height}px`;
-		indicator.style.transform = `translate(${optionRect.left - trackRect.left}px, ${optionRect.top - trackRect.top}px)`;
+		indicator.style.width = `${option.offsetWidth}px`;
+		indicator.style.height = `${option.offsetHeight}px`;
+		indicator.style.transform = `translate(${option.offsetLeft}px, ${option.offsetTop}px)`;
 		if (first) requestAnimationFrame(() => {
 			indicator.style.transition = "";
 		});
@@ -4456,12 +4615,12 @@ function CommandPalette({ open, onOpenChange, items, onSelect, placeholder = "Ty
 			body.style.height = "";
 			return;
 		}
-		const current = body.style.height ? Number.parseFloat(body.style.height) : body.getBoundingClientRect().height;
+		const current = body.style.height ? Number.parseFloat(body.style.height) : body.offsetHeight;
 		if (!body.style.height) {
 			body.style.height = `${current}px`;
 			return;
 		}
-		const target = inner.getBoundingClientRect().height;
+		const target = inner.offsetHeight;
 		if (Math.abs(current - target) < 1) {
 			body.style.height = `${target}px`;
 			return;
@@ -5172,8 +5331,38 @@ function Resizable({ panes, direction = "horizontal", sizes, defaultSizes, onSiz
 	});
 }
 //#endregion
+//#region src/organisms/SidePanel/index.tsx
+function SidePanel({ children, side = "left", width = 280, collapsed, defaultCollapsed = false, onCollapsedChange, peek = false, className, style, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultCollapsed);
+	const isCollapsed = collapsed ?? uncontrolled;
+	const setCollapsed = (next) => {
+		setUncontrolled(next);
+		onCollapsedChange?.(next);
+	};
+	const state = {
+		collapsed: isCollapsed,
+		setCollapsed,
+		toggle: () => setCollapsed(!isCollapsed)
+	};
+	return /* @__PURE__ */ jsx("aside", {
+		...node(props),
+		className: cn("sph-side-panel", className),
+		style: {
+			...style,
+			"--sph-side-panel-width": typeof width === "number" ? `${width}px` : width
+		},
+		"data-side": side,
+		"data-collapsed": isCollapsed || void 0,
+		"data-peek": isCollapsed && peek || void 0,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "sph-side-panel__inner",
+			children: node(typeof children === "function" ? children(state) : children)
+		})
+	});
+}
+//#endregion
 //#region src/organisms/Sidebar/index.tsx
-function Sidebar({ sections, value, defaultValue, onSelect, header, footer, collapsible = false, collapsed, defaultCollapsed = false, onCollapsedChange, ariaLabel = "Primary", className, ...props }) {
+function Sidebar({ sections, value, defaultValue, onSelect, header, footer, side = "left", collapsible = false, collapsed, collapsedMode = "rail", defaultCollapsed = collapsedMode !== "rail", onCollapsedChange, ariaLabel = "Primary", className, ...props }) {
 	const listId = useId();
 	const [uncontrolled, setUncontrolled] = useState(defaultCollapsed);
 	const isCollapsed = collapsed ?? uncontrolled;
@@ -5183,10 +5372,16 @@ function Sidebar({ sections, value, defaultValue, onSelect, header, footer, coll
 		setUncontrolled(next);
 		onCollapsedChange?.(next);
 	};
+	const expandChevron = side === "left" ? "»" : "«";
+	const collapseChevron = side === "left" ? "«" : "»";
+	const showItemTitle = isCollapsed && collapsedMode !== "hover";
 	return /* @__PURE__ */ jsxs("aside", {
 		...node(props),
 		className: cn("sph-sidebar", className),
+		"data-side": side,
 		"data-collapsed": isCollapsed || void 0,
+		"data-collapsed-mode": collapsedMode,
+		"data-rail": isCollapsed || void 0,
 		children: [
 			header !== void 0 && /* @__PURE__ */ jsx("div", {
 				className: "sph-sidebar__header",
@@ -5209,7 +5404,7 @@ function Sidebar({ sections, value, defaultValue, onSelect, header, footer, coll
 							"data-active": isActive || void 0,
 							"aria-current": isActive ? "page" : void 0,
 							disabled: item.disabled,
-							title: isCollapsed && typeof item.label === "string" ? item.label : void 0,
+							title: showItemTitle && typeof item.label === "string" ? item.label : void 0,
 							onClick: () => onSelect?.(item.value),
 							children: [
 								item.icon !== void 0 && /* @__PURE__ */ jsx("span", {
@@ -5247,7 +5442,7 @@ function Sidebar({ sections, value, defaultValue, onSelect, header, footer, coll
 					onClick: toggleCollapsed,
 					children: /* @__PURE__ */ jsx("span", {
 						"aria-hidden": "true",
-						children: isCollapsed ? "»" : "«"
+						children: isCollapsed ? expandChevron : collapseChevron
 					})
 				})]
 			})
@@ -6428,7 +6623,20 @@ function fitOverflowCount({ widths, available, gap, reserve, minVisible = 0 }) {
 	return visible >= total ? total : visible;
 }
 const defaultLabel = (count) => `${count} more`;
-function OverflowPanel({ hidden, offset, render, getKey, onEscape }) {
+const defaultRemoveLabel = (item) => `Remove ${String(item)}`;
+function OverflowRemove({ label, onClick }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "sph-overflow-list__remove",
+		"aria-label": label,
+		onClick,
+		children: /* @__PURE__ */ jsx(XIcon, {
+			size: 13,
+			"aria-hidden": "true"
+		})
+	});
+}
+function OverflowPanel({ hidden, offset, render, getKey, remove, onEscape }) {
 	const panelRef = useRef(null);
 	useFocusTrap(panelRef, true);
 	useEffect(() => {
@@ -6446,13 +6654,13 @@ function OverflowPanel({ hidden, offset, render, getKey, onEscape }) {
 		className: "sph-overflow-list__panel",
 		tabIndex: -1,
 		onKeyDown: handleKeyDown,
-		children: hidden.map((item, position) => /* @__PURE__ */ jsx("li", {
+		children: hidden.map((item, position) => /* @__PURE__ */ jsxs("li", {
 			className: "sph-overflow-list__panel-item",
-			children: node(render(item, offset + position))
+			children: [node(render(item, offset + position)), remove ? node(remove(item, offset + position)) : null]
 		}, getKey(item, offset + position)))
 	});
 }
-function OverflowList({ items, renderItem, renderOverflow, renderOverflowItem, getKey = (_item, index) => index, minVisible = 0, collapseFrom = "end", overflowLabel = defaultLabel, className, ...props }) {
+function OverflowList({ items, renderItem, renderOverflow, renderOverflowItem, getKey = (_item, index) => index, minVisible = 0, collapseFrom = "end", overflowLabel = defaultLabel, onRemove, removeLabel = defaultRemoveLabel, className, ...props }) {
 	const rootRef = useRef(null);
 	const measureRef = useRef(null);
 	const trackRef = useRef(null);
@@ -6539,6 +6747,10 @@ function OverflowList({ items, renderItem, renderOverflow, renderOverflowItem, g
 	const focusTrigger = () => {
 		chipRef.current?.closest("button")?.focus();
 	};
+	const removable = onRemove ? (item, index) => /* @__PURE__ */ jsx(OverflowRemove, {
+		label: removeLabel(item, index),
+		onClick: () => onRemove(item, index)
+	}) : void 0;
 	const chipContent = (count, ref) => /* @__PURE__ */ jsxs("span", {
 		ref,
 		className: "sph-overflow-list__chip",
@@ -6565,6 +6777,7 @@ function OverflowList({ items, renderItem, renderOverflow, renderOverflowItem, g
 				offset,
 				render: renderOverflowItem ?? renderItem,
 				getKey,
+				remove: removable,
 				onEscape: focusTrigger
 			})
 		})
@@ -6577,9 +6790,9 @@ function OverflowList({ items, renderItem, renderOverflow, renderOverflowItem, g
 		"data-overflowing": hiddenCount > 0 || void 0,
 		children: [
 			collapseFrom === "start" && more,
-			items.slice(start, start + shown).map((item, position) => /* @__PURE__ */ jsx("li", {
+			items.slice(start, start + shown).map((item, position) => /* @__PURE__ */ jsxs("li", {
 				className: "sph-overflow-list__item",
-				children: node(renderItem(item, start + position))
+				children: [node(renderItem(item, start + position)), removable ? node(removable(item, start + position)) : null]
 			}, getKey(item, start + position))),
 			collapseFrom === "end" && more,
 			ready && /* @__PURE__ */ jsx("li", {
@@ -6589,9 +6802,9 @@ function OverflowList({ items, renderItem, renderOverflow, renderOverflowItem, g
 				children: /* @__PURE__ */ jsxs("div", {
 					ref: trackRef,
 					className: "sph-overflow-list__track",
-					children: [items.map((item, index) => /* @__PURE__ */ jsx("div", {
+					children: [items.map((item, index) => /* @__PURE__ */ jsxs("div", {
 						className: "sph-overflow-list__item",
-						children: node(renderItem(item, index))
+						children: [node(renderItem(item, index)), removable ? node(removable(item, index)) : null]
 					}, getKey(item, index))), /* @__PURE__ */ jsx("div", {
 						className: "sph-overflow-list__item",
 						children: renderOverflow ? node(renderOverflow(items)) : chipContent(total)
@@ -7472,6 +7685,6 @@ function ChatScroller({ children, itemCount, newCount, threshold = 48, ariaLabel
 	});
 }
 //#endregion
-export { Accordion, Alert, AnimatedNumber, Attachment, Avatar, AvatarGroup, Badge, Breadcrumb, Button, Calendar, Card, Chart, ChatScroller, Checkbox, Citation, Collapsible, Combobox, CommandPalette, ContextMenu, Delta, Dialog, Drawer, EmptyState, Field, FieldMessage, HoldButton, HoverCard, IconButton, Input, Kbd, MagneticDropzone, Menu, Menubar, MetadataList, Notice, NumberInput, OTPInput, OverflowList, Pagination, PlanCard, Popover, Progress, QuestionCard, RadioGroup, ReasoningSteps, Resizable, Reveal, ScrollArea, SegmentedControl, Select, Separator, Sidebar, Skeleton, Slider, Spinner, Stat, StatGroup, StatusMark, Stepper, StreamingText, Surface, Table, Tabs, TaskList, Textarea, Timeline, Timestamp, Toast, ToastViewport, Toggle, ToolCalls, Toolbar, Tooltip, TooltipGroup, describeDropzoneResult, motionDurationMs, parseDurationMs, toast, usePresence, validateDropzoneFiles };
+export { Accordion, AnimatedNumber, Attachment, Avatar, AvatarGroup, Badge, Breadcrumb, Button, Calendar, Card, Chart, ChatScroller, Checkbox, Citation, Collapsible, Combobox, CommandPalette, ContextMenu, Delta, Dialog, Drawer, EmptyState, Field, FieldMessage, HoldButton, HoverCard, IconButton, Input, Kbd, MagneticDropzone, Menu, Menubar, MetadataList, Notice, NumberInput, OTPInput, OverflowList, Pagination, PlanCard, Popover, Progress, QuestionCard, RadioGroup, ReasoningSteps, Resizable, Reveal, ScrollArea, SegmentedControl, Select, Separator, SidePanel, Sidebar, Skeleton, Slider, Spinner, Stat, StatGroup, StatusMark, Stepper, StreamingText, Surface, Table, Tabs, TaskList, Textarea, Timeline, Timestamp, Toast, ToastViewport, Toggle, ToolCalls, Toolbar, Tooltip, TooltipGroup, describeDropzoneResult, motionDurationMs, parseDurationMs, toast, usePresence, validateDropzoneFiles };
 
 //# sourceMappingURL=index.js.map