@datatechsolutions/tympan 0.3.0 → 0.4.0

package/src/components/date-range-field/DateRangeField.tsx

@@ -0,0 +1,231 @@
+import { CalendarDate, today as todayIn, getLocalTimeZone } from '@internationalized/date'
+import { CalendarDays } from 'lucide-react'
+import { useId, useState, type ReactNode } from 'react'
+import { Button as AriaButton, DateInput, DateRangePicker, DateSegment, Group, I18nProvider, useLocale } from 'react-aria-components'
+import { cx } from '../../internal/cx'
+import { FieldLine, FloatSurface, joinIds, usePhoneWidth } from '../../internal/forms-b/parts'
+import { useMessages } from '../../internal/provider'
+import { Button } from '../button/Button'
+import { Calendar } from '../calendar/Calendar'
+
+/** A start-to-end range of calendar dates without time, exchanged as local `Date`s. */
+export interface DateRangeFieldValue {
+  start: Date | null
+  end: Date | null
+}
+
+/** One quick choice in the popover: `{ id, label, range }`. */
+export interface DateRangePreset {
+  id: string
+  label: string
+  range: DateRangeFieldValue
+}
+
+export interface DateRangeFieldProps {
+  label: string
+  value: DateRangeFieldValue | null
+  defaultValue?: DateRangeFieldValue | null
+  onChange: (value: DateRangeFieldValue | null) => void
+  minValue?: Date
+  maxValue?: Date
+  isDateUnavailable?: (date: Date) => boolean
+  /** Longest allowed range in days; longer ranges are invalid. */
+  maxDays?: number
+  /** Quick choices shown beside or above the calendar. */
+  presets?: DateRangePreset[]
+  /** Immediate: the second pick commits and closes. Apply: picks are a draft until Apply. */
+  confirmation?: 'immediate' | 'apply'
+  /** Months in the popover (one on narrow screens whatever the value). */
+  visibleMonths?: 1 | 2
+  /** Form field names; both dates submit in ISO format. */
+  startName?: string
+  endName?: string
+  required?: boolean
+  disabled?: boolean
+  readOnly?: boolean
+  errorText?: string
+  hint?: ReactNode
+  /** Overrides the locale from the provider. */
+  locale?: string
+  className?: string
+}
+
+const fromDate = (d: Date | null) => (d ? new CalendarDate(d.getFullYear(), d.getMonth() + 1, d.getDate()) : null)
+const toDate = (c: CalendarDate | null) => (c ? new Date(c.year, c.month - 1, c.day) : null)
+const daysBetween = (a: Date, b: Date) => Math.round((b.getTime() - a.getTime()) / 86400000)
+
+/**
+ * Enter a start and end date by typing into segmented date inputs or by
+ * picking in a Calendar popover (spec: wave-5-general/date-range-field.md).
+ * Built on RAC DateRangePicker; APG Date Picker Dialog.
+ */
+export function DateRangeField(props: DateRangeFieldProps) {
+  const t = useMessages().dateRangeField
+  const { locale: contextLocale } = useLocale()
+  const now = todayIn(getLocalTimeZone())
+
+  const [innerValue, setInnerValue] = useState<DateRangeFieldValue | null>(() => props.value ?? props.defaultValue ?? null)
+  const value = props.value !== undefined ? props.value : innerValue
+  const [open, setOpen] = useState(false)
+  const [draft, setDraft] = useState<DateRangeFieldValue | null>(null)
+  const phone = usePhoneWidth()
+  const months: 1 | 2 = phone ? 1 : (props.visibleMonths ?? 2)
+  const confirmation = props.confirmation ?? 'immediate'
+
+  const commit = (next: DateRangeFieldValue | null) => {
+    if (props.value === undefined) setInnerValue(next)
+    props.onChange(next)
+  }
+
+  const shown = open && confirmation === 'apply' ? draft : value
+  const shownRange = shown && (shown.start || shown.end) ? { start: fromDate(shown.start), end: fromDate(shown.end) } : null
+  const racValue = shownRange && shownRange.start && shownRange.end ? { start: shownRange.start, end: shownRange.end } : null
+
+  // Validation: the host text wins, then the computed reasons.
+  const computedInvalid = (() => {
+    const start = value?.start
+    const end = value?.end
+    if (!start || !end) return null
+    if (end.getTime() < start.getTime()) return t.endBeforeStart
+    if (props.maxDays != null && daysBetween(start, end) + 1 > props.maxDays) return t.tooManyDays(props.maxDays)
+    if (props.minValue && start.getTime() < props.minValue.getTime()) return t.outOfBounds
+    if (props.maxValue && end.getTime() > props.maxValue.getTime()) return t.outOfBounds
+    if (props.isDateUnavailable) {
+      const cursor = new Date(start.getTime())
+      while (cursor.getTime() <= end.getTime()) {
+        if (props.isDateUnavailable(cursor)) return t.unavailableDay
+        cursor.setDate(cursor.getDate() + 1)
+      }
+    }
+    return null
+  })()
+  const errorMessage = props.errorText ?? computedInvalid ?? undefined
+  const invalid = !!errorMessage
+
+  const base = useId()
+  const labelId = `${base}-label`
+  const hintId = props.hint != null && !errorMessage ? `${base}-hint` : undefined
+  const errorId = errorMessage ? `${base}-error` : undefined
+
+  const openChange = (next: boolean) => {
+    if (next) setDraft(value ? { ...value } : null)
+    setOpen(next)
+  }
+
+  const pickFromCalendar = (range: { start: Date; end: Date } | null) => {
+    if (confirmation === 'apply') {
+      setDraft(range)
+      return
+    }
+    commit(range)
+    setOpen(false)
+  }
+
+  const typed = (range: { start: CalendarDate | null; end: CalendarDate | null } | null) => {
+    const next: DateRangeFieldValue | null = range && (range.start || range.end) ? { start: toDate(range.start), end: toDate(range.end) } : null
+    if (open && confirmation === 'apply') setDraft(next)
+    else commit(next)
+  }
+
+  const applyPreset = (preset: DateRangePreset) => {
+    if (confirmation === 'apply') {
+      setDraft({ ...preset.range })
+      return
+    }
+    commit({ ...preset.range })
+    setOpen(false)
+  }
+
+  const calendar = (
+    <Calendar
+      label={props.label}
+      mode="range"
+      value={draft && draft.start && draft.end ? { start: draft.start, end: draft.end } : null}
+      onChange={(next) => pickFromCalendar(next as { start: Date; end: Date } | null)}
+      minValue={props.minValue}
+      maxValue={props.maxValue}
+      isDateUnavailable={props.isDateUnavailable}
+      visibleMonths={months}
+      focusedValue={draft?.start ?? (value?.start ?? new Date(now.year, now.month - 1, now.day))}
+      isInvalid={invalid}
+    />
+  )
+
+  return (
+    <I18nProvider locale={props.locale ?? contextLocale}>
+      <div className={cx('ty-date-range-field', props.className)} data-invalid={invalid || undefined}>
+        <FieldLine kind="label" id={labelId}>
+          <span>{props.label}</span>
+        </FieldLine>
+        {hintId ? (
+          <FieldLine kind="hint" id={hintId}>
+            {props.hint}
+          </FieldLine>
+        ) : null}
+        <DateRangePicker
+          className="ty-date-range-field__picker"
+          value={racValue}
+          onChange={typed}
+          isOpen={open}
+          onOpenChange={openChange}
+          shouldCloseOnSelect={false}
+          startName={props.startName}
+          endName={props.endName}
+          minValue={fromDate(props.minValue ?? null) ?? undefined}
+          maxValue={fromDate(props.maxValue ?? null) ?? undefined}
+          isDateUnavailable={(d) => (props.isDateUnavailable ? props.isDateUnavailable(toDate(d as CalendarDate)!) : false)}
+          isDisabled={props.disabled}
+          isReadOnly={props.readOnly}
+          isRequired={props.required}
+          isInvalid={invalid || undefined}
+          aria-labelledby={labelId}
+          aria-describedby={joinIds(hintId, errorId)}
+        >
+          <Group className="ty-date-range-field__group">
+            <DateInput slot="start" className="ty-date-range-field__input" aria-label={`${props.label}: ${t.start}`}>
+              {(segment) => <DateSegment segment={segment} className="ty-date-range-field__segment" />}
+            </DateInput>
+            <span className="ty-date-range-field__dash" aria-hidden="true">
+              –
+            </span>
+            <DateInput slot="end" className="ty-date-range-field__input" aria-label={`${props.label}: ${t.end}`}>
+              {(segment) => <DateSegment segment={segment} className="ty-date-range-field__segment" />}
+            </DateInput>
+            <AriaButton className="ty-date-range-field__trigger" aria-label={props.label}>
+              <CalendarDays className="ty-icon" aria-hidden="true" focusable="false" />
+            </AriaButton>
+          </Group>
+          <FloatSurface labelledBy={labelId} className="ty-date-range-field__surface">
+            <div className="ty-date-range-field__panel">
+              {props.presets?.length ? (
+                <div className="ty-date-range-field__presets" role="group" aria-label={t.presets}>
+                  {props.presets.map((preset) => (
+                    <Button key={preset.id} variant="quiet" size="compact" onPress={() => applyPreset(preset)}>
+                      {preset.label}
+                    </Button>
+                  ))}
+                </div>
+              ) : null}
+              {calendar}
+              {confirmation === 'apply' ? (
+                <div className="ty-date-range-field__actions">
+                  <Button variant="quiet" size="compact" onPress={() => openChange(false)}>
+                    {t.cancel}
+                  </Button>
+                  <Button variant="primary" size="compact" onPress={() => { commit(draft); setOpen(false) }}>
+                    {t.apply}
+                  </Button>
+                </div>
+              ) : null}
+            </div>
+          </FloatSurface>
+        </DateRangePicker>
+        {errorId ? (
+          <FieldLine kind="error" id={errorId}>
+            {errorMessage}
+          </FieldLine>
+        ) : null}
+      </div>
+    </I18nProvider>
+  )
+}

