@sbb-esta/lyne-elements 1.15.0 → 1.16.0

package/tabs/tab-group.js

@@ -1,8 +1,8 @@
-var I = (n) => {
-  throw TypeError(n);
+var S = (a) => {
+  throw TypeError(a);
 };
-var S = (n, r, l) => r.has(n) || I("Cannot " + l);
-var y = (n, r, l) => (S(n, r, "read from private field"), l ? l.call(n) : r.get(n)), z = (n, r, l) => r.has(n) ? I("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(n) : r.set(n, l), _ = (n, r, l, c) => (S(n, r, "write to private field"), c ? c.call(n, l) : r.set(n, l), l);
+var I = (a, r, l) => r.has(a) || S("Cannot " + l);
+var y = (a, r, l) => (I(a, r, "read from private field"), l ? l.call(a) : r.get(a)), z = (a, r, l) => r.has(a) ? S("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(a) : r.set(a, l), _ = (a, r, l, c) => (I(a, r, "write to private field"), c ? c.call(a, l) : r.set(a, l), l);
 import { __runInitializers as h, __esDecorate as m } from "tslib";
 import { MutationController as w } from "@lit-labs/observers/mutation-controller.js";
 import { ResizeController as E } from "@lit-labs/observers/resize-controller.js";
@@ -20,7 +20,7 @@ const F = k`*,:before,:after{box-sizing:border-box}:host{--sbb-tab-group-animati
 };
 let B = 0, ot = (() => {
   var b, d;
-  let n = [$("sbb-tab-group")], r, l = [], c, p = U(R), v = [], g, A, x = [], T = [];
+  let a = [$("sbb-tab-group")], r, l = [], c, p = U(R), v = [], g, A, x = [], T = [];
   var f = (d = class extends p {
     constructor() {
       super(...arguments);
@@ -38,15 +38,16 @@ let B = 0, ot = (() => {
         skipInitial: !0,
         callback: (t) => this._onTabContentElementResize(t)
       }), this._size = "l", _(this, b, h(this, x, 0)), this._selectedTabChanged = (h(this, T), new j(this, f.events.didChange)), this._onContentSlotChange = () => {
+        var i, e;
         this._tabContentElement = this.shadowRoot.querySelector("div.tab-content");
-        const t = this._getTabs().filter((e) => !this._tabs.includes(e));
-        t.length && (t.forEach((e) => this._configure(e)), this._tabs = this._tabs.concat(t));
+        const t = this._getTabs().filter((s) => !this._tabs.includes(s));
+        t.length && (t.forEach((s) => this._configure(s)), this._tabs = this._tabs.concat(t), (e = (i = t.find((s) => s.active)) == null ? void 0 : i.tabGroupActions) == null || e.select());
       }, this._onTabsSlotChange = () => {
         const t = this._getTabs();
-        t.length < this._tabs.length && (this._tabs.filter((i) => !t.includes(i)).forEach((i) => {
-          var a;
-          (a = i.tab) == null || a.remove();
-        }), this._tabs = t), this._tabs.forEach((e) => e.setAttribute("data-size", this.size));
+        t.length < this._tabs.length && (this._tabs.filter((e) => !t.includes(e)).forEach((e) => {
+          var s;
+          (s = e.tab) == null || s.remove();
+        }), this._tabs = t), this._tabs.forEach((i) => i.setAttribute("data-size", this.size));
       };
     }
     /** Size variant, either s, l or xl. */
@@ -69,34 +70,34 @@ let B = 0, ot = (() => {
     connectedCallback() {
       super.connectedCallback();
       const t = this._abort.signal;
-      this.addEventListener("keydown", (e) => this._handleKeyDown(e), { signal: t });
+      this.addEventListener("keydown", (i) => this._handleKeyDown(i), { signal: t });
     }
     firstUpdated(t) {
-      super.firstUpdated(t), this._tabs = this._getTabs(), this._tabs.forEach((e) => this._configure(e)), this._initSelection(), this._tabGroupResizeObserver.observe(this._tabGroupElement);
+      super.firstUpdated(t), this._tabs = this._getTabs(), this._tabs.forEach((i) => this._configure(i)), this._initSelection(), this._tabGroupResizeObserver.observe(this._tabGroupElement);
     }
     /**
      * Disables a tab by index.
      * @param tabIndex The index of the tab you want to disable.
      */
     disableTab(t) {
-      var e, i;
-      (i = (e = this._tabs[t]) == null ? void 0 : e.tabGroupActions) == null || i.disable();
+      var i, e;
+      (e = (i = this._tabs[t]) == null ? void 0 : i.tabGroupActions) == null || e.disable();
     }
     /**
      * Enables a tab by index.
      * @param tabIndex The index of the tab you want to enable.
      */
     enableTab(t) {
-      var e, i;
-      (i = (e = this._tabs[t]) == null ? void 0 : e.tabGroupActions) == null || i.enable();
+      var i, e;
+      (e = (i = this._tabs[t]) == null ? void 0 : i.tabGroupActions) == null || e.enable();
     }
     /**
      * Activates a tab by index.
      * @param tabIndex The index of the tab you want to activate.
      */
     activateTab(t) {
-      var e, i;
-      (i = (e = this._tabs[t]) == null ? void 0 : e.tabGroupActions) == null || i.select();
+      var i, e;
+      (e = (i = this._tabs[t]) == null ? void 0 : i.tabGroupActions) == null || e.select();
     }
     _getTabs() {
       return Array.from(this.children ?? []).filter((t) => /^sbb-tab-label$/u.test(t.localName));
@@ -112,77 +113,78 @@ let B = 0, ot = (() => {
       return `sbb-tab-panel-${++B}`;
     }
     _initSelection() {
-      var t, e, i;
-      this.initialSelectedIndex >= 0 && this.initialSelectedIndex < this._tabs.length && !this._tabs[this.initialSelectedIndex].disabled ? (t = this._tabs[this.initialSelectedIndex].tabGroupActions) == null || t.select() : (i = (e = this._enabledTabs()[0]) == null ? void 0 : e.tabGroupActions) == null || i.select();
+      var t, i, e;
+      this.initialSelectedIndex >= 0 && this.initialSelectedIndex < this._tabs.length && !this._tabs[this.initialSelectedIndex].disabled ? (t = this._tabs[this.initialSelectedIndex].tabGroupActions) == null || t.select() : (e = (i = this._enabledTabs()[0]) == null ? void 0 : i.tabGroupActions) == null || e.select();
     }
     _onTabAttributesChange(t) {
-      var e, i, a;
-      for (const s of t) {
-        if (s.type !== "attributes")
+      var i, e, s;
+      for (const n of t) {
+        if (n.type !== "attributes")
           return;
-        const o = s.target;
-        s.attributeName === "disabled" && (o.hasAttribute("disabled") && o !== this._selectedTab ? (e = o.tabGroupActions) == null || e.disable() : o.disabled && ((i = o.tabGroupActions) == null || i.enable())), s.attributeName === "active" && (o.hasAttribute("active") && !o.disabled ? (a = o.tabGroupActions) == null || a.select() : o === this._selectedTab && o.toggleAttribute("active", !0));
+        const o = n.target;
+        n.attributeName === "disabled" && (o.hasAttribute("disabled") && o !== this._selectedTab ? (i = o.tabGroupActions) == null || i.disable() : o.disabled && ((e = o.tabGroupActions) == null || e.enable())), n.attributeName === "active" && (o.hasAttribute("active") && !o.disabled ? (s = o.tabGroupActions) == null || s.select() : o === this._selectedTab && o.toggleAttribute("active", !0));
       }
     }
     _onTabGroupElementResize(t) {
-      for (const e of t) {
-        const i = e.target.firstElementChild.assignedElements();
-        for (const a of i)
-          a.toggleAttribute("data-has-divider", a === i[0] || a.offsetLeft === i[0].offsetLeft), this.style.setProperty("--sbb-tab-group-width", `${this._tabGroupElement.clientWidth}px`);
+      for (const i of t) {
+        const e = i.target.firstElementChild.assignedElements();
+        for (const s of e)
+          s.toggleAttribute("data-has-divider", s === e[0] || s.offsetLeft === e[0].offsetLeft), this.style.setProperty("--sbb-tab-group-width", `${this._tabGroupElement.clientWidth}px`);
       }
     }
     _onTabContentElementResize(t) {
-      for (const e of t) {
-        const i = Math.floor(e.contentRect.height);
-        this._tabContentElement.style.height = `${i}px`;
-      }
+      if (this._tabContentElement)
+        for (const i of t) {
+          const e = Math.floor(i.contentRect.height);
+          this._tabContentElement.style.height = `${e}px`;
+        }
     }
     _configure(t) {
-      var e;
+      var i;
       t.tabGroupActions = {
         activate: () => {
-          var i;
-          t.toggleAttribute("active", !0), t.active = !0, t.tabIndex = 0, t.setAttribute("aria-selected", "true"), (i = t.tab) == null || i.toggleAttribute("active", !0);
+          var e;
+          t.toggleAttribute("active", !0), t.active = !0, t.tabIndex = 0, t.setAttribute("aria-selected", "true"), (e = t.tab) == null || e.toggleAttribute("active", !0);
         },
         deactivate: () => {
-          var i;
-          t.removeAttribute("active"), t.active = !1, t.tabIndex = -1, t.setAttribute("aria-selected", "false"), (i = t.tab) == null || i.removeAttribute("active");
+          var e;
+          t.removeAttribute("active"), t.active = !1, t.tabIndex = -1, t.setAttribute("aria-selected", "false"), (e = t.tab) == null || e.removeAttribute("active");
         },
         disable: () => {
-          var i, a, s;
-          t.disabled || (t.hasAttribute("disabled") || t.toggleAttribute("disabled", !0), t.disabled = !0, t.tabIndex = -1, t.setAttribute("aria-selected", "false"), (i = t.tab) == null || i.removeAttribute("active"), t.active && (t.removeAttribute("active"), t.active = !1, (s = (a = this._enabledTabs()[0]) == null ? void 0 : a.tabGroupActions) == null || s.select()));
+          var e, s, n;
+          t.disabled || (t.hasAttribute("disabled") || t.toggleAttribute("disabled", !0), t.disabled = !0, t.tabIndex = -1, t.setAttribute("aria-selected", "false"), (e = t.tab) == null || e.removeAttribute("active"), t.active && (t.removeAttribute("active"), t.active = !1, (n = (s = this._enabledTabs()[0]) == null ? void 0 : s.tabGroupActions) == null || n.select()));
         },
         enable: () => {
           t.disabled && (t.removeAttribute("disabled"), t.disabled = !1);
         },
         select: () => {
-          var i, a;
+          var e, s;
           if (t !== this._selectedTab && !t.disabled) {
-            const s = this._selectedTab;
-            s && ((i = s.tabGroupActions) == null || i.deactivate(), this._tabContentResizeObserver.unobserve(s.tab)), (a = t.tabGroupActions) == null || a.activate(), this._selectedTab = t, this._tabContentResizeObserver.observe(t.tab);
+            const n = this._selectedTab;
+            n && ((e = n.tabGroupActions) == null || e.deactivate(), this._tabContentResizeObserver.unobserve(n.tab)), (s = t.tabGroupActions) == null || s.activate(), this._selectedTab = t, this._tabContentResizeObserver.observe(t.tab);
             const o = this._tabs;
             this._selectedTabChanged.emit({
               activeIndex: o.findIndex((u) => u === t),
               activeTabLabel: t,
               activeTab: t.tab,
-              previousIndex: o.findIndex((u) => u === s),
-              previousTabLabel: s,
-              previousTab: s == null ? void 0 : s.tab
+              previousIndex: o.findIndex((u) => u === n),
+              previousTabLabel: n,
+              previousTab: n == null ? void 0 : n.tab
             });
           }
         }
-      }, ((e = t.nextElementSibling) == null ? void 0 : e.localName) === "sbb-tab" && (t.tab = t.nextElementSibling, t.tab.id = this._assignId(), t.tab instanceof q && (t.tab.tabIndex = 0, t.tab.configure())), t.tabIndex = -1, t.disabled = t.hasAttribute("disabled"), t.active = t.hasAttribute("active") && !t.disabled, t.setAttribute("role", "tab"), t.setAttribute("aria-selected", "false"), t.addEventListener("click", () => {
-        var i;
-        (i = t.tabGroupActions) == null || i.select();
+      }, ((i = t.nextElementSibling) == null ? void 0 : i.localName) === "sbb-tab" && (t.tab = t.nextElementSibling, t.tab.id = this._assignId(), t.tab instanceof q && (t.tab.tabIndex = 0, t.tab.configure())), t.tabIndex = -1, t.disabled = t.hasAttribute("disabled"), t.active = t.hasAttribute("active") && !t.disabled, t.setAttribute("role", "tab"), t.setAttribute("aria-selected", String(t.active)), t.addEventListener("click", () => {
+        var e;
+        (e = t.tabGroupActions) == null || e.select();
       }), t.tab && (t.setAttribute("aria-controls", t.tab.id), t.tab.setAttribute("role", "tabpanel"), t.tab.toggleAttribute("active", t.active)), this._tabAttributeObserver.observe(t), t.slot = "tab-bar";
     }
     _handleKeyDown(t) {
-      var i, a, s;
-      const e = this._enabledTabs();
-      if (!(!e || // don't trap nested handling
+      var e, s, n;
+      const i = this._enabledTabs();
+      if (!(!i || // don't trap nested handling
       t.target !== this && t.target.parentElement !== this) && N(t)) {
-        const o = e.findIndex((G) => G.active), u = K(t, o, e.length);
-        (a = (i = e[u]) == null ? void 0 : i.tabGroupActions) == null || a.select(), (s = e[u]) == null || s.focus(), t.preventDefault();
+        const o = i.findIndex((G) => G.active), u = K(t, o, i.length);
+        (s = (e = i[u]) == null ? void 0 : e.tabGroupActions) == null || s.select(), (n = i[u]) == null || n.focus(), t.preventDefault();
       }
     }
     render() {
@@ -202,11 +204,11 @@ let B = 0, ot = (() => {
     }
   }, b = new WeakMap(), c = d, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
-    g = [C()], A = [P(), C({ attribute: "initial-selected-index", type: Number })], m(d, null, g, { kind: "setter", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, set: (e, i) => {
-      e.size = i;
-    } }, metadata: t }, null, v), m(d, null, A, { kind: "accessor", name: "initialSelectedIndex", static: !1, private: !1, access: { has: (e) => "initialSelectedIndex" in e, get: (e) => e.initialSelectedIndex, set: (e, i) => {
-      e.initialSelectedIndex = i;
-    } }, metadata: t }, x, T), m(null, r = { value: c }, n, { kind: "class", name: c.name, metadata: t }, null, l), f = c = r.value, t && Object.defineProperty(c, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+    g = [C()], A = [P(), C({ attribute: "initial-selected-index", type: Number })], m(d, null, g, { kind: "setter", name: "size", static: !1, private: !1, access: { has: (i) => "size" in i, set: (i, e) => {
+      i.size = e;
+    } }, metadata: t }, null, v), m(d, null, A, { kind: "accessor", name: "initialSelectedIndex", static: !1, private: !1, access: { has: (i) => "initialSelectedIndex" in i, get: (i) => i.initialSelectedIndex, set: (i, e) => {
+      i.initialSelectedIndex = e;
+    } }, metadata: t }, x, T), m(null, r = { value: c }, a, { kind: "class", name: c.name, metadata: t }, null, l), f = c = r.value, t && Object.defineProperty(c, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
   })(), d.styles = F, d.events = {
     didChange: "didChange"
   }, h(c, l), d);

package/teaser/teaser.d.ts

@@ -19,7 +19,8 @@ export declare class SbbTeaserElement extends SbbLinkBaseElement {
     accessor titleContent: string;
     /** Content of chip. */
     accessor chipContent: string;
-    protected renderTemplate(): TemplateResult;
+    protected render(): TemplateResult;
+    protected renderContent(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/teaser/teaser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"teaser.d.ts","sourceRoot":"","sources":["../../../src/elements/teaser/teaser.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,YAAY,CAAC;AACpB,OAAO,aAAa,CAAC;AAErB;;;;;;;GAOG;AACH,qBAGM,gBAAiB,SAAQ,kBAAkB;IAC/C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,gFAAgF;IAChF,SAA6C,SAAS,EAAE,gBAAgB,GAAG,OAAO,GAAG,OAAO,CACzE;IAEnB,2DAA2D;IAC3D,SAAwD,UAAU,EAAE,aAAa,CAAO;IAExF,wBAAwB;IACxB,SAEgB,YAAY,EAAE,MAAM,CAAM;IAE1C,uBAAuB;IACvB,SAEgB,WAAW,EAAE,MAAM,CAAM;cAEtB,cAAc,IAAI,cAAc;CAoBpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
+{"version":3,"file":"teaser.d.ts","sourceRoot":"","sources":["../../../src/elements/teaser/teaser.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,YAAY,CAAC;AACpB,OAAO,0BAA0B,CAAC;AAClC,OAAO,aAAa,CAAC;AAErB;;;;;;;GAOG;AACH,qBAGM,gBAAiB,SAAQ,kBAAkB;IAC/C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,gFAAgF;IAChF,SAA6C,SAAS,EAAE,gBAAgB,GAAG,OAAO,GAAG,OAAO,CACzE;IAEnB,2DAA2D;IAC3D,SAAwD,UAAU,EAAE,aAAa,CAAO;IAExF,wBAAwB;IACxB,SAEgB,YAAY,EAAE,MAAM,CAAM;IAE1C,uBAAuB;IACvB,SAEgB,WAAW,EAAE,MAAM,CAAM;cAEtB,MAAM,IAAI,cAAc;IAa3C,SAAS,CAAC,aAAa,IAAI,cAAc;CAoB1C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

package/teaser-product/common/teaser-product-common.d.ts

@@ -1,5 +1,5 @@
 import { SbbActionBaseElement } from '../../core/base-elements.js';
-import { SbbNegativeMixinType, AbstractConstructor } from '../../core/mixins.js';
+import { AbstractConstructor, SbbNegativeMixinType } from '../../core/mixins.js';
 export declare class SbbTeaserProductCommonElementMixinType extends SbbNegativeMixinType {
     accessor imageAlignment: 'after' | 'before';
 }

package/teaser-product/common/teaser-product-common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"teaser-product-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/teaser-product/common/teaser-product-common.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAExE,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACzB,MAAM,sBAAsB,CAAC;AAE9B,MAAM,CAAC,OAAO,OAAO,sCAAuC,SAAQ,oBAAoB;IACtF,SAAgB,cAAc,EAAE,OAAO,GAAG,QAAQ,CAAC;CACpD;AAGD,eAAO,MAAM,kCAAkC,GAC7C,CAAC,SAAS,mBAAmB,CAAC,oBAAoB,CAAC,cAEvC,CAAC,KACZ,mBAAmB,CAAC,sCAAsC,CAAC,GAAG,CA6BhE,CAAC"}
+{"version":3,"file":"teaser-product-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/teaser-product/common/teaser-product-common.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAExE,OAAO,EACL,KAAK,mBAAmB,EAExB,KAAK,oBAAoB,EAC1B,MAAM,sBAAsB,CAAC;AAE9B,MAAM,CAAC,OAAO,OAAO,sCAAuC,SAAQ,oBAAoB;IACtF,SAAgB,cAAc,EAAE,OAAO,GAAG,QAAQ,CAAC;CACpD;AAGD,eAAO,MAAM,kCAAkC,GAC7C,CAAC,SAAS,mBAAmB,CAAC,oBAAoB,CAAC,cAEvC,CAAC,KACZ,mBAAmB,CAAC,sCAAsC,CAAC,GAAG,CA+BhE,CAAC"}

package/teaser-product/common.js

@@ -2,19 +2,19 @@ var m = (t) => {
   throw TypeError(t);
 };
 var v = (t, e, r) => e.has(t) || m("Cannot " + r);
-var f = (t, e, r) => (v(t, e, "read from private field"), r ? r.call(t) : e.get(t)), _ = (t, e, r) => e.has(t) ? m("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), h = (t, e, r, b) => (v(t, e, "write to private field"), b ? b.call(t, r) : e.set(t, r), r);
+var f = (t, e, r) => (v(t, e, "read from private field"), r ? r.call(t) : e.get(t)), _ = (t, e, r) => e.has(t) ? m("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), h = (t, e, r, i) => (v(t, e, "write to private field"), i ? i.call(t, r) : e.set(t, r), r);
 import { __esDecorate as k, __runInitializers as c } from "tslib";
 import { html as y, css as S } from "lit";
 import { property as w } from "lit/decorators.js";
 import { slotState as A } from "../core/decorators.js";
 import { SbbNegativeMixin as z } from "../core/mixins.js";
 const M = (t) => (() => {
-  var n, a;
-  let r = [A()], b, d = [], o, l = z(t), p, u = [], g = [];
+  var b, a;
+  let r = [A()], i, d = [], o, l = z(t), u, p = [], g = [];
   return a = class extends l {
     constructor() {
       super(...arguments);
-      _(this, n, c(this, u, "after"));
+      _(this, b, c(this, p, "after"));
       c(this, g);
     }
     /**
@@ -22,31 +22,33 @@ const M = (t) => (() => {
      * Only relevant starting from large breakpoint.
      */
     get imageAlignment() {
-      return f(this, n);
+      return f(this, b);
     }
     set imageAlignment(s) {
-      h(this, n, s);
+      h(this, b, s);
     }
     renderTemplate() {
       return y`
-        <span class="sbb-teaser-product__image-container"><slot name="image"></slot></span>
-        <span class="sbb-teaser-product__container">
-          <span class="sbb-teaser-product__content">
-            <slot></slot>
-          </span>
-          <span class="sbb-teaser-product__footnote">
-            <slot name="footnote"></slot>
-          </span>
-        </span>
+        <div class="sbb-teaser-product__root">
+          <div class="sbb-teaser-product__image-container"><slot name="image"></slot></div>
+          <div class="sbb-teaser-product__container">
+            <span class="sbb-teaser-product__content">
+              <slot></slot>
+            </span>
+            <div class="sbb-teaser-product__footnote">
+              <slot name="footnote"></slot>
+            </div>
+          </div>
+        </div>
       `;
     }
-  }, n = new WeakMap(), o = a, (() => {
+  }, b = new WeakMap(), o = a, (() => {
     const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
-    p = [w({ attribute: "image-alignment", reflect: !0 })], k(a, null, p, { kind: "accessor", name: "imageAlignment", static: !1, private: !1, access: { has: (i) => "imageAlignment" in i, get: (i) => i.imageAlignment, set: (i, x) => {
-      i.imageAlignment = x;
-    } }, metadata: s }, u, g), k(null, b = { value: o }, r, { kind: "class", name: o.name, metadata: s }, null, d), o = b.value, s && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s }), c(o, d);
+    u = [w({ attribute: "image-alignment", reflect: !0 })], k(a, null, u, { kind: "accessor", name: "imageAlignment", static: !1, private: !1, access: { has: (n) => "imageAlignment" in n, get: (n) => n.imageAlignment, set: (n, x) => {
+      n.imageAlignment = x;
+    } }, metadata: s }, p, g), k(null, i = { value: o }, r, { kind: "class", name: o.name, metadata: s }, null, d), o = i.value, s && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s }), c(o, d);
   })(), o;
-})(), O = S`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-teaser-product-background-color: var(--sbb-color-cloud);--sbb-teaser-product-background-gradient-direction: to right;--sbb-teaser-product-background: var(--sbb-teaser-product-background-color);--sbb-teaser-product-border-radius: var(--sbb-border-radius-4x);--sbb-teaser-product-content-color: var(--sbb-color-iron);--sbb-teaser-product-footer-color: var(--sbb-color-anthracite);--sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-l);--sbb-teaser-product-min-height: 37.5rem;--sbb-teaser-product-background-gradient-start: 25%;--sbb-teaser-product-background-gradient-end: 75%}@media (min-width: 64rem){:host{--sbb-teaser-product-background: linear-gradient( var(--sbb-teaser-product-background-gradient-direction), var(--sbb-teaser-product-background-color) var(--sbb-teaser-product-background-gradient-start), transparent var(--sbb-teaser-product-background-gradient-end) )}}:host([negative]){--sbb-teaser-product-background-color: var(--sbb-color-midnight);--sbb-teaser-product-content-color: var(--sbb-color-cloud);--sbb-teaser-product-footer-color: var(--sbb-color-cloud);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-title-text-color-normal-override: var(--sbb-color-milk)}:host([image-alignment=before]){--sbb-teaser-product-background-gradient-direction: to left}.sbb-teaser-product__image-container{display:block;overflow:hidden;border-radius:var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius) 0 0}@media (min-width: 64rem){.sbb-teaser-product__image-container{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-teaser-product-border-radius)}}::slotted(img){display:flex;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}::slotted(sbb-image){--sbb-image-border-radius: 0;height:100%}::slotted(p.sbb-teaser-product--spacing){margin:0}::slotted(sbb-title.sbb-teaser-product--spacing){--sbb-title-margin-block-start: 0}::slotted(:is(sbb-action-group,[data-action]).sbb-teaser-product--spacing){margin-block-start:var(--sbb-spacing-responsive-xxs)}.sbb-action-base{display:block;position:relative;text-decoration:none}@media (forced-colors: active){.sbb-action-base:after{content:"";position:absolute;display:block;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-border-width-2x) solid CanvasText;border-radius:var(--sbb-teaser-product-border-radius)}}.sbb-teaser-product__container{display:block;background:var(--sbb-teaser-product-background);border-radius:0 0 var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius);padding:var(--sbb-spacing-responsive-s)}@media (min-width: 64rem){.sbb-teaser-product__container{display:grid;grid:"content ." 1fr "footnote ." auto/1fr 1fr;column-gap:var(--sbb-spacing-responsive-xxl);background:var(--sbb-teaser-product-background);border-radius:var(--sbb-teaser-product-border-radius);padding-block:var(--sbb-teaser-product-container-padding-block) 0;padding-inline:var(--sbb-spacing-responsive-xl);position:relative}:host([image-alignment=before]) .sbb-teaser-product__container{grid-template-areas:". content" ". footnote"}}.sbb-teaser-product__content{grid-area:content;align-self:center;margin:0;color:var(--sbb-teaser-product-content-color)}@media (min-width: 64rem){.sbb-teaser-product__content{align-content:center;min-height:calc(var(--sbb-teaser-product-min-height) - 2 * var(--sbb-teaser-product-container-padding-block))}}.sbb-teaser-product__footnote{grid-area:footnote;display:block;padding-block-start:var(--sbb-spacing-responsive-s);color:var(--sbb-teaser-product-footer-color);--sbb-text-font-size: var(--sbb-font-size-text-xxs);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)}:host(:not([data-slot-names~=footnote])) .sbb-teaser-product__footnote{padding-block-start:0}@media (min-width: 64rem){.sbb-teaser-product__footnote{min-height:var(--sbb-teaser-product-container-padding-block);padding-block:var(--sbb-spacing-responsive-xs)}}`;
+})(), O = S`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-teaser-product-background-color: var(--sbb-color-cloud);--sbb-teaser-product-background-gradient-direction: to right;--sbb-teaser-product-background: var(--sbb-teaser-product-background-color);--sbb-teaser-product-border-radius: var(--sbb-border-radius-4x);--sbb-teaser-product-content-color: var(--sbb-color-iron);--sbb-teaser-product-footer-color: var(--sbb-color-anthracite);--sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-l);--sbb-teaser-product-min-height: 37.5rem;--sbb-teaser-product-background-gradient-start: 25%;--sbb-teaser-product-background-gradient-end: 75%}@media (min-width: 64rem){:host{--sbb-teaser-product-background: linear-gradient( var(--sbb-teaser-product-background-gradient-direction), var(--sbb-teaser-product-background-color) var(--sbb-teaser-product-background-gradient-start), transparent var(--sbb-teaser-product-background-gradient-end) )}}:host([negative]){--sbb-teaser-product-background-color: var(--sbb-color-midnight);--sbb-teaser-product-content-color: var(--sbb-color-cloud);--sbb-teaser-product-footer-color: var(--sbb-color-cloud);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-title-text-color-normal-override: var(--sbb-color-milk)}:host([image-alignment=before]){--sbb-teaser-product-background-gradient-direction: to left}.sbb-teaser-product__image-container{overflow:hidden;border-radius:var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius) 0 0}@media (min-width: 64rem){.sbb-teaser-product__image-container{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-teaser-product-border-radius)}}::slotted(img){display:flex;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}::slotted(sbb-image){--sbb-image-border-radius: 0;height:100%}::slotted(p.sbb-teaser-product--spacing){margin:0}::slotted(sbb-title.sbb-teaser-product--spacing){--sbb-title-margin-block-start: 0}::slotted(:is(sbb-action-group,[data-action]).sbb-teaser-product--spacing){margin-block-start:var(--sbb-spacing-responsive-xxs)}@media (forced-colors: active){.sbb-teaser-product__root:after{content:"";position:absolute;display:block;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-border-width-2x) solid CanvasText;border-radius:var(--sbb-teaser-product-border-radius)}}.sbb-action-base{display:block;position:relative;text-decoration:none}.sbb-teaser-product__container{background:var(--sbb-teaser-product-background);border-radius:0 0 var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius);padding:var(--sbb-spacing-responsive-s)}@media (min-width: 64rem){.sbb-teaser-product__container{display:grid;grid:"content ." 1fr "footnote ." auto/1fr 1fr;column-gap:var(--sbb-spacing-responsive-xxl);background:var(--sbb-teaser-product-background);border-radius:var(--sbb-teaser-product-border-radius);padding-block:var(--sbb-teaser-product-container-padding-block) 0;padding-inline:var(--sbb-spacing-responsive-xl);position:relative}:host([image-alignment=before]) .sbb-teaser-product__container{grid-template-areas:". content" ". footnote"}}.sbb-teaser-product__content{grid-area:content;align-self:center;margin:0;color:var(--sbb-teaser-product-content-color)}@media (min-width: 64rem){.sbb-teaser-product__content{align-content:center;min-height:calc(var(--sbb-teaser-product-min-height) - 2 * var(--sbb-teaser-product-container-padding-block))}}.sbb-teaser-product__footnote{grid-area:footnote;padding-block-start:var(--sbb-spacing-responsive-s);color:var(--sbb-teaser-product-footer-color);--sbb-text-font-size: var(--sbb-font-size-text-xxs);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)}:host(:not([data-slot-names~=footnote])) .sbb-teaser-product__footnote{padding-block-start:0}@media (min-width: 64rem){.sbb-teaser-product__footnote{min-height:var(--sbb-teaser-product-container-padding-block);padding-block:var(--sbb-spacing-responsive-xs)}}`;
 export {
   M as SbbTeaserProductCommonElementMixin,
   O as teaserProductCommonStyle

package/teaser-product/teaser-product/teaser-product.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup } from 'lit';
+import { CSSResultGroup, TemplateResult } from 'lit';
 import { SbbLinkBaseElement } from '../../core/base-elements.js';
 declare const SbbTeaserProductElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbTeaserProductCommonElementMixinType> & typeof SbbLinkBaseElement;
 /**
@@ -12,6 +12,7 @@ declare const SbbTeaserProductElement_base: import('../../core/mixins.js').Abstr
  */
 export declare class SbbTeaserProductElement extends SbbTeaserProductElement_base {
     static styles: CSSResultGroup;
+    protected render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/teaser-product/teaser-product/teaser-product.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"teaser-product.d.ts","sourceRoot":"","sources":["../../../../src/elements/teaser-product/teaser-product/teaser-product.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;;AAKjE;;;;;;;;GAQG;AACH,qBAEM,uBAAwB,SAAQ,4BAAsD;IAC1F,OAAuB,MAAM,EAAE,cAAc,CAAqC;CACnF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,oBAAoB,EAAE,uBAAuB,CAAC;KAC/C;CACF"}
+{"version":3,"file":"teaser-product.d.ts","sourceRoot":"","sources":["../../../../src/elements/teaser-product/teaser-product/teaser-product.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAKjE,OAAO,6BAA6B,CAAC;;AAErC;;;;;;;;GAQG;AACH,qBAEM,uBAAwB,SAAQ,4BAAsD;IAC1F,OAAuB,MAAM,EAAE,cAAc,CAAqC;cAE/D,MAAM,IAAI,cAAc;CAY5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,oBAAoB,EAAE,uBAAuB,CAAC;KAC/C;CACF"}

package/teaser-product/teaser-product.js

@@ -1,18 +1,31 @@
-import { __esDecorate as b, __runInitializers as n } from "tslib";
-import { customElement as l } from "lit/decorators.js";
-import { SbbLinkBaseElement as u } from "../core/base-elements.js";
-import { SbbTeaserProductCommonElementMixin as c, teaserProductCommonStyle as d } from "./common.js";
-import { css as m } from "lit";
-const f = m`:host{--sbb-teaser-product-brightness-hover: var(--sbb-hover-image-brightness);--sbb-teaser-product-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-teaser-product-animation-easing: var(--sbb-animation-easing);--sbb-teaser-product-border-radius: var(--sbb-border-radius-4x)}@media (any-hover: hover){:host(:hover){--sbb-teaser-product-brightness: var(--sbb-teaser-product-brightness-hover)}}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser-product:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-product-border-radius)}@media (forced-colors: active){:host(:hover) .sbb-teaser-product:after{border-color:Highlight}}::slotted(:is(img,sbb-image)){will-change:filter;transition-property:filter;transition-duration:var(--sbb-teaser-product-animation-duration);transition-timing-function:var(--sbb-animation-easing);filter:brightness(var(--sbb-teaser-product-brightness, 1))}`;
-let _ = (() => {
+import { __esDecorate as b, __runInitializers as l } from "tslib";
+import { customElement as c } from "lit/decorators.js";
+import { html as i } from "lit/static-html.js";
+import { SbbLinkBaseElement as d } from "../core/base-elements.js";
+import { SbbTeaserProductCommonElementMixin as u, teaserProductCommonStyle as m } from "./common.js";
+import { css as p } from "lit";
+import "../screen-reader-only.js";
+const v = p`:host{--sbb-teaser-product-brightness-hover: var(--sbb-hover-image-brightness);--sbb-teaser-product-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-teaser-product-animation-easing: var(--sbb-animation-easing);--sbb-teaser-product-border-radius: var(--sbb-border-radius-4x)}@media (forced-colors: active){:host{--sbb-title-text-color-normal-override: LinkText !important;--sbb-teaser-product-content-color: LinkText !important;--sbb-teaser-product-footer-color: LinkText !important}}@media (any-hover: hover){:host(:hover){--sbb-teaser-product-brightness: var(--sbb-teaser-product-brightness-hover)}}::slotted(:is(img,sbb-image)){will-change:filter;transition-property:filter;transition-duration:var(--sbb-teaser-product-animation-duration);transition-timing-function:var(--sbb-animation-easing);filter:brightness(var(--sbb-teaser-product-brightness, 1))}.sbb-teaser-product__wrapper{position:relative}.sbb-teaser-product__root{pointer-events:none}@media (forced-colors: active){:host(:hover) .sbb-teaser-product__root:after{border-color:Highlight}}.sbb-teaser-product{position:absolute;top:0;right:0;bottom:0;left:0}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser-product:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-product-border-radius)}`;
+let T = (() => {
   var e;
-  let i = [l("sbb-teaser-product")], s, a = [], t, o = c(u);
-  return e = class extends o {
+  let n = [c("sbb-teaser-product")], o, s = [], t, a = u(d);
+  return e = class extends a {
+    render() {
+      return i`
+      <div class="sbb-teaser-product__wrapper">
+        ${this.renderLink(
+        // For SEO we add the accessibility hidden as hidden content of the link
+        i`<sbb-screen-reader-only>${this.accessibilityLabel}</sbb-screen-reader-only>`
+      )}
+        ${this.renderTemplate()}
+      </div>
+    `;
+    }
   }, t = e, (() => {
-    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    b(null, s = { value: t }, i, { kind: "class", name: t.name, metadata: r }, null, a), t = s.value, r && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), e.styles = [d, f], n(t, a), t;
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
+    b(null, o = { value: t }, n, { kind: "class", name: t.name, metadata: r }, null, s), t = o.value, r && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), e.styles = [m, v], l(t, s), t;
 })();
 export {
-  _ as SbbTeaserProductElement
+  T as SbbTeaserProductElement
 };

package/teaser.js

@@ -4,24 +4,25 @@ var j = (t) => {
 var D = (t, s, i) => s.has(t) || j("Cannot " + i);
 var v = (t, s, i) => (D(t, s, "read from private field"), i ? i.call(t) : s.get(t)), m = (t, s, i) => s.has(t) ? j("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, i), p = (t, s, i, o) => (D(t, s, "write to private field"), o ? o.call(t, i) : s.set(t, i), i);
 import { __esDecorate as f, __runInitializers as n } from "tslib";
-import { customElement as O, property as g } from "lit/decorators.js";
-import { html as B } from "lit/static-html.js";
+import { customElement as B, property as _ } from "lit/decorators.js";
+import { html as u } from "lit/static-html.js";
 import { SbbLinkBaseElement as F } from "./core/base-elements.js";
-import { slotState as H, forceType as $, omitEmptyConverter as P } from "./core/decorators.js";
+import { slotState as H, forceType as O, omitEmptyConverter as P } from "./core/decorators.js";
 import { css as U } from "lit";
 import "./chip.js";
+import "./screen-reader-only.js";
 import "./title.js";
-const q = U`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-teaser-scale-hover: 1.02;--sbb-teaser-description-color: var(--sbb-color-granite);--sbb-teaser-flex-direction: row;--sbb-teaser-align-items: center;--sbb-teaser-gap: var(--sbb-spacing-fixed-4x);--sbb-teaser-width: fit-content;--sbb-teaser-border-radius: var(--sbb-border-radius-4x);--sbb-teaser-brightness-hover: var(--sbb-hover-image-brightness);--sbb-teaser-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) )}:host([alignment=after]){--sbb-teaser-align-items: start}:host([alignment=below]){--sbb-teaser-flex-direction: column;--sbb-teaser-align-items: baseline;--sbb-teaser-gap: var(--sbb-spacing-fixed-3x);--sbb-teaser-width: 100%}.sbb-teaser{display:flex;text-decoration:none}.sbb-teaser:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}@media (forced-colors: active){.sbb-teaser{outline-offset:var(--sbb-focus-outline-offset);outline:CanvasText solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}.sbb-teaser:hover{outline-color:Highlight}}.sbb-teaser__container{display:flex;flex-flow:var(--sbb-teaser-flex-direction) nowrap;align-items:var(--sbb-teaser-align-items);gap:var(--sbb-teaser-gap);max-width:100%;width:100%}.sbb-teaser__text{overflow:hidden;max-width:100%}::slotted([slot=image]){width:18.75rem;will-change:transform;display:block;filter:brightness(var(--sbb-teaser-brightness, 1));transition:var(--sbb-teaser-animation-duration) var(--sbb-animation-easing)}@media (any-hover: hover){.sbb-teaser:hover ::slotted([slot=image]){transform:scale(var(--sbb-teaser-scale-hover));--sbb-teaser-brightness: var(--sbb-teaser-brightness-hover)}}::slotted(sbb-image[slot=image]){--sbb-image-aspect-ratio: 4 / 3}::slotted(img[slot=image]){aspect-ratio:4/3;object-fit:cover}.sbb-teaser__image-wrapper{flex-shrink:0;overflow:hidden;border-radius:var(--sbb-teaser-border-radius);transition:var(--sbb-teaser-animation-duration) var(--sbb-animation-easing)}@media (any-hover: hover){.sbb-teaser:hover .sbb-teaser__image-wrapper{box-shadow:var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-hard-2-color),var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-hard-1-color)}}.sbb-teaser__chip{display:block;max-width:fit-content;margin-block-end:var(--sbb-spacing-fixed-1x)}:host(:not([data-slot-names~=chip],[chip-content])) .sbb-teaser__chip{display:none}.sbb-teaser__lead{margin:0}.sbb-teaser__description{--sbb-text-font-size: var(--sbb-font-size-text-s);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);display:inline-block;color:var(--sbb-teaser-description-color)}`;
-let X = (() => {
-  var b, c, h, d, r;
-  let t = [O("sbb-teaser"), H()], s, i = [], o, u = F, _, w = [], x = [], y, C = [], z = [], k, L = [], S = [], I, T = [], E = [];
-  return r = class extends u {
+const q = U`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-teaser-scale-hover: 1.02;--sbb-teaser-description-color: var(--sbb-color-granite);--sbb-teaser-flex-direction: row;--sbb-teaser-align-items: center;--sbb-teaser-gap: var(--sbb-spacing-fixed-4x);--sbb-teaser-width: fit-content;--sbb-teaser-border-radius: var(--sbb-border-radius-4x);--sbb-teaser-brightness-hover: var(--sbb-hover-image-brightness);--sbb-teaser-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) )}@media (forced-colors: active){:host{--sbb-teaser-description-color: LinkText;--sbb-title-text-color-normal-override: LinkText !important}}:host([alignment=after]){--sbb-teaser-align-items: start}:host([alignment=below]){--sbb-teaser-flex-direction: column;--sbb-teaser-align-items: baseline;--sbb-teaser-gap: var(--sbb-spacing-fixed-3x);--sbb-teaser-width: 100%}.sbb-teaser__wrapper{display:flex;position:relative;cursor:pointer}.sbb-teaser__wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-teaser{text-decoration:none;position:absolute;top:0;right:0;bottom:0;left:0}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}@media (forced-colors: active){.sbb-teaser{outline-offset:var(--sbb-focus-outline-offset);outline:CanvasText solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}.sbb-teaser:hover{outline-color:Highlight}}.sbb-teaser__container{display:flex;flex-flow:var(--sbb-teaser-flex-direction) nowrap;align-items:var(--sbb-teaser-align-items);gap:var(--sbb-teaser-gap);max-width:100%;width:100%;pointer-events:none}.sbb-teaser__text{overflow:hidden;max-width:100%}::slotted([slot=image]){width:18.75rem;will-change:transform;display:block;filter:brightness(var(--sbb-teaser-brightness, 1));transition:var(--sbb-teaser-animation-duration) var(--sbb-animation-easing)}@media (any-hover: hover){.sbb-teaser__wrapper:hover ::slotted([slot=image]){transform:scale(var(--sbb-teaser-scale-hover));--sbb-teaser-brightness: var(--sbb-teaser-brightness-hover)}}::slotted(sbb-image[slot=image]){--sbb-image-aspect-ratio: 4 / 3}::slotted(img[slot=image]){aspect-ratio:4/3;object-fit:cover}.sbb-teaser__image-wrapper{flex-shrink:0;overflow:hidden;border-radius:var(--sbb-teaser-border-radius);transition:var(--sbb-teaser-animation-duration) var(--sbb-animation-easing)}@media (any-hover: hover){.sbb-teaser__wrapper:hover .sbb-teaser__image-wrapper{box-shadow:var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-hard-2-color),var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-hard-1-color)}}.sbb-teaser__chip{display:block;max-width:fit-content;margin-block-end:var(--sbb-spacing-fixed-1x)}:host(:not([data-slot-names~=chip],[chip-content])) .sbb-teaser__chip{display:none}.sbb-teaser__lead{margin:0}.sbb-teaser__description{--sbb-text-font-size: var(--sbb-font-size-text-s);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);display:inline-block;color:var(--sbb-teaser-description-color)}`;
+let Y = (() => {
+  var b, c, d, h, r;
+  let t = [B("sbb-teaser"), H()], s, i = [], o, g = F, w, x = [], y = [], C, z = [], k = [], L, S = [], T = [], I, $ = [], E = [];
+  return r = class extends g {
     constructor() {
       super(...arguments);
-      m(this, b, n(this, w, "after-centered"));
-      m(this, c, (n(this, x), n(this, C, "5")));
-      m(this, h, (n(this, z), n(this, L, "")));
-      m(this, d, (n(this, S), n(this, T, "")));
+      m(this, b, n(this, x, "after-centered"));
+      m(this, c, (n(this, y), n(this, z, "5")));
+      m(this, d, (n(this, k), n(this, S, "")));
+      m(this, h, (n(this, T), n(this, $, "")));
       n(this, E);
     }
     /** Teaser variant - define the position and the alignment of the text block. */
@@ -40,20 +41,31 @@ let X = (() => {
     }
     /** Content of title. */
     get titleContent() {
-      return v(this, h);
+      return v(this, d);
     }
     set titleContent(a) {
-      p(this, h, a);
+      p(this, d, a);
     }
     /** Content of chip. */
     get chipContent() {
-      return v(this, d);
+      return v(this, h);
     }
     set chipContent(a) {
-      p(this, d, a);
+      p(this, h, a);
+    }
+    render() {
+      return u`
+      <div class="sbb-teaser__wrapper">
+        ${this.renderLink(
+        // For SEO we add the accessibility hidden as hidden content of the link
+        u`<sbb-screen-reader-only>${this.accessibilityLabel}</sbb-screen-reader-only>`
+      )}
+        ${this.renderContent()}
+      </div>
+    `;
     }
-    renderTemplate() {
-      return B`
+    renderContent() {
+      return u`
       <span class="sbb-teaser__container">
         <span class="sbb-teaser__image-wrapper">
           <slot name="image"></slot>
@@ -72,19 +84,19 @@ let X = (() => {
       </span>
     `;
     }
