@pgcorp/ui-kit 0.10.0 → 0.10.2

package/src/components/shared/controls/SLink.vue

@@ -1,138 +0,0 @@
-<script setup lang="ts">
-import {
-  type Component,
-  computed,
-  type VNodeChild,
-} from 'vue'
-import { RouterLink } from 'vue-router'
-import { resolveLinkTarget } from '../../../internal/linkTarget'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import {
-  PassiveContentBoundary,
-  useInteractiveLeafRegistration,
-  type PassiveContentContract,
-} from '../../../internal/passiveContentContract'
-import type {
-  LinkBrowsingTarget,
-  LinkRouterTarget,
-} from './SLink'
-
-defineOptions({ inheritAttrs: false })
-
-/** Canonical presentation/state API owned by SLink. */
-export interface LinkPresentationProps {
-  readonly variant?: 'default' | 'subtle' | 'brand' | 'navigation' | 'bottom-navigation' | 'document'
-  readonly external?: boolean
-  readonly active?: boolean
-  readonly disabled?: boolean
-  readonly width?: 'fit' | 'full'
-  readonly size?: 'inherit' | 'sm' | 'md'
-  readonly underline?: 'hover' | 'always' | 'none'
-  readonly wrap?: 'normal' | 'anywhere'
-  readonly contentKind?: 'text' | 'identifier'
-  readonly leadingIcon?: Component
-}
-
-interface LinkDestinationOptions {
-  readonly target?: LinkBrowsingTarget
-  readonly rel?: string
-}
-
-/** Exact href/to XOR plus the canonical link presentation API. */
-export type Props = LinkPresentationProps & LinkDestinationOptions & (
-  | { readonly href: string; readonly to?: never }
-  | { readonly href?: never; readonly to: LinkRouterTarget }
-)
-
-const props = withDefaults(defineProps<Props>(), {
-  href: undefined,
-  to: undefined,
-  target: '_self',
-  rel: undefined,
-  variant: 'default',
-  external: false,
-  active: false,
-  disabled: false,
-  width: 'fit',
-  size: 'inherit',
-  underline: 'hover',
-  wrap: 'normal',
-  contentKind: 'text',
-  leadingIcon: undefined,
-})
-const emit = defineEmits<{
-  click: [event: MouseEvent]
-}>()
-const ownedAttrs = useOwnedAttrs({ component: 'SLink', owner: 'native navigation link' })
-const slots = defineSlots<{
-  /** Пассивный текст/inline-контент ссылки. / Passive text or inline link content. */
-  default?: () => VNodeChild
-  /** Пассивная trailing presentation, например badge. / Passive trailing presentation such as a badge. */
-  trailing?: () => VNodeChild
-}>()
-useInteractiveLeafRegistration({ owner: 'SLink' })
-const passiveContentContract: PassiveContentContract = {
-  owner: 'SLink',
-  region: 'passive link content',
-  guidance: 'Вынесите control за границы ссылки. / Move the control outside the link.',
-}
-
-const resolvedTarget = computed(() => resolveLinkTarget({
-  href: props.href,
-  to: props.to,
-  target: props.target,
-  rel: props.rel,
-  owner: 'SLink',
-}))
-
-const linkComponent = computed(() => {
-  if (props.disabled) return 'a'
-  return resolvedTarget.value.kind === 'router' ? RouterLink : 'a'
-})
-
-const linkBindings = () => ({
-  ...ownedAttrs.bindings(),
-  ...(props.disabled ? {} : resolvedTarget.value.bindings),
-})
-
-function handleClick(event: MouseEvent): void {
-  if (props.disabled) {
-    event.preventDefault()
-    event.stopImmediatePropagation()
-    return
-  }
-  emit('click', event)
-}
-</script>
-
-<template>
-  <component
-    :is="linkComponent"
-    v-bind="linkBindings()"
-    class="s-link"
-    :data-variant="variant"
-    :data-external="external || undefined"
-    :data-active="active || undefined"
-    :data-disabled="disabled || undefined"
-    :data-width="width"
-    :data-size="size"
-    :data-underline="underline"
-    :data-wrap="wrap"
-    :data-content-kind="contentKind"
-    :aria-current="active ? 'page' : undefined"
-    :aria-disabled="disabled || undefined"
-    :tabindex="disabled ? -1 : undefined"
-    :role="disabled ? 'link' : undefined"
-    @click="handleClick"
-  >
-    <span v-if="leadingIcon" class="s-link__icon" aria-hidden="true">
-      <component :is="leadingIcon" class="s-link__icon-graphic" />
-    </span>
-    <PassiveContentBoundary :contract="passiveContentContract">
-      <span class="s-link__content"><slot /></span>
-      <span v-if="slots.trailing" class="s-link__trailing"><slot name="trailing" /></span>
-    </PassiveContentBoundary>
-  </component>
-</template>
-
-<style lang="postcss" src="./SLink.css" scoped></style>

