import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import type{LyraVariant}from'../../../internal/variants.js'; /** * `` — one marker + title + optional timestamp + optional description row inside * ``'s default slot. See that component's class doc for the overall shape; this class * doc covers the rail-connecting mechanism this item's own `[part="track"]`/`[part="rail"]` * implement. * * Each item owns and renders *its own trailing rail segment*, not the whole connecting line — think * of it as a linked list of line segments, one per item, each reaching toward the next item's marker. * `[part="track"]` (marker then rail) is a flex sibling of `[part="content"]` inside `[part="base"]`, * with `[part="base"]`'s default `align-items: stretch` left alone — so `[part="track"]`'s * cross-axis size automatically equals `[part="content"]`'s own size, including any content-driven * height from a long slotted description. `[part="rail"]` is `flex: 1 1 auto` inside `[part="track"]`, * so once the marker (fixed size) takes its share, the rail fills the rest — no JS measurement, no * `ResizeObserver`, no absolute positioning. `[part="content"]` carries a trailing logical padding * (block-end in vertical mode, inline-end in horizontal mode) equal to ``'s * `--lr-timeline-gap`, so the stretched rail visually reaches *into* the gap before the next item's * marker with no seam. The last item's rail is suppressed by ``'s own pure-CSS * `::slotted(:last-child)` rule (see that component's stylesheet) — no JS coordination between the * two components is needed anywhere in this mechanism. * * A pure display row by default: no events, no keyboard interaction, and no selection/expansion * state of its own — a deliberate scope decision, not an oversight. When a parent timeline opts * into collision clustering, the first item in each author-ordered group temporarily represents * that group with a native count button in this item's list position; activation still belongs to * the parent timeline and emits its `lr-cluster-activate` event. An earlier "interactive row" * design (mirroring * ``'s clickable `role="button"` row) was considered and dropped: this * component's `title` and `description` are slots that routinely contain focusable content of their * own (a link, a button) — wrapping them in an ancestor `role="button"` would trip axe's * `nested-interactive` rule the moment a consumer slots one in, unlike ``, * which keeps its own focusable content in a sibling `actions` slot specifically to avoid that. A * consumer who wants a clickable entry slots an actual interactive element inside `description` * themselves — `role="listitem"` places no restriction on focusable descendants. Not a * form-associated control — no value to submit, no label/hint/error chrome. * * @customElement lr-timeline-item * @slot - The item's primary heading/title content. Rich content allowed (inline code, a badge, a * link) — nothing renders when this slot is empty, a valid if unusual usage. * @slot marker-icon - Marker/glyph override (e.g. a ``, an emoji, a small avatar-like * element). When empty, the marker falls back to a plain color-coded dot driven by `variant`. * @slot timestamp - Full override of the timestamp presentation (e.g. * ``, a custom string, a differently-configured * ``). Wins over the `timestamp` property whenever it has assigned content, * even if `timestamp` is also set. Falls back to an internally-rendered `` * (driven by the `timestamp` property) wrapped in a `