-  }, b = new WeakMap(), c = new WeakMap(), h = new WeakMap(), d = new WeakMap(), o = r, (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
-    _ = [g({ reflect: !0 })], y = [g({ attribute: "title-level" })], k = [$(), g({ attribute: "title-content" })], I = [$(), g({ attribute: "chip-content", reflect: !0, converter: P })], f(r, null, _, { kind: "accessor", name: "alignment", static: !1, private: !1, access: { has: (e) => "alignment" in e, get: (e) => e.alignment, set: (e, l) => {
+  }, b = new WeakMap(), c = new WeakMap(), d = new WeakMap(), h = new WeakMap(), o = r, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(g[Symbol.metadata] ?? null) : void 0;
+    w = [_({ reflect: !0 })], C = [_({ attribute: "title-level" })], L = [O(), _({ attribute: "title-content" })], I = [O(), _({ attribute: "chip-content", reflect: !0, converter: P })], f(r, null, w, { kind: "accessor", name: "alignment", static: !1, private: !1, access: { has: (e) => "alignment" in e, get: (e) => e.alignment, set: (e, l) => {
       e.alignment = l;
-    } }, metadata: a }, w, x), f(r, null, y, { kind: "accessor", name: "titleLevel", static: !1, private: !1, access: { has: (e) => "titleLevel" in e, get: (e) => e.titleLevel, set: (e, l) => {
+    } }, metadata: a }, x, y), f(r, null, C, { kind: "accessor", name: "titleLevel", static: !1, private: !1, access: { has: (e) => "titleLevel" in e, get: (e) => e.titleLevel, set: (e, l) => {
       e.titleLevel = l;
-    } }, metadata: a }, C, z), f(r, null, k, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (e) => "titleContent" in e, get: (e) => e.titleContent, set: (e, l) => {
+    } }, metadata: a }, z, k), f(r, null, L, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (e) => "titleContent" in e, get: (e) => e.titleContent, set: (e, l) => {
       e.titleContent = l;
-    } }, metadata: a }, L, S), f(r, null, I, { kind: "accessor", name: "chipContent", static: !1, private: !1, access: { has: (e) => "chipContent" in e, get: (e) => e.chipContent, set: (e, l) => {
+    } }, metadata: a }, S, T), f(r, null, I, { kind: "accessor", name: "chipContent", static: !1, private: !1, access: { has: (e) => "chipContent" in e, get: (e) => e.chipContent, set: (e, l) => {
       e.chipContent = l;
-    } }, metadata: a }, T, E), f(null, s = { value: o }, t, { kind: "class", name: o.name, metadata: a }, null, i), o = s.value, a && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+    } }, metadata: a }, $, E), f(null, s = { value: o }, t, { kind: "class", name: o.name, metadata: a }, null, i), o = s.value, a && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
   })(), r.styles = q, n(o, i), o;
 })();
 export {
-  X as SbbTeaserElement
+  Y as SbbTeaserElement
 };