@sbb-esta/lyne-elements-dev 4.7.0-dev.1773388991 → 4.7.0-dev.1773396165

package/toggle-check/toggle-check.component.js

@@ -1,2 +1,85 @@
-import { t as e } from "../toggle-check.component-BcxMe5Zi.js";
-export { e as SbbToggleCheckElement };
+var z = (t) => {
+  throw TypeError(t);
+};
+var w = (t, o, s) => o.has(t) || z("Cannot " + s);
+var h = (t, o, s) => (w(t, o, "read from private field"), s ? s.call(t) : o.get(t)), d = (t, o, s) => o.has(t) ? z("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(t) : o.set(t, s), k = (t, o, s, i) => (w(t, o, "write to private field"), i ? i.call(t, s) : o.set(t, s), s);
+import { __esDecorate as v, __runInitializers as l } from "tslib";
+import { css as P, html as I } from "lit";
+import { property as u } from "lit/decorators.js";
+import { SbbElement as S } from "../core/base-elements.js";
+import { isLean as N } from "../core/dom.js";
+import { SbbFormAssociatedCheckboxMixin as U } from "../core/mixins.js";
+import { boxSizingStyles as j } from "../core/styles.js";
+import { SbbIconNameMixin as q } from "../icon.js";
+const F = P`@charset "UTF-8";:host{display:inline-block;outline:none!important;--sbb-toggle-check-color: var(--sbb-color-2);--sbb-toggle-check-checked-color: var(--sbb-color-primary);--sbb-toggle-check-background-color: var(--sbb-background-color-4);--sbb-toggle-check-icon-color: var(--sbb-toggle-check-checked-color);--sbb-toggle-check-icon-opacity: 0;--sbb-toggle-check-circle-background-color: var(--sbb-background-color-1);--sbb-toggle-check-circle-border-color: var(--sbb-border-color-5);--sbb-toggle-check-circle-border-style: solid;--sbb-toggle-check-circle-diameter: 1.75rem;--sbb-toggle-check-overall-height: var(--sbb-toggle-check-circle-diameter);--sbb-toggle-check-circle-transform: translate(0, -50%);--sbb-toggle-check-height: 1.5rem;--sbb-toggle-check-width: calc(2 * var(--sbb-toggle-check-height));--sbb-toggle-check-cursor: var(--sbb-cursor-pointer);--sbb-toggle-check-flex-direction: row-reverse;--sbb-toggle-check-gap: var(--sbb-spacing-fixed-3x);--sbb-toggle-check-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) )}@media(forced-colors:active){:host{--sbb-toggle-check-background-color: CanvasText;--sbb-toggle-check-circle-background-color: Canvas}}:host([size=m]){--sbb-toggle-check-overall-height: calc(1em * var(--sbb-typo-line-height-text))}:host(:is(:state(checked),[state--checked])){--sbb-toggle-check-background-color: var(--sbb-toggle-check-checked-color);--sbb-toggle-check-circle-background-color: var(--sbb-background-color-1-negative-inverted);--sbb-toggle-check-circle-border-color: var(--sbb-toggle-check-background-color);--sbb-toggle-check-icon-opacity: 1;--sbb-toggle-check-circle-transform: translate( calc(100% - 2 * (100% - .5 * var(--sbb-toggle-check-width))), -50% )}@media(forced-colors:active){:host(:is(:state(checked),[state--checked])){--sbb-toggle-check-icon-color: Highlight;--sbb-toggle-check-background-color: Highlight}}:host(:disabled){--sbb-toggle-check-background-color: var(--sbb-background-color-4);--sbb-toggle-check-circle-background-color: var(--sbb-background-color-3);--sbb-toggle-check-circle-border-color: var(--sbb-border-color-5);--sbb-toggle-check-circle-border-style: dashed;--sbb-toggle-check-icon-color: var(--sbb-color-granite);--sbb-toggle-check-icon-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));--sbb-toggle-check-cursor: var(--sbb-cursor-default)}@media(forced-colors:active){:host(:disabled){--sbb-toggle-check-icon-color: GrayText;--sbb-toggle-check-background-color: GrayText;--sbb-toggle-check-circle-border-style: solid}}:host([label-position=before]){--sbb-toggle-check-flex-direction: row}.sbb-toggle-check{position:relative;display:flex;color:var(--sbb-toggle-check-color);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:var(--sbb-toggle-check-cursor)}.sbb-toggle-check:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}:host(:focus-visible) .sbb-toggle-check{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}.sbb-toggle-check__container{--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);display:flex;flex-direction:var(--sbb-toggle-check-flex-direction);gap:var(--sbb-toggle-check-gap);align-items:start;width:100%}:host([size=m]) .sbb-toggle-check__container{--sbb-text-font-size: var(--sbb-text-font-size-m);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)}:host([size=xs]) .sbb-toggle-check__container{--sbb-text-font-size: var(--sbb-text-font-size-xs);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)}.sbb-toggle-check__label{flex-grow:1;padding-block-start:calc((var(--sbb-toggle-check-circle-diameter) - var(--sbb-typo-line-height-text) * 1em) / 2)}:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-toggle-check__label{display:none}.sbb-toggle-check__track{display:inline-block;position:relative;min-width:var(--sbb-toggle-check-width);height:var(--sbb-toggle-check-height);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-toggle-check-background-color);margin-block:calc((var(--sbb-toggle-check-overall-height) - var(--sbb-toggle-check-height)) / 2)}.sbb-toggle-check__circle{box-shadow:var(--sbb-box-shadow-level-5-hard);position:absolute;top:50%;transform:translateY(-50%);width:var(--sbb-toggle-check-circle-diameter);height:var(--sbb-toggle-check-circle-diameter);border:var(--sbb-border-width-1x) var(--sbb-toggle-check-circle-border-style) var(--sbb-toggle-check-circle-border-color);border-radius:50%;background-color:var(--sbb-toggle-check-circle-background-color);color:var(--sbb-toggle-check-icon-color);will-change:transform;transform:var(--sbb-toggle-check-circle-transform);transition:transform ease var(--sbb-toggle-check-animation-duration)}.sbb-toggle-check__icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--sbb-size-icon-ui-small);height:var(--sbb-size-icon-ui-small);opacity:var(--sbb-toggle-check-icon-opacity);transition:opacity ease var(--sbb-toggle-check-animation-duration)}`;
+let C = (() => {
+  var b, g, n, r;
+  let t = q(U(S)), o, s = [], i = [], f, p = [], m = [], _, x = [], y = [];
+  return r = class extends t {
+    constructor() {
+      super(...arguments);
+      d(this, b, l(this, s, null));
+      d(this, g, (l(this, i), l(this, p, N() ? "xs" : "s")));
+      d(this, n, (l(this, m), l(this, x, "after")));
+      l(this, y);
+    }
+    /** Value of the form element. */
+    get value() {
+      return h(this, b);
+    }
+    set value(c) {
+      k(this, b, c);
+    }
+    /**
+     * Size variant, either m, s or xs.
+     * @default 's' / 'xs' (lean)
+     */
+    get size() {
+      return h(this, g);
+    }
+    set size(c) {
+      k(this, g, c);
+    }
+    /** The label position relative to the toggle. Defaults to 'after' */
+    get labelPosition() {
+      return h(this, n);
+    }
+    set labelPosition(c) {
+      k(this, n, c);
+    }
+    requestUpdate(c, e, a) {
+      super.requestUpdate(c, e, a), c === "checked" && (this.internals.ariaChecked = `${this.checked}`, this.toggleState("checked", this.checked));
+    }
+    renderIconName() {
+      return super.renderIconName() || "tick-small";
+    }
+    render() {
+      return I`
+      <span class="sbb-toggle-check">
+        <span class="sbb-toggle-check__container">
+          <span class="sbb-toggle-check__label">
+            <slot></slot>
+          </span>
+          <span class="sbb-toggle-check__track">
+            <span class="sbb-toggle-check__circle">
+              <span class="sbb-toggle-check__icon"> ${this.renderIconSlot()} </span>
+            </span>
+          </span>
+        </span>
+      </span>
+    `;
+    }
+  }, b = new WeakMap(), g = new WeakMap(), n = new WeakMap(), (() => {
+    const c = typeof Symbol == "function" && Symbol.metadata ? Object.create(t[Symbol.metadata] ?? null) : void 0;
+    o = [u()], f = [u({ reflect: !0 })], _ = [u({ attribute: "label-position", reflect: !0 })], v(r, null, o, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, get: (e) => e.value, set: (e, a) => {
+      e.value = a;
+    } }, metadata: c }, s, i), v(r, null, f, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, a) => {
+      e.size = a;
+    } }, metadata: c }, p, m), v(r, null, _, { kind: "accessor", name: "labelPosition", static: !1, private: !1, access: { has: (e) => "labelPosition" in e, get: (e) => e.labelPosition, set: (e, a) => {
+      e.labelPosition = a;
+    } }, metadata: c }, x, y), c && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: c });
+  })(), r.elementName = "sbb-toggle-check", r.styles = [j, F], r;
+})();
+export {
+  C as SbbToggleCheckElement
+};

