eco-vue-js 0.27.4 → 0.28.1

package/dist/components/ActionsBar/WActionsBar.vue_vue_type_script_setup_true_lang.js

@@ -38,7 +38,7 @@ var WActionsBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				ref: "bar",
-				class: normalizeClass(["w-actions-bar sm-not:[--actions-bar-filter-width:calc(100vw-var(--w-actions-bar-width))] fixed right-(--w-right-margin,0px) top-0 grid grid-cols-[var(--actions-bar-filter-width-current,0)_var(--w-actions-bar-width)] grid-rows-[var(--header-height)_1fr] justify-end overflow-hidden transition-[grid-template-columns] duration-300 print:hidden", { "[--actions-bar-filter-width-current:var(--actions-bar-filter-width)]": isOpen.value && hasFilter.value }]),
+				class: normalizeClass(["w-actions-bar sm-not:[--actions-bar-filter-width:calc(100vw-var(--w-actions-bar-width))] fixed right-(--w-right-margin,0px) top-0 grid grid-cols-[var(--actions-bar-filter-width-current,0)_var(--w-actions-bar-width)] grid-rows-[var(--header-height)_1fr] justify-end overflow-hidden motion-safe:transition-[grid-template-columns] motion-safe:duration-300 print:hidden", { "[--actions-bar-filter-width-current:var(--actions-bar-filter-width)]": isOpen.value && hasFilter.value }]),
 				style: normalizeStyle({ zIndex: unref(40) })
 			}, [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, toDisplayString(__props.textFilter ?? "Filters"), 1), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(filter), (slot, index) => {
 				return openBlock(), createBlock(resolveDynamicComponent(slot), { key: index });
@@ -48,7 +48,7 @@ var WActionsBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				"aria-expanded": isOpen.value,
 				"aria-label": "Toggle filters",
 				onClick: toggle
-			}, [createVNode(unref(IconBack_default), { class: normalizeClass(["text-description square-4 transition-transform", { "transform-[rotateY(180deg)]": isOpen.value }]) }, null, 8, ["class"])], 8, _hoisted_5)) : createCommentVNode("", true), createElementVNode("div", _hoisted_6, [createElementVNode("div", null, [
+			}, [createVNode(unref(IconBack_default), { class: normalizeClass(["text-description square-4 motion-safe:transition-transform", { "transform-[rotateY(180deg)]": isOpen.value }]) }, null, 8, ["class"])], 8, _hoisted_5)) : createCommentVNode("", true), createElementVNode("div", _hoisted_6, [createElementVNode("div", null, [
 				renderSlot(_ctx.$slots, "top"),
 				_ctx.$slots.top && (hasFilter.value || _ctx.$slots.bottom) ? (openBlock(), createElementBlock("div", _hoisted_7)) : createCommentVNode("", true),
 				hasFilter.value ? (openBlock(), createBlock(WButtonAction_default, {

package/dist/components/Button/WButtonAction.vue_vue_type_script_setup_true_lang.js

@@ -82,10 +82,10 @@ var WButtonAction_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 						}, null, 8, ["count"])), [[vShow, __props.count > 0]]) : createCommentVNode("", true),
 						renderSlot(_ctx.$slots, "icon", {}, () => [__props.icon ? (openBlock(), createBlock(resolveDynamicComponent(__props.icon), {
 							key: 0,
-							class: normalizeClass(["square-6 w-svg-stroke-width-sm place-self-center transition-transform", { "group-hover:scale-120": !__props.disabled }])
+							class: normalizeClass(["square-6 w-svg-stroke-width-sm place-self-center motion-safe:transition-transform", { "group-hover:scale-120": !__props.disabled }])
 						}, null, 8, ["class"])) : createCommentVNode("", true)]),
 						!__props.disabled && !unref(isBackdrop) && !__props.loading ? (openBlock(), createBlock(WShine_default, { key: 1 })) : createCommentVNode("", true),
-						__props.loading ? (openBlock(), createElementBlock("div", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("div", { class: "absolute inset-0 bg-linear-90 from-current/0 to-current/0 via-current animate-ticker" }, null, -1)])])) : createCommentVNode("", true)
+						__props.loading ? (openBlock(), createElementBlock("div", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("div", { class: "absolute inset-0 bg-linear-90 from-current/0 to-current/0 via-current motion-safe:animate-ticker" }, null, -1)])])) : createCommentVNode("", true)
 					], 2)),
 					__props.titleText ? (openBlock(), createElementBlock("div", {
 						key: 2,

package/dist/components/Button/WButtonDropdown.vue_vue_type_script_setup_true_lang.js

@@ -62,7 +62,7 @@ var WButtonDropdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					join: "",
 					onClick: toggle
 				}, {
-					default: withCtx(() => [createVNode(unref(IconArrow_default), { class: normalizeClass(["square-4 transition-transform", { "rotate-180": isOpen.value }]) }, null, 8, ["class"])]),
+					default: withCtx(() => [createVNode(unref(IconArrow_default), { class: normalizeClass(["square-4 motion-safe:transition-transform", { "rotate-180": isOpen.value }]) }, null, 8, ["class"])]),
 					_: 1
 				}, 8, ["semantic-type", "disabled"])) : createCommentVNode("", true),
 				(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.$slots.button?.(), (item, index) => {
@@ -79,7 +79,7 @@ var WButtonDropdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					join: "",
 					onClick: toggle
 				}, {
-					default: withCtx(() => [createVNode(unref(IconArrow_default), { class: normalizeClass(["square-[1em] transition-transform", { "rotate-180": isOpen.value }]) }, null, 8, ["class"])]),
+					default: withCtx(() => [createVNode(unref(IconArrow_default), { class: normalizeClass(["square-[1em] motion-safe:transition-transform", { "rotate-180": isOpen.value }]) }, null, 8, ["class"])]),
 					_: 1
 				}, 8, ["semantic-type", "disabled"])) : createCommentVNode("", true)
 			]), __props.tooltipText ? (openBlock(), createBlock(WTooltip_default, {

package/dist/components/Button/WButtonTab.vue_vue_type_script_setup_true_lang.js

@@ -52,7 +52,7 @@ var WButtonTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				}],
 				onClick: _cache[0] || (_cache[0] = ($event) => !__props.disabled && _ctx.$emit("click", $event))
 			}), {
-				default: withCtx(() => [__props.indicator ? (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", { class: normalizeClass(["text-surface rounded-full bg-inherit p-1 outline transition-[outline-width] duration-500", {
+				default: withCtx(() => [__props.indicator ? (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", { class: normalizeClass(["text-surface rounded-full bg-inherit p-1 outline motion-safe:transition-[outline-width] motion-safe:duration-500", {
 					"tone-negative bg-tone-fill outline-tone/10": __props.hasError,
 					"tone-positive bg-tone-fill outline-tone/10": !__props.hasError && __props.hasValue && __props.showHasValue,
 					"bg-track-strong outline-track-strong/10": !__props.hasError && (!__props.showHasValue || !__props.hasValue),
@@ -124,8 +124,8 @@ var WButtonTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 						_: 1
 					}),
 					createVNode(Transition, {
-						"enter-active-class": "transition-[scale,opacity] origin-center duration-300",
-						"leave-active-class": "transition-[scale,opacity] origin-center duration-300",
+						"enter-active-class": "motion-safe:transition-[scale,opacity] origin-center motion-safe:duration-300",
+						"leave-active-class": "motion-safe:transition-[scale,opacity] origin-center motion-safe:duration-300",
 						"enter-from-class": "scale-x-0 opacity-0",
 						"leave-to-class": "scale-x-0 opacity-0",
 						css: !__props.indicator

package/dist/components/Chart/WChartLine.vue_vue_type_script_setup_true_lang.js

@@ -240,12 +240,12 @@ var WChartLine_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 							d: minMaxAreaPath.value,
 							fill: "white",
 							"fill-opacity": "0.2",
-							class: "transition-[d]"
+							class: "motion-safe:transition-[d]"
 						}, null, 8, _hoisted_5)) : createCommentVNode("", true)], 64)) : __props.hasArea && areaPath.value ? (openBlock(), createElementBlock("path", {
 							key: 1,
 							d: areaPath.value,
 							fill: `url(#${unref(gradientAreaId)})`,
-							class: "transition-[d]"
+							class: "motion-safe:transition-[d]"
 						}, null, 8, _hoisted_6)) : createCommentVNode("", true),
 						linePath.value ? (openBlock(), createElementBlock("path", {
 							key: 2,
@@ -256,7 +256,7 @@ var WChartLine_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 							stroke: "white",
 							"stroke-linejoin": "round",
 							"stroke-linecap": "round",
-							class: "transition-[d]"
+							class: "motion-safe:transition-[d]"
 						}, null, 8, _hoisted_7)) : createCommentVNode("", true),
 						_ctx.$slots.tooltip && hoveredData.value && tooltipRef.value?.isOpen ? (openBlock(), createElementBlock("g", _hoisted_8, [createElementVNode("circle", {
 							cx: hoveredData.value.x,

package/dist/components/Checkbox/WCheckbox.vue_vue_type_script_setup_true_lang.js

@@ -89,8 +89,8 @@ var WCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				onKeypress: withKeys(withModifiers(toggle, ["stop", "prevent"]), ["enter"])
 			}, [
 				createVNode(Transition, {
-					"enter-active-class": "transition-[scale,opacity]",
-					"leave-active-class": "transition-[scale,opacity]",
+					"enter-active-class": "motion-safe:transition-[scale,opacity]",
+					"leave-active-class": "motion-safe:transition-[scale,opacity]",
 					"enter-from-class": __props.radio ? "opacity-0 scale-25!" : "opacity-0 scale-50!",
 					"leave-to-class": __props.radio ? "opacity-0 scale-25!" : "opacity-0 scale-50!",
 					css: !__props.lessTransitions
@@ -102,7 +102,7 @@ var WCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 						"rounded-[calc(0.25rem+1px)]": !__props.radio && !(__props.intermediate && __props.modelValue === null),
 						"tone-primary bg-tone-fill [.w-hover-checked:hover_&]:block!": !unref(isDisabled) && !unref(isSkeleton),
 						"bg-track": unref(isDisabled) || unref(isSkeleton),
-						"transition-[scale,opacity]": !__props.lessTransitions
+						"motion-safe:transition-[scale,opacity]": !__props.lessTransitions
 					}]) }, null, 2), [[vShow, __props.modelValue !== false && !__props.loading]])]),
 					_: 1
 				}, 8, [

package/dist/components/Counter/WCounter.vue_vue_type_script_setup_true_lang.js

@@ -25,7 +25,7 @@ var WCounter_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			}
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(["flex min-w-[1.25em] items-center justify-center rounded-full px-[0.375em] font-medium leading-tight", [{ "animate-shake": isShake.value }, unref(semanticTypeBgMap)[__props.semanticType]]]) }, toDisplayString(unref(numberCompactFormatter).format(__props.count)), 3);
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["flex min-w-[1.25em] items-center justify-center rounded-full px-[0.375em] font-medium leading-tight", [{ "motion-safe:animate-shake": isShake.value }, unref(semanticTypeBgMap)[__props.semanticType]]]) }, toDisplayString(unref(numberCompactFormatter).format(__props.count)), 3);
 		};
 	}
 });

