@sbb-esta/lyne-elements 1.5.0 → 1.7.0

package/icon/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/elements/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,qBACa,cAAe,SAAQ,WAAW;IAC7C;;;;OAIG;IACiC,IAAI,EAAG,MAAM,CAAC;IAElD,OAAO,CAAC,iBAAiB,CAAM;cAEN,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;cAiBpE,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAO/E;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/elements/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,qBACa,cAAe,SAAQ,WAAW;IAC7C;;;;OAIG;IACiC,IAAI,EAAG,MAAM,CAAC;IAElD,OAAO,CAAC,iBAAiB,CAAM;IAE/B;;;;OAIG;IACM,OAAO,CAAC,wBAAwB,CAAS;cAEzB,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;cAiBpE,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ5D,wBAAwB,CACtC,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,GAAG,IAAI,EACnB,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,IAAI;cAQY,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQ3D,MAAM,IAAI,cAAc;CAG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}

package/icon.js

@@ -1,73 +1,73 @@
-import { state as v, property as f, customElement as w } from "lit/decorators.js";
-import { isServer as y, css as N, LitElement as I, html as c, nothing as p } from "lit";
-import { unsafeHTML as $ } from "lit/directives/unsafe-html.js";
-import { until as A } from "lit/directives/until.js";
-import { hostAttributes as S } from "./core/decorators.js";
-import { readConfig as L } from "./core/config.js";
-const C = (t) => typeof t == "string", g = (t) => {
+import { isServer as y, css as w, LitElement as N, html as c, nothing as m } from "lit";
+import { state as b, property as h, customElement as A } from "lit/decorators.js";
+import { unsafeHTML as C } from "lit/directives/unsafe-html.js";
+import { until as I } from "lit/directives/until.js";
+import { hostAttributes as $ } from "./core/decorators.js";
+import { readConfig as S } from "./core/config.js";
+const L = (t) => typeof t == "string", _ = (t) => {
   if (t.nodeType === 1) {
     if (t.nodeName.toLowerCase() === "script")
       return !1;
     for (let e = 0; e < t.attributes.length; e++) {
-      const o = t.attributes[e].name;
-      if (C(o) && o.toLowerCase().indexOf("on") === 0)
+      const i = t.attributes[e].name;
+      if (L(i) && i.toLowerCase().indexOf("on") === 0)
         return !1;
     }
     for (let e = 0; e < t.childNodes.length; e++)
-      if (!g(t.childNodes[e]))
+      if (!_(t.childNodes[e]))
         return !1;
   }
   return !0;
-}, E = (t, e = !0, o = !1) => {
+}, E = (t, e = !0, i = !1) => {
   const r = document.createElement("div");
   r.innerHTML = t;
-  for (let i = r.childNodes.length - 1; i >= 0; i--)
-    r.childNodes[i].nodeName.toLowerCase() !== "svg" && r.removeChild(r.childNodes[i]);
+  for (let o = r.childNodes.length - 1; o >= 0; o--)
+    r.childNodes[o].nodeName.toLowerCase() !== "svg" && r.removeChild(r.childNodes[o]);
   const s = r.firstElementChild;
-  return s && s.nodeName.toLowerCase() === "svg" && (o && !s.classList.contains("color-immutable") && s.classList.add("color-immutable"), e === !1 || g(s)) ? r.innerHTML : "";
-}, b = "https://icons.app.sbb.ch/", P = (/* @__PURE__ */ new Map()).set("default", `${b}icons/`).set("picto", `${b}picto/`), m = /* @__PURE__ */ new Map(), O = (t, e, o) => {
-  var h;
-  const r = L().icon ?? {}, s = ((h = r.namespaces) == null ? void 0 : h.get(t)) ?? P.get(t);
+  return s && s.nodeName.toLowerCase() === "svg" && (i && !s.classList.contains("color-immutable") && s.classList.add("color-immutable"), e === !1 || _(s)) ? r.innerHTML : "";
+}, g = "https://icons.app.sbb.ch/", P = (/* @__PURE__ */ new Map()).set("default", `${g}icons/`).set("picto", `${g}picto/`), v = /* @__PURE__ */ new Map(), O = (t, e, i) => {
+  var f;
+  const r = S().icon ?? {}, s = ((f = r.namespaces) == null ? void 0 : f.get(t)) ?? P.get(t);
   if (s == null)
     throw Error(
       `Unable to find the namespace "${t}". Please register your custom namespace.`
     );
-  const i = `${s}${e}.svg`;
-  let a = m.get(i);
+  const o = `${s}${e}.svg`;
+  let a = v.get(o);
   if (!a)
     if (typeof fetch < "u" && !y)
       a = (r.interceptor ?? ((l) => l.request()))({
         namespace: t,
         name: e,
-        url: i,
-        request: () => fetch(i).then(async (l) => {
+        url: o,
+        request: () => fetch(o).then(async (l) => {
           if (!l.ok)
             throw new Error("Failed to load icon " + t + ":" + e);
-          return E(await l.text(), o);
+          return E(await l.text(), i);
         }).catch((l) => {
           throw Error(l);
         })
-      }), m.set(i, a);
+      }), v.set(o, a);
     else
       return Promise.resolve("");
   return a;
-}, x = N`*,:before,:after{box-sizing:border-box}:host{display:inline-block;line-height:0;-webkit-tap-highlight-color:transparent}:host([data-empty]){--sbb-icon-default-dimension: 0}:host([data-empty][data-namespace=default][name$=-small]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-small)}:host([data-empty][data-namespace=default][name$=-medium]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-medium)}:host([data-empty][data-namespace=default][name$=-large]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-large)}svg{width:var(--sbb-icon-svg-width, var(--sbb-icon-default-dimension));height:var(--sbb-icon-svg-height, var(--sbb-icon-default-dimension));stroke:var(--sbb-icon-svg-stroke-color);stroke-width:var(--sbb-icon-svg-stroke-width)}svg:not(.color-immutable) [fill]:not([fill=none]){fill:currentcolor}svg:not(.color-immutable) [stroke]:not([stroke=none]){stroke:currentcolor}svg:not(.color-immutable)>:where(path,polygon,polyline):where(:not([stroke]):not([fill])),svg:not(.color-immutable) :where(:not([stroke]):not([fill])) :where(path,polygon,polyline):where(:not([stroke]):not([fill])){fill:currentcolor}`;
-var z = Object.defineProperty, M = Object.getOwnPropertyDescriptor, u = (t, e, o, r) => {
-  for (var s = r > 1 ? void 0 : r ? M(e, o) : e, i = t.length - 1, a; i >= 0; i--)
-    (a = t[i]) && (s = (r ? a(e, o, s) : a(s)) || s);
-  return r && s && z(e, o, s), s;
+}, x = w`*,:before,:after{box-sizing:border-box}:host{display:inline-block;line-height:0;-webkit-tap-highlight-color:transparent}:host([data-empty]){--sbb-icon-default-dimension: 0}:host([data-empty][data-namespace=default][name$=-small]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-small)}:host([data-empty][data-namespace=default][name$=-medium]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-medium)}:host([data-empty][data-namespace=default][name$=-large]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-large)}svg{width:var(--sbb-icon-svg-width, var(--sbb-icon-default-dimension));height:var(--sbb-icon-svg-height, var(--sbb-icon-default-dimension));stroke:var(--sbb-icon-svg-stroke-color);stroke-width:var(--sbb-icon-svg-stroke-width)}svg:not(.color-immutable) [fill]:not([fill=none]){fill:currentcolor}svg:not(.color-immutable) [stroke]:not([stroke=none]){stroke:currentcolor}svg:not(.color-immutable)>:where(path,polygon,polyline):where(:not([stroke]):not([fill])),svg:not(.color-immutable) :where(:not([stroke]):not([fill])) :where(path,polygon,polyline):where(:not([stroke]):not([fill])){fill:currentcolor}`;
+var z = Object.defineProperty, M = Object.getOwnPropertyDescriptor, d = (t, e, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? M(e, i) : e, o = t.length - 1, a; o >= 0; o--)
+    (a = t[o]) && (s = (r ? a(e, i, s) : a(s)) || s);
+  return r && s && z(e, i, s), s;
 };
