@pgcorp/ui-kit 0.6.0 → 0.7.1

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 один раз:
@@ -220,6 +255,24 @@ Components consume semantic custom properties. Consumers override documented
 tokens on the root theme container and do not depend on internal CSS classes or
 template structure.
 
+Floating surfaces teleport to `document.body`. If the host application uses an
+overlay scale above the UI-kit defaults, align the public layer tokens on
+`:root`, preserving `--s-layer-floating < --s-layer-toast <
+--s-layer-overlay-backdrop`:
+
+```css
+:root {
+  --host-overlay-surface: 2400;
+  --s-layer-floating: calc(var(--host-overlay-surface) + 10);
+  --s-layer-toast: calc(var(--host-overlay-surface) + 20);
+  --s-layer-overlay-backdrop: calc(var(--host-overlay-surface) + 100);
+}
+```
+
+`--host-overlay-surface` belongs to the host application. The complete layer
+integration contract and verification checklist are published in
+`docs/theming.md` inside the npm package.
+
 ## Публичный контракт / Public contract
 
 `package.json#exports` — источник истины для импортов. Публичный контракт
@@ -244,6 +297,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/docs/theming.md

@@ -17,6 +17,35 @@ applyThemeIdToDocument(document, 'classic-light')
 theme-контейнере. Не стилизуйте внутренний DOM компонентов через `:deep`,
 private selectors или зависимость от структуры template.
 
+### Интеграция шкалы слоёв host-приложения
+
+Floating surfaces (`STooltip`, меню, select и popover) телепортируются в
+`document.body`, поэтому их layer tokens разрешаются в корневом scope документа,
+а не во вложенном контейнере компонента. Базовая шкала UI-kit сохраняет порядок
+`floating < toast < overlay-backdrop`:
+
+- `--s-layer-floating: 40` — tooltip, menu, select и popover;
+- `--s-layer-toast: 50` — уведомления;
+- `--s-layer-overlay-backdrop: 11000` — backdrop первого modal/drawer;
+- `--s-layer-overlay-surface` вычисляется из backdrop и surface offset.
+
+Если host-приложение использует другую систему overlay-слоёв, задайте UI-kit
+tokens на `:root` относительно наибольшего top-level слоя host. Не меняйте
+`z-index` внутренних элементов компонентов и не привязывайтесь к их CSS-классам.
+
+```css
+:root {
+  --host-overlay-surface: 2400;
+  --s-layer-floating: calc(var(--host-overlay-surface) + 10);
+  --s-layer-toast: calc(var(--host-overlay-surface) + 20);
+  --s-layer-overlay-backdrop: calc(var(--host-overlay-surface) + 100);
+}
+```
+
+Значение `--host-overlay-surface` в примере является контрактом host-приложения,
+а не фиксированным значением UI-kit. После интеграции проверьте tooltip/menu,
+toast и modal/drawer внутри и снаружи host overlay.
+
 ## English
 
 `tokens.css` contains primitive and semantic tokens. `style.css` includes tokens,
@@ -33,3 +62,32 @@ applyThemeIdToDocument(document, 'classic-light')
 Override documented CSS custom properties on the root theme container only. Do
 not style component internals through `:deep`, private selectors, or template
 structure dependencies.
+
+### Host application layer-scale integration
+
+Floating surfaces (`STooltip`, menus, selects, and popovers) teleport to
+`document.body`. Their layer tokens therefore resolve in the document root scope,
+not in a nested component container. The default UI-kit scale preserves
+`floating < toast < overlay-backdrop`:
+
+- `--s-layer-floating: 40` — tooltips, menus, selects, and popovers;
+- `--s-layer-toast: 50` — notifications;
+- `--s-layer-overlay-backdrop: 11000` — the first modal/drawer backdrop;
+- `--s-layer-overlay-surface` is derived from the backdrop and surface offset.
+
+When the host application uses another overlay scale, define the UI-kit tokens
+on `:root` relative to the highest top-level host layer. Do not change component
+internal `z-index` values or depend on internal CSS classes.
+
+```css
+:root {
+  --host-overlay-surface: 2400;
+  --s-layer-floating: calc(var(--host-overlay-surface) + 10);
+  --s-layer-toast: calc(var(--host-overlay-surface) + 20);
+  --s-layer-overlay-backdrop: calc(var(--host-overlay-surface) + 100);
+}
+```
+
+The `--host-overlay-surface` value is a host-application contract, not a fixed
+UI-kit value. Verify tooltip/menu, toast, and modal/drawer behavior both inside
+and outside host overlays after integration.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pgcorp/ui-kit",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "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/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/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,

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

