@sbb-esta/lyne-elements-dev 4.9.0-dev.1775125493 → 4.9.0-dev.1775130554

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/core/styles/core.scss +6 -14
  2. package/core.css +37 -9
  3. package/custom-elements.json +934 -934
  4. package/development/teaser-product/common/teaser-product-common.js +1 -1
  5. package/development/teaser-product/common.js +1 -1
  6. package/development/teaser-product/teaser-product/teaser-product.component.js +1 -1
  7. package/development/teaser-product/teaser-product.js +1 -1
  8. package/development/teaser-product-common-DYX370pm.js +78 -0
  9. package/development/teaser-product.component-CSArA8bH.js +43 -0
  10. package/development/teaser-product.js +2 -2
  11. package/development/teaser-product.pure.js +2 -2
  12. package/off-brand-theme.css +37 -9
  13. package/package.json +2 -2
  14. package/safety-theme.css +37 -9
  15. package/standard-theme.css +37 -9
  16. package/teaser-product/common/teaser-product-common.js +1 -1
  17. package/teaser-product/common.js +1 -1
  18. package/teaser-product/teaser-product/teaser-product.component.js +1 -1
  19. package/teaser-product/teaser-product.js +1 -1
  20. package/teaser-product-common-Ct19HzVX.js +63 -0
  21. package/{teaser-product.component-IyBPFzdf.js → teaser-product.component-Csj9pAne.js} +1 -1
  22. package/teaser-product.js +2 -2
  23. package/teaser-product.pure.js +2 -2
  24. package/development/teaser-product-common-B_r7GkGw.js +0 -78
  25. package/development/teaser-product.component-DjAMYUmw.js +0 -43
  26. package/teaser-product-common-qTPSq_o7.js +0 -63
package/development/teaser-product/common/teaser-product-common.js CHANGED
@@ -1,2 +1,2 @@
1
- import { n as teaserProductCommonStyle, t as SbbTeaserProductCommonElementMixin } from "../../teaser-product-common-B_r7GkGw.js";
1
+ import { n as teaserProductCommonStyle, t as SbbTeaserProductCommonElementMixin } from "../../teaser-product-common-DYX370pm.js";
2
2
  export { SbbTeaserProductCommonElementMixin, teaserProductCommonStyle };
package/development/teaser-product/common.js CHANGED
@@ -1,4 +1,4 @@
1
- import { n as teaserProductCommonStyle, t as SbbTeaserProductCommonElementMixin } from "../teaser-product-common-B_r7GkGw.js";
1
+ import { n as teaserProductCommonStyle, t as SbbTeaserProductCommonElementMixin } from "../teaser-product-common-DYX370pm.js";
2
2
  //#region src/elements/teaser-product/common.ts
3
3
  console.warn(`The entrypoint '@sbb-esta/elements/teaser-product/common.js' has been deprecated.
4
4
  Use either '@sbb-esta/elements/teaser-product.js' or '@sbb-esta/elements/teaser-product.pure.js' instead.`);
package/development/teaser-product/teaser-product/teaser-product.component.js CHANGED
@@ -1,2 +1,2 @@
1
- import { t as SbbTeaserProductElement } from "../../teaser-product.component-DjAMYUmw.js";
1
+ import { t as SbbTeaserProductElement } from "../../teaser-product.component-CSArA8bH.js";
2
2
  export { SbbTeaserProductElement };
package/development/teaser-product/teaser-product.js CHANGED
@@ -1,4 +1,4 @@
1
- import { t as SbbTeaserProductElement } from "../teaser-product.component-DjAMYUmw.js";
1
+ import { t as SbbTeaserProductElement } from "../teaser-product.component-CSArA8bH.js";
2
2
  //#region src/elements/teaser-product/teaser-product.ts
3
3
  /** @entrypoint */
4
4
  SbbTeaserProductElement.define();
