@sbb-esta/lyne-elements 0.52.1 → 0.53.0

package/image.js

@@ -1,66 +1,66 @@
-import { css as y, LitElement as k, html as h, nothing as l } from "lit";
-import { property as s, eventOptions as v, customElement as $ } from "lit/decorators.js";
-import { ref as _ } from "lit/directives/ref.js";
+import { css as y, LitElement as _, html as d, nothing as l } from "lit";
+import { property as s, eventOptions as k, customElement as v } from "lit/decorators.js";
+import { ref as $ } from "lit/directives/ref.js";
 import { hostContext as x } from "./core/dom.js";
-const w = 0, S = 359, P = 360, M = 599, z = 600, B = 839, O = 840, F = 1023, D = 1024, Q = 1279, C = 1280, E = 1439, L = 1440, j = 2579, R = 16, H = y`*,:before,:after{box-sizing:border-box}:host{--sbb-image-border-radius: var(--sbb-border-radius-4x);--sbb-image-aspect-ratio: auto;--sbb-image-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );display:block}:host([aspect-ratio="1-1"]){--sbb-image-aspect-ratio: 1 / 1}:host([aspect-ratio="1-2"]){--sbb-image-aspect-ratio: 1 / 2}:host([aspect-ratio="2-1"]){--sbb-image-aspect-ratio: 2 / 1}:host([aspect-ratio="2-3"]){--sbb-image-aspect-ratio: 2 / 3}:host([aspect-ratio="3-2"]){--sbb-image-aspect-ratio: 3 / 2}:host([aspect-ratio="3-4"]){--sbb-image-aspect-ratio: 3 / 4}:host([aspect-ratio="4-3"]){--sbb-image-aspect-ratio: 4 / 3}:host([aspect-ratio="4-5"]){--sbb-image-aspect-ratio: 4 / 5}:host([aspect-ratio="5-4"]){--sbb-image-aspect-ratio: 5 / 4}:host([aspect-ratio="16-9"]){--sbb-image-aspect-ratio: 16 / 9}:host([aspect-ratio="9-16"]){--sbb-image-aspect-ratio: 9 / 16}:host([data-teaser]){--sbb-image-aspect-ratio: 1 / 1}@media (min-width: 37.5rem){:host([data-teaser]){--sbb-image-aspect-ratio: 16 / 9}}:host(:is([border-radius=none],[data-teaser])){--sbb-image-border-radius: 0}:host([border-radius=round]:not([data-teaser])){--sbb-image-border-radius: var(--sbb-border-radius-infinity)}.sbb-image__figure{margin:0}.sbb-image__img{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.000001}:host([data-loaded]) .sbb-image__img{opacity:.999999}:host([data-loaded]) .sbb-image__blurred{opacity:0}:is(.sbb-image__img,.sbb-image__blurred){width:100%;height:100%;object-fit:cover;transition:opacity var(--sbb-image-animation-duration) var(--sbb-animation-easing)}.sbb-image__wrapper{position:relative;overflow:hidden;max-width:100%;border-radius:var(--sbb-image-border-radius);aspect-ratio:var(--sbb-image-aspect-ratio)}.sbb-image__caption{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;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);margin-block-start:var(--sbb-spacing-fixed-4x)}`;
-var d = Object.freeze, g = Object.defineProperty, T = Object.getOwnPropertyDescriptor, o = (t, e, r, i) => {
-  for (var n = i > 1 ? void 0 : i ? T(e, r) : e, p = t.length - 1, c; p >= 0; p--)
-    (c = t[p]) && (n = (i ? c(e, r, n) : c(n)) || n);
-  return i && n && g(e, r, n), n;
-}, A = (t, e) => d(g(t, "raw", { value: d(t.slice()) })), u;
-const V = (t) => {
-  if (!t || t.length === 0)
+const w = 0, S = 359, P = 360, M = 599, z = 600, C = 839, B = 840, L = 1023, O = 1024, Q = 1279, F = 1280, D = 1439, E = 1440, T = 2579, I = 16, R = y`*,:before,:after{box-sizing:border-box}:host{--sbb-image-border-radius: var(--sbb-border-radius-4x);--sbb-image-aspect-ratio: auto;--sbb-image-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );display:block}:host([aspect-ratio="1-1"]){--sbb-image-aspect-ratio: 1 / 1}:host([aspect-ratio="1-2"]){--sbb-image-aspect-ratio: 1 / 2}:host([aspect-ratio="2-1"]){--sbb-image-aspect-ratio: 2 / 1}:host([aspect-ratio="2-3"]){--sbb-image-aspect-ratio: 2 / 3}:host([aspect-ratio="3-2"]){--sbb-image-aspect-ratio: 3 / 2}:host([aspect-ratio="3-4"]){--sbb-image-aspect-ratio: 3 / 4}:host([aspect-ratio="4-3"]){--sbb-image-aspect-ratio: 4 / 3}:host([aspect-ratio="4-5"]){--sbb-image-aspect-ratio: 4 / 5}:host([aspect-ratio="5-4"]){--sbb-image-aspect-ratio: 5 / 4}:host([aspect-ratio="16-9"]){--sbb-image-aspect-ratio: 16 / 9}:host([aspect-ratio="9-16"]){--sbb-image-aspect-ratio: 9 / 16}:host([data-teaser]){--sbb-image-aspect-ratio: 1 / 1}@media (min-width: 37.5rem){:host([data-teaser]){--sbb-image-aspect-ratio: 16 / 9}}:host(:is([border-radius=none],[data-teaser])){--sbb-image-border-radius: 0}:host([border-radius=round]:not([data-teaser])){--sbb-image-border-radius: var(--sbb-border-radius-infinity)}.sbb-image__figure{margin:0}.sbb-image__img{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.000001}:host([data-loaded]) .sbb-image__img{opacity:.999999}:host([data-loaded]) .sbb-image__blurred{opacity:0}:is(.sbb-image__img,.sbb-image__blurred){width:100%;height:100%;object-fit:cover;transition:opacity var(--sbb-image-animation-duration) var(--sbb-animation-easing)}.sbb-image__wrapper{position:relative;overflow:hidden;max-width:100%;border-radius:var(--sbb-image-border-radius);aspect-ratio:var(--sbb-image-aspect-ratio)}.sbb-image__caption{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;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);margin-block-start:var(--sbb-spacing-fixed-4x)}`;
+var h = Object.freeze, u = Object.defineProperty, A = Object.getOwnPropertyDescriptor, o = (e, t, r, i) => {
+  for (var n = i > 1 ? void 0 : i ? A(t, r) : t, p = e.length - 1, b; p >= 0; p--)
+    (b = e[p]) && (n = (i ? b(t, r, n) : b(n)) || n);
+  return i && n && u(t, r, n), n;
+}, U = (e, t) => h(u(e, "raw", { value: h(e.slice()) })), g;
+const H = (e) => {
+  if (!e || e.length === 0)
     return [];
-  let e;
+  let t;
   try {
-    e = JSON.parse(t);
+    t = JSON.parse(e);
   } catch {
     return [];
   }
-  if (!e.breakpoints || e.breakpoints.length === 0)
+  if (!t.breakpoints || t.breakpoints.length === 0)
     return [];
-  if (!Array.isArray(e.breakpoints))
+  if (!Array.isArray(t.breakpoints))
     return [];
   let r = !1, i = !1;
   const n = ["image", "mediaQueries"];
-  return e.breakpoints.forEach((p) => {
-    const c = Object.keys(p);
-    c.forEach((m) => {
+  return t.breakpoints.forEach((p) => {
+    const b = Object.keys(p);
+    b.forEach((m) => {
       n.includes(m) || (r = !0);
     }), n.forEach((m) => {
-      c.includes(m) || (i = !0);
+      b.includes(m) || (i = !0);
     });
-  }), r || i ? [] : e.breakpoints;
-}, q = {
+  }), r || i ? [] : t.breakpoints;
+}, j = {
   once: !0,
   passive: !0
-}, b = (t) => t / R, U = {
-  "sbb-breakpoint-zero-min": b(w),
-  "sbb-breakpoint-zero-max": b(S),
-  "sbb-breakpoint-micro-min": b(P),
-  "sbb-breakpoint-micro-max": b(M),
-  "sbb-breakpoint-small-min": b(z),
-  "sbb-breakpoint-small-max": b(B),
-  "sbb-breakpoint-medium-min": b(O),
-  "sbb-breakpoint-medium-max": b(F),
-  "sbb-breakpoint-large-min": b(D),
-  "sbb-breakpoint-large-max": b(Q),
-  "sbb-breakpoint-wide-min": b(C),
-  "sbb-breakpoint-wide-max": b(E),
-  "sbb-breakpoint-ultra-min": b(L),
-  "sbb-breakpoint-ultra-max": b(j)
+}, c = (e) => e / I, V = {
+  "sbb-breakpoint-zero-min": c(w),
+  "sbb-breakpoint-zero-max": c(S),
+  "sbb-breakpoint-micro-min": c(P),
+  "sbb-breakpoint-micro-max": c(M),
+  "sbb-breakpoint-small-min": c(z),
+  "sbb-breakpoint-small-max": c(C),
+  "sbb-breakpoint-medium-min": c(B),
+  "sbb-breakpoint-medium-max": c(L),
+  "sbb-breakpoint-large-min": c(O),
+  "sbb-breakpoint-large-max": c(Q),
+  "sbb-breakpoint-wide-min": c(F),
+  "sbb-breakpoint-wide-max": c(D),
+  "sbb-breakpoint-ultra-min": c(E),
+  "sbb-breakpoint-ultra-max": c(T)
 };
-let a = class extends k {
+let a = class extends _ {
   constructor() {
-    super(...arguments), this.c = {
+    super(...arguments), this._config = {
       nonRetinaQuality: "45",
       retinaQuality: "20"
     }, this.skipLqip = !1, this.copyrightHolder = "Organization", this.customFocalPoint = !1, this.decoding = "auto", this.focalPointDebug = !1, this.focalPointX = 1, this.focalPointY = 1, this.importance = "high", this.loading = "eager", this.borderRadius = "default", this.aspectRatio = "16-9";
   }
   /** Whether the image is finished loading or failed to load. */
   get complete() {
-    var t, e, r;
-    return ((r = (e = (t = this.shadowRoot) == null ? void 0 : t.querySelector) == null ? void 0 : e.call(t, ".sbb-image__img")) == null ? void 0 : r.complete) ?? !1;
+    var e, t, r;
+    return ((r = (t = (e = this.shadowRoot) == null ? void 0 : e.querySelector) == null ? void 0 : t.call(e, ".sbb-image__img")) == null ? void 0 : r.complete) ?? !1;
   }
   connectedCallback() {
     super.connectedCallback(), this.toggleAttribute(
@@ -68,34 +68,34 @@ let a = class extends k {
       !!x("sbb-teaser-hero", this) || !!this.closest("sbb-teaser-paid")
     );
   }
-  updated(t) {
-    super.updated(t), this.a && (this.b = this.a.querySelectorAll("a"), this.b && this.e());
+  updated(e) {
+    super.updated(e), this._captionElement && (this._linksInCaption = this._captionElement.querySelectorAll("a"), this._linksInCaption && this._addFocusAbilityToLinksInCaption());
   }
-  async firstUpdated(t) {
-    super.firstUpdated(t), await this.updateComplete, this.complete && this.toggleAttribute("data-loaded", !0);
+  async firstUpdated(e) {
+    super.firstUpdated(e), await this.updateComplete, this.complete && this.toggleAttribute("data-loaded", !0);
   }
-  f() {
+  _logPerformanceMarks() {
     this.performanceMark && (performance.clearMarks(this.performanceMark), performance.mark(this.performanceMark));
   }
-  g(t) {
-    const e = U[t];
-    return e ? `${e}rem` : "";
+  _matchMediaQueryDesignToken(e) {
+    const t = V[e];
+    return t ? `${t}rem` : "";
   }
-  e() {
-    var t;
-    (t = this.b) == null || t.forEach((e) => {
-      e.removeAttribute("tabindex");
+  _addFocusAbilityToLinksInCaption() {
+    var e;
+    (e = this._linksInCaption) == null || e.forEach((t) => {
+      t.removeAttribute("tabindex");
     });
   }
-  d(t, e = !1) {
-    if (!t || t === "")
+  _prepareImageUrl(e, t = !1) {
+    if (!e || e === "")
       return "";
-    const r = !!t.match(/^\w+:\/\//), i = r ? new URL(t) : new URL(`http://noop/${t}`);
-    return e ? (i.searchParams.append("blur", "100"), i.searchParams.append("w", "100"), i.searchParams.append("h", "56")) : i.searchParams.append("auto", "format,compress,cs=tinysrgb"), this.customFocalPoint && (i.searchParams.append("fit", "crop"), i.searchParams.append("crop", "focalpoint"), i.searchParams.append("fp-x", this.focalPointX.toString(10)), i.searchParams.append("fp-y", this.focalPointY.toString(10)), i.searchParams.append("fp-z", "1")), this.focalPointDebug && i.searchParams.append("fp-debug", "true"), r ? i.href : i.pathname.substring(1) + i.search;
+    const r = !!e.match(/^\w+:\/\//), i = r ? new URL(e) : new URL(`http://noop/${e}`);
+    return t ? (i.searchParams.append("blur", "100"), i.searchParams.append("w", "100"), i.searchParams.append("h", "56")) : i.searchParams.append("auto", "format,compress,cs=tinysrgb"), this.customFocalPoint && (i.searchParams.append("fit", "crop"), i.searchParams.append("crop", "focalpoint"), i.searchParams.append("fp-x", this.focalPointX.toString(10)), i.searchParams.append("fp-y", this.focalPointY.toString(10)), i.searchParams.append("fp-z", "1")), this.focalPointDebug && i.searchParams.append("fp-debug", "true"), r ? i.href : i.pathname.substring(1) + i.search;
   }
-  h() {
-    let t;
-    return this.pictureSizesConfig ? t = this.pictureSizesConfig : t = `{
+  _preparePictureSizeConfigs() {
+    let e;
+    return this.pictureSizesConfig ? e = this.pictureSizesConfig : e = `{
         "breakpoints": [
           {
             "image": {
@@ -146,25 +146,25 @@ let a = class extends k {
             ]
           }
         ]
-      }`, V(t);
+      }`, H(e);
   }
-  i(t) {
-    let e = "";
-    return t.forEach((r) => {
+  _createMediaQueryString(e) {
+    let t = "";
+    return e.forEach((r) => {
       const i = r.conditionFeature;
       let n;
-      r.conditionFeatureValue.lyneDesignToken ? n = this.g(r.conditionFeatureValue.value) : n = r.conditionFeatureValue.value;
+      r.conditionFeatureValue.lyneDesignToken ? n = this._matchMediaQueryDesignToken(r.conditionFeatureValue.value) : n = r.conditionFeatureValue.value;
       const p = r.conditionOperator ? ` ${r.conditionOperator} ` : "";
-      e += `(${i}: ${n})${p}`;
-    }), e;
+      t += `(${i}: ${n})${p}`;
+    }), t;
   }
-  j() {
-    this.f(), this.toggleAttribute("data-loaded", !0), this.dispatchEvent(new Event("load"));
+  _imageLoaded() {
+    this._logPerformanceMarks(), this.toggleAttribute("data-loaded", !0), this.dispatchEvent(new Event("load"));
   }
   render() {
-    let { caption: t } = this, e = "";
-    const r = this.d(this.imageSrc, !0), i = this.d(this.imageSrc, !1);
-    this.loading === "lazy" && (this.decoding = "async", this.importance = "low"), this.copyright && (t = `${this.caption} ©${this.copyright}`, e = `{
+    let { caption: e } = this, t = "";
+    const r = this._prepareImageUrl(this.imageSrc, !0), i = this._prepareImageUrl(this.imageSrc, !1);
+    this.loading === "lazy" && (this.decoding = "async", this.importance = "low"), this.copyright && (e = `${this.caption} ©${this.copyright}`, t = `{
         "@context": "https://schema.org",
         "@type": "Photograph",
         "image": "${this.imageSrc}",
@@ -173,11 +173,11 @@ let a = class extends k {
           "name": "${this.copyright}"
         }
       }`);
-    const n = this.h();
-    return h`
+    const n = this._preparePictureSizeConfigs();
+    return d`
       <figure class="sbb-image__figure">
         <div class="sbb-image__wrapper">
-          ${this.skipLqip ? l : h`<img
+          ${this.skipLqip ? l : d`<img
                 alt=""
                 class="sbb-image__blurred"
                 src=${r}
@@ -190,18 +190,18 @@ let a = class extends k {
           <picture>
             <!-- render picture element sources -->
             ${n.map((p) => {
-      const c = p.image.height, m = p.image.width, f = this.i(p.mediaQueries);
+      const b = p.image.height, m = p.image.width, f = this._createMediaQueryString(p.mediaQueries);
       return [
-        h` <source
+        d` <source
                   media=${`${f}`}
                   sizes=${`${m}px`}
-                  srcset=${`${i}&w=${m}&h=${c}&q=${this.c.nonRetinaQuality} ${m}w, ${i}&w=${m * 2}&h=${c * 2}&q=${this.c.retinaQuality} ${m * 2}w`}
+                  srcset=${`${i}&w=${m}&h=${b}&q=${this._config.nonRetinaQuality} ${m}w, ${i}&w=${m * 2}&h=${b * 2}&q=${this._config.retinaQuality} ${m * 2}w`}
                 ></source>`
       ];
     })}
             <img
               alt=${this.alt || ""}
-              @load=${this.j}
+              @load=${this._imageLoaded}
               @error=${() => this.dispatchEvent(new Event("error"))}
               class="sbb-image__img"
               src=${this.imageSrc}
@@ -213,19 +213,19 @@ let a = class extends k {
             />
           </picture>
         </div>
-        ${t ? h`<figcaption
+        ${e ? d`<figcaption
               class="sbb-image__caption"
-              .innerHTML=${t}
-              ${_((p) => {
-      this.a = p;
+              .innerHTML=${e}
+              ${$((p) => {
+      this._captionElement = p;
     })}
             ></figcaption>` : l}
-        ${e ? h(u || (u = A(['<script type="application/ld+json" .innerHTML=', "><\/script>"])), e) : l}
+        ${t ? d(g || (g = U(['<script type="application/ld+json" .innerHTML=', "><\/script>"])), t) : l}
       </figure>
     `;
   }
 };
-a.styles = H;
+a.styles = R;
 a.events = {
   error: "error",
   load: "load"
@@ -282,10 +282,10 @@ o([
   s({ attribute: "aspect-ratio", reflect: !0 })
 ], a.prototype, "aspectRatio", 2);
 o([
-  v(q)
-], a.prototype, "j", 1);
+  k(j)
+], a.prototype, "_imageLoaded", 1);
 a = o([
-  $("sbb-image")
+  v("sbb-image")
 ], a);
 export {
   a as SbbImageElement

package/index.d.ts

@@ -25,6 +25,7 @@ import { SbbCardButtonElement } from "./card/card-button.js";
 import { SbbCardLinkElement } from "./card/card-link.js";
 import { SbbCheckboxElement } from "./checkbox/checkbox.js";
 import { SbbCheckboxGroupElement } from "./checkbox/checkbox-group.js";
+import { SbbCheckboxPanelElement } from "./checkbox/checkbox-panel.js";
 import { SbbChipElement } from "./chip.js";
 import { SbbClockElement } from "./clock.js";
 import { SbbContainerElement } from "./container/container.js";
@@ -81,9 +82,10 @@ import { SbbPopoverElement } from "./popover/popover.js";
 import { SbbPopoverTriggerElement } from "./popover/popover-trigger.js";
 import { SbbRadioButtonElement } from "./radio-button/radio-button.js";
 import { SbbRadioButtonGroupElement } from "./radio-button/radio-button-group.js";
+import { SbbRadioButtonPanelElement } from "./radio-button/radio-button-panel.js";
 import { SbbScreenReaderOnlyElement } from "./screen-reader-only.js";
 import { SbbSelectElement } from "./select.js";
-import { SbbSelectionPanelElement } from "./selection-panel.js";
+import { SbbSelectionExpansionPanelElement } from "./selection-expansion-panel.js";
 import { SbbSignetElement } from "./signet.js";
 import { SbbSkiplinkListElement } from "./skiplink-list.js";
 import { SbbSliderElement } from "./slider.js";
@@ -91,13 +93,12 @@ import { SbbStatusElement } from "./status.js";
 import { SbbStepElement } from "./stepper/step.js";
 import { SbbStepLabelElement } from "./stepper/step-label.js";
 import { SbbStepperElement } from "./stepper/stepper.js";
+import { SbbTabElement } from "./tabs/tab.js";
 import { SbbTabGroupElement } from "./tabs/tab-group.js";
-import { SbbTabTitleElement } from "./tabs/tab-title.js";
+import { SbbTabLabelElement } from "./tabs/tab-label.js";
 import { SbbTagElement } from "./tag/tag.js";
 import { SbbTagGroupElement } from "./tag/tag-group.js";
 import { SbbTeaserElement } from "./teaser.js";
-import { SbbTeaserHeroElement } from "./teaser-hero.js";
-import { SbbTeaserPaidElement } from "./teaser-paid.js";
 import { SbbTimeInputElement } from "./time-input.js";
 import { SbbTimetableOccupancyElement } from "./timetable-occupancy.js";
 import { SbbTimetableOccupancyIconElement } from "./timetable-occupancy-icon.js";
@@ -140,6 +141,7 @@ declare global {
   var SbbCardLinkElement: SbbCardLinkElement;
   var SbbCheckboxElement: SbbCheckboxElement;
   var SbbCheckboxGroupElement: SbbCheckboxGroupElement;
+  var SbbCheckboxPanelElement: SbbCheckboxPanelElement;
   var SbbChipElement: SbbChipElement;
   var SbbClockElement: SbbClockElement;
   var SbbContainerElement: SbbContainerElement;
@@ -196,9 +198,10 @@ declare global {
   var SbbPopoverTriggerElement: SbbPopoverTriggerElement;
   var SbbRadioButtonElement: SbbRadioButtonElement;
   var SbbRadioButtonGroupElement: SbbRadioButtonGroupElement;
+  var SbbRadioButtonPanelElement: SbbRadioButtonPanelElement;
   var SbbScreenReaderOnlyElement: SbbScreenReaderOnlyElement;
   var SbbSelectElement: SbbSelectElement;
-  var SbbSelectionPanelElement: SbbSelectionPanelElement;
+  var SbbSelectionExpansionPanelElement: SbbSelectionExpansionPanelElement;
   var SbbSignetElement: SbbSignetElement;
   var SbbSkiplinkListElement: SbbSkiplinkListElement;
   var SbbSliderElement: SbbSliderElement;
@@ -206,13 +209,12 @@ declare global {
   var SbbStepElement: SbbStepElement;
   var SbbStepLabelElement: SbbStepLabelElement;
   var SbbStepperElement: SbbStepperElement;
+  var SbbTabElement: SbbTabElement;
   var SbbTabGroupElement: SbbTabGroupElement;
-  var SbbTabTitleElement: SbbTabTitleElement;
+  var SbbTabLabelElement: SbbTabLabelElement;
   var SbbTagElement: SbbTagElement;
   var SbbTagGroupElement: SbbTagGroupElement;
   var SbbTeaserElement: SbbTeaserElement;
-  var SbbTeaserHeroElement: SbbTeaserHeroElement;
-  var SbbTeaserPaidElement: SbbTeaserPaidElement;
   var SbbTimeInputElement: SbbTimeInputElement;
   var SbbTimetableOccupancyElement: SbbTimetableOccupancyElement;
   var SbbTimetableOccupancyIconElement: SbbTimetableOccupancyIconElement;

package/index.js

@@ -25,6 +25,7 @@ import { SbbCardButtonElement } from "./card/card-button.js";
 import { SbbCardLinkElement } from "./card/card-link.js";
 import { SbbCheckboxElement } from "./checkbox/checkbox.js";
 import { SbbCheckboxGroupElement } from "./checkbox/checkbox-group.js";
+import { SbbCheckboxPanelElement } from "./checkbox/checkbox-panel.js";
 import { SbbChipElement } from "./chip.js";
 import { SbbClockElement } from "./clock.js";
 import { SbbContainerElement } from "./container/container.js";
@@ -81,9 +82,10 @@ import { SbbPopoverElement } from "./popover/popover.js";
 import { SbbPopoverTriggerElement } from "./popover/popover-trigger.js";
 import { SbbRadioButtonElement } from "./radio-button/radio-button.js";
 import { SbbRadioButtonGroupElement } from "./radio-button/radio-button-group.js";
+import { SbbRadioButtonPanelElement } from "./radio-button/radio-button-panel.js";
 import { SbbScreenReaderOnlyElement } from "./screen-reader-only.js";
 import { SbbSelectElement } from "./select.js";
-import { SbbSelectionPanelElement } from "./selection-panel.js";
+import { SbbSelectionExpansionPanelElement } from "./selection-expansion-panel.js";
 import { SbbSignetElement } from "./signet.js";
 import { SbbSkiplinkListElement } from "./skiplink-list.js";
 import { SbbSliderElement } from "./slider.js";
@@ -91,13 +93,12 @@ import { SbbStatusElement } from "./status.js";
 import { SbbStepElement } from "./stepper/step.js";
 import { SbbStepLabelElement } from "./stepper/step-label.js";
 import { SbbStepperElement } from "./stepper/stepper.js";
+import { SbbTabElement } from "./tabs/tab.js";
 import { SbbTabGroupElement } from "./tabs/tab-group.js";
-import { SbbTabTitleElement } from "./tabs/tab-title.js";
+import { SbbTabLabelElement } from "./tabs/tab-label.js";
 import { SbbTagElement } from "./tag/tag.js";
 import { SbbTagGroupElement } from "./tag/tag-group.js";
 import { SbbTeaserElement } from "./teaser.js";
-import { SbbTeaserHeroElement } from "./teaser-hero.js";
-import { SbbTeaserPaidElement } from "./teaser-paid.js";
 import { SbbTimeInputElement } from "./time-input.js";
 import { SbbTimetableOccupancyElement } from "./timetable-occupancy.js";
 import { SbbTimetableOccupancyIconElement } from "./timetable-occupancy-icon.js";
@@ -139,6 +140,7 @@ globalThis.SbbCardButtonElement = SbbCardButtonElement;
 globalThis.SbbCardLinkElement = SbbCardLinkElement;
 globalThis.SbbCheckboxElement = SbbCheckboxElement;
 globalThis.SbbCheckboxGroupElement = SbbCheckboxGroupElement;
+globalThis.SbbCheckboxPanelElement = SbbCheckboxPanelElement;
 globalThis.SbbChipElement = SbbChipElement;
 globalThis.SbbClockElement = SbbClockElement;
 globalThis.SbbContainerElement = SbbContainerElement;
@@ -195,9 +197,10 @@ globalThis.SbbPopoverElement = SbbPopoverElement;
 globalThis.SbbPopoverTriggerElement = SbbPopoverTriggerElement;
 globalThis.SbbRadioButtonElement = SbbRadioButtonElement;
 globalThis.SbbRadioButtonGroupElement = SbbRadioButtonGroupElement;
+globalThis.SbbRadioButtonPanelElement = SbbRadioButtonPanelElement;
 globalThis.SbbScreenReaderOnlyElement = SbbScreenReaderOnlyElement;
 globalThis.SbbSelectElement = SbbSelectElement;
-globalThis.SbbSelectionPanelElement = SbbSelectionPanelElement;
+globalThis.SbbSelectionExpansionPanelElement = SbbSelectionExpansionPanelElement;
 globalThis.SbbSignetElement = SbbSignetElement;
 globalThis.SbbSkiplinkListElement = SbbSkiplinkListElement;
 globalThis.SbbSliderElement = SbbSliderElement;
@@ -205,13 +208,12 @@ globalThis.SbbStatusElement = SbbStatusElement;
 globalThis.SbbStepElement = SbbStepElement;
 globalThis.SbbStepLabelElement = SbbStepLabelElement;
 globalThis.SbbStepperElement = SbbStepperElement;
+globalThis.SbbTabElement = SbbTabElement;
 globalThis.SbbTabGroupElement = SbbTabGroupElement;
-globalThis.SbbTabTitleElement = SbbTabTitleElement;
+globalThis.SbbTabLabelElement = SbbTabLabelElement;
 globalThis.SbbTagElement = SbbTagElement;
 globalThis.SbbTagGroupElement = SbbTagGroupElement;
 globalThis.SbbTeaserElement = SbbTeaserElement;
-globalThis.SbbTeaserHeroElement = SbbTeaserHeroElement;
-globalThis.SbbTeaserPaidElement = SbbTeaserPaidElement;
 globalThis.SbbTimeInputElement = SbbTimeInputElement;
 globalThis.SbbTimetableOccupancyElement = SbbTimetableOccupancyElement;
 globalThis.SbbTimetableOccupancyIconElement = SbbTimetableOccupancyIconElement;

package/journey-header.js

@@ -1,26 +1,26 @@
-import { css as m, LitElement as d, html as p, nothing as c } from "lit";
-import { property as n, customElement as h } from "lit/decorators.js";
+import { css as g, LitElement as m, html as p, nothing as c } from "lit";
+import { property as t, customElement as d } from "lit/decorators.js";
 import { SbbLanguageController as u } from "./core/controllers.js";
-import { getDocumentWritingMode as g } from "./core/dom.js";
+import { getDocumentWritingMode as h } from "./core/dom.js";
 import { i18nConnectionFrom as y, i18nConnectionTo as f, i18nConnectionRoundtrip as v } from "./core/i18n.js";
-import { SbbNegativeMixin as x } from "./core/mixins.js";
+import { SbbNegativeMixin as _ } from "./core/mixins.js";
 import "./icon.js";
 import "./screen-reader-only.js";
 import "./title.js";
-const $ = m`*,:before,:after{box-sizing:border-box}:host{--sbb-journey-header-gap: var(--sbb-spacing-fixed-1x);display:block}:host([id]){scroll-margin-block-start:var(--sbb-spacing-fixed-10x)}sbb-title{margin:0}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)}`;
-var j = Object.defineProperty, w = Object.getOwnPropertyDescriptor, t = (s, o, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? w(o, a) : o, b = s.length - 1, l; b >= 0; b--)
+const x = g`*,:before,:after{box-sizing:border-box}:host{--sbb-journey-header-gap: var(--sbb-spacing-fixed-1x);display:block}:host([id]){scroll-margin-block-start:var(--sbb-spacing-fixed-10x)}sbb-title{margin:0}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)}`;
+var $ = Object.defineProperty, j = Object.getOwnPropertyDescriptor, n = (s, o, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? j(o, a) : o, b = s.length - 1, l; b >= 0; b--)
     (l = s[b]) && (r = (i ? l(o, a, r) : l(r)) || r);
-  return i && r && j(o, a, r), r;
+  return i && r && $(o, a, r), r;
 };
-const _ = /* @__PURE__ */ new Map([
+const w = /* @__PURE__ */ new Map([
   ["s", "6"],
   ["m", "5"],
   ["l", "4"]
 ]);
-let e = class extends x(d) {
+let e = class extends _(m) {
   constructor() {
-    super(...arguments), this.level = "3", this.size = "m", this.a = new u(this);
+    super(...arguments), this.level = "3", this.size = "m", this._language = new u(this);
   }
   render() {
     const s = this.roundTrip ? "arrows-long-right-left-small" : "arrow-long-right-small";
@@ -28,23 +28,23 @@ let e = class extends x(d) {
       <sbb-title
         level=${this.level || c}
         ?negative=${this.negative}
-        visual-level=${_.get(this.size)}
+        visual-level=${w.get(this.size)}
       >
-        <span class="sbb-journey-header" dir=${g()}>
+        <span class="sbb-journey-header" dir=${h()}>
           <span class="sbb-journey-header__origin">
             <sbb-screen-reader-only>
-              ${y[this.a.current]}&nbsp;
+              ${y[this._language.current]}&nbsp;
             </sbb-screen-reader-only>
             ${this.origin}
           </span>
           <sbb-icon name=${s}></sbb-icon>
           <span class="sbb-journey-header__destination">
             <sbb-screen-reader-only>
-              &nbsp;${f[this.a.current]}&nbsp;
+              &nbsp;${f[this._language.current]}&nbsp;
             </sbb-screen-reader-only>
             ${this.destination}
             ${this.roundTrip ? p` <sbb-screen-reader-only>
-                  ${v(this.origin)[this.a.current]}
+                  ${v(this.origin)[this._language.current]}
                 </sbb-screen-reader-only>` : c}
           </span>
         </span>
@@ -52,24 +52,24 @@ let e = class extends x(d) {
     `;
   }
 };
-e.styles = $;
-t([
-  n()
+e.styles = x;
+n([
+  t()
 ], e.prototype, "origin", 2);
-t([
-  n()
+n([
+  t()
 ], e.prototype, "destination", 2);
-t([
-  n({ attribute: "round-trip", type: Boolean })
+n([
+  t({ attribute: "round-trip", type: Boolean })
 ], e.prototype, "roundTrip", 2);
-t([
-  n()
+n([
+  t()
 ], e.prototype, "level", 2);
-t([
-  n({ reflect: !0 })
+n([
+  t({ reflect: !0 })
 ], e.prototype, "size", 2);
-e = t([
-  h("sbb-journey-header")
+e = n([
+  d("sbb-journey-header")
 ], e);
 export {
   e as SbbJourneyHeaderElement