@ac-design/design-system 0.0.0-stage → 1.0.1

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

@@ -0,0 +1,221 @@
+import { Fragment as e, Transition as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, mergeModels as l, mergeProps as u, nextTick as ee, normalizeClass as d, onBeforeUnmount as f, onMounted as p, openBlock as m, provide as h, ref as g, renderSlot as _, resolveDynamicComponent as v, toDisplayString as y, unref as b, useModel as x, watch as S, withCtx as C } from "vue";
+import { PanelLeftClose as w, PanelLeftOpen as T, X as E } from "@lucide/vue";
+//#region src/lib/components/AcSidebar.vue?vue&type=script&setup=true&lang.ts
+var te = [
+	"role",
+	"aria-modal",
+	"aria-label"
+], ne = ["aria-label"], re = {
+	role: "list",
+	class: "flex flex-col gap-0.5"
+}, ie = {
+	key: 0,
+	role: "list",
+	class: "flex flex-col gap-0.5"
+}, ae = ["aria-label", "title"], D = { key: 0 }, O = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", k = 120, A = 180, j = /*@__PURE__*/ c({
+	inheritAttrs: !1,
+	__name: "AcSidebar",
+	props: /*@__PURE__*/ l({
+		label: { default: "Main" },
+		dark: {
+			type: Boolean,
+			default: !1
+		},
+		collapsible: {
+			type: Boolean,
+			default: !0
+		},
+		contained: {
+			type: Boolean,
+			default: !1
+		},
+		breakpoint: { default: 768 },
+		hoverExpand: {
+			type: Boolean,
+			default: !1
+		},
+		top: { default: "0px" }
+	}, {
+		collapsed: {
+			type: Boolean,
+			default: !1
+		},
+		collapsedModifiers: {},
+		mobileOpen: {
+			type: Boolean,
+			default: !1
+		},
+		mobileOpenModifiers: {}
+	}),
+	emits: ["update:collapsed", "update:mobileOpen"],
+	setup(c, { expose: l }) {
+		let j = c, M = x(c, "collapsed"), N = x(c, "mobileOpen"), P = g(null), F = g(null), I = g(!j.contained && typeof window < "u" && window.matchMedia(X()).matches), L = null, R = null, z = null, B = g(!1), V = n(() => j.hoverExpand && M.value && !I.value && B.value), H = n(() => M.value && !I.value && !V.value), U = n(() => M.value && !I.value), W = !1, G;
+		function K(e) {
+			j.hoverExpand && (e && W || (clearTimeout(G), G = setTimeout(() => B.value = e, e ? k : A)));
+		}
+		function q() {
+			W = !0, clearTimeout(G), B.value = !1, M.value = !M.value;
+		}
+		function oe() {
+			W = !1, K(!1);
+		}
+		function se(e) {
+			P.value?.contains(e.relatedTarget) || K(!1);
+		}
+		let J = n(() => I.value && N.value), Y = n(() => j.dark), ce = n(() => I.value || j.contained ? void 0 : {
+			top: j.top,
+			height: `calc(100dvh - ${j.top})`
+		}), le = n(() => {
+			let e = j.dark ? "dark border-r border-border-light bg-sidebar text-body" : "border-r border-border-light bg-surface-muted text-body";
+			return I.value ? [
+				e,
+				j.contained ? "absolute" : "fixed",
+				"inset-y-0 left-0 z-[80] w-60 max-w-[85%] shadow-xl duration-200 ease-out-soft motion-reduce:transition-none",
+				N.value ? "visible translate-x-0 transition-[translate]" : "invisible -translate-x-full transition-[translate,visibility]"
+			] : [
+				e,
+				V.value ? [j.contained ? "absolute inset-y-0 left-0" : "fixed left-0", "z-30 shadow-xl"] : j.contained ? "relative h-full" : "sticky",
+				"transition-[width] duration-200 ease-out-soft motion-reduce:transition-none",
+				H.value ? "w-14" : "w-60"
+			];
+		});
+		function X() {
+			return `(max-width: ${j.breakpoint - .02}px)`;
+		}
+		function ue() {
+			I.value ? N.value = !N.value : M.value = !M.value;
+		}
+		function de() {
+			M.value = !1;
+		}
+		function fe() {
+			I.value && (N.value = !1);
+		}
+		function Z() {
+			N.value = !1;
+		}
+		function pe(e) {
+			if (J.value && P.value) {
+				if (e.key === "Escape") e.stopPropagation(), Z();
+				else if (e.key === "Tab") {
+					let t = [...P.value.querySelectorAll(O)].filter((e) => e.offsetParent !== null);
+					if (!t.length) return;
+					let n = t[0], r = t[t.length - 1];
+					e.shiftKey && document.activeElement === n ? (e.preventDefault(), r.focus()) : !e.shiftKey && document.activeElement === r && (e.preventDefault(), n.focus());
+				}
+			}
+		}
+		function Q(e) {
+			I.value = e.matches;
+		}
+		function $(e) {
+			let t = document.body, n = Number(t.dataset.acModals ?? 0) + (e ? 1 : -1);
+			t.dataset.acModals = String(Math.max(n, 0)), e && n === 1 ? t.style.overflow = "hidden" : !e && n <= 0 && (t.style.overflow = "");
+		}
+		function me() {
+			let e = F.value, t = e?.querySelector("[aria-current=\"page\"]");
+			if (!e || !t) return;
+			let n = t.getBoundingClientRect().top - e.getBoundingClientRect().top;
+			(n < 0 || n > e.clientHeight - t.offsetHeight) && (e.scrollTop += n - e.clientHeight / 2);
+		}
+		return h("ac-sidebar", {
+			rail: H,
+			isMobile: I,
+			dark: Y,
+			expand: de,
+			navigate: fe
+		}), S(J, async (e, t) => {
+			e ? (L = document.activeElement, j.contained || $(!0), await ee(), (P.value?.querySelector("[aria-current=\"page\"]") ?? P.value?.querySelector(O))?.focus()) : t && (j.contained || $(!1), L?.focus?.());
+		}), S(I, (e) => {
+			e || (N.value = !1);
+		}), p(() => {
+			if (j.contained) {
+				let e = P.value?.parentElement;
+				e && (z = new ResizeObserver(([e]) => I.value = (e?.contentRect.width ?? 0) < j.breakpoint), z.observe(e));
+			} else R = window.matchMedia(X()), I.value = R.matches, R.addEventListener("change", Q);
+			me();
+		}), f(() => {
+			clearTimeout(G), R?.removeEventListener("change", Q), z?.disconnect(), J.value && !j.contained && $(!1);
+		}), l({ toggle: ue }), (n, l) => (m(), a(e, null, [
+			s(t, {
+				"enter-active-class": "transition-opacity duration-200",
+				"enter-from-class": "opacity-0",
+				"leave-active-class": "transition-opacity duration-150",
+				"leave-to-class": "opacity-0"
+			}, {
+				default: C(() => [J.value ? (m(), a("div", {
+					key: 0,
+					class: d(["inset-0 z-[79] bg-overlay", c.contained ? "absolute" : "fixed"]),
+					"aria-hidden": "true",
+					"data-ac-ds": "",
+					"data-testid": "ac-sidebar-backdrop",
+					onClick: Z
+				}, null, 2)) : i("", !0)]),
+				_: 1
+			}),
+			V.value ? (m(), a("div", {
+				key: 0,
+				class: d(["w-14 shrink-0", c.contained && "h-full"]),
+				"aria-hidden": "true",
+				"data-ac-ds": ""
+			}, null, 2)) : i("", !0),
+			o("aside", u({
+				ref_key: "root",
+				ref: P
+			}, n.$attrs, {
+				class: ["flex shrink-0 flex-col overflow-hidden", le.value],
+				style: ce.value,
+				role: J.value ? "dialog" : void 0,
+				"aria-modal": J.value || void 0,
+				"aria-label": J.value ? c.label : void 0,
+				"data-ac-ds": "",
+				"data-testid": "ac-sidebar",
+				onKeydown: pe,
+				onMouseenter: l[0] ||= (e) => K(!0),
+				onMouseleave: oe,
+				onFocusin: l[1] ||= (e) => K(!0),
+				onFocusout: se
+			}), [
+				n.$slots.header || I.value ? (m(), a("div", {
+					key: 0,
+					class: d(["flex h-14 shrink-0 items-center gap-2 overflow-hidden border-b border-border-light", H.value ? "justify-center px-2" : "px-4"])
+				}, [o("div", { class: d(["flex min-w-0 flex-1 items-center", H.value && "justify-center"]) }, [_(n.$slots, "header", { collapsed: H.value })], 2), I.value ? (m(), a("button", {
+					key: 0,
+					type: "button",
+					class: d(["-mr-1.5 inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-6 text-muted transition hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", Y.value ? "hover:bg-white/8" : "hover:bg-slate-90"]),
+					"aria-label": "Close navigation",
+					"data-ac-ds": "",
+					"data-testid": "ac-sidebar-close",
+					onClick: Z
+				}, [s(b(E), {
+					class: "size-4",
+					"aria-hidden": "true"
+				})], 2)) : i("", !0)], 2)) : i("", !0),
+				o("nav", {
+					ref_key: "nav",
+					ref: F,
+					"aria-label": c.label,
+					class: d(["ac-scrollbar min-h-0 flex-1 overflow-x-hidden py-3", H.value ? "px-2" : "px-3"])
+				}, [o("ul", re, [_(n.$slots, "default")])], 10, ne),
+				n.$slots.footer || c.collapsible && !I.value ? (m(), a("div", {
+					key: 1,
+					class: d(["flex shrink-0 flex-col gap-0.5 border-t border-border-light py-2", H.value ? "px-2" : "px-3"])
+				}, [n.$slots.footer ? (m(), a("ul", ie, [_(n.$slots, "footer", { collapsed: H.value })])) : i("", !0), c.collapsible && !I.value ? (m(), a("button", {
+					key: 1,
+					type: "button",
+					class: d(["flex h-8 w-full cursor-pointer items-center gap-2.5 rounded-6 text-base text-label transition-colors hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", [H.value ? "justify-center" : "px-2.5", Y.value ? "hover:bg-white/8" : "hover:bg-slate-90"]]),
+					"aria-label": U.value ? "Expand sidebar" : "Collapse sidebar",
+					title: H.value ? "Expand sidebar" : void 0,
+					"data-ac-ds": "",
+					"data-testid": "ac-sidebar-collapse",
+					onClick: q
+				}, [(m(), r(v(U.value ? b(T) : b(w)), {
+					class: "size-4 shrink-0 text-muted",
+					"aria-hidden": "true"
+				})), H.value ? i("", !0) : (m(), a("span", D, y(U.value ? "Expand" : "Collapse"), 1))], 10, ae)) : i("", !0)], 2)) : i("", !0)
+			], 16, te)
+		], 64));
+	}
+});
+//#endregion
+export { j as default };