package/development/teaser-product-common-DYX370pm.js ADDED
@@ -0,0 +1,78 @@
1
+ import { __esDecorate, __runInitializers } from "tslib";
2
+ import { html, unsafeCSS } from "lit";
3
+ import { property } from "lit/decorators.js";
4
+ import { SbbNegativeMixin } from "./core/mixins.js";
5
+ //#endregion
6
+ //#region src/elements/teaser-product/common/teaser-product-common.ts
7
+ var teaserProductCommonStyle = unsafeCSS(":host {\n --sbb-teaser-product-background: var(--sbb-teaser-product-background-color);\n display: block;\n}\n@media (min-width: calc(64rem)) {\n :host {\n --sbb-teaser-product-content-min-height: calc(\n var(--sbb-teaser-product-min-height) - 2 * var(--sbb-teaser-product-container-spacing)\n );\n --sbb-teaser-product-background: linear-gradient(\n var(--sbb-teaser-product-background-gradient-direction),\n var(--sbb-teaser-product-background-color) var(--sbb-teaser-product-background-gradient-start),\n transparent var(--sbb-teaser-product-background-gradient-end)\n );\n }\n}\n\n:host([negative]) {\n --sbb-teaser-product-background-color: var(--sbb-background-color-1-negative);\n --sbb-teaser-product-content-color: var(--sbb-color-4-negative);\n --sbb-teaser-product-footer-color: var(--sbb-color-4-negative);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n --sbb-title-text-color-normal-override: var(--sbb-color-3-negative);\n}\n\n:host([image-alignment=before]) {\n --sbb-teaser-product-background-gradient-direction: to left;\n}\n\n:host(:not(:is(:state(slotted-footnote),[state--slotted-footnote]))) {\n --sbb-teaser-product-footer-padding-block-start: 0;\n}\n\n.sbb-teaser-product__image-container {\n overflow: hidden;\n border-radius: var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius) 0 0;\n}\n@media (min-width: calc(64rem)) {\n .sbb-teaser-product__image-container {\n position: absolute;\n inset: 0;\n border-radius: var(--sbb-teaser-product-border-radius);\n }\n}\n\n::slotted(p.sbb-teaser-product--spacing) {\n margin: 0;\n}\n\n::slotted(sbb-title.sbb-teaser-product--spacing) {\n margin-block-start: 0;\n}\n\n::slotted(:is(sbb-action-group, :is(:state(action),[state--action])).sbb-teaser-product--spacing) {\n margin-block-start: var(--sbb-spacing-responsive-xxs);\n}\n\n::slotted([slot=image]) {\n display: flex;\n width: 100%;\n height: 100%;\n}\n\n@media (forced-colors: active) {\n .sbb-teaser-product__root::after {\n content: \"\";\n position: absolute;\n display: block;\n inset: 0;\n pointer-events: none;\n border: var(--sbb-border-width-2x) solid CanvasText;\n border-radius: var(--sbb-teaser-product-border-radius);\n }\n}\n\n.sbb-action-base {\n display: block;\n position: relative;\n text-decoration: none;\n}\n\n.sbb-teaser-product__container {\n background: var(--sbb-teaser-product-background);\n border-radius: 0 0 var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius);\n padding-block: var(--sbb-teaser-product-container-padding-block);\n padding-inline: var(--sbb-teaser-product-container-padding-inline);\n}\n@media (min-width: calc(64rem)) {\n .sbb-teaser-product__container {\n display: grid;\n grid: \"content .\" 1fr \"footnote .\" auto/1fr 1fr;\n column-gap: var(--sbb-spacing-responsive-xxl);\n border-radius: var(--sbb-teaser-product-border-radius);\n position: relative;\n }\n :host([image-alignment=before]) .sbb-teaser-product__container {\n grid-template-areas: \". content\" \". footnote\";\n }\n}\n\n.sbb-teaser-product__content {\n grid-area: content;\n align-self: center;\n margin: 0;\n color: var(--sbb-teaser-product-content-color);\n min-height: var(--sbb-teaser-product-content-min-height, 0);\n align-content: var(--sbb-teaser-product-content-align-content, normal);\n}\n\n.sbb-teaser-product__footnote {\n grid-area: footnote;\n padding-block: var(--sbb-teaser-product-footer-padding-block-start) var(--sbb-teaser-product-footer-padding-block-end);\n color: var(--sbb-teaser-product-footer-color);\n font-size: var(--sbb-teaser-product-footer-font-size);\n letter-spacing: var(--sbb-typo-letter-spacing-text);\n min-height: var(--sbb-teaser-product-footer-min-height, 0);\n}");
8
+ var SbbTeaserProductCommonElementMixin = (superClass) => {
9
+ return (() => {
10
+ let _classSuper = SbbNegativeMixin(superClass);
11
+ let _imageAlignment_decorators;
12
+ let _imageAlignment_initializers = [];
13
+ let _imageAlignment_extraInitializers = [];
14
+ return class SbbTeaserProductCommonElement extends _classSuper {
15
+ static {
16
+ const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
17
+ _imageAlignment_decorators = [property({
18
+ attribute: "image-alignment",
19
+ reflect: true
20
+ })];
21
+ __esDecorate(this, null, _imageAlignment_decorators, {
22
+ kind: "accessor",
23
+ name: "imageAlignment",
24
+ static: false,
25
+ private: false,
26
+ access: {
27
+ has: (obj) => "imageAlignment" in obj,
28
+ get: (obj) => obj.imageAlignment,
29
+ set: (obj, value) => {
30
+ obj.imageAlignment = value;
31
+ }
32
+ },
33
+ metadata: _metadata
34
+ }, _imageAlignment_initializers, _imageAlignment_extraInitializers);
35
+ if (_metadata) Object.defineProperty(this, Symbol.metadata, {
36
+ enumerable: true,
37
+ configurable: true,
38
+ writable: true,
39
+ value: _metadata
40
+ });
41
+ }
42
+ #imageAlignment_accessor_storage = __runInitializers(this, _imageAlignment_initializers, "after");
43
+ /**
44
+ * Whether the fully visible part of the image is aligned 'before' or 'after' the content.
45
+ * Only relevant starting from large breakpoint.
46
+ */
47
+ get imageAlignment() {
48
+ return this.#imageAlignment_accessor_storage;
49
+ }
50
+ set imageAlignment(value) {
51
+ this.#imageAlignment_accessor_storage = value;
52
+ }
53
+ renderTemplate() {
54
+ return html`
55
+ <div class="sbb-teaser-product__root">
56
+ <div class="sbb-teaser-product__image-container"><slot name="image"></slot></div>
57
+ <div class="sbb-teaser-product__container">
58
+ <span class="sbb-teaser-product__content">
59
+ <slot></slot>
60
+ </span>
61
+ <div class="sbb-teaser-product__footnote">
62
+ <slot name="footnote"></slot>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ `;
67
+ }
68
+ constructor() {
69
+ super(...arguments);
70
+ __runInitializers(this, _imageAlignment_extraInitializers);
71
+ }
72
+ };
73
+ })();
74
+ };
75
+ //#endregion
76
+ export { teaserProductCommonStyle as n, SbbTeaserProductCommonElementMixin as t };
77
+
78
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVhc2VyLXByb2R1Y3QtY29tbW9uLURZWDM3MHBtLmpzIiwibmFtZXMiOltdLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9lbGVtZW50cy90ZWFzZXItcHJvZHVjdC9jb21tb24vdGVhc2VyLXByb2R1Y3QtY29tbW9uLnNjc3M/aW5saW5lIiwiLi4vLi4vLi4vc3JjL2VsZW1lbnRzL3RlYXNlci1wcm9kdWN0L2NvbW1vbi90ZWFzZXItcHJvZHVjdC1jb21tb24udHMiXSwic291cmNlc0NvbnRlbnQiOlsiQHVzZSAnLi4vLi4vY29yZS9zdHlsZXMnIGFzIHNiYjtcblxuOmhvc3Qge1xuICAtLXNiYi10ZWFzZXItcHJvZHVjdC1iYWNrZ3JvdW5kOiB2YXIoLS1zYmItdGVhc2VyLXByb2R1Y3QtYmFja2dyb3VuZC1jb2xvcik7XG5cbiAgZGlzcGxheTogYmxvY2s7XG5cbiAgQGluY2x1ZGUgc2JiLm1xKCRmcm9tOiBsYXJnZSkge1xuICAgIC0tc2JiLXRlYXNlci1wcm9kdWN0LWNvbnRlbnQtbWluLWhlaWdodDogY2FsYyhcbiAgICAgIHZhcigtLXNiYi10ZWFzZXItcHJvZHVjdC1taW4taGVpZ2h0KSAtIDIgKiB2YXIoLS1zYmItdGVhc2VyLXByb2R1Y3QtY29udGFpbmVyLXNwYWNpbmcpXG4gICAgKTtcbiAgICAtLXNiYi10ZWFzZXItcHJvZHVjdC1iYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoXG4gICAgICB2YXIoLS1zYmItdGVhc2VyLXByb2R1Y3QtYmFja2dyb3VuZC1ncmFkaWVudC1kaXJlY3Rpb24pLFxuICAgICAgdmFyKC0tc2JiLXRlYXNlci1wcm9kdWN0LWJhY2tncm91bmQtY29sb3IpIHZhcigtLXNiYi10ZWFzZXItcHJvZHVjdC1iYWNrZ3JvdW5kLWdyYWRpZW50LXN0YXJ0KSxcbiAgICAgIHRyYW5zcGFyZW50IHZhcigtLXNiYi10ZWFzZXItcHJvZHVjdC1iYWNrZ3JvdW5kLWdyYWRpZW50LWVuZClcbiAgICApO1xuICB9XG59XG5cbjpob3N0KFtuZWdhdGl2ZV0pIHtcbiAgLS1zYmItdGVhc2VyLXByb2R1Y3QtYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2JiLWJhY2tncm91bmQtY29sb3ItMS1uZWdhdGl2ZSk7XG4gIC0tc2JiLXRlYXNlci1wcm9kdWN0LWNvbnRlbnQtY29sb3I6IHZhcigtLXNiYi1jb2xvci00LW5lZ2F0aXZlKTtcbiAgLS1zYmItdGVhc2VyLXByb2R1Y3QtZm9vdGVyLWNvbG9yOiB2YXIoLS1zYmItY29sb3ItNC1uZWdhdGl2ZSk7XG4gIC0tc2JiLWZvY3VzLW91dGxpbmUtY29sb3I6IHZhcigtLXNiYi1mb2N1cy1vdXRsaW5lLWNvbG9yLWRhcmspO1xuICAtLXNiYi10aXRsZS10ZXh0LWNvbG9yLW5vcm1hbC1vdmVycmlkZTogdmFyKC0tc2JiLWNvbG9yLTMtbmVnYXRpdmUpO1xufVxuXG46aG9zdChbaW1hZ2UtYWxpZ25tZW50PSdiZWZvcmUnXSkge1xuICAtLXNiYi10ZWFzZXItcHJvZHVjdC1iYWNrZ3JvdW5kLWdyYWRpZW50LWRpcmVjdGlvbjogdG8gbGVmdDtcbn1cblxuOmhvc3QoOm5vdCg6c3RhdGUoc2xvdHRlZC1mb290bm90ZSkpKSB7XG4gIC0tc2JiLXRlYXNlci1wcm9kdWN0LWZvb3Rlci1wYWRkaW5nLWJsb2NrLXN0YXJ0OiAwO1xufVxuXG4uc2JiLXRlYXNlci1wcm9kdWN0X19pbWFnZS1jb250YWluZXIge1xuICBvdmVyZmxvdzogaGlkZGVuO1xuXG4gIC8vIFdlIGhhdmUgdG8gcmVtb3ZlIHRoZSBpbWFnZSBib3R0b20gYm9yZGVyLXJhZGl1cyB3aGVuIHN0YWNrZWRcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tc2JiLXRlYXNlci1wcm9kdWN0LWJvcmRlci1yYWRpdXMpIHZhcigtLXNiYi10ZWFzZXItcHJvZHVjdC1ib3JkZXItcmFkaXVzKSAwIDA7XG5cbiAgQGluY2x1ZGUgc2JiLm1xKCRmcm9tOiBsYXJnZSkge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICBpbnNldDogMDtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1zYmItdGVhc2VyLXByb2R1Y3QtYm9yZGVyLXJhZGl1cyk7XG4gIH1cbn1cblxuOjpzbG90dGVkKHAuc2JiLXRlYXNlci1wcm9kdWN0LS1zcGFjaW5nKSB7XG4gIG1hcmdpbjogMDtcbn1cblxuOjpzbG90dGVkKHNiYi10aXRsZS5zYmItdGVhc2VyLXByb2R1Y3QtLXNwYWNpbmcpIHtcbiAgbWFyZ2luLWJsb2NrLXN0YXJ0OiAwO1xufVxuXG46OnNsb3R0ZWQoOmlzKHNiYi1hY3Rpb24tZ3JvdXAsIDpzdGF0ZShhY3Rpb24pKS5zYmItdGVhc2VyLXByb2R1Y3QtLXNwYWNpbmcpIHtcbiAgbWFyZ2luLWJsb2NrLXN0YXJ0OiB2YXIoLS1zYmItc3BhY2luZy1yZXNwb25zaXZlLXh4cyk7XG59XG5cbjo6c2xvdHRlZChbc2xvdD0naW1hZ2UnXSkge1xuICBkaXNwbGF5OiBmbGV4O1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xufVxuXG4uc2JiLXRlYXNlci1wcm9kdWN0X19yb290IHtcbiAgQGluY2x1ZGUgc2JiLmlmLWZvcmNlZC1jb2xvcnMge1xuICAgIC8vIEFwcGx5IGEgdmlzdWFsIGJvcmRlciBmb3IgZm9yY2VkIGNvbG9yIG1vZGVcbiAgICAmOjphZnRlciB7XG4gICAgICBjb250ZW50OiAnJztcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgaW5zZXQ6IDA7XG4gICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICAgIGJvcmRlcjogdmFyKC0tc2JiLWJvcmRlci13aWR0aC0yeCkgc29saWQgQ2FudmFzVGV4dDtcbiAgICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLXNiYi10ZWFzZXItcHJvZHVjdC1ib3JkZXItcmFkaXVzKTtcbiAgICB9XG4gIH1cbn1cblxuLnNiYi1hY3Rpb24tYmFzZSB7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbn1cblxuLnNiYi10ZWFzZXItcHJvZHVjdF9fY29udGFpbmVyIHtcbiAgYmFja2dyb3VuZDogdmFyKC0tc2JiLXRlYXNlci1wcm9kdWN0LWJhY2tncm91bmQpO1xuICBib3JkZXItcmFkaXVzOiAwIDAgdmFyKC0tc2JiLXRlYXNlci1wcm9kdWN0LWJvcmRlci1yYWRpdXMpIHZhcigtLXNiYi10ZWFzZXItcHJvZHVjdC1ib3JkZXItcmFkaXVzKTtcbiAgcGFkZGluZy1ibG9jazogdmFyKC0tc2JiLXRlYXNlci1wcm9kdWN0LWNvbnRhaW5lci1wYWRkaW5nLWJsb2NrKTtcbiAgcGFkZGluZy1pbmxpbmU6IHZhcigtLXNiYi10ZWFzZXItcHJvZHVjdC1jb250YWluZXItcGFkZGluZy1pbmxpbmUpO1xuXG4gIEBpbmNsdWRlIHNiYi5tcSgkZnJvbTogbGFyZ2UpIHtcbiAgICBkaXNwbGF5OiBncmlkO1xuICAgIGdyaWQ6XG4gICAgICAnY29udGVudCAuJyAxZnJcbiAgICAgICdmb290bm90ZSAuJyBhdXRvIC8gMWZyIDFmcjtcbiAgICBjb2x1bW4tZ2FwOiB2YXIoLS1zYmItc3BhY2luZy1yZXNwb25zaXZlLXh4bCk7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKC0tc2JiLXRlYXNlci1wcm9kdWN0LWJvcmRlci1yYWRpdXMpO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuICAgIDpob3N0KFtpbWFnZS1hbGlnbm1lbnQ9J2JlZm9yZSddKSAmIHtcbiAgICAgIGdyaWQtdGVtcGxhdGUtYXJlYXM6XG4gICAgICAgICcuIGNvbnRlbnQnXG4gICAgICAgICcuIGZvb3Rub3RlJztcbiAgICB9XG4gIH1cbn1cblxuLnNiYi10ZWFzZXItcHJvZHVjdF9fY29udGVudCB7XG4gIGdyaWQtYXJlYTogY29udGVudDtcbiAgYWxpZ24tc2VsZjogY2VudGVyO1xuICBtYXJnaW46IDA7XG4gIGNvbG9yOiB2YXIoLS1zYmItdGVhc2VyLXByb2R1Y3QtY29udGVudC1jb2xvcik7XG4gIG1pbi1oZWlnaHQ6IHZhcigtLXNiYi10ZWFzZXItcHJvZHVjdC1jb250ZW50LW1pbi1oZWlnaHQsIDApO1xuICBhbGlnbi1jb250ZW50OiB2YXIoLS1zYmItdGVhc2VyLXByb2R1Y3QtY29udGVudC1hbGlnbi1jb250ZW50LCBub3JtYWwpO1xufVxuXG4uc2JiLXRlYXNlci1wcm9kdWN0X19mb290bm90ZSB7XG4gIGdyaWQtYXJlYTogZm9vdG5vdGU7XG4gIHBhZGRpbmctYmxvY2s6IHZhcigtLXNiYi10ZWFzZXItcHJvZHVjdC1mb290ZXItcGFkZGluZy1ibG9jay1zdGFydClcbiAgICB2YXIoLS1zYmItdGVhc2VyLXByb2R1Y3QtZm9vdGVyLXBhZGRpbmctYmxvY2stZW5kKTtcbiAgY29sb3I6IHZhcigtLXNiYi10ZWFzZXItcHJvZHVjdC1mb290ZXItY29sb3IpO1xuICBmb250LXNpemU6IHZhcigtLXNiYi10ZWFzZXItcHJvZHVjdC1mb290ZXItZm9udC1zaXplKTtcbiAgbGV0dGVyLXNwYWNpbmc6IHZhcigtLXNiYi10eXBvLWxldHRlci1zcGFjaW5nLXRleHQpO1xuICBtaW4taGVpZ2h0OiB2YXIoLS1zYmItdGVhc2VyLXByb2R1Y3QtZm9vdGVyLW1pbi1oZWlnaHQsIDApO1xufVxuIiwiaW1wb3J0IHsgaHRtbCwgdW5zYWZlQ1NTLCB0eXBlIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IHByb3BlcnR5IH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuXG5pbXBvcnQgdHlwZSB7IFNiYkFjdGlvbkJhc2VFbGVtZW50IH0gZnJvbSAnLi4vLi4vY29yZS9iYXNlLWVsZW1lbnRzLnRzJztcbmltcG9ydCB7IHR5cGUgQWJzdHJhY3RDb25zdHJ1Y3RvciwgU2JiTmVnYXRpdmVNaXhpbiB9IGZyb20gJy4uLy4uL2NvcmUvbWl4aW5zLnRzJztcblxuaW1wb3J0IHRlYXNlclByb2R1Y3RDb21tb25TdHlsZVN0cmluZyBmcm9tICcuL3RlYXNlci1wcm9kdWN0LWNvbW1vbi5zY3NzP2lubGluZSc7XG5cbmV4cG9ydCBjb25zdCB0ZWFzZXJQcm9kdWN0Q29tbW9uU3R5bGUgPSB1bnNhZmVDU1ModGVhc2VyUHJvZHVjdENvbW1vblN0eWxlU3RyaW5nKTtcblxuZXhwb3J0IGRlY2xhcmUgY2xhc3MgU2JiVGVhc2VyUHJvZHVjdENvbW1vbkVsZW1lbnRNaXhpblR5cGUgZXh0ZW5kcyBTYmJOZWdhdGl2ZU1peGluKFxuICBTYmJBY3Rpb25CYXNlRWxlbWVudCxcbikge1xuICBwdWJsaWMgYWNjZXNzb3IgaW1hZ2VBbGlnbm1lbnQ6ICdhZnRlcicgfCAnYmVmb3JlJztcbn1cblxuLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuZXhwb3J0IGNvbnN0IFNiYlRlYXNlclByb2R1Y3RDb21tb25FbGVtZW50TWl4aW4gPSA8XG4gIFQgZXh0ZW5kcyBBYnN0cmFjdENvbnN0cnVjdG9yPFNiYkFjdGlvbkJhc2VFbGVtZW50Pixcbj4oXG4gIHN1cGVyQ2xhc3M6IFQsXG4pOiBBYnN0cmFjdENvbnN0cnVjdG9yPFNiYlRlYXNlclByb2R1Y3RDb21tb25FbGVtZW50TWl4aW5UeXBlPiAmIFQgPT4ge1xuICBhYnN0cmFjdCBjbGFzcyBTYmJUZWFzZXJQcm9kdWN0Q29tbW9uRWxlbWVudFxuICAgIGV4dGVuZHMgU2JiTmVnYXRpdmVNaXhpbihzdXBlckNsYXNzKVxuICAgIGltcGxlbWVudHMgU2JiVGVhc2VyUHJvZHVjdENvbW1vbkVsZW1lbnRNaXhpblR5cGVcbiAge1xuICAgIC8qKlxuICAgICAqIFdoZXRoZXIgdGhlIGZ1bGx5IHZpc2libGUgcGFydCBvZiB0aGUgaW1hZ2UgaXMgYWxpZ25lZCAnYmVmb3JlJyBvciAnYWZ0ZXInIHRoZSBjb250ZW50LlxuICAgICAqIE9ubHkgcmVsZXZhbnQgc3RhcnRpbmcgZnJvbSBsYXJnZSBicmVha3BvaW50LlxuICAgICAqL1xuICAgIEBwcm9wZXJ0eSh7IGF0dHJpYnV0ZTogJ2ltYWdlLWFsaWdubWVudCcsIHJlZmxlY3Q6IHRydWUgfSlcbiAgICBwdWJsaWMgYWNjZXNzb3IgaW1hZ2VBbGlnbm1lbnQ6ICdhZnRlcicgfCAnYmVmb3JlJyA9ICdhZnRlcic7XG5cbiAgICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyVGVtcGxhdGUoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgICAgcmV0dXJuIGh0bWxgXG4gICAgICAgIDxkaXYgY2xhc3M9XCJzYmItdGVhc2VyLXByb2R1Y3RfX3Jvb3RcIj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwic2JiLXRlYXNlci1wcm9kdWN0X19pbWFnZS1jb250YWluZXJcIj48c2xvdCBuYW1lPVwiaW1hZ2VcIj48L3Nsb3Q+PC9kaXY+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cInNiYi10ZWFzZXItcHJvZHVjdF9fY29udGFpbmVyXCI+XG4gICAgICAgICAgICA8c3BhbiBjbGFzcz1cInNiYi10ZWFzZXItcHJvZHVjdF9fY29udGVudFwiPlxuICAgICAgICAgICAgICA8c2xvdD48L3Nsb3Q+XG4gICAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwic2JiLXRlYXNlci1wcm9kdWN0X19mb290bm90ZVwiPlxuICAgICAgICAgICAgICA8c2xvdCBuYW1lPVwiZm9vdG5vdGVcIj48L3Nsb3Q+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICBgO1xuICAgIH1cbiAgfVxuICByZXR1cm4gU2JiVGVhc2VyUHJvZHVjdENvbW1vbkVsZW1lbnQgYXMgQWJzdHJhY3RDb25zdHJ1Y3RvcjxTYmJUZWFzZXJQcm9kdWN0Q29tbW9uRWxlbWVudE1peGluVHlwZT4gJlxuICAgIFQ7XG59O1xuIl0sIm1hcHBpbmdzIjoiOzs7Ozs7QUNRQSxJQUFhLDJCQUEyQiwrd0hBQXlDO0FBU2pGLElBQWEsc0NBR1gsZUFDbUU7QUE0Qm5FLGVBM0I0QztvQkFDbEMsaUJBQWlCLFdBQVc7Ozs7ZUFEdkIsc0NBQ0wsWUFBNEI7OztrQ0FPbkMsU0FBUztLQUFFLFdBQVc7S0FBbUIsU0FBUztLQUFNLENBQUMsQ0FBQTtBQUMxRCxpQkFBQSxNQUFBLE1BQUEsNEJBQUE7S0FBQSxNQUFBO0tBQUEsTUFBQTtLQUFBLFFBQUE7S0FBQSxTQUFBO0tBQUEsUUFBQTtNQUFBLE1BQUEsUUFBQSxvQkFBQTtNQUFBLE1BQUEsUUFBQSxJQUFnQjtNQUFjLE1BQUEsS0FBQSxVQUFBO0FBQUEsV0FBZCxpQkFBYzs7TUFBQTtLQUFBLFVBQUE7S0FBQSxFQUFBLDhCQUFBLGtDQUFBOzs7Ozs7OztHQUE5QixtQ0FBQSxrQkFBQSxNQUFBLDhCQUFxRCxRQUFPOzs7OztHQUE1RCxJQUFnQixpQkFBYztBQUFBLFdBQUEsTUFBQTs7R0FBOUIsSUFBZ0IsZUFBYyxPQUFBO0FBQUEsVUFBQSxrQ0FBQTs7R0FFWCxpQkFBYztBQUMvQixXQUFPLElBQUkifQ==
package/development/teaser-product.component-CSArA8bH.js ADDED
@@ -0,0 +1,43 @@
1
+ import { unsafeCSS } from "lit";
2
+ import { SbbLinkBaseElement } from "./core/base-elements.js";
3
+ import { boxSizingStyles } from "./core/styles.js";
4
+ import { html as html$1 } from "lit/static-html.js";
5
+ import "./screen-reader-only.js";
6
+ import { SbbTeaserProductCommonElementMixin, teaserProductCommonStyle } from "./teaser-product/common/teaser-product-common.js";
7
+ //#region src/elements/teaser-product/teaser-product/teaser-product.scss?inline
8
+ var teaser_product_default = "@media (forced-colors: active) {\n :host {\n --sbb-title-text-color-normal-override: LinkText !important;\n --sbb-teaser-product-content-color: LinkText !important;\n --sbb-teaser-product-footer-color: LinkText !important;\n }\n}\n\n.sbb-teaser-product__wrapper {\n position: relative;\n}\n\n.sbb-teaser-product__root {\n pointer-events: none;\n}\n@media (forced-colors: active) {\n :host(:hover) .sbb-teaser-product__root::after {\n border-color: Highlight;\n }\n}\n\n.sbb-teaser-product {\n position: absolute;\n inset: 0;\n}\n.sbb-teaser-product:focus-visible {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n border-radius: var(--sbb-teaser-product-border-radius);\n}";
9
+ //#endregion
10
+ //#region src/elements/teaser-product/teaser-product/teaser-product.component.ts
11
+ /**
12
+ * Displays a text and a footnote, combined with an image, to tease a product
13
+ *
14
+ * @slot - Use this slot to provide the main content.
15
+ * @slot image - Use this slot to provide an image or a `sbb-image` as a background.
16
+ * @slot footnote - Use this slot to provide a footnote.
17
+ * @cssprop [--sbb-teaser-product-background-gradient-start=25%] - At which percentage the background should start getting transparent.
18
+ * @cssprop [--sbb-teaser-product-background-gradient-end=75%] - At which percentage the background should be fully transparent.
19
+ */
20
+ var SbbTeaserProductElement = class extends SbbTeaserProductCommonElementMixin(SbbLinkBaseElement) {
21
+ static {
22
+ this.elementName = "sbb-teaser-product";
23
+ }
24
+ static {
25
+ this.styles = [
26
+ boxSizingStyles,
27
+ teaserProductCommonStyle,
28
+ unsafeCSS(teaser_product_default)
29
+ ];
30
+ }
31
+ render() {
32
+ return html$1`
33
+ <div class="sbb-teaser-product__wrapper">
34
+ ${this.renderLink(html$1`<sbb-screen-reader-only>${this.accessibilityLabel}</sbb-screen-reader-only>`)}
35
+ ${this.renderTemplate()}
36
+ </div>
37
+ `;
38
+ }
39
+ };
40
+ //#endregion
41
+ export { SbbTeaserProductElement as t };
42
+
43
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVhc2VyLXByb2R1Y3QuY29tcG9uZW50LUNTQXJBOGJILmpzIiwibmFtZXMiOltdLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9lbGVtZW50cy90ZWFzZXItcHJvZHVjdC90ZWFzZXItcHJvZHVjdC90ZWFzZXItcHJvZHVjdC5zY3NzP2lubGluZSIsIi4uLy4uLy4uL3NyYy9lbGVtZW50cy90ZWFzZXItcHJvZHVjdC90ZWFzZXItcHJvZHVjdC90ZWFzZXItcHJvZHVjdC5jb21wb25lbnQudHMiXSwic291cmNlc0NvbnRlbnQiOlsiQHVzZSAnLi4vLi4vY29yZS9zdHlsZXMnIGFzIHNiYjtcblxuOmhvc3Qge1xuICAvLyBTaW11bGF0ZSBsaW5rIGNvbG9yIG9wdGljYWxseVxuICBAaW5jbHVkZSBzYmIuaWYtZm9yY2VkLWNvbG9ycyB7XG4gICAgLS1zYmItdGl0bGUtdGV4dC1jb2xvci1ub3JtYWwtb3ZlcnJpZGU6IExpbmtUZXh0ICFpbXBvcnRhbnQ7XG4gICAgLS1zYmItdGVhc2VyLXByb2R1Y3QtY29udGVudC1jb2xvcjogTGlua1RleHQgIWltcG9ydGFudDtcbiAgICAtLXNiYi10ZWFzZXItcHJvZHVjdC1mb290ZXItY29sb3I6IExpbmtUZXh0ICFpbXBvcnRhbnQ7XG4gIH1cbn1cblxuLnNiYi10ZWFzZXItcHJvZHVjdF9fd3JhcHBlciB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbn1cblxuLnNiYi10ZWFzZXItcHJvZHVjdF9fcm9vdCB7XG4gIHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG4gIEBpbmNsdWRlIHNiYi5pZi1mb3JjZWQtY29sb3JzIHtcbiAgICAmOjphZnRlciB7XG4gICAgICA6aG9zdCg6aG92ZXIpICYge1xuICAgICAgICBib3JkZXItY29sb3I6IEhpZ2hsaWdodDtcbiAgICAgIH1cbiAgICB9XG4gIH1cbn1cblxuLnNiYi10ZWFzZXItcHJvZHVjdCB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgaW5zZXQ6IDA7XG5cbiAgJjpmb2N1cy12aXNpYmxlIHtcbiAgICBAaW5jbHVkZSBzYmIuZm9jdXMtb3V0bGluZTtcblxuICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLXNiYi10ZWFzZXItcHJvZHVjdC1ib3JkZXItcmFkaXVzKTtcbiAgfVxufVxuIiwiaW1wb3J0IHsgdHlwZSBDU1NSZXN1bHRHcm91cCwgdHlwZSBUZW1wbGF0ZVJlc3VsdCwgdW5zYWZlQ1NTIH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGh0bWwgfSBmcm9tICdsaXQvc3RhdGljLWh0bWwuanMnO1xuXG5pbXBvcnQgeyBTYmJMaW5rQmFzZUVsZW1lbnQgfSBmcm9tICcuLi8uLi9jb3JlL2Jhc2UtZWxlbWVudHMudHMnO1xuaW1wb3J0IHsgYm94U2l6aW5nU3R5bGVzIH0gZnJvbSAnLi4vLi4vY29yZS9zdHlsZXMudHMnO1xuaW1wb3J0IHtcbiAgU2JiVGVhc2VyUHJvZHVjdENvbW1vbkVsZW1lbnRNaXhpbixcbiAgdGVhc2VyUHJvZHVjdENvbW1vblN0eWxlLFxufSBmcm9tICcuLi9jb21tb24vdGVhc2VyLXByb2R1Y3QtY29tbW9uLnRzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vdGVhc2VyLXByb2R1Y3Quc2Nzcz9pbmxpbmUnO1xuXG5pbXBvcnQgJy4uLy4uL3NjcmVlbi1yZWFkZXItb25seS50cyc7XG5cbi8qKlxuICogRGlzcGxheXMgYSB0ZXh0IGFuZCBhIGZvb3Rub3RlLCBjb21iaW5lZCB3aXRoIGFuIGltYWdlLCB0byB0ZWFzZSBhIHByb2R1Y3RcbiAqXG4gKiBAc2xvdCAtIFVzZSB0aGlzIHNsb3QgdG8gcHJvdmlkZSB0aGUgbWFpbiBjb250ZW50LlxuICogQHNsb3QgaW1hZ2UgLSBVc2UgdGhpcyBzbG90IHRvIHByb3ZpZGUgYW4gaW1hZ2Ugb3IgYSBgc2JiLWltYWdlYCBhcyBhIGJhY2tncm91bmQuXG4gKiBAc2xvdCBmb290bm90ZSAtIFVzZSB0aGlzIHNsb3QgdG8gcHJvdmlkZSBhIGZvb3Rub3RlLlxuICogQGNzc3Byb3AgWy0tc2JiLXRlYXNlci1wcm9kdWN0LWJhY2tncm91bmQtZ3JhZGllbnQtc3RhcnQ9MjUlXSAtIEF0IHdoaWNoIHBlcmNlbnRhZ2UgdGhlIGJhY2tncm91bmQgc2hvdWxkIHN0YXJ0IGdldHRpbmcgdHJhbnNwYXJlbnQuXG4gKiBAY3NzcHJvcCBbLS1zYmItdGVhc2VyLXByb2R1Y3QtYmFja2dyb3VuZC1ncmFkaWVudC1lbmQ9NzUlXSAtIEF0IHdoaWNoIHBlcmNlbnRhZ2UgdGhlIGJhY2tncm91bmQgc2hvdWxkIGJlIGZ1bGx5IHRyYW5zcGFyZW50LlxuICovXG5leHBvcnQgY2xhc3MgU2JiVGVhc2VyUHJvZHVjdEVsZW1lbnQgZXh0ZW5kcyBTYmJUZWFzZXJQcm9kdWN0Q29tbW9uRWxlbWVudE1peGluKFxuICBTYmJMaW5rQmFzZUVsZW1lbnQsXG4pIHtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSByZWFkb25seSBlbGVtZW50TmFtZTogc3RyaW5nID0gJ3NiYi10ZWFzZXItcHJvZHVjdCc7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IFtcbiAgICBib3hTaXppbmdTdHlsZXMsXG4gICAgdGVhc2VyUHJvZHVjdENvbW1vblN0eWxlLFxuICAgIHVuc2FmZUNTUyhzdHlsZSksXG4gIF07XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlcigpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgLy8gV2UgcmVuZGVyIHRoZSBjb250ZW50IG91dHNpZGUgdGhlIGFuY2hvciB0YWcgdG8gYWxsb3cgc2NyZWVuIHJlYWRlcnMgdG8gbmF2aWdhdGUgdGhyb3VnaCBpdFxuICAgIHJldHVybiBodG1sYFxuICAgICAgPGRpdiBjbGFzcz1cInNiYi10ZWFzZXItcHJvZHVjdF9fd3JhcHBlclwiPlxuICAgICAgICAke3RoaXMucmVuZGVyTGluayhcbiAgICAgICAgICAvLyBGb3IgU0VPLCB3ZSBhZGQgdGhlIGFjY2Vzc2liaWxpdHkgaGlkZGVuIGFzIGhpZGRlbiBjb250ZW50IG9mIHRoZSBsaW5rXG4gICAgICAgICAgaHRtbGA8c2JiLXNjcmVlbi1yZWFkZXItb25seT4ke3RoaXMuYWNjZXNzaWJpbGl0eUxhYmVsfTwvc2JiLXNjcmVlbi1yZWFkZXItb25seT5gLFxuICAgICAgICApfVxuICAgICAgICAke3RoaXMucmVuZGVyVGVtcGxhdGUoKX1cbiAgICAgIDwvZGl2PlxuICAgIGA7XG4gIH1cbn1cblxuZGVjbGFyZSBnbG9iYWwge1xuICBpbnRlcmZhY2UgSFRNTEVsZW1lbnRUYWdOYW1lTWFwIHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25hbWluZy1jb252ZW50aW9uXG4gICAgJ3NiYi10ZWFzZXItcHJvZHVjdCc6IFNiYlRlYXNlclByb2R1Y3RFbGVtZW50O1xuICB9XG59XG4iXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUN1QkEsSUFBYSwwQkFBYixjQUE2QyxtQ0FDM0MsbUJBQ0QsQ0FBQTs7QUFDaUMsT0FBQSxjQUFzQjs7O0FBQy9CLE9BQUEsU0FBeUI7R0FDOUM7R0FDQTtHQUNBLFVBQVUsdUJBQUE7R0FDWDs7Q0FFa0IsU0FBTTtBQUV2QixTQUFPLE1BQUk7O1VBRUwsS0FBSyxXQUVMLE1BQUksMkJBQTJCLEtBQUssbUJBQWtCLDJCQUN2RCxDQUFBO1VBQ0MsS0FBSyxnQkFBZ0IsQ0FBQSJ9
package/development/teaser-product.js CHANGED
@@ -1,6 +1,6 @@
1
- import { n as teaserProductCommonStyle, t as SbbTeaserProductCommonElementMixin } from "./teaser-product-common-B_r7GkGw.js";
1
+ import { n as teaserProductCommonStyle, t as SbbTeaserProductCommonElementMixin } from "./teaser-product-common-DYX370pm.js";
2
2
  import { SbbTeaserProductStaticElement } from "./teaser-product/teaser-product-static/teaser-product-static.component.js";
