@aceshooting/lyra-ui 3.5.0 → 3.6.0

package/dist/components/timeline/timeline-item.class.js

@@ -0,0 +1,203 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { styles } from './timeline-item.styles.js';
+/**
+ * `<lyra-timeline-item>` — one marker + title + optional timestamp + optional description row inside
+ * `<lyra-timeline>`'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 `<lyra-timeline>`'s
+ * `--lyra-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 `<lyra-timeline>`'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: no events, no keyboard interaction, and no selection/expansion state of its
+ * own — a deliberate scope decision, not an oversight. An earlier "interactive row" design (mirroring
+ * `<lyra-conversation-item>`'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 `<lyra-conversation-item>`,
+ * 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 lyra-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 icon - Leading marker/glyph override (e.g. a `<lyra-icon>`, an emoji, a small avatar-like
+ *   element). Falls back to a plain color-coded dot (driven by `variant`) when empty.
+ * @slot timestamp - Full override of the timestamp presentation (e.g.
+ *   `<lyra-format-date slot="timestamp">`, a custom string, a differently-configured
+ *   `<lyra-relative-time>`). Wins over the `timestamp` property whenever it has assigned content,
+ *   even if `timestamp` is also set. Falls back to an internally-rendered `<lyra-relative-time>`
+ *   (driven by the `timestamp` property) wrapped in a `<time>`, or renders nothing at all
+ *   (`[part="timestamp"]` hidden) when neither the slot nor a valid `timestamp` is present.
+ * @slot description - Secondary/body content below the title (explanatory text, a diff snippet, a
+ *   "view details" affordance). `[part="description"]` is hidden entirely when this slot is empty.
+ * @csspart base - The root wrapper. Flex container; `flex-direction` is driven by the
+ *   `--lyra-timeline-item-direction` custom property inherited from `<lyra-timeline>`'s `:host` --
+ *   `row` in vertical-timeline mode (marker beside content), `column` in horizontal-timeline mode
+ *   (marker above content).
+ * @csspart track - Wrapper around the marker and rail (the "spine"). Always the opposite axis from
+ *   `[part="base"]` -- see the class doc's rail-mechanism note.
+ * @csspart marker - The dot/icon circle. Always `aria-hidden="true"` -- purely decorative, the
+ *   item's accessible content is its title/timestamp/description text.
+ * @csspart rail - The connecting line segment extending from this item's marker toward the next
+ *   item's marker. Hidden (`visibility: hidden`, not removed) for the last item in a
+ *   `<lyra-timeline>` -- see the class doc.
+ * @csspart content - Wrapper around `header` and `description`.
+ * @csspart header - Flex row wrapping `title` and `timestamp`; wraps at narrow widths rather than
+ *   truncating either.
+ * @csspart title - Wrapper around the default (title) slot.
+ * @csspart timestamp - Wrapper around the `timestamp` slot / the internally-rendered `<time>`
+ *   fallback. Hidden entirely when there's nothing to show.
+ * @csspart description - Wrapper around the `description` slot. Hidden entirely when the slot is
+ *   empty.
+ * @cssprop [--lyra-timeline-marker-size=var(--lyra-size-1-25rem)] - Diameter of the marker circle
+ *   (both inline-size and block-size, so the default dot stays circular).
+ * @cssprop [--lyra-timeline-rail-width=var(--lyra-border-width-medium)] - Thickness of the
+ *   connecting rail line.
+ * @cssprop [--lyra-timeline-rail-color=var(--lyra-color-border)] - Color of the connecting rail
+ *   line. A component-scoped property (not just inlining `var(--lyra-color-border)` at every use
+ *   site) so a consumer can retint just the rail without touching the library-wide border color
+ *   elsewhere.
+ * @cssprop [--lyra-timeline-marker-color=var(--lyra-color-text-quiet)] - Marker fill/accent color.
+ *   Swapped per `variant` (see the class doc's variant table); a consumer overriding this directly on
+ *   one item wins over the variant default via normal CSS cascade/specificity.
+ */
+export class LyraTimelineItem extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Forwarded 1:1 onto the internally-rendered `<lyra-relative-time>`'s own `sync` property, so a
+         *  live feed (e.g. streaming agent actions) can opt this item into auto-refreshing relative text
+         *  ("just now" ticking to "1 minute ago"). Named to match `<lyra-relative-time>`'s own `sync`
+         *  property verbatim. Has no effect when the `timestamp` slot is populated -- there is no internal
+         *  `<lyra-relative-time>` to forward onto in that case. */
+        this.sync = false;
+        /** Tone of the marker. `'neutral'` (default) is a plain past event; `'brand'` is highlighted/
+         *  informational; `'success'` is completed positively (e.g. a successful deploy); `'warning'` needs
+         *  attention; `'danger'` is a failed/error event. Same five-value set as `BadgeVariant`/
+         *  `CalloutVariant`. */
+        this.variant = 'neutral';
+        /** Marks this as the current/in-progress item (e.g. "the agent is executing this step right now"),
+         *  as opposed to a resolved past entry. Drives a pulsing marker (disabled under
+         *  `prefers-reduced-motion: reduce`) and `aria-current="true"` on the host -- omitted entirely
+         *  (not `"false"`) while inactive, matching `<lyra-stepper>`'s identical `aria-current` handling. */
+        this.active = false;
+        // Tracked in JS rather than relying on native <slot> fallback content: the "slot wins outright"
+        // precedence described in the class doc requires the internal <lyra-relative-time>/default-dot
+        // markup to be entirely absent from the render() output -- not merely visually superseded -- once
+        // the corresponding slot has assigned content. Same [part][hidden]-not-:empty reasoning as
+        // <lyra-menu-item>'s hasIconSlot (a [part] containing a literal <slot> child never matches a bare
+        // :empty selector), copied verbatim for all three slots here.
+        this.hasIconSlot = false;
+        this.hasTimestampSlot = false;
+        this.hasDescriptionSlot = false;
+        this.onIconSlotChange = (e) => {
+            this.hasIconSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onTimestampSlotChange = (e) => {
+            this.hasTimestampSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onDescriptionSlotChange = (e) => {
+            this.hasDescriptionSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'listitem');
+    }
+    willUpdate() {
+        // aria-current lives on the host (role="listitem" does too -- see connectedCallback), so it's a
+        // plain imperative attribute write here rather than part of render()'s shadow-DOM template.
+        // Removed entirely (not set to "false") while inactive -- omitting it loses no information since
+        // aria-current's own ARIA-spec default value is already "false".
+        if (this.active)
+            this.setAttribute('aria-current', 'true');
+        else
+            this.removeAttribute('aria-current');
+    }
+    get normalizedTimestamp() {
+        if (this.timestamp === undefined)
+            return undefined;
+        const date = this.timestamp instanceof Date ? this.timestamp : new Date(this.timestamp);
+        return Number.isNaN(date.getTime()) ? undefined : date;
+    }
+    render() {
+        const ts = this.normalizedTimestamp;
+        const showTimestampFallback = !this.hasTimestampSlot && ts !== undefined;
+        const showTimestamp = this.hasTimestampSlot || ts !== undefined;
+        // Intl-formatted absolute date/time -- caller/data formatting exempt from localize() routing per
+        // AGENTS.md's i18n carve-out for Intl-formatted dates. Never hand-rolled.
+        const absolute = ts
+            ? new Intl.DateTimeFormat(this.effectiveLocale || undefined, { dateStyle: 'long', timeStyle: 'short' }).format(ts)
+            : '';
+        return html `
+      <div part="base">
+        <div part="track">
+          <span part="marker" aria-hidden="true">
+            <slot name="icon" @slotchange=${this.onIconSlotChange}></slot>
+          </span>
+          <span part="rail"></span>
+        </div>
+        <div part="content">
+          <div part="header">
+            <span part="title"><slot></slot></span>
+            <span part="timestamp" ?hidden=${!showTimestamp}>
+              <slot name="timestamp" @slotchange=${this.onTimestampSlotChange}></slot>
+              ${showTimestampFallback
+            ? html `<time datetime=${ts.toISOString()} title=${absolute}>
+                    <lyra-relative-time .date=${ts} .sync=${this.sync}></lyra-relative-time>
+                  </time>`
+            : nothing}
+            </span>
+          </div>
+          <span part="description" ?hidden=${!this.hasDescriptionSlot}>
+            <slot name="description" @slotchange=${this.onDescriptionSlotChange}></slot>
+          </span>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], LyraTimelineItem.prototype, "timestamp", void 0);
+__decorate([
+    property({ type: Boolean })
+], LyraTimelineItem.prototype, "sync", void 0);
+__decorate([
+    property()
+], LyraTimelineItem.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraTimelineItem.prototype, "active", void 0);
+__decorate([
+    state()
+], LyraTimelineItem.prototype, "hasIconSlot", void 0);
+__decorate([
+    state()
+], LyraTimelineItem.prototype, "hasTimestampSlot", void 0);
+__decorate([
+    state()
+], LyraTimelineItem.prototype, "hasDescriptionSlot", void 0);
+//# sourceMappingURL=timeline-item.class.js.map

package/dist/components/timeline/timeline-item.class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-item.class.js","sourceRoot":"","sources":["../../../src/components/timeline/timeline-item.class.ts"],"names":[],"mappings":"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"}

package/dist/components/timeline/timeline-item.d.ts

@@ -0,0 +1,3 @@
+export * from './timeline-item.class.js';
+import '../format/relative-time.js';
+//# sourceMappingURL=timeline-item.d.ts.map

package/dist/components/timeline/timeline-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-item.d.ts","sourceRoot":"","sources":["../../../src/components/timeline/timeline-item.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AAOzC,OAAO,4BAA4B,CAAC"}

package/dist/components/timeline/timeline-item.js

@@ -0,0 +1,10 @@
+export * from './timeline-item.class.js';
+import { LyraTimelineItem } from './timeline-item.class.js';
+import { defineElement } from '../../internal/prefix.js';
+// Registers <lyra-relative-time>, rendered internally as the default timestamp fallback -- see the
+// class doc's "Timestamp rendering" note. Kept out of timeline-item.class.ts so that module stays
+// side-effect free per AGENTS.md's tree-shaking rule; mirrors <lyra-chat-message>'s identical
+// dependency-registration split (chat-message.ts imports live-region.js the same way).
+import '../format/relative-time.js';
+defineElement('timeline-item', LyraTimelineItem);
+//# sourceMappingURL=timeline-item.js.map

package/dist/components/timeline/timeline-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-item.js","sourceRoot":"","sources":["../../../src/components/timeline/timeline-item.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,mGAAmG;AACnG,kGAAkG;AAClG,8FAA8F;AAC9F,uFAAuF;AACvF,OAAO,4BAA4B,CAAC;AACpC,aAAa,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC"}

package/dist/components/timeline/timeline-item.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=timeline-item.styles.d.ts.map

package/dist/components/timeline/timeline-item.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-item.styles.d.ts","sourceRoot":"","sources":["../../../src/components/timeline/timeline-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAkJlB,CAAC"}

package/dist/components/timeline/timeline-item.styles.js

@@ -0,0 +1,149 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    --lyra-timeline-marker-size: var(--lyra-size-1-25rem);
+    --lyra-timeline-rail-width: var(--lyra-border-width-medium);
+    --lyra-timeline-rail-color: var(--lyra-color-border);
+    /* Swapped per-variant by the :host([variant]) rules below -- same one-custom-property-per-tone
+       shape as lyra-stream-status's --lyra-stream-status-dot-color. */
+    --lyra-timeline-marker-color: var(--lyra-color-text-quiet);
+  }
+  :host([variant='brand']) {
+    --lyra-timeline-marker-color: var(--lyra-color-brand);
+  }
+  :host([variant='success']) {
+    --lyra-timeline-marker-color: var(--lyra-color-success);
+  }
+  :host([variant='warning']) {
+    --lyra-timeline-marker-color: var(--lyra-color-warning);
+  }
+  :host([variant='danger']) {
+    --lyra-timeline-marker-color: var(--lyra-color-danger);
+  }
+
+  [part='base'] {
+    display: flex;
+    /* Driven by the --lyra-timeline-item-direction custom property inherited from <lyra-timeline>'s
+       :host across the slot boundary -- row (marker beside content) in vertical-timeline mode,
+       column (marker above content) in horizontal-timeline mode. This component has no orientation
+       attribute of its own; see <lyra-timeline>'s styles for the source of truth. */
+    flex-direction: var(--lyra-timeline-item-direction, row);
+    gap: var(--lyra-space-s);
+  }
+
+  [part='track'] {
+    display: flex;
+    /* Always the *opposite* axis from [part='base'] -- see the class doc's rail-mechanism note.
+       Paired with --lyra-timeline-item-direction at the same <lyra-timeline> source, since CSS has
+       no way to derive "the other one of row/column" from a single custom property's value. */
+    flex-direction: var(--lyra-timeline-item-track-direction, column);
+    align-items: center;
+    flex: 0 0 auto;
+  }
+
+  [part='marker'] {
+    inline-size: var(--lyra-timeline-marker-size);
+    block-size: var(--lyra-timeline-marker-size);
+    border-radius: 50%;
+    flex: 0 0 auto;
+    background: var(--lyra-timeline-marker-color);
+    /* A slotted <lyra-icon> (or any currentColor-stroked glyph) automatically inherits the correct
+       variant tint with no extra wiring. */
+    color: var(--lyra-timeline-marker-color);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  /* The pulsing "in-progress" treatment -- same token/guard shape as lyra-stream-status's
+     streaming-phase dot pulse. */
+  :host([active]) [part='marker'] {
+    animation: lyra-timeline-item-pulse var(--lyra-transition-ambient) infinite;
+  }
+  @keyframes lyra-timeline-item-pulse {
+    0%,
+    100% {
+      transform: scale(0.85);
+      opacity: 0.6;
+    }
+    50% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [part='marker'] {
+      animation: none !important;
+    }
+  }
+
+  [part='rail'] {
+    flex: 1 1 auto;
+    /* Both dimensions set to the same fixed thickness: whichever one ends up being [part='track']'s
+       cross axis (see above) is the one that visually matters as the rail's width -- the main-axis
+       dimension is just flex-basis's starting point, immediately overridden by flex-grow filling
+       whatever length [part='content']'s own padding/height creates (see the class doc's rail
+       mechanism). One declaration handles both orientations with no extra conditional. */
+    inline-size: var(--lyra-timeline-rail-width);
+    block-size: var(--lyra-timeline-rail-width);
+    background: var(--lyra-timeline-rail-color);
+    /* Suppressed for the last item in a <lyra-timeline> via this custom property, set by
+       <lyra-timeline>'s own ::slotted(:last-child) rule -- visibility (not display) keeps the same
+       layout box every other item's track has, so marker alignment stays consistent down the list. */
+    visibility: var(--lyra-timeline-item-rail-visibility, visible);
+  }
+
+  [part='content'] {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    gap: var(--lyra-space-2xs);
+    /* Reaches into the gap before the next item so the rail (which stretches to match this
+       element's own size -- see [part='track']) visually meets the next item's marker with no seam.
+       Exactly one of these two is non-zero at a time, set together by <lyra-timeline>'s
+       :host / :host([orientation='horizontal']) rules; both default to 0 when this item is used
+       standalone (no <lyra-timeline> ancestor). */
+    padding-block-end: var(--lyra-timeline-item-gap-block-end, 0);
+    padding-inline-end: var(--lyra-timeline-item-gap-inline-end, 0);
+  }
+
+  [part='header'] {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: var(--lyra-space-xs);
+  }
+
+  [part='title'] {
+    min-inline-size: 0;
+    color: var(--lyra-color-text);
+    font-weight: var(--lyra-font-weight-semibold);
+    line-height: var(--lyra-line-height-snug);
+  }
+
+  [part='timestamp'] {
+    flex: 0 0 auto;
+    color: var(--lyra-color-text-quiet);
+    font-size: var(--lyra-font-size-xs);
+    white-space: nowrap;
+  }
+  [part='timestamp'][hidden] {
+    display: none;
+  }
+
+  [part='description'] {
+    min-inline-size: 0;
+    color: var(--lyra-color-text-quiet);
+    font-size: var(--lyra-font-size-md-sm);
+    line-height: var(--lyra-line-height-1-4);
+    overflow-wrap: anywhere;
+  }
+  [part='description'][hidden] {
+    display: none;
+  }
+`;
+//# sourceMappingURL=timeline-item.styles.js.map

package/dist/components/timeline/timeline-item.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-item.styles.js","sourceRoot":"","sources":["../../../src/components/timeline/timeline-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkJxB,CAAC"}

package/dist/components/timeline/timeline.class.d.ts

@@ -0,0 +1,59 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export type TimelineOrientation = 'vertical' | 'horizontal';
+/**
+ * `<lyra-timeline>` — an ordered, connected sequence of past-event rows (an audit trail, an agent
+ * action history, a changelog) composed from `<lyra-timeline-item>` light-DOM children, joined by a
+ * continuous connecting rail. First-party invention: no Web Awesome/Shoelace counterpart exists, so
+ * this follows the library's own established conventions rather than mirroring an upstream API.
+ *
+ * A pure, read-only, declarative display component — same zero-event shape as `<lyra-badge>`/
+ * `<lyra-avatar>`/`<lyra-skeleton>`. It never mutates its own children and fires no events; a
+ * consumer who needs to react to item count changes already owns the mutation (they're the one
+ * adding/removing `<lyra-timeline-item>` children) and can listen to the native `slotchange` event
+ * directly if truly needed.
+ *
+ * No keyboard navigation, roving-tabindex, or selection model of any kind — a deliberate scope
+ * decision, not an oversight. A timeline is a passive record display, not a navigable widget; see
+ * `<lyra-timeline-item>`'s class doc for the full reasoning behind dropping an earlier
+ * "interactive row" design. Not a form-associated control — no value to submit, no label/hint/error
+ * chrome.
+ *
+ * @customElement lyra-timeline
+ * @slot - `<lyra-timeline-item>` children, in display order.
+ * @csspart base - The root wrapper. `role="list"` lives here directly (a timeline isn't a navigation
+ *   landmark, so it doesn't need a two-layer `base`+`list` split). Flex container: `flex-direction:
+ *   column` in `vertical` orientation (the default), `flex-direction: row` (with `overflow-x: auto`)
+ *   in `horizontal` orientation.
+ * @cssprop [--lyra-timeline-gap=var(--lyra-space-l)] - Spacing between consecutive items along the
+ *   timeline's main axis; also the length each item's own rail visually bridges to reach the next
+ *   item's marker. Declared here but actually consumed inside each `<lyra-timeline-item>`'s own
+ *   stylesheet, via ordinary CSS custom-property inheritance across the slot boundary.
+ */
+export declare class LyraTimeline extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** `'vertical'` (the default) lays items out in a column, the primary/most-common use case — an
+     *  audit trail or agent history reads top-to-bottom. `'horizontal'` lays them out in a row.
+     *  Deliberately differs from `<lyra-stepper>`'s `'horizontal'` default — don't copy that default by
+     *  habit. */
+    orientation: TimelineOrientation;
+    /** Host-level `aria-label` override for the list's accessible name — wins over the localized
+     *  default `"Timeline"`. Needed because the `role="list"` element lives in the shadow root and
+     *  never inherits a host attribute automatically — same reasoning as `<lyra-breadcrumb>`'s
+     *  identical property. */
+    accessibleLabel: string;
+    private slottedCount;
+    protected willUpdate(): void;
+    firstUpdated(): void;
+    /** Read-only, live-updated count of the currently-slotted `<lyra-timeline-item>` children — handy
+     *  for building a `"{count} events"` header without hand-counting DOM children. */
+    get itemCount(): number;
+    private onSlotChange;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-timeline': LyraTimeline;
+    }
+}
+//# sourceMappingURL=timeline.class.d.ts.map

