@pgcorp/ui-kit 0.5.0 → 0.7.0

package/README.md

@@ -159,6 +159,16 @@ Multi-column sorting uses controlled `v-model:sorts`: the consumer sets
 adds a descriptor, changes its direction, or removes it; the visible number is
 the priority. The table never reorders rows on its own.
 
+Последовательные действия заголовков формируют внутренний intent draft до
+подтверждения controlled prop. Consumer может применить `sort`/`sorts` через
+store или асинхронный render-cycle: второй критерий не теряет первый. Любое
+authoritative обновление prop становится новой базой следующих действий.
+
+Sequential header actions update an internal intent draft until the controlled
+prop is acknowledged. Consumers may apply `sort` or `sorts` through a store or
+an asynchronous render cycle without losing an earlier criterion. Any
+authoritative prop update becomes the base for subsequent actions.
+
 ```vue
 <STable
   v-model:sorts="sorts"
@@ -170,6 +180,31 @@ the priority. The table never reorders rows on its own.
 />
 ```
 
+### Подсказка на части действия / Tooltip for part of an action
+
+Обычный tooltip использует combined `trigger`. Для пассивного фрагмента внутри
+уже интерактивного leaf используйте split bindings: `focusOwner` остаётся на
+кнопке и владеет ARIA/focus, а `pointerTarget` получает пассивный
+`STooltipTarget`. Компонент target не создаёт `role` или `tabindex`.
+
+A regular tooltip uses the combined `trigger`. For a passive fragment inside an
+existing interactive leaf, use split bindings: `focusOwner` remains on the
+button and owns ARIA/focus, while `pointerTarget` is applied to a passive
+`STooltipTarget`. The target component adds neither a role nor a tab stop.
+
+```vue
+<STooltip text="Открывает палитру команд" v-slot="{ focusOwner, pointerTarget }">
+  <SButton v-bind="focusOwner" width="full" content-align="between">
+    Открыть палитру команд
+    <STooltipTarget
+      v-bind="pointerTarget"
+      as="kbd"
+      appearance="keycap"
+    >⌘K</STooltipTarget>
+  </SButton>
+</STooltip>
+```
+
 ## Темы и стили / Themes and styles
 
 Для обычного приложения подключайте полный style entrypoint один раз:
@@ -244,6 +279,10 @@ import { themeVariants } from '@pgcorp/ui-kit/theme'
   Do not style internal DOM through `:deep` or private selectors.
 - Выражайте состояние через documented props, slots, variants и tokens.
   Express state through documented props, slots, variants, and tokens.
+- Используйте собственные `data-*` как test/tour hooks; UI-kit-owned `data-s-*`
+  являются внутренней presentation boundary и не являются selector API.
+  Use consumer-owned `data-*` for test and tour hooks; UI-kit-owned `data-s-*`
+  are an internal presentation boundary, not a selector API.
 - Передавайте человекочитаемые labels интерактивным компонентам.
   Provide human-readable labels to interactive components.
 

package/docs/public-api.md

@@ -18,6 +18,9 @@
 
 Компонентный contract выражается через typed props, slots, events и exposed
 methods. Внутренний DOM, CSS-классы и private modules не являются API.
+UI-kit-owned атрибуты `data-s-*` относятся к внутренней presentation boundary и
+не являются стабильными consumer selectors. Произвольные consumer-owned
+`data-*` остаются поддерживаемыми test/tour hooks canonical owner.
 Публичные source-SFC объявляют runtime props и events локально: consumer Vue
 compiler регистрирует их без межфайлового filesystem type resolver.
 Публикуемый production-source компилируется с `target/lib: ES2020`, совпадающим
@@ -41,6 +44,9 @@ Primary groups:
 
 Component contracts are expressed through typed props, slots, events, and exposed
 methods. Internal DOM, CSS classes, and private modules are not API.
+UI-kit-owned `data-s-*` attributes belong to the internal presentation boundary
+and are not stable consumer selectors. Arbitrary consumer-owned `data-*`
+attributes remain supported test and tour hooks on the canonical owner.
 Public source SFCs declare runtime props and events locally, so the consumer Vue
 compiler registers them without a cross-file filesystem type resolver.
 Published production source compiles with the `target/lib: ES2020` baseline from

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pgcorp/ui-kit",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Typed Vue 3 design system with accessible components, semantic themes, and workbench patterns.",
   "type": "module",
   "types": "./index.ts",
