@pgcorp/ui-kit 0.8.1 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pgcorp/ui-kit",
-  "version": "0.8.1",
+  "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"
       ],
@@ -267,15 +277,30 @@
       "shared/controls/SSwitch.vue": [
         "src/components/shared/controls/SSwitch.vue"
       ],
+      "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"
       ],
@@ -303,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"
       ],
@@ -336,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"
       ],
@@ -366,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"
       ],
@@ -449,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",
@@ -484,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",
@@ -510,9 +558,14 @@
     "./shared/controls/SSegmentedControl.vue": "./src/components/shared/controls/SSegmentedControl.vue",
     "./shared/controls/SSelect.vue": "./src/components/shared/controls/SSelect.vue",
     "./shared/controls/SSwitch.vue": "./src/components/shared/controls/SSwitch.vue",
+    "./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",
@@ -522,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",
@@ -533,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",
@@ -543,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",
@@ -570,64 +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.13",
+    "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.0.18",
-    "@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/eslint-config-typescript": "^14.7.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",
-    "vite": "^7.3.1",
-    "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.0.18",
-    "vue": "^3.5.28",
-    "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/SResizeHandle.vue

@@ -14,6 +14,9 @@
     :data-testid="dataTestId"
     :data-resizing="effectiveResizing || undefined"
     :data-hidden-on-narrow="hiddenOnNarrow || undefined"
+    :data-hitbox="validatedHitbox"
+    :data-orientation="orientation"
+    :data-variant="variant"
     :class="handleClasses"
     @pointerdown="handlePointerDown"
     @keydown="handleKeydown"
@@ -30,10 +33,14 @@ import {
   acquirePointerInteractionLease,
   type PointerInteractionLease,
 } from '../../internal/pointerInteractionLease'
-import { validateNonEmptyString } from '../../internal/runtimeContract'
+import { validateExactString, validateNonEmptyString } from '../../internal/runtimeContract'
 
 defineOptions({ inheritAttrs: false })
 
