@sbb-esta/lyne-elements 5.0.0-next.3 → 5.0.1

package/teaser/_teaser.global.scss

@@ -0,0 +1,51 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-teaser-scale-hover: 1.02;
+  --sbb-teaser-description-color: light-dark(var(--sbb-color-granite), var(--sbb-color-silver));
+  --sbb-teaser-flex-direction: row;
+  --sbb-teaser-align-items: center;
+  --sbb-teaser-font-size: var(--sbb-text-font-size-s);
+  --sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
+  --sbb-teaser-border-radius: var(--sbb-border-radius-4x);
+  --sbb-teaser-image-width: #{sbb.px-to-rem-build(300)};
+}
+
+@mixin rules {
+  // Target the slotted `sbb-image` which are generally wrapped by a <figure> (therefore are not reachable with the :slotted)
+  // Apply the brightness effect on mouse hover
+  :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) {
+    --sbb-teaser-image-brightness-hover: var(--sbb-hover-image-brightness);
+    --sbb-teaser-image-animation-duration: var(
+      --sbb-disable-animation-duration,
+      var(--sbb-animation-duration-4x)
+    );
+    --sbb-teaser-image-animation-easing: var(--sbb-animation-easing);
+
+    &:hover {
+      @include sbb.hover-mq($hover: true) {
+        --sbb-teaser-image-brightness: var(--sbb-teaser-image-brightness-hover);
+      }
+    }
+
+    :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+      // Although only the teaser has a scale property, we do it here, because this rule is
+      // more specific and overrides would not be respected.
+      will-change: filter, scale;
+      filter: brightness(var(--sbb-teaser-image-brightness, 1));
+      transition:
+        filter,
+        scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
+    }
+  }
+
+  sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+    --sbb-image-object-fit: cover;
+    --sbb-image-aspect-ratio: 4 / 3;
+
+    // The transition of the scale is done by the global rules in core.scss
+    scale: var(--sbb-teaser-scale, 1);
+  }
+}

package/teaser/teaser.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../teaser.component-BOqCERR7.js";
+import { t as e } from "../teaser.component-CkIii0_d.js";
 export { e as SbbTeaserElement };

package/teaser-hero/_teaser-hero.global.scss

@@ -0,0 +1,29 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-teaser-hero-link-font-weight: 400;
+}
+
+@mixin rules {
+  sbb-teaser-hero {
+    :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+      --sbb-image-aspect-ratio: 1 / 1;
+
+      border-radius: 0;
+
+      @include sbb.mq($from: small) {
+        --sbb-image-aspect-ratio: 16 / 9;
+      }
+    }
+
+    img:not(.sbb-figure-overlap-image) {
+      display: block;
+      align-self: stretch;
+      width: 100%;
+    }
+  }
+
+  // Some rules are shared with sbb-teaser and published there.
+}

package/teaser-hero/teaser-hero.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../teaser-hero.component-mv6HL4vm.js";
+import { t as e } from "../teaser-hero.component-BNV8sgb6.js";
 export { e as SbbTeaserHeroElement };

package/teaser-hero.js

@@ -1,4 +1,4 @@
-import { t as e } from "./teaser-hero.component-mv6HL4vm.js";
+import { t as e } from "./teaser-hero.component-BNV8sgb6.js";
 import "./teaser-hero.pure.js";
 //#region src/elements/teaser-hero.ts
 e.define();

package/teaser-hero.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./teaser-hero.component-mv6HL4vm.js";
+import { t as e } from "./teaser-hero.component-BNV8sgb6.js";
 export { e as SbbTeaserHeroElement };

package/teaser-panel/_teaser-panel.global.scss

