rei-kit 0.18.2 → 0.20.0

package/dist/index.js

@@ -1,9 +1,9 @@
-import { a as addDays, c as lastNDays, d as toDateKey, f as todayKey, i as needsIosInstall, l as leadingBlanks, n as isApplePortable, o as eachDayOfYear, r as isInstalled, s as fromDateKey, t as SettingsGroup_default, u as startOfWeek } from "./SettingsGroup-DtEB_Hrd.js";
-import { _ as toRedirectPath, a as FormField_default, c as useVisualViewport, d as isThemePreference, f as readStoredTheme, g as safeRedirect, h as tapFeedback, i as BaseInput_default, l as useOnline, m as useTheme, n as BaseCheckbox_default, o as BaseAlert_default, p as setThemeStorageKey, r as BaseSheet_default, s as useToast, t as GoogleButton_default, u as applyTheme } from "./GoogleButton-DV_RIpJE.js";
+import { a as addDays, c as lastNDays, d as toDateKey, f as todayKey, i as needsIosInstall, l as leadingBlanks, n as isApplePortable, o as eachDayOfYear, r as isInstalled, s as fromDateKey, t as SettingsGroup_default, u as startOfWeek } from "./SettingsGroup-JsD19V81.js";
+import { _ as toRedirectPath, a as FormField_default, c as useVisualViewport, d as isThemePreference, f as readStoredTheme, g as safeRedirect, h as tapFeedback, i as BaseInput_default, l as useOnline, m as useTheme, n as BaseCheckbox_default, o as BaseAlert_default, p as setThemeStorageKey, r as BaseSheet_default, s as useToast, t as GoogleButton_default, u as applyTheme } from "./GoogleButton-BKOezkZr.js";
 import { n as registerErrorMapper, r as toAppError, t as AppError } from "./app-error-DF9cijE0.js";
-import { n as BaseButton_default, t as SettingsRow_default } from "./SettingsRow-3lPRJbBZ.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
-import { Fragment, Teleport, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, onErrorCaptured, onMounted, onScopeDispose, openBlock, readonly, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useModel, vModelRadio, vModelSelect, vModelText, watch, watchEffect, withCtx, withDirectives } from "vue";
+import { n as BaseButton_default, t as SettingsRow_default } from "./SettingsRow-3lPRJbBZ.js";
+import { Fragment, Teleport, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onErrorCaptured, onMounted, onScopeDispose, openBlock, readonly, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useModel, vModelRadio, vModelSelect, vModelText, vShow, watch, watchEffect, withCtx, withDirectives, withModifiers } from "vue";
 import { ArrowDown, ArrowRight, ArrowUp, CheckCircle2, ChevronDown, Info, TriangleAlert, X, XCircle } from "lucide-vue-next";
 import { RouterLink } from "vue-router";
 import { createI18n } from "vue-i18n";
@@ -331,6 +331,77 @@ function useMediaQuery(query) {
 	return matches;
 }
 //#endregion
