@astryx-vue/core 0.2.5 → 0.3.0

package/dist/{Toast-C2ML-bmi.js → Toast-BuqIZV5z.js}

@@ -1,5 +1,16 @@
-import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, markRaw, normalizeClass, onMounted, onUnmounted, openBlock, reactive, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, watch } from "vue";
+import { r as useLayerConfig } from "./context-M-er0-Rk.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, markRaw, normalizeClass, normalizeProps, normalizeStyle, onMounted, onUnmounted, openBlock, reactive, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, watch } from "vue";
 import "../styles/toast.css";
+//#region src/Toast/options.ts
+/** 这条提示会不会自己消失。`error` 默认不消失。 */
+function resolveAutoHide(options) {
+	return options.isAutoHide ?? options.autoClose ?? options.type !== "error";
+}
+/** 自动消失的时长，单位毫秒。 */
+function resolveAutoHideDuration(options) {
+	return options.autoHideDuration ?? options.duration ?? 5e3;
+}
+//#endregion
 //#region src/Toast/Toast.vue
 const _hoisted_1$1 = ["role", "aria-live"];
 const _hoisted_2 = { class: "astryx-toast__body" };
@@ -7,16 +18,22 @@ const _hoisted_3 = {
 	key: 0,
 	class: "astryx-toast__end"
 };
+const MIN_REMAINING_MS = 1e3;
 const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 	__name: "Toast",
 	props: {
 		type: { default: "info" },
 		body: {},
+		isAutoHide: {
+			type: Boolean,
+			default: void 0
+		},
+		autoHideDuration: {},
 		autoClose: {
 			type: Boolean,
-			default: true
+			default: void 0
 		},
-		duration: { default: 5e3 },
+		duration: {},
 		uniqueID: {},
 		collisionBehavior: {},
 		endContent: {},
@@ -25,11 +42,13 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			default: false
 		}
 	},
-	emits: ["close"],
+	emits: ["dismiss", "close"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const remaining = ref(props.duration);
+		const duration = computed(() => resolveAutoHideDuration(props));
+		const autoHide = computed(() => resolveAutoHide(props));
+		const remaining = ref(duration.value);
 		const isPaused = ref(false);
 		const timer = ref(null);
 		const startTime = ref(null);
@@ -41,16 +60,28 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			`astryx-toast--type-${props.type}`,
 			{ "astryx-toast--exiting": props.isExiting }
 		]);
+		const contentScope = computed(() => ({
+			body: props.body,
+			endContent: props.endContent,
+			type: props.type,
+			isAutoHide: autoHide.value,
+			autoHideDuration: duration.value,
+			dismiss: () => dismiss("manual")
+		}));
+		function dismiss(reason) {
+			emit("dismiss", reason);
+			emit("close");
+		}
 		function startTimer() {
-			if (!props.autoClose || isPaused.value) return;
+			if (!autoHide.value || isPaused.value) return;
 			if (timer.value) clearTimeout(timer.value);
 			startTime.value = Date.now();
 			timer.value = setTimeout(() => {
-				emit("close");
+				dismiss("auto");
 			}, remaining.value);
 		}
 		function pauseTimer() {
-			if (!props.autoClose || isPaused.value) return;
+			if (!autoHide.value || isPaused.value) return;
 			isPaused.value = true;
 			if (timer.value) {
 				clearTimeout(timer.value);
@@ -58,27 +89,43 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			}
 			if (startTime.value != null) {
 				const elapsed = Date.now() - startTime.value;
-				remaining.value = Math.max(remaining.value - elapsed, 0);
+				remaining.value = Math.max(remaining.value - elapsed, MIN_REMAINING_MS);
 			}
 		}
 		function resumeTimer() {
-			if (!props.autoClose || !isPaused.value) return;
+			if (!autoHide.value || !isPaused.value) return;
 			isPaused.value = false;
 			startTimer();
 		}
 		function handleClose() {
-			emit("close");
+			dismiss("manual");
+		}
+		function onWindowBlur() {
+			pauseTimer();
+		}
+		function onWindowFocus() {
+			resumeTimer();
 		}
 		watch(() => props.isExiting, (exiting) => {
 			if (!exiting || !timer.value) return;
 			clearTimeout(timer.value);
 			timer.value = null;
 		});