3
- import { t as SbbTeaserProductElement } from "./teaser-product.component-DjAMYUmw.js";
3
+ import { t as SbbTeaserProductElement } from "./teaser-product.component-CSArA8bH.js";
4
4
  import "./teaser-product.pure.js";
5
5
  //#region src/elements/teaser-product.ts
6
6
  /** @entrypoint */
package/development/teaser-product.pure.js CHANGED
@@ -1,4 +1,4 @@
1
- import { n as teaserProductCommonStyle, t as SbbTeaserProductCommonElementMixin } from "./teaser-product-common-B_r7GkGw.js";
1
+ import { n as teaserProductCommonStyle, t as SbbTeaserProductCommonElementMixin } from "./teaser-product-common-DYX370pm.js";
2
2
  import { SbbTeaserProductStaticElement } from "./teaser-product/teaser-product-static/teaser-product-static.component.js";
3
- import { t as SbbTeaserProductElement } from "./teaser-product.component-DjAMYUmw.js";
3
+ import { t as SbbTeaserProductElement } from "./teaser-product.component-CSArA8bH.js";
4
4
  export { SbbTeaserProductCommonElementMixin, SbbTeaserProductElement, SbbTeaserProductStaticElement, teaserProductCommonStyle };
package/off-brand-theme.css CHANGED
@@ -1847,6 +1847,28 @@ slot[name=error]::slotted(*) {
1847
1847
  --sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
1848
1848
  --sbb-teaser-border-radius: var(--sbb-border-radius-4x);
1849
1849
  --sbb-teaser-image-width: 18.75rem;
1850
+ --sbb-teaser-product-background-color: var(--sbb-color-cloud);
1851
+ --sbb-teaser-product-background-color: light-dark(
1852
+ var(--sbb-color-cloud),
1853
+ var(--sbb-color-midnight)
1854
+ );
1855
+ --sbb-teaser-product-background-gradient-direction: to right;
1856
+ --sbb-teaser-product-border-radius: var(--sbb-border-radius-4x);
1857
+ --sbb-teaser-product-min-height: 37.5rem;
1858
+ --sbb-teaser-product-background-gradient-start: 25%;
1859
+ --sbb-teaser-product-background-gradient-end: 75%;
1860
+ --sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-s);
1861
+ --sbb-teaser-product-container-padding-inline: var(--sbb-spacing-responsive-s);
1862
+ --sbb-teaser-product-container-spacing: var(--sbb-spacing-responsive-l);
1863
+ --sbb-teaser-product-content-color: var(--sbb-color-4);
1864
+ --sbb-teaser-product-footer-color: var(--sbb-color-anthracite);
1865
+ --sbb-teaser-product-footer-color: light-dark(
1866
+ var(--sbb-color-anthracite),
1867
+ var(--sbb-color-cloud)
1868
+ );
1869
+ --sbb-teaser-product-footer-font-size: var(--sbb-text-font-size-xxs);
1870
+ --sbb-teaser-product-footer-padding-block-start: var(--sbb-spacing-responsive-s);
1871
+ --sbb-teaser-product-footer-padding-block-end: 0;
1850
1872
  --sbb-visual-checkbox-dimension: var(--sbb-checkbox-dimension-m);