@@ -0,0 +1,33 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-panel-width: #{sbb.px-to-rem-build(223)};
+  --sbb-panel-inner-height: #{sbb.px-to-rem-build(167)};
+  --sbb-panel-triangle-height: #{sbb.px-to-rem-build(33)};
+  --sbb-panel-line-height: var(--sbb-typo-line-height-heading);
+  --sbb-panel-font-size: var(--sbb-typo-scale-1-5x);
+  --sbb-panel-font-weight: 300;
+  --sbb-panel-color: var(--sbb-color-1-negative);
+  --sbb-panel-background-color: color-mix(in srgb, var(--sbb-color-primary) 90%, transparent);
+  --sbb-panel-background-color-hover: var(--sbb-color-primary);
+  --sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);
+  --sbb-panel-gap: var(--sbb-spacing-responsive-xs);
+  --sbb-panel-animation-easing: var(--sbb-animation-easing);
+}
+
+@mixin breakpoint-large {
+  --sbb-panel-width: #{sbb.px-to-rem-build(321)};
+  --sbb-panel-inner-height: #{sbb.px-to-rem-build(240.11)};
+  --sbb-panel-triangle-height: #{sbb.px-to-rem-build(47.45)};
+  --sbb-panel-font-size: var(--sbb-typo-scale-2x);
+}
+
+@mixin breakpoint-ultra {
+  --sbb-panel-width: #{sbb.px-to-rem-build(428)};
+  --sbb-panel-inner-height: #{sbb.px-to-rem-build(320.38)};
+  --sbb-panel-triangle-height: #{sbb.px-to-rem-build(63.31)};
+  --sbb-panel-font-size: var(--sbb-typo-scale-2-5x);
+  --sbb-panel-line-height: 1.2;
+}

package/teaser-panel/teaser-panel.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../teaser-panel.component-qRmy2lbz.js";
+import { t as e } from "../teaser-panel.component-Bfhra0zG.js";
 export { e as SbbTeaserPanelElement };

package/teaser-panel.js

@@ -1,4 +1,4 @@
-import { t as e } from "./teaser-panel.component-qRmy2lbz.js";
+import { t as e } from "./teaser-panel.component-Bfhra0zG.js";
 import "./teaser-panel.pure.js";
 //#region src/elements/teaser-panel.ts
 e.define();

package/teaser-panel.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./teaser-panel.component-qRmy2lbz.js";
+import { t as e } from "./teaser-panel.component-Bfhra0zG.js";
 export { e as SbbTeaserPanelElement };

package/teaser-product/_teaser-product.global.scss

@@ -0,0 +1,52 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --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-border-radius: var(--sbb-border-radius-4x);
+  --sbb-teaser-product-min-height: #{sbb.px-to-rem-build(600)};
+  --sbb-teaser-product-background-gradient-start: 25%;
+  --sbb-teaser-product-background-gradient-end: 75%;
+  --sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-s);
+  --sbb-teaser-product-container-padding-inline: var(--sbb-spacing-responsive-s);
+  --sbb-teaser-product-container-spacing: var(--sbb-spacing-responsive-l);
+  --sbb-teaser-product-content-color: var(--sbb-color-4);
+  --sbb-teaser-product-footer-color: light-dark(
+    var(--sbb-color-anthracite),
+    var(--sbb-color-cloud)
+  );
+  --sbb-teaser-product-footer-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-teaser-product-footer-padding-block-start: var(--sbb-spacing-responsive-s);
+  --sbb-teaser-product-footer-padding-block-end: 0;
+}
+
+@mixin breakpoint-large {
+  --sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-l) 0;
+  --sbb-teaser-product-container-padding-inline: var(--sbb-spacing-responsive-xl);
+  --sbb-teaser-product-content-align-content: center;
+  --sbb-teaser-product-footer-padding-block-start: var(--sbb-spacing-responsive-xs);
+  --sbb-teaser-product-footer-padding-block-end: var(--sbb-spacing-responsive-xs);
+  --sbb-teaser-product-footer-min-height: var(--sbb-teaser-product-container-spacing);
+}
+
+@mixin rules {
+  :is(sbb-teaser-product, sbb-teaser-product-static) {
+    :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+      border-radius: 0; // Reset sbb-image border radius in order to control it from teaser product.
+
+      --sbb-image-object-fit: cover;
+      --sbb-image-aspect-ratio: 16 / 9;
+    }
+
+    img:not(.sbb-figure-overlap-image) {
+      place-self: stretch;
+    }
+  }
+
+  // Some rules are shared with sbb-teaser and published there.
+}

