@pgcorp/ui-kit 0.9.0 → 0.10.0

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

@@ -0,0 +1,470 @@
+<template>
+  <div
+    v-bind="ownedAttrs.bindings()"
+    ref="viewportRef"
+    class="s-scroll-viewport"
+    role="region"
+    :aria-label="contract.accessibleLabel"
+    :tabindex="contract.focusable ? 0 : undefined"
+    :data-axis="contract.axis"
+    :data-block-size="contract.blockSize"
+    :data-focusable="contract.focusable"
+    :data-keyboard-navigation="contract.keyboardNavigation"
+    :data-overscroll-behavior="contract.overscrollBehavior"
+    :data-at-inline-start="viewportState?.atInlineStart"
+    :data-at-inline-end="viewportState?.atInlineEnd"
+    :data-at-block-start="viewportState?.atBlockStart"
+    :data-at-block-end="viewportState?.atBlockEnd"
+    @keydown="onKeydown"
+  >
+    <div ref="contentRef" class="s-scroll-viewport__content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import type { ScrollViewportBlockSize as PublicScrollViewportBlockSize } from '../../../internal/semanticSizing'
+import type {
+  SScrollViewportAxis as PublicSScrollViewportAxis,
+  SScrollViewportOverscrollBehavior as PublicSScrollViewportOverscrollBehavior,
+} from './scrollViewport'
+
+export interface Props {
+  accessibleLabel: string
+  axis?: PublicSScrollViewportAxis
+  blockSize?: PublicScrollViewportBlockSize
+  focusable?: boolean
+  keyboardNavigation?: boolean
+  overscrollBehavior?: PublicSScrollViewportOverscrollBehavior
+}
+</script>
+
+<script setup lang="ts">
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  shallowRef,
+  watch,
+} from 'vue'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
+import {
+  validateBoolean,
+  validateBoundedNumber,
+  validateExactString,
+  validateNonEmptyString,
+} from '../../../internal/runtimeContract'
+import { validateScrollViewportBlockSize } from '../../../internal/semanticSizing'
+import type {
+  SScrollViewportApi,
+  SScrollViewportBehavior,
+  SScrollViewportBoundary,
+  SScrollViewportPhysicalAxis,
+  SScrollViewportRevealOptions,
+  SScrollViewportState,
+} from './scrollViewport'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<Props>(), {
+  axis: 'y',
+  blockSize: 'md',
+  focusable: true,
+  keyboardNavigation: true,
+  overscrollBehavior: 'contain',
+})
+
+const emit = defineEmits<{
+  'scroll-state': [state: SScrollViewportState]
+}>()
+
+const viewportRef = shallowRef<HTMLElement | null>(null)
+const contentRef = shallowRef<HTMLElement | null>(null)
+const viewportState = shallowRef<SScrollViewportState | null>(null)
+const ownedAttrs = useOwnedAttrs({ component: 'SScrollViewport', owner: 'scroll viewport region' })
+let resizeObserver: ResizeObserver | null = null
+let lastStateSignature = ''
+let rtlScrollType: 'default' | 'negative' | 'reverse' | null = null
+
+const contract = computed(() => {
+  const focusable = validateBoolean('SScrollViewport', 'focusable', props.focusable)
+  const keyboardNavigation = validateBoolean(
+    'SScrollViewport',
+    'keyboardNavigation',
+    props.keyboardNavigation,
+  )
+  if (keyboardNavigation && !focusable) {
+    throw new Error(
+      'SScrollViewport: keyboardNavigation=true требует focusable=true. '
+      + '/ SScrollViewport: keyboardNavigation=true requires focusable=true.',
+    )
+  }
+  return {
+    accessibleLabel: validateNonEmptyString(
+      'SScrollViewport',
+      'accessibleLabel',
+      props.accessibleLabel,
+    ),
+    axis: validateExactString(
+      'SScrollViewport',
+      'axis',
+      props.axis,
+      ['x', 'y', 'both'] as const,
+    ),
+    blockSize: validateScrollViewportBlockSize(
+      'SScrollViewport',
+      'blockSize',
+      props.blockSize,
+    ),
+    focusable,
+    keyboardNavigation,
+    overscrollBehavior: validateExactString(
+      'SScrollViewport',
+      'overscrollBehavior',
+      props.overscrollBehavior,
+      ['auto', 'contain', 'none'] as const,
+    ),
+  }
+})
+
+useInteractiveLeafRegistration({
+  owner: 'SScrollViewport',
+  active: () => contract.value.focusable,
+})
+
+function clamp(value: number, maximum: number): number {
+  return Math.min(maximum, Math.max(0, value))
+}
+
+function detectRtlScrollType(element: HTMLElement): 'default' | 'negative' | 'reverse' {
+  if (rtlScrollType) return rtlScrollType
+  const document = element.ownerDocument
+  const probe = document.createElement('div')
+  const content = document.createElement('div')
+  probe.dir = 'rtl'
+  probe.style.cssText = 'position:absolute;inset:-9999px;width:4px;height:1px;overflow:scroll;'
+  content.style.cssText = 'width:8px;height:1px;'
+  probe.append(content)
+  document.body.append(probe)
+  if (probe.scrollLeft > 0) {
+    rtlScrollType = 'default'
+  } else {
+    probe.scrollLeft = 1
+    rtlScrollType = probe.scrollLeft === 0 ? 'negative' : 'reverse'
+  }
+  probe.remove()
+  return rtlScrollType
+}
+
+function physicalLeftOriginOffset(element: HTMLElement, maximum: number): number {
+  const scrollLeft = element.scrollLeft
+  if (getComputedStyle(element).direction !== 'rtl') return clamp(scrollLeft, maximum)
+  switch (detectRtlScrollType(element)) {
+    case 'negative':
+      return clamp(maximum + scrollLeft, maximum)
+    case 'reverse':
+      return clamp(maximum - scrollLeft, maximum)
+    case 'default':
+      return clamp(scrollLeft, maximum)
+  }
+}
+
+function browserScrollLeft(element: HTMLElement, physicalX: number, maximum: number): number {
+  const x = clamp(physicalX, maximum)
+  if (getComputedStyle(element).direction !== 'rtl') return x
+  switch (detectRtlScrollType(element)) {
+    case 'negative':
+      return x - maximum
+    case 'reverse':
+      return maximum - x
+    case 'default':
+      return x
+  }
+}
+
+function semanticOffsets(
+  element: HTMLElement,
+  physical: SScrollViewportState['physical'],
+): SScrollViewportState['semantic'] {
+  const styles = getComputedStyle(element)
+  const verticalWriting = styles.writingMode.startsWith('vertical')
+    || styles.writingMode.startsWith('sideways')
+  if (!verticalWriting) {
+    return Object.freeze({
+      inline: styles.direction === 'rtl' ? physical.maxX - physical.x : physical.x,
+      block: physical.y,
+      maxInline: physical.maxX,
+      maxBlock: physical.maxY,
+    })
+  }
+  return Object.freeze({
+    inline: styles.direction === 'rtl'
+      ? physical.maxY - physical.y
+      : physical.y,
+    block: styles.writingMode.endsWith('-rl') ? physical.maxX - physical.x : physical.x,
+    maxInline: physical.maxY,
+    maxBlock: physical.maxX,
+  })
+}
+
+function readState(element: HTMLElement): SScrollViewportState {
+  const maxX = Math.max(0, element.scrollWidth - element.clientWidth)
+  const maxY = Math.max(0, element.scrollHeight - element.clientHeight)
+  const physical = Object.freeze({
+    x: physicalLeftOriginOffset(element, maxX),
+    y: clamp(element.scrollTop, maxY),
+    maxX,
+    maxY,
+  })
+  const semantic = semanticOffsets(element, physical)
+  const epsilon = 1
+  return Object.freeze({
+    physical,
+    semantic,
+    atInlineStart: semantic.inline <= epsilon,
+    atInlineEnd: semantic.maxInline - semantic.inline <= epsilon,
+    atBlockStart: semantic.block <= epsilon,
+    atBlockEnd: semantic.maxBlock - semantic.block <= epsilon,
+  })
+}
+
+function publishScrollState(): void {
+  const element = viewportRef.value
+  if (!element) return
+  const state = readState(element)
+  const signature = JSON.stringify(state)
+  if (signature === lastStateSignature) return
+  lastStateSignature = signature
+  viewportState.value = state
+  emit('scroll-state', state)
+}
+
+function requireViewport(action: string): HTMLElement {
+  const element = viewportRef.value
+  if (element) return element
+  throw new Error(
+    `SScrollViewport: ${action} недоступен до mount. `
+    + `/ SScrollViewport: ${action} is unavailable before mount.`,
+  )
+}
+
+function supportsAxis(axis: SScrollViewportPhysicalAxis): boolean {
+  return contract.value.axis === axis || contract.value.axis === 'both'
+}
+
+function assertSupportedAxis(axis: SScrollViewportPhysicalAxis, action: string): void {
+  if (supportsAxis(axis)) return
+  throw new Error(
+    `SScrollViewport: ${action} не может управлять осью ${axis} при axis=${contract.value.axis}. `
+    + `/ SScrollViewport: ${action} cannot control axis ${axis} when axis=${contract.value.axis}.`,
+  )
+}
+
+function focus(): void {
+  if (!contract.value.focusable) {
+    throw new Error(
+      'SScrollViewport: focus() требует focusable=true. '
+      + '/ SScrollViewport: focus() requires focusable=true.',
+    )
+  }
+  requireViewport('focus()').focus()
+}
+
+function scrollToBoundary(
+  axis: SScrollViewportPhysicalAxis,
+  boundary: SScrollViewportBoundary,
+): void {
+  const validatedAxis = validateExactString(
+    'SScrollViewport',
+    'scrollToBoundary.axis',
+    axis,
+    ['x', 'y'] as const,
+  )
+  const validatedBoundary = validateExactString(
+    'SScrollViewport',
+    'scrollToBoundary.boundary',
+    boundary,
+    ['start', 'end'] as const,
+  )
+  assertSupportedAxis(validatedAxis, 'scrollToBoundary()')
+  const element = requireViewport('scrollToBoundary()')
+  const current = readState(element).physical
+  const x = validatedAxis === 'x'
+    ? (validatedBoundary === 'start' ? 0 : current.maxX)
+    : current.x
+  const y = validatedAxis === 'y'
+    ? (validatedBoundary === 'start' ? 0 : current.maxY)
+    : current.y
+  element.scrollTo({
+    left: browserScrollLeft(element, x, current.maxX),
+    top: y,
+    behavior: 'auto',
+  })
+  publishScrollState()
+}
+
+function reveal(options: SScrollViewportRevealOptions): void {
+  if (typeof options !== 'object' || options === null || Array.isArray(options)) {
+    throw new TypeError(
+      'SScrollViewport: reveal.options должен быть объектом. '
+      + '/ SScrollViewport: reveal.options must be an object.',
+    )
+  }
+  if (options.x === undefined && options.y === undefined) {
+    throw new Error(
+      'SScrollViewport: reveal() требует x и/или y. '
+      + '/ SScrollViewport: reveal() requires x and/or y.',
+    )
+  }
+  if (options.x !== undefined) assertSupportedAxis('x', 'reveal()')
+  if (options.y !== undefined) assertSupportedAxis('y', 'reveal()')
+  const element = requireViewport('reveal()')
+  const current = readState(element).physical
+  const x = options.x === undefined
+    ? current.x
+    : validateBoundedNumber(
+      'SScrollViewport',
+      'reveal.x',
+      options.x,
+      { minimum: 0, maximum: Number.MAX_SAFE_INTEGER },
+    )
+  const y = options.y === undefined
+    ? current.y
+    : validateBoundedNumber(
+      'SScrollViewport',
+      'reveal.y',
+      options.y,
+      { minimum: 0, maximum: Number.MAX_SAFE_INTEGER },
+    )
+  const behavior: SScrollViewportBehavior = validateExactString(
+    'SScrollViewport',
+    'reveal.behavior',
+    options.behavior ?? 'auto',
+    ['auto', 'smooth'] as const,
+  )
+  element.scrollTo({
+    left: browserScrollLeft(element, x, current.maxX),
+    top: clamp(y, current.maxY),
+    behavior,
+  })
+  publishScrollState()
+}
+
+function keyboardTarget(
+  element: HTMLElement,
+  event: KeyboardEvent,
+): { left: number; top: number } | null {
+  const horizontal = supportsAxis('x')
+  const vertical = supportsAxis('y')
+  const horizontalStep = Math.max(1, element.clientWidth / 8)
+  const verticalStep = Math.max(1, element.clientHeight / 8)
+  const pageX = Math.max(1, element.clientWidth * 0.9)
+  const pageY = Math.max(1, element.clientHeight * 0.9)
+  const current = readState(element).physical
+  switch (event.key) {
+    case 'ArrowLeft':
+      return horizontal ? { left: current.x - horizontalStep, top: current.y } : null
+    case 'ArrowRight':
+      return horizontal ? { left: current.x + horizontalStep, top: current.y } : null
+    case 'ArrowUp':
+      return vertical ? { left: current.x, top: current.y - verticalStep } : null
+    case 'ArrowDown':
+      return vertical ? { left: current.x, top: current.y + verticalStep } : null
+    case 'PageUp':
+      return vertical
+        ? { left: current.x, top: current.y - pageY }
+        : horizontal ? { left: current.x - pageX, top: current.y } : null
+    case 'PageDown':
+      return vertical
+        ? { left: current.x, top: current.y + pageY }
+        : horizontal ? { left: current.x + pageX, top: current.y } : null
+    case 'Home':
+      return { left: horizontal ? 0 : current.x, top: vertical ? 0 : current.y }
+    case 'End':
+      return {
+        left: horizontal ? current.maxX : current.x,
+        top: vertical ? current.maxY : current.y,
+      }
+    default:
+      return null
+  }
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  const element = viewportRef.value
+  if (
+    !element
+    || !contract.value.keyboardNavigation
+    || event.target !== element
+    || event.defaultPrevented
+    || event.altKey
+    || event.ctrlKey
+    || event.metaKey
+    || event.shiftKey
+  ) return
+  const target = keyboardTarget(element, event)
+  if (!target) return
+  event.preventDefault()
+  const current = readState(element).physical
+  element.scrollTo({
+    left: browserScrollLeft(element, target.left, current.maxX),
+    top: clamp(target.top, current.maxY),
+    behavior: 'auto',
+  })
+  publishScrollState()
+}
+
+function onScroll(): void {
+  publishScrollState()
+}
+
+onMounted(() => {
+  const viewport = requireViewport('observer setup')
+  const content = contentRef.value
+  if (!content) {
+    throw new Error(
+      'SScrollViewport: content owner отсутствует после mount. '
+      + '/ SScrollViewport: content owner is missing after mount.',
+    )
+  }
+  if (typeof ResizeObserver === 'undefined') {
+    throw new Error(
+      'SScrollViewport: runtime требует ResizeObserver. '
+      + '/ SScrollViewport: runtime requires ResizeObserver.',
+    )
+  }
+  viewport.addEventListener('scroll', onScroll, { passive: true })
+  resizeObserver = new ResizeObserver(publishScrollState)
+  resizeObserver.observe(viewport)
+  resizeObserver.observe(content)
+  publishScrollState()
+})
+
+watch(
+  () => [
+    contract.value.axis,
+    contract.value.blockSize,
+    contract.value.focusable,
+    contract.value.keyboardNavigation,
+    contract.value.overscrollBehavior,
+  ],
+  async () => {
+    await nextTick()
+    publishScrollState()
+  },
+)
+
+onBeforeUnmount(() => {
+  viewportRef.value?.removeEventListener('scroll', onScroll)
+  resizeObserver?.disconnect()
+  resizeObserver = null
+  lastStateSignature = ''
+})
+
+defineExpose<SScrollViewportApi>({ focus, scrollToBoundary, reveal })
+</script>
+
+<style lang="postcss" src="./SScrollViewport.css" scoped></style>

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

