@max-ts/svelte 1.12.4 → 1.13.0

package/dist/assets/styles.css

@@ -1608,6 +1608,11 @@ img, picture, video, canvas {
   white-space: nowrap;
   border: 0;
 }
+@media (max-width: 48rem) {
+  .styles_header__1rbt3ly6 {
+    padding: var(--spacing-2);
+  }
+}
 .styles_unchecked__1x1b5sl0 {
   color: transparent;
 }
@@ -2749,6 +2754,37 @@ img, picture, video, canvas {
   cursor: not-allowed;
   opacity: 0.5;
 }
+.styles_truncate__dpgi0n0 {
+  overflow: hidden;
+  max-width: 100%;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.styles_multipleRows__dpgi0n1 {
+  display: -webkit-box;
+  white-space: initial;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--rows-count);
+}
+.styles_wrapper__dpgi0n2 {
+  display: flex;
+  min-width: 0;
+  width: 100%;
+  white-space: nowrap;
+}
+.styles_wrapperAlignments_left__dpgi0n3 {
+  justify-content: flex-start;
+}
+.styles_wrapperAlignments_center__dpgi0n4 {
+  justify-content: center;
+}
+.styles_wrapperAlignments_right__dpgi0n5 {
+  justify-content: flex-end;
+}
+.styles_wrapperAlignments_justify__dpgi0n6 {
+  justify-content: space-between;
+}
 .styles_wrapper__rub3490 {
   display: block;
   max-width: 100%;
@@ -2921,10 +2957,12 @@ img, picture, video, canvas {
 }
 .styles_toolbar__14ie7q10 {
   position: absolute;
-  top: 0;
   right: 4px;
   z-index: 1;
   opacity: 0.5;
+  top: 50%;
+  bottom: unset;
+  transform: translateY(-50%);
   transition: opacity 0.2s ease-in-out;
 }
 .styles_toolbar__14ie7q10:hover {
@@ -2963,13 +3001,6 @@ img, picture, video, canvas {
 .styles_overlay__14ie7q13[data-visible="true"] {
   opacity: 1;
 }
-@media (min-width: 48rem) {
-  .styles_toolbar__14ie7q10 {
-    top: 50%;
-    bottom: unset;
-    transform: translateY(-50%);
-  }
-}
 @keyframes styles_fadeIn__w5sq0p0 {
   0% {
     opacity: 0;
@@ -3516,13 +3547,15 @@ img, picture, video, canvas {
   background-color: var(--colors-background-tooltip);
   color: var(--colors-background-paper);
   border-radius: var(--radius-small);
-  padding: var(--spacing-2) var(--spacing-3);
+  padding: var(--spacing-2);
   font-size: var(--fontSize-xs);
   font-weight: var(--fontWeight-semibold);
   text-align: center;
   width: fit-content;
+  max-width: min(320px, calc(100vw - 32px));
   animation: styles_fadeIn__1ovcrev0 150ms ease-out, styles_zoomIn__1ovcrev2 150ms ease-out;
-  text-wrap: balance;
+  white-space: normal;
+  overflow-wrap: break-word;
   line-height: var(--lineHeight-none);
 }
 .styles_content__1ovcrev8[data-state="closed"] {

package/dist/components/Drawer/Content/Content.js

@@ -1,5 +1,5 @@
 import { getDrawerContext } from "../context.js";
-import __default__ from "../styles.css.js";
+import { closeButton, content, contentTransition, handle, visuallyHidden } from "../styles.css.js";
 import Overlay from "../Overlay/Overlay.js";
 import Portal from "../Portal/Portal.js";
 import "svelte/internal/disclose-version";
@@ -51,8 +51,8 @@ function Content($$anchor, $$props) {
 			var node_1 = $.sibling(node, 2);
 			{
 				let $0 = $.derived(() => [
-					__default__.content,
-					{ [__default__.contentTransition]: !$.get(isDragging) },
+					content,
+					{ [contentTransition]: !$.get(isDragging) },
 					$$props.class
 				]);
 				$.component(node_1, () => Dialog.Content, ($$anchor, DialogPrimitive_Content) => {
@@ -70,7 +70,7 @@ function Content($$anchor, $$props) {
 							var node_2 = $.first_child(fragment_2);
 							var consequent = ($$anchor) => {
 								var div = root_3();
-								$.template_effect(() => $.set_class(div, 1, $.clsx(__default__.handle)));
+								$.template_effect(() => $.set_class(div, 1, $.clsx(handle)));
 								$.delegated("touchmove", div, handleTouchMove, void 0, true);
 								$.delegated("touchstart", div, handleTouchStart, void 0, true);
 								$.delegated("touchend", div, handleTouchEnd);
@@ -88,14 +88,14 @@ function Content($$anchor, $$props) {
 								$.component(node_5, () => Dialog.Close, ($$anchor, DialogPrimitive_Close) => {
 									DialogPrimitive_Close($$anchor, {
 										get class() {
-											return __default__.closeButton;
+											return closeButton;
 										},
 										children: ($$anchor, $$slotProps) => {
 											var fragment_4 = root_5();
 											var node_6 = $.first_child(fragment_4);
 											XIcon(node_6, {});
 											var span = $.sibling(node_6, 2);
-											$.template_effect(() => $.set_class(span, 1, $.clsx(__default__.visuallyHidden)));
+											$.template_effect(() => $.set_class(span, 1, $.clsx(visuallyHidden)));
 											$.append($$anchor, fragment_4);
 										},
 										$$slots: { default: true }

package/dist/components/Drawer/Description/Description.js

@@ -1,4 +1,4 @@
-import __default__ from "../styles.css.js";
+import { description } from "../styles.css.js";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { Dialog } from "bits-ui";
@@ -14,7 +14,7 @@ function Description($$anchor, $$props) {
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 	{
-		let $0 = $.derived(() => [__default__.description, $$props.class]);
+		let $0 = $.derived(() => [description, $$props.class]);
 		$.component(node, () => Dialog.Description, ($$anchor, DialogPrimitive_Description) => {
 			DialogPrimitive_Description($$anchor, $.spread_props({
 				"data-slot": "drawer-description",

package/dist/components/Drawer/Footer/Footer.js

@@ -1,4 +1,4 @@
-import __default__ from "../styles.css.js";
+import { footer } from "../styles.css.js";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 //#region src/components/Drawer/Footer/Footer.svelte
@@ -16,7 +16,7 @@ function Footer($$anchor, $$props) {
 	var div = root();
 	$.attribute_effect(div, () => ({
 		"data-slot": "drawer-footer",
-		class: [__default__.footer, $$props.class],
+		class: [footer, $$props.class],
 		...restProps
 	}));
 	var node = $.child(div);

package/dist/components/Drawer/Header/Header.js

@@ -1,4 +1,4 @@
-import __default__ from "../styles.css.js";
+import { header } from "../styles.css.js";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 //#region src/components/Drawer/Header/Header.svelte
@@ -16,7 +16,7 @@ function Header($$anchor, $$props) {
 	var div = root();
 	$.attribute_effect(div, () => ({
 		"data-slot": "drawer-header",
-		class: [__default__.header, $$props.class],
+		class: [header, $$props.class],
 		...restProps
 	}));
 	var node = $.child(div);

package/dist/components/Drawer/Overlay/Overlay.js

@@ -1,5 +1,5 @@
 import { getDrawerContext } from "../context.js";
-import __default__ from "../styles.css.js";
+import { overlay } from "../styles.css.js";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { Dialog } from "bits-ui";
@@ -23,7 +23,7 @@ function Overlay($$anchor, $$props) {
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 	{
-		let $0 = $.derived(() => [__default__.overlay, $$props.class]);
+		let $0 = $.derived(() => [overlay, $$props.class]);
 		$.component(node, () => Dialog.Overlay, ($$anchor, DialogPrimitive_Overlay) => {
 			DialogPrimitive_Overlay($$anchor, $.spread_props({
 				"data-slot": "drawer-overlay",

package/dist/components/Drawer/Title/Title.js

@@ -1,4 +1,4 @@
-import __default__ from "../styles.css.js";
+import { title } from "../styles.css.js";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { Dialog } from "bits-ui";
@@ -14,7 +14,7 @@ function Title($$anchor, $$props) {
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 	{
-		let $0 = $.derived(() => [__default__.title, $$props.class]);
+		let $0 = $.derived(() => [title, $$props.class]);
 		$.component(node, () => Dialog.Title, ($$anchor, DialogPrimitive_Title) => {
 			DialogPrimitive_Title($$anchor, $.spread_props({
 				"data-slot": "drawer-title",

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

@@ -1,13 +1,10 @@
-declare const _default: {
-    overlay: string;
-    visuallyHidden: string;
-    handle: string;
-    closeButton: string;
-    title: string;
-    description: string;
-    header: string;
-    footer: string;
-    content: string;
-    contentTransition: string;
-};
-export default _default;
+export declare const overlay: string;
+export declare const content: string;
+export declare const contentTransition: string;
+export declare const header: string;
+export declare const footer: string;
+export declare const title: string;
+export declare const description: string;
+export declare const closeButton: string;
+export declare const handle: string;
+export declare const visuallyHidden: string;

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

@@ -1,15 +1,13 @@
 //#region src/components/Drawer/styles.css.ts
-var __default__ = {
-	overlay: "styles_overlay__1rbt3ly3",
-	visuallyHidden: "styles_visuallyHidden__1rbt3lyc",
-	handle: "styles_handle__1rbt3lyb",
-	closeButton: "styles_closeButton__1rbt3lya",
-	title: "styles_title__1rbt3ly8",
-	description: "styles_description__1rbt3ly9",
-	header: "styles_header__1rbt3ly6",
-	footer: "styles_footer__1rbt3ly7",
-	content: "styles_content__1rbt3ly4",
-	contentTransition: "styles_contentTransition__1rbt3ly5"
-};
+var closeButton = "styles_closeButton__1rbt3lya";
+var content = "styles_content__1rbt3ly4";
+var contentTransition = "styles_contentTransition__1rbt3ly5";
+var description = "styles_description__1rbt3ly9";
+var footer = "styles_footer__1rbt3ly7";
+var handle = "styles_handle__1rbt3lyb";
+var header = "styles_header__1rbt3ly6";
+var overlay = "styles_overlay__1rbt3ly3";
+var title = "styles_title__1rbt3ly8";
+var visuallyHidden = "styles_visuallyHidden__1rbt3lyc";
 //#endregion
-export { __default__ as default };
+export { closeButton, content, contentTransition, description, footer, handle, header, overlay, title, visuallyHidden };

package/dist/components/OverflowTypography/OverflowTypography.js

@@ -0,0 +1,175 @@
+import Typography from "../Typography/Typography.js";
+import Tooltip from "../Tooltip/Tooltip.js";
+import { OverflowTypographyStore } from "./store.svelte.js";
+import { truncate, wrapper, wrapperAlignments } from "./styles.css.js";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/OverflowTypography/OverflowTypography.svelte
+var root_2 = $.from_html(`<div><!> <!></div>`);
+function OverflowTypography($$anchor, $$props) {
+	$.push($$props, true);
+	const typography = ($$anchor) => {
+		var fragment = $.comment();
+		var node = $.first_child(fragment);
+		var consequent = ($$anchor) => {
+			var div = root_2();
+			var node_1 = $.child(div);
+			Typography(node_1, $.spread_props(() => restProps, {
+				get align() {
+					return align();
+				},
+				get class() {
+					return $.get(truncateClass);
+				},
+				component: "span",
+				display: "block",
+				get style() {
+					return $$props.style;
+				},
+				get ref() {
+					return ref();
+				},
+				set ref($$value) {
+					ref($$value);
+				},
+				children: ($$anchor, $$slotProps) => {
+					$.next();
+					var text_1 = $.text();
+					$.template_effect(() => $.set_text(text_1, store.firstPartLabel));
+					$.append($$anchor, text_1);
+				},
+				$$slots: { default: true }
+			}));
+			Typography($.sibling(node_1, 2), $.spread_props(() => restProps, {
+				get align() {
+					return align();
+				},
+				get class() {
+					return $$props.class;
+				},
+				component: "span",
+				get style() {
+					return $$props.style;
+				},
+				children: ($$anchor, $$slotProps) => {
+					$.next();
+					var text_2 = $.text();
+					$.template_effect(() => $.set_text(text_2, store.secondPartLabel));
+					$.append($$anchor, text_2);
+				},
+				$$slots: { default: true }
+			}));
+			$.reset(div);
+			$.template_effect(() => $.set_class(div, 1, $.clsx($.get(wrapperClass))));
+			$.append($$anchor, div);
+		};
+		var alternate = ($$anchor) => {
+			Typography($$anchor, $.spread_props(() => restProps, {
+				get align() {
+					return align();
+				},
+				get class() {
+					return $.get(contentClass);
+				},
+				display: "block",
+				get style() {
+					return $.get(contentStyle);
+				},
+				get ref() {
+					return ref();
+				},
+				set ref($$value) {
+					ref($$value);
+				},
+				children: ($$anchor, $$slotProps) => {
+					var fragment_4 = $.comment();
+					var node_3 = $.first_child(fragment_4);
+					var consequent_1 = ($$anchor) => {
+						var text_3 = $.text();
+						$.template_effect(() => $.set_text(text_3, $.get(label)));
+						$.append($$anchor, text_3);
+					};
+					var consequent_2 = ($$anchor) => {
+						var fragment_6 = $.comment();
+						var node_4 = $.first_child(fragment_6);
+						$.snippet(node_4, () => $$props.children);
+						$.append($$anchor, fragment_6);
+					};
+					$.if(node_3, ($$render) => {
+						if ($.get(label)) $$render(consequent_1);
+						else if (typeof $$props.children === "function") $$render(consequent_2, 1);
+					});
+					$.append($$anchor, fragment_4);
+				},
+				$$slots: { default: true }
+			}));
+		};
+		$.if(node, ($$render) => {
+			if (store.hasVisibleLastSymbols) $$render(consequent);
+			else $$render(alternate, -1);
+		});
+		$.append($$anchor, fragment);
+	};
+	let ref = $.prop($$props, "ref", 15, null), align = $.prop($$props, "align", 3, "left"), rowsCount = $.prop($$props, "rowsCount", 3, 1), visibleLastSymbolsCount = $.prop($$props, "visibleLastSymbolsCount", 3, 0), restProps = $.rest_props($$props, [
+		"$$slots",
+		"$$events",
+		"$$legacy",
+		"ref",
+		"align",
+		"children",
+		"class",
+		"style",
+		"rowsCount",
+		"text",
+		"tooltipProps",
+		"visibleLastSymbolsCount"
+	]);
+	const label = $.derived(() => $$props.text ?? (typeof $$props.children === "string" ? $$props.children : void 0));
+	const store = new OverflowTypographyStore({
+		get text() {
+			return $.get(label);
+		},
+		get rowsCount() {
+			return rowsCount();
+		},
+		get visibleLastSymbolsCount() {
+			return visibleLastSymbolsCount();
+		}
+	});
+	const joinClasses = (...classes) => classes.filter(Boolean).join(" ");
+	const wrapperClass = $.derived(() => joinClasses(wrapper, wrapperAlignments[align()]));
+	const truncateClass = $.derived(() => joinClasses(truncate, $$props.class));
+	const contentClass = $.derived(() => joinClasses(truncate, store.hasMultipleRows && "styles_multipleRows__dpgi0n1", $$props.class));
+	const contentStyle = $.derived(() => [$$props.style, `--rows-count: ${store.rowsCount}`].filter(Boolean).join("; "));
+	const tooltipContent = $.derived(() => $$props.tooltipProps?.content ?? (store.isOverflowed ? $.get(label) : void 0));
+	const tooltipConfig = $.derived(() => ({
+		...$$props.tooltipProps,
+		content: $.get(tooltipContent),
+		open: store.isOverflowed
+	}));
+	let cleanup;
+	$.user_effect(() => {
+		if (!ref()) return;
+		cleanup?.();
+		cleanup = store.attach(ref());
+		return () => {
+			cleanup?.();
+			cleanup = void 0;
+		};
+	});
+	$.user_effect(() => {
+		$.get(label);
+		rowsCount();
+		visibleLastSymbolsCount();
+		store.check();
+	});
+	Tooltip($$anchor, $.spread_props(() => $.get(tooltipConfig), {
+		children: ($$anchor, $$slotProps) => {
+			typography($$anchor);
+		},
+		$$slots: { default: true }
+	}));
+	$.pop();
+}
+//#endregion
+export { OverflowTypography as default };

package/dist/components/OverflowTypography/OverflowTypography.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { OverflowTypographyProps } from './types';
+declare const OverflowTypography: import("svelte").Component<OverflowTypographyProps, {}, "ref">;
+type OverflowTypography = ReturnType<typeof OverflowTypography>;
+export default OverflowTypography;

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

@@ -0,0 +1,2 @@
+export { default as OverflowTypography } from './OverflowTypography.svelte';
+export type { OverflowTypographyProps, OverflowTypographyTooltipProps, } from './types';

package/dist/components/OverflowTypography/store.svelte.d.ts

@@ -0,0 +1,22 @@
+type Options = {
+    text?: string;
+    rowsCount?: number;
+    visibleLastSymbolsCount?: number;
+};
+export declare class OverflowTypographyStore {
+    #private;
+    isOverflowed: boolean;
+    constructor(options: Options);
+    get rowsCount(): number;
+    get hasVisibleLastSymbols(): boolean;
+    get hasMultipleRows(): boolean;
+    get firstPartLabel(): string;
+    get secondPartLabel(): string;
+    attach: (node: HTMLElement) => () => void;
+    check: () => void;
+    destroy(): void;
+    private get visibleLastSymbolsCount();
+    private get truncatedLabel();
+    private checkOverflow;
+}
+export {};

package/dist/components/OverflowTypography/store.svelte.js

@@ -0,0 +1,84 @@
+//#region src/components/OverflowTypography/store.svelte.ts
+const DEFAULT_ROWS_COUNT = 1;
+const RESIZE_DEBOUNCE_MS = 500;
+const truncateString = (visibleLastSymbolsCount, label) => {
+	return {
+		firstPartLabel: label.slice(0, -visibleLastSymbolsCount),
+		secondPartLabel: label.slice(-visibleLastSymbolsCount)
+	};
+};
+var OverflowTypographyStore = class {
+	isOverflowed = $state(false);
+	#options;
+	#node;
+	#resizeObserver;
+	#resizeTimer;
+	constructor(options) {
+		this.#options = options;
+	}
+	get rowsCount() {
+		return this.#options.rowsCount ?? DEFAULT_ROWS_COUNT;
+	}
+	get hasVisibleLastSymbols() {
+		return Boolean(this.#options.text && this.visibleLastSymbolsCount > 0);
+	}
+	get hasMultipleRows() {
+		return this.hasVisibleLastSymbols ? false : this.rowsCount > 1;
+	}
+	get firstPartLabel() {
+		return this.truncatedLabel.firstPartLabel;
+	}
+	get secondPartLabel() {
+		return this.truncatedLabel.secondPartLabel;
+	}
+	attach = (node) => {
+		this.#node = node;
+		this.checkOverflow([{
+			target: node,
+			contentRect: node.getBoundingClientRect()
+		}]);
+		this.#resizeObserver = new ResizeObserver((entries) => {
+			clearTimeout(this.#resizeTimer);
+			this.#resizeTimer = setTimeout(() => {
+				this.checkOverflow(entries);
+			}, RESIZE_DEBOUNCE_MS);
+		});
+		this.#resizeObserver.observe(node);
+		return () => {
+			this.#resizeObserver?.unobserve(node);
+			this.destroy();
+		};
+	};
+	check = () => {
+		if (!this.#node) return;
+		this.checkOverflow([{
+			target: this.#node,
+			contentRect: this.#node.getBoundingClientRect()
+		}]);
+	};
+	destroy() {
+		clearTimeout(this.#resizeTimer);
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = void 0;
+		this.#node = void 0;
+	}
+	get visibleLastSymbolsCount() {
+		return this.#options.visibleLastSymbolsCount ?? 0;
+	}
+	get truncatedLabel() {
+		if (!this.hasVisibleLastSymbols || !this.#options.text) return {
+			firstPartLabel: "",
+			secondPartLabel: ""
+		};
+		return truncateString(this.visibleLastSymbolsCount, this.#options.text);
+	}
+	checkOverflow(entries) {
+		const [{ target, contentRect }] = entries;
+		const isScrollHeightBigger = target.scrollHeight > Math.round(contentRect.height);
+		const isScrollWidthBigger = target.scrollWidth > Math.round(contentRect.width);
+		const isOverflowed = this.hasMultipleRows ? isScrollWidthBigger || isScrollHeightBigger : isScrollWidthBigger;
+		if (this.isOverflowed !== isOverflowed) this.isOverflowed = isOverflowed;
+	}
+};
+//#endregion
+export { OverflowTypographyStore };

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

@@ -0,0 +1,5 @@
+import type { TypographyAlign } from '../Typography';
+export declare const truncate: string;
+export declare const multipleRows: string;
+export declare const wrapper: string;
+export declare const wrapperAlignments: Record<TypographyAlign, string>;

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

@@ -0,0 +1,12 @@
+//#region src/components/OverflowTypography/styles.css.ts
+var multipleRows = "styles_multipleRows__dpgi0n1";
+var truncate = "styles_truncate__dpgi0n0";
+var wrapper = "styles_wrapper__dpgi0n2";
+var wrapperAlignments = {
+	left: "styles_wrapperAlignments_left__dpgi0n3",
+	center: "styles_wrapperAlignments_center__dpgi0n4",
+	right: "styles_wrapperAlignments_right__dpgi0n5",
+	justify: "styles_wrapperAlignments_justify__dpgi0n6"
+};
+//#endregion
+export { multipleRows, truncate, wrapper, wrapperAlignments };

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { TooltipProps } from '../Tooltip';
+import type { TypographyProps } from '../Typography';
+export type OverflowTypographyTooltipProps = Omit<TooltipProps, 'children' | 'content'> & {
+    content?: TooltipProps['content'];
+};
+export type OverflowTypographyProps = Omit<TypographyProps, 'children' | 'ref'> & {
+    /** Максимальное количество отображаемых строк. */
+    rowsCount?: number;
+    /** Количество видимых символов в конце обрезанной строки. */
+    visibleLastSymbolsCount?: number;
+    /** Текст для обрезки и дефолтного содержимого tooltip. */
+    text?: string;
+    /** Пропсы для кастомизации tooltip. */
+    tooltipProps?: OverflowTypographyTooltipProps;
+    children?: Snippet<[]> | string;
+    ref?: HTMLElement | null;
+};

package/dist/components/Tooltip/Tooltip.js

@@ -1,6 +1,6 @@
 import Portal from "../Portal/Portal.js";
 import { TooltipStore } from "./store.svelte.js";
-import __default__ from "./styles.css.js";
+import { arrow, content } from "./styles.css.js";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 //#region src/components/Tooltip/Tooltip.svelte
@@ -9,7 +9,7 @@ var root_2 = $.from_html(`<div role="tooltip" data-slot="tooltip-content"><!> <!
 var root = $.from_html(`<span style="display: contents;" data-slot="tooltip-trigger"><!></span> <!>`, 1);
 function Tooltip($$anchor, $$props) {
 	$.push($$props, true);
-	let offset = $.prop($$props, "offset", 3, 10), placement = $.prop($$props, "placement", 3, "top"), arrow = $.prop($$props, "arrow", 3, false), delayDuration = $.prop($$props, "delayDuration", 3, 100);
+	let offset = $.prop($$props, "offset", 3, 10), placement = $.prop($$props, "placement", 3, "top"), arrow$1 = $.prop($$props, "arrow", 3, false), delayDuration = $.prop($$props, "delayDuration", 3, 100);
 	const store = new TooltipStore({
 		get placement() {
 			return placement();
@@ -17,6 +17,9 @@ function Tooltip($$anchor, $$props) {
 		get offset() {
 			return offset();
 		},
+		get open() {
+			return $$props.open;
+		},
 		get delayDuration() {
 			return delayDuration();
 		}
@@ -55,13 +58,13 @@ function Tooltip($$anchor, $$props) {
 				var consequent_1 = ($$anchor) => {
 					var svg = root_5();
 					$.template_effect(() => {
-						$.set_class(svg, 0, $.clsx([__default__.arrow, $$props.arrowClass]));
+						$.set_class(svg, 0, $.clsx([arrow, $$props.arrowClass]));
 						$.set_attribute(svg, "data-side", store.placement);
 					});
 					$.append($$anchor, svg);
 				};
 				$.if(node_4, ($$render) => {
-					if (arrow()) $$render(consequent_1);
+					if (arrow$1()) $$render(consequent_1);
 				});
 				$.reset(div);
 				$.attach(div, () => store.attachContent);
@@ -69,7 +72,7 @@ function Tooltip($$anchor, $$props) {
 					$.set_attribute(div, "id", store.tooltipId);
 					$.set_attribute(div, "data-state", store.open ? "open" : "closed");
 					$.set_attribute(div, "data-side", store.placement);
-					$.set_class(div, 1, $.clsx([__default__.content, $$props.contentClass]));
+					$.set_class(div, 1, $.clsx([content, $$props.contentClass]));
 					styles_1 = $.set_style(div, "", styles_1, {
 						position: "fixed",
 						top: `${store.y ?? ""}px`,
@@ -88,7 +91,7 @@ function Tooltip($$anchor, $$props) {
 		});
 	};
 	$.if(node_1, ($$render) => {
-		if (store.visible) $$render(consequent_2);
+		if (store.visible && $$props.content != null && $$props.open !== false) $$render(consequent_2);
 	});
 	$.append($$anchor, fragment);
 	$.pop();

package/dist/components/Tooltip/store.svelte.d.ts

@@ -1,11 +1,12 @@
 import type { TooltipProps } from './types';
-type Options = Pick<TooltipProps, 'delayDuration' | 'placement' | 'offset'>;
+type Options = Pick<TooltipProps, 'delayDuration' | 'placement' | 'offset' | 'open'>;
 export declare class TooltipStore {
     #private;
     open: boolean;
     visible: boolean;
     x: number;
     y: number;
+    placement: NonNullable<import("@floating-ui/dom").Placement | undefined>;
     readonly tooltipId: string;
     private static active;
     private static readonly CLOSE_DURATION;
@@ -14,7 +15,6 @@ export declare class TooltipStore {
     private delayTimer;
     private closeTimer;
     constructor(options: Options);
-    get placement(): import("@floating-ui/dom").Placement | undefined;
     show: () => void;
     hide: () => void;
     keepOpen: () => void;
@@ -22,5 +22,8 @@ export declare class TooltipStore {
     attachContent: (node: HTMLElement) => (() => void) | undefined;
     destroy(): void;
     private forceClose;
+    private get delayDuration();
+    private get offset();
+    private get preferredPlacement();
 }
 export {};

package/dist/components/Tooltip/store.svelte.js

@@ -5,11 +5,8 @@ var TooltipStore = class TooltipStore {
 	visible = $state(false);
 	x = $state(0);
 	y = $state(0);
-	#options = $state({
-		delayDuration: 300,
-		placement: "top",
-		offset: 8
-	});
+	placement = $state("top");
+	#options;
 	tooltipId = `tooltip-${Math.random().toString(36).slice(2, 11)}`;
 	static active = null;
 	static CLOSE_DURATION = 150;
@@ -18,15 +15,11 @@ var TooltipStore = class TooltipStore {
 	delayTimer;
 	closeTimer;
 	constructor(options) {
-		this.#options = {
-			...this.#options,
-			...options
-		};
-	}
-	get placement() {
-		return this.#options.placement;
+		this.#options = options;
+		this.placement = this.preferredPlacement;
 	}
 	show = () => {
+		if (this.#options.open === false) return;
 		if (TooltipStore.active && TooltipStore.active !== this) TooltipStore.active.forceClose();
 		clearTimeout(this.closeTimer);
 		clearTimeout(this.delayTimer);
@@ -34,7 +27,7 @@ var TooltipStore = class TooltipStore {
 		this.delayTimer = setTimeout(() => {
 			this.visible = true;
 			this.open = true;
-		}, this.#options.delayDuration);
+		}, this.delayDuration);
 	};
 	hide = () => {
 		clearTimeout(this.delayTimer);
@@ -73,17 +66,17 @@ var TooltipStore = class TooltipStore {
 		this.cleanupAutoUpdate = autoUpdate(this.triggerEl, node, () => {
 			if (!this.triggerEl) return;
 			computePosition(this.triggerEl, node, {
-				placement: this.#options.placement,
+				placement: this.preferredPlacement,
 				strategy: "fixed",
 				middleware: [
-					offset({ mainAxis: this.#options.offset }),
+					offset({ mainAxis: this.offset }),
 					flip(),
 					shift({ padding: 8 })
 				]
 			}).then(({ x, y, placement }) => {
 				this.x = x;
 				this.y = y;
-				this.#options.placement = placement;
+				this.placement = placement;
 			});
 		});
 		return () => {
@@ -103,6 +96,15 @@ var TooltipStore = class TooltipStore {
 		this.cleanupAutoUpdate?.();
 		this.cleanupAutoUpdate = void 0;
 	}
+	get delayDuration() {
+		return this.#options.delayDuration ?? 300;
+	}
+	get offset() {
+		return this.#options.offset ?? 8;
+	}
+	get preferredPlacement() {
+		return this.#options.placement ?? "top";
+	}
 };
 //#endregion
 export { TooltipStore };

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

@@ -1,5 +1,2 @@
-declare const _default: {
-    content: string;
-    arrow: string;
-};
-export default _default;
+export declare const content: string;
+export declare const arrow: string;

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

@@ -1,7 +1,5 @@
 //#region src/components/Tooltip/styles.css.ts
-var __default__ = {
-	content: "styles_content__1ovcrev8",
-	arrow: "styles_arrow__1ovcrev9"
-};
+var arrow = "styles_arrow__1ovcrev9";
+var content = "styles_content__1ovcrev8";
 //#endregion
-export { __default__ as default };
+export { arrow, content };

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

@@ -6,6 +6,7 @@ export type TooltipProps = {
     children?: Snippet<[]>;
     arrow?: boolean;
     offset?: number;
+    open?: boolean;
     arrowClass?: string;
     contentClass?: string;
     placement?: Placement;

package/dist/components/Typography/Typography.js

@@ -4,7 +4,7 @@ import * as $ from "svelte/internal/client";
 //#region src/components/Typography/Typography.svelte
 function Typography($$anchor, $$props) {
 	$.push($$props, true);
-	let ref = $.prop($$props, "ref", 11, null), align = $.prop($$props, "align", 3, "left"), color = $.prop($$props, "color", 3, "primary"), decoration = $.prop($$props, "decoration", 3, "none"), display = $.prop($$props, "display", 3, "inline"), variant = $.prop($$props, "variant", 3, "body1"), weight = $.prop($$props, "weight", 3, "normal"), restProps = $.rest_props($$props, [
+	let ref = $.prop($$props, "ref", 15, null), align = $.prop($$props, "align", 3, "left"), color = $.prop($$props, "color", 3, "primary"), decoration = $.prop($$props, "decoration", 3, "none"), display = $.prop($$props, "display", 3, "inline"), variant = $.prop($$props, "variant", 3, "body1"), weight = $.prop($$props, "weight", 3, "normal"), restProps = $.rest_props($$props, [
 		"$$slots",
 		"$$events",
 		"$$legacy",
@@ -38,7 +38,6 @@ function Typography($$anchor, $$props) {
 	const TagComponent = $.derived(() => $$props.component || VARIANT_COMPONENT_MAP[variant()]);
 	const mergedProps = $.derived(() => ({
 		...restProps,
-		ref: ref(),
 		class: [
 			decorations[decoration()],
 			variants[variant()],
@@ -54,6 +53,7 @@ function Typography($$anchor, $$props) {
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 	$.element(node, () => $.get(TagComponent), false, ($$element, $$anchor) => {
+		$.bind_this($$element, ($$value) => ref($$value), () => ref());
 		$.attribute_effect($$element, () => ({ ...$.get(mergedProps) }));
 		var fragment_1 = $.comment();
 		var node_1 = $.first_child(fragment_1);

package/dist/components/index.d.ts

@@ -22,6 +22,7 @@ export { Input, type InputProps, type InputType, } from './Input';
 export { InputGroup, type InputGroupAddonAlign, type InputGroupButtonSize, } from './InputGroup';
 export { Item, type ItemProps, type ItemSize, type ItemVariant, } from './Item';
 export { Label } from './Label';
+export { OverflowTypography, type OverflowTypographyProps, type OverflowTypographyTooltipProps, } from './OverflowTypography';
 export { Placeholder, type PlaceholderProps, type PlaceholderSize, } from './Placeholder';
 export { Popover, type PopoverProps } from './Popover';
 export { Portal } from './Portal';

package/dist/components/index.js

@@ -27,13 +27,14 @@ import { Field } from "./Field/index.js";
 import Input from "./Input/Input.js";
 import { InputGroup } from "./InputGroup/index.js";
 import { Item } from "./Item/index.js";
-import { Popover } from "./Popover/index.js";
 import Portal from "./Portal/Portal.js";
+import Tooltip from "./Tooltip/Tooltip.js";
+import OverflowTypography from "./OverflowTypography/OverflowTypography.js";
+import { Popover } from "./Popover/index.js";
 import Slider from "./Slider/Slider.js";
 import RangeInput from "./RangeInput/RangeInput.js";
 import ScalableContainer from "./ScalableContainer/ScalableContainer.js";
 import { Select } from "./Select/index.js";
 import SliderInput from "./SliderInput/SliderInput.js";
 import { Tabs } from "./Tabs/index.js";
-import Tooltip from "./Tooltip/Tooltip.js";
-export { Accordion, Alert, Badge, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, CircularProgress, ContentState, DataGrid, DataGridSortHeader, Description, Dialog, Drawer, DropdownMenu_exports as DropdownMenu, Empty, Field, Input, InputGroup, Item, Label_1 as Label, Placeholder, Popover, Portal, RangeInput, ScalableContainer, Select, Separator, Slider, SliderInput, Spinner, Tabs, Tooltip, Typography, badgeVariants, buttonVariants };
+export { Accordion, Alert, Badge, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, CircularProgress, ContentState, DataGrid, DataGridSortHeader, Description, Dialog, Drawer, DropdownMenu_exports as DropdownMenu, Empty, Field, Input, InputGroup, Item, Label_1 as Label, OverflowTypography, Placeholder, Popover, Portal, RangeInput, ScalableContainer, Select, Separator, Slider, SliderInput, Spinner, Tabs, Tooltip, Typography, badgeVariants, buttonVariants };

package/dist/stories/OverflowTypography.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import { OverflowTypography } from '../components';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const OverflowTypography: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type OverflowTypography = InstanceType<typeof OverflowTypography>;
+export default OverflowTypography;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@max-ts/svelte",
-  "version": "1.12.4",
+  "version": "1.13.0",
   "type": "module",
   "description": "Svelte component library.",
   "author": "Tsepelev Maksim",