eco-vue-js 0.26.26 → 0.26.28

package/dist/components/Button/WButtonMore.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WButtonMore.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/WButtonMore.vue"],"names":[],"mappings":"AA6CA;AA6JA,OAAO,EAAC,KAAK,aAAa,EAAa,MAAM,iBAAiB,CAAA;AAE9D,KAAK,WAAW,GAAG;IACjB,kDAAkD;IAClD,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sIAAsI;IACtI,MAAM,CAAC,EAAE,aAAa,CAAA;CACvB,CAAC;AASF,KAAK,WAAW,GAAG;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE;QAAC,MAAM,EAAE,MAAM,IAAI,CAAC;QAAC,MAAM,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE;YAAC,eAAe,EAAE,OAAO,CAAA;SAAC,CAAA;KAAC,KAAK,IAAI,CAAA;CACnG,CAAC;AA+JF,QAAA,MAAM,UAAU;oBAxIO,aAAa,KAAG,IAAI;iBA8BzB,IAAI;;IAepB,wDAAwD;;;;;;kFA+FxD,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":"WButtonMore.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/WButtonMore.vue"],"names":[],"mappings":"AAmDA;AAoKA,OAAO,EAAC,KAAK,aAAa,EAAa,MAAM,iBAAiB,CAAA;AAE9D,KAAK,WAAW,GAAG;IACjB,kDAAkD;IAClD,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sIAAsI;IACtI,MAAM,CAAC,EAAE,aAAa,CAAA;CACvB,CAAC;AASF,KAAK,WAAW,GAAG;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE;QAAC,MAAM,EAAE,MAAM,IAAI,CAAC;QAAC,MAAM,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE;YAAC,eAAe,EAAE,OAAO,CAAA;SAAC,CAAA;KAAC,KAAK,IAAI,CAAA;CACnG,CAAC;AAyKF,QAAA,MAAM,UAAU;oBAjJO,aAAa,KAAG,IAAI;iBA8BzB,IAAI;;IAepB,wDAAwD;;;;;;kFAwGxD,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/Button/WButtonMore.vue_vue_type_script_setup_true_lang.js

@@ -8,6 +8,11 @@ var _hoisted_1 = [
 	"aria-expanded",
 	"aria-disabled"
 ];
+var _hoisted_2 = {
+	ref: "circle",
+	"aria-hidden": "true",
+	class: "pointer-events-none absolute inset-x-0 inset-y-[-60%]"
+};
 var WButtonMore_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "WButtonMore",
 	props: {
@@ -22,6 +27,7 @@ var WButtonMore_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		const slots = useSlots();
 		const renderSlot$1 = markRaw(() => slots.default?.());
 		const buttonRef = useTemplateRef("button");
+		const circleRef = useTemplateRef("circle");
 		const overlay = useOverlay();
 		let closeMenu = null;
 		const isOpen = ref(false);
@@ -31,7 +37,7 @@ var WButtonMore_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		/** Opens the menu at `anchor` — such as a point made with `createPointAnchor` — instead of the `anchor` prop or the button. */
 		const open = (anchor) => {
 			const target = anchor ?? props.anchor;
-			const opened = target ?? buttonRef.value;
+			const opened = target ?? circleRef.value ?? buttonRef.value;
 			if (!opened) return;
 			const value = overlay.open({
 				present: "dropdown",
@@ -91,7 +97,7 @@ var WButtonMore_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				"w-hover-circle": !__props.disabled,
 				"text-description": !isOpen.value || isCustomAnchor.value,
 				"tone-primary text-tone": isOpen.value && !isCustomAnchor.value
-			}]) }, [(openBlock(), createBlock(resolveDynamicComponent(__props.icon ?? unref(IconMore_default)), { class: "square-[1.125em]" }))], 2)], 16, _hoisted_1));
+			}]) }, [(openBlock(), createBlock(resolveDynamicComponent(__props.icon ?? unref(IconMore_default)), { class: "square-[1.125em]" })), createElementVNode("span", _hoisted_2, null, 512)], 2)], 16, _hoisted_1));
 		};
 	}
 });