package/teaser-product/common/teaser-product-common.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../teaser-product-common-J1KZ2Hlw.js";
+import { t as e } from "../../teaser-product-common-D7kWWxU-.js";
 export { e as SbbTeaserProductCommonElementMixin };

package/teaser-product/teaser-product/teaser-product.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../teaser-product.component-BcleFVcu.js";
+import { t as e } from "../../teaser-product.component-DHu47PGd.js";
 export { e as SbbTeaserProductElement };

package/teaser-product.js

@@ -1,6 +1,6 @@
-import { t as e } from "./teaser-product-common-J1KZ2Hlw.js";
+import { t as e } from "./teaser-product-common-D7kWWxU-.js";
 import { SbbTeaserProductStaticElement as t } from "./teaser-product/teaser-product-static/teaser-product-static.component.js";
-import { t as n } from "./teaser-product.component-BcleFVcu.js";
+import { t as n } from "./teaser-product.component-DHu47PGd.js";
 import "./teaser-product.pure.js";
 n.define(), t.define();
 //#endregion

package/teaser-product.pure.js

@@ -1,4 +1,4 @@
-import { t as e } from "./teaser-product-common-J1KZ2Hlw.js";
+import { t as e } from "./teaser-product-common-D7kWWxU-.js";
 import { SbbTeaserProductStaticElement as t } from "./teaser-product/teaser-product-static/teaser-product-static.component.js";
-import { t as n } from "./teaser-product.component-BcleFVcu.js";
+import { t as n } from "./teaser-product.component-DHu47PGd.js";
 export { e as SbbTeaserProductCommonElementMixin, n as SbbTeaserProductElement, t as SbbTeaserProductStaticElement };

package/teaser.js

@@ -1,4 +1,4 @@
-import { t as e } from "./teaser.component-BOqCERR7.js";
+import { t as e } from "./teaser.component-CkIii0_d.js";
 import "./teaser.pure.js";
 //#region src/elements/teaser.ts
 e.define();

package/teaser.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./teaser.component-BOqCERR7.js";
+import { t as e } from "./teaser.component-CkIii0_d.js";
 export { e as SbbTeaserElement };

package/time-input/_time-input.global.scss

@@ -0,0 +1,11 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-time-input-max-width: #{sbb.px-to-rem-build(58)};
+}
+
+@mixin breakpoint-large {
+  --sbb-time-input-max-width: #{sbb.px-to-rem-build(65)};
+}

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

@@ -1,2 +1,2 @@
-import { t as e } from "../time-input.component-Dw8pPYDK.js";
+import { t as e } from "../time-input.component-j2vUlNKx.js";
 export { e as SbbTimeInputElement };

package/{time-input.component-Dw8pPYDK.js → time-input.component-j2vUlNKx.js}

@@ -34,19 +34,17 @@ var p = ":host{display:inline-flex;min-width:var(--sbb-time-input-max-width);max
 			this.styles = [r(p)];
 		}
 		set value(e) {
-			e = typeof e == "string" ? e.replace(h, "").substring(0, 5) : "", this._tryParseValue(e), !n && !this.matches(":focus") && this.valueAsDate !== null && (e = this._formatTime()), super.value = e;
+			e = typeof e == "string" ? e.replace(h, "").substring(0, 5) : "", this._tryParseValue(e), !n && !this.isSelected() && this.valueAsDate !== null && (e = this._formatTime()), super.value = e;
 		}
 		get value() {
 			return super.value ?? "";
 		}
 		set valueAsDate(e) {
-			if (e instanceof Date && !isNaN(e.valueOf())) {
-				this._valueAsTime = {
-					hours: e.getHours(),
-					minutes: e.getMinutes()
-				};
-				let t = this._formatTime();
-				this.value !== t && (this.value = t);
+			let t = this._toTime(e);
+			if (!(this.isSelected() && (t === null || this._isSameTime(t, this._parseValue(this.value))))) if (t) {
+				this._valueAsTime = t;
+				let e = this._formatTime();
+				this.value !== e && (this.value = e);
 			} else this._valueAsTime = null, this.value = "";
 		}
 		get valueAsDate() {
@@ -81,6 +79,15 @@ var p = ":host{display:inline-flex;min-width:var(--sbb-time-input-max-width);max
 				minutes: +n[2] || 0
 			} : null;
 		}
