@pgcorp/ui-kit 0.5.0 → 0.7.0

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

@@ -13,6 +13,7 @@
     <template #default="field">
       <span class="s-switch-control">
         <input
+          ref="inputEl"
           v-bind="ownedAttrs.bindings()"
           :id="field.controlId"
           type="checkbox"
@@ -37,10 +38,9 @@
 </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 { useBinaryInput } from '../../../internal/useBinaryInput'
 import SField from './SField.vue'
 
 defineOptions({ inheritAttrs: false })
@@ -73,37 +73,19 @@ const emit = defineEmits<{
 }>()
 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
+const {
+  checkedValue,
+  inputEl,
+  inputId,
+  onChange,
+  onClick,
+} = useBinaryInput({
+  owner: 'SSwitch',
+  inputName: 'switch',
+  props,
+  emitUpdate: (value) => emit('update:modelValue', value),
+  emitClick: (event) => emit('click', event),
 })
-
-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/data-display/SActionListItem.css

@@ -28,11 +28,11 @@
   @apply dark:bg-primary-900 dark:text-primary-200;
 }
 
-.s-action-list-item[data-tone='success'] .s-action-list-item__icon {
+.s-action-list-item[data-s-tone='success'] .s-action-list-item__icon {
   @apply bg-success-100 text-success-700 dark:bg-success-900 dark:text-success-200;
 }
 
-.s-action-list-item[data-tone='danger'] .s-action-list-item__icon {
+.s-action-list-item[data-s-tone='danger'] .s-action-list-item__icon {
   @apply bg-danger-100 text-danger-700 dark:bg-danger-900 dark:text-danger-200;
 }
 

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

@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 import type { Component, VNodeChild } from 'vue'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { resolveSemanticToneBinding } from '../../../internal/semanticTone'
 import { validateBoundedInteger, validateNonEmptyString } from '../../../internal/runtimeContract'
 
 import SButton from '../controls/SButton.vue'
@@ -102,6 +103,12 @@ const itemStyle = computed(() => ({
   '--s-action-list-item-indent': `${validatedIndentLevel.value * 0.875}rem`,
 }))
 const ownedAttrs = useOwnedAttrs({ component: 'SActionListItem', owner: 'action list item root' })
+const toneBinding = computed(() => resolveSemanticToneBinding(
+  'SActionListItem',
+  'tone',
+  props.tone,
+  ['default', 'primary', 'success', 'danger'] as const,
+))
 const rootBindings = computed(() => ownedAttrs.bindings())
 const semanticRole = computed(() => {
   const declaredRole = rootBindings.value.role
@@ -163,9 +170,9 @@ function emitAction(event: MouseEvent): void {
 <template>
   <div
     v-bind="rootBindings"
+    :data-s-tone="toneBinding['data-s-tone']"
     class="s-action-list-item"
     :data-selected="selected"
-    :data-tone="tone"
     :data-density="density"
     :data-interactive="resolvedMode !== 'static'"
     :data-mode="resolvedMode"

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

@@ -1,42 +1,56 @@
 <template>
   <span
-    v-bind="ownedAttrs.bindings()"
+    v-bind="{ ...ownedAttrs.bindings(), ...surfaceBindings }"
     class="s-badge"
-    :class="{ 's-badge--dot': dot }"
-    :data-severity="severity"
-    :data-size="size"
-    :data-max-width="maxWidth"
-    :data-truncate="truncate || undefined"
-    :data-icon-motion="iconMotion"
   >
     <template v-if="!dot">
-      <span v-if="leadingIcon" class="s-badge__icon" aria-hidden="true">
-        <component :is="leadingIcon" class="s-badge__icon-graphic" />
+      <span v-if="leadingIcon" :class="PILL_ICON_CLASS" aria-hidden="true">
+        <component
+          :is="leadingIcon"
+          :class="[
+            PILL_ICON_GRAPHIC_CLASS,
+            { [PILL_ICON_SPIN_CLASS]: iconMotion === 'spin' },
+          ]"
+        />
+      </span>
+      <span :class="[PILL_LABEL_CLASS, { [PILL_LABEL_TRUNCATE_CLASS]: truncate }]">
+        <slot />
       </span>
-      <span class="s-badge__label"><slot /></span>
     </template>
   </span>
 </template>
 
 <script setup lang="ts">
-import type { Component } from 'vue';
+import { computed, type Component } from 'vue';
 import { useOwnedAttrs } from '../../../internal/ownedAttrs';
+import {
+  PILL_ICON_CLASS,
+  PILL_ICON_GRAPHIC_CLASS,
+  PILL_ICON_SPIN_CLASS,
+  PILL_LABEL_CLASS,
+  PILL_LABEL_TRUNCATE_CLASS,
+  resolvePillSurfaceBindings,
+  type PillSurfaceIconMotion,
+  type PillSurfaceMaxWidth,
+  type PillSurfaceSeverity,
+  type PillSurfaceSize,
+} from '../../../internal/pillSurface';
 
 defineOptions({ inheritAttrs: false });
 
-export type BadgeSeverity = 'primary' | 'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'contrast';
+export type BadgeSeverity = PillSurfaceSeverity;
 
 export interface Props {
   severity?: BadgeSeverity;
   dot?: boolean;
-  size?: 'xs' | 'sm' | 'md';
+  size?: PillSurfaceSize;
   leadingIcon?: Component;
-  iconMotion?: 'static' | 'spin';
+  iconMotion?: PillSurfaceIconMotion;
   truncate?: boolean;
-  maxWidth?: 'none' | 'sm' | 'md';
+  maxWidth?: PillSurfaceMaxWidth;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   severity: 'secondary',
   dot: false,
   size: 'md',
@@ -47,6 +61,15 @@ withDefaults(defineProps<Props>(), {
 });
 
 const ownedAttrs = useOwnedAttrs({ component: 'SBadge', owner: 'badge root' });
+const surfaceBindings = computed(() => resolvePillSurfaceBindings('SBadge', {
+  kind: 'badge',
+  severity: props.severity,
+  size: props.size,
+  dot: props.dot,
+  closable: false,
+  disabled: false,
+  truncate: props.truncate,
+  maxWidth: props.maxWidth,
+  iconMotion: props.iconMotion,
+}));
 </script>
-
-<style lang="postcss" src="./SBadge.css" scoped></style>

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

@@ -1,16 +1,12 @@
 <template>
   <span
-    v-bind="ownedAttrs.bindings()"
+    v-bind="{ ...ownedAttrs.bindings(), ...surfaceBindings }"
     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 v-if="leadingIcon" :class="PILL_ICON_CLASS" aria-hidden="true">
+      <component :is="leadingIcon" :class="PILL_ICON_GRAPHIC_CLASS" />
     </span>
-    <span class="s-chip__label">{{ validatedLabel }}</span>
+    <span :class="[PILL_LABEL_CLASS, PILL_LABEL_TRUNCATE_CLASS]">{{ validatedLabel }}</span>
     <SButton
       v-if="closable"
       label=""
@@ -34,6 +30,13 @@
 import { computed, type Component } from 'vue'
 import { X } from '../../icons/sputnigUiIcons'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import {
+  PILL_ICON_CLASS,
+  PILL_ICON_GRAPHIC_CLASS,
+  PILL_LABEL_CLASS,
+  PILL_LABEL_TRUNCATE_CLASS,
+  resolvePillSurfaceBindings,
+} from '../../../internal/pillSurface'
 import {
   validateBoolean,
   validateExactString,
@@ -80,6 +83,17 @@ const validatedSeverity = computed(() => validateExactString(
 const validatedSize = computed(() => validateExactString(
   'SChip', 'size', props.size, ['sm', 'md'] as const,
 ))
+const surfaceBindings = computed(() => resolvePillSurfaceBindings('SChip', {
+  kind: 'chip',
+  severity: validatedSeverity.value,
+  size: validatedSize.value,
+  dot: false,
+  closable: props.closable,
+  disabled: props.disabled,
+  truncate: true,
+  maxWidth: 'none',
+  iconMotion: 'static',
+}))
 const resolvedCloseLabel = computed(() => {
   validateBoolean('SChip', 'closable', props.closable)
   validateBoolean('SChip', 'disabled', props.disabled)
@@ -88,5 +102,3 @@ const resolvedCloseLabel = computed(() => {
     : validateNonEmptyString('SChip', 'closeLabel', props.closeLabel)
 })
 </script>
-
-<style lang="postcss" src="./SChip.css" scoped></style>

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

@@ -52,37 +52,37 @@
 }
 
 /* Severity: info */
-.s-message[data-severity='info'] {
+.s-message[data-s-tone='info'] {
   @apply bg-info-50 border-info-200 text-info-800;
   @apply dark:bg-info-950 dark:border-info-800 dark:text-info-200;
 }
-.s-message[data-severity='info'] .s-message-icon {
+.s-message[data-s-tone='info'] .s-message-icon {
   @apply text-info-500 dark:text-info-400;
 }
 
 /* Severity: success */
-.s-message[data-severity='success'] {
+.s-message[data-s-tone='success'] {
   @apply bg-success-50 border-success-200 text-success-800;
   @apply dark:bg-success-950 dark:border-success-800 dark:text-success-200;
 }
-.s-message[data-severity='success'] .s-message-icon {
+.s-message[data-s-tone='success'] .s-message-icon {
   @apply text-success-500 dark:text-success-400;
 }
 
 /* Severity: warn */
-.s-message[data-severity='warn'] {
+.s-message[data-s-tone='warn'] {
   @apply bg-warn-50 border-warn-200 text-warn-800;
   @apply dark:bg-warn-950 dark:border-warn-800 dark:text-warn-200;
 }
-.s-message[data-severity='warn'] .s-message-icon {
+.s-message[data-s-tone='warn'] .s-message-icon {
   @apply text-warn-500 dark:text-warn-400;
 }
 
 /* Severity: danger */
-.s-message[data-severity='danger'] {
+.s-message[data-s-tone='danger'] {
   @apply bg-danger-50 border-danger-200 text-danger-800;
   @apply dark:bg-danger-950 dark:border-danger-800 dark:text-danger-200;
 }
-.s-message[data-severity='danger'] .s-message-icon {
+.s-message[data-s-tone='danger'] .s-message-icon {
   @apply text-danger-500 dark:text-danger-400;
 }

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

@@ -1,8 +1,8 @@
 <template>
   <div
     v-bind="ownedAttrs.bindings()"
+    :data-s-tone="toneBinding['data-s-tone']"
     class="s-message"
-    :data-severity="validatedSeverity"
     :data-size="validatedSize"
     :role="liveAttributes.role"
     :aria-live="liveAttributes.ariaLive"
@@ -43,6 +43,7 @@
 import { computed } from 'vue'
 import { X } from '../../icons/sputnigUiIcons'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { resolveSemanticToneBinding } from '../../../internal/semanticTone'
 import {
   resolveFeedbackLive,
   resolveFeedbackPresentation,
@@ -112,6 +113,12 @@ const validatedSeverity = computed<Severity>(() => validateExactString(
   props.severity,
   MESSAGE_SEVERITIES,
 ))
+const toneBinding = computed(() => resolveSemanticToneBinding(
+  'SMessage',
+  'severity',
+  validatedSeverity.value,
+  MESSAGE_SEVERITIES,
+))
 const validatedLive = computed<FeedbackLiveMode>(() => validateExactString(
   'SMessage',
   'live',

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

@@ -22,22 +22,22 @@
 }
 
 /* Severity Colors */
-.s-progress-bar-value[data-severity='primary'] {
+.s-progress-bar-value[data-s-tone='primary'] {
   background-color: var(--s-progress-bar-fill-primary);
 }
-.s-progress-bar-value[data-severity='success'] {
+.s-progress-bar-value[data-s-tone='success'] {
   background-color: var(--s-progress-bar-fill-success);
 }
-.s-progress-bar-value[data-severity='info'] {
+.s-progress-bar-value[data-s-tone='info'] {
   background-color: var(--s-progress-bar-fill-info);
 }
-.s-progress-bar-value[data-severity='warn'] {
+.s-progress-bar-value[data-s-tone='warn'] {
   background-color: var(--s-progress-bar-fill-warn);
 }
-.s-progress-bar-value[data-severity='danger'] {
+.s-progress-bar-value[data-s-tone='danger'] {
   background-color: var(--s-progress-bar-fill-danger);
 }
-.s-progress-bar-value[data-severity='neutral'] {
+.s-progress-bar-value[data-s-tone='neutral'] {
   background-color: var(--s-progress-bar-fill-neutral);
 }
 
@@ -64,21 +64,21 @@
 }
 
 /* Indeterminate Severity Colors */
-.s-progress-bar-value--indeterminate[data-severity='primary']::before {
+.s-progress-bar-value--indeterminate[data-s-tone='primary']::before {
   background-color: var(--s-progress-bar-fill-primary);
 }
-.s-progress-bar-value--indeterminate[data-severity='success']::before {
+.s-progress-bar-value--indeterminate[data-s-tone='success']::before {
   background-color: var(--s-progress-bar-fill-success);
 }
-.s-progress-bar-value--indeterminate[data-severity='info']::before {
+.s-progress-bar-value--indeterminate[data-s-tone='info']::before {
   background-color: var(--s-progress-bar-fill-info);
 }
-.s-progress-bar-value--indeterminate[data-severity='warn']::before {
+.s-progress-bar-value--indeterminate[data-s-tone='warn']::before {
   background-color: var(--s-progress-bar-fill-warn);
 }
-.s-progress-bar-value--indeterminate[data-severity='danger']::before {
+.s-progress-bar-value--indeterminate[data-s-tone='danger']::before {
   background-color: var(--s-progress-bar-fill-danger);
 }
-.s-progress-bar-value--indeterminate[data-severity='neutral']::before {
+.s-progress-bar-value--indeterminate[data-s-tone='neutral']::before {
   background-color: var(--s-progress-bar-indeterminate-neutral-fill);
 }

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

@@ -14,8 +14,8 @@
   >
     <div
       v-if="mode === 'determinate'"
+      :data-s-tone="toneBinding['data-s-tone']"
       class="s-progress-bar-value"
-      :data-severity="severity"
       :style="{ width: `${value}%` }"
     >
       <span v-if="showValue" class="s-progress-bar-label">
@@ -24,19 +24,21 @@
     </div>
     <div
       v-else
+      :data-s-tone="toneBinding['data-s-tone']"
       class="s-progress-bar-value--indeterminate"
-      :data-severity="severity"
     ></div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { watchEffect } from 'vue';
+import { computed, watchEffect } from 'vue';
 import { useOwnedAttrs } from '../../../internal/ownedAttrs';
+import { resolveSemanticToneBinding } from '../../../internal/semanticTone';
 
 defineOptions({ inheritAttrs: false });
 
 export type Severity = 'primary' | 'success' | 'info' | 'warn' | 'danger' | 'neutral';
+const PROGRESS_SEVERITIES = ['primary', 'success', 'info', 'warn', 'danger', 'neutral'] as const satisfies readonly Severity[];
 export type ProgressBarMode = 'determinate' | 'indeterminate';
 export type SProgressBarAccessibility =
   | { readonly mode: 'decorative' }
@@ -62,6 +64,12 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const ownedAttrs = useOwnedAttrs({ component: 'SProgressBar', owner: 'progressbar root' });
+const toneBinding = computed(() => resolveSemanticToneBinding(
+  'SProgressBar',
+  'severity',
+  props.severity,
+  PROGRESS_SEVERITIES,
+));
 
 watchEffect(() => {
   if (!Number.isFinite(props.value) || props.value < 0 || props.value > 100) {
@@ -70,9 +78,7 @@ watchEffect(() => {
   if (!['determinate', 'indeterminate'].includes(props.mode)) {
     throw new TypeError(`SProgressBar: неизвестный mode "${String(props.mode)}"`);
   }
-  if (!['primary', 'success', 'info', 'warn', 'danger', 'neutral'].includes(props.severity)) {
-    throw new TypeError(`SProgressBar: неизвестный severity "${String(props.severity)}"`);
-  }
+  void toneBinding.value;
   if (!['xs', 'sm', 'md'].includes(props.size)) {
     throw new TypeError(`SProgressBar: неизвестный size "${String(props.size)}"`);
   }

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

@@ -23,11 +23,11 @@
 .s-progress-indicator[data-size='md'] { --s-progress-indicator-size: var(--s-icon-size-md); }
 .s-progress-indicator[data-size='lg'] { --s-progress-indicator-size: var(--s-icon-size-lg); }
 
-.s-progress-indicator[data-tone='neutral'] { color: var(--s-progress-indicator-foreground-neutral); }
-.s-progress-indicator[data-tone='info'] { color: var(--s-progress-indicator-foreground-info); }
-.s-progress-indicator[data-tone='success'] { color: var(--s-progress-indicator-foreground-success); }
-.s-progress-indicator[data-tone='warn'] { color: var(--s-progress-indicator-foreground-warn); }
-.s-progress-indicator[data-tone='danger'] { color: var(--s-progress-indicator-foreground-danger); }
+.s-progress-indicator[data-s-tone='neutral'] { color: var(--s-progress-indicator-foreground-neutral); }
+.s-progress-indicator[data-s-tone='info'] { color: var(--s-progress-indicator-foreground-info); }
+.s-progress-indicator[data-s-tone='success'] { color: var(--s-progress-indicator-foreground-success); }
+.s-progress-indicator[data-s-tone='warn'] { color: var(--s-progress-indicator-foreground-warn); }
+.s-progress-indicator[data-s-tone='danger'] { color: var(--s-progress-indicator-foreground-danger); }
 
 .s-progress-indicator__graphic {
   width: 100%;

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

@@ -1,9 +1,9 @@
 <template>
   <span
     v-bind="ownedAttrs.bindings()"
+    :data-s-tone="toneBinding['data-s-tone']"
     class="s-progress-indicator"
     :data-size="size"
-    :data-tone="tone"
     :data-motion="presentation.motion"
     :data-show-label="validatedShowLabel || undefined"
     :role="liveAttributes.role"
@@ -30,12 +30,14 @@ import { computed, watchEffect } from 'vue'
 
 import { resolveFeedbackIndicator, resolveFeedbackLive, type FeedbackLiveMode } from '../../../internal/feedbackPresentation'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { resolveSemanticToneBinding } from '../../../internal/semanticTone'
 import { validateBoolean } from '../../../internal/runtimeContract'
 
 defineOptions({ inheritAttrs: false })
 
 export type SProgressIndicatorSize = 'xs' | 'sm' | 'md' | 'lg'
 export type SProgressIndicatorTone = 'current' | 'neutral' | 'info' | 'success' | 'warn' | 'danger'
+const PROGRESS_INDICATOR_TONES = ['current', 'neutral', 'info', 'success', 'warn', 'danger'] as const satisfies readonly SProgressIndicatorTone[]
 
 /**
  * Декоративный progress принадлежит labelled parent; standalone status требует собственного имени.
@@ -64,6 +66,12 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const ownedAttrs = useOwnedAttrs({ component: 'SProgressIndicator', owner: 'progress indicator root' })
+const toneBinding = computed(() => resolveSemanticToneBinding(
+  'SProgressIndicator',
+  'tone',
+  props.tone,
+  PROGRESS_INDICATOR_TONES,
+))
 const presentation = resolveFeedbackIndicator('progress')
 const validatedShowLabel = computed(() => validateBoolean('SProgressIndicator', 'showLabel', props.showLabel))
 const feedbackTone = computed(() => props.tone === 'current' ? 'info' : props.tone)

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import SHeaderSurface from '../_internal/SHeaderSurface.vue'
 
 defineOptions({ inheritAttrs: false })
 
@@ -32,27 +33,22 @@ const ownedAttrs = useOwnedAttrs({ component: 'SSectionHeader', owner: 'section
 </script>
 
 <template>
-  <header
+  <SHeaderSurface
     v-bind="ownedAttrs.bindings()"
-    class="s-section-header"
-    :data-size="size"
-    :data-variant="variant"
-    :data-divider="divider || undefined"
-    :data-padding="padding"
-    :data-spacing-after="spacingAfter"
-    :data-trailing-layout="trailingLayout"
+    kind="section"
+    :title="title"
+    :eyebrow="eyebrow"
+    :description="description"
+    :meta="meta"
+    :heading-level="headingLevel"
+    :size="size"
+    :variant="variant"
+    :divider="divider"
+    :padding="padding"
+    :spacing-after="spacingAfter"
+    :trailing-layout="trailingLayout"
   >
-    <div class="s-section-header__copy">
-      <div v-if="eyebrow" class="s-section-header__eyebrow">{{ eyebrow }}</div>
-      <component :is="`h${headingLevel}`" class="s-section-header__title">{{ title }}</component>
-      <p v-if="description" class="s-section-header__description">{{ description }}</p>
-      <p v-if="meta" class="s-section-header__meta">{{ meta }}</p>
-    </div>
-    <div v-if="$slots.badges || $slots.actions" class="s-section-header__trailing">
-      <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>
-    </div>
-  </header>
+    <template v-if="$slots.badges" #badges><slot name="badges" /></template>
+    <template v-if="$slots.actions" #actions><slot name="actions" /></template>
+  </SHeaderSurface>
 </template>
-
-<style lang="postcss" src="./SSectionHeader.css" scoped></style>

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

@@ -49,42 +49,42 @@
   @apply sr-only;
 }
 
-.s-status[data-tone='neutral'] {
+.s-status[data-s-tone='neutral'] {
   @apply text-surface-500 dark:text-surface-400;
 }
 
-.s-status[data-tone='info'] {
+.s-status[data-s-tone='info'] {
   @apply text-info-700 dark:text-info-300;
 }
 
-.s-status[data-tone='success'] {
+.s-status[data-s-tone='success'] {
   @apply text-success-700 dark:text-success-300;
 }
 
-.s-status[data-tone='warn'] {
+.s-status[data-s-tone='warn'] {
   @apply text-warn-700 dark:text-warn-300;
 }
 
-.s-status[data-tone='danger'] {
+.s-status[data-s-tone='danger'] {
   @apply text-danger-700 dark:text-danger-300;
 }
 
-.s-status[data-appearance='soft'][data-tone='neutral'] {
+.s-status[data-appearance='soft'][data-s-tone='neutral'] {
   @apply border-surface-200 bg-surface-100 dark:border-surface-700 dark:bg-surface-800;
 }
 
-.s-status[data-appearance='soft'][data-tone='info'] {
+.s-status[data-appearance='soft'][data-s-tone='info'] {
   @apply border-info-200 bg-info-50 dark:border-info-800 dark:bg-info-950;
 }
 
-.s-status[data-appearance='soft'][data-tone='success'] {
+.s-status[data-appearance='soft'][data-s-tone='success'] {
   @apply border-success-200 bg-success-50 dark:border-success-800 dark:bg-success-950;
 }
 
-.s-status[data-appearance='soft'][data-tone='warn'] {
+.s-status[data-appearance='soft'][data-s-tone='warn'] {
   @apply border-warn-200 bg-warn-50 dark:border-warn-800 dark:bg-warn-950;
 }
 
-.s-status[data-appearance='soft'][data-tone='danger'] {
+.s-status[data-appearance='soft'][data-s-tone='danger'] {
   @apply border-danger-200 bg-danger-50 dark:border-danger-800 dark:bg-danger-950;
 }

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

@@ -1,8 +1,8 @@
 <template>
   <span
     v-bind="ownedAttrs.bindings()"
+    :data-s-tone="toneBinding['data-s-tone']"
     class="s-status"
-    :data-tone="tone"
     :data-appearance="appearance"
     :data-size="size"
     :data-label-visibility="labelVisibility"
@@ -22,6 +22,7 @@
 <script setup lang="ts">
 import { computed, markRaw, toRaw, type Component } from 'vue'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { resolveSemanticToneBinding } from '../../../internal/semanticTone'
 
 import {
   resolveFeedbackLive,
@@ -33,6 +34,7 @@ import {
 defineOptions({ inheritAttrs: false })
 
 export type StatusTone = FeedbackTone
+const STATUS_TONES = ['neutral', 'info', 'success', 'warn', 'danger'] as const satisfies readonly StatusTone[]
 export type StatusAppearance = 'text' | 'soft'
 export type StatusSize = 'xs' | 'sm' | 'md'
 export type StatusLiveMode = Exclude<FeedbackLiveMode, 'auto'>
@@ -66,6 +68,12 @@ const props = withDefaults(defineProps<{
 
 const defaultIcon = computed<Component>(() => resolveFeedbackPresentation(props.tone).icon)
 const ownedAttrs = useOwnedAttrs({ component: 'SStatus', owner: 'status root' })
+const toneBinding = computed(() => resolveSemanticToneBinding(
+  'SStatus',
+  'tone',
+  props.tone,
+  STATUS_TONES,
+))
 const liveAttributes = computed(() => resolveFeedbackLive(props.tone, props.live))
 
 const resolvedIcon = computed<Component | null>(() => {