@sbb-esta/lyne-elements-experimental 5.0.2 → 5.2.0

package/development/pearl-chain-vertical/pearl-chain-vertical.component.d.ts

@@ -1,5 +1,5 @@
 import { SbbElement } from '@sbb-esta/lyne-elements/core.js';
-import { CSSResultGroup, TemplateResult } from 'lit';
+import { type CSSResultGroup, type TemplateResult } from 'lit';
 /**
  * It can be used as a container for the `sbb-pearl-chain-vertical-item` component.
  *
@@ -15,4 +15,3 @@ declare global {
         'sbb-pearl-chain-vertical': SbbPearlChainVerticalElement;
     }
 }
-//# sourceMappingURL=pearl-chain-vertical.component.d.ts.map

package/development/pearl-chain-vertical-item/pearl-chain-vertical-item.component.d.ts

@@ -1,5 +1,5 @@
 import { SbbElement } from '@sbb-esta/lyne-elements/core.js';
-import { CSSResultGroup, TemplateResult } from 'lit';
+import { type CSSResultGroup, type TemplateResult } from 'lit';
 export type LineType = 'dotted' | 'standard' | 'thin';
 export type BulletType = 'default' | 'past' | 'irrelevant' | 'skipped' | 'disruption';
 export type LineColor = 'default' | 'past' | 'disruption' | 'walk';
@@ -33,4 +33,3 @@ declare global {
         'sbb-pearl-chain-vertical-item': SbbPearlChainVerticalItemElement;
     }
 }
-//# sourceMappingURL=pearl-chain-vertical-item.component.d.ts.map

package/development/pearl-chain-vertical-item.d.ts

@@ -1,2 +1 @@
 export * from './pearl-chain-vertical-item.pure.ts';
-//# sourceMappingURL=pearl-chain-vertical-item.d.ts.map

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

@@ -1,9 +1,9 @@
-import { t as SbbPearlChainVerticalItemElement } from "./pearl-chain-vertical-item.component-CLu9QrqJ.js";
-import "./pearl-chain-vertical-item.pure.js";
+import { SbbPearlChainVerticalItemElement } from "./pearl-chain-vertical-item.pure.js";
+
+export * from "./pearl-chain-vertical-item.pure.js"
+
 //#region src/elements-experimental/pearl-chain-vertical-item.ts
 /** @entrypoint */
 SbbPearlChainVerticalItemElement.define();
-//#endregion
-export { SbbPearlChainVerticalItemElement };
 
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGVhcmwtY2hhaW4tdmVydGljYWwtaXRlbS5qcyIsIm5hbWVzIjpbXSwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvZWxlbWVudHMtZXhwZXJpbWVudGFsL3BlYXJsLWNoYWluLXZlcnRpY2FsLWl0ZW0udHMiXSwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBlbnRyeXBvaW50ICovXG5pbXBvcnQgeyBTYmJQZWFybENoYWluVmVydGljYWxJdGVtRWxlbWVudCB9IGZyb20gJy4vcGVhcmwtY2hhaW4tdmVydGljYWwtaXRlbS5wdXJlLnRzJztcblxuZXhwb3J0ICogZnJvbSAnLi9wZWFybC1jaGFpbi12ZXJ0aWNhbC1pdGVtLnB1cmUudHMnO1xuXG5TYmJQZWFybENoYWluVmVydGljYWxJdGVtRWxlbWVudC5kZWZpbmUoKTtcbiJdLCJtYXBwaW5ncyI6Ijs7OztBQUtBLGlDQUFpQyxPQUFNIn0=
+//#endregion

package/development/pearl-chain-vertical-item.pure.d.ts

@@ -1,3 +1,2 @@
 /** @entrypoint */
 export * from './pearl-chain-vertical-item/pearl-chain-vertical-item.component.ts';
-//# sourceMappingURL=pearl-chain-vertical-item.pure.d.ts.map

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

