Initial commit: timeline-elements-ui library

Angular 19 component library for timelines and event tracking:
timeline, Gantt chart, event cards, date markers, connectors,
and custom event templates. Includes signal-based services,
SCSS design tokens with dark mode, and TypeScript type definitions.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/tl-horizontal-timeline/tl-horizontal-timeline.component.html

@@ -0,0 +1,75 @@
+<div class="tl-horizontal-timeline">
+  @if (showNavArrows && canScrollLeft) {
+    <ui-button
+      class="tl-horizontal-timeline__nav tl-horizontal-timeline__nav--left"
+     
+     
+      (click)="scrollLeft()"
+      aria-label="Scroll left"
+    >
+      <ui-icon name="chevron-left" />
+    </ui-button>
+  }
+
+  <div
+    class="tl-horizontal-timeline__container"
+    #scrollContainer
+    (scroll)="updateScrollState()"
+  >
+    @if (loading) {
+      <div class="tl-horizontal-timeline__loading">
+        @for (i of getLoadingItems(); track i) {
+          <div class="tl-horizontal-timeline__skeleton">
+            <ui-skeleton width="32px" height="32px" variant="circle" />
+            <ui-skeleton width="120px" height="60px" />
+          </div>
+        }
+      </div>
+    } @else if (items.length === 0) {
+      <div class="tl-horizontal-timeline__empty">
+        <ui-icon name="calendar" />
+        <p>{{ emptyMessage }}</p>
+      </div>
+    } @else {
+      <div class="tl-horizontal-timeline__track">
+        @for (item of sortedItems; track item.id; let idx = $index) {
+          <div class="tl-horizontal-timeline__item" (click)="onItemClick(item, idx)">
+            <div
+              class="tl-horizontal-timeline__marker"
+              [style.background-color]="getMarkerColor(item)"
+              [uiTooltip]="item.title"
+            >
+              @if (item.icon) {
+                <ui-icon [name]="item.icon" />
+              }
+            </div>
+
+            <div class="tl-horizontal-timeline__content">
+              <time class="tl-horizontal-timeline__time">{{ formatTime(item) }}</time>
+              <h4 class="tl-horizontal-timeline__title">{{ item.title }}</h4>
+              @if (item.description) {
+                <p class="tl-horizontal-timeline__description">{{ item.description }}</p>
+              }
+            </div>
+
+            @if (!$last) {
+              <div class="tl-horizontal-timeline__connector"></div>
+            }
+          </div>
+        }
+      </div>
+    }
+  </div>
+
+  @if (showNavArrows && canScrollRight) {
+    <ui-button
+      class="tl-horizontal-timeline__nav tl-horizontal-timeline__nav--right"
+     
+     
+      (click)="scrollRight()"
+      aria-label="Scroll right"
+    >
+      <ui-icon name="chevron-right" />
+    </ui-button>
+  }
+</div>