1851
1873
  --sbb-visual-checkbox-selection-color: var(--sbb-color-primary);
1852
1874
  --sbb-visual-checkbox-selection-color-negative: var(--sbb-color-primary85);
@@ -2012,6 +2034,12 @@ slot[name=error]::slotted(*) {
2012
2034
  --sbb-menu-max-width: 20rem;
2013
2035
  --sbb-menu-min-width: 11.25rem;
2014
2036
  --sbb-menu-transform-y: var(--sbb-spacing-fixed-2x);
2037
+ --sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-l) 0;
2038
+ --sbb-teaser-product-container-padding-inline: var(--sbb-spacing-responsive-xl);
2039
+ --sbb-teaser-product-content-align-content: center;
2040
+ --sbb-teaser-product-footer-padding-block-start: var(--sbb-spacing-responsive-xs);
2041
+ --sbb-teaser-product-footer-padding-block-end: var(--sbb-spacing-responsive-xs);
2042
+ --sbb-teaser-product-footer-min-height: var(--sbb-teaser-product-container-spacing);
2015
2043
  }
2016
2044
  :root.sbb-lean {
2017
2045
  --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
@@ -2389,6 +2417,15 @@ sbb-tab-nav-bar .sbb-tab-amount {
2389
2417
  text-decoration: var(--sbb-tab-label-text-decoration);
2390
2418
  }
2391
2419
 
2420
+ :is(sbb-teaser-product, sbb-teaser-product-static) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2421
+ border-radius: 0;
2422
+ --sbb-image-object-fit: cover;
2423
+ --sbb-image-aspect-ratio: 16 / 9;
2424
+ }
2425
+ :is(sbb-teaser-product, sbb-teaser-product-static) img:not(.sbb-figure-overlap-image) {
2426
+ place-self: stretch;
2427
+ }
2428
+
2392
2429
  .sbb-dark {
2393
2430
  color-scheme: dark;
2394
2431
  }
