@pgcorp/ui-kit 0.9.0 → 0.10.0

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.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="closeDrawer"
@@ -32,6 +32,7 @@
 
 <script setup lang="ts">
 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'
@@ -63,14 +64,16 @@ const props = withDefaults(defineProps<Props>(), {
   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',

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

package/src/components/shared/controls/SCombobox.vue

@@ -6,7 +6,7 @@
       :id="inputId"
       :model-value="validatedSearch"
       :label="label"
-      :placeholder="placeholder"
+      :placeholder="contract.placeholder"
       :disabled="disabled"
       :readonly="readonly"
       :required="required"
@@ -39,7 +39,7 @@
         :disabled="disabled"
         :readonly="readonly"
         :invalid="invalid"
-        :empty-label="emptyLabel"
+        :empty-label="contract.emptyLabel"
         focus-mode="activedescendant"
         :active-value="activeValue"
         @update:model-value="onListboxUpdate"
@@ -95,6 +95,7 @@ type ComponentProps<TKey extends PublicSelectionKey> = SharedProps<TKey> & {
 
 <script setup lang="ts" generic="TKey extends SelectionKey = string">
 import { computed, nextTick, onBeforeUnmount, shallowRef, useId, watch } from 'vue'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import { useFloatingPosition } from '../../../composables/useFloatingPosition'
 import { registerLayer, type LayerRegistration } from '../../../internal/layerStack'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
@@ -121,18 +122,19 @@ defineOptions({ inheritAttrs: false })
 const props = withDefaults(defineProps<ComponentProps<TKey>>(), {
   filterMode: 'local',
   label: undefined,
-  placeholder: 'Начните вводить для поиска',
+  placeholder: undefined,
   disabled: false,
   readonly: false,
   required: false,
   invalid: false,
   errorMessage: undefined,
   helpText: undefined,
-  emptyLabel: 'Нет доступных вариантов',
+  emptyLabel: undefined,
   id: undefined,
   size: 'md',
   allowCustomValue: false,
 })
+const { t } = useUiKitLocale()
 const emit = defineEmits<{
   'update:modelValue': [value: TKey | null]
   'update:search': [value: string]
@@ -162,12 +164,12 @@ const contract = computed(() => ({
   filterMode: validateExactString(
     'SCombobox', 'filterMode', props.filterMode, ['local', 'manual'] as const,
   ),
-  placeholder: validateNonEmptyString('SCombobox', 'placeholder', props.placeholder),
+  placeholder: validateNonEmptyString('SCombobox', 'placeholder', props.placeholder ?? t('forms.searchPlaceholder')),
   disabled: validateBoolean('SCombobox', 'disabled', props.disabled),
   readonly: validateBoolean('SCombobox', 'readonly', props.readonly),
   required: validateBoolean('SCombobox', 'required', props.required),
   invalid: validateBoolean('SCombobox', 'invalid', props.invalid),
-  emptyLabel: validateNonEmptyString('SCombobox', 'emptyLabel', props.emptyLabel),
+  emptyLabel: validateNonEmptyString('SCombobox', 'emptyLabel', props.emptyLabel ?? t('forms.noOptions')),
   size: validateExactString('SCombobox', 'size', props.size, ['sm', 'md', 'lg'] as const),
   allowCustomValue: validateBoolean('SCombobox', 'allowCustomValue', props.allowCustomValue),
   label: validateOptionalSelectionString('SCombobox', 'label', props.label),

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

@@ -6,10 +6,13 @@
 
 .s-combobox-trigger[data-width='full'] { @apply w-full; }
 .s-combobox-trigger[data-width='auto'] { @apply w-auto; }
-.s-combobox-trigger[data-size='xs'] { min-height: var(--s-control-hitbox-xs); @apply px-2 text-xs; }
-.s-combobox-trigger[data-size='sm'] { min-height: var(--s-control-hitbox-sm); @apply px-2.5 text-xs; }
-.s-combobox-trigger[data-size='md'] { min-height: var(--s-control-hitbox-md); @apply text-sm; }
-.s-combobox-trigger[data-appearance='swatch'] { width: var(--s-control-hitbox-md); @apply justify-center rounded-full border border-transparent bg-transparent p-1; box-shadow: none; }
+.s-combobox-trigger[data-size='xs'] { block-size: var(--s-control-hitbox-xs); @apply px-2 text-xs; }
+.s-combobox-trigger[data-size='sm'] { block-size: var(--s-control-hitbox-sm); @apply px-2.5 text-xs; }
+.s-combobox-trigger[data-size='md'] { block-size: var(--s-control-hitbox-md); @apply text-sm; }
+.s-combobox-trigger[data-appearance='swatch'] { @apply justify-center rounded-full border border-transparent bg-transparent p-1; box-shadow: none; }
+.s-combobox-trigger[data-appearance='swatch'][data-size='xs'] { inline-size: var(--s-control-hitbox-xs); }
+.s-combobox-trigger[data-appearance='swatch'][data-size='sm'] { inline-size: var(--s-control-hitbox-sm); }
+.s-combobox-trigger[data-appearance='swatch'][data-size='md'] { inline-size: var(--s-control-hitbox-md); }
 .s-combobox-trigger[data-appearance='swatch']:disabled { @apply cursor-not-allowed opacity-50; }
 
 .s-combobox-trigger__value {

package/src/components/shared/controls/SComboboxTrigger.vue

@@ -29,7 +29,7 @@
   >
     <SMarker v-if="marker" :marker="marker" :size="appearance === 'swatch' ? 'lg' : 'sm'" />
     <span v-if="appearance === 'field'" class="s-combobox-trigger__value">
-      {{ displayValue || placeholder }}
+      {{ displayValue || resolvedPlaceholder }}
     </span>
     <span class="s-combobox-trigger__caret" aria-hidden="true">
       <ChevronsUpDown v-if="appearance === 'field'" />
@@ -40,6 +40,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import { ChevronDown, ChevronsUpDown } from '../../icons/sputnigUiIcons'
 import type { InteractiveElementApi } from '../../../internal/interactiveElement'
 import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
@@ -76,7 +77,7 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<Props>(), {
   displayValue: undefined,
-  placeholder: 'Выберите значение',
+  placeholder: undefined,
   marker: undefined,
   appearance: 'field',
   size: 'md',
@@ -92,6 +93,8 @@ const props = withDefaults(defineProps<Props>(), {
   taskMappingInternalValue: undefined,
   taskMappingKind: undefined,
 })
+const { t } = useUiKitLocale()
+const resolvedPlaceholder = computed(() => props.placeholder ?? t('forms.selectPlaceholder'))
 
 const emit = defineEmits<{
   toggle: [event: MouseEvent | KeyboardEvent]

package/src/components/shared/controls/SContextToggleButton.vue

@@ -17,6 +17,7 @@
 
 <script setup lang="ts">
 import { computed, type Component } from 'vue'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import { Minus, MinusCircle, PlusCircle } from '../../icons/sputnigUiIcons'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { validateNonEmptyString } from '../../../internal/runtimeContract'
@@ -36,11 +37,12 @@ export interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   partial: false,
-  addTitle: 'Добавить в контекст',
-  removeTitle: 'Убрать из контекста',
+  addTitle: undefined,
+  removeTitle: undefined,
   size: 'sm',
   loading: false,
 })
+const { t } = useUiKitLocale()
 
 const emit = defineEmits<{
   (e: 'click'): void
@@ -48,8 +50,8 @@ const emit = defineEmits<{
 const ownedAttrs = useOwnedAttrs({ component: 'SContextToggleButton', owner: 'toggle button' })
 
 const accessibleLabels = computed(() => ({
-  add: validateNonEmptyString('SContextToggleButton', 'addTitle', props.addTitle),
-  remove: validateNonEmptyString('SContextToggleButton', 'removeTitle', props.removeTitle),
+  add: validateNonEmptyString('SContextToggleButton', 'addTitle', props.addTitle ?? t('forms.addToContext')),
+  remove: validateNonEmptyString('SContextToggleButton', 'removeTitle', props.removeTitle ?? t('forms.removeFromContext')),
 }))
 const accessibleTitle = computed(() => (
   props.inContext ? accessibleLabels.value.remove : accessibleLabels.value.add

package/src/components/shared/controls/SDragHandle.vue

@@ -1,7 +1,7 @@
 <template>
   <SButton
     v-bind="ownedAttrs.bindings()"
-    size="sm"
+    :size="size"
     severity="secondary"
     appearance="ghost"
     icon-only
@@ -22,20 +22,23 @@
 <script setup lang="ts">
 import { computed, ref, watchEffect } from 'vue'
 import { getSputnigUiIconComponent } from '../../icons/sputnigUiIcons'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { validateNonEmptyString } from '../../../internal/runtimeContract'
-import SButton from './SButton.vue'
+import SButton, { type SButtonSize } from './SButton.vue'
 
 defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<{
   label: string
   orientation?: 'vertical' | 'horizontal'
+  size?: SButtonSize
   canMovePrevious?: boolean
   canMoveNext?: boolean
   disabled?: boolean
 }>(), {
   orientation: 'vertical',
+  size: 'sm',
   canMovePrevious: false,
   canMoveNext: false,
   disabled: false,
@@ -49,14 +52,15 @@ const emit = defineEmits<{
 
 const DragIcon = getSputnigUiIconComponent('drag')
 const ownedAttrs = useOwnedAttrs({ component: 'SDragHandle', owner: 'drag handle command' })
+const { t } = useUiKitLocale()
 const keyboardActive = ref(false)
 const validatedLabel = computed(() => validateNonEmptyString('SDragHandle', 'label', props.label))
 const keyboardShortcuts = computed(() => props.orientation === 'vertical'
   ? 'Enter Space ArrowUp ArrowDown Escape'
   : 'Enter Space ArrowLeft ArrowRight Escape')
 const accessibleLabel = computed(() => keyboardActive.value
-  ? `Перемещение: ${validatedLabel.value}. Используйте стрелки, Enter — завершить, Escape — отменить`
-  : `Переместить: ${validatedLabel.value}. Нажмите Enter и используйте стрелки`)
+  ? t('layout.dragActive', { label: validatedLabel.value })
+  : t('layout.dragIdle', { label: validatedLabel.value }))
 
 function setKeyboardActive(active: boolean): void {
   if (keyboardActive.value === active) return

package/src/components/shared/controls/SDropdownMenu.vue

@@ -13,14 +13,14 @@
         v-if="isOpen"
         ref="layerRef"
         kind="dropdown"
-        :landmark-label="menuLabel"
+        :landmark-label="resolvedMenuLabel"
         :position="position"
         :z-index="zIndex"
       >
         <SMenuSurface
           ref="menuSurfaceRef"
           :id="menuId"
-          :label="menuLabel"
+          :label="resolvedMenuLabel"
           density="compact"
           autofocus
           :initial-focus="initialFocus"
@@ -48,6 +48,7 @@ import {
   type VNodeRef,
 } from 'vue'
 import { useOwnedAttrs, type OwnedAttributeBindings } from '../../../internal/ownedAttrs'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import { useMenuLayer } from '../../../internal/useMenuLayer'
 import SMenuLayer from '../_internal/SMenuLayer.vue'
 import type { SMenuLayerApi } from '../_internal/SMenuLayer.vue'
@@ -63,8 +64,10 @@ const props = withDefaults(defineProps<{
   menuLabel?: string
 }>(), {
   align: 'right',
-  menuLabel: 'Дополнительные действия',
+  menuLabel: undefined,
 })
+const { t } = useUiKitLocale()
+const resolvedMenuLabel = computed(() => props.menuLabel ?? t('dialog.moreActions'))
 const emit = defineEmits<{
   select: [entry: SMenuSelectableEntry, event: SMenuActivationEvent]
 }>()
@@ -180,7 +183,7 @@ function select(item: SMenuSelectableEntry, event: SMenuActivationEvent): void {
 
 watchEffect(() => {
   validateSMenuEntries(props.items)
-  if (!props.menuLabel.trim()) throw new TypeError('SDropdownMenu: menuLabel must be a non-empty string')
+  if (!resolvedMenuLabel.value.trim()) throw new TypeError('SDropdownMenu: menuLabel must be a non-empty string')
   if (props.align !== 'left' && props.align !== 'right') throw new TypeError("SDropdownMenu: align must be 'left' or 'right'")
 })
 </script>

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

@@ -11,16 +11,17 @@
   @apply block w-full min-w-0 box-border;
 }
 
-.s-input-text[data-size='sm'] { @apply px-2.5 py-1.5 text-xs; }
-.s-input-text[data-size='md'] { @apply px-3 py-2 text-sm; }
-.s-input-text[data-size='lg'] { @apply px-4 py-2.5 text-lg; }
+.s-input-text[data-size='sm'] { block-size: var(--s-control-hitbox-sm); @apply px-2.5 py-0 text-xs; }
+.s-input-text[data-size='md'] { block-size: var(--s-control-hitbox-md); @apply px-3 py-0 text-sm; }
+.s-input-text[data-size='lg'] { block-size: var(--s-control-hitbox-lg); @apply px-4 py-0 text-lg; }
 
 .s-input-text--monospace {
   @apply font-mono;
 }
 
 .s-input-text[data-appearance='grid-cell'] {
-  @apply h-8 rounded-none border-transparent bg-transparent px-2 py-1 text-sm shadow-none;
+  block-size: var(--s-density-row-compact);
+  @apply rounded-none border-transparent bg-transparent px-2 py-0 text-sm shadow-none;
 }
 
 .s-input-text[data-appearance='workbench-title'] {

package/src/components/shared/controls/SListbox.vue

@@ -140,6 +140,7 @@ type ComponentProps<TKey extends PublicSelectionKey> = SharedProps<TKey> & (
 
 <script setup lang="ts" generic="TKey extends SelectionKey = string">
 import { computed, onBeforeUnmount, provide, useId } from 'vue'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
 import {
@@ -168,12 +169,13 @@ const props = withDefaults(defineProps<ComponentProps<TKey>>(), {
   readonly: false,
   invalid: false,
   variant: 'select',
-  emptyLabel: 'Нет доступных вариантов',
+  emptyLabel: undefined,
   clearOptionLabel: undefined,
   id: undefined,
   focusMode: 'roving',
   activeValue: undefined,
 })
+const { t } = useUiKitLocale()
 const emit = defineEmits<{
   'update:modelValue': [value: TKey | null] | [value: readonly TKey[]]
   'update:activeValue': [value: TKey | null]
@@ -200,7 +202,7 @@ const contract = computed(() => {
       ? `s-listbox-${generatedId}`
       : validateDomId('SListbox', 'id', props.id),
     label: validateNonEmptyString('SListbox', 'label', props.label),
-    emptyLabel: validateNonEmptyString('SListbox', 'emptyLabel', props.emptyLabel),
+    emptyLabel: validateNonEmptyString('SListbox', 'emptyLabel', props.emptyLabel ?? t('forms.noOptions')),
     variant: validateExactString(
       'SListbox', 'variant', props.variant, ['select', 'color'] as const,
     ),

package/src/components/shared/controls/SSelect.vue

@@ -105,6 +105,7 @@ type ComponentProps<TKey extends PublicSelectionKey> = SharedProps<TKey> & (
 
 <script setup lang="ts" generic="TKey extends SelectionKey = string">
 import { computed, nextTick, onBeforeUnmount, ref, useId } from 'vue'
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
 import { useFloatingPosition } from '../../../composables/useFloatingPosition'
 import type { FloatingPlacement } from '../../../composables/useFloatingPosition'
 import { findRelativeTabTarget } from '../../../internal/focusNavigation'
@@ -135,7 +136,7 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<ComponentProps<TKey>>(), {
   label: undefined,
-  placeholder: 'Выберите значение',
+  placeholder: undefined,
   disabled: false,
   readonly: false,
   required: false,
@@ -151,6 +152,7 @@ const props = withDefaults(defineProps<ComponentProps<TKey>>(), {
   title: undefined,
   selectionMode: undefined,
 })
+const { t } = useUiKitLocale()
 const emit = defineEmits<{
   'update:modelValue': [value: TKey | null] | [value: readonly TKey[]]
 }>()
@@ -176,7 +178,7 @@ const contract = computed(() => {
     label: props.label === undefined
       ? undefined
       : validateNonEmptyString('SSelect', 'label', props.label),
-    placeholder: validateNonEmptyString('SSelect', 'placeholder', props.placeholder),
+    placeholder: validateNonEmptyString('SSelect', 'placeholder', props.placeholder ?? t('forms.selectPlaceholder')),
     disabled: validateBoolean('SSelect', 'disabled', props.disabled),
     readonly: validateBoolean('SSelect', 'readonly', props.readonly),
     required: validateBoolean('SSelect', 'required', props.required),