@@ -348,6 +348,9 @@
       "shared/data-display/STooltipAnchor.vue": [
         "src/components/shared/data-display/STooltipAnchor.vue"
       ],
+      "shared/data-display/STooltipTarget.vue": [
+        "src/components/shared/data-display/STooltipTarget.vue"
+      ],
       "shared/data-display/SVirtualList": [
         "src/components/shared/data-display/SVirtualList.ts"
       ],
@@ -524,6 +527,7 @@
     "./shared/data-display/SToastContainer.vue": "./src/components/shared/data-display/SToastContainer.vue",
     "./shared/data-display/STooltip.vue": "./src/components/shared/data-display/STooltip.vue",
     "./shared/data-display/STooltipAnchor.vue": "./src/components/shared/data-display/STooltipAnchor.vue",
+    "./shared/data-display/STooltipTarget.vue": "./src/components/shared/data-display/STooltipTarget.vue",
     "./shared/data-display/SVirtualList": "./src/components/shared/data-display/SVirtualList.ts",
     "./shared/data-display/SVirtualList.vue": "./src/components/shared/data-display/SVirtualList.vue",
     "./shared/database/SDataGrid.vue": "./src/components/shared/database/SDataGrid.vue",

package/src/components/shared/_internal/SHeaderSurface.css

@@ -0,0 +1,98 @@
+@reference "../../../styles/reference.css";
+
+.s-page-header,
+.s-section-header {
+  @apply flex min-w-0 items-start justify-between;
+}
+
+.s-page-header {
+  @apply gap-4 border border-surface-200 bg-surface-0 p-5 shadow-sm;
+  @apply dark:border-surface-700 dark:bg-surface-900;
+  border-radius: var(--radius-sm);
+}
+
+.s-section-header { @apply flex-wrap gap-3; }
+
+.s-page-header[data-appearance='plain'] {
+  @apply border-x-0 border-t-0 bg-transparent px-0 pt-0 shadow-none dark:bg-transparent;
+  border-radius: 0;
+}
+
+.s-page-header[data-size='compact'] { @apply p-4; }
+.s-page-header[data-appearance='plain'][data-size='compact'] { @apply px-0 pt-0; }
+
+.s-page-header[data-appearance='bare'] {
+  @apply border-0 bg-transparent p-0 shadow-none dark:bg-transparent;
+  border-radius: 0;
+}
+
+.s-section-header[data-spacing-after='sm'] { @apply mb-2; }
+.s-section-header[data-spacing-after='md'] { @apply mb-3; }
+.s-section-header[data-divider='true'] { @apply border-b border-surface-200 pb-3 dark:border-surface-700; }
+.s-section-header[data-padding='sm'] { @apply p-2; }
+.s-section-header[data-padding='md'] { @apply p-4; }
+.s-section-header[data-divider='true'][data-padding='sm'] { @apply pb-2; }
+.s-section-header[data-divider='true'][data-padding='md'] { @apply pb-4; }
+
+.s-page-header__copy,
+.s-section-header__copy { @apply min-w-0; }
+.s-section-header__copy { @apply flex-1; }
+
+.s-page-header__eyebrow,
+.s-section-header__eyebrow { @apply text-xs uppercase text-surface-500 dark:text-surface-400; }
+.s-page-header__eyebrow { @apply font-medium; }
+.s-section-header__eyebrow { @apply font-semibold; }
+
+.s-page-header__title,
+.s-section-header__title { @apply m-0 font-semibold text-surface-900 dark:text-surface-50; }
+.s-page-header__title { @apply text-2xl leading-tight; }
+
+.s-page-header__title[data-presentation='assistive'] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.s-page-header[data-size='compact'] .s-page-header__title { @apply text-xl; }
+.s-section-header__title { @apply break-words text-base; }
+.s-section-header[data-size='sm'] .s-section-header__title { @apply text-sm; }
+.s-section-header[data-variant='display'] .s-section-header__title {
+  @apply text-xl font-semibold uppercase tracking-[0.22em] text-surface-700 dark:text-surface-200;
+}
+
+.s-page-header__eyebrow + .s-page-header__title,
+.s-section-header__eyebrow + .s-section-header__title { @apply mt-1; }
+
+.s-page-header__description,
+.s-section-header__description,
+.s-section-header__meta { @apply text-surface-500 dark:text-surface-400; }
+.s-page-header__description { @apply mt-2 max-w-4xl text-sm; }
+.s-section-header__description,
+.s-section-header__meta {
+  @apply mt-1 min-w-0 break-words text-xs;
+  overflow-wrap: anywhere;
+}
+
+.s-page-header__actions,
+.s-section-header__trailing,
+.s-section-header__badges,
+.s-section-header__actions { @apply flex min-w-0 flex-wrap items-center justify-end gap-2; }
+.s-page-header__actions { @apply shrink-0; }
+.s-page-header[data-actions-layout='stacked'] { @apply flex-col; }
+
+.s-page-header[data-actions-layout='stacked'] .s-page-header__actions,
+.s-section-header[data-trailing-layout='stacked'] .s-section-header__trailing,
+.s-section-header[data-trailing-layout='stacked'] .s-section-header__actions { @apply w-full justify-start; }
+
+@media (max-width: 639px) {
+  .s-page-header[data-actions-layout='responsive'] { @apply flex-col; }
+
+  .s-page-header[data-actions-layout='responsive'] .s-page-header__actions,
+  .s-section-header[data-trailing-layout='responsive'] .s-section-header__trailing,
+  .s-section-header[data-trailing-layout='responsive'] .s-section-header__actions { @apply w-full justify-start; }
+}

