@sbb-esta/lyne-elements-dev 4.7.0-dev.1773743316 → 4.7.0-dev.1773744201

package/core/styles/core.scss

@@ -160,6 +160,9 @@ $theme: 'standard' !default;
   with (
   $theme: $theme
 );
+@use '../../notification/notification.global' as notification with (
+  $theme: $theme
+);
 @use '../../option/option/option.global' as option with (
   $theme: $theme
 );
@@ -249,6 +252,7 @@ $theme: 'standard' !default;
   @include message.base;
   @include mini-calendar-day.base;
   @include mini-calendar-month.base;
+  @include notification.base;
   @include option.base;
   @include option-hint.base;
   @include optgroup.base;
@@ -334,6 +338,7 @@ $theme: 'standard' !default;
 
     @include dialog.base-breakpoint-small;
     @include footer.base-breakpoint-small;
+    @include notification.base-breakpoint-small;
   }
 
   @include mediaqueries.mq($from: large) {
@@ -661,16 +666,6 @@ sbb-toggle:has(:focus-visible) {
   @include a11y.focus-outline;
 }
 
-sbb-notification:has(sbb-title) {
-  --_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-5);
-  --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-heading);
-
-  &[size='s'] {
-    --_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-6);
-    --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-text);
-  }
-}
-
 .sbb-overlay-outlet {
   position: fixed;
   inset: 0;

package/core.css

@@ -1609,6 +1609,18 @@
     var(--sbb-color-granite),
     var(--sbb-color-silver)
   );
+  --sbb-notification-base-border-radius: var(--sbb-border-radius-4x);
+  --sbb-notification-border-width: var(--sbb-border-width-1x);
+  --sbb-notification-color: var(--sbb-color-2-negative-inverted);
+  --sbb-notification-icon-align-self: center;
+  --sbb-notification-margin: 0;
+  --sbb-notification-timing-function: ease-in;
+  --sbb-notification-font-size: var(--sbb-text-font-size-s);
+  --sbb-notification-padding-block: var(--sbb-spacing-responsive-xxs);
+  --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);
+  --sbb-notification-content-margin-block-start: var(--sbb-spacing-fixed-2x);
+  --sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xs);
+  --sbb-notification-close-wrapper-gap: var(--sbb-spacing-responsive-xxs);
   --sbb-option-color: var(--sbb-color-3);
   --sbb-option-background-color: inherit;
   --sbb-option-background-color-hover: var(--sbb-background-color-3);
@@ -1799,6 +1811,8 @@
     --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
     --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-12x);
     --sbb-footer-clock-width: 7rem;
+    --sbb-notification-icon-align-self: flex-start;
+    --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);
   }
 }
 @media (min-width: calc(64rem)) {
@@ -2392,15 +2406,6 @@ sbb-toggle:has(:focus-visible) {
   outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
 }
 
-sbb-notification:has(sbb-title) {
-  --_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-5);
-  --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-heading);
-}
-sbb-notification:has(sbb-title)[size=s] {
-  --_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-6);
-  --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-text);
-}
-
 .sbb-overlay-outlet {
   position: fixed;
   inset: 0;

package/custom-elements.json

@@ -13594,6 +13594,81 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "icon-sidebar/icon-sidebar-button.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "icon-sidebar/icon-sidebar-button/icon-sidebar-button.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "icon-sidebar/icon-sidebar-container.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "icon-sidebar/icon-sidebar-container/icon-sidebar-container.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "icon-sidebar/icon-sidebar-content.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "icon-sidebar/icon-sidebar-content/icon-sidebar-content.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "icon-sidebar/icon-sidebar-link.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "icon-sidebar/icon-sidebar-link/icon-sidebar-link.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "icon-sidebar/icon-sidebar.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "icon-sidebar/icon-sidebar/icon-sidebar.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "image/image.component.js",
@@ -14144,81 +14219,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "icon-sidebar/icon-sidebar-button.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "icon-sidebar/icon-sidebar-button/icon-sidebar-button.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "icon-sidebar/icon-sidebar-container.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "icon-sidebar/icon-sidebar-container/icon-sidebar-container.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "icon-sidebar/icon-sidebar-content.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "icon-sidebar/icon-sidebar-content/icon-sidebar-content.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "icon-sidebar/icon-sidebar-link.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "icon-sidebar/icon-sidebar-link/icon-sidebar-link.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "icon-sidebar/icon-sidebar.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "icon-sidebar/icon-sidebar/icon-sidebar.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "journey-header/journey-header.component.js",

package/development/notification/notification.component.js

@@ -1,2 +1,2 @@
-import { t as SbbNotificationElement } from "../notification.component-B5EBKKf8.js";
+import { t as SbbNotificationElement } from "../notification.component-BT3ZQhUI.js";
 export { SbbNotificationElement };