@pgcorp/ui-kit 0.4.0 → 0.6.0

package/src/components/shared/data-display/STable.vue

@@ -58,6 +58,8 @@
               width="full"
               :content-align="column.align === 'right' ? 'end' : column.align === 'center' ? 'center' : 'start'"
               :trailing-icon="sortIcon(column)"
+              :badge="sortPriority(column) ?? undefined"
+              badge-severity="primary"
               @click="requestSort(column)"
             >
               <span
@@ -193,6 +195,7 @@ import type {
   STableRowState,
   STableSelectionMode,
   STableSort,
+  STableSortMode,
   STableSurface,
 } from './table'
 
@@ -209,6 +212,7 @@ export type {
   STableSelectionMode,
   STableSort,
   STableSortDirection,
+  STableSortMode,
   STableSurface,
 } from './table'
 
@@ -232,7 +236,9 @@ export interface STableProps<
   expandedRowKeys?: readonly RowKey[]
   isRowExpandable?: (row: Row, index: number) => boolean
   getRowLabel?: (row: Row, index: number) => string
+  sortMode?: STableSortMode
   sort?: STableSort<Field> | null
+  sorts?: readonly STableSort<Field>[]
   maxHeight?: ScrollableViewportMaxBlockSize
   density?: STableDensity
   surface?: STableSurface