@@ -1,2 +1,132 @@
-import { t as SbbPearlChainVerticalItemElement } from "./pearl-chain-vertical-item.component-CLu9QrqJ.js";
-export { SbbPearlChainVerticalItemElement };
+import { __esDecorate, __runInitializers } from "tslib";
+import { SbbElement, forceType } from "@sbb-esta/lyne-elements/core.js";
+import { html, nothing, unsafeCSS } from "lit";
+import { property } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+
+//#region src/elements-experimental/pearl-chain-vertical-item/pearl-chain-vertical-item.scss?inline
+var pearl_chain_vertical_item_default = ":host {\n  --sbb-pearl-chain-position-color: var(--sbb-color-primary);\n  --sbb-pearl-chain-bullet-size-start-end: 0.625rem;\n  --sbb-pearl-chain-bullet-size-stop: 0.5rem;\n  --sbb-pearl-chain-bullet-color: var(--sbb-background-color-3-inverted);\n  --sbb-pearl-chain-bullet-color-past: var(--sbb-color-metal);\n  --sbb-pearl-chain-bullet-color-past: light-dark(var(--sbb-color-metal), var(--sbb-color-granite));\n  --sbb-pearl-chain-bullet-color-irrelevant: var(--sbb-color-metal);\n  --sbb-pearl-chain-bullet-color-irrelevant: light-dark(\n    var(--sbb-color-metal),\n    var(--sbb-color-granite)\n  );\n  --sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-error);\n  --sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-2x);\n  --sbb-pearl-chain-bullet-animation-duration: 1920ms;\n  --sbb-pearl-chain-bullet-animation-easing: ease-out;\n  --sbb-pearl-chain-bullet-crossed-width: 0.88375rem;\n  --sbb-pearl-chain-bullet-crossed-height: 0.21875rem;\n  --sbb-pearl-chain-bullet-crossed-border-width: 0.09375rem;\n  display: table-row;\n  position: relative;\n  --sbb-pearl-chain-vertical-right-item-width: 100%;\n  --sbb-pearl-chain-vertical-middle-item-min-width: var(--sbb-pearl-chain-bullet-size-start-end);\n  --sbb-pearl-chain-vertical-item-border-width: var(--sbb-border-width-2x);\n  --sbb-pearl-chain-vertical-item-border-width-thin: var(--sbb-border-width-1x);\n  --sbb-pearl-chain-vertical-item-spacing-small: var(--sbb-spacing-fixed-1x);\n  --sbb-pearl-chain-vertical-item-color-default: var(--sbb-pearl-chain-bullet-color);\n  --sbb-pearl-chain-vertical-item-color-disruption: var(--sbb-pearl-chain-bullet-color-disruption);\n  --sbb-pearl-chain-vertical-item-color-past: var(--sbb-pearl-chain-bullet-color-past);\n  --sbb-pearl-chain-vertical-item-color-walk: var(--sbb-color-sky);\n  --sbb-pearl-chain-vertical-item-inline-start: 50%;\n  --sbb-pearl-chain-vertical-item-transform: translateX(-50%);\n}\n\nslot[name=right],\n.sbb-pearl-chain-vertical-item__column {\n  display: table-cell;\n  position: relative;\n  vertical-align: top;\n}\n\nslot[name=right] {\n  width: var(--sbb-pearl-chain-vertical-right-item-width);\n}\n\n.sbb-pearl-chain-vertical-item__column--middle {\n  min-width: var(--sbb-pearl-chain-vertical-middle-item-min-width, --sbb-pearl-chain-vertical-middle-min-width);\n}\n\nslot[name=left]::slotted(*) {\n  margin-block-start: var(--sbb-pearl-chain-vertical-left-item-block-start);\n  padding-inline-end: var(--sbb-pearl-chain-vertical-left-item-inline-end);\n}\n\nslot[name=right]::slotted(*) {\n  margin-block-start: var(--sbb-pearl-chain-vertical-right-item-block-start);\n  padding-inline-start: var(--sbb-pearl-chain-vertical-right-item-inline-start);\n}\n\n.sbb-pearl-chain-vertical-item__middle {\n  vertical-align: top;\n  border-spacing: 0;\n}\n\n.sbb-pearl-chain-vertical-item__line {\n  position: absolute;\n  bottom: 0;\n  inset-inline-start: var(--sbb-pearl-chain-vertical-item-inline-start);\n  transform: var(--sbb-pearl-chain-vertical-item-transform);\n  width: var(--sbb-border-width-2x);\n  inset-block-start: calc(var(--sbb-pearl-chain-bullet-size-start-end) / 2);\n}\n.sbb-pearl-chain-vertical-item__line::after {\n  content: \"\";\n  position: absolute;\n  inset-inline-start: 0;\n  inset-block-start: 0;\n  height: var(--sbb-pearl-chain-vertical-item-leg-status);\n  width: var(--sbb-pearl-chain-vertical-item-border-width);\n  background-color: var(--sbb-pearl-chain-vertical-item-color-past);\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain-vertical-item__line::after {\n    --sbb-pearl-chain-vertical-item-color-past: GrayText;\n  }\n}\n\n.sbb-pearl-chain-vertical-item__line--dotted {\n  background-color: unset;\n  border-color: unset;\n  background-image: linear-gradient(to bottom, currentcolor 0%, currentcolor 50%, Canvas 50%);\n  background-repeat: repeat-y;\n  background-size: calc(2 * var(--sbb-pearl-chain-vertical-item-spacing-small)) var(--sbb-pearl-chain-vertical-item-spacing-small);\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain-vertical-item__line--dotted {\n    background-color: unset !important;\n    border-inline-start: 0.0625rem dashed Highlight;\n    transform: translateY(0.0625rem);\n  }\n}\n\n.sbb-pearl-chain-vertical-item__line--thin {\n  width: var(--sbb-pearl-chain-vertical-item-border-width-thin);\n}\n\n.sbb-pearl-chain-vertical-item__line--default {\n  background-color: var(--sbb-pearl-chain-vertical-item-color-default);\n  border-color: var(--sbb-pearl-chain-vertical-item-color-default);\n  color: var(--sbb-pearl-chain-vertical-item-color-default);\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain-vertical-item__line--default {\n    --sbb-pearl-chain-vertical-item-color-default: CanvasText;\n  }\n}\n\n.sbb-pearl-chain-vertical-item__line--disruption {\n  border-color: var(--sbb-pearl-chain-vertical-item-color-disruption);\n  background-color: var(--sbb-pearl-chain-vertical-item-color-disruption);\n  color: var(--sbb-pearl-chain-vertical-item-color-disruption);\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain-vertical-item__line--disruption {\n    --sbb-pearl-chain-vertical-item-color-disruption: Highlight;\n  }\n}\n\n.sbb-pearl-chain-vertical-item__line--past {\n  border-color: var(--sbb-pearl-chain-vertical-item-color-past);\n  background-color: var(--sbb-pearl-chain-vertical-item-color-past);\n  color: var(--sbb-pearl-chain-vertical-item-color-past);\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain-vertical-item__line--past {\n    --sbb-pearl-chain-vertical-item-color-past: GrayText;\n  }\n}\n\n.sbb-pearl-chain-vertical-item__line--walk {\n  border-color: var(--sbb-pearl-chain-vertical-item-color-walk);\n  background-color: var(--sbb-pearl-chain-vertical-item-color-walk);\n  color: var(--sbb-pearl-chain-vertical-item-color-walk);\n}\n\n.sbb-pearl-chain-vertical-item__bullet {\n  position: relative;\n  inset-inline-start: var(--sbb-pearl-chain-vertical-item-inline-start);\n  transform: var(--sbb-pearl-chain-vertical-item-transform);\n  background: var(--sbb-pearl-chain-bullet-color);\n  color: var(--sbb-pearl-chain-bullet-color);\n  border-color: var(--sbb-pearl-chain-bullet-color);\n  border-radius: 100%;\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain-vertical-item__bullet {\n    --sbb-pearl-chain-bullet-color: CanvasText;\n  }\n}\n\n.sbb-pearl-chain-vertical-item__bullet--start-end {\n  min-height: var(--sbb-pearl-chain-bullet-size-start-end);\n  min-width: var(--sbb-pearl-chain-bullet-size-start-end);\n  height: var(--sbb-pearl-chain-bullet-size-start-end);\n  width: var(--sbb-pearl-chain-bullet-size-start-end);\n}\n\n.sbb-pearl-chain-vertical-item__bullet--stop {\n  min-height: var(--sbb-pearl-chain-bullet-size-stop);\n  min-width: var(--sbb-pearl-chain-bullet-size-stop);\n  height: var(--sbb-pearl-chain-bullet-size-stop);\n  width: var(--sbb-pearl-chain-bullet-size-stop);\n  border: var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;\n  background: Canvas;\n}\n\n.sbb-pearl-chain-vertical-item__bullet--disruption {\n  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption);\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain-vertical-item__bullet--disruption {\n    --sbb-pearl-chain-bullet-color: Highlight;\n  }\n}\n\n.sbb-pearl-chain-vertical-item__bullet--irrelevant,\n.sbb-pearl-chain-vertical-item__bullet--past {\n  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-past);\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain-vertical-item__bullet--irrelevant,\n  .sbb-pearl-chain-vertical-item__bullet--past {\n    --sbb-pearl-chain-bullet-color: GrayText !important;\n  }\n}\n\n.sbb-pearl-chain-vertical-item__bullet--stop.sbb-pearl-chain-vertical-item__bullet--irrelevant {\n  --sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-1x);\n  min-height: var(--sbb-pearl-chain-bullet-size-stop);\n  min-width: var(--sbb-pearl-chain-bullet-size-stop);\n  height: var(--sbb-pearl-chain-bullet-size-stop);\n  width: var(--sbb-pearl-chain-bullet-size-stop);\n  border: var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;\n  background: Canvas;\n}\n\n.sbb-pearl-chain-vertical-item__bullet--start-end.sbb-pearl-chain-vertical-item__bullet--skipped {\n  border: var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;\n  background: Canvas;\n}\n.sbb-pearl-chain-vertical-item__bullet--start-end.sbb-pearl-chain-vertical-item__bullet--skipped::before {\n  content: \"\";\n  position: absolute;\n  inset-block-start: 50%;\n  inset-inline-start: 50%;\n  transform: translate(-50%, -50%) rotate(45deg);\n  border-block-start: var(--sbb-pearl-chain-bullet-crossed-border-width) solid canvas;\n  background: var(--sbb-pearl-chain-bullet-color-disruption);\n  height: var(--sbb-pearl-chain-bullet-crossed-height);\n  width: var(--sbb-pearl-chain-bullet-crossed-width);\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain-vertical-item__bullet--start-end.sbb-pearl-chain-vertical-item__bullet--skipped::before {\n    background: Highlight;\n  }\n}\n\n.sbb-pearl-chain-vertical-item__bullet--stop.sbb-pearl-chain-vertical-item__bullet--skipped {\n  --sbb-pearl-chain-bullet-crossed-width: 0.706875rem;\n  --sbb-pearl-chain-bullet-crossed-height: 0.1875rem;\n  min-height: var(--sbb-pearl-chain-bullet-size-stop);\n  min-width: var(--sbb-pearl-chain-bullet-size-stop);\n  height: var(--sbb-pearl-chain-bullet-size-stop);\n  width: var(--sbb-pearl-chain-bullet-size-stop);\n  border: var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;\n  background: Canvas;\n  border: var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;\n  background: Canvas;\n}\n.sbb-pearl-chain-vertical-item__bullet--stop.sbb-pearl-chain-vertical-item__bullet--skipped::before {\n  content: \"\";\n  position: absolute;\n  inset-block-start: 50%;\n  inset-inline-start: 50%;\n  transform: translate(-50%, -50%) rotate(45deg);\n  border-block-start: var(--sbb-pearl-chain-bullet-crossed-border-width) solid canvas;\n  background: var(--sbb-pearl-chain-bullet-color-disruption);\n  height: var(--sbb-pearl-chain-bullet-crossed-height);\n  width: var(--sbb-pearl-chain-bullet-crossed-width);\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain-vertical-item__bullet--stop.sbb-pearl-chain-vertical-item__bullet--skipped::before {\n    background: Highlight;\n  }\n}\n\n.sbb-pearl-chain-vertical-item__bullet--position {\n  inset-block-start: var(--sbb-pearl-chain-vertical-item-position);\n  position: absolute;\n  left: 50%;\n  translate: -50% 0;\n  min-height: var(--sbb-pearl-chain-bullet-size-start-end);\n  min-width: var(--sbb-pearl-chain-bullet-size-start-end);\n  height: var(--sbb-pearl-chain-bullet-size-start-end);\n  width: var(--sbb-pearl-chain-bullet-size-start-end);\n  background: var(--sbb-pearl-chain-bullet-color);\n  color: var(--sbb-pearl-chain-bullet-color);\n  border-color: var(--sbb-pearl-chain-bullet-color);\n  border-radius: 100%;\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain-vertical-item__bullet--position {\n    --sbb-pearl-chain-bullet-color: CanvasText;\n  }\n}\n.sbb-pearl-chain-vertical-item__bullet--position {\n  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-position-color);\n}\n@media (forced-colors: active) {\n  .sbb-pearl-chain-vertical-item__bullet--position {\n    --sbb-pearl-chain-position-color: Highlight;\n  }\n}\n@keyframes pearl-chain-bullet-position-pulse {\n  0% {\n    box-shadow: 0 0 0 0 var(--sbb-pearl-chain-position-color);\n  }\n  25% {\n    box-shadow: 0 0 0 0 var(--sbb-pearl-chain-position-color);\n  }\n  50% {\n    box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--sbb-pearl-chain-position-color) 20%, transparent);\n  }\n  100% {\n    box-shadow: 0 0 0 0 var(--sbb-pearl-chain-position-color);\n  }\n}\n.sbb-pearl-chain-vertical-item__bullet--position {\n  animation: pearl-chain-bullet-position-pulse var(--sbb-pearl-chain-bullet-animation-duration) var(--sbb-pearl-chain-bullet-animation-easing) infinite;\n}\n:host([disable-animation]) .sbb-pearl-chain-vertical-item__bullet--position {\n  animation: unset !important;\n}\n";
+
+//#endregion
+//#region src/elements-experimental/pearl-chain-vertical-item/pearl-chain-vertical-item.component.ts
+/**
+* It displays details about connection between stations.
+*
+* @slot left - Content of the left side of the item
+* @slot right - Content of the right side of the item
+*/
+let SbbPearlChainVerticalItemElement = (() => {
+	let _classSuper = SbbElement;
+	let _pearlChainVerticalItemAttributes_decorators;
+	let _pearlChainVerticalItemAttributes_initializers = [];
+	let _pearlChainVerticalItemAttributes_extraInitializers = [];
+	let _disableAnimation_decorators;
+	let _disableAnimation_initializers = [];
+	let _disableAnimation_extraInitializers = [];
+	return class SbbPearlChainVerticalItemElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_pearlChainVerticalItemAttributes_decorators = [property({
+				attribute: "pearl-chain-vertical-item-attributes",
+				type: Object
+			})];
+			_disableAnimation_decorators = [forceType(), property({
+				attribute: "disable-animation",
+				reflect: true,
+				type: Boolean
+			})];
+			__esDecorate(this, null, _pearlChainVerticalItemAttributes_decorators, {
+				kind: "accessor",
+				name: "pearlChainVerticalItemAttributes",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "pearlChainVerticalItemAttributes" in obj,
+					get: (obj) => obj.pearlChainVerticalItemAttributes,
+					set: (obj, value) => {
+						obj.pearlChainVerticalItemAttributes = value;
+					}
+				},
+				metadata: _metadata
+			}, _pearlChainVerticalItemAttributes_initializers, _pearlChainVerticalItemAttributes_extraInitializers);
+			__esDecorate(this, null, _disableAnimation_decorators, {
+				kind: "accessor",
+				name: "disableAnimation",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "disableAnimation" in obj,
+					get: (obj) => obj.disableAnimation,
+					set: (obj, value) => {
+						obj.disableAnimation = value;
+					}
+				},
+				metadata: _metadata
+			}, _disableAnimation_initializers, _disableAnimation_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-pearl-chain-vertical-item";
+		}
+		static {
+			this.styles = [unsafeCSS(pearl_chain_vertical_item_default)];
+		}
+		#pearlChainVerticalItemAttributes_accessor_storage = __runInitializers(this, _pearlChainVerticalItemAttributes_initializers, null);
+		/** The pearlChainVerticalItemAttributes Prop for styling the bullets and line.*/
+		get pearlChainVerticalItemAttributes() {
+			return this.#pearlChainVerticalItemAttributes_accessor_storage;
+		}
+		set pearlChainVerticalItemAttributes(value) {
+			this.#pearlChainVerticalItemAttributes_accessor_storage = value;
+		}
+		#disableAnimation_accessor_storage = (__runInitializers(this, _pearlChainVerticalItemAttributes_extraInitializers), __runInitializers(this, _disableAnimation_initializers, false));
+		/** If true, the position won't be animated. */
+		get disableAnimation() {
+			return this.#disableAnimation_accessor_storage;
+		}
+		set disableAnimation(value) {
+			this.#disableAnimation_accessor_storage = value;
+		}
+		render() {
+			const { bulletType, lineType, lineColor, hideLine, minHeight, bulletSize, position } = this.pearlChainVerticalItemAttributes || {};
+			const bulletTypeClass = position && position > 0 && position <= 100 ? "sbb-pearl-chain-vertical-item__bullet--past" : `sbb-pearl-chain-vertical-item__bullet--${bulletType}`;
+			return html`
+      <div
+        class="sbb-pearl-chain-vertical-item__column"
+        style=${styleMap({ height: `${minHeight}px` })}
+      >
+        <slot name="left"></slot>
+      </div>
+      <div
+        aria-hidden="true"
+        class="sbb-pearl-chain-vertical-item__column sbb-pearl-chain-vertical-item__column--middle"
+      >
+        ${!hideLine ? html`<div
+                style=${styleMap({ "--sbb-pearl-chain-vertical-item-leg-status": `${position}%` })}
+                class="sbb-pearl-chain-vertical-item__line sbb-pearl-chain-vertical-item__line--${lineType} sbb-pearl-chain-vertical-item__line--${lineColor}"
+              ></div>` : nothing}
+        ${bulletType ? html`<div
+                class="sbb-pearl-chain-vertical-item__bullet  sbb-pearl-chain-vertical-item__bullet--${bulletSize} ${bulletTypeClass}"
+              ></div>` : nothing}
+        ${position && position > 0 ? html`<div
+                style=${styleMap({ "--sbb-pearl-chain-vertical-item-position": `${position}%` })}
+                class="sbb-pearl-chain-vertical-item__bullet--position"
+              ></div>` : nothing}
+      </div>
+      <slot name="right"></slot>
+    `;
+		}
+		constructor() {
+			super(...arguments);
+			__runInitializers(this, _disableAnimation_extraInitializers);
+		}
+	};
+})();
+
+//#endregion
+export { SbbPearlChainVerticalItemElement };

