@sbb-esta/lyne-elements-dev 0.0.0 → 4.5.1-dev.1771859294

package/teaser-product/teaser-product.js

@@ -0,0 +1,4 @@
+import { SbbTeaserProductElement as o } from "./teaser-product/teaser-product.component.js";
+export {
+  o as SbbTeaserProductElement
+};

package/teaser-product-common-DwaWdQEh.js

@@ -0,0 +1,5 @@
+import { css as r } from "lit";
+const e = r`:host{display:block;--sbb-teaser-product-background-color: var(--sbb-color-cloud);--sbb-teaser-product-background-color: light-dark( var(--sbb-color-cloud), var(--sbb-color-midnight) );--sbb-teaser-product-background-gradient-direction: to right;--sbb-teaser-product-background: var(--sbb-teaser-product-background-color);--sbb-teaser-product-border-radius: var(--sbb-border-radius-4x);--sbb-teaser-product-content-color: var(--sbb-color-4);--sbb-teaser-product-footer-color: var(--sbb-color-anthracite);--sbb-teaser-product-footer-color: light-dark( var(--sbb-color-anthracite), var(--sbb-color-cloud) );--sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-l);--sbb-teaser-product-min-height: 37.5rem;--sbb-teaser-product-background-gradient-start: 25%;--sbb-teaser-product-background-gradient-end: 75%}@media(min-width:64rem){:host{--sbb-teaser-product-background: linear-gradient( var(--sbb-teaser-product-background-gradient-direction), var(--sbb-teaser-product-background-color) var(--sbb-teaser-product-background-gradient-start), transparent var(--sbb-teaser-product-background-gradient-end) )}}:host([negative]){--sbb-teaser-product-background-color: var(--sbb-background-color-1-negative);--sbb-teaser-product-content-color: var(--sbb-color-4-negative);--sbb-teaser-product-footer-color: var(--sbb-color-4-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-title-text-color-normal-override: var(--sbb-color-3-negative)}:host([image-alignment=before]){--sbb-teaser-product-background-gradient-direction: to left}.sbb-teaser-product__image-container{overflow:hidden;border-radius:var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius) 0 0}@media(min-width:64rem){.sbb-teaser-product__image-container{position:absolute;inset:0;border-radius:var(--sbb-teaser-product-border-radius)}}::slotted(p.sbb-teaser-product--spacing){margin:0}::slotted(sbb-title.sbb-teaser-product--spacing){margin-block-start:0}::slotted(:is(sbb-action-group,:is(:state(action),[state--action])).sbb-teaser-product--spacing){margin-block-start:var(--sbb-spacing-responsive-xxs)}::slotted([slot=image]){display:flex;width:100%;height:100%}@media(forced-colors:active){.sbb-teaser-product__root:after{content:"";position:absolute;display:block;inset:0;pointer-events:none;border:var(--sbb-border-width-2x) solid CanvasText;border-radius:var(--sbb-teaser-product-border-radius)}}.sbb-action-base{display:block;position:relative;text-decoration:none}.sbb-teaser-product__container{background:var(--sbb-teaser-product-background);border-radius:0 0 var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius);padding:var(--sbb-spacing-responsive-s)}@media(min-width:64rem){.sbb-teaser-product__container{display:grid;grid:"content ." 1fr "footnote ." auto/1fr 1fr;column-gap:var(--sbb-spacing-responsive-xxl);background:var(--sbb-teaser-product-background);border-radius:var(--sbb-teaser-product-border-radius);padding-block:var(--sbb-teaser-product-container-padding-block) 0;padding-inline:var(--sbb-spacing-responsive-xl);position:relative}:host([image-alignment=before]) .sbb-teaser-product__container{grid-template-areas:". content" ". footnote"}}.sbb-teaser-product__content{grid-area:content;align-self:center;margin:0;color:var(--sbb-teaser-product-content-color)}@media(min-width:64rem){.sbb-teaser-product__content{align-content:center;min-height:calc(var(--sbb-teaser-product-min-height) - 2 * var(--sbb-teaser-product-container-padding-block))}}.sbb-teaser-product__footnote{grid-area:footnote;padding-block-start:var(--sbb-spacing-responsive-s);color:var(--sbb-teaser-product-footer-color);--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size)}:host(:not(:is(:state(slotted-footnote),[state--slotted-footnote]))) .sbb-teaser-product__footnote{padding-block-start:0}@media(min-width:64rem){.sbb-teaser-product__footnote{min-height:var(--sbb-teaser-product-container-padding-block);padding-block:var(--sbb-spacing-responsive-xs)}}`;
+export {
+  e as t
+};

package/teaser-product.js

@@ -0,0 +1,10 @@
+import { SbbTeaserProductElement as r } from "./teaser-product/teaser-product/teaser-product.component.js";
+import { SbbTeaserProductStaticElement as m } from "./teaser-product/teaser-product-static/teaser-product-static.component.js";
+import { SbbTeaserProductCommonElementMixin as b } from "./teaser-product/common/teaser-product-common.js";
+import { t as c } from "./teaser-product-common-DwaWdQEh.js";
+export {
+  b as SbbTeaserProductCommonElementMixin,
+  r as SbbTeaserProductElement,
+  m as SbbTeaserProductStaticElement,
+  c as teaserProductCommonStyle
+};

