@parallelworks/ui 0.54.0 → 0.56.0

package/dist/components/Field.d.ts

@@ -17,9 +17,14 @@ export declare const FieldRowContext: import("react").Context<boolean>;
 /** The surrounding Field's control props, for a control drawn further down than the Field's
  *  own children. Null outside a Field. */
 export declare function useFieldControl(): FieldControlProps | null;
-/** The label's id, for a control that isn't a Base UI one and so isn't named by the label's
- *  `for`, such as a button that opens a picker. */
-export declare function useFieldLabelId(): string | undefined;
+/** The surrounding Field's control props for a control that isn't a Base UI one, such as a
+ *  code editor, a button that opens a picker or an `<output>`, which the label's `for` can't
+ *  name. The props name it by the label's id instead, and while it is mounted the label drops
+ *  its `for`, which would point at no element, and focuses the control by its id when clicked.
+ *  Null outside a Field. */
+export declare function useFieldLabelledControl(): (FieldControlProps & {
+    'aria-labelledby': string;
+}) | null;
 export type FieldLayout = 'stacked' | 'inline';
 export interface FieldProps {
     label: ReactNode;

package/dist/components/Field.js

@@ -5,7 +5,7 @@ import { focusCameFromKeyboard, trackFocusModality } from "./focus.js";
 import { InfoTip, formatInfoTipContent } from "./InfoTip.js";
 import { RequiredMark } from "./RequiredMark.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createContext, use, useEffect, useId, useState } from "react";
+import { createContext, use, useCallback, useEffect, useId, useLayoutEffect, useState } from "react";
 import { Field } from "@base-ui/react/field";
 import { Fieldset } from "@base-ui/react/fieldset";
 //#region src/components/Field.tsx
@@ -19,10 +19,19 @@ var FieldRowContext = createContext(false);
 function useFieldControl() {
 	return use(ControlContext)?.control ?? null;
 }
-/** The label's id, for a control that isn't a Base UI one and so isn't named by the label's
-*  `for`, such as a button that opens a picker. */
-function useFieldLabelId() {
-	return use(ControlContext)?.labelId;
+/** The surrounding Field's control props for a control that isn't a Base UI one, such as a
+*  code editor, a button that opens a picker or an `<output>`, which the label's `for` can't
+*  name. The props name it by the label's id instead, and while it is mounted the label drops
+*  its `for`, which would point at no element, and focuses the control by its id when clicked.
+*  Null outside a Field. */
+function useFieldLabelledControl() {
+	const context = use(ControlContext);
+	const claim = context?.claimLabel;
+	useLayoutEffect(() => claim?.(), [claim]);
+	return context ? {
+		...context.control,
+		"aria-labelledby": context.labelId
+	} : null;
 }
 var labelSizes = {
 	sm: {
@@ -75,23 +84,31 @@ function Field$1({ label, hint, help, actions, description, error, invalid, requ
 		...isInvalid && { "aria-invalid": true },
 		...required && { "aria-required": true }
 	};
+	const [labelledBy, setLabelledBy] = useState(0);
 	const controlContext = {
 		control,
-		labelId
+		labelId,
+		claimLabel: useCallback(() => {
+			setLabelledBy((n) => n + 1);
+			return () => setLabelledBy((n) => n - 1);
+		}, [])
 	};
 	const inline = layout === "inline";
 	const inRow = use(FieldRowContext) && !inline && !group;
 	const labelSize = labelSizes[size];
 	const [helpOpen, setHelpOpen] = useState(false);
+	const [controlBox, setControlBox] = useState(null);
 	useEffect(() => {
 		if (help) trackFocusModality();
 	}, [help]);
+	const besideControl = helpOpen === "focus";
 	const helpTip = help && /* @__PURE__ */ jsx(InfoTip, {
 		text: help,
 		describesControl: true,
 		open: Boolean(helpOpen),
 		onOpenChange: (open) => setHelpOpen(open && "pointer"),
-		keepSide: helpOpen === "focus"
+		side: besideControl ? "right" : "top",
+		anchor: besideControl ? controlBox : void 0
 	});
 	const helpFocus = help ? {
 		onFocus: () => {
@@ -119,6 +136,7 @@ function Field$1({ label, hint, help, actions, description, error, invalid, requ
 	] });
 	const placed = typeof children === "function" ? children(control) : children;
 	const body = /* @__PURE__ */ jsxs("div", {
+		ref: help ? setControlBox : void 0,
 		className: cx("flex w-full min-w-0 flex-col gap-1", inRow && "row-start-2"),
 		...helpFocus,
 		children: [
@@ -180,7 +198,10 @@ function Field$1({ label, hint, help, actions, description, error, invalid, requ
 			className: labelBox,
 			children: [
 				/* @__PURE__ */ jsxs(Field.Label, {
-					...typeof children === "function" || ownId !== void 0 ? { htmlFor: id } : {},
+					...labelledBy > 0 ? {
+						htmlFor: void 0,
+						onClick: () => document.getElementById(id)?.focus()
+					} : typeof children === "function" || ownId !== void 0 ? { htmlFor: id } : {},
 					id: labelId,
 					"data-field-label": true,
 					children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
@@ -229,11 +250,10 @@ function RevealToggle({ revealed, onRevealedChange, disabled }) {
 *  up with the fields around it. For a set of names and values on their own, use
 *  DescriptionList. */
 function FieldValue({ size = "md", className, children, ...props }) {
-	const control = useFieldControl();
-	const labelId = useFieldLabelId();
+	const control = useFieldLabelledControl();
 	return /* @__PURE__ */ jsx("output", {
 		id: control?.id,
-		"aria-labelledby": labelId,
+		"aria-labelledby": control?.["aria-labelledby"],
 		"aria-describedby": control?.["aria-describedby"],
 		...props,
 		className: cx("flex min-w-0 items-center break-words text-(--theme-app)", size === "sm" ? "min-h-7 text-xs" : "min-h-9 text-sm", className),
@@ -241,4 +261,4 @@ function FieldValue({ size = "md", className, children, ...props }) {
 	});
 }
 //#endregion
-export { ErrorText, Field$1 as Field, FieldOption, FieldRowContext, FieldValue, RevealToggle, useFieldControl, useFieldLabelId };
+export { ErrorText, Field$1 as Field, FieldOption, FieldRowContext, FieldValue, RevealToggle, useFieldControl, useFieldLabelledControl };

package/dist/components/HoverCard.js

@@ -1,4 +1,5 @@
 import { cardClassName, positionerClassName } from "./floating.js";
+import { useFullscreenContainer } from "./fullscreen.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { PreviewCard } from "@base-ui/react/preview-card";
 //#region src/components/HoverCard.tsx
@@ -7,23 +8,27 @@ import { PreviewCard } from "@base-ui/react/preview-card";
 *  reachable another way, such as the page the anchor links to. The card
 *  stays open while the pointer is over it. */
 function HoverCard({ card, children, defaultOpen = false }) {
+	const fullscreen = useFullscreenContainer();
 	return /* @__PURE__ */ jsxs(PreviewCard.Root, {
 		defaultOpen,
 		children: [/* @__PURE__ */ jsx(PreviewCard.Trigger, {
 			delay: 350,
 			closeDelay: 150,
 			render: children
-		}), /* @__PURE__ */ jsx(PreviewCard.Portal, { children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
-			side: "bottom",
-			align: "start",
-			sideOffset: 8,
-			collisionPadding: 8,
-			className: positionerClassName,
-			children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
-				className: cardClassName,
-				children: card
+		}), /* @__PURE__ */ jsx(PreviewCard.Portal, {
+			container: fullscreen,
+			children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
+				side: "bottom",
+				align: "start",
+				sideOffset: 8,
+				collisionPadding: 8,
+				className: positionerClassName,
+				children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
+					className: cardClassName,
+					children: card
+				})
 			})
-		}) })]
+		})]
 	});
 }
 //#endregion

package/dist/components/InfoTip.d.ts

@@ -19,8 +19,10 @@ interface InfoTipProps {
     /** Stays on `side` rather than flipping where it doesn't fit, as while the control it
      *  describes is typed in, which a flipped tip would cover. */
     keepSide?: boolean | undefined;
+    /** Placed against this element rather than the ?, such as beside the control it describes. */
+    anchor?: Element | null | undefined;
 }
 /** Extra detail behind an info trigger. A popover that also opens on hover, so
  *  touch and screen reader users can reach it and its links. */
-export declare function InfoTip({ text, side, className, children, describesControl, open, onOpenChange, keepSide, }: InfoTipProps): import("react").JSX.Element | null;
+export declare function InfoTip({ text, side, className, children, describesControl, open, onOpenChange, keepSide, anchor, }: InfoTipProps): import("react").JSX.Element | null;
 export {};

package/dist/components/InfoTip.js

@@ -31,7 +31,7 @@ function formatInfoTipContent(content) {
 var hasLink = (content) => new RegExp(linkRegex.source).test(content);
 /** Extra detail behind an info trigger. A popover that also opens on hover, so
 *  touch and screen reader users can reach it and its links. */
-function InfoTip({ text, side = "top", className, children, describesControl = false, open, onOpenChange, keepSide = false }) {
+function InfoTip({ text, side = "top", className, children, describesControl = false, open, onOpenChange, keepSide = false, anchor }) {
 	const t = useStrings().common;
 	if (!text) return children ? /* @__PURE__ */ jsx("span", {
 		className,
@@ -43,6 +43,7 @@ function InfoTip({ text, side = "top", className, children, describesControl = f
 		openOnHover: true,
 		side,
 		keepSide,
+		anchor,
 		...open === void 0 ? {} : { open },
 		...onOpenChange ? { onOpenChange } : {},
 		...describesControl && { initialFocus: "none" },

package/dist/components/Menu.js

@@ -1,13 +1,16 @@
 import { cx } from "../cx.js";
 import { CheckIcon, ChevronRightIcon } from "../icons.js";
 import { panelClassName, panelItemClassName, positionerClassName } from "./floating.js";
+import { useFullscreenContainer } from "./fullscreen.js";
 import { Menu } from "@base-ui/react/menu";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Menu.tsx
 var itemClassName = panelItemClassName;
 /** The portal, positioner and popup every menu needs. */
 function MenuPopup({ children, className, side = "bottom", align = "start", anchor, keepMounted = false }) {
+	const fullscreen = useFullscreenContainer();
 	return /* @__PURE__ */ jsx(Menu.Portal, {
+		container: fullscreen,
 		keepMounted,
 		children: /* @__PURE__ */ jsx(Menu.Positioner, {
 			side,

package/dist/components/Modal.js

@@ -1,4 +1,5 @@
 import { cx } from "../cx.js";
+import { useFullscreenContainer } from "./fullscreen.js";
 import { closeHandler } from "./dismiss.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
@@ -21,37 +22,41 @@ var sizeClasses = {
 *  and a `footer` for the standard layout, as a Drawer has, or lay out the whole
 *  panel with the children. */
 function Modal({ open, onClose, title, description, footer, size, alert = false, dismissible = true, align = "top", panel = true, backdropClassName = "bg-black/40", className, children, ...popupProps }) {
+	const fullscreen = useFullscreenContainer();
 	const onOpenChange = closeHandler(dismissible, onClose);
 	const header = title !== void 0 || description !== void 0;
 	const body = children !== void 0 && children !== null && children !== false;
 	const laidOut = header || footer !== void 0;
-	const content = /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: cx("fixed inset-0 z-(--layer-modal)", backdropClassName) }), /* @__PURE__ */ jsx(Dialog.Viewport, {
-		className: cx("fixed inset-0 z-(--layer-modal) flex justify-center px-4 pt-20 pb-8", align === "center" ? "items-center" : "items-start sm:pt-[max(14vh,5rem)]"),
-		children: /* @__PURE__ */ jsx(Dialog.Popup, {
-			...popupProps,
-			className: cx(panel && "rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-2xl", size && [sizeClasses[size], "max-w-full"], laidOut && "flex max-h-full flex-col", "outline-none", className),
-			children: laidOut ? /* @__PURE__ */ jsxs(Fragment, { children: [
-				header && /* @__PURE__ */ jsxs("div", {
-					className: cx("shrink-0 px-5 pt-5", !body && "pb-5"),
-					children: [title !== void 0 && /* @__PURE__ */ jsx(ModalTitle, {
-						className: "m-0 text-lg font-semibold",
-						children: title
-					}), description !== void 0 && /* @__PURE__ */ jsx(ModalDescription, {
-						className: "m-0 mt-1.5 text-sm text-(--theme-muted-text-color)",
-						children: description
-					})]
-				}),
-				body && /* @__PURE__ */ jsx("div", {
-					className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 py-4",
-					children
-				}),
-				footer !== void 0 && /* @__PURE__ */ jsx("div", {
-					className: "flex shrink-0 items-center justify-end gap-2 border-t border-(--theme-border) px-5 py-3",
-					children: footer
-				})
-			] }) : children
-		})
-	})] });
+	const content = /* @__PURE__ */ jsxs(Dialog.Portal, {
+		container: fullscreen,
+		children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: cx("fixed inset-0 z-(--layer-modal)", backdropClassName) }), /* @__PURE__ */ jsx(Dialog.Viewport, {
+			className: cx("fixed inset-0 z-(--layer-modal) flex justify-center px-4 pt-20 pb-8", align === "center" ? "items-center" : "items-start sm:pt-[max(14vh,5rem)]"),
+			children: /* @__PURE__ */ jsx(Dialog.Popup, {
+				...popupProps,
+				className: cx(panel && "rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-2xl", size && [sizeClasses[size], "max-w-full"], laidOut && "flex max-h-full flex-col", "outline-none", className),
+				children: laidOut ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					header && /* @__PURE__ */ jsxs("div", {
+						className: cx("shrink-0 px-5 pt-5", !body && "pb-5"),
+						children: [title !== void 0 && /* @__PURE__ */ jsx(ModalTitle, {
+							className: "m-0 text-lg font-semibold",
+							children: title
+						}), description !== void 0 && /* @__PURE__ */ jsx(ModalDescription, {
+							className: "m-0 mt-1.5 text-sm text-(--theme-muted-text-color)",
+							children: description
+						})]
+					}),
+					body && /* @__PURE__ */ jsx("div", {
+						className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 py-4",
+						children
+					}),
+					footer !== void 0 && /* @__PURE__ */ jsx("div", {
+						className: "flex shrink-0 items-center justify-end gap-2 border-t border-(--theme-border) px-5 py-3",
+						children: footer
+					})
+				] }) : children
+			})
+		})]
+	});
 	return alert ? /* @__PURE__ */ jsx(AlertDialog.Root, {
 		open,
 		onOpenChange,

package/dist/components/Popover.d.ts

@@ -33,6 +33,9 @@ export interface PopoverOptions extends Omit<BasePopover.Popup.Props, 'className
      *  a list read before one item in it is picked, or nowhere, for a popover that
      *  offers an action on what the reader is doing, such as copying a selection. */
     initialFocus?: 'first-control' | 'popup' | 'none';
+    /** Placed against this element rather than its trigger, such as a tip beside the field it
+     *  describes. It still opens and closes from the trigger. */
+    anchor?: Element | null | undefined;
     /** Stays on `side` where it doesn't fit rather than flipping to the other, for a popup that
      *  must not cover what is there, such as the control a tip describes while it is typed in. */
     keepSide?: boolean | undefined;
@@ -46,5 +49,5 @@ export interface PopoverOptions extends Omit<BasePopover.Popup.Props, 'className
  *  flips and shifts to stay on screen, closes on Escape or a press outside, and
  *  returns focus to the trigger. Use a Menu for a list of actions, and a
  *  HoverCard for a preview a link already leads to. */
-export declare function Popover({ trigger, at, title, open, defaultOpen, onOpenChange, side, align, openOnHover, initialFocus, keepSide, variant, className, children, ...popupProps }: PopoverProps): import("react").JSX.Element;
+export declare function Popover({ trigger, at, title, open, defaultOpen, onOpenChange, side, align, openOnHover, initialFocus, anchor, keepSide, variant, className, children, ...popupProps }: PopoverProps): import("react").JSX.Element;
 export {};

package/dist/components/Popover.js

@@ -1,5 +1,6 @@
 import { cx } from "../cx.js";
 import { panelClassName, positionerClassName, tipClassName, toPositionerAnchor } from "./floating.js";
+import { useFullscreenContainer } from "./fullscreen.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, use, useCallback, useRef } from "react";
 import { Popover } from "@base-ui/react/popover";
@@ -16,7 +17,8 @@ function useClosePopover() {
 *  flips and shifts to stay on screen, closes on Escape or a press outside, and
 *  returns focus to the trigger. Use a Menu for a list of actions, and a
 *  HoverCard for a preview a link already leads to. */
-function Popover$1({ trigger, at, title, open, defaultOpen, onOpenChange, side = "bottom", align = "center", openOnHover = false, initialFocus = "first-control", keepSide = false, variant = "panel", className, children, ...popupProps }) {
+function Popover$1({ trigger, at, title, open, defaultOpen, onOpenChange, side = "bottom", align = "center", openOnHover = false, initialFocus = "first-control", anchor, keepSide = false, variant = "panel", className, children, ...popupProps }) {
+	const fullscreen = useFullscreenContainer();
 	const tip = variant === "tip";
 	const popup = useRef(null);
 	const actions = useRef(null);
@@ -33,32 +35,35 @@ function Popover$1({ trigger, at, title, open, defaultOpen, onOpenChange, side =
 				delay: 300,
 				closeDelay: 150
 			} : {}
-		}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
-			side,
-			align,
-			sideOffset: tip ? 8 : 6,
-			collisionPadding: 8,
-			...keepSide && { collisionAvoidance: { side: "none" } },
-			...at ? { anchor: toPositionerAnchor(at) } : {},
-			className: positionerClassName,
-			children: /* @__PURE__ */ jsxs(Popover.Popup, {
-				...popupProps,
-				ref: popup,
-				initialFocus: initialFocus === "popup" ? popup : initialFocus === "first-control",
-				className: cx(tip ? cx("max-w-sm text-left", tipClassName) : cx(panelClassName, "max-h-(--available-height) max-w-[calc(100vw-16px)] overflow-y-auto p-3"), className),
-				children: [
-					tip && /* @__PURE__ */ jsx(Popover.Arrow, { className: "size-2 rotate-45 bg-(--theme-app) data-[side=top]:-bottom-1 data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1" }),
-					title && /* @__PURE__ */ jsx(Popover.Title, {
-						className: "mb-2 text-sm font-semibold",
-						children: title
-					}),
-					/* @__PURE__ */ jsx(CloseContext, {
-						value: close,
-						children
-					})
-				]
+		}), /* @__PURE__ */ jsx(Popover.Portal, {
+			container: fullscreen,
+			children: /* @__PURE__ */ jsx(Popover.Positioner, {
+				side,
+				align,
+				sideOffset: tip ? 8 : 6,
+				collisionPadding: 8,
+				...keepSide && { collisionAvoidance: { side: "none" } },
+				...at ? { anchor: toPositionerAnchor(at) } : anchor ? { anchor } : {},
+				className: positionerClassName,
+				children: /* @__PURE__ */ jsxs(Popover.Popup, {
+					...popupProps,
+					ref: popup,
+					initialFocus: initialFocus === "popup" ? popup : initialFocus === "first-control",
+					className: cx(tip ? cx("max-w-sm text-left", tipClassName) : cx(panelClassName, "max-h-(--available-height) max-w-[calc(100vw-16px)] overflow-y-auto p-3"), className),
+					children: [
+						tip && /* @__PURE__ */ jsx(Popover.Arrow, { className: "size-2 rotate-45 bg-(--theme-app) data-[side=top]:-bottom-1 data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1" }),
+						title && /* @__PURE__ */ jsx(Popover.Title, {
+							className: "mb-2 text-sm font-semibold",
+							children: title
+						}),
+						/* @__PURE__ */ jsx(CloseContext, {
+							value: close,
+							children
+						})
+					]
+				})
 			})
-		}) })]
+		})]
 	});
 }
 //#endregion

package/dist/components/Radio.js

@@ -9,7 +9,7 @@ import { RadioGroup } from "@base-ui/react/radio-group";
 function Radio$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Radio.Root, {
 		...props,
-		className: cx("flex size-4 shrink-0 items-center justify-center rounded-full border border-(--theme-border-strong) bg-(--theme-input-bg) cursor-pointer transition-colors motion-reduce:transition-none", focusOutline, "data-checked:border-(--theme-accent) data-checked:bg-(--theme-accent)", "aria-invalid:border-(--theme-error)", "data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+		className: cx("flex size-4 shrink-0 items-center justify-center rounded-full border border-(--theme-border-strong) bg-(--theme-input-bg) cursor-pointer transition-colors motion-reduce:transition-none", focusOutline, "data-checked:border-(--theme-focus) data-checked:bg-(--theme-accent)", "aria-invalid:border-(--theme-error)", "data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
 		children: /* @__PURE__ */ jsx(Radio.Indicator, { className: "size-1.5 rounded-full bg-(--theme-accent-text)" })
 	});
 }

package/dist/components/Select.js

@@ -1,6 +1,7 @@
 import { cx } from "../cx.js";
 import { CheckIcon, ChevronDownIcon } from "../icons.js";
 import { panelClassName, positionerClassName } from "./floating.js";
+import { useFullscreenContainer } from "./fullscreen.js";
 import { Tooltip } from "./Tooltip.js";
 import { fieldBox } from "./fieldBox.js";
 import { optionNaming, pickerItemClassName } from "./comboboxItems.js";
@@ -13,6 +14,7 @@ var triggerClassName = "flex cursor-pointer items-center justify-between gap-2 p
 /** Picks one value, or several with `multiple`, from a short list. Use
 *  Combobox when the list is long enough to need filtering. */
 function Select$1({ items, placeholder, className, "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-required": required, trigger, triggerTooltip, size = "md", onItemHighlighted, ...rootProps }) {
+	const fullscreen = useFullscreenContainer();
 	const uid = useId();
 	const labelOf = (value) => items.find((item) => Object.is(item.value, value))?.label;
 	const triggerProps = {
@@ -46,51 +48,54 @@ function Select$1({ items, placeholder, className, "aria-label": ariaLabel, "ari
 				className: "shrink-0 text-(--theme-muted-text-color)",
 				children: /* @__PURE__ */ jsx(ChevronDownIcon, { "aria-hidden": "true" })
 			})]
-		}), /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
-			alignItemWithTrigger: false,
-			sideOffset: 4,
-			className: positionerClassName,
-			children: /* @__PURE__ */ jsx(Select.Popup, {
-				className: cx("min-w-(--anchor-width) max-w-[min(20rem,var(--available-width))]", panelClassName),
-				children: /* @__PURE__ */ jsx(Select.List, {
-					className: cx("max-h-[min(15rem,var(--available-height))] overflow-y-auto", "p-1"),
-					children: items.map((item, index) => /* @__PURE__ */ jsxs(Select.Item, {
-						value: item.value,
-						disabled: item.disabled,
-						...optionNaming(`${uid}${index}`, item),
-						onFocus: onItemHighlighted && (() => onItemHighlighted(item.value)),
-						className: pickerItemClassName,
-						children: [
-							item.icon && /* @__PURE__ */ jsx("span", {
-								className: "flex shrink-0 items-center",
-								children: item.icon
-							}),
-							/* @__PURE__ */ jsxs("span", {
-								className: "flex min-w-0 flex-col",
-								children: [/* @__PURE__ */ jsxs("span", {
-									className: "flex min-w-0 items-center gap-2",
-									children: [/* @__PURE__ */ jsx(Select.ItemText, {
-										id: `${uid}${index}label`,
-										className: "truncate",
-										children: item.label
-									}), item.badge]
-								}), /* @__PURE__ */ jsx(OptionDescription, {
-									id: `${uid}${index}description`,
-									item
-								})]
-							}),
-							/* @__PURE__ */ jsx(Select.ItemIndicator, {
-								className: "ml-auto flex shrink-0 items-center",
-								children: /* @__PURE__ */ jsx(CheckIcon, {
-									"aria-hidden": "true",
-									className: "size-3.5"
+		}), /* @__PURE__ */ jsx(Select.Portal, {
+			container: fullscreen,
+			children: /* @__PURE__ */ jsx(Select.Positioner, {
+				alignItemWithTrigger: false,
+				sideOffset: 4,
+				className: positionerClassName,
+				children: /* @__PURE__ */ jsx(Select.Popup, {
+					className: cx("min-w-(--anchor-width) max-w-[min(20rem,var(--available-width))]", panelClassName),
+					children: /* @__PURE__ */ jsx(Select.List, {
+						className: cx("max-h-[min(15rem,var(--available-height))] overflow-y-auto", "p-1"),
+						children: items.map((item, index) => /* @__PURE__ */ jsxs(Select.Item, {
+							value: item.value,
+							disabled: item.disabled,
+							...optionNaming(`${uid}${index}`, item),
+							onFocus: onItemHighlighted && (() => onItemHighlighted(item.value)),
+							className: pickerItemClassName,
+							children: [
+								item.icon && /* @__PURE__ */ jsx("span", {
+									className: "flex shrink-0 items-center",
+									children: item.icon
+								}),
+								/* @__PURE__ */ jsxs("span", {
+									className: "flex min-w-0 flex-col",
+									children: [/* @__PURE__ */ jsxs("span", {
+										className: "flex min-w-0 items-center gap-2",
+										children: [/* @__PURE__ */ jsx(Select.ItemText, {
+											id: `${uid}${index}label`,
+											className: "truncate",
+											children: item.label
+										}), item.badge]
+									}), /* @__PURE__ */ jsx(OptionDescription, {
+										id: `${uid}${index}description`,
+										item
+									})]
+								}),
+								/* @__PURE__ */ jsx(Select.ItemIndicator, {
+									className: "ml-auto flex shrink-0 items-center",
+									children: /* @__PURE__ */ jsx(CheckIcon, {
+										"aria-hidden": "true",
+										className: "size-3.5"
+									})
 								})
-							})
-						]
-					}, String(item.value)))
+							]
+						}, String(item.value)))
+					})
 				})
 			})
-		}) })]
+		})]
 	});
 }
 //#endregion