package/dist/components/DatePicker/WDatePicker.vue_vue_type_script_setup_true_lang.js

@@ -121,8 +121,8 @@ var WDatePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				"onClick:previous",
 				"onClick:next"
 			])]), createElementVNode("div", _hoisted_3, [createVNode(Transition, {
-				"enter-active-class": "transition-transform duration-250 w-full",
-				"leave-active-class": "transition-transform duration-250 w-full absolute top-0",
+				"enter-active-class": "motion-safe:transition-transform motion-safe:duration-250 w-full",
+				"leave-active-class": "motion-safe:transition-transform motion-safe:duration-250 w-full absolute top-0",
 				"enter-from-class": "translate-x-[calc(100%*var(--direction-factor))]",
 				"leave-to-class": "translate-x-[calc(100%*var(--direction-factor)*-1)]"
 			}, {

package/dist/components/DatePicker/WDatePickerSingle.vue_vue_type_script_setup_true_lang.js

@@ -75,8 +75,8 @@ var WDatePickerSingle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 				"onClick:previous",
 				"onClick:next"
 			])]), createElementVNode("div", _hoisted_2, [createVNode(Transition, {
-				"enter-active-class": "transition-transform duration-250 w-full",
-				"leave-active-class": "transition-transform duration-250 w-full absolute top-0",
+				"enter-active-class": "motion-safe:transition-transform motion-safe:duration-250 w-full",
+				"leave-active-class": "motion-safe:transition-transform motion-safe:duration-250 w-full absolute top-0",
 				"enter-from-class": "translate-x-[calc(100%*var(--direction-factor))]",
 				"leave-to-class": "translate-x-[calc(100%*var(--direction-factor)*-1)]"
 			}, {

package/dist/components/DatePicker/components/CalendarToggle.vue_vue_type_script_setup_true_lang.js

@@ -19,8 +19,8 @@ var CalendarToggle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 					onClick: _cache[0] || (_cache[0] = ($event) => !__props.disabledPrevious && _ctx.$emit("click:previous"))
 				}, [createVNode(unref(IconArrow_default), { class: "-ml-1 rotate-90" })], 2),
 				createElementVNode("div", _hoisted_2, [createVNode(Transition, {
-					"enter-active-class": "transition-transform duration-250 w-full",
-					"leave-active-class": "transition-transform duration-250 w-full absolute top-0",
+					"enter-active-class": "motion-safe:transition-transform motion-safe:duration-250 w-full",
+					"leave-active-class": "motion-safe:transition-transform motion-safe:duration-250 w-full absolute top-0",
 					"enter-from-class": "translate-x-[calc(100%*var(--direction-factor))]",
 					"leave-to-class": "translate-x-[calc(100%*var(--direction-factor)*-1)]"
 				}, {

package/dist/components/Dismissable/WDismissable.vue_vue_type_script_setup_true_lang.js

@@ -4,7 +4,7 @@ import { Transition, createBlock, createCommentVNode, createElementBlock, create
 var _hoisted_1 = {
 	key: 0,
 	ref: "container",
-	class: "no-scrollbar snap-y snap-mandatory snap-always overflow-scroll overflow-y-auto overscroll-contain scroll-smooth"
+	class: "no-scrollbar snap-y snap-mandatory snap-always overflow-scroll overflow-y-auto overscroll-contain motion-safe:scroll-smooth"
 };
 var WDismissable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "WDismissable",

package/dist/components/Expansion/WExpansion.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import { KeepAlive, Transition, createBlock, createCommentVNode, createElementBl
 // src/components/Expansion/WExpansion.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
-	class: "duration-(--expansion-duration,200ms)"
+	class: "motion-safe:duration-(--expansion-duration,200ms)"
 };
 var _hoisted_2 = { class: "grid grid-cols-1 [overflow:inherit]" };
 var WExpansion_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -21,10 +21,10 @@ var WExpansion_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 	setup(__props) {
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(Transition, {
-				"enter-active-class": "transition-[grid-template-rows] overflow-y-hidden grid",
+				"enter-active-class": "motion-safe:transition-[grid-template-rows] overflow-y-hidden grid",
 				"enter-from-class": "grid-rows-[0fr]",
 				"enter-to-class": "grid-rows-[1fr]",
-				"leave-active-class": "transition-[grid-template-rows] overflow-y-hidden grid",
+				"leave-active-class": "motion-safe:transition-[grid-template-rows] overflow-y-hidden grid",
 				"leave-from-class": "grid-rows-[1fr]",
 				"leave-to-class": "grid-rows-[0fr]",
 				onBeforeEnter: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:visible", true)),

package/dist/components/Expansion/WExpansionItem.vue_vue_type_script_setup_true_lang.js

@@ -51,7 +51,7 @@ var WExpansionItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 						default: withCtx(() => [__props.hasFlag ? (openBlock(), createElementBlock("div", _hoisted_1)) : createCommentVNode("", true)]),
 						_: 1
 					})], 2)
-				]), createElementVNode("div", _hoisted_2, [createVNode(unref(IconArrow_default), { class: normalizeClass(["text-accent square-[1.25em] transition-transform", { "rotate-180": __props.isOpen }]) }, null, 8, ["class"])])]),
+				]), createElementVNode("div", _hoisted_2, [createVNode(unref(IconArrow_default), { class: normalizeClass(["text-accent square-[1.25em] motion-safe:transition-transform", { "rotate-180": __props.isOpen }]) }, null, 8, ["class"])])]),
 				_: 1
 			}, 40, ["aria-expanded", "class"])), createVNode(WExpansion_default, {
 				"is-open": __props.isOpen,

package/dist/components/FilePicker/components/FilePickerSvg.vue_vue_type_script_setup_true_lang.js

@@ -10,7 +10,7 @@ var FilePickerSvg_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				stroke: "currentColor",
 				"stroke-linecap": "round",
 				"stroke-dasharray": "4px 8px",
-				"rect-class": __props.animate ? "animate-border-march" : void 0
+				"rect-class": __props.animate ? "motion-safe:animate-border-march" : void 0
 			}, null, 8, ["rect-class"]);
 		};
 	}

