@pgcorp/ui-kit 0.8.0 → 0.9.0

package/README.md

@@ -219,6 +219,18 @@ axes, grid, legend, markers, labels, auto/fixed domains, and the data table. The
 component recomputes SVG geometry for its actual container, preserves readable
 typography, and wraps long category labels at narrow widths.
 
+Форматированные подписи шкалы Y участвуют в расчёте поля графика. Крайние
+подписи X привязаны к границам plot-area, поэтому `x-labels="auto"` сохраняет
+полные начальное и конечное значения и не обрезает их краем SVG. Если ширины
+контейнера физически недостаточно, визуальная подпись сокращается, а полное
+значение остаётся в tooltip и доступной таблице данных.
+
+Formatted Y-axis labels participate in plot-gutter calculation. Endpoint
+X labels are anchored to the plot boundaries, so `x-labels="auto"` preserves
+the full first and last values instead of clipping them at the SVG edge. When
+the container is physically too narrow, the visual label is shortened while
+the full value remains available through the tooltip and accessible data table.
+
 ```ts
 import type {
   SChartCategory,
@@ -266,6 +278,24 @@ nested button. `SPanel` uses `header-layout="auto"` to move actions below the
 title based on container width; `inline` and `stacked` remain explicit layout
 options.
 
+Action/link chip всегда сохраняет видимый интерактивный контур, включая
+`severity="secondary"` на subtle-поверхности; static chip не получает ложного
+affordance. Для строк и карточек с дополнительными controls используйте
+`SActionCard#actions` или `SActionListItem#actions`. `actions-layout`/
+`trailing-layout` задаёт `inline`, `stacked` или container-responsive
+композицию. Основное действие и trailing controls остаются sibling-элементами
+внутри одной визуальной поверхности, без вложенных интерактивных элементов и
+дублирования рамки.
+
+Action and link chips always retain a visible interactive outline, including a
+`secondary` chip on a subtle surface; static chips do not gain a false action
+affordance. For rows and cards with additional controls, use
+`SActionCard#actions` or `SActionListItem#actions`. The `actions-layout` and
+`trailing-layout` props select `inline`, `stacked`, or container-responsive
+composition. The primary action and trailing controls remain siblings inside a
+single visual surface, with no nested interactive elements or duplicated
+chrome.
+
 ### Лёгкий и редактируемый код / Lightweight and editable code
 
 `SCodeBlock` загружает CodeMirror отдельным async chunk только для
