@glimstone/vue 4.0.0 → 4.1.0

package/dist/index.js

@@ -1,14 +1,14 @@
 import { n as e, r as t, t as n } from "./TipWrap-rNAEgvb0.js";
-import { a as r, c as i, i as a, l as o, n as s, o as c, r as l, s as u, t as d, u as f } from "./glyphs-CvCRgBMU.js";
-import { Fragment as p, Teleport as m, computed as h, createBlock as g, createCommentVNode as _, createElementBlock as v, createElementVNode as y, createSlots as b, createTextVNode as x, createVNode as S, defineComponent as C, h as w, mergeModels as ee, mergeProps as T, normalizeClass as E, normalizeStyle as D, onBeforeUnmount as te, onMounted as ne, onScopeDispose as O, openBlock as k, ref as re, renderList as A, renderSlot as j, resolveDynamicComponent as M, shallowRef as N, toDisplayString as P, unref as F, useAttrs as ie, useId as ae, useModel as I, useSlots as oe, watch as L, withCtx as R, withKeys as se, withModifiers as z } from "vue";
-import { DEFAULT_MOTION as ce, DEFAULT_SHAPE as le, DESKTOP_QUERY as ue, GLIMSTONE_VERSION as de, MARKS as fe, TOAST_MARKS as pe, WIDE_QUERY as me, applyAccent as he, applyMotion as ge, applyRainbow as _e, applyShape as ve, attachNumberSteppers as ye, badgeClassName as be, buttonView as xe, countSelector as Se, focusedAsker as Ce, getLabelMode as B, hueVars as V, keepReadmeFit as we, labelModeChanged as Te, mailHref as Ee, mediaMatches as H, offersMail as De, openInBrowser as U, rainbowState as Oe, readmePartClass as ke, readmeSoon as Ae, readmeUnitClass as je, returnFocus as Me, roveSelector as Ne, rovedIndex as Pe, runUpdateCheck as Fe, segmentView as Ie, selectorAxis as Le, selectorFlex as Re, selectorTabId as ze, selectorTabId as Be, selectorView as Ve, setLabelMode as He, sidebarRowView as Ue, subscribeLabelMode as We, subscribeMedia as Ge, subscribeRainbow as Ke, syncNumberSteppers as qe, takePageHue as W, toggleSelection as Je, trapDialogKeys as Ye, updateFace as Xe, updateStage as Ze, versionLink as G, watchSelectorFit as Qe, watchSelectorRows as $e } from "@glimstone/core";
+import { a as r, c as i, d as a, f as o, i as s, l as c, m as l, n as u, o as d, p as f, r as p, s as m, t as h, u as g } from "./glyphs-Cgknt-k1.js";
+import { Fragment as _, Teleport as v, computed as y, createBlock as b, createCommentVNode as x, createElementBlock as S, createElementVNode as C, createSlots as w, createTextVNode as T, createVNode as E, defineComponent as D, h as ee, mergeModels as O, mergeProps as k, normalizeClass as A, normalizeStyle as j, onBeforeUnmount as te, onMounted as M, onScopeDispose as N, onUnmounted as ne, openBlock as P, ref as F, renderList as I, renderSlot as L, resolveDynamicComponent as R, shallowRef as z, toDisplayString as B, unref as V, useAttrs as re, useId as ie, useModel as H, useSlots as ae, vModelDynamic as oe, watch as U, withCtx as W, withDirectives as se, withKeys as ce, withModifiers as G } from "vue";
+import { COLOR_NAMES_DE as le, COLOR_PICKER_TEXT as ue, COPIED_MS as de, DEFAULT_MOTION as fe, DEFAULT_SHAPE as pe, DESKTOP_QUERY as me, GLIMSTONE_VERSION as he, MARKS as ge, TOAST_MARKS as _e, WIDE_QUERY as ve, applyAccent as ye, applyMotion as be, applyRainbow as xe, applyShape as Se, attachNumberSteppers as Ce, badgeClassName as we, buttonView as Te, claimMenu as Ee, closeMenuOutside as De, colorPicker as Oe, copyText as ke, countSelector as Ae, floatColorPicker as je, focusFirstMenuRow as Me, focusMenuRow as Ne, focusedAsker as Pe, getLabelMode as Fe, hueVars as Ie, isMenuHead as K, keepReadmeFit as Le, labelModeChanged as Re, mailHref as ze, mediaMatches as Be, menuIsOpen as Ve, menuMove as He, menuRowView as Ue, meterView as We, nearestColorName as Ge, normalizeHex as Ke, offersMail as qe, openInBrowser as Je, pillClassName as Ye, placeMenu as Xe, placeSubmenu as Ze, progressView as Qe, rainbowState as $e, readmePartClass as et, readmeSoon as tt, readmeUnitClass as nt, returnFocus as rt, roveSelector as it, rovedIndex as at, runUpdateCheck as ot, segmentView as st, selectorAxis as ct, selectorFlex as lt, selectorTabId as ut, selectorTabId as dt, selectorView as ft, setLabelMode as pt, sidebarRowView as mt, stackWindow as ht, subscribeLabelMode as gt, subscribeMedia as _t, subscribeRainbow as vt, syncNumberSteppers as yt, takePageHue as bt, tidyMenu as xt, toggleSelection as St, trapDialogKeys as Ct, updateFace as wt, updateStage as Tt, versionLink as q, watchSelectorFit as Et, watchSelectorRows as Dt, windowFocusTarget as Ot, windowFoot as kt } from "@glimstone/core";
 // src/IconTipButton.vue?vue&type=script&setup=true&lang.ts
