@pgcorp/ui-kit 0.5.0 → 0.7.0

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>

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

@@ -0,0 +1,26 @@
+@reference "../../../styles/reference.css";
+
+.s-tooltip-target {
+  @apply inline-flex min-w-0 shrink-0 items-center justify-center align-middle;
+}
+
+.s-tooltip-target[data-appearance='keycap'] {
+  @apply border border-surface-300 bg-surface-100 font-mono font-semibold text-surface-700 shadow-sm;
+  border-radius: var(--radius-xs);
+}
+
+.s-tooltip-target[data-appearance='keycap'][data-size='xs'] {
+  @apply min-h-4 min-w-4 px-1 text-[0.625rem] leading-none;
+}
+
+.s-tooltip-target[data-appearance='keycap'][data-size='sm'] {
+  @apply min-h-5 min-w-5 px-1.5 text-xs leading-none;
+}
+
+.s-tooltip-target[data-appearance='keycap'][data-size='md'] {
+  @apply min-h-6 min-w-6 px-2 text-sm leading-none;
+}
+
+:global(.dark .s-tooltip-target[data-appearance='keycap']) {
+  @apply border-surface-600 bg-surface-800 text-surface-200;
+}

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

@@ -0,0 +1,94 @@
+<template>
+  <component
+    :is="rootTag"
+    ref="targetRef"
+    v-bind="ownedAttrs.bindings()"
+    class="s-tooltip-target"
+    :data-appearance="resolvedAppearance"
+    :data-size="resolvedSize"
+    @pointerenter="emit('pointerenter', $event)"
+    @pointerleave="emit('pointerleave', $event)"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, type VNodeChild } from 'vue'
+import type { ElementApi } from '../../../internal/interactiveElement'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { validateExactString } from '../../../internal/runtimeContract'
+
+defineOptions({
+  name: 'STooltipTarget',
+  inheritAttrs: false,
+})
+
+export type STooltipTargetTag = 'span' | 'kbd'
+export type STooltipTargetAppearance = 'plain' | 'keycap'
+export type STooltipTargetSize = 'xs' | 'sm' | 'md'
+export type STooltipTargetApi = ElementApi<HTMLElement>
+
+/**
+ * Пассивная pointer/geometry target для split-контракта STooltip.
+ * Passive pointer and geometry target for the STooltip split contract.
+ */
+export interface Props {
+  /** Семантический HTML root без собственной интерактивности. / Semantic HTML root without its own interactivity. */
+  as?: STooltipTargetTag
+  /** Нейтральная или keycap presentation. / Plain or keycap presentation. */
+  appearance?: STooltipTargetAppearance
+  /** Централизованная visual density target. / Centralized visual density of the target. */
+  size?: STooltipTargetSize
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'span',
+  appearance: 'plain',
+  size: 'sm',
+})
+const emit = defineEmits<{
+  pointerenter: [event: PointerEvent]
+  pointerleave: [event: PointerEvent]
+}>()
+const slots = defineSlots<{
+  /** Пассивное содержимое target. / Passive target content. */
+  default: () => VNodeChild
+}>()
+
+if (!slots.default) {
+  throw new Error('STooltipTarget: default slot обязателен. / STooltipTarget: the default slot is required.')
+}
+
+const targetRef = ref<HTMLElement | null>(null)
+const ownedAttrs = useOwnedAttrs({ component: 'STooltipTarget', owner: 'passive tooltip target' })
+const resolvedAs = computed(() => validateExactString(
+  'STooltipTarget',
+  'as',
+  props.as,
+  ['span', 'kbd'] as const,
+))
+const rootTag = computed(() => resolvedAs.value === 'kbd' ? 'kbd' : 'span')
+const resolvedAppearance = computed(() => validateExactString(
+  'STooltipTarget',
+  'appearance',
+  props.appearance,
+  ['plain', 'keycap'] as const,
+))
+const resolvedSize = computed(() => validateExactString(
+  'STooltipTarget',
+  'size',
+  props.size,
+  ['xs', 'sm', 'md'] as const,
+))
+
+const getElement = (): HTMLElement => {
+  const element = targetRef.value
+  if (!element) throw new Error('STooltipTarget: native target element is unavailable')
+  return element
+}
+
+defineExpose<STooltipTargetApi>({ getElement })
+</script>
+
+<style lang="postcss" src="./STooltipTarget.css" scoped></style>

