@pgcorp/ui-kit 0.10.0 → 0.10.2

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

@@ -1,112 +0,0 @@
-<template>
-  <span
-    v-bind="ownedAttrs.bindings()"
-    :data-s-tone="toneBinding['data-s-tone']"
-    class="s-progress-indicator"
-    :data-size="size"
-    :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 { resolveSemanticToneBinding } from '../../../internal/semanticTone'
-import { validateBoolean } from '../../../internal/runtimeContract'
-
-defineOptions({ inheritAttrs: false })
-
-export type SProgressIndicatorSize = 'xs' | 'sm' | 'md' | 'lg'
-export type SProgressIndicatorTone = 'current' | 'neutral' | 'info' | 'success' | 'warn' | 'danger'
-const PROGRESS_INDICATOR_TONES = ['current', 'neutral', 'info', 'success', 'warn', 'danger'] as const satisfies readonly SProgressIndicatorTone[]
-
-/**
- * Декоративный 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 toneBinding = computed(() => resolveSemanticToneBinding(
-  'SProgressIndicator',
-  'tone',
-  props.tone,
-  PROGRESS_INDICATOR_TONES,
-))
-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>

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

@@ -1,65 +0,0 @@
-<template>
-  <article
-    v-bind="ownedAttrs.bindings()"
-    class="s-rich-document"
-    :aria-label="validatedAccessibleLabel"
-    :data-document-id="model.document.id"
-  >
-    <SRichBlockNode
-      v-for="(node, index) in model.document.nodes"
-      :key="index"
-      :node="node"
-      :resources="model.resources"
-      :document-id="model.document.id"
-      :path="`document.nodes[${index}]`"
-      @link-activate="emit('link-activate', $event)"
-      @resource-activate="emit('resource-activate', $event)"
-      @action="emit('action', $event)"
-    />
-  </article>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import { validateNonEmptyString } from '../../../internal/runtimeContract'
-import SRichBlockNode from './_internal/SRichBlockNode.vue'
-import {
-  validateRichDocumentModel,
-  type SRichDocumentActionIntent,
-  type SRichDocumentLinkActivate,
-  type SRichDocumentResource,
-  type SRichDocumentResourceActivate,
-  type SRichDocumentV1,
-} from './richDocument'
-
-defineOptions({ inheritAttrs: false })
-
-/** Safe renderer input. The document and resources are validated before any node reaches the DOM. */
-export interface Props {
-  document: SRichDocumentV1
-  resources?: readonly SRichDocumentResource[]
-  accessibleLabel: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  resources: () => [],
-})
-
-const emit = defineEmits<{
-  'link-activate': [payload: SRichDocumentLinkActivate]
-  'resource-activate': [payload: SRichDocumentResourceActivate]
-  action: [payload: SRichDocumentActionIntent]
-}>()
-
-const ownedAttrs = useOwnedAttrs({ component: 'SRichDocument', owner: 'safe rich document root' })
-const validatedAccessibleLabel = computed(() => validateNonEmptyString(
-  'SRichDocument',
-  'accessibleLabel',
-  props.accessibleLabel,
-))
-const model = computed(() => validateRichDocumentModel(props.document, props.resources))
-</script>
-
-<style lang="postcss" src="./SRichDocument.css" scoped></style>

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

