.

src/components/list/index.ts

@@ -0,0 +1 @@
+export { List } from "./list";

src/components/list/list.module.css

@@ -0,0 +1,92 @@
+.container {
+  --_space: var(--size-6);
+  display: grid;
+  grid: auto auto / auto auto;
+  grid-template-areas:
+    "heading metadata"
+    "list list";
+  justify-content: space-between;
+  inline-size: 100%;
+
+  padding-inline: var(--_space);
+}
+
+.heading {
+  grid-area: heading;
+  font-size: var(--size-7);
+  color: var(--text-1);
+  
+  padding-inline: var(--_space);
+}
+
+.metadata {
+  grid-area: metadata;
+  color: var(--text-2);
+}
+
+.list {
+  grid-area: list;
+  list-style-type: none;
+
+  container-type: inline-size;
+  display: grid;
+  grid-auto-flow: column;
+
+  gap: var(--_space);
+  padding: calc(8 * var(--_space)) calc(2 * var(--_space)) calc(2.5 * var(--_space));
+  scroll-padding: calc(2 * var(--_space));
+  margin: calc(-7 * var(--_space)) calc(-1 * var(--_space)) 0em;
+
+  overflow: visible auto;
+  scroll-snap-type: inline mandatory;
+  overscroll-behavior-inline: contain;
+
+  @media (prefers-reduced-motion: no-preference) {
+    scroll-behavior: smooth;
+  }
+
+  /* the before and afters have unsnappable elements that create bouncy edges to the scroll */
+  &::before,
+  &::after {
+    content: "";
+    display: block;
+  }
+
+  &::before {
+    inline-size: 15cqi;
+  }
+
+  &::after {
+    inline-size: 100cqi;
+  }
+
+  & > li {
+    scroll-snap-align: start;
+    container-type: scroll-state;
+    padding: 0;
+    position: relative;
+    isolation: isolate;
+
+    z-index: calc(var(--sibling-count) - var(--sibling-index));
+
+    &:has(> :hover, > :focus-within) {
+      z-index: calc(var(--sibling-count) + 1);
+    }
+
+    & > * {
+      @supports (animation-timeline: view()) {
+        @media (prefers-reduced-motion: no-preference) {
+          animation: slide-in linear both;
+          animation-timeline: view(inline);
+          animation-range: cover -100cqi contain 15cqi;
+        }
+      }
+    }
+  }
+}
+
+@keyframes slide-in {
+  from {
+    transform: translateX(-100cqi) scale(0.5);
+  }
+}

src/components/list/list.tsx

@@ -0,0 +1,27 @@
+import { Accessor, Index, JSX } from "solid-js";
+import css from "./list.module.css";
+
+interface ListProps<T> {
+  label: string;
+  items: T[];
+  class?: string;
+  children: (item: Accessor<T>) => JSX.Element;
+}
+
+export function List<T>(props: ListProps<T>) {
+  return (
+    <section class={`${css.container} ${props.class ?? ""}`}>
+      <b role="heading" class={css.heading}>
+        {props.label}
+      </b>
+
+      <sub class={css.metadata}>{props.items.length} result(s)</sub>
+
+      <ul class={css.list}>
+        <Index each={props.items}>
+          {(item) => <li>{props.children(item)}</li>}
+        </Index>
+      </ul>
+    </section>
+  );
+}