@pgcorp/ui-kit 0.1.0

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

@@ -0,0 +1,152 @@
+<template>
+  <div
+    v-bind="ownedAttrs.bindings()"
+    class="s-message"
+    :data-severity="validatedSeverity"
+    :data-size="validatedSize"
+    :role="liveAttributes.role"
+    :aria-live="liveAttributes.ariaLive"
+    :aria-atomic="liveAttributes.ariaAtomic"
+  >
+    <div class="s-message-icon">
+      <component
+        :is="iconComponent"
+        class="s-message-icon-graphic"
+        aria-hidden="true"
+      />
+    </div>
+    <div class="s-message-content">
+      <span v-if="title" class="s-message-title">{{ title }}</span>
+      <div class="s-message-body">
+        <slot />
+      </div>
+    </div>
+    <div v-if="dismissAction" class="s-message-close">
+      <SButton
+        label=""
+        size="sm"
+        appearance="ghost"
+        severity="secondary"
+        shape="circle"
+        icon-only
+        :leading-icon="X"
+        :title="dismissAction.label"
+        :aria-label="dismissAction.label"
+        :disabled="dismissAction.disabled"
+        @click="requestDismiss"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { X } from '../../icons/sputnigUiIcons'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import {
+  resolveFeedbackLive,
+  resolveFeedbackPresentation,
+  type FeedbackLiveMode,
+  type FeedbackSeverity,
+} from '../../../internal/feedbackPresentation'
+import SButton from '../controls/SButton.vue'
+import {
+  validateBoolean,
+  validateExactString,
+  validateNonEmptyString,
+} from '../../../internal/runtimeContract'
+
+defineOptions({ inheritAttrs: false })
+
+export type Severity = FeedbackSeverity
+
+/** Семантический размер message surface. / Semantic message-surface size. */
+export type SMessageSize = 'sm' | 'md'
+
+/** Управляемое dismiss-действие, которое только отправляет intent родителю. / Controlled dismiss action that only emits intent to the parent. */
+export interface SMessageDismissAction {
+  label: string
+  disabled: boolean
+}
+
+/** Typed payload управляемого dismiss intent. / Typed payload of a controlled dismiss intent. */
+export interface SMessageDismissEvent {
+  source: 'close-button'
+  nativeEvent: MouseEvent
+}
+
+const MESSAGE_SEVERITIES = ['info', 'success', 'warn', 'danger'] as const satisfies readonly Severity[]
+const MESSAGE_LIVE_MODES = ['off', 'polite', 'assertive', 'auto'] as const satisfies readonly FeedbackLiveMode[]
+const MESSAGE_SIZES = ['sm', 'md'] as const satisfies readonly SMessageSize[]
+const DEFAULT_DISMISS_LABEL = 'Закрыть'
+
+export interface Props {
+  severity?: Severity
+  title?: string
+  closable?: boolean
+  dismissLabel?: string
+  dismissDisabled?: boolean
+  live?: FeedbackLiveMode
+  /** Семантический размер и padding сообщения. / Semantic message size and padding. */
+  size?: SMessageSize
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  severity: 'info',
+  title: undefined,
+  closable: false,
+  dismissLabel: DEFAULT_DISMISS_LABEL,
+  dismissDisabled: false,
+  live: 'off',
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  dismiss: [event: SMessageDismissEvent]
+}>()
+const ownedAttrs = useOwnedAttrs({ component: 'SMessage', owner: 'message root' })
+
+const validatedSeverity = computed<Severity>(() => validateExactString(
+  'SMessage',
+  'severity',
+  props.severity,
+  MESSAGE_SEVERITIES,
+))
+const validatedLive = computed<FeedbackLiveMode>(() => validateExactString(
+  'SMessage',
+  'live',
+  props.live,
+  MESSAGE_LIVE_MODES,
+))
+const validatedSize = computed<SMessageSize>(() => validateExactString(
+  'SMessage',
+  'size',
+  props.size,
+  MESSAGE_SIZES,
+))
+const dismissAction = computed<SMessageDismissAction | undefined>(() => {
+  const closable = validateBoolean('SMessage', 'closable', props.closable)
+  const disabled = validateBoolean('SMessage', 'dismissDisabled', props.dismissDisabled)
+  const label = validateNonEmptyString('SMessage', 'dismissLabel', props.dismissLabel)
+  if (!closable) {
+    if (disabled || label !== DEFAULT_DISMISS_LABEL) {
+      throw new TypeError(
+        'SMessage: dismissLabel/dismissDisabled применяются только при closable=true. '
+        + '/ SMessage: dismissLabel/dismissDisabled apply only when closable=true.',
+      )
+    }
+    return undefined
+  }
+  return { label, disabled }
+})
+
+const presentation = computed(() => resolveFeedbackPresentation(validatedSeverity.value))
+const iconComponent = computed(() => presentation.value.icon)
+const liveAttributes = computed(() => resolveFeedbackLive(validatedSeverity.value, validatedLive.value))
+
+function requestDismiss(nativeEvent: MouseEvent): void {
+  emit('dismiss', { source: 'close-button', nativeEvent })
+}
+</script>
+
+<style lang="postcss" src="./SMessage.css" scoped></style>

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

