@pgcorp/ui-kit 0.1.0

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

@@ -0,0 +1,134 @@
+<template>
+  <SFieldGroup
+    v-bind="ownedAttrs.bindings()"
+    :id="groupId"
+    :label="label"
+    :help-text="helpText"
+    :error-message="errorMessage"
+    :required="required"
+    :invalid="invalid"
+    :disabled="disabled"
+    :readonly="readonly"
+    :layout="layout"
+    :columns="columns"
+  >
+    <template #default="group">
+      <SCheckbox
+        v-for="record in validatedOptions"
+        :id="record.id"
+        :key="record.token"
+        :model-value="selectedTokens.has(record.token)"
+        :label="record.option.label"
+        :help-text="record.option.helpText"
+        :disabled="group.disabled || record.option.disabled"
+        :readonly="group.readonly"
+        :invalid="group.invalid"
+        :aria-describedby="group.describedBy"
+        @update:model-value="updateOption(record.option.value, $event)"
+      />
+    </template>
+  </SFieldGroup>
+</template>
+
+<script lang="ts">
+import type { SelectionKey as PublicSelectionKey } from '../_internal/useSelectionRoving'
+
+/** Одна checkbox option со стабильной domain identity. / One checkbox option with stable domain identity. */
+export interface SCheckboxGroupOption<T extends PublicSelectionKey = PublicSelectionKey> {
+  value: T
+  label: string
+  helpText?: string
+  disabled?: boolean
+}
+</script>
+
+<script setup lang="ts" generic="T extends SelectionKey = string">
+import { computed, useId } from 'vue'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { validateDomId, validateNonEmptyString } from '../../../internal/runtimeContract'
+import {
+  selectionKeyToken,
+  validateSelectionIdentities,
+  type SelectionKey,
+} from '../_internal/useSelectionRoving'
+import SCheckbox from './SCheckbox.vue'
+import SFieldGroup from './SFieldGroup.vue'
+import type { SFieldGroupColumns, SFieldGroupLayout } from './SFieldGroup.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<{
+  modelValue: readonly T[]
+  options: readonly SCheckboxGroupOption<T>[]
+  label: string
+  id?: string
+  helpText?: string
+  errorMessage?: string
+  required?: boolean
+  invalid?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  layout?: SFieldGroupLayout
+  columns?: SFieldGroupColumns
+}>(), {
+  id: undefined,
+  helpText: undefined,
+  errorMessage: undefined,
+  required: false,
+  invalid: false,
+  disabled: false,
+  readonly: false,
+  layout: 'stacked',
+  columns: 1,
+})
+const emit = defineEmits<{ 'update:modelValue': [value: readonly T[]] }>()
+const ownedAttrs = useOwnedAttrs({ component: 'SCheckboxGroup', owner: 'field group' })
+const generatedId = useId()
+const groupId = computed(() => validateDomId(
+  'SCheckboxGroup',
+  'id',
+  props.id ?? `s-checkbox-group-${generatedId}`,
+))
+
+const validatedOptions = computed(() => {
+  validateSelectionIdentities('SCheckboxGroup', props.options.map((option, index) => ({
+    key: option.value,
+    coordinate: `options[${index}].value`,
+  })))
+  return props.options.map((option, index) => {
+    validateNonEmptyString('SCheckboxGroup', `options[${index}].label`, option.label)
+    const token = selectionKeyToken('SCheckboxGroup', option.value, `options[${index}].value`)
+    return { option, token, id: `${groupId.value}-option-${token}` }
+  })
+})
+
+const optionsByToken = computed<ReadonlyMap<string, T>>(() => new Map(
+  validatedOptions.value.map((record) => [record.token, record.option.value]),
+))
+
+const selectedTokens = computed(() => {
+  const modelIndex = validateSelectionIdentities('SCheckboxGroup', props.modelValue.map((value, index) => ({
+    key: value,
+    coordinate: `modelValue[${index}]`,
+  })))
+  const optionIndex = optionsByToken.value
+  for (const [token] of modelIndex) {
+    if (!optionIndex.has(token)) {
+      const index = props.modelValue.findIndex((value) => selectionKeyToken('SCheckboxGroup', value, 'modelValue') === token)
+      throw new Error(`SCheckboxGroup: modelValue[${index}] does not match any option`)
+    }
+  }
+  return new Set(modelIndex.keys())
+})
+
+function updateOption(value: T, selected: boolean): void {
+  if (props.readonly || props.disabled) return
+  const targetToken = selectionKeyToken('SCheckboxGroup', value, 'updated option value')
+  const nextTokens = new Set(selectedTokens.value)
+  if (selected) nextTokens.add(targetToken)
+  else nextTokens.delete(targetToken)
+  emit('update:modelValue', validatedOptions.value
+    .filter((record) => nextTokens.has(record.token))
+    .map((record) => record.option.value))
+}
+</script>

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