+export type SResizeHandleHitbox = 'compact' | 'standard' | 'spacious'
+
+const RESIZE_HANDLE_HITBOXES = ['compact', 'standard', 'spacious'] as const satisfies readonly SResizeHandleHitbox[]
+
 const props = withDefaults(defineProps<{
   orientation: 'vertical' | 'horizontal'
   variant?: 'inline' | 'overlay'
@@ -48,6 +55,8 @@ const props = withDefaults(defineProps<{
   max?: number
   step?: number
   pointerScale?: number
+  /** Семантическая толщина pointer/focus hitbox; visual divider остаётся однопиксельным. */
+  hitbox?: SResizeHandleHitbox
 }>(), {
   orientation: 'vertical',
   variant: 'inline',
@@ -61,6 +70,7 @@ const props = withDefaults(defineProps<{
   max: 100,
   step: 10,
   pointerScale: 1,
+  hitbox: undefined,
 })
 
 const emit = defineEmits<{
@@ -83,6 +93,12 @@ const ownedAttrs = useOwnedAttrs({ component: 'SResizeHandle', owner: 'native se
 useInteractiveLeafRegistration({ owner: 'SResizeHandle' })
 const effectiveResizing = computed(() => props.resizing || pointerResizeState.value !== null)
 const validatedLabel = computed(() => validateNonEmptyString('SResizeHandle', 'label', props.label))
+const validatedHitbox = computed(() => validateExactString(
+  'SResizeHandle',
+  'hitbox',
+  props.hitbox ?? (props.variant === 'overlay' ? 'spacious' : 'compact'),
+  RESIZE_HANDLE_HITBOXES,
+))
 const validatedRange = computed(() => {
   assertRangeContract()
   return { value: props.value, min: props.min, max: props.max }
@@ -225,11 +241,11 @@ const handleClasses = computed(() => [
     : 'pointer-events-auto absolute z-[var(--s-layer-floating)] items-center justify-center',
   props.orientation === 'vertical'
     ? props.variant === 'inline'
-      ? 'w-1.5 self-stretch cursor-col-resize items-stretch justify-center'
-      : 'inset-y-3 left-2 w-8 -translate-x-1/2 cursor-col-resize'
+      ? 'self-stretch cursor-col-resize items-stretch justify-center'
+      : 'inset-y-3 left-2 -translate-x-1/2 cursor-col-resize'
     : props.variant === 'inline'
-      ? 'h-1.5 w-full cursor-row-resize items-center justify-stretch'
-      : 'inset-x-5 top-0 h-8 -translate-y-1/2 cursor-row-resize',
+      ? 'w-full cursor-row-resize items-center justify-stretch'
+      : 'inset-x-5 top-0 -translate-y-1/2 cursor-row-resize',
 ])
 
 const lineClasses = computed(() =>
@@ -244,6 +260,30 @@ const lineClasses = computed(() =>
 </script>
 
 <style scoped>
+.s-resize-handle[data-orientation='vertical'][data-hitbox='compact'] {
+  width: var(--s-resize-handle-hitbox-compact);
+}
+
+.s-resize-handle[data-orientation='vertical'][data-hitbox='standard'] {
+  width: var(--s-resize-handle-hitbox-standard);
+}
+
+.s-resize-handle[data-orientation='vertical'][data-hitbox='spacious'] {
+  width: var(--s-resize-handle-hitbox-spacious);
+}
+
+.s-resize-handle[data-orientation='horizontal'][data-hitbox='compact'] {
+  height: var(--s-resize-handle-hitbox-compact);
+}
+
+.s-resize-handle[data-orientation='horizontal'][data-hitbox='standard'] {
+  height: var(--s-resize-handle-hitbox-standard);
+}
+
+.s-resize-handle[data-orientation='horizontal'][data-hitbox='spacious'] {
+  height: var(--s-resize-handle-hitbox-spacious);
+}
+
 .s-resize-handle:focus-visible {
   outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color);
   outline-offset: var(--s-focus-ring-offset);

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;
@@ -104,6 +109,24 @@
   max-width: 44rem;
 }
 
+.s-dialog-surface[data-presentation='drawer'][data-placement='bottom'] {
+  @apply max-w-none rounded-t-2xl border-l-0 border-t border-surface-200 dark:border-surface-700;
+  width: 100%;
+  max-height: calc(100dvh - 1rem);
+}
+
+.s-dialog-surface[data-presentation='drawer'][data-placement='bottom'][data-size='sm'] {
+  height: 50dvh;
+}
+
+.s-dialog-surface[data-presentation='drawer'][data-placement='bottom'][data-size='md'] {
+  height: 70dvh;
+}
+
+.s-dialog-surface[data-presentation='drawer'][data-placement='bottom'][data-size='lg'] {
+  height: 90dvh;
+}
+
 .s-dialog-surface[data-presentation='drawer'] .s-dialog-surface__header {
   @apply flex items-start gap-3 border-b border-surface-200 px-5 py-4 dark:border-surface-700 md:px-6;
 }

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

@@ -7,6 +7,7 @@
     :data-presentation="presentation.kind"
     :data-layout="surfaceLayout"
     :data-size="presentation.size"
+    :data-placement="drawerPresentation?.placement"
     :data-surface="modalPresentation?.surface"
     :data-scroll="modalPresentation?.scrollBehavior"
     tabindex="-1"
@@ -25,7 +26,7 @@
         icon-only
         appearance="text"
         size="sm"
-        aria-label="Закрыть"
+        :aria-label="t('dialog.close')"
         @click="requestClose"
       />
     </component>
@@ -54,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'
@@ -77,6 +79,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   'request-close': []
 }>()
+const { t } = useUiKitLocale()
 
 defineSlots<{
   header?: () => unknown
@@ -95,17 +98,21 @@ const isModal = computed(() => props.presentation.kind === 'modal')
 const modalPresentation = computed<ModalDialogSurfacePresentation | null>(() => (
   props.presentation.kind === 'modal' ? props.presentation : null
 ))
+const drawerPresentation = computed(() => (
+  props.presentation.kind === 'drawer' ? props.presentation : null
+))
 const hasHeader = computed(() => Boolean(props.title || slots.header))
 const hasSplitFooter = computed(() => isModal.value && Boolean(slots['footer-start'] || slots['footer-end']))
 const hasFooter = computed(() => hasSplitFooter.value || Boolean(slots.footer))
 const rootTag = 'div'
 const headerTag = computed(() => (isModal.value ? 'div' : 'header'))
 const headingTag = computed(() => (isModal.value ? 'h3' : 'h2'))
-type DialogSurfaceLayout = 'contained' | 'fullscreen' | 'side-panel' | 'mobile-fullscreen'
+type DialogSurfaceLayout = 'contained' | 'fullscreen' | 'side-panel' | 'mobile-fullscreen' | 'bottom-sheet'
 
 const surfaceLayout = computed<DialogSurfaceLayout>(() => {
   const presentation = props.presentation
   if (presentation.kind === 'drawer') {
+    if (presentation.placement === 'bottom') return 'bottom-sheet'
     return presentation.mobileFullScreen ? 'mobile-fullscreen' : 'side-panel'
   }
   return presentation.fullscreen || presentation.size === 'full' ? 'fullscreen' : 'contained'

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;
 }