@pgcorp/ui-kit 0.2.0 → 0.3.0

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

@@ -0,0 +1,48 @@
+@reference "../../../styles/reference.css";
+
+.s-switch-control {
+  @apply relative inline-flex shrink-0 items-center;
+  width: 2.5rem;
+  height: 1.5rem;
+}
+
+.s-switch-input {
+  @apply absolute inset-0 z-10 m-0 cursor-pointer opacity-0;
+}
+
+.s-switch-track {
+  @apply flex h-5 w-9 items-center rounded-full border border-surface-300 bg-surface-200 p-0.5 transition-colors;
+  @apply dark:border-surface-600 dark:bg-surface-700;
+  transition-duration: var(--s-motion-standard);
+}
+
+.s-switch-thumb {
+  @apply block h-3.5 w-3.5 rounded-full bg-surface-0 shadow-sm transition-transform;
+  @apply dark:bg-surface-100;
+  transition-duration: var(--s-motion-standard);
+}
+
+.s-switch-input:checked + .s-switch-track {
+  @apply border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400;
+}
+
+.s-switch-input:checked + .s-switch-track > .s-switch-thumb {
+  transform: translateX(1rem);
+}
+
+.s-switch-input:not(:disabled):hover + .s-switch-track {
+  @apply border-primary-500 dark:border-primary-400;
+}
+
+.s-switch-input:focus-visible + .s-switch-track {
+  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-strong-color);
+  outline-offset: var(--s-focus-ring-offset);
+}
+
+.s-switch-input:disabled {
+  @apply cursor-not-allowed;
+}
+
+.s-switch-input:disabled + .s-switch-track {
+  @apply border-surface-200 bg-surface-100 opacity-70 dark:border-surface-700 dark:bg-surface-800;
+}

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

@@ -0,0 +1,109 @@
+<template>
+  <SField
+    :control-id="inputId"
+    :label="label"
+    :required="required"
+    :help-text="helpText"
+    :error-message="errorMessage"
+    :invalid="invalid"
+    :disabled="disabled"
+    :readonly="readonly"
+    layout="inline"
+  >
+    <template #default="field">
+      <span class="s-switch-control">
+        <input
+          v-bind="ownedAttrs.bindings()"
+          :id="field.controlId"
+          type="checkbox"
+          role="switch"
+          class="s-switch-input"
+          :checked="checkedValue"
+          :disabled="field.disabled"
+          :required="field.required"
+          :aria-checked="checkedValue"
+          :aria-invalid="field.invalid || undefined"
+          :aria-readonly="field.readonly || undefined"
+          :aria-describedby="mergeIdReferences(ownedAttrs.string('aria-describedby'), field.describedBy)"
+          @click.stop="onClick"
+          @change="onChange"
+        />
+        <span class="s-switch-track" aria-hidden="true">
+          <span class="s-switch-thumb" />
+        </span>
+      </span>
+    </template>
+  </SField>
+</template>
+
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+import { mergeIdReferences, useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
+import { resolveOptionalDomId } from '../../../internal/runtimeContract'
+import SField from './SField.vue'
+
+defineOptions({ inheritAttrs: false })
+
+export interface Props {
+  modelValue: boolean
+  label?: string
+  disabled?: boolean
+  readonly?: boolean
+  required?: boolean
+  invalid?: boolean
+  helpText?: string
+  errorMessage?: string
+  id?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: undefined,
+  disabled: false,
+  readonly: false,
+  required: false,
+  invalid: false,
+  helpText: undefined,
+  errorMessage: undefined,
+  id: undefined,
+})
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  click: [event: MouseEvent]
+}>()
+const ownedAttrs = useOwnedAttrs({ component: 'SSwitch', owner: 'native switch input' })
+useInteractiveLeafRegistration({ owner: 'SSwitch' })
+
+const generatedInputId = useId()
+const inputId = computed(() => resolveOptionalDomId(
+  'SSwitch',
+  'id',
+  props.id,
+  `s-switch-${generatedInputId}`,
+))
+const checkedValue = computed(() => {
+  if (typeof props.modelValue !== 'boolean') {
+    throw new TypeError('SSwitch: modelValue must be boolean')
+  }
+  return props.modelValue
+})
+
+function onChange(event: Event): void {
+  if (props.readonly) return
+  const target = event.currentTarget
+  if (!(target instanceof HTMLInputElement)) {
+    throw new TypeError('SSwitch: change event owner must be the native switch input')
+  }
+  emit('update:modelValue', target.checked)
+}
+
+function onClick(event: MouseEvent): void {
+  if (props.readonly) {
+    event.preventDefault()
+    return
+  }
+  emit('click', event)
+}
+</script>
+
+<style lang="postcss" src="./SSwitch.css" scoped></style>

