@datatechsolutions/tympan 0.3.0 → 0.4.0

package/src/components/upgrade-gate/UpgradeGate.tsx

@@ -0,0 +1,56 @@
+import { useId, useRef } from 'react'
+import { Dialog, Heading, Modal, ModalOverlay } from 'react-aria-components'
+import { useDomAttributes } from '../../internal/dom'
+import { useMessages } from '../../internal/provider'
+import type { AuthBrandMessages } from '../../internal/messages/auth-brand'
+import { AmbientBackdrop } from '../ambient-backdrop/AmbientBackdrop'
+import { Button } from '../button/Button'
+import { InlineNotice } from '../inline-notice/InlineNotice'
+
+export type UpgradeGateTexts = AuthBrandMessages['upgradeGate']
+
+export interface UpgradeGateProps {
+  onViewPlans: () => void
+  onSignOut: () => void
+  busy?: boolean
+  texts?: Partial<UpgradeGateTexts>
+  className?: string
+}
+
+/** Non-dismissable blocking screen for organisations without a plan (spec: wave-2/upgrade-gate.md). */
+export function UpgradeGate({ onViewPlans, onSignOut, busy = false, texts, className }: UpgradeGateProps) {
+  const t: UpgradeGateTexts = { ...useMessages().upgradeGate, ...texts }
+  const ids = useId().replace(/:/g, '')
+  const titleId = `ty-gate-title-${ids}`
+  const descId = `ty-gate-desc-${ids}`
+  const dialogRef = useRef<HTMLElement>(null)
+  // RAC's Dialog does not forward aria-modal; the gate is modal, so say it.
+  useDomAttributes(dialogRef, { 'aria-modal': 'true' })
+  return (
+    <ModalOverlay isOpen isDismissable={false} isKeyboardDismissDisabled className={className ? `ty-gate ${className}` : 'ty-gate'}>
+      <AmbientBackdrop />
+      <Modal className="ty-gate__modal">
+        <Dialog className="ty-gate__dialog" ref={dialogRef} role="dialog" aria-labelledby={titleId} aria-describedby={descId}>
+          <p className="ty-gate__eyebrow">{t.eyebrow}</p>
+          <Heading slot="title" level={1} id={titleId} className="ty-gate__title">
+            {t.title}
+          </Heading>
+          <p id={descId} className="ty-gate__description">
+            {t.description} <span className="ty-visually-hidden">{t.cannotDismiss}</span>
+          </p>
+          <InlineNotice tone="warning" title={t.noticeTitle} urgency="none">
+            {t.noticeBody}
+          </InlineNotice>
+          <div className="ty-gate__actions">
+            <Button variant="primary" busy={busy} onPress={onViewPlans} autoFocus>
+              {t.viewPlans}
+            </Button>
+            <Button variant="quiet" onPress={onSignOut}>
+              {t.signOut}
+            </Button>
+          </div>
+        </Dialog>
+      </Modal>
+    </ModalOverlay>
+  )
+}

package/src/components/wheel-picker/WheelPicker.css

