@ac-design/design-system 2.2.1 → 2.3.0

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

@@ -1,7 +1,7 @@
 import e from "./AcSpinner.js";
 import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, defineComponent as a, normalizeClass as o, openBlock as s, renderSlot as c, resolveDynamicComponent as l, toDisplayString as u, withCtx as d } from "vue";
 //#region src/lib/components/AcButton.vue?vue&type=script&setup=true&lang.ts
-var f = /*@__PURE__*/ a({
+var f = "[:where(&)_svg]:size-4", p = /*@__PURE__*/ a({
 	__name: "AcButton",
 	props: {
 		title: { default: "" },
@@ -25,45 +25,68 @@ var f = /*@__PURE__*/ a({
 		rounded: {
 			type: Boolean,
 			default: !1
-		}
+		},
+		boxed: {
+			type: Boolean,
+			default: !1
+		},
+		hint: { default: void 0 }
 	},
 	emits: ["click"],
-	setup(a, { emit: f }) {
-		let p = a, m = f, h = {
+	setup(a, { emit: p }) {
+		let m = a, h = p, g = {
 			primary: {
 				solid: "border-transparent bg-primary text-white shadow-button hover:bg-primary-hover hover:shadow-sm",
 				light: "border-transparent bg-primary/12 text-primary-strong hover:bg-primary/18",
-				outlined: "border-primary/35 bg-background text-primary-strong hover:bg-primary/10"
+				subtle: "border-transparent bg-primary/6 text-primary-strong hover:bg-primary/12",
+				outlined: "border-primary/35 bg-background text-primary-strong hover:bg-primary/10",
+				ghost: "border-transparent bg-transparent text-primary-strong hover:bg-primary/10"
 			},
 			info: {
 				solid: "border-transparent bg-info text-white shadow-button hover:bg-info-hover hover:shadow-sm",
 				light: "border-transparent bg-info/12 text-info-strong hover:bg-info/18",
-				outlined: "border-info/40 bg-background text-info-strong hover:bg-info/10"
+				subtle: "border-transparent bg-info/6 text-info-strong hover:bg-info/12",
+				outlined: "border-info/40 bg-background text-info-strong hover:bg-info/10",
+				ghost: "border-transparent bg-transparent text-info-strong hover:bg-info/10"
 			},
 			success: {
 				solid: "border-transparent bg-success text-white shadow-button hover:bg-success-hover hover:shadow-sm",
 				light: "border-transparent bg-success/12 text-success-strong hover:bg-success/18",
-				outlined: "border-success/40 bg-background text-success-strong hover:bg-success/10"
+				subtle: "border-transparent bg-success/6 text-success-strong hover:bg-success/12",
+				outlined: "border-success/40 bg-background text-success-strong hover:bg-success/10",
+				ghost: "border-transparent bg-transparent text-success-strong hover:bg-success/10"
 			},
 			warning: {
 				solid: "border-transparent bg-warning text-on-warning shadow-button hover:bg-warning-hover hover:shadow-sm",
 				light: "border-transparent bg-warning/12 text-warning-strong hover:bg-warning/18",
-				outlined: "border-warning/45 bg-background text-warning-strong hover:bg-warning/10"
+				subtle: "border-transparent bg-warning/6 text-warning-strong hover:bg-warning/12",
+				outlined: "border-warning/45 bg-background text-warning-strong hover:bg-warning/10",
+				ghost: "border-transparent bg-transparent text-warning-strong hover:bg-warning/10"
 			},
 			danger: {
 				solid: "border-transparent bg-red-50 text-white shadow-button hover:bg-red-40 hover:shadow-sm",
 				light: "border-transparent bg-danger/12 text-danger-strong hover:bg-danger/18",
-				outlined: "border-danger/40 bg-background text-danger-strong hover:bg-danger/10"
+				subtle: "border-transparent bg-danger/6 text-danger-strong hover:bg-danger/12",
+				outlined: "border-danger/40 bg-background text-danger-strong hover:bg-danger/10",
+				ghost: "border-transparent bg-transparent text-danger-strong hover:bg-danger/10"
+			},
+			neutral: {
+				solid: "border-transparent bg-body text-background shadow-button hover:bg-body/90 hover:shadow-sm",
+				light: "border-transparent bg-surface-sunken text-heading hover:bg-accent-hover",
+				subtle: "border-transparent bg-surface-sunken/70 text-heading hover:bg-surface-sunken",
+				outlined: "border-border bg-background text-heading hover:bg-surface-sunken/70",
+				ghost: "border-transparent bg-transparent text-heading hover:bg-surface-sunken"
 			}
-		}, g = {
+		}, _ = {
 			primary: "text-primary-strong",
 			info: "text-info-strong",
 			success: "text-success-strong",
 			warning: "text-warning-strong",
 			danger: "text-danger-strong",
+			neutral: "text-muted hover:text-heading",
 			white: "text-muted hover:text-heading",
 			ghost: "text-muted hover:text-heading"
-		}, _ = t(() => p.variant === "link"), v = t(() => p.variant === "link" ? g[p.color] : p.color === "white" ? "border-border bg-background text-heading hover:bg-surface-sunken/70" : p.color === "ghost" ? "border-transparent bg-transparent text-heading hover:bg-surface-sunken" : h[p.color][p.variant]), y = {
+		}, v = t(() => m.variant === "link"), y = t(() => v.value && !m.boxed), b = t(() => m.variant === "link" ? _[m.color] : m.color === "white" ? g.neutral.outlined : m.color === "ghost" ? g.neutral.ghost : g[m.color][m.variant]), x = {
 			xs: {
 				base: "h-7 gap-1.5 px-2 text-xs",
 				icon: "size-7 text-xs"
@@ -79,22 +102,27 @@ var f = /*@__PURE__*/ a({
 			medium: {
 				base: "h-10.5 gap-2 px-5 text-base md:h-11 md:text-lg",
 				icon: "size-11 text-lg"
+			},
+			xlarge: {
+				base: "h-12 gap-2 px-6 text-lg md:h-13 md:text-xl",
+				icon: "size-14 text-xl"
 			}
-		}, b = {
-			xs: "gap-1 text-xs [&_svg]:size-3.5",
-			small: "gap-1 text-base [&_svg]:size-4",
-			normal: "gap-1 text-base [&_svg]:size-4",
-			medium: "gap-1 text-base md:text-lg [&_svg]:size-4"
-		}, x = t(() => {
-			if (_.value) return [b[p.size], p.rounded ? "rounded-full" : "rounded-4"];
-			let e = y[p.size];
-			return p.iconOnly ? [`${e.icon} rounded-full`, "[&_svg]:size-4"] : [
+		}, S = {
+			xs: "gap-1 text-xs [:where(&)_svg]:size-3.5",
+			small: `gap-1 text-base ${f}`,
+			normal: `gap-1 text-base ${f}`,
+			medium: `gap-1 text-base md:text-lg ${f}`,
+			xlarge: `gap-1 text-lg md:text-xl ${f}`
+		}, C = t(() => {
+			if (y.value) return [S[m.size], m.rounded ? "rounded-full" : "rounded-4"];
+			let e = x[m.size];
+			return m.iconOnly ? [`${e.icon} rounded-full`, f] : [
 				e.base,
-				p.rounded ? "rounded-full" : "rounded-10",
-				"[&_svg]:size-4"
+				m.rounded ? "rounded-full" : "rounded-10",
+				f
 			];
-		}), S = t(() => _.value ? "group/ac-button underline-offset-4 hover:underline" : "justify-center border active:translate-y-px disabled:shadow-none disabled:active:translate-y-0 motion-reduce:active:translate-y-0"), C = (e) => {
-			!p.disabled && !p.loading && m("click", e);
+		}), w = t(() => y.value ? "group/ac-button underline-offset-4 hover:underline" : v.value ? "group/ac-button justify-center border border-transparent underline-offset-4 hover:underline" : "justify-center border active:translate-y-px disabled:shadow-none disabled:active:translate-y-0 motion-reduce:active:translate-y-0"), T = (e) => {
+			!m.disabled && !m.loading && h("click", e);
 		};
 		return (t, f) => (s(), n(l(a.href ? "a" : "button"), {
 			href: a.href && !a.disabled ? a.href : void 0,
@@ -102,25 +130,26 @@ var f = /*@__PURE__*/ a({
 			disabled: !a.href && a.disabled || void 0,
 			"aria-disabled": a.href && a.disabled || void 0,
 			"aria-busy": a.loading || void 0,
+			title: a.hint || void 0,
 			class: o(["relative inline-flex cursor-pointer items-center font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,transform] duration-200 select-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50", [
-				S.value,
-				v.value,
+				w.value,
+				b.value,
 				"focus-visible:ring-ring",
-				x.value,
+				C.value,
 				a.loading && "pointer-events-none"
 			]]),
 			"data-ac-ds": "",
 			"data-testid": "ac-button",
-			onClick: C
+			onClick: T
 		}, {
 			default: d(() => [
 				a.loading ? (s(), n(e, {
 					key: 0,
-					class: o(!a.iconOnly && !_.value && "-ml-0.5"),
+					class: o(!a.iconOnly && !y.value && "-ml-0.5"),
 					label: ""
 				}, null, 8, ["class"])) : t.$slots.icon ? (s(), i("span", {
 					key: 1,
-					class: o([!a.iconOnly && !_.value && "-ml-0.5", "inline-flex shrink-0 items-center justify-center"]),
+					class: o([!a.iconOnly && !y.value && "-ml-0.5", "inline-flex shrink-0 items-center justify-center"]),
 					"aria-hidden": "true"
 				}, [c(t.$slots, "icon")], 2)) : r("", !0),
 				a.title ? (s(), i("span", {
@@ -130,7 +159,7 @@ var f = /*@__PURE__*/ a({
 				a.iconOnly && a.loading ? r("", !0) : c(t.$slots, "default", {}, void 0, void 0, 3),
 				t.$slots["icon-right"] ? (s(), i("span", {
 					key: 4,
-					class: o(["inline-flex shrink-0 items-center justify-center", _.value ? "transition-transform duration-200 group-hover/ac-button:translate-x-0.5 motion-reduce:transition-none motion-reduce:group-hover/ac-button:translate-x-0" : "-mr-0.5"]),
+					class: o(["inline-flex shrink-0 items-center justify-center", v.value ? "transition-transform duration-200 group-hover/ac-button:translate-x-0.5 motion-reduce:transition-none motion-reduce:group-hover/ac-button:translate-x-0" : "-mr-0.5"]),
 					"aria-hidden": "true"
 				}, [c(t.$slots, "icon-right")], 2)) : r("", !0)
 			]),
@@ -141,9 +170,10 @@ var f = /*@__PURE__*/ a({
 			"disabled",
 			"aria-disabled",
 			"aria-busy",
+			"title",
 			"class"
 		]));
 	}
 });
 //#endregion
-export { f as default };
+export { p as default };

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

@@ -1,6 +1,6 @@
 import type { Component } from "vue";
 export interface Props {
-    /** Header title. The header renders with a title, an `icon`, or the `actions` or `badges` slot. */
+    /** Header title. The header renders with a title, a description, an `icon`, or the `actions`, `badges` or `description` slot. */
     title?: string;
     /** Small line under the title. */
     subtitle?: string;
@@ -16,8 +16,12 @@ export interface Props {
     variant?: "default" | "muted" | "dashed" | "danger";
     /** Tints the header icon tile, the `accent` wash and the watermark: `primary` (green), `blue`, `violet`, `red` or `amber`. */
     color?: "primary" | "blue" | "violet" | "red" | "amber";
-    /** `normal` header with a 16px title and a divider; `small` a compact header with a 28px icon tile, a 14px title and no divider, like cloud-ui's section cards. */
-    headerSize?: "normal" | "small";
+    /** `normal` header with a 16px title and a divider; `small` a compact header with a 28px icon tile, a 14px title and no divider, like cloud-ui's section cards; `bar` a compact single-line bar (10px top and bottom, centred) with a divider over the body, for dense detail pages (cloud-ui's `headerSize="sm"`). */
+    headerSize?: "normal" | "small" | "bar";
+    /** Heading level of the title, so the card fits the page outline, e.g. `h2` for a top-level section. */
+    titleTag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    /** A plain card: no header or footer, the padding on the card itself, and the default slot straight inside it, so classes on the card such as `flex items-center`, `grid`, `space-y-4` or `divide-y` lay out your content. Padding comes from `padding` (24px by default; `padded=false` removes it); a background class on the card replaces the variant's fill. */
+    bare?: boolean;
     /** Hover look for a card that acts as a link or button: a pointer, a primary-tinted edge and a light wash. */
     hoverable?: boolean;
     /** Rests the card on a faint shadow that deepens on hover; with `hoverable` the card also lifts 2px. */
@@ -32,7 +36,7 @@ type __VLS_Slots = {
     default?: () => unknown;
     /** Buttons on the right of the header. */
     actions?: () => unknown;
-    /** Replaces the `icon` tile's content, e.g. a logo image. */
+    /** Replaces the `icon` tile's content, e.g. a logo image. An unsized SVG icon here is 16px (14px with `header-size="small"`), and with `accent` it's also the watermark. */
     icon?: () => unknown;
     /** Replaces the line under the title, e.g. text with a link. */
     description?: () => unknown;
@@ -50,7 +54,9 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     subtitle: string;
     padded: boolean;
     padding: "none" | "xs" | "sm" | "md" | "lg";
-    headerSize: "normal" | "small";
+    headerSize: "normal" | "small" | "bar";
+    titleTag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    bare: boolean;
     hoverable: boolean;
     shadow: boolean;
     accent: boolean;

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

@@ -1,19 +1,19 @@
-import { Comment as e, Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, normalizeClass as c, openBlock as l, renderSlot as u, resolveDynamicComponent as d, toDisplayString as f, useSlots as p, withCtx as m } from "vue";
+import { Comment as e, Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, renderSlot as d, resolveDynamicComponent as f, toDisplayString as p, useSlots as m, withCtx as h } from "vue";
 //#region src/lib/components/AcCard.vue?vue&type=script&setup=true&lang.ts
-var h = {
+var g = {
 	key: 0,
 	class: "pointer-events-none absolute inset-0 -z-10 overflow-hidden rounded-[inherit]",
 	"aria-hidden": "true"
-}, g = { class: "flex min-w-0 flex-1 items-center gap-3" }, _ = { class: "min-w-0 flex-1" }, v = { class: "flex flex-wrap items-center gap-2" }, y = {
+}, _ = { class: "min-w-0 flex-1" }, v = {
 	key: 0,
 	class: "mt-0.5 text-xs leading-4 text-muted"
-}, b = {
+}, y = {
 	key: 1,
 	class: "mt-0.5 text-xs leading-4 text-muted"
-}, x = {
+}, b = {
 	key: 1,
 	class: "flex shrink-0 flex-wrap items-center gap-2"
-}, S = /*@__PURE__*/ s({
+}, x = /*@__PURE__*/ c({
 	__name: "AcCard",
 	props: {
 		title: { default: "" },
@@ -28,6 +28,11 @@ var h = {
 		variant: { default: "default" },
 		color: { default: "primary" },
 		headerSize: { default: "normal" },
+		titleTag: { default: "h3" },
+		bare: {
+			type: Boolean,
+			default: !1
+		},
 		hoverable: {
 			type: Boolean,
 			default: !1
@@ -42,12 +47,17 @@ var h = {
 		},
 		as: { default: "section" }
 	},
-	setup(s) {
-		let S = s, C = p(), w = {
+	setup(c) {
+		let x = c, S = m(), C = {
 			default: "border-border bg-surface",
 			muted: "border-border bg-surface-sunken/40",
 			dashed: "border-dashed border-border bg-transparent",
 			danger: "border-danger/30 bg-danger/5"
+		}, w = {
+			default: "border-border [:where(&)]:bg-surface",
+			muted: "border-border [:where(&)]:bg-surface-sunken/40",
+			dashed: "border-dashed border-border [:where(&)]:bg-transparent",
+			danger: "border-danger/30 [:where(&)]:bg-danger/5"
 		}, T = {
 			none: "",
 			xs: "p-3",
@@ -113,77 +123,115 @@ var h = {
 				washSm: "from-warning/[0.07]",
 				watermark: "text-warning/5"
 			}
-		}, A = n(() => S.headerSize === "small"), j = n(() => k[S.color]), M = n(() => S.description || S.subtitle), N = n(() => [
-			w[S.variant],
-			S.as !== "section" && "w-full text-left no-underline outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-			S.hoverable && "cursor-pointer hover:border-primary/30 hover:bg-accent-hover/60",
-			S.shadow && "shadow-xs hover:shadow-card",
-			S.hoverable && S.shadow && "hover:-translate-y-0.5 motion-reduce:hover:translate-y-0"
+		}, A = n(() => x.headerSize === "bar"), j = n(() => x.headerSize === "small" || A.value), M = n(() => k[x.color]), N = n(() => x.description || x.subtitle), P = n(() => [
+			C[x.variant],
+			x.as !== "section" && "w-full text-left no-underline outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+			x.hoverable && "cursor-pointer hover:border-primary/30 hover:bg-accent-hover/60",
+			x.shadow && "shadow-xs hover:shadow-card",
+			x.hoverable && x.shadow && "hover:-translate-y-0.5 motion-reduce:hover:translate-y-0"
 		]);
-		function P() {
-			return !!(S.title || S.icon || C.icon || C.actions || C.badges);
-		}
-		function F(n) {
-			return n.some((n) => n.type === e ? !1 : n.type !== t || F(n.children));
+		function F() {
+			return !!(x.title || N.value || x.icon || S.icon || S.actions || S.badges || S.description);
 		}
 		function I() {
-			return F(C.default?.() ?? []);
-		}
-		function L() {
-			let e = I(), t = S.padding;
+			let e = x.padding ?? (x.padded ? "md" : "none"), t = x.as !== "section" && x.as !== "div";
 			return [
+				w[x.variant],
+				T[e],
+				t && "block no-underline outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+				x.hoverable && "cursor-pointer hover:border-primary/30 hover:bg-accent-hover/60",
+				x.shadow && "shadow-xs hover:shadow-card",
+				x.hoverable && x.shadow && "hover:-translate-y-0.5 motion-reduce:hover:translate-y-0"
+			];
+		}
+		function L(n) {
+			return n.some((n) => n.type === e ? !1 : n.type !== t || L(n.children));
+		}
+		function R() {
+			return L(S.default?.() ?? []);
+		}
+		function z() {
+			let e = R(), t = x.padding;
+			return A.value ? [
+				"items-center gap-2.5 px-4 py-2.5",
+				e && "border-b border-border",
+				!e && !S.footer && "rounded-b-[calc(var(--radius-14)-1px)]",
+				x.accent && ["bg-linear-to-r to-transparent", M.value.washSm]
+			] : [
 				t ? [
 					"items-start gap-3",
 					E[t],
 					D[t],
-					!A.value && "border-border/60"
-				] : A.value ? "items-start gap-3 px-5 pt-5" : "items-start gap-3 border-border/60 px-6 pt-5",
+					!j.value && "border-border/60"
+				] : j.value ? "items-start gap-3 px-5 pt-5" : "items-start gap-3 border-border/60 px-6 pt-5",
 				!e && (t ? O[t] : "pb-5"),
-				e && !A.value && "border-b pb-3",
-				!e && !C.footer && "rounded-b-[calc(var(--radius-14)-1px)]",
-				S.accent && (A.value ? ["bg-linear-to-r to-transparent", j.value.washSm] : ["bg-linear-to-br to-transparent", j.value.wash])
+				e && !j.value && "border-b pb-3",
+				!e && !S.footer && "rounded-b-[calc(var(--radius-14)-1px)]",
+				x.accent && (j.value ? ["bg-linear-to-r to-transparent", M.value.washSm] : ["bg-linear-to-br to-transparent", M.value.wash])
 			];
 		}
-		function R() {
-			return S.padding && S.padding !== "none" ? T[S.padding] : S.padded && S.padding !== "none" ? A.value ? "p-5" : "p-6" : [
+		function B() {
+			return x.padding && x.padding !== "none" ? T[x.padding] : x.padded && x.padding !== "none" ? j.value ? "p-5" : "p-6" : [
 				"overflow-hidden",
-				!C.footer && "rounded-b-14",
-				!P() && "rounded-t-14"
+				!S.footer && "rounded-b-14",
+				!F() && "rounded-t-14"
 			];
 		}
-		return (e, t) => (l(), r(d(s.as), {
-			class: c(["flex flex-col rounded-14 border text-body transition-[background-color,border-color,box-shadow,translate] duration-200 ease-out motion-reduce:transition-none", N.value]),
+		return (e, t) => c.bare ? (u(), r(f(c.as), {
+			key: 0,
+			class: l(["rounded-14 border text-body transition-[background-color,border-color,box-shadow,translate] duration-200 ease-out motion-reduce:transition-none", I()]),
 			"data-ac-ds": "",
 			"data-testid": "ac-card"
 		}, {
-			default: m(() => [
-				P() ? (l(), a("header", {
+			default: h(() => [d(e.$slots, "default")]),
+			_: 3
+		}, 8, ["class"])) : (u(), r(f(c.as), {
+			key: 1,
+			class: l(["flex flex-col rounded-14 border text-body transition-[background-color,border-color,box-shadow,translate] duration-200 ease-out motion-reduce:transition-none", P.value]),
+			"data-ac-ds": "",
+			"data-testid": "ac-card"
+		}, {
+			default: h(() => [
+				F() ? (u(), a("header", {
 					key: 0,
-					class: c(["relative isolate flex flex-wrap justify-between rounded-t-[calc(var(--radius-14)-1px)]", L()])
+					class: l(["relative isolate flex flex-wrap justify-between rounded-t-[calc(var(--radius-14)-1px)]", z()])
 				}, [
-					s.accent && s.icon && !A.value ? (l(), a("div", h, [(l(), r(d(s.icon), { class: c(["absolute -top-4 -right-4 size-24", j.value.watermark]) }, null, 8, ["class"]))])) : i("", !0),
-					o("div", g, [s.icon || e.$slots.icon ? (l(), a("span", {
+					c.accent && (c.icon || e.$slots.icon) && !j.value ? (u(), a("div", g, [c.icon ? (u(), r(f(c.icon), {
+						key: 0,
+						class: l(["absolute -top-4 -right-4 size-24", M.value.watermark])
+					}, null, 8, ["class"])) : (u(), a("span", {
+						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", {
 						key: 0,
-						class: c(["flex shrink-0 items-center justify-center", [j.value.tile, A.value ? ["size-7 rounded-8 ring-1 ring-inset", j.value.ring] : ["size-8 rounded-10 border", j.value.border]]]),
+						class: l(["flex shrink-0 items-center justify-center", [
+							M.value.tile,
+							j.value ? ["size-7 rounded-8 ring-1 ring-inset", M.value.ring] : ["size-8 rounded-10 border", M.value.border],
+							c.headerSize === "small" ? "[:where(&)_svg]:size-3.5" : "[:where(&)_svg]:size-4"
+						]]),
 						"aria-hidden": "true"
-					}, [u(e.$slots, "icon", {}, () => [(l(), r(d(s.icon), { class: c(A.value ? "size-3.5" : "size-4") }, null, 8, ["class"]))])], 2)) : i("", !0), o("div", _, [o("div", v, [s.title ? (l(), a("h3", {
+					}, [d(e.$slots, "icon", {}, () => [(u(), r(f(c.icon), { class: l(c.headerSize === "small" ? "size-3.5" : "size-4") }, null, 8, ["class"]))])], 2)) : i("", !0), o("div", _, [o("div", { class: l(["flex flex-wrap items-center", A.value ? "gap-2.5" : "gap-2"]) }, [c.title ? (u(), r(f(c.titleTag), {
 						key: 0,
-						class: c(["truncate font-heading font-semibold tracking-tight text-heading", A.value ? "text-base" : "text-lg leading-tight"])
-					}, f(s.title), 3)) : i("", !0), u(e.$slots, "badges")]), e.$slots.description ? (l(), a("div", y, [u(e.$slots, "description")])) : M.value ? (l(), a("p", b, f(M.value), 1)) : i("", !0)])]),
-					e.$slots.actions ? (l(), a("div", x, [u(e.$slots, "actions")])) : i("", !0)
+						class: l(["truncate font-heading font-semibold tracking-tight text-heading", j.value ? "text-base" : "text-lg leading-tight"])
+					}, {
+						default: h(() => [s(p(c.title), 1)]),
+						_: 1
+					}, 8, ["class"])) : i("", !0), d(e.$slots, "badges")], 2), e.$slots.description ? (u(), a("div", v, [d(e.$slots, "description")])) : N.value ? (u(), a("p", y, p(N.value), 1)) : i("", !0)])], 2),
+					e.$slots.actions ? (u(), a("div", b, [d(e.$slots, "actions")])) : i("", !0)
 				], 2)) : i("", !0),
-				I() ? (l(), a("div", {
+				R() ? (u(), a("div", {
 					key: 1,
-					class: c(["flex-1", R()])
-				}, [u(e.$slots, "default")], 2)) : i("", !0),
-				e.$slots.footer ? (l(), a("footer", {
+					class: l(["flex-1", B()])
+				}, [d(e.$slots, "default")], 2)) : i("", !0),
+				e.$slots.footer ? (u(), a("footer", {
 					key: 2,
-					class: c(["flex flex-wrap items-center gap-3 border-t border-border py-3 text-base text-muted", s.padding ? E[s.padding] : A.value ? "px-5" : "px-6"])
-				}, [u(e.$slots, "footer")], 2)) : i("", !0)
+					class: l(["flex flex-wrap items-center gap-3 border-t border-border py-3 text-base text-muted", c.padding ? E[c.padding] : j.value ? "px-5" : "px-6"])
+				}, [d(e.$slots, "footer")], 2)) : i("", !0)
 			]),
 			_: 3
 		}, 8, ["class"]));
 	}
 });
 //#endregion
-export { S as default };
+export { x as default };

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

@@ -47,8 +47,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     disabled: boolean;
     name: string;
     size: "small" | "normal";
-    readonly: boolean;
     hint: string;
+    readonly: boolean;
     errorMsg: string;
     presets: (string | ColorPreset)[];
     swatchOnly: boolean;

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

@@ -45,8 +45,22 @@ export interface Props {
     size?: "small" | "normal";
     /** Adds a hidden input with this name so plain form posts include the value. A range posts as `start/end`. */
     name?: string;
+    /** Draws the calendar in place, with no field, popover or border. In `date` mode each click updates `v-model` at once, and there's no Today button. */
+    inline?: boolean;
+    /** Saves each pick in `datetime` mode at once, with no Apply or Cancel; the popover stays open so the time can be set too. An empty value starts at the current time. */
+    autoApply?: boolean;
+    /** `24` shows 00–23 on the Time tab; `12` shows 1–12 with an AM/PM column, and the field reads `07:30 PM`. `v-model` is unchanged. Cloud `hour12`. */
+    hourCycle?: 12 | 24;
+    /** Shows the time-zone name in the field text and under the Time tab, e.g. `GMT+6`. */
+    showTimeZone?: boolean;
 }
 type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Content before the label text, such as a 14px icon. */
+    "label-icon"?: () => unknown;
+    /** Content after the label text, such as "(Optional)" or an info tooltip. */
+    "label-extra"?: () => unknown;
+};
 type __VLS_ModelProps = {
     /** `date`: `"2026-09-30"`. `datetime`: `"2026-09-30T14:05:00Z"` (UTC). `duration`: `"26h30m"`. With `range`: `[start, end]`. `null` when empty. */
     modelValue?: string | [string, string] | null;
@@ -54,9 +68,9 @@ type __VLS_ModelProps = {
     "open"?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
-    /** Moves focus to the field. */
-    focus: () => void | undefined;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    /** Moves focus to the field, or to the calendar's current day when `inline`. */
+    focus: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | [string, string] | null) => any;
     "update:open": (value: boolean) => any;
@@ -71,6 +85,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     mode: "date" | "datetime" | "duration";
     size: "small" | "normal";
     hint: string;
+    inline: boolean;
     placeholder: string;
     range: boolean;
     clearable: boolean;
@@ -83,6 +98,15 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     timeZone: string;
     weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     showSeconds: boolean;
+    autoApply: boolean;
+    hourCycle: 12 | 24;
+    showTimeZone: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};