@@ -26,7 +26,7 @@
               :model-value="allCurrentRowsSelected"
               :indeterminate="someCurrentRowsSelected && !allCurrentRowsSelected"
               :disabled="selectableRows.length === 0"
-              :aria-label="allCurrentRowsSelected ? 'Снять выбор со всех строк' : 'Выбрать все строки'"
+              :aria-label="allCurrentRowsSelected ? t('table.clearAllRows') : t('table.selectAllRows')"
               @update:model-value="updateAllRowsSelection"
             />
           </th>
@@ -36,7 +36,7 @@
             scope="col"
             data-width="2xs"
           >
-            <span class="s-table__assistive">Детали строки</span>
+            <span class="s-table__assistive">{{ t('table.rowDetails') }}</span>
           </th>
           <th
             v-for="column in validatedColumns"
@@ -87,10 +87,10 @@
         <SAsyncState
           v-if="validatedLoading || errorMessage || validatedRows.length === 0"
           :state="validatedLoading
-            ? { status: 'loading', message: loadingMessage }
+            ? { status: 'loading', message: resolvedLoadingMessage }
             : errorMessage
               ? { status: 'error', message: errorMessage }
-              : { status: 'empty', message: emptyMessage }"
+              : { status: 'empty', message: resolvedEmptyMessage }"
           presentation="table-row"
           :colspan="renderedColumnCount"
         />