@@ -0,0 +1,149 @@
+/* WheelPicker (spec: wave-2/wheel-picker.md; design direction §2.5, §2.6, §2.7, §2.10). */
+@layer tympan.components {
+  .ty-wheel {
+    --ty-wheel-row: var(--ty-control-target);
+    --ty-wheel-rows: 5;
+    --ty-wheel-share: 1;
+    display: flex;
+    flex: var(--ty-wheel-share) 1 0;
+    flex-direction: column;
+    gap: var(--ty-space-1);
+    min-inline-size: 0;
+  }
+  .ty-wheel__caption {
+    color: var(--ty-ink-3);
+    font-size: var(--ty-font-size-meta);
+    line-height: var(--ty-font-line-height-meta);
+    text-align: center;
+  }
+  .ty-wheel__viewport {
+    position: relative;
+    block-size: calc(var(--ty-wheel-row) * var(--ty-wheel-rows));
+    overflow: hidden;
+    border-radius: var(--ty-radius-card);
+  }
+  /* Fade masks at the top and bottom. */
+  .ty-wheel__viewport::before,
+  .ty-wheel__viewport::after {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    z-index: 2;
+    block-size: calc(var(--ty-wheel-row) * (var(--ty-wheel-rows) - 1) / 2);
+    pointer-events: none;
+  }
+  .ty-wheel__viewport::before {
+    inset-block-start: 0;
+    background: linear-gradient(to bottom, var(--ty-surface-raised-solid), transparent);
+  }
+  .ty-wheel__viewport::after {
+    inset-block-end: 0;
+    background: linear-gradient(to top, var(--ty-surface-raised-solid), transparent);
+  }
+  .ty-wheel__band {
+    position: absolute;
+    inset-inline: var(--ty-space-1);
+    inset-block-start: calc(var(--ty-wheel-row) * (var(--ty-wheel-rows) - 1) / 2);
+    z-index: 0;
+    block-size: var(--ty-wheel-row);
+    border-radius: var(--ty-radius-control);
+    background: var(--ty-accent-soft);
+    pointer-events: none;
+  }
+  .ty-wheel__list {
+    position: relative;
+    z-index: 1;
+    box-sizing: border-box;
+    block-size: 100%;
+    overflow-y: auto;
+    padding-block: calc(var(--ty-wheel-row) * (var(--ty-wheel-rows) - 1) / 2);
+    scroll-snap-type: y mandatory;
+    scrollbar-width: none;
+    overscroll-behavior: contain;
+    outline: none;
+    touch-action: pan-y;
+  }
+  .ty-wheel__list::-webkit-scrollbar {
+    display: none;
+  }
+  .ty-wheel__viewport:has(.ty-wheel__list[data-focus-visible]) .ty-wheel__band,
+  .ty-wheel__viewport:has(.ty-wheel__row[data-focus-visible]) .ty-wheel__band {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: -2px;
+  }
+  .ty-wheel__row {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--ty-wheel-row);
+    padding-inline: var(--ty-space-2);
+    color: var(--ty-ink-3);
+    font-size: var(--ty-font-size-body);
+    font-variant-numeric: tabular-nums;
+    scroll-snap-align: center;
+    cursor: pointer;
+    outline: none;
+    transition:
+      opacity var(--ty-dur-quick) var(--ty-ease),
+      transform var(--ty-dur-quick) var(--ty-ease);
+    user-select: none;
+  }
+  .ty-wheel__row[data-distance='1'] {
+    opacity: 0.8;
+    transform: scale(0.94);
+  }
+  .ty-wheel__row[data-distance='2'],
+  .ty-wheel__row[data-distance='3'] {
+    opacity: 0.55;
+    transform: scale(0.88);
+  }
+  .ty-wheel__row[data-selected] {
+    color: var(--ty-ink);
+    font-weight: var(--ty-font-weight-semibold);
+  }
+  .ty-wheel[data-disabled] {
+    opacity: 0.55;
+  }
+  /* A pointer drag lifts the snap until release (set by the custom element
+     while a mouse or pen drag is active). */
+  .ty-wheel[data-dragging] .ty-wheel__list {
+    scroll-snap-type: none;
+    cursor: grabbing;
+  }
+
+  .ty-wheel-group {
+    display: flex;
+    gap: var(--ty-space-2);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ty-wheel__row,
+    .ty-wheel__row[data-distance] {
+      transform: none;
+      opacity: 1;
+      transition: none;
+    }
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    .ty-wheel__viewport::before,
+    .ty-wheel__viewport::after {
+      background: var(--ty-surface-raised-solid);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ty-wheel__band {
+      border: 2px solid Highlight;
+      background: Canvas;
+    }
+    .ty-wheel__row[data-selected] {
+      color: CanvasText;
+    }
+    .ty-wheel__viewport::before,
+    .ty-wheel__viewport::after {
+      background: Canvas;
+      opacity: 0.6;
+    }
+  }
+}

