@juxtui/ui 0.2.0 → 0.4.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Comment, Fragment, Teleport, Text, Transition, TransitionGroup, cloneVNode, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createStaticVNode, createTextVNode, createVNode, defineComponent, h, inject, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, provide, reactive, readonly, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toRef, toValue, unref, useId, useModel, vModelDynamic, vModelText, watch, watchEffect, withCtx, withDirectives, withModifiers } from "vue";
+import { Comment, Fragment, Teleport, Text, Transition, TransitionGroup, cloneVNode, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createStaticVNode, createTextVNode, createVNode, defineComponent, h, inject, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, provide, reactive, readonly, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toRef, toValue, unref, useId, useModel, useSlots, vModelDynamic, vModelText, vShow, watch, watchEffect, withCtx, withDirectives, withModifiers } from "vue";
 import { autoUpdate, computePosition, flip, offset, shift, size } from "@floating-ui/dom";
 //#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
@@ -192,6 +192,32 @@ var IconInfo = icon("IconInfo", () => [
 	})
 ]);
 icon("IconCornerDownLeft", () => [h("path", { d: "M12.5 3.5v4.25a2 2 0 0 1-2 2h-7" }), h("path", { d: "M6 7l-2.5 2.75L6 12.5" })]);
+var IconChevronLeft = icon("IconChevronLeft", () => [h("path", { d: "M9.75 4.5L6.25 8l3.5 3.5" })]);
+var IconMoreHorizontal = icon("IconMoreHorizontal", () => [
+	h("circle", {
+		cx: 3.5,
+		cy: 8,
+		r: 1,
+		"fill": "currentColor",
+		"stroke": "none"
+	}),
+	h("circle", {
+		cx: 8,
+		cy: 8,
+		r: 1,
+		"fill": "currentColor",
+		"stroke": "none"
+	}),
+	h("circle", {
+		cx: 12.5,
+		cy: 8,
+		r: 1,
+		"fill": "currentColor",
+		"stroke": "none"
+	})
+]);
+var IconArrowUpRight = icon("IconArrowUpRight", () => [h("path", { d: "M5 11L11 5M5.5 5h5.5v5.5" })]);
+var IconArrowDownRight = icon("IconArrowDownRight", () => [h("path", { d: "M5 5l6 6M10.5 11H5V5.5" })]);
 /** The loading spinner used across Juxt. A quarter arc over a faint track. */
 var Spinner = (props) => {
 	const size = props.size ?? 16;
@@ -220,12 +246,12 @@ var Spinner = (props) => {
 Spinner.displayName = "JSpinner";
 //#endregion
 //#region src/components/accordion/JAccordionItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$28 = ["data-state"];
-var _hoisted_2$22 = ["aria-expanded", "disabled"];
-var _hoisted_3$19 = { class: "j-accordion__title" };
-var _hoisted_4$14 = ["inert"];
-var _hoisted_5$10 = { class: "j-accordion__panel-inner" };
-var _hoisted_6$6 = { class: "j-accordion__content" };
+var _hoisted_1$51 = ["data-state"];
+var _hoisted_2$38 = ["aria-expanded", "disabled"];
+var _hoisted_3$32 = { class: "j-accordion__title" };
+var _hoisted_4$25 = ["inert"];
+var _hoisted_5$19 = { class: "j-accordion__panel-inner" };
+var _hoisted_6$11 = { class: "j-accordion__content" };
 //#endregion
 //#region src/components/accordion/JAccordionItem.vue
 var JAccordionItem_default = /* @__PURE__ */ defineComponent({
@@ -256,7 +282,7 @@ var JAccordionItem_default = /* @__PURE__ */ defineComponent({
 					"aria-controls": panelId,
 					disabled: __props.disabled,
 					onClick: _cache[0] || (_cache[0] = ($event) => unref(accordion).toggle(__props.value))
-				}, [createElementVNode("span", _hoisted_3$19, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])]), createVNode(unref(IconChevronDown), { class: "j-accordion__chevron" })], 8, _hoisted_2$22)]),
+				}, [createElementVNode("span", _hoisted_3$32, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])]), createVNode(unref(IconChevronDown), { class: "j-accordion__chevron" })], 8, _hoisted_2$38)]),
 				_: 3
 			})), createElementVNode("div", {
 				id: panelId,
@@ -264,27 +290,27 @@ var JAccordionItem_default = /* @__PURE__ */ defineComponent({
 				class: "j-accordion__panel",
 				"aria-labelledby": triggerId,
 				inert: !open.value
-			}, [createElementVNode("div", _hoisted_5$10, [createElementVNode("div", _hoisted_6$6, [renderSlot(_ctx.$slots, "default")])])], 8, _hoisted_4$14)], 10, _hoisted_1$28);
+			}, [createElementVNode("div", _hoisted_5$19, [createElementVNode("div", _hoisted_6$11, [renderSlot(_ctx.$slots, "default")])])], 8, _hoisted_4$25)], 10, _hoisted_1$51);
 		};
 	}
 });
 //#endregion
 //#region src/components/alert/JAlert.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$27 = {
+var _hoisted_1$50 = {
 	key: 0,
 	class: "j-alert__icon",
 	"aria-hidden": "true"
 };
-var _hoisted_2$21 = { class: "j-alert__body" };
-var _hoisted_3$18 = {
+var _hoisted_2$37 = { class: "j-alert__body" };
+var _hoisted_3$31 = {
 	key: 0,
 	class: "j-alert__title"
 };
-var _hoisted_4$13 = {
+var _hoisted_4$24 = {
 	key: 1,
 	class: "j-alert__description"
 };
-var _hoisted_5$9 = {
+var _hoisted_5$18 = {
 	key: 2,
 	class: "j-alert__actions"
 };
@@ -311,11 +337,11 @@ var JAlert_default = /* @__PURE__ */ defineComponent({
 		};
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", { class: normalizeClass(["j-alert", `j-alert--${__props.variant}`]) }, [
-				!__props.hideIcon ? (openBlock(), createElementBlock("span", _hoisted_1$27, [renderSlot(_ctx.$slots, "icon", {}, () => [(openBlock(), createBlock(resolveDynamicComponent(icons[__props.variant])))])])) : createCommentVNode("", true),
-				createElementVNode("div", _hoisted_2$21, [
-					__props.title ? (openBlock(), createElementBlock("p", _hoisted_3$18, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
-					__props.description || _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_4$13, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])])) : createCommentVNode("", true),
-					_ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_5$9, [renderSlot(_ctx.$slots, "actions")])) : createCommentVNode("", true)
+				!__props.hideIcon ? (openBlock(), createElementBlock("span", _hoisted_1$50, [renderSlot(_ctx.$slots, "icon", {}, () => [(openBlock(), createBlock(resolveDynamicComponent(icons[__props.variant])))])])) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_2$37, [
+					__props.title ? (openBlock(), createElementBlock("p", _hoisted_3$31, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+					__props.description || _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_4$24, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])])) : createCommentVNode("", true),
+					_ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_5$18, [renderSlot(_ctx.$slots, "actions")])) : createCommentVNode("", true)
 				]),
 				__props.dismissible ? (openBlock(), createElementBlock("button", {
 					key: 1,
@@ -329,20 +355,39 @@ var JAlert_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/aspect-ratio/JAspectRatio.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$49 = { class: "j-aspect-ratio__content" };
+//#endregion
+//#region src/components/aspect-ratio/JAspectRatio.vue
+var JAspectRatio_default = /* @__PURE__ */ defineComponent({
+	__name: "JAspectRatio",
+	props: { ratio: { default: 16 / 9 } },
+	setup(__props) {
+		const props = __props;
+		const style = computed(() => ({ "--j-aspect-ratio": String(props.ratio) }));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "j-aspect-ratio",
+				style: normalizeStyle(style.value)
+			}, [createElementVNode("div", _hoisted_1$49, [renderSlot(_ctx.$slots, "default")])], 4);
+		};
+	}
+});
+//#endregion
 //#region src/components/avatar/JAvatar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$26 = [
+var _hoisted_1$48 = [
 	"role",
 	"aria-label",
 	"data-state"
 ];
-var _hoisted_2$20 = { class: "j-avatar__frame" };
-var _hoisted_3$17 = ["src"];
-var _hoisted_4$12 = {
+var _hoisted_2$36 = { class: "j-avatar__frame" };
+var _hoisted_3$30 = ["src"];
+var _hoisted_4$23 = {
 	key: 1,
 	class: "j-avatar__fallback",
 	"aria-hidden": "true"
 };
-var _hoisted_5$8 = {
+var _hoisted_5$17 = {
 	key: 1,
 	viewBox: "0 0 16 16",
 	fill: "currentColor",
@@ -394,7 +439,7 @@ var JAvatar_default = /* @__PURE__ */ defineComponent({
 				role: label.value ? "img" : void 0,
 				"aria-label": label.value,
 				"data-state": state.value
-			}, [createElementVNode("span", _hoisted_2$20, [__props.src && state.value !== "error" ? (openBlock(), createElementBlock("img", {
+			}, [createElementVNode("span", _hoisted_2$36, [__props.src && state.value !== "error" ? (openBlock(), createElementBlock("img", {
 				key: 0,
 				ref_key: "img",
 				ref: img,
@@ -403,7 +448,7 @@ var JAvatar_default = /* @__PURE__ */ defineComponent({
 				alt: "",
 				onLoad: _cache[0] || (_cache[0] = ($event) => state.value = "loaded"),
 				onError: _cache[1] || (_cache[1] = ($event) => state.value = "error")
-			}, null, 40, _hoisted_3$17)) : createCommentVNode("", true), state.value !== "loaded" ? (openBlock(), createElementBlock("span", _hoisted_4$12, [renderSlot(_ctx.$slots, "fallback", {}, () => [initials.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(toDisplayString(initials.value), 1)], 64)) : (openBlock(), createElementBlock("svg", _hoisted_5$8, [..._cache[2] || (_cache[2] = [createElementVNode("circle", {
+			}, null, 40, _hoisted_3$30)) : createCommentVNode("", true), state.value !== "loaded" ? (openBlock(), createElementBlock("span", _hoisted_4$23, [renderSlot(_ctx.$slots, "fallback", {}, () => [initials.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(toDisplayString(initials.value), 1)], 64)) : (openBlock(), createElementBlock("svg", _hoisted_5$17, [..._cache[2] || (_cache[2] = [createElementVNode("circle", {
 				cx: "8",
 				cy: "6",
 				r: "2.75"
@@ -411,18 +456,67 @@ var JAvatar_default = /* @__PURE__ */ defineComponent({
 				key: 0,
 				class: normalizeClass(["j-avatar__status", `j-avatar__status--${__props.status}`]),
 				"aria-hidden": "true"
-			}, null, 2)) : createCommentVNode("", true)], 10, _hoisted_1$26);
+			}, null, 2)) : createCommentVNode("", true)], 10, _hoisted_1$48);
+		};
+	}
+});
+//#endregion
+//#region src/components/avatar-group/JAvatarGroup.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$47 = ["aria-label"];
+var _hoisted_2$35 = ["aria-label"];
+//#endregion
+//#region src/components/avatar-group/JAvatarGroup.vue
+var JAvatarGroup_default = /* @__PURE__ */ defineComponent({
+	__name: "JAvatarGroup",
+	props: {
+		items: {},
+		max: {},
+		size: { default: "md" },
+		shape: { default: "circle" },
+		label: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const visible = computed(() => props.max ? props.items.slice(0, props.max) : props.items);
+		const overflow = computed(() => Math.max(0, props.items.length - visible.value.length));
+		const groupLabel = computed(() => props.label ?? `${props.items.length} ${props.items.length === 1 ? "avatar" : "avatars"}`);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["j-avatar-group", `j-avatar-group--${__props.size}`]),
+				role: "group",
+				"aria-label": groupLabel.value
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(visible.value, (item, index) => {
+				return openBlock(), createElementBlock("span", {
+					key: index,
+					class: "j-avatar-group__item"
+				}, [createVNode(JAvatar_default, {
+					src: item.src,
+					name: item.name,
+					size: __props.size,
+					shape: __props.shape
+				}, null, 8, [
+					"src",
+					"name",
+					"size",
+					"shape"
+				])]);
+			}), 128)), overflow.value > 0 ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				class: normalizeClass(["j-avatar-group__item j-avatar-group__overflow j-focusable", { "j-avatar-group__overflow--square": __props.shape === "square" }]),
+				tabindex: "0",
+				"aria-label": `${overflow.value} more`
+			}, " +" + toDisplayString(overflow.value), 11, _hoisted_2$35)) : createCommentVNode("", true)], 10, _hoisted_1$47);
 		};
 	}
 });
 //#endregion
 //#region src/components/badge/JBadge.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$25 = {
+var _hoisted_1$46 = {
 	key: 0,
 	class: "j-badge__marker",
 	"aria-hidden": "true"
 };
-var _hoisted_2$19 = {
+var _hoisted_2$34 = {
 	key: 1,
 	class: "j-badge__icon"
 };
@@ -441,22 +535,192 @@ var JBadge_default = /* @__PURE__ */ defineComponent({
 				`j-badge--${__props.variant}`,
 				`j-badge--${__props.size}`,
 				{ "j-badge--status": __props.dot }
-			]]) }, [__props.dot ? (openBlock(), createElementBlock("span", _hoisted_1$25)) : _ctx.$slots.leading ? (openBlock(), createElementBlock("span", _hoisted_2$19, [renderSlot(_ctx.$slots, "leading")])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 2);
+			]]) }, [__props.dot ? (openBlock(), createElementBlock("span", _hoisted_1$46)) : _ctx.$slots.leading ? (openBlock(), createElementBlock("span", _hoisted_2$34, [renderSlot(_ctx.$slots, "leading")])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+//#region src/components/banner/JBanner.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$45 = ["aria-label"];
+var _hoisted_2$33 = {
+	key: 0,
+	class: "j-banner__icon",
+	"aria-hidden": "true"
+};
+var _hoisted_3$29 = { class: "j-banner__body" };
+var _hoisted_4$22 = {
+	key: 0,
+	class: "j-banner__title"
+};
+var _hoisted_5$16 = {
+	key: 1,
+	class: "j-banner__description"
+};
+var _hoisted_6$10 = {
+	key: 1,
+	class: "j-banner__actions"
+};
+//#endregion
+//#region src/components/banner/JBanner.vue
+var JBanner_default = /* @__PURE__ */ defineComponent({
+	__name: "JBanner",
+	props: {
+		variant: { default: "neutral" },
+		title: {},
+		description: {},
+		dismissible: { type: Boolean },
+		hideIcon: { type: Boolean }
+	},
+	emits: ["dismiss"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const icons = {
+			neutral: IconInfo,
+			info: IconInfo,
+			success: IconCircleCheck,
+			warning: IconAlert,
+			destructive: IconCircleX
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["j-banner", `j-banner--${__props.variant}`]),
+				role: "region",
+				"aria-label": __props.title
+			}, [
+				!__props.hideIcon ? (openBlock(), createElementBlock("span", _hoisted_2$33, [renderSlot(_ctx.$slots, "icon", {}, () => [(openBlock(), createBlock(resolveDynamicComponent(icons[__props.variant])))])])) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_3$29, [__props.title ? (openBlock(), createElementBlock("p", _hoisted_4$22, toDisplayString(__props.title), 1)) : createCommentVNode("", true), __props.description || _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_5$16, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])])) : createCommentVNode("", true)]),
+				_ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_6$10, [renderSlot(_ctx.$slots, "actions")])) : createCommentVNode("", true),
+				__props.dismissible ? (openBlock(), createElementBlock("button", {
+					key: 2,
+					type: "button",
+					class: "j-banner__close j-focusable",
+					"aria-label": "Dismiss",
+					onClick: _cache[0] || (_cache[0] = ($event) => emit("dismiss"))
+				}, [createVNode(unref(IconX))])) : createCommentVNode("", true)
+			], 10, _hoisted_1$45);
+		};
+	}
+});
+//#endregion
+//#region src/components/breadcrumb/JBreadcrumb.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$44 = ["aria-label"];
+var _hoisted_2$32 = { class: "j-breadcrumb__list" };
+var _hoisted_3$28 = {
+	key: 0,
+	class: "j-breadcrumb__ellipsis",
+	"aria-hidden": "true"
+};
+var _hoisted_4$21 = ["href"];
+var _hoisted_5$15 = ["aria-current"];
+//#endregion
+//#region src/components/breadcrumb/JBreadcrumb.vue
+var JBreadcrumb_default = /* @__PURE__ */ defineComponent({
+	__name: "JBreadcrumb",
+	props: {
+		items: {},
+		label: {},
+		maxItems: {}
+	},
+	setup(__props) {
+		const props = __props;
+		/**
+		* Provide `items` for the common case, or omit it and pass your own `<li>`
+		* elements (with class `j-breadcrumb__item`) into the default slot for full
+		* control over each crumb.
+		*/
+		const visibleItems = computed(() => {
+			const list = props.items ?? [];
+			if (!props.maxItems || list.length <= props.maxItems) return list;
+			const tailCount = Math.max(1, props.maxItems - 2);
+			return [
+				list[0],
+				{
+					label: "…",
+					ellipsis: true
+				},
+				...list.slice(-tailCount)
+			];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("nav", {
+				class: "j-breadcrumb",
+				"aria-label": __props.label || "Breadcrumb"
+			}, [createElementVNode("ol", _hoisted_2$32, [__props.items && __props.items.length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(visibleItems.value, (item, index) => {
+				return openBlock(), createElementBlock("li", {
+					key: `${item.label}-${index}`,
+					class: "j-breadcrumb__item"
+				}, [item.ellipsis ? (openBlock(), createElementBlock("span", _hoisted_3$28, toDisplayString(item.label), 1)) : item.href && index !== visibleItems.value.length - 1 ? (openBlock(), createElementBlock("a", {
+					key: 1,
+					class: "j-breadcrumb__link j-focusable",
+					href: item.href
+				}, toDisplayString(item.label), 9, _hoisted_4$21)) : (openBlock(), createElementBlock("span", {
+					key: 2,
+					class: "j-breadcrumb__current",
+					"aria-current": index === visibleItems.value.length - 1 ? "page" : void 0
+				}, toDisplayString(item.label), 9, _hoisted_5$15))]);
+			}), 128)) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1)])], 8, _hoisted_1$44);
+		};
+	}
+});
+//#endregion
+//#region src/components/burger/JBurger.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$43 = [
+	"data-state",
+	"aria-expanded",
+	"aria-controls",
+	"aria-label"
+];
+//#endregion
+//#region src/components/burger/JBurger.vue
+var JBurger_default = /* @__PURE__ */ defineComponent({
+	__name: "JBurger",
+	props: /*@__PURE__*/ mergeModels({
+		openLabel: { default: "Open menu" },
+		closeLabel: { default: "Close menu" },
+		size: { default: "md" },
+		controls: {}
+	}, {
+		"modelValue": {
+			type: Boolean,
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const open = useModel(__props, "modelValue");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				type: "button",
+				class: normalizeClass(["j-burger j-focusable", `j-burger--${__props.size}`]),
+				"data-state": open.value ? "open" : "closed",
+				"aria-expanded": open.value,
+				"aria-controls": __props.controls,
+				"aria-label": open.value ? __props.closeLabel : __props.openLabel,
+				onClick: _cache[0] || (_cache[0] = ($event) => open.value = !open.value)
+			}, [..._cache[1] || (_cache[1] = [createElementVNode("span", {
+				class: "j-burger__lines",
+				"aria-hidden": "true"
+			}, [
+				createElementVNode("span", { class: "j-burger__line" }),
+				createElementVNode("span", { class: "j-burger__line" }),
+				createElementVNode("span", { class: "j-burger__line" })
+			], -1)])], 10, _hoisted_1$43);
 		};
 	}
 });
 //#endregion
 //#region src/components/button/JButton.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$24 = { class: "j-button__content" };
