eco-vue-js 0.24.0 → 0.25.1

package/dist/components/Button/WButtonCopy.vue.d.ts

@@ -1,6 +1,8 @@
 type __VLS_Props = {
     /** Text copied to the clipboard on click. */
     value: string;
+    /** Lays the button out as a regular block instead of sizing it to one line of the surrounding text. */
+    noInline?: boolean;
 };
 declare const __VLS_export: 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 _default: typeof __VLS_export;

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

@@ -1 +1 @@
-{"version":3,"file":"WButtonCopy.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/WButtonCopy.vue"],"names":[],"mappings":"AAoBA;AA2CA,KAAK,WAAW,GAAG;IACjB,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAA;CACd,CAAC;AAyEF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"WButtonCopy.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/WButtonCopy.vue"],"names":[],"mappings":"AA0BA;AAmDA,KAAK,WAAW,GAAG;IACjB,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb,uGAAuG;IACvG,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AAyFF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -1,21 +1,26 @@
 import WTooltip_default from "../Tooltip/WTooltip.vue.js";
 import { useCopy } from "../../utils/useCopy.js";
-import { createBlock, createElementBlock, createVNode, defineComponent, normalizeClass, openBlock, resolveDynamicComponent, toRef, unref, withModifiers } from "vue";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, resolveDynamicComponent, toRef, unref, withModifiers } from "vue";
 //#region src/components/Button/WButtonCopy.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "select-none relative inline-grid items-center justify-center min-w-[1.25em]" };
+var _hoisted_2 = { class: "w-hover-circle relative" };
 var WButtonCopy_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "WButtonCopy",
-	props: { value: {} },
+	props: {
+		value: {},
+		noInline: { type: Boolean }
+	},
 	setup(__props) {
 		const { doCopy, iconCopy, copied } = useCopy(toRef(__props, "value"));
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("button", {
-				class: "text-description w-hover-circle relative inline-block cursor-pointer select-none",
+			return openBlock(), createElementBlock("span", _hoisted_1, [!__props.noInline ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode("\xA0")], 64)) : createCommentVNode("", true), createElementVNode("button", {
+				class: normalizeClass(["text-description inline-block p-2 -m-2 w-hover-circle-trigger cursor-pointer", __props.noInline ? void 0 : "absolute"]),
 				onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(doCopy)(), ["stop"]))
-			}, [(openBlock(), createBlock(resolveDynamicComponent(unref(iconCopy)), { class: normalizeClass(["square-[1.25em] mt-[-0.125em]", { "tone-primary text-tone": unref(copied) }]) }, null, 8, ["class"])), createVNode(WTooltip_default, {
+			}, [createElementVNode("div", _hoisted_2, [(openBlock(), createBlock(resolveDynamicComponent(unref(iconCopy)), { class: normalizeClass(["square-[1.25em]", { "tone-primary text-tone": unref(copied) }]) }, null, 8, ["class"]))]), createVNode(WTooltip_default, {
 				class: "pointer-events-none",
 				text: "Copy",
 				"no-touch": ""
-			})]);
+			})], 2)]);
 		};
 	}
 });

package/dist/components/Button/WButtonTab.vue.d.ts