-let n = class extends I {
+let n = class extends N {
   constructor() {
     super(...arguments), this._svgNamespace = n._defaultNamespace, this.noSanitize = !1;
   }
   async loadSvgIcon(t) {
     if (!t)
       return;
-    const [e, o] = this._splitIconName(t);
+    const [e, i] = this._splitIconName(t);
     this._svgNamespace = e, this.setAttribute("data-namespace", this._svgNamespace);
-    const r = this.fetchSvgIcon(this._svgNamespace, o);
-    this._svgIcon = r.then((s) => $(s));
+    const r = this.fetchSvgIcon(this._svgNamespace, i);
+    this._svgIcon = r.then((s) => C(s));
     try {
       this.toggleAttribute("data-empty", !await r);
     } catch {
@@ -95,7 +95,7 @@ let n = class extends I {
   }
   render() {
     return c`<span class="sbb-icon-inner"
-      >${A(
+      >${I(
       this._svgIcon,
       // To reserve space, we need an empty svg to apply dimension to.
       c`<svg width="0" height="0"></svg>`
@@ -105,29 +105,29 @@ let n = class extends I {
 };
 n.styles = x;
 n._defaultNamespace = "default";
-u([
-  v()
+d([
+  b()
 ], n.prototype, "_svgNamespace", 2);
-u([
-  v()
+d([
+  b()
 ], n.prototype, "_svgIcon", 2);
-u([
-  f({ attribute: "no-sanitize", type: Boolean })
+d([
+  h({ attribute: "no-sanitize", type: Boolean })
 ], n.prototype, "noSanitize", 2);
-n = u([
-  S({
+n = d([
+  $({
     "data-namespace": n._defaultNamespace,
     "data-empty": ""
   })
 ], n);
-var U = Object.defineProperty, j = Object.getOwnPropertyDescriptor, _ = (t, e, o, r) => {
-  for (var s = r > 1 ? void 0 : r ? j(e, o) : e, i = t.length - 1, a; i >= 0; i--)
-    (a = t[i]) && (s = (r ? a(e, o, s) : a(s)) || s);
-  return r && s && U(e, o, s), s;
+var U = Object.defineProperty, j = Object.getOwnPropertyDescriptor, p = (t, e, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? j(e, i) : e, o = t.length - 1, a; o >= 0; o--)
+    (a = t[o]) && (s = (r ? a(e, i, s) : a(s)) || s);
+  return r && s && U(e, i, s), s;
 };
-let d = class extends n {
+let u = class extends n {
   constructor() {
-    super(...arguments), this._defaultAriaLabel = "";
+    super(...arguments), this._defaultAriaLabel = "", this._sbbAngularCompatibility = !1;
   }
   async fetchSvgIcon(t, e) {
     return this.getAttribute("aria-label") === this._defaultAriaLabel && this.removeAttribute("aria-label"), this._defaultAriaLabel = `Icon ${e.replace(/-/g, " ")}`, this.getAttribute("aria-hidden") === "false" && !this.hasAttribute("aria-label") && e && this.setAttribute("aria-label", this._defaultAriaLabel), super.fetchSvgIcon(t, e);
@@ -135,40 +135,49 @@ let d = class extends n {
   willUpdate(t) {
     super.willUpdate(t), t.has("name") && this.loadSvgIcon(this.name);
   }
+  attributeChangedCallback(t, e, i) {
+    t === "svgicon" ? this._sbbAngularCompatibility = !!i : super.attributeChangedCallback(t, e, i);
+  }
   firstUpdated(t) {
     super.firstUpdated(t), this.hasAttribute("aria-hidden") || this.setAttribute("aria-hidden", "true");
   }
+  render() {
+    return this._sbbAngularCompatibility ? c`<slot></slot>` : super.render();
+  }
 };
-_([
-  f({ reflect: !0 })
-], d.prototype, "name", 2);
-d = _([
-  w("sbb-icon")
-], d);
-var T = Object.defineProperty, q = (t, e, o, r) => {
-  for (var s = void 0, i = t.length - 1, a; i >= 0; i--)
-    (a = t[i]) && (s = a(e, o, s) || s);
-  return s && T(e, o, s), s;
+p([
+  h({ reflect: !0 })
+], u.prototype, "name", 2);
+p([
+  b()
+], u.prototype, "_sbbAngularCompatibility", 2);
+u = p([
+  A("sbb-icon")
+], u);
+var k = Object.defineProperty, T = (t, e, i, r) => {
+  for (var s = void 0, o = t.length - 1, a; o >= 0; o--)
+    (a = t[o]) && (s = a(e, i, s) || s);
+  return s && k(e, i, s), s;
 };
 const J = (t) => {
   class e extends t {
     renderIconSlot(r) {
       return c`
         <slot name="icon">
-          ${this.iconName ? c`<sbb-icon name=${this.iconName} class=${r || p}></sbb-icon>` : p}
+          ${this.iconName ? c`<sbb-icon name=${this.iconName} class=${r || m}></sbb-icon>` : m}
         </slot>
       `;
     }
   }
-  return q([
-    f({ attribute: "icon-name", reflect: !0 })
+  return T([
+    h({ attribute: "icon-name", reflect: !0 })
   ], e.prototype, "iconName"), e;
 };
 export {
   n as SbbIconBase,
-  d as SbbIconElement,
+  u as SbbIconElement,
   J as SbbIconNameMixin,
   O as getSvgContent,
-  g as isValid,
+  _ as isValid,
   E as validateContent
 };

package/image/image.d.ts

@@ -1,5 +1,4 @@
 import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
-
 export interface InterfaceImageAttributesSizesConfig {
     breakpoints: InterfaceImageAttributesSizesConfigBreakpoint[];
 }

package/image.js

@@ -4,8 +4,8 @@ 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, 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{display:flex;flex-direction:column;gap:var(--sbb-spacing-fixed-4x);margin:0;height:100%}.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;object-position:var(--sbb-image-object-position);transition:opacity var(--sbb-image-animation-duration) var(--sbb-animation-easing)}.sbb-image__wrapper{display:flex;position:relative;overflow:hidden;width:100%;height:100%;aspect-ratio:var(--sbb-image-aspect-ratio);border-radius:var(--sbb-image-border-radius)}.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)}`;
 var h = Object.freeze, u = Object.defineProperty, j = Object.getOwnPropertyDescriptor, o = (e, t, r, i) => {
-  for (var n = i > 1 ? void 0 : i ? j(t, r) : t, p = e.length - 1, b; p >= 0; p--)
-    (b = e[p]) && (n = (i ? b(t, r, n) : b(n)) || n);
+  for (var n = i > 1 ? void 0 : i ? j(t, r) : t, c = e.length - 1, b; c >= 0; c--)
+    (b = e[c]) && (n = (i ? b(t, r, n) : b(n)) || n);
   return i && n && u(t, r, n), n;
 }, A = (e, t) => h(u(e, "raw", { value: h(e.slice()) })), g;
 const U = (e) => {
@@ -23,8 +23,8 @@ const U = (e) => {
     return [];
   let r = !1, i = !1;
   const n = ["image", "mediaQueries"];
-  return t.breakpoints.forEach((p) => {
-    const b = Object.keys(p);
+  return t.breakpoints.forEach((c) => {
+    const b = Object.keys(c);
     b.forEach((l) => {
       n.includes(l) || (r = !0);
     }), n.forEach((l) => {
@@ -34,21 +34,21 @@ const U = (e) => {
 }, H = {
   once: !0,
   passive: !0
-}, 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)
+}, p = (e) => e / I, V = {
+  "sbb-breakpoint-zero-min": p(w),
+  "sbb-breakpoint-zero-max": p(S),
+  "sbb-breakpoint-micro-min": p(P),
+  "sbb-breakpoint-micro-max": p(M),
+  "sbb-breakpoint-small-min": p(z),
+  "sbb-breakpoint-small-max": p(C),
+  "sbb-breakpoint-medium-min": p(B),
+  "sbb-breakpoint-medium-max": p(L),
+  "sbb-breakpoint-large-min": p(O),
+  "sbb-breakpoint-large-max": p(Q),
+  "sbb-breakpoint-wide-min": p(F),
+  "sbb-breakpoint-wide-max": p(D),
+  "sbb-breakpoint-ultra-min": p(E),
+  "sbb-breakpoint-ultra-max": p(T)
 };
 let a = class extends _ {
   constructor() {
@@ -154,8 +154,8 @@ let a = class extends _ {
       const i = r.conditionFeature;
       let n;
       r.conditionFeatureValue.lyneDesignToken ? n = this._matchMediaQueryDesignToken(r.conditionFeatureValue.value) : n = r.conditionFeatureValue.value;
-      const p = r.conditionOperator ? ` ${r.conditionOperator} ` : "";
-      t += `(${i}: ${n})${p}`;
+      const c = r.conditionOperator ? ` ${r.conditionOperator} ` : "";
+      t += `(${i}: ${n})${c}`;
     }), t;
   }
   _imageLoaded() {
@@ -189,8 +189,8 @@ let a = class extends _ {
 
           <picture>
             <!-- render picture element sources -->
-            ${n.map((p) => {
-      const b = p.image.height, l = p.image.width, f = this._createMediaQueryString(p.mediaQueries);
+            ${n.map((c) => {
+      const b = c.image.height, l = c.image.width, f = this._createMediaQueryString(c.mediaQueries);
       return [
         d` <source
                   media=${`${f}`}
@@ -216,8 +216,8 @@ let a = class extends _ {
         ${e ? d`<figcaption
               class="sbb-image__caption"
               .innerHTML=${e}
-              ${$((p) => {
-      this._captionElement = p;
+              ${$((c) => {
+      this._captionElement = c;
     })}
             ></figcaption>` : m}
         ${t ? d(g || (g = A(['<script type="application/ld+json" .innerHTML=', "><\/script>"])), t) : m}

package/index.d.ts

@@ -15,6 +15,7 @@ import { SbbButtonElement } from "./button/button.js";
 import { SbbButtonLinkElement } from "./button/button-link.js";
 import { SbbButtonStaticElement } from "./button/button-static.js";
 import { SbbMiniButtonElement } from "./button/mini-button.js";
+import { SbbMiniButtonGroupElement } from "./button/mini-button-group.js";
 import { SbbSecondaryButtonElement } from "./button/secondary-button.js";
 import { SbbSecondaryButtonLinkElement } from "./button/secondary-button-link.js";
 import { SbbSecondaryButtonStaticElement } from "./button/secondary-button-static.js";
@@ -63,7 +64,8 @@ import { SbbIconElement } from "./icon.js";
 import { SbbImageElement } from "./image.js";
 import { SbbJourneyHeaderElement } from "./journey-header.js";
 import { SbbLeadContainerElement } from "./lead-container.js";
-import { SbbLinkListElement } from "./link-list.js";
+import { SbbLinkListElement } from "./link-list/link-list.js";
+import { SbbLinkListAnchorElement } from "./link-list/link-list-anchor.js";
 import { SbbBlockLinkElement } from "./link/block-link.js";
 import { SbbBlockLinkButtonElement } from "./link/block-link-button.js";
 import { SbbBlockLinkStaticElement } from "./link/block-link-static.js";
@@ -109,6 +111,9 @@ 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 { SbbTeaserProductElement } from "./teaser-product/teaser-product.js";
+import { SbbTeaserProductStaticElement } from "./teaser-product/teaser-product-static.js";
 import { SbbTimeInputElement } from "./time-input.js";
 import { SbbTimetableOccupancyElement } from "./timetable-occupancy.js";
 import { SbbTimetableOccupancyIconElement } from "./timetable-occupancy-icon.js";
@@ -141,6 +146,7 @@ declare global {
   var SbbButtonLinkElement: SbbButtonLinkElement;
   var SbbButtonStaticElement: SbbButtonStaticElement;
   var SbbMiniButtonElement: SbbMiniButtonElement;
+  var SbbMiniButtonGroupElement: SbbMiniButtonGroupElement;
   var SbbSecondaryButtonElement: SbbSecondaryButtonElement;
   var SbbSecondaryButtonLinkElement: SbbSecondaryButtonLinkElement;
   var SbbSecondaryButtonStaticElement: SbbSecondaryButtonStaticElement;
@@ -190,6 +196,7 @@ declare global {
   var SbbJourneyHeaderElement: SbbJourneyHeaderElement;
   var SbbLeadContainerElement: SbbLeadContainerElement;
   var SbbLinkListElement: SbbLinkListElement;
+  var SbbLinkListAnchorElement: SbbLinkListAnchorElement;
   var SbbBlockLinkElement: SbbBlockLinkElement;
   var SbbBlockLinkButtonElement: SbbBlockLinkButtonElement;
   var SbbBlockLinkStaticElement: SbbBlockLinkStaticElement;
@@ -235,6 +242,9 @@ declare global {
   var SbbTagElement: SbbTagElement;
   var SbbTagGroupElement: SbbTagGroupElement;
   var SbbTeaserElement: SbbTeaserElement;
+  var SbbTeaserHeroElement: SbbTeaserHeroElement;
+  var SbbTeaserProductElement: SbbTeaserProductElement;
+  var SbbTeaserProductStaticElement: SbbTeaserProductStaticElement;
   var SbbTimeInputElement: SbbTimeInputElement;
   var SbbTimetableOccupancyElement: SbbTimetableOccupancyElement;
   var SbbTimetableOccupancyIconElement: SbbTimetableOccupancyIconElement;

package/index.js

@@ -15,6 +15,7 @@ import { SbbButtonElement } from "./button/button.js";
 import { SbbButtonLinkElement } from "./button/button-link.js";
 import { SbbButtonStaticElement } from "./button/button-static.js";
 import { SbbMiniButtonElement } from "./button/mini-button.js";
+import { SbbMiniButtonGroupElement } from "./button/mini-button-group.js";
 import { SbbSecondaryButtonElement } from "./button/secondary-button.js";
 import { SbbSecondaryButtonLinkElement } from "./button/secondary-button-link.js";
 import { SbbSecondaryButtonStaticElement } from "./button/secondary-button-static.js";
@@ -63,7 +64,8 @@ import { SbbIconElement } from "./icon.js";
 import { SbbImageElement } from "./image.js";
 import { SbbJourneyHeaderElement } from "./journey-header.js";
 import { SbbLeadContainerElement } from "./lead-container.js";
-import { SbbLinkListElement } from "./link-list.js";
+import { SbbLinkListElement } from "./link-list/link-list.js";
+import { SbbLinkListAnchorElement } from "./link-list/link-list-anchor.js";
 import { SbbBlockLinkElement } from "./link/block-link.js";
 import { SbbBlockLinkButtonElement } from "./link/block-link-button.js";
 import { SbbBlockLinkStaticElement } from "./link/block-link-static.js";
@@ -109,6 +111,9 @@ 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 { SbbTeaserProductElement } from "./teaser-product/teaser-product.js";
+import { SbbTeaserProductStaticElement } from "./teaser-product/teaser-product-static.js";
 import { SbbTimeInputElement } from "./time-input.js";
 import { SbbTimetableOccupancyElement } from "./timetable-occupancy.js";
 import { SbbTimetableOccupancyIconElement } from "./timetable-occupancy-icon.js";
@@ -140,6 +145,7 @@ globalThis.SbbButtonElement = SbbButtonElement;
 globalThis.SbbButtonLinkElement = SbbButtonLinkElement;
 globalThis.SbbButtonStaticElement = SbbButtonStaticElement;
 globalThis.SbbMiniButtonElement = SbbMiniButtonElement;
+globalThis.SbbMiniButtonGroupElement = SbbMiniButtonGroupElement;
 globalThis.SbbSecondaryButtonElement = SbbSecondaryButtonElement;
 globalThis.SbbSecondaryButtonLinkElement = SbbSecondaryButtonLinkElement;
 globalThis.SbbSecondaryButtonStaticElement = SbbSecondaryButtonStaticElement;
@@ -189,6 +195,7 @@ globalThis.SbbImageElement = SbbImageElement;
 globalThis.SbbJourneyHeaderElement = SbbJourneyHeaderElement;
 globalThis.SbbLeadContainerElement = SbbLeadContainerElement;
 globalThis.SbbLinkListElement = SbbLinkListElement;
+globalThis.SbbLinkListAnchorElement = SbbLinkListAnchorElement;
 globalThis.SbbBlockLinkElement = SbbBlockLinkElement;
 globalThis.SbbBlockLinkButtonElement = SbbBlockLinkButtonElement;
 globalThis.SbbBlockLinkStaticElement = SbbBlockLinkStaticElement;
@@ -234,6 +241,9 @@ globalThis.SbbTabLabelElement = SbbTabLabelElement;
 globalThis.SbbTagElement = SbbTagElement;
 globalThis.SbbTagGroupElement = SbbTagGroupElement;
 globalThis.SbbTeaserElement = SbbTeaserElement;
+globalThis.SbbTeaserHeroElement = SbbTeaserHeroElement;
+globalThis.SbbTeaserProductElement = SbbTeaserProductElement;
+globalThis.SbbTeaserProductStaticElement = SbbTeaserProductStaticElement;
 globalThis.SbbTimeInputElement = SbbTimeInputElement;
 globalThis.SbbTimetableOccupancyElement = SbbTimetableOccupancyElement;
 globalThis.SbbTimetableOccupancyIconElement = SbbTimetableOccupancyIconElement;

package/journey-header/journey-header.d.ts

@@ -1,6 +1,5 @@
 import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
 import { SbbTitleLevel } from '../title.js';
-
 export type JourneyHeaderSize = 's' | 'm' | 'l';
 declare const SbbJourneyHeaderElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & typeof LitElement;
 /**

package/lead-container/lead-container.d.ts

@@ -1,5 +1,4 @@
 import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
-
 /**
  * The `sbb-lead-container` can be used for product pages to display a lead image and following content.
  *

package/lead-container.js

@@ -1,6 +1,6 @@
 import { css as t, LitElement as d, html as l } from "lit";
 import { customElement as c } from "lit/decorators.js";
-const m = t`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-lead-container-background-color: var(--sbb-color-white);--sbb-lead-container-image-ratio: 2 / 1;--sbb-lead-container-image-overlap: var(--sbb-spacing-fixed-24x);--sbb-lead-container-padding-block: var(--sbb-spacing-responsive-l);--sbb-lead-container-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-lead-container-border-radius: var(--sbb-border-radius-6x);--sbb-lead-container-image-border-radius: 0}@media (min-width: 80rem){:host{--sbb-lead-container-image-ratio: 21 / 9}}@media (min-width: 90rem){:host{--sbb-lead-container-image-border-radius: var(--sbb-lead-container-border-radius)}}.sbb-lead-container{padding-block-end:var(--sbb-spacing-responsive-l)}::slotted(sbb-image[slot=image]){--sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);--sbb-image-border-radius: var(--sbb-lead-container-image-border-radius)}::slotted(:is(img[slot=image],picture[slot=image])){display:block;width:100%;object-fit:cover;aspect-ratio:var(--sbb-lead-container-image-ratio);border-radius:var(--sbb-lead-container-image-border-radius)}::slotted(:is(sbb-breadcrumb-group,sbb-block-link).sbb-lead-container-spacing){margin-block-end:var(--sbb-spacing-fixed-4x)}::slotted(:is(sbb-alert,sbb-alert-group).sbb-lead-container-spacing){margin-block-end:var(--sbb-spacing-responsive-m)}::slotted(sbb-title.sbb-lead-container-spacing){margin-block-start:0}::slotted(.sbb-lead-container-lead-text){margin-block:0 var(--sbb-spacing-responsive-s)}@media (min-width: 90rem){.sbb-lead-container-image{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive));margin-inline:auto}}.sbb-lead-container-content-wrapper{display:grid;gap:var(--sbb-grid-base-gutter-responsive);grid-template-columns:repeat(var(--sbb-grid-base-columns),1fr);padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%;background-color:var(--sbb-lead-container-background-color)}@media (min-width: 90rem){.sbb-lead-container-content-wrapper{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}@media (min-width: 64rem){.sbb-lead-container-content-wrapper{background-color:transparent}}.sbb-lead-container-content{z-index:1;border-radius:var(--sbb-lead-container-border-radius);padding-block:var(--sbb-lead-container-padding-block);background-color:var(--sbb-lead-container-background-color);grid-column:1/-1}@media (min-width: 52.5rem){.sbb-lead-container-content{grid-column:2/-2}}@media (min-width: 64rem){.sbb-lead-container-content{margin-block-start:calc(-1 * var(--sbb-lead-container-image-overlap));padding-inline:var(--sbb-lead-container-padding-inline);margin-inline:calc(-1 * var(--sbb-lead-container-padding-inline))}}@media (min-width: 80rem){.sbb-lead-container-content{grid-column:3/-3}}@media (min-width: 90rem){.sbb-lead-container-content{grid-column:4/-4}}`;
+const m = t`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-lead-container-background-color: var(--sbb-color-white);--sbb-lead-container-image-ratio: 2 / 1;--sbb-lead-container-image-overlap: var(--sbb-spacing-fixed-24x);--sbb-lead-container-padding-block: var(--sbb-spacing-responsive-l);--sbb-lead-container-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-lead-container-border-radius: var(--sbb-border-radius-6x);--sbb-lead-container-image-border-radius: 0}@media (min-width: 80rem){:host{--sbb-lead-container-image-ratio: 21 / 9}}@media (min-width: 90rem){:host{--sbb-lead-container-image-border-radius: var(--sbb-lead-container-border-radius)}}.sbb-lead-container{padding-block-end:var(--sbb-spacing-responsive-l)}::slotted(sbb-image[slot=image]){--sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);--sbb-image-border-radius: var(--sbb-lead-container-image-border-radius)}::slotted(:is(img[slot=image],picture[slot=image])){display:block;width:100%;object-fit:cover;aspect-ratio:var(--sbb-lead-container-image-ratio);border-radius:var(--sbb-lead-container-image-border-radius)}::slotted(:is(sbb-breadcrumb-group,sbb-block-link).sbb-lead-container-spacing){margin-block-end:var(--sbb-spacing-fixed-4x)}::slotted(:is(sbb-alert,sbb-alert-group).sbb-lead-container-spacing){margin-block-end:var(--sbb-spacing-responsive-m)}::slotted(sbb-title.sbb-lead-container-spacing){margin-block-start:0}::slotted(.sbb-lead-container-lead-text){margin-block:0 var(--sbb-spacing-responsive-s)}@media (min-width: 90rem){.sbb-lead-container-image{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive));margin-inline:auto}}.sbb-lead-container-content-wrapper{background-color:var(--sbb-lead-container-background-color);display:grid;gap:var(--sbb-grid-base-gutter-responsive);grid-template-columns:repeat(var(--sbb-grid-base-columns),1fr);padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){.sbb-lead-container-content-wrapper{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}@media (min-width: 64rem){.sbb-lead-container-content-wrapper{background-color:transparent}}.sbb-lead-container-content{z-index:1;border-radius:var(--sbb-lead-container-border-radius);padding-block:var(--sbb-lead-container-padding-block);background-color:var(--sbb-lead-container-background-color);grid-column:1/-1}@media (min-width: 52.5rem){.sbb-lead-container-content{grid-column:2/-2}}@media (min-width: 64rem){.sbb-lead-container-content{margin-block-start:calc(-1 * var(--sbb-lead-container-image-overlap));padding-inline:var(--sbb-lead-container-padding-inline);margin-inline:calc(-1 * var(--sbb-lead-container-padding-inline))}}@media (min-width: 80rem){.sbb-lead-container-content{grid-column:3/-3}}@media (min-width: 90rem){.sbb-lead-container-content{grid-column:4/-4}}`;
 var g = Object.defineProperty, p = Object.getOwnPropertyDescriptor, v = (o, a, i, r) => {
   for (var e = r > 1 ? void 0 : r ? p(a, i) : a, n = o.length - 1, b; n >= 0; n--)
     (b = o[n]) && (e = (r ? b(a, i, e) : b(e)) || e);

package/link/block-link/block-link.d.ts

@@ -1,5 +1,4 @@
 import { SbbLinkBaseElement } from '../../core/base-elements.js';
-
 declare const SbbBlockLinkElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbBlockLinkCommonElementMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & typeof SbbLinkBaseElement;
 /**
  * It displays a link enhanced with the SBB Design.

package/link/block-link-button/block-link-button.d.ts

@@ -1,5 +1,4 @@
 import { SbbButtonBaseElement } from '../../core/base-elements.js';
-
 declare const SbbBlockLinkButtonElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbBlockLinkCommonElementMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & typeof SbbButtonBaseElement;
 /**
  * It displays a link enhanced with the SBB Design, which will behave as a button.

package/link/block-link-static/block-link-static.d.ts

@@ -1,5 +1,4 @@
 import { SbbActionBaseElement } from '../../core/base-elements.js';
-
 declare const SbbBlockLinkStaticElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbBlockLinkCommonElementMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & typeof SbbActionBaseElement;
 /**
  * It displays a static link enhanced with the SBB Design.

package/link/common/block-link-common.d.ts

@@ -2,7 +2,6 @@ import { SbbActionBaseElement } from '../../core/base-elements.js';
 import { SbbIconPlacement } from '../../core/interfaces.js';
 import { AbstractConstructor } from '../../core/mixins.js';
 import { SbbLinkCommonElementMixinType } from './link-common.js';
-
 export declare class SbbBlockLinkCommonElementMixinType extends SbbLinkCommonElementMixinType {
     iconName?: string;
     iconPlacement?: SbbIconPlacement;

package/link/common/inline-link-common.d.ts

@@ -1,7 +1,6 @@
 import { SbbActionBaseElement } from '../../core/base-elements.js';
 import { AbstractConstructor } from '../../core/mixins.js';
 import { SbbLinkCommonElementMixinType } from './link-common.js';
-
 export declare class SbbInlineLinkCommonElementMixinType extends SbbLinkCommonElementMixinType {
 }
 export declare const SbbInlineLinkCommonElementMixin: <T extends AbstractConstructor<SbbActionBaseElement>>(superClass: T) => AbstractConstructor<SbbInlineLinkCommonElementMixinType> & T;

package/link/common/link-common.d.ts

@@ -1,6 +1,5 @@
 import { SbbActionBaseElement } from '../../core/base-elements.js';
 import { SbbNegativeMixinType, AbstractConstructor } from '../../core/mixins.js';
-
 export type SbbLinkSize = 'xs' | 's' | 'm';
 export declare class SbbLinkCommonElementMixinType extends SbbNegativeMixinType {
     size?: SbbLinkSize;

package/link/common.js

@@ -1,16 +1,16 @@
 import { property as c } from "lit/decorators.js";
 import { html as f } from "lit/static-html.js";
-import { SbbIconNameMixin as v } from "../icon.js";
+import { SbbIconNameMixin as h } from "../icon.js";
 import { hostAttributes as d, slotState as u } from "../core/decorators.js";
 import { SbbNegativeMixin as p } from "../core/mixins.js";
 import { css as b } from "lit";
-const a = b`*,:before,:after{box-sizing:border-box}:host{outline:none!important}@media (forced-colors: active){:host([role=button]){--sbb-link-color-normal: ButtonText;--sbb-link-color-hover: ButtonText;--sbb-link-color-active: ButtonText}}.sbb-action-base{color:var(--sbb-link-color-normal);text-decoration:var(--sbb-link-text-decoration, underline);-webkit-user-select:none;user-select:none;display:flex;align-items:center;word-break:break-word;width:100%;cursor:pointer;padding:var(--sbb-link-padding, 0);outline:none}@media (forced-colors: active){.sbb-action-base{text-decoration:underline}}:host([disabled]) .sbb-action-base{pointer-events:none;cursor:default}@media (forced-colors: active){:host([disabled]) .sbb-action-base{color:GrayText}}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-action-base,:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-action-base:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}@media (any-hover: hover){:host(:hover:not([disabled])) .sbb-action-base{color:var(--sbb-link-color-hover);text-decoration:underline}}:host(:is(:active,[data-active]):not([disabled])) .sbb-action-base{color:var(--sbb-link-color-active)}`;
+const a = b`*,:before,:after{box-sizing:border-box}:host{outline:none!important}@media (forced-colors: active){:host([role=button]){--sbb-link-color-normal: ButtonText;--sbb-link-color-hover: ButtonText;--sbb-link-color-active: ButtonText}}.sbb-action-base{color:var(--sbb-link-color-normal);text-decoration:var(--sbb-link-text-decoration, underline);-webkit-user-select:none;user-select:none}@media (forced-colors: active){.sbb-action-base{text-decoration:underline}}.sbb-action-base{display:flex;align-items:center;word-break:break-word;width:100%;cursor:pointer;padding:var(--sbb-link-padding, 0);outline:none}:host([disabled]) .sbb-action-base{pointer-events:none;cursor:default}@media (forced-colors: active){:host([disabled]) .sbb-action-base{color:GrayText}}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-action-base,:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-action-base:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}@media (any-hover: hover){:host(:hover:not([disabled])) .sbb-action-base{color:var(--sbb-link-color-hover);text-decoration:var(--sbb-link-hover-text-decoration, underline)}}:host(:is(:active,[data-active]):not([disabled])) .sbb-action-base{color:var(--sbb-link-color-active)}`;
 var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, l = (i, t, o, n) => {
   for (var e = n > 1 ? void 0 : n ? g(t, o) : t, s = i.length - 1, r; s >= 0; s--)
     (r = i[s]) && (e = (n ? r(t, o, e) : r(e)) || e);
   return n && e && m(t, o, e), e;
 };
-const h = (i) => {
+const v = (i) => {
   let t = class extends p(i) {
     constructor() {
       super(...arguments), this.size = "s";
@@ -32,7 +32,7 @@ var y = Object.defineProperty, k = (i, t, o, n) => {
   return e && y(t, o, e), e;
 };
 const O = (i) => {
-  const o = class o extends h(v(i)) {
+  const o = class o extends v(h(i)) {
     constructor() {
       super(...arguments), this.iconPlacement = "start";
     }
@@ -49,7 +49,7 @@ const O = (i) => {
     c({ attribute: "icon-placement", reflect: !0 })
   ], t.prototype, "iconPlacement"), t;
 }, z = b`:host{font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;font-size:inherit;text-align:inherit;--sbb-link-color-normal: inherit;--sbb-link-color-hover: var(--sbb-color-red125);--sbb-link-color-active: var(--sbb-color-red150);color:inherit;display:inline-block}:host([negative]){--sbb-link-color-hover: var(--sbb-color-graphite);--sbb-link-color-active: var(--sbb-color-metal);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-action-base{font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;font-size:inherit;text-align:inherit}`, j = (i) => {
-  const o = class o extends h(i) {
+  const o = class o extends v(i) {
   };
   o.styles = [a, z];
   let t = o;
@@ -58,5 +58,5 @@ const O = (i) => {
 export {
   O as SbbBlockLinkCommonElementMixin,
   j as SbbInlineLinkCommonElementMixin,
-  h as SbbLinkCommonElementMixin
+  v as SbbLinkCommonElementMixin
 };

package/link/link/link.d.ts

@@ -1,5 +1,4 @@
 import { SbbLinkBaseElement } from '../../core/base-elements.js';
-
 declare const SbbLinkElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbInlineLinkCommonElementMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & typeof SbbLinkBaseElement;
 /**
  * It displays a link enhanced with the SBB Design.

package/link/link-button/link-button.d.ts

@@ -1,5 +1,4 @@
 import { SbbButtonBaseElement } from '../../core/base-elements.js';
-
 declare const SbbLinkButtonElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbInlineLinkCommonElementMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & typeof SbbButtonBaseElement;
 /**
  * It displays a link enhanced with the SBB Design, which will behave as a button.

package/link/link-static/link-static.d.ts

@@ -1,5 +1,4 @@
 import { SbbActionBaseElement } from '../../core/base-elements.js';
-
 declare const SbbLinkStaticElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbInlineLinkCommonElementMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & typeof SbbActionBaseElement;
 /**
  * It displays a static link enhanced with the SBB Design.

package/link-list/common/link-list-base.d.ts

@@ -0,0 +1,27 @@
+import { PropertyValues, TemplateResult, LitElement } from 'lit';
+import { WithListChildren } from '../../core/mixins.js';
+import { SbbBlockLinkButtonElement, SbbBlockLinkElement, SbbBlockLinkStaticElement, SbbLinkSize } from '../../link.js';
+import { SbbTitleLevel } from '../../title.js';
+declare const SbbLinkListBaseElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNegativeMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNamedSlotListMixinType<SbbBlockLinkElement | SbbBlockLinkButtonElement | SbbBlockLinkStaticElement>> & typeof LitElement;
+/**
+ * It displays a list of `sbb-block-link`.
+ *
+ * @slot - Use the unnamed slot to add one or more `sbb-block-link`.
+ * @slot title - Use this slot to provide a title.
+ */
+export declare class SbbLinkListBaseElement extends SbbLinkListBaseElement_base {
+    protected readonly listChildLocalNames: string[];
+    /** The title text we want to show before the list. */
+    titleContent?: string;
+    /** The semantic level of the title, e.g. 2 = h2. */
+    titleLevel: SbbTitleLevel;
+    /**
+     * Text size of the nested sbb-block-link instances.
+     * This will overwrite the size attribute of nested sbb-block-link instances.
+     */
+    size: SbbLinkSize;
+    protected willUpdate(changedProperties: PropertyValues<WithListChildren<this>>): void;
+    protected render(): TemplateResult;
+}
+export {};
+//# sourceMappingURL=link-list-base.d.ts.map