+		_toTime(e) {
+			return e instanceof Date && !isNaN(e.valueOf()) ? {
+				hours: e.getHours(),
+				minutes: e.getMinutes()
+			} : null;
+		}
+		_isSameTime(e, t) {
+			return !!(e == t || e && t && e.hours === t.hours && e.minutes === t.minutes);
+		}
 		_updateValueDateFormat() {
 			if (this.valueAsDate) {
 				let e = this._formatTime();

package/time-input.js

@@ -1,4 +1,4 @@
-import { t as e } from "./time-input.component-Dw8pPYDK.js";
+import { t as e } from "./time-input.component-j2vUlNKx.js";
 import "./time-input.pure.js";
 //#region src/elements/time-input.ts
 e.define();

package/time-input.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./time-input.component-Dw8pPYDK.js";
+import { t as e } from "./time-input.component-j2vUlNKx.js";
 export { e as SbbTimeInputElement };

package/timetable-form/_timetable-form.global.scss

@@ -0,0 +1,107 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-timetable-form-background-color: var(--sbb-background-color-1);
+  --sbb-timetable-form-border-radius: var(--sbb-border-radius-4x);
+  --sbb-timetable-form-details-border-block-start: var(--sbb-border-width-1x) solid
+    var(--sbb-border-color-4-inverted);
+  --sbb-timetable-form-details-gap: var(--sbb-spacing-fixed-1x);
+  --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;
+  --sbb-timetable-form-field-route-icon-color: var(--sbb-color-2);
+  --sbb-timetable-form-field-route-icon-background-color: var(--sbb-background-color-1);
+  --sbb-timetable-form-field-route-via-icon-width: var(--sbb-size-icon-ui-small);
+  --sbb-timetable-form-field-route-via-after-dimension: #{sbb.px-to-rem-build(7)};
+}
+
+@mixin rules {
+  .sbb-timetable-form {
+    --sbb-timetable-form-content-max-width: #{sbb.px-to-rem-build(740)};
+
+    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 #{sbb.px-to-rem-build(178)},
+      var(--sbb-background-color-3) #{sbb.px-to-rem-build(178)} 100%
+    );
+
+    @include sbb.mq($to: large) {
+      &:has(sbb-signet) {
+        padding-block-start: var(--sbb-spacing-fixed-4x);
+      }
+    }
+
+    sbb-signet {
+      width: var(--sbb-spacing-fixed-16x);
+      align-self: end;
+      margin-block-end: var(--sbb-spacing-fixed-2x);
+      margin-inline: 0;
+
+      @include sbb.mq($from: large) {
+        position: absolute;
+        inset-block-start: var(--sbb-spacing-fixed-6x);
+        inset-inline-end: var(--sbb-spacing-fixed-6x);
+      }
+    }
+
+    & > * {
+      margin-inline: auto;
+      max-width: var(--sbb-timetable-form-content-max-width);
+      width: 100%;
+    }
+  }
+
+  sbb-timetable-form {
+    sbb-date-input {
+      min-width: #{sbb.px-to-rem-build(133)}; // From FIGMA spec
+    }
+
+    :is(.sbb-timetable-form-block, .sbb-timetable-form-mobile-block) {
+      --sbb-form-field-focus-underline-z-index: 1;
+
+      width: 100%;
+      position: relative;
+
+      &::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-datepicker-toggle {
+        margin-inline-end: var(--sbb-spacing-fixed-6x);
+      }
+    }
+
+    @include sbb.mq($from: small) {
+      .sbb-timetable-form-mobile-block {
+        width: unset;
+
+        &::after {
+          display: none;
+        }
+
+        sbb-datepicker-toggle {
+          margin-inline-end: unset;
+        }
+      }
+    }
+
+    @include sbb.mq($to: small) {
+      .sbb-timetable-form-mobile-hidden {
+        display: none;
+      }
+    }
+  }
+}

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

@@ -1,2 +1,2 @@
-import { t as e } from "../../timetable-form.component-DVps6baq.js";
+import { t as e } from "../../timetable-form.component-Crq-rb5Z.js";
 export { e as SbbTimetableFormElement };

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

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

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

