@sbb-esta/lyne-elements 4.0.0-next.1 → 4.0.0-next.2

package/development/stepper/step-label/step-label.component.js

@@ -21,11 +21,11 @@ const style = css`:host {
   max-width: fit-content;
 }
 :host::before {
-  --sbb-text-font-size: var(--sbb-font-size-text-xxs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   position: absolute;
   top: 50%;
@@ -33,7 +33,7 @@ const style = css`:host {
   transform: translate(-50%, -50%);
   cursor: var(--sbb-step-label-cursor);
   color: var(--sbb-step-label-color);
-  inset-block-start: calc(var(--sbb-font-size-text-l) * var(--sbb-typo-line-height-body-text) / 2 + var(--sbb-border-width-1x) / 2);
+  inset-block-start: calc(var(--sbb-text-font-size-l) * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2);
   inset-inline-start: calc(var(--sbb-step-label-prefix-size) / 2);
   line-height: 1;
   z-index: 1;
@@ -48,11 +48,11 @@ const style = css`:host {
 }
 
 :host([data-selected]) {
-  --sbb-text-font-size: var(--sbb-font-size-text-xxs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   font-weight: bold;
   --sbb-step-label-color: var(--sbb-color-3);
@@ -68,7 +68,7 @@ const style = css`:host {
   --sbb-step-label-prefix-size: var(--sbb-size-element-xxxs);
 }
 :host([data-size=s])::before {
-  inset-block-start: calc(var(--sbb-font-size-text-m) * var(--sbb-typo-line-height-body-text) / 2 + var(--sbb-border-width-1x) / 2);
+  inset-block-start: calc(var(--sbb-text-font-size-m) * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2);
 }
 
 :host(:disabled) {
@@ -110,11 +110,11 @@ const style = css`:host {
 }
 
 .sbb-step-label {
-  --sbb-text-font-size: var(--sbb-font-size-text-l);
+  --sbb-text-font-size: var(--sbb-text-font-size-l);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   font-weight: bold;
   cursor: var(--sbb-step-label-cursor);
@@ -124,11 +124,11 @@ const style = css`:host {
   color: var(--sbb-step-label-color);
 }
 :host([data-size=s]) .sbb-step-label {
-  --sbb-text-font-size: var(--sbb-font-size-text-m);
+  --sbb-text-font-size: var(--sbb-text-font-size-m);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   font-weight: bold;
 }
@@ -141,7 +141,7 @@ const style = css`:host {
   justify-content: center;
   width: var(--sbb-step-label-prefix-size);
   height: var(--sbb-step-label-prefix-size);
-  inset-block-start: calc(1em * var(--sbb-typo-line-height-body-text) / 2 + var(--sbb-border-width-1x) / 2 - var(--sbb-step-label-prefix-size) / 2);
+  inset-block-start: calc(1em * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2 - var(--sbb-step-label-prefix-size) / 2);
 }
 .sbb-step-label__prefix::before {
   content: "";

package/development/tabs/tab-label/tab-label.component.js

@@ -155,29 +155,29 @@ const style = css`:host {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  --sbb-text-font-size: var(--sbb-font-size-text-m);
+  --sbb-text-font-size: var(--sbb-text-font-size-m);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   font-weight: bold;
 }
 :host([data-size=s]) .sbb-tab-label__text {
-  --sbb-text-font-size: var(--sbb-font-size-text-s);
+  --sbb-text-font-size: var(--sbb-text-font-size-s);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   font-weight: bold;
 }
 :host([data-size=xl]) .sbb-tab-label__text {
-  --sbb-text-font-size: var(--sbb-font-size-text-xl);
+  --sbb-text-font-size: var(--sbb-text-font-size-xl);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   font-weight: bold;
 }
@@ -189,30 +189,30 @@ const style = css`:host {
   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);
+  --sbb-text-font-size: var(--sbb-text-font-size-m);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
 }
 :host(:not(:is(:state(slotted-amount),[state--slotted-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);
+  --sbb-text-font-size: var(--sbb-text-font-size-s);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-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);
+  --sbb-text-font-size: var(--sbb-text-font-size-xl);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
 }`;
 let SbbTabLabelElement = (() => {

package/development/tag/tag/tag.component.js

@@ -117,11 +117,11 @@ const style = css`:host {
 }
 
 .sbb-tag {
-  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   font-weight: bold;
   position: relative;
@@ -158,7 +158,7 @@ const style = css`:host {
 .sbb-tag__icon {
   display: flex;
   align-items: center;
-  height: calc(var(--sbb-typo-line-height-body-text) * 1em);
+  height: calc(var(--sbb-typo-line-height-text) * 1em);
   flex-shrink: 0;
 }
 :host(:not(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name]))) .sbb-tag__icon {
@@ -172,11 +172,11 @@ const style = css`:host {
 }
 
 .sbb-tag__amount {
-  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   color: var(--sbb-tag-amount-color);
 }

package/development/teaser/teaser.component.js

@@ -92,11 +92,11 @@ const style = css`@charset "UTF-8";
 }
 
 .sbb-teaser__text {
-  --sbb-text-font-size: var(--sbb-font-size-text-s);
+  --sbb-text-font-size: var(--sbb-text-font-size-s);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   color: var(--sbb-teaser-description-color);
   overflow: hidden;

package/development/teaser-hero/teaser-hero.component.js

@@ -20,7 +20,7 @@ const style = css`:host {
   --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-line-height: var(--sbb-typo-line-height-heading);
   --sbb-panel-font-size: var(--sbb-typo-scale-1-5x);
   --sbb-panel-color: var(--sbb-color-1-negative);
   --sbb-panel-background-color: color-mix(in srgb, var(--sbb-color-primary) 90%, transparent);
@@ -105,7 +105,7 @@ const style = css`:host {
   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);
+  letter-spacing: var(--sbb-typo-letter-spacing-heading);
   color: var(--sbb-panel-color);
   hyphens: auto;
   display: inline;

package/development/teaser-product/common.js

@@ -1,5 +1,5 @@
 import { SbbTeaserProductCommonElementMixin } from "./common/teaser-product-common.js";
-import { t } from "../teaser-product-common-B1KK4iNu.js";
+import { t } from "../teaser-product-common-v3BvyFdH.js";
 export {
   SbbTeaserProductCommonElementMixin,
   t as teaserProductCommonStyle

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

@@ -1,6 +1,6 @@
 import { CSSResultGroup, TemplateResult } from 'lit';
 import { SbbLinkBaseElement } from '../../core/base-elements.js';
-declare const SbbTeaserProductElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbTeaserProductCommonElementMixinType> & typeof SbbLinkBaseElement;
+declare const SbbTeaserProductElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../common.js').SbbTeaserProductCommonElementMixinType> & typeof SbbLinkBaseElement;
 /**
  * Displays a text and a footnote, combined with an image, to tease a product
  *

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

@@ -1,6 +1,6 @@
 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;
+declare const SbbTeaserProductStaticElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../common.js').SbbTeaserProductCommonElementMixinType> & typeof SbbActionBaseElement;
 /**
  * Displays a text and a footnote, combined with an image, to tease a product.
  *

package/development/{teaser-product-common-B1KK4iNu.js → teaser-product-common-v3BvyFdH.js}

@@ -59,7 +59,7 @@ const teaserProductCommon = css`:host {
 }
 
 ::slotted(sbb-title.sbb-teaser-product--spacing) {
-  --sbb-title-margin-block-start: 0;
+  margin-block-start: 0;
 }
 
 ::slotted(:is(sbb-action-group, [data-action]).sbb-teaser-product--spacing) {
@@ -128,11 +128,11 @@ const teaserProductCommon = css`:host {
   grid-area: footnote;
   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);
+  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
 }
 :host(:not(:is(:state(slotted-footnote),[state--slotted-footnote]))) .sbb-teaser-product__footnote {
@@ -147,4 +147,4 @@ const teaserProductCommon = css`:host {
 export {
   teaserProductCommon as t
 };
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVhc2VyLXByb2R1Y3QtY29tbW9uLUIxS0s0aU51LmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7In0=
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVhc2VyLXByb2R1Y3QtY29tbW9uLXYzQnZ5RmRILmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7In0=

package/development/teaser-product.js

@@ -1,7 +1,7 @@
 import { SbbTeaserProductElement } from "./teaser-product/teaser-product/teaser-product.component.js";
 import { SbbTeaserProductStaticElement } from "./teaser-product/teaser-product-static/teaser-product-static.component.js";
 import { SbbTeaserProductCommonElementMixin } from "./teaser-product/common/teaser-product-common.js";
-import { t } from "./teaser-product-common-B1KK4iNu.js";
+import { t } from "./teaser-product-common-v3BvyFdH.js";
 export {
   SbbTeaserProductCommonElementMixin,
   SbbTeaserProductElement,

package/development/timetable-occupancy/timetable-occupancy.component.js

@@ -50,11 +50,11 @@ const style = css`:host {
 }
 
 .sbb-timetable-occupancy__list-item-class {
-  --sbb-text-font-size: var(--sbb-font-size-text-s);
+  --sbb-text-font-size: var(--sbb-text-font-size-s);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   line-height: 1;
   color: var(--sbb-timetable-occupancy-color);

package/development/title/title-base.js

@@ -11,12 +11,12 @@ import { property } from "lit/decorators.js";
 import { html } from "lit/static-html.js";
 import { SbbElementInternalsMixin } from "../core/mixins.js";
 const style = css`:host {
-  margin-block: var(--sbb-title-margin-block-start, 0) var(--sbb-title-margin-block-end, 0);
+  margin-block: var(--sbb-title-margin-block, 0);
   margin-inline: 0;
   font-family: var(--sbb-typo-font-family);
   font-weight: bold;
-  line-height: var(--sbb-title-line-height, var(--sbb-typo-line-height-titles));
-  letter-spacing: var(--sbb-typo-letter-spacing-titles);
+  line-height: var(--sbb-title-line-height, var(--sbb-typo-line-height-heading));
+  letter-spacing: var(--sbb-typo-letter-spacing-heading);
   font-size: var(--sbb-title-font-size);
   --sbb-title-text-color-normal: var(--sbb-title-text-color-normal-override, var(--sbb-color-3));
   display: block;
@@ -28,28 +28,28 @@ const style = css`:host {
 }
 
 :host(:where([level="1"]:not([visual-level]), [visual-level="1"])) {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-1);
+  --sbb-title-font-size: var(--sbb-title-font-size-level-1-lean, var(--sbb-heading-font-size-1));
 }
 
 :host(:where([level="2"]:not([visual-level]), [visual-level="2"])) {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-2);
+  --sbb-title-font-size: var(--sbb-title-font-size-level-2-lean, var(--sbb-heading-font-size-2));
 }
 
 :host(:where([level="3"]:not([visual-level]), [visual-level="3"])) {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-3);
+  --sbb-title-font-size: var(--sbb-title-font-size-level-3-lean, var(--sbb-heading-font-size-3));
 }
 
 :host(:where([level="4"]:not([visual-level]), [visual-level="4"])) {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-4);
+  --sbb-title-font-size: var(--sbb-title-font-size-level-4-lean, var(--sbb-heading-font-size-4));
 }
 
 :host(:where([level="5"]:not([visual-level]), [visual-level="5"])) {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-5);
+  --sbb-title-font-size: var(--sbb-title-font-size-level-5-lean, var(--sbb-heading-font-size-5));
 }
 
 :host(:where([level="6"]:not([visual-level]), [visual-level="6"])) {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-6);
-  --sbb-title-line-height: var(--sbb-typo-line-height-body-text);
+  --sbb-title-font-size: var(--sbb-title-font-size-level-6-lean, var(--sbb-heading-font-size-6));
+  --sbb-title-line-height: var(--sbb-typo-line-height-text);
 }`;
 let SbbTitleBase = (() => {
   var _level_accessor_storage, _visualLevel_accessor_storage, _a;

package/development/title/title.component.d.ts

@@ -4,8 +4,7 @@ declare const SbbTitleElement_base: import('../core/mixins.js').AbstractConstruc
 /**
  * @slot - Use the unnamed slot for the content of the title.
  *
- * @cssprop [--sbb-title-margin-block-start=var(--sbb-spacing-responsive-m)] - Margin block start of the title.
- * @cssprop [--sbb-title-margin-block-end=var(--sbb-spacing-responsive-s)] - Margin block end of the title.
+ * @cssprop [--sbb-title-margin-block] - Margin block of the title.
  */
 export declare class SbbTitleElement extends SbbTitleElement_base {
     static styles: CSSResultGroup;

package/development/title/title.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"title.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/title/title.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1C,OAAO,EAAE,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;;AAGnE;;;;;GAKG;AACH,qBAEM,eAAgB,SAAQ,oBAA8B;IAC1D,OAAuB,MAAM,EAAE,cAAc,CAAgC;IAE7E,yFAAyF;IACzF,SACyB,WAAW,EAAE,aAAa,GAAG,IAAI,CAAQ;CACnE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}
+{"version":3,"file":"title.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/title/title.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1C,OAAO,EAAE,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;;AAGnE;;;;GAIG;AACH,qBAEM,eAAgB,SAAQ,oBAA8B;IAC1D,OAAuB,MAAM,EAAE,cAAc,CAAgC;IAE7E,yFAAyF;IACzF,SACyB,WAAW,EAAE,aAAa,GAAG,IAAI,CAAQ;CACnE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/development/title/title.component.js

@@ -15,33 +15,45 @@ const style = css`:host([negative]) {
 }
 
 :host(:where([level="1"]:not([visual-level]), [visual-level="1"])) {
-  --sbb-title-margin-block-start: var(--sbb-title-margin-block-start-level-1);
-  --sbb-title-margin-block-end: var(--sbb-title-margin-block-end-level-1);
+  --sbb-title-margin-block: var(
+    --sbb-heading-margin-block-1-lean,
+    var(--sbb-heading-margin-block-1)
+  );
 }
 
 :host(:where([level="2"]:not([visual-level]), [visual-level="2"])) {
-  --sbb-title-margin-block-start: var(--sbb-title-default-margin-block-start);
-  --sbb-title-margin-block-end: var(--sbb-title-margin-block-end-level-2);
+  --sbb-title-margin-block: var(
+    --sbb-heading-margin-block-2-lean,
+    var(--sbb-heading-margin-block-2)
+  );
 }
 
 :host(:where([level="3"]:not([visual-level]), [visual-level="3"])) {
-  --sbb-title-margin-block-start: var(--sbb-title-default-margin-block-start);
-  --sbb-title-margin-block-end: var(--sbb-title-margin-block-end-level-3);
+  --sbb-title-margin-block: var(
+    --sbb-heading-margin-block-3-lean,
+    var(--sbb-heading-margin-block-3)
+  );
 }
 
 :host(:where([level="4"]:not([visual-level]), [visual-level="4"])) {
-  --sbb-title-margin-block-start: var(--sbb-title-default-margin-block-start);
-  --sbb-title-margin-block-end: var(--sbb-title-margin-block-end-level-4);
+  --sbb-title-margin-block: var(
+    --sbb-heading-margin-block-4-lean,
+    var(--sbb-heading-margin-block-4)
+  );
 }
 
 :host(:where([level="5"]:not([visual-level]), [visual-level="5"])) {
-  --sbb-title-margin-block-start: var(--sbb-title-default-margin-block-start);
-  --sbb-title-margin-block-end: var(--sbb-title-margin-block-end-level-5);
+  --sbb-title-margin-block: var(
+    --sbb-heading-margin-block-5-lean,
+    var(--sbb-heading-margin-block-5)
+  );
 }
 
 :host(:where([level="6"]:not([visual-level]), [visual-level="6"])) {
-  --sbb-title-margin-block-start: var(--sbb-title-default-margin-block-start);
-  --sbb-title-margin-block-end: var(--sbb-title-margin-block-end-level-6);
+  --sbb-title-margin-block: var(
+    --sbb-heading-margin-block-6-lean,
+    var(--sbb-heading-margin-block-6)
+  );
 }`;
 let SbbTitleElement = (() => {
   var _visualLevel_accessor_storage, _a;
@@ -81,4 +93,4 @@ let SbbTitleElement = (() => {
 export {
   SbbTitleElement
 };
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGl0bGUuY29tcG9uZW50LmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvZWxlbWVudHMvdGl0bGUvdGl0bGUuY29tcG9uZW50LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgY3VzdG9tRWxlbWVudCwgcHJvcGVydHkgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5cbmltcG9ydCB7IFNiYk5lZ2F0aXZlTWl4aW4gfSBmcm9tICcuLi9jb3JlL21peGlucy5qcyc7XG5cbmltcG9ydCB7IFNiYlRpdGxlQmFzZSwgdHlwZSBTYmJUaXRsZUxldmVsIH0gZnJvbSAnLi90aXRsZS1iYXNlLmpzJztcbmltcG9ydCBzdHlsZSBmcm9tICcuL3RpdGxlLnNjc3M/bGl0JmlubGluZSc7XG5cbi8qKlxuICogQHNsb3QgLSBVc2UgdGhlIHVubmFtZWQgc2xvdCBmb3IgdGhlIGNvbnRlbnQgb2YgdGhlIHRpdGxlLlxuICpcbiAqIEBjc3Nwcm9wIFstLXNiYi10aXRsZS1tYXJnaW4tYmxvY2stc3RhcnQ9dmFyKC0tc2JiLXNwYWNpbmctcmVzcG9uc2l2ZS1tKV0gLSBNYXJnaW4gYmxvY2sgc3RhcnQgb2YgdGhlIHRpdGxlLlxuICogQGNzc3Byb3AgWy0tc2JiLXRpdGxlLW1hcmdpbi1ibG9jay1lbmQ9dmFyKC0tc2JiLXNwYWNpbmctcmVzcG9uc2l2ZS1zKV0gLSBNYXJnaW4gYmxvY2sgZW5kIG9mIHRoZSB0aXRsZS5cbiAqL1xuZXhwb3J0XG5AY3VzdG9tRWxlbWVudCgnc2JiLXRpdGxlJylcbmNsYXNzIFNiYlRpdGxlRWxlbWVudCBleHRlbmRzIFNiYk5lZ2F0aXZlTWl4aW4oU2JiVGl0bGVCYXNlKSB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IFtTYmJUaXRsZUJhc2Uuc3R5bGVzLCBzdHlsZV07XG5cbiAgLyoqIFZpc3VhbCBsZXZlbCBmb3IgdGhlIHRpdGxlLiBPcHRpb25hbCwgaWYgbm90IHNldCwgdGhlIHZhbHVlIG9mIGxldmVsIHdpbGwgYmUgdXNlZC4gKi9cbiAgQHByb3BlcnR5KHsgYXR0cmlidXRlOiAndmlzdWFsLWxldmVsJywgcmVmbGVjdDogdHJ1ZSB9KVxuICBwdWJsaWMgb3ZlcnJpZGUgYWNjZXNzb3IgdmlzdWFsTGV2ZWw6IFNiYlRpdGxlTGV2ZWwgfCBudWxsID0gbnVsbDtcbn1cblxuZGVjbGFyZSBnbG9iYWwge1xuICBpbnRlcmZhY2UgSFRNTEVsZW1lbnRUYWdOYW1lTWFwIHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25hbWluZy1jb252ZW50aW9uXG4gICAgJ3NiYi10aXRsZSc6IFNiYlRpdGxlRWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztJQWdCTSxtQkFBZSxNQUFBOzswQkFEcEIsY0FBYyxXQUFXLENBQUM7Ozs7b0JBQ0csaUJBQWlCLFlBQVk7Ozs7QUFBckMsRUFBQSxtQkFBUSxZQUE4QjtBQUFBOztBQUsxRCx3REFBQSxrQkFBQSxNQUFBLDJCQUE2RCxJQUFJOzs7O0lBQWpFLElBQXlCLGNBQVc7QUFBQSxhQUFBLG1CQUFBO0FBQUEsSUFBQTtBQUFBLElBQXBDLElBQXlCLFlBQVcsT0FBQTtBQUFBLHlCQUFBLCtCQUFBO0FBQUEsSUFBQTtBQUFBLEtBQXBDOzsrQkFEQyxTQUFTLEVBQUUsV0FBVyxnQkFBZ0IsU0FBUyxLQUFBLENBQU0sQ0FBQztBQUN2RCxpQkFBQSxJQUFBLE1BQUEseUJBQUEsRUFBQSxNQUFBLFlBQUEsTUFBQSxlQUFBLFFBQUEsT0FBQSxTQUFBLE9BQUEsUUFBQSxFQUFBLEtBQUEsQ0FBQSxRQUFBLGlCQUFBLEtBQUEsS0FBQSxDQUFBLFFBQUEsSUFBeUIsYUFBVyxLQUFBLENBQUEsS0FBQSxVQUFBO0FBQUEsVUFBWCxjQUFXO0FBQUEsSUFBQSxLQUFBLFVBQUEsVUFBQSxHQUFBLDJCQUFBLDhCQUFBO0FBTHRDLGlCQUFBLE1BQUEsbUJBQUEsRUFBQSxPQUFBLFdBQUEsR0FBQSxrQkFBQSxFQUFBLE1BQUEsU0FBQSxNQUFBLFdBQUEsTUFBQSxVQUFBLFVBQUEsR0FBQSxNQUFBLHVCQUFBOzs7UUFDeUIsR0FBQSxTQUF5QixDQUFDLGFBQWEsUUFBUSxLQUFLLEdBRHZFLGtCQUFBLFlBQUEsdUJBQUEsR0FBZ0I7OzsifQ==
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGl0bGUuY29tcG9uZW50LmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvZWxlbWVudHMvdGl0bGUvdGl0bGUuY29tcG9uZW50LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgY3VzdG9tRWxlbWVudCwgcHJvcGVydHkgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5cbmltcG9ydCB7IFNiYk5lZ2F0aXZlTWl4aW4gfSBmcm9tICcuLi9jb3JlL21peGlucy5qcyc7XG5cbmltcG9ydCB7IFNiYlRpdGxlQmFzZSwgdHlwZSBTYmJUaXRsZUxldmVsIH0gZnJvbSAnLi90aXRsZS1iYXNlLmpzJztcbmltcG9ydCBzdHlsZSBmcm9tICcuL3RpdGxlLnNjc3M/bGl0JmlubGluZSc7XG5cbi8qKlxuICogQHNsb3QgLSBVc2UgdGhlIHVubmFtZWQgc2xvdCBmb3IgdGhlIGNvbnRlbnQgb2YgdGhlIHRpdGxlLlxuICpcbiAqIEBjc3Nwcm9wIFstLXNiYi10aXRsZS1tYXJnaW4tYmxvY2tdIC0gTWFyZ2luIGJsb2NrIG9mIHRoZSB0aXRsZS5cbiAqL1xuZXhwb3J0XG5AY3VzdG9tRWxlbWVudCgnc2JiLXRpdGxlJylcbmNsYXNzIFNiYlRpdGxlRWxlbWVudCBleHRlbmRzIFNiYk5lZ2F0aXZlTWl4aW4oU2JiVGl0bGVCYXNlKSB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IFtTYmJUaXRsZUJhc2Uuc3R5bGVzLCBzdHlsZV07XG5cbiAgLyoqIFZpc3VhbCBsZXZlbCBmb3IgdGhlIHRpdGxlLiBPcHRpb25hbCwgaWYgbm90IHNldCwgdGhlIHZhbHVlIG9mIGxldmVsIHdpbGwgYmUgdXNlZC4gKi9cbiAgQHByb3BlcnR5KHsgYXR0cmlidXRlOiAndmlzdWFsLWxldmVsJywgcmVmbGVjdDogdHJ1ZSB9KVxuICBwdWJsaWMgb3ZlcnJpZGUgYWNjZXNzb3IgdmlzdWFsTGV2ZWw6IFNiYlRpdGxlTGV2ZWwgfCBudWxsID0gbnVsbDtcbn1cblxuZGVjbGFyZSBnbG9iYWwge1xuICBpbnRlcmZhY2UgSFRNTEVsZW1lbnRUYWdOYW1lTWFwIHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25hbWluZy1jb252ZW50aW9uXG4gICAgJ3NiYi10aXRsZSc6IFNiYlRpdGxlRWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztJQWVNLG1CQUFlLE1BQUE7OzBCQURwQixjQUFjLFdBQVcsQ0FBQzs7OztvQkFDRyxpQkFBaUIsWUFBWTs7OztBQUFyQyxFQUFBLG1CQUFRLFlBQThCO0FBQUE7O0FBSzFELHdEQUFBLGtCQUFBLE1BQUEsMkJBQTZELElBQUk7Ozs7SUFBakUsSUFBeUIsY0FBVztBQUFBLGFBQUEsbUJBQUE7QUFBQSxJQUFBO0FBQUEsSUFBcEMsSUFBeUIsWUFBVyxPQUFBO0FBQUEseUJBQUEsK0JBQUE7QUFBQSxJQUFBO0FBQUEsS0FBcEM7OytCQURDLFNBQVMsRUFBRSxXQUFXLGdCQUFnQixTQUFTLEtBQUEsQ0FBTSxDQUFDO0FBQ3ZELGlCQUFBLElBQUEsTUFBQSx5QkFBQSxFQUFBLE1BQUEsWUFBQSxNQUFBLGVBQUEsUUFBQSxPQUFBLFNBQUEsT0FBQSxRQUFBLEVBQUEsS0FBQSxDQUFBLFFBQUEsaUJBQUEsS0FBQSxLQUFBLENBQUEsUUFBQSxJQUF5QixhQUFXLEtBQUEsQ0FBQSxLQUFBLFVBQUE7QUFBQSxVQUFYLGNBQVc7QUFBQSxJQUFBLEtBQUEsVUFBQSxVQUFBLEdBQUEsMkJBQUEsOEJBQUE7QUFMdEMsaUJBQUEsTUFBQSxtQkFBQSxFQUFBLE9BQUEsV0FBQSxHQUFBLGtCQUFBLEVBQUEsTUFBQSxTQUFBLE1BQUEsV0FBQSxNQUFBLFVBQUEsVUFBQSxHQUFBLE1BQUEsdUJBQUE7OztRQUN5QixHQUFBLFNBQXlCLENBQUMsYUFBYSxRQUFRLEtBQUssR0FEdkUsa0JBQUEsWUFBQSx1QkFBQSxHQUFnQjs7OyJ9

package/development/toast/toast.component.js

@@ -128,14 +128,14 @@ slot:not([name=icon]),
 }
 
 .sbb-toast__content {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-6);
-  --sbb-title-line-height: var(--sbb-typo-line-height-body-text);
-  margin-block: var(--sbb-title-margin-block-start, 0) var(--sbb-title-margin-block-end, 0);
+  --sbb-title-font-size: var(--sbb-title-font-size-level-6-lean, var(--sbb-heading-font-size-6));
+  --sbb-title-line-height: var(--sbb-typo-line-height-text);
+  margin-block: var(--sbb-title-margin-block, 0);
   margin-inline: 0;
   font-family: var(--sbb-typo-font-family);
   font-weight: bold;
-  line-height: var(--sbb-title-line-height, var(--sbb-typo-line-height-titles));
-  letter-spacing: var(--sbb-typo-letter-spacing-titles);
+  line-height: var(--sbb-title-line-height, var(--sbb-typo-line-height-heading));
+  letter-spacing: var(--sbb-typo-letter-spacing-heading);
   font-size: var(--sbb-title-font-size);
   flex: 1 1 0;
 }

package/development/toggle/toggle/toggle.component.js

@@ -74,11 +74,11 @@ const style = css`:host {
 }
 
 .sbb-toggle {
-  --sbb-text-font-size: var(--sbb-font-size-text-m);
+  --sbb-text-font-size: var(--sbb-text-font-size-m);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   display: grid;
   grid-template-columns: var(--sbb-toggle-grid-template-columns);

package/development/toggle/toggle-option/toggle-option.component.js

@@ -35,11 +35,11 @@ const style = css`:host {
 }
 
 .sbb-toggle-option {
-  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   font-weight: bold;
   display: flex;

package/development/toggle-check/toggle-check.component.js

@@ -45,7 +45,7 @@ const style = css`@charset "UTF-8";
 }
 
 :host([size=m]) {
-  --sbb-toggle-check-overall-height: calc(1em * var(--sbb-typo-line-height-body-text));
+  --sbb-toggle-check-overall-height: calc(1em * var(--sbb-typo-line-height-text));
 }
 
 :host([data-checked]) {
@@ -107,11 +107,11 @@ const style = css`@charset "UTF-8";
 }
 
 .sbb-toggle-check__container {
-  --sbb-text-font-size: var(--sbb-font-size-text-s);
+  --sbb-text-font-size: var(--sbb-text-font-size-s);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   display: flex;
   flex-direction: var(--sbb-toggle-check-flex-direction);
@@ -120,25 +120,25 @@ const style = css`@charset "UTF-8";
   width: 100%;
 }
 :host([size=m]) .sbb-toggle-check__container {
-  --sbb-text-font-size: var(--sbb-font-size-text-m);
+  --sbb-text-font-size: var(--sbb-text-font-size-m);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
 }
 :host([size=xs]) .sbb-toggle-check__container {
-  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
 }
 
 .sbb-toggle-check__label {
   flex-grow: 1;
-  padding-block-start: calc((var(--sbb-toggle-check-circle-diameter) - var(--sbb-typo-line-height-body-text) * 1em) / 2);
+  padding-block-start: calc((var(--sbb-toggle-check-circle-diameter) - var(--sbb-typo-line-height-text) * 1em) / 2);
 }
 :host(:not(:is(:state(slotted),[state--slotted]))) .sbb-toggle-check__label {
   display: none;

package/development/tooltip/tooltip.component.js

@@ -84,11 +84,11 @@ const style = css`:host {
 
 .sbb-tooltip {
   box-shadow: var(--sbb-box-shadow-level-5-soft);
-  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   border: var(--sbb-border-width-1x) solid var(--sbb-tooltip-border-color);
   border-radius: var(--sbb-tooltip-border-radius);

package/development/train/train/train.component.js

@@ -21,11 +21,11 @@ const style = css`:host {
 }
 
 .sbb-train {
-  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   display: flex;
   flex-direction: column;
@@ -35,7 +35,7 @@ const style = css`:host {
 .sbb-train::before {
   content: "";
   display: var(--sbb-train-formation-reserve-spacing-display, none);
-  height: max(var(--sbb-size-icon-ui-small), 1em * var(--sbb-typo-line-height-body-text));
+  height: max(var(--sbb-size-icon-ui-small), 1em * var(--sbb-typo-line-height-text));
 }
 
 .sbb-train__wagons {

package/development/train/train-blocked-passage/train-blocked-passage.component.js

@@ -22,7 +22,7 @@ const style = css`:host {
 .sbb-train-blocked-passage::before {
   content: "";
   display: var(--sbb-train-formation-wagon-label-display, block);
-  height: calc(var(--sbb-font-size-text-xxs) * var(--sbb-typo-line-height-body-text));
+  height: calc(var(--sbb-text-font-size-xxs) * var(--sbb-typo-line-height-text));
 }
 
 .sbb-train-blocked-passage__wrapper {

package/development/train/train-formation/train-formation.component.js

@@ -115,11 +115,11 @@ const style = css`:host {
   );
   --_gap-sum: calc((var(--_total-count) - 1) * var(--sbb-train-formation-wagon-gap));
   --_sector-width: calc(var(--_wagon-sum) + var(--_blocked-passage-sum) + var(--_gap-sum));
-  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   flex: 0 0 var(--_sector-width);
   text-align: center;