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

package/lean-safety-theme.css

@@ -1761,6 +1761,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);

package/lean-theme.css

@@ -1761,6 +1761,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);

package/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);

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.11.0-dev.1791971551",
+  "version": "5.11.0-dev.1791974141",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/6883306792b6bae735ab025e980c8ed9aa1dd047"
+    "https://github.com/sbb-design-systems/lyne-components/commit/eb8757bedc0949b15d83de02b152853b42c80442"
   ],
   "type": "module",
   "exports": {
@@ -534,6 +534,16 @@
       "development": "./development/paginator.pure.js",
       "default": "./paginator.pure.js"
     },
+    "./pearl-chain.js": {
+      "types": "./development/pearl-chain.d.ts",
+      "development": "./development/pearl-chain.js",
+      "default": "./pearl-chain.js"
+    },
+    "./pearl-chain.pure.js": {
+      "types": "./development/pearl-chain.pure.d.ts",
+      "development": "./development/pearl-chain.pure.js",
+      "default": "./pearl-chain.pure.js"
+    },
     "./popover.js": {
       "types": "./development/popover.d.ts",
       "development": "./development/popover.js",

package/pearl-chain/_pearl-chain.global.scss

@@ -0,0 +1,26 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-pearl-chain-color: var(--sbb-color-3);
+  --sbb-pearl-chain-stroke-width: var(--sbb-border-width-2x);
+  --sbb-pearl-chain-past-color: light-dark(var(--sbb-color-metal), var(--sbb-color-granite));
+  --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;
+}

package/pearl-chain.js

@@ -0,0 +1 @@
+import{SbbPearlChainElement as e,SbbPearlChainNodeElement as t}from"./pearl-chain.pure.js";export*from"./pearl-chain.pure.js";e.define(),t.define();

package/pearl-chain.pure.js

