@pgcorp/ui-kit 0.1.0

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

@@ -0,0 +1,550 @@
+<template>
+  <slot :trigger="triggerBinding" :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-tone="detail.tone ?? 'neutral'"
+              >
+                <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 {
+  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;
+}
+
+/** Scoped-slot API явного trigger owner. / Scoped-slot API for the explicit trigger owner. */
+export interface STooltipTriggerSlotProps {
+  readonly trigger: STooltipTriggerBinding;
+  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-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 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 (!Object.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 placement = computed<FloatingPlacement>(() => `${props.position}-center`);
+const {
+  anchorRef: triggerRef,
+  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-floating)';
+};
+
+const openImmediately = () => {
+  if (isOpen.value || !triggerElement) return;
+  layerRegistration = registerLayer({
+    kind: 'tooltip',
+    root: () => tooltipRef.value,
+    anchor: () => triggerRef.value,
+    blocksParentFocusTrap: false,
+    restoreTarget: null,
+    requestDismiss: closeImmediately,
+  });
+  layerZIndex.value = layerRegistration.zIndex;
+  isOpen.value = true;
+};
+
+const scheduleShow = () => {
+  if (props.disabled || !hasContent.value || !triggerElement) 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 && triggerElement?.contains(event.relatedTarget)) return;
+  focusInside = false;
+  hideWhenInactive();
+};
+
+const commitTriggerElement = (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.',
+    );
+  }
+  triggerElement = element;
+  triggerRef.value = element;
+  pointerInside = false;
+  focusInside = false;
+  touchActive = false;
+  if (element === null) closeImmediately();
+};
+
+const bindTriggerElement: VNodeRef = (target) => {
+  if (target === triggerTarget) return;
+  if (target !== null && triggerTarget !== null) {
+    throw triggerContractError(
+      'trigger binding применён более чем к одному leaf. '
+      + 'The trigger binding was applied to more than one leaf.',
+    );
+  }
+  triggerTarget = target;
+  if (target === null || target instanceof HTMLElement) {
+    commitTriggerElement(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: bindTriggerElement,
+  'aria-describedby': mergeIdReferences(
+    validatedTriggerDescribedBy.value,
+    isOpen.value ? tooltipId : undefined,
+  ),
+  onPointerenter: handlePointerEnter,
+  onPointerleave: handlePointerLeave,
+  onPointerdown: handlePointerDown,
+  onPointerup: handlePointerEnd,
+  onPointercancel: handlePointerEnd,
+  onFocusin: handleFocusIn,
+  onFocusout: handleFocusOut,
+}));
+
+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 (triggerTarget === null) {
+    throw triggerContractError(
+      'default slot обязан применить trigger binding ровно к одному leaf. '
+      + 'The default slot must apply the trigger binding to exactly one leaf.',
+    );
+  }
+  commitTriggerElement(resolveInteractiveElement('STooltip: trigger', triggerTarget));
+});
+
+onBeforeUnmount(() => {
+  closeImmediately();
+  triggerTarget = null;
+  triggerElement = null;
+  triggerRef.value = null;
+  unbindWindowListeners();
+});
+</script>
+
+<style lang="postcss" src="./STooltip.css"></style>

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

@@ -0,0 +1,21 @@
+@reference "../../../styles/reference.css";
+
+.s-tooltip-anchor {
+  @apply relative inline-flex min-w-0 max-w-full align-middle;
+  border-radius: var(--radius-xs);
+}
+
+.s-tooltip-anchor[data-width='full'] {
+  @apply flex w-full;
+}
+
+.s-tooltip-anchor[data-shape='pill'],
+.s-tooltip-anchor[data-shape='circle'] {
+  border-radius: var(--s-radius-pill);
+}
+
+.s-tooltip-anchor:focus-visible {
+  z-index: var(--s-layer-focused-control);
+  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color);
+  outline-offset: var(--s-focus-ring-offset);
+}

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

