@glimstone/vue 0.0.0-stage → 4.0.0

package/dist/Select.js

@@ -0,0 +1,444 @@
+import { i as e, n as t } from "./glyphs-CvCRgBMU.js";
+import { n, r, t as i } from "./TipWrap-rNAEgvb0.js";
+import { Fragment as a, Teleport as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, guardReactiveProps as m, mergeModels as h, mergeProps as g, normalizeClass as _, normalizeProps as v, onMounted as y, onScopeDispose as b, openBlock as x, renderList as S, resolveDynamicComponent as C, shallowRef as w, toDisplayString as T, unref as E, useId as D, useModel as O, watch as k, withCtx as A } from "vue";
+import { SELECT_POSITIONING as j, closeOnPageMove as M, defaultWidth as N, enableWheelStep as P, faceLabels as F, flattenRuns as I, hasSubmenu as L, homeRow as R, isSubmenu as z, pageDir as B, readPortalHue as V, selectContentClass as H, selectRootClass as U, selectTriggerClass as W, shake as G, wheelValue as K } from "@glimstone/core";
+import * as q from "@zag-js/select";
+import { normalizeProps as J, useMachine as Y } from "@zag-js/vue";
+import * as X from "@zag-js/menu";
+// src/SelectFace.vue?vue&type=script&setup=true&lang.ts
+var ee = {
+	key: 0,
+	class: "glim-select-glyph"
+}, te = { class: "glim-select-value" }, ne = ["aria-hidden"], Z = /* @__PURE__ */ p({
+	__name: "SelectFace",
+	props: {
+		all: {},
+		value: {},
+		placeholder: {},
+		width: {},
+		glyphs: { type: Boolean }
+	},
+	setup(e) {
+		let t = e, n = s(() => F(t.all, t.value, t.placeholder, t.width)), r = s(() => t.all.find((e) => e.value === t.value)?.glyph);
+		return (t, i) => (x(), u(a, null, [e.glyphs ? (x(), u("span", ee, [r.value ? (x(), c(C(r.value), { key: 0 })) : l("", !0)])) : l("", !0), d("span", te, [(x(!0), u(a, null, S(n.value.labels, (e) => (x(), u("span", {
+			key: e,
+			"aria-hidden": e !== n.value.text || void 0,
+			class: _(e === n.value.text ? void 0 : "glim-select-ghost")
+		}, T(e), 11, ne))), 128))])], 64));
+	}
+});
+// src/selectParts.ts
+function Q(e, t) {
+	let n = w(null);
+	return k(e, (e) => n.value = e && t.value ? V(t.value) : null, { flush: "sync" }), {
+		style: s(() => n.value ?? void 0),
+		className: s(() => n.value ? "glim-hue" : "")
+	};
+}
+function $(e, t) {
+	let n;
+	k(e, (e) => {
+		n?.(), n = e ? P(e, (e) => {
+			if (t.inert()) return;
+			let n = K(t.all(), t.value(), e);
+			n !== void 0 && t.onChange(n);
+		}) : void 0;
+	}, { immediate: !0 }), k(t.shakeCount, (t, n, r) => {
+		e.value && t > 0 && r(G(e.value));
+	}), b(() => n?.());
+}
+// src/ListSelect.vue?vue&type=script&setup=true&lang.ts
+var re = ["aria-busy", "aria-describedby"], ie = {
+	key: 0,
+	class: "glim-select-glyph"
+}, ae = /* @__PURE__ */ p({
+	__name: "ListSelect",
+	props: {
+		label: {},
+		hideLabel: { type: Boolean },
+		groups: {},
+		value: {},
+		placeholder: {},
+		width: {},
+		triggerClass: {},
+		id: {},
+		disabled: { type: Boolean },
+		busy: { type: Boolean },
+		tip: {},
+		shake: {}
+	},
+	emits: ["change"],
+	setup(p, { expose: h, emit: _ }) {
+		let y = p, b = _, O = D(), N = s(() => I(y.groups)), P = s(() => N.value.some((e) => e.glyph)), F = s(() => q.collection({
+			items: N.value,
+			itemToValue: (e) => e.value,
+			itemToString: (e) => e.label,
+			isItemDisabled: (e) => !!e.disabled
+		})), L = Y(q.machine, s(() => ({
+			id: O,
+			ids: y.id ? { trigger: y.id } : void 0,
+			dir: B(),
+			collection: F.value,
+			value: y.value === null ? [] : [y.value],
+			disabled: y.disabled,
+			readOnly: y.busy,
+			onValueChange: (e) => {
+				let t = e.value[0];
+				t !== void 0 && t !== y.value && b("change", t);
+			},
+			positioning: j
+		}))), R = s(() => q.connect(L, J)), z = w(null), V = r(() => y.tip, () => !!y.disabled);
+		$(z, {
+			all: () => N.value,
+			value: () => y.value,
+			inert: () => !!(y.disabled || y.busy),
+			onChange: (e) => b("change", e),
+			shakeCount: () => y.shake ?? 0
+		}), k(() => R.value.open, (e, t, n) => {
+			e && n(M(() => R.value.setOpen(!1)));
+		});
+		let W = Q(() => R.value.open, z);
+		function G(e) {
+			z.value = e, V.trigger.value = z.value;
+		}
+		return h({ trigger: z }), (r, s) => (x(), u("div", g(R.value.getRootProps(), { class: E(U)(p.width) }), [
+			d("label", g(R.value.getLabelProps(), { class: p.hideLabel ? "glim-sr-only" : "glim-field-label" }), T(p.label), 17),
+			d("div", v(m(R.value.getControlProps())), [f(E(i), {
+				on: !!p.disabled && !!p.tip,
+				show: E(V).show,
+				hide: E(V).hide
+			}, {
+				default: A(() => [d("button", g(R.value.getTriggerProps(), {
+					ref: G,
+					"aria-busy": p.busy || void 0,
+					"aria-describedby": E(V).describedBy.value,
+					class: p.triggerClass,
+					onMouseenter: s[0] ||= (...e) => E(V).show && E(V).show(...e),
+					onMouseleave: s[1] ||= (...e) => E(V).hide && E(V).hide(...e),
+					onFocus: s[2] ||= (...e) => E(V).showOnFocus && E(V).showOnFocus(...e),
+					onBlur: s[3] ||= (...e) => E(V).hide && E(V).hide(...e)
+				}), [f(Z, {
+					all: N.value,
+					value: p.value,
+					placeholder: p.placeholder,
+					width: p.width,
+					glyphs: P.value
+				}, null, 8, [
+					"all",
+					"value",
+					"placeholder",
+					"width",
+					"glyphs"
+				]), d("span", g(R.value.getIndicatorProps(), { class: "glim-select-indicator" }), [f(E(e))], 16)], 16, re)]),
+				_: 1
+			}, 8, [
+				"on",
+				"show",
+				"hide"
+			])], 16),
+			f(n, { state: E(V) }, null, 8, ["state"]),
+			(x(), c(o, { to: "body" }, [d("div", g(R.value.getPositionerProps(), {
+				style: E(W).style.value,
+				class: ["glim-select-positioner", E(W).className.value]
+			}), [d("div", g(R.value.getContentProps(), { class: E(H)(P.value) }), [(x(!0), u(a, null, S(p.groups, (e, n) => (x(), u(a, { key: n }, [e.entries.length > 0 ? (x(), u("div", g({
+				key: 0,
+				ref_for: !0
+			}, e.heading ? R.value.getItemGroupProps({ id: `${E(O)}-g${n}` }) : {}, { class: "glim-select-group" }), [e.heading ? (x(), u("div", g({
+				key: 0,
+				ref_for: !0
+			}, R.value.getItemGroupLabelProps({ htmlFor: `${E(O)}-g${n}` }), { class: "glim-select-heading" }), T(e.heading), 17)) : l("", !0), (x(!0), u(a, null, S(e.entries, (e) => (x(), u("div", g({ key: e.value }, { ref_for: !0 }, R.value.getItemProps({ item: e }), { class: "glim-select-item" }), [
+				P.value ? (x(), u("span", ie, [e.glyph ? (x(), c(C(e.glyph), { key: 0 })) : l("", !0)])) : l("", !0),
+				d("span", g({ ref_for: !0 }, R.value.getItemTextProps({ item: e }), { class: "glim-select-label" }), T(e.label), 17),
+				d("span", g({ ref_for: !0 }, R.value.getItemIndicatorProps({ item: e }), { class: "glim-select-check" }), [f(E(t))], 16)
+			], 16))), 128))], 16)) : l("", !0)], 64))), 128))], 16)], 16)])),
+			d("select", v(m(R.value.getHiddenSelectProps())), null, 16)
+		], 16));
+	}
+}), oe = {
+	key: 0,
+	class: "glim-select-glyph"
+}, se = ["data-state"], ce = /* @__PURE__ */ p({
+	__name: "MenuChoice",
+	props: {
+		api: {},
+		option: {},
+		value: {},
+		glyphs: { type: Boolean }
+	},
+	emits: ["change"],
+	setup(e, { emit: n }) {
+		let r = e, i = n, a = s(() => r.option.value === r.value), o = s(() => ({
+			type: "radio",
+			value: r.option.value,
+			valueText: r.option.label,
+			checked: a.value,
+			disabled: r.option.disabled,
+			onCheckedChange: () => {
+				a.value || i("change", r.option.value);
+			}
+		}));
+		return (n, r) => (x(), u("div", g(e.api.getOptionItemProps(o.value), { class: "glim-select-item" }), [
+			e.glyphs ? (x(), u("span", oe, [e.option.glyph ? (x(), c(C(e.option.glyph), { key: 0 })) : l("", !0)])) : l("", !0),
+			d("span", g(e.api.getItemTextProps(o.value), { class: "glim-select-label" }), T(e.option.label), 17),
+			d("span", {
+				"aria-hidden": "true",
+				"data-state": a.value ? "checked" : "unchecked",
+				class: "glim-select-check"
+			}, [f(E(t))], 8, se)
+		], 16));
+	}
+}), le = {
+	key: 0,
+	class: "glim-select-glyph"
+}, ue = { class: "glim-select-label" }, de = {
+	"aria-hidden": "true",
+	class: "glim-select-caret"
+}, fe = /* @__PURE__ */ p({
+	__name: "MenuSubmenu",
+	props: {
+		parent: {},
+		parentApi: {},
+		triggerId: {},
+		entry: {},
+		value: {},
+		glyphs: { type: Boolean },
+		hueStyle: {},
+		hueClass: {}
+	},
+	emits: ["change"],
+	setup(t, { emit: n }) {
+		let r = t, i = n, p = Y(X.machine, {
+			id: D(),
+			ids: { trigger: r.triggerId },
+			dir: B(),
+			"aria-label": r.entry.label
+		}), m = s(() => X.connect(p, J));
+		return y(() => {
+			r.parentApi.setChild(p), m.value.setParent(r.parent);
+		}), (n, r) => (x(), u(a, null, [d("div", g(t.parentApi.getTriggerItemProps(m.value), { class: "glim-select-item" }), [
+			t.glyphs ? (x(), u("span", le, [t.entry.glyph ? (x(), c(C(t.entry.glyph), { key: 0 })) : l("", !0)])) : l("", !0),
+			d("span", ue, T(t.entry.label), 1),
+			d("span", de, [f(E(e))])
+		], 16), (x(), c(o, { to: "body" }, [d("div", g(m.value.getPositionerProps(), {
+			style: t.hueStyle,
+			class: ["glim-select-positioner", t.hueClass]
+		}), [d("div", g(m.value.getContentProps(), { class: E(H)(t.glyphs) }), [(x(!0), u(a, null, S(t.entry.options, (e) => (x(), c(ce, {
+			key: e.value,
+			api: m.value,
+			option: e,
+			value: t.value,
+			glyphs: t.glyphs,
+			onChange: r[0] ||= (e) => i("change", e)
+		}, null, 8, [
+			"api",
+			"option",
+			"value",
+			"glyphs"
+		]))), 128))], 16)], 16)]))], 64));
+	}
+}), pe = {
+	key: 0,
+	"aria-hidden": "true",
+	class: "glim-field-label"
+}, me = [
+	"disabled",
+	"data-disabled",
+	"data-readonly",
+	"aria-busy",
+	"aria-label",
+	"aria-describedby"
+], he = /* @__PURE__ */ p({
+	__name: "MenuSelect",
+	props: {
+		label: {},
+		hideLabel: { type: Boolean },
+		groups: {},
+		value: {},
+		placeholder: {},
+		width: {},
+		triggerClass: {},
+		id: {},
+		disabled: { type: Boolean },
+		busy: { type: Boolean },
+		tip: {},
+		shake: {}
+	},
+	emits: ["change"],
+	setup(t, { expose: p, emit: m }) {
+		let h = t, v = m, y = D(), b = Y(X.machine, s(() => ({
+			id: y,
+			ids: h.id ? { trigger: h.id } : void 0,
+			dir: B(),
+			"aria-label": h.label,
+			positioning: j
+		}))), C = s(() => X.connect(b, J)), O = s(() => I(h.groups)), N = s(() => O.value.some((e) => e.glyph)), P = s(() => F(O.value, h.value, h.placeholder, h.width).text), L = (e, t) => `${y}-sub-${e}-${t}`, V = w(null), W = r(() => h.tip, () => !!h.disabled);
+		$(V, {
+			all: () => O.value,
+			value: () => h.value,
+			inert: () => !!(h.disabled || h.busy),
+			onChange: (e) => v("change", e),
+			shakeCount: () => h.shake ?? 0
+		});
+		let G = Q(() => C.value.open, V);
+		k(() => C.value.open, (e, t, n) => {
+			if (!e) return;
+			n(M(() => C.value.setOpen(!1)));
+			let r = R(h.groups, h.value, L);
+			if (r === null) return;
+			let i = 0, a = requestAnimationFrame(() => {
+				i = requestAnimationFrame(() => C.value.setHighlightedValue(r));
+			});
+			n(() => {
+				cancelAnimationFrame(a), cancelAnimationFrame(i);
+			});
+		});
+		let K = s(() => {
+			let e = C.value.getTriggerProps(), t = (t) => (n) => {
+				h.busy ? n.preventDefault() : e[t]?.(n);
+			};
+			return {
+				...e,
+				onPointerdown: t("onPointerdown"),
+				onClick: t("onClick"),
+				onKeydown: t("onKeydown")
+			};
+		});
+		function q(e) {
+			V.value = e, W.trigger.value = V.value;
+		}
+		return p({ trigger: V }), (r, s) => (x(), u("div", { class: _(E(U)(t.width)) }, [
+			t.hideLabel ? l("", !0) : (x(), u("span", pe, T(t.label), 1)),
+			d("div", null, [f(E(i), {
+				on: !!t.disabled && !!t.tip,
+				show: E(W).show,
+				hide: E(W).hide
+			}, {
+				default: A(() => [d("button", g(K.value, {
+					ref: q,
+					disabled: t.disabled,
+					"data-disabled": t.disabled ? "" : void 0,
+					"data-readonly": t.busy ? "" : void 0,
+					"aria-busy": t.busy || void 0,
+					"aria-label": `${t.label}: ${P.value}`,
+					"aria-describedby": E(W).describedBy.value,
+					class: t.triggerClass,
+					onMouseenter: s[0] ||= (...e) => E(W).show && E(W).show(...e),
+					onMouseleave: s[1] ||= (...e) => E(W).hide && E(W).hide(...e),
+					onFocus: s[2] ||= (...e) => E(W).showOnFocus && E(W).showOnFocus(...e),
+					onBlur: s[3] ||= (...e) => E(W).hide && E(W).hide(...e)
+				}), [f(Z, {
+					all: O.value,
+					value: t.value,
+					placeholder: t.placeholder,
+					width: t.width,
+					glyphs: N.value
+				}, null, 8, [
+					"all",
+					"value",
+					"placeholder",
+					"width",
+					"glyphs"
+				]), d("span", g(C.value.getIndicatorProps(), { class: "glim-select-indicator" }), [f(E(e))], 16)], 16, me)]),
+				_: 1
+			}, 8, [
+				"on",
+				"show",
+				"hide"
+			])]),
+			f(n, { state: E(W) }, null, 8, ["state"]),
+			(x(), c(o, { to: "body" }, [d("div", g(C.value.getPositionerProps(), {
+				style: E(G).style.value,
+				class: ["glim-select-positioner", E(G).className.value]
+			}), [d("div", g(C.value.getContentProps(), { class: E(H)(N.value) }), [(x(!0), u(a, null, S(t.groups, (e, n) => (x(), u(a, { key: n }, [e.entries.length > 0 ? (x(), u("div", g({
+				key: 0,
+				ref_for: !0
+			}, e.heading ? C.value.getItemGroupProps({ id: `g${n}` }) : {}, { class: "glim-select-group" }), [e.heading ? (x(), u("div", g({
+				key: 0,
+				ref_for: !0
+			}, C.value.getItemGroupLabelProps({ htmlFor: `g${n}` }), { class: "glim-select-heading" }), T(e.heading), 17)) : l("", !0), (x(!0), u(a, null, S(e.entries, (e, r) => (x(), u(a, { key: E(z)(e) ? `s${r}` : e.value }, [E(z)(e) ? (x(), c(fe, {
+				key: 0,
+				parent: E(b),
+				"parent-api": C.value,
+				"trigger-id": L(n, r),
+				entry: e,
+				value: t.value,
+				glyphs: N.value,
+				"hue-style": E(G).style.value,
+				"hue-class": E(G).className.value,
+				onChange: s[4] ||= (e) => v("change", e)
+			}, null, 8, [
+				"parent",
+				"parent-api",
+				"trigger-id",
+				"entry",
+				"value",
+				"glyphs",
+				"hue-style",
+				"hue-class"
+			])) : (x(), c(ce, {
+				key: 1,
+				api: C.value,
+				option: e,
+				value: t.value,
+				glyphs: N.value,
+				onChange: s[5] ||= (e) => v("change", e)
+			}, null, 8, [
+				"api",
+				"option",
+				"value",
+				"glyphs"
+			]))], 64))), 128))], 16)) : l("", !0)], 64))), 128))], 16)], 16)]))
+		], 2));
+	}
+}), ge = /* @__PURE__ */ p({
+	__name: "Select",
+	props: /*@__PURE__*/ h({
+		label: {},
+		hideLabel: {
+			type: Boolean,
+			default: !1
+		},
+		options: {},
+		groups: {},
+		placeholder: {},
+		width: {},
+		size: { default: "field" },
+		wrap: {
+			type: Boolean,
+			default: !1
+		},
+		id: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		busy: {
+			type: Boolean,
+			default: !1
+		},
+		tip: {},
+		shake: {}
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let t = e, n = O(e, "modelValue"), r = s(() => t.groups ?? [{ entries: t.options ?? [] }]), i = s(() => ({
+			label: t.label,
+			hideLabel: t.hideLabel,
+			groups: r.value,
+			value: n.value,
+			placeholder: t.placeholder,
+			width: t.width ?? N(t.size),
+			triggerClass: W(t.size, t.wrap),
+			id: t.id,
+			disabled: t.disabled,
+			busy: t.busy,
+			tip: t.tip,
+			shake: t.shake
+		}));
+		return (e, t) => E(L)(r.value) ? (x(), c(he, g({ key: 0 }, i.value, { onChange: t[0] ||= (e) => n.value = e }), null, 16)) : (x(), c(ae, g({ key: 1 }, i.value, { onChange: t[1] ||= (e) => n.value = e }), null, 16));
+	}
+});
+export { ge as Select };

package/dist/Select.vue.d.ts

@@ -0,0 +1,50 @@
+import { type SelectSize, type SelectWidth } from "@glimstone/core";
+import type { SelectGroup, SelectOption } from "./selectParts";
+declare const __VLS_export: <T extends string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
+        /** The field's name, always the accessible name. */
+        label: string;
+        /** Draw the label off screen, for a settings row that names the field at its start. */
+        hideLabel?: boolean;
+        /** Every choice, in list order, for a list without groups. */
+        options?: SelectOption<T>[];
+        /** The list in runs, with headings and submenus. */
+        groups?: SelectGroup<T>[];
+        /** Shown while the value is null. */
+        placeholder?: string;
+        /** Defaults to `fill` for a field and to `steady` for the smaller sizes. */
+        width?: SelectWidth;
+        size?: SelectSize;
+        /** Lets a long value run onto a second line, for one whose end says as much as its start. */
+        wrap?: boolean;
+        /** The trigger's id, for a `<label for>` outside the select. */
+        id?: string;
+        disabled?: boolean;
+        /** A choice is out and its answer not back yet: the trigger keeps its focus but takes no input. */
+        busy?: boolean;
+        /** A hover bubble, for a trigger with no label beside it whose value does not say what it picks. */
+        tip?: string;
+        /** The caller's failure counter. Each bump shakes the trigger once, as the value snaps back. */
+        shake?: number;
+    } & {
+        /** Null when there is no one value, such as over a selection whose rows disagree. */
+        modelValue: T | null;
+    }) & {
+        "onUpdate:modelValue"?: ((value: T | null) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:modelValue", value: T | null) => void;
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/SelectFace.vue.d.ts

@@ -0,0 +1,26 @@
+import { type SelectWidth } from "@glimstone/core";
+import type { SelectOption } from "./selectParts";
+declare const __VLS_export: <T extends string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        all: SelectOption<T>[];
+        value: T | null;
+        placeholder?: string;
+        width: SelectWidth;
+        glyphs: boolean;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/Selector.vue.d.ts

@@ -0,0 +1,55 @@
+import { type SelectMode, type SelectorActivation, type SelectorOrientation, type SelectorSize, type SelectorVariant } from "@glimstone/core";
+import type { SelectorItem } from "./selectorItem";
+type __VLS_Props = {
+    items: SelectorItem[];
+    /** The accessible name of the strip, such as "Sort" or "Settings pages". */
+    label: string;
+    select?: SelectMode;
+    /** `vertical` is the column of tiles beside a settings area's pages. */
+    orientation?: SelectorOrientation;
+    size?: SelectorSize;
+    variant?: SelectorVariant;
+    /** "manual" moves the focus and chooses on Space, Enter or a click, for a strip that saves a setting. */
+    activation?: SelectorActivation;
+    /** Pin every segment to the widest one's measured width; the page-level picker. */
+    equalWidth?: boolean;
+    /** Hug the segments, for a strip that shares a toolbar row. */
+    inline?: boolean;
+    /** Keep every segment on one row, for page tabs. */
+    fit?: boolean;
+    /** Below 600px, two segments to a row with labels that wrap. */
+    pairsOnPhone?: boolean;
+    /** The button height for every segment, for a strip beside a Button. */
+    buttonHeight?: boolean;
+    /** Take a colour under rainbow. */
+    hue?: boolean;
+    /** Makes the strip a tab strip for colour, each segment keeping its own position from here. */
+    hueOffset?: number;
+    disabled?: boolean;
+    /** The id of the panel a tab strip switches. */
+    panelId?: string;
+};
+type __VLS_ModelProps = {
+    modelValue: string | null | string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[] | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | string[] | null) => any) | undefined;
+}>, {
+    disabled: boolean;
+    select: SelectMode;
+    size: SelectorSize;
+    variant: SelectorVariant;
+    inline: boolean;
+    orientation: SelectorOrientation;
+    equalWidth: boolean;
+    buttonHeight: boolean;
+    pairsOnPhone: boolean;
+    hue: boolean;
+    activation: SelectorActivation;
+    fit: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/SelectorSegment.vue.d.ts

@@ -0,0 +1,28 @@
+import { type SelectorOrientation, type SelectorSize, type SelectorVariant, type SelectorView } from "@glimstone/core";
+import type { SelectorItem } from "./selectorItem";
+type __VLS_Props = {
+    item: SelectorItem;
+    index: number;
+    strip: SelectorView;
+    on: boolean;
+    disabled: boolean;
+    roved: boolean;
+    share: Record<string, string>;
+    squeezed: boolean;
+    orientation: SelectorOrientation;
+    size: SelectorSize;
+    variant: SelectorVariant;
+    equalWidth: boolean;
+    buttonHeight: boolean;
+    pairsOnPhone: boolean;
+    hue: boolean;
+    hueOffset?: number;
+    panelId?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/SidebarRow.vue.d.ts

@@ -0,0 +1,22 @@
+import { type Component } from "vue";
+type __VLS_Props = {
+    /** The destination's name: shown, or hidden but still the link's name. */
+    label: string;
+    /** Without one the row shows its name in every mode. */
+    glyph?: Component;
+    href: string;
+    /** This destination is showing; the row is filled and marked as the current page. */
+    active?: boolean;
+    /** The row's rank among the rows the rail shows. */
+    hueIndex?: number;
+    /** The figure on the row, with the figure in words as `label`. Nothing shows at zero. */
+    count?: {
+        value: number;
+        label: string;
+    };
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    active: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/Slider.js

@@ -0,0 +1,36 @@
+import { Fragment as e, computed as t, createElementBlock as n, createElementVNode as r, defineComponent as i, mergeModels as a, mergeProps as o, openBlock as s, renderList as c, toDisplayString as l, useId as u, useModel as d } from "vue";
+import { normalizeProps as f, useMachine as p } from "@zag-js/vue";
+import * as m from "@zag-js/slider";
+// src/Slider.vue?vue&type=script&setup=true&lang.ts
+var h = { class: "glim-slider-head" }, g = /* @__PURE__ */ i({
+	__name: "Slider",
+	props: /*@__PURE__*/ a({
+		label: {},
+		min: {},
+		max: {},
+		step: { default: 1 },
+		format: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(i) {
+		let a = i, g = d(i, "modelValue"), _ = u(), v = p(m.machine, t(() => ({
+			id: _,
+			value: [g.value],
+			min: a.min,
+			max: a.max,
+			step: a.step,
+			disabled: a.disabled,
+			onValueChange: (e) => g.value = e.value[0],
+			getAriaValueText: (e) => a.format(e.value)
+		}))), y = t(() => m.connect(v, f));
+		return (t, a) => (s(), n("div", o(y.value.getRootProps(), { class: "glim-slider" }), [r("div", h, [r("label", o(y.value.getLabelProps(), { class: "glim-field-label" }), l(i.label), 17), r("output", o(y.value.getValueTextProps(), { class: "glim-slider-value" }), l(i.format(y.value.value[0])), 17)]), r("div", o(y.value.getControlProps(), { class: "glim-slider-control" }), [r("div", o(y.value.getTrackProps(), { class: "glim-slider-track" }), [r("div", o(y.value.getRangeProps(), { class: "glim-slider-range" }), null, 16)], 16), (s(!0), n(e, null, c(y.value.value, (e, t) => (s(), n("div", o({ key: t }, { ref_for: !0 }, y.value.getThumbProps({ index: t }), { class: "glim-slider-thumb" }), [r("input", o({ ref_for: !0 }, y.value.getHiddenInputProps({ index: t })), null, 16)], 16))), 128))], 16)], 16));
+	}
+});
+export { g as Slider };