@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/development/toggle-check.js

@@ -0,0 +1,251 @@
+import { css, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { SbbSlotStateController } from "./core/controllers.js";
+import { SbbFormAssociatedCheckboxMixin } from "./core/mixins.js";
+import { SbbIconNameMixin } from "./icon.js";
+const style = css`@charset "UTF-8";
+/**
+ * Better font rendering (on OS X)
+ * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
+ *
+ * Usage:
+ *
+ * .var_dark_on_light {
+ * 	@include font-smoothing;
+ * }
+ * .var_light_on_dark {
+ * 	@include font-smoothing-reset;
+ * }
+ */
+/** This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element. */
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+:host {
+  display: inline-block;
+  outline: none !important;
+  --sbb-toggle-check-checked-color: var(--sbb-color-red);
+  --sbb-toggle-check-background-color: var(--sbb-color-cloud);
+  --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-color-white);
+  --sbb-toggle-check-circle-border-color: var(--sbb-color-smoke);
+  --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: 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-zero-time,
+    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-body-text));
+}
+
+:host([data-checked]) {
+  --sbb-toggle-check-background-color: var(--sbb-toggle-check-checked-color);
+  --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% - 0.5 * var(--sbb-toggle-check-width))),
+    -50%
+  );
+}
+@media (forced-colors: active) {
+  :host([data-checked]) {
+    --sbb-toggle-check-icon-color: Highlight;
+    --sbb-toggle-check-background-color: Highlight;
+  }
+}
+
+:host(:disabled) {
+  --sbb-toggle-check-background-color: var(--sbb-color-cloud);
+  --sbb-toggle-check-circle-border-color: var(--sbb-color-smoke);
+  --sbb-toggle-check-circle-border-style: dashed;
+  --sbb-toggle-check-circle-background-color: var(--sbb-color-milk);
+  --sbb-toggle-check-icon-color: var(--sbb-color-granite);
+  --sbb-toggle-check-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([data-checked]:disabled) {
+  --sbb-toggle-check-circle-background-color: var(--sbb-color-white);
+}
+
+:host([label-position=before]) {
+  --sbb-toggle-check-flex-direction: row;
+}
+
+.sbb-toggle-check {
+  position: relative;
+  display: flex;
+  color: var(--sbb-color-charcoal);
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  cursor: var(--sbb-toggle-check-cursor);
+}
+.sbb-toggle-check::before {
+  content: "​";
+  user-select: none;
+  width: 0;
+  height: 0;
+}
+:host(:focus-visible:not([data-focus-origin=mouse], [data-focus-origin=touch])) .sbb-toggle-check {
+  outline-offset: var(--sbb-focus-outline-offset);
+  outline: var(--sbb-focus-outline-color) 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-font-size-text-s);
+  font-family: var(--sbb-typo-font-family);
+  font-weight: normal;
+  line-height: var(--sbb-typo-line-height-body-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-body-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-font-size-text-m);
+  font-family: var(--sbb-typo-font-family);
+  font-weight: normal;
+  line-height: var(--sbb-typo-line-height-body-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-body-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-body-text) * 1em) / 2);
+}
+:host(:not([data-slot-names~=unnamed])) .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-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color), var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);
+  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);
+}`;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let SbbToggleCheckElement = class extends SbbFormAssociatedCheckboxMixin(
+  SbbIconNameMixin(LitElement)
+) {
+  constructor() {
+    super();
+    this.size = "s";
+    this.iconName = "tick-small";
+    this.labelPosition = "after";
+    new SbbSlotStateController(this);
+  }
+  async willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("checked")) {
+      this.internals.ariaChecked = `${this.checked}`;
+      this.toggleAttribute("data-checked", this.checked);
+    }
+  }
+  render() {
+    return html`
+      <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>
+    `;
+  }
+};
+SbbToggleCheckElement.styles = style;
+SbbToggleCheckElement.events = {
+  didChange: "didChange"
+};
+__decorateClass([
+  property({ reflect: true })
+], SbbToggleCheckElement.prototype, "size", 2);
+__decorateClass([
+  property({ attribute: "icon-name" })
+], SbbToggleCheckElement.prototype, "iconName", 2);
+__decorateClass([
+  property({ attribute: "label-position", reflect: true })
+], SbbToggleCheckElement.prototype, "labelPosition", 2);
+SbbToggleCheckElement = __decorateClass([
+  customElement("sbb-toggle-check")
+], SbbToggleCheckElement);
+export {
+  SbbToggleCheckElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9nZ2xlLWNoZWNrLmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvZWxlbWVudHMvdG9nZ2xlLWNoZWNrL3RvZ2dsZS1jaGVjay50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Jlc3VsdEdyb3VwLCBQcm9wZXJ0eVZhbHVlcywgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgaHRtbCwgTGl0RWxlbWVudCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBjdXN0b21FbGVtZW50LCBwcm9wZXJ0eSB9IGZyb20gJ2xpdC9kZWNvcmF0b3JzLmpzJztcblxuaW1wb3J0IHsgU2JiU2xvdFN0YXRlQ29udHJvbGxlciB9IGZyb20gJy4uL2NvcmUvY29udHJvbGxlcnMuanMnO1xuaW1wb3J0IHsgU2JiRm9ybUFzc29jaWF0ZWRDaGVja2JveE1peGluIH0gZnJvbSAnLi4vY29yZS9taXhpbnMuanMnO1xuaW1wb3J0IHsgU2JiSWNvbk5hbWVNaXhpbiB9IGZyb20gJy4uL2ljb24uanMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi90b2dnbGUtY2hlY2suc2Nzcz9saXQmaW5saW5lJztcblxuLyoqXG4gKiBJdCBkaXNwbGF5cyBhIHRvZ2dsZSBjaGVja2JveC5cbiAqXG4gKiBAc2xvdCAtIFVzZSB0aGUgdW5uYW1lZCBzbG90IHRvIGFkZCBjb250ZW50IHRvIHRoZSB0b2dnbGUgbGFiZWwuXG4gKiBAc2xvdCBpY29uIC0gVXNlIHRoaXMgc2xvdCB0byBwcm92aWRlIGFuIGljb24uIElmIGBpY29uLW5hbWVgIGlzIHNldCwgYSBzYmItaWNvbiB3aWxsIGJlIHVzZWQuXG4gKiBAZXZlbnQge0N1c3RvbUV2ZW50PHZvaWQ+fSBkaWRDaGFuZ2UgLSBEZXByZWNhdGVkLiB1c2VkIGZvciBSZWFjdC4gV2lsbCBwcm9iYWJseSBiZSByZW1vdmVkIG9uY2UgUmVhY3QgMTkgaXMgYXZhaWxhYmxlLlxuICogQGV2ZW50IHtFdmVudH0gY2hhbmdlIC0gRXZlbnQgZmlyZWQgb24gY2hhbmdlLlxuICogQGV2ZW50IHtJbnB1dEV2ZW50fSBpbnB1dCAtIEV2ZW50IGZpcmVkIG9uIGlucHV0LlxuICovXG5AY3VzdG9tRWxlbWVudCgnc2JiLXRvZ2dsZS1jaGVjaycpXG5leHBvcnQgY2xhc3MgU2JiVG9nZ2xlQ2hlY2tFbGVtZW50IGV4dGVuZHMgU2JiRm9ybUFzc29jaWF0ZWRDaGVja2JveE1peGluKFxuICBTYmJJY29uTmFtZU1peGluKExpdEVsZW1lbnQpLFxuKSB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IHN0eWxlO1xuICBwdWJsaWMgc3RhdGljIHJlYWRvbmx5IGV2ZW50cyA9IHtcbiAgICBkaWRDaGFuZ2U6ICdkaWRDaGFuZ2UnLFxuICB9IGFzIGNvbnN0O1xuXG4gIC8qKiBTaXplIHZhcmlhbnQsIGVpdGhlciBtIG9yIHMuICovXG4gIEBwcm9wZXJ0eSh7IHJlZmxlY3Q6IHRydWUgfSkgcHVibGljIHNpemU6ICdzJyB8ICdtJyA9ICdzJztcblxuICAvKiogVGhlIHN2ZyBuYW1lIGZvciB0aGUgdHJ1ZSBzdGF0ZSAtIGRlZmF1bHQgLT4gJ3RpY2stc21hbGwnICovXG4gIEBwcm9wZXJ0eSh7IGF0dHJpYnV0ZTogJ2ljb24tbmFtZScgfSkgcHVibGljIG92ZXJyaWRlIGljb25OYW1lID0gJ3RpY2stc21hbGwnO1xuXG4gIC8qKiBUaGUgbGFiZWwgcG9zaXRpb24gcmVsYXRpdmUgdG8gdGhlIHRvZ2dsZS4gRGVmYXVsdHMgdG8gJ2FmdGVyJyAqL1xuICBAcHJvcGVydHkoeyBhdHRyaWJ1dGU6ICdsYWJlbC1wb3NpdGlvbicsIHJlZmxlY3Q6IHRydWUgfSlcbiAgcHVibGljIGxhYmVsUG9zaXRpb24/OiAnYmVmb3JlJyB8ICdhZnRlcicgPSAnYWZ0ZXInO1xuXG4gIHB1YmxpYyBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICAgIG5ldyBTYmJTbG90U3RhdGVDb250cm9sbGVyKHRoaXMpO1xuICB9XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIGFzeW5jIHdpbGxVcGRhdGUoY2hhbmdlZFByb3BlcnRpZXM6IFByb3BlcnR5VmFsdWVzPHRoaXM+KTogUHJvbWlzZTx2b2lkPiB7XG4gICAgc3VwZXIud2lsbFVwZGF0ZShjaGFuZ2VkUHJvcGVydGllcyk7XG5cbiAgICBpZiAoY2hhbmdlZFByb3BlcnRpZXMuaGFzKCdjaGVja2VkJykpIHtcbiAgICAgIHRoaXMuaW50ZXJuYWxzLmFyaWFDaGVja2VkID0gYCR7dGhpcy5jaGVja2VkfWA7XG4gICAgICB0aGlzLnRvZ2dsZUF0dHJpYnV0ZSgnZGF0YS1jaGVja2VkJywgdGhpcy5jaGVja2VkKTtcbiAgICB9XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxzcGFuIGNsYXNzPVwic2JiLXRvZ2dsZS1jaGVja1wiPlxuICAgICAgICA8c3BhbiBjbGFzcz1cInNiYi10b2dnbGUtY2hlY2tfX2NvbnRhaW5lclwiPlxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwic2JiLXRvZ2dsZS1jaGVja19fbGFiZWxcIj5cbiAgICAgICAgICAgIDxzbG90Pjwvc2xvdD5cbiAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJzYmItdG9nZ2xlLWNoZWNrX190cmFja1wiPlxuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJzYmItdG9nZ2xlLWNoZWNrX19jaXJjbGVcIj5cbiAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJzYmItdG9nZ2xlLWNoZWNrX19pY29uXCI+ICR7dGhpcy5yZW5kZXJJY29uU2xvdCgpfSA8L3NwYW4+XG4gICAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICA8L3NwYW4+XG4gICAgICA8L3NwYW4+XG4gICAgYDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLXRvZ2dsZS1jaGVjayc6IFNiYlRvZ2dsZUNoZWNrRWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBb0JPLElBQU0sd0JBQU4sY0FBb0M7QUFBQSxFQUN6QyxpQkFBaUIsVUFBVTtBQUM3QixFQUFFO0FBQUEsRUFnQk8sY0FBYztBQUNiO0FBVnFCLFNBQU8sT0FBa0I7QUFHaEIsU0FBZ0IsV0FBVztBQUlqRSxTQUFPLGdCQUFxQztBQUkxQyxRQUFJLHVCQUF1QixJQUFJO0FBQUEsRUFDakM7QUFBQSxFQUVBLE1BQXlCLFdBQVcsbUJBQXdEO0FBQzFGLFVBQU0sV0FBVyxpQkFBaUI7QUFFOUIsUUFBQSxrQkFBa0IsSUFBSSxTQUFTLEdBQUc7QUFDcEMsV0FBSyxVQUFVLGNBQWMsR0FBRyxLQUFLLE9BQU87QUFDdkMsV0FBQSxnQkFBZ0IsZ0JBQWdCLEtBQUssT0FBTztBQUFBLElBQ25EO0FBQUEsRUFDRjtBQUFBLEVBRW1CLFNBQXlCO0FBQ25DLFdBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLHNEQVEyQyxLQUFLLGdCQUFnQjtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxFQU16RTtBQUNGO0FBaERhLHNCQUdZLFNBQXlCO0FBSHJDLHNCQUlZLFNBQVM7QUFBQSxFQUM5QixXQUFXO0FBQ2I7QUFHb0MsZ0JBQUE7QUFBQSxFQUFuQyxTQUFTLEVBQUUsU0FBUyxNQUFNO0FBQUEsR0FUaEIsc0JBU3lCLFdBQUEsUUFBQSxDQUFBO0FBR2tCLGdCQUFBO0FBQUEsRUFBckQsU0FBUyxFQUFFLFdBQVcsYUFBYTtBQUFBLEdBWnpCLHNCQVkyQyxXQUFBLFlBQUEsQ0FBQTtBQUkvQyxnQkFBQTtBQUFBLEVBRE4sU0FBUyxFQUFFLFdBQVcsa0JBQWtCLFNBQVMsTUFBTTtBQUFBLEdBZjdDLHNCQWdCSixXQUFBLGlCQUFBLENBQUE7QUFoQkksd0JBQU4sZ0JBQUE7QUFBQSxFQUROLGNBQWMsa0JBQWtCO0FBQUEsR0FDcEIscUJBQUE7In0=

package/development/toggle.d.ts

@@ -0,0 +1,3 @@
+export * from './toggle/toggle.js';
+export * from './toggle/toggle-option.js';
+//# sourceMappingURL=toggle.d.ts.map

package/development/toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../src/elements/toggle.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC"}

package/development/toggle.js

@@ -0,0 +1,3 @@
+export * from "./toggle/toggle.js";
+export * from "./toggle/toggle-option.js";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9nZ2xlLmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7In0=

package/development/train/train/train.d.ts

@@ -0,0 +1,48 @@
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+import { WithListChildren } from '../../core/mixins.js';
+import { SbbTitleLevel } from '../../title.js';
+import { SbbTrainBlockedPassageElement } from '../train-blocked-passage.js';
+import { SbbTrainWagonElement } from '../train-wagon.js';
+
+declare const SbbTrainElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNamedSlotListMixinType<SbbTrainBlockedPassageElement | SbbTrainWagonElement>> & typeof LitElement;
+/**
+ * It can be used as a container for `sbb-train-wagon` or `sbb-train-blocked-passage` components.
+ *
+ * @slot - Use the unnamed slot to add 'sbb-train-wagon' elements to the `sbb-train`.
+ */
+export declare class SbbTrainElement extends SbbTrainElement_base {
+    static styles: CSSResultGroup;
+    static readonly events: {
+        readonly trainSlotChange: "trainSlotChange";
+    };
+    protected readonly listChildLocalNames: string[];
+    /** General label for "driving direction". */
+    directionLabel: string;
+    /** Heading level of the direction label, used for screen readers. */
+    directionLabelLevel: SbbTitleLevel;
+    /** Label for the destination station of the train. */
+    station?: string;
+    /** Accessibility label for additional information regarding the leaving direction of the train. */
+    accessibilityLabel?: string;
+    /** Controls the direction indicator to show the arrow left or right. Default is left.  */
+    direction: 'left' | 'right';
+    private _language;
+    /**
+     * @internal
+     * Emits whenever the train slot changes.
+     */
+    private _trainSlotChange;
+    /**
+     * Create the aria-label text out of the direction label, station and the accessibility label.
+     */
+    private _getDirectionAriaLabel;
+    protected willUpdate(changedProperties: PropertyValues<WithListChildren<this>>): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-train': SbbTrainElement;
+    }
+}
+export {};
+//# sourceMappingURL=train.d.ts.map

