@datatechsolutions/tympan 0.3.0 → 0.4.0

package/src/components/progress-bar/ProgressBar.test.tsx

@@ -0,0 +1,68 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { cssOf, mediaBlock } from '../../../test/css'
+import { ProgressBar } from './ProgressBar'
+
+import * as rtlDom from '@testing-library/react'
+import { expectNoAxeViolations as axeRtl } from '../../../test/axe'
+import { renderRtl } from '../../../test/rtl'
+
+describe('ProgressBar', () => {
+  it('exposes value 40 as "40%" under its label', () => {
+    render(<ProgressBar value={40} label="Upload" />)
+    const bar = screen.getByRole('progressbar', { name: 'Upload' })
+    expect(bar).toHaveAttribute('aria-valuenow', '40')
+    expect(bar).toHaveAttribute('aria-valuetext', '40%')
+    expect(screen.getByText('40%')).toBeInTheDocument()
+  })
+
+  it('clamps values above the maximum', () => {
+    render(<ProgressBar value={150} maxValue={100} label="Upload" />)
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '100')
+  })
+
+  it('uses a custom value label as aria-valuetext', () => {
+    render(<ProgressBar value={3} maxValue={8} valueLabel="3 of 8 steps" label="Setup" />)
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuetext', '3 of 8 steps')
+  })
+
+  it('omits aria-valuenow when indeterminate', () => {
+    render(<ProgressBar indeterminate label="Import" />)
+    expect(screen.getByRole('progressbar')).not.toHaveAttribute('aria-valuenow')
+    expect(screen.getByText('In progress')).toBeInTheDocument()
+  })
+
+  it('runs no transition under reduced motion', () => {
+    const reduced = mediaBlock(cssOf('components/progress-bar/ProgressBar.css'), /\(prefers-reduced-motion:\s*reduce\)/)
+    expect(reduced).toMatch(/\.ty-progress__fill\s*\{[^}]*transition:\s*none/)
+    expect(reduced).toMatch(/animation:\s*none/)
+  })
+
+  it('uses system colours in forced-colors mode', () => {
+    const forced = mediaBlock(cssOf('components/progress-bar/ProgressBar.css'), /\(forced-colors:\s*active\)/)
+    expect(forced).toMatch(/CanvasText/)
+    expect(forced).toMatch(/Highlight/)
+  })
+
+  it('has no axe violations', async () => {
+    const { container } = render(
+      <>
+        <ProgressBar value={40} label="Upload" />
+        <ProgressBar indeterminate label="Import" tone="warning" />
+        <ProgressBar value={20} aria-label="Unlabelled" showValue={false} />
+      </>,
+    )
+    await expectNoAxeViolations(container)
+  })
+})
+
+describe('ProgressBar in right-to-left (ar)', () => {
+  it('renders mirrored where directional and passes axe', async () => {
+    const { container } = renderRtl(<ProgressBar label="إعادة التشغيل" indeterminate />)
+    expect(rtlDom.screen.getByRole('progressbar', { name: 'إعادة التشغيل' })).toBeInTheDocument()
+    // The indeterminate sweep runs from the inline start (right) in right-to-left.
+    expect(cssOf('components/progress-bar/ProgressBar.css')).toMatch(/animation-name:\s*ty-progress-slide-rtl/)
+    await axeRtl(container)
+  })
+})

package/src/components/progress-bar/ProgressBar.tsx

