@pgcorp/ui-kit 0.1.2 → 0.3.0

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

@@ -1,20 +1,24 @@
 <template>
-  <button
-    ref="buttonRef"
-    v-bind="buttonBindings"
+  <component
+    :is="rootComponent"
+    :ref="setRootRef"
+    v-bind="rootBindings"
     class="s-button"
     :data-severity="severity"
     :data-size="size"
     :data-width="width"
     :data-content-align="contentAlign"
+    :data-density="density"
+    :data-spacing="spacing"
+    :data-hover-surface="hoverSurface"
     :data-icon-only="isIconOnly"
+    :data-icon-size="iconSize"
     :data-appearance="appearance"
     :data-shape="shape"
     :data-loading="loading || undefined"
     :aria-pressed="pressed"
     :aria-busy="busy || loading || undefined"
-    :disabled="disabled || loading"
-    :type="type"
+    @click="handleClick"
   >
     <span v-if="loading" class="s-button__loader" aria-hidden="true">
       <SProgressIndicator
@@ -33,7 +37,7 @@
       <component :is="leadingIcon" v-else-if="leadingIcon" class="s-button__icon s-button__icon--leading" aria-hidden="true" />
       <span v-if="label" class="s-button__label">{{ label }}</span>
       <PassiveContentBoundary v-if="renderDefaultSlot" :contract="passiveContentContract">
-        <slot />
+        <component :is="defaultContentComponent" />
       </PassiveContentBoundary>
       <span v-if="badge !== undefined" class="s-button__badge-slot">
         <SBadge :severity="badgeSeverity" size="xs">{{ badge }}</SBadge>
@@ -48,14 +52,16 @@
       ><ChevronRight /></span>
       <component :is="trailingIcon" v-else-if="trailingIcon" class="s-button__icon s-button__icon--trailing" aria-hidden="true" />
     </span>
-  </button>
+  </component>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watchEffect } from 'vue'
-import type { Component, VNodeChild } from 'vue'
+import { computed, getCurrentInstance, ref, watchEffect } from 'vue'
+import type { Component, ComponentPublicInstance } from 'vue'
+import { RouterLink } from 'vue-router'
 import { ChevronRight } from '../../icons/sputnigUiIcons'
 import type { InteractiveElementApi } from '../../../internal/interactiveElement'
