sard 1.0.29 → 1.2.0

package/components/descriptions/descriptions-item.vue.js

@@ -1,9 +1,7 @@
 import { createBem } from "../../utils/bem.js";
 import { defaultDescriptionsItemProps, descriptionsContextKey } from "./common.js";
-import { Fragment, computed, createElementBlock, createElementVNode, createTextVNode, defineComponent, inject, mergeDefaults, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString } from "vue";
+import { Fragment, computed, createElementBlock, createElementVNode, createTextVNode, defineComponent, inject, mergeDefaults, normalizeClass, normalizeStyle, onUnmounted, openBlock, renderSlot, toDisplayString } from "vue";
 //#region packages/sard/components/descriptions/descriptions-item.vue
-const _hoisted_1 = ["rowspan"];
-const _hoisted_2 = ["colspan", "rowspan"];
 var descriptions_item_default = /*@__PURE__*/ defineComponent({
 	__name: "descriptions-item",
 	props: /*@__PURE__*/ mergeDefaults({
@@ -19,17 +17,9 @@ var descriptions_item_default = /*@__PURE__*/ defineComponent({
 			type: Number,
 			required: false
 		},
-		labelWidth: {
-			type: String,
-			required: false
-		},
 		labelAlign: {
 			type: String,
 			required: false
-		},
-		contentColspan: {
-			type: Number,
-			required: false
 		}
 	}, defaultDescriptionsItemProps),
 	setup(__props) {
@@ -39,15 +29,27 @@ var descriptions_item_default = /*@__PURE__*/ defineComponent({
 		if (!context) throw new Error("DescriptionsItem must be included in Descriptions.");
 		const colspan = computed(() => props.colspan ?? 1);
 		const rowspan = computed(() => props.rowspan ?? 1);
-		const contentColspan = computed(() => props.contentColspan ?? colspan.value * 2 - 1);
-		const effectiveLabelWidth = computed(() => props.labelWidth ?? context.labelWidth);
+		const meta = {
+			colspan: () => colspan.value,
+			rowspan: () => rowspan.value
+		};
+		onUnmounted(context.registerItem(meta));
+		const contentSpan = computed(() => {
+			return context.getContentSpan(meta) ?? colspan.value * 2 - 1;
+		});
 		const effectiveLabelAlign = computed(() => props.labelAlign ?? context.labelAlign);
 		const labelStyle = computed(() => {
 			const style = {};
-			if (effectiveLabelWidth.value) style.width = effectiveLabelWidth.value;
+			if (context.labelWidth) style.width = context.labelWidth;
 			if (effectiveLabelAlign.value) style.textAlign = effectiveLabelAlign.value;
+			if (rowspan.value > 1) style.gridRow = `span ${rowspan.value}`;
 			return Object.keys(style).length ? style : void 0;
 		});
+		const contentStyle = computed(() => {
+			const style = { "--s-descriptions-content-span": String(contentSpan.value) };
+			if (rowspan.value > 1) style.gridRow = `span ${rowspan.value}`;
+			return style;
+		});
 		const labelCellClass = computed(() => {
 			return [
 				bem.e("item-label"),
@@ -59,16 +61,13 @@ var descriptions_item_default = /*@__PURE__*/ defineComponent({
 			return [bem.e("item-content"), bem.is("bordered", context.bordered)];
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("td", {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("div", {
 				class: normalizeClass(labelCellClass.value),
-				colspan: "1",
-				rowspan: rowspan.value,
 				style: normalizeStyle(labelStyle.value)
-			}, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 14, _hoisted_1), createElementVNode("td", {
+			}, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 6), createElementVNode("div", {
 				class: normalizeClass(contentCellClass.value),
-				colspan: contentColspan.value,
-				rowspan: rowspan.value
-			}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_2)], 64);
+				style: normalizeStyle(contentStyle.value)
+			}, [renderSlot(_ctx.$slots, "default")], 6)], 64);
 		};
 	}
 });

package/components/descriptions/descriptions.vue.js

@@ -1,7 +1,6 @@
 import { createBem } from "../../utils/bem.js";
-import { flatVNode } from "../../utils/vnode.js";
 import { defaultDescriptionsProps, descriptionsContextKey } from "./common.js";
-import { Fragment, cloneVNode, computed, createBlock, createElementBlock, createElementVNode, defineComponent, mergeDefaults, normalizeClass, openBlock, provide, reactive, renderList, resolveDynamicComponent, toRef, useSlots } from "vue";
+import { computed, createElementBlock, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, provide, reactive, ref, renderSlot, toRef } from "vue";
 //#region packages/sard/components/descriptions/descriptions.vue
 var descriptions_default = /*@__PURE__*/ defineComponent({
 	__name: "descriptions",
@@ -30,24 +29,36 @@ var descriptions_default = /*@__PURE__*/ defineComponent({
 	setup(__props) {
 		const props = __props;
 		const bem = createBem("descriptions");
-		provide(descriptionsContextKey, reactive({
-			bordered: toRef(() => props.bordered),
-			colon: toRef(() => props.colon),
-			labelWidth: toRef(() => props.labelWidth),
-			labelAlign: toRef(() => props.labelAlign)
-		}));
-		const slots = useSlots();
 		const columns = computed(() => props.columns ?? 1);
-		const rows = computed(() => {
-			if (!slots.default) return [];
-			const children = flatVNode(slots.default());
+		const items = [];
+		const registeredVersion = ref(0);
+		function registerItem(meta) {
+			items.push(meta);
+			registeredVersion.value++;
+			return () => {
+				const index = items.indexOf(meta);
+				if (index !== -1) {
+					items.splice(index, 1);
+					registeredVersion.value++;
+				}
+			};
+		}
+		/**
+		* 计算每个描述项内容格的列跨度。
+		* 一个描述项占 `colspan * 2` 列（标签 1 列 + 内容 `colspan * 2 - 1` 列），
+		* 最后一项的内容会填满当前行剩余列。
+		*/
+		const contentSpans = computed(() => {
+			registeredVersion.value;
+			const spans = /* @__PURE__ */ new Map();
+			const columnCount = columns.value;
 			const result = [];
 			let temp = [];
-			let count = columns.value;
+			let count = columnCount;
 			const rowspanTemp = [];
-			children.forEach((node, index) => {
-				const nodeColspan = node.props?.colspan ?? 1;
-				const nodeRowspan = node.props?.rowspan ?? 1;
+			items.forEach((meta, index) => {
+				const nodeColspan = meta.colspan();
+				const nodeRowspan = meta.rowspan();
 				let rowNo = result.length;
 				rowspanTemp[rowNo] ||= 0;
 				if (nodeRowspan > 1) for (let i = 1; i < nodeRowspan; i++) {
@@ -60,28 +71,42 @@ var descriptions_default = /*@__PURE__*/ defineComponent({
 					if (count <= 0) {
 						result.push(temp);
 						temp = [];
-						count = columns.value;
+						count = columnCount;
 						rowNo++;
 					}
 				}
-				if (index === children.length - 1) {
-					temp.push(cloneVNode(node, { contentColspan: nodeColspan < count ? count * 2 - 1 : void 0 }));
+				if (index === items.length - 1) {
+					spans.set(meta, (nodeColspan < count ? count : nodeColspan) * 2 - 1);
+					temp.push(index);
 					result.push(temp);
 					return;
 				}
 				if (nodeColspan < count) {
 					count -= nodeColspan;
-					temp.push(node);
+					spans.set(meta, nodeColspan * 2 - 1);
+					temp.push(index);
 				} else {
 					const span = Math.min(nodeColspan, count);
-					temp.push(cloneVNode(node, { contentColspan: span === nodeColspan ? void 0 : span * 2 - 1 }));
+					spans.set(meta, span * 2 - 1);
+					temp.push(index);
 					result.push(temp);
-					count = columns.value;
+					count = columnCount;
 					temp = [];
 				}
 			});
-			return result;
+			return spans;
 		});
+		function getContentSpan(meta) {
+			return contentSpans.value.get(meta);
+		}
+		provide(descriptionsContextKey, reactive({
+			bordered: toRef(() => props.bordered),
+			colon: toRef(() => props.colon),
+			labelWidth: toRef(() => props.labelWidth),
+			labelAlign: toRef(() => props.labelAlign),
+			registerItem,
+			getContentSpan
+		}));
 		const descriptionsClass = computed(() => {
 			return [
 				bem.b(),
@@ -89,12 +114,15 @@ var descriptions_default = /*@__PURE__*/ defineComponent({
 				bem.has("colon", props.colon)
 			];
 		});
+		const descriptionsStyle = computed(() => {
+			const labelWidth = props.labelWidth;
+			return { gridTemplateColumns: labelWidth ? `repeat(${columns.value}, ${labelWidth} minmax(0, 1fr))` : `repeat(${columns.value * 2}, minmax(0, 1fr))` };
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("table", { class: normalizeClass(descriptionsClass.value) }, [createElementVNode("tbody", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(rows.value, (row, rowIndex) => {
-				return openBlock(), createElementBlock("tr", { key: rowIndex }, [(openBlock(true), createElementBlock(Fragment, null, renderList(row, (child, colIndex) => {
-					return openBlock(), createBlock(resolveDynamicComponent(child), { key: colIndex });
-				}), 128))]);
-			}), 128))])], 2);
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(descriptionsClass.value),
+				style: normalizeStyle(descriptionsStyle.value)
+			}, [renderSlot(_ctx.$slots, "default")], 6);
 		};
 	}
 });

package/components/descriptions/index.css

@@ -1 +1 @@
-:root{--s-descriptions-label-color:var(--s-text-color-tertiary);--s-descriptions-label-font-size:var(--s-font-size);--s-descriptions-label-bg:var(--s-fill-color-fourth);--s-descriptions-content-color:var(--s-text-color-primary);--s-descriptions-content-font-size:var(--s-font-size);--s-descriptions-item-padding-y:var(--s-size-xs);--s-descriptions-item-padding-x:var(--s-size-sm);--s-descriptions-border-color:var(--s-border-color)}.s-descriptions{width:100%;table-layout:fixed;border-collapse:collapse}.s-descriptions__item-label{padding-bottom:var(--s-descriptions-item-padding-y);padding-inline-end:var(--s-descriptions-item-padding-x);color:var(--s-descriptions-label-color);font-size:var(--s-descriptions-label-font-size);word-break:break-word}.s-descriptions__item-label:is(.is-bordered){padding:var(--s-descriptions-item-padding-y) var(--s-descriptions-item-padding-x);border:var(--s-border-width) solid var(--s-descriptions-border-color);background:var(--s-descriptions-label-bg)}.s-descriptions__item-label:is(.has-colon)::after{content:":"}.s-descriptions__item-content{padding-bottom:var(--s-descriptions-item-padding-y)}.s-descriptions__item-content:not(:last-child){padding-inline-end:var(--s-descriptions-item-padding-x)}.s-descriptions__item-content{color:var(--s-descriptions-content-color);font-size:var(--s-descriptions-content-font-size);word-break:break-word}.s-descriptions__item-content:is(.is-bordered){padding:var(--s-descriptions-item-padding-y) var(--s-descriptions-item-padding-x);border:var(--s-border-width) solid var(--s-descriptions-border-color)}.s-descriptions tr:last-child .s-descriptions__item-label:not(.is-bordered),.s-descriptions tr:last-child .s-descriptions__item-content:not(.is-bordered){padding-bottom:0}
+:root{--s-descriptions-label-color:var(--s-text-color-tertiary);--s-descriptions-label-font-size:var(--s-font-size);--s-descriptions-label-bg:var(--s-fill-color-fourth);--s-descriptions-content-color:var(--s-text-color-primary);--s-descriptions-content-font-size:var(--s-font-size);--s-descriptions-item-padding-y:var(--s-size-xs);--s-descriptions-item-padding-x:var(--s-size-sm);--s-descriptions-border-color:var(--s-border-color)}.s-descriptions{display:grid;width:100%;column-gap:var(--s-descriptions-item-padding-x);row-gap:var(--s-descriptions-item-padding-y)}.s-descriptions:is(.is-bordered){column-gap:0;row-gap:0;border-block-start:var(--s-border-width) solid var(--s-descriptions-border-color);border-inline-start:var(--s-border-width) solid var(--s-descriptions-border-color)}.s-descriptions__item-label{color:var(--s-descriptions-label-color);font-size:var(--s-descriptions-label-font-size);word-break:break-word}.s-descriptions__item-label:is(.is-bordered){padding:var(--s-descriptions-item-padding-y) var(--s-descriptions-item-padding-x);border-inline-end:var(--s-border-width) solid var(--s-descriptions-border-color);border-block-end:var(--s-border-width) solid var(--s-descriptions-border-color);background:var(--s-descriptions-label-bg)}.s-descriptions__item-label:is(.has-colon)::after{content:":"}.s-descriptions__item-content{grid-column:span var(--s-descriptions-content-span, 1);color:var(--s-descriptions-content-color);font-size:var(--s-descriptions-content-font-size);word-break:break-word}.s-descriptions__item-content:is(.is-bordered){padding:var(--s-descriptions-item-padding-y) var(--s-descriptions-item-padding-x);border-inline-end:var(--s-border-width) solid var(--s-descriptions-border-color);border-block-end:var(--s-border-width) solid var(--s-descriptions-border-color)}

package/components/dialog/common.d.ts

@@ -1,6 +1,6 @@
 import { type DefaultProps } from '../config';
 import { type ButtonProps } from '../button';
-import type { MotionEmits } from '../motion';
+import type { MotionEmits } from '../motion/common';
 export type DialogBeforeClose = (type: 'close' | 'cancel' | 'confirm', loading: {
     readonly cancel: boolean;
     readonly confirm: boolean;

package/components/dnd/dnd-item.vue.js

@@ -1,7 +1,6 @@
 import { createBem } from "../../utils/bem.js";
-import { OnlyChild } from "../../utils/vnode.js";
 import { dndContextKey, dndItemContextKey } from "./common.js";
-import { computed, createBlock, defineComponent, inject, normalizeClass, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, shallowRef, unref, watchPostEffect, withCtx } from "vue";
+import { computed, createElementBlock, defineComponent, inject, normalizeClass, onBeforeUnmount, onMounted, onUpdated, openBlock, provide, ref, renderSlot, shallowRef, useAttrs, useTemplateRef, watchPostEffect } from "vue";
 //#region packages/sard/components/dnd/dnd-item.vue
 var dnd_item_default = /*@__PURE__*/ defineComponent({
 	__name: "dnd-item",
@@ -14,9 +13,19 @@ var dnd_item_default = /*@__PURE__*/ defineComponent({
 		const bem = createBem("dnd-item");
 		const dndContext = inject(dndContextKey);
 		if (!dndContext) throw new Error("DndItem must be included in Dnd.");
+		const wrapperRef = useTemplateRef("wrapperRef");
 		const elRef = shallowRef(null);
-		const onUpdate = (el) => {
+		const attrs = useAttrs();
+		let forwardedClass = "";
+		const syncElRef = () => {
+			const wrapper = wrapperRef.value;
+			const el = wrapper?.firstElementChild ?? wrapper ?? null;
 			elRef.value = el;
+			if (!el) return;
+			const next = normalizeClass(attrs.class);
+			for (const name of forwardedClass.split(" ")) if (name) el.classList.remove(name);
+			for (const name of next.split(" ")) if (name) el.classList.add(name);
+			forwardedClass = next;
 		};
 		let dropItemInfo = null;
 		let currentIndex = -1;
@@ -26,8 +35,10 @@ var dnd_item_default = /*@__PURE__*/ defineComponent({
 			return elRef.value.getBoundingClientRect();
 		};
 		onMounted(() => {
+			syncElRef();
 			dndContext.addRectItem(getNodeRect);
 		});
+		onUpdated(syncElRef);
 		onBeforeUnmount(() => {
 			dndContext.removeRectItem(getNodeRect);
 		});
@@ -117,13 +128,12 @@ var dnd_item_default = /*@__PURE__*/ defineComponent({
 		});
 		__expose({});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(OnlyChild), {
+			return openBlock(), createElementBlock("span", {
+				ref_key: "wrapperRef",
+				ref: wrapperRef,
 				class: normalizeClass(dndItemClass.value),
-				onUpdate
-			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			}, 8, ["class"]);
+				style: { "display": "contents" }
+			}, [renderSlot(_ctx.$slots, "default")], 2);
 		};
 	}
 });

package/components/dnd/index.css

@@ -1 +1 @@
-.s-dnd-item{position:relative}.s-dnd-item--active{z-index:1;box-shadow:var(--s-box-shadow-secondary)}.s-dnd-item--passive{transition:transform var(--s-duration)}.s-dnd-handle{cursor:pointer;-webkit-user-select:none;user-select:none}.s-dnd-handle--dragging{touch-action:none}
+.s-dnd-item{border-radius:inherit}.s-dnd-item>*{position:relative}.s-dnd-item--active>*{z-index:1;box-shadow:var(--s-box-shadow-secondary)}.s-dnd-item--passive>*{transition:transform var(--s-duration)}.s-dnd-handle{cursor:pointer;-webkit-user-select:none;user-select:none}.s-dnd-handle--dragging{touch-action:none}

package/components/dropdown/common.d.ts

@@ -1,6 +1,6 @@
 import { type InjectionKey } from 'vue';
 import { type DefaultProps } from '../config';
-import type { MotionEmits } from '../motion';
+import type { MotionEmits } from '../motion/common';
 export interface DropdownProps {
     direction?: 'down' | 'up';
     disabled?: boolean;

package/components/ellipsis/ellipsis.vue.js

@@ -1,8 +1,9 @@
 import { createBem } from "../../utils/bem.js";
 import { useResizeObserver } from "../../use/useResizeObserver.js";
 import { defaultEllipsisProps } from "./common.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeDefaults, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, toDisplayString, unref, useModel, useTemplateRef, watch } from "vue";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, onMounted, openBlock, ref, toDisplayString, unref, useModel, useTemplateRef, watch } from "vue";
 //#region packages/sard/components/ellipsis/ellipsis.vue
+const HEIGHT_TOLERANCE = .5;
 var ellipsis_default = /*@__PURE__*/ defineComponent({
 	__name: "ellipsis",
 	props: /*@__PURE__*/ mergeDefaults({
@@ -40,6 +41,10 @@ var ellipsis_default = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const bem = createBem("ellipsis");
+		const measureClass = bem.e("measure");
+		const actionClass = bem.e("action");
+		/** 测量层里的按钮占位：只负责排版占位，不带 __action 类，避免同一个类名在 DOM 里出现两次 */
+		const measureActionClass = bem.e("measure-action");
 		const innerExpanded = useModel(props, "expanded");
 		const onToggle = () => {
 			const expanded = !innerExpanded.value;
@@ -53,58 +58,73 @@ var ellipsis_default = /*@__PURE__*/ defineComponent({
 			return innerExpanded.value ? props.collapseText : props.expandText;
 		});
 		const rootRef = useTemplateRef("root");
-		const fullRef = useTemplateRef("full");
-		const lineRef = useTemplateRef("line");
-		const calcRef = useTemplateRef("calc");
+		const measureRef = useTemplateRef("measure");
 		const isOverflow = ref(false);
 		const truncatedContent = ref(props.content);
-		const measureContent = ref(props.content);
 		const resizeWidth = ref(0);
-		const initialized = ref(false);
 		const isMeasuring = ref(true);
-		let updateToken = 0;
+		/** 一轮探测的判定容差（px） */
 		const getCharacters = (content) => {
 			return Array.from(content);
 		};
-		const buildEllipsisText = (content, keepCount, position, dots) => {
-			const characters = getCharacters(content);
-			if (keepCount >= characters.length) return content;
+		const buildEllipsisText = (characters, keepCount, position, dots) => {
+			const total = characters.length;
+			if (keepCount >= total) return characters.join("");
 			if (keepCount <= 0) return dots;
-			if (position === "start") return dots + characters.slice(characters.length - keepCount).join("");
+			if (position === "start") return dots + characters.slice(total - keepCount).join("");
 			if (position === "middle") {
 				const leftCount = Math.ceil(keepCount / 2);
 				const rightCount = Math.floor(keepCount / 2);
-				return characters.slice(0, leftCount).join("") + dots + characters.slice(characters.length - rightCount).join("");
+				return characters.slice(0, leftCount).join("") + dots + characters.slice(total - rightCount).join("");
 			}
 			return characters.slice(0, keepCount).join("") + dots;
 		};
-		const getHeight = (el) => {
-			return el.getBoundingClientRect().height;
-		};
-		const update = async () => {
-			const token = ++updateToken;
+		/**
+		* 测量层里的两个节点，挂载后建一次就复用。
+		* 不用模板声明是因为 `white-space: pre-wrap` 会把模板的换行缩进变成真实空格/空行，
+		* 量高度时全算进去。
+		*/
+		let measureText;
+		let measureAction;
+		function ensureMeasureDom(measure) {
+			if (measureText?.parentElement === measure) return;
+			measureText = document.createElement("span");
+			measureAction = document.createElement("span");
+			measureAction.className = measureActionClass;
+			measure.replaceChildren(measureText, measureAction);
+		}
+		/**
+		* 写入一轮要测量的内容。
+		* withAction 为 false 时把按钮藏起来，用来量「纯正文」到底占几行。
+		*/
+		function writeMeasure(text, withAction) {
+			if (!measureText || !measureAction) return;
+			measureText.textContent = text;
+			measureAction.textContent = ` ${props.expandText ?? ""}`;
+			measureAction.style.display = withAction && hasAction.value ? "" : "none";
+		}
+		const measureHeight = () => measureRef.value?.getBoundingClientRect().height ?? 0;
+		const update = () => {
 			const content = props.content || "";
+			const measure = measureRef.value;
+			if (!measure) return;
+			ensureMeasureDom(measure);
 			isMeasuring.value = true;
 			if (!content) {
-				truncatedContent.value = content;
-				measureContent.value = content;
+				truncatedContent.value = "";
 				isOverflow.value = false;
-				initialized.value = true;
-				if (token === updateToken) isMeasuring.value = false;
+				isMeasuring.value = false;
 				return;
 			}
-			measureContent.value = content;
-			await nextTick();
-			if (token !== updateToken) return;
-			const fullHeight = getHeight(fullRef.value);
-			const lineHeight = getHeight(lineRef.value);
-			if (token !== updateToken) return;
+			writeMeasure(content, false);
+			measure.style.whiteSpace = "nowrap";
+			const lineHeight = measureHeight();
+			measure.style.whiteSpace = "";
 			const clampHeight = lineHeight * props.rows;
-			if (!(fullHeight - clampHeight > .5)) {
+			if (measureHeight() - clampHeight <= HEIGHT_TOLERANCE) {
 				truncatedContent.value = content;
 				isOverflow.value = false;
-				initialized.value = true;
-				if (token === updateToken) isMeasuring.value = false;
+				isMeasuring.value = false;
 				return;
 			}
 			const characters = getCharacters(content);
@@ -113,23 +133,15 @@ var ellipsis_default = /*@__PURE__*/ defineComponent({
 			let best = 0;
 			while (low <= high) {
 				const middle = Math.floor((low + high) / 2);
-				const nextText = buildEllipsisText(content, middle, props.position, props.dots);
-				measureContent.value = nextText;
-				await nextTick();
-				if (token !== updateToken) return;
-				const height = getHeight(calcRef.value);
-				if (token !== updateToken) return;
-				if (height <= clampHeight + .5) {
+				writeMeasure(buildEllipsisText(characters, middle, props.position, props.dots), true);
+				if (measureHeight() <= clampHeight + HEIGHT_TOLERANCE) {
 					best = middle;
 					low = middle + 1;
 				} else high = middle - 1;
 			}
-			const nextTruncatedContent = buildEllipsisText(content, best, props.position, props.dots);
-			if (token !== updateToken) return;
-			truncatedContent.value = nextTruncatedContent;
+			truncatedContent.value = buildEllipsisText(characters, best, props.position, props.dots);
 			isOverflow.value = true;
-			initialized.value = true;
-			if (token === updateToken) isMeasuring.value = false;
+			isMeasuring.value = false;
 		};
 		useResizeObserver(rootRef, (size) => {
 			if (resizeWidth.value && Math.abs(size.width - resizeWidth.value) <= .5) return;
@@ -140,7 +152,8 @@ var ellipsis_default = /*@__PURE__*/ defineComponent({
 			() => props.content,
 			() => props.rows,
 			() => props.position,
-			() => props.dots
+			() => props.dots,
+			() => props.expandText
 		], () => {
 			update();
 		});
@@ -177,24 +190,15 @@ var ellipsis_default = /*@__PURE__*/ defineComponent({
 					style: normalizeStyle(contentStyle.value)
 				}, [createTextVNode(toDisplayString(displayContent.value) + " ", 1), showAction.value ? (openBlock(), createElementBlock("span", {
 					key: 0,
-					class: normalizeClass(unref(bem).e("action")),
+					class: normalizeClass(unref(actionClass)),
 					onClick: onToggle
 				}, toDisplayString(actionText.value), 3)) : createCommentVNode("v-if", true)], 6),
+				createCommentVNode(" 唯一的测量层：整段高度、单行高度、二分候选都在这一块里量。\n         内容是空的，两个 span（正文 + 展开按钮）由 JS 建、由 JS 直接改 textContent，\n         每轮探测只有「一次写入 + 一次读取」，不触发组件重渲染。\n         绝对定位 + contain，测量引起的布局失效既不会撑开可见布局，也不会传到祖先链。 "),
 				createElementVNode("div", {
-					ref: "full",
-					class: normalizeClass(unref(bem).e("measure"))
-				}, toDisplayString(props.content), 3),
-				createElementVNode("div", {
-					ref: "line",
-					class: normalizeClass([unref(bem).e("measure"), unref(bem).em("measure", "line")])
-				}, toDisplayString(props.content), 3),
-				createElementVNode("div", {
-					ref: "calc",
-					class: normalizeClass(unref(bem).e("measure"))
-				}, [createTextVNode(toDisplayString(measureContent.value) + " ", 1), hasAction.value ? (openBlock(), createElementBlock("span", {
-					key: 0,
-					class: normalizeClass(unref(bem).e("action"))
-				}, toDisplayString(props.expandText), 3)) : createCommentVNode("v-if", true)], 2)
+					ref: "measure",
+					class: normalizeClass(unref(measureClass)),
+					"aria-hidden": "true"
+				}, null, 2)
 			], 2);
 		};
 	}

package/components/ellipsis/index.css

@@ -1 +1 @@
-:root{--s-ellipsis-action-margin-start:var(--s-size-2xs);--s-ellipsis-action-color:var(--s-color-primary)}.s-ellipsis{position:relative}.s-ellipsis__content{display:block;white-space:pre-wrap;word-break:break-all}.s-ellipsis__content--clamp{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.s-ellipsis__action{position:relative;display:inline;margin-inline-start:var(--s-ellipsis-action-margin-start);color:var(--s-ellipsis-action-color);line-height:inherit;cursor:pointer;vertical-align:bottom;white-space:nowrap}.s-ellipsis__measure{position:absolute;display:block;left:0;top:0;z-index:-1;width:100%;opacity:0;pointer-events:none;white-space:pre-wrap;word-break:break-all}.s-ellipsis__measure--line{white-space:nowrap}
+:root{--s-ellipsis-action-margin-start:var(--s-size-2xs);--s-ellipsis-action-color:var(--s-color-primary)}.s-ellipsis{position:relative}.s-ellipsis__content{display:block;white-space:pre-wrap;word-break:break-all}.s-ellipsis__content--clamp{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.s-ellipsis__action{position:relative;display:inline;margin-inline-start:var(--s-ellipsis-action-margin-start);color:var(--s-ellipsis-action-color);line-height:inherit;cursor:pointer;vertical-align:bottom;white-space:nowrap}.s-ellipsis__measure-action{margin-inline-start:var(--s-ellipsis-action-margin-start);line-height:inherit;vertical-align:bottom;white-space:nowrap}.s-ellipsis__measure{position:absolute;display:block;left:0;top:0;z-index:-1;width:100%;opacity:0;pointer-events:none;white-space:pre-wrap;word-break:break-all;contain:layout style}

package/components/image/image.vue.d.ts

@@ -12,9 +12,9 @@ declare const __VLS_base: import("vue").DefineComponent<ImageProps, ImageExpose,
     width: string;
     height: string;
     background: string;
-    mode: import("./common").ImageMode;
     fade: boolean;
     loading: "eager" | "lazy";
+    mode: import("./common").ImageMode;
     shape: "circle" | "square";
     src: string;
     showError: boolean;

package/components/index.d.ts

@@ -26,6 +26,7 @@ export * from './cool-icon';
 export * from './count-down';
 export * from './count-to';
 export * from './crop-image';
+export * from './danmaku';
 export * from './date-strip';
 export * from './datetime-picker';
 export * from './datetime-picker-input';
@@ -113,6 +114,7 @@ export * from './table';
 export * from './tabs';
 export * from './tag';
 export * from './text';
+export * from './text-shrink';
 export * from './timeline';
 export * from './toast';
 export * from './tree';

package/components/index.js

@@ -36,6 +36,7 @@ import { CountDown } from "./count-down/index.js";
 import { CountTo } from "./count-to/index.js";
 import { createCropImage, cropImage } from "./crop-image/imperative.js";
 import { CropImage } from "./crop-image/index.js";
+import { Danmaku } from "./danmaku/index.js";
 import { DateStrip } from "./date-strip/index.js";
 import { DatetimePicker } from "./datetime-picker/index.js";
 import { DatetimePickerInput } from "./datetime-picker-input/index.js";
@@ -133,6 +134,7 @@ import { Table } from "./table/index.js";
 import { Tab, Tabs } from "./tabs/index.js";
 import { Tag } from "./tag/index.js";
 import { Text } from "./text/index.js";
+import { TextShrink } from "./text-shrink/index.js";
 import { Timeline, TimelineItem } from "./timeline/index.js";
 import { createToast, toast } from "./toast/imperative.js";
 import { Toast } from "./toast/index.js";
@@ -140,4 +142,4 @@ import { Tree, TreeBranch, TreeNode } from "./tree/index.js";
 import { Upload, UploadPreview } from "./upload/index.js";
 import { Waterfall, WaterfallItem, WaterfallLoad } from "./waterfall/index.js";
 import { Watermark } from "./watermark/index.js";
-export { ADD_SWIPER_CONTEXT_KEY, Accordion, AccordionItem, ActionSheet, ActionSheetItem, Alert, Avatar, AvatarGroup, BackTop, Badge, Barcode, Button, Calendar, CalendarInput, CalendarPopout, CancelError, Card, Cascader, CascaderInput, CascaderPopout, Checkbox, CheckboxGroup, CheckboxInput, CheckboxPopout, Col, Collapse, ColorPicker, ColorPickerInput, ColorPickerPopout, Compact, CoolIcon, CountDown, CountTo, CropImage, DateStrip, DatetimePicker, DatetimePickerInput, DatetimePickerPopout, DatetimeRangePicker, DatetimeRangePickerInput, DatetimeRangePickerPopout, Descriptions, DescriptionsItem, Dialog, Divider, Dnd, DndHandle, DndItem, Dropdown, DropdownItem, Ellipsis, Empty, Fab, FabItem, Flex, FloatingBubble, FloatingPanel, Form, FormItem, FormItemPlain, FormPlain, Grid, GridItem, Image, Indexes, IndexesAnchor, IndexesNav, Input, Keyboard, KeyboardPopout, List, ListItem, LoadMore, LoadMoreStatus, Loading, Marquee, Menu, MenuItem, Motion, Navbar, NavbarItem, NavbarPit, NoticeBar, Notify, Overlay, Pagination, PasswordInput, Picker, PickerInput, PickerPopout, PickerView, PickerViewColumn, Popout, PopoutInput, Popover, Popup, PreviewImage, ProgressBar, ProgressCircle, PullDownRefresh, PuzzleVerify, Qrcode, REMOVE_SWIPER_CONTEXT_KEY, Radio, RadioGroup, RadioInput, RadioPopout, Rate, ReadMore, Result, RotateVerify, Row, SWIPER_AUTO_HEIGHT_KEY, ScrollList, ScrollSpy, ScrollSpyAnchor, Search, Segmented, SegmentedItem, Select, SelectInput, SelectOption, SelectOptionGroup, SelectPopout, ShareSheet, ShareSheetIcon, ShareSheetItem, ShareSheetRow, Sidebar, SidebarItem, Signature, Skeleton, SkeletonAvatar, SkeletonBlock, SkeletonParagraph, SkeletonTitle, SlideVerify, Slider, StatusBar, Step, Stepper, Steps, Sticky, StickyBox, SwipeAction, Swiper, SwiperItem, Switch, Tab, Tabbar, TabbarItem, TabbarPit, Table, Tabs, Tag, Text, Timeline, TimelineItem, Toast, Tree, TreeBranch, TreeNode, Upload, UploadPreview, Waterfall, WaterfallItem, WaterfallLoad, Watermark, actionSheet, createActionSheet, createCropImage, createDialog, createNotify, createPreviewImage, createToast, cropImage, dialog, flexGap, formatTime, getCurrentTime, isCancelError, notify, omitFormPopoutProps, partitionPopoutInputProps, plateEnglishLetterKeys, plateProvinceKeys, plateSuffixKeys, popupManager, previewImage, safeAreaInsets, toast, useCountDown, useElementBackTop, useFormContext, useFormItem, useFormItemContext, useFormPopout, useInPopup, useMotioning, usePageBackTop, usePopoutInput, usePopupEnter, usePopupVisibleHookProvide, windowInfo };
+export { ADD_SWIPER_CONTEXT_KEY, Accordion, AccordionItem, ActionSheet, ActionSheetItem, Alert, Avatar, AvatarGroup, BackTop, Badge, Barcode, Button, Calendar, CalendarInput, CalendarPopout, CancelError, Card, Cascader, CascaderInput, CascaderPopout, Checkbox, CheckboxGroup, CheckboxInput, CheckboxPopout, Col, Collapse, ColorPicker, ColorPickerInput, ColorPickerPopout, Compact, CoolIcon, CountDown, CountTo, CropImage, Danmaku, DateStrip, DatetimePicker, DatetimePickerInput, DatetimePickerPopout, DatetimeRangePicker, DatetimeRangePickerInput, DatetimeRangePickerPopout, Descriptions, DescriptionsItem, Dialog, Divider, Dnd, DndHandle, DndItem, Dropdown, DropdownItem, Ellipsis, Empty, Fab, FabItem, Flex, FloatingBubble, FloatingPanel, Form, FormItem, FormItemPlain, FormPlain, Grid, GridItem, Image, Indexes, IndexesAnchor, IndexesNav, Input, Keyboard, KeyboardPopout, List, ListItem, LoadMore, LoadMoreStatus, Loading, Marquee, Menu, MenuItem, Motion, Navbar, NavbarItem, NavbarPit, NoticeBar, Notify, Overlay, Pagination, PasswordInput, Picker, PickerInput, PickerPopout, PickerView, PickerViewColumn, Popout, PopoutInput, Popover, Popup, PreviewImage, ProgressBar, ProgressCircle, PullDownRefresh, PuzzleVerify, Qrcode, REMOVE_SWIPER_CONTEXT_KEY, Radio, RadioGroup, RadioInput, RadioPopout, Rate, ReadMore, Result, RotateVerify, Row, SWIPER_AUTO_HEIGHT_KEY, ScrollList, ScrollSpy, ScrollSpyAnchor, Search, Segmented, SegmentedItem, Select, SelectInput, SelectOption, SelectOptionGroup, SelectPopout, ShareSheet, ShareSheetIcon, ShareSheetItem, ShareSheetRow, Sidebar, SidebarItem, Signature, Skeleton, SkeletonAvatar, SkeletonBlock, SkeletonParagraph, SkeletonTitle, SlideVerify, Slider, StatusBar, Step, Stepper, Steps, Sticky, StickyBox, SwipeAction, Swiper, SwiperItem, Switch, Tab, Tabbar, TabbarItem, TabbarPit, Table, Tabs, Tag, Text, TextShrink, Timeline, TimelineItem, Toast, Tree, TreeBranch, TreeNode, Upload, UploadPreview, Waterfall, WaterfallItem, WaterfallLoad, Watermark, actionSheet, createActionSheet, createCropImage, createDialog, createNotify, createPreviewImage, createToast, cropImage, dialog, flexGap, formatTime, getCurrentTime, isCancelError, notify, omitFormPopoutProps, partitionPopoutInputProps, plateEnglishLetterKeys, plateProvinceKeys, plateSuffixKeys, popupManager, previewImage, safeAreaInsets, toast, useCountDown, useElementBackTop, useFormContext, useFormItem, useFormItemContext, useFormPopout, useInPopup, useMotioning, usePageBackTop, usePopoutInput, usePopupEnter, usePopupVisibleHookProvide, windowInfo };

package/components/keyboard/keyboard.vue.d.ts

@@ -9,8 +9,8 @@ declare const __VLS_base: import("vue").DefineComponent<KeyboardProps, KeyBoardE
     onDelete?: (() => any) | undefined;
     "onUpdate:mode"?: ((mode: KeyboardPlateMode) => any) | undefined;
 }>, {
-    mode: KeyboardPlateMode;
     type: "number" | "digit" | "idcard" | "random" | "plate";
+    mode: KeyboardPlateMode;
     disabledKey: (key: string) => boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/components/keyboard-popout/common.d.ts

@@ -1,6 +1,6 @@
 import { type DefaultProps } from '../config';
 import { type KeyboardProps, type KeyboardPlateMode, type KeyBoardExpose } from '../keyboard/common';
-import type { MotionEmits } from '../motion';
+import type { MotionEmits } from '../motion/common';
 export interface KeyboardPopoutProps extends KeyboardProps {
     visible?: boolean;
     title?: string;

package/components/keyboard-popout/keyboard-popout.vue.d.ts

@@ -39,10 +39,10 @@ declare const __VLS_base: import("vue").DefineComponent<KeyboardPopoutProps, Key
     "onUpdate:mode"?: ((mode: import("../index.ts").KeyboardPlateMode) => any) | undefined;
 }>, {
     title: string;
-    mode: import("../index.ts").KeyboardPlateMode;
     type: "number" | "digit" | "idcard" | "random" | "plate";
     visible: boolean;
     transparent: boolean;
+    mode: import("../index.ts").KeyboardPlateMode;
     showCancel: boolean;
     showConfirm: boolean;
     showShadow: boolean;

package/components/list/index.css

@@ -1 +1 @@
-:root{--s-list-border-color:var(--s-border-color);--s-list-title-margin-x:var(--s-size);--s-list-title-margin-top:var(--s-size-2xl);--s-list-title-margin-bottom:var(--s-size-xs);--s-list-title-font-size:var(--s-font-size-sm);--s-list-title-line-height:var(--s-line-height-snug);--s-list-title-color:var(--s-text-color-tertiary);--s-list-description-margin-x:var(--s-size);--s-list-description-margin-top:var(--s-size-xs);--s-list-description-font-size:var(--s-font-size-sm);--s-list-description-line-height:var(--s-line-height-snug);--s-list-description-color:var(--s-text-color-tertiary);--s-list-card-border-radius:var(--s-border-radius-lg);--s-list-item-min-height:var(--s-content-height);--s-list-item-padding-x:var(--s-content-padding-x);--s-list-item-padding-y:var(--s-content-padding-y);--s-list-item-bg:var(--s-bg-color-container);--s-list-item-bg-active:var(--s-bg-color-active);--s-list-item-opacity-disabled:var(--s-opacity-disabled);--s-list-item-icon-size:var(--s-size-lg);--s-list-item-icon-margin-end:var(--s-size-sm);--s-list-item-title-font-size:var(--s-font-size);--s-list-item-title-line-height:var(--s-line-height-snug);--s-list-item-value-font-size:var(--s-font-size);--s-list-item-value-line-height:var(--s-line-height-snug);--s-list-item-value-color:var(--s-text-color-tertiary);--s-list-item-description-margin-top:var(--s-size-2xs);--s-list-item-description-font-size:var(--s-font-size-sm);--s-list-item-description-line-height:var(--s-line-height-snug);--s-list-item-description-color:var(--s-text-color-tertiary);--s-list-item-arrow-margin-start:var(--s-size-xs);--s-list-item-arrow-font-size:var(--s-font-size);--s-list-item-arrow-color:var(--s-text-color-tertiary);--s-list-divider-start:var(--s-list-item-padding-x);--s-list-divider-end:var(--s-list-item-padding-x)}.s-list__title{margin-inline-start:var(--s-list-title-margin-x);margin-inline-end:var(--s-list-title-margin-x);margin-top:var(--s-list-title-margin-top);margin-bottom:var(--s-list-title-margin-bottom);font-size:var(--s-list-title-font-size);line-height:var(--s-list-title-line-height);color:var(--s-list-title-color)}.s-list__content{position:relative}.s-list__content::before{position:absolute;top:0;left:0;z-index:1;width:200%;height:200%;border:var(--s-border-width) var(--s-border-style) rgba(0,0,0,0);transform:scale(0.5);transform-origin:0 0;pointer-events:none;touch-action:none;content:"";border-top-color:var(--s-list-border-color);border-bottom-color:var(--s-list-border-color)}.s-list--borderless .s-list__content::before{display:none}.s-list__description{margin-inline-start:var(--s-list-description-margin-x);margin-inline-end:var(--s-list-description-margin-x);margin-top:var(--s-list-description-margin-top);font-size:var(--s-list-description-font-size);line-height:var(--s-list-description-line-height);color:var(--s-list-description-color)}.s-list--card .s-list__content{border-radius:var(--s-list-card-border-radius)}.s-list--not-card .s-list__content{border-radius:0}.s-list--card .s-list__content::before,.s-list--inlaid .s-list__content::before{display:none}.s-list-item{position:relative;display:flex;flex-wrap:nowrap;overflow:hidden;min-height:var(--s-list-item-min-height);padding:var(--s-list-item-padding-y) var(--s-list-item-padding-x);background:var(--s-list-item-bg)}.s-list-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.s-list-item:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.s-list-item::before{position:absolute;z-index:1;pointer-events:none;touch-action:none;opacity:1;content:"";left:0;right:0;transform:scaleY(0.5);top:0;border-top:var(--s-border-width) var(--s-border-style) var(--s-border-color);transform-origin:top center;inset-inline-start:var(--s-list-divider-start);inset-inline-end:var(--s-list-divider-end)}.s-list-item--borderless::before{display:none}.s-list-item:first-child::before{display:none}.s-list-item--hover{cursor:pointer}.s-list-item--hover:active{background:var(--s-list-item-bg-active)}.s-list-item--custom{flex-direction:column}.s-list-item__icon{display:flex;justify-content:center;align-items:center;flex:none;margin-inline-end:var(--s-list-item-icon-margin-end);font-size:var(--s-list-item-icon-size)}.s-list-item__title{display:flex;flex-direction:column;justify-content:center;flex:auto;font-size:var(--s-list-item-title-font-size);line-height:var(--s-list-item-title-line-height);word-break:break-all}.s-list-item__description{margin-top:var(--s-list-item-description-margin-top);font-size:var(--s-list-item-description-font-size);line-height:var(--s-list-item-description-line-height);color:var(--s-list-item-description-color);word-break:break-all}.s-list-item__value{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;flex:auto;font-size:var(--s-list-item-value-font-size);line-height:var(--s-list-item-value-line-height);color:var(--s-list-item-value-color);text-align:right;word-break:break-all}.s-list-item__arrow{display:flex;align-items:center;justify-content:center;margin-inline-start:var(--s-list-item-arrow-margin-start);font-size:var(--s-list-item-arrow-font-size);color:var(--s-list-item-arrow-color)}:root[dir=rtl] .s-list-item__arrow{transform:scaleX(-1)}
+:root{--s-list-border-color:var(--s-border-color);--s-list-title-margin-x:var(--s-size);--s-list-title-margin-top:var(--s-size-2xl);--s-list-title-margin-bottom:var(--s-size-xs);--s-list-title-font-size:var(--s-font-size-sm);--s-list-title-line-height:var(--s-line-height-snug);--s-list-title-color:var(--s-text-color-tertiary);--s-list-description-margin-x:var(--s-size);--s-list-description-margin-top:var(--s-size-xs);--s-list-description-font-size:var(--s-font-size-sm);--s-list-description-line-height:var(--s-line-height-snug);--s-list-description-color:var(--s-text-color-tertiary);--s-list-card-border-radius:var(--s-border-radius-lg);--s-list-item-min-height:var(--s-content-height);--s-list-item-padding-x:var(--s-content-padding-x);--s-list-item-padding-y:var(--s-content-padding-y);--s-list-item-bg:var(--s-bg-color-container);--s-list-item-bg-active:var(--s-bg-color-active);--s-list-item-opacity-disabled:var(--s-opacity-disabled);--s-list-item-icon-size:var(--s-size-lg);--s-list-item-icon-margin-end:var(--s-size-sm);--s-list-item-title-font-size:var(--s-font-size);--s-list-item-title-line-height:var(--s-line-height-snug);--s-list-item-value-font-size:var(--s-font-size);--s-list-item-value-line-height:var(--s-line-height-snug);--s-list-item-value-color:var(--s-text-color-tertiary);--s-list-item-description-margin-top:var(--s-size-2xs);--s-list-item-description-font-size:var(--s-font-size-sm);--s-list-item-description-line-height:var(--s-line-height-snug);--s-list-item-description-color:var(--s-text-color-tertiary);--s-list-item-arrow-margin-start:var(--s-size-xs);--s-list-item-arrow-font-size:var(--s-font-size);--s-list-item-arrow-color:var(--s-text-color-tertiary);--s-list-divider-start:var(--s-list-item-padding-x);--s-list-divider-end:var(--s-list-item-padding-x)}.s-list__title{margin-inline-start:var(--s-list-title-margin-x);margin-inline-end:var(--s-list-title-margin-x);margin-top:var(--s-list-title-margin-top);margin-bottom:var(--s-list-title-margin-bottom);font-size:var(--s-list-title-font-size);line-height:var(--s-list-title-line-height);color:var(--s-list-title-color)}.s-list__content{position:relative}.s-list__content::before{position:absolute;top:0;left:0;z-index:1;width:200%;height:200%;border:var(--s-border-width) var(--s-border-style) rgba(0,0,0,0);transform:scale(0.5);transform-origin:0 0;pointer-events:none;touch-action:none;content:"";border-top-color:var(--s-list-border-color);border-bottom-color:var(--s-list-border-color)}.s-list__content>:not(.s-list-item)>.s-list-item{border-radius:0}.s-list__content>:not(.s-list-item)>.s-list-item:not(.s-list-item--borderless)::before{display:block}.s-list__content>:not(.s-list-item):first-child>.s-list-item{border-top-left-radius:inherit;border-top-right-radius:inherit}.s-list__content>:not(.s-list-item):first-child>.s-list-item::before{display:none}.s-list__content>:not(.s-list-item):last-child>.s-list-item{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.s-list--borderless .s-list__content::before{display:none}.s-list__description{margin-inline-start:var(--s-list-description-margin-x);margin-inline-end:var(--s-list-description-margin-x);margin-top:var(--s-list-description-margin-top);font-size:var(--s-list-description-font-size);line-height:var(--s-list-description-line-height);color:var(--s-list-description-color)}.s-list--card .s-list__content{border-radius:var(--s-list-card-border-radius)}.s-list--not-card .s-list__content{border-radius:0}.s-list--card .s-list__content::before,.s-list--inlaid .s-list__content::before{display:none}.s-list-item{position:relative;display:flex;flex-wrap:nowrap;overflow:hidden;min-height:var(--s-list-item-min-height);padding:var(--s-list-item-padding-y) var(--s-list-item-padding-x);background:var(--s-list-item-bg)}.s-list-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.s-list-item:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.s-list-item::before{position:absolute;z-index:1;pointer-events:none;touch-action:none;opacity:1;content:"";left:0;right:0;transform:scaleY(0.5);top:0;border-top:var(--s-border-width) var(--s-border-style) var(--s-border-color);transform-origin:top center;inset-inline-start:var(--s-list-divider-start);inset-inline-end:var(--s-list-divider-end)}.s-list-item--borderless::before{display:none}.s-list-item:first-child::before{display:none}.s-list-item--hover{cursor:pointer}.s-list-item--hover:active{background:var(--s-list-item-bg-active)}.s-list-item--custom{flex-direction:column}.s-list-item__icon{display:flex;justify-content:center;align-items:center;flex:none;margin-inline-end:var(--s-list-item-icon-margin-end);font-size:var(--s-list-item-icon-size)}.s-list-item__title{display:flex;flex-direction:column;justify-content:center;flex:auto;font-size:var(--s-list-item-title-font-size);line-height:var(--s-list-item-title-line-height);word-break:break-all}.s-list-item__description{margin-top:var(--s-list-item-description-margin-top);font-size:var(--s-list-item-description-font-size);line-height:var(--s-list-item-description-line-height);color:var(--s-list-item-description-color);word-break:break-all}.s-list-item__value{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;flex:auto;font-size:var(--s-list-item-value-font-size);line-height:var(--s-list-item-value-line-height);color:var(--s-list-item-value-color);text-align:right;word-break:break-all}.s-list-item__arrow{display:flex;align-items:center;justify-content:center;margin-inline-start:var(--s-list-item-arrow-margin-start);font-size:var(--s-list-item-arrow-font-size);color:var(--s-list-item-arrow-color)}:root[dir=rtl] .s-list-item__arrow{transform:scaleX(-1)}