-var _hoisted_2$18 = {
+var _hoisted_1$42 = { class: "j-button__content" };
+var _hoisted_2$31 = {
 	key: 0,
 	class: "j-button__icon"
 };
-var _hoisted_3$16 = {
+var _hoisted_3$27 = {
 	key: 1,
 	class: "j-button__icon"
 };
-var _hoisted_4$11 = {
+var _hoisted_4$20 = {
 	key: 0,
 	class: "j-button__spinner"
 };
@@ -510,12 +774,12 @@ var JButton_default = /* @__PURE__ */ defineComponent({
 				"data-disabled": __props.disabled || void 0,
 				onClickCapture: onClick
 			}), {
-				default: withCtx(() => [createElementVNode("span", _hoisted_1$24, [
-					_ctx.$slots.leading ? (openBlock(), createElementBlock("span", _hoisted_2$18, [renderSlot(_ctx.$slots, "leading")])) : createCommentVNode("", true),
+				default: withCtx(() => [createElementVNode("span", _hoisted_1$42, [
+					_ctx.$slots.leading ? (openBlock(), createElementBlock("span", _hoisted_2$31, [renderSlot(_ctx.$slots, "leading")])) : createCommentVNode("", true),
 					renderSlot(_ctx.$slots, "default"),
-					_ctx.$slots.trailing ? (openBlock(), createElementBlock("span", _hoisted_3$16, [renderSlot(_ctx.$slots, "trailing")])) : createCommentVNode("", true)
+					_ctx.$slots.trailing ? (openBlock(), createElementBlock("span", _hoisted_3$27, [renderSlot(_ctx.$slots, "trailing")])) : createCommentVNode("", true)
 				]), createVNode(Transition, { name: "j-button-spinner" }, {
-					default: withCtx(() => [__props.loading ? (openBlock(), createElementBlock("span", _hoisted_4$11, [createVNode(unref(Spinner), { size: __props.size === "xs" ? 12 : __props.size === "lg" ? 16 : 14 }, null, 8, ["size"])])) : createCommentVNode("", true)]),
+					default: withCtx(() => [__props.loading ? (openBlock(), createElementBlock("span", _hoisted_4$20, [createVNode(unref(Spinner), { size: __props.size === "xs" ? 12 : __props.size === "lg" ? 16 : 14 }, null, 8, ["size"])])) : createCommentVNode("", true)]),
 					_: 1
 				})]),
 				_: 3
@@ -529,28 +793,28 @@ var JButton_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/card/JCard.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$23 = {
+var _hoisted_1$41 = {
 	key: 0,
 	class: "j-card__header"
 };
-var _hoisted_2$17 = { class: "j-card__heading" };
-var _hoisted_3$15 = {
+var _hoisted_2$30 = { class: "j-card__heading" };
+var _hoisted_3$26 = {
 	key: 0,
 	class: "j-card__title"
 };
-var _hoisted_4$10 = {
+var _hoisted_4$19 = {
 	key: 1,
 	class: "j-card__description"
 };
-var _hoisted_5$7 = {
+var _hoisted_5$14 = {
 	key: 0,
 	class: "j-card__actions"
 };
-var _hoisted_6$5 = {
+var _hoisted_6$9 = {
 	key: 1,
 	class: "j-card__body"
 };
-var _hoisted_7$2 = {
+var _hoisted_7$5 = {
 	key: 2,
 	class: "j-card__footer"
 };
@@ -569,9 +833,9 @@ var JCard_default = /* @__PURE__ */ defineComponent({
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(resolveDynamicComponent(__props.as), { class: normalizeClass(["j-card", [`j-card--${__props.variant}`, `j-card--p-${__props.padding}`]]) }, {
 				default: withCtx(() => [
-					__props.title || __props.description || _ctx.$slots.header || _ctx.$slots.actions ? (openBlock(), createElementBlock("header", _hoisted_1$23, [renderSlot(_ctx.$slots, "header", {}, () => [createElementVNode("div", _hoisted_2$17, [__props.title ? (openBlock(), createElementBlock("h3", _hoisted_3$15, toDisplayString(__props.title), 1)) : createCommentVNode("", true), __props.description ? (openBlock(), createElementBlock("p", _hoisted_4$10, toDisplayString(__props.description), 1)) : createCommentVNode("", true)])]), _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_5$7, [renderSlot(_ctx.$slots, "actions")])) : createCommentVNode("", true)])) : createCommentVNode("", true),
-					_ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_6$5, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true),
-					_ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_7$2, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true)
+					__props.title || __props.description || _ctx.$slots.header || _ctx.$slots.actions ? (openBlock(), createElementBlock("header", _hoisted_1$41, [renderSlot(_ctx.$slots, "header", {}, () => [createElementVNode("div", _hoisted_2$30, [__props.title ? (openBlock(), createElementBlock("h3", _hoisted_3$26, toDisplayString(__props.title), 1)) : createCommentVNode("", true), __props.description ? (openBlock(), createElementBlock("p", _hoisted_4$19, toDisplayString(__props.description), 1)) : createCommentVNode("", true)])]), _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_5$14, [renderSlot(_ctx.$slots, "actions")])) : createCommentVNode("", true)])) : createCommentVNode("", true),
+					_ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_6$9, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true),
+					_ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_7$5, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true)
 				]),
 				_: 3
 			}, 8, ["class"]);
@@ -580,9 +844,9 @@ var JCard_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/checkbox/JCheckbox.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$22 = ["data-state"];
-var _hoisted_2$16 = { class: "j-checkbox__control" };
-var _hoisted_3$14 = [
+var _hoisted_1$40 = ["data-state"];
+var _hoisted_2$29 = { class: "j-checkbox__control" };
+var _hoisted_3$25 = [
 	"id",
 	"checked",
 	"disabled",
@@ -591,12 +855,12 @@ var _hoisted_3$14 = [
 	"value",
 	"aria-describedby"
 ];
-var _hoisted_4$9 = {
+var _hoisted_4$18 = {
 	key: 0,
 	class: "j-checkbox__text"
 };
-var _hoisted_5$6 = ["for"];
-var _hoisted_6$4 = ["id"];
+var _hoisted_5$13 = ["for"];
+var _hoisted_6$8 = ["id"];
 //#endregion
 //#region src/components/checkbox/JCheckbox.vue
 var JCheckbox_default = /* @__PURE__ */ defineComponent({
@@ -642,7 +906,7 @@ var JCheckbox_default = /* @__PURE__ */ defineComponent({
 				class: normalizeClass(["j-checkbox", [_ctx.$attrs.class, { "is-disabled": __props.disabled }]]),
 				style: normalizeStyle(_ctx.$attrs.style),
 				"data-state": state.value
-			}, [createElementVNode("span", _hoisted_2$16, [createElementVNode("input", mergeProps({
+			}, [createElementVNode("span", _hoisted_2$29, [createElementVNode("input", mergeProps({
 				id: id.value,
 				ref_key: "input",
 				ref: input
@@ -660,15 +924,69 @@ var JCheckbox_default = /* @__PURE__ */ defineComponent({
 				value: __props.value,
 				"aria-describedby": __props.description || _ctx.$slots.description ? descriptionId.value : void 0,
 				onChange
-			}), null, 16, _hoisted_3$14), _cache[0] || (_cache[0] = createStaticVNode("<span class=\"j-checkbox__box\" aria-hidden=\"true\"><svg class=\"j-checkbox__check\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M4 8.25l2.75 2.75L12 5.5\" pathLength=\"1\"></path></svg><svg class=\"j-checkbox__dash\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M4.5 8h7\"></path></svg></span>", 1))]), __props.label || _ctx.$slots.default || __props.description || _ctx.$slots.description ? (openBlock(), createElementBlock("span", _hoisted_4$9, [__props.label || _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
+			}), null, 16, _hoisted_3$25), _cache[0] || (_cache[0] = createStaticVNode("<span class=\"j-checkbox__box\" aria-hidden=\"true\"><svg class=\"j-checkbox__check\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M4 8.25l2.75 2.75L12 5.5\" pathLength=\"1\"></path></svg><svg class=\"j-checkbox__dash\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M4.5 8h7\"></path></svg></span>", 1))]), __props.label || _ctx.$slots.default || __props.description || _ctx.$slots.description ? (openBlock(), createElementBlock("span", _hoisted_4$18, [__props.label || _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
 				key: 0,
 				for: id.value,
 				class: "j-checkbox__label"
-			}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 8, _hoisted_5$6)) : createCommentVNode("", true), __props.description || _ctx.$slots.description ? (openBlock(), createElementBlock("span", {
+			}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 8, _hoisted_5$13)) : createCommentVNode("", true), __props.description || _ctx.$slots.description ? (openBlock(), createElementBlock("span", {
 				key: 1,
 				id: descriptionId.value,
 				class: "j-checkbox__description"
-			}, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])], 8, _hoisted_6$4)) : createCommentVNode("", true)])) : createCommentVNode("", true)], 14, _hoisted_1$22);
+			}, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])], 8, _hoisted_6$8)) : createCommentVNode("", true)])) : createCommentVNode("", true)], 14, _hoisted_1$40);
+		};
+	}
+});
+//#endregion
+//#region src/components/collapsible/JCollapsible.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$39 = ["data-state"];
+var _hoisted_2$28 = ["aria-expanded", "disabled"];
+var _hoisted_3$24 = { class: "j-collapsible__label" };
+var _hoisted_4$17 = ["inert"];
+var _hoisted_5$12 = { class: "j-collapsible__panel-inner" };
+var _hoisted_6$7 = { class: "j-collapsible__content" };
+//#endregion
+//#region src/components/collapsible/JCollapsible.vue
+var JCollapsible_default = /* @__PURE__ */ defineComponent({
+	__name: "JCollapsible",
+	props: /*@__PURE__*/ mergeModels({
+		label: {},
+		disabled: { type: Boolean }
+	}, {
+		"modelValue": {
+			type: Boolean,
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		/** A single disclosure primitive | for a group of them, use `JAccordion`. */
+		const model = useModel(__props, "modelValue");
+		const id = `j-${useId()}`;
+		const triggerId = `${id}-trigger`;
+		const panelId = `${id}-panel`;
+		function toggle() {
+			model.value = !model.value;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "j-collapsible",
+				"data-state": model.value ? "open" : "closed"
+			}, [createElementVNode("button", {
+				id: triggerId,
+				type: "button",
+				class: "j-collapsible__trigger j-focusable",
+				"aria-expanded": model.value,
+				"aria-controls": panelId,
+				disabled: __props.disabled,
+				onClick: toggle
+			}, [createVNode(unref(IconChevronDown), { class: "j-collapsible__chevron" }), createElementVNode("span", _hoisted_3$24, [renderSlot(_ctx.$slots, "trigger", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])])], 8, _hoisted_2$28), createElementVNode("div", {
+				id: panelId,
+				role: "region",
+				class: "j-collapsible__panel",
+				"aria-labelledby": triggerId,
+				inert: !model.value
+			}, [createElementVNode("div", _hoisted_5$12, [createElementVNode("div", _hoisted_6$7, [renderSlot(_ctx.$slots, "default")])])], 8, _hoisted_4$17)], 8, _hoisted_1$39);
 		};
 	}
 });
@@ -963,7 +1281,7 @@ function findWordStart(t, q) {
 	}
 	return -1;
 }