-var et = [
+var At = [
 	"type",
 	"disabled",
 	"aria-label",
 	"aria-describedby"
-], tt = /* @__PURE__ */ C({
+], J = /* @__PURE__ */ D({
 	inheritAttrs: !1,
 	__name: "IconTipButton",
 	props: {
@@ -21,30 +21,30 @@ var et = [
 	},
 	setup(r) {
 		let i = r, a = t(() => i.tip, () => i.disabled);
-		return (t, i) => (k(), v(p, null, [S(F(n), {
+		return (t, i) => (P(), S(_, null, [E(V(n), {
 			on: r.disabled,
-			show: F(a).show,
-			hide: F(a).hide
+			show: V(a).show,
+			hide: V(a).hide
 		}, {
-			default: R(() => [y("button", T(t.$attrs, {
-				ref: (e) => F(a).trigger.value = e,
+			default: W(() => [C("button", k(t.$attrs, {
+				ref: (e) => V(a).trigger.value = e,
 				type: r.type,
 				disabled: r.disabled,
 				"aria-label": r.tip,
-				"aria-describedby": F(a).describedBy.value,
-				onMouseenter: i[0] ||= (...e) => F(a).show && F(a).show(...e),
-				onMouseleave: i[1] ||= (...e) => F(a).hide && F(a).hide(...e),
-				onFocus: i[2] ||= (...e) => F(a).showOnFocus && F(a).showOnFocus(...e),
-				onBlur: i[3] ||= (...e) => F(a).hide && F(a).hide(...e)
-			}), [j(t.$slots, "default")], 16, et)]),
+				"aria-describedby": V(a).describedBy.value,
+				onMouseenter: i[0] ||= (...e) => V(a).show && V(a).show(...e),
+				onMouseleave: i[1] ||= (...e) => V(a).hide && V(a).hide(...e),
+				onFocus: i[2] ||= (...e) => V(a).showOnFocus && V(a).showOnFocus(...e),
+				onBlur: i[3] ||= (...e) => V(a).hide && V(a).hide(...e)
+			}), [L(t.$slots, "default")], 16, At)]),
 			_: 3
 		}, 8, [
 			"on",
 			"show",
 			"hide"
-		]), S(e, { state: F(a) }, null, 8, ["state"])], 64));
+		]), E(e, { state: V(a) }, null, 8, ["state"])], 64));
 	}
-}), nt = ["disabled"], K = /* @__PURE__ */ C({
+}), jt = ["disabled"], Y = /* @__PURE__ */ D({
 	__name: "Badge",
 	props: {
 		tone: { default: "neutral" },
@@ -68,10 +68,10 @@ var et = [
 		}
 	},
 	setup(e) {
-		let t = e, n = h(() => t.hueIndex !== void 0 && (t.tone === "heading" || t.tone === "active")), r = h(() => [
+		let t = e, n = y(() => t.hueIndex !== void 0 && (t.tone === "heading" || t.tone === "active")), r = y(() => [
 			n.value && "glim-hue",
 			n.value && t.size === "heading" && "glim-notch-hue",
-			be({
+			we({
 				tone: t.tone,
 				size: t.size,
 				shape: t.shape,
@@ -81,112 +81,112 @@ var et = [
 				insetStart: t.insetStart,
 				action: t.as !== "span"
 			})
-		].filter(Boolean)), i = h(() => n.value ? V(t.hueIndex) : void 0);
-		return (t, n) => e.as === "button" && e.tip !== void 0 ? (k(), g(tt, {
+		].filter(Boolean)), i = y(() => n.value ? Ie(t.hueIndex) : void 0);
+		return (t, n) => e.as === "button" && e.tip !== void 0 ? (P(), b(J, {
 			key: 0,
 			tip: e.tip,
 			disabled: e.disabled,
-			class: E(r.value),
-			style: D(i.value)
+			class: A(r.value),
+			style: j(i.value)
 		}, {
-			default: R(() => [j(t.$slots, "default")]),
+			default: W(() => [L(t.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"tip",
 			"disabled",
 			"class",
 			"style"
-		])) : e.as === "button" ? (k(), v("button", {
+		])) : e.as === "button" ? (P(), S("button", {
 			key: 1,
 			type: "button",
 			disabled: e.disabled,
-			class: E(r.value),
-			style: D(i.value)
-		}, [j(t.$slots, "default")], 14, nt)) : e.as === "a" ? (k(), v("a", {
+			class: A(r.value),
+			style: j(i.value)
+		}, [L(t.$slots, "default")], 14, jt)) : e.as === "a" ? (P(), S("a", {
 			key: 2,
-			class: E(r.value),
-			style: D(i.value)
-		}, [j(t.$slots, "default")], 6)) : (k(), v("span", {
+			class: A(r.value),
+			style: j(i.value)
+		}, [L(t.$slots, "default")], 6)) : (P(), S("span", {
 			key: 3,
-			class: E(r.value),
-			style: D(i.value)
-		}, [j(t.$slots, "default")], 6));
+			class: A(r.value),
+			style: j(i.value)
+		}, [L(t.$slots, "default")], 6));
 	}
-}), rt = ["innerHTML"], it = /* @__PURE__ */ C({
+}), Mt = ["innerHTML"], Nt = /* @__PURE__ */ D({
 	__name: "BrandMark",
 	props: { svg: {} },
 	setup(e) {
-		return (t, n) => (k(), v("span", {
+		return (t, n) => (P(), S("span", {
 			class: "glim-brand-svg",
 			"aria-hidden": "true",
 			innerHTML: e.svg
-		}, null, 8, rt));
+		}, null, 8, Mt));
 	}
 });
 // src/engines.ts
-function q(e) {
-	let t = N(B(e));
-	return O(We(() => t.value = B(e))), h({
+function X(e) {
+	let t = z(Fe(e));
+	return N(gt(() => t.value = Fe(e))), y({
 		get: () => t.value,
 		set: (t) => {
-			He(e, t), Te();
+			pt(e, t), Re();
 		}
 	});
 }
-function at() {
-	let e = N(Oe());
-	return O(Ke(() => e.value = Oe())), h({
+function Pt() {
+	let e = z($e());
+	return N(vt(() => e.value = $e())), y({
 		get: () => e.value,
-		set: (e) => _e(e)
+		set: (e) => xe(e)
 	});
 }
-function ot(e) {
-	return h(() => {
+function Ft(e) {
+	return y(() => {
 		let t = e();
-		return t === void 0 ? void 0 : V(t);
+		return t === void 0 ? void 0 : Ie(t);
 	});
 }
-function J(e, t) {
-	let n = N(t()), r = new MutationObserver(() => n.value = t());
+function It(e, t) {
+	let n = z(t()), r = new MutationObserver(() => n.value = t());
 	return r.observe(document.documentElement, {
 		attributes: !0,
 		attributeFilter: [e]
-	}), O(() => r.disconnect()), n;
+	}), N(() => r.disconnect()), n;
 }
-function st() {
-	let e = J("data-shape", () => document.documentElement.getAttribute("data-shape") ?? le);
-	return h({
+function Lt() {
+	let e = It("data-shape", () => document.documentElement.getAttribute("data-shape") ?? pe);
+	return y({
 		get: () => e.value,
-		set: ve
+		set: Se
 	});
 }
-function ct() {
-	let e = J("data-motion", () => document.documentElement.getAttribute("data-motion") ?? ce);
-	return h({
+function Rt() {
+	let e = It("data-motion", () => document.documentElement.getAttribute("data-motion") ?? fe);
+	return y({
 		get: () => e.value,
-		set: ge
+		set: be
 	});
 }
-function lt() {
-	let e = J("style", () => document.documentElement.style.getPropertyValue("--accent"));
-	return h({
+function zt() {
+	let e = It("style", () => document.documentElement.style.getPropertyValue("--accent"));
+	return y({
 		get: () => e.value,
-		set: (e) => he(e || void 0)
+		set: (e) => ye(e || void 0)
 	});
 }
 // src/Button.vue?vue&type=script&setup=true&lang.ts
-var ut = [
+var Bt = [
 	"type",
 	"disabled",
 	"aria-busy",
 	"aria-describedby"
-], dt = {
+], Vt = {
 	key: 0,
 	class: "glim-btn-glyph"
-}, ft = {
+}, Ht = {
 	key: 0,
 	class: "glim-spinner"
-}, Y = /* @__PURE__ */ C({
+}, Z = /* @__PURE__ */ D({
 	inheritAttrs: !1,
 	__name: "Button",
 	props: {
@@ -213,10 +213,10 @@ var ut = [
 		}
 	},
 	setup(r, { expose: i }) {
-		let a = r, s = q("buttons"), c = h(() => a.glyph ?? (a.labelKey ? o(a.labelKey) : void 0) ?? (a.variant === "chip" ? l : void 0)), u = h(() => xe({
-			mode: s.value,
+		let a = r, o = X("buttons"), s = y(() => a.glyph ?? (a.labelKey ? f(a.labelKey) : void 0) ?? (a.variant === "chip" ? p : void 0)), c = y(() => Te({
+			mode: o.value,
 			label: a.label,
-			hasGlyph: !!c.value || a.busy,
+			hasGlyph: !!s.value || a.busy,
 			tone: a.tone,
 			variant: a.variant,
 			disabled: a.disabled,
@@ -224,42 +224,42 @@ var ut = [
 			title: a.title,
 			hueIndex: a.hueIndex,
 			stage: a.stage
-		})), d = t(() => u.value.tip, () => a.disabled), f = N(null);
-		function m(e) {
-			f.value = e, d.trigger.value = f.value;
+		})), l = t(() => c.value.tip, () => a.disabled), u = z(null);
+		function d(e) {
+			u.value = e, l.trigger.value = u.value;
 		}
-		function b(e) {
-			u.value.pageHue && W(e.currentTarget), d.show();
+		function m(e) {
+			c.value.pageHue && bt(e.currentTarget), l.show();
 		}
-		function x(e) {
-			u.value.pageHue && W(e.currentTarget), d.showOnFocus();
+		function h(e) {
+			c.value.pageHue && bt(e.currentTarget), l.showOnFocus();
 		}
-		return i({ el: f }), (t, i) => (k(), v(p, null, [S(F(n), {
-			on: r.disabled && !!u.value.tip,
-			show: F(d).show,
-			hide: F(d).hide
+		return i({ el: u }), (t, i) => (P(), S(_, null, [E(V(n), {
+			on: r.disabled && !!c.value.tip,
+			show: V(l).show,
+			hide: V(l).hide
 		}, {
-			default: R(() => [y("button", T(t.$attrs, {
-				ref: m,
+			default: W(() => [C("button", k(t.$attrs, {
+				ref: d,
 				type: r.type,
 				disabled: r.disabled,
 				"aria-busy": r.busy || void 0,
-				"aria-describedby": F(d).describedBy.value,
-				style: u.value.style,
-				class: u.value.className,
-				onMouseenter: b,
-				onMouseleave: i[0] ||= (...e) => F(d).hide && F(d).hide(...e),
-				onFocus: x,
-				onBlur: i[1] ||= (...e) => F(d).hide && F(d).hide(...e)
-			}), [u.value.showGlyph ? (k(), v("span", dt, [r.busy ? (k(), v("span", ft)) : (k(), g(M(c.value), { key: 1 }))])) : _("", !0), y("span", { class: E(u.value.labelClass) }, P(r.label), 3)], 16, ut)]),
+				"aria-describedby": V(l).describedBy.value,
+				style: c.value.style,
+				class: c.value.className,
+				onMouseenter: m,
+				onMouseleave: i[0] ||= (...e) => V(l).hide && V(l).hide(...e),
+				onFocus: h,
+				onBlur: i[1] ||= (...e) => V(l).hide && V(l).hide(...e)
+			}), [c.value.showGlyph ? (P(), S("span", Vt, [r.busy ? (P(), S("span", Ht)) : (P(), b(R(s.value), { key: 1 }))])) : x("", !0), C("span", { class: A(c.value.labelClass) }, B(r.label), 3)], 16, Bt)]),
 			_: 1
 		}, 8, [
 			"on",
 			"show",
 			"hide"
-		]), S(e, { state: F(d) }, null, 8, ["state"])], 64));
+		]), E(e, { state: V(l) }, null, 8, ["state"])], 64));
 	}
-}), pt = ["aria-label", "aria-describedby"], X = /* @__PURE__ */ C({
+}), Ut = ["aria-label", "aria-describedby"], Q = /* @__PURE__ */ D({
 	__name: "InfoBubble",
 	props: {
 		tip: {},
@@ -270,49 +270,49 @@ var ut = [
 	},
 	setup(n) {
 		let r = n, i = t(() => r.tip);
-		return (t, r) => (k(), v(p, null, [y("span", {
-			ref: (e) => F(i).trigger.value = e,
+		return (t, r) => (P(), S(_, null, [C("span", {
+			ref: (e) => V(i).trigger.value = e,
 			"aria-label": n.tip,
-			"aria-describedby": F(i).describedBy.value,
+			"aria-describedby": V(i).describedBy.value,
 			tabindex: "0",
-			class: E(n.onAccent ? "glim-info-icon glim-info-icon--on-accent" : "glim-info-icon"),
-			onMouseenter: r[0] ||= (...e) => F(i).show && F(i).show(...e),
-			onMouseleave: r[1] ||= (...e) => F(i).hide && F(i).hide(...e),
-			onFocus: r[2] ||= (...e) => F(i).showOnFocus && F(i).showOnFocus(...e),
-			onBlur: r[3] ||= (...e) => F(i).hide && F(i).hide(...e),
-			onClick: r[4] ||= z(() => {}, ["prevent"])
-		}, [...r[5] ||= [y("svg", {
+			class: A(n.onAccent ? "glim-info-icon glim-info-icon--on-accent" : "glim-info-icon"),
+			onMouseenter: r[0] ||= (...e) => V(i).show && V(i).show(...e),
+			onMouseleave: r[1] ||= (...e) => V(i).hide && V(i).hide(...e),
+			onFocus: r[2] ||= (...e) => V(i).showOnFocus && V(i).showOnFocus(...e),
+			onBlur: r[3] ||= (...e) => V(i).hide && V(i).hide(...e),
+			onClick: r[4] ||= G(() => {}, ["prevent"])
+		}, [...r[5] ||= [C("svg", {
 			viewBox: "0 0 16 16",
 			width: "15",
 			height: "15",
 			fill: "none",
 			"aria-hidden": "true"
 		}, [
-			y("circle", {
+			C("circle", {
 				cx: "8",
 				cy: "8",
 				r: "7",
 				stroke: "currentColor",
 				"stroke-width": "1.3"
 			}),
-			y("circle", {
+			C("circle", {
 				cx: "8",
 				cy: "4.6",
 				r: "0.9",
 				fill: "currentColor"
 			}),
-			y("path", {
+			C("path", {
 				d: "M8 7v4.4",
 				stroke: "currentColor",
 				"stroke-width": "1.3",
 				"stroke-linecap": "round"
 			})
-		], -1)]], 42, pt), S(e, { state: F(i) }, null, 8, ["state"])], 64));
+		], -1)]], 42, Ut), E(e, { state: V(i) }, null, 8, ["state"])], 64));
 	}
-}), mt = {
+}), Wt = {
 	key: 0,
 	class: "glim-panel-heading"
-}, Z = /* @__PURE__ */ C({
+}, Gt = /* @__PURE__ */ D({
 	__name: "Card",
 	props: {
 		title: {},
@@ -321,9 +321,9 @@ var ut = [
 		nested: { type: Boolean }
 	},
 	setup(e) {
-		let t = e, n = h(() => t.hueIndex === void 0 ? void 0 : V(t.hueIndex));
-		return (t, r) => (k(), v("div", {
-			class: E([
+		let t = e, n = y(() => t.hueIndex === void 0 ? void 0 : Ie(t.hueIndex));
+		return (t, r) => (P(), S("div", {
+			class: A([
 				"glim-panel",
 				"glim-notch-card",
 				{
@@ -331,31 +331,158 @@ var ut = [
 					"glim-hue": e.hueIndex !== void 0
 				}
 			]),
-			style: D(n.value)
-		}, [e.title || e.hint ? (k(), v("h2", mt, [S(K, {
+			style: j(n.value)
+		}, [e.title || e.hint ? (P(), S("h2", Wt, [E(Y, {
 			tone: "heading",
 			size: "heading",
 			wrap: "",
 			"hue-index": e.hueIndex
 		}, {
-			default: R(() => [x(P(e.title) + " ", 1), e.hint ? (k(), g(X, {
+			default: W(() => [T(B(e.title) + " ", 1), e.hint ? (P(), b(Q, {
 				key: 0,
 				tip: e.hint,
 				"on-accent": ""
-			}, null, 8, ["tip"])) : _("", !0)]),
+			}, null, 8, ["tip"])) : x("", !0)]),
 			_: 1
-		}, 8, ["hue-index"])])) : _("", !0), j(t.$slots, "default")], 6));
+		}, 8, ["hue-index"])])) : x("", !0), L(t.$slots, "default")], 6));
+	}
+}), Kt = [
+	"aria-checked",
+	"aria-label",
+	"disabled"
+], qt = {
+	class: "glim-checkbox-box",
+	"aria-hidden": "true"
+}, Jt = { key: 0 }, Yt = /* @__PURE__ */ D({
+	__name: "Checkbox",
+	props: /*@__PURE__*/ O({
+		label: {},
+		hideLabel: {
+			type: Boolean,
+			default: !1
+		},
+		slim: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: {
+			type: Boolean,
+			required: !0
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let t = e, n = y(() => t.hideLabel || t.slim), r = H(e, "modelValue");
+		return (t, i) => (P(), S("button", {
+			type: "button",
+			role: "checkbox",
+			"aria-checked": r.value,
+			"aria-label": n.value ? e.label : void 0,
+			disabled: e.disabled,
+			class: A(["glim-checkbox", { "glim-checkbox--slim": e.slim }]),
+			onClick: i[0] ||= (e) => r.value = !r.value
+		}, [C("span", qt, [E(V(u))]), n.value ? x("", !0) : (P(), S("span", Jt, B(e.label), 1))], 10, Kt));
 	}
-}), ht = { class: "glim-modal-head" }, gt = {
+}), Xt = { class: "glim-picker-foot" }, Zt = {
+	key: 0,
+	class: "glim-picker-name"
+}, Qt = ["value", "aria-label"], $t = { class: "glim-picker-actions" }, en = /* @__PURE__ */ D({
+	__name: "ColorPicker",
+	props: /*@__PURE__*/ O({
+		anchor: { default: null },
+		names: {
+			type: [Array, Boolean],
+			default: () => le
+		},
+		text: {}
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ O([
+		"apply",
+		"input",
+		"close"
+	], ["update:modelValue"]),
+	setup(e, { emit: t }) {
+		let n = e, r = H(e, "modelValue"), i = t, a = {
+			...ue,
+			...n.text
+		}, o = z(null), s = z(null), c = F(Ke(r.value) ?? "#000000"), l = F(c.value), d = y(() => n.names === !1 ? null : Ge(c.value, n.names)), f = Oe(c.value, (e) => {
+			c.value = e, l.value = e, i("input", e);
+		}, { text: a }), p;
+		M(() => {
+			s.value.appendChild(f.el), n.anchor && o.value && (p = je(o.value, n.anchor, () => i("close")), f.focus());
+		}), te(() => p?.()), U(r, (e) => {
+			let t = Ke(e);
+			t && (c.value = t, l.value = t, f.setValue(t));
+		});
+		function m(e) {
+			l.value = e.target.value;
+			let t = Ke(l.value);
+			t && (c.value = t, f.setValue(t), i("input", t));
+		}
+		function h() {
+			r.value = c.value, i("apply", c.value, d.value), n.anchor && (n.anchor.focus(), i("close"));
+		}
+		function g(e) {
+			e.key === "Enter" && !(e.target instanceof HTMLButtonElement) && (e.preventDefault(), h());
+		}
+		return (t, n) => (P(), b(v, {
+			to: "body",
+			disabled: !e.anchor
+		}, [C("div", {
+			ref_key: "panel",
+			ref: o,
+			class: A(["glim-picker-panel", e.anchor && "glim-picker-panel--float"]),
+			style: j({ "--glim-picker-colour": c.value }),
+			onKeydown: g
+		}, [
+			C("div", {
+				ref_key: "host",
+				ref: s,
+				style: { display: "contents" }
+			}, null, 512),
+			C("div", Xt, [
+				n[0] ||= C("span", {
+					class: "glim-picker-swatch",
+					"aria-hidden": "true"
+				}, null, -1),
+				d.value === null ? x("", !0) : (P(), S("span", Zt, B(d.value), 1)),
+				C("input", {
+					class: "glim-picker-hex",
+					value: l.value,
+					maxlength: "7",
+					spellcheck: "false",
+					"aria-label": a.hex,
+					onInput: m
+				}, null, 40, Qt)
+			]),
+			C("div", $t, [E(Z, {
+				label: a.apply,
+				"label-key": "apply",
+				glyph: V(u),
+				tone: "accent",
+				onClick: h
+			}, null, 8, ["label", "glyph"])])
+		], 38)], 8, ["disabled"]));
+	}
+}), tn = { class: "glim-modal-head" }, nn = {
 	id: "confirmdialog-title",
 	class: "glim-modal-title"
-}, _t = { class: "glim-modal-body" }, vt = {
+}, rn = { class: "glim-modal-body" }, an = {
 	id: "confirmdialog-message",
 	class: "glim-modal-text"
-}, yt = {
+}, on = {
 	key: 0,
 	class: "glim-modal-extra"
-}, bt = { class: "glim-modal-foot" }, xt = /* @__PURE__ */ C({
+}, sn = { class: "glim-modal-foot" }, cn = /* @__PURE__ */ D({
 	__name: "ConfirmDialog",
 	props: {
 		title: {},
@@ -368,11 +495,11 @@ var ut = [
 	},
 	emits: ["confirm", "cancel"],
 	setup(e, { expose: t, emit: n }) {
-		let r = n, i = N(null), a = N(null);
-		return ne(() => a.value?.el?.focus()), t({ card: i }), (t, n) => (k(), v("div", {
+		let r = n, i = z(null), a = z(null);
+		return M(() => a.value?.el?.focus()), t({ card: i }), (t, n) => (P(), S("div", {
 			class: "glim-modal-backdrop",
-			onClick: n[3] ||= z((e) => r("cancel"), ["self"])
-		}, [y("div", {
+			onClick: n[3] ||= G((e) => r("cancel"), ["self"])
+		}, [C("div", {
 			ref_key: "card",
 			ref: i,
 			role: "dialog",
@@ -381,30 +508,30 @@ var ut = [
 			"aria-describedby": "confirmdialog-message",
 			class: "glim-modal-card"
 		}, [
-			y("div", ht, [y("h2", gt, [S(K, {
+			C("div", tn, [C("h2", nn, [E(Y, {
 				tone: "heading",
 				size: "heading",
 				wrap: ""
 			}, {
-				default: R(() => [x(P(e.title), 1)]),
+				default: W(() => [T(B(e.title), 1)]),
 				_: 1
-			})]), e.closeLabel === void 0 ? _("", !0) : (k(), g(Y, {
+			})]), e.closeLabel === void 0 ? x("", !0) : (P(), b(Z, {
 				key: 0,
 				label: e.closeLabel,
 				"label-key": "common.close",
-				glyph: F(l),
+				glyph: V(p),
 				class: "glim-modal-close",
 				onClick: n[0] ||= (e) => r("cancel")
 			}, null, 8, ["label", "glyph"]))]),
-			y("div", _t, [y("p", vt, P(e.message), 1), t.$slots.extra ? (k(), v("div", yt, [j(t.$slots, "extra")])) : _("", !0)]),
-			y("div", bt, [S(Y, {
+			C("div", rn, [C("p", an, B(e.message), 1), t.$slots.extra ? (P(), S("div", on, [L(t.$slots, "extra")])) : x("", !0)]),
+			C("div", sn, [E(Z, {
 				ref_key: "cancel",
 				ref: a,
 				label: e.cancelLabel,
 				"label-key": "common.cancel",
-				glyph: F(d),
+				glyph: V(h),
 				onClick: n[1] ||= (e) => r("cancel")
-			}, null, 8, ["label", "glyph"]), S(Y, {
+			}, null, 8, ["label", "glyph"]), E(Z, {
 				label: e.confirmLabel,
 				"label-key": e.confirmLabelKey ?? null,
 				glyph: e.confirmGlyph,
@@ -416,14 +543,284 @@ var ut = [
 			])])
 		], 512)]));
 	}
-}), St = {
+}), ln = { class: "glim-kbd" }, un = /* @__PURE__ */ D({
+	__name: "Kbd",
+	setup(e) {
+		return (e, t) => (P(), S("kbd", ln, [L(e.$slots, "default")]));
+	}
+}), dn = {
+	key: 0,
+	class: "glim-menu-sep",
+	role: "separator"
+}, fn = {
+	key: 1,
+	class: "glim-menu-head",
+	role: "presentation"
+}, pn = [
+	"role",
+	"aria-checked",
+	"aria-haspopup",
+	"aria-expanded",
+	"disabled",
+	"data-row",
+	"onClick"
+], mn = {
+	key: 0,
+	class: "glim-checkbox-box",
+	"aria-hidden": "true"
+}, hn = {
+	key: 2,
+	class: "glim-menu-glyph",
+	"aria-hidden": "true"
+}, gn = { class: "glim-menu-label" }, _n = {
+	key: 3,
+	class: "glim-menu-end glim-menu-caret",
+	"aria-hidden": "true"
+}, vn = {
+	key: 4,
+	class: "glim-menu-end glim-menu-tick",
+	"aria-hidden": "true"
+}, yn = {
+	key: 6,
+	class: "glim-menu-end glim-menu-count glim-num"
+}, bn = /* @__PURE__ */ D({
+	__name: "MenuRows",
+	props: {
+		entries: {},
+		openAt: {}
+	},
+	emits: ["pick"],
+	setup(e, { emit: t }) {
+		let n = e, a = t, o = y(() => n.entries.map((e) => e === "-" ? { kind: "sep" } : K(e) ? {
+			kind: "head",
+			head: e
+		} : {
+			kind: "item",
+			item: e,
+			view: Ue(e)
+		}));
+		return (t, n) => (P(!0), S(_, null, I(o.value, (t, n) => (P(), S(_, { key: n }, [t.kind === "sep" ? (P(), S("div", dn)) : t.kind === "head" ? (P(), S("div", fn, [C("span", null, B(t.head.head), 1), t.head.edit ? (P(), b(J, {
+			key: 0,
+			tip: t.head.edit.tip,
+			role: "menuitem",
+			tabindex: "-1",
+			class: "glim-menu-head-edit",
+			"data-row": n,
+			onClick: (e) => a("pick", n)
+		}, {
+			default: W(() => [(P(), b(R(t.head.edit.glyph ?? V(i))))]),
+			_: 2
+		}, 1032, [
+			"tip",
+			"data-row",
+			"onClick"
+		])) : x("", !0)])) : (P(), S("button", {
+			key: 2,
+			type: "button",
+			role: t.view.role,
+			tabindex: "-1",
+			"aria-checked": t.view.role === "menuitem" ? void 0 : t.item.checked,
+			"aria-haspopup": t.item.sub ? "menu" : void 0,
+			"aria-expanded": t.item.sub ? e.openAt === n : void 0,
+			disabled: t.item.disabled,
+			class: A(["glim-menu-item", { "glim-menu-item--current": t.view.current }]),
+			"data-row": n,
+			onClick: (e) => a("pick", n)
+		}, [
+			t.view.lead === "box" ? (P(), S("span", mn, [E(V(u))])) : t.view.lead === "dot" ? (P(), S("span", {
+				key: 1,
+				class: "glim-menu-dot",
+				style: j({ backgroundColor: t.item.color }),
+				"aria-hidden": "true"
+			}, null, 4)) : (P(), S("span", hn, [t.view.lead === "glyph" ? (P(), b(R(t.item.glyph), { key: 0 })) : x("", !0)])),
+			C("span", gn, B(t.item.label), 1),
+			t.view.end === "submenu" ? (P(), S("span", _n, [E(V(r))])) : t.view.end === "tick" ? (P(), S("span", vn, [E(V(u))])) : t.view.end === "shortcut" ? (P(), b(un, {
+				key: 5,
+				class: "glim-menu-end"
+			}, {
+				default: W(() => [T(B(t.item.shortcut), 1)]),
+				_: 2
+			}, 1024)) : t.view.end === "count" ? (P(), S("span", yn, B(t.item.count), 1)) : x("", !0)
+		], 10, pn))], 64))), 128));
+	}
+}), xn = ["aria-label"], Sn = ["aria-label"], Cn = /* @__PURE__ */ D({
+	__name: "ContextMenu",
+	props: {
+		x: {},
+		y: {},
+		items: {},
+		above: {
+			type: Boolean,
+			default: !1
+		},
+		label: { default: void 0 },
+		opener: { default: null }
+	},
+	emits: ["close", "step"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = z(null), a = z(null), o = Pe(), s = F({
+			left: n.x,
+			top: n.y
+		}), c = z(null), l = F(null), u = y(() => xt(n.items)), d = y(() => {
+			let e = c.value ? u.value[c.value.at] : void 0;
+			return e && e !== "-" && !K(e) && e.sub ? e : null;
+		}), f = y(() => d.value?.sub ? xt(d.value.sub) : null), p = () => ({
+			width: innerWidth,
+			height: innerHeight
+		});
+		function m(e) {
+			r("close"), e && rt(n.opener ?? o);
+		}
+		function h() {
+			let e = i.value;
+			e && (s.value = Xe(n.x, n.y, {
+				width: e.offsetWidth,
+				height: e.offsetHeight
+			}, p(), n.above));
+		}
+		U(() => [
+			n.x,
+			n.y,
+			n.above
+		], h, { flush: "post" });
+		let g, _;
+		M(() => {
+			h(), g = Ee(m), _ = De(() => [
+				i.value,
+				a.value,
+				n.opener
+			], () => m(!1)), i.value && Me(i.value);
+		}), ne(() => {
+			g?.(), _?.();
+		}), U(c, (e) => {
+			l.value = null;
+			let t = e && i.value?.querySelector(`[data-row="${e.at}"]`), n = a.value;
+			if (!e || !t || !n) return;
+			let r = getComputedStyle(i.value).direction === "rtl";
+			l.value = Ze(t.getBoundingClientRect(), {
+				width: n.offsetWidth,
+				height: n.offsetHeight
+			}, p(), r), e.focus && Me(n);
+		}, { flush: "post" });
+		function w(e, t) {
+			let n = e[t];
+			n !== "-" && (K(n) ? (m(!0), n.edit?.onSelect()) : n.sub && e === u.value ? c.value = {
+				at: t,
+				focus: !0
+			} : (Ue(n).staysOpen || m(!0), n.onSelect?.()));
+		}
+		function T(e, t) {
+			if (e.key === "Tab") return m(!1);
+			let n = e.currentTarget, a = He(e.key, getComputedStyle(n).direction === "rtl");
+			if (!a) return;
+			if (e.preventDefault(), a !== "in" && a !== "out") return Ne(n, a);
+			if (t) {
+				a === "out" && c.value && (i.value?.querySelector(`[data-row="${c.value.at}"]`)?.focus(), c.value = null);
+				return;
+			}
+			let o = Number(document.activeElement?.dataset.row), s = u.value[o];
+			a === "in" && s && s !== "-" && !K(s) && s.sub && !s.disabled ? c.value = {
+				at: o,
+				focus: !0
+			} : r("step", a === "in" ? 1 : -1);
+		}
+		function D(e) {
+			let t = e.target.closest("[data-row]");
+			if (!t) return;
+			let n = Number(t.dataset.row), r = u.value[n], i = r !== "-" && !K(r) && !!r.sub && !r.disabled;
+			i && c.value?.at !== n ? c.value = {
+				at: n,
+				focus: !1
+			} : !i && c.value && (c.value = null);
+		}
+		return (t, n) => (P(), b(v, { to: "body" }, [C("div", {
+			ref_key: "menu",
+			ref: i,
+			role: "menu",
+			"aria-label": e.label,
+			class: "glim-menu",
+			style: j({
+				left: `${s.value.left}px`,
+				top: `${s.value.top}px`
+			}),
+			onKeydown: n[1] ||= (e) => T(e, !1),
+			onMouseover: D,
+			onContextmenu: n[2] ||= G(() => {}, ["prevent"])
+		}, [E(bn, {
+			entries: u.value,
+			"open-at": c.value?.at,
+			onPick: n[0] ||= (e) => w(u.value, e)
+		}, null, 8, ["entries", "open-at"])], 44, xn), f.value ? (P(), S("div", {
+			key: 0,
+			ref_key: "subMenu",
+			ref: a,
+			role: "menu",
+			"aria-label": d.value?.label,
+			class: "glim-menu",
+			style: j({
+				left: `${l.value?.left ?? 0}px`,
+				top: `${l.value?.top ?? 0}px`
+			}),
+			onKeydown: n[4] ||= (e) => T(e, !0),
+			onContextmenu: n[5] ||= G(() => {}, ["prevent"])
+		}, [E(bn, {
+			entries: f.value,
+			onPick: n[3] ||= (e) => w(f.value, e)
+		}, null, 8, ["entries"])], 44, Sn)) : x("", !0)]));
+	}
+}), wn = { class: "glim-copy" }, Tn = ["value", "aria-label"], En = {
+	role: "status",
+	class: "glim-sr-only"
+}, Dn = /* @__PURE__ */ D({
+	__name: "CopyField",
+	props: {
+		value: {},
+		label: {},
+		text: { default: () => ({
+			copy: "Copy",
+			copied: "Copied"
+		}) }
+	},
+	emits: ["copy"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = F(!1), a = z(null), o;
+		te(() => clearTimeout(o));
+		async function c() {
+			let e = await ke(n.value);
+			r("copy", e), e ? (i.value = !0, clearTimeout(o), o = window.setTimeout(() => i.value = !1, de)) : (a.value?.focus(), a.value?.select());
+		}
+		return (t, n) => (P(), S("span", wn, [
+			C("input", {
+				ref_key: "field",
+				ref: a,
+				readonly: "",
+				value: e.value,
+				"aria-label": e.label,
+				spellcheck: "false",
+				class: "glim-input glim-input--mono"
+			}, null, 8, Tn),
+			E(Z, {
+				label: i.value ? e.text.copied : e.text.copy,
+				"label-key": i.value ? "copied" : "copy",
+				glyph: i.value ? V(u) : V(s),
+				variant: "icon",
+				onClick: c
+			}, null, 8, [
+				"label",
+				"label-key",
+				"glyph"
+			]),
+			C("span", En, B(i.value ? e.text.copied : ""), 1)
+		]));
+	}
+}), On = {
 	key: 0,
 	class: "glim-empty-glyph",
 	"aria-hidden": "true"
-}, Ct = { class: "glim-empty-title" }, wt = {
+}, kn = { class: "glim-empty-title" }, An = {
 	key: 1,
 	class: "glim-empty-hint"
-}, Tt = /* @__PURE__ */ C({
+}, jn = /* @__PURE__ */ D({
 	__name: "EmptyState",
 	props: {
 		glyph: {},
@@ -435,28 +832,28 @@ var ut = [
 		}
 	},
 	setup(e) {
-		return (t, n) => (k(), v("div", { class: E(e.nested ? "glim-empty" : "glim-card glim-empty") }, [
-			e.glyph ? (k(), v("span", St, [(k(), g(M(e.glyph)))])) : _("", !0),
-			y("p", Ct, P(e.title), 1),
-			e.hint ? (k(), v("p", wt, P(e.hint), 1)) : _("", !0),
-			j(t.$slots, "default")
+		return (t, n) => (P(), S("div", { class: A(e.nested ? "glim-empty" : "glim-card glim-empty") }, [
+			e.glyph ? (P(), S("span", On, [(P(), b(R(e.glyph)))])) : x("", !0),
+			C("p", kn, B(e.title), 1),
+			e.hint ? (P(), S("p", An, B(e.hint), 1)) : x("", !0),
+			L(t.$slots, "default")
 		], 2));
 	}
-}), Et = {
+}), Mn = {
 	key: 0,
 	class: "glim-readme-btn-art",
 	"aria-hidden": "true"
-}, Dt = { class: "glim-readme-btn-text" }, Ot = { class: "glim-readme-btn-name" }, kt = {
+}, Nn = { class: "glim-readme-btn-text" }, Pn = { class: "glim-readme-btn-name" }, Fn = {
 	key: 0,
 	class: "glim-readme-btn-sub"
-}, At = {
+}, In = {
 	key: 0,
 	class: "glim-readme-btn-sheen",
 	"aria-hidden": "true"
-}, jt = {
+}, Ln = {
 	key: 1,
 	class: "glim-readme-btn-hint"
-}, Q = /* @__PURE__ */ C({
+}, $ = /* @__PURE__ */ D({
 	__name: "ReadmeButton",
 	props: {
 		brand: {},
@@ -471,10 +868,10 @@ var ut = [
 	},
 	emits: ["linkClick"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = h(() => Ae(n.parts)), a = N(null), o = h(() => n.parts.map((e) => `${e.name}\n${e.sub ?? ""}`).join("\n") + (i.value ? n.soonLabel : "")), s;
-		L([a, o], () => {
-			s?.(), s = a.value ? we(a.value) : void 0;
-		}, { flush: "post" }), O(() => s?.());
+		let n = e, r = t, i = y(() => tt(n.parts)), a = z(null), o = y(() => n.parts.map((e) => `${e.name}\n${e.sub ?? ""}`).join("\n") + (i.value ? n.soonLabel : "")), s;
+		U([a, o], () => {
+			s?.(), s = a.value ? Le(a.value) : void 0;
+		}, { flush: "post" }), N(() => s?.());
 		let c = (e) => i.value ? n.soonLabel : e.sub, l = (e) => c(e) ? `${e.name} ${c(e)}` : e.name, u = (e) => i.value ? "span" : e.href ? "a" : "button", d = (e) => i.value ? { "aria-disabled": !0 } : e.href ? {
 			href: e.href,
 			target: "_blank",
@@ -484,27 +881,27 @@ var ut = [
 			type: "button",
 			onClick: e.onClick
 		};
-		return (t, n) => (k(), v("div", {
+		return (t, n) => (P(), S("div", {
 			ref_key: "root",
 			ref: a,
-			class: E(F(je)(e.brand, e.parts.length, e.note, i.value))
+			class: A(V(nt)(e.brand, e.parts.length, e.note, i.value))
 		}, [
-			(k(!0), v(p, null, A(e.parts, (n, r) => (k(), g(M(u(n)), T({ key: r }, { ref_for: !0 }, d(n), {
+			(P(!0), S(_, null, I(e.parts, (n, r) => (P(), b(R(u(n)), k({ key: r }, { ref_for: !0 }, d(n), {
 				"aria-label": l(n),
-				class: F(ke)(r, i.value)
+				class: V(et)(r, i.value)
 			}), {
-				default: R(() => [r === 0 && t.$slots.art ? (k(), v("span", Et, [j(t.$slots, "art")])) : (k(), v(p, { key: 1 }, [r === 0 && t.$slots.mark ? (k(), v("span", {
+				default: W(() => [r === 0 && t.$slots.art ? (P(), S("span", Mn, [L(t.$slots, "art")])) : (P(), S(_, { key: 1 }, [r === 0 && t.$slots.mark ? (P(), S("span", {
 					key: 0,
-					class: E(`glim-readme-btn-mark ${e.markClass ?? ""}`),
+					class: A(`glim-readme-btn-mark ${e.markClass ?? ""}`),
 					"aria-hidden": "true"
-				}, [j(t.$slots, "mark")], 2)) : _("", !0), y("span", Dt, [y("span", Ot, P(n.name), 1), c(n) ? (k(), v("span", kt, P(c(n)), 1)) : _("", !0)])], 64))]),
+				}, [L(t.$slots, "mark")], 2)) : x("", !0), C("span", Nn, [C("span", Pn, B(n.name), 1), c(n) ? (P(), S("span", Fn, B(c(n)), 1)) : x("", !0)])], 64))]),
 				_: 2
 			}, 1040, ["aria-label", "class"]))), 128)),
-			i.value ? _("", !0) : (k(), v("span", At)),
-			e.hint ? (k(), v("span", jt, [S(X, { tip: e.hint }, null, 8, ["tip"])])) : _("", !0)
+			i.value ? x("", !0) : (P(), S("span", In)),
+			e.hint ? (P(), S("span", Ln, [E(Q, { tip: e.hint }, null, 8, ["tip"])])) : x("", !0)
 		], 2));
 	}
-}), Mt = { class: "glim-info-text" }, Nt = { class: "glim-info-text" }, Pt = { class: "glim-readme-btn-rows glim-about-give" }, Ft = /* @__PURE__ */ C({
+}), Rn = { class: "glim-info-text" }, zn = { class: "glim-info-text" }, Bn = { class: "glim-readme-btn-rows glim-about-give" }, Vn = /* @__PURE__ */ D({
 	__name: "InfoAboutCard",
 	props: {
 		text: {},
@@ -517,25 +914,25 @@ var ut = [
 		hueIndex: {}
 	},
 	setup(e) {
-		return (t, n) => (k(), g(Z, {
+		return (t, n) => (P(), b(Gt, {
 			title: e.text.title,
 			"hue-index": e.hueIndex
 		}, {
-			default: R(() => [
-				y("p", Mt, P(e.text.body), 1),
-				y("p", Nt, P(e.text.coffee), 1),
-				y("div", Pt, [
-					S(Q, {
+			default: W(() => [
+				C("p", Rn, B(e.text.body), 1),
+				C("p", zn, B(e.text.coffee), 1),
+				C("div", Bn, [
+					E($, {
 						brand: "coffee",
 						parts: [{
 							name: e.text.coffeeButton,
 							onClick: e.onCoffee
 						}]
 					}, {
-						art: R(() => [(k(), g(M(e.coffeeArt)))]),
+						art: W(() => [(P(), b(R(e.coffeeArt)))]),
 						_: 1
 					}, 8, ["parts"]),
-					e.onPaypal && e.text.paypalButton ? (k(), g(Q, {
+					e.onPaypal && e.text.paypalButton ? (P(), b($, {
 						key: 0,
 						brand: "paypal",
 						parts: [{
@@ -543,12 +940,12 @@ var ut = [
 							onClick: e.onPaypal
 						}],
 						"mark-class": "glim-paypal-mark"
-					}, b({ _: 2 }, [e.paypalGlyph ? {
+					}, w({ _: 2 }, [e.paypalGlyph ? {
 						name: "mark",
-						fn: R(() => [(k(), g(M(e.paypalGlyph)))]),
+						fn: W(() => [(P(), b(R(e.paypalGlyph)))]),
 						key: "0"
-					} : void 0]), 1032, ["parts"])) : _("", !0),
-					e.onCrypto && e.text.cryptoButton ? (k(), g(Q, {
+					} : void 0]), 1032, ["parts"])) : x("", !0),
+					e.onCrypto && e.text.cryptoButton ? (P(), b($, {
 						key: 1,
 						brand: "bitcoin",
 						parts: [{
@@ -556,17 +953,17 @@ var ut = [
 							onClick: e.onCrypto
 						}],
 						"mark-class": "glim-bitcoin-mark"
-					}, b({ _: 2 }, [e.cryptoGlyph ? {
+					}, w({ _: 2 }, [e.cryptoGlyph ? {
 						name: "mark",
-						fn: R(() => [(k(), g(M(e.cryptoGlyph)))]),
+						fn: W(() => [(P(), b(R(e.cryptoGlyph)))]),
 						key: "0"
-					} : void 0]), 1032, ["parts"])) : _("", !0)
+					} : void 0]), 1032, ["parts"])) : x("", !0)
 				])
 			]),
 			_: 1
 		}, 8, ["title", "hue-index"]));
 	}
-}), It = { class: "glim-info-text" }, Lt = { class: "glim-readme-btn-rows" }, Rt = /* @__PURE__ */ C({
+}), Hn = { class: "glim-info-text" }, Un = { class: "glim-readme-btn-rows" }, Wn = /* @__PURE__ */ D({
 	__name: "InfoHelpCard",
 	props: {
 		text: {},
@@ -578,43 +975,43 @@ var ut = [
 		manualGlyph: {},
 		onBugReport: {},
 		bugGlyph: {},
-		openUrl: { default: U },
+		openUrl: { default: Je },
 		hueIndex: {}
 	},
 	setup(e) {
-		let t = e, n = h(() => De(t.text.report, t.mailAddress));
-		return (t, r) => (k(), g(Z, {
+		let t = e, n = y(() => qe(t.text.report, t.mailAddress));
+		return (t, r) => (P(), b(Gt, {
 			title: e.text.title,
 			hint: e.text.hint,
 			"hue-index": e.hueIndex
 		}, {
-			default: R(() => [y("p", It, P(e.text.report), 1), y("div", Lt, [
-				S(Q, {
+			default: W(() => [C("p", Hn, B(e.text.report), 1), C("div", Un, [
+				E($, {
 					brand: "github",
 					parts: [{
 						name: e.text.repoButton,
 						onClick: () => e.openUrl(e.repoUrl)
 					}],
 					"mark-class": "glim-github-mark"
-				}, b({ _: 2 }, [e.repoGlyph ? {
+				}, w({ _: 2 }, [e.repoGlyph ? {
 					name: "mark",
-					fn: R(() => [(k(), g(M(e.repoGlyph)))]),
+					fn: W(() => [(P(), b(R(e.repoGlyph)))]),
 					key: "0"
 				} : void 0]), 1032, ["parts"]),
-				n.value ? (k(), g(Q, {
+				n.value ? (P(), b($, {
 					key: 0,
 					brand: "house",
 					parts: [{
 						name: e.text.mailButton,
-						onClick: () => e.openUrl(F(Ee)(e.mailAddress, e.text.mailSubject))
+						onClick: () => e.openUrl(V(ze)(e.mailAddress, e.text.mailSubject))
 					}],
 					"mark-class": "glim-house-mark"
-				}, b({ _: 2 }, [e.mailGlyph ? {
+				}, w({ _: 2 }, [e.mailGlyph ? {
 					name: "mark",
-					fn: R(() => [(k(), g(M(e.mailGlyph)))]),
+					fn: W(() => [(P(), b(R(e.mailGlyph)))]),
 					key: "0"
-				} : void 0]), 1032, ["parts"])) : _("", !0),
-				e.manualUrl && e.text.manual ? (k(), g(Q, {
+				} : void 0]), 1032, ["parts"])) : x("", !0),
+				e.manualUrl && e.text.manual ? (P(), b($, {
 					key: 1,
 					brand: "docs",
 					parts: [{
@@ -623,12 +1020,12 @@ var ut = [
 						onClick: () => e.openUrl(e.manualUrl)
 					}],
 					"mark-class": "glim-docs-mark"
-				}, b({ _: 2 }, [e.manualGlyph ? {
+				}, w({ _: 2 }, [e.manualGlyph ? {
 					name: "mark",
-					fn: R(() => [(k(), g(M(e.manualGlyph)))]),
+					fn: W(() => [(P(), b(R(e.manualGlyph)))]),
 					key: "0"
-				} : void 0]), 1032, ["parts"])) : _("", !0),
-				e.onBugReport && e.text.bugReport ? (k(), g(Q, {
+				} : void 0]), 1032, ["parts"])) : x("", !0),
+				e.onBugReport && e.text.bugReport ? (P(), b($, {
 					key: 2,
 					brand: "github",
 					parts: [{
@@ -636,11 +1033,11 @@ var ut = [
 						sub: e.text.bugReportSub,
 						onClick: e.onBugReport
 					}]
-				}, b({ _: 2 }, [e.bugGlyph ? {
+				}, w({ _: 2 }, [e.bugGlyph ? {
 					name: "mark",
-					fn: R(() => [(k(), g(M(e.bugGlyph)))]),
+					fn: W(() => [(P(), b(R(e.bugGlyph)))]),
 					key: "0"
-				} : void 0]), 1032, ["parts"])) : _("", !0)
+				} : void 0]), 1032, ["parts"])) : x("", !0)
 			])]),
 			_: 1
 		}, 8, [
@@ -649,69 +1046,69 @@ var ut = [
 			"hue-index"
 		]));
 	}
-}), zt = { class: "glim-version-rows" }, Bt = { class: "glim-version-name" }, Vt = { class: "glim-version-part" }, Ht = {
+}), Gn = { class: "glim-version-rows" }, Kn = { class: "glim-version-name" }, qn = { class: "glim-version-part" }, Jn = {
 	key: 0,
 	class: "glim-version-sub"
-}, Ut = ["href", "onClick"], Wt = {
+}, Yn = ["href", "onClick"], Xn = {
 	key: 1,
 	class: "glim-num glim-version-number"
-}, Gt = {
+}, Zn = {
 	key: 0,
 	class: "glim-version-actions"
-}, Kt = {
+}, Qn = {
 	role: "status",
 	class: "glim-sr-only"
-}, $ = /* @__PURE__ */ C({
+}, $n = /* @__PURE__ */ D({
 	__name: "InfoVersionCard",
 	props: {
 		text: {},
 		rows: {},
 		updateCheck: {},
 		onReleaseNotes: {},
-		openUrl: { default: U },
+		openUrl: { default: Je },
 		hueIndex: {}
 	},
 	setup(e) {
-		let t = e, n = oe(), r = h(() => !n["whats-new"] && t.onReleaseNotes && t.text.releaseNotes), i = N({ kind: "idle" }), a = N(0), o = h(() => t.updateCheck && Xe(i.value, t.updateCheck.text));
+		let t = e, n = ae(), r = y(() => !n["whats-new"] && t.onReleaseNotes && t.text.releaseNotes), i = z({ kind: "idle" }), a = z(0), o = y(() => t.updateCheck && wt(i.value, t.updateCheck.text));
 		function s() {
-			Fe(t.updateCheck, i.value, (e) => {
+			ot(t.updateCheck, i.value, (e) => {
 				i.value = e, e.kind === "failed" && a.value++;
 			});
 		}
 		function c(e, n) {
 			e.preventDefault(), t.openUrl(n);
 		}
-		return (t, n) => (k(), g(Z, {
+		return (t, n) => (P(), b(Gt, {
 			title: e.text.title,
 			hint: e.text.hint,
 			"hue-index": e.hueIndex
 		}, {
-			default: R(() => [y("ul", zt, [(k(!0), v(p, null, A(e.rows, (t) => (k(), v("li", {
+			default: W(() => [C("ul", Gn, [(P(!0), S(_, null, I(e.rows, (t) => (P(), S("li", {
 				key: t.name,
 				class: "glim-version-row"
-			}, [y("span", Bt, [y("span", Vt, P(t.name), 1), t.sub ? (k(), v("span", Ht, P(t.sub), 1)) : _("", !0)]), F(G)(t).href ? (k(), v("a", {
+			}, [C("span", Kn, [C("span", qn, B(t.name), 1), t.sub ? (P(), S("span", Jn, B(t.sub), 1)) : x("", !0)]), V(q)(t).href ? (P(), S("a", {
 				key: 0,
-				href: F(G)(t).href,
+				href: V(q)(t).href,
 				target: "_blank",
 				rel: "noopener noreferrer",
 				class: "glim-num glim-version-number",
-				onClick: (e) => c(e, F(G)(t).href)
-			}, P(F(G)(t).shown), 9, Ut)) : (k(), v("span", Wt, P(F(G)(t).released ? F(G)(t).shown : e.text.unreleased(F(G)(t).shown)), 1))]))), 128))]), r.value || t.$slots["whats-new"] || e.updateCheck ? (k(), v("div", Gt, [
-				r.value ? (k(), g(Y, {
+				onClick: (e) => c(e, V(q)(t).href)
+			}, B(V(q)(t).shown), 9, Yn)) : (P(), S("span", Xn, B(V(q)(t).released ? V(q)(t).shown : e.text.unreleased(V(q)(t).shown)), 1))]))), 128))]), r.value || t.$slots["whats-new"] || e.updateCheck ? (P(), S("div", Zn, [
+				r.value ? (P(), b(Z, {
 					key: 0,
 					label: e.text.releaseNotes,
 					"label-key": "about.releaseNotes",
 					onClick: n[0] ||= (t) => e.onReleaseNotes()
-				}, null, 8, ["label"])) : _("", !0),
-				j(t.$slots, "whats-new"),
-				e.updateCheck && o.value ? (k(), v(p, { key: 1 }, [(k(), g(Y, {
+				}, null, 8, ["label"])) : x("", !0),
+				L(t.$slots, "whats-new"),
+				e.updateCheck && o.value ? (P(), S(_, { key: 1 }, [(P(), b(Z, {
 					key: a.value,
 					label: o.value.label,
 					"label-key": o.value.labelKey,
 					tone: o.value.tone,
-					stage: F(Ze)(e.updateCheck.text, o.value.label),
+					stage: V(Tt)(e.updateCheck.text, o.value.label),
 					busy: i.value.kind === "busy",
-					class: E(a.value > 0 ? "glim-shake" : ""),
+					class: A(a.value > 0 ? "glim-shake" : ""),
 					onClick: s
 				}, null, 8, [
 					"label",
@@ -720,8 +1117,8 @@ var ut = [
 					"stage",
 					"busy",
 					"class"
-				])), y("span", Kt, P(o.value.announced), 1)], 64)) : _("", !0)
-			])) : _("", !0)]),
+				])), C("span", Qn, B(o.value.announced), 1)], 64)) : x("", !0)
+			])) : x("", !0)]),
 			_: 3
 		}, 8, [
 			"title",
@@ -729,7 +1126,7 @@ var ut = [
 			"hue-index"
 		]));
 	}
-}), qt = /* @__PURE__ */ C({
+}), er = /* @__PURE__ */ D({
 	__name: "InfoTile",
 	props: {
 		version: {},
@@ -739,17 +1136,135 @@ var ut = [
 	},
 	setup(e) {
 		let t = e, n = (e) => t.hueIndex === void 0 ? void 0 : t.hueIndex + e;
-		return (t, r) => (k(), v(p, null, [
-			S($, T(e.version, { "hue-index": n(0) }), b({ _: 2 }, [t.$slots["whats-new"] ? {
+		return (t, r) => (P(), S(_, null, [
+			E($n, k(e.version, { "hue-index": n(0) }), w({ _: 2 }, [t.$slots["whats-new"] ? {
 				name: "whats-new",
-				fn: R(() => [j(t.$slots, "whats-new")]),
+				fn: W(() => [L(t.$slots, "whats-new")]),
 				key: "0"
 			} : void 0]), 1040, ["hue-index"]),
-			S(Rt, T(e.help, { "hue-index": n(1) }), null, 16, ["hue-index"]),
-			S(Ft, T(e.about, { "hue-index": n(2) }), null, 16, ["hue-index"])
+			E(Wn, k(e.help, { "hue-index": n(1) }), null, 16, ["hue-index"]),
+			E(Vn, k(e.about, { "hue-index": n(2) }), null, 16, ["hue-index"])
 		], 64));
 	}
-}), Jt = { class: "glim-num-wrap" }, Yt = /* @__PURE__ */ C({
+}), tr = ["aria-label"], nr = [
+	"aria-expanded",
+	"tabindex",
+	"onClick",
+	"onMouseenter",
+	"onKeydown",
+	"onFocus"
+], rr = /* @__PURE__ */ D({
+	__name: "MenuBar",
+	props: {
+		label: {},
+		menus: {}
+	},
+	setup(e, { expose: t }) {
+		let n = e, r = [], i = z(null), a = z(0);
+		function o(e) {
+			let t = r[e];
+			if (!t) return;
+			t.focus(), a.value = e;
+			let n = t.getBoundingClientRect();
+			i.value = {
+				at: e,
+				x: n.left,
+				y: n.bottom + 6
+			};
+		}
+		t({ open: o });
+		let s = (e) => (e + n.menus.length) % n.menus.length;
+		function c(e) {
+			i.value?.at === e ? i.value = null : o(e);
+		}
+		function l(e, t) {
+			let n = getComputedStyle(e.currentTarget).direction === "rtl", i = {
+				ArrowRight: n ? -1 : 1,
+				ArrowLeft: n ? 1 : -1
+			}[e.key];
+			i === void 0 ? e.key === "ArrowDown" && (e.preventDefault(), o(t)) : (e.preventDefault(), a.value = s(t + i), r[a.value]?.focus());
+		}
+		return (t, n) => (P(), S("div", {
+			role: "menubar",
+			"aria-label": e.label,
+			class: "glim-menubar"
+		}, [(P(!0), S(_, null, I(e.menus, (e, t) => (P(), S("button", {
+			key: t,
+			ref_for: !0,
+			ref: (e) => r[t] = e,
+			type: "button",
+			role: "menuitem",
+			"aria-haspopup": "menu",
+			"aria-expanded": i.value?.at === t,
+			tabindex: t === a.value ? 0 : -1,
+			class: "glim-menubar-item",
+			onClick: (e) => c(t),
+			onMouseenter: (e) => i.value && i.value.at !== t && o(t),
+			onKeydown: (e) => l(e, t),
+			onFocus: (e) => a.value = t
+		}, B(e.label), 41, nr))), 128)), i.value && e.menus[i.value.at] ? (P(), b(Cn, {
+			key: i.value.at,
+			x: i.value.x,
+			y: i.value.y,
+			items: e.menus[i.value.at].items,
+			label: e.menus[i.value.at].label,
+			opener: r[i.value.at],
+			onClose: n[0] ||= (e) => i.value = null,
+			onStep: n[1] ||= (e) => i.value && o(s(i.value.at + e))
+		}, null, 8, [
+			"x",
+			"y",
+			"items",
+			"label",
+			"opener"
+		])) : x("", !0)], 8, tr));
+	}
+}), ir = [
+	"role",
+	"aria-label",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-valuetext",
+	"aria-busy"
+], ar = /* @__PURE__ */ D({
+	inheritAttrs: !1,
+	__name: "Meter",
+	props: {
+		value: { default: null },
+		label: {},
+		size: { default: "medium" },
+		threshold: { default: .9 },
+		quiet: {
+			type: Boolean,
+			default: !1
+		},
+		valueText: {}
+	},
+	setup(n) {
+		let r = n, i = y(() => We(r.value, {
+			size: r.size,
+			threshold: r.threshold,
+			quiet: r.quiet
+		})), a = y(() => i.value.percent === null), o = t(() => r.valueText);
+		return (t, r) => (P(), S(_, null, [C("span", k(t.$attrs, {
+			ref: (e) => V(o).trigger.value = e,
+			role: a.value ? "progressbar" : "meter",
+			"aria-label": n.label,
+			"aria-valuemin": a.value ? void 0 : 0,
+			"aria-valuemax": a.value ? void 0 : 100,
+			"aria-valuenow": i.value.percent ?? void 0,
+			"aria-valuetext": n.valueText,
+			"aria-busy": a.value || void 0,
+			class: i.value.className,
+			onMouseenter: r[0] ||= (...e) => V(o).show && V(o).show(...e),
+			onMouseleave: r[1] ||= (...e) => V(o).hide && V(o).hide(...e)
+		}), [C("span", {
+			class: "glim-meter-fill",
+			style: j(i.value.width ? { width: i.value.width } : void 0)
+		}, null, 4)], 16, ir), E(e, { state: V(o) }, null, 8, ["state"])], 64));
+	}
+}), or = { class: "glim-num-wrap" }, sr = /* @__PURE__ */ D({
 	inheritAttrs: !1,
 	__name: "NumberField",
 	props: {
@@ -758,15 +1273,15 @@ var ut = [
 	},
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = I(e, "modelValue"), n = ie(), r = N(null), i;
-		ne(() => {
-			a(t.value), i = ye(r.value);
+		let t = H(e, "modelValue"), n = re(), r = z(null), i;
+		M(() => {
+			a(t.value), i = Ce(r.value);
 		}), te(() => i?.());
 		function a(e) {
 			let t = r.value;
 			t && (t.value === "" ? null : t.valueAsNumber) !== e && (t.value = e === null ? "" : String(e));
 		}
-		L([
+		U([
 			t,
 			() => n.min,
 			() => n.max,
@@ -774,13 +1289,13 @@ var ut = [
 			() => n.disabled,
 			() => n.readonly
 		], () => {
-			a(t.value), r.value && qe(r.value);
+			a(t.value), r.value && yt(r.value);
 		}, { flush: "post" });
 		function o(e) {
 			let n = e.target;
 			t.value = n.value === "" ? null : n.valueAsNumber;
 		}
-		return (e, t) => (k(), v("span", Jt, [y("input", T(e.$attrs, {
+		return (e, t) => (P(), S("span", or, [C("input", k(e.$attrs, {
 			ref_key: "input",
 			ref: r,
 			type: "number",
@@ -788,14 +1303,104 @@ var ut = [
 			onInput: o
 		}), null, 16)]));
 	}
-}), Xt = [
+}), cr = ["disabled", "type"], lr = /* @__PURE__ */ D({
+	inheritAttrs: !1,
+	__name: "PasswordField",
+	props: /*@__PURE__*/ O({
+		text: { default: () => ({
+			show: "Show",
+			hide: "Hide"
+		}) },
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let t = H(e, "modelValue"), n = F(!1);
+		return (r, i) => (P(), S("span", {
+			class: A(["glim-secret", r.$attrs.class]),
+			style: j(r.$attrs.style)
+		}, [se(C("input", k({
+			"onUpdate:modelValue": i[0] ||= (e) => t.value = e,
+			autocomplete: "current-password",
+			spellcheck: "false"
+		}, {
+			...r.$attrs,
+			class: void 0,
+			style: void 0
+		}, {
+			disabled: e.disabled,
+			type: n.value ? "text" : "password",
+			class: "glim-input"
+		}), null, 16, cr), [[oe, t.value]]), E(J, {
+			tip: n.value ? e.text.hide : e.text.show,
+			class: "glim-secret-eye",
+			disabled: e.disabled,
+			onClick: i[1] ||= (e) => n.value = !n.value
+		}, {
+			default: W(() => [(P(), b(R(n.value ? V(m) : V(d))))]),
+			_: 1
+		}, 8, ["tip", "disabled"])], 6));
+	}
+}), ur = /* @__PURE__ */ D({
+	__name: "Pill",
+	props: { tone: { default: "neutral" } },
+	setup(e) {
+		let t = e, n = y(() => Ye(t.tone));
+		return (e, t) => (P(), S("span", { class: A(n.value) }, [L(e.$slots, "default")], 2));
+	}
+}), dr = [
+	"aria-label",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-valuetext"
+], fr = /* @__PURE__ */ D({
+	__name: "ProgressBar",
+	props: {
+		value: { default: null },
+		label: {},
+		paused: {
+			type: Boolean,
+			default: !1
+		},
+		failed: {
+			type: Boolean,
+			default: !1
+		},
+		valueText: {}
+	},
+	setup(e) {
+		let t = e, n = y(() => Qe(t.value, {
+			paused: t.paused,
+			failed: t.failed
+		}));
+		return (t, r) => (P(), S("span", {
+			role: "progressbar",
+			"aria-label": e.label,
+			"aria-valuemin": n.value.percent === null ? void 0 : 0,
+			"aria-valuemax": n.value.percent === null ? void 0 : 100,
+			"aria-valuenow": n.value.percent ?? void 0,
+			"aria-valuetext": e.valueText,
+			class: A(n.value.className)
+		}, [C("span", {
+			class: "glim-progress-fill",
+			style: j(n.value.width ? { width: n.value.width } : void 0)
+		}, null, 4)], 10, dr));
+	}
+}), pr = [
 	"href",
 	"data-sel-id",
 	"aria-selected",
 	"aria-current",
 	"aria-describedby",
 	"tabindex"
-], Zt = [
+], mr = [
 	"data-sel-id",
 	"id",
 	"role",
@@ -807,7 +1412,7 @@ var ut = [
 	"aria-describedby",
 	"disabled",
 	"tabindex"
-], Qt = ["id"], $t = /* @__PURE__ */ C({
+], hr = ["id"], gr = /* @__PURE__ */ D({
 	__name: "SelectorSegment",
 	props: {
 		item: {},
@@ -830,7 +1435,7 @@ var ut = [
 	},
 	emits: ["select"],
 	setup(r, { emit: i }) {
-		let a = r, o = i, s = h(() => Ie({
+		let a = r, o = i, s = y(() => st({
 			strip: a.strip,
 			orientation: a.orientation,
 			size: a.size,
@@ -850,19 +1455,19 @@ var ut = [
 			disabled: a.disabled,
 			dim: a.item.dim,
 			squeezed: a.squeezed
-		})), c = t(() => s.value.tip, () => a.disabled), l = ae(), u = h(() => a.disabled && !!s.value.tip), d = h(() => u.value ? l : c.describedBy.value), f = h(() => a.strip.kind === "tab"), m = h(() => ({
+		})), c = t(() => s.value.tip, () => a.disabled), l = ie(), u = y(() => a.disabled && !!s.value.tip), d = y(() => u.value ? l : c.describedBy.value), f = y(() => a.strip.kind === "tab"), p = y(() => ({
 			...s.value.style,
 			...a.share
 		}));
-		function b(e) {
+		function m(e) {
 			c.trigger.value = e;
 		}
-		function x(e) {
+		function h(e) {
 			e.ctrlKey || e.metaKey || e.shiftKey || e.altKey || e.button !== 0 || (e.preventDefault(), o("select"));
 		}
-		return (t, i) => (k(), v(p, null, [r.orientation === "vertical" ? (k(), v("a", {
+		return (t, i) => (P(), S(_, null, [r.orientation === "vertical" ? (P(), S("a", {
 			key: 0,
-			ref: b,
+			ref: m,
 			href: r.item.href,
 			"data-sel-id": r.item.id,
 			role: "tab",
@@ -870,27 +1475,27 @@ var ut = [
 			"aria-current": r.on ? "page" : void 0,
 			"aria-describedby": d.value,
 			tabindex: r.roved ? 0 : -1,
-			class: E(s.value.className),
-			style: D(m.value),
-			onClick: x,
-			onMouseenter: i[0] ||= (...e) => F(c).show && F(c).show(...e),
-			onMouseleave: i[1] ||= (...e) => F(c).hide && F(c).hide(...e),
-			onFocus: i[2] ||= (...e) => F(c).showOnFocus && F(c).showOnFocus(...e),
-			onBlur: i[3] ||= (...e) => F(c).hide && F(c).hide(...e)
-		}, [s.value.showGlyph && r.item.glyph ? (k(), g(M(r.item.glyph), { key: 0 })) : _("", !0), s.value.labelClass === null ? _("", !0) : (k(), v("span", {
+			class: A(s.value.className),
+			style: j(p.value),
+			onClick: h,
+			onMouseenter: i[0] ||= (...e) => V(c).show && V(c).show(...e),
+			onMouseleave: i[1] ||= (...e) => V(c).hide && V(c).hide(...e),
+			onFocus: i[2] ||= (...e) => V(c).showOnFocus && V(c).showOnFocus(...e),
+			onBlur: i[3] ||= (...e) => V(c).hide && V(c).hide(...e)
+		}, [s.value.showGlyph && r.item.glyph ? (P(), b(R(r.item.glyph), { key: 0 })) : x("", !0), s.value.labelClass === null ? x("", !0) : (P(), S("span", {
 			key: 1,
 			"data-sel-label": "",
-			class: E(s.value.labelClass)
-		}, P(r.item.label), 3))], 46, Xt)) : (k(), v(p, { key: 1 }, [S(F(n), T({
+			class: A(s.value.labelClass)
+		}, B(r.item.label), 3))], 46, pr)) : (P(), S(_, { key: 1 }, [E(V(n), k({
 			on: u.value,
-			show: F(c).show,
-			hide: F(c).hide
+			show: V(c).show,
+			hide: V(c).hide
 		}, u.value ? { style: r.share } : {}), {
-			default: R(() => [y("button", {
-				ref: b,
+			default: W(() => [C("button", {
+				ref: m,
 				type: "button",
 				"data-sel-id": r.item.id,
-				id: r.panelId && f.value ? F(Be)(r.panelId, r.item.id) : void 0,
+				id: r.panelId && f.value ? V(dt)(r.panelId, r.item.id) : void 0,
 				role: r.strip.kind === "toggle" ? void 0 : r.strip.kind,
 				"aria-selected": f.value ? r.on : void 0,
 				"aria-controls": r.panelId && f.value && r.on ? r.panelId : void 0,
@@ -900,36 +1505,36 @@ var ut = [
 				"aria-describedby": d.value,
 				disabled: r.disabled,
 				tabindex: r.roved ? 0 : -1,
-				class: E(s.value.className),
-				style: D(m.value),
+				class: A(s.value.className),
+				style: j(p.value),
 				onClick: i[4] ||= (e) => o("select"),
-				onMouseenter: i[5] ||= (...e) => F(c).show && F(c).show(...e),
-				onMouseleave: i[6] ||= (...e) => F(c).hide && F(c).hide(...e),
-				onFocus: i[7] ||= (...e) => F(c).showOnFocus && F(c).showOnFocus(...e),
-				onBlur: i[8] ||= (...e) => F(c).hide && F(c).hide(...e)
-			}, [s.value.showGlyph && r.item.glyph ? (k(), g(M(r.item.glyph), { key: 0 })) : _("", !0), s.value.labelClass === null ? _("", !0) : (k(), v("span", {
+				onMouseenter: i[5] ||= (...e) => V(c).show && V(c).show(...e),
+				onMouseleave: i[6] ||= (...e) => V(c).hide && V(c).hide(...e),
+				onFocus: i[7] ||= (...e) => V(c).showOnFocus && V(c).showOnFocus(...e),
+				onBlur: i[8] ||= (...e) => V(c).hide && V(c).hide(...e)
+			}, [s.value.showGlyph && r.item.glyph ? (P(), b(R(r.item.glyph), { key: 0 })) : x("", !0), s.value.labelClass === null ? x("", !0) : (P(), S("span", {
 				key: 1,
 				"data-sel-label": "",
-				class: E(s.value.labelClass)
-			}, P(r.item.label), 3))], 46, Zt)]),
+				class: A(s.value.labelClass)
+			}, B(r.item.label), 3))], 46, mr)]),
 			_: 1
 		}, 16, [
 			"on",
 			"show",
 			"hide"
-		]), u.value ? (k(), v("span", {
+		]), u.value ? (P(), S("span", {
 			key: 0,
-			id: F(l),
+			id: V(l),
 			hidden: ""
-		}, P(s.value.tip), 9, Qt)) : _("", !0)], 64)), S(e, { state: F(c) }, null, 8, ["state"])], 64));
+		}, B(s.value.tip), 9, hr)) : x("", !0)], 64)), E(e, { state: V(c) }, null, 8, ["state"])], 64));
 	}
-}), en = [
+}), _r = [
 	"role",
 	"aria-label",
 	"aria-orientation"
-], tn = /* @__PURE__ */ C({
+], vr = /* @__PURE__ */ D({
 	__name: "Selector",
-	props: /*@__PURE__*/ ee({
+	props: /*@__PURE__*/ O({
 		items: {},
 		label: {},
 		select: { default: "one" },
@@ -973,12 +1578,12 @@ var ut = [
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = e, n = I(e, "modelValue");
+		let t = e, n = H(e, "modelValue");
 		function r(e) {
-			let t = N(H(e));
-			return O(Ge(e, () => t.value = H(e))), t;
+			let t = z(Be(e));
+			return N(_t(e, () => t.value = Be(e))), t;
 		}
-		let i = q(Le(t.size, t.orientation)), a = r(ue), o = r(me), s = h(() => Ve({
+		let i = X(ct(t.size, t.orientation)), a = r(me), o = r(ve), s = y(() => ft({
 			mode: i.value,
 			select: t.select,
 			activation: t.activation,
@@ -997,15 +1602,15 @@ var ut = [
 				hasGlyph: !!e.glyph,
 				iconOnly: !!e.iconOnly
 			}))
-		})), c = N(null), l = N(null), u = re("even"), d = h(() => t.items.map((e) => e.label).join("\n")), f = h(() => t.items.map((e) => t.disabled || e.disabled ? "1" : "0").join(""));
-		function m(e, t) {
-			L([c, e], (e, n, r) => {
+		})), c = z(null), l = z(null), u = F("even"), d = y(() => t.items.map((e) => e.label).join("\n")), f = y(() => t.items.map((e) => t.disabled || e.disabled ? "1" : "0").join(""));
+		function p(e, t) {
+			U([c, e], (e, n, r) => {
 				if (!c.value) return;
 				let i = t(c.value);
 				i && r(i);
 			}, { flush: "post" });
 		}
-		m(() => s.value.counted, (e) => s.value.counted ? Se(e) : void 0), m(() => [
+		p(() => s.value.counted, (e) => s.value.counted ? Ae(e) : void 0), p(() => [
 			s.value.pinWidth,
 			t.equalWidth,
 			t.inline,
@@ -1015,29 +1620,29 @@ var ut = [
 			s.value.mode
 		].join("|"), (e) => {
 			if (!s.value.pinWidth) l.value = null;
-			else return $e(e, {
+			else return Dt(e, {
 				inline: t.inline,
 				equalWidth: t.equalWidth
 			}, (e) => l.value = e);
-		}), m(() => [
+		}), p(() => [
 			s.value.canSqueeze,
 			d.value,
 			f.value,
 			t.size
 		].join("|"), (e) => {
 			if (!s.value.canSqueeze) u.value = "even";
-			else return Qe(e, (e) => u.value = e);
+			else return Et(e, (e) => u.value = e);
 		});
-		let _ = h(() => Re({
+		let m = y(() => lt({
 			rows: l.value,
 			pinWidth: s.value.pinWidth,
 			inline: t.inline,
 			fit: t.fit,
 			fitMode: u.value,
 			pairsOnPhone: t.pairsOnPhone
-		})), y = h(() => t.select === "many"), b = (e) => y.value ? (n.value ?? []).includes(e) : n.value === e, x = h(() => t.items.map((e) => t.disabled || !!e.disabled)), S = h(() => Pe(x.value, t.items.findIndex((e) => b(e.id))));
+		})), h = y(() => t.select === "many"), g = (e) => h.value ? (n.value ?? []).includes(e) : n.value === e, v = y(() => t.items.map((e) => t.disabled || !!e.disabled)), x = y(() => at(v.value, t.items.findIndex((e) => g(e.id))));
 		function C(e) {
-			n.value = y.value ? Je(n.value ?? [], e, t.items.map((e) => e.id)) : e;
+			n.value = h.value ? St(n.value ?? [], e, t.items.map((e) => e.id)) : e;
 		}
 		function w(e) {
 			let n = e.target;
@@ -1045,27 +1650,27 @@ var ut = [
 				e.preventDefault(), n.click();
 				return;
 			}
-			let r = Ne(c.value, e.key, t.orientation);
+			let r = it(c.value, e.key, t.orientation);
 			r && (e.preventDefault(), s.value.autoSelect && r.dataset.selId && C(r.dataset.selId));
 		}
-		return (t, n) => (k(), v("div", {
+		return (t, n) => (P(), S("div", {
 			ref_key: "track",
 			ref: c,
 			role: s.value.role,
 			"aria-label": e.label,
 			"aria-orientation": s.value.role === "group" ? void 0 : e.orientation,
-			class: E(s.value.className),
-			style: D(_.value.track),
+			class: A(s.value.className),
+			style: j(m.value.track),
 			onKeydown: w
-		}, [(k(!0), v(p, null, A(e.items, (t, n) => (k(), g($t, {
+		}, [(P(!0), S(_, null, I(e.items, (t, n) => (P(), b(gr, {
 			key: t.id,
 			item: t,
 			index: n,
 			strip: s.value,
-			on: b(t.id),
-			disabled: x.value[n],
-			roved: n === S.value,
-			share: e.orientation === "vertical" ? {} : _.value.segment,
+			on: g(t.id),
+			disabled: v.value[n],
+			roved: n === x.value,
+			share: e.orientation === "vertical" ? {} : m.value.segment,
 			squeezed: s.value.canSqueeze && u.value === "squeezed",
 			orientation: e.orientation,
 			size: e.size,
@@ -1096,13 +1701,13 @@ var ut = [
 			"hue-offset",
 			"panel-id",
 			"onSelect"
-		]))), 128))], 46, en));
+		]))), 128))], 46, _r));
 	}
-}), nn = [
+}), yr = [
 	"href",
 	"aria-current",
 	"aria-describedby"
-], rn = { class: "glim-sr-only" }, an = /* @__PURE__ */ C({
+], br = { class: "glim-sr-only" }, xr = /* @__PURE__ */ D({
 	inheritAttrs: !1,
 	__name: "SidebarRow",
 	props: {
@@ -1117,7 +1722,7 @@ var ut = [
 		count: {}
 	},
 	setup(n) {
-		let r = n, i = q("sidebar"), a = h(() => Ue({
+		let r = n, i = X("sidebar"), a = y(() => mt({
 			mode: i.value,
 			label: r.label,
 			hasGlyph: !!r.glyph,
@@ -1128,50 +1733,50 @@ var ut = [
 		function s(e) {
 			o.trigger.value = e;
 		}
-		return (t, r) => (k(), v(p, null, [y("a", T(t.$attrs, {
+		return (t, r) => (P(), S(_, null, [C("a", k(t.$attrs, {
 			ref: s,
 			href: n.href,
 			"aria-current": n.active ? "page" : void 0,
-			"aria-describedby": F(o).describedBy.value,
+			"aria-describedby": V(o).describedBy.value,
 			class: a.value.className,
 			style: a.value.style,
-			onMouseenter: r[0] ||= (...e) => F(o).show && F(o).show(...e),
-			onMouseleave: r[1] ||= (...e) => F(o).hide && F(o).hide(...e),
-			onFocus: r[2] ||= (...e) => F(o).showOnFocus && F(o).showOnFocus(...e),
-			onBlur: r[3] ||= (...e) => F(o).hide && F(o).hide(...e)
+			onMouseenter: r[0] ||= (...e) => V(o).show && V(o).show(...e),
+			onMouseleave: r[1] ||= (...e) => V(o).hide && V(o).hide(...e),
+			onFocus: r[2] ||= (...e) => V(o).showOnFocus && V(o).showOnFocus(...e),
+			onBlur: r[3] ||= (...e) => V(o).hide && V(o).hide(...e)
 		}), [
-			a.value.showGlyph && n.glyph ? (k(), g(M(n.glyph), { key: 0 })) : _("", !0),
-			y("span", { class: E(a.value.labelClass) }, P(n.label), 3),
-			a.value.countClass && n.count ? (k(), v(p, { key: 1 }, [y("span", {
-				class: E(a.value.countClass),
+			a.value.showGlyph && n.glyph ? (P(), b(R(n.glyph), { key: 0 })) : x("", !0),
+			C("span", { class: A(a.value.labelClass) }, B(n.label), 3),
+			a.value.countClass && n.count ? (P(), S(_, { key: 1 }, [C("span", {
+				class: A(a.value.countClass),
 				"aria-hidden": "true"
-			}, P(n.count.value), 3), y("span", rn, P(n.count.label), 1)], 64)) : _("", !0)
-		], 16, nn), S(e, { state: F(o) }, null, 8, ["state"])], 64));
+			}, B(n.count.value), 3), C("span", br, B(n.count.label), 1)], 64)) : x("", !0)
+		], 16, yr), E(e, { state: V(o) }, null, 8, ["state"])], 64));
 	}
-}), on = ["aria-labelledby"], sn = { class: "glim-subcard-title" }, cn = ["id"], ln = /* @__PURE__ */ C({
+}), Sr = ["aria-labelledby"], Cr = { class: "glim-subcard-title" }, wr = ["id"], Tr = /* @__PURE__ */ D({
 	__name: "SubCard",
 	props: {
 		title: {},
 		hint: {}
 	},
 	setup(e) {
-		let t = ae();
-		return (n, r) => (k(), v("section", {
+		let t = ie();
+		return (n, r) => (P(), S("section", {
 			class: "glim-subcard",
-			"aria-labelledby": F(t)
-		}, [y("h3", sn, [y("span", { id: F(t) }, P(e.title), 9, cn), e.hint ? (k(), g(X, {
+			"aria-labelledby": V(t)
+		}, [C("h3", Cr, [C("span", { id: V(t) }, B(e.title), 9, wr), e.hint ? (P(), b(Q, {
 			key: 0,
 			tip: e.hint
-		}, null, 8, ["tip"])) : _("", !0)]), j(n.$slots, "default")], 8, on));
+		}, null, 8, ["tip"])) : x("", !0)]), L(n.$slots, "default")], 8, Sr));
 	}
-}), un = { class: "glim-toast-stack" }, dn = [
+}), Er = { class: "glim-toast-stack" }, Dr = [
 	"role",
 	"onMouseenter",
 	"onMouseleave",
 	"onFocusin",
 	"onFocusout",
 	"onKeydown"
-], fn = { class: "glim-toast-message" }, pn = ["aria-label", "onClick"], mn = /* @__PURE__ */ C({
+], Or = { class: "glim-toast-message" }, kr = ["aria-label", "onClick"], Ar = /* @__PURE__ */ D({
 	__name: "ToastViewport",
 	props: {
 		toasts: {},
@@ -1186,7 +1791,7 @@ var ut = [
 	],
 	setup(e, { emit: t }) {
 		let n = t, r = (e) => e === "success" ? "status" : "alert";
-		return (t, a) => (k(), v("div", un, [(k(!0), v(p, null, A(e.toasts, (t) => (k(), v("div", {
+		return (t, i) => (P(), S("div", Er, [(P(!0), S(_, null, I(e.toasts, (t) => (P(), S("div", {
 			key: t.id,
 			role: r(t.severity),
 			class: "glim-toast glim-toast-card",
@@ -1194,31 +1799,31 @@ var ut = [
 			onMouseleave: (e) => n("leave", t.id),
 			onFocusin: (e) => n("focusin", t.id),
 			onFocusout: (e) => n("focusout", t.id),
-			onKeydown: se(z((e) => n("dismiss", t.id), ["stop"]), ["esc"])
+			onKeydown: ce(G((e) => n("dismiss", t.id), ["stop"]), ["esc"])
 		}, [
-			S(F(i), {
-				mark: F(pe)[t.severity],
-				class: E(`glim-toast-glyph glim-toast-glyph--${t.severity}`)
+			E(V(o), {
+				mark: V(_e)[t.severity],
+				class: A(`glim-toast-glyph glim-toast-glyph--${t.severity}`)
 			}, null, 8, ["mark", "class"]),
-			y("p", fn, P(t.message), 1),
-			y("button", {
+			C("p", Or, B(t.message), 1),
+			C("button", {
 				type: "button",
 				"aria-label": e.dismissLabel,
 				class: "glim-btn-bare glim-toast-dismiss",
 				onClick: (e) => n("dismiss", t.id)
-			}, [S(F(i), { mark: F(fe).dismiss }, null, 8, ["mark"])], 8, pn)
-		], 40, dn))), 128))]));
+			}, [E(V(o), { mark: V(ge).dismiss }, null, 8, ["mark"])], 8, kr)
+		], 40, Dr))), 128))]));
 	}
-}), hn = { class: "glim-toggle" }, gn = {
+}), jr = { class: "glim-toggle" }, Mr = {
 	key: 0,
 	class: "glim-toggle-label"
-}, _n = [
+}, Nr = [
 	"aria-checked",
 	"aria-label",
 	"disabled"
-], vn = /* @__PURE__ */ C({
+], Pr = /* @__PURE__ */ D({
 	__name: "Toggle",
-	props: /*@__PURE__*/ ee({
+	props: /*@__PURE__*/ O({
 		label: {},
 		hideLabel: {
 			type: Boolean,
@@ -1237,8 +1842,8 @@ var ut = [
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = I(e, "modelValue");
-		return (n, r) => (k(), v("span", hn, [e.hideLabel ? _("", !0) : (k(), v("span", gn, P(e.label), 1)), y("button", {
+		let t = H(e, "modelValue");
+		return (n, r) => (P(), S("span", jr, [e.hideLabel ? x("", !0) : (P(), S("span", Mr, B(e.label), 1)), C("button", {
 			type: "button",
 			role: "switch",
 			"aria-checked": t.value,
@@ -1246,27 +1851,116 @@ var ut = [
 			disabled: e.disabled,
 			class: "glim-toggle-track",
 			onClick: r[0] ||= (e) => t.value = !t.value
-		}, [...r[1] ||= [y("span", { class: "glim-toggle-thumb" }, null, -1)]], 8, _n)]));
+		}, [...r[1] ||= [C("span", { class: "glim-toggle-thumb" }, null, -1)]], 8, Nr)]));
 	}
-}), yn = { class: "glim-notice" }, bn = { class: "glim-notice-title" }, xn = { class: "glim-notice-reason" }, Sn = {
+}), Fr = { class: "glim-notice" }, Ir = { class: "glim-notice-title" }, Lr = { class: "glim-notice-reason" }, Rr = {
 	key: 0,
 	class: "glim-notice-action"
-}, Cn = /* @__PURE__ */ C({
+}, zr = /* @__PURE__ */ D({
 	__name: "UnavailableNotice",
 	props: { title: {} },
 	setup(e) {
-		return (t, n) => (k(), v("div", yn, [
-			y("p", bn, P(e.title), 1),
-			y("p", xn, [j(t.$slots, "default")]),
-			t.$slots.action ? (k(), v("div", Sn, [j(t.$slots, "action")])) : _("", !0)
+		return (t, n) => (P(), S("div", Fr, [
+			C("p", Ir, B(e.title), 1),
+			C("p", Lr, [L(t.$slots, "default")]),
+			t.$slots.action ? (P(), S("div", Rr, [L(t.$slots, "action")])) : x("", !0)
 		]));
 	}
+}), Br = ["aria-labelledby"], Vr = ["id"], Hr = { class: "glim-modal-body glim-window-body" }, Ur = {
+	key: 0,
+	class: "glim-modal-foot"
+}, Wr = {
+	key: 0,
+	class: "glim-window-start"
+}, Gr = /* @__PURE__ */ D({
+	inheritAttrs: !1,
+	__name: "Window",
+	props: {
+		title: {},
+		actions: { default: () => [] },
+		start: {},
+		size: { default: "normal" },
+		text: {}
+	},
+	emits: ["close"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = ae(), a = z(null), o = ie(), s = Pe(), c = y(() => n.start !== void 0 || !!i.start), l = y(() => kt(n.actions, c.value, {
+			cancel: {
+				label: n.text.cancel,
+				labelKey: "common.cancel",
+				glyph: h,
+				wayOut: !0
+			},
+			close: {
+				label: n.text.close,
+				labelKey: "common.close",
+				glyph: p,
+				wayOut: !0
+			}
+		})), u;
+		M(() => {
+			u = ht(() => a.value, () => r("close")), a.value && Ot(a.value)?.focus();
+		}), ne(() => {
+			u?.(), rt(s);
+		});
+		function d(e) {
+			e.onClick?.() !== !1 && r("close");
+		}
+		function f() {
+			Ve() || r("close");
+		}
+		return (t, n) => (P(), b(v, { to: "body" }, [C("div", {
+			class: "glim-modal-backdrop",
+			onMousedown: G(f, ["self"])
+		}, [C("div", k(t.$attrs, {
+			ref_key: "card",
+			ref: a,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": V(o),
+			class: [
+				"glim-modal-card",
+				"glim-window",
+				e.size !== "normal" && `glim-window--${e.size}`
+			]
+		}), [
+			C("h2", {
+				id: V(o),
+				class: "glim-window-title"
+			}, [E(Y, {
+				tone: "heading",
+				size: "heading",
+				wrap: "",
+				"inset-start": 5
+			}, {
+				default: W(() => [T(B(e.title), 1)]),
+				_: 1
+			})], 8, Vr),
+			C("div", Hr, [L(t.$slots, "default")]),
+			l.value.length ? (P(), S("div", Ur, [c.value ? (P(), S("span", Wr, [L(t.$slots, "start", {}, () => [T(B(e.start), 1)])])) : x("", !0), (P(!0), S(_, null, I(l.value, (e, t) => (P(), b(Z, {
+				key: t,
+				label: e.label,
+				"label-key": e.labelKey,
+				glyph: e.glyph,
+				tone: e.primary ? "accent" : "neutral",
+				disabled: e.disabled,
+				onClick: (t) => d(e)
+			}, null, 8, [
+				"label",
+				"label-key",
+				"glyph",
+				"tone",
+				"disabled",
+				"onClick"
+			]))), 128))])) : x("", !0)
+		], 16, Br)], 32)]));
+	}
 });
 // src/confirm.ts
-function wn(e) {
-	let t = N(null), n = N(null), r = null, i = null;
+function Kr(e) {
+	let t = z(null), n = z(null), r = null, i = null;
 	function a(e, n) {
-		return i = Ce(), new Promise((i) => {
+		return i = Pe(), new Promise((i) => {
 			r = i, t.value = {
 				message: e,
 				...n
@@ -1274,17 +1968,17 @@ function wn(e) {
 		});
 	}
 	function o(e) {
-		r?.(e), r = null, t.value = null, Me(i), i = null;
+		r?.(e), r = null, t.value = null, rt(i), i = null;
 	}
 	let s = () => o(!1);
-	return L(t, (e, t, r) => {
-		e && r(Ye(() => n.value, s));
+	return U(t, (e, t, r) => {
+		e && r(Ct(() => n.value, s));
 	}), {
 		confirm: a,
 		dismiss: s,
-		ConfirmHost: C(() => () => {
+		ConfirmHost: D(() => () => {
 			let r = t.value;
-			return r ? w(m, { to: "body" }, [w(xt, {
+			return r ? ee(v, { to: "body" }, [ee(cn, {
 				ref: (e) => n.value = e?.card ?? null,
 				title: e.title,
 				message: r.message,
@@ -1294,8 +1988,8 @@ function wn(e) {
 				cancelLabel: e.cancel,
 				onConfirm: () => o(!0),
 				onCancel: () => o(!1)
-			}, r.extra ? { extra: () => w(r.extra) } : void 0)]) : null;
+			}, r.extra ? { extra: () => ee(r.extra) } : void 0)]) : null;
 		})
 	};
 }
-export { K as Badge, it as BrandMark, Y as Button, Z as Card, xt as ConfirmDialog, Tt as EmptyState, de as GLIMSTONE_VERSION, d as IconCancel, s as IconCheck, l as IconClose, a as IconExpand, tt as IconTipButton, r as IconWindowMaximise, c as IconWindowMinimise, u as IconWindowRestore, Ft as InfoAboutCard, X as InfoBubble, Rt as InfoHelpCard, qt as InfoTile, $ as InfoVersionCard, i as MarkSvg, Yt as NumberField, Q as ReadmeButton, tn as Selector, an as SidebarRow, ln as SubCard, mn as ToastViewport, vn as Toggle, Cn as UnavailableNotice, o as glyphFor, ze as selectorTabId, f as setGlyphResolver, lt as useAccent, wn as useConfirm, ot as useHue, q as useLabelMode, ct as useMotion, at as useRainbow, st as useShape, t as useTipBubble };
+export { Y as Badge, Nt as BrandMark, Z as Button, Gt as Card, Yt as Checkbox, en as ColorPicker, cn as ConfirmDialog, Cn as ContextMenu, Dn as CopyField, jn as EmptyState, he as GLIMSTONE_VERSION, h as IconCancel, u as IconCheck, p as IconClose, s as IconCopy, r as IconExpand, d as IconEye, m as IconEyeOff, i as IconPencil, J as IconTipButton, c as IconWindowMaximise, g as IconWindowMinimise, a as IconWindowRestore, Vn as InfoAboutCard, Q as InfoBubble, Wn as InfoHelpCard, er as InfoTile, $n as InfoVersionCard, un as Kbd, o as MarkSvg, rr as MenuBar, ar as Meter, sr as NumberField, lr as PasswordField, ur as Pill, fr as ProgressBar, $ as ReadmeButton, vr as Selector, xr as SidebarRow, Tr as SubCard, Ar as ToastViewport, Pr as Toggle, zr as UnavailableNotice, Gr as Window, f as glyphFor, ut as selectorTabId, l as setGlyphResolver, zt as useAccent, Kr as useConfirm, Ft as useHue, X as useLabelMode, Rt as useMotion, Pt as useRainbow, Lt as useShape, t as useTipBubble };