@filipgutica/ui 1.2.0 → 1.4.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, inject as l, mergeModels as u, mergeProps as d, normalizeStyle as f, onMounted as p, onUnmounted as m, openBlock as h, provide as g, readonly as _, ref as v, renderList as y, renderSlot as b, resolveDynamicComponent as x, shallowRef as ee, toDisplayString as S, unref as C, useId as te, useModel as w, useSlots as T, watch as E, withCtx as D } from "vue";
-import { CheckboxIndicator as O, CheckboxRoot as ne, DialogClose as k, DialogContent as A, DialogDescription as j, DialogOverlay as M, DialogPortal as N, DialogRoot as P, DialogTitle as F, DialogTrigger as I, Primitive as L, ProgressIndicator as R, ProgressRoot as z, RadioGroupItem as B, RadioGroupRoot as V, SliderRange as H, SliderRoot as U, SliderThumb as W, SliderTrack as G } from "reka-ui";
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, inject as l, mergeModels as u, mergeProps as d, normalizeStyle as f, onMounted as p, onUnmounted as m, openBlock as h, provide as g, readonly as _, ref as v, renderList as y, renderSlot as b, resolveDynamicComponent as x, shallowRef as S, toDisplayString as C, unref as w, useId as T, useModel as E, useSlots as ee, watch as te, withCtx as D } from "vue";
+import { CheckboxIndicator as O, CheckboxRoot as k, DialogClose as A, DialogContent as j, DialogDescription as ne, DialogOverlay as M, DialogPortal as N, DialogRoot as P, DialogTitle as F, DialogTrigger as I, Primitive as L, ProgressIndicator as R, ProgressRoot as z, RadioGroupItem as B, RadioGroupRoot as V, SliderRange as H, SliderRoot as U, SliderThumb as W, SliderTrack as G } from "reka-ui";
 import { useTimeoutFn as K } from "@vueuse/core";
 //#endregion
 //#region src/components/UiButton.vue