+import { resolveLinkTarget } from '../../../internal/linkTarget'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import {
   PassiveContentBoundary,
@@ -65,13 +71,21 @@ import {
 import { useTreeActionRegistration } from '../_internal/treeRuntime'
 import SBadge, { type BadgeSeverity } from '../data-display/SBadge.vue'
 import SProgressIndicator, { type SProgressIndicatorSize } from '../data-display/SProgressIndicator.vue'
+import type {
+  HrefLinkDestination,
+  RouterLinkDestination,
+} from './SLink'
 
 defineOptions({ inheritAttrs: false })
 
 export type SButtonSeverity = 'primary' | 'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'contrast'
 export type SButtonSize = 'xs' | 'sm' | 'md' | 'lg'
+export type SButtonIconSize = 'default' | 'large'
+export type SButtonDensity = 'default' | 'compact'
+export type SButtonSpacing = 'default' | 'tight'
+export type SButtonHoverSurface = 'self' | 'parent'
 export type SButtonWidth = 'auto' | 'fit' | 'full'
-export type SButtonContentAlign = 'center' | 'start' | 'between'
+export type SButtonContentAlign = 'center' | 'start' | 'end' | 'between'
 export type SButtonAppearance = 'solid' | 'soft' | 'outline' | 'ghost' | 'text'
 export type SButtonShape = 'default' | 'pill' | 'square' | 'circle' | 'row'
 export type SButtonNativeType = 'button' | 'reset' | 'submit'
@@ -81,10 +95,10 @@ export interface SButtonDisclosure {
   iconPlacement?: 'leading' | 'trailing' | 'none'
 }
 
-/** Typed native-button ownership surface for composite UI-kit components. / Типизированная ownership-поверхность native button для составных UI-kit-компонентов. */
-export type SButtonApi = InteractiveElementApi<HTMLButtonElement>
+/** Typed interactive owner API for action and navigation buttons. / Типизированная API-поверхность action/navigation button. */
+export type SButtonApi = InteractiveElementApi<HTMLButtonElement | HTMLAnchorElement>
 
-export interface Props {
+interface SButtonPresentationProps {
   label?: string
   severity?: SButtonSeverity
   size?: SButtonSize
@@ -93,6 +107,10 @@ export interface Props {
   loadingLabel?: string
   leadingIcon?: Component
   trailingIcon?: Component
+  iconSize?: SButtonIconSize
+  density?: SButtonDensity
+  spacing?: SButtonSpacing
+  hoverSurface?: SButtonHoverSurface
   badge?: string | number
   badgeSeverity?: BadgeSeverity
   shortcut?: string
@@ -104,9 +122,24 @@ export interface Props {
   pressed?: boolean | 'mixed'
   busy?: boolean
   disclosure?: SButtonDisclosure
+}
+
+export type SButtonActionProps = SButtonPresentationProps & {
+  href?: never
+  to?: never
+  target?: never
+  rel?: never
   type?: SButtonNativeType
 }
 
+export type SButtonNavigationProps = SButtonPresentationProps & (
+  | (HrefLinkDestination & { type?: never })
+  | (RouterLinkDestination & { type?: never })
+)
+
+/** Strict action/navigation XOR with a shared button presentation. */
+export type Props = SButtonActionProps | SButtonNavigationProps
+
 const props = withDefaults(defineProps<Props>(), {
   label: undefined,
   severity: 'primary',
@@ -116,6 +149,10 @@ const props = withDefaults(defineProps<Props>(), {
   loadingLabel: undefined,
   leadingIcon: undefined,
   trailingIcon: undefined,
+  iconSize: 'default',
+  density: 'default',
+  spacing: 'default',
+  hoverSurface: 'self',
   badge: undefined,
   badgeSeverity: 'secondary',
   shortcut: undefined,
@@ -127,23 +164,57 @@ const props = withDefaults(defineProps<Props>(), {
   pressed: undefined,
   busy: false,
   disclosure: undefined,
-  type: 'button',
+  href: undefined,
+  to: undefined,
+  target: undefined,
+  rel: undefined,
+  type: undefined,
 })
-const slots = defineSlots<{
-  /** Пассивная метка/графика действия; вложенные controls запрещены. / Passive action label/graphics; nested controls are forbidden. */
-  default?: () => VNodeChild
+const emit = defineEmits<{
+  click: [event: MouseEvent]
 }>()
-const buttonRef = ref<HTMLButtonElement | null>(null)
+const componentInstance = getCurrentInstance()
+if (!componentInstance) throw new Error('SButton: component instance is unavailable')
+const buttonSlots = componentInstance.slots
+const defaultContentComponent = (): ReturnType<NonNullable<typeof buttonSlots.default>> => (
+  buttonSlots.default?.() ?? []
+)
+const rootRef = ref<HTMLButtonElement | HTMLAnchorElement | null>(null)
 const ownedAttrs = useOwnedAttrs({ component: 'SButton', owner: 'native button' })
 const isRegisteredTreeAction = useTreeActionRegistration({
   owner: 'SButton',
-  element: buttonRef,
+  element: rootRef,
   disabled: () => props.disabled || props.loading,
 })
 
 useInteractiveLeafRegistration({ owner: 'SButton' })
 
-const buttonBindings = computed(() => {
+const navigationTarget = computed(() => {
+  const hasHref = props.href !== undefined
+  const hasTo = props.to !== undefined
+  if (hasHref && hasTo) {
+    throw new TypeError('SButton: передайте не более одного navigation target — href или to')
+  }
+  if (!hasHref && !hasTo) return null
+  if (props.type !== undefined) {
+    throw new TypeError('SButton: navigation target несовместим с native button type')
+  }
+  return resolveLinkTarget({
+    href: props.href,
+    to: props.to,
+    target: props.target,
+    rel: props.rel,
+    owner: 'SButton',
+  })
+})
+const navigationUnavailable = computed(() => props.disabled || props.loading)
+const rootComponent = computed(() => {
+  const target = navigationTarget.value
+  if (!target || navigationUnavailable.value) return target ? 'a' : 'button'
+  return target.kind === 'router' ? RouterLink : 'a'
+})
+
+const rootBindings = computed(() => {
   const bindings = ownedAttrs.bindings()
   const managedBindings = isRegisteredTreeAction ? { ...bindings, tabindex: -1 } : bindings
   const semanticBindings = props.disclosure
@@ -153,17 +224,31 @@ const buttonBindings = computed(() => {
         'aria-controls': props.disclosure.controls,
       }
     : managedBindings
-  if (!props.loading) return semanticBindings
+  const target = navigationTarget.value
+  const elementBindings = target === null
+    ? {
+        ...semanticBindings,
+        disabled: props.disabled || props.loading || undefined,
+        type: props.type ?? 'button',
+      }
+    : navigationUnavailable.value
+      ? {
+          ...semanticBindings,
+          'aria-disabled': true,
+          tabindex: -1,
+        }
+      : { ...semanticBindings, ...target.bindings }
+  if (!props.loading) return elementBindings
 
-  const externalAccessibleName = semanticBindings['aria-label']
+  const externalAccessibleName = elementBindings['aria-label']
   const accessibleName = [props.loadingLabel, props.label, externalAccessibleName]
     .find((candidate): candidate is string => typeof candidate === 'string' && candidate.trim().length > 0)
-  if (!accessibleName && !slots.default) {
+  if (!accessibleName && !buttonSlots.default) {
     throw new Error('SButton: loading action requires label, loadingLabel, or aria-label')
   }
   return accessibleName
-    ? { ...semanticBindings, 'aria-label': accessibleName }
-    : semanticBindings
+    ? { ...elementBindings, 'aria-label': accessibleName }
+    : elementBindings
 })
 
 const passiveContentContract: PassiveContentContract = {
@@ -173,6 +258,13 @@ const passiveContentContract: PassiveContentContract = {
 }
 
 watchEffect(() => {
+  const target = navigationTarget.value
+  if (target && props.pressed !== undefined) {
+    throw new Error('SButton: navigation target несовместим с pressed toggle semantics')
+  }
+  if (target && props.disclosure !== undefined) {
+    throw new Error('SButton: navigation target несовместим с disclosure trigger semantics')
+  }
   if (props.disclosure && props.disclosure.controls.trim().length === 0) {
     throw new Error('SButton: disclosure.controls must be a non-empty id')
   }
@@ -186,17 +278,42 @@ watchEffect(() => {
 })
 
 const isIconOnly = computed(() => props.iconOnly || (
-  props.label === '' && Boolean(props.leadingIcon || props.trailingIcon || slots.default)
+  props.label === '' && Boolean(props.leadingIcon || props.trailingIcon || buttonSlots.default)
 ))
 const renderDefaultSlot = computed(() => props.label === undefined || (
   props.label === '' && !props.leadingIcon && !props.trailingIcon
 ))
 const progressIndicatorSize = computed<SProgressIndicatorSize>(() => props.size === 'lg' ? 'sm' : 'xs')
 
-const getElement = (): HTMLButtonElement => {
-  const element = buttonRef.value
+function setRootRef(target: Element | ComponentPublicInstance | null): void {
+  if (target === null) {
+    rootRef.value = null
+    return
+  }
+  if (target instanceof HTMLButtonElement || target instanceof HTMLAnchorElement) {
+    rootRef.value = target
+    return
+  }
+  const element: unknown = Reflect.get(target, '$el')
+  if (!(element instanceof HTMLAnchorElement)) {
+    throw new TypeError('SButton: RouterLink root must resolve to an HTMLAnchorElement')
+  }
+  rootRef.value = element
+}
+
+function handleClick(event: MouseEvent): void {
+  if (navigationTarget.value && navigationUnavailable.value) {
+    event.preventDefault()
+    event.stopImmediatePropagation()
+    return
+  }
+  emit('click', event)
+}
+
+const getElement = (): HTMLButtonElement | HTMLAnchorElement => {
+  const element = rootRef.value
   if (!element) {
-    throw new Error('SButton: native button element is unavailable')
+    throw new Error('SButton: interactive element is unavailable')
   }
   return element
 }

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

@@ -0,0 +1,9 @@
+@reference "../../../styles/reference.css";
+
+.s-combobox-anchor {
+  @apply w-full min-w-0;
+}
+
+.s-combobox-layer {
+  @apply max-w-[calc(100vw-1rem)];
+}

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/SContextToggleButton.vue

@@ -30,7 +30,7 @@ export interface Props {
   partial?: boolean
   addTitle?: string
   removeTitle?: string
-  size?: 'sm' | 'md' | 'lg'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
   loading?: boolean
 }