@@ -0,0 +1,32 @@
+@reference "../../../styles/reference.css";
+
+.s-metric-card__layout { @apply flex min-h-0 min-w-0 w-full flex-1 flex-col gap-3 text-left; }
+.s-metric-card__layout[data-centered='true'] { @apply items-center justify-center text-center; }
+.s-metric-card__icon { @apply shrink-0 text-primary-500; }
+.s-metric-card__icon-glyph { @apply h-8 w-8; }
+.s-metric-card__body { @apply min-w-0; }
+.s-metric-card__heading { @apply flex min-w-0 items-start justify-between gap-3; }
+.s-metric-card__layout[data-centered='true'] .s-metric-card__heading { @apply justify-center; }
+.s-metric-card__title { @apply min-w-0 text-xs font-medium uppercase tracking-[0.18em] text-surface-500 dark:text-surface-400; }
+.s-metric-card__value { @apply mt-2 min-w-0 font-semibold tracking-tight text-surface-900 dark:text-surface-50; }
+.s-metric-card__value[data-size='md'] { @apply text-2xl; }
+.s-metric-card__value[data-size='lg'] { @apply text-[1.9rem] leading-tight; }
+.s-metric-card__value[data-size='xl'] { @apply text-[2.2rem] leading-none; }
+.s-metric-card__description { @apply mt-2 min-w-0 text-sm text-surface-500 dark:text-surface-400; }
+.s-metric-card__value[data-overflow='wrap'], .s-metric-card__description[data-overflow='wrap'] {
+  @apply whitespace-normal;
+  overflow-wrap: anywhere;
+}
+.s-metric-card__value[data-overflow='clamp-2'], .s-metric-card__description[data-overflow='clamp-2'] {
+  @apply min-w-0 overflow-hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+.s-metric-card__value[data-overflow='truncate'], .s-metric-card__description[data-overflow='truncate'] {
+  @apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap;
+}
+.s-metric-card__progress { @apply mt-auto space-y-2; }
+.s-metric-card__progress-label { @apply text-xs text-surface-500; }

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

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { computed, watchEffect } from 'vue'
+import type { Component } from 'vue'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import type { InteractiveSurfaceContract, InteractiveSurfacePadding, InteractiveSurfaceRadius, InteractiveSurfaceTone } from '../controls/SInteractiveSurface.vue'
+import SActionCard from './SActionCard.vue'
+import SBadge from './SBadge.vue'
+import type { BadgeSeverity } from './SBadge.vue'
+import SProgressBar from './SProgressBar.vue'
+
+defineOptions({ inheritAttrs: false })
+
+export type MetricOverflow = 'wrap' | 'clamp-2' | 'truncate'
+export type MetricValueSize = 'md' | 'lg' | 'xl'
+
+export interface Props {
+  title: string
+  value?: string | number
+  description?: string
+  descriptionTitle?: string
+  icon?: Component
+  centered?: boolean
+  density?: 'compact' | 'comfortable'
+  tone?: InteractiveSurfaceTone
+  surface?: InteractiveSurfaceContract
+  selected?: boolean
+  fill?: boolean
+  padding?: InteractiveSurfacePadding
+  radius?: InteractiveSurfaceRadius
+  valueSize?: MetricValueSize
+  valueOverflow?: MetricOverflow
+  descriptionOverflow?: MetricOverflow
+  badgeLabel?: string
+  badgeSeverity?: BadgeSeverity
+  progressValue?: number | null
+  progressLabel?: string
+  progressSeverity?: 'primary' | 'success' | 'info' | 'warn' | 'danger' | 'neutral'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: undefined,
+  description: undefined,
+  descriptionTitle: undefined,
+  icon: undefined,
+  centered: false,
+  density: 'comfortable',
+  tone: 'default',
+  surface: undefined,
+  selected: false,
+  fill: false,
+  padding: undefined,
+  radius: 'xl',
+  valueSize: undefined,
+  valueOverflow: 'wrap',
+  descriptionOverflow: 'wrap',
+  badgeLabel: undefined,
+  badgeSeverity: 'secondary',
+  progressValue: null,
+  progressLabel: undefined,
+  progressSeverity: 'primary',
+})
+
+const emit = defineEmits<{ activate: [event: MouseEvent] }>()
+const ownedAttrs = useOwnedAttrs({ component: 'SMetricCard', owner: 'metric card surface' })
+const resolvedProgressValue = computed(() => props.progressValue)
+const resolvedProgressLabel = computed(() => props.progressLabel ?? `${props.progressValue}%`)
+const progressAccessibility = computed(() => ({
+  mode: 'label' as const,
+  label: `${props.title}: ${resolvedProgressLabel.value}`,
+}))
+const resolvedValueSize = computed(() => props.valueSize ?? (props.density === 'compact' ? 'md' : 'xl'))
+const resolvedSurface = computed<InteractiveSurfaceContract>(() => props.surface ?? { mode: 'static' })
+const resolvedPadding = computed<InteractiveSurfacePadding>(() => props.padding ?? (props.density === 'compact' ? 'sm' : 'md'))
+
+watchEffect(() => {
+  if (props.progressValue === null) return
+  if (!Number.isFinite(props.progressValue) || props.progressValue < 0 || props.progressValue > 100) {
+    throw new RangeError('SMetricCard: progressValue должен быть конечным числом от 0 до 100')
+  }
+})
+</script>
+
+<template>
+  <SActionCard
+    v-bind="ownedAttrs.bindings()"
+    :surface="resolvedSurface"
+    :selected="selected"
+    :tone="tone"
+    :density="density"
+    :padding="resolvedPadding"
+    :radius="radius"
+    :fill="fill ? 'container' : 'content'"
+    @activate="emit('activate', $event)"
+  >
+    <div class="s-metric-card__layout" :data-centered="centered || undefined">
+      <div v-if="icon || $slots.icon" class="s-metric-card__icon" aria-hidden="true">
+        <slot name="icon"><component :is="icon" class="s-metric-card__icon-glyph" /></slot>
+      </div>
+      <div class="s-metric-card__body">
+        <div class="s-metric-card__heading">
+          <div class="s-metric-card__title">{{ title }}</div>
+          <SBadge v-if="badgeLabel" :severity="badgeSeverity">{{ badgeLabel }}</SBadge>
+        </div>
+        <div v-if="value !== undefined" class="s-metric-card__value" :data-size="resolvedValueSize" :data-overflow="valueOverflow">{{ value }}</div>
+        <div v-if="description" class="s-metric-card__description" :data-overflow="descriptionOverflow" :title="descriptionTitle">{{ description }}</div>
+      </div>
+      <div v-if="resolvedProgressValue !== null" class="s-metric-card__progress">
+        <SProgressBar :accessibility="progressAccessibility" :value="resolvedProgressValue" :severity="progressSeverity" />
+        <div class="s-metric-card__progress-label">{{ resolvedProgressLabel }}</div>
+      </div>
+      <slot />
+    </div>
+    <template v-if="$slots.actions" #actions><slot name="actions" /></template>
+  </SActionCard>
+</template>
+
+<style lang="postcss" src="./SMetricCard.css" scoped></style>

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