package/dist/components/InfiniteList/components/InfiniteListPage.vue_vue_type_script_setup_true_lang.js

@@ -303,7 +303,7 @@ var InfiniteListPage_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(slotList.value, (slot, slotIndex) => {
 					return openBlock(), createElementBlock("div", {
 						key: slot.key,
-						class: "grid w-full transition-[grid-template-rows] duration-300"
+						class: "grid w-full motion-safe:transition-[grid-template-rows] motion-safe:duration-300"
 					}, [createElementVNode("div", _hoisted_4, [createVNode(InfiniteListPageItem_default, {
 						ref_for: true,
 						ref: (item) => setItemRef(slot.key, item)

package/dist/components/Input/WInput.vue_vue_type_script_setup_true_lang.js

@@ -714,7 +714,7 @@ var WInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 							default: withCtx(() => [unref(asyncState).timeout.value ? (openBlock(), createElementBlock("div", _hoisted_8)) : createCommentVNode("", true)]),
 							_: 1
 						}), createVNode(Transition, {
-							"enter-active-class": "transition-[width] ease-linear rounded-sm duration-(--debounce-duration)",
+							"enter-active-class": "motion-safe:transition-[width] ease-linear rounded-sm motion-safe:duration-(--debounce-duration)",
 							"enter-from-class": "w-0",
 							"enter-to-class": "w-full",
 							"leave-active-class": "hidden"

package/dist/components/Input/WInputSuggest.vue_vue_type_script_setup_true_lang.js

@@ -243,7 +243,7 @@ var WInputSuggest_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 							disabled: unref(isDisabled),
 							onClick: ($event) => isOpen.value ? toggleScope.unclickable === false ? close() : blur() : focus()
 						}, {
-							default: withCtx(() => [createVNode(unref(IconArrow_default), { class: normalizeClass(["square-3 text-description transition-transform", { "rotate-180": isOpen.value }]) }, null, 8, ["class"])]),
+							default: withCtx(() => [createVNode(unref(IconArrow_default), { class: normalizeClass(["square-3 text-description motion-safe:transition-transform", { "rotate-180": isOpen.value }]) }, null, 8, ["class"])]),
 							_: 1
 						}, 8, [
 							"expanded",

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

@@ -62,7 +62,7 @@ var WListHeaderItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 						"enter-from-class": "opacity-0",
 						"leave-to-class": "opacity-0"
 					}, {
-						default: withCtx(() => [index.value !== -1 ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(IconBack_default), { class: normalizeClass(["square-3 transition-transform", {
+						default: withCtx(() => [index.value !== -1 ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(IconBack_default), { class: normalizeClass(["square-3 motion-safe:transition-transform", {
 							"rotate-90": __props.ordering[index.value]?.order === "ASC",
 							"-rotate-90": __props.ordering[index.value]?.order === "DESC"
 						}]) }, null, 8, ["class"]), __props.ordering.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(index.value + 1), 1)) : createCommentVNode("", true)])) : createCommentVNode("", true)]),

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

@@ -45,7 +45,7 @@ var HeaderSortItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 				}, {
 					default: withCtx(() => [index.value !== -1 ? (openBlock(), createBlock(unref(IconBack_default), {
 						key: 0,
-						class: normalizeClass(["square-4 transition-transform", {
+						class: normalizeClass(["square-4 motion-safe:transition-transform", {
 							"rotate-90": __props.ordering[index.value]?.order === "ASC",
 							"-rotate-90": __props.ordering[index.value]?.order === "DESC"
 						}])

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

@@ -61,7 +61,7 @@ var ListFilterChip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 				badge.value ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(badge.value), 1)) : createCommentVNode("", true),
 				!hasValue.value ? (openBlock(), createBlock(unref(IconArrow_default), {
 					key: 3,
-					class: normalizeClass(["square-[1em] text-description shrink-0 transition-transform", { "rotate-180": __props.isOpen }])
+					class: normalizeClass(["square-[1em] text-description shrink-0 motion-safe:transition-transform", { "rotate-180": __props.isOpen }])
 				}, null, 8, ["class"])) : createCommentVNode("", true)
 			], 10, _hoisted_1), isRemovable.value ? (openBlock(), createElementBlock("button", {
 				key: 0,

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

@@ -130,7 +130,7 @@ var ListItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 				}, [
 					__props.mobile ? (openBlock(), createElementBlock("div", {
 						key: 0,
-						class: normalizeClass(["tone-primary bg-tone-fill @sm:hidden pointer-events-none absolute left-0 top-0 h-full w-2 transition-[translate,opacity] duration-200", { "-translate-x-2 opacity-0": !__props.selected }])
+						class: normalizeClass(["tone-primary bg-tone-fill @sm:hidden pointer-events-none absolute left-0 top-0 h-full w-2 motion-safe:transition-[translate,opacity] motion-safe:duration-200", { "-translate-x-2 opacity-0": !__props.selected }])
 					}, null, 2)) : createCommentVNode("", true),
 					!__props.card ? (openBlock(), createElementBlock("div", {
 						key: 1,

package/dist/components/Modal/WModal.vue_vue_type_script_setup_true_lang.js

@@ -128,8 +128,8 @@ var WModal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 					_: 1
 				}),
 				createVNode(TransitionGroup, {
-					"enter-active-class": "transition-all duration-300",
-					"leave-active-class": "transition-all duration-300",
+					"enter-active-class": "motion-safe:transition-all motion-safe:duration-300",
+					"leave-active-class": "motion-safe:transition-all motion-safe:duration-300",
 					"enter-from-class": "translate-y-8 opacity-0",
 					"leave-to-class": "-translate-y-5 opacity-0"
 				}, {

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

@@ -56,7 +56,7 @@ var WNavBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 				}),
 				createElementVNode("nav", {
 					ref: "nav",
-					class: normalizeClass(["w-nav-bar fixed left-(--w-left-margin,0px) top-0 flex h-full flex-col overflow-hidden transition-[clip-path] duration-200 [clip-path:inset(-2rem)] print:hidden", [{ "xl-not:[clip-path:inset(-2rem_calc(100%+2rem)_-2rem_-2rem)]": !isOpen.value }, _ctx.$attrs.class]]),
+					class: normalizeClass(["w-nav-bar fixed left-(--w-left-margin,0px) top-0 flex h-full flex-col overflow-hidden motion-safe:transition-[clip-path] motion-safe:duration-200 [clip-path:inset(-2rem)] print:hidden", [{ "xl-not:[clip-path:inset(-2rem_calc(100%+2rem)_-2rem_-2rem)]": !isOpen.value }, _ctx.$attrs.class]]),
 					style: normalizeStyle({ zIndex: unref(30) })
 				}, [
 					_ctx.$slots.brand && __props.brandTo ? (openBlock(), createBlock(WRouterLink_default, {

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

@@ -79,8 +79,8 @@ var WNavItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			}, {
 				default: withCtx(() => [
 					createVNode(Transition, {
-						"enter-active-class": "transition-transform duration-200",
-						"leave-active-class": "transition-transform duration-200",
+						"enter-active-class": "motion-safe:transition-transform motion-safe:duration-200",
+						"leave-active-class": "motion-safe:transition-transform motion-safe:duration-200",
 						"enter-from-class": "-translate-x-1",
 						"leave-to-class": "-translate-x-1"
 					}, {

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

@@ -87,7 +87,7 @@ var WNavItemExpand_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 					"param-fields": __props.paramFields,
 					hovered: unref(isDropdownOpen) && !hasActive.value
 				}), createSlots({
-					right: withCtx(() => [createVNode(unref(IconArrow_default), { class: normalizeClass(["square-3 transition-transform", { "-rotate-90": !hasActive.value && !__props.even }]) }, null, 8, ["class"])]),
+					right: withCtx(() => [createVNode(unref(IconArrow_default), { class: normalizeClass(["square-3 motion-safe:transition-transform", { "-rotate-90": !hasActive.value && !__props.even }]) }, null, 8, ["class"])]),
 					_: 2
 				}, [_ctx.$slots.icon ? {
 					name: "icon",

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

@@ -5,10 +5,10 @@ var WNavItemTransition_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 	setup(__props) {
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(TransitionGroup, {
-				"enter-active-class": "transition-[grid-template-rows] overflow-hidden grid",
+				"enter-active-class": "motion-safe:transition-[grid-template-rows] overflow-hidden grid",
 				"enter-from-class": "grid-rows-[0fr]",
 				"enter-to-class": "grid-rows-[1fr]",
-				"leave-active-class": "transition-[grid-template-rows] overflow-hidden grid",
+				"leave-active-class": "motion-safe:transition-[grid-template-rows] overflow-hidden grid",
 				"leave-from-class": "grid-rows-[1fr]",
 				"leave-to-class": "grid-rows-[0fr]"
 			}, {

package/dist/components/Notify/WNotify.vue_vue_type_script_setup_true_lang.js

@@ -37,7 +37,7 @@ var WNotify_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(notifyCenterToastEntries), (item) => {
 					return openBlock(), createElementBlock("div", {
 						key: unref(getNotifyItemKey)(item),
-						class: normalizeClass(["grid transition-[translate,opacity,grid-template-rows] duration-300", isCenter.value ? "justify-center" : "justify-end"])
+						class: normalizeClass(["grid motion-safe:transition-[translate,opacity,grid-template-rows] motion-safe:duration-300", isCenter.value ? "justify-center" : "justify-end"])
 					}, [createElementVNode("div", _hoisted_1, [createVNode(NotifyCard_default, {
 						item,
 						"onClick:close": _cache[0] || (_cache[0] = (entry) => (entry.items ?? [entry]).forEach((value) => unref(hideToast)(value.id)))

package/dist/components/Notify/WNotifyCenter.vue_vue_type_script_setup_true_lang.js

@@ -80,7 +80,7 @@ var WNotifyCenter_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(notifyCenterActionEntries), (item) => {
 							return openBlock(), createElementBlock("div", {
 								key: unref(getNotifyItemKey)(item),
-								class: "grid transition-[transform,grid-template-rows] duration-300"
+								class: "grid motion-safe:transition-[transform,grid-template-rows] motion-safe:duration-300"
 							}, [createElementVNode("div", _hoisted_6, [createVNode(NotifyCard_default, {
 								item,
 								history: "",
@@ -110,7 +110,7 @@ var WNotifyCenter_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(notifyCenterActivityEntries), (item) => {
 							return openBlock(), createElementBlock("div", {
 								key: unref(getNotifyItemKey)(item),
-								class: "grid transition-[transform,grid-template-rows] duration-300"
+								class: "grid motion-safe:transition-[transform,grid-template-rows] motion-safe:duration-300"
 							}, [createElementVNode("div", _hoisted_8, [createVNode(NotifyCard_default, {
 								item,
 								history: "",

package/dist/components/Progress/WProgress.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,7 @@ var WProgress_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 	setup(__props) {
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", {
-				class: "tone-primary bg-tone-fill h-full transition-[width]",
+				class: "tone-primary bg-tone-fill h-full motion-safe:transition-[width]",
 				style: normalizeStyle({ width: __props.modelValue + "%" })
 			}, null, 4)]);
 		};

package/dist/components/Progress/WProgressBar.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,7 @@ import { Fragment, computed, createCommentVNode, createElementBlock, createEleme
 var _hoisted_1 = ["aria-valuenow", "aria-busy"];
 var _hoisted_2 = {
 	key: 0,
-	class: "animate-ticker absolute inset-0 bg-linear-to-r from-transparent via-white/30 to-transparent [--tiker-duration:1.6s]"
+	class: "motion-safe:animate-ticker absolute inset-0 bg-linear-to-r from-transparent via-white/30 to-transparent [--tiker-duration:1.6s]"
 };
 var _hoisted_3 = { class: "text-accent relative flex h-full items-center justify-center" };
 var _hoisted_4 = { class: "text-description relative flex h-full items-center justify-center gap-2 font-medium" };
@@ -30,16 +30,16 @@ var WProgressBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 				"aria-busy": __props.modelValue === null || __props.modelValue < 1
 			}, [__props.modelValue !== null ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
 				createElementVNode("div", {
-					class: normalizeClass(["absolute inset-y-0 left-0 overflow-hidden rounded-xl transition-[width] duration-500 ease-out", unref(progressBarClass)[__props.semanticType]]),
+					class: normalizeClass(["absolute inset-y-0 left-0 overflow-hidden rounded-xl motion-safe:transition-[width] motion-safe:duration-500 ease-out", unref(progressBarClass)[__props.semanticType]]),
 					style: normalizeStyle({ width: percent.value })
 				}, [__props.modelValue < 1 ? (openBlock(), createElementBlock("div", _hoisted_2)) : createCommentVNode("", true)], 6),
 				createElementVNode("div", _hoisted_3, toDisplayString(percent.value), 1),
 				createElementVNode("div", {
 					"aria-hidden": "true",
-					class: normalizeClass(["absolute inset-0 flex items-center justify-center transition-[clip-path] duration-500 ease-out", unref(progressBarTextClass)[__props.semanticType]]),
+					class: normalizeClass(["absolute inset-0 flex items-center justify-center motion-safe:transition-[clip-path] motion-safe:duration-500 ease-out", unref(progressBarTextClass)[__props.semanticType]]),
 					style: normalizeStyle({ clipPath: `inset(0 calc(100% - ${percent.value}) 0 0)` })
 				}, toDisplayString(percent.value), 7)
-			], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", { class: normalizeClass(["animate-ticker absolute inset-0 bg-linear-to-r from-transparent to-transparent [--tiker-duration:1.4s]", unref(progressBarIndeterminateClass)[__props.semanticType]]) }, null, 2), createElementVNode("div", _hoisted_4, [createVNode(WSpinner_default, { class: "square-4" }), _cache[0] || (_cache[0] = createElementVNode("span", null, "In progress", -1))])], 64))], 8, _hoisted_1);
+			], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", { class: normalizeClass(["motion-safe:animate-ticker absolute inset-0 bg-linear-to-r from-transparent to-transparent [--tiker-duration:1.4s]", unref(progressBarIndeterminateClass)[__props.semanticType]]) }, null, 2), createElementVNode("div", _hoisted_4, [createVNode(WSpinner_default, { class: "square-4" }), _cache[0] || (_cache[0] = createElementVNode("span", null, "In progress", -1))])], 64))], 8, _hoisted_1);
 		};
 	}
 });

package/dist/components/Progress/WProgressStriped.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import { createElementBlock, createElementVNode, defineComponent, normalizeClass
 var _hoisted_1 = ["aria-valuenow", "aria-busy"];
 var _hoisted_2 = {
 	key: 0,
-	class: "animate-ticker tone-primary via-tone/60 absolute inset-0 bg-linear-to-r from-transparent to-transparent [--tiker-duration:1.4s]"
+	class: "motion-safe:animate-ticker tone-primary via-tone/60 absolute inset-0 bg-linear-to-r from-transparent to-transparent [--tiker-duration:1.4s]"
 };
 var WProgressStriped_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "WProgressStriped",
@@ -19,9 +19,9 @@ var WProgressStriped_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				"aria-busy": __props.modelValue < 100
 			}, [__props.modelValue <= 0 ? (openBlock(), createElementBlock("div", _hoisted_2)) : (openBlock(), createElementBlock("div", {
 				key: 1,
-				class: "from-primary-dark to-primary relative h-full overflow-hidden rounded-full bg-linear-to-r transition-[width] duration-500 ease-out",
+				class: "from-primary-dark to-primary relative h-full overflow-hidden rounded-full bg-linear-to-r motion-safe:transition-[width] motion-safe:duration-500 ease-out",
 				style: normalizeStyle({ width: Math.min(__props.modelValue, 100) + "%" })
-			}, [createElementVNode("div", { class: normalizeClass(["absolute inset-0", __props.modelValue < 100 ? "animate-ticker bg-linear-to-r from-transparent via-white/40 to-transparent [--tiker-duration:1.6s]" : "bg-default/30 animate-pulse"]) }, null, 2)], 4))], 10, _hoisted_1);
+			}, [createElementVNode("div", { class: normalizeClass(["absolute inset-0", __props.modelValue < 100 ? "motion-safe:animate-ticker bg-linear-to-r from-transparent via-white/40 to-transparent [--tiker-duration:1.6s]" : "bg-default/30 motion-safe:animate-pulse"]) }, null, 2)], 4))], 10, _hoisted_1);
 		};
 	}
 });

package/dist/components/Skeleton/WSkeleton.vue_vue_type_script_setup_true_lang.js

@@ -15,7 +15,7 @@ var WSkeleton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
-				class: "tone-primary bg-tone-soft w-skeleton w-skeleton-opacity-50 dark:w-skeleton-opacity-5 before:animate-ticker w-option-has-bg",
+				class: "tone-primary bg-tone-soft w-skeleton w-skeleton-opacity-50 dark:w-skeleton-opacity-5 motion-safe:before:animate-ticker w-option-has-bg",
 				style: normalizeStyle({ "--skeleton-width-internal": skeletonWidth.value + "%" })
 			}, [renderSlot(_ctx.$slots, "default")], 4);
 		};

package/dist/components/Slider/WSlider.vue_vue_type_script_setup_true_lang.js

@@ -102,7 +102,7 @@ var WSlider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 					"bg-track-strong": __props.disabled
 				}]),
 				style: normalizeStyle({ width: `${rangeScale(cursor.value ?? __props.modelValue) * 100}%` })
-			}, [createElementVNode("div", { class: normalizeClass(["square-4 relative right-0 -mr-2 rounded-full bg-inherit transition-transform", {
+			}, [createElementVNode("div", { class: normalizeClass(["square-4 relative right-0 -mr-2 rounded-full bg-inherit motion-safe:transition-transform", {
 				"scale-180": isMoveStarted.value,
 				"hover:scale-200": !__props.readonly && !isMoveStarted.value
 			}]) }, null, 2)], 6)], 512), createVNode(Transition, {

package/dist/components/Slider/WSliderRange.vue_vue_type_script_setup_true_lang.js

@@ -124,11 +124,11 @@ var WSliderRange_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 				})
 			}, [
 				!__props.disabled ? (openBlock(), createElementBlock("div", _hoisted_3)) : createCommentVNode("", true),
-				createElementVNode("div", { class: normalizeClass(["square-4 absolute left-0 -ml-2 rounded-full bg-(--w-slider-from,var(--color-primary)) transition-transform", {
+				createElementVNode("div", { class: normalizeClass(["square-4 absolute left-0 -ml-2 rounded-full bg-(--w-slider-from,var(--color-primary)) motion-safe:transition-transform", {
 					"scale-180": isCursorFrom.value === true,
 					"hover:scale-200": !__props.readonly && isCursorFrom.value === null
 				}]) }, null, 2),
-				createElementVNode("div", { class: normalizeClass(["square-4 absolute right-0 -mr-2 rounded-full bg-(--w-slider-to,var(--color-primary)) transition-transform", {
+				createElementVNode("div", { class: normalizeClass(["square-4 absolute right-0 -mr-2 rounded-full bg-(--w-slider-to,var(--color-primary)) motion-safe:transition-transform", {
 					"scale-180": isCursorFrom.value === false,
 					"hover:scale-200": !__props.readonly && isCursorFrom.value === null
 				}]) }, null, 2)

package/dist/components/Spinner/WSpinner.vue.js

@@ -6,7 +6,7 @@ var _hoisted_1 = {
 	width: "20",
 	height: "20",
 	viewBox: "0 0 24 24",
-	class: "animate-spin"
+	class: "motion-safe:animate-spin"
 };
 function _sfc_render(_ctx, _cache) {
 	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("circle", {

package/dist/components/Tabs/WTabs.vue_vue_type_script_setup_true_lang.js

@@ -484,7 +484,7 @@ var WTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 						]);
 					}), 128)) : defaultSlots.value.some((slot) => slot.children?.default) ? (openBlock(), createElementBlock("div", {
 						key: 1,
-						class: normalizeClass(["relative h-full transition-[min-height] duration-300", {
+						class: normalizeClass(["relative h-full motion-safe:transition-[min-height] motion-safe:duration-300", {
 							"[overflow-anchor:none]": isSwitching.value,
 							"surface-section-joined": !__props.side && __props.section && !joined,
 							"sm-not:snap-start sm-not:px-(--w-frame-padding,var(--inner-margin))": __props.side
@@ -494,8 +494,8 @@ var WTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 							"--direction-factor": isDirect.value ? "1" : "-1"
 						})
 					}, [createVNode(TransitionGroup, {
-						"enter-active-class": "transition-[translate,opacity] duration-250 w-full [overflow-anchor:none]",
-						"leave-active-class": "transition-[translate,opacity] duration-250 w-full absolute top-0 [overflow-anchor:none]",
+						"enter-active-class": "motion-safe:transition-[translate,opacity] motion-safe:duration-250 w-full [overflow-anchor:none]",
+						"leave-active-class": "motion-safe:transition-[translate,opacity] motion-safe:duration-250 w-full absolute top-0 [overflow-anchor:none]",
 						"enter-from-class": __props.lessTransitions || __props.side || unref(hasScrollbar) ? "opacity-0" : "opacity-0 translate-x-[calc((100%+var(--inner-margin))*var(--direction-factor))]",
 						"leave-to-class": __props.lessTransitions || __props.side || unref(hasScrollbar) ? "opacity-0 absolute" : "opacity-0 translate-x-[calc((100%+var(--inner-margin))*var(--direction-factor)*-1)]",
 						onAfterEnter: _cache[1] || (_cache[1] = ($event) => isSwitching.value = false),

package/dist/components/TextOverflow/WTextOverflow.vue_vue_type_script_setup_true_lang.js

@@ -29,7 +29,7 @@ var WTextOverflow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				onMouseenter: updateOverflow
 			}, [createElementVNode("span", _hoisted_1, [renderSlot(_ctx.$slots, "default")]), createElementVNode("div", {
 				ref: "element",
-				class: normalizeClass(["absolute inset-y-0 left-0", { "delay-300 group-hover/overflow:translate-x-(--text-overflow,0px) group-hover/overflow:transition-transform group-hover/overflow:duration-(--text-overflow-duration,150ms) group-hover/overflow:ease-linear": overflow.value }]),
+				class: normalizeClass(["absolute inset-y-0 left-0", { "delay-300 group-hover/overflow:translate-x-(--text-overflow,0px) motion-safe:group-hover/overflow:transition-transform motion-safe:group-hover/overflow:duration-(--text-overflow-duration,150ms) group-hover/overflow:ease-linear": overflow.value }]),
 				style: normalizeStyle(overflow.value ? {
 					"--text-overflow": `-${overflow.value}px`,
 					"--text-overflow-duration": `${overflow.value * 30}ms`

package/dist/components/Toggle/WToggle.vue_vue_type_script_setup_true_lang.js

@@ -111,7 +111,7 @@ var WToggle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			}, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])], 2)) : createCommentVNode("", true), createElementVNode("div", _hoisted_2, [createElementVNode("div", { class: normalizeClass(["width-[calc(var(--w-input-height)+0.5rem)] p-0.75 h-full rounded-full bg-size-[200%_auto] bg-right", {
 				"bg-track": !value.value || __props.loading,
 				[unref(semanticTypeBackgroundMap)[unref(SemanticType).PRIMARY]]: value.value && !__props.loading
-			}]) }, [createElementVNode("div", _hoisted_3, [createElementVNode("div", { class: normalizeClass(["tone-primary text-tone scheme-light absolute z-10 flex aspect-square h-full items-center justify-center rounded-full bg-(--w-toggle-caret,#ffffff) shadow-md transition-[right]", {
+			}]) }, [createElementVNode("div", _hoisted_3, [createElementVNode("div", { class: normalizeClass(["tone-primary text-tone scheme-light absolute z-10 flex aspect-square h-full items-center justify-center rounded-full bg-(--w-toggle-caret,#ffffff) shadow-md motion-safe:transition-[right]", {
 				"right-[calc(100%-(var(--w-input-height)-0.75rem))]": value.value === false,
 				"right-[calc(50%-(var(--w-input-height)-0.75rem)/2)]": value.value === null,
 				"right-0": value.value === true,

package/docs/guide/app-shell.md

@@ -70,6 +70,36 @@ Frame variables are sizes too: `pt---header-height`, `pl---nav-bar-width`, `px--
 
 On a page (`w-page`) and in modals, content beside a wide list stays in view automatically while it scrolls sideways (see [List page](../recipes/list-page.md#content-beside-the-list)). Pages don't use these sizes for positioning — they're for what the kit doesn't place, like a fixed overlay.
 
+### The page box
+
+The content box is where text starts. The page box is where sections and cards sit: the content box less the gutter a card or glass layout's sections reach into. In flat they're the same. Place anything that should line up with the sections, such as a side panel over the page or a toolbar of your own, by the page box:
+
+| Variable | Utility size | Value |
+| --- | --- | --- |
+| `--w-page-top` | `---page-top` | Under the header bar, and its gap where the bars float. |
+| `--w-page-bottom` | `---page-bottom` | The gap off the screen's bottom edge where the bars float, `0` docked. |
+| `--w-page-left` | `---page-left` | The sections' left edge; `0` on phones, where they span the screen. |
+| `--w-page-right` | `---page-right` | The same on the right. |
+| `--w-page-width` | `---page-width` | Between the two. |
+| `--w-page-height` | `---page-height` | Between the top and the bottom. |
+
+```vue
+<aside class="fixed top---page-top bottom---page-bottom right---page-right w-96 rounded-lg">
+```
+
+These and the content box are the layout variables to build on. The ones they're made of — the frame margins, `--w-chrome-gap`, `--w-page-bleed`, the bar widths — are theme tokens and may change with the layout.
+
+### Backdrops
+
+A backdrop of the app's own, such as behind a side panel, takes `w-page-backdrop`: it covers the page and the bars and leaves the header bar's row out, so the header stays sharp and its search and menus stay usable. Put it above the nav (`z-index` over 30) and the panel above it:
+
+```vue
+<button class="w-page-backdrop fixed inset-0 z-38 backdrop-blur-sm" @click="close" />
+<aside class="fixed top---page-top bottom---page-bottom right---page-right z-39 w-96">
+```
+
+The header's background is one blurred box, which grows over a stuck list toolbar when the bars are docked, so a backdrop can't go between the header and the page: it leaves the header out instead.
+
 ## Layout component
 
 The root layout mounts the three bars; its main area is `w-page`, which pads content by the frame (see [Page layout](../recipes/page-layout.md)):

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.27.4, 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.28.1, 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/