@@ -1,3 +1,4 @@
+import { LinkProps } from '../../types/types';
 type __VLS_Props = {
     /** Marks the button as the open tab: primary text and an underline. */
     active?: boolean;
@@ -25,6 +26,8 @@ type __VLS_Props = {
     enableOverflow?: boolean;
     /** Number shown in a badge after the title, tinted while the tab is open. */
     count?: number;
+    /** Router location — renders a link that replaces the current history entry, unless `disabled`. */
+    to?: LinkProps['to'];
 };
 type __VLS_Slots = {
     /** Content of the button, replacing the title, icon, count and status icon. */

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

@@ -1 +1 @@
-{"version":3,"file":"WButtonTab.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/WButtonTab.vue"],"names":[],"mappings":"AAgJA;AAgNA,KAAK,WAAW,GAAG;IACjB,uEAAuE;IACvE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kFAAkF;IAClF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kEAAkE;IAClE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,2DAA2D;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4EAA4E;IAC5E,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,2DAA2D;IAC3D,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AASF,KAAK,WAAW,GAAG;IACjB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE;QAAC,UAAU,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAA;IACvF,uDAAuD;IACvD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE;QAAC,UAAU,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAA;CACzF,CAAC;AAgVF,QAAA,MAAM,UAAU;;;;kFAGd,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":"WButtonTab.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/WButtonTab.vue"],"names":[],"mappings":"AAiJA;AA4MA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,eAAe,CAAA;AAa5C,KAAK,WAAW,GAAG;IACjB,uEAAuE;IACvE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kFAAkF;IAClF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kEAAkE;IAClE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,2DAA2D;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4EAA4E;IAC5E,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,2DAA2D;IAC3D,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mGAAmG;IACnG,EAAE,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,CAAA;CACrB,CAAC;AASF,KAAK,WAAW,GAAG;IACjB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE;QAAC,UAAU,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAA;IACvF,uDAAuD;IACvD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE;QAAC,UAAU,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAA;CACzF,CAAC;AA0WF,QAAA,MAAM,UAAU;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -1,14 +1,14 @@
 import { numberFormatter } from "../../utils/utils.js";
+import WRouterLink_default from "../RouterLink/WRouterLink.vue.js";
 import IconCheckCircle_default from "../../assets/icons/IconCheckCircle.js";
 import IconClose_default from "../../assets/icons/IconClose.js";
 import IconNegativeInfo_default from "../../assets/icons/IconNegativeInfo.js";
 import WEmptyComponent_default from "../EmptyComponent/WEmptyComponent.vue.js";
 import WStatusIcon_default from "../Status/WStatusIcon.vue.js";
 import WTextOverflow_default from "../TextOverflow/WTextOverflow.vue.js";
-import { Suspense, Transition, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, normalizeClass, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
+import { Suspense, Transition, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
 //#region src/components/Button/WButtonTab.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["disabled"];
-var _hoisted_2 = {
+var _hoisted_1 = {
 	key: 0,
 	class: "p-8"
 };
@@ -27,107 +27,113 @@ var WButtonTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		statusIcon: { type: Boolean },
 		showHasValue: { type: Boolean },
 		enableOverflow: { type: Boolean },
-		count: {}
+		count: {},
+		to: {}
 	},
 	emits: ["click"],
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("button", {
-				disabled: __props.disabled,
-				class: normalizeClass(["w-ripple-trigger grid select-none grid-cols-[auto_1fr] font-semibold outline-none", {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.to && !__props.disabled ? WRouterLink_default : "button"), mergeProps(__props.to && !__props.disabled ? {
+				to: __props.to,
+				replace: true
+			} : { disabled: __props.disabled }, {
+				class: ["w-ripple-trigger grid select-none grid-cols-[auto_1fr] font-semibold outline-none", {
 					"tone-primary text-tone": !__props.hasError && __props.active,
 					"tone-negative text-tone": __props.hasError,
 					"tone-positive text-tone": !__props.active && !__props.hasError && __props.hasValue && __props.showHasValue,
 					"text-description": !__props.active && !__props.hasError && (!__props.showHasValue || !__props.hasValue),
 					"cursor-not-allowed opacity-50": __props.disabled,
 					"cursor-pointer": !__props.disabled
-				}]),
+				}],
 				onClick: _cache[0] || (_cache[0] = ($event) => !__props.disabled && _ctx.$emit("click", $event))
-			}, [__props.indicator ? (openBlock(), createElementBlock("div", _hoisted_2, [createElementVNode("div", { class: normalizeClass(["text-surface rounded-full bg-inherit p-1 outline transition-[outline-width] 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),
-				"outline-[1.5rem]": __props.active
-			}]) }, [__props.hasError ? (openBlock(), createBlock(unref(IconNegativeInfo_default), {
-				key: 0,
-				class: "size-8"
-			})) : __props.hasValue ? (openBlock(), createBlock(unref(IconCheckCircle_default), {
-				key: 1,
-				class: "size-8"
-			})) : (openBlock(), createBlock(unref(IconClose_default), {
-				key: 2,
-				class: "size-8"
-			}))], 2)])) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(["relative col-start-2 self-start", {
-				"mt-3.5": __props.indicator,
-				"w-ripple w-ripple-hover": !__props.disabled
-			}]) }, [
-				_ctx.$slots.title ? renderSlot(_ctx.$slots, "title", normalizeProps(guardReactiveProps({
-					hasChanges: __props.hasChanges,
-					hasError: __props.hasError,
-					hasValue: __props.hasValue
-				})), void 0, void 0, 0) : (openBlock(), createElementBlock("div", {
+			}), {
+				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", {
+					"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),
+					"outline-[1.5rem]": __props.active
+				}]) }, [__props.hasError ? (openBlock(), createBlock(unref(IconNegativeInfo_default), {
+					key: 0,
+					class: "size-8"
+				})) : __props.hasValue ? (openBlock(), createBlock(unref(IconCheckCircle_default), {
 					key: 1,
-					class: normalizeClass(["group/overflow grid grid-cols-[1fr_auto] items-center py-2", {
-						"justify-center text-center": !__props.side,
-						"text-start": __props.side
-					}])
-				}, [
-					createElementVNode("div", { class: normalizeClass(["whitespace-nowrap px-3", { "sm-not:pl---inner-margin": __props.side }]) }, [(openBlock(), createBlock(resolveDynamicComponent(__props.enableOverflow ? WTextOverflow_default : WEmptyComponent_default), null, {
-						default: withCtx(() => [
-							__props.icon !== void 0 ? (openBlock(), createBlock(Suspense, { key: 0 }, {
-								fallback: withCtx(() => [..._cache[1] || (_cache[1] = [createElementVNode("svg", { class: "square-[1.25em] -mt-1 inline" }, [createElementVNode("g")], -1)])]),
-								default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(__props.icon), { class: "square-[1.25em] -mt-1 inline" }))]),
-								_: 1
-							})) : createCommentVNode("", true),
-							createTextVNode(" " + toDisplayString(__props.title) + " ", 1),
-							__props.count !== void 0 ? (openBlock(), createElementBlock("span", {
-								key: 1,
-								class: normalizeClass(["ml-0.5 inline-block min-w-[1.75em] rounded-full px-1.5 text-center text-xs/5 tabular-nums", __props.active && !__props.hasError ? "bg-tone-soft" : "bg-surface-muted text-description"])
-							}, toDisplayString(unref(numberFormatter).format(__props.count)), 3)) : createCommentVNode("", true)
-						]),
-						_: 1
-					}))], 2),
-					__props.statusIcon ? (openBlock(), createBlock(WStatusIcon_default, {
-						key: 0,
-						"has-value": __props.hasValue,
-						"has-error": __props.hasError,
-						class: "sm-not:mr---inner-margin square-4 ml-auto mr-4"
-					}, null, 8, ["has-value", "has-error"])) : createCommentVNode("", true),
-					renderSlot(_ctx.$slots, "suffix", normalizeProps(guardReactiveProps({
+					class: "size-8"
+				})) : (openBlock(), createBlock(unref(IconClose_default), {
+					key: 2,
+					class: "size-8"
+				}))], 2)])) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(["relative col-start-2 self-start", {
+					"mt-3.5": __props.indicator,
+					"w-ripple w-ripple-hover": !__props.disabled
+				}]) }, [
+					_ctx.$slots.title ? renderSlot(_ctx.$slots, "title", normalizeProps(guardReactiveProps({
 						hasChanges: __props.hasChanges,
 						hasError: __props.hasError,
 						hasValue: __props.hasValue
-					})))
-				], 2)),
-				createVNode(Transition, {
-					"enter-active-class": "transition-opacity",
-					"leave-active-class": "transition-opacity",
-					"enter-from-class": "opacity-0",
-					"leave-to-class": "opacity-0"
-				}, {
-					default: withCtx(() => [__props.hasChanges ? (openBlock(), createElementBlock("div", {
-						key: 0,
-						class: normalizeClass(["square-2 absolute right-1 top-1 rounded-full", {
-							"tone-info bg-tone-fill": !__props.hasError,
-							"tone-negative bg-tone-fill": __props.hasError
+					})), void 0, void 0, 0) : (openBlock(), createElementBlock("div", {
+						key: 1,
+						class: normalizeClass(["group/overflow grid grid-cols-[1fr_auto] items-center py-2", {
+							"justify-center text-center": !__props.side,
+							"text-start": __props.side
 						}])
-					}, null, 2)) : createCommentVNode("", true)]),
-					_: 1
-				}),
-				createVNode(Transition, {
-					"enter-active-class": "transition-[scale,opacity] origin-center duration-300",
-					"leave-active-class": "transition-[scale,opacity] origin-center duration-300",
-					"enter-from-class": "scale-x-0 opacity-0",
-					"leave-to-class": "scale-x-0 opacity-0",
-					css: !__props.indicator
-				}, {
-					default: withCtx(() => [__props.active || __props.indicator ? (openBlock(), createElementBlock("div", {
-						key: 0,
-						class: normalizeClass(["absolute inset-x-0 bg-current bottom-0 h-0.5 rounded-sm", { "sm-not:left---inner-margin": __props.side }])
-					}, null, 2)) : createCommentVNode("", true)]),
-					_: 1
-				}, 8, ["css"])
-			], 2)], 10, _hoisted_1);
+					}, [
+						createElementVNode("div", { class: normalizeClass(["whitespace-nowrap px-3", { "sm-not:pl---inner-margin": __props.side }]) }, [(openBlock(), createBlock(resolveDynamicComponent(__props.enableOverflow ? WTextOverflow_default : WEmptyComponent_default), null, {
+							default: withCtx(() => [
+								__props.icon !== void 0 ? (openBlock(), createBlock(Suspense, { key: 0 }, {
+									fallback: withCtx(() => [..._cache[1] || (_cache[1] = [createElementVNode("svg", { class: "square-[1.25em] -mt-1 inline" }, [createElementVNode("g")], -1)])]),
+									default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(__props.icon), { class: "square-[1.25em] -mt-1 inline" }))]),
+									_: 1
+								})) : createCommentVNode("", true),
+								createTextVNode(" " + toDisplayString(__props.title) + " ", 1),
+								__props.count !== void 0 ? (openBlock(), createElementBlock("span", {
+									key: 1,
+									class: normalizeClass(["ml-0.5 inline-block min-w-[1.75em] rounded-full px-1.5 text-center text-xs/5 tabular-nums", __props.active && !__props.hasError ? "bg-tone-soft" : "bg-surface-muted text-description"])
+								}, toDisplayString(unref(numberFormatter).format(__props.count)), 3)) : createCommentVNode("", true)
+							]),
+							_: 1
+						}))], 2),
+						__props.statusIcon ? (openBlock(), createBlock(WStatusIcon_default, {
+							key: 0,
+							"has-value": __props.hasValue,
+							"has-error": __props.hasError,
+							class: "sm-not:mr---inner-margin square-4 ml-auto mr-4"
+						}, null, 8, ["has-value", "has-error"])) : createCommentVNode("", true),
+						renderSlot(_ctx.$slots, "suffix", normalizeProps(guardReactiveProps({
+							hasChanges: __props.hasChanges,
+							hasError: __props.hasError,
+							hasValue: __props.hasValue
+						})))
+					], 2)),
+					createVNode(Transition, {
+						"enter-active-class": "transition-opacity",
+						"leave-active-class": "transition-opacity",
+						"enter-from-class": "opacity-0",
+						"leave-to-class": "opacity-0"
+					}, {
+						default: withCtx(() => [__props.hasChanges ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							class: normalizeClass(["square-2 absolute right-1 top-1 rounded-full", {
+								"tone-info bg-tone-fill": !__props.hasError,
+								"tone-negative bg-tone-fill": __props.hasError
+							}])
+						}, null, 2)) : createCommentVNode("", true)]),
+						_: 1
+					}),
+					createVNode(Transition, {
+						"enter-active-class": "transition-[scale,opacity] origin-center duration-300",
+						"leave-active-class": "transition-[scale,opacity] origin-center duration-300",
+						"enter-from-class": "scale-x-0 opacity-0",
+						"leave-to-class": "scale-x-0 opacity-0",
+						css: !__props.indicator
+					}, {
+						default: withCtx(() => [__props.active || __props.indicator ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							class: normalizeClass(["absolute inset-x-0 bg-current bottom-0 h-0.5 rounded-sm", { "sm-not:left---inner-margin": __props.side }])
+						}, null, 2)) : createCommentVNode("", true)]),
+						_: 1
+					}, 8, ["css"])
+				], 2)]),
+				_: 3
+			}, 16, ["class"]);
 		};
 	}
 });

