@frontpanel/vue 0.4.0 → 0.5.0

package/dist/FpCheckbox.vue.d.ts

@@ -0,0 +1,29 @@
+import type { FpLedColor } from './FpLed.vue';
+import type { FpKeyLed } from './keys';
+export interface FpCheckboxProps {
+    /** A silkscreen label over the key, which also names it. Without one, give it an `aria-label`. */
+    label?: string;
+    /** Standing up, or on its side with the label before it. */
+    orientation?: 'vertical' | 'horizontal';
+    /** Where the light is: the strip at the foot of the key, an LED over the label, or none. */
+    led?: FpKeyLed;
+    /** The colour its LED lights in. */
+    color?: FpLedColor;
+    disabled?: boolean;
+}
+type __VLS_Props = FpCheckboxProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    color: FpLedColor;
+    orientation: "vertical" | "horizontal";
+    led: FpKeyLed;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/FpCheckboxGroup.vue.d.ts

@@ -0,0 +1,31 @@
+import type { FpLedColor } from './FpLed.vue';
+import type { FpKeyLed, FpKeyOption } from './keys';
+export interface FpCheckboxGroupProps {
+    /** The keys, left to right or top to bottom. */
+    options: FpKeyOption[];
+    /** A silkscreen label under the keys, which also names the group. Without one, give it an `aria-label`. */
+    label?: string;
+    /** Keys standing side by side, or on their side and stacked. */
+    orientation?: 'vertical' | 'horizontal';
+    /** Where the light is: the strip at the foot of each key, an LED over each label, or none. */
+    led?: FpKeyLed;
+    /** The colour the LEDs light in, unless an option sets its own. */
+    color?: FpLedColor;
+    disabled?: boolean;
+}
+type __VLS_Props = FpCheckboxGroupProps;
+type __VLS_ModelProps = {
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {
+    color: FpLedColor;
+    orientation: "vertical" | "horizontal";
+    led: FpKeyLed;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/FpKnob.vue.d.ts

@@ -17,14 +17,14 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    valueCommit: (value: number) => any;
     "update:modelValue": (value: number) => any;
+    valueCommit: (value: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onValueCommit?: ((value: number) => any) | undefined;
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+    onValueCommit?: ((value: number) => any) | undefined;
 }>, {
-    min: number;
     max: number;
+    min: number;
     step: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/FpMeter.vue.d.ts

@@ -22,11 +22,11 @@ export interface FpMeterProps {
     valueText?: (value: number) => string;
 }
 declare const __VLS_export: import("vue").DefineComponent<FpMeterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FpMeterProps> & Readonly<{}>, {
+    orientation: "vertical" | "horizontal";
     value: number;
-    min: number;
     max: number;
+    min: number;
     segments: number;
-    orientation: "vertical" | "horizontal";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/FpRadioGroup.vue.d.ts

@@ -0,0 +1,31 @@
+import type { FpLedColor } from './FpLed.vue';
+import type { FpKeyLed, FpKeyOption } from './keys';
+export interface FpRadioGroupProps {
+    /** The keys, left to right or top to bottom. */
+    options: FpKeyOption[];
+    /** A silkscreen label under the keys, which also names the group. Without one, give it an `aria-label`. */
+    label?: string;
+    /** Keys standing side by side, or on their side and stacked. */
+    orientation?: 'vertical' | 'horizontal';
+    /** Where the light is: the strip at the foot of each key, an LED over each label, or none. */
+    led?: FpKeyLed;
+    /** The colour the LEDs light in, unless an option sets its own. */
+    color?: FpLedColor;
+    disabled?: boolean;
+}
+type __VLS_Props = FpRadioGroupProps;
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    color: FpLedColor;
+    orientation: "vertical" | "horizontal";
+    led: FpKeyLed;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/FpSlider.vue.d.ts

@@ -19,16 +19,16 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    valueCommit: (value: number) => any;
     "update:modelValue": (value: number) => any;
+    valueCommit: (value: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onValueCommit?: ((value: number) => any) | undefined;
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+    onValueCommit?: ((value: number) => any) | undefined;
 }>, {
-    min: number;
+    orientation: "vertical" | "horizontal";
     max: number;
+    min: number;
     step: number;
-    orientation: "vertical" | "horizontal";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/index.d.ts

@@ -5,6 +5,10 @@ export { default as FpButtonGroup } from './FpButtonGroup.vue';
 export type { FpButtonGroupProps } from './FpButtonGroup.vue';
 export { default as FpCap } from './FpCap.vue';
 export type { FpCapColor, FpCapProps } from './FpCap.vue';
+export { default as FpCheckbox } from './FpCheckbox.vue';
+export type { FpCheckboxProps } from './FpCheckbox.vue';
+export { default as FpCheckboxGroup } from './FpCheckboxGroup.vue';
+export type { FpCheckboxGroupProps } from './FpCheckboxGroup.vue';
 export { default as FpDevice } from './FpDevice.vue';
 export type { FpDeviceProps } from './FpDevice.vue';
 export { default as FpGelButton } from './FpGelButton.vue';
@@ -28,6 +32,8 @@ export type { FpMenuItemProps } from './FpMenuItem.vue';
 export { default as FpMenuSeparator } from './FpMenuSeparator.vue';
 export { default as FpMeter } from './FpMeter.vue';
 export type { FpMeterProps } from './FpMeter.vue';
+export { default as FpRadioGroup } from './FpRadioGroup.vue';
+export type { FpRadioGroupProps } from './FpRadioGroup.vue';
 export { default as FpReadout } from './FpReadout.vue';
 export type { FpReadoutProps } from './FpReadout.vue';
 export { default as FpScrew } from './FpScrew.vue';
@@ -43,5 +49,6 @@ export { default as FpWindow } from './FpWindow.vue';
 export type { FpWindowProps } from './FpWindow.vue';
 export { fpIconNames } from './icons';
 export type { FpIconName } from './icons';
+export type { FpKeyLed, FpKeyOption } from './keys';
 export type { FpLens } from './lens';
 export { fpReadoutGlyph } from './readout';

package/dist/index.js

@@ -1,8 +1,8 @@
 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, mergeModels as l, mergeProps as u, normalizeClass as d, normalizeStyle as f, onMounted as p, openBlock as m, ref as h, renderList as g, renderSlot as _, resolveDynamicComponent as v, shallowRef as y, toDisplayString as b, unref as x, useAttrs as S, useId as C, useModel as w, useTemplateRef as T, warn as E, watch as D, withCtx as O } from "vue";
-import { DropdownMenuContent as k, DropdownMenuItem as A, DropdownMenuPortal as j, DropdownMenuRoot as ee, DropdownMenuSeparator as M, DropdownMenuTrigger as N, Primitive as P, SliderRoot as F, SliderThumb as I, SliderTrack as te, SwitchRoot as ne, SwitchThumb as re } from "reka-ui";
+import { CheckboxGroupRoot as k, CheckboxRoot as A, DropdownMenuContent as ee, DropdownMenuItem as te, DropdownMenuPortal as j, DropdownMenuRoot as ne, DropdownMenuSeparator as re, DropdownMenuTrigger as ie, Primitive as M, RadioGroupItem as ae, RadioGroupRoot as oe, SliderRoot as se, SliderThumb as ce, SliderTrack as le, SwitchRoot as ue, SwitchThumb as de } from "reka-ui";
 //#endregion
 //#region src/FpButton.vue
-var L = /* @__PURE__ */ c({
+var N = /* @__PURE__ */ c({
 	__name: "FpButton",
 	props: {
 		pressed: {
@@ -14,7 +14,7 @@ var L = /* @__PURE__ */ c({
 	},
 	setup(e) {
 		let t = e;
-		return (e, r) => (m(), n(x(P), {
+		return (e, r) => (m(), n(x(M), {
 			as: t.as,
 			"as-child": t.asChild,
 			class: "fp-chrome-btn",
@@ -30,7 +30,7 @@ var L = /* @__PURE__ */ c({
 			"aria-pressed"
 		]));
 	}
-}), ie = /* @__PURE__ */ c({
+}), P = /* @__PURE__ */ c({
 	__name: "FpButtonGroup",
 	props: {
 		asChild: { type: Boolean },
@@ -38,7 +38,7 @@ var L = /* @__PURE__ */ c({
 	},
 	setup(e) {
 		let t = e;
-		return (e, r) => (m(), n(x(P), {
+		return (e, r) => (m(), n(x(M), {
 			as: t.as,
 			"as-child": t.asChild,
 			class: "fp-button-group",
@@ -48,7 +48,7 @@ var L = /* @__PURE__ */ c({
 			_: 3
 		}, 8, ["as", "as-child"]));
 	}
-}), ae = /* @__PURE__ */ c({
+}), F = /* @__PURE__ */ c({
 	__name: "FpCap",
 	props: {
 		color: { default: "white" },
@@ -67,7 +67,7 @@ var L = /* @__PURE__ */ c({
 			graphite: "fp-cap-graphite",
 			berry: "fp-cap-berry"
 		};
-		return (e, i) => (m(), n(x(P), {
+		return (e, i) => (m(), n(x(M), {
 			as: t.as,
 			"as-child": t.asChild,
 			class: d(["fp-cap", r[t.color]]),
@@ -84,10 +84,130 @@ var L = /* @__PURE__ */ c({
 			"aria-pressed"
 		]));
 	}
+}), I = {
+	green: "fp-led-green",
+	amber: "fp-led-amber",
+	red: "fp-led-red"
+}, L = ["data-orientation"], R = ["id"], z = /* @__PURE__ */ c({
+	inheritAttrs: !1,
+	__name: "FpCheckbox",
+	props: /*@__PURE__*/ l({
+		label: {},
+		orientation: { default: "horizontal" },
+		led: { default: "strip" },
+		color: { default: "green" },
+		disabled: { type: Boolean }
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let n = e, a = w(e, "modelValue"), c = C(), l = S(), f = t(() => ({
+			class: l.class,
+			style: l.style
+		})), p = t(() => {
+			let { class: e, style: t, ...n } = l;
+			return n;
+		});
+		return (e, t) => (m(), i("div", u({
+			class: "fp-keys",
+			"data-orientation": n.orientation
+		}, f.value), [n.label ? (m(), i("span", {
+			key: 0,
+			id: x(c),
+			class: "fp-silk"
+		}, [n.led === "above" ? (m(), i("span", {
+			key: 0,
+			class: d(["fp-led", [x(I)[n.color], { "fp-led-lit": a.value }]]),
+			"aria-hidden": "true"
+		}, null, 2)) : r("", !0), o(b(n.label), 1)], 8, R)) : r("", !0), s(x(A), u(p.value, {
+			modelValue: a.value,
+			"onUpdate:modelValue": t[0] ||= (e) => a.value = e,
+			class: ["fp-key", n.led === "strip" ? x(I)[n.color] : void 0],
+			"data-strip": n.led === "strip" ? void 0 : "plain",
+			disabled: n.disabled,
+			"aria-labelledby": n.label ? x(c) : void 0
+		}), null, 16, [
+			"modelValue",
+			"class",
+			"data-strip",
+			"disabled",
+			"aria-labelledby"
+		])], 16, L));
+	}
+}), B = ["id"], V = /* @__PURE__ */ c({
+	inheritAttrs: !1,
+	__name: "FpCheckboxGroup",
+	props: /*@__PURE__*/ l({
+		options: {},
+		label: {},
+		orientation: { default: "horizontal" },
+		led: { default: "strip" },
+		color: { default: "green" },
+		disabled: { type: Boolean }
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(n) {
+		let c = n, l = w(n, "modelValue"), f = C(), p = `${f}-label`, h = (e) => `${f}-key-${e}`, _ = (e) => I[e.color ?? c.color], v = S(), y = t(() => ({
+			class: v.class,
+			style: v.style
+		})), T = t(() => {
+			let { class: e, style: t, ...n } = v;
+			return n;
+		});
+		return (t, n) => (m(), i("div", u({ class: "fp-unit" }, y.value), [s(x(k), u(T.value, {
+			modelValue: l.value,
+			"onUpdate:modelValue": n[0] ||= (e) => l.value = e,
+			class: "fp-keys",
+			role: "group",
+			"roving-focus": !1,
+			"data-orientation": c.orientation,
+			disabled: c.disabled,
+			"aria-labelledby": c.label ? p : void 0
+		}), {
+			default: O(() => [(m(!0), i(e, null, g(c.options, (t, n) => (m(), i(e, { key: t.value }, [a("span", {
+				id: h(n),
+				class: "fp-silk"
+			}, [c.led === "above" ? (m(), i("span", {
+				key: 0,
+				class: d(["fp-led", [_(t), { "fp-led-lit": l.value.includes(t.value) }]]),
+				"aria-hidden": "true"
+			}, null, 2)) : r("", !0), o(b(t.label), 1)], 8, B), s(x(A), {
+				value: t.value,
+				disabled: t.disabled,
+				class: d(["fp-key", c.led === "strip" ? _(t) : void 0]),
+				"data-strip": c.led === "strip" ? void 0 : "plain",
+				"aria-labelledby": h(n)
+			}, null, 8, [
+				"value",
+				"disabled",
+				"class",
+				"data-strip",
+				"aria-labelledby"
+			])], 64))), 128))]),
+			_: 1
+		}, 16, [
+			"modelValue",
+			"data-orientation",
+			"disabled",
+			"aria-labelledby"
+		]), c.label ? (m(), i("span", {
+			key: 0,
+			id: p,
+			class: "fp-silk"
+		}, b(c.label), 1)) : r("", !0)], 16));
+	}
 });
 //#endregion
 //#region src/fit.ts
-function oe(e, t, n, r) {
+function H(e, t, n, r) {
 	if (t.width <= 0 || n.width <= 0) return null;
 	let i = t.width / n.width;
 	if (e === "contain") {
@@ -98,7 +218,7 @@ function oe(e, t, n, r) {
 }
 //#endregion
 //#region src/FpDevice.vue?vue&type=script&setup=true&lang.ts
-var R = { class: "fp-device-body" }, z = /* @__PURE__ */ c({
+var fe = { class: "fp-device-body" }, pe = /* @__PURE__ */ c({
 	__name: "FpDevice",
 	props: {
 		backdrop: {
@@ -118,7 +238,7 @@ var R = { class: "fp-device-body" }, z = /* @__PURE__ */ c({
 		let n = e, r = T("stage"), o = T("device"), s = y({
 			width: 0,
 			height: 0
-		}), c = y(0), l = t(() => n.fit === "none" ? !1 : n.width !== void 0 || (E(`FpDevice: fit="${n.fit}" needs a design width; the device is not scaled.`), !1)), u = t(() => n.height ?? c.value), p = t(() => !l.value || n.fit === "none" ? null : oe(n.fit, s.value, {
+		}), c = y(0), l = t(() => n.fit === "none" ? !1 : n.width !== void 0 || (E(`FpDevice: fit="${n.fit}" needs a design width; the device is not scaled.`), !1)), u = t(() => n.height ?? c.value), p = t(() => !l.value || n.fit === "none" ? null : H(n.fit, s.value, {
 			width: n.width,
 			height: u.value
 		}, n.maxScale));
@@ -170,7 +290,7 @@ var R = { class: "fp-device-body" }, z = /* @__PURE__ */ c({
 			ref: o,
 			class: "fp-device-rim",
 			style: f(b.value)
-		}, [a("div", R, [_(e.$slots, "default")])], 4)) : (m(), i("div", {
+		}, [a("div", fe, [_(e.$slots, "default")])], 4)) : (m(), i("div", {
 			key: 1,
 			ref_key: "device",
 			ref: o,
@@ -178,7 +298,7 @@ var R = { class: "fp-device-body" }, z = /* @__PURE__ */ c({
 			style: f(b.value)
 		}, [_(e.$slots, "default")], 4))], 4)], 6));
 	}
-}), B = /* @__PURE__ */ c({
+}), me = /* @__PURE__ */ c({
 	__name: "FpGelButton",
 	props: {
 		asChild: { type: Boolean },
@@ -186,7 +306,7 @@ var R = { class: "fp-device-body" }, z = /* @__PURE__ */ c({
 	},
 	setup(e) {
 		let t = e;
-		return (e, r) => (m(), n(x(P), {
+		return (e, r) => (m(), n(x(M), {
 			as: t.as,
 			"as-child": t.asChild,
 			class: "fp-gel",
@@ -200,7 +320,7 @@ var R = { class: "fp-device-body" }, z = /* @__PURE__ */ c({
 			"type"
 		]));
 	}
-}), V = /* @__PURE__ */ c({
+}), he = /* @__PURE__ */ c({
 	__name: "FpHousing",
 	props: {
 		asChild: { type: Boolean },
@@ -208,7 +328,7 @@ var R = { class: "fp-device-body" }, z = /* @__PURE__ */ c({
 	},
 	setup(e) {
 		let t = e;
-		return (e, r) => (m(), n(x(P), {
+		return (e, r) => (m(), n(x(M), {
 			as: t.as,
 			"as-child": t.asChild,
 			class: "fp-housing"
@@ -217,7 +337,7 @@ var R = { class: "fp-device-body" }, z = /* @__PURE__ */ c({
 			_: 3
 		}, 8, ["as", "as-child"]));
 	}
-}), H = [
+}), U = [
 	"................",
 	"................",
 	".....#..........",
@@ -234,7 +354,7 @@ var R = { class: "fp-device-body" }, z = /* @__PURE__ */ c({
 	"................",
 	"................",
 	"................"
-], U = [
+], W = [
 	"................",
 	"................",
 	".........##.....",
@@ -251,7 +371,7 @@ var R = { class: "fp-device-body" }, z = /* @__PURE__ */ c({
 	".........##.....",
 	"................",
 	"................"
-], W = (e) => e.map((e) => [...e].reverse().join("")), G = {
+], G = (e) => e.map((e) => [...e].reverse().join("")), K = {
 	add: [
 		"................",
 		"................",
@@ -288,8 +408,8 @@ var R = { class: "fp-device-body" }, z = /* @__PURE__ */ c({
 		"................",
 		"................"
 	],
-	left: U,
-	right: W(U),
+	left: W,
+	right: G(W),
 	down: [
 		"................",
 		"................",
@@ -344,8 +464,8 @@ var R = { class: "fp-device-body" }, z = /* @__PURE__ */ c({
 		"................",
 		"................"
 	],
-	undo: H,
-	redo: W(H),
+	undo: U,
+	redo: G(U),
 	home: [
 		"................",
 		".......##.......",
@@ -563,7 +683,7 @@ var R = { class: "fp-device-body" }, z = /* @__PURE__ */ c({
 		"................"
 	]
 };
-function K(e) {
+function ge(e) {
 	let t = "";
 	return e.forEach((e, n) => {
 		let r = 0;
@@ -579,27 +699,27 @@ function K(e) {
 		}
 	}), t;
 }
-var q = Object.keys(G), se = Object.fromEntries(q.map((e) => [e, K(G[e])])), ce = [
+var q = Object.keys(K), _e = Object.fromEntries(q.map((e) => [e, ge(K[e])])), ve = [
 	"role",
 	"aria-label",
 	"aria-hidden"
-], le = ["d"], J = /* @__PURE__ */ c({
+], ye = ["d"], J = /* @__PURE__ */ c({
 	__name: "FpIcon",
 	props: {
 		name: {},
 		label: {}
 	},
 	setup(e) {
-		let n = e, r = t(() => se[n.name]);
+		let n = e, r = t(() => _e[n.name]);
 		return (e, t) => (m(), i("svg", {
 			viewBox: "0 0 16 16",
 			class: "fp-icon",
 			role: n.label ? "img" : void 0,
 			"aria-label": n.label || void 0,
 			"aria-hidden": n.label ? void 0 : "true"
-		}, [a("path", { d: r.value }, null, 8, le)], 8, ce));
+		}, [a("path", { d: r.value }, null, 8, ye)], 8, ve));
 	}
-}), ue = [
+}), be = [
 	"tabindex",
 	"aria-valuemin",
 	"aria-valuemax",
@@ -607,7 +727,7 @@ var q = Object.keys(G), se = Object.fromEntries(q.map((e) => [e, K(G[e])])), ce
 	"aria-valuetext",
 	"aria-labelledby",
 	"aria-disabled"
-], de = ["id"], fe = 200, pe = .1, Y = 270, me = /* @__PURE__ */ c({
+], xe = ["id"], Se = 200, Ce = .1, Y = 270, we = /* @__PURE__ */ c({
 	inheritAttrs: !1,
 	__name: "FpKnob",
 	props: /*@__PURE__*/ l({
@@ -672,7 +792,7 @@ var q = Object.keys(G), se = Object.fromEntries(q.map((e) => [e, K(G[e])])), ce
 		}
 		function k(e) {
 			if (!D || e.pointerId !== D.pointerId) return;
-			let t = (o.max - o.min) / fe * (e.shiftKey ? pe : 1);
+			let t = (o.max - o.min) / Se * (e.shiftKey ? Ce : 1);
 			D.raw = Math.min(o.max, Math.max(o.min, D.raw + (D.y - e.clientY) * t)), D.y = e.clientY, T(D.raw);
 		}
 		function A(e) {
@@ -698,13 +818,13 @@ var q = Object.keys(G), se = Object.fromEntries(q.map((e) => [e, K(G[e])])), ce
 		}), [a("span", {
 			class: "fp-knob-mark",
 			style: f({ rotate: `${y.value}deg` })
-		}, null, 4)], 16, ue), o.label ? (m(), i("span", {
+		}, null, 4)], 16, be), o.label ? (m(), i("span", {
 			key: 0,
 			id: x(h),
 			class: "fp-silk"
-		}, b(o.label), 9, de)) : r("", !0)], 16));
+		}, b(o.label), 9, xe)) : r("", !0)], 16));
 	}
-}), he = /* @__PURE__ */ c({
+}), Te = /* @__PURE__ */ c({
 	__name: "FpLcd",
 	props: {
 		asChild: { type: Boolean },
@@ -712,7 +832,7 @@ var q = Object.keys(G), se = Object.fromEntries(q.map((e) => [e, K(G[e])])), ce
 	},
 	setup(e) {
 		let t = e;
-		return (e, r) => (m(), n(x(P), {
+		return (e, r) => (m(), n(x(M), {
 			as: t.as,
 			"as-child": t.asChild,
 			class: "fp-lcd"
@@ -721,11 +841,11 @@ var q = Object.keys(G), se = Object.fromEntries(q.map((e) => [e, K(G[e])])), ce
 			_: 3
 		}, 8, ["as", "as-child"]));
 	}
-}), ge = {
+}), Ee = {
 	key: 0,
 	class: "fp-lcd-ghost",
 	"aria-hidden": "true"
-}, _e = { key: 2 }, ve = /* @__PURE__ */ c({
+}, De = { key: 2 }, Oe = /* @__PURE__ */ c({
 	__name: "FpLcdLine",
 	props: {
 		text: {},
@@ -737,15 +857,15 @@ var q = Object.keys(G), se = Object.fromEntries(q.map((e) => [e, K(G[e])])), ce
 	},
 	setup(e) {
 		let a = e, o = t(() => "8".repeat(a.cells ?? a.text.length));
-		return (e, t) => (m(), n(x(P), {
+		return (e, t) => (m(), n(x(M), {
 			as: a.as,
 			"as-child": a.asChild,
 			class: "fp-lcd-line"
 		}, {
-			default: O(() => [a.ghost ? (m(), i("span", ge, b(o.value), 1)) : r("", !0), a.redraw ? (m(), i("span", {
+			default: O(() => [a.ghost ? (m(), i("span", Ee, b(o.value), 1)) : r("", !0), a.redraw ? (m(), i("span", {
 				key: a.text,
 				class: "fp-lcd-redraw"
-			}, b(a.text), 1)) : (m(), i("span", _e, b(a.text), 1))]),
+			}, b(a.text), 1)) : (m(), i("span", De, b(a.text), 1))]),
 			_: 1
 		}, 8, ["as", "as-child"]));
 	}
@@ -753,11 +873,11 @@ var q = Object.keys(G), se = Object.fromEntries(q.map((e) => [e, K(G[e])])), ce
 	flat: "fp-lens-flat",
 	diffused: "fp-lens-diffused",
 	clear: "fp-lens-clear"
-}, ye = [
+}, ke = [
 	"role",
 	"aria-label",
 	"aria-hidden"
-], be = /* @__PURE__ */ c({
+], Ae = /* @__PURE__ */ c({
 	__name: "FpLed",
 	props: {
 		color: { default: "green" },
@@ -784,9 +904,9 @@ var q = Object.keys(G), se = Object.fromEntries(q.map((e) => [e, K(G[e])])), ce
 			role: t.label ? "img" : void 0,
 			"aria-label": t.label || void 0,
 			"aria-hidden": t.label ? void 0 : "true"
-		}, null, 10, ye));
+		}, null, 10, ke));
 	}
-}), xe = /* @__PURE__ */ c({
+}), je = /* @__PURE__ */ c({
 	inheritAttrs: !1,
 	__name: "FpMenu",
 	props: /*@__PURE__*/ l({
@@ -815,12 +935,12 @@ var q = Object.keys(G), se = Object.fromEntries(q.map((e) => [e, K(G[e])])), ce
 			e && c();
 		}), p(() => {
 			r.value && c();
-		}), (e, c) => (m(), n(x(ee), {
+		}), (e, c) => (m(), n(x(ne), {
 			open: r.value,
 			"onUpdate:open": c[0] ||= (e) => r.value = e,
 			modal: t.modal
 		}, {
-			default: O(() => [s(x(N), {
+			default: O(() => [s(x(ie), {
 				ref_key: "trigger",
 				ref: a,
 				"as-child": ""
@@ -828,7 +948,7 @@ var q = Object.keys(G), se = Object.fromEntries(q.map((e) => [e, K(G[e])])), ce
 				default: O(() => [_(e.$slots, "trigger", { open: r.value })]),
 				_: 3
 			}, 512), s(x(j), { to: t.to }, {
-				default: O(() => [s(x(k), u(x(i), {
+				default: O(() => [s(x(ee), u(x(i), {
 					class: "fp-menu",
 					"data-fp-skin": o.value,
 					side: t.side,
@@ -849,7 +969,7 @@ var q = Object.keys(G), se = Object.fromEntries(q.map((e) => [e, K(G[e])])), ce
 			_: 3
 		}, 8, ["open", "modal"]));
 	}
-}), Se = /* @__PURE__ */ c({
+}), Me = /* @__PURE__ */ c({
 	__name: "FpMenuItem",
 	props: {
 		disabled: { type: Boolean },
@@ -860,7 +980,7 @@ var q = Object.keys(G), se = Object.fromEntries(q.map((e) => [e, K(G[e])])), ce
 	emits: ["select"],
 	setup(e, { emit: t }) {
 		let r = e, i = t;
-		return (e, t) => (m(), n(x(A), {
+		return (e, t) => (m(), n(x(te), {
 			as: r.as,
 			"as-child": r.asChild,
 			disabled: r.disabled,
@@ -877,19 +997,19 @@ var q = Object.keys(G), se = Object.fromEntries(q.map((e) => [e, K(G[e])])), ce
 			"text-value"
 		]));
 	}
-}), Ce = /* @__PURE__ */ c({
+}), Ne = /* @__PURE__ */ c({
 	__name: "FpMenuSeparator",
 	setup(e) {
-		return (e, t) => (m(), n(x(M), { class: "fp-menu-separator" }));
+		return (e, t) => (m(), n(x(re), { class: "fp-menu-separator" }));
 	}
-}), we = [
+}), Pe = [
 	"data-orientation",
 	"aria-valuemin",
 	"aria-valuemax",
 	"aria-valuenow",
 	"aria-valuetext",
 	"aria-labelledby"
-], Te = ["id"], Ee = /* @__PURE__ */ c({
+], Fe = ["id"], Ie = /* @__PURE__ */ c({
 	inheritAttrs: !1,
 	__name: "FpMeter",
 	props: {
@@ -938,11 +1058,74 @@ var q = Object.keys(G), se = Object.fromEntries(q.map((e) => [e, K(G[e])])), ce
 			"aria-valuetext": n.valueText?.(d.value),
 			"aria-labelledby": n.label ? x(l) : void 0,
 			style: h.value
-		}), null, 16, we), n.label ? (m(), i("span", {
+		}), null, 16, Pe), n.label ? (m(), i("span", {
 			key: 0,
 			id: x(l),
 			class: "fp-silk"
-		}, b(n.label), 9, Te)) : r("", !0)], 16));
+		}, b(n.label), 9, Fe)) : r("", !0)], 16));
+	}
+}), Le = ["id"], Re = /* @__PURE__ */ c({
+	inheritAttrs: !1,
+	__name: "FpRadioGroup",
+	props: /*@__PURE__*/ l({
+		options: {},
+		label: {},
+		orientation: { default: "horizontal" },
+		led: { default: "strip" },
+		color: { default: "green" },
+		disabled: { type: Boolean }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(n) {
+		let c = n, l = w(n, "modelValue"), f = C(), p = `${f}-label`, h = (e) => `${f}-key-${e}`, _ = (e) => I[e.color ?? c.color], v = S(), y = t(() => ({
+			class: v.class,
+			style: v.style
+		})), T = t(() => {
+			let { class: e, style: t, ...n } = v;
+			return n;
+		});
+		return (t, n) => (m(), i("div", u({ class: "fp-unit" }, y.value), [s(x(oe), u(T.value, {
+			modelValue: l.value,
+			"onUpdate:modelValue": n[0] ||= (e) => l.value = e,
+			class: "fp-keys",
+			orientation: c.orientation,
+			disabled: c.disabled,
+			"aria-labelledby": c.label ? p : void 0
+		}), {
+			default: O(() => [(m(!0), i(e, null, g(c.options, (t, n) => (m(), i(e, { key: t.value }, [a("span", {
+				id: h(n),
+				class: "fp-silk"
+			}, [c.led === "above" ? (m(), i("span", {
+				key: 0,
+				class: d(["fp-led", [_(t), { "fp-led-lit": l.value === t.value }]]),
+				"aria-hidden": "true"
+			}, null, 2)) : r("", !0), o(b(t.label), 1)], 8, Le), s(x(ae), {
+				value: t.value,
+				disabled: t.disabled,
+				class: d(["fp-key", c.led === "strip" ? _(t) : void 0]),
+				"data-strip": c.led === "strip" ? void 0 : "plain",
+				"aria-labelledby": h(n)
+			}, null, 8, [
+				"value",
+				"disabled",
+				"class",
+				"data-strip",
+				"aria-labelledby"
+			])], 64))), 128))]),
+			_: 1
+		}, 16, [
+			"modelValue",
+			"orientation",
+			"disabled",
+			"aria-labelledby"
+		]), c.label ? (m(), i("span", {
+			key: 0,
+			id: p,
+			class: "fp-silk"
+		}, b(c.label), 1)) : r("", !0)], 16));
 	}
 }), Z = {
 	0: "abcdef",
@@ -988,10 +1171,10 @@ function Q(e) {
 }
 //#endregion
 //#region src/FpReadout.vue?vue&type=script&setup=true&lang.ts
-var De = { class: "fp-readout-text" }, Oe = ["data-colon"], ke = { class: "fp-readout-lit" }, Ae = ["data-segment"], je = {
+var ze = { class: "fp-readout-text" }, Be = ["data-colon"], Ve = { class: "fp-readout-lit" }, He = ["data-segment"], Ue = {
 	key: 0,
 	"data-segment": "dp"
-}, Me = /* @__PURE__ */ c({
+}, We = /* @__PURE__ */ c({
 	__name: "FpReadout",
 	props: {
 		value: {},
@@ -1026,25 +1209,25 @@ var De = { class: "fp-readout-text" }, Oe = ["data-colon"], ke = { class: "fp-re
 				dot: !1
 			})), ...e];
 		});
-		return (t, n) => (m(), i("span", { class: d(["fp-readout", [s[o.color], o.lens && x(X)[o.lens]]]) }, [a("span", De, b(o.valueText ? o.valueText(c.value) : c.value), 1), (m(!0), i(e, null, g(l.value, (t, o) => (m(), i("span", {
+		return (t, n) => (m(), i("span", { class: d(["fp-readout", [s[o.color], o.lens && x(X)[o.lens]]]) }, [a("span", ze, b(o.valueText ? o.valueText(c.value) : c.value), 1), (m(!0), i(e, null, g(l.value, (t, o) => (m(), i("span", {
 			key: o,
 			class: "fp-readout-cell",
 			"data-colon": t.colon ? "" : void 0,
 			"aria-hidden": "true"
-		}, [a("span", ke, [t.colon ? (m(), i(e, { key: 0 }, [n[0] ||= a("span", { "data-segment": "colon-upper" }, null, -1), n[1] ||= a("span", { "data-segment": "colon-lower" }, null, -1)], 64)) : (m(), i(e, { key: 1 }, [(m(!0), i(e, null, g(t.lit, (e) => (m(), i("span", {
+		}, [a("span", Ve, [t.colon ? (m(), i(e, { key: 0 }, [n[0] ||= a("span", { "data-segment": "colon-upper" }, null, -1), n[1] ||= a("span", { "data-segment": "colon-lower" }, null, -1)], 64)) : (m(), i(e, { key: 1 }, [(m(!0), i(e, null, g(t.lit, (e) => (m(), i("span", {
 			key: e,
 			"data-segment": e
-		}, null, 8, Ae))), 128)), t.dot ? (m(), i("span", je)) : r("", !0)], 64))])], 8, Oe))), 128))], 2));
+		}, null, 8, He))), 128)), t.dot ? (m(), i("span", Ue)) : r("", !0)], 64))])], 8, Be))), 128))], 2));
 	}
-}), Ne = {
+}), $ = {
 	class: "fp-screw",
 	"aria-hidden": "true"
-}, Pe = /* @__PURE__ */ c({
+}, Ge = /* @__PURE__ */ c({
 	__name: "FpScrew",
 	setup(e) {
-		return (e, t) => (m(), i("span", Ne));
+		return (e, t) => (m(), i("span", $));
 	}
-}), $ = /* @__PURE__ */ c({
+}), Ke = /* @__PURE__ */ c({
 	__name: "FpSilk",
 	props: {
 		asChild: { type: Boolean },
@@ -1052,7 +1235,7 @@ var De = { class: "fp-readout-text" }, Oe = ["data-colon"], ke = { class: "fp-re
 	},
 	setup(e) {
 		let t = e;
-		return (e, r) => (m(), n(x(P), {
+		return (e, r) => (m(), n(x(M), {
 			as: t.as,
 			"as-child": t.asChild,
 			class: "fp-silk"
@@ -1061,7 +1244,7 @@ var De = { class: "fp-readout-text" }, Oe = ["data-colon"], ke = { class: "fp-re
 			_: 3
 		}, 8, ["as", "as-child"]));
 	}
-}), Fe = ["id"], Ie = /* @__PURE__ */ c({
+}), qe = ["id"], Je = /* @__PURE__ */ c({
 	inheritAttrs: !1,
 	__name: "FpSlider",
 	props: /*@__PURE__*/ l({
@@ -1102,7 +1285,7 @@ var De = { class: "fp-readout-text" }, Oe = ["data-colon"], ke = { class: "fp-re
 			ref_key: "unit",
 			ref: _,
 			class: "fp-unit"
-		}, d.value, { onPointerdownCapture: v }), [s(x(F), {
+		}, d.value, { onPointerdownCapture: v }), [s(x(se), {
 			class: "fp-fader",
 			"model-value": h.value,
 			min: a.min,
@@ -1113,7 +1296,7 @@ var De = { class: "fp-readout-text" }, Oe = ["data-colon"], ke = { class: "fp-re
 			"onUpdate:modelValue": g,
 			onValueCommit: y
 		}, {
-			default: O(() => [s(x(te), { class: "fp-fader-slot" }), s(x(I), u(f.value, {
+			default: O(() => [s(x(le), { class: "fp-fader-slot" }), s(x(ce), u(f.value, {
 				class: "fp-fader-cap",
 				"aria-valuetext": a.valueText?.(c.value),
 				"aria-labelledby": a.label ? x(p) : void 0,
@@ -1135,9 +1318,9 @@ var De = { class: "fp-readout-text" }, Oe = ["data-colon"], ke = { class: "fp-re
 			key: 0,
 			id: x(p),
 			class: "fp-silk"
-		}, b(a.label), 9, Fe)) : r("", !0)], 16));
+		}, b(a.label), 9, qe)) : r("", !0)], 16));
 	}
-}), Le = ["data-label-placement"], Re = ["id"], ze = /* @__PURE__ */ c({
+}), Ye = ["data-label-placement"], Xe = ["id"], Ze = /* @__PURE__ */ c({
 	inheritAttrs: !1,
 	__name: "FpSwitch",
 	props: /*@__PURE__*/ l({
@@ -1169,7 +1352,7 @@ var De = { class: "fp-readout-text" }, Oe = ["data-colon"], ke = { class: "fp-re
 		return (e, t) => (m(), i("div", u({
 			class: "fp-unit",
 			"data-label-placement": n.labelPlacement
-		}, f.value), [s(x(ne), u(p.value, {
+		}, f.value), [s(x(ue), u(p.value, {
 			modelValue: c.value,
 			"onUpdate:modelValue": t[0] ||= (e) => c.value = e,
 			class: ["fp-switch", o[n.color]],
@@ -1177,7 +1360,7 @@ var De = { class: "fp-readout-text" }, Oe = ["data-colon"], ke = { class: "fp-re
 			disabled: n.disabled,
 			"aria-labelledby": n.label ? x(l) : void 0
 		}), {
-			default: O(() => [s(x(re), { class: "fp-switch-rocker" }, {
+			default: O(() => [s(x(de), { class: "fp-switch-rocker" }, {
 				default: O(() => [...t[1] ||= [a("span", { class: "fp-switch-lamp" }, null, -1), a("span", { class: "fp-switch-face" }, null, -1)]]),
 				_: 1
 			})]),
@@ -1192,9 +1375,9 @@ var De = { class: "fp-readout-text" }, Oe = ["data-colon"], ke = { class: "fp-re
 			key: 0,
 			id: x(l),
 			class: "fp-silk"
-		}, b(n.label), 9, Re)) : r("", !0)], 16, Le));
+		}, b(n.label), 9, Xe)) : r("", !0)], 16, Ye));
 	}
-}), Be = /* @__PURE__ */ c({
+}), Qe = /* @__PURE__ */ c({
 	__name: "FpWell",
 	props: {
 		asChild: { type: Boolean },
@@ -1202,7 +1385,7 @@ var De = { class: "fp-readout-text" }, Oe = ["data-colon"], ke = { class: "fp-re
 	},
 	setup(e) {
 		let t = e;
-		return (e, r) => (m(), n(x(P), {
+		return (e, r) => (m(), n(x(M), {
 			as: t.as,
 			"as-child": t.asChild,
 			class: "fp-well"
@@ -1211,7 +1394,7 @@ var De = { class: "fp-readout-text" }, Oe = ["data-colon"], ke = { class: "fp-re
 			_: 3
 		}, 8, ["as", "as-child"]));
 	}
-}), Ve = { class: "fp-module-title" }, He = /* @__PURE__ */ c({
+}), $e = { class: "fp-module-title" }, et = /* @__PURE__ */ c({
 	__name: "FpWindow",
 	props: {
 		as: { default: "section" },
@@ -1225,12 +1408,12 @@ var De = { class: "fp-readout-text" }, Oe = ["data-colon"], ke = { class: "fp-re
 	emits: ["close"],
 	setup(e, { emit: t }) {
 		let i = e, c = t, l = C();
-		return (e, t) => (m(), n(x(P), {
+		return (e, t) => (m(), n(x(M), {
 			as: i.as,
 			class: d(["fp-window", [i.sheet ? "fp-sheet-panel" : "fp-module"]]),
 			"aria-labelledby": x(l)
 		}, {
-			default: O(() => [a("div", Ve, [
+			default: O(() => [a("div", $e, [
 				(m(), n(v(`h${i.level}`), {
 					id: x(l),
 					class: "fp-silk fp-window-title"
@@ -1239,7 +1422,7 @@ var De = { class: "fp-readout-text" }, Oe = ["data-colon"], ke = { class: "fp-re
 					_: 1
 				}, 8, ["id"])),
 				_(e.$slots, "actions"),
-				i.closable ? (m(), n(L, {
+				i.closable ? (m(), n(N, {
 					key: 0,
 					"aria-label": i.closeLabel ?? `Close ${i.title}`,
 					onClick: t[0] ||= (e) => c("close")
@@ -1257,4 +1440,4 @@ var De = { class: "fp-readout-text" }, Oe = ["data-colon"], ke = { class: "fp-re
 	}
 });
 //#endregion
-export { L as FpButton, ie as FpButtonGroup, ae as FpCap, z as FpDevice, B as FpGelButton, V as FpHousing, J as FpIcon, me as FpKnob, he as FpLcd, ve as FpLcdLine, be as FpLed, xe as FpMenu, Se as FpMenuItem, Ce as FpMenuSeparator, Ee as FpMeter, Me as FpReadout, Pe as FpScrew, $ as FpSilk, Ie as FpSlider, ze as FpSwitch, Be as FpWell, He as FpWindow, q as fpIconNames, Q as fpReadoutGlyph };
+export { N as FpButton, P as FpButtonGroup, F as FpCap, z as FpCheckbox, V as FpCheckboxGroup, pe as FpDevice, me as FpGelButton, he as FpHousing, J as FpIcon, we as FpKnob, Te as FpLcd, Oe as FpLcdLine, Ae as FpLed, je as FpMenu, Me as FpMenuItem, Ne as FpMenuSeparator, Ie as FpMeter, Re as FpRadioGroup, We as FpReadout, Ge as FpScrew, Ke as FpSilk, Je as FpSlider, Ze as FpSwitch, Qe as FpWell, et as FpWindow, q as fpIconNames, Q as fpReadoutGlyph };

package/dist/keys.d.ts

@@ -0,0 +1,16 @@
+import type { FpLedColor } from './FpLed.vue';
+/** One key in an FpRadioGroup or FpCheckboxGroup. */
+export interface FpKeyOption {
+    value: string;
+    /** Its silkscreen label, printed over the key, which also names it. */
+    label: string;
+    disabled?: boolean;
+    /** The colour its LED lights in. Unset, it takes the group's colour. */
+    color?: FpLedColor;
+}
+/**
+ * Where a piano key's light is: the strip at the foot of the key is the LED, an LED sits over its
+ * label, or there is none and the strip is plain plastic.
+ */
+export type FpKeyLed = 'strip' | 'above' | 'none';
+export declare const ledColorClass: Record<FpLedColor, string>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@frontpanel/vue",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Vue 3 components for the Frontpanel early-2000s hardware skin: a scale-to-fit device frame, windows, chrome and gel buttons, caps, LCDs and LEDs, built on Reka UI.",
   "author": "Dulan Katukurundage",
   "license": "MIT",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "reka-ui": "^2.11.0",
-    "@frontpanel/css": "^0.4.0"
+    "@frontpanel/css": "^0.5.0"
   },
   "devDependencies": {
     "@tailwindcss/oxide": "^4.3.3",