@filipgutica/ui 1.7.0 → 1.8.1

package/README.md

@@ -18,6 +18,7 @@ Import the styles from your application stylesheet:
 ```css
 @import "tailwindcss";
 @import "@filipgutica/ui/theme.css";
+@import "@filipgutica/ui/themes/graphite-indigo.css";
 @import "@filipgutica/ui/components.css";
 ```
 
@@ -93,13 +94,10 @@ The gallery's search-and-install dialog is docs-only, not an exported component.
 Applications can build their own picker with the exported components and theme
 helpers. `UiSiteHeader` includes the built-in System, Light, and Dark control.
 
-The default theme is unchanged. To opt in to Graphite Indigo, import it after
-`theme.css`:
-
-```css
-@import "@filipgutica/ui/theme.css";
-@import "@filipgutica/ui/themes/graphite-indigo.css";
-```
+The install steps above import Graphite Indigo, the palette of the project
+sites, after `theme.css`. To keep the base theme instead, with blue actions and
+warm greys, leave out the `themes/graphite-indigo.css` import. Graphite Indigo
+stays opt-in: `theme.css` alone still gives the base theme.
 
 ## Project sites
 

package/dist/components/UiFigure.vue.d.ts

@@ -0,0 +1,16 @@
+export interface UiFigureProps {
+    number?: number;
+}
+type __VLS_Slots = {
+    caption?(): unknown;
+    default?(): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiFigureProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiFigureProps> & 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/components/UiScore.vue.d.ts

@@ -0,0 +1,7 @@
+export interface UiScoreProps {
+    max?: number;
+    score: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<UiScoreProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiScoreProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/UiToggleButton.vue.d.ts

@@ -0,0 +1,23 @@
+import type { UiControlSize } from '../control.js';
+export interface UiToggleButtonProps {
+    disabled?: boolean;
+    pressed?: boolean;
+    size?: UiControlSize;
+}
+type __VLS_Slots = {
+    default?(): unknown;
+    description?(): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiToggleButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:pressed": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<UiToggleButtonProps> & Readonly<{
+    "onUpdate:pressed"?: (value: boolean) => any;
+}>, {}, {}, {}, {}, 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/index.d.ts

@@ -16,6 +16,8 @@ export { default as UiDrawer } from './components/UiDrawer.vue';
 export type { UiDrawerProps } from './components/UiDrawer.vue';
 export { default as UiField } from './components/UiField.vue';
 export type { UiFieldProps } from './components/UiField.vue';
+export { default as UiFigure } from './components/UiFigure.vue';
+export type { UiFigureProps } from './components/UiFigure.vue';
 export { default as UiInput } from './components/UiInput.vue';
 export type { UiInputProps } from './components/UiInput.vue';
 export { default as UiProgress } from './components/UiProgress.vue';
@@ -24,12 +26,16 @@ export { default as UiRadioCard } from './components/UiRadioCard.vue';
 export type { UiRadioCardProps } from './components/UiRadioCard.vue';
 export { default as UiRadioCardGroup } from './components/UiRadioCardGroup.vue';
 export type { UiRadioCardGroupProps } from './components/UiRadioCardGroup.vue';
+export { default as UiScore } from './components/UiScore.vue';
+export type { UiScoreProps } from './components/UiScore.vue';
 export { default as UiSelect } from './components/UiSelect.vue';
 export type { UiSelectProps } from './components/UiSelect.vue';
 export { default as UiSlider } from './components/UiSlider.vue';
 export type { UiSliderProps } from './components/UiSlider.vue';
 export { default as UiTabs } from './components/UiTabs.vue';
 export type { UiTabItem, UiTabsProps } from './components/UiTabs.vue';
+export { default as UiToggleButton } from './components/UiToggleButton.vue';
+export type { UiToggleButtonProps } from './components/UiToggleButton.vue';
 /** @deprecated Use UiCard for structured content. */
 export { default as UiSurface } from './components/UiSurface.vue';
 export type { UiSurfaceProps } from './components/UiSurface.vue';

package/dist/index.js

@@ -1,6 +1,6 @@
-import { a as e, i as t, n, o as r, r as i, t as a } from "./use-active-section-CiflgGBI.js";
-import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, inject as h, mergeModels as g, mergeProps as _, normalizeStyle as v, openBlock as y, provide as b, ref as x, renderList as S, renderSlot as C, resolveDynamicComponent as w, shallowRef as T, toDisplayString as E, unref as D, useModel as ee, useSlots as te, watch as O, withCtx as k } from "vue";
-import { CheckboxIndicator as A, CheckboxRoot as j, Primitive as M, ProgressIndicator as N, ProgressRoot as P, RadioGroupItem as F, RadioGroupRoot as I, SliderRange as L, SliderRoot as R, SliderThumb as z, SliderTrack as B } from "reka-ui";
+import { a as e, i as t, n, o as r, r as i, t as a } from "./use-active-section-qEJQS1S9.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, inject as h, mergeModels as g, mergeProps as _, normalizeStyle as v, openBlock as y, provide as b, ref as ee, renderList as x, renderSlot as S, resolveDynamicComponent as C, shallowRef as te, toDisplayString as w, unref as T, useId as E, useModel as ne, useSlots as D, watch as re, withCtx as O } from "vue";
+import { CheckboxIndicator as k, CheckboxRoot as A, Primitive as j, ProgressIndicator as M, ProgressRoot as N, RadioGroupItem as P, RadioGroupRoot as F, SliderRange as I, SliderRoot as L, SliderThumb as R, SliderTrack as z, Toggle as B } from "reka-ui";
 //#region src/components/UiCard.vue?vue&type=script&setup=true&lang.ts
 var V = { class: "fg-card" }, H = {
 	key: 0,
@@ -21,17 +21,17 @@ var V = { class: "fg-card" }, H = {
 		titleTag: { default: "h3" }
 	},
 	setup(e) {
-		let t = te();
+		let t = D();
 		return (n, r) => (y(), u("div", V, [
-			e.title || t.title || t.actions ? (y(), u("header", H, [e.title || t.title ? (y(), c(w(e.titleTag), {
+			e.title || t.title || t.actions ? (y(), u("header", H, [e.title || t.title ? (y(), c(C(e.titleTag), {
 				key: 0,
 				class: "fg-card__title"
 			}, {
-				default: k(() => [C(n.$slots, "title", {}, () => [f(E(e.title), 1)])]),
+				default: O(() => [S(n.$slots, "title", {}, () => [f(w(e.title), 1)])]),
 				_: 3
-			})) : l("", !0), t.actions ? (y(), u("div", U, [C(n.$slots, "actions")])) : l("", !0)])) : l("", !0),
-			t.default ? (y(), u("div", W, [C(n.$slots, "default")])) : l("", !0),
-			t.footer ? (y(), u("footer", G, [C(n.$slots, "footer")])) : l("", !0)
+			})) : l("", !0), t.actions ? (y(), u("div", U, [S(n.$slots, "actions")])) : l("", !0)])) : l("", !0),
+			t.default ? (y(), u("div", W, [S(n.$slots, "default")])) : l("", !0),
+			t.footer ? (y(), u("footer", G, [S(n.$slots, "footer")])) : l("", !0)
 		]));
 	}
 }), q = [
@@ -47,20 +47,20 @@ var V = { class: "fg-card" }, H = {
 }, X = {
 	key: 1,
 	class: "fg-code-block__language"
-}, Z = { class: "fg-code-block__actions" }, ne = ["disabled", "title"], re = {
+}, ie = { class: "fg-code-block__actions" }, ae = ["disabled", "title"], oe = {
 	viewBox: "0 0 24 24",
 	fill: "none",
 	stroke: "currentColor",
 	"stroke-width": "1.5",
 	"aria-hidden": "true"
-}, ie = {
+}, se = {
 	key: 0,
 	d: "m5 12 4 4L19 6"
-}, ae = { key: 0 }, oe = ["aria-label"], se = {
+}, ce = { key: 0 }, le = ["aria-label"], ue = {
 	key: 0,
 	class: "fg-code-block__number",
 	"aria-hidden": "true"
-}, ce = { class: "fg-code-block__text" }, le = ["data-state"], ue = /* @__PURE__ */ m({
+}, de = { class: "fg-code-block__text" }, fe = ["data-state"], pe = /* @__PURE__ */ m({
 	__name: "UiCodeBlock",
 	props: {
 		code: {},
@@ -81,7 +81,7 @@ var V = { class: "fg-card" }, H = {
 		variant: { default: "default" }
 	},
 	setup(t) {
-		let n = T(), r = x(""), i = s(() => n.value ?? t.code.split("\n").map((e) => [{ content: e }])), a = {
+		let n = te(), r = ee(""), i = s(() => n.value ?? t.code.split("\n").map((e) => [{ content: e }])), a = {
 			vue: "vue",
 			ts: "typescript",
 			typescript: "typescript",
@@ -94,7 +94,7 @@ var V = { class: "fg-card" }, H = {
 			sh: "bash",
 			shell: "bash"
 		};
-		O(() => [t.code, t.language], async ([e, t], i, o) => {
+		re(() => [t.code, t.language], async ([e, t], i, o) => {
 			let s = !1;
 			o(() => {
 				s = !0;
@@ -120,7 +120,7 @@ var V = { class: "fg-card" }, H = {
 		let { copied: c, pending: p, error: m, copy: h } = e({
 			unavailableMessage: "Clipboard unavailable. Select the code to copy it.",
 			failureMessage: "Could not copy. Select the code to copy it."
-		}), g = s(() => c.value && !m.value), _ = s(() => t.variant === "compact" && g.value && !r.value), b = s(() => m.value ? m.value : t.variant === "compact" && r.value ? c.value ? `Code copied to clipboard. ${r.value}` : r.value : c.value ? "Code copied to clipboard." : r.value), w = () => h(t.code);
+		}), g = s(() => c.value && !m.value), _ = s(() => t.variant === "compact" && g.value && !r.value), b = s(() => m.value ? m.value : t.variant === "compact" && r.value ? c.value ? `Code copied to clipboard. ${r.value}` : r.value : c.value ? "Code copied to clipboard." : r.value), C = () => h(t.code);
 		return (e, n) => (y(), u("div", {
 			class: "fg-code-block",
 			"data-wrap": t.wrap,
@@ -128,70 +128,70 @@ var V = { class: "fg-card" }, H = {
 			"data-variant": t.variant
 		}, [
 			t.variant === "default" || t.copyable || e.$slots.actions ? (y(), u("div", J, [
-				t.variant === "default" ? (y(), u("span", Y, E(t.title || t.language), 1)) : l("", !0),
-				t.title && t.variant === "default" ? (y(), u("span", X, E(t.language), 1)) : l("", !0),
-				d("div", Z, [C(e.$slots, "actions"), t.copyable ? (y(), u("button", {
+				t.variant === "default" ? (y(), u("span", Y, w(t.title || t.language), 1)) : l("", !0),
+				t.title && t.variant === "default" ? (y(), u("span", X, w(t.language), 1)) : l("", !0),
+				d("div", ie, [S(e.$slots, "actions"), t.copyable ? (y(), u("button", {
 					key: 0,
 					type: "button",
 					class: "fg-code-block__copy",
-					disabled: D(p),
+					disabled: T(p),
 					"aria-label": "Copy code",
 					title: t.variant === "compact" ? g.value ? "Copied" : "Copy code" : void 0,
-					onClick: w
-				}, [(y(), u("svg", re, [t.variant === "compact" && g.value ? (y(), u("path", ie)) : (y(), u(o, { key: 1 }, [n[0] ||= d("rect", {
+					onClick: C
+				}, [(y(), u("svg", oe, [t.variant === "compact" && g.value ? (y(), u("path", se)) : (y(), u(o, { key: 1 }, [n[0] ||= d("rect", {
 					x: "8",
 					y: "8",
 					width: "12",
 					height: "13",
 					rx: "2"
-				}, null, -1), n[1] ||= d("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))])), t.variant === "default" ? (y(), u("span", ae, E(g.value ? "Copied" : "Copy"), 1)) : l("", !0)], 8, ne)) : l("", !0)])
+				}, null, -1), n[1] ||= d("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))])), t.variant === "default" ? (y(), u("span", ce, w(g.value ? "Copied" : "Copy"), 1)) : l("", !0)], 8, ae)) : l("", !0)])
 			])) : l("", !0),
 			d("pre", {
 				class: "fg-code-block__pre",
 				tabindex: "0",
 				"aria-label": t.title || `${t.language} code`
-			}, [d("code", null, [(y(!0), u(o, null, S(i.value, (e, n) => (y(), u("span", {
+			}, [d("code", null, [(y(!0), u(o, null, x(i.value, (e, n) => (y(), u("span", {
 				key: n,
 				class: "fg-code-block__line"
-			}, [t.lineNumbers ? (y(), u("span", se, E(n + 1), 1)) : l("", !0), d("span", ce, [(y(!0), u(o, null, S(e, (e, t) => (y(), u("span", {
+			}, [t.lineNumbers ? (y(), u("span", ue, w(n + 1), 1)) : l("", !0), d("span", de, [(y(!0), u(o, null, x(e, (e, t) => (y(), u("span", {
 				key: t,
 				style: v({ color: e.color })
-			}, E(e.content), 5))), 128)), f(E(n < i.value.length - 1 ? "\n" : ""), 1)])]))), 128))])], 8, oe),
+			}, w(e.content), 5))), 128)), f(w(n < i.value.length - 1 ? "\n" : ""), 1)])]))), 128))])], 8, le),
 			d("span", {
 				class: "fg-code-block__status",
 				role: "status",
 				"data-state": _.value ? "success" : void 0
-			}, E(b.value), 9, le)
+			}, w(b.value), 9, fe)
 		], 8, q));
 	}
-}), de = /* @__PURE__ */ m({
+}), me = /* @__PURE__ */ m({
 	__name: "UiAlert",
 	props: { tone: { default: "neutral" } },
 	setup(e) {
-		return (t, n) => (y(), c(D(M), {
+		return (t, n) => (y(), c(T(j), {
 			as: "div",
 			class: "fg-alert",
 			"data-tone": e.tone,
 			role: e.tone === "danger" || e.tone === "error" ? "alert" : "status"
 		}, {
-			default: k(() => [C(t.$slots, "default")]),
+			default: O(() => [S(t.$slots, "default")]),
 			_: 3
 		}, 8, ["data-tone", "role"]));
 	}
-}), fe = /* @__PURE__ */ m({
+}), he = /* @__PURE__ */ m({
 	__name: "UiBadge",
 	props: { tone: { default: "neutral" } },
 	setup(e) {
-		return (t, n) => (y(), c(D(M), {
+		return (t, n) => (y(), c(T(j), {
 			as: "span",
 			class: "fg-badge",
 			"data-tone": e.tone
 		}, {
-			default: k(() => [C(t.$slots, "default")]),
+			default: O(() => [S(t.$slots, "default")]),
 			_: 3
 		}, 8, ["data-tone"]));
 	}
-}), pe = ["data-size", "data-disabled"], me = { class: "fg-checkbox__label" }, he = /* @__PURE__ */ m({
+}), ge = ["data-size", "data-disabled"], _e = { class: "fg-checkbox__label" }, ve = /* @__PURE__ */ m({
 	__name: "UiCheckbox",
 	props: {
 		disabled: {
@@ -213,20 +213,20 @@ var V = { class: "fg-card" }, H = {
 			class: "fg-checkbox",
 			"data-size": e.size,
 			"data-disabled": e.disabled ? "true" : void 0
-		}, [p(D(j), {
+		}, [p(T(A), {
 			class: "fg-checkbox__control",
 			disabled: e.disabled,
 			"model-value": e.modelValue,
 			"onUpdate:modelValue": r
 		}, {
-			default: k(() => [p(D(A), { class: "fg-checkbox__indicator" }, {
-				default: k(() => [...n[0] ||= [f("✓", -1)]]),
+			default: O(() => [p(T(k), { class: "fg-checkbox__indicator" }, {
+				default: O(() => [...n[0] ||= [f("✓", -1)]]),
 				_: 1
 			})]),
 			_: 1
-		}, 8, ["disabled", "model-value"]), d("span", me, [C(t.$slots, "default")])], 8, pe));
+		}, 8, ["disabled", "model-value"]), d("span", _e, [S(t.$slots, "default")])], 8, ge));
 	}
-}), Q = Symbol("UiFieldContext"), ge = ["data-invalid"], _e = ["for"], ve = ["id"], ye = ["id"], be = /* @__PURE__ */ m({
+}), Z = Symbol("UiFieldContext"), ye = ["data-invalid"], be = ["for"], xe = ["id"], Se = ["id"], Ce = /* @__PURE__ */ m({
 	__name: "UiField",
 	props: {
 		controlId: {},
@@ -236,7 +236,7 @@ var V = { class: "fg-card" }, H = {
 	},
 	setup(e) {
 		let t = s(() => e.description && !e.error ? `${e.controlId}-description` : void 0), n = s(() => e.error ? `${e.controlId}-error` : void 0), r = s(() => !!e.error);
-		return b(Q, {
+		return b(Z, {
 			controlId: s(() => e.controlId),
 			descriptionId: t,
 			errorId: n,
@@ -248,8 +248,8 @@ var V = { class: "fg-card" }, H = {
 			d("label", {
 				class: "fg-field__label",
 				for: e.controlId
-			}, E(e.label), 9, _e),
-			C(r.$slots, "default", {
+			}, w(e.label), 9, be),
+			S(r.$slots, "default", {
 				descriptionId: t.value,
 				errorId: n.value
 			}),
@@ -258,16 +258,40 @@ var V = { class: "fg-card" }, H = {
 				id: t.value,
 				class: "fg-field__description",
 				"data-field-description": ""
-			}, E(e.description), 9, ve)) : l("", !0),
+			}, w(e.description), 9, xe)) : l("", !0),
 			e.error ? (y(), u("p", {
 				key: 1,
 				id: n.value,
 				class: "fg-field__error",
 				"data-field-error": ""
-			}, E(e.error), 9, ye)) : l("", !0)
-		], 8, ge));
+			}, w(e.error), 9, Se)) : l("", !0)
+		], 8, ye));
 	}
-}), $ = /* @__PURE__ */ m({
+}), we = { class: "fg-figure" }, Te = ["aria-labelledby", "aria-label"], Ee = ["id"], De = {
+	key: 0,
+	class: "fg-figure__number"
+}, Oe = /* @__PURE__ */ m({
+	__name: "UiFigure",
+	props: { number: { default: () => void 0 } },
+	setup(e) {
+		let t = D(), n = E(), r = () => e.number !== void 0 || !!t.caption;
+		return (t, i) => (y(), u("figure", we, [d("div", {
+			class: "fg-figure__plate",
+			role: "region",
+			tabindex: "0",
+			"aria-labelledby": r() ? T(n) : void 0,
+			"aria-label": r() ? void 0 : "Figure"
+		}, [S(t.$slots, "default")], 8, Te), r() ? (y(), u("figcaption", {
+			key: 0,
+			id: T(n),
+			class: "fg-figure__caption"
+		}, [
+			e.number === void 0 ? l("", !0) : (y(), u("span", De, "Figure " + w(e.number) + ".", 1)),
+			i[0] ||= f(),
+			S(t.$slots, "caption")
+		], 8, Ee)) : l("", !0)]));
+	}
+}), ke = /* @__PURE__ */ m({
 	__name: "UiInput",
 	props: {
 		disabled: {
@@ -285,16 +309,16 @@ var V = { class: "fg-card" }, H = {
 	},
 	emits: ["update:modelValue"],
 	setup(e, { emit: t }) {
-		let n = h(Q, void 0), r = t, i = (e) => {
+		let n = h(Z, void 0), r = t, i = (e) => {
 			e.currentTarget instanceof HTMLInputElement && r("update:modelValue", e.currentTarget.value);
 		};
-		return (t, r) => (y(), c(D(M), {
-			id: D(n)?.controlId.value ?? e.id,
+		return (t, r) => (y(), c(T(j), {
+			id: T(n)?.controlId.value ?? e.id,
 			as: "input",
 			class: "fg-input",
-			"aria-describedby": D(n)?.descriptionId.value,
-			"aria-errormessage": D(n)?.errorId.value,
-			"aria-invalid": e.invalid || D(n)?.invalid.value ? "true" : void 0,
+			"aria-describedby": T(n)?.descriptionId.value,
+			"aria-errormessage": T(n)?.errorId.value,
+			"aria-invalid": e.invalid || T(n)?.invalid.value ? "true" : void 0,
 			"data-size": e.size,
 			disabled: e.disabled,
 			type: e.type,
@@ -311,7 +335,7 @@ var V = { class: "fg-card" }, H = {
 			"value"
 		]));
 	}
-}), xe = 100, Se = /* @__PURE__ */ m({
+}), Ae = 100, je = /* @__PURE__ */ m({
 	__name: "UiProgress",
 	props: {
 		label: {},
@@ -320,19 +344,19 @@ var V = { class: "fg-card" }, H = {
 	},
 	setup(e) {
 		let t = s(() => {
-			let t = Number.isFinite(e.max) && e.max > 0 ? e.max : xe;
+			let t = Number.isFinite(e.max) && e.max > 0 ? e.max : Ae;
 			return {
 				max: t,
 				value: e.value === null || !Number.isFinite(e.value) ? null : Math.min(t, Math.max(0, e.value))
 			};
 		}), n = s(() => t.value.value === null ? 0 : t.value.value / t.value.max * 100);
-		return (r, i) => (y(), c(D(P), {
+		return (r, i) => (y(), c(T(N), {
 			class: "fg-progress",
 			"aria-label": e.label,
 			max: t.value.max,
 			"model-value": t.value.value
 		}, {
-			default: k(() => [p(D(N), {
+			default: O(() => [p(T(M), {
 				class: "fg-progress__indicator",
 				style: v({ transform: `translateX(-${100 - n.value}%)` })
 			}, null, 8, ["style"])]),
@@ -343,7 +367,7 @@ var V = { class: "fg-card" }, H = {
 			"model-value"
 		]));
 	}
-}), Ce = { class: "fg-radio-card__content" }, we = /* @__PURE__ */ m({
+}), Me = { class: "fg-radio-card__content" }, Ne = /* @__PURE__ */ m({
 	__name: "UiRadioCard",
 	props: {
 		disabled: {
@@ -353,19 +377,19 @@ var V = { class: "fg-card" }, H = {
 		value: {}
 	},
 	setup(e) {
-		return (t, n) => (y(), c(D(F), {
+		return (t, n) => (y(), c(T(P), {
 			class: "fg-radio-card",
 			disabled: e.disabled,
 			value: e.value
 		}, {
-			default: k(() => [n[0] ||= d("span", {
+			default: O(() => [n[0] ||= d("span", {
 				class: "fg-radio-card__indicator",
 				"aria-hidden": "true"
-			}, null, -1), d("span", Ce, [C(t.$slots, "default")])]),
+			}, null, -1), d("span", Me, [S(t.$slots, "default")])]),
 			_: 3
 		}, 8, ["disabled", "value"]));
 	}
-}), Te = /* @__PURE__ */ m({
+}), Pe = /* @__PURE__ */ m({
 	__name: "UiRadioCardGroup",
 	props: /*@__PURE__*/ g({
 		disabled: {
@@ -383,7 +407,7 @@ var V = { class: "fg-card" }, H = {
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = ee(e, "modelValue"), n = (t) => {
+		let t = ne(e, "modelValue"), n = (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;
@@ -399,14 +423,14 @@ var V = { class: "fg-card" }, H = {
 			let d = o[u];
 			!d || d === r || (t.preventDefault(), d.focus(), d.click());
 		};
-		return (r, i) => (y(), c(D(I), _({
+		return (r, i) => (y(), c(T(F), _({
 			modelValue: t.value,
 			"onUpdate:modelValue": i[0] ||= (e) => t.value = e,
 			class: "fg-radio-card-group",
 			disabled: e.disabled,
 			loop: e.loop
 		}, e.orientation === void 0 ? {} : { orientation: e.orientation }, { onKeydown: n }), {
-			default: k(() => [C(r.$slots, "default")]),
+			default: O(() => [S(r.$slots, "default")]),
 			_: 3
 		}, 16, [
 			"modelValue",
@@ -414,7 +438,30 @@ var V = { class: "fg-card" }, H = {
 			"loop"
 		]));
 	}
-}), Ee = /* @__PURE__ */ m({
+}), Fe = { class: "fg-score" }, Q = {
+	class: "fg-score__pips",
+	"aria-hidden": "true"
+}, Ie = ["data-filled"], Le = { class: "fg-score__value" }, Re = { class: "fg-score__max" }, $ = 3, ze = /* @__PURE__ */ m({
+	__name: "UiScore",
+	props: {
+		max: { default: () => $ },
+		score: {}
+	},
+	setup(e) {
+		let t = s(() => {
+			let t = Number.isInteger(e.max) && e.max > 0 ? e.max : $;
+			return {
+				max: t,
+				score: Number.isFinite(e.score) ? Math.min(t, Math.max(0, e.score)) : 0
+			};
+		});
+		return (e, n) => (y(), u("span", Fe, [d("span", Q, [(y(!0), u(o, null, x(t.value.max, (e) => (y(), u("span", {
+			key: e,
+			class: "fg-score__pip",
+			"data-filled": e <= t.value.score ? "true" : void 0
+		}, null, 8, Ie))), 128))]), d("span", Le, [f(w(t.value.score), 1), d("span", Re, "/" + w(t.value.max), 1)])]));
+	}
+}), Be = /* @__PURE__ */ m({
 	__name: "UiSelect",
 	props: {
 		disabled: {
@@ -431,22 +478,22 @@ var V = { class: "fg-card" }, H = {
 	},
 	emits: ["update:modelValue"],
 	setup(e, { emit: t }) {
-		let n = h(Q, void 0), r = t, i = (e) => {
+		let n = h(Z, void 0), r = t, i = (e) => {
 			e.currentTarget instanceof HTMLSelectElement && r("update:modelValue", e.currentTarget.value);
 		};
-		return (t, r) => (y(), c(D(M), {
-			id: D(n)?.controlId.value ?? e.id,
+		return (t, r) => (y(), c(T(j), {
+			id: T(n)?.controlId.value ?? e.id,
 			as: "select",
 			class: "fg-select",
-			"aria-describedby": D(n)?.descriptionId.value,
-			"aria-errormessage": D(n)?.errorId.value,
-			"aria-invalid": e.invalid || D(n)?.invalid.value ? "true" : void 0,
+			"aria-describedby": T(n)?.descriptionId.value,
+			"aria-errormessage": T(n)?.errorId.value,
+			"aria-invalid": e.invalid || T(n)?.invalid.value ? "true" : void 0,
 			"data-size": e.size,
 			disabled: e.disabled,
 			value: e.modelValue,
 			onChange: i
 		}, {
-			default: k(() => [C(t.$slots, "default")]),
+			default: O(() => [S(t.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"id",
@@ -458,7 +505,7 @@ var V = { class: "fg-card" }, H = {
 			"value"
 		]));
 	}
-}), De = /* @__PURE__ */ m({
+}), Ve = /* @__PURE__ */ m({
 	__name: "UiSlider",
 	props: {
 		disabled: {
@@ -475,7 +522,7 @@ var V = { class: "fg-card" }, H = {
 	},
 	emits: ["update:modelValue"],
 	setup(e, { emit: t }) {
-		let n = h(Q, void 0), r = s(() => {
+		let n = h(Z, void 0), r = s(() => {
 			let t = Number.isFinite(e.min) ? e.min : 0;
 			return {
 				max: Number.isFinite(e.max) && e.max > t ? e.max : t + 100,
@@ -491,7 +538,7 @@ var V = { class: "fg-card" }, H = {
 				e !== void 0 && i("update:modelValue", e);
 			}
 		});
-		return (t, i) => (y(), c(D(R), {
+		return (t, i) => (y(), c(T(L), {
 			modelValue: a.value,
 			"onUpdate:modelValue": i[0] ||= (e) => a.value = e,
 			class: "fg-slider",
@@ -501,15 +548,15 @@ var V = { class: "fg-card" }, H = {
 			min: r.value.min,
 			step: r.value.step
 		}, {
-			default: k(() => [p(D(B), { class: "fg-slider__track" }, {
-				default: k(() => [p(D(L), { class: "fg-slider__range" })]),
+			default: O(() => [p(T(z), { class: "fg-slider__track" }, {
+				default: O(() => [p(T(I), { class: "fg-slider__range" })]),
 				_: 1
-			}), p(D(z), {
-				id: D(n)?.controlId.value ?? e.id,
+			}), p(T(R), {
+				id: T(n)?.controlId.value ?? e.id,
 				class: "fg-slider__thumb",
-				"aria-describedby": D(n)?.descriptionId.value,
-				"aria-errormessage": D(n)?.errorId.value,
-				"aria-invalid": D(n)?.invalid.value ? "true" : void 0,
+				"aria-describedby": T(n)?.descriptionId.value,
+				"aria-errormessage": T(n)?.errorId.value,
+				"aria-invalid": T(n)?.invalid.value ? "true" : void 0,
 				"aria-label": e.label
 			}, null, 8, [
 				"id",
@@ -528,22 +575,61 @@ var V = { class: "fg-card" }, H = {
 			"step"
 		]));
 	}
-}), Oe = /* @__PURE__ */ m({
+}), He = { class: "fg-toggle-button__text" }, Ue = { class: "fg-toggle-button__label" }, We = {
+	key: 0,
+	class: "fg-toggle-button__description"
+}, Ge = /* @__PURE__ */ m({
+	__name: "UiToggleButton",
+	props: {
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		pressed: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "md" }
+	},
+	emits: ["update:pressed"],
+	setup(e, { emit: t }) {
+		let n = t, r = D(), i = (e) => {
+			n("update:pressed", e);
+		};
+		return (t, n) => (y(), c(T(B), {
+			class: "fg-toggle-button",
+			"data-size": e.size,
+			disabled: e.disabled,
+			"model-value": e.pressed,
+			"onUpdate:modelValue": i
+		}, {
+			default: O(() => [n[0] ||= d("span", {
+				class: "fg-toggle-button__switch",
+				"aria-hidden": "true"
+			}, null, -1), d("span", He, [d("span", Ue, [S(t.$slots, "default")]), r.description ? (y(), u("span", We, [S(t.$slots, "description")])) : l("", !0)])]),
+			_: 3
+		}, 8, [
+			"data-size",
+			"disabled",
+			"model-value"
+		]));
+	}
+}), Ke = /* @__PURE__ */ m({
 	__name: "UiSurface",
 	props: {
 		as: { default: "section" },
 		padding: { default: "default" }
 	},
 	setup(e) {
-		return (t, n) => (y(), c(D(M), {
+		return (t, n) => (y(), c(T(j), {
 			as: e.as,
 			class: "fg-surface",
 			"data-padding": e.padding
 		}, {
-			default: k(() => [C(t.$slots, "default")]),
+			default: O(() => [S(t.$slots, "default")]),
 			_: 3
 		}, 8, ["as", "data-padding"]));
 	}
 });
 //#endregion
-export { de as UiAlert, fe as UiBadge, r as UiButton, K as UiCard, he as UiCheckbox, ue as UiCodeBlock, t as UiDialog, i as UiDrawer, be as UiField, $ as UiInput, Se as UiProgress, we as UiRadioCard, Te as UiRadioCardGroup, Ee as UiSelect, De as UiSlider, Oe as UiSurface, n as UiTabs, a as useActiveSection };
+export { me as UiAlert, he as UiBadge, r as UiButton, K as UiCard, ve as UiCheckbox, pe as UiCodeBlock, t as UiDialog, i as UiDrawer, Ce as UiField, Oe as UiFigure, ke as UiInput, je as UiProgress, Ne as UiRadioCard, Pe as UiRadioCardGroup, ze as UiScore, Be as UiSelect, Ve as UiSlider, Ke as UiSurface, n as UiTabs, Ge as UiToggleButton, a as useActiveSection };

package/dist/site.js

@@ -1,4 +1,4 @@
-import { a as e, i as t, n, o as r, r as i, t as a } from "./use-active-section-CiflgGBI.js";
+import { a as e, i as t, n, o as r, r as i, t as a } from "./use-active-section-qEJQS1S9.js";
 import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeModels as h, nextTick as g, normalizeClass as _, normalizeStyle as v, onBeforeUnmount as y, onMounted as b, onUnmounted as x, openBlock as S, ref as C, renderList as w, renderSlot as T, shallowRef as E, toDisplayString as D, unref as O, useId as k, useModel as ee, useSlots as A, useTemplateRef as te, watch as j, withCtx as M } from "vue";
 import { tryOnMounted as N, usePreferredDark as P, useStorage as F } from "@vueuse/core";
 //#region src/site/appearance.ts

package/dist/{use-active-section-CiflgGBI.js → use-active-section-qEJQS1S9.js}

@@ -1,9 +1,9 @@
-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, mergeProps as l, onMounted as u, onUnmounted as d, openBlock as f, readonly as p, ref as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, useId as y, withCtx as b } from "vue";
-import { DialogClose as x, DialogContent as S, DialogDescription as C, DialogOverlay as w, DialogPortal as T, DialogRoot as E, DialogTitle as D, DialogTrigger as O, Primitive as k } from "reka-ui";
-import { useTimeoutFn as A } from "@vueuse/core";
+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, mergeProps as l, onMounted as u, onUnmounted as d, openBlock as f, readonly as p, ref as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, useId as y, useTemplateRef as b, watch as x, withCtx as S } from "vue";
+import { DialogClose as C, DialogContent as w, DialogDescription as T, DialogOverlay as E, DialogPortal as D, DialogRoot as O, DialogTitle as k, DialogTrigger as A, Primitive as j } from "reka-ui";
+import { useTimeoutFn as M } from "@vueuse/core";
 //#endregion
 //#region src/components/UiButton.vue
-var j = /* @__PURE__ */ c({
+var N = /* @__PURE__ */ c({
 	__name: "UiButton",
 	props: {
 		disabled: {
@@ -19,7 +19,7 @@ var j = /* @__PURE__ */ c({
 		variant: { default: "primary" }
 	},
 	setup(e) {
-		return (t, r) => (f(), n(v(k), {
+		return (t, r) => (f(), n(v(j), {
 			as: "button",
 			class: "fg-button",
 			"data-size": e.size,
@@ -28,7 +28,7 @@ var j = /* @__PURE__ */ c({
 			disabled: e.disabled || e.loading,
 			type: e.type
 		}, {
-			default: b(() => [g(t.$slots, "default")]),
+			default: S(() => [g(t.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"data-size",
@@ -38,8 +38,8 @@ var j = /* @__PURE__ */ c({
 			"type"
 		]));
 	}
-}), M = ({ unavailableMessage: e, failureMessage: t }) => {
-	let n = m(!1), r = m(!1), i = m(""), { start: a } = A(() => {
+}), P = ({ unavailableMessage: e, failureMessage: t }) => {
+	let n = m(!1), r = m(!1), i = m(""), { start: a } = M(() => {
 		n.value = !1;
 	}, 1500, { immediate: !1 });
 	return {
@@ -61,10 +61,10 @@ var j = /* @__PURE__ */ c({
 			}
 		}
 	};
-}, N = { class: "fg-dialog__header" }, P = { class: "fg-dialog__body" }, F = {
+}, F = { class: "fg-dialog__header" }, I = { class: "fg-dialog__body" }, L = {
 	key: 0,
 	class: "fg-dialog__footer"
-}, I = /* @__PURE__ */ c({
+}, R = /* @__PURE__ */ c({
 	inheritAttrs: !1,
 	__name: "UiDialog",
 	props: {
@@ -75,34 +75,34 @@ var j = /* @__PURE__ */ c({
 	emits: ["update:open"],
 	setup(e, { emit: t }) {
 		let c = t;
-		return (t, u) => (f(), n(v(E), {
+		return (t, u) => (f(), n(v(O), {
 			open: e.open,
 			"onUpdate:open": u[0] ||= (e) => c("update:open", e)
 		}, {
-			default: b(() => [s(v(T), null, {
-				default: b(() => [s(v(w), { class: "fg-dialog__overlay" }), s(v(S), l({
+			default: S(() => [s(v(D), null, {
+				default: S(() => [s(v(E), { class: "fg-dialog__overlay" }), s(v(w), l({
 					class: "fg-dialog__content",
 					"aria-modal": "true"
 				}, t.$attrs), {
-					default: b(() => [
-						a("div", N, [a("div", null, [s(v(D), { class: "fg-dialog__title" }, {
-							default: b(() => [o(_(e.title), 1)]),
+					default: S(() => [
+						a("div", F, [a("div", null, [s(v(k), { class: "fg-dialog__title" }, {
+							default: S(() => [o(_(e.title), 1)]),
 							_: 1
-						}), e.description ? (f(), n(v(C), {
+						}), e.description ? (f(), n(v(T), {
 							key: 0,
 							class: "fg-dialog__description"
 						}, {
-							default: b(() => [o(_(e.description), 1)]),
+							default: S(() => [o(_(e.description), 1)]),
 							_: 1
-						})) : r("", !0)]), s(v(x), {
+						})) : r("", !0)]), s(v(C), {
 							class: "fg-dialog__close",
 							"aria-label": "Close dialog"
 						}, {
-							default: b(() => [...u[1] ||= [o(" × ", -1)]]),
+							default: S(() => [...u[1] ||= [o(" × ", -1)]]),
 							_: 1
 						})]),
-						a("div", P, [g(t.$slots, "default")]),
-						t.$slots.footer ? (f(), i("div", F, [g(t.$slots, "footer")])) : r("", !0)
+						a("div", I, [g(t.$slots, "default")]),
+						t.$slots.footer ? (f(), i("div", L, [g(t.$slots, "footer")])) : r("", !0)
 					]),
 					_: 3
 				}, 16)]),
@@ -111,7 +111,7 @@ var j = /* @__PURE__ */ c({
 			_: 3
 		}, 8, ["open"]));
 	}
-}), L = { class: "fg-drawer__header" }, R = { class: "fg-drawer__body" }, z = /* @__PURE__ */ c({
+}), z = { class: "fg-drawer__header" }, B = { class: "fg-drawer__body" }, V = /* @__PURE__ */ c({
 	inheritAttrs: !1,
 	__name: "UiDrawer",
 	props: {
@@ -121,32 +121,32 @@ var j = /* @__PURE__ */ c({
 	emits: ["update:open", "closeAutoFocus"],
 	setup(e, { emit: t }) {
 		let i = t;
-		return (t, c) => (f(), n(v(E), {
+		return (t, c) => (f(), n(v(O), {
 			open: e.open,
 			"onUpdate:open": c[1] ||= (e) => i("update:open", e)
 		}, {
-			default: b(() => [t.$slots.trigger ? (f(), n(v(O), {
+			default: S(() => [t.$slots.trigger ? (f(), n(v(A), {
 				key: 0,
 				"as-child": ""
 			}, {
-				default: b(() => [g(t.$slots, "trigger")]),
+				default: S(() => [g(t.$slots, "trigger")]),
 				_: 3
-			})) : r("", !0), s(v(T), null, {
-				default: b(() => [s(v(w), { class: "fg-drawer__overlay" }), s(v(S), l({
+			})) : r("", !0), s(v(D), null, {
+				default: S(() => [s(v(E), { class: "fg-drawer__overlay" }), s(v(w), l({
 					class: "fg-drawer__content",
 					"aria-modal": "true",
 					"aria-describedby": void 0
 				}, t.$attrs, { onCloseAutoFocus: c[0] ||= (e) => i("closeAutoFocus", e) }), {
-					default: b(() => [a("div", L, [s(v(D), { class: "fg-drawer__title" }, {
-						default: b(() => [o(_(e.title), 1)]),
+					default: S(() => [a("div", z, [s(v(k), { class: "fg-drawer__title" }, {
+						default: S(() => [o(_(e.title), 1)]),
 						_: 1
-					}), s(v(x), {
+					}), s(v(C), {
 						class: "fg-drawer__close",
 						"aria-label": "Close drawer"
 					}, {
-						default: b(() => [...c[2] ||= [o(" × ", -1)]]),
+						default: S(() => [...c[2] ||= [o(" × ", -1)]]),
 						_: 1
-					})]), a("div", R, [g(t.$slots, "default")])]),
+					})]), a("div", B, [g(t.$slots, "default")])]),
 					_: 3
 				}, 16)]),
 				_: 3
@@ -154,20 +154,20 @@ var j = /* @__PURE__ */ c({
 			_: 3
 		}, 8, ["open"]));
 	}
-}), B = { class: "fg-tabs" }, V = ["aria-label"], H = [
+}), H = { class: "fg-tabs" }, U = ["aria-label"], W = [
 	"id",
 	"aria-controls",
 	"aria-selected",
 	"tabindex",
 	"onClick",
 	"onFocus"
-], U = [
+], G = [
 	"id",
 	"role",
 	"aria-labelledby",
 	"hidden",
 	"tabindex"
-], W = ["id", "hidden"], G = /* @__PURE__ */ c({
+], K = ["id", "hidden"], q = /* @__PURE__ */ c({
 	__name: "UiTabs",
 	props: {
 		items: {},
@@ -176,13 +176,20 @@ var j = /* @__PURE__ */ c({
 	},
 	emits: ["update:modelValue"],
 	setup(n, { emit: o }) {
-		let s = o, c = y(), l = m(!1), d = t(() => n.items.some((e) => e.value === n.modelValue) ? n.modelValue : n.items[0]?.value), p = (e) => `${c}-tab-${encodeURIComponent(e)}`, v = (e) => `${c}-panel-${encodeURIComponent(e)}`, b = (e) => `${c}-heading-${encodeURIComponent(e)}`;
+		let s = o, c = y(), l = m(!1), d = t(() => n.items.some((e) => e.value === n.modelValue) ? n.modelValue : n.items[0]?.value), p = (e) => `${c}-tab-${encodeURIComponent(e)}`, v = (e) => `${c}-panel-${encodeURIComponent(e)}`, S = (e) => `${c}-heading-${encodeURIComponent(e)}`;
 		u(() => {
 			l.value = !0;
 		});
-		let x = (e) => {
+		let C = b("list");
+		x([l, d], () => {
+			let e = C.value, t = e?.querySelector("[aria-selected=\"true\"]");
+			if (!e || !t) return;
+			let n = e.getBoundingClientRect(), { left: r, right: i } = t.getBoundingClientRect();
+			r < n.left ? e.scrollLeft -= n.left - r : i > n.right && (e.scrollLeft += i - n.right);
+		}, { flush: "post" });
+		let w = (e) => {
 			e !== d.value && s("update:modelValue", e);
-		}, S = (e) => {
+		}, T = (e) => {
 			if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || ![
 				"ArrowLeft",
 				"ArrowRight",
@@ -194,14 +201,19 @@ var j = /* @__PURE__ */ c({
 			let r = [...t.querySelectorAll("[role=\"tab\"]")], i = r.indexOf(n);
 			if (i < 0 || r.length === 0) return;
 			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());
+			s && (e.preventDefault(), s.focus(), s.scrollIntoView({
+				block: "nearest",
+				inline: "nearest"
+			}));
 		};
-		return (t, o) => (f(), i("div", B, [l.value ? (f(), i("div", {
+		return (t, o) => (f(), i("div", H, [l.value ? (f(), i("div", {
 			key: 0,
+			ref_key: "list",
+			ref: C,
 			class: "fg-tabs__list",
 			role: "tablist",
 			"aria-label": n.label,
-			onKeydown: S
+			onKeydown: T
 		}, [(f(!0), i(e, null, h(n.items, (e) => (f(), i("button", {
 			id: p(e.value),
 			key: e.value,
@@ -211,23 +223,23 @@ var j = /* @__PURE__ */ c({
 			"aria-controls": v(e.value),
 			"aria-selected": e.value === d.value,
 			tabindex: e.value === d.value ? 0 : -1,
-			onClick: (t) => x(e.value),
-			onFocus: (t) => x(e.value)
-		}, _(e.label), 41, H))), 128))], 40, V)) : r("", !0), (f(!0), i(e, null, h(n.items, (e) => (f(), i("section", {
+			onClick: (t) => w(e.value),
+			onFocus: (t) => w(e.value)
+		}, _(e.label), 41, W))), 128))], 40, U)) : r("", !0), (f(!0), i(e, null, h(n.items, (e) => (f(), i("section", {
 			id: v(e.value),
 			key: e.value,
 			class: "fg-tabs__panel",
 			role: l.value ? "tabpanel" : void 0,
-			"aria-labelledby": l.value ? p(e.value) : b(e.value),
+			"aria-labelledby": l.value ? p(e.value) : S(e.value),
 			hidden: l.value && e.value !== d.value,
 			tabindex: l.value ? 0 : void 0
 		}, [a("h3", {
-			id: b(e.value),
+			id: S(e.value),
 			class: "fg-tabs__heading",
 			hidden: l.value
-		}, _(e.label), 9, W), g(t.$slots, "panel", { value: e.value })], 8, U))), 128))]));
+		}, _(e.label), 9, K), g(t.$slots, "panel", { value: e.value })], 8, G))), 128))]));
 	}
-}), K = ({ targetIds: e }) => {
+}), J = ({ targetIds: e }) => {
 	let t = m(e[0]), n, r, i;
 	return u(() => {
 		let a = e.flatMap((e) => {
@@ -252,4 +264,4 @@ var j = /* @__PURE__ */ c({
 	}), p(t);
 };
 //#endregion
-export { M as a, I as i, G as n, j as o, z as r, K as t };
+export { P as a, R as i, q as n, N as o, V as r, J as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@filipgutica/ui",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "description": "A compact Vue design system with Tailwind CSS and VS Code theme support",
   "type": "module",
   "sideEffects": [

package/src/components/tabs.css

@@ -32,7 +32,7 @@
 
   .fg-tabs__tab:hover { color: var(--color-text); }
   .fg-tabs__tab[aria-selected="true"] {
-    border-bottom-color: var(--color-link);
+    border-bottom-color: var(--color-accent);
     color: var(--color-text);
   }
 
@@ -44,10 +44,15 @@
     font-weight: var(--weight-medium);
   }
 
-  .fg-tabs__tab:focus-visible, .fg-tabs__panel:focus-visible {
+  /* Inset: the tab list scrolls sideways, which would clip an outer ring. */
+  .fg-tabs__tab:focus-visible {
     outline: 2px solid var(--color-focus);
     outline-offset: -2px;
   }
+  .fg-tabs__panel:focus-visible {
+    outline: 2px solid var(--color-focus);
+    outline-offset: 2px;
+  }
 
   @media (max-width: 640px) {
     .fg-tabs__tab { min-height: var(--control-lg); }

package/src/components.css

@@ -5,7 +5,7 @@
   /* Package-owned typography keeps controls consistent across consuming apps. */
   .fg-button, .fg-input, .fg-select, .fg-checkbox, .fg-field,
   .fg-radio-card, .fg-badge, .fg-alert, .fg-surface, .fg-card,
-  .fg-dialog__content, .fg-code-block {
+  .fg-dialog__content, .fg-code-block, .fg-toggle-button {
     font-family: var(--font-ui);
     font-size: var(--text-md);
     font-weight: var(--weight-regular);
@@ -51,7 +51,9 @@
   }
   .fg-code-block__copy:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
   .fg-code-block__copy svg { width: 1rem; height: 1rem; }
+  /* Inset: the code block clips its content. */
   .fg-code-block__copy:focus-visible, .fg-code-block__pre:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
+  .fg-figure__plate:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
   .fg-code-block__pre { margin: 0; padding: 1rem; overflow: auto; max-height: 32rem; tab-size: 2; }
   .fg-code-block__pre, .fg-code-block__pre code { font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.65; }
   .fg-code-block__pre code { display: block; color: inherit; }
@@ -141,7 +143,8 @@
   .fg-button:disabled,
   .fg-input:disabled,
   .fg-select:disabled,
-  .fg-checkbox[data-disabled="true"] {
+  .fg-checkbox[data-disabled="true"],
+  .fg-toggle-button:disabled {
     cursor: not-allowed;
     opacity: 0.58;
   }
@@ -322,9 +325,11 @@
       cursor: pointer;
     }
     .fg-select:not([multiple]):not([size]) option:checked { color: var(--color-row-selected-text); background: var(--color-row-selected); }
-    .fg-select:not([multiple]):not([size]) option:hover:not(:disabled), .fg-select:not([multiple]):not([size]) option:focus-visible { background: var(--color-row-hover); outline: 2px solid var(--color-focus); outline-offset: -2px; }
+    /* Pointer hover only fills the row; the focus ring marks the keyboard position. Inset: the picker scrolls. */
+    .fg-select:not([multiple]):not([size]) option:hover:not(:disabled) { background: var(--color-row-hover); }
+    .fg-select:not([multiple]):not([size]) option:focus-visible { background: var(--color-row-hover); outline: 2px solid var(--color-focus); outline-offset: -2px; }
     .fg-select:not([multiple]):not([size]) option:disabled { color: var(--color-muted); opacity: 0.58; cursor: not-allowed; }
-    .fg-select:not([multiple]):not([size]) option::checkmark { order: 1; margin-left: auto; color: var(--color-link); }
+    .fg-select:not([multiple]):not([size]) option::checkmark { order: 1; margin-left: auto; color: var(--color-accent); }
     @media (pointer: coarse) {
       .fg-select:not([multiple]):not([size]) option { min-height: var(--control-lg); }
     }
@@ -473,9 +478,10 @@
     border-color: var(--color-border);
   }
 
+  /* Checked choices use the accent, as the checkbox does; blue stays for links and focus. */
   .fg-radio-card[data-state="checked"] {
-    border-color: var(--color-link);
-    outline: 1px solid var(--color-link);
+    border-color: var(--color-accent);
+    outline: 1px solid var(--color-accent);
     outline-offset: -2px;
   }
 
@@ -505,7 +511,7 @@
   }
 
   .fg-radio-card[data-state="checked"] .fg-radio-card__indicator {
-    border: 0.3rem solid var(--color-link);
+    border: 0.3rem solid var(--color-accent);
   }
 
   .fg-badge {
@@ -602,6 +608,128 @@
     font-size: var(--text-sm);
   }
 
+  .fg-figure {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--space-3);
+    min-width: 0;
+    margin: 0;
+  }
+
+  /* Wide content scrolls inside the plate so the page never overflows. */
+  .fg-figure__plate {
+    min-width: 0;
+    overflow-x: auto;
+    padding: var(--space-5);
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--radius-panel);
+    background: var(--color-surface);
+  }
+
+  .fg-figure__caption {
+    max-width: var(--measure);
+    color: var(--color-muted);
+    font-family: var(--font-ui);
+    font-size: var(--text-sm);
+    line-height: var(--leading);
+  }
+
+  .fg-figure__number {
+    color: var(--color-text);
+    font-weight: var(--weight-medium);
+  }
+
+  @media (max-width: 680px) {
+    .fg-figure__plate { padding: var(--space-4); }
+  }
+
+  .fg-score {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .fg-score__pips { display: inline-flex; gap: 0.1875rem; }
+
+  .fg-score__pip {
+    width: 0.5rem;
+    height: 0.5rem;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-pill);
+  }
+
+  .fg-score__pip[data-filled="true"] {
+    border-color: var(--color-accent);
+    background: var(--color-accent);
+  }
+
+  .fg-score__value { font-weight: var(--weight-medium); }
+  .fg-score__max { color: var(--color-muted); font-weight: var(--weight-regular); }
+
+  .fg-toggle-button {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-3);
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--radius-control);
+    color: var(--color-text);
+    background: var(--color-surface-raised);
+    line-height: var(--leading-tight);
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .fg-toggle-button[data-size="sm"] { min-height: var(--control-sm); font-size: var(--text-sm); }
+  .fg-toggle-button[data-size="md"] { min-height: var(--control-md); font-size: var(--text-md); }
+  .fg-toggle-button[data-size="lg"] { min-height: var(--control-lg); font-size: var(--text-lg); }
+
+  .fg-toggle-button:hover:not(:disabled, [aria-pressed="true"]) { border-color: var(--color-border); }
+  .fg-toggle-button[aria-pressed="true"] { border-color: var(--color-accent); }
+
+  /* The thumb's position, not only its color, shows the state. */
+  .fg-toggle-button__switch {
+    position: relative;
+    flex: none;
+    width: 1.75rem;
+    height: 1rem;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-pill);
+    background: var(--color-surface-muted);
+    transition: background-color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
+  }
+
+  .fg-toggle-button__switch::after {
+    position: absolute;
+    top: 0.125rem;
+    left: 0.125rem;
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: var(--radius-pill);
+    background: var(--color-border);
+    content: "";
+    transition: transform var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
+  }
+
+  .fg-toggle-button[aria-pressed="true"] .fg-toggle-button__switch {
+    border-color: var(--color-accent);
+    background: var(--color-accent);
+  }
+
+  .fg-toggle-button[aria-pressed="true"] .fg-toggle-button__switch::after {
+    background: var(--color-button-text);
+    transform: translateX(0.75rem);
+  }
+
+  .fg-toggle-button__text { display: grid; min-width: 0; }
+
+  .fg-toggle-button__description {
+    color: var(--color-muted);
+    font-size: var(--text-xs);
+  }
+
   .fg-progress {
     position: relative;
     height: 0.55rem;
@@ -745,7 +873,8 @@
   .fg-radio-card:focus-visible,
   .fg-slider__thumb:focus-visible,
   .fg-dialog__close:focus-visible,
-  .fg-dialog__content:focus-visible {
+  .fg-dialog__content:focus-visible,
+  .fg-toggle-button:focus-visible {
     outline: 2px solid var(--color-focus);
     outline-offset: 2px;
   }
@@ -759,7 +888,8 @@
   :root.high-contrast .fg-surface,
   :root.high-contrast .fg-card,
   :root.high-contrast .fg-code-block,
-  :root.high-contrast .fg-dialog__content {
+  :root.high-contrast .fg-dialog__content,
+  :root.high-contrast .fg-toggle-button {
     border-width: 2px;
     border-color: var(--color-border);
   }
@@ -783,7 +913,9 @@
     .fg-radio-card,
     .fg-slider__range,
     .fg-dialog__close,
-    .fg-progress__indicator { transition: none; }
+    .fg-progress__indicator,
+    .fg-toggle-button__switch,
+    .fg-toggle-button__switch::after { transition: none; }
 
     .fg-button[aria-busy="true"]::before { animation-duration: 1.4s; }
   }

package/src/site.css

@@ -129,10 +129,12 @@
   .fg-site-appearance__choice:hover { color: var(--color-text); background: var(--color-row-hover); }
   .fg-site-appearance__choice[aria-pressed="true"] { color: var(--color-text); background: var(--color-row-selected); }
 
+  /* Focus is a 2px outline outside the control, which forced-colors mode keeps. An
+   * inset ring is used only where a scrolling ancestor would clip an outer one. */
   .fg-site-header a:focus-visible,
   .fg-site-projects__trigger:focus-visible,
   .fg-site-appearance__choice:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
-  .fg-site-appearance__choice:focus-visible { outline-offset: -2px; }
+  /* Inset: the desktop rail and the phone drawer scroll. */
   .fg-site-nav a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
 
   /* Section rail (UiSiteNav). The page grid places it; on desktop it stays in view
@@ -178,8 +180,9 @@
   }
   .fg-capture .fg-tabs__list { width: 100%; margin-block-end: 0; padding-inline: var(--space-2); }
   .fg-capture .fg-tabs__tab { min-height: var(--control-lg); }
-  /* The Full size control sits at the end of the tab row; the list reserves its width. */
-  .fg-capture[data-enhanced="true"] .fg-tabs__list { padding-inline-end: calc(var(--space-2) + 6.5rem); }
+  /* The Full size control sits at the end of the tab row. The list's margin, not its
+   * padding, reserves the control's width, so the scroll area and divider end before it. */
+  .fg-capture[data-enhanced="true"] .fg-tabs__list { width: auto; margin-inline-end: calc(var(--space-2) + 6.5rem); }
   .fg-capture__full {
     position: absolute;
     top: 0;
@@ -198,6 +201,7 @@
   }
   .fg-capture__full:hover { color: var(--color-text); }
   .fg-capture__full svg { width: 14px; height: 14px; flex: none; }
+  /* Inset: the capture preview below would cover an outset ring. */
   .fg-capture__full:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
   /* Without JavaScript every capture is listed under its own heading. */
   .fg-capture .fg-tabs__heading { margin: 0; padding: var(--space-3) var(--space-4); }
@@ -240,8 +244,9 @@
     line-height: var(--leading);
   }
   .fg-capture__caption > code { color: var(--color-text); font-family: var(--font-mono); font-size: var(--text-sm); overflow-wrap: anywhere; }
-  .fg-capture__screen:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
-  .fg-capture__expand:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -4px; }
+  /* Inset: the enhanced panel clips its content. */
+  .fg-capture__screen:focus-visible,
+  .fg-capture__expand:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
   .fg-dialog__content.fg-capture-viewer {
     width: calc(100vw - var(--space-8));
     max-width: var(--page-max);
@@ -299,6 +304,7 @@
   }
   .fg-command-list__copy:hover { color: var(--color-text); background: var(--color-row-hover); }
   .fg-command-list__copy svg { width: 1rem; height: 1rem; }
+  /* Inset: the table scrolls sideways on larger screens. */
   .fg-command-list__copy:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
   .fg-command-list__status:not(:empty) { display: block; padding-top: var(--space-2); font-size: var(--text-sm); }
 
@@ -421,7 +427,7 @@
     }
     .fg-site-rail__summary::-webkit-details-marker { display: none; }
     .fg-site-rail__summary:hover { color: var(--color-text); background: var(--color-row-hover); }
-    .fg-site-rail__summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
+    .fg-site-rail__summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
     .fg-site-rail__menu > .fg-site-rail__content { padding-block: var(--space-4); }
     .fg-site-rail__menu .fg-site-rail__group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
     .fg-site-rail__menu .fg-site-rail__group-label { grid-column: 1 / -1; }
@@ -430,7 +436,7 @@
   @media (max-width: 640px) {
     .fg-dialog__content.fg-capture-viewer { width: 100%; max-width: none; }
     /* Phones keep the icon; the accessible name still says Full size. */
-    .fg-capture[data-enhanced="true"] .fg-tabs__list { padding-inline-end: calc(var(--space-2) + var(--control-lg)); }
+    .fg-capture[data-enhanced="true"] .fg-tabs__list { margin-inline-end: calc(var(--space-2) + var(--control-lg)); }
     .fg-capture__full { min-width: var(--control-lg); justify-content: center; }
     .fg-capture__full-label { display: none; }
     .fg-command-list__table,