@@ -318,6 +348,139 @@ button and owns ARIA/focus, while `pointerTarget` is applied to a passive
 </STooltip>
 ```
 
+### Composer textarea
+
+`STextarea` передаёт исходный `ClipboardEvent` синхронно. Обработчик может
+отменить default-вставку файлов и изображений; текстовая вставка без
+`preventDefault()` остаётся native. Typed `suggestions` связывает multiline
+textbox с consumer-owned popup без private attributes. Нативная роль textarea
+сохраняется: `role="combobox"` для этого HTML-элемента не используется. Pixel
+bounds принадлежат auto-resize contract.
+
+`STextarea` emits the original `ClipboardEvent` synchronously. A handler may
+cancel the default insertion for files and images; text paste remains native
+unless `preventDefault()` is called. The typed `suggestions` prop associates
+the multiline textbox with a consumer-owned popup without private attributes.
+The textarea keeps its native role; `role="combobox"` is not assigned to this
+HTML element. Pixel bounds belong to the auto-resize contract.
+
+```vue
+<STextarea
+  ref="composer"
+  v-model="message"
+  label="Сообщение"
+  :auto-resize="true"
+  :min-height="64"
+  :max-height="240"
+  :suggestions="{
+    controls: 'mention-listbox',
+    activeDescendant: activeMentionId,
+    autocomplete: 'list',
+    popupRole: 'listbox',
+  }"
+  @paste="handlePaste"
+/>
+```
+
+```ts
+function handlePaste(event: ClipboardEvent): void {
+  if ((event.clipboardData?.files.length ?? 0) === 0) return
+  event.preventDefault()
+  attachFiles([...(event.clipboardData?.files ?? [])])
+}
+
+composer.value?.setSelection({ start, end, direction: 'forward' })
+composer.value?.replaceSelection('@file README.md')
+```
+
+`getSelection()` возвращает `start`, `end` и `direction`. `setSelection()` и
+`replaceSelection()` владеют focus/caret contract; replacement во время active
+IME composition завершается диагностируемой ошибкой. События `selection-change`,
+`compositionstart`, `compositionupdate`, `compositionend` и `state-change`
+позволяют consumer синхронизировать popup без чтения внутреннего DOM.
+
+`getSelection()` returns `start`, `end`, and `direction`. `setSelection()` and
+`replaceSelection()` own the focus/caret contract; replacement during active
+IME composition fails with an explicit diagnostic. The `selection-change`,
+`compositionstart`, `compositionupdate`, `compositionend`, and `state-change`
+events synchronize a popup without reading internal DOM.
+
+### Drawer placement
+
+`SDrawer` использует `placement="right"` по умолчанию. Нижняя панель задаётся
+`placement="bottom"`; semantic sizes соответствуют 50, 70 и 90 процентам
+dynamic viewport height. Body остаётся единственным scroll owner, а overlay,
+focus trap/restore, Escape, backdrop и nested layer stack совпадают с боковой
+панелью.
+
+`SDrawer` uses `placement="right"` by default. Set `placement="bottom"` for a
+bottom sheet; semantic sizes map to 50, 70, and 90 percent of the dynamic
+viewport height. The body remains the sole scroll owner, while overlay,
+focus trap/restore, Escape, backdrop, and the nested layer stack are shared
+with the side drawer.
+
+```vue
+<SDrawer
+  v-model:open="activityOpen"
+  title="Активность агента"
+  placement="bottom"
+  size="lg"
+  :mobile-full-screen="false"
+>
+  <AgentActivity />
+</SDrawer>
+```
+
+### Virtual conversation history
+
+`SVirtualList` сохраняет viewport по domain key и смещению внутри первой
+видимой строки. Prepend, keyed replace и пакетные variable-height measurements
+не требуют ручной коррекции `scrollTop`. Снимок переносится между экземплярами
+или сохраняется на время переключения чата.
+
+`SVirtualList` preserves its viewport by domain key and the offset inside the
+first visible row. Prepend, keyed replacement, and batched variable-height
+measurements do not require manual `scrollTop` correction. A snapshot can move
+between instances or be retained while switching chats.
+
+```vue
+<SVirtualList
+  ref="history"
+  v-model:follow-tail="followTail"
+  :items="messages"
+  :item-size="48"
+  :height="480"
+  :item-key="(message) => message.id"
+  :item-label="(message) => message.accessibleLabel"
+  :near-start-threshold="96"
+  semantic-role="log"
+  live="polite"
+  accessible-label="История сообщений"
+  @near-start="loadPreviousPage"
+  @viewport-change="viewport = $event"
+/>
+```
+
+```ts
+const snapshot = history.value?.captureViewport()
+await history.value?.restoreViewport(snapshot)
+history.value?.scrollToKey(messageId, 'center')
+history.value?.scrollToEnd({ follow: true })
+```
+
+`viewport-change` сообщает keyed anchor, visible range, `nearStart`, `atEnd` и
+`pinnedToEnd`. Wheel, keyboard и scrollbar gesture вверх снимают follow-tail до
+явного `scrollToEnd()` или пользовательского возврата в конец. Append, stream,
+resize и shrink не включают follow-tail самостоятельно. `role=log`, live mode и
+busy state задаются typed props `semanticRole`, `live` и `busy`.
+
+`viewport-change` reports the keyed anchor, visible range, `nearStart`, `atEnd`,
+and `pinnedToEnd`. An upward wheel, keyboard, or scrollbar gesture detaches
+follow-tail until an explicit `scrollToEnd()` or a user return to the end.
+Append, stream, resize, and shrink do not re-enable follow-tail. `role=log`, the
+live mode, and busy state are declared through the typed `semanticRole`, `live`,
+and `busy` props.
+
 ## Темы и стили / Themes and styles
 
 Для приложения на Tailwind 4 подключайте integration entrypoint после собственного
@@ -403,6 +566,17 @@ CodeMirror autocomplete in `SCodeEditor` and the overlay `SResizeHandle` stay
 inside their positioned component owners. They intentionally use the local
 `--s-layer-floating` anchor and are not shifted by `--s-layer-host-offset`.
 
+`SResizeHandle` owns separator geometry through `hitbox="compact | standard |
+spacious"`. The semantic steps are 6, 12, and 32 px; the default is `compact`
+for inline separators and `spacious` for overlay handles. Use `standard` for a
+12 px workbench panel separator instead of styling the component internals.
+
+`SResizeHandle` управляет геометрией separator через `hitbox="compact |
+standard | spacious"`. Семантические ступени равны 6, 12 и 32 px; inline
+separator по умолчанию использует `compact`, overlay handle — `spacious`.
+Для 12-пиксельной границы workbench-панели используйте `standard`, не изменяя
+внутренние стили компонента.
+
 ## Публичный контракт / Public contract
 
 `package.json#exports` — источник истины для импортов. Публичный контракт