@@ -2505,15 +2542,6 @@ img {
2505
2542
  transition: filter var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
2506
2543
  }
2507
2544
 
2508
- :is(sbb-teaser-product, sbb-teaser-product-static) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2509
- border-radius: 0;
2510
- --sbb-image-object-fit: cover;
2511
- --sbb-image-aspect-ratio: 16 / 9;
2512
- }
2513
- :is(sbb-teaser-product, sbb-teaser-product-static) img:not(.sbb-figure-overlap-image) {
2514
- place-self: stretch;
2515
- }
2516
-
2517
2545
  sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2518
2546
  --sbb-image-object-fit: cover;
2519
2547
  --sbb-image-aspect-ratio: 4 / 3;
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@sbb-esta/lyne-elements-dev",
3
- "version": "4.9.0-dev.1775125493",
3
+ "version": "4.9.0-dev.1775130554",
4
4
  "description": "Lyne Design System",
5
5
  "keywords": [
6
6
  "design system",
7
7
  "web components",
8
8
  "lit",
9
- "https://github.com/sbb-design-systems/lyne-components/commit/c82ec36c77eb0f4237b9f79483b91e894f89ae70"
9
+ "https://github.com/sbb-design-systems/lyne-components/commit/d8b827abd371036970317f37cfa11797996ee005"
10
10
  ],