package/teaser.js

@@ -0,0 +1,4 @@
+import { SbbTeaserElement as b } from "./teaser/teaser.component.js";
+export {
+  b as SbbTeaserElement
+};

package/time-input/time-input.component.js

@@ -0,0 +1,127 @@
+import { __esDecorate as c, __runInitializers as h } from "tslib";
+import { css as f, LitElement as v, isServer as p } from "lit";
+import { customElement as g, property as b } from "lit/decorators.js";
+import { sbbLiveAnnouncer as m } from "../core/a11y.js";
+import { SbbLanguageController as A } from "../core/controllers.js";
+import { i18nTimeInputChange as T, i18nTimeInvalid as y, i18nTimeMax as D, i18nTimeMaxLength as E } from "../core/i18n.js";
+import { SbbFormAssociatedInputMixin as V } from "../core/mixins.js";
+const w = f`:host{display:inline-flex;min-width:var(--sbb-time-input-max-width);max-width:var(--sbb-time-input-max-width);cursor:text;align-items:center}@media(forced-colors:active){:host{color:FieldText}}:host(:disabled){cursor:var(--sbb-cursor-default)}:host(:focus){text-overflow:initial!important}:host(:empty):after{content:attr(placeholder);color:var(--sbb-color-5);-webkit-text-fill-color:var(--sbb-color-5);opacity:1}@media(forced-colors:active){:host(:empty):after{color:GrayText}}`, S = /[0-9.:,\-;_hH]/, d = /[^0-9.:,\-;_hH]/g, x = /^([0-9]{1,2})([0-9]{2})$/, C = /^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;
+let M = (() => {
+  var a;
+  let _ = [g("sbb-time-input")], r, l = [], s, n = V(v), u = [], o;
+  return a = class extends n {
+    /**
+     * The value of the time input. Reflects the current text value
+     * of this input.
+     */
+    set value(e) {
+      e = typeof e == "string" ? e.replace(d, "").substring(0, 5) : "", this._tryParseValue(e), !p && !this.matches(":focus") && this.valueAsDate !== null && (e = this._formatTime()), super.value = e;
+    }
+    get value() {
+      return super.value ?? "";
+    }
+    /** Formats the current input's value as date. */
+    set valueAsDate(e) {
+      if (e instanceof Date && !isNaN(e.valueOf())) {
+        this._valueAsTime = {
+          hours: e.getHours(),
+          minutes: e.getMinutes()
+        };
+        const t = this._formatTime();
+        this.value !== t && (this.value = t);
+      } else
+        this._valueAsTime = null, this.value = "";
+    }
+    get valueAsDate() {
+      if (this._valueAsTime && this._isTimeValid(this._valueAsTime)) {
+        const e = /* @__PURE__ */ new Date(0);
+        return e.setHours(this._valueAsTime.hours), e.setMinutes(this._valueAsTime.minutes), e;
+      } else
+        return null;
+    }
+    constructor() {
+      super(), this._valueAsTime = h(this, u), this._language = new A(this), this.addEventListener?.("change", () => this._updateValueDateFormat(), { capture: !0 }), this.addEventListener?.("change", () => m.announce(T(this.value)[this._language.current])), this.addEventListener?.("keydown", (e) => this._preventCharInsert(e));
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.inputMode ||= "numeric", this.placeholder ||= "HH:MM";
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback();
+    }
+    updateFormValue() {
+      this._tryParseValue();
+      const e = this.valueAsDate !== null ? this._formatTime() : null;
+      this.internals.setFormValue(e, this.value);
+    }
+    _tryParseValue(e = this.value) {
+      this._valueCache?.[0] !== e && (this._valueAsTime = this._parseValue(e), this._valueCache = [e, this._valueAsTime ?? null]);
+    }
+    /** Validate input against the defined RegExps. */
+    _parseValue(e) {
+      const t = e?.trim();
+      if (!t)
+        return null;
+      const i = t.match(x) ?? t.match(C);
+      return i ? { hours: +i[1] || 0, minutes: +i[2] || 0 } : null;
+    }
+    _updateValueDateFormat() {
+      if (this.valueAsDate) {
+        const e = this._formatTime();
+        this.value !== e && (super.value = e);
+      }
+    }
+    _formatTime() {
+      const e = this.valueAsDate;
+      if (!e)
+        return "";
+      const t = String(e.getHours()).padStart(2, "0"), i = String(e.getMinutes()).padStart(2, "0");
+      return `${t}:${i}`;
+    }
+    preparePastedText(e) {
+      return e.replace(d, "").substring(0, 5 - (this.textContent?.length ?? 0));
+    }
+    shouldValidate(e) {
+      return super.shouldValidate(e) || ["valueAsDate", "min", "max", "dateFilter"].includes(e);
+    }
+    validate() {
+      super.validate(), this.value ? this._valueAsTime ? this._isTimeValid(this._valueAsTime) ? this._removeValidityErrors() : this.setValidityFlag("rangeOverflow", D[this.language.current]) : this.setValidityFlag("badInput", y[this.language.current]) : this._removeValidityErrors();
+    }
+    _removeValidityErrors() {
+      ["badInput", "rangeOverflow"].forEach((e) => this.removeValidityFlag(e));
+    }
+    /** Checks if values of hours and minutes are possible, to avoid non-existent times. */
+    _isTimeValid(e) {
+      return e.hours < 24 && e.minutes < 60;
+    }
+    /**  Only allow typing numbers and separator keys. */
+    _preventCharInsert(e) {
+      const t = [
+        "Backspace",
+        "Tab",
+        "Enter",
+        "ArrowUp",
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight",
+        "Home",
+        "End",
+        "PageUp",
+        "PageDown",
+        "Delete"
+      ];
+      e.ctrlKey || e.altKey || e.metaKey || t.includes(e.key) || S.test(e.key) && (this.value.length < 5 || this._hasSelection()) || (e.preventDefault(), this.value.length >= 5 && m.announce(E[this._language.current]));
+    }
+    _hasSelection() {
+      const e = window.getSelection()?.getRangeAt(0);
+      return !!e && e.startOffset !== e.endOffset;
+    }
+  }, s = a, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+    o = [b({ attribute: !1 })], c(a, null, o, { kind: "setter", name: "valueAsDate", static: !1, private: !1, access: { has: (t) => "valueAsDate" in t, set: (t, i) => {
+      t.valueAsDate = i;
+    } }, metadata: e }, null, u), c(null, r = { value: s }, _, { kind: "class", name: s.name, metadata: e }, null, l), s = r.value, e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), a.styles = w, h(s, l), s;
+})();
+export {
+  M as SbbTimeInputElement
+};