package/src/components/shared/controls/_internal/SInlineTokenSurface.vue

@@ -4,6 +4,7 @@ import {
   createTextVNode,
   defineComponent,
   h,
+  type Component,
   type ComponentPublicInstance,
   type PropType,
 } from 'vue'
@@ -14,7 +15,9 @@ import type { InlineTokenEditorSegmentContract } from '../../../../internal/inli
 import type { OwnedAttributeBindings } from '../../../../internal/ownedAttrs'
 import { useInteractiveLeafRegistration } from '../../../../internal/passiveContentContract'
 import { validateBoundedInteger } from '../../../../internal/runtimeContract'
-import SButton, { type Props as SButtonProps } from '../SButton.vue'
+import SButton, { type SButtonActionProps } from '../SButton.vue'
+
+const actionButtonComponent: Component = SButton
 
 /** Текст визуального caret helper. / Visual caret-helper text. */
 export const INLINE_TOKEN_EDITOR_VISUAL_CARET_TEXT = '\u200B'
@@ -35,7 +38,7 @@ export type InlineTokenElementRef = (
   refs: Record<string, unknown>,
 ) => void
 
-interface InlineTokenActionButtonBindings extends SButtonProps {
+interface InlineTokenActionButtonBindings extends SButtonActionProps {
   readonly 'aria-label': string
   readonly title?: string
   readonly onClick: (event: MouseEvent) => void
@@ -161,7 +164,7 @@ export default defineComponent({
             onClick: (event) => emitTokenAction(event, action, segment),
             onKeydown: stopKeyPropagation,
           }
-      return h(SButton, { ...bindings, key: action })
+      return h(actionButtonComponent, { ...bindings, key: action })
     }
 
     return () => h('div', {

package/src/components/shared/data-display/SChip.css

@@ -0,0 +1,59 @@
+@reference "../../../styles/reference.css";
+
+.s-chip {
+  @apply inline-flex min-w-0 items-center rounded-full font-medium;
+}
+
+.s-chip[data-size='md'] {
+  @apply min-h-7 gap-1.5 px-2.5 text-xs;
+}
+
+.s-chip[data-size='md'][data-closable='true'] {
+  @apply pr-1;
+}
+
+.s-chip[data-size='sm'] {
+  @apply min-h-6 gap-1 px-2 text-[11px] leading-4;
+}
+
+.s-chip[data-size='sm'][data-closable='true'] {
+  @apply pr-0.5;
+}
+
+.s-chip__icon {
+  @apply inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center;
+}
+
+.s-chip__icon-graphic {
+  @apply h-full w-full;
+}
+
+.s-chip__label {
+  @apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap;
+}
+
+.s-chip[data-disabled='true'] {
+  @apply opacity-60;
+}
+
+.s-chip[data-severity='primary'] {
+  @apply bg-primary-100 text-primary-800 dark:bg-primary-950 dark:text-primary-50;
+}
+.s-chip[data-severity='secondary'] {
+  @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-50;
+}
+.s-chip[data-severity='success'] {
+  @apply bg-success-100 text-success-800 dark:bg-success-950 dark:text-success-50;
+}
+.s-chip[data-severity='info'] {
+  @apply bg-info-100 text-info-800 dark:bg-info-950 dark:text-info-50;
+}
+.s-chip[data-severity='warn'] {
+  @apply bg-warn-100 text-warn-800 dark:bg-warn-950 dark:text-warn-50;
+}
+.s-chip[data-severity='danger'] {
+  @apply bg-danger-100 text-danger-800 dark:bg-danger-950 dark:text-danger-50;
+}
+.s-chip[data-severity='contrast'] {
+  @apply bg-surface-800 text-surface-100 dark:bg-surface-200 dark:text-surface-800;
+}

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

@@ -0,0 +1,92 @@
+<template>
+  <span
+    v-bind="ownedAttrs.bindings()"
+    class="s-chip"
+    :data-severity="validatedSeverity"
+    :data-size="validatedSize"
+    :data-closable="closable || undefined"
+    :data-disabled="disabled || undefined"
+  >
+    <span v-if="leadingIcon" class="s-chip__icon" aria-hidden="true">
+      <component :is="leadingIcon" class="s-chip__icon-graphic" />
+    </span>
+    <span class="s-chip__label">{{ validatedLabel }}</span>
+    <SButton
+      v-if="closable"
+      label=""
+      appearance="ghost"
+      severity="secondary"
+      size="xs"
+      density="compact"
+      spacing="tight"
+      shape="circle"
+      icon-only
+      :leading-icon="X"
+      :disabled="disabled"
+      :aria-label="resolvedCloseLabel"
+      :title="resolvedCloseLabel"
+      @click.stop="emit('close', $event)"
+    />
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed, type Component } from 'vue'
+import { X } from '../../icons/sputnigUiIcons'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import {
+  validateBoolean,
+  validateExactString,
+  validateNonEmptyString,
+} from '../../../internal/runtimeContract'
+import SButton from '../controls/SButton.vue'
+import type { BadgeSeverity } from './SBadge.vue'
+
+defineOptions({ inheritAttrs: false })
+
+export type SChipSeverity = BadgeSeverity
+export type SChipSize = 'sm' | 'md'
+
+export interface Props {
+  label: string
+  severity?: SChipSeverity
+  size?: SChipSize
+  leadingIcon?: Component
+  closable?: boolean
+  closeLabel?: string
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  severity: 'secondary',
+  size: 'md',
+  leadingIcon: undefined,
+  closable: false,
+  closeLabel: undefined,
+  disabled: false,
+})
+const emit = defineEmits<{
+  close: [event: MouseEvent]
+}>()
+const ownedAttrs = useOwnedAttrs({ component: 'SChip', owner: 'chip root' })
+
+const validatedLabel = computed(() => validateNonEmptyString('SChip', 'label', props.label))
+const validatedSeverity = computed(() => validateExactString(
+  'SChip',
+  'severity',
+  props.severity,
+  ['primary', 'secondary', 'success', 'info', 'warn', 'danger', 'contrast'] as const,
+))
+const validatedSize = computed(() => validateExactString(
+  'SChip', 'size', props.size, ['sm', 'md'] as const,
+))
+const resolvedCloseLabel = computed(() => {
+  validateBoolean('SChip', 'closable', props.closable)
+  validateBoolean('SChip', 'disabled', props.disabled)
+  return props.closeLabel === undefined
+    ? `Удалить «${validatedLabel.value}»`
+    : validateNonEmptyString('SChip', 'closeLabel', props.closeLabel)
+})
+</script>
+
+<style lang="postcss" src="./SChip.css" scoped></style>

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

@@ -23,10 +23,30 @@
             :data-width="column.width"
             :data-min-width="column.minWidth"
             :data-align="column.align ?? 'left'"
+            :data-sortable="column.sortable || undefined"
+            :aria-sort="columnAriaSort(column)"
           >
-            <slot name="column" :column="column">
-              <slot :name="`header-${column.field}`" :column="column">{{ column.header }}</slot>
-            </slot>
+            <SButton
+              v-if="column.sortable"
+              :aria-label="sortActionLabel(column)"
+              appearance="text"
+              severity="secondary"
+              size="xs"
+              density="compact"
+              width="full"
+              :content-align="column.align === 'right' ? 'end' : column.align === 'center' ? 'center' : 'start'"
+              :trailing-icon="sortIcon(column)"
+              @click="requestSort(column)"
+            >
+              <slot name="column" :column="column">
+                <slot :name="`header-${column.field}`" :column="column">{{ column.header }}</slot>
+              </slot>
+            </SButton>
+            <template v-else>
+              <slot name="column" :column="column">
+                <slot :name="`header-${column.field}`" :column="column">{{ column.header }}</slot>
+              </slot>
+            </template>
           </th>
         </tr>
       </thead>
@@ -47,6 +67,10 @@
             :key="resolvedRowKeys.get(row)"
             :data-state="resolveRowState(row)"
             :aria-selected="resolvedRowKeys.get(row) === validatedSelectedRowKey ? 'true' : undefined"
+            tabindex="0"
+            @click="onRowClick($event, row, rowIndex)"
+            @keydown.enter="onRowKeydown($event, row, rowIndex)"
+            @keydown.space.prevent="onRowKeydown($event, row, rowIndex)"
           >
             <td
               v-for="column in validatedColumns"
@@ -90,13 +114,17 @@ export type {
   STableProps,
   STableRowKey,
   STableRowState,
+  STableSort,
+  STableSortDirection,
   STableSurface,
 } from './table'
 </script>
 
 <script setup lang="ts" generic="Row extends object = Record<string, unknown>, RowKey extends STableRowKey = STableRowKey, Field extends string = Extract<keyof Row, string>">
 import { computed, useSlots } from 'vue'
+import { ChevronDown, ChevronsUpDown, ChevronUp } from '../../icons/sputnigUiIcons'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
 import {
   validateScrollableViewportMaxBlockSize,
   validateTableColumnInlineSize,
@@ -109,6 +137,7 @@ import {
   validateNonEmptyString,
 } from '../../../internal/runtimeContract'
 import SAsyncState from '../feedback/SAsyncState.vue'
+import SButton from '../controls/SButton.vue'
 import type {
   STableCellState,
   STableColumn,
@@ -116,6 +145,7 @@ import type {
   STableProps,
   STableRowKey,
   STableRowState,
+  STableSort,
 } from './table'
 
 defineOptions({ inheritAttrs: false })
@@ -126,6 +156,7 @@ const props = withDefaults(defineProps<STableProps<Row, RowKey, Field>>(), {
   errorMessage: '',
   emptyMessage: 'Нет данных для отображения',
   selectedRowKey: undefined,
+  sort: null,
   maxHeight: 'none',
   density: 'default',
   surface: 'bordered',
@@ -136,6 +167,11 @@ const props = withDefaults(defineProps<STableProps<Row, RowKey, Field>>(), {
   ariaLabelledby: undefined,
   ariaDescribedby: undefined,
 })
+const emit = defineEmits<{
+  'row-click': [row: Row, index: number]
+  'update:sort': [value: STableSort<Field> | null]
+  sort: [value: STableSort<Field> | null]
+}>()
 const slots = useSlots()
 
 const TABLE_DENSITIES = ['default', 'compact'] as const
@@ -147,6 +183,22 @@ const TABLE_CELL_STATES = ['default', 'pending'] as const
 const TABLE_COLUMN_CONTENT = ['field', 'value', 'slot'] as const
 
 const ownedAttrs = useOwnedAttrs({ component: 'STable', owner: 'table scroll surface' })
+useInteractiveLeafRegistration({ owner: 'STable' })
+
+function eventBelongsToNestedControl(event: Event): boolean {
+  const owner = event.currentTarget
+  return event.composedPath().some((candidate) => candidate !== owner && candidate instanceof HTMLElement && (
+    candidate.matches('button, a, input, select, textarea, [role="button"], [role="link"]')
+  ))
+}
+
+function onRowClick(event: MouseEvent, row: Row, rowIndex: number): void {
+  if (!eventBelongsToNestedControl(event)) emit('row-click', row, rowIndex)
+}
+
+function onRowKeydown(event: KeyboardEvent, row: Row, rowIndex: number): void {
+  if (event.target === event.currentTarget) emit('row-click', row, rowIndex)
+}
 const validatedLoading = computed(() => validateBoolean('STable', 'loading', props.loading))
 const resolvedAccessibleName = computed(() => {
   if (props.ariaLabel !== undefined && props.ariaLabelledby !== undefined) {
@@ -207,6 +259,9 @@ const validatedColumns = computed<readonly STableColumn<Row, Field>[]>(() => {
     if (column.align !== undefined) {
       validateExactString('STable', `column ${JSON.stringify(field)}.align`, column.align, TABLE_ALIGNMENTS)
     }
+    if (column.sortable !== undefined) {
+      validateBoolean('STable', `column ${JSON.stringify(field)}.sortable`, column.sortable)
+    }
     if (column.width !== undefined) {
       validateTableColumnInlineSize('STable', `column ${JSON.stringify(field)}.width`, column.width)
     }
@@ -241,6 +296,54 @@ const validatedColumns = computed<readonly STableColumn<Row, Field>[]>(() => {
   return props.columns
 })
 
+const validatedSort = computed<STableSort<Field> | null>(() => {
+  if (props.sort === null || props.sort === undefined) return null
+  const key = validateNonEmptyString('STable', 'sort.key', props.sort.key) as Field
+  const column = validatedColumns.value.find((candidate) => candidate.field === key)
+  if (!column?.sortable) {
+    throw new TypeError(`STable: sort key ${JSON.stringify(key)} должен ссылаться на sortable column. / STable: sort key ${JSON.stringify(key)} must reference a sortable column.`)
+  }
+  return {
+    key,
+    direction: validateExactString(
+      'STable',
+      'sort.direction',
+      props.sort.direction,
+      ['ascending', 'descending'] as const,
+    ),
+  }
+})
+
+const columnAriaSort = (column: STableColumn<Row, Field>): 'none' | 'ascending' | 'descending' | undefined => {
+  if (!column.sortable) return undefined
+  return validatedSort.value?.key === column.field ? validatedSort.value.direction : 'none'
+}
+
+const sortIcon = (column: STableColumn<Row, Field>) => {
+  const direction = columnAriaSort(column)
+  return direction === 'ascending' ? ChevronUp : direction === 'descending' ? ChevronDown : ChevronsUpDown
+}
+
+const sortActionLabel = (column: STableColumn<Row, Field>): string => {
+  const direction = columnAriaSort(column)
+  if (direction === 'ascending') return `${column.header}: сортировать по убыванию`
+  if (direction === 'descending') return `${column.header}: сбросить сортировку`
+  return `${column.header}: сортировать по возрастанию`
+}
+
+function requestSort(column: STableColumn<Row, Field>): void {
+  if (!column.sortable) return
+  const current = validatedSort.value
+  const key = column.field as Field
+  const next: STableSort<Field> | null = current?.key !== key
+    ? { key, direction: 'ascending' }
+    : current.direction === 'ascending'
+      ? { key, direction: 'descending' }
+      : null
+  emit('update:sort', next)
+  emit('sort', next)
+}
+
 function describeRowKey(key: STableRowKey): string {
   return typeof key === 'string' ? JSON.stringify(key) : String(key)
 }
@@ -283,6 +386,7 @@ const resolvedRowKeys = computed<ReadonlyMap<Row, RowKey>>(() => {
 
 const validatedRows = computed<readonly Row[]>(() => {
   const columns = validatedColumns.value
+  void validatedSort.value
   void resolvedRowKeys.value
   void validatedSelectedRowKey.value
   for (const row of props.data) {

package/src/components/shared/data-display/table.ts

@@ -12,6 +12,13 @@ export type STableSurface = 'bordered' | 'plain'
 export type STableMinWidth = 'content' | 'md' | 'lg'
 export type STableDensity = 'default' | 'compact'
 export type STableColumnContent = 'field' | 'value' | 'slot'
+export type STableSortDirection = 'ascending' | 'descending'
+
+/** Controlled sort state; consumer owns data ordering. / Управляемое состояние сортировки; порядок данных принадлежит consumer. */
+export interface STableSort<Field extends string = string> {
+  key: Field
+  direction: STableSortDirection
+}
 
 interface STableColumnBase<Field extends string> {
   field: Field
@@ -19,6 +26,7 @@ interface STableColumnBase<Field extends string> {
   width?: TableColumnInlineSize
   minWidth?: TableColumnMinInlineSize
   align?: STableAlignment
+  sortable?: boolean
 }
 
 type STableFieldColumn<Field extends string> = STableColumnBase<Field> & {
@@ -61,6 +69,7 @@ export interface STableProps<
   errorMessage?: string
   emptyMessage?: string
   selectedRowKey?: RowKey
+  sort?: STableSort<Field> | null
   maxHeight?: ScrollableViewportMaxBlockSize
   density?: STableDensity
   surface?: STableSurface

package/src/components/shared/navigation/SBottomNav.vue

@@ -270,6 +270,9 @@ const resolveOverflowTrigger = (item: BottomNavOverflowItem): HTMLButtonElement
     throw new Error(`SBottomNav: overflow trigger '${item.id}' is unavailable`);
   }
   const trigger = api.getElement();
+  if (!(trigger instanceof HTMLButtonElement)) {
+    throw new TypeError(`SBottomNav: overflow trigger '${item.id}' must be an action button`);
+  }
   const expectedId = overflowTriggerId(item);
   if (trigger.id !== expectedId) {
     throw new Error(

package/src/internal/ownedAttrs.ts

@@ -126,6 +126,13 @@ export const ownedAttributeSchemas = Object.freeze({
     onPointerdown: 'listener',
     tabindex: 'string-or-number',
   }),
+  SSwitch: defineOwnedAttributeSchema({
+    'aria-label': 'string',
+    'aria-describedby': 'string',
+    onClick: 'listener',
+    onPointerdown: 'listener',
+    tabindex: 'string-or-number',
+  }),
   SCheckboxGroup: defineOwnedAttributeSchema({
     'aria-describedby': 'string',
     'data-testid': 'data',
@@ -137,6 +144,10 @@ export const ownedAttributeSchemas = Object.freeze({
   SColorSelect: defineOwnedAttributeSchema({
     'aria-label': 'string',
   }),
+  SCombobox: defineOwnedAttributeSchema({
+    'aria-describedby': 'string',
+    'aria-label': 'string',
+  }),
   SDragHandle: defineOwnedAttributeSchema({
     'data-testid': 'data',
   }),
@@ -158,7 +169,12 @@ export const ownedAttributeSchemas = Object.freeze({
     title: 'string',
   }),
   SInputText: defineOwnedAttributeSchema({
+    'aria-activedescendant': 'string',
+    'aria-autocomplete': 'string',
+    'aria-controls': 'string',
     'aria-describedby': 'string',
+    'aria-expanded': 'aria-boolean',
+    'aria-haspopup': 'aria-haspopup',
     'aria-invalid': 'aria-boolean',
     'aria-label': 'string',
     'data-testid': 'data',
@@ -168,10 +184,12 @@ export const ownedAttributeSchemas = Object.freeze({
     max: 'string-or-number',
     min: 'string-or-number',
     onBlur: 'listener',
+    onClick: 'listener',
     onFocus: 'listener',
     onKeydown: 'listener',
     onKeyup: 'listener',
     pattern: 'string',
+    role: 'string',
     step: 'string-or-number',
     title: 'string',
   }),
@@ -237,6 +255,10 @@ export const ownedAttributeSchemas = Object.freeze({
     'data-testid': 'data',
     title: 'string',
   }),
+  SChip: defineOwnedAttributeSchema({
+    'aria-label': 'string',
+    title: 'string',
+  }),
   SCodeBlock: defineOwnedAttributeSchema({
     'aria-label': 'string',
     'data-testid': 'data',
@@ -338,7 +360,7 @@ type OwnedAttributeValue<Name extends string, Kind extends OwnedAttributeValueKi
 
 export type OwnedAttributeBindings<Component extends OwnedAttributeComponent> = Readonly<Partial<{
   [Name in OwnedAttributeName<Component>]: OwnedAttributeValue<Name, OwnedAttributeKind<Component, Name>>
-}>>
+}> & Partial<Record<`data-${string}`, string | number | boolean>>>
 
 export interface OwnedAttrsOptions<Component extends OwnedAttributeComponent> {
   /** Имя public-компонента для диагностики контракта. / Public component name used in contract diagnostics. */
@@ -420,7 +442,7 @@ export function useOwnedAttrs<Component extends OwnedAttributeComponent>(
           `raw "${name}" запрещён; атрибут "${name}" не объявлен в exact owned-attrs schema; используйте типизированные props/tokens UI-kit или consumer layout wrapper. Raw "${name}" is forbidden and is not declared by the exact owned-attrs schema; use typed UI-kit props/tokens or a consumer layout wrapper`,
         )
       }
-      const kind = schema[name]
+      const kind = schema[name] ?? (name.startsWith('data-') && name.length > 5 ? 'data' : undefined)
       if (!kind) {
         throw attributeBoundaryError(
           options.component,