eco-vue-js 0.26.30 → 0.27.0

package/dist/components/List/WList.vue.d.ts

@@ -7,6 +7,13 @@ import { Selection } from '../../utils/useSelected';
 import { ListMode } from '../../utils/utils';
 declare const __VLS_export: <Data extends DefaultData, QueryParams, Fields extends ListFields<Data, QueryParams>, CardColumns extends readonly GridCol[]>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import('vue').PublicProps & __VLS_PrettifyLocal<{
+        /**
+         * Heading of the list, as a section's: the list is a section of its own on the page, and a part of a section or a
+         * modal, with a smaller heading and a line above it after other content. The `title` slot replaces it.
+         */
+        title?: string;
+        /** A line under the heading on what the list holds. The `description` slot replaces it. */
+        description?: string;
         /** Total number of items, when known in advance. Sizes the skeleton and the select-all. Defaults to the count the query returns. */
         count?: number;
         /** Field components, one per column, each with a `meta` export for its title, label, ordering field and classes. A meta with `fields` groups nested fields. */
@@ -114,7 +121,13 @@ declare const __VLS_export: <Data extends DefaultData, QueryParams, Fields exten
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
-        /** Content above the selection bar, with the count returned by the query. */
+        /** Heading of the list, in place of `title`, with the count returned by the query. */
+        title?: (props: {
+            count: number | undefined;
+        }) => void;
+        /** Line under the heading, in place of `description`. */
+        description?: () => void;
+        /** Content above the selection bar, under the heading, with the count returned by the query. */
         header?: (props: {
             count: number | undefined;
         }) => void;

package/dist/components/List/WList.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WList.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/List/WList.vue"],"names":[],"mappings":"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"}
+{"version":3,"file":"WList.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/List/WList.vue"],"names":[],"mappings":"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"}

package/dist/components/List/WList.vue_vue_type_script_setup_true_lang.js

@@ -2,6 +2,7 @@ import WEmptyComponent_default from "../EmptyComponent/WEmptyComponent.vue.js";
 import WInfiniteList_default from "../InfiniteList/WInfiniteList.vue.js";
 import { wScrollingElement } from "../InfiniteList/models/injection.js";
 import { wIsModal } from "../Modal/models/injection.js";
+import SectionHeading_default from "../Surface/components/SectionHeading.vue.js";
 import { wSectionNested } from "../Surface/models/injection.js";
 import { useIsMobile } from "../../utils/mobile.js";
 import { encodeOrdering, parseOrdering } from "../../utils/order.js";
@@ -18,7 +19,7 @@ import { isField } from "./models/utils.js";
 import "./types.js";
 import { filterFields, forEachField, getFieldStylesSticky, getFieldTracks, sortFieldsDeep, useListConfig } from "./use/useListConfig.js";
 import { usePageTableMark, useStickyPath } from "./use/useStickyPath.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, guardReactiveProps, inject, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, toRef, unref, useTemplateRef, watch, watchEffect, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, guardReactiveProps, inject, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, toRef, unref, useSlots, useTemplateRef, watch, watchEffect, withCtx } from "vue";
 // src/components/List/WList.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "w-list-page-strip" };
 var _hoisted_2 = { class: "w-list-page-strip-track" };
