@pgcorp/ui-kit 0.1.0

package/src/components/shared/controls/_internal/SInlineTokenSurface.vue

@@ -0,0 +1,224 @@
+<script lang="ts">
+import {
+  computed,
+  createTextVNode,
+  defineComponent,
+  h,
+  type ComponentPublicInstance,
+  type PropType,
+} from 'vue'
+
+import { X } from '../../../icons/sputnigUiIcons'
+import type { FieldSurfaceBindings } from '../../../../internal/fieldSurface'
+import type { InlineTokenEditorSegmentContract } from '../../../../internal/inlineTokenEditorContract'
+import type { OwnedAttributeBindings } from '../../../../internal/ownedAttrs'
+import { useInteractiveLeafRegistration } from '../../../../internal/passiveContentContract'
+import { validateBoundedInteger } from '../../../../internal/runtimeContract'
+import SButton, { type Props as SButtonProps } from '../SButton.vue'
+
+/** Текст визуального caret helper. / Visual caret-helper text. */
+export const INLINE_TOKEN_EDITOR_VISUAL_CARET_TEXT = '\u200B'
+
+/** Действие над одним token occurrence. / Action for one token occurrence. */
+export type InlineTokenAction = 'open' | 'remove'
+
+/** Точное событие token action. / Exact token-action event. */
+export interface InlineTokenActionEvent {
+  readonly action: InlineTokenAction
+  readonly occurrenceId: string
+  readonly id: string
+}
+
+/** Ref-контракт native editing surface. / Native editing-surface ref contract. */
+export type InlineTokenElementRef = (
+  target: Element | ComponentPublicInstance | null,
+  refs: Record<string, unknown>,
+) => void
+
+interface InlineTokenActionButtonBindings extends SButtonProps {
+  readonly 'aria-label': string
+  readonly title?: string
+  readonly onClick: (event: MouseEvent) => void
+  readonly onKeydown: (event: KeyboardEvent) => void
+}
+
+function resolveSurfaceStyle(
+  rowsInput: number,
+  maxRowsInput: number,
+  appearance: 'default' | 'ghost',
+): Record<string, string> {
+  const rows = validateBoundedInteger('SInlineTokenEditor', 'rows', rowsInput, { minimum: 1, maximum: 100 })
+  const maxRows = validateBoundedInteger('SInlineTokenEditor', 'maxRows', maxRowsInput, { minimum: 0, maximum: 100 })
+  if (maxRows !== 0 && maxRows < rows) {
+    throw new RangeError(`SInlineTokenEditor: maxRows должен быть 0 или >= rows (${rows}); получено ${maxRows}. / SInlineTokenEditor: maxRows must be 0 or >= rows (${rows}); received ${maxRows}.`)
+  }
+  const verticalPaddingRem = appearance === 'ghost' ? 0 : 1
+  const lineHeightRem = appearance === 'ghost' ? 0.875 * 1.45 : 0.875 * 1.5
+  const style: Record<string, string> = {
+    minHeight: `${lineHeightRem * rows + verticalPaddingRem}rem`,
+  }
+  if (maxRows > 0) {
+    style.maxHeight = `${lineHeightRem * maxRows + verticalPaddingRem}rem`
+    style.overflowY = 'auto'
+  }
+  else {
+    style.maxHeight = 'none'
+    style.overflowY = 'visible'
+  }
+  return style
+}
+
+/**
+ * Private leaf-владелец exact contenteditable DOM, ARIA, field surface и token actions.
+ * Private leaf owner of the exact contenteditable DOM, ARIA, field surface, and token actions.
+ */
+export default defineComponent({
+  name: 'SInlineTokenSurface',
+  inheritAttrs: false,
+  props: {
+    id: { type: String, required: true },
+    elementRef: { type: Function as PropType<InlineTokenElementRef>, required: true },
+    ownedAttributes: {
+      type: Object as PropType<OwnedAttributeBindings<'SInlineTokenEditor'>>,
+      required: true,
+    },
+    fieldBindings: { type: Object as PropType<FieldSurfaceBindings>, required: true },
+    segments: {
+      type: Array as PropType<readonly InlineTokenEditorSegmentContract[]>,
+      required: true,
+    },
+    trailingCaretHelper: { type: Boolean, required: true },
+    openDisabled: { type: Boolean, required: true },
+    removeDisabled: { type: Boolean, required: true },
+    appearance: { type: String as PropType<'default' | 'ghost'>, required: true },
+    invalid: { type: Boolean, required: true },
+    disabled: { type: Boolean, required: true },
+    readonly: { type: Boolean, required: true },
+    required: { type: Boolean, required: true },
+    rows: { type: Number, required: true },
+    maxRows: { type: Number, required: true },
+    placeholder: { type: String, default: undefined },
+    placeholderVisible: { type: Boolean, required: true },
+    labelledBy: { type: String, default: undefined },
+    describedBy: { type: String, default: undefined },
+  },
+  emits: {
+    beforeinput: (_event: InputEvent) => true,
+    input: (_event: Event) => true,
+    keydown: (_event: KeyboardEvent) => true,
+    keyup: (_event: KeyboardEvent) => true,
+    click: (_event: MouseEvent) => true,
+    paste: (_event: ClipboardEvent) => true,
+    tokenAction: (event: InlineTokenActionEvent) => (
+      (event.action === 'open' || event.action === 'remove')
+      && typeof event.occurrenceId === 'string'
+      && event.occurrenceId.length > 0
+      && typeof event.id === 'string'
+      && event.id.length > 0
+    ),
+  },
+  setup(props, { emit }) {
+    useInteractiveLeafRegistration({
+      owner: 'SInlineTokenEditor',
+      active: () => !props.disabled,
+    })
+    const surfaceStyle = computed(() => resolveSurfaceStyle(props.rows, props.maxRows, props.appearance))
+    const stopKeyPropagation = (event: KeyboardEvent): void => event.stopPropagation()
+    const emitTokenAction = (
+      event: MouseEvent,
+      action: InlineTokenAction,
+      segment: Extract<InlineTokenEditorSegmentContract, { kind: 'token' }>,
+    ): void => {
+      event.stopPropagation()
+      emit('tokenAction', { action, occurrenceId: segment.occurrenceId, id: segment.id })
+    }
+
+    const renderTokenAction = (
+      action: InlineTokenAction,
+      segment: Extract<InlineTokenEditorSegmentContract, { kind: 'token' }>,
+    ) => {
+      const bindings: InlineTokenActionButtonBindings = action === 'open'
+        ? {
+            label: segment.label,
+            'aria-label': segment.title ? `Открыть ${segment.title}` : `Открыть ${segment.label}`,
+            ...(segment.title === undefined ? {} : { title: segment.title }),
+            size: 'xs',
+            width: 'fit',
+            appearance: 'text',
+            shape: 'pill',
+            disabled: props.openDisabled,
+            onClick: (event) => emitTokenAction(event, action, segment),
+            onKeydown: stopKeyPropagation,
+          }
+        : {
+            leadingIcon: X,
+            'aria-label': `Убрать ${segment.label}`,
+            size: 'xs',
+            appearance: 'ghost',
+            shape: 'circle',
+            iconOnly: true,
+            disabled: props.removeDisabled,
+            onClick: (event) => emitTokenAction(event, action, segment),
+            onKeydown: stopKeyPropagation,
+          }
+      return h(SButton, { ...bindings, key: action })
+    }
+
+    return () => h('div', {
+      ...props.ownedAttributes,
+      ...props.fieldBindings,
+      id: props.id,
+      ref: props.elementRef,
+      class: 's-inline-token-editor',
+      'data-appearance': props.appearance,
+      'data-invalid': props.invalid || undefined,
+      'data-disabled': props.disabled || undefined,
+      'data-readonly': props.readonly || undefined,
+      'data-placeholder': props.placeholder,
+      'data-placeholder-visible': props.placeholderVisible ? 'true' : 'false',
+      'data-component': 's-inline-token-editor',
+      style: surfaceStyle.value,
+      role: 'textbox',
+      'aria-multiline': 'true',
+      contenteditable: props.disabled || props.readonly ? 'false' : 'true',
+      tabindex: props.disabled ? -1 : 0,
+      'aria-disabled': props.disabled || undefined,
+      'aria-invalid': props.invalid || undefined,
+      'aria-required': props.required || undefined,
+      'aria-readonly': props.readonly || undefined,
+      'aria-labelledby': props.labelledBy,
+      'aria-describedby': props.describedBy,
+      onBeforeinput: (event: InputEvent) => emit('beforeinput', event),
+      onInput: (event: Event) => emit('input', event),
+      onKeydown: (event: KeyboardEvent) => emit('keydown', event),
+      onKeyup: (event: KeyboardEvent) => emit('keyup', event),
+      onClick: (event: MouseEvent) => emit('click', event),
+      onPaste: (event: ClipboardEvent) => emit('paste', event),
+    }, [
+      ...props.segments.map((segment) => (
+        segment.kind === 'text'
+          ? createTextVNode(segment.text)
+          : h('span', {
+              key: `token:${segment.occurrenceId}`,
+              class: 's-inline-token-editor__token',
+              'data-testid': 's-inline-token-editor-token',
+              'data-segment-kind': 'token',
+              'data-segment-occurrence-id': segment.occurrenceId,
+              'data-segment-id': segment.id,
+              'data-segment-label': segment.label,
+              'data-segment-title': segment.title,
+              contenteditable: 'false',
+            }, [
+              renderTokenAction('open', segment),
+              renderTokenAction('remove', segment),
+            ])
+      )),
+      ...(props.trailingCaretHelper
+        ? [createTextVNode(INLINE_TOKEN_EDITOR_VISUAL_CARET_TEXT)]
+        : []),
+    ])
+  },
+})
+</script>
+
+<style lang="postcss" src="../SInlineTokenEditor.css" scoped></style>

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

