@ac-design/design-system 2.6.0 → 2.7.0

package/dist/lib/compat.css

@@ -16,6 +16,7 @@ code:is([data-ac-ds], [data-ac-ds] *), kbd:is([data-ac-ds], [data-ac-ds] *), sam
     --font-sans: "Roboto Variable", "Roboto", ui-sans-serif, system-ui, sans-serif;
     --font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
     --spacing: calc(4px * var(--ac-scale));
+    --container-xs: 320px;
     --container-sm: 384px;
     --container-md: 448px;
     --container-xl: 576px;
@@ -371,6 +372,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .inset-y-0:where([data-ac-ds], [data-ac-ds] *) {
     inset-block: 0px !important;
   }
+  .start-0:where([data-ac-ds], [data-ac-ds] *) {
+    inset-inline-start: calc(var(--spacing) * 0) !important;
+  }
   .-top-1:where([data-ac-ds], [data-ac-ds] *) {
     top: calc(var(--spacing) * -1) !important;
   }
@@ -455,6 +459,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .bottom-0:where([data-ac-ds], [data-ac-ds] *) {
     bottom: 0px !important;
   }
+  .bottom-1\.5:where([data-ac-ds], [data-ac-ds] *) {
+    bottom: calc(var(--spacing) * 1.5) !important;
+  }
   .bottom-2:where([data-ac-ds], [data-ac-ds] *) {
     bottom: calc(var(--spacing) * 2) !important;
   }
@@ -1188,6 +1195,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .w-72:where([data-ac-ds], [data-ac-ds] *) {
     width: calc(var(--spacing) * 72) !important;
   }
+  .w-\[3ch\]:where([data-ac-ds], [data-ac-ds] *) {
+    width: 3ch !important;
+  }
+  .w-\[3px\]:where([data-ac-ds], [data-ac-ds] *) {
+    width: 3px !important;
+  }
   .w-\[34px\]:where([data-ac-ds], [data-ac-ds] *) {
     width: 34px !important;
   }
@@ -1197,6 +1210,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .w-\[calc\(100\%-52px\)\]:where([data-ac-ds], [data-ac-ds] *) {
     width: calc(100% - 52px) !important;
   }
+  .w-\[calc\(296px\*var\(--ac-scale\)\)\]:where([data-ac-ds], [data-ac-ds] *) {
+    width: calc(296px * var(--ac-scale)) !important;
+  }
   .w-\[calc\(320px\*var\(--ac-scale\)\)\]:where([data-ac-ds], [data-ac-ds] *) {
     width: calc(320px * var(--ac-scale)) !important;
   }
@@ -1242,6 +1258,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .max-w-48:where([data-ac-ds], [data-ac-ds] *) {
     max-width: calc(var(--spacing) * 48) !important;
   }
+  .max-w-60:where([data-ac-ds], [data-ac-ds] *) {
+    max-width: calc(var(--spacing) * 60) !important;
+  }
   .max-w-64:where([data-ac-ds], [data-ac-ds] *) {
     max-width: calc(var(--spacing) * 64) !important;
   }
@@ -1299,6 +1318,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .max-w-xl:where([data-ac-ds], [data-ac-ds] *) {
     max-width: var(--container-xl) !important;
   }
+  .max-w-xs:where([data-ac-ds], [data-ac-ds] *) {
+    max-width: var(--container-xs) !important;
+  }
   .min-w-0:where([data-ac-ds], [data-ac-ds] *) {
     min-width: 0px !important;
   }
@@ -1365,6 +1387,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .basis-\[80px\]:where([data-ac-ds], [data-ac-ds] *) {
     flex-basis: 80px !important;
   }
+  .basis-\[220px\]:where([data-ac-ds], [data-ac-ds] *) {
+    flex-basis: 220px !important;
+  }
   .basis-\[240px\]:where([data-ac-ds], [data-ac-ds] *) {
     flex-basis: 240px !important;
   }
@@ -1849,6 +1874,10 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .rounded-full:where([data-ac-ds], [data-ac-ds] *) {
     border-radius: calc(infinity * 1px) !important;
   }
+  .rounded-e-full:where([data-ac-ds], [data-ac-ds] *) {
+    border-start-end-radius: calc(infinity * 1px) !important;
+    border-end-end-radius: calc(infinity * 1px) !important;
+  }
   .rounded-t-8:where([data-ac-ds], [data-ac-ds] *) {
     border-top-left-radius: var(--radius-8) !important;
     border-top-right-radius: var(--radius-8) !important;
@@ -3419,6 +3448,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       color: color-mix(in oklab, var(--color-info) 5%, transparent) !important;
     }
   }