@@ -26,6 +27,8 @@ var WList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 	inheritAttrs: false,
 	__name: "WList",
 	props: {
+		title: { default: void 0 },
+		description: { default: void 0 },
 		count: { default: void 0 },
 		fields: {},
 		expansion: {
@@ -114,6 +117,9 @@ var WList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 		const isPage = !isModal && inject(wScrollingElement, null) === null && !isSectionNested;
 		const frame = isPage ? inject(wListPageFrame, null) : null;
 		const isPageOwn = isPage && !frame;
+		const slots = useSlots();
+		const hasHeading = computed(() => !!(props.title || props.description || slots.title || slots.description));
+		const isHeadingNested = !isPageOwn;
 		provide(wListPageFrame, null);
 		provide(wListPageFrameHeader, frame ? {
 			target: computed(() => frame.shown.value ? frame.target.value : null),
@@ -290,7 +296,8 @@ var WList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 				class: normalizeClass([listClasses.value, {
 					"w-list-page": unref(isPageOwn),
 					"w-list-page-table": unref(isPageOwn) && !unref(isGrid),
-					"w-list-page-repaint": unref(isPageOwn) && isRepaint.value
+					"w-list-page-repaint": unref(isPageOwn) && isRepaint.value,
+					"w-list-section": hasHeading.value
 				}])
 			}, [(openBlock(), createBlock(resolveDynamicComponent(unref(isPageOwn) ? ListPageSurface_default : WEmptyComponent_default), null, {
 				default: withCtx(() => [createVNode(WInfiniteList_default, {
@@ -365,9 +372,23 @@ var WList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 							"onSave:width": unref(save),
 							"onClick:reset": resetConfig
 						}, createSlots({ _: 2 }, [
-							_ctx.$slots.header ? {
+							_ctx.$slots.header || hasHeading.value ? {
 								name: "header",
-								fn: withCtx((scope) => [renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps(scope)))]),
+								fn: withCtx((scope) => [hasHeading.value ? (openBlock(), createBlock(SectionHeading_default, {
+									key: 0,
+									title: __props.title,
+									description: __props.description,
+									nested: isHeadingNested,
+									class: "w-list-heading pb-2"
+								}, createSlots({ _: 2 }, [_ctx.$slots.title ? {
+									name: "title",
+									fn: withCtx(() => [renderSlot(_ctx.$slots, "title", normalizeProps(guardReactiveProps(scope)))]),
+									key: "0"
+								} : void 0, _ctx.$slots.description ? {
+									name: "description",
+									fn: withCtx(() => [renderSlot(_ctx.$slots, "description")]),
+									key: "1"
+								} : void 0]), 1032, ["title", "description"])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps(scope)))]),
 								key: "0"
 							} : void 0,
 							_ctx.$slots.filter ? {

package/dist/components/Nav/WNavItem.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WNavItem.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Nav/WNavItem.vue"],"names":[],"mappings":"AAkGA;AA0JA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,SAAS,CAAA;AAkBzC,KAAK,WAAW,GAAG;IACjB,qFAAqF;IACrF,IAAI,CAAC,EAAE,MAAM,IAAI,CAAA;IACjB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;CACnB,CAAC;AAmSF,QAAA,MAAM,UAAU;;;qPAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"WNavItem.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Nav/WNavItem.vue"],"names":[],"mappings":"AAuGA;AAqKA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,SAAS,CAAA;AAqBzC,KAAK,WAAW,GAAG;IACjB,qFAAqF;IACrF,IAAI,CAAC,EAAE,MAAM,IAAI,CAAA;IACjB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;CACnB,CAAC;AAySF,QAAA,MAAM,UAAU;;;qPAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/Nav/WNavItem.vue_vue_type_script_setup_true_lang.js

@@ -5,29 +5,29 @@ import WTextOverflow_default from "../TextOverflow/WTextOverflow.vue.js";
 import { useOptionalRoute, useOptionalRouter } from "../../composables/useOptionalRouter.js";
 import { getRouteTitle, getRouteTitleShort } from "../../utils/useRouteTitle.js";
 import { isEqualObj, numberCompactFormatter } from "../../utils/utils.js";
-import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, useTemplateRef, withCtx } from "vue";
+import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, useTemplateRef, withCtx } from "vue";
 // src/components/Nav/WNavItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
 	class: "w-nav-item-indicator tone-primary bg-tone-fill absolute left-0 top-0 h-full w-1"
 };
 var _hoisted_2 = {
-	key: 0,
-	class: "absolute left-3 top-0 flex h-full items-center"
-};
-var _hoisted_3 = {
 	ref: "anchor",
 	"aria-hidden": "true",
 	class: "w-nav-item-anchor pointer-events-none absolute inset-x-0"
 };
-var _hoisted_4 = { class: "[overflow:inherit]" };
-var _hoisted_5 = { class: "flex items-center" };
-var _hoisted_6 = { class: "last-not:pr-1 min-w-0 font-normal" };
-var _hoisted_7 = { class: "relative inline-flex max-w-full items-center whitespace-nowrap tracking-wide" };
-var _hoisted_8 = {
+var _hoisted_3 = { class: "[overflow:inherit]" };
+var _hoisted_4 = {
+	key: 0,
+	class: "flex items-center"
+};
+var _hoisted_5 = { class: "last-not:pr-1 min-w-0 font-normal" };
+var _hoisted_6 = { class: "relative inline-flex max-w-full items-center whitespace-nowrap tracking-wide" };
+var _hoisted_7 = {
 	key: 0,
 	class: "shrink-0"
 };
+var INDENT_STEP = 2;
 var WNavItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "WNavItem",
 	props: {
@@ -38,14 +38,16 @@ var WNavItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		skeleton: { type: Boolean },
 		hasActive: { type: Boolean },
 		expand: { type: Boolean },
-		indent: { type: Boolean },
+		indent: {},
 		queryFields: {},
+		paramFields: {},
 		hovered: { type: Boolean },
 		even: { type: Boolean },
 		to: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const EXCLUDE_QUERY_FIELDS = ["ordering", "page"];
+		const getParamValue = (value) => [value ?? ""].flat().join("/");
 		const props = __props;
 		const route = useOptionalRoute();
 		const router = useOptionalRouter();
@@ -53,11 +55,13 @@ var WNavItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		const isActive = computed(() => {
 			if (!route) return false;
 			if (routeTo.value?.name !== route?.name) return false;
+			if (props.paramFields?.some((field) => getParamValue(route.params[field]) !== getParamValue(routeTo.value.params[field]))) return false;
 			return isEqualObj(route.query, routeTo.value.query ?? {}, EXCLUDE_QUERY_FIELDS, props.queryFields);
 		});
 		const routeTitle = computed(() => getRouteTitle(routeTo.value?.matched ?? []));
 		const iconLocal = computed(() => props.icon ?? routeTo.value?.meta?.icon);
 		const titleLocal = computed(() => props.title ?? (routeTitle.value ? getRouteTitleShort(routeTitle.value) : void 0) ?? (typeof routeTo.value?.meta?.titleShort === "string" ? routeTo.value.meta.titleShort : typeof routeTo.value?.meta?.title === "string" ? routeTo.value.meta.title : ""));
+		const getIndentLength = (base) => `calc(var(--spacing) * ${base + INDENT_STEP * (props.indent ?? 0)})`;
 		const isTextColor = computed(() => props.hasActive ? !props.indent : isActive.value);
 		__expose({
 			isActive,
@@ -89,25 +93,32 @@ var WNavItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 						"enter-from-class": "opacity-0",
 						"leave-to-class": "opacity-0"
 					}, {
-						default: withCtx(() => [__props.indent && !__props.expand && isActive.value ? (openBlock(), createElementBlock("div", _hoisted_2, [..._cache[0] || (_cache[0] = [createElementVNode("div", { class: "square-1.5 rounded-full bg-(--w-nav-item-dot-color)" }, null, -1)])])) : createCommentVNode("", true)]),
+						default: withCtx(() => [__props.indent && !__props.expand && isActive.value ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							class: "absolute top-0 flex h-full items-center",
+							style: normalizeStyle({ left: getIndentLength(1) })
+						}, [..._cache[0] || (_cache[0] = [createElementVNode("div", { class: "square-1.5 rounded-full bg-(--w-nav-item-dot-color)" }, null, -1)])], 4)) : createCommentVNode("", true)]),
 						_: 1
 					}),
-					createElementVNode("span", _hoisted_3, null, 512),
-					createElementVNode("div", _hoisted_4, [createElementVNode("div", { class: normalizeClass(["w-ripple w-ripple-hover relative grid grid-cols-[1.5rem_1fr_auto] items-center rounded-(--w-nav-item-rounded,var(--radius-lg)) pr-2", {
-						"before:opacity-10": __props.hovered,
-						"pl-4": __props.indent,
-						"pl-2": !__props.indent
-					}]) }, [
-						createElementVNode("div", _hoisted_5, [iconLocal.value ? (openBlock(), createBlock(resolveDynamicComponent(iconLocal.value), {
+					createElementVNode("span", _hoisted_2, null, 512),
+					createElementVNode("div", _hoisted_3, [createElementVNode("div", {
+						class: normalizeClass(["w-ripple w-ripple-hover relative grid items-center rounded-(--w-nav-item-rounded,var(--radius-lg)) pr-2", {
+							"before:opacity-10": __props.hovered,
+							"grid-cols-[1.5rem_1fr_auto]": iconLocal.value || _ctx.$slots.icon,
+							"grid-cols-[1fr_auto]": !iconLocal.value && !_ctx.$slots.icon
+						}]),
+						style: normalizeStyle({ paddingLeft: getIndentLength(2) })
+					}, [
+						iconLocal.value || _ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_4, [iconLocal.value ? (openBlock(), createBlock(resolveDynamicComponent(iconLocal.value), {
 							key: 0,
 							class: "square-[1.25em]"
-						})) : renderSlot(_ctx.$slots, "icon", {}, void 0, void 0, 1)]),
-						createElementVNode("div", _hoisted_6, [createElementVNode("span", _hoisted_7, [
+						})) : renderSlot(_ctx.$slots, "icon", {}, void 0, void 0, 1)])) : createCommentVNode("", true),
+						createElementVNode("div", _hoisted_5, [createElementVNode("span", _hoisted_6, [
 							createVNode(WTextOverflow_default, { class: "min-w-0 leading-loose" }, {
 								default: withCtx(() => [createTextVNode(toDisplayString(titleLocal.value), 1)]),
 								_: 1
 							}),
-							!__props.skeleton ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(typeof __props.count === "number" ? `\u00A0(${unref(numberCompactFormatter).format(__props.count)})` : ""), 1)) : (openBlock(), createBlock(WSkeleton_default, {
+							!__props.skeleton ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(typeof __props.count === "number" ? `\u00A0(${unref(numberCompactFormatter).format(__props.count)})` : ""), 1)) : (openBlock(), createBlock(WSkeleton_default, {
 								key: 1,
 								class: "w-skeleton-w-10 ml-1 inline-flex shrink-0"
 							})),
@@ -119,7 +130,7 @@ var WNavItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 							}, null, 8, ["count"])) : createCommentVNode("", true)
 						])]),
 						renderSlot(_ctx.$slots, "right")
-					], 2)])
+					], 6)])
 				]),
 				_: 3
 			}, 8, ["to", "class"]);

