atomicuilibrary 0.0.1 → 0.1.3

package/dist/collection/components/timeline/timeline.css

@@ -46,14 +46,46 @@
   align-items: center;
 }
 
+/* Vertical Alignment: Shared 3-Column Base */
+.timeline-vertical .timeline-item {
+  display: flex;
+  position: relative;
+  align-items: center;
+}
+
+.timeline-vertical .timeline-side {
+  flex: 1 1 0%;
+  width: calc(50% - 24px);
+  max-width: calc(50% - 24px);
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.timeline-vertical .timeline-item-divider {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  width: 48px;
+  align-self: stretch;
+}
+
 .timeline-vertical .timeline-item-line {
   position: absolute;
   top: 0;
-  bottom: 0;
+  bottom: -24px;
+  left: 50%;
+  transform: translateX(-50%);
   width: 2px;
   background-color: var(--bg-primary, #e5e7eb);
 }
 
+.timeline-vertical .timeline-item:first-child .timeline-item-line {
+  top: 50%;
+}
+
 .timeline-vertical .timeline-item:last-child .timeline-item-line {
   display: none;
 }
@@ -67,125 +99,115 @@
   border: 2px solid var(--color-primary, #10b981);
   border-radius: 50%;
   flex-shrink: 0;
-  margin-top: 0;
-  /* Centered by flex */
+  margin-top: auto;
+  margin-bottom: auto;
 }
 
-/* Obsolete: handled by item-details padding */
-.timeline-vertical .timeline-item-content {
-  flex: 1;
+/* Icon Position specific alignments */
+.timeline-icon-top .timeline-item .timeline-item-divider {
+  justify-content: flex-start;
 }
 
-/* Vertical Alignment: Left (Standard) */
-.timeline-align-left.timeline-vertical .timeline-item-line {
-  left: 5px;
+.timeline-icon-top .timeline-item-dot {
+  margin-top: 4px;
+  margin-bottom: 0;
 }
 
-/* Icon Position specific alignments */
-.timeline-icon-top .timeline-item {
-  align-items: flex-start;
+.timeline-icon-center .timeline-item .timeline-item-divider {
+  justify-content: center;
 }
 
-.timeline-icon-center .timeline-item {
-  align-items: center;
+.timeline-icon-bottom .timeline-item .timeline-item-divider {
+  justify-content: flex-end;
 }
 
-.timeline-icon-bottom .timeline-item {
-  align-items: flex-end;
+.timeline-icon-bottom .timeline-item-dot {
+  margin-top: 0;
+  margin-bottom: 4px;
 }
 
-.timeline-align-left.timeline-vertical .timeline-item-dot {
-  left: 0;
-  /* top: 4px; -- Removed fixed offset to allow flex centering */
+/* Left Alignment (Default) */
+.timeline-align-left.timeline-vertical .timeline-side-left {
+  display: none;
 }
 
 .timeline-align-left.timeline-vertical .timeline-item-details {
-  padding-left: 48px;
-  /* Increased to 48px to absolutely guarantee gap */
-  text-align: left;
-  display: flex;
-  flex-direction: column;
+  padding-left: 16px;
   align-items: flex-start;
+  text-align: left;
 }
 
-/* Vertical Alignment: Right */
-/* Vertical Alignment: Right */
-.timeline-align-right.timeline-vertical .timeline-item {
-  flex-direction: row-reverse;
-  /* Flip the flex order so dot is on right */
+.timeline-align-left.timeline-vertical .timeline-item-divider {
+  width: 24px;
 }
 
-.timeline-align-right.timeline-vertical .timeline-item-line {
-  left: auto;
-  /* Unset left default */
-  right: 5px;
-  /* Position relative to right edge */
+/* Right Alignment */
+.timeline-align-right.timeline-vertical .timeline-item {
+  flex-direction: row-reverse;
 }
 
-.timeline-align-right.timeline-vertical .timeline-item-dot {
-  left: auto;
-  /* Unset left default */
-  right: 0;
-  top: 4px;
+.timeline-align-right.timeline-vertical .timeline-side-left {
+  display: none;
 }
 
 .timeline-align-right.timeline-vertical .timeline-item-details {
-  padding-left: 0;
-  padding-right: 48px;
-  /* High clearance */
-  text-align: right;
-  display: flex;
-  flex-direction: column;
+  padding-right: 16px;
   align-items: flex-end;
-  width: 100%;
-  /* Ensure it fills space */
+  text-align: right;
 }
 
-/* Vertical Alignment: Alternate */
-.timeline-align-alternate.timeline-vertical .timeline-item {
-  width: 100%;
+.timeline-align-right.timeline-vertical .timeline-item-divider {
+  width: 24px;
 }
 
-.timeline-align-alternate.timeline-vertical .timeline-item-line {
-  left: 50%;
-  transform: translateX(-50%);
+/* Center & Alternate Alignment */
+.timeline-align-center.timeline-vertical .timeline-item,
+.timeline-align-alternate.timeline-vertical .timeline-item {
+  flex-direction: row;
 }
 
-.timeline-align-alternate.timeline-vertical .timeline-item-dot {
-  left: 50%;
-  transform: translateX(-50%);
-  top: 4px;
+/* For alternate, if side is left, we row-reverse so right-side container goes left */
+.timeline-align-alternate.timeline-vertical .timeline-item.side-left {
+  flex-direction: row-reverse;
 }
 
-.timeline-align-alternate.timeline-vertical .side-left .timeline-item-details {
-  width: 50%;
-  padding-right: 48px;
-  /* High clearance */
-  padding-left: 0;
+.timeline-align-center.timeline-vertical .timeline-side-left,
+.timeline-align-alternate.timeline-vertical .timeline-side-left {
+  padding-right: 24px;
+  align-items: flex-end;
   text-align: right;
-  box-sizing: border-box;
-  /* Ensure padding is included in width */
-  margin-left: 0;
-  /* Explicit reset */
 }
 
-.timeline-align-alternate.timeline-vertical .side-right .timeline-item-details {
-  width: 50%;
-  margin-left: 50%;
-  padding-left: 48px;
-  /* High clearance */
+.timeline-align-center.timeline-vertical .timeline-item-details,
+.timeline-align-alternate.timeline-vertical .timeline-item-details {
+  padding-left: 24px;
+  align-items: flex-start;
   text-align: left;
-  box-sizing: border-box;
+}
+
+/* Ensure reversed items flip padding and text-align */
+.timeline-align-alternate.timeline-vertical .timeline-item.side-left .timeline-side-left {
+  padding-right: 0;
+  padding-left: 24px;
+  align-items: flex-start;
+  text-align: left;
+}
+
+.timeline-align-alternate.timeline-vertical .timeline-item.side-left .timeline-item-details {
+  padding-left: 0;
+  padding-right: 24px;
+  align-items: flex-end;
+  text-align: right;
 }
 
 /* Horizontal Mode */
 .timeline-horizontal {
+  display: flex;
   flex-direction: row;
-  padding: 80px 0;
+  padding: 40px 0;
   overflow-x: auto;
   min-height: 250px;
-  /* Increased for split content */
-  align-items: center;
+  align-items: stretch;
 }
 
 .timeline-horizontal .timeline-item {
@@ -197,50 +219,141 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  margin: auto;
 }
 
-/* Horizontal Layout: Consolidated Block */
-.timeline-horizontal .timeline-item-details {
+.timeline-horizontal .timeline-side {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+}
+
+.timeline-horizontal .timeline-item-divider {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  width: 100%;
+  flex-shrink: 0;
+  z-index: 10;
+}
+
+.timeline-horizontal .timeline-item-line {
   position: absolute;
-  width: 240px;
-  /* Fixed width for stability */
+  top: 50%;
   left: 50%;
-  transform: translateX(-50%);
+  right: -50%;
+  transform: translateY(-50%);
+  height: 2px;
+  background-color: var(--bg-primary, #e5e7eb);
+  z-index: 0;
+}
+
+.timeline-horizontal .timeline-item:last-child .timeline-item-line {
+  display: none;
+}
+
+.timeline-horizontal .timeline-item-dot {
+  position: relative;
+  z-index: 10;
+  width: 12px;
+  height: 12px;
+  background: var(--bg-primary, #ffffff);
+  border: 2px solid var(--color-primary, #10b981);
+  border-radius: 50%;
+  margin: auto;
+}
+
+.timeline-horizontal .timeline-item-details {
+  width: 100%;
+  padding: 16px;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
-  padding: 12px;
-  /* Increased from 8px for more breathing room */
-  /* background: rgba(255,255,255,0.8); Optional background for readability */
+  box-sizing: border-box;
+}
+
+/* Base styles for parts */
+.timeline-horizontal .timeline-item-content,
+.timeline-horizontal .timeline-item-time {
+  width: 100%;
+  text-align: center;
+}
+
+/* Horizontal Alignment: Bottom (Default / Standard) */
+/* Text is below the line */
+.timeline-horizontal.timeline-align-bottom .timeline-side-left,
+.timeline-horizontal.timeline-align-left .timeline-side-left {
+  display: none;
+}
+
+.timeline-horizontal.timeline-align-bottom .timeline-side-right,
+.timeline-horizontal.timeline-align-left .timeline-side-right {
+  justify-content: flex-start;
+}
+
+.timeline-horizontal.timeline-align-bottom .timeline-item-details,
+.timeline-horizontal.timeline-align-left .timeline-item-details {
+  padding-top: 24px;
+}
+
+/* Horizontal Alignment: Top */
+/* Text is above the line */
+.timeline-horizontal.timeline-align-top .timeline-item {
+  flex-direction: column-reverse;
+}
+
+.timeline-horizontal.timeline-align-top .timeline-side-left {
+  display: none;
+}
+
+.timeline-horizontal.timeline-align-top .timeline-side-right {
+  justify-content: flex-end;
+}
+
+.timeline-horizontal.timeline-align-top .timeline-item-details {
+  padding-bottom: 24px;
+  flex-direction: column-reverse; /* Flip time and content */
+}
+
+/* Horizontal Alignment: Alternate */
+.timeline-horizontal.timeline-align-alternate .timeline-item {
+  flex-direction: column;
+}
+
+.timeline-horizontal.timeline-align-alternate .timeline-item.side-top {
+  flex-direction: column-reverse;
+}
+
+.timeline-horizontal.timeline-align-alternate .timeline-item.side-top .timeline-item-details {
+  padding-bottom: 24px;
+  flex-direction: column-reverse;
+}
+
+.timeline-horizontal.timeline-align-alternate .timeline-item.side-bottom .timeline-item-details {
+  padding-top: 24px;
 }
 
 /* Multi-Line (Snake) Mode */
 .timeline-horizontal.timeline-multiline {
   flex-direction: column;
-  /* Rows stack vertically */
   flex-wrap: nowrap;
   gap: 0;
   padding: 40px 80px;
-  /* Increased to 80px to safely clear the 60px connectors */
-  display: flex;
-  /* Side padding for connectors */
   align-items: stretch;
   overflow: visible;
-  /* Allow connectors to show */
 }
 
 .timeline-row {
   display: flex;
   width: 100%;
-  justify-content: center;
-  /* Center lines if total items < width, or flex-start? */
   justify-content: flex-start;
-  /* Standard flow */
   position: relative;
-  padding: 40px 0;
-  /* Vertical gap between rows */
+  height: 250px; /* Fixed height required for exact snake connector math */
 }
 
 /* Alternate Row Direction for Snake Effect */
@@ -250,264 +363,67 @@
 
 .timeline-horizontal.timeline-multiline .timeline-item {
   flex: 1;
-  /* Stretch to fill column width */
-  margin: 0;
   min-width: 0;
+  height: 100%;
 }
 
 /* Connecting lines in Snake Mode */
-.timeline-horizontal.timeline-multiline .timeline-item-line {
-  display: block;
-  left: 50%;
-  right: -50%;
-  top: 50%;
-  border-radius: 0;
-}
-
-/* Fix line direction for reversed rows logic? 
-   In row-reverse, the visual "next" is to the Left.
-   DOM order is reversed visual.
-   Item 1 (Rightmost) -> Item 2 (Left of 1).
-   Line needs to go from Center to Left (-50%).
-   But standard CSS LTR line goes Right.
-
-   If row is reversed, the "Right" of the element is visually Left.
-   So standard line style might just work?
-   Let's check:
-   Standard line: left: 50%, right: -50%. (Draws from Center to Right Edge).
-   In RTL context? No, flex-row-reverse doesn't change CSS 'right' property meaning.
-   It just changes placement.
-   We need line to go towards the "Next" item.
-
-   Items are 0..N.
-   Row Even (LTR): Item 0 -> Item 1. Line goes Right. OK.
-   Row Odd (RTL): Item 4 (Rightmost) -> Item 5 (Left of 4). 
-     Line needs to go Left.
-*/
 .timeline-row.timeline-row-odd .timeline-item-line {
   left: -50%;
-  /* Go to left edge */
   right: 50%;
-  /* From Center */
 }
 
-/* Hide line for last item IN ROW? 
-   NO. User wants "Line to Line".
-   So we MUST show the line going from Dot -> Edge.
-*/
 .timeline-item.is-last-in-row .timeline-item-line {
   display: block;
-  /* Specific styling for last item line: go from Center to Edge */
   left: 50%;
   right: 0;
   width: auto;
-  /* Fill remaining space? Flex item? */
-  /* In absolute positioning: left 50%, right 0 means fill right half. */
 }
 
-/* For Odd rows (Reverse), line goes Center -> Left Edge */
 .timeline-row-odd .timeline-item.is-last-in-row .timeline-item-line {
   left: 0;
   right: 50%;
 }
 
-/* U-Curve Connectors (Snake) - Restored */
-/* Revised Right Connector (Even Row) */
-/* Starts at RIGHT EDGE of item, connects to line end */
-/* Revised Right Connector (Even Row) */
-/* Starts at RIGHT EDGE of item, connects to line end */
+/* U-Curve Connectors (Snake) */
 .timeline-row-even .timeline-item.is-last-in-row::after {
   content: "";
   position: absolute;
   right: -60px;
-  /* Shift OUTSIDE by width of curve */
   width: 60px;
-  /* Vertical Alignment: Match line position */
-  top: 50%;
-  /* We want the TOP border of this box to align with the line.
-     The box is 250px high (row height).
-     If line is at 50% of container...
-     We want the top edge of this connector to be at 50%.
-     So top: 50%.
-  */
-  height: 250px;
-  /* Full row height distance */
+  top: 50%; /* Center of current row */
+  height: 250px; /* Exactly one row height, reaches center of next row */
   border-right: 2px solid var(--border-default, #e5e7eb);
   border-top: 2px solid var(--border-default, #e5e7eb);
   border-bottom: 2px solid var(--border-default, #e5e7eb);
   border-top-right-radius: 60px;
   border-bottom-right-radius: 60px;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
   z-index: 0;
-  left: auto;
   pointer-events: none;
-  /* Fine-tune vertical alignment. 
-     The line is 2px thick, centered at 50%.
-     Our top border is 2px thick.
-     If top: 50%, top border starts at center.
-     Since line is transform: translateY(-50%) (centered), it starts at (50% - 1px).
-     So we might need top: calc(50% - 1px).
-  */
-  top: calc(50% - 1px);
-}
-
-/* Revised Left Connector (Odd Row) */
-/* Starts at LEFT EDGE of item */
+  transform: translateY(-1px); /* micro-adjustment for 2px border */
+}
+
 .timeline-row-odd .timeline-item.is-last-in-row::after {
   content: "";
   position: absolute;
   left: -60px;
-  /* Shift OUTSIDE left */
-  right: auto;
   width: 60px;
-  top: calc(50% - 1px);
-  /* Match line center */
+  top: 50%;
   height: 250px;
   border-left: 2px solid var(--border-default, #e5e7eb);
   border-top: 2px solid var(--border-default, #e5e7eb);
   border-bottom: 2px solid var(--border-default, #e5e7eb);
   border-top-left-radius: 60px;
   border-bottom-left-radius: 60px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
   z-index: 0;
-  transform: none;
   pointer-events: none;
+  transform: translateY(-1px);
 }
 
-/* Hide connector on the absolute last item */
 .timeline-row:last-child .timeline-item.is-last-in-row::after {
   display: none;
 }
 
-/* Ensure horizontal items center vertically in the fixed row */
-.timeline-row .timeline-item {
-  justify-content: flex-start;
-  /* Reset align */
-}
-
-.timeline-row .timeline-item-dot {
-  margin-top: 119px;
-  /* (250/2) - 6px */
-}
-
-.timeline-row .timeline-item-line {
-  top: 125px;
-  transform: translateY(-50%);
-}
-
-.timeline-row .timeline-item-details {
-  top: 125px;
-  /* Re-anchor */
-}
-
-/* Base styles for parts */
-.timeline-horizontal .timeline-item-content,
-.timeline-horizontal .timeline-item-time {
-  position: static;
-  width: auto;
-  max-width: 100%;
-  transform: none;
-  left: auto;
-  text-align: center;
-  padding: 2px 0;
-}
-
-.timeline-horizontal .timeline-item-line {
-  position: absolute;
-  left: 50%;
-  right: -50%;
-  top: 50%;
-  transform: translateY(-50%);
-  height: 2px;
-  background-color: var(--bg-primary, #e5e7eb);
-}
-
-.timeline-horizontal .timeline-item:last-child .timeline-item-line {
-  display: none;
-}
-
-.timeline-horizontal .timeline-item-dot {
-  width: 12px;
-  height: 12px;
-  background: var(--bg-primary, #ffffff);
-  border: 2px solid var(--color-primary, #10b981);
-  border-radius: 50%;
-  z-index: 10;
-  position: relative;
-}
-
-/* Horizontal Alignment: Top (Block Above Line) */
-.timeline-horizontal.timeline-align-top .timeline-item-details,
-.timeline-horizontal .side-top .timeline-item-details {
-  bottom: 50%;
-  top: auto;
-  margin-bottom: 32px;
-  /* Increased to 32px */
-  flex-direction: column-reverse;
-  /* Time closest to dot? Or Label? usually Time is close */
-}
-
-/* Let's keep Label at top, Time at bottom (closest to dot) for Top Align */
-.timeline-horizontal.timeline-align-top .timeline-item-details .timeline-item-content,
-.timeline-horizontal .side-top .timeline-item-details .timeline-item-content {
-  order: 1;
-  /* Visual Top */
-}
-
-.timeline-horizontal.timeline-align-top .timeline-item-details .timeline-item-time,
-.timeline-horizontal .side-top .timeline-item-details .timeline-item-time {
-  order: 2;
-  /* Visual Bottom (closest to line) */
-}
-
-/* Horizontal Alignment: Bottom (Block Below Line) */
-.timeline-horizontal.timeline-align-bottom .timeline-item-details,
-.timeline-horizontal.timeline-align-left .timeline-item-details,
-.timeline-horizontal .side-bottom .timeline-item-details {
-  top: 50%;
-  bottom: auto;
-  margin-top: 32px;
-  /* Increased to 32px */
-  flex-direction: column;
-  /* Time at Top (closest to dot), Content Below */
-}
-
-/* Connecting Vertical Leaders (Optional polish) */
-.timeline-horizontal .timeline-item-details::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  width: 2px;
-  background: var(--bg-primary, #e5e7eb);
-  height: 32px;
-  /* Match new margin */
-  transform: translateX(-50%);
-}
-
-.timeline-horizontal.timeline-align-top .timeline-item-details::before,
-.timeline-horizontal .side-top .timeline-item-details::before {
-  bottom: -32px;
-  /* Connects down to dot */
-}
-
-.timeline-horizontal.timeline-align-bottom .timeline-item-details::before,
-.timeline-horizontal.timeline-align-left .timeline-item-details::before,
-.timeline-horizontal .side-bottom .timeline-item-details::before {
-  top: -32px;
-  /* Connects up to dot */
-}
-
-/* Reset Alternate inheritance logic */
-.timeline-horizontal.timeline-align-alternate .timeline-item {
-  height: 100%;
-}
-
-.timeline-horizontal.timeline-align-alternate .timeline-item-dot {
-  margin: 0;
-}
-
 /* Status Colors */
 .timeline-item-success .timeline-item-dot {
   border-color: var(--color-success, #10b981);
@@ -581,23 +497,6 @@
   justify-content: center;
 }
 
-/* Adjustment for lgr dots in vertical mode */
-.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot {
-  left: -6px;
-  /* Center 24px dot matches center of 12px dot (offset by 6px difference) */
-  top: 0;
-}
-
-.timeline-align-alternate.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot {
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.timeline-align-right.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot {
-  right: -6px;
-  left: auto;
-}
-
 .dot-inner {
   width: 4px;
   height: 4px;
@@ -1847,4 +1746,168 @@
 :host([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot {
   right: auto;
   left: -6px;
+}
+
+/* Vertical connector alignment fix for the current rendered markup */
+.timeline-container.timeline-vertical {
+  --timeline-marker-visual-size: var(--timeline-dot-size);
+  --timeline-connector-mask-bg: var(--bg-primary, #ffffff);
+}
+
+.timeline-container.timeline-vertical .timeline-item:has(.timeline-item-icon),
+.timeline-container.timeline-vertical .timeline-item:has(.timeline-item-image) {
+  --timeline-marker-visual-size: max(var(--timeline-dot-size), 24px);
+}
+
+.timeline-container.timeline-vertical.timeline-marker-number .timeline-item,
+.timeline-container.timeline-vertical .timeline-item:has(.timeline-item-number) {
+  --timeline-marker-visual-size: max(var(--timeline-dot-size), 32px);
+}
+
+.timeline-container.timeline-vertical .timeline-item-divider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  flex-shrink: 0;
+  width: max(var(--timeline-marker-visual-size), 32px);
+  min-width: max(var(--timeline-marker-visual-size), 32px);
+}
+
+.timeline-container.timeline-vertical .timeline-item-divider .timeline-item-line {
+  left: 50% !important;
+  right: auto !important;
+  top: 0;
+  bottom: 0;
+  transform: translateX(-50%) !important;
+}
+
+.timeline-container.timeline-vertical .timeline-item-divider .timeline-item-dot {
+  position: relative;
+  left: auto !important;
+  right: auto !important;
+  top: auto !important;
+  transform: none !important;
+  margin: 0;
+}
+
+.timeline-container.timeline-vertical .timeline-item:first-child .timeline-item-divider::before,
+.timeline-container.timeline-vertical .timeline-item:last-child .timeline-item-divider::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: calc(var(--timeline-line-width) + 4px);
+  background: var(--timeline-connector-mask-bg);
+  z-index: 1;
+  pointer-events: none;
+}
+
+.timeline-container.timeline-vertical .timeline-item:first-child .timeline-item-divider::before {
+  top: 0;
+  height: calc(50% - var(--timeline-marker-visual-size) / 2);
+}
+
+.timeline-container.timeline-vertical .timeline-item:last-child .timeline-item-divider::after {
+  bottom: 0;
+  height: calc(50% - var(--timeline-marker-visual-size) / 2);
+}
+
+/* Dark mode contrast upgrade for timeline cards */
+@media (prefers-color-scheme: dark) {
+  .timeline-item-content,
+  .timeline-content {
+    background: var(--bg-primary, #111827);
+    border-color: rgba(148, 163, 184, 0.3);
+    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.12), 0 10px 28px rgba(2, 6, 23, 0.45);
+  }
+  .timeline-variant-panel .timeline-item-content,
+  .timeline-variant-panel .timeline-content {
+    background: linear-gradient(180deg, rgba(30, 41, 59, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%);
+    border-color: rgba(148, 163, 184, 0.36);
+    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.14), 0 14px 36px rgba(2, 6, 23, 0.5);
+  }
+  .timeline-variant-panel .timeline-item-content::before {
+    background: rgba(30, 41, 59, 0.96);
+    border-color: rgba(148, 163, 184, 0.32);
+  }
+  .timeline-variant-outlined .timeline-content,
+  .timeline-variant-outlined .timeline-item-content {
+    background: rgba(15, 23, 42, 0.42);
+    border-color: rgba(148, 163, 184, 0.42);
+    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.1), 0 8px 24px rgba(2, 6, 23, 0.34);
+  }
+  .timeline-variant-filled .timeline-content,
+  .timeline-variant-filled .timeline-item-content {
+    background: rgba(30, 41, 59, 0.92);
+    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.08), 0 10px 24px rgba(2, 6, 23, 0.35);
+  }
+  .timeline-item:hover .timeline-item-content,
+  .timeline-item:hover .timeline-content,
+  .timeline-item-clickable:hover .timeline-item-content,
+  .timeline-item-clickable:hover .timeline-content,
+  .timeline-variant-panel .timeline-item:hover .timeline-item-content,
+  .timeline-variant-panel .timeline-item:hover .timeline-content {
+    border-color: rgba(96, 165, 250, 0.45);
+    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.2), 0 18px 42px rgba(2, 6, 23, 0.56);
+  }
+  .timeline-item-title:hover,
+  .timeline-item-desc:hover {
+    background: rgba(15, 23, 42, 0.92);
+  }
+}
+.timeline-container.timeline-vertical .timeline-item:last-child .timeline-item-divider .timeline-item-line {
+  display: block;
+}
+
+/* Alternate vertical layout: keep the divider in a fixed center column so
+   markers align perfectly on both sides of the timeline line. */
+.timeline-container.timeline-vertical.timeline-align-alternate .timeline-item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) max(var(--timeline-marker-visual-size), 32px) minmax(0, 1fr);
+  align-items: center;
+  width: 100%;
+}
+
+.timeline-container.timeline-vertical.timeline-align-alternate .timeline-item .timeline-side-left,
+.timeline-container.timeline-vertical.timeline-align-alternate .timeline-item .timeline-item-details {
+  min-width: 0;
+}
+
+.timeline-container.timeline-vertical.timeline-align-alternate .timeline-item .timeline-item-divider {
+  grid-column: 2;
+  justify-self: center;
+}
+
+.timeline-container.timeline-vertical.timeline-align-alternate .timeline-item.side-right .timeline-side-left {
+  grid-column: 1;
+  padding-right: 24px;
+  padding-left: 0;
+  align-items: flex-end;
+  text-align: right;
+}
+
+.timeline-container.timeline-vertical.timeline-align-alternate .timeline-item.side-right .timeline-item-details {
+  grid-column: 3;
+  padding-left: 24px;
+  padding-right: 0;
+  align-items: flex-start;
+  text-align: left;
+}
+
+.timeline-container.timeline-vertical.timeline-align-alternate .timeline-item.side-left .timeline-item-details {
+  grid-column: 1;
+  padding-right: 24px;
+  padding-left: 0;
+  align-items: flex-end;
+  text-align: right;
+}
+
+.timeline-container.timeline-vertical.timeline-align-alternate .timeline-item.side-left .timeline-side-left {
+  grid-column: 3;
+  padding-left: 24px;
+  padding-right: 0;
+  align-items: flex-start;
+  text-align: left;
 }