package/time-input.js

@@ -0,0 +1,4 @@
+import { SbbTimeInputElement as t } from "./time-input/time-input.component.js";
+export {
+  t as SbbTimeInputElement
+};

package/timetable-form/timetable-form/timetable-form.component.js

@@ -0,0 +1,19 @@
+import { __esDecorate as b, __runInitializers as i } from "tslib";
+import { css as m, LitElement as c, html as n } from "lit";
+import { customElement as u } from "lit/decorators.js";
+const d = m`:host{--sbb-timetable-form-background-color: var(--sbb-background-color-1);--sbb-timetable-form-border-radius: var(--sbb-border-radius-4x);border-radius:var(--sbb-timetable-form-border-radius);background-color:var(--sbb-timetable-form-background-color);display:flex;flex-direction:column}`;
+let y = (() => {
+  var t;
+  let s = [u("sbb-timetable-form")], a, l = [], e, o = c;
+  return t = class extends o {
+    render() {
+      return n`<slot></slot>`;
+    }
+  }, e = t, (() => {
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    b(null, a = { value: e }, s, { kind: "class", name: e.name, metadata: r }, null, l), e = a.value, r && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), t.styles = d, i(e, l), e;
+})();
+export {
+  y as SbbTimetableFormElement
+};

package/timetable-form/timetable-form-details/timetable-form-details.component.js

@@ -0,0 +1,19 @@
+import { __esDecorate as b, __runInitializers as o } from "tslib";
+import { css as d, LitElement as n, html as m } from "lit";
+import { customElement as c } from "lit/decorators.js";
+const f = d`:host{--sbb-timetable-form-details-padding-block: var(--sbb-spacing-fixed-1x);--sbb-timetable-form-details-padding-inline: var(--sbb-spacing-responsive-xxs);--sbb-timetable-form-details-horizontal-divider-height: 1.5rem;display:flex;flex-wrap:wrap;gap:var(--sbb-spacing-fixed-1x);border-block-start:var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);padding-block:var(--sbb-timetable-form-details-padding-block);padding-inline-start:calc(var(--sbb-size-icon-ui-small) + var(--sbb-spacing-responsive-xxxs));align-items:center}::slotted(sbb-form-field){--sbb-form-field-border-radius: var(--sbb-border-radius-6x);--sbb-form-field-outline-offset: -.3125rem}::slotted(sbb-divider[orientation=vertical]){height:var(--sbb-timetable-form-details-horizontal-divider-height)}::slotted(:last-child){margin-inline-end:var(--sbb-timetable-form-details-padding-inline)}`;
+let g = (() => {
+  var t;
+  let l = [c("sbb-timetable-form-details")], i, s = [], e, r = n;
+  return t = class extends r {
+    render() {
+      return m`<slot></slot>`;
+    }
+  }, e = t, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    b(null, i = { value: e }, l, { kind: "class", name: e.name, metadata: a }, null, s), e = i.value, a && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), t.styles = f, o(e, s), e;
+})();
+export {
+  g as SbbTimetableFormDetailsElement
+};