@@ -0,0 +1,178 @@
+import type { Component } from 'vue'
+import { resolveLinkTarget } from '../../../internal/linkTarget'
+import {
+  validateBoolean,
+  validateExactString,
+  validateNonEmptyString,
+} from '../../../internal/runtimeContract'
+import type { BadgeSeverity } from '../data-display/SBadge.vue'
+import type { LinkDestination } from './SLink'
+
+export type SMenuItemLayout = 'row' | 'tile'
+export type SMenuCheckedState = boolean | 'mixed'
+export type SMenuActivationEvent = MouseEvent | KeyboardEvent
+
+interface SMenuLabelledEntry {
+  readonly id: string
+  readonly label: string
+  readonly icon?: Component
+  readonly disabled?: boolean
+  readonly shortcut?: string
+  readonly badge?: string | number
+  readonly badgeSeverity?: BadgeSeverity
+  readonly layout?: SMenuItemLayout
+}
+
+/** Команда без собственной navigation-state semantics. / A command without navigation-state semantics. */
+export interface SMenuAction extends SMenuLabelledEntry {
+  readonly kind: 'action'
+  readonly current?: boolean
+}
+
+/** Навигационное назначение с ровно одним href/to target. / A navigation destination with exactly one href/to target. */
+export type SMenuDestination = SMenuLabelledEntry & LinkDestination & {
+  readonly kind: 'destination'
+  readonly current?: boolean
+}
+
+/** Управляемый checkbox intent; parent обновляет checked-state. / A controlled checkbox intent; the parent updates checked state. */
+export interface SMenuCheckbox extends SMenuLabelledEntry {
+  readonly kind: 'checkbox'
+  readonly checked: SMenuCheckedState
+}
+
+/** Управляемый radio intent внутри стабильной groupId. / A controlled radio intent within a stable groupId. */
+export interface SMenuRadio extends SMenuLabelledEntry {
+  readonly kind: 'radio'
+  readonly groupId: string
+  readonly checked: boolean
+}
+
+/** Ветка вложенного меню; сама не является доменной командой. / A nested-menu branch; it is not itself a domain command. */
+export interface SMenuSubmenu extends SMenuLabelledEntry {
+  readonly kind: 'submenu'
+  readonly children: readonly SMenuEntry[]
+}
+
+export interface SMenuSeparatorEntry {
+  readonly kind: 'separator'
+  readonly id: string
+}
+
+export type SMenuSelectableEntry = SMenuAction | SMenuDestination | SMenuCheckbox | SMenuRadio
+export type SMenuInteractiveEntry = SMenuSelectableEntry | SMenuSubmenu
+export type SMenuEntry = SMenuInteractiveEntry | SMenuSeparatorEntry
+
+const ENTRY_KINDS = ['action', 'destination', 'checkbox', 'radio', 'separator', 'submenu'] as const
+const LAYOUTS = ['row', 'tile'] as const
+const BADGE_SEVERITIES = ['secondary', 'success', 'info', 'warn', 'danger', 'contrast'] as const
+
+const COMMON_KEYS = ['kind', 'id', 'label', 'icon', 'disabled', 'shortcut', 'badge', 'badgeSeverity', 'layout'] as const
+const KIND_KEYS = {
+  action: ['current'],
+  destination: ['href', 'to', 'target', 'rel', 'current'],
+  checkbox: ['checked'],
+  radio: ['groupId', 'checked'],
+  separator: [],
+  submenu: ['children'],
+} as const
+
+function assertRecord(value: unknown, coordinate: string): asserts value is Record<string, unknown> {
+  if (typeof value === 'object' && value !== null && !Array.isArray(value)) return
+  throw new TypeError(`SMenuSurface: ${coordinate} must be an object`)
+}
+
+function validateOptionalBoolean(entry: Record<string, unknown>, key: string, coordinate: string): void {
+  if (entry[key] !== undefined) validateBoolean('SMenuSurface', `${coordinate}.${key}`, entry[key])
+}
+
+function validateOptionalString(entry: Record<string, unknown>, key: string, coordinate: string): void {
+  if (entry[key] !== undefined) validateNonEmptyString('SMenuSurface', `${coordinate}.${key}`, entry[key])
+}
+
+function validateCommon(entry: Record<string, unknown>, coordinate: string): void {
+  validateNonEmptyString('SMenuSurface', `${coordinate}.id`, entry.id)
+  validateNonEmptyString('SMenuSurface', `${coordinate}.label`, entry.label)
+  validateOptionalBoolean(entry, 'disabled', coordinate)
+  validateOptionalString(entry, 'shortcut', coordinate)
+  if (entry.icon !== undefined && typeof entry.icon !== 'object' && typeof entry.icon !== 'function') {
+    throw new TypeError(`SMenuSurface: ${coordinate}.icon must be a Vue component`)
+  }
+  if (entry.badge !== undefined && (
+    (typeof entry.badge !== 'string' || entry.badge.length === 0)
+    && (typeof entry.badge !== 'number' || !Number.isFinite(entry.badge))
+  )) throw new TypeError(`SMenuSurface: ${coordinate}.badge must be a non-empty string or finite number`)
+  if (entry.badgeSeverity !== undefined) {
+    validateExactString('SMenuSurface', `${coordinate}.badgeSeverity`, entry.badgeSeverity, BADGE_SEVERITIES)
+  }
+  if (entry.layout !== undefined) validateExactString('SMenuSurface', `${coordinate}.layout`, entry.layout, LAYOUTS)
+}
+
+function assertExactKeys(entry: Record<string, unknown>, kind: typeof ENTRY_KINDS[number], coordinate: string): void {
+  const allowed = new Set<string>(kind === 'separator'
+    ? ['kind', 'id']
+    : [...COMMON_KEYS, ...KIND_KEYS[kind]])
+  for (const key of Object.keys(entry)) {
+    if (!allowed.has(key)) throw new TypeError(`SMenuSurface: ${coordinate} has unsupported field '${key}'`)
+  }
+}
+
+function validateList(
+  value: unknown,
+  coordinate: string,
+  ids: Set<string>,
+): asserts value is readonly SMenuEntry[] {
+  if (!Array.isArray(value)) throw new TypeError(`SMenuSurface: ${coordinate} must be an array`)
+  if (coordinate !== 'items' && value.length === 0) {
+    throw new TypeError(`SMenuSurface: ${coordinate} children must be a non-empty array`)
+  }
+  const checkedRadioGroups = new Set<string>()
+  let previousSeparator = false
+  for (const [index, candidate] of value.entries()) {
+    const entryCoordinate = `${coordinate}[${index}]`
+    assertRecord(candidate, entryCoordinate)
+    const kind = validateExactString('SMenuSurface', `${entryCoordinate}.kind`, candidate.kind, ENTRY_KINDS)
+    assertExactKeys(candidate, kind, entryCoordinate)
+    const id = validateNonEmptyString('SMenuSurface', `${entryCoordinate}.id`, candidate.id)
+    if (ids.has(id)) throw new TypeError(`SMenuSurface: duplicate entry id '${id}'`)
+    ids.add(id)
+    if (kind === 'separator') {
+      if (index === 0 || index === value.length - 1 || previousSeparator) {
+        throw new TypeError('SMenuSurface: separator cannot be first, last, or consecutive')
+      }
+      previousSeparator = true
+      continue
+    }
+    previousSeparator = false
+    validateCommon(candidate, entryCoordinate)
+    if (kind === 'action' || kind === 'destination') validateOptionalBoolean(candidate, 'current', entryCoordinate)
+    if (kind === 'destination') {
+      resolveLinkTarget({
+        owner: `SMenuSurface: ${entryCoordinate}`,
+        href: candidate.href,
+        to: candidate.to,
+        target: candidate.target,
+        rel: candidate.rel,
+      })
+    }
+    if (kind === 'checkbox') {
+      if (candidate.checked !== 'mixed' && typeof candidate.checked !== 'boolean') {
+        throw new TypeError(`SMenuSurface: ${entryCoordinate}.checked must be a boolean or "mixed"`)
+      }
+    }
+    if (kind === 'radio') {
+      const groupId = validateNonEmptyString('SMenuSurface', `${entryCoordinate}.groupId`, candidate.groupId)
+      const checked = validateBoolean('SMenuSurface', `${entryCoordinate}.checked`, candidate.checked)
+      if (checked && checkedRadioGroups.has(groupId)) {
+        throw new TypeError(`SMenuSurface: radio group '${groupId}' has more than one checked entry`)
+      }
+      if (checked) checkedRadioGroups.add(groupId)
+    }
+    if (kind === 'submenu') validateList(candidate.children, `${entryCoordinate}.children`, ids)
+  }
+}
+
+/** Проверяет полный recursive discriminated menu contract без coercion/fallback. / Validates the complete recursive discriminated menu contract without coercion/fallback. */
+export function validateSMenuEntries(value: unknown): asserts value is readonly SMenuEntry[] {
+  validateList(value, 'items', new Set<string>())
+}

