@pgcorp/ui-kit 0.10.0 → 0.10.1

package/src/components/shared/controls/SInputText.vue

@@ -1,336 +0,0 @@
-<template>
-  <div
-    class="s-input-text-wrapper"
-    :data-input-family="inputTypeContract.family"
-    :data-trailing="trailingKind"
-    :data-with-label="Boolean(label) || undefined"
-  >
-    <SField
-      :control-id="inputId"
-      :label="label"
-      :required="required"
-      :help-text="helpText"
-      :error-message="errorMessage"
-      :invalid="invalid"
-      :disabled="disabled"
-      :readonly="readonly"
-    >
-      <template #default="field">
-        <div class="s-input-control">
-          <input
-            v-bind="{ ...ownedAttrs.bindings(), ...fieldSurfaceBindings(field) }"
-            :id="field.controlId"
-            :name="name"
-            ref="inputRef"
-            :type="inputTypeContract.type"
-            class="s-input-text"
-            :class="{ 's-input-text--monospace': monospace }"
-            :data-size="validatedSize"
-            :data-appearance="validatedAppearance"
-            :value="modelValue"
-            :placeholder="placeholder"
-            :autocomplete="autocomplete"
-            :autocapitalize="autocapitalize"
-            :autocorrect="autocorrect"
-            :spellcheck="spellcheck"
-            :disabled="field.disabled"
-            :readonly="field.readonly"
-            :required="field.required"
-            :aria-invalid="field.invalid || undefined"
-            :aria-describedby="mergeIdReferences(ownedAttrs.string('aria-describedby'), field.describedBy)"
-            @input="onInput"
-            @change="onChange"
-            @focus="emit('focus', $event)"
-            @click="emit('click', $event)"
-            @keydown="emit('keydown', $event)"
-          />
-          <div v-if="trailingKind" class="s-input-trailing" :data-kind="trailingKind">
-            <span v-if="trailingIcon" class="s-input-trailing__passive" aria-hidden="true">
-              <component :is="trailingIcon" class="s-input-trailing__icon" />
-            </span>
-            <span v-else-if="trailingText !== undefined" class="s-input-trailing__text" aria-hidden="true">
-              {{ trailingText }}
-            </span>
-            <SButton
-              v-else-if="trailingAction"
-              label=""
-              size="sm"
-              appearance="ghost"
-              shape="square"
-              icon-only
-              :severity="trailingAction.severity ?? 'secondary'"
-              :leading-icon="trailingAction.icon"
-              :loading="trailingAction.loading"
-              :disabled="field.disabled || trailingAction.disabled"
-              :title="trailingAction.title ?? trailingAction.label"
-              :aria-label="trailingAction.label"
-              @click="emit('trailing-action', $event)"
-            />
-          </div>
-        </div>
-      </template>
-    </SField>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, useId, watchEffect, type Component } from 'vue'
-import type { InteractiveElementApi } from '../../../internal/interactiveElement'
-import { mergeIdReferences, useOwnedAttrs } from '../../../internal/ownedAttrs'
-import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
-import { resolveFieldSurfaceBindings, type FieldSurfaceBindings } from '../../../internal/fieldSurface'
-import { resolveOptionalDomId, validateExactString } from '../../../internal/runtimeContract'
-import SButton, { type SButtonSeverity } from './SButton.vue'
-import SField from './SField.vue'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-/** Текстовые native input types с text-editing semantics. / Textual native input types with text-editing semantics. */
-export type SInputTextTextualType = 'text' | 'search' | 'password' | 'email' | 'tel' | 'url'
-/** Числовой native input type; model events остаются строками. / Numeric native input type; model events remain strings. */
-export type SInputTextNumericType = 'number'
-/** Временные native types со строковым browser value. / Temporal native types with a browser-formatted string value. */
-export type SInputTextTemporalType = 'date' | 'datetime-local' | 'month' | 'time' | 'week'
-/** Конечная native type surface владельца SInputText. / Finite native type surface owned by SInputText. */
-export type SInputTextType = SInputTextTextualType | SInputTextNumericType | SInputTextTemporalType
-
-/**
- * Дискриминированный native input contract без file/range/choice/button semantics.
- * Discriminated native input contract without file/range/choice/button semantics.
- */
-export type SInputTextTypeContract =
-  | { family: 'textual'; type: SInputTextTextualType }
-  | { family: 'numeric'; type: SInputTextNumericType }
-  | { family: 'temporal'; type: SInputTextTemporalType }
-
-const INPUT_TYPES = [
-  'text',
-  'search',
-  'password',
-  'email',
-  'tel',
-  'url',
-  'number',
-  'date',
-  'datetime-local',
-  'month',
-  'time',
-  'week',
-] as const satisfies readonly SInputTextType[]
-
-const INPUT_TYPE_CONTRACTS = {
-  text: { family: 'textual', type: 'text' },
-  search: { family: 'textual', type: 'search' },
-  password: { family: 'textual', type: 'password' },
-  email: { family: 'textual', type: 'email' },
-  tel: { family: 'textual', type: 'tel' },
-  url: { family: 'textual', type: 'url' },
-  number: { family: 'numeric', type: 'number' },
-  date: { family: 'temporal', type: 'date' },
-  'datetime-local': { family: 'temporal', type: 'datetime-local' },
-  month: { family: 'temporal', type: 'month' },
-  time: { family: 'temporal', type: 'time' },
-  week: { family: 'temporal', type: 'week' },
-} as const satisfies Record<SInputTextType, SInputTextTypeContract>
-
-export interface Props {
-  modelValue: string | null
-  /** Стандартные Vue v-model modifiers для строкового input contract. / Standard Vue v-model modifiers for the string input contract. */
-  modelModifiers?: SInputTextModelModifiers
-  label?: string
-  placeholder?: string
-  disabled?: boolean
-  readonly?: boolean
-  required?: boolean
-  monospace?: boolean
-  size?: 'sm' | 'md' | 'lg'
-  appearance?: 'field' | 'grid-cell' | 'workbench-title'
-  invalid?: boolean
-  errorMessage?: string
-  helpText?: string
-  id?: string
-  name?: string
-  type?: SInputTextType
-  trailingIcon?: Component
-  trailingText?: string
-  trailingAction?: SInputTextTrailingAction
-  autocomplete?: string
-  autocapitalize?: 'none' | 'off' | 'sentences' | 'words' | 'characters'
-  autocorrect?: 'on' | 'off'
-  spellcheck?: boolean
-}
-
-export interface SInputTextModelModifiers {
-  trim?: boolean
-  lazy?: boolean
-  number?: boolean
-}
-
-/**
- * Типизированное действие в trailing-region поля; geometry принадлежит SInputText/SButton.
- * Typed trailing action whose geometry is owned by SInputText/SButton.
- */
-export interface SInputTextTrailingAction {
-  label: string
-  icon: Component
-  title?: string
-  severity?: SButtonSeverity
-  disabled?: boolean
-  loading?: boolean
-}
-
-/** Native input owner API for focus-managed compound controls. */
-export type SInputTextApi = InteractiveElementApi<HTMLInputElement>
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: '',
-  modelModifiers: () => ({}),
-  label: undefined,
-  placeholder: undefined,
-  disabled: false,
-  readonly: false,
-  required: false,
-  monospace: false,
-  size: 'md',
-  appearance: 'field',
-  invalid: false,
-  errorMessage: undefined,
-  helpText: undefined,
-  id: undefined,
-  name: undefined,
-  type: 'text',
-  trailingIcon: undefined,
-  trailingText: undefined,
-  trailingAction: undefined,
-  autocomplete: undefined,
-  autocapitalize: undefined,
-  autocorrect: undefined,
-  spellcheck: undefined,
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-  'trailing-action': [event: MouseEvent]
-  focus: [event: FocusEvent]
-  click: [event: MouseEvent]
-  keydown: [event: KeyboardEvent]
-}>()
-const ownedAttrs = useOwnedAttrs({ component: 'SInputText', owner: 'native input' })
-useInteractiveLeafRegistration({ owner: 'SInputText' })
-
-const inputRef = ref<HTMLInputElement | null>(null)
-defineExpose({
-  focus: () => inputRef.value?.focus(),
-  getElement: () => {
-    const element = inputRef.value
-    if (!element) throw new Error('SInputText: native input element is unavailable')
-    return element
-  },
-})
-
-const generatedInputId = useId()
-const inputId = computed(() => resolveOptionalDomId(
-  'SInputText',
-  'id',
-  props.id,
-  `s-input-text-${generatedInputId}`,
-))
-const inputTypeContract = computed<SInputTextTypeContract>(() => {
-  const type = validateExactString('SInputText', 'type', props.type, INPUT_TYPES)
-  return INPUT_TYPE_CONTRACTS[type]
-})
-const validatedSize = computed(() => validateExactString(
-  'SInputText', 'size', props.size, ['sm', 'md', 'lg'] as const,
-))
-const validatedAppearance = computed(() => validateExactString(
-  'SInputText',
-  'appearance',
-  props.appearance,
-  ['field', 'grid-cell', 'workbench-title'] as const,
-))
-const validatedModelModifiers = computed(() => {
-  const candidate: unknown = props.modelModifiers
-  if (typeof candidate !== 'object' || candidate === null || Array.isArray(candidate)) {
-    throw new TypeError('SInputText: modelModifiers должен быть object. / SInputText: modelModifiers must be an object.')
-  }
-  const modifiers = candidate as Record<string, unknown>
-  const allowed = new Set(['trim', 'lazy', 'number'])
-  const unknown = Object.keys(modifiers).filter((key) => !allowed.has(key))
-  if (unknown.length > 0) {
-    throw new Error(`SInputText: modelModifiers содержит неизвестные поля ${unknown.join(', ')}. / SInputText: modelModifiers contains unknown fields ${unknown.join(', ')}.`)
-  }
-  for (const key of allowed) {
-    if (modifiers[key] !== undefined && typeof modifiers[key] !== 'boolean') {
-      throw new TypeError(`SInputText: modelModifiers.${key} должен быть boolean. / SInputText: modelModifiers.${key} must be boolean.`)
-    }
-  }
-  if (modifiers.number === true) {
-    throw new Error(
-      'SInputText: modifier number несовместим со строковым modelValue; используйте числовой UI-kit control с числовой моделью. '
-      + '/ SInputText: the number modifier is incompatible with string modelValue; use a numeric UI-kit control with a numeric model.',
-    )
-  }
-  return {
-    trim: modifiers.trim === true,
-    lazy: modifiers.lazy === true,
-  }
-})
-
-function fieldSurfaceBindings(field: {
-  invalid: boolean
-  disabled: boolean
-  readonly: boolean
-}): FieldSurfaceBindings {
-  return resolveFieldSurfaceBindings('SInputText', {
-    kind: 'text-input',
-    appearance: validatedAppearance.value === 'field' ? 'field' : 'embedded',
-    invalid: field.invalid,
-    disabled: field.disabled,
-    readonly: field.readonly,
-  })
-}
-
-const trailingKind = computed<'icon' | 'text' | 'action' | undefined>(() => {
-  if (props.trailingIcon) return 'icon'
-  if (props.trailingText !== undefined) return 'text'
-  if (props.trailingAction) return 'action'
-  return undefined
-})
-
-watchEffect(() => {
-  void validatedModelModifiers.value
-  const trailingContracts = [props.trailingIcon, props.trailingText, props.trailingAction]
-    .filter((value) => value !== undefined)
-  if (trailingContracts.length > 1) {
-    throw new Error('SInputText: trailingIcon, trailingText и trailingAction взаимоисключающие')
-  }
-  if (props.trailingText !== undefined && props.trailingText.length === 0) {
-    throw new Error('SInputText: trailingText не может быть пустым')
-  }
-  if (props.trailingAction && props.trailingAction.label.trim().length === 0) {
-    throw new Error('SInputText: trailingAction.label обязателен')
-  }
-})
-
-function emitInputValue(event: Event): void {
-  const target = event.target
-  if (!(target instanceof HTMLInputElement)) {
-    throw new TypeError('SInputText: input/change event target должен быть HTMLInputElement')
-  }
-  const value = validatedModelModifiers.value.trim ? target.value.trim() : target.value
-  emit('update:modelValue', value)
-}
-
-function onInput(event: Event): void {
-  if (!validatedModelModifiers.value.lazy) emitInputValue(event)
-}
-
-function onChange(event: Event): void {
-  if (validatedModelModifiers.value.lazy) emitInputValue(event)
-}
-
-</script>
-
-<style lang="postcss" src="./SInputText.css" scoped></style>

