Notes

</div>
  )],
  ['tree', <Tree treeData={treeData} defaultExpandAll />],
  ['tree-select', <TreeSelect treeData={treeSelectData} placeholder="Pick a folder" aria-label="Folder" />],
  ['upload', (
    <Upload aria-label="Attachments">
      <UploadDropzone />
    </Upload>
  )],
  ['virtual-list', (
    <VirtualList data={rows} height={80} itemHeight={40} itemKey="id">
      {(row) => <div className="h-10">{row.name}</div>}
    </VirtualList>
  )],

/*
   * From here down: the compositions the showcase gained when the Storybook-only
   * demos were ported. Each one is here because it puts a *different* shape into
   * the tree than the case above it already covers — a third checkbox state, a
   * button layered over a button, a listbox with no visible label. A second
   * spelling of something already audited is not worth a case.
   */
  ['avatar (group and badge)', (
    <AvatarGroup>
      <Avatar>
        <AvatarFallback>AL</AvatarFallback>
        <AvatarBadge />
      </Avatar>
      <Avatar>
        <AvatarFallback>GH</AvatarFallback>
      </Avatar>
      <AvatarGroupCount>+7</AvatarGroupCount>
    </AvatarGroup>
  )],
  /* BreadcrumbEllipsis stands in for the crumbs that were dropped; if it ever
     loses its own accessible name the trail silently ends at "Home". */
  ['breadcrumb (collapsed)', (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbEllipsis />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Button</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )],
  ['card (with a form)', (
    <Card>
      <CardHeader>
        <CardTitle>Sign in</CardTitle>
        <CardDescription>Use your work e-mail.</CardDescription>
      </CardHeader>
      <CardContent>
        <Label htmlFor="card-email">E-mail</Label>
        <Input id="card-email" type="email" />
      </CardContent>
      <CardFooter>
        <Button>Sign in</Button>
      </CardFooter>
    </Card>
  )],
  /* Command was audited nowhere before this. The list is a `listbox` built by
     hand rather than by Radix, so its option roles and `aria-activedescendant`
     are the kit's own code and nothing else here checks them. */
  ['command', (
    <Command label="Commands">
      <CommandInput placeholder="Type a command…" />
      <CommandList>
        <CommandEmpty>Nothing matches.</CommandEmpty>
        <CommandGroup heading="Commands">
          <CommandItem value="toggle-theme" keywords={['dark', 'light']}>
            Toggle theme
          </CommandItem>
          <CommandItem value="billing" disabled>
            Billing
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )],
  ['checkbox (indeterminate parent)', (
    <div>
      <div className="flex items-center gap-2">
        <Checkbox id="all" checked="indeterminate" />
        <Label htmlFor="all">Select all</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="one" defaultChecked />
        <Label htmlFor="one">Item one</Label>
      </div>
    </div>
  )],
  /* `formatter` replaces the displayed text while `role="spinbutton"` keeps
     announcing the number — this is the case that catches the two diverging. */
  ['input-number (formatted)', (
    <InputNumber
      defaultValue={1250}
      min={0}
      step={50}
      aria-label="Amount"
      formatter={(value) => `${value ?? ''} AZN`}
      parser={(display) => Number(display?.replace(/[^\d.-]/g, '') ?? 0)}
    />
  )],
  ['progress-circle (indeterminate)', <ProgressCircle aria-label="Working" />],
  ['radio-group (disabled option)', (
    <RadioGroup defaultValue="standard" aria-label="Delivery">
      <div className="flex items-center gap-2">
        <RadioGroupItem value="standard" id="standard" />
        <Label htmlFor="standard">Standard</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="same-day" id="same-day" disabled />
        <Label htmlFor="same-day">Same day</Label>
      </div>
    </RadioGroup>
  )],
  /* The one that most needs a regression test: `clearable` renders a reset
     button layered over the trigger. It is a *sibling* precisely because a
     button inside a button is `nested-interactive`, which is what axe reports
     here the moment someone nests it again. */
  ['select (clearable)', (
    <div>
      <Label htmlFor="city">City</Label>
      <Select defaultValue="baku">
        <SelectTrigger id="city" clearable>
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="baku">Baku</SelectItem>
        </SelectContent>
      </Select>
    </div>
  )],
  ['tabs (vertical, with a disabled tab)', (
    <Tabs defaultValue="overview" orientation="vertical">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="billing" disabled>Billing</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">Overview</TabsContent>
      <TabsContent value="billing">Billing</TabsContent>
    </Tabs>
  )],
  ['tree-select (searchable)', (
    <TreeSelect
      treeData={treeSelectData}
      showSearch
      placeholder="Search folders…"
      aria-label="Folder"
    />
  )],
  ['upload (button trigger)', <Upload variant="button" aria-label="Attachments" />],
];