@pgcorp/ui-kit 0.9.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pgcorp/ui-kit",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Typed Vue 3 design system with accessible components, semantic themes, and workbench patterns.",
   "type": "module",
   "types": "./index.ts",
@@ -37,7 +37,7 @@
     "email": "remand-gambol4g@icloud.com"
   },
   "engines": {
-    "node": ">=20.19.0",
+    "node": "^22.22.2 || ^24.15.0 || ^26.0.0",
     "npm": ">=10.9.2 <12"
   },
   "publishConfig": {
@@ -46,17 +46,21 @@
   },
   "scripts": {
     "audit:composition": "node ./scripts/check-composition.mjs --mode audit",
+    "audit:owned-strings": "node ./scripts/audit-kit-owned-strings.mjs",
     "build": "vite build",
     "check:composition": "node ./scripts/check-composition.mjs --mode check",
     "check:composition-contract": "node ./scripts/check-composition.mjs --mode contract",
+    "check:owned-strings": "node ./scripts/audit-kit-owned-strings.mjs --check",
     "check:proof": "node ./scripts/check-proof-contract.mjs",
     "check:proof-contract": "vitest --config ./vitest.config.ts --run src/__tests__/proof-contract.spec.ts src/__tests__/proof-sync.spec.ts",
     "check:proof-drift": "node ./scripts/sync-proof-contract.mjs --check",
     "check:package-exports": "node ./scripts/sync-package-exports.mjs --check",
+    "check:locale-runtime": "node ./scripts/sync-locale-runtime.mjs --check",
     "check:publish": "node ./scripts/check-publish-contract.mjs",
     "pack:dry-run": "npm pack --dry-run --json --cache ../../.cache/npm/ui-kit-publish",
     "smoke:package": "node ./scripts/smoke-published-package.mjs",
     "sync:package-exports": "node ./scripts/sync-package-exports.mjs --write",
+    "sync:locale-runtime": "node ./scripts/sync-locale-runtime.mjs --write",
     "sync:proof": "node ./scripts/sync-proof-contract.mjs --write",
     "type-check": "vue-tsc --noEmit -p tsconfig.json",
     "type-check:test": "vue-tsc --noEmit -p tsconfig.vitest.json",
@@ -87,6 +91,9 @@
       "composables/useSidebarPanelState": [
         "src/composables/useSidebarPanelState.ts"
       ],
+      "composables/useUiKitLocale": [
+        "src/composables/useUiKitLocale.ts"
+      ],
       "icons": [
         "src/components/icons/sputnigUiIcons.ts"
       ],
@@ -189,6 +196,9 @@
       "shared/containers/SSidebarSection.vue": [
         "src/components/shared/containers/SSidebarSection.vue"
       ],
+      "shared/containers/SUiKitLocaleProvider.vue": [
+        "src/components/shared/containers/SUiKitLocaleProvider.vue"
+      ],
       "shared/controls/menu": [
         "src/components/shared/controls/menu.ts"
       ],
@@ -276,9 +286,21 @@
       "shared/data-display/chart": [
         "src/components/shared/data-display/chart.ts"
       ],
+      "shared/data-display/codeEditor": [
+        "src/components/shared/data-display/codeEditor.ts"
+      ],
+      "shared/data-display/codeWorkspace": [
+        "src/components/shared/data-display/codeWorkspace.ts"
+      ],
+      "shared/data-display/diff": [
+        "src/components/shared/data-display/diff.ts"
+      ],
       "shared/data-display/json": [
         "src/components/shared/data-display/json.ts"
       ],
+      "shared/data-display/richDocument": [
+        "src/components/shared/data-display/richDocument.ts"
+      ],
       "shared/data-display/SActionCard.vue": [
         "src/components/shared/data-display/SActionCard.vue"
       ],
@@ -306,9 +328,21 @@
       "shared/data-display/SCodeSearchPanel.vue": [
         "src/components/shared/data-display/SCodeSearchPanel.vue"
       ],
+      "shared/data-display/SCodeWorkspaceEditor.vue": [
+        "src/components/shared/data-display/SCodeWorkspaceEditor.vue"
+      ],
+      "shared/data-display/SControlledToastViewport.vue": [
+        "src/components/shared/data-display/SControlledToastViewport.vue"
+      ],
       "shared/data-display/SCopyField.vue": [
         "src/components/shared/data-display/SCopyField.vue"
       ],
+      "shared/data-display/scrollViewport": [
+        "src/components/shared/data-display/scrollViewport.ts"
+      ],
+      "shared/data-display/SDiffViewer.vue": [
+        "src/components/shared/data-display/SDiffViewer.vue"
+      ],
       "shared/data-display/SDocBlock.vue": [
         "src/components/shared/data-display/SDocBlock.vue"
       ],
@@ -339,6 +373,12 @@
       "shared/data-display/SProgressIndicator.vue": [
         "src/components/shared/data-display/SProgressIndicator.vue"
       ],
+      "shared/data-display/SRichDocument.vue": [
+        "src/components/shared/data-display/SRichDocument.vue"
+      ],
+      "shared/data-display/SScrollViewport.vue": [
+        "src/components/shared/data-display/SScrollViewport.vue"
+      ],
       "shared/data-display/SSectionHeader.vue": [
         "src/components/shared/data-display/SSectionHeader.vue"
       ],
@@ -369,6 +409,9 @@
       "shared/data-display/table": [
         "src/components/shared/data-display/table.ts"
       ],
+      "shared/data-display/toast": [
+        "src/components/shared/data-display/toast.ts"
+      ],
       "shared/database/SDataGrid.vue": [
         "src/components/shared/database/SDataGrid.vue"
       ],
@@ -452,6 +495,7 @@
     "./composables/useFloatingPosition": "./src/composables/useFloatingPosition.ts",
     "./composables/useNotifier": "./src/composables/useNotifier.ts",
     "./composables/useSidebarPanelState": "./src/composables/useSidebarPanelState.ts",
+    "./composables/useUiKitLocale": "./src/composables/useUiKitLocale.ts",
     "./icons": "./src/components/icons/sputnigUiIcons.ts",
     "./layout/SAppShell.vue": "./src/components/layout/SAppShell.vue",
     "./layout/SDockRegion.vue": "./src/components/layout/SDockRegion.vue",
@@ -487,6 +531,7 @@
     "./shared/containers/SPopover.vue": "./src/components/shared/containers/SPopover.vue",
     "./shared/containers/SSidebarGroup.vue": "./src/components/shared/containers/SSidebarGroup.vue",
     "./shared/containers/SSidebarSection.vue": "./src/components/shared/containers/SSidebarSection.vue",
+    "./shared/containers/SUiKitLocaleProvider.vue": "./src/components/shared/containers/SUiKitLocaleProvider.vue",
     "./shared/controls/menu": "./src/components/shared/controls/menu.ts",
     "./shared/controls/SButton.vue": "./src/components/shared/controls/SButton.vue",
     "./shared/controls/SCheckbox.vue": "./src/components/shared/controls/SCheckbox.vue",
@@ -516,7 +561,11 @@
     "./shared/controls/STextarea": "./src/components/shared/controls/STextarea.ts",
     "./shared/controls/STextarea.vue": "./src/components/shared/controls/STextarea.vue",
     "./shared/data-display/chart": "./src/components/shared/data-display/chart.ts",
+    "./shared/data-display/codeEditor": "./src/components/shared/data-display/codeEditor.ts",
+    "./shared/data-display/codeWorkspace": "./src/components/shared/data-display/codeWorkspace.ts",
+    "./shared/data-display/diff": "./src/components/shared/data-display/diff.ts",
     "./shared/data-display/json": "./src/components/shared/data-display/json.ts",
+    "./shared/data-display/richDocument": "./src/components/shared/data-display/richDocument.ts",
     "./shared/data-display/SActionCard.vue": "./src/components/shared/data-display/SActionCard.vue",
     "./shared/data-display/SActionList.vue": "./src/components/shared/data-display/SActionList.vue",
     "./shared/data-display/SActionListItem.vue": "./src/components/shared/data-display/SActionListItem.vue",
@@ -526,7 +575,11 @@
     "./shared/data-display/SCodeBlock.vue": "./src/components/shared/data-display/SCodeBlock.vue",
     "./shared/data-display/SCodeEditor.vue": "./src/components/shared/data-display/SCodeEditor.vue",
     "./shared/data-display/SCodeSearchPanel.vue": "./src/components/shared/data-display/SCodeSearchPanel.vue",
+    "./shared/data-display/SCodeWorkspaceEditor.vue": "./src/components/shared/data-display/SCodeWorkspaceEditor.vue",
+    "./shared/data-display/SControlledToastViewport.vue": "./src/components/shared/data-display/SControlledToastViewport.vue",
     "./shared/data-display/SCopyField.vue": "./src/components/shared/data-display/SCopyField.vue",
+    "./shared/data-display/scrollViewport": "./src/components/shared/data-display/scrollViewport.ts",
+    "./shared/data-display/SDiffViewer.vue": "./src/components/shared/data-display/SDiffViewer.vue",
     "./shared/data-display/SDocBlock.vue": "./src/components/shared/data-display/SDocBlock.vue",
     "./shared/data-display/SEmptyState.vue": "./src/components/shared/data-display/SEmptyState.vue",
     "./shared/data-display/SExpandableText.vue": "./src/components/shared/data-display/SExpandableText.vue",
@@ -537,6 +590,8 @@
     "./shared/data-display/SMetricCard.vue": "./src/components/shared/data-display/SMetricCard.vue",
     "./shared/data-display/SProgressBar.vue": "./src/components/shared/data-display/SProgressBar.vue",
     "./shared/data-display/SProgressIndicator.vue": "./src/components/shared/data-display/SProgressIndicator.vue",
+    "./shared/data-display/SRichDocument.vue": "./src/components/shared/data-display/SRichDocument.vue",
+    "./shared/data-display/SScrollViewport.vue": "./src/components/shared/data-display/SScrollViewport.vue",
     "./shared/data-display/SSectionHeader.vue": "./src/components/shared/data-display/SSectionHeader.vue",
     "./shared/data-display/SStatus.vue": "./src/components/shared/data-display/SStatus.vue",
     "./shared/data-display/STable.vue": "./src/components/shared/data-display/STable.vue",
@@ -547,6 +602,7 @@
     "./shared/data-display/SVirtualList": "./src/components/shared/data-display/SVirtualList.ts",
     "./shared/data-display/SVirtualList.vue": "./src/components/shared/data-display/SVirtualList.vue",
     "./shared/data-display/table": "./src/components/shared/data-display/table.ts",
+    "./shared/data-display/toast": "./src/components/shared/data-display/toast.ts",
     "./shared/database/SDataGrid.vue": "./src/components/shared/database/SDataGrid.vue",
     "./shared/database/SSqlEditor.vue": "./src/components/shared/database/SSqlEditor.vue",
     "./shared/feedback/SAsyncState.vue": "./src/components/shared/feedback/SAsyncState.vue",
@@ -574,65 +630,62 @@
     "./variants": "./src/variants.ts"
   },
   "peerDependencies": {
-    "pinia": "^3.0.4",
-    "vue": "^3.5.0",
-    "vue-router": "^5.0.0"
+    "@vue/devtools-api": "^8.2.1",
+    "pinia": "^4.0.3",
+    "vue": "^3.5.43",
+    "vue-router": "^5.3.1"
   },
   "dependencies": {
-    "@codemirror/autocomplete": "^6.20.1",
-    "@codemirror/language": "^6.11.3",
-    "@codemirror/legacy-modes": "^6.5.2",
-    "@codemirror/lint": "^6.9.5",
-    "@codemirror/state": "^6.5.4",
+    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/legacy-modes": "^6.5.4",
+    "@codemirror/lint": "^6.9.7",
+    "@codemirror/state": "^6.7.5",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.39.15",
-    "@uiw/codemirror-extensions-langs": "^4.25.8",
+    "@codemirror/view": "^6.43.12",
+    "@uiw/codemirror-extensions-langs": "^4.25.11",
     "codemirror": "6.0.2",
     "codemirror-lang-makefile": "^0.1.1",
     "dompurify": "^3.4.16",
     "graphology": "^0.26.0",
-    "highlight.js": "^11.11.1",
-    "@lucide/vue": "^1.16.0",
-    "@tailwindcss/typography": "^0.5.19",
-    "marked": "^17.0.3",
+    "highlight.js": "^11.12.0",
+    "katex": "0.18.7",
+    "@lucide/vue": "^1.47.0",
+    "@tailwindcss/typography": "^0.5.20",
+    "marked": "^18.0.13",
     "sigma": "^3.0.3",
-    "tailwindcss": "^4.2.0",
-    "uuid": "^13.0.0",
+    "tailwindcss": "^4.3.3",
+    "uuid": "^14.0.2",
     "vue-codemirror": "^6.1.1"
   },
   "devDependencies": {
-    "@storybook/vue3-vite": "10.5.3",
-    "@tailwindcss/postcss": "^4.2.0",
-    "@types/node": "^25.3.0",
-    "@vitejs/plugin-vue": "^6.0.4",
-    "@vitest/coverage-v8": "^4.1.11",
-    "@vitest/eslint-plugin": "1.6.20",
-    "@vue/compiler-dom": "3.5.39",
-    "@vue/compiler-sfc": "3.5.39",
+    "@storybook/vue3-vite": "10.6.0",
+    "@tailwindcss/postcss": "^4.3.3",
+    "@types/node": "^22.20.4",
+    "@vitejs/plugin-vue": "^6.0.9",
+    "@vitest/coverage-v8": "^5.0.1",
+    "@vitest/eslint-plugin": "1.6.27",
+    "@vue/compiler-dom": "3.5.43",
+    "@vue/compiler-sfc": "3.5.43",
+    "@vue/devtools-api": "^8.2.1",
     "@vue/eslint-config-prettier": "^10.2.0",
-    "@vue/test-utils": "^2.4.6",
-    "date-fns": "^4.1.0",
-    "eslint": "^10.0.0",
-    "eslint-plugin-vue": "^10.8.0",
-    "jsdom": "^28.1.0",
-    "pinia": "^3.0.4",
-    "postcss": "8.5.26",
-    "postcss-selector-parser": "7.1.4",
-    "storybook": "10.5.3",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.60.0",
-    "vite": "^7.3.1",
-    "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.1.11",
-    "vue": "^3.5.28",
-    "vue-eslint-parser": "^10.4.0",
-    "vue-router": "^5.0.3",
-    "vue-tsc": "^3.2.4"
-  },
-  "overrides": {
-    "glob": "13.0.6",
-    "js-beautify": {
-      "glob": "13.0.6"
-    }
+    "@vue/test-utils": "2.5.1",
+    "date-fns": "^4.4.0",
+    "eslint": "^10.11.0",
+    "eslint-plugin-vue": "^10.11.0",
+    "jsdom": "^30.1.0",
+    "pinia": "^4.0.3",
+    "postcss": "8.5.28",
+    "postcss-selector-parser": "7.1.6",
+    "storybook": "10.6.0",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.70.0",
+    "vite": "^8.3.0",
+    "vite-plugin-dts": "^5.1.0",
+    "vitest": "^5.0.1",
+    "vue": "^3.5.43",
+    "vue-eslint-parser": "^10.4.1",
+    "vue-router": "^5.3.1",
+    "vue-tsc": "^3.3.11"
   }
 }