+  .text-inherit:where([data-ac-ds], [data-ac-ds] *) {
+    color: inherit !important;
+  }
   .text-muted:where([data-ac-ds], [data-ac-ds] *) {
     color: var(--color-muted) !important;
   }
@@ -4168,9 +4200,27 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .group-focus-visible\/thumb\:opacity-100:is(:where(.group\/thumb):focus-visible *):where([data-ac-ds], [data-ac-ds] *) {
     opacity: 100% !important;
   }
+  .group-aria-pressed\/row\:block:is(:where(.group\/row)[aria-pressed="true"] *):where([data-ac-ds], [data-ac-ds] *) {
+    display: block !important;
+  }
+  .group-aria-pressed\/row\:text-primary:is(:where(.group\/row)[aria-pressed="true"] *):where([data-ac-ds], [data-ac-ds] *) {
+    color: var(--color-primary) !important;
+  }
   .group-aria-\[current\=page\]\:text-primary\!:is(:where(.group)[aria-current="page"] *):where([data-ac-ds], [data-ac-ds] *) {
     color: var(--color-primary) !important;
   }
+  .group-aria-\[current\=page\]\/row\:block:is(:where(.group\/row)[aria-current="page"] *):where([data-ac-ds], [data-ac-ds] *) {
+    display: block !important;
+  }
+  .group-aria-\[current\=page\]\/row\:text-primary:is(:where(.group\/row)[aria-current="page"] *):where([data-ac-ds], [data-ac-ds] *) {
+    color: var(--color-primary) !important;
+  }
+  .group-aria-\[current\=true\]\/row\:block:is(:where(.group\/row)[aria-current="true"] *):where([data-ac-ds], [data-ac-ds] *) {
+    display: block !important;
+  }
+  .group-aria-\[current\=true\]\/row\:text-primary:is(:where(.group\/row)[aria-current="true"] *):where([data-ac-ds], [data-ac-ds] *) {
+    color: var(--color-primary) !important;
+  }
   .peer-checked\:scale-100:is(:where(.peer):checked ~ *):where([data-ac-ds], [data-ac-ds] *) {
     --tw-scale-x: 100% !important;
     --tw-scale-y: 100% !important;
@@ -4278,6 +4328,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       background-color: color-mix(in oklab, var(--color-danger) 10%, transparent) !important;
     }
   }
+  .focus-within\:bg-surface-sunken:focus-within:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: var(--color-surface-sunken) !important;
+  }
+  .focus-within\:text-heading:focus-within:where([data-ac-ds], [data-ac-ds] *) {
+    color: var(--color-heading) !important;
+  }
   .focus-within\:shadow-\[0_0_0_2px_color-mix\(in_srgb\,var\(--color-danger\)_20\%\,transparent\)\]:focus-within:where([data-ac-ds], [data-ac-ds] *) {
     --tw-shadow: 0 0 0 2px var(--tw-shadow-color, color-mix(in srgb,#ef4444 20%,transparent)) !important;
     @supports (color: color-mix(in lab, red, red)) {
@@ -4292,6 +4348,13 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     }
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
   }
+  .focus-within\:ring-2:focus-within:where([data-ac-ds], [data-ac-ds] *) {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+  }
+  .focus-within\:ring-ring:focus-within:where([data-ac-ds], [data-ac-ds] *) {
+    --tw-ring-color: var(--color-ring) !important;
+  }
   @media (hover: hover) {
     .hover\:-translate-y-0\.5:hover:where([data-ac-ds], [data-ac-ds] *) {
       --tw-translate-y: calc(var(--spacing) * -0.5) !important;
@@ -4955,6 +5018,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .has-\[\[data-ac-card-link\]\:focus-visible\]\:ring-offset-surface:has(:is([data-ac-card-link]:focus-visible)):where([data-ac-ds], [data-ac-ds] *) {
     --tw-ring-offset-color: var(--color-surface) !important;
   }
+  .has-\[\[data-accordion-trigger\]\:enabled\:hover\]\:bg-accent-hover\/60:has(:is([data-accordion-trigger]:enabled:hover)):where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #f2f9fd 60%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-accent-hover) 60%, transparent) !important;
+    }
+  }
   .has-\[img\]\:border:has(:is(img)):where([data-ac-ds], [data-ac-ds] *) {
     border-style: var(--tw-border-style) !important;
     border-width: 1px !important;
@@ -5008,6 +5077,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .aria-disabled\:opacity-50[aria-disabled="true"]:where([data-ac-ds], [data-ac-ds] *) {
     opacity: 50% !important;
   }
+  .aria-pressed\:bg-accent[aria-pressed="true"]:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: var(--color-accent) !important;
+  }
   .aria-\[current\=page\]\:border-primary\/35[aria-current="page"]:where([data-ac-ds], [data-ac-ds] *) {
     border-color: color-mix(in srgb, hsl(var(--primary-hue) var(--primary-saturation) var(--primary-light)) 35%, transparent) !important;
     @supports (color: color-mix(in lab, red, red)) {
@@ -5039,6 +5111,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 10%, transparent) var(--tw-shadow-alpha), transparent) !important;
     }
   }