package/dist/components/timeline/timeline.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.class.d.ts","sourceRoot":"","sources":["../../../src/components/timeline/timeline.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAG7D,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,YAAY,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBAAa,YAAa,SAAQ,WAAW;IAC3C,MAAM,CAAC,MAAM,iCAAgC;IAE7C;;;iBAGa;IACD,WAAW,EAAE,mBAAmB,CAAc;IAE1D;;;8BAG0B;IACa,eAAe,SAAM;IAMnD,OAAO,CAAC,YAAY,CAAK;IAElC,SAAS,CAAC,UAAU,IAAI,IAAI,CAQ3B;IAED,YAAY,IAAI,IAAI,CAKnB;IAED;uFACmF;IACnF,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,OAAO,CAAC,YAAY,CAElB;IAEF,MAAM,IAAI,cAAc,CAMvB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/dist/components/timeline/timeline.class.js

@@ -0,0 +1,100 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { styles } from './timeline.styles.js';
+/**
+ * `<lyra-timeline>` — an ordered, connected sequence of past-event rows (an audit trail, an agent
+ * action history, a changelog) composed from `<lyra-timeline-item>` light-DOM children, joined by a
+ * continuous connecting rail. First-party invention: no Web Awesome/Shoelace counterpart exists, so
+ * this follows the library's own established conventions rather than mirroring an upstream API.
+ *
+ * A pure, read-only, declarative display component — same zero-event shape as `<lyra-badge>`/
+ * `<lyra-avatar>`/`<lyra-skeleton>`. It never mutates its own children and fires no events; a
+ * consumer who needs to react to item count changes already owns the mutation (they're the one
+ * adding/removing `<lyra-timeline-item>` children) and can listen to the native `slotchange` event
+ * directly if truly needed.
+ *
+ * No keyboard navigation, roving-tabindex, or selection model of any kind — a deliberate scope
+ * decision, not an oversight. A timeline is a passive record display, not a navigable widget; see
+ * `<lyra-timeline-item>`'s class doc for the full reasoning behind dropping an earlier
+ * "interactive row" design. Not a form-associated control — no value to submit, no label/hint/error
+ * chrome.
+ *
+ * @customElement lyra-timeline
+ * @slot - `<lyra-timeline-item>` children, in display order.
+ * @csspart base - The root wrapper. `role="list"` lives here directly (a timeline isn't a navigation
+ *   landmark, so it doesn't need a two-layer `base`+`list` split). Flex container: `flex-direction:
+ *   column` in `vertical` orientation (the default), `flex-direction: row` (with `overflow-x: auto`)
+ *   in `horizontal` orientation.
+ * @cssprop [--lyra-timeline-gap=var(--lyra-space-l)] - Spacing between consecutive items along the
+ *   timeline's main axis; also the length each item's own rail visually bridges to reach the next
+ *   item's marker. Declared here but actually consumed inside each `<lyra-timeline-item>`'s own
+ *   stylesheet, via ordinary CSS custom-property inheritance across the slot boundary.
+ */
+export class LyraTimeline extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** `'vertical'` (the default) lays items out in a column, the primary/most-common use case — an
+         *  audit trail or agent history reads top-to-bottom. `'horizontal'` lays them out in a row.
+         *  Deliberately differs from `<lyra-stepper>`'s `'horizontal'` default — don't copy that default by
+         *  habit. */
+        this.orientation = 'vertical';
+        /** Host-level `aria-label` override for the list's accessible name — wins over the localized
+         *  default `"Timeline"`. Needed because the `role="list"` element lives in the shadow root and
+         *  never inherits a host attribute automatically — same reasoning as `<lyra-breadcrumb>`'s
+         *  identical property. */
+        this.accessibleLabel = '';
+        // Tracks the default slot's assigned-element count purely for the `itemCount` convenience getter
+        // below -- copies <lyra-source-list>'s sourceCount three-part technique (pre-count in willUpdate to
+        // dodge a wasted second update, reconciled in firstUpdated via the authoritative slot-based count,
+        // kept live afterward via slotchange) rather than re-deriving it.
+        this.slottedCount = 0;
+        this.onSlotChange = (e) => {
+            this.slottedCount = e.target.assignedElements({ flatten: true }).length;
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    willUpdate() {
+        if (!this.hasUpdated) {
+            // Must count only children assigned to the *default* slot -- an explicit slot="" attribute
+            // still assigns to the default slot per the HTML slot algorithm, so check the attribute's
+            // value rather than its mere presence. Otherwise this pre-count could disagree with
+            // firstUpdated's authoritative slot-based recount below and schedule a wasted second update.
+            this.slottedCount = Array.from(this.children).filter((el) => !el.getAttribute('slot')).length;
+        }
+    }
+    firstUpdated() {
+        // Fallback reconciliation for slot-forwarding / engines that don't fire `slotchange` for content
+        // present at parse time.
+        const slot = this.shadowRoot.querySelector('slot');
+        this.slottedCount = slot.assignedElements({ flatten: true }).length;
+    }
+    /** Read-only, live-updated count of the currently-slotted `<lyra-timeline-item>` children — handy
+     *  for building a `"{count} events"` header without hand-counting DOM children. */
+    get itemCount() {
+        return this.slottedCount;
+    }
+    render() {
+        return html `
+      <div part="base" role="list" aria-label=${this.accessibleLabel || this.localize('timeline')}>
+        <slot @slotchange=${this.onSlotChange}></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], LyraTimeline.prototype, "orientation", void 0);
+__decorate([
+    property({ attribute: 'aria-label' })
+], LyraTimeline.prototype, "accessibleLabel", void 0);
+__decorate([
+    state()
+], LyraTimeline.prototype, "slottedCount", void 0);
+//# sourceMappingURL=timeline.class.js.map

package/dist/components/timeline/timeline.class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.class.js","sourceRoot":"","sources":["../../../src/components/timeline/timeline.class.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAI9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAA7C;;QAGE;;;qBAGa;QACD,gBAAW,GAAwB,UAAU,CAAC;QAE1D;;;kCAG0B;QACa,oBAAe,GAAG,EAAE,CAAC;QAE5D,iGAAiG;QACjG,oGAAoG;QACpG,mGAAmG;QACnG,kEAAkE;QACjD,iBAAY,GAAG,CAAC,CAAC;QAyB1B,iBAAY,GAAG,CAAC,CAAQ,EAAQ,EAAE;YACxC,IAAI,CAAC,YAAY,GAAI,CAAC,CAAC,MAA0B,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC;QAC/F,CAAC,CAAC;IASJ,CAAC;aAtDQ,WAAM,GAAG,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,AAA/B,CAAgC;IAoBnC,UAAU;QAClB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,2FAA2F;YAC3F,0FAA0F;YAC1F,oFAAoF;YACpF,6FAA6F;YAC7F,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;QAChG,CAAC;IACH,CAAC;IAED,YAAY;QACV,iGAAiG;QACjG,yBAAyB;QACzB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,MAAM,CAAoB,CAAC;QACvE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC;IACtE,CAAC;IAED;uFACmF;IACnF,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;gDACiC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC;4BACrE,IAAI,CAAC,YAAY;;KAExC,CAAC;IACJ,CAAC;CACF;AAhDa;IAAX,QAAQ,EAAE;iDAA+C;AAMnB;IAAtC,QAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;qDAAsB;AAM3C;IAAhB,KAAK,EAAE;kDAA0B"}

package/dist/components/timeline/timeline.d.ts

@@ -0,0 +1,2 @@
+export * from './timeline.class.js';
+//# sourceMappingURL=timeline.d.ts.map

package/dist/components/timeline/timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../src/components/timeline/timeline.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

package/dist/components/timeline/timeline.js

@@ -0,0 +1,5 @@
+export * from './timeline.class.js';
+import { LyraTimeline } from './timeline.class.js';
+import { defineElement } from '../../internal/prefix.js';
+defineElement('timeline', LyraTimeline);
+//# sourceMappingURL=timeline.js.map

package/dist/components/timeline/timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.js","sourceRoot":"","sources":["../../../src/components/timeline/timeline.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC"}

package/dist/components/timeline/timeline.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=timeline.styles.d.ts.map

package/dist/components/timeline/timeline.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.styles.d.ts","sourceRoot":"","sources":["../../../src/components/timeline/timeline.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAiDlB,CAAC"}