@pgcorp/ui-kit 0.1.0

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

@@ -0,0 +1,326 @@
+<script setup lang="ts">
+import { computed, watchEffect, type VNodeChild } from 'vue'
+import { RouterLink, type RouteLocationRaw } from 'vue-router'
+import type { STooltipTriggerBinding } from '../data-display/STooltip.vue'
+import { resolveLinkTarget } from '../../../internal/linkTarget'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import {
+  PassiveContentBoundary,
+  useInteractiveLeafRegistration,
+  type PassiveContentContract,
+} from '../../../internal/passiveContentContract'
+
+defineOptions({ inheritAttrs: false })
+
+export type InteractiveSurfaceTone = 'default' | 'primary' | 'success' | 'danger'
+export type InteractiveSurfaceDensity = 'compact' | 'comfortable'
+export type InteractiveSurfacePadding = 'none' | 'sm' | 'md'
+export type InteractiveSurfaceRadius = 'md' | 'lg' | 'xl'
+export type InteractiveSurfaceFill = 'content' | 'container'
+
+/**
+ * Единственный semantic-контракт поверхности: passive, action или ровно одна link-target.
+ * The sole surface semantics contract: passive, action, or exactly one link target.
+ */
+export type InteractiveSurfaceContract =
+  | { readonly mode: 'static' }
+  | {
+      readonly mode: 'action'
+      readonly accessibleLabel: string
+      readonly disabled?: boolean
+      readonly pressed?: boolean
+    }
+  | ({
+      readonly mode: 'link'
+      readonly accessibleLabel: string
+      readonly disabled?: boolean
+      readonly target?: '_self' | '_blank' | '_parent' | '_top'
+      readonly rel?: string
+    } & (
+      | { readonly href: string; readonly to?: never }
+      | { readonly href?: never; readonly to: RouteLocationRaw }
+    ))
+/** Разрешённые semantic-режимы поверхности. / Supported semantic surface modes. */
+export type InteractiveSurfaceMode = InteractiveSurfaceContract['mode']
+
+/**
+ * Контракт большой интерактивной поверхности с пассивным содержимым.
+ * Contract for a large interactive surface whose visual content remains passive.
+ */
+export interface Props {
+  surface: InteractiveSurfaceContract
+  selected?: boolean
+  tone?: InteractiveSurfaceTone
+  density?: InteractiveSurfaceDensity
+  padding?: InteractiveSurfacePadding
+  radius?: InteractiveSurfaceRadius
+  fill?: InteractiveSurfaceFill
+  contentAlign?: 'start' | 'center'
+  /** Полный binding явного STooltip trigger, направляемый на activation owner. / Complete explicit STooltip trigger binding routed to the activation owner. */
+  tooltipTrigger?: STooltipTriggerBinding
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  selected: false,
+  tone: 'default',
+  density: 'comfortable',
+  padding: 'md',
+  radius: 'lg',
+  fill: 'content',
+  contentAlign: 'start',
+  tooltipTrigger: undefined,
+})
+
+const emit = defineEmits<{
+  activate: [event: MouseEvent]
+}>()
+defineSlots<{
+  /** Пассивное flow-содержимое поверхности. / Passive flow content of the surface. */
+  default?: () => VNodeChild
+}>()
+
+const ownedAttrs = useOwnedAttrs({ component: 'SInteractiveSurface', owner: 'interactive surface owner' })
+
+const assertOptionalBoolean = (surface: Record<string, unknown>, field: 'disabled' | 'pressed'): void => {
+  if (surface[field] !== undefined && typeof surface[field] !== 'boolean') {
+    throw new TypeError(`SInteractiveSurface: surface.${field} должен быть boolean`)
+  }
+}
+
+const assertExactSurfaceKeys = (surface: Record<string, unknown>, allowed: readonly string[]): void => {
+  const allowedKeys = new Set(allowed)
+  const unexpected = Object.keys(surface).filter((key) => !allowedKeys.has(key))
+  if (unexpected.length > 0) {
+    throw new Error(`SInteractiveSurface: surface mode="${String(surface.mode)}" не допускает поля ${unexpected.join(', ')}`)
+  }
+}
+
+const validatedSurface = computed<InteractiveSurfaceContract>(() => {
+  const candidate: unknown = props.surface
+  if (typeof candidate !== 'object' || candidate === null || Array.isArray(candidate)) {
+    throw new TypeError('SInteractiveSurface: surface должен быть discriminated object')
+  }
+  const surface = candidate as Record<string, unknown>
+  if (surface.mode === 'static') {
+    assertExactSurfaceKeys(surface, ['mode'])
+    return { mode: 'static' }
+  }
+  if (surface.mode === 'action') {
+    assertExactSurfaceKeys(surface, ['mode', 'accessibleLabel', 'disabled', 'pressed'])
+    assertOptionalBoolean(surface, 'disabled')
+    assertOptionalBoolean(surface, 'pressed')
+    if (typeof surface.accessibleLabel !== 'string' || !surface.accessibleLabel.trim()) {
+      throw new TypeError('SInteractiveSurface: accessibleLabel обязателен для mode="action"')
+    }
+    return {
+      mode: 'action',
+      accessibleLabel: surface.accessibleLabel,
+      disabled: surface.disabled as boolean | undefined,
+      pressed: surface.pressed as boolean | undefined,
+    }
+  }
+  if (surface.mode === 'link') {
+    assertExactSurfaceKeys(surface, ['mode', 'accessibleLabel', 'disabled', 'target', 'rel', 'href', 'to'])
+    assertOptionalBoolean(surface, 'disabled')
+    if (typeof surface.accessibleLabel !== 'string' || !surface.accessibleLabel.trim()) {
+      throw new TypeError('SInteractiveSurface: accessibleLabel обязателен для mode="link"')
+    }
+    const target = surface.target ?? '_self'
+    if (!['_self', '_blank', '_parent', '_top'].includes(String(target))) {
+      throw new TypeError('SInteractiveSurface: surface.target имеет недопустимое значение')
+    }
+    if (surface.rel !== undefined && typeof surface.rel !== 'string') {
+      throw new TypeError('SInteractiveSurface: surface.rel должен быть string')
+    }
+    if ('href' in surface && (typeof surface.href !== 'string' || surface.href.length === 0)) {
+      throw new TypeError('SInteractiveSurface: surface.href должен быть непустой string')
+    }
+    if (
+      'to' in surface
+      && !(
+        typeof surface.to === 'string'
+        || (typeof surface.to === 'object' && surface.to !== null && !Array.isArray(surface.to))
+      )
+    ) {
+      throw new TypeError('SInteractiveSurface: surface.to должен быть RouteLocationRaw')
+    }
+    const resolved = resolveLinkTarget({
+      href: typeof surface.href === 'string' ? surface.href : undefined,
+      to: surface.to as RouteLocationRaw | undefined,
+      target: target as '_self' | '_blank' | '_parent' | '_top',
+      rel: surface.rel as string | undefined,
+      owner: 'SInteractiveSurface',
+    })
+    return resolved.kind === 'anchor'
+      ? {
+          mode: 'link',
+          accessibleLabel: surface.accessibleLabel,
+          disabled: surface.disabled as boolean | undefined,
+          href: resolved.bindings.href,
+          target: resolved.bindings.target,
+          rel: resolved.bindings.rel,
+        }
+      : {
+          mode: 'link',
+          accessibleLabel: surface.accessibleLabel,
+          disabled: surface.disabled as boolean | undefined,
+          to: resolved.bindings.to,
+          target: resolved.bindings.target,
+          rel: resolved.bindings.rel,
+        }
+  }
+  throw new TypeError(`SInteractiveSurface: неизвестный surface.mode "${String(surface.mode)}"`)
+})
+
+const TOOLTIP_TRIGGER_KEYS = [
+  'ref',
+  'aria-describedby',
+  'onPointerenter',
+  'onPointerleave',
+  'onPointerdown',
+  'onPointerup',
+  'onPointercancel',
+  'onFocusin',
+  'onFocusout',
+] as const
+
+const validatedTooltipTrigger = computed<STooltipTriggerBinding | undefined>(() => {
+  const candidate: unknown = props.tooltipTrigger
+  if (candidate === undefined) return undefined
+  if (typeof candidate !== 'object' || candidate === null || Array.isArray(candidate)) {
+    throw new TypeError('SInteractiveSurface: tooltipTrigger должен быть полным STooltip trigger binding. / SInteractiveSurface: tooltipTrigger must be a complete STooltip trigger binding.')
+  }
+  const record = candidate as Record<string, unknown>
+  const unexpected = Object.keys(record).filter((key) => !TOOLTIP_TRIGGER_KEYS.includes(key as typeof TOOLTIP_TRIGGER_KEYS[number]))
+  const missing = TOOLTIP_TRIGGER_KEYS.filter((key) => !Object.hasOwn(record, key))
+  if (unexpected.length > 0 || missing.length > 0) {
+    throw new Error(`SInteractiveSurface: tooltipTrigger имеет недопустимый набор ключей; missing=${missing.join(',')}; unexpected=${unexpected.join(',')}. / SInteractiveSurface: tooltipTrigger has an invalid key set; missing=${missing.join(',')}; unexpected=${unexpected.join(',')}.`)
+  }
+  if (record['aria-describedby'] !== undefined && typeof record['aria-describedby'] !== 'string') {
+    throw new TypeError('SInteractiveSurface: tooltipTrigger aria-describedby должен быть string или undefined. / SInteractiveSurface: tooltipTrigger aria-describedby must be a string or undefined.')
+  }
+  if (typeof record.ref !== 'function') {
+    throw new TypeError('SInteractiveSurface: tooltipTrigger.ref должен быть callback ref. / SInteractiveSurface: tooltipTrigger.ref must be a callback ref.')
+  }
+  for (const key of TOOLTIP_TRIGGER_KEYS) {
+    if (key !== 'ref' && key !== 'aria-describedby' && typeof record[key] !== 'function') {
+      throw new TypeError(`SInteractiveSurface: tooltipTrigger.${key} должен быть function. / SInteractiveSurface: tooltipTrigger.${key} must be a function.`)
+    }
+  }
+  return candidate as STooltipTriggerBinding
+})
+
+const activationBindings = (): Readonly<Record<string, unknown>> => ({
+  ...ownedAttrs.bindings(),
+  ...(validatedTooltipTrigger.value ?? {}),
+})
+const surfaceMode = computed<InteractiveSurfaceMode>(() => validatedSurface.value.mode)
+const surfaceDisabled = computed(() => validatedSurface.value.mode === 'static'
+  ? false
+  : validatedSurface.value.disabled ?? false)
+const surfacePressed = computed(() => validatedSurface.value.mode === 'action' ? validatedSurface.value.pressed : undefined)
+const resolvedTarget = computed(() => {
+  const surface = validatedSurface.value
+  if (surface.mode !== 'link') return null
+  return resolveLinkTarget({
+    href: surface.href,
+    to: surface.to,
+    target: surface.target ?? '_self',
+    rel: surface.rel,
+    owner: 'SInteractiveSurface',
+  })
+})
+const linkComponent = computed(() => resolvedTarget.value?.kind === 'router' ? RouterLink : 'a')
+const linkBindings = () => {
+  const target = resolvedTarget.value
+  if (!target) throw new Error('SInteractiveSurface: link bindings requested outside link surface')
+  return {
+    ...activationBindings(),
+    ...target.bindings,
+  }
+}
+const resolvedAccessibleLabel = computed(() => {
+  if (validatedSurface.value.mode === 'static') return undefined
+  return validatedSurface.value.accessibleLabel.trim()
+})
+
+watchEffect(() => {
+  if (validatedSurface.value.mode === 'static' && validatedTooltipTrigger.value) {
+    throw new Error('SInteractiveSurface: tooltipTrigger требует action или link surface. / SInteractiveSurface: tooltipTrigger requires an action or link surface.')
+  }
+  void validatedTooltipTrigger.value
+})
+
+useInteractiveLeafRegistration({
+  owner: 'SInteractiveSurface',
+  active: () => surfaceMode.value !== 'static',
+})
+const passiveContentContract: PassiveContentContract = {
+  owner: 'SInteractiveSurface',
+  region: 'passive content-region',
+  active: () => surfaceMode.value !== 'static',
+  guidance: 'Передайте дополнительное действие через sibling action-region. / Put the additional action in the sibling action region.',
+}
+
+function activateLink(event: MouseEvent): void {
+  if (surfaceDisabled.value) {
+    event.preventDefault()
+    return
+  }
+  emit('activate', event)
+}
+
+function activateAction(event: MouseEvent): void {
+  emit('activate', event)
+}
+</script>
+
+<template>
+  <div
+    v-bind="surfaceMode === 'static' ? ownedAttrs.bindings() : undefined"
+    class="s-interactive-surface"
+    :data-mode="surfaceMode"
+    :data-tone="tone"
+    :data-density="density"
+    :data-padding="padding"
+    :data-radius="radius"
+    :data-fill="fill"
+    :data-selected="selected || undefined"
+    :data-pressed="surfacePressed"
+    :data-disabled="surfaceDisabled || undefined"
+    :data-content-align="contentAlign"
+  >
+    <button
+      v-if="surfaceMode === 'action'"
+      v-bind="activationBindings()"
+      class="s-interactive-surface__activation"
+      type="button"
+      :disabled="surfaceDisabled"
+      :aria-label="resolvedAccessibleLabel"
+      :aria-pressed="surfacePressed"
+      @click="activateAction"
+    >
+      <span class="s-interactive-surface__accessible-label">{{ resolvedAccessibleLabel }}</span>
+    </button>
+    <component
+      v-else-if="surfaceMode === 'link'"
+      :is="linkComponent"
+      v-bind="linkBindings()"
+      class="s-interactive-surface__activation"
+      :aria-label="resolvedAccessibleLabel"
+      :aria-current="selected ? 'page' : undefined"
+      :aria-disabled="surfaceDisabled || undefined"
+      :tabindex="surfaceDisabled ? -1 : undefined"
+      @click="activateLink"
+    >
+      <span class="s-interactive-surface__accessible-label">{{ resolvedAccessibleLabel }}</span>
+    </component>
+    <div class="s-interactive-surface__content" data-passive-content="">
+      <PassiveContentBoundary :contract="passiveContentContract">
+        <slot />
+      </PassiveContentBoundary>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" src="./SInteractiveSurface.css" scoped></style>

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

