@sbb-esta/lyne-elements-dev 5.0.0-next.1-dev.1777393579 → 5.0.0-next.1-dev.1777448509

package/card/card/card.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../card.component-DZrNg3sQ.js";
+import { t as e } from "../../card.component-BcHiYB03.js";
 export { e as SbbCardElement };

package/card.component-BcHiYB03.js

@@ -0,0 +1,61 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { html as n, unsafeCSS as r } from "lit";
+import { property as i } from "lit/decorators.js";
+import { SbbElement as a, boxSizingStyles as o } from "./core.js";
+//#region src/elements/card/card/card.scss?inline
+var s = ":host{--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-focus-outline-color: light-dark( var(--sbb-focus-outline-color-default), var(--sbb-focus-outline-color-dark) );--sbb-card-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-1x) );display:block;position:relative;padding-inline:var(--sbb-card-padding-inline);padding-block:var(--sbb-card-padding-block);border-radius:var(--sbb-card-border-radius);background-color:var(--sbb-card-background-color);box-shadow:none;transition:box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);color:var(--sbb-card-color)}:host:after{content:\"\";position:absolute;inset:0;background-color:transparent;border:var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);border-radius:var(--sbb-card-border-radius);pointer-events:none}@media(forced-colors:active){:host{--sbb-title-color: var(--sbb-card-color)}}:host{--sbb-card-padding-block: var(--sbb-card-padding-block-default);--sbb-card-with-badge-padding-block: var(--sbb-card-with-badge-padding-block-default);--sbb-card-padding-inline: var(--sbb-card-padding-inline-default)}:host(:where([color=white])){--sbb-card-background-color: var(--sbb-background-color-1);--sbb-card-border-color: transparent}:host(:where([color=milk])){--sbb-card-background-color: var(--sbb-background-color-3);--sbb-card-border-color: transparent}:host(:where([color=transparent-bordered])){--sbb-card-background-color: transparent;--sbb-card-border-color: var(--sbb-border-color-4-inverted);--sbb-card-border-width: var(--sbb-border-width-1x);--sbb-focus-outline-color: inherit}:host(:where([color=transparent-bordered-dashed])){--sbb-card-background-color: transparent;--sbb-card-border-color: var(--sbb-color-cement);--sbb-card-border-color: light-dark(var(--sbb-color-cement), var(--sbb-color-granite));--sbb-card-border-width: var(--sbb-border-width-1x);--sbb-card-border-style: dashed;--sbb-focus-outline-color: inherit}:host(:where(:not([color]))){--sbb-card-background-color: var(--sbb-background-color-1);--sbb-card-border-color: transparent}:host(:is(:state(has-active-action),[state--has-active-action])){--sbb-card-border-color: var(--sbb-border-color-3);--sbb-card-border-width: var(--sbb-border-width-2x);--sbb-card-border-style: solid}@media(forced-colors:active){:host(:is(:state(has-active-action),[state--has-active-action])){--sbb-card-border-color: Highlight}}:host(:is(:state(has-action),[state--has-action])){--sbb-card-pointer-events: none}@media(any-hover:hover){:host(:is(:state(has-action),[state--has-action]):not(:is(:state(has-active-action),[state--has-active-action])):hover){--sbb-card-hover-shift: -.125rem;box-shadow:var(--sbb-box-shadow-level-9-hard)}}@media(any-hover:hover)and (forced-colors:active){:host(:is(:state(has-action),[state--has-action]):not(:is(:state(has-active-action),[state--has-active-action])):hover){--sbb-card-border-color: Highlight}}@media(forced-colors:active){:host(:where(:is(:state(has-action),[state--has-action]):is(:state(action-role-button),[state--action-role-button]))){--sbb-card-color: ButtonText}}@media(forced-colors:active){:host(:where(:is(:state(has-action),[state--has-action]):is(:state(action-role-link),[state--action-role-link]))){--sbb-card-color: LinkText;--sbb-card-border-color: CanvasText}}:host(.sbb-card-spacing-3x-xxs){--sbb-card-padding-block: var(--sbb-spacing-fixed-3x);--sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-3x);--sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-xxxs-xxs){--sbb-card-padding-block: var(--sbb-spacing-responsive-xxxs);--sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);--sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-xxxs-s){--sbb-card-padding-block: var(--sbb-spacing-responsive-xxxs);--sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);--sbb-card-padding-inline: var(--sbb-spacing-responsive-s)}:host(.sbb-card-spacing-4x-xxs){--sbb-card-padding-block: var(--sbb-spacing-fixed-4x);--sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-4x);--sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-xxs){--sbb-card-padding-block: var(--sbb-spacing-responsive-xxs);--sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxs);--sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-s){--sbb-card-padding-block: var(--sbb-spacing-responsive-s);--sbb-card-with-badge-padding-block: var(--sbb-spacing-responsive-s);--sbb-card-padding-inline: var(--sbb-spacing-responsive-s)}:host(.sbb-card-spacing-l){--sbb-card-padding-block: var(--sbb-spacing-responsive-l);--sbb-card-with-badge-padding-block: var(--sbb-spacing-responsive-l);--sbb-card-padding-inline: var(--sbb-spacing-responsive-l)}:host(:is(:state(slotted-badge),[state--slotted-badge])){--sbb-card-padding-block: var(--sbb-card-with-badge-padding-block);--sbb-card-badge-display: block}.sbb-card__wrapper{display:block;height:100%;pointer-events:var(--sbb-card-pointer-events, auto);translate:0 var(--sbb-card-hover-shift, 0);transition:translate var(--sbb-card-animation-duration) var(--sbb-card-animation-easing)}.sbb-card__badge-wrapper{display:var(--sbb-card-badge-display, none);overflow:hidden;position:absolute;inset:0;inset-block-end:unset;border-start-start-radius:var(--sbb-card-border-radius);border-start-end-radius:var(--sbb-card-border-radius);pointer-events:var(--sbb-card-pointer-events, auto)}::slotted(sbb-title){margin-block-start:0}", c = (() => {
+	let c = a, l, u = [], d = [];
+	return class extends c {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+			l = [i({ reflect: !0 })], e(this, null, l, {
+				kind: "accessor",
+				name: "color",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "color" in e,
+					get: (e) => e.color,
+					set: (e, t) => {
+						e.color = t;
+					}
+				},
+				metadata: t
+			}, u, d), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-card";
+		}
+		static {
+			this.styles = [o, r(s)];
+		}
+		#e = t(this, u, "white");
+		get color() {
+			return this.#e;
+		}
+		set color(e) {
+			this.#e = e;
+		}
+		render() {
+			return n`
+      <slot name="action"></slot>
+      <span class="sbb-card__wrapper">
+        <slot></slot>
+      </span>
+      <span class="sbb-card__badge-wrapper">
+        <slot name="badge"></slot>
+      </span>
+    `;
+		}
+		constructor() {
+			super(...arguments), t(this, d);
+		}
+	};
+})();
+//#endregion
+export { c as t };