package/src/components/layout/SAppShell.vue

@@ -4,6 +4,7 @@ import type { RouteLocationRaw } from 'vue-router'
 import { hasOwn } from '../../internal/es2020'
 import { useOwnedAttrs } from '../../internal/ownedAttrs'
 import { validateNonEmptyString } from '../../internal/runtimeContract'
+import { useUiKitLocale } from '../../composables/useUiKitLocale'
 import SBadge from '../shared/data-display/SBadge.vue'
 import SPanel from '../shared/containers/SPanel.vue'
 import SLink from '../shared/controls/SLink.vue'
@@ -57,6 +58,7 @@ interface RuntimeProps extends SharedProps {
 }
 
 const props = defineProps<RuntimeProps>()
+const { t } = useUiKitLocale()
 function requireComponentInstance() {
   const instance = getCurrentInstance()
   if (!instance) throw new Error('SAppShell: component instance unavailable during setup')
@@ -121,7 +123,7 @@ const shell = computed<ResolvedShell>(() => {
     navigationLabel: validateNonEmptyString(
       'SAppShell',
       'navigationLabel',
-      props.navigationLabel ?? 'Основная навигация',
+      props.navigationLabel ?? t('navigation.main'),
     ),
     pageBadgeLabel: props.pageBadgeLabel ?? '',
     pageBadgeSeverity: props.pageBadgeSeverity ?? 'info',

package/src/components/layout/SDockRegion.vue

@@ -39,6 +39,7 @@
 
 <script setup lang="ts">
 import { computed, ref, type CSSProperties } from 'vue'
+import { useUiKitLocale } from '../../composables/useUiKitLocale'
 import { useOwnedAttrs } from '../../internal/ownedAttrs'
 import {
   validateBoolean,
@@ -79,6 +80,7 @@ const props = withDefaults(defineProps<{
   hideResizeHandleOnNarrow: false,
   responsiveSize: 'fixed',
 })
+const { t } = useUiKitLocale()
 
 const emit = defineEmits<{
   (event: 'resize-start', pointerEvent: PointerEvent): void
@@ -122,9 +124,9 @@ const resolvedResizeLabel = computed(() => {
   if (props.resizeLabel !== undefined) {
     return validateNonEmptyString('SDockRegion', 'resizeLabel', props.resizeLabel)
   }
-  if (contract.value.placement === 'bottom') return 'Изменить высоту нижней панели'
-  if (contract.value.placement === 'left') return 'Изменить ширину левой панели'
-  return 'Изменить ширину правой панели'
+  if (contract.value.placement === 'bottom') return t('layout.resizeBottomPanel')
+  if (contract.value.placement === 'left') return t('layout.resizeLeftPanel')
+  return t('layout.resizeRightPanel')
 })
 
 function handleResizeStart(event: PointerEvent): void {

package/src/components/layout/SWorkbenchPanelShell.vue

@@ -91,6 +91,7 @@
 
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, useSlots, watch } from 'vue'
+import { useUiKitLocale } from '../../composables/useUiKitLocale'
 import SAsyncState from '../shared/feedback/SAsyncState.vue'
 import { useOwnedAttrs } from '../../internal/ownedAttrs'
 import {
@@ -130,6 +131,7 @@ const props = withDefaults(defineProps<{
   secondaryStickyHeader: false,
   secondaryResponsiveStack: false,
 })
+const { t } = useUiKitLocale()
 
 const slots = useSlots()
 const ownedAttrs = useOwnedAttrs({ component: 'SWorkbenchPanelShell', owner: 'workbench panel root' })
@@ -170,8 +172,8 @@ const showSecondary = computed(() =>
 const isBottomDock = computed(() => props.secondaryPlacement === 'bottom-dock')
 const dockPlacement = computed<'right' | 'bottom'>(() => isBottomDock.value ? 'bottom' : 'right')
 const secondaryResizeLabel = computed(() => isBottomDock.value
-  ? 'Изменить высоту нижней панели'
-  : 'Изменить ширину боковой панели')
+  ? t('layout.resizeBottomPanel')
+  : t('layout.resizeSidePanel'))
 const secondaryResizeTestId = computed(() => isBottomDock.value
   ? 'workbench-shell-resize-handle-bottom'
   : 'workbench-shell-resize-handle-right')

package/src/components/shared/_internal/SDialogSurface.css

@@ -4,6 +4,11 @@
   box-shadow: var(--s-elevation-overlay);
 }
 
+.s-dialog-surface:focus-visible {
+  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color);
+  outline-offset: var(--s-focus-ring-inset-offset);
+}
+
 .s-dialog-surface[data-presentation='modal'] {
   @apply w-full transform overflow-hidden rounded-2xl p-6 text-left align-middle transition-all;
   @apply bg-surface-0 dark:bg-surface-800;

package/src/components/shared/_internal/SDialogSurface.vue

@@ -26,7 +26,7 @@
         icon-only
         appearance="text"
         size="sm"
-        aria-label="Закрыть"
+        :aria-label="t('dialog.close')"
         @click="requestClose"
       />
     </component>
@@ -55,6 +55,7 @@
 
 <script setup lang="ts">
 import { computed, useId, useSlots, type ComponentPublicInstance } from 'vue'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 
 import { X } from '../../icons/sputnigUiIcons'
 import SButton from '../controls/SButton.vue'
@@ -78,6 +79,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   'request-close': []
 }>()
+const { t } = useUiKitLocale()
 
 defineSlots<{
   header?: () => unknown

package/src/components/shared/_internal/SToastItem.css

@@ -28,6 +28,10 @@
   word-break: break-word;
 }
 
+.s-toast-actions {
+  @apply mt-2 flex flex-wrap gap-2;
+}
+
 .s-toast-close {
   @apply ml-auto shrink-0;
 }

package/src/components/shared/_internal/SToastItem.vue

@@ -5,6 +5,10 @@
     :role="liveAttributes.role"
     :aria-live="liveAttributes.ariaLive"
     :aria-atomic="liveAttributes.ariaAtomic"
+    @mouseenter="emit('lifetime-pause', notification.id, 'pointer')"
+    @mouseleave="emit('lifetime-resume', notification.id, 'pointer')"
+    @focusin="emit('lifetime-pause', notification.id, 'focus')"
+    @focusout="onFocusOut"
   >
     <div class="s-toast-icon">
       <component
@@ -20,40 +24,61 @@
       <p v-if="notification.message" class="s-toast-body">
         {{ notification.message }}
       </p>
+      <div v-if="notification.actions?.length" class="s-toast-actions">
+        <SButton
+          v-for="action in notification.actions"
+          :key="action.id"
+          size="xs"
+          severity="secondary"
+          :appearance="action.appearance ?? 'soft'"
+          :label="action.label"
+          @click="emit('action', { notificationId: notification.id, actionId: action.id })"
+        />
+      </div>
     </div>
 
-    <div class="s-toast-close">
+    <div v-if="notification.dismissible !== false" class="s-toast-close">
       <SButton
-        size="sm"
+        size="xs"
         appearance="ghost"
         icon-only
         :leading-icon="X"
-        aria-label="Закрыть"
+        :aria-label="t('feedback.closeNotification')"
         @click="emit('dismiss', notification.id)"
       />
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="Id extends SToastId = string, ActionId extends SToastActionId = string">
 import { computed } from 'vue'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 
 import { X } from '../../icons/sputnigUiIcons'
 import { resolveFeedbackLive, resolveFeedbackPresentation } from '../../../internal/feedbackPresentation'
 import { resolveSemanticToneBinding } from '../../../internal/semanticTone'
-import type { Notification } from '../../../stores/useNotifierStore';
+import type {
+  SToastActionId,
+  SToastActionIntent,
+  SToastId,
+  SToastPresentation,
+} from '../data-display/toast'
 import SButton from '../controls/SButton.vue'
 
 defineOptions({ inheritAttrs: false })
 
 const props = defineProps<{
-  notification: Notification
+  notification: SToastPresentation<Id, ActionId>
 }>()
 
 const emit = defineEmits<{
-  dismiss: [id: string]
+  dismiss: [id: Id]
+  action: [intent: SToastActionIntent<Id, ActionId>]
+  'lifetime-pause': [id: Id, reason: 'pointer' | 'focus']
+  'lifetime-resume': [id: Id, reason: 'pointer' | 'focus']
 }>()
-const presentation = computed(() => resolveFeedbackPresentation(props.notification.severity))
+const { t } = useUiKitLocale()
+const presentation = computed(() => resolveFeedbackPresentation(props.notification.severity, t))
 const toneBinding = computed(() => resolveSemanticToneBinding(
   'SToastItem',
   'notification.severity',
@@ -61,5 +86,16 @@ const toneBinding = computed(() => resolveSemanticToneBinding(
   ['info', 'success', 'warn', 'danger'] as const,
 ))
 const liveAttributes = computed(() => resolveFeedbackLive(props.notification.severity, 'auto'))
+
+function onFocusOut(event: FocusEvent): void {
+  const currentTarget = event.currentTarget
+  const relatedTarget = event.relatedTarget
+  if (
+    currentTarget instanceof HTMLElement
+    && relatedTarget instanceof Node
+    && currentTarget.contains(relatedTarget)
+  ) return
+  emit('lifetime-resume', props.notification.id, 'focus')
+}
 </script>
 <style lang="postcss" src="./SToastItem.css" scoped></style>

package/src/components/shared/_internal/STreeNode.vue

@@ -217,6 +217,7 @@
 
 <script setup lang="ts" generic="T extends object, K extends SelectionKey">
 import { computed, defineComponent, h, inject, onBeforeUnmount, onMounted, provide, ref } from 'vue'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import type { PropType } from 'vue'
 import { Check, ChevronDown, ChevronRight, Minus } from '../../icons/sputnigUiIcons'
 import {
@@ -247,6 +248,7 @@ const props = defineProps<{
   position: number
   setSize: number
 }>()
+const { t } = useUiKitLocale()
 
 const slots = defineSlots<{
   'col-left': (props: STreeNodeContentScope<T, K>) => unknown
@@ -336,12 +338,14 @@ const nodeIndent = computed(() => {
   if (runtime.density.value === 'compact') return `${props.level * 0.85 + 0.25}rem`
   return `${props.level === 0 ? 1 : props.level * 1.5}rem`
 })
-const toggleLabel = computed(() =>
-  `${isExpanded.value ? 'Свернуть' : 'Развернуть'} узел ${nodeLabel.value}`,
-)
-const selectionLabel = computed(() =>
-  `${isSelected.value || isPartiallySelected.value ? 'Снять выбор' : 'Выбрать'}: ${nodeLabel.value}`,
-)
+const toggleLabel = computed(() => t(
+  isExpanded.value ? 'tree.collapseNode' : 'tree.expandNode',
+  { label: nodeLabel.value },
+))
+const selectionLabel = computed(() => t(
+  isSelected.value || isPartiallySelected.value ? 'tree.deselectNode' : 'tree.selectNode',
+  { label: nodeLabel.value },
+))
 const selectionPressedState = computed(() => isPartiallySelected.value ? 'mixed' : isSelected.value)
 const selectionCheckedState = computed(() => isPartiallySelected.value ? 'mixed' : isSelected.value)
 
@@ -689,7 +693,7 @@ onBeforeUnmount(() => {
 }
 
 .s-tree-node-wrapper--compact .s-tree-node {
-  min-height: var(--s-control-hitbox-xs);
+  min-height: var(--s-control-hitbox-2xs);
   gap: 0.25rem;
   padding: 0 0.25rem;
 }
@@ -709,6 +713,10 @@ onBeforeUnmount(() => {
   padding-right: 0.78rem;
 }
 
+.s-tree-node-wrapper--overlay-actions > .s-tree-node-hitbox .s-tree-node-content-shell {
+  position: relative;
+}
+
 .s-tree-node-wrapper--overlay-actions .s-tree-node-right {
   position: relative;
   z-index: var(--s-layer-sticky);
@@ -716,7 +724,7 @@ onBeforeUnmount(() => {
   justify-content: flex-end;
 }
 
-.s-tree-node-wrapper--overlay-actions .s-tree-node-actions {
+.s-tree-node-wrapper--overlay-actions > .s-tree-node-hitbox .s-tree-node-actions {
   position: absolute;
   top: 50%;
   right: 0.42rem;
@@ -727,17 +735,22 @@ onBeforeUnmount(() => {
   background: color-mix(in srgb, var(--color-surface-0) 98%, transparent);
   box-shadow: -18px 0 24px color-mix(in srgb, var(--color-surface-0) 86%, transparent);
   opacity: 0;
+  pointer-events: none;
   transform: translateY(-50%);
   transition: opacity var(--s-motion-fast) ease, transform var(--s-motion-fast) ease;
 }
 
-.s-tree-node-wrapper--overlay-actions .s-tree-node-actions--has-persistent {
+.s-tree-node-wrapper--overlay-actions > .s-tree-node-hitbox .s-tree-node-actions--has-persistent {
   opacity: 1;
+  pointer-events: auto;
 }
 
-.s-tree-node-wrapper--overlay-actions .s-tree-node:hover .s-tree-node-actions,
-.s-tree-node-wrapper--overlay-actions .s-tree-node:focus-within .s-tree-node-actions {
+.s-tree-node-wrapper--overlay-actions > .s-tree-node-hitbox:hover > .s-tree-node-row > .s-tree-node-content-shell > .s-tree-node-actions,
+.s-tree-node-wrapper--overlay-actions > .s-tree-node-hitbox:focus-within > .s-tree-node-row > .s-tree-node-content-shell > .s-tree-node-actions,
+.s-tree-node-wrapper--overlay-actions > .s-tree-node-hitbox:hover .s-tree-node > .s-tree-node-right > .s-tree-node-actions,
+.s-tree-node-wrapper--overlay-actions > .s-tree-node-hitbox:focus-within .s-tree-node > .s-tree-node-right > .s-tree-node-actions {
   opacity: 1;
+  pointer-events: auto;
   transform: translate(-0.04rem, -50%);
 }
 

package/src/components/shared/complex/SKanbanLane.vue

@@ -25,6 +25,7 @@
 
 <script setup lang="ts">
 import { computed, type VNodeChild } from 'vue'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { validateBoundedInteger, validateNonEmptyString } from '../../../internal/runtimeContract'
 import SStack from '../../layout/SStack.vue'
@@ -50,11 +51,12 @@ export interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  emptyText: 'Нет элементов',
+  emptyText: undefined,
   defaultOpen: true,
   open: undefined,
   density: 'compact',
 })
+const { t } = useUiKitLocale()
 
 defineEmits<{
   (e: 'update:open', value: boolean): void
@@ -75,7 +77,7 @@ const validatedCount = computed(() => validateBoundedInteger(
 const validatedEmptyText = computed(() => validateNonEmptyString(
   'SKanbanLane',
   'emptyText',
-  props.emptyText,
+  props.emptyText ?? t('kanban.empty'),
 ))
 
 const ownedAttrs = useOwnedAttrs({ component: 'SKanbanLane', owner: 'collapsible lane composition' })