package/timetable-form/timetable-form-details.js

@@ -0,0 +1,4 @@
+import { SbbTimetableFormDetailsElement as t } from "./timetable-form-details/timetable-form-details.component.js";
+export {
+  t as SbbTimetableFormDetailsElement
+};

package/timetable-form/timetable-form-field/timetable-form-field.component.js

@@ -0,0 +1,32 @@
+import { __esDecorate as b, __runInitializers as c } from "tslib";
+import { css as f, isServer as m, html as i } from "lit";
+import { customElement as d } from "lit/decorators.js";
+import { SbbFormFieldElement as l } from "../../form-field/form-field.js";
+const u = f`:host{display:flex;--sbb-form-field-border-radius: var(--sbb-border-radius-6x);--sbb-form-field-outline-offset: -.3125rem;--sbb-timetable-form-field-route-icon-color: var(--sbb-color-2);--sbb-timetable-form-field-route-icon-background-color: var(--sbb-background-color-1)}:host(:first-of-type){--sbb-timetable-form-field-route-icon-rotate: 90deg}:host(:last-of-type){--sbb-timetable-form-field-route-icon-rotate: -90deg;--sbb-timetable-form-field-route-icon-translate: -.0625rem 0}:host(:where(:not(:last-of-type))) .sbb-form-field__wrapper:after{content:"";position:absolute;border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-border-color-4-inverted);inset-inline:var(--sbb-form-field-padding-inline);inset-block-end:0}.sbb-timetable-form-field__start-route-icon{align-self:center;margin-inline-start:var(--sbb-form-field-padding-inline);rotate:var(--sbb-timetable-form-field-route-icon-rotate);translate:var(--sbb-timetable-form-field-route-icon-translate)}.sbb-timetable-form-field__start-route-icon:after{--connecting-line-offset: .1875rem;--connecting-line-width: calc( (var(--sbb-form-field-min-height) - var(--sbb-icon-svg-height)) / 2 + var(--connecting-line-offset) );content:"";position:absolute;inset-block-start:50%;border-block-start:var(--sbb-border-width-1x) solid var(--sbb-timetable-form-field-route-icon-color);width:var(--connecting-line-width);margin-left:calc(var(--connecting-line-offset) * -1)}.sbb-timetable-form-field__via-route-icon{align-self:stretch;position:relative;width:var(--sbb-size-icon-ui-small);margin-inline-start:var(--sbb-form-field-padding-inline)}.sbb-timetable-form-field__via-route-icon:before{content:"";position:absolute;inset-inline-start:50%;height:100%;margin-inline-start:-.0625rem;border-inline-start:var(--sbb-border-width-1x) solid var(--sbb-timetable-form-field-route-icon-color)}.sbb-timetable-form-field__via-route-icon:after{content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%;width:.4375rem;height:.4375rem;border:var(--sbb-border-width-1x) solid var(--sbb-timetable-form-field-route-icon-color);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-timetable-form-field-route-icon-background-color);margin-inline-start:-.03125rem}.sbb-form-field__space-wrapper{flex-grow:1}`;
+let g = (() => {
+  var t;
+  let n = [d("sbb-timetable-form-field")], o, a = [], e, s = l;
+  return t = class extends s {
+    constructor() {
+      super(), this._routeIcon = !1, this.borderless = !0, this.floatingLabel = !0, this.width = "collapse", this.size = "l";
+    }
+    connectedCallback() {
+      super.connectedCallback(), !m && this.hydrationComplete.then(() => this._routeIcon = this.matches(":first-of-type, :last-of-type"));
+    }
+    render() {
+      return i`
+      ${this._routeIcon ? i` <sbb-icon
+            name="route-circle-start-small"
+            class="sbb-timetable-form-field__start-route-icon"
+          ></sbb-icon>` : i` <span class="sbb-timetable-form-field__via-route-icon"></span> `}
+      ${super.render()}
+    `;
+    }
+  }, e = t, (() => {
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
+    b(null, o = { value: e }, n, { kind: "class", name: e.name, metadata: r }, null, a), e = o.value, r && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), t.styles = [l.styles, u], c(e, a), e;
+})();
+export {
+  g as SbbTimetableFormFieldElement
+};

package/timetable-form/timetable-form-field.js

@@ -0,0 +1,4 @@
+import { SbbTimetableFormFieldElement as b } from "./timetable-form-field/timetable-form-field.component.js";
+export {
+  b as SbbTimetableFormFieldElement
+};

package/timetable-form/timetable-form-swap-button/timetable-form-swap-button.component.js

@@ -0,0 +1,41 @@
+import { __esDecorate as p, __runInitializers as f } from "tslib";
+import { customElement as d } from "lit/decorators.js";
+import { SbbSecondaryButtonElement as m } from "../../button/secondary-button.js";
+import { SbbLanguageController as v } from "../../core/controllers.js";
+import { i18nTimetableFormSwapButtonLabel as h } from "../../core/i18n.js";
+import { css as w } from "lit";
+const g = w`:host(:is(:state(timetable-form-context),[state--timetable-form-context])){--sbb-timetable-form-swap-button-margin-inline-end: var(--sbb-spacing-fixed-6x);--sbb-timetable-form-swap-button-translate: 0 -50%;--sbb-timetable-form-swap-button-z-index: 1;--sbb-timetable-form-swap-button-position: absolute;position:relative}.sbb-timetable-form-swap-button{position:var(--sbb-timetable-form-swap-button-position, relative);margin-inline-end:var(--sbb-timetable-form-swap-button-margin-inline-end);translate:var(--sbb-timetable-form-swap-button-translate);z-index:var(--sbb-timetable-form-swap-button-z-index);inset-inline-end:0}`;
+let z = (() => {
+  var a;
+  let u = [d("sbb-timetable-form-swap-button")], l, i = [], e, o = m;
+  return a = class extends o {
+    constructor() {
+      super(), this._languageController = new v(this), this.addEventListener("click", () => this._invertFieldValues());
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.toggleState("timetable-form-context", !!this.closest("sbb-timetable-form"));
+    }
+    willUpdate(t) {
+      super.willUpdate(t), this.internals.ariaLabel = h[this._languageController.current];
+    }
+    /**
+     * Search for `sbb-timetable-form-field` inputs, invert their values and dispatch the respective input and change events
+     */
+    _invertFieldValues() {
+      const t = this.closest("sbb-timetable-form"), b = Array.from(t?.querySelectorAll("sbb-timetable-form-field") || []), r = b.map((n) => n.inputElement?.value);
+      !t || r.length === 0 || r.every((n) => !n) || r.reverse().forEach((n, c) => {
+        const s = b[c].inputElement;
+        s instanceof HTMLInputElement && (s.value = n, s.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), s.dispatchEvent(new Event("change", { bubbles: !0 })));
+      });
+    }
+    renderIconName() {
+      return super.renderIconName() || "arrow-change-small";
+    }
+  }, e = a, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    p(null, l = { value: e }, u, { kind: "class", name: e.name, metadata: t }, null, i), e = l.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), a.styles = [m.styles, g], f(e, i), e;
+})();
+export {
+  z as SbbTimetableFormSwapButtonElement
+};

