@pgcorp/ui-kit 0.10.0 → 0.10.2

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

@@ -1,146 +0,0 @@
-<template>
-  <SSelect
-    v-bind="ownedAttrs.bindings()"
-    :id="id"
-    :model-value="modelValue"
-    :options="resolvedOptions"
-    selection-mode="single"
-    :disabled="disabled"
-    :placeholder="computedAriaLabel"
-    :title="resolvedTitle"
-    :size="size"
-    :align="align"
-    :trigger-marker="triggerMarker"
-    appearance="swatch"
-    @update:model-value="updateColor"
-  />
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import { validateNonEmptyString } from '../../../internal/runtimeContract'
-import SSelect, { type SSelectOption as BaseSelectOption } from './SSelect.vue'
-import type { SMarker, SMarkerTone } from '../_internal/markerContract'
-
-interface SColorSelectOptionBase {
-  value: string
-  label: string
-  title?: string
-  disabled?: boolean
-}
-
-/** Предопределённый цвет из палитры. / A predefined palette color. */
-export type SColorSelectPresetOption = SColorSelectOptionBase & {
-  kind?: 'preset'
-  marker: { tone: SMarkerTone }
-}
-
-/**
- * Явный пользовательский цвет с собственным значением и подписью.
- * An explicit custom color with its own value and label.
- */
-export type SColorSelectCustomOption = SColorSelectOptionBase & {
-  kind: 'custom'
-  marker: Extract<SMarker, { tone: 'custom' }>
-}
-
-/** Закрытый контракт вариантов выбора цвета. / Closed color-selection option contract. */
-export type SColorSelectOption = SColorSelectPresetOption | SColorSelectCustomOption
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<{
-  modelValue: string; options: readonly SColorSelectOption[]; id?: string; disabled?: boolean; title?: string;
-  ariaLabel?: string; size?: 'sm' | 'md'; align?: 'left' | 'right' | 'center'
-}>(), { id: undefined, disabled: false, title: undefined, ariaLabel: undefined, size: 'md', align: 'left' })
-const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
-const ownedAttrs = useOwnedAttrs({ component: 'SColorSelect', owner: 'combobox trigger' })
-
-const allowedOptionKeys = new Set(['kind', 'value', 'label', 'marker', 'title', 'disabled'])
-const resolvedOptions = computed<readonly BaseSelectOption<string>[]>(() => {
-  if (!Array.isArray(props.options)) {
-    throw new TypeError('SColorSelect: options должен быть массивом. / SColorSelect: options must be an array.')
-  }
-
-  return props.options.map((option, index) => {
-    const candidate: unknown = option
-    if (typeof candidate !== 'object' || candidate === null || Array.isArray(candidate)) {
-      throw new TypeError(
-        `SColorSelect: options[${index}] должен быть объектом option. `
-        + `/ SColorSelect: options[${index}] must be an option object`,
-      )
-    }
-    const unsupportedKey = Object.keys(candidate).find((key) => !allowedOptionKeys.has(key))
-    if (unsupportedKey !== undefined) {
-      throw new TypeError(
-        `SColorSelect: options[${index}].${unsupportedKey} не входит в контракт color option. `
-        + `/ SColorSelect: options[${index}].${unsupportedKey} is not part of the color option contract`,
-      )
-    }
-    const marker = (candidate as { marker?: SMarker }).marker
-    const kind = (candidate as { kind?: unknown }).kind
-    if (marker === undefined) {
-      throw new TypeError(
-        `SColorSelect: options[${index}].marker обязателен. `
-        + `/ SColorSelect: options[${index}].marker is required`,
-      )
-    }
-    if (marker?.tone === 'custom' && kind !== 'custom') {
-      throw new TypeError(
-        `SColorSelect: options[${index}] с custom marker должен объявлять kind "custom". `
-        + `/ SColorSelect: options[${index}] with a custom marker must declare kind "custom"`,
-      )
-    }
-    if (kind === 'custom' && marker?.tone !== 'custom') {
-      throw new TypeError(
-        `SColorSelect: options[${index}] kind "custom" требует custom marker. `
-        + `/ SColorSelect: options[${index}] kind "custom" requires a custom marker`,
-      )
-    }
-    if (kind !== undefined && kind !== 'preset' && kind !== 'custom') {
-      throw new TypeError(
-        `SColorSelect: options[${index}].kind должен быть "preset" или "custom". `
-        + `/ SColorSelect: options[${index}].kind must be "preset" or "custom"`,
-      )
-    }
-
-    const { value, label, title, disabled } = option
-    return {
-      value,
-      label,
-      marker,
-      ...(title === undefined ? {} : { title }),
-      ...(disabled === undefined ? {} : { disabled }),
-    }
-  })
-})
-const selectedOption = computed(() => {
-  const modelValue = validateNonEmptyString('SColorSelect', 'modelValue', props.modelValue)
-  const option = resolvedOptions.value.find((candidate) => candidate.value === modelValue)
-  if (option !== undefined) return option
-  throw new Error(
-    `SColorSelect: modelValue ${JSON.stringify(modelValue)} отсутствует в options inventory. `
-    + `/ SColorSelect: modelValue ${JSON.stringify(modelValue)} is absent from the options inventory.`,
-  )
-})
-const triggerMarker = computed(() => selectedOption.value.marker)
-const resolvedTitle = computed(() => props.title === undefined
-  ? undefined
-  : validateNonEmptyString('SColorSelect', 'title', props.title))
-const computedAriaLabel = computed(() => {
-  if (props.ariaLabel !== undefined) {
-    return validateNonEmptyString('SColorSelect', 'ariaLabel', props.ariaLabel)
-  }
-  if (resolvedTitle.value !== undefined) return resolvedTitle.value
-  return validateNonEmptyString('SColorSelect', 'selectedOption.label', selectedOption.value.label)
-})
-const updateColor = (value: string | null | readonly string[]): void => {
-  if (typeof value !== 'string') {
-    throw new TypeError(
-      'SColorSelect: SSelect update должен быть строковым ключом цвета. '
-      + '/ SColorSelect: SSelect update must be a string color key',
-    )
-  }
-  emit('update:modelValue', value)
-}
-</script>

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

