@ac-design/design-system 2.4.0 → 2.4.1

package/dist/lib/compat.css

@@ -2204,12 +2204,6 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       background-color: color-mix(in oklab, var(--color-black) 50%, transparent) !important;
     }
   }
-  .bg-black\/80:where([data-ac-ds], [data-ac-ds] *) {
-    background-color: color-mix(in srgb, hsl(0 0% 0%) 80%, transparent) !important;
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 80%, transparent) !important;
-    }
-  }
   .bg-body:where([data-ac-ds], [data-ac-ds] *) {
     background-color: var(--color-body) !important;
   }

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

@@ -1,4 +1,4 @@
-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, normalizeClass as c, openBlock as l, renderSlot as u, resolveComponent as d, resolveDynamicComponent as f, toDisplayString as p, unref as m, withCtx as h } from "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, mergeProps as c, normalizeClass as l, openBlock as u, renderSlot as d, resolveComponent as f, resolveDynamicComponent as p, toDisplayString as m, withCtx as h } from "vue";
 //#region src/lib/components/AcDropdownItem.vue?vue&type=script&setup=true&lang.ts
 var g = { class: "min-w-0 flex-1" }, _ = {
 	key: 0,
@@ -24,58 +24,55 @@ var g = { class: "min-w-0 flex-1" }, _ = {
 	},
 	emits: ["click"],
 	setup(o, { emit: v }) {
-		let y = o, b = v, x = s("ac-dropdown", null), S = y.to ? d("RouterLink") : null, C = e(() => x?.variant?.value === "panel"), w = e(() => y.danger ? "text-danger-strong focus:bg-danger/10" : C.value ? "text-heading focus:bg-primary/10" : "text-heading focus:bg-surface-sunken"), T = e(() => y.disabled ? "button" : y.to && S ? S : y.href ? "a" : "button");
-		function E(e) {
+		let y = o, b = v, x = s("ac-dropdown", null), S = y.to ? f("RouterLink") : null, C = e(() => x?.variant?.value === "panel"), w = e(() => y.danger ? "text-danger-strong focus:bg-danger/10" : C.value ? "text-heading focus:bg-primary/10" : "text-heading focus:bg-surface-sunken"), T = e(() => y.disabled ? "button" : y.to && S ? S : y.href ? "a" : "button"), E = e(() => T.value === "button" ? {
+			type: "button",
+			disabled: y.disabled || void 0
+		} : T.value === "a" ? {
+			href: y.href,
+			target: y.target
+		} : { to: y.to });
+		function D(e) {
 			if (y.disabled) {
 				e.preventDefault();
 				return;
 			}
 			b("click", e), x?.close();
 		}
-		function D(e) {
+		function O(e) {
 			if (y.disabled || e.pointerType === "touch") return;
 			let t = e.currentTarget;
 			document.activeElement !== t && t.focus({ preventScroll: !0 });
 		}
-		function O(e) {
+		function k(e) {
 			e.pointerType !== "touch" && document.activeElement === e.currentTarget && x?.focusMenu();
 		}
-		return (e, s) => (l(), t(f(T.value), {
+		return (e, s) => (u(), t(p(T.value), c({
 			role: "menuitem",
-			tabindex: "-1",
-			type: T.value === "button" ? "button" : void 0,
-			href: T.value === "a" ? o.href : void 0,
-			target: T.value === "a" ? o.target : void 0,
-			to: T.value === m(S) ? o.to : void 0,
-			disabled: T.value === "button" && o.disabled || void 0,
+			tabindex: "-1"
+		}, E.value, {
 			"aria-disabled": o.disabled || void 0,
 			"data-ac-label": o.label || void 0,
-			class: c(["flex w-full shrink-0 cursor-pointer gap-2 text-left text-base no-underline outline-none select-none transition-colors duration-150 disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none", [C.value ? "items-center rounded-10 px-5 py-2.5" : "items-start px-4 py-2", w.value]]),
+			class: ["flex w-full shrink-0 cursor-pointer gap-2 text-left text-base no-underline outline-none select-none transition-colors duration-150 disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none", [C.value ? "items-center rounded-10 px-5 py-2.5" : "items-start px-4 py-2", w.value]],
 			"data-ac-ds": "",
 			"data-testid": "ac-dropdown-item",
-			onClick: E,
-			onPointermove: D,
-			onPointerleave: O
-		}, {
+			onClick: D,
+			onPointermove: O,
+			onPointerleave: k
+		}), {
 			default: h(() => [
-				o.icon || e.$slots.icon ? (l(), r("span", {
+				o.icon || e.$slots.icon ? (u(), r("span", {
 					key: 0,
-					class: c(["inline-flex shrink-0", C.value ? ["[&_svg]:size-5", o.danger ? "text-current" : "text-muted"] : "mt-0.5 [&_svg]:size-4"]),
+					class: l(["inline-flex shrink-0", C.value ? ["[&_svg]:size-5", o.danger ? "text-current" : "text-muted"] : "mt-0.5 [&_svg]:size-4"]),
 					"aria-hidden": "true"
-				}, [u(e.$slots, "icon", {}, () => [(l(), t(f(o.icon)))])], 2)) : n("", !0),
-				i("span", g, [i("span", { class: c(["block truncate", C.value && "font-medium"]) }, [a(p(o.label), 1), u(e.$slots, "default")], 2), o.description ? (l(), r("span", _, p(o.description), 1)) : n("", !0)]),
-				o.shortcut ? (l(), r("kbd", {
+				}, [d(e.$slots, "icon", {}, () => [(u(), t(p(o.icon)))])], 2)) : n("", !0),
+				i("span", g, [i("span", { class: l(["block truncate", C.value && "font-medium"]) }, [a(m(o.label), 1), d(e.$slots, "default")], 2), o.description ? (u(), r("span", _, m(o.description), 1)) : n("", !0)]),
+				o.shortcut ? (u(), r("kbd", {
 					key: 1,
-					class: c(["shrink-0 font-sans text-xs text-muted tabular-nums", !C.value && "mt-0.5"])
-				}, p(o.shortcut), 3)) : n("", !0)
+					class: l(["shrink-0 font-sans text-xs text-muted tabular-nums", !C.value && "mt-0.5"])
+				}, m(o.shortcut), 3)) : n("", !0)
 			]),
 			_: 3
-		}, 40, [
-			"type",
-			"href",
-			"target",
-			"to",
-			"disabled",
+		}, 16, [
 			"aria-disabled",
 			"data-ac-label",
 			"class"

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

@@ -5,7 +5,7 @@ export interface Props {
     description?: string;
     /** Width: `xsmall` 384px, `small` 448px, `normal` 576px, `medium` 800px, `large` 1000px, `xlarge` 1152px, `full` viewport minus 64px. */
     size?: "xsmall" | "small" | "normal" | "medium" | "large" | "xlarge" | "full";
-    /** `framed` has a header and footer bar and a close button; `plain` is one padded card (title, body, buttons) on a lighter backdrop, as cloud-ui's confirm dialogs. */
+    /** `framed` has a header and footer bar and a close button; `plain` is one padded card (title, body, buttons), as cloud-ui's confirm dialogs. */
     variant?: "framed" | "plain";
     /** Shows the close button and allows Escape to close. Turn off while a required action runs. */
     closable?: boolean;

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

@@ -84,8 +84,8 @@ var w = [
 				let e = window.innerWidth - document.documentElement.clientWidth;
 				t.style.overflow = "hidden";
 				let n = getComputedStyle(document.documentElement).scrollbarGutter.includes("stable");
-				e > 0 && !n && (t.style.paddingRight = `${e}px`);
-			} else !e && n <= 0 && (t.style.overflow = "", t.style.paddingRight = "");
+				e > 0 && !n && (t.style.paddingRight = `${e}px`), n && t.getBoundingClientRect().height >= window.innerHeight && (document.documentElement.style.backgroundColor = `color-mix(in srgb, ${getComputedStyle(t).backgroundColor} 50%, black)`);
+			} else !e && n <= 0 && (t.style.overflow = "", t.style.paddingRight = "", document.documentElement.style.backgroundColor = "");
 		}
 		return b(V, async (e, t) => {
 			if (e) {
@@ -103,7 +103,7 @@ var w = [
 		}, {
 			default: x(() => [V.value ? (p(), a("div", {
 				key: 0,
-				class: d(["fixed inset-0 z-[80] overflow-y-auto", c.variant === "plain" ? "bg-black/50" : "bg-black/80"]),
+				class: "fixed inset-0 z-[80] overflow-y-auto bg-black/50",
 				"data-ac-ds": "",
 				"data-testid": "ac-modal",
 				onKeydown: Z,
@@ -160,7 +160,7 @@ var w = [
 					class: d(["ac-scrollbar min-h-0 flex-1 p-6", c.bodyClass])
 				}, [h(l.$slots, "default")], 2),
 				!c.hideFooter && (l.$slots.footer || l.$slots["footer-left"]) ? (p(), a("footer", I, [o("div", L, [h(l.$slots, "footer-left")]), o("div", R, [h(l.$slots, "footer")])])) : i("", !0)
-			], 64))], 10, w)], 32)], 34)) : i("", !0)]),
+			], 64))], 10, w)], 32)], 32)) : i("", !0)]),
 			_: 3
 		})]));
 	}

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

@@ -61,8 +61,8 @@ var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 ite
 				let e = window.innerWidth - document.documentElement.clientWidth;
 				t.style.overflow = "hidden";
 				let n = getComputedStyle(document.documentElement).scrollbarGutter.includes("stable");
-				e > 0 && !n && (t.style.paddingRight = `${e}px`);
-			} else !e && n <= 0 && (t.style.overflow = "", t.style.paddingRight = "");
+				e > 0 && !n && (t.style.paddingRight = `${e}px`), n && t.getBoundingClientRect().height >= window.innerHeight && (document.documentElement.style.backgroundColor = `color-mix(in srgb, ${getComputedStyle(t).backgroundColor} 50%, black)`);
+			} else !e && n <= 0 && (t.style.overflow = "", t.style.paddingRight = "", document.documentElement.style.backgroundColor = "");
 		}
 		return y(F, async (e, t) => {
 			if (e) {

package/package.json

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