+//#region src/components/BaseAvatar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$21 = [
+	"role",
+	"aria-label",
+	"aria-hidden"
+];
+var _hoisted_2$18 = ["src"];
+var _hoisted_3$11 = {
+	key: 1,
+	class: "rk-avatar-initials"
+};
+var _hoisted_4$10 = {
+	key: 2,
+	viewBox: "0 0 20 20",
+	class: "rk-avatar-figure",
+	fill: "none",
+	stroke: "currentColor"
+};
+//#endregion
+//#region src/components/BaseAvatar.vue
+var BaseAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BaseAvatar",
+	props: {
+		name: { default: "" },
+		src: { default: "" },
+		size: { default: "md" },
+		fallback: { default: "figure" },
+		label: { default: "" }
+	},
+	setup(__props) {
+		const broken = ref(false);
+		watch(() => __props.src, () => broken.value = false);
+		const showImage = computed(() => Boolean(__props.src) && !broken.value);
+		/**
+		* Two letters at most, from the first and last word.
+		*
+		* `Array.from` rather than `slice`, so a name written in a script outside the
+		* basic plane is cut between characters rather than through one.
+		*/
+		const initials = computed(() => {
+			const words = __props.name.trim().split(/\s+/).filter(Boolean);
+			if (words.length === 0) return "";
+			return ((Array.from(words[0])[0] ?? "") + (words.length > 1 ? Array.from(words[words.length - 1])[0] ?? "" : "")).toUpperCase();
+		});
+		const accessibleName = computed(() => __props.label || __props.name);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", {
+				class: normalizeClass(["rk-avatar", `is-${__props.size}`]),
+				role: accessibleName.value ? "img" : void 0,
+				"aria-label": accessibleName.value || void 0,
+				"aria-hidden": accessibleName.value ? void 0 : "true"
+			}, [showImage.value ? (openBlock(), createElementBlock("img", {
+				key: 0,
+				src: __props.src,
+				alt: "",
+				class: "rk-avatar-img",
+				onError: _cache[0] || (_cache[0] = ($event) => broken.value = true)
+			}, null, 40, _hoisted_2$18)) : __props.fallback === "initials" && initials.value ? (openBlock(), createElementBlock("span", _hoisted_3$11, toDisplayString(initials.value), 1)) : (openBlock(), createElementBlock("svg", _hoisted_4$10, [..._cache[1] || (_cache[1] = [createElementVNode("circle", {
+				cx: "10",
+				cy: "6.75",
+				r: "3.25",
+				"stroke-width": "1.5"
+			}, null, -1), createElementVNode("path", {
+				d: "M3.75 17c0-3.05 2.8-5.25 6.25-5.25S16.25 13.95 16.25 17",
+				"stroke-width": "1.5",
+				"stroke-linecap": "round"
+			}, null, -1)])]))], 10, _hoisted_1$21);
+		};
+	}
+}), [["__scopeId", "data-v-47586bec"]]);
+//#endregion
 //#region src/components/BaseBadge.vue
 var BaseBadge_default = /* @__PURE__ */ defineComponent({
 	__name: "BaseBadge",
@@ -350,6 +421,123 @@ var BaseBadge_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/BaseMenu.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$20 = [
+	"aria-label",
+	"aria-expanded",
+	"aria-controls"
+];
+var _hoisted_2$17 = ["id"];
+//#endregion
+//#region src/components/BaseMenu.vue
+var BaseMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BaseMenu",
+	props: /*@__PURE__*/ mergeModels({
+		label: {},
+		align: { default: "end" }
+	}, {
+		"modelValue": {
+			type: Boolean,
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const open = useModel(__props, "modelValue");
+		const root = ref(null);
+		const panel = ref(null);
+		const trigger = ref(null);
+		const id = useId();
+		function items() {
+			if (!panel.value) return [];
+			return Array.from(panel.value.querySelectorAll("[role=\"menuitem\"]"));
+		}
+		function focusAt(index) {
+			const list = items();
+			if (list.length === 0) return;
+			list[(index + list.length) % list.length]?.focus();
+		}
+		function currentIndex() {
+			return items().indexOf(document.activeElement);
+		}
+		function onKeydown(event) {
+			if (!open.value) {
+				if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+					event.preventDefault();
+					open.value = true;
+				}
+				return;
+			}
+			switch (event.key) {
+				case "Escape":
+					event.preventDefault();
+					open.value = false;
+					break;
+				case "ArrowDown":
+					event.preventDefault();
+					focusAt(currentIndex() + 1);
+					break;
+				case "ArrowUp":
+					event.preventDefault();
+					focusAt(currentIndex() - 1);
+					break;
+				case "Home":
+					event.preventDefault();
+					focusAt(0);
+					break;
+				case "End":
+					event.preventDefault();
+					focusAt(items().length - 1);
+					break;
+				case "Tab": open.value = false;
+			}
+		}
+		function onDocumentPointer(event) {
+			if (root.value && !root.value.contains(event.target)) open.value = false;
+		}
+		watch(open, async (isOpen) => {
+			if (typeof document === "undefined") return;
+			if (isOpen) {
+				document.addEventListener("pointerdown", onDocumentPointer);
+				await nextTick();
+				items()[0]?.focus();
+			} else {
+				document.removeEventListener("pointerdown", onDocumentPointer);
+				if (root.value?.contains(document.activeElement)) trigger.value?.focus();
+			}
+		}, { immediate: true });
+		onBeforeUnmount(() => {
+			if (typeof document !== "undefined") document.removeEventListener("pointerdown", onDocumentPointer);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "root",
+				ref: root,
+				class: "rk-menu",
+				onKeydown
+			}, [createElementVNode("button", {
+				ref_key: "trigger",
+				ref: trigger,
+				type: "button",
+				class: "rk-menu-trigger",
+				"aria-label": __props.label,
+				"aria-expanded": open.value,
+				"aria-haspopup": true,
+				"aria-controls": open.value ? unref(id) : void 0,
+				onClick: _cache[0] || (_cache[0] = ($event) => open.value = !open.value)
+			}, [renderSlot(_ctx.$slots, "trigger", { open: open.value }, void 0, true)], 8, _hoisted_1$20), open.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				id: unref(id),
+				ref_key: "panel",
+				ref: panel,
+				class: normalizeClass(["rk-menu-panel", `is-${__props.align}`]),
+				role: "menu"
+			}, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 10, _hoisted_2$17)) : createCommentVNode("", true)], 544);
+		};
+	}
+}), [["__scopeId", "data-v-8ad05b3d"]]);
+//#endregion
 //#region src/components/BaseCard.vue
 var BaseCard_default = /* @__PURE__ */ defineComponent({
 	__name: "BaseCard",
@@ -415,14 +603,215 @@ var BaseCard_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/BaseCombobox.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$19 = ["for"];
+var _hoisted_2$16 = { class: "rk-combo-field" };
+var _hoisted_3$10 = [
+	"id",
+	"placeholder",
+	"disabled",
+	"aria-expanded",
+	"aria-activedescendant",
+	"aria-invalid",
+	"aria-describedby"
+];
+var _hoisted_4$9 = ["disabled"];
+var _hoisted_5$5 = ["aria-label"];
+var _hoisted_6$1 = [
+	"id",
+	"aria-selected",
+	"onPointerdown",
+	"onPointermove"
+];
+var _hoisted_7$1 = {
+	key: 0,
+	class: "rk-combo-empty"
+};
+//#endregion
+//#region src/components/BaseCombobox.vue
+var BaseCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BaseCombobox",
+	props: /*@__PURE__*/ mergeModels({
+		label: {},
+		options: {},
+		placeholder: { default: "" },
+		hint: { default: "" },
+		error: { default: "" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		emptyLabel: {}
+	}, {
+		"modelValue": { default: "" },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const model = useModel(__props, "modelValue");
+		const id = useId();
+		const listId = `${id}-list`;
+		const hintId = `${id}-hint`;
+		const errorId = `${id}-error`;
+		const optionId = (index) => `${id}-opt-${index}`;
+		const open = ref(false);
+		const query = ref("");
+		const highlighted = ref(0);
+		const root = ref(null);
+		const list = ref(null);
+		const selected = computed(() => __props.options.find((option) => option.value === model.value));
+		/** What the input shows: the query while typing, the chosen label otherwise. */
+		const text = computed({
+			get: () => open.value ? query.value : selected.value?.label ?? "",
+			set: (value) => {
+				query.value = value;
+				open.value = true;
+				highlighted.value = 0;
+			}
+		});
+		const matches = computed(() => {
+			const needle = query.value.trim().toLowerCase();
+			if (!open.value || needle === "") return __props.options;
+			return __props.options.filter((option) => option.label.toLowerCase().includes(needle));
+		});
+		const describedBy = computed(() => {
+			if (__props.error) return errorId;
+			if (__props.hint) return hintId;
+		});
+		function choose(option) {
+			if (!option) return;
+			model.value = option.value;
+			query.value = "";
+			open.value = false;
+		}
+		function move(delta) {
+			const count = matches.value.length;
+			if (count === 0) return;
+			open.value = true;
+			highlighted.value = (highlighted.value + delta + count) % count;
+			scrollHighlightIntoView();
+		}
+		async function scrollHighlightIntoView() {
+			await nextTick();
+			(list.value?.children[highlighted.value])?.scrollIntoView?.({ block: "nearest" });
+		}
+		function onKeydown(event) {
+			switch (event.key) {
+				case "ArrowDown":
+					event.preventDefault();
+					move(1);
+					break;
+				case "ArrowUp":
+					event.preventDefault();
+					move(-1);
+					break;
+				case "Enter":
+					if (!open.value) return;
+					event.preventDefault();
+					choose(matches.value[highlighted.value]);
+					break;
+				case "Escape":
+					event.preventDefault();
+					if (open.value) {
+						open.value = false;
+						query.value = "";
+					} else model.value = "";
+					break;
+				case "Tab": open.value = false;
+			}
+		}
+		function onDocumentPointer(event) {
+			if (root.value && !root.value.contains(event.target)) {
+				open.value = false;
+				query.value = "";
+			}
+		}
+		watch(open, (isOpen) => {
+			if (typeof document === "undefined") return;
+			if (isOpen) document.addEventListener("pointerdown", onDocumentPointer);
+			else document.removeEventListener("pointerdown", onDocumentPointer);
+		}, { immediate: true });
+		onBeforeUnmount(() => {
+			if (typeof document !== "undefined") document.removeEventListener("pointerdown", onDocumentPointer);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "root",
+				ref: root,
+				class: "rk-combo"
+			}, [
+				createElementVNode("label", {
+					for: unref(id),
+					class: "rk-combo-label"
+				}, toDisplayString(__props.label), 9, _hoisted_1$19),
+				createElementVNode("div", _hoisted_2$16, [withDirectives(createElementVNode("input", {
+					id: unref(id),
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => text.value = $event),
+					type: "text",
+					role: "combobox",
+					class: "rk-combo-input",
+					autocomplete: "off",
+					placeholder: __props.placeholder,
+					disabled: __props.disabled,
+					"aria-expanded": open.value,
+					"aria-controls": listId,
+					"aria-autocomplete": "list",
+					"aria-activedescendant": open.value ? optionId(highlighted.value) : void 0,
+					"aria-invalid": Boolean(__props.error),
+					"aria-describedby": describedBy.value,
+					onKeydown,
+					onFocus: _cache[1] || (_cache[1] = ($event) => open.value = true)
+				}, null, 40, _hoisted_3$10), [[vModelText, text.value]]), createElementVNode("button", {
+					type: "button",
+					class: "rk-combo-toggle",
+					tabindex: "-1",
+					"aria-hidden": "true",
+					disabled: __props.disabled,
+					onClick: _cache[2] || (_cache[2] = ($event) => open.value = !open.value)
+				}, " ▾ ", 8, _hoisted_4$9)]),
+				withDirectives(createElementVNode("ul", {
+					id: listId,
+					ref_key: "list",
+					ref: list,
+					role: "listbox",
+					class: "rk-combo-list",
+					"aria-label": __props.label
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(matches.value, (option, index) => {
+					return openBlock(), createElementBlock("li", {
+						id: optionId(index),
+						key: option.value,
+						role: "option",
+						class: normalizeClass(["rk-combo-option", {
+							"is-highlighted": index === highlighted.value,
+							"is-selected": option.value === model.value
+						}]),
+						"aria-selected": option.value === model.value,
+						onPointerdown: withModifiers(($event) => choose(option), ["prevent"]),
+						onPointermove: ($event) => highlighted.value = index
+					}, toDisplayString(option.label), 43, _hoisted_6$1);
+				}), 128)), matches.value.length === 0 ? (openBlock(), createElementBlock("li", _hoisted_7$1, toDisplayString(__props.emptyLabel), 1)) : createCommentVNode("", true)], 8, _hoisted_5$5), [[vShow, open.value]]),
+				__props.error ? (openBlock(), createElementBlock("p", {
+					key: 0,
+					id: errorId,
+					class: "rk-combo-error"
+				}, toDisplayString(__props.error), 1)) : __props.hint ? (openBlock(), createElementBlock("p", {
+					key: 1,
+					id: hintId,
+					class: "rk-combo-hint"
+				}, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)
+			], 512);
+		};
+	}
+}), [["__scopeId", "data-v-52b21155"]]);
+//#endregion
 //#region src/components/BaseRadioGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$14 = ["aria-describedby"];