package/dist/components/InfiniteList/WInfiniteListWrapper.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WInfiniteListWrapper.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/InfiniteList/WInfiniteListWrapper.vue"],"names":[],"mappings":"AAsDA;AAmKA,OAAO,KAAK,EAAC,uBAAuB,EAAC,MAAM,SAAS,CAAA;AAEpD,OAAO,EAAC,KAAK,KAAK,EAA2E,MAAM,KAAK,CAAA;AAcxG,KAAK,WAAW,GAAG;IACjB,gIAAgI;IAChI,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,kFAAkF;IAClF,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAC;AA8EF,KAAK,WAAW,GAAG;IACjB,uGAAuG;IACvG,MAAM,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,EAAE,CAAA;IACnD,+EAA+E;IAC/E,OAAO,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,EAAE,CAAA;CACrD,CAAC;AA6HF,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"}
+{"version":3,"file":"WInfiniteListWrapper.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/InfiniteList/WInfiniteListWrapper.vue"],"names":[],"mappings":"AAsDA;AAqKA,OAAO,KAAK,EAAC,uBAAuB,EAAC,MAAM,SAAS,CAAA;AAEpD,OAAO,EAAC,KAAK,KAAK,EAA2E,MAAM,KAAK,CAAA;AAcxG,KAAK,WAAW,GAAG;IACjB,gIAAgI;IAChI,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,kFAAkF;IAClF,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAC;AAgFF,KAAK,WAAW,GAAG;IACjB,uGAAuG;IACvG,MAAM,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,EAAE,CAAA;IACnD,+EAA+E;IAC/E,OAAO,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,EAAE,CAAA;CACrD,CAAC;AA6HF,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/InfiniteList/WInfiniteListWrapper.vue_vue_type_script_setup_true_lang.js

@@ -39,11 +39,13 @@ var WInfiniteListWrapper_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 		};
 		const sectionHeadHeight = isContained ? null : inject(wSectionHeadHeight, null);
 		const isPage = ref(false);