@@ -0,0 +1,84 @@
+@reference "../../../styles/reference.css";
+
+.s-progress-bar {
+  @apply w-full h-4 rounded-full;
+  background-color: var(--s-progress-bar-track-surface);
+  @apply overflow-hidden relative;
+}
+
+.s-progress-bar[data-size='xs'] { @apply h-1.5; }
+.s-progress-bar[data-size='sm'] { @apply h-2; }
+
+.s-progress-bar-value {
+  @apply h-full rounded-full;
+  @apply transition-all ease-in-out;
+  transition-duration: var(--s-motion-deliberate);
+  @apply flex items-center justify-center;
+}
+
+.s-progress-bar-label {
+  color: var(--s-progress-bar-label-foreground);
+  @apply text-xs font-semibold;
+}
+
+/* Severity Colors */
+.s-progress-bar-value[data-severity='primary'] {
+  background-color: var(--s-progress-bar-fill-primary);
+}
+.s-progress-bar-value[data-severity='success'] {
+  background-color: var(--s-progress-bar-fill-success);
+}
+.s-progress-bar-value[data-severity='info'] {
+  background-color: var(--s-progress-bar-fill-info);
+}
+.s-progress-bar-value[data-severity='warn'] {
+  background-color: var(--s-progress-bar-fill-warn);
+}
+.s-progress-bar-value[data-severity='danger'] {
+  background-color: var(--s-progress-bar-fill-danger);
+}
+.s-progress-bar-value[data-severity='neutral'] {
+  background-color: var(--s-progress-bar-fill-neutral);
+}
+
+/* --- Indeterminate Mode --- */
+.s-progress-bar-value--indeterminate {
+  @apply absolute h-full w-full top-0 left-0;
+}
+
+.s-progress-bar-value--indeterminate::before {
+  content: '';
+  @apply absolute h-full top-0;
+  width: 40%;
+  border-radius: var(--s-radius-pill);
+  animation: s-progress-bar-indeterminate-anim 2s infinite ease-in-out;
+}
+
+@keyframes s-progress-bar-indeterminate-anim {
+  0% {
+    left: -50%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+/* Indeterminate Severity Colors */
+.s-progress-bar-value--indeterminate[data-severity='primary']::before {
+  background-color: var(--s-progress-bar-fill-primary);
+}
+.s-progress-bar-value--indeterminate[data-severity='success']::before {
+  background-color: var(--s-progress-bar-fill-success);
+}
+.s-progress-bar-value--indeterminate[data-severity='info']::before {
+  background-color: var(--s-progress-bar-fill-info);
+}
+.s-progress-bar-value--indeterminate[data-severity='warn']::before {
+  background-color: var(--s-progress-bar-fill-warn);
+}
+.s-progress-bar-value--indeterminate[data-severity='danger']::before {
+  background-color: var(--s-progress-bar-fill-danger);
+}
+.s-progress-bar-value--indeterminate[data-severity='neutral']::before {
+  background-color: var(--s-progress-bar-indeterminate-neutral-fill);
+}

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

@@ -0,0 +1,114 @@
+<template>
+  <div
+    v-bind="ownedAttrs.bindings()"
+    class="s-progress-bar"
+    :class="{ 's-progress-bar--indeterminate': mode === 'indeterminate' }"
+    :role="accessibility.mode === 'decorative' ? undefined : 'progressbar'"
+    :aria-label="accessibility.mode === 'label' ? accessibility.label : undefined"
+    :aria-labelledby="accessibility.mode === 'labelledby' ? accessibility.id : undefined"
+    :aria-hidden="accessibility.mode === 'decorative' || undefined"
+    :aria-valuenow="accessibility.mode !== 'decorative' && mode === 'determinate' ? value : undefined"
+    :data-size="size"
+    :aria-valuemin="accessibility.mode === 'decorative' ? undefined : 0"
+    :aria-valuemax="accessibility.mode === 'decorative' ? undefined : 100"
+  >
+    <div
+      v-if="mode === 'determinate'"
+      class="s-progress-bar-value"
+      :data-severity="severity"
+      :style="{ width: `${value}%` }"
+    >
+      <span v-if="showValue" class="s-progress-bar-label">
+        <slot :value="value">{{ value }}%</slot>
+      </span>
+    </div>
+    <div
+      v-else
+      class="s-progress-bar-value--indeterminate"
+      :data-severity="severity"
+    ></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { watchEffect } from 'vue';
+import { useOwnedAttrs } from '../../../internal/ownedAttrs';
+
+defineOptions({ inheritAttrs: false });
+
+export type Severity = 'primary' | 'success' | 'info' | 'warn' | 'danger' | 'neutral';
+export type ProgressBarMode = 'determinate' | 'indeterminate';
+export type SProgressBarAccessibility =
+  | { readonly mode: 'decorative' }
+  | { readonly mode: 'label'; readonly label: string }
+  | { readonly mode: 'labelledby'; readonly id: string };
+
+export interface Props {
+  /** Обязательное accessible-name решение либо явный decorative режим. / Required accessible-name decision or explicit decorative mode. */
+  accessibility: SProgressBarAccessibility;
+  value?: number;
+  severity?: Severity;
+  showValue?: boolean;
+  mode?: ProgressBarMode;
+  size?: 'xs' | 'sm' | 'md';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: 0,
+  severity: 'primary',
+  showValue: false,
+  mode: 'determinate',
+  size: 'md',
+});
+
+const ownedAttrs = useOwnedAttrs({ component: 'SProgressBar', owner: 'progressbar root' });
+
+watchEffect(() => {
+  if (!Number.isFinite(props.value) || props.value < 0 || props.value > 100) {
+    throw new RangeError('SProgressBar: value должен быть конечным числом от 0 до 100');
+  }
+  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)}"`);
+  }
+  if (!['xs', 'sm', 'md'].includes(props.size)) {
+    throw new TypeError(`SProgressBar: неизвестный size "${String(props.size)}"`);
+  }
+  if (props.showValue && props.mode !== 'determinate') {
+    throw new Error('SProgressBar: showValue разрешён только в determinate mode');
+  }
+
+  const contract: unknown = props.accessibility;
+  if (typeof contract !== 'object' || contract === null || Array.isArray(contract)) {
+    throw new TypeError('SProgressBar: accessibility должен быть discriminated object');
+  }
+  const record = contract as Record<string, unknown>;
+  const allowedKeys = record.mode === 'label'
+    ? ['mode', 'label']
+    : record.mode === 'labelledby'
+      ? ['mode', 'id']
+      : ['mode'];
+  const unexpected = Object.keys(record).filter((key) => !allowedKeys.includes(key));
+  if (unexpected.length > 0) {
+    throw new Error(`SProgressBar: accessibility.mode="${String(record.mode)}" не допускает поля ${unexpected.join(', ')}`);
+  }
+  if (record.mode === 'decorative') return;
+  if (record.mode === 'label') {
+    if (typeof record.label !== 'string' || record.label.trim().length === 0) {
+      throw new TypeError('SProgressBar: accessibility.label должен быть непустой строкой');
+    }
+    return;
+  }
+  if (record.mode === 'labelledby') {
+    if (typeof record.id !== 'string' || record.id.trim().length === 0 || /\s/u.test(record.id)) {
+      throw new TypeError('SProgressBar: accessibility.id должен быть одним непустым DOM id');
+    }
+    return;
+  }
+  throw new TypeError(`SProgressBar: неизвестный accessibility.mode "${String(record.mode)}"`);
+});
+</script>
+
+<style lang="postcss" src="./SProgressBar.css" scoped></style>

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

