@ultraviolet/ui 3.24.0 → 3.24.1

package/dist/components/Separator/styles.css.js

@@ -1,7 +1,8 @@
 import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
 import { init_styles_css_ts_vanilla } from "../Drawer/styles.css.ts.vanilla.js";
-import { init_styles_css_ts_vanilla as init_styles_css_ts_vanilla$1 } from "../Tag/styles.css.ts.vanilla.js";
-import { init_styles_css_ts_vanilla as init_styles_css_ts_vanilla$2 } from "./styles.css.ts.vanilla.js";
+import { init_styles_css_ts_vanilla as init_styles_css_ts_vanilla$1 } from "../TagList/styles.css.ts.vanilla.js";
+import { init_styles_css_ts_vanilla as init_styles_css_ts_vanilla$2 } from "../Tag/styles.css.ts.vanilla.js";
+import { init_styles_css_ts_vanilla as init_styles_css_ts_vanilla$3 } from "./styles.css.ts.vanilla.js";
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 
 //#region src/components/Separator/styles.css.ts
@@ -11,6 +12,7 @@ function init_styles_css() {
 		/* @__PURE__ */ init_styles_css_ts_vanilla();
 		/* @__PURE__ */ init_styles_css_ts_vanilla$1();
 		/* @__PURE__ */ init_styles_css_ts_vanilla$2();
+		/* @__PURE__ */ init_styles_css_ts_vanilla$3();
 		thicknessSeparator = "var(--uv_bu43fb0)";
 		separatorStyle = {
 			thicknessSeparator: "var(--uv_bu43fb0)",

package/dist/components/Tag/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/styles.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,UAAU,YAAI,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,CAAU,CAAA;AAuI9G,eAAO,MAAM,QAAQ;;;;;;wBAxGT,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwGmD,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/styles.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,UAAU,YAAI,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,CAAU,CAAA;AAgJ9G,eAAO,MAAM,QAAQ;;;;;;wBAxGT,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwGmD,CAAA"}

package/dist/components/Tag/styles.css.js

@@ -1,5 +1,6 @@
 import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
-import { init_styles_css_ts_vanilla } from "./styles.css.ts.vanilla.js";
+import { init_styles_css_ts_vanilla } from "../TagList/styles.css.ts.vanilla.js";
+import { init_styles_css_ts_vanilla as init_styles_css_ts_vanilla$1 } from "./styles.css.ts.vanilla.js";
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 
 //#region src/components/Tag/styles.css.ts
@@ -7,25 +8,26 @@ var tagStyle;
 function init_styles_css() {
 	return (init_styles_css = __esmMin(() => {
 		/* @__PURE__ */ init_styles_css_ts_vanilla();
+		/* @__PURE__ */ init_styles_css_ts_vanilla$1();
 		tagStyle = {
 			container: createRuntimeFn({
-				defaultClassName: "uv_d6zknp5",
+				defaultClassName: "uv_d6zknp6",
 				variantClassNames: {
-					copiable: { true: "uv_d6zknp6" },
-					disabled: { true: "uv_d6zknp7" },
-					closable: { true: "uv_d6zknp8" },
+					copiable: { true: "uv_d6zknp7" },
+					disabled: { true: "uv_d6zknp8" },
+					closable: { true: "uv_d6zknp9" },
 					sentiment: {
-						danger: "uv_d6zknp9",
-						info: "uv_d6zknpa",
-						neutral: "uv_d6zknpb",
-						primary: "uv_d6zknpc",
-						secondary: "uv_d6zknpd",
-						success: "uv_d6zknpe",
-						warning: "uv_d6zknpf"
+						danger: "uv_d6zknpa",
+						info: "uv_d6zknpb",
+						neutral: "uv_d6zknpc",
+						primary: "uv_d6zknpd",
+						secondary: "uv_d6zknpe",
+						success: "uv_d6zknpf",
+						warning: "uv_d6zknpg"
 					},
 					isButton: {
-						true: "uv_d6zknpg",
-						false: "uv_d6zknph"
+						true: "uv_d6zknph",
+						false: "uv_d6zknpi"
 					}
 				},
 				defaultVariants: {
@@ -40,111 +42,111 @@ function init_styles_css() {
 						copiable: true,
 						sentiment: "danger",
 						disabled: false
-					}, "uv_d6zknpi"],
+					}, "uv_d6zknpj"],
 					[{
 						copiable: true,
 						sentiment: "info",
 						disabled: false
-					}, "uv_d6zknpj"],
+					}, "uv_d6zknpk"],
 					[{
 						copiable: true,
 						sentiment: "neutral",
 						disabled: false
-					}, "uv_d6zknpk"],
+					}, "uv_d6zknpl"],
 					[{
 						copiable: true,
 						sentiment: "primary",
 						disabled: false
-					}, "uv_d6zknpl"],
+					}, "uv_d6zknpm"],
 					[{
 						copiable: true,
 						sentiment: "secondary",
 						disabled: false
-					}, "uv_d6zknpm"],
+					}, "uv_d6zknpn"],
 					[{
 						copiable: true,
 						sentiment: "success",
 						disabled: false
-					}, "uv_d6zknpn"],
+					}, "uv_d6zknpo"],
 					[{
 						copiable: true,
 						sentiment: "warning",
 						disabled: false
-					}, "uv_d6zknpo"],
+					}, "uv_d6zknpp"],
 					[{
 						disabled: true,
 						sentiment: "danger"
-					}, "uv_d6zknpp"],
+					}, "uv_d6zknpq"],
 					[{
 						disabled: true,
 						sentiment: "info"
-					}, "uv_d6zknpq"],
+					}, "uv_d6zknpr"],
 					[{
 						disabled: true,
 						sentiment: "neutral"
-					}, "uv_d6zknpr"],
+					}, "uv_d6zknps"],
 					[{
 						disabled: true,
 						sentiment: "primary"
-					}, "uv_d6zknps"],
+					}, "uv_d6zknpt"],
 					[{
 						disabled: true,
 						sentiment: "secondary"
-					}, "uv_d6zknpt"],
+					}, "uv_d6zknpu"],
 					[{
 						disabled: true,
 						sentiment: "success"
-					}, "uv_d6zknpu"],
+					}, "uv_d6zknpv"],
 					[{
 						disabled: true,
 						sentiment: "warning"
-					}, "uv_d6zknpv"],
+					}, "uv_d6zknpw"],
 					[{
 						isButton: true,
 						sentiment: "danger",
 						disabled: false
-					}, "uv_d6zknpw"],
+					}, "uv_d6zknpx"],
 					[{
 						isButton: true,
 						sentiment: "info",
 						disabled: false
-					}, "uv_d6zknpx"],
+					}, "uv_d6zknpy"],
 					[{
 						isButton: true,
 						sentiment: "neutral",
 						disabled: false
-					}, "uv_d6zknpy"],
+					}, "uv_d6zknpz"],
 					[{
 						isButton: true,
 						sentiment: "primary",
 						disabled: false
-					}, "uv_d6zknpz"],
+					}, "uv_d6zknp10"],
 					[{
 						isButton: true,
 						sentiment: "secondary",
 						disabled: false
-					}, "uv_d6zknp10"],
+					}, "uv_d6zknp11"],
 					[{
 						isButton: true,
 						sentiment: "success",
 						disabled: false
-					}, "uv_d6zknp11"],
+					}, "uv_d6zknp12"],
 					[{
 						isButton: true,
 						sentiment: "warning",
 						disabled: false
-					}, "uv_d6zknp12"]
+					}, "uv_d6zknp13"]
 				]
 			}),
