@parallelworks/ui 0.55.0 → 0.57.0

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/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.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";
@@ -17,6 +18,7 @@ function useClosePopover() {
 *  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", 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) } : 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
-					})
-				]
+		}), /* @__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/ThemeEditor.js

@@ -347,7 +347,7 @@ function ThemePreview({ theme, mode }) {
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ jsx("span", {
-						className: cx(fieldBox({ size: "sm" }), "flex flex-1 cursor-default items-center text-(--theme-placeholder) border-(--theme-border-strong)"),
+						className: cx(fieldBox({ size: "sm" }), "flex flex-1 cursor-default items-center text-(--theme-placeholder)"),
 						children: t.previewSearch
 					}), /* @__PURE__ */ jsx("span", {
 						className: "rounded-md bg-(--theme-accent) px-3 py-1.5 text-xs font-medium text-(--theme-accent-text)",

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,9 +20,9 @@ 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 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)");
+var base = "w-full min-w-0 rounded-md border border-(--theme-border-field) bg-(--theme-input-bg) text-(--theme-app) outline-none transition-colors placeholder:text-(--theme-placeholder) hover:border-(--theme-border-strong)";
+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:hover:border-(--theme-border-field) disabled:bg-(--theme-input-disabled-bg) disabled:text-(--theme-placeholder)", "data-disabled:cursor-not-allowed data-disabled:hover:border-(--theme-border-field) 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]:hover:border-(--theme-border-field) has-[input:disabled]:bg-(--theme-input-disabled-bg) has-[input:disabled]:text-(--theme-placeholder)", "data-disabled:cursor-not-allowed data-disabled:hover:border-(--theme-border-field) 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
 *  pickers. Invalid follows `aria-invalid`, disabled follows `disabled` or `data-disabled`. */
 function fieldBox({ size = "md", multiline = false, padded = true, within = false } = {}) {

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 };

package/dist/graph/GraphEditorDialogs.d.ts

