@pgcorp/ui-kit 0.10.0 → 0.10.2

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

@@ -1,186 +0,0 @@
-<template>
-  <div
-    v-bind="ownedAttrs.bindings()"
-    class="s-context-menu-boundary"
-    :data-layout="boundaryLayout"
-    @click="handleBoundaryClick"
-    @contextmenu="handleBoundaryContextMenu"
-  >
-    <slot :trigger-props="triggerProps" />
-    <teleport to="body">
-      <transition
-        enter-active-class="transition ease-out duration-[var(--s-motion-fast)]"
-        enter-from-class="transform opacity-0 scale-95"
-        enter-to-class="transform opacity-100 scale-100"
-        leave-active-class="transition ease-in duration-[var(--s-motion-instant)]"
-        leave-from-class="transform opacity-100 scale-100"
-        leave-to-class="transform opacity-0 scale-95"
-      >
-        <SMenuLayer
-          v-if="isOpen"
-          ref="layerRef"
-          kind="context"
-          landmark-label="Контекстные действия"
-          :position="position"
-          :z-index="zIndex"
-        >
-          <SMenuSurface
-            :id="menuId"
-            label="Контекстные действия"
-            autofocus
-            :initial-focus="initialMenuFocus"
-            :items="items"
-            @dismiss-tree="closeMenu('outside')"
-            @escape="closeMenu('escape')"
-            @focus-exit="closeMenu('outside')"
-            @select="handleSelect"
-            @tab="closeMenuForTab"
-          />
-        </SMenuLayer>
-      </transition>
-    </teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, useId, watch, watchEffect } from 'vue'
-import type { VNodeChild } from 'vue'
-import { findFocusableOwner } from '../../../internal/focusNavigation'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
-import { useMenuLayer } from '../../../internal/useMenuLayer'
-import SMenuLayer from '../_internal/SMenuLayer.vue'
-import type { SMenuLayerApi } from '../_internal/SMenuLayer.vue'
-import SMenuSurface from './SMenuSurface.vue'
-import { validateSMenuEntries, type SMenuActivationEvent, type SMenuEntry, type SMenuSelectableEntry } from './menu'
-
-defineOptions({ inheritAttrs: false })
-
-export interface Props {
-  items: readonly SMenuEntry[];
-  /** False оставляет boundary полностью inert: не открывает menu и не перехватывает native events. / False keeps the boundary fully inert: it neither opens the menu nor intercepts native events. */
-  enabled?: boolean;
-  trigger?: 'contextmenu' | 'click' | 'both';
-  boundaryLayout?: 'block' | 'inline' | 'contents';
-}
-
-/**
- * ARIA-связь canonical trigger с принадлежащим ему context-menu layer.
- * ARIA relationship between the canonical trigger and its owned context-menu layer.
- */
-export interface SContextMenuTriggerProps {
-  readonly 'aria-haspopup'?: 'menu'
-  readonly 'aria-expanded'?: boolean
-  readonly 'aria-controls'?: string
-  readonly onKeydown?: (event: KeyboardEvent) => void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  enabled: true,
-  trigger: 'contextmenu',
-  boundaryLayout: 'block',
-})
-const emit = defineEmits<{
-  select: [entry: SMenuSelectableEntry, event: SMenuActivationEvent]
-}>()
-defineSlots<{
-  /** Canonical interactive owner получает готовые ARIA props. / The canonical interactive owner receives complete ARIA props. */
-  default?: (props: { triggerProps: SContextMenuTriggerProps }) => VNodeChild
-}>()
-const ownedAttrs = useOwnedAttrs({ component: 'SContextMenu', owner: 'interaction boundary root' })
-useInteractiveLeafRegistration({ owner: 'SContextMenu', active: () => props.enabled })
-
-const generatedMenuId = useId()
-const menuId = `s-context-menu-${generatedMenuId}`
-const initialMenuFocus = ref<'first' | 'last'>('first')
-const layerRef = ref<SMenuLayerApi | null>(null)
-const layerElement = computed(() => layerRef.value?.getElement() ?? null)
-const {
-  isOpen,
-  position,
-  zIndex,
-  open,
-  close: closeMenu,
-  closeForTab: closeMenuForTab,
-} = useMenuLayer(layerElement)
-const triggerProps = computed<SContextMenuTriggerProps>(() => (
-  props.enabled
-    ? {
-        'aria-haspopup': 'menu',
-        'aria-expanded': isOpen.value,
-        'aria-controls': menuId,
-        onKeydown: handleTriggerKeydown,
-      }
-    : {}
-))
-
-const openMenu = async (event: MouseEvent): Promise<void> => {
-  if (!props.enabled) return
-  initialMenuFocus.value = 'first'
-  const boundary = event.currentTarget instanceof Element ? event.currentTarget : null
-  const focusTarget = findFocusableOwner(event.target, boundary)
-    ?? findFocusableOwner(document.activeElement)
-  const isKeyboardActivation = event.clientX === 0 && event.clientY === 0 && event.detail === 0
-  await open(
-    isKeyboardActivation && focusTarget
-      ? { type: 'element', element: focusTarget, align: 'left' }
-      : { type: 'point', x: event.clientX, y: event.clientY },
-    focusTarget,
-  )
-}
-
-const handleTriggerKeydown = (event: KeyboardEvent): void => {
-  if (
-    !props.enabled
-    || (props.trigger !== 'click' && props.trigger !== 'both')
-    || (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')
-  ) return
-  const trigger = event.currentTarget
-  if (!(trigger instanceof HTMLElement)) {
-    throw new TypeError('SContextMenu: trigger keydown currentTarget must be an HTMLElement')
-  }
-  event.preventDefault()
-  event.stopPropagation()
-  initialMenuFocus.value = event.key === 'ArrowUp' ? 'last' : 'first'
-  void open({ type: 'element', element: trigger, align: 'left' }, trigger)
-}
-
-const activateBoundary = (event: MouseEvent): void => {
-  if (!props.enabled) return
-  event.preventDefault()
-  event.stopPropagation()
-  void openMenu(event)
-}
-
-const handleBoundaryClick = (event: MouseEvent): void => {
-  if (props.trigger === 'click' || props.trigger === 'both') activateBoundary(event)
-}
-
-const handleBoundaryContextMenu = (event: MouseEvent): void => {
-  if (props.trigger === 'contextmenu' || props.trigger === 'both') activateBoundary(event)
-}
-
-watch(() => props.enabled, (enabled) => {
-  if (!enabled) closeMenu('programmatic')
-})
-
-const handleSelect = (item: SMenuSelectableEntry, event: SMenuActivationEvent): void => {
-  if (item.disabled) return
-  closeMenu('selection')
-  emit('select', item, event)
-}
-
-watchEffect(() => {
-  validateSMenuEntries(props.items)
-  if (typeof props.enabled !== 'boolean') throw new TypeError('SContextMenu: enabled must be a boolean')
-  if (!['contextmenu', 'click', 'both'].includes(props.trigger)) {
-    throw new TypeError("SContextMenu: trigger must be 'contextmenu', 'click', or 'both'")
-  }
-  if (!['block', 'inline', 'contents'].includes(props.boundaryLayout)) {
-    throw new TypeError("SContextMenu: boundaryLayout must be 'block', 'inline', or 'contents'")
-  }
-})
-
-</script>
-
-<style lang="postcss" src="./SContextMenu.css" scoped></style>

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

@@ -1,66 +0,0 @@
-<template>
-  <SButton
-    v-bind="ownedAttrs.bindings()"
-    appearance="text"
-    icon-only
-    shape="circle"
-    :size="size"
-    :severity="partial ? 'warn' : inContext ? 'primary' : 'secondary'"
-    :title="accessibleTitle"
-    :aria-label="accessibleTitle"
-    :pressed="pressedState"
-    :leading-icon="stateIcon"
-    :loading="loading"
-    @click="emit('click')"
-  />
-</template>
-
-<script setup lang="ts">
-import { computed, type Component } from 'vue'
-import { useUiKitLocale } from '../../../composables/useUiKitLocale'
-import { Minus, MinusCircle, PlusCircle } from '../../icons/sputnigUiIcons'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import { validateNonEmptyString } from '../../../internal/runtimeContract'
-import SButton from './SButton.vue'
-
-defineOptions({ inheritAttrs: false })
-
-/** Доменный toggle добавления сущности в контекст. / Domain toggle for adding an entity to context. */
-export interface Props {
-  inContext: boolean
-  partial?: boolean
-  addTitle?: string
-  removeTitle?: string
-  size?: 'xs' | 'sm' | 'md' | 'lg'
-  loading?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  partial: false,
-  addTitle: undefined,
-  removeTitle: undefined,
-  size: 'sm',
-  loading: false,
-})
-const { t } = useUiKitLocale()
-
-const emit = defineEmits<{
-  (e: 'click'): void
-}>()
-const ownedAttrs = useOwnedAttrs({ component: 'SContextToggleButton', owner: 'toggle button' })
-
-const accessibleLabels = computed(() => ({
-  add: validateNonEmptyString('SContextToggleButton', 'addTitle', props.addTitle ?? t('forms.addToContext')),
-  remove: validateNonEmptyString('SContextToggleButton', 'removeTitle', props.removeTitle ?? t('forms.removeFromContext')),
-}))
-const accessibleTitle = computed(() => (
-  props.inContext ? accessibleLabels.value.remove : accessibleLabels.value.add
-))
-const pressedState = computed<boolean | 'mixed'>(() => (
-  props.partial ? 'mixed' : props.inContext
-))
-const stateIcon = computed<Component>(() => {
-  if (!props.inContext) return PlusCircle
-  return props.partial ? Minus : MinusCircle
-})
-</script>

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