package/src/components/shared/controls/SListbox.vue

@@ -1,488 +0,0 @@
-<template>
-  <ul
-    v-bind="ownedAttrs.bindings()"
-    :id="resolvedId"
-    class="s-listbox"
-    :data-variant="resolvedVariant"
-    :data-invalid="resolvedInvalid || undefined"
-    :data-readonly="resolvedReadonly || undefined"
-    :data-focus-mode="resolvedFocusMode"
-    role="listbox"
-    :aria-label="resolvedLabel"
-    :aria-multiselectable="resolvedSelectionMode === 'multiple' || undefined"
-    :aria-disabled="resolvedDisabled || undefined"
-    :aria-readonly="resolvedReadonly || undefined"
-    :aria-invalid="resolvedInvalid || undefined"
-    @keydown="handleKeydown"
-  >
-    <SListboxOption
-      v-if="resolvedClearOptionLabel"
-      :registration-token="CLEAR_OPTION_TOKEN"
-      :id="optionId(CLEAR_OPTION_TOKEN)"
-      :label="resolvedClearOptionLabel"
-      :title="resolvedClearOptionLabel"
-      :selected="modelValue === null"
-      :disabled="resolvedDisabled"
-      :appearance="optionAppearance"
-      :active="activeToken === CLEAR_OPTION_TOKEN"
-      :focus-on-select="resolvedFocusMode === 'roving'"
-      @hover="setActiveToken(CLEAR_OPTION_TOKEN)"
-      @select="clearSelection"
-    />
-    <template v-for="entry in inventory.entries" :key="entry.token">
-      <SListboxOption
-        v-if="entry.kind === 'option'"
-        :registration-token="entry.record.token"
-        :id="optionId(entry.record.token)"
-        :label="entry.record.option.label"
-        :title="entry.record.option.title ?? entry.record.option.label"
-        :selected="selectedTokens.has(entry.record.token)"
-        :disabled="resolvedDisabled || entry.record.option.disabled"
-        :marker="entry.record.option.marker"
-        :appearance="optionAppearance"
-        :active="activeToken === entry.record.token"
-        :focus-on-select="resolvedFocusMode === 'roving'"
-        @hover="setActiveToken(entry.record.token)"
-        @select="selectOption(entry.record.token)"
-      />
-      <SListboxGroup
-        v-else
-        :label="entry.label"
-        :label-id="groupLabelId(entry.token)"
-        :variant="resolvedVariant"
-      >
-        <SListboxOption
-          v-for="record in entry.records"
-          :key="record.token"
-          :registration-token="record.token"
-          :id="optionId(record.token)"
-          :label="record.option.label"
-          :title="record.option.title ?? record.option.label"
-          :selected="selectedTokens.has(record.token)"
-          :disabled="resolvedDisabled || record.option.disabled"
-          :marker="record.option.marker"
-          :appearance="optionAppearance"
-          :active="activeToken === record.token"
-          :focus-on-select="resolvedFocusMode === 'roving'"
-          @hover="setActiveToken(record.token)"
-          @select="selectOption(record.token)"
-        />
-      </SListboxGroup>
-    </template>
-    <li v-if="inventory.options.length === 0 && !resolvedClearOptionLabel" class="s-listbox__empty" role="presentation">
-      {{ resolvedEmptyLabel }}
-    </li>
-  </ul>
-</template>
-
-<script lang="ts">
-import type { SelectionKey as PublicSelectionKey } from '../_internal/useSelectionRoving'
-import type {
-  SelectionEntry as PublicSelectionEntry,
-  SelectionMode as PublicSelectionMode,
-  SelectionModelValue as PublicSelectionModelValue,
-  SelectionOption as PublicSelectionOption,
-  SelectionOptionGroup as PublicSelectionOptionGroup,
-} from '../_internal/selectionContract'
-
-export type SListboxVariant = 'select' | 'color'
-export type SListboxFocusMode = 'roving' | 'activedescendant'
-export type SListboxMoveIntent = 'next' | 'previous' | 'first' | 'last'
-export type SListboxOption<TKey extends PublicSelectionKey = PublicSelectionKey> = PublicSelectionOption<TKey>
-export type SListboxOptionGroup<TKey extends PublicSelectionKey = PublicSelectionKey> = PublicSelectionOptionGroup<TKey>
-export type SListboxEntry<TKey extends PublicSelectionKey = PublicSelectionKey> = PublicSelectionEntry<TKey>
-export type SListboxMode = PublicSelectionMode
-export type SListboxModelValue<
-  TKey extends PublicSelectionKey,
-  TMode extends SListboxMode,
-> = PublicSelectionModelValue<TKey, TMode>
-
-/**
- * Точная identity option для keyboard event, которым владеет SListbox.
- * Exact option identity for a keyboard event owned by SListbox.
- * Consumer может вызвать preventDefault(), чтобы забрать augmented keyboard chord
- * до базовой keyboard-модели listbox. / A consumer may call preventDefault() to claim an
- * augmented keyboard chord before the base listbox keyboard model runs.
- */
-export interface SListboxOptionKeydownPayload<
-  TKey extends PublicSelectionKey = PublicSelectionKey,
-> {
-  readonly value: TKey | null
-  readonly event: KeyboardEvent
-}
-
-interface SharedProps<TKey extends PublicSelectionKey> {
-  options: readonly SListboxEntry<TKey>[]
-  label: string
-  disabled?: boolean
-  readonly?: boolean
-  invalid?: boolean
-  variant?: SListboxVariant
-  emptyLabel?: string
-  clearOptionLabel?: string
-  id?: string
-  focusMode?: SListboxFocusMode
-  activeValue?: TKey | null
-}
-
-export type SListboxProps<
-  TKey extends PublicSelectionKey = PublicSelectionKey,
-  TMode extends SListboxMode = 'single',
-> = SharedProps<TKey> & (TMode extends 'multiple'
-  ? { selectionMode: 'multiple'; modelValue: readonly TKey[]; clearOptionLabel?: never }
-  : { selectionMode?: 'single'; modelValue: TKey | null; clearOptionLabel?: string })
-
-type ComponentProps<TKey extends PublicSelectionKey> = SharedProps<TKey> & (
-  | { selectionMode?: 'single'; modelValue: TKey | null; clearOptionLabel?: string }
-  | { selectionMode: 'multiple'; modelValue: readonly TKey[]; clearOptionLabel?: never }
-)
-</script>
-
-<script setup lang="ts" generic="TKey extends SelectionKey = string">
-import { computed, onBeforeUnmount, provide, useId } from 'vue'
-import { useUiKitLocale } from '../../../composables/useUiKitLocale'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
-import {
-  validateBoolean,
-  validateDomId,
-  validateExactString,
-  validateNonEmptyString,
-} from '../../../internal/runtimeContract'
-import {
-  isSelectionModelList,
-  resolveSelectionInventory,
-  validateSelectionModel,
-  type SelectionMode,
-} from '../_internal/selectionContract'
-import { listboxContextKey } from '../_internal/listboxContext'
-import type { ListboxOptionRegistration } from '../_internal/listboxContext'
-import { selectionKeyToken, type SelectionKey } from '../_internal/useSelectionRoving'
-import SListboxGroup from '../_internal/SListboxGroup.vue'
-import SListboxOption from './SListboxOption.vue'
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<ComponentProps<TKey>>(), {
-  selectionMode: undefined,
-  disabled: false,
-  readonly: false,
-  invalid: false,
-  variant: 'select',
-  emptyLabel: undefined,
-  clearOptionLabel: undefined,
-  id: undefined,
-  focusMode: 'roving',
-  activeValue: undefined,
-})
-const { t } = useUiKitLocale()
-const emit = defineEmits<{
-  'update:modelValue': [value: TKey | null] | [value: readonly TKey[]]
-  'update:activeValue': [value: TKey | null]
-  'option-keydown': [payload: SListboxOptionKeydownPayload<TKey>]
-  escape: []
-  tab: [event: KeyboardEvent]
-}>()
-const ownedAttrs = useOwnedAttrs({ component: 'SListbox', owner: 'listbox root' })
-useInteractiveLeafRegistration({ owner: 'SListbox' })
-const generatedId = useId()
-const contract = computed(() => {
-  const selectionMode: SelectionMode = validateExactString(
-    'SListbox', 'selectionMode', props.selectionMode ?? 'single', ['single', 'multiple'] as const,
-  )
-  let clearOptionLabel: string | undefined
-  if (props.clearOptionLabel !== undefined) {
-    if (selectionMode === 'multiple') {
-      throw new Error('SListbox: clearOptionLabel is available only in single selection mode')
-    }
-    clearOptionLabel = validateNonEmptyString('SListbox', 'clearOptionLabel', props.clearOptionLabel)
-  }
-  return {
-    id: props.id === undefined
-      ? `s-listbox-${generatedId}`
-      : validateDomId('SListbox', 'id', props.id),
-    label: validateNonEmptyString('SListbox', 'label', props.label),
-    emptyLabel: validateNonEmptyString('SListbox', 'emptyLabel', props.emptyLabel ?? t('forms.noOptions')),
-    variant: validateExactString(
-      'SListbox', 'variant', props.variant, ['select', 'color'] as const,
-    ),
-    disabled: validateBoolean('SListbox', 'disabled', props.disabled),
-    readonly: validateBoolean('SListbox', 'readonly', props.readonly),
-    invalid: validateBoolean('SListbox', 'invalid', props.invalid),
-    focusMode: validateExactString(
-      'SListbox', 'focusMode', props.focusMode, ['roving', 'activedescendant'] as const,
-    ),
-    selectionMode,
-    clearOptionLabel,
-  }
-})
-const resolvedId = computed(() => contract.value.id)
-const resolvedLabel = computed(() => contract.value.label)
-const resolvedEmptyLabel = computed(() => contract.value.emptyLabel)
-const resolvedVariant = computed(() => contract.value.variant)
-const resolvedDisabled = computed(() => contract.value.disabled)
-const resolvedReadonly = computed(() => contract.value.readonly)
-const resolvedInvalid = computed(() => contract.value.invalid)
-const resolvedSelectionMode = computed(() => contract.value.selectionMode)
-const resolvedFocusMode = computed(() => contract.value.focusMode)
-const resolvedClearOptionLabel = computed(() => contract.value.clearOptionLabel)
-const selectionState = computed(() => {
-  const resolvedInventory = resolveSelectionInventory<TKey>('SListbox', props.options)
-  return {
-    inventory: resolvedInventory,
-    selectedTokens: validateSelectionModel(
-      'SListbox', contract.value.selectionMode, props.modelValue, resolvedInventory,
-    ),
-  }
-})
-const inventory = computed(() => selectionState.value.inventory)
-const selectedTokens = computed(() => selectionState.value.selectedTokens)
-const optionAppearance = computed(() => resolvedVariant.value === 'color' ? 'color' : 'select')
-const CLEAR_OPTION_TOKEN = 'clear-option'
-const activeToken = computed(() => {
-  if (resolvedFocusMode.value === 'roving') return undefined
-  if (resolvedSelectionMode.value !== 'single') {
-    throw new Error('SListbox: activedescendant focus mode supports single selection only')
-  }
-  if (props.activeValue === undefined) {
-    throw new TypeError('SListbox: activeValue is required in activedescendant focus mode')
-  }
-  if (props.activeValue === null) return null
-  const token = selectionKeyToken('SListbox', props.activeValue, 'activeValue')
-  if (!inventory.value.optionsByToken.has(token)) {
-    throw new Error('SListbox: activeValue does not match any option')
-  }
-  return token
-})
-
-function optionId(token: string): string {
-  return `${resolvedId.value}-option-${encodeURIComponent(token)}`
-}
-
-function emitModelValue(value: TKey | null | readonly TKey[]): void {
-  if (contract.value.selectionMode === 'multiple') {
-    if (!isSelectionModelList(value)) {
-      throw new TypeError('SListbox: multiple selection update must be an array')
-    }
-    validateSelectionModel('SListbox update', 'multiple', value, inventory.value)
-    emit('update:modelValue', value)
-    return
-  }
-  if (isSelectionModelList(value)) {
-    throw new TypeError('SListbox: single selection update must be a selection key or null')
-  }
-  validateSelectionModel('SListbox update', 'single', value, inventory.value)
-  emit('update:modelValue', value)
-}
-
-function groupLabelId(token: string): string {
-  return `${resolvedId.value}-${token.replace(/[^a-zA-Z0-9_-]/gu, '-')}-label`
-}
-
-function selectOption(token: string): void {
-  if (resolvedDisabled.value || resolvedReadonly.value) return
-  const record = inventory.value.optionsByToken.get(token)
-  if (!record) throw new Error('SListbox: attempted to select a stale option identity')
-  if (record.option.disabled) return
-  if (resolvedSelectionMode.value === 'single') {
-    emitModelValue(record.option.value)
-    return
-  }
-  if (!Array.isArray(props.modelValue)) {
-    throw new TypeError('SListbox: multiple selection requires modelValue to be an array')
-  }
-  const current = [...props.modelValue]
-  const currentIndex = current.findIndex((value) => (
-    selectionKeyToken('SListbox', value, 'modelValue item') === token
-  ))
-  if (currentIndex >= 0) current.splice(currentIndex, 1)
-  else current.push(record.option.value)
-  emitModelValue(current)
-}
-
-function clearSelection(): void {
-  if (resolvedDisabled.value || resolvedReadonly.value) return
-  if (resolvedSelectionMode.value !== 'single') {
-    throw new Error('SListbox: clear selection is available only in single selection mode')
-  }
-  emitModelValue(null)
-}
-
-const registrations = new Set<ListboxOptionRegistration>()
-let typeaheadBuffer = ''
-let typeaheadTimer: ReturnType<typeof setTimeout> | undefined
-
-function enabledRegistrations(): ListboxOptionRegistration[] {
-  return [...registrations]
-    .filter((option) => !option.disabled() && option.element.isConnected)
-    .sort((left, right) => {
-      const position = left.element.compareDocumentPosition(right.element)
-      if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1
-      if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1
-      return 0
-    })
-}
-
-function initializeTabstop(): void {
-  const options = enabledRegistrations()
-  for (const option of registrations) option.element.tabIndex = -1
-  if (resolvedFocusMode.value === 'activedescendant') return
-  const selected = options.find((option) => option.selected())
-  const target = selected ?? options[0]
-  if (target) target.element.tabIndex = 0
-}
-
-provide(listboxContextKey, {
-  register: (registration) => {
-    registrations.add(registration)
-    queueMicrotask(initializeTabstop)
-    return () => registrations.delete(registration)
-  },
-})
-
-function focusOption(target: ListboxOptionRegistration): void {
-  for (const option of registrations) option.element.tabIndex = -1
-  target.element.tabIndex = 0
-  target.element.focus()
-}
-
-function setActiveToken(token: string): void {
-  if (resolvedFocusMode.value !== 'activedescendant') return
-  const target = enabledRegistrations().find((option) => option.token === token)
-  if (!target) return
-  emit('update:activeValue', optionValue(target))
-}
-
-function activeRegistration(options: ListboxOptionRegistration[]): ListboxOptionRegistration | undefined {
-  const token = activeToken.value
-  return token === undefined || token === null
-    ? undefined
-    : options.find((option) => option.token === token)
-}
-
-function initializeActive(): void {
-  if (resolvedFocusMode.value !== 'activedescendant') {
-    throw new Error('SListbox: initializeActive is available only in activedescendant focus mode')
-  }
-  const options = enabledRegistrations()
-  const target = activeRegistration(options) ?? options.find((option) => option.selected()) ?? options[0]
-  if (target) emit('update:activeValue', optionValue(target))
-}
-
-function moveActive(intent: SListboxMoveIntent): void {
-  if (resolvedFocusMode.value !== 'activedescendant') {
-    throw new Error('SListbox: moveActive is available only in activedescendant focus mode')
-  }
-  const options = enabledRegistrations()
-  if (options.length === 0) return
-  const current = activeRegistration(options)
-  const currentIndex = current === undefined ? -1 : options.indexOf(current)
-  const nextIndex = intent === 'first'
-    ? 0
-    : intent === 'last'
-      ? options.length - 1
-      : intent === 'next'
-        ? (Math.max(currentIndex, -1) + 1) % options.length
-        : (currentIndex <= 0 ? options.length : currentIndex) - 1
-  const target = options[nextIndex]
-  if (target) emit('update:activeValue', optionValue(target))
-}
-
-function selectActive(): void {
-  if (resolvedFocusMode.value !== 'activedescendant') {
-    throw new Error('SListbox: selectActive is available only in activedescendant focus mode')
-  }
-  if (resolvedReadonly.value || resolvedDisabled.value) return
-  activeRegistration(enabledRegistrations())?.activate()
-}
-
-function currentOption(
-  options: ListboxOptionRegistration[],
-  event: KeyboardEvent,
-): ListboxOptionRegistration | undefined {
-  return options.find((option) => option.element === event.target)
-    ?? options.find((option) => option.element === document.activeElement)
-    ?? options.find((option) => option.element.tabIndex === 0)
-}
-
-function optionValue(registration: ListboxOptionRegistration): TKey | null {
-  if (registration.token === CLEAR_OPTION_TOKEN) return null
-  const record = inventory.value.optionsByToken.get(registration.token)
-  if (!record) {
-    throw new Error(`SListbox: registered option token ${JSON.stringify(registration.token)} is stale`)
-  }
-  return record.option.value
-}
-
-function handleKeydown(event: KeyboardEvent): void {
-  if (resolvedFocusMode.value === 'activedescendant') return
-  if (event.key === 'Tab') {
-    emit('tab', event)
-    return
-  }
-  if (event.key === 'Escape') {
-    event.preventDefault()
-    emit('escape')
-    return
-  }
-  if (resolvedDisabled.value) return
-  const options = enabledRegistrations()
-  const activeOption = currentOption(options, event)
-  if (activeOption) {
-    emit('option-keydown', { value: optionValue(activeOption), event })
-    if (event.defaultPrevented) return
-  }
-  if (event.key === 'Enter' || event.key === ' ') {
-    if (resolvedReadonly.value) return
-    if (!activeOption) return
-    event.preventDefault()
-    activeOption.activate()
-    return
-  }
-  if (event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey) {
-    typeaheadBuffer += event.key.toLocaleLowerCase()
-    if (typeaheadTimer) clearTimeout(typeaheadTimer)
-    typeaheadTimer = setTimeout(() => { typeaheadBuffer = ''; typeaheadTimer = undefined }, 500)
-    const query = [...typeaheadBuffer].every((character) => character === typeaheadBuffer[0])
-      ? typeaheadBuffer[0]!
-      : typeaheadBuffer
-    const currentIndex = activeOption === undefined ? -1 : options.indexOf(activeOption)
-    const searchOrder = currentIndex >= 0
-      ? [...options.slice(currentIndex + 1), ...options.slice(0, currentIndex + 1)]
-      : options
-    const match = searchOrder.find((option) => option.label().toLocaleLowerCase().startsWith(query))
-    if (match) {
-      event.preventDefault()
-      focusOption(match)
-    }
-    return
-  }
-  if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key) || options.length === 0) return
-  const currentIndex = activeOption === undefined ? -1 : options.indexOf(activeOption)
-  const nextIndex = event.key === 'Home'
-    ? 0
-    : event.key === 'End'
-      ? options.length - 1
-      : event.key === 'ArrowDown'
-        ? (Math.max(currentIndex, -1) + 1) % options.length
-        : (currentIndex <= 0 ? options.length : currentIndex) - 1
-  const target = options[nextIndex]
-  if (!target) return
-  event.preventDefault()
-  focusOption(target)
-}
-
-function focusSelectedOrFirst(): void {
-  if (resolvedFocusMode.value !== 'roving') {
-    throw new Error('SListbox: focusSelectedOrFirst is available only in roving focus mode')
-  }
-  const options = enabledRegistrations()
-  const target = options.find((option) => option.selected()) ?? options[0]
-  if (target) focusOption(target)
-}
-
-onBeforeUnmount(() => { if (typeaheadTimer) clearTimeout(typeaheadTimer) })
-defineExpose({ focusSelectedOrFirst, initializeActive, moveActive, selectActive })
-</script>
-
-<style lang="postcss" src="./SListbox.css" scoped></style>