@sbb-esta/lyne-elements-dev 5.11.0-dev.1791971551 → 5.11.0-dev.1791974623

package/development/pearl-chain.pure.js

@@ -0,0 +1,605 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { html, nothing, svg, unsafeCSS } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ref } from "lit/directives/ref.js";
+import { SbbElement, SbbPropertyWatcherController, defaultDateAdapter, forceType } from "./core.js";
+import { IntersectionController } from "@lit-labs/observers/intersection-controller.js";
+import { ResizeController } from "@lit-labs/observers/resize-controller.js";
+
+//#region src/elements/pearl-chain/pearl-chain-node/pearl-chain-node.scss?inline
+var pearl_chain_node_default = ":host {\n  display: flex;\n  position: relative;\n  width: var(--sbb-pearl-chain-node-size);\n  height: var(--sbb-pearl-chain-node-size);\n  align-items: center;\n  justify-content: center;\n}\n\n.bullet {\n  width: var(--sbb-pearl-chain-bullet-size);\n  height: var(--sbb-pearl-chain-bullet-size);\n  color: var(--sbb-pearl-chain-bullet-color);\n  rotate: var(--sbb-pearl-chain-bullet-rotation, 0deg);\n}\n.bullet circle {\n  cx: 50%;\n  cy: 50%;\n}\n\n.bullet--past {\n  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-past-color);\n}\n\n.bullet--disruption {\n  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-disruption-color);\n}\n\n.bullet--irrelevant {\n  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-irrelevant-color);\n  --sbb-pearl-chain-bullet-stop-stroke-width: var(--sbb-pearl-chain-irrelevant-stroke-width);\n}\n\n.bullet--stop {\n  width: var(--sbb-pearl-chain-bullet-stop-size);\n  height: var(--sbb-pearl-chain-bullet-stop-size);\n}\n.bullet--stop circle {\n  fill: transparent;\n  r: calc(50% - var(--sbb-pearl-chain-bullet-stop-stroke-width) / 2);\n  stroke-width: var(--sbb-pearl-chain-bullet-stop-stroke-width);\n}\n\n.bullet--skip .dash {\n  fill: var(--sbb-color-error);\n}\n\n.bullet--exceptional-skip {\n  width: var(--sbb-pearl-chain-bullet-exceptional-skip-size);\n  height: var(--sbb-pearl-chain-bullet-exceptional-skip-size);\n}\n.bullet--exceptional-skip .dash {\n  fill: var(--sbb-color-error);\n}\n\n.bullet--stop-duty .outer-circle {\n  fill: transparent;\n  r: calc(50% - var(--sbb-pearl-chain-bullet-stroke-width) / 2);\n  stroke-width: var(--sbb-pearl-chain-bullet-stroke-width);\n  stroke-dasharray: 2.1 1;\n}\n\n.bullet--boarding .outer-circle,\n.bullet--alighting .outer-circle,\n.bullet--exceptional-boarding .outer-circle,\n.bullet--exceptional-alighting .outer-circle,\n.bullet--stop-on-demand .outer-circle,\n.bullet--boarding-on-demand .outer-circle,\n.bullet--alighting-on-demand .outer-circle {\n  fill: transparent;\n  r: calc(50% - var(--sbb-pearl-chain-bullet-stroke-width) / 2);\n  stroke-width: var(--sbb-pearl-chain-bullet-stroke-width);\n}\n";
+
+//#endregion
+//#region src/elements/pearl-chain/pearl-chain-node/pearl-chain-node.component.ts
+const parseTriState = (value) => value === "arrival" || value === "departure" ? value : value === "" || value === true ? true : null;
+/**
+* Represents a station/point of interest within a `sbb-pearl-chain`.
+*/
+let SbbPearlChainNodeElement = (() => {
+	let _classSuper = SbbElement;
+	let _instanceExtraInitializers = [];
+	let _type_decorators;
+	let _type_initializers = [];
+	let _type_extraInitializers = [];
+	let _disrupted_decorators;
+	let _disrupted_initializers = [];
+	let _disrupted_extraInitializers = [];
+	let _walk_decorators;
+	let _walk_initializers = [];
+	let _walk_extraInitializers = [];
+	let _unsure_decorators;
+	let _unsure_initializers = [];
+	let _unsure_extraInitializers = [];
+	let _irrelevant_decorators;
+	let _irrelevant_initializers = [];
+	let _irrelevant_extraInitializers = [];
+	let _set_arrival_decorators;
+	let _set_departure_decorators;
+	return class SbbPearlChainNodeElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_type_decorators = [property()];
+			_disrupted_decorators = [forceType(parseTriState), property()];
+			_walk_decorators = [forceType(parseTriState), property()];
+			_unsure_decorators = [forceType(parseTriState), property()];
+			_irrelevant_decorators = [forceType(parseTriState), property()];
+			_set_arrival_decorators = [property()];
+			_set_departure_decorators = [property()];
+			__esDecorate(this, null, _type_decorators, {
+				kind: "accessor",
+				name: "type",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "type" in obj,
+					get: (obj) => obj.type,
+					set: (obj, value) => {
+						obj.type = value;
+					}
+				},
+				metadata: _metadata
+			}, _type_initializers, _type_extraInitializers);
+			__esDecorate(this, null, _disrupted_decorators, {
+				kind: "accessor",
+				name: "disrupted",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "disrupted" in obj,
+					get: (obj) => obj.disrupted,
+					set: (obj, value) => {
+						obj.disrupted = value;
+					}
+				},
+				metadata: _metadata
+			}, _disrupted_initializers, _disrupted_extraInitializers);
+			__esDecorate(this, null, _walk_decorators, {
+				kind: "accessor",
+				name: "walk",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "walk" in obj,
+					get: (obj) => obj.walk,
+					set: (obj, value) => {
+						obj.walk = value;
+					}
+				},
+				metadata: _metadata
+			}, _walk_initializers, _walk_extraInitializers);
+			__esDecorate(this, null, _unsure_decorators, {
+				kind: "accessor",
+				name: "unsure",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "unsure" in obj,
+					get: (obj) => obj.unsure,
+					set: (obj, value) => {
+						obj.unsure = value;
+					}
+				},
+				metadata: _metadata
+			}, _unsure_initializers, _unsure_extraInitializers);
+			__esDecorate(this, null, _irrelevant_decorators, {
+				kind: "accessor",
+				name: "irrelevant",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "irrelevant" in obj,
+					get: (obj) => obj.irrelevant,
+					set: (obj, value) => {
+						obj.irrelevant = value;
+					}
+				},
+				metadata: _metadata
+			}, _irrelevant_initializers, _irrelevant_extraInitializers);
+			__esDecorate(this, null, _set_arrival_decorators, {
+				kind: "setter",
+				name: "arrival",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "arrival" in obj,
+					set: (obj, value) => {
+						obj.arrival = value;
+					}
+				},
+				metadata: _metadata
+			}, null, _instanceExtraInitializers);
+			__esDecorate(this, null, _set_departure_decorators, {
+				kind: "setter",
+				name: "departure",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "departure" in obj,
+					set: (obj, value) => {
+						obj.departure = value;
+					}
+				},
+				metadata: _metadata
+			}, null, _instanceExtraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-pearl-chain-node";
+		}
+		static {
+			this.styles = unsafeCSS(pearl_chain_node_default);
+		}
+		#type_accessor_storage;
+		/** Decides how the bullet is rendered. Defaults to _empty_ (no bullet). */
+		get type() {
+			return this.#type_accessor_storage;
+		}
+		set type(value) {
+			this.#type_accessor_storage = value;
+		}
+		#disrupted_accessor_storage;
+		/** Marks the node as disrupted, coloring the bullet red (if rendered). */
+		get disrupted() {
+			return this.#disrupted_accessor_storage;
+		}
+		set disrupted(value) {
+			this.#disrupted_accessor_storage = value;
+		}
+		#walk_accessor_storage;
+		/** Marks the node as a walk connection. Does not affect the bullet color. */
+		get walk() {
+			return this.#walk_accessor_storage;
+		}
+		set walk(value) {
+			this.#walk_accessor_storage = value;
+		}
+		#unsure_accessor_storage;
+		/** Marks the connection as unsure, rendering the line dashed. Does not affect the bullet. */
+		get unsure() {
+			return this.#unsure_accessor_storage;
+		}
+		set unsure(value) {
+			this.#unsure_accessor_storage = value;
+		}
+		#irrelevant_accessor_storage;
+		/** Marks the node as irrelevant, coloring the bullet gray (if rendered); supersedes `disrupted`. */
+		get irrelevant() {
+			return this.#irrelevant_accessor_storage;
+		}
+		set irrelevant(value) {
+			this.#irrelevant_accessor_storage = value;
+		}
+		/** The arrival date/time at this node. Accepts ISO 8601 datetime strings. */
+		set arrival(value) {
+			this._arrival = defaultDateAdapter.getValidDateOrNull(defaultDateAdapter.deserialize(value));
+		}
+		get arrival() {
+			return this._arrival;
+		}
+		/** The departure date/time at this node. Accepts ISO 8601 datetime strings. */
+		set departure(value) {
+			this._departure = defaultDateAdapter.getValidDateOrNull(defaultDateAdapter.deserialize(value));
+		}
+		get departure() {
+			return this._departure;
+		}
+		get now() {
+			return this._chain?.now ?? this._now;
+		}
+		constructor() {
+			super();
+			this.#type_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _type_initializers, null));
+			this.#disrupted_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _disrupted_initializers, null));
+			this.#walk_accessor_storage = (__runInitializers(this, _disrupted_extraInitializers), __runInitializers(this, _walk_initializers, null));
+			this.#unsure_accessor_storage = (__runInitializers(this, _walk_extraInitializers), __runInitializers(this, _unsure_initializers, null));
+			this.#irrelevant_accessor_storage = (__runInitializers(this, _unsure_extraInitializers), __runInitializers(this, _irrelevant_initializers, null));
+			this._arrival = (__runInitializers(this, _irrelevant_extraInitializers), null);
+			this._departure = null;
+			this._now = /* @__PURE__ */ new Date();
+			this._chain = null;
+			this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-pearl-chain"), { now: () => this.requestUpdate() }));
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			this._chain = this.closest("sbb-pearl-chain");
+			this._chain?.addNode(this);
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback();
+			this._chain?.removeNode(this);
+			this._chain = null;
+		}
+		updated(changedProperties) {
+			super.updated(changedProperties);
+			if (changedProperties.size > 0) this._chain?.requestUpdate();
+		}
+		_isPast() {
+			return !!this.departure && this.departure.getTime() < this.now.getTime();
+		}
+		_renderBullet() {
+			switch (this.type) {
+				case "start":
+				case "end":
+				case "commercial":
+				case "exceptional": return svg`
+          <circle r="50%" fill="currentColor" />
+        `;
+				case "stop": return svg`
+          <circle
+            stroke="currentColor"
+          />
+        `;
+				case "skip": return svg`
+          <path d="m3.65 2.59c-.36.36-.59.86-.59 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l1.42 1.42c-.73.72-1.72 1.17-2.83 1.17-2.21 0-4-1.79-4-4 0-1.1.45-2.1 1.17-2.83l1.42 1.42zm1.41-2.59c2.21 0 4 1.79 4 4 0 .55-.11 1.08-.32 1.56l-1.69-1.69c-.06-1-.86-1.8-1.87-1.87l-1.68-1.68c.48-.21 1.01-.32 1.56-.32z" fill="currentColor"/>
+          <path class="dash" d="m1.06 0 7.78 7.78-1.06 1.06-7.78-7.78 1.06-1.06z"/>
+        `;
+				case "exceptional-skip": return svg`
+          <path d="m9.5 8.5c-.9.9-2.1 1.5-3.5 1.5-2.7 0-5-2.2-5-5 0-1.4.6-2.6 1.5-3.5l7 7zm-3.5-8.5c2.8 0 5 2.2 5 5 0 .8-.2 1.6-.6 2.3l-6.7-6.7c.7-.4 1.5-.6 2.3-.6z" fill="currentColor"/>
+          <rect class="dash" x="1.41431" width="14" height="2" transform="rotate(45 1.41431 0)"/>
+        `;
+				case "stop-duty": return svg`
+          <circle
+            class="outer-circle"
+            stroke="currentColor"
+          />
+        `;
+				case "boarding":
+				case "exceptional-boarding": return svg`
+          <circle
+            class="outer-circle"
+            stroke="currentColor"
+          />
+          <path d="m1.85 5c0 .84.34 1.64.92 2.23.59.58 1.39.92 2.23.92.84 0 1.64-.34 2.23-.92.58-.59.92-1.39.92-2.23l-3.15 0-3.15 0z" fill="currentColor"/>
+        `;
+				case "alighting":
+				case "exceptional-alighting": return svg`
+          <circle
+            class="outer-circle"
+            stroke="currentColor"
+          />
+          <path d="m8.15 5c0-.84-.34-1.64-.92-2.23-.59-.58-1.39-.92-2.23-.92-.84 0-1.64.34-2.23.92-.58.59-.92 1.39-.92 2.23l3.15 0 3.15 0z" fill="currentColor"/>
+        `;
+				case "stop-on-demand": return svg`
+          <circle
+            class="outer-circle"
+            stroke="currentColor"
+          />
+          <circle
+            fill="currentColor"
+            r="20%"
+          />
+        `;
+				case "boarding-on-demand": return svg`
+          <circle
+            class="outer-circle"
+            stroke="currentColor"
+          />
+          <path d="m3 5c0 .53.21 1.04.59 1.41.37.38.88.59 1.41.59.53 0 1.04-.21 1.41-.59.38-.37.59-.88.59-1.41l-2 0h-2z" fill="currentColor"/>
+        `;
+				case "alighting-on-demand": return svg`
+          <circle
+            class="outer-circle"
+            stroke="currentColor"
+          />
+          <path d="m7 5c0-.53-.21-1.04-.59-1.41-.37-.38-.88-.59-1.41-.59-.53 0-1.04.21-1.41.59-.38.37-.59.88-.59 1.41l2 0h2z" fill="currentColor"/>
+        `;
+				default: return nothing;
+			}
+		}
+		render() {
+			return html`
+      <svg
+        viewBox=${this.type === "exceptional-skip" ? "0 0 12 12" : "0 0 10 10"}
+        class="bullet ${classMap({
+				[`bullet--${this.type}`]: !!this.type,
+				"bullet--irrelevant": !!this.irrelevant,
+				"bullet--disruption": !!this.disrupted,
+				"bullet--past": this._isPast()
+			})}"
+        aria-hidden="true"
+        ${ref((el) => {
+				this.svgElem = el;
+			})}
+      >
+        ${this._renderBullet()}
+      </svg>
+    `;
+		}
+	};
+})();
+
+//#endregion
+//#region src/elements/pearl-chain/pearl-chain/pearl-chain.scss?inline
+var pearl_chain_default = ":host {\n  position: relative;\n  display: block;\n  --sbb-pearl-chain-bullet-now-animation-duration: var(--sbb-disable-animation-duration, 2s);\n}\n\n:host(:is(:state(horizontal),[state--horizontal])) {\n  --sbb-pearl-chain-bullet-rotation: -90deg;\n}\n\n.sbb-pearl-chain__svg {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n  pointer-events: none;\n}\n\n.line {\n  stroke: var(--sbb-pearl-chain-color);\n  stroke-width: var(--sbb-pearl-chain-stroke-width);\n}\n\n.line--past {\n  stroke: var(--sbb-pearl-chain-past-color);\n}\n\n.line--walk {\n  stroke: var(--sbb-pearl-chain-walk-color);\n  stroke-dasharray: 0.125rem;\n}\n\n.line--unsure {\n  stroke-dasharray: 0.125rem;\n}\n\n.line--disruption {\n  stroke: var(--sbb-pearl-chain-disruption-color);\n  stroke-dasharray: 0.125rem;\n}\n\n.line--irrelevant {\n  stroke: var(--sbb-pearl-chain-irrelevant-color);\n  stroke-width: var(--sbb-pearl-chain-irrelevant-stroke-width);\n}\n\n.now-dot {\n  fill: var(--sbb-pearl-chain-now-color);\n  stroke: var(--sbb-pearl-chain-now-color);\n  stroke-opacity: var(--sbb-pearl-chain-bullet-now-animation-opacity);\n  r: calc(var(--sbb-pearl-chain-now-size) / 2);\n  animation: sbb-pearl-chain-pulse var(--sbb-pearl-chain-bullet-now-animation-duration) ease-out infinite;\n}\n\n@keyframes sbb-pearl-chain-pulse {\n  0% {\n    stroke-width: 0;\n  }\n  50% {\n    stroke-width: calc(var(--sbb-pearl-chain-now-size) / 2);\n  }\n  100% {\n    stroke-width: 0;\n  }\n}\n";
+
+//#endregion
+//#region src/elements/pearl-chain/pearl-chain/pearl-chain.component.ts
+/** Gap (in px) left before a node's bullet, so the line doesn't touch it. */
+const NODE_GAP = 2;
+/** Interval (in ms) at which the component is re-rendered. */
+const RENDERING_INTERVAL = 3e4;
+const DEBOUNCE_TIME = 150;
+/**
+* Linearly interpolates between two points.
+*/
+const lerp = (from, to, ratio) => ({
+	x: from.x + (to.x - from.x) * ratio,
+	y: from.y + (to.y - from.y) * ratio
+});
+/** Pulls `to` back towards `from` by `gap` px, along the line's direction. */
+const pullBack = (from, to, gap) => {
+	const length = Math.hypot(to.x - from.x, to.y - from.y);
+	return length === 0 ? to : lerp(from, to, Math.max(0, (length - gap) / length));
+};
+/**
+* It displays a chain of `sbb-pearl-chain-node` elements connected by lines,
+* representing a journey with its stops.
+*/
+let SbbPearlChainElement = (() => {
+	let _classSuper = SbbElement;
+	let _instanceExtraInitializers = [];
+	let _set_now_decorators;
+	return class SbbPearlChainElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_set_now_decorators = [property()];
+			__esDecorate(this, null, _set_now_decorators, {
+				kind: "setter",
+				name: "now",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "now" in obj,
+					set: (obj, value) => {
+						obj.now = value;
+					}
+				},
+				metadata: _metadata
+			}, null, _instanceExtraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-pearl-chain";
+		}
+		static {
+			this.styles = unsafeCSS(pearl_chain_default);
+		}
+		/**
+		* A configured date which acts as the current date instead of the real current date.
+		* Only recommended for testing purposes.
+		*/
+		set now(value) {
+			this._userNow = defaultDateAdapter.getValidDateOrNull(defaultDateAdapter.deserialize(value));
+		}
+		get now() {
+			return this._userNow ?? this._systemNow;
+		}
+		/** Returns the registered `sbb-pearl-chain-node` elements, in DOM order. */
+		get nodes() {
+			return this._nodes.slice();
+		}
+		constructor() {
+			super();
+			this._userNow = (__runInitializers(this, _instanceExtraInitializers), null);
+			this._systemNow = /* @__PURE__ */ new Date();
+			this._nodes = [];
+			this._orientation = "vertical";
+			const controllersConfig = {
+				callback: () => this._debouncedPositionLines(),
+				skipInitial: true
+			};
+			this.addController(new ResizeController(this, controllersConfig));
+			this.addController(new IntersectionController(this, controllersConfig));
+		}
+		/**
+		* Returns the relative position (0 for the first node, 1 for the last one) of each node,
+		* in DOM order, proportional to its `departure` time (or `arrival` if there is no `departure`).
+		*/
+		calculateNodeWeights() {
+			const times = this._nodes.map((n) => (n.departure ?? n.arrival).getTime());
+			const first = times[0];
+			const range = times[times.length - 1] - first;
+			return times.map((t) => (t - first) / range);
+		}
+		/**
+		* Registers a `sbb-pearl-chain-node` with this pearl chain.
+		* @internal
+		*/
+		addNode(node) {
+			if (this._nodes.includes(node)) return;
+			this._nodes.push(node);
+			this._nodes.sort((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
+			this.requestUpdate();
+		}
+		/**
+		* Unregisters a `sbb-pearl-chain-node` from this pearl chain.
+		* @internal
+		*/
+		removeNode(node) {
+			const index = this._nodes.indexOf(node);
+			if (index === -1) return;
+			this._nodes.splice(index, 1);
+			this.requestUpdate();
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			this._systemNowIntervalId = setInterval(() => {
+				this._systemNow = /* @__PURE__ */ new Date();
+				this.requestUpdate();
+			}, RENDERING_INTERVAL);
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback();
+			clearInterval(this._systemNowIntervalId);
+		}
+		updated(changedProperties) {
+			super.updated(changedProperties);
+			this._positionLines();
+		}
+		firstUpdated(changedProperties) {
+			super.firstUpdated(changedProperties);
+			this._svgElem = this.shadowRoot.querySelector(".sbb-pearl-chain__svg");
+		}
+		/**
+		* Optimizes `_positionLines()` calls by debouncing them (called by observers).
+		*/
+		_debouncedPositionLines() {
+			clearTimeout(this._debounceId);
+			this._debounceId = setTimeout(() => this._positionLines(), DEBOUNCE_TIME);
+		}
+		/**
+		* Positions the rendered lines (and dot) to connect the bullet nodes, and toggles
+		* `:is(:state(horizontal),[state--horizontal])` based on whether nodes are spread more horizontally than vertically.
+		*/
+		_positionLines() {
+			const elements = this.shadowRoot?.querySelectorAll("[data-segment]");
+			if (!elements?.length || !this._svgElem) return;
+			const svgRect = this._svgElem.getBoundingClientRect();
+			const nodesCords = this._nodes.map((node) => {
+				const rect = node["svgElem"]?.getBoundingClientRect() ?? node.getBoundingClientRect();
+				return {
+					x: rect.left + rect.width / 2 - svgRect.left,
+					y: rect.top + rect.height / 2 - svgRect.top,
+					size: rect.width
+				};
+			});
+			this._updateOrientation(nodesCords);
+			for (const el of elements) {
+				const index = Number(el.dataset.segment);
+				const start = pullBack(nodesCords[index + 1], nodesCords[index], nodesCords[index].size / 2);
+				const end = this._needsGap(this._nodes[index + 1]) ? pullBack(start, nodesCords[index + 1], NODE_GAP + nodesCords[index + 1].size / 2) : pullBack(start, nodesCords[index + 1], nodesCords[index + 1].size / 2);
+				switch (el.dataset.role) {
+					case "dot": {
+						const ratio = this._progressRatio(this._nodes[index], this._nodes[index + 1]);
+						const nowCords = lerp(nodesCords[index], nodesCords[index + 1], ratio);
+						el.setAttribute("cx", `${nowCords.x}`);
+						el.setAttribute("cy", `${nowCords.y}`);
+						break;
+					}
+					case "before": {
+						const ratio = this._progressRatio(this._nodes[index], this._nodes[index + 1]);
+						const nowCords = lerp(start, end, ratio);
+						this._setLineCords(el, start, nowCords);
+						break;
+					}
+					case "after": {
+						const ratio = this._progressRatio(this._nodes[index], this._nodes[index + 1]);
+						const nowCords = lerp(start, end, ratio);
+						this._setLineCords(el, nowCords, end);
+						break;
+					}
+					default: this._setLineCords(el, start, end);
+				}
+			}
+		}
+		/** Sets the coordinates of a line svg element. */
+		_setLineCords(element, start, end) {
+			element.setAttribute("x1", `${start.x}`);
+			element.setAttribute("y1", `${start.y}`);
+			element.setAttribute("x2", `${end.x}`);
+			element.setAttribute("y2", `${end.y}`);
+		}
+		/** Toggles `:is(:state(horizontal),[state--horizontal])` when the nodes are spread more horizontally than vertically. */
+		_updateOrientation(nodesCords) {
+			let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+			for (const { x, y } of nodesCords) {
+				if (x < minX) minX = x;
+				if (x > maxX) maxX = x;
+				if (y < minY) minY = y;
+				if (y > maxY) maxY = y;
+			}
+			const horizontal = maxX - minX > maxY - minY;
+			this.toggleState("horizontal", horizontal);
+			this._orientation = horizontal ? "horizontal" : "vertical";
+		}
+		/** No gap for `start` or `end` bullets. */
+		_needsGap(node) {
+			return this._orientation === "horizontal" && node.type !== null && node.type !== "start" && node.type !== "end";
+		}
+		/**
+		* Ratio (0-1) of "now" between the line's start departure and end arrival, or
+		* `null` if "now" is outside that window (or either date is missing).
+		*/
+		_progressRatio(start, end) {
+			const from = start.departure;
+			const to = end.arrival;
+			if (!from || !to) return null;
+			const now = this.now.getTime();
+			if (now < from.getTime() || now > to.getTime()) return null;
+			return (now - from.getTime()) / (to.getTime() - from.getTime());
+		}
+		/**
+		* Returns a map of CSS classes for a line segment between two nodes, based on its state.
+		*/
+		_lineClasses(start, end) {
+			return {
+				"line--past": this._isLinePast(end),
+				"line--walk": start.walk === true || start.walk === "departure" || end.walk === true || end.walk === "arrival",
+				"line--unsure": start.unsure === true || start.unsure === "departure" || end.unsure === true || end.unsure === "arrival",
+				"line--irrelevant": start.irrelevant === true || start.irrelevant === "departure" || end.irrelevant === true || end.irrelevant === "arrival",
+				"line--disruption": start.disrupted === true || start.disrupted === "departure" || end.disrupted === true || end.disrupted === "arrival"
+			};
+		}
+		/** A line is "past" once we've already arrived at its ending node. */
+		_isLinePast(end) {
+			const pastTime = end.arrival ?? end.departure;
+			return !!pastTime && pastTime.getTime() < this.now.getTime();
+		}
+		/** A line is "current" if "now" falls between its start departure and end arrival. */
+		_isLineCurrent(start, end) {
+			return this._progressRatio(start, end) !== null;
+		}
+		/** Renders one segment: a single line, or (when "now" falls within it) a gray/normal split + pulsing dot. */
+		_renderSegment(start, end, index) {
+			const classes = this._lineClasses(start, end);
+			if (!classes["line--disruption"] && !classes["line--walk"] && this._isLineCurrent(start, end)) return svg`
+        <line class="line line--past" data-segment="${index}" data-role="before"></line>
+        <line class="line ${classMap(classes)}" data-segment="${index}" data-role="after"></line>
+        <circle class="now-dot" data-segment="${index}" data-role="dot"></circle>
+      `;
+			return svg`<line class="line ${classMap(classes)}" data-segment="${index}"></line>`;
+		}
+		render() {
+			return html`
+      <slot></slot>
+      <svg class="sbb-pearl-chain__svg" aria-hidden="true">
+        ${this._nodes.length > 1 ? Array.from({ length: this._nodes.length - 1 }, (_, index) => this._renderSegment(this._nodes[index], this._nodes[index + 1], index)) : nothing}
+      </svg>
+    `;
+		}
+	};
+})();
+
+//#endregion
+export { SbbPearlChainElement, SbbPearlChainNodeElement };

