@pgcorp/ui-kit 0.6.0 → 0.7.1

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

@@ -0,0 +1,26 @@
+@reference "../../../styles/reference.css";
+
+.s-tooltip-target {
+  @apply inline-flex min-w-0 shrink-0 items-center justify-center align-middle;
+}
+
+.s-tooltip-target[data-appearance='keycap'] {
+  @apply border border-surface-300 bg-surface-100 font-mono font-semibold text-surface-700 shadow-sm;
+  border-radius: var(--radius-xs);
+}
+
+.s-tooltip-target[data-appearance='keycap'][data-size='xs'] {
+  @apply min-h-4 min-w-4 px-1 text-[0.625rem] leading-none;
+}
+
+.s-tooltip-target[data-appearance='keycap'][data-size='sm'] {
+  @apply min-h-5 min-w-5 px-1.5 text-xs leading-none;
+}
+
+.s-tooltip-target[data-appearance='keycap'][data-size='md'] {
+  @apply min-h-6 min-w-6 px-2 text-sm leading-none;
+}
+
+:global(.dark .s-tooltip-target[data-appearance='keycap']) {
+  @apply border-surface-600 bg-surface-800 text-surface-200;
+}

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

@@ -0,0 +1,94 @@
+<template>
+  <component
+    :is="rootTag"
+    ref="targetRef"
+    v-bind="ownedAttrs.bindings()"
+    class="s-tooltip-target"
+    :data-appearance="resolvedAppearance"
+    :data-size="resolvedSize"
+    @pointerenter="emit('pointerenter', $event)"
+    @pointerleave="emit('pointerleave', $event)"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, type VNodeChild } from 'vue'
+import type { ElementApi } from '../../../internal/interactiveElement'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { validateExactString } from '../../../internal/runtimeContract'
+
+defineOptions({
+  name: 'STooltipTarget',
+  inheritAttrs: false,
+})
+
+export type STooltipTargetTag = 'span' | 'kbd'
+export type STooltipTargetAppearance = 'plain' | 'keycap'
+export type STooltipTargetSize = 'xs' | 'sm' | 'md'
+export type STooltipTargetApi = ElementApi<HTMLElement>
+
+/**
+ * Пассивная pointer/geometry target для split-контракта STooltip.
+ * Passive pointer and geometry target for the STooltip split contract.
+ */
+export interface Props {
+  /** Семантический HTML root без собственной интерактивности. / Semantic HTML root without its own interactivity. */
+  as?: STooltipTargetTag
+  /** Нейтральная или keycap presentation. / Plain or keycap presentation. */
+  appearance?: STooltipTargetAppearance
+  /** Централизованная visual density target. / Centralized visual density of the target. */
+  size?: STooltipTargetSize
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'span',
+  appearance: 'plain',
+  size: 'sm',
+})
+const emit = defineEmits<{
+  pointerenter: [event: PointerEvent]
+  pointerleave: [event: PointerEvent]
+}>()
+const slots = defineSlots<{
+  /** Пассивное содержимое target. / Passive target content. */
+  default: () => VNodeChild
+}>()
+
+if (!slots.default) {
+  throw new Error('STooltipTarget: default slot обязателен. / STooltipTarget: the default slot is required.')
+}
+
+const targetRef = ref<HTMLElement | null>(null)
+const ownedAttrs = useOwnedAttrs({ component: 'STooltipTarget', owner: 'passive tooltip target' })
+const resolvedAs = computed(() => validateExactString(
+  'STooltipTarget',
+  'as',
+  props.as,
+  ['span', 'kbd'] as const,
+))
+const rootTag = computed(() => resolvedAs.value === 'kbd' ? 'kbd' : 'span')
+const resolvedAppearance = computed(() => validateExactString(
+  'STooltipTarget',
+  'appearance',
+  props.appearance,
+  ['plain', 'keycap'] as const,
+))
+const resolvedSize = computed(() => validateExactString(
+  'STooltipTarget',
+  'size',
+  props.size,
+  ['xs', 'sm', 'md'] as const,
+))
+
+const getElement = (): HTMLElement => {
+  const element = targetRef.value
+  if (!element) throw new Error('STooltipTarget: native target element is unavailable')
+  return element
+}
+
+defineExpose<STooltipTargetApi>({ getElement })
+</script>
+
+<style lang="postcss" src="./STooltipTarget.css" scoped></style>

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