-/** Letters in order, not necessarily adjacent — "gtst" finds "Go to settings". */
+/** Letters in order, not necessarily adjacent | "gtst" finds "Go to settings". */
 function subsequence(q, t) {
 	const ranges = [];
 	let ti = 0;
@@ -1025,7 +1343,7 @@ var JPortal_default = /* @__PURE__ */ defineComponent({
 		*
 		* Server-rendered teleports to `body` never make it into the HTML, so a plain
 		* `<Teleport>` hydrates against nothing and warns. Rendering nothing until
-		* mount keeps server and client output identical — and overlays are closed on
+		* mount keeps server and client output identical | and overlays are closed on
 		* first paint anyway.
 		*/
 		const mounted = ref(false);
@@ -1040,25 +1358,25 @@ var JPortal_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/command-palette/JCommandPalette.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$21 = {
+var _hoisted_1$38 = {
 	key: 0,
 	class: "j-command__overlay",
 	"aria-hidden": "true"
 };
-var _hoisted_2$15 = ["aria-label"];
-var _hoisted_3$13 = { class: "j-command__search" };
-var _hoisted_4$8 = [
+var _hoisted_2$27 = ["aria-label"];
+var _hoisted_3$23 = { class: "j-command__search" };
+var _hoisted_4$16 = [
 	"aria-activedescendant",
 	"aria-label",
 	"placeholder"
 ];
-var _hoisted_5$5 = {
+var _hoisted_5$11 = {
 	key: 0,
 	class: "j-command__progress",
 	"aria-hidden": "true"
 };
-var _hoisted_6$3 = ["aria-label"];
-var _hoisted_7$1 = ["aria-labelledby"];
+var _hoisted_6$6 = ["aria-label"];
+var _hoisted_7$4 = ["aria-labelledby"];
 var _hoisted_8$1 = ["id"];
 var _hoisted_9$1 = [
 	"id",
@@ -1293,7 +1611,7 @@ var JCommandPalette_default = /* @__PURE__ */ defineComponent({
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(JPortal_default, null, {
 				default: withCtx(() => [createVNode(Transition, { name: "j-command-overlay" }, {
-					default: withCtx(() => [open.value ? (openBlock(), createElementBlock("div", _hoisted_1$21)) : createCommentVNode("", true)]),
+					default: withCtx(() => [open.value ? (openBlock(), createElementBlock("div", _hoisted_1$38)) : createCommentVNode("", true)]),
 					_: 1
 				}), createVNode(Transition, {
 					name: "j-command",
@@ -1315,7 +1633,7 @@ var JCommandPalette_default = /* @__PURE__ */ defineComponent({
 						"aria-label": __props.label,
 						class: "j-command"
 					}, [
-						createElementVNode("div", _hoisted_3$13, [
+						createElementVNode("div", _hoisted_3$23, [
 							createVNode(unref(IconSearch), { class: "j-command__search-icon" }),
 							withDirectives(createElementVNode("input", {
 								ref_key: "input",
@@ -1336,7 +1654,7 @@ var JCommandPalette_default = /* @__PURE__ */ defineComponent({
 								spellcheck: "false",
 								enterkeyhint: "go",
 								onKeydown
-							}, null, 40, _hoisted_4$8), [[vModelText, search.value]]),
+							}, null, 40, _hoisted_4$16), [[vModelText, search.value]]),
 							createElementVNode("button", {
 								type: "button",
 								class: "j-command__esc j-kbd",
@@ -1344,7 +1662,7 @@ var JCommandPalette_default = /* @__PURE__ */ defineComponent({
 								"aria-label": "Close",
 								onClick: close
 							}, " Esc "),
-							__props.loading ? (openBlock(), createElementBlock("span", _hoisted_5$5)) : createCommentVNode("", true)
+							__props.loading ? (openBlock(), createElementBlock("span", _hoisted_5$11)) : createCommentVNode("", true)
 						]),
 						createElementVNode("div", {
 							id: listboxId,
@@ -1390,8 +1708,8 @@ var JCommandPalette_default = /* @__PURE__ */ defineComponent({
 										}, toDisplayString(key), 1);
 									}), 128))])) : createCommentVNode("", true)
 								])], 42, _hoisted_9$1);
-							}), 128))], 8, _hoisted_7$1);
-						}), 128)), !rows.value.length ? (openBlock(), createElementBlock("div", _hoisted_15, [__props.loading ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(unref(Spinner), { size: 16 }), _cache[2] || (_cache[2] = createElementVNode("span", null, "Searching…", -1))], 64)) : renderSlot(_ctx.$slots, "empty", { search: search.value }, () => [createElementVNode("span", _hoisted_16, toDisplayString(__props.emptyText), 1), search.value ? (openBlock(), createElementBlock("span", _hoisted_17, "Nothing matches “" + toDisplayString(search.value) + "”. Try fewer words.", 1)) : createCommentVNode("", true)], void 0, 1)])) : createCommentVNode("", true)], 40, _hoisted_6$3),
+							}), 128))], 8, _hoisted_7$4);
+						}), 128)), !rows.value.length ? (openBlock(), createElementBlock("div", _hoisted_15, [__props.loading ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(unref(Spinner), { size: 16 }), _cache[2] || (_cache[2] = createElementVNode("span", null, "Searching…", -1))], 64)) : renderSlot(_ctx.$slots, "empty", { search: search.value }, () => [createElementVNode("span", _hoisted_16, toDisplayString(__props.emptyText), 1), search.value ? (openBlock(), createElementBlock("span", _hoisted_17, "Nothing matches “" + toDisplayString(search.value) + "”. Try fewer words.", 1)) : createCommentVNode("", true)], void 0, 1)])) : createCommentVNode("", true)], 40, _hoisted_6$6),
 						createElementVNode("div", _hoisted_18, [renderSlot(_ctx.$slots, "footer", {}, () => [
 							_cache[3] || (_cache[3] = createElementVNode("span", { class: "j-command__hint" }, [
 								createElementVNode("kbd", { class: "j-kbd" }, "↑"),
@@ -1402,7 +1720,7 @@ var JCommandPalette_default = /* @__PURE__ */ defineComponent({
 							_cache[5] || (_cache[5] = createElementVNode("span", { class: "j-command__hint" }, [createElementVNode("kbd", { class: "j-kbd" }, "Esc"), createTextVNode(" Close")], -1))
 						])]),
 						createElementVNode("span", _hoisted_19, toDisplayString(announcement.value), 1)
-					], 8, _hoisted_2$15)], 32)) : createCommentVNode("", true)]),
+					], 8, _hoisted_2$27)], 32)) : createCommentVNode("", true)]),
 					_: 3
 				})]),
 				_: 3
@@ -1413,7 +1731,7 @@ var JCommandPalette_default = /* @__PURE__ */ defineComponent({
 //#endregion
 //#region src/composables/useModal.ts
 /**
-* Internal: everything a modal surface (Dialog, Sheet) shares — layering,
+* Internal: everything a modal surface (Dialog, Sheet) shares | layering,
 * focus trap and restoration, scroll lock, backdrop clicks and the "nudge"
 * when dismissal is refused.
 */
@@ -1452,25 +1770,25 @@ function useModal(panel, open, options) {
 var FIELD_SELECTOR = ":is(input:not([type=hidden]), textarea, select, [role=combobox]):not(:disabled)";
 //#endregion
 //#region src/components/dialog/JDialog.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$20 = {
+var _hoisted_1$37 = {
 	key: 0,
 	class: "j-dialog__overlay",
 	"aria-hidden": "true"
 };
-var _hoisted_2$14 = [
+var _hoisted_2$26 = [
 	"aria-labelledby",
 	"aria-label",
 	"aria-describedby"
 ];
-var _hoisted_3$12 = {
+var _hoisted_3$22 = {
 	key: 0,
 	class: "j-dialog__header"
 };
-var _hoisted_4$7 = {
+var _hoisted_4$15 = {
 	key: 1,
 	class: "j-dialog__body"
 };
-var _hoisted_5$4 = {
+var _hoisted_5$10 = {
 	key: 2,
 	class: "j-dialog__footer"
 };
@@ -1521,7 +1839,7 @@ var JDialog_default = /* @__PURE__ */ defineComponent({
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(JPortal_default, null, {
 				default: withCtx(() => [createVNode(Transition, { name: "j-dialog-overlay" }, {
-					default: withCtx(() => [open.value ? (openBlock(), createElementBlock("div", _hoisted_1$20)) : createCommentVNode("", true)]),
+					default: withCtx(() => [open.value ? (openBlock(), createElementBlock("div", _hoisted_1$37)) : createCommentVNode("", true)]),
 					_: 1
 				}), createVNode(Transition, {
 					name: "j-dialog",
@@ -1548,7 +1866,7 @@ var JDialog_default = /* @__PURE__ */ defineComponent({
 						"aria-describedby": __props.description ? descriptionId : void 0,
 						onAnimationend: _cache[0] || (_cache[0] = ($event) => nudging.value = false)
 					}, [
-						__props.title || __props.description || _ctx.$slots.header ? (openBlock(), createElementBlock("header", _hoisted_3$12, [renderSlot(_ctx.$slots, "header", {
+						__props.title || __props.description || _ctx.$slots.header ? (openBlock(), createElementBlock("header", _hoisted_3$22, [renderSlot(_ctx.$slots, "header", {
 							titleId,
 							descriptionId
 						}, () => [createElementVNode("h2", {
@@ -1559,8 +1877,8 @@ var JDialog_default = /* @__PURE__ */ defineComponent({
 							id: descriptionId,
 							class: "j-dialog__description"
 						}, toDisplayString(__props.description), 1)) : createCommentVNode("", true)])])) : createCommentVNode("", true),
-						_ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_4$7, [renderSlot(_ctx.$slots, "default", { close })])) : createCommentVNode("", true),
-						_ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_5$4, [renderSlot(_ctx.$slots, "footer", { close })])) : createCommentVNode("", true),
+						_ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_4$15, [renderSlot(_ctx.$slots, "default", { close })])) : createCommentVNode("", true),
+						_ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_5$10, [renderSlot(_ctx.$slots, "footer", { close })])) : createCommentVNode("", true),
 						!__props.hideClose ? (openBlock(), createElementBlock("button", {
 							key: 3,
 							type: "button",
@@ -1568,7 +1886,7 @@ var JDialog_default = /* @__PURE__ */ defineComponent({
 							"aria-label": "Close",
 							onClick: close
 						}, [createVNode(unref(IconX))])) : createCommentVNode("", true)
-					], 42, _hoisted_2$14)], 32)) : createCommentVNode("", true)]),
+					], 42, _hoisted_2$26)], 32)) : createCommentVNode("", true)]),
 					_: 3
 				})]),
 				_: 3
@@ -1596,7 +1914,7 @@ function firstElement(nodes) {
 }
 /**
 * Internal: renders its first child element and merges its own attributes
-* (ARIA, listeners, ids) onto it — no wrapper element.
+* (ARIA, listeners, ids) onto it | no wrapper element.
 */
 var JSlot = defineComponent({
 	name: "JSlot",
@@ -1730,7 +2048,7 @@ function useTypeahead(timeout = 500) {
 }
 //#endregion
 //#region src/components/dropdown-menu/JMenuContent.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$19 = ["id", "aria-labelledby"];
+var _hoisted_1$36 = ["id", "aria-labelledby"];
 //#endregion
 //#region src/components/dropdown-menu/JMenuContent.vue
 var JMenuContent_default = /* @__PURE__ */ defineComponent({
@@ -1874,7 +2192,7 @@ var JMenuContent_default = /* @__PURE__ */ defineComponent({
 						"aria-orientation": "vertical",
 						onKeydown,
 						onPointerenter: _cache[0] || (_cache[0] = ($event) => emit("pointerenter"))
-					}, [renderSlot(_ctx.$slots, "default")], 46, _hoisted_1$19)) : createCommentVNode("", true)]),
+					}, [renderSlot(_ctx.$slots, "default")], 46, _hoisted_1$36)) : createCommentVNode("", true)]),
 					_: 3
 				})]),
 				_: 3
@@ -1974,12 +2292,12 @@ var JDropdownMenu_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/dropdown-menu/JDropdownMenuItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$18 = {
+var _hoisted_1$35 = {
 	key: 0,
 	class: "j-menu__icon"
 };
-var _hoisted_2$13 = { class: "j-menu__text" };
-var _hoisted_3$11 = {
+var _hoisted_2$25 = { class: "j-menu__text" };
+var _hoisted_3$21 = {
 	key: 1,
 	class: "j-menu__shortcut"
 };
@@ -2041,9 +2359,9 @@ var JDropdownMenuItem_default = /* @__PURE__ */ defineComponent({
 				onPointerleave: onPointerLeave
 			}, {
 				default: withCtx(() => [
-					_ctx.$slots.leading ? (openBlock(), createElementBlock("span", _hoisted_1$18, [renderSlot(_ctx.$slots, "leading")])) : createCommentVNode("", true),
-					createElementVNode("span", _hoisted_2$13, [renderSlot(_ctx.$slots, "default")]),
-					__props.shortcut ? (openBlock(), createElementBlock("span", _hoisted_3$11, toDisplayString(__props.shortcut), 1)) : createCommentVNode("", true),
+					_ctx.$slots.leading ? (openBlock(), createElementBlock("span", _hoisted_1$35, [renderSlot(_ctx.$slots, "leading")])) : createCommentVNode("", true),
+					createElementVNode("span", _hoisted_2$25, [renderSlot(_ctx.$slots, "default")]),
+					__props.shortcut ? (openBlock(), createElementBlock("span", _hoisted_3$21, toDisplayString(__props.shortcut), 1)) : createCommentVNode("", true),
 					__props.checked !== void 0 ? (openBlock(), createBlock(unref(IconCheck), {
 						key: 2,
 						class: normalizeClass(["j-menu__check", { "is-checked": __props.checked }])
@@ -2061,7 +2379,7 @@ var JDropdownMenuItem_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/dropdown-menu/JDropdownMenuLabel.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$17 = {
+var _hoisted_1$34 = {
 	class: "j-menu__label",
 	role: "presentation"
 };
@@ -2071,7 +2389,7 @@ var JDropdownMenuLabel_default = /* @__PURE__ */ defineComponent({
 	__name: "JDropdownMenuLabel",
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$17, [renderSlot(_ctx.$slots, "default")]);
+			return openBlock(), createElementBlock("div", _hoisted_1$34, [renderSlot(_ctx.$slots, "default")]);
 		};
 	}
 });
@@ -2085,27 +2403,27 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
 //#endregion
 //#region src/components/dropdown-menu/JDropdownMenuSeparator.vue
 var _sfc_main = {};
-var _hoisted_1$16 = {
+var _hoisted_1$33 = {
 	role: "separator",
 	"aria-orientation": "horizontal",
 	class: "j-menu__separator"
 };
 function _sfc_render(_ctx, _cache) {
-	return openBlock(), createElementBlock("div", _hoisted_1$16);
+	return openBlock(), createElementBlock("div", _hoisted_1$33);
 }
 var JDropdownMenuSeparator_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
 //#endregion
 //#region src/components/dropdown-menu/JDropdownMenuSub.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$15 = [
+var _hoisted_1$32 = [
 	"aria-expanded",
 	"aria-controls",
 	"aria-disabled"
 ];
-var _hoisted_2$12 = {
+var _hoisted_2$24 = {
 	key: 0,
 	class: "j-menu__icon"
 };
-var _hoisted_3$10 = { class: "j-menu__text" };
+var _hoisted_3$20 = { class: "j-menu__text" };
 //#endregion
 //#region src/components/dropdown-menu/JDropdownMenuSub.vue
 var JDropdownMenuSub_default = /* @__PURE__ */ defineComponent({
@@ -2179,10 +2497,10 @@ var JDropdownMenuSub_default = /* @__PURE__ */ defineComponent({
 				onKeydown,
 				onClick
 			}, [
-				_ctx.$slots.leading ? (openBlock(), createElementBlock("span", _hoisted_2$12, [renderSlot(_ctx.$slots, "leading")])) : createCommentVNode("", true),
-				createElementVNode("span", _hoisted_3$10, toDisplayString(__props.label), 1),
+				_ctx.$slots.leading ? (openBlock(), createElementBlock("span", _hoisted_2$24, [renderSlot(_ctx.$slots, "leading")])) : createCommentVNode("", true),
+				createElementVNode("span", _hoisted_3$20, toDisplayString(__props.label), 1),
 				createVNode(unref(IconChevronRight), { class: "j-menu__chevron" })
-			], 40, _hoisted_1$15), createVNode(JMenuContent_default, {
+			], 40, _hoisted_1$32), createVNode(JMenuContent_default, {
 				id: menuId,
 				ref_key: "sub",
 				ref: sub,
@@ -2212,15 +2530,115 @@ var JDropdownMenuSub_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/empty-state/JEmptyState.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$31 = {
+	key: 0,
+	class: "j-empty-state__icon"
+};
+var _hoisted_2$23 = {
+	key: 1,
+	class: "j-empty-state__title"
+};
+var _hoisted_3$19 = {
+	key: 2,
+	class: "j-empty-state__description"
+};
+var _hoisted_4$14 = {
+	key: 3,
+	class: "j-empty-state__actions"
+};
+//#endregion
+//#region src/components/empty-state/JEmptyState.vue
+var JEmptyState_default = /* @__PURE__ */ defineComponent({
+	__name: "JEmptyState",
+	props: {
+		title: {},
+		description: {},
+		size: { default: "md" }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["j-empty-state", `j-empty-state--${__props.size}`]) }, [
+				_ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_1$31, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true),
+				__props.title ? (openBlock(), createElementBlock("p", _hoisted_2$23, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+				__props.description || _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_3$19, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])])) : createCommentVNode("", true),
+				_ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_4$14, [renderSlot(_ctx.$slots, "actions")])) : createCommentVNode("", true)
+			], 2);
+		};
+	}
+});
+//#endregion
+//#region src/components/footer/JFooter.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$30 = { class: "j-footer__inner" };
+var _hoisted_2$22 = {
+	key: 0,
+	class: "j-footer__top"
+};
+var _hoisted_3$18 = {
+	key: 0,
+	class: "j-footer__brand"
+};
+var _hoisted_4$13 = {
+	key: 1,
+	class: "j-footer__columns"
+};
+var _hoisted_5$9 = {
+	key: 1,
+	class: "j-footer__bottom"
+};
+//#endregion
+//#region src/components/footer/JFooter.vue
+var JFooter_default = /* @__PURE__ */ defineComponent({
+	__name: "JFooter",
+	props: {
+		maxWidth: { default: "72rem" },
+		bordered: {
+			type: Boolean,
+			default: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const style = computed(() => ({ "--j-footer-max": props.maxWidth === "none" ? "none" : props.maxWidth }));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("footer", {
+				class: normalizeClass(["j-footer", { "is-bordered": __props.bordered }]),
+				style: normalizeStyle(style.value)
+			}, [createElementVNode("div", _hoisted_1$30, [_ctx.$slots.brand || _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_2$22, [_ctx.$slots.brand ? (openBlock(), createElementBlock("div", _hoisted_3$18, [renderSlot(_ctx.$slots, "brand")])) : createCommentVNode("", true), _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_4$13, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)])) : createCommentVNode("", true), _ctx.$slots.bottom ? (openBlock(), createElementBlock("div", _hoisted_5$9, [renderSlot(_ctx.$slots, "bottom")])) : createCommentVNode("", true)])], 6);
+		};
+	}
+});
+//#endregion
+//#region src/components/footer/JFooterColumn.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$29 = { class: "j-footer-column__links" };
+//#endregion
+//#region src/components/footer/JFooterColumn.vue
+var JFooterColumn_default = /* @__PURE__ */ defineComponent({
+	__name: "JFooterColumn",
+	props: { title: {} },
+	setup(__props) {
+		const titleId = `j-${useId()}-title`;
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("nav", {
+				class: "j-footer-column",
+				"aria-labelledby": titleId
+			}, [createElementVNode("p", {
+				id: titleId,
+				class: "j-footer-column__title"
+			}, toDisplayString(__props.title), 1), createElementVNode("div", _hoisted_1$29, [renderSlot(_ctx.$slots, "default")])]);
+		};
+	}
+});
+//#endregion
 //#region src/components/field/JFieldShell.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$14 = {