package/src/components/shared/database/SDataGrid.vue

@@ -8,6 +8,9 @@
     no-content-padding
     content-layout="block"
     surface-overflow="clip"
+    :surface-tone="validatedPresentation === 'embedded' ? 'transparent' : 'default'"
+    :surface-border="validatedPresentation === 'embedded' ? 'none' : 'default'"
+    :surface-radius="validatedPresentation === 'embedded' ? 'none' : 'default'"
   >
     <template v-if="$slots.actions" #actions>
       <slot
@@ -113,6 +116,8 @@ export interface SDataGridProps<Key extends SDataGridColumnKey = SDataGridColumn
   emptyMessage?: string
   selectedRowId?: string
   maxHeight?: ScrollableViewportMaxBlockSize
+  /** Surface chrome для самостоятельного или вложенного grid. / Surface chrome for a standalone or embedded grid. */
+  presentation?: 'panel' | 'embedded'
   /** Accessible name без visible title. / Accessible name when there is no visible title. */
   ariaLabel?: string
   /** DOM id external visible title. / DOM id of an external visible title. */
@@ -168,6 +173,7 @@ const props = withDefaults(defineProps<SDataGridProps<ColumnKey>>(), {
   emptyMessage: 'Нет строк для отображения',
   selectedRowId: undefined,
   maxHeight: 'none',
+  presentation: 'panel',
   ariaLabel: undefined,
   ariaLabelledby: undefined,
 })
@@ -185,6 +191,7 @@ const CELL_KINDS = ['text', 'number', 'boolean', 'json', 'datetime', 'binary'] a
 const COLUMN_ALIGNMENTS = ['left', 'center', 'right'] as const
 const ROW_STATES = ['clean', 'inserted', 'updated', 'deleted'] as const
 const COMMIT_SOURCES = ['draft', 'value'] as const