-var _hoisted_2$11 = [
+var _hoisted_1$18 = ["aria-describedby"];
+var _hoisted_2$15 = [
 	"name",
 	"value",
 	"disabled"
 ];
-var _hoisted_3$6 = { class: "text-ink text-sm" };
+var _hoisted_3$9 = { class: "text-ink text-sm" };
 //#endregion
 //#region src/components/BaseRadioGroup.vue
 var BaseRadioGroup_default = /* @__PURE__ */ defineComponent({
@@ -467,7 +856,7 @@ var BaseRadioGroup_default = /* @__PURE__ */ defineComponent({
 						value: option.value,
 						disabled: option.disabled,
 						class: "accent-primary focus-visible:outline-primary size-4 shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2"
-					}, null, 8, _hoisted_2$11), [[vModelRadio, model.value]]), createElementVNode("span", _hoisted_3$6, toDisplayString(option.label), 1)], 2);
+					}, null, 8, _hoisted_2$15), [[vModelRadio, model.value]]), createElementVNode("span", _hoisted_3$9, toDisplayString(option.label), 1)], 2);
 				}), 128)),
 				__props.error ? (openBlock(), createElementBlock("p", {
 					key: 0,
@@ -478,24 +867,24 @@ var BaseRadioGroup_default = /* @__PURE__ */ defineComponent({
 					id: hintId,
 					class: "text-ink-soft text-xs"
 				}, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)
-			], 8, _hoisted_1$14);
+			], 8, _hoisted_1$18);
 		};
 	}
 });
 //#endregion
 //#region src/components/BaseSelect.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$13 = { class: "relative" };