@@ -0,0 +1,29 @@
+@reference "../../../styles/reference.css";
+
+.s-choice-cards {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.s-choice-cards[data-columns='auto'] {
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+}
+
+.s-choice-cards[data-columns='2'] {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.s-choice-cards[data-columns='3'] {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.s-choice-card { @apply relative flex min-h-28 min-w-0 flex-col items-start gap-2 overflow-hidden rounded-2xl border border-surface-300 bg-surface-0 p-4 text-left text-surface-800 hover:border-primary-300 hover:bg-primary-50/30 disabled:cursor-not-allowed disabled:opacity-50 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-100; }
+.s-choice-card:focus-visible { outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color); outline-offset: var(--s-focus-ring-offset); }
+.s-choice-card[aria-checked='true'] { @apply border-primary-500 ring-1 ring-primary-500/20; }
+.s-choice-card__kicker { @apply text-[0.7rem] font-semibold uppercase tracking-wide text-surface-500; }
+.s-choice-card__title { @apply text-sm font-semibold leading-5; }
+.s-choice-card__description { @apply text-xs leading-5 text-surface-500; }
+.s-choice-card__meta { @apply mt-auto text-xs leading-4 text-surface-500; }
+.s-choice-card__mark { @apply absolute right-4 top-4 inline-flex h-6 w-6 items-center justify-center rounded-full bg-primary-100 font-bold text-primary-600; }
+.s-choice-cards[data-density='compact'] .s-choice-card { @apply min-h-24 p-3; }
+.s-choice-cards[aria-readonly='true'] .s-choice-card { @apply cursor-default; }

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

@@ -0,0 +1,145 @@
+<template>
+  <SFieldGroup
+    v-bind="ownedAttrs.bindings()"
+    :id="id"
+    :label="label"
+    :help-text="helpText"
+    :error-message="errorMessage"
+    :required="required"
+    :invalid="invalid"
+    :disabled="disabled"
+    :readonly="readonly"
+  >
+    <template #default="{ describedBy, labelId }">
+      <div
+        class="s-choice-cards"
+        :data-columns="columns"
+        :data-density="density"
+        :data-selection-indicator="selectionIndicator"
+        role="radiogroup"
+        :aria-labelledby="labelId"
+        :aria-describedby="describedBy"
+        :aria-required="required || undefined"
+        :aria-invalid="invalid || undefined"
+        :aria-disabled="disabled || undefined"
+        :aria-readonly="readonly || undefined"
+      >
+        <button
+          v-for="option in options"
+          :key="optionToken(option)"
+          :ref="(element) => roving.register(option.value, resolveNativeElement(element))"
+          class="s-choice-card"
+          type="button"
+          :disabled="disabled || option.disabled"
+          :aria-checked="option.value === modelValue"
+          :tabindex="option.value === focusableValue ? 0 : -1"
+          role="radio"
+          @click="select(option.value)"
+          @keydown="roving.handleKeydown($event, option.value)"
+        >
+          <span v-if="option.kicker" class="s-choice-card__kicker">{{ option.kicker }}</span>
+          <span class="s-choice-card__title">{{ option.title }}</span>
+          <span v-if="option.description" class="s-choice-card__description">{{ option.description }}</span>
+          <span v-if="option.meta" class="s-choice-card__meta">{{ option.meta }}</span>
+          <span v-if="selectionIndicator === 'mark' && option.value === modelValue" class="s-choice-card__mark" aria-hidden="true">✓</span>
+        </button>
+      </div>
+    </template>
+    <template v-if="$slots.help" #help><slot name="help" /></template>
+    <template v-if="$slots.error" #error><slot name="error" /></template>
+  </SFieldGroup>
+</template>
+
+<script lang="ts">
+import type { SelectionKey as PublicSelectionKey } from '../_internal/useSelectionRoving'
+
+/** Одна radio-card option. / One radio-card option. */
+export interface ChoiceCardOption<T extends PublicSelectionKey = string> {
+  value: T
+  title: string
+  description?: string
+  meta?: string
+  kicker?: string
+  disabled?: boolean
+}
+
+/** Публичный контракт группы карточек выбора. / Public choice-card group contract. */
+export interface Props<T extends PublicSelectionKey = string> {
+  modelValue: T | null
+  options: readonly ChoiceCardOption<T>[]
+  label: string
+  id?: string
+  helpText?: string
+  errorMessage?: string
+  required?: boolean
+  invalid?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  columns?: 'auto' | '2' | '3'
+  density?: 'default' | 'compact'
+  selectionIndicator?: 'mark' | 'none'
+}
+</script>
+
+<script setup lang="ts" generic="T extends SelectionKey = string">
+import { computed } from 'vue'
+import type { ComponentPublicInstance, VNodeChild } from 'vue'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
+import { selectionKeyToken, useSelectionRoving } from '../_internal/useSelectionRoving'
+import type { SelectionKey } from '../_internal/useSelectionRoving'
+import SFieldGroup from './SFieldGroup.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<Props<T>>(), {
+  id: undefined,
+  helpText: undefined,
+  errorMessage: undefined,
+  required: false,
+  invalid: false,
+  disabled: false,
+  readonly: false,
+  columns: 'auto',
+  density: 'default',
+  selectionIndicator: 'mark',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: T]
+}>()
+defineSlots<{
+  /** Дополнительное описание группы. / Supporting group description. */
+  help?: () => VNodeChild
+  /** Сообщение ошибки при invalid=true. / Error message when invalid=true. */
+  error?: () => VNodeChild
+}>()
+const ownedAttrs = useOwnedAttrs({ component: 'SChoiceCards', owner: 'field group' })
+useInteractiveLeafRegistration({ owner: 'SChoiceCards' })
+const select = (value: T): void => {
+  if (props.disabled || props.readonly) return
+  emit('update:modelValue', value)
+}
+const rovingOptions = computed<readonly ChoiceCardOption<T>[]>(() => (
+  props.disabled
+    ? props.options.map((option) => ({ ...option, disabled: true }))
+    : props.options
+))
+const roving = useSelectionRoving({
+  options: rovingOptions,
+  selectedValue: computed(() => props.modelValue),
+  select,
+  component: 'SChoiceCards',
+})
+const focusableValue = roving.focusableValue
+const optionToken = (option: ChoiceCardOption<T>): string => selectionKeyToken(
+  'SChoiceCards',
+  option.value,
+  'option.value',
+)
+const resolveNativeElement = (element: Element | ComponentPublicInstance | null): HTMLElement | null => (
+  element instanceof HTMLElement ? element : null
+)
+</script>
+
+<style lang="postcss" src="./SChoiceCards.css" scoped></style>

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

