@sbb-esta/lyne-elements-experimental-dev 0.0.0 → 4.0.0-dev.1775550888

package/off-brand-theme.css

@@ -0,0 +1,13 @@
+:root {
+  --sbb-autocomplete-grid-row-color: var(--sbb-color-3);
+  --sbb-autocomplete-grid-row-background-color-hover: var(--sbb-background-color-3);
+  --sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-color-graphite);
+  --sbb-autocomplete-grid-row-disabled-border-color: light-dark(
+    var(--sbb-color-graphite),
+    var(--sbb-color-smoke)
+  );
+  --sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-background-color-3);
+  --sbb-autocomplete-grid-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);
+  --sbb-autocomplete-grid-row-justify-content: space-between;
+  --sbb-autocomplete-grid-row-cursor: var(--sbb-cursor-pointer);
+}

package/package.json

@@ -1,7 +1,228 @@
 {
   "name": "@sbb-esta/lyne-elements-experimental-dev",
-  "version": "0.0.0",
+  "version": "4.0.0-dev.1775550888",
+  "description": "Lyne Design System",
+  "keywords": [
+    "design system",
+    "web components",
+    "lit",
+    "storybook",
+    "https://github.com/sbb-design-systems/lyne-components/commit/a079c66e5af4442b12208c077145db535683c00f"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./core.css": {
+      "style": "./core.css",
+      "default": "./core.css"
+    },
+    "./off-brand-theme.css": {
+      "style": "./off-brand-theme.css",
+      "default": "./off-brand-theme.css"
+    },
+    "./safety-theme.css": {
+      "style": "./safety-theme.css",
+      "default": "./safety-theme.css"
+    },
+    "./standard-theme.css": {
+      "style": "./standard-theme.css",
+      "default": "./standard-theme.css"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    "./autocomplete-grid.js": {
+      "types": "./development/autocomplete-grid.d.ts",
+      "development": "./development/autocomplete-grid.js",
+      "default": "./autocomplete-grid.js"
+    },
+    "./autocomplete-grid.pure.js": {
+      "types": "./development/autocomplete-grid.pure.d.ts",
+      "development": "./development/autocomplete-grid.pure.js",
+      "default": "./autocomplete-grid.pure.js"
+    },
+    "./autocomplete-grid/autocomplete-grid.js": {
+      "types": "./development/autocomplete-grid/autocomplete-grid.d.ts",
+      "development": "./development/autocomplete-grid/autocomplete-grid.js",
+      "default": "./autocomplete-grid/autocomplete-grid.js"
+    },
+    "./autocomplete-grid/autocomplete-grid-button.js": {
+      "types": "./development/autocomplete-grid/autocomplete-grid-button.d.ts",
+      "development": "./development/autocomplete-grid/autocomplete-grid-button.js",
+      "default": "./autocomplete-grid/autocomplete-grid-button.js"
+    },
+    "./autocomplete-grid/autocomplete-grid-cell.js": {
+      "types": "./development/autocomplete-grid/autocomplete-grid-cell.d.ts",
+      "development": "./development/autocomplete-grid/autocomplete-grid-cell.js",
+      "default": "./autocomplete-grid/autocomplete-grid-cell.js"
+    },
+    "./autocomplete-grid/autocomplete-grid-optgroup.js": {
+      "types": "./development/autocomplete-grid/autocomplete-grid-optgroup.d.ts",
+      "development": "./development/autocomplete-grid/autocomplete-grid-optgroup.js",
+      "default": "./autocomplete-grid/autocomplete-grid-optgroup.js"
+    },
+    "./autocomplete-grid/autocomplete-grid-option.js": {
+      "types": "./development/autocomplete-grid/autocomplete-grid-option.d.ts",
+      "development": "./development/autocomplete-grid/autocomplete-grid-option.js",
+      "default": "./autocomplete-grid/autocomplete-grid-option.js"
+    },
+    "./autocomplete-grid/autocomplete-grid-row.js": {
+      "types": "./development/autocomplete-grid/autocomplete-grid-row.d.ts",
+      "development": "./development/autocomplete-grid/autocomplete-grid-row.js",
+      "default": "./autocomplete-grid/autocomplete-grid-row.js"
+    },
+    "./core/datetime.js": {
+      "types": "./development/core/datetime.d.ts",
+      "development": "./development/core/datetime.js",
+      "default": "./core/datetime.js"
+    },
+    "./core/timetable.js": {
+      "types": "./development/core/timetable.d.ts",
+      "development": "./development/core/timetable.js",
+      "default": "./core/timetable.js"
+    },
+    "./journey-summary.js": {
+      "types": "./development/journey-summary.d.ts",
+      "development": "./development/journey-summary.js",
+      "default": "./journey-summary.js"
+    },
+    "./journey-summary.pure.js": {
+      "types": "./development/journey-summary.pure.d.ts",
+      "development": "./development/journey-summary.pure.js",
+      "default": "./journey-summary.pure.js"
+    },
+    "./pearl-chain.js": {
+      "types": "./development/pearl-chain.d.ts",
+      "development": "./development/pearl-chain.js",
+      "default": "./pearl-chain.js"
+    },
+    "./pearl-chain-time.js": {
+      "types": "./development/pearl-chain-time.d.ts",
+      "development": "./development/pearl-chain-time.js",
+      "default": "./pearl-chain-time.js"
+    },
+    "./pearl-chain-time.pure.js": {
+      "types": "./development/pearl-chain-time.pure.d.ts",
+      "development": "./development/pearl-chain-time.pure.js",
+      "default": "./pearl-chain-time.pure.js"
+    },
+    "./pearl-chain-vertical.js": {
+      "types": "./development/pearl-chain-vertical.d.ts",
+      "development": "./development/pearl-chain-vertical.js",
+      "default": "./pearl-chain-vertical.js"
+    },
+    "./pearl-chain-vertical-item.js": {
+      "types": "./development/pearl-chain-vertical-item.d.ts",
+      "development": "./development/pearl-chain-vertical-item.js",
+      "default": "./pearl-chain-vertical-item.js"
+    },
+    "./pearl-chain-vertical-item.pure.js": {
+      "types": "./development/pearl-chain-vertical-item.pure.d.ts",
+      "development": "./development/pearl-chain-vertical-item.pure.js",
+      "default": "./pearl-chain-vertical-item.pure.js"
+    },
+    "./pearl-chain-vertical.pure.js": {
+      "types": "./development/pearl-chain-vertical.pure.d.ts",
+      "development": "./development/pearl-chain-vertical.pure.js",
+      "default": "./pearl-chain-vertical.pure.js"
+    },
+    "./pearl-chain.pure.js": {
+      "types": "./development/pearl-chain.pure.d.ts",
+      "development": "./development/pearl-chain.pure.js",
+      "default": "./pearl-chain.pure.js"
+    },
+    "./seat-reservation.js": {
+      "types": "./development/seat-reservation.d.ts",
+      "development": "./development/seat-reservation.js",
+      "default": "./seat-reservation.js"
+    },
+    "./seat-reservation.pure.js": {
+      "types": "./development/seat-reservation.pure.d.ts",
+      "development": "./development/seat-reservation.pure.js",
+      "default": "./seat-reservation.pure.js"
+    },
+    "./seat-reservation/common.js": {
+      "types": "./development/seat-reservation/common.d.ts",
+      "development": "./development/seat-reservation/common.js",
+      "default": "./seat-reservation/common.js"
+    },
+    "./seat-reservation/seat-reservation.js": {
+      "types": "./development/seat-reservation/seat-reservation.d.ts",
+      "development": "./development/seat-reservation/seat-reservation.js",
+      "default": "./seat-reservation/seat-reservation.js"
+    },
+    "./seat-reservation/seat-reservation-area.js": {
+      "types": "./development/seat-reservation/seat-reservation-area.d.ts",
+      "development": "./development/seat-reservation/seat-reservation-area.js",
+      "default": "./seat-reservation/seat-reservation-area.js"
+    },
+    "./seat-reservation/seat-reservation-graphic.js": {
+      "types": "./development/seat-reservation/seat-reservation-graphic.d.ts",
+      "development": "./development/seat-reservation/seat-reservation-graphic.js",
+      "default": "./seat-reservation/seat-reservation-graphic.js"
+    },
+    "./seat-reservation/seat-reservation-navigation-coach.js": {
+      "types": "./development/seat-reservation/seat-reservation-navigation-coach.d.ts",
+      "development": "./development/seat-reservation/seat-reservation-navigation-coach.js",
+      "default": "./seat-reservation/seat-reservation-navigation-coach.js"
+    },
+    "./seat-reservation/seat-reservation-navigation-services.js": {
+      "types": "./development/seat-reservation/seat-reservation-navigation-services.d.ts",
+      "development": "./development/seat-reservation/seat-reservation-navigation-services.js",
+      "default": "./seat-reservation/seat-reservation-navigation-services.js"
+    },
+    "./seat-reservation/seat-reservation-place-control.js": {
+      "types": "./development/seat-reservation/seat-reservation-place-control.d.ts",
+      "development": "./development/seat-reservation/seat-reservation-place-control.js",
+      "default": "./seat-reservation/seat-reservation-place-control.js"
+    },
+    "./seat-reservation/seat-reservation-scoped.js": {
+      "types": "./development/seat-reservation/seat-reservation-scoped.d.ts",
+      "development": "./development/seat-reservation/seat-reservation-scoped.js",
+      "default": "./seat-reservation/seat-reservation-scoped.js"
+    },
+    "./timetable-duration.js": {
+      "types": "./development/timetable-duration.d.ts",
+      "development": "./development/timetable-duration.js",
+      "default": "./timetable-duration.js"
+    },
+    "./timetable-duration.pure.js": {
+      "types": "./development/timetable-duration.pure.d.ts",
+      "development": "./development/timetable-duration.pure.js",
+      "default": "./timetable-duration.pure.js"
+    },
+    "./timetable-row.js": {
+      "types": "./development/timetable-row.d.ts",
+      "development": "./development/timetable-row.js",
+      "default": "./timetable-row.js"
+    },
+    "./timetable-row.pure.js": {
+      "types": "./development/timetable-row.pure.d.ts",
+      "development": "./development/timetable-row.pure.js",
+      "default": "./timetable-row.pure.js"
+    }
+  },
+  "customElements": "custom-elements.json",
+  "peerDependencies": {
+    "@sbb-esta/lyne-elements": "4.0.0"
+  },
+  "dependencies": {
+    "lit": "^3.3.2",
+    "tslib": "^2.8.1"
+  },
   "publishConfig": {
     "access": "public"
+  },
+  "author": "Lyne Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sbb-design-systems/lyne-components.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sbb-design-systems/lyne-components/issues"
   }
 }