@@ -282,7 +288,9 @@ const props = withDefaults(defineProps<STableProps<Row, RowKey, Field>>(), {
   expandedRowKeys: () => [],
   isRowExpandable: undefined,
   getRowLabel: undefined,
+  sortMode: 'single',
   sort: null,
+  sorts: () => [],
   maxHeight: 'none',
   density: 'default',
   surface: 'bordered',
@@ -301,6 +309,8 @@ const emit = defineEmits<{
   'row-expand': [row: Row, index: number, expanded: boolean]
   'update:sort': [value: STableSort<Field> | null]
   sort: [value: STableSort<Field> | null]
+  'update:sorts': [value: readonly STableSort<Field>[]]
+  'multi-sort': [value: readonly STableSort<Field>[]]
 }>()
 const slots = useSlots()
 
@@ -313,6 +323,8 @@ const TABLE_CELL_STATES = ['default', 'pending'] as const
 const TABLE_COLUMN_CONTENT = ['field', 'value', 'slot'] as const
 const TABLE_HEADER_PRESENTATIONS = ['visible', 'assistive'] as const
 const TABLE_SELECTION_MODES = ['none', 'multiple'] as const
+const TABLE_SORT_MODES = ['single', 'multiple'] as const
+const TABLE_SORT_DIRECTIONS = ['ascending', 'descending'] as const
 
 const ownedAttrs = useOwnedAttrs({ component: 'STable', owner: 'table scroll surface' })
 useInteractiveLeafRegistration({ owner: 'STable' })
@@ -389,6 +401,12 @@ const validatedSelectionMode = computed(() => validateExactString(
   props.selectionMode,
   TABLE_SELECTION_MODES,
 ))
+const validatedSortMode = computed(() => validateExactString(
+  'STable',
+  'sortMode',
+  props.sortMode,
+  TABLE_SORT_MODES,
+))
 
 const validatedColumns = computed<readonly STableColumn<Row, Field>[]>(() => {
   const fields = new Set<string>()
@@ -454,9 +472,15 @@ const validatedColumns = computed<readonly STableColumn<Row, Field>[]>(() => {
   return props.columns
 })
 
-const validatedSort = computed<STableSort<Field> | null>(() => {
-  if (props.sort === null || props.sort === undefined) return null
-  const key = validateNonEmptyString('STable', 'sort.key', props.sort.key) as Field
+function validateSortEntry(value: unknown, coordinate: string): STableSort<Field> {
+  if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+    throw new TypeError(
+      `STable: ${coordinate} должен быть STableSort object. `
+      + `/ STable: ${coordinate} must be an STableSort object.`,
+    )
+  }
+  const entry = value as Record<string, unknown>
+  const key = validateNonEmptyString('STable', `${coordinate}.key`, entry.key) as Field
   const column = validatedColumns.value.find((candidate) => candidate.field === key)
   if (!column?.sortable) {
     throw new TypeError(`STable: sort key ${JSON.stringify(key)} должен ссылаться на sortable column. / STable: sort key ${JSON.stringify(key)} must reference a sortable column.`)
@@ -465,25 +489,100 @@ const validatedSort = computed<STableSort<Field> | null>(() => {
     key,
     direction: validateExactString(
       'STable',
-      'sort.direction',
-      props.sort.direction,
-      ['ascending', 'descending'] as const,
+      `${coordinate}.direction`,
+      entry.direction,
+      TABLE_SORT_DIRECTIONS,
     ),
   }
+}
+
+const validatedSingleSort = computed<STableSort<Field> | null>(() => {
+  if (validatedSortMode.value === 'multiple') {
+    if (props.sort !== null && props.sort !== undefined) {
+      throw new TypeError(
+        'STable: sortMode="multiple" несовместим с sort; используйте v-model:sorts. '
+        + '/ STable: sortMode="multiple" is incompatible with sort; use v-model:sorts.',
+      )
+    }
+    return null
+  }
+  if (props.sort === null || props.sort === undefined) return null
+  return validateSortEntry(props.sort, 'sort')
+})
+
+const validatedMultipleSort = computed<readonly STableSort<Field>[]>(() => {
+  const sorts: unknown = props.sorts
+  if (!Array.isArray(sorts)) {
+    throw new TypeError(
+      'STable: sorts должен быть ordered STableSort array. '
+      + '/ STable: sorts must be an ordered STableSort array.',
+    )
+  }
+  if (validatedSortMode.value === 'single') {
+    if (sorts.length > 0) {
+      throw new TypeError(
+        'STable: sortMode="single" несовместим с непустым sorts; используйте v-model:sort. '
+        + '/ STable: sortMode="single" is incompatible with non-empty sorts; use v-model:sort.',
+      )
+    }
+    return []
+  }
+  const keys = new Set<Field>()
+  return sorts.map((entry, index) => {
+    const validated = validateSortEntry(entry, `sorts[${index}]`)
+    if (keys.has(validated.key)) {
+      throw new TypeError(
+        `STable: sorts содержит duplicate key ${JSON.stringify(validated.key)}. `
+        + `/ STable: sorts contains duplicate key ${JSON.stringify(validated.key)}.`,
+      )
+    }
+    keys.add(validated.key)
+    return validated
+  })
 })
 
+const activeSorts = computed<readonly STableSort<Field>[]>(() => {
+  const singleSort = validatedSingleSort.value
+  const multipleSort = validatedMultipleSort.value
+  if (validatedSortMode.value === 'multiple') return multipleSort
+  return singleSort === null ? [] : [singleSort]
+})
+
+function sortIndex(column: STableColumn<Row, Field>): number {
+  return activeSorts.value.findIndex((candidate) => candidate.key === column.field)
+}
+
+function sortPriority(column: STableColumn<Row, Field>): number | null {
+  if (validatedSortMode.value !== 'multiple') return null
+  const index = sortIndex(column)
+  return index === -1 ? null : index + 1
+}
+
 const columnAriaSort = (column: STableColumn<Row, Field>): 'none' | 'ascending' | 'descending' | undefined => {
   if (!column.sortable) return undefined
-  return validatedSort.value?.key === column.field ? validatedSort.value.direction : 'none'
+  if (validatedSortMode.value === 'multiple') {
+    const primary = activeSorts.value[0]
+    return primary?.key === column.field ? primary.direction : undefined
+  }
+  const current = activeSorts.value[0]
+  return current?.key === column.field ? current.direction : 'none'
 }
 
 const sortIcon = (column: STableColumn<Row, Field>) => {
-  const direction = columnAriaSort(column)
+  const direction = activeSorts.value.find((candidate) => candidate.key === column.field)?.direction
   return direction === 'ascending' ? ChevronUp : direction === 'descending' ? ChevronDown : ChevronsUpDown
 }
 
 const sortActionLabel = (column: STableColumn<Row, Field>): string => {
-  const direction = columnAriaSort(column)
+  const index = sortIndex(column)
+  const current = index === -1 ? undefined : activeSorts.value[index]
+  if (validatedSortMode.value === 'multiple') {
+    if (!current) return `${column.header}: добавить в сортировку по возрастанию`
+    const state = current.direction === 'ascending' ? 'по возрастанию' : 'по убыванию'
+    const action = current.direction === 'ascending' ? 'сортировать по убыванию' : 'убрать из сортировки'
+    return `${column.header}: приоритет ${index + 1} из ${activeSorts.value.length}, ${state}; ${action}`
+  }
+  const direction = current?.direction
   if (direction === 'ascending') return `${column.header}: сортировать по убыванию`
   if (direction === 'descending') return `${column.header}: сбросить сортировку`
   return `${column.header}: сортировать по возрастанию`
@@ -491,15 +590,29 @@ const sortActionLabel = (column: STableColumn<Row, Field>): string => {
 
 function requestSort(column: STableColumn<Row, Field>): void {
   if (!column.sortable) return
-  const current = validatedSort.value
   const key = column.field as Field
-  const next: STableSort<Field> | null = current?.key !== key
-    ? { key, direction: 'ascending' }
-    : current.direction === 'ascending'
-      ? { key, direction: 'descending' }
-      : null
-  emit('update:sort', next)
-  emit('sort', next)
+  if (validatedSortMode.value === 'multiple') {
+    const current = activeSorts.value
+    const index = sortIndex(column)
+    let next: readonly STableSort<Field>[]
+    if (index === -1) next = [...current, { key, direction: 'ascending' }]
+    else if (current[index]!.direction === 'ascending') {
+      next = current.map((entry, candidateIndex) => candidateIndex === index
+        ? { key: entry.key, direction: 'descending' }
+        : entry)
+    } else next = current.filter((_entry, candidateIndex) => candidateIndex !== index)
+    emit('update:sorts', next)
+    emit('multi-sort', next)
+  } else {
+    const current = activeSorts.value[0]
+    const next: STableSort<Field> | null = current?.key !== key
+      ? { key, direction: 'ascending' }
+      : current.direction === 'ascending'
+        ? { key, direction: 'descending' }
+        : null
+    emit('update:sort', next)
+    emit('sort', next)
+  }
 }
 
 function describeRowKey(key: STableRowKey): string {
@@ -671,7 +784,7 @@ const rowExpandableByRow = computed<ReadonlyMap<Row, boolean>>(() => {
 
 const validatedRows = computed<readonly Row[]>(() => {
   const columns = validatedColumns.value
-  void validatedSort.value
+  void activeSorts.value
   void resolvedRowKeys.value
   void validatedSelectedRowKey.value
   void validatedSelectedRowKeys.value

package/src/components/shared/data-display/table.ts

@@ -14,6 +14,7 @@ export type STableColumnContent = 'field' | 'value' | 'slot'
 export type STableColumnHeaderPresentation = 'visible' | 'assistive'
 export type STableSelectionMode = 'none' | 'multiple'
 export type STableSortDirection = 'ascending' | 'descending'
+export type STableSortMode = 'single' | 'multiple'
 
 /** Controlled sort state; consumer owns data ordering. / Управляемое состояние сортировки; порядок данных принадлежит consumer. */
 export interface STableSort<Field extends string = string> {

package/src/components/shared/database/SDataGrid.vue

@@ -8,6 +8,9 @@
     no-content-padding
     content-layout="block"
     surface-overflow="clip"
+    :surface-tone="validatedPresentation === 'embedded' ? 'transparent' : 'default'"
+    :surface-border="validatedPresentation === 'embedded' ? 'none' : 'default'"
+    :surface-radius="validatedPresentation === 'embedded' ? 'none' : 'default'"
   >
     <template v-if="$slots.actions" #actions>
       <slot
@@ -113,6 +116,8 @@ export interface SDataGridProps<Key extends SDataGridColumnKey = SDataGridColumn
   emptyMessage?: string
   selectedRowId?: string
   maxHeight?: ScrollableViewportMaxBlockSize
+  /** Surface chrome для самостоятельного или вложенного grid. / Surface chrome for a standalone or embedded grid. */
+  presentation?: 'panel' | 'embedded'
   /** Accessible name без visible title. / Accessible name when there is no visible title. */
   ariaLabel?: string
   /** DOM id external visible title. / DOM id of an external visible title. */
@@ -168,6 +173,7 @@ const props = withDefaults(defineProps<SDataGridProps<ColumnKey>>(), {
   emptyMessage: 'Нет строк для отображения',
   selectedRowId: undefined,
   maxHeight: 'none',
+  presentation: 'panel',
   ariaLabel: undefined,
   ariaLabelledby: undefined,
 })
@@ -185,6 +191,7 @@ const CELL_KINDS = ['text', 'number', 'boolean', 'json', 'datetime', 'binary'] a
 const COLUMN_ALIGNMENTS = ['left', 'center', 'right'] as const
 const ROW_STATES = ['clean', 'inserted', 'updated', 'deleted'] as const
 const COMMIT_SOURCES = ['draft', 'value'] as const
+const PRESENTATIONS = ['panel', 'embedded'] as const
 
 function assertReadonlyArray(value: unknown, coordinate: string): asserts value is readonly unknown[] {
   if (Array.isArray(value)) return
@@ -335,6 +342,12 @@ const resolvedAccessibleName = computed(() => {
 const validatedLoading = computed(() => validateBoolean('SDataGrid', 'loading', props.loading))
 const validatedDisabled = computed(() => validateBoolean('SDataGrid', 'disabled', props.disabled))
 const validatedReadOnly = computed(() => validateBoolean('SDataGrid', 'readOnly', props.readOnly))
+const validatedPresentation = computed(() => validateExactString(
+  'SDataGrid',
+  'presentation',
+  props.presentation,
+  PRESENTATIONS,
+))
 const validatedMaxHeight = computed(() => validateScrollableViewportMaxBlockSize(
   'SDataGrid',
   'maxHeight',

package/src/internal/fieldPresentation.ts

@@ -0,0 +1,28 @@
+import { computed, type ComputedRef } from 'vue'
+
+export const FIELD_REQUIRED_CLASS = 'ml-0.5 text-danger-600 dark:text-danger-400'
+export const FIELD_SUPPORT_CLASS = 'mt-1 min-w-0 whitespace-normal text-xs [overflow-wrap:anywhere]'
+export const FIELD_HELP_CLASS = `${FIELD_SUPPORT_CLASS} text-surface-500 dark:text-surface-400`
+export const FIELD_ERROR_CLASS = `${FIELD_SUPPORT_CLASS} text-danger-600 dark:text-danger-400`
+
+export interface FieldSupportingTextOptions {
+  readonly baseId: ComputedRef<string>
+  readonly hasHelp: () => boolean
+  readonly hasError: () => boolean
+}
+
+/**
+ * Владеет exact ID и aria-describedby contract для help/error у field и fieldset.
+ * Owns the exact help/error ID and aria-describedby contract for fields and fieldsets.
+ */
+export function useFieldSupportingText(options: FieldSupportingTextOptions) {
+  const helpId = computed(() => `${options.baseId.value}-help`)
+  const errorId = computed(() => `${options.baseId.value}-error`)
+  const describedBy = computed(() => {
+    const ids: string[] = []
+    if (options.hasHelp()) ids.push(helpId.value)
+    if (options.hasError()) ids.push(errorId.value)
+    return ids.length > 0 ? ids.join(' ') : undefined
+  })
+  return { describedBy, errorId, helpId } as const
+}

package/src/internal/pillSurface.ts

@@ -0,0 +1,92 @@
+import {
+  validateBoolean,
+  validateExactString,
+} from './runtimeContract'
+
+const PILL_KINDS = ['badge', 'chip'] as const
+const PILL_SEVERITIES = [
+  'primary',
+  'secondary',
+  'success',
+  'info',
+  'warn',
+  'danger',
+  'contrast',
+] as const
+const PILL_SIZES = ['xs', 'sm', 'md'] as const
+const PILL_MAX_WIDTHS = ['none', 'sm', 'md'] as const
+const PILL_ICON_MOTIONS = ['static', 'spin'] as const
+
+export type PillSurfaceKind = typeof PILL_KINDS[number]
+export type PillSurfaceSeverity = typeof PILL_SEVERITIES[number]
+export type PillSurfaceSize = typeof PILL_SIZES[number]
+export type PillSurfaceMaxWidth = typeof PILL_MAX_WIDTHS[number]
+export type PillSurfaceIconMotion = typeof PILL_ICON_MOTIONS[number]
+
+export const PILL_ICON_CLASS = 's-pill-icon inline-flex h-[var(--s-pill-icon-size)] w-[var(--s-pill-icon-size)] shrink-0 items-center justify-center'
+export const PILL_ICON_GRAPHIC_CLASS = 's-pill-icon-graphic h-full w-full'
+export const PILL_ICON_SPIN_CLASS = 'animate-spin'
+export const PILL_LABEL_CLASS = 's-pill-label min-w-0'
+export const PILL_LABEL_TRUNCATE_CLASS = 'overflow-hidden text-ellipsis whitespace-nowrap'
+
+export interface PillSurfaceContract {
+  kind: PillSurfaceKind
+  severity: PillSurfaceSeverity
+  size: PillSurfaceSize
+  dot: boolean
+  closable: boolean
+  disabled: boolean
+  truncate: boolean
+  maxWidth: PillSurfaceMaxWidth
+  iconMotion: PillSurfaceIconMotion
+}
+
+export interface PillSurfaceBindings {
+  'data-s-pill-surface': PillSurfaceKind
+  'data-s-feedback-tone': PillSurfaceSeverity
+  'data-s-pill-size': PillSurfaceSize
+  'data-s-pill-dot'?: 'true'
+  'data-s-pill-closable'?: 'true'
+  'data-s-pill-disabled'?: 'true'
+  'data-s-pill-truncate'?: 'true'
+  'data-s-pill-max-width'?: Exclude<PillSurfaceMaxWidth, 'none'>
+  'data-s-pill-icon-motion'?: Exclude<PillSurfaceIconMotion, 'static'>
+}
+
+/**
+ * Создаёт exact bindings единого pill/feedback presentation owner.
+ * Creates exact bindings for the canonical pill/feedback presentation owner.
+ */
+export function resolvePillSurfaceBindings(
+  owner: 'SBadge' | 'SChip',
+  contract: PillSurfaceContract,
+): PillSurfaceBindings {
+  const kind = validateExactString(owner, 'pill kind', contract.kind, PILL_KINDS)
+  const severity = validateExactString(owner, 'severity', contract.severity, PILL_SEVERITIES)
+  const size = validateExactString(owner, 'size', contract.size, PILL_SIZES)
+  const maxWidth = validateExactString(owner, 'maxWidth', contract.maxWidth, PILL_MAX_WIDTHS)
+  const iconMotion = validateExactString(owner, 'iconMotion', contract.iconMotion, PILL_ICON_MOTIONS)
+  const dot = validateBoolean(owner, 'dot', contract.dot)
+  const closable = validateBoolean(owner, 'closable', contract.closable)
+  const disabled = validateBoolean(owner, 'disabled', contract.disabled)
+  const truncate = validateBoolean(owner, 'truncate', contract.truncate)
+
+  if (kind === 'chip' && dot) {
+    throw new TypeError('SChip: dot presentation не поддерживается. / SChip: dot presentation is not supported.')
+  }
+  if (kind === 'badge' && closable) {
+    throw new TypeError('SBadge: closable presentation не поддерживается. / SBadge: closable presentation is not supported.')
+  }
+
+  return {
+    'data-s-pill-surface': kind,
+    'data-s-feedback-tone': severity,
+    'data-s-pill-size': size,
+    ...(dot ? { 'data-s-pill-dot': 'true' as const } : {}),
+    ...(closable ? { 'data-s-pill-closable': 'true' as const } : {}),
+    ...(disabled ? { 'data-s-pill-disabled': 'true' as const } : {}),
+    ...(truncate ? { 'data-s-pill-truncate': 'true' as const } : {}),
+    ...(maxWidth === 'none' ? {} : { 'data-s-pill-max-width': maxWidth }),
+    ...(iconMotion === 'static' ? {} : { 'data-s-pill-icon-motion': iconMotion }),
+  }
+}

package/src/internal/useBinaryInput.ts

@@ -0,0 +1,76 @@
+import { computed, onMounted, ref, useId, watch } from 'vue'
+
+import { resolveOptionalDomId } from './runtimeContract'
+
+export type BinaryInputOwner = 'SCheckbox' | 'SSwitch'
+
+export interface BinaryInputModelContract {
+  readonly modelValue: boolean
+  readonly readonly: boolean
+  readonly id?: string
+}
+
+export interface BinaryInputOptions {
+  readonly owner: BinaryInputOwner
+  readonly inputName: 'checkbox' | 'switch'
+  readonly props: BinaryInputModelContract
+  readonly indeterminate?: () => boolean
+  readonly emitUpdate: (value: boolean) => void
+  readonly emitClick: (event: MouseEvent) => void
+}
+
+/**
+ * Единый runtime owner controlled binary input: identity, value, readonly и native events.
+ * Canonical runtime owner for controlled binary input identity, value, readonly, and native events.
+ */
+export function useBinaryInput(options: BinaryInputOptions) {
+  const generatedInputId = useId()
+  const inputId = computed(() => resolveOptionalDomId(
+    options.owner,
+    'id',
+    options.props.id,
+    `s-${options.inputName}-${generatedInputId}`,
+  ))
+  const inputEl = ref<HTMLInputElement | null>(null)
+  const checkedValue = computed(() => {
+    if (typeof options.props.modelValue !== 'boolean') {
+      throw new TypeError(`${options.owner}: modelValue must be boolean`)
+    }
+    return options.props.modelValue
+  })
+
+  const applyIndeterminate = (): void => {
+    if (inputEl.value) {
+      inputEl.value.indeterminate = (options.indeterminate?.() ?? false) && !checkedValue.value
+    }
+  }
+  onMounted(applyIndeterminate)
+  watch([options.indeterminate ?? (() => false), checkedValue], applyIndeterminate)
+
+  const onChange = (event: Event): void => {
+    if (options.props.readonly) return
+    const target = event.currentTarget
+    if (!(target instanceof HTMLInputElement)) {
+      throw new TypeError(
+        `${options.owner}: change event owner must be the native ${options.inputName} input`,
+      )
+    }
+    options.emitUpdate(target.checked)
+  }
+
+  const onClick = (event: MouseEvent): void => {
+    if (options.props.readonly) {
+      event.preventDefault()
+      return
+    }
+    options.emitClick(event)
+  }
+
+  return {
+    checkedValue,
+    inputEl,
+    inputId,
+    onChange,
+    onClick,
+  } as const
+}

package/src/styles/style.css

@@ -26,6 +26,120 @@ body {
 }
 
 @layer components {
+  :where([data-s-feedback-tone="primary"]) {
+    --s-feedback-tone-background: var(--s-feedback-primary-background);
+    --s-feedback-tone-foreground: var(--s-feedback-primary-foreground);
+  }
+
+  :where([data-s-feedback-tone="secondary"]) {
+    --s-feedback-tone-background: var(--s-feedback-secondary-background);
+    --s-feedback-tone-foreground: var(--s-feedback-secondary-foreground);
+  }
+
+  :where([data-s-feedback-tone="success"]) {
+    --s-feedback-tone-background: var(--s-feedback-success-background);
+    --s-feedback-tone-foreground: var(--s-feedback-success-foreground);
+  }
+
+  :where([data-s-feedback-tone="info"]) {
+    --s-feedback-tone-background: var(--s-feedback-info-background);
+    --s-feedback-tone-foreground: var(--s-feedback-info-foreground);
+  }
+
+  :where([data-s-feedback-tone="warn"]) {
+    --s-feedback-tone-background: var(--s-feedback-warn-background);
+    --s-feedback-tone-foreground: var(--s-feedback-warn-foreground);
+  }
+
+  :where([data-s-feedback-tone="danger"]) {
+    --s-feedback-tone-background: var(--s-feedback-danger-background);
+    --s-feedback-tone-foreground: var(--s-feedback-danger-foreground);
+  }
+
+  :where([data-s-feedback-tone="contrast"]) {
+    --s-feedback-tone-background: var(--s-feedback-contrast-background);
+    --s-feedback-tone-foreground: var(--s-feedback-contrast-foreground);
+  }
+
+  :where([data-s-pill-surface]) {
+    display: inline-flex;
+    min-width: 0;
+    align-items: center;
+    border-radius: var(--s-feedback-pill-radius);
+    background-color: var(--s-feedback-tone-background);
+    color: var(--s-feedback-tone-foreground);
+  }
+
+  :where([data-s-pill-surface="badge"]) {
+    --s-pill-icon-size: 0.75rem;
+    gap: 0.25rem;
+    font-weight: 600;
+  }
+
+  :where([data-s-pill-surface="chip"]) {
+    --s-pill-icon-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  :where([data-s-pill-surface="badge"][data-s-pill-size="md"]) {
+    padding: 0.125rem 0.625rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
+  :where([data-s-pill-surface="badge"][data-s-pill-size="sm"]) {
+    padding: 0.125rem 0.5rem;
+    font-size: 0.6875rem;
+    line-height: 1rem;
+  }
+
+  :where([data-s-pill-surface="badge"][data-s-pill-size="xs"]) {
+    padding: 0 0.375rem;
+    font-size: 0.625rem;
+    line-height: 1rem;
+  }
+
+  :where([data-s-pill-surface="chip"][data-s-pill-size="md"]) {
+    min-height: 1.75rem;
+    gap: 0.375rem;
+    padding-inline: 0.625rem;
+    font-size: 0.75rem;
+  }
+
+  :where([data-s-pill-surface="chip"][data-s-pill-size="sm"]) {
+    min-height: 1.5rem;
+    gap: 0.25rem;
+    padding-inline: 0.5rem;
+    font-size: 0.6875rem;
+    line-height: 1rem;
+  }
+
+  :where([data-s-pill-surface="chip"][data-s-pill-size="md"][data-s-pill-closable="true"]) {
+    padding-right: 0.25rem;
+  }
+
+  :where([data-s-pill-surface="chip"][data-s-pill-size="sm"][data-s-pill-closable="true"]) {
+    padding-right: 0.125rem;
+  }
+
+  :where([data-s-pill-surface][data-s-pill-disabled="true"]) {
+    opacity: 0.6;
+  }
+
+  :where([data-s-pill-surface][data-s-pill-dot="true"]) {
+    width: 0.625rem;
+    height: 0.625rem;
+    padding: 0;
+  }
+
+  :where([data-s-pill-surface][data-s-pill-max-width="sm"]) {
+    max-width: 9.5rem;
+  }
+
+  :where([data-s-pill-surface][data-s-pill-max-width="md"]) {
+    max-width: 14rem;
+  }
+
   :where([data-s-field-surface]) {
     transition-property: color, background-color, border-color, box-shadow;
     transition-duration: var(--s-motion-standard);

package/src/styles/tokens.css

@@ -231,6 +231,7 @@
   /* Semantic feedback surfaces */
   --s-feedback-surface: color-mix(in srgb, var(--color-surface) 88%, transparent);
   --s-feedback-backdrop-blur: 1.5rem;
+  --s-feedback-pill-radius: var(--s-radius-pill);
   --s-floating-surface: var(--color-surface);
   --s-floating-foreground: var(--color-text);
   --s-floating-outline: color-mix(in srgb, var(--color-border) 44%, transparent);
@@ -607,6 +608,21 @@
   --s-progress-indicator-foreground-warn: var(--color-warn-600);
   --s-progress-indicator-foreground-danger: var(--color-danger-600);
 
+  --s-feedback-primary-background: var(--color-primary-100);
+  --s-feedback-primary-foreground: var(--color-primary-800);
+  --s-feedback-secondary-background: var(--color-surface-100);
+  --s-feedback-secondary-foreground: var(--color-surface-800);
+  --s-feedback-success-background: var(--color-success-100);
+  --s-feedback-success-foreground: var(--color-success-800);
+  --s-feedback-info-background: var(--color-info-100);
+  --s-feedback-info-foreground: var(--color-info-800);
+  --s-feedback-warn-background: var(--color-warn-100);
+  --s-feedback-warn-foreground: var(--color-warn-800);
+  --s-feedback-danger-background: var(--color-danger-100);
+  --s-feedback-danger-foreground: var(--color-danger-800);
+  --s-feedback-contrast-background: var(--color-surface-800);
+  --s-feedback-contrast-foreground: var(--color-surface-100);
+
   --s-graph-node-tone-neutral-fill: var(--color-surface-50);
   --s-graph-node-tone-neutral-border: var(--color-surface-500);
   --s-graph-node-tone-neutral-label: var(--color-surface-900);
@@ -742,6 +758,21 @@
   --s-progress-indicator-foreground-warn: var(--color-warn-300);
   --s-progress-indicator-foreground-danger: var(--color-danger-300);
 
+  --s-feedback-primary-background: var(--color-primary-950);
+  --s-feedback-primary-foreground: var(--color-primary-50);
+  --s-feedback-secondary-background: var(--color-surface-800);
+  --s-feedback-secondary-foreground: var(--color-surface-50);
+  --s-feedback-success-background: var(--color-success-950);
+  --s-feedback-success-foreground: var(--color-success-50);
+  --s-feedback-info-background: var(--color-info-950);
+  --s-feedback-info-foreground: var(--color-info-50);
+  --s-feedback-warn-background: var(--color-warn-950);
+  --s-feedback-warn-foreground: var(--color-warn-50);
+  --s-feedback-danger-background: var(--color-danger-950);
+  --s-feedback-danger-foreground: var(--color-danger-50);
+  --s-feedback-contrast-background: var(--color-surface-200);
+  --s-feedback-contrast-foreground: var(--color-surface-800);
+
   --s-graph-node-tone-neutral-fill: var(--color-surface-700);
   --s-graph-node-tone-neutral-border: var(--color-surface-300);
   --s-graph-node-tone-neutral-label: var(--color-surface-50);