@@ -0,0 +1,146 @@
+<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/SComboboxTrigger.css

@@ -0,0 +1,35 @@
+@reference "../../../styles/reference.css";
+
+.s-combobox-trigger {
+  @apply relative inline-flex min-w-0 items-center gap-2 px-3 font-semibold;
+}
+
+.s-combobox-trigger[data-width='full'] { @apply w-full; }
+.s-combobox-trigger[data-width='auto'] { @apply w-auto; }
+.s-combobox-trigger[data-size='xs'] { min-height: var(--s-control-hitbox-xs); @apply px-2 text-xs; }
+.s-combobox-trigger[data-size='sm'] { min-height: var(--s-control-hitbox-sm); @apply px-2.5 text-xs; }
+.s-combobox-trigger[data-size='md'] { min-height: var(--s-control-hitbox-md); @apply text-sm; }
+.s-combobox-trigger[data-appearance='swatch'] { width: var(--s-control-hitbox-md); @apply justify-center rounded-full border border-transparent bg-transparent p-1; box-shadow: none; }
+.s-combobox-trigger[data-appearance='swatch']:disabled { @apply cursor-not-allowed opacity-50; }
+
+.s-combobox-trigger__value {
+  @apply min-w-0 flex-1 truncate text-left;
+}
+
+.s-combobox-trigger__caret {
+  @apply ml-auto inline-flex shrink-0 items-center justify-center text-surface-400;
+  width: var(--s-icon-size-sm);
+  height: var(--s-icon-size-sm);
+}
+
+[data-appearance='swatch'] .s-combobox-trigger__caret {
+  @apply absolute -bottom-0.5 -right-0.5 rounded-full border border-surface-200 bg-surface-0 text-surface-500;
+  @apply dark:border-surface-700 dark:bg-surface-900 dark:text-surface-300;
+  width: var(--s-icon-size-xs);
+  height: var(--s-icon-size-xs);
+  box-shadow: var(--s-elevation-control);
+}
+
+.s-combobox-trigger__caret > svg {
+  @apply h-full w-full;
+}

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

@@ -0,0 +1,122 @@
+<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 || placeholder }}
+    </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 { 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: 'Выберите значение',
+  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 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>

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

@@ -0,0 +1,11 @@
+.s-context-menu-boundary[data-layout='block'] {
+  display: block;
+}
+
+.s-context-menu-boundary[data-layout='inline'] {
+  display: inline;
+}
+
+.s-context-menu-boundary[data-layout='contents'] {
+  display: contents;
+}