@@ -1,470 +0,0 @@
-<template>
-  <div
-    v-bind="ownedAttrs.bindings()"
-    ref="viewportRef"
-    class="s-scroll-viewport"
-    role="region"
-    :aria-label="contract.accessibleLabel"
-    :tabindex="contract.focusable ? 0 : undefined"
-    :data-axis="contract.axis"
-    :data-block-size="contract.blockSize"
-    :data-focusable="contract.focusable"
-    :data-keyboard-navigation="contract.keyboardNavigation"
-    :data-overscroll-behavior="contract.overscrollBehavior"
-    :data-at-inline-start="viewportState?.atInlineStart"
-    :data-at-inline-end="viewportState?.atInlineEnd"
-    :data-at-block-start="viewportState?.atBlockStart"
-    :data-at-block-end="viewportState?.atBlockEnd"
-    @keydown="onKeydown"
-  >
-    <div ref="contentRef" class="s-scroll-viewport__content">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import type { ScrollViewportBlockSize as PublicScrollViewportBlockSize } from '../../../internal/semanticSizing'
-import type {
-  SScrollViewportAxis as PublicSScrollViewportAxis,
-  SScrollViewportOverscrollBehavior as PublicSScrollViewportOverscrollBehavior,
-} from './scrollViewport'
-
-export interface Props {
-  accessibleLabel: string
-  axis?: PublicSScrollViewportAxis
-  blockSize?: PublicScrollViewportBlockSize
-  focusable?: boolean
-  keyboardNavigation?: boolean
-  overscrollBehavior?: PublicSScrollViewportOverscrollBehavior
-}
-</script>
-
-<script setup lang="ts">
-import {
-  computed,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  shallowRef,
-  watch,
-} from 'vue'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
-import {
-  validateBoolean,
-  validateBoundedNumber,
-  validateExactString,
-  validateNonEmptyString,
-} from '../../../internal/runtimeContract'
-import { validateScrollViewportBlockSize } from '../../../internal/semanticSizing'
-import type {
-  SScrollViewportApi,
-  SScrollViewportBehavior,
-  SScrollViewportBoundary,
-  SScrollViewportPhysicalAxis,
-  SScrollViewportRevealOptions,
-  SScrollViewportState,
-} from './scrollViewport'
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<Props>(), {
-  axis: 'y',
-  blockSize: 'md',
-  focusable: true,
-  keyboardNavigation: true,
-  overscrollBehavior: 'contain',
-})
-
-const emit = defineEmits<{
-  'scroll-state': [state: SScrollViewportState]
-}>()
-
-const viewportRef = shallowRef<HTMLElement | null>(null)
-const contentRef = shallowRef<HTMLElement | null>(null)
-const viewportState = shallowRef<SScrollViewportState | null>(null)
-const ownedAttrs = useOwnedAttrs({ component: 'SScrollViewport', owner: 'scroll viewport region' })
-let resizeObserver: ResizeObserver | null = null
-let lastStateSignature = ''
-let rtlScrollType: 'default' | 'negative' | 'reverse' | null = null
-
-const contract = computed(() => {
-  const focusable = validateBoolean('SScrollViewport', 'focusable', props.focusable)
-  const keyboardNavigation = validateBoolean(
-    'SScrollViewport',
-    'keyboardNavigation',
-    props.keyboardNavigation,
-  )
-  if (keyboardNavigation && !focusable) {
-    throw new Error(
-      'SScrollViewport: keyboardNavigation=true требует focusable=true. '
-      + '/ SScrollViewport: keyboardNavigation=true requires focusable=true.',
-    )
-  }
-  return {
-    accessibleLabel: validateNonEmptyString(
-      'SScrollViewport',
-      'accessibleLabel',
-      props.accessibleLabel,
-    ),
-    axis: validateExactString(
-      'SScrollViewport',
-      'axis',
-      props.axis,
-      ['x', 'y', 'both'] as const,
-    ),
-    blockSize: validateScrollViewportBlockSize(
-      'SScrollViewport',
-      'blockSize',
-      props.blockSize,
-    ),
-    focusable,
-    keyboardNavigation,
-    overscrollBehavior: validateExactString(
-      'SScrollViewport',
-      'overscrollBehavior',
-      props.overscrollBehavior,
-      ['auto', 'contain', 'none'] as const,
-    ),
-  }
-})
-
-useInteractiveLeafRegistration({
-  owner: 'SScrollViewport',
-  active: () => contract.value.focusable,
-})
-
-function clamp(value: number, maximum: number): number {
-  return Math.min(maximum, Math.max(0, value))
-}
-
-function detectRtlScrollType(element: HTMLElement): 'default' | 'negative' | 'reverse' {
-  if (rtlScrollType) return rtlScrollType
-  const document = element.ownerDocument
-  const probe = document.createElement('div')
-  const content = document.createElement('div')
-  probe.dir = 'rtl'
-  probe.style.cssText = 'position:absolute;inset:-9999px;width:4px;height:1px;overflow:scroll;'
-  content.style.cssText = 'width:8px;height:1px;'
-  probe.append(content)
-  document.body.append(probe)
-  if (probe.scrollLeft > 0) {
-    rtlScrollType = 'default'
-  } else {
-    probe.scrollLeft = 1
-    rtlScrollType = probe.scrollLeft === 0 ? 'negative' : 'reverse'
-  }
-  probe.remove()
-  return rtlScrollType
-}
-
-function physicalLeftOriginOffset(element: HTMLElement, maximum: number): number {
-  const scrollLeft = element.scrollLeft
-  if (getComputedStyle(element).direction !== 'rtl') return clamp(scrollLeft, maximum)
-  switch (detectRtlScrollType(element)) {
-    case 'negative':
-      return clamp(maximum + scrollLeft, maximum)
-    case 'reverse':
-      return clamp(maximum - scrollLeft, maximum)
-    case 'default':
-      return clamp(scrollLeft, maximum)
-  }
-}
-
-function browserScrollLeft(element: HTMLElement, physicalX: number, maximum: number): number {
-  const x = clamp(physicalX, maximum)
-  if (getComputedStyle(element).direction !== 'rtl') return x
-  switch (detectRtlScrollType(element)) {
-    case 'negative':
-      return x - maximum
-    case 'reverse':
-      return maximum - x
-    case 'default':
-      return x
-  }
-}
-
-function semanticOffsets(
-  element: HTMLElement,
-  physical: SScrollViewportState['physical'],
-): SScrollViewportState['semantic'] {
-  const styles = getComputedStyle(element)
-  const verticalWriting = styles.writingMode.startsWith('vertical')
-    || styles.writingMode.startsWith('sideways')
-  if (!verticalWriting) {
-    return Object.freeze({
-      inline: styles.direction === 'rtl' ? physical.maxX - physical.x : physical.x,
-      block: physical.y,
-      maxInline: physical.maxX,
-      maxBlock: physical.maxY,
-    })
-  }
-  return Object.freeze({
-    inline: styles.direction === 'rtl'
-      ? physical.maxY - physical.y
-      : physical.y,
-    block: styles.writingMode.endsWith('-rl') ? physical.maxX - physical.x : physical.x,
-    maxInline: physical.maxY,
-    maxBlock: physical.maxX,
-  })
-}
-
-function readState(element: HTMLElement): SScrollViewportState {
-  const maxX = Math.max(0, element.scrollWidth - element.clientWidth)
-  const maxY = Math.max(0, element.scrollHeight - element.clientHeight)
-  const physical = Object.freeze({
-    x: physicalLeftOriginOffset(element, maxX),
-    y: clamp(element.scrollTop, maxY),
-    maxX,
-    maxY,
-  })
-  const semantic = semanticOffsets(element, physical)
-  const epsilon = 1
-  return Object.freeze({
-    physical,
-    semantic,
-    atInlineStart: semantic.inline <= epsilon,
-    atInlineEnd: semantic.maxInline - semantic.inline <= epsilon,
-    atBlockStart: semantic.block <= epsilon,
-    atBlockEnd: semantic.maxBlock - semantic.block <= epsilon,
-  })
-}
-
-function publishScrollState(): void {
-  const element = viewportRef.value
-  if (!element) return
-  const state = readState(element)
-  const signature = JSON.stringify(state)
-  if (signature === lastStateSignature) return
-  lastStateSignature = signature
-  viewportState.value = state
-  emit('scroll-state', state)
-}
-
-function requireViewport(action: string): HTMLElement {
-  const element = viewportRef.value
-  if (element) return element
-  throw new Error(
-    `SScrollViewport: ${action} недоступен до mount. `
-    + `/ SScrollViewport: ${action} is unavailable before mount.`,
-  )
-}
-
-function supportsAxis(axis: SScrollViewportPhysicalAxis): boolean {
-  return contract.value.axis === axis || contract.value.axis === 'both'
-}
-
-function assertSupportedAxis(axis: SScrollViewportPhysicalAxis, action: string): void {
-  if (supportsAxis(axis)) return
-  throw new Error(
-    `SScrollViewport: ${action} не может управлять осью ${axis} при axis=${contract.value.axis}. `
-    + `/ SScrollViewport: ${action} cannot control axis ${axis} when axis=${contract.value.axis}.`,
-  )
-}
-
-function focus(): void {
-  if (!contract.value.focusable) {
-    throw new Error(
-      'SScrollViewport: focus() требует focusable=true. '
-      + '/ SScrollViewport: focus() requires focusable=true.',
-    )
-  }
-  requireViewport('focus()').focus()
-}
-
-function scrollToBoundary(
-  axis: SScrollViewportPhysicalAxis,
-  boundary: SScrollViewportBoundary,
-): void {
-  const validatedAxis = validateExactString(
-    'SScrollViewport',
-    'scrollToBoundary.axis',
-    axis,
-    ['x', 'y'] as const,
-  )
-  const validatedBoundary = validateExactString(
-    'SScrollViewport',
-    'scrollToBoundary.boundary',
-    boundary,
-    ['start', 'end'] as const,
-  )
-  assertSupportedAxis(validatedAxis, 'scrollToBoundary()')
-  const element = requireViewport('scrollToBoundary()')
-  const current = readState(element).physical
-  const x = validatedAxis === 'x'
-    ? (validatedBoundary === 'start' ? 0 : current.maxX)
-    : current.x
-  const y = validatedAxis === 'y'
-    ? (validatedBoundary === 'start' ? 0 : current.maxY)
-    : current.y
-  element.scrollTo({
-    left: browserScrollLeft(element, x, current.maxX),
-    top: y,
-    behavior: 'auto',
-  })
-  publishScrollState()
-}
-
-function reveal(options: SScrollViewportRevealOptions): void {
-  if (typeof options !== 'object' || options === null || Array.isArray(options)) {
-    throw new TypeError(
-      'SScrollViewport: reveal.options должен быть объектом. '
-      + '/ SScrollViewport: reveal.options must be an object.',
-    )
-  }
-  if (options.x === undefined && options.y === undefined) {
-    throw new Error(
-      'SScrollViewport: reveal() требует x и/или y. '
-      + '/ SScrollViewport: reveal() requires x and/or y.',
-    )
-  }
-  if (options.x !== undefined) assertSupportedAxis('x', 'reveal()')
-  if (options.y !== undefined) assertSupportedAxis('y', 'reveal()')
-  const element = requireViewport('reveal()')
-  const current = readState(element).physical
-  const x = options.x === undefined
-    ? current.x
-    : validateBoundedNumber(
-      'SScrollViewport',
-      'reveal.x',
-      options.x,
-      { minimum: 0, maximum: Number.MAX_SAFE_INTEGER },
-    )
-  const y = options.y === undefined
-    ? current.y
-    : validateBoundedNumber(
-      'SScrollViewport',
-      'reveal.y',
-      options.y,
-      { minimum: 0, maximum: Number.MAX_SAFE_INTEGER },
-    )
-  const behavior: SScrollViewportBehavior = validateExactString(
-    'SScrollViewport',
-    'reveal.behavior',
-    options.behavior ?? 'auto',
-    ['auto', 'smooth'] as const,
-  )
-  element.scrollTo({
-    left: browserScrollLeft(element, x, current.maxX),
-    top: clamp(y, current.maxY),
-    behavior,
-  })
-  publishScrollState()
-}
-
-function keyboardTarget(
-  element: HTMLElement,
-  event: KeyboardEvent,
-): { left: number; top: number } | null {
-  const horizontal = supportsAxis('x')
-  const vertical = supportsAxis('y')
-  const horizontalStep = Math.max(1, element.clientWidth / 8)
-  const verticalStep = Math.max(1, element.clientHeight / 8)
-  const pageX = Math.max(1, element.clientWidth * 0.9)
-  const pageY = Math.max(1, element.clientHeight * 0.9)
-  const current = readState(element).physical
-  switch (event.key) {
-    case 'ArrowLeft':
-      return horizontal ? { left: current.x - horizontalStep, top: current.y } : null
-    case 'ArrowRight':
-      return horizontal ? { left: current.x + horizontalStep, top: current.y } : null
-    case 'ArrowUp':
-      return vertical ? { left: current.x, top: current.y - verticalStep } : null
-    case 'ArrowDown':
-      return vertical ? { left: current.x, top: current.y + verticalStep } : null
-    case 'PageUp':
-      return vertical
-        ? { left: current.x, top: current.y - pageY }
-        : horizontal ? { left: current.x - pageX, top: current.y } : null
-    case 'PageDown':
-      return vertical
-        ? { left: current.x, top: current.y + pageY }
-        : horizontal ? { left: current.x + pageX, top: current.y } : null
-    case 'Home':
-      return { left: horizontal ? 0 : current.x, top: vertical ? 0 : current.y }
-    case 'End':
-      return {
-        left: horizontal ? current.maxX : current.x,
-        top: vertical ? current.maxY : current.y,
-      }
-    default:
-      return null
-  }
-}
-
-function onKeydown(event: KeyboardEvent): void {
-  const element = viewportRef.value
-  if (
-    !element
-    || !contract.value.keyboardNavigation
-    || event.target !== element
-    || event.defaultPrevented
-    || event.altKey
-    || event.ctrlKey
-    || event.metaKey
-    || event.shiftKey
-  ) return
-  const target = keyboardTarget(element, event)
-  if (!target) return
-  event.preventDefault()
-  const current = readState(element).physical
-  element.scrollTo({
-    left: browserScrollLeft(element, target.left, current.maxX),
-    top: clamp(target.top, current.maxY),
-    behavior: 'auto',
-  })
-  publishScrollState()
-}
-
-function onScroll(): void {
-  publishScrollState()
-}
-
-onMounted(() => {
-  const viewport = requireViewport('observer setup')
-  const content = contentRef.value
-  if (!content) {
-    throw new Error(
-      'SScrollViewport: content owner отсутствует после mount. '
-      + '/ SScrollViewport: content owner is missing after mount.',
-    )
-  }
-  if (typeof ResizeObserver === 'undefined') {
-    throw new Error(
-      'SScrollViewport: runtime требует ResizeObserver. '
-      + '/ SScrollViewport: runtime requires ResizeObserver.',
-    )
-  }
-  viewport.addEventListener('scroll', onScroll, { passive: true })
-  resizeObserver = new ResizeObserver(publishScrollState)
-  resizeObserver.observe(viewport)
-  resizeObserver.observe(content)
-  publishScrollState()
-})
-
-watch(
-  () => [
-    contract.value.axis,
-    contract.value.blockSize,
-    contract.value.focusable,
-    contract.value.keyboardNavigation,
-    contract.value.overscrollBehavior,
-  ],
-  async () => {
-    await nextTick()
-    publishScrollState()
-  },
-)
-
-onBeforeUnmount(() => {
-  viewportRef.value?.removeEventListener('scroll', onScroll)
-  resizeObserver?.disconnect()
-  resizeObserver = null
-  lastStateSignature = ''
-})
-
-defineExpose<SScrollViewportApi>({ focus, scrollToBoundary, reveal })
-</script>
-
-<style lang="postcss" src="./SScrollViewport.css" scoped></style>

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