@@ -1,104 +0,0 @@
-<template>
-  <SButton
-    v-bind="ownedAttrs.bindings()"
-    :size="size"
-    severity="secondary"
-    appearance="ghost"
-    icon-only
-    :leading-icon="DragIcon"
-    :disabled="disabled"
-    :pressed="keyboardActive"
-    :title="accessibleLabel"
-    :aria-label="accessibleLabel"
-    :aria-keyshortcuts="keyboardShortcuts"
-    data-s-drag-handle
-    :data-state="keyboardActive ? 'keyboard-active' : 'idle'"
-    @click="handleClick"
-    @pointerdown="handlePointerDown"
-    @keydown="handleKeydown"
-  />
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watchEffect } from 'vue'
-import { getSputnigUiIconComponent } from '../../icons/sputnigUiIcons'
-import { useUiKitLocale } from '../../../composables/useUiKitLocale'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import { validateNonEmptyString } from '../../../internal/runtimeContract'
-import SButton, { type SButtonSize } from './SButton.vue'
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<{
-  label: string
-  orientation?: 'vertical' | 'horizontal'
-  size?: SButtonSize
-  canMovePrevious?: boolean
-  canMoveNext?: boolean
-  disabled?: boolean
-}>(), {
-  orientation: 'vertical',
-  size: 'sm',
-  canMovePrevious: false,
-  canMoveNext: false,
-  disabled: false,
-})
-
-const emit = defineEmits<{
-  (event: 'drag-start', pointerEvent: PointerEvent): void
-  (event: 'reorder', direction: -1 | 1): void
-  (event: 'keyboard-active-change', active: boolean): void
-}>()
-
-const DragIcon = getSputnigUiIconComponent('drag')
-const ownedAttrs = useOwnedAttrs({ component: 'SDragHandle', owner: 'drag handle command' })
-const { t } = useUiKitLocale()
-const keyboardActive = ref(false)
-const validatedLabel = computed(() => validateNonEmptyString('SDragHandle', 'label', props.label))
-const keyboardShortcuts = computed(() => props.orientation === 'vertical'
-  ? 'Enter Space ArrowUp ArrowDown Escape'
-  : 'Enter Space ArrowLeft ArrowRight Escape')
-const accessibleLabel = computed(() => keyboardActive.value
-  ? t('layout.dragActive', { label: validatedLabel.value })
-  : t('layout.dragIdle', { label: validatedLabel.value }))
-
-function setKeyboardActive(active: boolean): void {
-  if (keyboardActive.value === active) return
-  keyboardActive.value = active
-  emit('keyboard-active-change', active)
-}
-
-function handleClick(event: MouseEvent): void {
-  if (props.disabled || event.detail > 0) return
-  setKeyboardActive(!keyboardActive.value)
-}
-
-function handlePointerDown(event: PointerEvent): void {
-  if (props.disabled) return
-  setKeyboardActive(false)
-  emit('drag-start', event)
-}
-
-function handleKeydown(event: KeyboardEvent): void {
-  if (props.disabled || !keyboardActive.value) return
-  if (event.key === 'Escape') {
-    event.preventDefault()
-    setKeyboardActive(false)
-    return
-  }
-
-  const previousKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
-  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
-  if (event.key !== previousKey && event.key !== nextKey) return
-
-  event.preventDefault()
-  const direction = event.key === previousKey ? -1 : 1
-  if (direction === -1 && !props.canMovePrevious) return
-  if (direction === 1 && !props.canMoveNext) return
-  emit('reorder', direction)
-}
-
-watchEffect(() => {
-  if (props.disabled) setKeyboardActive(false)
-})
-</script>

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