package/development/pearl-chain-vertical.d.ts

@@ -1,2 +1 @@
 export * from './pearl-chain-vertical.pure.ts';
-//# sourceMappingURL=pearl-chain-vertical.d.ts.map

package/development/pearl-chain-vertical.js

@@ -1,9 +1,9 @@
-import { t as SbbPearlChainVerticalElement } from "./pearl-chain-vertical.component-DbPz5k_R.js";
-import "./pearl-chain-vertical.pure.js";
+import { SbbPearlChainVerticalElement } from "./pearl-chain-vertical.pure.js";
+
+export * from "./pearl-chain-vertical.pure.js"
+
 //#region src/elements-experimental/pearl-chain-vertical.ts
 /** @entrypoint */
 SbbPearlChainVerticalElement.define();
-//#endregion
-export { SbbPearlChainVerticalElement };
 
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGVhcmwtY2hhaW4tdmVydGljYWwuanMiLCJuYW1lcyI6W10sInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2VsZW1lbnRzLWV4cGVyaW1lbnRhbC9wZWFybC1jaGFpbi12ZXJ0aWNhbC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGVudHJ5cG9pbnQgKi9cbmltcG9ydCB7IFNiYlBlYXJsQ2hhaW5WZXJ0aWNhbEVsZW1lbnQgfSBmcm9tICcuL3BlYXJsLWNoYWluLXZlcnRpY2FsLnB1cmUudHMnO1xuXG5leHBvcnQgKiBmcm9tICcuL3BlYXJsLWNoYWluLXZlcnRpY2FsLnB1cmUudHMnO1xuXG5TYmJQZWFybENoYWluVmVydGljYWxFbGVtZW50LmRlZmluZSgpO1xuIl0sIm1hcHBpbmdzIjoiOzs7O0FBS0EsNkJBQTZCLE9BQU0ifQ==
+//#endregion