package/toggle-check.js

@@ -1,6 +1,5 @@
-import { t as e } from "./toggle-check.component-BcxMe5Zi.js";
-import "./toggle-check.pure.js";
-//#region src/elements/toggle-check.ts
+import { SbbToggleCheckElement as e } from "./toggle-check/toggle-check.component.js";
 e.define();
-//#endregion
-export { e as SbbToggleCheckElement };
+export {
+  e as SbbToggleCheckElement
+};

package/toggle-check.pure.js

@@ -1,2 +1,4 @@
-import { t as e } from "./toggle-check.component-BcxMe5Zi.js";
-export { e as SbbToggleCheckElement };
+import { SbbToggleCheckElement as b } from "./toggle-check/toggle-check.component.js";
+export {
+  b as SbbToggleCheckElement
+};

package/toggle.js

@@ -1,6 +1,8 @@
-import { t as e } from "./toggle-option.component-DvdEjT2c.js";
-import { t } from "./toggle.component-Lnj5TugJ.js";
-import "./toggle.pure.js";
-t.define(), e.define();
-//#endregion
-export { t as SbbToggleElement, e as SbbToggleOptionElement };
+import { SbbToggleOptionElement as e } from "./toggle/toggle-option/toggle-option.component.js";
+import { SbbToggleElement as o } from "./toggle/toggle/toggle.component.js";
+o.define();
+e.define();
+export {
+  o as SbbToggleElement,
+  e as SbbToggleOptionElement
+};

package/toggle.pure.js

@@ -1,3 +1,6 @@
-import { t as e } from "./toggle-option.component-DvdEjT2c.js";
-import { t } from "./toggle.component-Lnj5TugJ.js";
-export { t as SbbToggleElement, e as SbbToggleOptionElement };
+import { SbbToggleOptionElement as t } from "./toggle/toggle-option/toggle-option.component.js";
+import { SbbToggleElement as g } from "./toggle/toggle/toggle.component.js";
+export {
+  g as SbbToggleElement,
+  t as SbbToggleOptionElement
+};

package/tooltip/tooltip.component.js