@@ -1,191 +0,0 @@
-<template>
-  <div class="s-dropdown-menu">
-    <slot v-if="hasCustomTrigger" :trigger-attrs="triggerAttrs()" />
-    <SButton
-      v-else
-      v-bind="triggerAttrs()"
-      label="Опции"
-      :disclosure="{ expanded: isOpen, controls: menuId }"
-      severity="secondary"
-    />
-    <teleport to="body">
-      <SMenuLayer
-        v-if="isOpen"
-        ref="layerRef"
-        kind="dropdown"
-        :landmark-label="resolvedMenuLabel"
-        :position="position"
-        :z-index="zIndex"
-      >
-        <SMenuSurface
-          ref="menuSurfaceRef"
-          :id="menuId"
-          :label="resolvedMenuLabel"
-          density="compact"
-          autofocus
-          :initial-focus="initialFocus"
-          :items="items"
-          @dismiss-tree="close('outside')"
-          @escape="close('escape')"
-          @focus-exit="close('outside')"
-          @select="select"
-          @tab="closeForTab"
-        />
-      </SMenuLayer>
-    </teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  computed,
-  nextTick,
-  onMounted,
-  ref,
-  useId,
-  watchEffect,
-  type VNodeChild,
-  type VNodeRef,
-} from 'vue'
-import { useOwnedAttrs, type OwnedAttributeBindings } from '../../../internal/ownedAttrs'
-import { useUiKitLocale } from '../../../composables/useUiKitLocale'
-import { useMenuLayer } from '../../../internal/useMenuLayer'
-import SMenuLayer from '../_internal/SMenuLayer.vue'
-import type { SMenuLayerApi } from '../_internal/SMenuLayer.vue'
-import SButton from './SButton.vue'
-import SMenuSurface, { type SMenuSurfaceApi } from './SMenuSurface.vue'
-import { validateSMenuEntries, type SMenuActivationEvent, type SMenuEntry, type SMenuSelectableEntry } from './menu'
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<{
-  items: readonly SMenuEntry[]
-  align?: 'left' | 'right'
-  menuLabel?: string
-}>(), {
-  align: 'right',
-  menuLabel: undefined,
-})
-const { t } = useUiKitLocale()
-const resolvedMenuLabel = computed(() => props.menuLabel ?? t('dialog.moreActions'))
-const emit = defineEmits<{
-  select: [entry: SMenuSelectableEntry, event: SMenuActivationEvent]
-}>()
-export type SDropdownMenuTriggerAttrs = OwnedAttributeBindings<'SDropdownMenu'> & {
-  readonly ref: VNodeRef
-  readonly 'aria-haspopup': 'menu'
-  readonly 'aria-expanded': boolean
-  readonly 'aria-controls': string
-  readonly onClick: (event?: Event) => void
-  readonly onKeydown: (event: KeyboardEvent) => void
-}
-const slots = defineSlots<{
-  /** Единственный custom-trigger contract: attrs должны принадлежать реальному control. / The sole custom-trigger contract: attrs must be bound to the actual control. */
-  default?: (props: { triggerAttrs: SDropdownMenuTriggerAttrs }) => VNodeChild
-}>()
-
-const ownedAttrs = useOwnedAttrs({ component: 'SDropdownMenu', owner: 'menu trigger' })
-const layerRef = ref<SMenuLayerApi | null>(null)
-const menuSurfaceRef = ref<SMenuSurfaceApi | null>(null)
-let registeredTriggerTarget: Element | object | null = null
-const layerElement = computed(() => layerRef.value?.getElement() ?? null)
-const {
-  isOpen,
-  position,
-  zIndex,
-  close,
-  closeForTab,
-  open,
-  toggle: toggleLayer,
-} = useMenuLayer(layerElement)
-const menuId = `s-dropdown-menu-${useId()}`
-const initialFocus = ref<'first' | 'last'>('first')
-const hasCustomTrigger = Boolean(slots.default)
-
-function resolveTriggerElement(target: Element | object | null): HTMLElement | null {
-  if (target === null) return null
-  if (target instanceof HTMLElement) return target
-  const getElement = Reflect.get(target, 'getElement')
-  if (typeof getElement !== 'function') {
-    throw new Error('SDropdownMenu: trigger ref must resolve to an HTMLElement or UI-kit leaf API')
-  }
-  const element: unknown = Reflect.apply(getElement, target, [])
-  if (!(element instanceof HTMLElement)) {
-    throw new Error('SDropdownMenu: trigger leaf getElement() must return an HTMLElement')
-  }
-  return element
-}
-
-const bindTriggerElement: VNodeRef = (target) => {
-  if (target !== null && registeredTriggerTarget !== null && target !== registeredTriggerTarget) {
-    throw new Error('SDropdownMenu: trigger binding must belong to exactly one UI-kit leaf')
-  }
-  registeredTriggerTarget = target
-}
-
-const triggerAttrs = (): SDropdownMenuTriggerAttrs => {
-  const attrs = ownedAttrs.bindings()
-  if (Object.prototype.hasOwnProperty.call(attrs, 'onClick')) {
-    throw new Error('SDropdownMenu: @click belongs to the typed triggerAttrs activation contract')
-  }
-  return {
-    ...attrs,
-    ref: bindTriggerElement,
-    'aria-haspopup': 'menu' as const,
-    'aria-expanded': isOpen.value,
-    'aria-controls': menuId,
-    onClick: toggle,
-    onKeydown: handleTriggerKeydown,
-  }
-}
-
-function triggerElement(event?: Event): HTMLElement {
-  const trigger = resolveTriggerElement(registeredTriggerTarget)
-  if (!trigger) throw new Error('SDropdownMenu: expected exactly one trigger, received 0')
-  if (event?.currentTarget instanceof HTMLElement && event.currentTarget !== trigger) {
-    throw new Error('SDropdownMenu: activation target does not match the registered trigger')
-  }
-  return trigger
-}
-
-onMounted(() => {
-  const trigger = triggerElement()
-  if (trigger.getAttribute('aria-haspopup') !== 'menu' || trigger.getAttribute('aria-controls') !== menuId) {
-    throw new Error('SDropdownMenu: expected exactly one trigger, received 0')
-  }
-})
-
-function toggle(event?: Event): void {
-  const trigger = triggerElement(event)
-  initialFocus.value = 'first'
-  toggleLayer({ type: 'element', element: trigger, align: props.align }, trigger)
-}
-
-async function handleTriggerKeydown(event: KeyboardEvent): Promise<void> {
-  if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return
-  event.preventDefault()
-  event.stopPropagation()
-  const trigger = triggerElement(event)
-  initialFocus.value = event.key === 'ArrowUp' ? 'last' : 'first'
-  if (!isOpen.value) {
-    await open({ type: 'element', element: trigger, align: props.align }, trigger)
-  }
-  await nextTick()
-  if (initialFocus.value === 'last') menuSurfaceRef.value?.focusLast()
-  else menuSurfaceRef.value?.focusFirst()
-}
-
-function select(item: SMenuSelectableEntry, event: SMenuActivationEvent): void {
-  if (item.disabled) return
-  close('selection')
-  emit('select', item, event)
-}
-
-watchEffect(() => {
-  validateSMenuEntries(props.items)
-  if (!resolvedMenuLabel.value.trim()) throw new TypeError('SDropdownMenu: menuLabel must be a non-empty string')
-  if (props.align !== 'left' && props.align !== 'right') throw new TypeError("SDropdownMenu: align must be 'left' or 'right'")
-})
-</script>
-
-<style lang="postcss" src="./SDropdownMenu.css" scoped></style>

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