@@ -0,0 +1,76 @@
+import { ProgressBar as AriaProgressBar, Label } from 'react-aria-components'
+import { cx } from '../../internal/cx'
+import { useMessages } from '../../internal/provider'
+
+export type ProgressBarTone = 'accent' | 'success' | 'warning' | 'danger'
+
+export interface ProgressBarProps {
+  value?: number
+  minValue?: number
+  maxValue?: number
+  /** Visible and accessible name; required unless `aria-label` is given. */
+  label?: string
+  'aria-label'?: string
+  /** Custom value text such as "3 of 8 steps". */
+  valueLabel?: string
+  showValue?: boolean
+  indeterminate?: boolean
+  /** Semantic tone; pair it with value text or a status word. */
+  tone?: ProgressBarTone
+  size?: 'thin' | 'regular'
+  className?: string
+}
+
+/** Determinate or indeterminate task progress (spec: wave-1/progress-bar.md). */
+export function ProgressBar({
+  value = 0,
+  minValue = 0,
+  maxValue = 100,
+  label,
+  valueLabel,
+  showValue = true,
+  indeterminate = false,
+  tone = 'accent',
+  size = 'regular',
+  className,
+  ...rest
+}: ProgressBarProps) {
+  const messages = useMessages()
+  const clamped = Math.min(Math.max(value, minValue), maxValue)
+  return (
+    <AriaProgressBar
+      value={clamped}
+      minValue={minValue}
+      maxValue={maxValue}
+      isIndeterminate={indeterminate}
+      valueLabel={valueLabel}
+      aria-label={label ? undefined : rest['aria-label']}
+      className={cx('ty-progress', className)}
+      data-tone={tone}
+      data-size={size}
+      data-indeterminate={indeterminate || undefined}
+      data-complete={!indeterminate && clamped >= maxValue ? true : undefined}
+    >
+      {({ percentage, valueText }) => (
+        <>
+          {label || (showValue && !indeterminate) || indeterminate ? (
+            <div className="ty-progress__header">
+              {label ? <Label className="ty-progress__label">{label}</Label> : <span />}
+              {indeterminate ? (
+                <span className="ty-progress__value ty-progress__value--indeterminate">{messages.inProgress}</span>
+              ) : showValue ? (
+                <span className="ty-progress__value">{valueText}</span>
+              ) : null}
+            </div>
+          ) : null}
+          <div className="ty-progress__track" aria-hidden="true">
+            <div
+              className="ty-progress__fill"
+              style={indeterminate ? undefined : { inlineSize: `${percentage ?? 0}%` }}
+            />
+          </div>
+        </>
+      )}
+    </AriaProgressBar>
+  )
+}

package/src/components/proof-badge/ProofBadge.css

