feat: add history graph pattern

styles/48-patterns-history-graph.css

@@ -0,0 +1,45 @@
+/* ========================================================= */
+/* Pattern: History Graph                                    */
+/* ========================================================= */
+
+.sg-history-graph {
+  --layout-history-graph-connector-width: var(--score-marker-width);
+  --surface-history-graph-connector: var(--chart-marker-line);
+  width: 100%;
+}
+
+.sg-history-graph__events {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-large);
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sg-history-graph__event {
+  position: relative;
+  width: 100%;
+}
+
+.sg-history-graph__event:not(:last-child)::after {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  width: var(--layout-history-graph-connector-width);
+  height: var(--spacing-large);
+  background: var(--surface-history-graph-connector);
+  content: "";
+  transform: translateX(-50%);
+}
+
+.sg-history-graph__card {
+  width: 100%;
+  max-width: var(--layout-object-card-min-width);
+  margin-inline: auto;
+}
+
+.sg-history-graph__navigation {
+  width: 100%;
+}