eco-vue-js 0.26.29 → 0.26.31

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":"AAmDA;AA0PA,OAAO,KAAK,EAAC,uBAAuB,EAAC,MAAM,SAAS,CAAA;AAEpD,OAAO,EAAC,KAAK,KAAK,EAA0E,MAAM,KAAK,CAAA;AAYvG,KAAK,WAAW,GAAG;IACjB,gIAAgI;IAChI,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,kFAAkF;IAClF,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,mGAAmG;IACnG,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAC;AAyKF,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;AA6FF,QAAA,MAAM,UAAU;;oPAGd,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":"AAmDA;AAmRA,OAAO,KAAK,EAAC,uBAAuB,EAAC,MAAM,SAAS,CAAA;AAEpD,OAAO,EAAC,KAAK,KAAK,EAA0E,MAAM,KAAK,CAAA;AAYvG,KAAK,WAAW,GAAG;IACjB,gIAAgI;IAChI,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,kFAAkF;IAClF,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,mGAAmG;IACnG,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAC;AAkMF,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;AA8FF,QAAA,MAAM,UAAU;;oPAGd,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

@@ -58,15 +58,27 @@ var WInfiniteListWrapper_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 		const isPadding = () => !joined && !isContained && !props.noHeaderUpdate;
 		const updatePadding = () => {
 			if (!isPadding()) return;
-			const intersecting = props.inPlace || isIntersecting.value;
+			const intersecting = props.inPlace || isSectionInView.value || isIntersecting.value;
 			if (intersecting === null) return;
 			const offset = indicatorRef.value?.closest(".w-list-page") ? 0 : stickyGap.value;
 			const height = headerHeight.value + offset;
 			updateHeaderPadding(!intersecting && height ? height : 0);
 		};
+		/**
+		* Whether the page list's section fits the screen below the header bar. Its frame then has no room to stick, so the
+		* section's top scrolls away above where a stuck header would draw it: the header scrolls along, as in a section.
+		*/
+		const isSectionInView = ref(false);
+		const updateSectionInView = () => {
+			const page = indicatorRef.value?.closest(".w-list-page");
+			const surface = page?.querySelector(":scope > .w-list-page-surface");
+			const frame = page?.querySelector(":scope > .w-list-page-frame");
+			isSectionInView.value = !!surface && !!frame && getComputedStyle(frame).top !== "auto" && frame.getBoundingClientRect().height >= surface.getBoundingClientRect().height - 1;
+		};
 		watch(() => [
 			props.inPlace,
 			isIntersecting.value,
+			isSectionInView.value,
 			headerHeight.value,
 			stickyGap.value
 		], updatePadding);
@@ -97,8 +109,10 @@ var WInfiniteListWrapper_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 		const onResize = () => {
 			updateHeaderTop();
 			observe();
+			updateSectionInView();
 		};
 		let resizeObserver = null;
+		let sectionObserver = null;
 		onMounted(() => {
 			if (!getIsClientSide() || joined || !headerRef.value) return;
 			resizeObserver = new ResizeObserver((entries) => {
@@ -108,12 +122,18 @@ var WInfiniteListWrapper_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 				updateHeaderTop();
 			});
 			resizeObserver.observe(headerRef.value);
+			const page = indicatorRef.value?.closest(".w-list-page");
+			if (page && !isContained) {
+				sectionObserver = new ResizeObserver(updateSectionInView);
+				sectionObserver.observe(page);
+			}
 			observe();
 			window.addEventListener("resize", onResize);
 		});
 		onBeforeUnmount(() => {
 			window.removeEventListener("resize", onResize);
 			resizeObserver?.disconnect();
+			sectionObserver?.disconnect();
 			intersectionObserver?.disconnect();
 			if (isPadding()) updateHeaderPadding(0);
 		});