+		watch(duration, (next) => {
+			remaining.value = next;
+			startTimer();
+		});
 		onMounted(() => {
 			startTimer();
+			if (autoHide.value) {
+				window.addEventListener("blur", onWindowBlur);
+				window.addEventListener("focus", onWindowFocus);
+			}
 		});
 		onUnmounted(() => {
 			if (timer.value) clearTimeout(timer.value);
+			window.removeEventListener("blur", onWindowBlur);
+			window.removeEventListener("focus", onWindowFocus);
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" eslint-disable-next-line vue-a11y/no-static-element-interactions -- toast pauses auto-dismiss on hover/focus "), createElementVNode("div", {
@@ -90,7 +137,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				onMouseleave: resumeTimer,
 				onFocusin: pauseTimer,
 				onFocusout: resumeTimer
-			}, [
+			}, [_ctx.$slots.content ? renderSlot(_ctx.$slots, "content", normalizeProps(guardReactiveProps(contentScope.value)), void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
 				createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.body), 1)])]),
 				__props.endContent || _ctx.$slots.end ? (openBlock(), createElementBlock("span", _hoisted_3, [renderSlot(_ctx.$slots, "end", {}, () => [__props.endContent ? (openBlock(), createBlock(resolveDynamicComponent(__props.endContent), { key: 0 })) : createCommentVNode("v-if", true)])])) : createCommentVNode("v-if", true),
 				createElementVNode("button", {
@@ -99,7 +146,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					"aria-label": "Close",
 					onClick: handleClose
 				}, " × ")
-			], 42, _hoisted_1$1)], 2112);
+			], 64))], 42, _hoisted_1$1)], 2112);
 		};
 	}
 });