package/development/pearl-chain-vertical.pure.d.ts

@@ -1,3 +1,2 @@
 /** @entrypoint */
 export * from './pearl-chain-vertical/pearl-chain-vertical.component.ts';
-//# sourceMappingURL=pearl-chain-vertical.pure.d.ts.map

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

@@ -1,2 +1,31 @@
-import { t as SbbPearlChainVerticalElement } from "./pearl-chain-vertical.component-DbPz5k_R.js";
-export { SbbPearlChainVerticalElement };
+import { SbbElement } from "@sbb-esta/lyne-elements/core.js";
+import { html, unsafeCSS } from "lit";
+
+//#region src/elements-experimental/pearl-chain-vertical/pearl-chain-vertical.scss?inline
+var pearl_chain_vertical_default = ":host {\n  --sbb-pearl-chain-vertical-width: 100%;\n  display: block;\n}\n\n.sbb-pearl-chain-vertical {\n  display: table;\n  width: var(--sbb-pearl-chain-vertical-width);\n}\n";
+
+//#endregion
+//#region src/elements-experimental/pearl-chain-vertical/pearl-chain-vertical.component.ts
+/**
+* It can be used as a container for the `sbb-pearl-chain-vertical-item` component.
+*
+* @slot - The unnamed slot is used for the `sbb-pearl-chain-vertical-item` component.
+*/
+var SbbPearlChainVerticalElement = class extends SbbElement {
+	static {
+		this.elementName = "sbb-pearl-chain-vertical";
+	}
+	static {
+		this.styles = [unsafeCSS(pearl_chain_vertical_default)];
+	}
+	render() {
+		return html`
+      <div class="sbb-pearl-chain-vertical">
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+
+//#endregion
+export { SbbPearlChainVerticalElement };

package/development/pearl-chain.d.ts

@@ -1,2 +1 @@
 export * from './pearl-chain.pure.ts';
-//# sourceMappingURL=pearl-chain.d.ts.map

package/development/pearl-chain.js

@@ -1,9 +1,9 @@
-import { t as SbbPearlChainElement } from "./pearl-chain.component-10OsJZIX.js";
-import "./pearl-chain.pure.js";
+import { SbbPearlChainElement } from "./pearl-chain.pure.js";
+
+export * from "./pearl-chain.pure.js"
+
 //#region src/elements-experimental/pearl-chain.ts
 /** @entrypoint */
 SbbPearlChainElement.define();
-//#endregion
-export { SbbPearlChainElement };
 
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGVhcmwtY2hhaW4uanMiLCJuYW1lcyI6W10sInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2VsZW1lbnRzLWV4cGVyaW1lbnRhbC9wZWFybC1jaGFpbi50cyJdLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGVudHJ5cG9pbnQgKi9cbmltcG9ydCB7IFNiYlBlYXJsQ2hhaW5FbGVtZW50IH0gZnJvbSAnLi9wZWFybC1jaGFpbi5wdXJlLnRzJztcblxuZXhwb3J0ICogZnJvbSAnLi9wZWFybC1jaGFpbi5wdXJlLnRzJztcblxuU2JiUGVhcmxDaGFpbkVsZW1lbnQuZGVmaW5lKCk7XG4iXSwibWFwcGluZ3MiOiI7Ozs7QUFLQSxxQkFBcUIsT0FBTSJ9
+//#endregion

package/development/pearl-chain.pure.d.ts

@@ -1,3 +1,2 @@
 /** @entrypoint */
 export * from './pearl-chain/pearl-chain.component.ts';
-//# sourceMappingURL=pearl-chain.pure.d.ts.map