@@ -169,7 +169,7 @@
                   :id="rowDetailsId(entry.key)"
                   class="s-table__row-details"
                   role="region"
-                  :aria-label="`Детали: ${resolveRowLabel(entry.row, entry.index)}`"
+                  :aria-label="t('table.detailsFor', { label: resolveRowLabel(entry.row, entry.index) })"
                 >
                   <slot name="row-details" :row="entry.row" :row-index="entry.index" />
                 </div>
@@ -256,6 +256,7 @@ export interface STableProps<
 
 <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, watch } from 'vue'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import { ChevronDown, ChevronsUpDown, ChevronUp } from '../../icons/sputnigUiIcons'
 import { hasOwn } from '../../../internal/es2020'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
@@ -278,9 +279,9 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<STableProps<Row, RowKey, Field>>(), {
   loading: false,
-  loadingMessage: 'Загрузка...',
+  loadingMessage: undefined,
   errorMessage: '',
-  emptyMessage: 'Нет данных для отображения',
+  emptyMessage: undefined,
   selectedRowKey: undefined,
   selectionMode: 'none',
   selectedRowKeys: () => [],
@@ -313,6 +314,7 @@ const emit = defineEmits<{
   'multi-sort': [value: readonly STableSort<Field>[]]
 }>()
 const slots = useSlots()
+const { t } = useUiKitLocale()
 
 const TABLE_DENSITIES = ['default', 'compact'] as const
 const TABLE_SURFACES = ['bordered', 'plain'] as const
@@ -352,6 +354,8 @@ function onRowKeydown(event: KeyboardEvent, row: Row, rowIndex: number): void {
   emit('row-click', row, rowIndex)
 }
 const validatedLoading = computed(() => validateBoolean('STable', 'loading', props.loading))
+const resolvedLoadingMessage = computed(() => props.loadingMessage ?? t('table.loading'))
+const resolvedEmptyMessage = computed(() => props.emptyMessage ?? t('table.empty'))
 const resolvedAccessibleName = computed(() => {
   if (props.ariaLabel !== undefined && props.ariaLabelledby !== undefined) {
     throw new TypeError('STable: задайте только ariaLabel или ariaLabelledby. / STable: provide only ariaLabel or ariaLabelledby.')
@@ -364,7 +368,7 @@ const resolvedAccessibleName = computed(() => {
   }
   return {
     ariaLabel: props.ariaLabel === undefined
-      ? 'Таблица данных'
+      ? t('table.accessibleName')
       : validateNonEmptyString('STable', 'ariaLabel', props.ariaLabel),
     ariaLabelledby: undefined,
   }
@@ -594,15 +598,25 @@ const sortActionLabel = (column: STableColumn<Row, Field>): string => {
   const index = sortIndex(column)
   const current = index === -1 ? undefined : activeSorts.value[index]
   if (validatedSortMode.value === 'multiple') {
-    if (!current) return `${column.header}: добавить в сортировку по возрастанию`
-    const state = current.direction === 'ascending' ? 'по возрастанию' : 'по убыванию'
-    const action = current.direction === 'ascending' ? 'сортировать по убыванию' : 'убрать из сортировки'
-    return `${column.header}: приоритет ${index + 1} из ${activeSorts.value.length}, ${state}; ${action}`
+    if (!current) return t('table.addSortAscending', { column: column.header })
+    const direction = current.direction === 'ascending'
+      ? t('table.ascending')
+      : t('table.descending')
+    const action = current.direction === 'ascending'
+      ? t('table.sortNextDescending')
+      : t('table.removeFromSort')
+    return t('table.multiSortSummary', {
+      column: column.header,
+      priority: index + 1,
+      total: activeSorts.value.length,
+      direction,
+      action,
+    })
   }
   const direction = current?.direction
-  if (direction === 'ascending') return `${column.header}: сортировать по убыванию`
-  if (direction === 'descending') return `${column.header}: сбросить сортировку`
-  return `${column.header}: сортировать по возрастанию`
+  if (direction === 'ascending') return t('table.sortDescending', { column: column.header })
+  if (direction === 'descending') return t('table.clearSort', { column: column.header })
+  return t('table.sortAscending', { column: column.header })
 }
 
 function requestSort(column: STableColumn<Row, Field>): void {
@@ -831,7 +845,7 @@ function rowDetailsId(key: RowKey): string {
 }
 
 function resolveRowLabel(row: Row, index: number): string {
-  if (props.getRowLabel === undefined) return `Строка ${index + 1}`
+  if (props.getRowLabel === undefined) return t('table.rowLabel', { index: index + 1 })
   if (typeof props.getRowLabel !== 'function') {
     throw new TypeError(`${diagnosticOwner()}: getRowLabel must be a function.`)
   }
@@ -866,8 +880,10 @@ function rowAriaSelected(entry: ResolvedRowEntry): 'true' | 'false' | undefined
 
 function rowSelectionLabel(entry: ResolvedRowEntry): string {
   const label = resolveRowLabel(entry.row, entry.index)
-  if (!entry.selectable) return `Выбор недоступен: ${label}`
-  return rowIsSelected(entry) ? `Снять выбор: ${label}` : `Выбрать: ${label}`
+  if (!entry.selectable) return t('table.selectionUnavailable', { label })
+  return rowIsSelected(entry)
+    ? t('table.deselectRow', { label })
+    : t('table.selectRow', { label })
 }
 
 function updateRowSelection(entry: ResolvedRowEntry, selected: boolean): void {
@@ -900,7 +916,10 @@ function rowIsExpanded(entry: ResolvedRowEntry): boolean {
 }
 
 function rowExpansionLabel(entry: ResolvedRowEntry): string {
-  return `${rowIsExpanded(entry) ? 'Свернуть' : 'Раскрыть'}: ${resolveRowLabel(entry.row, entry.index)}`
+  const label = resolveRowLabel(entry.row, entry.index)
+  return rowIsExpanded(entry)
+    ? t('table.collapseRow', { label })
+    : t('table.expandRow', { label })
 }
 
 function toggleRowExpansion(entry: ResolvedRowEntry): void {

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

@@ -1,31 +1,36 @@
 <template>
-  <div v-bind="ownedAttrs.bindings()" class="s-toast-container">
-    <TransitionGroup name="notification-transition" tag="div" class="s-toast-transition-wrapper">
-      <SToastItem
-        v-for="notification in notifications"
-        :key="notification.id"
-        :notification="notification"
-        @dismiss="dismiss"
-      />
-    </TransitionGroup>
-  </div>
+  <SControlledToastViewport
+    v-bind="ownedAttrs.bindings()"
+    :notifications="notifications"
+    :accessible-label="t('feedback.notifications')"
+    lifetime-owner="consumer"
+    :max-visible="Math.max(1, notifications.length)"
+    @dismiss="dismiss"
+  />
 </template>
 
 <script setup lang="ts">
 import { useNotifierStore } from '../../../stores/useNotifierStore'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import { storeToRefs } from 'pinia'
-import SToastItem from '../_internal/SToastItem.vue'
+import { computed } from 'vue'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
+import SControlledToastViewport from './SControlledToastViewport.vue'
+import type { SToastDismissIntent, SToastPresentation } from './toast'
 
 defineOptions({ inheritAttrs: false })
 
 const store = useNotifierStore()
-const { notifications } = storeToRefs(store)
+const notifications = computed<readonly SToastPresentation[]>(() =>
+  store.notifications.map((notification) => ({
+    id: notification.id,
+    severity: notification.severity,
+    title: notification.title,
+    message: notification.message,
+  })))
 const ownedAttrs = useOwnedAttrs({ component: 'SToastContainer', owner: 'toast container root' })
+const { t } = useUiKitLocale()
 
-function dismiss(id: string): void {
-  store.remove(id)
+function dismiss(intent: SToastDismissIntent): void {
+  store.remove(intent.id)
 }
 </script>
-
-<style lang="postcss" src="./SToastContainer.css" scoped></style>