@feugene/granularity 0.13.0 → 0.16.0

package/dist/components/GrToaster/chunks/GrToaster-BKQy3Srm.js

@@ -0,0 +1,272 @@
+import { n as check_circle_default, r as alert_triangle_default, t as x_circle_default } from "../../../chunks/x-circle-BCBURwyX.js";
+import { t as info_default } from "../../../chunks/info-Be2OccTu.js";
+import { t as x_default } from "../../../chunks/x-2KXnqxiD.js";
+import { c as useGrThemeAttrs } from "../../../chunks/context-BSYR7RZs.js";
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { t as usePortalTarget } from "../../../chunks/usePortalTarget-RyzEgNTb.js";
+import { vHotkey } from "../../../directives/hotkey.js";
+import { t as GrIcon_default } from "../../GrIcon/chunks/GrIcon-BvA2ZGXP.js";
+import { t as _plugin_vue_export_helper_default } from "../../../chunks/_plugin-vue_export-helper-BOaGB7Aw.js";
+import { t as GrButton_default } from "../../GrButton/chunks/GrButton-D0m_z0XW.js";
+import { useToast } from "../../../composables/useToast.js";
+import { r as PLACEMENT_CLASS } from "../../../chunks/config-LGrZIdaZ.js";
+import { Fragment, Teleport, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeStyle, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useSlots, watchEffect, withCtx, withDirectives } from "vue";
+import '../styles.css';//#region src/components/GrToaster/GrToaster.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = ["data-tone", "role"];
+var _hoisted_3 = { class: "flex items-start gap-3" };
+var _hoisted_4 = { class: "min-w-0 flex-1" };
+var _hoisted_5 = { class: "text-[length:var(--gr-text-sm)] font-700" };
+var _hoisted_6 = {
+	key: 0,
+	class: "mt-0.5 text-[length:var(--gr-text-sm)] text-[var(--gr-muted-fg)]"
+};
+var _hoisted_7 = {
+	key: 1,
+	class: "mt-2 flex flex-wrap gap-2"
+};
+//#endregion
+//#region src/components/GrToaster/GrToaster.vue
+var GrToaster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "GrToaster",
+	props: {
+		placement: { default: "top-right" },
+		maxVisible: { default: 4 },
+		dismissLabel: { default: void 0 },
+		regionLabel: { default: void 0 },
+		width: { default: void 0 },
+		focusHotkey: {
+			type: [String, Boolean],
+			default: "F6"
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		/**
+		* GrToaster — GR-примитив области уведомлений (toast).
+		*
+		* Модель состояния берётся из `useToast`, поэтому в приложении предполагается
+		* **один активный `GrToaster`** на корень (или app-scoped через плагин).
+		*
+		* A11y:
+		* - контейнер — `role="region"` с `aria-label` (i18n-проп `regionLabel`);
+		* - объявляет каждый тост сам собой: `role="status"`, а критичные
+		*   (`warning`/`danger`) — ассертивный `role="alert"`. Обёртки-live-region над
+		*   ними нет намеренно: вложение регионов с разной ассертивностью
+		*   спецификацией не определено, браузеры и SR расходятся вплоть до потери
+		*   объявления;
+		* - стек достижим с клавиатуры по `focusHotkey` (по умолчанию `F6`) — тосты
+		*   телепортированы в конец `body`, и без хоткея кнопка «Отменить» лежала бы
+		*   за пределами разумного числа нажатий `Tab`.
+		*
+		* UX:
+		* - `maxVisible` ограничивает стек; лишние ждут в очереди (их таймеры на паузе);
+		* - автозакрытие **останавливается под курсором/фокусом** (WCAG 2.2.1) и
+		*   визуализируется прогресс-баром до закрытия;
+		* - `placement` настраивает угол экрана; слой — `--gr-z-toast`.
+		*/
+		const TONE_META = {
+			primary: {
+				icon: info_default,
+				color: "var(--gr-primary)",
+				role: "status"
+			},
+			neutral: {
+				icon: info_default,
+				color: "var(--gr-muted-fg)",
+				role: "status"
+			},
+			info: {
+				icon: info_default,
+				color: "var(--gr-info)",
+				role: "status"
+			},
+			success: {
+				icon: check_circle_default,
+				color: "var(--gr-success)",
+				role: "status"
+			},
+			warning: {
+				icon: alert_triangle_default,
+				color: "var(--gr-warning)",
+				role: "alert"
+			},
+			danger: {
+				icon: x_circle_default,
+				color: "var(--gr-danger)",
+				role: "alert"
+			},
+			slate: {
+				icon: info_default,
+				color: "var(--gr-slate)",
+				role: "status"
+			},
+			azure: {
+				icon: info_default,
+				color: "var(--gr-azure)",
+				role: "status"
+			}
+		};
+		const props = __props;
+		/**
+		* Слот `actions` полностью заменяет дефолтные action-кнопки тоста. Получает сам
+		* `toast` и `dismiss` — функцию, закрывающую именно этот тост.
+		*/
+		const { t } = useGranularityTranslations();
+		const slots = useSlots();
+		const resolvedDismissLabel = computed(() => props.dismissLabel ?? t("gr.toaster.dismiss", "Dismiss"));
+		const resolvedRegionLabel = computed(() => props.regionLabel ?? t("gr.toaster.region", "Notifications"));
+		const { list, dismiss, pause, resume } = useToast();
+		function toastActions(toast) {
+			return [...toast.action ? [toast.action] : [], ...toast.actions ?? []];
+		}
+		function hasActions(toast) {
+			return Boolean(slots.actions) || toastActions(toast).length > 0;
+		}
+		function onAction(toast, action) {
+			action.onClick();
+			if (action.dismissOnClick !== false) dismiss(toast.id);
+		}
+		const { target: portalTarget, enabled: teleportEnabled } = usePortalTarget();
+		const themeAttrs = useGrThemeAttrs();
+		const visibleToasts = computed(() => list.value.slice(-Math.max(1, props.maxVisible)));
+		const visibleIds = computed(() => new Set(visibleToasts.value.map((toast) => toast.id)));
+		const hovered = ref(false);
+		const focusWithin = ref(false);
+		const paused = computed(() => hovered.value || focusWithin.value);
+		watchEffect(() => {
+			for (const toast of list.value) if (toast.timeoutMs > 0 && visibleIds.value.has(toast.id) && !paused.value) resume(toast.id);
+			else pause(toast.id);
+		});
+		function metaFor(tone) {
+			return TONE_META[tone] ?? TONE_META.info;
+		}
+		const containerClass = computed(() => PLACEMENT_CLASS[props.placement]);
+		const containerStyle = computed(() => {
+			if (props.width === void 0) return void 0;
+			return { "--gr-toaster-width": typeof props.width === "number" ? `${props.width}px` : props.width };
+		});
+		const containerEl = ref(null);
+		/**
+		* Переводит фокус на верхний тост. Тост фокусируем только программно
+		* (`tabindex="-1"`): собственной остановкой `Tab` стек быть не должен, иначе
+		* всплывающее уведомление перехватывало бы обход страницы.
+		*/
+		function focus() {
+			const target = containerEl.value?.querySelector("[data-gr-toast]");
+			if (!target) return false;
+			target.focus();
+			return true;
+		}
+		const hotkeyBinding = computed(() => ({
+			enabled: props.focusHotkey !== false && visibleToasts.value.length > 0,
+			handlers: { [props.focusHotkey || "F6"]: {
+				handler: onFocusHotkey,
+				allowInEditable: true
+			} }
+		}));
+		function onFocusHotkey(event) {
+			if (focus()) event.preventDefault();
+		}
+		__expose({ focus });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Teleport, {
+				to: unref(portalTarget),
+				disabled: !unref(teleportEnabled)
+			}, [withDirectives((openBlock(), createElementBlock("div", mergeProps({
+				ref_key: "containerEl",
+				ref: containerEl
+			}, unref(themeAttrs), {
+				"data-gr-toaster": "",
+				"data-gr-overlay-root": "",
+				role: "region",
+				"aria-label": resolvedRegionLabel.value,
+				class: ["fixed z-[var(--gr-z-toast)] w-[var(--gr-toaster-width,360px)] max-w-[calc(100vw-2rem)]", containerClass.value],
+				style: containerStyle.value,
+				onMouseenter: _cache[0] || (_cache[0] = ($event) => hovered.value = true),
+				onMouseleave: _cache[1] || (_cache[1] = ($event) => hovered.value = false),
+				onFocusin: _cache[2] || (_cache[2] = ($event) => focusWithin.value = true),
+				onFocusout: _cache[3] || (_cache[3] = ($event) => focusWithin.value = false)
+			}), [createVNode(TransitionGroup, {
+				tag: "div",
+				class: "grid gap-3",
+				"enter-active-class": "transition duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]",
+				"enter-from-class": "opacity-0 translate-y-2",
+				"enter-to-class": "opacity-100 translate-y-0",
+				"leave-active-class": "transition duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-in)] absolute",
+				"leave-from-class": "opacity-100 translate-y-0",
+				"leave-to-class": "opacity-0 translate-y-2",
+				"move-class": "transition-transform duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]"
+			}, {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleToasts.value, (toast) => {
+					return openBlock(), createElementBlock("div", {
+						key: toast.id,
+						"data-gr-toast": "",
+						"data-tone": toast.tone,
+						role: metaFor(toast.tone).role,
+						"aria-atomic": "true",
+						tabindex: "-1",
+						class: "relative overflow-hidden rounded-[var(--gr-radius-lg)] border border-[var(--gr-brd)] bg-[var(--gr-card)] px-4 py-3 shadow-[var(--gr-shadow-2)] focus-visible:outline-none focus-visible:shadow-[var(--gr-shadow-2),0_0_0_2px_var(--gr-ring)]"
+					}, [createElementVNode("div", _hoisted_3, [
+						createVNode(unref(GrIcon_default), {
+							size: "md",
+							class: "mt-0.5",
+							style: normalizeStyle({ color: metaFor(toast.tone).color })
+						}, {
+							default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(metaFor(toast.tone).icon)))]),
+							_: 2
+						}, 1032, ["style"]),
+						createElementVNode("div", _hoisted_4, [
+							createElementVNode("div", _hoisted_5, toDisplayString(toast.title), 1),
+							toast.message ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(toast.message), 1)) : createCommentVNode("", true),
+							hasActions(toast) ? (openBlock(), createElementBlock("div", _hoisted_7, [renderSlot(_ctx.$slots, "actions", {
+								toast,
+								dismiss: () => unref(dismiss)(toast.id)
+							}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(toastActions(toast), (action, index) => {
+								return openBlock(), createBlock(unref(GrButton_default), {
+									key: index,
+									variant: action.variant ?? "outline",
+									size: action.size ?? "sm",
+									"data-gr-toast-action": "",
+									onClick: ($event) => onAction(toast, action)
+								}, {
+									default: withCtx(() => [createTextVNode(toDisplayString(action.label), 1)]),
+									_: 2
+								}, 1032, [
+									"variant",
+									"size",
+									"onClick"
+								]);
+							}), 128))], true)])) : createCommentVNode("", true)
+						]),
+						createVNode(unref(GrButton_default), {
+							variant: "ghost",
+							size: "sm",
+							square: "",
+							"aria-label": resolvedDismissLabel.value,
+							onClick: ($event) => unref(dismiss)(toast.id)
+						}, {
+							default: withCtx(() => [createVNode(unref(GrIcon_default), { size: "sm" }, {
+								default: withCtx(() => [createVNode(unref(x_default))]),
+								_: 1
+							})]),
+							_: 1
+						}, 8, ["aria-label", "onClick"])
+					]), toast.timeoutMs > 0 ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						"data-gr-toast-progress": "",
+						"aria-hidden": "true",
+						class: "gr-toast-progress absolute bottom-0 left-0 h-[2px] w-full origin-left",
+						style: normalizeStyle({
+							backgroundColor: metaFor(toast.tone).color,
+							animationDuration: `${toast.timeoutMs}ms`,
+							animationPlayState: paused.value ? "paused" : "running"
+						})
+					}, null, 4)) : createCommentVNode("", true)], 8, _hoisted_2);
+				}), 128))]),
+				_: 3
+			})], 16, _hoisted_1)), [[unref(vHotkey), hotkeyBinding.value]])], 8, ["to", "disabled"]);
+		};
+	}
+}), [["__scopeId", "data-v-0cce147a"]]);
+//#endregion
+export { GrToaster_default as t };