package/card.js

@@ -1,7 +1,7 @@
 import { t as e } from "./card-badge.component-CEqox6TU.js";
 import { SbbCardButtonElement as t } from "./card/card-button/card-button.component.js";
 import { SbbCardLinkElement as n } from "./card/card-link/card-link.component.js";
-import { t as r } from "./card.component-DZrNg3sQ.js";
+import { t as r } from "./card.component-BcHiYB03.js";
 import { t as i } from "./card-action-common-DIMD59l_.js";
 import "./card.pure.js";
 r.define(), e.define(), t.define(), n.define();

package/card.pure.js

@@ -1,6 +1,6 @@
 import { t as e } from "./card-badge.component-CEqox6TU.js";
 import { SbbCardButtonElement as t } from "./card/card-button/card-button.component.js";
 import { SbbCardLinkElement as n } from "./card/card-link/card-link.component.js";
-import { t as r } from "./card.component-DZrNg3sQ.js";
+import { t as r } from "./card.component-BcHiYB03.js";
 import { t as i } from "./card-action-common-DIMD59l_.js";
 export { i as SbbCardActionCommonElementMixin, e as SbbCardBadgeElement, t as SbbCardButtonElement, r as SbbCardElement, n as SbbCardLinkElement };

package/core/styles/core.scss

@@ -301,6 +301,12 @@ $theme: 'standard' !default;
 @use '../../time-input/time-input.global' as time-input with (
   $theme: $theme
 );
+@use '../../title/title-common.global' as title-common with (
+  $theme: $theme
+);
+@use '../../title/title.global' as title with (
+  $theme: $theme
+);
 @use '../../toggle-check/toggle-check.global' as toggle-check with (
   $theme: $theme
 );
@@ -415,6 +421,8 @@ $theme: 'standard' !default;
   @include timetable-form-field.base;
   @include timetable-occupancy.base;
   @include time-input.base;
+  @include title-common.base;
+  @include title.base;
   @include toggle-check.base;
   @include toggle.base;
   @include toggle-option.base;
@@ -457,31 +465,6 @@ $theme: 'standard' !default;
   // Infinity border radius, can be used to achieve rounded border on start and end
   --sbb-border-radius-infinity: calc(infinity * 1px);
 