@@ -1,93 +0,0 @@
-<template>
-  <div
-    v-bind="ownedAttrs.bindings()"
-    class="s-field"
-    :class="`s-field--${layout}`"
-    :data-disabled="disabled || undefined"
-    :data-readonly="readonly || undefined"
-    :data-invalid="isInvalid || undefined"
-    :data-fill="fill"
-  >
-    <label v-if="hasLabel" :id="labelId" class="s-field__label" :for="controlId">
-      <slot name="label">{{ label }}</slot>
-      <span v-if="required" :class="['s-field__required', FIELD_REQUIRED_CLASS]" aria-hidden="true">*</span>
-    </label>
-
-    <div class="s-field__control">
-      <slot
-        :control-id="controlId"
-        :labelled-by="hasLabel ? labelId : undefined"
-        :described-by="describedBy"
-        :invalid="isInvalid"
-        :disabled="disabled"
-        :readonly="readonly"
-        :required="required"
-      />
-    </div>
-
-    <p v-if="helpText || $slots.help" :id="helpId" :class="['s-field__help', FIELD_HELP_CLASS]">
-      <slot name="help">{{ helpText }}</slot>
-    </p>
-    <p v-if="isInvalid && (errorMessage || $slots.error)" :id="errorId" :class="['s-field__error', FIELD_ERROR_CLASS]">
-      <slot name="error">{{ errorMessage }}</slot>
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, useSlots } from 'vue'
-import {
-  FIELD_ERROR_CLASS,
-  FIELD_HELP_CLASS,
-  FIELD_REQUIRED_CLASS,
-  useFieldSupportingText,
-} from '../../../internal/fieldPresentation'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-
-defineOptions({ inheritAttrs: false })
-
-/** Расположение подписи относительно control-region. / Label placement relative to the control region. */
-export type SFieldLayout = 'stacked' | 'inline'
-
-/** Высота field-root и его control-region. / Height contract for the field root and control region. */
-export type SFieldFill = 'content' | 'container'
-
-export interface Props {
-  controlId: string
-  label?: string
-  required?: boolean
-  helpText?: string
-  errorMessage?: string
-  invalid?: boolean
-  disabled?: boolean
-  readonly?: boolean
-  layout?: SFieldLayout
-  fill?: SFieldFill
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  label: undefined,
-  required: false,
-  helpText: undefined,
-  errorMessage: undefined,
-  invalid: false,
-  disabled: false,
-  readonly: false,
-  layout: 'stacked',
-  fill: 'content',
-})
-const slots = useSlots()
-const ownedAttrs = useOwnedAttrs({ component: 'SField', owner: 'field root' })
-
-const isInvalid = computed(() => props.invalid)
-const hasLabel = computed(() => Boolean(props.label || slots.label))
-const labelId = computed(() => `${props.controlId}-label`)
-const fieldId = computed(() => props.controlId)
-const { describedBy, errorId, helpId } = useFieldSupportingText({
-  baseId: fieldId,
-  hasHelp: () => Boolean(props.helpText || slots.help),
-  hasError: () => Boolean(isInvalid.value && (props.errorMessage || slots.error)),
-})
-</script>
-
-<style lang="postcss" src="./SField.css" scoped></style>