@ac-design/design-system 2.4.1 → 2.4.3

package/dist/lib/compat.css

@@ -770,15 +770,21 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .ac-scrollbar:where([data-ac-ds], [data-ac-ds] *) {
     overflow: auto !important;
     scrollbar-width: thin !important;
-    scrollbar-color: rgb(176 176 176 / 0.55) transparent !important;
+    scrollbar-color: transparent transparent !important;
+    &:hover:where([data-ac-ds], [data-ac-ds] *), &:focus-within:where([data-ac-ds], [data-ac-ds] *) {
+      scrollbar-color: rgb(176 176 176 / 0.55) transparent !important;
+    }
     &:where([data-ac-ds], [data-ac-ds] *)::-webkit-scrollbar {
       width: 4px !important;
       height: 4px !important;
     }
     &:where([data-ac-ds], [data-ac-ds] *)::-webkit-scrollbar-thumb {
-      background-color: #b0b0b0 !important;
+      background-color: transparent !important;
       border-radius: 9999px !important;
     }
+    &:hover:where([data-ac-ds], [data-ac-ds] *)::-webkit-scrollbar-thumb, &:focus-within:where([data-ac-ds], [data-ac-ds] *)::-webkit-scrollbar-thumb {
+      background-color: #b0b0b0 !important;
+    }
     &:where([data-ac-ds], [data-ac-ds] *)::-webkit-scrollbar-track {
       background: transparent !important;
     }

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

@@ -32,7 +32,7 @@ export interface Props {
     isOfflineInstaller?: boolean;
     /** Replaces the built-in AppsCode list. Entries without `url` get one built from `baseUrl`; the self-host and org-type rules aren't applied. */
     apps?: AppSwitcherApp[];
-    /** Leaves the current app out of the grid, as the old component did. */
+    /** Hides the current app; defaults to `true` to match the old component. */
     hideCurrent?: boolean;
     /** Accessible name of the grid button, and the panel heading. */
     label?: string;

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

@@ -1,35 +1,35 @@
 import { fixedFrame as e } from "./fixedFrame.js";
 import t from "./AcLogo.js";
 import n from "./AcNavbarItem.js";
-import { Fragment as r, Teleport as i, Transition as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, mergeModels as p, nextTick as m, normalizeClass as h, normalizeStyle as g, onBeforeUnmount as ee, openBlock as _, ref as v, renderList as te, renderSlot as ne, resolveDynamicComponent as y, toDisplayString as b, unref as x, useId as re, useModel as ie, watch as ae, withCtx as oe } from "vue";
-import { ChartLine as se, Check as ce, Database as le, GraduationCap as ue, Grip as de, Receipt as fe, Server as pe, ServerCog as me, Telescope as he } from "@lucide/vue";
+import { Fragment as r, Teleport as i, Transition as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, mergeModels as p, nextTick as m, normalizeClass as h, normalizeStyle as ee, onBeforeUnmount as g, openBlock as _, ref as v, renderList as y, renderSlot as b, resolveDynamicComponent as te, toDisplayString as x, unref as S, useId as C, useModel as w, watch as T, withCtx as ne } from "vue";
+import { Check as re, Grip as ie } from "@lucide/vue";
 //#region src/lib/components/AcAppSwitcher.vue?vue&type=script&setup=true&lang.ts
-var ge = {
+var ae = {
 	class: "inline-flex",
 	"data-ac-ds": "",
 	"data-testid": "ac-app-switcher"
-}, _e = {
+}, oe = {
 	role: "list",
 	class: "grid grid-cols-3 gap-1"
-}, ve = [
+}, se = [
 	"href",
 	"aria-current",
 	"title",
 	"onClick"
-], S = ["src"], C = {
+], ce = ["src"], le = {
 	key: 3,
 	class: "text-lg font-semibold"
-}, w = { class: "w-full truncate text-xs font-medium text-heading" }, T = {
+}, ue = { class: "w-full truncate text-xs font-medium text-heading" }, de = {
 	key: 0,
 	class: "sr-only"
-}, E = {
+}, fe = {
 	key: 1,
 	class: "absolute top-1.5 right-1.5 inline-flex size-4 items-center justify-center rounded-full bg-primary text-white",
 	"aria-hidden": "true"
-}, D = {
+}, pe = {
 	key: 0,
 	class: "mt-2 border-t border-border pt-2"
-}, O = "id", k = 3, A = 6, j = /*@__PURE__*/ f({
+}, E = "id", D = 3, O = 6, k = /*@__PURE__*/ f({
 	__name: "AcAppSwitcher",
 	props: /*@__PURE__*/ p({
 		currentApp: { default: "platform" },
@@ -44,7 +44,7 @@ var ge = {
 		apps: { default: void 0 },
 		hideCurrent: {
 			type: Boolean,
-			default: !1
+			default: !0
 		},
 		label: { default: "AppsCode apps" },
 		align: { default: "end" }
@@ -57,77 +57,71 @@ var ge = {
 	}),
 	emits: /*@__PURE__*/ p(["select"], ["update:open"]),
 	setup(f, { emit: p }) {
-		let j = f, M = ie(f, "open"), N = p, P = [
+		let k = f, A = w(f, "open"), j = p, M = [
 			{
-				name: O,
+				name: E,
 				title: "Platform",
 				port: "8080",
-				subtitle: "Manage your platform & accounts"
+				subtitle: "Manage your platform & accounts",
+				iconUrl: "https://cdn.appscode.com/images/products/platform/platform.svg"
 			},
 			{
 				name: "db",
 				title: "KubeDB",
 				port: "5996",
 				subtitle: "Manage your databases",
-				icon: le,
-				color: "purple"
+				iconUrl: "https://cdn.appscode.com/images/products/kubedb/kubedb-512x512_1.svg"
 			},
 			{
 				name: "grafana",
 				title: "Grafana",
 				port: "3005",
 				subtitle: "Analyze your activities",
-				icon: se,
-				color: "yellow"
+				iconUrl: "https://cdn.appscode.com/images/products/others/logos/grafana.svg"
 			},
 			{
 				name: "observe",
 				title: "Observe",
 				port: "5992",
 				subtitle: "Observe your system",
-				icon: he,
-				color: "green"
+				iconUrl: "https://cdn.appscode.com/images/products/observe/logos/observe.png"
 			},
 			{
 				name: "selfhost",
 				title: "SelfHost",
 				port: "5993",
 				subtitle: "Host AppsCode on your own cluster",
-				icon: me,
-				color: "slate"
+				iconUrl: "https://cdn.appscode.com/images/products/selfhost/logos/selfhost.svg"
 			},
 			{
 				name: "billing",
 				title: "Billing",
 				port: "5995",
 				subtitle: "Manage your contracts, licenses & billings",
-				icon: fe,
-				color: "primary"
+				iconUrl: "https://cdn.appscode.com/images/products/billing/logos/billing.svg"
 			},
 			{
 				name: "learn",
 				title: "Learn",
 				port: "5988",
 				subtitle: "Be an Expert in Cloud Native technologies",
-				icon: ue,
-				color: "red"
+				iconUrl: "https://cdn.appscode.com/images/products/learn/logos/learn.svg"
 			}
-		], F = {
+		], N = {
 			name: "console",
 			title: "Console",
 			port: "5990",
 			subtitle: "Manage your kubernetes clusters",
-			icon: pe,
-			color: "blue"
-		}, ye = [
+			iconUrl: "https://cdn.appscode.com/images/products/console/console_512x512.svg"
+		}, P = [
 			"https://appscode.ninja",
 			"https://appscode.com",
 			"http://bb.test:8080"
-		], I = [
+		], F = [
 			"billing",
 			"selfhost",
 			"learn"
-		], be = {
+		], I = {
 			primary: "bg-primary/10 text-primary-strong ring-primary/25",
 			blue: "bg-info/10 text-info-strong ring-info/25",
 			green: "bg-success/10 text-success-strong ring-success/25",
@@ -135,15 +129,15 @@ var ge = {
 			purple: "bg-pending/10 text-pending-strong ring-pending/25",
 			red: "bg-danger/10 text-danger-strong ring-danger/25",
 			slate: "bg-surface-sunken text-muted ring-border"
-		}, L = re(), R = `${L}-panel`, z = `${L}-heading`, B = v(null), V = v(null), H = v({}), U = v(!0), W = o(() => j.currentApp === "platform" ? O : j.currentApp), xe = o(() => !ye.includes(j.baseUrl)), Se = o(() => {
-			let e = [...P];
-			return j.activeOrgType !== k && e.splice(1, 0, F), e.filter((e) => !xe.value || !I.includes(e.name) || e.name === "billing" && j.isOfflineInstaller && j.activeOrgType === A);
-		}), G = o(() => (j.apps ?? Se.value).filter((e) => !j.hideCurrent || e.name !== W.value).map((e) => ({
+		}, L = C(), R = `${L}-panel`, z = `${L}-heading`, B = v(null), V = v(null), H = v({}), U = v(!0), W = o(() => k.currentApp === "platform" ? E : k.currentApp), me = o(() => !P.includes(k.baseUrl)), he = o(() => {
+			let e = [...M];
+			return k.activeOrgType !== D && e.splice(1, 0, N), e.filter((e) => !me.value || !F.includes(e.name) || e.name === "billing" && k.isOfflineInstaller && k.activeOrgType === O);
+		}), G = o(() => (k.apps ?? he.value).filter((e) => !k.hideCurrent || e.name !== W.value).map((e) => ({
 			...e,
-			url: e.url ?? Ce(e)
+			url: e.url ?? ge(e)
 		})));
-		function Ce(e) {
-			return j.baseUrl.includes("bb.test") ? `http://bb.test:${e.port}/${e.name}/` : j.baseUrl.includes("localhost") ? `http://localhost:${e.port}/${e.name}/` : `${j.baseUrl}/${e.name}/`;
+		function ge(e) {
+			return k.baseUrl.includes("bb.test") ? `http://bb.test:${e.port}/${e.name}/` : k.baseUrl.includes("localhost") ? `http://localhost:${e.port}/${e.name}/` : `${k.baseUrl}/${e.name}/`;
 		}
 		function K(e) {
 			return e.name === W.value;
@@ -154,7 +148,7 @@ var ge = {
 		function J() {
 			return [...V.value?.querySelectorAll("[data-app-tile]") ?? []];
 		}
-		function we(e) {
+		function _e(e) {
 			let t = e[0]?.offsetTop, n = e.filter((e) => e.offsetTop === t).length;
 			return Math.max(n, 1);
 		}
@@ -165,7 +159,7 @@ var ge = {
 		function X() {
 			let t = q();
 			if (!t || !V.value) return;
-			let n = t.getBoundingClientRect(), r = e(), { offsetWidth: i, offsetHeight: a } = V.value, o = r.bottom - n.bottom - 6 - 8, s = n.top - r.top - 6 - 8, c = o < a && s > o, l = (j.align === "end" ? n.right - i : n.left) - r.left;
+			let n = t.getBoundingClientRect(), r = e(), { offsetWidth: i, offsetHeight: a } = V.value, o = r.bottom - n.bottom - 6 - 8, s = n.top - r.top - 6 - 8, c = o < a && s > o, l = (k.align === "end" ? n.right - i : n.left) - r.left;
 			U.value = !c, H.value = {
 				[c ? "bottom" : "top"]: `${c ? r.bottom - n.top + 6 : n.bottom + 6 - r.top}px`,
 				left: `${Math.max(8, Math.min(l, r.width - i - 8))}px`,
@@ -173,35 +167,35 @@ var ge = {
 			};
 		}
 		function Z(e = !0) {
-			M.value && (M.value = !1, e && q()?.focus());
+			A.value && (A.value = !1, e && q()?.focus());
 		}
-		function Te() {
-			M.value ? Z() : M.value = !0;
+		function ve() {
+			A.value ? Z() : A.value = !0;
 		}
-		function Ee() {
-			let e = [`gorg=${encodeURIComponent(j.activeOrganization)}`, "path=/"];
-			j.rootDomain && e.push(`domain=${j.rootDomain}`), document.cookie = e.join("; ");
+		function ye() {
+			let e = [`gorg=${encodeURIComponent(k.activeOrganization)}`, "path=/"];
+			k.rootDomain && e.push(`domain=${k.rootDomain}`), document.cookie = e.join("; ");
 		}
-		function De(e) {
-			e.name === "grafana" && Ee(), N("select", e);
+		function be(e) {
+			e.name === "grafana" && ye(), j("select", e);
 		}
-		function Oe(e) {
-			e.key !== "ArrowDown" || M.value || (e.preventDefault(), M.value = !0);
+		function xe(e) {
+			e.key !== "ArrowDown" || A.value || (e.preventDefault(), A.value = !0);
 		}
-		function ke(e) {
-			let t = J(), n = t.indexOf(document.activeElement), r = we(t), i = {
+		function Se(e) {
+			let t = J(), n = t.indexOf(document.activeElement), r = _e(t), i = {
 				ArrowRight: 1,
 				ArrowLeft: -1,
 				ArrowDown: r,
 				ArrowUp: -r
 			};
-			e.key in i && n >= 0 ? (e.preventDefault(), Y(n + i[e.key])) : e.key === "Home" || e.key === "End" ? (e.preventDefault(), Y(e.key === "Home" ? 0 : t.length - 1)) : e.key === "Escape" ? (e.preventDefault(), Z()) : e.key === "Tab" && Ae(e);
+			e.key in i && n >= 0 ? (e.preventDefault(), Y(n + i[e.key])) : e.key === "Home" || e.key === "End" ? (e.preventDefault(), Y(e.key === "Home" ? 0 : t.length - 1)) : e.key === "Escape" ? (e.preventDefault(), Z()) : e.key === "Tab" && Ce(e);
 		}
-		function Ae(e) {
+		function Ce(e) {
 			let t = [...V.value?.querySelectorAll("a[href], button:not([disabled])") ?? []], n = t[0], r = t[t.length - 1];
 			e.shiftKey && document.activeElement === n ? (e.preventDefault(), Z()) : !e.shiftKey && document.activeElement === r && Z();
 		}
-		function je(e) {
+		function we(e) {
 			let t = e.target;
 			q()?.contains(t) || V.value?.contains(t) || Z(!1);
 		}
@@ -210,27 +204,27 @@ var ge = {
 		}
 		function $(e) {
 			let t = e ? "addEventListener" : "removeEventListener";
-			document[t]("pointerdown", je, !0), window[t]("scroll", Q, !0), window[t]("resize", Q);
+			document[t]("pointerdown", we, !0), window[t]("scroll", Q, !0), window[t]("resize", Q);
 		}
-		return ae(M, async (e) => {
+		return T(A, async (e) => {
 			if ($(e), !e) return;
 			await m(), X();
 			let t = J(), n = G.value.findIndex(K);
 			Y(n >= 0 && t[n] ? n : 0);
-		}), ee(() => $(!1)), (e, o) => (_(), l("div", ge, [d(n, {
+		}), g(() => $(!1)), (e, o) => (_(), l("div", ae, [d(n, {
 			ref_key: "trigger",
 			ref: B,
 			label: f.label,
-			icon: x(de),
+			icon: S(ie),
 			"icon-only": "",
 			"aria-haspopup": "dialog",
-			"aria-expanded": M.value,
-			"aria-controls": M.value ? R : void 0,
-			class: h(M.value && "bg-surface-sunken text-heading"),
+			"aria-expanded": A.value,
+			"aria-controls": A.value ? R : void 0,
+			class: h(A.value && "bg-surface-sunken text-heading"),
 			"data-ac-ds": "",
 			"data-testid": "ac-app-switcher-trigger",
-			onClick: Te,
-			onKeydown: Oe
+			onClick: ve,
+			onKeydown: xe
 		}, null, 8, [
 			"label",
 			"icon",
@@ -243,7 +237,7 @@ var ge = {
 			"leave-active-class": "transition duration-100 ease-in",
 			"leave-to-class": "opacity-0"
 		}, {
-			default: oe(() => [M.value ? (_(), l("div", {
+			default: ne(() => [A.value ? (_(), l("div", {
 				key: 0,
 				id: R,
 				ref_key: "panel",
@@ -251,16 +245,16 @@ var ge = {
 				role: "dialog",
 				"aria-labelledby": z,
 				class: h(["ac-scrollbar fixed z-[90] flex w-[calc(340px*var(--ac-scale))] max-w-[calc(100vw-16px)] flex-col rounded-14 border border-border bg-surface p-2 shadow-lg", U.value ? "origin-top-right" : "origin-bottom-right"]),
-				style: g(H.value),
+				style: ee(H.value),
 				"data-ac-ds": "",
 				"data-testid": "ac-app-switcher-panel",
-				onKeydown: ke
+				onKeydown: Se
 			}, [
 				u("p", {
 					id: z,
 					class: "px-3 pt-2 pb-2 text-sm font-semibold tracking-[0.08em] text-muted uppercase"
-				}, b(f.label), 1),
-				u("ul", _e, [(_(!0), l(r, null, te(G.value, (e) => (_(), l("li", { key: e.name }, [u("a", {
+				}, x(f.label), 1),
+				u("ul", oe, [(_(!0), l(r, null, y(G.value, (e) => (_(), l("li", { key: e.name }, [u("a", {
 					href: e.url,
 					"data-app-tile": "",
 					"aria-current": K(e) ? "page" : void 0,
@@ -268,37 +262,37 @@ var ge = {
 					class: "group relative flex h-full flex-col items-center gap-2 rounded-8 px-1.5 pt-3 pb-2.5 text-center no-underline outline-none transition-colors duration-200 hover:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset aria-[current=page]:bg-accent",
 					"data-ac-ds": "",
 					"data-testid": "ac-app-switcher-app",
-					onClick: (t) => De(e)
+					onClick: (t) => be(e)
 				}, [
 					u("span", {
-						class: h(["relative inline-flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-10 ring-1 transition-transform duration-200 ring-inset motion-safe:group-hover:-translate-y-px", e.iconUrl || e.name === O && !e.icon ? "bg-surface ring-border" : be[e.color ?? "slate"]]),
+						class: h(["relative inline-flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-10 ring-1 transition-transform duration-200 ring-inset motion-safe:group-hover:-translate-y-px", e.iconUrl || e.name === E && !e.icon ? "bg-surface ring-border" : I[e.color ?? "slate"]]),
 						"aria-hidden": "true"
 					}, [e.iconUrl ? (_(), l("img", {
 						key: 0,
 						src: e.iconUrl,
 						alt: "",
 						class: "size-7 object-contain"
-					}, null, 8, S)) : e.icon ? (_(), s(y(e.icon), {
+					}, null, 8, ce)) : e.icon ? (_(), s(te(e.icon), {
 						key: 1,
 						class: "size-5"
-					})) : e.name === O ? (_(), s(t, {
+					})) : e.name === E ? (_(), s(t, {
 						key: 2,
 						variant: "mark",
 						size: 28,
 						label: ""
-					})) : (_(), l("span", C, b(e.title.charAt(0)), 1))], 2),
-					u("span", w, b(e.title), 1),
-					e.subtitle ? (_(), l("span", T, b(e.subtitle), 1)) : c("", !0),
-					K(e) ? (_(), l("span", E, [d(x(ce), {
+					})) : (_(), l("span", le, x(e.title.charAt(0)), 1))], 2),
+					u("span", ue, x(e.title), 1),
+					e.subtitle ? (_(), l("span", de, x(e.subtitle), 1)) : c("", !0),
+					K(e) ? (_(), l("span", fe, [d(S(re), {
 						class: "size-2.5",
 						"stroke-width": 3
 					})])) : c("", !0)
-				], 8, ve)]))), 128))]),
-				e.$slots.footer ? (_(), l("div", D, [ne(e.$slots, "footer", { close: Z })])) : c("", !0)
+				], 8, se)]))), 128))]),
+				e.$slots.footer ? (_(), l("div", pe, [b(e.$slots, "footer", { close: Z })])) : c("", !0)
 			], 38)) : c("", !0)]),
 			_: 3
 		})]))]));
 	}
 });
 //#endregion
-export { j as default };
+export { k as default };

package/dist/lib/theme.css

@@ -615,15 +615,24 @@
   padding-inline: calc(var(--spacing) * 4);
 }
 
+/* Thin scrollbar, hidden until the pointer is over the area or focus is inside it (cloud-ui's `custom-scrollbar`). */
 @utility ac-scrollbar {
   overflow: auto;
   scrollbar-width: thin;
-  scrollbar-color: rgb(176 176 176 / 0.55) transparent;
+  scrollbar-color: transparent transparent;
+  &:hover, &:focus-within { scrollbar-color: rgb(176 176 176 / 0.55) transparent; }
   &::-webkit-scrollbar { width: 4px; height: 4px; }
-  &::-webkit-scrollbar-thumb { background-color: #b0b0b0; border-radius: 9999px; }
+  &::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 9999px; }
+  &:hover::-webkit-scrollbar-thumb, &:focus-within::-webkit-scrollbar-thumb { background-color: #b0b0b0; }
   &::-webkit-scrollbar-track { background: transparent; }
 }
 
+/* With `ac-scrollbar`: keeps the thumb visible all the time (cloud-ui's `custom-scrollbar-true`). */
+@utility ac-scrollbar-visible {
+  &.ac-scrollbar { scrollbar-color: rgb(176 176 176 / 0.55) transparent; }
+  &.ac-scrollbar::-webkit-scrollbar-thumb { background-color: #b0b0b0; }
+}
+
 /* Keyframes for AcSkeleton's shimmer and AcProgress's indeterminate bar; kept here so the library ships no extra CSS file. */
 @keyframes ac-skeleton-shimmer {
   from { background-position: 150% 0; }

package/package.json

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