@@ -0,0 +1,59 @@
+@reference "../../../styles/reference.css";
+
+.s-progress-indicator {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: var(--s-progress-indicator-size);
+  height: var(--s-progress-indicator-size);
+  color: currentColor;
+}
+
+.s-progress-indicator[data-show-label='true'] {
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  gap: var(--spacing-2);
+  justify-content: flex-start;
+}
+
+.s-progress-indicator[data-size='xs'] { --s-progress-indicator-size: var(--s-icon-size-xs); }
+.s-progress-indicator[data-size='sm'] { --s-progress-indicator-size: var(--s-icon-size-sm); }
+.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__graphic {
+  width: 100%;
+  height: 100%;
+}
+
+.s-progress-indicator[data-show-label='true'] .s-progress-indicator__graphic {
+  flex: 0 0 var(--s-progress-indicator-size);
+  width: var(--s-progress-indicator-size);
+  height: var(--s-progress-indicator-size);
+}
+
+.s-progress-indicator__label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: currentColor;
+}
+
+.s-progress-indicator[data-motion='spin'] .s-progress-indicator__graphic {
+  animation: s-progress-indicator-spin calc(var(--s-motion-deliberate) * 4) linear infinite;
+}
+
+@keyframes s-progress-indicator-spin {
+  to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .s-progress-indicator__graphic { animation: none; }
+}

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