package/dist/components/Slider.js

@@ -17,10 +17,10 @@ function Slider$1({ value, onValueChange, min, max, step = 1, disabled = false,
 		children: /* @__PURE__ */ jsx(Slider.Control, {
 			className: "flex w-full touch-none select-none items-center py-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
 			children: /* @__PURE__ */ jsxs(Slider.Track, {
-				className: "h-1 w-full rounded-full bg-(--theme-border)",
-				children: [/* @__PURE__ */ jsx(Slider.Indicator, { className: "rounded-full bg-(--theme-accent)" }), /* @__PURE__ */ jsx(Slider.Thumb, {
+				className: "h-1 w-full rounded-full bg-(--theme-border-strong)",
+				children: [/* @__PURE__ */ jsx(Slider.Indicator, { className: "rounded-full bg-(--theme-focus)" }), /* @__PURE__ */ jsx(Slider.Thumb, {
 					"aria-label": ariaLabel,
-					className: "size-4 rounded-full border-2 border-(--theme-accent) bg-(--theme-panel-bg) shadow-sm has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-(--theme-focus)"
+					className: "size-4 rounded-full border-2 border-(--theme-focus) bg-(--theme-panel-bg) shadow-sm has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-(--theme-focus)"
 				})]
 			})
 		})

package/dist/components/Switch.js

@@ -21,7 +21,7 @@ var sizes = {
 function Switch$1({ size = "md", className, onLabel, offLabel, ...props }) {
 	const control = /* @__PURE__ */ jsx(Switch.Root, {
 		...props,
-		className: cx("peer inline-flex shrink-0 items-center rounded-full p-0.5 bg-(--theme-border-strong) transition-colors duration-200 cursor-pointer motion-reduce:transition-none", "data-checked:bg-(--theme-accent)", focusOutline, "aria-invalid:ring-2 aria-invalid:ring-(--theme-error)", "data-disabled:cursor-not-allowed data-disabled:opacity-50", sizes[size].root, className),
+		className: cx("peer inline-flex shrink-0 items-center rounded-full p-0.5 bg-(--theme-border-strong) transition-colors duration-200 cursor-pointer motion-reduce:transition-none", "data-checked:bg-(--theme-focus)", focusOutline, "aria-invalid:ring-2 aria-invalid:ring-(--theme-error)", "data-disabled:cursor-not-allowed data-disabled:opacity-50", sizes[size].root, className),
 		children: /* @__PURE__ */ jsx(Switch.Thumb, { className: cx("rounded-full bg-white shadow-sm transition-transform duration-200 motion-reduce:transition-none", sizes[size].thumb) })
 	});
 	if (onLabel === void 0 && offLabel === void 0) return control;

package/dist/components/Tooltip.js

@@ -1,4 +1,5 @@
 import { positionerClassName, tipArrowClassName, tipClassName } from "./floating.js";
+import { useFullscreenContainer } from "./fullscreen.js";
 import { keyedByContent } from "./keys.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, createContext, use, useState } from "react";
@@ -19,18 +20,22 @@ function KbdShortcut({ keys }) {
 	});
 }
 function TooltipPopup({ content, shortcut, side }) {
-	return /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
-		side,
-		sideOffset: 8,
-		className: positionerClassName,
-		children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
-			className: `max-w-xs ${tipClassName}`,
-			children: [/* @__PURE__ */ jsx(Tooltip.Arrow, { className: tipArrowClassName }), shortcut ? /* @__PURE__ */ jsxs("span", {
-				className: "inline-flex items-center gap-2",
-				children: [content, /* @__PURE__ */ jsx(KbdShortcut, { keys: shortcut })]
-			}) : content]
+	const fullscreen = useFullscreenContainer();
+	return /* @__PURE__ */ jsx(Tooltip.Portal, {
+		container: fullscreen,
+		children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+			side,
+			sideOffset: 8,
+			className: positionerClassName,
+			children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
+				className: `max-w-xs ${tipClassName}`,
+				children: [/* @__PURE__ */ jsx(Tooltip.Arrow, { className: tipArrowClassName }), shortcut ? /* @__PURE__ */ jsxs("span", {
+					className: "inline-flex items-center gap-2",
+					children: [content, /* @__PURE__ */ jsx(KbdShortcut, { keys: shortcut })]
+				}) : content]
+			})
 		})
-	}) });
+	});
 }
 /** One popup serves every Tooltip below it, so each anchor costs only a trigger.
 *  UIProvider mounts it; nothing else needs to. */