package/dist/components/GrToaster/chunks/GrToaster-BKQy3Srm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrToaster-BKQy3Srm.js","names":[],"sources":["../../../../src/components/GrToaster/GrToaster.vue","../../../../src/components/GrToaster/GrToaster.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * GrToaster — GR-примитив области уведомлений (toast).\n *\n * Модель состояния берётся из `useToast`, поэтому в приложении предполагается\n * **один активный `GrToaster`** на корень (или app-scoped через плагин).\n *\n * A11y:\n * - контейнер — `role=\"region\"` с `aria-label` (i18n-проп `regionLabel`);\n * - объявляет каждый тост сам собой: `role=\"status\"`, а критичные\n *   (`warning`/`danger`) — ассертивный `role=\"alert\"`. Обёртки-live-region над\n *   ними нет намеренно: вложение регионов с разной ассертивностью\n *   спецификацией не определено, браузеры и SR расходятся вплоть до потери\n *   объявления;\n * - стек достижим с клавиатуры по `focusHotkey` (по умолчанию `F6`) — тосты\n *   телепортированы в конец `body`, и без хоткея кнопка «Отменить» лежала бы\n *   за пределами разумного числа нажатий `Tab`.\n *\n * UX:\n * - `maxVisible` ограничивает стек; лишние ждут в очереди (их таймеры на паузе);\n * - автозакрытие **останавливается под курсором/фокусом** (WCAG 2.2.1) и\n *   визуализируется прогресс-баром до закрытия;\n * - `placement` настраивает угол экрана; слой — `--gr-z-toast`.\n */\nimport { computed, ref, useSlots, watchEffect } from 'vue'\n\nimport { usePortalTarget } from '../../composables/usePortalTarget'\nimport type { Component } from 'vue'\n\nimport { useToast } from '../../composables/useToast'\nimport { vHotkey } from '../../directives'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport type { GrToastTone, Toast, ToastAction } from '../../composables/useToast'\nimport GrButton from '../GrButton'\nimport GrIcon from '../GrIcon'\nimport { PLACEMENT_CLASS, type GrToasterPlacement } from './grToasterStyles'\n\nimport IconCheck from '~icons/lucide/check-circle'\nimport IconWarning from '~icons/lucide/alert-triangle'\nimport IconError from '~icons/lucide/x-circle'\nimport IconInfo from '~icons/lucide/info'\nimport IconClose from '~icons/lucide/x'\n\nexport type { GrToasterPlacement }\n\ninterface ToneMeta {\n  icon: Component\n  color: string\n  role: 'status' | 'alert'\n}\n\n// Единый маппинг по tone'у: иконка, цвет, a11y-роль. На уровне модуля —\n// чтобы не пересоздавать объект на каждый рендер.\nconst TONE_META: Record<GrToastTone, ToneMeta> = {\n  primary: { icon: IconInfo, color: 'var(--gr-primary)', role: 'status' },\n  neutral: { icon: IconInfo, color: 'var(--gr-muted-fg)', role: 'status' },\n  info: { icon: IconInfo, color: 'var(--gr-info)', role: 'status' },\n  success: { icon: IconCheck, color: 'var(--gr-success)', role: 'status' },\n  warning: { icon: IconWarning, color: 'var(--gr-warning)', role: 'alert' },\n  danger: { icon: IconError, color: 'var(--gr-danger)', role: 'alert' },\n  slate: { icon: IconInfo, color: 'var(--gr-slate)', role: 'status' },\n  azure: { icon: IconInfo, color: 'var(--gr-azure)', role: 'status' },\n}\n\nexport interface GrToasterProps {\n  /** Угол экрана для стека уведомлений. */\n  placement?: GrToasterPlacement\n  /** Максимум одновременно видимых тостов; остальные ждут в очереди. По умолчанию `4`. */\n  maxVisible?: number\n  /** A11y-лейбл кнопки закрытия (i18n). */\n  dismissLabel?: string\n  /** A11y-лейбл контейнера-региона (i18n). */\n  regionLabel?: string\n  /**\n   * Ширина стека. Число — пиксели, строка — любая CSS-длина. Уезжает в\n   * `--gr-toaster-width`, поэтому то же самое можно задать и темой.\n   */\n  width?: string | number\n  /**\n   * Клавиша перевода фокуса в стек уведомлений; `false` отключает хоткей.\n   * `F6` — рекомендация APG для перехода между «регионами» страницы.\n   */\n  focusHotkey?: string | false\n}\n\nimport { useGrThemeAttrs } from '../GrConfigProvider/context'\n\nconst props = withDefaults(defineProps<GrToasterProps>(), {\n  placement: 'top-right',\n  maxVisible: 4,\n  dismissLabel: undefined,\n  regionLabel: undefined,\n  width: undefined,\n  focusHotkey: 'F6',\n})\n\n/**\n * Слот `actions` полностью заменяет дефолтные action-кнопки тоста. Получает сам\n * `toast` и `dismiss` — функцию, закрывающую именно этот тост.\n */\ndefineSlots<{\n  actions?: (props: { toast: Toast, dismiss: () => void }) => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\nconst slots = useSlots()\nconst resolvedDismissLabel = computed(() => props.dismissLabel ?? t('gr.toaster.dismiss', 'Dismiss'))\nconst resolvedRegionLabel = computed(() => props.regionLabel ?? t('gr.toaster.region', 'Notifications'))\n\nconst { list, dismiss, pause, resume } = useToast()\n\n// Единый список кнопок тоста: `action` (шорткат) + массив `actions`.\nfunction toastActions(toast: Toast): ToastAction[] {\n  return [...(toast.action ? [toast.action] : []), ...(toast.actions ?? [])]\n}\n\n// Показываем блок действий, если есть кнопки или задан слот `actions`.\nfunction hasActions(toast: Toast): boolean {\n  return Boolean(slots.actions) || toastActions(toast).length > 0\n}\n\n// Клик по action-кнопке тоста: вызываем обработчик и (по умолчанию) закрываем тост.\nfunction onAction(toast: Toast, action: ToastAction): void {\n  action.onClick()\n  if (action.dismissOnClick !== false)\n    dismiss(toast.id)\n}\n\n// SSR-guard: на сервере `document.body` недоступен — отключаем `teleport`.\n// Телепорт включается только ПОСЛЕ монтирования: иначе первый клиентский\n// рендер не совпадает с серверным и ломается гидрация (см. композабл).\nconst { target: portalTarget, enabled: teleportEnabled } = usePortalTarget()\n\n// Тема поддерева на телепортированную панель: в DOM она уезжает в `body`, то\n// есть вне обёртки провайдера, и `data-theme` с неё не наследуется. В дереве\n// компонентов панель остаётся внутри — `inject` доходит, и тему она ставит себе\n// сама.\nconst themeAttrs = useGrThemeAttrs()\n\n// Видимые тосты (не больше `maxVisible`); остальные ждут в очереди. Список\n// хранится новейшими вперёд, поэтому «видимые дожинают, новые ждут» — это\n// хвост: старейшие N. Взяв голову, стек показывал бы новейшие, и каждый пуш\n// вытеснял бы с экрана тост, который пользователь ещё читает.\nconst visibleToasts = computed(() => list.value.slice(-Math.max(1, props.maxVisible)))\nconst visibleIds = computed(() => new Set(visibleToasts.value.map(toast => toast.id)))\n\n// Пауза под курсором/фокусом (WCAG 2.2.1). Флага два и они независимы: один\n// `paused` терялся на «фокус внутри + мышь прошла насквозь» — `mouseleave`\n// возобновлял отсчёт под клавиатурным фокусом.\nconst hovered = ref(false)\nconst focusWithin = ref(false)\nconst paused = computed(() => hovered.value || focusWithin.value)\n\n// Единый источник правды по таймерам: тост тикает, только если он видим И стек не на\n// паузе. Очередь и hover — на паузе. Реагирует на изменения списка/hover.\n//\n// `timeoutMs` читается ради зависимости, а не ради значения: `toast.promise` и\n// `update` перезапускают таймер уже существующего тоста, не трогая ни список, ни\n// паузу. Без этой зависимости эффект не просыпался бы, и заново заведённый\n// таймер тикал бы под курсором или у тоста, который ещё ждёт в очереди, — тот\n// сгорал бы, ни разу не показавшись.\nwatchEffect(() => {\n  for (const toast of list.value) {\n    const shouldTick = toast.timeoutMs > 0 && visibleIds.value.has(toast.id) && !paused.value\n\n    if (shouldTick)\n      resume(toast.id)\n    else\n      pause(toast.id)\n  }\n})\n\nfunction metaFor(tone: GrToastTone): ToneMeta {\n  return TONE_META[tone] ?? TONE_META.info\n}\n\nconst containerClass = computed(() => PLACEMENT_CLASS[props.placement])\n\nconst containerStyle = computed(() => {\n  if (props.width === undefined) return undefined\n\n  return { '--gr-toaster-width': typeof props.width === 'number' ? `${props.width}px` : props.width }\n})\n\nconst containerEl = ref<HTMLElement | null>(null)\n\n/**\n * Переводит фокус на верхний тост. Тост фокусируем только программно\n * (`tabindex=\"-1\"`): собственной остановкой `Tab` стек быть не должен, иначе\n * всплывающее уведомление перехватывало бы обход страницы.\n */\nfunction focus(): boolean {\n  const target = containerEl.value?.querySelector<HTMLElement>('[data-gr-toast]')\n  if (!target) return false\n\n  target.focus()\n  return true\n}\n\nconst hotkeyBinding = computed(() => ({\n  enabled: props.focusHotkey !== false && visibleToasts.value.length > 0,\n  handlers: { [props.focusHotkey || 'F6']: { handler: onFocusHotkey, allowInEditable: true } },\n}))\n\nfunction onFocusHotkey(event: KeyboardEvent): void {\n  if (focus()) event.preventDefault()\n}\n\ndefineExpose({ focus })\n</script>\n\n<template>\n  <teleport :to=\"portalTarget\" :disabled=\"!teleportEnabled\">\n    <div\n        ref=\"containerEl\"\n        v-hotkey=\"hotkeyBinding\"\n        v-bind=\"themeAttrs\"\n        data-gr-toaster\n        data-gr-overlay-root\n        role=\"region\"\n        :aria-label=\"resolvedRegionLabel\"\n        class=\"fixed z-[var(--gr-z-toast)] w-[var(--gr-toaster-width,360px)] max-w-[calc(100vw-2rem)]\"\n        :class=\"containerClass\"\n        :style=\"containerStyle\"\n        @mouseenter=\"hovered = true\"\n        @mouseleave=\"hovered = false\"\n        @focusin=\"focusWithin = true\"\n        @focusout=\"focusWithin = false\"\n    >\n      <TransitionGroup\n          tag=\"div\"\n          class=\"grid gap-3\"\n          enter-active-class=\"transition duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]\"\n          enter-from-class=\"opacity-0 translate-y-2\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-in)] absolute\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-2\"\n          move-class=\"transition-transform duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]\"\n      >\n        <div\n            v-for=\"toast in visibleToasts\"\n            :key=\"toast.id\"\n            data-gr-toast\n            :data-tone=\"toast.tone\"\n            :role=\"metaFor(toast.tone).role\"\n            aria-atomic=\"true\"\n            tabindex=\"-1\"\n            class=\"relative overflow-hidden rounded-[var(--gr-radius-lg)] border border-[var(--gr-brd)] bg-[var(--gr-card)] px-4 py-3 shadow-[var(--gr-shadow-2)] focus-visible:outline-none focus-visible:shadow-[var(--gr-shadow-2),0_0_0_2px_var(--gr-ring)]\"\n        >\n          <div class=\"flex items-start gap-3\">\n            <GrIcon size=\"md\" class=\"mt-0.5\" :style=\"{ color: metaFor(toast.tone).color }\">\n              <component :is=\"metaFor(toast.tone).icon\" />\n            </GrIcon>\n            <div class=\"min-w-0 flex-1\">\n              <div class=\"text-[length:var(--gr-text-sm)] font-700\">\n                {{ toast.title }}\n              </div>\n              <div v-if=\"toast.message\" class=\"mt-0.5 text-[length:var(--gr-text-sm)] text-[var(--gr-muted-fg)]\">\n                {{ toast.message }}\n              </div>\n\n              <!-- Action-кнопки тоста: например «Отменить»/«Повторить». Можно\n                   задать массивом (`actions`) или переопределить слотом. -->\n              <div v-if=\"hasActions(toast)\" class=\"mt-2 flex flex-wrap gap-2\">\n                <slot name=\"actions\" :toast=\"toast\" :dismiss=\"() => dismiss(toast.id)\">\n                  <GrButton\n                      v-for=\"(action, index) in toastActions(toast)\"\n                      :key=\"index\"\n                      :variant=\"action.variant ?? 'outline'\"\n                      :size=\"action.size ?? 'sm'\"\n                      data-gr-toast-action\n                      @click=\"onAction(toast, action)\"\n                  >\n                    {{ action.label }}\n                  </GrButton>\n                </slot>\n              </div>\n            </div>\n            <GrButton\n                variant=\"ghost\"\n                size=\"sm\"\n                square\n                :aria-label=\"resolvedDismissLabel\"\n                @click=\"dismiss(toast.id)\"\n            >\n              <GrIcon size=\"sm\">\n                <IconClose />\n              </GrIcon>\n            </GrButton>\n          </div>\n\n          <!-- Прогресс до автозакрытия; замирает вместе с таймером на паузе. -->\n          <div\n              v-if=\"toast.timeoutMs > 0\"\n              data-gr-toast-progress\n              aria-hidden=\"true\"\n              class=\"gr-toast-progress absolute bottom-0 left-0 h-[2px] w-full origin-left\"\n              :style=\"{\n                backgroundColor: metaFor(toast.tone).color,\n                animationDuration: `${toast.timeoutMs}ms`,\n                animationPlayState: paused ? 'paused' : 'running',\n              }\"\n          />\n        </div>\n      </TransitionGroup>\n    </div>\n  </teleport>\n</template>\n\n<style scoped>\n.gr-toast-progress {\n  animation-name: gr-toast-progress;\n  animation-timing-function: linear;\n  animation-fill-mode: forwards;\n}\n\n@keyframes gr-toast-progress {\n  from {\n    transform: scaleX(1);\n  }\n  to {\n    transform: scaleX(0);\n  }\n}\n\n/*\n * Единственная анимация пакета, которую глобальный кламп чинит неверно.\n *\n * У полосы `animation-fill-mode: forwards`, поэтому сжатая до `0.01ms` она не\n * возвращается в исходное состояние, а фиксируется на `scaleX(0)`: таймер\n * выглядит истёкшим, пока тост ещё висит на экране. Полоса — единственный\n * носитель этого смысла, и статичной её оставить нельзя, поэтому под reduce она\n * убирается совсем. Автозакрытие ведёт JS-таймер, оно не страдает, а сам элемент\n * и так `aria-hidden`.\n */\n@media (prefers-reduced-motion: reduce) {\n  .gr-toast-progress {\n    display: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\n/**\n * GrToaster — GR-примитив области уведомлений (toast).\n *\n * Модель состояния берётся из `useToast`, поэтому в приложении предполагается\n * **один активный `GrToaster`** на корень (или app-scoped через плагин).\n *\n * A11y:\n * - контейнер — `role=\"region\"` с `aria-label` (i18n-проп `regionLabel`);\n * - объявляет каждый тост сам собой: `role=\"status\"`, а критичные\n *   (`warning`/`danger`) — ассертивный `role=\"alert\"`. Обёртки-live-region над\n *   ними нет намеренно: вложение регионов с разной ассертивностью\n *   спецификацией не определено, браузеры и SR расходятся вплоть до потери\n *   объявления;\n * - стек достижим с клавиатуры по `focusHotkey` (по умолчанию `F6`) — тосты\n *   телепортированы в конец `body`, и без хоткея кнопка «Отменить» лежала бы\n *   за пределами разумного числа нажатий `Tab`.\n *\n * UX:\n * - `maxVisible` ограничивает стек; лишние ждут в очереди (их таймеры на паузе);\n * - автозакрытие **останавливается под курсором/фокусом** (WCAG 2.2.1) и\n *   визуализируется прогресс-баром до закрытия;\n * - `placement` настраивает угол экрана; слой — `--gr-z-toast`.\n */\nimport { computed, ref, useSlots, watchEffect } from 'vue'\n\nimport { usePortalTarget } from '../../composables/usePortalTarget'\nimport type { Component } from 'vue'\n\nimport { useToast } from '../../composables/useToast'\nimport { vHotkey } from '../../directives'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport type { GrToastTone, Toast, ToastAction } from '../../composables/useToast'\nimport GrButton from '../GrButton'\nimport GrIcon from '../GrIcon'\nimport { PLACEMENT_CLASS, type GrToasterPlacement } from './grToasterStyles'\n\nimport IconCheck from '~icons/lucide/check-circle'\nimport IconWarning from '~icons/lucide/alert-triangle'\nimport IconError from '~icons/lucide/x-circle'\nimport IconInfo from '~icons/lucide/info'\nimport IconClose from '~icons/lucide/x'\n\nexport type { GrToasterPlacement }\n\ninterface ToneMeta {\n  icon: Component\n  color: string\n  role: 'status' | 'alert'\n}\n\n// Единый маппинг по tone'у: иконка, цвет, a11y-роль. На уровне модуля —\n// чтобы не пересоздавать объект на каждый рендер.\nconst TONE_META: Record<GrToastTone, ToneMeta> = {\n  primary: { icon: IconInfo, color: 'var(--gr-primary)', role: 'status' },\n  neutral: { icon: IconInfo, color: 'var(--gr-muted-fg)', role: 'status' },\n  info: { icon: IconInfo, color: 'var(--gr-info)', role: 'status' },\n  success: { icon: IconCheck, color: 'var(--gr-success)', role: 'status' },\n  warning: { icon: IconWarning, color: 'var(--gr-warning)', role: 'alert' },\n  danger: { icon: IconError, color: 'var(--gr-danger)', role: 'alert' },\n  slate: { icon: IconInfo, color: 'var(--gr-slate)', role: 'status' },\n  azure: { icon: IconInfo, color: 'var(--gr-azure)', role: 'status' },\n}\n\nexport interface GrToasterProps {\n  /** Угол экрана для стека уведомлений. */\n  placement?: GrToasterPlacement\n  /** Максимум одновременно видимых тостов; остальные ждут в очереди. По умолчанию `4`. */\n  maxVisible?: number\n  /** A11y-лейбл кнопки закрытия (i18n). */\n  dismissLabel?: string\n  /** A11y-лейбл контейнера-региона (i18n). */\n  regionLabel?: string\n  /**\n   * Ширина стека. Число — пиксели, строка — любая CSS-длина. Уезжает в\n   * `--gr-toaster-width`, поэтому то же самое можно задать и темой.\n   */\n  width?: string | number\n  /**\n   * Клавиша перевода фокуса в стек уведомлений; `false` отключает хоткей.\n   * `F6` — рекомендация APG для перехода между «регионами» страницы.\n   */\n  focusHotkey?: string | false\n}\n\nimport { useGrThemeAttrs } from '../GrConfigProvider/context'\n\nconst props = withDefaults(defineProps<GrToasterProps>(), {\n  placement: 'top-right',\n  maxVisible: 4,\n  dismissLabel: undefined,\n  regionLabel: undefined,\n  width: undefined,\n  focusHotkey: 'F6',\n})\n\n/**\n * Слот `actions` полностью заменяет дефолтные action-кнопки тоста. Получает сам\n * `toast` и `dismiss` — функцию, закрывающую именно этот тост.\n */\ndefineSlots<{\n  actions?: (props: { toast: Toast, dismiss: () => void }) => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\nconst slots = useSlots()\nconst resolvedDismissLabel = computed(() => props.dismissLabel ?? t('gr.toaster.dismiss', 'Dismiss'))\nconst resolvedRegionLabel = computed(() => props.regionLabel ?? t('gr.toaster.region', 'Notifications'))\n\nconst { list, dismiss, pause, resume } = useToast()\n\n// Единый список кнопок тоста: `action` (шорткат) + массив `actions`.\nfunction toastActions(toast: Toast): ToastAction[] {\n  return [...(toast.action ? [toast.action] : []), ...(toast.actions ?? [])]\n}\n\n// Показываем блок действий, если есть кнопки или задан слот `actions`.\nfunction hasActions(toast: Toast): boolean {\n  return Boolean(slots.actions) || toastActions(toast).length > 0\n}\n\n// Клик по action-кнопке тоста: вызываем обработчик и (по умолчанию) закрываем тост.\nfunction onAction(toast: Toast, action: ToastAction): void {\n  action.onClick()\n  if (action.dismissOnClick !== false)\n    dismiss(toast.id)\n}\n\n// SSR-guard: на сервере `document.body` недоступен — отключаем `teleport`.\n// Телепорт включается только ПОСЛЕ монтирования: иначе первый клиентский\n// рендер не совпадает с серверным и ломается гидрация (см. композабл).\nconst { target: portalTarget, enabled: teleportEnabled } = usePortalTarget()\n\n// Тема поддерева на телепортированную панель: в DOM она уезжает в `body`, то\n// есть вне обёртки провайдера, и `data-theme` с неё не наследуется. В дереве\n// компонентов панель остаётся внутри — `inject` доходит, и тему она ставит себе\n// сама.\nconst themeAttrs = useGrThemeAttrs()\n\n// Видимые тосты (не больше `maxVisible`); остальные ждут в очереди. Список\n// хранится новейшими вперёд, поэтому «видимые дожинают, новые ждут» — это\n// хвост: старейшие N. Взяв голову, стек показывал бы новейшие, и каждый пуш\n// вытеснял бы с экрана тост, который пользователь ещё читает.\nconst visibleToasts = computed(() => list.value.slice(-Math.max(1, props.maxVisible)))\nconst visibleIds = computed(() => new Set(visibleToasts.value.map(toast => toast.id)))\n\n// Пауза под курсором/фокусом (WCAG 2.2.1). Флага два и они независимы: один\n// `paused` терялся на «фокус внутри + мышь прошла насквозь» — `mouseleave`\n// возобновлял отсчёт под клавиатурным фокусом.\nconst hovered = ref(false)\nconst focusWithin = ref(false)\nconst paused = computed(() => hovered.value || focusWithin.value)\n\n// Единый источник правды по таймерам: тост тикает, только если он видим И стек не на\n// паузе. Очередь и hover — на паузе. Реагирует на изменения списка/hover.\n//\n// `timeoutMs` читается ради зависимости, а не ради значения: `toast.promise` и\n// `update` перезапускают таймер уже существующего тоста, не трогая ни список, ни\n// паузу. Без этой зависимости эффект не просыпался бы, и заново заведённый\n// таймер тикал бы под курсором или у тоста, который ещё ждёт в очереди, — тот\n// сгорал бы, ни разу не показавшись.\nwatchEffect(() => {\n  for (const toast of list.value) {\n    const shouldTick = toast.timeoutMs > 0 && visibleIds.value.has(toast.id) && !paused.value\n\n    if (shouldTick)\n      resume(toast.id)\n    else\n      pause(toast.id)\n  }\n})\n\nfunction metaFor(tone: GrToastTone): ToneMeta {\n  return TONE_META[tone] ?? TONE_META.info\n}\n\nconst containerClass = computed(() => PLACEMENT_CLASS[props.placement])\n\nconst containerStyle = computed(() => {\n  if (props.width === undefined) return undefined\n\n  return { '--gr-toaster-width': typeof props.width === 'number' ? `${props.width}px` : props.width }\n})\n\nconst containerEl = ref<HTMLElement | null>(null)\n\n/**\n * Переводит фокус на верхний тост. Тост фокусируем только программно\n * (`tabindex=\"-1\"`): собственной остановкой `Tab` стек быть не должен, иначе\n * всплывающее уведомление перехватывало бы обход страницы.\n */\nfunction focus(): boolean {\n  const target = containerEl.value?.querySelector<HTMLElement>('[data-gr-toast]')\n  if (!target) return false\n\n  target.focus()\n  return true\n}\n\nconst hotkeyBinding = computed(() => ({\n  enabled: props.focusHotkey !== false && visibleToasts.value.length > 0,\n  handlers: { [props.focusHotkey || 'F6']: { handler: onFocusHotkey, allowInEditable: true } },\n}))\n\nfunction onFocusHotkey(event: KeyboardEvent): void {\n  if (focus()) event.preventDefault()\n}\n\ndefineExpose({ focus })\n</script>\n\n<template>\n  <teleport :to=\"portalTarget\" :disabled=\"!teleportEnabled\">\n    <div\n        ref=\"containerEl\"\n        v-hotkey=\"hotkeyBinding\"\n        v-bind=\"themeAttrs\"\n        data-gr-toaster\n        data-gr-overlay-root\n        role=\"region\"\n        :aria-label=\"resolvedRegionLabel\"\n        class=\"fixed z-[var(--gr-z-toast)] w-[var(--gr-toaster-width,360px)] max-w-[calc(100vw-2rem)]\"\n        :class=\"containerClass\"\n        :style=\"containerStyle\"\n        @mouseenter=\"hovered = true\"\n        @mouseleave=\"hovered = false\"\n        @focusin=\"focusWithin = true\"\n        @focusout=\"focusWithin = false\"\n    >\n      <TransitionGroup\n          tag=\"div\"\n          class=\"grid gap-3\"\n          enter-active-class=\"transition duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]\"\n          enter-from-class=\"opacity-0 translate-y-2\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-in)] absolute\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-2\"\n          move-class=\"transition-transform duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]\"\n      >\n        <div\n            v-for=\"toast in visibleToasts\"\n            :key=\"toast.id\"\n            data-gr-toast\n            :data-tone=\"toast.tone\"\n            :role=\"metaFor(toast.tone).role\"\n            aria-atomic=\"true\"\n            tabindex=\"-1\"\n            class=\"relative overflow-hidden rounded-[var(--gr-radius-lg)] border border-[var(--gr-brd)] bg-[var(--gr-card)] px-4 py-3 shadow-[var(--gr-shadow-2)] focus-visible:outline-none focus-visible:shadow-[var(--gr-shadow-2),0_0_0_2px_var(--gr-ring)]\"\n        >\n          <div class=\"flex items-start gap-3\">\n            <GrIcon size=\"md\" class=\"mt-0.5\" :style=\"{ color: metaFor(toast.tone).color }\">\n              <component :is=\"metaFor(toast.tone).icon\" />\n            </GrIcon>\n            <div class=\"min-w-0 flex-1\">\n              <div class=\"text-[length:var(--gr-text-sm)] font-700\">\n                {{ toast.title }}\n              </div>\n              <div v-if=\"toast.message\" class=\"mt-0.5 text-[length:var(--gr-text-sm)] text-[var(--gr-muted-fg)]\">\n                {{ toast.message }}\n              </div>\n\n              <!-- Action-кнопки тоста: например «Отменить»/«Повторить». Можно\n                   задать массивом (`actions`) или переопределить слотом. -->\n              <div v-if=\"hasActions(toast)\" class=\"mt-2 flex flex-wrap gap-2\">\n                <slot name=\"actions\" :toast=\"toast\" :dismiss=\"() => dismiss(toast.id)\">\n                  <GrButton\n                      v-for=\"(action, index) in toastActions(toast)\"\n                      :key=\"index\"\n                      :variant=\"action.variant ?? 'outline'\"\n                      :size=\"action.size ?? 'sm'\"\n                      data-gr-toast-action\n                      @click=\"onAction(toast, action)\"\n                  >\n                    {{ action.label }}\n                  </GrButton>\n                </slot>\n              </div>\n            </div>\n            <GrButton\n                variant=\"ghost\"\n                size=\"sm\"\n                square\n                :aria-label=\"resolvedDismissLabel\"\n                @click=\"dismiss(toast.id)\"\n            >\n              <GrIcon size=\"sm\">\n                <IconClose />\n              </GrIcon>\n            </GrButton>\n          </div>\n\n          <!-- Прогресс до автозакрытия; замирает вместе с таймером на паузе. -->\n          <div\n              v-if=\"toast.timeoutMs > 0\"\n              data-gr-toast-progress\n              aria-hidden=\"true\"\n              class=\"gr-toast-progress absolute bottom-0 left-0 h-[2px] w-full origin-left\"\n              :style=\"{\n                backgroundColor: metaFor(toast.tone).color,\n                animationDuration: `${toast.timeoutMs}ms`,\n                animationPlayState: paused ? 'paused' : 'running',\n              }\"\n          />\n        </div>\n      </TransitionGroup>\n    </div>\n  </teleport>\n</template>\n\n<style scoped>\n.gr-toast-progress {\n  animation-name: gr-toast-progress;\n  animation-timing-function: linear;\n  animation-fill-mode: forwards;\n}\n\n@keyframes gr-toast-progress {\n  from {\n    transform: scaleX(1);\n  }\n  to {\n    transform: scaleX(0);\n  }\n}\n\n/*\n * Единственная анимация пакета, которую глобальный кламп чинит неверно.\n *\n * У полосы `animation-fill-mode: forwards`, поэтому сжатая до `0.01ms` она не\n * возвращается в исходное состояние, а фиксируется на `scaleX(0)`: таймер\n * выглядит истёкшим, пока тост ещё висит на экране. Полоса — единственный\n * носитель этого смысла, и статичной её оставить нельзя, поэтому под reduce она\n * убирается совсем. Автозакрытие ведёт JS-таймер, оно не страдает, а сам элемент\n * и так `aria-hidden`.\n */\n@media (prefers-reduced-motion: reduce) {\n  .gr-toast-progress {\n    display: none;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/GrToaster/index.js

