@parallelworks/ui 0.12.1 → 0.14.0

package/dist/chunks/{BareModal-DBa84JZO.js → BareModal-BqroLbZ5.js}

@@ -60,6 +60,7 @@ function BareModal({ open, onClose, ariaLabel, className, onPanelKeyDown, onPane
 	if (!open) return null;
 	return createPortal(/* @__PURE__ */ jsx("div", {
 		"data-testid": "modal-backdrop",
+		role: "none",
 		className: cx("fixed inset-0 z-[9990] flex justify-center px-4 pb-8", align === "center" ? "items-center" : "items-start pt-[14vh]"),
 		style: { backgroundColor: "rgba(0, 0, 0, 0.4)" },
 		onClick: preventClose ? void 0 : onClose,

package/dist/chunks/{CodePreviewEditor-hwjZof0M.js → CodePreviewEditor-67A_SKgE.js}

@@ -1,5 +1,5 @@
 import { t as useCssIsDark } from "./useCssIsDark-DHr05dG2.js";
-import { n as defineEditorThemes, r as getThemeName, t as setupMonacoWorkers } from "./editor-BH81U5-C.js";
+import { n as defineEditorThemes, r as getThemeName, t as setupMonacoWorkers } from "./editor-BZ9Buwi4.js";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import * as monaco from "monaco-editor";

package/dist/chunks/{CreateModal-DLCC8t_x.js → CreateModal-DoA2WsXf.js}

@@ -1,9 +1,9 @@
 import { AlertIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, ClipboardIcon, CopyIcon, FavoriteIcon, FavoriteOutlineIcon, HiddenFalseIcon, HiddenTrueIcon, InfoIcon, TooltipIcon } from "../icons.js";
-import { c as useStrings, i as useNotify } from "./Provider-CfFV-vc5.js";
-import { n as TOOLTIP_ID } from "./Tooltip-WgbiC_nd.js";
-import { i as filterOption, l as toggleSetMember } from "./StatusBadge-P6C2tv7Z.js";
-import { n as modalPanelClasses, t as BareModal } from "./BareModal-DBa84JZO.js";
-import { S as AddMenu } from "./PageHeader-dyoL44ue.js";
+import { c as useStrings, i as useNotify } from "./Provider-CbFVFB7O.js";
+import { n as TOOLTIP_ID } from "./Tooltip-n9w7Tkt1.js";
+import { i as filterOption, l as toggleSetMember } from "./StatusBadge-RRUI78iS.js";
+import { n as modalPanelClasses, t as BareModal } from "./BareModal-BqroLbZ5.js";
+import { w as AddMenu } from "./PageHeader-CxxbidPp.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Suspense, lazy, useCallback, useEffect, useRef, useState } from "react";
@@ -30,6 +30,7 @@ function Callout({ type, className = "", children }) {
 //#region src/components/CopyToClipboard.tsx
 function CopyToClipboard({ as = "div", text, className, children, showIcon = true }) {
 	const notify = useNotify();
+	const strings = useStrings();
 	const handleCopy = async () => {
 		try {
 			await navigator.clipboard.writeText(text);
@@ -41,7 +42,17 @@ function CopyToClipboard({ as = "div", text, className, children, showIcon = tru
 	return /* @__PURE__ */ jsxs(as, {
 		className,
 		onClick: handleCopy,
-		...as === "button" ? { type: "button" } : {},
+		...as === "button" ? { type: "button" } : {
+			role: "button",
+			"aria-label": strings.common.copy,
+			tabIndex: 0,
+			onKeyDown: (e) => {
+				if (e.key === "Enter" || e.key === " ") {
+					e.preventDefault();
+					handleCopy();
+				}
+			}
+		},
 		children: [showIcon && /* @__PURE__ */ jsx(ClipboardIcon, {}), children]
 	});
 }
@@ -61,6 +72,7 @@ function CopyCodeBlock({ textToCopy, children, secret = false, isRevealed = fals
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: "group relative",
+		role: "none",
 		onClick: handleCopy,
 		children: [/* @__PURE__ */ jsx("pre", {
 			className: `p-4 theme-hover border rounded-lg text-left font-mono text-sm overflow-x-auto ${secret ? "pr-24" : "pr-12"}`,
@@ -222,7 +234,13 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 			setFavorite(false);
 			setNameTouched(false);
 			setInteracted(false);
-			requestAnimationFrame(() => nameRef.current?.focus());
+			requestAnimationFrame(() => {
+				const input = nameRef.current;
+				const dialog = input?.closest("[role=\"dialog\"]");
+				const active = document.activeElement;
+				if (dialog?.contains(active) && active !== dialog) return;
+				input?.focus();
+			});
 		}
 	}, [open, initialName]);
 	const nameError = name.trim() ? validateName?.(name.trim()) ?? null : null;
@@ -245,6 +263,8 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 		let close = false;
 		try {
 			close = await onSubmit(name.trim(), description.trim(), favorite);
+		} catch (error) {
+			console.error(error);
 		} finally {
 			if (!close) setSubmitting(false);
 		}
@@ -260,7 +280,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 			if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) handleSubmit();
 		},
 		onPanelMouseDown: (e) => {
-			if (e.target instanceof Element && !e.target.closest("input, textarea, button, a, select, label")) e.preventDefault();
+			if (e.target instanceof Element && !e.target.closest("input, textarea, button, a, select, label, code, pre, .select-all")) e.preventDefault();
 		},
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex-1 min-h-0 overflow-y-auto overscroll-contain",

package/dist/chunks/{Monaco-DCwRDrPm.js → Monaco-H56KyEdb.js}

@@ -1,6 +1,6 @@
-import { l as useWorkflowJsonResolver } from "./Provider-CfFV-vc5.js";
+import { l as useWorkflowJsonResolver } from "./Provider-CbFVFB7O.js";
 import { t as useCssIsDark } from "./useCssIsDark-DHr05dG2.js";
-import { n as defineEditorThemes, r as getThemeName, t as setupMonacoWorkers } from "./editor-BH81U5-C.js";
+import { n as defineEditorThemes, r as getThemeName, t as setupMonacoWorkers } from "./editor-BZ9Buwi4.js";
 import cx from "classnames";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
@@ -37,6 +37,16 @@ function ensureMonacoYamlConfigured() {
 var workflowCompletionContexts = /* @__PURE__ */ new Map();
 var registeredCompletionProviders = [];
 var workflowCompletionProvidersRegistered = false;
+var isWorkflowInputs = (value) => typeof value === "object" && value !== null;
+function readExecuteInputs(doc) {
+	if (!isWorkflowInputs(doc)) return {};
+	const on = doc["on"];
+	if (!isWorkflowInputs(on)) return {};
+	const execute = on["execute"];
+	if (!isWorkflowInputs(execute)) return {};
+	const inputs = execute["inputs"];
+	return isWorkflowInputs(inputs) ? inputs : {};
+}
 var noop = () => {};
 function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop, width = "100%", height = "100%", path = "file:///default", marketplaceItems = [], workflows = [], ...options }) {
 	const isDark = useCssIsDark();
@@ -51,7 +61,7 @@ function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop,
 		if (!monacoRef.current) return;
 		defineEditorThemes(monaco.editor);
 		monaco.editor.setTheme(getThemeName(isDark, disabled));
-		monacoRef.current.updateOptions({ readOnly });
+		monacoRef.current.updateOptions(readOnly === void 0 ? {} : { readOnly });
 	}, [
 		disabled,
 		isDark,
@@ -108,7 +118,7 @@ function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop,
 					automaticLayout: true,
 					model,
 					...options,
-					readOnly,
+					...readOnly === void 0 ? {} : { readOnly },
 					fixedOverflowWidgets: true,
 					suggest: {
 						preview: true,
@@ -248,7 +258,7 @@ function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop,
 									let replaceSlash = false;
 									const slashRefMatch = rest.match(/^([^@/]+)\/$/);
 									if (slashRefMatch) {
-										ghRepo = slashRefMatch[1];
+										ghRepo = slashRefMatch[1] ?? "";
 										isRefTrigger = true;
 										replaceSlash = true;
 									} else if (rest.includes("@")) {
@@ -508,7 +518,7 @@ function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop,
 								const response = await fetch(`https://raw.githubusercontent.com/${owner}/${repo}/${ref}/${yamlPath}`);
 								if (response.ok) {
 									const text = await response.text();
-									inputs = yaml.load(text)?.on?.execute?.inputs || {};
+									inputs = readExecuteInputs(yaml.load(text));
 								}
 							} catch {}
 						} else {
@@ -518,14 +528,14 @@ function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop,
 							try {
 								const data = await resolveJson(usesValue.startsWith("marketplace/") ? {
 									kind: "marketplace",
-									slug: usesWorkflowRef[0],
-									version: usesWorkflowRef.length > 1 ? usesWorkflowRef[1] : "latest"
+									slug: usesWorkflowRef[0] ?? "",
+									version: usesWorkflowRef[1] ?? "latest"
 								} : {
 									kind: "workflow",
-									name: usesWorkflowRef[0]
+									name: usesWorkflowRef[0] ?? ""
 								});
 								if (!data) return { suggestions: [] };
-								inputs = data?.on?.execute?.inputs || {};
+								inputs = readExecuteInputs(data);
 							} catch {
 								return { suggestions: [] };
 							}
@@ -560,7 +570,7 @@ function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop,
 						let groupidx = 0;
 						try {
 							const basename = groupname;
-							while (true) if (yaml.load(fullText)?.on?.execute?.inputs?.[groupname]) {
+							while (true) if (readExecuteInputs(yaml.load(fullText))[groupname]) {
 								groupidx++;
 								groupname = `${basename}_${groupidx}`;
 							} else break;
@@ -680,7 +690,7 @@ function constructWithSuggestion(inputs, path) {
 	const withSuggestion = {};
 	Object.keys(inputs).map((k) => {
 		const input = inputs[k];
-		if (input.type === "group" && input.items) withSuggestion[k] = constructWithSuggestion(input.items, path + "." + k);
+		if (input?.type === "group" && input.items) withSuggestion[k] = constructWithSuggestion(input.items, path + "." + k);
 		else withSuggestion[k] = "${{ inputs." + path + "." + k + " }}";
 	});
 	return withSuggestion;

package/dist/chunks/{PageHeader-dyoL44ue.js → PageHeader-CxxbidPp.js}

@@ -1,6 +1,6 @@
 import { AddIcon, CheckIcon, ChevronRightIcon, ClipboardIcon, CopyIcon, EditIcon, IdCardIcon, KeyIcon, LinkIcon, MailIcon, MoreIcon, UserIcon } from "../icons.js";
-import { c as useStrings, i as useNotify, n as useLink, s as useSlots } from "./Provider-CfFV-vc5.js";
-import { n as TOOLTIP_ID } from "./Tooltip-WgbiC_nd.js";
+import { c as useStrings, i as useNotify, n as useLink, s as useSlots } from "./Provider-CbFVFB7O.js";
+import { n as TOOLTIP_ID } from "./Tooltip-n9w7Tkt1.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { Fragment as Fragment$1, createContext, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
@@ -43,7 +43,8 @@ var BreadcrumbContext = createContext({
 	titleActionSlot: null,
 	setTitleActionSlot: () => {},
 	rightActionSlot: null,
-	setRightActionSlot: () => {}
+	setRightActionSlot: () => {},
+	claimedPath: { current: null }
 });
 var useBreadcrumb = () => useContext(BreadcrumbContext);
 function BreadcrumbProvider({ children }) {
@@ -52,6 +53,7 @@ function BreadcrumbProvider({ children }) {
 	const [hidden, setHidden] = React.useState(false);
 	const [titleActionSlot, setTitleActionSlot] = React.useState(null);
 	const [rightActionSlot, setRightActionSlot] = React.useState(null);
+	const claimedPath = React.useRef(null);
 	return /* @__PURE__ */ jsx(BreadcrumbContext.Provider, {
 		value: {
 			breadcrumbs,
@@ -63,16 +65,39 @@ function BreadcrumbProvider({ children }) {
 			titleActionSlot,
 			setTitleActionSlot,
 			rightActionSlot,
-			setRightActionSlot
+			setRightActionSlot,
+			claimedPath
 		},
 		children
 	});
 }
 function useSetBreadcrumbs(getBreadcrumbs) {
-	const { setBreadcrumbs } = useBreadcrumb();
+	const { setBreadcrumbs, claimedPath } = useBreadcrumb();
 	useLayoutEffect(() => {
+		claimedPath.current = window.location.pathname;
 		setBreadcrumbs(typeof getBreadcrumbs === "function" ? getBreadcrumbs() : getBreadcrumbs);
-	}, [getBreadcrumbs, setBreadcrumbs]);
+	}, [
+		getBreadcrumbs,
+		setBreadcrumbs,
+		claimedPath
+	]);
+}
+/**
+* For layout routes that derive breadcrumbs from the URL: applies them only
+* while no page under the layout has set its own for the current path.
+* Without this, a layout re-running its effect (for example when the
+* organization's display name loads) overwrote the page's breadcrumbs.
+*/
+function useSetDefaultBreadcrumbs(getBreadcrumbs) {
+	const { setBreadcrumbs, claimedPath } = useBreadcrumb();
+	useLayoutEffect(() => {
+		if (claimedPath.current === window.location.pathname) return;
+		setBreadcrumbs(typeof getBreadcrumbs === "function" ? getBreadcrumbs() : getBreadcrumbs);
+	}, [
+		getBreadcrumbs,
+		setBreadcrumbs,
+		claimedPath
+	]);
 }
 var EMPTY_BREADCRUMBS = [];
 /** For pages that render their own header instead of the breadcrumb strip. */
@@ -218,8 +243,11 @@ function RowContextMenu({ state, onClose, zClassName }) {
 	if (!state) return null;
 	const side = (pos?.left ?? state.x) > window.innerWidth * .6 ? "left" : "right";
 	return createPortal(/* @__PURE__ */ jsx("div", {
+		role: "none",
 		className: cx("fixed inset-0", zClassName),
-		onClick: onClose,
+		onClick: (e) => {
+			if (e.target === e.currentTarget) onClose();
+		},
 		onContextMenu: (e) => {
 			e.preventDefault();
 			if (ref.current?.contains(e.target)) {
@@ -248,7 +276,6 @@ function RowContextMenu({ state, onClose, zClassName }) {
 				top: pos?.top ?? state.y,
 				visibility: pos ? "visible" : "hidden"
 			},
-			onClick: (e) => e.stopPropagation(),
 			children: /* @__PURE__ */ jsx(MenuItemList, {
 				items: state.items,
 				onClose,
@@ -284,9 +311,16 @@ function MenuRow({ item, onClose, side }) {
 		};
 		return /* @__PURE__ */ jsxs("div", {
 			className: "relative",
+			role: "none",
 			onMouseEnter: open,
 			onMouseLeave: close,
-			children: [/* @__PURE__ */ jsxs("div", {
+			onFocus: open,
+			onBlur: close,
+			children: [/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-expanded": openSub,
+				"aria-haspopup": "menu",
+				onClick: open,
 				className: cx(MENU_ITEM_CLASSES, "justify-between text-(--theme-app)"),
 				children: [/* @__PURE__ */ jsxs("span", {
 					className: "flex items-center gap-2.5",
@@ -577,4 +611,4 @@ function PageHeader({ breadcrumbs, title, titleAction, actions, toolbar, classNa
 	});
 }
 //#endregion
-export { AddMenu as S, BreadcrumbProvider as _, HeaderAddButton as a, useHideBreadcrumbs as b, PageHeader as c, copySubmenu as d, rowContextMenuProps as f, useRowMenuActive as g, useRowMenu as h, HeaderActionMenu as i, MoreButton as l, toolbarActionToRowAction as m, BreadcrumbsRightAction as n, HeaderEditButton as o, toRowMenuItem as p, BreadcrumbsTitleAction as r, HeaderRowMenu as s, BreadcrumbsActionButton as t, assembleRowMenu as u, useBreadcrumb as v, useSetBreadcrumbs as x, useClearBreadcrumbs as y };
+export { useSetDefaultBreadcrumbs as C, useSetBreadcrumbs as S, useRowMenuActive as _, HeaderAddButton as a, useClearBreadcrumbs as b, PageHeader as c, assembleRowMenu as d, copySubmenu as f, useRowMenu as g, toolbarActionToRowAction as h, HeaderActionMenu as i, headerActionButtonClasses as l, toRowMenuItem as m, BreadcrumbsRightAction as n, HeaderEditButton as o, rowContextMenuProps as p, BreadcrumbsTitleAction as r, HeaderRowMenu as s, BreadcrumbsActionButton as t, MoreButton as u, BreadcrumbProvider as v, AddMenu as w, useHideBreadcrumbs as x, useBreadcrumb as y };

package/dist/chunks/{Provider-CfFV-vc5.js → Provider-CbFVFB7O.js}

@@ -51,11 +51,14 @@ var DEFAULTS = {
 			add: "Add",
 			create: "Create",
 			showHiddenFieldsHint: "Includes fields hidden by default because they're specific to each resource, such as name and group.",
-			jsonHasErrors: "JSON has errors, please fix before saving"
+			jsonHasErrors: "JSON has errors, please fix before saving",
+			remove: "Remove",
+			sort: "Sort"
 		},
 		dropdown: {
 			select: (type) => `Select ${type}`,
-			noOptionsFound: "No options found"
+			noOptionsFound: "No options found",
+			showOptions: "Show options"
 		},
 		logviewer: {
 			error: "Error:",
@@ -94,6 +97,9 @@ var DEFAULTS = {
 			submitted: "Submitted",
 			expandAll: "Expand all",
 			collapseAll: "Collapse all",
+			loadingLogs: "Loading logs",
+			noLogFound: "No log found",
+			logLoadFailed: "Log could not be loaded",
 			statusLabel: (status) => status,
 			statusReason: () => void 0
 		},

package/dist/chunks/RequiredMark-DfLdYbYZ.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/RequiredMark.tsx
+function RequiredMark() {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "text-red-500 ml-0.5",
+		children: "*"
+	});
+}
+//#endregion
+export { RequiredMark as t };

package/dist/chunks/{StatusBadge-P6C2tv7Z.js → StatusBadge-RRUI78iS.js}

@@ -101,10 +101,10 @@ function DropdownCaret() {
 //#region src/components/StatusBadge.tsx
 var variantStyles = {
 	default: "bg-(--theme-muted-panel-bg) text-(--theme-app) border-(--theme-border)",
-	success: "bg-emerald-500/10 text-emerald-500 border-emerald-500/20",
-	warning: "bg-amber-500/10 text-amber-500 border-amber-500/20",
-	error: "bg-red-500/10 text-red-500 border-red-500/20",
-	info: "bg-blue-500/10 text-blue-500 border-blue-500/20",
+	success: "bg-emerald-500/10 text-emerald-800 dark:text-emerald-400 border-emerald-500/20",
+	warning: "bg-amber-500/10 text-amber-800 dark:text-amber-400 border-amber-500/20",
+	error: "bg-red-500/10 text-red-800 dark:text-red-400 border-red-500/20",
+	info: "bg-blue-500/10 text-blue-800 dark:text-blue-400 border-blue-500/20",
 	muted: "bg-(--theme-muted-panel-bg)/50 text-(--theme-muted-text-color) border-(--theme-border)"
 };
 var pulseColors = {

package/dist/chunks/{SwitchToggle-DcPCXkqL.js → SwitchToggle-DbW0Q__L.js}

@@ -1,7 +1,7 @@
 import { AngleDownIcon, AngleRightIcon, CaretDownIcon } from "../icons.js";
-import { c as useStrings } from "./Provider-CfFV-vc5.js";
-import { n as TOOLTIP_ID } from "./Tooltip-WgbiC_nd.js";
-import { a as flattenDisplayOptions, c as isOption, i as filterOption, l as toggleSetMember, o as flattenOptions, r as DropdownCaret, s as isCategory } from "./StatusBadge-P6C2tv7Z.js";
+import { c as useStrings } from "./Provider-CbFVFB7O.js";
+import { a as truncationTooltipProps, n as TOOLTIP_ID } from "./Tooltip-n9w7Tkt1.js";
+import { a as flattenDisplayOptions, c as isOption, i as filterOption, l as toggleSetMember, o as flattenOptions, r as DropdownCaret, s as isCategory } from "./StatusBadge-RRUI78iS.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -12,6 +12,12 @@ import { usePopper } from "react-popper";
 import AnimateHeight from "react-animate-height";
 //#region src/components/Dropdown.tsx
 var defaultCollapsedLabel = (count) => `${count} more`;
+function isResourceValue(value) {
+	if (typeof value !== "object" || value === null || !("name" in value)) return false;
+	if (typeof value.name !== "string") return false;
+	if ("$type" in value && value.$type === "computeResource") return true;
+	return "type" in value && (value.type === "computeResource" || value.type === "bucket");
+}
 var checkEquals = (val, opt) => {
 	if (typeof val === "object" && !Array.isArray(val)) return deepEqual(val, opt);
 	return val === opt;
@@ -35,7 +41,7 @@ function getOptionFromValue(value, options) {
 		value
 	};
 	else return found;
-	const isResourceObject = value && typeof value === "object" && "name" in value && (value.$type === "computeResource" || value.type === "computeResource" || value.type === "bucket");
+	const isResourceObject = isResourceValue(value);
 	const fallbackLabel = typeof value === "string" ? value : isResourceObject ? value.name : JSON.stringify(value);
 	return {
 		label: fallbackLabel,
@@ -89,12 +95,7 @@ function ActiveWatcher({ active, onChange }) {
 function OptionContent({ label, description, icon }) {
 	return /* @__PURE__ */ jsxs("span", {
 		className: cx("flex gap-1.5", description ? "items-start min-w-0" : "items-center truncate"),
-		"data-tooltip-id": TOOLTIP_ID,
-		onMouseEnter: (e) => {
-			const inner = e.currentTarget.lastElementChild;
-			if (inner && inner.scrollWidth > inner.clientWidth) e.currentTarget.setAttribute("data-tooltip-content", label);
-			else e.currentTarget.removeAttribute("data-tooltip-content");
-		},
+		...truncationTooltipProps(label, (anchor) => anchor.lastElementChild),
 		children: [icon, description ? /* @__PURE__ */ jsxs("span", {
 			className: "flex flex-col min-w-0",
 			children: [/* @__PURE__ */ jsx("span", {
@@ -130,8 +131,9 @@ function ToggleOption({ option, category, expanded, onToggle, ...virtualRowProps
 		})
 	});
 }
-function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassName = "w-full", options = [], onChange, onActiveChange, value, id, ariaLabel, disabled = false, placeholder = "", loading = false, allowCustomValue = false, customValueLabel = "Use", collapsedLabel = defaultCollapsedLabel, portalEl }) {
+function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassName = "w-full", options = [], onChange, onActiveChange, value, id, ariaLabel, "aria-describedby": describedBy, required, disabled = false, placeholder = "", loading = false, allowCustomValue = false, customValueLabel = "Use", collapsedLabel = defaultCollapsedLabel, portalEl }) {
 	const DEBOUNCE_MS = 500;
+	const t = useStrings().dropdown;
 	const [query, setQuery] = useState("");
 	const [selectedIconWidth, setSelectedIconWidth] = useState(0);
 	const selectedIconRef = useCallback((node) => {
@@ -170,10 +172,12 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 		phase: "beforeWrite",
 		requires: ["computeStyles"],
 		fn: ({ state }) => {
-			state.styles.popper.width = `${state.rects.reference.width}px`;
+			const popperStyles = state.styles["popper"];
+			if (popperStyles) popperStyles.width = `${state.rects.reference.width}px`;
 		},
 		effect: ({ state }) => {
-			state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
+			const { popper, reference } = state.elements;
+			if (reference instanceof HTMLElement) popper.style.width = `${reference.offsetWidth}px`;
 		}
 	}), []);
 	const { styles, attributes } = usePopper(referenceElement, popperElement, {
@@ -251,9 +255,9 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 	]);
 	const comboOptions = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ComboboxOptions, {
 		ref: setPopperElement,
-		style: styles.popper,
+		style: styles["popper"],
 		className: "bg-(--theme-input-bg) border-(--theme-border) text-(--theme-app) max-h-60! empty:invisible border overflow-auto rounded-md shadow-lg focus:outline-hidden sm:text-sm z-9999 data-[popper-reference-hidden=true]:invisible data-[popper-reference-hidden=true]:pointer-events-none",
-		...attributes.popper,
+		...attributes["popper"],
 		children: ({ option }) => {
 			const optionLabel = typeof option === "string" ? option : option.label;
 			const optionDescription = typeof option !== "string" ? option.description : void 0;
@@ -309,6 +313,8 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 				/* @__PURE__ */ jsx(ComboboxInput, {
 					id,
 					"aria-label": ariaLabel || void 0,
+					"aria-describedby": describedBy,
+					"aria-required": required || void 0,
 					placeholder: loading ? "Loading..." : placeholder,
 					onBlur: onInputBlur,
 					ref: setReferenceElement,
@@ -326,6 +332,7 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 				}),
 				/* @__PURE__ */ jsx(ComboboxButton, {
 					ref: buttonRef,
+					"aria-label": t.showOptions,
 					className: "absolute inset-y-0 right-0 flex items-center pr-3 disabled:cursor-not-allowed",
 					"data-testid": "combobox-button",
 					disabled,
@@ -338,7 +345,7 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 }
 //#endregion
 //#region src/components/Listbox.tsx
-function CustomListbox({ options = [], handleOptionSelected, type, allowSearch = false, closeOnSelect = true, className = "", invalid = false }) {
+function CustomListbox({ options = [], handleOptionSelected, type, allowSearch = false, closeOnSelect = true, className = "", invalid = false, required = false, id, "aria-describedby": describedBy }) {
 	const { dropdown: strings } = useStrings();
 	const [filter, setFilter] = useState("");
 	const [controlledOpen, setControlledOpen] = useState(false);
@@ -426,6 +433,9 @@ function CustomListbox({ options = [], handleOptionSelected, type, allowSearch =
 		ref: wrapperRef,
 		onChange: handleOptionSelected,
 		children: [/* @__PURE__ */ jsxs(ListboxButton, {
+			id,
+			"aria-describedby": describedBy,
+			"aria-required": required || void 0,
 			onClick: () => setControlledOpen((prev) => !prev),
 			className: cx("relative w-full py-2 pl-3 text-left", invalid && "border-red-600 focus:border-red-600 focus:ring-red-500"),
 			children: [/* @__PURE__ */ jsx("span", {
@@ -448,7 +458,7 @@ function CustomListbox({ options = [], handleOptionSelected, type, allowSearch =
 }
 //#endregion
 //#region src/components/MultiSelect.tsx
-function MultiSelectDropdown({ options, value, onChange, id, className, wrapperClassName = "w-full", textBoxClassName, disabled = false, placeholder, loading = false, searchable = true, maxTagCount = 2, compareBy }) {
+function MultiSelectDropdown({ options, value, onChange, id, "aria-labelledby": labelledBy, "aria-describedby": describedBy, required, className, wrapperClassName = "w-full", textBoxClassName, disabled = false, placeholder, loading = false, searchable = true, maxTagCount = 2, compareBy }) {
 	const strings = useStrings();
 	const [query, setQuery] = useState("");
 	const [referenceEl, setReferenceEl] = useState(null);
@@ -514,6 +524,9 @@ function MultiSelectDropdown({ options, value, onChange, id, className, wrapperC
 				/* @__PURE__ */ jsx(ComboboxButton, {
 					as: "div",
 					id,
+					"aria-labelledby": labelledBy,
+					"aria-describedby": describedBy,
+					"aria-required": required || void 0,
 					className: cx("theme-input flex items-center cursor-pointer rounded border text-[14px] w-full px-2 pr-8 py-1 min-h-[30px] overflow-hidden", isDisabled && "opacity-50 cursor-not-allowed", textBoxClassName, className),
 					children: loading ? /* @__PURE__ */ jsx("span", {
 						className: "theme-muted-text",
@@ -534,8 +547,8 @@ function MultiSelectDropdown({ options, value, onChange, id, className, wrapperC
 					ref: setPopperEl,
 					static: true,
 					"data-testid": "msd-list",
-					style: styles.popper,
-					...attributes.popper,
+					style: styles["popper"],
+					...attributes["popper"],
 					className: "theme-panel z-10 max-h-60 w-full overflow-auto rounded-md shadow-lg focus:outline-none",
 					children: [searchable && /* @__PURE__ */ jsx("div", {
 						className: "sticky top-0 theme-panel p-2 border-b z-10",
@@ -564,7 +577,7 @@ function MultiSelectDropdown({ options, value, onChange, id, className, wrapperC
 							const option = opt;
 							return /* @__PURE__ */ jsx(ComboboxOption, {
 								value: option.value,
-								disabled: option.disabled,
+								disabled: option.disabled ?? false,
 								"data-testid": `msd-option-${String(option.value)}`,
 								className: ({ focus }) => cx("relative cursor-pointer select-none py-2 pl-10 pr-4 text-sm", focus && "theme-hover", option.disabled && "cursor-not-allowed opacity-50"),
 								children: ({ selected }) => /* @__PURE__ */ jsxs("div", {
@@ -577,6 +590,7 @@ function MultiSelectDropdown({ options, value, onChange, id, className, wrapperC
 												type: "checkbox",
 												checked: selected,
 												readOnly: true,
+												tabIndex: -1,
 												className: "h-4 w-4 cursor-pointer",
 												"aria-hidden": "true"
 											})
@@ -610,6 +624,7 @@ function ControlledCollapsiblePanel({ title = "", children, open, setOpen, onCli
 		if (onClick) onClick();
 		setOpen?.((open) => !open);
 	}, [setOpen, onClick]);
+	const contentId = React.useId();
 	const Wrapper = wrapperElement ? wrapperElement : React.Fragment;
 	return React.isValidElement(title) ? /* @__PURE__ */ jsxs(Fragment, { children: [title, /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(AnimateHeight, {
 		duration: 300,
@@ -619,20 +634,19 @@ function ControlledCollapsiblePanel({ title = "", children, open, setOpen, onCli
 		className: cx("border border-solid rounded-2xl border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-panel) mb-1 w-full", className),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: cx(!open && "text-(--theme-muted-text-color)", "w-full flex items-center justify-between transform ease-in transition text-sm py-3 px-2 cursor-pointer"),
-			onClick: toggleOpen,
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center w-full",
+			children: [/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-expanded": !!open,
+				"aria-controls": contentId,
+				className: "flex items-center w-full text-left cursor-pointer",
+				onClick: toggleOpen,
 				children: [/* @__PURE__ */ jsx(AngleRightIcon, { className: cx(open && "transform rotate-90", "px-1 ml-1 text-[1.25rem] transition ease-in") }), /* @__PURE__ */ jsx("span", {
 					className: "px-2 font-bold select-none",
 					children: title?.toString()
 				})]
-			}), /* @__PURE__ */ jsx("div", {
-				onClick: (e) => {
-					e.stopPropagation();
-				},
-				children: customizedButton
-			})]
+			}), /* @__PURE__ */ jsx("div", { children: customizedButton })]
 		}), /* @__PURE__ */ jsx(AnimateHeight, {
+			id: contentId,
 			duration: 300,
 			height: open ? "auto" : 0,
 			children
@@ -675,7 +689,7 @@ function SectionHeader({ children, className = "" }) {
 }
 //#endregion
 //#region src/components/SwitchToggle.tsx
-function SwitchToggle({ onChange, id, value = void 0, yesLabel = "Yes", noLabel = "No", disabled = false, datatip = "", invalid = false }) {
+function SwitchToggle({ onChange, id, "aria-describedby": describedBy, value = void 0, yesLabel = "Yes", noLabel = "No", disabled = false, datatip = "", invalid = false }) {
 	const [enabled, setEnabled] = useState(value ?? false);
 	const [isFocused, setIsFocused] = useState(false);
 	const setIsEnabled = (e) => {
@@ -687,11 +701,14 @@ function SwitchToggle({ onChange, id, value = void 0, yesLabel = "Yes", noLabel
 	}, [value]);
 	const checked = value ?? enabled;
 	return /* @__PURE__ */ jsx("div", {
-		"data-tooltip-content": datatip || void 0,
-		"data-tooltip-id": datatip ? TOOLTIP_ID : void 0,
+		...datatip ? {
+			"data-tooltip-content": datatip,
+			"data-tooltip-id": TOOLTIP_ID
+		} : {},
 		className: cx("w-[198px] h-[30px] overflow-hidden shadow-sm rounded-md cursor-pointer ring-(--theme-border) ring-1", invalid && "border-red-600 focus:border-red-600 focus:ring-red-500 ring-1 ring-red-500", !invalid && isFocused && "ring-1 ring-[rgba(82,168,236,.8)] drop-shadow-[0_1px_2px_rgba(82,168,236,0.8)]"),
 		children: /* @__PURE__ */ jsx(Switch, {
 			id,
+			"aria-describedby": describedBy,
 			checked,
 			onChange: setIsEnabled,
 			className: "text-white text-sm shadow-sm rounded-md cursor-pointer",

package/dist/chunks/{Table-ByziK93x.js → Table-CutP1bRt.js}

@@ -1,3 +1,4 @@
+import { c as useStrings } from "./Provider-CbFVFB7O.js";
 import { t as Loader } from "./Loader-BXoXTZGc.js";
 import cx from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -21,14 +22,22 @@ function CompactItem({ wrap = false, children, className, colspan = 1, ...tdProp
 		children
 	});
 }
-function Header({ children, className, style, colspan = 1, onClick, caps = true }) {
+function Header({ children, className, style, colspan = 1, onClick, sort, caps = true }) {
+	const yPadding = className?.includes("py-") ? "" : "py-3";
+	const xPadding = className?.includes("px-") ? "" : "px-3";
+	const textAlign = className?.includes("text-") ? "" : "text-left";
 	return /* @__PURE__ */ jsx("th", {
 		scope: "col",
 		colSpan: colspan,
 		style,
-		className: cx(className, className?.includes("py-") ? "" : "py-3", className?.includes("px-") ? "" : "px-3", className?.includes("text-") ? "" : "text-left", "text-xs font-medium", caps ? "uppercase tracking-wider" : "", onClick && "cursor-pointer hover:opacity-80 transition-opacity"),
-		onClick,
-		children
+		"aria-sort": sort === "unsorted" ? "none" : sort,
+		className: cx(className, yPadding, xPadding, textAlign, "text-xs font-medium", caps ? "uppercase tracking-wider" : ""),
+		children: onClick ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick,
+			className: "w-full cursor-pointer text-inherit [text-align:inherit] hover:opacity-80 transition-opacity",
+			children
+		}) : children
 	});
 }
 var isHeaderChild = (child) => {
@@ -37,13 +46,20 @@ var isHeaderChild = (child) => {
 };
 var getHeaders = (children) => children.filter(isHeaderChild);
 function Table({ borderless = false, panel = true, className = "", wrapperClassName = "", tbodyClassName = "divide-y", theadClassName = "theme-muted-panel", children, roundedTop = false, rounded = false, roundedBottom = false, isLoading = false, tableProps }) {
+	const { loading } = useStrings();
 	const ChildrenArr = React.Children.toArray(children);
 	const Headers = getHeaders(ChildrenArr);
 	return /* @__PURE__ */ jsx("div", {
+		"aria-busy": isLoading,
 		className: cx("flex flex-col w-full", !wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-")) && "overflow-hidden", wrapperClassName),
-		children: isLoading ? /* @__PURE__ */ jsx("div", {
+		children: isLoading ? /* @__PURE__ */ jsxs("div", {
+			role: "status",
+			"aria-label": loading,
 			className: "flex justify-center items-center h-32",
-			children: /* @__PURE__ */ jsx(Loader, {})
+			children: [/* @__PURE__ */ jsx(Loader, {}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: loading
+			})]
 		}) : /* @__PURE__ */ jsx("div", {
 			className: cx("align-middle inline-block min-w-full overflow-x-auto", panel && "theme-panel", !borderless && "border theme-border", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl", roundedTop && "rounded-t-2xl"),
 			children: /* @__PURE__ */ jsxs("table", {