@ac-design/design-system 2.4.5 → 2.5.1

package/dist/lib/compat.css

@@ -1260,6 +1260,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .max-w-250:where([data-ac-ds], [data-ac-ds] *) {
     max-width: calc(var(--spacing) * 250) !important;
   }
+  .max-w-\[135px\]:where([data-ac-ds], [data-ac-ds] *) {
+    max-width: 135px !important;
+  }
+  .max-w-\[146px\]:where([data-ac-ds], [data-ac-ds] *) {
+    max-width: 146px !important;
+  }
   .max-w-\[280px\]:where([data-ac-ds], [data-ac-ds] *) {
     max-width: 280px !important;
   }
@@ -1356,6 +1362,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .grow:where([data-ac-ds], [data-ac-ds] *) {
     flex-grow: 1 !important;
   }
+  .basis-\[80px\]:where([data-ac-ds], [data-ac-ds] *) {
+    flex-basis: 80px !important;
+  }
   .basis-\[240px\]:where([data-ac-ds], [data-ac-ds] *) {
     flex-basis: 240px !important;
   }
@@ -2905,6 +2914,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .object-cover:where([data-ac-ds], [data-ac-ds] *) {
     object-fit: cover !important;
   }
+  .object-left:where([data-ac-ds], [data-ac-ds] *) {
+    object-position: left !important;
+  }
   .p-0:where([data-ac-ds], [data-ac-ds] *) {
     padding: 0px !important;
   }
@@ -5763,6 +5775,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     width: calc(var(--spacing) * 4) !important;
     height: calc(var(--spacing) * 4) !important;
   }
+  .\[\&\>svg\]\:h-auto > svg:where([data-ac-ds], [data-ac-ds] *) {
+    height: auto !important;
+  }
+  .\[\&\>svg\]\:w-full > svg:where([data-ac-ds], [data-ac-ds] *) {
+    width: 100% !important;
+  }
   .\[\&\>svg\]\:shrink-0 > svg:where([data-ac-ds], [data-ac-ds] *) {
     flex-shrink: 0 !important;
   }

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

@@ -1,7 +1,7 @@
 export interface Props {
     /** The text copied to the clipboard, e.g. a cluster ID, IP address or endpoint. */
     value: string;
-    /** What the value is, in lower case: "cluster ID", "public IP". Read as "Copy cluster ID" and announced as "Copied cluster ID". */
+    /** What the value is, in lower case: "cluster ID", "public IP". The tooltip and screen readers say "Copy cluster ID", then "Copied cluster ID". Without it they say "Copy" and "Copied". */
     label?: string;
     /** Text shown instead of `value`, e.g. the first 8 characters of a UUID. The tooltip shows the full value. */
     display?: string;

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

@@ -3,15 +3,15 @@ import { copyText as t } from "../composables/copyText.js";
 import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeProps as d, nextTick as f, normalizeClass as p, onBeforeUnmount as m, openBlock as h, ref as g, renderSlot as _, toDisplayString as v, unref as y, useAttrs as b, withCtx as x, withModifiers as S } from "vue";
 import { Check as C, Copy as w } from "@lucide/vue";
 //#region src/lib/components/AcCopyButton.vue?vue&type=script&setup=true&lang.ts
