<.scroll_area
  aria-label="Recent releases"
  class="max-h-56 w-full max-w-sm rounded-lg border border-gray-200 p-3 dark:border-gray-800"
>
  <ul class="space-y-2 text-sm text-gray-700 dark:text-gray-300">
    <li :for={n <- 1..14} class="flex items-center justify-between gap-4">
      <span>Release note {n}</span>
      <span class="text-xs text-gray-400">v4.{n}.0</span>
    </li>
  </ul>
</.scroll_area>

<div class="w-full max-w-sm rounded-lg border border-gray-200 p-4 dark:border-gray-800">
  <div class="mb-3 text-sm font-medium text-gray-900 dark:text-gray-100">Topics</div>
  <.scroll_area orientation="horizontal" fade_edges class="w-full pb-2">
    <div class="flex w-max gap-2">
      <.badge
        :for={
          tag <- ~w(elixir phoenix liveview heex tailwind oban ecto postgres fly accessibility)
        }
        label={tag}
        variant="soft"
      />
    </div>
  </.scroll_area>
</div>

<.scroll_area
  orientation="both"
  gutter_stable
  aria-label="Deploy log"
  class="max-h-48 w-full max-w-md rounded-lg bg-gray-900 p-4 dark:border dark:border-gray-800"
>
  <pre class="w-max font-mono text-xs leading-6 text-gray-100">{PetalComponents.Showcase.ScrollArea.deploy_log()}</pre>
</.scroll_area>

<.scroll_area
  visibility="always"
  class="max-h-40 w-full max-w-sm rounded-lg border border-gray-200 p-3 text-sm text-gray-700 dark:border-gray-800 dark:text-gray-300"
>
  <p class="mb-3">
    Scrollbars belong to the operating system. This component themes what the platform hands it - the thumb colour, the track, the width where that is ours to set - and leaves the behaviour alone.
  </p>
  <p class="mb-3">
    That means native momentum scrolling, native keyboard handling and native assistive-tech behaviour, none of which a JavaScript scrollbar reimplementation gets for free.
  </p>
  <p>
    The trade is that a Mac still looks like a Mac. We think that is the right way round.
  </p>
</.scroll_area>