@@ -0,0 +1,114 @@
+@reference "../../../styles/reference.css";
+
+.s-link {
+  @apply inline-flex min-w-0 items-center rounded-sm font-medium text-primary-600 underline-offset-2;
+  @apply hover:text-primary-700;
+  @apply dark:text-primary-400 dark:hover:text-primary-300;
+}
+
+.s-link:focus-visible {
+  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color);
+  outline-offset: var(--s-focus-ring-offset);
+}
+
+.s-link[data-width='full'] {
+  @apply w-full;
+}
+
+.s-link[data-size='sm'] {
+  @apply text-sm;
+}
+
+.s-link[data-size='md'] {
+  @apply text-base;
+}
+
+.s-link[data-underline='hover'] {
+  @apply no-underline hover:underline;
+}
+
+.s-link[data-underline='always'] {
+  @apply underline;
+}
+
+.s-link[data-underline='none'] {
+  @apply no-underline hover:no-underline;
+}
+
+.s-link__icon {
+  @apply inline-flex shrink-0 items-center justify-center;
+  width: var(--s-icon-size-xs);
+  height: var(--s-icon-size-xs);
+}
+
+.s-link__icon-graphic {
+  @apply h-full w-full;
+}
+
+.s-link__content {
+  @apply min-w-0;
+}
+
+.s-link[data-wrap='anywhere'] .s-link__content {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.s-link[data-content-kind='identifier'] {
+  @apply font-mono;
+}
+
+.s-link__trailing {
+  @apply ml-auto shrink-0;
+}
+
+.s-link[data-variant='subtle'] {
+  @apply text-surface-600 dark:text-surface-300;
+}
+
+.s-link[data-variant='document'] {
+  display: inline;
+  font: inherit;
+  @apply cursor-pointer text-primary-600 underline decoration-primary-300 underline-offset-2 transition-colors;
+  @apply hover:text-primary-700 hover:decoration-primary-500;
+  @apply dark:text-primary-400 dark:hover:text-primary-300;
+}
+
+.s-link[data-variant='document'] .s-link__content {
+  display: inline;
+}
+
+.s-link[data-variant='brand'] {
+  @apply gap-3 rounded-xl text-inherit no-underline transition-opacity hover:text-inherit hover:no-underline hover:opacity-90;
+}
+
+.s-link[data-variant='navigation'] {
+  @apply justify-between gap-2 rounded-2xl border border-transparent px-3 py-2.5 text-sm text-surface-700 no-underline transition;
+  @apply hover:border-surface-200 hover:bg-surface-100/80 hover:text-surface-900 hover:no-underline;
+  @apply dark:text-surface-200 dark:hover:border-surface-700 dark:hover:bg-surface-800/60 dark:hover:text-surface-0;
+}
+
+.s-link[data-variant='navigation'] .s-link__content {
+  @apply truncate;
+}
+
+.s-link[data-variant='navigation'][data-active='true'] {
+  @apply border-primary-200 bg-primary-50 text-primary-700;
+  @apply dark:border-primary-800 dark:bg-primary-950/50 dark:text-primary-200;
+}
+
+.s-link[data-variant='bottom-navigation'] {
+  @apply w-full justify-center gap-2 rounded-xl px-2 py-2 text-sm text-surface-600 no-underline transition;
+  @apply hover:bg-surface-100 hover:text-surface-900 hover:no-underline;
+  min-height: var(--s-control-hitbox-sm);
+}
+
+.s-link[data-variant='bottom-navigation'][data-active='true'] {
+  @apply bg-primary-50 text-primary-700;
+  @apply dark:bg-primary-950/50 dark:text-primary-200;
+}
+
+.s-link[data-disabled='true'] {
+  @apply cursor-not-allowed opacity-50;
+  pointer-events: auto;
+}

package/src/components/shared/controls/SLink.ts

@@ -0,0 +1,85 @@
+import type { Component } from 'vue'
+import type {
+  HistoryState,
+  LocationQueryRaw,
+  LocationQueryValueRaw,
+  RouteParamsRawGeneric,
+} from 'vue-router'
+
+/** Допустимое scalar-значение params/query. / Supported scalar params/query value. */
+export type LinkRouteScalar = LocationQueryValueRaw
+
+/** Exact params/query container for the UI-kit destination boundary. */
+export type LinkRouteDictionary = LocationQueryRaw
+
+/** Exact named-route params accepted by Vue Router. */
+export type LinkRouteParams = RouteParamsRawGeneric
+
+/** Exact serializable History API state supported by the UI-kit destination boundary. */
+export type LinkHistoryStateValue = string | number | boolean | null | undefined | LinkHistoryState | LinkHistoryStateValue[]
+export interface LinkHistoryState extends HistoryState {
+  [key: number]: LinkHistoryStateValue
+  [key: string]: LinkHistoryStateValue
+}
+
+interface LinkRouterOptions {
+  readonly query?: LinkRouteDictionary
+  readonly hash?: string
+  readonly replace?: boolean
+  readonly force?: boolean
+  readonly state?: LinkHistoryState
+}
+
+/**
+ * Намеренно суженный router destination: UI-kit требует явный named/path target.
+ * Intentionally narrowed router destination: the UI kit requires an explicit named/path target.
+ */
+export type LinkRouterLocation = LinkRouterOptions & (
+  | { readonly name: string | symbol; readonly path?: never; readonly params?: LinkRouteParams }
+  | { readonly path: string; readonly name?: never; readonly params?: never }
+)
+
+/** Router destination supported by the UI-kit boundary. */
+export type LinkRouterTarget = string | LinkRouterLocation
+
+export const LINK_BROWSING_TARGETS = ['_self', '_blank', '_parent', '_top'] as const
+
+/** Допустимый browsing-context target ссылки. / Supported link browsing-context target. */
+export type LinkBrowsingTarget = typeof LINK_BROWSING_TARGETS[number]
+
+interface LinkDestinationOptions {
+  readonly target?: LinkBrowsingTarget
+  readonly rel?: string
+}
+
+/** Native href destination; router target is structurally forbidden. */
+export type HrefLinkDestination = LinkDestinationOptions & {
+  readonly href: string
+  readonly to?: never
+}
+
+/** Explicit named/path router destination; native href is structurally forbidden. */
+export type RouterLinkDestination = LinkDestinationOptions & {
+  readonly href?: never
+  readonly to: LinkRouterTarget
+}
+
+/** Строгий XOR-контракт обычного destination. / Strict XOR contract for an ordinary destination. */
+export type LinkDestination = HrefLinkDestination | RouterLinkDestination
+
+/** Canonical presentation/state API owned by SLink. */
+export interface LinkPresentationProps {
+  readonly variant?: 'default' | 'subtle' | 'brand' | 'navigation' | 'bottom-navigation' | 'document'
+  readonly external?: boolean
+  readonly active?: boolean
+  readonly disabled?: boolean
+  readonly width?: 'fit' | 'full'
+  readonly size?: 'inherit' | 'sm' | 'md'
+  readonly underline?: 'hover' | 'always' | 'none'
+  readonly wrap?: 'normal' | 'anywhere'
+  readonly contentKind?: 'text' | 'identifier'
+  readonly leadingIcon?: Component
+}
+
+/** Полный discriminated public props contract SLink. / Complete discriminated public SLink props contract. */
+export type SLinkProps = LinkDestination & LinkPresentationProps

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

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import {
+  computed,
+  type VNodeChild,
+} from 'vue'
+import { RouterLink } from 'vue-router'
+import { resolveLinkTarget } from '../../../internal/linkTarget'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import {
+  PassiveContentBoundary,
+  useInteractiveLeafRegistration,
+  type PassiveContentContract,
+} from '../../../internal/passiveContentContract'
+import type {
+  SLinkProps,
+} from './SLink'
+
+defineOptions({ inheritAttrs: false })
+
+/** Exact href/to XOR plus the canonical link presentation API. */
+export type Props = SLinkProps
+
+const props = withDefaults(defineProps<Props>(), {
+  href: undefined,
+  to: undefined,
+  target: '_self',
+  rel: undefined,
+  variant: 'default',
+  external: false,
+  active: false,
+  disabled: false,
+  width: 'fit',
+  size: 'inherit',
+  underline: 'hover',
+  wrap: 'normal',
+  contentKind: 'text',
+  leadingIcon: undefined,
+})
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+const ownedAttrs = useOwnedAttrs({ component: 'SLink', owner: 'native navigation link' })
+const slots = defineSlots<{
+  /** Пассивный текст/inline-контент ссылки. / Passive text or inline link content. */
+  default?: () => VNodeChild
+  /** Пассивная trailing presentation, например badge. / Passive trailing presentation such as a badge. */
+  trailing?: () => VNodeChild
+}>()
+useInteractiveLeafRegistration({ owner: 'SLink' })
+const passiveContentContract: PassiveContentContract = {
+  owner: 'SLink',
+  region: 'passive link content',
+  guidance: 'Вынесите control за границы ссылки. / Move the control outside the link.',
+}
+
+const resolvedTarget = computed(() => resolveLinkTarget({
+  href: props.href,
+  to: props.to,
+  target: props.target,
+  rel: props.rel,
+  owner: 'SLink',
+}))
+
+const linkComponent = computed(() => {
+  if (props.disabled) return 'a'
+  return resolvedTarget.value.kind === 'router' ? RouterLink : 'a'
+})
+
+const linkBindings = () => ({
+  ...ownedAttrs.bindings(),
+  ...(props.disabled ? {} : resolvedTarget.value.bindings),
+})
+
+function handleClick(event: MouseEvent): void {
+  if (props.disabled) {
+    event.preventDefault()
+    event.stopImmediatePropagation()
+    return
+  }
+  emit('click', event)
+}
+</script>
+
+<template>
+  <component
+    :is="linkComponent"
+    v-bind="linkBindings()"
+    class="s-link"
+    :data-variant="variant"
+    :data-external="external || undefined"
+    :data-active="active || undefined"
+    :data-disabled="disabled || undefined"
+    :data-width="width"
+    :data-size="size"
+    :data-underline="underline"
+    :data-wrap="wrap"
+    :data-content-kind="contentKind"
+    :aria-current="active ? 'page' : undefined"
+    :aria-disabled="disabled || undefined"
+    :tabindex="disabled ? -1 : undefined"
+    :role="disabled ? 'link' : undefined"
+    @click="handleClick"
+  >
+    <span v-if="leadingIcon" class="s-link__icon" aria-hidden="true">
+      <component :is="leadingIcon" class="s-link__icon-graphic" />
+    </span>
+    <PassiveContentBoundary :contract="passiveContentContract">
+      <span class="s-link__content"><slot /></span>
+      <span v-if="slots.trailing" class="s-link__trailing"><slot name="trailing" /></span>
+    </PassiveContentBoundary>
+  </component>
+</template>
+
+<style lang="postcss" src="./SLink.css" scoped></style>

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

@@ -0,0 +1,31 @@
+@reference "../../../styles/reference.css";
+
+.s-listbox {
+  @apply m-0 list-none;
+}
+
+.s-listbox[aria-disabled='true'] {
+  @apply opacity-60;
+}
+
+.s-listbox[data-invalid='true'] {
+  outline: var(--s-focus-ring-width) solid var(--s-selection-invalid-outline-color);
+  outline-offset: var(--s-focus-ring-inset-offset);
+}
+
+.s-listbox__empty {
+  @apply px-3 py-2 text-sm text-surface-500 dark:text-surface-400;
+}
+
+.s-listbox[data-variant='select'] {
+  @apply mt-1 max-h-60 w-full overflow-auto rounded-md py-1 text-base;
+  background: var(--s-floating-surface);
+  color: var(--s-floating-foreground);
+  box-shadow: 0 0 0 1px var(--s-floating-outline), var(--s-elevation-floating);
+}
+
+.s-listbox[data-variant='color'] {
+  @apply grid grid-cols-5 gap-2 rounded-2xl border border-surface-200 bg-surface-0 p-2;
+  @apply dark:border-surface-700 dark:bg-surface-900;
+  box-shadow: var(--s-elevation-overlay);
+}