package/src/components/shared/controls/SInteractiveSurface.vue

@@ -1,352 +0,0 @@
-<script setup lang="ts">
-import { computed, watchEffect, type VNodeChild } from 'vue'
-import { RouterLink, type RouteLocationRaw } from 'vue-router'
-import type { STooltipTriggerBinding } from '../data-display/STooltip.vue'
-import { hasOwn } from '../../../internal/es2020'
-import { resolveLinkTarget } from '../../../internal/linkTarget'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import { resolveSemanticToneBinding } from '../../../internal/semanticTone'
-import {
-  PassiveContentBoundary,
-  useInteractiveLeafRegistration,
-  type PassiveContentContract,
-} from '../../../internal/passiveContentContract'
-
-defineOptions({ inheritAttrs: false })
-
-export type InteractiveSurfaceTone = 'default' | 'primary' | 'success' | 'danger'
-const INTERACTIVE_SURFACE_TONES = ['default', 'primary', 'success', 'danger'] as const satisfies readonly InteractiveSurfaceTone[]
-export type InteractiveSurfaceDensity = 'compact' | 'comfortable'
-export type InteractiveSurfacePadding = 'none' | 'sm' | 'md'
-export type InteractiveSurfaceRadius = 'md' | 'lg' | 'xl'
-export type InteractiveSurfaceFill = 'content' | 'container'
-export type InteractiveSurfaceAppearance = 'card' | 'plain' | 'bare'
-export type InteractiveSurfaceActionsLayout = 'responsive' | 'inline' | 'stacked'
-
-/**
- * Единственный semantic-контракт поверхности: passive, action или ровно одна link-target.
- * The sole surface semantics contract: passive, action, or exactly one link target.
- */
-export type InteractiveSurfaceContract =
-  | { readonly mode: 'static' }
-  | {
-      readonly mode: 'action'
-      readonly accessibleLabel: string
-      readonly disabled?: boolean
-      readonly pressed?: boolean
-    }
-  | ({
-      readonly mode: 'link'
-      readonly accessibleLabel: string
-      readonly disabled?: boolean
-      readonly target?: '_self' | '_blank' | '_parent' | '_top'
-      readonly rel?: string
-    } & (
-      | { readonly href: string; readonly to?: never }
-      | { readonly href?: never; readonly to: RouteLocationRaw }
-    ))
-/** Разрешённые semantic-режимы поверхности. / Supported semantic surface modes. */
-export type InteractiveSurfaceMode = InteractiveSurfaceContract['mode']
-
-/**
- * Контракт большой интерактивной поверхности с пассивным содержимым.
- * Contract for a large interactive surface whose visual content remains passive.
- */
-export interface Props {
-  surface: InteractiveSurfaceContract
-  selected?: boolean
-  tone?: InteractiveSurfaceTone
-  density?: InteractiveSurfaceDensity
-  padding?: InteractiveSurfacePadding
-  radius?: InteractiveSurfaceRadius
-  fill?: InteractiveSurfaceFill
-  appearance?: InteractiveSurfaceAppearance
-  actionsLayout?: InteractiveSurfaceActionsLayout
-  contentAlign?: 'start' | 'center'
-  /** Полный binding явного STooltip trigger, направляемый на activation owner. / Complete explicit STooltip trigger binding routed to the activation owner. */
-  tooltipTrigger?: STooltipTriggerBinding
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  selected: false,
-  tone: 'default',
-  density: 'comfortable',
-  padding: 'md',
-  radius: 'lg',
-  fill: 'content',
-  appearance: 'card',
-  actionsLayout: 'inline',
-  contentAlign: 'start',
-  tooltipTrigger: undefined,
-})
-
-const emit = defineEmits<{
-  activate: [event: MouseEvent]
-}>()
-const slots = defineSlots<{
-  /** Пассивное flow-содержимое поверхности. / Passive flow content of the surface. */
-  default?: () => VNodeChild
-  /** Sibling controls inside the same visual chrome and outside the primary activation owner. */
-  actions?: () => VNodeChild
-}>()
-
-const ownedAttrs = useOwnedAttrs({ component: 'SInteractiveSurface', owner: 'interactive surface owner' })
-const toneBinding = computed(() => resolveSemanticToneBinding(
-  'SInteractiveSurface',
-  'tone',
-  props.tone,
-  INTERACTIVE_SURFACE_TONES,
-))
-
-const assertOptionalBoolean = (surface: Record<string, unknown>, field: 'disabled' | 'pressed'): void => {
-  if (surface[field] !== undefined && typeof surface[field] !== 'boolean') {
-    throw new TypeError(`SInteractiveSurface: surface.${field} должен быть boolean`)
-  }
-}
-
-const assertExactSurfaceKeys = (surface: Record<string, unknown>, allowed: readonly string[]): void => {
-  const allowedKeys = new Set(allowed)
-  const unexpected = Object.keys(surface).filter((key) => !allowedKeys.has(key))
-  if (unexpected.length > 0) {
-    throw new Error(`SInteractiveSurface: surface mode="${String(surface.mode)}" не допускает поля ${unexpected.join(', ')}`)
-  }
-}
-
-const validatedSurface = computed<InteractiveSurfaceContract>(() => {
-  const candidate: unknown = props.surface
-  if (typeof candidate !== 'object' || candidate === null || Array.isArray(candidate)) {
-    throw new TypeError('SInteractiveSurface: surface должен быть discriminated object')
-  }
-  const surface = candidate as Record<string, unknown>
-  if (surface.mode === 'static') {
-    assertExactSurfaceKeys(surface, ['mode'])
-    return { mode: 'static' }
-  }
-  if (surface.mode === 'action') {
-    assertExactSurfaceKeys(surface, ['mode', 'accessibleLabel', 'disabled', 'pressed'])
-    assertOptionalBoolean(surface, 'disabled')
-    assertOptionalBoolean(surface, 'pressed')
-    if (typeof surface.accessibleLabel !== 'string' || !surface.accessibleLabel.trim()) {
-      throw new TypeError('SInteractiveSurface: accessibleLabel обязателен для mode="action"')
-    }
-    return {
-      mode: 'action',
-      accessibleLabel: surface.accessibleLabel,
-      disabled: surface.disabled as boolean | undefined,
-      pressed: surface.pressed as boolean | undefined,
-    }
-  }
-  if (surface.mode === 'link') {
-    assertExactSurfaceKeys(surface, ['mode', 'accessibleLabel', 'disabled', 'target', 'rel', 'href', 'to'])
-    assertOptionalBoolean(surface, 'disabled')
-    if (typeof surface.accessibleLabel !== 'string' || !surface.accessibleLabel.trim()) {
-      throw new TypeError('SInteractiveSurface: accessibleLabel обязателен для mode="link"')
-    }
-    const target = surface.target ?? '_self'
-    if (!['_self', '_blank', '_parent', '_top'].includes(String(target))) {
-      throw new TypeError('SInteractiveSurface: surface.target имеет недопустимое значение')
-    }
-    if (surface.rel !== undefined && typeof surface.rel !== 'string') {
-      throw new TypeError('SInteractiveSurface: surface.rel должен быть string')
-    }
-    if ('href' in surface && (typeof surface.href !== 'string' || surface.href.length === 0)) {
-      throw new TypeError('SInteractiveSurface: surface.href должен быть непустой string')
-    }
-    if (
-      'to' in surface
-      && !(
-        typeof surface.to === 'string'
-        || (typeof surface.to === 'object' && surface.to !== null && !Array.isArray(surface.to))
-      )
-    ) {
-      throw new TypeError('SInteractiveSurface: surface.to должен быть RouteLocationRaw')
-    }
-    const resolved = resolveLinkTarget({
-      href: typeof surface.href === 'string' ? surface.href : undefined,
-      to: surface.to as RouteLocationRaw | undefined,
-      target: target as '_self' | '_blank' | '_parent' | '_top',
-      rel: surface.rel as string | undefined,
-      owner: 'SInteractiveSurface',
-    })
-    return resolved.kind === 'anchor'
-      ? {
-          mode: 'link',
-          accessibleLabel: surface.accessibleLabel,
-          disabled: surface.disabled as boolean | undefined,
-          href: resolved.bindings.href,
-          target: resolved.bindings.target,
-          rel: resolved.bindings.rel,
-        }
-      : {
-          mode: 'link',
-          accessibleLabel: surface.accessibleLabel,
-          disabled: surface.disabled as boolean | undefined,
-          to: resolved.bindings.to,
-          target: resolved.bindings.target,
-          rel: resolved.bindings.rel,
-        }
-  }
-  throw new TypeError(`SInteractiveSurface: неизвестный surface.mode "${String(surface.mode)}"`)
-})
-
-const TOOLTIP_TRIGGER_KEYS = [
-  'ref',
-  'aria-describedby',
-  'onPointerenter',
-  'onPointerleave',
-  'onPointerdown',
-  'onPointerup',
-  'onPointercancel',
-  'onFocusin',
-  'onFocusout',
-] as const
-
-const validatedTooltipTrigger = computed<STooltipTriggerBinding | undefined>(() => {
-  const candidate: unknown = props.tooltipTrigger
-  if (candidate === undefined) return undefined
-  if (typeof candidate !== 'object' || candidate === null || Array.isArray(candidate)) {
-    throw new TypeError('SInteractiveSurface: tooltipTrigger должен быть полным STooltip trigger binding. / SInteractiveSurface: tooltipTrigger must be a complete STooltip trigger binding.')
-  }
-  const record = candidate as Record<string, unknown>
-  const unexpected = Object.keys(record).filter((key) => !TOOLTIP_TRIGGER_KEYS.includes(key as typeof TOOLTIP_TRIGGER_KEYS[number]))
-  const missing = TOOLTIP_TRIGGER_KEYS.filter((key) => !hasOwn(record, key))
-  if (unexpected.length > 0 || missing.length > 0) {
-    throw new Error(`SInteractiveSurface: tooltipTrigger имеет недопустимый набор ключей; missing=${missing.join(',')}; unexpected=${unexpected.join(',')}. / SInteractiveSurface: tooltipTrigger has an invalid key set; missing=${missing.join(',')}; unexpected=${unexpected.join(',')}.`)
-  }
-  if (record['aria-describedby'] !== undefined && typeof record['aria-describedby'] !== 'string') {
-    throw new TypeError('SInteractiveSurface: tooltipTrigger aria-describedby должен быть string или undefined. / SInteractiveSurface: tooltipTrigger aria-describedby must be a string or undefined.')
-  }
-  if (typeof record.ref !== 'function') {
-    throw new TypeError('SInteractiveSurface: tooltipTrigger.ref должен быть callback ref. / SInteractiveSurface: tooltipTrigger.ref must be a callback ref.')
-  }
-  for (const key of TOOLTIP_TRIGGER_KEYS) {
-    if (key !== 'ref' && key !== 'aria-describedby' && typeof record[key] !== 'function') {
-      throw new TypeError(`SInteractiveSurface: tooltipTrigger.${key} должен быть function. / SInteractiveSurface: tooltipTrigger.${key} must be a function.`)
-    }
-  }
-  return candidate as STooltipTriggerBinding
-})
-const activationBindings = (): Readonly<Record<string, unknown>> => ({
-  ...ownedAttrs.bindings(),
-  ...(validatedTooltipTrigger.value ?? {}),
-})
-const surfaceMode = computed<InteractiveSurfaceMode>(() => validatedSurface.value.mode)
-const surfaceDisabled = computed(() => validatedSurface.value.mode === 'static'
-  ? false
-  : validatedSurface.value.disabled ?? false)
-const surfacePressed = computed(() => validatedSurface.value.mode === 'action' ? validatedSurface.value.pressed : undefined)
-const resolvedTarget = computed(() => {
-  const surface = validatedSurface.value
-  if (surface.mode !== 'link') return null
-  return resolveLinkTarget({
-    href: surface.href,
-    to: surface.to,
-    target: surface.target ?? '_self',
-    rel: surface.rel,
-    owner: 'SInteractiveSurface',
-  })
-})
-const linkComponent = computed(() => resolvedTarget.value?.kind === 'router' ? RouterLink : 'a')
-const linkBindings = () => {
-  const target = resolvedTarget.value
-  if (!target) throw new Error('SInteractiveSurface: link bindings requested outside link surface')
-  return {
-    ...activationBindings(),
-    ...target.bindings,
-  }
-}
-const resolvedAccessibleLabel = computed(() => {
-  if (validatedSurface.value.mode === 'static') return undefined
-  return validatedSurface.value.accessibleLabel.trim()
-})
-
-watchEffect(() => {
-  if (validatedSurface.value.mode === 'static' && validatedTooltipTrigger.value) {
-    throw new Error('SInteractiveSurface: tooltipTrigger требует action или link surface. / SInteractiveSurface: tooltipTrigger requires an action or link surface.')
-  }
-  void validatedTooltipTrigger.value
-})
-
-useInteractiveLeafRegistration({
-  owner: 'SInteractiveSurface',
-  active: () => surfaceMode.value !== 'static',
-})
-const passiveContentContract: PassiveContentContract = {
-  owner: 'SInteractiveSurface',
-  region: 'passive content-region',
-  active: () => surfaceMode.value !== 'static',
-  guidance: 'Передайте дополнительное действие через sibling action-region. / Put the additional action in the sibling action region.',
-}
-
-function activateLink(event: MouseEvent): void {
-  if (surfaceDisabled.value) {
-    event.preventDefault()
-    return
-  }
-  emit('activate', event)
-}
-
-function activateAction(event: MouseEvent): void {
-  emit('activate', event)
-}
-</script>
-
-<template>
-  <div
-    v-bind="surfaceMode === 'static' ? ownedAttrs.bindings() : undefined"
-    :data-s-tone="toneBinding['data-s-tone']"
-    class="s-interactive-surface"
-    :data-mode="surfaceMode"
-    :data-density="density"
-    :data-padding="padding"
-    :data-radius="radius"
-    :data-fill="fill"
-    :data-appearance="appearance"
-    :data-actions-layout="actionsLayout"
-    :data-has-actions="Boolean(slots.actions) || undefined"
-    :data-selected="selected || undefined"
-    :data-pressed="surfacePressed"
-    :data-disabled="surfaceDisabled || undefined"
-    :data-content-align="contentAlign"
-  >
-    <div class="s-interactive-surface__layout">
-      <div class="s-interactive-surface__primary">
-        <button
-          v-if="surfaceMode === 'action'"
-          v-bind="activationBindings()"
-          class="s-interactive-surface__activation"
-          type="button"
-          :disabled="surfaceDisabled"
-          :aria-label="resolvedAccessibleLabel"
-          :aria-pressed="surfacePressed"
-          @click="activateAction"
-        >
-          <span class="s-interactive-surface__accessible-label">{{ resolvedAccessibleLabel }}</span>
-        </button>
-        <component
-          v-else-if="surfaceMode === 'link'"
-          :is="linkComponent"
-          v-bind="linkBindings()"
-          class="s-interactive-surface__activation"
-          :aria-label="resolvedAccessibleLabel"
-          :aria-current="selected ? 'page' : undefined"
-          :aria-disabled="surfaceDisabled || undefined"
-          :tabindex="surfaceDisabled ? -1 : undefined"
-          @click="activateLink"
-        >
-          <span class="s-interactive-surface__accessible-label">{{ resolvedAccessibleLabel }}</span>
-        </component>
-        <div class="s-interactive-surface__content" data-passive-content="">
-          <PassiveContentBoundary :contract="passiveContentContract">
-            <slot />
-          </PassiveContentBoundary>
-        </div>
-      </div>
-      <div v-if="$slots.actions" class="s-interactive-surface__actions">
-        <slot name="actions" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="postcss" src="./SInteractiveSurface.css" scoped></style>