@sbb-esta/lyne-elements 4.7.0 → 4.8.1

package/development/teaser/teaser.component.js

@@ -1,231 +1,2 @@
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-import { __esDecorate, __runInitializers } from "tslib";
-import { customElement, property } from "lit/decorators.js";
-import { html } from "lit/static-html.js";
-import { SbbLinkBaseElement } from "../core/base-elements.js";
-import { boxSizingStyles } from "../core/styles.js";
-import { css } from "lit";
-import "../screen-reader-only.js";
-const style = css`@charset "UTF-8";
-:host {
-  display: inline-block;
-  outline: none !important;
-  --sbb-teaser-scale-hover: 1.02;
-  --sbb-teaser-description-color: var(--sbb-color-granite);
-  --sbb-teaser-description-color: light-dark(var(--sbb-color-granite), var(--sbb-color-silver));
-  --sbb-teaser-flex-direction: row;
-  --sbb-teaser-align-items: center;
-  --sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
-  --sbb-teaser-border-radius: var(--sbb-border-radius-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);
-}
-
-@media (any-hover: hover) {
-  :host(:hover) {
-    --sbb-teaser-scale: var(--sbb-teaser-scale-hover);
-  }
-}
-.sbb-teaser__wrapper {
-  display: flex;
-  position: relative;
-  cursor: var(--sbb-cursor-pointer);
-}
-.sbb-teaser__wrapper::before {
-  content: "​";
-  user-select: none;
-  width: 0;
-  height: 0;
-}
-
-.sbb-teaser {
-  text-decoration: none;
-  position: absolute;
-  inset: 0;
-}
-.sbb-teaser:focus-visible {
-  outline-offset: var(--sbb-focus-outline-offset);
-  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
-  border-radius: var(--sbb-teaser-border-radius);
-}
-@media (forced-colors: active) {
-  .sbb-teaser:focus-visible {
-    outline-offset: calc(2 * var(--sbb-focus-outline-offset));
-  }
-}
-@media (forced-colors: active) {
-  .sbb-teaser::before {
-    content: "";
-    position: absolute;
-    inset: calc(-1 * var(--sbb-focus-outline-offset));
-    pointer-events: none;
-    border-radius: calc(var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset));
-    border: var(--sbb-border-width-1x) solid CanvasText;
-  }
-}
-
-.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 {
-  --sbb-text-font-size: var(--sbb-text-font-size-s);
-  font-family: var(--sbb-typo-font-family);
-  font-weight: normal;
-  line-height: var(--sbb-typo-line-height-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
-  font-size: var(--sbb-text-font-size);
-  color: var(--sbb-teaser-description-color);
-  overflow: hidden;
-  max-width: 100%;
-}
-
-::slotted([slot=image]) {
-  width: 18.75rem;
-  display: block;
-}
-
-.sbb-teaser__image-wrapper {
-  flex-shrink: 0;
-  overflow: hidden;
-  border-radius: var(--sbb-teaser-border-radius);
-  transition: box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing);
-}
-@media (any-hover: hover) {
-  :host(:hover) .sbb-teaser__image-wrapper {
-    box-shadow: var(--sbb-box-shadow-level-9-hard);
-  }
-}
-
-.sbb-teaser__description {
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-}
-
-::slotted(sbb-chip-label) {
-  display: block;
-  max-width: fit-content;
-  margin-block-end: var(--sbb-spacing-fixed-1x);
-}
-
-::slotted(sbb-title) {
-  margin-block: 0;
-}`;
-let SbbTeaserElement = (() => {
-  var _alignment_accessor_storage, _a;
-  let _classDecorators = [customElement("sbb-teaser")];
-  let _classDescriptor;
-  let _classExtraInitializers = [];
-  let _classThis;
-  let _classSuper = SbbLinkBaseElement;
-  let _alignment_decorators;
-  let _alignment_initializers = [];
-  let _alignment_extraInitializers = [];
-  _a = class extends _classSuper {
-    constructor() {
-      super(...arguments);
-      __privateAdd(this, _alignment_accessor_storage, __runInitializers(this, _alignment_initializers, "after-centered"));
-      __runInitializers(this, _alignment_extraInitializers);
-    }
-    /** Teaser variant - define the position and the alignment of the text block. */
-    get alignment() {
-      return __privateGet(this, _alignment_accessor_storage);
-    }
-    set alignment(value) {
-      __privateSet(this, _alignment_accessor_storage, value);
-    }
-    _handleSlotchange() {
-      const chip = Array.from(this.children).find((el) => el.localName === "sbb-chip-label");
-      if (chip) {
-        chip.slot = "chip";
-      }
-      const title = Array.from(this.children).find((el) => el.localName === "sbb-title");
-      if (title) {
-        title.slot = "title";
-      }
-    }
-    _configureChip(event) {
-      const chipLabel = event.target.assignedElements().find((e) => e.localName === "sbb-chip-label");
-      if (chipLabel) {
-        customElements.upgrade(chipLabel);
-        chipLabel.color = "charcoal";
-        chipLabel.size = "xxs";
-      }
-    }
-    _configureTitle(event) {
-      const title = event.target.assignedElements().find((e) => e.localName === "sbb-title");
-      if (title) {
-        customElements.upgrade(title);
-        title.visualLevel = "5";
-      }
-    }
-    render() {
-      return html`
-      <div class="sbb-teaser__wrapper">
-        ${this.renderLink(
-        // For SEO, we add the accessibility hidden as hidden content of the link
-        html`<sbb-screen-reader-only>${this.accessibilityLabel}</sbb-screen-reader-only>`
-      )}
-        ${this.renderContent()}
-      </div>
-    `;
-    }
-    renderContent() {
-      return html`
-      <span class="sbb-teaser__container">
-        <span class="sbb-teaser__image-wrapper">
-          <slot name="image"></slot>
-        </span>
-        <span class="sbb-teaser__text">
-          <slot name="chip" @slotchange=${this._configureChip}></slot>
-          <slot name="title" @slotchange=${this._configureTitle}></slot>
-          <p class="sbb-teaser__description">
-            <slot @slotchange=${this._handleSlotchange}></slot>
-          </p>
-        </span>
-      </span>
-    `;
-    }
-  }, _alignment_accessor_storage = new WeakMap(), _classThis = _a, (() => {
-    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-    _alignment_decorators = [property({ reflect: true })];
-    __esDecorate(_a, null, _alignment_decorators, { kind: "accessor", name: "alignment", static: false, private: false, access: { has: (obj) => "alignment" in obj, get: (obj) => obj.alignment, set: (obj, value) => {
-      obj.alignment = value;
-    } }, metadata: _metadata }, _alignment_initializers, _alignment_extraInitializers);
-    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-    _classThis = _classDescriptor.value;
-    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-  })(), _a.styles = [boxSizingStyles, style], __runInitializers(_classThis, _classExtraInitializers), _a;
-  return _classThis;
-})();
-export {
-  SbbTeaserElement
-};
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVhc2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzL3RlYXNlci90ZWFzZXIuY29tcG9uZW50LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAsIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGN1c3RvbUVsZW1lbnQsIHByb3BlcnR5IH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuaW1wb3J0IHsgaHRtbCB9IGZyb20gJ2xpdC9zdGF0aWMtaHRtbC5qcyc7XG5cbmltcG9ydCB0eXBlIHsgU2JiQ2hpcExhYmVsRWxlbWVudCB9IGZyb20gJy4uL2NoaXAtbGFiZWwudHMnO1xuaW1wb3J0IHsgU2JiTGlua0Jhc2VFbGVtZW50IH0gZnJvbSAnLi4vY29yZS9iYXNlLWVsZW1lbnRzLnRzJztcbmltcG9ydCB7IGJveFNpemluZ1N0eWxlcyB9IGZyb20gJy4uL2NvcmUvc3R5bGVzLnRzJztcbmltcG9ydCB0eXBlIHsgU2JiVGl0bGVFbGVtZW50IH0gZnJvbSAnLi4vdGl0bGUudHMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi90ZWFzZXIuc2Nzcz9saXQmaW5saW5lJztcblxuaW1wb3J0ICcuLi9zY3JlZW4tcmVhZGVyLW9ubHkudHMnO1xuXG4vKipcbiAqIEl0IGRpc3BsYXlzIGFuIGludGVyYWN0aXZlIGltYWdlIHdpdGggY2FwdGlvbi5cbiAqXG4gKiBAc2xvdCBpbWFnZSAtIFNsb3QgdXNlZCB0byByZW5kZXIgdGhlIGltYWdlLlxuICogQHNsb3QgY2hpcCAtIFNsb3QgZm9yIHRoZSBgc2JiLWNoaXAtbGFiZWxgIGVsZW1lbnQuIFRoZSBzbG90IG9uIHRoZSBgc2JiLWNoaXAtbGFiZWxgIGVsZW1lbnQgaXMgYXV0b21hdGljYWxseSBhc3NpZ25lZCB3aGVuIHNsb3R0ZWQgaW4gdGhlIHVubmFtZWQgc2xvdC5cbiAqIEBzbG90IHRpdGxlIC0gU2xvdCBmb3IgdGhlIHRpdGxlLiBGb3IgdGhlIHN0YW5kYXJkIGBzYmItdGl0bGVgIGVsZW1lbnQsIHRoZSBzbG90IGlzIGF1dG9tYXRpY2FsbHkgYXNzaWduZWQgd2hlbiBzbG90dGVkIGluIHRoZSB1bm5hbWVkIHNsb3QuXG4gKiBAc2xvdCAtIFVzZSB0aGUgdW5uYW1lZCBzbG90IHRvIHJlbmRlciB0aGUgZGVzY3JpcHRpb24sIHRoZSBzYmItdGl0bGUgYW5kIHRoZSBzYmItY2hpcC1sYWJlbC5cbiAqL1xuZXhwb3J0XG5AY3VzdG9tRWxlbWVudCgnc2JiLXRlYXNlcicpXG5jbGFzcyBTYmJUZWFzZXJFbGVtZW50IGV4dGVuZHMgU2JiTGlua0Jhc2VFbGVtZW50IHtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSBzdHlsZXM6IENTU1Jlc3VsdEdyb3VwID0gW2JveFNpemluZ1N0eWxlcywgc3R5bGVdO1xuXG4gIC8qKiBUZWFzZXIgdmFyaWFudCAtIGRlZmluZSB0aGUgcG9zaXRpb24gYW5kIHRoZSBhbGlnbm1lbnQgb2YgdGhlIHRleHQgYmxvY2suICovXG4gIEBwcm9wZXJ0eSh7IHJlZmxlY3Q6IHRydWUgfSkgcHVibGljIGFjY2Vzc29yIGFsaWdubWVudDogJ2FmdGVyLWNlbnRlcmVkJyB8ICdhZnRlcicgfCAnYmVsb3cnID1cbiAgICAnYWZ0ZXItY2VudGVyZWQnO1xuXG4gIHByaXZhdGUgX2hhbmRsZVNsb3RjaGFuZ2UoKTogdm9pZCB7XG4gICAgY29uc3QgY2hpcCA9IEFycmF5LmZyb20odGhpcy5jaGlsZHJlbikuZmluZCgoZWwpID0+IGVsLmxvY2FsTmFtZSA9PT0gJ3NiYi1jaGlwLWxhYmVsJyk7XG4gICAgaWYgKGNoaXApIHtcbiAgICAgIGNoaXAuc2xvdCA9ICdjaGlwJztcbiAgICB9XG5cbiAgICBjb25zdCB0aXRsZSA9IEFycmF5LmZyb20odGhpcy5jaGlsZHJlbikuZmluZCgoZWwpID0+IGVsLmxvY2FsTmFtZSA9PT0gJ3NiYi10aXRsZScpO1xuICAgIGlmICh0aXRsZSkge1xuICAgICAgdGl0bGUuc2xvdCA9ICd0aXRsZSc7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBfY29uZmlndXJlQ2hpcChldmVudDogRXZlbnQpOiB2b2lkIHtcbiAgICAvLyBXZSBuZWVkIHRvIGNoZWNrIGFzc2lnbmVkIGVsZW1lbnRzIGJlY2F1c2UgaW4gdGhlIGltYWdlIHNsb3QgaXQgY2FuIGhhdmUgbGFiZWxzIGFzIHdlbGwuXG4gICAgY29uc3QgY2hpcExhYmVsID0gKGV2ZW50LnRhcmdldCBhcyBIVE1MU2xvdEVsZW1lbnQpXG4gICAgICAuYXNzaWduZWRFbGVtZW50cygpXG4gICAgICAuZmluZCgoZSk6IGUgaXMgU2JiQ2hpcExhYmVsRWxlbWVudCA9PiBlLmxvY2FsTmFtZSA9PT0gJ3NiYi1jaGlwLWxhYmVsJyk7XG5cbiAgICBpZiAoY2hpcExhYmVsKSB7XG4gICAgICBjdXN0b21FbGVtZW50cy51cGdyYWRlKGNoaXBMYWJlbCk7XG4gICAgICBjaGlwTGFiZWwuY29sb3IgPSAnY2hhcmNvYWwnO1xuICAgICAgY2hpcExhYmVsLnNpemUgPSAneHhzJztcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIF9jb25maWd1cmVUaXRsZShldmVudDogRXZlbnQpOiB2b2lkIHtcbiAgICBjb25zdCB0aXRsZSA9IChldmVudC50YXJnZXQgYXMgSFRNTFNsb3RFbGVtZW50KVxuICAgICAgLmFzc2lnbmVkRWxlbWVudHMoKVxuICAgICAgLmZpbmQoKGUpOiBlIGlzIFNiYlRpdGxlRWxlbWVudCA9PiBlLmxvY2FsTmFtZSA9PT0gJ3NiYi10aXRsZScpO1xuXG4gICAgaWYgKHRpdGxlKSB7XG4gICAgICBjdXN0b21FbGVtZW50cy51cGdyYWRlKHRpdGxlKTtcbiAgICAgIHRpdGxlLnZpc3VhbExldmVsID0gJzUnO1xuICAgIH1cbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSByZW5kZXIoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgIC8vIFdlIHJlbmRlciB0aGUgY29udGVudCBvdXRzaWRlIHRoZSBhbmNob3IgdGFnIHRvIGFsbG93IHNjcmVlbiByZWFkZXJzIHRvIG5hdmlnYXRlIHRocm91Z2ggaXRcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxkaXYgY2xhc3M9XCJzYmItdGVhc2VyX193cmFwcGVyXCI+XG4gICAgICAgICR7dGhpcy5yZW5kZXJMaW5rKFxuICAgICAgICAgIC8vIEZvciBTRU8sIHdlIGFkZCB0aGUgYWNjZXNzaWJpbGl0eSBoaWRkZW4gYXMgaGlkZGVuIGNvbnRlbnQgb2YgdGhlIGxpbmtcbiAgICAgICAgICBodG1sYDxzYmItc2NyZWVuLXJlYWRlci1vbmx5PiR7dGhpcy5hY2Nlc3NpYmlsaXR5TGFiZWx9PC9zYmItc2NyZWVuLXJlYWRlci1vbmx5PmAsXG4gICAgICAgICl9XG4gICAgICAgICR7dGhpcy5yZW5kZXJDb250ZW50KCl9XG4gICAgICA8L2Rpdj5cbiAgICBgO1xuICB9XG5cbiAgcHJvdGVjdGVkIHJlbmRlckNvbnRlbnQoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgIHJldHVybiBodG1sYFxuICAgICAgPHNwYW4gY2xhc3M9XCJzYmItdGVhc2VyX19jb250YWluZXJcIj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJzYmItdGVhc2VyX19pbWFnZS13cmFwcGVyXCI+XG4gICAgICAgICAgPHNsb3QgbmFtZT1cImltYWdlXCI+PC9zbG90PlxuICAgICAgICA8L3NwYW4+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwic2JiLXRlYXNlcl9fdGV4dFwiPlxuICAgICAgICAgIDxzbG90IG5hbWU9XCJjaGlwXCIgQHNsb3RjaGFuZ2U9JHt0aGlzLl9jb25maWd1cmVDaGlwfT48L3Nsb3Q+XG4gICAgICAgICAgPHNsb3QgbmFtZT1cInRpdGxlXCIgQHNsb3RjaGFuZ2U9JHt0aGlzLl9jb25maWd1cmVUaXRsZX0+PC9zbG90PlxuICAgICAgICAgIDxwIGNsYXNzPVwic2JiLXRlYXNlcl9fZGVzY3JpcHRpb25cIj5cbiAgICAgICAgICAgIDxzbG90IEBzbG90Y2hhbmdlPSR7dGhpcy5faGFuZGxlU2xvdGNoYW5nZX0+PC9zbG90PlxuICAgICAgICAgIDwvcD5cbiAgICAgICAgPC9zcGFuPlxuICAgICAgPC9zcGFuPlxuICAgIGA7XG4gIH1cbn1cblxuZGVjbGFyZSBnbG9iYWwge1xuICBpbnRlcmZhY2UgSFRNTEVsZW1lbnRUYWdOYW1lTWFwIHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25hbWluZy1jb252ZW50aW9uXG4gICAgJ3NiYi10ZWFzZXInOiBTYmJUZWFzZXJFbGVtZW50O1xuICB9XG59XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7SUF1Qk0sb0JBQWdCLE1BQUE7OzBCQURyQixjQUFjLFlBQVksQ0FBQzs7OztvQkFDRzs7OztBQUFSLEVBQUEsbUJBQVEsWUFBa0I7QUFBQTs7QUFJbEIsc0RBQUEsa0JBQUEsTUFBQSx5QkFDM0IsZ0JBQWdCOzs7O0lBRFcsSUFBZ0IsWUFBUztBQUFBLGFBQUEsbUJBQUE7QUFBQSxJQUFBO0FBQUEsSUFBekIsSUFBZ0IsVUFBUyxPQUFBO0FBQUEseUJBQUEsNkJBQUE7QUFBQSxJQUFBO0FBQUEsSUFHOUMsb0JBQWlCO0FBQ3ZCLFlBQU0sT0FBTyxNQUFNLEtBQUssS0FBSyxRQUFRLEVBQUUsS0FBSyxDQUFDLE9BQU8sR0FBRyxjQUFjLGdCQUFnQjtBQUNyRixVQUFJLE1BQU07QUFDUixhQUFLLE9BQU87QUFBQSxNQUNkO0FBRUEsWUFBTSxRQUFRLE1BQU0sS0FBSyxLQUFLLFFBQVEsRUFBRSxLQUFLLENBQUMsT0FBTyxHQUFHLGNBQWMsV0FBVztBQUNqRixVQUFJLE9BQU87QUFDVCxjQUFNLE9BQU87QUFBQSxNQUNmO0FBQUEsSUFDRjtBQUFBLElBRVEsZUFBZSxPQUFZO0FBRWpDLFlBQU0sWUFBYSxNQUFNLE9BQ3RCLGlCQUFBLEVBQ0EsS0FBSyxDQUFDLE1BQWdDLEVBQUUsY0FBYyxnQkFBZ0I7QUFFekUsVUFBSSxXQUFXO0FBQ2IsdUJBQWUsUUFBUSxTQUFTO0FBQ2hDLGtCQUFVLFFBQVE7QUFDbEIsa0JBQVUsT0FBTztBQUFBLE1BQ25CO0FBQUEsSUFDRjtBQUFBLElBRVEsZ0JBQWdCLE9BQVk7QUFDbEMsWUFBTSxRQUFTLE1BQU0sT0FDbEIsaUJBQUEsRUFDQSxLQUFLLENBQUMsTUFBNEIsRUFBRSxjQUFjLFdBQVc7QUFFaEUsVUFBSSxPQUFPO0FBQ1QsdUJBQWUsUUFBUSxLQUFLO0FBQzVCLGNBQU0sY0FBYztBQUFBLE1BQ3RCO0FBQUEsSUFDRjtBQUFBLElBRW1CLFNBQU07QUFFdkIsYUFBTztBQUFBO0FBQUEsVUFFRCxLQUFLO0FBQUE7QUFBQSxRQUVMLCtCQUErQixLQUFLLGtCQUFrQjtBQUFBLE1BQUEsQ0FDdkQ7QUFBQSxVQUNDLEtBQUssZUFBZTtBQUFBO0FBQUE7QUFBQSxJQUc1QjtBQUFBLElBRVUsZ0JBQWE7QUFDckIsYUFBTztBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSwwQ0FNK0IsS0FBSyxjQUFjO0FBQUEsMkNBQ2xCLEtBQUssZUFBZTtBQUFBO0FBQUEsZ0NBRS9CLEtBQUssaUJBQWlCO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxJQUtwRDtBQUFBLEtBbkU2Qjs7QUFBNUIsNEJBQUEsQ0FBQSxTQUFTLEVBQUUsU0FBUyxLQUFBLENBQU0sQ0FBQztBQUFDLGlCQUFBLElBQUEsTUFBQSx1QkFBQSxFQUFBLE1BQUEsWUFBQSxNQUFBLGFBQUEsUUFBQSxPQUFBLFNBQUEsT0FBQSxRQUFBLEVBQUEsS0FBQSxDQUFBLFFBQUEsZUFBQSxLQUFBLEtBQUEsQ0FBQSxRQUFBLElBQWdCLFdBQVMsS0FBQSxDQUFBLEtBQUEsVUFBQTtBQUFBLFVBQVQsWUFBUztBQUFBLElBQUEsS0FBQSxVQUFBLFVBQUEsR0FBQSx5QkFBQSw0QkFBQTtBQUp4RCxpQkFBQSxNQUFBLG1CQUFBLEVBQUEsT0FBQSxXQUFBLEdBQUEsa0JBQUEsRUFBQSxNQUFBLFNBQUEsTUFBQSxXQUFBLE1BQUEsVUFBQSxVQUFBLEdBQUEsTUFBQSx1QkFBQTs7O1FBQ3lCLEdBQUEsU0FBeUIsQ0FBQyxpQkFBaUIsS0FBSyxHQURuRSxrQkFBQSxZQUFBLHVCQUFBLEdBQWlCOzs7In0=
+import { t as SbbTeaserElement } from "../teaser.component-BI1diIhL.js";
+export { SbbTeaserElement };

