@pgcorp/ui-kit 0.10.0 → 0.10.2

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

@@ -1,495 +0,0 @@
-<script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from 'vue'
-import { useUiKitLocale } from '../../../composables/useUiKitLocale'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import { resolveChartModel } from '../../../internal/chartGeometry'
-import type { ChartDimensions } from '../../../internal/chartGeometry'
-import {
-  validateBoundedInteger,
-  validateDomId,
-  validateExactString,
-  validateNonEmptyString,
-} from '../../../internal/runtimeContract'
-import SEmptyState from './SEmptyState.vue'
-import type {
-  SChartAccessibility,
-  SChartBarMode,
-  SChartCategory,
-  SChartCurve,
-  SChartDataLabels,
-  SChartDataTablePresentation,
-  SChartDomain,
-  SChartGrid,
-  SChartLegend,
-  SChartMarkers,
-  SChartRadialLabel,
-  SChartSeries,
-  SChartSize,
-  SChartType,
-  SChartXLabels,
-} from './chart'
-
-defineOptions({ inheritAttrs: false })
-
-export interface Props {
-  type: SChartType
-  categories: readonly SChartCategory[]
-  series: readonly SChartSeries[]
-  accessibility: SChartAccessibility
-  size?: SChartSize
-  domain?: SChartDomain
-  xAxis?: boolean
-  yAxis?: boolean
-  xAxisLabel?: string
-  yAxisLabel?: string
-  xLabels?: SChartXLabels
-  yTickCount?: number
-  grid?: SChartGrid
-  legend?: SChartLegend
-  dataLabels?: SChartDataLabels
-  markers?: SChartMarkers
-  curve?: SChartCurve
-  barMode?: SChartBarMode
-  radialLabel?: SChartRadialLabel
-  centerLabel?: string
-  centerValue?: string
-  dataTablePresentation?: SChartDataTablePresentation
-  emptyLabel?: string
-  valueFormatter?: (value: number) => string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: 'md',
-  domain: () => ({ mode: 'auto' }),
-  xAxis: undefined,
-  yAxis: undefined,
-  xAxisLabel: undefined,
-  yAxisLabel: undefined,
-  xLabels: undefined,
-  yTickCount: 5,
-  grid: undefined,
-  legend: undefined,
-  dataLabels: 'none',
-  markers: undefined,
-  curve: 'smooth',
-  barMode: 'grouped',
-  radialLabel: 'percentage',
-  centerLabel: undefined,
-  centerValue: undefined,
-  dataTablePresentation: 'assistive',
-  emptyLabel: undefined,
-  valueFormatter: undefined,
-})
-const { t } = useUiKitLocale()
-
-const ownedAttrs = useOwnedAttrs({ component: 'SChart', owner: 'chart root' })
-const viewportElement = ref<HTMLElement | null>(null)
-const viewportDimensions = shallowRef<ChartDimensions | undefined>(undefined)
-let resizeObserver: ResizeObserver | undefined
-const numberFormatter = new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 })
-const validatedType = computed(() => validateExactString(
-  'SChart', 'type', props.type, ['line', 'area', 'bar', 'pie', 'donut'] as const,
-))
-const validatedSize = computed(() => validateExactString(
-  'SChart', 'size', props.size, ['compact', 'sm', 'md', 'lg'] as const,
-))
-const validatedXLabels = computed(() => validateExactString(
-  'SChart',
-  'xLabels',
-  props.xLabels ?? (props.size === 'compact' ? 'none' : 'auto'),
-  ['none', 'endpoints', 'auto', 'all'] as const,
-))
-const validatedGrid = computed(() => validateExactString(
-  'SChart',
-  'grid',
-  props.grid ?? (props.size === 'compact' || isRadial.value ? 'none' : 'horizontal'),
-  ['none', 'horizontal', 'vertical', 'both'] as const,
-))
-const validatedLegend = computed(() => validateExactString(
-  'SChart',
-  'legend',
-  props.legend ?? (props.size === 'compact' || (!isRadial.value && props.series.length <= 1) ? 'none' : 'bottom'),
-  ['none', 'top', 'bottom'] as const,
-))
-const validatedDataLabels = computed(() => validateExactString(
-  'SChart', 'dataLabels', props.dataLabels, ['none', 'latest', 'all'] as const,
-))
-const validatedMarkers = computed(() => validateExactString(
-  'SChart',
-  'markers',
-  props.markers ?? (props.type === 'line' || props.type === 'area' ? 'latest' : 'none'),
-  ['none', 'latest', 'all'] as const,
-))
-const validatedCurve = computed(() => validateExactString(
-  'SChart', 'curve', props.curve, ['linear', 'smooth'] as const,
-))
-const validatedBarMode = computed(() => validateExactString(
-  'SChart', 'barMode', props.barMode, ['grouped', 'stacked'] as const,
-))
-const validatedRadialLabel = computed(() => validateExactString(
-  'SChart', 'radialLabel', props.radialLabel, ['value', 'percentage', 'category'] as const,
-))
-const validatedTablePresentation = computed(() => validateExactString(
-  'SChart',
-  'dataTablePresentation',
-  props.dataTablePresentation,
-  ['assistive', 'visible', 'none'] as const,
-))
-const validatedYTickCount = computed(() => validateBoundedInteger(
-  'SChart', 'yTickCount', props.yTickCount, { minimum: 2, maximum: 8 },
-))
-const isRadial = computed(() => validatedType.value === 'pie' || validatedType.value === 'donut')
-const resolvedXAxis = computed(() => props.xAxis ?? (!isRadial.value && props.size !== 'compact'))
-const resolvedYAxis = computed(() => props.yAxis ?? (!isRadial.value && props.size !== 'compact'))
-const resolvedValueFormatter = computed(() => {
-  if (props.valueFormatter === undefined) return (value: number): string => numberFormatter.format(value)
-  if (typeof props.valueFormatter !== 'function') {
-    throw new TypeError('SChart: valueFormatter должен быть function')
-  }
-  return props.valueFormatter
-})
-const validatedEmptyLabel = computed(() => validateNonEmptyString(
-  'SChart', 'emptyLabel', props.emptyLabel ?? t('chart.empty'),
-))
-const validatedXAxisLabel = computed(() => props.xAxisLabel === undefined
-  ? undefined
-  : validateNonEmptyString('SChart', 'xAxisLabel', props.xAxisLabel))
-const validatedYAxisLabel = computed(() => props.yAxisLabel === undefined
-  ? undefined
-  : validateNonEmptyString('SChart', 'yAxisLabel', props.yAxisLabel))
-const validatedCenterLabel = computed(() => props.centerLabel === undefined
-  ? undefined
-  : validateNonEmptyString('SChart', 'centerLabel', props.centerLabel))
-const validatedCenterValue = computed(() => props.centerValue === undefined
-  ? undefined
-  : validateNonEmptyString('SChart', 'centerValue', props.centerValue))
-
-const accessibility = computed<SChartAccessibility>(() => {
-  const candidate: unknown = props.accessibility
-  if (typeof candidate !== 'object' || candidate === null || Array.isArray(candidate)) {
-    throw new TypeError('SChart: accessibility должен быть discriminated object')
-  }
-  const record = candidate as Record<string, unknown>
-  const allowed = record.mode === 'label'
-    ? ['mode', 'label', 'description']
-    : record.mode === 'labelledby'
-      ? ['mode', 'id', 'describedby']
-      : ['mode']
-  const unexpected = Object.keys(record).filter((key) => !allowed.includes(key))
-  if (unexpected.length > 0) {
-    throw new Error(`SChart: accessibility.mode="${String(record.mode)}" не допускает поля ${unexpected.join(', ')}`)
-  }
-  if (record.mode === 'decorative') return { mode: 'decorative' }
-  if (record.mode === 'label') {
-    return {
-      mode: 'label',
-      label: validateNonEmptyString('SChart', 'accessibility.label', record.label),
-      description: record.description === undefined
-        ? undefined
-        : validateNonEmptyString('SChart', 'accessibility.description', record.description),
-    }
-  }
-  if (record.mode === 'labelledby') {
-    return {
-      mode: 'labelledby',
-      id: validateDomId('SChart', 'accessibility.id', record.id),
-      describedby: record.describedby === undefined
-        ? undefined
-        : validateDomId('SChart', 'accessibility.describedby', record.describedby),
-    }
-  }
-  throw new TypeError(`SChart: неизвестный accessibility.mode "${String(record.mode)}"`)
-})
-
-const model = computed(() => resolveChartModel({
-  type: validatedType.value,
-  size: validatedSize.value,
-  categories: props.categories,
-  series: props.series,
-  domain: props.domain,
-  xAxis: resolvedXAxis.value,
-  yAxis: resolvedYAxis.value,
-  xLabels: validatedXLabels.value,
-  yTickCount: validatedYTickCount.value,
-  curve: validatedCurve.value,
-  barMode: validatedBarMode.value,
-  dataLabels: validatedDataLabels.value,
-  markers: validatedMarkers.value,
-  radialLabel: validatedRadialLabel.value,
-  valueFormatter: resolvedValueFormatter.value,
-  dimensions: viewportDimensions.value,
-}))
-
-const showHorizontalGrid = computed(() => validatedGrid.value === 'horizontal' || validatedGrid.value === 'both')
-const showVerticalGrid = computed(() => validatedGrid.value === 'vertical' || validatedGrid.value === 'both')
-const showTable = computed(() => validatedTablePresentation.value !== 'none' && !model.value.empty)
-const tableClass = computed(() => validatedTablePresentation.value === 'assistive' ? 's-chart__data-table--assistive' : undefined)
-const emptyTitle = computed(() => model.value.emptyReason === 'zero-total'
-  ? t('chart.noNonZeroValues')
-  : validatedEmptyLabel.value)
-const accessibleLabel = computed(() => accessibility.value.mode === 'label' ? accessibility.value.label : undefined)
-const accessibleDescription = computed(() => accessibility.value.mode === 'label' ? accessibility.value.description : undefined)
-
-function showPointMarker(index: number, count: number): boolean {
-  return validatedMarkers.value === 'all'
-    || (validatedMarkers.value === 'latest' && index === count - 1)
-}
-
-function showPointLabel(index: number, count: number): boolean {
-  return validatedDataLabels.value === 'all'
-    || (validatedDataLabels.value === 'latest' && index === count - 1)
-}
-
-function showBarLabel(categoryKey: string): boolean {
-  const lastCategory = props.categories[props.categories.length - 1]
-  return validatedDataLabels.value === 'all'
-    || (validatedDataLabels.value === 'latest' && categoryKey === lastCategory?.key)
-}
-
-onMounted(() => {
-  if (viewportElement.value === null || typeof ResizeObserver === 'undefined') return
-  resizeObserver = new ResizeObserver(([entry]) => {
-    if (!entry || entry.contentRect.width <= 0 || entry.contentRect.height <= 0) return
-    const next = { width: entry.contentRect.width, height: entry.contentRect.height }
-    const current = viewportDimensions.value
-    if (current && Math.abs(current.width - next.width) < 0.5 && Math.abs(current.height - next.height) < 0.5) return
-    viewportDimensions.value = next
-  })
-  resizeObserver.observe(viewportElement.value)
-})
-
-onBeforeUnmount(() => resizeObserver?.disconnect())
-
-watchEffect(() => {
-  void model.value
-  void accessibility.value
-  void validatedEmptyLabel.value
-  void validatedXAxisLabel.value
-  void validatedYAxisLabel.value
-  void validatedCenterLabel.value
-  void validatedCenterValue.value
-  if (accessibility.value.mode === 'decorative' && validatedTablePresentation.value === 'assistive') {
-    throw new Error('SChart: decorative chart требует dataTablePresentation="none" или "visible"')
-  }
-  if (isRadial.value && validatedGrid.value !== 'none') {
-    throw new Error(`SChart: ${validatedType.value} не поддерживает grid`)
-  }
-  if (isRadial.value && (validatedXAxisLabel.value || validatedYAxisLabel.value)) {
-    throw new Error(`SChart: ${validatedType.value} не поддерживает axis labels`)
-  }
-  if (validatedBarMode.value === 'stacked' && validatedType.value !== 'bar') {
-    throw new Error('SChart: barMode="stacked" разрешён только для type="bar"')
-  }
-  if ((validatedCenterLabel.value || validatedCenterValue.value) && validatedType.value !== 'donut') {
-    throw new Error('SChart: centerLabel/centerValue разрешены только для type="donut"')
-  }
-})
-</script>
-
-<template>
-  <figure
-    v-bind="ownedAttrs.bindings()"
-    class="s-chart"
-    :data-size="validatedSize"
-    :data-type="validatedType"
-    :data-empty="model.empty || undefined"
-  >
-    <figcaption v-if="accessibility.mode === 'label'" class="sr-only">{{ accessibility.label }}</figcaption>
-    <div v-if="validatedLegend === 'top' && !model.empty" class="s-chart__legend" data-position="top">
-      <span v-for="item in model.legend" :key="item.key" class="s-chart__legend-item">
-        <span class="s-chart__legend-swatch" :data-s-chart-tone="item.tone" aria-hidden="true"></span>
-        <span>{{ item.label }}</span>
-      </span>
-    </div>
-
-    <div ref="viewportElement" class="s-chart__viewport">
-      <SEmptyState
-        v-if="model.empty"
-        :title="emptyTitle"
-        :size="validatedSize === 'compact' ? 'sm' : 'md'"
-        presentation="panel"
-      />
-      <svg
-        v-else
-        class="s-chart__svg"
-        :viewBox="`0 0 ${model.width} ${model.height}`"
-        preserveAspectRatio="xMidYMid meet"
-        :role="accessibility.mode === 'decorative' ? undefined : 'img'"
-        :aria-hidden="accessibility.mode === 'decorative' || undefined"
-        :aria-label="accessibleLabel"
-        :aria-labelledby="accessibility.mode === 'labelledby' ? accessibility.id : undefined"
-        :aria-describedby="accessibility.mode === 'labelledby' ? accessibility.describedby : undefined"
-        focusable="false"
-      >
-        <title v-if="accessibleLabel">{{ accessibleLabel }}</title>
-        <desc v-if="accessibleDescription">{{ accessibleDescription }}</desc>
-
-        <g v-if="showHorizontalGrid" class="s-chart__grid" aria-hidden="true">
-          <line
-            v-for="line in model.horizontalGrid"
-            :key="line.key"
-            :x1="line.x1"
-            :x2="line.x2"
-            :y1="line.y1"
-            :y2="line.y2"
-          />
-        </g>
-        <g v-if="showVerticalGrid" class="s-chart__grid" aria-hidden="true">
-          <line
-            v-for="line in model.verticalGrid"
-            :key="line.key"
-            :x1="line.x1"
-            :x2="line.x2"
-            :y1="line.y1"
-            :y2="line.y2"
-          />
-        </g>
-
-        <g v-if="resolvedYAxis" class="s-chart__axis" aria-hidden="true">
-          <line :x1="model.plotX" :x2="model.plotX" :y1="model.plotY" :y2="model.plotY + model.plotHeight" />
-          <text
-            v-for="tick in model.yTicks"
-            :key="tick.value"
-            :x="model.plotX - 8"
-            :y="tick.position"
-            text-anchor="end"
-            dominant-baseline="middle"
-          >{{ tick.displayLabel }}<title v-if="tick.displayLabel !== tick.label">{{ tick.label }}</title></text>
-          <text
-            v-if="validatedYAxisLabel"
-            class="s-chart__axis-title"
-            :x="12"
-            :y="model.plotY + model.plotHeight / 2"
-            text-anchor="middle"
-            :transform="`rotate(-90 12 ${model.plotY + model.plotHeight / 2})`"
-          >{{ validatedYAxisLabel }}</text>
-        </g>
-        <g v-if="resolvedXAxis" class="s-chart__axis" aria-hidden="true">
-          <line :x1="model.plotX" :x2="model.plotX + model.plotWidth" :y1="model.baselineY" :y2="model.baselineY" />
-          <text
-            v-for="category in model.xLabels"
-            :key="category.key"
-            :x="category.x"
-            :y="model.plotY + model.plotHeight + 18"
-            :text-anchor="category.textAnchor"
-          >
-            <tspan
-              v-for="(line, lineIndex) in category.lines"
-              :key="lineIndex"
-              :x="category.x"
-              :dy="lineIndex === 0 ? 0 : 13"
-            >{{ line }}</tspan>
-          </text>
-          <text
-            v-if="validatedXAxisLabel"
-            class="s-chart__axis-title"
-            :x="model.plotX + model.plotWidth / 2"
-            :y="model.height - 2"
-            text-anchor="middle"
-          >{{ validatedXAxisLabel }}</text>
-        </g>
-
-        <g v-if="validatedType === 'area'" class="s-chart__areas" aria-hidden="true">
-          <path
-            v-for="line in model.lines"
-            :key="line.key"
-            class="s-chart__area"
-            :data-s-chart-tone="line.tone"
-            :d="line.areaPath"
-          />
-        </g>
-        <g v-if="validatedType === 'line' || validatedType === 'area'" class="s-chart__lines">
-          <g v-for="line in model.lines" :key="line.key" :data-s-chart-tone="line.tone">
-            <path class="s-chart__line" :d="line.path" aria-hidden="true" />
-            <template v-for="(point, pointIndex) in line.points" :key="point.categoryKey">
-              <circle
-                v-if="showPointMarker(pointIndex, line.points.length)"
-                class="s-chart__marker"
-                :cx="point.x"
-                :cy="point.y"
-                r="4"
-              ><title>{{ point.title }}</title></circle>
-              <text
-                v-if="showPointLabel(pointIndex, line.points.length)"
-                class="s-chart__data-label"
-                :x="point.x"
-                :y="point.y - 9"
-                text-anchor="middle"
-                aria-hidden="true"
-              >{{ point.valueLabel }}</text>
-            </template>
-          </g>
-        </g>
-        <g v-if="validatedType === 'bar'" class="s-chart__bars">
-          <g v-for="bar in model.bars" :key="bar.key" :data-s-chart-tone="bar.tone">
-            <rect
-              class="s-chart__bar"
-              :x="bar.x"
-              :y="bar.y"
-              :width="bar.width"
-              :height="bar.height"
-              rx="2"
-            ><title>{{ bar.title }}</title></rect>
-            <text
-              v-if="showBarLabel(bar.categoryKey)"
-              class="s-chart__data-label"
-              :x="bar.x + bar.width / 2"
-              :y="bar.value >= 0 ? bar.y - 7 : bar.y + bar.height + 13"
-              text-anchor="middle"
-              aria-hidden="true"
-            >{{ bar.valueLabel }}</text>
-          </g>
-        </g>
-
-        <g v-if="isRadial" class="s-chart__slices">
-          <g v-for="slice in model.slices" :key="slice.key" :data-s-chart-tone="slice.tone">
-            <path class="s-chart__slice" :d="slice.path"><title>{{ slice.title }}</title></path>
-            <text
-              v-if="validatedDataLabels === 'all' && slice.value > 0"
-              class="s-chart__radial-label"
-              :x="slice.labelX"
-              :y="slice.labelY"
-              text-anchor="middle"
-              dominant-baseline="middle"
-              aria-hidden="true"
-            >{{ slice.dataLabel }}</text>
-          </g>
-          <g v-if="validatedType === 'donut' && (validatedCenterLabel || validatedCenterValue)" class="s-chart__center" aria-hidden="true">
-            <text v-if="validatedCenterValue" :x="model.centerX" :y="model.centerY - (validatedCenterLabel ? 4 : 0)" text-anchor="middle">{{ validatedCenterValue }}</text>
-            <text v-if="validatedCenterLabel" class="s-chart__center-label" :x="model.centerX" :y="model.centerY + (validatedCenterValue ? 14 : 0)" text-anchor="middle">{{ validatedCenterLabel }}</text>
-          </g>
-        </g>
-      </svg>
-    </div>
-
-    <div v-if="validatedLegend === 'bottom' && !model.empty" class="s-chart__legend" data-position="bottom">
-      <span v-for="item in model.legend" :key="item.key" class="s-chart__legend-item">
-        <span class="s-chart__legend-swatch" :data-s-chart-tone="item.tone" aria-hidden="true"></span>
-        <span>{{ item.label }}</span>
-      </span>
-    </div>
-
-    <table
-      v-if="showTable"
-      class="s-chart__data-table"
-      :class="tableClass"
-      :aria-label="accessibility.mode === 'label' ? t('chart.dataFor', { chart: accessibility.label }) : undefined"
-      :aria-labelledby="accessibility.mode === 'labelledby' ? accessibility.id : undefined"
-    >
-      <thead>
-        <tr>
-          <th scope="col">{{ t('chart.category') }}</th>
-          <th v-for="item in series" :key="item.key" scope="col">{{ item.label }}</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="row in model.tableRows" :key="row.key">
-          <th scope="row">{{ row.label }}</th>
-          <td v-for="(value, valueIndex) in row.values" :key="series[valueIndex]?.key">{{ value }}</td>
-        </tr>
-      </tbody>
-    </table>
-  </figure>
-</template>
-
-<style lang="postcss" src="./SChart.css" scoped></style>

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

