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

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

@@ -0,0 +1,258 @@
+import e from "./AcThemeMode.js";
+import t from "./AcFontScale.js";
+import { Fragment as n, Teleport as r, Transition as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, getCurrentInstance as p, mergeModels as m, mergeProps as ee, nextTick as h, normalizeClass as g, normalizeStyle as te, onBeforeUnmount as ne, openBlock as _, ref as v, renderList as y, renderSlot as b, resolveDynamicComponent as x, toDisplayString as S, unref as C, useId as re, useModel as ie, watch as w, withCtx as T } from "vue";
+import { ChevronDown as ae, LogOut as oe } from "@lucide/vue";
+//#region src/lib/components/AcUserMenu.vue?vue&type=script&setup=true&lang.ts
+var se = {
+	class: "inline-flex",
+	"data-ac-ds": "",
+	"data-testid": "ac-user-menu"
+}, ce = [
+	"aria-expanded",
+	"aria-controls",
+	"aria-label"
+], le = {
+	class: "inline-flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary-90 text-xs font-semibold text-primary-20 ring-1 ring-border",
+	"aria-hidden": "true"
+}, ue = ["src"], de = { class: "hidden max-w-36 truncate text-base font-medium text-heading sm:block" }, E = {
+	class: "inline-flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary-90 text-base font-semibold text-primary-20 ring-1 ring-border",
+	"aria-hidden": "true"
+}, D = ["src"], fe = { class: "min-w-0 flex-1" }, pe = { class: "block truncate text-base font-medium text-heading" }, me = {
+	key: 0,
+	class: "block truncate text-xs text-muted"
+}, he = {
+	key: 0,
+	role: "group",
+	class: "flex flex-col gap-px p-1"
+}, ge = { class: "min-w-0 flex-1 truncate" }, _e = ["aria-labelledby"], ve = ["id"], ye = ["aria-labelledby"], be = ["id"], O = {
+	role: "group",
+	class: "border-t border-border-light p-1"
+}, k = "flex h-8 w-full cursor-pointer items-center gap-2.5 rounded-6 px-2.5 text-left text-base text-body outline-none transition-colors hover:bg-surface-muted hover:text-heading focus-visible:bg-surface-muted focus-visible:text-heading aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-muted", A = "[role=\"menuitem\"]:not([aria-disabled=\"true\"]), [role=\"radio\"]", j = /*@__PURE__*/ f({
+	__name: "AcUserMenu",
+	props: /*@__PURE__*/ m({
+		name: {},
+		email: { default: "" },
+		avatarUrl: { default: "" },
+		profileUrl: { default: "" },
+		items: { default: () => [] },
+		showThemeMode: {
+			type: Boolean,
+			default: !1
+		},
+		showFontScale: {
+			type: Boolean,
+			default: !1
+		},
+		showName: {
+			type: Boolean,
+			default: !0
+		},
+		logoutUrl: { default: "" },
+		logoutLabel: { default: "Sign out" }
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ m([
+		"select",
+		"logout",
+		"set:theme"
+	], ["update:open"]),
+	setup(f, { emit: m }) {
+		let j = f, M = ie(f, "open"), N = m, P = p()?.appContext.components.RouterLink, F = re(), I = `${F}-trigger`, L = `${F}-menu`, R = v(null), z = v(null), B = v(!1), V = v({
+			top: 0,
+			right: 0
+		}), H = a(() => {
+			let e = j.name.trim().split(/[\s._-]+/).filter(Boolean);
+			return e.length ? (e[0].charAt(0) + (e.length > 1 ? e[e.length - 1].charAt(0) : "")).toUpperCase() : "?";
+		}), U = a(() => !!j.avatarUrl && !B.value);
+		function W(e) {
+			return e.to && P && !e.disabled ? P : e.to || e.href ? "a" : "button";
+		}
+		function xe(e) {
+			let t = W(e);
+			return t === P ? { to: e.to } : t === "a" ? e.disabled ? { "aria-disabled": "true" } : { href: e.href ?? (typeof e.to == "string" ? e.to : void 0) } : {
+				type: "button",
+				"aria-disabled": e.disabled ? "true" : void 0
+			};
+		}
+		function G() {
+			return [...z.value?.querySelectorAll(A) ?? []];
+		}
+		function K(e) {
+			let t = G();
+			t.length && t[(e + t.length) % t.length].focus();
+		}
+		function q() {
+			let e = R.value;
+			if (!e) return;
+			let t = e.getBoundingClientRect(), n = z.value?.offsetHeight ?? 320, r = Math.max(8, window.innerWidth - t.right), i = window.innerHeight - t.bottom - 6 - 8;
+			V.value = i < n && t.top > i ? {
+				bottom: window.innerHeight - t.top + 6,
+				right: r
+			} : {
+				top: t.bottom + 6,
+				right: r
+			};
+		}
+		async function J(e = "first") {
+			M.value = !0, await h(), q(), K(e === "first" ? 0 : -1);
+		}
+		function Y(e = !0) {
+			M.value && (M.value = !1, e && R.value?.focus());
+		}
+		function X(e) {
+			[
+				"Enter",
+				" ",
+				"ArrowDown"
+			].includes(e.key) ? (e.preventDefault(), J("first")) : e.key === "ArrowUp" && (e.preventDefault(), J("last"));
+		}
+		function Se(e) {
+			let t = G().indexOf(document.activeElement);
+			e.key === "ArrowDown" ? (e.preventDefault(), K(t + 1)) : e.key === "ArrowUp" ? (e.preventDefault(), K(t - 1)) : e.key === "Home" ? (e.preventDefault(), K(0)) : e.key === "End" ? (e.preventDefault(), K(-1)) : e.key === "Escape" ? (e.preventDefault(), e.stopPropagation(), Y()) : e.key === "Tab" && Y();
+		}
+		function Ce(e) {
+			e.disabled || (N("select", e), Y());
+		}
+		function we() {
+			N("logout"), Y(!1);
+		}
+		function Z(e) {
+			let t = e.target;
+			R.value?.contains(t) || z.value?.contains(t) || Y(!1);
+		}
+		function Q() {
+			q();
+		}
+		function $() {
+			document.removeEventListener("pointerdown", Z, !0), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q);
+		}
+		return w(M, (e) => {
+			if (!e) return $();
+			document.addEventListener("pointerdown", Z, !0), window.addEventListener("scroll", Q, !0), window.addEventListener("resize", Q), h(q);
+		}), w(() => j.avatarUrl, () => B.value = !1), ne($), (a, p) => (_(), c("div", se, [l("button", {
+			id: I,
+			ref_key: "trigger",
+			ref: R,
+			type: "button",
+			"aria-haspopup": "menu",
+			"aria-expanded": M.value,
+			"aria-controls": M.value ? L : void 0,
+			"aria-label": `${f.name}, account menu`,
+			class: g(["group inline-flex h-8 shrink-0 cursor-pointer items-center gap-2 rounded-50 p-0.5 transition-colors hover:bg-surface-sunken focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", [f.showName && "sm:pr-2", M.value && "bg-surface-sunken"]]),
+			"data-ac-ds": "",
+			"data-testid": "ac-user-menu-trigger",
+			onClick: p[1] ||= (e) => M.value ? Y() : J(),
+			onKeydown: X
+		}, [l("span", le, [U.value ? (_(), c("img", {
+			key: 0,
+			src: f.avatarUrl,
+			alt: "",
+			class: "size-full object-cover",
+			onError: p[0] ||= (e) => B.value = !0
+		}, null, 40, ue)) : (_(), c(n, { key: 1 }, [u(S(H.value), 1)], 64))]), f.showName ? (_(), c(n, { key: 0 }, [l("span", de, S(f.name), 1), d(C(ae), {
+			class: g(["hidden size-3.5 shrink-0 text-muted transition-transform duration-150 motion-reduce:transition-none sm:block", M.value && "rotate-180"]),
+			"aria-hidden": "true"
+		}, null, 8, ["class"])], 64)) : s("", !0)], 42, ce), (_(), o(r, { to: "body" }, [d(i, {
+			"enter-active-class": "transition duration-150 ease-out motion-reduce:transition-none",
+			"enter-from-class": "opacity-0 -translate-y-1 scale-[0.98]",
+			"leave-active-class": "transition duration-100 ease-in",
+			"leave-to-class": "opacity-0"
+		}, {
+			default: T(() => [M.value ? (_(), c("div", {
+				key: 0,
+				id: L,
+				ref_key: "panel",
+				ref: z,
+				role: "menu",
+				"aria-labelledby": I,
+				class: "fixed z-[90] w-72 max-w-[calc(100vw-16px)] overflow-hidden rounded-10 border border-border bg-surface shadow-lg",
+				style: te({
+					top: V.value.top === void 0 ? void 0 : `${V.value.top}px`,
+					bottom: V.value.bottom === void 0 ? void 0 : `${V.value.bottom}px`,
+					right: `${V.value.right}px`
+				}),
+				"data-ac-ds": "",
+				"data-testid": "ac-user-menu-panel",
+				onKeydown: Se
+			}, [
+				(_(), o(x(f.profileUrl ? "a" : "div"), {
+					href: f.profileUrl || void 0,
+					role: f.profileUrl ? "menuitem" : "presentation",
+					tabindex: f.profileUrl ? -1 : void 0,
+					class: g(["flex items-center gap-3 border-b border-border-light px-3.5 py-3 outline-none", f.profileUrl && "transition-colors hover:bg-surface-muted focus-visible:bg-surface-muted"])
+				}, {
+					default: T(() => [l("span", E, [U.value ? (_(), c("img", {
+						key: 0,
+						src: f.avatarUrl,
+						alt: "",
+						class: "size-full object-cover",
+						onError: p[2] ||= (e) => B.value = !0
+					}, null, 40, D)) : (_(), c(n, { key: 1 }, [u(S(H.value), 1)], 64))]), l("span", fe, [l("span", pe, S(f.name), 1), f.email ? (_(), c("span", me, S(f.email), 1)) : s("", !0)])]),
+					_: 1
+				}, 8, [
+					"href",
+					"role",
+					"tabindex",
+					"class"
+				])),
+				f.items.length || a.$slots.default ? (_(), c("div", he, [(_(!0), c(n, null, y(f.items, (e) => (_(), o(x(W(e)), ee({ key: e.label }, { ref_for: !0 }, xe(e), {
+					role: "menuitem",
+					tabindex: "-1",
+					class: k,
+					onClick: (t) => Ce(e)
+				}), {
+					default: T(() => [e.icon ? (_(), o(x(e.icon), {
+						key: 0,
+						"aria-hidden": "true"
+					})) : s("", !0), l("span", ge, S(e.label), 1)]),
+					_: 2
+				}, 1040, ["onClick"]))), 128)), b(a.$slots, "default", {
+					close: Y,
+					itemClass: k
+				})])) : s("", !0),
+				f.showThemeMode ? (_(), c("div", {
+					key: 1,
+					role: "group",
+					"aria-labelledby": `${C(F)}-theme`,
+					class: "border-t border-border-light px-3.5 py-2.5"
+				}, [l("p", {
+					id: `${C(F)}-theme`,
+					class: "mb-1.5 text-xs font-medium text-label"
+				}, "Theme", 8, ve), d(e, {
+					display: "labels",
+					"onSet:theme": p[3] ||= (e) => N("set:theme", e)
+				})], 8, _e)) : s("", !0),
+				f.showFontScale ? (_(), c("div", {
+					key: 2,
+					role: "group",
+					"aria-labelledby": `${C(F)}-scale`,
+					class: "border-t border-border-light px-3.5 py-2.5"
+				}, [l("p", {
+					id: `${C(F)}-scale`,
+					class: "mb-1.5 text-xs font-medium text-label"
+				}, "Text size", 8, be), d(t, { display: "labels" })], 8, ye)) : s("", !0),
+				l("div", O, [(_(), o(x(f.logoutUrl ? "a" : "button"), {
+					href: f.logoutUrl || void 0,
+					type: f.logoutUrl ? void 0 : "button",
+					role: "menuitem",
+					tabindex: "-1",
+					class: g(k),
+					"data-ac-ds": "",
+					"data-testid": "ac-user-menu-logout",
+					onClick: we
+				}, {
+					default: T(() => [d(C(oe), { "aria-hidden": "true" }), l("span", null, S(f.logoutLabel), 1)]),
+					_: 1
+				}, 8, ["href", "type"]))])
+			], 36)) : s("", !0)]),
+			_: 3
+		})]))]));
+	}
+});
+//#endregion
+export { j as default };

package/dist/lib/components/index.d.ts

@@ -0,0 +1,76 @@
+export { default as AcAccordion } from "./AcAccordion.vue";
+export { default as AcAccordionItem } from "./AcAccordionItem.vue";
+export { default as AcAlert } from "./AcAlert.vue";
+export { default as AcAppSwitcher } from "./AcAppSwitcher.vue";
+export { default as AcAvatar } from "./AcAvatar.vue";
+export { default as AcBadge } from "./AcBadge.vue";
+export { default as AcBanner } from "./AcBanner.vue";
+export { default as AcBreadcrumb } from "./AcBreadcrumb.vue";
+export { default as AcButton } from "./AcButton.vue";
+export { default as AcButtons } from "./AcButtons.vue";
+export { default as AcCard } from "./AcCard.vue";
+export { default as AcPage } from "./AcPage.vue";
+export { default as AcCellValue } from "./AcCellValue.vue";
+export { default as AcCheckBox } from "./AcCheckBox.vue";
+export { default as AcCheckRadio } from "./AcCheckRadio.vue";
+export { default as AcClusterSwitcher } from "./AcClusterSwitcher.vue";
+export { default as AcContentHeader } from "./AcContentHeader.vue";
+export { default as AcContentLayout } from "./AcContentLayout.vue";
+export { default as AcContentTable } from "./AcContentTable.vue";
+export { default as AcDatePicker } from "./AcDatePicker.vue";
+export { default as AcDeleteConfirmationModal } from "./AcDeleteModal.vue";
+export { default as AcDeleteModal } from "./AcDeleteModal.vue";
+export { default as AcDivider } from "./AcDivider.vue";
+export { default as AcDropdown } from "./AcDropdown.vue";
+export { default as AcDropdownDivider } from "./AcDropdownDivider.vue";
+export { default as AcDropdownItem } from "./AcDropdownItem.vue";
+export { default as AcEmptyState } from "./AcEmptyState.vue";
+export { default as AcFeatureCard } from "./AcFeatureCard.vue";
+export { default as AcFileUpload } from "./AcFileUpload.vue";
+export { default as AcForm } from "./AcForm.vue";
+export { default as AcFormArray } from "./AcFormArray.vue";
+export { default as AcFormFooter } from "./AcFormFooter.vue";
+export { default as AcFormSection } from "./AcFormSection.vue";
+export { default as AcHeader } from "./AcHeader.vue";
+export { default as AcHeaderItem } from "./AcHeaderItem.vue";
+export { default as AcHeaderItems } from "./AcHeaderItems.vue";
+export { default as AcInfoTable } from "./AcInfoTable.vue";
+export { default as AcInput } from "./AcInput.vue";
+export { default as AcKbd } from "./AcKbd.vue";
+export { default as AcLogo } from "./AcLogo.vue";
+export { default as AcModal } from "./AcModal.vue";
+export { default as AcNavbar } from "./AcNavbar.vue";
+export { default as AcNavbarItem } from "./AcNavbarItem.vue";
+export { default as AcNotificationMenu } from "./AcNotificationMenu.vue";
+export { default as AcPagination } from "./AcPagination.vue";
+export { default as AcPreloader } from "./AcPreloader.vue";
+export { default as AcProgress } from "./AcProgress.vue";
+export { default as AcResourceCard } from "./AcResourceCard.vue";
+export { default as AcSearchBar } from "./AcSearchBar.vue";
+export { default as AcSectionContent } from "./AcSectionContent.vue";
+export { default as AcSegmentedControl } from "./AcSegmentedControl.vue";
+export { default as AcSelect } from "./AcSelect.vue";
+export { default as AcSidebar } from "./AcSidebar.vue";
+export { default as AcSidebarItem } from "./AcSidebarItem.vue";
+export { default as AcSidebarSection } from "./AcSidebarSection.vue";
+export { default as AcSidePanel } from "./AcSidePanel.vue";
+export { default as AcSideTabs } from "./AcSideTabs.vue";
+export { default as AcSkeleton } from "./AcSkeleton.vue";
+export { default as AcSlider } from "./AcSlider.vue";
+export { default as AcSpinner } from "./AcSpinner.vue";
+export { default as AcStatCard } from "./AcStatCard.vue";
+export { default as AcStatusBar } from "./AcStatusBar.vue";
+export { default as AcSteps } from "./AcSteps.vue";
+export { default as AcSwitch } from "./AcSwitch.vue";
+export { default as AcTable } from "./AcTable.vue";
+export { default as AcTabs } from "./AcTabs.vue";
+export { default as AcTag } from "./AcTag.vue";
+export { default as AcTextarea } from "./AcTextarea.vue";
+export { default as AcThemeMode } from "./AcThemeMode.vue";
+export { default as AcFontScale } from "./AcFontScale.vue";
+export { default as AcToaster } from "./AcToaster.vue";
+export { default as AcTooltip } from "./AcTooltip.vue";
+export { default as AcUsageCard } from "./AcUsageCard.vue";
+export { default as AcUserMenu } from "./AcUserMenu.vue";
+/** Alias of AcDeleteModal under the old library's name. */
+export type * from "./types";

package/dist/lib/components/types.d.ts

@@ -0,0 +1,16 @@
+export type Tone = "primary" | "info" | "success" | "warning" | "danger";
+export type Variant = "solid" | "light" | "outlined";
+export interface Option<T = unknown> {
+    value: T;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+export interface SelectOption<V = string | number> {
+    value: V;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+    /** Options with the same group are listed under that heading. */
+    group?: string;
+}

package/dist/lib/composables/useBrandColor.d.ts

@@ -0,0 +1,53 @@
+/** A brand colour as numbers: hue 0–360, saturation and lightness 0–100. */
+export interface BrandHsl {
+    hue: number;
+    saturation: number;
+    lightness: number;
+}
+/** The shape the old `@appscode/design-system/plugins/theme` returned: strings, with `%` on saturation and lightness. */
+export interface LegacyHsl {
+    hue: string;
+    saturation: string;
+    lightness: string;
+}
+export interface SetBrandColorOptions {
+    /** Darkens the colour, keeping its hue, until white text on it reaches 4.5:1. */
+    ensureContrast?: boolean;
+}
+/** WCAG AA for normal-size text. */
+export declare const MIN_CONTRAST = 4.5;
+/** Parses `#rgb` or `#rrggbb` (the `#` is optional). Returns `null` for anything else. */
+export declare function hexToHsl(hex: string): BrandHsl | null;
+/** Converts an HSL colour to `#rrggbb`. */
+export declare function hslToHex(color: BrandHsl): string;
+/** WCAG contrast ratio of white text on the colour, from 1 to 21. Solid buttons put white text on `bg-primary`. */
+export declare function contrastOnWhite(color: BrandHsl): number;
+/** The highest lightness (in whole percent) at which white text on this hue and saturation still reaches `target`. */
+export declare function readableLightness(hue: number, saturation: number, target?: number): number;
+/**
+ * The runtime brand colour. It writes `--primary-hue`, `--primary-saturation` and `--primary-light`
+ * on <html>, which re-hues every `primary-*` step. State is shared by every caller.
+ * With `persist`, the colour is saved in localStorage (the old apps' `themeColor` key) and restored on first use.
+ */
+export declare function useBrandColor(options?: {
+    persist?: boolean;
+}): {
+    color: import("vue").ComputedRef<string>;
+    hsl: import("vue").ComputedRef<{
+        hue: number;
+        saturation: number;
+        lightness: number;
+    } | null>;
+    contrast: import("vue").ComputedRef<number>;
+    isReadable: import("vue").ComputedRef<boolean>;
+    setColor: (hex: string, setOptions?: SetBrandColorOptions) => boolean;
+    reset: () => void;
+};
+/** @deprecated Use `hexToHsl`. Same output as the old plugin: `{ hue: "208", saturation: "77%", lightness: "40%" }`. */
+export declare function HexToHSL(hex: string): LegacyHsl;
+/** @deprecated Use `hslToHex`. Takes numbers, like the old plugin. */
+export declare function HSLToHex(h: number, s: number, l: number): string;
+/** @deprecated Use `useBrandColor().hsl`. Reads the three variables from :root as strings. */
+export declare function getThemeHSL(): LegacyHsl;
+/** @deprecated Use `useBrandColor().setColor(hex)`. Writes the three variables on :root; pass `%` on saturation and lightness. */
+export declare function setThemeHSL(h: string | number, s: string, l: string): void;

package/dist/lib/composables/useBrandColor.js

@@ -0,0 +1,148 @@
+import { computed as e, ref as t } from "vue";
+//#region src/lib/composables/useBrandColor.ts
+var n = "themeColor", r = [
+	"--primary-hue",
+	"--primary-saturation",
+	"--primary-light"
+], i = 4.5, a = t(null), o = !1;
+function s(e, t, n) {
+	return Math.min(n, Math.max(t, e));
+}
+function c(e) {
+	let t = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(e.trim());
+	if (!t) return null;
+	let n = t[1].length === 3 ? [...t[1]].map((e) => e + e).join("") : t[1], [r, i, a] = [
+		0,
+		2,
+		4
+	].map((e) => parseInt(n.slice(e, e + 2), 16) / 255), o = Math.max(r, i, a), s = Math.min(r, i, a), c = o - s, l = (o + s) / 2, u = 0;
+	c && (u = o === r ? (i - a) / c % 6 : o === i ? (a - r) / c + 2 : (r - i) / c + 4), u = Math.round(u * 60), u < 0 && (u += 360);
+	let d = c ? c / (1 - Math.abs(2 * l - 1)) : 0;
+	return {
+		hue: u,
+		saturation: +(d * 100).toFixed(1),
+		lightness: +(l * 100).toFixed(1)
+	};
+}
+function l({ hue: e, saturation: t, lightness: n }) {
+	let r = s(t, 0, 100) / 100, i = s(n, 0, 100) / 100, a = (t) => (t + e / 30) % 12, o = r * Math.min(i, 1 - i), c = (e) => i - o * Math.max(-1, Math.min(a(e) - 3, 9 - a(e), 1));
+	return [
+		c(0),
+		c(8),
+		c(4)
+	];
+}
+function u(e) {
+	return `#${l(e).map((e) => Math.round(e * 255).toString(16).padStart(2, "0")).join("")}`;
+}
+function d(e) {
+	let [t, n, r] = l(e).map((e) => e <= .04045 ? e / 12.92 : ((e + .055) / 1.055) ** 2.4);
+	return 1.05 / (.2126 * t + .7152 * n + .0722 * r + .05);
+}
+function f(e, t, n = i) {
+	for (let r = 100; r > 0; r--) if (d({
+		hue: e,
+		saturation: t,
+		lightness: r
+	}) >= n) return r;
+	return 0;
+}
+function p() {
+	if (typeof document > "u") return null;
+	let e = getComputedStyle(document.documentElement), [t, n, i] = r.map((t) => parseFloat(e.getPropertyValue(t)));
+	return [
+		t,
+		n,
+		i
+	].some((e) => Number.isNaN(e)) ? null : {
+		hue: t,
+		saturation: n,
+		lightness: i
+	};
+}
+function m(e) {
+	let t = document.documentElement.style;
+	t.setProperty("--primary-hue", String(e.hue)), t.setProperty("--primary-saturation", `${e.saturation}%`), t.setProperty("--primary-light", `${e.lightness}%`), a.value = e;
+}
+function h() {
+	try {
+		return localStorage.getItem(n);
+	} catch {
+		return null;
+	}
+}
+function g(t = {}) {
+	if (typeof document < "u") {
+		if (t.persist && !o) {
+			o = !0;
+			let e = h(), t = e ? c(e) : null;
+			t && m(t);
+		}
+		a.value = p();
+	}
+	let s = e(() => a.value), l = e(() => a.value ? u(a.value) : ""), g = e(() => a.value ? d(a.value) : 0), _ = e(() => g.value >= i);
+	function v(e, r = {}) {
+		let i = c(e);
+		if (!i || typeof document > "u") return !1;
+		let a = r.ensureContrast ? {
+			...i,
+			lightness: Math.min(i.lightness, f(i.hue, i.saturation))
+		} : i;
+		if (m(a), t.persist) try {
+			localStorage.setItem(n, u(a));
+		} catch {}
+		return !0;
+	}
+	function y() {
+		if (typeof document < "u" && (r.forEach((e) => document.documentElement.style.removeProperty(e)), a.value = p(), t.persist)) try {
+			localStorage.removeItem(n);
+		} catch {}
+	}
+	return {
+		color: l,
+		hsl: s,
+		contrast: g,
+		isReadable: _,
+		setColor: v,
+		reset: y
+	};
+}
+function _(e) {
+	let t = c(e) ?? {
+		hue: 0,
+		saturation: 0,
+		lightness: 0
+	};
+	return {
+		hue: String(t.hue),
+		saturation: `${t.saturation}%`,
+		lightness: `${t.lightness}%`
+	};
+}
+function v(e, t, n) {
+	return u({
+		hue: e,
+		saturation: t,
+		lightness: n
+	});
+}
+function y() {
+	if (typeof document > "u") return {
+		hue: "",
+		saturation: "",
+		lightness: ""
+	};
+	let e = getComputedStyle(document.documentElement), [t, n, i] = r.map((t) => e.getPropertyValue(t).trim());
+	return {
+		hue: t,
+		saturation: n,
+		lightness: i
+	};
+}
+function b(e, t, n) {
+	if (typeof document > "u") return;
+	let r = document.documentElement.style;
+	r.setProperty("--primary-hue", String(e)), r.setProperty("--primary-saturation", t), r.setProperty("--primary-light", n), a.value = p();
+}
+//#endregion
+export { v as HSLToHex, _ as HexToHSL, i as MIN_CONTRAST, d as contrastOnWhite, y as getThemeHSL, c as hexToHsl, u as hslToHex, f as readableLightness, b as setThemeHSL, g as useBrandColor };

package/dist/lib/composables/useColorMode.d.ts

@@ -0,0 +1,12 @@
+export type ColorMode = "light" | "dark" | "system";
+/**
+ * The app-wide light/dark/system choice. State is shared by every caller;
+ * it toggles `.dark` and `.is-dark-theme` on <html> and remembers the choice in localStorage.
+ */
+export declare function useColorMode(options?: {
+    defaultMode?: ColorMode;
+}): {
+    mode: import("vue").ComputedRef<ColorMode>;
+    isDark: import("vue").ComputedRef<boolean>;
+    setMode: (next: ColorMode) => void;
+};

package/dist/lib/composables/useColorMode.js

@@ -0,0 +1,40 @@
+import { computed as e, ref as t } from "vue";
+//#region src/lib/composables/useColorMode.ts
+var n = "themeMode", r = t("light"), i = t(!1), a = !1;
+function o() {
+	try {
+		let e = localStorage.getItem(n);
+		return e === "light" || e === "dark" || e === "system" ? e : null;
+	} catch {
+		return null;
+	}
+}
+function s(e) {
+	let t = document.documentElement;
+	t.classList.toggle("dark", e), t.classList.toggle("is-dark-theme", e);
+}
+function c(e) {
+	if (a || typeof window > "u") return;
+	a = !0, r.value = o() ?? e;
+	let t = window.matchMedia("(prefers-color-scheme: dark)");
+	i.value = t.matches, t.addEventListener("change", (e) => {
+		i.value = e.matches, s(l.value);
+	}), s(l.value);
+}
+var l = e(() => r.value === "system" ? i.value : r.value === "dark");
+function u(t = {}) {
+	c(t.defaultMode ?? "light");
+	function i(e) {
+		r.value = e, s(l.value);
+		try {
+			localStorage.setItem(n, e);
+		} catch {}
+	}
+	return {
+		mode: e(() => r.value),
+		isDark: l,
+		setMode: i
+	};
+}
+//#endregion
+export { u as useColorMode };

package/dist/lib/composables/useFontScale.d.ts

@@ -0,0 +1,16 @@
+/** `small` 0.92, `default` 1, `large` 1.1, `larger` 1.2 — or any number between 0.8 and 1.5. */
+export type FontScale = "small" | "default" | "large" | "larger";
+export declare const FONT_SCALES: Record<FontScale, number>;
+/**
+ * The app-wide interface scale. It writes `--ac-scale` on <html>; text, line heights, spacing and radii are all
+ * multiples of it, so the whole interface grows or shrinks in proportion. State is shared by every caller and
+ * remembered in localStorage.
+ */
+export declare function useFontScale(options?: {
+    defaultScale?: number;
+}): {
+    scale: import("vue").ComputedRef<number>;
+    preset: import("vue").ComputedRef<FontScale | null>;
+    setScale: (next: FontScale | number) => void;
+    presets: Record<FontScale, number>;
+};

package/dist/lib/composables/useFontScale.js

@@ -0,0 +1,43 @@
+import { computed as e, ref as t } from "vue";
+//#region src/lib/composables/useFontScale.ts
+var n = {
+	small: .92,
+	default: 1,
+	large: 1.1,
+	larger: 1.2
+}, r = "uiScale", i = .8, a = 1.5, o = t(1), s = !1;
+function c(e) {
+	return Math.min(a, Math.max(i, Math.round(e * 100) / 100));
+}
+function l() {
+	try {
+		let e = localStorage.getItem(r), t = e === null ? NaN : Number(e);
+		return Number.isFinite(t) ? c(t) : null;
+	} catch {
+		return null;
+	}
+}
+function u(e) {
+	document.documentElement.style.setProperty("--ac-scale", String(e)), window.dispatchEvent(new Event("ac-scale"));
+}
+function d(e) {
+	s || typeof window > "u" || (s = !0, o.value = l() ?? c(e), u(o.value));
+}
+function f(t = {}) {
+	d(t.defaultScale ?? 1);
+	function i(e) {
+		o.value = c(typeof e == "number" ? e : n[e]), u(o.value);
+		try {
+			localStorage.setItem(r, String(o.value));
+		} catch {}
+	}
+	let a = e(() => Object.keys(n).find((e) => n[e] === o.value) ?? null);
+	return {
+		scale: e(() => o.value),
+		preset: a,
+		setScale: i,
+		presets: n
+	};
+}
+//#endregion
+export { n as FONT_SCALES, f as useFontScale };