-		const sectionHeadOffset = computed(() => isPage.value ? sectionHeadHeight?.value ?? 0 : 0);
+		const stickyGap = ref(0);
+		const sectionHeadOffset = computed(() => isPage.value ? sectionHeadHeight?.value ?? 0 : stickyGap.value);
 		const observe = () => {
 			if (!indicatorRef.value) return;
 			isPage.value = indicatorRef.value.closest(".w-list-page") !== null;
 			const top = getStickyTop();
+			stickyGap.value = isContained ? 0 : Math.max(0, top - headerHeight.value);
 			if (observer && top === observerTop) return;
 			observer?.disconnect();
 			observerTop = top;

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

@@ -7,6 +7,7 @@ type __VLS_Slots = {
 };
 declare const __VLS_base: import('vue').DefineComponent<NavItemProps, {
     isActive: import('vue').ComputedRef<boolean>;
+    anchorRef: Readonly<import('vue').ShallowRef<HTMLSpanElement | null>>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<NavItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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":"AA4FA;AAgJA,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;AAqRF,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":"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"}

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

@@ -5,7 +5,7 @@ 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, withCtx } from "vue";
+import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, 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,
@@ -15,11 +15,16 @@ var _hoisted_2 = {
 	key: 0,
 	class: "absolute left-3 top-0 flex h-full items-center"
 };
-var _hoisted_3 = { class: "[overflow:inherit]" };
-var _hoisted_4 = { 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 = {
+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 = {
 	key: 0,
 	class: "shrink-0"
 };
@@ -54,7 +59,10 @@ var WNavItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		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 isTextColor = computed(() => props.hasActive ? !props.indent : isActive.value);
-		__expose({ isActive });
+		__expose({
+			isActive,
+			anchorRef: useTemplateRef("anchor")
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(WRouterLink_default, {
 				to: __props.to,
@@ -84,21 +92,22 @@ var WNavItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 						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)]),
 						_: 1
 					}),
-					createElementVNode("div", _hoisted_3, [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", {
+					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_4, [iconLocal.value ? (openBlock(), createBlock(resolveDynamicComponent(iconLocal.value), {
+						createElementVNode("div", _hoisted_5, [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_5, [createElementVNode("span", _hoisted_6, [
+						createElementVNode("div", _hoisted_6, [createElementVNode("span", _hoisted_7, [
 							createVNode(WTextOverflow_default, { class: "min-w-0 leading-loose" }, {
 								default: withCtx(() => [createTextVNode(toDisplayString(titleLocal.value), 1)]),
 								_: 1
 							}),
-							!__props.skeleton ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(typeof __props.count === "number" ? `\u00A0(${unref(numberCompactFormatter).format(__props.count)})` : ""), 1)) : (openBlock(), createBlock(WSkeleton_default, {
+							!__props.skeleton ? (openBlock(), createElementBlock("span", _hoisted_8, 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"
 							})),

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":"AAmGA;AAoMA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAA;AAG/C,OAAO,EAAC,KAAK,KAAK,EAA4E,MAAM,KAAK,CAAA;AA+EzG,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;AAqVF,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":"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"}

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

@@ -6,11 +6,12 @@ import { useIsMobile } from "../../utils/mobile.js";
 import { unwrapSlots } from "../../utils/utils.js";
 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, onBeforeUnmount, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, unref, useSlots, useTemplateRef, watch, withCtx } from "vue";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, 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-hidden border border-solid border-line-raised text-start font-normal shadow" };
+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" };
 var WNavItemExpand_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "WNavItemExpand",
 	props: {
@@ -30,7 +31,7 @@ var WNavItemExpand_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		const slotsDefault = computed(() => unwrapSlots(slots.default?.() ?? []));
 		const componentRef = useTemplateRef("component");
 		const innerRef = useTemplateRef("inner");
-		const isDropdownOpen = ref(false);
+		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);
@@ -39,32 +40,10 @@ var WNavItemExpand_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			await nextTick();
 			hasActive.value = innerRef.value?.some((item) => item.isActive) ?? false;
 		};
-		let timeout = null;
-		const showDropdown = () => {
-			if (timeout) {
-				clearTimeout(timeout);
-				timeout = null;
-			}
-			isDropdownOpen.value = true;
-		};
-		const hideDropdown = () => {
-			if (timeout) {
-				clearTimeout(timeout);
-				timeout = null;
-			}
-			timeout = setTimeout(() => {
-				isDropdownOpen.value = false;
-			}, 20);
-		};
 		watch(hasInnerActive, updateHasActive, { immediate: true });
 		watch(isActive, updateHasActive, { immediate: true });
 		watch(slotsDefault, updateHasActive, { immediate: true });
-		watch(hasActive, () => {
-			isDropdownOpen.value = false;
-		}, { immediate: true });
-		onBeforeUnmount(() => {
-			isDropdownOpen.value = false;
-		});
+		watch(hasActive, closeDropdown, { immediate: true });
 		__expose({
 			isActive,
 			isVisible
@@ -74,13 +53,14 @@ var WNavItemExpand_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 				icon: withCtx(() => [renderSlot(_ctx.$slots, "icon")]),
 				_: 3
 			}, 16)) : (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(WDropdownMenu_default, {
-				"is-open": isDropdownOpen.value && !isActive.value,
+				"is-open": unref(isDropdownOpen) && !isActive.value,
 				"horizontal-align": unref(HorizontalAlign).RIGHT_OUTER,
-				"dropdown-class": "flex relative"
+				"parent-element": componentRef.value?.anchorRef ?? void 0,
+				"dropdown-class": "w-nav-group-dropdown relative w-max"
 			}, {
 				toggle: withCtx(() => [createVNode(WNavItem_default, mergeProps(unref(isMobile) || hasActive.value || __props.even ? void 0 : {
-					onMouseenter: showDropdown,
-					onMouseleave: hideDropdown
+					onMouseenter: unref(showDropdown),
+					onMouseleave: unref(hideDropdown)
 				}, {
 					ref: "component",
 					to: __props.to ?? slotsDefault.value?.[0]?.props?.to,
@@ -94,7 +74,7 @@ var WNavItemExpand_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 					even: __props.even,
 					expand: !__props.to,
 					"query-fields": __props.queryFields,
-					hovered: isDropdownOpen.value && !hasActive.value
+					hovered: unref(isDropdownOpen) && !hasActive.value
 				}), {
 					icon: withCtx(() => [renderSlot(_ctx.$slots, "icon")]),
 					right: withCtx(() => [createVNode(unref(IconArrow_default), { class: normalizeClass(["square-3 transition-transform", { "-rotate-90": !hasActive.value && !__props.even }]) }, null, 8, ["class"])]),
@@ -113,23 +93,31 @@ var WNavItemExpand_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 					"query-fields",
 					"hovered"
 				])]),
-				content: withCtx((scope) => [createVNode(WClickOutside_default, {
-					class: normalizeClass(["px-1", { "self-end": scope.atBottom }]),
-					onMouseenter: showDropdown,
-					onMouseleave: hideDropdown,
-					onClick: hideDropdown
+				content: withCtx(() => [createVNode(WClickOutside_default, {
+					class: "w-nav-group-dropdown-content px-1",
+					onMouseenter: unref(showDropdown),
+					onMouseleave: unref(hideDropdown),
+					onClick: unref(hideDropdown)
 				}, {
 					default: withCtx(() => [createElementVNode("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(slotsDefault.value, (slot, index) => {
 						return openBlock(), createBlock(resolveDynamicComponent(slot), {
 							key: index,
 							even: "",
-							"onUpdate:isActive": _cache[0] || (_cache[0] = ($event) => $event[1] && hideDropdown())
+							"onUpdate:isActive": _cache[0] || (_cache[0] = ($event) => $event[1] && unref(hideDropdown)())
 						}, null, 32);
 					}), 128))])]),
 					_: 1
-				}, 8, ["class"])]),
+				}, 8, [
+					"onMouseenter",
+					"onMouseleave",
+					"onClick"
+				])]),
 				_: 3
-			}, 8, ["is-open", "horizontal-align"]), createVNode(WExpansion_default, {
+			}, 8, [
+				"is-open",
+				"horizontal-align",
+				"parent-element"
+			]), createVNode(WExpansion_default, {
 				"is-shown": isActive.value || __props.even,
 				class: normalizeClass({ "w-nav-group-collapsed": !isActive.value && !__props.even })
 			}, {

package/dist/components/Nav/use/useNavGroupDropdown.d.ts

@@ -0,0 +1,7 @@
+export declare const useNavGroupDropdown: () => {
+    isOpen: import('vue').ComputedRef<boolean>;
+    show: () => void;
+    hide: () => void;
+    close: () => void;
+};
+//# sourceMappingURL=useNavGroupDropdown.d.ts.map

package/dist/components/Nav/use/useNavGroupDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNavGroupDropdown.d.ts","sourceRoot":"","sources":["../../../../../src/components/Nav/use/useNavGroupDropdown.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,mBAAmB;;;;;CAwC/B,CAAA"}

package/dist/components/Nav/use/useNavGroupDropdown.js

@@ -0,0 +1,38 @@
+import { computed, onBeforeUnmount, ref } from "vue";
+// src/components/Nav/use/useNavGroupDropdown.ts
+var openKey = ref(null);
+var timeout = null;
+var clearHide = () => {
+	if (timeout === null) return;
+	clearTimeout(timeout);
+	timeout = null;
+};
+var useNavGroupDropdown = () => {
+	const key = Symbol("nav-group");
+	const isOpen = computed(() => openKey.value === key);
+	const show = () => {
+		clearHide();
+		openKey.value = key;
+	};
+	const hide = () => {
+		if (!isOpen.value) return;
+		clearHide();
+		timeout = setTimeout(() => {
+			timeout = null;
+			if (openKey.value === key) openKey.value = null;
+		}, 20);
+	};
+	const close = () => {
+		if (!isOpen.value) return;
+		clearHide();
+		openKey.value = null;
+	};
+	onBeforeUnmount(close);
+	return {
+		isOpen,
+		show,
+		hide,
+		close
+	};
+};
+export { useNavGroupDropdown };

package/docs/components/nav-bar.md

@@ -24,7 +24,7 @@ The `footer` slot is the nav's bottom, such as a back button or the app's versio
 
 `WNavItem` is a router link with an icon and a title. Both default to the route's `meta.icon` and `meta.titleShort` (or `meta.title`), so an item is often just `<WNavItem :to="{name: RouteName.PROJECTS}" />`. It is active while the current route has the same name; `queryFields` lists the query params that must match too, for items that open the same route with different filters. `count` shows a number in brackets after the title and `counter` a badge, with `skeleton` while they load.
 
-`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. 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.
+`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.
 
 `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.
 

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.26, 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.26.28, 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.26",
+  "version": "0.26.28",
   "homepage": "https://rsmple.github.io/eco-vue-js/",
   "dependencies": {
     "@stylistic/eslint-plugin": "5.10.0",

package/tailwind-base/css/surfaces.css

@@ -65,12 +65,10 @@
     --w-chrome-gap: 0px;
     --w-chrome-rounded: 0px;
     --w-chrome-border: 0px;
-    /* Shadows the bars combine with their edge and ring: a theme sets a shadow list, `0 0 #0000` for none, never `none`. */
+    /* Shadows the bars combine with their edge: a theme sets a shadow list, `0 0 #0000` for none, never `none`. */
     --w-chrome-shadow: 0 0 #0000;
     --w-chrome-opacity: 1;
     /* What blurs behind the bars, such as a glass theme's blur. Unset, the header keeps its own and the others none. */
-    /* What fills the gap around a floating bar, so content scrolling under the header doesn't show above it. */
-    --w-chrome-ring: transparent;
 
     /* A picture on the canvas, such as a glass theme's gradient: fixed to the viewport, so what paints it again matches. */
     --w-canvas-image: none;
@@ -533,8 +531,7 @@
  * App chrome. The nav and the actions bar run the screen's full height, so the nav's top, the brand's place, is the
  * frame's top-left corner in every style. Docked (flat), the header spans the screen under them. Floating, each bar
  * is a card `--w-chrome-gap` off the screen edges and the frame's margins, and the header only spans the page between
- * the nav and the actions bar. A floating header paints `--w-chrome-ring` over the gap above it and beside it, not
- * below: there the page shows, such as a stuck list's section above its toolbar.
+ * the nav and the actions bar. The header casts no shadow, so none spreads onto the bars beside it.
  */
 @layer utilities {
   /* Its content lines up with the page's: the header's own row adds `--inner-margin`, as the page does. */
@@ -566,9 +563,6 @@
       color-mix(in oklab, var(--w-chrome-base) calc(var(--w-chrome-opacity) * 100%), transparent) calc(var(--w-chrome-float) * 100%),
       var(--w-overlay)
     );
-    box-shadow:
-      var(--w-chrome-shadow),
-      0 calc(var(--w-chrome-gap) * -1) 0 var(--w-chrome-gap) var(--w-chrome-ring);
 
     /* On phones it spans the screen, like a section: only the edge toward the page is left. */
     @variant sm-not {
@@ -646,6 +640,30 @@
     background-color: color-mix(in oklab, var(--w-surface) calc(var(--w-chrome-float) * 100%), transparent);
   }
 
+  /*
+   * A list header on the page outside any section, such as a page's own toolbar in WInfiniteListWrapper, is a section
+   * of its own: the section's paint, edges and padding, reaching into the page gutter, stuck under the header bar as
+   * the bars float. Flat, the section tokens are 0: it stays a clear bar the header bar grows behind.
+   */
+  .w-infinite-list-header:not(:is(.w-list-page, .surface-section, .surface-card) *) {
+    --w-surface: color-mix(in oklab, var(--w-section-base) calc(var(--w-section-opacity) * 100%), var(--w-canvas));
+
+    margin-inline: calc(var(--w-page-bleed, 0px) * -1);
+    padding: var(--w-section-padding);
+    background-color: color-mix(in oklab, var(--w-section-base) calc(var(--w-section-opacity) * 100%), transparent);
+    border: var(--w-section-border) solid var(--w-line-subtle);
+    border-radius: var(--w-section-rounded);
+    box-shadow: var(--w-section-shadow);
+    backdrop-filter: var(--w-section-backdrop);
+
+    @variant sm-not {
+      margin-inline: calc(var(--w-page-inset, 0px) * -1);
+      padding-inline: var(--inner-margin);
+      border-inline-width: 0;
+      border-radius: 0;
+    }
+  }
+
   /*
    * Floating, the items keep off the nav's edges, and their hover pill and the active marker follow its rounding: the
    * pill's radius is the nav's less the inset, so the two curves run parallel. Docked, the pill and the marker meet
@@ -711,17 +729,21 @@
    */
   .w-nav-bar-content:not(.w-nav-bar-brand + *)
     .w-nav-item-inset:first-child:not(.w-nav-bar-content :not(:first-child) .w-nav-item-inset) {
-    padding-top: calc(0.25rem + var(--w-chrome-float) * 0.25rem);
+    --w-nav-item-pad-top: calc(0.25rem + var(--w-chrome-float) * 0.25rem);
+
+    padding-top: var(--w-nav-item-pad-top);
   }
 
   .w-nav-bar-content
     .w-nav-item-inset:not(:has(~ :not(.w-nav-group-collapsed))):not(
       .w-nav-bar-content :has(~ :not(.w-nav-group-collapsed)) .w-nav-item-inset
     ) {
-    padding-bottom: calc(0.25rem + (1 - var(--w-chrome-float)) * 1rem + var(--w-chrome-float) * 0.25rem);
+    --w-nav-item-pad-bottom: calc(0.25rem + (1 - var(--w-chrome-float)) * 1rem + var(--w-chrome-float) * 0.25rem);
+
+    padding-bottom: var(--w-nav-item-pad-bottom);
 
     @variant sm-not {
-      padding-bottom: 1.25rem;
+      --w-nav-item-pad-bottom: 1.25rem;
     }
   }
 
@@ -745,14 +767,24 @@
     padding-inline: var(--w-nav-inset-start) var(--w-nav-inset-end);
   }
 
-  /* Floating, the active marker sits in the middle of the item's inset, clear of the nav's edge and of the item. */
+  /*
+   * Floating, the active marker sits in the middle of the item's inset, clear of the nav's edge and of the item. It
+   * follows the pill, not the item: the first and last items' extra room (above) is taken off its ends.
+   */
   .w-nav-item-indicator {
-    inset-block: calc(var(--w-chrome-float) * 0.5rem);
+    top: calc(var(--w-nav-item-pad-top, 0.25rem) - 0.25rem + var(--w-chrome-float) * 0.5rem);
+    bottom: calc(var(--w-nav-item-pad-bottom, 0.25rem) - 0.25rem + var(--w-chrome-float) * 0.5rem);
     left: calc(var(--w-chrome-float) * 0.125rem);
     height: auto;
     border-radius: calc(var(--w-chrome-float) * 9999px);
   }
 
+  /* A group's dropdown opens at the item without the first and last items' extra room, so it lines up with the pill. */
+  .w-nav-item-anchor {
+    top: calc(var(--w-nav-item-pad-top, 0.25rem) - 0.25rem);
+    bottom: calc(var(--w-nav-item-pad-bottom, 0.25rem) - 0.25rem);
+  }
+
   /*
    * A group's dropdown shares the nav's paint (`.w-nav-bar`) but not its place: it sizes to its items. Its corners
    * are the nav's when floating; docked they stay rounded, as before.
@@ -766,10 +798,39 @@
     top: auto;
     left: auto;
     height: auto;
-    max-height: none;
+    max-height: calc(100vh - 1.5rem);
     border-radius: var(--w-nav-dropdown-rounded);
   }
 
+  /*
+   * A group's dropdown lines up with the item by its top, or by its bottom when it opens upward. Where that runs past
+   * the screen, it shifts to stay on it and sticks to the edge, and scrolls once taller than the screen. The space the
+   * dropdown would size it to is not kept, so the shift has room.
+   */
+  .w-nav-group-dropdown {
+    max-height: none !important;
+  }
+
+  .w-nav-group-dropdown-content {
+    --w-nav-group-edge: 0.75rem;
+
+    transform: translateY(
+      max(
+        var(--w-nav-group-edge) - var(--dropdown-y, 0px),
+        min(0px, 100vh - var(--w-nav-group-edge) - var(--dropdown-y, 0px) - 100%)
+      )
+    );
+
+    .dropdown-top & {
+      transform: translateY(
+        min(
+          100vh - var(--w-nav-group-edge) - var(--dropdown-y, 0px),
+          max(0px, var(--w-nav-group-edge) - var(--dropdown-y, 0px) + 100%)
+        )
+      );
+    }
+  }
+
   /* The icon starts where the items' do: past their inset and the item's own padding. */
   .w-nav-bar-toggle {
     top: var(--w-chrome-gap);
@@ -795,22 +856,26 @@
     --w-section-paint: color-mix(in oklab, var(--w-section-base) calc(var(--w-section-opacity) * 100%), transparent);
     --w-band-start: calc(var(--w-left-inner) - var(--w-section-padding));
     --w-band-end: calc(100vw - var(--vw-scroll-bar-width, 0px) - var(--w-right-inner) + var(--w-section-padding));
-    --w-page-backdrop:
+    /* The section's fill: for what draws the section's edges as its own border, which the bands would double. */
+    --w-page-fill:
       linear-gradient(
         to right,
         transparent var(--w-band-start),
-        var(--w-line-subtle) var(--w-band-start) calc(var(--w-band-start) + var(--w-section-border)),
-        transparent calc(var(--w-band-start) + var(--w-section-border)) calc(var(--w-band-end) - var(--w-section-border)),
-        var(--w-line-subtle) calc(var(--w-band-end) - var(--w-section-border)) var(--w-band-end),
+        var(--w-section-paint) var(--w-band-start) var(--w-band-end),
         transparent var(--w-band-end)
       ),
+      var(--w-canvas-image);
+    /* The fill with the section's side edges, for what has no border of its own. */
+    --w-page-backdrop:
       linear-gradient(
         to right,
         transparent var(--w-band-start),
-        var(--w-section-paint) var(--w-band-start) var(--w-band-end),
+        var(--w-line-subtle) var(--w-band-start) calc(var(--w-band-start) + var(--w-section-border)),
+        transparent calc(var(--w-band-start) + var(--w-section-border)) calc(var(--w-band-end) - var(--w-section-border)),
+        var(--w-line-subtle) calc(var(--w-band-end) - var(--w-section-border)) var(--w-band-end),
         transparent var(--w-band-end)
       ),
-      var(--w-canvas-image);
+      var(--w-page-fill);
   }
 
   .w-list-page {
@@ -911,6 +976,22 @@
     }
   }
 
+  .w-list-page-frame {
+    /*
+     * Joined to a section head above it, the frame runs on up over the head with its top corners: one shadow and one
+     * top highlight for the whole section, instead of the head's ending at its bottom and the frame's starting there.
+     */
+    --w-frame-head: calc(var(--w-section-head-height, 0px) * var(--w-joined, 0));
+
+    margin-top: calc(var(--w-section-padding) * -1 - var(--w-frame-head));
+    border-start-start-radius: var(--w-section-rounded);
+    border-start-end-radius: var(--w-section-rounded);
+
+    @variant sm-not {
+      border-radius: 0;
+    }
+  }
+
   .w-list-page-surface {
     background-color: var(--w-section-paint);
     border: var(--w-section-border) solid var(--w-line-subtle);
@@ -924,9 +1005,12 @@
    * header bar.
    */
   .w-list-page-frame {
-    z-index: calc(21 - var(--w-chrome-float) * 15);
+    /* Over the head it runs up over (`--w-frame-head`), whose shadow it draws. */
+    z-index: calc(21 - var(--w-chrome-float) * 15 + var(--w-joined, 0) * 2);
     pointer-events: none;
     box-shadow: var(--w-section-shadow);
+    /* As wide as the section's edge, so a highlight inside the shadow lies inside the edge, as on a section, not over it. */
+    border: var(--w-section-border) solid transparent;
 
     /*
      * Only the part of the section in view, from the header bar's gap to the screen's bottom gap: its shadow wraps the
@@ -934,10 +1018,10 @@
      */
     @variant sm {
       align-self: start;
-      top: calc(var(--w-header-inner) + var(--w-section-head-height, 0px));
+      top: calc(var(--w-header-inner) + var(--w-section-head-height, 0px) - var(--w-frame-head, 0px));
       height: min(
-        calc(100% + var(--w-section-padding) * 2),
-        calc(100vh - var(--w-header-inner) - var(--w-section-head-height, 0px) - var(--w-chrome-gap))
+        calc(100% + var(--w-section-padding) * 2 + var(--w-frame-head, 0px)),
+        calc(100vh - var(--w-header-inner) - var(--w-section-head-height, 0px) + var(--w-frame-head, 0px) - var(--w-chrome-gap))
       );
     }
   }
@@ -960,7 +1044,8 @@
 
     position: sticky;
     bottom: 0;
-    z-index: calc(22 - var(--w-chrome-float) * 15);
+    /* Over the frame also where it is raised over a joined head. */
+    z-index: calc(22 - var(--w-chrome-float) * 15 + var(--w-joined, 0) * 2);
     height: var(--w-list-end-height);
     margin-bottom: calc(var(--w-list-end-height) * -1);
     pointer-events: none;
@@ -1025,7 +1110,7 @@
     border-end-start-radius: var(--w-section-rounded);
     border-end-end-radius: var(--w-section-rounded);
     background-color: var(--w-canvas);
-    background-image: var(--w-page-backdrop);
+    background-image: var(--w-page-fill);
     background-attachment: fixed;
   }
 
@@ -1296,7 +1381,7 @@
     border-start-start-radius: calc(var(--w-section-rounded) * (1 - var(--w-joined, 0)));
     border-start-end-radius: calc(var(--w-section-rounded) * (1 - var(--w-joined, 0)));
     background-color: var(--w-canvas);
-    background-image: var(--w-page-backdrop);
+    background-image: var(--w-page-fill);
     background-attachment: fixed;
 
     @variant sm-not {
@@ -1314,9 +1399,11 @@
     top: var(--w-header-inner);
     z-index: calc(22 - var(--w-chrome-float) * 15);
     background-color: var(--w-canvas);
-    background-image: var(--w-page-backdrop);
+    background-image: var(--w-page-fill);
     background-attachment: fixed;
     backdrop-filter: none;
+    /* The list's frame runs on up over it and casts the section's shadow. */
+    box-shadow: none;
   }
 
   .w-list-page-repaint .w-infinite-list-header-stuck .w-infinite-list-header-edge::before,