@@ -51,9 +51,9 @@
 .s-interactive-surface[data-radius='md'] { @apply rounded-md; }
 .s-interactive-surface[data-radius='lg'] { @apply rounded-lg; }
 .s-interactive-surface[data-radius='xl'] { @apply rounded-xl; }
-.s-interactive-surface[data-tone='primary'] { @apply border-primary-200 bg-primary-500/5 dark:border-primary-500/30 dark:bg-primary-500/10; }
-.s-interactive-surface[data-tone='success'] { @apply border-success-200 bg-success-50 dark:border-success-800 dark:bg-success-950; }
-.s-interactive-surface[data-tone='danger'] { @apply border-danger-200 bg-danger-50 dark:border-danger-800 dark:bg-danger-950; }
+.s-interactive-surface[data-s-tone='primary'] { @apply border-primary-200 bg-primary-500/5 dark:border-primary-500/30 dark:bg-primary-500/10; }
+.s-interactive-surface[data-s-tone='success'] { @apply border-success-200 bg-success-50 dark:border-success-800 dark:bg-success-950; }
+.s-interactive-surface[data-s-tone='danger'] { @apply border-danger-200 bg-danger-50 dark:border-danger-800 dark:bg-danger-950; }
 .s-interactive-surface[data-selected='true'] { @apply border-primary-400 bg-primary-50 dark:border-primary-600 dark:bg-primary-950; }
 .s-interactive-surface[data-pressed='true'] { @apply border-primary-500 bg-primary-100 dark:border-primary-500 dark:bg-primary-950/70; }
 .s-interactive-surface[data-disabled='true'] { @apply cursor-not-allowed opacity-60; }

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