package/dist/components/Chip/WChip.vue.d.ts

@@ -4,6 +4,10 @@ type __VLS_Props = {
     text?: string;
     /** Color scheme of the chip. */
     semanticType?: SemanticType;
+    /** Renders a rounded pill with a tinted background and colored text instead of a filled box. */
+    soft?: boolean;
+    /** Icon shown before the label. */
+    icon?: SVGComponent;
     /** Shows a placeholder instead of the chip. When unset, inherits the skeleton state provided by a parent. */
     skeleton?: boolean;
 };
@@ -14,6 +18,7 @@ type __VLS_Slots = {
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     text: string;
     skeleton: boolean;
+    icon: SVGComponent;
     semanticType: SemanticType;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/Chip/WChip.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WChip.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Chip/WChip.vue"],"names":[],"mappings":"AAgBA;AAmDA,OAAO,EAAC,YAAY,EAAyB,MAAM,sBAAsB,CAAA;AAGzE,KAAK,WAAW,GAAG;IACf,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gCAAgC;IAChC,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,6GAA6G;IAC7G,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AAUJ,KAAK,WAAW,GAAG;IACjB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAC;AAgEF,QAAA,MAAM,UAAU;UAlFL,MAAM;cAIF,OAAO;kBAFH,YAAY;6EAmF7B,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":"WChip.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Chip/WChip.vue"],"names":[],"mappings":"AAwBA;AAmEA,OAAO,EAAC,YAAY,EAAqD,MAAM,sBAAsB,CAAA;AAGrG,KAAK,WAAW,GAAG;IACf,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gCAAgC;IAChC,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,gGAAgG;IAChG,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,mCAAmC;IACnC,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,6GAA6G;IAC7G,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AAWJ,KAAK,WAAW,GAAG;IACjB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAC;AA6EF,QAAA,MAAM,UAAU;UApGL,MAAM;cAQF,OAAO;UAFX,YAAY;kBAJJ,YAAY;6EAqG7B,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/Chip/WChip.vue_vue_type_script_setup_true_lang.js

@@ -1,13 +1,15 @@
-import { SemanticType, useSemanticTypeChipMap } from "../../utils/SemanticType.js";
+import { SemanticType, useSemanticTypeChipMap, useSemanticTypeChipSoftMap } from "../../utils/SemanticType.js";
 import WSkeleton_default from "../Skeleton/WSkeleton.vue.js";
 import { useComponentStatesSkeleton } from "../../utils/useComponentStates.js";
-import { createBlock, createElementBlock, createTextVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref } from "vue";
+import { createBlock, createCommentVNode, createElementBlock, createTextVNode, defineComponent, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref } from "vue";
 //#region src/components/Chip/WChip.vue?vue&type=script&setup=true&lang.ts
 var WChip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "WChip",
 	props: {
 		text: { default: void 0 },
 		semanticType: { default: SemanticType.SECONDARY },
+		soft: { type: Boolean },
+		icon: { default: void 0 },
 		skeleton: {
 			type: Boolean,
 			default: void 0
@@ -16,14 +18,18 @@ var WChip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 	setup(__props) {
 		const { isSkeleton } = useComponentStatesSkeleton(__props);
 		const semanticTypeChipMap = useSemanticTypeChipMap();
+		const semanticTypeChipSoftMap = useSemanticTypeChipSoftMap();
 		return (_ctx, _cache) => {
 			return unref(isSkeleton) ? (openBlock(), createBlock(WSkeleton_default, {
 				key: 0,
 				class: "w-skeleton-h-5 max-w-28"
 			})) : (openBlock(), createElementBlock("div", {
 				key: 1,
-				class: normalizeClass(["w-max rounded-md px-2 py-0.5 text-xs font-semibold", unref(semanticTypeChipMap)[__props.semanticType]])
-			}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.text), 1)])], 2));
+				class: normalizeClass(["w-max", __props.soft ? ["inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium", unref(semanticTypeChipSoftMap)[__props.semanticType]] : ["rounded-md px-2 py-0.5 text-xs font-semibold", unref(semanticTypeChipMap)[__props.semanticType]]])
+			}, [__props.icon ? (openBlock(), createBlock(resolveDynamicComponent(__props.icon), {
+				key: 0,
+				class: "square-[1em] shrink-0"
+			})) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.text), 1)])], 2));
 		};
 	}
 });

