@ac-design/design-system 2.6.1 → 2.8.0

package/dist/lib/components/AcCheckBox.vue_vue_type_script_setup_true_lang.js

@@ -6,30 +6,30 @@ var E = { class: "flex flex-col gap-3" }, D = ["for"], O = [
 	"name",
 	"value",
 	"disabled"
-], k = { class: "flex min-w-0 flex-col gap-1" }, A = { class: "font-normal" }, j = {
+], k = { class: "font-normal" }, A = {
 	key: 0,
 	class: "text-xs text-muted"
-}, M = {
+}, j = {
 	key: 0,
 	class: "mt-1 text-base text-danger-strong",
 	role: "alert"
-}, N = [
+}, M = [
 	"name",
 	"checked",
 	"indeterminate",
 	"disabled",
 	"aria-invalid",
 	"aria-describedby"
-], P = {
+], N = {
 	key: 0,
-	class: "flex min-w-0 flex-col gap-1"
-}, F = { key: 0 }, I = {
+	class: "font-medium"
+}, P = {
 	key: 1,
 	class: "font-medium"
-}, L = {
+}, F = {
 	key: 2,
 	class: "text-xs text-muted"
-}, R = ["id"], z = /*@__PURE__*/ o({
+}, I = ["id"], L = /*@__PURE__*/ o({
 	inheritAttrs: !1,
 	__name: "AcCheckBox",
 	props: /*@__PURE__*/ s({
@@ -58,75 +58,78 @@ var E = { class: "flex flex-col gap-3" }, D = ["for"], O = [
 	}),
 	emits: ["update:modelValue", "update:checked"],
 	setup(o) {
-		let s = o, z = y(o, "modelValue"), B = y(o, "checked"), V = b(), H = v(), U = _(), W = f(null), G = t(() => s.size === "small"), K = t(() => s.indeterminate && !B.value), q = t(() => s.options ? U : {
-			class: U.class,
-			style: U.style
-		}), J = t(() => {
-			let { class: e, style: t, ...n } = U;
-			return s.label || V.label || n["aria-label"] || n["aria-labelledby"] ? n : {
+		let s = o, L = y(o, "modelValue"), R = y(o, "checked"), z = b(), B = v(), V = _(), H = f(null), U = t(() => s.size === "small"), W = t(() => s.indeterminate && !R.value), G = t(() => s.options ? V : {
+			class: V.class,
+			style: V.style
+		}), K = t(() => {
+			let { class: e, style: t, ...n } = V;
+			return s.label || z.label || n["aria-label"] || n["aria-labelledby"] ? n : {
 				"aria-label": "Select",
 				...n
 			};
-		}), Y = t(() => G.value ? "size-[18px]" : "size-6"), X = t(() => [
+		}), q = t(() => !!(s.label || z.label || s.description)), J = t(() => U.value ? "size-[18px]" : "size-6"), Y = t(() => [
 			"peer cursor-pointer appearance-none rounded-4 border border-muted/70 transition-colors duration-200 group-hover:enabled:not-checked:not-indeterminate:border-primary/60 checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none disabled:cursor-not-allowed disabled:not-checked:not-indeterminate:bg-surface-sunken",
-			Y.value,
-			G.value ? "bg-background" : "bg-transparent"
-		]), Z = t(() => ["pointer-events-none absolute inset-0 m-auto text-white opacity-0 transition-opacity duration-150 motion-reduce:transition-none", G.value ? "size-3.5" : "size-5"]), Q = t(() => ["cursor-not-allowed", G.value ? "opacity-40" : "opacity-50"]);
-		async function $(e) {
-			B.value = e.target.checked, await l(), W.value && (W.value.checked = B.value, W.value.indeterminate = K.value);
+			J.value,
+			U.value ? "bg-background" : "bg-transparent"
+		]), X = t(() => ["pointer-events-none absolute inset-0 m-auto text-white opacity-0 transition-opacity duration-150 motion-reduce:transition-none", U.value ? "size-3.5" : "size-5"]), Z = t(() => U.value ? "" : "pt-0.5"), Q = t(() => U.value ? "mt-px" : ""), $ = t(() => ["cursor-not-allowed", U.value ? "opacity-40" : "opacity-50"]);
+		async function ee(e) {
+			R.value = e.target.checked, await l(), H.value && (H.value.checked = R.value, H.value.indeterminate = W.value);
 		}
 		return (t, s) => o.options ? (d(), r("div", c({
 			key: 0,
 			"data-ac-ds": "",
 			"data-testid": "ac-checkbox"
-		}, q.value), [i("div", E, [(d(!0), r(e, null, p(o.options, (e, t) => (d(), r("label", {
+		}, G.value), [i("div", E, [(d(!0), r(e, null, p(o.options, (e, t) => (d(), r("label", {
 			key: e.label,
-			for: `${g(H)}-${t}`,
-			class: u(["group inline-flex w-fit cursor-pointer items-start text-base text-heading select-none", [e.disabled && Q.value, G.value ? "gap-2.5" : "gap-3"]])
-		}, [i("span", { class: u(["relative inline-flex shrink-0", Y.value]) }, [S(i("input", {
-			id: `${g(H)}-${t}`,
-			"onUpdate:modelValue": s[0] ||= (e) => z.value = e,
+			for: `${g(B)}-${t}`,
+			class: u(["group inline-flex w-fit cursor-pointer items-start text-base font-normal text-heading select-none", [e.disabled && $.value, U.value ? "gap-2.5" : "gap-3"]])
+		}, [i("span", { class: u(["relative inline-flex shrink-0", [J.value, Q.value]]) }, [S(i("input", {
+			id: `${g(B)}-${t}`,
+			"onUpdate:modelValue": s[0] ||= (e) => L.value = e,
 			type: "checkbox",
 			name: o.name,
 			value: e.value,
 			disabled: e.disabled,
-			class: u(X.value)
-		}, null, 10, O), [[x, z.value]]), a(g(w), {
-			class: u([Z.value, "peer-checked:opacity-100"]),
+			class: u(Y.value)
+		}, null, 10, O), [[x, L.value]]), a(g(w), {
+			class: u([X.value, "peer-checked:opacity-100"]),
 			"aria-hidden": "true"
-		}, null, 8, ["class"])], 2), i("span", k, [i("span", A, h(e.label), 1), e.description ? (d(), r("span", j, h(e.description), 1)) : n("", !0)])], 10, D))), 128))]), o.errorMsg ? (d(), r("p", M, h(o.errorMsg), 1)) : n("", !0)], 16)) : (d(), r("div", c({
+		}, null, 8, ["class"])], 2), i("span", { class: u(["flex min-w-0 flex-col gap-1", Z.value]) }, [i("span", k, h(e.label), 1), e.description ? (d(), r("span", A, h(e.description), 1)) : n("", !0)], 2)], 10, D))), 128))]), o.errorMsg ? (d(), r("p", j, h(o.errorMsg), 1)) : n("", !0)], 16)) : (d(), r("div", c({
 			key: 1,
 			class: "inline-flex flex-col",
 			"data-ac-ds": "",
 			"data-testid": "ac-checkbox"
-		}, q.value, { onClick: s[1] ||= C(() => {}, ["stop"]) }), [i("label", { class: u(["group inline-flex w-fit cursor-pointer items-start text-base text-heading select-none", [o.disabled && Q.value, G.value ? "gap-2.5" : "gap-3"]]) }, [i("span", { class: u(["relative inline-flex shrink-0", Y.value]) }, [
+		}, G.value, { onClick: s[1] ||= C(() => {}, ["stop"]) }), [i("label", { class: u(["group inline-flex w-fit cursor-pointer items-start text-base font-normal text-heading select-none", [o.disabled && $.value, U.value ? "gap-2.5" : "gap-3"]]) }, [i("span", { class: u(["relative inline-flex shrink-0", [J.value, q.value && Q.value]]) }, [
 			i("input", c({
 				ref_key: "single",
-				ref: W,
+				ref: H,
 				type: "checkbox",
 				name: o.name,
-				checked: B.value,
-				indeterminate: K.value,
+				checked: R.value,
+				indeterminate: W.value,
 				disabled: o.disabled,
 				"aria-invalid": o.errorMsg ? !0 : void 0,
-				"aria-describedby": o.errorMsg ? `${g(H)}-error` : void 0,
-				class: X.value
-			}, J.value, { onChange: $ }), null, 16, N),
+				"aria-describedby": o.errorMsg ? `${g(B)}-error` : void 0,
+				class: Y.value
+			}, K.value, { onChange: ee }), null, 16, M),
 			a(g(w), {
-				class: u([Z.value, "peer-checked:opacity-100"]),
+				class: u([X.value, "peer-checked:opacity-100"]),
 				"aria-hidden": "true"
 			}, null, 8, ["class"]),
 			a(g(T), {
-				class: u([Z.value, "peer-indeterminate:opacity-100"]),
+				class: u([X.value, "peer-indeterminate:opacity-100"]),
 				"aria-hidden": "true"
 			}, null, 8, ["class"])
-		], 2), o.label || t.$slots.label || o.description ? (d(), r("span", P, [t.$slots.label ? (d(), r("span", F, [m(t.$slots, "label")])) : o.label ? (d(), r("span", I, h(o.label), 1)) : n("", !0), o.description ? (d(), r("span", L, h(o.description), 1)) : n("", !0)])) : n("", !0)], 2), o.errorMsg ? (d(), r("p", {
+		], 2), q.value ? (d(), r("span", {
+			key: 0,
+			class: u(["flex min-w-0 flex-col gap-1", Z.value])
+		}, [t.$slots.label ? (d(), r("span", N, [m(t.$slots, "label")])) : o.label ? (d(), r("span", P, h(o.label), 1)) : n("", !0), o.description ? (d(), r("span", F, h(o.description), 1)) : n("", !0)], 2)) : n("", !0)], 2), o.errorMsg ? (d(), r("p", {
 			key: 0,
-			id: `${g(H)}-error`,
+			id: `${g(B)}-error`,
 			class: "mt-1 text-base text-danger-strong",
 			role: "alert"
-		}, h(o.errorMsg), 9, R)) : n("", !0)], 16));
+		}, h(o.errorMsg), 9, I)) : n("", !0)], 16));
 	}
 });
 //#endregion