@@ -0,0 +1,178 @@
+/* ProofBadge (design direction §2.11: icon, word and border style per proof state). */
+@layer tympan.components {
+  .ty-proof-badge {
+    --ty-proof-color: var(--ty-proof-none);
+    --ty-proof-fill: transparent;
+    --ty-proof-border: 1px solid var(--ty-line);
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ty-space-1);
+    color: var(--ty-proof-color);
+    font-family: var(--ty-font-sans);
+    white-space: nowrap;
+  }
+
+  .ty-proof-badge[data-state='proved'] {
+    --ty-proof-color: var(--ty-proof-proved);
+    --ty-proof-fill: var(--ty-proof-proved-soft);
+    --ty-proof-border: 1.5px solid var(--ty-proof-proved);
+  }
+  .ty-proof-badge[data-state='pending'] {
+    --ty-proof-color: var(--ty-proof-pending);
+    --ty-proof-fill: var(--ty-proof-pending-soft);
+    --ty-proof-border: 1.5px dashed var(--ty-proof-pending);
+  }
+  .ty-proof-badge[data-state='refuted'] {
+    --ty-proof-color: var(--ty-proof-refuted);
+    --ty-proof-fill: var(--ty-proof-refuted-soft);
+    --ty-proof-border: 3px double var(--ty-proof-refuted);
+  }
+  .ty-proof-badge[data-state='not-disclosed'] {
+    --ty-proof-color: var(--ty-proof-not-disclosed);
+    --ty-proof-fill: var(--ty-proof-not-disclosed-soft);
+    --ty-proof-border: 1.5px dotted var(--ty-proof-not-disclosed);
+  }
+  .ty-proof-badge[data-state='none'] {
+    --ty-proof-color: var(--ty-ink-3);
+    --ty-proof-fill: transparent;
+    --ty-proof-border: 1px solid var(--ty-line);
+  }
+
+  .ty-proof-badge__icon {
+    flex: none;
+    inline-size: 14px;
+    block-size: 14px;
+  }
+
+  /* inline: icon 14 + word, 12 px text, 22 px tall pill. */
+  .ty-proof-badge[data-size='inline'] {
+    block-size: 22px;
+    padding-inline: var(--ty-space-2);
+    border: var(--ty-proof-border);
+    border-radius: var(--ty-radius-pill);
+    background: var(--ty-proof-fill);
+    font-size: var(--ty-font-size-meta);
+    line-height: var(--ty-font-line-height-meta);
+    font-weight: var(--ty-font-weight-semibold);
+  }
+
+  /* compact: icon only, word for AT and tooltip. */
+  .ty-proof-badge[data-size='compact'] {
+    font-size: var(--ty-font-size-meta);
+    line-height: var(--ty-font-line-height-meta);
+    font-variant-numeric: tabular-nums;
+  }
+  .ty-proof-badge[data-size='compact'] .ty-proof-badge__icon {
+    box-sizing: content-box;
+    padding: 2px;
+    border: var(--ty-proof-border);
+    border-radius: var(--ty-radius-pill);
+    background: var(--ty-proof-fill);
+  }
+  .ty-proof-badge[data-interactive] {
+    border-radius: var(--ty-radius-pill);
+    outline: none;
+    cursor: default;
+  }
+  .ty-proof-badge[data-interactive]:focus-visible {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 2px;
+  }
+
+  /* block: strip on top of the evidence panel. */
+  .ty-proof-badge[data-size='block'] {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--ty-space-1);
+    padding: var(--ty-space-3) var(--ty-space-4);
+    border: var(--ty-proof-border);
+    border-radius: var(--ty-radius-card);
+    background: var(--ty-proof-fill);
+    white-space: normal;
+  }
+  .ty-proof-badge[data-size='block'] .ty-proof-badge__icon {
+    inline-size: 20px;
+    block-size: 20px;
+  }
+  .ty-proof-badge__head {
+    display: flex;
+    align-items: center;
+    gap: var(--ty-space-2);
+    font-size: var(--ty-font-size-body);
+    line-height: var(--ty-font-line-height-body);
+    font-weight: var(--ty-font-weight-semibold);
+  }
+  .ty-proof-badge__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ty-space-1) 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-proof-badge__rule {
+    font-family: var(--ty-font-mono);
+  }
+  .ty-proof-badge__detail {
+    color: var(--ty-ink-2);
+    font-weight: var(--ty-font-weight-regular);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .ty-proof-badge__tooltip {
+    max-inline-size: calc(var(--ty-measure-summary) * 1ch);
+    padding: var(--ty-space-1) var(--ty-space-2);
+    border: 1px solid var(--ty-line);
+    border-radius: var(--ty-radius-control);
+    background: var(--ty-surface-raised-solid);
+    color: var(--ty-ink);
+    box-shadow: var(--ty-shadow-floating);
+    font-size: var(--ty-font-size-meta);
+    line-height: var(--ty-font-line-height-meta);
+    z-index: var(--ty-z-popover);
+  }
+  .ty-proof-badge__tooltip[data-entering] {
+    animation: ty-proof-badge-fade var(--ty-dur-quick) var(--ty-ease);
+  }
+  @keyframes ty-proof-badge-fade {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ty-proof-badge__tooltip[data-entering] {
+      animation: none;
+    }
+  }
+
+  /* Forced colours: the border style (solid, dashed, double, dotted) and the word carry the state. */
+  @media (forced-colors: active) {
+    .ty-proof-badge {
+      color: CanvasText;
+      forced-color-adjust: none;
+      --ty-proof-fill: Canvas;
+    }
+    .ty-proof-badge[data-state='proved'] {
+      --ty-proof-border: 1.5px solid CanvasText;
+    }
+    .ty-proof-badge[data-state='pending'] {
+      --ty-proof-border: 1.5px dashed CanvasText;
+    }
+    .ty-proof-badge[data-state='refuted'] {
+      --ty-proof-border: 3px double CanvasText;
+    }
+    .ty-proof-badge[data-state='not-disclosed'] {
+      --ty-proof-border: 1.5px dotted CanvasText;
+    }
+    .ty-proof-badge[data-state='none'] {
+      --ty-proof-border: 1px solid CanvasText;
+    }
+    .ty-proof-badge__tooltip {
+      border-color: CanvasText;
+    }
+  }
+}

package/src/components/proof-badge/ProofBadge.test.tsx