package/dist/components/HeaderBar/WHeaderBar.vue.d.ts

@@ -1,5 +1,5 @@
 type __VLS_Props = {
-    /** Title of the page. The `title` slot replaces it. */
+    /** Title of the page. The `title` slot replaces it. Without both, the header shows the titles of the current route: a breadcrumb of its parents and the page title, see `useRouteTitle`. */
     title?: string;
 };
 type __VLS_Slots = {

package/dist/components/HeaderBar/WHeaderBar.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WHeaderBar.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/HeaderBar/WHeaderBar.vue"],"names":[],"mappings":"AAuDA;AAoIA,KAAK,WAAW,GAAG;IACjB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AAGF,KAAK,WAAW,GAAG;IACjB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;IAClB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;CACnB,CAAC;AA2LF,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"WHeaderBar.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/HeaderBar/WHeaderBar.vue"],"names":[],"mappings":"AA+HA;AA0NA,KAAK,WAAW,GAAG;IACjB,4LAA4L;IAC5L,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AAGF,KAAK,WAAW,GAAG;IACjB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;IAClB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;CACnB,CAAC;AAqUF,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/HeaderBar/WHeaderBar.vue_vue_type_script_setup_true_lang.js

@@ -1,13 +1,41 @@
 import { wBaseZIndex } from "../../utils/utils.js";