package/development/train/train/train.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"train.d.ts","sourceRoot":"","sources":["../../../../../src/elements/train/train/train.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACpF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAI9D,OAAO,eAAe,CAAC;;AAEvB;;;;GAIG;AACH,qBACa,eAAgB,SAAQ,oBAGxB;IACX,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IACX,mBAA4B,mBAAmB,WAG7C;IAEF,6CAA6C;IACM,cAAc,EAAG,MAAM,CAAC;IAE3E,qEAAqE;IACZ,mBAAmB,EAAE,aAAa,CAAO;IAElG,sDAAsD;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IAEpC,mGAAmG;IAC5C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAEnF,0FAA0F;IACtD,SAAS,EAAE,MAAM,GAAG,OAAO,CAAU;IAEzE,OAAO,CAAC,SAAS,CAAmC;IAEpD;;;OAGG;IACH,OAAO,CAAC,gBAAgB,CAOtB;IAEF;;OAEG;IACH,OAAO,CAAC,sBAAsB;cAcX,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;cAQ3E,MAAM,IAAI,cAAc;CAuC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/development/train/train-blocked-passage/train-blocked-passage.d.ts

@@ -0,0 +1,15 @@
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+
+/**
+ * It visually displays a blocked passage between train wagons.
+ */
+export declare class SbbTrainBlockedPassageElement extends LitElement {
+    static styles: CSSResultGroup;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-train-blocked-passage': SbbTrainBlockedPassageElement;
+    }
+}
+//# sourceMappingURL=train-blocked-passage.d.ts.map