-var T = ["aria-label"], E = { class: "sr-only" }, D = { class: "block font-mono break-all" }, O = {
+var T = ["aria-label"], E = { class: "sr-only" }, D = { class: "block font-mono break-all" }, O = { class: "block text-on-tooltip/70" }, k = {
 	class: "sr-only",
 	role: "status"
-}, k = 1500, A = /*@__PURE__*/ u({
+}, A = 1500, j = /*@__PURE__*/ u({
 	inheritAttrs: !1,
 	__name: "AcCopyButton",
 	props: {
 		value: {},
-		label: { default: "value" },
+		label: { default: "" },
 		display: { default: "" },
 		mono: {
 			type: Boolean,
@@ -25,68 +25,68 @@ var T = ["aria-label"], E = { class: "sr-only" }, D = { class: "block font-mono
 		variant: { default: "plain" }
 	},
 	emits: ["copy"],
-	setup(u, { expose: A, emit: j }) {
-		let M = u, N = j, P = b(), F = g(null), I = g(null), L = g("idle"), R = g(!1), z, B = r(() => ({
-			class: P.class,
-			style: P.style
-		})), V = r(() => {
-			let { class: e, style: t, ...n } = P;
+	setup(u, { expose: j, emit: M }) {
+		let N = u, P = M, F = b(), I = g(null), L = g(null), R = g("idle"), z = g(!1), B, V = r(() => ({
+			class: F.class,
+			style: F.style
+		})), H = r(() => {
+			let { class: e, style: t, ...n } = F;
 			return n;
-		}), H = r(() => M.display || M.value), U = r(() => !M.iconOnly && (R.value || !!M.display && M.display !== M.value)), W = r(() => M.iconOnly ? M.size === "small" ? "size-6 justify-center rounded-6" : "size-7 justify-center rounded-8" : M.variant === "chip" ? M.size === "small" ? "gap-1.5 rounded-8 px-2 py-0.5 text-xs" : "gap-1.5 rounded-8 px-2.5 py-1 text-base" : M.size === "small" ? "gap-1 rounded-4 text-xs" : M.size === "normal" ? "gap-1.5 rounded-6 text-base" : "gap-1 rounded-4"), G = r(() => M.iconOnly ? "text-muted hover:bg-surface-sunken hover:text-heading" : M.variant === "chip" ? "border border-border bg-surface-sunken/50 text-muted hover:border-border-dark hover:text-heading" : M.size ? "text-heading" : ""), K = r(() => M.iconOnly && M.size !== "small" ? "size-4" : "size-3.5"), q = r(() => M.iconOnly ? "" : M.variant === "chip" ? "text-muted opacity-60 group-hover:opacity-100 group-focus-visible:opacity-100" : "text-muted opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 pointer-coarse:opacity-100");
-		function J() {
-			let e = I.value;
-			R.value = !!e && e.scrollWidth > e.clientWidth + 1;
+		}), U = r(() => N.display || N.value), W = r(() => N.label ? ` ${N.label}` : ""), G = r(() => N.label || "value"), K = r(() => !N.iconOnly && (z.value || !!N.display && N.display !== N.value)), q = r(() => N.iconOnly ? N.size === "small" ? "size-6 justify-center rounded-6" : "size-7 justify-center rounded-8" : N.variant === "chip" ? N.size === "small" ? "gap-1.5 rounded-8 px-2 py-0.5 text-xs" : "gap-1.5 rounded-8 px-2.5 py-1 text-base" : N.size === "small" ? "gap-1 rounded-4 text-xs" : N.size === "normal" ? "gap-1.5 rounded-6 text-base" : "gap-1 rounded-4"), J = r(() => N.iconOnly ? "text-muted hover:bg-surface-sunken hover:text-heading" : N.variant === "chip" ? "border border-border bg-surface-sunken/50 text-muted hover:border-border-dark hover:text-heading" : N.size ? "text-heading" : ""), Y = r(() => N.iconOnly && N.size !== "small" ? "size-4" : "size-3.5"), X = r(() => N.iconOnly ? "" : N.variant === "chip" ? "text-muted opacity-60 group-hover:opacity-100 group-focus-visible:opacity-100" : "text-muted opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 pointer-coarse:opacity-100");
+		function Z() {
+			let e = L.value;
+			z.value = !!e && e.scrollWidth > e.clientWidth + 1;
 		}
-		async function Y() {
-			clearTimeout(z);
+		async function Q() {
+			clearTimeout(B);
 			try {
-				await t(M.value), L.value = "copied", N("copy", M.value);
+				await t(N.value), R.value = "copied", P("copy", N.value);
 			} catch {
-				L.value = "failed";
+				R.value = "failed";
 			}
-			z = setTimeout(() => L.value = "idle", k), await f(), X();
+			B = setTimeout(() => R.value = "idle", A), await f(), $();
 		}
-		function X() {
-			let e = F.value?.closest("[data-testid=\"ac-tooltip\"]");
-			e && F.value?.matches(":hover") && e.dispatchEvent(new PointerEvent("pointerenter", { pointerType: "mouse" }));
+		function $() {
+			let e = I.value?.closest("[data-testid=\"ac-tooltip\"]");
+			e && I.value?.matches(":hover") && e.dispatchEvent(new PointerEvent("pointerenter", { pointerType: "mouse" }));
 		}
-		function Z() {
-			F.value?.focus();
+		function ee() {
+			I.value?.focus();
 		}
-		return m(() => clearTimeout(z)), A({ focus: Z }), (t, r) => (h(), o("span", d({ class: "inline-flex max-w-full min-w-0 align-middle" }, B.value, {
+		return m(() => clearTimeout(B)), j({ focus: ee }), (t, r) => (h(), o("span", d({ class: "inline-flex max-w-full min-w-0 align-middle" }, V.value, {
 			"data-ac-ds": "",
 			"data-testid": "ac-copy-button"
 		}), [l(e, {
 			class: "min-w-0 flex-auto",
-			delay: L.value === "idle" ? 300 : 0
+			delay: R.value === "idle" ? 300 : 0
 		}, {
-			content: x(() => [L.value === "copied" ? (h(), o(n, { key: 0 }, [c("Copied")], 64)) : L.value === "failed" ? (h(), o(n, { key: 1 }, [c("Couldn't copy. The browser blocked the clipboard.")], 64)) : U.value ? (h(), o(n, { key: 2 }, [s("span", D, v(u.value), 1), r[0] ||= s("span", { class: "block text-on-tooltip/70" }, "Click to copy", -1)], 64)) : (h(), o(n, { key: 3 }, [c("Copy")], 64))]),
+			content: x(() => [R.value === "copied" ? (h(), o(n, { key: 0 }, [c("Copied" + v(W.value), 1)], 64)) : R.value === "failed" ? (h(), o(n, { key: 1 }, [c("Couldn't copy" + v(W.value) + ". The browser blocked the clipboard.", 1)], 64)) : K.value ? (h(), o(n, { key: 2 }, [s("span", D, v(u.value), 1), s("span", O, "Click to copy" + v(W.value), 1)], 64)) : (h(), o(n, { key: 3 }, [c("Copy" + v(W.value), 1)], 64))]),
 			default: x(() => [s("button", d({
 				ref_key: "button",
-				ref: F,
+				ref: I,
 				type: "button",
-				class: ["group inline-flex max-w-full min-w-0 flex-auto cursor-pointer items-center text-left transition-[color,background-color,border-color] duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none", [W.value, G.value]],
-				"aria-label": u.iconOnly ? `Copy ${u.label}` : void 0
-			}, V.value, {
-				onClick: S(Y, ["stop"]),
-				onPointerenter: J,
-				onFocus: J
-			}), [u.iconOnly ? a("", !0) : (h(), o(n, { key: 0 }, [s("span", E, v(`Copy ${u.label}: `), 1), s("span", {
+				class: ["group inline-flex max-w-full min-w-0 flex-auto cursor-pointer items-center text-left transition-[color,background-color,border-color] duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none", [q.value, J.value]],
+				"aria-label": u.iconOnly ? `Copy ${G.value}` : void 0
+			}, H.value, {
+				onClick: S(Q, ["stop"]),
+				onPointerenter: Z,
+				onFocus: Z
+			}), [u.iconOnly ? a("", !0) : (h(), o(n, { key: 0 }, [s("span", E, v(`Copy ${G.value}: `), 1), s("span", {
 				ref_key: "text",
-				ref: I,
+				ref: L,
 				class: p(["min-w-0 truncate", u.mono && "font-mono"])
-			}, [_(t.$slots, "default", {}, () => [c(v(H.value), 1)])], 2)], 64)), L.value === "copied" ? (h(), i(y(C), {
+			}, [_(t.$slots, "default", {}, () => [c(v(U.value), 1)])], 2)], 64)), R.value === "copied" ? (h(), i(y(C), {
 				key: 1,
-				class: p(["shrink-0 text-primary", K.value]),
+				class: p(["shrink-0 text-primary", Y.value]),
 				"aria-hidden": "true"
 			}, null, 8, ["class"])) : (h(), i(y(w), {
 				key: 2,
-				class: p(["shrink-0 transition-opacity duration-200", [K.value, q.value]]),
+				class: p(["shrink-0 transition-opacity duration-200", [Y.value, X.value]]),
 				"aria-hidden": "true"
 			}, null, 8, ["class"]))], 16, T)]),
 			_: 3
-		}, 8, ["delay"]), s("span", O, v(L.value === "copied" ? `Copied ${u.label}` : L.value === "failed" ? `Couldn't copy ${u.label}` : ""), 1)], 16));
+		}, 8, ["delay"]), s("span", k, v(R.value === "copied" ? `Copied ${G.value}` : R.value === "failed" ? `Couldn't copy ${G.value}` : ""), 1)], 16));
 	}
 });
 //#endregion
-export { A as default };
+export { j as default };

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

@@ -1,12 +1,10 @@
-import { createCommentVNode as e, createElementBlock as t, createVNode as n, defineComponent as r, normalizeClass as i, openBlock as a, renderSlot as o, toDisplayString as s, unref as c } from "vue";
-import { Menu as l } from "@lucide/vue";
+import e from "./AcProductTag.js";
+import { createBlock as t, createCommentVNode as n, createElementBlock as r, createVNode as i, defineComponent as a, normalizeClass as o, openBlock as s, renderSlot as c, unref as l } from "vue";
+import { Menu as u } from "@lucide/vue";
 //#region src/lib/components/AcNavbar.vue?vue&type=script&setup=true&lang.ts
-var u = ["aria-label"], d = {
+var d = ["aria-label"], f = {
 	key: 1,
 	class: "flex shrink-0 items-center gap-2"
-}, f = {
-	key: 0,
-	class: "inline-flex items-center rounded-6 border border-primary/25 bg-primary/10 px-1.5 py-0.5 text-sm font-semibold tracking-wide text-primary-strong uppercase"
 }, p = ["aria-label"], m = {
 	key: 3,
 	class: "hidden min-w-0 shrink sm:block sm:w-48 md:w-60 lg:w-80 xl:w-96"
@@ -22,7 +20,7 @@ var u = ["aria-label"], d = {
 }, v = {
 	key: 6,
 	class: "flex shrink-0 items-center gap-0.5 sm:gap-3"
-}, y = /*@__PURE__*/ r({
+}, y = /*@__PURE__*/ a({
 	__name: "AcNavbar",
 	props: {
 		menuButton: { default: "mobile" },
@@ -36,37 +34,40 @@ var u = ["aria-label"], d = {
 		searchPosition: { default: "start" }
 	},
 	emits: ["menu"],
-	setup(r, { emit: y }) {
+	setup(a, { emit: y }) {
 		let b = y;
-		return (y, x) => (a(), t("header", {
-			class: i(["top-0 z-30 flex h-18 shrink-0 items-center gap-2 border-b border-border/80 bg-surface/90 px-4 backdrop-blur-sm sm:gap-4 sm:px-6", r.sticky && "sticky"]),
+		return (y, x) => (s(), r("header", {
+			class: o(["top-0 z-30 flex h-18 shrink-0 items-center gap-2 border-b border-border/80 bg-surface/90 px-4 backdrop-blur-sm sm:gap-4 sm:px-6", a.sticky && "sticky"]),
 			"data-ac-ds": "",
 			"data-testid": "ac-navbar"
 		}, [
-			r.menuButton === "never" ? e("", !0) : (a(), t("button", {
+			a.menuButton === "never" ? n("", !0) : (s(), r("button", {
 				key: 0,
 				type: "button",
-				class: i(["inline-flex size-9.5 shrink-0 cursor-pointer items-center justify-center rounded-10 border border-transparent text-muted transition-colors duration-200 hover:border-border hover:bg-surface-sunken/50 hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none", {
-					"md:hidden": r.menuButton === "mobile",
-					"lg:hidden": r.menuButton === "tablet"
+				class: o(["inline-flex size-9.5 shrink-0 cursor-pointer items-center justify-center rounded-10 border border-transparent text-muted transition-colors duration-200 hover:border-border hover:bg-surface-sunken/50 hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none", {
+					"md:hidden": a.menuButton === "mobile",
+					"lg:hidden": a.menuButton === "tablet"
 				}]),
-				"aria-label": r.menuLabel,
+				"aria-label": a.menuLabel,
 				"data-ac-ds": "",
 				"data-testid": "ac-navbar-menu",
 				onClick: x[0] ||= (e) => b("menu")
-			}, [n(c(l), {
+			}, [i(l(u), {
 				class: "size-5",
 				"aria-hidden": "true"
-			})], 10, u)),
-			y.$slots.brand || r.productName ? (a(), t("div", d, [o(y.$slots, "brand"), r.productName ? (a(), t("span", f, s(r.productName), 1)) : e("", !0)])) : e("", !0),
-			y.$slots.default ? (a(), t("nav", {
+			})], 10, d)),
+			y.$slots.brand || a.productName ? (s(), r("div", f, [c(y.$slots, "brand"), a.productName ? (s(), t(e, {
+				key: 0,
+				label: a.productName
+			}, null, 8, ["label"])) : n("", !0)])) : n("", !0),
+			y.$slots.default ? (s(), r("nav", {
 				key: 2,
-				"aria-label": r.label,
+				"aria-label": a.label,
 				class: "hidden items-center gap-1 md:flex"
-			}, [o(y.$slots, "default")], 8, p)) : e("", !0),
-			y.$slots.search && r.searchPosition === "start" ? (a(), t("div", m, [o(y.$slots, "search")])) : e("", !0),
-			y.$slots.start ? (a(), t("div", h, [o(y.$slots, "start")])) : (a(), t("div", g, [y.$slots.search && r.searchPosition === "center" ? (a(), t("div", _, [o(y.$slots, "search")])) : e("", !0)])),
-			y.$slots.actions ? (a(), t("div", v, [o(y.$slots, "actions")])) : e("", !0)
+			}, [c(y.$slots, "default")], 8, p)) : n("", !0),
+			y.$slots.search && a.searchPosition === "start" ? (s(), r("div", m, [c(y.$slots, "search")])) : n("", !0),
+			y.$slots.start ? (s(), r("div", h, [c(y.$slots, "start")])) : (s(), r("div", g, [y.$slots.search && a.searchPosition === "center" ? (s(), r("div", _, [c(y.$slots, "search")])) : n("", !0)])),
+			y.$slots.actions ? (s(), r("div", v, [c(y.$slots, "actions")])) : n("", !0)
 		], 2));
 	}
 });

package/dist/lib/components/AcProductTag.js

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

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

@@ -0,0 +1,7 @@
+export interface Props {
+    /** The product's short name, shown in capitals, e.g. `"Console"`, `"DB"` or `"Billing"`. */
+    label: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,15 @@
+import { createElementBlock as e, defineComponent as t, openBlock as n, toDisplayString as r } from "vue";
+//#region src/lib/components/AcProductTag.vue?vue&type=script&setup=true&lang.ts
+var i = {
+	class: "inline-flex h-5 shrink-0 items-center rounded-6 border border-primary/25 bg-primary/10 px-1.5 text-sm leading-none font-semibold tracking-wide whitespace-nowrap text-primary-strong uppercase",
+	"data-ac-ds": "",
+	"data-testid": "ac-product-tag"
+}, a = /*@__PURE__*/ t({
+	__name: "AcProductTag",
+	props: { label: {} },
+	setup(t) {
+		return (a, o) => (n(), e("span", i, r(t.label), 1));
+	}
+});
+//#endregion
+export { a as default };

package/dist/lib/components/AcSidebarBrand.js

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

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

@@ -0,0 +1,27 @@
+export interface Props {
+    /** Short product tag after the logo, e.g. `"Console"`, `"DB"` or `"Billing"`. Empty hides it; the collapsed rail never shows it. */
+    productName?: string;
+    /** Image URL of a custom (white-label) logo. Empty draws the AppsCode logo. */
+    logo?: string;
+    /** Image URL of a square mark for the collapsed rail. Empty draws the AppsCode mark. */
+    mark?: string;
+    /** Shows only the mark, for the 56px rail. Pass the sidebar header slot's `collapsed`. */
+    collapsed?: boolean;
+    /** Route for `RouterLink` (needs vue-router in the app). */
+    to?: string | Record<string, unknown>;
+    /** Plain link, when there's no router. */
+    href?: string;
+    /** Accessible name of the link. */
+    label?: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    mark: string;
+    href: string;
+    to: string | Record<string, unknown>;
+    logo: string;
+    collapsed: boolean;
+    productName: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,76 @@
+import e from "./AcLogo.js";
+import t from "./AcProductTag.js";
+import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createVNode as s, defineComponent as c, getCurrentInstance as l, mergeProps as u, openBlock as d, resolveDynamicComponent as f, withCtx as p } from "vue";
+//#region src/lib/components/AcSidebarBrand.vue?vue&type=script&setup=true&lang.ts
+var m = {
+	class: "min-w-0 flex-1",
+	"data-ac-ds": "",
+	"data-testid": "ac-sidebar-brand"
+}, h = ["src"], g = ["src"], _ = {
+	key: 1,
+	class: "flex max-w-[135px] min-w-0 grow basis-[80px] [&>svg]:h-auto [&>svg]:w-full"
+}, v = /*@__PURE__*/ c({
+	__name: "AcSidebarBrand",
+	props: {
+		productName: { default: "" },
+		logo: { default: "" },
+		mark: { default: "" },
+		collapsed: {
+			type: Boolean,
+			default: !1
+		},
+		to: { default: void 0 },
+		href: { default: void 0 },
+		label: { default: "Home" }
+	},
+	setup(c) {
+		let v = c, y = l()?.appContext.components.RouterLink, b = r(() => {
+			if (v.to !== void 0 && y) return {
+				is: y,
+				attrs: {
+					to: v.to,
+					"aria-label": v.label
+				}
+			};
+			let e = v.href ?? (typeof v.to == "string" ? v.to : void 0);
+			return e ? {
+				is: "a",
+				attrs: {
+					href: e,
+					"aria-label": v.label
+				}
+			} : {
+				is: "div",
+				attrs: {}
+			};
+		}), x = r(() => b.value.is === "div" ? "AppsCode" : "");
+		return (r, l) => (d(), o("div", m, [(d(), i(f(b.value.is), u(b.value.attrs, { class: "flex w-fit max-w-full min-w-0 flex-wrap items-center gap-x-2 gap-y-1.5 rounded-8 no-underline focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none" }), {
+			default: p(() => [c.collapsed ? (d(), o(n, { key: 0 }, [c.mark ? (d(), o("img", {
+				key: 0,
+				src: c.mark,
+				alt: "",
+				class: "size-7 rounded-6 object-contain"
+			}, null, 8, h)) : (d(), i(e, {
+				key: 1,
+				variant: "mark",
+				size: 28,
+				label: x.value
+			}, null, 8, ["label"]))], 64)) : (d(), o(n, { key: 1 }, [c.logo ? (d(), o("img", {
+				key: 0,
+				src: c.logo,
+				alt: "",
+				class: "block h-8 max-w-[146px] min-w-0 object-contain object-left",
+				"data-testid": "ac-sidebar-brand-logo"
+			}, null, 8, g)) : (d(), o("span", _, [s(e, {
+				size: 28,
+				label: x.value
+			}, null, 8, ["label"])])), c.productName ? (d(), i(t, {
+				key: 2,
+				label: c.productName
+			}, null, 8, ["label"])) : a("", !0)], 64))]),
+			_: 1
+		}, 16))]));
+	}
+});
+//#endregion
+export { v as default };

package/dist/lib/components/index.d.ts

@@ -61,6 +61,7 @@ export { default as AcPagination } from "./AcPagination.vue";
 export { default as AcPreloader } from "./AcPreloader.vue";
 export { default as AcProgress } from "./AcProgress.vue";
 export { default as AcProductHero } from "./AcProductHero.vue";
+export { default as AcProductTag } from "./AcProductTag.vue";
 export { default as AcRadioCard } from "./AcRadioCard.vue";
 export { default as AcResourceCard } from "./AcResourceCard.vue";
 export { default as AcSearchBar } from "./AcSearchBar.vue";
@@ -69,6 +70,7 @@ export { default as AcSegmentedControl } from "./AcSegmentedControl.vue";
 export { default as AcSettingsRow } from "./AcSettingsRow.vue";
 export { default as AcSelect } from "./AcSelect.vue";
 export { default as AcSidebar } from "./AcSidebar.vue";
+export { default as AcSidebarBrand } from "./AcSidebarBrand.vue";
 export { default as AcSidebarItem } from "./AcSidebarItem.vue";
 export { default as AcSidebarSection } from "./AcSidebarSection.vue";
 export { default as AcSidePanel } from "./AcSidePanel.vue";

package/dist/lib/index.js

@@ -59,46 +59,48 @@ import $ from "./components/AcSelect.js";
 import se from "./components/AcKeyValueInput.js";
 import ce from "./components/AcLoader.js";
 import le from "./components/AcLocaleSwitcher.js";
-import ue from "./components/AcNavbar.js";
-import de from "./components/AcNotificationMenu.js";
-import fe from "./components/AcNumberInput.js";
-import pe from "./components/AcPage.js";
-import me from "./components/AcPagination.js";
-import he from "./components/AcPreloader.js";
-import ge from "./components/AcProgress.js";
-import _e from "./components/AcProductHero.js";
-import ve from "./components/AcRadioCard.js";
-import ye from "./components/AcTag.js";
-import be from "./components/AcResourceCard.js";
-import xe from "./components/AcSectionContent.js";
-import Se from "./components/AcSegmentedControl.js";
-import Ce from "./components/AcSettingsRow.js";
-import we from "./components/AcSidebar.js";
-import Te from "./components/AcSidebarItem.js";
-import Ee from "./components/AcSidebarSection.js";
-import De from "./components/AcSidePanel.js";
-import Oe from "./components/AcSideTabs.js";
-import ke from "./components/AcSlider.js";
-import Ae from "./components/AcStatCard.js";
-import je from "./components/AcStatusBar.js";
-import Me from "./components/AcSteps.js";
-import Ne from "./components/AcSwitch.js";
-import Pe from "./components/AcSwitchCard.js";
-import Fe from "./components/AcTable.js";
-import Ie from "./components/AcTabs.js";
-import Le from "./components/AcTagInput.js";
-import Re from "./components/AcTaintInput.js";
-import ze from "./components/AcTextarea.js";
-import { useColorMode as Be } from "./composables/useColorMode.js";
-import Ve from "./components/AcThemeMode.js";
-import He from "./components/AcTimePicker.js";
-import { showToast as Ue, useToast as We } from "./composables/useToast.js";
-import Ge from "./components/AcToaster.js";
-import Ke from "./components/AcUsageCard.js";
-import qe from "./components/AcUserMenu.js";
-import { useTablePagination as Je } from "./composables/useTablePagination.js";
-import { useApiPagination as Ye } from "./composables/useApiPagination.js";
-import { useBulkSelection as Xe } from "./composables/useBulkSelection.js";
-import { useFormValidation as Ze } from "./composables/useFormValidation.js";
-import { HSLToHex as Qe, HexToHSL as $e, MIN_CONTRAST as et, contrastOnWhite as tt, getThemeHSL as nt, hexToHsl as rt, hslToHex as it, readableLightness as at, setThemeHSL as ot, useBrandColor as st } from "./composables/useBrandColor.js";
-export { ee as AcAccordion, te as AcAccordionItem, r as AcAlert, o as AcAppSwitcher, s as AcAvatar, d as AcBadge, f as AcBanner, p as AcBreadcrumb, m as AcBulkActionBar, n as AcButton, h as AcButtons, g as AcCard, y as AcCellValue, b as AcCheckBox, x as AcCheckList, S as AcCheckRadio, C as AcCircularProgress, w as AcClusterSwitcher, T as AcColorInput, E as AcCommandBlock, D as AcConfirmModal, O as AcContentHeader, k as AcContentLayout, j as AcContentTable, M as AcCopyButton, N as AcCostSummary, P as AcDatePicker, I as AcDeleteConfirmationModal, I as AcDeleteModal, L as AcDivider, R as AcDropdown, z as AcDropdownDivider, B as AcDropdownItem, V as AcEmptyState, H as AcErrorState, U as AcFeatureCard, W as AcFileUpload, q as AcFontScale, J as AcFooter, Y as AcForm, X as AcFormArray, Z as AcFormFooter, Q as AcFormSection, ne as AcHeader, re as AcHeaderItem, ie as AcHeaderItems, ae as AcInfoTable, F as AcInput, oe as AcKbd, se as AcKeyValueInput, ce as AcLoader, le as AcLocaleSwitcher, i as AcLogo, _ as AcModal, ue as AcNavbar, a as AcNavbarItem, de as AcNotificationMenu, fe as AcNumberInput, pe as AcPage, me as AcPagination, he as AcPreloader, _e as AcProductHero, ge as AcProgress, ve as AcRadioCard, be as AcResourceCard, A as AcSearchBar, xe as AcSectionContent, Se as AcSegmentedControl, $ as AcSelect, Ce as AcSettingsRow, De as AcSidePanel, Oe as AcSideTabs, we as AcSidebar, Te as AcSidebarItem, Ee as AcSidebarSection, v as AcSkeleton, ke as AcSlider, e as AcSpinner, Ae as AcStatCard, je as AcStatusBar, Me as AcSteps, Ne as AcSwitch, Pe as AcSwitchCard, Fe as AcTable, Ie as AcTabs, ye as AcTag, Le as AcTagInput, Re as AcTaintInput, ze as AcTextarea, Ve as AcThemeMode, He as AcTimePicker, Ge as AcToaster, t as AcTooltip, Ke as AcUsageCard, qe as AcUserMenu, G as FONT_SCALES, Qe as HSLToHex, $e as HexToHSL, et as MIN_CONTRAST, tt as contrastOnWhite, nt as getThemeHSL, rt as hexToHsl, it as hslToHex, c as humanizeState, l as normalizeState, at as readableLightness, ot as setThemeHSL, Ue as showToast, u as statusMeta, Ye as useApiPagination, st as useBrandColor, Xe as useBulkSelection, Be as useColorMode, K as useFontScale, Ze as useFormValidation, Je as useTablePagination, We as useToast };
+import ue from "./components/AcProductTag.js";
+import de from "./components/AcNavbar.js";
+import fe from "./components/AcNotificationMenu.js";
+import pe from "./components/AcNumberInput.js";
+import me from "./components/AcPage.js";
+import he from "./components/AcPagination.js";
+import ge from "./components/AcPreloader.js";
+import _e from "./components/AcProgress.js";
+import ve from "./components/AcProductHero.js";
+import ye from "./components/AcRadioCard.js";
+import be from "./components/AcTag.js";
+import xe from "./components/AcResourceCard.js";
+import Se from "./components/AcSectionContent.js";
+import Ce from "./components/AcSegmentedControl.js";
+import we from "./components/AcSettingsRow.js";
+import Te from "./components/AcSidebar.js";
+import Ee from "./components/AcSidebarBrand.js";
+import De from "./components/AcSidebarItem.js";
+import Oe from "./components/AcSidebarSection.js";
+import ke from "./components/AcSidePanel.js";
+import Ae from "./components/AcSideTabs.js";
+import je from "./components/AcSlider.js";
+import Me from "./components/AcStatCard.js";
+import Ne from "./components/AcStatusBar.js";
+import Pe from "./components/AcSteps.js";
+import Fe from "./components/AcSwitch.js";
+import Ie from "./components/AcSwitchCard.js";
+import Le from "./components/AcTable.js";
+import Re from "./components/AcTabs.js";
+import ze from "./components/AcTagInput.js";
+import Be from "./components/AcTaintInput.js";
+import Ve from "./components/AcTextarea.js";
+import { useColorMode as He } from "./composables/useColorMode.js";
+import Ue from "./components/AcThemeMode.js";
+import We from "./components/AcTimePicker.js";
+import { showToast as Ge, useToast as Ke } from "./composables/useToast.js";
+import qe from "./components/AcToaster.js";
+import Je from "./components/AcUsageCard.js";
+import Ye from "./components/AcUserMenu.js";
+import { useTablePagination as Xe } from "./composables/useTablePagination.js";
+import { useApiPagination as Ze } from "./composables/useApiPagination.js";
+import { useBulkSelection as Qe } from "./composables/useBulkSelection.js";
+import { useFormValidation as $e } from "./composables/useFormValidation.js";
+import { HSLToHex as et, HexToHSL as tt, MIN_CONTRAST as nt, contrastOnWhite as rt, getThemeHSL as it, hexToHsl as at, hslToHex as ot, readableLightness as st, setThemeHSL as ct, useBrandColor as lt } from "./composables/useBrandColor.js";
+export { ee as AcAccordion, te as AcAccordionItem, r as AcAlert, o as AcAppSwitcher, s as AcAvatar, d as AcBadge, f as AcBanner, p as AcBreadcrumb, m as AcBulkActionBar, n as AcButton, h as AcButtons, g as AcCard, y as AcCellValue, b as AcCheckBox, x as AcCheckList, S as AcCheckRadio, C as AcCircularProgress, w as AcClusterSwitcher, T as AcColorInput, E as AcCommandBlock, D as AcConfirmModal, O as AcContentHeader, k as AcContentLayout, j as AcContentTable, M as AcCopyButton, N as AcCostSummary, P as AcDatePicker, I as AcDeleteConfirmationModal, I as AcDeleteModal, L as AcDivider, R as AcDropdown, z as AcDropdownDivider, B as AcDropdownItem, V as AcEmptyState, H as AcErrorState, U as AcFeatureCard, W as AcFileUpload, q as AcFontScale, J as AcFooter, Y as AcForm, X as AcFormArray, Z as AcFormFooter, Q as AcFormSection, ne as AcHeader, re as AcHeaderItem, ie as AcHeaderItems, ae as AcInfoTable, F as AcInput, oe as AcKbd, se as AcKeyValueInput, ce as AcLoader, le as AcLocaleSwitcher, i as AcLogo, _ as AcModal, de as AcNavbar, a as AcNavbarItem, fe as AcNotificationMenu, pe as AcNumberInput, me as AcPage, he as AcPagination, ge as AcPreloader, ve as AcProductHero, ue as AcProductTag, _e as AcProgress, ye as AcRadioCard, xe as AcResourceCard, A as AcSearchBar, Se as AcSectionContent, Ce as AcSegmentedControl, $ as AcSelect, we as AcSettingsRow, ke as AcSidePanel, Ae as AcSideTabs, Te as AcSidebar, Ee as AcSidebarBrand, De as AcSidebarItem, Oe as AcSidebarSection, v as AcSkeleton, je as AcSlider, e as AcSpinner, Me as AcStatCard, Ne as AcStatusBar, Pe as AcSteps, Fe as AcSwitch, Ie as AcSwitchCard, Le as AcTable, Re as AcTabs, be as AcTag, ze as AcTagInput, Be as AcTaintInput, Ve as AcTextarea, Ue as AcThemeMode, We as AcTimePicker, qe as AcToaster, t as AcTooltip, Je as AcUsageCard, Ye as AcUserMenu, G as FONT_SCALES, et as HSLToHex, tt as HexToHSL, nt as MIN_CONTRAST, rt as contrastOnWhite, it as getThemeHSL, at as hexToHsl, ot as hslToHex, c as humanizeState, l as normalizeState, st as readableLightness, ct as setThemeHSL, Ge as showToast, u as statusMeta, Ze as useApiPagination, lt as useBrandColor, Qe as useBulkSelection, He as useColorMode, K as useFontScale, $e as useFormValidation, Xe as useTablePagination, Ke as useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ac-design/design-system",
-  "version": "2.4.5",
+  "version": "2.5.1",
   "description": "AppsCode design system: Tailwind CSS v4 theme and Vue 3 components.",
   "repository": {
     "type": "git",