package/pearl-chain/pearl-chain.component.js

@@ -0,0 +1,2 @@
+import { t as e } from "../pearl-chain.component-CpISVoAu.js";
+export { e as SbbPearlChainElement };

package/pearl-chain-time/pearl-chain-time.component.js

@@ -0,0 +1,2 @@
+import { t as e } from "../pearl-chain-time.component-CkKsrbgQ.js";
+export { e as SbbPearlChainTimeElement };

package/pearl-chain-time.component-CkKsrbgQ.js

@@ -0,0 +1,239 @@
+import { t as e } from "./format-CM5exOsN.js";
+import { __esDecorate as t, __runInitializers as n } from "tslib";
+import { SbbElement as r } from "@sbb-esta/lyne-elements/core/base-elements.js";
+import { SbbLanguageController as i } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { forceType as a } from "@sbb-esta/lyne-elements/core/decorators.js";
+import { boxSizingStyles as o } from "@sbb-esta/lyne-elements/core/styles.js";
+import { html as s, nothing as c, unsafeCSS as l } from "lit";
+import { defaultDateAdapter as u } from "@sbb-esta/lyne-elements/core/datetime.js";
+import { i18nArrival as d, i18nDeparture as f, i18nTransferProcedures as p } from "@sbb-esta/lyne-elements/core/i18n.js";
+import { property as m } from "lit/decorators.js";
+import { removeTimezoneFromISOTimeString as h } from "./core/datetime.js";
+import { getDepartureArrivalTimeAttribute as g, isRideLeg as _ } from "./core/timetable.js";
+import "./pearl-chain.js";
+//#region src/elements-experimental/pearl-chain-time/pearl-chain-time.scss?inline
+var v = ":host{display:block;--sbb-pearl-chain-time-height: auto}@media(min-width:37.5rem){:host{--sbb-pearl-chain-time-height: 1.5625rem}}@media(min-width:64rem){:host{--sbb-pearl-chain-time-height: 1.75rem}}.sbb-pearl-chain__time{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;height:var(--sbb-pearl-chain-time-height)}.sbb-pearl-chain__time-walktime,.sbb-pearl-chain__time-transfer{--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);display:inline-flex;align-items:center}.sbb-pearl-chain__time-walktime--walk-small-left{transform:translate(-.4375rem);margin-inline-end:calc(var(--sbb-spacing-fixed-2x) - .4375rem)}.sbb-pearl-chain__time-walktime--walk-small-right{margin-inline-start:calc(var(--sbb-spacing-fixed-2x) - .25rem)}.sbb-pearl-chain__time-walktime--wheelchair-small-left{transform:translate(-.375rem);margin-inline-end:calc(var(--sbb-spacing-fixed-2x) - .4375rem)}.sbb-pearl-chain__time-walktime--wheelchair-small-right{margin-inline-start:calc(var(--sbb-spacing-fixed-2x) - .25rem)}.sbb-pearl-chain__time-walktime-prime-symbol{float:right}.sbb-pearl-chain__time-transfer{gap:var(--sbb-spacing-fixed-1x)}.sbb-pearl-chain__time-transfer--sa-ci-departure{margin-inline-end:var(--sbb-spacing-fixed-2x)}.sbb-pearl-chain__time-transfer--sa-ci-arrival{margin-inline-start:calc(var(--sbb-spacing-fixed-2x) - .25rem)}.sbb-pearl-chain__time-chain{flex:1 1 auto;align-self:center;margin-inline:var(--sbb-spacing-fixed-3x)}.sbb-pearl-chain__time-time{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;color:var(--sbb-color-2)}.sbb-screen-reader-only{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}", y = (() => {
+	let y = r, b = [], x, S = [], C = [], w, T = [], E = [], D, O = [], k = [], A, j = [], M = [], N, P = [], F = [], I, L = [], R = [], z, B = [], V = [], H;
+	return class extends y {
+		constructor() {
+			super(...arguments), this.#e = (n(this, b), n(this, S, [])), this.#t = (n(this, C), n(this, T, "")), this.#n = (n(this, E), n(this, O, "")), this.#r = (n(this, k), n(this, j, NaN)), this.#i = (n(this, M), n(this, P, NaN)), this.#a = (n(this, F), n(this, L, !1)), this.#o = (n(this, R), n(this, B, !1)), this._now = (n(this, V), null), this._language = new i(this);
+		}
+		static {
+			let e = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
+			x = [m({ type: Array })], w = [a(), m({ attribute: "departure-time" })], D = [a(), m({ attribute: "arrival-time" })], A = [a(), m({
+				attribute: "departure-walk",
+				type: Number
+			})], N = [a(), m({
+				attribute: "arrival-walk",
+				type: Number
+			})], I = [a(), m({
+				attribute: "disable-animation",
+				type: Boolean
+			})], z = [a(), m({
+				attribute: "a11y-footpath",
+				type: Boolean
+			})], H = [m()], t(this, null, x, {
+				kind: "accessor",
+				name: "legs",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "legs" in e,
+					get: (e) => e.legs,
+					set: (e, t) => {
+						e.legs = t;
+					}
+				},
+				metadata: e
+			}, S, C), t(this, null, w, {
+				kind: "accessor",
+				name: "departureTime",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "departureTime" in e,
+					get: (e) => e.departureTime,
+					set: (e, t) => {
+						e.departureTime = t;
+					}
+				},
+				metadata: e
+			}, T, E), t(this, null, D, {
+				kind: "accessor",
+				name: "arrivalTime",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "arrivalTime" in e,
+					get: (e) => e.arrivalTime,
+					set: (e, t) => {
+						e.arrivalTime = t;
+					}
+				},
+				metadata: e
+			}, O, k), t(this, null, A, {
+				kind: "accessor",
+				name: "departureWalk",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "departureWalk" in e,
+					get: (e) => e.departureWalk,
+					set: (e, t) => {
+						e.departureWalk = t;
+					}
+				},
+				metadata: e
+			}, j, M), t(this, null, N, {
+				kind: "accessor",
+				name: "arrivalWalk",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "arrivalWalk" in e,
+					get: (e) => e.arrivalWalk,
+					set: (e, t) => {
+						e.arrivalWalk = t;
+					}
+				},
+				metadata: e
+			}, P, F), t(this, null, I, {
+				kind: "accessor",
+				name: "disableAnimation",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "disableAnimation" in e,
+					get: (e) => e.disableAnimation,
+					set: (e, t) => {
+						e.disableAnimation = t;
+					}
+				},
+				metadata: e
+			}, L, R), t(this, null, z, {
+				kind: "accessor",
+				name: "a11yFootpath",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "a11yFootpath" in e,
+					get: (e) => e.a11yFootpath,
+					set: (e, t) => {
+						e.a11yFootpath = t;
+					}
+				},
+				metadata: e
+			}, B, V), t(this, null, H, {
+				kind: "setter",
+				name: "now",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "now" in e,
+					set: (e, t) => {
+						e.now = t;
+					}
+				},
+				metadata: e
+			}, null, b), e && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: e
+			});
+		}
+		static {
+			this.elementName = "sbb-pearl-chain-time";
+		}
+		static {
+			this.styles = [o, l(v)];
+		}
+		#e;
+		get legs() {
+			return this.#e;
+		}
+		set legs(e) {
+			this.#e = e;
+		}
+		#t;
+		get departureTime() {
+			return this.#t;
+		}
+		set departureTime(e) {
+			this.#t = e;
+		}
+		#n;
+		get arrivalTime() {
+			return this.#n;
+		}
+		set arrivalTime(e) {
+			this.#n = e;
+		}
+		#r;
+		get departureWalk() {
+			return this.#r;
+		}
+		set departureWalk(e) {
+			this.#r = e;
+		}
+		#i;
+		get arrivalWalk() {
+			return this.#i;
+		}
+		set arrivalWalk(e) {
+			this.#i = e;
+		}
+		#a;
+		get disableAnimation() {
+			return this.#a;
+		}
+		set disableAnimation(e) {
+			this.#a = e;
+		}
+		#o;
+		get a11yFootpath() {
+			return this.#o;
+		}
+		set a11yFootpath(e) {
+			this.#o = e;
+		}
+		set now(e) {
+			this._now = u.getValidDateOrNull(u.deserialize(e));
+		}
+		get now() {
+			return this._now ?? /* @__PURE__ */ new Date();
+		}
+		render() {
+			let t = this.departureTime ? h(this.departureTime) : void 0, n = this.arrivalTime ? h(this.arrivalTime) : void 0, { renderDepartureTimeAttribute: r, renderArrivalTimeAttribute: i } = g(this.legs, this.departureWalk || 0, this.arrivalWalk || 0, this._language.current, this.a11yFootpath), a = this.legs?.filter((e) => _(e));
+			return s`
+      <div class="sbb-pearl-chain__time">
+        ${r()}
+        ${t ? s`<time class="sbb-pearl-chain__time-time" datetime=${this.departureTime}>
+              <span class="sbb-screen-reader-only"
+                >${f[this._language.current]}:&nbsp;</span
+              >
+              ${e(t, "HH:mm")}
+            </time>` : c}
+        ${a?.length > 1 ? s`<span class="sbb-screen-reader-only" role="paragraph">
+              ${a?.length - 1} ${p[this._language.current]}
+            </span>` : c}
+        <sbb-pearl-chain
+          class="sbb-pearl-chain__time-chain"
+          .legs=${this.legs}
+          .disableAnimation=${this.disableAnimation}
+          .now=${this.now}
+        ></sbb-pearl-chain>
+        ${n ? s`<time class="sbb-pearl-chain__time-time" datetime=${this.arrivalTime}>
+              <span class="sbb-screen-reader-only"
+                >${d[this._language.current]}:&nbsp;</span
+              >
+              ${e(n, "HH:mm")}
+            </time>` : c}
+        ${i()}
+      </div>
+    `;
+		}
+	};
+})();
+//#endregion
+export { y as t };