package/dist/components/Nav/WNavItemExpand.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WNavItemExpand.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Nav/WNavItemExpand.vue"],"names":[],"mappings":"AAiGA;AAuKA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAA;AAG/C,OAAO,EAAC,KAAK,KAAK,EAA2D,MAAM,KAAK,CAAA;AAoDxF,KAAK,WAAW,GAAG;IACjB,4HAA4H;IAC5H,OAAO,CAAC,EAAE,MAAM,KAAK,EAAE,CAAA;IACvB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,KAAK,EAAE,CAAA;CACrB,CAAC;AAkVF,QAAA,MAAM,UAAU;;;2PAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"WNavItemExpand.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Nav/WNavItemExpand.vue"],"names":[],"mappings":"AAwGA;AAkLA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAA;AAG/C,OAAO,EAAC,KAAK,KAAK,EAA2D,MAAM,KAAK,CAAA;AAwDxF,KAAK,WAAW,GAAG;IACjB,4HAA4H;IAC5H,OAAO,CAAC,EAAE,MAAM,KAAK,EAAE,CAAA;IACvB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,KAAK,EAAE,CAAA;CACrB,CAAC;AAwVF,QAAA,MAAM,UAAU;;;2PAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/Nav/WNavItemExpand.vue_vue_type_script_setup_true_lang.js

@@ -8,7 +8,7 @@ import WNavItem_default from "./WNavItem.vue.js";
 import WNavItemTransition_default from "./WNavItemTransition.vue.js";
 import { useNavGroupDropdown } from "./use/useNavGroupDropdown.js";
 import WClickOutside_default from "../ClickOutside/WClickOutside.vue.js";
-import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeProps, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, unref, useSlots, useTemplateRef, watch, withCtx } from "vue";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeProps, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, unref, useSlots, useTemplateRef, watch, withCtx } from "vue";
 // src/components/Nav/WNavItemExpand.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { key: 1 };
 var _hoisted_2 = { class: "w-nav-bar w-nav-bar-dropdown w-nav-bar-width overflow-y-auto overscroll-contain border border-solid border-line-raised text-start font-normal shadow" };
@@ -20,8 +20,9 @@ var WNavItemExpand_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		count: {},
 		counter: {},
 		skeleton: { type: Boolean },
-		indent: { type: Boolean },
+		indent: {},
 		queryFields: {},
+		paramFields: {},
 		even: { type: Boolean },
 		to: {}
 	},
@@ -33,14 +34,17 @@ var WNavItemExpand_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		const innerRef = useTemplateRef("inner");
 		const { isOpen: isDropdownOpen, show: showDropdown, hide: hideDropdown, close: closeDropdown } = useNavGroupDropdown();
 		const hasActive = ref(false);
-		const isActive = computed(() => hasActive.value || (componentRef.value?.isActive ?? false));
 		const hasInnerActive = computed(() => innerRef.value?.some((item) => item.isActive) ?? false);
+		const isActive = computed(() => hasInnerActive.value || hasActive.value || (componentRef.value?.isActive ?? false));
 		const isVisible = computed(() => isDropdownOpen.value || isActive.value);
 		const updateHasActive = async () => {
 			await nextTick();
 			hasActive.value = innerRef.value?.some((item) => item.isActive) ?? false;
 		};
-		watch(hasInnerActive, updateHasActive, { immediate: true });
+		watch(hasInnerActive, (value) => {
+			hasActive.value = value;
+			updateHasActive();
+		}, { immediate: true });
 		watch(isActive, updateHasActive, { immediate: true });
 		watch(slotsDefault, updateHasActive, { immediate: true });
 		watch(hasActive, closeDropdown, { immediate: true });