@@ -111,38 +158,46 @@ const toastStore = reactive({
 	toasts: [],
 	add(options) {
 		const endContent = options.endContent ? markRaw(options.endContent) : void 0;
+		const resolved = {
+			type: options.type ?? "info",
+			body: options.body,
+			isAutoHide: resolveAutoHide(options),
+			autoHideDuration: resolveAutoHideDuration(options),
+			endContent,
+			onDismiss: options.onDismiss,
+			onHide: options.onHide
+		};
 		if (options.uniqueID) {
 			const existing = this.toasts.find((toast) => toast.uniqueID === options.uniqueID && !toast.isExiting);
 			const behavior = options.collisionBehavior ?? "overwrite";
 			if (existing && behavior === "ignore") return null;
 			if (existing) {
-				existing.type = options.type ?? "info";
-				existing.body = options.body;
-				existing.autoClose = options.autoClose ?? true;
-				existing.duration = options.duration ?? 5e3;
-				existing.endContent = endContent;
+				Object.assign(existing, resolved);
 				return existing.id;
 			}
 		}
 		const id = `astryx-toast-${++idCounter}`;
 		this.toasts.push({
 			id,
-			type: options.type ?? "info",
-			body: options.body,
-			autoClose: options.autoClose ?? true,
-			duration: options.duration ?? 5e3,
 			uniqueID: options.uniqueID,
-			endContent,
-			isExiting: false
+			isExiting: false,
+			...resolved
 		});
 		return id;
 	},
-	requestClose(id) {
+	requestClose(id, reason = "manual") {
 		const item = this.toasts.find((t) => t.id === id);
 		if (!item || item.isExiting) return;
 		item.isExiting = true;
+		item.onHide?.(reason);
 		setTimeout(() => this.finalize(id), EXIT_FALLBACK_MS);
 	},
+	dismissFromCard(id, reason) {
+		const item = this.toasts.find((t) => t.id === id);
+		if (!item || item.isExiting) return;
+		item.onDismiss?.(reason);
+		this.requestClose(id, reason);
+	},
 	finalize(id) {
 		const index = this.toasts.findIndex((t) => t.id === id);
 		if (index >= 0) this.toasts.splice(index, 1);
@@ -156,11 +211,53 @@ const toastStore = reactive({
 const _hoisted_1 = ["onTransitionend"];
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	__name: "ToastViewport",
-	props: { placement: { default: "bottom-center" } },
+	props: { placement: {} },
 	setup(__props) {
 		const props = __props;
-		const isTopPlacement = computed(() => props.placement.startsWith("top"));
-		const classes = computed(() => ["astryx-toast-viewport", `astryx-toast-viewport--placement-${props.placement}`]);
+		const layer = useLayerConfig();
+		const placement = computed(() => props.placement ?? layer?.value.toast.position ?? "bottom-end");
+		const isTopPlacement = computed(() => placement.value.startsWith("top"));
+		const classes = computed(() => ["astryx-toast-viewport", `astryx-toast-viewport--placement-${placement.value}`]);
+		/** 超出可见上限时只渲染最新的几条。 */
+		const visibleToasts = computed(() => {
+			const max = layer?.value.toast.maxVisible;
+			const toasts = toastStore.toasts;
+			if (max == null || max < 0 || toasts.length <= max) return toasts;
+			return toasts.slice(toasts.length - max);
+		});
+		const INSET_EDGES = [
+			[
+				"padding-block-start",
+				"blockStart",
+				"top"
+			],
+			[
+				"padding-block-end",
+				"blockEnd",
+				"bottom"
+			],
+			[
+				"padding-inline-start",
+				"inlineStart",
+				"left"
+			],
+			[
+				"padding-inline-end",
+				"inlineEnd",
+				"right"
+			]
+		];
+		/**
+		* 逐边偏移叠在基础内边距上。基础内边距取间距第 4 档和设备安全区的较大者，
+		* 和锚定浮层的视口空隙保持一致。没有 provider 时不写内联样式，保持原来的样子。
+		*/
+		const viewportStyle = computed(() => {
+			const inset = layer?.value.toast.inset;
+			if (inset == null) return void 0;
+			const style = {};
+			for (const [property, edge, areaEdge] of INSET_EDGES) style[property] = `calc(max(var(--astryx-spacing-4, 16px), env(safe-area-inset-${areaEdge}, 0px)) + ${inset[edge] ?? 0}px)`;
+			return style;
+		});
 		const settled = reactive(/* @__PURE__ */ new Set());
 		function handleRowTransitionEnd(id, event) {
 			if (event.target !== event.currentTarget || event.propertyName !== "grid-template-rows") return;
@@ -169,9 +266,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			if (item.isExiting) toastStore.finalize(id);
 			else settled.add(id);
 		}
-		function handleClose(id) {
+		function handleDismiss(id, reason) {
 			settled.delete(id);
-			toastStore.requestClose(id);
+			toastStore.dismissFromCard(id, reason);
 		}
 		watch(() => toastStore.toasts.map((t) => t.id).join(","), () => {
 			const live = new Set(toastStore.toasts.map((t) => t.id));
@@ -180,9 +277,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(Teleport, { to: "body" }, [createElementVNode("div", {
 				class: normalizeClass(classes.value),
+				style: normalizeStyle(viewportStyle.value),
 				"aria-live": "polite",
 				"aria-atomic": "false"
-			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(toastStore).toasts, (toast) => {
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleToasts.value, (toast) => {
 				return openBlock(), createElementBlock("div", {
 					key: toast.id,
 					class: normalizeClass(["astryx-toast-viewport__row", [isTopPlacement.value ? "astryx-toast-viewport__row--from-top" : "astryx-toast-viewport__row--from-bottom", { "astryx-toast-viewport__row--exiting": toast.isExiting }]]),
@@ -190,21 +288,21 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				}, [createElementVNode("div", { class: normalizeClass(["astryx-toast-viewport__clip", { "astryx-toast-viewport__clip--settled": settled.has(toast.id) }]) }, [createVNode(_sfc_main$1, {
 					type: toast.type,
 					body: toast.body,
-					"auto-close": toast.autoClose,
-					duration: toast.duration,
+					"is-auto-hide": toast.isAutoHide,
+					"auto-hide-duration": toast.autoHideDuration,
 					"end-content": toast.endContent,
 					"is-exiting": toast.isExiting,
-					onClose: ($event) => handleClose(toast.id)
+					onDismiss: ($event) => handleDismiss(toast.id, $event)
 				}, null, 8, [
 					"type",
 					"body",
-					"auto-close",
-					"duration",
+					"is-auto-hide",
+					"auto-hide-duration",
 					"end-content",
 					"is-exiting",
-					"onClose"
+					"onDismiss"
 				])], 2)], 42, _hoisted_1);
-			}), 128))], 2)]);
+			}), 128))], 6)]);
 		};
 	}
 });