@@ -5,6 +5,7 @@ import type { STooltipTriggerBinding } from '../data-display/STooltip.vue'
 import { hasOwn } from '../../../internal/es2020'
 import { resolveLinkTarget } from '../../../internal/linkTarget'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { resolveSemanticToneBinding } from '../../../internal/semanticTone'
 import {
   PassiveContentBoundary,
   useInteractiveLeafRegistration,
@@ -14,6 +15,7 @@ import {
 defineOptions({ inheritAttrs: false })
 
 export type InteractiveSurfaceTone = 'default' | 'primary' | 'success' | 'danger'
+const INTERACTIVE_SURFACE_TONES = ['default', 'primary', 'success', 'danger'] as const satisfies readonly InteractiveSurfaceTone[]
 export type InteractiveSurfaceDensity = 'compact' | 'comfortable'
 export type InteractiveSurfacePadding = 'none' | 'sm' | 'md'
 export type InteractiveSurfaceRadius = 'md' | 'lg' | 'xl'
@@ -84,6 +86,12 @@ defineSlots<{
 }>()
 
 const ownedAttrs = useOwnedAttrs({ component: 'SInteractiveSurface', owner: 'interactive surface owner' })
+const toneBinding = computed(() => resolveSemanticToneBinding(
+  'SInteractiveSurface',
+  'tone',
+  props.tone,
+  INTERACTIVE_SURFACE_TONES,
+))
 
 const assertOptionalBoolean = (surface: Record<string, unknown>, field: 'disabled' | 'pressed'): void => {
   if (surface[field] !== undefined && typeof surface[field] !== 'boolean') {
@@ -213,7 +221,6 @@ const validatedTooltipTrigger = computed<STooltipTriggerBinding | undefined>(()
   }
   return candidate as STooltipTriggerBinding
 })
-
 const activationBindings = (): Readonly<Record<string, unknown>> => ({
   ...ownedAttrs.bindings(),
   ...(validatedTooltipTrigger.value ?? {}),
@@ -282,9 +289,9 @@ function activateAction(event: MouseEvent): void {
 <template>
   <div
     v-bind="surfaceMode === 'static' ? ownedAttrs.bindings() : undefined"
+    :data-s-tone="toneBinding['data-s-tone']"
     class="s-interactive-surface"
     :data-mode="surfaceMode"
-    :data-tone="tone"
     :data-density="density"
     :data-padding="padding"
     :data-radius="radius"

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

@@ -1,19 +1,19 @@
 @reference "../../../styles/reference.css";
 .s-marker { @apply inline-block h-2 w-2 shrink-0 rounded-full bg-surface-400 ring-1 ring-inset ring-surface-500/50; }
 .s-marker[data-size='lg'] { @apply h-7 w-7 ring-2 ring-white/80 shadow-sm dark:ring-surface-950/80; }
-.s-marker[data-tone='primary'] { @apply bg-primary-500 ring-primary-600/50; }
-.s-marker[data-tone='success'] { @apply bg-success-500 ring-success-600/50; }
-.s-marker[data-tone='blue'] { @apply bg-blue-400 ring-blue-500/50; }
-.s-marker[data-tone='sky'] { @apply bg-sky-400 ring-sky-500/50; }
-.s-marker[data-tone='indigo'] { @apply bg-indigo-400 ring-indigo-500/50; }
-.s-marker[data-tone='emerald'] { @apply bg-emerald-400 ring-emerald-500/50; }
-.s-marker[data-tone='green'] { @apply bg-green-400 ring-green-500/50; }
-.s-marker[data-tone='teal'] { @apply bg-teal-400 ring-teal-500/50; }
-.s-marker[data-tone='amber'] { @apply bg-amber-400 ring-amber-500/50; }
-.s-marker[data-tone='orange'] { @apply bg-orange-400 ring-orange-500/50; }
-.s-marker[data-tone='rose'] { @apply bg-rose-400 ring-rose-500/50; }
-.s-marker[data-tone='pink'] { @apply bg-pink-400 ring-pink-500/50; }
-.s-marker[data-tone='fuchsia'] { @apply bg-fuchsia-400 ring-fuchsia-500/50; }
-.s-marker[data-tone='cyan'] { @apply bg-cyan-400 ring-cyan-500/50; }
-.s-marker[data-tone='lime'] { @apply bg-lime-400 ring-lime-500/50; }
-.s-marker[data-tone='custom'] { background-color: var(--s-marker-custom-color); --tw-ring-color: var(--s-marker-custom-color); }
+.s-marker[data-s-tone='primary'] { @apply bg-primary-500 ring-primary-600/50; }
+.s-marker[data-s-tone='success'] { @apply bg-success-500 ring-success-600/50; }
+.s-marker[data-s-tone='blue'] { @apply bg-blue-400 ring-blue-500/50; }
+.s-marker[data-s-tone='sky'] { @apply bg-sky-400 ring-sky-500/50; }
+.s-marker[data-s-tone='indigo'] { @apply bg-indigo-400 ring-indigo-500/50; }
+.s-marker[data-s-tone='emerald'] { @apply bg-emerald-400 ring-emerald-500/50; }
+.s-marker[data-s-tone='green'] { @apply bg-green-400 ring-green-500/50; }
+.s-marker[data-s-tone='teal'] { @apply bg-teal-400 ring-teal-500/50; }
+.s-marker[data-s-tone='amber'] { @apply bg-amber-400 ring-amber-500/50; }
+.s-marker[data-s-tone='orange'] { @apply bg-orange-400 ring-orange-500/50; }
+.s-marker[data-s-tone='rose'] { @apply bg-rose-400 ring-rose-500/50; }
+.s-marker[data-s-tone='pink'] { @apply bg-pink-400 ring-pink-500/50; }
+.s-marker[data-s-tone='fuchsia'] { @apply bg-fuchsia-400 ring-fuchsia-500/50; }
+.s-marker[data-s-tone='cyan'] { @apply bg-cyan-400 ring-cyan-500/50; }
+.s-marker[data-s-tone='lime'] { @apply bg-lime-400 ring-lime-500/50; }
+.s-marker[data-s-tone='custom'] { background-color: var(--s-marker-custom-color); --tw-ring-color: var(--s-marker-custom-color); }

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

@@ -1,8 +1,8 @@
 <template>
   <span
     v-bind="ownedAttrs.bindings()"
+    :data-s-tone="toneBinding['data-s-tone']"
     class="s-marker"
-    :data-tone="marker.tone"
     :data-size="size"
     :style="customProperties"
     aria-hidden="true"
@@ -17,12 +17,38 @@ export type { SCustomMarker, SMarker, SMarkerTone } from '../_internal/markerCon
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { resolveSemanticToneBinding } from '../../../internal/semanticTone'
 import { createCustomMarker, type SMarker } from '../_internal/markerContract'
 
 defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<{ marker: SMarker; size?: 'sm' | 'lg' }>(), { size: 'sm' })
 const ownedAttrs = useOwnedAttrs({ component: 'SMarker', owner: 'marker root' })
+const MARKER_TONES = [
+  'surface',
+  'primary',
+  'success',
+  'blue',
+  'sky',
+  'indigo',
+  'emerald',
+  'green',
+  'teal',
+  'amber',
+  'orange',
+  'rose',
+  'pink',
+  'fuchsia',
+  'cyan',
+  'lime',
+  'custom',
+] as const
+const toneBinding = computed(() => resolveSemanticToneBinding(
+  'SMarker',
+  'marker.tone',
+  props.marker.tone,
+  MARKER_TONES,
+))
 const customProperties = computed(() => {
   if (props.marker.tone !== 'custom') return undefined
   createCustomMarker(props.marker.color)

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/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',