@@ -49,10 +53,11 @@ var WNavItemExpand_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			isVisible
 		});
 		return (_ctx, _cache) => {
-			return !slotsDefault.value.length ? (openBlock(), createBlock(WNavItem_default, normalizeProps(mergeProps({ key: 0 }, _ctx.$props)), {
-				icon: withCtx(() => [renderSlot(_ctx.$slots, "icon")]),
-				_: 3
-			}, 16)) : (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(WDropdownMenu_default, {
+			return !slotsDefault.value.length ? (openBlock(), createBlock(WNavItem_default, normalizeProps(mergeProps({ key: 0 }, _ctx.$props)), createSlots({ _: 2 }, [_ctx.$slots.icon ? {
+				name: "icon",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "icon")]),
+				key: "0"
+			} : void 0]), 1040)) : (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(WDropdownMenu_default, {
 				"is-open": unref(isDropdownOpen) && !isActive.value,
 				"horizontal-align": unref(HorizontalAlign).RIGHT_OUTER,
 				"parent-element": componentRef.value?.anchorRef ?? void 0,
@@ -74,12 +79,16 @@ var WNavItemExpand_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 					even: __props.even,
 					expand: !__props.to,
 					"query-fields": __props.queryFields,
+					"param-fields": __props.paramFields,
 					hovered: unref(isDropdownOpen) && !hasActive.value
-				}), {
-					icon: withCtx(() => [renderSlot(_ctx.$slots, "icon")]),
+				}), createSlots({
 					right: withCtx(() => [createVNode(unref(IconArrow_default), { class: normalizeClass(["square-3 transition-transform", { "-rotate-90": !hasActive.value && !__props.even }]) }, null, 8, ["class"])]),
-					_: 3
-				}, 16, [
+					_: 2
+				}, [_ctx.$slots.icon ? {
+					name: "icon",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "icon")]),
+					key: "0"
+				} : void 0]), 1040, [
 					"to",
 					"title",
 					"icon",
@@ -91,6 +100,7 @@ var WNavItemExpand_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 					"even",
 					"expand",
 					"query-fields",
+					"param-fields",
 					"hovered"
 				])]),
 				content: withCtx(() => [createVNode(WClickOutside_default, {
@@ -128,7 +138,7 @@ var WNavItemExpand_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 							ref_for: true,
 							ref: "inner",
 							even: __props.even,
-							indent: !__props.even
+							indent: __props.even ? void 0 : (__props.indent ?? 0) + 1
 						}, null, 8, ["even", "indent"]);
 					}), 128))]),
 					_: 1

package/dist/components/Nav/types.d.ts