@@ -139,10 +159,10 @@ var WInfiniteListWrapper_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 				createElementVNode("div", {
 					ref: "header",
 					class: normalizeClass(["print:hidden", __props.inPlace ? void 0 : {
-						"sticky": true,
+						"sticky": !isSectionInView.value,
 						"top-(--w-header-inner)": !unref(isContained),
 						"w-infinite-list-header": !unref(isContained) && !__props.noHeaderUpdate,
-						"w-infinite-list-header-stuck": !unref(isContained) && !__props.noHeaderUpdate && isIntersecting.value === false,
+						"w-infinite-list-header-stuck": !unref(isContained) && !__props.noHeaderUpdate && !isSectionInView.value && isIntersecting.value === false,
 						"top-0 not-empty:pt-(--w-list-contained-top,0.75rem)": unref(isContained) && !unref(isModal),
 						"top---modal-header-height": unref(isModal),
 						"bg-surface": __props.noHeaderUpdate || unref(isContained)

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":"AAqQA;AAyuBA,OAAO,KAAK,EAAC,eAAe,EAAE,aAAa,EAAE,gBAAgB,EAAE,SAAS,EAAc,kBAAkB,EAAe,cAAc,EAAE,OAAO,EAAkB,UAAU,EAAE,aAAa,EAAC,MAAM,SAAS,CAAA;AACzM,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,4BAA4B,CAAA;AAC5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,eAAe,CAAA;AAC5C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAA;AAczC,OAAO,EAAC,KAAK,mBAAmB,EAAc,MAAM,yBAAyB,CAAA;AAC7E,OAAO,EAAC,KAAK,SAAS,EAAgC,MAAM,qBAAqB,CAAA;AACjF,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAA;AAYtC,QAAA,MAAM,YAAY,GAAK,IAAI,SAAS,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,UAAU,CAAC,IAAI,EAAE,WAAW,CAAC,EAAE,WAAW,SAAS,SAAS,OAAO,EAAE,EACjJ,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAijCO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QA7iCpD;;;WAGG;gBACK,MAAM;QACd,2FAA2F;sBAC7E,MAAM;QACpB,oIAAoI;gBAC5H,MAAM;QACd,+JAA+J;gBACvJ,MAAM;QACd,uHAAuH;oBAC3G,kBAAkB,CAAC,IAAI,EAAE,WAAW,CAAC;QACjD,iDAAiD;oBACrC,eAAe,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC;QACjE,qEAAqE;2BAClD,eAAe,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC;QACxE,6GAA6G;qBAChG,WAAW;QACxB,oCAAoC;uBACrB,mBAAmB,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAC3D,gGAAgG;6BAC3E,MAAM;QAC3B,4EAA4E;wBAC5D,MAAM;QACtB,+MAA+M;eACxM,aAAa,CAAC,WAAW,CAAC,EAAE;QACnC,6FAA6F;iBACpF,eAAe,CAAC,WAAW,CAAC,EAAE;QACvC,yHAAyH;eAClH,aAAa,CAAC,IAAI,CAAC,EAAE;QAC5B,mCAAmC;yBAClB,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO;QACxC,0CAA0C;oBAC9B,MAAM;QAClB,wCAAwC;2BACrB,MAAM;QACzB,8DAA8D;6BACzC,CAAC,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM;QACnE,sCAAsC;oBAC1B,OAAO;QACnB,4EAA4E;mBACjE,MAAM;QACjB,mGAAmG;0BACjF,cAAc,CAAC,MAAM,CAAC;QACxC,qFAAqF;sBACvE,QAAQ;QACtB,iRAAiR;mBACtQ,OAAO;QAClB,uEAAuE;sBACzD,OAAO;QACrB,mKAAmK;mBACxJ,OAAO;QAClB,wEAAwE;qBAC3D,OAAO;QACpB,iKAAiK;0BAC/I,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS;QACnE,sDAAsD;uBACvC,YAAY,CAAC,IAAI,EAAE,CAAC;QACnC,4GAA4G;kBAClG,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,KAAK,OAAO;QACvC,sCAAsC;qBACzB,WAAW;QACxB,yKAAyK;mBAC9J,SAAS,CAAC,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;QACnD,4BAA4B;iBACnB,CAAC,IAAI,EAAE,IAAI,KAAK,SAAS,CAAC,IAAI,CAAC,GAAG,SAAS;QACpD,6CAA6C;oBACjC,OAAO;QACnB,qFAAqF;2BAClE,OAAO;QAC1B,gCAAgC;oBACpB,OAAO;QACnB,qDAAqD;0BACnC,MAAM;QACxB,yFAAyF;0BACvE,CAAC,WAAW,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,EAAE,CAAC;QAC/D,iCAAiC;yBAChB,MAAM;QACvB,4FAA4F;wBAC5E,OAAO;QACvB,+JAA+J;uBAChJ,OAAO;QACtB,yHAAyH;oBAC7G,SAAS,CAAC,MAAM,CAAC;QAC7B,uFAAuF;yBACtE,OAAO;QACxB,mJAAmJ;oBACvI,OAAO;QACnB,kHAAkH;qBACrG,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM;QAClD,8DAA8D;iBACrD,OAAO;QAChB,oDAAoD;wBACpC,OAAO;QACvB,wFAAwF;qBAC3E,OAAO;QACpB,iGAAiG;4BAC7E,OAAO;;;;;;;;;;KA28B4D,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;QA95BT,sFAAsF;gBAC9E,CAAC,KAAK,EAAE;YAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;SAAC,KAAK,IAAI;QACpD,yDAAyD;sBAC3C,MAAM,IAAI;QACxB,gGAAgG;iBACvF,CAAC,KAAK,EAAE;YAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;SAAC,KAAK,IAAI;QACrD,yTAAyT;iBAChT,MAAM,IAAI;QACnB,8GAA8G;oBAClG,MAAM,IAAI;QACtB,oRAAoR;gBAC5Q,CAAC,KAAK,EAAE;YAAC,IAAI,EAAE,IAAI,CAAC;YAAC,QAAQ,EAAE,IAAI,GAAG,SAAS,CAAC;YAAC,QAAQ,EAAE,OAAO,CAAA;SAAC,KAAK,IAAI;QACpF,iEAAiE;gBACzD,MAAM,IAAI;QAClB,qLAAqL;gBAC7K,CAAC,KAAK,EAAE;YAAC,KAAK,EAAE,KAAK,CAAC;YAAC,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;YAAC,UAAU,EAAE,OAAO,CAAA;SAAC,KAAK,IAAI;;;YA5BpF,cAAc,SAAS,QAAQ,GAAG,IAAI;YAEtC,cAAc,SAAS,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;YAEpD,qBAAqB,SAAS,WAAW,GAAG,IAAI;YAEhD,cAAc,SAAS,MAAM,GAAG,SAAS,GAAG,IAAI;YAEhD,kBAAkB,SAAS,SAAS,CAAC,MAAM,CAAC,GAAG,IAAI;;EAu6BrD,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

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/List/components/ListToolbar.vue.d.ts.map

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

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

@@ -15,7 +15,7 @@ import { Fragment, computed, createBlock, createCommentVNode, createElementBlock
 // src/components/List/components/ListToolbar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
-	class: "w-list-header"
+	class: "w-list-header list:left---left-inner list:w---width-inner list:sticky"
 };
 var _hoisted_2 = { class: "grid grid-cols-[1fr_auto] gap-4" };
 var _hoisted_3 = { class: "text-description whitespace-nowrap" };

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/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/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.29, 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.31, 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.29",
+  "version": "0.26.31",
   "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,16 +352,24 @@
 
 /*
  * 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
  * its parts, and not in a stack the page sets, which spaces its own: `surface-stack` runs sections together in flat.
  */
 @layer components {
+  /*
+   * A page list is a section of its own: apart from the content before it, as sections in a `surface-stack` are. In
+   * this layer, under the page's spacing below, which wins in block flow; a stack the list is in sets its own.
+   */
+  :where(* + .w-list-page-table) {
+    margin-top: var(--w-section-gap);
+  }
+
   @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));
@@ -354,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);
+    }
   }
 }
 