@@ -0,0 +1,95 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it } from 'vitest'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { cssOf, mediaBlock } from '../../../test/css'
+import { renderWithProvider } from '../../../test/render'
+import { messagesPtBR } from '../../internal/messages'
+import { ProofBadge, type ProofState } from './ProofBadge'
+
+import { expectNoAxeViolations as axeRtl } from '../../../test/axe'
+import { renderRtl } from '../../../test/rtl'
+
+const states: Array<[ProofState | null, string, string]> = [
+  ['proved', 'proved', 'proved'],
+  ['pending', 'pending', 'pending'],
+  ['refuted', 'refuted', 'refuted'],
+  ['not_disclosed', 'not disclosed', 'not-disclosed'],
+  [null, 'no proof', 'none'],
+]
+
+describe('ProofBadge', () => {
+  it.each(states)('inline %s shows an icon and the word "%s"', (state, word, attr) => {
+    const { container } = render(<ProofBadge state={state} />)
+    const badge = container.querySelector('.ty-proof-badge')!
+    expect(badge).toHaveAttribute('data-state', attr)
+    expect(badge).toHaveTextContent(word)
+    expect(badge.querySelector('svg[aria-hidden="true"]')).not.toBeNull()
+  })
+
+  it('compact keeps the word available to assistive tech and as tooltip', () => {
+    const { container } = render(<ProofBadge state="pending" size="compact" detail="4/6" />)
+    const badge = container.querySelector('.ty-proof-badge')!
+    expect(badge).toHaveAttribute('title', 'pending')
+    expect(screen.getByText('pending')).toHaveClass('ty-visually-hidden')
+    expect(badge).toHaveTextContent('4/6')
+  })
+
+  it('interactive compact is focusable, named by the word and shows a tooltip on focus', async () => {
+    render(<ProofBadge state="refuted" size="compact" interactive />)
+    await userEvent.tab()
+    const badge = screen.getByRole('img', { name: 'refuted' })
+    expect(badge).toHaveFocus()
+    expect(await screen.findByRole('tooltip')).toHaveTextContent('refuted')
+  })
+
+  it('block shows who proved, when and the verifier rule in mono', () => {
+    render(<ProofBadge state="proved" size="block" provedBy="Avaliador" at="23 Sep" rule="compile@1" />)
+    expect(screen.getByText('proved')).toBeInTheDocument()
+    expect(screen.getByText('by Avaliador')).toBeInTheDocument()
+    expect(screen.getByText('23 Sep')).toBeInTheDocument()
+    expect(screen.getByText('rule compile@1').tagName).toBe('CODE')
+  })
+
+  it('uses the words of the host catalogue', () => {
+    renderWithProvider(<ProofBadge state="not_disclosed" />, { baseMessages: messagesPtBR })
+    expect(screen.getByText('não informada')).toBeInTheDocument()
+  })
+
+  it('distinguishes states by border style, not colour alone, including in forced colours', () => {
+    const css = cssOf('components/proof-badge/ProofBadge.css')
+    expect(css).toMatch(/\[data-state='proved'\]\s*\{[^}]*1\.5px solid/)
+    expect(css).toMatch(/\[data-state='pending'\]\s*\{[^}]*dashed/)
+    expect(css).toMatch(/\[data-state='refuted'\]\s*\{[^}]*3px double/)
+    expect(css).toMatch(/\[data-state='not-disclosed'\]\s*\{[^}]*dotted/)
+    const forced = mediaBlock(css, /\(forced-colors:\s*active\)/)
+    for (const style of ['solid', 'dashed', 'double', 'dotted']) expect(forced).toContain(style)
+  })
+
+  it('inline badge uses 12 px text and a 22 px pill', () => {
+    const css = cssOf('components/proof-badge/ProofBadge.css')
+    expect(css).toMatch(/\[data-size='inline'\]\s*\{[^}]*block-size:\s*22px[^}]*var\(--ty-radius-pill\)[^}]*var\(--ty-font-size-meta\)/)
+  })
+
+  it('has no axe violations in every size', async () => {
+    const { container } = render(
+      <div>
+        {states.map(([s]) => (
+          <ProofBadge key={String(s)} state={s} />
+        ))}
+        <ProofBadge state="proved" size="compact" />
+        <ProofBadge state="pending" size="compact" interactive />
+        <ProofBadge state="proved" size="block" provedBy="Ana" at="today" rule="r1" />
+      </div>,
+    )
+    await expectNoAxeViolations(container)
+  })
+})
+
+describe('ProofBadge in right-to-left (ar)', () => {
+  it('renders mirrored where directional and passes axe', async () => {
+    const { container } = renderRtl(<ProofBadge state="proved" size="block" provedBy="مراجع" rule="compile@1" />)
+    expect(container.textContent).toMatch(/compile@1/)
+    await axeRtl(container)
+  })
+})

