@sbb-esta/lyne-elements 1.5.0 → 1.7.0

package/select/select.d.ts

@@ -1,6 +1,5 @@
 import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { SbbOpenCloseBaseElement } from '../core/base-elements.js';
-
 export interface SelectChange {
     type: 'value';
     value: string | string[];

package/select.js

@@ -9,7 +9,7 @@ import { isNextjs as u, getDocumentWritingMode as O, isSafari as k } from "./cor
 import { EventEmitter as p } from "./core/eventing.js";
 import { SbbUpdateSchedulerMixin as C, SbbDisabledMixin as A, SbbNegativeMixin as S } from "./core/mixins.js";
 import { isEventOnElement as f, setOverlayPosition as I, overlayGapFixCorners as P } from "./core/overlay.js";
-const $ = _`*,:before,:after{box-sizing:border-box}.sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb-options-panel-border-radius);height:var(--sbb-options-panel-border-radius);background-color:transparent}.sbb-gap-fix-corner{position:absolute;border-radius:50%;border:calc(var(--sbb-options-panel-border-radius) / 2) solid var(--sbb-options-panel-background-color);width:calc(var(--sbb-options-panel-border-radius) * 3);height:calc(var(--sbb-options-panel-border-radius) * 3);bottom:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}.sbb-gap-fix-corner#left{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host([dir=rtl]) .sbb-gap-fix-corner#left{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1);left:unset}.sbb-gap-fix-corner#right{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host([dir=rtl]) .sbb-gap-fix-corner#right{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1);right:unset}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-options-panel-position-x: 0;--sbb-options-panel-position-y: 0;--sbb-options-panel-active-option-y: 0;--sbb-options-panel-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));--sbb-options-panel-min-height: var(--sbb-options-panel-origin-height);--sbb-options-panel-visibility: visible;--sbb-options-panel-width: fit-content;--sbb-options-panel-border-radius: var(--sbb-border-radius-4x);--sbb-options-panel-options-border-radius: 0 0 var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius);--sbb-options-panel-animation-duration: var( --sbb-disable-animation-time, var(--sbb-animation-duration-4x) );--sbb-options-panel-animation-timing-function: ease;--sbb-options-panel-gap-fix-opacity: 0;--sbb-options-panel-gap-fix-transform: none;--sbb-options-panel-gap-fix-top: calc( var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius) );--sbb-options-panel-background-color: var(--sbb-color-white);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-options-panel-internal-z-index: var( --sbb-select-z-index, var(--sbb-overlay-default-z-index) );display:block}:host([negative]){--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-options-panel-background-color: var(--sbb-color-midnight);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:not([data-state])),:host([data-state=closed]){--sbb-options-panel-visibility: hidden}:host([data-state=opening]){--sbb-options-panel-animation-name: open}:host([data-state=closing]){--sbb-options-panel-animation-name: close}:host([data-state=opened]),:host([data-state=opening]){--sbb-options-panel-gap-fix-opacity: 1}:host([data-options-panel-position=below]){--sbb-options-panel-animation-transform: translateY( calc((var(--sbb-options-panel-origin-height) / 2) * -1) )}:host([data-options-panel-position=above]){--sbb-options-panel-options-border-radius: var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius) 0 0;--sbb-options-panel-gap-fix-top: var(--sbb-options-panel-max-height);--sbb-options-panel-gap-fix-transform: rotate(180deg);--sbb-options-panel-animation-transform: translateY( calc(var(--sbb-options-panel-origin-height) / 2) )}::slotted(sbb-divider){margin-block:var(--sbb-spacing-fixed-3x)}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}.sbb-select__trigger{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:calc(1em * var(--sbb-typo-line-height-body-text))}.sbb-select__trigger--placeholder{color:var(--sbb-select-placeholder-color, var(--sbb-color-metal));-webkit-text-fill-color:var(--sbb-select-placeholder-color, var(--sbb-color-metal))}.sbb-select__container{position:fixed;pointer-events:none;top:0;right:0;bottom:0;left:0;z-index:var(--sbb-options-panel-internal-z-index)}.sbb-select__gap-fix{display:flex;justify-content:space-between;position:fixed;visibility:var(--sbb-options-panel-visibility);opacity:var(--sbb-options-panel-gap-fix-opacity);background-color:transparent;width:var(--sbb-options-panel-width);height:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-gap-fix-top);left:var(--sbb-options-panel-position-x);transform:var(--sbb-options-panel-gap-fix-transform);transition:opacity var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-select__panel{display:block;position:absolute;visibility:var(--sbb-options-panel-visibility);overflow:hidden;background-color:transparent;border:none;border-radius:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-position-y);left:var(--sbb-options-panel-position-x);width:var(--sbb-options-panel-width);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-select__panel:before,.sbb-select__panel:after{content:"";display:none;position:relative;width:100%;height:var(--sbb-options-panel-origin-height);background-color:transparent;border-radius:var(--sbb-options-panel-border-radius);pointer-events:none;transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);z-index:1}:host([data-options-panel-position=below]) .sbb-select__panel{inset-block-start:calc(var(--sbb-options-panel-position-y) - var(--sbb-options-panel-origin-height))}:host(:is([data-state=opened],[data-state=opening])) .sbb-select__panel{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}:host(:is([data-state=opened],[data-state=opening])[negative]) .sbb-select__panel{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-negative-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-negative-1-color)}:host([data-options-panel-position=below]) .sbb-select__panel:before{display:block}:host([data-options-panel-position=above]) .sbb-select__panel:after{display:block}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-select__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-select__panel:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-select__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-select__panel:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-negative-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-negative-1-color)}.sbb-select__wrapper{overflow:hidden}.sbb-select__options{--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-spacing-fixed-3x);padding-inline:0;border-radius:var(--sbb-options-panel-options-border-radius);max-height:var(--sbb-options-panel-max-height);min-height:var(--sbb-options-panel-min-height);pointer-events:all;overflow-y:auto;animation-name:var(--sbb-options-panel-animation-name);animation-duration:var(--sbb-options-panel-animation-duration);animation-timing-function:var(--sbb-options-panel-animation-timing-function);padding-block:var(--sbb-spacing-fixed-2x)}.sbb-select__options::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-select__options::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-select__options::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-select__options::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-select__options::-webkit-scrollbar-button,.sbb-select__options::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-select__options{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}@media (forced-colors: active){.sbb-select__options{border:var(--sbb-border-width-1x) solid CanvasText;border-block-start:none}}@keyframes open{0%{transform:var(--sbb-options-panel-animation-transform);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes close{0%{transform:translateY(0);opacity:1}to{transform:var(--sbb-options-panel-animation-transform);opacity:0}}`;
+const $ = _`*,:before,:after{box-sizing:border-box}.sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb-options-panel-border-radius);height:var(--sbb-options-panel-border-radius);background-color:transparent}.sbb-gap-fix-corner{position:absolute;border-radius:50%;border:calc(var(--sbb-options-panel-border-radius) / 2) solid var(--sbb-options-panel-background-color);width:calc(var(--sbb-options-panel-border-radius) * 3);height:calc(var(--sbb-options-panel-border-radius) * 3);bottom:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}.sbb-gap-fix-corner#left{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host([dir=rtl]) .sbb-gap-fix-corner#left{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1);left:unset}.sbb-gap-fix-corner#right{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host([dir=rtl]) .sbb-gap-fix-corner#right{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1);right:unset}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-options-panel-position-x: 0;--sbb-options-panel-position-y: 0;--sbb-options-panel-active-option-y: 0;--sbb-options-panel-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));--sbb-options-panel-min-height: var(--sbb-options-panel-origin-height);--sbb-options-panel-visibility: visible;--sbb-options-panel-width: fit-content;--sbb-options-panel-border-radius: var(--sbb-border-radius-4x);--sbb-options-panel-options-border-radius: 0 0 var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius);--sbb-options-panel-animation-duration: var( --sbb-disable-animation-time, var(--sbb-animation-duration-4x) );--sbb-options-panel-animation-timing-function: ease;--sbb-options-panel-gap-fix-opacity: 0;--sbb-options-panel-gap-fix-transform: none;--sbb-options-panel-gap-fix-top: calc( var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius) );--sbb-options-panel-background-color: var(--sbb-color-white);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-options-panel-internal-z-index: var( --sbb-select-z-index, var(--sbb-overlay-default-z-index) );display:block}:host([negative]){--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-options-panel-background-color: var(--sbb-color-midnight);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:not([data-state])),:host([data-state=closed]){--sbb-options-panel-visibility: hidden}:host([data-state=opening]){--sbb-options-panel-animation-name: open}:host([data-state=closing]){--sbb-options-panel-animation-name: close}:host([data-state=opened]),:host([data-state=opening]){--sbb-options-panel-gap-fix-opacity: 1}:host([data-options-panel-position=below]){--sbb-options-panel-animation-transform: translateY( calc((var(--sbb-options-panel-origin-height) / 2) * -1) )}:host([data-options-panel-position=above]){--sbb-options-panel-options-border-radius: var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius) 0 0;--sbb-options-panel-gap-fix-top: var(--sbb-options-panel-max-height);--sbb-options-panel-gap-fix-transform: rotate(180deg);--sbb-options-panel-animation-transform: translateY( calc(var(--sbb-options-panel-origin-height) / 2) )}::slotted(sbb-divider){margin-block:var(--sbb-spacing-fixed-3x)}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}.sbb-select__trigger{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:calc(1em * var(--sbb-typo-line-height-body-text))}.sbb-select__trigger--placeholder{color:var(--sbb-select-placeholder-color, var(--sbb-color-metal));-webkit-text-fill-color:var(--sbb-select-placeholder-color, var(--sbb-color-metal))}.sbb-select__container{position:fixed;pointer-events:none;top:0;right:0;bottom:0;left:0;z-index:var(--sbb-options-panel-internal-z-index)}.sbb-select__gap-fix{display:flex;justify-content:space-between;position:fixed;visibility:var(--sbb-options-panel-visibility);opacity:var(--sbb-options-panel-gap-fix-opacity);background-color:transparent;width:var(--sbb-options-panel-width);height:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-gap-fix-top);left:var(--sbb-options-panel-position-x);transform:var(--sbb-options-panel-gap-fix-transform);transition:opacity var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-select__panel{display:block;position:absolute;visibility:var(--sbb-options-panel-visibility);overflow:hidden;background-color:transparent;border:none;border-radius:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-position-y);left:var(--sbb-options-panel-position-x);width:var(--sbb-options-panel-width);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-select__panel:before,.sbb-select__panel:after{content:"";display:none;position:relative;width:100%;height:var(--sbb-options-panel-origin-height);background-color:transparent;border-radius:var(--sbb-options-panel-border-radius);pointer-events:none;transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);z-index:1}:host([data-options-panel-position=below]) .sbb-select__panel{inset-block-start:calc(var(--sbb-options-panel-position-y) - var(--sbb-options-panel-origin-height))}:host(:is([data-state=opened],[data-state=opening])) .sbb-select__panel{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}:host(:is([data-state=opened],[data-state=opening])[negative]) .sbb-select__panel{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-negative-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-negative-1-color)}:host([data-options-panel-position=below]) .sbb-select__panel:before{display:block}:host([data-options-panel-position=above]) .sbb-select__panel:after{display:block}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-select__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-select__panel:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-select__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-select__panel:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-negative-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-negative-1-color)}.sbb-select__wrapper{overflow:hidden}.sbb-select__options{background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-spacing-fixed-3x);padding-inline:0;border-radius:var(--sbb-options-panel-options-border-radius);max-height:var(--sbb-options-panel-max-height);min-height:var(--sbb-options-panel-min-height);pointer-events:all;overflow-y:auto;animation-name:var(--sbb-options-panel-animation-name);animation-duration:var(--sbb-options-panel-animation-duration);animation-timing-function:var(--sbb-options-panel-animation-timing-function);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-select__options::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-select__options::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-select__options::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-select__options::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-select__options::-webkit-scrollbar-button,.sbb-select__options::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-select__options{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-select__options{padding-block:var(--sbb-spacing-fixed-2x)}@media (forced-colors: active){.sbb-select__options{border:var(--sbb-border-width-1x) solid CanvasText;border-block-start:none}}@keyframes open{0%{transform:var(--sbb-options-panel-animation-transform);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes close{0%{transform:translateY(0);opacity:1}to{transform:var(--sbb-options-panel-animation-transform);opacity:0}}`;
 var D = Object.defineProperty, L = Object.getOwnPropertyDescriptor, r = (e, t, i, s) => {
   for (var o = s > 1 ? void 0 : s ? L(t, i) : t, n = e.length - 1, l; n >= 0; n--)
     (l = e[n]) && (o = (s ? l(t, i, o) : l(o)) || o);

package/selection-expansion-panel/selection-expansion-panel.d.ts

@@ -1,5 +1,4 @@
 import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
-
 declare const SbbSelectionExpansionPanelElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbHydrationMixinType> & typeof LitElement;
 /**
  * It displays an expandable panel connected to a `sbb-checkbox` or to a `sbb-radio-button`.

package/selection-expansion-panel/selection-expansion-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selection-expansion-panel.d.ts","sourceRoot":"","sources":["../../../src/elements/selection-expansion-panel/selection-expansion-panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAcvC,OAAO,eAAe,CAAC;;AAEvB;;;;;;;;;GASG;AACH,qBAEa,iCAAkC,SAAQ,sCAA6B;IAElF,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAK1C;IAEX,yCAAyC;IACtB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAW;IAErD,qDAAqD;IACQ,SAAS,UAAS;IAE/E,iDAAiD;IACE,UAAU,UAAS;IAEtE,wCAAwC;IAExC,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,8CAA8C;IAC9C,OAAO,KAAK,QAAQ,QAEnB;IACD,OAAO,KAAK,QAAQ,GAEnB;IAED,+CAA+C;IAC/C,OAAO,KAAK,SAAS,QAEpB;IAED,wEAAwE;IACxE,OAAO,CAAC,SAAS,CAGf;IAEF,oDAAoD;IACpD,OAAO,CAAC,QAAQ,CAGd;IAEF,wEAAwE;IACxE,OAAO,CAAC,UAAU,CAGhB;IAEF,oDAAoD;IACpD,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,YAAY,CAAkB;IAEtC;;OAEG;IACH,OAAO,KAAK,WAAW,GAGtB;IAEe,iBAAiB,IAAI,IAAI;cAUtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM9E,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,KAAK;IAcb,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,eAAe;YAUT,oBAAoB;cAoBf,MAAM,IAAI,cAAc;CAmB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,+BAA+B,EAAE,iCAAiC,CAAC;KACpE;CACF"}
+{"version":3,"file":"selection-expansion-panel.d.ts","sourceRoot":"","sources":["../../../src/elements/selection-expansion-panel/selection-expansion-panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAcvC,OAAO,eAAe,CAAC;;AAEvB;;;;;;;;;GASG;AACH,qBAEa,iCAAkC,SAAQ,sCAA6B;IAElF,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAK1C;IAEX,yCAAyC;IACtB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAW;IAErD,qDAAqD;IACQ,SAAS,UAAS;IAE/E,iDAAiD;IACE,UAAU,UAAS;IAEtE,wCAAwC;IAExC,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,8CAA8C;IAC9C,OAAO,KAAK,QAAQ,QAEnB;IACD,OAAO,KAAK,QAAQ,GAEnB;IAED,+CAA+C;IAC/C,OAAO,KAAK,SAAS,QAEpB;IAED,wEAAwE;IACxE,OAAO,CAAC,SAAS,CAGf;IAEF,oDAAoD;IACpD,OAAO,CAAC,QAAQ,CAGd;IAEF,wEAAwE;IACxE,OAAO,CAAC,UAAU,CAGhB;IAEF,oDAAoD;IACpD,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,YAAY,CAAkB;IAEtC;;OAEG;IACH,OAAO,KAAK,WAAW,GAGtB;IAEe,iBAAiB,IAAI,IAAI;cAUtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM9E,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,KAAK;IAcb,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,eAAe;YAUT,oBAAoB;cAoBf,MAAM,IAAI,cAAc;CAmB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,+BAA+B,EAAE,iCAAiC,CAAC;KACpE;CACF"}

package/signet/signet.d.ts

@@ -1,6 +1,5 @@
 import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
 import { SbbProtectiveRoom } from '../core/interfaces.js';
-
 /**
  * It displays the SBB signet.
  */

package/signet.js

@@ -1,6 +1,6 @@
 import { css as l, LitElement as g, html as p } from "lit";
 import { property as c, customElement as v } from "lit/decorators.js";
-const h = l`*,:before,:after{box-sizing:border-box}:host{--sbb-signet-background-color: var(--sbb-color-red);--sbb-signet-icon-color: var(--sbb-color-white);--sbb-signet-aspect-ratio: 2 / 1;--sbb-signet-svg-container-height: auto;display:block}@media (forced-colors: active){:host{--sbb-signet-background-color: ButtonText !important;--sbb-signet-icon-color: Canvas !important}}:host([protective-room=minimal]){--sbb-signet-aspect-ratio: 108 / 64;--sbb-signet-svg-container-height: 68.75% }:host([protective-room=ideal]){--sbb-signet-aspect-ratio: 128 / 84;--sbb-signet-svg-container-height: calc(44 / 84 * 100%)}.sbb-signet{display:flex;align-items:center;justify-content:center;background-color:var(--sbb-signet-background-color);aspect-ratio:var(--sbb-signet-aspect-ratio);width:100%;height:100%}.sbb-signet .sbb-signet__svg-container{display:flex;height:var(--sbb-signet-svg-container-height)}.sbb-signet svg{width:100%;height:100%}#sbb-signet__icon{fill:var(--sbb-signet-icon-color)}`;
+const h = l`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-signet-background-color: var(--sbb-color-red);--sbb-signet-icon-color: var(--sbb-color-white);--sbb-signet-aspect-ratio: 2 / 1;--sbb-signet-svg-container-height: auto}@media (forced-colors: active){:host{--sbb-signet-background-color: ButtonText !important;--sbb-signet-icon-color: Canvas !important}}:host([protective-room=minimal]){--sbb-signet-aspect-ratio: 108 / 64;--sbb-signet-svg-container-height: 68.75% }:host([protective-room=ideal]){--sbb-signet-aspect-ratio: 128 / 84;--sbb-signet-svg-container-height: calc(44 / 84 * 100%)}.sbb-signet{display:flex;align-items:center;justify-content:center;background-color:var(--sbb-signet-background-color);aspect-ratio:var(--sbb-signet-aspect-ratio);width:100%;height:100%}.sbb-signet .sbb-signet__svg-container{display:flex;height:var(--sbb-signet-svg-container-height)}.sbb-signet svg{width:100%;height:100%}#sbb-signet__icon{fill:var(--sbb-signet-icon-color)}`;
 var m = Object.defineProperty, u = Object.getOwnPropertyDescriptor, n = (a, s, o, i) => {
   for (var t = i > 1 ? void 0 : i ? u(s, o) : s, r = a.length - 1, b; r >= 0; r--)
     (b = a[r]) && (t = (i ? b(s, o, t) : b(t)) || t);

package/skiplink-list/skiplink-list.d.ts

@@ -2,7 +2,6 @@ import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit'
 import { WithListChildren } from '../core/mixins.js';
 import { SbbBlockLinkButtonElement, SbbBlockLinkElement } from '../link.js';
 import { SbbTitleLevel } from '../title.js';
-
 declare const SbbSkiplinkListElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNamedSlotListMixinType<SbbBlockLinkElement | SbbBlockLinkButtonElement>> & typeof LitElement;
 /**
  * It displays a list of `sbb-block-link`/`sbb-block-link-button` which are visible only when focused.

package/slider/slider.d.ts

@@ -1,5 +1,4 @@
 import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
-
 declare const SbbSliderElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbDisabledMixinType> & typeof LitElement;
 /**
  * It displays an input knob that can be moved in a range.

package/slider.js

@@ -8,7 +8,7 @@ import { setOrRemoveAttribute as n } from "./core/dom.js";
 import { EventEmitter as w, forwardEventToHost as k } from "./core/eventing.js";
 import { SbbDisabledTabIndexActionMixin as x } from "./core/mixins.js";
 import "./icon.js";
-const I = u`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{--sbb-slider-line-height: .25rem;--sbb-slider-value-fraction: 0;--sbb-slider-knob-size: 1.75rem;--sbb-slider-knob-size-active: 1.9375rem;--sbb-slider-knob-border-size: .1875rem;--sbb-slider-knob-border-style: solid;--sbb-slider-knob-color: var(--sbb-color-white);--sbb-slider-knob-border-color: var(--sbb-color-red);--sbb-slider-icon-color: var(--sbb-color-black);--sbb-slider-selected-line-color: var(--sbb-color-red);--sbb-slider-selected-line-disabled-color: var(--sbb-color-smoke);--sbb-slider-line-color: var(--sbb-color-smoke);--sbb-slider-line-disabled-color: var(--sbb-color-graphite);outline:none!important;display:inline-block;min-width:9.375rem;width:min(25rem,100%)}@media (forced-colors: active){:host{--sbb-slider-selected-line-color: Highlight;--sbb-slider-line-color: CanvasText}}:host([disabled]){--sbb-slider-icon-color: var(--sbb-color-graphite);--sbb-slider-knob-border-color: var(--sbb-color-smoke);--sbb-slider-knob-border-size: var(--sbb-border-width-2x);--sbb-slider-knob-border-style: dashed}:host([readonly]){--sbb-slider-icon-color: var(--sbb-color-smoke);--sbb-slider-knob-border-color: var(--sbb-slider-selected-line-disabled-color)}:host([disabled]),:host([readonly]){--sbb-slider-line-color: var(--sbb-slider-line-disabled-color);--sbb-slider-selected-line-color: var(--sbb-slider-selected-line-disabled-color)}@media (forced-colors: active){:host([disabled]),:host([readonly]){--sbb-slider-icon-color: GrayText;--sbb-slider-selected-line-disabled-color: GrayText;--sbb-slider-line-disabled-color: GrayText}}.sbb-slider__height-container{display:flex;flex-direction:column}.sbb-slider__height-container:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-slider__wrapper{display:flex;gap:var(--sbb-spacing-fixed-2x);padding-block:calc(var(--sbb-spacing-fixed-1x) / 2);color:var(--sbb-slider-icon-color)}.sbb-slider__container{position:relative;min-height:var(--sbb-size-icon-ui-small);flex-grow:1}.sbb-slider__range-input{position:absolute;width:100%;top:0;right:0;bottom:0;left:0;opacity:0;margin:0}.sbb-slider__line{position:absolute;top:50%;transform:translateY(-50%);height:var(--sbb-slider-line-height);width:100%;background-color:var(--sbb-slider-line-color);border-radius:var(--sbb-slider-line-height);overflow:hidden;pointer-events:none}.sbb-slider__selected-line{position:relative;height:100%;background-color:var(--sbb-slider-selected-line-color);width:calc(var(--sbb-slider-value-fraction) * 100%)}.sbb-slider__knob{position:absolute;top:50%;transform:translateY(-50%);box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);width:var(--sbb-slider-knob-size);height:var(--sbb-slider-knob-size);inset-inline-start:calc(var(--sbb-slider-value-fraction) * 100% - var(--sbb-slider-knob-size) * var(--sbb-slider-value-fraction));transition-property:width,height;transition-duration:var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-1x));transition-timing-function:ease-in;background-color:var(--sbb-slider-knob-color);border:var(--sbb-slider-knob-border-size) var(--sbb-slider-knob-border-style) var(--sbb-slider-knob-border-color);border-radius:50%;pointer-events:none}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-slider__knob{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}:host(:not(:is([disabled],[readonly]))) .sbb-slider__range-input:active~.sbb-slider__knob{--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}`;
+const I = u`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{outline:none!important;display:inline-block;min-width:9.375rem;width:min(25rem,100%);--sbb-slider-line-height: .25rem;--sbb-slider-value-fraction: 0;--sbb-slider-knob-size: 1.75rem;--sbb-slider-knob-size-active: 1.9375rem;--sbb-slider-knob-border-size: .1875rem;--sbb-slider-knob-border-style: solid;--sbb-slider-knob-color: var(--sbb-color-white);--sbb-slider-knob-border-color: var(--sbb-color-red);--sbb-slider-icon-color: var(--sbb-color-black);--sbb-slider-selected-line-color: var(--sbb-color-red);--sbb-slider-selected-line-disabled-color: var(--sbb-color-smoke);--sbb-slider-line-color: var(--sbb-color-smoke);--sbb-slider-line-disabled-color: var(--sbb-color-graphite)}@media (forced-colors: active){:host{--sbb-slider-selected-line-color: Highlight;--sbb-slider-line-color: CanvasText}}:host([disabled]){--sbb-slider-icon-color: var(--sbb-color-graphite);--sbb-slider-knob-border-color: var(--sbb-color-smoke);--sbb-slider-knob-border-size: var(--sbb-border-width-2x);--sbb-slider-knob-border-style: dashed}:host([readonly]){--sbb-slider-icon-color: var(--sbb-color-smoke);--sbb-slider-knob-border-color: var(--sbb-slider-selected-line-disabled-color)}:host([disabled]),:host([readonly]){--sbb-slider-line-color: var(--sbb-slider-line-disabled-color);--sbb-slider-selected-line-color: var(--sbb-slider-selected-line-disabled-color)}@media (forced-colors: active){:host([disabled]),:host([readonly]){--sbb-slider-icon-color: GrayText;--sbb-slider-selected-line-disabled-color: GrayText;--sbb-slider-line-disabled-color: GrayText}}.sbb-slider__height-container{display:flex;flex-direction:column}.sbb-slider__height-container:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-slider__wrapper{display:flex;gap:var(--sbb-spacing-fixed-2x);padding-block:calc(var(--sbb-spacing-fixed-1x) / 2);color:var(--sbb-slider-icon-color)}.sbb-slider__container{position:relative;min-height:var(--sbb-size-icon-ui-small);flex-grow:1}.sbb-slider__range-input{position:absolute;width:100%;top:0;right:0;bottom:0;left:0;opacity:0;margin:0}.sbb-slider__line{position:absolute;top:50%;transform:translateY(-50%);height:var(--sbb-slider-line-height);width:100%;background-color:var(--sbb-slider-line-color);border-radius:var(--sbb-slider-line-height);overflow:hidden;pointer-events:none}.sbb-slider__selected-line{position:relative;height:100%;background-color:var(--sbb-slider-selected-line-color);width:calc(var(--sbb-slider-value-fraction) * 100%)}.sbb-slider__knob{position:absolute;top:50%;transform:translateY(-50%);box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);width:var(--sbb-slider-knob-size);height:var(--sbb-slider-knob-size);inset-inline-start:calc(var(--sbb-slider-value-fraction) * 100% - var(--sbb-slider-knob-size) * var(--sbb-slider-value-fraction));transition-property:width,height;transition-duration:var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-1x));transition-timing-function:ease-in;background-color:var(--sbb-slider-knob-color);border:var(--sbb-slider-knob-border-size) var(--sbb-slider-knob-border-style) var(--sbb-slider-knob-border-color);border-radius:50%;pointer-events:none}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-slider__knob{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}:host(:not(:is([disabled],[readonly]))) .sbb-slider__range-input:active~.sbb-slider__knob{--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}`;
 var C = Object.defineProperty, A = Object.getOwnPropertyDescriptor, r = (e, o, l, a) => {
   for (var i = a > 1 ? void 0 : a ? A(o, l) : o, d = e.length - 1, h; d >= 0; d--)
     (h = e[d]) && (i = (a ? h(o, l, i) : h(i)) || i);

package/standard-theme.css

@@ -1210,14 +1210,6 @@ summary {
   /**
    * Ultra (value corresponds to --sbb-breakpoint-ultra-min)
    */
-  --sbb-train-formation-wagon-width: 5rem;
-  --sbb-train-formation-wagon-height: 2.5rem;
-  --sbb-train-formation-wagon-border-radius: 0.75rem;
-  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
-  --sbb-header-height: var(--sbb-spacing-fixed-14x);
-  --sbb-time-input-max-width: 3.625rem;
-  --sbb-overlay-default-z-index: 1000;
-  --sbb-border-radius-infinity: 10000000em;
 }
 @media (forced-colors: active) {
   :root {
@@ -1322,6 +1314,16 @@ summary {
     --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-ultra);
   }
 }
+:root {
+  --sbb-train-formation-wagon-width: 5rem;
+  --sbb-train-formation-wagon-height: 2.5rem;
+  --sbb-train-formation-wagon-border-radius: 0.75rem;
+  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-header-height: var(--sbb-spacing-fixed-14x);
+  --sbb-time-input-max-width: 3.625rem;
+  --sbb-overlay-default-z-index: 1000;
+  --sbb-border-radius-infinity: 10000000em;
+}
 @media (min-width: calc(52.5rem)) {
   :root {
     --sbb-header-height: var(--sbb-spacing-fixed-24x);
@@ -1755,6 +1757,15 @@ sup {
   --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-4x);
   --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
+}
+.sbb-table tbody tr:nth-child(odd),
+.sbb-table-m tbody tr:nth-child(odd),
+.sbb-table-s tbody tr:nth-child(odd) {
+  background-color: var(--sbb-table-row-striped-color);
+}
+.sbb-table,
+.sbb-table-m,
+.sbb-table-s {
   --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
   --sbb-table-border-color: var(--sbb-color-cloud);
   --sbb-table-border-radius: var(--sbb-border-radius-4x);
@@ -1771,11 +1782,6 @@ sup {
   color: var(--sbb-table-color);
   table-layout: auto;
 }
-.sbb-table tbody tr:nth-child(odd),
-.sbb-table-m tbody tr:nth-child(odd),
-.sbb-table-s tbody tr:nth-child(odd) {
-  background-color: var(--sbb-table-row-striped-color);
-}
 .sbb-table thead > tr > th,
 .sbb-table-m thead > tr > th,
 .sbb-table-s thead > tr > th {

package/status/status.d.ts

@@ -1,6 +1,5 @@
 import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
 import { SbbTitleLevel } from '../title.js';
-
 export type SbbStatusType = 'info' | 'success' | 'warning' | 'error' | 'pending' | 'incomplete' | 'not-started' | 'in-progress';
 declare const SbbStatusElement_base: import('../core/mixins.js').AbstractConstructor<import('../icon.js').SbbIconNameMixinType> & typeof LitElement;
 /**

package/stepper/step/step.d.ts

@@ -1,6 +1,5 @@
 import { CSSResultGroup, LitElement, TemplateResult, PropertyValues } from 'lit';
 import { SbbStepLabelElement } from '../step-label.js';
-
 export type SbbStepValidateEventDetails = {
     currentIndex?: number;
     currentStep?: SbbStepElement;

package/stepper/step-label/step-label.d.ts

@@ -1,7 +1,6 @@
 import { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
 import { SbbButtonBaseElement } from '../../core/base-elements.js';
 import { SbbStepElement } from '../step.js';
-
 declare const SbbStepLabelElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & typeof SbbButtonBaseElement;
 /**
  * Combined with a `sbb-stepper`, it displays a step's label.

package/stepper/stepper/stepper.d.ts

@@ -1,7 +1,6 @@
 import { CSSResultGroup, LitElement, TemplateResult, PropertyValues } from 'lit';
 import { SbbHorizontalFrom, SbbOrientation } from '../../core/interfaces.js';
 import { SbbStepElement } from '../step.js';
-
 declare const SbbStepperElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbHydrationMixinType> & typeof LitElement;
 /**
  * Provides a structured, step-by-step workflow for user interactions.

package/table/table-wrapper/table-wrapper.d.ts

@@ -1,5 +1,4 @@
 import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
-
 declare const SbbTableWrapperElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNegativeMixinType> & typeof LitElement;
 /**
  * Wraps a table to enhance its functionality

package/tabs/tab/tab.d.ts

@@ -1,6 +1,5 @@
 import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
 import { SbbTabLabelElement } from '../tab-label.js';
-
 /**
  * Combined with a `sbb-tab-group`, it displays a tab's content.
  *

package/tabs/tab-group/tab-group.d.ts

@@ -1,7 +1,6 @@
 import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
 import { SbbTabLabelElement } from '../tab-label.js';
 import { SbbTabElement } from '../tab.js';
-
 export type SbbTabChangedEventDetails = {
     activeIndex: number;
     activeTabLabel: SbbTabLabelElement;

package/tabs/tab-label/tab-label.d.ts

@@ -1,6 +1,5 @@
 import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
 import { SbbTitleLevel } from '../../title.js';
-
 declare const SbbTabLabelElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & typeof LitElement;
 /**
  * Combined with a `sbb-tab-group`, it displays a tab's title.

package/tabs/tab-label.js

@@ -4,7 +4,7 @@ import { html as m, unsafeStatic as c } from "lit/static-html.js";
 import { slotState as p } from "../core/decorators.js";
 import { SbbDisabledMixin as h } from "../core/mixins.js";
 import { SbbIconNameMixin as u } from "../icon.js";
-const g = v`*,:before,:after{box-sizing:border-box}:host{--sbb-tab-label-height: var(--sbb-size-element-m);--sbb-tab-label-color: var(--sbb-color-granite);--sbb-tab-label-icon-color: var(--sbb-color-black);--sbb-tab-label-background-color: var(--sbb-color-white);--sbb-tab-label-cursor: pointer;--sbb-tab-label-pointer-events: unset;--sbb-tab-label-inset: 0;--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);--sbb-tab-label-marker-transform: scale(0);--sbb-tab-label-text-decoration: none;--sbb-tab-label-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-tab-label-animation-easing: var(--sbb-animation-easing);--sbb-tab-label-amount-color: var(--sbb-color-metal);display:inline-block;max-width:100%;pointer-events:var(--sbb-tab-label-pointer-events);-webkit-tap-highlight-color:transparent;outline:none!important}@media (forced-colors: active){:host{--sbb-tab-label-color: ButtonText;--sbb-tab-label-icon-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}:host([data-size=s]){--sbb-tab-label-height: var(--sbb-size-element-xs);--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xxxs)}:host([disabled]){--sbb-tab-label-icon-color: var(--sbb-color-granite);--sbb-tab-label-background-color: var(--sbb-color-milk);--sbb-tab-label-cursor: unset;--sbb-tab-label-pointer-events: none;--sbb-tab-label-text-decoration: line-through}@media (forced-colors: active){:host([disabled]){--sbb-tab-label-color: GrayText;--sbb-tab-label-icon-color: GrayText;--sbb-tab-label-amount-color: GrayText}}:host([active]:not([disabled])){--sbb-tab-label-color: var(--sbb-color-charcoal);--sbb-tab-label-icon-color: var(--sbb-tab-label-color);--sbb-tab-label-background-color: var(--sbb-color-black);--sbb-tab-label-cursor: unset;--sbb-tab-label-pointer-events: none;--sbb-tab-label-marker-transform: scale(1)}@media (forced-colors: active){:host([active]:not([disabled])){--sbb-tab-label-color: ButtonText;--sbb-tab-label-icon-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}@media (any-hover: hover){:host(:hover:not([disabled])){--sbb-tab-label-marker-transform: scale(1)}}:host(:is([data-active],:active)){--sbb-tab-label-color: var(--sbb-color-charcoal)}.sbb-tab-label__wrapper{position:relative}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-tab-label__wrapper:before{content:"";position:absolute;display:block;inset:calc((var(--sbb-focus-outline-width) + var(--sbb-focus-outline-offset)) * -1);border:var(--sbb-focus-outline-width) solid var(--sbb-focus-outline-color);border-radius:var(--sbb-border-radius-2x);z-index:1}.sbb-tab-label{position:relative;margin:0;min-height:var(--sbb-tab-label-height);display:flex;align-items:center;padding-inline:var(--sbb-tab-label-inline-padding);gap:var(--sbb-spacing-fixed-2x);-webkit-user-select:none;user-select:none;cursor:var(--sbb-tab-label-cursor);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);color:var(--sbb-tab-label-icon-color)}:host([data-has-divider]) .sbb-tab-label:after{content:"";position:absolute;inset-inline-start:0;inset-block-end:0;width:var(--sbb-tab-group-width);height:var(--sbb-border-width-1x);background-color:var(--sbb-color-cloud)}.sbb-tab-label:before{position:absolute;content:"";inset-inline:0;inset-block-end:0;height:.1875rem;background-color:var(--sbb-tab-label-color);transform:var(--sbb-tab-label-marker-transform);transition-duration:var(--sbb-tab-label-animation-duration);transition-timing-function:var(--sbb-tab-label-animation-easing);transition-property:transform,background-color;z-index:1}.sbb-tab-label__icon,.sbb-tab-label__text,.sbb-tab-label__amount{text-decoration:var(--sbb-tab-label-text-decoration)}.sbb-tab-label__icon{display:flex;flex-shrink:0;color:var(--sbb-tab-label-color);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing)}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-tab-label__icon{display:none}.sbb-tab-label__text{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--sbb-tab-label-color);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing)}:host([data-size=s]) .sbb-tab-label__text{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}:host([data-size=xl]) .sbb-tab-label__text{--sbb-text-font-size: var(--sbb-font-size-text-xl);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}.sbb-tab-label__amount{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;color:var(--sbb-tab-label-amount-color);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing)}:host(:not([data-slot-names~=amount],[amount])) .sbb-tab-label__amount{display:none}:host([data-size=s]) .sbb-tab-label__amount{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host([data-size=xl]) .sbb-tab-label__amount{--sbb-text-font-size: var(--sbb-font-size-text-xl);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}`;
+const g = v`*,:before,:after{box-sizing:border-box}:host{--sbb-tab-label-height: var(--sbb-size-element-m);--sbb-tab-label-color: var(--sbb-color-granite);--sbb-tab-label-icon-color: var(--sbb-color-black);--sbb-tab-label-background-color: var(--sbb-color-white);--sbb-tab-label-cursor: pointer;--sbb-tab-label-pointer-events: unset;--sbb-tab-label-inset: 0;--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);--sbb-tab-label-marker-transform: scale(0);--sbb-tab-label-text-decoration: none;--sbb-tab-label-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-tab-label-animation-easing: var(--sbb-animation-easing);--sbb-tab-label-amount-color: var(--sbb-color-metal);display:inline-block;max-width:100%;pointer-events:var(--sbb-tab-label-pointer-events);-webkit-tap-highlight-color:transparent;outline:none!important}@media (forced-colors: active){:host{--sbb-tab-label-color: ButtonText;--sbb-tab-label-icon-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}:host([data-size=s]){--sbb-tab-label-height: var(--sbb-size-element-xs);--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xxxs)}:host([disabled]){--sbb-tab-label-icon-color: var(--sbb-color-granite);--sbb-tab-label-background-color: var(--sbb-color-milk);--sbb-tab-label-cursor: unset;--sbb-tab-label-pointer-events: none;--sbb-tab-label-text-decoration: line-through}@media (forced-colors: active){:host([disabled]){--sbb-tab-label-color: GrayText;--sbb-tab-label-icon-color: GrayText;--sbb-tab-label-amount-color: GrayText}}:host([active]:not([disabled])){--sbb-tab-label-color: var(--sbb-color-charcoal);--sbb-tab-label-icon-color: var(--sbb-tab-label-color);--sbb-tab-label-background-color: var(--sbb-color-black);--sbb-tab-label-cursor: unset;--sbb-tab-label-pointer-events: none;--sbb-tab-label-marker-transform: scale(1)}@media (forced-colors: active){:host([active]:not([disabled])){--sbb-tab-label-color: ButtonText;--sbb-tab-label-icon-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}@media (any-hover: hover){:host(:hover:not([disabled])){--sbb-tab-label-marker-transform: scale(1)}}:host(:is([data-active],:active)){--sbb-tab-label-color: var(--sbb-color-charcoal)}.sbb-tab-label__wrapper{position:relative}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-tab-label__wrapper:before{content:"";position:absolute;display:block;inset:calc((var(--sbb-focus-outline-width) + var(--sbb-focus-outline-offset)) * -1);border:var(--sbb-focus-outline-width) solid var(--sbb-focus-outline-color);border-radius:var(--sbb-border-radius-2x);z-index:1}.sbb-tab-label{position:relative;margin:0;min-height:var(--sbb-tab-label-height);display:flex;align-items:center;padding-inline:var(--sbb-tab-label-inline-padding);gap:var(--sbb-spacing-fixed-2x);-webkit-user-select:none;user-select:none;cursor:var(--sbb-tab-label-cursor);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);color:var(--sbb-tab-label-icon-color)}:host([data-has-divider]) .sbb-tab-label:after{content:"";position:absolute;inset-inline-start:0;inset-block-end:0;width:var(--sbb-tab-group-width);height:var(--sbb-border-width-1x);background-color:var(--sbb-color-cloud)}.sbb-tab-label:before{position:absolute;content:"";inset-inline:0;inset-block-end:0;height:.1875rem;background-color:var(--sbb-tab-label-color);transform:var(--sbb-tab-label-marker-transform);transition-duration:var(--sbb-tab-label-animation-duration);transition-timing-function:var(--sbb-tab-label-animation-easing);transition-property:transform,background-color;z-index:1}.sbb-tab-label__icon,.sbb-tab-label__text,.sbb-tab-label__amount{text-decoration:var(--sbb-tab-label-text-decoration)}.sbb-tab-label__icon{display:flex;flex-shrink:0;color:var(--sbb-tab-label-color);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing)}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-tab-label__icon{display:none}.sbb-tab-label__text{color:var(--sbb-tab-label-color);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}:host([data-size=s]) .sbb-tab-label__text{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}:host([data-size=xl]) .sbb-tab-label__text{--sbb-text-font-size: var(--sbb-font-size-text-xl);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}.sbb-tab-label__amount{display:flex;color:var(--sbb-tab-label-amount-color);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host(:not([data-slot-names~=amount],[amount])) .sbb-tab-label__amount{display:none}:host([data-size=s]) .sbb-tab-label__amount{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host([data-size=xl]) .sbb-tab-label__amount{--sbb-text-font-size: var(--sbb-font-size-text-xl);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}`;
 var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (a, e, l, o) => {
   for (var t = o > 1 ? void 0 : o ? y(e, l) : e, n = a.length - 1, i; n >= 0; n--)
     (i = a[n]) && (t = (o ? i(e, l, t) : i(t)) || t);

package/tag/tag/tag.d.ts

@@ -1,6 +1,5 @@
 import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { SbbButtonBaseElement } from '../../core/base-elements.js';
-
 export type SbbTagSize = 's' | 'm';
 declare const SbbTagElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & typeof SbbButtonBaseElement;
 /**

package/tag/tag-group/tag-group.d.ts

@@ -1,7 +1,6 @@
 import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
 import { WithListChildren } from '../../core/mixins.js';
 import { SbbTagElement, SbbTagSize } from '../tag.js';
-
 declare const SbbTagGroupElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNamedSlotListMixinType<SbbTagElement>> & typeof LitElement;
 /**
  * It can be used as a container for one or more `sbb-tag`.

package/tag/tag.js

@@ -6,7 +6,7 @@ import { slotState as m } from "../core/decorators.js";
 import { EventEmitter as l } from "../core/eventing.js";
 import { SbbDisabledTabIndexActionMixin as p } from "../core/mixins.js";
 import { SbbIconNameMixin as f } from "../icon.js";
-const x = d`*,:before,:after{box-sizing:border-box}:host{--sbb-tag-border-radius: var(--sbb-border-radius-infinity);--sbb-tag-background-color: var(--sbb-color-white);--sbb-tag-border-color: var(--sbb-color-cloud);--sbb-tag-border-style: solid;--sbb-tag-border-width: var(--sbb-border-width-1x);--sbb-tag-text-color: var(--sbb-color-charcoal);--sbb-tag-amount-color: var(--sbb-color-metal);--sbb-tag-height: var(--sbb-size-element-xs);--sbb-tag-inset: 0;--sbb-tag-content-shift: translateY(0);--sbb-tag-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-tag-animation-easing: var(--sbb-animation-easing);--sbb-tag-padding-inline: var(--sbb-spacing-fixed-5x);--sbb-tag-gap: var(--sbb-spacing-fixed-2x);display:inline-block;outline:none!important;max-width:100%}@media (forced-colors: active){:host{--sbb-tag-background-color: Canvas !important;--sbb-tag-text-color: ButtonText;--sbb-tag-amount-color: ButtonText;--sbb-tag-border-color: CanvasText;--sbb-tag-border-width: var(--sbb-border-width-2x)}}:host([checked]){--sbb-tag-border-color: var(--sbb-color-charcoal);--sbb-tag-border-width: var(--sbb-border-width-2x)}@media (forced-colors: active){:host([checked]){--sbb-tag-border-color: Highlight !important}}:host([disabled]){--sbb-tag-text-color: var(--sbb-color-granite);--sbb-tag-amount-color: var(--sbb-tag-text-color);--sbb-tag-background-color: var(--sbb-color-milk);--sbb-tag-border-color: var(--sbb-color-cement);--sbb-tag-border-style: dashed}@media (forced-colors: active){:host([disabled]){--sbb-tag-text-color: GrayText;--sbb-tag-amount-color: GrayText;--sbb-tag-border-color: GrayText}}:host([checked][disabled]){--sbb-tag-border-color: var(--sbb-color-metal)}@media (any-hover: hover){:host(:hover:not([disabled],:active,[data-active])){--sbb-tag-background-color: var(--sbb-color-milk);--sbb-tag-inset: calc(var(--sbb-border-width-2x) * -1);--sbb-tag-content-shift: translateY(calc(var(--sbb-border-width-1x) * -1))}}@media (any-hover: hover) and (forced-colors: active){:host(:hover:not([disabled],:active,[data-active])){--sbb-tag-border-color: Highlight}}:host(:is(:active,[data-active]):not([disabled])){--sbb-tag-background-color: var(--sbb-color-milk);--sbb-tag-border-color: var(--sbb-color-iron);--sbb-tag-border-width: var(--sbb-border-width-2x);--sbb-tag-text-color: var(--sbb-color-iron)}@media (forced-colors: active){:host(:is(:active,[data-active]):not([disabled])){--sbb-tag-border-color: Highlight;--sbb-tag-text-color: ButtonText}}:host([size=s]){--sbb-tag-height: var(--sbb-size-element-xxxs);--sbb-tag-padding-inline: var(--sbb-spacing-fixed-3x)}.sbb-tag{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;position:relative;display:flex;align-items:center;height:var(--sbb-tag-height);max-width:100%;gap:var(--sbb-tag-gap);padding-inline:var(--sbb-tag-padding-inline);cursor:pointer;border-radius:var(--sbb-tag-border-radius);color:var(--sbb-tag-text-color);transition:color var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.sbb-tag:before{content:"";position:absolute;inset:var(--sbb-tag-inset);background-color:var(--sbb-tag-background-color);border:var(--sbb-tag-border-width) var(--sbb-tag-border-style) var(--sbb-tag-border-color);border-radius:var(--sbb-tag-border-radius);transition-duration:var(--sbb-tag-animation-duration);transition-timing-function:var(--sbb-tag-animation-easing);transition-property:inset,background-color,border-color,box-shadow}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-tag:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}:host([disabled]) .sbb-tag{cursor:unset;pointer-events:none}.sbb-tag__icon{display:flex;align-items:center;height:calc(var(--sbb-typo-line-height-body-text) * 1em);flex-shrink:0}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-tag__icon{display:none}.sbb-tag__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-tag__amount{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);color:var(--sbb-tag-amount-color)}:host(:not([data-slot-names~=amount],[amount])) .sbb-tag__amount{display:none}.sbb-tag--shift{transition:transform var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);transform:var(--sbb-tag-content-shift);will-change:transform}`;
+const x = d`*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;max-width:100%;--sbb-tag-border-radius: var(--sbb-border-radius-infinity);--sbb-tag-background-color: var(--sbb-color-white);--sbb-tag-border-color: var(--sbb-color-cloud);--sbb-tag-border-style: solid;--sbb-tag-border-width: var(--sbb-border-width-1x);--sbb-tag-text-color: var(--sbb-color-charcoal);--sbb-tag-amount-color: var(--sbb-color-metal);--sbb-tag-height: var(--sbb-size-element-xs);--sbb-tag-inset: 0;--sbb-tag-content-shift: translateY(0);--sbb-tag-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-tag-animation-easing: var(--sbb-animation-easing);--sbb-tag-padding-inline: var(--sbb-spacing-fixed-5x);--sbb-tag-gap: var(--sbb-spacing-fixed-2x)}@media (forced-colors: active){:host{--sbb-tag-background-color: Canvas !important;--sbb-tag-text-color: ButtonText;--sbb-tag-amount-color: ButtonText;--sbb-tag-border-color: CanvasText;--sbb-tag-border-width: var(--sbb-border-width-2x)}}:host([checked]){--sbb-tag-border-color: var(--sbb-color-charcoal);--sbb-tag-border-width: var(--sbb-border-width-2x)}@media (forced-colors: active){:host([checked]){--sbb-tag-border-color: Highlight !important}}:host([disabled]){--sbb-tag-text-color: var(--sbb-color-granite);--sbb-tag-amount-color: var(--sbb-tag-text-color);--sbb-tag-background-color: var(--sbb-color-milk);--sbb-tag-border-color: var(--sbb-color-cement);--sbb-tag-border-style: dashed}@media (forced-colors: active){:host([disabled]){--sbb-tag-text-color: GrayText;--sbb-tag-amount-color: GrayText;--sbb-tag-border-color: GrayText}}:host([checked][disabled]){--sbb-tag-border-color: var(--sbb-color-metal)}@media (any-hover: hover){:host(:hover:not([disabled],:active,[data-active])){--sbb-tag-background-color: var(--sbb-color-milk);--sbb-tag-inset: calc(var(--sbb-border-width-2x) * -1);--sbb-tag-content-shift: translateY(calc(var(--sbb-border-width-1x) * -1))}}@media (any-hover: hover) and (forced-colors: active){:host(:hover:not([disabled],:active,[data-active])){--sbb-tag-border-color: Highlight}}:host(:is(:active,[data-active]):not([disabled])){--sbb-tag-background-color: var(--sbb-color-milk);--sbb-tag-border-color: var(--sbb-color-iron);--sbb-tag-border-width: var(--sbb-border-width-2x);--sbb-tag-text-color: var(--sbb-color-iron)}@media (forced-colors: active){:host(:is(:active,[data-active]):not([disabled])){--sbb-tag-border-color: Highlight;--sbb-tag-text-color: ButtonText}}:host([size=s]){--sbb-tag-height: var(--sbb-size-element-xxxs);--sbb-tag-padding-inline: var(--sbb-spacing-fixed-3x)}.sbb-tag{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;position:relative;display:flex;align-items:center;height:var(--sbb-tag-height);max-width:100%;gap:var(--sbb-tag-gap);padding-inline:var(--sbb-tag-padding-inline);cursor:pointer;border-radius:var(--sbb-tag-border-radius);color:var(--sbb-tag-text-color);transition:color var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.sbb-tag:before{content:"";position:absolute;inset:var(--sbb-tag-inset);background-color:var(--sbb-tag-background-color);border:var(--sbb-tag-border-width) var(--sbb-tag-border-style) var(--sbb-tag-border-color);border-radius:var(--sbb-tag-border-radius);transition-duration:var(--sbb-tag-animation-duration);transition-timing-function:var(--sbb-tag-animation-easing);transition-property:inset,background-color,border-color,box-shadow}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-tag:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}:host([disabled]) .sbb-tag{cursor:unset;pointer-events:none}.sbb-tag__icon{display:flex;align-items:center;height:calc(var(--sbb-typo-line-height-body-text) * 1em);flex-shrink:0}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-tag__icon{display:none}.sbb-tag__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-tag__amount{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);color:var(--sbb-tag-amount-color)}:host(:not([data-slot-names~=amount],[amount])) .sbb-tag__amount{display:none}.sbb-tag--shift{transition:transform var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);transform:var(--sbb-tag-content-shift);will-change:transform}`;
 var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, r = (t, e, b, a) => {
   for (var s = a > 1 ? void 0 : a ? _(e, b) : e, i = t.length - 1, n; i >= 0; i--)
     (n = t[i]) && (s = (a ? n(e, b, s) : n(s)) || s);

package/teaser/teaser.d.ts

@@ -1,7 +1,6 @@
 import { CSSResultGroup, TemplateResult } from 'lit';
 import { SbbLinkBaseElement } from '../core/base-elements.js';
 import { SbbTitleLevel } from '../title.js';
-
 /**
  * It displays an interactive image with caption.
  *

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

@@ -0,0 +1,27 @@
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { SbbLinkBaseElement } from '../core/base-elements.js';
+/**
+ * It displays an image and an action call within a panel.
+ *
+ * @slot - Use the unnamed slot to add text content to the panel
+ * @slot link-content - Link content of the panel
+ * @slot image - The background image that can be a `sbb-image`
+ * @slot chip - The `sbb-chip` component that will be displayed on top-left corner
+ */
+export declare class SbbTeaserHeroElement extends SbbLinkBaseElement {
+    static styles: CSSResultGroup;
+    /** Panel link text. */
+    linkContent?: string;
+    /** Image src will be passed to `sbb-image`. */
+    imageSrc?: string;
+    /** Image alt text will be passed to `sbb-image`. */
+    imageAlt?: string;
+    private _chipSlotChanged;
+    protected renderTemplate(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-teaser-hero': SbbTeaserHeroElement;
+    }
+}
+//# sourceMappingURL=teaser-hero.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"teaser-hero.d.ts","sourceRoot":"","sources":["../../../src/elements/teaser-hero/teaser-hero.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAW,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAK9D,OAAO,aAAa,CAAC;AACrB,OAAO,8BAA8B,CAAC;AAEtC;;;;;;;GAOG;AACH,qBAEa,oBAAqB,SAAQ,kBAAkB;IAC1D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,uBAAuB;IACwC,WAAW,CAAC,EAAE,MAAM,CAAC;IAEpF,+CAA+C;IACF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE/D,oDAAoD;IACP,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE/D,OAAO,CAAC,gBAAgB;cAIL,cAAc,IAAI,cAAc;CA0BpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/teaser-hero.d.ts

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

package/teaser-hero.d.ts.map

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

package/teaser-hero.js

@@ -0,0 +1,58 @@
+import { css as c, nothing as l } from "lit";
+import { property as p, customElement as g } from "lit/decorators.js";
+import { html as h } from "lit/static-html.js";
+import { SbbLinkBaseElement as m } from "./core/base-elements.js";
+import { slotState as v } from "./core/decorators.js";
+import "./image.js";
+import "./link/block-link-static.js";
+const d = c`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important;--sbb-teaser-hero-brightness-hover: 1.075;--sbb-teaser-hero-chip-inset: var(--sbb-spacing-responsive-xxxs) auto auto var(--sbb-spacing-responsive-xxxs);--sbb-panel-width: 13.9375rem;--sbb-panel-inner-height: 10.4375rem;--sbb-panel-triangle-height: 2.0625rem;--sbb-panel-height: calc(var(--sbb-panel-inner-height) + 2 * var(--sbb-panel-triangle-height));--sbb-panel-line-height: var(--sbb-typo-line-height-titles);--sbb-panel-font-size: var(--sbb-typo-scale-1-5x);--sbb-panel-color: var(--sbb-color-white);--sbb-panel-background-color: var(--sbb-color-red-alpha-90);--sbb-panel-background-color-hover: var(--sbb-color-red);--sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);--sbb-panel-gap: var(--sbb-spacing-responsive-xs);--sbb-panel-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-panel-animation-easing: var(--sbb-animation-easing)}@media (min-width: 52.5rem){:host{--sbb-panel-width: 20.0625rem;--sbb-panel-inner-height: 15.006875rem;--sbb-panel-triangle-height: 2.965625rem;--sbb-panel-font-size: var(--sbb-typo-scale-2x)}}@media (min-width: 64rem){:host{--sbb-panel-width: 26.75rem;--sbb-panel-inner-height: 20.02375rem;--sbb-panel-triangle-height: 3.956875rem;--sbb-panel-font-size: var(--sbb-typo-scale-2-5x);--sbb-panel-line-height: 1.2}}@media (any-hover: hover){:host(:hover){--sbb-panel-background-color: var(--sbb-panel-background-color-hover);--sbb-teaser-hero-brightness: var(--sbb-teaser-hero-brightness-hover)}}.sbb-teaser-hero{position:relative;display:block;min-height:var(--sbb-panel-height)}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser-hero:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-teaser-hero__panel{z-index:1;position:relative;display:flex;flex-direction:column;justify-content:center;gap:var(--sbb-panel-gap);width:var(--sbb-panel-width);height:var(--sbb-panel-height);padding-block:var(--sbb-panel-triangle-height);padding-inline:var(--sbb-panel-padding-inline);clip-path:polygon(0 0,100% var(--sbb-panel-triangle-height),100% calc(100% - var(--sbb-panel-triangle-height)),0% 100%);background-color:var(--sbb-panel-background-color);transition:background var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing)}@media (any-hover: hover){.sbb-teaser-hero__panel:hover{--sbb-panel-background-color: var(--sbb-panel-background-color-hover)}}.sbb-teaser-hero__panel{position:absolute;top:50%;transform:translateY(-50%)}:host(:not([data-slot-names~=unnamed],[data-slot-names~=link-content],[link-content])) .sbb-teaser-hero__panel{display:none}.sbb-teaser-hero__panel-text{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--sbb-typo-font-family);font-size:var(--sbb-panel-font-size);font-weight:300;line-height:var(--sbb-panel-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);color:var(--sbb-panel-color);-webkit-hyphens:auto;hyphens:auto;display:inline;margin:0;padding:0}.sbb-teaser-hero__panel-link{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::slotted([slot=image]),sbb-image{will-change:filter;filter:brightness(var(--sbb-teaser-hero-brightness, 1));transition:filter var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing)}::slotted([slot=chip]){position:absolute;inset:var(--sbb-teaser-hero-chip-inset);z-index:2}`;
+var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (t, n, o, s) => {
+  for (var e = s > 1 ? void 0 : s ? f(n, o) : n, r = t.length - 1, b; r >= 0; r--)
+    (b = t[r]) && (e = (s ? b(n, o, e) : b(e)) || e);
+  return s && e && u(n, o, e), e;
+};
+let a = class extends m {
+  _chipSlotChanged() {
+    var t;
+    (t = this.querySelector("sbb-chip")) == null || t.setAttribute("color", "charcoal");
+  }
+  renderTemplate() {
+    return h`
+      <slot name="chip" @slotchange=${() => this._chipSlotChanged()}></slot>
+      <span class="sbb-teaser-hero__panel">
+        <p class="sbb-teaser-hero__panel-text">
+          <slot></slot>
+        </p>
+        ${this.href ? h`<sbb-block-link-static
+              class="sbb-teaser-hero__panel-link"
+              icon-name="chevron-small-right-small"
+              icon-placement="end"
+              size="m"
+              negative
+            >
+              <slot name="link-content">${this.linkContent}</slot>
+            </sbb-block-link-static>` : l}
+      </span>
+      <slot name="image">
+        ${this.imageSrc ? h`<sbb-image image-src=${this.imageSrc} alt=${this.imageAlt ?? l}></sbb-image>` : l}
+      </slot>
+    `;
+  }
+};
+a.styles = d;
+i([
+  p({ attribute: "link-content", reflect: !0 })
+], a.prototype, "linkContent", 2);
+i([
+  p({ attribute: "image-src" })
+], a.prototype, "imageSrc", 2);
+i([
+  p({ attribute: "image-alt" })
+], a.prototype, "imageAlt", 2);
+a = i([
+  g("sbb-teaser-hero"),
+  v()
+], a);
+export {
+  a as SbbTeaserHeroElement
+};

package/teaser-product/common/teaser-product-common.d.ts

@@ -0,0 +1,7 @@
+import { SbbActionBaseElement } from '../../core/base-elements.js';
+import { SbbNegativeMixinType, AbstractConstructor } from '../../core/mixins.js';
+export declare class SbbTeaserProductCommonElementMixinType extends SbbNegativeMixinType {
+    imageAlignment?: 'after' | 'before';
+}
+export declare const SbbTeaserProductCommonElementMixin: <T extends AbstractConstructor<SbbActionBaseElement>>(superClass: T) => AbstractConstructor<SbbTeaserProductCommonElementMixinType> & T;
+//# sourceMappingURL=teaser-product-common.d.ts.map

package/teaser-product/common/teaser-product-common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"teaser-product-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/teaser-product/common/teaser-product-common.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAExE,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACzB,MAAM,sBAAsB,CAAC;AAE9B,MAAM,CAAC,OAAO,OAAO,sCAAuC,SAAQ,oBAAoB;IAC/E,cAAc,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC5C;AAGD,eAAO,MAAM,kCAAkC,GAC7C,CAAC,SAAS,mBAAmB,CAAC,oBAAoB,CAAC,cAEvC,CAAC,KACZ,mBAAmB,CAAC,sCAAsC,CAAC,GAAG,CA6BhE,CAAC"}

package/teaser-product/common.d.ts

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

package/teaser-product/common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/elements/teaser-product/common.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC;AAElD,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,gDAAgD,CAAC"}

package/teaser-product/common.js

@@ -0,0 +1,38 @@
+import { html as i, css as d } from "lit";
+import { property as c } from "lit/decorators.js";
+import { slotState as p } from "../core/decorators.js";
+import { SbbNegativeMixin as l } from "../core/mixins.js";
+var u = Object.defineProperty, g = Object.getOwnPropertyDescriptor, n = (e, r, a, o) => {
+  for (var t = o > 1 ? void 0 : o ? g(r, a) : r, s = e.length - 1, b; s >= 0; s--)
+    (b = e[s]) && (t = (o ? b(r, a, t) : b(t)) || t);
+  return o && t && u(r, a, t), t;
+};
+const _ = (e) => {
+  let r = class extends l(e) {
+    constructor() {
+      super(...arguments), this.imageAlignment = "after";
+    }
+    renderTemplate() {
+      return i`
+        <span class="sbb-teaser-product__image-container"><slot name="image"></slot></span>
+        <span class="sbb-teaser-product__container">
+          <span class="sbb-teaser-product__content">
+            <slot></slot>
+          </span>
+          <span class="sbb-teaser-product__footnote">
+            <slot name="footnote"></slot>
+          </span>
+        </span>
+      `;
+    }
+  };
+  return n([
+    c({ attribute: "image-alignment", reflect: !0 })
+  ], r.prototype, "imageAlignment", 2), r = n([
+    p()
+  ], r), r;
+}, k = d`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-teaser-product-background-color: var(--sbb-color-cloud);--sbb-teaser-product-background-gradient-direction: to right;--sbb-teaser-product-background: var(--sbb-teaser-product-background-color);--sbb-teaser-product-border-radius: var(--sbb-border-radius-4x);--sbb-teaser-product-content-color: var(--sbb-color-iron);--sbb-teaser-product-footer-color: var(--sbb-color-anthracite);--sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-l);--sbb-teaser-product-min-height: 37.5rem;--sbb-teaser-product-background-gradient-start: 25%;--sbb-teaser-product-background-gradient-end: 75%}@media (min-width: 64rem){:host{--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-color-midnight);--sbb-teaser-product-content-color: var(--sbb-color-cloud);--sbb-teaser-product-footer-color: var(--sbb-color-cloud);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-title-text-color-normal-override: var(--sbb-color-milk)}:host([image-alignment=before]){--sbb-teaser-product-background-gradient-direction: to left}.sbb-teaser-product__image-container{display:block;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;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-teaser-product-border-radius)}}::slotted(img){display:flex;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}::slotted(sbb-image){--sbb-image-border-radius: 0;height:100%}::slotted(p.sbb-teaser-product--spacing){margin:0}::slotted(sbb-title.sbb-teaser-product--spacing){--sbb-title-margin-block-start: 0}::slotted(:is(sbb-action-group,[data-action]).sbb-teaser-product--spacing){margin-block-start:var(--sbb-spacing-responsive-xxs)}.sbb-action-base{display:block;position:relative;text-decoration:none}@media (forced-colors: active){.sbb-action-base:after{content:"";position:absolute;display:block;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-border-width-2x) solid CanvasText;border-radius:var(--sbb-teaser-product-border-radius)}}.sbb-teaser-product__container{display:block;background:var(--sbb-teaser-product-background);border-radius:0 0 var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius);padding:var(--sbb-spacing-responsive-s)}@media (min-width: 64rem){.sbb-teaser-product__container{display:grid;grid:"content ." 1fr "footnote ." auto/1fr 1fr;column-gap:var(--sbb-spacing-responsive-xxl);background:var(--sbb-teaser-product-background);border-radius:var(--sbb-teaser-product-border-radius);padding-block:var(--sbb-teaser-product-container-padding-block) 0;padding-inline:var(--sbb-spacing-responsive-xl);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)}@media (min-width: 64rem){.sbb-teaser-product__content{align-content:center;min-height:calc(var(--sbb-teaser-product-min-height) - 2 * var(--sbb-teaser-product-container-padding-block))}}.sbb-teaser-product__footnote{grid-area:footnote;display:block;padding-block-start:var(--sbb-spacing-responsive-s);color:var(--sbb-teaser-product-footer-color);--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host(:not([data-slot-names~=footnote])) .sbb-teaser-product__footnote{padding-block-start:0}@media (min-width: 64rem){.sbb-teaser-product__footnote{min-height:var(--sbb-teaser-product-container-padding-block);padding-block:var(--sbb-spacing-responsive-xs)}}`;
+export {
+  _ as SbbTeaserProductCommonElementMixin,
+  k as teaserProductCommonStyle
+};

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

@@ -0,0 +1,22 @@
+import { CSSResultGroup } from 'lit';
+import { SbbLinkBaseElement } from '../../core/base-elements.js';
+declare const SbbTeaserProductElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbTeaserProductCommonElementMixinType> & typeof SbbLinkBaseElement;
+/**
+ * Displays a text and a footnote, combined with an image, to tease a product
+ *
+ * @slot - Use this slot to provide the main content.
+ * @slot image - Use this slot to provide an image or a `sbb-image` as a background.
+ * @slot footnote - Use this slot to provide a footnote.
+ * @cssprop [--sbb-teaser-product-background-gradient-start=25%] - At which percentage the background should start getting transparent.
+ * @cssprop [--sbb-teaser-product-background-gradient-end=75%] - At which percentage the background should be fully transparent.
+ */
+export declare class SbbTeaserProductElement extends SbbTeaserProductElement_base {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-teaser-product': SbbTeaserProductElement;
+    }
+}
+export {};
+//# sourceMappingURL=teaser-product.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"teaser-product.d.ts","sourceRoot":"","sources":["../../../../src/elements/teaser-product/teaser-product/teaser-product.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;;AAKjE;;;;;;;;GAQG;AACH,qBACa,uBAAwB,SAAQ,4BAE5C;IACC,OAAuB,MAAM,EAAE,cAAc,CAAqC;CACnF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,oBAAoB,EAAE,uBAAuB,CAAC;KAC/C;CACF"}

package/teaser-product/teaser-product-static/teaser-product-static.d.ts

@@ -0,0 +1,22 @@
+import { CSSResultGroup } from 'lit';
+import { SbbActionBaseElement } from '../../core/base-elements.js';
+declare const SbbTeaserProductStaticElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbTeaserProductCommonElementMixinType> & typeof SbbActionBaseElement;
+/**
+ * Displays a text and a footnote, combined with an image, to tease a product.
+ *
+ * @slot - Use this slot to provide the main content.
+ * @slot image - Use this slot to provide an image or a `sbb-image` as a background.
+ * @slot footnote - Use this slot to provide a footnote.
+ * @cssprop [--sbb-teaser-product-background-gradient-start=25%] - At which percentage the background should start getting transparent.
+ * @cssprop [--sbb-teaser-product-background-gradient-end=75%] - At which percentage the background should be fully transparent.
+ */
+export declare class SbbTeaserProductStaticElement extends SbbTeaserProductStaticElement_base {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-teaser-product-static': SbbTeaserProductStaticElement;
+    }
+}
+export {};
+//# sourceMappingURL=teaser-product-static.d.ts.map

package/teaser-product/teaser-product-static/teaser-product-static.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"teaser-product-static.d.ts","sourceRoot":"","sources":["../../../../src/elements/teaser-product/teaser-product-static/teaser-product-static.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;;AAGnE;;;;;;;;GAQG;AACH,qBACa,6BAA8B,SAAQ,kCAElD;IACC,OAAuB,MAAM,EAAE,cAAc,CAA8B;CAC5E;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,2BAA2B,EAAE,6BAA6B,CAAC;KAC5D;CACF"}

package/teaser-product/teaser-product-static.d.ts

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

package/teaser-product/teaser-product-static.d.ts.map

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