@botiverse/raft-ui 0.95.3 → 0.96.0

package/dist/components/app-link-card/app-link-card.d.mts

@@ -1,3 +1,4 @@
+import { BadgeProps } from "../badge/badge.mjs";
 import { ComponentPropsWithRef } from "react";
 export type AppLinkCardProps = ComponentPropsWithRef<"div">;
 /**
@@ -44,8 +45,23 @@ export type AppLinkCardTitleProps = ComponentPropsWithRef<"p">;
  */
 export declare function AppLinkCardTitle({ className, ...props }: AppLinkCardTitleProps): import("react").JSX.Element;
 export type AppLinkCardMetaProps = ComponentPropsWithRef<"div">;
-/** One state in a neutral Badge, then muted details. Wraps when it runs out of room. */
+/** One state in an `AppLinkCardBadge`, then muted details. Wraps when it runs out of room. */
 export declare function AppLinkCardMeta({ className, ...props }: AppLinkCardMetaProps): import("react").JSX.Element;
+export type AppLinkCardBadgeProps = Omit<BadgeProps, "appearance"> & {
+  /**
+   * The app's colour for the badge, `#RRGGBB`. Only the fill changes: the
+   * type is black or white, whichever reads better on it, the same in light
+   * and dark mode, with a hairline ring where the fill is too close to the
+   * card's surface. Without it, or with any other value, and in forced
+   * colours, the badge is the soft Badge of its `variant`.
+   */
+  fill?: string;
+};
+/**
+ * The item's state in `AppLinkCardMeta`: a soft Badge in the app's words.
+ * `variant` is its tone; `fill` takes the app's colour for it.
+ */
+export declare function AppLinkCardBadge({ fill, className, style, ...props }: AppLinkCardBadgeProps): import("react").JSX.Element;
 export type AppLinkCardActionsProps = ComponentPropsWithRef<"div">;
 /**
  * The app's buttons at the card's bottom end: at most two, the bordered one

package/dist/components/app-link-card/app-link-card.mjs

@@ -1,10 +1,19 @@
+import { fillOnSurface, oklchToRgb, parseHexColor } from "../../lib/fill-contrast.mjs";
 import { tv } from "../../lib/tv.mjs";
+import { Badge } from "../badge/badge.mjs";
 import { messageCard, messageEmbed } from "../message-embed/message-embed.recipe.mjs";
 import { Skeleton } from "../skeleton/skeleton.mjs";
+import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/app-link-card/app-link-card.tsx
 const appLinkCard = tv({ slots: {
 	root: ["flex flex-col", "my-2 first:mt-0 last:mb-0"],
+	badgeFill: [
+		"not-forced-colors:bg-(--badge-fill) not-forced-colors:text-(--badge-fill-text)",
+		"not-forced-colors:inset-ring",
+		"[--badge-ring:var(--badge-ring-light)] dark:[--badge-ring:var(--badge-ring-dark)]",
+		"not-forced-colors:inset-ring-(--badge-ring)"
+	],
 	placeholderLine: ["flex h-lh items-center"],
 	placeholderButton: ["h-8 md:pointer-fine:h-control w-28 rounded-control"]
 } });
@@ -164,7 +173,7 @@ function AppLinkCardTitle({ className, ...props }) {
 		...props
 	});
 }
-/** One state in a neutral Badge, then muted details. Wraps when it runs out of room. */
+/** One state in an `AppLinkCardBadge`, then muted details. Wraps when it runs out of room. */
 function AppLinkCardMeta({ className, ...props }) {
 	const { meta } = messageCard();
 	return /* @__PURE__ */ jsx("div", {
@@ -173,6 +182,65 @@ function AppLinkCardMeta({ className, ...props }) {
 		...props
 	});
 }
+const APP_LINK_CARD_SURFACE = {
+	light: [
+		1,
+		0,
+		0
+	],
+	dark: [
+		.2596,
+		.0037,
+		106.65
+	]
+};
+const CARD_SURFACE = {
+	light: oklchToRgb(...APP_LINK_CARD_SURFACE.light),
+	dark: oklchToRgb(...APP_LINK_CARD_SURFACE.dark)
+};
+const FILL_TEXT = {
+	black: "oklch(0 0 0)",
+	white: "oklch(1 0 0)"
+};
+/** The badge's custom properties for an app's fill, or null for no valid `#RRGGBB`. */
+function badgeFillStyle(fill) {
+	const rgb = fill === void 0 ? null : parseHexColor(fill);
+	if (!rgb) return null;
+	const light = fillOnSurface(rgb, CARD_SURFACE.light);
+	const dark = fillOnSurface(rgb, CARD_SURFACE.dark);
+	return {
+		"--badge-fill": fill,
+		"--badge-fill-text": FILL_TEXT[light.text],
+		"--badge-ring-light": light.ring ? "var(--line-hairline)" : "transparent",
+		"--badge-ring-dark": dark.ring ? "var(--line-hairline)" : "transparent"
+	};
+}
+/**
+* The item's state in `AppLinkCardMeta`: a soft Badge in the app's words.
+* `variant` is its tone; `fill` takes the app's colour for it.
+*/
+function AppLinkCardBadge({ fill, className, style, ...props }) {
+	const fillStyle = useMemo(() => {
+		const vars = badgeFillStyle(fill);
+		return vars && {
+			...vars,
+			...style
+		};
+	}, [fill, style]);
+	if (!fillStyle) return /* @__PURE__ */ jsx(Badge, {
+		appearance: "soft",
+		className,
+		style,
+		...props
+	});
+	const { badgeFill } = appLinkCard();
+	return /* @__PURE__ */ jsx(Badge, {
+		appearance: "soft",
+		className: badgeFill({ className }),
+		style: fillStyle,
+		...props
+	});
+}
 /**
 * The app's buttons at the card's bottom end: at most two, the bordered one
 * last, with a More menu (⋯) to their left for the rest.
@@ -185,4 +253,4 @@ function AppLinkCardActions({ className, ...props }) {
 		...props
 	});
 }
-export { AppLinkCard, AppLinkCardActions, AppLinkCardBody, AppLinkCardEyebrow, AppLinkCardHeader, AppLinkCardHost, AppLinkCardIcon, AppLinkCardMeta, AppLinkCardName, AppLinkCardPlaceholder, AppLinkCardTitle };
+export { APP_LINK_CARD_SURFACE, AppLinkCard, AppLinkCardActions, AppLinkCardBadge, AppLinkCardBody, AppLinkCardEyebrow, AppLinkCardHeader, AppLinkCardHost, AppLinkCardIcon, AppLinkCardMeta, AppLinkCardName, AppLinkCardPlaceholder, AppLinkCardTitle };

package/dist/components/app-link-card/index.d.mts

@@ -1,2 +1,2 @@
-import { AppLinkCard, AppLinkCardActions, AppLinkCardActionsProps, AppLinkCardBody, AppLinkCardBodyProps, AppLinkCardEyebrow, AppLinkCardEyebrowProps, AppLinkCardHeader, AppLinkCardHeaderProps, AppLinkCardHost, AppLinkCardHostProps, AppLinkCardIcon, AppLinkCardIconProps, AppLinkCardMeta, AppLinkCardMetaProps, AppLinkCardName, AppLinkCardNameProps, AppLinkCardPlaceholder, AppLinkCardPlaceholderProps, AppLinkCardTitle, AppLinkCardTitleProps } from "./app-link-card.mjs";
-export { AppLinkCard, AppLinkCardActions, type AppLinkCardActionsProps, AppLinkCardBody, type AppLinkCardBodyProps, AppLinkCardEyebrow, type AppLinkCardEyebrowProps, AppLinkCardHeader, type AppLinkCardHeaderProps, AppLinkCardHost, type AppLinkCardHostProps, AppLinkCardIcon, type AppLinkCardIconProps, AppLinkCardMeta, type AppLinkCardMetaProps, AppLinkCardName, type AppLinkCardNameProps, AppLinkCardPlaceholder, type AppLinkCardPlaceholderProps, AppLinkCardTitle, type AppLinkCardTitleProps };
+import { AppLinkCard, AppLinkCardActions, AppLinkCardActionsProps, AppLinkCardBadge, AppLinkCardBadgeProps, AppLinkCardBody, AppLinkCardBodyProps, AppLinkCardEyebrow, AppLinkCardEyebrowProps, AppLinkCardHeader, AppLinkCardHeaderProps, AppLinkCardHost, AppLinkCardHostProps, AppLinkCardIcon, AppLinkCardIconProps, AppLinkCardMeta, AppLinkCardMetaProps, AppLinkCardName, AppLinkCardNameProps, AppLinkCardPlaceholder, AppLinkCardPlaceholderProps, AppLinkCardTitle, AppLinkCardTitleProps } from "./app-link-card.mjs";
+export { AppLinkCard, AppLinkCardActions, type AppLinkCardActionsProps, AppLinkCardBadge, type AppLinkCardBadgeProps, AppLinkCardBody, type AppLinkCardBodyProps, AppLinkCardEyebrow, type AppLinkCardEyebrowProps, AppLinkCardHeader, type AppLinkCardHeaderProps, AppLinkCardHost, type AppLinkCardHostProps, AppLinkCardIcon, type AppLinkCardIconProps, AppLinkCardMeta, type AppLinkCardMetaProps, AppLinkCardName, type AppLinkCardNameProps, AppLinkCardPlaceholder, type AppLinkCardPlaceholderProps, AppLinkCardTitle, type AppLinkCardTitleProps };

package/dist/components/combobox/combobox.mjs

@@ -289,7 +289,7 @@ function ComboboxSeparator({ className, ...props }) {
 	});
 }
 function ComboboxFramePositioner({ collisionBoundary, collisionPadding, container, ...props }) {
-	const collision = usePopupCollision(collisionPadding, collisionBoundary, 8, container);
+	const collision = usePopupCollision(collisionPadding, collisionBoundary, 8, container, void 0, props.anchor);
 	return /* @__PURE__ */ jsx(Combobox.Positioner, {
 		...collision,
 		...props

package/dist/components/combobox-select/combobox-select.mjs

@@ -68,7 +68,7 @@ const PHONE_LIST_COLLISION = {
 	fallbackAxisSide: "none"
 };
 function ComboboxSelectFramePositioner({ collisionBoundary, collisionPadding, container, ...props }) {
-	const collision = usePopupCollision(collisionPadding, collisionBoundary, 8, container);
+	const collision = usePopupCollision(collisionPadding, collisionBoundary, 8, container, void 0, props.anchor);
 	return /* @__PURE__ */ jsx(Combobox.Positioner, {
 		...collision,
 		...props

package/dist/components/context-menu/context-menu.mjs

@@ -85,7 +85,7 @@ function ContextMenuPortal(props) {
 	});
 }
 function ContextMenuFramePositioner({ collisionBoundary, collisionPadding, container, ...props }) {
-	const collision = usePopupCollision(collisionPadding, collisionBoundary, 8, container);
+	const collision = usePopupCollision(collisionPadding, collisionBoundary, 8, container, void 0, props.anchor);
 	return /* @__PURE__ */ jsx(ContextMenu.Positioner, {
 		...collision,
 		...props

package/dist/components/dialog/dialog-sheet-context.mjs

@@ -1,3 +1,4 @@
+import { PopupSheetReset } from "../../lib/popup-boundary.mjs";
 import { tv } from "../../lib/tv.mjs";
 import { createContext, createElement, useContext } from "react";
 // src/components/dialog/dialog-sheet-context.ts
@@ -25,10 +26,11 @@ function useInDialogSheetHead() {
 /**
 * Every overlay surface starts outside any sheet: a confirm, a dialog or a
 * drawer opened from inside a sheet keeps its own head, footer and commit
-* button instead of taking the sheet's.
+* button instead of taking the sheet's, and its popups aren't kept inside the
+* sheet below it (PopupSheetContext).
 */
 function DialogSheetReset({ children }) {
-	return createElement(DialogSheetSurfaceContext.Provider, { value: false }, createElement(DialogSheetContext.Provider, { value: NO_SHEET }, createElement(DialogSheetHeadContext.Provider, { value: false }, children)));
+	return createElement(DialogSheetSurfaceContext.Provider, { value: false }, createElement(DialogSheetContext.Provider, { value: NO_SHEET }, createElement(DialogSheetHeadContext.Provider, { value: false }, createElement(PopupSheetReset, null, children))));
 }
 /**
 * A dialog drawn as a phone sheet (design: dialog.md "On a phone"). The

package/dist/components/dialog/dialog-sheet.mjs

@@ -1,4 +1,5 @@
 import { cn } from "../../cn.mjs";
+import { PopupSheetContext } from "../../lib/popup-boundary.mjs";
 import { useMobileViewport } from "../../lib/use-mobile-viewport.mjs";
 import { useSoftKeyboard } from "../../lib/use-soft-keyboard.mjs";
 import { Button } from "../button/button.mjs";
@@ -40,6 +41,10 @@ function DialogSheetContent({ className, overlay, placement, style, ref, childre
 		setPopup(element);
 		assignRef(ref, element);
 	}, [ref]);
+	const popupSheet = useMemo(() => phone && popup ? {
+		head: () => popup.querySelector("[data-slot=\"dialog-header\"]"),
+		surface: () => popup
+	} : void 0, [phone, popup]);
 	const sheet = dialogSheet();
 	const sheetOverlay = useMemo(() => overlay === false ? false : {
 		...typeof overlay === "object" ? overlay : null,
@@ -65,7 +70,10 @@ function DialogSheetContent({ className, overlay, placement, style, ref, childre
 			"data-sheet": phone ? "" : void 0,
 			children: /* @__PURE__ */ jsx(DialogSheetContext.Provider, {
 				value: state,
-				children
+				children: /* @__PURE__ */ jsx(PopupSheetContext.Provider, {
+					value: popupSheet,
+					children
+				})
 			})
 		})
 	});

package/dist/components/dialog/dialog.mjs

@@ -1,6 +1,7 @@
 import { cn } from "../../cn.mjs";
 import { barButtonDesktop, headEdgePull } from "../../lib/head-edges.mjs";
 import { decisionWidth } from "../../lib/decision-width.mjs";
+import { PopupSheetReset } from "../../lib/popup-boundary.mjs";
 import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { stackedActions, useStackedActions } from "../../lib/stacked-actions.mjs";
 import { tv } from "../../lib/tv.mjs";
@@ -23,6 +24,7 @@ import { createPortal } from "react-dom";
 const dialog = tv({
 	slots: {
 		overlay: ["fixed inset-0 z-dialog bg-layer-backdrop"],
+		portal: [],
 		content: [
 			"fixed top-1/2 left-1/2 z-dialog flex w-[calc(100%-2rem)] -translate-1/2 flex-col",
 			"max-h-[calc(100dvh-2rem)] outline-none",
@@ -84,9 +86,13 @@ const dialog = tv({
 			},
 			1: {
 				overlay: ["z-dialog-layer"],
-				content: ["z-dialog-layer"]
+				content: []
 			}
 		},
+		lifted: {
+			false: {},
+			true: { portal: ["relative isolate z-dialog-layer"] }
+		},
 		nested: {
 			false: {},
 			true: { overlay: ["bg-layer-backdrop-nested"] }
@@ -141,19 +147,25 @@ function DialogContent({ className, children, portalProps, overlay, size, layer,
 	const sheetSurface = useContext(DialogSheetSurfaceContext);
 	const [keyboard, setKeyboard] = useState(null);
 	const raised = !sheetSurface && keyboard != null;
-	const { content } = dialog({
+	const lifted = layer === 1;
+	const { content, portal } = dialog({
 		size,
-		layer,
 		placement,
+		lifted,
 		keyboard: raised || void 0
 	});
-	const overlayProps = typeof overlay === "object" ? overlay : {};
+	const { layer: overlayLayer, ...overlayRest } = typeof overlay === "object" ? overlay : {};
+	const overlayProps = lifted ? overlayRest : {
+		layer: overlayLayer,
+		...overlayRest
+	};
+	const portalClassName = portalProps?.className;
+	const liftedPortalClassName = typeof portalClassName === "function" ? (state) => portal({ className: portalClassName(state) }) : portal({ className: portalClassName });
 	return /* @__PURE__ */ jsxs(DialogPortal, {
 		...portalProps,
-		children: [overlay === false ? null : /* @__PURE__ */ jsx(DialogOverlay, {
-			layer,
-			...overlayProps
-		}), /* @__PURE__ */ jsxs(Dialog.Popup, {
+		"data-layer": lifted ? 1 : void 0,
+		className: lifted ? liftedPortalClassName : portalClassName,
+		children: [overlay === false ? null : /* @__PURE__ */ jsx(DialogOverlay, { ...overlayProps }), /* @__PURE__ */ jsxs(Dialog.Popup, {
 			"data-slot": "dialog-content",
 			"data-placement": top ? "top" : void 0,
 			"data-soft-keyboard": raised ? "" : void 0,
@@ -255,9 +267,9 @@ function DialogHeader({ className, bar = false, children, ...props }) {
 			"data-sheet": "",
 			className: dialog({ bar: false }).header({ className: cn(head.header(), className) }),
 			...props,
-			children: [/* @__PURE__ */ jsxs(DialogSheetHeadContext.Provider, {
+			children: [/* @__PURE__ */ jsx(DialogSheetHeadContext.Provider, {
 				value: true,
-				children: [backs.length > 0 ? backs : closes, rest]
+				children: /* @__PURE__ */ jsxs(PopupSheetReset, { children: [backs.length > 0 ? backs : closes, rest] })
 			}), /* @__PURE__ */ jsx("div", {
 				ref: setCommitSlot,
 				"data-slot": "dialog-commit-slot",

package/dist/components/drawer/drawer.d.mts

@@ -18,7 +18,7 @@ export declare function DrawerContent({ className, children, portalProps, ...pro
 export type DrawerCloseProps = StyledProps<Drawer.Close.Props> & Pick<ButtonProps, "variant" | "size">;
 export declare function DrawerClose({ className, variant, size, children, render, "aria-label": ariaLabel, ...props }: DrawerCloseProps): import("react").JSX.Element;
 export type DrawerHeaderProps = useRender.ComponentProps<"div">;
-export declare function DrawerHeader({ className, render, ...props }: DrawerHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function DrawerHeader({ className, render, children, ...props }: DrawerHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type DrawerFooterProps = useRender.ComponentProps<"div">;
 export declare function DrawerFooter({ className, render, ...props }: DrawerFooterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type DrawerBodyProps = useRender.ComponentProps<"div">;

package/dist/components/drawer/drawer.mjs

@@ -1,11 +1,12 @@
 import { cn } from "../../cn.mjs";
+import { PopupSheetContext, PopupSheetReset } from "../../lib/popup-boundary.mjs";
 import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
 import { Button } from "../button/button.mjs";
 import { DialogSheetReset } from "../dialog/dialog-sheet-context.mjs";
 import { drawer } from "./drawer.recipe.mjs";
 import { useParentOverlayKind, withOverlayLayer } from "../../lib/overlay-depth.mjs";
 import { X } from "lucide-react";
-import { createContext, useContext, useMemo } from "react";
+import { createContext, useContext, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
@@ -89,6 +90,11 @@ function DrawerContent({ className, children, portalProps, ...props }) {
 		axis: swipeAxis,
 		snapPoints: hasSnapPoints
 	});
+	const [surface, setSurface] = useState(null);
+	const popupSheet = useMemo(() => surface ? {
+		head: () => surface.querySelector("[data-slot=\"drawer-header\"]"),
+		surface: () => surface
+	} : void 0, [surface]);
 	return /* @__PURE__ */ jsxs(DrawerPortal, {
 		...portalProps,
 		children: [modal === true ? /* @__PURE__ */ jsx(DrawerOverlay, {}) : null, /* @__PURE__ */ jsx(Drawer.Viewport, {
@@ -99,9 +105,13 @@ function DrawerContent({ className, children, portalProps, ...props }) {
 				className: popup({ className }),
 				...props,
 				children: [hasSnapPoints || swipeDirection === "down" ? /* @__PURE__ */ jsx(DrawerSwipeHandle, {}) : null, /* @__PURE__ */ jsx(Drawer.Content, {
+					ref: setSurface,
 					"data-slot": "drawer-content",
 					className: content(),
-					children: /* @__PURE__ */ jsx(DialogSheetReset, { children })
+					children: /* @__PURE__ */ jsx(DialogSheetReset, { children: /* @__PURE__ */ jsx(PopupSheetContext.Provider, {
+						value: popupSheet,
+						children
+					}) })
 				})]
 			})
 		})]
@@ -130,14 +140,17 @@ function DrawerClose({ className, variant, size, children, render, "aria-label":
 		children: children ?? /* @__PURE__ */ jsx(X, { className: closeIcon() })
 	});
 }
-function DrawerHeader({ className, render, ...props }) {
+function DrawerHeader({ className, render, children, ...props }) {
 	const { hasSnapPoints, swipeAxis, swipeDirection } = useDrawerConfig();
 	const { header } = drawer({
 		side: swipeDirection,
 		axis: swipeAxis,
 		snapPoints: hasSnapPoints
 	});
-	const defaultProps = { className: header({ className }) };
+	const defaultProps = {
+		className: header({ className }),
+		children: /* @__PURE__ */ jsx(PopupSheetReset, { children })
+	};
 	return useRender({
 		defaultTagName: "div",
 		render,

package/dist/components/dropdown-menu/dropdown-menu.mjs

@@ -101,7 +101,7 @@ function DropdownMenuPopup({ className, ...props }) {
 	});
 }
 function DropdownMenuFramePositioner({ collisionBoundary, collisionPadding, container, ...props }) {
-	const collision = usePopupCollision(collisionPadding, collisionBoundary, 5, container);
+	const collision = usePopupCollision(collisionPadding, collisionBoundary, 5, container, void 0, props.anchor);
 	return /* @__PURE__ */ jsx(Menu.Positioner, {
 		...collision,
 		...props

package/dist/components/lightbox/lightbox.d.mts

@@ -61,7 +61,7 @@ export type LightboxContentProps = StyledProps<Dialog.Popup.Props>;
  * A lightbox opened from state passes `finalFocus={openerRef}` so focus goes
  * back to what opened it.
  */
-export declare function LightboxContent({ className, initialFocus, finalFocus, onKeyDown, ref, ...props }: LightboxContentProps): import("react").JSX.Element;
+export declare function LightboxContent({ className, initialFocus, finalFocus, onKeyDown, ref, children, ...props }: LightboxContentProps): import("react").JSX.Element;
 export type LightboxHeaderProps = useRender.ComponentProps<"div">;
 export declare function LightboxHeader({ render, className, ...props }: LightboxHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type LightboxToolbarProps = useRender.ComponentProps<"div">;

package/dist/components/lightbox/lightbox.mjs

@@ -1,6 +1,7 @@
 import { cn } from "../../cn.mjs";
 import { headEdgePull } from "../../lib/head-edges.mjs";
-import { OverlayLayerProvider, useParentOverlayKind } from "../../lib/overlay-depth.mjs";
+import { OverlayLayer, useParentOverlayKind } from "../../lib/overlay-depth.mjs";
+import { PopupSheetReset } from "../../lib/popup-boundary.mjs";
 import { tv } from "../../lib/tv.mjs";
 import { useMergedRef } from "../../lib/use-merged-ref.mjs";
 import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
@@ -25,9 +26,9 @@ const lightbox = tv({
 		header: [
 			"pointer-events-auto shrink-0",
 			"flex items-center gap-3 pb-3",
-			"pt-[calc(env(safe-area-inset-top,0px)+--spacing(3))]",
-			"pl-[calc(env(safe-area-inset-left,0px)+--spacing(4))]",
-			"pr-[calc(env(safe-area-inset-right,0px)+--spacing(4))]",
+			"pt-[calc(env(safe-area-inset-top,0px)+(--spacing(3)))]",
+			"pl-[calc(env(safe-area-inset-left,0px)+(--spacing(4)))]",
+			"pr-[calc(env(safe-area-inset-right,0px)+(--spacing(4)))]",
 			"bg-transparent shadow-none",
 			headEdgePull
 		],
@@ -71,7 +72,7 @@ const lightbox = tv({
 			"focus-visible:outline-transparent focus-visible:shadow-focus",
 			"[&_svg]:size-5.5"
 		],
-		infoDock: ["pointer-events-none absolute right-6 bottom-20 left-6 z-raised flex justify-center"],
+		infoDock: ["pointer-events-none absolute inset-x-6 bottom-20  z-raised flex justify-center"],
 		infoBar: [
 			"pointer-events-auto flex items-center",
 			"w-[clamp(144px,20vw,224px)] max-w-[calc(100vw-48px)] min-w-36",
@@ -87,7 +88,7 @@ const lightbox = tv({
 			"*:data-[slot=button]:after:inset-x-[-3px] *:data-[slot=button]:first:after:left-[-9.5px] *:data-[slot=button]:last:after:right-[-9.5px]",
 			"pointer-coarse:*:data-[slot=button]:after:inset-y-[-9.5px]"
 		],
-		thumbnailStrip: ["pointer-events-none absolute right-0 bottom-4 left-0 z-raised", "flex items-center justify-center gap-1.5"],
+		thumbnailStrip: ["pointer-events-none absolute inset-x-0 bottom-4  z-raised", "flex items-center justify-center gap-1.5"],
 		thumbnail: [
 			"group/lightbox-thumb pointer-events-auto relative size-12 overflow-hidden",
 			"transition-[border-color,opacity,box-shadow] duration-150",
@@ -127,7 +128,7 @@ function Lightbox({ closeOnModW = true, defaultOpen = false, modal = true, onOpe
 		onOpenChange: handleOpenChange,
 		open,
 		...props,
-		children: [modWClose, /* @__PURE__ */ jsx(OverlayLayerProvider, {
+		children: [modWClose, /* @__PURE__ */ jsx(OverlayLayer, {
 			kind: "dialog",
 			modal: true,
 			children: /* @__PURE__ */ jsx(LightboxModalContext.Provider, {
@@ -281,7 +282,7 @@ function routeScrollKey(event) {
 * A lightbox opened from state passes `finalFocus={openerRef}` so focus goes
 * back to what opened it.
 */
-function LightboxContent({ className, initialFocus, finalFocus, onKeyDown, ref, ...props }) {
+function LightboxContent({ className, initialFocus, finalFocus, onKeyDown, ref, children, ...props }) {
 	const documentMode = useContext(LightboxModalContext) === "trap-focus";
 	const nested = useParentOverlayKind() != null;
 	const { backdrop, content } = lightbox({ nested });
@@ -307,7 +308,8 @@ function LightboxContent({ className, initialFocus, finalFocus, onKeyDown, ref,
 		finalFocus: finalFocus ?? documentMode,
 		className: content({ className }),
 		onKeyDown: handleKeyDown,
-		...props
+		...props,
+		children: /* @__PURE__ */ jsx(PopupSheetReset, { children })
 	})] });
 }
 function LightboxHeader({ render, className, ...props }) {

package/dist/components/notification-center/notification-center.mjs

@@ -137,7 +137,7 @@ function NotificationCenterPortal(props) {
 	});
 }
 function NotificationCenterFramePositioner({ collisionBoundary, collisionPadding, container, defaultCollisionPadding, ...props }) {
-	const collision = usePopupCollision(collisionPadding, collisionBoundary, defaultCollisionPadding, container);
+	const collision = usePopupCollision(collisionPadding, collisionBoundary, defaultCollisionPadding, container, void 0, props.anchor);
 	return /* @__PURE__ */ jsx(Popover.Positioner, {
 		...collision,
 		...props

package/dist/components/popover/popover.mjs

@@ -71,7 +71,7 @@ function PopoverPopup({ className, ...props }) {
 	});
 }
 function PopoverFramePositioner({ collisionBoundary, collisionPadding, container, ...props }) {
-	const collision = usePopupCollision(collisionPadding, collisionBoundary, 5, container);
+	const collision = usePopupCollision(collisionPadding, collisionBoundary, 5, container, void 0, props.anchor);
 	return /* @__PURE__ */ jsx(Popover.Positioner, {
 		...collision,
 		...props

package/dist/components/preview-card/preview-card.mjs

@@ -70,7 +70,7 @@ function PreviewCardPopup({ className, ...props }) {
 	});
 }
 function PreviewCardFramePositioner({ collisionBoundary, collisionPadding, container, ...props }) {
-	const collision = usePopupCollision(collisionPadding, collisionBoundary, 5, container);
+	const collision = usePopupCollision(collisionPadding, collisionBoundary, 5, container, void 0, props.anchor);
 	return /* @__PURE__ */ jsx(PreviewCard.Positioner, {
 		...collision,
 		...props

package/dist/components/select/select.mjs

@@ -344,7 +344,7 @@ function SelectPopup({ className, ...props }) {
 	});
 }
 function SelectFramePositioner({ collisionBoundary, collisionPadding, container, ...props }) {
-	const collision = usePopupCollision(collisionPadding, collisionBoundary, 8, container);
+	const collision = usePopupCollision(collisionPadding, collisionBoundary, 8, container, void 0, props.anchor);
 	return /* @__PURE__ */ jsx(Select.Positioner, {
 		...collision,
 		...props

package/dist/components/tooltip/tooltip.mjs

@@ -169,7 +169,7 @@ const CONTENT_COLLISION_AVOIDANCE = {
 * off center, by up to half the left and right insets.
 */
 function TooltipFramePositioner({ collisionBoundary, collisionPadding, container, ...props }) {
-	const collision = usePopupCollision(void 0, collisionBoundary, collisionPadding ?? 5, container, 0);
+	const collision = usePopupCollision(void 0, collisionBoundary, collisionPadding ?? 5, container, 0, props.anchor);
 	return /* @__PURE__ */ jsx(Tooltip.Positioner, {
 		...collision,
 		...props

package/dist/lib/fill-contrast.mjs

@@ -0,0 +1,63 @@
+// src/lib/fill-contrast.ts
+/**
+* Below this contrast against the surface, a fill gets a hairline ring.
+* 1.5:1 is where a flat fill stops reading as a shape of its own: a pale
+* yellow on a white card, a near-black on a dark one.
+*/
+const FILL_RING_CONTRAST = 1.5;
+/** `#RRGGBB` (either case) as sRGB channels; anything else is null. */
+function parseHexColor(value) {
+	const match = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(value);
+	if (!match) return null;
+	return [
+		parseInt(match[1], 16) / 255,
+		parseInt(match[2], 16) / 255,
+		parseInt(match[3], 16) / 255
+	];
+}
+/** An `oklch(l c h)` token value (as tokens.json stores its components) in sRGB, clamped. */
+function oklchToRgb(l, c, h) {
+	const a = c * Math.cos(h * Math.PI / 180);
+	const b = c * Math.sin(h * Math.PI / 180);
+	const L = (l + .3963377774 * a + .2158037573 * b) ** 3;
+	const M = (l - .1055613458 * a - .0638541728 * b) ** 3;
+	const S = (l - .0894841775 * a - 1.291485548 * b) ** 3;
+	const [r, g, bl] = [
+		4.0767416621 * L - 3.3077115913 * M + .2309699292 * S,
+		-1.2684380046 * L + 2.6097574011 * M - .3413193965 * S,
+		-.0041960863 * L - .7034186147 * M + 1.707614701 * S
+	].map((x) => {
+		const y = Math.min(1, Math.max(0, x));
+		return y <= .0031308 ? 12.92 * y : 1.055 * y ** (1 / 2.4) - .055;
+	});
+	return [
+		r,
+		g,
+		bl
+	];
+}
+/** WCAG 2 relative luminance. */
+function relativeLuminance([r, g, b]) {
+	const linear = (v) => v <= .04045 ? v / 12.92 : ((v + .055) / 1.055) ** 2.4;
+	return .2126 * linear(r) + .7152 * linear(g) + .0722 * linear(b);
+}
+/** WCAG 2 contrast ratio, from 1 to 21, in either order. */
+function contrastRatio(a, b) {
+	const la = relativeLuminance(a);
+	const lb = relativeLuminance(b);
+	return (Math.max(la, lb) + .05) / (Math.min(la, lb) + .05);
+}
+/**
+* The type and the ring for `fill` lying on `surface`: black or white type,
+* whichever has the higher contrast (one of them always reaches 4.58:1), and
+* a ring when the fill's contrast with the surface is below
+* `FILL_RING_CONTRAST`.
+*/
+function fillOnSurface(fill, surface) {
+	const luminance = relativeLuminance(fill);
+	return {
+		text: (luminance + .05) / .05 >= 1.05 / (luminance + .05) ? "black" : "white",
+		ring: contrastRatio(fill, surface) < FILL_RING_CONTRAST
+	};
+}
+export { FILL_RING_CONTRAST, contrastRatio, fillOnSurface, oklchToRgb, parseHexColor, relativeLuminance };