package/dist/ToggleButton/index.d.ts

@@ -1,2 +1,2 @@
-import { A as ToggleButtonElevation, B as ToggleButtonGroupValue, D as _default$1, F as ToggleButtonGroupOrientation, H as ToggleButtonProps, I as ToggleButtonGroupProps, L as ToggleButtonGroupSingleProps, M as ToggleButtonGroupBaseProps, N as ToggleButtonGroupEmits, O as _default, P as ToggleButtonGroupMultipleProps, R as ToggleButtonGroupSlots, U as ToggleButtonSize, V as ToggleButtonPressedChangeHandler, W as ToggleButtonSlots, j as ToggleButtonEmits, k as ToggleButtonChangeAction, z as ToggleButtonGroupType } from "../index-B9rqmYxh.js";
+import { A as ToggleButtonEmits, B as ToggleButtonPressedChangeHandler, D as _default, E as _default$1, F as ToggleButtonGroupProps, H as ToggleButtonSize, I as ToggleButtonGroupSingleProps, L as ToggleButtonGroupSlots, M as ToggleButtonGroupEmits, N as ToggleButtonGroupMultipleProps, O as ToggleButtonChangeAction, P as ToggleButtonGroupOrientation, R as ToggleButtonGroupType, U as ToggleButtonSlots, V as ToggleButtonProps, j as ToggleButtonGroupBaseProps, k as ToggleButtonElevation, z as ToggleButtonGroupValue } from "../index-DUaLJO7l.js";
 export { _default as ToggleButton, _default as default, type ToggleButtonChangeAction, type ToggleButtonElevation, type ToggleButtonEmits, _default$1 as ToggleButtonGroup, type ToggleButtonGroupBaseProps, type ToggleButtonGroupEmits, type ToggleButtonGroupMultipleProps, type ToggleButtonGroupOrientation, type ToggleButtonGroupProps, type ToggleButtonGroupSingleProps, type ToggleButtonGroupSlots, type ToggleButtonGroupType, type ToggleButtonGroupValue, type ToggleButtonPressedChangeHandler, type ToggleButtonProps, type ToggleButtonSize, type ToggleButtonSlots };

package/dist/ToggleButton/index.js

@@ -1,2 +1,2 @@
-import { n as _sfc_main$1, r as _sfc_main, t as ToggleButton_default } from "../ToggleButton-BB_I8EdM.js";
+import { n as _sfc_main$1, r as _sfc_main, t as ToggleButton_default } from "../ToggleButton-B-C-Q7XP.js";
 export { _sfc_main as ToggleButton, _sfc_main$1 as ToggleButtonGroup, ToggleButton_default as default };

package/dist/{ToggleButton-BB_I8EdM.js → ToggleButton-B-C-Q7XP.js}

@@ -1,4 +1,4 @@
-import { t as _sfc_main$2 } from "./Button-DrqeomlE.js";
+import { t as _sfc_main$2 } from "./Button-B6Hj_O_s.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, defineComponent, inject, mergeModels, openBlock, provide, renderSlot, shallowRef, toDisplayString, useModel, useTemplateRef, withCtx } from "vue";
 import "../styles/toggle-button.css";
 //#region src/ToggleButton/context.ts

package/dist/Token/index.d.ts