@@ -0,0 +1,119 @@
+<template>
+  <component
+    :is="rootTag"
+    ref="anchorRef"
+    v-bind="ownedAttrs.bindings()"
+    class="s-tooltip-anchor"
+    :data-shape="resolvedShape"
+    :data-width="resolvedWidth"
+    role="group"
+    tabindex="0"
+    :aria-label="resolvedAccessibleLabel"
+    @focusin="emit('focusin', $event)"
+    @focusout="emit('focusout', $event)"
+    @pointerenter="emit('pointerenter', $event)"
+    @pointerleave="emit('pointerleave', $event)"
+    @pointerdown="emit('pointerdown', $event)"
+    @pointerup="emit('pointerup', $event)"
+    @pointercancel="emit('pointercancel', $event)"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, type VNodeChild } from 'vue'
+import type { InteractiveElementApi } from '../../../internal/interactiveElement'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
+import { validateExactString, validateNonEmptyString } from '../../../internal/runtimeContract'
+
+defineOptions({
+  name: 'STooltipAnchor',
+  inheritAttrs: false,
+})
+
+export type STooltipAnchorShape = 'default' | 'pill' | 'circle'
+export type STooltipAnchorTag = 'span' | 'div'
+export type STooltipAnchorWidth = 'auto' | 'full'
+export type STooltipAnchorElement = HTMLSpanElement | HTMLDivElement
+export type STooltipAnchorApi = InteractiveElementApi<STooltipAnchorElement>
+
+/**
+ * Focus owner для tooltip над пассивным содержимым или недоступным control.
+ * Focus owner for a tooltip around passive content or an unavailable control.
+ */
+export interface Props {
+  /** Доступное имя самостоятельной focus-точки. / Accessible name of the standalone focus target. */
+  accessibleLabel: string
+  /** Валидный intrinsic root для inline или flow-content composition. / Valid intrinsic root for inline or flow-content composition. */
+  as?: STooltipAnchorTag
+  /** Геометрия принадлежащего компоненту focus ring. / Geometry of the component-owned focus ring. */
+  shape?: STooltipAnchorShape
+  /** Строчный или заполняющий layout-контракт. / Inline or fill layout contract. */
+  width?: STooltipAnchorWidth
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'span',
+  shape: 'default',
+  width: 'auto',
+})
+const emit = defineEmits<{
+  focusin: [event: FocusEvent]
+  focusout: [event: FocusEvent]
+  pointerenter: [event: PointerEvent]
+  pointerleave: [event: PointerEvent]
+  pointerdown: [event: PointerEvent]
+  pointerup: [event: PointerEvent]
+  pointercancel: [event: PointerEvent]
+}>()
+const slots = defineSlots<{
+  /** Пассивное содержимое или disabled control без собственной tab-stop. / Passive content or a disabled control without its own tab stop. */
+  default: () => VNodeChild
+}>()
+
+if (!slots.default) {
+  throw new Error(
+    'STooltipAnchor: default slot обязателен. / STooltipAnchor: the default slot is required.',
+  )
+}
+
+const anchorRef = ref<STooltipAnchorElement | null>(null)
+const ownedAttrs = useOwnedAttrs({ component: 'STooltipAnchor', owner: 'focusable tooltip anchor' })
+const resolvedAccessibleLabel = computed(() => (
+  validateNonEmptyString('STooltipAnchor', 'accessibleLabel', props.accessibleLabel)
+))
+const resolvedAs = computed(() => (
+  validateExactString('STooltipAnchor', 'as', props.as, ['span', 'div'] as const)
+))
+const rootTag = computed(() => resolvedAs.value === 'span' ? 'span' : 'div')
+const resolvedShape = computed(() => (
+  validateExactString(
+    'STooltipAnchor',
+    'shape',
+    props.shape,
+    ['default', 'pill', 'circle'] as const,
+  )
+))
+const resolvedWidth = computed(() => (
+  validateExactString('STooltipAnchor', 'width', props.width, ['auto', 'full'] as const)
+))
+
+useInteractiveLeafRegistration({ owner: 'STooltipAnchor' })
+
+const getElement = (): STooltipAnchorElement => {
+  const element = anchorRef.value
+  if (!element) {
+    throw new Error('STooltipAnchor: native anchor element is unavailable')
+  }
+  return element
+}
+
+defineExpose<STooltipAnchorApi>({
+  getElement,
+  focus: (options?: FocusOptions) => getElement().focus(options),
+})
+</script>
+
+<style lang="postcss" src="./STooltipAnchor.css" scoped></style>