package/development/train/train-blocked-passage/train-blocked-passage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"train-blocked-passage.d.ts","sourceRoot":"","sources":["../../../../../src/elements/train/train-blocked-passage/train-blocked-passage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC;;GAEG;AACH,qBACa,6BAA8B,SAAQ,UAAU;IAC3D,OAAuB,MAAM,EAAE,cAAc,CAAS;cAEnC,MAAM,IAAI,cAAc;CAS5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,2BAA2B,EAAE,6BAA6B,CAAC;KAC5D;CACF"}

package/development/train/train-blocked-passage.d.ts

@@ -0,0 +1,2 @@
+export * from './train-blocked-passage/train-blocked-passage.js';
+//# sourceMappingURL=train-blocked-passage.d.ts.map

package/development/train/train-blocked-passage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"train-blocked-passage.d.ts","sourceRoot":"","sources":["../../../../src/elements/train/train-blocked-passage.ts"],"names":[],"mappings":"AAAA,cAAc,kDAAkD,CAAC"}

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

@@ -0,0 +1,101 @@
+import { css, LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+const style = css`/**
+ * Better font rendering (on OS X)
+ * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
+ *
+ * Usage:
+ *
+ * .var_dark_on_light {
+ * 	@include font-smoothing;
+ * }
+ * .var_light_on_dark {
+ * 	@include font-smoothing-reset;
+ * }
+ */
+/** This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element. */
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+:host {
+  --sbb-train-blocked-passage-height: var(--sbb-train-formation-wagon-height);
+  --sbb-train-blocked-passage-background-color: var(--sbb-color-red);
+  --sbb-train-blocked-passage-bar-color: var(--sbb-color-white);
+  --sbb-train-blocked-passage-icon-dimension: 1rem;
+  --sbb-train-blocked-passage-icon-bar-width: 0.625rem;
+  --sbb-train-blocked-passage-icon-bar-height: 0.25rem;
+  --sbb-train-blocked-passage-icon-bar-border-radius: 0.0625rem;
+  display: block;
+}
+@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-font-size-text-s) * var(--sbb-typo-line-height-body-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;
+}`;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let SbbTrainBlockedPassageElement = class extends LitElement {
+  render() {
+    return html`
+      <span class="sbb-train-blocked-passage">
+        <span class="sbb-train-blocked-passage__wrapper">
+          <span class="sbb-train-blocked-passage__icon"></span>
+        </span>
+      </span>
+    `;
+  }
+};
+SbbTrainBlockedPassageElement.styles = style;
+SbbTrainBlockedPassageElement = __decorateClass([
+  customElement("sbb-train-blocked-passage")
+], SbbTrainBlockedPassageElement);
+export {
+  SbbTrainBlockedPassageElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJhaW4tYmxvY2tlZC1wYXNzYWdlLmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvZWxlbWVudHMvdHJhaW4vdHJhaW4tYmxvY2tlZC1wYXNzYWdlL3RyYWluLWJsb2NrZWQtcGFzc2FnZS50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Jlc3VsdEdyb3VwLCBUZW1wbGF0ZVJlc3VsdCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBodG1sLCBMaXRFbGVtZW50IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGN1c3RvbUVsZW1lbnQgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5cbmltcG9ydCBzdHlsZSBmcm9tICcuL3RyYWluLWJsb2NrZWQtcGFzc2FnZS5zY3NzP2xpdCZpbmxpbmUnO1xuXG4vKipcbiAqIEl0IHZpc3VhbGx5IGRpc3BsYXlzIGEgYmxvY2tlZCBwYXNzYWdlIGJldHdlZW4gdHJhaW4gd2Fnb25zLlxuICovXG5AY3VzdG9tRWxlbWVudCgnc2JiLXRyYWluLWJsb2NrZWQtcGFzc2FnZScpXG5leHBvcnQgY2xhc3MgU2JiVHJhaW5CbG9ja2VkUGFzc2FnZUVsZW1lbnQgZXh0ZW5kcyBMaXRFbGVtZW50IHtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSBzdHlsZXM6IENTU1Jlc3VsdEdyb3VwID0gc3R5bGU7XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlcigpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8c3BhbiBjbGFzcz1cInNiYi10cmFpbi1ibG9ja2VkLXBhc3NhZ2VcIj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJzYmItdHJhaW4tYmxvY2tlZC1wYXNzYWdlX193cmFwcGVyXCI+XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJzYmItdHJhaW4tYmxvY2tlZC1wYXNzYWdlX19pY29uXCI+PC9zcGFuPlxuICAgICAgICA8L3NwYW4+XG4gICAgICA8L3NwYW4+XG4gICAgYDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLXRyYWluLWJsb2NrZWQtcGFzc2FnZSc6IFNiYlRyYWluQmxvY2tlZFBhc3NhZ2VFbGVtZW50O1xuICB9XG59XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQVVhLElBQUEsZ0NBQU4sY0FBNEMsV0FBVztBQUFBLEVBR3pDLFNBQXlCO0FBQ25DLFdBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxFQU9UO0FBQ0Y7QUFaYSw4QkFDWSxTQUF5QjtBQURyQyxnQ0FBTixnQkFBQTtBQUFBLEVBRE4sY0FBYywyQkFBMkI7QUFBQSxHQUM3Qiw2QkFBQTsifQ==

package/development/train/train-formation/train-formation.d.ts

@@ -0,0 +1,40 @@
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+import { WithListChildren } from '../../core/mixins.js';
+import { SbbTrainElement } from '../train.js';
+
+declare const SbbTrainFormationElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNamedSlotListMixinType<SbbTrainElement>> & typeof LitElement;
+/**
+ * It displays a train composition, acting as a container for one or more `sbb-train` component.
+ *
+ * @slot - Use the unnamed slot to add 'sbb-train' elements to the `sbb-train-formation`.
+ */
+export declare class SbbTrainFormationElement extends SbbTrainFormationElement_base {
+    static styles: CSSResultGroup;
+    protected readonly listChildLocalNames: string[];
+    /** Option to hide all wagon labels. */
+    hideWagonLabel: boolean;
+    private _sectors;
+    /** Element that defines the visible content width. */
+    private _formationDiv;
+    private _contentResizeObserver;
+    private _abort;
+    private _language;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Apply width of the scrollable space of the formation as a css variable. This will be used from
+     * every slotted sbb-train for the direction-label
+     */
+    private _applyCssWidth;
+    private _readSectors;
+    private _updateFormationDiv;
+    protected willUpdate(changedProperties: PropertyValues<WithListChildren<this>>): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-train-formation': SbbTrainFormationElement;
+    }
+}
+export {};
+//# sourceMappingURL=train-formation.d.ts.map

package/development/train/train-formation/train-formation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"train-formation.d.ts","sourceRoot":"","sources":["../../../../../src/elements/train/train-formation/train-formation.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAIpF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;;AAUnD;;;;GAIG;AACH,qBACa,wBAAyB,SAAQ,6BAGjC;IACX,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAAiB;IAEhE,uCAAuC;IAC2C,cAAc,UACxF;IAEC,OAAO,CAAC,QAAQ,CAA0B;IAEnD,sDAAsD;IACtD,OAAO,CAAC,aAAa,CAAkB;IACvC,OAAO,CAAC,sBAAsB,CAA2D;IACzF,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IAEpC,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAK5C;;;OAGG;IACH,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,YAAY;YA0CN,mBAAmB;cAcd,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;cAQ3E,MAAM,IAAI,cAAc;CAgC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}

package/development/train/train-formation.d.ts

@@ -0,0 +1,2 @@
+export * from './train-formation/train-formation.js';
+//# sourceMappingURL=train-formation.d.ts.map

package/development/train/train-formation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"train-formation.d.ts","sourceRoot":"","sources":["../../../../src/elements/train/train-formation.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC"}