@@ -1,2 +1,2 @@
-import { a as TokenProps, i as TokenEmits, n as TOKEN_COLORS, o as TokenSize, r as TokenColor, s as TokenSlots, t as _default } from "../index-CpiWVbRZ.js";
+import { a as TokenProps, i as TokenEmits, n as TOKEN_COLORS, o as TokenSize, r as TokenColor, s as TokenSlots, t as _default } from "../index-i0tNFWfz.js";
 export { TOKEN_COLORS, _default as Token, type TokenColor, type TokenEmits, type TokenProps, type TokenSize, type TokenSlots };

package/dist/Token/index.js

@@ -1,3 +1,3 @@
-import { t as _sfc_main } from "../Token-D2GsI_Ei.js";
+import { t as _sfc_main } from "../Token-DsntTYhQ.js";
 import { t as TOKEN_COLORS } from "../Token-BdRzlXzm.js";
 export { TOKEN_COLORS, _sfc_main as Token };

package/dist/{Token-D2GsI_Ei.js → Token-DsntTYhQ.js}

@@ -1,5 +1,7 @@
-import { o as useAstryxMessages } from "./context-CPh7kE-a.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, useAttrs, withCtx } from "vue";
+import { n as useLinkComponent } from "./context-C_peZbXf.js";
+import { t as useInteractiveRole } from "./useInteractiveRole-Cn0Nd5GX.js";
+import { o as useAstryxMessages } from "./context-iABt_ueM.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, toRaw, useAttrs, withCtx } from "vue";
 import "../styles/visually-hidden-utility.css";
 import "../styles/token.css";
 //#region src/Token/Token.vue
@@ -8,13 +10,8 @@ const _hoisted_1 = {
 	class: "astryx-token-icon",
 	"aria-hidden": "true"
 };
-const _hoisted_2 = [
-	"href",
-	"aria-disabled",
-	"tabindex"
-];
-const _hoisted_3 = ["disabled"];
-const _hoisted_4 = ["aria-label", "disabled"];
+const _hoisted_2 = ["disabled"];
+const _hoisted_3 = ["aria-label", "disabled"];
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "AstryxToken",
 	inheritAttrs: false,
@@ -44,13 +41,21 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const emit = __emit;
 		const attrs = useAttrs();
 		const messages = useAstryxMessages();
+		const linkComponent = useLinkComponent();
+		/** 有链接时用的根组件，没有 provider 时还是 `<a>`。 */
+		const linkRoot = computed(() => linkComponent.value == null ? "a" : toRaw(linkComponent.value));
 		const removeLabel = computed(() => messages.value.token.remove(props.label));
 		const clickable = computed(() => typeof attrs.onClick === "function");
 		const linked = computed(() => Boolean(props.href));
 		const interactive = computed(() => clickable.value || linked.value || props.removable);
 		const rootIsLink = computed(() => linked.value && !props.removable);
-		const actionIsLink = computed(() => linked.value && props.removable);
-		const actionIsButton = computed(() => clickable.value && !linked.value);
+		/** 删除按钮旁边那个动作元素是什么，由 `useInteractiveRole` 统一排序。 */
+		const actionRole = useInteractiveRole({
+			href: () => props.removable ? props.href : void 0,
+			hasOnClick: () => clickable.value && !linked.value
+		});
+		const actionIsLink = computed(() => actionRole.role.value === "link");
+		const actionIsButton = computed(() => actionRole.role.value === "button");
 		const rootAttrs = computed(() => {
 			return Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== "onClick"));
 		});