@@ -1,366 +0,0 @@
-<template>
-  <div ref="anchorRef" class="s-combobox-anchor">
-    <SInputText
-      ref="inputRef"
-      v-bind="ownedAttrs.bindings()"
-      :id="inputId"
-      :model-value="validatedSearch"
-      :label="label"
-      :placeholder="contract.placeholder"
-      :disabled="disabled"
-      :readonly="readonly"
-      :required="required"
-      :invalid="invalid"
-      :error-message="errorMessage"
-      :help-text="helpText"
-      :size="size"
-      type="search"
-      autocomplete="off"
-      role="combobox"
-      aria-haspopup="listbox"
-      aria-autocomplete="list"
-      :aria-expanded="isOpen"
-      :aria-controls="listboxId"
-      :aria-activedescendant="activeDescendantId"
-      @update:model-value="onSearchUpdate"
-      @focus="open"
-      @click="open"
-      @keydown="onInputKeydown"
-    />
-  </div>
-  <teleport to="body">
-    <div v-if="isOpen" ref="panelRef" :style="floatingStyle" class="s-combobox-layer">
-      <SListbox
-        ref="listboxRef"
-        :id="listboxId"
-        :model-value="popupModelValue"
-        :options="filteredOptions"
-        :label="accessibleLabel"
-        :disabled="disabled"
-        :readonly="readonly"
-        :invalid="invalid"
-        :empty-label="contract.emptyLabel"
-        focus-mode="activedescendant"
-        :active-value="activeValue"
-        @update:model-value="onListboxUpdate"
-        @update:active-value="activeValue = $event"
-      />
-    </div>
-  </teleport>
-</template>
-
-<script lang="ts">
-import type {
-  SelectionEntry as PublicSelectionEntry,
-  SelectionOption as PublicSelectionOption,
-  SelectionOptionGroup as PublicSelectionOptionGroup,
-} from '../_internal/selectionContract'
-import type { SelectionKey as PublicSelectionKey } from '../_internal/useSelectionRoving'
-
-export type SComboboxOption<TKey extends PublicSelectionKey = PublicSelectionKey> = PublicSelectionOption<TKey>
-export type SComboboxOptionGroup<TKey extends PublicSelectionKey = PublicSelectionKey> = PublicSelectionOptionGroup<TKey>
-export type SComboboxEntry<TKey extends PublicSelectionKey = PublicSelectionKey> = PublicSelectionEntry<TKey>
-export type SComboboxFilterMode = 'local' | 'manual'
-
-interface SharedProps<TKey extends PublicSelectionKey> {
-  modelValue: TKey | null
-  search: string
-  options: readonly SComboboxEntry<TKey>[]
-  filterMode?: SComboboxFilterMode
-  label?: string
-  placeholder?: string
-  disabled?: boolean
-  readonly?: boolean
-  required?: boolean
-  invalid?: boolean
-  errorMessage?: string
-  helpText?: string
-  emptyLabel?: string
-  id?: string
-  size?: 'sm' | 'md' | 'lg'
-}
-
-/**
- * Custom values require a string-compatible model because the editable text is the committed identity.
- * Свободные значения требуют string-compatible model, потому что введённый текст становится identity.
- */
-export type Props<TKey extends PublicSelectionKey = PublicSelectionKey> = SharedProps<TKey> & {
-  allowCustomValue?: string extends TKey ? boolean : false
-}
-
-type ComponentProps<TKey extends PublicSelectionKey> = SharedProps<TKey> & {
-  allowCustomValue?: boolean
-}
-</script>
-
-<script setup lang="ts" generic="TKey extends SelectionKey = string">
-import { computed, nextTick, onBeforeUnmount, shallowRef, useId, watch } from 'vue'
-import { useUiKitLocale } from '../../../composables/useUiKitLocale'
-import { useFloatingPosition } from '../../../composables/useFloatingPosition'
-import { registerLayer, type LayerRegistration } from '../../../internal/layerStack'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import {
-  validateBoolean,
-  validateDomId,
-  validateExactString,
-  validateNonEmptyString,
-} from '../../../internal/runtimeContract'
-import {
-  isSelectionModelList,
-  resolveSelectionInventory,
-  validateOptionalSelectionString,
-  validateSelectionModel,
-  type ResolvedSelectionInventory,
-  type SelectionEntry,
-} from '../_internal/selectionContract'
-import { selectionKeyToken, type SelectionKey } from '../_internal/useSelectionRoving'
-import SInputText, { type SInputTextApi } from './SInputText.vue'
-import SListbox, { type SListboxMoveIntent } from './SListbox.vue'
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<ComponentProps<TKey>>(), {
-  filterMode: 'local',
-  label: undefined,
-  placeholder: undefined,
-  disabled: false,
-  readonly: false,
-  required: false,
-  invalid: false,
-  errorMessage: undefined,
-  helpText: undefined,
-  emptyLabel: undefined,
-  id: undefined,
-  size: 'md',
-  allowCustomValue: false,
-})
-const { t } = useUiKitLocale()
-const emit = defineEmits<{
-  'update:modelValue': [value: TKey | null]
-  'update:search': [value: string]
-}>()
-const ownedAttrs = useOwnedAttrs({ component: 'SCombobox', owner: 'editable combobox input' })
-const generatedId = useId()
-const inputRef = shallowRef<SInputTextApi | null>(null)
-const listboxRef = shallowRef<{
-  initializeActive: () => void
-  moveActive: (intent: SListboxMoveIntent) => void
-  selectActive: () => void
-} | null>(null)
-const isOpen = shallowRef(false)
-const activeValue = shallowRef<TKey | null>(null)
-const layerZIndex = shallowRef('var(--s-layer-root-floating)')
-let layerRegistration: LayerRegistration | null = null
-
-const inputId = computed(() => props.id === undefined
-  ? `s-combobox-${generatedId}`
-  : validateDomId('SCombobox', 'id', props.id))
-const listboxId = computed(() => `${inputId.value}-listbox`)
-const validatedSearch = computed(() => {
-  if (typeof props.search !== 'string') throw new TypeError('SCombobox: search must be a string')
-  return props.search
-})
-const contract = computed(() => ({
-  filterMode: validateExactString(
-    'SCombobox', 'filterMode', props.filterMode, ['local', 'manual'] as const,
-  ),
-  placeholder: validateNonEmptyString('SCombobox', 'placeholder', props.placeholder ?? t('forms.searchPlaceholder')),
-  disabled: validateBoolean('SCombobox', 'disabled', props.disabled),
-  readonly: validateBoolean('SCombobox', 'readonly', props.readonly),
-  required: validateBoolean('SCombobox', 'required', props.required),
-  invalid: validateBoolean('SCombobox', 'invalid', props.invalid),
-  emptyLabel: validateNonEmptyString('SCombobox', 'emptyLabel', props.emptyLabel ?? t('forms.noOptions')),
-  size: validateExactString('SCombobox', 'size', props.size, ['sm', 'md', 'lg'] as const),
-  allowCustomValue: validateBoolean('SCombobox', 'allowCustomValue', props.allowCustomValue),
-  label: validateOptionalSelectionString('SCombobox', 'label', props.label),
-  helpText: validateOptionalSelectionString('SCombobox', 'helpText', props.helpText),
-  errorMessage: validateOptionalSelectionString('SCombobox', 'errorMessage', props.errorMessage),
-}))
-const inventory = computed(() => {
-  const resolved = resolveSelectionInventory<TKey>('SCombobox', props.options)
-  if (contract.value.allowCustomValue && typeof props.modelValue === 'string') {
-    selectionKeyToken('SCombobox', props.modelValue, 'modelValue')
-  } else {
-    validateSelectionModel('SCombobox', 'single', props.modelValue, resolved)
-  }
-  return resolved
-})
-
-function inventoryEntries(resolved: ResolvedSelectionInventory<TKey>): readonly SelectionEntry<TKey>[] {
-  return resolved.entries.map((entry) => entry.kind === 'option'
-    ? entry.record.option
-    : {
-        groupId: entry.groupId,
-        label: entry.label,
-        options: entry.records.map((record) => record.option),
-      })
-}
-
-const filteredOptions = computed<readonly SelectionEntry<TKey>[]>(() => {
-  const resolved = inventory.value
-  if (contract.value.filterMode === 'manual') return inventoryEntries(resolved)
-  const query = validatedSearch.value.trim().toLocaleLowerCase()
-  if (query.length === 0) return inventoryEntries(resolved)
-  return resolved.entries.flatMap<SelectionEntry<TKey>>((entry) => {
-    if (entry.kind === 'option') {
-      const searchable = `${entry.record.option.label} ${entry.record.option.title ?? ''}`.toLocaleLowerCase()
-      return searchable.includes(query) ? [entry.record.option] : []
-    }
-    const records = entry.records.filter((record) => (
-      `${record.option.label} ${record.option.title ?? ''}`.toLocaleLowerCase().includes(query)
-    ))
-    return records.length === 0 ? [] : [{
-      groupId: entry.groupId,
-      label: entry.label,
-      options: records.map((record) => record.option),
-    }]
-  })
-})
-const filteredInventory = computed(() => resolveSelectionInventory<TKey>(
-  'SCombobox filtered options', filteredOptions.value,
-))
-const popupModelValue = computed<TKey | null>(() => {
-  if (props.modelValue === null) return null
-  const token = selectionKeyToken('SCombobox', props.modelValue, 'modelValue')
-  return filteredInventory.value.optionsByToken.has(token) ? props.modelValue : null
-})
-const accessibleLabel = computed(() => {
-  const bindings = ownedAttrs.bindings()
-  const ariaLabel = bindings['aria-label']
-  if (typeof ariaLabel === 'string') return validateNonEmptyString('SCombobox', 'aria-label', ariaLabel)
-  return contract.value.label ?? contract.value.placeholder
-})
-const activeDescendantId = computed(() => {
-  if (!isOpen.value || activeValue.value === null) return undefined
-  const token = selectionKeyToken('SCombobox', activeValue.value, 'activeValue')
-  if (!filteredInventory.value.optionsByToken.has(token)) return undefined
-  return `${listboxId.value}-option-${encodeURIComponent(token)}`
-})
-
-watch(validatedSearch, () => {
-  activeValue.value = null
-  if (isOpen.value) nextTick(() => listboxRef.value?.initializeActive())
-}, { flush: 'sync' })
-
-const { anchorRef, panelRef, floatingStyle } = useFloatingPosition({
-  active: isOpen,
-  placement: () => 'bottom-start',
-  widthMatch: () => 'exact',
-  zIndex: () => layerZIndex.value,
-})
-
-type CloseReason = 'selection' | 'escape' | 'tab' | 'outside'
-
-function customValueFromSearch(): TKey | null {
-  if (!contract.value.allowCustomValue) return null
-  const value = validatedSearch.value.trim()
-  if (value.length === 0) return null
-
-  if (props.modelValue !== null) {
-    const currentToken = selectionKeyToken('SCombobox', props.modelValue, 'modelValue')
-    const currentOption = inventory.value.optionsByToken.get(currentToken)
-    if (currentOption?.option.label.trim() === value) return null
-    if (typeof props.modelValue === 'string' && props.modelValue === value) return null
-  }
-
-  return value as TKey
-}
-
-function commitCustomValue(): boolean {
-  const value = customValueFromSearch()
-  if (value === null) return false
-  emit('update:modelValue', value)
-  emit('update:search', String(value))
-  return true
-}
-
-function inputElement(): HTMLInputElement {
-  const api = inputRef.value
-  if (!api) throw new Error('SCombobox: SInputText API is unavailable')
-  return api.getElement()
-}
-
-function close(reason: CloseReason): void {
-  if (!isOpen.value) return
-  if (reason === 'tab' || reason === 'outside') commitCustomValue()
-  isOpen.value = false
-  activeValue.value = null
-  layerRegistration?.unregister({ restoreFocus: false })
-  layerRegistration = null
-  layerZIndex.value = 'var(--s-layer-root-floating)'
-}
-
-async function open(): Promise<void> {
-  void inventory.value
-  if (contract.value.disabled || contract.value.readonly || isOpen.value) return
-  const input = inputElement()
-  isOpen.value = true
-  layerRegistration = registerLayer({
-    kind: 'listbox',
-    root: () => panelRef.value,
-    anchor: () => anchorRef.value,
-    restoreTarget: input,
-    requestDismiss: (reason) => close(reason === 'escape' ? 'escape' : 'outside'),
-  })
-  layerZIndex.value = layerRegistration.zIndex
-  await nextTick()
-  listboxRef.value?.initializeActive()
-}
-
-function onSearchUpdate(value: string): void {
-  emit('update:search', value)
-  activeValue.value = null
-  if (!isOpen.value) void open()
-  else nextTick(() => listboxRef.value?.initializeActive())
-}
-
-function onListboxUpdate(value: TKey | null | readonly TKey[]): void {
-  if (isSelectionModelList(value)) {
-    throw new TypeError('SCombobox: selection update must be a single key or null')
-  }
-  validateSelectionModel('SCombobox update', 'single', value, inventory.value)
-  emit('update:modelValue', value)
-  if (value !== null) {
-    const token = selectionKeyToken('SCombobox', value, 'selected value')
-    const option = inventory.value.optionsByToken.get(token)
-    if (!option) throw new Error('SCombobox: selected option identity is stale')
-    emit('update:search', option.option.label)
-  }
-  close('selection')
-}
-
-async function onInputKeydown(event: KeyboardEvent): Promise<void> {
-  const intents: Partial<Record<string, SListboxMoveIntent>> = {
-    ArrowDown: 'next',
-    ArrowUp: 'previous',
-    Home: 'first',
-    End: 'last',
-  }
-  const intent = intents[event.key]
-  if (intent) {
-    event.preventDefault()
-    const wasOpen = isOpen.value
-    await open()
-    await nextTick()
-    if (!wasOpen && (intent === 'next' || intent === 'previous')) return
-    listboxRef.value?.moveActive(intent)
-    return
-  }
-  if (event.key === 'Enter' && isOpen.value) {
-    event.preventDefault()
-    if (activeValue.value !== null) listboxRef.value?.selectActive()
-    else if (commitCustomValue()) close('selection')
-    return
-  }
-  if (event.key === 'Escape' && isOpen.value) {
-    event.preventDefault()
-    close('escape')
-    return
-  }
-  if (event.key === 'Tab') close('tab')
-}
-
-onBeforeUnmount(() => layerRegistration?.unregister({ restoreFocus: false }))
-</script>
-
-<style lang="postcss" src="./SCombobox.css" scoped></style>

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