+import WRouterLink_default from "../RouterLink/WRouterLink.vue.js";
+import WSkeleton_default from "../Skeleton/WSkeleton.vue.js";
+import WTooltip_default from "../Tooltip/WTooltip.vue.js";
 import IconSearch_default from "../../assets/icons/IconSearch.js";
+import { getRouteTitleShort, useRouteTitles } from "../../utils/useRouteTitle.js";
 import { useHeader } from "./use/useHeader.js";
 import { useHeaderSearch } from "./use/useHeaderSearch.js";
 import { useHeaderSearchVisible } from "./use/useHeaderSearchVisible.js";
-import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useTemplateRef, vShow, withDirectives } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useTemplateRef, vShow, withCtx, withDirectives } from "vue";
 //#region src/components/HeaderBar/WHeaderBar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "text-accent sm:text-2.5xl flex-1 truncate text-xl font-semibold" };
-var _hoisted_2 = { class: "w-ripple w-ripple-hover sm-not:px---inner-margin relative flex h-full items-center px-(--w-list-padding,1rem)" };
+var _hoisted_1 = {
+	key: 0,
+	class: "text-accent sm:text-2.5xl flex-1 truncate text-xl font-semibold"
+};
+var _hoisted_2 = {
+	key: 1,
+	class: "flex min-w-0 flex-1 items-baseline gap-2 text-lg leading-tight sm:text-xl"
+};
 var _hoisted_3 = {
+	key: 0,
+	"aria-label": "Breadcrumb",
+	class: "sm-not:hidden text-description flex shrink-0 items-baseline gap-2"
+};
+var _hoisted_4 = {
+	key: 1,
+	class: "max-w-64 truncate"
+};
+var _hoisted_5 = {
+	key: 1,
+	class: "text-accent min-w-0 truncate font-semibold"
+};
+var _hoisted_6 = {
+	key: 2,
+	class: "flex min-w-max flex-1 items-center self-center"
+};
+var _hoisted_7 = { class: "w-ripple w-ripple-hover sm-not:px---inner-margin relative flex h-full items-center px-(--w-list-padding,1rem)" };
+var _hoisted_8 = {
 	key: 0,
 	class: "xl-not:pl---header-height px---inner-margin grid items-center"
 };