@@ -1,3 +1,3 @@
 import { n as grToasterSafelist, t as grToasterConfig } from "../../chunks/config-LGrZIdaZ.js";
-import { t as GrToaster_default } from "./chunks/GrToaster-BVHjIHcM.js";
+import { t as GrToaster_default } from "./chunks/GrToaster-BKQy3Srm.js";
 export { GrToaster_default as GrToaster, GrToaster_default as default, grToasterConfig, grToasterSafelist };

package/dist/components/GrToaster/styles.css

@@ -0,0 +1 @@
+.gr-toast-progress[data-v-0cce147a]{animation-name:gr-toast-progress-0cce147a;animation-timing-function:linear;animation-fill-mode:forwards}@keyframes gr-toast-progress-0cce147a{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media (prefers-reduced-motion:reduce){.gr-toast-progress[data-v-0cce147a]{display:none}}

package/dist/components/GrTooltip/chunks/GrTooltip-DEbejfhA.js

@@ -0,0 +1,185 @@
+import { t as info_default } from "../../../chunks/info-Be2OccTu.js";
+import { c as useGrThemeAttrs, o as useGrComponentSize } from "../../../chunks/context-BSYR7RZs.js";
+import { t as usePortalTarget } from "../../../chunks/usePortalTarget-RyzEgNTb.js";
+import { vClickOutside } from "../../../directives/clickOutside.js";
+import { t as GrIcon_default } from "../../GrIcon/chunks/GrIcon-BvA2ZGXP.js";
+import { useFloating } from "../../../composables/useFloating.js";
+import { useDismissible } from "../../../composables/useDismissible.js";
+import { a as triggerIconSizes, i as panelWidths, r as panelSizes } from "../../../chunks/config-CN2ULSQL2.js";
+import { Teleport, Transition, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeStyle, onMounted, onUnmounted, onUpdated, openBlock, ref, renderSlot, toDisplayString, unref, useId, useSlots, vShow, watchEffect, withCtx, withDirectives } from "vue";
+//#region src/components/GrTooltip/GrTooltip.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	"data-gr-tooltip": "",
+	class: "relative inline-flex"
+};
+var _hoisted_2 = ["tabindex", "aria-describedby"];
+var FOCUSABLE_SELECTOR = "a[href],button,input,select,textarea,[tabindex]:not([tabindex=\"-1\"])";
+//#endregion
+//#region src/components/GrTooltip/GrTooltip.vue
+var GrTooltip_default = /* @__PURE__ */ defineComponent({
+	__name: "GrTooltip",
+	props: {
+		text: { default: void 0 },
+		iconColor: { default: "var(--gr-muted-fg)" },
+		size: { default: void 0 },
+		placement: { default: "top" },
+		offsetPx: { default: void 0 },
+		openDelay: { default: 0 },
+		closeDelay: { default: 0 },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		open: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	emits: ["update:open"],
+	setup(__props, { emit: __emit }) {
+		/**
+		* GrTooltip — GR-примитив инлайн-подсказки на hover/focus.
+		*
+		* По умолчанию триггер — иконка info; можно заменить через слот.
+		* A11y:
+		* - `role="tooltip"` связывается с триггером через уникальный `aria-describedby`;
+		* - подсказка закрывается по `Escape` (WCAG 1.4.13 «Content on Hover or Focus» —
+		*   dismissible без необходимости двигать курсор/фокус);
+		* - панель не интерактивна (`pointer-events-none`), поэтому «hoverable»-требование
+		*   того же критерия неприменимо — навести курсор на саму подсказку невозможно.
+		*
+		* Позиционирование — через общий `useFloating` (см. `composables/internal`):
+		* `placement` задаёт предпочтительную сторону, `flip` переворачивает подсказку,
+		* если места не хватает, а `shift` не даёт ей вылезти за края viewport.
+		*/
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrTooltip" });
+		const panelClass = computed(() => [panelSizes[resolvedSize.value], panelWidths[resolvedSize.value]].join(" "));
+		const triggerIconSize = computed(() => triggerIconSizes[resolvedSize.value]);
+		const tooltipId = `gr-tooltip-${useId()}`;
+		const triggerStyle = computed(() => ({ color: props.iconColor }));
+		const { target: portalTarget, enabled: teleportEnabled } = usePortalTarget();
+		const themeAttrs = useGrThemeAttrs();
+		const uncontrolledOpen = ref(false);
+		const triggerEl = ref(null);
+		const panelEl = ref(null);
+		/** Показывать нечего — пустая панель хуже отсутствующей. */
+		const hasContent = computed(() => Boolean(slots.content) || Boolean(props.text));
+		const open = computed({
+			get: () => {
+				if (props.disabled || !hasContent.value) return false;
+				return props.open ?? uncontrolledOpen.value;
+			},
+			set: (next) => {
+				uncontrolledOpen.value = next;
+				emit("update:open", next);
+			}
+		});
+		const { floatingStyle } = useFloating(triggerEl, panelEl, open, {
+			placement: () => props.placement,
+			get offsetPx() {
+				return props.offsetPx;
+			},
+			zIndexVar: "--gr-z-tooltip"
+		});
+		let delayTimer;
+		function schedule(next, delayMs) {
+			clearTimeout(delayTimer);
+			if (delayMs <= 0) {
+				open.value = next;
+				return;
+			}
+			delayTimer = setTimeout(() => {
+				open.value = next;
+			}, delayMs);
+		}
+		function show() {
+			if (props.disabled) return;
+			schedule(true, props.openDelay);
+		}
+		function hide() {
+			schedule(false, props.closeDelay);
+		}
+		/** Escape и клик вне закрывают мгновенно: задержка тут читалась бы как залипание. */
+		function dismiss() {
+			clearTimeout(delayTimer);
+			if (open.value) open.value = false;
+		}
+		const dismissOnOutside = computed(() => ({
+			handler: dismiss,
+			enabled: open.value
+		}));
+		/**
+		* На тач-устройствах hover не существует, а фокус по тапу не гарантирован —
+		* без этого подсказка там недоступна вовсе. Тап по триггеру переключает
+		* панель, тап вне — закрывает (`vClickOutside`).
+		*/
+		function onTouch() {
+			if (open.value) dismiss();
+			else show();
+		}
+		onUnmounted(() => clearTimeout(delayTimer));
+		useDismissible(open, dismiss);
+		const slotFocusableEl = ref(null);
+		function syncSlotFocusable() {
+			slotFocusableEl.value = slots.default ? triggerEl.value?.querySelector(FOCUSABLE_SELECTOR) ?? null : null;
+		}
+		onMounted(syncSlotFocusable);
+		onUpdated(syncSlotFocusable);
+		watchEffect((onCleanup) => {
+			const el = slotFocusableEl.value;
+			if (!el) return;
+			el.setAttribute("aria-describedby", tooltipId);
+			onCleanup(() => el.removeAttribute("aria-describedby"));
+		});
+		const wrapperTabindex = computed(() => slotFocusableEl.value ? void 0 : 0);
+		const wrapperDescribedBy = computed(() => slotFocusableEl.value ? void 0 : tooltipId);
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("span", _hoisted_1, [createElementVNode("span", {
+				ref_key: "triggerEl",
+				ref: triggerEl,
+				"data-gr-tooltip-trigger": "",
+				"data-testid": "gr-tooltip-trigger",
+				tabindex: wrapperTabindex.value,
+				"aria-describedby": wrapperDescribedBy.value,
+				class: "inline-flex items-center justify-center focus:outline-none",
+				style: normalizeStyle(triggerStyle.value),
+				onMouseenter: show,
+				onMouseleave: hide,
+				onFocusin: show,
+				onFocusout: hide,
+				onTouchstartPassive: onTouch
+			}, [renderSlot(_ctx.$slots, "default", {}, () => [createVNode(unref(GrIcon_default), { size: triggerIconSize.value }, {
+				default: withCtx(() => [createVNode(unref(info_default))]),
+				_: 1
+			}, 8, ["size"])])], 44, _hoisted_2), (openBlock(), createBlock(Teleport, {
+				to: unref(portalTarget),
+				disabled: !unref(teleportEnabled)
+			}, [createVNode(Transition, {
+				"enter-active-class": "transition-opacity duration-[var(--gr-duration-fast)]",
+				"enter-from-class": "opacity-0",
+				"enter-to-class": "opacity-100",
+				"leave-active-class": "transition-opacity duration-[var(--gr-duration-fast)]",
+				"leave-from-class": "opacity-100",
+				"leave-to-class": "opacity-0"
+			}, {
+				default: withCtx(() => [withDirectives(createElementVNode("span", mergeProps({
+					id: tooltipId,
+					ref_key: "panelEl",
+					ref: panelEl,
+					role: "tooltip"
+				}, unref(themeAttrs), {
+					"data-gr-tooltip-panel": "",
+					"data-gr-overlay-root": "",
+					class: ["pointer-events-none rounded-[var(--gr-radius-control)] border border-[var(--gr-brd)] bg-[var(--gr-popover)] text-[var(--gr-popover-fg)] shadow-[var(--gr-shadow-1)]", panelClass.value],
+					style: unref(floatingStyle)
+				}), [renderSlot(_ctx.$slots, "content", {}, () => [createTextVNode(toDisplayString(__props.text), 1)])], 16), [[vShow, open.value]])]),
+				_: 3
+			})], 8, ["to", "disabled"]))])), [[unref(vClickOutside), dismissOnOutside.value]]);
+		};
+	}
+});
+//#endregion
+export { GrTooltip_default as t };

