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

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

@@ -0,0 +1,93 @@
+import type { Component } from "vue";
+import type { Tone } from "./types";
+export interface SideTabItem {
+    /** Unique key. `v-model` holds the active item's key. */
+    key: string;
+    /** Text of the item. */
+    label: string;
+    /** A Lucide icon component, e.g. `:icon="Database"`. The collapsed rail shows only the icon. */
+    icon?: Component;
+    /** Route for `RouterLink` (needs vue-router in the app). The item for the current route becomes active by itself. */
+    to?: string | Record<string, unknown>;
+    /** Plain link, when there's no router. */
+    href?: string;
+    /** A count or short word after the label, e.g. `3` or `"New"`. */
+    badge?: string | number;
+    /** Colour of the badge. */
+    badgeColor?: Tone | "neutral";
+    /** Colours the item, e.g. `danger` for a "Danger zone" section. */
+    tone?: "danger" | "warning" | "success";
+    /** Greys the item out and blocks clicks. */
+    disabled?: boolean;
+    /** Items with the same group are listed under that heading. */
+    group?: string;
+    /** Nested items. Turns this item into a group that expands and collapses (one level deep). */
+    children?: SideTabItem[];
+}
+export interface Props {
+    /** The sections: `{ key, label, icon?, to?, href?, badge?, tone?, disabled?, group?, children? }`. */
+    items: SideTabItem[];
+    /** Accessible name of the navigation, and the label of the select on phones. */
+    label?: string;
+    /** Sticks the list to the top while the page scrolls. */
+    sticky?: boolean;
+    /** Sticky offset from the top of the scroll area, e.g. `"56px"` under a navbar. */
+    top?: string;
+    /** Space kept free at the bottom while sticky, e.g. `"28px"` above a status bar. */
+    bottom?: string;
+    /** CSS selectors of fixed bars (navbar, page header) whose measured heights are added to `top`. For bars whose height changes. */
+    offsetSelectors?: string[];
+    /** Width of the list. */
+    width?: string;
+    /** Hides the list so the content takes the full width, e.g. on an edit page that needs the room. */
+    hideTabs?: boolean;
+    /** Shows a Collapse button that toggles `v-model:collapsed` (an icon-only rail). */
+    collapsible?: boolean;
+    /** Width in px (at scale 1) below which the list turns into the phone layout: the component's own width with content beside it, otherwise its parent's. It grows with the interface scale. `0` keeps it vertical. */
+    breakpoint?: number;
+    /** Phone layout: a `select`, or a horizontal row of tabs that `scroll`s. */
+    mobile?: "select" | "scroll";
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Page content, placed beside the list (below it on phones). Receives the active key and whether the phone layout is on. */
+    default?: (props: {
+        active: string;
+        compact: boolean;
+    }) => unknown;
+};
+type __VLS_ModelProps = {
+    /** The active item's `key`. With router links it follows the current route. */
+    modelValue?: string;
+    /** Icon-only rail. Bind with `v-model:collapsed`. */
+    "collapsed"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (item: SideTabItem) => any;
+    "update:modelValue": (value: string) => any;
+    "update:collapsed": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((item: SideTabItem) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
+}>, {
+    label: string;
+    width: string;
+    bottom: string;
+    top: string;
+    mobile: "select" | "scroll";
+    collapsible: boolean;
+    sticky: boolean;
+    breakpoint: number;
+    offsetSelectors: string[];
+    hideTabs: 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/AcSideTabs.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,373 @@
+import e from "./AcSelect.js";
+import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as ee, createVNode as te, defineComponent as s, getCurrentInstance as c, mergeModels as l, mergeProps as u, nextTick as d, normalizeClass as f, normalizeStyle as p, onBeforeUnmount as ne, onMounted as re, openBlock as m, ref as h, renderList as g, renderSlot as ie, resolveDynamicComponent as _, toDisplayString as v, unref as y, useId as ae, useModel as b, useSlots as oe, watch as x, withCtx as S } from "vue";
+import { ChevronRight as se, PanelLeftClose as ce, PanelLeftOpen as le } from "@lucide/vue";
+//#region src/lib/components/AcSideTabs.vue?vue&type=script&setup=true&lang.ts
+var ue = {
+	key: 0,
+	class: "border-b border-border-light bg-surface px-4 py-3"
+}, de = ["aria-label"], fe = ["aria-label"], pe = {
+	key: 0,
+	class: "mb-1 truncate px-2.5 pt-1 text-sm font-semibold tracking-[0.06em] text-muted uppercase"
+}, me = {
+	key: 1,
+	class: "mx-2 mb-2 h-px bg-border-light",
+	"aria-hidden": "true"
+}, he = {
+	class: "flex flex-col gap-0.5",
+	role: "list"
+}, ge = {
+	key: 1,
+	class: "text-xs font-semibold"
+}, _e = [
+	"disabled",
+	"aria-expanded",
+	"aria-controls",
+	"title",
+	"onClick"
+], ve = {
+	key: 1,
+	class: "text-xs font-semibold"
+}, ye = ["id"], be = { class: "min-w-0 flex-1 truncate" }, xe = [
+	"aria-label",
+	"aria-expanded",
+	"title"
+], Se = { key: 2 }, Ce = {
+	key: 1,
+	class: "min-w-0 flex-1"
+}, C = /*@__PURE__*/ s({
+	__name: "AcSideTabs",
+	props: /*@__PURE__*/ l({
+		items: {},
+		label: { default: "Sections" },
+		sticky: {
+			type: Boolean,
+			default: !0
+		},
+		top: { default: "0px" },
+		bottom: { default: "0px" },
+		offsetSelectors: { default: () => [] },
+		width: { default: "calc(220px * var(--ac-scale))" },
+		hideTabs: {
+			type: Boolean,
+			default: !1
+		},
+		collapsible: {
+			type: Boolean,
+			default: !1
+		},
+		breakpoint: { default: 640 },
+		mobile: { default: "select" }
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {},
+		collapsed: {
+			type: Boolean,
+			default: !1
+		},
+		collapsedModifiers: {}
+	}),
+	emits: /*@__PURE__*/ l(["select"], ["update:modelValue", "update:collapsed"]),
+	setup(s, { emit: l }) {
+		let C = s, w = b(s, "modelValue"), T = b(s, "collapsed"), E = l, D = {
+			neutral: "bg-surface-sunken 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"
+		}, we = {
+			neutral: "bg-slate-60",
+			primary: "bg-primary",
+			info: "bg-info",
+			success: "bg-success",
+			warning: "bg-warning",
+			danger: "bg-danger"
+		}, Te = {
+			none: ["text-body hover:bg-surface-sunken hover:text-heading", "bg-primary-95 font-medium text-primary-20"],
+			danger: ["text-red-30 hover:bg-red-97", "bg-red-95 font-medium text-red-20"],
+			warning: ["text-yellow-30 hover:bg-yellow-97", "bg-yellow-95 font-medium text-yellow-20"],
+			success: ["text-green-30 hover:bg-green-97", "bg-green-95 font-medium text-green-20"]
+		}, O = ae(), Ee = oe(), k = c()?.appContext, A = k?.components.RouterLink, j = k?.config.globalProperties.$router, M = h(null), N = h(null), P = h(!1), F = h(0), I = h({}), L = null, R = null, z = n(() => !!Ee.default), B = n(() => T.value && !P.value), V = n(() => C.items.flatMap((e) => e.children?.length ? e.children : [e])), De = n(() => {
+			let e = [];
+			for (let t of C.items) {
+				let n = t.group ?? "", r = e[e.length - 1];
+				r && r.name === n ? r.items.push(t) : e.push({
+					name: n,
+					items: [t]
+				});
+			}
+			return e;
+		}), Oe = n(() => C.items.flatMap((e) => e.children?.length ? e.children.map((t) => ({
+			value: t.key,
+			label: t.label,
+			group: e.label,
+			disabled: t.disabled
+		})) : [{
+			value: e.key,
+			label: e.label,
+			group: e.group,
+			disabled: e.disabled
+		}])), ke = n(() => {
+			if (!j) return "";
+			let e = j.currentRoute.value.path, t = "", n = -1;
+			for (let r of V.value) {
+				if (r.to === void 0) continue;
+				let i;
+				try {
+					i = j.resolve(r.to).path;
+				} catch {
+					continue;
+				}
+				if (i === e) return r.key;
+				let a = i.endsWith("/") ? i : `${i}/`;
+				e.startsWith(a) && i.length > n && (t = r.key, n = i.length);
+			}
+			return t;
+		}), H = n(() => F.value ? `calc(${C.top} + ${F.value}px)` : C.top), Ae = n(() => C.sticky ? {
+			top: H.value,
+			maxHeight: `calc(100dvh - ${H.value} - ${C.bottom})`
+		} : void 0), je = n(() => ({
+			width: B.value ? "calc(56px * var(--ac-scale))" : C.width,
+			minHeight: C.sticky && z.value ? `calc(100dvh - ${H.value} - ${C.bottom})` : void 0
+		}));
+		function U(e) {
+			return e.key === w.value;
+		}
+		function W(e) {
+			return !!e.children?.some(U);
+		}
+		function G(e) {
+			return !I.value[e.key];
+		}
+		function Me(e) {
+			if (B.value) {
+				T.value = !1, I.value[e.key] = !1;
+				return;
+			}
+			I.value[e.key] = G(e);
+		}
+		function K(e) {
+			return e.to !== void 0 && A && !e.disabled ? A : e.href || typeof e.to == "string" ? "a" : "button";
+		}
+		function q(e) {
+			let t = K(e), n = { "aria-current": U(e) ? e.to || e.href ? "page" : "true" : void 0 };
+			return t === A ? n.to = e.to : t === "a" ? e.disabled ? (n.role = "link", n["aria-disabled"] = "true") : n.href = e.href ?? e.to : (n.type = "button", n.disabled = e.disabled || void 0), n;
+		}
+		function J(e) {
+			let [t, n] = Te[e.tone ?? "none"];
+			return [U(e) ? n : t, e.disabled ? "pointer-events-none cursor-not-allowed opacity-50" : "cursor-pointer"];
+		}
+		function Y(e, t) {
+			if (e.disabled) {
+				t.preventDefault();
+				return;
+			}
+			w.value = e.key, E("select", e);
+		}
+		function Ne(e) {
+			let t = V.value.find((t) => t.key === e);
+			t && !t.disabled && (w.value = t.key, E("select", t), t.to !== void 0 && j ? j.push(t.to) : t.href && window.location.assign(t.href));
+		}
+		function X(e) {
+			if (![
+				"ArrowDown",
+				"ArrowUp",
+				"ArrowLeft",
+				"ArrowRight",
+				"Home",
+				"End"
+			].includes(e.key)) return;
+			let t = [...e.currentTarget.querySelectorAll("[data-side-tab]")].filter((e) => e.offsetParent !== null && !e.hasAttribute("disabled") && e.getAttribute("aria-disabled") !== "true"), n = P.value, r = n ? "ArrowRight" : "ArrowDown", i = n ? "ArrowLeft" : "ArrowUp", a = t.indexOf(document.activeElement), o;
+			e.key === r ? o = t[(a + 1) % t.length] : e.key === i ? o = t[(a - 1 + t.length) % t.length] : e.key === "Home" ? o = t[0] : e.key === "End" && (o = t[t.length - 1]), o && (e.preventDefault(), o.focus());
+		}
+		function Z() {
+			let e = N.value, t = e?.querySelector("[aria-current]");
+			if (!e || !t) return;
+			let n = t.getBoundingClientRect().left - e.getBoundingClientRect().left;
+			e.scrollLeft += n - (e.clientWidth - t.offsetWidth) / 2;
+		}
+		function Q() {
+			let e = z.value ? M.value : M.value?.parentElement;
+			if (!e) return;
+			let t = Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--ac-scale")) || 1;
+			P.value = C.breakpoint > 0 && e.clientWidth < C.breakpoint * t;
+		}
+		function $() {
+			if (R?.disconnect(), F.value = 0, !C.offsetSelectors.length || typeof ResizeObserver > "u") return;
+			let e = C.offsetSelectors.map((e) => document.querySelector(e)).filter((e) => !!e), t = () => F.value = e.reduce((e, t) => e + t.offsetHeight, 0);
+			R = new ResizeObserver(t), e.forEach((e) => R.observe(e)), t();
+		}
+		return x(ke, (e) => {
+			e && (w.value = e);
+		}, { immediate: !0 }), x(w, (e) => {
+			let t = C.items.find((t) => t.children?.some((t) => t.key === e));
+			t && (I.value[t.key] = !1), P.value && C.mobile === "scroll" && d(Z);
+		}), x(P, (e) => {
+			e && C.mobile === "scroll" && d(Z);
+		}), x(() => C.offsetSelectors.join(","), $), re(() => {
+			Q(), window.addEventListener("ac-scale", Q), $();
+			let e = z.value ? M.value : M.value?.parentElement;
+			e && typeof ResizeObserver < "u" && (L = new ResizeObserver(Q), L.observe(e));
+		}), ne(() => {
+			window.removeEventListener("ac-scale", Q), L?.disconnect(), R?.disconnect();
+		}), (n, c) => (m(), a("div", {
+			ref_key: "root",
+			ref: M,
+			class: f(z.value ? ["flex w-full min-w-0", P.value ? "flex-col" : "flex-row"] : P.value ? "w-full" : "flex shrink-0 self-stretch"),
+			"data-ac-ds": "",
+			"data-testid": "ac-side-tabs"
+		}, [s.hideTabs ? i("", !0) : (m(), a(t, { key: 0 }, [P.value && s.mobile === "select" ? (m(), a("div", ue, [te(e, {
+			"model-value": w.value || null,
+			options: Oe.value,
+			label: s.label,
+			"onUpdate:modelValue": Ne
+		}, null, 8, [
+			"model-value",
+			"options",
+			"label"
+		])])) : P.value ? (m(), a("nav", {
+			key: 1,
+			"aria-label": s.label,
+			class: "border-b border-border-light bg-surface"
+		}, [o("ul", {
+			ref_key: "scroller",
+			ref: N,
+			class: "flex gap-1 overflow-x-auto px-2 py-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+			onKeydown: X
+		}, [(m(!0), a(t, null, g(V.value, (e) => (m(), a("li", {
+			key: e.key,
+			class: "shrink-0"
+		}, [(m(), r(_(K(e)), u({ ref_for: !0 }, q(e), {
+			"data-side-tab": "",
+			class: ["inline-flex h-8 items-center gap-2 rounded-6 px-3 text-base whitespace-nowrap no-underline transition-colors duration-100 select-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", J(e)],
+			onClick: (t) => Y(e, t)
+		}), {
+			default: S(() => [
+				e.icon ? (m(), r(_(e.icon), {
+					key: 0,
+					class: "size-4 shrink-0 opacity-80",
+					"aria-hidden": "true"
+				})) : i("", !0),
+				ee(" " + v(e.label) + " ", 1),
+				e.badge !== void 0 && e.badge !== "" ? (m(), a("span", {
+					key: 1,
+					class: f(["inline-flex h-4.5 min-w-4.5 items-center justify-center rounded-50 px-1.5 text-sm font-medium tabular-nums", D[e.badgeColor ?? "neutral"]])
+				}, v(e.badge), 3)) : i("", !0)
+			]),
+			_: 2
+		}, 1040, ["class", "onClick"]))]))), 128))], 544)], 8, de)) : (m(), a("div", {
+			key: 2,
+			class: "shrink-0 border-r border-border-light bg-surface transition-[width] duration-200 ease-out-soft motion-reduce:transition-none",
+			style: p(je.value)
+		}, [o("nav", {
+			"aria-label": s.label,
+			class: f(["ac-scrollbar flex flex-col gap-3 p-2", s.sticky && "sticky"]),
+			style: p(Ae.value),
+			onKeydown: X
+		}, [(m(!0), a(t, null, g(De.value, (e, n) => (m(), a("div", { key: e.name || `section-${n}` }, [e.name && !B.value ? (m(), a("p", pe, v(e.name), 1)) : e.name && n > 0 ? (m(), a("div", me)) : i("", !0), o("ul", he, [(m(!0), a(t, null, g(e.items, (e) => (m(), a("li", { key: e.key }, [e.children?.length ? (m(), a(t, { key: 1 }, [o("button", {
+			type: "button",
+			"data-side-tab": "",
+			class: f(["group flex h-8 w-full cursor-pointer items-center gap-2.5 rounded-6 text-left text-base transition-colors duration-100 select-none hover:bg-surface-sunken focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", [B.value ? "justify-center" : "px-2.5", B.value && W(e) ? "bg-primary-95 text-primary-20" : W(e) ? "font-medium text-heading" : "text-body hover:text-heading"]]),
+			disabled: e.disabled || void 0,
+			"aria-expanded": B.value ? void 0 : G(e),
+			"aria-controls": `${y(O)}-${e.key}`,
+			title: B.value ? e.label : void 0,
+			onClick: (t) => Me(e)
+		}, [
+			e.icon || B.value ? (m(), a("span", {
+				key: 0,
+				class: f(["inline-flex size-4 shrink-0 items-center justify-center", W(e) ? "text-primary-30" : "text-muted group-hover:text-heading"]),
+				"aria-hidden": "true"
+			}, [e.icon ? (m(), r(_(e.icon), {
+				key: 0,
+				class: "size-4"
+			})) : (m(), a("span", ve, v(e.label.charAt(0)), 1))], 2)) : i("", !0),
+			o("span", { class: f(B.value ? "sr-only" : "min-w-0 flex-1 truncate") }, v(e.label), 3),
+			!B.value && e.badge !== void 0 && e.badge !== "" ? (m(), a("span", {
+				key: 1,
+				class: f(["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", D[e.badgeColor ?? "neutral"]])
+			}, v(e.badge), 3)) : i("", !0),
+			B.value ? i("", !0) : (m(), r(y(se), {
+				key: 2,
+				class: f(["size-3.5 shrink-0 text-muted transition-transform duration-150 motion-reduce:transition-none", G(e) && "rotate-90"]),
+				"aria-hidden": "true"
+			}, null, 8, ["class"]))
+		], 10, _e), o("ul", {
+			id: `${y(O)}-${e.key}`,
+			role: "list",
+			class: f(["mt-0.5 ml-4.5 flex-col gap-0.5 border-l border-border-light pl-2", G(e) && !B.value ? "flex" : "hidden"])
+		}, [(m(!0), a(t, null, g(e.children, (e) => (m(), a("li", { key: e.key }, [(m(), r(_(K(e)), u({ ref_for: !0 }, q(e), {
+			"data-side-tab": "",
+			class: ["group flex h-8 w-full items-center gap-2.5 rounded-6 px-2.5 text-left text-base no-underline transition-colors duration-100 select-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", J(e)],
+			onClick: (t) => Y(e, t)
+		}), {
+			default: S(() => [
+				e.icon ? (m(), r(_(e.icon), {
+					key: 0,
+					class: f(["size-4 shrink-0", !e.tone && !U(e) && "text-muted group-hover:text-heading"]),
+					"aria-hidden": "true"
+				}, null, 8, ["class"])) : i("", !0),
+				o("span", be, v(e.label), 1),
+				e.badge !== void 0 && e.badge !== "" ? (m(), a("span", {
+					key: 1,
+					class: f(["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", D[e.badgeColor ?? "neutral"]])
+				}, v(e.badge), 3)) : i("", !0)
+			]),
+			_: 2
+		}, 1040, ["class", "onClick"]))]))), 128))], 10, ye)], 64)) : (m(), r(_(K(e)), u({
+			key: 0,
+			ref_for: !0
+		}, q(e), {
+			"data-side-tab": "",
+			class: ["group relative flex h-8 w-full items-center gap-2.5 rounded-6 text-left text-base no-underline transition-colors duration-100 select-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", [J(e), B.value ? "justify-center" : "px-2.5"]],
+			title: B.value ? e.label : void 0,
+			onClick: (t) => Y(e, t)
+		}), {
+			default: S(() => [
+				e.icon || B.value ? (m(), a("span", {
+					key: 0,
+					class: f(["inline-flex size-4 shrink-0 items-center justify-center", !e.tone && !U(e) && "text-muted group-hover:text-heading"]),
+					"aria-hidden": "true"
+				}, [e.icon ? (m(), r(_(e.icon), {
+					key: 0,
+					class: "size-4"
+				})) : (m(), a("span", ge, v(e.label.charAt(0)), 1))], 2)) : i("", !0),
+				o("span", { class: f(B.value ? "sr-only" : "min-w-0 flex-1 truncate") }, v(e.label), 3),
+				e.badge !== void 0 && e.badge !== "" ? (m(), a(t, { key: 1 }, [B.value ? (m(), a("span", {
+					key: 0,
+					class: f(["absolute top-1 right-1 size-1.5 rounded-full", we[e.badgeColor ?? "neutral"]]),
+					"aria-hidden": "true"
+				}, null, 2)) : (m(), a("span", {
+					key: 1,
+					class: f(["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", D[e.badgeColor ?? "neutral"]])
+				}, v(e.badge), 3))], 64)) : i("", !0)
+			]),
+			_: 2
+		}, 1040, [
+			"class",
+			"title",
+			"onClick"
+		]))]))), 128))])]))), 128)), s.collapsible ? (m(), a("button", {
+			key: 0,
+			type: "button",
+			class: f(["mt-auto flex h-8 w-full cursor-pointer items-center gap-2.5 rounded-6 text-base text-muted transition-colors hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", B.value ? "justify-center" : "px-2.5"]),
+			"aria-label": B.value ? `Expand ${s.label}` : `Collapse ${s.label}`,
+			"aria-expanded": !T.value,
+			title: B.value ? "Expand" : void 0,
+			onClick: c[0] ||= (e) => T.value = !T.value
+		}, [B.value ? (m(), r(y(le), {
+			key: 0,
+			class: "size-4 shrink-0",
+			"aria-hidden": "true"
+		})) : (m(), r(y(ce), {
+			key: 1,
+			class: "size-4 shrink-0",
+			"aria-hidden": "true"
+		})), B.value ? i("", !0) : (m(), a("span", Se, "Collapse"))], 10, xe)) : i("", !0)], 46, fe)], 4))], 64)), z.value ? (m(), a("div", Ce, [ie(n.$slots, "default", {
+			active: w.value,
+			compact: P.value
+		})])) : i("", !0)], 2));
+	}
+});
+//#endregion
+export { C as default };

package/dist/lib/components/AcSidebar.js

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

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

@@ -0,0 +1,63 @@
+export interface Props {
+    /** Accessible name of the navigation landmark. */
+    label?: string;
+    /** Dark sidebar on `bg-sidebar` in both themes, like the old library's default look. Everything inside uses the dark tokens. */
+    dark?: boolean;
+    /** Shows a Collapse button at the bottom that toggles `v-model:collapsed`. It's hidden in the mobile drawer. */
+    collapsible?: boolean;
+    /** Keeps the sidebar inside its parent instead of the viewport: the mobile drawer and backdrop use `absolute`, and the mobile layout follows the parent's width. Give the parent `relative`, `overflow-hidden` and a height. For previews and embedded shells. */
+    contained?: boolean;
+    /** Width in px below which the sidebar becomes an off-canvas drawer: the window's width, or the parent's with `contained`. `0` keeps it docked. */
+    breakpoint?: number;
+    /** With the sidebar collapsed to the rail, opens it to full width over the page while the pointer or keyboard focus is inside, then folds it back. The page doesn't shift. */
+    hoverExpand?: boolean;
+    /** Offset from the top of the viewport on desktop, e.g. `"56px"` under a full-width navbar. The height shrinks to match. */
+    top?: string;
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** The 56px top bar: logo or cluster switcher. Receives `collapsed` so you can show a small logo in the rail. */
+    header?: (props: {
+        collapsed: boolean;
+    }) => unknown;
+    /** Sections (`AcSidebarSection`) and items (`AcSidebarItem`). Rendered inside a list. */
+    default?: () => unknown;
+    /** Items pinned to the bottom, such as Help. Rendered inside a list, above the Collapse button. */
+    footer?: (props: {
+        collapsed: boolean;
+    }) => unknown;
+};
+/** Collapses or expands on desktop, and opens or closes the drawer on mobile. Wire it to a navbar menu button. */
+declare function toggle(): void;
+type __VLS_ModelProps = {
+    /** Icon-only 56px rail on desktop. Bind with `v-model:collapsed`. */
+    "collapsed"?: boolean;
+    /** Whether the off-canvas drawer is open (below `breakpoint`). Bind with `v-model:mobile-open`. */
+    "mobileOpen"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    toggle: typeof toggle;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:collapsed": (value: boolean) => any;
+    "update:mobileOpen": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
+    "onUpdate:mobileOpen"?: ((value: boolean) => any) | undefined;
+}>, {
+    label: string;
+    top: string;
+    dark: boolean;
+    collapsible: boolean;
+    contained: boolean;
+    breakpoint: number;
+    hoverExpand: 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;
+    };
+};