@frontpanel/vue 0.2.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` | An 18-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/FpSwitch.vue.d.ts

@@ -0,0 +1,28 @@
+import type { FpLedColor } from './FpLed.vue';
+export interface FpSwitchProps {
+    /** A silkscreen label, which also names the switch. Without one, give it an `aria-label`. */
+    label?: string;
+    /** Where the label sits: under the switch, or level with it and before it in the line. */
+    labelPlacement?: 'below' | 'start';
+    /** Standing up, I at the top; or on its side, I on the right. */
+    orientation?: 'vertical' | 'horizontal';
+    /** The colour its lamp lights in. */
+    color?: FpLedColor;
+    disabled?: boolean;
+}
+type __VLS_Props = FpSwitchProps;
+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";
+    labelPlacement: "start" | "below";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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' | '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';
@@ -28,6 +35,8 @@ export { default as FpSilk } from './FpSilk.vue';
 export type { FpSilkProps } from './FpSilk.vue';
 export { default as FpSlider } from './FpSlider.vue';
 export type { FpSliderProps } from './FpSlider.vue';
+export { default as FpSwitch } from './FpSwitch.vue';
+export type { FpSwitchProps } from './FpSwitch.vue';
 export { default as FpWell } from './FpWell.vue';
 export type { FpWellProps } from './FpWell.vue';
 export { default as FpWindow } from './FpWindow.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 } 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"
 		]));
 	}
-}), M = /* @__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 ee(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 ee(e, t, n, r) {
 }
 //#endregion
 //#region src/FpDevice.vue?vue&type=script&setup=true&lang.ts
-var te = { class: "fp-device-body" }, ne = /* @__PURE__ */ c({
+var R = { class: "fp-device-body" }, z = /* @__PURE__ */ c({
 	__name: "FpDevice",
 	props: {
 		backdrop: {
@@ -97,14 +115,14 @@ var te = { class: "fp-device-body" }, ne = /* @__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 : ee(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 te = { class: "fp-device-body" }, ne = /* @__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 te = { class: "fp-device-body" }, ne = /* @__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", te, [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));
 	}
-}), re = /* @__PURE__ */ c({
+}), B = /* @__PURE__ */ c({
 	__name: "FpGelButton",
 	props: {
 		asChild: { type: Boolean },
@@ -168,13 +186,13 @@ var te = { class: "fp-device-body" }, ne = /* @__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 te = { class: "fp-device-body" }, ne = /* @__PURE__ */ c({
 			"type"
 		]));
 	}
-}), N = /* @__PURE__ */ c({
+}), V = /* @__PURE__ */ c({
 	__name: "FpHousing",
 	props: {
 		asChild: { type: Boolean },
@@ -190,16 +208,16 @@ var te = { class: "fp-device-body" }, ne = /* @__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"]));
 	}
-}), P = [
+}), H = [
 	"................",
 	"................",
 	".....#..........",
@@ -216,7 +234,7 @@ var te = { class: "fp-device-body" }, ne = /* @__PURE__ */ c({
 	"................",
 	"................",
 	"................"
-], F = [
+], U = [
 	"................",
 	"................",
 	".........##.....",
@@ -233,7 +251,7 @@ var te = { class: "fp-device-body" }, ne = /* @__PURE__ */ c({
 	".........##.....",
 	"................",
 	"................"
-], I = (e) => e.map((e) => [...e].reverse().join("")), L = {
+], W = (e) => e.map((e) => [...e].reverse().join("")), G = {
 	add: [
 		"................",
 		"................",
@@ -270,8 +288,26 @@ var te = { class: "fp-device-body" }, ne = /* @__PURE__ */ c({
 		"................",
 		"................"
 	],
-	left: F,
-	right: I(F),
+	left: U,
+	right: W(U),
+	down: [
+		"................",
+		"................",
+		"................",
+		"................",
+		"................",
+		"..##........##..",
+		"..###......###..",
+		"...###....###...",
+		"....###..###....",
+		".....######.....",
+		"......####......",
+		".......##.......",
+		"................",
+		"................",
+		"................",
+		"................"
+	],
 	go: [
 		"................",
 		"................",
@@ -290,8 +326,26 @@ var te = { class: "fp-device-body" }, ne = /* @__PURE__ */ c({
 		"................",
 		"................"
 	],
-	undo: P,
-	redo: I(P),
+	play: [
+		"................",
+		"................",
+		"....#...........",
+		"....###.........",
+		"....####........",
+		"....######......",
+		"....#######.....",
+		"....#########...",
+		"....#########...",
+		"....#######.....",
+		"....######......",
+		"....####........",
+		"....###.........",
+		"....#...........",
+		"................",
+		"................"
+	],
+	undo: H,
+	redo: W(H),
 	home: [
 		"................",
 		".......##.......",
@@ -489,9 +543,27 @@ var te = { class: "fp-device-body" }, ne = /* @__PURE__ */ c({
 		"................",
 		"................",
 		"................"
+	],
+	power: [
+		"................",
+		"................",
+		".......##.......",
+		".......##.......",
+		"...##..##..##...",
+		"..###..##..###..",
+		"..##...##...##..",
+		"..##...##...##..",
+		"..##........##..",
+		"..##........##..",
+		"..###......###..",
+		"...###....###...",
+		"....########....",
+		".....######.....",
+		"................",
+		"................"
 	]
 };
-function ie(e) {
+function K(e) {
 	let t = "";
 	return e.forEach((e, n) => {
 		let r = 0;
@@ -507,27 +579,27 @@ function ie(e) {
 		}
 	}), t;
 }
-var R = Object.keys(L), z = Object.fromEntries(R.map((e) => [e, ie(L[e])])), B = [
+var q = Object.keys(G), se = Object.fromEntries(q.map((e) => [e, K(G[e])])), ce = [
 	"role",
 	"aria-label",
 	"aria-hidden"
-], V = ["d"], H = /* @__PURE__ */ c({
+], le = ["d"], J = /* @__PURE__ */ c({
 	__name: "FpIcon",
 	props: {
 		name: {},
 		label: {}
 	},
 	setup(e) {
-		let n = e, r = t(() => z[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, V)], 8, B));
+		}, [a("path", { d: r.value }, null, 8, le)], 8, ce));
 	}
-}), U = [
+}), ue = [
 	"tabindex",
 	"aria-valuemin",
 	"aria-valuemax",
@@ -535,7 +607,7 @@ var R = Object.keys(L), z = Object.fromEntries(R.map((e) => [e, ie(L[e])])), B =
 	"aria-valuetext",
 	"aria-labelledby",
 	"aria-disabled"
-], W = ["id"], G = 200, K = .1, q = 270, J = /* @__PURE__ */ c({
+], de = ["id"], fe = 200, pe = .1, Y = 270, me = /* @__PURE__ */ c({
 	inheritAttrs: !1,
 	__name: "FpKnob",
 	props: /*@__PURE__*/ l({
@@ -551,34 +623,34 @@ var R = Object.keys(L), z = Object.fromEntries(R.map((e) => [e, ie(L[e])])), B =
 	}),
 	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;
-			return Math.round(t * q - q / 2);
+		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];
@@ -594,13 +666,13 @@ var R = Object.keys(L), z = Object.fromEntries(R.map((e) => [e, ie(L[e])])), B =
 			}), 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) / G * (e.shiftKey ? K : 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) {
@@ -608,15 +680,15 @@ var R = Object.keys(L), z = Object.fromEntries(R.map((e) => [e, ie(L[e])])), B =
 			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,
@@ -625,14 +697,14 @@ var R = Object.keys(L), z = Object.fromEntries(R.map((e) => [e, ie(L[e])])), B =
 			onPointercancel: A
 		}), [a("span", {
 			class: "fp-knob-mark",
-			style: f({ rotate: `${w.value}deg` })
-		}, null, 4)], 16, U), 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, W)) : r("", !0)], 16));
+		}, b(o.label), 9, de)) : r("", !0)], 16));
 	}
-}), Y = /* @__PURE__ */ c({
+}), he = /* @__PURE__ */ c({
 	__name: "FpLcd",
 	props: {
 		asChild: { type: Boolean },
@@ -640,20 +712,20 @@ var R = Object.keys(L), z = Object.fromEntries(R.map((e) => [e, ie(L[e])])), B =
 	},
 	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"]));
 	}
-}), ae = {
+}), ge = {
 	key: 0,
 	class: "fp-lcd-ghost",
 	"aria-hidden": "true"
-}, oe = { key: 2 }, se = /* @__PURE__ */ c({
+}, _e = { key: 2 }, ve = /* @__PURE__ */ c({
 	__name: "FpLcdLine",
 	props: {
 		text: {},
@@ -665,15 +737,15 @@ var R = Object.keys(L), z = Object.fromEntries(R.map((e) => [e, ie(L[e])])), B =
 	},
 	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", ae, 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", oe, v(a.text), 1))]),
+			}, b(a.text), 1)) : (m(), i("span", _e, b(a.text), 1))]),
 			_: 1
 		}, 8, ["as", "as-child"]));
 	}
@@ -681,11 +753,11 @@ var R = Object.keys(L), z = Object.fromEntries(R.map((e) => [e, ie(L[e])])), B =
 	flat: "fp-lens-flat",
 	diffused: "fp-lens-diffused",
 	clear: "fp-lens-clear"
-}, ce = [
+}, ye = [
 	"role",
 	"aria-label",
 	"aria-hidden"
-], le = /* @__PURE__ */ c({
+], be = /* @__PURE__ */ c({
 	__name: "FpLed",
 	props: {
 		color: { default: "green" },
@@ -700,10 +772,10 @@ var R = Object.keys(L), z = Object.fromEntries(R.map((e) => [e, ie(L[e])])), B =
 			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
@@ -712,16 +784,112 @@ var R = Object.keys(L), z = Object.fromEntries(R.map((e) => [e, ie(L[e])])), B =
 			role: t.label ? "img" : void 0,
 			"aria-label": t.label || void 0,
 			"aria-hidden": t.label ? void 0 : "true"
-		}, null, 10, ce));
+		}, null, 10, ye));
 	}
-}), ue = [
+}), 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"
-], de = ["id"], fe = /* @__PURE__ */ c({
+], Te = ["id"], Ee = /* @__PURE__ */ c({
 	inheritAttrs: !1,
 	__name: "FpMeter",
 	props: {
@@ -737,44 +905,44 @@ var R = Object.keys(L), z = Object.fromEntries(R.map((e) => [e, ie(L[e])])), B =
 		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, ue), 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, de)) : r("", !0)], 16));
+		}, b(n.label), 9, Te)) : r("", !0)], 16));
 	}
 }), Z = {
 	0: "abcdef",
@@ -820,10 +988,10 @@ function Q(e) {
 }
 //#endregion
 //#region src/FpReadout.vue?vue&type=script&setup=true&lang.ts
-var pe = { class: "fp-readout-text" }, me = ["data-colon"], he = { class: "fp-readout-lit" }, ge = ["data-segment"], _e = {
+var De = { class: "fp-readout-text" }, Oe = ["data-colon"], ke = { class: "fp-readout-lit" }, Ae = ["data-segment"], je = {
 	key: 0,
 	"data-segment": "dp"
-}, ve = /* @__PURE__ */ c({
+}, Me = /* @__PURE__ */ c({
 	__name: "FpReadout",
 	props: {
 		value: {},
@@ -858,25 +1026,25 @@ var pe = { class: "fp-readout-text" }, me = ["data-colon"], he = { 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", pe, 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", he, [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, ge))), 128)), t.dot ? (p(), i("span", _e)) : r("", !0)], 64))])], 8, me))), 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"
-}, ye = /* @__PURE__ */ c({
+}, Pe = /* @__PURE__ */ c({
 	__name: "FpScrew",
 	setup(e) {
-		return (e, t) => (p(), i("span", $));
+		return (e, t) => (m(), i("span", Ne));
 	}
-}), be = /* @__PURE__ */ c({
+}), $ = /* @__PURE__ */ c({
 	__name: "FpSilk",
 	props: {
 		asChild: { type: Boolean },
@@ -884,16 +1052,16 @@ var pe = { class: "fp-readout-text" }, me = ["data-colon"], he = { 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"]));
 	}
-}), xe = ["id"], Se = /* @__PURE__ */ c({
+}), Fe = ["id"], Ie = /* @__PURE__ */ c({
 	inheritAttrs: !1,
 	__name: "FpSlider",
 	props: /*@__PURE__*/ l({
@@ -910,31 +1078,31 @@ var pe = { class: "fp-readout-text" }, me = ["data-colon"], he = { 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,
@@ -943,12 +1111,12 @@ var pe = { class: "fp-readout-text" }, me = ["data-colon"], he = { 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",
@@ -963,13 +1131,70 @@ var pe = { class: "fp-readout-text" }, me = ["data-colon"], he = { 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, xe)) : r("", !0)], 16));
+		}, b(a.label), 9, Fe)) : r("", !0)], 16));
 	}
-}), Ce = /* @__PURE__ */ c({
+}), Le = ["data-label-placement"], Re = ["id"], ze = /* @__PURE__ */ c({
+	inheritAttrs: !1,
+	__name: "FpSwitch",
+	props: /*@__PURE__*/ l({
+		label: {},
+		labelPlacement: { default: "below" },
+		orientation: { default: "vertical" },
+		color: { default: "red" },
+		disabled: { type: Boolean }
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let n = e, o = {
+			green: "fp-led-green",
+			amber: "fp-led-amber",
+			red: "fp-led-red"
+		}, c = w(e, "modelValue"), l = C(), d = S(), f = t(() => ({
+			class: d.class,
+			style: d.style
+		})), p = t(() => {
+			let { class: e, style: t, ...n } = d;
+			return n;
+		});
+		return (e, t) => (m(), i("div", u({
+			class: "fp-unit",
+			"data-label-placement": n.labelPlacement
+		}, 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 ? x(l) : void 0
+		}), {
+			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
+		}, 16, [
+			"modelValue",
+			"class",
+			"data-orientation",
+			"disabled",
+			"aria-labelledby"
+		]), n.label ? (m(), i("span", {
+			key: 0,
+			id: x(l),
+			class: "fp-silk"
+		}, b(n.label), 9, Re)) : r("", !0)], 16, Le));
+	}
+}), Be = /* @__PURE__ */ c({
 	__name: "FpWell",
 	props: {
 		asChild: { type: Boolean },
@@ -977,16 +1202,16 @@ var pe = { class: "fp-readout-text" }, me = ["data-colon"], he = { 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"]));
 	}
-}), we = { class: "fp-module-title" }, Te = /* @__PURE__ */ c({
+}), Ve = { class: "fp-module-title" }, He = /* @__PURE__ */ c({
 	__name: "FpWindow",
 	props: {
 		as: { default: "section" },
@@ -999,30 +1224,30 @@ var pe = { class: "fp-readout-text" }, me = ["data-colon"], he = { 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", we, [
-				(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(H, { 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",
@@ -1032,4 +1257,4 @@ var pe = { class: "fp-readout-text" }, me = ["data-colon"], he = { class: "fp-re
 	}
 });
 //#endregion
-export { j as FpButton, M as FpCap, ne as FpDevice, re as FpGelButton, N as FpHousing, H as FpIcon, J as FpKnob, Y as FpLcd, se as FpLcdLine, le as FpLed, fe as FpMeter, ve as FpReadout, ye as FpScrew, be as FpSilk, Se as FpSlider, Ce as FpWell, Te as FpWindow, R 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.2.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.2.0"
+    "@frontpanel/css": "^0.4.0"
   },
   "devDependencies": {
     "@tailwindcss/oxide": "^4.3.3",