@a4ui/core 0.37.0 → 0.38.0

package/src/ui/NavigationMenu.tsx

@@ -0,0 +1,262 @@
+// Site navigation with rich dropdown panels on Kobalte's NavigationMenu
+// primitive. Desktop: triggers open panels rendered into ONE shared viewport
+// that animates its size between panels. Mobile (< md): collapses to a
+// hamburger button that opens a Drawer with an Accordion of the sections.
+import { NavigationMenu as KNav } from '@kobalte/core/navigation-menu'
+import { ChevronDown, Menu as MenuIcon } from 'lucide-solid'
+import type { JSX, ParentProps } from 'solid-js'
+import { createSignal, For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { useMediaQuery } from '../lib/media'
+import { Accordion } from './Accordion'
+import { Button } from './Button'
+import { Drawer } from './Drawer'
+
+const TRIGGER =
+  'inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm font-medium text-foreground outline-none transition-colors hover:bg-muted data-[expanded]:bg-muted focus-visible:ring-2 focus-visible:ring-ring'
+
+/** One section of the collapsed (mobile) navigation. */
+export interface NavigationMenuMobileSection {
+  /** Section title shown on the accordion trigger (or the link label). */
+  label: string
+  /** Destination when the section is a plain link with no children. */
+  href?: string
+  /** Child links; when present the section becomes an accordion entry. */
+  links?: { title: string; href: string; description?: string }[]
+}
+
+/** Props of {@link NavigationMenu}. */
+export interface NavigationMenuProps extends ParentProps {
+  /** Accessible name of the navigation landmark. @default 'Main' */
+  label?: string
+  /**
+   * The same sections as `children`, as data. Used below the `md` breakpoint,
+   * where the menu collapses into a hamburger + drawer. Required: the mobile
+   * layout cannot be derived from the desktop JSX.
+   */
+  mobileSections: NavigationMenuMobileSection[]
+  /** Drawer title. @default 'Menu' */
+  mobileTitle?: string
+  /** Accessible label of the hamburger button. @default 'Open navigation' */
+  mobileButtonLabel?: string
+  class?: string
+}
+
+/**
+ * Site navigation bar whose triggers open rich panels (links with icon, title
+ * and description, featured cards) inside a shared, size-animating viewport.
+ * Hover or click opens a panel, Escape closes it, and the links inside are
+ * reachable with Tab. The root is the `<ul>` list of items.
+ *
+ * @example
+ * ```tsx
+ * <NavigationMenu mobileSections={[{ label: 'Docs', href: '/docs' }]}>
+ *   <NavigationMenuItem>
+ *     <NavigationMenuTrigger>Product</NavigationMenuTrigger>
+ *     <NavigationMenuContent>
+ *       <NavigationMenuPanelLink href="/tour" title="Tour" description="A quick walkthrough" />
+ *     </NavigationMenuContent>
+ *   </NavigationMenuItem>
+ *   <NavigationMenuLink href="/docs">Docs</NavigationMenuLink>
+ * </NavigationMenu>
+ * ```
+ */
+export function NavigationMenu(props: NavigationMenuProps): JSX.Element {
+  const isDesktop = useMediaQuery('(min-width: 768px)')
+  return (
+    <Show when={isDesktop()} fallback={<MobileNavigation {...props} />}>
+      <KNav aria-label={props.label ?? 'Main'} class={cn('relative flex items-center gap-1', props.class)}>
+        {props.children}
+        <KNav.Viewport class="navmenu-viewport bg-glass relative z-50 mt-2 h-[var(--kb-navigation-menu-viewport-height)] w-[var(--kb-navigation-menu-viewport-width)] overflow-hidden rounded-2xl shadow-2xl transition-[width,height] duration-300 ease-out">
+          <KNav.Arrow class="hidden" />
+        </KNav.Viewport>
+      </KNav>
+    </Show>
+  )
+}
+
+function MobileNavigation(props: NavigationMenuProps): JSX.Element {
+  const [open, setOpen] = createSignal(false)
+  const withLinks = () => props.mobileSections.filter((s) => s.links?.length)
+  const plain = () => props.mobileSections.filter((s) => !s.links?.length)
+  return (
+    <nav aria-label={props.label ?? 'Main'} class={props.class}>
+      <Button
+        variant="outline"
+        aria-label={props.mobileButtonLabel ?? 'Open navigation'}
+        aria-haspopup="dialog"
+        aria-expanded={open()}
+        onClick={() => setOpen(true)}
+      >
+        <MenuIcon class="h-4 w-4" />
+      </Button>
+      <Drawer side="left" open={open()} onOpenChange={setOpen} title={props.mobileTitle ?? 'Menu'}>
+        <div
+          class="p-5"
+          onKeyDown={(e) => {
+            // Escape typed while an accordion trigger has focus does not reach
+            // the dialog's own dismiss handler, so close explicitly.
+            if (e.key === 'Escape') setOpen(false)
+          }}
+        >
+          <Accordion
+            items={withLinks().map((s) => ({
+              value: s.label,
+              title: s.label,
+              content: (
+                <ul class="space-y-1">
+                  <For each={s.links}>
+                    {(l) => (
+                      <li>
+                        <a
+                          href={l.href}
+                          class="block rounded-md px-2 py-1.5 outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+                        >
+                          <span class="block text-sm font-medium text-foreground">{l.title}</span>
+                          <Show when={l.description}>
+                            <span class="block text-xs text-muted-foreground">{l.description}</span>
+                          </Show>
+                        </a>
+                      </li>
+                    )}
+                  </For>
+                </ul>
+              ),
+            }))}
+          />
+          <ul class="mt-2 space-y-1">
+            <For each={plain()}>
+              {(s) => (
+                <li>
+                  <a
+                    href={s.href}
+                    class="block rounded-md px-2 py-3 text-sm font-medium text-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+                  >
+                    {s.label}
+                  </a>
+                </li>
+              )}
+            </For>
+          </ul>
+        </div>
+      </Drawer>
+    </nav>
+  )
+}
+
+/** One top-level entry: pairs a trigger with its panel. */
+export function NavigationMenuItem(props: ParentProps): JSX.Element {
+  return <KNav.Menu>{props.children}</KNav.Menu>
+}
+
+/** Button that opens the sibling {@link NavigationMenuContent}; shows a chevron. */
+export function NavigationMenuTrigger(props: ParentProps & { class?: string }): JSX.Element {
+  return (
+    <KNav.Trigger class={cn(TRIGGER, 'group', props.class)}>
+      {props.children}
+      <KNav.Icon class="transition-transform duration-200 group-data-[expanded]:rotate-180">
+        <ChevronDown class="h-3.5 w-3.5" />
+      </KNav.Icon>
+    </KNav.Trigger>
+  )
+}
+
+/** Props of {@link NavigationMenuContent}. */
+export interface NavigationMenuContentProps extends ParentProps {
+  class?: string
+}
+
+/**
+ * The panel of one item. Rendered inside the shared viewport, which resizes to
+ * fit it. Put {@link NavigationMenuPanelLink}s in it, laid out with a grid.
+ */
+export function NavigationMenuContent(props: NavigationMenuContentProps): JSX.Element {
+  // Kobalte's menu content swallows Tab, which would make the links unreachable
+  // with a plain Tab press. Walk the panel's links with Tab / Shift+Tab, and
+  // when the end is passed close the menu (focus returns to its trigger) so
+  // the key never traps focus.
+  const onTab = (e: KeyboardEvent & { currentTarget: HTMLElement }): void => {
+    if (e.key !== 'Tab') return
+    const links = Array.from(e.currentTarget.querySelectorAll<HTMLElement>('a[role="menuitem"]'))
+    const at = links.indexOf(document.activeElement as HTMLElement)
+    const next = at + (e.shiftKey ? -1 : 1)
+    e.preventDefault()
+    // Deferred: Kobalte's own Shift+Tab handling re-focuses the panel right after this handler.
+    const target = links[next]
+    if (target) setTimeout(() => target.focus(), 0)
+    else e.currentTarget.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+  }
+  return (
+    <KNav.Portal>
+      <KNav.Content
+        class={cn(
+          'navmenu-content absolute left-0 top-0 w-max max-w-[min(90vw,40rem)] p-3 outline-none',
+          props.class,
+        )}
+        onKeyDown={onTab}
+      >
+        {props.children}
+      </KNav.Content>
+    </KNav.Portal>
+  )
+}
+
+/** Props of {@link NavigationMenuLink}. */
+export interface NavigationMenuLinkProps extends ParentProps {
+  href: string
+  class?: string
+}
+
+/** A top-level link with no panel; takes part in the trigger roving focus. */
+export function NavigationMenuLink(props: NavigationMenuLinkProps): JSX.Element {
+  return (
+    <KNav.Menu value={`link-trigger-${props.href}`}>
+      <KNav.Trigger as="a" href={props.href} class={cn(TRIGGER, props.class)}>
+        {props.children}
+      </KNav.Trigger>
+    </KNav.Menu>
+  )
+}
+
+/** Props of {@link NavigationMenuPanelLink}. */
+export interface NavigationMenuPanelLinkProps {
+  href: string
+  title: string
+  description?: string
+  /** Leading icon element (e.g. a lucide icon). */
+  icon?: JSX.Element
+  /** Renders as a large highlighted card, typically spanning several grid rows. */
+  featured?: boolean
+  class?: string
+}
+
+/** A link inside a panel: icon + title + description, or a featured card. */
+export function NavigationMenuPanelLink(props: NavigationMenuPanelLinkProps): JSX.Element {
+  return (
+    <KNav.Item
+      href={props.href}
+      class={cn(
+        'flex gap-3 rounded-xl p-3 text-left no-underline outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring',
+        props.featured
+          ? 'flex-col justify-end bg-gradient-to-br from-primary/30 to-accent/20 hover:from-primary/40'
+          : 'items-start hover:bg-muted data-[highlighted]:bg-muted',
+        props.class,
+      )}
+    >
+      <Show when={props.icon}>
+        <span class="mt-0.5 grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-primary/15 text-primary">
+          {props.icon}
+        </span>
+      </Show>
+      <span class="min-w-0">
+        <span class={cn('block font-medium text-foreground', props.featured ? 'text-base' : 'text-sm')}>
+          {props.title}
+        </span>
+        <Show when={props.description}>
+          <span class="mt-0.5 block text-xs leading-snug text-muted-foreground">{props.description}</span>
+        </Show>
+      </span>
+    </KNav.Item>
+  )
+}

package/src/ui/PromptComposer.tsx

@@ -18,6 +18,11 @@ export interface PromptComposerProps {
   /** Attachment labels/filenames shown as removable chips above the input. */
   attachments?: string[]
   onRemoveAttachment?: (index: number) => void
+  /**
+   * Rich attachment slot rendered above the input (alongside the chips above).
+   * Pass `Attachment`s, ideally wrapped in an `AttachmentGroup`.
+   */
+  attachmentItems?: JSX.Element
   /** When set, shows a paperclip button that calls this on click. */
   onAttach?: () => void
   class?: string
@@ -92,6 +97,12 @@ export function PromptComposer(props: PromptComposerProps): JSX.Element {
         </div>
       </Show>
 
+      <Show when={props.attachmentItems}>
+        <div data-slot="composer-attachments" class="mb-2">
+          {props.attachmentItems}
+        </div>
+      </Show>
+
       <textarea
         ref={textareaRef}
         aria-label="Message"

package/src/ui/Prose.tsx

@@ -0,0 +1,63 @@
+import { splitProps, type JSX, type ParentProps } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+
+import { cn } from '../lib/cn'
+
+export type ProseSize = 'sm' | 'base' | 'lg'
+
+interface ProseProps extends ParentProps {
+  /** Body text scale. @default 'base' */
+  size?: ProseSize
+  /** Element to render. @default 'div' */
+  as?: 'div' | 'article' | 'section'
+  class?: string
+}
+
+export type { ProseProps }
+
+const SIZE: Record<ProseSize, string> = {
+  sm: 'text-sm [&_h1]:text-2xl [&_h2]:text-xl [&_h3]:text-lg [&_h4]:text-base [&_.lead]:text-base',
+  base: 'text-base [&_h1]:text-4xl [&_h2]:text-2xl [&_h3]:text-xl [&_h4]:text-lg [&_.lead]:text-xl',
+  lg: 'text-lg [&_h1]:text-5xl [&_h2]:text-3xl [&_h3]:text-2xl [&_h4]:text-xl [&_.lead]:text-2xl',
+}
+
+const PROSE =
+  'max-w-none leading-7 text-foreground ' +
+  '[&_h1]:mb-4 [&_h1]:font-bold [&_h1]:tracking-tight ' +
+  '[&_h2]:mb-3 [&_h2]:mt-8 [&_h2]:border-b [&_h2]:border-border [&_h2]:pb-2 [&_h2]:font-semibold [&_h2]:tracking-tight ' +
+  '[&_h3]:mb-2 [&_h3]:mt-6 [&_h3]:font-semibold ' +
+  '[&_h4]:mb-2 [&_h4]:mt-4 [&_h4]:font-semibold ' +
+  '[&_p]:my-4 [&_.lead]:text-muted-foreground ' +
+  '[&_a]:font-medium [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-4 [&_a:hover]:opacity-80 ' +
+  '[&_blockquote]:my-6 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-muted-foreground ' +
+  '[&_ul]:my-4 [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:my-4 [&_ol]:list-decimal [&_ol]:pl-6 [&_li]:my-1 ' +
+  '[&_code]:rounded [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.875em] ' +
+  '[&_pre]:my-4 [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:border [&_pre]:border-border [&_pre]:bg-muted [&_pre]:p-4 ' +
+  '[&_pre_code]:bg-transparent [&_pre_code]:p-0 ' +
+  '[&_hr]:my-8 [&_hr]:border-border ' +
+  '[&_table]:my-6 [&_table]:w-full [&_table]:border-collapse [&_table]:text-sm ' +
+  '[&_th]:border-b [&_th]:border-border [&_th]:px-3 [&_th]:py-2 [&_th]:text-left [&_th]:font-semibold ' +
+  '[&_td]:border-b [&_td]:border-border [&_td]:px-3 [&_td]:py-2'
+
+/**
+ * Typography wrapper that styles raw HTML or rendered markdown children
+ * (headings, paragraphs, `.lead`, links, quotes, lists, code, tables) with
+ * token colors. No CSS file and no typography plugin.
+ *
+ * @example
+ * ```tsx
+ * <Prose size="lg"><div innerHTML={renderedMarkdown} /></Prose>
+ * ```
+ */
+export function Prose(props: ProseProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['size', 'as', 'class', 'children'])
+  return (
+    <Dynamic
+      component={local.as ?? 'div'}
+      class={cn(PROSE, SIZE[local.size ?? 'base'], local.class)}
+      {...rest}
+    >
+      {local.children}
+    </Dynamic>
+  )
+}

package/src/ui/Questionnaire.tsx

@@ -0,0 +1,331 @@
+// Multi-step, data-driven questionnaire: one question per step.
+import type { JSX } from 'solid-js'
+import { createEffect, createSignal, createUniqueId, For, on, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Button } from './Button'
+import { Progress } from './Progress'
+import { Textarea } from './Textarea'
+
+/** A selectable choice of a `single` / `multiple` {@link QuestionnaireQuestion}. */
+export interface QuestionnaireOption {
+  value: string
+  label: string
+  description?: string
+}
+
+/** One step of a {@link Questionnaire}. */
+export interface QuestionnaireQuestion {
+  /** Key of the answer in the submitted object. Must be unique. */
+  id: string
+  title: string
+  description?: string
+  /** `single` = pick one, `multiple` = pick any, `text` = free text. */
+  type: 'single' | 'multiple' | 'text'
+  /** Choices; required for `single` and `multiple`. */
+  options?: QuestionnaireOption[]
+  /** Required questions block "Next" until answered and cannot be skipped. */
+  required?: boolean
+  /** Placeholder of the `text` field. */
+  placeholder?: string
+}
+
+/** Answers keyed by question id. Unanswered / skipped questions have no key. */
+export type QuestionnaireAnswers = Record<string, string | string[]>
+
+/** Overridable UI strings (i18n). `stepOf` accepts `{current}` and `{total}`. */
+export interface QuestionnaireLabels {
+  next: string
+  previous: string
+  skip: string
+  submit: string
+  required: string
+  stepOf: string
+  thanks: string
+  thanksDescription: string
+}
+
+const DEFAULT_LABELS: QuestionnaireLabels = {
+  next: 'Next',
+  previous: 'Previous',
+  skip: 'Skip',
+  submit: 'Submit',
+  required: 'This question is required.',
+  stepOf: '{current} of {total}',
+  thanks: 'Thanks!',
+  thanksDescription: 'Your answers have been submitted.',
+}
+
+export interface QuestionnaireProps {
+  questions: QuestionnaireQuestion[]
+  /** Called once with the answers when the last step is submitted. */
+  onSubmit: (answers: QuestionnaireAnswers) => void
+  /** Called with the full answers object after every change. */
+  onChange?: (answers: QuestionnaireAnswers) => void
+  /** Answers to start from (read once on mount). */
+  initialAnswers?: QuestionnaireAnswers
+  labels?: Partial<QuestionnaireLabels>
+  /** Replaces the default "Thanks" panel shown after submit. */
+  summary?: (answers: QuestionnaireAnswers) => JSX.Element
+  class?: string
+}
+
+function isAnswered(value: string | string[] | undefined): boolean {
+  if (value === undefined) return false
+  return Array.isArray(value) ? value.length > 0 : value.trim() !== ''
+}
+
+/**
+ * Multi-step questionnaire / survey, driven by a `questions` array: one question
+ * per step with a progress indicator, required validation (inline error linked
+ * via `aria-describedby`), Previous / Skip / Next / Submit, and a final panel.
+ *
+ * Keyboard: digits `1`-`9` pick the matching option on choice steps, `Enter`
+ * advances (in the free-text field use `Ctrl`/`Cmd` + `Enter`, since `Enter`
+ * inserts a newline there). Focus moves to the step heading on every step change.
+ * Step transitions are CSS animations, neutralised under `prefers-reduced-motion`.
+ *
+ * @example
+ * ```tsx
+ * <Questionnaire
+ *   questions={[
+ *     { id: 'role', title: 'Your role?', type: 'single', required: true,
+ *       options: [{ value: 'dev', label: 'Developer' }, { value: 'pm', label: 'Manager' }] },
+ *     { id: 'notes', title: 'Anything else?', type: 'text' },
+ *   ]}
+ *   onSubmit={(answers) => save(answers)}
+ * />
+ * ```
+ */
+export function Questionnaire(props: QuestionnaireProps): JSX.Element {
+  const labels = () => ({ ...DEFAULT_LABELS, ...props.labels })
+  const [answers, setAnswers] = createSignal<QuestionnaireAnswers>({ ...props.initialAnswers })
+  const [index, setIndex] = createSignal(0)
+  const [direction, setDirection] = createSignal<'forward' | 'back'>('forward')
+  const [error, setError] = createSignal(false)
+  const [submitted, setSubmitted] = createSignal(false)
+  const uid = createUniqueId()
+  let stepEl: HTMLDivElement | undefined
+
+  const total = () => props.questions.length
+  const question = () => props.questions[index()]
+  const isLast = () => index() === total() - 1
+  const errorId = () => `${uid}-error`
+  const current = () => answers()[question().id]
+
+  const setAnswer = (id: string, value: string | string[]) => {
+    const next = { ...answers() }
+    if (isAnswered(value)) next[id] = value
+    else delete next[id]
+    setAnswers(next)
+    setError(false)
+    props.onChange?.(next)
+  }
+
+  const selectOption = (q: QuestionnaireQuestion, value: string) => {
+    if (q.type === 'single') {
+      setAnswer(q.id, value)
+      return
+    }
+    const picked = (answers()[q.id] as string[] | undefined) ?? []
+    setAnswer(q.id, picked.includes(value) ? picked.filter((v) => v !== value) : [...picked, value])
+  }
+
+  const go = (to: number, dir: 'forward' | 'back') => {
+    setDirection(dir)
+    setError(false)
+    setIndex(to)
+  }
+
+  const next = () => {
+    if (question().required && !isAnswered(current())) {
+      setError(true)
+      queueMicrotask(() => stepEl?.querySelector<HTMLElement>('input, textarea')?.focus())
+      return
+    }
+    if (isLast()) {
+      setSubmitted(true)
+      props.onSubmit(answers())
+    } else go(index() + 1, 'forward')
+  }
+  const previous = () => {
+    if (index() > 0) go(index() - 1, 'back')
+  }
+  const skip = () => {
+    if (!question().required && !isLast()) go(index() + 1, 'forward')
+  }
+
+  // Announce the new step by moving focus to its heading (not on first render).
+  createEffect(
+    on(
+      index,
+      () => queueMicrotask(() => stepEl?.querySelector<HTMLElement>('[data-questionnaire-heading]')?.focus()),
+      { defer: true },
+    ),
+  )
+
+  const onKeyDown = (ev: KeyboardEvent) => {
+    if (ev.altKey || submitted()) return
+    const target = ev.target as HTMLElement
+    const typing =
+      target instanceof HTMLTextAreaElement || (target instanceof HTMLInputElement && target.type === 'text')
+    const q = question()
+    if (/^[1-9]$/.test(ev.key) && !ev.ctrlKey && !ev.metaKey && !typing && q.type !== 'text') {
+      const option = q.options?.[Number(ev.key) - 1]
+      if (!option) return
+      ev.preventDefault()
+      selectOption(q, option.value)
+    } else if (ev.key === 'Enter' && !(target instanceof HTMLButtonElement)) {
+      if (target instanceof HTMLTextAreaElement && !ev.ctrlKey && !ev.metaKey) return
+      ev.preventDefault()
+      next()
+    }
+  }
+
+  return (
+    <div class={cn('card flex w-full max-w-xl flex-col gap-5 p-5', props.class)} onKeyDown={onKeyDown}>
+      <Show
+        when={!submitted()}
+        fallback={
+          <div data-testid="questionnaire-done" class="flex flex-col gap-2">
+            <Show
+              when={props.summary}
+              fallback={
+                <>
+                  <h2
+                    ref={(el) => queueMicrotask(() => el.focus())}
+                    tabindex="-1"
+                    class="text-lg font-semibold text-foreground outline-none"
+                  >
+                    {labels().thanks}
+                  </h2>
+                  <p class="text-sm text-muted-foreground">{labels().thanksDescription}</p>
+                </>
+              }
+            >
+              {(summary) => summary()(answers())}
+            </Show>
+          </div>
+        }
+      >
+        <Progress
+          value={index() + 1}
+          max={total()}
+          label={labels()
+            .stepOf.replace('{current}', String(index() + 1))
+            .replace('{total}', String(total()))}
+        />
+        <div ref={stepEl}>
+          <Show when={question()} keyed>
+            {(q) => (
+              <div
+                class={cn(
+                  'flex flex-col gap-4',
+                  direction() === 'forward'
+                    ? 'animate-[questionnaire-step-in_0.25s_ease-out]'
+                    : 'animate-[questionnaire-step-in-back_0.25s_ease-out]',
+                )}
+              >
+                <div class="flex flex-col gap-1">
+                  <h2
+                    tabindex="-1"
+                    data-questionnaire-heading
+                    class="text-lg font-semibold text-foreground outline-none"
+                  >
+                    {q.title}
+                    <Show when={q.required}>
+                      <span aria-hidden="true" class="text-destructive">
+                        {' *'}
+                      </span>
+                    </Show>
+                  </h2>
+                  <Show when={q.description}>
+                    <p class="text-sm text-muted-foreground">{q.description}</p>
+                  </Show>
+                </div>
+
+                <Show
+                  when={q.type === 'text'}
+                  fallback={
+                    <fieldset class="flex flex-col gap-2" aria-describedby={error() ? errorId() : undefined}>
+                      <legend class="sr-only">{q.title}</legend>
+                      <For each={q.options}>
+                        {(option, i) => {
+                          const checked = () => {
+                            const a = answers()[q.id]
+                            return Array.isArray(a) ? a.includes(option.value) : a === option.value
+                          }
+                          return (
+                            <label
+                              class={cn(
+                                'flex cursor-pointer items-start gap-3 rounded-md border border-border px-3 py-2 text-sm text-foreground transition-colors hover:bg-muted has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring',
+                                checked() && 'border-primary bg-primary/10',
+                              )}
+                            >
+                              <input
+                                type={q.type === 'single' ? 'radio' : 'checkbox'}
+                                name={`${uid}-${q.id}`}
+                                value={option.value}
+                                checked={checked()}
+                                aria-invalid={error() || undefined}
+                                class="mt-0.5 h-4 w-4 accent-primary"
+                                onChange={() => selectOption(q, option.value)}
+                              />
+                              <span class="flex flex-1 flex-col">
+                                <span class="font-medium">{option.label}</span>
+                                <Show when={option.description}>
+                                  <span class="text-muted-foreground">{option.description}</span>
+                                </Show>
+                              </span>
+                              <Show when={i() < 9}>
+                                <kbd
+                                  aria-hidden="true"
+                                  class="rounded border border-border px-1.5 text-xs text-muted-foreground"
+                                >
+                                  {i() + 1}
+                                </kbd>
+                              </Show>
+                            </label>
+                          )
+                        }}
+                      </For>
+                    </fieldset>
+                  }
+                >
+                  <Textarea
+                    value={(current() as string | undefined) ?? ''}
+                    onInput={(v) => setAnswer(q.id, v)}
+                    aria-label={q.title}
+                    placeholder={q.placeholder}
+                    aria-invalid={error() || undefined}
+                    aria-describedby={error() ? errorId() : undefined}
+                  />
+                </Show>
+
+                <Show when={error()}>
+                  <p id={errorId()} role="alert" class="text-sm text-destructive">
+                    {labels().required}
+                  </p>
+                </Show>
+              </div>
+            )}
+          </Show>
+        </div>
+
+        <div class="flex items-center justify-between gap-2">
+          <Button variant="ghost" onClick={previous} disabled={index() === 0}>
+            {labels().previous}
+          </Button>
+          <div class="flex items-center gap-2">
+            <Show when={!question().required && !isLast()}>
+              <Button variant="outline" onClick={skip}>
+                {labels().skip}
+              </Button>
+            </Show>
+            <Button onClick={next}>{isLast() ? labels().submit : labels().next}</Button>
+          </div>
+        </div>
+      </Show>
+    </div>
+  )
+}