package/src/components/delta-indicator/DeltaIndicator.css

@@ -0,0 +1,58 @@
+/* DeltaIndicator (spec: wave-2/delta-indicator.md; design direction §2.2, §2.3, §2.4). */
+@layer tympan.components {
+  .ty-delta {
+    --ty-delta-ink: var(--ty-ink-2);
+    --ty-delta-fill: transparent;
+    --ty-delta-edge: transparent;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ty-space-1);
+    color: var(--ty-delta-ink);
+    font-family: var(--ty-font-sans);
+    font-size: var(--ty-font-size-meta);
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--ty-font-weight-semibold);
+    line-height: var(--ty-font-line-height-meta);
+    white-space: nowrap;
+  }
+  .ty-delta[data-size='medium'] {
+    font-size: var(--ty-font-size-body);
+    line-height: var(--ty-font-line-height-body);
+  }
+  .ty-delta__glyph {
+    flex: none;
+    inline-size: 1.1em;
+    block-size: 1.1em;
+  }
+  .ty-delta[data-sentiment='positive'] {
+    --ty-delta-ink: var(--ty-on-success-soft);
+    --ty-delta-fill: var(--ty-success-soft);
+    --ty-delta-edge: var(--ty-success);
+  }
+  .ty-delta[data-sentiment='negative'] {
+    --ty-delta-ink: var(--ty-on-danger-soft);
+    --ty-delta-fill: var(--ty-danger-soft);
+    --ty-delta-edge: var(--ty-danger);
+  }
+  .ty-delta[data-sentiment='neutral'] {
+    --ty-delta-ink: var(--ty-ink-3);
+    --ty-delta-fill: var(--ty-surface-sunken);
+    --ty-delta-edge: var(--ty-line-strong);
+  }
+  .ty-delta[data-appearance='pill'] {
+    padding: 0 var(--ty-space-2);
+    border: 1px solid var(--ty-delta-edge);
+    border-radius: var(--ty-radius-pill);
+    background: var(--ty-delta-fill);
+  }
+
+  @media (forced-colors: active) {
+    .ty-delta {
+      color: CanvasText;
+    }
+    .ty-delta[data-appearance='pill'] {
+      border: 1px solid CanvasText;
+      background: Canvas;
+    }
+  }
+}