@@ -1,130 +0,0 @@
-<template>
-  <div
-    v-bind="{ ...ownedAttrs.bindings(), ...surfaceBindings }"
-    class="s-chip"
-    :data-mode="resolvedSurface.mode"
-  >
-    <SInteractiveSurface
-      :surface="resolvedSurface"
-      appearance="bare"
-      density="compact"
-      padding="none"
-      radius="xl"
-      @activate="emit('activate', $event)"
-    >
-      <span class="s-chip__content">
-        <span v-if="leadingIcon" :class="PILL_ICON_CLASS" aria-hidden="true">
-          <component :is="leadingIcon" :class="PILL_ICON_GRAPHIC_CLASS" />
-        </span>
-        <span :class="[PILL_LABEL_CLASS, PILL_LABEL_TRUNCATE_CLASS]">{{ validatedLabel }}</span>
-      </span>
-    </SInteractiveSurface>
-    <SButton
-      v-if="closable"
-      label=""
-      appearance="ghost"
-      severity="secondary"
-      size="xs"
-      density="compact"
-      spacing="tight"
-      shape="circle"
-      icon-only
-      :leading-icon="X"
-      :disabled="disabled"
-      :aria-label="resolvedCloseLabel"
-      :title="resolvedCloseLabel"
-      @click.stop="emit('close', $event)"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, type Component } from 'vue'
-import { X } from '../../icons/sputnigUiIcons'
-import { useUiKitLocale } from '../../../composables/useUiKitLocale'
-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,
-  validateNonEmptyString,
-} from '../../../internal/runtimeContract'
-import SButton from '../controls/SButton.vue'
-import SInteractiveSurface, { type InteractiveSurfaceContract } from '../controls/SInteractiveSurface.vue'
-import type { BadgeSeverity } from './SBadge.vue'
-
-defineOptions({ inheritAttrs: false })
-
-export type SChipSeverity = BadgeSeverity
-export type SChipSize = 'sm' | 'md'
-
-export interface Props {
-  label: string
-  severity?: SChipSeverity
-  size?: SChipSize
-  leadingIcon?: Component
-  closable?: boolean
-  closeLabel?: string
-  disabled?: boolean
-  /** Семантика основной поверхности chip; close остаётся отдельным sibling-действием. / Primary chip surface semantics; close remains a separate sibling action. */
-  surface?: InteractiveSurfaceContract
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  severity: 'secondary',
-  size: 'md',
-  leadingIcon: undefined,
-  closable: false,
-  closeLabel: undefined,
-  disabled: false,
-  surface: () => ({ mode: 'static' }),
-})
-const emit = defineEmits<{
-  close: [event: MouseEvent]
-  activate: [event: MouseEvent]
-}>()
-const ownedAttrs = useOwnedAttrs({ component: 'SChip', owner: 'chip root' })
-const { t } = useUiKitLocale()
-
-const validatedLabel = computed(() => validateNonEmptyString('SChip', 'label', props.label))
-const validatedSeverity = computed(() => validateExactString(
-  'SChip',
-  'severity',
-  props.severity,
-  ['primary', 'secondary', 'success', 'info', 'warn', 'danger', 'contrast'] as const,
-))
-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 resolvedSurface = computed<InteractiveSurfaceContract>(() => {
-  const surface = props.surface
-  if (surface.mode === 'static') return surface
-  return { ...surface, disabled: props.disabled || surface.disabled }
-})
-const resolvedCloseLabel = computed(() => {
-  validateBoolean('SChip', 'closable', props.closable)
-  validateBoolean('SChip', 'disabled', props.disabled)
-  return props.closeLabel === undefined
-    ? t('actions.removeChip', { label: validatedLabel.value })
-    : validateNonEmptyString('SChip', 'closeLabel', props.closeLabel)
-})
-</script>
-
-<style lang="postcss" src="./SChip.css" scoped></style>