@@ -1,125 +0,0 @@
-<template>
-  <button
-    v-bind="fieldSurfaceBindings"
-    ref="buttonRef"
-    type="button"
-    :id="id"
-    :title="title"
-    class="s-combobox-trigger"
-    :data-size="size"
-    :data-width="width"
-    :disabled="disabled"
-    role="combobox"
-    aria-haspopup="listbox"
-    :aria-label="accessibleLabel"
-    :aria-expanded="expanded"
-    :aria-controls="controls"
-    :aria-invalid="invalid || undefined"
-    :aria-describedby="describedBy"
-    :aria-required="required || undefined"
-    :aria-readonly="readonly || undefined"
-    :data-testid="testId"
-    :data-test="test"
-    :data-task-mapping-internal-value="taskMappingInternalValue"
-    :data-task-mapping-kind="taskMappingKind"
-    :data-appearance="appearance"
-    @click="emit('toggle', $event)"
-    @keydown.down.prevent="emit('toggle', $event)"
-    @keydown.up.prevent="emit('toggle', $event)"
-  >
-    <SMarker v-if="marker" :marker="marker" :size="appearance === 'swatch' ? 'lg' : 'sm'" />
-    <span v-if="appearance === 'field'" class="s-combobox-trigger__value">
-      {{ displayValue || resolvedPlaceholder }}
-    </span>
-    <span class="s-combobox-trigger__caret" aria-hidden="true">
-      <ChevronsUpDown v-if="appearance === 'field'" />
-      <ChevronDown v-else />
-    </span>
-  </button>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useUiKitLocale } from '../../../composables/useUiKitLocale'
-import { ChevronDown, ChevronsUpDown } from '../../icons/sputnigUiIcons'
-import type { InteractiveElementApi } from '../../../internal/interactiveElement'
-import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
-import { resolveFieldSurfaceBindings } from '../../../internal/fieldSurface'
-import SMarker from './SMarker.vue'
-import type { SMarker as MarkerContract } from '../_internal/markerContract'
-
-export interface Props {
-  id: string
-  accessibleLabel: string
-  expanded: boolean
-  controls: string
-  displayValue?: string
-  placeholder?: string
-  marker?: MarkerContract
-  appearance?: 'field' | 'swatch'
-  size?: 'xs' | 'sm' | 'md'
-  width?: 'auto' | 'full'
-  disabled?: boolean
-  invalid?: boolean
-  readonly?: boolean
-  required?: boolean
-  describedBy?: string
-  title?: string
-  testId?: string | number | boolean
-  test?: string | number | boolean
-  taskMappingInternalValue?: string | number | boolean
-  taskMappingKind?: string | number | boolean
-}
-
-export type SComboboxTriggerApi = InteractiveElementApi<HTMLButtonElement>
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<Props>(), {
-  displayValue: undefined,
-  placeholder: undefined,
-  marker: undefined,
-  appearance: 'field',
-  size: 'md',
-  width: 'full',
-  disabled: false,
-  invalid: false,
-  readonly: false,
-  required: false,
-  describedBy: undefined,
-  title: undefined,
-  testId: undefined,
-  test: undefined,
-  taskMappingInternalValue: undefined,
-  taskMappingKind: undefined,
-})
-const { t } = useUiKitLocale()
-const resolvedPlaceholder = computed(() => props.placeholder ?? t('forms.selectPlaceholder'))
-
-const emit = defineEmits<{
-  toggle: [event: MouseEvent | KeyboardEvent]
-}>()
-const buttonRef = ref<HTMLButtonElement | null>(null)
-const fieldSurfaceBindings = computed(() => resolveFieldSurfaceBindings('SComboboxTrigger', {
-  kind: 'combobox-trigger',
-  appearance: props.appearance === 'field' ? 'field' : 'embedded',
-  invalid: props.invalid,
-  disabled: props.disabled,
-  readonly: props.readonly,
-}))
-
-useInteractiveLeafRegistration({ owner: 'SComboboxTrigger' })
-
-const getElement = (): HTMLButtonElement => {
-  const element = buttonRef.value
-  if (!element) throw new Error('SComboboxTrigger: native button element is unavailable')
-  return element
-}
-
-defineExpose<SComboboxTriggerApi>({
-  getElement,
-  focus: (options?: FocusOptions) => getElement().focus(options),
-})
-</script>
-
-<style lang="postcss" src="./SComboboxTrigger.css" scoped></style>