@@ -1,6 +1,6 @@
 import { LinkProps } from '../../types/types';
 export interface NavItemProps extends LinkProps {
-  /** Icon before the title. Defaults to the route's `meta.icon`. */
+  /** Icon before the title. Defaults to the route's `meta.icon`. Without an icon the title takes its place. */
   icon?: SVGComponent
   /** Title of the item. Defaults to the title the route's page registers with `useRouteTitle` while it is open, then the route's `meta.titleShort`, then `meta.title`. */
   title?: string
@@ -14,10 +14,12 @@ export interface NavItemProps extends LinkProps {
   hasActive?: boolean
   /** Marks the item as the toggle of a group without a route of its own. Set by WNavItemExpand. */
   expand?: boolean
-  /** Indents the item as a child of a group. Set by WNavItemExpand. */
-  indent?: boolean
+  /** How many groups the item is nested in, which sets its indent. Set by WNavItemExpand. */
+  indent?: number
   /** Query params that must match the current route's for the item to be active, besides its route name. Other params, such as filters, are ignored. */
   queryFields?: string[]
+  /** Route params that must match the current route's for the item to be active, besides its route name. Other route params are ignored. */
+  paramFields?: string[]
   /** Highlights the item as hovered. Set by WNavItemExpand while its menu is open. */
   hovered?: boolean
   /** Lays the item out without the indent of a group. Set by WNavItemExpand. */
@@ -25,7 +27,7 @@ export interface NavItemProps extends LinkProps {
 }
 
 export interface NavItemExpandProps extends Partial<LinkProps> {
-  /** Icon before the title. */
+  /** Icon before the title. Without an icon the title takes its place. */
   icon?: SVGComponent
   /** Title of the group. */
   title: string
@@ -35,10 +37,12 @@ export interface NavItemExpandProps extends Partial<LinkProps> {
   counter?: number
   /** Shows a placeholder for `count` and hides `counter`, while they load. */
   skeleton?: boolean
-  /** Indents the group as a child of another group. */
-  indent?: boolean
+  /** How many groups the group is nested in, which sets its indent. Set by a parent WNavItemExpand. */
+  indent?: number
   /** Query params that must match the current route's for the group's own route to be active. */
   queryFields?: string[]
+  /** Route params that must match the current route's for the group's own route to be active. */
+  paramFields?: string[]
   /** Keeps the items always shown, without indent and without the menu on hover, e.g. for a nav inside a page. */
   even?: boolean
 }

package/dist/components/Surface/WSection.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WSection.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Surface/WSection.vue"],"names":[],"mappings":"AA+DA;AAuIA,OAAO,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAA;AAKjD,KAAK,WAAW,GAAG;IACf,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6DAA6D;IAC7D,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yBAAyB;IACzB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAC;AAYJ,KAAK,WAAW,GAAG;IACjB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;IAClB,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,IAAI,CAAA;IACjB,kGAAkG;IAClG,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB,CAAC;AAqJF,QAAA,MAAM,UAAU;WAtMJ,MAAM;iBAOA,MAAM;kBAOL,YAAY;SALrB,MAAM;aAPF,MAAM;6EAuMlB,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"WSection.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Surface/WSection.vue"],"names":[],"mappings":"AA0DA;AAmIA,OAAO,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAA;AAMjD,KAAK,WAAW,GAAG;IACf,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6DAA6D;IAC7D,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yBAAyB;IACzB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAC;AAYJ,KAAK,WAAW,GAAG;IACjB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;IAClB,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,IAAI,CAAA;IACjB,kGAAkG;IAClG,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB,CAAC;AA2IF,QAAA,MAAM,UAAU;WA5LJ,MAAM;iBAOA,MAAM;kBAOL,YAAY;SALrB,MAAM;aAPF,MAAM;6EA6LlB,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/Surface/WSection.vue_vue_type_script_setup_true_lang.js

@@ -1,27 +1,15 @@
 import { wIsModal } from "../Modal/models/injection.js";
 import { SemanticType } from "../../utils/SemanticType.js";
+import SectionHeading_default from "./components/SectionHeading.vue.js";
 import { wSectionNested } from "./models/injection.js";
 import { sectionToneMap } from "./models/utils.js";
-import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, inject, normalizeClass, openBlock, provide, renderSlot, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
+import { createBlock, createCommentVNode, createElementBlock, createSlots, defineComponent, inject, normalizeClass, openBlock, provide, renderSlot, resolveDynamicComponent, unref, withCtx } from "vue";
 // src/components/Surface/WSection.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
-	key: 0,
-	class: "flex flex-wrap items-center gap-x-4 gap-y-2"
-};
-var _hoisted_2 = { class: "mr-auto grid gap-1" };
-var _hoisted_3 = {
-	key: 0,
-	class: "text-description text-xs font-semibold tracking-wider uppercase"
-};
-var _hoisted_4 = {
-	key: 1,
-	class: "text-description max-w-prose text-sm text-pretty"
-};
-var _hoisted_5 = {
 	key: 1,
 	class: "surface-section-body grid content-start gap-4"
 };
-var _hoisted_6 = {
+var _hoisted_2 = {
 	key: 3,
 	class: "surface-section-footer flex flex-wrap items-center gap-2"
 };
@@ -41,17 +29,39 @@ var WSection_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(resolveDynamicComponent(__props.tag), { class: normalizeClass(["surface-section gap-4", [__props.scroll ? "surface-section-scroll flex flex-col" : "grid", __props.semanticType && __props.semanticType !== unref(SemanticType).SECONDARY ? ["surface-section-tone", unref(sectionToneMap)[__props.semanticType]] : void 0]]) }, {
 				default: withCtx(() => [
-					__props.title || __props.eyebrow || __props.description || _ctx.$slots.title || _ctx.$slots.description || _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [
-						__props.eyebrow ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(__props.eyebrow), 1)) : createCommentVNode("", true),
-						(openBlock(), createBlock(resolveDynamicComponent(unref(isNested) ? "h3" : "h2"), { class: normalizeClass(["font-semibold", [unref(isNested) ? "text-base" : "text-xl", __props.semanticType && __props.semanticType !== unref(SemanticType).SECONDARY ? "text-tone" : "text-accent"]]) }, {
-							default: withCtx(() => [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])]),
-							_: 3
-						}, 8, ["class"])),
-						__props.description || _ctx.$slots.description ? (openBlock(), createElementBlock("p", _hoisted_4, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])])) : createCommentVNode("", true)
-					]), renderSlot(_ctx.$slots, "actions")])) : createCommentVNode("", true),
+					__props.title || __props.eyebrow || __props.description || _ctx.$slots.title || _ctx.$slots.description || _ctx.$slots.actions ? (openBlock(), createBlock(SectionHeading_default, {
+						key: 0,
+						title: __props.title,
+						eyebrow: __props.eyebrow,
+						description: __props.description,
+						nested: unref(isNested),
+						toned: !!__props.semanticType && __props.semanticType !== unref(SemanticType).SECONDARY
+					}, createSlots({ _: 2 }, [
+						_ctx.$slots.title ? {
+							name: "title",
+							fn: withCtx(() => [renderSlot(_ctx.$slots, "title")]),
+							key: "0"
+						} : void 0,
+						_ctx.$slots.description ? {
+							name: "description",
+							fn: withCtx(() => [renderSlot(_ctx.$slots, "description")]),
+							key: "1"
+						} : void 0,
+						_ctx.$slots.actions ? {
+							name: "actions",
+							fn: withCtx(() => [renderSlot(_ctx.$slots, "actions")]),
+							key: "2"
+						} : void 0
+					]), 1032, [
+						"title",
+						"eyebrow",
+						"description",
+						"nested",
+						"toned"
+					])) : createCommentVNode("", true),
 					renderSlot(_ctx.$slots, "head"),
-					__props.scroll ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "default")])) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 2),
-					_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true)
+					__props.scroll ? (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")])) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 2),
+					_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true)
 				]),
 				_: 3
 			}, 8, ["class"]);

package/dist/components/Surface/components/SectionHeading.vue.d.ts

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    title?: string;
+    eyebrow?: string;
+    description?: string;
+    nested: boolean;
+    toned?: boolean;
+};
+type __VLS_Slots = {
+    title?: () => void;
+    description?: () => void;
+    actions?: () => void;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=SectionHeading.vue.d.ts.map

package/dist/components/Surface/components/SectionHeading.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeading.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/Surface/components/SectionHeading.vue"],"names":[],"mappings":"AAiCA;AAmDA,KAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAC;AAGF,KAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAC;AA6EF,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/Surface/components/SectionHeading.vue.js

@@ -0,0 +1,4 @@
+import SectionHeading_vue_vue_type_script_setup_true_lang_default from "./SectionHeading.vue_vue_type_script_setup_true_lang.js";
+// src/components/Surface/components/SectionHeading.vue
+var SectionHeading_default = SectionHeading_vue_vue_type_script_setup_true_lang_default;
+export { SectionHeading_default as default };

package/dist/components/Surface/components/SectionHeading.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,35 @@
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, withCtx } from "vue";
+// src/components/Surface/components/SectionHeading.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex flex-wrap items-center gap-x-4 gap-y-2" };
+var _hoisted_2 = { class: "mr-auto grid gap-1" };
+var _hoisted_3 = {
+	key: 0,
+	class: "text-description text-xs font-semibold tracking-wider uppercase"
+};
+var _hoisted_4 = {
+	key: 1,
+	class: "text-description max-w-prose text-sm text-pretty"
+};
+var SectionHeading_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SectionHeading",
+	props: {
+		title: {},
+		eyebrow: {},
+		description: {},
+		nested: { type: Boolean },
+		toned: { type: Boolean }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [
+				__props.eyebrow ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(__props.eyebrow), 1)) : createCommentVNode("", true),
+				(openBlock(), createBlock(resolveDynamicComponent(__props.nested ? "h3" : "h2"), { class: normalizeClass(["font-semibold", [__props.nested ? "text-base" : "text-xl", __props.toned ? "text-tone" : "text-accent"]]) }, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])]),
+					_: 3
+				}, 8, ["class"])),
+				__props.description || _ctx.$slots.description ? (openBlock(), createElementBlock("p", _hoisted_4, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])])) : createCommentVNode("", true)
+			]), renderSlot(_ctx.$slots, "actions")]);
+		};
+	}
+});
+export { SectionHeading_vue_vue_type_script_setup_true_lang_default as default };