-export { z as default };
+export { L as default };

package/dist/lib/components/AcCheckList.vue.d.ts

@@ -28,8 +28,8 @@ type __VLS_Slots = {
     }) => unknown;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    icon: Component;
     color: Tone | "muted";
+    icon: Component;
     size: "small" | "normal";
     items: (string | CheckListItem)[];
     muted: boolean;

package/dist/lib/components/AcCheckRadio.vue_vue_type_script_setup_true_lang.js

@@ -66,8 +66,8 @@ var w = {
 		return (n, _) => (d(), a("div", w, [o("div", { class: u(c.cards ? ["grid gap-3", !L.value && "sm:grid-cols-2"] : c.row ? "flex flex-row flex-wrap gap-x-6 gap-y-3" : "flex flex-col gap-3") }, [(d(!0), a(e, null, f(c.options, (e, f) => (d(), r(m(L.value ? "div" : "label"), {
 			key: e.label,
 			for: L.value ? void 0 : `${g(I)}-${f}`,
-			class: u(["group flex cursor-pointer gap-3 text-base text-heading select-none", [
-				c.cards ? "relative items-start rounded-14 border border-border bg-surface p-3 transition-[border-color,background-color,box-shadow] duration-200 ease-out has-checked:border-primary has-checked:bg-primary/5 has-checked:shadow-[inset_0_0_0_1px_var(--color-primary)] has-focus-visible:ring-2 has-focus-visible:ring-ring has-focus-visible:ring-offset-2 has-focus-visible:ring-offset-background motion-reduce:transition-none" : L.value ? "relative items-center" : "w-fit items-center",
+			class: u(["group flex cursor-pointer gap-3 text-base font-normal text-heading select-none", [
+				c.cards ? "relative items-start rounded-14 border border-border bg-surface px-4 py-3 transition-[border-color,background-color,box-shadow] duration-200 ease-out has-checked:border-primary has-checked:bg-primary/5 has-checked:shadow-[inset_0_0_0_1px_var(--color-primary)] has-focus-visible:ring-2 has-focus-visible:ring-ring has-focus-visible:ring-offset-2 has-focus-visible:ring-offset-background motion-reduce:transition-none" : L.value ? "relative items-center" : "w-fit items-center",
 				e.disabled && ["cursor-not-allowed", c.cards ? "opacity-60" : "opacity-50"],
 				L.value && "flex-wrap",
 				c.cards && !e.disabled && "hover:border-primary/40 hover:bg-accent-hover has-checked:hover:border-primary has-checked:hover:bg-primary/5"
@@ -77,7 +77,7 @@ var w = {
 				(d(), r(m(L.value ? "label" : "span"), {
 					for: L.value ? `${g(I)}-${f}` : void 0,
 					class: u(L.value ? [
-						"flex min-w-0 flex-1 basis-[240px] gap-3 after:absolute after:inset-0",
+						"flex min-w-0 flex-1 basis-[240px] gap-3 font-normal after:absolute after:inset-0",
 						c.cards ? "items-start" : "items-center",
 						e.disabled ? "cursor-not-allowed" : "cursor-pointer"
 					] : "contents")

package/dist/lib/components/AcColorInput.vue.d.ts

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from "vue";
 export interface ColorPreset {
     /** Hex colour, `#rgb` or `#rrggbb`. */
     value: string;
@@ -7,6 +8,8 @@ export interface ColorPreset {
 export interface Props {
     /** Label above the field. Without one, pass `aria-label` so the field still has a name. */
     label?: string;
+    /** Classes for the label above the field, e.g. `@min-[401px]:sr-only` to hide it on wide layouts while screen readers still read it. */
+    labelClass?: HTMLAttributes["class"];
     /** Native `name` attribute of the hex field. */
     name?: string;
     /** Quick-pick swatches under the field: hex strings or `{ value, label }`. */
@@ -50,6 +53,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     hint: string;
     readonly: boolean;
     errorMsg: string;
+    labelClass: string | false | Record<string, any> | import("vue").ClassValue[] | null;
     presets: (string | ColorPreset)[];
     swatchOnly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/lib/components/AcColorInput.vue_vue_type_script_setup_true_lang.js

@@ -40,6 +40,16 @@ var b = ["for"], x = {
 	__name: "AcColorInput",
 	props: /*@__PURE__*/ o({
 		label: { default: "" },
+		labelClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		},
 		name: { default: "" },
 		presets: { default: () => [] },
 		required: {
@@ -124,12 +134,12 @@ var b = ["for"], x = {
 			a.label ? (u(), r("label", {
 				key: 0,
 				for: a.swatchOnly ? `${m(P)}-picker` : m(P),
-				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
+				class: c(["mb-2 flex items-center gap-1 text-base font-medium text-heading", a.labelClass])
 			}, [
 				i("span", null, p(a.label), 1),
 				a.readonly ? (u(), r("span", x, "(read only)")) : n("", !0),
 				a.required ? (u(), r("span", S, "*")) : n("", !0)
-			], 8, b)) : n("", !0),
+			], 10, b)) : n("", !0),
 			a.hint ? (u(), r("p", {
 				key: 1,
 				id: `${m(P)}-hint`,

package/dist/lib/components/AcConfirmModal.vue.d.ts

@@ -39,8 +39,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }>, {
     title: string;
     description: string;
-    icon: Component;
     color: Tone;
+    icon: Component;
     loading: boolean;
     confirmLabel: string;
     confirmText: string;

package/dist/lib/components/AcDatePicker.vue.d.ts

@@ -10,6 +10,8 @@ export interface DatePickerPreset {
 export interface Props {
     /** Label above the field. Doubles as the accessible name of the trigger and the popover. */
     label?: string;
+    /** Classes for the label above the field, e.g. `@min-[401px]:sr-only` to hide it on wide layouts while screen readers still read it. */
+    labelClass?: HTMLAttributes["class"];
     /** Text shown in the field while there's no value. Defaults to "Choose date" (or "Choose duration"). */
     placeholder?: string;
     /** `date` for a calendar day (`YYYY-MM-DD`), `datetime` for an instant with hours and minutes (UTC ISO 8601), or `duration` for a Go/Kubernetes duration such as `26h30m`. */
@@ -94,6 +96,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     placeholder: string;
     errorMsg: string;
     range: boolean;
+    labelClass: string | false | Record<string, any> | import("vue").ClassValue[] | null;
     clearable: boolean;
     presets: DatePickerPreset[];
     locale: string;

package/dist/lib/components/AcDatePicker.vue_vue_type_script_setup_true_lang.js

@@ -112,6 +112,16 @@ var be = ["for"], xe = { key: 0 }, Se = {
 	__name: "AcDatePicker",
 	props: /*@__PURE__*/ te({
 		label: { default: "" },
+		labelClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		},
 		placeholder: { default: "" },
 		mode: { default: "date" },
 		range: {
@@ -844,13 +854,13 @@ var be = ["for"], xe = { key: 0 }, Se = {
 				key: 0,
 				id: vt,
 				for: d.inline ? void 0 : `${v(x)}-trigger`,
-				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
+				class: p(["mb-2 flex items-center gap-1 text-base font-medium text-heading", d.labelClass])
 			}, [
 				oe(e.$slots, "label-icon"),
 				d.label ? (m(), c("span", xe, _(d.label), 1)) : s("", !0),
 				oe(e.$slots, "label-extra"),
 				d.required ? (m(), c("span", Se, "*")) : s("", !0)
-			], 8, be)) : s("", !0),
+			], 10, be)) : s("", !0),
 			d.hint ? (m(), c("p", {
 				key: 1,
 				id: St,

package/dist/lib/components/AcDropdownItem.vue.d.ts

@@ -33,10 +33,10 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     label: string;
     description: string;
     disabled: boolean;
-    icon: Component;
     target: string;
     href: string;
     to: string | Record<string, unknown>;
+    icon: Component;
     danger: boolean;
     shortcut: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/lib/components/AcFeatureCard.vue.d.ts

@@ -66,10 +66,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     required: boolean;
     description: string;
     disabled: boolean;
-    icon: Component;
     target: string;
     href: string;
     to: string | Record<string, unknown>;
+    icon: Component;
     status: string;
     subtitle: string;
     hoverable: boolean;

package/dist/lib/components/AcGraphChart.vue.d.ts

@@ -11,6 +11,8 @@ export interface GraphNode {
     label: string;
     /** Resource type, e.g. "Load balancer". Shown under the label, in the legend and in the tooltip. */
     kind?: string;
+    /** Second line under the name in place of the kind, e.g. `10.0.1.0/24` or "in public-a". The kind stays in the tooltip and legend. */
+    sublabel?: string;
     /** A Lucide icon component, or 1–3 characters of text, drawn in the node. Overrides `kindIcons`. */
     icon?: Component | string;
     /** Colours the ring. `warning` and `danger` also add a `!` badge. */
@@ -19,9 +21,26 @@ export interface GraphNode {
     statusText?: string;
     /** A sentence for the tooltip, e.g. the CIDR or the instance size. */
     description?: string;
-    /** Nodes with the same group are drawn inside one labelled box, e.g. a subnet. */
+    /** Nodes with the same group are drawn inside one labelled box, e.g. a subnet. Name, colour and nesting come from the `groups` prop. */
     group?: string;
 }
+/** Line pattern of a link. */
+export type GraphLinkStyle = "solid" | "dashed" | "dotted";
+/** What a selected or hovered node lights up: its direct links, or the whole path through it. */
+export type GraphHighlight = "neighbors" | "path";
+/** A labelled box around the nodes whose `group` is its `id`, e.g. a VPC or a subnet. */
+export interface GraphGroup {
+    /** Matches `GraphNode.group`, and other groups' `parent`. */
+    id: string;
+    /** Name in the box's top-left corner. Defaults to the id. */
+    label?: string;
+    /** Short text after the name, e.g. the CIDR `10.0.0.0/16`. */
+    description?: string;
+    /** Tints the box's edge and fill, e.g. `success` for the network you own. Without it the box is grey. */
+    color?: ChartColor;
+    /** Id of the group this box sits inside, e.g. a subnet's VPC. A group needs at least one node inside it, directly or in a nested group. */
+    parent?: string;
+}
 /** A connection between two nodes, drawn from `source` to `target`. */
 export interface GraphLink {
     /** Id of the node the link starts at. */
@@ -34,6 +53,12 @@ export interface GraphLink {
     status?: GraphStatus;
     /** Draws the line dashed, e.g. for a tunnel or a standby path. */
     dashed?: boolean;
+    /** Line pattern: `solid`, `dashed` or `dotted`. Wins over `dashed`. */
+    style?: GraphLinkStyle;
+    /** Colours the line by its kind of connection, e.g. `chart-2` for routes. `status` wins when set; a lit link keeps this colour. */
+    color?: ChartColor;
+    /** Draws or drops this link's arrowhead, whatever `arrows` says, e.g. `false` for a "contains" link. */
+    arrow?: boolean;
 }
 /** What the `tooltip` slot gets for the hovered node. */
 export interface GraphTooltipSlotProps {
@@ -49,6 +74,12 @@ export interface Props {
     nodes: GraphNode[];
     /** Connections between nodes by id. Links to an unknown id are skipped. */
     links?: GraphLink[];
+    /** Name, description, colour and nesting of the boxes drawn around grouped nodes. A node's `group` that isn't listed gets a grey box named after it. */
+    groups?: GraphGroup[];
+    /** What the selected (or hovered) node lights up: `neighbors`, its direct links; or `path`, everything upstream and downstream of it along the links' direction. */
+    highlight?: GraphHighlight;
+    /** Lights up a node's or link's connections, as `highlight` says, while the pointer is over it. */
+    highlightOnHover?: boolean;
     /** Layout direction: `LR` (left to right, like a network path) or `TB` (top to bottom, like a hierarchy). */
     direction?: "LR" | "TB";
     /** Plot height in px. The diagram is fitted inside it. */
@@ -85,12 +116,28 @@ type __VLS_Slots = {
     /** Replaces the tooltip body for the hovered node. */
     tooltip?: (props: GraphTooltipSlotProps) => unknown;
 };
+declare function zoomIn(): void;
+declare function zoomOut(): void;
+declare function fit(): void;
+/** Zooms to a percentage of life size about the middle of the plot, e.g. `zoomTo(100)`. Clamped to 25%–150%. */
+declare function zoomTo(percent: number): void;
+/**
+ * Selects a node and pans it to the middle of the plot, e.g. from a list of problems beside the diagram.
+ * Shows its kind again if the legend hid it. Resolves to `false` for an unknown id.
+ */
+declare function focusNode(id: string): Promise<boolean>;
 type __VLS_ModelProps = {
-    /** Id of the selected node: it and its links are highlighted and the rest fade. Clicking a node selects it; clicking it again, the background or pressing Escape clears it. */
+    /** Id of the selected node: it and its links (or its whole path, with `highlight="path"`) are highlighted and the rest fade. Clicking a node selects it; clicking it again, the background or pressing Escape clears it. */
     "selected"?: string | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    focusNode: typeof focusNode;
+    fit: typeof fit;
+    zoomIn: typeof zoomIn;
+    zoomOut: typeof zoomOut;
+    zoomTo: typeof zoomTo;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:selected": (value: string | null) => any;
     "node-click": (node: GraphNode, event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
@@ -106,10 +153,13 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     tooltip: boolean;
     loading: boolean;
     shape: "circle" | "square";
+    highlight: GraphHighlight;
     emptyText: string;
+    groups: GraphGroup[];
     links: GraphLink[];
     renderer: ChartRenderer;
     zoom: boolean;
+    highlightOnHover: boolean;
     kindColors: Record<string, ChartColor>;
     kindIcons: Record<string, Component | string>;
     arrows: boolean;