@sbb-esta/lyne-elements 2.8.0 → 2.10.0

package/development/tag/tag.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './tag/tag.js';
+export * from './tag/tag.component.js';
 //# sourceMappingURL=tag.d.ts.map

package/development/tag/tag.d.ts.map

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

package/development/tag/tag.js

@@ -1,4 +1,4 @@
-import { SbbTagElement } from "./tag/tag.js";
+import { SbbTagElement } from "./tag/tag.component.js";
 export {
   SbbTagElement
 };

package/development/tag.js

@@ -1,5 +1,5 @@
-import { SbbTagElement } from "./tag/tag/tag.js";
-import { SbbTagGroupElement } from "./tag/tag-group/tag-group.js";
+import { SbbTagElement } from "./tag/tag/tag.component.js";
+import { SbbTagGroupElement } from "./tag/tag-group/tag-group.component.js";
 export {
   SbbTagElement,
   SbbTagGroupElement

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

@@ -0,0 +1,30 @@
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { SbbLinkBaseElement } from '../core/base-elements.js';
+import { SbbTitleLevel } from '../title.js';
+/**
+ * It displays an interactive image with caption.
+ *
+ * @slot image - Slot used to render the image.
+ * @slot chip - Slot used to render the sbb-chip-label.
+ * @slot title - Slot used to render the title.
+ * @slot - Use the unnamed slot to render the description.
+ */
+export declare class SbbTeaserElement extends SbbLinkBaseElement {
+    static styles: CSSResultGroup;
+    /** Teaser variant - define the position and the alignment of the text block. */
+    accessor alignment: 'after-centered' | 'after' | 'below';
+    /** Heading level of the sbb-title element (e.g. h1-h6). */
+    accessor titleLevel: SbbTitleLevel;
+    /** Content of title. */
+    accessor titleContent: string;
+    /** Content of chip label. */
+    accessor chipContent: string;
+    protected render(): TemplateResult;
+    protected renderContent(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-teaser': SbbTeaserElement;
+    }
+}
+//# sourceMappingURL=teaser.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"teaser.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/teaser/teaser.component.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,kBAAkB,CAAC;AAC1B,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,6BAA6B;IAC7B,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/development/teaser/teaser.component.js

@@ -0,0 +1,260 @@
+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 { slotState, forceType, omitEmptyConverter } from "../core/decorators.js";
+import { css } from "lit";
+import "../chip-label.js";
+import "../screen-reader-only.js";
+import "../title.js";
+const style = css`@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);
+}
+@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%;
+}
+
+@media (any-hover: hover) {
+  :host(:hover) {
+    --sbb-teaser-scale: var(--sbb-teaser-scale-hover);
+  }
+}
+.sbb-teaser__wrapper {
+  display: flex;
+  position: relative;
+  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 {
+    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;
+  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-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-label {
+  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-label {
+  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: normal;
+  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 SbbTeaserElement = (() => {
+  var _alignment_accessor_storage, _titleLevel_accessor_storage, _titleContent_accessor_storage, _chipContent_accessor_storage, _a;
+  let _classDecorators = [customElement("sbb-teaser"), slotState()];
+  let _classDescriptor;
+  let _classExtraInitializers = [];
+  let _classThis;
+  let _classSuper = SbbLinkBaseElement;
+  let _alignment_decorators;
+  let _alignment_initializers = [];
+  let _alignment_extraInitializers = [];
+  let _titleLevel_decorators;
+  let _titleLevel_initializers = [];
+  let _titleLevel_extraInitializers = [];
+  let _titleContent_decorators;
+  let _titleContent_initializers = [];
+  let _titleContent_extraInitializers = [];
+  let _chipContent_decorators;
+  let _chipContent_initializers = [];
+  let _chipContent_extraInitializers = [];
+  _a = class extends _classSuper {
+    constructor() {
+      super(...arguments);
+      __privateAdd(this, _alignment_accessor_storage, __runInitializers(this, _alignment_initializers, "after-centered"));
+      __privateAdd(this, _titleLevel_accessor_storage, (__runInitializers(this, _alignment_extraInitializers), __runInitializers(this, _titleLevel_initializers, "5")));
+      __privateAdd(this, _titleContent_accessor_storage, (__runInitializers(this, _titleLevel_extraInitializers), __runInitializers(this, _titleContent_initializers, "")));
+      __privateAdd(this, _chipContent_accessor_storage, (__runInitializers(this, _titleContent_extraInitializers), __runInitializers(this, _chipContent_initializers, "")));
+      __runInitializers(this, _chipContent_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);
+    }
+    /** Heading level of the sbb-title element (e.g. h1-h6). */
+    get titleLevel() {
+      return __privateGet(this, _titleLevel_accessor_storage);
+    }
+    set titleLevel(value) {
+      __privateSet(this, _titleLevel_accessor_storage, value);
+    }
+    /** Content of title. */
+    get titleContent() {
+      return __privateGet(this, _titleContent_accessor_storage);
+    }
+    set titleContent(value) {
+      __privateSet(this, _titleContent_accessor_storage, value);
+    }
+    /** Content of chip label. */
+    get chipContent() {
+      return __privateGet(this, _chipContent_accessor_storage);
+    }
+    set chipContent(value) {
+      __privateSet(this, _chipContent_accessor_storage, value);
+    }
+    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">
+          <sbb-chip-label size="xxs" color="charcoal" class="sbb-teaser__chip-label">
+            <slot name="chip">${this.chipContent}</slot>
+          </sbb-chip-label>
+          <sbb-title level=${this.titleLevel} visual-level="5" class="sbb-teaser__lead">
+            <slot name="title">${this.titleContent}</slot>
+          </sbb-title>
+          <span class="sbb-teaser__description">
+            <slot></slot>
+          </span>
+        </span>
+      </span>
+    `;
+    }
+  }, _alignment_accessor_storage = new WeakMap(), _titleLevel_accessor_storage = new WeakMap(), _titleContent_accessor_storage = new WeakMap(), _chipContent_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 })];
+    _titleLevel_decorators = [property({ attribute: "title-level" })];
+    _titleContent_decorators = [forceType(), property({ attribute: "title-content" })];
+    _chipContent_decorators = [forceType(), property({ attribute: "chip-content", reflect: true, converter: omitEmptyConverter })];
+    __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(_a, null, _titleLevel_decorators, { kind: "accessor", name: "titleLevel", static: false, private: false, access: { has: (obj) => "titleLevel" in obj, get: (obj) => obj.titleLevel, set: (obj, value) => {
+      obj.titleLevel = value;
+    } }, metadata: _metadata }, _titleLevel_initializers, _titleLevel_extraInitializers);
+    __esDecorate(_a, null, _titleContent_decorators, { kind: "accessor", name: "titleContent", static: false, private: false, access: { has: (obj) => "titleContent" in obj, get: (obj) => obj.titleContent, set: (obj, value) => {
+      obj.titleContent = value;
+    } }, metadata: _metadata }, _titleContent_initializers, _titleContent_extraInitializers);
+    __esDecorate(_a, null, _chipContent_decorators, { kind: "accessor", name: "chipContent", static: false, private: false, access: { has: (obj) => "chipContent" in obj, get: (obj) => obj.chipContent, set: (obj, value) => {
+      obj.chipContent = value;
+    } }, metadata: _metadata }, _chipContent_initializers, _chipContent_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 = style, __runInitializers(_classThis, _classExtraInitializers), _a;
+  return _classThis;
+})();
+export {
+  SbbTeaserElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVhc2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzL3RlYXNlci90ZWFzZXIuY29tcG9uZW50LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAsIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGN1c3RvbUVsZW1lbnQsIHByb3BlcnR5IH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuaW1wb3J0IHsgaHRtbCB9IGZyb20gJ2xpdC9zdGF0aWMtaHRtbC5qcyc7XG5cbmltcG9ydCB7IFNiYkxpbmtCYXNlRWxlbWVudCB9IGZyb20gJy4uL2NvcmUvYmFzZS1lbGVtZW50cy5qcyc7XG5pbXBvcnQgeyBmb3JjZVR5cGUsIG9taXRFbXB0eUNvbnZlcnRlciwgc2xvdFN0YXRlIH0gZnJvbSAnLi4vY29yZS9kZWNvcmF0b3JzLmpzJztcbmltcG9ydCB0eXBlIHsgU2JiVGl0bGVMZXZlbCB9IGZyb20gJy4uL3RpdGxlLmpzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vdGVhc2VyLnNjc3M/bGl0JmlubGluZSc7XG5cbmltcG9ydCAnLi4vY2hpcC1sYWJlbC5qcyc7XG5pbXBvcnQgJy4uL3NjcmVlbi1yZWFkZXItb25seS5qcyc7XG5pbXBvcnQgJy4uL3RpdGxlLmpzJztcblxuLyoqXG4gKiBJdCBkaXNwbGF5cyBhbiBpbnRlcmFjdGl2ZSBpbWFnZSB3aXRoIGNhcHRpb24uXG4gKlxuICogQHNsb3QgaW1hZ2UgLSBTbG90IHVzZWQgdG8gcmVuZGVyIHRoZSBpbWFnZS5cbiAqIEBzbG90IGNoaXAgLSBTbG90IHVzZWQgdG8gcmVuZGVyIHRoZSBzYmItY2hpcC1sYWJlbC5cbiAqIEBzbG90IHRpdGxlIC0gU2xvdCB1c2VkIHRvIHJlbmRlciB0aGUgdGl0bGUuXG4gKiBAc2xvdCAtIFVzZSB0aGUgdW5uYW1lZCBzbG90IHRvIHJlbmRlciB0aGUgZGVzY3JpcHRpb24uXG4gKi9cbmV4cG9ydFxuQGN1c3RvbUVsZW1lbnQoJ3NiYi10ZWFzZXInKVxuQHNsb3RTdGF0ZSgpXG5jbGFzcyBTYmJUZWFzZXJFbGVtZW50IGV4dGVuZHMgU2JiTGlua0Jhc2VFbGVtZW50IHtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSBzdHlsZXM6IENTU1Jlc3VsdEdyb3VwID0gc3R5bGU7XG5cbiAgLyoqIFRlYXNlciB2YXJpYW50IC0gZGVmaW5lIHRoZSBwb3NpdGlvbiBhbmQgdGhlIGFsaWdubWVudCBvZiB0aGUgdGV4dCBibG9jay4gKi9cbiAgQHByb3BlcnR5KHsgcmVmbGVjdDogdHJ1ZSB9KSBwdWJsaWMgYWNjZXNzb3IgYWxpZ25tZW50OiAnYWZ0ZXItY2VudGVyZWQnIHwgJ2FmdGVyJyB8ICdiZWxvdycgPVxuICAgICdhZnRlci1jZW50ZXJlZCc7XG5cbiAgLyoqIEhlYWRpbmcgbGV2ZWwgb2YgdGhlIHNiYi10aXRsZSBlbGVtZW50IChlLmcuIGgxLWg2KS4gKi9cbiAgQHByb3BlcnR5KHsgYXR0cmlidXRlOiAndGl0bGUtbGV2ZWwnIH0pIHB1YmxpYyBhY2Nlc3NvciB0aXRsZUxldmVsOiBTYmJUaXRsZUxldmVsID0gJzUnO1xuXG4gIC8qKiBDb250ZW50IG9mIHRpdGxlLiAqL1xuICBAZm9yY2VUeXBlKClcbiAgQHByb3BlcnR5KHsgYXR0cmlidXRlOiAndGl0bGUtY29udGVudCcgfSlcbiAgcHVibGljIGFjY2Vzc29yIHRpdGxlQ29udGVudDogc3RyaW5nID0gJyc7XG5cbiAgLyoqIENvbnRlbnQgb2YgY2hpcCBsYWJlbC4gKi9cbiAgQGZvcmNlVHlwZSgpXG4gIEBwcm9wZXJ0eSh7IGF0dHJpYnV0ZTogJ2NoaXAtY29udGVudCcsIHJlZmxlY3Q6IHRydWUsIGNvbnZlcnRlcjogb21pdEVtcHR5Q29udmVydGVyIH0pXG4gIHB1YmxpYyBhY2Nlc3NvciBjaGlwQ29udGVudDogc3RyaW5nID0gJyc7XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlcigpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgLy8gV2UgcmVuZGVyIHRoZSBjb250ZW50IG91dHNpZGUgdGhlIGFuY2hvciB0YWcgdG8gYWxsb3cgc2NyZWVuIHJlYWRlcnMgdG8gbmF2aWdhdGUgdGhyb3VnaCBpdFxuICAgIHJldHVybiBodG1sYFxuICAgICAgPGRpdiBjbGFzcz1cInNiYi10ZWFzZXJfX3dyYXBwZXJcIj5cbiAgICAgICAgJHt0aGlzLnJlbmRlckxpbmsoXG4gICAgICAgICAgLy8gRm9yIFNFTyB3ZSBhZGQgdGhlIGFjY2Vzc2liaWxpdHkgaGlkZGVuIGFzIGhpZGRlbiBjb250ZW50IG9mIHRoZSBsaW5rXG4gICAgICAgICAgaHRtbGA8c2JiLXNjcmVlbi1yZWFkZXItb25seT4ke3RoaXMuYWNjZXNzaWJpbGl0eUxhYmVsfTwvc2JiLXNjcmVlbi1yZWFkZXItb25seT5gLFxuICAgICAgICApfVxuICAgICAgICAke3RoaXMucmVuZGVyQ29udGVudCgpfVxuICAgICAgPC9kaXY+XG4gICAgYDtcbiAgfVxuXG4gIHByb3RlY3RlZCByZW5kZXJDb250ZW50KCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxzcGFuIGNsYXNzPVwic2JiLXRlYXNlcl9fY29udGFpbmVyXCI+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwic2JiLXRlYXNlcl9faW1hZ2Utd3JhcHBlclwiPlxuICAgICAgICAgIDxzbG90IG5hbWU9XCJpbWFnZVwiPjwvc2xvdD5cbiAgICAgICAgPC9zcGFuPlxuICAgICAgICA8c3BhbiBjbGFzcz1cInNiYi10ZWFzZXJfX3RleHRcIj5cbiAgICAgICAgICA8c2JiLWNoaXAtbGFiZWwgc2l6ZT1cInh4c1wiIGNvbG9yPVwiY2hhcmNvYWxcIiBjbGFzcz1cInNiYi10ZWFzZXJfX2NoaXAtbGFiZWxcIj5cbiAgICAgICAgICAgIDxzbG90IG5hbWU9XCJjaGlwXCI+JHt0aGlzLmNoaXBDb250ZW50fTwvc2xvdD5cbiAgICAgICAgICA8L3NiYi1jaGlwLWxhYmVsPlxuICAgICAgICAgIDxzYmItdGl0bGUgbGV2ZWw9JHt0aGlzLnRpdGxlTGV2ZWx9IHZpc3VhbC1sZXZlbD1cIjVcIiBjbGFzcz1cInNiYi10ZWFzZXJfX2xlYWRcIj5cbiAgICAgICAgICAgIDxzbG90IG5hbWU9XCJ0aXRsZVwiPiR7dGhpcy50aXRsZUNvbnRlbnR9PC9zbG90PlxuICAgICAgICAgIDwvc2JiLXRpdGxlPlxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwic2JiLXRlYXNlcl9fZGVzY3JpcHRpb25cIj5cbiAgICAgICAgICAgIDxzbG90Pjwvc2xvdD5cbiAgICAgICAgICA8L3NwYW4+XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvc3Bhbj5cbiAgICBgO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItdGVhc2VyJzogU2JiVGVhc2VyRWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7SUF5Qk0sb0JBQWdCLE1BQUE7O0FBRnJCLE1BQUEsbUJBQUEsQ0FBQSxjQUFjLFlBQVksR0FDMUIsV0FBVzs7OztvQkFDbUI7Ozs7Ozs7Ozs7Ozs7QUFBUixFQUFBLG1CQUFRLFlBQWtCO0FBQUE7O0FBSWxCLHNEQUFBLGtCQUFBLE1BQUEseUJBQzNCLGdCQUFnQjtBQUdzQix3REFBQSxrQkFBQSxNQUFBLDRCQUFBLEdBQUEsa0JBQUEsTUFBQSwwQkFBNEMsR0FBRztBQUt2RiwwREFBQSxrQkFBQSxNQUFBLDZCQUFBLEdBQUEsa0JBQUEsTUFBQSw0QkFBdUMsRUFBRTtBQUt6Qyx5REFBQSxrQkFBQSxNQUFBLCtCQUFBLEdBQUEsa0JBQUEsTUFBQSwyQkFBc0MsRUFBRTs7OztJQWRYLElBQWdCLFlBQzFCO0FBQUEsYUFBQSxtQkFBQTtBQUFBLElBQUE7QUFBQSxJQURVLElBQWdCLFVBQzFCLE9BQUE7QUFBQSx5QkFBQSw2QkFBQTtBQUFBLElBQUE7QUFBQTtBQUFBLElBR3FCLElBQWdCLGFBQWdDO0FBQUEsYUFBQSxtQkFBQTtBQUFBLElBQUE7QUFBQSxJQUFoRCxJQUFnQixXQUFnQyxPQUFBO0FBQUEseUJBQUEsOEJBQUE7QUFBQSxJQUFBO0FBQUE7QUFBQSxJQUt4RixJQUFnQixlQUEwQjtBQUFBLGFBQUEsbUJBQUE7QUFBQSxJQUFBO0FBQUEsSUFBMUMsSUFBZ0IsYUFBMEIsT0FBQTtBQUFBLHlCQUFBLGdDQUFBO0FBQUEsSUFBQTtBQUFBO0FBQUEsSUFLMUMsSUFBZ0IsY0FBeUI7QUFBQSxhQUFBLG1CQUFBO0FBQUEsSUFBQTtBQUFBLElBQXpDLElBQWdCLFlBQXlCLE9BQUE7QUFBQSx5QkFBQSwrQkFBQTtBQUFBLElBQUE7QUFBQSxJQUV0QixTQUFNO0FBRWhCLGFBQUE7QUFBQTtBQUFBLFVBRUQsS0FBSztBQUFBO0FBQUEsUUFFTCwrQkFBK0IsS0FBSyxrQkFBa0I7QUFBQSxNQUN2RCxDQUFBO0FBQUEsVUFDQyxLQUFLLGNBQWUsQ0FBQTtBQUFBO0FBQUE7QUFBQSxJQUFBO0FBQUEsSUFLbEIsZ0JBQWE7QUFDZCxhQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsZ0NBT3FCLEtBQUssV0FBVztBQUFBO0FBQUEsNkJBRW5CLEtBQUssVUFBVTtBQUFBLGlDQUNYLEtBQUssWUFBWTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsSUFBQTtBQUFBLEtBeENuQiw2Q0FJVyw4Q0FLeEMsZ0RBS0E7O0FBZEMsNEJBQUEsQ0FBQSxTQUFTLEVBQUUsU0FBUyxLQUFNLENBQUEsQ0FBQztBQUkzQiw2QkFBQSxDQUFBLFNBQVMsRUFBRSxXQUFXLGNBQWUsQ0FBQSxDQUFDO2dDQUd0QyxhQUNBLFNBQVMsRUFBRSxXQUFXLGdCQUFBLENBQWlCLENBQUM7QUFJeEMsOEJBQUEsQ0FBQSxhQUNBLFNBQVMsRUFBRSxXQUFXLGdCQUFnQixTQUFTLE1BQU0sV0FBVyxtQkFBb0IsQ0FBQSxDQUFDO0FBYnpDLGlCQUFBLElBQUEsTUFBQSx1QkFBQSxFQUFBLE1BQUEsWUFBQSxNQUFBLGFBQUEsUUFBQSxPQUFBLFNBQUEsT0FBQSxRQUFBLEVBQUEsS0FBQSxDQUFBLFFBQUEsZUFBQSxLQUFBLEtBQUEsQ0FBQSxRQUFBLElBQUEsV0FBQSxLQUFBLENBQUEsS0FBQSxVQUFBO0FBQUEsVUFBQSxZQUMxQjtBQUFBLFNBQUEsVUFBQSxhQUFBLHlCQUFBLDRCQUFBO0FBR3FDLGlCQUFBLElBQUEsTUFBQSx3QkFBQSxFQUFBLE1BQUEsWUFBQSxNQUFBLGNBQUEsUUFBQSxPQUFBLFNBQUEsT0FBQSxRQUFBLEVBQUEsS0FBQSxDQUFBLFFBQUEsZ0JBQUEsS0FBQSxLQUFBLENBQUEsUUFBQSxJQUFBLFlBQUEsS0FBQSxDQUFBLEtBQUEsVUFBQTtBQUFBLFVBQUEsYUFBZ0M7QUFBQSxTQUFBLFVBQUEsYUFBQSwwQkFBQSw2QkFBQTtBQUt4RSxpQkFBQSxJQUFBLE1BQUEsMEJBQUEsRUFBQSxNQUFBLFlBQUEsTUFBQSxnQkFBQSxRQUFBLE9BQUEsU0FBQSxPQUFBLFFBQUEsRUFBQSxLQUFBLENBQUEsUUFBQSxrQkFBQSxLQUFBLEtBQUEsQ0FBQSxRQUFBLElBQUEsY0FBQSxLQUFBLENBQUEsS0FBQSxVQUFBO0FBQUEsVUFBQSxlQUEwQjtBQUFBLFNBQUEsVUFBQSxhQUFBLDRCQUFBLCtCQUFBO0FBSzFCLGlCQUFBLElBQUEsTUFBQSx5QkFBQSxFQUFBLE1BQUEsWUFBQSxNQUFBLGVBQUEsUUFBQSxPQUFBLFNBQUEsT0FBQSxRQUFBLEVBQUEsS0FBQSxDQUFBLFFBQUEsaUJBQUEsS0FBQSxLQUFBLENBQUEsUUFBQSxJQUFBLGFBQUEsS0FBQSxDQUFBLEtBQUEsVUFBQTtBQUFBLFVBQUEsY0FBeUI7QUFBQSxTQUFBLFVBQUEsYUFBQSwyQkFBQSw4QkFBQTtBQWxCM0MsaUJBcURDLE1BQUEsbUJBQUEsRUFBQSxPQUFBLFdBQUEsR0FBQSxrQkFBQSxFQUFBLE1BQUEsU0FBQSxNQUFBLFdBQUEsTUFBQSxVQUFBLFVBQUEsR0FBQSxNQUFBLHVCQUFBOzs7UUFwRHdCLEdBQU0sU0FBbUIsT0FENUMsa0JBQWdCLFlBQUEsdUJBQUEsR0FBQzs7OyJ9

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

@@ -0,0 +1,23 @@
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { SbbLinkBaseElement } from '../core/base-elements.js';
+/**
+ * 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
+ */
+export declare class SbbTeaserHeroElement extends SbbLinkBaseElement {
+    static styles: CSSResultGroup;
+    /** Panel link text. */
+    accessor linkContent: string;
+    private _imageSlotChanged;
+    protected renderTemplate(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-teaser-hero': SbbTeaserHeroElement;
+    }
+}
+//# sourceMappingURL=teaser-hero.component.d.ts.map

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

@@ -0,0 +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;AAK9D,OAAO,8BAA8B,CAAC;AAEtC;;;;;;;GAOG;AACH,qBAGM,oBAAqB,SAAQ,kBAAkB;IACnD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,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

@@ -0,0 +1,184 @@
+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 { slotState, forceType, omitEmptyConverter } from "../core/decorators.js";
+import "../link/block-link-static.js";
+const style = css`*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+: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-titles);
+  --sbb-panel-font-size: var(--sbb-typo-scale-1-5x);
+  --sbb-panel-color: var(--sbb-color-white);
+  --sbb-panel-background-color: var(--sbb-color-red-alpha-90);
+  --sbb-panel-background-color-hover: var(--sbb-color-red);
+  --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(52.5rem)) {
+  :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([data-slot-names~=unnamed], [data-slot-names~=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-titles);
+  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"), slotState()];
+  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 = style, __runInitializers(_classThis, _classExtraInitializers), _a;
+  return _classThis;
+})();
+export {
+  SbbTeaserHeroElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVhc2VyLWhlcm8uY29tcG9uZW50LmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvZWxlbWVudHMvdGVhc2VyLWhlcm8vdGVhc2VyLWhlcm8uY29tcG9uZW50LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHR5cGUgQ1NTUmVzdWx0R3JvdXAsIHR5cGUgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgY3VzdG9tRWxlbWVudCwgcHJvcGVydHkgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5pbXBvcnQgeyBodG1sIH0gZnJvbSAnbGl0L3N0YXRpYy1odG1sLmpzJztcblxuaW1wb3J0IHsgU2JiTGlua0Jhc2VFbGVtZW50IH0gZnJvbSAnLi4vY29yZS9iYXNlLWVsZW1lbnRzLmpzJztcbmltcG9ydCB7IGZvcmNlVHlwZSwgb21pdEVtcHR5Q29udmVydGVyLCBzbG90U3RhdGUgfSBmcm9tICcuLi9jb3JlL2RlY29yYXRvcnMuanMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi90ZWFzZXItaGVyby5zY3NzP2xpdCZpbmxpbmUnO1xuXG5pbXBvcnQgJy4uL2xpbmsvYmxvY2stbGluay1zdGF0aWMuanMnO1xuXG4vKipcbiAqIEl0IGRpc3BsYXlzIGFuIGltYWdlIGFuZCBhbiBhY3Rpb24gY2FsbCB3aXRoaW4gYSBwYW5lbC5cbiAqXG4gKiBAc2xvdCAtIFVzZSB0aGUgdW5uYW1lZCBzbG90IHRvIGFkZCB0ZXh0IGNvbnRlbnQgdG8gdGhlIHBhbmVsXG4gKiBAc2xvdCBsaW5rLWNvbnRlbnQgLSBMaW5rIGNvbnRlbnQgb2YgdGhlIHBhbmVsXG4gKiBAc2xvdCBpbWFnZSAtIFRoZSBiYWNrZ3JvdW5kIGltYWdlIHRoYXQgY2FuIGJlIGEgYHNiYi1pbWFnZWBcbiAqIEBzbG90IGNoaXAgLSBUaGUgYHNiYi1jaGlwLWxhYmVsYCBjb21wb25lbnQgdGhhdCB3aWxsIGJlIGRpc3BsYXllZCBvbiB0b3AtbGVmdCBjb3JuZXJcbiAqL1xuZXhwb3J0XG5AY3VzdG9tRWxlbWVudCgnc2JiLXRlYXNlci1oZXJvJylcbkBzbG90U3RhdGUoKVxuY2xhc3MgU2JiVGVhc2VySGVyb0VsZW1lbnQgZXh0ZW5kcyBTYmJMaW5rQmFzZUVsZW1lbnQge1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBzdHlsZTtcblxuICAvKiogUGFuZWwgbGluayB0ZXh0LiAqL1xuICBAZm9yY2VUeXBlKClcbiAgQHByb3BlcnR5KHsgYXR0cmlidXRlOiAnbGluay1jb250ZW50JywgcmVmbGVjdDogdHJ1ZSwgY29udmVydGVyOiBvbWl0RW1wdHlDb252ZXJ0ZXIgfSlcbiAgcHVibGljIGFjY2Vzc29yIGxpbmtDb250ZW50OiBzdHJpbmcgPSAnJztcblxuICBwcml2YXRlIF9pbWFnZVNsb3RDaGFuZ2VkKCk6IHZvaWQge1xuICAgIEFycmF5LmZyb20odGhpcy5xdWVyeVNlbGVjdG9yQWxsKCdzYmItY2hpcC1sYWJlbCcpKS5mb3JFYWNoKChjKSA9PiAoYy5jb2xvciA9ICdjaGFyY29hbCcpKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSByZW5kZXJUZW1wbGF0ZSgpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8c3BhbiBjbGFzcz1cInNiYi10ZWFzZXItaGVyb19fcGFuZWxcIj5cbiAgICAgICAgPHAgY2xhc3M9XCJzYmItdGVhc2VyLWhlcm9fX3BhbmVsLXRleHRcIj5cbiAgICAgICAgICA8c2xvdD48L3Nsb3Q+XG4gICAgICAgIDwvcD5cbiAgICAgICAgPHNiYi1ibG9jay1saW5rLXN0YXRpY1xuICAgICAgICAgIGNsYXNzPVwic2JiLXRlYXNlci1oZXJvX19wYW5lbC1saW5rXCJcbiAgICAgICAgICBpY29uLW5hbWU9XCJjaGV2cm9uLXNtYWxsLXJpZ2h0LXNtYWxsXCJcbiAgICAgICAgICBpY29uLXBsYWNlbWVudD1cImVuZFwiXG4gICAgICAgICAgc2l6ZT1cIm1cIlxuICAgICAgICAgIG5lZ2F0aXZlXG4gICAgICAgID5cbiAgICAgICAgICA8c2xvdCBuYW1lPVwibGluay1jb250ZW50XCI+JHt0aGlzLmxpbmtDb250ZW50fTwvc2xvdD5cbiAgICAgICAgPC9zYmItYmxvY2stbGluay1zdGF0aWM+XG4gICAgICA8L3NwYW4+XG4gICAgICA8c2xvdCBuYW1lPVwiaW1hZ2VcIiBAc2xvdGNoYW5nZT0ke3RoaXMuX2ltYWdlU2xvdENoYW5nZWR9Pjwvc2xvdD5cbiAgICBgO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItdGVhc2VyLWhlcm8nOiBTYmJUZWFzZXJIZXJvRWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztJQXNCTSx3QkFBb0IsTUFBQTs7QUFGekIsTUFBQSxtQkFBQSxDQUFBLGNBQWMsaUJBQWlCLEdBQy9CLFdBQVc7Ozs7b0JBQ3VCOzs7O0FBQVIsRUFBQSxtQkFBUSxZQUFrQjtBQUFBOztBQU1uRCx3REFBQSxrQkFBQSxNQUFBLDJCQUFzQyxFQUFFOzs7O0lBQXhDLElBQWdCLGNBQXlCO0FBQUEsYUFBQSxtQkFBQTtBQUFBLElBQUE7QUFBQSxJQUF6QyxJQUFnQixZQUF5QixPQUFBO0FBQUEseUJBQUEsK0JBQUE7QUFBQSxJQUFBO0FBQUEsSUFFakMsb0JBQWlCO0FBQ2pCLFlBQUEsS0FBSyxLQUFLLGlCQUFpQixnQkFBZ0IsQ0FBQyxFQUFFLFFBQVEsQ0FBQyxNQUFPLEVBQUUsUUFBUSxVQUFXO0FBQUEsSUFBQTtBQUFBLElBR3hFLGlCQUFjO0FBQ3hCLGFBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsc0NBWTJCLEtBQUssV0FBVztBQUFBO0FBQUE7QUFBQSx1Q0FHZixLQUFLLGlCQUFpQjtBQUFBO0FBQUEsSUFBQTtBQUFBLEtBdEIzRDs7QUFGQyw4QkFBQSxDQUFBLGFBQ0EsU0FBUyxFQUFFLFdBQVcsZ0JBQWdCLFNBQVMsTUFBTSxXQUFXLG1CQUFvQixDQUFBLENBQUM7QUFDdEUsaUJBQUEsSUFBQSxNQUFBLHlCQUFBLEVBQUEsTUFBQSxZQUFBLE1BQUEsZUFBQSxRQUFBLE9BQUEsU0FBQSxPQUFBLFFBQUEsRUFBQSxLQUFBLENBQUEsUUFBQSxpQkFBQSxLQUFBLEtBQUEsQ0FBQSxRQUFBLElBQUEsYUFBQSxLQUFBLENBQUEsS0FBQSxVQUFBO0FBQUEsVUFBQSxjQUF5QjtBQUFBLFNBQUEsVUFBQSxhQUFBLDJCQUFBLDhCQUFBO0FBTjNDLGlCQStCQyxNQUFBLG1CQUFBLEVBQUEsT0FBQSxXQUFBLEdBQUEsa0JBQUEsRUFBQSxNQUFBLFNBQUEsTUFBQSxXQUFBLE1BQUEsVUFBQSxVQUFBLEdBQUEsTUFBQSx1QkFBQTs7O1FBOUJ3QixHQUFNLFNBQW1CLE9BRDVDLGtCQUFvQixZQUFBLHVCQUFBLEdBQUM7OzsifQ==

package/development/teaser-hero.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './teaser-hero/teaser-hero.js';
+export * from './teaser-hero/teaser-hero.component.js';
 //# 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,8BAA8B,CAAC"}
+{"version":3,"file":"teaser-hero.d.ts","sourceRoot":"","sources":["../../../src/elements/teaser-hero.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,wCAAwC,CAAC"}

package/development/teaser-hero.js

@@ -1,4 +1,4 @@
-import { SbbTeaserHeroElement } from "./teaser-hero/teaser-hero.js";
+import { SbbTeaserHeroElement } from "./teaser-hero/teaser-hero.component.js";
 export {
   SbbTeaserHeroElement
 };

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

@@ -0,0 +1,23 @@
+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;
+/**
+ * Displays a text and a footnote, combined with an image, to tease a product
+ *
+ * @slot - Use this slot to provide the main content.
+ * @slot image - Use this slot to provide an image or a `sbb-image` as a background.
+ * @slot footnote - Use this slot to provide a footnote.
+ * @cssprop [--sbb-teaser-product-background-gradient-start=25%] - At which percentage the background should start getting transparent.
+ * @cssprop [--sbb-teaser-product-background-gradient-end=75%] - At which percentage the background should be fully transparent.
+ */
+export declare class SbbTeaserProductElement extends SbbTeaserProductElement_base {
+    static styles: CSSResultGroup;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-teaser-product': SbbTeaserProductElement;
+    }
+}
+export {};
+//# sourceMappingURL=teaser-product.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"teaser-product.component.d.ts","sourceRoot":"","sources":["../../../../../src/elements/teaser-product/teaser-product/teaser-product.component.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"}