@frontpanel/vue 0.3.0 → 0.4.0

package/README.md

@@ -67,12 +67,14 @@ const playing = ref(false)
 | `FpDevice` | The device: a molded body in a liquid-chrome rim on a backdrop. `fit="width"` or `"contain"` draws it at a design `width` and scales it to the room it has; the default `fit="none"` leaves layout to your page |
 | `FpWindow` | A matte module with a chrome title bar: `title`, `level`, `closable` (emits `close`), an `actions` slot, and `sheet` for a phone bottom sheet |
 | `FpButton` | A brushed-chrome push button; `pressed` makes it a toggle |
+| `FpButtonGroup` | Chrome buttons joined into one bezel, as a named group |
+| `FpMenu`, `FpMenuItem`, `FpMenuSeparator` | A faceplate menu that drops from the button in its `trigger` slot; rows emit `select`, or are links with `as="a"` |
 | `FpGelButton` | The glossy gel pill, for the panel's main action |
 | `FpCap` | A molded-plastic cap in `white`, `blue`, `amber`, `graphite` or `berry`; `pressed` holds it down with a ring |
 | `FpLcd`, `FpLcdLine` | LCD glass, and a line of text on it with optional unlit segments (`ghost`, `cells`) and a left-to-right `redraw` |
 | `FpLed` | A `green`, `amber` or `red` LED; `lit`, and `blink` to confirm an action |
 | `FpHousing`, `FpWell`, `FpSilk`, `FpScrew` | A dark housing for LEDs, a recessed well, a silkscreened label, a screw head |
-| `FpIcon` | A 19-glyph 16 px pixel icon set (`fpIconNames`) |
+| `FpIcon` | A 21-glyph 16 px pixel icon set (`fpIconNames`) |
 
 Element components take Reka's `as` and `asChild`.
 

package/dist/FpButtonGroup.vue.d.ts

@@ -0,0 +1,18 @@
+import type { PrimitiveProps } from 'reka-ui';
+export interface FpButtonGroupProps extends PrimitiveProps {
+}
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FpButtonGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FpButtonGroupProps> & Readonly<{}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+}, {}, {}, {}, 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/FpMenu.vue.d.ts

@@ -0,0 +1,51 @@
+export interface FpMenuProps {
+    /** The side of the trigger the plate drops on. It flips to the other side when there is no room. */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** How the plate lines up with the trigger along that side. */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * Shuts out the rest of the page while the menu is open: pointer events and scrolling outside it
+     * are blocked, and assistive tech reads only the menu.
+     */
+    modal?: boolean;
+    /**
+     * Where the plate is mounted, a selector or an element. It takes the skin of the nearest
+     * `data-fp-skin` around the trigger with it; a custom skin set on another selector needs `to`
+     * inside that element.
+     */
+    to?: string | HTMLElement;
+}
+type __VLS_Props = FpMenuProps;
+type __VLS_Slots = {
+    /**
+     * The button that opens the menu, such as an `FpButton`. It gets `aria-haspopup` and
+     * `aria-expanded`, which hold a chrome button down while the menu is open.
+     */
+    trigger?: (props: {
+        open: boolean;
+    }) => unknown;
+    /** The menu's rows: `FpMenuItem` and `FpMenuSeparator`. */
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    side: "left" | "right" | "bottom" | "top";
+    align: "center" | "start" | "end";
+    modal: boolean;
+    to: string | HTMLElement;
+}, {}, {}, {}, 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/FpMenuItem.vue.d.ts

@@ -0,0 +1,26 @@
+import type { PrimitiveProps } from 'reka-ui';
+export interface FpMenuItemProps extends PrimitiveProps {
+    /** Greys the row out; it can't be chosen. */
+    disabled?: boolean;
+    /** The text type-ahead matches, when the row's own text is not what a user would type. */
+    textValue?: string;
+}
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FpMenuItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (event: Event) => any;
+}, string, import("vue").PublicProps, Readonly<FpMenuItemProps> & Readonly<{
+    onSelect?: ((event: Event) => any) | undefined;
+}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+}, {}, {}, {}, 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/FpMenuSeparator.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/icons.d.ts

@@ -1,4 +1,4 @@
-export type FpIconName = 'add' | 'saved' | 'settings' | 'help' | 'home' | 'undo' | 'redo' | 'save' | 'copy' | 'trash' | 'close' | 'grip' | 'left' | 'right' | 'quick' | 'grid' | 'go' | 'play' | 'menu';
+export type FpIconName = 'add' | 'saved' | 'settings' | 'help' | 'home' | 'undo' | 'redo' | 'save' | 'copy' | 'trash' | 'close' | 'grip' | 'left' | 'right' | 'down' | 'quick' | 'grid' | 'go' | 'play' | 'menu' | 'power';
 /** One path per glyph: every horizontal run of lit pixels becomes a 1 px tall rectangle. */
 export declare function toPath(rows: readonly string[]): string;
 /** Every icon name, in the order the set lists them. */

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export type { FpDeviceFit } from './fit';
 export { default as FpButton } from './FpButton.vue';
 export type { FpButtonProps } from './FpButton.vue';
+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 FpDevice } from './FpDevice.vue';
@@ -19,6 +21,11 @@ export { default as FpLcdLine } from './FpLcdLine.vue';
 export type { FpLcdLineProps } from './FpLcdLine.vue';
 export { default as FpLed } from './FpLed.vue';
 export type { FpLedColor, FpLedProps } from './FpLed.vue';
