@parallelworks/ui 0.53.0 → 0.55.0

package/dist/components/DatePicker.js

@@ -4,7 +4,7 @@ import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from "../icons.js";
 import { panelClassName, positionerClassName } from "./floating.js";
 import { useStrings } from "./Provider.js";
 import { fieldBox } from "./fieldBox.js";
-import { useFieldControl, useFieldLabelId } from "./Field.js";
+import { useFieldLabelledControl } from "./Field.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Popover } from "@base-ui/react/popover";
@@ -76,8 +76,7 @@ var triggerClassName = (size) => cx(fieldBox({ size }), "flex flex-1 cursor-poin
 function DatePicker({ value, onValueChange, withTime = false, min, max, timeStep = 60, required = false, disabled = false, placeholder, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, size = "md", className }) {
 	const t = useStrings().datePicker;
 	const { common } = useStrings();
-	const field = useFieldControl();
-	const fieldLabelId = useFieldLabelId();
+	const field = useFieldLabelledControl();
 	const [open, setOpen] = useState(false);
 	const [weekStartsOn] = useState(firstWeekday);
 	const day = parseDay(value);
@@ -104,10 +103,10 @@ function DatePicker({ value, onValueChange, withTime = false, min, max, timeStep
 			open,
 			onOpenChange: setOpen,
 			children: [/* @__PURE__ */ jsxs(Popover.Trigger, {
-				id,
+				id: id ?? field?.id,
 				disabled,
 				"aria-label": ariaLabel,
-				"aria-labelledby": ariaLabelledBy ?? (ariaLabel ? void 0 : fieldLabelId),
+				"aria-labelledby": ariaLabelledBy ?? (ariaLabel ? void 0 : field?.["aria-labelledby"]),
 				"aria-describedby": ariaDescribedBy ?? field?.["aria-describedby"],
 				"aria-invalid": ariaInvalid || field?.["aria-invalid"],
 				"aria-required": ariaRequired || field?.["aria-required"],

package/dist/components/Drawer.d.ts

@@ -7,6 +7,11 @@ export interface DrawerProps extends Omit<BaseDrawer.Popup.Props, 'className' |
     title?: ReactNode;
     /** A line under the title. */
     description?: ReactNode;
+    /** Adds a back arrow before the title, for a view the drawer opened over its first, such as
+     *  a form; the drawer stays one drawer rather than another stacking on it. */
+    onBack?: (() => void) | undefined;
+    /** Names the back arrow; defaults to the provider's `back`. */
+    backLabel?: string | undefined;
     /** Actions along the bottom edge, such as Cancel and Save; they stay in view as the body scrolls. */
     footer?: ReactNode;
     /** The edge it slides in from, and the way a swipe dismisses it. */
@@ -44,4 +49,4 @@ export interface DrawerProps extends Omit<BaseDrawer.Popup.Props, 'className' |
  *  `--app-inset-top` (a top bar's height), and at its widest leaves the strip
  *  `--app-inset-start` (a start-side sidebar's width, at least 2.5rem). Set both
  *  on the document root. */
-export declare function Drawer({ open, onClose, title, description, footer, side, width, resizable, minWidth, dismissible, modal, closeButton, contained, keepMounted, padded, className, children, ...popupProps }: DrawerProps): import("react").JSX.Element;
+export declare function Drawer({ open, onClose, title, description, onBack, backLabel, footer, side, width, resizable, minWidth, dismissible, modal, closeButton, contained, keepMounted, padded, className, children, ...popupProps }: DrawerProps): import("react").JSX.Element;

package/dist/components/Drawer.js

@@ -1,5 +1,5 @@
 import { cx } from "../cx.js";
-import { CloseIcon } from "../icons.js";
+import { ArrowLeftIcon, CloseIcon } from "../icons.js";
 import { useStrings } from "./Provider.js";
 import { IconButton } from "./IconButton.js";
 import { closeHandler } from "./dismiss.js";
@@ -15,7 +15,7 @@ import { Drawer } from "@base-ui/react/drawer";
 *  `--app-inset-top` (a top bar's height), and at its widest leaves the strip
 *  `--app-inset-start` (a start-side sidebar's width, at least 2.5rem). Set both
 *  on the document root. */
-function Drawer$1({ open, onClose, title, description, footer, side = "right", width = 480, resizable = false, minWidth = 320, dismissible = true, modal = true, closeButton = true, contained = false, keepMounted = false, padded = true, className, children, ...popupProps }) {
+function Drawer$1({ open, onClose, title, description, onBack, backLabel, footer, side = "right", width = 480, resizable = false, minWidth = 320, dismissible = true, modal = true, closeButton = true, contained = false, keepMounted = false, padded = true, className, children, ...popupProps }) {
 	const { common } = useStrings();
 	const container = useRef(null);
 	const viewport = useRef(null);
@@ -61,20 +61,29 @@ function Drawer$1({ open, onClose, title, description, footer, side = "right", w
 						children: [
 							header && /* @__PURE__ */ jsxs("div", {
 								className: "flex shrink-0 items-start gap-3 border-b border-(--theme-border) px-4 py-3",
-								children: [/* @__PURE__ */ jsxs("div", {
-									className: "min-w-0 flex-1",
-									children: [title !== void 0 && /* @__PURE__ */ jsx(Drawer.Title, {
-										className: "m-0 text-sm font-semibold wrap-break-word",
-										children: title
-									}), description !== void 0 && /* @__PURE__ */ jsx(Drawer.Description, {
-										className: "mt-0.5 text-xs text-(--theme-muted-text-color)",
-										children: description
-									})]
-								}), closeButton && /* @__PURE__ */ jsx(Drawer.Close, { render: /* @__PURE__ */ jsx(IconButton, {
-									icon: /* @__PURE__ */ jsx(CloseIcon, {}),
-									label: common.close,
-									className: "-my-1 -me-1.5"
-								}) })]
+								children: [
+									onBack && /* @__PURE__ */ jsx(IconButton, {
+										icon: /* @__PURE__ */ jsx(ArrowLeftIcon, {}),
+										label: backLabel ?? common.back,
+										onClick: onBack,
+										className: "-my-1 -ms-1.5"
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "min-w-0 flex-1",
+										children: [title !== void 0 && /* @__PURE__ */ jsx(Drawer.Title, {
+											className: "m-0 text-sm font-semibold wrap-break-word",
+											children: title
+										}), description !== void 0 && /* @__PURE__ */ jsx(Drawer.Description, {
+											className: "mt-0.5 text-xs text-(--theme-muted-text-color)",
+											children: description
+										})]
+									}),
+									closeButton && /* @__PURE__ */ jsx(Drawer.Close, { render: /* @__PURE__ */ jsx(IconButton, {
+										icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+										label: common.close,
+										className: "-my-1 -me-1.5"
+									}) })
+								]
 							}),
 							/* @__PURE__ */ jsx("div", {
 								className: cx("relative flex min-h-0 flex-1 flex-col overflow-y-auto", padded && "p-4", className),

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/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

@@ -16,7 +16,7 @@ function MenuPopup({ children, className, side = "bottom", align = "start", anch
 			sideOffset: 4,
 			className: positionerClassName,
 			children: /* @__PURE__ */ jsx(Menu.Popup, {
-				className: cx("min-w-44 max-h-(--available-height) overflow-y-auto py-1", panelClassName, className),
+				className: cx("min-w-44 max-h-(--available-height) overflow-y-auto", "p-1", panelClassName, className),
 				children
 			})
 		})
@@ -41,7 +41,7 @@ function MenuRadioItem({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
 		closeOnClick: true,
 		...props,
-		className: cx(itemClassName, "pl-2", className),
+		className: cx(itemClassName, "pl-1", className),
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "flex w-3.5 shrink-0 justify-center",
 			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3" }) })
@@ -72,11 +72,11 @@ function MenuSubmenuTrigger({ className, children, ...props }) {
 	});
 }
 function MenuSeparator({ className }) {
-	return /* @__PURE__ */ jsx(Menu.Separator, { className: cx("my-1 h-px bg-(--theme-border)", className) });
+	return /* @__PURE__ */ jsx(Menu.Separator, { className: cx("-mx-1 my-1 h-px bg-(--theme-border)", className) });
 }
 function MenuGroupLabel({ children }) {
 	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
-		className: "px-3 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wide text-(--theme-muted-text-color)",
+		className: "px-2 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wide text-(--theme-muted-text-color)",
 		children
 	});
 }

package/dist/components/MenuEntries.js

@@ -34,7 +34,7 @@ function MenuEntries({ entries, search, query = "" }) {
 	const shown = needle ? searchMatches(entries, (a) => matches(needle, a.label, a.keywords)) : entries;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("div", {
-			className: "sticky top-0 z-[1] bg-(--theme-app-bg) px-2 pt-0.5 pb-1",
+			className: "sticky top-0 z-[1] bg-(--theme-app-bg) px-1 pt-0.5 pb-1",
 			children: /* @__PURE__ */ jsx(Menu.Input, {
 				"aria-label": search.placeholder,
 				placeholder: search.placeholder,

package/dist/components/OptionDescription.d.ts

@@ -0,0 +1,7 @@
+import type { ComboboxItem } from './comboboxItems.js';
+/** An option's description under its label. An `accessibleDescription` is read in its place,
+ *  so the shown one is then hidden from assistive technology rather than read twice. */
+export declare function OptionDescription({ id, item, }: {
+    id: string;
+    item: Pick<ComboboxItem<unknown>, 'description' | 'accessibleDescription'>;
+}): import("react").JSX.Element;

package/dist/components/OptionDescription.js

@@ -0,0 +1,19 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/OptionDescription.tsx
+/** An option's description under its label. An `accessibleDescription` is read in its place,
+*  so the shown one is then hidden from assistive technology rather than read twice. */
+function OptionDescription({ id, item }) {
+	const spoken = item.accessibleDescription;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [item.description && /* @__PURE__ */ jsx("span", {
+		id: spoken ? void 0 : id,
+		"aria-hidden": spoken ? true : void 0,
+		className: "text-xs leading-snug text-(--theme-muted-text-color)",
+		children: item.description
+	}), spoken && /* @__PURE__ */ jsx("span", {
+		id,
+		hidden: true,
+		children: spoken
+	})] });
+}
+//#endregion
+export { OptionDescription };

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

@@ -16,7 +16,7 @@ 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 tip = variant === "tip";
 	const popup = useRef(null);
 	const actions = useRef(null);
@@ -39,7 +39,7 @@ function Popover$1({ trigger, at, title, open, defaultOpen, onOpenChange, side =
 			sideOffset: tip ? 8 : 6,
 			collisionPadding: 8,
 			...keepSide && { collisionAvoidance: { side: "none" } },
-			...at ? { anchor: toPositionerAnchor(at) } : {},
+			...at ? { anchor: toPositionerAnchor(at) } : anchor ? { anchor } : {},
 			className: positionerClassName,
 			children: /* @__PURE__ */ jsxs(Popover.Popup, {
 				...popupProps,

package/dist/components/Provider.d.ts

@@ -1,4 +1,5 @@
 import type { Dispatch, ReactNode, SetStateAction } from 'react';
+import type { AccessText } from '../access/strings.js';
 import type { WorkflowAction, WorkflowEditing } from '../editing.js';
 import type { WorkflowEngine } from '../engine.js';
 import type { GraphEditorText, InputsEditorText } from '../graph/editorStrings.js';
@@ -14,6 +15,8 @@ export interface UIStrings {
         favoriteHintOff: string;
     };
     common: {
+        /** Returns to the view a drawer or panel showed before. */
+        back: string;
         cancel: string;
         close: string;
         save: string;
@@ -110,6 +113,8 @@ export interface UIStrings {
     dropdown: {
         select: (type: string) => string;
         noOptionsFound: string;
+        /** While a search for options is under way. */
+        searching: string;
         showOptions: string;
         /** The row that adds typed text as a new value. */
         add: (text: string) => string;
@@ -259,6 +264,8 @@ export interface UIStrings {
     };
     /** The visual editor's text a host translates; the editor fills in the rest in English. */
     graphEditor: Partial<GraphEditorText>;
+    /** The access drawer's text, over its English defaults. */
+    access: Partial<AccessText>;
     inputsEditor: Partial<InputsEditorText>;
     fileExplorer: {
         preview: {

package/dist/components/Provider.js

@@ -41,6 +41,7 @@ var DEFAULTS = {
 			favoriteHintOff: "Favorite your item when it's created"
 		},
 		common: {
+			back: "Back",
 			cancel: "Cancel",
 			close: "Close",
 			save: "Save",
@@ -125,6 +126,7 @@ var DEFAULTS = {
 		dropdown: {
 			select: (type) => `Select ${type}`,
 			noOptionsFound: "No options found",
+			searching: "Searching…",
 			showOptions: "Show options",
 			add: (text) => `Add “${text}”`,
 			limitReached: (max) => `Up to ${max}`,
@@ -276,6 +278,7 @@ var DEFAULTS = {
 			openInNewGraph: "Open in new graph"
 		},
 		graphEditor: {},
+		access: {},
 		inputsEditor: {},
 		fileExplorer: {
 			preview: {

package/dist/components/Select.js

@@ -3,7 +3,8 @@ import { CheckIcon, ChevronDownIcon } from "../icons.js";
 import { panelClassName, positionerClassName } from "./floating.js";
 import { Tooltip } from "./Tooltip.js";
 import { fieldBox } from "./fieldBox.js";
-import { pickerItemClassName } from "./comboboxItems.js";
+import { optionNaming, pickerItemClassName } from "./comboboxItems.js";
+import { OptionDescription } from "./OptionDescription.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { Select } from "@base-ui/react/select";
@@ -52,12 +53,11 @@ function Select$1({ items, placeholder, className, "aria-label": ariaLabel, "ari
 			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: "max-h-[min(15rem,var(--available-height))] overflow-y-auto py-1",
+					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,
-						"aria-labelledby": `${uid}${index}label`,
-						"aria-describedby": item.description && `${uid}${index}description`,
+						...optionNaming(`${uid}${index}`, item),
 						onFocus: onItemHighlighted && (() => onItemHighlighted(item.value)),
 						className: pickerItemClassName,
 						children: [
@@ -67,14 +67,16 @@ function Select$1({ items, placeholder, className, "aria-label": ariaLabel, "ari
 							}),
 							/* @__PURE__ */ jsxs("span", {
 								className: "flex min-w-0 flex-col",
-								children: [/* @__PURE__ */ jsx(Select.ItemText, {
-									id: `${uid}${index}label`,
-									className: "truncate",
-									children: item.label
-								}), item.description && /* @__PURE__ */ jsx("span", {
+								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`,
-									className: "text-xs leading-snug text-(--theme-muted-text-color)",
-									children: item.description
+									item
 								})]
 							}),
 							/* @__PURE__ */ jsx(Select.ItemIndicator, {

package/dist/components/comboboxItems.d.ts

@@ -7,7 +7,12 @@ export interface ComboboxItem<Value = string> {
     value: Value;
     label: string;
     description?: string | undefined;
+    /** Read after the label in place of `description`, for what the row shows in more than
+     *  words, such as a count and a status: "24 members, synced". */
+    accessibleDescription?: string | undefined;
     icon?: ReactNode;
+    /** Beside the label, such as a tag that marks the option out. */
+    badge?: ReactNode;
     disabled?: boolean | undefined;
 }
 export interface ComboboxGroup<Value = string> {
@@ -23,6 +28,11 @@ export interface ComboboxGroup<Value = string> {
 export type ComboboxLeaf<Value = string> = ComboboxItem<Value> | (Value & string);
 /** Items, groups under headings, or both: items between groups list where they sit, without a heading. */
 export type ComboboxItems<Value = string> = readonly (ComboboxLeaf<Value> | ComboboxGroup<Value>)[];
+/** How an option is named and described: by its label, with its description read after it. */
+export declare function optionNaming(id: string, item: Pick<ComboboxItem<unknown>, 'description' | 'accessibleDescription'>): {
+    'aria-labelledby': string;
+    'aria-describedby': string | undefined;
+};
 export declare function isComboboxGroup<Value>(item: ComboboxLeaf<Value> | ComboboxGroup<Value>): item is ComboboxGroup<Value>;
 /** Every item, out of their groups. */
 export declare function comboboxLeaves<Value>(items: ComboboxItems<Value>): ComboboxLeaf<Value>[];

package/dist/components/comboboxItems.js

@@ -4,6 +4,13 @@ import { panelItemClassName } from "./floating.js";
 /** An option's row in a Select's or a Combobox's list, so both lists look alike: the icon, the
 *  label over its description, and the check at the end. */
 var pickerItemClassName = cx(panelItemClassName, "data-selected:font-medium");
+/** How an option is named and described: by its label, with its description read after it. */
+function optionNaming(id, item) {
+	return {
+		"aria-labelledby": `${id}label`,
+		"aria-describedby": item.accessibleDescription || item.description ? `${id}description` : void 0
+	};
+}
 function isComboboxGroup(item) {
 	return typeof item === "object" && "items" in item;
 }
@@ -12,4 +19,4 @@ function comboboxLeaves(items) {
 	return items.flatMap((item) => isComboboxGroup(item) ? item.items : [item]);
 }
 //#endregion
-export { comboboxLeaves, isComboboxGroup, pickerItemClassName };
+export { comboboxLeaves, isComboboxGroup, optionNaming, pickerItemClassName };

package/dist/components/floating.d.ts

@@ -2,8 +2,11 @@
 export declare const positionerClassName = "z-(--layer-popover) outline-none data-anchor-hidden:invisible";
 /** A panel of choices: a menu, a select's list, a combobox's list. */
 export declare const panelClassName = "rounded-lg border border-(--theme-border) bg-(--theme-app-bg) text-sm text-(--theme-app) shadow-(--theme-shadow-lg) outline-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100";
-/** A row in a panel. */
-export declare const panelItemClassName = "flex w-full cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-left outline-none data-highlighted:bg-(--theme-hover) data-highlighted:text-(--theme-app) data-disabled:cursor-not-allowed data-disabled:opacity-50";
+/** A panel's rows inset by the same gutter on every side, so a highlighted first or last row
+ *  keeps the margin it has at its sides rather than leaving a strip against the border. */
+export declare const panelListClassName = "p-1";
+/** A row in a panel, inside its `panelListClassName` gutter; its text lines up with a field's. */
+export declare const panelItemClassName = "flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-left outline-none data-highlighted:bg-(--theme-hover) data-highlighted:text-(--theme-app) data-disabled:cursor-not-allowed data-disabled:opacity-50";
 /** A tooltip's or infotip's small inverted surface. */
 export declare const tipClassName = "rounded-md bg-(--theme-app) px-2 py-1 text-xs text-(--theme-app-bg) shadow-(--theme-shadow) whitespace-pre-line break-words data-instant:transition-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100";
 export declare const tipArrowClassName = "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";

package/dist/components/floating.js

@@ -4,8 +4,8 @@ var positionerClassName = "z-(--layer-popover) outline-none data-anchor-hidden:i
 var enterExit = "origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100";
 /** A panel of choices: a menu, a select's list, a combobox's list. */
 var panelClassName = `rounded-lg border border-(--theme-border) bg-(--theme-app-bg) text-sm text-(--theme-app) shadow-(--theme-shadow-lg) outline-none ${enterExit}`;
-/** A row in a panel. */
-var panelItemClassName = "flex w-full cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-left outline-none data-highlighted:bg-(--theme-hover) data-highlighted:text-(--theme-app) data-disabled:cursor-not-allowed data-disabled:opacity-50";
+/** A row in a panel, inside its `panelListClassName` gutter; its text lines up with a field's. */
+var panelItemClassName = "flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-left outline-none data-highlighted:bg-(--theme-hover) data-highlighted:text-(--theme-app) data-disabled:cursor-not-allowed data-disabled:opacity-50";
 /** A tooltip's or infotip's small inverted surface. */
 var tipClassName = `rounded-md bg-(--theme-app) px-2 py-1 text-xs text-(--theme-app-bg) shadow-(--theme-shadow) whitespace-pre-line break-words data-instant:transition-none ${enterExit}`;
 var tipArrowClassName = "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";

package/dist/editor/EditorField.js

@@ -6,12 +6,11 @@ import { jsx } from "react/jsx-runtime";
 //#region src/editor/EditorField.tsx
 /** A form field that edits its value as code, in the language its `options` name (shell by default). */
 function EditorField(props) {
-	const { field, label, disabled, onChange } = props;
+	const { field, disabled, onChange } = props;
 	const [value, change] = useFieldValue(field.name ?? "");
 	return /* @__PURE__ */ jsx(Field, {
 		...fieldFrame(props),
 		children: /* @__PURE__ */ jsx(Editor, {
-			ariaLabel: label,
 			height: "200px",
 			value: value ?? "",
 			disabled,

package/dist/editor/Monaco.js

@@ -1,5 +1,6 @@
 import { cx } from "../cx.js";
 import { useStrings } from "../components/Provider.js";
+import { useFieldLabelledControl } from "../components/Field.js";
 import { useCssIsDark } from "../components/useCssIsDark.js";
 import { HOST_MARKER_OWNER, LINT_OWNER } from "./lintOwner.js";
 import { lintContext, useLintEditing, useLintSources } from "./lintContext.js";
@@ -62,6 +63,7 @@ function minimalEdit(model, from, to) {
 }
 function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop, width = "100%", height = "100%", path: pathProp, preserveUndo = false, lint = false, markers, nested, value, language, ...options }) {
 	const { common: t } = useStrings();
+	const field = useFieldLabelledControl();
 	const ownPath = `file:///editor/${useId().replace(/[^\w-]/g, "")}`;
 	const path = useRef(pathProp ?? ownPath).current;
 	const isDark = useCssIsDark();
@@ -86,6 +88,7 @@ function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop,
 	markersRef.current = markers;
 	const editorOptions = {
 		ariaLabel: t.codeEditor,
+		...field?.["aria-required"] && { ariaRequired: true },
 		readOnlyMessage: { value: t.readOnlyText },
 		domReadOnly: readOnly,
 		hideCursorInOverviewRuler: readOnly,
@@ -201,9 +204,30 @@ function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop,
 		for (const name of DISABLED_BACKGROUNDS) if (disabled) node?.style.setProperty(name, "var(--theme-input-disabled-bg)");
 		else node?.style.removeProperty(name);
 	}, [disabled]);
+	const fieldId = field?.id;
+	const labelledBy = field?.["aria-labelledby"];
+	const describedBy = field?.["aria-describedby"];
+	const invalid = field?.["aria-invalid"];
 	useEffect(() => {
-		monacoRef.current?.getDomNode()?.querySelector("textarea.inputarea, .native-edit-context")?.setAttribute("aria-readonly", String(readOnly));
-	}, [readOnly, path]);
+		const input = monacoRef.current?.getDomNode()?.querySelector("textarea.inputarea, .native-edit-context");
+		if (!input) return;
+		input.setAttribute("aria-readonly", String(readOnly));
+		const attributes = {
+			id: fieldId,
+			"aria-labelledby": labelledBy,
+			"aria-describedby": describedBy,
+			"aria-invalid": invalid && "true"
+		};
+		for (const [name, value] of Object.entries(attributes)) if (value) input.setAttribute(name, value);
+		else input.removeAttribute(name);
+	}, [
+		readOnly,
+		path,
+		fieldId,
+		labelledBy,
+		describedBy,
+		invalid
+	]);
 	useEffect(() => {
 		monacoRef.current?.updateOptions(optionsRef.current);
 	}, [optionsKey]);