@@ -19,6 +47,9 @@ var WHeaderBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		const { headerPadding, updateHeaderHeight } = useHeader();
 		const { search } = useHeaderSearch();
 		const { visible, updateVisible } = useHeaderSearchVisible();
+		const { titles } = useRouteTitles();
+		const parentTitles = computed(() => titles.value.slice(0, -1));
+		const currentTitle = computed(() => titles.value.at(-1));
 		const elementRef = useTemplateRef("element");
 		const isTransparent = ref(false);
 		let timeout;
@@ -57,16 +88,41 @@ var WHeaderBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					style: normalizeStyle({ "--header-height-padding": unref(headerPadding) + "px" })
 				}, null, 6)),
 				withDirectives(createElementVNode("div", { class: normalizeClass(["pl---inner-margin xl-not:pl---header-height relative flex items-center", { "pr---inner-margin": !unref(search) }]) }, [
-					createElementVNode("h1", _hoisted_1, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])]),
+					__props.title !== void 0 || _ctx.$slots.title ? (openBlock(), createElementBlock("h1", _hoisted_1, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])])) : (openBlock(), createElementBlock("div", _hoisted_2, [
+						parentTitles.value.length ? (openBlock(), createElementBlock("nav", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(parentTitles.value, (item, index) => {
+							return openBlock(), createElementBlock(Fragment, { key: index }, [item.to ? (openBlock(), createBlock(WRouterLink_default, {
+								key: 0,
+								to: item.to,
+								class: "hover:text-accent max-w-64 truncate no-underline transition-colors"
+							}, {
+								default: withCtx(() => [unref(getRouteTitleShort)(item) !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(toDisplayString(unref(getRouteTitleShort)(item)), 1)], 64)) : (openBlock(), createBlock(WSkeleton_default, {
+									key: 1,
+									class: "inline-flex w-24"
+								}))]),
+								_: 2
+							}, 1032, ["to"])) : (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(unref(getRouteTitleShort)(item)), 1)), _cache[1] || (_cache[1] = createElementVNode("span", {
+								"aria-hidden": "true",
+								class: "opacity-50"
+							}, "/", -1))], 64);
+						}), 128))])) : createCommentVNode("", true),
+						currentTitle.value ? (openBlock(), createElementBlock("h1", _hoisted_5, [currentTitle.value.title !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(toDisplayString(currentTitle.value.title) + " ", 1), createVNode(WTooltip_default, {
+							text: currentTitle.value.title,
+							"overflow-only": ""
+						}, null, 8, ["text"])], 64)) : (openBlock(), createBlock(WSkeleton_default, {
+							key: 1,
+							class: "inline-flex w-40"
+						}))])) : createCommentVNode("", true),
+						currentTitle.value?.suffix ? (openBlock(), createElementBlock("div", _hoisted_6, [(openBlock(), createBlock(resolveDynamicComponent(currentTitle.value.suffix)))])) : createCommentVNode("", true)
+					])),
 					renderSlot(_ctx.$slots, "right"),
 					unref(search) ? (openBlock(), createElementBlock("button", {
-						key: 0,
+						key: 2,
 						class: "w-ripple-trigger sm:pr---inner-margin h-full select-none",
 						"aria-label": "Open search",
 						onClick: _cache[0] || (_cache[0] = ($event) => unref(updateVisible)(true))
-					}, [createElementVNode("div", _hoisted_2, [createVNode(unref(IconSearch_default), { class: "square-[1.25em] text-accent" })])])) : createCommentVNode("", true)
+					}, [createElementVNode("div", _hoisted_7, [createVNode(unref(IconSearch_default), { class: "square-[1.25em] text-accent" })])])) : createCommentVNode("", true)
 				], 2), [[vShow, !unref(visible)]]),
-				unref(search) ? withDirectives((openBlock(), createElementBlock("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(search), (slot, index) => {
+				unref(search) ? withDirectives((openBlock(), createElementBlock("div", _hoisted_8, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(search), (slot, index) => {
 					return openBlock(), createBlock(resolveDynamicComponent(slot), { key: index });
 				}), 128))], 512)), [[vShow, unref(visible)]]) : createCommentVNode("", true)
 			], 4);