package/timetable-form/timetable-form-swap-button.js

@@ -0,0 +1,4 @@
+import { SbbTimetableFormSwapButtonElement as m } from "./timetable-form-swap-button/timetable-form-swap-button.component.js";
+export {
+  m as SbbTimetableFormSwapButtonElement
+};

package/timetable-form/timetable-form.js

@@ -0,0 +1,4 @@
+import { SbbTimetableFormElement as b } from "./timetable-form/timetable-form.component.js";
+export {
+  b as SbbTimetableFormElement
+};

package/timetable-form.css

@@ -0,0 +1,73 @@
+.sbb-timetable-form {
+  --sbb-timetable-form-content-max-width: 46.25rem;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  column-gap: var(--sbb-spacing-fixed-3x);
+  border-radius: var(--sbb-border-radius-4x);
+  padding-block: var(--sbb-spacing-fixed-10x) var(--sbb-spacing-responsive-l);
+  padding-inline: var(--sbb-spacing-fixed-5x);
+  background: linear-gradient(to bottom, var(--sbb-color-primary) 0 11.125rem, var(--sbb-background-color-3) 11.125rem 100%);
+}
+@media (max-width: calc(63.9375rem)) {
+  .sbb-timetable-form:has(sbb-signet) {
+    padding-block-start: var(--sbb-spacing-fixed-4x);
+  }
+}
+.sbb-timetable-form sbb-signet {
+  width: var(--sbb-spacing-fixed-16x);
+  align-self: end;
+  margin-block-end: var(--sbb-spacing-fixed-2x);
+  margin-inline: 0;
+}
+@media (min-width: calc(64rem)) {
+  .sbb-timetable-form sbb-signet {
+    position: absolute;
+    inset-block-start: var(--sbb-spacing-fixed-6x);
+    inset-inline-end: var(--sbb-spacing-fixed-6x);
+  }
+}
+.sbb-timetable-form > * {
+  margin-inline: auto;
+  max-width: var(--sbb-timetable-form-content-max-width);
+  width: 100%;
+}
+
+sbb-timetable-form sbb-date-input {
+  min-width: 8.3125rem;
+}
+sbb-timetable-form .sbb-timetable-form-block {
+  --sbb-form-field-focus-underline-z-index: 1;
+  width: 100%;
+  position: relative;
+}
+sbb-timetable-form .sbb-timetable-form-block::after {
+  content: "";
+  position: absolute;
+  border-block-end: var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);
+  inset-inline: var(--sbb-form-field-padding-inline);
+  inset-block-end: 0;
+}
+sbb-timetable-form .sbb-timetable-form-block sbb-datepicker-toggle {
+  margin-inline-end: var(--sbb-spacing-fixed-6x);
+}
+@media (max-width: calc(37.4375rem)) {
+  sbb-timetable-form .sbb-timetable-form-mobile-block {
+    --sbb-form-field-focus-underline-z-index: 1;
+    width: 100%;
+    position: relative;
+  }
+  sbb-timetable-form .sbb-timetable-form-mobile-block::after {
+    content: "";
+    position: absolute;
+    border-block-end: var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);
+    inset-inline: var(--sbb-form-field-padding-inline);
+    inset-block-end: 0;
+  }
+  sbb-timetable-form .sbb-timetable-form-mobile-block sbb-datepicker-toggle {
+    margin-inline-end: var(--sbb-spacing-fixed-6x);
+  }
+  sbb-timetable-form .sbb-timetable-form-mobile-hidden {
+    display: none;
+  }
+}

