@pgcorp/ui-kit 0.10.0 → 0.10.2

package/src/components/shared/data-display/STooltip.vue

@@ -1,681 +0,0 @@
-<template>
-  <slot
-    :trigger="triggerBinding"
-    :focus-owner="focusOwnerBinding"
-    :pointer-target="pointerTargetBinding"
-    :is-open="isOpen"
-  />
-  <teleport to="body">
-    <transition
-      enter-active-class="transition-opacity duration-[var(--s-motion-fast)]"
-      enter-from-class="opacity-0"
-      leave-active-class="transition-opacity duration-[var(--s-motion-fast)]"
-      leave-from-class="opacity-100"
-      leave-to-class="opacity-0"
-    >
-      <div
-        v-if="isOpen"
-        :id="tooltipId"
-        ref="tooltipRef"
-        class="s-tooltip"
-        :data-placement="resolvedPlacement"
-        :style="floatingStyle"
-        role="tooltip"
-      >
-        <div class="s-tooltip__content">
-          <strong v-if="resolvedTitle" class="s-tooltip__title">{{ resolvedTitle }}</strong>
-          <p v-if="resolvedDescription" class="s-tooltip__description">{{ resolvedDescription }}</p>
-          <div v-if="resolvedText" class="s-tooltip__text">{{ resolvedText }}</div>
-          <dl v-if="resolvedDetails.length > 0" class="s-tooltip__details">
-            <div v-for="detail in resolvedDetails" :key="detail.id" class="s-tooltip__detail">
-              <dt class="s-tooltip__detail-label">{{ detail.label }}</dt>
-              <dd
-                class="s-tooltip__detail-value"
-                :data-presentation="detail.presentation ?? 'text'"
-                :data-s-tone="resolveDetailToneBinding(detail.tone)['data-s-tone']"
-              >
-                <SBadge
-                  v-if="detail.presentation === 'badge'"
-                  size="xs"
-                  :severity="resolveDetailSeverity(detail.tone)"
-                >
-                  {{ detail.value }}
-                </SBadge>
-                <template v-else>{{ detail.value }}</template>
-              </dd>
-            </div>
-          </dl>
-          <div v-if="resolvedSections.length > 0" class="s-tooltip__sections">
-            <section v-for="section in resolvedSections" :key="section.id" class="s-tooltip__section">
-              <strong class="s-tooltip__section-title">{{ section.title }}</strong>
-              <p v-if="section.description" class="s-tooltip__section-description">{{ section.description }}</p>
-              <ul v-if="section.items?.length" class="s-tooltip__section-items">
-                <li v-for="item in section.items" :key="item.id">{{ item.label }}</li>
-              </ul>
-            </section>
-          </div>
-        </div>
-        <div class="s-tooltip-arrow" :style="arrowStyle"></div>
-      </div>
-    </transition>
-  </teleport>
-</template>
-
-<script setup lang="ts">
-import {
-  computed,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  useId,
-  watch,
-  watchEffect,
-  type VNodeChild,
-  type VNodeRef,
-} from 'vue';
-import { mergeIdReferences, useOwnedAttrs } from '../../../internal/ownedAttrs';
-import { hasOwn } from '../../../internal/es2020';
-import { resolveSemanticToneBinding } from '../../../internal/semanticTone';
-import {
-  resolveInteractiveElement,
-  type ElementRefTarget,
-} from '../../../internal/interactiveElement';
-import { isFocusableElement } from '../../../internal/focusNavigation';
-import {
-  validateBoolean,
-  validateDomId,
-  validateExactString,
-  validateNonEmptyString,
-} from '../../../internal/runtimeContract';
-import { useFloatingPosition, type FloatingPlacement } from '../../../composables/useFloatingPosition';
-import { registerLayer, type LayerRegistration } from '../../../internal/layerStack';
-import SBadge, { type BadgeSeverity } from './SBadge.vue';
-
-defineOptions({ inheritAttrs: false });
-
-export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
-export type TooltipDetailPresentation = 'text' | 'badge' | 'code';
-export type TooltipDetailTone = 'neutral' | 'info' | 'success' | 'warn' | 'danger';
-
-export interface TooltipDetail {
-  id: string;
-  label: string;
-  value: string | number;
-  presentation?: TooltipDetailPresentation;
-  tone?: TooltipDetailTone;
-}
-
-export interface TooltipSectionItem {
-  id: string;
-  label: string;
-}
-
-export interface TooltipSection {
-  id: string;
-  title: string;
-  description?: string;
-  items?: readonly TooltipSectionItem[];
-}
-
-/**
- * Декларативные ARIA/ref/event bindings, которые применяет сам trigger leaf.
- * Declarative ARIA/ref/event bindings applied by the trigger leaf itself.
- */
-export interface STooltipTriggerBinding {
-  readonly ref: VNodeRef;
-  readonly 'aria-describedby': string | undefined;
-  readonly onPointerenter: (event: PointerEvent) => void;
-  readonly onPointerleave: (event: PointerEvent) => void;
-  readonly onPointerdown: (event: PointerEvent) => void;
-  readonly onPointerup: (event: PointerEvent) => void;
-  readonly onPointercancel: (event: PointerEvent) => void;
-  readonly onFocusin: () => void;
-  readonly onFocusout: (event: FocusEvent) => void;
-}
-
-/** Focus/ARIA owner для split trigger без pointer geometry. / Focus and ARIA owner for a split trigger without pointer geometry. */
-export interface STooltipFocusOwnerBinding {
-  readonly ref: VNodeRef;
-  readonly 'aria-describedby': string | undefined;
-  readonly onFocusin: () => void;
-  readonly onFocusout: (event: FocusEvent) => void;
-}
-
-/** Пассивная pointer/geometry target той же интерактивной композиции. / Passive pointer and geometry target in the same interactive composition. */
-export interface STooltipPointerTargetBinding {
-  readonly ref: VNodeRef;
-  readonly onPointerenter: (event: PointerEvent) => void;
-  readonly onPointerleave: (event: PointerEvent) => void;
-}
-
-/** Scoped-slot API явного trigger owner. / Scoped-slot API for the explicit trigger owner. */
-export interface STooltipTriggerSlotProps {
-  readonly trigger: STooltipTriggerBinding;
-  readonly focusOwner: STooltipFocusOwnerBinding;
-  readonly pointerTarget: STooltipPointerTargetBinding;
-  readonly isOpen: boolean;
-}
-
-export interface Props {
-  text?: string;
-  title?: string;
-  description?: string;
-  details?: readonly TooltipDetail[];
-  sections?: readonly TooltipSection[];
-  position?: TooltipPosition;
-  disabled?: boolean;
-  showDelay?: number;
-  hideDelay?: number;
-  triggerDescribedBy?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  text: '',
-  title: undefined,
-  description: undefined,
-  details: () => [],
-  sections: () => [],
-  position: 'top',
-  disabled: false,
-  showDelay: 120,
-  hideDelay: 80,
-  triggerDescribedBy: undefined,
-});
-defineSlots<{
-  /** Ровно один leaf обязан применить trigger binding. / Exactly one leaf must apply the trigger binding. */
-  default: (scope: STooltipTriggerSlotProps) => VNodeChild;
-}>();
-
-const triggerContractError = (message: string): Error => new Error(`STooltip: ${message}`);
-
-const isOpen = ref(false);
-const ownedAttrs = useOwnedAttrs({ component: 'STooltip', owner: 'renderless tooltip contract' });
-const layerZIndex = ref('var(--s-layer-root-floating)');
-let layerRegistration: LayerRegistration | null = null;
-let hideTimer: number | null = null;
-let showTimer: number | null = null;
-let combinedTarget: ElementRefTarget = null;
-let focusOwnerTarget: ElementRefTarget = null;
-let pointerTarget: ElementRefTarget = null;
-let focusOwnerElement: HTMLElement | null = null;
-let pointerTargetElement: HTMLElement | null = null;
-let pointerInside = false;
-let focusInside = false;
-let touchActive = false;
-const tooltipId = `s-tooltip-${useId()}`;
-
-function validateOptionalText(coordinate: string, value: unknown): string | undefined {
-  return value === undefined || value === ''
-    ? undefined
-    : validateNonEmptyString('STooltip', coordinate, value);
-}
-
-function assertPlainRecord(coordinate: string, value: unknown): Record<string, unknown> {
-  if (typeof value !== 'object' || value === null || Array.isArray(value) || Object.getPrototypeOf(value) !== Object.prototype) {
-    throw triggerContractError(`${coordinate} должен быть plain object. ${coordinate} must be a plain object.`);
-  }
-  return value as Record<string, unknown>;
-}
-
-function assertExactKeys(coordinate: string, record: Record<string, unknown>, keys: readonly string[]): void {
-  const unexpected = Object.keys(record).filter((key) => !keys.includes(key));
-  if (unexpected.length > 0) {
-    throw triggerContractError(`${coordinate} содержит неизвестные поля ${unexpected.join(', ')}. ${coordinate} contains unknown fields ${unexpected.join(', ')}.`);
-  }
-}
-
-function assertDenseArray(coordinate: string, value: unknown): readonly unknown[] {
-  if (!Array.isArray(value)) {
-    throw triggerContractError(`${coordinate} должен быть массивом. ${coordinate} must be an array.`);
-  }
-  for (let index = 0; index < value.length; index += 1) {
-    if (!hasOwn(value, index)) {
-      throw triggerContractError(`${coordinate}[${index}] отсутствует в sparse array. ${coordinate}[${index}] is missing from a sparse array.`);
-    }
-  }
-  return value;
-}
-
-function registerUniqueId(ids: Map<string, number>, id: string, coordinate: string, index: number): void {
-  const firstIndex = ids.get(id);
-  if (firstIndex !== undefined) {
-    throw triggerContractError(`${coordinate}[${index}].id дублирует ${JSON.stringify(id)} из ${coordinate}[${firstIndex}].id. ${coordinate}[${index}].id duplicates ${JSON.stringify(id)} from ${coordinate}[${firstIndex}].id.`);
-  }
-  ids.set(id, index);
-}
-
-function validateDetails(value: unknown): readonly TooltipDetail[] {
-  const source = assertDenseArray('details', value);
-  const ids = new Map<string, number>();
-  return source.map((candidate, index): TooltipDetail => {
-    const coordinate = `details[${index}]`;
-    const record = assertPlainRecord(coordinate, candidate);
-    assertExactKeys(coordinate, record, ['id', 'label', 'value', 'presentation', 'tone']);
-    const id = validateNonEmptyString('STooltip', `${coordinate}.id`, record.id);
-    registerUniqueId(ids, id, 'details', index);
-    const detailValue = record.value;
-    if (!(typeof detailValue === 'string' && detailValue.length > 0) && !(typeof detailValue === 'number' && Number.isFinite(detailValue))) {
-      throw triggerContractError(`${coordinate}.value должен быть непустой строкой или конечным числом. ${coordinate}.value must be a non-empty string or finite number.`);
-    }
-    return {
-      id,
-      label: validateNonEmptyString('STooltip', `${coordinate}.label`, record.label),
-      value: detailValue,
-      ...(record.presentation === undefined ? {} : {
-        presentation: validateExactString('STooltip', `${coordinate}.presentation`, record.presentation, ['text', 'badge', 'code'] as const),
-      }),
-      ...(record.tone === undefined ? {} : {
-        tone: validateExactString('STooltip', `${coordinate}.tone`, record.tone, ['neutral', 'info', 'success', 'warn', 'danger'] as const),
-      }),
-    };
-  });
-}
-
-function validateSections(value: unknown): readonly TooltipSection[] {
-  const source = assertDenseArray('sections', value);
-  const ids = new Map<string, number>();
-  return source.map((candidate, index): TooltipSection => {
-    const coordinate = `sections[${index}]`;
-    const record = assertPlainRecord(coordinate, candidate);
-    assertExactKeys(coordinate, record, ['id', 'title', 'description', 'items']);
-    const id = validateNonEmptyString('STooltip', `${coordinate}.id`, record.id);
-    registerUniqueId(ids, id, 'sections', index);
-    const items = record.items === undefined ? undefined : (() => {
-      const itemSource = assertDenseArray(`${coordinate}.items`, record.items);
-      const itemIds = new Map<string, number>();
-      return itemSource.map((item, itemIndex): TooltipSectionItem => {
-        const itemCoordinate = `${coordinate}.items[${itemIndex}]`;
-        const itemRecord = assertPlainRecord(itemCoordinate, item);
-        assertExactKeys(itemCoordinate, itemRecord, ['id', 'label']);
-        const itemId = validateNonEmptyString('STooltip', `${itemCoordinate}.id`, itemRecord.id);
-        registerUniqueId(itemIds, itemId, `${coordinate}.items`, itemIndex);
-        return {
-          id: itemId,
-          label: validateNonEmptyString('STooltip', `${itemCoordinate}.label`, itemRecord.label),
-        };
-      });
-    })();
-    return {
-      id,
-      title: validateNonEmptyString('STooltip', `${coordinate}.title`, record.title),
-      ...(record.description === undefined ? {} : {
-        description: validateNonEmptyString('STooltip', `${coordinate}.description`, record.description),
-      }),
-      ...(items === undefined ? {} : { items }),
-    };
-  });
-}
-
-const resolvedText = computed(() => validateOptionalText('text', props.text));
-const resolvedTitle = computed(() => validateOptionalText('title', props.title));
-const resolvedDescription = computed(() => validateOptionalText('description', props.description));
-const resolvedDetails = computed(() => validateDetails(props.details));
-const resolvedSections = computed(() => validateSections(props.sections));
-const hasContent = computed(() => {
-  const text = resolvedText.value;
-  const title = resolvedTitle.value;
-  const description = resolvedDescription.value;
-  const details = resolvedDetails.value;
-  const sections = resolvedSections.value;
-  return Boolean(text || title || description || details.length > 0 || sections.length > 0);
-});
-const detailSeverityByTone: Record<TooltipDetailTone, BadgeSeverity> = {
-  neutral: 'secondary',
-  info: 'info',
-  success: 'success',
-  warn: 'warn',
-  danger: 'danger',
-};
-const resolveDetailSeverity = (tone: TooltipDetailTone | undefined): BadgeSeverity =>
-  detailSeverityByTone[tone ?? 'neutral'];
-const resolveDetailToneBinding = (tone: TooltipDetailTone | undefined) => resolveSemanticToneBinding(
-  'STooltip',
-  'detail.tone',
-  tone ?? 'neutral',
-  ['neutral', 'info', 'success', 'warn', 'danger'] as const,
-);
-const placement = computed<FloatingPlacement>(() => `${props.position}-center`);
-const {
-  anchorRef: positionAnchorRef,
-  panelRef: tooltipRef,
-  floatingStyle,
-  arrowStyle,
-  resolvedPlacement,
-} = useFloatingPosition({
-  active: isOpen,
-  placement: () => placement.value,
-  offset: () => 6,
-  boundaryPadding: () => 6,
-  flip: () => true,
-  shift: () => true,
-  widthMatch: () => 'none',
-  zIndex: () => layerZIndex.value,
-  scrollStrategy: 'close',
-  requestClose: () => closeImmediately(),
-});
-
-const clearHideTimer = () => {
-  if (hideTimer !== null) {
-    clearTimeout(hideTimer);
-    hideTimer = null;
-  }
-};
-
-const clearShowTimer = () => {
-  if (showTimer !== null) {
-    window.clearTimeout(showTimer);
-    showTimer = null;
-  }
-};
-
-const closeImmediately = () => {
-  clearHideTimer();
-  clearShowTimer();
-  isOpen.value = false;
-  layerRegistration?.unregister({ restoreFocus: false });
-  layerRegistration = null;
-  layerZIndex.value = 'var(--s-layer-root-floating)';
-};
-
-const openImmediately = () => {
-  if (isOpen.value || !focusOwnerElement || !pointerTargetElement) return;
-  layerRegistration = registerLayer({
-    kind: 'tooltip',
-    root: () => tooltipRef.value,
-    anchor: () => positionAnchorRef.value,
-    blocksParentFocusTrap: false,
-    restoreTarget: null,
-    requestDismiss: closeImmediately,
-  });
-  layerZIndex.value = layerRegistration.zIndex;
-  isOpen.value = true;
-};
-
-const scheduleShow = () => {
-  if (props.disabled || !hasContent.value || !focusOwnerElement || !pointerTargetElement) return;
-  clearHideTimer();
-  clearShowTimer();
-  showTimer = window.setTimeout(() => {
-    showTimer = null;
-    openImmediately();
-  }, props.showDelay);
-};
-
-const scheduleHide = () => {
-  clearShowTimer();
-  clearHideTimer();
-  hideTimer = window.setTimeout(() => {
-    hideTimer = null;
-    closeImmediately();
-  }, props.hideDelay);
-};
-
-const hideWhenInactive = () => {
-  if (!pointerInside && !focusInside && !touchActive) scheduleHide();
-};
-
-const handlePointerEnter = (event: PointerEvent) => {
-  if (event.pointerType === 'touch') return;
-  pointerInside = true;
-  scheduleShow();
-};
-
-const handlePointerLeave = (event: PointerEvent) => {
-  if (event.pointerType === 'touch') return;
-  pointerInside = false;
-  hideWhenInactive();
-};
-
-const handlePointerDown = (event: PointerEvent) => {
-  if (event.pointerType !== 'touch') return;
-  touchActive = true;
-  scheduleShow();
-};
-
-const handlePointerEnd = (event: PointerEvent) => {
-  if (event.pointerType !== 'touch') return;
-  touchActive = false;
-  hideWhenInactive();
-};
-
-const handleFocusIn = () => {
-  focusInside = true;
-  scheduleShow();
-};
-
-const handleFocusOut = (event: FocusEvent) => {
-  if (event.relatedTarget instanceof Node && focusOwnerElement?.contains(event.relatedTarget)) return;
-  focusInside = false;
-  hideWhenInactive();
-};
-
-const validateSplitComposition = (): void => {
-  if (!focusOwnerElement || !pointerTargetElement || combinedTarget !== null) return;
-  if (focusOwnerElement === pointerTargetElement) {
-    throw triggerContractError(
-      'focusOwner и pointerTarget должны быть разными владельцами одной интерактивной композиции. '
-      + 'focusOwner and pointerTarget must be distinct owners in one interactive composition.',
-    );
-  }
-};
-
-const commitFocusOwnerElement = (element: HTMLElement | null) => {
-  if (element !== null && !isFocusableElement(element)) {
-    throw triggerContractError(
-      'trigger/focusOwner должен владеть canonical focus owner; используйте интерактивный UI-kit leaf. '
-      + 'trigger/focusOwner must own a canonical focus owner; use an interactive UI-kit leaf.',
-    );
-  }
-  focusOwnerElement = element;
-  pointerInside = false;
-  focusInside = false;
-  touchActive = false;
-  if (element === null) closeImmediately();
-  validateSplitComposition();
-};
-
-const commitPointerTargetElement = (element: HTMLElement | null) => {
-  if (element !== null && combinedTarget === null && isFocusableElement(element)) {
-    throw triggerContractError(
-      'pointerTarget должен быть пассивным и не может создавать дополнительный tab stop. '
-      + 'pointerTarget must be passive and cannot create an additional tab stop.',
-    );
-  }
-  pointerTargetElement = element;
-  positionAnchorRef.value = element;
-  pointerInside = false;
-  touchActive = false;
-  if (element === null) closeImmediately();
-  validateSplitComposition();
-};
-
-const assertBindingMode = (binding: 'combined' | 'focusOwner' | 'pointerTarget'): void => {
-  if (binding === 'combined' && (focusOwnerTarget !== null || pointerTarget !== null)) {
-    throw triggerContractError('combined trigger нельзя смешивать со split trigger. combined trigger cannot be mixed with a split trigger.');
-  }
-  if (binding !== 'combined' && combinedTarget !== null) {
-    throw triggerContractError('split trigger нельзя смешивать с combined trigger. A split trigger cannot be mixed with a combined trigger.');
-  }
-};
-
-const bindCombinedElement: VNodeRef = (target) => {
-  if (target === combinedTarget) return;
-  if (target !== null) {
-    assertBindingMode('combined');
-    if (combinedTarget !== null) {
-      throw triggerContractError('trigger binding применён более чем к одному leaf. The trigger binding was applied to more than one leaf.');
-    }
-  }
-  combinedTarget = target;
-  if (target === null || target instanceof HTMLElement) {
-    commitFocusOwnerElement(target);
-    commitPointerTargetElement(target);
-  }
-};
-
-const bindFocusOwnerElement: VNodeRef = (target) => {
-  if (target === focusOwnerTarget) return;
-  if (target !== null) {
-    assertBindingMode('focusOwner');
-    if (focusOwnerTarget !== null) {
-      throw triggerContractError('focusOwner binding применён более чем к одному leaf. focusOwner binding was applied to more than one leaf.');
-    }
-  }
-  focusOwnerTarget = target;
-  if (target === null || target instanceof HTMLElement) {
-    commitFocusOwnerElement(target);
-  }
-};
-
-const bindPointerTargetElement: VNodeRef = (target) => {
-  if (target === pointerTarget) return;
-  if (target !== null) {
-    assertBindingMode('pointerTarget');
-    if (pointerTarget !== null) {
-      throw triggerContractError('pointerTarget binding применён более чем к одному leaf. pointerTarget binding was applied to more than one leaf.');
-    }
-  }
-  pointerTarget = target;
-  if (target === null || target instanceof HTMLElement) {
-    commitPointerTargetElement(target);
-  }
-};
-
-const validatedTriggerDescribedBy = computed(() => {
-  if (props.triggerDescribedBy === undefined) return undefined;
-  if (typeof props.triggerDescribedBy !== 'string') {
-    throw triggerContractError(
-      'triggerDescribedBy должен быть строкой DOM id references. '
-      + 'triggerDescribedBy must be a string of DOM id references.',
-    );
-  }
-  const references = props.triggerDescribedBy.trim().split(/\s+/u).filter(Boolean);
-  if (references.length === 0) {
-    throw triggerContractError(
-      'triggerDescribedBy должен содержать хотя бы один DOM id. '
-      + 'triggerDescribedBy must contain at least one DOM id.',
-    );
-  }
-  return references.map((reference, index) => (
-    validateDomId('STooltip', `triggerDescribedBy[${index}]`, reference)
-  )).join(' ');
-});
-
-const triggerBinding = computed<STooltipTriggerBinding>(() => ({
-  ref: bindCombinedElement,
-  'aria-describedby': mergeIdReferences(
-    validatedTriggerDescribedBy.value,
-    isOpen.value ? tooltipId : undefined,
-  ),
-  onPointerenter: handlePointerEnter,
-  onPointerleave: handlePointerLeave,
-  onPointerdown: handlePointerDown,
-  onPointerup: handlePointerEnd,
-  onPointercancel: handlePointerEnd,
-  onFocusin: handleFocusIn,
-  onFocusout: handleFocusOut,
-}));
-
-const focusOwnerBinding = computed<STooltipFocusOwnerBinding>(() => ({
-  ref: bindFocusOwnerElement,
-  'aria-describedby': mergeIdReferences(
-    validatedTriggerDescribedBy.value,
-    isOpen.value ? tooltipId : undefined,
-  ),
-  onFocusin: handleFocusIn,
-  onFocusout: handleFocusOut,
-}));
-
-const pointerTargetBinding = computed<STooltipPointerTargetBinding>(() => ({
-  ref: bindPointerTargetElement,
-  onPointerenter: handlePointerEnter,
-  onPointerleave: handlePointerLeave,
-}));
-
-const handleWindowBlur = () => {
-  if (isOpen.value) {
-    closeImmediately();
-  }
-};
-
-const handleVisibilityChange = () => {
-  if (document.hidden && isOpen.value) {
-    closeImmediately();
-  }
-};
-
-const bindWindowListeners = () => {
-  window.addEventListener('blur', handleWindowBlur);
-  document.addEventListener('visibilitychange', handleVisibilityChange);
-};
-
-const unbindWindowListeners = () => {
-  window.removeEventListener('blur', handleWindowBlur);
-  document.removeEventListener('visibilitychange', handleVisibilityChange);
-};
-
-watch(isOpen, (open) => {
-  if (open) {
-    bindWindowListeners();
-    return;
-  }
-  unbindWindowListeners();
-});
-
-watch(() => [props.disabled, hasContent.value] as const, ([disabled, contentAvailable]) => {
-  if (disabled || !contentAvailable) closeImmediately();
-});
-
-watchEffect(() => {
-  ownedAttrs.reject('STooltip не рендерит public wrapper; используйте props и default trigger slot. STooltip renders no public wrapper; use props and the default trigger slot.');
-  for (const [name, value] of [['showDelay', props.showDelay], ['hideDelay', props.hideDelay]] as const) {
-    if (!Number.isSafeInteger(value) || value < 0 || value > 60_000) {
-      throw triggerContractError(
-        `${name} должен быть целым числом миллисекунд от 0 до 60000. `
-        + `${name} must be an integer number of milliseconds from 0 through 60000.`,
-      );
-    }
-  }
-  validateExactString('STooltip', 'position', props.position, ['top', 'bottom', 'left', 'right'] as const);
-  validateBoolean('STooltip', 'disabled', props.disabled);
-});
-
-onMounted(() => {
-  if (combinedTarget !== null && (focusOwnerTarget !== null || pointerTarget !== null)) {
-    throw triggerContractError('combined trigger нельзя смешивать со split trigger. combined trigger cannot be mixed with a split trigger.');
-  }
-  if (combinedTarget === null && (focusOwnerTarget === null || pointerTarget === null)) {
-    throw triggerContractError(
-      'default slot обязан применить combined trigger либо обе половины split trigger: focusOwner и pointerTarget. '
-      + 'The default slot must apply the combined trigger or both split trigger bindings: focusOwner and pointerTarget.',
-    );
-  }
-  if (combinedTarget !== null) {
-    const element = resolveInteractiveElement('STooltip: trigger', combinedTarget);
-    commitFocusOwnerElement(element);
-    commitPointerTargetElement(element);
-    return;
-  }
-  if (focusOwnerTarget === null || pointerTarget === null) {
-    throw triggerContractError(
-      'split trigger требует focusOwner и pointerTarget. '
-      + 'A split trigger requires focusOwner and pointerTarget.',
-    );
-  }
-  commitFocusOwnerElement(resolveInteractiveElement('STooltip: focusOwner', focusOwnerTarget));
-  commitPointerTargetElement(resolveInteractiveElement('STooltip: pointerTarget', pointerTarget));
-});
-
-onBeforeUnmount(() => {
-  closeImmediately();
-  combinedTarget = null;
-  focusOwnerTarget = null;
-  pointerTarget = null;
-  focusOwnerElement = null;
-  pointerTargetElement = null;
-  positionAnchorRef.value = null;
-  unbindWindowListeners();
-});
-</script>
-
-<style lang="postcss" src="./STooltip.css"></style>