@datatechsolutions/tympan 0.3.0 → 0.4.0

package/src/components/environment-banner/EnvironmentBanner.css

@@ -0,0 +1,46 @@
+/* EnvironmentBanner (spec: wave-2/environment-banner.md; design direction §2.3 pending tone). */
+@layer tympan.components {
+  .ty-env-banner {
+    position: relative;
+    z-index: calc(var(--ty-z-sticky) + 1);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ty-space-2) var(--ty-space-4);
+    padding: var(--ty-space-2) var(--ty-space-4);
+    border-block-end: 1px solid var(--ty-warning);
+    background: var(--ty-warning-soft);
+    color: var(--ty-on-warning-soft);
+    font-size: var(--ty-font-size-meta);
+    line-height: var(--ty-font-line-height-meta);
+  }
+  .ty-env-banner__message {
+    margin: 0;
+  }
+  .ty-env-banner__facts {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ty-space-1) var(--ty-space-4);
+    margin: 0;
+  }
+  .ty-env-banner__fact {
+    display: flex;
+    gap: var(--ty-space-1);
+  }
+  .ty-env-banner__fact dt {
+    font-weight: var(--ty-font-weight-semibold);
+  }
+  .ty-env-banner__fact dt::after {
+    content: ':';
+  }
+  .ty-env-banner__fact dd {
+    margin: 0;
+    font-family: var(--ty-font-mono);
+    overflow-wrap: anywhere;
+  }
+  @media (forced-colors: active) {
+    .ty-env-banner {
+      border: 1px solid CanvasText;
+    }
+  }
+}

package/src/components/environment-banner/EnvironmentBanner.rtl.test.tsx

@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { inRtl } from '../../../test/rtl-b'
+import { EnvironmentBanner } from './EnvironmentBanner'
+
+describe('EnvironmentBanner in right-to-left locales', () => {
+  it('renders inside an Arabic right-to-left subtree and passes axe', async () => {
+    const { container } = inRtl(<EnvironmentBanner environment="development" facts={{ appName: 'platform', port: 3200 }} />)
+    expect(container.querySelector('[dir="rtl"]')).not.toBeNull()
+    expect(container.textContent).toMatch(/3200|٣٢٠٠/)
+    await expectNoAxeViolations(document.body, ['region'])
+  })
+})

