eco-vue-js 0.26.30 → 0.26.31

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":"AA2OA;AA6rBA,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;AAazC,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;WAi/BO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QA7+BpD,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;;;;;;;;;;KAk5B4D,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;;QAv2BT,6EAA6E;iBACpE,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;;;YAxBpF,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;;EAg3BrD,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"}
+{"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/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.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.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.30",
+  "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,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);
   }