package/pearl-chain-time.js

@@ -0,0 +1,6 @@
+import { t as e } from "./pearl-chain-time.component-CkKsrbgQ.js";
+import "./pearl-chain-time.pure.js";
+//#region src/elements-experimental/pearl-chain-time.ts
+e.define();
+//#endregion
+export { e as SbbPearlChainTimeElement };

package/pearl-chain-time.pure.js

@@ -0,0 +1,2 @@
+import { t as e } from "./pearl-chain-time.component-CkKsrbgQ.js";
+export { e as SbbPearlChainTimeElement };

package/pearl-chain-vertical/pearl-chain-vertical.component.js

@@ -0,0 +1,2 @@
+import { t as e } from "../pearl-chain-vertical.component-Df9CvRxo.js";
+export { e as SbbPearlChainVerticalElement };

package/pearl-chain-vertical-item/pearl-chain-vertical-item.component.js

@@ -0,0 +1,2 @@
+import { t as e } from "../pearl-chain-vertical-item.component-BUqZ-3Ay.js";
+export { e as SbbPearlChainVerticalItemElement };

package/pearl-chain-vertical-item.component-BUqZ-3Ay.js

@@ -0,0 +1,108 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { SbbElement as n } from "@sbb-esta/lyne-elements/core/base-elements.js";
+import { forceType as r } from "@sbb-esta/lyne-elements/core/decorators.js";
+import { boxSizingStyles as i } from "@sbb-esta/lyne-elements/core/styles.js";
+import { html as a, nothing as o, unsafeCSS as s } from "lit";
+import { property as c } from "lit/decorators.js";
+import { styleMap as l } from "lit/directives/style-map.js";
+//#region src/elements-experimental/pearl-chain-vertical-item/pearl-chain-vertical-item.scss?inline
+var u = ":host{--sbb-pearl-chain-position-color: var(--sbb-color-primary);--sbb-pearl-chain-bullet-size-start-end: .625rem;--sbb-pearl-chain-bullet-size-stop: .5rem;--sbb-pearl-chain-bullet-color: var(--sbb-background-color-3-inverted);--sbb-pearl-chain-bullet-color-past: var(--sbb-color-metal);--sbb-pearl-chain-bullet-color-past: light-dark(var(--sbb-color-metal), var(--sbb-color-granite));--sbb-pearl-chain-bullet-color-irrelevant: var(--sbb-color-metal);--sbb-pearl-chain-bullet-color-irrelevant: light-dark( var(--sbb-color-metal), var(--sbb-color-granite) );--sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-error);--sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-2x);--sbb-pearl-chain-bullet-animation-duration: 1.92s;--sbb-pearl-chain-bullet-animation-easing: ease-out;--sbb-pearl-chain-bullet-crossed-width: .88375rem;--sbb-pearl-chain-bullet-crossed-height: .21875rem;--sbb-pearl-chain-bullet-crossed-border-width: .09375rem;display:table-row;position:relative;--sbb-pearl-chain-vertical-right-item-width: 100%;--sbb-pearl-chain-vertical-middle-item-min-width: var(--sbb-pearl-chain-bullet-size-start-end);--sbb-pearl-chain-vertical-item-border-width: var(--sbb-border-width-2x);--sbb-pearl-chain-vertical-item-border-width-thin: var(--sbb-border-width-1x);--sbb-pearl-chain-vertical-item-spacing-small: var(--sbb-spacing-fixed-1x);--sbb-pearl-chain-vertical-item-color-default: var(--sbb-pearl-chain-bullet-color);--sbb-pearl-chain-vertical-item-color-disruption: var(--sbb-pearl-chain-bullet-color-disruption);--sbb-pearl-chain-vertical-item-color-past: var(--sbb-pearl-chain-bullet-color-past);--sbb-pearl-chain-vertical-item-color-walk: var(--sbb-color-sky);--sbb-pearl-chain-vertical-item-inline-start: 50%;--sbb-pearl-chain-vertical-item-transform: translateX(-50%)}slot[name=right],.sbb-pearl-chain-vertical-item__column{display:table-cell;position:relative;vertical-align:top}slot[name=right]{width:var(--sbb-pearl-chain-vertical-right-item-width)}.sbb-pearl-chain-vertical-item__column--middle{min-width:var(--sbb-pearl-chain-vertical-middle-item-min-width, --sbb-pearl-chain-vertical-middle-min-width)}slot[name=left]::slotted(*){margin-block-start:var(--sbb-pearl-chain-vertical-left-item-block-start);padding-inline-end:var(--sbb-pearl-chain-vertical-left-item-inline-end)}slot[name=right]::slotted(*){margin-block-start:var(--sbb-pearl-chain-vertical-right-item-block-start);padding-inline-start:var(--sbb-pearl-chain-vertical-right-item-inline-start)}.sbb-pearl-chain-vertical-item__middle{vertical-align:top;border-spacing:0}.sbb-pearl-chain-vertical-item__line{position:absolute;bottom:0;inset-inline-start:var(--sbb-pearl-chain-vertical-item-inline-start);transform:var(--sbb-pearl-chain-vertical-item-transform);width:var(--sbb-border-width-2x);inset-block-start:calc(var(--sbb-pearl-chain-bullet-size-start-end) / 2)}.sbb-pearl-chain-vertical-item__line:after{content:\"\";position:absolute;inset-inline-start:0;inset-block-start:0;height:var(--sbb-pearl-chain-vertical-item-leg-status);width:var(--sbb-pearl-chain-vertical-item-border-width);background-color:var(--sbb-pearl-chain-vertical-item-color-past)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__line:after{--sbb-pearl-chain-vertical-item-color-past: GrayText}}.sbb-pearl-chain-vertical-item__line--dotted{background-color:unset;border-color:unset;background-image:linear-gradient(to bottom,currentcolor 0%,currentcolor 50%,Canvas 50%);background-repeat:repeat-y;background-size:calc(2 * var(--sbb-pearl-chain-vertical-item-spacing-small)) var(--sbb-pearl-chain-vertical-item-spacing-small)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__line--dotted{background-color:unset!important;border-inline-start:.0625rem dashed Highlight;transform:translateY(.0625rem)}}.sbb-pearl-chain-vertical-item__line--thin{width:var(--sbb-pearl-chain-vertical-item-border-width-thin)}.sbb-pearl-chain-vertical-item__line--default{background-color:var(--sbb-pearl-chain-vertical-item-color-default);border-color:var(--sbb-pearl-chain-vertical-item-color-default);color:var(--sbb-pearl-chain-vertical-item-color-default)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__line--default{--sbb-pearl-chain-vertical-item-color-default: CanvasText}}.sbb-pearl-chain-vertical-item__line--disruption{border-color:var(--sbb-pearl-chain-vertical-item-color-disruption);background-color:var(--sbb-pearl-chain-vertical-item-color-disruption);color:var(--sbb-pearl-chain-vertical-item-color-disruption)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__line--disruption{--sbb-pearl-chain-vertical-item-color-disruption: Highlight}}.sbb-pearl-chain-vertical-item__line--past{border-color:var(--sbb-pearl-chain-vertical-item-color-past);background-color:var(--sbb-pearl-chain-vertical-item-color-past);color:var(--sbb-pearl-chain-vertical-item-color-past)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__line--past{--sbb-pearl-chain-vertical-item-color-past: GrayText}}.sbb-pearl-chain-vertical-item__line--walk{border-color:var(--sbb-pearl-chain-vertical-item-color-walk);background-color:var(--sbb-pearl-chain-vertical-item-color-walk);color:var(--sbb-pearl-chain-vertical-item-color-walk)}.sbb-pearl-chain-vertical-item__bullet{position:relative;inset-inline-start:var(--sbb-pearl-chain-vertical-item-inline-start);transform:var(--sbb-pearl-chain-vertical-item-transform);background:var(--sbb-pearl-chain-bullet-color);color:var(--sbb-pearl-chain-bullet-color);border-color:var(--sbb-pearl-chain-bullet-color);border-radius:100%}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__bullet{--sbb-pearl-chain-bullet-color: CanvasText}}.sbb-pearl-chain-vertical-item__bullet--start-end{min-height:var(--sbb-pearl-chain-bullet-size-start-end);min-width:var(--sbb-pearl-chain-bullet-size-start-end);height:var(--sbb-pearl-chain-bullet-size-start-end);width:var(--sbb-pearl-chain-bullet-size-start-end)}.sbb-pearl-chain-vertical-item__bullet--stop{min-height:var(--sbb-pearl-chain-bullet-size-stop);min-width:var(--sbb-pearl-chain-bullet-size-stop);height:var(--sbb-pearl-chain-bullet-size-stop);width:var(--sbb-pearl-chain-bullet-size-stop);border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:Canvas}.sbb-pearl-chain-vertical-item__bullet--disruption{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__bullet--disruption{--sbb-pearl-chain-bullet-color: Highlight}}.sbb-pearl-chain-vertical-item__bullet--irrelevant,.sbb-pearl-chain-vertical-item__bullet--past{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-past)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__bullet--irrelevant,.sbb-pearl-chain-vertical-item__bullet--past{--sbb-pearl-chain-bullet-color: GrayText !important}}.sbb-pearl-chain-vertical-item__bullet--stop.sbb-pearl-chain-vertical-item__bullet--irrelevant{--sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-1x);min-height:var(--sbb-pearl-chain-bullet-size-stop);min-width:var(--sbb-pearl-chain-bullet-size-stop);height:var(--sbb-pearl-chain-bullet-size-stop);width:var(--sbb-pearl-chain-bullet-size-stop);border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:Canvas}.sbb-pearl-chain-vertical-item__bullet--start-end.sbb-pearl-chain-vertical-item__bullet--skipped{border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:Canvas}.sbb-pearl-chain-vertical-item__bullet--start-end.sbb-pearl-chain-vertical-item__bullet--skipped:before{content:\"\";position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%) rotate(45deg);border-block-start:var(--sbb-pearl-chain-bullet-crossed-border-width) solid canvas;background:var(--sbb-pearl-chain-bullet-color-disruption);height:var(--sbb-pearl-chain-bullet-crossed-height);width:var(--sbb-pearl-chain-bullet-crossed-width)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__bullet--start-end.sbb-pearl-chain-vertical-item__bullet--skipped:before{background:Highlight}}.sbb-pearl-chain-vertical-item__bullet--stop.sbb-pearl-chain-vertical-item__bullet--skipped{--sbb-pearl-chain-bullet-crossed-width: .706875rem;--sbb-pearl-chain-bullet-crossed-height: .1875rem;min-height:var(--sbb-pearl-chain-bullet-size-stop);min-width:var(--sbb-pearl-chain-bullet-size-stop);height:var(--sbb-pearl-chain-bullet-size-stop);width:var(--sbb-pearl-chain-bullet-size-stop);border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:Canvas}.sbb-pearl-chain-vertical-item__bullet--stop.sbb-pearl-chain-vertical-item__bullet--skipped:before{content:\"\";position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%) rotate(45deg);border-block-start:var(--sbb-pearl-chain-bullet-crossed-border-width) solid canvas;background:var(--sbb-pearl-chain-bullet-color-disruption);height:var(--sbb-pearl-chain-bullet-crossed-height);width:var(--sbb-pearl-chain-bullet-crossed-width)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__bullet--stop.sbb-pearl-chain-vertical-item__bullet--skipped:before{background:Highlight}}.sbb-pearl-chain-vertical-item__bullet--position{inset-block-start:var(--sbb-pearl-chain-vertical-item-position);position:absolute;left:50%;transform:translate(-50%);min-height:var(--sbb-pearl-chain-bullet-size-start-end);min-width:var(--sbb-pearl-chain-bullet-size-start-end);height:var(--sbb-pearl-chain-bullet-size-start-end);width:var(--sbb-pearl-chain-bullet-size-start-end);background:var(--sbb-pearl-chain-bullet-color);color:var(--sbb-pearl-chain-bullet-color);border-color:var(--sbb-pearl-chain-bullet-color);border-radius:100%}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__bullet--position{--sbb-pearl-chain-bullet-color: CanvasText}}.sbb-pearl-chain-vertical-item__bullet--position{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-position-color)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__bullet--position{--sbb-pearl-chain-position-color: Highlight}}@keyframes pearl-chain-bullet-position-pulse{0%{box-shadow:0 0 0 0 var(--sbb-pearl-chain-position-color)}25%{box-shadow:0 0 0 0 var(--sbb-pearl-chain-position-color)}50%{box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--sbb-pearl-chain-position-color) 20%,transparent)}to{box-shadow:0 0 0 0 var(--sbb-pearl-chain-position-color)}}.sbb-pearl-chain-vertical-item__bullet--position{animation:pearl-chain-bullet-position-pulse var(--sbb-pearl-chain-bullet-animation-duration) var(--sbb-pearl-chain-bullet-animation-easing) infinite}:host([disable-animation]) .sbb-pearl-chain-vertical-item__bullet--position{animation:unset!important}", d = (() => {
+	let d = n, f, p = [], m = [], h, g = [], _ = [];
+	return class extends d {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
+			f = [c({
+				attribute: "pearl-chain-vertical-item-attributes",
+				type: Object
+			})], h = [r(), c({
+				attribute: "disable-animation",
+				reflect: !0,
+				type: Boolean
+			})], e(this, null, f, {
+				kind: "accessor",
+				name: "pearlChainVerticalItemAttributes",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "pearlChainVerticalItemAttributes" in e,
+					get: (e) => e.pearlChainVerticalItemAttributes,
+					set: (e, t) => {
+						e.pearlChainVerticalItemAttributes = t;
+					}
+				},
+				metadata: t
+			}, p, m), e(this, null, h, {
+				kind: "accessor",
+				name: "disableAnimation",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "disableAnimation" in e,
+					get: (e) => e.disableAnimation,
+					set: (e, t) => {
+						e.disableAnimation = t;
+					}
+				},
+				metadata: t
+			}, g, _), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-pearl-chain-vertical-item";
+		}
+		static {
+			this.styles = [i, s(u)];
+		}
+		#e = t(this, p, null);
+		get pearlChainVerticalItemAttributes() {
+			return this.#e;
+		}
+		set pearlChainVerticalItemAttributes(e) {
+			this.#e = e;
+		}
+		#t = (t(this, m), t(this, g, !1));
+		get disableAnimation() {
+			return this.#t;
+		}
+		set disableAnimation(e) {
+			this.#t = e;
+		}
+		render() {
+			let { bulletType: e, lineType: t, lineColor: n, hideLine: r, minHeight: i, bulletSize: s, position: c } = this.pearlChainVerticalItemAttributes || {}, u = c && c > 0 && c <= 100 ? "sbb-pearl-chain-vertical-item__bullet--past" : `sbb-pearl-chain-vertical-item__bullet--${e}`;
+			return a`
+      <div
+        class="sbb-pearl-chain-vertical-item__column"
+        style=${l({ height: `${i}px` })}
+      >
+        <slot name="left"></slot>
+      </div>
+      <div
+        aria-hidden="true"
+        class="sbb-pearl-chain-vertical-item__column sbb-pearl-chain-vertical-item__column--middle"
+      >
+        ${r ? o : a`<div
+              style=${l({ "--sbb-pearl-chain-vertical-item-leg-status": `${c}%` })}
+              class="sbb-pearl-chain-vertical-item__line sbb-pearl-chain-vertical-item__line--${t} sbb-pearl-chain-vertical-item__line--${n}"
+            ></div>`}
+        ${e ? a`<div
+              class="sbb-pearl-chain-vertical-item__bullet  sbb-pearl-chain-vertical-item__bullet--${s} ${u}"
+            ></div>` : o}
+        ${c && c > 0 ? a`<div
+              style=${l({ "--sbb-pearl-chain-vertical-item-position": `${c}%` })}
+              class="sbb-pearl-chain-vertical-item__bullet--position"
+            ></div>` : o}
+      </div>
+      <slot name="right"></slot>
+    `;
+		}
+		constructor() {
+			super(...arguments), t(this, _);
+		}
+	};
+})();
+//#endregion
+export { d as t };

package/pearl-chain-vertical-item.js

@@ -0,0 +1,6 @@
+import { t as e } from "./pearl-chain-vertical-item.component-BUqZ-3Ay.js";
+import "./pearl-chain-vertical-item.pure.js";
+//#region src/elements-experimental/pearl-chain-vertical-item.ts
+e.define();
+//#endregion
+export { e as SbbPearlChainVerticalItemElement };

package/pearl-chain-vertical-item.pure.js

@@ -0,0 +1,2 @@
+import { t as e } from "./pearl-chain-vertical-item.component-BUqZ-3Ay.js";
+export { e as SbbPearlChainVerticalItemElement };