package/dist/composables/useOptionalRouter.d.ts

@@ -3,7 +3,7 @@ import { ComputedRef } from 'vue';
 type Router = ReturnType<typeof useRouter>;
 export type FallbackRouter = {
     push: Router['push'];
-    resolve(to: RouteLocationRaw): Pick<ReturnType<Router['resolve']>, 'name' | 'path' | 'query' | 'href' | 'matched'> & {
+    resolve(to: RouteLocationRaw): Pick<ReturnType<Router['resolve']>, 'name' | 'path' | 'query' | 'href' | 'matched' | 'params'> & {
         meta: Record<string, string> | undefined;
         name: string;
     };
@@ -16,6 +16,7 @@ export type FallbackRoute = {
     name: string;
     path: Route['path'];
     query: LocationQuery;
+    params: Route['params'];
     hash: Route['hash'];
     fullPath: Route['fullPath'];
     matched: Route['matched'];

package/dist/composables/useOptionalRouter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useOptionalRouter.d.ts","sourceRoot":"","sources":["../../../src/composables/useOptionalRouter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,QAAQ,EAAE,SAAS,EAAC,MAAM,YAAY,CAAA;AAE3G,OAAO,EAAW,KAAK,WAAW,EAAoC,MAAM,KAAK,CAAA;AAkBjF,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAA;AAE1C,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAA;IACpB,OAAO,CAAC,EAAE,EAAE,gBAAgB,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC,GAAG;QAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAC,CAAA;IAC7K,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,CAAA;IAC1B,QAAQ,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CAC5B,CAAA;AAmCD,eAAO,MAAM,iBAAiB,QAAO,cAcpC,CAAA;AAED,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAA;AAExC,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IACnB,KAAK,EAAE,aAAa,CAAA;IACpB,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IACnB,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,CAAA;IAC3B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;IACzB,QAAQ,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CAC5B,CAAA;AAQD,eAAO,MAAM,gBAAgB,QAAO,aAiCnC,CAAA;AAUD,eAAO,MAAM,uBAAuB,QAAO,WAAW,CAAC,qBAAqB,GAAG,SAAS,CAAC,GAAG,SAkB3F,CAAA"}
+{"version":3,"file":"useOptionalRouter.d.ts","sourceRoot":"","sources":["../../../src/composables/useOptionalRouter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,QAAQ,EAAE,SAAS,EAAC,MAAM,YAAY,CAAA;AAE3G,OAAO,EAAW,KAAK,WAAW,EAAoC,MAAM,KAAK,CAAA;AAkBjF,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAA;AAE1C,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAA;IACpB,OAAO,CAAC,EAAE,EAAE,gBAAgB,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC,GAAG;QAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAC,CAAA;IACxL,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,CAAA;IAC1B,QAAQ,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CAC5B,CAAA;AAoCD,eAAO,MAAM,iBAAiB,QAAO,cAcpC,CAAA;AAED,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAA;AAExC,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IACnB,KAAK,EAAE,aAAa,CAAA;IACpB,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAA;IACvB,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IACnB,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,CAAA;IAC3B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;IACzB,QAAQ,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CAC5B,CAAA;AAQD,eAAO,MAAM,gBAAgB,QAAO,aAkCnC,CAAA;AAUD,eAAO,MAAM,uBAAuB,QAAO,WAAW,CAAC,qBAAqB,GAAG,SAAS,CAAC,GAAG,SAkB3F,CAAA"}

package/dist/composables/useOptionalRouter.js

@@ -19,6 +19,7 @@ var fallbackRouter = {
 			href: typeof to === "string" ? to : "href" in to && typeof to.href === "string" ? to.href : to.path ?? "",
 			path: typeof to === "string" ? to.split(/[?#]/)[0] : "path" in to ? to.path ?? "" : "",
 			query: typeof to === "string" ? {} : to.query ?? {},
+			params: {},
 			meta: void 0
 		};
 		return {
@@ -63,6 +64,7 @@ var useOptionalRoute = () => {
 	const url = new URL(window.location.href);
 	return {
 		query: Object.fromEntries(url.searchParams.entries()),
+		params: {},
 		name: url.pathname,
 		path: url.pathname,
 		hash: url.hash,

package/docs/components/list.md

@@ -101,6 +101,8 @@ import WList from 'eco-vue-js/dist/components/List/WList.vue'
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
+| `title` | `string` | — | Heading of the list, as a section's: the list is a section of its own on the page, and a part of a section or a modal, with a smaller heading and a line above it after other content. The `title` slot replaces it. |
+| `description` | `string` | — | A line under the heading on what the list holds. The `description` slot replaces it. |
 | `count` | `number` | — | Total number of items, when known in advance. Sizes the skeleton and the select-all. Defaults to the count the query returns. |
 | `fields` | `Fields` | **required** | Field components, one per column, each with a `meta` export for its title, label, ordering field and classes. A meta with `fields` groups nested fields. |
 | `expansion` | `ExpansionComponent<Data, QueryParams>` | — | Detail component shown under a row when the row is clicked. Receives the same props as a field, except `config`. |
@@ -162,7 +164,9 @@ import WList from 'eco-vue-js/dist/components/List/WList.vue'
 
 | Slot | Props | Description |
 | --- | --- | --- |
-| `header` | `{ count: number \| undefined; }` | Content above the selection bar, with the count returned by the query. |
+| `title` | `{ count: number \| undefined; }` | Heading of the list, in place of `title`, with the count returned by the query. |
+| `description` | — | Line under the heading, in place of `description`. |
+| `header` | `{ count: number \| undefined; }` | Content above the selection bar, under the heading, with the count returned by the query. |
 | `filter` | — | Filters at the start of the selection bar, usually a WListFilter. They keep to one line, the chips that do not fit go to a menu, the list actions move to the end and fold into More first, and a selection replaces them. `--w-list-toolbar-height` sets the bar's height, the inherited input height by default. |
 | `selection` | — | Replaces the buttons at the end of the selection bar — range select, refetch, sort and column settings. |
 | `group` | `{ item: Data; previous: Data \| undefined; skeleton: boolean; }` | Content of the heading before each group of rows, with `groupBy`. The heading spans the whole row, sticks under the toolbar and, in list mode, to the left edge while the rows scroll sideways. Its content is laid out by the slot. `skeleton` is true while the page loads. |

package/docs/components/nav-bar.md

@@ -26,6 +26,8 @@ The `footer` slot is the nav's bottom, such as a back button or the app's versio
 
 `WNavItemExpand` groups items under a title. The items show under it while one of them is active; otherwise hovering the group opens them in a menu to the right. One group's menu is open at a time, so moving down the nav switches it. The menu lines up with the group by its top, or by its bottom low on the screen, and shifts to stay on screen when it is taller than the room there — it scrolls once taller than the screen. With `to`, the group is a link of its own. `even` keeps the items always shown and not indented, for a nav inside a page.
 
+Groups can nest, and each level indents further. Items without an icon, from neither `icon`, the `icon` slot nor `meta.icon`, start with the title.
+
 `WNavItemTransition` wraps a list of items so that the ones added or removed with `v-if` — such as an item for the current record — expand and collapse.
 
 The demo below uses `even` to show a group inside a page. Its items link to pages of this site, so the one you're on is active.
@@ -169,15 +171,16 @@ import WNavItem from 'eco-vue-js/dist/components/Nav/WNavItem.vue'
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `icon` | `SVGComponent` | — | Icon before the title. Defaults to the route's `meta.icon`. |
+| `icon` | `SVGComponent` | — | Icon before the title. Defaults to the route's `meta.icon`. Without an icon the title takes its place. |
 | `title` | `string` | — | Title of the item. Defaults to the title the route's page registers with `useRouteTitle` while it is open, then the route's `meta.titleShort`, then `meta.title`. |
 | `count` | `number` | — | Number after the title in brackets, such as the number of items on the page it opens. |
 | `counter` | `number` | — | Number in a badge over the end of the title, such as unread items. Hidden at 0. |
 | `skeleton` | `boolean` | — | Shows a placeholder for `count` and hides `counter`, while they load. |
 | `hasActive` | `boolean` | — | Marks the item as the parent of the active item. Set by WNavItemExpand. |
 | `expand` | `boolean` | — | Marks the item as the toggle of a group without a route of its own. Set by WNavItemExpand. |
-| `indent` | `boolean` | — | Indents the item as a child of a group. Set by WNavItemExpand. |
+| `indent` | `number` | — | How many groups the item is nested in, which sets its indent. Set by WNavItemExpand. |
 | `queryFields` | `string[]` | — | Query params that must match the current route's for the item to be active, besides its route name. Other params, such as filters, are ignored. |
+| `paramFields` | `string[]` | — | Route params that must match the current route's for the item to be active, besides its route name. Other route params are ignored. |
 | `hovered` | `boolean` | — | Highlights the item as hovered. Set by WNavItemExpand while its menu is open. |
 | `even` | `boolean` | — | Lays the item out without the indent of a group. Set by WNavItemExpand. |
 | `to` | `RouteLocationRaw` | **required** | Router location — renders a router link. Needs vue-router installed in the app. |
@@ -199,13 +202,14 @@ import WNavItemExpand from 'eco-vue-js/dist/components/Nav/WNavItemExpand.vue'
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `icon` | `SVGComponent` | — | Icon before the title. |
+| `icon` | `SVGComponent` | — | Icon before the title. Without an icon the title takes its place. |
 | `title` | `string` | **required** | Title of the group. |
 | `count` | `number` | — | Number after the title in brackets. |
 | `counter` | `number` | — | Number in a badge over the end of the title. Hidden at 0. |
 | `skeleton` | `boolean` | — | Shows a placeholder for `count` and hides `counter`, while they load. |
-| `indent` | `boolean` | — | Indents the group as a child of another group. |
+| `indent` | `number` | — | How many groups the group is nested in, which sets its indent. Set by a parent WNavItemExpand. |
 | `queryFields` | `string[]` | — | Query params that must match the current route's for the group's own route to be active. |
+| `paramFields` | `string[]` | — | Route params that must match the current route's for the group's own route to be active. |
 | `even` | `boolean` | — | Keeps the items always shown, without indent and without the menu on hover, e.g. for a nav inside a page. |
 | `to` | `RouteLocationRaw` | — | Router location — renders a router link. Needs vue-router installed in the app. |
 

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eco-vue-js
 
-> Vue 3 UI kit with Tailwind v4 — components, utilities, icons and recipes. These are the docs of version 0.26.30, the one installed next to them. Start with Getting started and Conventions; each component page lists its props, events and slots with examples.
+> Vue 3 UI kit with Tailwind v4 — components, utilities, icons and recipes. These are the docs of version 0.27.0, the one installed next to them. Start with Getting started and Conventions; each component page lists its props, events and slots with examples.
 
 Release notes, for what changed between versions: https://github.com/rsmple/eco-vue-js/releases. The docs site, with live demos: https://rsmple.github.io/eco-vue-js/
 

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/rsmple/eco-vue-js.git"
   },
-  "version": "0.26.30",
+  "version": "0.27.0",
   "homepage": "https://rsmple.github.io/eco-vue-js/",
   "dependencies": {
     "@stylistic/eslint-plugin": "5.10.0",

package/tailwind-base/css/surfaces.css

@@ -253,6 +253,36 @@
   padding-top: max(0px, 1rem - var(--w-section-padding));
 }
 
+/*
+ * A joined section has no top edge, so neither the lit top edge of a glass shadow. Its shadow is drawn from a box
+ * running on up behind the head, and stops at the section's top as the head's stops at its bottom: clipping the section
+ * itself would leave a seam between the two fills. A section after another in a stack there is not joined, and its
+ * shadow box is its own. Positioned under the utilities, so a sticky section stays sticky.
+ */
+@layer components {
+  :where(.surface-section-joined .surface-section:not(.surface-section *, .surface-section-tone)) {
+    --w-joined-reach: calc(3rem * var(--w-joined, 0));
+
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: calc(var(--w-joined-reach) * -1 - var(--w-section-border) * (1 - var(--w-joined, 0))) calc(var(--w-section-border) * -1) calc(var(--w-section-border) * -1);
+      border-radius: inherit;
+      box-shadow: var(--w-section-shadow);
+      clip-path: inset(calc(var(--w-joined-reach) - 100vh * (1 - var(--w-joined, 0))) -100vw -100vh);
+      pointer-events: none;
+    }
+  }
+}
+
+@layer utilities {
+  .surface-section-joined .surface-section:not(.surface-section *, .surface-section-tone) {
+    box-shadow: none;
+  }
+}
+
 /* Reaches into the page gutter like a section: for a row of cards on the canvas. On phones the cards keep the page inset. */
 @utility w-page-bleed {
   margin-inline: calc(var(--w-page-bleed, 0px) * -1);
@@ -322,7 +352,7 @@
 
 /*
  * Blocks one after another on the page — sections, stacks of them, page lists, rows of cards, tabs over a section —
- * are apart through the wrappers of any page, as in `surface-stack-divided`: a page needs no stack of its own. In card
+ * are apart through the wrappers of any page, and after a wrapper that ends with one, such as a form of sections, as in `surface-stack-divided`: a page needs no stack of its own. In card
  * and glass `--w-section-gap` separates the surfaces; in flat, where sections paint nothing, the blocks are
  * `--w-stack-divide` apart and a section after a section has a line above its content, so its groups read apart there
  * too. Only in block flow, as a grid or a flex box spaces its children itself, not inside a section, where blocks are
@@ -339,7 +369,7 @@
 
   @scope (.w-page) to (.surface-section *, .surface-root *) {
     :where(:scope, :scope :not(.grid, .flex, .inline-grid, .inline-flex, .surface-columns, .surface-stack, .surface-stack-divided))
-      > :where(.surface-section, .surface-stack, .surface-stack-divided, .surface-columns, .w-list-page, .w-page-bleed, .w-tabs-section)
+      > :where(.surface-section, .surface-stack, .surface-stack-divided, .surface-columns, .w-list-page, .w-page-bleed, .w-tabs-section, :has(> :where(.surface-section, .surface-stack, .surface-stack-divided, .surface-columns, .w-list-page, .w-page-bleed, .w-tabs-section):last-child))
       + :where(.surface-section, .surface-stack, .surface-stack-divided, .surface-columns, .w-list-page, .w-page-bleed, .w-tabs-section) {
       /* 1 in flat, where sections paint nothing, 0 where they do. */
       --w-stack-flat: calc(1 - min(1, var(--w-section-opacity) * 100));
@@ -362,6 +392,12 @@
       padding-top: calc(var(--w-section-padding) + var(--w-stack-divide, 2rem) * var(--w-stack-flat));
       border-top-width: calc(var(--w-section-border) + 1px * var(--w-stack-flat));
     }
+
+    /* A page list is a section: after a block, the line goes on its surface, which keeps to the view. */
+    :where(:scope, :scope :not(.grid, .flex, .inline-grid, .inline-flex, .surface-columns, .surface-stack, .surface-stack-divided))
+      > :where(.surface-section, .surface-stack, .surface-stack-divided, .surface-columns, .w-list-page, .w-page-bleed, .w-tabs-section, :has(> :where(.surface-section, .surface-stack, .surface-stack-divided, .surface-columns, .w-list-page, .w-page-bleed, .w-tabs-section):last-child)) + .w-list-page {
+      --w-list-line: var(--w-stack-flat);
+    }
   }
 }
 
@@ -492,9 +528,11 @@
     }
 
     /* A part after other content: a line above it, as between the groups of a form. */
-    :scope * + .surface-section {
+    :scope * + .surface-section,
+    :scope * + .w-list-section .w-list-heading {
       border-top: 1px solid var(--w-line-subtle);
-      padding-top: var(--w-subsection-divide, 1rem);
+      padding-top: var(--w-subsection-divide, 2rem);
+      margin-top: var(--w-subsection-divide, 2rem);
     }
   }
 
@@ -1003,8 +1041,11 @@
       transparent
     );
 
+    /* 1 after a block on the page in flat: a line above the list, `--w-stack-divide` over its content. */
+    --w-list-divide: calc(var(--w-stack-divide, 2rem) * var(--w-list-line, 0));
+
     display: grid;
-    padding-block: var(--w-section-padding);
+    padding-block: calc(var(--w-section-padding) + var(--w-list-divide)) var(--w-section-padding);
 
     @variant sm-not {
       --w-section-border: 0px;
@@ -1099,8 +1140,10 @@
   }
 
   .w-list-page-surface {
+    margin-top: calc((var(--w-section-padding) + var(--w-list-divide)) * -1);
     background-color: var(--w-section-paint);
     border: var(--w-section-border) solid var(--w-line-subtle);
+    border-top-width: calc(var(--w-section-border) + 1px * var(--w-list-line, 0));
     backdrop-filter: var(--w-section-backdrop);
   }