@sbb-esta/lyne-elements-dev 5.7.0-dev.1788418878 → 5.7.0-dev.1788435806

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/custom-elements.json +1424 -253
  2. package/development/autocomplete/autocomplete.component.d.ts +1 -0
  3. package/development/autocomplete.pure.js +1 -0
  4. package/development/option.pure.js +1 -1
  5. package/development/select/select.component.d.ts +1 -0
  6. package/development/select.pure.js +1 -0
  7. package/development/teaser/common/teaser-common.d.ts +6 -0
  8. package/development/teaser/{teaser.component.d.ts → teaser/teaser.component.d.ts} +6 -9
  9. package/development/teaser/teaser-static/teaser-static.component.d.ts +22 -0
  10. package/development/teaser.js +2 -1
  11. package/development/teaser.pure.d.ts +3 -1
  12. package/development/teaser.pure.js +171 -100
  13. package/index.d.ts +2 -1
  14. package/index.js +2 -1
  15. package/lean-off-brand-theme.css +17 -5
  16. package/lean-safety-theme.css +17 -5
  17. package/lean-theme.css +17 -5
  18. package/off-brand-theme.css +17 -5
  19. package/option/_option.global.scss +3 -1
  20. package/option.pure.js +1 -1
  21. package/package.json +2 -2
  22. package/safety-theme.css +17 -5
  23. package/standard-theme.css +17 -5
  24. package/teaser/_teaser.global.scss +17 -6
  25. package/teaser.js +1 -1
  26. package/teaser.pure.js +22 -18