package/docs/public-api.md

@@ -33,6 +33,10 @@ responsive geometry, semantic palette и доступную таблицу да
 async boundary; `presentation="plain"` является lightweight read-only контрактом
 без загрузки editor runtime. `SChip.surface` владеет action/link семантикой, а
 `SPanel.headerLayout` — inline/stacked/auto компоновкой заголовка и действий.
+`SInteractiveSurface#actions` и использующие его `SActionCard`/
+`SActionListItem` держат primary activation и дополнительные controls
+sibling-элементами внутри одного chrome; `actionsLayout`/`trailingLayout`
+управляют inline, stacked и container-responsive раскладкой.
 
 ## English
 
@@ -68,3 +72,7 @@ an accessible data table. `SMetricCard` accepts a compact chart through
 `presentation="plain"` is the lightweight read-only contract that does not load
 the editor runtime. `SChip.surface` owns action/link semantics, while
 `SPanel.headerLayout` owns inline/stacked/auto title and action composition.
+`SInteractiveSurface#actions` and its `SActionCard`/`SActionListItem`
+compositions keep primary activation and additional controls as siblings inside
+one chrome; `actionsLayout`/`trailingLayout` control inline, stacked, and
+container-responsive layout.

package/docs/theming.md

@@ -17,6 +17,14 @@ applyThemeIdToDocument(document, 'classic-light')
 theme-контейнере. Не стилизуйте внутренний DOM компонентов через `:deep`,
 private selectors или зависимость от структуры template.
 
+### Геометрия separator
+
+`SResizeHandle` использует `--s-resize-handle-hitbox-compact` (6 px),
+`--s-resize-handle-hitbox-standard` (12 px) и
+`--s-resize-handle-hitbox-spacious` (32 px). Выбирайте ступень через публичный
+prop `hitbox`; переопределяйте токены только как часть общей темы, а не для
+отдельного экземпляра компонента. Толщина визуальной линии от hitbox не зависит.
+
 ### Интеграция шкалы слоёв host-приложения
 
 Floating surfaces (`STooltip`, menu, select, combobox и popover), modal и
@@ -80,6 +88,15 @@ Override documented CSS custom properties on the root theme container only. Do
 not style component internals through `:deep`, private selectors, or template
 structure dependencies.
 
+### Separator geometry
+
+`SResizeHandle` uses `--s-resize-handle-hitbox-compact` (6 px),
+`--s-resize-handle-hitbox-standard` (12 px), and
+`--s-resize-handle-hitbox-spacious` (32 px). Select a step with the public
+`hitbox` prop. Override the tokens only as part of the host theme, not for an
+individual component instance. The visual divider thickness is independent of
+the hitbox.
+
 ### Host application layer-scale integration
 
 Floating surfaces (`STooltip`, menus, selects, comboboxes, and popovers), modals,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pgcorp/ui-kit",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Typed Vue 3 design system with accessible components, semantic themes, and workbench patterns.",
   "type": "module",
   "types": "./index.ts",
@@ -267,6 +267,9 @@
       "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"
       ],
@@ -510,6 +513,7 @@
     "./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/json": "./src/components/shared/data-display/json.ts",