@@ -1,2 +1,2 @@
-import { t as e } from "../../timetable-form-field.component-Cya8n2Ms.js";
+import { t as e } from "../../timetable-form-field.component-BPKgSLQb.js";
 export { e as SbbTimetableFormFieldElement };

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

@@ -1,2 +1,2 @@
-import { t as e } from "../../timetable-form-swap-button.component-rI_0UYJw.js";
+import { t as e } from "../../timetable-form-swap-button.component-DgUiFKbA.js";
 export { e as SbbTimetableFormSwapButtonElement };

package/timetable-form.js

@@ -1,7 +1,7 @@
-import { t as e } from "./timetable-form-details.component-0c6h6shd.js";
-import { t } from "./timetable-form-field.component-Cya8n2Ms.js";
-import { t as n } from "./timetable-form-swap-button.component-rI_0UYJw.js";
-import { t as r } from "./timetable-form.component-DVps6baq.js";
+import { t as e } from "./timetable-form-details.component-BTRh4w9g.js";
+import { t } from "./timetable-form-field.component-BPKgSLQb.js";
+import { t as n } from "./timetable-form-swap-button.component-DgUiFKbA.js";
+import { t as r } from "./timetable-form.component-Crq-rb5Z.js";
 import "./timetable-form.pure.js";
 r.define(), e.define(), t.define(), n.define();
 //#endregion

package/timetable-form.pure.js

@@ -1,5 +1,5 @@
-import { t as e } from "./timetable-form-details.component-0c6h6shd.js";
-import { t } from "./timetable-form-field.component-Cya8n2Ms.js";
-import { t as n } from "./timetable-form-swap-button.component-rI_0UYJw.js";
-import { t as r } from "./timetable-form.component-DVps6baq.js";
+import { t as e } from "./timetable-form-details.component-BTRh4w9g.js";
+import { t } from "./timetable-form-field.component-BPKgSLQb.js";
+import { t as n } from "./timetable-form-swap-button.component-DgUiFKbA.js";
+import { t as r } from "./timetable-form.component-Crq-rb5Z.js";
 export { e as SbbTimetableFormDetailsElement, r as SbbTimetableFormElement, t as SbbTimetableFormFieldElement, n as SbbTimetableFormSwapButtonElement };

package/timetable-occupancy/_timetable-occupancy.global.scss

@@ -0,0 +1,10 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-timetable-occupancy-color: var(--sbb-color-2);
+  --sbb-timetable-occupancy-font-size: var(--sbb-text-font-size-s);
+  --sbb-timetable-occupancy-list-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-timetable-occupancy-item-gap: var(--sbb-spacing-fixed-1x);
+}

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

@@ -1,2 +1,2 @@
-import { t as e } from "../timetable-occupancy.component-DGQ20zH1.js";
+import { t as e } from "../timetable-occupancy.component-B040dznI.js";
 export { e as SbbTimetableOccupancyElement };

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

@@ -1,2 +1,2 @@
-import { t as e } from "../timetable-occupancy-icon.component-ABh1bz-X.js";
+import { t as e } from "../timetable-occupancy-icon.component-9RhBPwBN.js";
 export { e as SbbTimetableOccupancyIconElement };

package/timetable-occupancy-icon.js

@@ -1,4 +1,4 @@
-import { t as e } from "./timetable-occupancy-icon.component-ABh1bz-X.js";
+import { t as e } from "./timetable-occupancy-icon.component-9RhBPwBN.js";
 import "./timetable-occupancy-icon.pure.js";
 //#region src/elements/timetable-occupancy-icon.ts
 e.define();

package/timetable-occupancy-icon.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./timetable-occupancy-icon.component-ABh1bz-X.js";
+import { t as e } from "./timetable-occupancy-icon.component-9RhBPwBN.js";
 export { e as SbbTimetableOccupancyIconElement };

package/{timetable-occupancy.component-DGQ20zH1.js → timetable-occupancy.component-B040dznI.js}

@@ -1,18 +1,18 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
 import { html as n, nothing as r, unsafeCSS as i } from "lit";
 import { property as a } from "lit/decorators.js";