@@ -0,0 +1,71 @@
+import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,nothing as r,svg as i,unsafeCSS as a}from"lit";import{property as o}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{ref as c}from"lit/directives/ref.js";import{SbbElement as l,SbbPropertyWatcherController as u,defaultDateAdapter as d,forceType as f}from"./core.js";import{IntersectionController as p}from"@lit-labs/observers/intersection-controller.js";import{ResizeController as m}from"@lit-labs/observers/resize-controller.js";var h=`:host{width:var(--sbb-pearl-chain-node-size);height:var(--sbb-pearl-chain-node-size);justify-content:center;align-items:center;display:flex;position:relative}.bullet{width:var(--sbb-pearl-chain-bullet-size);height:var(--sbb-pearl-chain-bullet-size);color:var(--sbb-pearl-chain-bullet-color);rotate:var(--sbb-pearl-chain-bullet-rotation,0deg)}.bullet circle{cx:50%;cy:50%}.bullet--past{--sbb-pearl-chain-bullet-color:var(--sbb-pearl-chain-bullet-past-color)}.bullet--disruption{--sbb-pearl-chain-bullet-color:var(--sbb-pearl-chain-bullet-disruption-color)}.bullet--irrelevant{--sbb-pearl-chain-bullet-color:var(--sbb-pearl-chain-bullet-irrelevant-color);--sbb-pearl-chain-bullet-stop-stroke-width:var(--sbb-pearl-chain-irrelevant-stroke-width)}.bullet--stop{width:var(--sbb-pearl-chain-bullet-stop-size);height:var(--sbb-pearl-chain-bullet-stop-size)}.bullet--stop circle{fill:#0000;r:calc(50% - var(--sbb-pearl-chain-bullet-stop-stroke-width) / 2);stroke-width:var(--sbb-pearl-chain-bullet-stop-stroke-width)}.bullet--skip .dash{fill:var(--sbb-color-error)}.bullet--exceptional-skip{width:var(--sbb-pearl-chain-bullet-exceptional-skip-size);height:var(--sbb-pearl-chain-bullet-exceptional-skip-size)}.bullet--exceptional-skip .dash{fill:var(--sbb-color-error)}.bullet--stop-duty .outer-circle{fill:#0000;r:calc(50% - var(--sbb-pearl-chain-bullet-stroke-width) / 2);stroke-width:var(--sbb-pearl-chain-bullet-stroke-width);stroke-dasharray:2.1 1}.bullet--boarding .outer-circle,.bullet--alighting .outer-circle,.bullet--exceptional-boarding .outer-circle,.bullet--exceptional-alighting .outer-circle,.bullet--stop-on-demand .outer-circle,.bullet--boarding-on-demand .outer-circle,.bullet--alighting-on-demand .outer-circle{fill:#0000;r:calc(50% - var(--sbb-pearl-chain-bullet-stroke-width) / 2);stroke-width:var(--sbb-pearl-chain-bullet-stroke-width)}
+`;const g=e=>e===`arrival`||e===`departure`?e:e===``||e===!0||null;let _=(()=>{let p=l,m=[],_,v=[],y=[],b,x=[],S=[],C,w=[],T=[],E,D=[],O=[],k,A=[],j=[],M,N;return class extends p{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(p[Symbol.metadata]??null):void 0;_=[o()],b=[f(g),o()],C=[f(g),o()],E=[f(g),o()],k=[f(g),o()],M=[o()],N=[o()],e(this,null,_,{kind:`accessor`,name:`type`,static:!1,private:!1,access:{has:e=>`type`in e,get:e=>e.type,set:(e,t)=>{e.type=t}},metadata:t},v,y),e(this,null,b,{kind:`accessor`,name:`disrupted`,static:!1,private:!1,access:{has:e=>`disrupted`in e,get:e=>e.disrupted,set:(e,t)=>{e.disrupted=t}},metadata:t},x,S),e(this,null,C,{kind:`accessor`,name:`walk`,static:!1,private:!1,access:{has:e=>`walk`in e,get:e=>e.walk,set:(e,t)=>{e.walk=t}},metadata:t},w,T),e(this,null,E,{kind:`accessor`,name:`unsure`,static:!1,private:!1,access:{has:e=>`unsure`in e,get:e=>e.unsure,set:(e,t)=>{e.unsure=t}},metadata:t},D,O),e(this,null,k,{kind:`accessor`,name:`irrelevant`,static:!1,private:!1,access:{has:e=>`irrelevant`in e,get:e=>e.irrelevant,set:(e,t)=>{e.irrelevant=t}},metadata:t},A,j),e(this,null,M,{kind:`setter`,name:`arrival`,static:!1,private:!1,access:{has:e=>`arrival`in e,set:(e,t)=>{e.arrival=t}},metadata:t},null,m),e(this,null,N,{kind:`setter`,name:`departure`,static:!1,private:!1,access:{has:e=>`departure`in e,set:(e,t)=>{e.departure=t}},metadata:t},null,m),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-pearl-chain-node`}static{this.styles=a(h)}#e;get type(){return this.#e}set type(e){this.#e=e}#t;get disrupted(){return this.#t}set disrupted(e){this.#t=e}#n;get walk(){return this.#n}set walk(e){this.#n=e}#r;get unsure(){return this.#r}set unsure(e){this.#r=e}#i;get irrelevant(){return this.#i}set irrelevant(e){this.#i=e}set arrival(e){this._arrival=d.getValidDateOrNull(d.deserialize(e))}get arrival(){return this._arrival}set departure(e){this._departure=d.getValidDateOrNull(d.deserialize(e))}get departure(){return this._departure}get now(){return this._chain?.now??this._now}constructor(){super(),this.#e=(t(this,m),t(this,v,null)),this.#t=(t(this,y),t(this,x,null)),this.#n=(t(this,S),t(this,w,null)),this.#r=(t(this,T),t(this,D,null)),this.#i=(t(this,O),t(this,A,null)),this._arrival=(t(this,j),null),this._departure=null,this._now=/* @__PURE__ */ new Date,this._chain=null,this.addController(new u(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(e){super.updated(e),e.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 i`
+          <circle r="50%" fill="currentColor" />
+        `;case`stop`:return i`
+          <circle
+            stroke="currentColor"
+          />
+        `;case`skip`:return i`
+          <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 i`
+          <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 i`
+          <circle
+            class="outer-circle"
+            stroke="currentColor"
+          />
+        `;case`boarding`:case`exceptional-boarding`:return i`
+          <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 i`
+          <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 i`
+          <circle
+            class="outer-circle"
+            stroke="currentColor"
+          />
+          <circle
+            fill="currentColor"
+            r="20%"
+          />
+        `;case`boarding-on-demand`:return i`
+          <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 i`
+          <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 r}}render(){return n`
+      <svg
+        viewBox=${this.type===`exceptional-skip`?`0 0 12 12`:`0 0 10 10`}
+        class="bullet ${s({[`bullet--${this.type}`]:!!this.type,"bullet--irrelevant":!!this.irrelevant,"bullet--disruption":!!this.disrupted,"bullet--past":this._isPast()})}"
+        aria-hidden="true"
+        ${c(e=>{this.svgElem=e})}
+      >
+        ${this._renderBullet()}
+      </svg>
+    `}}})();var v=`:host{--sbb-pearl-chain-bullet-now-animation-duration:var(--sbb-disable-animation-duration,2s);display:block;position:relative}:host(:is(:state(horizontal),[state--horizontal])){--sbb-pearl-chain-bullet-rotation:-90deg}.sbb-pearl-chain__svg{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.line{stroke:var(--sbb-pearl-chain-color);stroke-width:var(--sbb-pearl-chain-stroke-width)}.line--past{stroke:var(--sbb-pearl-chain-past-color)}.line--walk{stroke:var(--sbb-pearl-chain-walk-color);stroke-dasharray:.125rem}.line--unsure{stroke-dasharray:.125rem}.line--disruption{stroke:var(--sbb-pearl-chain-disruption-color);stroke-dasharray:.125rem}.line--irrelevant{stroke:var(--sbb-pearl-chain-irrelevant-color);stroke-width:var(--sbb-pearl-chain-irrelevant-stroke-width)}.now-dot{fill:var(--sbb-pearl-chain-now-color);stroke:var(--sbb-pearl-chain-now-color);stroke-opacity:var(--sbb-pearl-chain-bullet-now-animation-opacity);r:calc(var(--sbb-pearl-chain-now-size) / 2);animation:sbb-pearl-chain-pulse var(--sbb-pearl-chain-bullet-now-animation-duration) ease-out infinite}@keyframes sbb-pearl-chain-pulse{0%{stroke-width:0}50%{stroke-width:calc(var(--sbb-pearl-chain-now-size) / 2)}to{stroke-width:0}}
+`;const y=(e,t,n)=>({x:e.x+(t.x-e.x)*n,y:e.y+(t.y-e.y)*n}),b=(e,t,n)=>{let r=Math.hypot(t.x-e.x,t.y-e.y);return r===0?t:y(e,t,Math.max(0,(r-n)/r))};let x=(()=>{let c=l,u=[],f;return class extends c{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(c[Symbol.metadata]??null):void 0;f=[o()],e(this,null,f,{kind:`setter`,name:`now`,static:!1,private:!1,access:{has:e=>`now`in e,set:(e,t)=>{e.now=t}},metadata:t},null,u),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-pearl-chain`}static{this.styles=a(v)}set now(e){this._userNow=d.getValidDateOrNull(d.deserialize(e))}get now(){return this._userNow??this._systemNow}get nodes(){return this._nodes.slice()}constructor(){super(),this._userNow=(t(this,u),null),this._systemNow=/* @__PURE__ */ new Date,this._nodes=[],this._orientation=`vertical`;let e={callback:()=>this._debouncedPositionLines(),skipInitial:!0};this.addController(new m(this,e)),this.addController(new p(this,e))}calculateNodeWeights(){let e=this._nodes.map(e=>(e.departure??e.arrival).getTime()),t=e[0],n=e[e.length-1]-t;return e.map(e=>(e-t)/n)}addNode(e){this._nodes.includes(e)||(this._nodes.push(e),this._nodes.sort((e,t)=>e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1),this.requestUpdate())}removeNode(e){let t=this._nodes.indexOf(e);t!==-1&&(this._nodes.splice(t,1),this.requestUpdate())}connectedCallback(){super.connectedCallback(),this._systemNowIntervalId=setInterval(()=>{this._systemNow=/* @__PURE__ */ new Date,this.requestUpdate()},3e4)}disconnectedCallback(){super.disconnectedCallback(),clearInterval(this._systemNowIntervalId)}updated(e){super.updated(e),this._positionLines()}firstUpdated(e){super.firstUpdated(e),this._svgElem=this.shadowRoot.querySelector(`.sbb-pearl-chain__svg`)}_debouncedPositionLines(){clearTimeout(this._debounceId),this._debounceId=setTimeout(()=>this._positionLines(),150)}_positionLines(){let e=this.shadowRoot?.querySelectorAll(`[data-segment]`);if(!e?.length||!this._svgElem)return;let t=this._svgElem.getBoundingClientRect(),n=this._nodes.map(e=>{let n=e.svgElem?.getBoundingClientRect()??e.getBoundingClientRect();return{x:n.left+n.width/2-t.left,y:n.top+n.height/2-t.top,size:n.width}});this._updateOrientation(n);for(let t of e){let e=Number(t.dataset.segment),r=b(n[e+1],n[e],n[e].size/2),i=this._needsGap(this._nodes[e+1])?b(r,n[e+1],2+n[e+1].size/2):b(r,n[e+1],n[e+1].size/2);switch(t.dataset.role){case`dot`:{let r=this._progressRatio(this._nodes[e],this._nodes[e+1]),i=y(n[e],n[e+1],r);t.setAttribute(`cx`,`${i.x}`),t.setAttribute(`cy`,`${i.y}`);break}case`before`:{let n=this._progressRatio(this._nodes[e],this._nodes[e+1]),a=y(r,i,n);this._setLineCords(t,r,a);break}case`after`:{let n=this._progressRatio(this._nodes[e],this._nodes[e+1]),a=y(r,i,n);this._setLineCords(t,a,i);break}default:this._setLineCords(t,r,i)}}}_setLineCords(e,t,n){e.setAttribute(`x1`,`${t.x}`),e.setAttribute(`y1`,`${t.y}`),e.setAttribute(`x2`,`${n.x}`),e.setAttribute(`y2`,`${n.y}`)}_updateOrientation(e){let t=1/0,n=-1/0,r=1/0,i=-1/0;for(let{x:a,y:o}of e)a<t&&(t=a),a>n&&(n=a),o<r&&(r=o),o>i&&(i=o);let a=n-t>i-r;this.toggleState(`horizontal`,a),this._orientation=a?`horizontal`:`vertical`}_needsGap(e){return this._orientation===`horizontal`&&e.type!==null&&e.type!==`start`&&e.type!==`end`}_progressRatio(e,t){let n=e.departure,r=t.arrival;if(!n||!r)return null;let i=this.now.getTime();return i<n.getTime()||i>r.getTime()?null:(i-n.getTime())/(r.getTime()-n.getTime())}_lineClasses(e,t){return{"line--past":this._isLinePast(t),"line--walk":e.walk===!0||e.walk===`departure`||t.walk===!0||t.walk===`arrival`,"line--unsure":e.unsure===!0||e.unsure===`departure`||t.unsure===!0||t.unsure===`arrival`,"line--irrelevant":e.irrelevant===!0||e.irrelevant===`departure`||t.irrelevant===!0||t.irrelevant===`arrival`,"line--disruption":e.disrupted===!0||e.disrupted===`departure`||t.disrupted===!0||t.disrupted===`arrival`}}_isLinePast(e){let t=e.arrival??e.departure;return!!t&&t.getTime()<this.now.getTime()}_isLineCurrent(e,t){return this._progressRatio(e,t)!==null}_renderSegment(e,t,n){let r=this._lineClasses(e,t);return!r[`line--disruption`]&&!r[`line--walk`]&&this._isLineCurrent(e,t)?i`
+        <line class="line line--past" data-segment="${n}" data-role="before"></line>
+        <line class="line ${s(r)}" data-segment="${n}" data-role="after"></line>
+        <circle class="now-dot" data-segment="${n}" data-role="dot"></circle>
+      `:i`<line class="line ${s(r)}" data-segment="${n}"></line>`}render(){return n`
+      <slot></slot>
+      <svg class="sbb-pearl-chain__svg" aria-hidden="true">
+        ${this._nodes.length>1?Array.from({length:this._nodes.length-1},(e,t)=>this._renderSegment(this._nodes[t],this._nodes[t+1],t)):r}
+      </svg>
+    `}}})();export{x as SbbPearlChainElement,_ as SbbPearlChainNodeElement};

package/safety-theme.css

@@ -1761,6 +1761,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);

package/standard-theme.css

@@ -1761,6 +1761,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);