@@ -19,7 +19,7 @@ var q = /* @__PURE__ */ c({
 		variant: { default: "primary" }
 	},
 	setup(e) {
-		return (t, r) => (h(), n(C(L), {
+		return (t, r) => (h(), n(w(L), {
 			as: "button",
 			class: "fg-button",
 			"data-size": e.size,
@@ -57,30 +57,46 @@ var q = /* @__PURE__ */ c({
 		titleTag: { default: "h3" }
 	},
 	setup(e) {
-		let t = T();
+		let t = ee();
 		return (a, s) => (h(), i("div", J, [
 			e.title || t.title || t.actions ? (h(), i("header", Y, [e.title || t.title ? (h(), n(x(e.titleTag), {
 				key: 0,
 				class: "fg-card__title"
 			}, {
-				default: D(() => [b(a.$slots, "title", {}, () => [o(S(e.title), 1)])]),
+				default: D(() => [b(a.$slots, "title", {}, () => [o(C(e.title), 1)])]),
 				_: 3
 			})) : r("", !0), t.actions ? (h(), i("div", X, [b(a.$slots, "actions")])) : r("", !0)])) : r("", !0),
 			t.default ? (h(), i("div", Z, [b(a.$slots, "default")])) : r("", !0),
 			t.footer ? (h(), i("footer", re, [b(a.$slots, "footer")])) : r("", !0)
 		]));
 	}
-}), ae = ["data-wrap", "data-line-numbers"], oe = { class: "fg-code-block__header" }, se = { class: "fg-code-block__title" }, ce = {
+}), ae = [
+	"data-wrap",
+	"data-line-numbers",
+	"data-variant"
+], oe = {
 	key: 0,
+	class: "fg-code-block__header"
+}, se = {
+	key: 0,
+	class: "fg-code-block__title"
+}, ce = {
+	key: 1,
 	class: "fg-code-block__language"
-}, le = { class: "fg-code-block__actions" }, ue = ["disabled"], de = ["aria-label"], fe = {
+}, le = { class: "fg-code-block__actions" }, ue = ["disabled", "title"], de = {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "1.5",
+	"aria-hidden": "true"
+}, fe = {
+	key: 0,
+	d: "m5 12 4 4L19 6"
+}, pe = { key: 0 }, me = ["aria-label"], he = {
 	key: 0,
 	class: "fg-code-block__number",
 	"aria-hidden": "true"
-}, pe = { class: "fg-code-block__text" }, me = {
-	class: "fg-code-block__status",
-	role: "status"
-}, he = /* @__PURE__ */ c({
+}, ge = { class: "fg-code-block__text" }, _e = ["data-state"], ve = /* @__PURE__ */ c({
 	__name: "UiCodeBlock",
 	props: {
 		code: {},
@@ -97,10 +113,11 @@ var q = /* @__PURE__ */ c({
 		wrap: {
 			type: Boolean,
 			default: !1
-		}
+		},
+		variant: { default: "default" }
 	},
 	setup(n) {
-		let s = ee(), c = v(""), l = t(() => s.value ?? n.code.split("\n").map((e) => [{ content: e }])), u = {
+		let s = S(), c = v(""), l = t(() => s.value ?? n.code.split("\n").map((e) => [{ content: e }])), u = {
 			vue: "vue",
 			ts: "typescript",
 			typescript: "typescript",
@@ -113,7 +130,7 @@ var q = /* @__PURE__ */ c({
 			sh: "bash",
 			shell: "bash"
 		};
-		E(() => [n.code, n.language], async ([e, t], n, r) => {
+		te(() => [n.code, n.language], async ([e, t], n, r) => {
 			let i = !1;
 			r(() => {
 				i = !0;
@@ -138,7 +155,7 @@ var q = /* @__PURE__ */ c({
 		}, { immediate: !0 });
 		let d = v(!1), { start: p } = K(() => {
 			d.value = !1;
-		}, 1500, { immediate: !1 }), m = v(!1), g = v(""), _ = async () => {
+		}, 1500, { immediate: !1 }), m = v(!1), g = v(""), _ = t(() => d.value && !g.value), x = t(() => n.variant === "compact" && _.value && !c.value), w = t(() => g.value ? g.value : n.variant === "compact" && c.value ? d.value ? `Code copied to clipboard. ${c.value}` : c.value : d.value ? "Code copied to clipboard." : c.value), T = async () => {
 			if (g.value = "", d.value = !1, typeof navigator > "u" || !navigator.clipboard?.writeText) {
 				g.value = "Clipboard unavailable. Select the code to copy it.";
 				return;
@@ -155,32 +172,28 @@ var q = /* @__PURE__ */ c({
 		return (t, s) => (h(), i("div", {
 			class: "fg-code-block",
 			"data-wrap": n.wrap,
-			"data-line-numbers": n.lineNumbers
+			"data-line-numbers": n.lineNumbers,
+			"data-variant": n.variant
 		}, [
-			a("div", oe, [
-				a("span", se, S(n.title || n.language), 1),
-				n.title ? (h(), i("span", ce, S(n.language), 1)) : r("", !0),
+			n.variant === "default" || n.copyable || t.$slots.actions ? (h(), i("div", oe, [
+				n.variant === "default" ? (h(), i("span", se, C(n.title || n.language), 1)) : r("", !0),
+				n.title && n.variant === "default" ? (h(), i("span", ce, C(n.language), 1)) : r("", !0),
 				a("div", le, [b(t.$slots, "actions"), n.copyable ? (h(), i("button", {
 					key: 0,
 					type: "button",
 					class: "fg-code-block__copy",
 					disabled: m.value,
 					"aria-label": "Copy code",
-					onClick: _
-				}, [s[0] ||= a("svg", {
-					viewBox: "0 0 24 24",
-					fill: "none",
-					stroke: "currentColor",
-					"stroke-width": "1.5",
-					"aria-hidden": "true"
-				}, [a("rect", {
+					title: n.variant === "compact" ? _.value ? "Copied" : "Copy code" : void 0,
+					onClick: T
+				}, [(h(), i("svg", de, [n.variant === "compact" && _.value ? (h(), i("path", fe)) : (h(), i(e, { key: 1 }, [s[0] ||= a("rect", {
 					x: "8",
 					y: "8",
 					width: "12",
 					height: "13",
 					rx: "2"
-				}), a("path", { d: "M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" })], -1), o(" " + S(d.value && !g.value ? "Copied" : "Copy"), 1)], 8, ue)) : r("", !0)])
-			]),
+				}, null, -1), s[1] ||= a("path", { d: "M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" }, null, -1)], 64))])), n.variant === "default" ? (h(), i("span", pe, C(_.value ? "Copied" : "Copy"), 1)) : r("", !0)], 8, ue)) : r("", !0)])
+			])) : r("", !0),
 			a("pre", {
 				class: "fg-code-block__pre",
 				tabindex: "0",
@@ -188,18 +201,22 @@ var q = /* @__PURE__ */ c({
 			}, [a("code", null, [(h(!0), i(e, null, y(l.value, (t, s) => (h(), i("span", {
 				key: s,
 				class: "fg-code-block__line"
-			}, [n.lineNumbers ? (h(), i("span", fe, S(s + 1), 1)) : r("", !0), a("span", pe, [(h(!0), i(e, null, y(t, (e, t) => (h(), i("span", {
+			}, [n.lineNumbers ? (h(), i("span", he, C(s + 1), 1)) : r("", !0), a("span", ge, [(h(!0), i(e, null, y(t, (e, t) => (h(), i("span", {
 				key: t,
 				style: f({ color: e.color })
-			}, S(e.content), 5))), 128)), o(S(s < l.value.length - 1 ? "\n" : ""), 1)])]))), 128))])], 8, de),
-			a("span", me, S(g.value || (d.value ? "Code copied to clipboard." : c.value)), 1)
+			}, C(e.content), 5))), 128)), o(C(s < l.value.length - 1 ? "\n" : ""), 1)])]))), 128))])], 8, me),
+			a("span", {
+				class: "fg-code-block__status",
+				role: "status",
+				"data-state": x.value ? "success" : void 0
+			}, C(w.value), 9, _e)
 		], 8, ae));
 	}
-}), ge = /* @__PURE__ */ c({
+}), ye = /* @__PURE__ */ c({
 	__name: "UiAlert",
 	props: { tone: { default: "neutral" } },
 	setup(e) {
-		return (t, r) => (h(), n(C(L), {
+		return (t, r) => (h(), n(w(L), {
 			as: "div",
 			class: "fg-alert",
 			"data-tone": e.tone,
@@ -209,11 +226,11 @@ var q = /* @__PURE__ */ c({
 			_: 3
 		}, 8, ["data-tone", "role"]));
 	}
-}), _e = /* @__PURE__ */ c({
+}), be = /* @__PURE__ */ c({
 	__name: "UiBadge",
 	props: { tone: { default: "neutral" } },
 	setup(e) {
-		return (t, r) => (h(), n(C(L), {
+		return (t, r) => (h(), n(w(L), {
 			as: "span",
 			class: "fg-badge",
 			"data-tone": e.tone
@@ -222,7 +239,7 @@ var q = /* @__PURE__ */ c({
 			_: 3
 		}, 8, ["data-tone"]));
 	}
-}), ve = ["data-size", "data-disabled"], ye = { class: "fg-checkbox__label" }, be = /* @__PURE__ */ c({
+}), xe = ["data-size", "data-disabled"], Se = { class: "fg-checkbox__label" }, Ce = /* @__PURE__ */ c({
 	__name: "UiCheckbox",
 	props: {
 		disabled: {
@@ -244,23 +261,23 @@ var q = /* @__PURE__ */ c({
 			class: "fg-checkbox",
 			"data-size": e.size,
 			"data-disabled": e.disabled ? "true" : void 0
-		}, [s(C(ne), {
+		}, [s(w(k), {
 			class: "fg-checkbox__control",
 			disabled: e.disabled,
 			"model-value": e.modelValue,
 			"onUpdate:modelValue": r
 		}, {
-			default: D(() => [s(C(O), { class: "fg-checkbox__indicator" }, {
+			default: D(() => [s(w(O), { class: "fg-checkbox__indicator" }, {
 				default: D(() => [...n[0] ||= [o("✓", -1)]]),
 				_: 1
 			})]),
 			_: 1
-		}, 8, ["disabled", "model-value"]), a("span", ye, [b(t.$slots, "default")])], 8, ve));
+		}, 8, ["disabled", "model-value"]), a("span", Se, [b(t.$slots, "default")])], 8, xe));
 	}
-}), xe = { class: "fg-dialog__header" }, Se = { class: "fg-dialog__body" }, Ce = {
+}), we = { class: "fg-dialog__header" }, Te = { class: "fg-dialog__body" }, Ee = {
 	key: 0,
 	class: "fg-dialog__footer"
-}, we = /* @__PURE__ */ c({
+}, De = /* @__PURE__ */ c({
 	inheritAttrs: !1,
 	__name: "UiDialog",
 	props: {
@@ -271,34 +288,34 @@ var q = /* @__PURE__ */ c({
 	emits: ["update:open"],
 	setup(e, { emit: t }) {
 		let c = t;
-		return (t, l) => (h(), n(C(P), {
+		return (t, l) => (h(), n(w(P), {
 			open: e.open,
 			"onUpdate:open": l[0] ||= (e) => c("update:open", e)
 		}, {
-			default: D(() => [s(C(N), null, {
-				default: D(() => [s(C(M), { class: "fg-dialog__overlay" }), s(C(A), d({
+			default: D(() => [s(w(N), null, {
+				default: D(() => [s(w(M), { class: "fg-dialog__overlay" }), s(w(j), d({
 					class: "fg-dialog__content",
 					"aria-modal": "true"
 				}, t.$attrs), {
 					default: D(() => [
-						a("div", xe, [a("div", null, [s(C(F), { class: "fg-dialog__title" }, {
-							default: D(() => [o(S(e.title), 1)]),
+						a("div", we, [a("div", null, [s(w(F), { class: "fg-dialog__title" }, {
+							default: D(() => [o(C(e.title), 1)]),
 							_: 1
-						}), e.description ? (h(), n(C(j), {
+						}), e.description ? (h(), n(w(ne), {
 							key: 0,
 							class: "fg-dialog__description"
 						}, {
-							default: D(() => [o(S(e.description), 1)]),
+							default: D(() => [o(C(e.description), 1)]),
 							_: 1
-						})) : r("", !0)]), s(C(k), {
+						})) : r("", !0)]), s(w(A), {
 							class: "fg-dialog__close",
 							"aria-label": "Close dialog"
 						}, {
 							default: D(() => [...l[1] ||= [o(" × ", -1)]]),
 							_: 1
 						})]),
-						a("div", Se, [b(t.$slots, "default")]),
-						t.$slots.footer ? (h(), i("div", Ce, [b(t.$slots, "footer")])) : r("", !0)
+						a("div", Te, [b(t.$slots, "default")]),
+						t.$slots.footer ? (h(), i("div", Ee, [b(t.$slots, "footer")])) : r("", !0)
 					]),
 					_: 3
 				}, 16)]),
@@ -307,7 +324,7 @@ var q = /* @__PURE__ */ c({
 			_: 3
 		}, 8, ["open"]));
 	}
-}), Te = { class: "fg-drawer__header" }, Ee = { class: "fg-drawer__body" }, De = /* @__PURE__ */ c({
+}), Oe = { class: "fg-drawer__header" }, ke = { class: "fg-drawer__body" }, Ae = /* @__PURE__ */ c({
 	inheritAttrs: !1,
 	__name: "UiDrawer",
 	props: {
@@ -317,32 +334,32 @@ var q = /* @__PURE__ */ c({
 	emits: ["update:open", "closeAutoFocus"],
 	setup(e, { emit: t }) {
 		let i = t;
-		return (t, c) => (h(), n(C(P), {
+		return (t, c) => (h(), n(w(P), {
 			open: e.open,
 			"onUpdate:open": c[1] ||= (e) => i("update:open", e)
 		}, {
-			default: D(() => [t.$slots.trigger ? (h(), n(C(I), {
+			default: D(() => [t.$slots.trigger ? (h(), n(w(I), {
 				key: 0,
 				"as-child": ""
 			}, {
 				default: D(() => [b(t.$slots, "trigger")]),
 				_: 3
-			})) : r("", !0), s(C(N), null, {
-				default: D(() => [s(C(M), { class: "fg-drawer__overlay" }), s(C(A), d({
+			})) : r("", !0), s(w(N), null, {
+				default: D(() => [s(w(M), { class: "fg-drawer__overlay" }), s(w(j), d({
 					class: "fg-drawer__content",
 					"aria-modal": "true",
 					"aria-describedby": void 0
 				}, t.$attrs, { onCloseAutoFocus: c[0] ||= (e) => i("closeAutoFocus", e) }), {
-					default: D(() => [a("div", Te, [s(C(F), { class: "fg-drawer__title" }, {
-						default: D(() => [o(S(e.title), 1)]),
+					default: D(() => [a("div", Oe, [s(w(F), { class: "fg-drawer__title" }, {
+						default: D(() => [o(C(e.title), 1)]),
 						_: 1
-					}), s(C(k), {
+					}), s(w(A), {
 						class: "fg-drawer__close",
 						"aria-label": "Close drawer"
 					}, {
 						default: D(() => [...c[2] ||= [o(" × ", -1)]]),
 						_: 1
-					})]), a("div", Ee, [b(t.$slots, "default")])]),
+					})]), a("div", ke, [b(t.$slots, "default")])]),
 					_: 3
 				}, 16)]),
 				_: 3
@@ -350,7 +367,7 @@ var q = /* @__PURE__ */ c({
 			_: 3
 		}, 8, ["open"]));
 	}
-}), Q = Symbol("UiFieldContext"), Oe = ["data-invalid"], ke = ["for"], Ae = ["id"], je = ["id"], Me = /* @__PURE__ */ c({
+}), Q = Symbol("UiFieldContext"), je = ["data-invalid"], Me = ["for"], Ne = ["id"], Pe = ["id"], Fe = /* @__PURE__ */ c({
 	__name: "UiField",
 	props: {
 		controlId: {},
@@ -372,7 +389,7 @@ var q = /* @__PURE__ */ c({
 			a("label", {
 				class: "fg-field__label",
 				for: e.controlId
-			}, S(e.label), 9, ke),
+			}, C(e.label), 9, Me),
 			b(t.$slots, "default", {
 				descriptionId: n.value,
 				errorId: o.value
@@ -382,16 +399,16 @@ var q = /* @__PURE__ */ c({
 				id: n.value,
 				class: "fg-field__description",
 				"data-field-description": ""
-			}, S(e.description), 9, Ae)) : r("", !0),
+			}, C(e.description), 9, Ne)) : r("", !0),
 			e.error ? (h(), i("p", {
 				key: 1,
 				id: o.value,
 				class: "fg-field__error",
 				"data-field-error": ""
-			}, S(e.error), 9, je)) : r("", !0)
-		], 8, Oe));
+			}, C(e.error), 9, Pe)) : r("", !0)
+		], 8, je));
 	}
-}), Ne = /* @__PURE__ */ c({
+}), Ie = /* @__PURE__ */ c({
 	__name: "UiInput",
 	props: {
 		disabled: {
@@ -412,13 +429,13 @@ var q = /* @__PURE__ */ c({
 		let r = l(Q, void 0), i = t, a = (e) => {
 			e.currentTarget instanceof HTMLInputElement && i("update:modelValue", e.currentTarget.value);
 		};
-		return (t, i) => (h(), n(C(L), {
-			id: C(r)?.controlId.value ?? e.id,
+		return (t, i) => (h(), n(w(L), {
+			id: w(r)?.controlId.value ?? e.id,
 			as: "input",
 			class: "fg-input",
-			"aria-describedby": C(r)?.descriptionId.value,
-			"aria-errormessage": C(r)?.errorId.value,
-			"aria-invalid": e.invalid || C(r)?.invalid.value ? "true" : void 0,
+			"aria-describedby": w(r)?.descriptionId.value,
+			"aria-errormessage": w(r)?.errorId.value,
+			"aria-invalid": e.invalid || w(r)?.invalid.value ? "true" : void 0,
 			"data-size": e.size,
 			disabled: e.disabled,
 			type: e.type,
@@ -435,7 +452,7 @@ var q = /* @__PURE__ */ c({
 			"value"
 		]));
 	}
-}), Pe = 100, $ = /* @__PURE__ */ c({
+}), Le = 100, Re = /* @__PURE__ */ c({
 	__name: "UiProgress",
 	props: {
 		label: {},
@@ -444,19 +461,19 @@ var q = /* @__PURE__ */ c({
 	},
 	setup(e) {
 		let r = t(() => {
-			let t = Number.isFinite(e.max) && e.max > 0 ? e.max : Pe;
+			let t = Number.isFinite(e.max) && e.max > 0 ? e.max : Le;
 			return {
 				max: t,
 				value: e.value === null || !Number.isFinite(e.value) ? null : Math.min(t, Math.max(0, e.value))
 			};
 		}), i = t(() => r.value.value === null ? 0 : r.value.value / r.value.max * 100);
-		return (t, a) => (h(), n(C(z), {
+		return (t, a) => (h(), n(w(z), {
 			class: "fg-progress",
 			"aria-label": e.label,
 			max: r.value.max,
 			"model-value": r.value.value
 		}, {
-			default: D(() => [s(C(R), {
+			default: D(() => [s(w(R), {
 				class: "fg-progress__indicator",
 				style: f({ transform: `translateX(-${100 - i.value}%)` })
 			}, null, 8, ["style"])]),
@@ -467,7 +484,7 @@ var q = /* @__PURE__ */ c({
 			"model-value"
 		]));
 	}
-}), Fe = { class: "fg-radio-card__content" }, Ie = /* @__PURE__ */ c({
+}), ze = { class: "fg-radio-card__content" }, Be = /* @__PURE__ */ c({
 	__name: "UiRadioCard",
 	props: {
 		disabled: {
@@ -477,7 +494,7 @@ var q = /* @__PURE__ */ c({
 		value: {}
 	},
 	setup(e) {
-		return (t, r) => (h(), n(C(B), {
+		return (t, r) => (h(), n(w(B), {
 			class: "fg-radio-card",
 			disabled: e.disabled,
 			value: e.value
@@ -485,11 +502,11 @@ var q = /* @__PURE__ */ c({
 			default: D(() => [r[0] ||= a("span", {
 				class: "fg-radio-card__indicator",
 				"aria-hidden": "true"
-			}, null, -1), a("span", Fe, [b(t.$slots, "default")])]),
+			}, null, -1), a("span", ze, [b(t.$slots, "default")])]),
 			_: 3
 		}, 8, ["disabled", "value"]));
 	}
-}), Le = /* @__PURE__ */ c({
+}), Ve = /* @__PURE__ */ c({
 	__name: "UiRadioCardGroup",
 	props: /*@__PURE__*/ u({
 		disabled: {
@@ -507,7 +524,7 @@ var q = /* @__PURE__ */ c({
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = w(e, "modelValue"), r = (t) => {
+		let t = E(e, "modelValue"), r = (t) => {
 			if (t.altKey || t.ctrlKey || t.metaKey || t.shiftKey) return;
 			let n = t.currentTarget, r = t.target;
 			if (!(n instanceof HTMLElement) || !(r instanceof HTMLElement)) return;
@@ -523,7 +540,7 @@ var q = /* @__PURE__ */ c({
 			let d = o[u];
 			!d || d === r || (t.preventDefault(), d.focus(), d.click());
 		};
-		return (i, a) => (h(), n(C(V), d({
+		return (i, a) => (h(), n(w(V), d({
 			modelValue: t.value,
 			"onUpdate:modelValue": a[0] ||= (e) => t.value = e,
 			class: "fg-radio-card-group",
@@ -538,7 +555,7 @@ var q = /* @__PURE__ */ c({
 			"loop"
 		]));
 	}
-}), Re = /* @__PURE__ */ c({
+}), $ = /* @__PURE__ */ c({
 	__name: "UiSelect",
 	props: {
 		disabled: {
@@ -558,13 +575,13 @@ var q = /* @__PURE__ */ c({
 		let r = l(Q, void 0), i = t, a = (e) => {
 			e.currentTarget instanceof HTMLSelectElement && i("update:modelValue", e.currentTarget.value);
 		};
-		return (t, i) => (h(), n(C(L), {
-			id: C(r)?.controlId.value ?? e.id,
+		return (t, i) => (h(), n(w(L), {
+			id: w(r)?.controlId.value ?? e.id,
 			as: "select",
 			class: "fg-select",
-			"aria-describedby": C(r)?.descriptionId.value,
-			"aria-errormessage": C(r)?.errorId.value,
-			"aria-invalid": e.invalid || C(r)?.invalid.value ? "true" : void 0,
+			"aria-describedby": w(r)?.descriptionId.value,
+			"aria-errormessage": w(r)?.errorId.value,
+			"aria-invalid": e.invalid || w(r)?.invalid.value ? "true" : void 0,
 			"data-size": e.size,
 			disabled: e.disabled,
 			value: e.modelValue,
@@ -582,7 +599,7 @@ var q = /* @__PURE__ */ c({
 			"value"
 		]));
 	}
-}), ze = /* @__PURE__ */ c({
+}), He = /* @__PURE__ */ c({
 	__name: "UiSlider",
 	props: {
 		disabled: {
@@ -615,7 +632,7 @@ var q = /* @__PURE__ */ c({
 				e !== void 0 && o("update:modelValue", e);
 			}
 		});
-		return (t, r) => (h(), n(C(U), {
+		return (t, r) => (h(), n(w(U), {
 			modelValue: c.value,
 			"onUpdate:modelValue": r[0] ||= (e) => c.value = e,
 			class: "fg-slider",
@@ -625,15 +642,15 @@ var q = /* @__PURE__ */ c({
 			min: a.value.min,
 			step: a.value.step
 		}, {
-			default: D(() => [s(C(G), { class: "fg-slider__track" }, {
-				default: D(() => [s(C(H), { class: "fg-slider__range" })]),
+			default: D(() => [s(w(G), { class: "fg-slider__track" }, {
+				default: D(() => [s(w(H), { class: "fg-slider__range" })]),
 				_: 1
-			}), s(C(W), {
-				id: C(i)?.controlId.value ?? e.id,
+			}), s(w(W), {
+				id: w(i)?.controlId.value ?? e.id,
 				class: "fg-slider__thumb",
-				"aria-describedby": C(i)?.descriptionId.value,
-				"aria-errormessage": C(i)?.errorId.value,
-				"aria-invalid": C(i)?.invalid.value ? "true" : void 0,
+				"aria-describedby": w(i)?.descriptionId.value,
+				"aria-errormessage": w(i)?.errorId.value,
+				"aria-invalid": w(i)?.invalid.value ? "true" : void 0,
 				"aria-label": e.label
 			}, null, 8, [
 				"id",
@@ -652,20 +669,20 @@ var q = /* @__PURE__ */ c({
 			"step"
 		]));
 	}
-}), Be = { class: "fg-tabs" }, Ve = ["aria-label"], He = [
+}), Ue = { class: "fg-tabs" }, We = ["aria-label"], Ge = [
 	"id",
 	"aria-controls",
 	"aria-selected",
 	"tabindex",
 	"onClick",
 	"onFocus"
-], Ue = [
+], Ke = [
 	"id",
 	"role",
 	"aria-labelledby",
 	"hidden",
 	"tabindex"
-], We = ["id", "hidden"], Ge = /* @__PURE__ */ c({
+], qe = ["id", "hidden"], Je = /* @__PURE__ */ c({
 	__name: "UiTabs",
 	props: {
 		items: {},
@@ -674,7 +691,7 @@ var q = /* @__PURE__ */ c({
 	},
 	emits: ["update:modelValue"],
 	setup(n, { emit: o }) {
-		let s = o, c = te(), l = v(!1), u = t(() => n.items.some((e) => e.value === n.modelValue) ? n.modelValue : n.items[0]?.value), d = (e) => `${c}-tab-${encodeURIComponent(e)}`, f = (e) => `${c}-panel-${encodeURIComponent(e)}`, m = (e) => `${c}-heading-${encodeURIComponent(e)}`;
+		let s = o, c = T(), l = v(!1), u = t(() => n.items.some((e) => e.value === n.modelValue) ? n.modelValue : n.items[0]?.value), d = (e) => `${c}-tab-${encodeURIComponent(e)}`, f = (e) => `${c}-panel-${encodeURIComponent(e)}`, m = (e) => `${c}-heading-${encodeURIComponent(e)}`;
 		p(() => {
 			l.value = !0;
 		});
@@ -694,7 +711,7 @@ var q = /* @__PURE__ */ c({
 			let a = getComputedStyle(t).direction === "rtl", o = e.key === (a ? "ArrowRight" : "ArrowLeft"), s = r[e.key === "Home" ? 0 : e.key === "End" ? r.length - 1 : (i + (o ? -1 : 1) + r.length) % r.length];
 			s && (e.preventDefault(), s.focus());
 		};
-		return (t, o) => (h(), i("div", Be, [l.value ? (h(), i("div", {
+		return (t, o) => (h(), i("div", Ue, [l.value ? (h(), i("div", {
 			key: 0,
 			class: "fg-tabs__list",
 			role: "tablist",
@@ -711,7 +728,7 @@ var q = /* @__PURE__ */ c({
 			tabindex: e.value === u.value ? 0 : -1,
 			onClick: (t) => g(e.value),
 			onFocus: (t) => g(e.value)
-		}, S(e.label), 41, He))), 128))], 40, Ve)) : r("", !0), (h(!0), i(e, null, y(n.items, (e) => (h(), i("section", {
+		}, C(e.label), 41, Ge))), 128))], 40, We)) : r("", !0), (h(!0), i(e, null, y(n.items, (e) => (h(), i("section", {
 			id: f(e.value),
 			key: e.value,
 			class: "fg-tabs__panel",
@@ -723,16 +740,16 @@ var q = /* @__PURE__ */ c({
 			id: m(e.value),
 			class: "fg-tabs__heading",
 			hidden: l.value
-		}, S(e.label), 9, We), b(t.$slots, "panel", { value: e.value })], 8, Ue))), 128))]));
+		}, C(e.label), 9, qe), b(t.$slots, "panel", { value: e.value })], 8, Ke))), 128))]));
 	}
-}), Ke = /* @__PURE__ */ c({
+}), Ye = /* @__PURE__ */ c({
 	__name: "UiSurface",
 	props: {
 		as: { default: "section" },
 		padding: { default: "default" }
 	},
 	setup(e) {
-		return (t, r) => (h(), n(C(L), {
+		return (t, r) => (h(), n(w(L), {
 			as: e.as,
 			class: "fg-surface",
 			"data-padding": e.padding
@@ -741,7 +758,7 @@ var q = /* @__PURE__ */ c({
 			_: 3
 		}, 8, ["as", "data-padding"]));
 	}
-}), qe = ({ targetIds: e }) => {
+}), Xe = ({ targetIds: e }) => {
 	let t = v(e[0]), n, r, i;
 	return p(() => {
 		let a = e.flatMap((e) => {
@@ -766,4 +783,4 @@ var q = /* @__PURE__ */ c({
 	}), _(t);
 };
 //#endregion
-export { ge as UiAlert, _e as UiBadge, q as UiButton, ie as UiCard, be as UiCheckbox, he as UiCodeBlock, we as UiDialog, De as UiDrawer, Me as UiField, Ne as UiInput, $ as UiProgress, Ie as UiRadioCard, Le as UiRadioCardGroup, Re as UiSelect, ze as UiSlider, Ke as UiSurface, Ge as UiTabs, qe as useActiveSection };
+export { ye as UiAlert, be as UiBadge, q as UiButton, ie as UiCard, Ce as UiCheckbox, ve as UiCodeBlock, De as UiDialog, Ae as UiDrawer, Fe as UiField, Ie as UiInput, Re as UiProgress, Be as UiRadioCard, Ve as UiRadioCardGroup, $ as UiSelect, He as UiSlider, Ye as UiSurface, Je as UiTabs, Xe as useActiveSection };

package/dist/site/UiSiteHeader.vue.d.ts

@@ -0,0 +1,24 @@
+import type { SiteProjectId } from './projects.js';
+export interface UiSiteLink {
+    label: string;
+    href: string;
+}
+export interface UiSiteHeaderProps {
+    /** The site this header belongs to. It is marked as current in the project menu. */
+    project: SiteProjectId;
+    /** Page links shown beside the appearance control, such as a user guide or releases. */
+    links?: readonly UiSiteLink[];
+}
+type __VLS_Slots = {
+    /** Replaces the System, Light, and Dark picker with a page-specific appearance control. */
+    default?(): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiSiteHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiSiteHeaderProps> & Readonly<{}>, {}, {}, {}, {}, 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/site/appearance.d.ts

@@ -0,0 +1,35 @@
+import type { ComputedRef } from 'vue';
+export type SiteAppearanceChoice = 'system' | 'light' | 'dark';
+export type SiteAppearance = 'light' | 'dark';
+/** The choice is shared by every site in the family, so it must not change. */
+export declare const SITE_APPEARANCE_KEY = "tool-site-theme";
+/**
+ * Inline this in the document head, before the stylesheet paints, to avoid a flash
+ * of the wrong appearance. It applies the stored choice exactly as
+ * `applySiteAppearance` does and never throws.
+ */
+export declare const siteThemeBootScript = "(function () {\n  var root = document.documentElement, choice;\n  try { choice = localStorage.getItem('tool-site-theme'); } catch (error) {}\n  var dark = choice === 'dark';\n  if (choice !== 'light' && choice !== 'dark') {\n    try { dark = matchMedia('(prefers-color-scheme: dark)').matches; } catch (error) {}\n  }\n  root.classList.toggle('dark', dark);\n  if (choice === 'light' || choice === 'dark') root.dataset.theme = choice;\n})();";
+/** System removes the explicit override. Light and dark set it. */
+export declare const applySiteAppearance: ({ root, choice, appearance }: {
+    root: HTMLElement;
+    choice: SiteAppearanceChoice;
+    appearance: SiteAppearance;
+}) => void;
+/**
+ * The shared System, Light, or Dark choice with the appearance it resolves to.
+ * Every call shares the stored choice, and other tabs and the operating system
+ * update it. Nothing reads storage or the browser until the component mounts, so
+ * server rendering and hydration see `system`. Storage failures leave the choice
+ * working for the current visit.
+ *
+ * By default the composable applies the appearance to `<html>`. Pass
+ * `applyToRoot: false` when the page owns the root, for example while an imported
+ * theme is active, and call `applySiteAppearance` yourself.
+ */
+export declare const useSiteAppearance: ({ applyToRoot }?: {
+    applyToRoot?: boolean;
+}) => {
+    choice: ComputedRef<SiteAppearanceChoice>;
+    appearance: ComputedRef<SiteAppearance>;
+    chooseAppearance: (value: SiteAppearanceChoice) => void;
+};