+var _hoisted_1$28 = {
 	key: 0,
 	class: "j-field__required",
 	"aria-hidden": "true"
 };
-var _hoisted_2$11 = { class: "j-field__messages" };
-var _hoisted_3$9 = ["id"];
-var _hoisted_4$6 = ["id"];
+var _hoisted_2$21 = { class: "j-field__messages" };
+var _hoisted_3$17 = ["id"];
+var _hoisted_4$12 = ["id"];
 //#endregion
 //#region src/components/field/JFieldShell.vue
 var JFieldShell_default = /* @__PURE__ */ defineComponent({
@@ -2241,7 +2659,7 @@ var JFieldShell_default = /* @__PURE__ */ defineComponent({
 	setup(__props) {
 		/**
 		* Internal: lays out label, control, description and error for form fields.
-		* Not exported — every field component composes it.
+		* Not exported | every field component composes it.
 		*/
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", { class: normalizeClass(["j-field", { "is-disabled": __props.disabled }]) }, [
@@ -2251,11 +2669,11 @@ var JFieldShell_default = /* @__PURE__ */ defineComponent({
 					class: "j-field__label",
 					for: __props.labelFor === null ? void 0 : __props.labelFor ?? __props.id
 				}, {
-					default: withCtx(() => [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)]), __props.required ? (openBlock(), createElementBlock("span", _hoisted_1$14, "*")) : createCommentVNode("", true)]),
+					default: withCtx(() => [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)]), __props.required ? (openBlock(), createElementBlock("span", _hoisted_1$28, "*")) : createCommentVNode("", true)]),
 					_: 3
 				}, 8, ["id", "for"])) : createCommentVNode("", true),
 				renderSlot(_ctx.$slots, "default"),
-				createElementVNode("div", _hoisted_2$11, [createVNode(Transition, {
+				createElementVNode("div", _hoisted_2$21, [createVNode(Transition, {
 					name: "j-field-message",
 					mode: "out-in"
 				}, {
@@ -2263,11 +2681,11 @@ var JFieldShell_default = /* @__PURE__ */ defineComponent({
 						id: __props.errorId,
 						key: __props.errorMessage,
 						class: "j-field__error"
-					}, toDisplayString(__props.errorMessage), 9, _hoisted_3$9)) : __props.showDescription ? (openBlock(), createElementBlock("p", {
+					}, toDisplayString(__props.errorMessage), 9, _hoisted_3$17)) : __props.showDescription ? (openBlock(), createElementBlock("p", {
 						key: 1,
 						id: __props.descriptionId,
 						class: "j-field__description"
-					}, toDisplayString(__props.description), 9, _hoisted_4$6)) : createCommentVNode("", true)]),
+					}, toDisplayString(__props.description), 9, _hoisted_4$12)) : createCommentVNode("", true)]),
 					_: 1
 				})])
 			], 2);
@@ -2304,11 +2722,11 @@ function useField(props) {
 }
 //#endregion
 //#region src/components/input/JInput.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$13 = {
+var _hoisted_1$27 = {
 	key: 0,
 	class: "j-control__adornment j-control__adornment--leading"
 };