package/dist/components/GrTooltip/chunks/GrTooltip-DEbejfhA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrTooltip-DEbejfhA.js","names":[],"sources":["../../../../src/components/GrTooltip/GrTooltip.vue","../../../../src/components/GrTooltip/GrTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * GrTooltip — GR-примитив инлайн-подсказки на hover/focus.\n *\n * По умолчанию триггер — иконка info; можно заменить через слот.\n * A11y:\n * - `role=\"tooltip\"` связывается с триггером через уникальный `aria-describedby`;\n * - подсказка закрывается по `Escape` (WCAG 1.4.13 «Content on Hover or Focus» —\n *   dismissible без необходимости двигать курсор/фокус);\n * - панель не интерактивна (`pointer-events-none`), поэтому «hoverable»-требование\n *   того же критерия неприменимо — навести курсор на саму подсказку невозможно.\n *\n * Позиционирование — через общий `useFloating` (см. `composables/internal`):\n * `placement` задаёт предпочтительную сторону, `flip` переворачивает подсказку,\n * если места не хватает, а `shift` не даёт ей вылезти за края viewport.\n */\nimport { computed, onMounted, onUnmounted, onUpdated, ref, useId, useSlots, watchEffect } from 'vue'\n\nimport { usePortalTarget } from '../../composables/usePortalTarget'\n\nimport { vClickOutside } from '../../directives'\nimport GrIcon from '../GrIcon'\nimport { useFloating, type UseFloatingPlacement } from '../../composables/useFloating'\nimport { useDismissible } from '../../composables/useDismissible'\nimport { useGrComponentSize, useGrThemeAttrs } from '../GrConfigProvider/context'\nimport { type GrTooltipSize, panelSizes, panelWidths, triggerIconSizes } from './grTooltipStyles'\n\nimport IconInfo from '~icons/lucide/info'\n\nexport type GrTooltipPlacement = UseFloatingPlacement\n\nexport interface GrTooltipProps {\n  /** Текст подсказки. Разметка вместо текста — слот `#content`. */\n  text?: string\n  /** Цвет триггер-иконки (CSS color). По умолчанию — `var(--gr-muted-fg)`. */\n  iconColor?: string\n  /** Размер панели и дефолтной триггер-иконки. */\n  size?: GrTooltipSize\n  /** Предпочтительная сторона панели; `flip` может её изменить. */\n  placement?: GrTooltipPlacement\n  /** Зазор между триггером и панелью, px. */\n  offsetPx?: number\n  /** Задержка перед показом, мс. Спасает от мигания при проведении курсором по панели кнопок. */\n  openDelay?: number\n  /** Задержка перед скрытием, мс. */\n  closeDelay?: number\n  /** Подсказка не показывается ничем — ни курсором, ни фокусом, ни `v-model:open`. */\n  disabled?: boolean\n  /** Управляемая видимость. Без неё компонент ведёт видимость сам. */\n  open?: boolean\n}\n\nexport interface GrTooltipEmits {\n  (e: 'update:open', value: boolean): void\n}\n\nconst props = withDefaults(defineProps<GrTooltipProps>(), {\n  text: undefined,\n  iconColor: 'var(--gr-muted-fg)',\n  size: undefined,\n  placement: 'top',\n  offsetPx: undefined,\n  openDelay: 0,\n  closeDelay: 0,\n  disabled: false,\n  open: undefined,\n})\n\nconst emit = defineEmits<GrTooltipEmits>()\n\ndefineSlots<{\n  /** Триггер. По умолчанию — иконка info. */\n  default?: () => unknown\n  /** Содержимое подсказки; заменяет проп `text`. */\n  content?: () => unknown\n}>()\n\nconst slots = useSlots()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrTooltip' })\n\nconst panelClass = computed(() => [\n  panelSizes[resolvedSize.value],\n  panelWidths[resolvedSize.value],\n].join(' '))\nconst triggerIconSize = computed(() => triggerIconSizes[resolvedSize.value])\n\nconst tooltipId = `gr-tooltip-${useId()}`\n\nconst triggerStyle = computed(() => ({ color: props.iconColor }))\n\n// Телепорт включается только ПОСЛЕ монтирования: иначе первый клиентский\n// рендер не совпадает с серверным и ломается гидрация (см. композабл).\nconst { target: portalTarget, enabled: teleportEnabled } = usePortalTarget()\n\n// Тема поддерева на телепортированную панель: в DOM она уезжает в `body`, то\n// есть вне обёртки провайдера, и `data-theme` с неё не наследуется. В дереве\n// компонентов панель остаётся внутри — `inject` доходит, и тему она ставит себе\n// сама.\nconst themeAttrs = useGrThemeAttrs()\n\nconst uncontrolledOpen = ref(false)\nconst triggerEl = ref<HTMLElement | null>(null)\nconst panelEl = ref<HTMLElement | null>(null)\n\n/** Показывать нечего — пустая панель хуже отсутствующей. */\nconst hasContent = computed(() => Boolean(slots.content) || Boolean(props.text))\n\nconst open = computed<boolean>({\n  get: () => {\n    if (props.disabled || !hasContent.value) return false\n    return props.open ?? uncontrolledOpen.value\n  },\n  set: (next) => {\n    uncontrolledOpen.value = next\n    emit('update:open', next)\n  },\n})\n\nconst { floatingStyle } = useFloating(triggerEl, panelEl, open, {\n  placement: () => props.placement,\n  // Геттер, а не значение: `useFloating` читает опцию на каждом пересчёте, и\n  // так проп остаётся живым, а не замирает на моменте setup.\n  get offsetPx() { return props.offsetPx },\n  zIndexVar: '--gr-z-tooltip',\n})\n\nlet delayTimer: ReturnType<typeof setTimeout> | undefined\n\nfunction schedule(next: boolean, delayMs: number): void {\n  clearTimeout(delayTimer)\n\n  if (delayMs <= 0) {\n    open.value = next\n    return\n  }\n\n  delayTimer = setTimeout(() => { open.value = next }, delayMs)\n}\n\nfunction show(): void {\n  if (props.disabled) return\n  schedule(true, props.openDelay)\n}\n\nfunction hide(): void {\n  schedule(false, props.closeDelay)\n}\n\n/** Escape и клик вне закрывают мгновенно: задержка тут читалась бы как залипание. */\nfunction dismiss(): void {\n  clearTimeout(delayTimer)\n  if (open.value) open.value = false\n}\n\n// Нужен только тач-режиму: курсор и фокус закрывают подсказку сами.\nconst dismissOnOutside = computed(() => ({ handler: dismiss, enabled: open.value }))\n\n/**\n * На тач-устройствах hover не существует, а фокус по тапу не гарантирован —\n * без этого подсказка там недоступна вовсе. Тап по триггеру переключает\n * панель, тап вне — закрывает (`vClickOutside`).\n */\nfunction onTouch(): void {\n  if (open.value) dismiss()\n  else show()\n}\n\nonUnmounted(() => clearTimeout(delayTimer))\n\nuseDismissible(open, dismiss)\n\nconst FOCUSABLE_SELECTOR = 'a[href],button,input,select,textarea,[tabindex]:not([tabindex=\"-1\"])'\n\n/**\n * Типовое употребление — подсказка у кнопки. Фокусируемая обёртка вокруг\n * фокусируемого контрола дала бы два таб-стопа на один визуальный элемент,\n * поэтому обёртка забирает `tabindex` только когда в слоте фокусироваться\n * нечему (текст, иконка). Разметку слота пишет потребитель, привязать к ней\n * `aria-describedby` из шаблона нельзя — отсюда единственная точка, где атрибут\n * ставится вручную.\n */\nconst slotFocusableEl = ref<HTMLElement | null>(null)\n\nfunction syncSlotFocusable(): void {\n  slotFocusableEl.value = slots.default\n    ? triggerEl.value?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR) ?? null\n    : null\n}\n\nonMounted(syncSlotFocusable)\nonUpdated(syncSlotFocusable)\n\nwatchEffect((onCleanup) => {\n  const el = slotFocusableEl.value\n  if (!el) return\n\n  el.setAttribute('aria-describedby', tooltipId)\n  onCleanup(() => el.removeAttribute('aria-describedby'))\n})\n\nconst wrapperTabindex = computed(() => (slotFocusableEl.value ? undefined : 0))\nconst wrapperDescribedBy = computed(() => (slotFocusableEl.value ? undefined : tooltipId))\n</script>\n\n<template>\n  <span\n    v-click-outside=\"dismissOnOutside\"\n    data-gr-tooltip\n    class=\"relative inline-flex\"\n  >\n    <span\n      ref=\"triggerEl\"\n      data-gr-tooltip-trigger\n      data-testid=\"gr-tooltip-trigger\"\n      :tabindex=\"wrapperTabindex\"\n      :aria-describedby=\"wrapperDescribedBy\"\n      class=\"inline-flex items-center justify-center focus:outline-none\"\n      :style=\"triggerStyle\"\n      @mouseenter=\"show\"\n      @mouseleave=\"hide\"\n      @focusin=\"show\"\n      @focusout=\"hide\"\n      @touchstart.passive=\"onTouch\"\n    >\n      <slot>\n        <GrIcon :size=\"triggerIconSize\">\n          <IconInfo />\n        </GrIcon>\n      </slot>\n    </span>\n\n    <teleport :to=\"portalTarget\" :disabled=\"!teleportEnabled\">\n      <transition\n        enter-active-class=\"transition-opacity duration-[var(--gr-duration-fast)]\"\n        enter-from-class=\"opacity-0\"\n        enter-to-class=\"opacity-100\"\n        leave-active-class=\"transition-opacity duration-[var(--gr-duration-fast)]\"\n        leave-from-class=\"opacity-100\"\n        leave-to-class=\"opacity-0\"\n      >\n        <span\n          v-show=\"open\"\n          :id=\"tooltipId\"\n          ref=\"panelEl\"\n          role=\"tooltip\"\n          v-bind=\"themeAttrs\"\n          data-gr-tooltip-panel\n          data-gr-overlay-root\n          class=\"pointer-events-none rounded-[var(--gr-radius-control)] border border-[var(--gr-brd)] bg-[var(--gr-popover)] text-[var(--gr-popover-fg)] shadow-[var(--gr-shadow-1)]\"\n          :class=\"panelClass\"\n          :style=\"floatingStyle\"\n        >\n          <slot name=\"content\">{{ text }}</slot>\n        </span>\n      </transition>\n    </teleport>\n  </span>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrTooltip — GR-примитив инлайн-подсказки на hover/focus.\n *\n * По умолчанию триггер — иконка info; можно заменить через слот.\n * A11y:\n * - `role=\"tooltip\"` связывается с триггером через уникальный `aria-describedby`;\n * - подсказка закрывается по `Escape` (WCAG 1.4.13 «Content on Hover or Focus» —\n *   dismissible без необходимости двигать курсор/фокус);\n * - панель не интерактивна (`pointer-events-none`), поэтому «hoverable»-требование\n *   того же критерия неприменимо — навести курсор на саму подсказку невозможно.\n *\n * Позиционирование — через общий `useFloating` (см. `composables/internal`):\n * `placement` задаёт предпочтительную сторону, `flip` переворачивает подсказку,\n * если места не хватает, а `shift` не даёт ей вылезти за края viewport.\n */\nimport { computed, onMounted, onUnmounted, onUpdated, ref, useId, useSlots, watchEffect } from 'vue'\n\nimport { usePortalTarget } from '../../composables/usePortalTarget'\n\nimport { vClickOutside } from '../../directives'\nimport GrIcon from '../GrIcon'\nimport { useFloating, type UseFloatingPlacement } from '../../composables/useFloating'\nimport { useDismissible } from '../../composables/useDismissible'\nimport { useGrComponentSize, useGrThemeAttrs } from '../GrConfigProvider/context'\nimport { type GrTooltipSize, panelSizes, panelWidths, triggerIconSizes } from './grTooltipStyles'\n\nimport IconInfo from '~icons/lucide/info'\n\nexport type GrTooltipPlacement = UseFloatingPlacement\n\nexport interface GrTooltipProps {\n  /** Текст подсказки. Разметка вместо текста — слот `#content`. */\n  text?: string\n  /** Цвет триггер-иконки (CSS color). По умолчанию — `var(--gr-muted-fg)`. */\n  iconColor?: string\n  /** Размер панели и дефолтной триггер-иконки. */\n  size?: GrTooltipSize\n  /** Предпочтительная сторона панели; `flip` может её изменить. */\n  placement?: GrTooltipPlacement\n  /** Зазор между триггером и панелью, px. */\n  offsetPx?: number\n  /** Задержка перед показом, мс. Спасает от мигания при проведении курсором по панели кнопок. */\n  openDelay?: number\n  /** Задержка перед скрытием, мс. */\n  closeDelay?: number\n  /** Подсказка не показывается ничем — ни курсором, ни фокусом, ни `v-model:open`. */\n  disabled?: boolean\n  /** Управляемая видимость. Без неё компонент ведёт видимость сам. */\n  open?: boolean\n}\n\nexport interface GrTooltipEmits {\n  (e: 'update:open', value: boolean): void\n}\n\nconst props = withDefaults(defineProps<GrTooltipProps>(), {\n  text: undefined,\n  iconColor: 'var(--gr-muted-fg)',\n  size: undefined,\n  placement: 'top',\n  offsetPx: undefined,\n  openDelay: 0,\n  closeDelay: 0,\n  disabled: false,\n  open: undefined,\n})\n\nconst emit = defineEmits<GrTooltipEmits>()\n\ndefineSlots<{\n  /** Триггер. По умолчанию — иконка info. */\n  default?: () => unknown\n  /** Содержимое подсказки; заменяет проп `text`. */\n  content?: () => unknown\n}>()\n\nconst slots = useSlots()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrTooltip' })\n\nconst panelClass = computed(() => [\n  panelSizes[resolvedSize.value],\n  panelWidths[resolvedSize.value],\n].join(' '))\nconst triggerIconSize = computed(() => triggerIconSizes[resolvedSize.value])\n\nconst tooltipId = `gr-tooltip-${useId()}`\n\nconst triggerStyle = computed(() => ({ color: props.iconColor }))\n\n// Телепорт включается только ПОСЛЕ монтирования: иначе первый клиентский\n// рендер не совпадает с серверным и ломается гидрация (см. композабл).\nconst { target: portalTarget, enabled: teleportEnabled } = usePortalTarget()\n\n// Тема поддерева на телепортированную панель: в DOM она уезжает в `body`, то\n// есть вне обёртки провайдера, и `data-theme` с неё не наследуется. В дереве\n// компонентов панель остаётся внутри — `inject` доходит, и тему она ставит себе\n// сама.\nconst themeAttrs = useGrThemeAttrs()\n\nconst uncontrolledOpen = ref(false)\nconst triggerEl = ref<HTMLElement | null>(null)\nconst panelEl = ref<HTMLElement | null>(null)\n\n/** Показывать нечего — пустая панель хуже отсутствующей. */\nconst hasContent = computed(() => Boolean(slots.content) || Boolean(props.text))\n\nconst open = computed<boolean>({\n  get: () => {\n    if (props.disabled || !hasContent.value) return false\n    return props.open ?? uncontrolledOpen.value\n  },\n  set: (next) => {\n    uncontrolledOpen.value = next\n    emit('update:open', next)\n  },\n})\n\nconst { floatingStyle } = useFloating(triggerEl, panelEl, open, {\n  placement: () => props.placement,\n  // Геттер, а не значение: `useFloating` читает опцию на каждом пересчёте, и\n  // так проп остаётся живым, а не замирает на моменте setup.\n  get offsetPx() { return props.offsetPx },\n  zIndexVar: '--gr-z-tooltip',\n})\n\nlet delayTimer: ReturnType<typeof setTimeout> | undefined\n\nfunction schedule(next: boolean, delayMs: number): void {\n  clearTimeout(delayTimer)\n\n  if (delayMs <= 0) {\n    open.value = next\n    return\n  }\n\n  delayTimer = setTimeout(() => { open.value = next }, delayMs)\n}\n\nfunction show(): void {\n  if (props.disabled) return\n  schedule(true, props.openDelay)\n}\n\nfunction hide(): void {\n  schedule(false, props.closeDelay)\n}\n\n/** Escape и клик вне закрывают мгновенно: задержка тут читалась бы как залипание. */\nfunction dismiss(): void {\n  clearTimeout(delayTimer)\n  if (open.value) open.value = false\n}\n\n// Нужен только тач-режиму: курсор и фокус закрывают подсказку сами.\nconst dismissOnOutside = computed(() => ({ handler: dismiss, enabled: open.value }))\n\n/**\n * На тач-устройствах hover не существует, а фокус по тапу не гарантирован —\n * без этого подсказка там недоступна вовсе. Тап по триггеру переключает\n * панель, тап вне — закрывает (`vClickOutside`).\n */\nfunction onTouch(): void {\n  if (open.value) dismiss()\n  else show()\n}\n\nonUnmounted(() => clearTimeout(delayTimer))\n\nuseDismissible(open, dismiss)\n\nconst FOCUSABLE_SELECTOR = 'a[href],button,input,select,textarea,[tabindex]:not([tabindex=\"-1\"])'\n\n/**\n * Типовое употребление — подсказка у кнопки. Фокусируемая обёртка вокруг\n * фокусируемого контрола дала бы два таб-стопа на один визуальный элемент,\n * поэтому обёртка забирает `tabindex` только когда в слоте фокусироваться\n * нечему (текст, иконка). Разметку слота пишет потребитель, привязать к ней\n * `aria-describedby` из шаблона нельзя — отсюда единственная точка, где атрибут\n * ставится вручную.\n */\nconst slotFocusableEl = ref<HTMLElement | null>(null)\n\nfunction syncSlotFocusable(): void {\n  slotFocusableEl.value = slots.default\n    ? triggerEl.value?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR) ?? null\n    : null\n}\n\nonMounted(syncSlotFocusable)\nonUpdated(syncSlotFocusable)\n\nwatchEffect((onCleanup) => {\n  const el = slotFocusableEl.value\n  if (!el) return\n\n  el.setAttribute('aria-describedby', tooltipId)\n  onCleanup(() => el.removeAttribute('aria-describedby'))\n})\n\nconst wrapperTabindex = computed(() => (slotFocusableEl.value ? undefined : 0))\nconst wrapperDescribedBy = computed(() => (slotFocusableEl.value ? undefined : tooltipId))\n</script>\n\n<template>\n  <span\n    v-click-outside=\"dismissOnOutside\"\n    data-gr-tooltip\n    class=\"relative inline-flex\"\n  >\n    <span\n      ref=\"triggerEl\"\n      data-gr-tooltip-trigger\n      data-testid=\"gr-tooltip-trigger\"\n      :tabindex=\"wrapperTabindex\"\n      :aria-describedby=\"wrapperDescribedBy\"\n      class=\"inline-flex items-center justify-center focus:outline-none\"\n      :style=\"triggerStyle\"\n      @mouseenter=\"show\"\n      @mouseleave=\"hide\"\n      @focusin=\"show\"\n      @focusout=\"hide\"\n      @touchstart.passive=\"onTouch\"\n    >\n      <slot>\n        <GrIcon :size=\"triggerIconSize\">\n          <IconInfo />\n        </GrIcon>\n      </slot>\n    </span>\n\n    <teleport :to=\"portalTarget\" :disabled=\"!teleportEnabled\">\n      <transition\n        enter-active-class=\"transition-opacity duration-[var(--gr-duration-fast)]\"\n        enter-from-class=\"opacity-0\"\n        enter-to-class=\"opacity-100\"\n        leave-active-class=\"transition-opacity duration-[var(--gr-duration-fast)]\"\n        leave-from-class=\"opacity-100\"\n        leave-to-class=\"opacity-0\"\n      >\n        <span\n          v-show=\"open\"\n          :id=\"tooltipId\"\n          ref=\"panelEl\"\n          role=\"tooltip\"\n          v-bind=\"themeAttrs\"\n          data-gr-tooltip-panel\n          data-gr-overlay-root\n          class=\"pointer-events-none rounded-[var(--gr-radius-control)] border border-[var(--gr-brd)] bg-[var(--gr-popover)] text-[var(--gr-popover-fg)] shadow-[var(--gr-shadow-1)]\"\n          :class=\"panelClass\"\n          :style=\"floatingStyle\"\n        >\n          <slot name=\"content\">{{ text }}</slot>\n        </span>\n      </transition>\n    </teleport>\n  </span>\n</template>\n"],"mappings":"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"}

package/dist/components/GrTooltip/index.js

@@ -1,3 +1,3 @@
-import { t as GrTooltip_default } from "./chunks/GrTooltip-BMKH2lIx.js";
-import { t as grTooltipConfig } from "../../chunks/config-JOtB4mzs.js";
-export { GrTooltip_default as GrTooltip, GrTooltip_default as default, grTooltipConfig };
+import { n as grTooltipSafelist, t as grTooltipConfig } from "../../chunks/config-CN2ULSQL2.js";
+import { t as GrTooltip_default } from "./chunks/GrTooltip-DEbejfhA.js";
+export { GrTooltip_default as GrTooltip, GrTooltip_default as default, grTooltipConfig, grTooltipSafelist };