+export { default as FpMenu } from './FpMenu.vue';
+export type { FpMenuProps } from './FpMenu.vue';
+export { default as FpMenuItem } from './FpMenuItem.vue';
+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 FpReadout } from './FpReadout.vue';

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, openBlock as p, renderList as m, renderSlot as h, resolveDynamicComponent as g, shallowRef as _, toDisplayString as v, unref as y, useAttrs as b, useId as x, useModel as S, useTemplateRef as C, warn as w, watch as T, withCtx as E } from "vue";
-import { Primitive as D, SliderRoot as O, SliderThumb as k, SliderTrack as A, SwitchRoot as ee, SwitchThumb as te } 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, 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";
 //#endregion
 //#region src/FpButton.vue
-var j = /* @__PURE__ */ c({
+var L = /* @__PURE__ */ c({
 	__name: "FpButton",
 	props: {
 		pressed: {
@@ -14,14 +14,14 @@ var j = /* @__PURE__ */ c({
 	},
 	setup(e) {
 		let t = e;
-		return (e, r) => (p(), n(y(D), {
+		return (e, r) => (m(), n(x(P), {
 			as: t.as,
 			"as-child": t.asChild,
 			class: "fp-chrome-btn",
 			type: t.as === "button" && !t.asChild ? "button" : void 0,
 			"aria-pressed": t.pressed
 		}, {
-			default: E(() => [h(e.$slots, "default")]),
+			default: O(() => [_(e.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"as",
@@ -30,7 +30,25 @@ var j = /* @__PURE__ */ c({
 			"aria-pressed"
 		]));
 	}
-}), ne = /* @__PURE__ */ c({
+}), ie = /* @__PURE__ */ c({
+	__name: "FpButtonGroup",
+	props: {
+		asChild: { type: Boolean },
+		as: { default: "div" }
+	},
+	setup(e) {
+		let t = e;
+		return (e, r) => (m(), n(x(P), {
+			as: t.as,
+			"as-child": t.asChild,
+			class: "fp-button-group",
+			role: "group"
+		}, {
+			default: O(() => [_(e.$slots, "default")]),
+			_: 3
+		}, 8, ["as", "as-child"]));
+	}
+}), ae = /* @__PURE__ */ c({
 	__name: "FpCap",
 	props: {
 		color: { default: "white" },
@@ -49,14 +67,14 @@ var j = /* @__PURE__ */ c({
 			graphite: "fp-cap-graphite",
 			berry: "fp-cap-berry"
 		};
-		return (e, i) => (p(), n(y(D), {
+		return (e, i) => (m(), n(x(P), {
 			as: t.as,
 			"as-child": t.asChild,
 			class: d(["fp-cap", r[t.color]]),
 			type: t.as === "button" && !t.asChild ? "button" : void 0,
 			"aria-pressed": t.pressed
 		}, {
-			default: E(() => [h(e.$slots, "default")]),
+			default: O(() => [_(e.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"as",
@@ -69,7 +87,7 @@ var j = /* @__PURE__ */ c({
 });
 //#endregion
 //#region src/fit.ts
-function re(e, t, n, r) {
+function oe(e, t, n, r) {
 	if (t.width <= 0 || n.width <= 0) return null;
 	let i = t.width / n.width;
 	if (e === "contain") {
@@ -80,7 +98,7 @@ function re(e, t, n, r) {
 }
 //#endregion
 //#region src/FpDevice.vue?vue&type=script&setup=true&lang.ts
-var M = { class: "fp-device-body" }, N = /* @__PURE__ */ c({
+var R = { class: "fp-device-body" }, z = /* @__PURE__ */ c({
 	__name: "FpDevice",
 	props: {
 		backdrop: {
@@ -97,14 +115,14 @@ var M = { class: "fp-device-body" }, N = /* @__PURE__ */ c({
 		maxScale: { default: 1 }
 	},
 	setup(e) {
-		let n = e, r = C("stage"), o = C("device"), s = _({
+		let n = e, r = T("stage"), o = T("device"), s = y({
 			width: 0,
 			height: 0
-		}), c = _(0), l = t(() => n.fit === "none" ? !1 : n.width !== void 0 || (w(`FpDevice: fit="${n.fit}" needs a design width; the device is not scaled.`), !1)), u = t(() => n.height ?? c.value), m = t(() => !l.value || n.fit === "none" ? null : re(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 : oe(n.fit, s.value, {
 			width: n.width,
 			height: u.value
 		}, n.maxScale));
-		function g() {
+		function h() {
 			if (!r.value || !o.value) return;
 			let e = getComputedStyle(r.value), t = (e) => Number.parseFloat(e) || 0;
 			s.value = {
@@ -112,23 +130,23 @@ var M = { class: "fp-device-body" }, N = /* @__PURE__ */ c({
 				height: r.value.clientHeight - t(e.paddingTop) - t(e.paddingBottom)
 			}, c.value = o.value.offsetHeight;
 		}
-		T([
+		D([
 			l,
 			r,
 			o
 		], ([e, t, n], r, i) => {
 			if (!e || !t || !n || typeof ResizeObserver > "u") return;
-			let a = new ResizeObserver(g);
+			let a = new ResizeObserver(h);
 			a.observe(t), a.observe(n), i(() => a.disconnect());
 		}, {
 			flush: "post",
 			immediate: !0
 		});
-		let v = t(() => l.value ? { contain: "inline-size" } : void 0), y = t(() => {
+		let g = t(() => l.value ? { contain: "inline-size" } : void 0), v = t(() => {
 			if (!l.value) return { display: "contents" };
-			if (m.value !== null) return {
-				width: `${n.width * m.value}px`,
-				height: `${u.value * m.value}px`,
+			if (p.value !== null) return {
+				width: `${n.width * p.value}px`,
+				height: `${u.value * p.value}px`,
 				marginInline: "auto"
 			};
 		}), b = t(() => {
@@ -136,31 +154,31 @@ var M = { class: "fp-device-body" }, N = /* @__PURE__ */ c({
 				boxSizing: "border-box",
 				width: `${n.width}px`,
 				height: n.height === void 0 ? void 0 : `${n.height}px`,
-				scale: m.value ?? void 0,
+				scale: p.value ?? void 0,
 				transformOrigin: "0 0",
-				visibility: m.value === null ? "hidden" : void 0
+				visibility: p.value === null ? "hidden" : void 0
 			};
 		});
-		return (e, t) => (p(), i("div", {
+		return (e, t) => (m(), i("div", {
 			ref_key: "stage",
 			ref: r,
 			class: d({ "fp-device-backdrop": n.backdrop }),
-			style: f(v.value)
-		}, [a("div", { style: f(y.value) }, [n.rim ? (p(), i("div", {
+			style: f(g.value)
+		}, [a("div", { style: f(v.value) }, [n.rim ? (m(), i("div", {
 			key: 0,
 			ref_key: "device",
 			ref: o,
 			class: "fp-device-rim",
 			style: f(b.value)
-		}, [a("div", M, [h(e.$slots, "default")])], 4)) : (p(), i("div", {
+		}, [a("div", R, [_(e.$slots, "default")])], 4)) : (m(), i("div", {
 			key: 1,
 			ref_key: "device",
 			ref: o,
 			class: "fp-device-body",
 			style: f(b.value)
-		}, [h(e.$slots, "default")], 4))], 4)], 6));
+		}, [_(e.$slots, "default")], 4))], 4)], 6));
 	}
-}), P = /* @__PURE__ */ c({
+}), B = /* @__PURE__ */ c({
 	__name: "FpGelButton",
 	props: {
 		asChild: { type: Boolean },
@@ -168,13 +186,13 @@ var M = { class: "fp-device-body" }, N = /* @__PURE__ */ c({
 	},
 	setup(e) {
 		let t = e;
-		return (e, r) => (p(), n(y(D), {
+		return (e, r) => (m(), n(x(P), {
 			as: t.as,
 			"as-child": t.asChild,
 			class: "fp-gel",
 			type: t.as === "button" && !t.asChild ? "button" : void 0
 		}, {
-			default: E(() => [h(e.$slots, "default")]),
+			default: O(() => [_(e.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"as",
@@ -182,7 +200,7 @@ var M = { class: "fp-device-body" }, N = /* @__PURE__ */ c({
 			"type"
 		]));
 	}
-}), ie = /* @__PURE__ */ c({
+}), V = /* @__PURE__ */ c({
 	__name: "FpHousing",
 	props: {
 		asChild: { type: Boolean },
@@ -190,16 +208,16 @@ var M = { class: "fp-device-body" }, N = /* @__PURE__ */ c({
 	},
 	setup(e) {
 		let t = e;
-		return (e, r) => (p(), n(y(D), {
+		return (e, r) => (m(), n(x(P), {
 			as: t.as,
 			"as-child": t.asChild,
 			class: "fp-housing"
 		}, {
-			default: E(() => [h(e.$slots, "default")]),
+			default: O(() => [_(e.$slots, "default")]),
 			_: 3
 		}, 8, ["as", "as-child"]));
 	}
-}), F = [
+}), H = [
 	"................",
 	"................",
 	".....#..........",
@@ -216,7 +234,7 @@ var M = { class: "fp-device-body" }, N = /* @__PURE__ */ c({
 	"................",
 	"................",
 	"................"
-], I = [
+], U = [
 	"................",
 	"................",
 	".........##.....",
@@ -233,7 +251,7 @@ var M = { class: "fp-device-body" }, N = /* @__PURE__ */ c({
 	".........##.....",
 	"................",
 	"................"
-], L = (e) => e.map((e) => [...e].reverse().join("")), R = {
+], W = (e) => e.map((e) => [...e].reverse().join("")), G = {
 	add: [
 		"................",
 		"................",
@@ -270,8 +288,26 @@ var M = { class: "fp-device-body" }, N = /* @__PURE__ */ c({
 		"................",
 		"................"
 	],
-	left: I,
-	right: L(I),
+	left: U,
+	right: W(U),
+	down: [
+		"................",
+		"................",
+		"................",
+		"................",
+		"................",
+		"..##........##..",
+		"..###......###..",
+		"...###....###...",
+		"....###..###....",
+		".....######.....",
+		"......####......",
+		".......##.......",
+		"................",
+		"................",
+		"................",
+		"................"
+	],
 	go: [
 		"................",
 		"................",
@@ -308,8 +344,8 @@ var M = { class: "fp-device-body" }, N = /* @__PURE__ */ c({
 		"................",
 		"................"
 	],
-	undo: F,
-	redo: L(F),
+	undo: H,
+	redo: W(H),
 	home: [
 		"................",
 		".......##.......",
@@ -507,9 +543,27 @@ var M = { class: "fp-device-body" }, N = /* @__PURE__ */ c({
 		"................",
 		"................",
 		"................"
+	],
+	power: [
+		"................",
+		"................",
+		".......##.......",
+		".......##.......",
+		"...##..##..##...",
+		"..###..##..###..",
+		"..##...##...##..",
+		"..##...##...##..",
+		"..##........##..",
+		"..##........##..",
+		"..###......###..",
+		"...###....###...",
+		"....########....",
+		".....######.....",
+		"................",
+		"................"
 	]
 };
-function z(e) {
+function K(e) {
 	let t = "";
 	return e.forEach((e, n) => {
 		let r = 0;
@@ -525,27 +579,27 @@ function z(e) {
 		}
 	}), t;
 }
-var B = Object.keys(R), V = Object.fromEntries(B.map((e) => [e, z(R[e])])), H = [
+var q = Object.keys(G), se = Object.fromEntries(q.map((e) => [e, K(G[e])])), ce = [
 	"role",
 	"aria-label",
 	"aria-hidden"
-], U = ["d"], W = /* @__PURE__ */ c({
+], le = ["d"], J = /* @__PURE__ */ c({
 	__name: "FpIcon",
 	props: {
 		name: {},
 		label: {}
 	},
 	setup(e) {
-		let n = e, r = t(() => V[n.name]);
-		return (e, t) => (p(), i("svg", {
+		let n = e, r = t(() => se[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, U)], 8, H));
+		}, [a("path", { d: r.value }, null, 8, le)], 8, ce));
 	}
-}), G = [
+}), ue = [
 	"tabindex",
 	"aria-valuemin",
 	"aria-valuemax",
@@ -553,7 +607,7 @@ var B = Object.keys(R), V = Object.fromEntries(B.map((e) => [e, z(R[e])])), H =
 	"aria-valuetext",
 	"aria-labelledby",
 	"aria-disabled"
-], K = ["id"], q = 200, J = .1, Y = 270, ae = /* @__PURE__ */ c({
+], de = ["id"], fe = 200, pe = .1, Y = 270, me = /* @__PURE__ */ c({
 	inheritAttrs: !1,
 	__name: "FpKnob",
 	props: /*@__PURE__*/ l({
@@ -569,34 +623,34 @@ var B = Object.keys(R), V = Object.fromEntries(B.map((e) => [e, z(R[e])])), H =
 	}),
 	emits: /*@__PURE__*/ l(["valueCommit"], ["update:modelValue"]),
 	setup(e, { emit: n }) {
-		let o = e, s = n, c = S(e, "modelValue"), l = b(), d = t(() => ({
+		let o = e, s = n, c = w(e, "modelValue"), l = S(), d = t(() => ({
 			class: l.class,
 			style: l.style
-		})), m = t(() => {
+		})), p = t(() => {
 			let { class: e, style: t, ...n } = l;
 			return n;
-		}), h = x(), g = t(() => (String(o.step).split(".")[1] ?? "").length);
+		}), h = C(), g = t(() => (String(o.step).split(".")[1] ?? "").length);
 		function _(e) {
 			let t = Math.round((e - o.min) / o.step) * o.step + o.min, n = Math.min(o.max, Math.max(o.min, t));
 			return Number(n.toFixed(g.value));
 		}
-		let C = t(() => _(c.value)), w = t(() => {
-			let e = o.max - o.min, t = e > 0 ? (C.value - o.min) / e : 0;
+		let v = t(() => _(c.value)), y = t(() => {
+			let e = o.max - o.min, t = e > 0 ? (v.value - o.min) / e : 0;
 			return Math.round(t * Y - Y / 2);
 		});
 		function T(e) {
 			let t = _(e);
-			return t !== C.value && (c.value = t, !0);
+			return t !== v.value && (c.value = t, !0);
 		}
 		function E(e) {
 			if (o.disabled) return;
 			let t = o.step * 10, n = {
-				ArrowUp: C.value + o.step,
-				ArrowRight: C.value + o.step,
-				ArrowDown: C.value - o.step,
-				ArrowLeft: C.value - o.step,
-				PageUp: C.value + t,
-				PageDown: C.value - t,
+				ArrowUp: v.value + o.step,
+				ArrowRight: v.value + o.step,
+				ArrowDown: v.value - o.step,
+				ArrowLeft: v.value - o.step,
+				PageUp: v.value + t,
+				PageDown: v.value - t,
 				Home: o.min,
 				End: o.max
 			}[e.key];
@@ -612,13 +666,13 @@ var B = Object.keys(R), V = Object.fromEntries(B.map((e) => [e, z(R[e])])), H =
 			}), D = {
 				pointerId: e.pointerId,
 				y: e.clientY,
-				raw: C.value,
-				start: C.value
+				raw: v.value,
+				start: v.value
 			};
 		}
 		function k(e) {
 			if (!D || e.pointerId !== D.pointerId) return;
-			let t = (o.max - o.min) / q * (e.shiftKey ? J : 1);
+			let t = (o.max - o.min) / fe * (e.shiftKey ? pe : 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) {
@@ -626,15 +680,15 @@ var B = Object.keys(R), V = Object.fromEntries(B.map((e) => [e, z(R[e])])), H =
 			let t = _(D.raw), n = t !== D.start;
 			D = void 0, n && s("valueCommit", t);
 		}
-		return (e, t) => (p(), i("div", u({ class: "fp-unit" }, d.value), [a("div", u(m.value, {
+		return (e, t) => (m(), i("div", u({ class: "fp-unit" }, d.value), [a("div", u(p.value, {
 			class: "fp-knob",
 			role: "slider",
 			tabindex: o.disabled ? void 0 : 0,
 			"aria-valuemin": o.min,
 			"aria-valuemax": o.max,
-			"aria-valuenow": C.value,
-			"aria-valuetext": o.valueText?.(C.value),
-			"aria-labelledby": o.label ? y(h) : void 0,
+			"aria-valuenow": v.value,
+			"aria-valuetext": o.valueText?.(v.value),
+			"aria-labelledby": o.label ? x(h) : void 0,
 			"aria-disabled": o.disabled || void 0,
 			onKeydown: E,
 			onPointerdown: O,
@@ -643,14 +697,14 @@ var B = Object.keys(R), V = Object.fromEntries(B.map((e) => [e, z(R[e])])), H =
 			onPointercancel: A
 		}), [a("span", {
 			class: "fp-knob-mark",
-			style: f({ rotate: `${w.value}deg` })
-		}, null, 4)], 16, G), o.label ? (p(), i("span", {
+			style: f({ rotate: `${y.value}deg` })
+		}, null, 4)], 16, ue), o.label ? (m(), i("span", {
 			key: 0,
-			id: y(h),
+			id: x(h),
 			class: "fp-silk"
-		}, v(o.label), 9, K)) : r("", !0)], 16));
+		}, b(o.label), 9, de)) : r("", !0)], 16));
 	}
-}), oe = /* @__PURE__ */ c({
+}), he = /* @__PURE__ */ c({
 	__name: "FpLcd",
 	props: {
 		asChild: { type: Boolean },
@@ -658,20 +712,20 @@ var B = Object.keys(R), V = Object.fromEntries(B.map((e) => [e, z(R[e])])), H =
 	},
 	setup(e) {
 		let t = e;
-		return (e, r) => (p(), n(y(D), {
+		return (e, r) => (m(), n(x(P), {
 			as: t.as,
 			"as-child": t.asChild,
 			class: "fp-lcd"
 		}, {
-			default: E(() => [h(e.$slots, "default")]),
+			default: O(() => [_(e.$slots, "default")]),
 			_: 3
 		}, 8, ["as", "as-child"]));
 	}
-}), se = {
+}), ge = {
 	key: 0,
 	class: "fp-lcd-ghost",
 	"aria-hidden": "true"
-}, ce = { key: 2 }, le = /* @__PURE__ */ c({
+}, _e = { key: 2 }, ve = /* @__PURE__ */ c({
 	__name: "FpLcdLine",
 	props: {
 		text: {},
@@ -683,15 +737,15 @@ var B = Object.keys(R), V = Object.fromEntries(B.map((e) => [e, z(R[e])])), H =
 	},
 	setup(e) {
 		let a = e, o = t(() => "8".repeat(a.cells ?? a.text.length));
-		return (e, t) => (p(), n(y(D), {
+		return (e, t) => (m(), n(x(P), {
 			as: a.as,
 			"as-child": a.asChild,
 			class: "fp-lcd-line"
 		}, {
-			default: E(() => [a.ghost ? (p(), i("span", se, v(o.value), 1)) : r("", !0), a.redraw ? (p(), i("span", {
+			default: O(() => [a.ghost ? (m(), i("span", ge, b(o.value), 1)) : r("", !0), a.redraw ? (m(), i("span", {
 				key: a.text,
 				class: "fp-lcd-redraw"
-			}, v(a.text), 1)) : (p(), i("span", ce, v(a.text), 1))]),
+			}, b(a.text), 1)) : (m(), i("span", _e, b(a.text), 1))]),
 			_: 1
 		}, 8, ["as", "as-child"]));
 	}
@@ -699,11 +753,11 @@ var B = Object.keys(R), V = Object.fromEntries(B.map((e) => [e, z(R[e])])), H =
 	flat: "fp-lens-flat",
 	diffused: "fp-lens-diffused",
 	clear: "fp-lens-clear"
-}, ue = [
+}, ye = [
 	"role",
 	"aria-label",
 	"aria-hidden"
-], de = /* @__PURE__ */ c({
+], be = /* @__PURE__ */ c({
 	__name: "FpLed",
 	props: {
 		color: { default: "green" },
@@ -718,10 +772,10 @@ var B = Object.keys(R), V = Object.fromEntries(B.map((e) => [e, z(R[e])])), H =
 			amber: "fp-led-amber",
 			red: "fp-led-red"
 		};
-		return (e, r) => (p(), i("span", {
+		return (e, r) => (m(), i("span", {
 			class: d(["fp-led", [
 				n[t.color],
-				t.lens && y(X)[t.lens],
+				t.lens && x(X)[t.lens],
 				{
 					"fp-led-lit": t.lit,
 					"fp-blink-twice": t.lit && t.blink
@@ -730,16 +784,112 @@ var B = Object.keys(R), V = Object.fromEntries(B.map((e) => [e, z(R[e])])), H =
 			role: t.label ? "img" : void 0,
 			"aria-label": t.label || void 0,
 			"aria-hidden": t.label ? void 0 : "true"
-		}, null, 10, ue));
+		}, null, 10, ye));
 	}
-}), fe = [
+}), xe = /* @__PURE__ */ c({
+	inheritAttrs: !1,
+	__name: "FpMenu",
+	props: /*@__PURE__*/ l({
+		side: { default: "bottom" },
+		align: { default: "start" },
+		modal: {
+			type: Boolean,
+			default: !0
+		},
+		to: { default: "body" }
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: ["update:open"],
+	setup(e) {
+		let t = e, r = w(e, "open"), i = S(), a = h(), o = h();
+		function c() {
+			let e = a.value?.$el;
+			o.value = e instanceof Element ? e.closest("[data-fp-skin]")?.getAttribute("data-fp-skin") ?? void 0 : void 0;
+		}
+		return D(r, (e) => {
+			e && c();
+		}), p(() => {
+			r.value && c();
+		}), (e, c) => (m(), n(x(ee), {
+			open: r.value,
+			"onUpdate:open": c[0] ||= (e) => r.value = e,
+			modal: t.modal
+		}, {
+			default: O(() => [s(x(N), {
+				ref_key: "trigger",
+				ref: a,
+				"as-child": ""
+			}, {
+				default: O(() => [_(e.$slots, "trigger", { open: r.value })]),
+				_: 3
+			}, 512), s(x(j), { to: t.to }, {
+				default: O(() => [s(x(k), u(x(i), {
+					class: "fp-menu",
+					"data-fp-skin": o.value,
+					side: t.side,
+					align: t.align,
+					"side-offset": 4,
+					"collision-padding": 8,
+					style: { maxHeight: "var(--reka-dropdown-menu-content-available-height)" }
+				}), {
+					default: O(() => [_(e.$slots, "default")]),
+					_: 3
+				}, 16, [
+					"data-fp-skin",
+					"side",
+					"align"
+				])]),
+				_: 3
+			}, 8, ["to"])]),
+			_: 3
+		}, 8, ["open", "modal"]));
+	}
+}), Se = /* @__PURE__ */ c({
+	__name: "FpMenuItem",
+	props: {
+		disabled: { type: Boolean },
+		textValue: {},
+		asChild: { type: Boolean },
+		as: { default: "div" }
+	},
+	emits: ["select"],
+	setup(e, { emit: t }) {
+		let r = e, i = t;
+		return (e, t) => (m(), n(x(A), {
+			as: r.as,
+			"as-child": r.asChild,
+			disabled: r.disabled,
+			"text-value": r.textValue,
+			class: "fp-menu-item",
+			onSelect: t[0] ||= (e) => i("select", e)
+		}, {
+			default: O(() => [_(e.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"as",
+			"as-child",
+			"disabled",
+			"text-value"
+		]));
+	}
+}), Ce = /* @__PURE__ */ c({
+	__name: "FpMenuSeparator",
+	setup(e) {
+		return (e, t) => (m(), n(x(M), { class: "fp-menu-separator" }));
+	}
+}), we = [
 	"data-orientation",
 	"aria-valuemin",
 	"aria-valuemax",
 	"aria-valuenow",
 	"aria-valuetext",
 	"aria-labelledby"
-], pe = ["id"], me = /* @__PURE__ */ c({
+], Te = ["id"], Ee = /* @__PURE__ */ c({
 	inheritAttrs: !1,
 	__name: "FpMeter",
 	props: {
@@ -755,44 +905,44 @@ var B = Object.keys(R), V = Object.fromEntries(B.map((e) => [e, z(R[e])])), H =
 		valueText: {}
 	},
 	setup(e) {
-		let n = e, o = b(), s = t(() => ({
+		let n = e, o = S(), s = t(() => ({
 			class: o.class,
 			style: o.style
 		})), c = t(() => {
 			let { class: e, style: t, ...n } = o;
 			return n;
-		}), l = x(), d = t(() => Math.min(n.max, Math.max(n.min, n.value)));
+		}), l = C(), d = t(() => Math.min(n.max, Math.max(n.min, n.value)));
 		function f(e) {
 			let t = n.max - n.min;
 			return t > 0 ? Math.min(1, Math.max(0, (e - n.min) / t)) : 0;
 		}
-		function m(e, t) {
+		function p(e, t) {
 			return t(f(e) * n.segments + 1e-9) / n.segments;
 		}
 		let h = t(() => {
 			let e = n.max - n.min;
 			return {
-				"--fp-meter-level": String(m(d.value, Math.floor)),
+				"--fp-meter-level": String(p(d.value, Math.floor)),
 				"--fp-meter-segments": String(n.segments),
-				"--fp-meter-amber": String(m(n.amberAt ?? n.min + e * .7, Math.round)),
-				"--fp-meter-red": String(m(n.redAt ?? n.min + e * .9, Math.round))
+				"--fp-meter-amber": String(p(n.amberAt ?? n.min + e * .7, Math.round)),
+				"--fp-meter-red": String(p(n.redAt ?? n.min + e * .9, Math.round))
 			};
 		});
-		return (e, t) => (p(), i("div", u({ class: "fp-unit" }, s.value), [a("div", u(c.value, {
-			class: ["fp-meter", n.lens && y(X)[n.lens]],
+		return (e, t) => (m(), i("div", u({ class: "fp-unit" }, s.value), [a("div", u(c.value, {
+			class: ["fp-meter", n.lens && x(X)[n.lens]],
 			role: "meter",
 			"data-orientation": n.orientation,
 			"aria-valuemin": n.min,
 			"aria-valuemax": n.max,
 			"aria-valuenow": d.value,
 			"aria-valuetext": n.valueText?.(d.value),
-			"aria-labelledby": n.label ? y(l) : void 0,
+			"aria-labelledby": n.label ? x(l) : void 0,
 			style: h.value
-		}), null, 16, fe), n.label ? (p(), i("span", {
+		}), null, 16, we), n.label ? (m(), i("span", {
 			key: 0,
-			id: y(l),
+			id: x(l),
 			class: "fp-silk"
-		}, v(n.label), 9, pe)) : r("", !0)], 16));
+		}, b(n.label), 9, Te)) : r("", !0)], 16));
 	}
 }), Z = {
 	0: "abcdef",
@@ -838,10 +988,10 @@ function Q(e) {
 }
 //#endregion
 //#region src/FpReadout.vue?vue&type=script&setup=true&lang.ts
-var he = { class: "fp-readout-text" }, ge = ["data-colon"], _e = { class: "fp-readout-lit" }, ve = ["data-segment"], ye = {
+var De = { class: "fp-readout-text" }, Oe = ["data-colon"], ke = { class: "fp-readout-lit" }, Ae = ["data-segment"], je = {
 	key: 0,
 	"data-segment": "dp"
-}, be = /* @__PURE__ */ c({
+}, Me = /* @__PURE__ */ c({
 	__name: "FpReadout",
 	props: {
 		value: {},
@@ -876,25 +1026,25 @@ var he = { class: "fp-readout-text" }, ge = ["data-colon"], _e = { class: "fp-re
 				dot: !1
 			})), ...e];
 		});
-		return (t, n) => (p(), i("span", { class: d(["fp-readout", [s[o.color], o.lens && y(X)[o.lens]]]) }, [a("span", he, v(o.valueText ? o.valueText(c.value) : c.value), 1), (p(!0), i(e, null, m(l.value, (t, o) => (p(), i("span", {
+		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", {
 			key: o,
 			class: "fp-readout-cell",
 			"data-colon": t.colon ? "" : void 0,
 			"aria-hidden": "true"
-		}, [a("span", _e, [t.colon ? (p(), 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)) : (p(), i(e, { key: 1 }, [(p(!0), i(e, null, m(t.lit, (e) => (p(), i("span", {
+		}, [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", {
 			key: e,
 			"data-segment": e
-		}, null, 8, ve))), 128)), t.dot ? (p(), i("span", ye)) : r("", !0)], 64))])], 8, ge))), 128))], 2));
+		}, null, 8, Ae))), 128)), t.dot ? (m(), i("span", je)) : r("", !0)], 64))])], 8, Oe))), 128))], 2));
 	}
-}), $ = {
+}), Ne = {
 	class: "fp-screw",
 	"aria-hidden": "true"
-}, xe = /* @__PURE__ */ c({
+}, Pe = /* @__PURE__ */ c({
 	__name: "FpScrew",
 	setup(e) {
-		return (e, t) => (p(), i("span", $));
+		return (e, t) => (m(), i("span", Ne));
 	}
-}), Se = /* @__PURE__ */ c({
+}), $ = /* @__PURE__ */ c({
 	__name: "FpSilk",
 	props: {
 		asChild: { type: Boolean },
@@ -902,16 +1052,16 @@ var he = { class: "fp-readout-text" }, ge = ["data-colon"], _e = { class: "fp-re
 	},
 	setup(e) {
 		let t = e;
-		return (e, r) => (p(), n(y(D), {
+		return (e, r) => (m(), n(x(P), {
 			as: t.as,
 			"as-child": t.asChild,
 			class: "fp-silk"
 		}, {
-			default: E(() => [h(e.$slots, "default")]),
+			default: O(() => [_(e.$slots, "default")]),
 			_: 3
 		}, 8, ["as", "as-child"]));
 	}
-}), Ce = ["id"], we = /* @__PURE__ */ c({
+}), Fe = ["id"], Ie = /* @__PURE__ */ c({
 	inheritAttrs: !1,
 	__name: "FpSlider",
 	props: /*@__PURE__*/ l({
@@ -928,31 +1078,31 @@ var he = { class: "fp-readout-text" }, ge = ["data-colon"], _e = { class: "fp-re
 	}),
 	emits: /*@__PURE__*/ l(["valueCommit"], ["update:modelValue"]),
 	setup(e, { emit: n }) {
-		let a = e, o = n, c = S(e, "modelValue"), l = b(), d = t(() => ({
+		let a = e, o = n, c = w(e, "modelValue"), l = S(), d = t(() => ({
 			class: l.class,
 			style: l.style
 		})), f = t(() => {
 			let { class: e, style: t, ...n } = l;
 			return n;
-		}), m = x(), h = t(() => [c.value]);
+		}), p = C(), h = t(() => [c.value]);
 		function g(e) {
 			e?.[0] !== void 0 && (c.value = e[0]);
 		}
-		let _ = C("unit");
-		function w(e) {
+		let _ = T("unit");
+		function v(e) {
 			a.disabled || e.button !== 0 || _.value?.querySelector("[role=\"slider\"]")?.focus({
 				preventScroll: !0,
 				focusVisible: !1
 			});
 		}
-		function T(e) {
+		function y(e) {
 			e[0] !== void 0 && o("valueCommit", e[0]);
 		}
-		return (e, t) => (p(), i("div", u({
+		return (e, t) => (m(), i("div", u({
 			ref_key: "unit",
 			ref: _,
 			class: "fp-unit"
-		}, d.value, { onPointerdownCapture: w }), [s(y(O), {
+		}, d.value, { onPointerdownCapture: v }), [s(x(F), {
 			class: "fp-fader",
 			"model-value": h.value,
 			min: a.min,
@@ -961,12 +1111,12 @@ var he = { class: "fp-readout-text" }, ge = ["data-colon"], _e = { class: "fp-re
 			orientation: a.orientation,
 			disabled: a.disabled,
 			"onUpdate:modelValue": g,
-			onValueCommit: T
+			onValueCommit: y
 		}, {
-			default: E(() => [s(y(A), { class: "fp-fader-slot" }), s(y(k), u(f.value, {
+			default: O(() => [s(x(te), { class: "fp-fader-slot" }), s(x(I), u(f.value, {
 				class: "fp-fader-cap",
 				"aria-valuetext": a.valueText?.(c.value),
-				"aria-labelledby": a.label ? y(m) : void 0,
+				"aria-labelledby": a.label ? x(p) : void 0,
 				"aria-disabled": a.disabled || void 0
 			}), null, 16, [
 				"aria-valuetext",
@@ -981,13 +1131,13 @@ var he = { class: "fp-readout-text" }, ge = ["data-colon"], _e = { class: "fp-re
 			"step",
 			"orientation",
 			"disabled"
-		]), a.label ? (p(), i("span", {
+		]), a.label ? (m(), i("span", {
 			key: 0,
-			id: y(m),
+			id: x(p),
 			class: "fp-silk"
-		}, v(a.label), 9, Ce)) : r("", !0)], 16));
+		}, b(a.label), 9, Fe)) : r("", !0)], 16));
 	}
-}), Te = ["data-label-placement"], Ee = ["id"], De = /* @__PURE__ */ c({
+}), Le = ["data-label-placement"], Re = ["id"], ze = /* @__PURE__ */ c({
 	inheritAttrs: !1,
 	__name: "FpSwitch",
 	props: /*@__PURE__*/ l({
@@ -1009,26 +1159,26 @@ var he = { class: "fp-readout-text" }, ge = ["data-colon"], _e = { class: "fp-re
 			green: "fp-led-green",
 			amber: "fp-led-amber",
 			red: "fp-led-red"
-		}, c = S(e, "modelValue"), l = x(), d = b(), f = t(() => ({
+		}, c = w(e, "modelValue"), l = C(), d = S(), f = t(() => ({
 			class: d.class,
 			style: d.style
-		})), m = t(() => {
+		})), p = t(() => {
 			let { class: e, style: t, ...n } = d;
 			return n;
 		});
-		return (e, t) => (p(), i("div", u({
+		return (e, t) => (m(), i("div", u({
 			class: "fp-unit",
 			"data-label-placement": n.labelPlacement
-		}, f.value), [s(y(ee), u(m.value, {
+		}, f.value), [s(x(ne), u(p.value, {
 			modelValue: c.value,
 			"onUpdate:modelValue": t[0] ||= (e) => c.value = e,
 			class: ["fp-switch", o[n.color]],
 			"data-orientation": n.orientation,
 			disabled: n.disabled,
-			"aria-labelledby": n.label ? y(l) : void 0
+			"aria-labelledby": n.label ? x(l) : void 0
 		}), {
-			default: E(() => [s(y(te), { class: "fp-switch-rocker" }, {
-				default: E(() => [...t[1] ||= [a("span", { class: "fp-switch-lamp" }, null, -1), a("span", { class: "fp-switch-face" }, null, -1)]]),
+			default: O(() => [s(x(re), { 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
 			})]),
 			_: 1
@@ -1038,13 +1188,13 @@ var he = { class: "fp-readout-text" }, ge = ["data-colon"], _e = { class: "fp-re
 			"data-orientation",
 			"disabled",
 			"aria-labelledby"
-		]), n.label ? (p(), i("span", {
+		]), n.label ? (m(), i("span", {
 			key: 0,
-			id: y(l),
+			id: x(l),
 			class: "fp-silk"
-		}, v(n.label), 9, Ee)) : r("", !0)], 16, Te));
+		}, b(n.label), 9, Re)) : r("", !0)], 16, Le));
 	}
-}), Oe = /* @__PURE__ */ c({
+}), Be = /* @__PURE__ */ c({
 	__name: "FpWell",
 	props: {
 		asChild: { type: Boolean },
@@ -1052,16 +1202,16 @@ var he = { class: "fp-readout-text" }, ge = ["data-colon"], _e = { class: "fp-re
 	},
 	setup(e) {
 		let t = e;
-		return (e, r) => (p(), n(y(D), {
+		return (e, r) => (m(), n(x(P), {
 			as: t.as,
 			"as-child": t.asChild,
 			class: "fp-well"
 		}, {
-			default: E(() => [h(e.$slots, "default")]),
+			default: O(() => [_(e.$slots, "default")]),
 			_: 3
 		}, 8, ["as", "as-child"]));
 	}
-}), ke = { class: "fp-module-title" }, Ae = /* @__PURE__ */ c({
+}), Ve = { class: "fp-module-title" }, He = /* @__PURE__ */ c({
 	__name: "FpWindow",
 	props: {
 		as: { default: "section" },
@@ -1074,30 +1224,30 @@ var he = { class: "fp-readout-text" }, ge = ["data-colon"], _e = { class: "fp-re
 	},
 	emits: ["close"],
 	setup(e, { emit: t }) {
-		let i = e, c = t, l = x();
-		return (e, t) => (p(), n(y(D), {
+		let i = e, c = t, l = C();
+		return (e, t) => (m(), n(x(P), {
 			as: i.as,
 			class: d(["fp-window", [i.sheet ? "fp-sheet-panel" : "fp-module"]]),
-			"aria-labelledby": y(l)
+			"aria-labelledby": x(l)
 		}, {
-			default: E(() => [a("div", ke, [
-				(p(), n(g(`h${i.level}`), {
-					id: y(l),
+			default: O(() => [a("div", Ve, [
+				(m(), n(v(`h${i.level}`), {
+					id: x(l),
 					class: "fp-silk fp-window-title"
 				}, {
-					default: E(() => [o(v(i.title), 1)]),
+					default: O(() => [o(b(i.title), 1)]),
 					_: 1
 				}, 8, ["id"])),
-				h(e.$slots, "actions"),
-				i.closable ? (p(), n(j, {
+				_(e.$slots, "actions"),
+				i.closable ? (m(), n(L, {
 					key: 0,
 					"aria-label": i.closeLabel ?? `Close ${i.title}`,
 					onClick: t[0] ||= (e) => c("close")
 				}, {
-					default: E(() => [s(W, { name: "close" })]),
+					default: O(() => [s(J, { name: "close" })]),
 					_: 1
 				}, 8, ["aria-label"])) : r("", !0)
-			]), a("div", { class: d(i.flush ? void 0 : "fp-window-body") }, [h(e.$slots, "default")], 2)]),
+			]), a("div", { class: d(i.flush ? void 0 : "fp-window-body") }, [_(e.$slots, "default")], 2)]),
 			_: 3
 		}, 8, [
 			"as",
@@ -1107,4 +1257,4 @@ var he = { class: "fp-readout-text" }, ge = ["data-colon"], _e = { class: "fp-re
 	}
 });
 //#endregion
-export { j as FpButton, ne as FpCap, N as FpDevice, P as FpGelButton, ie as FpHousing, W as FpIcon, ae as FpKnob, oe as FpLcd, le as FpLcdLine, de as FpLed, me as FpMeter, be as FpReadout, xe as FpScrew, Se as FpSilk, we as FpSlider, De as FpSwitch, Oe as FpWell, Ae as FpWindow, B as fpIconNames, Q as fpReadoutGlyph };
+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 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@frontpanel/vue",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.4.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.3.0"
+    "@frontpanel/css": "^0.4.0"
   },
   "devDependencies": {
     "@tailwindcss/oxide": "^4.3.3",