package/src/components/wheel-picker/WheelPicker.test.tsx

@@ -0,0 +1,150 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { cssOf, mediaBlock } from '../../../test/css'
+import { setMedia } from '../../../test/media'
+import { ThemeScope } from '../../internal/ThemeScope'
+import { WheelPicker, WheelPickerGroup } from './WheelPicker'
+import * as rtlDom from '@testing-library/react'
+import { expectNoAxeViolations as axeRtl } from '../../../test/axe'
+import { renderRtl } from '../../../test/rtl'
+
+describe('WheelPicker', () => {
+  const scrollTo = vi.fn()
+  beforeEach(() => {
+    scrollTo.mockReset()
+    Object.defineProperty(Element.prototype, 'scrollTo', { configurable: true, writable: true, value: scrollTo })
+  })
+  afterEach(() => {
+    delete (Element.prototype as { scrollTo?: unknown }).scrollTo
+  })
+
+  it('reports a clicked row', async () => {
+    const onChange = vi.fn()
+    render(<WheelPicker label="Letter" options={['a', 'b', 'c']} value="a" onChange={onChange} />)
+    await userEvent.click(screen.getByRole('option', { name: 'c' }))
+    expect(onChange).toHaveBeenCalledWith('c')
+  })
+
+  it('reports the value of object options, not the label', async () => {
+    const onChange = vi.fn()
+    render(
+      <WheelPicker
+        label="Month"
+        options={[
+          { value: '01', label: 'January' },
+          { value: '02', label: 'February' },
+        ]}
+        value="01"
+        onChange={onChange}
+      />,
+    )
+    await userEvent.click(screen.getByRole('option', { name: 'February' }))
+    expect(onChange).toHaveBeenCalledWith('02')
+  })
+
+  it('moves one row with ArrowDown', async () => {
+    const onChange = vi.fn()
+    render(<WheelPicker label="Letter" options={['a', 'b', 'c']} value="a" onChange={onChange} />)
+    await userEvent.tab()
+    expect(screen.getByRole('option', { name: 'a' })).toHaveFocus()
+    await userEvent.keyboard('{ArrowDown}')
+    expect(onChange).toHaveBeenCalledWith('b')
+  })
+
+  it('moves by the visible rows with PageDown', async () => {
+    const onChange = vi.fn()
+    render(<WheelPicker label="Number" options={['1', '2', '3', '4', '5', '6', '7', '8']} value="1" onChange={onChange} visibleRows={3} />)
+    await userEvent.tab()
+    await userEvent.keyboard('{PageDown}')
+    expect(onChange).toHaveBeenCalledWith('4')
+  })
+
+  it('tolerates a value outside the list without reporting', () => {
+    const onChange = vi.fn()
+    render(<WheelPicker label="Letter" options={['a', 'b']} value="zzz" onChange={onChange} />)
+    expect(screen.getAllByRole('option')).toHaveLength(2)
+    expect(screen.getAllByRole('option').some((o) => o.getAttribute('aria-selected') === 'true')).toBe(false)
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('calls only the changed column in a group', async () => {
+    const day = vi.fn()
+    const month = vi.fn()
+    render(
+      <WheelPickerGroup
+        label="Date"
+        columns={[
+          { label: 'Day', options: ['1', '2'], value: '1', onChange: day },
+          { label: 'Month', options: ['Jan', 'Feb'], value: 'Jan', onChange: month, share: 2 },
+        ]}
+      />,
+    )
+    expect(screen.getByRole('group', { name: 'Date' })).toBeInTheDocument()
+    await userEvent.click(screen.getByRole('option', { name: 'Feb' }))
+    expect(month).toHaveBeenCalledWith('Feb')
+    expect(day).not.toHaveBeenCalled()
+  })
+
+  it('centres the initial value on mount, once its row exists (React 18 and 19)', async () => {
+    // Clamp like a browser: a list cannot scroll past the rows it holds, so a
+    // scroll issued before React Aria commits the option rows would land on 0.
+    scrollTo.mockImplementation(function (this: HTMLElement, options: ScrollToOptions) {
+      const rowsInDom = this.querySelectorAll('[role="option"]').length
+      this.scrollTop = Math.min(options.top ?? 0, Math.max(0, rowsInDom - 1) * 44)
+    })
+    render(<WheelPicker label="Letter" options={['a', 'b', 'c', 'd', 'e']} value="d" onChange={() => {}} />)
+    await waitFor(() => expect(scrollTo).toHaveBeenCalled())
+    expect(screen.getByRole('listbox', { name: 'Letter' }).scrollTop).toBe(3 * 44)
+    expect(scrollTo).toHaveBeenCalledTimes(1)
+    expect(scrollTo).toHaveBeenCalledWith({ top: 3 * 44, behavior: 'instant' })
+  })
+
+  it('animates programmatic moves, and jumps under reduced motion', async () => {
+    const { rerender } = render(<WheelPicker label="Letter" options={['a', 'b', 'c']} value="a" onChange={() => {}} />)
+    await waitFor(() => expect(scrollTo).toHaveBeenCalledWith(expect.objectContaining({ top: 0, behavior: 'instant' })))
+    rerender(<WheelPicker label="Letter" options={['a', 'b', 'c']} value="c" onChange={() => {}} />)
+    expect(scrollTo).toHaveBeenLastCalledWith(expect.objectContaining({ behavior: 'smooth' }))
+    setMedia({ reducedMotion: true })
+    rerender(<WheelPicker label="Letter" options={['a', 'b', 'c']} value="b" onChange={() => {}} />)
+    expect(scrollTo).toHaveBeenLastCalledWith(expect.objectContaining({ behavior: 'instant' }))
+    const reduced = mediaBlock(cssOf('components/wheel-picker/WheelPicker.css'), /\(prefers-reduced-motion:\s*reduce\)/)
+    expect(reduced).toMatch(/transform:\s*none/)
+  })
+
+  it('keeps 44 px rows and a system-highlight band in forced colours', () => {
+    const css = cssOf('components/wheel-picker/WheelPicker.css')
+    expect(css).toMatch(/--ty-wheel-row:\s*var\(--ty-control-target\)/)
+    expect(mediaBlock(css, /\(forced-colors:\s*active\)/)).toMatch(/Highlight/)
+    expect(mediaBlock(css, /\(prefers-reduced-transparency:\s*reduce\)/)).toMatch(/surface-raised-solid/)
+  })
+
+  it('has no axe violations, light and dark', async () => {
+    const { container } = render(
+      <>
+        {(['light', 'dark'] as const).map((scheme) => (
+          <ThemeScope key={scheme} scheme={scheme}>
+            <WheelPicker label={`Hour ${scheme}`} options={['08', '09', '10']} value="09" onChange={() => {}} />
+            <WheelPickerGroup
+              label={`Date ${scheme}`}
+              columns={[
+                { label: `Day ${scheme}`, options: ['1', '2'], value: '1', onChange: () => {} },
+                { label: `Year ${scheme}`, options: ['2025', '2026'], value: '2026', onChange: () => {} },
+              ]}
+            />
+          </ThemeScope>
+        ))}
+      </>,
+    )
+    await expectNoAxeViolations(container)
+  })
+})
+
+describe('WheelPicker in right-to-left (ar)', () => {
+  it('renders mirrored where directional and passes axe', async () => {
+    const { container } = renderRtl(<WheelPicker label="الساعة" options={['٠٨', '٠٩', '١٠']} value="٠٩" onChange={() => {}} />)
+    expect(rtlDom.screen.getByRole('listbox', { name: 'الساعة' })).toBeInTheDocument()
+    await axeRtl(container)
+  })
+})

package/src/components/wheel-picker/WheelPicker.tsx

@@ -0,0 +1,228 @@
+import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties, type KeyboardEvent } from 'react'
+import { ListBox, ListBoxItem, type Key } from 'react-aria-components'
+import { cx } from '../../internal/cx'
+import { requestHaptic } from '../../internal/haptics'
+import { prefersReducedMotion } from '../../internal/media'
+
+export type WheelOption = string | { value: string; label: string }
+
+export interface WheelPickerProps {
+  options: WheelOption[]
+  value: string
+  onChange: (value: string) => void
+  label: string
+  /** Odd number of rows visible at once. */
+  visibleRows?: number
+  disabled?: boolean
+  className?: string
+  /** Relative width inside a WheelPickerGroup. */
+  share?: number
+  /** Shows the label as a caption above the wheel. */
+  showLabel?: boolean
+}
+
+interface Row {
+  id: string
+  text: string
+}
+
+const toRows = (options: WheelOption[]): Row[] => options.map((o) => (typeof o === 'string' ? { id: o, text: o } : { id: o.value, text: o.label }))
+const SETTLE_MS = 120
+const DEFAULT_ROW = 44
+
+/** Pointer-drag scrolling for mouse and pen; touch scrolls natively. */
+function useDragScroll(list: React.RefObject<HTMLElement | null>) {
+  const moved = useRef(false)
+  useEffect(() => {
+    const el = list.current
+    if (!el) return
+    let start: { y: number; top: number } | null = null
+    const down = (e: PointerEvent) => {
+      if (e.pointerType === 'touch') return
+      start = { y: e.clientY, top: el.scrollTop }
+      moved.current = false
+    }
+    const move = (e: PointerEvent) => {
+      if (!start) return
+      const dy = e.clientY - start.y
+      if (Math.abs(dy) > 4) moved.current = true
+      if (moved.current) el.scrollTop = start.top - dy
+    }
+    const up = () => {
+      start = null
+    }
+    el.addEventListener('pointerdown', down)
+    window.addEventListener('pointermove', move)
+    window.addEventListener('pointerup', up)
+    return () => {
+      el.removeEventListener('pointerdown', down)
+      window.removeEventListener('pointermove', move)
+      window.removeEventListener('pointerup', up)
+    }
+  }, [list])
+  /** True once, right after a drag ended (the following tap is ignored). */
+  return () => {
+    const was = moved.current
+    moved.current = false
+    return was
+  }
+}
+
+/**
+ * One wheel: a listbox whose selected option sits in the centre band
+ * (spec: wave-2/wheel-picker.md).
+ */
+export function WheelPicker(props: WheelPickerProps) {
+  const rows = useMemo(() => toRows(props.options), [props.options])
+  const visible = Math.max(3, (props.visibleRows ?? 5) | 1)
+  const listRef = useRef<HTMLDivElement>(null)
+  const index = rows.findIndex((r) => r.id === props.value)
+  const [centre, setCentre] = useState(Math.max(0, index))
+  const programmatic = useRef(false)
+  const settleTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const endedDrag = useDragScroll(listRef)
+  const { onChange } = props
+
+  const rowHeight = () => {
+    const item = listRef.current?.querySelector<HTMLElement>('[role="option"]')
+    return item?.offsetHeight || DEFAULT_ROW
+  }
+
+  // Bring the value's row to the band whenever the value changes. React Aria
+  // commits the option rows in a later pass than the ListBox itself (on
+  // React 18 in particular), so on mount the list can still be empty here and
+  // a scroll would be clamped to 0. Wait until the target row exists; the
+  // first placement jumps, later moves animate.
+  const placed = useRef(false)
+  useEffect(() => {
+    const el = listRef.current
+    const target = Math.max(0, index)
+    setCentre(target)
+    if (!el) return
+    const place = () => {
+      const first = !placed.current
+      placed.current = true
+      programmatic.current = true
+      const top = target * rowHeight()
+      const behavior: ScrollBehavior = first || prefersReducedMotion() ? 'instant' : 'smooth'
+      if (typeof el.scrollTo === 'function') el.scrollTo({ top, behavior })
+      else el.scrollTop = top
+      clearTimeout(settleTimer.current)
+      settleTimer.current = setTimeout(() => {
+        programmatic.current = false
+      }, 400)
+    }
+    const ready = () => el.querySelectorAll('[role="option"]').length > target
+    if (ready() || typeof MutationObserver === 'undefined') {
+      place()
+      return
+    }
+    const observer = new MutationObserver(() => {
+      if (!ready()) return
+      observer.disconnect()
+      place()
+    })
+    observer.observe(el, { childList: true, subtree: true })
+    return () => observer.disconnect()
+  }, [index])
+
+  // User scrolling: tick on every row that crosses the band, report on settle.
+  const onScroll = useCallback(() => {
+    const el = listRef.current
+    if (!el) return
+    const at = Math.min(rows.length - 1, Math.max(0, Math.round(el.scrollTop / rowHeight())))
+    setCentre((prev) => {
+      if (prev !== at && !programmatic.current) requestHaptic('light')
+      return at
+    })
+    if (programmatic.current) return
+    clearTimeout(settleTimer.current)
+    settleTimer.current = setTimeout(() => {
+      const row = rows[at]
+      if (row && row.id !== props.value) {
+        requestHaptic('light')
+        onChange(row.id)
+      }
+    }, SETTLE_MS)
+  }, [rows, props.value, onChange])
+
+  useEffect(() => {
+    const el = listRef.current
+    el?.addEventListener('scroll', onScroll, { passive: true })
+    return () => el?.removeEventListener('scroll', onScroll)
+  }, [onScroll])
+  useEffect(() => () => clearTimeout(settleTimer.current), [])
+
+  const choose = (keys: 'all' | Set<Key>) => {
+    if (keys === 'all' || endedDrag()) return
+    const [key] = [...keys]
+    if (key != null && String(key) !== props.value) onChange(String(key))
+  }
+
+  // PageUp/PageDown move by the number of visible rows.
+  const pageKeys = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.key !== 'PageUp' && e.key !== 'PageDown') return
+    e.preventDefault()
+    e.stopPropagation()
+    const from = Math.max(0, index)
+    const to = Math.min(rows.length - 1, Math.max(0, from + (e.key === 'PageUp' ? -visible : visible)))
+    const row = rows[to]
+    if (row && row.id !== props.value) onChange(row.id)
+    requestAnimationFrame(() => listRef.current?.querySelector<HTMLElement>(`[data-key="${CSS.escape(String(row?.id ?? ''))}"]`)?.focus())
+  }
+
+  const style = { '--ty-wheel-rows': visible, '--ty-wheel-share': props.share ?? 1 } as CSSProperties
+  return (
+    <div className={cx('ty-wheel', props.className)} style={style} data-disabled={props.disabled || undefined} onKeyDownCapture={pageKeys}>
+      {props.showLabel ? (
+        <span className="ty-wheel__caption" aria-hidden="true">
+          {props.label}
+        </span>
+      ) : null}
+      <div className="ty-wheel__viewport">
+        <span className="ty-wheel__band" aria-hidden="true" />
+        <ListBox
+          ref={listRef}
+          aria-label={props.label}
+          className="ty-wheel__list"
+          items={rows}
+          selectionMode="single"
+          selectionBehavior="replace"
+          disallowEmptySelection
+          shouldFocusWrap={false}
+          selectedKeys={index >= 0 ? [props.value] : []}
+          onSelectionChange={choose}
+          disabledKeys={props.disabled ? rows.map((r) => r.id) : undefined}
+        >
+          {(row) => (
+            <ListBoxItem id={row.id} textValue={row.text} className="ty-wheel__row" data-distance={Math.min(3, Math.abs(rows.indexOf(row) - centre))}>
+              {row.text}
+            </ListBoxItem>
+          )}
+        </ListBox>
+      </div>
+    </div>
+  )
+}
+
+export type WheelColumn = Omit<WheelPickerProps, 'visibleRows' | 'disabled' | 'className' | 'showLabel'>
+
+export interface WheelPickerGroupProps {
+  columns: WheelColumn[]
+  /** Name of the whole group. */
+  label: string
+  visibleRows?: number
+  disabled?: boolean
+  className?: string
+}
+
+/** Several wheels side by side for compound values (day, month, year). */
+export function WheelPickerGroup({ columns, label, visibleRows, disabled, className }: WheelPickerGroupProps) {
+  return (
+    <div role="group" aria-label={label} className={cx('ty-wheel-group', className)}>
+      {columns.map((column) => (
+        <WheelPicker key={column.label} {...column} visibleRows={visibleRows} disabled={disabled} showLabel />
+      ))}
+    </div>
+  )
+}