package/timetable-form.js

@@ -0,0 +1,10 @@
+import { SbbTimetableFormElement as t } from "./timetable-form/timetable-form/timetable-form.component.js";
+import { SbbTimetableFormDetailsElement as b } from "./timetable-form/timetable-form-details/timetable-form-details.component.js";
+import { SbbTimetableFormFieldElement as l } from "./timetable-form/timetable-form-field/timetable-form-field.component.js";
+import { SbbTimetableFormSwapButtonElement as i } from "./timetable-form/timetable-form-swap-button/timetable-form-swap-button.component.js";
+export {
+  b as SbbTimetableFormDetailsElement,
+  t as SbbTimetableFormElement,
+  l as SbbTimetableFormFieldElement,
+  i as SbbTimetableFormSwapButtonElement
+};

package/timetable-occupancy/timetable-occupancy.component.js

@@ -0,0 +1,76 @@
+var x = (s) => {
+  throw TypeError(s);
+};
+var z = (s, t, a) => t.has(s) || x("Cannot " + a);
+var u = (s, t, a) => (z(s, t, "read from private field"), a ? a.call(s) : t.get(s)), m = (s, t, a) => t.has(s) ? x("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, a), o = (s, t, a, i) => (z(s, t, "write to private field"), i ? i.call(s, a) : t.set(s, a), a);
+import { __runInitializers as b, __esDecorate as y } from "tslib";
+import { css as S, LitElement as $, nothing as k, html as f } from "lit";
+import { customElement as E, property as w } from "lit/decorators.js";
+import { SbbLanguageController as I } from "../core/controllers.js";
+import { i18nClass as D } from "../core/i18n.js";
+import { SbbNegativeMixin as j } from "../core/mixins.js";
+import { boxSizingStyles as L } from "../core/styles.js";
+import "../screen-reader-only.js";
+import "../timetable-occupancy-icon.js";
+const T = S`:host{display:inline-block;--sbb-timetable-occupancy-color: var(--sbb-color-2);--sbb-icon-svg-width: .890625rem;--sbb-icon-svg-height: v0.75rem}@media(min-width:64rem){:host{--sbb-icon-svg-width: 1.1875rem;--sbb-icon-svg-height: v1rem}}:host([negative]){--sbb-timetable-occupancy-color: var(--sbb-color-2-negative)}.sbb-timetable-occupancy__list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;align-items:center;flex-wrap:nowrap;gap:var(--sbb-spacing-fixed-2x)}.sbb-timetable-occupancy__list-item{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--sbb-spacing-fixed-1x)}.sbb-timetable-occupancy__list-item-class{--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);line-height:1;color:var(--sbb-timetable-occupancy-color)}.sbb-timetable-occupancy__list-item-icon{display:flex}`;
+let Q = (() => {
+  var l, r, n;
+  let s = [E("sbb-timetable-occupancy")], t, a = [], i, h = j($), d, _ = [], g = [], O, C = [], v = [];
+  return n = class extends h {
+    constructor() {
+      super(...arguments);
+      m(this, l);
+      m(this, r);
+      o(this, l, b(this, _, null)), o(this, r, (b(this, g), b(this, C, null))), this._language = (b(this, v), new I(this));
+    }
+    /** Occupancy for first class wagons. */
+    get firstClassOccupancy() {
+      return u(this, l);
+    }
+    set firstClassOccupancy(c) {
+      o(this, l, c);
+    }
+    /** Occupancy for second class wagons. */
+    get secondClassOccupancy() {
+      return u(this, r);
+    }
+    set secondClassOccupancy(c) {
+      o(this, r, c);
+    }
+    render() {
+      return f` ${(this.firstClassOccupancy || this.secondClassOccupancy) && f`
+      <ul
+        class="sbb-timetable-occupancy__list"
+        role=${!this.firstClassOccupancy || !this.secondClassOccupancy ? "presentation" : k}
+      >
+        ${[this.firstClassOccupancy, this.secondClassOccupancy].map((c, e) => c && f`
+              <li class="sbb-timetable-occupancy__list-item">
+                <span class="sbb-timetable-occupancy__list-item-class" aria-hidden="true">
+                  ${this.firstClassOccupancy && e === 0 ? "1" : "2"}.
+                </span>
+                <sbb-screen-reader-only>
+                  ${`${D[this.firstClassOccupancy && e === 0 ? "first" : "second"][this._language.current]}.`}
+                </sbb-screen-reader-only>
+                <sbb-timetable-occupancy-icon
+                  class="sbb-timetable-occupancy__list-item-icon"
+                  ?negative=${this.negative}
+                  .occupancy=${c}
+                >
+                </sbb-timetable-occupancy-icon>
+              </li>
+            `)}
+      </ul>
+    `}`;
+    }
+  }, l = new WeakMap(), r = new WeakMap(), i = n, (() => {
+    const c = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
+    d = [w({ attribute: "first-class-occupancy" })], O = [w({ attribute: "second-class-occupancy" })], y(n, null, d, { kind: "accessor", name: "firstClassOccupancy", static: !1, private: !1, access: { has: (e) => "firstClassOccupancy" in e, get: (e) => e.firstClassOccupancy, set: (e, p) => {
+      e.firstClassOccupancy = p;
+    } }, metadata: c }, _, g), y(n, null, O, { kind: "accessor", name: "secondClassOccupancy", static: !1, private: !1, access: { has: (e) => "secondClassOccupancy" in e, get: (e) => e.secondClassOccupancy, set: (e, p) => {
+      e.secondClassOccupancy = p;
+    } }, metadata: c }, C, v), y(null, t = { value: i }, s, { kind: "class", name: i.name, metadata: c }, null, a), i = t.value, c && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: c });
+  })(), n.styles = [L, T], b(i, a), i;
+})();
+export {
+  Q as SbbTimetableOccupancyElement
+};