package/src/components/shared/data-display/SActionCard.css

@@ -0,0 +1,6 @@
+@reference "../../../styles/reference.css";
+
+.s-action-card { @apply grid min-h-0 min-w-0 items-start gap-2; grid-template-columns: minmax(0, 1fr) auto; }
+.s-action-card[data-fill='container'] { @apply h-full w-full; }
+.s-action-card__content { @apply flex min-h-0 min-w-0 w-full flex-1 flex-col; }
+.s-action-card__actions { @apply flex shrink-0 items-center gap-1; }

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { InteractiveSurfaceContract, InteractiveSurfaceDensity, InteractiveSurfaceFill, InteractiveSurfacePadding, InteractiveSurfaceRadius, InteractiveSurfaceTone } from '../controls/SInteractiveSurface.vue'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import SInteractiveSurface from '../controls/SInteractiveSurface.vue'
+
+defineOptions({ inheritAttrs: false })
+
+export interface Props {
+  surface: InteractiveSurfaceContract
+  selected?: boolean
+  tone?: InteractiveSurfaceTone
+  density?: InteractiveSurfaceDensity
+  padding?: InteractiveSurfacePadding
+  radius?: InteractiveSurfaceRadius
+  fill?: InteractiveSurfaceFill
+}
+
+withDefaults(defineProps<Props>(), {
+  selected: false,
+  tone: 'default',
+  density: 'comfortable',
+  padding: 'md',
+  radius: 'lg',
+  fill: 'content',
+})
+
+const emit = defineEmits<{ activate: [event: MouseEvent] }>()
+const ownedAttrs = useOwnedAttrs({ component: 'SActionCard', owner: 'action card root' })
+</script>
+
+<template>
+  <div v-bind="ownedAttrs.bindings()" class="s-action-card" :data-has-actions="Boolean($slots.actions) || undefined" :data-fill="fill" :data-mode="surface.mode">
+    <SInteractiveSurface
+      :surface="surface"
+      :selected="selected"
+      :tone="tone"
+      :density="density"
+      :padding="padding"
+      :radius="radius"
+      :fill="fill"
+      @activate="emit('activate', $event)"
+    >
+      <div class="s-action-card__content"><slot /></div>
+    </SInteractiveSurface>
+    <div v-if="$slots.actions" class="s-action-card__actions"><slot name="actions" /></div>
+  </div>
+</template>
+
+<style lang="postcss" src="./SActionCard.css" scoped></style>

