@pgcorp/ui-kit 0.8.1 → 0.10.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/_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/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' })

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

@@ -11,6 +11,7 @@
   >
     <div v-if="editing && draggable" class="s-cloud-chrome-row__drag-handle">
       <SDragHandle
+        size="xs"
         :label="label"
         :can-move-previous="canMoveUp"
         :can-move-next="canMoveDown"
@@ -27,7 +28,7 @@
       <slot name="actions" />
       <SButton
         v-if="editing && canHide && !hidden"
-        size="sm"
+        size="xs"
         severity="secondary"
         appearance="ghost"
         icon-only
@@ -38,7 +39,7 @@
       />
       <SButton
         v-if="editing && canRestore"
-        size="sm"
+        size="xs"
         severity="secondary"
         appearance="ghost"
         icon-only

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,13 +5,13 @@
     </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"
             :title="title"
-            :accessible-name="ariaLabel"
+            :accessible-name="resolvedAriaLabel"
             :closable="closable"
             :set-surface-element="setPanelElement"
             @request-close="closeDrawer"
@@ -31,11 +31,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, toRef } from 'vue'
+import { computed } from 'vue'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 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 +46,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,28 +62,62 @@ const props = withDefaults(defineProps<Props>(), {
   title: undefined,
   closable: true,
   size: 'md',
+  placement: 'right',
   mobileFullScreen: true,
-  ariaLabel: 'Боковая панель',
+  ariaLabel: undefined,
 })
+const { t } = useUiKitLocale()
 
 const emit = defineEmits<{
   'update:open': [value: boolean]
 }>()
 
 const ownedAttrs = useOwnedAttrs({ component: 'SDrawer', owner: 'drawer dialog surface' })
+const resolvedAriaLabel = computed(() => props.ariaLabel ?? t('dialog.drawer'))
+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>

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

@@ -11,7 +11,7 @@
             v-bind="ownedAttrs.bindings()"
             :presentation="dialogPresentation"
             :title="title"
-            :accessible-name="ariaLabel"
+            :accessible-name="resolvedAriaLabel"
             :closable="closable"
             :set-surface-element="setPanelElement"
             @request-close="closeModal"
@@ -38,6 +38,7 @@
 
 <script setup lang="ts">
 import { computed, toRef } from 'vue'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { useDialogOverlay } from '../../../composables/useDialogOverlay'
 import SDialogSurface from '../_internal/SDialogSurface.vue'
@@ -74,8 +75,9 @@ const props = withDefaults(defineProps<Props>(), {
   layout: 'desktop',
   surface: 'default',
   scrollBehavior: 'page',
-  ariaLabel: 'Модальное окно',
+  ariaLabel: undefined,
 })
