@pgcorp/ui-kit 0.7.2 → 0.8.0

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

@@ -0,0 +1,493 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from 'vue'
+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: 'Нет данных для графика',
+  valueFormatter: undefined,
+})
+
+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,
+))
+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'
+  ? 'Нет ненулевых значений для графика'
+  : 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.label }}</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="middle"
+          >
+            <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' ? `${accessibility.label}: данные` : undefined"
+      :aria-labelledby="accessibility.mode === 'labelledby' ? accessibility.id : undefined"
+    >
+      <thead>
+        <tr>
+          <th scope="col">Категория</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.css

@@ -0,0 +1,19 @@
+@reference "../../../styles/reference.css";
+
+.s-chip__content {
+  @apply inline-flex min-w-0 items-center;
+  gap: inherit;
+}
+
+.s-chip[data-mode='action']:not([data-s-pill-disabled='true']),
+.s-chip[data-mode='link']:not([data-s-pill-disabled='true']) {
+  @apply cursor-pointer;
+  transition:
+    filter var(--s-motion-standard) ease,
+    box-shadow var(--s-motion-standard) ease;
+}
+
+.s-chip[data-mode='action']:not([data-s-pill-disabled='true']):hover,
+.s-chip[data-mode='link']:not([data-s-pill-disabled='true']):hover {
+  filter: brightness(0.96);
+}

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

@@ -1,12 +1,24 @@
 <template>
-  <span
+  <div
     v-bind="{ ...ownedAttrs.bindings(), ...surfaceBindings }"
     class="s-chip"
+    :data-mode="resolvedSurface.mode"
   >
-    <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>
+    <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=""
@@ -23,7 +35,7 @@
       :title="resolvedCloseLabel"
       @click.stop="emit('close', $event)"
     />
-  </span>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -43,6 +55,7 @@ import {
   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 })
@@ -58,6 +71,8 @@ export interface Props {
   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>(), {
@@ -67,9 +82,11 @@ const props = withDefaults(defineProps<Props>(), {
   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' })
 
@@ -94,6 +111,11 @@ const surfaceBindings = computed(() => resolvePillSurfaceBindings('SChip', {
   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)
@@ -102,3 +124,5 @@ const resolvedCloseLabel = computed(() => {
     : validateNonEmptyString('SChip', 'closeLabel', props.closeLabel)
 })
 </script>
+
+<style lang="postcss" src="./SChip.css" scoped></style>

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

@@ -37,6 +37,7 @@
 
 .s-code-block-editor-region {
   @apply flex min-h-0 min-w-0;
+  width: 100%;
 }
 
 .s-code-block--viewport .s-code-block-editor-region {
@@ -54,3 +55,70 @@
 .s-code-block-language {
   @apply font-mono;
 }
+
+.s-code-block-plain {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  margin: 0;
+  overflow: auto;
+  padding: 0.75rem;
+  background: transparent;
+  color: var(--color-text);
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  white-space: pre;
+  tab-size: inherit;
+}
+
+.s-code-block-plain:focus-visible {
+  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color);
+  outline-offset: var(--s-focus-ring-inset-offset);
+}
+
+.s-code-block-plain[data-viewport='content'] {
+  max-height: var(--s-code-editor-viewport-content-max);
+}
+
+.s-code-block-plain[data-viewport='document'] {
+  overflow: visible;
+}
+
+.s-code-block-plain[data-viewport='compact'] {
+  height: var(--s-code-editor-viewport-compact);
+}
+
+.s-code-block-plain[data-viewport='standard'] {
+  height: var(--s-code-editor-viewport-standard);
+}
+
+.s-code-block-plain[data-viewport='expanded'] {
+  height: var(--s-code-editor-viewport-expanded);
+}
+
+.s-code-block-plain[data-viewport='fill'] {
+  height: 100%;
+}
+
+.s-code-block-plain__lines {
+  display: block;
+  min-width: max-content;
+}
+
+.s-code-block-plain__line {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+}
+
+.s-code-block-plain__line-number {
+  min-width: 2.5rem;
+  padding-inline-end: 0.75rem;
+  color: var(--color-text-muted);
+  text-align: end;
+  user-select: none;
+}
+
+.s-code-block-plain__line-content {
+  min-width: 0;
+}