@likec4/diagram 1.58.0 → 1.59.0

package/dist/LikeC4Diagram.js

@@ -100,7 +100,7 @@ function LikeC4Diagram({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, o
 							onLayoutTypeChange
 						},
 						children: [/* @__PURE__ */ jsx(LikeC4Styles, { id }), /* @__PURE__ */ jsx(TagStylesProvider, {
-							rootSelector: `#${id}`,
+							id,
 							children: /* @__PURE__ */ jsx(RootContainer, {
 								id,
 								className,

package/dist/LikeC4Diagram.props.d.ts

@@ -26,7 +26,7 @@ export type ElementIconRendererProps = {
 };
 export type ElementIconRenderer = (props: ElementIconRendererProps) => ReactNode;
 export type LikeC4ColorScheme = 'light' | 'dark';
-export type OverrideReactFlowProps = Pick<ReactFlowProps<Types.AnyNode, Types.AnyEdge>, 'paneClickDistance' | 'nodeClickDistance' | 'selectionKeyCode' | 'panActivationKeyCode' | 'multiSelectionKeyCode' | 'zoomActivationKeyCode' | 'snapToGrid' | 'snapGrid' | 'onlyRenderVisibleElements' | 'nodesDraggable' | 'nodesFocusable' | 'elementsSelectable' | 'selectNodesOnDrag' | 'panOnDrag' | 'preventScrolling' | 'zoomOnScroll' | 'zoomOnPinch' | 'panOnScroll' | 'panOnScrollSpeed' | 'panOnScrollMode' | 'zoomOnDoubleClick' | 'nodeDragThreshold'>;
+export type OverrideReactFlowProps = Pick<ReactFlowProps<Types.AnyNode, Types.AnyEdge>, 'paneClickDistance' | 'nodeClickDistance' | 'selectionKeyCode' | 'panActivationKeyCode' | 'multiSelectionKeyCode' | 'zoomActivationKeyCode' | 'snapToGrid' | 'snapGrid' | 'onlyRenderVisibleElements' | 'nodesDraggable' | 'nodesFocusable' | 'elementsSelectable' | 'selectNodesOnDrag' | 'panOnDrag' | 'preventScrolling' | 'zoomOnScroll' | 'zoomOnPinch' | 'panOnScroll' | 'panOnScrollSpeed' | 'panOnScrollMode' | 'zoomOnDoubleClick' | 'nodeDragThreshold' | 'edgesFocusable'>;
 export type PaddingUnit = 'px' | '%';
 export type PaddingWithUnit = `${number}${PaddingUnit}` | number;
 export type ViewPaddings = {

package/dist/LikeC4Styles.js

@@ -50,7 +50,7 @@ function LikeC4Styles({ id }) {
 	return /* @__PURE__ */ jsx(MemoizedStyle, {
 		id,
 		nonce,
-		colorsStyles: useMemo(() => generateBuiltInColorStyles($styles, rootSelector), [rootSelector, $styles])
+		colorsStyles: useMemo(() => generateBuiltInColorStyles($styles, rootSelector), [rootSelector, $styles.fingerprint])
 	});
 }
 /**

package/dist/LikeC4View.js

@@ -98,14 +98,14 @@ function LikeC4View({ viewId, className, pannable = false, zoomable = false, kee
 			enableSearch: false,
 			...isBrowserEnabled && {
 				onCanvasClick: onNavigateToThisView,
-				onNodeClick: onNavigateToThisView
+				onNodeClick: onNavigateToThisView,
+				onEdgeClick: onNavigateToThisView
 			},
 			reactFlowProps,
 			renderNodes,
 			...props,
 			children
 		}), browserView && /* @__PURE__ */ jsxs(Overlay, {
-			openDelay: 0,
 			onClose: closeBrowser,
 			children: [/* @__PURE__ */ jsx(LikeC4Diagram, {
 				view: browserView,

package/dist/ReactLikeC4.d.ts

@@ -35,7 +35,7 @@ export type ReactLikeC4Props<A extends t.aux.Any = t.aux.UnknownLayouted> = {
     style?: CSSProperties | undefined;
     mantineTheme?: any;
     /** Function to generate nonce attribute added to all generated `<style />` tags */
-    styleNonce?: string | (() => string) | undefined;
+    styleNonce?: string | (() => string | undefined) | undefined;
     children?: ReactNode | undefined;
 } & Omit<LikeC4DiagramProperties<A>, 'view'> & LikeC4DiagramEventHandlers<A>;
 /**

package/dist/base/Base.d.ts

@@ -12,11 +12,12 @@ declare function setDimmed<T extends WithDimmed>(value: T, dimmed: 'immediate' |
 declare function setDimmed(dimmed: 'immediate' | boolean): <T extends WithDimmed>(value: T) => T;
 declare function setHovered<T extends WithHovered>(value: T, hovered: boolean): T;
 declare function setHovered(hovered: boolean): <T extends WithHovered>(value: T) => T;
+export declare function hasSubObject<E>(value: E, subobl: Partial<E>): boolean;
 type WithData<D> = {
     data: D;
 };
-declare function setData<E extends WithData<any>>(value: E, state: Partial<E['data']>): E;
-declare function setData<E extends WithData<any>>(state: Partial<NoInfer<E['data']>>): (value: E) => E;
+declare function setData<E extends WithData<any>>(value: E, data: Partial<E['data']>): E;
+declare function setData<E extends WithData<any>>(state: Partial<NoInfer<E>['data']>): (value: E) => E;
 export declare const Base: {
     setDimmed: typeof setDimmed;
     setHovered: typeof setHovered;

package/dist/base/Base.js

@@ -1,37 +1,25 @@
-import "../_virtual/_rolldown/runtime.js";
-import { hasSubObject } from "remeda";
+import { __name } from "../_virtual/_rolldown/runtime.js";
+import { deepEqual } from "fast-equals";
+import { entries } from "remeda";
 //#region src/base/Base.ts
-var _setDimmed = (v, dimmed) => (v.data.dimmed ?? false) === dimmed ? v : {
-	...v,
-	data: {
-		...v.data,
-		dimmed
-	}
-};
+var mergeData = (v, data) => Object.assign({}, v, { data: Object.assign({}, v.data, data) });
+var _setDimmed = (v, dimmed) => (v.data.dimmed ?? false) === dimmed ? v : mergeData(v, { dimmed });
 function setDimmed(arg1, arg2) {
 	if (arg2 !== void 0) return _setDimmed(arg1, arg2);
 	return (v) => _setDimmed(v, arg1);
 }
-var _setHovered = (v, hovered) => (v.data.hovered ?? false) === hovered ? v : {
-	...v,
-	data: {
-		...v.data,
-		hovered
-	}
-};
+var _setHovered = (v, hovered) => (v.data.hovered ?? false) === hovered ? v : mergeData(v, { hovered });
 function setHovered(arg1, arg2) {
 	if (arg2 !== void 0) return _setHovered(arg1, arg2);
 	return (v) => _setHovered(v, arg1);
 }
-function _setData(value, state) {
-	if (hasSubObject(value.data, state)) return value;
-	return {
-		...value,
-		data: {
-			...value.data,
-			...state
-		}
-	};
+function hasSubObject$1(value, subobl) {
+	return value === subobl || entries(subobl).every(([key, v]) => deepEqual(value[key] ?? void 0, v));
+}
+__name(hasSubObject$1, "hasSubObject");
+function _setData(value, data) {
+	if (hasSubObject$1(value.data, data)) return value;
+	return mergeData(value, data);
 }
 function setData(arg1, arg2) {
 	if (arg2 !== void 0) return _setData(arg1, arg2);
@@ -43,4 +31,4 @@ var Base = {
 	setData
 };
 //#endregion
-export { Base };
+export { Base, hasSubObject$1 as hasSubObject };

package/dist/base/BaseXYFlow.d.ts

@@ -8,8 +8,9 @@ export type BaseXYFlowProps<NodeType extends BaseNode, EdgeType extends BaseEdge
     zoomable: boolean;
     nodesSelectable: boolean;
     nodesDraggable: boolean;
+    showControls?: boolean;
     background?: 'transparent' | 'solid' | XYBackground;
     fitViewPadding?: ViewPadding | undefined;
     onViewportResize?: undefined | (() => void);
 } & SetRequired<Omit<ReactFlowProps<NodeType, EdgeType>, 'defaultNodes' | 'defaultEdges' | 'fitViewOptions' | 'nodesSelectable' | 'nodesDraggable'>, 'nodes' | 'edges' | 'onNodesChange' | 'onEdgesChange'>>;
-export declare function BaseXYFlow<NodeType extends BaseNode, EdgeType extends BaseEdge>({ nodes, edges, onEdgesChange, onNodesChange, className, pannable, zoomable, nodesSelectable, nodesDraggable, background, children, colorMode, fitViewPadding, fitView, zoomOnDoubleClick, onViewportResize, onMoveEnd, onNodeMouseEnter, onNodeMouseLeave, onEdgeMouseEnter, onEdgeMouseLeave, ...props }: BaseXYFlowProps<NodeType, EdgeType>): import("react").JSX.Element;
+export declare function BaseXYFlow<NodeType extends BaseNode, EdgeType extends BaseEdge>({ nodes, edges, onEdgesChange, onNodesChange, className, pannable, zoomable, nodesSelectable, nodesDraggable, background, children, colorMode, fitViewPadding, fitView, zoomOnDoubleClick, onViewportResize, onMoveEnd, onNodeMouseEnter, onNodeMouseLeave, onEdgeMouseEnter, onEdgeMouseLeave, onKeyDownCapture, ariaLabelConfig, nodesFocusable, edgesFocusable, showControls, ...props }: BaseXYFlowProps<NodeType, EdgeType>): import("react").JSX.Element;

package/dist/base/BaseXYFlow.js

@@ -2,18 +2,45 @@ import "../_virtual/_rolldown/runtime.js";
 import { Background as Background$1 } from "./Background.js";
 import { useCallbackRef } from "../hooks/useCallbackRef.js";
 import { useUpdateEffect } from "../hooks/useUpdateEffect.js";
-import { useIsZoomTooSmall, useXYStoreApi } from "../hooks/useXYFlow.js";
+import { useIsZoomTooSmall, useXYFlow, useXYStoreApi } from "../hooks/useXYFlow.js";
 import { roundDpr } from "../utils/roundDpr.js";
 import { stopPropagation } from "../utils/xyflow.js";
 import { Base } from "./Base.js";
 import { MinZoom } from "./const.js";
+import { getKeyboardZoomAction } from "./keyboardZoom.js";
 import { cx } from "@likec4/styles/css";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ReactFlow, useStore } from "@xyflow/react";
 import { useMantineColorScheme } from "@mantine/core";
 //#region src/base/BaseXYFlow.tsx
-function BaseXYFlow({ nodes, edges, onEdgesChange, onNodesChange, className, pannable = true, zoomable = true, nodesSelectable = true, nodesDraggable = false, background = "dots", children, colorMode, fitViewPadding = 0, fitView = true, zoomOnDoubleClick = false, onViewportResize, onMoveEnd, onNodeMouseEnter, onNodeMouseLeave, onEdgeMouseEnter, onEdgeMouseLeave, ...props }) {
+var likec4AriaLabelConfig = {
+	"node.a11yDescription.default": "Press Enter or Space to select this node and reveal its actions.",
+	"node.a11yDescription.keyboardDisabled": "Keyboard activation is disabled.",
+	"edge.a11yDescription.default": "Press Enter or Space to select this relationship and reveal its actions."
+};
+function activateFocusedElement(event) {
+	if (event.repeat || event.key !== "Enter" && event.key !== " ") return;
+	const target = event.target;
+	if (!(target instanceof Element)) return;
+	const interactive = target.closest("a,button,input,textarea,select,[role=\"button\"],[role=\"link\"],[contenteditable=\"true\"]");
+	if (interactive && !interactive.classList.contains("react-flow__node") && !interactive.classList.contains("react-flow__edge")) return;
+	const flowElement = target.closest(".react-flow__node[data-id], .react-flow__edge[data-id]");
+	const view = flowElement?.ownerDocument.defaultView;
+	if (!flowElement || !view) return;
+	event.preventDefault();
+	const rect = flowElement.getBoundingClientRect();
+	flowElement.dispatchEvent(new view.MouseEvent("click", {
+		bubbles: true,
+		cancelable: true,
+		button: 0,
+		clientX: rect.left + rect.width / 2,
+		clientY: rect.top + rect.height / 2,
+		detail: 1,
+		view
+	}));
+}
+function BaseXYFlow({ nodes, edges, onEdgesChange, onNodesChange, className, pannable = true, zoomable = true, nodesSelectable = true, nodesDraggable = false, background = "dots", children, colorMode, fitViewPadding = 0, fitView = true, zoomOnDoubleClick = false, onViewportResize, onMoveEnd, onNodeMouseEnter, onNodeMouseLeave, onEdgeMouseEnter, onEdgeMouseLeave, onKeyDownCapture, ariaLabelConfig, nodesFocusable = nodesDraggable || nodesSelectable, edgesFocusable = false, showControls = false, ...props }) {
 	const fitViewOptions = useMemo(() => ({
 		minZoom: MinZoom,
 		maxZoom: 1,
@@ -22,9 +49,30 @@ function BaseXYFlow({ nodes, edges, onEdgesChange, onNodesChange, className, pan
 	}), [fitViewPadding]);
 	const isBgWithPattern = background !== "transparent" && background !== "solid";
 	const isZoomTooSmall = useIsZoomTooSmall();
+	const xyflow = useXYFlow();
 	const xystore = useXYStoreApi();
 	const { colorScheme } = useMantineColorScheme();
 	if (!colorMode) colorMode = colorScheme === "auto" ? "system" : colorScheme;
+	const tabIndex = props.tabIndex ?? (zoomable ? 0 : void 0);
+	const ariaLabel = props["aria-label"] !== void 0 || props["aria-labelledby"] !== void 0 || tabIndex === void 0 ? props["aria-label"] : "Interactive diagram";
+	const onKeyDown = useCallbackRef((event) => {
+		props.onKeyDown?.(event);
+		if (event.defaultPrevented || !zoomable) return;
+		const action = getKeyboardZoomAction(event.nativeEvent);
+		if (!action) return;
+		event.preventDefault();
+		switch (action) {
+			case "zoom-in":
+				xyflow.zoomIn();
+				return;
+			case "zoom-out":
+				xyflow.zoomOut();
+				return;
+			case "reset":
+				xyflow.fitView(fitViewOptions);
+				return;
+		}
+	});
 	return /* @__PURE__ */ jsxs(ReactFlow, {
 		colorMode,
 		nodes,
@@ -51,9 +99,13 @@ function BaseXYFlow({ nodes, edges, onEdgesChange, onNodesChange, className, pan
 			selectionKeyCode: null
 		},
 		elementsSelectable: nodesSelectable,
-		nodesFocusable: nodesDraggable || nodesSelectable,
-		edgesFocusable: false,
+		nodesFocusable,
+		edgesFocusable,
 		nodesDraggable,
+		ariaLabelConfig: {
+			...likec4AriaLabelConfig,
+			...ariaLabelConfig
+		},
 		nodeDragThreshold: 4,
 		nodeClickDistance: 3,
 		paneClickDistance: 3,
@@ -121,7 +173,14 @@ function BaseXYFlow({ nodes, edges, onEdgesChange, onNodesChange, className, pan
 		}),
 		onNodeDoubleClick: stopPropagation,
 		onEdgeDoubleClick: stopPropagation,
+		onKeyDownCapture: useCallbackRef((event) => {
+			onKeyDownCapture?.(event);
+			if (!event.defaultPrevented) activateFocusedElement(event);
+		}),
 		...props,
+		"aria-label": ariaLabel,
+		tabIndex,
+		onKeyDown,
 		children: [
 			isBgWithPattern && /* @__PURE__ */ jsx(Background$1, { background }),
 			onViewportResize && /* @__PURE__ */ jsx(ViewportResizeHanlder, { onViewportResize }),

package/dist/base/keyboardZoom.d.ts

@@ -0,0 +1,3 @@
+export type KeyboardZoomAction = 'zoom-in' | 'zoom-out' | 'reset';
+export declare function isEditableKeyboardTarget(target: EventTarget | null): boolean;
+export declare function getKeyboardZoomAction(event: Pick<KeyboardEvent, 'key' | 'ctrlKey' | 'metaKey' | 'target'>): KeyboardZoomAction | null;

package/dist/base/keyboardZoom.js

@@ -0,0 +1,20 @@
+import "../_virtual/_rolldown/runtime.js";
+//#region src/base/keyboardZoom.ts
+function isEditableKeyboardTarget(target) {
+	if (!(target instanceof HTMLElement)) return false;
+	const tagName = target.tagName.toLowerCase();
+	return tagName === "input" || tagName === "textarea" || tagName === "select" || target.isContentEditable;
+}
+function getKeyboardZoomAction(event) {
+	if (!event.ctrlKey && !event.metaKey || isEditableKeyboardTarget(event.target)) return null;
+	switch (event.key) {
+		case "+":
+		case "=": return "zoom-in";
+		case "-":
+		case "_": return "zoom-out";
+		case "0": return "reset";
+		default: return null;
+	}
+}
+//#endregion
+export { getKeyboardZoomAction, isEditableKeyboardTarget };

package/dist/base/updateEdges.js

@@ -1,6 +1,7 @@
 import "../_virtual/_rolldown/runtime.js";
+import { hasSubObject as hasSubObject$1 } from "./Base.js";
 import { deepEqual } from "fast-equals";
-import { hasSubObject, isDefined, isShallowEqual, pickBy } from "remeda";
+import { isDefined, isShallowEqual, pickBy } from "remeda";
 //#region src/base/updateEdges.ts
 var EMPTY_OBJ = {};
 function _update(current, updated) {
@@ -9,23 +10,13 @@ function _update(current, updated) {
 		const existing = current.find((n) => n.id === update.id && n.type === update.type && n.source === update.source && n.target === update.target);
 		if (!existing) return update;
 		if (existing === update) return existing;
-		const isSameData = hasSubObject(existing.data, update.data);
+		const isSameData = hasSubObject$1(existing.data, update.data);
 		let data = isSameData ? existing.data : update.data;
 		if (!isSameData) {
-			if (isDefined(existing.data.hovered) && !isDefined(update.data.hovered)) data = {
-				...data,
-				hovered: existing.data.hovered
-			};
-			if (isDefined(existing.data.dimmed) && !isDefined(update.data.dimmed)) data = {
-				...data,
-				dimmed: existing.data.dimmed
-			};
-			if (isDefined(existing.data.active) && !isDefined(update.data.active)) data = {
-				...data,
-				active: existing.data.active
-			};
-		}
-		if (isSameData && deepEqual(existing.hidden, update.hidden ?? existing.hidden) && deepEqual(existing.selected, update.selected ?? existing.selected) && deepEqual(existing.selectable, update.selectable ?? existing.selectable) && deepEqual(existing.focusable, update.focusable ?? existing.focusable) && deepEqual(existing.animated, update.animated ?? existing.animated) && deepEqual(existing.className, update.className) && deepEqual(existing.zIndex, update.zIndex ?? existing.zIndex) && deepEqual(existing.label, update.label) && deepEqual(existing.sourceHandle, update.sourceHandle) && deepEqual(existing.targetHandle, update.targetHandle) && deepEqual(existing.style ?? EMPTY_OBJ, update.style ?? EMPTY_OBJ)) return existing;
+			if (isDefined(existing.data.hovered) && !isDefined(data.hovered)) data = Object.assign({ hovered: existing.data.hovered }, data);
+			if (isDefined(existing.data.dimmed) && !isDefined(data.dimmed)) data = Object.assign({ dimmed: existing.data.dimmed }, data);
+			if (isDefined(existing.data.active) && !isDefined(data.active)) data = Object.assign({ active: existing.data.active }, data);
+		} else if (deepEqual(existing.hidden, update.hidden ?? existing.hidden) && deepEqual(existing.selected, update.selected ?? existing.selected) && deepEqual(existing.selectable, update.selectable ?? existing.selectable) && deepEqual(existing.animated, update.animated ?? existing.animated) && deepEqual(existing.ariaLabel, update.ariaLabel ?? existing.ariaLabel) && deepEqual(existing.ariaRole, update.ariaRole ?? existing.ariaRole) && deepEqual(existing.className, update.className ?? existing.className) && deepEqual(existing.zIndex, update.zIndex ?? existing.zIndex) && deepEqual(existing.label, update.label) && deepEqual(existing.sourceHandle, update.sourceHandle ?? existing.sourceHandle) && deepEqual(existing.targetHandle, update.targetHandle ?? existing.targetHandle) && deepEqual(existing.style ?? EMPTY_OBJ, update.style ?? EMPTY_OBJ)) return existing;
 		return {
 			...pickBy(existing, isDefined),
 			...pickBy(update, isDefined),

package/dist/base/updateNodes.js

@@ -13,19 +13,13 @@ function _update(current, updated) {
 		const isSameData = hasSubObject(existing.data, update.data);
 		let data = isSameData ? existing.data : update.data;
 		if (!isSameData) {
-			if (isDefined(existing.data.hovered) && !isDefined(update.data.hovered)) data = {
-				...data,
-				hovered: existing.data.hovered
-			};
-			if (isDefined(existing.data.dimmed) && !isDefined(update.data.dimmed)) data = {
-				...data,
-				dimmed: existing.data.dimmed
-			};
+			if (isDefined(existing.data.hovered) && !isDefined(data.hovered)) data = Object.assign({ hovered: existing.data.hovered }, data);
+			if (isDefined(existing.data.dimmed) && !isDefined(data.dimmed)) data = Object.assign({ dimmed: existing.data.dimmed }, data);
 		}
 		const { width: existingWidth, height: existingHeight } = getNodeDimensions(existing);
 		const haveHandles = Object.hasOwn(existing, "handles") || Object.hasOwn(update, "handles");
 		const isSameHandles = !haveHandles || deepEqual(existing.handles ?? [], update.handles ?? []);
-		if (isSameData && isSameHandles && deepEqual(existingWidth, update.width ?? update.initialWidth) && deepEqual(existingHeight, update.height ?? update.initialHeight) && deepEqual(existing.parentId ?? null, update.parentId ?? null) && deepEqual(existing.hidden, update.hidden ?? existing.hidden) && deepEqual(existing.selected, update.selected ?? existing.selected) && deepEqual(existing.selectable, update.selectable ?? existing.selectable) && deepEqual(existing.focusable, update.focusable ?? existing.focusable) && deepEqual(existing.draggable, update.draggable ?? existing.draggable) && deepEqual(existing.dragHandle, update.dragHandle) && deepEqual(existing.className, update.className) && deepEqual(existing.zIndex, update.zIndex ?? existing.zIndex) && deepEqual(existing.position, update.position) && deepEqual(existing.domAttributes ?? EMPTY_OBJ, update.domAttributes ?? EMPTY_OBJ) && deepEqual(existing.style ?? EMPTY_OBJ, update.style ?? EMPTY_OBJ)) return existing;
+		if (isSameData && isSameHandles && deepEqual(existingWidth, update.width ?? update.initialWidth) && deepEqual(existingHeight, update.height ?? update.initialHeight) && deepEqual(existing.parentId ?? null, update.parentId ?? null) && deepEqual(existing.hidden, update.hidden ?? existing.hidden) && deepEqual(existing.selected, update.selected ?? existing.selected) && deepEqual(existing.selectable, update.selectable ?? existing.selectable) && deepEqual(existing.focusable, update.focusable ?? existing.focusable) && deepEqual(existing.draggable, update.draggable ?? existing.draggable) && deepEqual(existing.ariaLabel, update.ariaLabel ?? existing.ariaLabel) && deepEqual(existing.ariaRole, update.ariaRole ?? existing.ariaRole) && deepEqual(existing.dragHandle, update.dragHandle) && deepEqual(existing.className, update.className) && deepEqual(existing.zIndex, update.zIndex ?? existing.zIndex) && deepEqual(existing.position, update.position) && deepEqual(existing.domAttributes ?? EMPTY_OBJ, update.domAttributes ?? EMPTY_OBJ) && deepEqual(existing.style ?? EMPTY_OBJ, update.style ?? EMPTY_OBJ)) return existing;
 		const handles = haveHandles && isSameHandles ? existing.handles : update.handles;
 		return {
 			...pickBy(existing, (v, k) => isDefined(v) && k !== "parentId" && k !== "handles"),

package/dist/base-primitives/compound/CompoundActionButton.d.ts

@@ -3,7 +3,8 @@ import { Simplify } from 'type-fest';
 import { BaseNodeProps } from '../../base/types';
 type CompoundActionButtonProps = Simplify<BaseNodeProps & {
     icon?: ReactNode;
+    ariaLabel?: string;
     onClick: (e: ReactMouseEvent) => void;
 }>;
-export declare function CompoundActionButton({ data: { hovered: isHovered, }, icon, onClick, }: CompoundActionButtonProps): import("react").JSX.Element;
+export declare function CompoundActionButton({ selected, data: { hovered: isHovered, }, icon, ariaLabel, onClick, }: CompoundActionButtonProps): import("react").JSX.Element;
 export {};

package/dist/base-primitives/compound/CompoundActionButton.js

@@ -27,8 +27,9 @@ var variants = {
 	},
 	whileTap: { scale: 1 }
 };
-function CompoundActionButton({ data: { hovered: isHovered = false }, icon, onClick }) {
+function CompoundActionButton({ selected = false, data: { hovered: isHovered = false }, icon, ariaLabel = "Navigate to view", onClick }) {
 	const isHoverDebounced = useDebouncedValue(isHovered, isHovered ? 130 : 0)[0] && isHovered;
+	const isActionVisible = selected || isHoverDebounced;
 	let variant = isHoverDebounced ? "hovered" : "normal";
 	return /* @__PURE__ */ jsx(m.div, {
 		initial: false,
@@ -41,7 +42,9 @@ function CompoundActionButton({ data: { hovered: isHovered = false }, icon, onCl
 		tabIndex: -1,
 		children: /* @__PURE__ */ jsx(ActionIcon, {
 			className: cx("nodrag nopan", compoundActionBtn({ delay: isHovered && !isHoverDebounced }), actionBtn({ variant: "transparent" })),
-			tabIndex: -1,
+			tabIndex: isActionVisible ? 0 : -1,
+			inert: isActionVisible ? void 0 : true,
+			"aria-label": ariaLabel,
 			onClick,
 			onDoubleClick: stopPropagation,
 			children: icon ?? /* @__PURE__ */ jsx(IconZoomScan, { stroke: 2 })

package/dist/base-primitives/compound/CompoundDetailsButton.d.ts

@@ -3,7 +3,8 @@ import { Simplify } from 'type-fest';
 import { BaseNodeProps } from '../../base/types';
 type CompoundDetailsButtonProps = Simplify<BaseNodeProps & {
     icon?: ReactNode;
+    ariaLabel?: string;
     onClick: (e: ReactMouseEvent) => void;
 }>;
-export declare function CompoundDetailsButton({ data: { hovered: isHovered, }, icon, onClick, }: CompoundDetailsButtonProps): import("react").JSX.Element;
+export declare function CompoundDetailsButton({ selected, data: { hovered: isHovered, }, icon, ariaLabel, onClick, }: CompoundDetailsButtonProps): import("react").JSX.Element;
 export {};

package/dist/base-primitives/compound/CompoundDetailsButton.js

@@ -15,8 +15,9 @@ var variants = {
 	whileHover: { scale: 1.4 },
 	whileTap: { scale: 1 }
 };
-function CompoundDetailsButton({ data: { hovered: isHovered = false }, icon, onClick }) {
+function CompoundDetailsButton({ selected = false, data: { hovered: isHovered = false }, icon, ariaLabel = "Open details", onClick }) {
 	const isHoverDebounced = useDebouncedValue(isHovered, isHovered ? 130 : 0)[0] && isHovered;
+	const isActionVisible = selected || isHoverDebounced;
 	const variant = isHoverDebounced ? "hovered" : "normal";
 	return /* @__PURE__ */ jsx(m.div, {
 		initial: false,
@@ -28,7 +29,9 @@ function CompoundDetailsButton({ data: { hovered: isHovered = false }, icon, onC
 		tabIndex: -1,
 		children: /* @__PURE__ */ jsx(ActionIcon, {
 			className: cx("nodrag nopan", compoundActionBtn({ delay: isHovered && !isHoverDebounced }), actionBtn({ variant: "transparent" })),
-			tabIndex: -1,
+			tabIndex: isActionVisible ? 0 : -1,
+			inert: isActionVisible ? void 0 : true,
+			"aria-label": ariaLabel,
 			onClick,
 			onDoubleClick: stopPropagation,
 			children: icon ?? /* @__PURE__ */ jsx(IconId, {

package/dist/base-primitives/compound/CompoundTitle.d.ts

@@ -8,6 +8,12 @@ type RequiredData = {
 };
 type CompoundTitleProps = {
     data: RequiredData;
+    /**
+     * Opt-in: hide the title from assistive technologies. The main diagram sets
+     * this because the compound node's accessible label already conveys the
+     * title, so re-exposing it here would cause a duplicate announcement.
+     */
+    'aria-hidden'?: boolean | undefined;
 };
-export declare function CompoundTitle({ data }: CompoundTitleProps): import("react").JSX.Element;
+export declare function CompoundTitle({ data, 'aria-hidden': ariaHidden }: CompoundTitleProps): import("react").JSX.Element;
 export {};

package/dist/base-primitives/compound/CompoundTitle.js

@@ -2,9 +2,10 @@ import "../../_virtual/_rolldown/runtime.js";
 import { IconRenderer } from "../../context/IconRenderer.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/base-primitives/compound/CompoundTitle.tsx
-function CompoundTitle({ data }) {
+function CompoundTitle({ data, "aria-hidden": ariaHidden }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "likec4-compound-title-container",
+		"aria-hidden": ariaHidden,
 		children: [IconRenderer({
 			element: data,
 			className: "likec4-compound-icon"

package/dist/base-primitives/compound/actionbtns.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeRuntimeFn } from '../../../styled-system';
+import { RecipeRuntimeFn } from '../../../styled-system/types';
 export declare const compoundActionBtn: RecipeRuntimeFn<{
     delay: {
         true: {

package/dist/base-primitives/edge/EdgeActionButton.d.ts

@@ -1,7 +1,8 @@
 import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 type EdgeActionBtnProps = {
     icon?: ReactNode;
+    ariaLabel?: string;
     onClick: (e: ReactMouseEvent) => void;
 };
-export declare function EdgeActionButton({ icon, onClick }: EdgeActionBtnProps): import("react").JSX.Element;
+export declare function EdgeActionButton({ icon, ariaLabel, onClick }: EdgeActionBtnProps): import("react").JSX.Element;
 export {};

package/dist/base-primitives/edge/EdgeActionButton.js

@@ -6,12 +6,13 @@ import { jsx } from "react/jsx-runtime";
 import { ActionIcon } from "@mantine/core";
 import { edgeActionBtn } from "@likec4/styles/recipes";
 //#region src/base-primitives/edge/EdgeActionButton.tsx
-function EdgeActionButton({ icon, onClick }) {
+function EdgeActionButton({ icon, ariaLabel = "Navigate to view", onClick }) {
 	return /* @__PURE__ */ jsx(ActionIcon, {
 		className: cx("nodrag nopan", edgeActionBtn()),
 		onPointerDownCapture: stopPropagation,
 		onClick,
 		role: "button",
+		"aria-label": ariaLabel,
 		onDoubleClick: stopPropagation,
 		children: icon ?? /* @__PURE__ */ jsx(IconZoomScan, {})
 	});

package/dist/base-primitives/edge/EdgeContainer.d.ts

@@ -7,5 +7,5 @@ type EdgeContainerProps = PropsWithChildren<BaseEdgePropsWithData<Data> & {
     component?: 'g' | 'svg' | undefined;
     className?: string | undefined;
 }>;
-export declare function EdgeContainer({ className, component, selectable, selected, data: { color, hovered: isHovered, active: isActive, dimmed: isDimmed, ...data }, animated, children, style, }: EdgeContainerProps): import("react").JSX.Element;
+export declare function EdgeContainer({ className, component, selectable, selected, data: { color, hovered: isHovered, active: isActive, dimmed: isDimmed, ...data }, animated, children, style, ...rest }: EdgeContainerProps): import("react").JSX.Element;
 export {};

package/dist/base-primitives/edge/EdgeContainer.js

@@ -1,9 +1,10 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { cx } from "@likec4/styles/css";
 import { jsx } from "react/jsx-runtime";
+import { pickBy } from "remeda";
 import { invariant } from "@likec4/core";
 //#region src/base-primitives/edge/EdgeContainer.tsx
-function EdgeContainer({ className, component = "g", selectable = false, selected = false, data: { color = "gray", hovered: isHovered = false, active: isActive = false, dimmed: isDimmed = false, ...data }, animated = false, children, style }) {
+function EdgeContainer({ className, component = "g", selectable = false, selected = false, data: { color = "gray", hovered: isHovered = false, active: isActive = false, dimmed: isDimmed = false, ...data }, animated = false, children, style, ...rest }) {
 	animated = animated || isActive;
 	const props = {
 		className: cx(className, "likec4-edge-container", selected && "selected", selectable && "selectable"),
@@ -13,7 +14,8 @@ function EdgeContainer({ className, component = "g", selectable = false, selecte
 		"data-likec4-hovered": isHovered,
 		...animated && { "data-likec4-animated": animated },
 		...selected && { "data-likec4-selected": selected },
-		...isDimmed !== false && { "data-likec4-dimmed": isDimmed }
+		...isDimmed !== false && { "data-likec4-dimmed": isDimmed },
+		...pickBy(rest, (value, key) => value !== void 0 && key.startsWith("data-"))
 	};
 	if (component === "svg") return /* @__PURE__ */ jsx("svg", {
 		style,

package/dist/base-primitives/edge/EdgeLabel.d.ts

@@ -7,6 +7,8 @@ type Data = UndefinedOnPartialDeep<Pick<DiagramEdge, 'label' | 'technology'>>;
 type EdgeLabelProps = HTMLMotionProps<'div'> & {
     children?: ReactNode;
     edgeProps: BaseEdgePropsWithData<Data>;
+    isSequenceStep?: boolean;
+    stepNum?: number;
     pointerEvents?: 'all' | 'none';
 };
 export declare const EdgeLabel: ForwardRefExoticComponent<Omit<EdgeLabelProps, "ref"> & RefAttributes<HTMLDivElement>>;

package/dist/base-primitives/edge/EdgeLabel.js

@@ -3,14 +3,11 @@ import { cx } from "@likec4/styles/css";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { isTruthy } from "remeda";
-import { extractStep, isStepEdgeId } from "@likec4/core";
 import { Box } from "@likec4/styles/jsx";
 import * as m from "motion/react-m";
 import { edgeLabel } from "@likec4/styles/recipes";
 //#region src/base-primitives/edge/EdgeLabel.tsx
-var EdgeLabel = forwardRef(({ edgeProps: { id, data: { label, technology, hovered: isHovered = false }, selected = false, selectable = false }, pointerEvents = "all", className, children, ...rest }, ref) => {
-	const stepNum = isStepEdgeId(id) ? extractStep(id) : null;
-	const isStepEdge = stepNum !== null;
+var EdgeLabel = forwardRef(({ edgeProps: { id, data: { label, technology, hovered: isHovered = false }, selected = false, selectable = false }, isSequenceStep: isStepEdge = false, stepNum, pointerEvents = "all", className, children, ...rest }, ref) => {
 	const hasLabel = isTruthy(label) || isTruthy(technology);
 	return /* @__PURE__ */ jsxs(m.div, {
 		ref,
@@ -22,7 +19,7 @@ var EdgeLabel = forwardRef(({ edgeProps: { id, data: { label, technology, hovere
 		"data-edge-id": id,
 		animate: { scale: isHovered && !selected ? 1.06 : 1 },
 		...rest,
-		children: [stepNum !== null && /* @__PURE__ */ jsx(Box, {
+		children: [isStepEdge && stepNum && /* @__PURE__ */ jsx(Box, {
 			className: "likec4-edge-label__step-number",
 			children: stepNum
 		}), hasLabel && /* @__PURE__ */ jsxs(Box, {

package/dist/base-primitives/element/ElementActionButtons.d.ts

@@ -35,6 +35,7 @@ export declare function ElementActionButtons({ selected, data: { hovered: isHove
 export declare namespace ElementActionButtons {
     type Item = {
         key?: string;
+        ariaLabel?: string;
         icon?: ReactNode;
         onClick: (e: ReactMouseEvent) => void;
     };

package/dist/base-primitives/element/ElementActionButtons.js

@@ -66,6 +66,7 @@ function ElementActionButtons({ selected = false, data: { hovered: isHovered = f
 			break;
 		default: variant = "normal";
 	}
+	const isActionVisible = isHovered || selected;
 	return /* @__PURE__ */ jsx("div", {
 		className: actionButtons(),
 		children: /* @__PURE__ */ jsx(m.div, {
@@ -83,7 +84,9 @@ function ElementActionButtons({ selected = false, data: { hovered: isHovered = f
 				initial: false,
 				whileTap: { scale: 1 },
 				whileHover: { scale: 1.3 },
-				tabIndex: -1,
+				tabIndex: isActionVisible ? 0 : -1,
+				inert: isActionVisible ? void 0 : true,
+				"aria-label": button.ariaLabel ?? button.key ?? "Element action",
 				onClick: button.onClick,
 				onDoubleClick: stopPropagation,
 				children: button.icon || /* @__PURE__ */ jsx(IconBolt, {})

package/dist/base-primitives/element/ElementData.d.ts

@@ -47,7 +47,9 @@ type SlotProps = {
  * </ElementData.Root>
  * ```
  */
-export declare function ElementData({ data }: ElementDataProps): import("react").JSX.Element;
+export declare function ElementData({ data, 'aria-hidden': ariaHidden }: ElementDataProps & {
+    'aria-hidden'?: boolean | undefined;
+}): import("react").JSX.Element;
 export declare namespace ElementData {
     var Root: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & ElementDataProps & import("react").RefAttributes<HTMLDivElement>>;
     var Icon: ({ data, ...props }: IconProps) => import("react").JSX.Element;

package/dist/base-primitives/element/ElementData.js

@@ -101,9 +101,10 @@ var Description = forwardRef(({ data: { description }, className, ...props }, re
 * </ElementData.Root>
 * ```
 */
-function ElementData({ data }) {
+function ElementData({ data, "aria-hidden": ariaHidden }) {
 	return /* @__PURE__ */ jsxs(Root, {
 		data,
+		"aria-hidden": ariaHidden,
 		children: [/* @__PURE__ */ jsx(Icon, { data }), /* @__PURE__ */ jsxs(Content, { children: [
 			/* @__PURE__ */ jsx(Title, { data }),
 			/* @__PURE__ */ jsx(Technology, { data }),

package/dist/base-primitives/element/ElementDetailsButton.d.ts

@@ -4,7 +4,8 @@ type ElementDetailsButtonProps = {
     selected?: boolean;
     data: BaseNodeData;
     icon?: ReactNode;
+    ariaLabel?: string;
     onClick: (e: ReactMouseEvent) => void;
 };
-export declare function ElementDetailsButton({ selected, data: { hovered: isHovered, }, icon, onClick, }: ElementDetailsButtonProps): import("react").JSX.Element;
+export declare function ElementDetailsButton({ selected, data: { hovered: isHovered, }, icon, ariaLabel, onClick, }: ElementDetailsButtonProps): import("react").JSX.Element;
 export {};