package/src/components/proof-badge/ProofBadge.tsx

@@ -0,0 +1,113 @@
+import { BadgeCheck, CircleDashed, CircleX, Hourglass, Minus } from 'lucide-react'
+import type { ReactNode } from 'react'
+import { Focusable, Tooltip, TooltipTrigger } from 'react-aria-components'
+import { cx } from '../../internal/cx'
+import type { ProofStateKey } from '../../internal/messages'
+import { useMessages } from '../../internal/provider'
+import type { IconComponent } from '../../internal/types'
+
+/** Proof states of the contract, plus `none` ("no proof"). */
+export type ProofState = 'proved' | 'pending' | 'refuted' | 'not_disclosed'
+export type ProofBadgeSize = 'inline' | 'compact' | 'block'
+
+export interface ProofBadgeProps {
+  /** Contract state; `null`/`undefined` renders the "no proof" state. */
+  state?: ProofState | null
+  /** inline: icon + word pill; compact: icon only (word for AT and tooltip); block: evidence-panel strip. */
+  size?: ProofBadgeSize
+  /** Overrides the state word. */
+  label?: string
+  /** Short visible detail after the word or icon, such as "4/6". */
+  detail?: string
+  /** Compact only: makes the badge focusable and shows the word in a tooltip. */
+  interactive?: boolean
+  /** Block only: who proved it (a name, or an ActorChip). */
+  provedBy?: ReactNode
+  /** Block only: when (host-formatted date). */
+  at?: ReactNode
+  /** Block only: verifier rule, shown in mono. */
+  rule?: string
+  className?: string
+}
+
+const ICONS: Record<ProofStateKey, IconComponent> = {
+  proved: BadgeCheck,
+  pending: Hourglass,
+  refuted: CircleX,
+  not_disclosed: CircleDashed,
+  none: Minus,
+}
+
+/** The shared proof-state language of design direction §2.11: icon, word and border style, never colour alone. */
+export function ProofBadge({ state, size = 'inline', label, detail, interactive = false, provedBy, at, rule, className }: ProofBadgeProps) {
+  const messages = useMessages()
+  const key: ProofStateKey = state ?? 'none'
+  const word = label ?? messages.proof[key]
+  const Icon = ICONS[key]
+  const common = {
+    className: cx('ty-proof-badge', className),
+    'data-state': key.replace('_', '-'),
+    'data-size': size,
+  }
+
+  if (size === 'block') {
+    return (
+      <div {...common}>
+        <div className="ty-proof-badge__head">
+          <Icon className="ty-proof-badge__icon" aria-hidden="true" focusable="false" />
+          <span className="ty-proof-badge__word">{word}</span>
+          {detail ? <span className="ty-proof-badge__detail">{detail}</span> : null}
+        </div>
+        {provedBy != null || at != null || rule ? (
+          <p className="ty-proof-badge__meta">
+            {provedBy != null ? (
+              <span className="ty-proof-badge__by">{typeof provedBy === 'string' ? messages.proof.provedBy(provedBy) : provedBy}</span>
+            ) : null}
+            {at != null ? <span className="ty-proof-badge__at">{at}</span> : null}
+            {rule ? <code className="ty-proof-badge__rule">{messages.proof.rule(rule)}</code> : null}
+          </p>
+        ) : null}
+      </div>
+    )
+  }
+
+  if (size === 'compact') {
+    const glyph = <Icon className="ty-proof-badge__icon" aria-hidden="true" focusable="false" />
+    const tail = detail ? (
+      <span className="ty-proof-badge__detail" aria-hidden={interactive ? true : undefined}>
+        {detail}
+      </span>
+    ) : null
+    if (interactive) {
+      const name = detail ? `${word}, ${detail}` : word
+      return (
+        <TooltipTrigger delay={300}>
+          <Focusable>
+            <span {...common} role="img" aria-label={name} tabIndex={0} data-interactive="true">
+              {glyph}
+              {tail}
+            </span>
+          </Focusable>
+          <Tooltip className="ty-proof-badge__tooltip" offset={6}>
+            {word}
+          </Tooltip>
+        </TooltipTrigger>
+      )
+    }
+    return (
+      <span {...common} title={word}>
+        {glyph}
+        <span className="ty-visually-hidden">{word}</span>
+        {tail}
+      </span>
+    )
+  }
+
+  return (
+    <span {...common}>
+      <Icon className="ty-proof-badge__icon" aria-hidden="true" focusable="false" />
+      <span className="ty-proof-badge__word">{word}</span>
+      {detail ? <span className="ty-proof-badge__detail">{detail}</span> : null}
+    </span>
+  )
+}