-var _hoisted_2$10 = [
+var _hoisted_1$17 = { class: "relative" };
+var _hoisted_2$14 = [
 	"id",
 	"aria-invalid",
 	"aria-describedby"
 ];
-var _hoisted_3$5 = {
+var _hoisted_3$8 = {
 	key: 0,
 	value: void 0,
 	disabled: ""
 };
-var _hoisted_4$5 = ["value", "disabled"];
+var _hoisted_4$8 = ["value", "disabled"];
 //#endregion
 //#region src/components/BaseSelect.vue
 var BaseSelect_default = /* @__PURE__ */ defineComponent({
@@ -531,7 +920,7 @@ var BaseSelect_default = /* @__PURE__ */ defineComponent({
 				"label-hidden": __props.labelHidden,
 				size: __props.size
 			}, {
-				default: withCtx(({ id, describedBy, invalid }) => [createElementVNode("div", _hoisted_1$13, [withDirectives(createElementVNode("select", {
+				default: withCtx(({ id, describedBy, invalid }) => [createElementVNode("div", _hoisted_1$17, [withDirectives(createElementVNode("select", {
 					id,
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
 					"aria-invalid": invalid,
@@ -541,13 +930,13 @@ var BaseSelect_default = /* @__PURE__ */ defineComponent({
 						__props.variant === "unstyled" ? "" : SIZE_CLASS[__props.size],
 						__props.variant !== "unstyled" && invalid ? "border-negative" : ""
 					]])
-				}, [__props.placeholder ? (openBlock(), createElementBlock("option", _hoisted_3$5, toDisplayString(__props.placeholder), 1)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
+				}, [__props.placeholder ? (openBlock(), createElementBlock("option", _hoisted_3$8, toDisplayString(__props.placeholder), 1)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
 					return openBlock(), createElementBlock("option", {
 						key: option.value,
 						value: option.value,
 						disabled: option.disabled
-					}, toDisplayString(option.label), 9, _hoisted_4$5);
-				}), 128))], 10, _hoisted_2$10), [[vModelSelect, model.value]]), createVNode(unref(ChevronDown), {
+					}, toDisplayString(option.label), 9, _hoisted_4$8);
+				}), 128))], 10, _hoisted_2$14), [[vModelSelect, model.value]]), createVNode(unref(ChevronDown), {
 					class: "text-ink-soft pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2",
 					"aria-hidden": "true"
 				})])]),
@@ -563,6 +952,264 @@ var BaseSelect_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/BaseSlider.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$16 = { class: "rk-slider" };
+var _hoisted_2$13 = { class: "rk-slider-head" };
+var _hoisted_3$7 = ["for"];
+var _hoisted_4$7 = ["for"];
+var _hoisted_5$4 = [
+	"id",
+	"min",
+	"max",
+	"step",
+	"disabled",
+	"aria-valuetext",
+	"aria-describedby"
+];
+//#endregion
+//#region src/components/BaseSlider.vue
+var BaseSlider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BaseSlider",
+	props: /*@__PURE__*/ mergeModels({
+		label: {},
+		min: { default: 0 },
+		max: { default: 100 },
+		step: { default: 1 },
+		hint: { default: "" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		format: { type: Function },
+		showValue: {
+			type: Boolean,
+			default: true
+		}
+	}, {
+		"modelValue": { default: 0 },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const model = useModel(__props, "modelValue");
+		const id = useId();
+		const hintId = `${id}-hint`;
+		const text = computed(() => __props.format ? __props.format(model.value) : String(model.value));
+		/** Where the fill stops, as a percentage of the track. */
+		const filled = computed(() => {
+			const span = __props.max - __props.min;
+			return span <= 0 ? 0 : (model.value - __props.min) / span * 100;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$16, [
+				createElementVNode("div", _hoisted_2$13, [createElementVNode("label", {
+					for: unref(id),
+					class: "rk-slider-label"
+				}, toDisplayString(__props.label), 9, _hoisted_3$7), __props.showValue ? (openBlock(), createElementBlock("output", {
+					key: 0,
+					for: unref(id),
+					class: "rk-slider-value"
+				}, toDisplayString(text.value), 9, _hoisted_4$7)) : createCommentVNode("", true)]),
+				withDirectives(createElementVNode("input", {
+					id: unref(id),
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+					type: "range",
+					class: "rk-slider-input",
+					min: __props.min,
+					max: __props.max,
+					step: __props.step,
+					disabled: __props.disabled,
+					"aria-valuetext": text.value,
+					"aria-describedby": __props.hint ? hintId : void 0,
+					style: normalizeStyle({ "--rk-slider-filled": `${filled.value}%` })
+				}, null, 12, _hoisted_5$4), [[
+					vModelText,
+					model.value,
+					void 0,
+					{ number: true }
+				]]),
+				__props.hint ? (openBlock(), createElementBlock("p", {
+					key: 0,
+					id: hintId,
+					class: "rk-slider-hint"
+				}, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-0a408519"]]);
+//#endregion
+//#region src/components/BaseSpinner.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$15 = {
+	class: "rk-spin-wrap",
+	role: "status"
+};
+var _hoisted_2$12 = { class: "rk-spin-label" };
+//#endregion
+//#region src/components/BaseSpinner.vue
+var BaseSpinner_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BaseSpinner",
+	props: {
+		label: {},
+		size: { default: "md" }
+	},
+	setup(__props) {
+		/**
+		* Work in progress, with no idea how much is left.
+		*
+		* `ProgressBar` is the one to reach for when the amount is known; this is for
+		* when it is not. Showing a bar that cannot move is worse than a spinner,
+		* because a bar is a promise about how long.
+		*
+		* `role="status"` and a label, so a screen reader says what is happening. A
+		* spinner with no accessible name is a decoration that happens to be the only
+		* thing on screen — which is why `label` is required and not defaulted to
+		* "Loading" in a language the app may not speak.
+		*/
+		const SIZES = {
+			sm: "1rem",
+			md: "1.5rem",
+			lg: "2.5rem"
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", _hoisted_1$15, [createElementVNode("span", {
+				class: "rk-spin",
+				style: normalizeStyle({
+					width: SIZES[__props.size],
+					height: SIZES[__props.size]
+				}),
+				"aria-hidden": "true"
+			}, null, 4), createElementVNode("span", _hoisted_2$12, toDisplayString(__props.label), 1)]);
+		};
+	}
+}), [["__scopeId", "data-v-842da62c"]]);
+//#endregion
+//#region src/components/BaseSwitch.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$14 = { class: "flex items-center justify-between gap-4" };
+var _hoisted_2$11 = {
+	key: 0,
+	class: "min-w-0"
+};
+var _hoisted_3$6 = ["id"];
+var _hoisted_4$6 = [
+	"aria-checked",
+	"aria-labelledby",
+	"aria-label",
+	"aria-describedby",
+	"disabled"
+];
+//#endregion
+//#region src/components/BaseSwitch.vue
+var BaseSwitch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BaseSwitch",
+	props: /*@__PURE__*/ mergeModels({
+		label: {},
+		hint: { default: "" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		labelHidden: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"modelValue": {
+			type: Boolean,
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const model = useModel(__props, "modelValue");
+		const id = useId();
+		const hintId = `${id}-hint`;
+		const describedBy = computed(() => __props.hint ? hintId : void 0);
+		function toggle() {
+			if (!__props.disabled) model.value = !model.value;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$14, [!__props.labelHidden ? (openBlock(), createElementBlock("span", _hoisted_2$11, [createElementVNode("span", {
+				id: unref(id),
+				class: "text-ink block text-sm"
+			}, toDisplayString(__props.label), 9, _hoisted_3$6), __props.hint ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				id: hintId,
+				class: "text-ink-soft mt-0.5 block text-xs"
+			}, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)])) : createCommentVNode("", true), createElementVNode("button", {
+				type: "button",
+				role: "switch",
+				class: normalizeClass(["rk-switch", { "is-on": model.value }]),
+				"aria-checked": model.value,
+				"aria-labelledby": __props.labelHidden ? void 0 : unref(id),
+				"aria-label": __props.labelHidden ? __props.label : void 0,
+				"aria-describedby": describedBy.value,
+				disabled: __props.disabled,
+				onClick: toggle
+			}, [..._cache[0] || (_cache[0] = [createElementVNode("span", {
+				class: "rk-switch-knob",
+				"aria-hidden": "true"
+			}, null, -1)])], 10, _hoisted_4$6)]);
+		};
+	}
+}), [["__scopeId", "data-v-a9f65b91"]]);
+//#endregion
+//#region src/components/BaseTable.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$13 = ["aria-label"];
+var _hoisted_2$10 = { class: "rk-table" };
+var _hoisted_3$5 = { key: 0 };
+var _hoisted_4$5 = { key: 1 };
+var _hoisted_5$3 = ["colspan"];
+//#endregion
+//#region src/components/BaseTable.vue
+var BaseTable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BaseTable",
+	props: {
+		columns: {},
+		rows: {},
+		caption: {},
+		captionHidden: {
+			type: Boolean,
+			default: false
+		},
+		rowKey: {}
+	},
+	setup(__props) {
+		const keyFor = (row, index) => __props.rowKey ? String(row[__props.rowKey]) : index;
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "rk-table-scroll",
+				tabindex: "0",
+				role: "region",
+				"aria-label": __props.caption
+			}, [createElementVNode("table", _hoisted_2$10, [
+				createElementVNode("caption", { class: normalizeClass(__props.captionHidden ? "rk-table-caption-hidden" : "rk-table-caption") }, toDisplayString(__props.caption), 3),
+				createElementVNode("thead", null, [createElementVNode("tr", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column) => {
+					return openBlock(), createElementBlock("th", {
+						key: column.key,
+						scope: "col",
+						class: normalizeClass([column.align === "end" && "is-end", column.nowrap && "is-nowrap"])
+					}, toDisplayString(column.label), 3);
+				}), 128))])]),
+				__props.rows.length > 0 ? (openBlock(), createElementBlock("tbody", _hoisted_3$5, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.rows, (row, index) => {
+					return openBlock(), createElementBlock("tr", { key: keyFor(row, index) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column) => {
+						return openBlock(), createElementBlock("td", {
+							key: column.key,
+							class: normalizeClass([column.align === "end" && "is-end", column.nowrap && "is-nowrap"])
+						}, [renderSlot(_ctx.$slots, column.key, {
+							row,
+							value: row[column.key]
+						}, () => [createTextVNode(toDisplayString(row[column.key]), 1)], true)], 2);
+					}), 128))]);
+				}), 128))])) : (openBlock(), createElementBlock("tbody", _hoisted_4$5, [createElementVNode("tr", null, [createElementVNode("td", {
+					colspan: __props.columns.length,
+					class: "rk-table-empty"
+				}, [renderSlot(_ctx.$slots, "empty", {}, void 0, true)], 8, _hoisted_5$3)])]))
+			])], 8, _hoisted_1$13);
+		};
+	}
+}), [["__scopeId", "data-v-89958b5a"]]);
+//#endregion
 //#region src/components/BaseTextarea.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$12 = [
 	"id",
