Timeline

---
// src/components/ui/display/timeline/Timeline.astro — headless primitive (see ../../README.md).
// An ordered run of events, on a real <ol> — the order IS the meaning, so it is carried by the
// element rather than by a stylesheet. Zero-JS.
//
// It earns its files on the last rule of the filter in ../README.md: structure a selector depends
// on. A theme cannot draw the rail between two events without an element to draw it on, and it
// cannot place the marker without one to place — hence TimelineDot and TimelineConnector, which
// render nothing on their own and exist purely as hooks.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"ol"> & { orientation?: "vertical" | "horizontal" };

const { orientation = "vertical", class: className, ...rest } = Astro.props;
---

<ol class={className} data-slot="timeline" data-orientation={orientation} {...rest}>
  <slot />
</ol>

---
// src/components/ui/display/timeline/TimelineConnector.astro — Timeline compound part (see ../../README.md).
// The rail segment joining this event to the next. Always decorative — it is a line, and a line that
// announced itself would interrupt every event. Render it in every item but the last, or let a theme
// hide the last one with `[data-slot="timeline-item"]:last-child [data-slot="timeline-connector"]`.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"span">;

const { class: className, ...rest } = Astro.props;
---

<span aria-hidden="true" class={className} data-slot="timeline-connector" {...rest}></span>

---
// src/components/ui/display/timeline/TimelineDot.astro — Timeline compound part (see ../../README.md).
// The marker on the rail. Decorative by default (`aria-hidden`) because the event's own text is what
// carries the meaning; pass an icon or a number through the slot. If you put real text in here,
// override `aria-hidden` through {...rest} so it is announced.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"span">;

const { class: className, ...rest } = Astro.props;
---

<span aria-hidden="true" class={className} data-slot="timeline-dot" {...rest}><slot /></span>

---
// src/components/ui/display/timeline/TimelineItem.astro — Timeline compound part (see ../../README.md).
// One event. Compose TimelineDot + TimelineConnector + your own content inside it.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"li">;

const { class: className, ...rest } = Astro.props;
---

<li class={className} data-slot="timeline-item" {...rest}>
  <slot />
</li>

import Timeline from "./Timeline.astro";
import TimelineConnector from "./TimelineConnector.astro";
import TimelineDot from "./TimelineDot.astro";
import TimelineItem from "./TimelineItem.astro";

export { Timeline, TimelineConnector, TimelineDot, TimelineItem };
export default Timeline;