@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/development/tag/tag.js

@@ -0,0 +1,298 @@
+import { css, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { SbbButtonBaseElement } from "../core/base-elements.js";
+import { SbbConnectedAbortController, SbbSlotStateController } from "../core/controllers.js";
+import { EventEmitter } from "../core/eventing.js";
+import { SbbDisabledTabIndexActionMixin } from "../core/mixins.js";
+import { SbbIconNameMixin } from "../icon.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 {
+  --sbb-tag-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-tag-background-color: var(--sbb-color-white);
+  --sbb-tag-border-color: var(--sbb-color-cloud);
+  --sbb-tag-border-style: solid;
+  --sbb-tag-border-width: var(--sbb-border-width-1x);
+  --sbb-tag-text-color: var(--sbb-color-charcoal);
+  --sbb-tag-amount-color: var(--sbb-color-metal);
+  --sbb-tag-height: var(--sbb-size-element-xs);
+  --sbb-tag-inset: 0;
+  --sbb-tag-content-shift: translateY(0);
+  --sbb-tag-animation-duration: var(
+    --sbb-disable-animation-zero-time,
+    var(--sbb-animation-duration-2x)
+  );
+  --sbb-tag-animation-easing: var(--sbb-animation-easing);
+  --sbb-tag-padding-inline: var(--sbb-spacing-fixed-5x);
+  --sbb-tag-gap: var(--sbb-spacing-fixed-2x);
+  display: inline-block;
+  outline: none !important;
+  max-width: 100%;
+}
+@media (forced-colors: active) {
+  :host {
+    --sbb-tag-background-color: Canvas !important;
+    --sbb-tag-text-color: ButtonText;
+    --sbb-tag-amount-color: ButtonText;
+    --sbb-tag-border-color: CanvasText;
+    --sbb-tag-border-width: var(--sbb-border-width-2x);
+  }
+}
+
+:host([checked]) {
+  --sbb-tag-border-color: var(--sbb-color-charcoal);
+  --sbb-tag-border-width: var(--sbb-border-width-2x);
+}
+@media (forced-colors: active) {
+  :host([checked]) {
+    --sbb-tag-border-color: Highlight !important;
+  }
+}
+
+:host([disabled]) {
+  --sbb-tag-text-color: var(--sbb-color-granite);
+  --sbb-tag-amount-color: var(--sbb-tag-text-color);
+  --sbb-tag-background-color: var(--sbb-color-milk);
+  --sbb-tag-border-color: var(--sbb-color-cement);
+  --sbb-tag-border-style: dashed;
+}
+@media (forced-colors: active) {
+  :host([disabled]) {
+    --sbb-tag-text-color: GrayText;
+    --sbb-tag-amount-color: GrayText;
+    --sbb-tag-border-color: GrayText;
+  }
+}
+
+:host([checked][disabled]) {
+  --sbb-tag-border-color: var(--sbb-color-metal);
+}
+
+@media (any-hover: hover) {
+  :host(:hover:not([disabled], :active, [data-active])) {
+    --sbb-tag-background-color: var(--sbb-color-milk);
+    --sbb-tag-inset: calc(var(--sbb-border-width-2x) * -1);
+    --sbb-tag-content-shift: translateY(calc(var(--sbb-border-width-1x) * -1));
+  }
+}
+@media (any-hover: hover) and (forced-colors: active) {
+  :host(:hover:not([disabled], :active, [data-active])) {
+    --sbb-tag-border-color: Highlight;
+  }
+}
+
+:host(:is(:active, [data-active]):not([disabled])) {
+  --sbb-tag-background-color: var(--sbb-color-milk);
+  --sbb-tag-border-color: var(--sbb-color-iron);
+  --sbb-tag-border-width: var(--sbb-border-width-2x);
+  --sbb-tag-text-color: var(--sbb-color-iron);
+}
+@media (forced-colors: active) {
+  :host(:is(:active, [data-active]):not([disabled])) {
+    --sbb-tag-border-color: Highlight;
+    --sbb-tag-text-color: ButtonText;
+  }
+}
+
+:host([size=s]) {
+  --sbb-tag-height: var(--sbb-size-element-xxxs);
+  --sbb-tag-padding-inline: var(--sbb-spacing-fixed-3x);
+}
+
+.sbb-tag {
+  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  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);
+  font-weight: bold;
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: var(--sbb-tag-height);
+  max-width: 100%;
+  gap: var(--sbb-tag-gap);
+  padding-inline: var(--sbb-tag-padding-inline);
+  cursor: pointer;
+  border-radius: var(--sbb-tag-border-radius);
+  color: var(--sbb-tag-text-color);
+  transition: color var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+}
+.sbb-tag::before {
+  content: "";
+  position: absolute;
+  inset: var(--sbb-tag-inset);
+  background-color: var(--sbb-tag-background-color);
+  border: var(--sbb-tag-border-width) var(--sbb-tag-border-style) var(--sbb-tag-border-color);
+  border-radius: var(--sbb-tag-border-radius);
+  transition-duration: var(--sbb-tag-animation-duration);
+  transition-timing-function: var(--sbb-tag-animation-easing);
+  transition-property: inset, background-color, border-color, box-shadow;
+}
+:host(:focus-visible:not([data-focus-origin=mouse], [data-focus-origin=touch])) .sbb-tag::before {
+  outline-offset: var(--sbb-focus-outline-offset);
+  outline: var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);
+}
+:host([disabled]) .sbb-tag {
+  cursor: unset;
+  pointer-events: none;
+}
+
+.sbb-tag__icon {
+  display: flex;
+  align-items: center;
+  height: calc(var(--sbb-typo-line-height-body-text) * 1em);
+  flex-shrink: 0;
+}
+:host(:not([data-slot-names~=icon], [icon-name])) .sbb-tag__icon {
+  display: none;
+}
+
+.sbb-tag__text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.sbb-tag__amount {
+  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  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);
+  color: var(--sbb-tag-amount-color);
+}
+:host(:not([data-slot-names~=amount], [amount])) .sbb-tag__amount {
+  display: none;
+}
+
+.sbb-tag--shift {
+  transition: transform var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);
+  transform: var(--sbb-tag-content-shift);
+  will-change: transform;
+}`;
+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 SbbTagElement = class extends SbbIconNameMixin(
+  SbbDisabledTabIndexActionMixin(SbbButtonBaseElement)
+) {
+  constructor() {
+    super();
+    this.checked = false;
+    this._size = "m";
+    this._group = null;
+    this._input = new EventEmitter(this, SbbTagElement.events.input, {
+      bubbles: true,
+      composed: true
+    });
+    this._didChange = new EventEmitter(this, SbbTagElement.events.didChange, {
+      bubbles: true
+    });
+    this._change = new EventEmitter(this, SbbTagElement.events.change, {
+      bubbles: true
+    });
+    this._abort = new SbbConnectedAbortController(this);
+    new SbbSlotStateController(this);
+  }
+  set size(value) {
+    this._size = value;
+  }
+  get size() {
+    var _a;
+    return ((_a = this._group) == null ? void 0 : _a.size) ?? this._size;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._group = this.closest("sbb-tag-group");
+    this.addEventListener("click", () => this._handleClick(), { signal: this._abort.signal });
+  }
+  /** Method triggered on button click. Inverts the checked value and emits events. */
+  _handleClick() {
+    if (this.disabled) {
+      return;
+    }
+    const tagGroup = this.closest("sbb-tag-group");
+    if (tagGroup && !tagGroup.multiple && this.checked) {
+      return;
+    }
+    this.checked = !this.checked;
+    this._input.emit();
+    this._change.emit();
+    this._didChange.emit();
+  }
+  willUpdate(changedProperties) {
+    var _a;
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("checked")) {
+      this.setAttribute("aria-pressed", `${this.checked}`);
+    }
+    const tagGroup = (_a = this.closest) == null ? void 0 : _a.call(this, "sbb-tag-group");
+    if (tagGroup && !tagGroup.multiple && changedProperties.has("checked") && this.checked) {
+      tagGroup == null ? void 0 : tagGroup.tags.filter((t) => t !== this).forEach((t) => t.checked = false);
+    }
+  }
+  renderTemplate() {
+    return html`
+      <span class="sbb-tag__icon sbb-tag--shift"> ${this.renderIconSlot()} </span>
+      <span class="sbb-tag__text sbb-tag--shift">
+        <slot></slot>
+      </span>
+      <span class="sbb-tag__amount sbb-tag--shift">
+        <slot name="amount">${this.amount}</slot>
+      </span>
+    `;
+  }
+};
+SbbTagElement.styles = style;
+SbbTagElement.events = {
+  input: "input",
+  didChange: "didChange",
+  change: "change"
+};
+__decorateClass([
+  property({ reflect: true })
+], SbbTagElement.prototype, "amount", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], SbbTagElement.prototype, "checked", 2);
+__decorateClass([
+  property({ reflect: true })
+], SbbTagElement.prototype, "size", 1);
+SbbTagElement = __decorateClass([
+  customElement("sbb-tag")
+], SbbTagElement);
+export {
+  SbbTagElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFnLmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvZWxlbWVudHMvdGFnL3RhZy90YWcudHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBDU1NSZXN1bHRHcm91cCwgUHJvcGVydHlWYWx1ZXMsIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGh0bWwgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgY3VzdG9tRWxlbWVudCwgcHJvcGVydHkgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5cbmltcG9ydCB7IFNiYkJ1dHRvbkJhc2VFbGVtZW50IH0gZnJvbSAnLi4vLi4vY29yZS9iYXNlLWVsZW1lbnRzLmpzJztcbmltcG9ydCB7IFNiYkNvbm5lY3RlZEFib3J0Q29udHJvbGxlciwgU2JiU2xvdFN0YXRlQ29udHJvbGxlciB9IGZyb20gJy4uLy4uL2NvcmUvY29udHJvbGxlcnMuanMnO1xuaW1wb3J0IHsgRXZlbnRFbWl0dGVyIH0gZnJvbSAnLi4vLi4vY29yZS9ldmVudGluZy5qcyc7XG5pbXBvcnQgeyBTYmJEaXNhYmxlZFRhYkluZGV4QWN0aW9uTWl4aW4gfSBmcm9tICcuLi8uLi9jb3JlL21peGlucy5qcyc7XG5pbXBvcnQgeyBTYmJJY29uTmFtZU1peGluIH0gZnJvbSAnLi4vLi4vaWNvbi5qcyc7XG5pbXBvcnQgdHlwZSB7IFNiYlRhZ0dyb3VwRWxlbWVudCB9IGZyb20gJy4uL3RhZy1ncm91cC5qcyc7XG5cbmltcG9ydCBzdHlsZSBmcm9tICcuL3RhZy5zY3NzP2xpdCZpbmxpbmUnO1xuXG5leHBvcnQgdHlwZSBTYmJUYWdTaXplID0gJ3MnIHwgJ20nO1xuXG4vKipcbiAqIEl0IGRpc3BsYXlzIGEgc2VsZWN0YWJsZSBlbGVtZW50IHdoaWNoIGNhbiBiZSB1c2VkIGFzIGEgZmlsdGVyLlxuICpcbiAqIEBzbG90IC0gVXNlIHRoZSB1bm5hbWVkIHNsb3QgdG8gYWRkIGNvbnRlbnQgdG8gdGhlIHRhZyBsYWJlbC5cbiAqIEBzbG90IGljb24gLSBVc2UgdGhpcyBzbG90IHRvIGRpc3BsYXkgYW4gaWNvbiBhdCB0aGUgY29tcG9uZW50IHN0YXJ0LCBieSBwcm92aWRpbmcgYSBgc2JiLWljb25gIGNvbXBvbmVudC5cbiAqIEBzbG90IGFtb3VudCAtIFByb3ZpZGUgYW4gYW1vdW50IHRvIHNob3cgaXQgYXQgdGhlIGNvbXBvbmVudCBlbmQuXG4gKiBAZXZlbnQge0N1c3RvbUV2ZW50PHZvaWQ+fSBpbnB1dCAtIElucHV0IGV2ZW50IGVtaXR0ZXJcbiAqIEBldmVudCB7Q3VzdG9tRXZlbnQ8dm9pZD59IGRpZENoYW5nZSAtIERlcHJlY2F0ZWQuIHVzZWQgZm9yIFJlYWN0LiBXaWxsIHByb2JhYmx5IGJlIHJlbW92ZWQgb25jZSBSZWFjdCAxOSBpcyBhdmFpbGFibGUuXG4gKiBAZXZlbnQge0N1c3RvbUV2ZW50PHZvaWQ+fSBjaGFuZ2UgLSBDaGFuZ2UgZXZlbnQgZW1pdHRlclxuICovXG5AY3VzdG9tRWxlbWVudCgnc2JiLXRhZycpXG5leHBvcnQgY2xhc3MgU2JiVGFnRWxlbWVudCBleHRlbmRzIFNiYkljb25OYW1lTWl4aW4oXG4gIFNiYkRpc2FibGVkVGFiSW5kZXhBY3Rpb25NaXhpbihTYmJCdXR0b25CYXNlRWxlbWVudCksXG4pIHtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSBzdHlsZXM6IENTU1Jlc3VsdEdyb3VwID0gc3R5bGU7XG4gIHB1YmxpYyBzdGF0aWMgcmVhZG9ubHkgZXZlbnRzID0ge1xuICAgIGlucHV0OiAnaW5wdXQnLFxuICAgIGRpZENoYW5nZTogJ2RpZENoYW5nZScsXG4gICAgY2hhbmdlOiAnY2hhbmdlJyxcbiAgfSBhcyBjb25zdDtcblxuICAvKiogQW1vdW50IGRpc3BsYXllZCBpbnNpZGUgdGhlIHRhZy4gKi9cbiAgQHByb3BlcnR5KHsgcmVmbGVjdDogdHJ1ZSB9KSBwdWJsaWMgYW1vdW50Pzogc3RyaW5nO1xuXG4gIC8qKiBXaGV0aGVyIHRoZSB0YWcgaXMgY2hlY2tlZC4gKi9cbiAgQHByb3BlcnR5KHsgcmVmbGVjdDogdHJ1ZSwgdHlwZTogQm9vbGVhbiB9KSBwdWJsaWMgY2hlY2tlZCA9IGZhbHNlO1xuXG4gIC8qKiBUYWcgc2l6ZS4gKi9cbiAgQHByb3BlcnR5KHsgcmVmbGVjdDogdHJ1ZSB9KVxuICBwdWJsaWMgc2V0IHNpemUodmFsdWU6IFNiYlRhZ1NpemUpIHtcbiAgICB0aGlzLl9zaXplID0gdmFsdWU7XG4gIH1cbiAgcHVibGljIGdldCBzaXplKCk6IFNiYlRhZ1NpemUge1xuICAgIHJldHVybiB0aGlzLl9ncm91cD8uc2l6ZSA/PyB0aGlzLl9zaXplO1xuICB9XG4gIHByaXZhdGUgX3NpemU6IFNiYlRhZ1NpemUgPSAnbSc7XG5cbiAgLyoqIFJlZmVyZW5jZSB0byB0aGUgY29ubmVjdGVkIHRhZyBncm91cC4gKi9cbiAgcHJpdmF0ZSBfZ3JvdXA6IFNiYlRhZ0dyb3VwRWxlbWVudCB8IG51bGwgPSBudWxsO1xuXG4gIC8qKiBJbnB1dCBldmVudCBlbWl0dGVyICovXG4gIHByaXZhdGUgX2lucHV0OiBFdmVudEVtaXR0ZXIgPSBuZXcgRXZlbnRFbWl0dGVyKHRoaXMsIFNiYlRhZ0VsZW1lbnQuZXZlbnRzLmlucHV0LCB7XG4gICAgYnViYmxlczogdHJ1ZSxcbiAgICBjb21wb3NlZDogdHJ1ZSxcbiAgfSk7XG5cbiAgLyoqIEBkZXByZWNhdGVkIG9ubHkgdXNlZCBmb3IgUmVhY3QuIFdpbGwgcHJvYmFibHkgYmUgcmVtb3ZlZCBvbmNlIFJlYWN0IDE5IGlzIGF2YWlsYWJsZS4gKi9cbiAgcHJpdmF0ZSBfZGlkQ2hhbmdlOiBFdmVudEVtaXR0ZXIgPSBuZXcgRXZlbnRFbWl0dGVyKHRoaXMsIFNiYlRhZ0VsZW1lbnQuZXZlbnRzLmRpZENoYW5nZSwge1xuICAgIGJ1YmJsZXM6IHRydWUsXG4gIH0pO1xuXG4gIC8qKiBDaGFuZ2UgZXZlbnQgZW1pdHRlciAqL1xuICBwcml2YXRlIF9jaGFuZ2U6IEV2ZW50RW1pdHRlciA9IG5ldyBFdmVudEVtaXR0ZXIodGhpcywgU2JiVGFnRWxlbWVudC5ldmVudHMuY2hhbmdlLCB7XG4gICAgYnViYmxlczogdHJ1ZSxcbiAgfSk7XG5cbiAgcHJpdmF0ZSBfYWJvcnQgPSBuZXcgU2JiQ29ubmVjdGVkQWJvcnRDb250cm9sbGVyKHRoaXMpO1xuXG4gIHB1YmxpYyBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICAgIG5ldyBTYmJTbG90U3RhdGVDb250cm9sbGVyKHRoaXMpO1xuICB9XG5cbiAgcHVibGljIG92ZXJyaWRlIGNvbm5lY3RlZENhbGxiYWNrKCk6IHZvaWQge1xuICAgIHN1cGVyLmNvbm5lY3RlZENhbGxiYWNrKCk7XG4gICAgdGhpcy5fZ3JvdXAgPSB0aGlzLmNsb3Nlc3QoJ3NiYi10YWctZ3JvdXAnKSBhcyBTYmJUYWdHcm91cEVsZW1lbnQ7XG4gICAgdGhpcy5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsICgpID0+IHRoaXMuX2hhbmRsZUNsaWNrKCksIHsgc2lnbmFsOiB0aGlzLl9hYm9ydC5zaWduYWwgfSk7XG4gIH1cblxuICAvKiogTWV0aG9kIHRyaWdnZXJlZCBvbiBidXR0b24gY2xpY2suIEludmVydHMgdGhlIGNoZWNrZWQgdmFsdWUgYW5kIGVtaXRzIGV2ZW50cy4gKi9cbiAgcHJpdmF0ZSBfaGFuZGxlQ2xpY2soKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuZGlzYWJsZWQpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICAvLyBQcmV2ZW50IGRlYWN0aXZhdGluZyBvbiBleGNsdXNpdmUgLyByYWRpbyBtb2RlXG4gICAgY29uc3QgdGFnR3JvdXAgPSB0aGlzLmNsb3Nlc3QoJ3NiYi10YWctZ3JvdXAnKTtcbiAgICBpZiAodGFnR3JvdXAgJiYgIXRhZ0dyb3VwLm11bHRpcGxlICYmIHRoaXMuY2hlY2tlZCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aGlzLmNoZWNrZWQgPSAhdGhpcy5jaGVja2VkO1xuICAgIHRoaXMuX2lucHV0LmVtaXQoKTtcbiAgICB0aGlzLl9jaGFuZ2UuZW1pdCgpO1xuICAgIHRoaXMuX2RpZENoYW5nZS5lbWl0KCk7XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgd2lsbFVwZGF0ZShjaGFuZ2VkUHJvcGVydGllczogUHJvcGVydHlWYWx1ZXM8dGhpcz4pOiB2b2lkIHtcbiAgICBzdXBlci53aWxsVXBkYXRlKGNoYW5nZWRQcm9wZXJ0aWVzKTtcblxuICAgIGlmIChjaGFuZ2VkUHJvcGVydGllcy5oYXMoJ2NoZWNrZWQnKSkge1xuICAgICAgdGhpcy5zZXRBdHRyaWJ1dGUoJ2FyaWEtcHJlc3NlZCcsIGAke3RoaXMuY2hlY2tlZH1gKTtcbiAgICB9XG5cbiAgICBjb25zdCB0YWdHcm91cCA9IHRoaXMuY2xvc2VzdD8uKCdzYmItdGFnLWdyb3VwJyk7XG4gICAgaWYgKHRhZ0dyb3VwICYmICF0YWdHcm91cC5tdWx0aXBsZSAmJiBjaGFuZ2VkUHJvcGVydGllcy5oYXMoJ2NoZWNrZWQnKSAmJiB0aGlzLmNoZWNrZWQpIHtcbiAgICAgIHRhZ0dyb3VwPy50YWdzLmZpbHRlcigodCkgPT4gdCAhPT0gdGhpcykuZm9yRWFjaCgodCkgPT4gKHQuY2hlY2tlZCA9IGZhbHNlKSk7XG4gICAgfVxuICB9XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlclRlbXBsYXRlKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxzcGFuIGNsYXNzPVwic2JiLXRhZ19faWNvbiBzYmItdGFnLS1zaGlmdFwiPiAke3RoaXMucmVuZGVySWNvblNsb3QoKX0gPC9zcGFuPlxuICAgICAgPHNwYW4gY2xhc3M9XCJzYmItdGFnX190ZXh0IHNiYi10YWctLXNoaWZ0XCI+XG4gICAgICAgIDxzbG90Pjwvc2xvdD5cbiAgICAgIDwvc3Bhbj5cbiAgICAgIDxzcGFuIGNsYXNzPVwic2JiLXRhZ19fYW1vdW50IHNiYi10YWctLXNoaWZ0XCI+XG4gICAgICAgIDxzbG90IG5hbWU9XCJhbW91bnRcIj4ke3RoaXMuYW1vdW50fTwvc2xvdD5cbiAgICAgIDwvc3Bhbj5cbiAgICBgO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItdGFnJzogU2JiVGFnRWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBMEJPLElBQU0sZ0JBQU4sY0FBNEI7QUFBQSxFQUNqQywrQkFBK0Isb0JBQW9CO0FBQ3JELEVBQUU7QUFBQSxFQTZDTyxjQUFjO0FBQ2I7QUFsQ29DLFNBQU8sVUFBVTtBQVU3RCxTQUFRLFFBQW9CO0FBRzVCLFNBQVEsU0FBb0M7QUFHNUMsU0FBUSxTQUF1QixJQUFJLGFBQWEsTUFBTSxjQUFjLE9BQU8sT0FBTztBQUFBLE1BQ2hGLFNBQVM7QUFBQSxNQUNULFVBQVU7QUFBQSxJQUFBLENBQ1g7QUFHRCxTQUFRLGFBQTJCLElBQUksYUFBYSxNQUFNLGNBQWMsT0FBTyxXQUFXO0FBQUEsTUFDeEYsU0FBUztBQUFBLElBQUEsQ0FDVjtBQUdELFNBQVEsVUFBd0IsSUFBSSxhQUFhLE1BQU0sY0FBYyxPQUFPLFFBQVE7QUFBQSxNQUNsRixTQUFTO0FBQUEsSUFBQSxDQUNWO0FBRU8sU0FBQSxTQUFTLElBQUksNEJBQTRCLElBQUk7QUFJbkQsUUFBSSx1QkFBdUIsSUFBSTtBQUFBLEVBQ2pDO0FBQUEsRUFoQ0EsSUFBVyxLQUFLLE9BQW1CO0FBQ2pDLFNBQUssUUFBUTtBQUFBLEVBQ2Y7QUFBQSxFQUNBLElBQVcsT0FBbUI7O0FBQ3JCLGFBQUEsVUFBSyxXQUFMLG1CQUFhLFNBQVEsS0FBSztBQUFBLEVBQ25DO0FBQUEsRUE2QmdCLG9CQUEwQjtBQUN4QyxVQUFNLGtCQUFrQjtBQUNuQixTQUFBLFNBQVMsS0FBSyxRQUFRLGVBQWU7QUFDckMsU0FBQSxpQkFBaUIsU0FBUyxNQUFNLEtBQUssYUFBQSxHQUFnQixFQUFFLFFBQVEsS0FBSyxPQUFPLE9BQVEsQ0FBQTtBQUFBLEVBQzFGO0FBQUE7QUFBQSxFQUdRLGVBQXFCO0FBQzNCLFFBQUksS0FBSyxVQUFVO0FBQ2pCO0FBQUEsSUFDRjtBQUdNLFVBQUEsV0FBVyxLQUFLLFFBQVEsZUFBZTtBQUM3QyxRQUFJLFlBQVksQ0FBQyxTQUFTLFlBQVksS0FBSyxTQUFTO0FBQ2xEO0FBQUEsSUFDRjtBQUNLLFNBQUEsVUFBVSxDQUFDLEtBQUs7QUFDckIsU0FBSyxPQUFPO0FBQ1osU0FBSyxRQUFRO0FBQ2IsU0FBSyxXQUFXO0VBQ2xCO0FBQUEsRUFFbUIsV0FBVyxtQkFBK0M7O0FBQzNFLFVBQU0sV0FBVyxpQkFBaUI7QUFFOUIsUUFBQSxrQkFBa0IsSUFBSSxTQUFTLEdBQUc7QUFDcEMsV0FBSyxhQUFhLGdCQUFnQixHQUFHLEtBQUssT0FBTyxFQUFFO0FBQUEsSUFDckQ7QUFFTSxVQUFBLFlBQVcsVUFBSyxZQUFMLDhCQUFlO0FBQzVCLFFBQUEsWUFBWSxDQUFDLFNBQVMsWUFBWSxrQkFBa0IsSUFBSSxTQUFTLEtBQUssS0FBSyxTQUFTO0FBQ3RGLDJDQUFVLEtBQUssT0FBTyxDQUFDLE1BQU0sTUFBTSxNQUFNLFFBQVEsQ0FBQyxNQUFPLEVBQUUsVUFBVTtBQUFBLElBQ3ZFO0FBQUEsRUFDRjtBQUFBLEVBRW1CLGlCQUFpQztBQUMzQyxXQUFBO0FBQUEsb0RBQ3lDLEtBQUssZ0JBQWdCO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSw4QkFLM0MsS0FBSyxNQUFNO0FBQUE7QUFBQTtBQUFBLEVBR3ZDO0FBQ0Y7QUFuR2EsY0FHWSxTQUF5QjtBQUhyQyxjQUlZLFNBQVM7QUFBQSxFQUM5QixPQUFPO0FBQUEsRUFDUCxXQUFXO0FBQUEsRUFDWCxRQUFRO0FBQ1Y7QUFHb0MsZ0JBQUE7QUFBQSxFQUFuQyxTQUFTLEVBQUUsU0FBUyxNQUFNO0FBQUEsR0FYaEIsY0FXeUIsV0FBQSxVQUFBLENBQUE7QUFHZSxnQkFBQTtBQUFBLEVBQWxELFNBQVMsRUFBRSxTQUFTLE1BQU0sTUFBTSxTQUFTO0FBQUEsR0FkL0IsY0Fjd0MsV0FBQSxXQUFBLENBQUE7QUFJeEMsZ0JBQUE7QUFBQSxFQURWLFNBQVMsRUFBRSxTQUFTLE1BQU07QUFBQSxHQWpCaEIsY0FrQkEsV0FBQSxRQUFBLENBQUE7QUFsQkEsZ0JBQU4sZ0JBQUE7QUFBQSxFQUROLGNBQWMsU0FBUztBQUFBLEdBQ1gsYUFBQTsifQ==

package/development/tag.d.ts

@@ -0,0 +1,3 @@
+export * from './tag/tag.js';
+export * from './tag/tag-group.js';
+//# sourceMappingURL=tag.d.ts.map

package/development/tag.d.ts.map

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

package/development/tag.js

@@ -0,0 +1,3 @@
+export * from "./tag/tag.js";
+export * from "./tag/tag-group.js";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFnLmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7In0=

package/development/teaser/teaser.d.ts

@@ -0,0 +1,31 @@
+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. */
+    alignment: 'after-centered' | 'after' | 'below';
+    /** Heading level of the sbb-title element (e.g. h1-h6). */
+    titleLevel: SbbTitleLevel;
+    /** Content of title. */
+    titleContent?: string;
+    /** Content of chip. */
+    chipContent?: string;
+    constructor();
+    protected renderTemplate(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-teaser': SbbTeaserElement;
+    }
+}
+//# sourceMappingURL=teaser.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"teaser.d.ts","sourceRoot":"","sources":["../../../../src/elements/teaser/teaser.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,YAAY,CAAC;AACpB,OAAO,aAAa,CAAC;AAErB;;;;;;;GAOG;AACH,qBACa,gBAAiB,SAAQ,kBAAkB;IACtD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,gFAAgF;IAC5C,SAAS,EAAE,gBAAgB,GAAG,OAAO,GAAG,OAAO,CAChE;IAEnB,2DAA2D;IACZ,UAAU,EAAE,aAAa,CAAO;IAE/E,wBAAwB;IACyB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEvE,uBAAuB;IACwC,WAAW,CAAC,EAAE,MAAM,CAAC;;cAOjE,cAAc,IAAI,cAAc;CAoBpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

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

@@ -0,0 +1,26 @@
+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`
+ */
+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/teaser-hero/teaser-hero.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAW,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAI9D,OAAO,aAAa,CAAC;AACrB,OAAO,8BAA8B,CAAC;AAEtC;;;;;;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/teaser-hero.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}