package/dist/lib/components/AcSidebarItem.js

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

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

@@ -0,0 +1,55 @@
+import type { Component } from "vue";
+import type { Tone } from "./types";
+export interface Props {
+    /** Text of the item. In the collapsed rail it becomes the tooltip and the accessible name. */
+    label: string;
+    /** A Lucide icon component, e.g. `:icon="Database"`. The collapsed rail shows only the icon. */
+    icon?: Component;
+    /** Route to link to. Renders `RouterLink` when vue-router is installed in the app, otherwise a plain link (string routes only). */
+    to?: string | object;
+    /** Plain URL, for pages outside the app. Takes over from `to` when vue-router isn't installed. */
+    href?: string;
+    /** Marks the current page: highlighted and `aria-current="page"`. With `to` and vue-router, an exact route match does this for you. */
+    active?: boolean;
+    /** A count or short word after the label, e.g. `3` or `"New"`. Shown as a dot in the collapsed rail. */
+    badge?: string | number;
+    /** Colour of the badge. */
+    badgeColor?: Tone | "neutral";
+    /** Greys the item out and blocks clicks. */
+    disabled?: boolean;
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Nested `AcSidebarItem`s. Turns this item into a group that expands and collapses. */
+    default?: () => unknown;
+    /** A custom 16px icon, e.g. an `<img>` from the AppsCode CDN. Replaces `icon`. */
+    icon?: () => unknown;
+};
+type __VLS_ModelProps = {
+    /** Whether the nested items are shown. Opens by itself when a nested item is the current page. Bind with `v-model:open`. */
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    click: (e: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onClick?: ((e: MouseEvent) => any) | undefined;
+}>, {
+    disabled: boolean;
+    icon: Component;
+    href: string;
+    to: string | object;
+    active: boolean;
+    badge: string | number;
+    badgeColor: Tone | "neutral";
+}, {}, {}, {}, 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;
+    };
+};

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

