@pgcorp/ui-kit 0.2.0 → 0.3.0

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

@@ -0,0 +1,322 @@
+<template>
+  <div ref="anchorRef" class="s-combobox-anchor">
+    <SInputText
+      ref="inputRef"
+      v-bind="ownedAttrs.bindings()"
+      :id="inputId"
+      :model-value="validatedSearch"
+      :label="label"
+      :placeholder="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="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'
+
+export interface Props<TKey extends PublicSelectionKey = 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'
+}
+</script>
+
+<script setup lang="ts" generic="TKey extends SelectionKey = string">
+import { computed, nextTick, onBeforeUnmount, shallowRef, useId, watch } from 'vue'
+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<Props<TKey>>(), {
+  filterMode: 'local',
+  label: undefined,
+  placeholder: 'Начните вводить для поиска',
+  disabled: false,
+  readonly: false,
+  required: false,
+  invalid: false,
+  errorMessage: undefined,
+  helpText: undefined,
+  emptyLabel: 'Нет доступных вариантов',
+  id: undefined,
+  size: 'md',
+})
+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-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),
+  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),
+  size: validateExactString('SCombobox', 'size', props.size, ['sm', 'md', 'lg'] as const),
+  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)
+  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 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
+  void reason
+  isOpen.value = false
+  activeValue.value = null
+  layerRegistration?.unregister({ restoreFocus: false })
+  layerRegistration = null
+  layerZIndex.value = 'var(--s-layer-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()
+    listboxRef.value?.selectActive()
+    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/SInputText.vue

@@ -40,6 +40,9 @@
             :aria-describedby="mergeIdReferences(ownedAttrs.string('aria-describedby'), field.describedBy)"
             @input="onInput"
             @change="onChange"
+            @focus="emit('focus', $event)"
+            @click="emit('click', $event)"
+            @keydown="emit('keydown', $event)"
           />
           <div v-if="trailingKind" class="s-input-trailing" :data-kind="trailingKind">
             <span v-if="trailingIcon" class="s-input-trailing__passive" aria-hidden="true">
@@ -72,6 +75,7 @@
 
 <script setup lang="ts">
 import { computed, ref, useId, watchEffect, type Component } from 'vue'
+import type { InteractiveElementApi } from '../../../internal/interactiveElement'
 import { mergeIdReferences, useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
 import { resolveFieldSurfaceBindings, type FieldSurfaceBindings } from '../../../internal/fieldSurface'
@@ -177,6 +181,9 @@ export interface SInputTextTrailingAction {
   loading?: boolean
 }
 
+/** Native input owner API for focus-managed compound controls. */
+export type SInputTextApi = InteractiveElementApi<HTMLInputElement>
+
 const props = withDefaults(defineProps<Props>(), {
   modelValue: '',
   modelModifiers: () => ({}),
@@ -206,6 +213,9 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{
   'update:modelValue': [value: string]
   'trailing-action': [event: MouseEvent]
+  focus: [event: FocusEvent]
+  click: [event: MouseEvent]
+  keydown: [event: KeyboardEvent]
 }>()
 const ownedAttrs = useOwnedAttrs({ component: 'SInputText', owner: 'native input' })
 useInteractiveLeafRegistration({ owner: 'SInputText' })
@@ -213,6 +223,11 @@ useInteractiveLeafRegistration({ owner: 'SInputText' })
 const inputRef = ref<HTMLInputElement | null>(null)
 defineExpose({
   focus: () => inputRef.value?.focus(),
+  getElement: () => {
+    const element = inputRef.value
+    if (!element) throw new Error('SInputText: native input element is unavailable')
+    return element
+  },
 })
 
 const generatedInputId = useId()

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

@@ -6,6 +6,7 @@
     :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"
@@ -17,23 +18,31 @@
     <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
@@ -46,12 +55,16 @@
           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>
@@ -73,6 +86,8 @@ import type {
 } 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>
@@ -106,6 +121,8 @@ interface SharedProps<TKey extends PublicSelectionKey> {
   emptyLabel?: string
   clearOptionLabel?: string
   id?: string
+  focusMode?: SListboxFocusMode
+  activeValue?: TKey | null
 }
 
 export type SListboxProps<
@@ -154,9 +171,12 @@ const props = withDefaults(defineProps<ComponentProps<TKey>>(), {
   emptyLabel: 'Нет доступных вариантов',
   clearOptionLabel: undefined,
   id: undefined,
+  focusMode: 'roving',
+  activeValue: undefined,
 })
 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]
@@ -187,6 +207,9 @@ const contract = computed(() => {
     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,
   }
@@ -199,6 +222,7 @@ 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)
@@ -213,6 +237,25 @@ 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') {
@@ -281,6 +324,7 @@ function enabledRegistrations(): ListboxOptionRegistration[] {
 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
@@ -300,6 +344,56 @@ function focusOption(target: ListboxOptionRegistration, options = enabledRegistr
   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,
@@ -319,6 +413,7 @@ function optionValue(registration: ListboxOptionRegistration): TKey | null {
 }
 
 function handleKeydown(event: KeyboardEvent): void {
+  if (resolvedFocusMode.value === 'activedescendant') return
   if (event.key === 'Tab') {
     emit('tab', event)
     return
@@ -376,13 +471,16 @@ function handleKeydown(event: KeyboardEvent): void {
 }
 
 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, options)
 }
 
 onBeforeUnmount(() => { if (typeaheadTimer) clearTimeout(typeaheadTimer) })
-defineExpose({ focusSelectedOrFirst })
+defineExpose({ focusSelectedOrFirst, initializeActive, moveActive, selectActive })
 </script>
 
 <style lang="postcss" src="./SListbox.css" scoped></style>

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

@@ -1,9 +1,10 @@
 <template>
   <li
     ref="optionRef"
+    :id="id"
     class="s-listbox-option__control"
     :data-appearance="appearance"
-    :data-focused="focused || undefined"
+    :data-focused="focused || active || undefined"
     :title="title ?? label"
     :aria-label="appearance === 'color' ? label : undefined"
     role="option"
@@ -12,6 +13,8 @@
     :tabindex="-1"
     @focus="focused = true"
     @blur="focused = false"
+    @mousedown="onMousedown"
+    @mouseenter="emit('hover')"
     @click.stop="select"
   >
     <span class="s-listbox-option__main" :data-appearance="appearance">
@@ -42,6 +45,9 @@ export interface Props {
   appearance?: 'select' | 'color'
   marker?: MarkerContract
   title?: string
+  id?: string
+  active?: boolean
+  focusOnSelect?: boolean
 }
 
 defineOptions({ inheritAttrs: false })
@@ -51,10 +57,14 @@ const props = withDefaults(defineProps<Props>(), {
   appearance: 'select',
   marker: undefined,
   title: undefined,
+  id: undefined,
+  active: false,
+  focusOnSelect: true,
 })
 
 const emit = defineEmits<{
   select: []
+  hover: []
 }>()
 useInteractiveLeafRegistration({ owner: 'SListboxOption' })
 const context = inject(listboxContextKey)
@@ -64,9 +74,12 @@ const optionRef = ref<HTMLLIElement | null>(null)
 let unregister: (() => void) | undefined
 const select = (): void => {
   if (props.disabled) return
-  optionRef.value?.focus()
+  if (props.focusOnSelect) optionRef.value?.focus()
   emit('select')
 }
+const onMousedown = (event: MouseEvent): void => {
+  if (!props.focusOnSelect) event.preventDefault()
+}
 onMounted(() => {
   const element = optionRef.value
   if (!(element instanceof HTMLLIElement)) throw new Error('SListboxOption: option element is unavailable')