-  // TODO: Remove complete block when new lean theme is complete
-  // TODO: Also remove all occurrences of the variables in lyne-components (e.g. --sbb-title-font-size-level-1-lean)
-  // Only render the block in standard theme as fallback for CSS class usage
-  @if not string.index($theme, 'lean') {
-    &.sbb-lean {
-      --sbb-title-font-size-level-1-lean: var(--sbb-heading-font-size-2);
-      --sbb-title-font-size-level-2-lean: var(--sbb-heading-font-size-3);
-      --sbb-title-font-size-level-3-lean: var(--sbb-heading-font-size-4);
-      --sbb-title-font-size-level-4-lean: var(--sbb-heading-font-size-5);
-      --sbb-title-font-size-level-5-lean: var(--sbb-heading-font-size-6);
-      --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-75x);
-      --sbb-heading-margin-block-1-lean: var(--sbb-spacing-responsive-s)
-        var(--sbb-spacing-fixed-3x);
-      --sbb-heading-margin-block-2-lean: var(--sbb-spacing-responsive-s)
-        var(--sbb-spacing-fixed-3x);
-      --sbb-heading-margin-block-3-lean: var(--sbb-spacing-responsive-s)
-        var(--sbb-spacing-responsive-xxxs);
-      --sbb-heading-margin-block-4-lean: var(--sbb-spacing-responsive-s)
-        var(--sbb-spacing-fixed-2x);
-      --sbb-heading-margin-block-5-lean: var(--sbb-spacing-responsive-s)
-        var(--sbb-spacing-fixed-1x);
-      --sbb-heading-margin-block-6-lean: var(--sbb-spacing-responsive-s) 0;
-    }
-  }
-
   // When the input modality is either mouse or touch,
   // the focus outline should be hidden.
   // We achieve this by setting the outline style to none.
@@ -514,14 +497,6 @@ $theme: 'standard' !default;
     @include teaser-panel.base-breakpoint-large;
     @include teaser-product-common.base-breakpoint-large;
     @include time-input.base-breakpoint-large;
-
-    // TODO: Remove complete block when new lean theme is complete
-    // Only render the block in standard theme as fallback for CSS class usage
-    @if not string.index($theme, 'lean') {
-      &.sbb-lean {
-        --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
-      }
-    }
   }
 
   @include mediaqueries.mq($from: ultra) {

package/core/styles/mixins/card.scss

@@ -155,9 +155,6 @@
     var(--sbb-focus-outline-color-default),
     var(--sbb-focus-outline-color-dark)
   );
-
-  // Propagate card text color to title text color to ensure correct color in forced colors mode
-  --sbb-title-text-color-normal-override: var(--sbb-card-color);
   --sbb-card-animation-duration: var(
     --sbb-disable-animation-duration,
     var(--sbb-animation-duration-1x)
@@ -183,6 +180,11 @@
     border-radius: var(--sbb-card-border-radius);
     pointer-events: none;
   }
+
+  @include a11y.if-forced-colors {
+    // Propagate card text color to title text color to ensure correct color in forced colors mode
+    --sbb-title-color: var(--sbb-card-color);
+  }
 }
 
 @mixin card--hover {

package/core/styles/mixins/typo.scss

@@ -13,70 +13,52 @@
 }
 
 @mixin title--level-1 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-1-lean, var(--sbb-heading-font-size-1));
+  --sbb-title-font-size: var(--sbb-heading-font-size-1);
 }
 
 @mixin title--level-1-spacing {
-  --sbb-title-margin-block: var(
-    --sbb-heading-margin-block-1-lean,
-    var(--sbb-heading-margin-block-1)
-  );
+  --sbb-title-margin-block: var(--sbb-heading-margin-block-1);
 }
 
 @mixin title--level-2 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-2-lean, var(--sbb-heading-font-size-2));
+  --sbb-title-font-size: var(--sbb-heading-font-size-2);
 }
 
 @mixin title--level-2-spacing {
-  --sbb-title-margin-block: var(
-    --sbb-heading-margin-block-2-lean,
-    var(--sbb-heading-margin-block-2)
-  );
+  --sbb-title-margin-block: var(--sbb-heading-margin-block-2);
 }
 
 @mixin title--level-3 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-3-lean, var(--sbb-heading-font-size-3));
+  --sbb-title-font-size: var(--sbb-heading-font-size-3);
 }
 
 @mixin title--level-3-spacing {
-  --sbb-title-margin-block: var(
-    --sbb-heading-margin-block-3-lean,
-    var(--sbb-heading-margin-block-3)
-  );
+  --sbb-title-margin-block: var(--sbb-heading-margin-block-3);
 }
 
 @mixin title--level-4 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-4-lean, var(--sbb-heading-font-size-4));