package/src/components/shared/_internal/SHeaderSurface.vue

@@ -0,0 +1,80 @@
+<template>
+  <header
+    :class="kind === 'page' ? 's-page-header' : 's-section-header'"
+    :data-kind="kind"
+    :data-actions-layout="kind === 'page' ? trailingLayout : undefined"
+    :data-trailing-layout="kind === 'section' ? trailingLayout : undefined"
+    :data-appearance="kind === 'page' ? appearance : undefined"
+    :data-size="size"
+    :data-variant="kind === 'section' ? variant : undefined"
+    :data-divider="kind === 'section' && divider ? 'true' : undefined"
+    :data-padding="kind === 'section' ? padding : undefined"
+    :data-spacing-after="kind === 'section' ? spacingAfter : undefined"
+  >
+    <div :class="kind === 'page' ? 's-page-header__copy' : 's-section-header__copy'">
+      <div
+        v-if="eyebrow"
+        :class="kind === 'page' ? 's-page-header__eyebrow' : 's-section-header__eyebrow'"
+      >{{ eyebrow }}</div>
+      <component
+        :is="`h${headingLevel}`"
+        :class="kind === 'page' ? 's-page-header__title' : 's-section-header__title'"
+        :data-presentation="titlePresentation"
+      >{{ title }}</component>
+      <p
+        v-if="description"
+        :class="kind === 'page' ? 's-page-header__description' : 's-section-header__description'"
+      >{{ description }}</p>
+      <p v-if="kind === 'section' && meta" class="s-section-header__meta">{{ meta }}</p>
+    </div>
+
+    <div v-if="hasTrailing" :class="kind === 'page' ? 's-page-header__actions' : 's-section-header__trailing'">
+      <template v-if="kind === 'page'">
+        <slot name="actions" />
+      </template>
+      <template v-else>
+        <div v-if="$slots.badges" class="s-section-header__badges"><slot name="badges" /></div>
+        <div v-if="$slots.actions" class="s-section-header__actions"><slot name="actions" /></div>
+      </template>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+
+export interface Props {
+  kind: 'page' | 'section'
+  title: string
+  eyebrow?: string | null
+  description?: string | null
+  meta?: string | null
+  headingLevel: 1 | 2 | 3 | 4
+  titlePresentation?: 'visible' | 'assistive'
+  appearance?: 'bare' | 'plain' | 'panel'
+  size: 'compact' | 'default' | 'sm' | 'md'
+  variant?: 'default' | 'display'
+  divider?: boolean
+  padding?: 'none' | 'sm' | 'md'
+  spacingAfter?: 'none' | 'sm' | 'md'
+  trailingLayout: 'responsive' | 'inline' | 'stacked'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  eyebrow: undefined,
+  description: undefined,
+  meta: undefined,
+  titlePresentation: 'visible',
+  appearance: 'panel',
+  variant: 'default',
+  divider: false,
+  padding: 'none',
+  spacingAfter: 'none',
+})
+const slots = useSlots()
+const hasTrailing = computed(() => props.kind === 'page'
+  ? Boolean(slots.actions)
+  : Boolean(slots.badges || slots.actions))
+</script>
+
+<style lang="postcss" src="./SHeaderSurface.css" scoped></style>

