@pgcorp/ui-kit 0.5.0 → 0.7.0

package/src/internal/pillSurface.ts

@@ -0,0 +1,93 @@
+import {
+  validateBoolean,
+  validateExactString,
+} from './runtimeContract'
+import { resolveSemanticToneBinding } from './semanticTone'
+
+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-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 toneBinding = resolveSemanticToneBinding(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,
+    ...toneBinding,
+    '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/semanticTone.ts

@@ -0,0 +1,23 @@
+import { validateExactString } from './runtimeContract'
+
+/** Единственный internal DOM marker для component-owned visual tone. */
+export const SEMANTIC_TONE_ATTRIBUTE = 'data-s-tone' as const
+
+export type SemanticToneBinding<Tone extends string> = Readonly<{
+  'data-s-tone': Tone
+}>
+
+/**
+ * Проверяет component-specific tone vocabulary и создаёт единый namespaced DOM binding.
+ * Validates a component-specific tone vocabulary and creates the canonical namespaced DOM binding.
+ */
+export function resolveSemanticToneBinding<const Tones extends readonly string[]>(
+  owner: string,
+  coordinate: string,
+  value: unknown,
+  tones: Tones,
+): SemanticToneBinding<Tones[number]> {
+  return {
+    [SEMANTIC_TONE_ATTRIBUTE]: validateExactString(owner, coordinate, value, tones),
+  }
+}

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-tone="primary"]) {
+    --s-feedback-tone-background: var(--s-feedback-primary-background);
+    --s-feedback-tone-foreground: var(--s-feedback-primary-foreground);
+  }
+
+  :where([data-s-tone="secondary"]) {
+    --s-feedback-tone-background: var(--s-feedback-secondary-background);
+    --s-feedback-tone-foreground: var(--s-feedback-secondary-foreground);
+  }
+
+  :where([data-s-tone="success"]) {
+    --s-feedback-tone-background: var(--s-feedback-success-background);
+    --s-feedback-tone-foreground: var(--s-feedback-success-foreground);
+  }
+
+  :where([data-s-tone="info"]) {
+    --s-feedback-tone-background: var(--s-feedback-info-background);
+    --s-feedback-tone-foreground: var(--s-feedback-info-foreground);
+  }
+
+  :where([data-s-tone="warn"]) {
+    --s-feedback-tone-background: var(--s-feedback-warn-background);
+    --s-feedback-tone-foreground: var(--s-feedback-warn-foreground);
+  }
+
+  :where([data-s-tone="danger"]) {
+    --s-feedback-tone-background: var(--s-feedback-danger-background);
+    --s-feedback-tone-foreground: var(--s-feedback-danger-foreground);
+  }
+
+  :where([data-s-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);

package/src/components/shared/containers/SPageHeader.css

@@ -1,82 +0,0 @@
-@reference "../../../styles/reference.css";
-
-.s-page-header {
-  @apply flex min-w-0 items-start justify-between gap-4 border border-surface-200 bg-surface-0 p-5 shadow-sm;
-  @apply dark:border-surface-700 dark:bg-surface-900;
-  border-radius: var(--radius-sm);
-}
-
-.s-page-header[data-appearance='plain'] {
-  @apply border-x-0 border-t-0 bg-transparent px-0 pt-0 shadow-none dark:bg-transparent;
-  border-radius: 0;
-}
-
-.s-page-header[data-size='compact'] {
-  @apply p-4;
-}
-
-.s-page-header[data-appearance='plain'][data-size='compact'] {
-  @apply px-0 pt-0;
-}
-
-.s-page-header[data-appearance='bare'] {
-  @apply border-0 bg-transparent p-0 shadow-none dark:bg-transparent;
-  border-radius: 0;
-}
-
-.s-page-header__copy {
-  @apply min-w-0;
-}
-
-.s-page-header__eyebrow {
-  @apply text-xs font-medium uppercase text-surface-500 dark:text-surface-400;
-}
-
-.s-page-header__title {
-  @apply m-0 text-2xl font-semibold leading-tight text-surface-900 dark:text-surface-50;
-}
-
-.s-page-header__title[data-presentation='assistive'] {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
-}
-
-.s-page-header[data-size='compact'] .s-page-header__title {
-  @apply text-xl;
-}
-
-.s-page-header__eyebrow + .s-page-header__title {
-  @apply mt-1;
-}
-
-.s-page-header__description {
-  @apply mt-2 max-w-4xl text-sm text-surface-500 dark:text-surface-400;
-}
-
-.s-page-header__actions {
-  @apply flex shrink-0 flex-wrap items-center justify-end gap-2;
-}
-
-.s-page-header[data-actions-layout='stacked'] {
-  @apply flex-col;
-}
-
-.s-page-header[data-actions-layout='stacked'] .s-page-header__actions {
-  @apply w-full justify-start;
-}
-
-@media (max-width: 639px) {
-  .s-page-header[data-actions-layout='responsive'] {
-    @apply flex-col;
-  }
-
-  .s-page-header[data-actions-layout='responsive'] .s-page-header__actions {
-    @apply w-full justify-start;
-  }
-}

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

@@ -1,73 +0,0 @@
-@reference "../../../styles/reference.css";
-
-.s-badge {
-  @apply inline-flex items-center gap-1 rounded-full font-semibold;
-}
-
-.s-badge[data-size='md'] {
-  @apply px-2.5 py-0.5 text-xs;
-}
-
-.s-badge[data-size='sm'] {
-  @apply px-2 py-0.5 text-[11px] leading-4;
-}
-
-.s-badge[data-size='xs'] {
-  @apply px-1.5 py-0 text-[10px] leading-4;
-}
-
-.s-badge__icon {
-  @apply inline-flex h-3 w-3 shrink-0 items-center justify-center;
-}
-
-.s-badge__icon-graphic {
-  @apply h-full w-full;
-}
-
-.s-badge[data-icon-motion='spin'] .s-badge__icon-graphic {
-  @apply animate-spin;
-}
-
-.s-badge__label {
-  @apply min-w-0;
-}
-
-.s-badge[data-max-width='sm'] {
-  max-width: 9.5rem;
-}
-
-.s-badge[data-max-width='md'] {
-  max-width: 14rem;
-}
-
-.s-badge[data-truncate='true'] .s-badge__label {
-  @apply overflow-hidden text-ellipsis whitespace-nowrap;
-}
-
-/* Severity Colors */
-.s-badge[data-severity='primary'] {
-  @apply bg-primary-100 text-primary-800 dark:bg-primary-950 dark:text-primary-50;
-}
-.s-badge[data-severity='secondary'] {
-  @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-50;
-}
-.s-badge[data-severity='success'] {
-  @apply bg-success-100 text-success-800 dark:bg-success-950 dark:text-success-50;
-}
-.s-badge[data-severity='info'] {
-  @apply bg-info-100 text-info-800 dark:bg-info-950 dark:text-info-50;
-}
-.s-badge[data-severity='warn'] {
-  @apply bg-warn-100 text-warn-800 dark:bg-warn-950 dark:text-warn-50;
-}
-.s-badge[data-severity='danger'] {
-  @apply bg-danger-100 text-danger-800 dark:bg-danger-950 dark:text-danger-50;
-}
-.s-badge[data-severity='contrast'] {
-  @apply bg-surface-800 text-surface-100 dark:bg-surface-200 dark:text-surface-800;
-}
-
-/* Dot Mode */
-.s-badge.s-badge--dot {
-  @apply w-2.5 h-2.5 p-0;
-}

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

@@ -1,59 +0,0 @@
-@reference "../../../styles/reference.css";
-
-.s-chip {
-  @apply inline-flex min-w-0 items-center rounded-full font-medium;
-}
-
-.s-chip[data-size='md'] {
-  @apply min-h-7 gap-1.5 px-2.5 text-xs;
-}
-
-.s-chip[data-size='md'][data-closable='true'] {
-  @apply pr-1;
-}
-
-.s-chip[data-size='sm'] {
-  @apply min-h-6 gap-1 px-2 text-[11px] leading-4;
-}
-
-.s-chip[data-size='sm'][data-closable='true'] {
-  @apply pr-0.5;
-}
-
-.s-chip__icon {
-  @apply inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center;
-}
-
-.s-chip__icon-graphic {
-  @apply h-full w-full;
-}
-
-.s-chip__label {
-  @apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap;
-}
-
-.s-chip[data-disabled='true'] {
-  @apply opacity-60;
-}
-
-.s-chip[data-severity='primary'] {
-  @apply bg-primary-100 text-primary-800 dark:bg-primary-950 dark:text-primary-50;
-}
-.s-chip[data-severity='secondary'] {
-  @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-50;
-}
-.s-chip[data-severity='success'] {
-  @apply bg-success-100 text-success-800 dark:bg-success-950 dark:text-success-50;
-}
-.s-chip[data-severity='info'] {
-  @apply bg-info-100 text-info-800 dark:bg-info-950 dark:text-info-50;
-}
-.s-chip[data-severity='warn'] {
-  @apply bg-warn-100 text-warn-800 dark:bg-warn-950 dark:text-warn-50;
-}
-.s-chip[data-severity='danger'] {
-  @apply bg-danger-100 text-danger-800 dark:bg-danger-950 dark:text-danger-50;
-}
-.s-chip[data-severity='contrast'] {
-  @apply bg-surface-800 text-surface-100 dark:bg-surface-200 dark:text-surface-800;
-}

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

@@ -1,84 +0,0 @@
-@reference "../../../styles/reference.css";
-
-.s-section-header {
-  @apply flex min-w-0 flex-wrap items-start justify-between gap-3;
-}
-
-.s-section-header[data-spacing-after='sm'] {
-  @apply mb-2;
-}
-
-.s-section-header[data-spacing-after='md'] {
-  @apply mb-3;
-}
-
-.s-section-header[data-divider='true'] {
-  @apply border-b border-surface-200 pb-3 dark:border-surface-700;
-}
-
-.s-section-header[data-padding='sm'] {
-  @apply p-2;
-}
-
-.s-section-header[data-padding='md'] {
-  @apply p-4;
-}
-
-.s-section-header[data-divider='true'][data-padding='sm'] {
-  @apply pb-2;
-}
-
-.s-section-header[data-divider='true'][data-padding='md'] {
-  @apply pb-4;
-}
-
-.s-section-header__copy {
-  @apply min-w-0 flex-1;
-}
-
-.s-section-header__eyebrow {
-  @apply text-xs font-semibold uppercase text-surface-500 dark:text-surface-400;
-}
-
-.s-section-header__title {
-  @apply m-0 break-words text-base font-semibold text-surface-900 dark:text-surface-50;
-}
-
-.s-section-header[data-size='sm'] .s-section-header__title {
-  @apply text-sm;
-}
-
-.s-section-header[data-variant='display'] .s-section-header__title {
-  @apply text-xl font-semibold uppercase tracking-[0.22em] text-surface-700 dark:text-surface-200;
-}
-
-.s-section-header__eyebrow + .s-section-header__title {
-  @apply mt-1;
-}
-
-.s-section-header__description,
-.s-section-header__meta {
-  @apply mt-1 min-w-0 break-words text-xs text-surface-500 dark:text-surface-400;
-  overflow-wrap: anywhere;
-}
-
-.s-section-header__trailing {
-  @apply flex min-w-0 flex-wrap items-center justify-end gap-2;
-}
-
-.s-section-header__badges,
-.s-section-header__actions {
-  @apply flex min-w-0 flex-wrap items-center justify-end gap-2;
-}
-
-.s-section-header[data-trailing-layout='stacked'] .s-section-header__trailing,
-.s-section-header[data-trailing-layout='stacked'] .s-section-header__actions {
-  @apply w-full justify-start;
-}
-
-@media (max-width: 639px) {
-  .s-section-header[data-trailing-layout='responsive'] .s-section-header__trailing,
-  .s-section-header[data-trailing-layout='responsive'] .s-section-header__actions {
-    @apply w-full justify-start;
-  }
-}