-import { SbbElement as o, SbbLanguageController as s, SbbNegativeMixin as c, i18nClass as l, screenReaderOnlyStyles as u } from "./core.js";
-import { SbbTimetableOccupancyIconElement as d } from "./timetable-occupancy-icon.pure.js";
+import { SbbElement as o, SbbLanguageController as s, SbbNegativeMixin as c, i18nClass as l, listResetStyles as u, screenReaderOnlyStyles as d } from "./core.js";
+import { SbbTimetableOccupancyIconElement as f } from "./timetable-occupancy-icon.pure.js";
 //#region src/elements/timetable-occupancy/timetable-occupancy.scss?inline
-var f = ":host{--sbb-icon-svg-width: .890625rem;--sbb-icon-svg-height: v0.75rem;display:inline-block}@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-timetable-occupancy-list-gap)}.sbb-timetable-occupancy__list-item{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--sbb-timetable-occupancy-item-gap)}.sbb-timetable-occupancy__list-item-class{color:var(--sbb-timetable-occupancy-color);font-size:var(--sbb-timetable-occupancy-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:1}.sbb-timetable-occupancy__list-item-icon{display:flex}", p = (() => {
-	let p = c(o), m, h = [], g = [], _, v = [], y = [];
-	return class extends p {
+var p = ":host{--sbb-icon-svg-width: .890625rem;--sbb-icon-svg-height: v0.75rem;display:inline-block}@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{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--sbb-timetable-occupancy-list-gap)}.sbb-timetable-occupancy__list-item{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--sbb-timetable-occupancy-item-gap)}.sbb-timetable-occupancy__list-item-class{color:var(--sbb-timetable-occupancy-color);font-size:var(--sbb-timetable-occupancy-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:1}.sbb-timetable-occupancy__list-item-icon{display:flex}", m = (() => {
+	let m = c(o), h, g = [], _ = [], v, y = [], b = [];
+	return class extends m {
 		constructor() {
-			super(...arguments), this.#e = t(this, h, null), this.#t = (t(this, g), t(this, v, null)), this._language = (t(this, y), new s(this));
+			super(...arguments), this.#e = t(this, g, null), this.#t = (t(this, _), t(this, y, null)), this._language = (t(this, b), new s(this));
 		}
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
-			m = [a({ attribute: "first-class-occupancy" })], _ = [a({ attribute: "second-class-occupancy" })], e(this, null, m, {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
+			h = [a({ attribute: "first-class-occupancy" })], v = [a({ attribute: "second-class-occupancy" })], e(this, null, h, {
 				kind: "accessor",
 				name: "firstClassOccupancy",
 				static: !1,
@@ -25,7 +25,7 @@ var f = ":host{--sbb-icon-svg-width: .890625rem;--sbb-icon-svg-height: v0.75rem;
 					}
 				},
 				metadata: t
-			}, h, g), e(this, null, _, {
+			}, g, _), e(this, null, v, {
 				kind: "accessor",
 				name: "secondClassOccupancy",
 				static: !1,
@@ -38,7 +38,7 @@ var f = ":host{--sbb-icon-svg-width: .890625rem;--sbb-icon-svg-height: v0.75rem;
 					}
 				},
 				metadata: t
-			}, v, y), t && Object.defineProperty(this, Symbol.metadata, {
+			}, y, b), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -49,10 +49,14 @@ var f = ":host{--sbb-icon-svg-width: .890625rem;--sbb-icon-svg-height: v0.75rem;
 			this.elementName = "sbb-timetable-occupancy";
 		}
 		static {
-			this.elementDependencies = [d];
+			this.elementDependencies = [f];
 		}
 		static {
-			this.styles = [u, i(f)];
+			this.styles = [
+				u,
+				d,
+				i(p)
+			];
 		}
 		#e;
 		get firstClassOccupancy() {
@@ -96,4 +100,4 @@ var f = ":host{--sbb-icon-svg-width: .890625rem;--sbb-icon-svg-height: v0.75rem;
 	};
 })();
 //#endregion
-export { p as t };
+export { m as t };

package/timetable-occupancy.js

@@ -1,4 +1,4 @@
-import { t as e } from "./timetable-occupancy.component-DGQ20zH1.js";
+import { t as e } from "./timetable-occupancy.component-B040dznI.js";
 import "./timetable-occupancy.pure.js";
 //#region src/elements/timetable-occupancy.ts
 e.define();

package/timetable-occupancy.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./timetable-occupancy.component-DGQ20zH1.js";
+import { t as e } from "./timetable-occupancy.component-B040dznI.js";
 export { e as SbbTimetableOccupancyElement };

package/title/_title.global.scss

@@ -0,0 +1,16 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-title-color: var(--sbb-color-3);
+}
+
+@mixin rules {
+  // In smaller title font-sizes, the space after the title is smaller than the default paragraph space before.
+  // Due to margin collapsing, the wrong paragraph space wins.
+  // To prevent the mistakenly large gap, we reset the paragraph space.
+  sbb-title + p {
+    margin-block-start: 0;
+  }
+}