+  --sbb-title-font-size: var(--sbb-heading-font-size-4);
 }
 
 @mixin title--level-4-spacing {
-  --sbb-title-margin-block: var(
-    --sbb-heading-margin-block-4-lean,
-    var(--sbb-heading-margin-block-4)
-  );
+  --sbb-title-margin-block: var(--sbb-heading-margin-block-4);
 }
 
 @mixin title--level-5 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-5-lean, var(--sbb-heading-font-size-5));
+  --sbb-title-font-size: var(--sbb-heading-font-size-5);
 }
 
 @mixin title--level-5-spacing {
-  --sbb-title-margin-block: var(
-    --sbb-heading-margin-block-5-lean,
-    var(--sbb-heading-margin-block-5)
-  );
+  --sbb-title-margin-block: var(--sbb-heading-margin-block-5);
 }
 
 @mixin title--level-6 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-6-lean, var(--sbb-heading-font-size-6));
+  --sbb-title-font-size: var(--sbb-heading-font-size-6);
   --sbb-title-line-height: var(--sbb-typo-line-height-text);
 }
 
 @mixin title--level-6-spacing {
-  --sbb-title-margin-block: var(
-    --sbb-heading-margin-block-6-lean,
-    var(--sbb-heading-margin-block-6)
-  );
+  --sbb-title-margin-block: var(--sbb-heading-margin-block-6);
 }
 
 @mixin title-1($exclude-spacing: false) {
@@ -128,7 +110,7 @@
 }
 
 @mixin title--negative {
-  --sbb-title-text-color-normal: var(--sbb-color-3-negative);
+  --sbb-title-color: var(--sbb-color-3-negative);
 }
 
 // ----------------------------------------------------------------------------------------------------

package/core.css

@@ -1937,6 +1937,9 @@ slot[name=error]::slotted(*) {
   --sbb-timetable-occupancy-list-gap: var(--sbb-spacing-fixed-2x);
   --sbb-timetable-occupancy-item-gap: var(--sbb-spacing-fixed-1x);
   --sbb-time-input-max-width: 3.625rem;
+  --sbb-title-font-size: var(--sbb-heading-font-size-1);
+  --sbb-title-color: var(--sbb-color-3);
+  --sbb-title-margin-block: var(--sbb-heading-margin-block-1);
   --sbb-toggle-check-font-size: var(--sbb-text-font-size-s);
   --sbb-toggle-check-color: var(--sbb-color-2);
   --sbb-toggle-check-checked-color: var(--sbb-color-primary);
@@ -2074,25 +2077,6 @@ slot[name=error]::slotted(*) {
   --sbb-cursor-pointer: pointer;
   --sbb-border-radius-infinity: calc(infinity * 1px);
 }
-:root.sbb-lean {
-  --sbb-title-font-size-level-1-lean: var(--sbb-heading-font-size-2);
-  --sbb-title-font-size-level-2-lean: var(--sbb-heading-font-size-3);
-  --sbb-title-font-size-level-3-lean: var(--sbb-heading-font-size-4);
-  --sbb-title-font-size-level-4-lean: var(--sbb-heading-font-size-5);
-  --sbb-title-font-size-level-5-lean: var(--sbb-heading-font-size-6);
-  --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-75x);
-  --sbb-heading-margin-block-1-lean: var(--sbb-spacing-responsive-s)
-    var(--sbb-spacing-fixed-3x);
-  --sbb-heading-margin-block-2-lean: var(--sbb-spacing-responsive-s)
-    var(--sbb-spacing-fixed-3x);
-  --sbb-heading-margin-block-3-lean: var(--sbb-spacing-responsive-s)
-    var(--sbb-spacing-responsive-xxxs);
-  --sbb-heading-margin-block-4-lean: var(--sbb-spacing-responsive-s)
-    var(--sbb-spacing-fixed-2x);
-  --sbb-heading-margin-block-5-lean: var(--sbb-spacing-responsive-s)
-    var(--sbb-spacing-fixed-1x);
-  --sbb-heading-margin-block-6-lean: var(--sbb-spacing-responsive-s) 0;
-}
 :root:where(.sbb-focus-modality-mouse, .sbb-focus-modality-touch) {
   --sbb-focus-outline-style: none;
 }
@@ -2194,9 +2178,6 @@ slot[name=error]::slotted(*) {
     --sbb-teaser-product-footer-min-height: var(--sbb-teaser-product-container-spacing);
     --sbb-time-input-max-width: 4.0625rem;
   }
-  :root.sbb-lean {
-    --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
-  }
 }
 @media (min-width: calc(90rem)) {
   :root {