@@ -585,7 +589,7 @@
     "@uiw/codemirror-extensions-langs": "^4.25.8",
     "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",
@@ -601,12 +605,11 @@
     "@tailwindcss/postcss": "^4.2.0",
     "@types/node": "^25.3.0",
     "@vitejs/plugin-vue": "^6.0.4",
-    "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/coverage-v8": "^4.1.11",
     "@vitest/eslint-plugin": "1.6.20",
     "@vue/compiler-dom": "3.5.39",
     "@vue/compiler-sfc": "3.5.39",
     "@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",
@@ -617,10 +620,12 @@
     "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.0.18",
+    "vitest": "^4.1.11",
     "vue": "^3.5.28",
+    "vue-eslint-parser": "^10.4.0",
     "vue-router": "^5.0.3",
     "vue-tsc": "^3.2.4"
   },

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/shared/_internal/SDialogSurface.css

@@ -104,6 +104,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"
@@ -95,17 +96,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/dialogSurface.ts

@@ -1,5 +1,6 @@
 export type DialogSurfaceModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'wide' | 'full'
 export type DialogSurfaceDrawerSize = 'sm' | 'md' | 'lg'
+export type DialogSurfaceDrawerPlacement = 'right' | 'bottom'
 export type DialogSurfaceTone = 'default' | 'subtle'
 export type DialogSurfaceScrollBehavior = 'page' | 'body'
 