package/src/components/pull-to-refresh/PullToRefresh.css

@@ -0,0 +1,99 @@
+/* PullToRefresh (spec: wave-2/pull-to-refresh.md; design direction §2.7, §2.12). */
+@layer tympan.components {
+  .ty-pull {
+    position: relative;
+    overflow-y: auto;
+    overscroll-behavior-y: contain;
+  }
+
+  .ty-pull__indicator {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline: 0;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    block-size: 0;
+    pointer-events: none;
+    translate: 0 calc(var(--ty-pull-distance, 0px) / 2 - var(--ty-space-6));
+  }
+  .ty-pull__indicator[data-visible] {
+    block-size: auto;
+  }
+  .ty-pull[data-refreshing] .ty-pull__indicator {
+    translate: 0 var(--ty-space-2);
+  }
+
+  .ty-pull__content {
+    translate: 0 var(--ty-pull-distance, 0px);
+    transition: translate var(--ty-dur-base) var(--ty-ease);
+  }
+  .ty-pull[data-refreshing] .ty-pull__content {
+    translate: 0 var(--ty-space-8);
+  }
+
+  /* Ring: fills with pull progress, spins while refreshing. */
+  .ty-pull__ring {
+    display: inline-flex;
+  }
+  .ty-pull__ring-track {
+    --ty-pull-angle: calc(var(--ty-pull-progress, 0) * 1turn);
+    display: block;
+    inline-size: var(--ty-space-6);
+    block-size: var(--ty-space-6);
+    border-radius: 50%;
+    background: conic-gradient(var(--ty-accent) var(--ty-pull-angle), var(--ty-line) 0);
+    mask: radial-gradient(circle, transparent 55%, #000 57%);
+    box-shadow: var(--ty-shadow-floating);
+  }
+  .ty-pull[data-refreshing] .ty-pull__ring-track {
+    background: conic-gradient(var(--ty-accent) 0.3turn, var(--ty-line) 0);
+    animation: ty-pull-spin 900ms linear infinite;
+  }
+  @keyframes ty-pull-spin {
+    to {
+      rotate: 1turn;
+    }
+  }
+
+  .ty-pull__dots {
+    display: inline-flex;
+    gap: var(--ty-space-1);
+    padding: var(--ty-space-2);
+  }
+  .ty-pull__dots > span {
+    inline-size: var(--ty-space-2);
+    block-size: var(--ty-space-2);
+    border-radius: 50%;
+    background: var(--ty-ink-3);
+    opacity: 0.4;
+  }
+  .ty-pull[data-armed] .ty-pull__dots > span,
+  .ty-pull[data-refreshing] .ty-pull__dots > span {
+    background: var(--ty-accent);
+    opacity: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ty-pull__content,
+    .ty-pull[data-refreshing] .ty-pull__content {
+      translate: none;
+      transition: none;
+    }
+    .ty-pull[data-refreshing] .ty-pull__ring-track {
+      animation: none;
+      background: var(--ty-accent);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ty-pull__ring-track {
+      background: CanvasText;
+      forced-color-adjust: none;
+    }
+    .ty-pull__dots > span {
+      background: CanvasText;
+      forced-color-adjust: none;
+    }
+  }
+}

package/src/components/pull-to-refresh/PullToRefresh.rtl.test.tsx

@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { inRtl } from '../../../test/rtl-b'
+import { PullToRefresh } from './PullToRefresh'
+
+describe('PullToRefresh in right-to-left locales', () => {
+  it('renders Arabic content and passes axe', async () => {
+    const { container } = inRtl(
+      <PullToRefresh onRefresh={async () => {}}>
+        <p>قائمة الحالات</p>
+      </PullToRefresh>,
+    )
+    expect(container.textContent).toContain('قائمة الحالات')
+    await expectNoAxeViolations(container)
+  })
+})