-var _hoisted_2$10 = [
+var _hoisted_2$20 = [
 	"id",
 	"type",
 	"name",
@@ -2320,7 +2738,7 @@ var _hoisted_2$10 = [
 	"aria-invalid",
 	"aria-describedby"
 ];
-var _hoisted_3$8 = {
+var _hoisted_3$16 = {
 	key: 1,
 	class: "j-control__adornment j-control__adornment--trailing"
 };
@@ -2390,7 +2808,7 @@ var JInput_default = /* @__PURE__ */ defineComponent({
 					}]]),
 					onPointerdown: onFramePointerDown
 				}, [
-					_ctx.$slots.leading ? (openBlock(), createElementBlock("span", _hoisted_1$13, [renderSlot(_ctx.$slots, "leading")])) : createCommentVNode("", true),
+					_ctx.$slots.leading ? (openBlock(), createElementBlock("span", _hoisted_1$27, [renderSlot(_ctx.$slots, "leading")])) : createCommentVNode("", true),
 					withDirectives(createElementVNode("input", mergeProps({
 						id: unref(field).id.value,
 						ref_key: "input",
@@ -2411,8 +2829,8 @@ var JInput_default = /* @__PURE__ */ defineComponent({
 						autocomplete: __props.autocomplete,
 						"aria-invalid": unref(field).invalid.value || void 0,
 						"aria-describedby": unref(field).describedBy.value
-					}), null, 16, _hoisted_2$10), [[vModelDynamic, model.value]]),
-					_ctx.$slots.trailing ? (openBlock(), createElementBlock("span", _hoisted_3$8, [renderSlot(_ctx.$slots, "trailing")])) : createCommentVNode("", true)
+					}), null, 16, _hoisted_2$20), [[vModelDynamic, model.value]]),
+					_ctx.$slots.trailing ? (openBlock(), createElementBlock("span", _hoisted_3$16, [renderSlot(_ctx.$slots, "trailing")])) : createCommentVNode("", true)
 				], 34)]),
 				_: 2
 			}, [_ctx.$slots.label ? {
@@ -2470,21 +2888,39 @@ var JKbd_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/popover/JPopover.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$12 = ["aria-label"];
+//#region src/components/navbar/JNavbar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$26 = { class: "j-navbar__bar" };
+var _hoisted_2$19 = {
+	key: 0,
+	class: "j-navbar__brand"
+};
+var _hoisted_3$15 = ["aria-label"];
+var _hoisted_4$11 = { class: "j-navbar__end" };
+var _hoisted_5$8 = {
+	key: 0,
+	class: "j-navbar__actions"
+};
+var _hoisted_6$5 = ["aria-label"];
+var _hoisted_7$3 = {
+	key: 1,
+	class: "j-navbar__menu-footer"
+};
 //#endregion
-//#region src/components/popover/JPopover.vue
-var JPopover_default = /* @__PURE__ */ defineComponent({
-	__name: "JPopover",
+//#region src/components/navbar/JNavbar.vue
+var JNavbar_default = /* @__PURE__ */ defineComponent({
+	__name: "JNavbar",
 	props: /*@__PURE__*/ mergeModels({
-		placement: { default: "bottom" },
-		offset: { default: 8 },
-		ariaLabel: {},
-		closeOnOutside: {
+		sticky: {
 			type: Boolean,
 			default: true
 		},
-		disabled: { type: Boolean }
+		bordered: {
+			type: Boolean,
+			default: true
+		},
+		label: { default: "Main" },
+		collapse: { default: "md" },
+		maxWidth: { default: "72rem" }
 	}, {
 		"open": {
 			type: Boolean,
@@ -2493,27 +2929,267 @@ var JPopover_default = /* @__PURE__ */ defineComponent({
 		"openModifiers": {}
 	}),
 	emits: ["update:open"],
-	setup(__props, { expose: __expose }) {
+	setup(__props) {
 		const props = __props;
+		/** Mobile menu state. */
 		const open = useModel(__props, "open");
-		const id = `j-${useId()}-popover`;
-		const triggerRef = ref();
-		const triggerEl = computed(() => unrefElement(triggerRef.value));
-		const content = ref(null);
-		const { styles } = useFloating(triggerEl, content, () => ({
-			placement: props.placement,
-			offset: props.offset
-		}));
-		function close(restoreFocus = false) {
+		const menuId = `j-${useId()}-menu`;
+		const root = ref(null);
+		const menu = ref(null);
+		const breakpoints = {
+			sm: 640,
+			md: 768,
+			lg: 1024
+		};
+		function close(returnFocus = false) {
 			if (!open.value) return;
 			open.value = false;
-			if (restoreFocus) nextTick(() => focusElement(triggerEl.value));
+			if (returnFocus) nextTick(() => focusElement(root.value?.querySelector(".j-burger")));
 		}
 		useLayer({
 			active: open,
-			elements: () => [triggerEl.value, content.value],
+			elements: () => [root.value],
 			onEscape: () => close(true),
-			onPointerDownOutside: () => props.closeOnOutside && close(false)
+			onPointerDownOutside: () => close()
+		});
+		function onMenuClick(event) {
+			const target = event.target.closest("a, button");
+			if (target && !target.hasAttribute("aria-expanded")) close();
+		}
+		let media;
+		const onMediaChange = (event) => event.matches && close();
+		onMounted(() => {
+			if (props.collapse === "never") return;
+			media = window.matchMedia(`(min-width: ${breakpoints[props.collapse]}px)`);
+			media.addEventListener("change", onMediaChange);
+		});
+		onBeforeUnmount(() => media?.removeEventListener("change", onMediaChange));
+		watch(open, async (value) => {
+			if (!value) return;
+			await nextTick();
+			(menu.value?.querySelector("a, button"))?.focus({ preventScroll: true });
+		});
+		const style = computed(() => ({ "--j-navbar-max": props.maxWidth === "none" ? "none" : props.maxWidth }));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("header", {
+				ref_key: "root",
+				ref: root,
+				class: normalizeClass(["j-navbar", [`j-navbar--collapse-${__props.collapse}`, {
+					"is-sticky": __props.sticky,
+					"is-bordered": __props.bordered,
+					"is-open": open.value
+				}]]),
+				style: normalizeStyle(style.value)
+			}, [createElementVNode("div", _hoisted_1$26, [
+				_ctx.$slots.brand ? (openBlock(), createElementBlock("div", _hoisted_2$19, [renderSlot(_ctx.$slots, "brand")])) : createCommentVNode("", true),
+				_ctx.$slots.default ? (openBlock(), createElementBlock("nav", {
+					key: 1,
+					class: "j-navbar__links",
+					"aria-label": __props.label
+				}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_3$15)) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_4$11, [_ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_5$8, [renderSlot(_ctx.$slots, "actions")])) : createCommentVNode("", true), __props.collapse !== "never" && (_ctx.$slots.default || _ctx.$slots["menu-footer"]) ? (openBlock(), createBlock(JBurger_default, {
+					key: 1,
+					modelValue: open.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => open.value = $event),
+					class: "j-navbar__burger",
+					controls: menuId
+				}, null, 8, ["modelValue"])) : createCommentVNode("", true)])
+			]), createVNode(Transition, { name: "j-navbar-menu" }, {
+				default: withCtx(() => [withDirectives(createElementVNode("div", {
+					id: menuId,
+					ref_key: "menu",
+					ref: menu,
+					class: "j-navbar__menu",
+					onClick: onMenuClick
+				}, [_ctx.$slots.default ? (openBlock(), createElementBlock("nav", {
+					key: 0,
+					class: "j-navbar__menu-links",
+					"aria-label": __props.label
+				}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_6$5)) : createCommentVNode("", true), _ctx.$slots["menu-footer"] ? (openBlock(), createElementBlock("div", _hoisted_7$3, [renderSlot(_ctx.$slots, "menu-footer")])) : createCommentVNode("", true)], 512), [[vShow, open.value]])]),
+				_: 3
+			})], 6);
+		};
+	}
+});
+//#endregion
+//#region src/components/navbar/JNavbarLink.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$25 = {
+	key: 0,
+	class: "j-navbar-link__icon"
+};
+//#endregion
+//#region src/components/navbar/JNavbarLink.vue
+var JNavbarLink_default = /* @__PURE__ */ defineComponent({
+	__name: "JNavbarLink",
+	props: {
+		active: { type: Boolean },
+		as: { default: "a" }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+				class: normalizeClass(["j-navbar-link j-focusable", { "is-active": __props.active }]),
+				"aria-current": __props.active ? "page" : void 0
+			}, {
+				default: withCtx(() => [_ctx.$slots.leading ? (openBlock(), createElementBlock("span", _hoisted_1$25, [renderSlot(_ctx.$slots, "leading")])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["class", "aria-current"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/pagination/JPagination.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$24 = ["aria-label"];
+var _hoisted_2$18 = ["disabled"];
+var _hoisted_3$14 = {
+	key: 0,
+	class: "j-pagination__ellipsis",
+	"aria-hidden": "true"
+};
+var _hoisted_4$10 = [
+	"aria-current",
+	"aria-label",
+	"disabled",
+	"onClick"
+];
+var _hoisted_5$7 = ["disabled"];
+//#endregion
+//#region src/components/pagination/JPagination.vue
+var JPagination_default = /* @__PURE__ */ defineComponent({
+	__name: "JPagination",
+	props: /*@__PURE__*/ mergeModels({
+		total: {},
+		siblingCount: { default: 1 },
+		label: {},
+		size: { default: "md" },
+		disabled: { type: Boolean }
+	}, {
+		"modelValue": { default: 1 },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const model = useModel(__props, "modelValue");
+		const list = ref(null);
+		const totalPages = computed(() => Math.max(1, Math.floor(props.total)));
+		const current = computed(() => Math.min(Math.max(1, model.value), totalPages.value));
+		const pageItems = computed(() => {
+			const total = totalPages.value;
+			const siblings = Math.max(0, props.siblingCount);
+			if (total <= siblings * 2 + 5) return Array.from({ length: total }, (_, i) => i + 1);
+			const left = Math.max(current.value - siblings, 1);
+			const right = Math.min(current.value + siblings, total);
+			const showLeftEllipsis = left > 2;
+			const showRightEllipsis = right < total - 1;
+			const items = [1];
+			if (showLeftEllipsis) items.push("ellipsis");
+			else for (let p = 2; p < left; p++) items.push(p);
+			for (let p = Math.max(left, 2); p <= Math.min(right, total - 1); p++) items.push(p);
+			if (showRightEllipsis) items.push("ellipsis");
+			else for (let p = right + 1; p < total; p++) items.push(p);
+			if (total > 1) items.push(total);
+			return items;
+		});
+		function goTo(page, focus = false) {
+			if (props.disabled) return;
+			model.value = Math.min(Math.max(1, page), totalPages.value);
+			if (focus) nextTick(() => focusElement(list.value?.querySelector("[aria-current=\"page\"]")));
+		}
+		function onKeydown(event) {
+			if (!event.target.classList.contains("j-pagination__page")) return;
+			if (event.key === "Home") {
+				event.preventDefault();
+				goTo(1, true);
+			} else if (event.key === "End") {
+				event.preventDefault();
+				goTo(totalPages.value, true);
+			}
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("nav", {
+				class: normalizeClass(["j-pagination", `j-pagination--${__props.size}`]),
+				"aria-label": __props.label || "Pagination"
+			}, [
+				createElementVNode("button", {
+					type: "button",
+					class: "j-pagination__nav j-focusable",
+					"aria-label": "Previous page",
+					disabled: __props.disabled || current.value === 1,
+					onClick: _cache[0] || (_cache[0] = ($event) => goTo(current.value - 1, true))
+				}, [createVNode(unref(IconChevronLeft))], 8, _hoisted_2$18),
+				createElementVNode("ul", {
+					ref_key: "list",
+					ref: list,
+					class: "j-pagination__list",
+					onKeydown
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(pageItems.value, (item, index) => {
+					return openBlock(), createElementBlock("li", { key: index }, [item === "ellipsis" ? (openBlock(), createElementBlock("span", _hoisted_3$14, [createVNode(unref(IconMoreHorizontal))])) : (openBlock(), createElementBlock("button", {
+						key: 1,
+						type: "button",
+						class: normalizeClass(["j-pagination__page j-focusable", { "is-current": item === current.value }]),
+						"aria-current": item === current.value ? "page" : void 0,
+						"aria-label": `Page ${item}`,
+						disabled: __props.disabled,
+						onClick: ($event) => goTo(item)
+					}, toDisplayString(item), 11, _hoisted_4$10))]);
+				}), 128))], 544),
+				createElementVNode("button", {
+					type: "button",
+					class: "j-pagination__nav j-focusable",
+					"aria-label": "Next page",
+					disabled: __props.disabled || current.value === totalPages.value,
+					onClick: _cache[1] || (_cache[1] = ($event) => goTo(current.value + 1, true))
+				}, [createVNode(unref(IconChevronRight))], 8, _hoisted_5$7)
+			], 10, _hoisted_1$24);
+		};
+	}
+});
+//#endregion
+//#region src/components/popover/JPopover.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$23 = ["aria-label"];
+//#endregion
+//#region src/components/popover/JPopover.vue
+var JPopover_default = /* @__PURE__ */ defineComponent({
+	__name: "JPopover",
+	props: /*@__PURE__*/ mergeModels({
+		placement: { default: "bottom" },
+		offset: { default: 8 },
+		ariaLabel: {},
+		closeOnOutside: {
+			type: Boolean,
+			default: true
+		},
+		disabled: { type: Boolean }
+	}, {
+		"open": {
+			type: Boolean,
+			default: false
+		},
+		"openModifiers": {}
+	}),
+	emits: ["update:open"],
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const open = useModel(__props, "open");
+		const id = `j-${useId()}-popover`;
+		const triggerRef = ref();
+		const triggerEl = computed(() => unrefElement(triggerRef.value));
+		const content = ref(null);
+		const { styles } = useFloating(triggerEl, content, () => ({
+			placement: props.placement,
+			offset: props.offset
+		}));
+		function close(restoreFocus = false) {
+			if (!open.value) return;
+			open.value = false;
+			if (restoreFocus) nextTick(() => focusElement(triggerEl.value));
+		}
+		useLayer({
+			active: open,
+			elements: () => [triggerEl.value, content.value],
+			onEscape: () => close(true),
+			onPointerDownOutside: () => props.closeOnOutside && close(false)
 		});
 		watch(open, async (value) => {
 			if (!value) return;
@@ -2561,7 +3237,7 @@ var JPopover_default = /* @__PURE__ */ defineComponent({
 						style: normalizeStyle(unref(styles)),
 						"aria-label": __props.ariaLabel,
 						onFocusout: onFocusOut
-					}, [renderSlot(_ctx.$slots, "default", { close: () => close(true) })], 44, _hoisted_1$12)) : createCommentVNode("", true)]),
+					}, [renderSlot(_ctx.$slots, "default", { close: () => close(true) })], 44, _hoisted_1$23)) : createCommentVNode("", true)]),
 					_: 3
 				})]),
 				_: 3
@@ -2571,16 +3247,16 @@ var JPopover_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/progress/JProgress.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$11 = {
+var _hoisted_1$22 = {
 	key: 0,
 	class: "j-progress__header"
 };
-var _hoisted_2$9 = ["id"];
-var _hoisted_3$7 = {
+var _hoisted_2$17 = ["id"];
+var _hoisted_3$13 = {
 	key: 1,
 	class: "j-progress__value"
 };
-var _hoisted_4$5 = [
+var _hoisted_4$9 = [
 	"aria-labelledby",
 	"aria-valuemax",
 	"aria-valuenow",
@@ -2609,11 +3285,11 @@ var JProgress_default = /* @__PURE__ */ defineComponent({
 				`j-progress--${__props.size}`,
 				`j-progress--${__props.variant}`,
 				{ "is-indeterminate": indeterminate.value }
-			]]) }, [__props.label || __props.showValue ? (openBlock(), createElementBlock("div", _hoisted_1$11, [__props.label ? (openBlock(), createElementBlock("span", {
+			]]) }, [__props.label || __props.showValue ? (openBlock(), createElementBlock("div", _hoisted_1$22, [__props.label ? (openBlock(), createElementBlock("span", {
 				key: 0,
 				id: `${id}-label`,
 				class: "j-progress__label"
-			}, toDisplayString(__props.label), 9, _hoisted_2$9)) : createCommentVNode("", true), __props.showValue && !indeterminate.value ? (openBlock(), createElementBlock("span", _hoisted_3$7, toDisplayString(percent.value) + "%", 1)) : createCommentVNode("", true)])) : createCommentVNode("", true), createElementVNode("div", {
+			}, toDisplayString(__props.label), 9, _hoisted_2$17)) : createCommentVNode("", true), __props.showValue && !indeterminate.value ? (openBlock(), createElementBlock("span", _hoisted_3$13, toDisplayString(percent.value) + "%", 1)) : createCommentVNode("", true)])) : createCommentVNode("", true), createElementVNode("div", {
 				class: "j-progress__track",
 				role: "progressbar",
 				"aria-labelledby": __props.label ? `${id}-label` : void 0,
@@ -2624,7 +3300,7 @@ var JProgress_default = /* @__PURE__ */ defineComponent({
 			}, [createElementVNode("span", {
 				class: "j-progress__fill",
 				style: normalizeStyle(indeterminate.value ? void 0 : { transform: `scaleX(${ratio.value})` })
-			}, null, 4)], 8, _hoisted_4$5)], 2);
+			}, null, 4)], 8, _hoisted_4$9)], 2);
 		};
 	}
 });
@@ -2633,9 +3309,9 @@ var JProgress_default = /* @__PURE__ */ defineComponent({
 var RADIO_GROUP = Symbol("JRadioGroup");
 //#endregion
 //#region src/components/radio/JRadio.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$10 = ["data-state"];
-var _hoisted_2$8 = { class: "j-radio__control" };
-var _hoisted_3$6 = [
+var _hoisted_1$21 = ["data-state"];
+var _hoisted_2$16 = { class: "j-radio__control" };
+var _hoisted_3$12 = [
 	"name",
 	"value",
 	"checked",
@@ -2643,7 +3319,7 @@ var _hoisted_3$6 = [
 	"required",
 	"aria-describedby"
 ];
-var _hoisted_4$4 = {
+var _hoisted_4$8 = {
 	key: 0,
 	class: "j-radio__text"
 };
@@ -2670,7 +3346,7 @@ var JRadio_default = /* @__PURE__ */ defineComponent({
 				class: normalizeClass(["j-radio", [_ctx.$attrs.class, { "is-disabled": isDisabled.value }]]),
 				style: normalizeStyle(_ctx.$attrs.style),
 				"data-state": checked.value ? "checked" : "unchecked"
-			}, [createElementVNode("span", _hoisted_2$8, [createElementVNode("input", mergeProps({ id }, {
+			}, [createElementVNode("span", _hoisted_2$16, [createElementVNode("input", mergeProps({ id }, {
 				..._ctx.$attrs,
 				class: void 0,
 				style: void 0
@@ -2684,10 +3360,10 @@ var JRadio_default = /* @__PURE__ */ defineComponent({
 				required: unref(group)?.required.value,
 				"aria-describedby": __props.description || _ctx.$slots.description ? descriptionId : void 0,
 				onChange: _cache[0] || (_cache[0] = ($event) => unref(group)?.select(__props.value))
-			}), null, 16, _hoisted_3$6), _cache[1] || (_cache[1] = createElementVNode("span", {
+			}), null, 16, _hoisted_3$12), _cache[1] || (_cache[1] = createElementVNode("span", {
 				class: "j-radio__circle",
 				"aria-hidden": "true"
-			}, null, -1))]), __props.label || _ctx.$slots.default || __props.description || _ctx.$slots.description ? (openBlock(), createElementBlock("span", _hoisted_4$4, [__props.label || _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
+			}, null, -1))]), __props.label || _ctx.$slots.default || __props.description || _ctx.$slots.description ? (openBlock(), createElementBlock("span", _hoisted_4$8, [__props.label || _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
 				key: 0,
 				for: id,
 				class: "j-radio__label"
@@ -2695,23 +3371,23 @@ var JRadio_default = /* @__PURE__ */ defineComponent({
 				key: 1,
 				id: descriptionId,
 				class: "j-radio__description"
-			}, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])])) : createCommentVNode("", true)])) : createCommentVNode("", true)], 14, _hoisted_1$10);
+			}, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])])) : createCommentVNode("", true)])) : createCommentVNode("", true)], 14, _hoisted_1$21);
 		};
 	}
 });
 //#endregion
 //#region src/components/radio/JRadioGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$9 = [
+var _hoisted_1$20 = [
 	"disabled",
 	"aria-describedby",
 	"aria-invalid",
 	"aria-required"
 ];
-var _hoisted_2$7 = {
+var _hoisted_2$15 = {
 	key: 0,
 	class: "j-radio-group__legend"
 };
-var _hoisted_3$5 = {
+var _hoisted_3$11 = {
 	key: 0,
 	class: "j-field__required",
 	"aria-hidden": "true"
@@ -2765,7 +3441,7 @@ var JRadioGroup_default = /* @__PURE__ */ defineComponent({
 				"aria-invalid": !!__props.error || void 0,
 				"aria-required": __props.required || void 0
 			}, [
-				__props.label || _ctx.$slots.label ? (openBlock(), createElementBlock("legend", _hoisted_2$7, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)]), __props.required ? (openBlock(), createElementBlock("span", _hoisted_3$5, "*")) : createCommentVNode("", true)])) : createCommentVNode("", true),
+				__props.label || _ctx.$slots.label ? (openBlock(), createElementBlock("legend", _hoisted_2$15, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)]), __props.required ? (openBlock(), createElementBlock("span", _hoisted_3$11, "*")) : createCommentVNode("", true)])) : createCommentVNode("", true),
 				__props.description && !errorMessage.value ? (openBlock(), createElementBlock("p", {
 					key: 1,
 					id: descriptionId,
@@ -2777,13 +3453,121 @@ var JRadioGroup_default = /* @__PURE__ */ defineComponent({
 					id: errorId,
 					class: "j-radio-group__error"
 				}, toDisplayString(errorMessage.value), 1)) : createCommentVNode("", true)
-			], 10, _hoisted_1$9);
+			], 10, _hoisted_1$20);
+		};
+	}
+});
+//#endregion
+//#region src/components/rating/JRating.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$19 = [
+	"role",
+	"aria-label",
+	"aria-disabled"
+];
+var _hoisted_2$14 = [
+	"aria-checked",
+	"aria-label",
+	"tabindex",
+	"disabled",
+	"onClick",
+	"onMouseenter",
+	"onFocus"
+];
+//#endregion
+//#region src/components/rating/JRating.vue
+var JRating_default = /* @__PURE__ */ defineComponent({
+	__name: "JRating",
+	props: /*@__PURE__*/ mergeModels({
+		max: { default: 5 },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		size: { default: "md" },
+		label: {},
+		allowHalf: { type: Boolean }
+	}, {
+		"modelValue": { default: 0 },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const model = useModel(__props, "modelValue");
+		const hovered = ref(null);
+		const stars = computed(() => Array.from({ length: props.max }, (_, i) => i + 1));
+		const display = computed(() => hovered.value ?? model.value);
+		function fillFor(star) {
+			const value = display.value;
+			if (value >= star) return 1;
+			if (props.readonly && props.allowHalf && value >= star - .5) return .5;
+			return 0;
+		}
+		function select(star) {
+			if (props.readonly || props.disabled) return;
+			model.value = star;
+		}
+		function onKeydown(event) {
+			if (props.readonly || props.disabled) return;
+			let next;
+			if (event.key === "ArrowRight" || event.key === "ArrowUp") next = Math.min(props.max, model.value + 1);
+			else if (event.key === "ArrowLeft" || event.key === "ArrowDown") next = Math.max(0, model.value - 1);
+			else if (event.key === "Home") next = 0;
+			else if (event.key === "End") next = props.max;
+			if (next === void 0) return;
+			event.preventDefault();
+			model.value = next;
+		}
+		const groupLabel = computed(() => props.label ?? (props.readonly ? `${model.value} out of ${props.max} stars` : "Rating"));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["j-rating", [`j-rating--${__props.size}`, {
+					"is-readonly": __props.readonly,
+					"is-disabled": __props.disabled
+				}]]),
+				role: __props.readonly ? "img" : "radiogroup",
+				"aria-label": groupLabel.value,
+				"aria-disabled": __props.disabled || void 0,
+				onMouseleave: _cache[1] || (_cache[1] = ($event) => hovered.value = null)
+			}, [__props.readonly ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(stars.value, (star) => {
+				return openBlock(), createElementBlock("span", {
+					key: star,
+					class: "j-rating__star",
+					"aria-hidden": "true"
+				}, [_cache[3] || (_cache[3] = createElementVNode("svg", {
+					viewBox: "0 0 16 16",
+					class: "j-rating__star-bg"
+				}, [createElementVNode("path", { d: "M8 1.5l1.98 4.01 4.42.64-3.2 3.12.76 4.4L8 11.6l-3.96 2.08.76-4.4-3.2-3.12 4.42-.64z" })], -1)), createElementVNode("span", {
+					class: "j-rating__star-fill",
+					style: normalizeStyle({ width: `${fillFor(star) * 100}%` })
+				}, [..._cache[2] || (_cache[2] = [createElementVNode("svg", { viewBox: "0 0 16 16" }, [createElementVNode("path", { d: "M8 1.5l1.98 4.01 4.42.64-3.2 3.12.76 4.4L8 11.6l-3.96 2.08.76-4.4-3.2-3.12 4.42-.64z" })], -1)])], 4)]);
+			}), 128)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(stars.value, (star) => {
+				return openBlock(), createElementBlock("button", {
+					key: star,
+					type: "button",
+					role: "radio",
+					class: "j-rating__button j-focusable",
+					"aria-checked": model.value === star,
+					"aria-label": `${star} ${star === 1 ? "star" : "stars"}`,
+					tabindex: __props.disabled ? -1 : model.value === star || model.value === 0 && star === 1 ? 0 : -1,
+					disabled: __props.disabled,
+					onClick: ($event) => select(star),
+					onMouseenter: ($event) => hovered.value = star,
+					onFocus: ($event) => hovered.value = star,
+					onBlur: _cache[0] || (_cache[0] = ($event) => hovered.value = null),
+					onKeydown
+				}, [_cache[5] || (_cache[5] = createElementVNode("svg", {
+					viewBox: "0 0 16 16",
+					class: "j-rating__star-bg"
+				}, [createElementVNode("path", { d: "M8 1.5l1.98 4.01 4.42.64-3.2 3.12.76 4.4L8 11.6l-3.96 2.08.76-4.4-3.2-3.12 4.42-.64z" })], -1)), createElementVNode("span", {
+					class: "j-rating__star-fill",
+					style: normalizeStyle({ width: `${fillFor(star) * 100}%` })
+				}, [..._cache[4] || (_cache[4] = [createElementVNode("svg", { viewBox: "0 0 16 16" }, [createElementVNode("path", { d: "M8 1.5l1.98 4.01 4.42.64-3.2 3.12.76 4.4L8 11.6l-3.96 2.08.76-4.4-3.2-3.12 4.42-.64z" })], -1)])], 4)], 40, _hoisted_2$14);
+			}), 128))], 42, _hoisted_1$19);
 		};
 	}
 });
 //#endregion
 //#region src/components/select/JSelect.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$8 = [