@@ -1,2 +1,197 @@
-import { t as e } from "../tooltip.component-B5fKuZdI.js";
-export { e as SbbTooltipElement };
+var f = (s) => {
+  throw TypeError(s);
+};
+var C = (s, o, r) => o.has(s) || f("Cannot " + r);
+var T = (s, o, r) => (C(s, o, "read from private field"), r ? r.call(s) : o.get(s)), D = (s, o, r) => o.has(s) ? f("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(s) : o.set(s, r), c = (s, o, r, d) => (C(s, o, "write to private field"), d ? d.call(s, r) : o.set(s, r), r);
+import { __esDecorate as p, __runInitializers as h } from "tslib";
+import { css as E, isServer as O, html as P } from "lit";
+import { property as b } from "lit/decorators.js";
+import { SbbOpenCloseBaseElement as A } from "../core/base-elements.js";
+import { readConfig as g } from "../core/config.js";
+import { SbbEscapableOverlayController as w, SbbOverlayPositionController as L } from "../core/controllers.js";
+import { idReference as z } from "../core/decorators.js";
+import { queueDomContentLoaded as N, isZeroAnimationDuration as S, isAndroid as B, isIOS as M } from "../core/dom.js";
+import { SbbDisabledMixin as U, appendAriaElements as H, removeAriaElements as I } from "../core/mixins.js";
+import { sbbOverlayOutsidePointerEventListener as x } from "../core/overlay.js";
+import { boxSizingStyles as q } from "../core/styles.js";
+const Z = E`:host{--sbb-tooltip-pointer-events: all;--sbb-tooltip-min-width: var(--sbb-spacing-fixed-8x);--sbb-tooltip-max-width: min( 25rem, calc(100vw - var(--sbb-spacing-fixed-2x)) );--sbb-tooltip-border-color: var(--sbb-background-color-1-inverted);--sbb-tooltip-border-radius: var(--sbb-border-radius-8x);--sbb-tooltip-padding: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);--sbb-tooltip-background-color: var(--sbb-background-color-1-inverted);--sbb-tooltip-color: var(--sbb-color-2-inverted);--sbb-tooltip-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-tooltip-animation-easing: ease-out;--sbb-tooltip-animation-translate: 0 var(--sbb-spacing-fixed-2x);--sbb-tooltip-gap: var(--sbb-spacing-fixed-2x);--sbb-overlay-position-area: block-start;--sbb-overlay-position-try-fallbacks: block-start span-inline-end, block-start span-inline-start, block-end, block-end span-inline-end, block-end span-inline-start;position-area:var(--sbb-overlay-position-area);position-try-fallbacks:var(--sbb-overlay-position-try-fallbacks);display:none;position:fixed;background-color:transparent;pointer-events:var(--sbb-tooltip-pointer-events);z-index:var(--sbb-tooltip-z-index, var(--sbb-overlay-default-z-index));animation-name:var(--sbb-tooltip-animation-name);animation-duration:var(--sbb-tooltip-animation-duration);animation-timing-function:var(--sbb-tooltip-animation-easing);border:none;inset:initial;padding:0;margin:0}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){display:block;--sbb-tooltip-animation-name: open}:host(:is(:state(state-closing),[state--state-closing])){--sbb-tooltip-animation-name: close;--sbb-tooltip-pointer-events: none}:host(:is([data-position~=block-end],[data-position~=bottom],[data-position^=end])){padding-block-start:var(--sbb-tooltip-gap)}:host(:is([data-position~=block-start],[data-position~=top],[data-position^=start])){padding-block-end:var(--sbb-tooltip-gap)}:host(:is([data-position~=inline-start],[data-position~=inline-end],[data-position~=left],[data-position~=right],[data-position$=" start"],[data-position$=" end"])){padding-inline:var(--sbb-tooltip-gap)}.sbb-tooltip{box-shadow:var(--sbb-box-shadow-level-5-soft);--sbb-text-font-size: var(--sbb-text-font-size-xs);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);border:var(--sbb-border-width-1x) solid var(--sbb-tooltip-border-color);border-radius:var(--sbb-tooltip-border-radius);padding:var(--sbb-tooltip-padding);color:var(--sbb-tooltip-color);background-color:var(--sbb-tooltip-background-color);min-width:var(--sbb-tooltip-min-width);max-width:var(--sbb-tooltip-max-width)}@keyframes open{0%{opacity:0;translate:var(--sbb-tooltip-animation-translate)}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{opacity:0;translate:var(--sbb-tooltip-animation-translate)}}`, j = 500, $ = B || M, u = /* @__PURE__ */ new WeakMap();
+let R = 0, ot = (() => {
+  var l, a;
+  let s = U(A), o = [], r, d = [], m = [], y, v, _;
+  return a = class extends s {
+    constructor() {
+      super();
+      D(this, l);
+      c(this, l, (h(this, o), h(this, d, null))), this._openDelay = (h(this, m), null), this._closeDelay = null, this._triggerElement = null, this._escapableOverlayController = new w(this), this._overlayController = new L(this), this.addEventListener("mouseleave", (t) => {
+        (this.state === "opened" || this.state === "opening") && (!t.relatedTarget || !this._triggerElement?.contains(t.relatedTarget)) && this._delayedClose();
+      }, { passive: !0 }), this.addEventListener("overlayOutsidePointer", () => this.close(), { passive: !0 }), this.addEventListener("animationend", (t) => this._onTooltipAnimationEnd(t), { passive: !0 });
+    }
+    /**
+     * The element that will trigger the tooltip overlay.
+     *
+     * For attribute usage, provide an id reference.
+     */
+    get trigger() {
+      return T(this, l);
+    }
+    set trigger(t) {
+      c(this, l, t);
+    }
+    /**
+     * Open the tooltip after a given delay in milliseconds.
+     * Global configuration is used as default, if not set.
+     *
+     * @default null
+     */
+    set openDelay(t) {
+      this._openDelay = t;
+    }
+    get openDelay() {
+      return this._openDelay ?? g().tooltip?.openDelay ?? 0;
+    }
+    /**
+     * Close the tooltip after a given delay in milliseconds.
+     * Global configuration is used as default, if not set.
+     *
+     * @default null
+     */
+    set closeDelay(t) {
+      this._closeDelay = t;
+    }
+    get closeDelay() {
+      return this._closeDelay ?? g().tooltip?.closeDelay ?? 0;
+    }
+    /**
+     * Automatically close the tooltip after it has been open by long press.
+     * Global configuration is used as default, if not set.
+     *
+     * @default 1500
+     */
+    set longPressCloseDelay(t) {
+      this._longPressCloseDelay = +t;
+    }
+    get longPressCloseDelay() {
+      return this._longPressCloseDelay ?? g().tooltip?.longPressCloseDelay ?? 1500;
+    }
+    static _initializeTooltipOutlet() {
+      this._tooltipOutlet = document.createElement("div"), this._tooltipOutlet.classList.add("sbb-overlay-outlet"), document.body.appendChild(this._tooltipOutlet), new MutationObserver((t) => {
+        for (const e of t)
+          if (e.type === "attributes")
+            this._handleTooltipTrigger(e.target);
+          else if (e.type === "childList")
+            for (const i of [...e.addedNodes, ...e.removedNodes].filter((n) => n.nodeType === n.ELEMENT_NODE))
+              this._handleTooltipTrigger(i), this._findAndHandleTooltipTriggers(i);
+      }).observe(document.documentElement, {
+        attributeFilter: [
+          "sbb-tooltip",
+          "sbb-tooltip-open-delay",
+          "sbb-tooltip-close-delay",
+          "sbb-tooltip-position"
+        ],
+        childList: !0,
+        subtree: !0
+      }), this._findAndHandleTooltipTriggers(document.body);
+    }
+    static _findAndHandleTooltipTriggers(t) {
+      t.querySelectorAll("[sbb-tooltip]").forEach((e) => this._handleTooltipTrigger(e));
+    }
+    static _handleTooltipTrigger(t) {
+      const e = t.getAttribute("sbb-tooltip");
+      let i = u.get(t);
+      if (e && t.isConnected) {
+        i || (i = document.createElement("sbb-tooltip"), u.set(t, i), this._tooltipOutlet.appendChild(i), i.trigger = t), i.textContent = e, i.openDelay = t.hasAttribute("sbb-tooltip-open-delay") ? +t.getAttribute("sbb-tooltip-open-delay") : null, i.closeDelay = t.hasAttribute("sbb-tooltip-close-delay") ? +t.getAttribute("sbb-tooltip-close-delay") : null;
+        const n = t.hasAttribute("sbb-tooltip-position") ? t.getAttribute("sbb-tooltip-position").split(",").map((k) => k.trim()) : t.tooltipPositions;
+        n && n.length > 0 ? (i.style.setProperty("--sbb-overlay-position-area", n[0]), i.style.setProperty("--sbb-overlay-position-try-fallbacks", n.slice(1).join(", "))) : (i.style.removeProperty("--sbb-overlay-position-area"), i.style.removeProperty("--sbb-overlay-position-try-fallbacks"));
+      } else i && (u.delete(t), i._destroy());
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.popover = "manual", this.id ||= `sbb-tooltip-${++R}`, this.state = "closed", x.connect(this), this.hasUpdated && this.trigger && this._attach(this.trigger);
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback(), x.disconnect(this), this._detach();
+    }
+    requestUpdate(t, e, i) {
+      super.requestUpdate(t, e, i), !O && (!t || t === "trigger") && this.hasUpdated && this._attach(this.trigger);
+    }
+    firstUpdated(t) {
+      super.firstUpdated(t), this._attach(this.trigger);
+    }
+    open() {
+      this._resetOpenCloseTimeout(), !(this.state !== "closed" && this.state !== "closing" || this.disabled || !this.trigger || !this.dispatchBeforeOpenEvent()) && (this.showPopover?.(), this.state = "opening", this._overlayController.connect(this.trigger), this._isZeroAnimationDuration() && this._handleOpening());
+    }
+    close() {
+      this._resetOpenCloseTimeout(), !(this.state !== "opened" && this.state !== "opening") && (this.dispatchBeforeCloseEvent(), this.state = "closing", this._isZeroAnimationDuration() && this._handleClosing());
+    }
+    _delayedOpen() {
+      this._resetOpenCloseTimeout(), this._openTimeout = setTimeout(() => this.open(), this.openDelay);
+    }
+    _handleOpening() {
+      this.state = "opened", this._escapableOverlayController.connect(), this.dispatchOpenEvent();
+    }
+    _delayedClose() {
+      this._resetOpenCloseTimeout(), this._closeTimeout = setTimeout(() => this.close(), this.closeDelay);
+    }
+    _handleClosing() {
+      this.state = "closed", this.hidePopover?.(), this._overlayController.disconnect(), this._escapableOverlayController.disconnect(), this.dispatchCloseEvent(), this._openStateController?.abort();
+    }
+    _onTooltipAnimationEnd(t) {
+      t.animationName === "open" && this.state === "opening" ? this._handleOpening() : t.animationName === "close" && this.state === "closing" && this._handleClosing();
+    }
+    _attach(t) {
+      this._triggerElement && this._detach(), this._triggerElement = t, this._triggerElement && (this._triggerElement.ariaDescribedByElements = H(this._triggerElement.ariaDescribedByElements, this), this._addTriggerEventHandlers());
+    }
+    _detach() {
+      this._triggerAbortController?.abort(), this._openStateController?.abort(), this._resetOpenCloseTimeout(), clearTimeout(this._longPressOpenTimeout), clearTimeout(this._longPressCloseTimeout), this._triggerElement && (this._triggerElement.ariaDescribedByElements = I(this._triggerElement.ariaDescribedByElements, this), this._triggerElement = null);
+    }
+    _destroy() {
+      this._detach(), this.remove();
+    }
+    _addTriggerEventHandlers() {
+      const t = this._triggerElement;
+      if (!t)
+        return;
+      this._triggerAbortController?.abort(), this._triggerAbortController = new AbortController();
+      const e = {
+        signal: this._triggerAbortController.signal,
+        passive: !0
+      };
+      $ || (t.addEventListener("mouseenter", () => this._delayedOpen(), e), t.addEventListener("mouseleave", (i) => {
+        const n = i.relatedTarget;
+        (!n || n !== this) && this._delayedClose();
+      }, e), t.addEventListener("blur", () => this.close(), e), t.addEventListener("focus", () => this._delayedOpen(), e)), t.addEventListener("touchstart", () => {
+        clearTimeout(this._longPressOpenTimeout), clearTimeout(this._longPressCloseTimeout), this._longPressOpenTimeout = setTimeout(() => this.open(), j);
+      }, e), t.addEventListener("touchend", () => {
+        clearTimeout(this._longPressOpenTimeout), this._longPressCloseTimeout = setTimeout(() => this.close(), this.longPressCloseDelay);
+      }, e), t.addEventListener("touchcancel", () => {
+        clearTimeout(this._longPressOpenTimeout);
+      }, e);
+    }
+    _isZeroAnimationDuration() {
+      return S(this, "--sbb-tooltip-animation-duration");
+    }
+    _resetOpenCloseTimeout() {
+      clearTimeout(this._openTimeout), clearTimeout(this._closeTimeout);
+    }
+    render() {
+      return P`
+      <div class="sbb-tooltip">
+        <slot></slot>
+      </div>
+    `;
+    }
+  }, l = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
+    r = [z(), b()], y = [b({ attribute: "open-delay", type: Number })], v = [b({ attribute: "close-delay", type: Number })], _ = [b({ attribute: "long-press-close-delay", type: Number })], p(a, null, r, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (e) => "trigger" in e, get: (e) => e.trigger, set: (e, i) => {
+      e.trigger = i;
+    } }, metadata: t }, d, m), p(a, null, y, { kind: "setter", name: "openDelay", static: !1, private: !1, access: { has: (e) => "openDelay" in e, set: (e, i) => {
+      e.openDelay = i;
+    } }, metadata: t }, null, o), p(a, null, v, { kind: "setter", name: "closeDelay", static: !1, private: !1, access: { has: (e) => "closeDelay" in e, set: (e, i) => {
+      e.closeDelay = i;
+    } }, metadata: t }, null, o), p(a, null, _, { kind: "setter", name: "longPressCloseDelay", static: !1, private: !1, access: { has: (e) => "longPressCloseDelay" in e, set: (e, i) => {
+      e.longPressCloseDelay = i;
+    } }, metadata: t }, null, o), t && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), a.elementName = "sbb-tooltip", a.role = "tooltip", a.styles = [q, Z], O || N(() => a._initializeTooltipOutlet()), a;
+})();
+export {
+  ot as SbbTooltipElement
+};