@@ -1,6 +1,7 @@
 <template>
   <div
     v-bind="ownedAttrs.bindings()"
+    :data-s-tone="toneBinding['data-s-tone']"
     class="s-tabs"
     :data-testid="testId"
     :data-composition="composition"
@@ -9,7 +10,6 @@
     :data-density="tabDensity"
     :data-sizing="tabSizing"
     :data-list-width="tabListWidth"
-    :data-tone="tone"
     :data-close-mode="closeButtonMode"
     :data-close-visibility="closeButtonVisibility"
     :data-radius="surfaceRadius"
@@ -58,6 +58,7 @@ import {
   type VNodeChild,
 } from 'vue'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { resolveSemanticToneBinding } from '../../../internal/semanticTone'
 import { lastItem } from '../../../internal/es2020'
 import {
   tabsContextKey,
@@ -80,6 +81,7 @@ export type STabsComposition = 'managed' | 'custom'
 export type STabsVariant = 'default' | 'flat' | 'bottom' | 'icon-only' | 'icon-with-label'
 export type STabsActivationMode = 'automatic' | 'manual'
 export type STabsTone = 'primary' | 'success'
+const TABS_TONES = ['primary', 'success'] as const satisfies readonly STabsTone[]
 export type STabsSizing =
   | 'content'
   | 'compact'
@@ -176,6 +178,12 @@ const slots = defineSlots<{
   controls?: () => VNodeChild
 }>()
 const ownedAttrs = useOwnedAttrs({ component: 'STabs', owner: 'tabs state and layout root' })
+const toneBinding = computed(() => resolveSemanticToneBinding(
+  'STabs',
+  'tone',
+  props.tone,
+  TABS_TONES,
+))
 
 function assertStableKey(value: unknown, coordinate: string): asserts value is string {
   if (typeof value !== 'string' || !value.trim() || value !== value.trim()) {
@@ -569,12 +577,12 @@ defineExpose({
   --s-tab-selected-border-color: var(--color-primary-400);
   --s-tab-disabled-color: var(--color-surface-600);
 }
-.s-tabs[data-tone='success'] {
+.s-tabs[data-s-tone='success'] {
   --s-tab-hover-color: var(--color-success-700);
   --s-tab-selected-color: var(--color-success-700);
   --s-tab-selected-border-color: var(--color-success-600);
 }
-:global(.dark) .s-tabs[data-tone='success'] {
+:global(.dark) .s-tabs[data-s-tone='success'] {
   --s-tab-hover-color: var(--color-success-300);
   --s-tab-selected-color: var(--color-success-300);
   --s-tab-selected-border-color: var(--color-success-400);

package/src/internal/ownedAttrs.ts

@@ -294,6 +294,9 @@ export const ownedAttributeSchemas = Object.freeze({
     'data-testid': 'data',
     id: 'string',
   }),
+  STooltipTarget: defineOwnedAttributeSchema({
+    'data-testid': 'data',
+  }),
   SVirtualList: defineOwnedAttributeSchema({}),
   SAsyncState: defineOwnedAttributeSchema({}),
   SDataGrid: defineOwnedAttributeSchema({}),

package/src/internal/pillSurface.ts

@@ -2,6 +2,7 @@ import {
   validateBoolean,
   validateExactString,
 } from './runtimeContract'
+import { resolveSemanticToneBinding } from './semanticTone'
 
 const PILL_KINDS = ['badge', 'chip'] as const
 const PILL_SEVERITIES = [
@@ -43,7 +44,7 @@ export interface PillSurfaceContract {
 
 export interface PillSurfaceBindings {
   'data-s-pill-surface': PillSurfaceKind
-  'data-s-feedback-tone': PillSurfaceSeverity
+  'data-s-tone': PillSurfaceSeverity
   'data-s-pill-size': PillSurfaceSize
   'data-s-pill-dot'?: 'true'
   'data-s-pill-closable'?: 'true'
@@ -62,7 +63,7 @@ export function resolvePillSurfaceBindings(
   contract: PillSurfaceContract,
 ): PillSurfaceBindings {
   const kind = validateExactString(owner, 'pill kind', contract.kind, PILL_KINDS)
-  const severity = validateExactString(owner, 'severity', contract.severity, PILL_SEVERITIES)
+  const toneBinding = resolveSemanticToneBinding(owner, 'severity', contract.severity, PILL_SEVERITIES)
   const size = validateExactString(owner, 'size', contract.size, PILL_SIZES)
   const maxWidth = validateExactString(owner, 'maxWidth', contract.maxWidth, PILL_MAX_WIDTHS)
   const iconMotion = validateExactString(owner, 'iconMotion', contract.iconMotion, PILL_ICON_MOTIONS)
@@ -80,7 +81,7 @@ export function resolvePillSurfaceBindings(
 
   return {
     'data-s-pill-surface': kind,
-    'data-s-feedback-tone': severity,
+    ...toneBinding,
     'data-s-pill-size': size,
     ...(dot ? { 'data-s-pill-dot': 'true' as const } : {}),
     ...(closable ? { 'data-s-pill-closable': 'true' as const } : {}),

package/src/internal/semanticTone.ts

@@ -0,0 +1,23 @@
+import { validateExactString } from './runtimeContract'
+
+/** Единственный internal DOM marker для component-owned visual tone. */
+export const SEMANTIC_TONE_ATTRIBUTE = 'data-s-tone' as const
+
+export type SemanticToneBinding<Tone extends string> = Readonly<{
+  'data-s-tone': Tone
+}>
+
+/**
+ * Проверяет component-specific tone vocabulary и создаёт единый namespaced DOM binding.
+ * Validates a component-specific tone vocabulary and creates the canonical namespaced DOM binding.
+ */
+export function resolveSemanticToneBinding<const Tones extends readonly string[]>(
+  owner: string,
+  coordinate: string,
+  value: unknown,
+  tones: Tones,
+): SemanticToneBinding<Tones[number]> {
+  return {
+    [SEMANTIC_TONE_ATTRIBUTE]: validateExactString(owner, coordinate, value, tones),
+  }
+}

package/src/styles/style.css

@@ -26,37 +26,37 @@ body {
 }
 
 @layer components {
-  :where([data-s-feedback-tone="primary"]) {
+  :where([data-s-tone="primary"]) {
     --s-feedback-tone-background: var(--s-feedback-primary-background);
     --s-feedback-tone-foreground: var(--s-feedback-primary-foreground);
   }
 
-  :where([data-s-feedback-tone="secondary"]) {
+  :where([data-s-tone="secondary"]) {
     --s-feedback-tone-background: var(--s-feedback-secondary-background);
     --s-feedback-tone-foreground: var(--s-feedback-secondary-foreground);
   }
 
-  :where([data-s-feedback-tone="success"]) {
+  :where([data-s-tone="success"]) {
     --s-feedback-tone-background: var(--s-feedback-success-background);
     --s-feedback-tone-foreground: var(--s-feedback-success-foreground);
   }
 
-  :where([data-s-feedback-tone="info"]) {
+  :where([data-s-tone="info"]) {
     --s-feedback-tone-background: var(--s-feedback-info-background);
     --s-feedback-tone-foreground: var(--s-feedback-info-foreground);
   }
 
-  :where([data-s-feedback-tone="warn"]) {
+  :where([data-s-tone="warn"]) {
     --s-feedback-tone-background: var(--s-feedback-warn-background);
     --s-feedback-tone-foreground: var(--s-feedback-warn-foreground);
   }
 
-  :where([data-s-feedback-tone="danger"]) {
+  :where([data-s-tone="danger"]) {
     --s-feedback-tone-background: var(--s-feedback-danger-background);
     --s-feedback-tone-foreground: var(--s-feedback-danger-foreground);
   }
 
-  :where([data-s-feedback-tone="contrast"]) {
+  :where([data-s-tone="contrast"]) {
     --s-feedback-tone-background: var(--s-feedback-contrast-background);
     --s-feedback-tone-foreground: var(--s-feedback-contrast-foreground);
   }