package/development/teaser-hero/teaser-hero.component.d.ts

@@ -9,6 +9,7 @@ import { SbbLinkBaseElement } from '../core/base-elements.ts';
  * @slot chip - The `sbb-chip-label` component that will be displayed on top-left corner
  */
 export declare class SbbTeaserHeroElement extends SbbLinkBaseElement {
+    static readonly elementName: string;
     static styles: CSSResultGroup;
     /** Panel link text. */
     accessor linkContent: string;

package/development/teaser-hero/teaser-hero.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"teaser-hero.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/teaser-hero/teaser-hero.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAM9D,OAAO,8BAA8B,CAAC;AAEtC;;;;;;;GAOG;AACH,qBAEM,oBAAqB,SAAQ,kBAAkB;IACnD,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,uBAAuB;IACvB,SAEgB,WAAW,EAAE,MAAM,CAAM;IAEzC,OAAO,CAAC,iBAAiB;cAIN,cAAc,IAAI,cAAc;CAmBpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}
+{"version":3,"file":"teaser-hero.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/teaser-hero/teaser-hero.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAM9D,OAAO,8BAA8B,CAAC;AAEtC;;;;;;;GAOG;AACH,qBAAa,oBAAqB,SAAQ,kBAAkB;IAC1D,gBAAgC,WAAW,EAAE,MAAM,CAAqB;IACxE,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,uBAAuB;IACvB,SAEgB,WAAW,EAAE,MAAM,CAAM;IAEzC,OAAO,CAAC,iBAAiB;cAIN,cAAc,IAAI,cAAc;CAmBpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

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

@@ -1,179 +1,2 @@
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-import { __esDecorate, __runInitializers } from "tslib";
-import { css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { html } from "lit/static-html.js";
-import { SbbLinkBaseElement } from "../core/base-elements.js";
-import { forceType, omitEmptyConverter } from "../core/decorators.js";
-import { boxSizingStyles } from "../core/styles.js";
-import "../link/block-link-static.js";
-const style = css`:host {
-  display: block;
-  outline: none !important;
-  --sbb-panel-width: 13.9375rem;
-  --sbb-panel-inner-height: 10.4375rem;
-  --sbb-panel-triangle-height: 2.0625rem;
-  --sbb-panel-height: calc(var(--sbb-panel-inner-height) + 2 * var(--sbb-panel-triangle-height));
-  --sbb-panel-line-height: var(--sbb-typo-line-height-heading);
-  --sbb-panel-font-size: var(--sbb-typo-scale-1-5x);
-  --sbb-panel-color: var(--sbb-color-1-negative);
-  --sbb-panel-background-color: color-mix(in srgb, var(--sbb-color-primary) 90%, transparent);
-  --sbb-panel-background-color-hover: var(--sbb-color-primary);
-  --sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);
-  --sbb-panel-gap: var(--sbb-spacing-responsive-xs);
-  --sbb-panel-animation-duration: var(
-    --sbb-disable-animation-duration,
-    var(--sbb-animation-duration-4x)
-  );
-  --sbb-panel-animation-easing: var(--sbb-animation-easing);
-}
-@media (min-width: calc(64rem)) {
-  :host {
-    --sbb-panel-width: 20.0625rem;
-    --sbb-panel-inner-height: 15.006875rem;
-    --sbb-panel-triangle-height: 2.965625rem;
-    --sbb-panel-font-size: var(--sbb-typo-scale-2x);
-  }
-}
-@media (min-width: calc(64rem)) {
-  :host {
-    --sbb-panel-width: 26.75rem;
-    --sbb-panel-inner-height: 20.02375rem;
-    --sbb-panel-triangle-height: 3.956875rem;
-    --sbb-panel-font-size: var(--sbb-typo-scale-2-5x);
-    --sbb-panel-line-height: 1.2;
-  }
-}
-
-@media (any-hover: hover) {
-  :host(:hover) {
-    --sbb-panel-background-color: var(--sbb-panel-background-color-hover);
-  }
-}
-::slotted([slot=image]) {
-  width: 100%;
-}
-
-.sbb-teaser-hero {
-  position: relative;
-  display: flex;
-  min-height: var(--sbb-panel-height);
-  text-decoration: none;
-}
-.sbb-teaser-hero:focus-visible {
-  outline-offset: var(--sbb-focus-outline-offset);
-  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
-}
-
-.sbb-teaser-hero__panel {
-  z-index: 1;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: var(--sbb-panel-gap);
-  width: var(--sbb-panel-width);
-  height: var(--sbb-panel-height);
-  padding-block: var(--sbb-panel-triangle-height);
-  padding-inline: var(--sbb-panel-padding-inline);
-  clip-path: polygon(0 0, 100% var(--sbb-panel-triangle-height), 100% calc(100% - var(--sbb-panel-triangle-height)), 0% 100%);
-  background-color: var(--sbb-panel-background-color);
-  transition: background var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing);
-}
-@media (any-hover: hover) {
-  .sbb-teaser-hero__panel:hover {
-    --sbb-panel-background-color: var(--sbb-panel-background-color-hover);
-  }
-}
-.sbb-teaser-hero__panel {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-}
-:host(:not(:is(:state(slotted),[state--slotted]), :is(:state(slotted-link-content),[state--slotted-link-content]), [link-content])) .sbb-teaser-hero__panel {
-  display: none;
-}
-
-.sbb-teaser-hero__panel-text {
-  font-family: var(--sbb-typo-font-family);
-  font-size: var(--sbb-panel-font-size);
-  font-weight: 300;
-  line-height: var(--sbb-panel-line-height);
-  letter-spacing: var(--sbb-typo-letter-spacing-heading);
-  color: var(--sbb-panel-color);
-  hyphens: auto;
-  display: inline;
-  margin: 0;
-  padding: 0;
-}
-
-:host(:not([href])) .sbb-teaser-hero__panel-link {
-  display: none;
-}`;
-let SbbTeaserHeroElement = (() => {
-  var _linkContent_accessor_storage, _a;
-  let _classDecorators = [customElement("sbb-teaser-hero")];
-  let _classDescriptor;
-  let _classExtraInitializers = [];
-  let _classThis;
-  let _classSuper = SbbLinkBaseElement;
-  let _linkContent_decorators;
-  let _linkContent_initializers = [];
-  let _linkContent_extraInitializers = [];
-  _a = class extends _classSuper {
-    constructor() {
-      super(...arguments);
-      __privateAdd(this, _linkContent_accessor_storage, __runInitializers(this, _linkContent_initializers, ""));
-      __runInitializers(this, _linkContent_extraInitializers);
-    }
-    /** Panel link text. */
-    get linkContent() {
-      return __privateGet(this, _linkContent_accessor_storage);
-    }
-    set linkContent(value) {
-      __privateSet(this, _linkContent_accessor_storage, value);
-    }
-    _imageSlotChanged() {
-      Array.from(this.querySelectorAll("sbb-chip-label")).forEach((c) => c.color = "charcoal");
-    }
-    renderTemplate() {
-      return html`
-      <span class="sbb-teaser-hero__panel">
-        <p class="sbb-teaser-hero__panel-text">
-          <slot></slot>
-        </p>
-        <sbb-block-link-static
-          class="sbb-teaser-hero__panel-link"
-          icon-name="chevron-small-right-small"
-          icon-placement="end"
-          size="m"
-          negative
-        >
-          <slot name="link-content">${this.linkContent}</slot>
-        </sbb-block-link-static>
-      </span>
-      <slot name="image" @slotchange=${this._imageSlotChanged}></slot>
-    `;
-    }
-  }, _linkContent_accessor_storage = new WeakMap(), _classThis = _a, (() => {
-    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-    _linkContent_decorators = [forceType(), property({ attribute: "link-content", reflect: true, converter: omitEmptyConverter })];
-    __esDecorate(_a, null, _linkContent_decorators, { kind: "accessor", name: "linkContent", static: false, private: false, access: { has: (obj) => "linkContent" in obj, get: (obj) => obj.linkContent, set: (obj, value) => {
-      obj.linkContent = value;
-    } }, metadata: _metadata }, _linkContent_initializers, _linkContent_extraInitializers);
-    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-    _classThis = _classDescriptor.value;
-    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-  })(), _a.styles = [boxSizingStyles, style], __runInitializers(_classThis, _classExtraInitializers), _a;
-  return _classThis;
-})();
-export {
-  SbbTeaserHeroElement
-};
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVhc2VyLWhlcm8uY29tcG9uZW50LmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvZWxlbWVudHMvdGVhc2VyLWhlcm8vdGVhc2VyLWhlcm8uY29tcG9uZW50LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHR5cGUgQ1NTUmVzdWx0R3JvdXAsIHR5cGUgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgY3VzdG9tRWxlbWVudCwgcHJvcGVydHkgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5pbXBvcnQgeyBodG1sIH0gZnJvbSAnbGl0L3N0YXRpYy1odG1sLmpzJztcblxuaW1wb3J0IHsgU2JiTGlua0Jhc2VFbGVtZW50IH0gZnJvbSAnLi4vY29yZS9iYXNlLWVsZW1lbnRzLnRzJztcbmltcG9ydCB7IGZvcmNlVHlwZSwgb21pdEVtcHR5Q29udmVydGVyIH0gZnJvbSAnLi4vY29yZS9kZWNvcmF0b3JzLnRzJztcbmltcG9ydCB7IGJveFNpemluZ1N0eWxlcyB9IGZyb20gJy4uL2NvcmUvc3R5bGVzLnRzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vdGVhc2VyLWhlcm8uc2Nzcz9saXQmaW5saW5lJztcblxuaW1wb3J0ICcuLi9saW5rL2Jsb2NrLWxpbmstc3RhdGljLnRzJztcblxuLyoqXG4gKiBJdCBkaXNwbGF5cyBhbiBpbWFnZSBhbmQgYW4gYWN0aW9uIGNhbGwgd2l0aGluIGEgcGFuZWwuXG4gKlxuICogQHNsb3QgLSBVc2UgdGhlIHVubmFtZWQgc2xvdCB0byBhZGQgdGV4dCBjb250ZW50IHRvIHRoZSBwYW5lbFxuICogQHNsb3QgbGluay1jb250ZW50IC0gTGluayBjb250ZW50IG9mIHRoZSBwYW5lbFxuICogQHNsb3QgaW1hZ2UgLSBUaGUgYmFja2dyb3VuZCBpbWFnZSB0aGF0IGNhbiBiZSBhIGBzYmItaW1hZ2VgXG4gKiBAc2xvdCBjaGlwIC0gVGhlIGBzYmItY2hpcC1sYWJlbGAgY29tcG9uZW50IHRoYXQgd2lsbCBiZSBkaXNwbGF5ZWQgb24gdG9wLWxlZnQgY29ybmVyXG4gKi9cbmV4cG9ydFxuQGN1c3RvbUVsZW1lbnQoJ3NiYi10ZWFzZXItaGVybycpXG5jbGFzcyBTYmJUZWFzZXJIZXJvRWxlbWVudCBleHRlbmRzIFNiYkxpbmtCYXNlRWxlbWVudCB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IFtib3hTaXppbmdTdHlsZXMsIHN0eWxlXTtcblxuICAvKiogUGFuZWwgbGluayB0ZXh0LiAqL1xuICBAZm9yY2VUeXBlKClcbiAgQHByb3BlcnR5KHsgYXR0cmlidXRlOiAnbGluay1jb250ZW50JywgcmVmbGVjdDogdHJ1ZSwgY29udmVydGVyOiBvbWl0RW1wdHlDb252ZXJ0ZXIgfSlcbiAgcHVibGljIGFjY2Vzc29yIGxpbmtDb250ZW50OiBzdHJpbmcgPSAnJztcblxuICBwcml2YXRlIF9pbWFnZVNsb3RDaGFuZ2VkKCk6IHZvaWQge1xuICAgIEFycmF5LmZyb20odGhpcy5xdWVyeVNlbGVjdG9yQWxsKCdzYmItY2hpcC1sYWJlbCcpKS5mb3JFYWNoKChjKSA9PiAoYy5jb2xvciA9ICdjaGFyY29hbCcpKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSByZW5kZXJUZW1wbGF0ZSgpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8c3BhbiBjbGFzcz1cInNiYi10ZWFzZXItaGVyb19fcGFuZWxcIj5cbiAgICAgICAgPHAgY2xhc3M9XCJzYmItdGVhc2VyLWhlcm9fX3BhbmVsLXRleHRcIj5cbiAgICAgICAgICA8c2xvdD48L3Nsb3Q+XG4gICAgICAgIDwvcD5cbiAgICAgICAgPHNiYi1ibG9jay1saW5rLXN0YXRpY1xuICAgICAgICAgIGNsYXNzPVwic2JiLXRlYXNlci1oZXJvX19wYW5lbC1saW5rXCJcbiAgICAgICAgICBpY29uLW5hbWU9XCJjaGV2cm9uLXNtYWxsLXJpZ2h0LXNtYWxsXCJcbiAgICAgICAgICBpY29uLXBsYWNlbWVudD1cImVuZFwiXG4gICAgICAgICAgc2l6ZT1cIm1cIlxuICAgICAgICAgIG5lZ2F0aXZlXG4gICAgICAgID5cbiAgICAgICAgICA8c2xvdCBuYW1lPVwibGluay1jb250ZW50XCI+JHt0aGlzLmxpbmtDb250ZW50fTwvc2xvdD5cbiAgICAgICAgPC9zYmItYmxvY2stbGluay1zdGF0aWM+XG4gICAgICA8L3NwYW4+XG4gICAgICA8c2xvdCBuYW1lPVwiaW1hZ2VcIiBAc2xvdGNoYW5nZT0ke3RoaXMuX2ltYWdlU2xvdENoYW5nZWR9Pjwvc2xvdD5cbiAgICBgO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItdGVhc2VyLWhlcm8nOiBTYmJUZWFzZXJIZXJvRWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7SUFzQk0sd0JBQW9CLE1BQUE7OzBCQUR6QixjQUFjLGlCQUFpQixDQUFDOzs7O29CQUNFOzs7O0FBQVIsRUFBQSxtQkFBUSxZQUFrQjtBQUFBOztBQU1uRCx3REFBQSxrQkFBQSxNQUFBLDJCQUFzQyxFQUFFOzs7O0lBQXhDLElBQWdCLGNBQVc7QUFBQSxhQUFBLG1CQUFBO0FBQUEsSUFBQTtBQUFBLElBQTNCLElBQWdCLFlBQVcsT0FBQTtBQUFBLHlCQUFBLCtCQUFBO0FBQUEsSUFBQTtBQUFBLElBRW5CLG9CQUFpQjtBQUN2QixZQUFNLEtBQUssS0FBSyxpQkFBaUIsZ0JBQWdCLENBQUMsRUFBRSxRQUFRLENBQUMsTUFBTyxFQUFFLFFBQVEsVUFBVztBQUFBLElBQzNGO0FBQUEsSUFFbUIsaUJBQWM7QUFDL0IsYUFBTztBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxzQ0FZMkIsS0FBSyxXQUFXO0FBQUE7QUFBQTtBQUFBLHVDQUdmLEtBQUssaUJBQWlCO0FBQUE7QUFBQSxJQUUzRDtBQUFBLEtBeEJBOztBQUZDLDhCQUFBLENBQUEsYUFDQSxTQUFTLEVBQUUsV0FBVyxnQkFBZ0IsU0FBUyxNQUFNLFdBQVcsbUJBQUEsQ0FBb0IsQ0FBQztBQUN0RixpQkFBQSxJQUFBLE1BQUEseUJBQUEsRUFBQSxNQUFBLFlBQUEsTUFBQSxlQUFBLFFBQUEsT0FBQSxTQUFBLE9BQUEsUUFBQSxFQUFBLEtBQUEsQ0FBQSxRQUFBLGlCQUFBLEtBQUEsS0FBQSxDQUFBLFFBQUEsSUFBZ0IsYUFBVyxLQUFBLENBQUEsS0FBQSxVQUFBO0FBQUEsVUFBWCxjQUFXO0FBQUEsSUFBQSxLQUFBLFVBQUEsVUFBQSxHQUFBLDJCQUFBLDhCQUFBO0FBTjdCLGlCQUFBLE1BQUEsbUJBQUEsRUFBQSxPQUFBLFdBQUEsR0FBQSxrQkFBQSxFQUFBLE1BQUEsU0FBQSxNQUFBLFdBQUEsTUFBQSxVQUFBLFVBQUEsR0FBQSxNQUFBLHVCQUFBOzs7UUFDeUIsR0FBQSxTQUF5QixDQUFDLGlCQUFpQixLQUFLLEdBRG5FLGtCQUFBLFlBQUEsdUJBQUEsR0FBcUI7OzsifQ==
+import { t as SbbTeaserHeroElement } from "../teaser-hero.component-sUhYQXkN.js";
+export { SbbTeaserHeroElement };

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

@@ -0,0 +1,202 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { css } from "lit";
+import { property } from "lit/decorators.js";
+import { SbbLinkBaseElement } from "./core/base-elements.js";
+import { forceType, omitEmptyConverter } from "./core/decorators.js";
+import { boxSizingStyles } from "./core/styles.js";
+import { html as html$1 } from "lit/static-html.js";
+import "./link/block-link-static.js";
+//#region src/elements/teaser-hero/teaser-hero.scss?lit&inline
+var teaser_hero_default = css`:host {
+  display: block;
+  outline: none !important;
+  --sbb-panel-width: 13.9375rem;
+  --sbb-panel-inner-height: 10.4375rem;
+  --sbb-panel-triangle-height: 2.0625rem;
+  --sbb-panel-height: calc(var(--sbb-panel-inner-height) + 2 * var(--sbb-panel-triangle-height));
+  --sbb-panel-line-height: var(--sbb-typo-line-height-heading);
+  --sbb-panel-font-size: var(--sbb-typo-scale-1-5x);
+  --sbb-panel-color: var(--sbb-color-1-negative);
+  --sbb-panel-background-color: color-mix(in srgb, var(--sbb-color-primary) 90%, transparent);
+  --sbb-panel-background-color-hover: var(--sbb-color-primary);
+  --sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);
+  --sbb-panel-gap: var(--sbb-spacing-responsive-xs);
+  --sbb-panel-animation-duration: var(
+    --sbb-disable-animation-duration,
+    var(--sbb-animation-duration-4x)
+  );
+  --sbb-panel-animation-easing: var(--sbb-animation-easing);
+}
+@media (min-width: calc(64rem)) {
+  :host {
+    --sbb-panel-width: 20.0625rem;
+    --sbb-panel-inner-height: 15.006875rem;
+    --sbb-panel-triangle-height: 2.965625rem;
+    --sbb-panel-font-size: var(--sbb-typo-scale-2x);
+  }
+}
+@media (min-width: calc(64rem)) {
+  :host {
+    --sbb-panel-width: 26.75rem;
+    --sbb-panel-inner-height: 20.02375rem;
+    --sbb-panel-triangle-height: 3.956875rem;
+    --sbb-panel-font-size: var(--sbb-typo-scale-2-5x);
+    --sbb-panel-line-height: 1.2;
+  }
+}
+
+@media (any-hover: hover) {
+  :host(:hover) {
+    --sbb-panel-background-color: var(--sbb-panel-background-color-hover);
+  }
+}
+::slotted([slot=image]) {
+  width: 100%;
+}
+
+.sbb-teaser-hero {
+  position: relative;
+  display: flex;
+  min-height: var(--sbb-panel-height);
+  text-decoration: none;
+}
+.sbb-teaser-hero:focus-visible {
+  outline-offset: var(--sbb-focus-outline-offset);
+  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
+}
+
+.sbb-teaser-hero__panel {
+  z-index: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--sbb-panel-gap);
+  width: var(--sbb-panel-width);
+  height: var(--sbb-panel-height);
+  padding-block: var(--sbb-panel-triangle-height);
+  padding-inline: var(--sbb-panel-padding-inline);
+  clip-path: polygon(0 0, 100% var(--sbb-panel-triangle-height), 100% calc(100% - var(--sbb-panel-triangle-height)), 0% 100%);
+  background-color: var(--sbb-panel-background-color);
+  transition: background var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing);
+}
+@media (any-hover: hover) {
+  .sbb-teaser-hero__panel:hover {
+    --sbb-panel-background-color: var(--sbb-panel-background-color-hover);
+  }
+}
+.sbb-teaser-hero__panel {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+:host(:not(:is(:state(slotted),[state--slotted]), :is(:state(slotted-link-content),[state--slotted-link-content]), [link-content])) .sbb-teaser-hero__panel {
+  display: none;
+}
+
+.sbb-teaser-hero__panel-text {
+  font-family: var(--sbb-typo-font-family);
+  font-size: var(--sbb-panel-font-size);
+  font-weight: 300;
+  line-height: var(--sbb-panel-line-height);
+  letter-spacing: var(--sbb-typo-letter-spacing-heading);
+  color: var(--sbb-panel-color);
+  hyphens: auto;
+  display: inline;
+  margin: 0;
+  padding: 0;
+}
+
+:host(:not([href])) .sbb-teaser-hero__panel-link {
+  display: none;
+}`;
+//#endregion
+//#region src/elements/teaser-hero/teaser-hero.component.ts
+/**
+* It displays an image and an action call within a panel.
+*
+* @slot - Use the unnamed slot to add text content to the panel
+* @slot link-content - Link content of the panel
+* @slot image - The background image that can be a `sbb-image`
+* @slot chip - The `sbb-chip-label` component that will be displayed on top-left corner
+*/
+var SbbTeaserHeroElement = (() => {
+	let _classSuper = SbbLinkBaseElement;
+	let _linkContent_decorators;
+	let _linkContent_initializers = [];
+	let _linkContent_extraInitializers = [];
+	return class SbbTeaserHeroElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_linkContent_decorators = [forceType(), property({
+				attribute: "link-content",
+				reflect: true,
+				converter: omitEmptyConverter
+			})];
+			__esDecorate(this, null, _linkContent_decorators, {
+				kind: "accessor",
+				name: "linkContent",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "linkContent" in obj,
+					get: (obj) => obj.linkContent,
+					set: (obj, value) => {
+						obj.linkContent = value;
+					}
+				},
+				metadata: _metadata
+			}, _linkContent_initializers, _linkContent_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-teaser-hero";
+		}
+		static {
+			this.styles = [boxSizingStyles, teaser_hero_default];
+		}
+		#linkContent_accessor_storage = __runInitializers(this, _linkContent_initializers, "");
+		/** Panel link text. */
+		get linkContent() {
+			return this.#linkContent_accessor_storage;
+		}
+		set linkContent(value) {
+			this.#linkContent_accessor_storage = value;
+		}
+		_imageSlotChanged() {
+			Array.from(this.querySelectorAll("sbb-chip-label")).forEach((c) => c.color = "charcoal");
+		}
+		renderTemplate() {
+			return html$1`
+      <span class="sbb-teaser-hero__panel">
+        <p class="sbb-teaser-hero__panel-text">
+          <slot></slot>
+        </p>
+        <sbb-block-link-static
+          class="sbb-teaser-hero__panel-link"
+          icon-name="chevron-small-right-small"
+          icon-placement="end"
+          size="m"
+          negative
+        >
+          <slot name="link-content">${this.linkContent}</slot>
+        </sbb-block-link-static>
+      </span>
+      <slot name="image" @slotchange=${this._imageSlotChanged}></slot>
+    `;
+		}
+		constructor() {
+			super(...arguments);
+			__runInitializers(this, _linkContent_extraInitializers);
+		}
+	};
+})();
+//#endregion
+export { SbbTeaserHeroElement as t };
+
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVhc2VyLWhlcm8uY29tcG9uZW50LXNVaFlRWGtOLmpzIiwibmFtZXMiOltdLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9lbGVtZW50cy90ZWFzZXItaGVyby90ZWFzZXItaGVyby5zY3NzP2xpdCZpbmxpbmUiLCIuLi8uLi8uLi9zcmMvZWxlbWVudHMvdGVhc2VyLWhlcm8vdGVhc2VyLWhlcm8uY29tcG9uZW50LnRzIl0sInNvdXJjZXNDb250ZW50IjpbIkB1c2UgJy4uL2NvcmUvc3R5bGVzJyBhcyBzYmI7XG5cbjpob3N0IHtcbiAgZGlzcGxheTogYmxvY2s7XG5cbiAgLy8gVXNlICFpbXBvcnRhbnQgaGVyZSB0byBub3QgaW50ZXJmZXJlIHdpdGggRmlyZWZveCBmb2N1cyByaW5nIGRlZmluaXRpb25cbiAgLy8gd2hpY2ggYXBwZWFycyBpbiBub3JtYWxpemUgQ1NTIG9mIHNldmVyYWwgZnJhbWV3b3Jrcy5cbiAgb3V0bGluZTogbm9uZSAhaW1wb3J0YW50O1xuXG4gIEBpbmNsdWRlIHNiYi5wYW5lbC12YXJpYWJsZXM7XG59XG5cbkBpbmNsdWRlIHNiYi5ob3Zlci1tcSgkaG92ZXI6IHRydWUpIHtcbiAgOmhvc3QoOmhvdmVyKSB7XG4gICAgLS1zYmItcGFuZWwtYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2JiLXBhbmVsLWJhY2tncm91bmQtY29sb3ItaG92ZXIpO1xuICB9XG59XG5cbjo6c2xvdHRlZChbc2xvdD0naW1hZ2UnXSkge1xuICB3aWR0aDogMTAwJTtcbn1cblxuLnNiYi10ZWFzZXItaGVybyB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgZGlzcGxheTogZmxleDtcbiAgbWluLWhlaWdodDogdmFyKC0tc2JiLXBhbmVsLWhlaWdodCk7XG4gIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcblxuICAmOmZvY3VzLXZpc2libGUge1xuICAgIEBpbmNsdWRlIHNiYi5mb2N1cy1vdXRsaW5lO1xuICB9XG59XG5cbi5zYmItdGVhc2VyLWhlcm9fX3BhbmVsIHtcbiAgei1pbmRleDogMTtcblxuICBAaW5jbHVkZSBzYmIucGFuZWw7XG4gIEBpbmNsdWRlIHNiYi5hYnNvbHV0ZS1jZW50ZXIteTtcblxuICAvLyBIaWRlIHBhbmVsIHdoZW4gbm8gY29udGVudCBvciBsaW5rLWNvbnRlbnQgaXMgcHJvdmlkZWQuXG4gIDpob3N0KDpub3QoOnN0YXRlKHNsb3R0ZWQpLCA6c3RhdGUoc2xvdHRlZC1saW5rLWNvbnRlbnQpLCBbbGluay1jb250ZW50XSkpICYge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cbn1cblxuLnNiYi10ZWFzZXItaGVyb19fcGFuZWwtdGV4dCB7XG4gIEBpbmNsdWRlIHNiYi5wYW5lbC10ZXh0O1xuXG4gIGh5cGhlbnM6IGF1dG87XG5cbiAgLy8gUmVzZXQgcGFyYWdyYXBoIHN0eWxlc1xuICBkaXNwbGF5OiBpbmxpbmU7XG4gIG1hcmdpbjogMDtcbiAgcGFkZGluZzogMDtcbn1cblxuLnNiYi10ZWFzZXItaGVyb19fcGFuZWwtbGluayB7XG4gIDpob3N0KDpub3QoW2hyZWZdKSkgJiB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxufVxuIiwiaW1wb3J0IHsgdHlwZSBDU1NSZXN1bHRHcm91cCwgdHlwZSBUZW1wbGF0ZVJlc3VsdCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBwcm9wZXJ0eSB9IGZyb20gJ2xpdC9kZWNvcmF0b3JzLmpzJztcbmltcG9ydCB7IGh0bWwgfSBmcm9tICdsaXQvc3RhdGljLWh0bWwuanMnO1xuXG5pbXBvcnQgeyBTYmJMaW5rQmFzZUVsZW1lbnQgfSBmcm9tICcuLi9jb3JlL2Jhc2UtZWxlbWVudHMudHMnO1xuaW1wb3J0IHsgZm9yY2VUeXBlLCBvbWl0RW1wdHlDb252ZXJ0ZXIgfSBmcm9tICcuLi9jb3JlL2RlY29yYXRvcnMudHMnO1xuaW1wb3J0IHsgYm94U2l6aW5nU3R5bGVzIH0gZnJvbSAnLi4vY29yZS9zdHlsZXMudHMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi90ZWFzZXItaGVyby5zY3NzP2xpdCZpbmxpbmUnO1xuXG5pbXBvcnQgJy4uL2xpbmsvYmxvY2stbGluay1zdGF0aWMudHMnO1xuXG4vKipcbiAqIEl0IGRpc3BsYXlzIGFuIGltYWdlIGFuZCBhbiBhY3Rpb24gY2FsbCB3aXRoaW4gYSBwYW5lbC5cbiAqXG4gKiBAc2xvdCAtIFVzZSB0aGUgdW5uYW1lZCBzbG90IHRvIGFkZCB0ZXh0IGNvbnRlbnQgdG8gdGhlIHBhbmVsXG4gKiBAc2xvdCBsaW5rLWNvbnRlbnQgLSBMaW5rIGNvbnRlbnQgb2YgdGhlIHBhbmVsXG4gKiBAc2xvdCBpbWFnZSAtIFRoZSBiYWNrZ3JvdW5kIGltYWdlIHRoYXQgY2FuIGJlIGEgYHNiYi1pbWFnZWBcbiAqIEBzbG90IGNoaXAgLSBUaGUgYHNiYi1jaGlwLWxhYmVsYCBjb21wb25lbnQgdGhhdCB3aWxsIGJlIGRpc3BsYXllZCBvbiB0b3AtbGVmdCBjb3JuZXJcbiAqL1xuZXhwb3J0IGNsYXNzIFNiYlRlYXNlckhlcm9FbGVtZW50IGV4dGVuZHMgU2JiTGlua0Jhc2VFbGVtZW50IHtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSByZWFkb25seSBlbGVtZW50TmFtZTogc3RyaW5nID0gJ3NiYi10ZWFzZXItaGVybyc7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IFtib3hTaXppbmdTdHlsZXMsIHN0eWxlXTtcblxuICAvKiogUGFuZWwgbGluayB0ZXh0LiAqL1xuICBAZm9yY2VUeXBlKClcbiAgQHByb3BlcnR5KHsgYXR0cmlidXRlOiAnbGluay1jb250ZW50JywgcmVmbGVjdDogdHJ1ZSwgY29udmVydGVyOiBvbWl0RW1wdHlDb252ZXJ0ZXIgfSlcbiAgcHVibGljIGFjY2Vzc29yIGxpbmtDb250ZW50OiBzdHJpbmcgPSAnJztcblxuICBwcml2YXRlIF9pbWFnZVNsb3RDaGFuZ2VkKCk6IHZvaWQge1xuICAgIEFycmF5LmZyb20odGhpcy5xdWVyeVNlbGVjdG9yQWxsKCdzYmItY2hpcC1sYWJlbCcpKS5mb3JFYWNoKChjKSA9PiAoYy5jb2xvciA9ICdjaGFyY29hbCcpKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSByZW5kZXJUZW1wbGF0ZSgpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8c3BhbiBjbGFzcz1cInNiYi10ZWFzZXItaGVyb19fcGFuZWxcIj5cbiAgICAgICAgPHAgY2xhc3M9XCJzYmItdGVhc2VyLWhlcm9fX3BhbmVsLXRleHRcIj5cbiAgICAgICAgICA8c2xvdD48L3Nsb3Q+XG4gICAgICAgIDwvcD5cbiAgICAgICAgPHNiYi1ibG9jay1saW5rLXN0YXRpY1xuICAgICAgICAgIGNsYXNzPVwic2JiLXRlYXNlci1oZXJvX19wYW5lbC1saW5rXCJcbiAgICAgICAgICBpY29uLW5hbWU9XCJjaGV2cm9uLXNtYWxsLXJpZ2h0LXNtYWxsXCJcbiAgICAgICAgICBpY29uLXBsYWNlbWVudD1cImVuZFwiXG4gICAgICAgICAgc2l6ZT1cIm1cIlxuICAgICAgICAgIG5lZ2F0aXZlXG4gICAgICAgID5cbiAgICAgICAgICA8c2xvdCBuYW1lPVwibGluay1jb250ZW50XCI+JHt0aGlzLmxpbmtDb250ZW50fTwvc2xvdD5cbiAgICAgICAgPC9zYmItYmxvY2stbGluay1zdGF0aWM+XG4gICAgICA8L3NwYW4+XG4gICAgICA8c2xvdCBuYW1lPVwiaW1hZ2VcIiBAc2xvdGNoYW5nZT0ke3RoaXMuX2ltYWdlU2xvdENoYW5nZWR9Pjwvc2xvdD5cbiAgICBgO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItdGVhc2VyLWhlcm8nOiBTYmJUZWFzZXJIZXJvRWxlbWVudDtcbiAgfVxufVxuIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztJQ29CYSw4QkFBb0I7bUJBQVM7Ozs7Y0FBN0IsNkJBQTZCLFlBQWtCOzs7OEJBS3pELFdBQVcsRUFDWCxTQUFTO0lBQUUsV0FBVztJQUFnQixTQUFTO0lBQU0sV0FBVztJQUFvQixDQUFDLENBQUE7QUFDdEYsZ0JBQUEsTUFBQSxNQUFBLHlCQUFBO0lBQUEsTUFBQTtJQUFBLE1BQUE7SUFBQSxRQUFBO0lBQUEsU0FBQTtJQUFBLFFBQUE7S0FBQSxNQUFBLFFBQUEsaUJBQUE7S0FBQSxNQUFBLFFBQUEsSUFBZ0I7S0FBVyxNQUFBLEtBQUEsVUFBQTtBQUFBLFVBQVgsY0FBVzs7S0FBQTtJQUFBLFVBQUE7SUFBQSxFQUFBLDJCQUFBLCtCQUFBOzs7Ozs7Ozs7QUFOSyxRQUFBLGNBQXNCOzs7QUFDL0IsUUFBQSxTQUF5QixDQUFDLGlCQUFpQixvQkFBTTs7RUFLeEUsZ0NBQUEsa0JBQUEsTUFBQSwyQkFBc0MsR0FBRTs7RUFBeEMsSUFBZ0IsY0FBVztBQUFBLFVBQUEsTUFBQTs7RUFBM0IsSUFBZ0IsWUFBVyxPQUFBO0FBQUEsU0FBQSwrQkFBQTs7RUFFbkIsb0JBQWlCO0FBQ3ZCLFNBQU0sS0FBSyxLQUFLLGlCQUFpQixpQkFBaUIsQ0FBQyxDQUFDLFNBQVMsTUFBTyxFQUFFLFFBQVEsV0FBWTs7RUFHekUsaUJBQWM7QUFDL0IsVUFBTyxNQUFJOzs7Ozs7Ozs7Ozs7c0NBWXVCLEtBQUssWUFBVzs7O3VDQUdmLEtBQUssa0JBQWlCIn0=

package/development/teaser-hero.d.ts

@@ -1,5 +1,2 @@
-/**
- * @entrypoint
- */
-export * from './teaser-hero/teaser-hero.component.ts';
+export * from './teaser-hero.pure.ts';
 //# sourceMappingURL=teaser-hero.d.ts.map

package/development/teaser-hero.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"teaser-hero.d.ts","sourceRoot":"","sources":["../../../src/elements/teaser-hero.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,wCAAwC,CAAC"}
+{"version":3,"file":"teaser-hero.d.ts","sourceRoot":"","sources":["../../../src/elements/teaser-hero.ts"],"names":[],"mappings":"AAGA,cAAc,uBAAuB,CAAC"}