@sbb-esta/lyne-elements-dev 4.7.0-dev.1773033279 → 4.7.0-dev.1773045546

package/journey-header/journey-header.component.js

@@ -2,7 +2,7 @@ var D = (i) => {
   throw TypeError(i);
 };
 var E = (i, s, r) => s.has(i) || D("Cannot " + r);
-var b = (i, s, r) => (E(i, s, "read from private field"), r ? r.call(i) : s.get(i)), p = (i, s, r) => s.has(i) ? D("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(i) : s.set(i, r), o = (i, s, r, n) => (E(i, s, "write to private field"), n ? n.call(i, r) : s.set(i, r), r);
+var m = (i, s, r) => (E(i, s, "read from private field"), r ? r.call(i) : s.get(i)), p = (i, s, r) => s.has(i) ? D("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(i) : s.set(i, r), o = (i, s, r, n) => (E(i, s, "write to private field"), n ? n.call(i, r) : s.set(i, r), r);
 import { __esDecorate as g, __runInitializers as l } from "tslib";
 import { css as N, html as O } from "lit";
 import { customElement as U, property as _ } from "lit/decorators.js";
@@ -15,40 +15,40 @@ import { boxSizingStyles as G } from "../core/styles.js";
 import { SbbTitleBase as B } from "../title.js";
 import "../icon.js";
 import "../screen-reader-only.js";
-const K = N`:host{--sbb-journey-header-gap: var(--sbb-spacing-fixed-1x);display:block}:host([id]){scroll-margin-block-start:var(--sbb-spacing-fixed-10x)}:host([negative]){--sbb-title-text-color-normal: var(--sbb-color-3-negative)}sbb-icon{min-width:var(--sbb-size-icon-ui-small)}.sbb-journey-header{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--sbb-journey-header-gap);width:fit-content}.sbb-journey-header:dir(rtl) sbb-icon{transform:rotate(-180deg)}`, M = /* @__PURE__ */ new Map([
+const K = N`:host{--sbb-journey-header-gap: var(--sbb-spacing-fixed-1x);display:block}:host([id]){scroll-margin-block-start:var(--sbb-spacing-fixed-10x)}:host([negative]){--sbb-title-text-color-normal: var(--sbb-color-3-negative)}sbb-icon{min-width:var(--sbb-size-icon-ui-small)}.sbb-journey-header{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--sbb-journey-header-gap);width:fit-content}.sbb-journey-header:dir(rtl) sbb-icon{transform:rotate(-180deg)}.sbb-journey-header>span{max-width:100%}`, M = /* @__PURE__ */ new Map([
   ["s", "6"],
   ["m", "5"],
   ["l", "4"]
 ]);
 let oe = (() => {
-  var d, u, h, m, a;
-  let i = [U("sbb-journey-header")], s, r = [], n, y = A(B), z, v = [], T = [], x, S = [], w = [], j, $ = [], k = [], I, L = [], C = [];
+  var d, u, h, b, a;
+  let i = [U("sbb-journey-header")], s, r = [], n, y = A(B), z, v = [], x = [], T, w = [], S = [], j, $ = [], k = [], I, L = [], C = [];
   return a = class extends y {
     constructor() {
       super();
       p(this, d);
       p(this, u);
       p(this, h);
-      p(this, m);
-      o(this, d, l(this, v, "")), o(this, u, (l(this, T), l(this, S, ""))), o(this, h, (l(this, w), l(this, $, !1))), o(this, m, (l(this, k), l(this, L, H() ? "s" : "m"))), this._language = (l(this, C), new F(this)), this.level = "3", this.visualLevel = M.get(this.size) ?? null;
+      p(this, b);
+      o(this, d, l(this, v, "")), o(this, u, (l(this, x), l(this, w, ""))), o(this, h, (l(this, S), l(this, $, !1))), o(this, b, (l(this, k), l(this, L, H() ? "s" : "m"))), this._language = (l(this, C), new F(this)), this.level = "3", this.visualLevel = M.get(this.size) ?? null;
     }
     /** Origin location for the journey header. */
     get origin() {
-      return b(this, d);
+      return m(this, d);
     }
     set origin(t) {
       o(this, d, t);
     }
     /** Destination location for the journey header. */
     get destination() {
-      return b(this, u);
+      return m(this, u);
     }
     set destination(t) {
       o(this, u, t);
     }
     /** Whether the journey is a round trip. If so, the icon changes to a round-trip one. */
     get roundTrip() {
-      return b(this, h);
+      return m(this, h);
     }
     set roundTrip(t) {
       o(this, h, t);
@@ -58,10 +58,10 @@ let oe = (() => {
      * @default 'm' / 's' (lean)
      */
     get size() {
-      return b(this, m);
+      return m(this, b);
     }
     set size(t) {
-      o(this, m, t);
+      o(this, b, t);
     }
     willUpdate(t) {
       super.willUpdate(t), t.has("size") && (this.visualLevel = M.get(this.size) ?? null);
@@ -77,13 +77,13 @@ let oe = (() => {
       <sbb-screen-reader-only>${e}</sbb-screen-reader-only>
     `;
     }
-  }, d = new WeakMap(), u = new WeakMap(), h = new WeakMap(), m = new WeakMap(), n = a, (() => {
+  }, d = new WeakMap(), u = new WeakMap(), h = new WeakMap(), b = new WeakMap(), n = a, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
-    z = [f(), _()], x = [f(), _()], j = [f(), _({ attribute: "round-trip", type: Boolean })], I = [_({ reflect: !0 })], g(a, null, z, { kind: "accessor", name: "origin", static: !1, private: !1, access: { has: (e) => "origin" in e, get: (e) => e.origin, set: (e, c) => {
+    z = [f(), _()], T = [f(), _()], j = [f(), _({ attribute: "round-trip", type: Boolean })], I = [_({ reflect: !0 })], g(a, null, z, { kind: "accessor", name: "origin", static: !1, private: !1, access: { has: (e) => "origin" in e, get: (e) => e.origin, set: (e, c) => {
       e.origin = c;
-    } }, metadata: t }, v, T), g(a, null, x, { kind: "accessor", name: "destination", static: !1, private: !1, access: { has: (e) => "destination" in e, get: (e) => e.destination, set: (e, c) => {
+    } }, metadata: t }, v, x), g(a, null, T, { kind: "accessor", name: "destination", static: !1, private: !1, access: { has: (e) => "destination" in e, get: (e) => e.destination, set: (e, c) => {
       e.destination = c;
-    } }, metadata: t }, S, w), g(a, null, j, { kind: "accessor", name: "roundTrip", static: !1, private: !1, access: { has: (e) => "roundTrip" in e, get: (e) => e.roundTrip, set: (e, c) => {
+    } }, metadata: t }, w, S), g(a, null, j, { kind: "accessor", name: "roundTrip", static: !1, private: !1, access: { has: (e) => "roundTrip" in e, get: (e) => e.roundTrip, set: (e, c) => {
       e.roundTrip = c;
     } }, metadata: t }, $, k), g(a, null, I, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, c) => {
       e.size = c;

package/off-brand-theme.css

@@ -1564,6 +1564,14 @@ summary {
   --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
   --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
   --sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
+  --sbb-flip-card-background-color: var(--sbb-background-color-4);
+  --sbb-flip-card-border: var(--sbb-border-width-2x);
+  --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);
+  --sbb-flip-card-button-dimensions: var(--sbb-button-min-height-size-s);
+  --sbb-flip-card-padding: var(--sbb-spacing-responsive-s);
+  --sbb-flip-card-padding-block-end: var(--sbb-spacing-responsive-xs);
+  --sbb-flip-card-min-height: 17.5rem;
+  --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);
   --sbb-footer-background-color: var(--sbb-background-color-3);
   --sbb-footer-clock-width: 4.75rem;
   --sbb-footer-color: var(--sbb-color-granite);
@@ -1801,6 +1809,7 @@ summary {
     --sbb-chip-group-margin-block-with-label-not-empty: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large);
     --sbb-dialog-padding-inline: var(--sbb-spacing-responsive-s);
     --sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-16x));
+    --sbb-flip-card-min-height: 20rem;
   }
   :root.sbb-lean {
     --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
@@ -1884,6 +1893,15 @@ sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title, sbb-dialog:is(:sta
   padding-inline-end: 0;
 }
 
+sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
+sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+  --sbb-image-aspect-ratio: auto;
+  --sbb-image-object-fit: cover;
+  border-radius: 0;
+  display: block;
+  height: 100%;
+}
+
 :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
   --sbb-option-min-height: var(--sbb-size-element-xxs);
   --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
@@ -2174,15 +2192,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
-sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  --sbb-image-aspect-ratio: auto;
-  --sbb-image-object-fit: cover;
-  border-radius: 0;
-  display: block;
-  height: 100%;
-}
-
 sbb-lead-container > [slot=image]:is(sbb-image, img, picture),
 sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
   --sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "4.7.0-dev.1773033279",
+  "version": "4.7.0-dev.1773045546",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
     "storybook",
-    "https://github.com/sbb-design-systems/lyne-components/commit/115535f95feb12b315b4a3fc6d1c83b3283547cf"
+    "https://github.com/sbb-design-systems/lyne-components/commit/183d6cc93511b2c40131a0ac0debdc2b731acc74"
   ],
   "type": "module",
   "exports": {

package/safety-theme.css

@@ -1564,6 +1564,14 @@ summary {
   --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
   --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
   --sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
+  --sbb-flip-card-background-color: var(--sbb-background-color-4);
+  --sbb-flip-card-border: var(--sbb-border-width-2x);
+  --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);
+  --sbb-flip-card-button-dimensions: var(--sbb-button-min-height-size-s);
+  --sbb-flip-card-padding: var(--sbb-spacing-responsive-s);
+  --sbb-flip-card-padding-block-end: var(--sbb-spacing-responsive-xs);
+  --sbb-flip-card-min-height: 17.5rem;
+  --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);
   --sbb-footer-background-color: var(--sbb-background-color-3);
   --sbb-footer-clock-width: 4.75rem;
   --sbb-footer-color: var(--sbb-color-granite);
@@ -1801,6 +1809,7 @@ summary {
     --sbb-chip-group-margin-block-with-label-not-empty: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large);
     --sbb-dialog-padding-inline: var(--sbb-spacing-responsive-s);
     --sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-16x));
+    --sbb-flip-card-min-height: 20rem;
   }
   :root.sbb-lean {
     --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
@@ -1884,6 +1893,15 @@ sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title, sbb-dialog:is(:sta
   padding-inline-end: 0;
 }
 
+sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
+sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+  --sbb-image-aspect-ratio: auto;
+  --sbb-image-object-fit: cover;
+  border-radius: 0;
+  display: block;
+  height: 100%;
+}
+
 :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
   --sbb-option-min-height: var(--sbb-size-element-xxs);
   --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
@@ -2174,15 +2192,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
-sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  --sbb-image-aspect-ratio: auto;
-  --sbb-image-object-fit: cover;
-  border-radius: 0;
-  display: block;
-  height: 100%;
-}
-
 sbb-lead-container > [slot=image]:is(sbb-image, img, picture),
 sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
   --sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);

package/standard-theme.css

@@ -1564,6 +1564,14 @@ summary {
   --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
   --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
   --sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
+  --sbb-flip-card-background-color: var(--sbb-background-color-4);
+  --sbb-flip-card-border: var(--sbb-border-width-2x);
+  --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);
+  --sbb-flip-card-button-dimensions: var(--sbb-button-min-height-size-s);
+  --sbb-flip-card-padding: var(--sbb-spacing-responsive-s);
+  --sbb-flip-card-padding-block-end: var(--sbb-spacing-responsive-xs);
+  --sbb-flip-card-min-height: 17.5rem;
+  --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);
   --sbb-footer-background-color: var(--sbb-background-color-3);
   --sbb-footer-clock-width: 4.75rem;
   --sbb-footer-color: var(--sbb-color-granite);
@@ -1801,6 +1809,7 @@ summary {
     --sbb-chip-group-margin-block-with-label-not-empty: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large);
     --sbb-dialog-padding-inline: var(--sbb-spacing-responsive-s);
     --sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-16x));
+    --sbb-flip-card-min-height: 20rem;
   }
   :root.sbb-lean {
     --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
@@ -1884,6 +1893,15 @@ sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title, sbb-dialog:is(:sta
   padding-inline-end: 0;
 }
 
+sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
+sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+  --sbb-image-aspect-ratio: auto;
+  --sbb-image-object-fit: cover;
+  border-radius: 0;
+  display: block;
+  height: 100%;
+}
+
 :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
   --sbb-option-min-height: var(--sbb-size-element-xxs);
   --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
@@ -2174,15 +2192,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
-sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  --sbb-image-aspect-ratio: auto;
-  --sbb-image-object-fit: cover;
-  border-radius: 0;
-  display: block;
-  height: 100%;
-}
-
 sbb-lead-container > [slot=image]:is(sbb-image, img, picture),
 sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
   --sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);