package/title/title-base.js

@@ -1,2 +1,2 @@
-import { t as e } from "../title-base-JBhKD3ur.js";
+import { t as e } from "../title-base-DWrwrsx4.js";
 export { e as SbbTitleBase };

package/title/title.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../title.component-VnTeqomb.js";
+import { t as e } from "../title.component-BZ0nVpam.js";
 export { e as SbbTitleElement };

package/{title-base-JBhKD3ur.js → title-base-DWrwrsx4.js}

@@ -4,7 +4,7 @@ import { property as r } from "lit/decorators.js";
 import { SbbElement as i } from "./core.js";
 import { html as a } from "lit/static-html.js";
 //#region src/elements/title/title-common.scss?inline
-var o = ":host{display:block;font-weight:700;font-size:var(--sbb-title-font-size);letter-spacing:var(--sbb-typo-letter-spacing-heading);line-height:var(--sbb-title-line-height, var(--sbb-typo-line-height-heading));color:var(--sbb-title-color)}:host([id]){scroll-margin-block-start:var(--sbb-spacing-fixed-10x)}:host(:where([level=\"2\"]:not([visual-level]),[visual-level=\"2\"])){--sbb-title-font-size: var(--sbb-heading-font-size-2)}:host(:where([level=\"3\"]:not([visual-level]),[visual-level=\"3\"])){--sbb-title-font-size: var(--sbb-heading-font-size-3)}:host(:where([level=\"4\"]:not([visual-level]),[visual-level=\"4\"])){--sbb-title-font-size: var(--sbb-heading-font-size-4)}:host(:where([level=\"5\"]:not([visual-level]),[visual-level=\"5\"])){--sbb-title-font-size: var(--sbb-heading-font-size-5)}:host(:where([level=\"6\"]:not([visual-level]),[visual-level=\"6\"])){--sbb-title-font-size: var(--sbb-heading-font-size-6);--sbb-title-line-height: var(--sbb-typo-line-height-text)}", s = (() => {
+var o = ":host{display:block;font-weight:700;letter-spacing:var(--sbb-typo-letter-spacing-heading);line-height:var(--sbb-typo-line-height-heading);color:var(--sbb-title-color);font-size:var(--sbb-heading-font-size-1)}:host([id]){scroll-margin-block-start:var(--sbb-spacing-fixed-10x)}:host(:where([level=\"2\"]:not([visual-level]),[visual-level=\"2\"])){font-size:var(--sbb-heading-font-size-2)}:host(:where([level=\"3\"]:not([visual-level]),[visual-level=\"3\"])){font-size:var(--sbb-heading-font-size-3)}:host(:where([level=\"4\"]:not([visual-level]),[visual-level=\"4\"])){font-size:var(--sbb-heading-font-size-4)}:host(:where([level=\"5\"]:not([visual-level]),[visual-level=\"5\"])){font-size:var(--sbb-heading-font-size-5)}:host(:where([level=\"6\"]:not([visual-level]),[visual-level=\"6\"])){font-size:var(--sbb-heading-font-size-6);line-height:var(--sbb-typo-line-height-text)}", s = (() => {
 	let s = i, c, l = [], u = [], d, f = [], p = [];
 	return class extends s {
 		static {