package/dist/components/Link/WLink.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WLink.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Link/WLink.vue"],"names":[],"mappings":"AAcA;AA8DA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,eAAe,CAAA;AAM5C,OAAO,EAAC,YAAY,EAAiD,MAAM,sBAAsB,CAAA;AAEjG,UAAU,KAAM,SAAQ,OAAO,CAAC,SAAS,CAAC;IACxC,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;IAChD,mCAAmC;IACnC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,6CAA6C;IAC7C,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,gEAAgE;IAChE,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAgBD,KAAK,WAAW,GAAG;IACjB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAC;AAiFF,QAAA,MAAM,UAAU;;UAzGP,MAAM;UAIN,YAAY;kBAFJ,YAAY;UARpB,MAAM;YAEJ,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM;SAE1C,MAAM;6EA8GZ,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":"WLink.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Link/WLink.vue"],"names":[],"mappings":"AAcA;AA8DA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,eAAe,CAAA;AAM5C,OAAO,EAAC,YAAY,EAAiD,MAAM,sBAAsB,CAAA;AAEjG,UAAU,KAAM,SAAQ,OAAO,CAAC,SAAS,CAAC;IACxC,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;IAChD,mCAAmC;IACnC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,6CAA6C;IAC7C,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,gEAAgE;IAChE,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAgBD,KAAK,WAAW,GAAG;IACjB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAC;AA+EF,QAAA,MAAM,UAAU;;UAvGP,MAAM;UAIN,YAAY;kBAFJ,YAAY;UARpB,MAAM;YAEJ,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM;SAE1C,MAAM;6EA4GZ,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/Link/WLink.vue_vue_type_script_setup_true_lang.js

@@ -26,7 +26,7 @@ var WLink_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 				to: __props.to,
 				target: __props.target,
 				rel: __props.rel
-			}, { class: ["cursor-pointer overflow-hidden truncate whitespace-normal font-normal no-underline hover:underline", unref(semanticTypeTextMap)[__props.semanticType]] }), {
+			}, { class: ["cursor-pointer whitespace-normal font-normal no-underline hover:underline", unref(semanticTypeTextMap)[__props.semanticType]] }), {
 				default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(__props.icon ?? unref(IconLink_default)), { class: normalizeClass(["square-[1.25em] mr-[0.25em] mt-[-0.25em] inline rounded-[0.5em] p-px", unref(semanticTypeChipMap)[__props.semanticType]]) }, null, 8, ["class"])), renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.text), 1)])]),
 				_: 3
 			}, 16, ["class"]);

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

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

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

@@ -3,6 +3,8 @@ import WCounter_default from "../Counter/WCounter.vue.js";
 import WRouterLink_default from "../RouterLink/WRouterLink.vue.js";
 import WSkeleton_default from "../Skeleton/WSkeleton.vue.js";
 import { useOptionalRoute, useOptionalRouter } from "../../composables/useOptionalRouter.js";
+import WTextOverflow_default from "../TextOverflow/WTextOverflow.vue.js";
+import { getRouteTitle, getRouteTitleShort } from "../../utils/useRouteTitle.js";
 import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
 //#region src/components/Nav/WNavItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
@@ -15,11 +17,12 @@ var _hoisted_2 = {
 };
 var _hoisted_3 = { class: "[overflow:inherit]" };
 var _hoisted_4 = { class: "flex items-center" };
-var _hoisted_5 = { class: "last-not:pr-1 whitespace-nowrap font-normal" };
-var _hoisted_6 = { class: "relative" };
-var _hoisted_7 = { class: "tracking-wide" };
-var _hoisted_8 = { class: "leading-loose" };
-var _hoisted_9 = { key: 0 };
+var _hoisted_5 = { class: "last-not:pr-1 min-w-0 font-normal" };
+var _hoisted_6 = { class: "relative inline-flex max-w-full items-center whitespace-nowrap tracking-wide" };
+var _hoisted_7 = {
+	key: 0,
+	class: "shrink-0"
+};
 var WNavItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "WNavItem",
 	props: {
@@ -47,13 +50,15 @@ var WNavItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			if (routeTo.value?.name !== route?.name) return false;
 			return isEqualObj(route.query, routeTo.value.query ?? {}, EXCLUDE_QUERY_FIELDS, props.queryFields);
 		});