package/src/components/wizard-page/WizardPage.css

@@ -0,0 +1,114 @@
+/* WizardPage (spec: wave-2/wizard-page.md; design direction §2.1, §2.2, §2.5, §2.7). */
+@layer tympan.components {
+  .ty-wizard-page {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-6);
+    margin-inline: auto;
+    inline-size: 100%;
+    max-inline-size: var(--ty-layout-reading);
+  }
+  .ty-wizard-page__head {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-3);
+    padding: var(--ty-space-6);
+    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));
+  }
+  .ty-wizard-page__top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ty-space-3);
+  }
+  .ty-wizard-page__eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ty-space-2);
+    margin: 0;
+    color: var(--ty-ink-3);
+    font-size: var(--ty-font-size-eyebrow);
+    font-weight: var(--ty-font-weight-semibold);
+    line-height: var(--ty-font-line-height-eyebrow);
+    letter-spacing: var(--ty-font-tracking-eyebrow);
+    text-transform: uppercase;
+  }
+  .ty-wizard-page__eyebrow-icon > svg {
+    inline-size: 16px;
+    block-size: 16px;
+  }
+  .ty-wizard-page__title {
+    margin: 0;
+    color: var(--ty-ink);
+    font-family: var(--ty-font-serif);
+    font-size: var(--ty-font-size-h1);
+    font-weight: var(--ty-font-weight-bold);
+    line-height: var(--ty-font-line-height-h1);
+    letter-spacing: var(--ty-font-tracking-h1);
+    outline: none;
+  }
+  .ty-wizard-page__title:focus-visible {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 2px;
+  }
+  .ty-wizard-page__lead {
+    margin: 0;
+    max-inline-size: calc(var(--ty-measure-summary) * 1ch);
+    color: var(--ty-ink-2);
+    font-size: var(--ty-font-size-body-lg);
+    line-height: var(--ty-font-line-height-body-lg);
+  }
+  .ty-wizard-page__body {
+    animation: ty-wizard-cross var(--ty-dur-quick) var(--ty-ease);
+  }
+  @keyframes ty-wizard-cross {
+    from {
+      opacity: 0;
+    }
+  }
+  .ty-wizard-page__nav {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--ty-space-3);
+  }
+  @media (max-width: 767.98px) {
+    .ty-wizard-page__title {
+      font-size: var(--ty-font-size-h1-narrow);
+      line-height: var(--ty-font-line-height-h1-narrow);
+    }
+    .ty-wizard-page__head {
+      padding: var(--ty-space-5);
+    }
+  }
+  /* Under 640: full-width stacked buttons, primary shown first, read last. */
+  @media (max-width: 639.98px) {
+    .ty-wizard-page__nav {
+      flex-direction: column-reverse;
+    }
+    .ty-wizard-page__nav > * {
+      inline-size: 100%;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .ty-wizard-page__body {
+      animation: none;
+    }
+  }
+  @media (prefers-reduced-transparency: reduce) {
+    .ty-wizard-page__head {
+      background: var(--ty-surface-solid);
+      backdrop-filter: none;
+    }
+  }
+  @media (forced-colors: active) {
+    .ty-wizard-page__head {
+      border: 1px solid CanvasText;
+      backdrop-filter: none;
+    }
+  }
+}