@@ -1,54 +0,0 @@
-<script setup lang="ts">
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import SHeaderSurface from '../_internal/SHeaderSurface.vue'
-
-defineOptions({ inheritAttrs: false })
-
-withDefaults(defineProps<{
-  title: string
-  eyebrow?: string | null
-  description?: string | null
-  meta?: string | null
-  headingLevel?: 2 | 3 | 4
-  size?: 'sm' | 'md'
-  variant?: 'default' | 'display'
-  divider?: boolean
-  padding?: 'none' | 'sm' | 'md'
-  spacingAfter?: 'none' | 'sm' | 'md'
-  trailingLayout?: 'responsive' | 'inline' | 'stacked'
-}>(), {
-  eyebrow: undefined,
-  description: undefined,
-  meta: undefined,
-  headingLevel: 3,
-  size: 'md',
-  variant: 'default',
-  divider: false,
-  padding: 'none',
-  spacingAfter: 'none',
-  trailingLayout: 'responsive',
-})
-
-const ownedAttrs = useOwnedAttrs({ component: 'SSectionHeader', owner: 'section header root' })
-</script>
-
-<template>
-  <SHeaderSurface
-    v-bind="ownedAttrs.bindings()"
-    kind="section"
-    :title="title"
-    :eyebrow="eyebrow"
-    :description="description"
-    :meta="meta"
-    :heading-level="headingLevel"
-    :size="size"
-    :variant="variant"
-    :divider="divider"
-    :padding="padding"
-    :spacing-after="spacingAfter"
-    :trailing-layout="trailingLayout"
-  >
-    <template v-if="$slots.badges" #badges><slot name="badges" /></template>
-    <template v-if="$slots.actions" #actions><slot name="actions" /></template>
-  </SHeaderSurface>
-</template>