-		const titleLocal = computed(() => props.title ?? (typeof routeTo.value?.meta?.titleShort === "string" ? routeTo.value.meta.titleShort : typeof routeTo.value?.meta?.title === "string" ? routeTo.value.meta.title : ""));
+		const routeTitle = computed(() => getRouteTitle(routeTo.value?.matched.at(-1)));
+		const iconLocal = computed(() => props.icon ?? routeTo.value?.meta?.icon);
+		const titleLocal = computed(() => props.title ?? (routeTitle.value ? getRouteTitleShort(routeTitle.value) : void 0) ?? (typeof routeTo.value?.meta?.titleShort === "string" ? routeTo.value.meta.titleShort : typeof routeTo.value?.meta?.title === "string" ? routeTo.value.meta.title : ""));
 		const isTextColor = computed(() => props.hasActive ? !props.indent : isActive.value);
 		__expose({ isActive });
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(WRouterLink_default, {
 				to: __props.to,
-				class: normalizeClass(["w-ripple-trigger relative block py-1 no-underline", {
+				class: normalizeClass(["w-ripple-trigger group/overflow relative block py-1 no-underline", {
 					"tone-primary text-tone": isTextColor.value,
 					"text-accent": !isTextColor.value,
 					"px-1": __props.even,
@@ -84,23 +89,26 @@ var WNavItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 						"pl-4": __props.indent,
 						"pl-2": !__props.indent
 					}]) }, [
-						createElementVNode("div", _hoisted_4, [__props.icon ?? routeTo.value?.meta?.icon ? (openBlock(), createBlock(resolveDynamicComponent(__props.icon ?? routeTo.value?.meta?.icon), {
+						createElementVNode("div", _hoisted_4, [iconLocal.value ? (openBlock(), createBlock(resolveDynamicComponent(iconLocal.value), {
 							key: 0,
 							class: "square-[1.25em]"
 						})) : renderSlot(_ctx.$slots, "icon", {}, void 0, void 0, 1)]),
-						createElementVNode("div", _hoisted_5, [createElementVNode("span", _hoisted_6, [createElementVNode("span", _hoisted_7, [
-							createElementVNode("span", _hoisted_8, toDisplayString(titleLocal.value), 1),
-							_cache[1] || (_cache[1] = createTextVNode("\xA0", -1)),
-							!__props.skeleton ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(typeof __props.count === "number" ? `(${unref(numberCompactFormatter).format(__props.count)})` : ""), 1)) : (openBlock(), createBlock(WSkeleton_default, {
+						createElementVNode("div", _hoisted_5, [createElementVNode("span", _hoisted_6, [
+							createVNode(WTextOverflow_default, { class: "min-w-0 leading-loose" }, {
+								default: withCtx(() => [createTextVNode(toDisplayString(titleLocal.value), 1)]),
+								_: 1
+							}),
+							!__props.skeleton ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(typeof __props.count === "number" ? `\u00A0(${unref(numberCompactFormatter).format(__props.count)})` : ""), 1)) : (openBlock(), createBlock(WSkeleton_default, {
 								key: 1,
-								class: "inline-flex max-w-10"
-							}))
-						]), !__props.skeleton && __props.counter !== void 0 && __props.counter !== 0 ? (openBlock(), createBlock(WCounter_default, {
-							key: 0,
-							count: __props.counter,
-							trigger: 1,
-							class: "text-2xs absolute -top-2.5 right-[-1em]"
-						}, null, 8, ["count"])) : createCommentVNode("", true)])]),
+								class: "ml-1 inline-flex max-w-10 shrink-0"
+							})),
+							!__props.skeleton && __props.counter !== void 0 && __props.counter !== 0 ? (openBlock(), createBlock(WCounter_default, {
+								key: 2,
+								count: __props.counter,
+								trigger: 1,
+								class: "text-2xs absolute -top-2.5 right-[-1em]"
+							}, null, 8, ["count"])) : createCommentVNode("", true)
+						])]),
 						renderSlot(_ctx.$slots, "right")
 					], 2)])
 				]),

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

@@ -2,7 +2,7 @@ import { LinkProps } from '../../types/types';
 export interface NavItemProps extends LinkProps {
   /** Icon before the title. Defaults to the route's `meta.icon`. */
   icon?: SVGComponent
-  /** Title of the item. Defaults to the route's `meta.titleShort`, then `meta.title`. */
+  /** Title of the item. Defaults to the title the route's page registers with `useRouteTitle` while it is open, then the route's `meta.titleShort`, then `meta.title`. */
   title?: string
   /** Number after the title in brackets, such as the number of items on the page it opens. */
   count?: number

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

@@ -20,9 +20,9 @@ var WNotify_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				class: normalizeClass(["sm-not:top-[max(env(safe-area-inset-top),0.5rem)] fixed isolate z-10000", {
-					"sm:top-(--w-top-inner,0.5rem)": isTop.value,
-					"sm:bottom-[calc(var(--w-bottom-inner,0.5rem)+0.5rem)]": !isTop.value,
-					"right-(--w-right-inner,0.5rem)": !isCenter.value,
+					"sm:top-[max(env(safe-area-inset-top),0.5rem)]": isTop.value,
+					"sm:bottom-[max(env(safe-area-inset-bottom),0.5rem)]": !isTop.value,
+					"right-[max(env(safe-area-inset-right),0.5rem)]": !isCenter.value,
 					"left-1/2 -translate-x-1/2": isCenter.value
 				}]),
 				onPointerenter: _cache[1] || (_cache[1] = ($event) => unref(setToastsPaused)(true)),