+const PRESENTATIONS = ['panel', 'embedded'] as const
 
 function assertReadonlyArray(value: unknown, coordinate: string): asserts value is readonly unknown[] {
   if (Array.isArray(value)) return
@@ -335,6 +342,12 @@ const resolvedAccessibleName = computed(() => {
 const validatedLoading = computed(() => validateBoolean('SDataGrid', 'loading', props.loading))
 const validatedDisabled = computed(() => validateBoolean('SDataGrid', 'disabled', props.disabled))
 const validatedReadOnly = computed(() => validateBoolean('SDataGrid', 'readOnly', props.readOnly))
+const validatedPresentation = computed(() => validateExactString(
+  'SDataGrid',
+  'presentation',
+  props.presentation,
+  PRESENTATIONS,
+))
 const validatedMaxHeight = computed(() => validateScrollableViewportMaxBlockSize(
   'SDataGrid',
   'maxHeight',

package/src/components/shared/navigation/STabs.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     v-bind="ownedAttrs.bindings()"
+    :data-s-tone="toneBinding['data-s-tone']"
     class="s-tabs"
     :data-testid="testId"
     :data-composition="composition"
@@ -9,7 +10,6 @@
     :data-density="tabDensity"
     :data-sizing="tabSizing"
     :data-list-width="tabListWidth"
-    :data-tone="tone"
     :data-close-mode="closeButtonMode"
     :data-close-visibility="closeButtonVisibility"
     :data-radius="surfaceRadius"
@@ -58,6 +58,7 @@ import {
   type VNodeChild,
 } from 'vue'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { resolveSemanticToneBinding } from '../../../internal/semanticTone'
 import { lastItem } from '../../../internal/es2020'
 import {
   tabsContextKey,
@@ -80,6 +81,7 @@ export type STabsComposition = 'managed' | 'custom'
 export type STabsVariant = 'default' | 'flat' | 'bottom' | 'icon-only' | 'icon-with-label'
 export type STabsActivationMode = 'automatic' | 'manual'
 export type STabsTone = 'primary' | 'success'
+const TABS_TONES = ['primary', 'success'] as const satisfies readonly STabsTone[]
 export type STabsSizing =
   | 'content'
   | 'compact'
@@ -176,6 +178,12 @@ const slots = defineSlots<{
   controls?: () => VNodeChild
 }>()
 const ownedAttrs = useOwnedAttrs({ component: 'STabs', owner: 'tabs state and layout root' })
+const toneBinding = computed(() => resolveSemanticToneBinding(
+  'STabs',
+  'tone',
+  props.tone,
+  TABS_TONES,
+))
 
 function assertStableKey(value: unknown, coordinate: string): asserts value is string {
   if (typeof value !== 'string' || !value.trim() || value !== value.trim()) {
@@ -569,12 +577,12 @@ defineExpose({
   --s-tab-selected-border-color: var(--color-primary-400);
   --s-tab-disabled-color: var(--color-surface-600);
 }
-.s-tabs[data-tone='success'] {
+.s-tabs[data-s-tone='success'] {
   --s-tab-hover-color: var(--color-success-700);
   --s-tab-selected-color: var(--color-success-700);
   --s-tab-selected-border-color: var(--color-success-600);
 }
-:global(.dark) .s-tabs[data-tone='success'] {
+:global(.dark) .s-tabs[data-s-tone='success'] {
   --s-tab-hover-color: var(--color-success-300);
   --s-tab-selected-color: var(--color-success-300);
   --s-tab-selected-border-color: var(--color-success-400);

package/src/internal/fieldPresentation.ts

@@ -0,0 +1,28 @@
+import { computed, type ComputedRef } from 'vue'
+
+export const FIELD_REQUIRED_CLASS = 'ml-0.5 text-danger-600 dark:text-danger-400'
+export const FIELD_SUPPORT_CLASS = 'mt-1 min-w-0 whitespace-normal text-xs [overflow-wrap:anywhere]'
+export const FIELD_HELP_CLASS = `${FIELD_SUPPORT_CLASS} text-surface-500 dark:text-surface-400`
+export const FIELD_ERROR_CLASS = `${FIELD_SUPPORT_CLASS} text-danger-600 dark:text-danger-400`
+
+export interface FieldSupportingTextOptions {
+  readonly baseId: ComputedRef<string>
+  readonly hasHelp: () => boolean
+  readonly hasError: () => boolean
+}
+
+/**
+ * Владеет exact ID и aria-describedby contract для help/error у field и fieldset.
+ * Owns the exact help/error ID and aria-describedby contract for fields and fieldsets.
+ */
+export function useFieldSupportingText(options: FieldSupportingTextOptions) {
+  const helpId = computed(() => `${options.baseId.value}-help`)
+  const errorId = computed(() => `${options.baseId.value}-error`)
+  const describedBy = computed(() => {
+    const ids: string[] = []
+    if (options.hasHelp()) ids.push(helpId.value)
+    if (options.hasError()) ids.push(errorId.value)
+    return ids.length > 0 ? ids.join(' ') : undefined
+  })
+  return { describedBy, errorId, helpId } as const
+}

package/src/internal/ownedAttrs.ts

@@ -294,6 +294,9 @@ export const ownedAttributeSchemas = Object.freeze({
     'data-testid': 'data',
     id: 'string',
   }),
+  STooltipTarget: defineOwnedAttributeSchema({
+    'data-testid': 'data',
+  }),
   SVirtualList: defineOwnedAttributeSchema({}),
   SAsyncState: defineOwnedAttributeSchema({}),
   SDataGrid: defineOwnedAttributeSchema({}),