@@ -14,6 +15,7 @@ export interface ModalDialogSurfacePresentation {
 export interface DrawerDialogSurfacePresentation {
   kind: 'drawer'
   size: DialogSurfaceDrawerSize
+  placement: DialogSurfaceDrawerPlacement
   mobileFullScreen: boolean
 }
 
@@ -38,9 +40,10 @@ export class DialogSurfaceContractError extends Error {
 }
 
 const modalKeys = new Set(['kind', 'size', 'fullscreen', 'surface', 'scrollBehavior'])
-const drawerKeys = new Set(['kind', 'size', 'mobileFullScreen'])
+const drawerKeys = new Set(['kind', 'size', 'placement', 'mobileFullScreen'])
 const modalSizes = new Set<DialogSurfaceModalSize>(['sm', 'md', 'lg', 'xl', '2xl', '3xl', 'wide', 'full'])
 const drawerSizes = new Set<DialogSurfaceDrawerSize>(['sm', 'md', 'lg'])
+const drawerPlacements = new Set<DialogSurfaceDrawerPlacement>(['right', 'bottom'])
 const surfaceTones = new Set<DialogSurfaceTone>(['default', 'subtle'])
 const scrollBehaviors = new Set<DialogSurfaceScrollBehavior>(['page', 'body'])
 
@@ -92,6 +95,9 @@ export function assertDialogSurfacePresentation(
     if (!drawerSizes.has(candidate.size as DialogSurfaceDrawerSize)) {
       throw new DialogSurfaceContractError('invalid-size', `Недопустимый размер SDrawer: ${String(candidate.size)}`)
     }
+    if (!drawerPlacements.has(candidate.placement as DialogSurfaceDrawerPlacement)) {
+      throw new DialogSurfaceContractError('invalid-presentation', `Недопустимое размещение SDrawer: ${String(candidate.placement)}`)
+    }
     if (typeof candidate.mobileFullScreen !== 'boolean') {
       throw new DialogSurfaceContractError('invalid-presentation', 'SDrawer presentation требует boolean mobileFullScreen')
     }

package/src/components/shared/containers/SDrawer.css

@@ -15,6 +15,10 @@
   @apply absolute inset-0 flex items-stretch justify-end;
 }
 
+.s-drawer-positioner[data-placement='bottom'] {
+  @apply items-end justify-stretch;
+}
+
 .s-drawer-backdrop-enter-active,
 .s-drawer-backdrop-leave-active {
   transition: opacity var(--s-motion-standard) ease;
@@ -38,9 +42,14 @@
   transform: translateX(1.5rem);
 }
 
+.s-drawer-shell[data-placement='bottom'].s-drawer-panel-enter-from,
+.s-drawer-shell[data-placement='bottom'].s-drawer-panel-leave-to {
+  transform: translateY(1.5rem);
+}
+
 @media (max-width: 767px) {
-  .s-drawer-panel-enter-from,
-  .s-drawer-panel-leave-to {
+  .s-drawer-shell[data-placement='right'].s-drawer-panel-enter-from,
+  .s-drawer-shell[data-placement='right'].s-drawer-panel-leave-to {
     transform: translateY(1.5rem);
   }
 }

package/src/components/shared/containers/SDrawer.vue

@@ -5,8 +5,8 @@
     </transition>
 
     <transition name="s-drawer-panel">
-      <div v-if="open" class="s-drawer-shell" :style="surfaceStyle">
-        <div class="s-drawer-positioner">
+      <div v-if="open" class="s-drawer-shell" :data-placement="validatedPlacement" :style="surfaceStyle">
+        <div class="s-drawer-positioner" :data-placement="validatedPlacement">
           <SDialogSurface
             v-bind="ownedAttrs.bindings()"
             :presentation="dialogPresentation"
@@ -31,11 +31,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, toRef } from 'vue'
+import { computed } from 'vue'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { useDialogOverlay } from '../../../composables/useDialogOverlay'
+import { validateBoolean, validateExactString } from '../../../internal/runtimeContract'
 import SDialogSurface from '../_internal/SDialogSurface.vue'
 import type {
+  DialogSurfaceDrawerPlacement,
   DialogSurfaceDrawerSize,
   DrawerDialogSurfacePresentation,
 } from '../_internal/dialogSurface'
@@ -43,12 +45,14 @@ import type {
 defineOptions({ inheritAttrs: false })
 
 export type DrawerSize = DialogSurfaceDrawerSize
+export type DrawerPlacement = DialogSurfaceDrawerPlacement
 
 export interface Props {
   open: boolean
   title?: string
   closable?: boolean
   size?: DrawerSize
+  placement?: DrawerPlacement
   mobileFullScreen?: boolean
   ariaLabel?: string
 }
@@ -57,6 +61,7 @@ const props = withDefaults(defineProps<Props>(), {
   title: undefined,
   closable: true,
   size: 'md',
+  placement: 'right',
   mobileFullScreen: true,
   ariaLabel: 'Боковая панель',
 })
@@ -66,19 +71,50 @@ const emit = defineEmits<{
 }>()
 
 const ownedAttrs = useOwnedAttrs({ component: 'SDrawer', owner: 'drawer dialog surface' })
+const validatedPlacement = computed<DrawerPlacement>(() => validateExactString(
+  'SDrawer',
+  'placement',
+  props.placement,
+  ['right', 'bottom'] as const,
+))
+const validatedSize = computed<DrawerSize>(() => validateExactString(
+  'SDrawer',
+  'size',
+  props.size,
+  ['sm', 'md', 'lg'] as const,
+))
+const validatedOpen = computed(() => validateBoolean('SDrawer', 'open', props.open))
+const validatedClosable = computed(() => validateBoolean('SDrawer', 'closable', props.closable))
+const validatedMobileFullScreen = computed(() => validateBoolean(
+  'SDrawer',
+  'mobileFullScreen',
+  props.mobileFullScreen,
+))
 const dialogPresentation = computed<DrawerDialogSurfacePresentation>(() => ({
   kind: 'drawer',
-  size: props.size,
-  mobileFullScreen: props.mobileFullScreen,
+  size: validatedSize.value,
+  placement: validatedPlacement.value,
+  mobileFullScreen: validatedMobileFullScreen.value,
 }))
 
+function assertInitialDrawerContract(): void {
+  void validatedPlacement.value
+  void validatedSize.value
+  void validatedOpen.value
+  void validatedClosable.value
+  void validatedMobileFullScreen.value
+}
+
+// Validate before the overlay owner acquires global layer and focus resources.
+assertInitialDrawerContract()
+
 function closeDrawer() {
   emit('update:open', false)
 }
 
 const { setPanelElement, backdropStyle, surfaceStyle } = useDialogOverlay({
-  open: toRef(props, 'open'),
-  closable: toRef(props, 'closable'),
+  open: validatedOpen,
+  closable: validatedClosable,
   requestClose: closeDrawer,
 })
 </script>