@pgcorp/ui-kit 0.1.0

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

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

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

@@ -0,0 +1,63 @@
+@reference "../../../styles/reference.css";
+
+.s-listbox-option__control {
+  @apply relative flex w-full min-w-0 items-center justify-between rounded-md px-3 py-2 text-left text-sm text-surface-800;
+  @apply cursor-pointer hover:bg-surface-100;
+  @apply dark:text-surface-100 dark:hover:bg-surface-800;
+  transition: background-color var(--s-motion-standard);
+}
+
+.s-listbox-option__control:focus-visible {
+  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-strong-color);
+  outline-offset: var(--s-focus-ring-inset-offset);
+}
+
+.s-listbox-option__control[aria-disabled='true'] {
+  @apply cursor-not-allowed opacity-50;
+}
+
+.s-listbox-option__control[aria-disabled='true']:hover {
+  @apply bg-transparent;
+}
+
+.s-listbox-option__control[aria-selected='true'] { @apply bg-primary-50 dark:bg-primary-950/40; }
+.s-listbox-option__control[data-appearance='color'] {
+  width: var(--s-control-hitbox-lg);
+  height: var(--s-control-hitbox-lg);
+  @apply justify-center rounded-full p-1;
+}
+
+.s-listbox-option__main {
+  @apply flex min-w-0 items-center;
+  gap: var(--s-space-control-gap);
+}
+
+.s-listbox-option__label {
+  @apply block truncate;
+}
+
+.s-listbox-option__label[data-selected='true'] {
+  @apply font-semibold;
+}
+
+.s-listbox-option__check {
+  @apply absolute inset-y-0 right-0 flex items-center pr-4;
+}
+
+.s-listbox-option__check > svg {
+  width: var(--s-icon-size-sm);
+  height: var(--s-icon-size-sm);
+}
+
+.s-listbox-option__check[data-appearance='color'] {
+  @apply -right-0.5 -top-0.5 bottom-auto items-center justify-center rounded-full bg-surface-0 p-0 text-primary-600;
+  @apply dark:bg-surface-950 dark:text-primary-400;
+  width: var(--s-icon-size-sm);
+  height: var(--s-icon-size-sm);
+  box-shadow: var(--s-elevation-control);
+}
+
+.s-listbox-option__check[data-appearance='color'] > svg {
+  width: var(--s-icon-size-2xs);
+  height: var(--s-icon-size-2xs);
+}

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

@@ -0,0 +1,85 @@
+<template>
+  <li
+    ref="optionRef"
+    class="s-listbox-option__control"
+    :data-appearance="appearance"
+    :data-focused="focused || undefined"
+    :title="title ?? label"
+    :aria-label="appearance === 'color' ? label : undefined"
+    role="option"
+    :aria-selected="selected"
+    :aria-disabled="disabled || undefined"
+    :tabindex="-1"
+    @focus="focused = true"
+    @blur="focused = false"
+    @click.stop="select"
+  >
+    <span class="s-listbox-option__main" :data-appearance="appearance">
+      <SMarker v-if="marker" :marker="marker" :size="appearance === 'color' ? 'lg' : 'sm'" />
+      <span v-if="appearance === 'select'" class="s-listbox-option__label" :data-selected="selected || undefined">
+        {{ label }}
+      </span>
+    </span>
+    <span v-if="selected" class="s-listbox-option__check" :data-appearance="appearance" aria-hidden="true">
+      <Check />
+    </span>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { inject, onBeforeUnmount, onMounted, ref } from 'vue'
+import { Check } from '../../icons/sputnigUiIcons'
+import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
+import SMarker from './SMarker.vue'
+import { listboxContextKey } from '../_internal/listboxContext'
+import type { SMarker as MarkerContract } from '../_internal/markerContract'
+
+export interface Props {
+  registrationToken: string
+  label: string
+  selected: boolean
+  disabled?: boolean
+  appearance?: 'select' | 'color'
+  marker?: MarkerContract
+  title?: string
+}
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  appearance: 'select',
+  marker: undefined,
+  title: undefined,
+})
+
+const emit = defineEmits<{
+  select: []
+}>()
+useInteractiveLeafRegistration({ owner: 'SListboxOption' })
+const context = inject(listboxContextKey)
+if (!context) throw new Error('SListboxOption must be used inside SListbox')
+const focused = ref(false)
+const optionRef = ref<HTMLLIElement | null>(null)
+let unregister: (() => void) | undefined
+const select = (): void => {
+  if (props.disabled) return
+  optionRef.value?.focus()
+  emit('select')
+}
+onMounted(() => {
+  const element = optionRef.value
+  if (!(element instanceof HTMLLIElement)) throw new Error('SListboxOption: option element is unavailable')
+  unregister = context.register({
+    element,
+    token: props.registrationToken,
+    activate: select,
+    disabled: () => props.disabled,
+    label: () => props.label,
+    selected: () => props.selected,
+  })
+})
+onBeforeUnmount(() => unregister?.())
+</script>
+
+<style lang="postcss" src="./SListboxOption.css" scoped></style>

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