package/tooltip.js

@@ -1,6 +1,5 @@
-import { t as e } from "./tooltip.component-B5fKuZdI.js";
-import "./tooltip.pure.js";
-//#region src/elements/tooltip.ts
+import { SbbTooltipElement as e } from "./tooltip/tooltip.component.js";
 e.define();
-//#endregion
-export { e as SbbTooltipElement };
+export {
+  e as SbbTooltipElement
+};

package/tooltip.pure.js

@@ -1,2 +1,4 @@
-import { t as e } from "./tooltip.component-B5fKuZdI.js";
-export { e as SbbTooltipElement };
+import { SbbTooltipElement as t } from "./tooltip/tooltip.component.js";
+export {
+  t as SbbTooltipElement
+};

package/train/train/train.component.js

@@ -1,2 +1,123 @@
-import { t as e } from "../../train.component-B_Nlu8Kh.js";
-export { e as SbbTrainElement };
+var M = (e) => {
+  throw TypeError(e);
+};
+var O = (e, a, r) => a.has(e) || M("Cannot " + r);
+var _ = (e, a, r) => (O(e, a, "read from private field"), r ? r.call(e) : a.get(e)), g = (e, a, r) => a.has(e) ? M("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, r), n = (e, a, r, m) => (O(e, a, "write to private field"), m ? m.call(e, r) : a.set(e, r), r);
+import { __runInitializers as l, __esDecorate as f } from "tslib";
+import { css as G, nothing as v } from "lit";
+import { property as L } from "lit/decorators.js";
+import { unsafeStatic as U, html as u } from "lit/static-html.js";
+import { SbbElement as P } from "../../core/base-elements.js";
+import { SbbLanguageController as W } from "../../core/controllers.js";
+import { forceType as y, omitEmptyConverter as q } from "../../core/decorators.js";
+import { i18nTrain as B, i18nWagonsLabel as F } from "../../core/i18n.js";
+import { SbbNamedSlotListMixin as H } from "../../core/mixins.js";
+import { boxSizingStyles as J } from "../../core/styles.js";
+import "../../icon.js";
+const K = G`:host{display:block;--sbb-train-direction-label-spacing: var(--sbb-spacing-fixed-1x)}.sbb-train{--sbb-text-font-size: var(--sbb-text-font-size-xs);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:flex;flex-direction:column;gap:var(--sbb-train-formation-vertical-gap);position:relative}.sbb-train:before{content:"";display:var(--sbb-train-formation-reserve-spacing-display, none);height:max(var(--sbb-size-icon-ui-small),1em * var(--sbb-typo-line-height-text))}.sbb-train__wagons{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train__direction-heading{display:flex;position:absolute;width:100%}.sbb-train__direction-sticky-wrapper{position:sticky;inset-inline-start:0;display:inline-flex;align-items:center;gap:var(--sbb-train-direction-label-spacing);max-width:100%}.sbb-train__direction-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-train__direction-label-sr{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+let rt = (() => {
+  var c, b, d, h, p, s;
+  let e = H(P), a, r = [], m = [], x, w = [], z = [], $, k = [], I = [], S, A = [], C = [], N, j = [], D = [];
+  return s = class extends e {
+    constructor() {
+      super(...arguments);
+      g(this, c);
+      g(this, b);
+      g(this, d);
+      g(this, h);
+      g(this, p);
+      this.listChildLocalNames = [
+        "sbb-train-wagon",
+        "sbb-train-blocked-passage"
+      ], n(this, c, l(this, r, "")), n(this, b, (l(this, m), l(this, w, "6"))), n(this, d, (l(this, z), l(this, k, ""))), n(this, h, (l(this, I), l(this, A, ""))), n(this, p, (l(this, C), l(this, j, "left"))), this._language = (l(this, D), new W(this));
+    }
+    /** General label for "driving direction". */
+    get directionLabel() {
+      return _(this, c);
+    }
+    set directionLabel(i) {
+      n(this, c, i);
+    }
+    /** Heading level of the direction label, used for screen readers. */
+    get directionLabelLevel() {
+      return _(this, b);
+    }
+    set directionLabelLevel(i) {
+      n(this, b, i);
+    }
+    /** Label for the destination station of the train. */
+    get station() {
+      return _(this, d);
+    }
+    set station(i) {
+      n(this, d, i);
+    }
+    /** Accessibility label for additional information regarding the leaving direction of the train. */
+    get accessibilityLabel() {
+      return _(this, h);
+    }
+    set accessibilityLabel(i) {
+      n(this, h, i);
+    }
+    /** Controls the direction indicator to show the arrow left or right. Default is left.  */
+    get direction() {
+      return _(this, p);
+    }
+    set direction(i) {
+      n(this, p, i);
+    }
+    /**
+     * Create the aria-label text out of the direction label, station and the accessibility label.
+     */
+    _getDirectionAriaLabel() {
+      const i = [B[this._language.current]];
+      return this.directionLabel && this.station && i.push(`${this.directionLabel} ${this.station}`), this.accessibilityLabel && i.push(this.accessibilityLabel), `${i.join(", ")}.`;
+    }
+    willUpdate(i) {
+      super.willUpdate(i), i.has("listChildren") && this.dispatchEvent(new Event("trainslotchange", { bubbles: !0 }));
+    }
+    render() {
+      const i = `h${this.directionLabelLevel}`;
+      return u`
+      <div class="sbb-train">
+        <${U(i)} class="sbb-train__direction-label-sr">
+          ${this._getDirectionAriaLabel()}
+        </${U(i)}>
+        ${this.directionLabel ? u`<div class="sbb-train__direction-heading" aria-hidden="true">
+                <span class="sbb-train__direction-sticky-wrapper">
+                  ${this.direction === "left" ? u`<sbb-icon name="chevron-small-left-small"></sbb-icon>` : v}
+
+                  <span class="sbb-train__direction-label">
+                    ${this.directionLabel} ${this.station}
+                  </span>
+
+                  ${this.direction === "right" ? u`<sbb-icon name="chevron-small-right-small"></sbb-icon>` : v}
+                </span>
+              </div>` : v}
+        ${this.renderList({
+        class: "sbb-train__wagons",
+        ariaLabel: F[this._language.current]
+      })}
+      </div>
+    `;
+    }
+  }, c = new WeakMap(), b = new WeakMap(), d = new WeakMap(), h = new WeakMap(), p = new WeakMap(), (() => {
+    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;
+    a = [y(), L({ attribute: "direction-label", reflect: !0, converter: q })], x = [L({ attribute: "direction-label-level" })], $ = [y(), L()], S = [y(), L({ attribute: "accessibility-label" })], N = [L({ reflect: !0 })], f(s, null, a, { kind: "accessor", name: "directionLabel", static: !1, private: !1, access: { has: (t) => "directionLabel" in t, get: (t) => t.directionLabel, set: (t, o) => {
+      t.directionLabel = o;
+    } }, metadata: i }, r, m), f(s, null, x, { kind: "accessor", name: "directionLabelLevel", static: !1, private: !1, access: { has: (t) => "directionLabelLevel" in t, get: (t) => t.directionLabelLevel, set: (t, o) => {
+      t.directionLabelLevel = o;
+    } }, metadata: i }, w, z), f(s, null, $, { kind: "accessor", name: "station", static: !1, private: !1, access: { has: (t) => "station" in t, get: (t) => t.station, set: (t, o) => {
+      t.station = o;
+    } }, metadata: i }, k, I), f(s, null, S, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (t) => "accessibilityLabel" in t, get: (t) => t.accessibilityLabel, set: (t, o) => {
+      t.accessibilityLabel = o;
+    } }, metadata: i }, A, C), f(s, null, N, { kind: "accessor", name: "direction", static: !1, private: !1, access: { has: (t) => "direction" in t, get: (t) => t.direction, set: (t, o) => {
+      t.direction = o;
+    } }, metadata: i }, j, D), i && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
+  })(), s.elementName = "sbb-train", s.styles = [J, K], s.events = {
+    trainslotchange: "trainslotchange"
+  }, s;
+})();
+export {
+  rt as SbbTrainElement
+};

package/train/train-blocked-passage/train-blocked-passage.component.js

@@ -1,2 +1,19 @@
-import { t as e } from "../../train-blocked-passage.component-Dz7lD_V1.js";
-export { e as SbbTrainBlockedPassageElement };
+import { css as r, html as b } from "lit";
+import { SbbElement as e } from "../../core/base-elements.js";
+import { boxSizingStyles as o } from "../../core/styles.js";
+const i = r`:host{display:block;--sbb-train-blocked-passage-height: var(--sbb-train-formation-wagon-height);--sbb-train-blocked-passage-background-color: var(--sbb-color-error);--sbb-train-blocked-passage-bar-color: var(--sbb-color-white);--sbb-train-blocked-passage-icon-dimension: 1rem;--sbb-train-blocked-passage-icon-bar-width: .625rem;--sbb-train-blocked-passage-icon-bar-height: .25rem;--sbb-train-blocked-passage-icon-bar-border-radius: .0625rem}@media(forced-colors:active){:host{--sbb-train-blocked-passage-background-color: CanvasText;--sbb-train-blocked-passage-bar-color: Canvas}}.sbb-train-blocked-passage:before{content:"";display:var(--sbb-train-formation-wagon-label-display, block);height:calc(var(--sbb-text-font-size-xxs) * var(--sbb-typo-line-height-text))}.sbb-train-blocked-passage__wrapper{width:var(--sbb-train-blocked-passage-icon-dimension);display:flex;justify-content:center;flex-direction:column;height:var(--sbb-train-blocked-passage-height)}.sbb-train-blocked-passage__icon{width:100%;height:var(--sbb-train-blocked-passage-icon-dimension);border-radius:50%;background-color:var(--sbb-train-blocked-passage-background-color);position:relative;flex-direction:column;display:flex;align-items:center}.sbb-train-blocked-passage__icon:before{content:"";width:var(--sbb-train-blocked-passage-icon-bar-width);height:var(--sbb-train-blocked-passage-icon-bar-height);border-radius:var(--sbb-train-blocked-passage-icon-bar-border-radius);background-color:var(--sbb-train-blocked-passage-bar-color);margin:auto 0}`, a = class a extends e {
+  render() {
+    return b`
+      <span class="sbb-train-blocked-passage">
+        <span class="sbb-train-blocked-passage__wrapper">
+          <span class="sbb-train-blocked-passage__icon"></span>
+        </span>
+      </span>
+    `;
+  }
+};
+a.elementName = "sbb-train-blocked-passage", a.styles = [o, i];
+let s = a;
+export {
+  s as SbbTrainBlockedPassageElement
+};

package/train/train-blocked-passage.js

@@ -1,4 +1,7 @@
-import { t as e } from "../train-blocked-passage.component-Dz7lD_V1.js";
-e.define(), console.warn("The entrypoint '@sbb-esta/elements/train/train-blocked-passage.js' has been deprecated.\nUse either '@sbb-esta/elements/train.js' or '@sbb-esta/elements/train.pure.js' instead.");
-//#endregion
-export { e as SbbTrainBlockedPassageElement };
+import { SbbTrainBlockedPassageElement as e } from "./train-blocked-passage/train-blocked-passage.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/train/train-blocked-passage.js' has been deprecated.
+Use either '@sbb-esta/elements/train.js' or '@sbb-esta/elements/train.pure.js' instead.`);
+export {
+  e as SbbTrainBlockedPassageElement
+};