+var _hoisted_1$18 = [
 	"id",
 	"aria-expanded",
 	"aria-controls",
@@ -2794,18 +3578,18 @@ var _hoisted_1$8 = [
 	"aria-required",
 	"disabled"
 ];
-var _hoisted_2$6 = ["id"];
-var _hoisted_3$4 = ["name", "value"];
-var _hoisted_4$3 = ["id", "aria-labelledby"];
-var _hoisted_5$3 = [
+var _hoisted_2$13 = ["id"];
+var _hoisted_3$10 = ["name", "value"];
+var _hoisted_4$7 = ["id", "aria-labelledby"];
+var _hoisted_5$6 = [
 	"id",
 	"aria-selected",
 	"aria-disabled",
 	"onPointermove",
 	"onClick"
 ];
-var _hoisted_6$2 = { class: "j-select__option-text" };
-var _hoisted_7 = { class: "j-select__option-label" };
+var _hoisted_6$4 = { class: "j-select__option-text" };
+var _hoisted_7$2 = { class: "j-select__option-label" };
 var _hoisted_8 = {
 	key: 0,
 	class: "j-select__option-description"
@@ -3043,13 +3827,13 @@ var JSelect_default = /* @__PURE__ */ defineComponent({
 					}), [createElementVNode("span", {
 						id: valueId.value,
 						class: normalizeClass(["j-select__value", { "is-placeholder": !selected.value }])
-					}, [selected.value ? renderSlot(_ctx.$slots, "value", { option: selected.value }, () => [createTextVNode(toDisplayString(selected.value.label), 1)], void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(__props.placeholder), 1)], 64))], 10, _hoisted_2$6), createVNode(unref(IconChevronUpDown), { class: "j-select__chevron" })], 16, _hoisted_1$8),
+					}, [selected.value ? renderSlot(_ctx.$slots, "value", { option: selected.value }, () => [createTextVNode(toDisplayString(selected.value.label), 1)], void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(__props.placeholder), 1)], 64))], 10, _hoisted_2$13), createVNode(unref(IconChevronUpDown), { class: "j-select__chevron" })], 16, _hoisted_1$18),
 					__props.name ? (openBlock(), createElementBlock("input", {
 						key: 0,
 						type: "hidden",
 						name: __props.name,
 						value: model.value ?? ""
-					}, null, 8, _hoisted_3$4)) : createCommentVNode("", true),
+					}, null, 8, _hoisted_3$10)) : createCommentVNode("", true),
 					createVNode(JPortal_default, null, {
 						default: withCtx(() => [createVNode(Transition, { name: "j-pop" }, {
 							default: withCtx(() => [open.value ? (openBlock(), createElementBlock("ul", {
@@ -3076,12 +3860,12 @@ var JSelect_default = /* @__PURE__ */ defineComponent({
 									"aria-disabled": option.disabled || void 0,
 									onPointermove: ($event) => onOptionPointerMove(index),
 									onClick: ($event) => commit(index)
-								}, [createElementVNode("span", _hoisted_6$2, [renderSlot(_ctx.$slots, "option", {
+								}, [createElementVNode("span", _hoisted_6$4, [renderSlot(_ctx.$slots, "option", {
 									option,
 									selected: option.value === model.value,
 									active: index === activeIndex.value
-								}, () => [createElementVNode("span", _hoisted_7, toDisplayString(option.label), 1), option.description ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(option.description), 1)) : createCommentVNode("", true)])]), createVNode(unref(IconCheck), { class: "j-select__check" })], 42, _hoisted_5$3);
-							}), 128)), visibleOptions.value.length === 0 ? (openBlock(), createElementBlock("li", _hoisted_9, " No options ")) : createCommentVNode("", true)], 46, _hoisted_4$3)) : createCommentVNode("", true)]),
+								}, () => [createElementVNode("span", _hoisted_7$2, toDisplayString(option.label), 1), option.description ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(option.description), 1)) : createCommentVNode("", true)])]), createVNode(unref(IconCheck), { class: "j-select__check" })], 42, _hoisted_5$6);
+							}), 128)), visibleOptions.value.length === 0 ? (openBlock(), createElementBlock("li", _hoisted_9, " No options ")) : createCommentVNode("", true)], 46, _hoisted_4$7)) : createCommentVNode("", true)]),
 							_: 3
 						})]),
 						_: 3
@@ -3111,8 +3895,8 @@ var JSelect_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/separator/JSeparator.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$7 = ["role", "aria-orientation"];
-var _hoisted_2$5 = {
+var _hoisted_1$17 = ["role", "aria-orientation"];
+var _hoisted_2$12 = {
 	key: 0,
 	class: "j-separator__label"
 };
@@ -3134,28 +3918,28 @@ var JSeparator_default = /* @__PURE__ */ defineComponent({
 				class: normalizeClass(["j-separator", [`j-separator--${__props.orientation}`, { "j-separator--labelled": __props.label || _ctx.$slots.default }]]),
 				role: __props.decorative ? "none" : "separator",
 				"aria-orientation": __props.decorative ? void 0 : __props.orientation
-			}, [__props.label || _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_2$5, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])])) : createCommentVNode("", true)], 10, _hoisted_1$7);
+			}, [__props.label || _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_2$12, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])])) : createCommentVNode("", true)], 10, _hoisted_1$17);
 		};
 	}
 });
 //#endregion
 //#region src/components/sheet/JSheet.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$6 = {
+var _hoisted_1$16 = {
 	key: 0,
 	class: "j-sheet__overlay",
 	"aria-hidden": "true"
 };
-var _hoisted_2$4 = [
+var _hoisted_2$11 = [
 	"aria-labelledby",
 	"aria-label",
 	"aria-describedby"
 ];
-var _hoisted_3$3 = {
+var _hoisted_3$9 = {
 	key: 0,
 	class: "j-sheet__header"
 };
-var _hoisted_4$2 = { class: "j-sheet__body" };
-var _hoisted_5$2 = {
+var _hoisted_4$6 = { class: "j-sheet__body" };
+var _hoisted_5$5 = {
 	key: 1,
 	class: "j-sheet__footer"
 };
@@ -3207,7 +3991,7 @@ var JSheet_default = /* @__PURE__ */ defineComponent({
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(JPortal_default, null, {
 				default: withCtx(() => [createVNode(Transition, { name: "j-sheet-overlay" }, {
-					default: withCtx(() => [open.value ? (openBlock(), createElementBlock("div", _hoisted_1$6)) : createCommentVNode("", true)]),
+					default: withCtx(() => [open.value ? (openBlock(), createElementBlock("div", _hoisted_1$16)) : createCommentVNode("", true)]),
 					_: 1
 				}), createVNode(Transition, {
 					name: "j-sheet",
@@ -3238,7 +4022,7 @@ var JSheet_default = /* @__PURE__ */ defineComponent({
 						"aria-describedby": __props.description ? descriptionId : void 0,
 						onAnimationend: _cache[0] || (_cache[0] = ($event) => nudging.value = false)
 					}, [
-						__props.title || __props.description || _ctx.$slots.header ? (openBlock(), createElementBlock("header", _hoisted_3$3, [renderSlot(_ctx.$slots, "header", {
+						__props.title || __props.description || _ctx.$slots.header ? (openBlock(), createElementBlock("header", _hoisted_3$9, [renderSlot(_ctx.$slots, "header", {
 							titleId,
 							descriptionId
 						}, () => [createElementVNode("h2", {
@@ -3249,8 +4033,8 @@ var JSheet_default = /* @__PURE__ */ defineComponent({
 							id: descriptionId,
 							class: "j-sheet__description"
 						}, toDisplayString(__props.description), 1)) : createCommentVNode("", true)])])) : createCommentVNode("", true),
-						createElementVNode("div", _hoisted_4$2, [renderSlot(_ctx.$slots, "default", { close })]),
-						_ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_5$2, [renderSlot(_ctx.$slots, "footer", { close })])) : createCommentVNode("", true),
+						createElementVNode("div", _hoisted_4$6, [renderSlot(_ctx.$slots, "default", { close })]),
+						_ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_5$5, [renderSlot(_ctx.$slots, "footer", { close })])) : createCommentVNode("", true),
 						!__props.hideClose ? (openBlock(), createElementBlock("button", {
 							key: 2,
 							type: "button",
@@ -3258,7 +4042,7 @@ var JSheet_default = /* @__PURE__ */ defineComponent({
 							"aria-label": "Close",
 							onClick: close
 						}, [createVNode(unref(IconX))])) : createCommentVNode("", true)
-					], 42, _hoisted_2$4)], 34)) : createCommentVNode("", true)]),
+					], 42, _hoisted_2$11)], 34)) : createCommentVNode("", true)]),
 					_: 3
 				})]),
 				_: 3