package/timetable-occupancy-icon/timetable-occupancy-icon.component.js

@@ -0,0 +1,61 @@
+var d = (t) => {
+  throw TypeError(t);
+};
+var p = (t, a, s) => a.has(t) || d("Cannot " + s);
+var _ = (t, a, s) => (p(t, a, "read from private field"), s ? s.call(t) : a.get(t)), y = (t, a, s) => a.has(t) ? d("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(t) : a.set(t, s), l = (t, a, s, c) => (p(t, a, "write to private field"), c ? c.call(t, s) : a.set(t, s), s);
+import { __runInitializers as n, __esDecorate as f } from "tslib";
+import { customElement as A, property as C } from "lit/decorators.js";
+import { SbbLanguageController as L, SbbMediaMatcherController as M, SbbMediaQueryForcedColors as g, SbbDarkModeController as w } from "../core/controllers.js";
+import { i18nOccupancy as I } from "../core/i18n.js";
+import { SbbNegativeMixin as k } from "../core/mixins.js";
+import { SbbIconBase as v } from "../icon.js";
+import { css as N } from "lit";
+const x = N`@media(forced-colors:active)and (prefers-color-scheme:light){:host svg{filter:invert(1)}}`;
+let H = (() => {
+  var o, i;
+  let t = [A("sbb-timetable-occupancy-icon")], a, s = [], c, u = k(v), h, m = [], b = [];
+  return i = class extends u {
+    constructor() {
+      super(...arguments);
+      y(this, o);
+      l(this, o, n(this, m, "none")), this._language = (n(this, b), new L(this).withHandler(() => this._setAriaLabel())), this._mediaMatcher = new M(this, {
+        [g]: (e) => {
+          this._forcedColors = e, this._setNameAndAriaLabel();
+        }
+      }), this._darkModeController = new w(this, () => this._setNameAndAriaLabel()), this._forcedColors = this._mediaMatcher.matches(g) ?? !1;
+    }
+    /** Wagon occupancy. */
+    get occupancy() {
+      return _(this, o);
+    }
+    set occupancy(e) {
+      l(this, o, e);
+    }
+    async _setNameAndAriaLabel() {
+      if (!this.occupancy)
+        return;
+      let e = `utilization-${this.occupancy}`;
+      this._forcedColors ? e += "-high-contrast" : (this.negative || this._darkModeController.matches()) && (e += "-negative"), await this.loadSvgIcon(e);
+    }
+    async fetchSvgIcon(e, r) {
+      return this._setAriaLabel(), super.fetchSvgIcon(e, r);
+    }
+    _setAriaLabel() {
+      this.internals.ariaLabel = I[this.occupancy]?.[this._language.current];
+    }
+    connectedCallback() {
+      super.connectedCallback(), this._setNameAndAriaLabel();
+    }
+    willUpdate(e) {
+      super.willUpdate(e), (e.has("occupancy") || e.has("negative")) && this._setNameAndAriaLabel();
+    }
+  }, o = new WeakMap(), c = i, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
+    h = [C()], f(i, null, h, { kind: "accessor", name: "occupancy", static: !1, private: !1, access: { has: (r) => "occupancy" in r, get: (r) => r.occupancy, set: (r, S) => {
+      r.occupancy = S;
+    } }, metadata: e }, m, b), f(null, a = { value: c }, t, { kind: "class", name: c.name, metadata: e }, null, s), c = a.value, e && Object.defineProperty(c, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), i.styles = [v.styles, x], n(c, s), c;
+})();
+export {
+  H as SbbTimetableOccupancyIconElement
+};

package/timetable-occupancy-icon.js

@@ -0,0 +1,4 @@
+import { SbbTimetableOccupancyIconElement as b } from "./timetable-occupancy-icon/timetable-occupancy-icon.component.js";
+export {
+  b as SbbTimetableOccupancyIconElement
+};

package/timetable-occupancy.js

@@ -0,0 +1,4 @@
+import { SbbTimetableOccupancyElement as c } from "./timetable-occupancy/timetable-occupancy.component.js";
+export {
+  c as SbbTimetableOccupancyElement
+};

package/title/title-base.js

@@ -0,0 +1,53 @@
+var d = (e) => {
+  throw TypeError(e);
+};
+var z = (e, t, l) => t.has(e) || d("Cannot " + l);
+var h = (e, t, l) => (z(e, t, "read from private field"), l ? l.call(e) : t.get(e)), u = (e, t, l) => t.has(e) ? d("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, l), c = (e, t, l, r) => (z(e, t, "write to private field"), r ? r.call(e, l) : t.set(e, l), l);
+import { __esDecorate as p, __runInitializers as o } from "tslib";
+import { css as y, LitElement as L } from "lit";
+import { property as _ } from "lit/decorators.js";
+import { html as x } from "lit/static-html.js";
+import { SbbElementInternalsMixin as w } from "../core/mixins.js";
+const k = y`:host{margin-block:var(--sbb-title-margin-block, 0);margin-inline:0;font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height, var(--sbb-typo-line-height-heading));letter-spacing:var(--sbb-typo-letter-spacing-heading);font-size:var(--sbb-title-font-size);--sbb-title-text-color-normal: var(--sbb-title-text-color-normal-override, var(--sbb-color-3));display:block;color:var(--sbb-title-text-color-normal)}:host([id]){scroll-margin-block-start:var(--sbb-spacing-fixed-10x)}:host(:where([level="1"]:not([visual-level]),[visual-level="1"])){--sbb-title-font-size: var(--sbb-title-font-size-level-1-lean, var(--sbb-heading-font-size-1))}:host(:where([level="2"]:not([visual-level]),[visual-level="2"])){--sbb-title-font-size: var(--sbb-title-font-size-level-2-lean, var(--sbb-heading-font-size-2))}:host(:where([level="3"]:not([visual-level]),[visual-level="3"])){--sbb-title-font-size: var(--sbb-title-font-size-level-3-lean, var(--sbb-heading-font-size-3))}:host(:where([level="4"]:not([visual-level]),[visual-level="4"])){--sbb-title-font-size: var(--sbb-title-font-size-level-4-lean, var(--sbb-heading-font-size-4))}:host(:where([level="5"]:not([visual-level]),[visual-level="5"])){--sbb-title-font-size: var(--sbb-title-font-size-level-5-lean, var(--sbb-heading-font-size-5))}:host(:where([level="6"]:not([visual-level]),[visual-level="6"])){--sbb-title-font-size: var(--sbb-title-font-size-level-6-lean, var(--sbb-heading-font-size-6));--sbb-title-line-height: var(--sbb-typo-line-height-text)}`;
+let M = (() => {
+  var v, n, a;
+  let e = w(L), t, l = [], r = [], f, m = [], g = [];
+  return a = class extends e {
+    constructor() {
+      super(...arguments);
+      u(this, v, o(this, l, "1"));
+      u(this, n, (o(this, r), o(this, m, null)));
+      o(this, g);
+    }
+    /** Title level */
+    get level() {
+      return h(this, v);
+    }
+    set level(s) {
+      c(this, v, s);
+    }
+    /** Visual level for the title. */
+    get visualLevel() {
+      return h(this, n);
+    }
+    set visualLevel(s) {
+      c(this, n, s);
+    }
+    willUpdate(s) {
+      super.willUpdate(s), s.has("level") && (this.internals.ariaLevel = this.level);
+    }
+    render() {
+      return x`<slot></slot>`;
+    }
+  }, v = new WeakMap(), n = new WeakMap(), (() => {
+    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;
+    t = [_({ reflect: !0 })], f = [_({ attribute: "visual-level", reflect: !0 })], p(a, null, t, { kind: "accessor", name: "level", static: !1, private: !1, access: { has: (i) => "level" in i, get: (i) => i.level, set: (i, b) => {
+      i.level = b;
+    } }, metadata: s }, l, r), p(a, null, f, { kind: "accessor", name: "visualLevel", static: !1, private: !1, access: { has: (i) => "visualLevel" in i, get: (i) => i.visualLevel, set: (i, b) => {
+      i.visualLevel = b;
+    } }, metadata: s }, m, g), s && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
+  })(), a.role = "heading", a.styles = k, a;
+})();
+export {
+  M as SbbTitleBase
+};