@pgcorp/ui-kit 0.1.2 → 0.3.0

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/SInteractiveSurface.css

@@ -14,6 +14,10 @@
     color var(--s-motion-standard) ease;
 }
 
+.s-interactive-surface[data-appearance='plain'] {
+  @apply border-transparent bg-transparent dark:border-transparent dark:bg-transparent;
+}
+
 .s-interactive-surface__activation {
   @apply absolute inset-0 z-10 block h-full w-full cursor-pointer border-0 bg-transparent p-0;
   border-radius: inherit;

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

@@ -17,6 +17,7 @@ export type InteractiveSurfaceDensity = 'compact' | 'comfortable'
 export type InteractiveSurfacePadding = 'none' | 'sm' | 'md'
 export type InteractiveSurfaceRadius = 'md' | 'lg' | 'xl'
 export type InteractiveSurfaceFill = 'content' | 'container'
+export type InteractiveSurfaceAppearance = 'card' | 'plain'
 
 /**
  * Единственный semantic-контракт поверхности: passive, action или ровно одна link-target.
@@ -55,6 +56,7 @@ export interface Props {
   padding?: InteractiveSurfacePadding
   radius?: InteractiveSurfaceRadius
   fill?: InteractiveSurfaceFill
+  appearance?: InteractiveSurfaceAppearance
   contentAlign?: 'start' | 'center'
   /** Полный binding явного STooltip trigger, направляемый на activation owner. / Complete explicit STooltip trigger binding routed to the activation owner. */
   tooltipTrigger?: STooltipTriggerBinding
@@ -67,6 +69,7 @@ const props = withDefaults(defineProps<Props>(), {
   padding: 'md',
   radius: 'lg',
   fill: 'content',
+  appearance: 'card',
   contentAlign: 'start',
   tooltipTrigger: undefined,
 })
@@ -285,6 +288,7 @@ function activateAction(event: MouseEvent): void {
     :data-padding="padding"
     :data-radius="radius"
     :data-fill="fill"
+    :data-appearance="appearance"
     :data-selected="selected || undefined"
     :data-pressed="surfacePressed"
     :data-disabled="surfaceDisabled || undefined"

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')

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

@@ -0,0 +1,35 @@
+@reference "../../../styles/reference.css";
+
+.s-range {
+  @apply flex min-w-0 items-center gap-3;
+}
+
+.s-range__input {
+  width: 100%;
+  min-height: var(--s-control-hitbox-sm);
+  cursor: pointer;
+  accent-color: var(--color-primary-500);
+}
+
+.s-range__input:focus-visible {
+  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color);
+  outline-offset: var(--s-focus-ring-offset);
+}
+
+.s-range__input:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.s-range__input[aria-readonly="true"] {
+  cursor: default;
+  opacity: 0.8;
+}
+
+.s-range__input[aria-invalid="true"] {
+  accent-color: var(--color-danger-500);
+}
+
+.s-range__value {
+  @apply min-w-12 text-right font-mono text-xs text-surface-600 dark:text-surface-300;
+}

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

@@ -0,0 +1,129 @@
+<template>
+  <SField
+    :control-id="inputId"
+    :label="label"
+    :disabled="disabled"
+    :readonly="readonly"
+    :required="required"
+    :help-text="helpText"
+    :error-message="errorMessage"
+    :invalid="invalid"
+  >
+    <template #default="field">
+      <div class="s-range">
+        <input
+          v-bind="ownedAttrs.bindings()"
+          :id="field.controlId"
+          class="s-range__input"
+          type="range"
+          :min="validatedMin"
+          :max="validatedMax"
+          :step="validatedStep"
+          :value="validatedValue"
+          :disabled="field.disabled"
+          :aria-invalid="field.invalid || undefined"
+          :aria-readonly="field.readonly || undefined"
+          :aria-required="field.required || undefined"
+          :aria-describedby="mergeIdReferences(ownedAttrs.string('aria-describedby'), field.describedBy)"
+          @input="onInput"
+        />
+        <output v-if="showValue" class="s-range__value" :for="field.controlId">
+          {{ validatedValue }}
+        </output>
+      </div>
+    </template>
+  </SField>
+</template>
+
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+import { mergeIdReferences, useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
+import { resolveOptionalDomId } from '../../../internal/runtimeContract'
+import SField from './SField.vue'
+
+defineOptions({ inheritAttrs: false })
+
+export interface Props {
+  modelValue: number
+  min: number
+  max: number
+  step?: number
+  label: string
+  id?: string
+  disabled?: boolean
+  readonly?: boolean
+  required?: boolean
+  invalid?: boolean
+  helpText?: string
+  errorMessage?: string
+  showValue?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  step: 1,
+  id: undefined,
+  disabled: false,
+  readonly: false,
+  required: false,
+  invalid: false,
+  helpText: undefined,
+  errorMessage: undefined,
+  showValue: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number]
+}>()
+
+function finiteNumber(field: string, value: number): number {
+  if (!Number.isFinite(value)) {
+    throw new TypeError(`SRange: ${field} должен быть конечным числом / must be a finite number`)
+  }
+  return value
+}
+
+const validatedMin = computed(() => finiteNumber('min', props.min))
+const validatedMax = computed(() => {
+  const value = finiteNumber('max', props.max)
+  if (value <= validatedMin.value) {
+    throw new RangeError('SRange: max должен быть больше min / max must be greater than min')
+  }
+  return value
+})
+const validatedStep = computed(() => {
+  const value = finiteNumber('step', props.step)
+  if (value <= 0) {
+    throw new RangeError('SRange: step должен быть больше нуля / step must be greater than zero')
+  }
+  return value
+})
+const validatedValue = computed(() => {
+  const value = finiteNumber('modelValue', props.modelValue)
+  if (value < validatedMin.value || value > validatedMax.value) {
+    throw new RangeError('SRange: modelValue должен находиться внутри [min, max] / must be within [min, max]')
+  }
+  return value
+})
+
+const generatedId = useId()
+const inputId = computed(() => resolveOptionalDomId('SRange', 'id', props.id, `s-range-${generatedId}`))
+const ownedAttrs = useOwnedAttrs({ component: 'SRange', owner: 'native range input' })
+useInteractiveLeafRegistration({ owner: 'SRange' })
+
+function onInput(event: Event): void {
+  const target = event.currentTarget
+  if (!(target instanceof HTMLInputElement)) {
+    throw new TypeError('SRange: input event owner must be the native range input')
+  }
+  if (props.readonly) {
+    target.value = String(validatedValue.value)
+    return
+  }
+  const value = Number(target.value)
+  finiteNumber('input value', value)
+  emit('update:modelValue', value)
+}
+</script>
+
+<style lang="postcss" src="./SRange.css" scoped></style>

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

@@ -0,0 +1,48 @@
+@reference "../../../styles/reference.css";
+
+.s-switch-control {
+  @apply relative inline-flex shrink-0 items-center;
+  width: 2.5rem;
+  height: 1.5rem;
+}
+
+.s-switch-input {
+  @apply absolute inset-0 z-10 m-0 cursor-pointer opacity-0;
+}
+
+.s-switch-track {
+  @apply flex h-5 w-9 items-center rounded-full border border-surface-300 bg-surface-200 p-0.5 transition-colors;
+  @apply dark:border-surface-600 dark:bg-surface-700;
+  transition-duration: var(--s-motion-standard);
+}
+
+.s-switch-thumb {
+  @apply block h-3.5 w-3.5 rounded-full bg-surface-0 shadow-sm transition-transform;
+  @apply dark:bg-surface-100;
+  transition-duration: var(--s-motion-standard);
+}
+
+.s-switch-input:checked + .s-switch-track {
+  @apply border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400;
+}
+
+.s-switch-input:checked + .s-switch-track > .s-switch-thumb {
+  transform: translateX(1rem);
+}
+
+.s-switch-input:not(:disabled):hover + .s-switch-track {
+  @apply border-primary-500 dark:border-primary-400;
+}
+
+.s-switch-input:focus-visible + .s-switch-track {
+  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-strong-color);
+  outline-offset: var(--s-focus-ring-offset);
+}
+
+.s-switch-input:disabled {
+  @apply cursor-not-allowed;
+}
+
+.s-switch-input:disabled + .s-switch-track {
+  @apply border-surface-200 bg-surface-100 opacity-70 dark:border-surface-700 dark:bg-surface-800;
+}