package/src/components/shared/_internal/SToastItem.css

@@ -33,33 +33,33 @@
 }
 
 /* Severity: info */
-.s-toast[data-severity='info'] {
+.s-toast[data-s-tone='info'] {
   box-shadow: var(--s-toast-shadow-info);
 }
-.s-toast[data-severity='info'] .s-toast-icon {
+.s-toast[data-s-tone='info'] .s-toast-icon {
   @apply text-info-500;
 }
 
 /* Severity: success */
-.s-toast[data-severity='success'] {
+.s-toast[data-s-tone='success'] {
   box-shadow: var(--s-toast-shadow-success);
 }
-.s-toast[data-severity='success'] .s-toast-icon {
+.s-toast[data-s-tone='success'] .s-toast-icon {
   @apply text-success-500;
 }
 
 /* Severity: warn */
-.s-toast[data-severity='warn'] {
+.s-toast[data-s-tone='warn'] {
   box-shadow: var(--s-toast-shadow-warn);
 }
-.s-toast[data-severity='warn'] .s-toast-icon {
+.s-toast[data-s-tone='warn'] .s-toast-icon {
   @apply text-warn-500;
 }
 
 /* Severity: danger */
-.s-toast[data-severity='danger'] {
+.s-toast[data-s-tone='danger'] {
   box-shadow: var(--s-toast-shadow-danger);
 }
-.s-toast[data-severity='danger'] .s-toast-icon {
+.s-toast[data-s-tone='danger'] .s-toast-icon {
   @apply text-danger-500;
 }

package/src/components/shared/_internal/SToastItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div
+    :data-s-tone="toneBinding['data-s-tone']"
     class="s-toast"
-    :data-severity="notification.severity"
     :role="liveAttributes.role"
     :aria-live="liveAttributes.ariaLive"
     :aria-atomic="liveAttributes.ariaAtomic"
@@ -40,6 +40,7 @@ import { computed } from 'vue'
 
 import { X } from '../../icons/sputnigUiIcons'
 import { resolveFeedbackLive, resolveFeedbackPresentation } from '../../../internal/feedbackPresentation'
+import { resolveSemanticToneBinding } from '../../../internal/semanticTone'
 import type { Notification } from '../../../stores/useNotifierStore';
 import SButton from '../controls/SButton.vue'
 
@@ -53,6 +54,12 @@ const emit = defineEmits<{
   dismiss: [id: string]
 }>()
 const presentation = computed(() => resolveFeedbackPresentation(props.notification.severity))
+const toneBinding = computed(() => resolveSemanticToneBinding(
+  'SToastItem',
+  'notification.severity',
+  props.notification.severity,
+  ['info', 'success', 'warn', 'danger'] as const,
+))
 const liveAttributes = computed(() => resolveFeedbackLive(props.notification.severity, 'auto'))
 </script>
 <style lang="postcss" src="./SToastItem.css" scoped></style>

package/src/components/shared/_internal/useRadioGroup.ts

@@ -0,0 +1,106 @@
+import { computed } from 'vue'
+import type { ComponentPublicInstance, ComputedRef, Ref } from 'vue'
+
+import {
+  selectionKeyToken,
+  useSelectionRoving,
+} from './useSelectionRoving'
+import type {
+  SelectionKey,
+  SelectionRovingOption,
+} from './useSelectionRoving'
+
+/** Опция общего radio-group runtime. / An option accepted by the shared radio-group runtime. */
+export type RadioGroupOption<T extends SelectionKey> = SelectionRovingOption<T>
+
+/** ARIA-контракт контейнера radio-group. / ARIA contract for a radio-group container. */
+export interface RadioGroupAriaContract {
+  labelledBy: string
+  describedBy?: string
+  required?: boolean
+  invalid?: boolean
+}
+
+/** Общий runtime-контракт radio-group без визуального представления. / Shared radio-group runtime without presentation ownership. */
+export interface RadioGroupRuntime<T extends SelectionKey> {
+  focusableValue: ComputedRef<T | undefined>
+  groupBindings: (contract: RadioGroupAriaContract) => Record<string, unknown>
+  optionBindings: (option: RadioGroupOption<T>) => Record<string, unknown>
+  optionRef: (value: T) => (element: Element | ComponentPublicInstance | null) => void
+  optionToken: (value: T) => string
+}
+
+function resolveNativeElement(
+  element: Element | ComponentPublicInstance | null,
+): HTMLElement | null {
+  return element instanceof HTMLElement ? element : null
+}
+
+/**
+ * Централизует identity, ARIA, readonly/disabled и roving-focus radio-group.
+ * Centralizes identity, ARIA, readonly/disabled, and roving focus for a radio group.
+ */
+export function useRadioGroup<T extends SelectionKey>(config: {
+  component: string
+  options: ComputedRef<readonly RadioGroupOption<T>[]>
+  selectedValue: Ref<T | null | undefined>
+  disabled: ComputedRef<boolean>
+  readonly: ComputedRef<boolean>
+  update: (value: T) => void
+  orientation?: 'horizontal' | 'vertical' | 'both'
+}): RadioGroupRuntime<T> {
+  const rovingOptions = computed<readonly RadioGroupOption<T>[]>(() => (
+    config.disabled.value
+      ? config.options.value.map((option) => ({ ...option, disabled: true }))
+      : config.options.value
+  ))
+  const select = (value: T): void => {
+    const option = config.options.value.find((candidate) => candidate.value === value)
+    if (config.disabled.value || config.readonly.value || option?.disabled) return
+    config.update(value)
+  }
+  const roving = useSelectionRoving({
+    options: rovingOptions,
+    selectedValue: config.selectedValue,
+    orientation: config.orientation,
+    select,
+    component: config.component,
+  })
+
+  const groupBindings = (contract: RadioGroupAriaContract): Record<string, unknown> => ({
+    role: 'radiogroup',
+    'aria-labelledby': contract.labelledBy,
+    'aria-describedby': contract.describedBy,
+    'aria-required': contract.required || undefined,
+    'aria-invalid': contract.invalid || undefined,
+    'aria-disabled': config.disabled.value || undefined,
+    'aria-readonly': config.readonly.value || undefined,
+  })
+  const optionBindings = (option: RadioGroupOption<T>): Record<string, unknown> => ({
+    type: 'button',
+    role: 'radio',
+    disabled: config.disabled.value || option.disabled,
+    'aria-checked': option.value === config.selectedValue.value,
+    tabindex: option.value === roving.focusableValue.value ? 0 : -1,
+    onClick: () => select(option.value),
+    onKeydown: (event: KeyboardEvent) => roving.handleKeydown(event, option.value),
+  })
+  const optionRef = (value: T) => (
+    element: Element | ComponentPublicInstance | null,
+  ): void => {
+    roving.register(value, resolveNativeElement(element))
+  }
+  const optionToken = (value: T): string => selectionKeyToken(
+    config.component,
+    value,
+    'option.value',
+  )
+
+  return {
+    focusableValue: roving.focusableValue,
+    groupBindings,
+    optionBindings,
+    optionRef,
+    optionToken,
+  }
+}

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import SHeaderSurface from '../_internal/SHeaderSurface.vue'
 
 defineOptions({ inheritAttrs: false })
 
@@ -26,26 +27,18 @@ const ownedAttrs = useOwnedAttrs({ component: 'SPageHeader', owner: 'page header
 </script>
 
 <template>
-  <header
+  <SHeaderSurface
     v-bind="ownedAttrs.bindings()"
-    class="s-page-header"
-    :data-actions-layout="actionsLayout"
-    :data-appearance="appearance"
-    :data-size="size"
+    kind="page"
+    :title="title"
+    :description="description"
+    :eyebrow="eyebrow"
+    :heading-level="headingLevel"
+    :appearance="appearance"
+    :size="size"
+    :trailing-layout="actionsLayout"
+    :title-presentation="titlePresentation"
   >
-    <div class="s-page-header__copy">
-      <div v-if="eyebrow" class="s-page-header__eyebrow">{{ eyebrow }}</div>
-      <component
-        :is="`h${headingLevel}`"
-        class="s-page-header__title"
-        :data-presentation="titlePresentation"
-      >{{ title }}</component>
-      <p v-if="description" class="s-page-header__description">{{ description }}</p>
-    </div>
-    <div v-if="$slots.actions" class="s-page-header__actions">
-      <slot name="actions" />
-    </div>
-  </header>
+    <template v-if="$slots.actions" #actions><slot name="actions" /></template>
+  </SHeaderSurface>
 </template>
-
-<style lang="postcss" src="./SPageHeader.css" scoped></style>

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

@@ -78,7 +78,7 @@
 .s-button[data-icon-only='true'][data-size='md'] { width: var(--s-control-hitbox-md); height: var(--s-control-hitbox-md); }
 .s-button[data-icon-only='true'][data-size='lg'] { width: var(--s-control-hitbox-lg); height: var(--s-control-hitbox-lg); }
 
-.s-button[data-severity='secondary'] {
+.s-button[data-s-tone='secondary'] {
   --s-button-accent: var(--s-button-secondary-accent);
   --s-button-solid-background: var(--s-button-secondary-solid-background);
   --s-button-solid-background-hover: var(--s-button-secondary-solid-background-hover);
@@ -88,7 +88,7 @@
   --s-button-outline: var(--color-surface-300);
 }
 
-.s-button[data-severity='success'] {
+.s-button[data-s-tone='success'] {
   --s-button-accent: var(--s-button-success-accent);
   --s-button-solid-background: var(--s-button-success-solid-background);
   --s-button-solid-background-hover: var(--s-button-success-solid-background-hover);
@@ -97,7 +97,7 @@
   --s-button-foreground: var(--s-button-success-foreground);
 }
 
-.s-button[data-severity='info'] {
+.s-button[data-s-tone='info'] {
   --s-button-accent: var(--s-button-info-accent);
   --s-button-solid-background: var(--s-button-info-solid-background);
   --s-button-solid-background-hover: var(--s-button-info-solid-background-hover);
@@ -106,7 +106,7 @@
   --s-button-foreground: var(--s-button-info-foreground);
 }
 
-.s-button[data-severity='warn'] {
+.s-button[data-s-tone='warn'] {
   --s-button-accent: var(--s-button-warn-accent);
   --s-button-solid-background: var(--s-button-warn-solid-background);
   --s-button-solid-background-hover: var(--s-button-warn-solid-background-hover);
@@ -115,7 +115,7 @@
   --s-button-foreground: var(--s-button-warn-foreground);
 }
 
-.s-button[data-severity='danger'] {
+.s-button[data-s-tone='danger'] {
   --s-button-accent: var(--s-button-danger-accent);
   --s-button-solid-background: var(--s-button-danger-solid-background);
   --s-button-solid-background-hover: var(--s-button-danger-solid-background-hover);
@@ -124,7 +124,7 @@
   --s-button-foreground: var(--s-button-danger-foreground);
 }
 
-.s-button[data-severity='contrast'] {
+.s-button[data-s-tone='contrast'] {
   --s-button-accent: var(--s-button-contrast-accent);
   --s-button-solid-background: var(--s-button-contrast-solid-background);
   --s-button-solid-background-hover: var(--s-button-contrast-solid-background-hover);

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

@@ -3,8 +3,8 @@
     :is="rootComponent"
     :ref="setRootRef"
     v-bind="rootBindings"
+    :data-s-tone="toneBinding['data-s-tone']"
     class="s-button"
-    :data-severity="severity"
     :data-size="size"
     :data-width="width"
     :data-content-align="contentAlign"
@@ -63,6 +63,7 @@ import { ChevronRight } from '../../icons/sputnigUiIcons'
 import type { InteractiveElementApi } from '../../../internal/interactiveElement'
 import { resolveLinkTarget } from '../../../internal/linkTarget'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { resolveSemanticToneBinding } from '../../../internal/semanticTone'
 import {
   PassiveContentBoundary,
   useInteractiveLeafRegistration,
@@ -79,6 +80,7 @@ import type {
 defineOptions({ inheritAttrs: false })
 
 export type SButtonSeverity = 'primary' | 'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'contrast'
+const BUTTON_SEVERITIES = ['primary', 'secondary', 'success', 'info', 'warn', 'danger', 'contrast'] as const satisfies readonly SButtonSeverity[]
 export type SButtonSize = 'xs' | 'sm' | 'md' | 'lg'
 export type SButtonIconSize = 'default' | 'large'
 export type SButtonDensity = 'default' | 'compact'
@@ -186,6 +188,12 @@ const defaultContentComponent = (): ReturnType<NonNullable<typeof buttonSlots.de
 )
 const rootRef = ref<HTMLButtonElement | HTMLAnchorElement | null>(null)
 const ownedAttrs = useOwnedAttrs({ component: 'SButton', owner: 'native button' })
+const toneBinding = computed(() => resolveSemanticToneBinding(
+  'SButton',
+  'severity',
+  props.severity,
+  BUTTON_SEVERITIES,
+))
 const isRegisteredTreeAction = useTreeActionRegistration({
   owner: 'SButton',
   element: rootRef,