package/src/components/shared/data-display/SActionList.css

@@ -0,0 +1,15 @@
+@reference "../../../styles/reference.css";
+
+.s-action-list {
+  @apply grid min-w-0 gap-1 overflow-y-auto rounded-md border border-surface-200 p-1 dark:border-surface-700;
+  container-type: inline-size;
+  overscroll-behavior: contain;
+}
+
+.s-action-list[data-surface='plain'] {
+  @apply rounded-none border-0 p-0;
+}
+
+.s-action-list[data-max-height='sm'] { max-block-size: var(--s-scroll-viewport-max-block-size-sm); }
+.s-action-list[data-max-height='md'] { max-block-size: var(--s-scroll-viewport-max-block-size-md); }
+.s-action-list[data-max-height='lg'] { max-block-size: var(--s-scroll-viewport-max-block-size-lg); }

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import {
+  validateScrollableViewportMaxBlockSize,
+  type ScrollableViewportMaxBlockSize,
+} from '../../../internal/semanticSizing'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<{
+  accessibleLabel: string
+  maxHeight?: ScrollableViewportMaxBlockSize
+  surface?: 'bordered' | 'plain'
+}>(), {
+  maxHeight: 'none',
+  surface: 'bordered',
+})
+
+const ownedAttrs = useOwnedAttrs({ component: 'SActionList', owner: 'action list root' })
+const validatedMaxHeight = computed(() => validateScrollableViewportMaxBlockSize(
+  'SActionList',
+  'maxHeight',
+  props.maxHeight,
+))
+</script>
+
+<template>
+  <div v-bind="ownedAttrs.bindings()" class="s-action-list" :data-max-height="validatedMaxHeight" :data-surface="surface" role="list" :aria-label="accessibleLabel">
+    <slot />
+  </div>
+</template>
+
+<style lang="postcss" src="./SActionList.css" scoped></style>