@@ -484,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);
     }
   }
 
@@ -995,19 +1041,17 @@
       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;
     }
   }
 
-  /* A section of its own: apart from the page content before it, as sections in a `surface-stack` are. A stack it is in sets its own. */
-  :where(* + .w-list-page-table) {
-    margin-top: var(--w-section-gap);
-  }
-
   /* As wide as its rows, plus the right inset: the last column scrolls clear of the sticky menu column. */
   .w-list-page-table {
     width: max-content;
@@ -1055,6 +1099,23 @@
     }
   }
 
+  /*
+   * A page list of cards wraps and never scrolls sideways: while a table scrolls the window, its content keeps to the
+   * view as content beside the table does. Its parts stick on their own, as a table's toolbar does, and not as one
+   * box: the stuck header would stick inside another sticky box, which browsers move apart from it while scrolling,
+   * and the box's layer would hold the header and the edges under the frame. The surface, frame and edges keep to the
+   * view already.
+   */
+  :root[data-w-page-table] .w-list-page:not(.w-list-page-table) {
+    @variant sm {
+      & :where(.w-list-page-content > :not(.w-infinite-list-header, .w-list-page-end), .w-infinite-list-header > :not(.w-infinite-list-header-edge)) {
+        position: sticky;
+        left: var(--w-left-inner);
+        max-width: var(--w-width-inner);
+      }
+    }
+  }
+
   /* What a page sets in the list's header, such as its title, keeps the page inset there. */
   .w-list-page .w-list-header {
     @variant sm-not {
@@ -1079,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);
   }