@@ -0,0 +1,104 @@
+<template>
+  <span
+    v-bind="ownedAttrs.bindings()"
+    class="s-progress-indicator"
+    :data-size="size"
+    :data-tone="tone"
+    :data-motion="presentation.motion"
+    :data-show-label="validatedShowLabel || undefined"
+    :role="liveAttributes.role"
+    :aria-live="liveAttributes.ariaLive"
+    :aria-atomic="liveAttributes.ariaAtomic"
+    :aria-label="accessibleLabel"
+    :aria-hidden="accessibility.mode === 'decorative' || undefined"
+  >
+    <component
+      :is="presentation.icon"
+      class="s-progress-indicator__graphic"
+      :data-sputnig-ui-icon="presentation.iconName"
+      data-sputnig-ui-icon-color-mode="auto"
+      data-sputnig-ui-icon-set="classic"
+    />
+    <span v-if="validatedShowLabel && accessibility.mode === 'status'" class="s-progress-indicator__label">
+      {{ accessibility.label }}
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed, watchEffect } from 'vue'
+
+import { resolveFeedbackIndicator, resolveFeedbackLive, type FeedbackLiveMode } from '../../../internal/feedbackPresentation'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { validateBoolean } from '../../../internal/runtimeContract'
+
+defineOptions({ inheritAttrs: false })
+
+export type SProgressIndicatorSize = 'xs' | 'sm' | 'md' | 'lg'
+export type SProgressIndicatorTone = 'current' | 'neutral' | 'info' | 'success' | 'warn' | 'danger'
+
+/**
+ * Декоративный progress принадлежит labelled parent; standalone status требует собственного имени.
+ * Decorative progress belongs to a labelled parent; a standalone status requires its own name.
+ */
+export type SProgressIndicatorAccessibility =
+  | { readonly mode: 'decorative' }
+  | {
+      readonly mode: 'status'
+      readonly label: string
+      readonly live?: Exclude<FeedbackLiveMode, 'off'>
+    }
+
+export interface Props {
+  accessibility: SProgressIndicatorAccessibility
+  size?: SProgressIndicatorSize
+  tone?: SProgressIndicatorTone
+  /** Показывает status label рядом с индикатором. / Shows the status label next to the indicator. */
+  showLabel?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'sm',
+  tone: 'current',
+  showLabel: false,
+})
+
+const ownedAttrs = useOwnedAttrs({ component: 'SProgressIndicator', owner: 'progress indicator root' })
+const presentation = resolveFeedbackIndicator('progress')
+const validatedShowLabel = computed(() => validateBoolean('SProgressIndicator', 'showLabel', props.showLabel))
+const feedbackTone = computed(() => props.tone === 'current' ? 'info' : props.tone)
+const accessibleLabel = computed(() => props.accessibility.mode === 'status'
+  ? props.accessibility.label
+  : undefined)
+const liveAttributes = computed(() => props.accessibility.mode === 'status'
+  ? resolveFeedbackLive(feedbackTone.value, props.accessibility.live ?? 'auto')
+  : {})
+
+watchEffect(() => {
+  const contract: unknown = props.accessibility
+  if (typeof contract !== 'object' || contract === null || Array.isArray(contract)) {
+    throw new TypeError('SProgressIndicator: accessibility должен быть discriminated object')
+  }
+  const record = contract as Record<string, unknown>
+  if (validatedShowLabel.value && record.mode === 'decorative') {
+    throw new Error('SProgressIndicator: showLabel требует accessibility.mode="status" / showLabel requires accessibility.mode="status"')
+  }
+  const allowedKeys = record.mode === 'decorative' ? ['mode'] : ['mode', 'label', 'live']
+  const unexpected = Object.keys(record).filter((key) => !allowedKeys.includes(key))
+  if (unexpected.length > 0) {
+    throw new Error(`SProgressIndicator: accessibility.mode="${String(record.mode)}" не допускает поля ${unexpected.join(', ')}`)
+  }
+  if (record.mode === 'decorative') return
+  if (record.mode !== 'status') {
+    throw new TypeError(`SProgressIndicator: неизвестный accessibility.mode "${String(record.mode)}"`)
+  }
+  if (typeof record.label !== 'string' || record.label.trim().length === 0) {
+    throw new TypeError('SProgressIndicator: accessibility.label должен быть непустой строкой для mode="status"')
+  }
+  if (record.live !== undefined && !['auto', 'polite', 'assertive'].includes(String(record.live))) {
+    throw new TypeError(`SProgressIndicator: accessibility.live имеет недопустимое значение "${String(record.live)}"`)
+  }
+})
+</script>
+
+<style lang="postcss" src="./SProgressIndicator.css" scoped></style>