package/train/train-formation/train-formation.component.js

@@ -1,2 +1,93 @@
-import { t as e } from "../../train-formation.component-CGTqQgp7.js";
-export { e as SbbTrainFormationElement };
+var _ = (t) => {
+  throw TypeError(t);
+};
+var k = (t, o, s) => o.has(t) || _("Cannot " + s);
+var p = (t, o, s) => (k(t, o, "read from private field"), s ? s.call(t) : o.get(t)), h = (t, o, s) => o.has(t) ? _("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(t) : o.set(t, s), f = (t, o, s, l) => (k(t, o, "write to private field"), l ? l.call(t, s) : o.set(t, s), s);
+import { __esDecorate as x, __runInitializers as m } from "tslib";
+import { css as y, nothing as C, html as v } from "lit";
+import { property as z, state as S } from "lit/decorators.js";
+import { styleMap as L } from "lit/directives/style-map.js";
+import { SbbElement as $ } from "../../core/base-elements.js";
+import { SbbLanguageController as A } from "../../core/controllers.js";
+import { i18nSectorShort as N, i18nSector as P, i18nTrains as I } from "../../core/i18n.js";
+import { SbbNamedSlotListMixin as j } from "../../core/mixins.js";
+import { boxSizingStyles as M } from "../../core/styles.js";
+const O = y`:host{display:block;--sbb-train-formation-sector-line-color: var(--sbb-color-cement);--sbb-train-formation-sector-line-color: light-dark( var(--sbb-color-cement), var(--sbb-color-smoke) );--sbb-train-formation-sector-line-width: var(--sbb-border-width-1x);--sbb-train-formation-blocked-passage-width: 1rem;--sbb-train-formation-text-color: var(--sbb-color-3);--sbb-train-formation-vertical-gap: var(--sbb-spacing-fixed-2x)}@media(forced-colors:active){:host{--sbb-train-formation-sector-line-color: CanvasText}}.sbb-train-formation{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-train-formation::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-train-formation::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-train-formation::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-train-formation::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-train-formation::-webkit-scrollbar-button,.sbb-train-formation::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-train-formation{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-train-formation{display:grid;grid-template:"start sectors end" auto "start trains end" auto/auto 1fr auto;position:relative;overflow-x:auto;row-gap:calc(var(--sbb-train-formation-show-sectors-gap, 0) * var(--sbb-train-formation-vertical-gap));padding-block-end:var(--sbb-train-formation-vertical-gap);color:var(--sbb-train-formation-text-color)}.sbb-train-formation:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-train-formation:before,.sbb-train-formation:after{content:"";display:block;width:var(--sbb-train-formation-padding-inline)}.sbb-train-formation:before{grid-area:start}.sbb-train-formation:after{grid-area:end}.sbb-train-formation__sectors{display:flex;grid-area:sectors;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train-formation__sector{--_wagon-sum: var(--sbb-train-formation-wagon-count) * var(--sbb-train-formation-wagon-width);--_blocked-passage-sum: var(--sbb-train-formation-wagon-blocked-passage-count) * var(--sbb-train-formation-blocked-passage-width);--_total-count: calc( var(--sbb-train-formation-wagon-count) + var(--sbb-train-formation-wagon-blocked-passage-count) );--_gap-sum: calc((var(--_total-count) - 1) * var(--sbb-train-formation-wagon-gap));--_sector-width: calc(var(--_wagon-sum) + var(--_blocked-passage-sum) + var(--_gap-sum));--sbb-text-font-size: var(--sbb-text-font-size-xs);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);flex:0 0 var(--_sector-width);text-align:center;overflow-x:clip}.sbb-train-formation__sector-sticky-wrapper{position:sticky;inset:auto 0;padding:0 var(--sbb-spacing-fixed-1x);margin:0 var(--sbb-spacing-fixed-2x);overflow:hidden;white-space:nowrap}.sbb-train-formation__sector-sticky-wrapper:before,.sbb-train-formation__sector-sticky-wrapper:after{content:"";position:absolute;inset-block:calc(50% - var(--sbb-train-formation-sector-line-width) / 2);border-block-end:var(--sbb-train-formation-sector-line-width) solid var(--sbb-train-formation-sector-line-color);width:calc(.5 * var(--_sector-width))}.sbb-train-formation__sector-sticky-wrapper:before{inset-inline-end:100%}.sbb-train-formation__sector-sticky-wrapper:after{inset-inline-start:100%}.sbb-train-formation__trains{grid-area:trains}.sbb-train-formation__train-list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train-formation__train-list>:is(li,span){display:inline-flex}`;
+let V = (() => {
+  var n, b, i;
+  let t = j($), o, s = [], l = [], u, g = [], w = [];
+  return i = class extends t {
+    constructor() {
+      super();
+      h(this, n);
+      h(this, b);
+      this.listChildLocalNames = ["sbb-train"], f(this, n, m(this, s, "side")), f(this, b, (m(this, l), m(this, g, []))), this._language = (m(this, w), new A(this)), this.addEventListener?.("trainslotchange", (r) => this._readSectors(r)), this.addEventListener?.("sectorchange", (r) => this._readSectors(r));
+    }
+    /** Whether the view of the wagons is from side or top perspective. */
+    get view() {
+      return p(this, n);
+    }
+    set view(r) {
+      f(this, n, r);
+    }
+    get _sectors() {
+      return p(this, b);
+    }
+    set _sectors(r) {
+      f(this, b, r);
+    }
+    _readSectors(r) {
+      r?.stopPropagation(), this._sectors = Array.from(this.querySelectorAll?.("sbb-train-wagon,sbb-train-blocked-passage") ?? []).reduce((a, e) => {
+        const c = a[a.length - 1];
+        if (e.localName === "sbb-train-wagon") {
+          const d = e.sector ?? e.getAttribute("sector");
+          !c.label && d && (c.label = d), !d || c.label === d ? c.wagonCount++ : a.push({
+            label: d,
+            wagonCount: 1,
+            blockedPassageCount: 0
+          });
+        } else e.localName === "sbb-train-blocked-passage" && c.blockedPassageCount++;
+        return a;
+      }, [{ wagonCount: 0, blockedPassageCount: 0 }]);
+    }
+    willUpdate(r) {
+      super.willUpdate(r), r.has("listChildren") && this._readSectors();
+    }
+    render() {
+      return v`
+      <div class="sbb-train-formation">
+        ${this._sectors.length && this._sectors[0].label !== void 0 ? v`<div class="sbb-train-formation__sectors" aria-hidden="true">
+              ${this._sectors.map((r) => v`<span
+                    class="sbb-train-formation__sector"
+                    style=${L({
+        "--sbb-train-formation-wagon-count": r.wagonCount,
+        "--sbb-train-formation-wagon-blocked-passage-count": r.blockedPassageCount
+      })}
+                  >
+                    <span class="sbb-train-formation__sector-sticky-wrapper">
+                      ${`${r.wagonCount === 1 && r.label ? N[this._language.current] : P[this._language.current]} ${r.label ? r.label : ""}`}
+                    </span>
+                  </span>`)}
+            </div>` : C}
+
+        <div class="sbb-train-formation__trains">
+          ${this.renderList({
+        class: "sbb-train-formation__train-list",
+        ariaLabel: I[this._language.current]
+      })}
+        </div>
+      </div>
+    `;
+    }
+  }, n = new WeakMap(), b = new WeakMap(), (() => {
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(t[Symbol.metadata] ?? null) : void 0;
+    o = [z({ reflect: !0 })], u = [S()], x(i, null, o, { kind: "accessor", name: "view", static: !1, private: !1, access: { has: (a) => "view" in a, get: (a) => a.view, set: (a, e) => {
+      a.view = e;
+    } }, metadata: r }, s, l), x(i, null, u, { kind: "accessor", name: "_sectors", static: !1, private: !1, access: { has: (a) => "_sectors" in a, get: (a) => a._sectors, set: (a, e) => {
+      a._sectors = e;
+    } }, metadata: r }, g, w), r && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), i.elementName = "sbb-train-formation", i.styles = [M, O], i;
+})();
+export {
+  V as SbbTrainFormationElement
+};