11
11
  "type": "module",
12
12
  "exports": {
package/safety-theme.css CHANGED
@@ -1847,6 +1847,28 @@ slot[name=error]::slotted(*) {
1847
1847
  --sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
1848
1848
  --sbb-teaser-border-radius: var(--sbb-border-radius-4x);
1849
1849
  --sbb-teaser-image-width: 18.75rem;
1850
+ --sbb-teaser-product-background-color: var(--sbb-color-cloud);
1851
+ --sbb-teaser-product-background-color: light-dark(
1852
+ var(--sbb-color-cloud),
1853
+ var(--sbb-color-midnight)
1854
+ );
1855
+ --sbb-teaser-product-background-gradient-direction: to right;
1856
+ --sbb-teaser-product-border-radius: var(--sbb-border-radius-4x);
1857
+ --sbb-teaser-product-min-height: 37.5rem;
1858
+ --sbb-teaser-product-background-gradient-start: 25%;
1859
+ --sbb-teaser-product-background-gradient-end: 75%;
1860
+ --sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-s);
1861
+ --sbb-teaser-product-container-padding-inline: var(--sbb-spacing-responsive-s);
1862
+ --sbb-teaser-product-container-spacing: var(--sbb-spacing-responsive-l);
1863
+ --sbb-teaser-product-content-color: var(--sbb-color-4);
1864
+ --sbb-teaser-product-footer-color: var(--sbb-color-anthracite);
1865
+ --sbb-teaser-product-footer-color: light-dark(
1866
+ var(--sbb-color-anthracite),
1867
+ var(--sbb-color-cloud)
1868
+ );
1869
+ --sbb-teaser-product-footer-font-size: var(--sbb-text-font-size-xxs);
1870
+ --sbb-teaser-product-footer-padding-block-start: var(--sbb-spacing-responsive-s);
1871
+ --sbb-teaser-product-footer-padding-block-end: 0;
1850
1872
  --sbb-visual-checkbox-dimension: var(--sbb-checkbox-dimension-m);
1851
1873
  --sbb-visual-checkbox-selection-color: var(--sbb-color-primary);
1852
1874
  --sbb-visual-checkbox-selection-color-negative: var(--sbb-color-primary85);
@@ -2012,6 +2034,12 @@ slot[name=error]::slotted(*) {
2012
2034
  --sbb-menu-max-width: 20rem;
2013
2035
  --sbb-menu-min-width: 11.25rem;
2014
2036
  --sbb-menu-transform-y: var(--sbb-spacing-fixed-2x);
2037
+ --sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-l) 0;
2038
+ --sbb-teaser-product-container-padding-inline: var(--sbb-spacing-responsive-xl);
2039
+ --sbb-teaser-product-content-align-content: center;
2040
+ --sbb-teaser-product-footer-padding-block-start: var(--sbb-spacing-responsive-xs);
2041
+ --sbb-teaser-product-footer-padding-block-end: var(--sbb-spacing-responsive-xs);
2042
+ --sbb-teaser-product-footer-min-height: var(--sbb-teaser-product-container-spacing);
2015
2043
  }