@@ -648,6 +1295,14 @@ var EmptyState_default = /* @__PURE__ */ defineComponent({
 		description: { default: "" }
 	},
 	setup(__props) {
+		/**
+		* A list with nothing in it yet, said kindly.
+		*
+		* A blank area reads as a page that failed to load, and the reader's first
+		* thought is that something is broken rather than that they have not started.
+		* So there is always a sentence, and the slot below it is where the way out
+		* goes — the button that creates the first one.
+		*/
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1$11, [
 				_ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_2$9, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true),
@@ -731,6 +1386,15 @@ var PageHeader_default = /* @__PURE__ */ defineComponent({
 	__name: "PageHeader",
 	props: { title: {} },
 	setup(__props) {
+		/**
+		* The bar at the top of a screen: a title with room either side of it.
+		*
+		* Three fixed columns rather than a flex row, so the title is centred on the
+		* screen rather than centred on what is left after the buttons. A back arrow on
+		* one side and nothing on the other would otherwise push every title off centre
+		* by exactly half a button, which is visible the moment two screens sit next to
+		* each other.
+		*/
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("header", _hoisted_1$10, [
 				createElementVNode("div", _hoisted_2$8, [renderSlot(_ctx.$slots, "left")]),
@@ -1342,8 +2006,8 @@ function createI18nRuntime(options) {
 *
 * The fallback keeps `vitest` and `vite dev` honest, where no define runs.
 */
-var VERSION = "0.18.2";
+var VERSION = "0.20.0";
 //#endregion
-export { AppError, BaseAlert_default as BaseAlert, BaseBadge_default as BaseBadge, BaseButton_default as BaseButton, BaseCard_default as BaseCard, BaseCheckbox_default as BaseCheckbox, BaseInput_default as BaseInput, BaseRadioGroup_default as BaseRadioGroup, BaseSelect_default as BaseSelect, BaseSheet_default as BaseSheet, BaseTextarea_default as BaseTextarea, EmptyState_default as EmptyState, ErrorBoundary_default as ErrorBoundary, FormField_default as FormField, GoogleButton_default as GoogleButton, LocaleLinks_default as LocaleLinks, PageContainer_default as PageContainer, PageHeader_default as PageHeader, PriceCard_default as PriceCard, ProgressBar_default as ProgressBar, SectionHeading_default as SectionHeading, SegmentedControl_default as SegmentedControl, SettingsGroup_default as SettingsGroup, SettingsRow_default as SettingsRow, SkeletonList_default as SkeletonList, StatCard_default as StatCard, TabBar_default as TabBar, ToastHost_default as ToastHost, ToneDot_default as ToneDot, VERSION, addDays, applyTheme, createI18nRuntime, downloadJson, eachDayOfYear, formatDate, fromDateKey, isApplePortable, isInstalled, isThemePreference, lastNDays, leadingBlanks, needsIosInstall, readStoredTheme, registerErrorMapper, relativeDayLabel, safeRedirect, setFormatLocale, setThemeStorageKey, startOfWeek, tapFeedback, toAppError, toDateKey, toRedirectPath, todayKey, useDebouncedCallback, useDragScroll, useMediaQuery, useOnline, useTheme, useToast, useToday, useVisualViewport };
+export { AppError, BaseAlert_default as BaseAlert, BaseAvatar_default as BaseAvatar, BaseBadge_default as BaseBadge, BaseButton_default as BaseButton, BaseCard_default as BaseCard, BaseCheckbox_default as BaseCheckbox, BaseCombobox_default as BaseCombobox, BaseInput_default as BaseInput, BaseMenu_default as BaseMenu, BaseRadioGroup_default as BaseRadioGroup, BaseSelect_default as BaseSelect, BaseSheet_default as BaseSheet, BaseSlider_default as BaseSlider, BaseSpinner_default as BaseSpinner, BaseSwitch_default as BaseSwitch, BaseTable_default as BaseTable, BaseTextarea_default as BaseTextarea, EmptyState_default as EmptyState, ErrorBoundary_default as ErrorBoundary, FormField_default as FormField, GoogleButton_default as GoogleButton, LocaleLinks_default as LocaleLinks, PageContainer_default as PageContainer, PageHeader_default as PageHeader, PriceCard_default as PriceCard, ProgressBar_default as ProgressBar, SectionHeading_default as SectionHeading, SegmentedControl_default as SegmentedControl, SettingsGroup_default as SettingsGroup, SettingsRow_default as SettingsRow, SkeletonList_default as SkeletonList, StatCard_default as StatCard, TabBar_default as TabBar, ToastHost_default as ToastHost, ToneDot_default as ToneDot, VERSION, addDays, applyTheme, createI18nRuntime, downloadJson, eachDayOfYear, formatDate, fromDateKey, isApplePortable, isInstalled, isThemePreference, lastNDays, leadingBlanks, needsIosInstall, readStoredTheme, registerErrorMapper, relativeDayLabel, safeRedirect, setFormatLocale, setThemeStorageKey, startOfWeek, tapFeedback, toAppError, toDateKey, toRedirectPath, todayKey, useDebouncedCallback, useDragScroll, useMediaQuery, useOnline, useTheme, useToast, useToday, useVisualViewport };
 
 //# sourceMappingURL=index.js.map