package/src/components/shared/data-display/SActionListItem.css

@@ -0,0 +1,114 @@
+@reference "../../../styles/reference.css";
+
+.s-action-list-item {
+  @apply grid min-h-12 min-w-0 items-center gap-2;
+  height: max-content;
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.s-action-list-item[data-height-mode='fill'] {
+  @apply h-full overflow-hidden;
+}
+
+.s-action-list-item[data-height-mode='fill'] .s-action-list-item__main--static {
+  @apply h-full min-h-0;
+}
+
+.s-action-list-item__main {
+  @apply flex min-h-11 min-w-0 flex-1 items-center gap-3 rounded-md px-3 py-2 text-left;
+  padding-left: calc(0.75rem + var(--s-action-list-item-indent));
+}
+
+.s-action-list-item__main--static {
+  @apply cursor-default;
+}
+
+.s-action-list-item__icon {
+  @apply grid h-9 w-9 shrink-0 place-items-center rounded-md bg-primary-100 text-primary-700;
+  @apply dark:bg-primary-900 dark:text-primary-200;
+}
+
+.s-action-list-item[data-tone='success'] .s-action-list-item__icon {
+  @apply bg-success-100 text-success-700 dark:bg-success-900 dark:text-success-200;
+}
+
+.s-action-list-item[data-tone='danger'] .s-action-list-item__icon {
+  @apply bg-danger-100 text-danger-700 dark:bg-danger-900 dark:text-danger-200;
+}
+
+.s-action-list-item__icon svg {
+  @apply h-5 w-5;
+}
+
+.s-action-list-item__copy {
+  @apply grid min-w-0 flex-1 gap-0.5;
+}
+
+.s-action-list-item__title,
+.s-action-list-item__description,
+.s-action-list-item__detail {
+  @apply truncate;
+}
+
+.s-action-list-item__title {
+  @apply text-sm font-semibold text-surface-900 dark:text-surface-50;
+}
+
+.s-action-list-item[data-title-weight='regular'] .s-action-list-item__title {
+  @apply font-normal;
+}
+
+.s-action-list-item[data-title-presentation='code'] .s-action-list-item__title {
+  @apply font-mono;
+}
+
+.s-action-list-item__description {
+  @apply text-xs text-surface-600 dark:text-surface-400;
+}
+
+.s-action-list-item__detail {
+  @apply line-clamp-2 whitespace-normal text-surface-600 dark:text-surface-300;
+}
+
+.s-action-list-item[data-detail-overflow='wrap'] .s-action-list-item__detail {
+  @apply line-clamp-none;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.s-action-list-item[data-detail-presentation='code'] .s-action-list-item__detail {
+  @apply rounded-md bg-surface-100 p-2 font-mono text-xs dark:bg-surface-800;
+  white-space: pre-wrap;
+}
+
+.s-action-list-item__trailing {
+  @apply flex shrink-0 items-center gap-2 pr-2;
+}
+
+.s-action-list-item__trailing-icon {
+  @apply h-4 w-4 shrink-0 text-surface-400;
+}
+
+.s-action-list-item[data-density='compact'] { @apply min-h-10 gap-1; }
+.s-action-list-item[data-density='compact'] .s-action-list-item__main { @apply min-h-9 gap-2 px-2 py-1.5; }
+.s-action-list-item[data-density='compact'] .s-action-list-item__icon { @apply h-7 w-7; }
+
+.s-action-list-item[data-trailing-layout='stacked'] {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.s-action-list-item[data-trailing-layout='stacked'] .s-action-list-item__trailing {
+  @apply w-full justify-end pb-2 pr-2;
+  padding-left: calc(3.5rem + var(--s-action-list-item-indent));
+}
+
+@container (max-width: 32rem) {
+  .s-action-list-item[data-trailing-layout='responsive'] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .s-action-list-item[data-trailing-layout='responsive'] .s-action-list-item__trailing {
+    @apply w-full justify-end pb-2 pr-2;
+    padding-left: calc(3.5rem + var(--s-action-list-item-indent));
+  }
+}