@pgcorp/ui-kit 0.6.0 → 0.7.1

package/src/components/shared/data-display/SProgressBar.css

@@ -22,22 +22,22 @@
 }
 
 /* Severity Colors */
-.s-progress-bar-value[data-severity='primary'] {
+.s-progress-bar-value[data-s-tone='primary'] {
   background-color: var(--s-progress-bar-fill-primary);
 }
-.s-progress-bar-value[data-severity='success'] {
+.s-progress-bar-value[data-s-tone='success'] {
   background-color: var(--s-progress-bar-fill-success);
 }
-.s-progress-bar-value[data-severity='info'] {
+.s-progress-bar-value[data-s-tone='info'] {
   background-color: var(--s-progress-bar-fill-info);
 }
-.s-progress-bar-value[data-severity='warn'] {
+.s-progress-bar-value[data-s-tone='warn'] {
   background-color: var(--s-progress-bar-fill-warn);
 }
-.s-progress-bar-value[data-severity='danger'] {
+.s-progress-bar-value[data-s-tone='danger'] {
   background-color: var(--s-progress-bar-fill-danger);
 }
-.s-progress-bar-value[data-severity='neutral'] {
+.s-progress-bar-value[data-s-tone='neutral'] {
   background-color: var(--s-progress-bar-fill-neutral);
 }
 
@@ -64,21 +64,21 @@
 }
 
 /* Indeterminate Severity Colors */
-.s-progress-bar-value--indeterminate[data-severity='primary']::before {
+.s-progress-bar-value--indeterminate[data-s-tone='primary']::before {
   background-color: var(--s-progress-bar-fill-primary);
 }
-.s-progress-bar-value--indeterminate[data-severity='success']::before {
+.s-progress-bar-value--indeterminate[data-s-tone='success']::before {
   background-color: var(--s-progress-bar-fill-success);
 }
-.s-progress-bar-value--indeterminate[data-severity='info']::before {
+.s-progress-bar-value--indeterminate[data-s-tone='info']::before {
   background-color: var(--s-progress-bar-fill-info);
 }
-.s-progress-bar-value--indeterminate[data-severity='warn']::before {
+.s-progress-bar-value--indeterminate[data-s-tone='warn']::before {
   background-color: var(--s-progress-bar-fill-warn);
 }
-.s-progress-bar-value--indeterminate[data-severity='danger']::before {
+.s-progress-bar-value--indeterminate[data-s-tone='danger']::before {
   background-color: var(--s-progress-bar-fill-danger);
 }
-.s-progress-bar-value--indeterminate[data-severity='neutral']::before {
+.s-progress-bar-value--indeterminate[data-s-tone='neutral']::before {
   background-color: var(--s-progress-bar-indeterminate-neutral-fill);
 }

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

@@ -14,8 +14,8 @@
   >
     <div
       v-if="mode === 'determinate'"
+      :data-s-tone="toneBinding['data-s-tone']"
       class="s-progress-bar-value"
-      :data-severity="severity"
       :style="{ width: `${value}%` }"
     >
       <span v-if="showValue" class="s-progress-bar-label">
@@ -24,19 +24,21 @@
     </div>
     <div
       v-else
+      :data-s-tone="toneBinding['data-s-tone']"
       class="s-progress-bar-value--indeterminate"
-      :data-severity="severity"
     ></div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { watchEffect } from 'vue';
+import { computed, watchEffect } from 'vue';
 import { useOwnedAttrs } from '../../../internal/ownedAttrs';
+import { resolveSemanticToneBinding } from '../../../internal/semanticTone';
 
 defineOptions({ inheritAttrs: false });
 
 export type Severity = 'primary' | 'success' | 'info' | 'warn' | 'danger' | 'neutral';
+const PROGRESS_SEVERITIES = ['primary', 'success', 'info', 'warn', 'danger', 'neutral'] as const satisfies readonly Severity[];
 export type ProgressBarMode = 'determinate' | 'indeterminate';
 export type SProgressBarAccessibility =
   | { readonly mode: 'decorative' }
@@ -62,6 +64,12 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const ownedAttrs = useOwnedAttrs({ component: 'SProgressBar', owner: 'progressbar root' });
+const toneBinding = computed(() => resolveSemanticToneBinding(
+  'SProgressBar',
+  'severity',
+  props.severity,
+  PROGRESS_SEVERITIES,
+));
 
 watchEffect(() => {
   if (!Number.isFinite(props.value) || props.value < 0 || props.value > 100) {
@@ -70,9 +78,7 @@ watchEffect(() => {
   if (!['determinate', 'indeterminate'].includes(props.mode)) {
     throw new TypeError(`SProgressBar: неизвестный mode "${String(props.mode)}"`);
   }
-  if (!['primary', 'success', 'info', 'warn', 'danger', 'neutral'].includes(props.severity)) {
-    throw new TypeError(`SProgressBar: неизвестный severity "${String(props.severity)}"`);
-  }
+  void toneBinding.value;
   if (!['xs', 'sm', 'md'].includes(props.size)) {
     throw new TypeError(`SProgressBar: неизвестный size "${String(props.size)}"`);
   }

package/src/components/shared/data-display/SProgressIndicator.css

@@ -23,11 +23,11 @@
 .s-progress-indicator[data-size='md'] { --s-progress-indicator-size: var(--s-icon-size-md); }
 .s-progress-indicator[data-size='lg'] { --s-progress-indicator-size: var(--s-icon-size-lg); }
 
-.s-progress-indicator[data-tone='neutral'] { color: var(--s-progress-indicator-foreground-neutral); }
-.s-progress-indicator[data-tone='info'] { color: var(--s-progress-indicator-foreground-info); }
-.s-progress-indicator[data-tone='success'] { color: var(--s-progress-indicator-foreground-success); }
-.s-progress-indicator[data-tone='warn'] { color: var(--s-progress-indicator-foreground-warn); }
-.s-progress-indicator[data-tone='danger'] { color: var(--s-progress-indicator-foreground-danger); }
+.s-progress-indicator[data-s-tone='neutral'] { color: var(--s-progress-indicator-foreground-neutral); }
+.s-progress-indicator[data-s-tone='info'] { color: var(--s-progress-indicator-foreground-info); }
+.s-progress-indicator[data-s-tone='success'] { color: var(--s-progress-indicator-foreground-success); }
+.s-progress-indicator[data-s-tone='warn'] { color: var(--s-progress-indicator-foreground-warn); }
+.s-progress-indicator[data-s-tone='danger'] { color: var(--s-progress-indicator-foreground-danger); }
 
 .s-progress-indicator__graphic {
   width: 100%;

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

@@ -1,9 +1,9 @@
 <template>
   <span
     v-bind="ownedAttrs.bindings()"
+    :data-s-tone="toneBinding['data-s-tone']"
     class="s-progress-indicator"
     :data-size="size"
-    :data-tone="tone"
     :data-motion="presentation.motion"
     :data-show-label="validatedShowLabel || undefined"
     :role="liveAttributes.role"
@@ -30,12 +30,14 @@ import { computed, watchEffect } from 'vue'
 
 import { resolveFeedbackIndicator, resolveFeedbackLive, type FeedbackLiveMode } from '../../../internal/feedbackPresentation'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { resolveSemanticToneBinding } from '../../../internal/semanticTone'
 import { validateBoolean } from '../../../internal/runtimeContract'
 
 defineOptions({ inheritAttrs: false })
 
 export type SProgressIndicatorSize = 'xs' | 'sm' | 'md' | 'lg'
 export type SProgressIndicatorTone = 'current' | 'neutral' | 'info' | 'success' | 'warn' | 'danger'
+const PROGRESS_INDICATOR_TONES = ['current', 'neutral', 'info', 'success', 'warn', 'danger'] as const satisfies readonly SProgressIndicatorTone[]
 
 /**
  * Декоративный progress принадлежит labelled parent; standalone status требует собственного имени.
@@ -64,6 +66,12 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const ownedAttrs = useOwnedAttrs({ component: 'SProgressIndicator', owner: 'progress indicator root' })
+const toneBinding = computed(() => resolveSemanticToneBinding(
+  'SProgressIndicator',
+  'tone',
+  props.tone,
+  PROGRESS_INDICATOR_TONES,
+))
 const presentation = resolveFeedbackIndicator('progress')
 const validatedShowLabel = computed(() => validateBoolean('SProgressIndicator', 'showLabel', props.showLabel))
 const feedbackTone = computed(() => props.tone === 'current' ? 'info' : props.tone)

package/src/components/shared/data-display/SStatus.css

@@ -49,42 +49,42 @@
   @apply sr-only;
 }
 
-.s-status[data-tone='neutral'] {
+.s-status[data-s-tone='neutral'] {
   @apply text-surface-500 dark:text-surface-400;
 }
 
-.s-status[data-tone='info'] {
+.s-status[data-s-tone='info'] {
   @apply text-info-700 dark:text-info-300;
 }
 
-.s-status[data-tone='success'] {
+.s-status[data-s-tone='success'] {
   @apply text-success-700 dark:text-success-300;
 }
 
-.s-status[data-tone='warn'] {
+.s-status[data-s-tone='warn'] {
   @apply text-warn-700 dark:text-warn-300;
 }
 
-.s-status[data-tone='danger'] {
+.s-status[data-s-tone='danger'] {
   @apply text-danger-700 dark:text-danger-300;
 }
 
-.s-status[data-appearance='soft'][data-tone='neutral'] {
+.s-status[data-appearance='soft'][data-s-tone='neutral'] {
   @apply border-surface-200 bg-surface-100 dark:border-surface-700 dark:bg-surface-800;
 }
 
-.s-status[data-appearance='soft'][data-tone='info'] {
+.s-status[data-appearance='soft'][data-s-tone='info'] {
   @apply border-info-200 bg-info-50 dark:border-info-800 dark:bg-info-950;
 }
 
-.s-status[data-appearance='soft'][data-tone='success'] {
+.s-status[data-appearance='soft'][data-s-tone='success'] {
   @apply border-success-200 bg-success-50 dark:border-success-800 dark:bg-success-950;
 }
 
-.s-status[data-appearance='soft'][data-tone='warn'] {
+.s-status[data-appearance='soft'][data-s-tone='warn'] {
   @apply border-warn-200 bg-warn-50 dark:border-warn-800 dark:bg-warn-950;
 }
 
-.s-status[data-appearance='soft'][data-tone='danger'] {
+.s-status[data-appearance='soft'][data-s-tone='danger'] {
   @apply border-danger-200 bg-danger-50 dark:border-danger-800 dark:bg-danger-950;
 }

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

@@ -1,8 +1,8 @@
 <template>
   <span
     v-bind="ownedAttrs.bindings()"
+    :data-s-tone="toneBinding['data-s-tone']"
     class="s-status"
-    :data-tone="tone"
     :data-appearance="appearance"
     :data-size="size"
     :data-label-visibility="labelVisibility"
@@ -22,6 +22,7 @@
 <script setup lang="ts">
 import { computed, markRaw, toRaw, type Component } from 'vue'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { resolveSemanticToneBinding } from '../../../internal/semanticTone'
 
 import {
   resolveFeedbackLive,
@@ -33,6 +34,7 @@ import {
 defineOptions({ inheritAttrs: false })
 
 export type StatusTone = FeedbackTone
+const STATUS_TONES = ['neutral', 'info', 'success', 'warn', 'danger'] as const satisfies readonly StatusTone[]
 export type StatusAppearance = 'text' | 'soft'
 export type StatusSize = 'xs' | 'sm' | 'md'
 export type StatusLiveMode = Exclude<FeedbackLiveMode, 'auto'>
@@ -66,6 +68,12 @@ const props = withDefaults(defineProps<{
 
 const defaultIcon = computed<Component>(() => resolveFeedbackPresentation(props.tone).icon)
 const ownedAttrs = useOwnedAttrs({ component: 'SStatus', owner: 'status root' })
+const toneBinding = computed(() => resolveSemanticToneBinding(
+  'SStatus',
+  'tone',
+  props.tone,
+  STATUS_TONES,
+))
 const liveAttributes = computed(() => resolveFeedbackLive(props.tone, props.live))
 
 const resolvedIcon = computed<Component | null>(() => {

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

@@ -255,7 +255,7 @@ export interface STableProps<
 </script>
 
 <script setup lang="ts" generic="Row extends object = Record<string, unknown>, RowKey extends STableRowKey = STableRowKey, Field extends string = Extract<keyof Row, string>">
-import { computed, useId, useSlots } from 'vue'
+import { computed, useId, useSlots, watch } from 'vue'
 import { ChevronDown, ChevronsUpDown, ChevronUp } from '../../icons/sputnigUiIcons'
 import { hasOwn } from '../../../internal/es2020'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
@@ -548,6 +548,23 @@ const activeSorts = computed<readonly STableSort<Field>[]>(() => {
   return singleSort === null ? [] : [singleSort]
 })
 
+const NO_PENDING_SORT = Symbol('STable.no-pending-sort')
+let pendingSingleSort: STableSort<Field> | null | typeof NO_PENDING_SORT = NO_PENDING_SORT
+let pendingMultipleSort: readonly STableSort<Field>[] | typeof NO_PENDING_SORT = NO_PENDING_SORT
+
+const clearPendingSortIntent = (): void => {
+  pendingSingleSort = NO_PENDING_SORT
+  pendingMultipleSort = NO_PENDING_SORT
+}
+
+watch(validatedSortMode, clearPendingSortIntent, { flush: 'sync' })
+watch(validatedSingleSort, () => {
+  pendingSingleSort = NO_PENDING_SORT
+}, { deep: true, flush: 'sync' })
+watch(validatedMultipleSort, () => {
+  pendingMultipleSort = NO_PENDING_SORT
+}, { deep: true, flush: 'sync' })
+
 function sortIndex(column: STableColumn<Row, Field>): number {
   return activeSorts.value.findIndex((candidate) => candidate.key === column.field)
 }
@@ -592,8 +609,10 @@ function requestSort(column: STableColumn<Row, Field>): void {
   if (!column.sortable) return
   const key = column.field as Field
   if (validatedSortMode.value === 'multiple') {
-    const current = activeSorts.value
-    const index = sortIndex(column)
+    const current = pendingMultipleSort === NO_PENDING_SORT
+      ? activeSorts.value
+      : pendingMultipleSort
+    const index = current.findIndex((candidate) => candidate.key === key)
     let next: readonly STableSort<Field>[]
     if (index === -1) next = [...current, { key, direction: 'ascending' }]
     else if (current[index]!.direction === 'ascending') {
@@ -601,15 +620,19 @@ function requestSort(column: STableColumn<Row, Field>): void {
         ? { key: entry.key, direction: 'descending' }
         : entry)
     } else next = current.filter((_entry, candidateIndex) => candidateIndex !== index)
+    pendingMultipleSort = next.map((entry) => ({ ...entry }))
     emit('update:sorts', next)
     emit('multi-sort', next)
   } else {
-    const current = activeSorts.value[0]
+    const current = pendingSingleSort === NO_PENDING_SORT
+      ? activeSorts.value[0]
+      : pendingSingleSort ?? undefined
     const next: STableSort<Field> | null = current?.key !== key
       ? { key, direction: 'ascending' }
       : current.direction === 'ascending'
         ? { key, direction: 'descending' }
         : null
+    pendingSingleSort = next === null ? null : { ...next }
     emit('update:sort', next)
     emit('sort', next)
   }

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

@@ -54,19 +54,19 @@
   @apply font-mono;
 }
 
-.s-tooltip__detail-value[data-tone='info'] {
+.s-tooltip__detail-value[data-s-tone='info'] {
   @apply text-info-700 dark:text-info-300;
 }
 
-.s-tooltip__detail-value[data-tone='success'] {
+.s-tooltip__detail-value[data-s-tone='success'] {
   @apply text-success-700 dark:text-success-300;
 }
 
-.s-tooltip__detail-value[data-tone='warn'] {
+.s-tooltip__detail-value[data-s-tone='warn'] {
   @apply text-warn-700 dark:text-warn-300;
 }
 
-.s-tooltip__detail-value[data-tone='danger'] {
+.s-tooltip__detail-value[data-s-tone='danger'] {
   @apply text-danger-700 dark:text-danger-300;
 }
 

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

@@ -1,5 +1,10 @@
 <template>
-  <slot :trigger="triggerBinding" :is-open="isOpen" />
+  <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)]"
@@ -27,7 +32,7 @@
               <dd
                 class="s-tooltip__detail-value"
                 :data-presentation="detail.presentation ?? 'text'"
-                :data-tone="detail.tone ?? 'neutral'"
+                :data-s-tone="resolveDetailToneBinding(detail.tone)['data-s-tone']"
               >
                 <SBadge
                   v-if="detail.presentation === 'badge'"
@@ -70,6 +75,7 @@ import {
 } from 'vue';
 import { mergeIdReferences, useOwnedAttrs } from '../../../internal/ownedAttrs';
 import { hasOwn } from '../../../internal/es2020';
+import { resolveSemanticToneBinding } from '../../../internal/semanticTone';
 import {
   resolveInteractiveElement,
   type ElementRefTarget,
@@ -127,9 +133,26 @@ export interface STooltipTriggerBinding {
   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;
 }
 
@@ -171,8 +194,11 @@ const layerZIndex = ref('var(--s-layer-floating)');
 let layerRegistration: LayerRegistration | null = null;
 let hideTimer: number | null = null;
 let showTimer: number | null = null;
-let triggerTarget: ElementRefTarget = null;
-let triggerElement: HTMLElement | 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;
@@ -302,9 +328,15 @@ const detailSeverityByTone: Record<TooltipDetailTone, BadgeSeverity> = {
 };
 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: triggerRef,
+  anchorRef: positionAnchorRef,
   panelRef: tooltipRef,
   floatingStyle,
   arrowStyle,
@@ -346,11 +378,11 @@ const closeImmediately = () => {
 };
 
 const openImmediately = () => {
-  if (isOpen.value || !triggerElement) return;
+  if (isOpen.value || !focusOwnerElement || !pointerTargetElement) return;
   layerRegistration = registerLayer({
     kind: 'tooltip',
     root: () => tooltipRef.value,
-    anchor: () => triggerRef.value,
+    anchor: () => positionAnchorRef.value,
     blocksParentFocusTrap: false,
     restoreTarget: null,
     requestDismiss: closeImmediately,
@@ -360,7 +392,7 @@ const openImmediately = () => {
 };
 
 const scheduleShow = () => {
-  if (props.disabled || !hasContent.value || !triggerElement) return;
+  if (props.disabled || !hasContent.value || !focusOwnerElement || !pointerTargetElement) return;
   clearHideTimer();
   clearShowTimer();
   showTimer = window.setTimeout(() => {
@@ -412,37 +444,100 @@ const handleFocusIn = () => {
 };
 
 const handleFocusOut = (event: FocusEvent) => {
-  if (event.relatedTarget instanceof Node && triggerElement?.contains(event.relatedTarget)) return;
+  if (event.relatedTarget instanceof Node && focusOwnerElement?.contains(event.relatedTarget)) return;
   focusInside = false;
   hideWhenInactive();
 };
 
-const commitTriggerElement = (element: HTMLElement | null) => {
+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 должен владеть canonical focus owner; используйте интерактивный UI-kit leaf. '
-      + 'The trigger must own a canonical focus owner; use an interactive UI-kit leaf.',
+      'trigger/focusOwner должен владеть canonical focus owner; используйте интерактивный UI-kit leaf. '
+      + 'trigger/focusOwner must own a canonical focus owner; use an interactive UI-kit leaf.',
     );
   }
-  triggerElement = element;
-  triggerRef.value = element;
+  focusOwnerElement = element;
   pointerInside = false;
   focusInside = false;
   touchActive = false;
   if (element === null) closeImmediately();
+  validateSplitComposition();
 };
 
-const bindTriggerElement: VNodeRef = (target) => {
-  if (target === triggerTarget) return;
-  if (target !== null && triggerTarget !== null) {
+const commitPointerTargetElement = (element: HTMLElement | null) => {
+  if (element !== null && combinedTarget === null && isFocusableElement(element)) {
     throw triggerContractError(
-      'trigger binding применён более чем к одному leaf. '
-      + 'The trigger binding was applied to more than one leaf.',
+      'pointerTarget должен быть пассивным и не может создавать дополнительный tab stop. '
+      + 'pointerTarget must be passive and cannot create an additional tab stop.',
     );
   }
-  triggerTarget = target;
+  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) {
-    commitTriggerElement(target);
+    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);
   }
 };
 
@@ -467,7 +562,7 @@ const validatedTriggerDescribedBy = computed(() => {
 });
 
 const triggerBinding = computed<STooltipTriggerBinding>(() => ({
-  ref: bindTriggerElement,
+  ref: bindCombinedElement,
   'aria-describedby': mergeIdReferences(
     validatedTriggerDescribedBy.value,
     isOpen.value ? tooltipId : undefined,
@@ -481,6 +576,22 @@ const triggerBinding = computed<STooltipTriggerBinding>(() => ({
   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();
@@ -530,20 +641,39 @@ watchEffect(() => {
 });
 
 onMounted(() => {
-  if (triggerTarget === null) {
+  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(
-      'default slot обязан применить trigger binding ровно к одному leaf. '
-      + 'The default slot must apply the trigger binding to exactly one leaf.',
+      'split trigger требует focusOwner и pointerTarget. '
+      + 'A split trigger requires focusOwner and pointerTarget.',
     );
   }
-  commitTriggerElement(resolveInteractiveElement('STooltip: trigger', triggerTarget));
+  commitFocusOwnerElement(resolveInteractiveElement('STooltip: focusOwner', focusOwnerTarget));
+  commitPointerTargetElement(resolveInteractiveElement('STooltip: pointerTarget', pointerTarget));
 });
 
 onBeforeUnmount(() => {
   closeImmediately();
-  triggerTarget = null;
-  triggerElement = null;
-  triggerRef.value = null;
+  combinedTarget = null;
+  focusOwnerTarget = null;
+  pointerTarget = null;
+  focusOwnerElement = null;
+  pointerTargetElement = null;
+  positionAnchorRef.value = null;
   unbindWindowListeners();
 });
 </script>