package/development/autocomplete/autocomplete.component.d.ts CHANGED
@@ -7,6 +7,7 @@ import { SbbAutocompleteBaseElement } from './autocomplete-base-element.ts';
7
7
  * @cssprop [--sbb-autocomplete-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
8
8
  * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
9
9
  * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
10
+ * @cssprop [--sbb-options-panel-offset=var(--sbb-spacing-fixed-2x)] - Gap between autocomplete and panel.
10
11
  * @cssprop [--sbb-options-panel-max-height] - Maximum height of the options panel.
11
12
  * If the calculated remaining space is smaller, the value gets ignored.
12
13
  */
package/development/autocomplete.pure.js CHANGED
@@ -705,6 +705,7 @@ const ariaRoleOnHost = isSafari;
705
705
  * @cssprop [--sbb-autocomplete-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
706
706
  * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
707
707
  * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
708
+ * @cssprop [--sbb-options-panel-offset=var(--sbb-spacing-fixed-2x)] - Gap between autocomplete and panel.
708
709
  * @cssprop [--sbb-options-panel-max-height] - Maximum height of the options panel.
709
710
  * If the calculated remaining space is smaller, the value gets ignored.
710
711
  */
package/development/option.pure.js CHANGED
@@ -219,7 +219,7 @@ var SbbOptionHintElement = class extends SbbNegativeMixin(SbbElement) {
219
219
 
220
220
  //#endregion
221
221
  //#region src/elements/option/option-panel-common.scss?inline
222
- var option_panel_common_default = ":host {\n --sbb-options-panel-position-x: 0;\n --sbb-options-panel-position-y: 0;\n --sbb-options-pointer-events: all;\n --_sbb-options-panel-max-height: min(\n var(--sbb-options-panel-max-height-calculated),\n var(--sbb-options-panel-max-height, 100000em)\n );\n --sbb-options-panel-min-height: 1em;\n --sbb-options-panel-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-4x)\n );\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n --sbb-focus-outline-color: light-dark(\n var(--sbb-focus-outline-color-default),\n var(--sbb-focus-outline-color-dark)\n );\n --sbb-options-panel-internal-z-index: var(\n --sbb-select-z-index,\n var(--sbb-overlay-default-z-index)\n );\n font-weight: normal;\n}\n\n:host([negative]) {\n --sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard-negative);\n --sbb-options-panel-background-color: var(--sbb-background-color-2-negative);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n:host(:not(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))),\n:host(:is(:state(state-closed),[state--state-closed])) {\n --sbb-options-panel-visibility: hidden;\n --sbb-options-pointer-events: none;\n}\n\n:host(:is(:state(state-opening),[state--state-opening])) {\n --sbb-options-panel-animation-name: open;\n}\n\n:host(:is(:state(state-closing),[state--state-closing])) {\n --sbb-options-panel-animation-name: close;\n}\n\n:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) {\n --sbb-options-panel-animation-translate: var(--sbb-spacing-fixed-2x);\n}\n\n:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])) {\n --sbb-options-panel-animation-translate: calc(-1 * var(--sbb-spacing-fixed-2x));\n --sbb-options-panel-margin-block-start: calc(-1 * var(--sbb-spacing-fixed-2x));\n}\n\n:host([preserve-icon-space]) {\n --sbb-option-icon-container-display: block;\n}\n\n::slotted(sbb-divider) {\n margin-block: var(--sbb-options-panel-divider-margin-block);\n}\n\n.sbb-option-panel__overlay-container {\n position: fixed;\n pointer-events: none;\n inset: 0;\n z-index: var(--sbb-options-panel-internal-z-index);\n}\n.sbb-option-panel__overlay-container::after {\n content: \"\";\n display: block;\n position: absolute;\n top: var(--sbb-options-panel-origin-position-y);\n left: var(--sbb-options-panel-origin-position-x);\n width: var(--sbb-options-panel-width);\n height: var(--sbb-options-panel-origin-height);\n background-color: transparent;\n border-radius: var(--sbb-options-panel-border-radius);\n transition: box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);\n}\n:host(:is(:is(:state(state-opened),[state--state-opened]), :is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-option-panel__overlay-container::after {\n box-shadow: var(--sbb-options-panel-box-shadow);\n}\n\n.sbb-option-panel__overlay {\n display: block;\n position: absolute;\n visibility: var(--sbb-options-panel-visibility, visible);\n border: none;\n border-radius: var(--sbb-options-panel-border-radius);\n top: var(--sbb-options-panel-position-y);\n left: var(--sbb-options-panel-position-x);\n width: var(--sbb-options-panel-width, fit-content);\n transition: box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);\n box-shadow: var(--sbb-options-panel-box-shadow);\n background-color: var(--sbb-options-panel-background-color);\n margin-block-start: var(--sbb-options-panel-margin-block-start);\n padding-block: var(--sbb-options-panel-padding-block);\n padding-inline: 0;\n max-height: var(--_sbb-options-panel-max-height);\n min-height: var(--sbb-options-panel-min-height);\n pointer-events: var(--sbb-options-pointer-events);\n overflow: hidden auto;\n animation-name: var(--sbb-options-panel-animation-name);\n animation-duration: var(--sbb-options-panel-animation-duration);\n animation-timing-function: var(--sbb-options-panel-animation-timing-function);\n}\n@media (forced-colors: active) {\n .sbb-option-panel__overlay {\n border: var(--sbb-border-width-1x) solid CanvasText;\n }\n}\n\n@keyframes open {\n from {\n translate: 0 var(--sbb-options-panel-animation-translate);\n opacity: 0;\n }\n to {\n translate: 0;\n opacity: 1;\n }\n}\n@keyframes close {\n from {\n translate: 0;\n opacity: 1;\n }\n to {\n translate: 0 var(--sbb-options-panel-animation-translate);\n opacity: 0;\n }\n}\n";
222
+ var option_panel_common_default = ":host {\n --sbb-options-panel-position-x: 0;\n --sbb-options-panel-position-y: 0;\n --sbb-options-pointer-events: all;\n --_sbb-options-panel-max-height: min(\n var(--sbb-options-panel-max-height-calculated),\n var(--sbb-options-panel-max-height, 100000em)\n );\n --sbb-options-panel-min-height: 1em;\n --sbb-options-panel-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-4x)\n );\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n --sbb-focus-outline-color: light-dark(\n var(--sbb-focus-outline-color-default),\n var(--sbb-focus-outline-color-dark)\n );\n --sbb-options-panel-internal-z-index: var(\n --sbb-select-z-index,\n var(--sbb-overlay-default-z-index)\n );\n font-weight: normal;\n}\n\n:host([negative]) {\n --sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard-negative);\n --sbb-options-panel-background-color: var(--sbb-background-color-2-negative);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n:host(:not(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))),\n:host(:is(:state(state-closed),[state--state-closed])) {\n --sbb-options-panel-visibility: hidden;\n --sbb-options-pointer-events: none;\n}\n\n:host(:is(:state(state-opening),[state--state-opening])) {\n --sbb-options-panel-animation-name: open;\n}\n\n:host(:is(:state(state-closing),[state--state-closing])) {\n --sbb-options-panel-animation-name: close;\n}\n\n:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) {\n --sbb-options-panel-animation-translate: var(--sbb-spacing-fixed-2x);\n}\n\n:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])) {\n --sbb-options-panel-animation-translate: calc(-1 * var(--sbb-spacing-fixed-2x));\n --_sbb-options-panel-offset: calc(-1 * var(--sbb-options-panel-offset));\n}\n\n:host([preserve-icon-space]) {\n --sbb-option-icon-container-display: block;\n}\n\n::slotted(sbb-divider) {\n margin-block: var(--sbb-options-panel-divider-margin-block);\n}\n\n.sbb-option-panel__overlay-container {\n position: fixed;\n pointer-events: none;\n inset: 0;\n z-index: var(--sbb-options-panel-internal-z-index);\n}\n.sbb-option-panel__overlay-container::after {\n content: \"\";\n display: block;\n position: absolute;\n top: var(--sbb-options-panel-origin-position-y);\n left: var(--sbb-options-panel-origin-position-x);\n width: var(--sbb-options-panel-width);\n height: var(--sbb-options-panel-origin-height);\n background-color: transparent;\n border-radius: var(--sbb-options-panel-border-radius);\n transition: box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);\n}\n:host(:is(:is(:state(state-opened),[state--state-opened]), :is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-option-panel__overlay-container::after {\n box-shadow: var(--sbb-options-panel-box-shadow);\n}\n\n.sbb-option-panel__overlay {\n display: block;\n position: absolute;\n visibility: var(--sbb-options-panel-visibility, visible);\n border: none;\n border-radius: var(--sbb-options-panel-border-radius);\n top: var(--sbb-options-panel-position-y);\n left: var(--sbb-options-panel-position-x);\n width: var(--sbb-options-panel-width, fit-content);\n transition: box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);\n box-shadow: var(--sbb-options-panel-box-shadow);\n background-color: var(--sbb-options-panel-background-color);\n margin-block-start: var(--_sbb-options-panel-offset, var(--sbb-options-panel-offset));\n padding-block: var(--sbb-options-panel-padding-block);\n padding-inline: 0;\n max-height: var(--_sbb-options-panel-max-height);\n min-height: var(--sbb-options-panel-min-height);\n pointer-events: var(--sbb-options-pointer-events);\n overflow: hidden auto;\n animation-name: var(--sbb-options-panel-animation-name);\n animation-duration: var(--sbb-options-panel-animation-duration);\n animation-timing-function: var(--sbb-options-panel-animation-timing-function);\n}\n@media (forced-colors: active) {\n .sbb-option-panel__overlay {\n border: var(--sbb-border-width-1x) solid CanvasText;\n }\n}\n\n@keyframes open {\n from {\n translate: 0 var(--sbb-options-panel-animation-translate);\n opacity: 0;\n }\n to {\n translate: 0;\n opacity: 1;\n }\n}\n@keyframes close {\n from {\n translate: 0;\n opacity: 1;\n }\n to {\n translate: 0 var(--sbb-options-panel-animation-translate);\n opacity: 0;\n }\n}\n";
223
223
 
224
224
  //#endregion
225
225
  //#region src/elements/option/option-styles.ts
package/development/select/select.component.d.ts CHANGED
@@ -9,6 +9,7 @@ declare const SbbSelectElement_base: import("../core.ts").AbstractConstructor<im
9
9
  * @cssprop [--sbb-select-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
10
10
  * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
11
11
  * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
12
+ * @cssprop [--sbb-options-panel-offset=var(--sbb-spacing-fixed-2x)] - Gap between select and panel.
12
13
  * @cssprop [--sbb-options-panel-max-height] - Maximum height of the options panel.
13
14
  * If the calculated remaining space is smaller, the value gets ignored.
14
15
  * @overrideType value - (T = string | string[]) | null
package/development/select.pure.js CHANGED
@@ -26,6 +26,7 @@ let nextId = 0;
26
26
  * @cssprop [--sbb-select-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
27
27
  * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
28
28
  * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
29
+ * @cssprop [--sbb-options-panel-offset=var(--sbb-spacing-fixed-2x)] - Gap between select and panel.
29
30
  * @cssprop [--sbb-options-panel-max-height] - Maximum height of the options panel.
30
31
  * If the calculated remaining space is smaller, the value gets ignored.
31
32
  * @overrideType value - (T = string | string[]) | null
package/development/teaser/common/teaser-common.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { type AbstractConstructor, SbbActionBaseElement } from '../../core.ts';
2
+ export declare class SbbTeaserCommonElementMixinType extends SbbActionBaseElement {
3
+ accessor alignment: 'before' | 'before-centered' | 'after' | 'after-centered' | 'below';
4
+ accessor size: 'm' | 'l' | null;
5
+ }
6
+ export declare const SbbTeaserCommonElementMixin: <T extends AbstractConstructor<SbbActionBaseElement>>(superClass: T) => AbstractConstructor<SbbTeaserCommonElementMixinType> & T;
package/development/teaser/{teaser.component.d.ts → teaser/teaser.component.d.ts} RENAMED
@@ -1,26 +1,23 @@
1
1
  import { type CSSResultGroup, type TemplateResult } from 'lit';
2
- import { SbbLinkBaseElement } from '../core.ts';
2
+ import { SbbLinkBaseElement } from '../../core.ts';
3
+ declare const SbbTeaserElement_base: import("../../core.ts").AbstractConstructor<import("../common/teaser-common.ts").SbbTeaserCommonElementMixinType> & typeof SbbLinkBaseElement;
3
4
  /**
4
5
  * It displays an interactive image with caption.
5
6
  *
6
- * @slot image - Slot used to render the image.
7
+ * @slot action - Slot for a static action, e.g. a `<sbb-secondary-button-static>` element. The action is displayed below the description.
7
8
  * @slot chip - Slot for the `sbb-chip-label` element. The slot on the `sbb-chip-label` element is automatically assigned when slotted in the unnamed slot.
9
+ * @slot image - Slot used to render the image.
8
10
  * @slot title - Slot for the title. For the standard `sbb-title` element, the slot is automatically assigned when slotted in the unnamed slot.
9
11
  * @slot - Use the unnamed slot to render the description, the sbb-title and the sbb-chip-label.
10
12
  */
11
- export declare class SbbTeaserElement extends SbbLinkBaseElement {
13
+ export declare class SbbTeaserElement extends SbbTeaserElement_base {
12
14
  static readonly elementName: string;
13
15
  static styles: CSSResultGroup;
14
- /** Teaser variant - define the position and the alignment of the text block. */
15
- accessor alignment: 'after-centered' | 'after' | 'below';
16
- private _handleSlotchange;
17
- private _configureChip;
18
- private _configureTitle;
19
16
  protected render(): TemplateResult;
20
- protected renderContent(): TemplateResult;
21
17
  }
22
18
  declare global {
23
19
  interface HTMLElementTagNameMap {
24
20
  'sbb-teaser': SbbTeaserElement;
25
21
  }
26
22
  }
23
+ export {};
package/development/teaser/teaser-static/teaser-static.component.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ import type { TemplateResult } from 'lit';
2
+ import { SbbActionBaseElement } from '../../core.ts';
3
+ declare const SbbTeaserStaticElement_base: import("../../core.ts").AbstractConstructor<import("../common/teaser-common.ts").SbbTeaserCommonElementMixinType> & typeof SbbActionBaseElement;
4
+ /**
5
+ * Non-interactive variant of the `<sbb-teaser>`.
6
+ *
7
+ * @slot action - Slot for an interactive action, e.g. a `<sbb-secondary-button-link>` element. The action is displayed below the description.
8
+ * @slot chip - Slot for the `sbb-chip-label` element. The slot on the `sbb-chip-label` element is automatically assigned when slotted in the unnamed slot.
9
+ * @slot image - Slot used to render the image.
10
+ * @slot title - Slot for the title. For the standard `sbb-title` element, the slot is automatically assigned when slotted in the unnamed slot.
11
+ * @slot - Use the unnamed slot to render the description, the sbb-title and the sbb-chip-label.
12
+ */
13
+ export declare class SbbTeaserStaticElement extends SbbTeaserStaticElement_base {
14
+ static readonly elementName: string;
15
+ protected render(): TemplateResult;
16
+ }
17
+ declare global {
18
+ interface HTMLElementTagNameMap {
19
+ 'sbb-teaser-static': SbbTeaserStaticElement;
20
+ }
21
+ }
22
+ export {};
package/development/teaser.js CHANGED
@@ -1,9 +1,10 @@
1
- import { SbbTeaserElement } from "./teaser.pure.js";
1
+ import { SbbTeaserElement, SbbTeaserStaticElement } from "./teaser.pure.js";
2
2
 
3
3
  export * from "./teaser.pure.js"
4
4
 
5
5
  //#region src/elements/teaser.ts
6
6
  /** @entrypoint */
7
7
  SbbTeaserElement.define();
8
+ SbbTeaserStaticElement.define();
8
9
 
9
10
  //#endregion
package/development/teaser.pure.d.ts CHANGED
@@ -1,2 +1,4 @@
1
1
  /** @entrypoint */
2
- export * from './teaser/teaser.component.ts';
2
+ export * from './teaser/common/teaser-common.ts';
3
+ export * from './teaser/teaser-static/teaser-static.component.ts';
4
+ export * from './teaser/teaser/teaser.component.ts';
package/development/teaser.pure.js CHANGED
@@ -1,117 +1,188 @@
1
1
  import { __esDecorate, __runInitializers } from "tslib";
2
- import { unsafeCSS } from "lit";
2
+ import { html, unsafeCSS } from "lit";
3
3
  import { property } from "lit/decorators.js";
4
- import { html } from "lit/static-html.js";
5
- import { SbbLinkBaseElement, screenReaderOnlyStyles } from "./core.js";
4
+ import { SbbActionBaseElement, SbbLinkBaseElement, screenReaderOnlyStyles } from "./core.js";
5
+ import { html as html$1 } from "lit/static-html.js";
6
6
 
7
- //#region src/elements/teaser/teaser.scss?inline
8
- var teaser_default = "@charset \"UTF-8\";\n:host {\n --_sbb-teaser-forced-colors-inset: calc(-1 * var(--sbb-focus-outline-offset));\n --_sbb-teaser-forced-colors-outline-offset: calc(2 * var(--sbb-focus-outline-offset));\n --_sbb-teaser-forced-colors-border-radius: calc(\n var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset)\n );\n display: inline-block;\n outline: none !important;\n}\n@media (forced-colors: active) {\n :host {\n --sbb-teaser-description-color: LinkText;\n --sbb-title-color: LinkText !important;\n }\n}\n\n:host([alignment=after]) {\n --sbb-teaser-align-items: start;\n}\n\n:host([alignment=below]) {\n --sbb-teaser-flex-direction: column;\n --sbb-teaser-align-items: baseline;\n --sbb-teaser-gap: var(--sbb-spacing-fixed-3x);\n}\n\n@media (any-hover: hover) {\n :host(:hover) {\n --sbb-teaser-scale: var(--sbb-teaser-scale-hover);\n }\n}\n.sbb-teaser__wrapper {\n display: flex;\n position: relative;\n cursor: var(--sbb-cursor-pointer);\n}\n.sbb-teaser__wrapper::before {\n content: \"​\";\n user-select: none;\n width: 0;\n height: 0;\n}\n\n.sbb-teaser {\n text-decoration: none;\n position: absolute;\n inset: 0;\n}\n.sbb-teaser: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-border-radius);\n}\n@media (forced-colors: active) {\n .sbb-teaser:focus-visible {\n outline-offset: var(--_sbb-teaser-forced-colors-outline-offset);\n }\n}\n@media (forced-colors: active) {\n .sbb-teaser::before {\n content: \"\";\n position: absolute;\n inset: var(--_sbb-teaser-forced-colors-inset);\n pointer-events: none;\n border-radius: var(--_sbb-teaser-forced-colors-border-radius);\n border: var(--sbb-border-width-1x) solid CanvasText;\n }\n}\n\n.sbb-teaser__container {\n display: flex;\n flex-flow: var(--sbb-teaser-flex-direction) nowrap;\n align-items: var(--sbb-teaser-align-items);\n gap: var(--sbb-teaser-gap);\n max-width: 100%;\n width: 100%;\n pointer-events: none;\n}\n\n.sbb-teaser__text {\n color: var(--sbb-teaser-description-color);\n font-size: var(--sbb-teaser-font-size);\n letter-spacing: var(--sbb-typo-letter-spacing-text);\n overflow: hidden;\n max-width: 100%;\n}\n\n::slotted([slot=image]) {\n display: block;\n width: var(--sbb-teaser-image-width);\n}\n\n.sbb-teaser__image-wrapper {\n flex-shrink: 0;\n overflow: hidden;\n border-radius: var(--sbb-teaser-border-radius);\n transition: box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing);\n max-width: 100%;\n}\n:host(:not(:is(:state(slotted-image),[state--slotted-image]))) .sbb-teaser__image-wrapper {\n display: none;\n}\n@media (any-hover: hover) {\n :host(:hover) .sbb-teaser__image-wrapper {\n box-shadow: var(--sbb-box-shadow-level-9-hard);\n }\n}\n\n.sbb-teaser__description {\n display: inline-block;\n margin: 0;\n padding: 0;\n}\n\n::slotted(sbb-chip-label) {\n display: flex;\n width: fit-content;\n max-width: 100%;\n margin-block-end: var(--sbb-spacing-fixed-1x);\n}\n\n::slotted(sbb-title) {\n margin-block: 0;\n}\n";
7
+ //#region src/elements/teaser/common/teaser-common.scss?inline
8
+ var teaser_common_default = "@charset \"UTF-8\";\n:host {\n --_sbb-teaser-forced-colors-inset: calc(-1 * var(--sbb-focus-outline-offset));\n --_sbb-teaser-forced-colors-outline-offset: calc(2 * var(--sbb-focus-outline-offset));\n --_sbb-teaser-forced-colors-border-radius: calc(\n var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset)\n );\n display: inline-block;\n}\n\n:host([size=l]) {\n --sbb-teaser-gap: var(--sbb-teaser-gap-l);\n --sbb-teaser-title-gap: var(--sbb-teaser-title-gap-l);\n --sbb-teaser-button-gap: var(--sbb-teaser-button-gap-l);\n --sbb-teaser-font-size: var(--sbb-teaser-font-size-l);\n}\n\n:host(:is([alignment=after], [alignment=before])) {\n --sbb-teaser-align-items: start;\n}\n\n:host(:is([alignment=before], [alignment=before-centered])) {\n --sbb-teaser-flex-direction: row-reverse;\n}\n\n:host([alignment=below]) {\n --sbb-teaser-flex-direction: column;\n --sbb-teaser-align-items: baseline;\n --sbb-teaser-gap: var(--sbb-teaser-gap-below);\n}\n\n.sbb-teaser__wrapper {\n display: flex;\n position: relative;\n}\n.sbb-teaser__wrapper::before {\n content: \"​\";\n user-select: none;\n width: 0;\n height: 0;\n}\n@media (forced-colors: active) {\n .sbb-teaser__wrapper::after {\n content: \"\";\n position: absolute;\n inset: var(--_sbb-teaser-forced-colors-inset);\n pointer-events: none;\n border-radius: var(--_sbb-teaser-forced-colors-border-radius);\n border: var(--sbb-border-width-1x) solid CanvasText;\n }\n}\n\n.sbb-teaser__container {\n display: flex;\n flex-flow: var(--sbb-teaser-flex-direction) nowrap;\n align-items: var(--sbb-teaser-align-items);\n gap: var(--sbb-teaser-gap);\n max-width: 100%;\n width: 100%;\n}\n\n.sbb-teaser__content {\n display: flex;\n flex-direction: column;\n gap: var(--sbb-teaser-button-gap);\n width: 100%;\n}\n\n.sbb-teaser__text {\n color: var(--sbb-teaser-description-color);\n font-size: var(--sbb-teaser-font-size);\n letter-spacing: var(--sbb-typo-letter-spacing-text);\n overflow: hidden;\n max-width: 100%;\n}\n\n:host(:is(:state(slotted-action),[state--slotted-action])) slot[name=action] {\n display: block;\n}\n\n::slotted([slot=image]) {\n display: block;\n width: var(--sbb-teaser-image-width);\n}\n\n.sbb-teaser__image-wrapper {\n flex-shrink: 0;\n overflow: hidden;\n border-radius: var(--sbb-teaser-border-radius);\n transition: box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing);\n max-width: 100%;\n}\n:host(:not(:is(:state(slotted-image),[state--slotted-image]))) .sbb-teaser__image-wrapper {\n display: none;\n}\n\n.sbb-teaser__description {\n display: inline-block;\n margin: 0;\n padding: 0;\n}\n\n::slotted(sbb-chip-label) {\n display: flex;\n width: fit-content;\n max-width: 100%;\n margin-block-end: var(--sbb-spacing-fixed-1x);\n}\n\n::slotted(sbb-title) {\n margin-block: 0 var(--sbb-teaser-title-gap);\n}\n";
9
9
 
10
10
  //#endregion
11
- //#region src/elements/teaser/teaser.component.ts
11
+ //#region src/elements/teaser/common/teaser-common.ts
12
+ const SbbTeaserCommonElementMixin = (superClass) => {
13
+ return (() => {
14
+ let _classSuper = superClass;
15
+ let _alignment_decorators;
16
+ let _alignment_initializers = [];
17
+ let _alignment_extraInitializers = [];
18
+ let _size_decorators;
19
+ let _size_initializers = [];
20
+ let _size_extraInitializers = [];
21
+ return class SbbTeaserCommonElement extends _classSuper {
22
+ static {
23
+ const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
24
+ _alignment_decorators = [property({ reflect: true })];
25
+ _size_decorators = [property({ reflect: true })];
26
+ __esDecorate(this, null, _alignment_decorators, {
27
+ kind: "accessor",
28
+ name: "alignment",
29
+ static: false,
30
+ private: false,
31
+ access: {
32
+ has: (obj) => "alignment" in obj,
33
+ get: (obj) => obj.alignment,
34
+ set: (obj, value) => {
35
+ obj.alignment = value;
36
+ }
37
+ },
38
+ metadata: _metadata
39
+ }, _alignment_initializers, _alignment_extraInitializers);
40
+ __esDecorate(this, null, _size_decorators, {
41
+ kind: "accessor",
42
+ name: "size",
43
+ static: false,
44
+ private: false,
45
+ access: {
46
+ has: (obj) => "size" in obj,
47
+ get: (obj) => obj.size,
48
+ set: (obj, value) => {
49
+ obj.size = value;
50
+ }
51
+ },
52
+ metadata: _metadata
53
+ }, _size_initializers, _size_extraInitializers);
54
+ if (_metadata) Object.defineProperty(this, Symbol.metadata, {
55
+ enumerable: true,
56
+ configurable: true,
57
+ writable: true,
58
+ value: _metadata
59
+ });
60
+ }
61
+ static {
62
+ this.styles = [unsafeCSS(teaser_common_default)];
63
+ }
64
+ #alignment_accessor_storage = __runInitializers(this, _alignment_initializers, "after-centered");
65
+ /** Teaser variant - define the position and the alignment of the text block. */
66
+ get alignment() {
67
+ return this.#alignment_accessor_storage;
68
+ }
69
+ set alignment(value) {
70
+ this.#alignment_accessor_storage = value;
71
+ }
72
+ #size_accessor_storage = (__runInitializers(this, _alignment_extraInitializers), __runInitializers(this, _size_initializers, null));
73
+ /** Size variant, either m (default) or l. */
74
+ get size() {
75
+ return this.#size_accessor_storage;
76
+ }
77
+ set size(value) {
78
+ this.#size_accessor_storage = value;
79
+ }
80
+ _handleSlotchange() {
81
+ let foundChipLabel = false;
82
+ let foundTitle = false;
83
+ for (const child of this.children) if (child.localName === "sbb-chip-label" && !foundChipLabel) {
84
+ child.slot ||= "chip";
85
+ if (child.slot === "chip") foundChipLabel = true;
86
+ } else if (child.localName === "sbb-title" && !foundTitle) {
87
+ child.slot ||= "title";
88
+ if (child.slot === "title") foundTitle = true;
89
+ } else if (/^sbb-(secondary-|accent-|transparent-)?button(-static|-link)?$/.test(child.localName)) {
90
+ if (!child.slot) child.slot = "action";
91
+ }
92
+ }
93
+ _configureChip(event) {
94
+ const chipLabel = event.target.assignedElements().find((e) => e.localName === "sbb-chip-label");
95
+ if (chipLabel) {
96
+ customElements.upgrade(chipLabel);
97
+ chipLabel.color = "charcoal";
98
+ chipLabel.size = "xxs";
99
+ }
100
+ }
101
+ _configureTitle(event) {
102
+ const title = event.target.assignedElements().find((e) => e.localName === "sbb-title");
103
+ if (title) {
104
+ customElements.upgrade(title);
105
+ title.visualLevel = this.size === "l" ? "2" : "5";
106
+ }
107
+ }
108
+ renderTemplate() {
109
+ return html`
110
+ <span class="sbb-teaser__container">
111
+ <span class="sbb-teaser__image-wrapper">
112
+ <slot name="image"></slot>
113
+ </span>
114
+ <span class="sbb-teaser__content">
115
+ <span class="sbb-teaser__text">
116
+ <slot name="chip" @slotchange=${this._configureChip}></slot>
117
+ <slot name="title" @slotchange=${this._configureTitle}></slot>
118
+ <p class="sbb-teaser__description">
119
+ <slot @slotchange=${this._handleSlotchange}></slot>
120
+ </p>
121
+ </span>
122
+ <slot name="action"></slot>
123
+ </span>
124
+ </span>
125
+ `;
126
+ }
127
+ constructor() {
128
+ super(...arguments);
129
+ __runInitializers(this, _size_extraInitializers);
130
+ }
131
+ };
132
+ })();
133
+ };
134
+
135
+ //#endregion
136
+ //#region src/elements/teaser/teaser-static/teaser-static.component.ts
12
137
  /**
13
- * It displays an interactive image with caption.
138
+ * Non-interactive variant of the `<sbb-teaser>`.
14
139
  *
140
+ * @slot action - Slot for an interactive action, e.g. a `<sbb-secondary-button-link>` element. The action is displayed below the description.
141
+ * @slot chip - Slot for the `sbb-chip-label` element. The slot on the `sbb-chip-label` element is automatically assigned when slotted in the unnamed slot.
15
142
  * @slot image - Slot used to render the image.
143
+ * @slot title - Slot for the title. For the standard `sbb-title` element, the slot is automatically assigned when slotted in the unnamed slot.
144
+ * @slot - Use the unnamed slot to render the description, the sbb-title and the sbb-chip-label.
145
+ */
146
+ var SbbTeaserStaticElement = class extends SbbTeaserCommonElementMixin(SbbActionBaseElement) {
147
+ static {
148
+ this.elementName = "sbb-teaser-static";
149
+ }
150
+ render() {
151
+ return html$1`<div class="sbb-teaser__wrapper">${this.renderTemplate()}</div>`;
152
+ }
153
+ };
154
+
155
+ //#endregion
156
+ //#region src/elements/teaser/teaser/teaser.scss?inline
157
+ var teaser_default = ":host {\n outline: none !important;\n}\n@media (forced-colors: active) {\n :host {\n --sbb-teaser-description-color: LinkText;\n --sbb-title-color: LinkText !important;\n }\n}\n\n@media (any-hover: hover) {\n :host(:hover) {\n --sbb-teaser-scale: var(--sbb-teaser-scale-hover);\n }\n}\n.sbb-teaser__wrapper {\n cursor: var(--sbb-cursor-pointer);\n}\n\n.sbb-teaser__container {\n pointer-events: none;\n}\n\n.sbb-teaser {\n text-decoration: none;\n position: absolute;\n inset: 0;\n}\n\n@media (any-hover: hover) {\n :host(:hover) .sbb-teaser__image-wrapper {\n box-shadow: var(--sbb-box-shadow-level-9-hard);\n }\n}\n\n.sbb-teaser: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-border-radius);\n}\n@media (forced-colors: active) {\n .sbb-teaser:focus-visible {\n outline-offset: var(--_sbb-teaser-forced-colors-outline-offset);\n }\n}\n";
158
+
159
+ //#endregion
160
+ //#region src/elements/teaser/teaser/teaser.component.ts
161
+ /**
162
+ * It displays an interactive image with caption.
163
+ *
164
+ * @slot action - Slot for a static action, e.g. a `<sbb-secondary-button-static>` element. The action is displayed below the description.
16
165
  * @slot chip - Slot for the `sbb-chip-label` element. The slot on the `sbb-chip-label` element is automatically assigned when slotted in the unnamed slot.
166
+ * @slot image - Slot used to render the image.
17
167
  * @slot title - Slot for the title. For the standard `sbb-title` element, the slot is automatically assigned when slotted in the unnamed slot.
18
168
  * @slot - Use the unnamed slot to render the description, the sbb-title and the sbb-chip-label.
19
169
  */
20
- let SbbTeaserElement = (() => {
21
- let _classSuper = SbbLinkBaseElement;
22
- let _alignment_decorators;
23
- let _alignment_initializers = [];
24
- let _alignment_extraInitializers = [];
25
- return class SbbTeaserElement extends _classSuper {
26
- static {
27
- const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
28
- _alignment_decorators = [property({ reflect: true })];
29
- __esDecorate(this, null, _alignment_decorators, {
30
- kind: "accessor",
31
- name: "alignment",
32
- static: false,
33
- private: false,
34
- access: {
35
- has: (obj) => "alignment" in obj,
36
- get: (obj) => obj.alignment,
37
- set: (obj, value) => {
38
- obj.alignment = value;
39
- }
40
- },
41
- metadata: _metadata
42
- }, _alignment_initializers, _alignment_extraInitializers);
43
- if (_metadata) Object.defineProperty(this, Symbol.metadata, {
44
- enumerable: true,
45
- configurable: true,
46
- writable: true,
47
- value: _metadata
48
- });
49
- }
50
- static {
51
- this.elementName = "sbb-teaser";
52
- }
53
- static {
54
- this.styles = [screenReaderOnlyStyles, unsafeCSS(teaser_default)];
55
- }
56
- #alignment_accessor_storage = __runInitializers(this, _alignment_initializers, "after-centered");
57
- /** Teaser variant - define the position and the alignment of the text block. */
58
- get alignment() {
59
- return this.#alignment_accessor_storage;
60
- }
61
- set alignment(value) {
62
- this.#alignment_accessor_storage = value;
63
- }
64
- _handleSlotchange() {
65
- const chip = Array.from(this.children).find((el) => el.localName === "sbb-chip-label");
66
- if (chip) chip.slot = "chip";
67
- const title = Array.from(this.children).find((el) => el.localName === "sbb-title");
68
- if (title) title.slot = "title";
69
- }
70
- _configureChip(event) {
71
- const chipLabel = event.target.assignedElements().find((e) => e.localName === "sbb-chip-label");
72
- if (chipLabel) {
73
- customElements.upgrade(chipLabel);
74
- chipLabel.color = "charcoal";
75
- chipLabel.size = "xxs";
76
- }
77
- }
78
- _configureTitle(event) {
79
- const title = event.target.assignedElements().find((e) => e.localName === "sbb-title");
80
- if (title) {
81
- customElements.upgrade(title);
82
- title.visualLevel = "5";
83
- }
84
- }
85
- render() {
86
- return html`
170
+ var SbbTeaserElement = class extends SbbTeaserCommonElementMixin(SbbLinkBaseElement) {
171
+ static {
172
+ this.elementName = "sbb-teaser";
173
+ }
174
+ static {
175
+ this.styles = [screenReaderOnlyStyles, unsafeCSS(teaser_default)];
176
+ }
177
+ render() {
178
+ return html$1`
87
179
  <div class="sbb-teaser__wrapper">
88
- ${this.renderLink(html`<span class="sbb-screen-reader-only">${this.accessibilityLabel}</span>`)}
89
- ${this.renderContent()}
180
+ ${this.renderLink(html$1`<span class="sbb-screen-reader-only">${this.accessibilityLabel}</span>`)}
181
+ ${this.renderTemplate()}
90
182
  </div>
91
183
  `;
92
- }
93
- renderContent() {
94
- return html`
95
- <span class="sbb-teaser__container">
96
- <span class="sbb-teaser__image-wrapper">
97
- <slot name="image"></slot>
98
- </span>
99
- <span class="sbb-teaser__text">
100
- <slot name="chip" @slotchange=${this._configureChip}></slot>
101
- <slot name="title" @slotchange=${this._configureTitle}></slot>
102
- <p class="sbb-teaser__description">
103
- <slot @slotchange=${this._handleSlotchange}></slot>
104
- </p>
105
- </span>
106
- </span>
107
- `;
108
- }
109
- constructor() {
110
- super(...arguments);
111
- __runInitializers(this, _alignment_extraInitializers);
112
- }
113
- };
114
- })();
184
+ }
185
+ };
115
186
 
116
187
  //#endregion
117
- export { SbbTeaserElement };
188
+ export { SbbTeaserCommonElementMixin, SbbTeaserElement, SbbTeaserStaticElement };
package/index.d.ts CHANGED
@@ -61,7 +61,7 @@ import { SbbStepElement, SbbStepLabelElement, SbbStepperElement } from "./steppe
61
61
  import { SbbTableWrapperElement } from "./table.js";
62
62
  import { SbbTabElement, SbbTabGroupElement, SbbTabLabelElement, SbbTabNavBarElement } from "./tabs.js";
63
63
  import { SbbTagElement, SbbTagGroupElement } from "./tag.js";
64
- import { SbbTeaserElement } from "./teaser.js";
64
+ import { SbbTeaserElement, SbbTeaserStaticElement } from "./teaser.js";
65
65
  import { SbbTeaserHeroElement } from "./teaser-hero.js";
66
66
  import { SbbTeaserPanelElement } from "./teaser-panel.js";
67
67
  import { SbbTeaserProductElement, SbbTeaserProductStaticElement } from "./teaser-product.js";
@@ -222,6 +222,7 @@ declare global {
222
222
  var SbbTeaserPanelElement: SbbTeaserPanelElement;
223
223
  var SbbTeaserProductElement: SbbTeaserProductElement;
224
224
  var SbbTeaserProductStaticElement: SbbTeaserProductStaticElement;
225
+ var SbbTeaserStaticElement: SbbTeaserStaticElement;
225
226
  var SbbTimeInputElement: SbbTimeInputElement;
226
227
  var SbbTimetableFormDetailsElement: SbbTimetableFormDetailsElement;
227
228
  var SbbTimetableFormElement: SbbTimetableFormElement;
package/index.js CHANGED
@@ -61,7 +61,7 @@ import { SbbStepElement, SbbStepLabelElement, SbbStepperElement } from "./steppe
61
61
  import { SbbTableWrapperElement } from "./table.js";
62
62
  import { SbbTabElement, SbbTabGroupElement, SbbTabLabelElement, SbbTabNavBarElement } from "./tabs.js";
63
63
  import { SbbTagElement, SbbTagGroupElement } from "./tag.js";
64
- import { SbbTeaserElement } from "./teaser.js";
64
+ import { SbbTeaserElement, SbbTeaserStaticElement } from "./teaser.js";
65
65
  import { SbbTeaserHeroElement } from "./teaser-hero.js";
66
66
  import { SbbTeaserPanelElement } from "./teaser-panel.js";
67
67
  import { SbbTeaserProductElement, SbbTeaserProductStaticElement } from "./teaser-product.js";
@@ -222,6 +222,7 @@ globalThis.SbbTeaserHeroElement = SbbTeaserHeroElement;
222
222
  globalThis.SbbTeaserPanelElement = SbbTeaserPanelElement;
223
223
  globalThis.SbbTeaserProductElement = SbbTeaserProductElement;
224
224
  globalThis.SbbTeaserProductStaticElement = SbbTeaserProductStaticElement;
225
+ globalThis.SbbTeaserStaticElement = SbbTeaserStaticElement;
225
226
  globalThis.SbbTimeInputElement = SbbTimeInputElement;
226
227
  globalThis.SbbTimetableFormDetailsElement = SbbTimetableFormDetailsElement;
227
228
  globalThis.SbbTimetableFormElement = SbbTimetableFormElement;
package/lean-off-brand-theme.css CHANGED
@@ -1589,8 +1589,8 @@ summary {
1589
1589
  --sbb-options-panel-background-color: var(--sbb-background-color-2);
1590
1590
  --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
1591
1591
  --sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard);
1592
- --sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
1593
1592
  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
1593
+ --sbb-options-panel-offset: var(--sbb-spacing-fixed-2x);
1594
1594
  --sbb-overlay-background-color: var(--sbb-background-color-3);
1595
1595
  --sbb-overlay-height: 100%;
1596
1596
  --sbb-overlay-animation-easing: ease;
@@ -1788,10 +1788,21 @@ summary {
1788
1788
  --sbb-teaser-description-color: light-dark(var(--sbb-color-granite), var(--sbb-color-silver));
1789
1789
  --sbb-teaser-flex-direction: row;
1790
1790
  --sbb-teaser-align-items: center;
1791
- --sbb-teaser-font-size: var(--sbb-text-font-size-s);
1792
- --sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
1791
+ --sbb-teaser-font-size-m: var(--sbb-text-font-size-s);
1792
+ --sbb-teaser-font-size-l: var(--sbb-text-font-size-m);
1793
+ --sbb-teaser-font-size: var(--sbb-teaser-font-size-m);
1794
+ --sbb-teaser-gap-m: var(--sbb-spacing-fixed-4x);
1795
+ --sbb-teaser-gap-l: var(--sbb-spacing-responsive-m);
1796
+ --sbb-teaser-gap: var(--sbb-teaser-gap-m);
1797
+ --sbb-teaser-gap-below: var(--sbb-spacing-fixed-3x);
1793
1798
  --sbb-teaser-border-radius: var(--sbb-border-radius-4x);
1794
1799
  --sbb-teaser-image-width: 18.75rem;
1800
+ --sbb-teaser-title-gap-m: 0;
1801
+ --sbb-teaser-title-gap-l: var(--sbb-spacing-responsive-xxxs);
1802
+ --sbb-teaser-title-gap: var(--sbb-teaser-title-gap-m);
1803
+ --sbb-teaser-button-gap-m: var(--sbb-spacing-fixed-2x);
1804
+ --sbb-teaser-button-gap-l: var(--sbb-spacing-responsive-xxs);
1805
+ --sbb-teaser-button-gap: var(--sbb-teaser-button-gap-m);
1795
1806
  --sbb-teaser-hero-link-font-weight: 400;
1796
1807
  --sbb-panel-width: 13.9375rem;
1797
1808
  --sbb-panel-inner-height: 10.4375rem;
@@ -2811,11 +2822,12 @@ sbb-tab-nav-bar .sbb-tab-amount {
2811
2822
  transition-timing-function: var(--sbb-teaser-image-animation-easing);
2812
2823
  transition-property: filter, scale;
2813
2824
  }
2814
- :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
2825
+
2826
+ :is(sbb-teaser, sbb-teaser-static, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
2815
2827
  max-width: 100%;
2816
2828
  }
2817
2829
 
2818
- sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2830
+ :is(sbb-teaser, sbb-teaser-static) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2819
2831
  --sbb-image-object-fit: cover;
2820
2832
  --sbb-image-aspect-ratio: 4 / 3;
2821
2833
  scale: var(--sbb-teaser-scale, 1);
package/lean-safety-theme.css CHANGED
@@ -1589,8 +1589,8 @@ summary {
1589
1589
  --sbb-options-panel-background-color: var(--sbb-background-color-2);
1590
1590
  --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
1591
1591
  --sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard);
1592
- --sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
1593
1592
  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
1593
+ --sbb-options-panel-offset: var(--sbb-spacing-fixed-2x);
1594
1594
  --sbb-overlay-background-color: var(--sbb-background-color-3);
1595
1595
  --sbb-overlay-height: 100%;
1596
1596
  --sbb-overlay-animation-easing: ease;
@@ -1788,10 +1788,21 @@ summary {
1788
1788
  --sbb-teaser-description-color: light-dark(var(--sbb-color-granite), var(--sbb-color-silver));
1789
1789
  --sbb-teaser-flex-direction: row;
1790
1790
  --sbb-teaser-align-items: center;
1791
- --sbb-teaser-font-size: var(--sbb-text-font-size-s);
1792
- --sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
1791
+ --sbb-teaser-font-size-m: var(--sbb-text-font-size-s);
1792
+ --sbb-teaser-font-size-l: var(--sbb-text-font-size-m);
1793
+ --sbb-teaser-font-size: var(--sbb-teaser-font-size-m);
1794
+ --sbb-teaser-gap-m: var(--sbb-spacing-fixed-4x);
1795
+ --sbb-teaser-gap-l: var(--sbb-spacing-responsive-m);
1796
+ --sbb-teaser-gap: var(--sbb-teaser-gap-m);
1797
+ --sbb-teaser-gap-below: var(--sbb-spacing-fixed-3x);
1793
1798
  --sbb-teaser-border-radius: var(--sbb-border-radius-4x);
1794
1799
  --sbb-teaser-image-width: 18.75rem;
1800
+ --sbb-teaser-title-gap-m: 0;
1801
+ --sbb-teaser-title-gap-l: var(--sbb-spacing-responsive-xxxs);
1802
+ --sbb-teaser-title-gap: var(--sbb-teaser-title-gap-m);
1803
+ --sbb-teaser-button-gap-m: var(--sbb-spacing-fixed-2x);
1804
+ --sbb-teaser-button-gap-l: var(--sbb-spacing-responsive-xxs);
1805
+ --sbb-teaser-button-gap: var(--sbb-teaser-button-gap-m);
1795
1806
  --sbb-teaser-hero-link-font-weight: 400;
1796
1807
  --sbb-panel-width: 13.9375rem;
1797
1808
  --sbb-panel-inner-height: 10.4375rem;
@@ -2811,11 +2822,12 @@ sbb-tab-nav-bar .sbb-tab-amount {
2811
2822
  transition-timing-function: var(--sbb-teaser-image-animation-easing);
2812
2823
  transition-property: filter, scale;
2813
2824
  }
2814
- :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
2825
+
2826
+ :is(sbb-teaser, sbb-teaser-static, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
2815
2827
  max-width: 100%;
2816
2828
  }
2817
2829
 
2818
- sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2830
+ :is(sbb-teaser, sbb-teaser-static) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2819
2831
  --sbb-image-object-fit: cover;
2820
2832
  --sbb-image-aspect-ratio: 4 / 3;
2821
2833
  scale: var(--sbb-teaser-scale, 1);
package/lean-theme.css CHANGED
@@ -1589,8 +1589,8 @@ summary {
1589
1589
  --sbb-options-panel-background-color: var(--sbb-background-color-2);
1590
1590
  --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
1591
1591
  --sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard);
1592
- --sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
1593
1592
  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
1593
+ --sbb-options-panel-offset: var(--sbb-spacing-fixed-2x);
1594
1594
  --sbb-overlay-background-color: var(--sbb-background-color-3);
1595
1595
  --sbb-overlay-height: 100%;
1596
1596
  --sbb-overlay-animation-easing: ease;
@@ -1788,10 +1788,21 @@ summary {
1788
1788
  --sbb-teaser-description-color: light-dark(var(--sbb-color-granite), var(--sbb-color-silver));
1789
1789
  --sbb-teaser-flex-direction: row;
1790
1790
  --sbb-teaser-align-items: center;
1791
- --sbb-teaser-font-size: var(--sbb-text-font-size-s);
1792
- --sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
1791
+ --sbb-teaser-font-size-m: var(--sbb-text-font-size-s);
1792
+ --sbb-teaser-font-size-l: var(--sbb-text-font-size-m);
1793
+ --sbb-teaser-font-size: var(--sbb-teaser-font-size-m);
1794
+ --sbb-teaser-gap-m: var(--sbb-spacing-fixed-4x);
1795
+ --sbb-teaser-gap-l: var(--sbb-spacing-responsive-m);
1796
+ --sbb-teaser-gap: var(--sbb-teaser-gap-m);
1797
+ --sbb-teaser-gap-below: var(--sbb-spacing-fixed-3x);
1793
1798
  --sbb-teaser-border-radius: var(--sbb-border-radius-4x);
1794
1799
  --sbb-teaser-image-width: 18.75rem;
1800
+ --sbb-teaser-title-gap-m: 0;
1801
+ --sbb-teaser-title-gap-l: var(--sbb-spacing-responsive-xxxs);
1802
+ --sbb-teaser-title-gap: var(--sbb-teaser-title-gap-m);
1803
+ --sbb-teaser-button-gap-m: var(--sbb-spacing-fixed-2x);
1804
+ --sbb-teaser-button-gap-l: var(--sbb-spacing-responsive-xxs);
1805
+ --sbb-teaser-button-gap: var(--sbb-teaser-button-gap-m);
1795
1806
  --sbb-teaser-hero-link-font-weight: 400;
1796
1807
  --sbb-panel-width: 13.9375rem;
1797
1808
  --sbb-panel-inner-height: 10.4375rem;
@@ -2811,11 +2822,12 @@ sbb-tab-nav-bar .sbb-tab-amount {
2811
2822
  transition-timing-function: var(--sbb-teaser-image-animation-easing);
2812
2823
  transition-property: filter, scale;
2813
2824
  }
2814
- :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
2825
+
2826
+ :is(sbb-teaser, sbb-teaser-static, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
2815
2827
  max-width: 100%;
2816
2828
  }
2817
2829
 
2818
- sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2830
+ :is(sbb-teaser, sbb-teaser-static) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2819
2831
  --sbb-image-object-fit: cover;
2820
2832
  --sbb-image-aspect-ratio: 4 / 3;
2821
2833
  scale: var(--sbb-teaser-scale, 1);