@@ -12,7 +12,7 @@ export declare const STEP_FIELDS: readonly ['name', 'run', 'shell', 'uses', 'wit
 export declare const RETRY_FIELDS: readonly ['max-retries', 'interval', 'timeout', 'clean-on-retry'];
 interface ViewProps {
     source?: string | undefined;
-    /** Adds the job or step being edited; applied with the first save, so cancelling adds nothing. */
+    /** Adds the job or step being edited; applied with the first save, so canceling adds nothing. */
     addition?: GraphEdit | undefined;
     /** The view to open in; YAML unless the host says form. */
     view?: SettingsView | undefined;

package/dist/icons.d.ts

@@ -8,6 +8,7 @@ export interface IconProps extends LucideProps {
 /** An icon from this module or the brand icons. */
 export type IconType = (props: IconProps) => ReactNode;
 export declare const AccessIcon: IconType;
+export declare const AddAllocationIcon: IconType;
 export declare const AddIcon: IconType;
 export declare const AddProjectIcon: IconType;
 export declare const AddUserIcon: IconType;
@@ -19,6 +20,7 @@ export declare const ArrowDownIcon: IconType;
 export declare const ArrowLeftIcon: IconType;
 export declare const ArrowRightIcon: IconType;
 export declare const ArrowUpIcon: IconType;
+export declare const ArticleIcon: IconType;
 export declare const AttachmentIcon: IconType;
 export declare const AuthenticationIcon: IconType;
 export declare const BillingIcon: IconType;

package/dist/icons.js

@@ -1,5 +1,5 @@
 import { ErrorCheckmark, SuccessCheckmark } from "./components/StatusIcons.js";
-import { Activity, Archive, ArrowDown, ArrowDownWideNarrow, ArrowLeft, ArrowLeftRight, ArrowRight, ArrowUp, ArrowUpDown, ArrowUpNarrowWide, AtSign, BadgeCheck, Ban, BanknoteX, Bell, BellOff, BellRing, BookUser, Bot, Boxes, Braces, Brain, BrainCircuit, Briefcase, Building2, Calendar, CalendarClock, CalendarSync, CalendarX, Camera, ChartLine, ChartPie, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsDown, ChevronsDownUp, ChevronsUp, ChevronsUpDown, Circle, CircleAlert, CircleCheck, CircleDollarSign, CircleDot, CircleHelp, CircleMinus, CirclePlay, CircleSlash, CircleX, ClipboardCheck, ClipboardPen, Clock, Cloud, CloudCog, CloudOff, Code, CodeXml, Cog, Columns3, Copy, CopyPlus, CornerUpRight, Cpu, CreditCard, Database, DatabaseSearch, DatabaseZap, Disc3, DollarSign, Download, Earth, Ellipsis, EthernetPort, ExternalLink, Eye, EyeOff, File, FileArchive, FileCode, FileImage, FileJson, FileKey, FilePenLine, FileText, FileType, Files, Fingerprint, Flag, FlaskConical, Folder, FolderKanban, FolderOpen, FolderPlus, FolderTree, Folders, Funnel, FunnelX, Gauge, GitCommitHorizontal, GitFork, GitPullRequest, Globe, GraduationCap, Grid3x3, GripHorizontal, Group, Handshake, HardDrive, HatGlasses, Headset, Heart, HeartOff, History, Hourglass, House, IdCard, Inbox, Info, Key, KeyRound, Keyboard, Landmark, Languages, Layers, LayoutGrid, LibraryBig, Link, List, ListOrdered, ListTodo, ListVideo, LoaderCircle, Lock, LogIn, LogOut, Logs, Mail, MailCheck, MailX, MapPin, MapPinned, Maximize, Megaphone, MemoryStick, Menu, MessageSquare, MessageSquareWarning, MessagesSquare, Minimize, Minimize2, Minus, Monitor, MonitorDown, MonitorPlay, MonitorSmartphone, Moon, Music, Network, NotebookText, PaintBucket, PanelLeft, PanelLeftClose, PanelLeftOpen, Paperclip, PartyPopper, Pause, PcCase, Pencil, PencilLine, Phone, Pin, Play, PlugZap, Plus, Power, Printer, QrCode, Redo2, RefreshCw, Rocket, RotateCcw, RotateCcwSquare, Route, Save, Scale, ScanEye, Search, Send, Server, Settings, Settings2, Share2, Sheet, Shield, ShieldOff, ShieldUser, Smartphone, Sparkles, Square, SquareChevronRight, SquareCode, SquareDashed, SquarePen, SquareSplitHorizontal, SquareTerminal, Star, Store, Sun, Tag, Terminal, TextCursorInput, Trash2, TriangleAlert, Undo2, UndoDot, Unlink, Unplug, Upload, User, UserCheck, UserLock, UserMinus, UserPlus, UserX, Users, Video, Wallet, WandSparkles, Waypoints, Webhook, Wrench, X, Zap, ZoomIn, ZoomOut } from "lucide-react";
+import { Activity, Archive, ArrowDown, ArrowDownWideNarrow, ArrowLeft, ArrowLeftRight, ArrowRight, ArrowUp, ArrowUpDown, ArrowUpNarrowWide, AtSign, BadgeCheck, Ban, BanknoteX, Bell, BellOff, BellRing, BookOpenText, BookUser, Bot, Boxes, Braces, Brain, BrainCircuit, Briefcase, Building2, Calendar, CalendarClock, CalendarSync, CalendarX, Camera, ChartLine, ChartPie, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsDown, ChevronsDownUp, ChevronsUp, ChevronsUpDown, Circle, CircleAlert, CircleCheck, CircleDollarSign, CircleDot, CircleHelp, CircleMinus, CirclePlay, CircleSlash, CircleX, ClipboardCheck, ClipboardPen, Clock, Cloud, CloudCog, CloudOff, Code, CodeXml, Cog, Columns3, Copy, CopyPlus, CornerUpRight, Cpu, CreditCard, Database, DatabaseSearch, DatabaseZap, Disc3, DollarSign, Download, Earth, Ellipsis, EthernetPort, ExternalLink, Eye, EyeOff, File, FileArchive, FileCode, FileImage, FileJson, FileKey, FilePenLine, FileText, FileType, Files, Fingerprint, Flag, FlaskConical, Folder, FolderKanban, FolderOpen, FolderPlus, FolderTree, Folders, Funnel, FunnelX, Gauge, GitCommitHorizontal, GitFork, GitPullRequest, Globe, GraduationCap, Grid3x3, GripHorizontal, Group, Handshake, HardDrive, HatGlasses, Headset, Heart, HeartOff, History, Hourglass, House, IdCard, Inbox, Info, Key, KeyRound, Keyboard, Landmark, Languages, Layers, LayoutGrid, LibraryBig, Link, List, ListOrdered, ListTodo, ListVideo, LoaderCircle, Lock, LogIn, LogOut, Logs, Mail, MailCheck, MailX, MapPin, MapPinned, Maximize, Megaphone, MemoryStick, Menu, MessageSquare, MessageSquareWarning, MessagesSquare, Minimize, Minimize2, Minus, Monitor, MonitorDown, MonitorPlay, MonitorSmartphone, Moon, Music, Network, NotebookText, PaintBucket, PanelLeft, PanelLeftClose, PanelLeftOpen, Paperclip, PartyPopper, Pause, PcCase, Pencil, PencilLine, Phone, Pin, Play, PlugZap, Plus, Power, Printer, QrCode, Redo2, RefreshCw, Rocket, RotateCcw, RotateCcwSquare, Route, Save, Scale, ScanEye, Search, Send, Server, Settings, Settings2, Share2, Sheet, Shield, ShieldOff, ShieldUser, Smartphone, Sparkles, Square, SquareChevronRight, SquareCode, SquareDashed, SquarePen, SquareSplitHorizontal, SquareTerminal, Star, Store, Sun, Tag, Terminal, TextCursorInput, Trash2, TriangleAlert, Undo2, UndoDot, Unlink, Unplug, Upload, User, UserCheck, UserLock, UserMinus, UserPlus, UserX, Users, Video, Wallet, WandSparkles, Waypoints, Webhook, Wrench, X, Zap, ZoomIn, ZoomOut, createLucideIcon } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/icons.tsx
 var STROKE_WIDTH = 2;
@@ -21,7 +21,26 @@ function icon(Glyph, defaults) {
 	return Icon;
 }
 var filled = { fill: "currentColor" };
+var WalletPlus = /* @__PURE__ */ createLucideIcon("wallet-plus", [
+	["path", {
+		d: "M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1",
+		key: "wallet-flap"
+	}],
+	["path", {
+		d: "M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4",
+		key: "wallet-body"
+	}],
+	["path", {
+		d: "M10 11v6",
+		key: "plus-stem"
+	}],
+	["path", {
+		d: "M7 14h6",
+		key: "plus-bar"
+	}]
+]);
 var AccessIcon = /* @__PURE__ */ icon(UserLock);
+var AddAllocationIcon = /* @__PURE__ */ icon(WalletPlus);
 var AddIcon = /* @__PURE__ */ icon(Plus);
 var AddProjectIcon = /* @__PURE__ */ icon(FolderPlus);
 var AddUserIcon = /* @__PURE__ */ icon(UserPlus);
@@ -33,6 +52,7 @@ var ArrowDownIcon = /* @__PURE__ */ icon(ArrowDown);
 var ArrowLeftIcon = /* @__PURE__ */ icon(ArrowLeft);
 var ArrowRightIcon = /* @__PURE__ */ icon(ArrowRight);
 var ArrowUpIcon = /* @__PURE__ */ icon(ArrowUp);
+var ArticleIcon = /* @__PURE__ */ icon(BookOpenText);
 var AttachmentIcon = /* @__PURE__ */ icon(Paperclip);
 var AuthenticationIcon = /* @__PURE__ */ icon(Fingerprint);
 var BillingIcon = /* @__PURE__ */ icon(CreditCard);
@@ -264,4 +284,4 @@ var ZipIcon = /* @__PURE__ */ icon(FileArchive);
 var ZoomInIcon = /* @__PURE__ */ icon(ZoomIn);
 var ZoomOutIcon = /* @__PURE__ */ icon(ZoomOut);
 //#endregion
-export { APIIcon, AccessIcon, AddIcon, AddProjectIcon, AddUserIcon, AgentIcon, AllocationIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, AttachmentIcon, AuthenticationIcon, BillingIcon, BriefcaseIcon, BucketIcon, BuildWorkflowIcon, CalendarIcon, CancelIcon, CelebrateIcon, CertificateIcon, ChangesRequestedIcon, ChartIcon, ChatIcon, CheckIcon, ChevronDoubleDownIcon, ChevronDoubleUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardCheckIcon, ClockIcon, CloseIcon, CloudIcon, ClusterIcon, CodeIcon, CollapseIcon, ColumnsIcon, CommentIcon, CommitIcon, ComputeIcon, ConnectIcon, ContractIcon, CopyIcon, CustomizeIcon, DesktopIcon, DestroyIcon, DeviceIcon, DirectoryIcon, DisableCostIcon, DisableUserIcon, DisconnectIcon, DiskIcon, DisplayIcon, DownloadIcon, DragHandleIcon, DuplicateIcon, EditIcon, EditorIcon, EducationIcon, EnableCostIcon, EnableUserIcon, EndpointIcon, ErrorCheckmark, ErrorIcon, EventsIcon, ExpandIcon, ExpandVerticalIcon, ExpiredIcon, ExpiringIcon, ExpressionIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FailIcon, FavoriteIcon, FavoriteOutlineIcon, FeaturedIcon, FileIcon, FileTextIcon, FilesIcon, FilesystemIcon, FilterClearIcon, FilterIcon, FlaggedIcon, FlaskIcon, FolderIcon, FolderOpenIcon, FolderTreeIcon, ForbiddenIcon, ForkIcon, GearsIcon, GlobeIcon, GovernmentIcon, GraphIcon, GridIcon, HealthMonitoringIcon, HelpIcon, HistoryIcon, HomeIcon, IdCardIcon, ImageIcon, ImpersonateIcon, InboxIcon, IndexIcon, InfoIcon, InfrastructureLayersIcon, InputFormIcon, InstallIcon, InstanceIcon, InstanceTypeIcon, IpAddressIcon, IssueIcon, JobIcon, JsonIcon, KeyIcon, KeyboardIcon, KubernetesNamespaceIcon, LanguageIcon, LegalIcon, LibraryIcon, LicenseIcon, LinkIcon, ListViewIcon, LockIcon, MFAIcon, MachineImageIcon, MailFailedIcon, MailIcon, MailVerifiedIcon, MapPinIcon, MarketplaceIcon, MatrixIcon, MegaphoneIcon, MigrationIcon, MinimizeIcon, MinusIcon, MlIcon, MoneyIcon, MoonIcon, MoreIcon, MusicIcon, MuteIcon, NavigationIcon, NetworkInterfaceIcon, NewChatIcon, NodeIcon, NotRunningIcon, NotebookIcon, NotificationIcon, OnboardingIcon, OpenInNewGraphIcon, OrganizationIcon, PartnerIcon, PasswordIcon, PauseIcon, PdfIcon, PendingIcon, PhoneIcon, PieChartIcon, PinFilledIcon, PinIcon, PowerIcon, PowershellIcon, PreviewIcon, PrintIcon, ProjectIcon, PublishIcon, PullRequestIcon, QRCodeIcon, QueueIcon, QuotaIcon, RedoIcon, RefreshIcon, RemoveIcon, RemoveUserIcon, RenameIcon, RenewIcon, ResetLayoutIcon, ResourceGroupIcon, ResourceIcon, RetryIcon, RoleIcon, RollbackIcon, RunWorkflowIcon, RunningIcon, RunsIcon, SaveIcon, SchedulerIcon, ScriptIcon, SearchIcon, SendIcon, ServiceIcon, SessionIcon, SettingsIcon, ShareIcon, ShieldIcon, ShieldOffIcon, ShrinkIcon, SidebarCloseIcon, SidebarIcon, SidebarOpenIcon, SignInIcon, SignOutIcon, SkipIcon, SnapshotIcon, SortDownIcon, SortUnsortedIcon, SortUpIcon, SparklesIcon, SplitIcon, SpreadsheetIcon, StartIcon, StopIcon, StorageIcon, SubdomainIcon, SuccessCheckmark, SuccessIcon, SunIcon, SupportIcon, SwapIcon, TagIcon, TerminalIcon, ThinkingIcon, TodoIcon, TrashIcon, TunnelIcon, UndoIcon, UnfavoriteIcon, UnlinkIcon, UnmuteIcon, UploadIcon, UserIcon, UserWorkspaceIcon, UsersIcon, VideoIcon, WarningIcon, WebhookIcon, ZapIcon, ZipIcon, ZoomInIcon, ZoomOutIcon };
+export { APIIcon, AccessIcon, AddAllocationIcon, AddIcon, AddProjectIcon, AddUserIcon, AgentIcon, AllocationIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArticleIcon, AttachmentIcon, AuthenticationIcon, BillingIcon, BriefcaseIcon, BucketIcon, BuildWorkflowIcon, CalendarIcon, CancelIcon, CelebrateIcon, CertificateIcon, ChangesRequestedIcon, ChartIcon, ChatIcon, CheckIcon, ChevronDoubleDownIcon, ChevronDoubleUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardCheckIcon, ClockIcon, CloseIcon, CloudIcon, ClusterIcon, CodeIcon, CollapseIcon, ColumnsIcon, CommentIcon, CommitIcon, ComputeIcon, ConnectIcon, ContractIcon, CopyIcon, CustomizeIcon, DesktopIcon, DestroyIcon, DeviceIcon, DirectoryIcon, DisableCostIcon, DisableUserIcon, DisconnectIcon, DiskIcon, DisplayIcon, DownloadIcon, DragHandleIcon, DuplicateIcon, EditIcon, EditorIcon, EducationIcon, EnableCostIcon, EnableUserIcon, EndpointIcon, ErrorCheckmark, ErrorIcon, EventsIcon, ExpandIcon, ExpandVerticalIcon, ExpiredIcon, ExpiringIcon, ExpressionIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FailIcon, FavoriteIcon, FavoriteOutlineIcon, FeaturedIcon, FileIcon, FileTextIcon, FilesIcon, FilesystemIcon, FilterClearIcon, FilterIcon, FlaggedIcon, FlaskIcon, FolderIcon, FolderOpenIcon, FolderTreeIcon, ForbiddenIcon, ForkIcon, GearsIcon, GlobeIcon, GovernmentIcon, GraphIcon, GridIcon, HealthMonitoringIcon, HelpIcon, HistoryIcon, HomeIcon, IdCardIcon, ImageIcon, ImpersonateIcon, InboxIcon, IndexIcon, InfoIcon, InfrastructureLayersIcon, InputFormIcon, InstallIcon, InstanceIcon, InstanceTypeIcon, IpAddressIcon, IssueIcon, JobIcon, JsonIcon, KeyIcon, KeyboardIcon, KubernetesNamespaceIcon, LanguageIcon, LegalIcon, LibraryIcon, LicenseIcon, LinkIcon, ListViewIcon, LockIcon, MFAIcon, MachineImageIcon, MailFailedIcon, MailIcon, MailVerifiedIcon, MapPinIcon, MarketplaceIcon, MatrixIcon, MegaphoneIcon, MigrationIcon, MinimizeIcon, MinusIcon, MlIcon, MoneyIcon, MoonIcon, MoreIcon, MusicIcon, MuteIcon, NavigationIcon, NetworkInterfaceIcon, NewChatIcon, NodeIcon, NotRunningIcon, NotebookIcon, NotificationIcon, OnboardingIcon, OpenInNewGraphIcon, OrganizationIcon, PartnerIcon, PasswordIcon, PauseIcon, PdfIcon, PendingIcon, PhoneIcon, PieChartIcon, PinFilledIcon, PinIcon, PowerIcon, PowershellIcon, PreviewIcon, PrintIcon, ProjectIcon, PublishIcon, PullRequestIcon, QRCodeIcon, QueueIcon, QuotaIcon, RedoIcon, RefreshIcon, RemoveIcon, RemoveUserIcon, RenameIcon, RenewIcon, ResetLayoutIcon, ResourceGroupIcon, ResourceIcon, RetryIcon, RoleIcon, RollbackIcon, RunWorkflowIcon, RunningIcon, RunsIcon, SaveIcon, SchedulerIcon, ScriptIcon, SearchIcon, SendIcon, ServiceIcon, SessionIcon, SettingsIcon, ShareIcon, ShieldIcon, ShieldOffIcon, ShrinkIcon, SidebarCloseIcon, SidebarIcon, SidebarOpenIcon, SignInIcon, SignOutIcon, SkipIcon, SnapshotIcon, SortDownIcon, SortUnsortedIcon, SortUpIcon, SparklesIcon, SplitIcon, SpreadsheetIcon, StartIcon, StopIcon, StorageIcon, SubdomainIcon, SuccessCheckmark, SuccessIcon, SunIcon, SupportIcon, SwapIcon, TagIcon, TerminalIcon, ThinkingIcon, TodoIcon, TrashIcon, TunnelIcon, UndoIcon, UnfavoriteIcon, UnlinkIcon, UnmuteIcon, UploadIcon, UserIcon, UserWorkspaceIcon, UsersIcon, VideoIcon, WarningIcon, WebhookIcon, ZapIcon, ZipIcon, ZoomInIcon, ZoomOutIcon };

package/dist/styles/theme.css

@@ -23,7 +23,8 @@
   --theme-placeholder: light-dark(#7e8796, #9da5ad);
   --theme-link: light-dark(#06354f, #9dd7ff);
   --theme-border: light-dark(#cacdd0, #30363d);
-  --theme-border-strong: light-dark(#a3a6a9, #4f565d);
+  --theme-border-field: light-dark(#bdc0c3, #3a4148);
+  --theme-border-strong: light-dark(#848689, #676e76);
   --theme-accent: light-dark(#06354f, #5b9ccf);
   --theme-accent-text: light-dark(#ffffff, #000000);
   --theme-accent-hover: light-dark(#002841, #6aace0);