+const { t } = useUiKitLocale()
 
 const emit = defineEmits<{
   'update:open': [value: boolean]
@@ -88,6 +90,7 @@ function closeModal() {
 const isFullscreen = computed(() => props.fullScreen || props.layout === 'mobile-fullscreen')
 
 const ownedAttrs = useOwnedAttrs({ component: 'SModal', owner: 'modal dialog surface' })
+const resolvedAriaLabel = computed(() => props.ariaLabel ?? t('dialog.modal'))
 const dialogPresentation = computed<ModalDialogSurfacePresentation>(() => ({
   kind: 'modal',
   size: props.size,

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

@@ -49,11 +49,11 @@
     >
       <SAsyncState :state="state">
         <template v-if="state.status === 'error' && state.endpoint" #error>
-          <SMessage severity="danger" title="Ошибка ответа сервера">
+          <SMessage severity="danger" :title="t('feedback.serverResponseError')">
             <div class="space-y-1">
               <div>{{ state.message }}</div>
               <div class="text-xs text-danger-700 dark:text-danger-300">
-                Запрос: {{ state.endpoint }}
+                {{ t('feedback.request') }} {{ state.endpoint }}
               </div>
             </div>
           </SMessage>
@@ -82,6 +82,7 @@
 import { computed, useSlots, watchEffect, type FunctionalComponent, type HTMLAttributes, type VNodeProps } from 'vue'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { validateDomId } from '../../../internal/runtimeContract'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import SAsyncState, { type SAsyncStateContract } from '../feedback/SAsyncState.vue'
 import SMessage from '../data-display/SMessage.vue'
 import SProgressBar from '../data-display/SProgressBar.vue'
@@ -148,6 +149,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const slots = useSlots()
+const { t } = useUiKitLocale()
 const ownedAttrs = useOwnedAttrs({ component: 'SPanel', owner: 'panel surface root' })
 const validatedTitleId = computed(() => {
   if (props.titleId === undefined) return undefined

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

@@ -56,7 +56,7 @@
             tabindex="-1"
             role="dialog"
             :id="panelId"
-            :aria-label="ariaLabel"
+            :aria-label="resolvedAriaLabel"
             @keydown.tab="handlePanelTab"
             @focusout="handlePanelFocusout"
           >
@@ -92,6 +92,7 @@ import SButton, {
   type SButtonWidth,
 } from '../controls/SButton.vue';
 import { useFloatingPosition, type FloatingPlacement } from '../../../composables/useFloatingPosition';
+import { useUiKitLocale } from '../../../composables/useUiKitLocale';
 import { findRelativeTabTarget, getFocusableElements } from '../../../internal/focusNavigation';
 import { lastItem } from '../../../internal/es2020';
 import { resolveInteractiveElement } from '../../../internal/interactiveElement';
@@ -141,7 +142,7 @@ const props = withDefaults(defineProps<Props>(), {
   align: 'right',
   surface: 'default',
   width: 'trigger',
-  ariaLabel: 'Дополнительные действия',
+  ariaLabel: undefined,
   triggerAppearance: 'ghost',
   triggerSize: 'md',
   triggerWidth: 'full',
@@ -159,6 +160,8 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   open: undefined,
 });
+const { t } = useUiKitLocale();
+const resolvedAriaLabel = computed(() => props.ariaLabel ?? t('dialog.moreActions'));
 const emit = defineEmits<{
   (e: 'update:open', value: boolean): void;
 }>();
@@ -192,7 +195,7 @@ const layerZIndex = ref('var(--s-layer-root-floating)');
 const resolvedTriggerAriaLabel = computed(() =>
   props.triggerAriaLabel ?? (
     props.triggerIconOnly || (!props.triggerLabel && !slots.default)
-      ? props.ariaLabel
+      ? resolvedAriaLabel.value
       : undefined
   ),
 );
@@ -216,6 +219,7 @@ const {
   boundaryPadding: () => 8,
   flip: () => true,
   shift: () => true,
+  constrainMainAxis: () => true,
   widthMatch: () => props.width === 'trigger' ? 'min' : 'none',
   zIndex: () => layerZIndex.value,
   scrollStrategy: 'reposition',

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

@@ -0,0 +1,57 @@
+<template>
+  <slot v-if="acceptsNoOwnedAttributes" />
+</template>
+
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import {
+  UI_KIT_LOCALE_CONTEXT,
+  resolveUiKitLocaleContext,
+  type UiKitLocaleContext,
+} from '../../../internal/localeContext'
+import { UI_KIT_LOCALES, type UiKitLocale, type UiKitMessagesOverride } from '../../../locales/locale'
+import { createUiKitTranslate, mergeUiKitMessages, UI_KIT_MESSAGES } from '../../../locales/messages'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  /** Locale for this subtree; omission inherits the nearest provider and ultimately defaults to ru. */
+  locale?: UiKitLocale
+  /** Exact deep partial override for this subtree. Unknown fields fail at runtime. */
+  messages?: UiKitMessagesOverride
+}>()
+
+defineSlots<{
+  default: () => unknown
+}>()
+
+const parent = resolveUiKitLocaleContext()
+const ownedAttrs = useOwnedAttrs({ component: 'SUiKitLocaleProvider', owner: 'DOM-less locale boundary' })
+const locale = computed<UiKitLocale>(() => {
+  const value = props.locale ?? parent.locale.value
+  if (!UI_KIT_LOCALES.includes(value)) {
+    throw new TypeError(`SUiKitLocaleProvider: неизвестная locale ${JSON.stringify(value)}.`)
+  }
+  return value
+})
+const messages = computed(() => {
+  const base = props.locale === undefined || props.locale === parent.locale.value
+    ? parent.messages.value
+    : UI_KIT_MESSAGES[locale.value]
+  return mergeUiKitMessages(base, props.messages)
+})
+const context: UiKitLocaleContext = Object.freeze({
+  locale,
+  messages,
+  t: createUiKitTranslate(() => messages.value),
+})
+
+provide(UI_KIT_LOCALE_CONTEXT, context)
+
+const acceptsNoOwnedAttributes = computed(() => {
+  ownedAttrs.reject('locale provider не создаёт DOM owner / locale provider does not render a DOM owner')
+  return true
+})
+</script>

package/src/components/shared/controls/SButton.css

@@ -28,20 +28,22 @@
 }
 
 .s-button[data-size='xs']:not([data-icon-only='true']) {
-  min-height: var(--s-control-hitbox-xs);
-  padding: 0.25rem 0.5rem;
+  block-size: var(--s-control-hitbox-xs);
+  min-block-size: var(--s-control-hitbox-xs);
+  padding: 0 0.5rem;
   font-size: 0.75rem;
 }
 
 .s-button[data-density='compact'][data-size='xs']:not([data-icon-only='true']) {
-  height: var(--s-control-hitbox-xs);
-  min-height: var(--s-control-hitbox-xs);
+  block-size: var(--s-control-hitbox-2xs);
+  min-block-size: var(--s-control-hitbox-2xs);
   padding-block: 0;
 }
 
 .s-button[data-size='sm']:not([data-icon-only='true']) {
-  min-height: var(--s-control-hitbox-sm);
-  padding: 0.375rem 0.625rem;
+  block-size: var(--s-control-hitbox-sm);
+  min-block-size: var(--s-control-hitbox-sm);
+  padding: 0 0.625rem;
   font-size: 0.75rem;
 }
 
@@ -57,14 +59,16 @@
 }
 
 .s-button[data-size='md']:not([data-icon-only='true']) {
-  min-height: var(--s-control-hitbox-md);
-  padding: 0.625rem 1.25rem;
+  block-size: var(--s-control-hitbox-md);
+  min-block-size: var(--s-control-hitbox-md);
+  padding: 0 1.25rem;
   font-size: 0.875rem;
 }
 
 .s-button[data-size='lg']:not([data-icon-only='true']) {
-  min-height: var(--s-control-hitbox-lg);
-  padding: 0.875rem 1.75rem;
+  block-size: var(--s-control-hitbox-lg);
+  min-block-size: var(--s-control-hitbox-lg);
+  padding: 0 1.75rem;
   font-size: 1.125rem;
 }