package/development/teaser-hero.js

@@ -0,0 +1,182 @@
+import { css, nothing } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { html } from "lit/static-html.js";
+import { SbbLinkBaseElement } from "./core/base-elements.js";
+import "./image.js";
+import "./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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVhc2VyLWhlcm8uanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9lbGVtZW50cy90ZWFzZXItaGVyby90ZWFzZXItaGVyby50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0eXBlIENTU1Jlc3VsdEdyb3VwLCBub3RoaW5nLCB0eXBlIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGN1c3RvbUVsZW1lbnQsIHByb3BlcnR5IH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuaW1wb3J0IHsgaHRtbCB9IGZyb20gJ2xpdC9zdGF0aWMtaHRtbC5qcyc7XG5cbmltcG9ydCB7IFNiYkxpbmtCYXNlRWxlbWVudCB9IGZyb20gJy4uL2NvcmUvYmFzZS1lbGVtZW50cy5qcyc7XG5cbmltcG9ydCBzdHlsZSBmcm9tICcuL3RlYXNlci1oZXJvLnNjc3M/bGl0JmlubGluZSc7XG5cbmltcG9ydCAnLi4vaW1hZ2UuanMnO1xuaW1wb3J0ICcuLi9saW5rL2Jsb2NrLWxpbmstc3RhdGljLmpzJztcblxuLyoqXG4gKiBJdCBkaXNwbGF5cyBhbiBpbWFnZSBhbmQgYW4gYWN0aW9uIGNhbGwgd2l0aGluIGEgcGFuZWwuXG4gKlxuICogQHNsb3QgLSBVc2UgdGhlIHVubmFtZWQgc2xvdCB0byBhZGQgdGV4dCBjb250ZW50IHRvIHRoZSBwYW5lbFxuICogQHNsb3QgbGluay1jb250ZW50IC0gTGluayBjb250ZW50IG9mIHRoZSBwYW5lbFxuICogQHNsb3QgaW1hZ2UgLSBUaGUgYmFja2dyb3VuZCBpbWFnZSB0aGF0IGNhbiBiZSBhIGBzYmItaW1hZ2VgXG4gKi9cbkBjdXN0b21FbGVtZW50KCdzYmItdGVhc2VyLWhlcm8nKVxuZXhwb3J0IGNsYXNzIFNiYlRlYXNlckhlcm9FbGVtZW50IGV4dGVuZHMgU2JiTGlua0Jhc2VFbGVtZW50IHtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSBzdHlsZXM6IENTU1Jlc3VsdEdyb3VwID0gc3R5bGU7XG5cbiAgLyoqIFBhbmVsIGxpbmsgdGV4dC4gKi9cbiAgQHByb3BlcnR5KHsgYXR0cmlidXRlOiAnbGluay1jb250ZW50JyB9KSBwdWJsaWMgbGlua0NvbnRlbnQ/OiBzdHJpbmc7XG5cbiAgLyoqIEltYWdlIHNyYyB3aWxsIGJlIHBhc3NlZCB0byBgc2JiLWltYWdlYC4gKi9cbiAgQHByb3BlcnR5KHsgYXR0cmlidXRlOiAnaW1hZ2Utc3JjJyB9KSBwdWJsaWMgaW1hZ2VTcmM/OiBzdHJpbmc7XG5cbiAgLyoqIEltYWdlIGFsdCB0ZXh0IHdpbGwgYmUgcGFzc2VkIHRvIGBzYmItaW1hZ2VgLiAqL1xuICBAcHJvcGVydHkoeyBhdHRyaWJ1dGU6ICdpbWFnZS1hbHQnIH0pIHB1YmxpYyBpbWFnZUFsdD86IHN0cmluZztcblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyVGVtcGxhdGUoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgIHJldHVybiBodG1sYFxuICAgICAgPHNwYW4gY2xhc3M9XCJzYmItdGVhc2VyLWhlcm9fX3BhbmVsXCI+XG4gICAgICAgIDxwIGNsYXNzPVwic2JiLXRlYXNlci1oZXJvX19wYW5lbC10ZXh0XCI+XG4gICAgICAgICAgPHNsb3Q+PC9zbG90PlxuICAgICAgICA8L3A+XG4gICAgICAgICR7dGhpcy5ocmVmXG4gICAgICAgICAgPyBodG1sYDxzYmItYmxvY2stbGluay1zdGF0aWNcbiAgICAgICAgICAgICAgY2xhc3M9XCJzYmItdGVhc2VyLWhlcm9fX3BhbmVsLWxpbmtcIlxuICAgICAgICAgICAgICBpY29uLW5hbWU9XCJjaGV2cm9uLXNtYWxsLXJpZ2h0LXNtYWxsXCJcbiAgICAgICAgICAgICAgaWNvbi1wbGFjZW1lbnQ9XCJlbmRcIlxuICAgICAgICAgICAgICBzaXplPVwibVwiXG4gICAgICAgICAgICAgIG5lZ2F0aXZlXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIDxzbG90IG5hbWU9XCJsaW5rLWNvbnRlbnRcIj4ke3RoaXMubGlua0NvbnRlbnR9PC9zbG90PlxuICAgICAgICAgICAgPC9zYmItYmxvY2stbGluay1zdGF0aWM+YFxuICAgICAgICAgIDogbm90aGluZ31cbiAgICAgIDwvc3Bhbj5cbiAgICAgIDxzbG90IG5hbWU9XCJpbWFnZVwiPlxuICAgICAgICAke3RoaXMuaW1hZ2VTcmNcbiAgICAgICAgICA/IGh0bWxgPHNiYi1pbWFnZSBpbWFnZS1zcmM9JHt0aGlzLmltYWdlU3JjfSBhbHQ9JHt0aGlzLmltYWdlQWx0ID8/IG5vdGhpbmd9Pjwvc2JiLWltYWdlPmBcbiAgICAgICAgICA6IG5vdGhpbmd9XG4gICAgICA8L3Nsb3Q+XG4gICAgYDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLXRlYXNlci1oZXJvJzogU2JiVGVhc2VySGVyb0VsZW1lbnQ7XG4gIH1cbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBbUJhLElBQUEsdUJBQU4sY0FBbUMsbUJBQW1CO0FBQUEsRUFZeEMsaUJBQWlDO0FBQzNDLFdBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLFVBS0QsS0FBSyxPQUNIO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsMENBTzhCLEtBQUssV0FBVztBQUFBLHdDQUU5QyxPQUFPO0FBQUE7QUFBQTtBQUFBLFVBR1QsS0FBSyxXQUNILDRCQUE0QixLQUFLLFFBQVEsUUFBUSxLQUFLLFlBQVksT0FBTyxrQkFDekUsT0FBTztBQUFBO0FBQUE7QUFBQSxFQUdqQjtBQUNGO0FBckNhLHFCQUNZLFNBQXlCO0FBR0EsZ0JBQUE7QUFBQSxFQUEvQyxTQUFTLEVBQUUsV0FBVyxnQkFBZ0I7QUFBQSxHQUo1QixxQkFJcUMsV0FBQSxlQUFBLENBQUE7QUFHSCxnQkFBQTtBQUFBLEVBQTVDLFNBQVMsRUFBRSxXQUFXLGFBQWE7QUFBQSxHQVB6QixxQkFPa0MsV0FBQSxZQUFBLENBQUE7QUFHQSxnQkFBQTtBQUFBLEVBQTVDLFNBQVMsRUFBRSxXQUFXLGFBQWE7QUFBQSxHQVZ6QixxQkFVa0MsV0FBQSxZQUFBLENBQUE7QUFWbEMsdUJBQU4sZ0JBQUE7QUFBQSxFQUROLGNBQWMsaUJBQWlCO0FBQUEsR0FDbkIsb0JBQUE7In0=

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

@@ -0,0 +1,20 @@
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { SbbLinkBaseElement } from '../core/base-elements.js';
+
+/**
+ * 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/teaser-paid/teaser-paid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAI9D;;;;;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/teaser-paid.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}