package/src/components/delta-indicator/DeltaIndicator.rtl.test.tsx

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { inRtl } from '../../../test/rtl-b'
+import { DeltaIndicator } from './DeltaIndicator'
+
+describe('DeltaIndicator in right-to-left locales', () => {
+  it('mirrors the sideways glyph, formats with Arabic-Indic digits (ar-EG) and passes axe', async () => {
+    const { container } = inRtl(
+      <>
+        <DeltaIndicator value={12.5} />
+        <DeltaIndicator value={-3} unit="number" appearance="pill" />
+      </>,
+      'ar-EG',
+    )
+    for (const glyph of container.querySelectorAll('.ty-delta__glyph')) expect(glyph).toHaveClass('ty-mirror-rtl')
+    expect(container.textContent).toMatch(/[٠-٩]/)
+    await expectNoAxeViolations(container)
+  })
+})

package/src/components/delta-indicator/DeltaIndicator.test.tsx

@@ -0,0 +1,69 @@
+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 { ThemeScope } from '../../internal/ThemeScope'
+import { DeltaIndicator } from './DeltaIndicator'
+
+const box = (c: HTMLElement) => c.querySelector('.ty-delta') as HTMLElement
+
+describe('DeltaIndicator', () => {
+  it('shows a signed percentage, an up glyph and the word "up"', () => {
+    const { container } = render(<DeltaIndicator value={12.34} />)
+    const el = box(container)
+    expect(el).toHaveAttribute('data-trend', 'up')
+    expect(el).toHaveTextContent('+12.3%')
+    expect(el.textContent).toMatch(/^up /)
+    expect(el.querySelector('svg')).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('shows a negative number with a true minus sign and a down glyph', () => {
+    const { container } = render(<DeltaIndicator value={-3} unit="number" />)
+    expect(box(container)).toHaveAttribute('data-trend', 'down')
+    expect(screen.getByText('−3')).toBeInTheDocument()
+  })
+
+  it('renders nothing for zero with hideWhenZero and no value', () => {
+    const { container } = render(<DeltaIndicator value={0} hideWhenZero showValue={false} />)
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('renders nothing for null', () => {
+    const { container } = render(<DeltaIndicator value={null} />)
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('uses the error tone for a rise when lower is better, and neutral for zero', () => {
+    const { container, rerender } = render(<DeltaIndicator value={4} polarity="lower-is-better" />)
+    expect(box(container)).toHaveAttribute('data-sentiment', 'negative')
+    rerender(<DeltaIndicator value={0} />)
+    expect(box(container)).toHaveAttribute('data-sentiment', 'neutral')
+    expect(box(container)).toHaveTextContent('no change')
+  })
+
+  it('accepts a custom formatter', () => {
+    render(<DeltaIndicator value={2} format={(v) => `${v} pts`} />)
+    expect(screen.getByText('2 pts')).toBeInTheDocument()
+  })
+
+  it('keeps a pill border in forced colours and never goes below 12 px', () => {
+    const css = cssOf('components/delta-indicator/DeltaIndicator.css')
+    expect(mediaBlock(css, /\(forced-colors:\s*active\)/)).toMatch(/\.ty-delta\[data-appearance='pill'\]\s*\{[^}]*border:\s*1px solid CanvasText/)
+    expect(css).toMatch(/font-size:\s*var\(--ty-font-size-meta\)/)
+  })
+
+  it('has no axe violations, light and dark', async () => {
+    const { container } = render(
+      <>
+        {(['light', 'dark'] as const).map((s) => (
+          <ThemeScope key={s} scheme={s}>
+            <DeltaIndicator value={10.5} appearance="pill" />
+            <DeltaIndicator value={-2} unit="number" size="medium" />
+            <DeltaIndicator value={0} polarity="neutral" />
+          </ThemeScope>
+        ))}
+      </>,
+    )
+    await expectNoAxeViolations(container)
+  })
+})

package/src/components/delta-indicator/DeltaIndicator.tsx

@@ -0,0 +1,88 @@
+import { ArrowDownRight, ArrowRight, ArrowUpRight } from 'lucide-react'
+import { useLocale } from 'react-aria-components'
+import { cx } from '../../internal/cx'
+import { directionOf, signedFigure, type ChangeUnit } from '../../internal/data-b/signed'
+import { useMessages } from '../../internal/provider'
+import type { IconComponent } from '../../internal/types'
+
+export type DeltaPolarity = 'higher-is-better' | 'lower-is-better' | 'neutral'
+export type DeltaAppearance = 'inline' | 'pill'
+export type DeltaSize = 'small' | 'medium'
+export type DeltaSentiment = 'positive' | 'negative' | 'neutral'
+
+export interface DeltaIndicatorProps {
+  /** The change; `null` renders nothing. */
+  value: number | null | undefined
+  unit?: ChangeUnit
+  /** Custom text for the value (the sign and glyph are still added by direction). */
+  format?: (value: number, unit: ChangeUnit) => string
+  showValue?: boolean
+  /** With `showValue` false, a zero change renders nothing. */
+  hideWhenZero?: boolean
+  appearance?: DeltaAppearance
+  size?: DeltaSize
+  polarity?: DeltaPolarity
+  className?: string
+}
+
+type Direction = -1 | 0 | 1
+
+const GLYPH: Record<Direction, IconComponent> = { [-1]: ArrowDownRight, 0: ArrowRight, 1: ArrowUpRight }
+const TREND: Record<Direction, 'down' | 'flat' | 'up'> = { [-1]: 'down', 0: 'flat', 1: 'up' }
+
+/** Maps a direction to a sentiment under a polarity; zero is always neutral. */
+export function deltaSentiment(direction: Direction, polarity: DeltaPolarity): DeltaSentiment {
+  if (direction === 0 || polarity === 'neutral') return 'neutral'
+  const good = polarity === 'higher-is-better' ? direction > 0 : direction < 0
+  return good ? 'positive' : 'negative'
+}
+
+/** Presentational part shared with cards that already know direction and sentiment. */
+export function DeltaMark(props: {
+  trend: 'up' | 'down' | 'flat'
+  sentiment: DeltaSentiment
+  text?: string
+  appearance?: DeltaAppearance
+  size?: DeltaSize
+  className?: string
+}) {
+  const words = useMessages().delta
+  const dir: Direction = props.trend === 'up' ? 1 : props.trend === 'down' ? -1 : 0
+  const Glyph = GLYPH[dir]
+  return (
+    <span
+      className={cx('ty-delta', props.className)}
+      data-trend={props.trend}
+      data-sentiment={props.sentiment}
+      data-appearance={props.appearance ?? 'inline'}
+      data-size={props.size ?? 'small'}
+    >
+      {/* Diagonal and flat arrows point along the reading direction: mirrored in RTL (up stays up). */}
+      <Glyph className="ty-delta__glyph ty-mirror-rtl" aria-hidden="true" focusable="false" />
+      <span className="ty-visually-hidden">{words[props.trend]} </span>
+      {props.text ? <span className="ty-delta__value">{props.text}</span> : null}
+    </span>
+  )
+}
+
+/** Direction and size of a change (spec: wave-2/delta-indicator.md). */
+export function DeltaIndicator(props: DeltaIndicatorProps) {
+  const { locale } = useLocale()
+  const value = props.value
+  if (value === null || value === undefined || Number.isNaN(value)) return null
+  const shown = props.showValue ?? true
+  const dir = directionOf(value)
+  if (dir === 0 && !shown && props.hideWhenZero) return null
+  const unit = props.unit ?? 'percent'
+  const text = shown ? (props.format ? props.format(value, unit) : signedFigure(value, unit, locale)) : undefined
+  return (
+    <DeltaMark
+      trend={TREND[dir]}
+      sentiment={deltaSentiment(dir, props.polarity ?? 'higher-is-better')}
+      text={text}
+      appearance={props.appearance}
+      size={props.size}
+      className={props.className}
+    />
+  )
+}

package/src/components/details-popover/DetailsPopover.css

@@ -0,0 +1,166 @@
+/* DetailsPopover (spec: wave-2/details-popover.md; design direction §2.3, §2.5, §2.11). */
+@layer tympan.components {
+  .ty-details-popover__trigger {
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    inline-size: 28px;
+    block-size: 28px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--ty-radius-pill);
+    background: transparent;
+    color: var(--ty-ink-3);
+    cursor: pointer;
+    outline: none;
+  }
+  .ty-details-popover__trigger::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    /* physical: centring with translate(-50%) is the same in both directions */
+    left: 50%;
+    inline-size: max(100%, var(--ty-control-target));
+    block-size: max(100%, var(--ty-control-target));
+    transform: translate(-50%, -50%);
+  }
+  .ty-details-popover__trigger > svg {
+    inline-size: 18px;
+    block-size: 18px;
+  }
+  .ty-details-popover__trigger[data-hovered] {
+    background: var(--ty-surface-sunken);
+    color: var(--ty-ink-2);
+  }
+  .ty-details-popover__trigger[data-focus-visible] {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 2px;
+  }
+  .ty-details-popover {
+    box-sizing: border-box;
+    inline-size: min(22rem, calc(100vw - 2 * var(--ty-space-4)));
+    border: 1px solid var(--ty-line);
+    border-radius: var(--ty-radius-card);
+    background: var(--ty-surface-raised);
+    color: var(--ty-on-surface-raised);
+    box-shadow: var(--ty-shadow-floating);
+    backdrop-filter: blur(var(--ty-glass-blur-floating));
+    -webkit-backdrop-filter: blur(var(--ty-glass-blur-floating));
+  }
+  .ty-details-popover[data-entering] {
+    animation: ty-details-in var(--ty-dur-quick) var(--ty-ease);
+  }
+  @keyframes ty-details-in {
+    from {
+      opacity: 0;
+      translate: 0 4px;
+    }
+  }
+  .ty-details-popover__arrow-tip svg {
+    display: block;
+    fill: var(--ty-surface-raised-solid);
+    stroke: var(--ty-line);
+  }
+  .ty-details-popover__arrow-tip[data-placement='bottom'] svg {
+    rotate: 180deg;
+  }
+  .ty-details-popover__arrow-tip[data-placement='start'] svg {
+    rotate: -90deg;
+  }
+  .ty-details-popover__arrow-tip[data-placement='end'] svg {
+    rotate: 90deg;
+  }
+  .ty-details-popover__dialog {
+    padding: var(--ty-space-4);
+    outline: none;
+  }
+  .ty-details-popover__card-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-3);
+  }
+  .ty-details-popover__head {
+    display: flex;
+    align-items: center;
+    gap: var(--ty-space-2);
+  }
+  .ty-details-popover__title {
+    margin: 0;
+    color: var(--ty-ink);
+    font-size: var(--ty-font-size-body);
+    font-weight: var(--ty-font-weight-semibold);
+  }
+  .ty-details-popover__tone,
+  .ty-details-popover__when {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ty-space-1);
+    margin: 0;
+    font-size: var(--ty-font-size-meta);
+  }
+  .ty-details-popover__tone > svg,
+  .ty-details-popover__when > svg {
+    inline-size: 14px;
+    block-size: 14px;
+  }
+  .ty-details-popover__card-body[data-tone='success'] .ty-details-popover__tone {
+    color: var(--ty-on-success-soft);
+  }
+  .ty-details-popover__card-body[data-tone='pending'] .ty-details-popover__tone {
+    color: var(--ty-on-warning-soft);
+  }
+  .ty-details-popover__card-body[data-tone='error'] .ty-details-popover__tone {
+    color: var(--ty-on-danger-soft);
+  }
+  .ty-details-popover__when {
+    color: var(--ty-ink-3);
+  }
+  .ty-details-popover__change,
+  .ty-details-popover__note-text {
+    margin: 0;
+    color: var(--ty-ink-2);
+  }
+  .ty-details-popover__change strong {
+    color: var(--ty-ink);
+  }
+  .ty-details-popover__arrow {
+    inline-size: 14px;
+    block-size: 14px;
+    vertical-align: -2px;
+    color: var(--ty-ink-3);
+  }
+  .ty-details-popover__label {
+    margin: 0;
+    color: var(--ty-ink-3);
+    font-size: var(--ty-font-size-label);
+    font-weight: var(--ty-font-weight-semibold);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .ty-details-popover[data-entering] {
+      animation: ty-details-fade var(--ty-dur-quick) linear;
+    }
+    @keyframes ty-details-fade {
+      from {
+        opacity: 0;
+      }
+    }
+  }
+  @media (prefers-reduced-transparency: reduce) {
+    .ty-details-popover {
+      background: var(--ty-surface-raised-solid);
+      backdrop-filter: none;
+    }
+  }
+  @media (forced-colors: active) {
+    .ty-details-popover {
+      border: 1px solid CanvasText;
+    }
+    .ty-details-popover__arrow-tip svg {
+      fill: Canvas;
+      stroke: CanvasText;
+    }
+    .ty-details-popover__trigger[data-focus-visible] {
+      outline: 2px solid Highlight;
+    }
+  }
+}