@@ -3267,6 +4051,139 @@ var JSheet_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/sidebar/JSidebar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$15 = { class: "j-sidebar" };
+var _hoisted_2$10 = {
+	key: 0,
+	class: "j-sidebar__header"
+};
+var _hoisted_3$8 = ["aria-label"];
+var _hoisted_4$5 = {
+	key: 1,
+	class: "j-sidebar__footer"
+};
+//#endregion
+//#region src/components/sidebar/JSidebar.vue
+var JSidebar_default = /* @__PURE__ */ defineComponent({
+	__name: "JSidebar",
+	props: { label: { default: "Sidebar" } },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("aside", _hoisted_1$15, [
+				_ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_2$10, [renderSlot(_ctx.$slots, "header")])) : createCommentVNode("", true),
+				createElementVNode("nav", {
+					class: "j-sidebar__nav",
+					"aria-label": __props.label
+				}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_3$8),
+				_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_4$5, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true)
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/components/sidebar/JSidebarGroup.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$14 = ["data-state"];
+var _hoisted_2$9 = ["aria-expanded"];
+var _hoisted_3$7 = ["aria-labelledby", "inert"];
+var _hoisted_4$4 = { class: "j-sidebar-group__panel-inner" };
+var _hoisted_5$4 = { class: "j-sidebar-group__items" };
+//#endregion
+//#region src/components/sidebar/JSidebarGroup.vue
+var JSidebarGroup_default = /* @__PURE__ */ defineComponent({
+	__name: "JSidebarGroup",
+	props: /*@__PURE__*/ mergeModels({
+		title: {},
+		collapsible: {
+			type: Boolean,
+			default: true
+		}
+	}, {
+		"open": {
+			type: Boolean,
+			default: true
+		},
+		"openModifiers": {}
+	}),
+	emits: ["update:open"],
+	setup(__props) {
+		/** Whether the group is expanded. Open by default. */
+		const open = useModel(__props, "open");
+		const id = `j-${useId()}`;
+		const titleId = `${id}-title`;
+		const listId = `${id}-list`;
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "j-sidebar-group",
+				"data-state": open.value ? "open" : "closed"
+			}, [__props.title && __props.collapsible ? (openBlock(), createElementBlock("button", {
+				key: 0,
+				id: titleId,
+				type: "button",
+				class: "j-sidebar-group__title j-sidebar-group__toggle j-focusable",
+				"aria-expanded": open.value,
+				"aria-controls": listId,
+				onClick: _cache[0] || (_cache[0] = ($event) => open.value = !open.value)
+			}, [createElementVNode("span", null, toDisplayString(__props.title), 1), createVNode(unref(IconChevronDown), { class: "j-sidebar-group__chevron" })], 8, _hoisted_2$9)) : __props.title ? (openBlock(), createElementBlock("p", {
+				key: 1,
+				id: titleId,
+				class: "j-sidebar-group__title"
+			}, toDisplayString(__props.title), 1)) : createCommentVNode("", true), createElementVNode("div", {
+				id: listId,
+				class: "j-sidebar-group__panel",
+				role: "group",
+				"aria-labelledby": __props.title ? titleId : void 0,
+				inert: !open.value
+			}, [createElementVNode("div", _hoisted_4$4, [createElementVNode("div", _hoisted_5$4, [renderSlot(_ctx.$slots, "default")])])], 8, _hoisted_3$7)], 8, _hoisted_1$14);
+		};
+	}
+});
+//#endregion
+//#region src/components/sidebar/JSidebarItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$13 = {
+	key: 0,
+	class: "j-sidebar-item__icon"
+};
+var _hoisted_2$8 = { class: "j-sidebar-item__label" };
+var _hoisted_3$6 = {
+	key: 1,
+	class: "j-sidebar-item__trailing"
+};
+//#endregion
+//#region src/components/sidebar/JSidebarItem.vue
+var JSidebarItem_default = /* @__PURE__ */ defineComponent({
+	__name: "JSidebarItem",
+	props: {
+		active: { type: Boolean },
+		disabled: { type: Boolean },
+		as: { default: "a" }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+				class: normalizeClass(["j-sidebar-item j-focusable", {
+					"is-active": __props.active,
+					"is-disabled": __props.disabled
+				}]),
+				"aria-current": __props.active ? "page" : void 0,
+				"aria-disabled": __props.disabled || void 0,
+				tabindex: __props.disabled ? -1 : void 0
+			}, {
+				default: withCtx(() => [
+					_ctx.$slots.leading ? (openBlock(), createElementBlock("span", _hoisted_1$13, [renderSlot(_ctx.$slots, "leading")])) : createCommentVNode("", true),
+					createElementVNode("span", _hoisted_2$8, [renderSlot(_ctx.$slots, "default")]),
+					_ctx.$slots.trailing ? (openBlock(), createElementBlock("span", _hoisted_3$6, [renderSlot(_ctx.$slots, "trailing")])) : createCommentVNode("", true)
+				]),
+				_: 3
+			}, 8, [
+				"class",
+				"aria-current",
+				"aria-disabled",
+				"tabindex"
+			]);
+		};
+	}
+});
+//#endregion
 //#region src/components/skeleton/JSkeleton.vue
 var JSkeleton_default = /* @__PURE__ */ defineComponent({
 	__name: "JSkeleton",
@@ -3307,9 +4224,178 @@ var JSkeleton_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/slider/JSlider.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$12 = [
+	"tabindex",
+	"aria-label",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-valuetext",
+	"aria-disabled",
+	"onPointerdown",
+	"onKeydown"
+];
+var _hoisted_2$7 = {
+	key: 0,
+	class: "j-slider__bubble"
+};
+//#endregion
+//#region src/components/slider/JSlider.vue
+var JSlider_default = /* @__PURE__ */ defineComponent({
+	__name: "JSlider",
+	props: /*@__PURE__*/ mergeModels({
+		min: { default: 0 },
+		max: { default: 100 },
+		step: { default: 1 },
+		disabled: { type: Boolean },
+		label: {},
+		size: { default: "md" },
+		showValue: { type: Boolean },
+		format: {}
+	}, {
+		"modelValue": { default: 0 },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		/** A single value, or a `[low, high]` tuple for a range slider. */
+		const model = useModel(__props, "modelValue");
+		const track = ref(null);
+		const activeThumb = ref(null);
+		const isRange = computed(() => Array.isArray(model.value));
+		const values = computed(() => Array.isArray(model.value) ? model.value : [model.value]);
+		function clamp(value) {
+			const stepped = Math.round((value - props.min) / props.step) * props.step + props.min;
+			const rounded = Number(stepped.toFixed(6));
+			return Math.min(props.max, Math.max(props.min, rounded));
+		}
+		function setValue(index, raw) {
+			if (props.disabled) return;
+			const next = [...values.value];
+			let value = clamp(raw);
+			if (isRange.value) {
+				const lower = index === 0 ? props.min : next[index - 1];
+				const upper = index === next.length - 1 ? props.max : next[index + 1];
+				value = Math.min(upper, Math.max(lower, value));
+			}
+			next[index] = value;
+			model.value = isRange.value ? [next[0], next[1]] : next[0];
+		}
+		function percent(value) {
+			if (props.max === props.min) return 0;
+			return (value - props.min) / (props.max - props.min) * 100;
+		}
+		function valueFromClientX(clientX) {
+			const rect = track.value.getBoundingClientRect();
+			const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+			return props.min + ratio * (props.max - props.min);
+		}
+		function nearestThumb(value) {
+			let nearest = 0;
+			let best = Infinity;
+			values.value.forEach((v, i) => {
+				const dist = Math.abs(v - value);
+				if (dist < best) {
+					best = dist;
+					nearest = i;
+				}
+			});
+			return nearest;
+		}
+		function onPointerMove(event) {
+			if (activeThumb.value === null) return;
+			setValue(activeThumb.value, valueFromClientX(event.clientX));
+		}
+		function onPointerUp() {
+			activeThumb.value = null;
+			window.removeEventListener("pointermove", onPointerMove);
+			window.removeEventListener("pointerup", onPointerUp);
+		}
+		function startDrag(index) {
+			activeThumb.value = index;
+			window.addEventListener("pointermove", onPointerMove);
+			window.addEventListener("pointerup", onPointerUp);
+		}
+		function onTrackPointerDown(event) {
+			if (props.disabled) return;
+			const value = valueFromClientX(event.clientX);
+			const index = nearestThumb(value);
+			setValue(index, value);
+			startDrag(index);
+		}
+		function onThumbPointerDown(index, event) {
+			if (props.disabled) return;
+			event.stopPropagation();
+			event.currentTarget.focus();
+			startDrag(index);
+		}
+		function onKeydown(index, event) {
+			if (props.disabled) return;
+			const big = props.step * 10 || (props.max - props.min) / 10;
+			const current = values.value[index];
+			let next;
+			if (event.key === "ArrowRight" || event.key === "ArrowUp") next = current + props.step;
+			else if (event.key === "ArrowLeft" || event.key === "ArrowDown") next = current - props.step;
+			else if (event.key === "PageUp") next = current + big;
+			else if (event.key === "PageDown") next = current - big;
+			else if (event.key === "Home") next = props.min;
+			else if (event.key === "End") next = props.max;
+			if (next === void 0) return;
+			event.preventDefault();
+			setValue(index, next);
+		}
+		function display(value) {
+			return props.format ? props.format(value) : String(Math.round(value * 100) / 100);
+		}
+		const fillStyle = computed(() => {
+			if (isRange.value) {
+				const [a, b] = values.value;
+				return {
+					left: `${percent(a)}%`,
+					width: `${Math.max(0, percent(b) - percent(a))}%`
+				};
+			}
+			return {
+				left: "0%",
+				width: `${percent(values.value[0])}%`
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["j-slider", [`j-slider--${__props.size}`, { "is-disabled": __props.disabled }]]) }, [createElementVNode("div", {
+				ref_key: "track",
+				ref: track,
+				class: "j-slider__track",
+				onPointerdown: onTrackPointerDown
+			}, [createElementVNode("span", {
+				class: "j-slider__range",
+				style: normalizeStyle(fillStyle.value)
+			}, null, 4), (openBlock(true), createElementBlock(Fragment, null, renderList(values.value, (value, index) => {
+				return openBlock(), createElementBlock("span", {
+					key: index,
+					class: normalizeClass(["j-slider__thumb j-focusable", { "is-dragging": activeThumb.value === index }]),
+					role: "slider",
+					tabindex: __props.disabled ? -1 : 0,
+					"aria-label": __props.label,
+					"aria-orientation": "horizontal",
+					"aria-valuemin": __props.min,
+					"aria-valuemax": __props.max,
+					"aria-valuenow": value,
+					"aria-valuetext": display(value),
+					"aria-disabled": __props.disabled || void 0,
+					style: normalizeStyle({ left: `${percent(value)}%` }),
+					onPointerdown: ($event) => onThumbPointerDown(index, $event),
+					onKeydown: ($event) => onKeydown(index, $event)
+				}, [__props.showValue ? (openBlock(), createElementBlock("span", _hoisted_2$7, toDisplayString(display(value)), 1)) : createCommentVNode("", true)], 46, _hoisted_1$12);
+			}), 128))], 544)], 2);
+		};
+	}
+});
+//#endregion
 //#region src/components/spinner/JSpinner.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$5 = ["role"];
-var _hoisted_2$3 = {
+var _hoisted_1$11 = ["role"];
+var _hoisted_2$6 = {
 	key: 0,
 	class: "j-sr-only"
 };
@@ -3332,27 +4418,72 @@ var JSpinner_default = /* @__PURE__ */ defineComponent({
 			return openBlock(), createElementBlock("span", {
 				class: "j-spinner-wrap",
 				role: __props.label ? "status" : void 0
-			}, [createVNode(unref(Spinner), { size: pixels.value }, null, 8, ["size"]), __props.label ? (openBlock(), createElementBlock("span", _hoisted_2$3, toDisplayString(__props.label), 1)) : createCommentVNode("", true)], 8, _hoisted_1$5);
+			}, [createVNode(unref(Spinner), { size: pixels.value }, null, 8, ["size"]), __props.label ? (openBlock(), createElementBlock("span", _hoisted_2$6, toDisplayString(__props.label), 1)) : createCommentVNode("", true)], 8, _hoisted_1$11);
+		};
+	}
+});
+//#endregion
+//#region src/components/stat/JStat.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$10 = { class: "j-stat" };
+var _hoisted_2$5 = { class: "j-stat__header" };
+var _hoisted_3$5 = {
+	key: 0,
+	class: "j-stat__icon",
+	"aria-hidden": "true"
+};
+var _hoisted_4$3 = { class: "j-stat__label" };
+var _hoisted_5$3 = { class: "j-stat__row" };
+var _hoisted_6$3 = { class: "j-stat__value" };
+var _hoisted_7$1 = {
+	key: 0,
+	class: "j-stat__description"
+};
+//#endregion
+//#region src/components/stat/JStat.vue
+var JStat_default = /* @__PURE__ */ defineComponent({
+	__name: "JStat",
+	props: {
+		label: {},
+		value: {},
+		delta: {},
+		trend: {},
+		description: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const trendIcon = computed(() => props.trend === "up" ? IconArrowUpRight : props.trend === "down" ? IconArrowDownRight : null);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$10, [
+				createElementVNode("div", _hoisted_2$5, [_ctx.$slots.icon ? (openBlock(), createElementBlock("span", _hoisted_3$5, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true), createElementVNode("span", _hoisted_4$3, toDisplayString(__props.label), 1)]),
+				createElementVNode("div", _hoisted_5$3, [createElementVNode("span", _hoisted_6$3, toDisplayString(__props.value), 1), __props.delta ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(["j-stat__delta", __props.trend ? `j-stat__delta--${__props.trend}` : void 0])
+				}, [trendIcon.value ? (openBlock(), createBlock(resolveDynamicComponent(trendIcon.value), {
+					key: 0,
+					"aria-hidden": "true"
+				})) : createCommentVNode("", true), createTextVNode(" " + toDisplayString(__props.delta), 1)], 2)) : createCommentVNode("", true)]),
+				__props.description ? (openBlock(), createElementBlock("p", _hoisted_7$1, toDisplayString(__props.description), 1)) : createCommentVNode("", true)
+			]);
 		};
 	}
 });
 //#endregion
 //#region src/components/switch/JSwitch.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$4 = ["data-state"];
-var _hoisted_2$2 = [
+var _hoisted_1$9 = ["data-state"];
+var _hoisted_2$4 = [
 	"id",
 	"aria-checked",
 	"aria-labelledby",
 	"aria-describedby",
 	"disabled"
 ];
-var _hoisted_3$2 = ["name", "value"];
-var _hoisted_4$1 = {
+var _hoisted_3$4 = ["name", "value"];
+var _hoisted_4$2 = {
 	key: 1,
 	class: "j-switch__text"
 };
-var _hoisted_5$1 = ["id", "for"];
-var _hoisted_6$1 = ["id"];
+var _hoisted_5$2 = ["id", "for"];
+var _hoisted_6$2 = ["id"];
 //#endregion
 //#region src/components/switch/JSwitch.vue
 var JSwitch_default = /* @__PURE__ */ defineComponent({
@@ -3414,31 +4545,31 @@ var JSwitch_default = /* @__PURE__ */ defineComponent({
 					"aria-describedby": __props.description || _ctx.$slots.description ? descriptionId.value : void 0,
 					disabled: __props.disabled,
 					onClick: toggle
-				}), [..._cache[0] || (_cache[0] = [createElementVNode("span", { class: "j-switch__thumb" }, null, -1)])], 16, _hoisted_2$2),
+				}), [..._cache[0] || (_cache[0] = [createElementVNode("span", { class: "j-switch__thumb" }, null, -1)])], 16, _hoisted_2$4),
 				__props.name && model.value ? (openBlock(), createElementBlock("input", {
 					key: 0,
 					type: "hidden",
 					name: __props.name,
 					value: __props.value
-				}, null, 8, _hoisted_3$2)) : createCommentVNode("", true),
-				__props.label || _ctx.$slots.default || __props.description || _ctx.$slots.description ? (openBlock(), createElementBlock("span", _hoisted_4$1, [__props.label || _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
+				}, null, 8, _hoisted_3$4)) : createCommentVNode("", true),
+				__props.label || _ctx.$slots.default || __props.description || _ctx.$slots.description ? (openBlock(), createElementBlock("span", _hoisted_4$2, [__props.label || _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
 					key: 0,
 					id: labelId.value,
 					for: id.value,
 					class: "j-switch__label"
-				}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 8, _hoisted_5$1)) : createCommentVNode("", true), __props.description || _ctx.$slots.description ? (openBlock(), createElementBlock("span", {
+				}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 8, _hoisted_5$2)) : createCommentVNode("", true), __props.description || _ctx.$slots.description ? (openBlock(), createElementBlock("span", {
 					key: 1,
 					id: descriptionId.value,
 					class: "j-switch__description"
-				}, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])], 8, _hoisted_6$1)) : createCommentVNode("", true)])) : createCommentVNode("", true)
-			], 14, _hoisted_1$4);
+				}, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])], 8, _hoisted_6$2)) : createCommentVNode("", true)])) : createCommentVNode("", true)
+			], 14, _hoisted_1$9);
 		};
 	}
 });
 //#endregion
 //#region src/components/tabs/JTabs.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$3 = ["aria-label"];
-var _hoisted_2$1 = [
+var _hoisted_1$8 = ["aria-label"];
+var _hoisted_2$3 = [
 	"id",
 	"aria-selected",
 	"aria-controls",
@@ -3446,7 +4577,7 @@ var _hoisted_2$1 = [
 	"disabled",
 	"onClick"
 ];
-var _hoisted_3$1 = [
+var _hoisted_3$3 = [
 	"id",
 	"aria-labelledby",
 	"hidden"
@@ -3567,8 +4698,8 @@ var JTabs_default = /* @__PURE__ */ defineComponent({
 				}, [renderSlot(_ctx.$slots, "tab", {
 					item,
 					selected: item.value === selected.value
-				}, () => [createTextVNode(toDisplayString(item.label), 1)])], 8, _hoisted_2$1);
-			}), 128))], 40, _hoisted_1$3), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+				}, () => [createTextVNode(toDisplayString(item.label), 1)])], 8, _hoisted_2$3);
+			}), 128))], 40, _hoisted_1$8), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
 				return openBlock(), createElementBlock(Fragment, { key: item.value }, [_ctx.$slots[item.value] ? (openBlock(), createElementBlock("div", {
 					key: 0,
 					id: panelId(item.value),
@@ -3580,14 +4711,62 @@ var JTabs_default = /* @__PURE__ */ defineComponent({
 				}, [renderSlot(_ctx.$slots, item.value, {
 					item,
 					selected: item.value === selected.value
-				})], 8, _hoisted_3$1)) : createCommentVNode("", true)], 64);
+				})], 8, _hoisted_3$3)) : createCommentVNode("", true)], 64);
 			}), 128))], 2);
 		};
 	}
 });
 //#endregion
+//#region src/components/tag/JTag.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$7 = {
+	key: 0,
+	class: "j-tag__icon"
+};
+var _hoisted_2$2 = { class: "j-tag__label" };
+var _hoisted_3$2 = ["aria-label", "disabled"];
+//#endregion
+//#region src/components/tag/JTag.vue
+var JTag_default = /* @__PURE__ */ defineComponent({
+	__name: "JTag",
+	props: {
+		variant: { default: "neutral" },
+		size: { default: "md" },
+		disabled: { type: Boolean },
+		removeLabel: {}
+	},
+	emits: ["remove"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const text = computed(() => slots.default?.().map((vnode) => typeof vnode.children === "string" ? vnode.children : "").join("").trim());
+		const removeButtonLabel = computed(() => props.removeLabel || (text.value ? `Remove ${text.value}` : "Remove"));
+		function onRemove() {
+			if (props.disabled) return;
+			emit("remove");
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", { class: normalizeClass(["j-tag", [
+				`j-tag--${__props.variant}`,
+				`j-tag--${__props.size}`,
+				{ "is-disabled": __props.disabled }
+			]]) }, [
+				_ctx.$slots.leading ? (openBlock(), createElementBlock("span", _hoisted_1$7, [renderSlot(_ctx.$slots, "leading")])) : createCommentVNode("", true),
+				createElementVNode("span", _hoisted_2$2, [renderSlot(_ctx.$slots, "default")]),
+				createElementVNode("button", {
+					type: "button",
+					class: "j-tag__remove j-focusable",
+					"aria-label": removeButtonLabel.value,
+					disabled: __props.disabled,
+					onClick: onRemove
+				}, [createVNode(unref(IconX))], 8, _hoisted_3$2)
+			], 2);
+		};
+	}
+});
+//#endregion
 //#region src/components/textarea/JTextarea.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$2 = [