@@ -0,0 +1,155 @@
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, getCurrentInstance as s, inject as c, mergeModels as l, mergeProps as u, normalizeClass as d, onBeforeUnmount as f, onMounted as p, openBlock as m, provide as h, ref as g, renderSlot as _, resolveDynamicComponent as v, toDisplayString as y, unref as b, useId as x, useModel as S, useSlots as C, watch as w, withCtx as T } from "vue";
+import { ChevronRight as E } from "@lucide/vue";
+//#region src/lib/components/AcSidebarItem.vue?vue&type=script&setup=true&lang.ts
+var D = {
+	class: "m-0 list-none",
+	"data-ac-ds": "",
+	"data-testid": "ac-sidebar-item"
+}, O = {
+	key: 0,
+	class: "inline-flex size-4 shrink-0 items-center justify-center text-muted transition-colors group-hover:text-heading group-aria-[current=page]:text-primary-30! [&>img]:size-4",
+	"aria-hidden": "true"
+}, k = {
+	key: 1,
+	class: "text-xs font-semibold"
+}, A = [
+	"disabled",
+	"aria-expanded",
+	"aria-controls",
+	"title"
+], j = {
+	key: 1,
+	class: "text-xs font-semibold"
+}, M = ["id"], N = /*@__PURE__*/ o({
+	__name: "AcSidebarItem",
+	props: /*@__PURE__*/ l({
+		label: {},
+		icon: { default: void 0 },
+		to: { default: void 0 },
+		href: { default: void 0 },
+		active: {
+			type: Boolean,
+			default: !1
+		},
+		badge: { default: void 0 },
+		badgeColor: { default: "neutral" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ l(["click"], ["update:open"]),
+	setup(o, { emit: l }) {
+		let N = o, P = S(o, "open"), F = l, I = C(), L = {
+			neutral: "bg-slate-90 text-label ring-1 ring-border ring-inset",
+			primary: "bg-primary-95 text-primary-20",
+			info: "bg-blue-95 text-blue-20",
+			success: "bg-green-95 text-green-20",
+			warning: "bg-yellow-95 text-yellow-20",
+			danger: "bg-red-95 text-red-30"
+		}, R = {
+			neutral: "bg-slate-60",
+			primary: "bg-primary",
+			info: "bg-info",
+			success: "bg-success",
+			warning: "bg-warning",
+			danger: "bg-danger"
+		}, z = c("ac-sidebar", null), B = c("ac-sidebar-depth", 0), V = s()?.appContext.components.RouterLink, H = x(), U = g(null), W = g(!1), G = null, K = t(() => !!I.default), q = t(() => (z?.rail.value ?? !1) && B === 0), J = t(() => z?.dark.value ? "not-aria-[current=page]:hover:bg-white/8 not-aria-[current=page]:hover:text-heading" : "not-aria-[current=page]:hover:bg-slate-90 not-aria-[current=page]:hover:text-heading"), Y = t(() => N.to && V && !N.disabled ? V : N.to || N.href ? "a" : "button"), X = t(() => {
+			let e = {};
+			return Y.value === V ? e.to = N.to : Y.value === "a" ? N.disabled ? (e.role = "link", e["aria-disabled"] = "true") : e.href = N.href ?? (typeof N.to == "string" ? N.to : void 0) : (e.type = "button", e.disabled = N.disabled || void 0), N.active && (e["aria-current"] = "page"), e;
+		}), Z = t(() => N.badge === void 0 || N.badge === "" ? "" : String(N.badge));
+		function Q(e) {
+			if (N.disabled) {
+				e.preventDefault();
+				return;
+			}
+			F("click", e), z?.navigate();
+		}
+		function ee() {
+			q.value ? (z?.expand(), P.value = !0) : P.value = !P.value;
+		}
+		function $() {
+			W.value = !!U.value?.querySelector("[aria-current=\"page\"]");
+		}
+		return h("ac-sidebar-depth", B + 1), w(W, (e) => {
+			e && (P.value = !0);
+		}), p(() => {
+			U.value && ($(), G = new MutationObserver($), G.observe(U.value, {
+				subtree: !0,
+				childList: !0,
+				attributes: !0,
+				attributeFilter: ["aria-current"]
+			}));
+		}), f(() => G?.disconnect()), (t, s) => (m(), i("li", D, [K.value ? (m(), i(e, { key: 1 }, [a("button", {
+			type: "button",
+			class: d(["group relative flex w-full items-center gap-2.5 rounded-6 text-left text-base transition-colors duration-100 select-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", [
+				q.value ? "h-9 justify-center" : "h-8 px-2.5",
+				q.value && W.value ? "bg-primary-95 text-primary-20" : W.value ? "font-medium text-heading" : "text-body",
+				o.disabled ? "cursor-not-allowed opacity-50" : ["cursor-pointer", J.value]
+			]]),
+			disabled: o.disabled || void 0,
+			"aria-expanded": q.value ? void 0 : P.value,
+			"aria-controls": `${b(H)}-list`,
+			title: q.value ? o.label : void 0,
+			"data-ac-ds": "",
+			"data-testid": "ac-sidebar-group",
+			onClick: ee
+		}, [
+			t.$slots.icon || o.icon || q.value ? (m(), i("span", {
+				key: 0,
+				class: d(["inline-flex size-4 shrink-0 items-center justify-center transition-colors group-hover:text-heading [&>img]:size-4", W.value ? "text-primary-30" : "text-muted"]),
+				"aria-hidden": "true"
+			}, [_(t.$slots, "icon", {}, () => [o.icon ? (m(), n(v(o.icon), {
+				key: 0,
+				class: "size-4"
+			})) : (m(), i("span", j, y(o.label.charAt(0)), 1))])], 2)) : r("", !0),
+			a("span", { class: d(q.value ? "sr-only" : "min-w-0 flex-1 truncate") }, y(o.label), 3),
+			Z.value && !q.value ? (m(), i("span", {
+				key: 1,
+				class: d(["inline-flex h-4.5 min-w-4.5 shrink-0 items-center justify-center rounded-50 px-1.5 text-sm font-medium tabular-nums", L[o.badgeColor]])
+			}, y(Z.value), 3)) : r("", !0),
+			q.value ? r("", !0) : (m(), n(b(E), {
+				key: 2,
+				class: d(["size-3.5 shrink-0 text-muted transition-transform duration-150 motion-reduce:transition-none", P.value && "rotate-90"]),
+				"aria-hidden": "true"
+			}, null, 8, ["class"]))
+		], 10, A), a("ul", {
+			id: `${b(H)}-list`,
+			ref_key: "list",
+			ref: U,
+			role: "list",
+			class: d(["mt-0.5 ml-4.5 flex-col gap-0.5 border-l border-border pl-2", P.value && !q.value ? "flex" : "hidden"])
+		}, [_(t.$slots, "default")], 10, M)], 64)) : (m(), n(v(Y.value), u({ key: 0 }, X.value, {
+			class: ["group relative flex w-full items-center gap-2.5 rounded-6 text-left text-base font-normal text-body no-underline transition-colors duration-100 select-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring aria-[current=page]:bg-primary-95 aria-[current=page]:font-medium aria-[current=page]:text-primary-20", [q.value ? "h-9 justify-center" : "h-8 px-2.5", o.disabled ? "pointer-events-none cursor-not-allowed opacity-50" : ["cursor-pointer", J.value]]],
+			title: q.value ? Z.value ? `${o.label} (${Z.value})` : o.label : void 0,
+			"data-ac-ds": "",
+			"data-testid": "ac-sidebar-link",
+			onClick: Q
+		}), {
+			default: T(() => [
+				t.$slots.icon || o.icon || q.value ? (m(), i("span", O, [_(t.$slots, "icon", {}, () => [o.icon ? (m(), n(v(o.icon), {
+					key: 0,
+					class: "size-4"
+				})) : (m(), i("span", k, y(o.label.charAt(0)), 1))])])) : r("", !0),
+				a("span", { class: d(q.value ? "sr-only" : "min-w-0 flex-1 truncate") }, y(o.label), 3),
+				Z.value ? (m(), i(e, { key: 1 }, [q.value ? (m(), i("span", {
+					key: 0,
+					class: d(["absolute top-1 right-1 size-1.5 rounded-full", R[o.badgeColor]]),
+					"aria-hidden": "true"
+				}, null, 2)) : (m(), i("span", {
+					key: 1,
+					class: d(["inline-flex h-4.5 min-w-4.5 shrink-0 items-center justify-center rounded-50 px-1.5 text-sm font-medium tabular-nums", L[o.badgeColor]])
+				}, y(Z.value), 3))], 64)) : r("", !0)
+			]),
+			_: 3
+		}, 16, ["class", "title"]))]));
+	}
+});
+//#endregion
+export { N as default };

package/dist/lib/components/AcSidebarSection.js

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

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

@@ -0,0 +1,32 @@
+export interface Props {
+    /** Small uppercase heading above the items. Hidden in the collapsed rail, where a divider takes its place. */
+    label?: string;
+    /** Turns the heading into a button that shows and hides the items. */
+    collapsible?: boolean;
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** The section's `AcSidebarItem`s. */
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    /** Whether the items are shown when `collapsible`. Bind with `v-model:open`. */
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    label: string;
+    collapsible: 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;
+    };
+};

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

@@ -0,0 +1,48 @@
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, inject as s, mergeModels as c, normalizeClass as l, openBlock as u, renderSlot as d, toDisplayString as f, unref as p, useId as m, useModel as h } from "vue";
+import { ChevronDown as g } from "@lucide/vue";
+//#region src/lib/components/AcSidebarSection.vue?vue&type=script&setup=true&lang.ts
+var _ = ["aria-expanded", "aria-controls"], v = { class: "truncate" }, y = {
+	key: 1,
+	class: "h-7 truncate px-2.5 text-sm leading-7 font-medium tracking-wider text-muted uppercase"
+}, b = ["id", "aria-label"], x = /*@__PURE__*/ o({
+	__name: "AcSidebarSection",
+	props: /*@__PURE__*/ c({
+		label: { default: "" },
+		collapsible: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		open: {
+			type: Boolean,
+			default: !0
+		},
+		openModifiers: {}
+	}),
+	emits: ["update:open"],
+	setup(o) {
+		let c = h(o, "open"), x = s("ac-sidebar", null), S = m(), C = t(() => x?.rail.value ?? !1);
+		return (t, s) => (u(), r("li", {
+			class: l(["list-none", C.value ? "mt-2 border-t border-border-light pt-2 first:mt-0 first:border-0 first:pt-0" : "mt-4 first:mt-0"]),
+			"data-ac-ds": "",
+			"data-testid": "ac-sidebar-section"
+		}, [o.label && !C.value ? (u(), r(e, { key: 0 }, [o.collapsible ? (u(), r("button", {
+			key: 0,
+			type: "button",
+			class: "group flex h-7 w-full cursor-pointer items-center justify-between gap-2 rounded-6 px-2.5 text-sm font-medium tracking-wider text-muted uppercase transition-colors hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+			"aria-expanded": c.value,
+			"aria-controls": `${p(S)}-items`,
+			onClick: s[0] ||= (e) => c.value = !c.value
+		}, [i("span", v, f(o.label), 1), a(p(g), {
+			class: l(["size-3.5 shrink-0 transition-transform duration-150 motion-reduce:transition-none", !c.value && "-rotate-90"]),
+			"aria-hidden": "true"
+		}, null, 8, ["class"])], 8, _)) : (u(), r("p", y, f(o.label), 1))], 64)) : n("", !0), i("ul", {
+			id: `${p(S)}-items`,
+			role: "list",
+			"aria-label": o.label || void 0,
+			class: l(["flex-col gap-0.5", c.value || C.value || !o.collapsible ? "flex" : "hidden"])
+		}, [d(t.$slots, "default")], 10, b)], 2));
+	}
+});
+//#endregion
+export { x as default };

package/dist/lib/components/AcSkeleton.js

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

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

@@ -0,0 +1,27 @@
+export interface Props {
+    /** `text` lines, a `circle` or `rect`, or a preset: `table`, `card`, `info-card`, `editor`. */
+    shape?: "text" | "circle" | "rect" | "table" | "card" | "info-card" | "editor";
+    /** Number of text lines. The last one is shorter so the block reads as a paragraph. */
+    lines?: number;
+    /** Rows of the `table` preset, not counting the header. */
+    rows?: number;
+    /** Columns of the `table` preset. */
+    cols?: number;
+    /** CSS width, e.g. `"80%"` or `"240px"`. Defaults to full width, or to `height` for a circle. */
+    width?: string;
+    /** CSS height of a `rect` or `editor` (default `320px`, like AcCodeEditor), the diameter of a `circle`, or the height of each `text` line. */
+    height?: string;
+    /** Hidden text for screen readers. Pass an empty string to hide the skeleton from them, e.g. when several are composed inside one `aria-busy` region. */
+    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;
+    height: string;
+    width: string;
+    shape: "text" | "circle" | "rect" | "table" | "card" | "info-card" | "editor";
+    lines: number;
+    rows: number;
+    cols: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;