@pgcorp/ui-kit 0.10.0 → 0.10.2

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

@@ -1,272 +0,0 @@
-<template>
-  <div
-    v-if="validatedPresentation === 'chips'"
-    v-bind="ownedAttrs.bindings()"
-    class="s-linked-systems-list"
-    data-presentation="chips"
-    role="list"
-    :aria-label="validatedAccessibleLabel"
-  >
-    <span
-      v-for="item in validatedItems"
-      :key="item.id"
-      class="s-linked-systems-list__chip"
-      role="listitem"
-      :title="`${item.providerName}: ${item.externalId}`"
-    >
-      <SStatus
-        :label="item.syncStatus.label"
-        :tone="item.syncStatus.tone"
-        :title="item.syncStatus.title"
-        :icon="item.syncStatus.icon"
-        label-visibility="sr-only"
-        size="xs"
-      />
-      <SLink
-        v-if="item.externalUrl"
-        :href="item.externalUrl"
-        target="_blank"
-        external
-        variant="subtle"
-        underline="hover"
-        wrap="anywhere"
-        content-kind="identifier"
-      >
-        {{ item.externalId }}
-      </SLink>
-      <span v-else class="s-linked-systems-list__external-id">{{ item.externalId }}</span>
-    </span>
-  </div>
-  <SActionList v-else v-bind="ownedAttrs.bindings()" :accessible-label="validatedAccessibleLabel">
-    <SActionListItem
-      v-for="item in validatedItems"
-      :key="item.id"
-      :title="item.providerName"
-      :surface="{ mode: 'static' }"
-      :action-disabled="validatedActionsDisabled"
-      trailing-layout="responsive"
-    >
-      <template #description>
-        <SLink
-          v-if="item.externalUrl"
-          :href="item.externalUrl"
-          target="_blank"
-          external
-          variant="subtle"
-        >
-          {{ item.externalId }}
-        </SLink>
-        <span v-else>
-          {{ item.externalId }}
-        </span>
-      </template>
-      <template #status>
-        <SStatus
-          :label="item.syncStatus.label"
-          :tone="item.syncStatus.tone"
-          :title="item.syncStatus.title"
-          :icon="item.syncStatus.icon"
-          size="sm"
-        />
-      </template>
-      <template v-if="$slots.actions" #actions="{ disabled }">
-        <slot name="actions" :item="item" :disabled="disabled" />
-      </template>
-    </SActionListItem>
-  </SActionList>
-</template>
-
-<script lang="ts">
-import type { Component, VNodeChild } from 'vue'
-import type { StatusTone } from './SStatus.vue'
-
-export type LinkedSystemPresentation = 'list' | 'chips'
-
-export interface LinkedSystemSyncStatus {
-  readonly label: string
-  readonly tone: StatusTone
-  readonly title?: string
-  readonly icon?: Component | null
-}
-
-export interface LinkedSystemListItem {
-  readonly id: string
-  readonly providerName: string
-  readonly externalId: string
-  readonly externalUrl: string | null
-  readonly syncStatus: LinkedSystemSyncStatus
-}
-
-export interface Props<T extends LinkedSystemListItem = LinkedSystemListItem> {
-  readonly items: readonly T[]
-  readonly accessibleLabel?: string
-  /** List подходит для inspector, chips — для компактных строк сущностей. / List suits inspectors; chips suit compact entity rows. */
-  readonly presentation?: LinkedSystemPresentation
-  /** Единое disabled-состояние для слота действий. / Shared disabled state for the actions slot. */
-  readonly actionsDisabled?: boolean
-}
-
-export interface Slots<T extends LinkedSystemListItem = LinkedSystemListItem> {
-  actions?: (props: { readonly item: T, readonly disabled: boolean }) => VNodeChild
-}
-</script>
-
-<script setup lang="ts" generic="T extends LinkedSystemListItem = LinkedSystemListItem">
-import { computed, watchEffect } from 'vue'
-import { useUiKitLocale } from '../../../composables/useUiKitLocale'
-import { withErrorCause } from '../../../internal/es2020'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import {
-  validateBoolean,
-  validateExactString,
-  validateNonEmptyString,
-} from '../../../internal/runtimeContract'
-import SLink from '../controls/SLink.vue'
-import SActionList from './SActionList.vue'
-import SActionListItem from './SActionListItem.vue'
-import SStatus from './SStatus.vue'
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<Props<T>>(), {
-  accessibleLabel: undefined,
-  presentation: 'list',
-  actionsDisabled: false,
-})
-const { t } = useUiKitLocale()
-
-const slots = defineSlots<Slots<T>>()
-const ownedAttrs = useOwnedAttrs({ component: 'SLinkedSystemsList', owner: 'active linked-systems list root' })
-const validatedAccessibleLabel = computed(() => validateNonEmptyString(
-  'SLinkedSystemsList',
-  'accessibleLabel',
-  props.accessibleLabel ?? t('data.linkedSystems'),
-))
-const validatedPresentation = computed(() => validateExactString(
-  'SLinkedSystemsList',
-  'presentation',
-  props.presentation,
-  ['list', 'chips'] as const,
-))
-const validatedActionsDisabled = computed(() => validateBoolean(
-  'SLinkedSystemsList',
-  'actionsDisabled',
-  props.actionsDisabled,
-))
-
-function requireRecord(value: unknown, coordinate: string): Record<string, unknown> {
-  if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
-    return value as Record<string, unknown>
-  }
-  throw new TypeError(
-    `SLinkedSystemsList: ${coordinate} должен быть объектом. `
-    + `/ SLinkedSystemsList: ${coordinate} must be an object.`,
-  )
-}
-
-function validateExternalUrl(value: unknown, index: number): void {
-  const coordinate = `items[${index}].externalUrl`
-  if (value === null) return
-  const externalUrl = validateNonEmptyString('SLinkedSystemsList', coordinate, value)
-  let parsedUrl: URL
-  try {
-    parsedUrl = new URL(externalUrl)
-  } catch (error: unknown) {
-    throw withErrorCause(new TypeError(
-      `SLinkedSystemsList: ${coordinate} должен быть абсолютным HTTP(S) URL или null; получено ${JSON.stringify(externalUrl)}. `
-      + `/ SLinkedSystemsList: ${coordinate} must be an absolute HTTP(S) URL or null; received ${JSON.stringify(externalUrl)}.`,
-    ), error)
-  }
-  if (
-    (parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:')
-    && parsedUrl.hostname.length > 0
-    && externalUrl.trim() === externalUrl
-  ) return
-  throw new TypeError(
-    `SLinkedSystemsList: ${coordinate} должен быть абсолютным HTTP(S) URL без окружающих пробелов или null; получено ${JSON.stringify(externalUrl)}. `
-    + `/ SLinkedSystemsList: ${coordinate} must be an absolute HTTP(S) URL without surrounding whitespace or null; received ${JSON.stringify(externalUrl)}.`,
-  )
-}
-
-function validateSyncStatus(value: unknown, index: number): void {
-  const coordinate = `items[${index}].syncStatus`
-  const status = requireRecord(value, coordinate)
-  validateNonEmptyString('SLinkedSystemsList', `${coordinate}.label`, status.label)
-  validateExactString(
-    'SLinkedSystemsList',
-    `${coordinate}.tone`,
-    status.tone,
-    ['neutral', 'info', 'success', 'warn', 'danger'] as const,
-  )
-  if (status.title !== undefined) {
-    validateNonEmptyString('SLinkedSystemsList', `${coordinate}.title`, status.title)
-  }
-  if (
-    status.icon !== undefined
-    && status.icon !== null
-    && (
-      Array.isArray(status.icon)
-      || (typeof status.icon !== 'object' && typeof status.icon !== 'function')
-    )
-  ) {
-    throw new TypeError(
-      `SLinkedSystemsList: ${coordinate}.icon должен быть Vue Component, null или undefined. `
-      + `/ SLinkedSystemsList: ${coordinate}.icon must be a Vue Component, null, or undefined.`,
-    )
-  }
-}
-
-const validatedItems = computed<readonly T[]>(() => {
-  const candidate: unknown = props.items
-  if (!Array.isArray(candidate)) {
-    throw new TypeError(
-      'SLinkedSystemsList: items должен быть readonly-массивом linked-system объектов. '
-      + '/ SLinkedSystemsList: items must be a readonly array of linked-system objects.',
-    )
-  }
-  const identities = new Set<string>()
-  for (const [index, item] of candidate.entries()) {
-    const record = requireRecord(item, `items[${index}]`)
-    const identity = validateNonEmptyString('SLinkedSystemsList', `items[${index}].id`, record.id)
-    if (identities.has(identity)) {
-      throw new TypeError(
-        `SLinkedSystemsList: items должен содержать уникальные stable id; дублируется ${JSON.stringify(identity)}. `
-        + `/ SLinkedSystemsList: items must contain unique stable ids; duplicate ${JSON.stringify(identity)}.`,
-      )
-    }
-    identities.add(identity)
-    validateNonEmptyString('SLinkedSystemsList', `items[${index}].providerName`, record.providerName)
-    validateNonEmptyString('SLinkedSystemsList', `items[${index}].externalId`, record.externalId)
-    validateExternalUrl(record.externalUrl, index)
-    validateSyncStatus(record.syncStatus, index)
-  }
-  return props.items
-})
-
-watchEffect(() => {
-  void validatedItems.value
-  void validatedAccessibleLabel.value
-  void validatedActionsDisabled.value
-  if (validatedPresentation.value === 'chips' && slots.actions) {
-    throw new Error('SLinkedSystemsList: presentation="chips" не принимает actions slot. / Chips presentation does not accept the actions slot.')
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@reference "../../../styles/reference.css";
-
-.s-linked-systems-list[data-presentation='chips'] {
-  @apply flex min-w-0 flex-wrap items-center gap-1.5;
-}
-
-.s-linked-systems-list__chip {
-  @apply inline-flex min-w-0 items-center gap-1.5 rounded-full border border-surface-200 bg-surface-100 px-1.5 py-0.5 text-xs dark:border-surface-700 dark:bg-surface-700/50;
-}
-
-.s-linked-systems-list__external-id {
-  @apply min-w-0 font-mono;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-}
-</style>

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

@@ -1,159 +0,0 @@
-<template>
-  <div
-    v-bind="ownedAttrs.bindings()"
-    :data-s-tone="toneBinding['data-s-tone']"
-    class="s-message"
-    :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 { useUiKitLocale } from '../../../composables/useUiKitLocale'
-import { X } from '../../icons/sputnigUiIcons'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import { resolveSemanticToneBinding } from '../../../internal/semanticTone'
-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[]
-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: undefined,
-  dismissDisabled: false,
-  live: 'off',
-  size: 'md',
-})
-const { t } = useUiKitLocale()
-
-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 toneBinding = computed(() => resolveSemanticToneBinding(
-  'SMessage',
-  'severity',
-  validatedSeverity.value,
-  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 ?? t('feedback.dismissMessage'))
-  if (!closable) {
-    if (disabled || props.dismissLabel !== undefined) {
-      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, t))
-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.vue

@@ -1,118 +0,0 @@
-<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>
-      <div v-if="$slots.chart" class="s-metric-card__chart"><slot name="chart" /></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.vue

@@ -1,120 +0,0 @@
-<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'"
-      :data-s-tone="toneBinding['data-s-tone']"
-      class="s-progress-bar-value"
-      :style="{ width: `${value}%` }"
-    >
-      <span v-if="showValue" class="s-progress-bar-label">
-        <slot :value="value">{{ value }}%</slot>
-      </span>
-    </div>
-    <div
-      v-else
-      :data-s-tone="toneBinding['data-s-tone']"
-      class="s-progress-bar-value--indeterminate"
-    ></div>
-  </div>
-</template>
-
-<script setup lang="ts">
-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' }
-  | { 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' });
-const toneBinding = computed(() => resolveSemanticToneBinding(
-  'SProgressBar',
-  'severity',
-  props.severity,
-  PROGRESS_SEVERITIES,
-));
-
-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)}"`);
-  }
-  void toneBinding.value;
-  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>