@ac-design/design-system 2.0.0 → 2.1.1

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

@@ -5,22 +5,30 @@ import { ArrowRight as w, ArrowUpRight as T, Check as E } from "@lucide/vue";
 var D = ["aria-hidden"], O = ["src", "alt"], k = ["id"], A = ["aria-describedby"], j = {
 	key: 0,
 	class: "relative z-10 -my-0.5 flex shrink-0 items-center gap-2"
-}, M = ["id", "title"], N = {
+}, M = ["id"], N = ["id", "title"], P = {
 	key: 1,
 	class: "mt-2 text-base text-body"
-}, P = {
+}, F = {
 	key: 2,
 	class: "mt-2 flex flex-wrap justify-center gap-2"
-}, F = [
+}, I = [
 	"id",
 	"disabled",
 	"aria-labelledby",
 	"aria-describedby"
-], I = /*@__PURE__*/ l({
+], L = ["id", "title"], R = {
+	key: 1,
+	class: "mt-2 text-base text-body"
+}, z = /*@__PURE__*/ l({
 	__name: "AcFeatureCard",
 	props: /*@__PURE__*/ d({
 		title: {},
+		subtitle: { default: "" },
 		description: { default: "" },
+		hoverable: {
+			type: Boolean,
+			default: !1
+		},
 		icon: { default: void 0 },
 		logo: { default: "" },
 		logoAlt: { default: "" },
@@ -58,77 +66,121 @@ var D = ["aria-hidden"], O = ["src", "alt"], k = ["id"], A = ["aria-describedby"
 	}),
 	emits: /*@__PURE__*/ d(["click"], ["update:checked"]),
 	setup(l, { emit: d }) {
-		let I = l, L = b(l, "checked"), R = d, z = u(), B = z?.appContext.components.RouterLink, V = y(), H = n(() => {
-			if (I.disabled || I.selectable) return null;
-			if (I.to !== void 0 && B) return {
-				is: B,
-				to: I.to
+		let z = l, B = b(l, "checked"), V = d, H = u(), U = H?.appContext.components.RouterLink, W = y(), G = n(() => !!z.subtitle && !z.centered), K = n(() => [z.subtitle && `${W}-sub`, z.description && `${W}-desc`].filter(Boolean).join(" ") || void 0), q = n(() => {
+			if (z.disabled || z.selectable) return null;
+			if (z.to !== void 0 && U) return {
+				is: U,
+				to: z.to
 			};
-			let e = I.href ?? (typeof I.to == "string" ? I.to : void 0);
+			let e = z.href ?? (typeof z.to == "string" ? z.to : void 0);
 			return e ? {
 				is: "a",
 				href: e,
-				target: I.target,
-				rel: I.target === "_blank" ? "noopener noreferrer" : void 0
+				target: z.target,
+				rel: z.target === "_blank" ? "noopener noreferrer" : void 0
 			} : null;
 		});
-		function U() {
-			return !H.value && !I.disabled && !I.selectable && !!z?.vnode.props?.onClick;
+		function J() {
+			return !q.value && !z.disabled && !z.selectable && !!H?.vnode.props?.onClick;
 		}
-		function W() {
-			return !!H.value || U() || I.selectable && !I.disabled;
+		function Y() {
+			return !!q.value || J() || z.selectable && !z.disabled;
 		}
-		function G(e) {
-			R("click", e);
+		function X(e) {
+			V("click", e);
 		}
 		return (n, u) => (m(), r(g(l.selectable ? "label" : "div"), {
-			for: l.selectable ? `${v(V)}-input` : void 0,
+			for: l.selectable ? `${v(W)}-input` : void 0,
 			class: p(["group relative flex min-w-0 flex-col rounded-14 border border-border bg-surface p-5 transition-[background-color,border-color,box-shadow,translate] duration-200 has-[[data-ac-card-link]:focus-visible]:ring-2 has-[[data-ac-card-link]:focus-visible]:ring-ring has-[[data-ac-card-link]:focus-visible]:ring-offset-2 has-[[data-ac-card-link]:focus-visible]:ring-offset-surface motion-reduce:transition-none", [
 				l.centered && "items-center text-center",
-				W() && !l.selectable && "cursor-pointer hover:-translate-y-0.5 hover:border-primary/30 hover:bg-accent-hover/60 hover:shadow-card motion-reduce:hover:translate-y-0",
+				Y() && !l.selectable && "cursor-pointer hover:-translate-y-0.5 hover:border-primary/30 hover:bg-accent-hover/60 hover:shadow-card motion-reduce:hover:translate-y-0",
 				l.selectable && !l.disabled && "cursor-pointer hover:border-primary/40 hover:bg-accent-hover",
 				l.selectable && "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-surface",
+				l.hoverable && !Y() && !l.selectable && "hover:border-primary/45 hover:shadow-sm",
 				l.disabled && "cursor-not-allowed opacity-60"
 			]]),
 			"data-ac-ds": "",
 			"data-testid": "ac-feature-card"
 		}, {
-			default: S(() => [o("div", { class: p(["flex w-full min-w-0 gap-3", l.centered ? "flex-col items-center" : "items-start"]) }, [
-				n.$slots.icon || l.logo || l.icon ? (m(), a("span", {
-					key: 0,
-					class: p(["inline-flex shrink-0 items-center justify-center overflow-hidden border", [l.centered ? "size-12 rounded-14" : "size-10 rounded-10", l.logo ? "border-border bg-surface-muted p-1.5" : "border-primary/25 bg-primary/10 text-primary-strong [&_svg]:size-5"]]),
-					"aria-hidden": l.logo && l.logoAlt ? void 0 : "true"
-				}, [h(n.$slots, "icon", {}, () => [l.logo ? (m(), a("img", {
-					key: 0,
-					src: l.logo,
-					alt: l.logoAlt,
-					class: "size-full object-contain"
-				}, null, 8, O)) : (m(), r(g(l.icon), { key: 1 }))])], 10, D)) : i("", !0),
-				o("div", { class: p(["min-w-0 flex-1", l.centered && "w-full"]) }, [
-					o("div", { class: p(["flex min-w-0 items-start gap-2", l.centered ? "justify-center" : "justify-between"]) }, [
-						o("div", { class: p(["flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", l.centered && "justify-center"]) }, [o("h3", {
-							id: `${v(V)}-title`,
-							class: "min-w-0 font-heading text-lg leading-6 font-semibold tracking-tight text-heading"
-						}, [H.value ? (m(), r(g(H.value.is), f({ key: 0 }, {
-							...H.value,
-							is: void 0
-						}, {
-							"aria-describedby": l.description ? `${v(V)}-desc` : void 0,
-							"data-ac-card-link": "",
-							class: "outline-none after:absolute after:inset-0 after:rounded-14",
-							onClick: G
-						}), {
-							default: S(() => [s(_(l.title), 1)]),
-							_: 1
-						}, 16, ["aria-describedby"])) : U() ? (m(), a("button", {
-							key: 1,
-							type: "button",
-							"aria-describedby": l.description ? `${v(V)}-desc` : void 0,
-							"data-ac-card-link": "",
-							class: "cursor-pointer text-left outline-none after:absolute after:inset-0 after:rounded-14",
-							onClick: G
-						}, _(l.title), 9, A)) : (m(), a(t, { key: 2 }, [s(_(l.title), 1)], 64))], 8, k), l.centered ? i("", !0) : (m(), a(t, { key: 0 }, [
-							h(n.$slots, "title-extra"),
+			default: S(() => [
+				o("div", { class: p(["flex w-full min-w-0 gap-3", l.centered ? "flex-col items-center" : "items-start"]) }, [
+					n.$slots.icon || l.logo || l.icon ? (m(), a("span", {
+						key: 0,
+						class: p(["inline-flex shrink-0 items-center justify-center overflow-hidden border", [l.centered ? "size-12 rounded-14" : "size-10 rounded-10", l.logo ? "border-border bg-surface-muted p-1.5" : "border-primary/25 bg-primary/10 text-primary-strong [&_svg]:size-5"]]),
+						"aria-hidden": l.logo && l.logoAlt ? void 0 : "true"
+					}, [h(n.$slots, "icon", {}, () => [l.logo ? (m(), a("img", {
+						key: 0,
+						src: l.logo,
+						alt: l.logoAlt,
+						class: "size-full object-contain"
+					}, null, 8, O)) : (m(), r(g(l.icon), { key: 1 }))])], 10, D)) : i("", !0),
+					o("div", { class: p(["min-w-0 flex-1", l.centered && "w-full"]) }, [
+						o("div", { class: p(["flex min-w-0 items-start gap-2", l.centered ? "justify-center" : "justify-between"]) }, [
+							o("div", { class: p(["flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", l.centered && "justify-center"]) }, [o("h3", {
+								id: `${v(W)}-title`,
+								class: "min-w-0 font-heading text-lg leading-6 font-semibold tracking-tight text-heading"
+							}, [q.value ? (m(), r(g(q.value.is), f({ key: 0 }, {
+								...q.value,
+								is: void 0
+							}, {
+								"aria-describedby": K.value,
+								"data-ac-card-link": "",
+								class: "outline-none after:absolute after:inset-0 after:rounded-14",
+								onClick: X
+							}), {
+								default: S(() => [s(_(l.title), 1)]),
+								_: 1
+							}, 16, ["aria-describedby"])) : J() ? (m(), a("button", {
+								key: 1,
+								type: "button",
+								"aria-describedby": K.value,
+								"data-ac-card-link": "",
+								class: "cursor-pointer text-left outline-none after:absolute after:inset-0 after:rounded-14",
+								onClick: X
+							}, _(l.title), 9, A)) : (m(), a(t, { key: 2 }, [s(_(l.title), 1)], 64))], 8, k), l.centered ? i("", !0) : (m(), a(t, { key: 0 }, [
+								h(n.$slots, "title-extra"),
+								l.required ? (m(), r(e, {
+									key: 0,
+									label: "Required",
+									color: "warning",
+									variant: "light",
+									rounded: ""
+								})) : i("", !0),
+								l.recommended ? (m(), r(e, {
+									key: 1,
+									label: "Recommended",
+									color: "info",
+									variant: "light",
+									rounded: ""
+								})) : i("", !0),
+								h(n.$slots, "status", {}, () => [l.status ? (m(), r(e, {
+									key: 0,
+									label: l.status,
+									color: l.statusColor,
+									variant: "light",
+									rounded: "",
+									dot: ""
+								}, null, 8, ["label", "color"])) : i("", !0)])
+							], 64))], 2),
+							n.$slots.actions && !l.centered ? (m(), a("div", j, [h(n.$slots, "actions")])) : i("", !0),
+							!l.centered && (q.value || J()) ? (m(), r(g(l.target === "_blank" ? v(T) : v(w)), {
+								key: 1,
+								class: "mt-1 size-4 shrink-0 text-muted transition-[color,transform] duration-200 group-hover:text-primary-strong motion-safe:group-hover:translate-x-0.5",
+								"aria-hidden": "true"
+							})) : i("", !0)
+						], 2),
+						l.subtitle ? (m(), a("p", {
+							key: 0,
+							id: `${v(W)}-sub`,
+							class: "mt-0.5 text-xs text-muted"
+						}, _(l.subtitle), 9, M)) : i("", !0),
+						G.value ? i("", !0) : (m(), a(t, { key: 1 }, [l.description ? (m(), a("p", {
+							key: 0,
+							id: `${v(W)}-desc`,
+							class: "mt-1 line-clamp-3 text-base leading-relaxed text-muted",
+							title: l.description
+						}, _(l.description), 9, N)) : i("", !0), n.$slots.default ? (m(), a("div", P, [h(n.$slots, "default")])) : i("", !0)], 64)),
+						l.centered && (l.required || l.recommended || l.status || n.$slots.status) ? (m(), a("div", F, [
 							l.required ? (m(), r(e, {
 								key: 0,
 								label: "Required",
@@ -151,69 +203,39 @@ var D = ["aria-hidden"], O = ["src", "alt"], k = ["id"], A = ["aria-describedby"
 								rounded: "",
 								dot: ""
 							}, null, 8, ["label", "color"])) : i("", !0)])
-						], 64))], 2),
-						n.$slots.actions && !l.centered ? (m(), a("div", j, [h(n.$slots, "actions")])) : i("", !0),
-						!l.centered && (H.value || U()) ? (m(), r(g(l.target === "_blank" ? v(T) : v(w)), {
-							key: 1,
-							class: "mt-1 size-4 shrink-0 text-muted transition-[color,transform] duration-200 group-hover:text-primary-strong motion-safe:group-hover:translate-x-0.5",
-							"aria-hidden": "true"
-						})) : i("", !0)
+						])) : i("", !0)
 					], 2),
-					l.description ? (m(), a("p", {
-						key: 0,
-						id: `${v(V)}-desc`,
-						class: "mt-1 line-clamp-3 text-base leading-relaxed text-muted",
-						title: l.description
-					}, _(l.description), 9, M)) : i("", !0),
-					n.$slots.default ? (m(), a("div", N, [h(n.$slots, "default")])) : i("", !0),
-					l.centered && (l.required || l.recommended || l.status || n.$slots.status) ? (m(), a("div", P, [
-						l.required ? (m(), r(e, {
-							key: 0,
-							label: "Required",
-							color: "warning",
-							variant: "light",
-							rounded: ""
-						})) : i("", !0),
-						l.recommended ? (m(), r(e, {
-							key: 1,
-							label: "Recommended",
-							color: "info",
-							variant: "light",
-							rounded: ""
-						})) : i("", !0),
-						h(n.$slots, "status", {}, () => [l.status ? (m(), r(e, {
-							key: 0,
-							label: l.status,
-							color: l.statusColor,
-							variant: "light",
-							rounded: "",
-							dot: ""
-						}, null, 8, ["label", "color"])) : i("", !0)])
-					])) : i("", !0)
+					l.selectable ? (m(), a("span", {
+						key: 1,
+						class: p(["relative inline-flex size-5 shrink-0", l.centered ? "absolute! top-3 right-3" : "mt-0.5"])
+					}, [C(o("input", {
+						id: `${v(W)}-input`,
+						"onUpdate:modelValue": u[0] ||= (e) => B.value = e,
+						type: "checkbox",
+						disabled: l.disabled,
+						"aria-labelledby": `${v(W)}-title`,
+						"aria-describedby": K.value,
+						class: "peer size-5 cursor-pointer appearance-none rounded-4 border border-muted/70 bg-surface transition-colors duration-200 outline-none checked:border-primary checked:bg-primary disabled:cursor-not-allowed disabled:bg-surface-sunken"
+					}, null, 8, I), [[x, B.value]]), c(v(E), {
+						class: "pointer-events-none absolute inset-0 m-auto size-4 scale-75 text-white opacity-0 transition duration-150 peer-checked:scale-100 peer-checked:opacity-100 motion-reduce:transition-none",
+						"stroke-width": 3,
+						"aria-hidden": "true"
+					})], 2)) : i("", !0)
 				], 2),
-				l.selectable ? (m(), a("span", {
+				G.value ? (m(), a(t, { key: 0 }, [l.description ? (m(), a("p", {
+					key: 0,
+					id: `${v(W)}-desc`,
+					class: "mt-3 line-clamp-3 text-base leading-relaxed text-muted",
+					title: l.description
+				}, _(l.description), 9, L)) : i("", !0), n.$slots.default ? (m(), a("div", R, [h(n.$slots, "default")])) : i("", !0)], 64)) : i("", !0),
+				n.$slots.footer ? (m(), a("div", {
 					key: 1,
-					class: p(["relative inline-flex size-5 shrink-0", l.centered ? "absolute! top-3 right-3" : "mt-0.5"])
-				}, [C(o("input", {
-					id: `${v(V)}-input`,
-					"onUpdate:modelValue": u[0] ||= (e) => L.value = e,
-					type: "checkbox",
-					disabled: l.disabled,
-					"aria-labelledby": `${v(V)}-title`,
-					"aria-describedby": l.description ? `${v(V)}-desc` : void 0,
-					class: "peer size-5 cursor-pointer appearance-none rounded-4 border border-muted/70 bg-surface transition-colors duration-200 outline-none checked:border-primary checked:bg-primary disabled:cursor-not-allowed disabled:bg-surface-sunken"
-				}, null, 8, F), [[x, L.value]]), c(v(E), {
-					class: "pointer-events-none absolute inset-0 m-auto size-4 scale-75 text-white opacity-0 transition duration-150 peer-checked:scale-100 peer-checked:opacity-100 motion-reduce:transition-none",
-					"stroke-width": 3,
-					"aria-hidden": "true"
-				})], 2)) : i("", !0)
-			], 2), n.$slots.footer ? (m(), a("div", {
-				key: 0,
-				class: p(["mt-auto flex w-full min-w-0 flex-wrap items-center gap-x-3 gap-y-1 pt-4 text-xs text-muted", l.centered ? "justify-center" : "justify-between"])
-			}, [h(n.$slots, "footer")], 2)) : i("", !0)]),
+					class: p(["mt-auto flex w-full min-w-0 flex-wrap items-center gap-x-3 gap-y-1 pt-4 text-xs text-muted", l.centered ? "justify-center" : "justify-between"])
+				}, [h(n.$slots, "footer")], 2)) : i("", !0)
+			]),
 			_: 3
 		}, 8, ["for", "class"]));
 	}
 });
 //#endregion
-export { I as default };
+export { z as default };

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

@@ -11,7 +11,7 @@ export interface FooterLink {
 export interface Props {
     /** Links in the footer row. Defaults to AppsCode's support, docs, blog, pricing and legal pages. */
     links?: FooterLink[];
-    /** Line under the links. Defaults to "© <current year> AppsCode Inc."; pass an empty string to hide it. */
+    /** Line under the links, e.g. "© 2026 AppsCode Inc.". Empty by default, like cloud-ui's footer. */
     copyright?: string;
     /** App version shown after the copyright in mono text, e.g. "v2026.10.1". */
     version?: string;

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

@@ -74,7 +74,7 @@ var _ = {
 				external: !0
 			}
 		] },
-		copyright: { default: () => `© ${(/* @__PURE__ */ new Date()).getFullYear()} AppsCode Inc.` },
+		copyright: { default: "" },
 		version: { default: "" }
 	},
 	setup(o) {

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

@@ -34,9 +34,9 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     disabled: boolean;
     loading: boolean;
     cancelLabel: string;
+    sticky: "container" | "viewport" | "none";
     submitLabel: string;
     hideCancel: boolean;
-    sticky: "container" | "viewport" | "none";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -26,8 +26,8 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     title: string;
     description: string;
     icon: Component;
-    layout: "stacked" | "aside";
     columns: 1 | 2;
+    layout: "stacked" | "aside";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/lib/components/AcGraphChart.js

@@ -0,0 +1,5 @@
+import e from "./AcGraphChart.vue_vue_type_script_setup_true_lang.js";
+//#region src/lib/components/AcGraphChart.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,124 @@
+import type { Component } from "vue";
+import type { ChartRenderer } from "../charts/echarts";
+import type { ChartColor } from "../charts/shared";
+/** A node's or link's health: drawn as the ring colour, and counted as a problem when `warning` or `danger`. */
+export type GraphStatus = "success" | "info" | "warning" | "danger" | "neutral";
+/** One resource in the diagram. */
+export interface GraphNode {
+    /** Unique id; links refer to it. */
+    id: string;
+    /** Name under the node, e.g. `demo-postgres`. */
+    label: string;
+    /** Resource type, e.g. "Load balancer". Shown under the label, in the legend and in the tooltip. */
+    kind?: 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. */
+    status?: GraphStatus;
+    /** Status in words for the tooltip and data table, e.g. "NotReady". Defaults to the status name. */
+    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. */
+    group?: string;
+}
+/** A connection between two nodes, drawn from `source` to `target`. */
+export interface GraphLink {
+    /** Id of the node the link starts at. */
+    source: string;
+    /** Id of the node the link ends at. */
+    target: string;
+    /** Short text on the line, e.g. `10.0.1.0/24` or `:5432`. */
+    label?: string;
+    /** Colours the line: `warning` or `danger` for a broken or degraded path. */
+    status?: GraphStatus;
+    /** Draws the line dashed, e.g. for a tunnel or a standby path. */
+    dashed?: boolean;
+}
+/** What the `tooltip` slot gets for the hovered node. */
+export interface GraphTooltipSlotProps {
+    /** The hovered node, as passed in `nodes`. */
+    node: GraphNode;
+    /** Labels of the nodes it links to. */
+    targets: string[];
+    /** Labels of the nodes that link to it. */
+    sources: string[];
+}
+export interface Props {
+    /** The resources to draw. Each needs a unique `id`; `kind`, `status`, `icon` and `group` are optional. */
+    nodes: GraphNode[];
+    /** Connections between nodes by id. Links to an unknown id are skipped. */
+    links?: GraphLink[];
+    /** 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. */
+    height?: number;
+    /** Node shape: `circle` or `square` (rounded). */
+    shape?: "circle" | "square";
+    /** Colour per kind: `{ "Load balancer": "chart-2" }`. Without it, kinds take `chart-1`, `chart-2`… in order of first appearance. */
+    kindColors?: Record<string, ChartColor>;
+    /** Icon per kind, so node data can stay plain JSON: `{ Database: DatabaseIcon }`. A node's own `icon` wins. */
+    kindIcons?: Record<string, Component | string>;
+    /** Draws an arrowhead on each link to show its direction. */
+    arrows?: boolean;
+    /** Shows zoom in, zoom out and fit buttons in the bottom-right corner. */
+    zoom?: boolean;
+    /** Legend of kinds `top`, `bottom`, or `none`. Clicking a kind hides or shows its nodes. */
+    legend?: "top" | "bottom" | "none";
+    /** Shows a tooltip with the node's label, kind, status and description on hover. */
+    tooltip?: boolean;
+    /** Shows a skeleton of the same height while data loads. */
+    loading?: boolean;
+    /** Text shown in place of the diagram when `nodes` is empty. */
+    emptyText?: string;
+    /** Accessible name, e.g. "Topology of demo-vpc". Show the visible title in the surrounding card. */
+    title?: string;
+    /** A sentence for screen readers on what the diagram shows. Defaults to the number of resources, connections and problems. */
+    description?: string;
+    /** `canvas` (default) stays fast with hundreds of nodes; `svg` is crisper when printed and lighter for a few dozen. */
+    renderer?: ChartRenderer;
+    /** Animates the first draw and layout changes. Off when the viewer asks for reduced motion. */
+    animation?: boolean;
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Replaces the tooltip body for the hovered node. */
+    tooltip?: (props: GraphTooltipSlotProps) => unknown;
+};
+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. */
+    "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, {
+    "update:selected": (value: string | null) => any;
+    "node-click": (node: GraphNode, event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:selected"?: ((value: string | null) => any) | undefined;
+    "onNode-click"?: ((node: GraphNode, event: MouseEvent) => any) | undefined;
+}>, {
+    legend: "top" | "bottom" | "none";
+    title: string;
+    description: string;
+    height: number;
+    direction: "LR" | "TB";
+    loading: boolean;
+    animation: boolean;
+    shape: "circle" | "square";
+    tooltip: boolean;
+    emptyText: string;
+    links: GraphLink[];
+    renderer: ChartRenderer;
+    zoom: boolean;
+    kindColors: Record<string, ChartColor>;
+    kindIcons: Record<string, Component | string>;
+    arrows: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};