@@ -0,0 +1,19 @@
+@reference "../../../styles/reference.css";
+.s-marker { @apply inline-block h-2 w-2 shrink-0 rounded-full bg-surface-400 ring-1 ring-inset ring-surface-500/50; }
+.s-marker[data-size='lg'] { @apply h-7 w-7 ring-2 ring-white/80 shadow-sm dark:ring-surface-950/80; }
+.s-marker[data-tone='primary'] { @apply bg-primary-500 ring-primary-600/50; }
+.s-marker[data-tone='success'] { @apply bg-success-500 ring-success-600/50; }
+.s-marker[data-tone='blue'] { @apply bg-blue-400 ring-blue-500/50; }
+.s-marker[data-tone='sky'] { @apply bg-sky-400 ring-sky-500/50; }
+.s-marker[data-tone='indigo'] { @apply bg-indigo-400 ring-indigo-500/50; }
+.s-marker[data-tone='emerald'] { @apply bg-emerald-400 ring-emerald-500/50; }
+.s-marker[data-tone='green'] { @apply bg-green-400 ring-green-500/50; }
+.s-marker[data-tone='teal'] { @apply bg-teal-400 ring-teal-500/50; }
+.s-marker[data-tone='amber'] { @apply bg-amber-400 ring-amber-500/50; }
+.s-marker[data-tone='orange'] { @apply bg-orange-400 ring-orange-500/50; }
+.s-marker[data-tone='rose'] { @apply bg-rose-400 ring-rose-500/50; }
+.s-marker[data-tone='pink'] { @apply bg-pink-400 ring-pink-500/50; }
+.s-marker[data-tone='fuchsia'] { @apply bg-fuchsia-400 ring-fuchsia-500/50; }
+.s-marker[data-tone='cyan'] { @apply bg-cyan-400 ring-cyan-500/50; }
+.s-marker[data-tone='lime'] { @apply bg-lime-400 ring-lime-500/50; }
+.s-marker[data-tone='custom'] { background-color: var(--s-marker-custom-color); --tw-ring-color: var(--s-marker-custom-color); }

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

@@ -0,0 +1,33 @@
+<template>
+  <span
+    v-bind="ownedAttrs.bindings()"
+    class="s-marker"
+    :data-tone="marker.tone"
+    :data-size="size"
+    :style="customProperties"
+    aria-hidden="true"
+  />
+</template>
+
+<script lang="ts">
+export { createCustomMarker } from '../_internal/markerContract'
+export type { SCustomMarker, SMarker, SMarkerTone } from '../_internal/markerContract'
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { createCustomMarker, type SMarker } from '../_internal/markerContract'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<{ marker: SMarker; size?: 'sm' | 'lg' }>(), { size: 'sm' })
+const ownedAttrs = useOwnedAttrs({ component: 'SMarker', owner: 'marker root' })
+const customProperties = computed(() => {
+  if (props.marker.tone !== 'custom') return undefined
+  createCustomMarker(props.marker.color)
+  return { '--s-marker-custom-color': props.marker.color }
+})
+</script>
+
+<style lang="postcss" src="./SMarker.css" scoped></style>

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

@@ -0,0 +1,20 @@
+@reference "../../../styles/reference.css";
+
+.s-menu-surface {
+  @apply m-0 rounded-xl p-1.5;
+  @apply focus:outline-none;
+  background: var(--s-floating-surface);
+  color: var(--s-floating-foreground);
+  box-shadow: 0 0 0 1px var(--s-floating-outline), var(--s-elevation-floating);
+  width: var(--s-menu-surface-width);
+  min-width: var(--s-menu-surface-min-width);
+  max-width: var(--s-menu-surface-max-width);
+}
+
+.s-menu-surface[data-density='compact'] {
+  @apply min-w-40 rounded-md p-1;
+}
+
+.s-menu-surface[data-orientation='horizontal'] {
+  @apply flex max-w-full gap-1 overflow-x-auto;
+}