package/dist/components/fieldBox.js

@@ -20,7 +20,7 @@ var sizes = {
 *  thumb: an outline in the theme's focus color, which is solved for 3:1 on every surface a
 *  control sits on, so it shows on a checked control as well as an empty one. */
 var focusOutline = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-focus)";
-var base = "w-full min-w-0 rounded-md border border-(--theme-border) bg-(--theme-input-bg) text-(--theme-app) outline-none transition-colors placeholder:text-(--theme-placeholder)";
+var base = "w-full min-w-0 rounded-md border border-(--theme-border-strong) bg-(--theme-input-bg) text-(--theme-app) outline-none transition-colors placeholder:text-(--theme-placeholder)";
 var own = cx("focus-visible:border-(--theme-focus) focus-visible:ring-1 focus-visible:ring-(--theme-focus)", "aria-invalid:border-(--theme-error) aria-invalid:focus-visible:ring-(--theme-error)", "disabled:cursor-not-allowed disabled:bg-(--theme-input-disabled-bg) disabled:text-(--theme-placeholder)", "data-disabled:cursor-not-allowed data-disabled:bg-(--theme-input-disabled-bg) data-disabled:text-(--theme-placeholder)");
 var inside = cx("has-[:focus-visible]:border-(--theme-focus) has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-(--theme-focus)", "has-[[aria-invalid=true]]:border-(--theme-error) has-[[aria-invalid=true]:focus-visible]:ring-(--theme-error)", "has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-(--theme-input-disabled-bg) has-[input:disabled]:text-(--theme-placeholder)", "data-disabled:cursor-not-allowed data-disabled:bg-(--theme-input-disabled-bg) data-disabled:text-(--theme-placeholder)");
 /** The box every input-like control draws: text inputs, textareas, and the triggers of

package/dist/components/fullscreen.d.ts

@@ -0,0 +1,4 @@
+/** Where a popup portals while an element is fullscreen: that element. The browser
+ *  shows only the fullscreen element's subtree, so a popup portaled to the body
+ *  would open unseen behind it. Undefined otherwise, which keeps the body. */
+export declare function useFullscreenContainer(): HTMLElement | undefined;

package/dist/components/fullscreen.js

@@ -0,0 +1,18 @@
+import { useSyncExternalStore } from "react";
+//#region src/components/fullscreen.ts
+function subscribe(onChange) {
+	document.addEventListener("fullscreenchange", onChange);
+	return () => document.removeEventListener("fullscreenchange", onChange);
+}
+function snapshot() {
+	const element = document.fullscreenElement;
+	return element instanceof HTMLElement ? element : void 0;
+}
+/** Where a popup portals while an element is fullscreen: that element. The browser
+*  shows only the fullscreen element's subtree, so a popup portaled to the body
+*  would open unseen behind it. Undefined otherwise, which keeps the body. */
+function useFullscreenContainer() {
+	return useSyncExternalStore(subscribe, snapshot, () => void 0);
+}
+//#endregion
+export { useFullscreenContainer };