package/index.d.ts

@@ -45,6 +45,7 @@ import { SbbNotificationElement } from "./notification.js";
 import { SbbOptGroupElement, SbbOptionElement, SbbOptionHintElement } from "./option.js";
 import { SbbOverlayElement } from "./overlay.js";
 import { SbbCompactPaginatorElement, SbbPaginatorElement } from "./paginator.js";
+import { SbbPearlChainElement, SbbPearlChainNodeElement } from "./pearl-chain.js";
 import { SbbPopoverCloseButtonElement, SbbPopoverElement } from "./popover.js";
 import { SbbRadioButtonElement } from "./radio-button.js";
 import { SbbRadioButtonGroupElement } from "./radio-button-group.js";
@@ -192,6 +193,8 @@ declare global {
   var SbbOptionHintElement: SbbOptionHintElement;
   var SbbOverlayElement: SbbOverlayElement;
   var SbbPaginatorElement: SbbPaginatorElement;
+  var SbbPearlChainElement: SbbPearlChainElement;
+  var SbbPearlChainNodeElement: SbbPearlChainNodeElement;
   var SbbPopoverCloseButtonElement: SbbPopoverCloseButtonElement;
   var SbbPopoverElement: SbbPopoverElement;
   var SbbRadioButtonElement: SbbRadioButtonElement;

package/index.js

@@ -45,6 +45,7 @@ import { SbbNotificationElement } from "./notification.js";
 import { SbbOptGroupElement, SbbOptionElement, SbbOptionHintElement } from "./option.js";
 import { SbbOverlayElement } from "./overlay.js";
 import { SbbCompactPaginatorElement, SbbPaginatorElement } from "./paginator.js";
+import { SbbPearlChainElement, SbbPearlChainNodeElement } from "./pearl-chain.js";
 import { SbbPopoverCloseButtonElement, SbbPopoverElement } from "./popover.js";
 import { SbbRadioButtonElement } from "./radio-button.js";
 import { SbbRadioButtonGroupElement } from "./radio-button-group.js";
@@ -192,6 +193,8 @@ globalThis.SbbOptionElement = SbbOptionElement;
 globalThis.SbbOptionHintElement = SbbOptionHintElement;
 globalThis.SbbOverlayElement = SbbOverlayElement;
 globalThis.SbbPaginatorElement = SbbPaginatorElement;
+globalThis.SbbPearlChainElement = SbbPearlChainElement;
+globalThis.SbbPearlChainNodeElement = SbbPearlChainNodeElement;
 globalThis.SbbPopoverCloseButtonElement = SbbPopoverCloseButtonElement;
 globalThis.SbbPopoverElement = SbbPopoverElement;
 globalThis.SbbRadioButtonElement = SbbRadioButtonElement;

package/lean-off-brand-theme.css

@@ -1741,6 +1741,28 @@ summary {
   --sbb-selection-panel-suffix-color: var(--sbb-color-3);
   --sbb-selection-panel-subtext-color: var(--sbb-color-granite);
   --sbb-selection-panel-subtext-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+  --sbb-pearl-chain-color: var(--sbb-color-3);
+  --sbb-pearl-chain-stroke-width: var(--sbb-border-width-2x);
+  --sbb-pearl-chain-past-color: var(--sbb-color-metal);
+  --sbb-pearl-chain-past-color: light-dark(var(--sbb-color-metal), var(--sbb-color-granite));
+  --sbb-pearl-chain-irrelevant-color: var(--sbb-color-metal);
+  --sbb-pearl-chain-irrelevant-color: light-dark(var(--sbb-color-metal), var(--sbb-color-granite));
+  --sbb-pearl-chain-irrelevant-stroke-width: var(--sbb-border-width-1x);
+  --sbb-pearl-chain-disruption-color: var(--sbb-color-error);
+  --sbb-pearl-chain-walk-color: var(--sbb-color-sky);
+  --sbb-pearl-chain-now-color: var(--sbb-color-primary);
+  --sbb-pearl-chain-now-size: var(--sbb-pearl-chain-bullet-size);
+  --sbb-pearl-chain-node-size: 0.75em;
+  --sbb-pearl-chain-bullet-size: 0.625em;
+  --sbb-pearl-chain-bullet-stop-size: 0.5em;
+  --sbb-pearl-chain-bullet-stop-stroke-width: var(--sbb-pearl-chain-stroke-width);
+  --sbb-pearl-chain-bullet-exceptional-skip-size: 0.75em;
+  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-color);
+  --sbb-pearl-chain-bullet-past-color: var(--sbb-pearl-chain-past-color);
+  --sbb-pearl-chain-bullet-irrelevant-color: var(--sbb-pearl-chain-irrelevant-color);
+  --sbb-pearl-chain-bullet-disruption-color: var(--sbb-color-error);
+  --sbb-pearl-chain-bullet-stroke-width: var(--sbb-pearl-chain-stroke-width);
+  --sbb-pearl-chain-bullet-now-animation-opacity: 0.2;
   --sbb-popover-arrow-size: var(--sbb-spacing-fixed-4x);
   --sbb-popover-max-width: calc(100% - var(--sbb-spacing-fixed-2x));
   --sbb-popover-border-radius: var(--sbb-border-radius-8x);