-			text: "uv_d6zknp13",
-			separator: "uv_d6zknp2",
+			text: "uv_d6zknp14",
+			separator: "uv_d6zknp3",
 			wrapper: {
-				copiable: "uv_d6zknp0",
-				notCopiable: "uv_d6zknp1"
+				copiable: "uv_d6zknp1 uv_d6zknp0",
+				notCopiable: "uv_d6zknp2 uv_d6zknp0"
 			},
 			content: {
-				copiable: "uv_d6zknp3",
-				notCopiable: "uv_d6zknp4"
+				copiable: "uv_d6zknp4",
+				notCopiable: "uv_d6zknp5"
 			}
 		};
 	}))();

package/dist/components/TagList/constant.d.ts

@@ -1,4 +1,4 @@
-export declare const TAGS_GAP: string;
+export declare const TAGS_GAP_PX = 4;
 export declare const DEFAULT_POPOVER_MAX_HEIGHT = "16rem";
-export declare const MIN_TAG_WIDTH = 32;
+export declare const MIN_TAG_WIDTH_PX = 32;
 //# sourceMappingURL=constant.d.ts.map

package/dist/components/TagList/constant.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constant.d.ts","sourceRoot":"","sources":["../../../src/components/TagList/constant.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,QAA+B,CAAA;AAEpD,eAAO,MAAM,0BAA0B,UAAU,CAAA;AACjD,eAAO,MAAM,aAAa,KAAK,CAAA"}
+{"version":3,"file":"constant.d.ts","sourceRoot":"","sources":["../../../src/components/TagList/constant.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,IAAI,CAAA;AAE5B,eAAO,MAAM,0BAA0B,UAAU,CAAA;AACjD,eAAO,MAAM,gBAAgB,KAAK,CAAA"}

package/dist/components/TagList/constant.js

@@ -1,15 +1,13 @@
 import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
-import { consoleLightTheme } from "@ultraviolet/themes";
 
 //#region src/components/TagList/constant.ts
-var TAGS_GAP, DEFAULT_POPOVER_MAX_HEIGHT;
+var DEFAULT_POPOVER_MAX_HEIGHT;
 function init_constant() {
 	return (init_constant = __esmMin(() => {
-		TAGS_GAP = consoleLightTheme.space["1"];
 		DEFAULT_POPOVER_MAX_HEIGHT = "16rem";
 	}))();
 }
 
 //#endregion
 init_constant();
-export { DEFAULT_POPOVER_MAX_HEIGHT, TAGS_GAP, init_constant };
+export { DEFAULT_POPOVER_MAX_HEIGHT, init_constant };

package/dist/components/TagList/index.d.ts

@@ -12,21 +12,20 @@ type TagIcon = {
 export type TagType = string | TagKeyValue | TagIcon;
 type TagListProps = {
     /**
-     * This property define maximum characters length of all tags until it hide tags into tooltip.
+     * Maximum character length of all tags before hiding them into a popover.
      */
     maxLength?: number;
     tags?: TagType[];
     /**
-     * This property define maximum characters length of all tags until it hide tags into tooltip.
-     * NB: this will be overridden if the parent width is smaller and cannot show all the tags
+     * Maximum number of tags to display before hiding them in a popover.
      */
     threshold?: number;
     /**
-     * This property define maximum width of each tag. This doesn't apply for tags in tooltip.
+     * Wrap the tags on multiple lines instead of containing them on the first one.
      */
     multiline?: boolean;
     /**
-     * This property define the title of the Popover, when some tags are hidden because of the threshold.
+     * Title of the Popover added when some tags are hidden because of the `threshold` or `maxLength` properties.
      */
     popoverTitle: string;
     /**
@@ -35,7 +34,8 @@ type TagListProps = {
      */
     popoverPlacement?: ComponentProps<typeof Popover>['placement'];
     /**
-     * The popover maxHeight, defaults to 12.5rem
+     * The popover maxHeight
+     * @default 12.5rem
      */
     popoverMaxHeight?: ComponentProps<typeof Popover>['maxHeight'];
     className?: string;

package/dist/components/TagList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagList/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAI5B,KAAK,WAAW,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AACjD,KAAK,OAAO,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,SAAS,CAAA;CAAE,CAAA;AACjD,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,OAAO,CAAA;AAEpD,KAAK,YAAY,GAAG;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,EAAE,CAAA;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC,WAAW,CAAC,CAAA;IAC9D;;OAEG;IACH,gBAAgB,CAAC,EAAE,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC,WAAW,CAAC,CAAA;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,WAAW,CAAC,CAAA;gCAyB9E,EACtB,SAAe,EACf,IAAmB,EACnB,SAAa,EACb,SAAiB,EACjB,YAAY,EACZ,gBAAgB,EAChB,gBAA6C,EAC7C,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,SAAqB,EACrB,OAAmB,EACnB,SAAS,EACT,aAAa,EAAE,UAAU,EACzB,KAAK,GACN,EAAE,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagList/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAI5B,KAAK,WAAW,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AACjD,KAAK,OAAO,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,SAAS,CAAA;CAAE,CAAA;AACjD,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,OAAO,CAAA;AAEpD,KAAK,YAAY,GAAG;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,EAAE,CAAA;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC,WAAW,CAAC,CAAA;IAC9D;;;OAGG;IACH,gBAAgB,CAAC,EAAE,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC,WAAW,CAAC,CAAA;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,WAAW,CAAC,CAAA;gCAyB9E,EACtB,SAAe,EACf,IAAmB,EACnB,SAAa,EACb,SAAiB,EACjB,YAAY,EACZ,gBAAgB,EAChB,gBAA6C,EAC7C,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,SAAqB,EACrB,OAAmB,EACnB,SAAS,EACT,aAAa,EAAE,UAAU,EACzB,KAAK,GACN,EAAE,YAAY"}

package/dist/components/TagList/index.js

@@ -1,13 +1,12 @@
 'use client';
 import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
 import _objectSpread2, { init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/objectSpread2.js";
-import { init_styles_css, popoverTriggerWidthVar, tagListStyle } from "./styles.css.js";
+import { init_styles_css, tagListStyle } from "./styles.css.js";
 import { Tag, init_Tag } from "../Tag/index.js";
 import { Popover, init_Popover } from "../Popover/index.js";
-import { DEFAULT_POPOVER_MAX_HEIGHT, TAGS_GAP, init_constant } from "./constant.js";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { DEFAULT_POPOVER_MAX_HEIGHT, init_constant } from "./constant.js";
+import { createElement, useEffect, useMemo, useRef, useState } from "react";
 import { cn } from "@ultraviolet/utils";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/TagList/index.tsx
@@ -28,142 +27,93 @@ function init_TagList() {
 			return tag;
 		};
 		TagList = ({ maxLength = 600, tags = DEFAULT_TAGS, threshold = 1, multiline = false, popoverTitle, popoverPlacement, popoverMaxHeight = DEFAULT_POPOVER_MAX_HEIGHT, copiable, copyText, copiedText, sentiment = "neutral", variant = "default", className, "data-testid": dataTestId, style }) => {
-			var _containerRef$current3;
-			var _containerRef$current6;
 			const containerRef = useRef(null);
 			const measureRef = useRef(null);
 			const popoverTriggerRef = useRef(null);
-			const [isReady, setIsReady] = useState(false);
 			const [isPopoverVisible, setIsPopoverVisible] = useState(false);
-			const [popoverTriggerWidth, setPopoverTriggerWidth] = useState(0);
-			const [visibleTags, setVisibleTags] = useState([]);
+			const [visibleTags, setVisibleTags] = useState([tags[0]]);
 			const [hiddenTags, setHiddenTags] = useState([]);
-			const { tmpThreshold, potentiallyVisibleTags, surelyHiddenTags } = useMemo(() => {
-				let tmpThreshold = threshold;
-				while (tmpThreshold > 1 && tags.length > 0 && tags.slice(0, tmpThreshold).reduce((acc, tag) => acc + getTagLabel(tag), "").length > maxLength) tmpThreshold -= 1;
-				const potentiallyVisibleTagsLength = Math.max(1, tags.length > tmpThreshold ? tmpThreshold : tags.length);
-				return {
-					potentiallyVisibleTags: tags.slice(0, potentiallyVisibleTagsLength),
-					surelyHiddenTags: tags.slice(potentiallyVisibleTagsLength),
-					tmpThreshold
-				};
+			const [potentiallyVisibleTags, surelyHiddenTags] = useMemo(() => {
+				if (tags.length === 0) return [[], []];
+				const limit = Math.min(threshold, tags.length);
+				let visibleCount = 0;
+				let currentLength = 0;
+				for (let i = 0; i < limit; i++) {
+					currentLength += getTagLabel(tags[i]).length;
+					if (currentLength > maxLength) break;
+					visibleCount++;
+				}
+				visibleCount = Math.max(visibleCount, 1);
+				return [tags.slice(0, visibleCount), tags.slice(visibleCount)];
 			}, [
 				maxLength,
 				tags,
 				threshold
 			]);
 			useEffect(() => {
-				var _containerRef$current;
-				var _containerRef$current2;
 				if (tags.length === 0 || !containerRef.current || !measureRef.current) return;
-				if (multiline) {
+				if (multiline || typeof ResizeObserver === "undefined") {
 					setVisibleTags(potentiallyVisibleTags);
 					setHiddenTags(surelyHiddenTags);
-					setIsReady(true);
 					return;
 				}
-				const parentWidth = ((_containerRef$current = (_containerRef$current2 = containerRef.current.parentElement) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetWidth) !== null && _containerRef$current !== void 0 ? _containerRef$current : 0) - 32;
-				const { measuredVisibleTags, measuredHiddenTags } = [...measureRef.current.children[0].children].reduce((accumulator, currentValue, index) => {
-					const tagWidth = currentValue.offsetWidth;
-					const gap = index > 0 ? Number.parseInt(TAGS_GAP, 10) : 0;
-					const newAccumulatedWidth = accumulator.accumulatedWidth + tagWidth + gap;
-					if (accumulator.accumulatedWidth + 32 + gap <= parentWidth) return {
-						accumulatedWidth: newAccumulatedWidth,
-						measuredHiddenTags: accumulator.measuredHiddenTags,
-						measuredVisibleTags: [...accumulator.measuredVisibleTags, tags[index]]
-					};
-					return {
-						accumulatedWidth: accumulator.accumulatedWidth,
-						measuredHiddenTags: [...accumulator.measuredHiddenTags, tags[index]],
-						measuredVisibleTags: accumulator.measuredVisibleTags
-					};
-				}, {
-					accumulatedWidth: 0,
-					measuredHiddenTags: [],
-					measuredVisibleTags: []
-				});
-				const finalHiddenTags = [...measuredHiddenTags, ...surelyHiddenTags];
-				setVisibleTags(measuredVisibleTags);
-				setHiddenTags(finalHiddenTags);
-				if (finalHiddenTags.length === 0) setIsReady(true);
+				const handleResize = (entries) => {
+					if (!containerRef.current || !measureRef.current || !popoverTriggerRef.current) return;
+					const totalAvailableWidth = entries[0].contentBoxSize[0].inlineSize;
+					if (measureRef.current.offsetWidth < totalAvailableWidth) {
+						setVisibleTags(potentiallyVisibleTags);
+						setHiddenTags(surelyHiddenTags);
+						return;
+					}
+					const elementsToMeasure = [...measureRef.current.children[0].children];
+					const counterWidth = popoverTriggerRef.current.offsetWidth;
+					let visibleTagsCount = 0;
+					let visibleTagsWidth = 0;
+					for (let i = 0; i < potentiallyVisibleTags.length; i++) {
+						if (i > 0) visibleTagsWidth += 4;
+						visibleTagsWidth += elementsToMeasure[i].offsetWidth;
+						const availableWidth = i < tags.length - 1 ? totalAvailableWidth - counterWidth : totalAvailableWidth;
+						if (visibleTagsWidth > availableWidth) break;
+						visibleTagsCount++;
+					}
+					if (visibleTagsCount === 0) visibleTagsCount = 1;
+					setVisibleTags(tags.slice(0, visibleTagsCount));
+					setHiddenTags(tags.slice(visibleTagsCount));
+				};
+				const resizeObserver = new ResizeObserver(handleResize);
+				resizeObserver.observe(containerRef.current);
+				return () => {
+					resizeObserver.disconnect();
+				};
 			}, [
 				multiline,
 				potentiallyVisibleTags,
 				surelyHiddenTags,
-				tags,
-				threshold,
-				tmpThreshold,
-				(_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 || (_containerRef$current3 = _containerRef$current3.parentElement) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.offsetWidth
+				tags
 			]);
-			useEffect(() => {
-				var _popoverTriggerRef$cu;
-				if ((_popoverTriggerRef$cu = popoverTriggerRef.current) === null || _popoverTriggerRef$cu === void 0 ? void 0 : _popoverTriggerRef$cu.offsetWidth) {
-					var _containerRef$current4;
-					var _containerRef$current5;
-					var _tagsContainer$parent;
-					var _tagsContainer$parent2;
-					const newPopoverTriggerWidth = popoverTriggerRef.current.offsetWidth;
-					setPopoverTriggerWidth(newPopoverTriggerWidth);
-					const tagsContainer = containerRef.current;
-					const tagsContainerWidth = (_containerRef$current4 = (_containerRef$current5 = containerRef.current) === null || _containerRef$current5 === void 0 ? void 0 : _containerRef$current5.offsetWidth) !== null && _containerRef$current4 !== void 0 ? _containerRef$current4 : 0;
-					const parentWidth = (_tagsContainer$parent = tagsContainer === null || tagsContainer === void 0 || (_tagsContainer$parent2 = tagsContainer.parentElement) === null || _tagsContainer$parent2 === void 0 ? void 0 : _tagsContainer$parent2.offsetWidth) !== null && _tagsContainer$parent !== void 0 ? _tagsContainer$parent : 0;
-					if (visibleTags.length > 1 && hiddenTags.length > 0 && tagsContainerWidth + newPopoverTriggerWidth > parentWidth) {
-						var _visibleTags$at;
-						const visibleTagsCopy = visibleTags.filter((_, index) => index < visibleTags.length - 1);
-						const tagToMove = (_visibleTags$at = visibleTags.at(-1)) !== null && _visibleTags$at !== void 0 ? _visibleTags$at : "";
-						setVisibleTags(visibleTagsCopy);
-						setHiddenTags([tagToMove, ...hiddenTags]);
-					}
-					setIsReady(true);
-				}
-			}, [
-				hiddenTags,
-				threshold,
-				visibleTags,
-				visibleTags.length,
-				(_containerRef$current6 = containerRef.current) === null || _containerRef$current6 === void 0 || (_containerRef$current6 = _containerRef$current6.parentElement) === null || _containerRef$current6 === void 0 ? void 0 : _containerRef$current6.offsetWidth
-			]);
-			const renderTag = (tag, index, isEllipsis = false, hidden) => {
+			const renderTag = (tag, index, hidden) => {
+				const tagLabel = getTagLabel(tag);
 				const commonProps = {
-					className: cn(isEllipsis ? "ellipsed" : "", tagListStyle.ellipsisChild),
+					className: tagListStyle.tag,
 					copiable,
 					copiedText,
 					copyText,
-					key: `${getTagLabel(tag)}-${index}`,
-					"data-testid": hidden ? "" : getTagLabel(tag),
+					"data-testid": hidden ? "" : tagLabel,
 					variant,
 					sentiment
 				};
-				if (isKeyValueTag(tag)) return /* @__PURE__ */ jsx(Tag, _objectSpread2({ keyValue: tag }, commonProps));
-				return /* @__PURE__ */ jsxs(Tag, _objectSpread2(_objectSpread2({}, commonProps), {}, { children: [isLabelIconTag(tag) ? tag.icon : void 0, getTagLabel(tag)] }));
+				if (isKeyValueTag(tag)) return /* @__PURE__ */ createElement(Tag, _objectSpread2(_objectSpread2({ keyValue: tag }, commonProps), {}, { key: `${tagLabel}-${index}` }));
+				return /* @__PURE__ */ createElement(Tag, _objectSpread2(_objectSpread2({}, commonProps), {}, { key: `${tagLabel}-${index}` }), isLabelIconTag(tag) ? tag.icon : void 0, tagLabel);
 			};
 			return /* @__PURE__ */ jsxs("div", {
 				className: cn(className, tagListStyle.container),
 				"data-testid": dataTestId,
-				style: _objectSpread2({ visibility: isReady ? "visible" : "hidden" }, style),
-				children: [
-					/* @__PURE__ */ jsx("div", {
-						className: cn(tagListStyle.tagContainer({ multiline }), visibleTags.length === 1 && hiddenTags.length === 0 || popoverTriggerWidth ? tagListStyle.ellipsisContainer : ""),
-						"data-testid": `${dataTestId !== null && dataTestId !== void 0 ? dataTestId : "taglist"}-container`,
-						ref: containerRef,
-						style: assignInlineVars({ [popoverTriggerWidthVar]: `${popoverTriggerWidth || 0}px` }),
-						children: visibleTags.map((tag, index) => renderTag(tag, index, index === visibleTags.length - 1, true))
-					}),
-					/* @__PURE__ */ jsx("div", {
-						ref: measureRef,
-						style: {
-							position: "absolute",
-							visibility: "hidden",
-							whiteSpace: "nowrap",
-							pointerEvents: "none"
-						},
-						children: /* @__PURE__ */ jsx("div", {
-							className: tagListStyle.tagContainer({ multiline }),
-							"data-testid": `${dataTestId !== null && dataTestId !== void 0 ? dataTestId : "taglist"}-measure-container`,
-							children: potentiallyVisibleTags.map((tag, index) => renderTag(tag, index))
-						})
-					}),
-					hiddenTags.length > 0 && /* @__PURE__ */ jsx(Popover, {
+				ref: containerRef,
+				style,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: cn(tagListStyle.tagContainer({ multiline })),
+					"data-testid": `${dataTestId !== null && dataTestId !== void 0 ? dataTestId : "taglist"}-container`,
+					children: [visibleTags.map((tag, index) => renderTag(tag, index, true)), hiddenTags.length > 0 && /* @__PURE__ */ jsx(Popover, {
 						content: /* @__PURE__ */ jsx("div", {
 							className: tagListStyle.tagContainer({ multiline: true }),
 							children: hiddenTags.map((tag, index) => renderTag(tag, index))
@@ -174,19 +124,31 @@ function init_TagList() {
 						size: "small",
 						title: popoverTitle,
 						visible: isPopoverVisible,
-						children: /* @__PURE__ */ jsxs("span", {
-							className: tagListStyle.tagsWrapper,
+						children: /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							className: tagListStyle.counter,
 							"data-testid": `${dataTestId !== null && dataTestId !== void 0 ? dataTestId : "taglist"}-open`,
 							onClick: () => setIsPopoverVisible(true),
 							onKeyDown: (event) => {
 								if ([" ", "Enter"].includes(event.key)) setIsPopoverVisible(true);
 							},
-							ref: popoverTriggerRef,
-							tabIndex: 0,
 							children: ["+", hiddenTags.length]
 						})
-					})
-				]
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					"aria-hidden": "true",
+					ref: measureRef,
+					className: tagListStyle.measurementContainer,
+					children: [/* @__PURE__ */ jsx("div", {
+						className: tagListStyle.tagContainer({ multiline }),
+						children: potentiallyVisibleTags.map((tag, index) => renderTag(tag, index))
+					}), /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: tagListStyle.counter,
+						ref: popoverTriggerRef,
+						children: ["+", surelyHiddenTags.length]
+					})]
+				})]
 			});
 		};
 		TagList.displayName = "TagList";

package/dist/components/TagList/styles.css.d.ts

@@ -8,8 +8,8 @@ export declare const tagListStyle: {
             };
         };
     }>;
-    ellipsisChild: string;
-    ellipsisContainer: string;
-    tagsWrapper: string;
+    tag: string;
+    counter: string;
+    measurementContainer: string;
 };
 //# sourceMappingURL=styles.css.d.ts.map

package/dist/components/TagList/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/TagList/styles.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,sBAAsB,oBAAc,CAAA;AA4DjD,eAAO,MAAM,YAAY;;;;;;;;;;;;CAMxB,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/TagList/styles.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,sBAAsB,oBAAc,CAAA;AAuDjD,eAAO,MAAM,YAAY;;;;;;;;;;;;CAMxB,CAAA"}

package/dist/components/TagList/styles.css.js

@@ -3,26 +3,25 @@ import { init_styles_css_ts_vanilla } from "./styles.css.ts.vanilla.js";
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 
 //#region src/components/TagList/styles.css.ts
-var popoverTriggerWidthVar, tagListStyle;
+var tagListStyle;
 function init_styles_css() {
 	return (init_styles_css = __esmMin(() => {
 		/* @__PURE__ */ init_styles_css_ts_vanilla();
-		popoverTriggerWidthVar = "var(--uv_1f9zr5y0)";
 		tagListStyle = {
 			container: "uv_1f9zr5y1",
 			tagContainer: createRuntimeFn({
-				defaultClassName: "uv_1f9zr5y2",
-				variantClassNames: { multiline: { true: "uv_1f9zr5y3" } },
+				defaultClassName: "uv_1f9zr5y3",
+				variantClassNames: { multiline: { true: "uv_1f9zr5y4" } },
 				defaultVariants: {},
 				compoundVariants: []
 			}),
-			ellipsisChild: "uv_1f9zr5y5",
-			ellipsisContainer: "uv_1f9zr5y4",
-			tagsWrapper: "uv_1f9zr5y6"
+			tag: "uv_1f9zr5y5",
+			counter: "uv_1f9zr5y6",
+			measurementContainer: "uv_1f9zr5y2"
 		};
 	}))();
 }
 
 //#endregion
 init_styles_css();
-export { init_styles_css, popoverTriggerWidthVar, tagListStyle };
+export { init_styles_css, tagListStyle };

package/dist/components/Tooltip/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/styles.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,UAAU,IAAI,CAAA;AAE3B,eAAO,MAAM,kBAAkB,MAAM,CAAA;AAsErC,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;CAMxB,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/styles.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,UAAU,IAAI,CAAA;AAE3B,eAAO,MAAM,kBAAkB,MAAM,CAAA;AA2ErC,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;CAMxB,CAAA"}

package/dist/components/Tooltip/styles.css.js

@@ -1,5 +1,6 @@
 import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
 import { init_animationsVanillaExtract_css_ts_vanilla } from "../../utils/animations/animationsVanillaExtract.css.ts.vanilla.js";
+import { init_style_css_ts_vanilla } from "../Text/style.css.ts.vanilla.js";
 import { init_styles_css_ts_vanilla } from "./styles.css.ts.vanilla.js";
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 
@@ -8,6 +9,7 @@ var tooltipStyle;
 function init_styles_css() {
 	return (init_styles_css = __esmMin(() => {
 		/* @__PURE__ */ init_animationsVanillaExtract_css_ts_vanilla();
+		/* @__PURE__ */ init_style_css_ts_vanilla();
 		/* @__PURE__ */ init_styles_css_ts_vanilla();
 		tooltipStyle = {
 			animation: {