2016
2044
  :root.sbb-lean {
2017
2045
  --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
@@ -2389,6 +2417,15 @@ sbb-tab-nav-bar .sbb-tab-amount {
2389
2417
  text-decoration: var(--sbb-tab-label-text-decoration);
2390
2418
  }
2391
2419
 
2420
+ :is(sbb-teaser-product, sbb-teaser-product-static) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2421
+ border-radius: 0;
2422
+ --sbb-image-object-fit: cover;
2423
+ --sbb-image-aspect-ratio: 16 / 9;
2424
+ }
2425
+ :is(sbb-teaser-product, sbb-teaser-product-static) img:not(.sbb-figure-overlap-image) {
2426
+ place-self: stretch;
2427
+ }
2428
+
2392
2429
  .sbb-dark {
2393
2430
  color-scheme: dark;
2394
2431
  }
@@ -2505,15 +2542,6 @@ img {
2505
2542
  transition: filter var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
2506
2543
  }
2507
2544
 
2508
- :is(sbb-teaser-product, sbb-teaser-product-static) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2509
- border-radius: 0;
2510
- --sbb-image-object-fit: cover;
2511
- --sbb-image-aspect-ratio: 16 / 9;
2512
- }
2513
- :is(sbb-teaser-product, sbb-teaser-product-static) img:not(.sbb-figure-overlap-image) {
2514
- place-self: stretch;
2515
- }
2516
-
2517
2545
  sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2518
2546
  --sbb-image-object-fit: cover;
2519
2547
  --sbb-image-aspect-ratio: 4 / 3;
package/standard-theme.css CHANGED
@@ -1847,6 +1847,28 @@ slot[name=error]::slotted(*) {
1847
1847
  --sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
1848
1848
  --sbb-teaser-border-radius: var(--sbb-border-radius-4x);
1849
1849
  --sbb-teaser-image-width: 18.75rem;
1850
+ --sbb-teaser-product-background-color: var(--sbb-color-cloud);
1851
+ --sbb-teaser-product-background-color: light-dark(
1852
+ var(--sbb-color-cloud),
1853
+ var(--sbb-color-midnight)
1854
+ );
1855
+ --sbb-teaser-product-background-gradient-direction: to right;
1856
+ --sbb-teaser-product-border-radius: var(--sbb-border-radius-4x);
1857
+ --sbb-teaser-product-min-height: 37.5rem;
1858
+ --sbb-teaser-product-background-gradient-start: 25%;
1859
+ --sbb-teaser-product-background-gradient-end: 75%;
1860
+ --sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-s);
1861
+ --sbb-teaser-product-container-padding-inline: var(--sbb-spacing-responsive-s);
1862
+ --sbb-teaser-product-container-spacing: var(--sbb-spacing-responsive-l);
1863
+ --sbb-teaser-product-content-color: var(--sbb-color-4);
1864
+ --sbb-teaser-product-footer-color: var(--sbb-color-anthracite);
1865
+ --sbb-teaser-product-footer-color: light-dark(
1866
+ var(--sbb-color-anthracite),
1867
+ var(--sbb-color-cloud)
1868
+ );
1869
+ --sbb-teaser-product-footer-font-size: var(--sbb-text-font-size-xxs);
1870
+ --sbb-teaser-product-footer-padding-block-start: var(--sbb-spacing-responsive-s);
1871
+ --sbb-teaser-product-footer-padding-block-end: 0;
1850
1872
  --sbb-visual-checkbox-dimension: var(--sbb-checkbox-dimension-m);
1851
1873
  --sbb-visual-checkbox-selection-color: var(--sbb-color-primary);
1852
1874
  --sbb-visual-checkbox-selection-color-negative: var(--sbb-color-primary85);
@@ -2012,6 +2034,12 @@ slot[name=error]::slotted(*) {
2012
2034
  --sbb-menu-max-width: 20rem;
2013
2035
  --sbb-menu-min-width: 11.25rem;
2014
2036
  --sbb-menu-transform-y: var(--sbb-spacing-fixed-2x);
2037
+ --sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-l) 0;
2038
+ --sbb-teaser-product-container-padding-inline: var(--sbb-spacing-responsive-xl);
2039
+ --sbb-teaser-product-content-align-content: center;
2040
+ --sbb-teaser-product-footer-padding-block-start: var(--sbb-spacing-responsive-xs);
2041
+ --sbb-teaser-product-footer-padding-block-end: var(--sbb-spacing-responsive-xs);
2042
+ --sbb-teaser-product-footer-min-height: var(--sbb-teaser-product-container-spacing);
2015
2043
  }
2016
2044
  :root.sbb-lean {
2017
2045
  --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
@@ -2389,6 +2417,15 @@ sbb-tab-nav-bar .sbb-tab-amount {
2389
2417
  text-decoration: var(--sbb-tab-label-text-decoration);
2390
2418
  }
2391
2419
 
2420
+ :is(sbb-teaser-product, sbb-teaser-product-static) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2421
+ border-radius: 0;
2422
+ --sbb-image-object-fit: cover;
2423
+ --sbb-image-aspect-ratio: 16 / 9;
2424
+ }
2425
+ :is(sbb-teaser-product, sbb-teaser-product-static) img:not(.sbb-figure-overlap-image) {
2426
+ place-self: stretch;
2427
+ }
2428
+
2392
2429
  .sbb-dark {
2393
2430
  color-scheme: dark;
2394
2431
  }
@@ -2505,15 +2542,6 @@ img {
2505
2542
  transition: filter var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
2506
2543
  }
2507
2544
 
2508
- :is(sbb-teaser-product, sbb-teaser-product-static) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2509
- border-radius: 0;
2510
- --sbb-image-object-fit: cover;
2511
- --sbb-image-aspect-ratio: 16 / 9;
2512
- }
2513
- :is(sbb-teaser-product, sbb-teaser-product-static) img:not(.sbb-figure-overlap-image) {
2514
- place-self: stretch;
2515
- }
2516
-
2517
2545
  sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2518
2546
  --sbb-image-object-fit: cover;
2519
2547
  --sbb-image-aspect-ratio: 4 / 3;
package/teaser-product/common/teaser-product-common.js CHANGED
@@ -1,2 +1,2 @@
1
- import { n as e, t } from "../../teaser-product-common-qTPSq_o7.js";
1
+ import { n as e, t } from "../../teaser-product-common-Ct19HzVX.js";
2
2
  export { t as SbbTeaserProductCommonElementMixin, e as teaserProductCommonStyle };
package/teaser-product/common.js CHANGED
@@ -1,4 +1,4 @@
1
- import { n as e, t } from "../teaser-product-common-qTPSq_o7.js";
1
+ import { n as e, t } from "../teaser-product-common-Ct19HzVX.js";
2
2
  //#region src/elements/teaser-product/common.ts
3
3
  console.warn("The entrypoint '@sbb-esta/elements/teaser-product/common.js' has been deprecated.\nUse either '@sbb-esta/elements/teaser-product.js' or '@sbb-esta/elements/teaser-product.pure.js' instead.");
4
4
  //#endregion
package/teaser-product/teaser-product/teaser-product.component.js CHANGED
@@ -1,2 +1,2 @@
1
- import { t as e } from "../../teaser-product.component-IyBPFzdf.js";
1
+ import { t as e } from "../../teaser-product.component-Csj9pAne.js";
2
2
  export { e as SbbTeaserProductElement };
package/teaser-product/teaser-product.js CHANGED
@@ -1,4 +1,4 @@
1
- import { t as e } from "../teaser-product.component-IyBPFzdf.js";
1
+ import { t as e } from "../teaser-product.component-Csj9pAne.js";
2
2
  e.define(), console.warn("The entrypoint '@sbb-esta/elements/teaser-product/teaser-product.js' has been deprecated.\nUse either '@sbb-esta/elements/teaser-product.js' or '@sbb-esta/elements/teaser-product.pure.js' instead.");
3
3
  //#endregion
4
4
  export { e as SbbTeaserProductElement };