+  .aria-\[current\=true\]\:bg-accent[aria-current="true"]:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: var(--color-accent) !important;
+  }
   @media (prefers-reduced-motion: no-preference) {
     .motion-safe\:-translate-x-1:where([data-ac-ds], [data-ac-ds] *) {
       --tw-translate-x: calc(var(--spacing) * -1) !important;
@@ -5497,7 +5572,51 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       display: none !important;
     }
   }
+  @container (width < 448px) {
+    .\@max-md\:-mt-1:where([data-ac-ds], [data-ac-ds] *) {
+      margin-top: calc(var(--spacing) * -1) !important;
+    }
+    .\@max-md\:-mt-2:where([data-ac-ds], [data-ac-ds] *) {
+      margin-top: calc(var(--spacing) * -2) !important;
+    }
+    .\@max-md\:w-full:where([data-ac-ds], [data-ac-ds] *) {
+      width: 100% !important;
+    }
+    .\@max-md\:basis-full:where([data-ac-ds], [data-ac-ds] *) {
+      flex-basis: 100% !important;
+    }
+    .\@max-md\:flex-wrap:where([data-ac-ds], [data-ac-ds] *) {
+      flex-wrap: wrap !important;
+    }
+    .\@max-md\:pb-3:where([data-ac-ds], [data-ac-ds] *) {
+      padding-bottom: calc(var(--spacing) * 3) !important;
+    }
+    .\@max-md\:pb-4:where([data-ac-ds], [data-ac-ds] *) {
+      padding-bottom: calc(var(--spacing) * 4) !important;
+    }
+    .\@max-md\:pl-8:where([data-ac-ds], [data-ac-ds] *) {
+      padding-left: calc(var(--spacing) * 8) !important;
+    }
+    .\@max-md\:pl-12:where([data-ac-ds], [data-ac-ds] *) {
+      padding-left: calc(var(--spacing) * 12) !important;
+    }
+  }
   @container (width >= 512px) {
+    .\@lg\:w-2\/5:where([data-ac-ds], [data-ac-ds] *) {
+      width: calc(2 / 5 * 100%) !important;
+    }
+    .\@lg\:max-w-\[240px\]:where([data-ac-ds], [data-ac-ds] *) {
+      max-width: 240px !important;
+    }
+    .\@lg\:shrink-0:where([data-ac-ds], [data-ac-ds] *) {
+      flex-shrink: 0 !important;
+    }
+    .\@lg\:flex-row:where([data-ac-ds], [data-ac-ds] *) {
+      flex-direction: row !important;
+    }
+    .\@lg\:items-center:where([data-ac-ds], [data-ac-ds] *) {
+      align-items: center !important;
+    }
     .\@lg\:gap-x-2:where([data-ac-ds], [data-ac-ds] *) {
       column-gap: calc(var(--spacing) * 2) !important;
     }

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

@@ -14,12 +14,14 @@ type __VLS_Props = Props;
 type __VLS_Slots = {
     /** The panel content, shown when open. */
     default?: () => unknown;
-    /** Replaces the `title` text. Keep it to text and inline badges; it sits inside the header button. */
+    /** Replaces the `title` text. Keep it to text and inline badges; it sits inside the header button. Put buttons in `actions`. */
     title?: () => unknown;
     /** Replaces the `description` text. */
     description?: () => unknown;
     /** A 16px icon before the title, shown in a tinted 32px tile. */
     icon?: () => unknown;
+    /** Buttons at the right of the header, e.g. Edit and Delete. They sit beside the header button, not in it, so clicking them doesn't open or close the item. The chevron moves to the start of the header; below 448px the actions wrap under the title. */
+    actions?: () => unknown;
 };
 type __VLS_ModelProps = {
     /** Whether the item is open. Use `v-model:open` for a single item outside an AcAccordion. */

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

@@ -1,5 +1,5 @@
-import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, defineComponent as s, inject as c, mergeModels as l, normalizeClass as u, openBlock as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, useId as g, useModel as _, watch as v, withCtx as y } from "vue";
-import { ChevronDown as b } from "@lucide/vue";
+import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, inject as s, mergeModels as c, normalizeClass as l, openBlock as u, renderSlot as d, resolveDynamicComponent as f, toDisplayString as p, unref as m, useId as h, useModel as g, watch as _, withCtx as v } from "vue";
+import { ChevronDown as y, ChevronRight as b } from "@lucide/vue";
 //#region src/lib/components/AcAccordionItem.vue?vue&type=script&setup=true&lang.ts
 var x = [
 	"id",
@@ -7,7 +7,7 @@ var x = [
 	"aria-controls",
 	"disabled"
 ], S = {
-	key: 0,
+	key: 1,
 	class: "inline-flex size-8 shrink-0 items-center justify-center rounded-10 border border-primary/25 bg-primary/10 text-primary-strong [&_svg]:size-4",
 	"aria-hidden": "true"
 }, C = { class: "min-w-0 flex-1" }, w = { class: "block text-lg leading-6 font-semibold tracking-tight text-heading" }, T = {
@@ -17,9 +17,9 @@ var x = [
 	"id",
 	"aria-labelledby",
 	"inert"
-], D = /*@__PURE__*/ s({
+], D = /*@__PURE__*/ o({
 	__name: "AcAccordionItem",
-	props: /*@__PURE__*/ l({
+	props: /*@__PURE__*/ c({
 		value: { default: void 0 },
 		title: { default: "" },
 		description: { default: "" },
@@ -35,46 +35,55 @@ var x = [
 		},
 		openModifiers: {}
 	}),
-	emits: /*@__PURE__*/ l(["toggle"], ["update:open"]),
-	setup(s, { emit: l }) {
-		let D = s, O = _(s, "open"), k = l, A = c("ac-accordion", null), j = g(), M = e(() => D.value ?? j), N = e(() => A ? A.isOpen(M.value) : O.value), P = e(() => D.headingLevel ?? A?.headingLevel.value ?? 3), F = e(() => A?.variant.value ?? "separated");
+	emits: /*@__PURE__*/ c(["toggle"], ["update:open"]),
+	setup(o, { emit: c }) {
+		let D = o, O = g(o, "open"), k = c, A = s("ac-accordion", null), j = h(), M = e(() => D.value ?? j), N = e(() => A ? A.isOpen(M.value) : O.value), P = e(() => D.headingLevel ?? A?.headingLevel.value ?? 3), F = e(() => A?.variant.value ?? "separated");
 		function I() {
 			if (D.disabled) return;
 			let e = !N.value;
 			A ? A.toggle(M.value) : O.value = e, k("toggle", e);
 		}
-		return v(N, (e) => {
+		return _(N, (e) => {
 			A && (O.value = e);
-		}), (e, c) => (d(), r("div", {
-			class: u(F.value === "separated" && "overflow-hidden rounded-14 border border-border bg-surface"),
+		}), (e, s) => (u(), r("div", {
+			class: l([F.value === "separated" && "overflow-hidden rounded-14 border border-border bg-surface", e.$slots.actions && "@container"]),
 			"data-ac-ds": "",
 			"data-testid": "ac-accordion-item"
-		}, [(d(), t(p(`h${P.value}`), { class: "m-0 text-base leading-5 font-normal tracking-normal" }, {
-			default: y(() => [i("button", {
-				id: `${h(j)}-trigger`,
+		}, [i("div", { class: l(["flex items-center", e.$slots.actions && "transition-colors duration-200 @max-md:flex-wrap has-[[data-accordion-trigger]:enabled:hover]:bg-accent-hover/60"]) }, [(u(), t(f(`h${P.value}`), { class: "m-0 min-w-0 flex-1 text-base leading-5 font-normal tracking-normal @max-md:basis-full" }, {
+			default: v(() => [i("button", {
+				id: `${m(j)}-trigger`,
 				type: "button",
 				"data-accordion-trigger": "",
 				"aria-expanded": N.value,
-				"aria-controls": `${h(j)}-panel`,
-				disabled: s.disabled,
-				class: u(["flex w-full cursor-pointer items-center gap-3 text-left transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50", [F.value === "flush" ? "px-1 py-3" : "px-5 py-4", !s.disabled && "hover:bg-accent-hover/60"]]),
+				"aria-controls": `${m(j)}-panel`,
+				disabled: o.disabled,
+				class: l(["flex w-full cursor-pointer items-center gap-3 text-left transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50", [F.value === "flush" ? "px-1 py-3" : "px-5 py-4", !o.disabled && !e.$slots.actions && "hover:bg-accent-hover/60"]]),
 				onClick: I
 			}, [
-				e.$slots.icon ? (d(), r("span", S, [f(e.$slots, "icon")])) : n("", !0),
-				i("span", C, [i("span", w, [f(e.$slots, "title", {}, () => [a(m(s.title), 1)])]), s.description || e.$slots.description ? (d(), r("span", T, [f(e.$slots, "description", {}, () => [a(m(s.description), 1)])])) : n("", !0)]),
-				o(h(b), {
-					class: u(["size-4 shrink-0 text-muted transition-transform duration-200 ease-out-soft motion-reduce:transition-none", N.value && "rotate-180 text-heading"]),
+				e.$slots.actions ? (u(), t(m(b), {
+					key: 0,
+					class: l(["size-4 shrink-0 text-muted transition-transform duration-200 ease-out-soft motion-reduce:transition-none", N.value && "rotate-90 text-heading"]),
+					"aria-hidden": "true"
+				}, null, 8, ["class"])) : n("", !0),
+				e.$slots.icon ? (u(), r("span", S, [d(e.$slots, "icon")])) : n("", !0),
+				i("span", C, [i("span", w, [d(e.$slots, "title", {}, () => [a(p(o.title), 1)])]), o.description || e.$slots.description ? (u(), r("span", T, [d(e.$slots, "description", {}, () => [a(p(o.description), 1)])])) : n("", !0)]),
+				e.$slots.actions ? n("", !0) : (u(), t(m(y), {
+					key: 2,
+					class: l(["size-4 shrink-0 text-muted transition-transform duration-200 ease-out-soft motion-reduce:transition-none", N.value && "rotate-180 text-heading"]),
 					"aria-hidden": "true"
-				}, null, 8, ["class"])
+				}, null, 8, ["class"]))
 			], 10, x)]),
 			_: 3
-		})), i("div", { class: u(["grid transition-[grid-template-rows] duration-200 ease-out-soft motion-reduce:transition-none", N.value ? "grid-rows-[1fr]" : "grid-rows-[0fr]"]) }, [i("div", {
-			id: `${h(j)}-panel`,
+		})), e.$slots.actions ? (u(), r("div", {
+			key: 0,
+			class: l(["flex shrink-0 flex-wrap items-center gap-1.5 @max-md:w-full", F.value === "flush" ? "pr-1 @max-md:-mt-1 @max-md:pb-3 @max-md:pl-8" : "pr-5 @max-md:-mt-2 @max-md:pb-4 @max-md:pl-12"])
+		}, [d(e.$slots, "actions")], 2)) : n("", !0)], 2), i("div", { class: l(["grid transition-[grid-template-rows] duration-200 ease-out-soft motion-reduce:transition-none", N.value ? "grid-rows-[1fr]" : "grid-rows-[0fr]"]) }, [i("div", {
+			id: `${m(j)}-panel`,
 			role: "region",
-			"aria-labelledby": `${h(j)}-trigger`,
+			"aria-labelledby": `${m(j)}-trigger`,
 			inert: !N.value || void 0,
 			class: "min-h-0 overflow-hidden"
-		}, [i("div", { class: u(["pt-0.5 text-base text-body", F.value === "flush" ? "px-1 pb-4" : "px-5 pb-5"]) }, [f(e.$slots, "default")], 2)], 8, E)], 2)], 2));
+		}, [i("div", { class: l(["pt-0.5 text-base text-body", F.value === "flush" ? "px-1 pb-4" : "px-5 pb-5"]) }, [d(e.$slots, "default")], 2)], 8, E)], 2)], 2));
 	}
 });
 //#endregion

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

@@ -41,8 +41,8 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
 }>, {
     variant: "tinted" | "callout";
     title: string;
-    icon: Component;
     color: Tone | "neutral";
+    icon: Component;
     size: "normal" | "small";
     loading: boolean;
     dismissible: boolean;

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

@@ -27,8 +27,8 @@ type __VLS_Slots = {
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     variant: Variant;
     label: string;
-    icon: Component;
     color: Tone | "pending" | "default" | "secondary" | "dark";
+    icon: Component;
     status: string | null;
     rounded: boolean;
     dot: boolean;

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

@@ -40,8 +40,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }>, {
     variant: "subtle" | "solid";
     title: string;
-    icon: Component;
     color: "info" | "warning" | "danger" | "primary" | "neutral";
+    icon: Component;
     dismissible: boolean;
     hideIcon: boolean;
     actionLabel: string;

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

@@ -49,8 +49,8 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     variant: "default" | "muted" | "dashed" | "danger";
     title: string;
     description: string;
-    icon: Component;
     color: "primary" | "blue" | "violet" | "red" | "amber";
+    icon: Component;
     subtitle: string;
     padded: boolean;
     padding: "none" | "xs" | "sm" | "md" | "lg";

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

@@ -12,7 +12,7 @@ var g = {
 	class: "mt-0.5 text-xs leading-4 text-muted"
 }, b = {
 	key: 1,
-	class: "flex shrink-0 flex-wrap items-center gap-2"
+	class: "flex max-w-full min-w-0 shrink-0 flex-wrap items-center gap-2"
 }, x = /*@__PURE__*/ c({
 	__name: "AcCard",
 	props: {
@@ -203,7 +203,7 @@ var g = {
 						key: 1,
 						class: l(["absolute -top-4 -right-4 [&_svg]:size-24!", M.value.watermark])
 					}, [d(e.$slots, "icon")], 2))])) : i("", !0),
-					o("div", { class: l(["flex min-w-0 flex-1 items-center", A.value ? "gap-2.5" : "gap-3"]) }, [c.icon || e.$slots.icon ? (u(), a("span", {
+					o("div", { class: l(["flex min-w-0 flex-1 basis-[220px] items-center", A.value ? "gap-2.5" : "gap-3"]) }, [c.icon || e.$slots.icon ? (u(), a("span", {
 						key: 0,
 						class: l(["flex shrink-0 items-center justify-center", [
 							M.value.tile,

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

@@ -123,9 +123,9 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
     bold: boolean;
     title: string;
     value: undefined;
-    icon: string;
     color: string;
     href: string;
+    icon: string;
     align: "left" | "center" | "right";
     maxWidth: string;
     tooltip: string;

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

@@ -338,12 +338,12 @@ var A = /*@__PURE__*/ f({
 				_: 1
 			}, 8, ["content"])) : G.value === "labels" || G.value === "array" ? (h(), l("span", {
 				key: 6,
-				class: m(["flex w-max min-w-0 items-center gap-2", M.value ? "flex-wrap" : "flex-nowrap"]),
+				class: "flex max-w-full min-w-0 flex-wrap items-center gap-1.5",
 				style: ae({ maxWidth: f.maxWidth })
 			}, [(h(!0), l(a, null, ce(Ve.value, (t, n) => (h(), s(e, {
 				key: `${t.text}-${n}`,
 				content: t.text.length > 28 && !M.value ? t.text : "",
-				class: m(!M.value && "max-w-48 min-w-0")
+				class: m(["max-w-full min-w-0", !M.value && "max-w-60"])
 			}, {
 				default: x(() => [u("span", be, [G.value === "labels" ? (h(), s(y(pe), {
 					key: 0,
@@ -358,7 +358,7 @@ var A = /*@__PURE__*/ f({
 				"aria-expanded": M.value,
 				"aria-label": M.value ? `Show fewer ${Ge.value}` : `Show ${X.value} more ${Ge.value}`,
 				onClick: o[2] ||= S((e) => M.value = !M.value, ["stop"])
-			}, v(M.value ? "Show less" : `+${X.value} more`), 9, Se)) : c("", !0)], 6)) : (h(), s(e, {
+			}, v(M.value ? "Show less" : `+${X.value} more`), 9, Se)) : c("", !0)], 4)) : (h(), s(e, {
 				key: 7,
 				content: ze.value,
 				class: "min-w-0"

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/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/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;