package/src/components/environment-banner/EnvironmentBanner.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { ThemeScope } from '../../internal/ThemeScope'
+import { EnvironmentBanner } from './EnvironmentBanner'
+
+describe('EnvironmentBanner', () => {
+  it('renders nothing in production without forceShow', () => {
+    const { container } = render(<EnvironmentBanner environment="production" />)
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('renders with the environment word when forced', () => {
+    render(<EnvironmentBanner environment="production" forceShow environmentWord="Development" />)
+    expect(screen.getByRole('region', { name: 'Environment' })).toHaveTextContent('Development')
+  })
+
+  it('shows user e-mail and role as text', () => {
+    render(<EnvironmentBanner environment="development" user={{ email: 'dev@example.org', role: 'Owner' }} facts={{ appName: 'platform', port: 3200 }} />)
+    expect(screen.getByText('dev@example.org')).toBeInTheDocument()
+    expect(screen.getByText('Owner')).toBeInTheDocument()
+    expect(screen.getByText('3200')).toBeInTheDocument()
+  })
+
+  it('renders nothing and does not throw when the host config is unavailable', () => {
+    const { container } = render(
+      <EnvironmentBanner
+        environment={() => {
+          throw new Error('no config')
+        }}
+      />,
+    )
+    expect(container).toBeEmptyDOMElement()
+    const { container: c2 } = render(<EnvironmentBanner environment={null} />)
+    expect(c2).toBeEmptyDOMElement()
+  })
+
+  it('has no axe violations, light and dark', async () => {
+    const { container } = render(
+      <>
+        <ThemeScope scheme="light">
+          <EnvironmentBanner environment="development" texts={{ label: 'Environment light' }} user={{ email: 'a@b.c', role: 'Owner' }} />
+        </ThemeScope>
+        <ThemeScope scheme="dark">
+          <EnvironmentBanner environment="test" texts={{ label: 'Environment dark' }} />
+        </ThemeScope>
+      </>,
+    )
+    await expectNoAxeViolations(container)
+  })
+})

package/src/components/environment-banner/EnvironmentBanner.tsx

@@ -0,0 +1,75 @@
+import type { ReactNode } from 'react'
+import type { AuthBrandMessages } from '../../internal/messages/auth-brand'
+import { useMessages } from '../../internal/provider'
+import { Tag } from '../tag/Tag'
+
+export interface EnvironmentFacts {
+  appName?: string
+  port?: string | number
+  apiBase?: string
+}
+
+export interface EnvironmentBannerProps {
+  /**
+   * Environment name from the host config, or a function reading it. `null`,
+   * a production name, or a failing reader render nothing.
+   */
+  environment?: string | null | (() => string | null | undefined)
+  /** Shows the banner whatever the environment (stories, visual tests). */
+  forceShow?: boolean
+  user?: { email?: string; role?: string }
+  facts?: EnvironmentFacts
+  /** Word shown in the tag; the environment name when omitted. */
+  environmentWord?: string
+  texts?: Partial<Pick<AuthBrandMessages['environment'], 'label' | 'message'>>
+  /** Extra controls (for example a GlassCheckToggle). */
+  children?: ReactNode
+  className?: string
+}
+
+function readEnvironment(source: EnvironmentBannerProps['environment']): string | null {
+  try {
+    const value = typeof source === 'function' ? source() : source
+    return value ? String(value) : null
+  } catch {
+    return null
+  }
+}
+
+const PRODUCTION = /^(prod|production|live)$/i
+
+/** Strip naming the non-production environment and its facts (spec: wave-2/environment-banner.md). */
+export function EnvironmentBanner(props: EnvironmentBannerProps) {
+  const copy = useMessages().environment
+  const env = readEnvironment(props.environment)
+  const show = props.forceShow || (env !== null && !PRODUCTION.test(env.trim()))
+  if (!show) return null
+
+  const t = { ...copy, ...props.texts }
+  const rows: Array<[string, string | number | undefined]> = [
+    [copy.appName, props.facts?.appName],
+    [copy.port, props.facts?.port],
+    [copy.apiBase, props.facts?.apiBase],
+    [copy.email, props.user?.email],
+    [copy.role, props.user?.role],
+  ]
+  const present = rows.filter((r): r is [string, string | number] => r[1] !== undefined && r[1] !== '')
+
+  return (
+    <section className={props.className ? `ty-env-banner ${props.className}` : 'ty-env-banner'} aria-label={t.label}>
+      <Tag>{props.environmentWord ?? env ?? t.label}</Tag>
+      <p className="ty-env-banner__message">{t.message}</p>
+      {present.length ? (
+        <dl className="ty-env-banner__facts">
+          {present.map(([term, value]) => (
+            <div key={term} className="ty-env-banner__fact">
+              <dt>{term}</dt>
+              <dd>{value}</dd>
+            </div>
+          ))}
+        </dl>
+      ) : null}
+      {props.children}
+    </section>
+  )
+}

package/src/components/error-state/ErrorState.css

@@ -0,0 +1,113 @@
+/* ErrorState (spec: wave-1/error-state.md; design direction §2.3, §2.10, §2.12). */
+@layer tympan.components {
+  .ty-error {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--ty-space-2);
+    max-inline-size: calc(var(--ty-measure-prose) * 1ch);
+    padding-block: var(--ty-space-6);
+  }
+  .ty-error[data-scope='block'] {
+    padding-block: var(--ty-space-4);
+  }
+
+  .ty-error__icon {
+    inline-size: var(--ty-space-5);
+    block-size: var(--ty-space-5);
+    color: var(--ty-danger);
+  }
+
+  .ty-error__title {
+    margin: 0;
+    color: var(--ty-ink);
+    font-family: var(--ty-font-serif);
+    font-size: var(--ty-font-size-h2);
+    font-weight: var(--ty-font-weight-semibold);
+    line-height: var(--ty-font-line-height-h2);
+    outline: none;
+  }
+  .ty-error[data-scope='block'] .ty-error__title {
+    font-size: var(--ty-font-size-h3);
+    line-height: var(--ty-font-line-height-h3);
+  }
+  .ty-error__title:focus-visible {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 2px;
+  }
+
+  .ty-error__message {
+    margin: 0;
+    color: var(--ty-ink-2);
+  }
+
+  .ty-error__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ty-space-3);
+    margin: 0;
+    color: var(--ty-ink-3);
+    font-size: var(--ty-font-size-meta);
+    line-height: var(--ty-font-line-height-meta);
+  }
+  .ty-error__type {
+    font-family: var(--ty-font-mono);
+  }
+
+  .ty-error__details {
+    inline-size: 100%;
+  }
+  .ty-error__details .ty-error__chevron {
+    transition: transform var(--ty-dur-quick) var(--ty-ease);
+  }
+  .ty-error__details[data-expanded] .ty-error__chevron {
+    transform: rotate(180deg);
+  }
+  .ty-error__details-text {
+    overflow: auto;
+    margin: var(--ty-space-2) 0 0;
+    padding: var(--ty-space-3);
+    border-radius: var(--ty-radius-control);
+    background: var(--ty-surface-sunken);
+    color: var(--ty-on-surface-sunken);
+    font-family: var(--ty-font-mono);
+    font-size: var(--ty-font-size-meta);
+    line-height: var(--ty-font-line-height-meta);
+    white-space: pre-wrap;
+  }
+
+  .ty-error__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ty-space-3);
+    margin-block-start: var(--ty-space-3);
+  }
+  .ty-error__actions .ty-button {
+    min-block-size: var(--ty-control-target);
+  }
+
+  @media (max-width: 639.98px) {
+    .ty-error__actions {
+      flex-direction: column;
+      align-self: stretch;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ty-error__details .ty-error__chevron {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ty-error__icon,
+    .ty-error__title,
+    .ty-error__message,
+    .ty-error__meta {
+      color: CanvasText;
+    }
+    .ty-error__details-text {
+      border: 1px solid CanvasText;
+    }
+  }
+}

package/src/components/error-state/ErrorState.test.tsx

@@ -0,0 +1,98 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { ErrorState } from './ErrorState'
+
+import * as rtlDom from '@testing-library/react'
+import { expectNoAxeViolations as axeRtl } from '../../../test/axe'
+import { renderRtl } from '../../../test/rtl'
+
+describe('ErrorState', () => {
+  it('network kind describes a connection problem and offers "Try again"', () => {
+    render(<ErrorState kind="network" onRetry={() => {}} />)
+    expect(screen.getByRole('heading', { name: /connection problem/i })).toBeInTheDocument()
+    expect(screen.getByText(/server could not be reached/i)).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Try again' })).toBeInTheDocument()
+  })
+
+  it('keeps the retry button busy and disabled while the promise is pending', async () => {
+    let resolve!: () => void
+    const onRetry = vi.fn(() => new Promise<void>((r) => (resolve = r)))
+    render(<ErrorState onRetry={onRetry} />)
+    const button = screen.getByRole('button', { name: 'Try again' })
+    await userEvent.click(button)
+    expect(button).toHaveAttribute('aria-busy', 'true')
+    expect(button).toHaveAttribute('aria-disabled', 'true')
+    await userEvent.click(button)
+    expect(onRetry).toHaveBeenCalledTimes(1)
+    resolve()
+    await vi.waitFor(() => expect(button).not.toHaveAttribute('aria-busy'))
+  })
+
+  it('shows status code and problem type as metadata', () => {
+    render(<ErrorState kind="conflict" statusCode={409} problemType="https://example.org/problems/stale-version" />)
+    expect(screen.getByText('Status 409')).toBeInTheDocument()
+    expect(screen.getByText('https://example.org/problems/stale-version').tagName).toBe('CODE')
+  })
+
+  it('expands details with a disclosure', async () => {
+    render(<ErrorState details="Trace id 42" />)
+    const toggle = screen.getByRole('button', { name: 'Technical details' })
+    expect(toggle).toHaveAttribute('aria-expanded', 'false')
+    await userEvent.click(toggle)
+    expect(toggle).toHaveAttribute('aria-expanded', 'true')
+    expect(screen.getByText('Trace id 42')).toBeVisible()
+  })
+
+  it('block scope leaves the rest of the page interactive', async () => {
+    const onOther = vi.fn()
+    render(
+      <main>
+        <button type="button" onClick={onOther}>
+          Other
+        </button>
+        <ErrorState scope="block" kind="server" title="Map failed" />
+      </main>,
+    )
+    expect(screen.getByRole('region', { name: 'Map failed' })).toBeInTheDocument()
+    await userEvent.click(screen.getByRole('button', { name: 'Other' }))
+    expect(onOther).toHaveBeenCalled()
+  })
+
+  it('announces through an alert when it appears after data was shown', () => {
+    render(<ErrorState appearedAfterLoad kind="server" />)
+    expect(screen.getByRole('alert')).toHaveTextContent(/the server failed/i)
+  })
+
+  it('focuses the title on first render at page scope instead of alerting', () => {
+    render(<ErrorState />)
+    expect(screen.queryByRole('alert')).toBeNull()
+    expect(screen.getByRole('heading', { level: 2 })).toHaveFocus()
+  })
+
+  it('renders no retry button without onRetry', () => {
+    render(<ErrorState />)
+    expect(screen.queryByRole('button', { name: 'Try again' })).toBeNull()
+  })
+
+  it('renders the secondary action as a link when given an href', () => {
+    render(<ErrorState secondaryAction={{ label: 'Go back', href: '/sources' }} />)
+    expect(screen.getByRole('link', { name: 'Go back' })).toHaveAttribute('href', '/sources')
+  })
+
+  it('has no axe violations', async () => {
+    const { container } = render(
+      <ErrorState kind="permission" statusCode={403} details="x" onRetry={() => {}} secondaryAction={{ label: 'Back', onPress: () => {} }} />,
+    )
+    await expectNoAxeViolations(container)
+  })
+})
+
+describe('ErrorState in right-to-left (ar)', () => {
+  it('renders mirrored where directional and passes axe', async () => {
+    const { container } = renderRtl(<ErrorState kind="network" scope="block" onRetry={() => {}} />)
+    expect(rtlDom.screen.getByRole('button')).toBeInTheDocument()
+    await axeRtl(container)
+  })
+})

package/src/components/error-state/ErrorState.tsx

@@ -0,0 +1,145 @@
+import { ChevronDown, CircleAlert, FileQuestion, GitMerge, Lock, ServerCrash, WifiOff } from 'lucide-react'
+import { useEffect, useId, useRef, useState } from 'react'
+import { Disclosure, DisclosurePanel } from 'react-aria-components'
+import { cx } from '../../internal/cx'
+import type { ErrorKind } from '../../internal/messages'
+import { useMessages } from '../../internal/provider'
+import type { IconComponent } from '../../internal/types'
+import { Button } from '../button/Button'
+
+export type ErrorStateKind = ErrorKind
+
+export interface ErrorStateProps {
+  kind?: ErrorStateKind
+  title?: string
+  message?: string
+  /** HTTP status shown as small metadata. */
+  statusCode?: number
+  /** problem+json `type`, shown in mono meta text. */
+  problemType?: string
+  /** Technical details inside a disclosure. */
+  details?: string
+  /** Shows "Try again"; while a returned promise is pending the button is busy. */
+  onRetry?: () => void | Promise<void>
+  secondaryAction?: { label: string; onPress?: () => void; href?: string }
+  /** `page` fills the sheet; `block` replaces only the failed part. */
+  scope?: 'page' | 'block'
+  /**
+   * The error appeared after the content was already shown: announce it with
+   * `role="alert"`. When false (first render) the page-scope title takes focus instead.
+   */
+  appearedAfterLoad?: boolean
+  headingLevel?: 2 | 3 | 4
+  labels?: { retry?: string; details?: string }
+  className?: string
+}
+
+const icons: Record<ErrorStateKind, IconComponent> = {
+  generic: CircleAlert,
+  network: WifiOff,
+  server: ServerCrash,
+  permission: Lock,
+  'not-found': FileQuestion,
+  conflict: GitMerge,
+}
+
+/** Plain-language failure with retry and a way back (spec: wave-1/error-state.md). */
+export function ErrorState({
+  kind = 'generic',
+  title,
+  message,
+  statusCode,
+  problemType,
+  details,
+  onRetry,
+  secondaryAction,
+  scope = 'page',
+  appearedAfterLoad = false,
+  headingLevel,
+  labels,
+  className,
+}: ErrorStateProps) {
+  const messages = useMessages()
+  const copy = messages.error[kind]
+  const titleId = useId()
+  const titleRef = useRef<HTMLHeadingElement>(null)
+  const [retrying, setRetrying] = useState(false)
+  const mounted = useRef(true)
+  const Icon = icons[kind]
+  const level = headingLevel ?? (scope === 'page' ? 2 : 3)
+  const H = `h${level}` as 'h2' | 'h3' | 'h4'
+
+  useEffect(() => {
+    mounted.current = true
+    if (scope === 'page' && !appearedAfterLoad) titleRef.current?.focus()
+    return () => {
+      mounted.current = false
+    }
+    // Focus only on first render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const retry = () => {
+    if (!onRetry || retrying) return
+    const result = onRetry()
+    if (result && typeof (result as Promise<void>).then === 'function') {
+      setRetrying(true)
+      ;(result as Promise<void>).then(
+        () => mounted.current && setRetrying(false),
+        () => mounted.current && setRetrying(false),
+      )
+    }
+  }
+
+  return (
+    <div
+      className={cx('ty-error', className)}
+      data-scope={scope}
+      data-kind={kind}
+      role={appearedAfterLoad ? 'alert' : scope === 'block' ? 'region' : undefined}
+      aria-labelledby={!appearedAfterLoad && scope === 'block' ? titleId : undefined}
+    >
+      <Icon className="ty-error__icon" aria-hidden="true" focusable="false" />
+      <H id={titleId} ref={titleRef} tabIndex={-1} className="ty-error__title">
+        {title ?? copy.title}
+      </H>
+      <p className="ty-error__message">{message ?? copy.message}</p>
+      {statusCode !== undefined || problemType ? (
+        <p className="ty-error__meta">
+          {statusCode !== undefined ? <span>{messages.error.statusCode(statusCode)}</span> : null}
+          {problemType ? <code className="ty-error__type">{problemType}</code> : null}
+        </p>
+      ) : null}
+      {details ? (
+        <Disclosure className="ty-error__details">
+          <Button slot="trigger" variant="quiet" size="compact" trailingIcon={<ChevronDown className="ty-error__chevron" />}>
+            {labels?.details ?? messages.error.details}
+          </Button>
+          <DisclosurePanel className="ty-error__details-panel">
+            <pre className="ty-error__details-text">{details}</pre>
+          </DisclosurePanel>
+        </Disclosure>
+      ) : null}
+      {onRetry || secondaryAction ? (
+        <div className="ty-error__actions">
+          {onRetry ? (
+            <Button
+              variant="secondary"
+              busy={retrying}
+              disabled={retrying}
+              focusableWhenDisabled
+              onPress={retry}
+            >
+              {labels?.retry ?? messages.error.retry}
+            </Button>
+          ) : null}
+          {secondaryAction ? (
+            <Button variant="quiet" href={secondaryAction.href} onPress={() => secondaryAction.onPress?.()}>
+              {secondaryAction.label}
+            </Button>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/components/evidence-panel/EvidencePanel.css

@@ -0,0 +1,126 @@
+/* EvidencePanel (spec: wave-4/evidence-panel.md; design direction §2.4, §2.5, §2.8, §3.7). */
+@layer tympan.components {
+  .ty-evidence {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    /* Never wider than the space it is docked in (a split pane, the aside slot). */
+    inline-size: min(var(--ty-evidence-width, 420px), 100%);
+    min-inline-size: min(340px, 100%);
+    max-inline-size: 420px;
+    block-size: 100%;
+    min-block-size: 0;
+    border: 1px solid var(--ty-line);
+    border-radius: var(--ty-radius-sheet);
+    background: var(--ty-surface);
+    box-shadow: var(--ty-shadow-sheet);
+    backdrop-filter: blur(var(--ty-glass-blur-sheet)) saturate(var(--ty-glass-saturate));
+    -webkit-backdrop-filter: blur(var(--ty-glass-blur-sheet)) saturate(var(--ty-glass-saturate));
+    color: var(--ty-ink-2);
+    animation: ty-evidence-in var(--ty-dur-base) var(--ty-ease);
+  }
+  @keyframes ty-evidence-in {
+    from {
+      opacity: 0;
+      translate: calc(16px * var(--ty-inline-sign)) 0;
+    }
+  }
+
+  .ty-evidence__head {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--ty-space-3);
+    padding: var(--ty-space-4) var(--ty-space-4) var(--ty-space-3) var(--ty-space-5);
+    border-block-end: 1px solid var(--ty-line);
+  }
+  .ty-evidence__titles {
+    min-inline-size: 0;
+  }
+  .ty-evidence__title {
+    margin: 0;
+    color: var(--ty-ink);
+    font-family: var(--ty-font-serif);
+    font-size: var(--ty-font-size-h3);
+    font-weight: var(--ty-font-weight-semibold);
+    line-height: var(--ty-font-line-height-h3);
+    overflow-wrap: anywhere;
+  }
+  .ty-evidence__subtitle {
+    margin: 0;
+    color: var(--ty-ink-3);
+    font-size: var(--ty-font-size-meta);
+    line-height: var(--ty-font-line-height-meta);
+  }
+  .ty-evidence__body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--ty-space-4);
+    min-block-size: 0;
+    overflow-y: auto;
+    padding: var(--ty-space-4) var(--ty-space-5);
+  }
+  .ty-evidence-modal .ty-evidence__body {
+    padding-inline: 0;
+  }
+  .ty-evidence__footer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--ty-space-2);
+    padding: var(--ty-space-3) var(--ty-space-5);
+    border-block-start: 1px solid var(--ty-line);
+  }
+
+  /* Resize handle on the start edge; 44 px hit area. */
+  .ty-evidence__handle {
+    position: absolute;
+    inset-block: var(--ty-space-5);
+    inset-inline-start: -1px;
+    z-index: 1;
+    inline-size: 3px;
+    border-radius: var(--ty-radius-pill);
+    cursor: col-resize;
+    touch-action: none;
+    outline: none;
+  }
+  .ty-evidence__handle::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 50%;
+    inline-size: var(--ty-control-target);
+    translate: calc(-50% * var(--ty-inline-sign)) 0;
+  }
+  .ty-evidence__handle:hover {
+    background: var(--ty-line-strong);
+  }
+  .ty-evidence__handle:focus-visible {
+    background: var(--ty-accent);
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ty-evidence {
+      animation: none;
+    }
+  }
+  @media (prefers-reduced-transparency: reduce) {
+    .ty-evidence {
+      background: var(--ty-surface-solid);
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+    }
+  }
+  @media (forced-colors: active) {
+    .ty-evidence {
+      border: 1px solid CanvasText;
+    }
+    .ty-evidence__handle:focus-visible {
+      background: Highlight;
+    }
+  }
+}