package/teaser-product-common-Ct19HzVX.js ADDED
@@ -0,0 +1,63 @@
1
+ import { __esDecorate as e, __runInitializers as t } from "tslib";
2
+ import { html as n, unsafeCSS as r } from "lit";
3
+ import { property as i } from "lit/decorators.js";
4
+ import { SbbNegativeMixin as a } from "./core/mixins.js";
5
+ //#endregion
6
+ //#region src/elements/teaser-product/common/teaser-product-common.ts
7
+ var o = r(":host{--sbb-teaser-product-background: var(--sbb-teaser-product-background-color);display:block}@media(min-width:64rem){:host{--sbb-teaser-product-content-min-height: calc( var(--sbb-teaser-product-min-height) - 2 * var(--sbb-teaser-product-container-spacing) );--sbb-teaser-product-background: linear-gradient( var(--sbb-teaser-product-background-gradient-direction), var(--sbb-teaser-product-background-color) var(--sbb-teaser-product-background-gradient-start), transparent var(--sbb-teaser-product-background-gradient-end) )}}:host([negative]){--sbb-teaser-product-background-color: var(--sbb-background-color-1-negative);--sbb-teaser-product-content-color: var(--sbb-color-4-negative);--sbb-teaser-product-footer-color: var(--sbb-color-4-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-title-text-color-normal-override: var(--sbb-color-3-negative)}:host([image-alignment=before]){--sbb-teaser-product-background-gradient-direction: to left}:host(:not(:is(:state(slotted-footnote),[state--slotted-footnote]))){--sbb-teaser-product-footer-padding-block-start: 0}.sbb-teaser-product__image-container{overflow:hidden;border-radius:var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius) 0 0}@media(min-width:64rem){.sbb-teaser-product__image-container{position:absolute;inset:0;border-radius:var(--sbb-teaser-product-border-radius)}}::slotted(p.sbb-teaser-product--spacing){margin:0}::slotted(sbb-title.sbb-teaser-product--spacing){margin-block-start:0}::slotted(:is(sbb-action-group,:is(:state(action),[state--action])).sbb-teaser-product--spacing){margin-block-start:var(--sbb-spacing-responsive-xxs)}::slotted([slot=image]){display:flex;width:100%;height:100%}@media(forced-colors:active){.sbb-teaser-product__root:after{content:\"\";position:absolute;display:block;inset:0;pointer-events:none;border:var(--sbb-border-width-2x) solid CanvasText;border-radius:var(--sbb-teaser-product-border-radius)}}.sbb-action-base{display:block;position:relative;text-decoration:none}.sbb-teaser-product__container{background:var(--sbb-teaser-product-background);border-radius:0 0 var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius);padding-block:var(--sbb-teaser-product-container-padding-block);padding-inline:var(--sbb-teaser-product-container-padding-inline)}@media(min-width:64rem){.sbb-teaser-product__container{display:grid;grid:\"content .\" 1fr \"footnote .\" auto/1fr 1fr;column-gap:var(--sbb-spacing-responsive-xxl);border-radius:var(--sbb-teaser-product-border-radius);position:relative}:host([image-alignment=before]) .sbb-teaser-product__container{grid-template-areas:\". content\" \". footnote\"}}.sbb-teaser-product__content{grid-area:content;align-self:center;margin:0;color:var(--sbb-teaser-product-content-color);min-height:var(--sbb-teaser-product-content-min-height, 0);align-content:var(--sbb-teaser-product-content-align-content, normal)}.sbb-teaser-product__footnote{grid-area:footnote;padding-block:var(--sbb-teaser-product-footer-padding-block-start) var(--sbb-teaser-product-footer-padding-block-end);color:var(--sbb-teaser-product-footer-color);font-size:var(--sbb-teaser-product-footer-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);min-height:var(--sbb-teaser-product-footer-min-height, 0)}"), s = (r) => (() => {
8
+ let o = a(r), s, c = [], l = [];
9
+ return class extends o {
10
+ static {
11
+ let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
12
+ s = [i({
13
+ attribute: "image-alignment",
14
+ reflect: !0
15
+ })], e(this, null, s, {
16
+ kind: "accessor",
17
+ name: "imageAlignment",
18
+ static: !1,
19
+ private: !1,
20
+ access: {
21
+ has: (e) => "imageAlignment" in e,
22
+ get: (e) => e.imageAlignment,
23
+ set: (e, t) => {
24
+ e.imageAlignment = t;
25
+ }
26
+ },
27
+ metadata: t
28
+ }, c, l), t && Object.defineProperty(this, Symbol.metadata, {
29
+ enumerable: !0,
30
+ configurable: !0,
31
+ writable: !0,
32
+ value: t
33
+ });
34
+ }
35
+ #e = t(this, c, "after");
36
+ get imageAlignment() {
37
+ return this.#e;
38
+ }
39
+ set imageAlignment(e) {
40
+ this.#e = e;
41
+ }
42
+ renderTemplate() {
43
+ return n`
44
+ <div class="sbb-teaser-product__root">
45
+ <div class="sbb-teaser-product__image-container"><slot name="image"></slot></div>
46
+ <div class="sbb-teaser-product__container">
47
+ <span class="sbb-teaser-product__content">
48
+ <slot></slot>
49
+ </span>
50
+ <div class="sbb-teaser-product__footnote">
51
+ <slot name="footnote"></slot>
52
+ </div>
53
+ </div>
54
+ </div>
55
+ `;
56
+ }
57
+ constructor() {
58
+ super(...arguments), t(this, l);
59
+ }
60
+ };
61
+ })();
62
+ //#endregion
63
+ export { o as n, s as t };
package/{teaser-product.component-IyBPFzdf.js → teaser-product.component-Csj9pAne.js} RENAMED
@@ -5,7 +5,7 @@ import { html as r } from "lit/static-html.js";
5
5
  import "./screen-reader-only.js";
6
6
  import { SbbTeaserProductCommonElementMixin as i, teaserProductCommonStyle as a } from "./teaser-product/common/teaser-product-common.js";
7
7
  //#region src/elements/teaser-product/teaser-product/teaser-product.scss?inline
8
- var o = ":host{--sbb-teaser-product-border-radius: var(--sbb-border-radius-4x)}@media(forced-colors:active){:host{--sbb-title-text-color-normal-override: LinkText !important;--sbb-teaser-product-content-color: LinkText !important;--sbb-teaser-product-footer-color: LinkText !important}}.sbb-teaser-product__wrapper{position:relative}.sbb-teaser-product__root{pointer-events:none}@media(forced-colors:active){:host(:hover) .sbb-teaser-product__root:after{border-color:Highlight}}.sbb-teaser-product{position:absolute;inset:0}.sbb-teaser-product: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-product-border-radius)}", s = class extends i(t) {
8
+ var o = "@media(forced-colors:active){:host{--sbb-title-text-color-normal-override: LinkText !important;--sbb-teaser-product-content-color: LinkText !important;--sbb-teaser-product-footer-color: LinkText !important}}.sbb-teaser-product__wrapper{position:relative}.sbb-teaser-product__root{pointer-events:none}@media(forced-colors:active){:host(:hover) .sbb-teaser-product__root:after{border-color:Highlight}}.sbb-teaser-product{position:absolute;inset:0}.sbb-teaser-product: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-product-border-radius)}", s = class extends i(t) {
9
9
  static {
10
10
  this.elementName = "sbb-teaser-product";
11
11
  }
package/teaser-product.js CHANGED
@@ -1,6 +1,6 @@
1
- import { n as e, t } from "./teaser-product-common-qTPSq_o7.js";
1
+ import { n as e, t } from "./teaser-product-common-Ct19HzVX.js";
2
2
  import { SbbTeaserProductStaticElement as n } from "./teaser-product/teaser-product-static/teaser-product-static.component.js";
3
- import { t as r } from "./teaser-product.component-IyBPFzdf.js";
3
+ import { t as r } from "./teaser-product.component-Csj9pAne.js";
4
4
  import "./teaser-product.pure.js";
5
5
  r.define(), n.define();
6
6
  //#endregion
package/teaser-product.pure.js CHANGED
@@ -1,4 +1,4 @@
1
- import { n as e, t } from "./teaser-product-common-qTPSq_o7.js";
1
+ import { n as e, t } from "./teaser-product-common-Ct19HzVX.js";
2
2
  import { SbbTeaserProductStaticElement as n } from "./teaser-product/teaser-product-static/teaser-product-static.component.js";
3
- import { t as r } from "./teaser-product.component-IyBPFzdf.js";
3
+ import { t as r } from "./teaser-product.component-Csj9pAne.js";
4
4
  export { t as SbbTeaserProductCommonElementMixin, r as SbbTeaserProductElement, n as SbbTeaserProductStaticElement, e as teaserProductCommonStyle };