@parallelworks/ui 0.54.0 → 0.56.0

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]);

package/dist/editor/themes.js

@@ -66,7 +66,7 @@ function editorTheme(style, mode) {
 			"editor.background": c("--theme-panel-bg"),
 			"editor.border": c("--theme-border"),
 			"editorCursor.foreground": c("--theme-app"),
-			"editor.lineHighlightBackground": c("--theme-hover"),
+			"editor.lineHighlightBackground": c(mode === "dark" ? "--theme-panel-hover" : "--theme-hover"),
 			"editorLineNumber.foreground": c("--theme-placeholder"),
 			"editorLineNumber.activeForeground": c("--theme-muted-text-color"),
 			...mode === "dark" ? {

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/index.d.ts

@@ -18,7 +18,7 @@ export { Disclosure, DisclosurePanel, type DisclosureProps } from './components/
 export { Drawer, type DrawerProps } from './components/Drawer.js';
 export { EmptyState, type EmptyStateProps } from './components/EmptyState.js';
 export { ExternalLink, type ExternalLinkProps } from './components/ExternalLink.js';
-export { ErrorText, Field, type FieldControlProps, type FieldLayout, FieldOption, type FieldProps, FieldValue, type FieldValueProps, RevealToggle, useFieldControl, } from './components/Field.js';
+export { ErrorText, Field, type FieldControlProps, type FieldLayout, FieldOption, type FieldProps, FieldValue, type FieldValueProps, RevealToggle, useFieldControl, useFieldLabelledControl, } from './components/Field.js';
 export { type FieldBoxOptions, type FieldBoxSize, fieldBox } from './components/fieldBox.js';
 export type { FloatingAnchor } from './components/floating.js';
 export { HoverCard, type HoverCardProps } from './components/HoverCard.js';

package/dist/index.js

@@ -28,7 +28,7 @@ import { ExternalLink } from "./components/ExternalLink.js";
 import { Popover, PopoverClose, useClosePopover } from "./components/Popover.js";
 import { InfoTip, formatInfoTipContent } from "./components/InfoTip.js";
 import { RequiredMark } from "./components/RequiredMark.js";
-import { ErrorText, Field, FieldOption, FieldValue, RevealToggle, useFieldControl } from "./components/Field.js";
+import { ErrorText, Field, FieldOption, FieldValue, RevealToggle, useFieldControl, useFieldLabelledControl } from "./components/Field.js";
 import { Input, Textarea } from "./components/Input.js";
 import { ColorInput } from "./components/ColorInput.js";
 import { Autocomplete, Combobox } from "./components/Combobox.js";
@@ -72,4 +72,4 @@ import { ThemeEditor, ThemePreview } from "./components/ThemeEditor.js";
 import { ToggleGroup } from "./components/ToggleGroup.js";
 import { useCssIsDark } from "./components/useCssIsDark.js";
 import { useApplyTheme, useColorMode } from "./components/useTheme.js";
-export { ActionMenu, AppLink, Autocomplete, Avatar, Button, CODE_STYLES, Callout, Card, CardHeader, Checkbox, CheckboxGroup, ColorInput, Combobox, ConfirmModal, CopyButton, CopyCodeBlock, CreateModal, CreateModalSelect, CreateModalSwitch, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, DatePicker, DescriptionList, DescriptionListGroup, DescriptionListItem, Disclosure, DisclosurePanel, Drawer, Elapsed, EmptyState, ErrorText, ExternalLink, Field, FieldOption, FieldValue, HoverCard, IconButton, InfoTip, Input, JND, LetterBadge, Loader, LoadingRegion, Markdown, MenuCheckboxItem, MenuEntries, MenuFilter, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger, Meter, MethodButton, Modal, ModalDescription, ModalTitle, NumberInput, OneTimeCodeInput, Overview, PAGE_SIZES, PageHeader, PageHeaderAction, PageHeaderAddButton, PageHeaderBar, PageHeaderMenu, PageHeaderProvider, Pagination, Popover, PopoverClose, ProgressBar, Radio, RadioGroup, RefreshButton, RelativeTime, RequiredMark, RevealToggle, RunStatusIcon, SIDEBAR_TOKENS, SearchInput, Section, SegmentedControl, Select, SettingModeOption, SettingRow, SettingsCard, SettingsHeading, Skeleton, Slider, StatusBadge, StatusDot, Switch, THEME_PRESETS, THEME_TOKENS, TabPanel, Table, Tabs, Textarea, ThemeEditor, ThemePreview, ToggleGroup, Tooltip, TooltipProvider, UIProvider, apcaContrast, applyTheme, avatarInitials, buttonClasses, composite, contrastRatio, cx, deltaE, deriveTheme, fieldBox, fitSeed, formatBytes, formatCount, formatDateTime, formatDuration, formatInfoTipContent, formatTimeLeft, generateTheme, isDarkColor, isPlainClick, isTextEntryContext, levelTone, menuDivider, modalPanelClassName, modeOf, parseColor, parseTheme, prefersWideGamut, resolveMode, runStatusTone, schemeFor, serializeTheme, statusTextClass, themeStylesheet, toHex, toP3, toast, useApplyTheme, useClock, useClosePopover, useColorMode, useContextMenu, useCopy, useCssIsDark, useElapsed, useFieldControl, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRelativeTime, useRunFile, useShortcutKey, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader };
+export { ActionMenu, AppLink, Autocomplete, Avatar, Button, CODE_STYLES, Callout, Card, CardHeader, Checkbox, CheckboxGroup, ColorInput, Combobox, ConfirmModal, CopyButton, CopyCodeBlock, CreateModal, CreateModalSelect, CreateModalSwitch, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, DatePicker, DescriptionList, DescriptionListGroup, DescriptionListItem, Disclosure, DisclosurePanel, Drawer, Elapsed, EmptyState, ErrorText, ExternalLink, Field, FieldOption, FieldValue, HoverCard, IconButton, InfoTip, Input, JND, LetterBadge, Loader, LoadingRegion, Markdown, MenuCheckboxItem, MenuEntries, MenuFilter, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger, Meter, MethodButton, Modal, ModalDescription, ModalTitle, NumberInput, OneTimeCodeInput, Overview, PAGE_SIZES, PageHeader, PageHeaderAction, PageHeaderAddButton, PageHeaderBar, PageHeaderMenu, PageHeaderProvider, Pagination, Popover, PopoverClose, ProgressBar, Radio, RadioGroup, RefreshButton, RelativeTime, RequiredMark, RevealToggle, RunStatusIcon, SIDEBAR_TOKENS, SearchInput, Section, SegmentedControl, Select, SettingModeOption, SettingRow, SettingsCard, SettingsHeading, Skeleton, Slider, StatusBadge, StatusDot, Switch, THEME_PRESETS, THEME_TOKENS, TabPanel, Table, Tabs, Textarea, ThemeEditor, ThemePreview, ToggleGroup, Tooltip, TooltipProvider, UIProvider, apcaContrast, applyTheme, avatarInitials, buttonClasses, composite, contrastRatio, cx, deltaE, deriveTheme, fieldBox, fitSeed, formatBytes, formatCount, formatDateTime, formatDuration, formatInfoTipContent, formatTimeLeft, generateTheme, isDarkColor, isPlainClick, isTextEntryContext, levelTone, menuDivider, modalPanelClassName, modeOf, parseColor, parseTheme, prefersWideGamut, resolveMode, runStatusTone, schemeFor, serializeTheme, statusTextClass, themeStylesheet, toHex, toP3, toast, useApplyTheme, useClock, useClosePopover, useColorMode, useContextMenu, useCopy, useCssIsDark, useElapsed, useFieldControl, useFieldLabelledControl, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRelativeTime, useRunFile, useShortcutKey, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader };

package/dist/styles/theme.css

@@ -15,15 +15,15 @@
   --theme-panel-bg: light-dark(#fcfeff, #151c25);
   --theme-panel-hover: light-dark(#f2f5f9, #1e262e);
   --theme-muted-panel-bg: light-dark(#e7eaee, #1c242c);
-  --theme-hover: light-dark(#e3e5e9, #1f2730);
+  --theme-hover: light-dark(#e3e5e9, #323a43);
   --theme-input-bg: light-dark(#fafcfe, #182028);
   --theme-input-disabled-bg: light-dark(#ebeef1, #131a22);
-  --theme-app: light-dark(#0a101b, #e2eaf3);
-  --theme-muted-text-color: light-dark(#4e5664, #c1c9d2);
+  --theme-app: light-dark(#0a101b, #e9f1fa);
+  --theme-muted-text-color: light-dark(#4e5664, #c8d1d9);
   --theme-placeholder: light-dark(#7e8796, #9da5ad);
-  --theme-link: light-dark(#06354f, #8dcfff);
+  --theme-link: light-dark(#06354f, #9dd7ff);
   --theme-border: light-dark(#cacdd0, #30363d);
-  --theme-border-strong: light-dark(#a3a6a9, #4f565d);
+  --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);
@@ -31,23 +31,23 @@
   --theme-focus: light-dark(#06354f, #5b9ccf);
   --theme-focus-ring: light-dark(rgba(6, 53, 79, 0.25), rgba(91, 156, 207, 0.35));
   --theme-success: light-dark(#00973d, #00bf54);
-  --theme-success-text: light-dark(#006226, #65e387);
+  --theme-success-text: light-dark(#006226, #6be88c);
   --theme-success-solid: #00873c;
   --theme-success-muted: light-dark(rgba(0, 151, 61, 0.1), rgba(0, 191, 84, 0.15));
   --theme-error: light-dark(#ea4841, #ff6056);
-  --theme-error-text: light-dark(#a11a1b, #ffb8af);
+  --theme-error-text: light-dark(#a11a1b, #ffc1b8);
   --theme-error-solid: #db3934;
   --theme-error-muted: light-dark(rgba(234, 72, 65, 0.1), rgba(255, 96, 86, 0.15));
   --theme-warning: light-dark(#bd7100, #dd8900);
-  --theme-warning-text: light-dark(#7b4a00, #ffbe6a);
+  --theme-warning-text: light-dark(#7b4a00, #ffc672);
   --theme-warning-solid: #a76900;
   --theme-warning-muted: light-dark(rgba(189, 113, 0, 0.1), rgba(221, 137, 0, 0.15));
   --theme-info: light-dark(#0681f8, #499fff);
-  --theme-info-text: light-dark(#0050af, #a6cfff);
+  --theme-info-text: light-dark(#0050af, #abd4ff);
   --theme-info-solid: light-dark(#0073e8, #0073e9);
   --theme-info-muted: light-dark(rgba(6, 129, 248, 0.1), rgba(73, 159, 255, 0.15));
   --theme-favorite: light-dark(#e7457a, #fe5c8e);
-  --theme-favorite-text: light-dark(#9e174b, #ffb7c7);
+  --theme-favorite-text: light-dark(#9e174b, #ffbecd);
   --theme-favorite-solid: #d7366e;
   --theme-favorite-muted: light-dark(rgba(231, 69, 122, 0.1), rgba(254, 92, 142, 0.15));
   --theme-shadow-sm: 0 1px 2px light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.35));