@sbb-esta/lyne-elements-experimental 0.52.2 → 0.53.0

package/custom-elements.json

@@ -811,6 +811,190 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "teaser-hero.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "It displays an image and an action call within a panel.",
+          "name": "SbbTeaserHeroElement",
+          "slots": [
+            {
+              "description": "Use the unnamed slot to add text content to the panel",
+              "name": ""
+            },
+            {
+              "description": "Link content of the panel",
+              "name": "link-content"
+            },
+            {
+              "description": "The background image that can be a `sbb-image`",
+              "name": "image"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "linkContent",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "public",
+              "description": "Panel link text.",
+              "attribute": "link-content"
+            },
+            {
+              "kind": "field",
+              "name": "imageSrc",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "public",
+              "description": "Image src will be passed to `sbb-image`.",
+              "attribute": "image-src"
+            },
+            {
+              "kind": "field",
+              "name": "imageAlt",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "public",
+              "description": "Image alt text will be passed to `sbb-image`.",
+              "attribute": "image-alt"
+            },
+            {
+              "kind": "method",
+              "name": "renderTemplate",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "link-content",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Panel link text.",
+              "fieldName": "linkContent"
+            },
+            {
+              "name": "image-src",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Image src will be passed to `sbb-image`.",
+              "fieldName": "imageSrc"
+            },
+            {
+              "name": "image-alt",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Image alt text will be passed to `sbb-image`.",
+              "fieldName": "imageAlt"
+            }
+          ],
+          "superclass": {
+            "name": "SbbLinkBaseElement",
+            "package": "@sbb-esta/lyne-elements/core/base-elements.js"
+          },
+          "tagName": "sbb-teaser-hero",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SbbTeaserHeroElement",
+          "declaration": {
+            "name": "SbbTeaserHeroElement",
+            "module": "teaser-hero.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "sbb-teaser-hero",
+          "declaration": {
+            "name": "SbbTeaserHeroElement",
+            "module": "teaser-hero.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "teaser-paid.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "It displays an image and a chip with a text.",
+          "name": "SbbTeaserPaidElement",
+          "slots": [
+            {
+              "description": "Link content of the panel",
+              "name": "chip"
+            },
+            {
+              "description": "The background image that can be a `sbb-image`",
+              "name": "image"
+            }
+          ],
+          "members": [
+            {
+              "kind": "method",
+              "name": "_chipSlotChanged",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderTemplate",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
+            }
+          ],
+          "superclass": {
+            "name": "SbbLinkBaseElement",
+            "package": "@sbb-esta/lyne-elements/core/base-elements.js"
+          },
+          "tagName": "sbb-teaser-paid",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SbbTeaserPaidElement",
+          "declaration": {
+            "name": "SbbTeaserPaidElement",
+            "module": "teaser-paid.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "sbb-teaser-paid",
+          "declaration": {
+            "name": "SbbTeaserPaidElement",
+            "module": "teaser-paid.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "timetable-duration.js",

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

@@ -0,0 +1,26 @@
+import { SbbLinkBaseElement } from '@sbb-esta/lyne-elements/core/base-elements.js';
+import { CSSResultGroup, TemplateResult } from 'lit';
+
+/**
+ * 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`
+ */
+export declare class SbbTeaserHeroElement extends SbbLinkBaseElement {
+    static styles: CSSResultGroup;
+    /** Panel link text. */
+    linkContent?: string;
+    /** Image src will be passed to `sbb-image`. */
+    imageSrc?: string;
+    /** Image alt text will be passed to `sbb-image`. */
+    imageAlt?: string;
+    protected renderTemplate(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-teaser-hero': SbbTeaserHeroElement;
+    }
+}
+//# sourceMappingURL=teaser-hero.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"teaser-hero.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/teaser-hero/teaser-hero.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,+CAA+C,CAAC;AACnF,OAAO,EAAE,KAAK,cAAc,EAAW,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAMxE,OAAO,kCAAkC,CAAC;AAC1C,OAAO,mDAAmD,CAAC;AAE3D;;;;;;GAMG;AACH,qBACa,oBAAqB,SAAQ,kBAAkB;IAC1D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,uBAAuB;IACyB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErE,+CAA+C;IACF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE/D,oDAAoD;IACP,QAAQ,CAAC,EAAE,MAAM,CAAC;cAE5C,cAAc,IAAI,cAAc;CAyBpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/development/teaser-hero.d.ts

@@ -0,0 +1,2 @@
+export * from './teaser-hero/teaser-hero.js';
+//# sourceMappingURL=teaser-hero.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"teaser-hero.d.ts","sourceRoot":"","sources":["../../../src/elements-experimental/teaser-hero.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}

package/development/teaser-hero.js

@@ -0,0 +1,181 @@
+import { SbbLinkBaseElement } from "@sbb-esta/lyne-elements/core/base-elements.js";
+import { css, nothing } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { html } from "lit/static-html.js";
+import "@sbb-esta/lyne-elements/image.js";
+import "@sbb-esta/lyne-elements/link/block-link-static.js";
+const style = css`/**
+ * Better font rendering (on OS X)
+ * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
+ *
+ * Usage:
+ *
+ * .var_dark_on_light {
+ * 	@include font-smoothing;
+ * }
+ * .var_light_on_dark {
+ * 	@include font-smoothing-reset;
+ * }
+ */
+/** This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element. */
+*,
+::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-zero-time,
+    var(--sbb-animation-duration-4x)
+  );
+  --sbb-panel-animation-easing: var(--sbb-animation-easing);
+  --sbb-teaser-hero-brightness-hover: 1.075;
+}
+@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);
+    --sbb-teaser-hero-brightness: var(--sbb-teaser-hero-brightness-hover);
+  }
+}
+.sbb-teaser-hero {
+  position: relative;
+  display: block;
+  min-height: var(--sbb-panel-height);
+}
+:host(:not([data-focus-origin=mouse], [data-focus-origin=touch])) .sbb-teaser-hero:focus-visible {
+  outline-offset: var(--sbb-focus-outline-offset);
+  outline: var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);
+}
+
+.sbb-teaser-hero__panel {
+  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);
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+}
+@media (any-hover: hover) {
+  .sbb-teaser-hero__panel:hover {
+    --sbb-panel-background-color: var(--sbb-panel-background-color-hover);
+  }
+}
+
+.sbb-teaser-hero__panel-text {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  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;
+}
+
+.sbb-teaser-hero__panel-link {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+::slotted([slot=image]),
+sbb-image {
+  will-change: filter;
+  filter: brightness(var(--sbb-teaser-hero-brightness, 1));
+  transition: filter var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing);
+}`;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let SbbTeaserHeroElement = class extends SbbLinkBaseElement {
+  renderTemplate() {
+    return html`
+      <span class="sbb-teaser-hero__panel">
+        <p class="sbb-teaser-hero__panel-text">
+          <slot></slot>
+        </p>
+        ${this.href ? html`<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>` : nothing}
+      </span>
+      <slot name="image">
+        ${this.imageSrc ? html`<sbb-image image-src=${this.imageSrc} alt=${this.imageAlt ?? nothing}></sbb-image>` : nothing}
+      </slot>
+    `;
+  }
+};
+SbbTeaserHeroElement.styles = style;
+__decorateClass([
+  property({ attribute: "link-content" })
+], SbbTeaserHeroElement.prototype, "linkContent", 2);
+__decorateClass([
+  property({ attribute: "image-src" })
+], SbbTeaserHeroElement.prototype, "imageSrc", 2);
+__decorateClass([
+  property({ attribute: "image-alt" })
+], SbbTeaserHeroElement.prototype, "imageAlt", 2);
+SbbTeaserHeroElement = __decorateClass([
+  customElement("sbb-teaser-hero")
+], SbbTeaserHeroElement);
+export {
+  SbbTeaserHeroElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVhc2VyLWhlcm8uanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9lbGVtZW50cy1leHBlcmltZW50YWwvdGVhc2VyLWhlcm8vdGVhc2VyLWhlcm8udHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgU2JiTGlua0Jhc2VFbGVtZW50IH0gZnJvbSAnQHNiYi1lc3RhL2x5bmUtZWxlbWVudHMvY29yZS9iYXNlLWVsZW1lbnRzLmpzJztcbmltcG9ydCB7IHR5cGUgQ1NTUmVzdWx0R3JvdXAsIG5vdGhpbmcsIHR5cGUgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgY3VzdG9tRWxlbWVudCwgcHJvcGVydHkgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5pbXBvcnQgeyBodG1sIH0gZnJvbSAnbGl0L3N0YXRpYy1odG1sLmpzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vdGVhc2VyLWhlcm8uc2Nzcz9saXQmaW5saW5lJztcblxuaW1wb3J0ICdAc2JiLWVzdGEvbHluZS1lbGVtZW50cy9pbWFnZS5qcyc7XG5pbXBvcnQgJ0BzYmItZXN0YS9seW5lLWVsZW1lbnRzL2xpbmsvYmxvY2stbGluay1zdGF0aWMuanMnO1xuXG4vKipcbiAqIEl0IGRpc3BsYXlzIGFuIGltYWdlIGFuZCBhbiBhY3Rpb24gY2FsbCB3aXRoaW4gYSBwYW5lbC5cbiAqXG4gKiBAc2xvdCAtIFVzZSB0aGUgdW5uYW1lZCBzbG90IHRvIGFkZCB0ZXh0IGNvbnRlbnQgdG8gdGhlIHBhbmVsXG4gKiBAc2xvdCBsaW5rLWNvbnRlbnQgLSBMaW5rIGNvbnRlbnQgb2YgdGhlIHBhbmVsXG4gKiBAc2xvdCBpbWFnZSAtIFRoZSBiYWNrZ3JvdW5kIGltYWdlIHRoYXQgY2FuIGJlIGEgYHNiYi1pbWFnZWBcbiAqL1xuQGN1c3RvbUVsZW1lbnQoJ3NiYi10ZWFzZXItaGVybycpXG5leHBvcnQgY2xhc3MgU2JiVGVhc2VySGVyb0VsZW1lbnQgZXh0ZW5kcyBTYmJMaW5rQmFzZUVsZW1lbnQge1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBzdHlsZTtcblxuICAvKiogUGFuZWwgbGluayB0ZXh0LiAqL1xuICBAcHJvcGVydHkoeyBhdHRyaWJ1dGU6ICdsaW5rLWNvbnRlbnQnIH0pIHB1YmxpYyBsaW5rQ29udGVudD86IHN0cmluZztcblxuICAvKiogSW1hZ2Ugc3JjIHdpbGwgYmUgcGFzc2VkIHRvIGBzYmItaW1hZ2VgLiAqL1xuICBAcHJvcGVydHkoeyBhdHRyaWJ1dGU6ICdpbWFnZS1zcmMnIH0pIHB1YmxpYyBpbWFnZVNyYz86IHN0cmluZztcblxuICAvKiogSW1hZ2UgYWx0IHRleHQgd2lsbCBiZSBwYXNzZWQgdG8gYHNiYi1pbWFnZWAuICovXG4gIEBwcm9wZXJ0eSh7IGF0dHJpYnV0ZTogJ2ltYWdlLWFsdCcgfSkgcHVibGljIGltYWdlQWx0Pzogc3RyaW5nO1xuXG4gIHByb3RlY3RlZCBvdmVycmlkZSByZW5kZXJUZW1wbGF0ZSgpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8c3BhbiBjbGFzcz1cInNiYi10ZWFzZXItaGVyb19fcGFuZWxcIj5cbiAgICAgICAgPHAgY2xhc3M9XCJzYmItdGVhc2VyLWhlcm9fX3BhbmVsLXRleHRcIj5cbiAgICAgICAgICA8c2xvdD48L3Nsb3Q+XG4gICAgICAgIDwvcD5cbiAgICAgICAgJHt0aGlzLmhyZWZcbiAgICAgICAgICA/IGh0bWxgPHNiYi1ibG9jay1saW5rLXN0YXRpY1xuICAgICAgICAgICAgICBjbGFzcz1cInNiYi10ZWFzZXItaGVyb19fcGFuZWwtbGlua1wiXG4gICAgICAgICAgICAgIGljb24tbmFtZT1cImNoZXZyb24tc21hbGwtcmlnaHQtc21hbGxcIlxuICAgICAgICAgICAgICBpY29uLXBsYWNlbWVudD1cImVuZFwiXG4gICAgICAgICAgICAgIHNpemU9XCJtXCJcbiAgICAgICAgICAgICAgbmVnYXRpdmVcbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgPHNsb3QgbmFtZT1cImxpbmstY29udGVudFwiPiR7dGhpcy5saW5rQ29udGVudH08L3Nsb3Q+XG4gICAgICAgICAgICA8L3NiYi1ibG9jay1saW5rLXN0YXRpYz5gXG4gICAgICAgICAgOiBub3RoaW5nfVxuICAgICAgPC9zcGFuPlxuICAgICAgPHNsb3QgbmFtZT1cImltYWdlXCI+XG4gICAgICAgICR7dGhpcy5pbWFnZVNyY1xuICAgICAgICAgID8gaHRtbGA8c2JiLWltYWdlIGltYWdlLXNyYz0ke3RoaXMuaW1hZ2VTcmN9IGFsdD0ke3RoaXMuaW1hZ2VBbHQgPz8gbm90aGluZ30+PC9zYmItaW1hZ2U+YFxuICAgICAgICAgIDogbm90aGluZ31cbiAgICAgIDwvc2xvdD5cbiAgICBgO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItdGVhc2VyLWhlcm8nOiBTYmJUZWFzZXJIZXJvRWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQWtCYSxJQUFBLHVCQUFOLGNBQW1DLG1CQUFtQjtBQUFBLEVBWXhDLGlCQUFpQztBQUMzQyxXQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxVQUtELEtBQUssT0FDSDtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLDBDQU84QixLQUFLLFdBQVc7QUFBQSx3Q0FFOUMsT0FBTztBQUFBO0FBQUE7QUFBQSxVQUdULEtBQUssV0FDSCw0QkFBNEIsS0FBSyxRQUFRLFFBQVEsS0FBSyxZQUFZLE9BQU8sa0JBQ3pFLE9BQU87QUFBQTtBQUFBO0FBQUEsRUFHakI7QUFDRjtBQXJDYSxxQkFDWSxTQUF5QjtBQUdBLGdCQUFBO0FBQUEsRUFBL0MsU0FBUyxFQUFFLFdBQVcsZ0JBQWdCO0FBQUEsR0FKNUIscUJBSXFDLFdBQUEsZUFBQSxDQUFBO0FBR0gsZ0JBQUE7QUFBQSxFQUE1QyxTQUFTLEVBQUUsV0FBVyxhQUFhO0FBQUEsR0FQekIscUJBT2tDLFdBQUEsWUFBQSxDQUFBO0FBR0EsZ0JBQUE7QUFBQSxFQUE1QyxTQUFTLEVBQUUsV0FBVyxhQUFhO0FBQUEsR0FWekIscUJBVWtDLFdBQUEsWUFBQSxDQUFBO0FBVmxDLHVCQUFOLGdCQUFBO0FBQUEsRUFETixjQUFjLGlCQUFpQjtBQUFBLEdBQ25CLG9CQUFBOyJ9

package/development/teaser-paid/teaser-paid.d.ts

@@ -0,0 +1,20 @@
+import { SbbLinkBaseElement } from '@sbb-esta/lyne-elements/core/base-elements.js';
+import { CSSResultGroup, TemplateResult } from 'lit';
+
+/**
+ * It displays an image and a chip with a text.
+ *
+ * @slot chip - Link content of the panel
+ * @slot image - The background image that can be a `sbb-image`
+ */
+export declare class SbbTeaserPaidElement extends SbbLinkBaseElement {
+    static styles: CSSResultGroup;
+    private _chipSlotChanged;
+    protected renderTemplate(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-teaser-paid': SbbTeaserPaidElement;
+    }
+}
+//# sourceMappingURL=teaser-paid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"teaser-paid.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/teaser-paid/teaser-paid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,+CAA+C,CAAC;AACnF,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKrE;;;;;GAKG;AACH,qBACa,oBAAqB,SAAQ,kBAAkB;IAC1D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,gBAAgB;cAIL,cAAc,IAAI,cAAc;CAMpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/development/teaser-paid.d.ts

@@ -0,0 +1,2 @@
+export * from './teaser-paid/teaser-paid.js';
+//# sourceMappingURL=teaser-paid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"teaser-paid.d.ts","sourceRoot":"","sources":["../../../src/elements-experimental/teaser-paid.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}

package/development/teaser-paid.js

@@ -0,0 +1,91 @@
+import { SbbLinkBaseElement } from "@sbb-esta/lyne-elements/core/base-elements.js";
+import { css, html } from "lit";
+import { customElement } from "lit/decorators.js";
+const style = css`/**
+ * Better font rendering (on OS X)
+ * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
+ *
+ * Usage:
+ *
+ * .var_dark_on_light {
+ * 	@include font-smoothing;
+ * }
+ * .var_light_on_dark {
+ * 	@include font-smoothing-reset;
+ * }
+ */
+/** This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element. */
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+  outline: none !important;
+  --sbb-teaser-paid-chip-inset: var(--sbb-spacing-responsive-xxxs) auto auto
+    var(--sbb-spacing-responsive-xxxs);
+  --sbb-teaser-paid-brightness-hover: 1.075;
+  --sbb-teaser-paid-animation-duration: var(
+    --sbb-disable-animation-zero-time,
+    var(--sbb-animation-duration-4x)
+  );
+  --sbb-teaser-paid-animation-easing: var(--sbb-animation-easing);
+}
+
+@media (any-hover: hover) {
+  :host(:hover) {
+    --sbb-teaser-paid-brightness: var(--sbb-teaser-paid-brightness-hover);
+  }
+}
+.sbb-teaser-paid {
+  position: relative;
+  display: block;
+}
+:host(:not([data-focus-origin=mouse], [data-focus-origin=touch])) .sbb-teaser-paid:focus-visible {
+  outline-offset: var(--sbb-focus-outline-offset);
+  outline: var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);
+}
+
+::slotted([slot=chip]) {
+  position: absolute;
+  inset: var(--sbb-teaser-paid-chip-inset);
+  z-index: 1;
+}
+
+::slotted([slot=image]) {
+  will-change: filter;
+  filter: brightness(var(--sbb-teaser-paid-brightness, 1));
+  transition: filter var(--sbb-teaser-paid-animation-duration) var(--sbb-teaser-paid-animation-easing);
+}`;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let SbbTeaserPaidElement = class extends SbbLinkBaseElement {
+  _chipSlotChanged() {
+    var _a;
+    (_a = this.querySelector("sbb-chip")) == null ? void 0 : _a.setAttribute("color", "charcoal");
+  }
+  renderTemplate() {
+    return html`
+      <slot name="chip" @slotchange=${() => this._chipSlotChanged()}></slot>
+      <slot name="image"></slot>
+    `;
+  }
+};
+SbbTeaserPaidElement.styles = style;
+SbbTeaserPaidElement = __decorateClass([
+  customElement("sbb-teaser-paid")
+], SbbTeaserPaidElement);
+export {
+  SbbTeaserPaidElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVhc2VyLXBhaWQuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9lbGVtZW50cy1leHBlcmltZW50YWwvdGVhc2VyLXBhaWQvdGVhc2VyLXBhaWQudHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgU2JiTGlua0Jhc2VFbGVtZW50IH0gZnJvbSAnQHNiYi1lc3RhL2x5bmUtZWxlbWVudHMvY29yZS9iYXNlLWVsZW1lbnRzLmpzJztcbmltcG9ydCB7IGh0bWwsIHR5cGUgQ1NTUmVzdWx0R3JvdXAsIHR5cGUgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgY3VzdG9tRWxlbWVudCB9IGZyb20gJ2xpdC9kZWNvcmF0b3JzLmpzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vdGVhc2VyLXBhaWQuc2Nzcz9saXQmaW5saW5lJztcblxuLyoqXG4gKiBJdCBkaXNwbGF5cyBhbiBpbWFnZSBhbmQgYSBjaGlwIHdpdGggYSB0ZXh0LlxuICpcbiAqIEBzbG90IGNoaXAgLSBMaW5rIGNvbnRlbnQgb2YgdGhlIHBhbmVsXG4gKiBAc2xvdCBpbWFnZSAtIFRoZSBiYWNrZ3JvdW5kIGltYWdlIHRoYXQgY2FuIGJlIGEgYHNiYi1pbWFnZWBcbiAqL1xuQGN1c3RvbUVsZW1lbnQoJ3NiYi10ZWFzZXItcGFpZCcpXG5leHBvcnQgY2xhc3MgU2JiVGVhc2VyUGFpZEVsZW1lbnQgZXh0ZW5kcyBTYmJMaW5rQmFzZUVsZW1lbnQge1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBzdHlsZTtcblxuICBwcml2YXRlIF9jaGlwU2xvdENoYW5nZWQoKTogdm9pZCB7XG4gICAgdGhpcy5xdWVyeVNlbGVjdG9yKCdzYmItY2hpcCcpPy5zZXRBdHRyaWJ1dGUoJ2NvbG9yJywgJ2NoYXJjb2FsJyk7XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyVGVtcGxhdGUoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgIHJldHVybiBodG1sYFxuICAgICAgPHNsb3QgbmFtZT1cImNoaXBcIiBAc2xvdGNoYW5nZT0keygpID0+IHRoaXMuX2NoaXBTbG90Q2hhbmdlZCgpfT48L3Nsb3Q+XG4gICAgICA8c2xvdCBuYW1lPVwiaW1hZ2VcIj48L3Nsb3Q+XG4gICAgYDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLXRlYXNlci1wYWlkJzogU2JiVGVhc2VyUGFpZEVsZW1lbnQ7XG4gIH1cbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQWFhLElBQUEsdUJBQU4sY0FBbUMsbUJBQW1CO0FBQUEsRUFHbkQsbUJBQXlCOztBQUMvQixlQUFLLGNBQWMsVUFBVSxNQUE3QixtQkFBZ0MsYUFBYSxTQUFTO0FBQUEsRUFDeEQ7QUFBQSxFQUVtQixpQkFBaUM7QUFDM0MsV0FBQTtBQUFBLHNDQUMyQixNQUFNLEtBQUssa0JBQWtCO0FBQUE7QUFBQTtBQUFBLEVBR2pFO0FBQ0Y7QUFiYSxxQkFDWSxTQUF5QjtBQURyQyx1QkFBTixnQkFBQTtBQUFBLEVBRE4sY0FBYyxpQkFBaUI7QUFBQSxHQUNuQixvQkFBQTsifQ==

package/index.d.ts

@@ -3,6 +3,8 @@ import { SbbPearlChainElement } from "./pearl-chain.js";
 import { SbbPearlChainTimeElement } from "./pearl-chain-time.js";
 import { SbbPearlChainVerticalElement } from "./pearl-chain-vertical.js";
 import { SbbPearlChainVerticalItemElement } from "./pearl-chain-vertical-item.js";
+import { SbbTeaserHeroElement } from "./teaser-hero.js";
+import { SbbTeaserPaidElement } from "./teaser-paid.js";
 import { SbbTimetableDurationElement } from "./timetable-duration.js";
 import { SbbTimetableRowElement } from "./timetable-row.js";
 
@@ -12,6 +14,8 @@ declare global {
   var SbbPearlChainTimeElement: SbbPearlChainTimeElement;
   var SbbPearlChainVerticalElement: SbbPearlChainVerticalElement;
   var SbbPearlChainVerticalItemElement: SbbPearlChainVerticalItemElement;
+  var SbbTeaserHeroElement: SbbTeaserHeroElement;
+  var SbbTeaserPaidElement: SbbTeaserPaidElement;
   var SbbTimetableDurationElement: SbbTimetableDurationElement;
   var SbbTimetableRowElement: SbbTimetableRowElement;
 }

package/index.js

@@ -3,6 +3,8 @@ import { SbbPearlChainElement } from "./pearl-chain.js";
 import { SbbPearlChainTimeElement } from "./pearl-chain-time.js";
 import { SbbPearlChainVerticalElement } from "./pearl-chain-vertical.js";
 import { SbbPearlChainVerticalItemElement } from "./pearl-chain-vertical-item.js";
+import { SbbTeaserHeroElement } from "./teaser-hero.js";
+import { SbbTeaserPaidElement } from "./teaser-paid.js";
 import { SbbTimetableDurationElement } from "./timetable-duration.js";
 import { SbbTimetableRowElement } from "./timetable-row.js";
 
@@ -11,6 +13,8 @@ globalThis.SbbPearlChainElement = SbbPearlChainElement;
 globalThis.SbbPearlChainTimeElement = SbbPearlChainTimeElement;
 globalThis.SbbPearlChainVerticalElement = SbbPearlChainVerticalElement;
 globalThis.SbbPearlChainVerticalItemElement = SbbPearlChainVerticalItemElement;
+globalThis.SbbTeaserHeroElement = SbbTeaserHeroElement;
+globalThis.SbbTeaserPaidElement = SbbTeaserPaidElement;
 globalThis.SbbTimetableDurationElement = SbbTimetableDurationElement;
 globalThis.SbbTimetableRowElement = SbbTimetableRowElement;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbb-esta/lyne-elements-experimental",
-  "version": "0.52.2",
+  "version": "0.53.0",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
@@ -11,7 +11,7 @@
   "type": "module",
   "customElements": "custom-elements.json",
   "peerDependencies": {
-    "@sbb-esta/lyne-elements": "0.52.2"
+    "@sbb-esta/lyne-elements": "0.53.0"
   },
   "dependencies": {
     "lit": "^3.0.0"
@@ -71,6 +71,16 @@
       "development": "./development/pearl-chain-vertical-item.js",
       "default": "./pearl-chain-vertical-item.js"
     },
+    "./teaser-hero.js": {
+      "types": "./development/teaser-hero.d.ts",
+      "development": "./development/teaser-hero.js",
+      "default": "./teaser-hero.js"
+    },
+    "./teaser-paid.js": {
+      "types": "./development/teaser-paid.d.ts",
+      "development": "./development/teaser-paid.js",
+      "default": "./teaser-paid.js"
+    },
     "./timetable-duration.js": {
       "types": "./development/timetable-duration.d.ts",
       "development": "./development/timetable-duration.js",

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

@@ -0,0 +1,26 @@
+import { SbbLinkBaseElement } from '@sbb-esta/lyne-elements/core/base-elements.js';
+import { CSSResultGroup, TemplateResult } from 'lit';
+
+/**
+ * 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`
+ */
+export declare class SbbTeaserHeroElement extends SbbLinkBaseElement {
+    static styles: CSSResultGroup;
+    /** Panel link text. */
+    linkContent?: string;
+    /** Image src will be passed to `sbb-image`. */
+    imageSrc?: string;
+    /** Image alt text will be passed to `sbb-image`. */
+    imageAlt?: string;
+    protected renderTemplate(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-teaser-hero': SbbTeaserHeroElement;
+    }
+}
+//# sourceMappingURL=teaser-hero.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"teaser-hero.d.ts","sourceRoot":"","sources":["../../../src/elements-experimental/teaser-hero/teaser-hero.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,+CAA+C,CAAC;AACnF,OAAO,EAAE,KAAK,cAAc,EAAW,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAMxE,OAAO,kCAAkC,CAAC;AAC1C,OAAO,mDAAmD,CAAC;AAE3D;;;;;;GAMG;AACH,qBACa,oBAAqB,SAAQ,kBAAkB;IAC1D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,uBAAuB;IACyB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErE,+CAA+C;IACF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE/D,oDAAoD;IACP,QAAQ,CAAC,EAAE,MAAM,CAAC;cAE5C,cAAc,IAAI,cAAc;CAyBpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/teaser-hero.d.ts

@@ -0,0 +1,2 @@
+export * from './teaser-hero/teaser-hero.js';
+//# sourceMappingURL=teaser-hero.d.ts.map

package/teaser-hero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"teaser-hero.d.ts","sourceRoot":"","sources":["../../src/elements-experimental/teaser-hero.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}

package/teaser-hero.js

@@ -0,0 +1,51 @@
+import { SbbLinkBaseElement as g } from "@sbb-esta/lyne-elements/core/base-elements.js";
+import { css as m, nothing as b } from "lit";
+import { property as p, customElement as c } from "lit/decorators.js";
+import { html as l } from "lit/static-html.js";
+import "@sbb-esta/lyne-elements/image.js";
+import "@sbb-esta/lyne-elements/link/block-link-static.js";
+const v = m`*,: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-zero-time, var(--sbb-animation-duration-4x) );--sbb-panel-animation-easing: var(--sbb-animation-easing);--sbb-teaser-hero-brightness-hover: 1.075}@media (min-width: 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: 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);--sbb-teaser-hero-brightness: var(--sbb-teaser-hero-brightness-hover)}}.sbb-teaser-hero{position:relative;display:block;min-height:var(--sbb-panel-height)}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser-hero:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-teaser-hero__panel{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);position:absolute;top:50%;transform:translateY(-50%);z-index:1}@media (any-hover: hover){.sbb-teaser-hero__panel:hover{--sbb-panel-background-color: var(--sbb-panel-background-color-hover)}}.sbb-teaser-hero__panel-text{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;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);-webkit-hyphens:auto;hyphens:auto;display:inline;margin:0;padding:0}.sbb-teaser-hero__panel-link{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::slotted([slot=image]),sbb-image{will-change:filter;filter:brightness(var(--sbb-teaser-hero-brightness, 1));transition:filter var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing)}`;
+var d = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (h, t, i, n) => {
+  for (var e = n > 1 ? void 0 : n ? f(t, i) : t, r = h.length - 1, o; r >= 0; r--)
+    (o = h[r]) && (e = (n ? o(t, i, e) : o(e)) || e);
+  return n && e && d(t, i, e), e;
+};
+let a = class extends g {
+  renderTemplate() {
+    return l`
+      <span class="sbb-teaser-hero__panel">
+        <p class="sbb-teaser-hero__panel-text">
+          <slot></slot>
+        </p>
+        ${this.href ? l`<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>` : b}
+      </span>
+      <slot name="image">
+        ${this.imageSrc ? l`<sbb-image image-src=${this.imageSrc} alt=${this.imageAlt ?? b}></sbb-image>` : b}
+      </slot>
+    `;
+  }
+};
+a.styles = v;
+s([
+  p({ attribute: "link-content" })
+], a.prototype, "linkContent", 2);
+s([
+  p({ attribute: "image-src" })
+], a.prototype, "imageSrc", 2);
+s([
+  p({ attribute: "image-alt" })
+], a.prototype, "imageAlt", 2);
+a = s([
+  c("sbb-teaser-hero")
+], a);
+export {
+  a as SbbTeaserHeroElement
+};

package/teaser-paid/teaser-paid.d.ts

@@ -0,0 +1,20 @@
+import { SbbLinkBaseElement } from '@sbb-esta/lyne-elements/core/base-elements.js';
+import { CSSResultGroup, TemplateResult } from 'lit';
+
+/**
+ * It displays an image and a chip with a text.
+ *
+ * @slot chip - Link content of the panel
+ * @slot image - The background image that can be a `sbb-image`
+ */
+export declare class SbbTeaserPaidElement extends SbbLinkBaseElement {
+    static styles: CSSResultGroup;
+    private _chipSlotChanged;
+    protected renderTemplate(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-teaser-paid': SbbTeaserPaidElement;
+    }
+}
+//# sourceMappingURL=teaser-paid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"teaser-paid.d.ts","sourceRoot":"","sources":["../../../src/elements-experimental/teaser-paid/teaser-paid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,+CAA+C,CAAC;AACnF,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKrE;;;;;GAKG;AACH,qBACa,oBAAqB,SAAQ,kBAAkB;IAC1D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,gBAAgB;cAIL,cAAc,IAAI,cAAc;CAMpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/teaser-paid.d.ts

@@ -0,0 +1,2 @@
+export * from './teaser-paid/teaser-paid.js';
+//# sourceMappingURL=teaser-paid.d.ts.map

package/teaser-paid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"teaser-paid.d.ts","sourceRoot":"","sources":["../../src/elements-experimental/teaser-paid.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}

package/teaser-paid.js

@@ -0,0 +1,28 @@
+import { SbbLinkBaseElement as b } from "@sbb-esta/lyne-elements/core/base-elements.js";
+import { css as l, html as p } from "lit";
+import { customElement as c } from "lit/decorators.js";
+const d = l`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important;--sbb-teaser-paid-chip-inset: var(--sbb-spacing-responsive-xxxs) auto auto var(--sbb-spacing-responsive-xxxs);--sbb-teaser-paid-brightness-hover: 1.075;--sbb-teaser-paid-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-teaser-paid-animation-easing: var(--sbb-animation-easing)}@media (any-hover: hover){:host(:hover){--sbb-teaser-paid-brightness: var(--sbb-teaser-paid-brightness-hover)}}.sbb-teaser-paid{position:relative;display:block}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser-paid:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}::slotted([slot=chip]){position:absolute;inset:var(--sbb-teaser-paid-chip-inset);z-index:1}::slotted([slot=image]){will-change:filter;filter:brightness(var(--sbb-teaser-paid-brightness, 1));transition:filter var(--sbb-teaser-paid-animation-duration) var(--sbb-teaser-paid-animation-easing)}`;
+var h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, m = (s, t, a, i) => {
+  for (var e = i > 1 ? void 0 : i ? v(t, a) : t, o = s.length - 1, r; o >= 0; o--)
+    (r = s[o]) && (e = (i ? r(t, a, e) : r(e)) || e);
+  return i && e && h(t, a, e), e;
+};
+let n = class extends b {
+  _chipSlotChanged() {
+    var s;
+    (s = this.querySelector("sbb-chip")) == null || s.setAttribute("color", "charcoal");
+  }
+  renderTemplate() {
+    return p`
+      <slot name="chip" @slotchange=${() => this._chipSlotChanged()}></slot>
+      <slot name="image"></slot>
+    `;
+  }
+};
+n.styles = d;
+n = m([
+  c("sbb-teaser-paid")
+], n);
+export {
+  n as SbbTeaserPaidElement
+};