@@ -71,13 +76,14 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			emit("remove", event);
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(resolveDynamicComponent(rootIsLink.value ? "a" : "span"), mergeProps(rootAttrs.value, {
+			return openBlock(), createBlock(resolveDynamicComponent(rootIsLink.value ? linkRoot.value : "span"), mergeProps(rootAttrs.value, {
 				class: ["astryx-token", [`size-${props.size}`, {
 					"is-interactive": interactive.value,
 					"is-disabled": props.disabled
 				}]],
 				"data-color": props.color,
 				href: rootIsLink.value && !props.disabled ? props.href : void 0,
+				to: rootIsLink.value && !props.disabled && linkRoot.value !== "a" ? props.href : void 0,
 				"aria-disabled": props.disabled && (rootIsLink.value || actionIsLink.value) ? "true" : void 0,
 				"aria-label": props.labelHidden ? props.label : void 0,
 				"aria-description": props.description,
@@ -86,23 +92,32 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			}), {
 				default: withCtx(() => [
 					_ctx.$slots.icon ? (openBlock(), createElementBlock("span", _hoisted_1, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("v-if", true),
-					actionIsLink.value ? (openBlock(), createElementBlock("a", {
+					actionIsLink.value ? (openBlock(), createBlock(resolveDynamicComponent(actionIsLink.value ? linkRoot.value : "a"), {
 						key: 1,
 						class: "astryx-token-action",
 						href: props.disabled ? void 0 : props.href,
+						to: props.disabled || linkRoot.value === "a" ? void 0 : props.href,
 						"aria-disabled": props.disabled || void 0,
 						tabindex: props.disabled ? -1 : void 0
-					}, [createElementVNode("span", { class: normalizeClass(["astryx-token-label", { "is-hidden": props.labelHidden }]) }, toDisplayString(props.label), 3)], 8, _hoisted_2)) : actionIsButton.value ? (openBlock(), createElementBlock("button", {
+					}, {
+						default: withCtx(() => [createElementVNode("span", { class: normalizeClass(["astryx-token-label", { "is-hidden": props.labelHidden }]) }, toDisplayString(props.label), 3)]),
+						_: 1
+					}, 8, [
+						"href",
+						"to",
+						"aria-disabled",
+						"tabindex"
+					])) : actionIsButton.value ? (openBlock(), createElementBlock("button", {
 						key: 2,
 						type: "button",
 						class: "astryx-token-action",
 						disabled: props.disabled,
 						onClick: runClick
-					}, [createElementVNode("span", { class: normalizeClass(["astryx-token-label", { "is-hidden": props.labelHidden }]) }, toDisplayString(props.label), 3)], 8, _hoisted_3)) : (openBlock(), createElementBlock("span", {
+					}, [createElementVNode("span", { class: normalizeClass(["astryx-token-label", { "is-hidden": props.labelHidden }]) }, toDisplayString(props.label), 3)], 8, _hoisted_2)) : (openBlock(), createElementBlock("span", {
 						key: 3,
 						class: normalizeClass(["astryx-token-label", { "is-hidden": props.labelHidden }])
 					}, toDisplayString(props.label), 3)),
-					renderSlot(_ctx.$slots, "end"),
+					renderSlot(_ctx.$slots, "end", {}, () => [renderSlot(_ctx.$slots, "endContent")]),
 					props.removable ? (openBlock(), createElementBlock("button", {
 						key: 4,
 						type: "button",
@@ -121,13 +136,14 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						stroke: "currentColor",
 						"stroke-width": "1.5",
 						"stroke-linecap": "round"
-					})], -1)])], 8, _hoisted_4)) : createCommentVNode("v-if", true)
+					})], -1)])], 8, _hoisted_3)) : createCommentVNode("v-if", true)
 				]),
 				_: 3
 			}, 16, [
 				"class",
 				"data-color",
 				"href",
+				"to",
 				"aria-disabled",
 				"aria-label",
 				"aria-description",

package/dist/Tokenizer/index.d.ts

@@ -1,2 +1,2 @@
-import { a as TokenizerProps, c as TokenizerStatus, i as TokenizerOverflow, n as TokenizerChange, o as TokenizerSize, r as TokenizerEmits, s as TokenizerSlots, t as _default } from "../index-FEy8qFSD.js";
+import { a as TokenizerProps, c as TokenizerStatus, i as TokenizerOverflow, n as TokenizerChange, o as TokenizerSize, r as TokenizerEmits, s as TokenizerSlots, t as _default } from "../index-ClNU2Th8.js";
 export { _default as Tokenizer, type TokenizerChange, type TokenizerEmits, type TokenizerOverflow, type TokenizerProps, type TokenizerSize, type TokenizerSlots, type TokenizerStatus };

package/dist/Tokenizer/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Tokenizer-rwzamZg4.js";
+import { t as _sfc_main } from "../Tokenizer-B5C_qY7t.js";
 export { _sfc_main as Tokenizer };