@sbb-esta/lyne-elements-dev 5.0.0-next-dev.1776760633 → 5.0.0-next-dev.1776866482

package/{block-link-common-CDrCAdGP.js → block-link-common-CiqQc2Rs.js}

@@ -5,7 +5,7 @@ import { property as a } from "lit/decorators.js";
 import { isLean as o } from "./core.js";
 import { SbbIconNameMixin as s } from "./icon.pure.js";
 //#region src/elements/link/common/block-link.scss?inline
-var c = ":host{--sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-graphite));--sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-metal));--sbb-link-color-normal: var(--sbb-color-granite);--sbb-link-color-normal: light-dark(var(--sbb-color-granite), var(--sbb-color-white));--sbb-link-color-hover: var(--sbb-color-primary125);--sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-cloud));--sbb-link-color-active: var(--sbb-color-primary150);--sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-silver));display:block}:host([negative]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-link-color-normal: var(--sbb-color-1-negative);--sbb-link-color-hover: var(--sbb-color-4-negative);--sbb-link-color-active: var(--sbb-color-silver)}:host(.sbb-active){--sbb-link-color-normal: var(--sbb-color-black);--sbb-link-color-normal: light-dark(var(--sbb-color-black), var(--sbb-color-cement));--sbb-link-text-decoration-line: underline}:host(.sbb-active[negative]){--sbb-link-color-normal: var(--sbb-color-cement);--sbb-link-text-decoration-line: underline}:host([size=xs]){--sbb-block-link-font-size: var(--sbb-text-font-size-xs)}:host([size=s]){--sbb-block-link-font-size: var(--sbb-text-font-size-s)}:host([size=m]){--sbb-block-link-font-size: var(--sbb-text-font-size-m)}.sbb-action-base{gap:var(--sbb-block-link-gap);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-block-link-font-size)}.sbb-link__icon{position:relative;height:calc(var(--sbb-typo-line-height-text) * 1em);width:var(--sbb-block-link-icon-size);flex:0 0 auto;align-self:start}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-link__icon{display:none}:host([icon-placement=end]) .sbb-link__icon{order:2}.sbb-link__icon ::slotted([slot=icon]),.sbb-link__icon sbb-icon{position:absolute;top:50%;transform:translateY(-50%)}", l = (l) => (() => {
+var c = ":host{--sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-graphite));--sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-metal));--sbb-link-color-normal: var(--sbb-color-granite);--sbb-link-color-normal: light-dark(var(--sbb-color-granite), var(--sbb-color-white));--sbb-link-color-hover: var(--sbb-color-primary125);--sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-cloud));--sbb-link-color-active: var(--sbb-color-primary150);--sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-silver));display:block}:host([negative]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-link-color-normal: var(--sbb-color-1-negative);--sbb-link-color-hover: var(--sbb-color-4-negative);--sbb-link-color-active: var(--sbb-color-silver)}:host(.sbb-active){--sbb-link-color-normal: var(--sbb-color-black);--sbb-link-color-normal: light-dark(var(--sbb-color-black), var(--sbb-color-cement));--sbb-link-text-decoration-line: underline}:host(.sbb-active[negative]){--sbb-link-color-normal: var(--sbb-color-cement);--sbb-link-text-decoration-line: underline}:host([size=xs]){--sbb-block-link-font-size: var(--sbb-text-font-size-xs)}:host([size=s]){--sbb-block-link-font-size: var(--sbb-text-font-size-s)}:host([size=m]){--sbb-block-link-font-size: var(--sbb-text-font-size-m)}.sbb-action-base{gap:var(--sbb-block-link-gap);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-block-link-font-size)}.sbb-link__icon{position:relative;height:calc(var(--sbb-typo-line-height-text) * 1em);width:var(--sbb-block-link-icon-size);flex:0 0 auto;align-self:start}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-link__icon{display:none}:host([icon-placement=end]) .sbb-link__icon{order:2}.sbb-link__icon ::slotted([slot=icon]),.sbb-link__icon sbb-icon{position:absolute;top:50%;translate:0 -50%}", l = (l) => (() => {
 	let u = e(s(l)), d, f = [], p = [], m, h = [], g = [];
 	return class extends u {
 		static {

package/core/styles/core.scss

@@ -239,6 +239,9 @@ $theme: 'standard' !default;
 @use '../../teaser/teaser.global' as teaser with (
   $theme: $theme
 );
+@use '../../teaser-panel/teaser-panel.global' as teaser-panel with (
+  $theme: $theme
+);
 @use '../../teaser-product/common/teaser-product-common.global' as teaser-product-common with (
   $theme: $theme
 );
@@ -256,6 +259,9 @@ $theme: 'standard' !default;
 @use '../../timetable-occupancy/timetable-occupancy.global' as timetable-occupancy with (
   $theme: $theme
 );
+@use '../../toggle-check/toggle-check.global' as toggle-check with (
+  $theme: $theme
+);
 @use '../../toggle/toggle/toggle.global' as toggle with (
   $theme: $theme
 );
@@ -344,11 +350,13 @@ $theme: 'standard' !default;
   @include tab-label-common.base;
   @include tag.base;
   @include teaser.base;
+  @include teaser-panel.base;
   @include teaser-product-common.base;
   @include timetable-form.base;
   @include timetable-form-details.base;
   @include timetable-form-field.base;
   @include timetable-occupancy.base;
+  @include toggle-check.base;
   @include toggle.base;
   @include toggle-option.base;
   @include tooltip.base;
@@ -371,6 +379,7 @@ $theme: 'standard' !default;
     @include slider.base-forced-colors;
     @include step-label.base-forced-colors;
     @include tag.base-forced-colors;
+    @include toggle-check.base-forced-colors;
     @include toggle.base-forced-colors;
   }
 
@@ -445,6 +454,7 @@ $theme: 'standard' !default;
     @include form-field.base-breakpoint-large;
     @include header.base-breakpoint-large;
     @include menu.base-breakpoint-large;
+    @include teaser-panel.base-breakpoint-large;
     @include teaser-product-common.base-breakpoint-large;
 
     // TODO: Remove complete block when new lean theme is complete
@@ -464,6 +474,7 @@ $theme: 'standard' !default;
 
     @include lead-container.base-breakpoint-ultra;
     @include map-container.base-breakpoint-ultra;
+    @include teaser-panel.base-breakpoint-ultra;
   }
 }
 

package/core/styles/mixins/helpers.scss

@@ -8,19 +8,19 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
+  translate: -50% -50%;
 }
 
 @mixin absolute-center-x {
   position: absolute;
   left: 50%;
-  transform: translateX(-50%);
+  translate: -50% 0;
 }
 
 @mixin absolute-center-y {
   position: absolute;
   top: 50%;
-  transform: translateY(-50%);
+  translate: 0 -50%;
 }
 
 // This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element.

package/core/styles/mixins/panel.scss

@@ -5,7 +5,9 @@
 // ----------------------------------------------------------------------------------------------------
 // Panel Mixins: Achieve the styling of a panel
 // ----------------------------------------------------------------------------------------------------
+// TODO: delete this file within the next major;
 
+// @deprecated
 @mixin panel-variables {
   --sbb-panel-width: #{functions.px-to-rem-build(223)};
   --sbb-panel-inner-height: #{functions.px-to-rem-build(167)};
@@ -31,7 +33,7 @@
     --sbb-panel-font-size: var(--sbb-typo-scale-2x);
   }
 
-  @include mediaqueries.mq($from: large) {
+  @include mediaqueries.mq($from: ultra) {
     --sbb-panel-width: #{functions.px-to-rem-build(428)};
     --sbb-panel-inner-height: #{functions.px-to-rem-build(320.38)};
     --sbb-panel-triangle-height: #{functions.px-to-rem-build(63.31)};
@@ -40,6 +42,7 @@
   }
 }
 
+// @deprecated
 @mixin panel {
   position: relative;
   display: flex;
@@ -66,6 +69,7 @@
   }
 }
 
+// @deprecated
 @mixin panel-text {
   font-family: var(--sbb-typo-font-family);
   font-size: var(--sbb-panel-font-size);

package/core.css

@@ -1743,6 +1743,18 @@ slot[name=error]::slotted(*) {
   --sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
   --sbb-teaser-border-radius: var(--sbb-border-radius-4x);
   --sbb-teaser-image-width: 18.75rem;
+  --sbb-panel-width: 13.9375rem;
+  --sbb-panel-inner-height: 10.4375rem;
+  --sbb-panel-triangle-height: 2.0625rem;
+  --sbb-panel-line-height: var(--sbb-typo-line-height-heading);
+  --sbb-panel-font-size: var(--sbb-typo-scale-1-5x);
+  --sbb-panel-font-weight: 300;
+  --sbb-panel-color: var(--sbb-color-1-negative);
+  --sbb-panel-background-color: color-mix(in srgb, var(--sbb-color-primary) 90%, transparent);
+  --sbb-panel-background-color-hover: var(--sbb-color-primary);
+  --sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);
+  --sbb-panel-gap: var(--sbb-spacing-responsive-xs);
+  --sbb-panel-animation-easing: var(--sbb-animation-easing);
   --sbb-teaser-product-background-color: var(--sbb-color-cloud);
   --sbb-teaser-product-background-color: light-dark(
     var(--sbb-color-cloud),
@@ -1781,6 +1793,21 @@ slot[name=error]::slotted(*) {
   --sbb-timetable-occupancy-font-size: var(--sbb-text-font-size-s);
   --sbb-timetable-occupancy-list-gap: var(--sbb-spacing-fixed-2x);
   --sbb-timetable-occupancy-item-gap: var(--sbb-spacing-fixed-1x);
+  --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);
+  --sbb-toggle-check-background-color: var(--sbb-background-color-4);
+  --sbb-toggle-check-icon-color: var(--sbb-toggle-check-checked-color);
+  --sbb-toggle-check-circle-background-color: var(--sbb-background-color-1);
+  --sbb-toggle-check-circle-border-color: var(--sbb-border-color-5);
+  --sbb-toggle-check-circle-border-style: solid;
+  --sbb-toggle-check-circle-diameter: 1.75rem;
+  --sbb-toggle-check-height: var(--sbb-size-icon-ui-small);
+  --sbb-toggle-check-cursor: var(--sbb-cursor-pointer);
+  --sbb-toggle-check-gap: var(--sbb-spacing-fixed-3x);
+  --sbb-toggle-check-border-width: var(--sbb-border-width-1x);
+  --sbb-toggle-check-border-radius: var(--sbb-border-radius-4x);
+  --sbb-toggle-check-shadow: var(--sbb-box-shadow-level-5-hard);
   --sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xs);
   --sbb-toggle-height: var(--sbb-size-element-m);
   --sbb-toggle-background-color: var(--sbb-background-color-4);
@@ -1873,6 +1900,8 @@ slot[name=error]::slotted(*) {
     --sbb-tag-text-color: ButtonText;
     --sbb-tag-border-color: CanvasText;
     --sbb-tag-border-width: var(--sbb-border-width-2x);
+    --sbb-toggle-check-background-color: CanvasText;
+    --sbb-toggle-check-circle-background-color: Canvas;
     --sbb-toggle-selected-option-border-width: var(--sbb-border-width-2x);
     --sbb-toggle-selected-option-border-color: Highlight;
   }
@@ -1978,6 +2007,10 @@ slot[name=error]::slotted(*) {
     --sbb-menu-max-width: 20rem;
     --sbb-menu-min-width: 11.25rem;
     --sbb-menu-transform-y: var(--sbb-spacing-fixed-2x);
+    --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);
     --sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-l) 0;
     --sbb-teaser-product-container-padding-inline: var(--sbb-spacing-responsive-xl);
     --sbb-teaser-product-content-align-content: center;
@@ -2008,6 +2041,11 @@ slot[name=error]::slotted(*) {
     --sbb-lead-container-image-ratio: 21 / 9;
     --sbb-lead-container-image-border-radius: var(--sbb-lead-container-border-radius);
     --sbb-map-container-sidebar-width: 30rem;
+    --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;
   }
 }