+var _hoisted_1$6 = [
 	"id",
 	"rows",
 	"name",
@@ -3689,7 +4868,7 @@ var JTextarea_default = /* @__PURE__ */ defineComponent({
 					required: __props.required,
 					"aria-invalid": unref(field).invalid.value || void 0,
 					"aria-describedby": unref(field).describedBy.value
-				}), null, 16, _hoisted_1$2), [[vModelText, model.value]])], 2)]),
+				}), null, 16, _hoisted_1$6), [[vModelText, model.value]])], 2)]),
 				_: 2
 			}, [_ctx.$slots.label ? {
 				name: "label",
@@ -3713,6 +4892,55 @@ var JTextarea_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/timeline/JTimeline.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$5 = { class: "j-timeline" };
+//#endregion
+//#region src/components/timeline/JTimeline.vue
+var JTimeline_default = /* @__PURE__ */ defineComponent({
+	__name: "JTimeline",
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("ol", _hoisted_1$5, [renderSlot(_ctx.$slots, "default")]);
+		};
+	}
+});
+//#endregion
+//#region src/components/timeline/JTimelineItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$4 = {
+	class: "j-timeline-item__rail",
+	"aria-hidden": "true"
+};
+var _hoisted_2$1 = { class: "j-timeline-item__marker" };
+var _hoisted_3$1 = { class: "j-timeline-item__content" };
+var _hoisted_4$1 = { class: "j-timeline-item__header" };
+var _hoisted_5$1 = {
+	key: 0,
+	class: "j-timeline-item__title"
+};
+var _hoisted_6$1 = {
+	key: 1,
+	class: "j-timeline-item__time"
+};
+var _hoisted_7 = {
+	key: 0,
+	class: "j-timeline-item__body"
+};
+//#endregion
+//#region src/components/timeline/JTimelineItem.vue
+var JTimelineItem_default = /* @__PURE__ */ defineComponent({
+	__name: "JTimelineItem",
+	props: {
+		title: {},
+		time: {},
+		status: { default: "complete" }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("li", { class: normalizeClass(["j-timeline-item", `j-timeline-item--${__props.status}`]) }, [createElementVNode("span", _hoisted_1$4, [createElementVNode("span", _hoisted_2$1, [renderSlot(_ctx.$slots, "marker")])]), createElementVNode("div", _hoisted_3$1, [createElementVNode("div", _hoisted_4$1, [__props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("p", _hoisted_5$1, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])])) : createCommentVNode("", true), __props.time ? (openBlock(), createElementBlock("time", _hoisted_6$1, toDisplayString(__props.time), 1)) : createCommentVNode("", true)]), _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_7, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)])], 2);
+		};
+	}
+});
+//#endregion
 //#region src/composables/useToast.ts
 var DEFAULT_TOAST_DURATION = 5e3;
 var state = reactive({ toasts: [] });
@@ -3795,7 +5023,7 @@ var typed = (type) => (title, options) => create(title, {
 	...options,
 	type
 });
-/** Show a toast. Works anywhere — inside or outside components. */
+/** Show a toast. Works anywhere | inside or outside components. */
 var toast = Object.assign(create, {
 	success: typed("success"),
 	error: typed("error"),
@@ -3818,7 +5046,7 @@ function useToast() {
 var toastState = state;
 //#endregion
 //#region src/components/toast/JToastItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$1 = ["data-swipe-direction", "role"];
+var _hoisted_1$3 = ["data-swipe-direction", "role"];
 var _hoisted_2 = {
 	key: 0,
 	class: "j-toast__icon",
@@ -3980,13 +5208,13 @@ var JToastItem_default = /* @__PURE__ */ defineComponent({
 					style: normalizeStyle({ animationDuration: `${__props.toast.duration}ms` }),
 					"aria-hidden": "true"
 				}, null, 6)) : createCommentVNode("", true)
-			], 46, _hoisted_1$1);
+			], 46, _hoisted_1$3);
 		};
 	}
 });
 //#endregion
 //#region src/components/toast/JToaster.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["aria-label"];
+var _hoisted_1$2 = ["aria-label"];
 //#endregion
 //#region src/components/toast/JToaster.vue
 var JToaster_default = /* @__PURE__ */ defineComponent({
@@ -4058,13 +5286,112 @@ var JToaster_default = /* @__PURE__ */ defineComponent({
 						}, null, 8, ["toast", "paused"]);
 					}), 128))]),
 					_: 1
-				}, 512)], 10, _hoisted_1)]),
+				}, 512)], 10, _hoisted_1$2)]),
 				_: 1
 			});
 		};
 	}
 });
 //#endregion
+//#region src/components/toggle-group/context.ts
+var TOGGLE_GROUP = Symbol("JToggleGroup");
+//#endregion
+//#region src/components/toggle-group/JToggleGroup.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = ["aria-label"];
+//#endregion
+//#region src/components/toggle-group/JToggleGroup.vue
+var JToggleGroup_default = /* @__PURE__ */ defineComponent({
+	__name: "JToggleGroup",
+	props: /*@__PURE__*/ mergeModels({
+		type: { default: "single" },
+		size: { default: "md" },
+		disabled: { type: Boolean },
+		label: {}
+	}, {
+		"modelValue": { default: null },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		/** The pressed value in `single` mode, or an array of values in `multiple` mode. */
+		const model = useModel(__props, "modelValue");
+		provide(TOGGLE_GROUP, {
+			type: computed(() => props.type),
+			disabled: computed(() => !!props.disabled),
+			isSelected: (value) => {
+				if (props.type === "multiple") return Array.isArray(model.value) && model.value.includes(value);
+				return model.value === value;
+			},
+			toggle: (value) => {
+				if (props.disabled) return;
+				if (props.type === "multiple") {
+					const current = Array.isArray(model.value) ? model.value : [];
+					model.value = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
+					return;
+				}
+				model.value = value;
+			}
+		});
+		function onKeydown(event) {
+			const target = event.target;
+			if (!target.classList.contains("j-toggle-group__item")) return;
+			const root = event.currentTarget;
+			const items = Array.from(root.querySelectorAll(".j-toggle-group__item:not(:disabled)"));
+			const index = items.indexOf(target);
+			let next;
+			if (event.key === "ArrowRight" || event.key === "ArrowDown") next = items[(index + 1) % items.length];
+			else if (event.key === "ArrowLeft" || event.key === "ArrowUp") next = items[(index - 1 + items.length) % items.length];
+			else if (event.key === "Home") next = items[0];
+			else if (event.key === "End") next = items[items.length - 1];
+			if (!next) return;
+			event.preventDefault();
+			focusElement(next);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["j-toggle-group", [`j-toggle-group--${__props.size}`, { "is-disabled": __props.disabled }]]),
+				role: "group",
+				"aria-label": __props.label,
+				onKeydown
+			}, [renderSlot(_ctx.$slots, "default")], 42, _hoisted_1$1);
+		};
+	}
+});
+//#endregion
+//#region src/components/toggle-group/JToggleGroupItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"aria-pressed",
+	"aria-label",
+	"disabled"
+];
+//#endregion
+//#region src/components/toggle-group/JToggleGroupItem.vue
+var JToggleGroupItem_default = /* @__PURE__ */ defineComponent({
+	__name: "JToggleGroupItem",
+	props: {
+		value: {},
+		disabled: { type: Boolean },
+		label: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const group = inject(TOGGLE_GROUP);
+		const selected = computed(() => group.isSelected(props.value));
+		const isDisabled = computed(() => props.disabled || group.disabled.value);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				type: "button",
+				class: normalizeClass(["j-toggle-group__item j-focusable", { "is-selected": selected.value }]),
+				"aria-pressed": selected.value,
+				"aria-label": __props.label,
+				disabled: isDisabled.value,
+				onClick: _cache[0] || (_cache[0] = ($event) => unref(group).toggle(__props.value))
+			}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
 //#region src/components/tooltip/JTooltip.vue?vue&type=script&setup=true&lang.ts
 var warmUntil = 0;
 var WARM_WINDOW = 400;
@@ -4173,16 +5500,36 @@ var JTooltip_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/visually-hidden/JVisuallyHidden.vue
+var JVisuallyHidden_default = /* @__PURE__ */ defineComponent({
+	__name: "JVisuallyHidden",
+	props: { as: { default: "span" } },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), { class: "j-visually-hidden j-sr-only" }, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
 //#region src/components.ts
 var components_exports = /* @__PURE__ */ __exportAll({
 	JAccordion: () => JAccordion_default,
 	JAccordionItem: () => JAccordionItem_default,
 	JAlert: () => JAlert_default,
+	JAspectRatio: () => JAspectRatio_default,
 	JAvatar: () => JAvatar_default,
+	JAvatarGroup: () => JAvatarGroup_default,
 	JBadge: () => JBadge_default,
+	JBanner: () => JBanner_default,
+	JBreadcrumb: () => JBreadcrumb_default,
+	JBurger: () => JBurger_default,
 	JButton: () => JButton_default,
 	JCard: () => JCard_default,
 	JCheckbox: () => JCheckbox_default,
+	JCollapsible: () => JCollapsible_default,
 	JCommandPalette: () => JCommandPalette_default,
 	JDialog: () => JDialog_default,
 	JDropdownMenu: () => JDropdownMenu_default,
@@ -4190,22 +5537,40 @@ var components_exports = /* @__PURE__ */ __exportAll({
 	JDropdownMenuLabel: () => JDropdownMenuLabel_default,
 	JDropdownMenuSeparator: () => JDropdownMenuSeparator_default,
 	JDropdownMenuSub: () => JDropdownMenuSub_default,
+	JEmptyState: () => JEmptyState_default,
+	JFooter: () => JFooter_default,
+	JFooterColumn: () => JFooterColumn_default,
 	JInput: () => JInput_default,
 	JKbd: () => JKbd_default,
+	JNavbar: () => JNavbar_default,
+	JNavbarLink: () => JNavbarLink_default,
+	JPagination: () => JPagination_default,
 	JPopover: () => JPopover_default,
 	JProgress: () => JProgress_default,
 	JRadio: () => JRadio_default,
 	JRadioGroup: () => JRadioGroup_default,
+	JRating: () => JRating_default,
 	JSelect: () => JSelect_default,
 	JSeparator: () => JSeparator_default,
 	JSheet: () => JSheet_default,
+	JSidebar: () => JSidebar_default,
+	JSidebarGroup: () => JSidebarGroup_default,
+	JSidebarItem: () => JSidebarItem_default,
 	JSkeleton: () => JSkeleton_default,
+	JSlider: () => JSlider_default,
 	JSpinner: () => JSpinner_default,
+	JStat: () => JStat_default,
 	JSwitch: () => JSwitch_default,
 	JTabs: () => JTabs_default,
+	JTag: () => JTag_default,
 	JTextarea: () => JTextarea_default,
+	JTimeline: () => JTimeline_default,
+	JTimelineItem: () => JTimelineItem_default,
 	JToaster: () => JToaster_default,
-	JTooltip: () => JTooltip_default
+	JToggleGroup: () => JToggleGroup_default,
+	JToggleGroupItem: () => JToggleGroupItem_default,
+	JTooltip: () => JTooltip_default,
+	JVisuallyHidden: () => JVisuallyHidden_default
 });
 //#endregion
 //#region src/composables/useRecentCommands.ts
@@ -4265,6 +5630,6 @@ var JuxtUI = { install(app) {
 	for (const [name, component] of Object.entries(components_exports)) app.component(name, component);
 } };
 //#endregion
-export { JAccordion_default as JAccordion, JAccordionItem_default as JAccordionItem, JAlert_default as JAlert, JAvatar_default as JAvatar, JBadge_default as JBadge, JButton_default as JButton, JCard_default as JCard, JCheckbox_default as JCheckbox, JCommandPalette_default as JCommandPalette, JDialog_default as JDialog, JDropdownMenu_default as JDropdownMenu, JDropdownMenuItem_default as JDropdownMenuItem, JDropdownMenuLabel_default as JDropdownMenuLabel, JDropdownMenuSeparator_default as JDropdownMenuSeparator, JDropdownMenuSub_default as JDropdownMenuSub, JInput_default as JInput, JKbd_default as JKbd, JPopover_default as JPopover, JProgress_default as JProgress, JRadio_default as JRadio, JRadioGroup_default as JRadioGroup, JSelect_default as JSelect, JSeparator_default as JSeparator, JSheet_default as JSheet, JSkeleton_default as JSkeleton, JSpinner_default as JSpinner, JSwitch_default as JSwitch, JTabs_default as JTabs, JTextarea_default as JTextarea, JToaster_default as JToaster, JTooltip_default as JTooltip, JuxtUI, JuxtUI as default, formatHotkey, matchText, matchesHotkey, toast, useFocusTrap, useHotkey, useRecentCommands, useScrollLock, useToast };
+export { JAccordion_default as JAccordion, JAccordionItem_default as JAccordionItem, JAlert_default as JAlert, JAspectRatio_default as JAspectRatio, JAvatar_default as JAvatar, JAvatarGroup_default as JAvatarGroup, JBadge_default as JBadge, JBanner_default as JBanner, JBreadcrumb_default as JBreadcrumb, JBurger_default as JBurger, JButton_default as JButton, JCard_default as JCard, JCheckbox_default as JCheckbox, JCollapsible_default as JCollapsible, JCommandPalette_default as JCommandPalette, JDialog_default as JDialog, JDropdownMenu_default as JDropdownMenu, JDropdownMenuItem_default as JDropdownMenuItem, JDropdownMenuLabel_default as JDropdownMenuLabel, JDropdownMenuSeparator_default as JDropdownMenuSeparator, JDropdownMenuSub_default as JDropdownMenuSub, JEmptyState_default as JEmptyState, JFooter_default as JFooter, JFooterColumn_default as JFooterColumn, JInput_default as JInput, JKbd_default as JKbd, JNavbar_default as JNavbar, JNavbarLink_default as JNavbarLink, JPagination_default as JPagination, JPopover_default as JPopover, JProgress_default as JProgress, JRadio_default as JRadio, JRadioGroup_default as JRadioGroup, JRating_default as JRating, JSelect_default as JSelect, JSeparator_default as JSeparator, JSheet_default as JSheet, JSidebar_default as JSidebar, JSidebarGroup_default as JSidebarGroup, JSidebarItem_default as JSidebarItem, JSkeleton_default as JSkeleton, JSlider_default as JSlider, JSpinner_default as JSpinner, JStat_default as JStat, JSwitch_default as JSwitch, JTabs_default as JTabs, JTag_default as JTag, JTextarea_default as JTextarea, JTimeline_default as JTimeline, JTimelineItem_default as JTimelineItem, JToaster_default as JToaster, JToggleGroup_default as JToggleGroup, JToggleGroupItem_default as JToggleGroupItem, JTooltip_default as JTooltip, JVisuallyHidden_default as JVisuallyHidden, JuxtUI, JuxtUI as default, formatHotkey, matchText, matchesHotkey, toast, useFocusTrap, useHotkey, useRecentCommands, useScrollLock, useToast };
 
 //# sourceMappingURL=index.js.map