@sbb-esta/lyne-elements-dev 4.7.0-dev.1773242335 → 4.7.0-dev.1773276117

package/core/styles/core.scss

@@ -131,6 +131,9 @@ $theme: 'standard' !default;
 @use '../../link/common/block-link.global' as block-link with (
   $theme: $theme
 );
+@use '../../message/message.global' as message with (
+  $theme: $theme
+);
 @use '../../option/option/option.global' as option with (
   $theme: $theme
 );
@@ -211,6 +214,7 @@ $theme: 'standard' !default;
   @include icon-sidebar.base;
   @include block-link.base;
   @include lead-container.base;
+  @include message.base;
   @include option.base;
   @include option-hint.base;
   @include optgroup.base;
@@ -339,6 +343,7 @@ $theme: 'standard' !default;
 @include header.rules;
 @include icon-sidebar.rules;
 @include lead-container.rules;
+@include message.rules;
 @include option.rules;
 @include tab-nav-bar.rules;
 
@@ -437,14 +442,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-// TODO: Move back to the sbb-message components when the global CSS refactoring happens
-sbb-message {
-  > [slot='image']:is(sbb-image, img),
-  > [slot='image'] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-    border-radius: var(--sbb-message-image-border-radius);
-  }
-}
-
 // Target the slotted `sbb-image` which are generally wrapped by a <figure> (therefore are not reachable with the :slotted)
 // Apply the brightness effect on mouse hover
 // TODO: Move back to the teaser components when the global CSS refactoring happens

package/core.css

@@ -1533,6 +1533,12 @@
   --sbb-lead-container-padding-inline: var(--sbb-layout-base-offset-responsive);
   --sbb-lead-container-border-radius: var(--sbb-border-radius-6x);
   --sbb-lead-container-image-border-radius: 0;
+  --sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
+  --sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);
+  --sbb-message-image-border-radius: var(--sbb-border-radius-4x);
+  --sbb-message-subtitle-color: var(--sbb-color-granite);
+  --sbb-message-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-platinum));
+  --sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
   --sbb-option-color: var(--sbb-color-3);
   --sbb-option-background-color: inherit;
   --sbb-option-background-color-hover: var(--sbb-background-color-3);
@@ -2062,6 +2068,11 @@ sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-o
   border-radius: var(--sbb-lead-container-image-border-radius);
 }
 
+sbb-message > [slot=image]:is(sbb-image, img),
+sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+  border-radius: var(--sbb-message-image-border-radius);
+}
+
 :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
   --sbb-option-min-height: var(--sbb-size-element-xxs);
   --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
@@ -2178,11 +2189,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-sbb-message > [slot=image]:is(sbb-image, img),
-sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  border-radius: var(--sbb-message-image-border-radius);
-}
-
 :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) {
   --sbb-teaser-image-brightness-hover: var(--sbb-hover-image-brightness);
   --sbb-teaser-image-animation-duration: var(

package/custom-elements.json

@@ -37571,12 +37571,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "button/accent-button-static/accent-button-static.component.js",
+      "path": "button/accent-button-link/accent-button-link.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "It displays a static button enhanced with the SBB Design in the 'accent' variant.",
-          "name": "SbbAccentButtonStaticElement",
+          "description": "It displays a button enhanced with the SBB Design in the 'accent' variant, which will behave as a link.",
+          "name": "SbbAccentButtonLinkElement",
           "cssProperties": [
             {
               "description": "The delay before the loading animation starts, when setting the button into loading state.",
@@ -37586,7 +37586,7 @@
           ],
           "slots": [
             {
-              "description": "Use the unnamed slot to add content to the accent-button-static.",
+              "description": "Use the unnamed slot to add content to the accent-button-link.",
               "name": ""
             },
             {
@@ -37604,7 +37604,7 @@
               "privacy": "public",
               "static": true,
               "readonly": true,
-              "default": "'sbb-accent-button-static'",
+              "default": "'sbb-accent-button-link'",
               "inheritedFrom": {
                 "name": "SbbElement",
                 "module": "core/base-elements/element.js"
@@ -37739,6 +37739,22 @@
                 "module": "icon/icon-name-mixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "disabledInteractive",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether the button should be aria-disabled but stay interactive.",
+              "attribute": "disabled-interactive",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "SbbDisabledInteractiveMixin",
+                "module": "core/mixins/disabled-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -37783,6 +37799,155 @@
                 "module": "core/mixins/disabled-mixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "''",
+              "description": "The href value you want to link to.",
+              "attribute": "href",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "SbbLinkBaseElement",
+                "module": "core/base-elements/link-base-element.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "LinkTargetType | string"
+              },
+              "privacy": "public",
+              "default": "''",
+              "description": "Where to display the linked URL.",
+              "attribute": "target",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "SbbLinkBaseElement",
+                "module": "core/base-elements/link-base-element.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "rel",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "''",
+              "description": "The relationship of the linked URL as space-separated link types.",
+              "attribute": "rel",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "SbbLinkBaseElement",
+                "module": "core/base-elements/link-base-element.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "download",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether the browser will show the download dialog on click.",
+              "attribute": "download",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "SbbLinkBaseElement",
+                "module": "core/base-elements/link-base-element.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "accessibilityLabel",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "''",
+              "description": "This will be forwarded as aria-label to the inner anchor element.",
+              "attribute": "accessibility-label",
+              "inheritedFrom": {
+                "name": "SbbLinkBaseElement",
+                "module": "core/base-elements/link-base-element.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "accessibilityCurrent",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "''",
+              "description": "This will be forwarded as aria-current to the inner anchor element.",
+              "attribute": "accessibility-current",
+              "inheritedFrom": {
+                "name": "SbbLinkBaseElement",
+                "module": "core/base-elements/link-base-element.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "language",
+              "privacy": "protected",
+              "default": "new SbbLanguageController(this)",
+              "inheritedFrom": {
+                "name": "SbbLinkBaseElement",
+                "module": "core/base-elements/link-base-element.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "anchorRole",
+              "type": {
+                "text": "string | null"
+              },
+              "privacy": "protected",
+              "readonly": true,
+              "default": "null",
+              "inheritedFrom": {
+                "name": "SbbLinkBaseElement",
+                "module": "core/base-elements/link-base-element.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_evaluateRelAttribute",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "SbbLinkBaseElement",
+                "module": "core/base-elements/link-base-element.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderLink",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "renderContent",
+                  "type": {
+                    "text": "TemplateResult"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "SbbLinkBaseElement",
+                "module": "core/base-elements/link-base-element.js"
+              }
+            },
             {
               "kind": "field",
               "name": "maybeDisabled",
@@ -37934,16 +38099,20 @@
               "name": "SbbButtonCommonElementMixin",
               "module": "button/common.js"
             },
+            {
+              "name": "SbbDisabledInteractiveMixin",
+              "module": "core/mixins.js"
+            },
             {
               "name": "SbbDisabledMixin",
               "module": "core/mixins.js"
             }
           ],
           "superclass": {
-            "name": "SbbActionBaseElement",
+            "name": "SbbLinkBaseElement",
             "module": "core/base-elements.js"
           },
-          "tagName": "sbb-accent-button-static",
+          "tagName": "sbb-accent-button-link",
           "customElement": true,
           "attributes": [
             {
@@ -37998,6 +38167,19 @@
                 "module": "icon/icon-name-mixin.js"
               }
             },
+            {
+              "name": "disabled-interactive",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the button should be aria-disabled but stay interactive.",
+              "fieldName": "disabledInteractive",
+              "inheritedFrom": {
+                "name": "SbbDisabledInteractiveMixin",
+                "module": "core/mixins/disabled-mixin.js"
+              }
+            },
             {
               "name": "disabled",
               "description": "Whether the component is disabled.",
@@ -38010,69 +38192,147 @@
                 "name": "SbbDisabledMixin",
                 "module": "core/mixins/disabled-mixin.js"
               }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "SbbAccentButtonStaticElement",
-          "declaration": {
-            "name": "SbbAccentButtonStaticElement",
-            "module": "button/accent-button-static/accent-button-static.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "button/accent-button-link/accent-button-link.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "It displays a button enhanced with the SBB Design in the 'accent' variant, which will behave as a link.",
-          "name": "SbbAccentButtonLinkElement",
-          "cssProperties": [
-            {
-              "description": "The delay before the loading animation starts, when setting the button into loading state.",
-              "name": "--sbb-button-loading-delay",
-              "default": "300ms"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Use the unnamed slot to add content to the accent-button-link.",
-              "name": ""
             },
             {
-              "description": "Slot used to display the icon, if one is set.",
-              "name": "icon"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "elementName",
+              "name": "href",
               "type": {
                 "text": "string"
               },
-              "privacy": "public",
-              "static": true,
-              "readonly": true,
-              "default": "'sbb-accent-button-link'",
+              "default": "''",
+              "description": "The href value you want to link to.",
+              "fieldName": "href",
               "inheritedFrom": {
-                "name": "SbbElement",
-                "module": "core/base-elements/element.js"
+                "name": "SbbLinkBaseElement",
+                "module": "core/base-elements/link-base-element.js"
               }
             },
             {
-              "kind": "field",
-              "name": "size",
+              "name": "target",
               "type": {
-                "text": "SbbButtonSize"
+                "text": "LinkTargetType | string"
               },
-              "privacy": "public",
+              "default": "''",
+              "description": "Where to display the linked URL.",
+              "fieldName": "target",
+              "inheritedFrom": {
+                "name": "SbbLinkBaseElement",
+                "module": "core/base-elements/link-base-element.js"
+              }
+            },
+            {
+              "name": "rel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The relationship of the linked URL as space-separated link types.",
+              "fieldName": "rel",
+              "inheritedFrom": {
+                "name": "SbbLinkBaseElement",
+                "module": "core/base-elements/link-base-element.js"
+              }
+            },
+            {
+              "name": "download",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the browser will show the download dialog on click.",
+              "fieldName": "download",
+              "inheritedFrom": {
+                "name": "SbbLinkBaseElement",
+                "module": "core/base-elements/link-base-element.js"
+              }
+            },
+            {
+              "name": "accessibility-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "This will be forwarded as aria-label to the inner anchor element.",
+              "fieldName": "accessibilityLabel",
+              "inheritedFrom": {
+                "name": "SbbLinkBaseElement",
+                "module": "core/base-elements/link-base-element.js"
+              }
+            },
+            {
+              "name": "accessibility-current",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "This will be forwarded as aria-current to the inner anchor element.",
+              "fieldName": "accessibilityCurrent",
+              "inheritedFrom": {
+                "name": "SbbLinkBaseElement",
+                "module": "core/base-elements/link-base-element.js"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SbbAccentButtonLinkElement",
+          "declaration": {
+            "name": "SbbAccentButtonLinkElement",
+            "module": "button/accent-button-link/accent-button-link.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "button/accent-button-static/accent-button-static.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "It displays a static button enhanced with the SBB Design in the 'accent' variant.",
+          "name": "SbbAccentButtonStaticElement",
+          "cssProperties": [
+            {
+              "description": "The delay before the loading animation starts, when setting the button into loading state.",
+              "name": "--sbb-button-loading-delay",
+              "default": "300ms"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Use the unnamed slot to add content to the accent-button-static.",
+              "name": ""
+            },
+            {
+              "description": "Slot used to display the icon, if one is set.",
+              "name": "icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "elementName",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "static": true,
+              "readonly": true,
+              "default": "'sbb-accent-button-static'",
+              "inheritedFrom": {
+                "name": "SbbElement",
+                "module": "core/base-elements/element.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "SbbButtonSize"
+              },
+              "privacy": "public",
               "description": "Size variant, either l, m or s.",
               "default": "'l' / 's' (lean)",
               "attribute": "size",
@@ -38195,22 +38455,6 @@
                 "module": "icon/icon-name-mixin.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "disabledInteractive",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether the button should be aria-disabled but stay interactive.",
-              "attribute": "disabled-interactive",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "SbbDisabledInteractiveMixin",
-                "module": "core/mixins/disabled-mixin.js"
-              }
-            },
             {
               "kind": "field",
               "name": "disabled",
@@ -38255,155 +38499,6 @@
                 "module": "core/mixins/disabled-mixin.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "href",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "''",
-              "description": "The href value you want to link to.",
-              "attribute": "href",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "SbbLinkBaseElement",
-                "module": "core/base-elements/link-base-element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "target",
-              "type": {
-                "text": "LinkTargetType | string"
-              },
-              "privacy": "public",
-              "default": "''",
-              "description": "Where to display the linked URL.",
-              "attribute": "target",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "SbbLinkBaseElement",
-                "module": "core/base-elements/link-base-element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "rel",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "''",
-              "description": "The relationship of the linked URL as space-separated link types.",
-              "attribute": "rel",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "SbbLinkBaseElement",
-                "module": "core/base-elements/link-base-element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "download",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether the browser will show the download dialog on click.",
-              "attribute": "download",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "SbbLinkBaseElement",
-                "module": "core/base-elements/link-base-element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "accessibilityLabel",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "''",
-              "description": "This will be forwarded as aria-label to the inner anchor element.",
-              "attribute": "accessibility-label",
-              "inheritedFrom": {
-                "name": "SbbLinkBaseElement",
-                "module": "core/base-elements/link-base-element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "accessibilityCurrent",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "''",
-              "description": "This will be forwarded as aria-current to the inner anchor element.",
-              "attribute": "accessibility-current",
-              "inheritedFrom": {
-                "name": "SbbLinkBaseElement",
-                "module": "core/base-elements/link-base-element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "language",
-              "privacy": "protected",
-              "default": "new SbbLanguageController(this)",
-              "inheritedFrom": {
-                "name": "SbbLinkBaseElement",
-                "module": "core/base-elements/link-base-element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "anchorRole",
-              "type": {
-                "text": "string | null"
-              },
-              "privacy": "protected",
-              "readonly": true,
-              "default": "null",
-              "inheritedFrom": {
-                "name": "SbbLinkBaseElement",
-                "module": "core/base-elements/link-base-element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_evaluateRelAttribute",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "SbbLinkBaseElement",
-                "module": "core/base-elements/link-base-element.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderLink",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "renderContent",
-                  "type": {
-                    "text": "TemplateResult"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "SbbLinkBaseElement",
-                "module": "core/base-elements/link-base-element.js"
-              }
-            },
             {
               "kind": "field",
               "name": "maybeDisabled",
@@ -38555,20 +38650,16 @@
               "name": "SbbButtonCommonElementMixin",
               "module": "button/common.js"
             },
-            {
-              "name": "SbbDisabledInteractiveMixin",
-              "module": "core/mixins.js"
-            },
             {
               "name": "SbbDisabledMixin",
               "module": "core/mixins.js"
             }
           ],
           "superclass": {
-            "name": "SbbLinkBaseElement",
+            "name": "SbbActionBaseElement",
             "module": "core/base-elements.js"
           },
-          "tagName": "sbb-accent-button-link",
+          "tagName": "sbb-accent-button-static",
           "customElement": true,
           "attributes": [
             {
@@ -38623,19 +38714,6 @@
                 "module": "icon/icon-name-mixin.js"
               }
             },
-            {
-              "name": "disabled-interactive",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the button should be aria-disabled but stay interactive.",
-              "fieldName": "disabledInteractive",
-              "inheritedFrom": {
-                "name": "SbbDisabledInteractiveMixin",
-                "module": "core/mixins/disabled-mixin.js"
-              }
-            },
             {
               "name": "disabled",
               "description": "Whether the component is disabled.",
@@ -38648,84 +38726,6 @@
                 "name": "SbbDisabledMixin",
                 "module": "core/mixins/disabled-mixin.js"
               }
-            },
-            {
-              "name": "href",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The href value you want to link to.",
-              "fieldName": "href",
-              "inheritedFrom": {
-                "name": "SbbLinkBaseElement",
-                "module": "core/base-elements/link-base-element.js"
-              }
-            },
-            {
-              "name": "target",
-              "type": {
-                "text": "LinkTargetType | string"
-              },
-              "default": "''",
-              "description": "Where to display the linked URL.",
-              "fieldName": "target",
-              "inheritedFrom": {
-                "name": "SbbLinkBaseElement",
-                "module": "core/base-elements/link-base-element.js"
-              }
-            },
-            {
-              "name": "rel",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The relationship of the linked URL as space-separated link types.",
-              "fieldName": "rel",
-              "inheritedFrom": {
-                "name": "SbbLinkBaseElement",
-                "module": "core/base-elements/link-base-element.js"
-              }
-            },
-            {
-              "name": "download",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the browser will show the download dialog on click.",
-              "fieldName": "download",
-              "inheritedFrom": {
-                "name": "SbbLinkBaseElement",
-                "module": "core/base-elements/link-base-element.js"
-              }
-            },
-            {
-              "name": "accessibility-label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "This will be forwarded as aria-label to the inner anchor element.",
-              "fieldName": "accessibilityLabel",
-              "inheritedFrom": {
-                "name": "SbbLinkBaseElement",
-                "module": "core/base-elements/link-base-element.js"
-              }
-            },
-            {
-              "name": "accessibility-current",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "This will be forwarded as aria-current to the inner anchor element.",
-              "fieldName": "accessibilityCurrent",
-              "inheritedFrom": {
-                "name": "SbbLinkBaseElement",
-                "module": "core/base-elements/link-base-element.js"
-              }
             }
           ]
         }
@@ -38733,10 +38733,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "SbbAccentButtonLinkElement",
+          "name": "SbbAccentButtonStaticElement",
           "declaration": {
-            "name": "SbbAccentButtonLinkElement",
-            "module": "button/accent-button-link/accent-button-link.component.js"
+            "name": "SbbAccentButtonStaticElement",
+            "module": "button/accent-button-static/accent-button-static.component.js"
           }
         }
       ]

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

@@ -1 +1 @@
-{"version":3,"file":"message.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/message/message.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAMtD;;;;;;;;GAQG;AACH,qBAAa,iBAAkB,SAAQ,UAAU;IAC/C,gBAAgC,WAAW,EAAE,MAAM,CAAiB;IACpE,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,OAAO,CAAC,eAAe;cAUJ,MAAM,IAAI,cAAc;CAW5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}
+{"version":3,"file":"message.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/message/message.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAMtD;;;;;;;;GAQG;AACH,qBAAa,iBAAkB,SAAQ,UAAU;IAC/C,gBAAgC,WAAW,EAAE,MAAM,CAAiB;IACpE,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,OAAO,CAAC,eAAe;cAUJ,MAAM,IAAI,cAAc;CAS5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}

package/development/message/message.component.js

@@ -2,16 +2,7 @@ import { css, html } from "lit";
 import { SbbElement } from "../core/base-elements.js";
 import { boxSizingStyles } from "../core/styles.js";
 const style = css`:host {
-  --sbb-message-subtitle-color: var(--sbb-color-granite);
-  --sbb-message-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-platinum));
-  --sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);
-  --sbb-message-image-border-radius: var(--sbb-border-radius-4x);
-  --sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
-  --sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
   display: block;
-}
-
-.sbb-message__container {
   text-align: center;
 }
 
@@ -27,13 +18,9 @@ const style = css`:host {
 }
 
 ::slotted([slot=subtitle]) {
-  --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-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
-  font-size: var(--sbb-text-font-size);
   color: var(--sbb-message-subtitle-color);
+  font-size: var(--sbb-text-font-size-s);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   margin: 0;
 }
 
@@ -63,13 +50,11 @@ const _SbbMessageElement = class _SbbMessageElement extends SbbElement {
   }
   render() {
     return html`
-      <div class="sbb-message__container">
-        <slot name="image"></slot>
-        <slot name="title" @slotchange=${this._configureTitle}></slot>
-        <slot name="subtitle"></slot>
-        <slot name="legend"></slot>
-        <slot name="action"></slot>
-      </div>
+      <slot name="image"></slot>
+      <slot name="title" @slotchange=${this._configureTitle}></slot>
+      <slot name="subtitle"></slot>
+      <slot name="legend"></slot>
+      <slot name="action"></slot>
     `;
   }
 };
@@ -79,4 +64,4 @@ let SbbMessageElement = _SbbMessageElement;
 export {
   SbbMessageElement
 };
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVzc2FnZS5jb21wb25lbnQuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9lbGVtZW50cy9tZXNzYWdlL21lc3NhZ2UuY29tcG9uZW50LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAsIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGh0bWwgfSBmcm9tICdsaXQnO1xuXG5pbXBvcnQgeyBTYmJFbGVtZW50IH0gZnJvbSAnLi4vY29yZS9iYXNlLWVsZW1lbnRzLnRzJztcbmltcG9ydCB7IGJveFNpemluZ1N0eWxlcyB9IGZyb20gJy4uL2NvcmUvc3R5bGVzLnRzJztcbmltcG9ydCB0eXBlIHsgU2JiVGl0bGVFbGVtZW50IH0gZnJvbSAnLi4vdGl0bGUudHMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi9tZXNzYWdlLnNjc3M/bGl0JmlubGluZSc7XG5cbi8qKlxuICogSXQgZGlzcGxheXMgYSBjb21wbGV4IG1lc3NhZ2UgY29tYmluaW5nIGEgdGl0bGUsIGFuIGltYWdlLCBhbiBhY3Rpb24gYW5kIHNvbWUgY29udGVudC5cbiAqXG4gKiBAc2xvdCBpbWFnZSAtIFVzZSB0aGlzIHNsb3QgdG8gcHJvdmlkZSBhbiBgc2JiLWltYWdlYCBjb21wb25lbnQuXG4gKiBAc2xvdCB0aXRsZSAtIFVzZSB0aGlzIHNsb3QgdG8gcHJvdmlkZSBhbiBgc2JiLXRpdGxlYC5cbiAqIEBzbG90IHN1YnRpdGxlIC0gVXNlIHRoaXMgc2xvdCB0byBwcm92aWRlIGEgc3VidGl0bGUsIG11c3QgYmUgYSBwYXJhZ3JhcGguXG4gKiBAc2xvdCBsZWdlbmQgLSBVc2UgdGhpcyBzbG90IHRvIHByb3ZpZGUgYSBsZWdlbmQsIG11c3QgYmUgYSBwYXJhZ3JhcGguXG4gKiBAc2xvdCBhY3Rpb24gLSBVc2UgdGhpcyBzbG90IHRvIHByb3ZpZGUgYW4gYHNiYi1zZWNvbmRhcnktYnV0dG9uYC5cbiAqL1xuZXhwb3J0IGNsYXNzIFNiYk1lc3NhZ2VFbGVtZW50IGV4dGVuZHMgU2JiRWxlbWVudCB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgcmVhZG9ubHkgZWxlbWVudE5hbWU6IHN0cmluZyA9ICdzYmItbWVzc2FnZSc7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IFtib3hTaXppbmdTdHlsZXMsIHN0eWxlXTtcblxuICBwcml2YXRlIF9jb25maWd1cmVUaXRsZShldmVudDogRXZlbnQpOiB2b2lkIHtcbiAgICBjb25zdCB0aXRsZSA9IChldmVudC50YXJnZXQgYXMgSFRNTFNsb3RFbGVtZW50KVxuICAgICAgLmFzc2lnbmVkRWxlbWVudHMoKVxuICAgICAgLmZpbmQoKGUpOiBlIGlzIFNiYlRpdGxlRWxlbWVudCA9PiBlLmxvY2FsTmFtZSA9PT0gJ3NiYi10aXRsZScpO1xuICAgIGlmICh0aXRsZSkge1xuICAgICAgY3VzdG9tRWxlbWVudHMudXBncmFkZSh0aXRsZSk7XG4gICAgICB0aXRsZS52aXN1YWxMZXZlbCA9ICc1JztcbiAgICB9XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxkaXYgY2xhc3M9XCJzYmItbWVzc2FnZV9fY29udGFpbmVyXCI+XG4gICAgICAgIDxzbG90IG5hbWU9XCJpbWFnZVwiPjwvc2xvdD5cbiAgICAgICAgPHNsb3QgbmFtZT1cInRpdGxlXCIgQHNsb3RjaGFuZ2U9JHt0aGlzLl9jb25maWd1cmVUaXRsZX0+PC9zbG90PlxuICAgICAgICA8c2xvdCBuYW1lPVwic3VidGl0bGVcIj48L3Nsb3Q+XG4gICAgICAgIDxzbG90IG5hbWU9XCJsZWdlbmRcIj48L3Nsb3Q+XG4gICAgICAgIDxzbG90IG5hbWU9XCJhY3Rpb25cIj48L3Nsb3Q+XG4gICAgICA8L2Rpdj5cbiAgICBgO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItbWVzc2FnZSc6IFNiYk1lc3NhZ2VFbGVtZW50O1xuICB9XG59XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQWtCTSxNQUFPLHFCQUFQLE1BQU8sMkJBQTBCLFdBQVU7QUFBQSxFQUl2QyxnQkFBZ0IsT0FBWTtBQUNsQyxVQUFNLFFBQVMsTUFBTSxPQUNsQixpQkFBQSxFQUNBLEtBQUssQ0FBQyxNQUE0QixFQUFFLGNBQWMsV0FBVztBQUNoRSxRQUFJLE9BQU87QUFDVCxxQkFBZSxRQUFRLEtBQUs7QUFDNUIsWUFBTSxjQUFjO0FBQUEsSUFDdEI7QUFBQSxFQUNGO0FBQUEsRUFFbUIsU0FBTTtBQUN2QixXQUFPO0FBQUE7QUFBQTtBQUFBLHlDQUc4QixLQUFLLGVBQWU7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsRUFNM0Q7O0FBdkJnQyxtQkFBQSxjQUFzQjtBQUMvQixtQkFBQSxTQUF5QixDQUFDLGlCQUFpQixLQUFLO0FBRm5FLElBQU8sb0JBQVA7In0=
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVzc2FnZS5jb21wb25lbnQuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9lbGVtZW50cy9tZXNzYWdlL21lc3NhZ2UuY29tcG9uZW50LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAsIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGh0bWwgfSBmcm9tICdsaXQnO1xuXG5pbXBvcnQgeyBTYmJFbGVtZW50IH0gZnJvbSAnLi4vY29yZS9iYXNlLWVsZW1lbnRzLnRzJztcbmltcG9ydCB7IGJveFNpemluZ1N0eWxlcyB9IGZyb20gJy4uL2NvcmUvc3R5bGVzLnRzJztcbmltcG9ydCB0eXBlIHsgU2JiVGl0bGVFbGVtZW50IH0gZnJvbSAnLi4vdGl0bGUudHMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi9tZXNzYWdlLnNjc3M/bGl0JmlubGluZSc7XG5cbi8qKlxuICogSXQgZGlzcGxheXMgYSBjb21wbGV4IG1lc3NhZ2UgY29tYmluaW5nIGEgdGl0bGUsIGFuIGltYWdlLCBhbiBhY3Rpb24gYW5kIHNvbWUgY29udGVudC5cbiAqXG4gKiBAc2xvdCBpbWFnZSAtIFVzZSB0aGlzIHNsb3QgdG8gcHJvdmlkZSBhbiBgc2JiLWltYWdlYCBjb21wb25lbnQuXG4gKiBAc2xvdCB0aXRsZSAtIFVzZSB0aGlzIHNsb3QgdG8gcHJvdmlkZSBhbiBgc2JiLXRpdGxlYC5cbiAqIEBzbG90IHN1YnRpdGxlIC0gVXNlIHRoaXMgc2xvdCB0byBwcm92aWRlIGEgc3VidGl0bGUsIG11c3QgYmUgYSBwYXJhZ3JhcGguXG4gKiBAc2xvdCBsZWdlbmQgLSBVc2UgdGhpcyBzbG90IHRvIHByb3ZpZGUgYSBsZWdlbmQsIG11c3QgYmUgYSBwYXJhZ3JhcGguXG4gKiBAc2xvdCBhY3Rpb24gLSBVc2UgdGhpcyBzbG90IHRvIHByb3ZpZGUgYW4gYHNiYi1zZWNvbmRhcnktYnV0dG9uYC5cbiAqL1xuZXhwb3J0IGNsYXNzIFNiYk1lc3NhZ2VFbGVtZW50IGV4dGVuZHMgU2JiRWxlbWVudCB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgcmVhZG9ubHkgZWxlbWVudE5hbWU6IHN0cmluZyA9ICdzYmItbWVzc2FnZSc7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IFtib3hTaXppbmdTdHlsZXMsIHN0eWxlXTtcblxuICBwcml2YXRlIF9jb25maWd1cmVUaXRsZShldmVudDogRXZlbnQpOiB2b2lkIHtcbiAgICBjb25zdCB0aXRsZSA9IChldmVudC50YXJnZXQgYXMgSFRNTFNsb3RFbGVtZW50KVxuICAgICAgLmFzc2lnbmVkRWxlbWVudHMoKVxuICAgICAgLmZpbmQoKGUpOiBlIGlzIFNiYlRpdGxlRWxlbWVudCA9PiBlLmxvY2FsTmFtZSA9PT0gJ3NiYi10aXRsZScpO1xuICAgIGlmICh0aXRsZSkge1xuICAgICAgY3VzdG9tRWxlbWVudHMudXBncmFkZSh0aXRsZSk7XG4gICAgICB0aXRsZS52aXN1YWxMZXZlbCA9ICc1JztcbiAgICB9XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxzbG90IG5hbWU9XCJpbWFnZVwiPjwvc2xvdD5cbiAgICAgIDxzbG90IG5hbWU9XCJ0aXRsZVwiIEBzbG90Y2hhbmdlPSR7dGhpcy5fY29uZmlndXJlVGl0bGV9Pjwvc2xvdD5cbiAgICAgIDxzbG90IG5hbWU9XCJzdWJ0aXRsZVwiPjwvc2xvdD5cbiAgICAgIDxzbG90IG5hbWU9XCJsZWdlbmRcIj48L3Nsb3Q+XG4gICAgICA8c2xvdCBuYW1lPVwiYWN0aW9uXCI+PC9zbG90PlxuICAgIGA7XG4gIH1cbn1cblxuZGVjbGFyZSBnbG9iYWwge1xuICBpbnRlcmZhY2UgSFRNTEVsZW1lbnRUYWdOYW1lTWFwIHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25hbWluZy1jb252ZW50aW9uXG4gICAgJ3NiYi1tZXNzYWdlJzogU2JiTWVzc2FnZUVsZW1lbnQ7XG4gIH1cbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFrQk0sTUFBTyxxQkFBUCxNQUFPLDJCQUEwQixXQUFVO0FBQUEsRUFJdkMsZ0JBQWdCLE9BQVk7QUFDbEMsVUFBTSxRQUFTLE1BQU0sT0FDbEIsaUJBQUEsRUFDQSxLQUFLLENBQUMsTUFBNEIsRUFBRSxjQUFjLFdBQVc7QUFDaEUsUUFBSSxPQUFPO0FBQ1QscUJBQWUsUUFBUSxLQUFLO0FBQzVCLFlBQU0sY0FBYztBQUFBLElBQ3RCO0FBQUEsRUFDRjtBQUFBLEVBRW1CLFNBQU07QUFDdkIsV0FBTztBQUFBO0FBQUEsdUNBRTRCLEtBQUssZUFBZTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsRUFLekQ7O0FBckJnQyxtQkFBQSxjQUFzQjtBQUMvQixtQkFBQSxTQUF5QixDQUFDLGlCQUFpQixLQUFLO0FBRm5FLElBQU8sb0JBQVA7In0=

package/message/message.component.js

@@ -1,25 +1,23 @@
-import { css as a, html as l } from "lit";
-import { SbbElement as b } from "../core/base-elements.js";
+import { css as i, html as a } from "lit";
+import { SbbElement as n } from "../core/base-elements.js";
 import { boxSizingStyles as r } from "../core/styles.js";
-const n = a`:host{--sbb-message-subtitle-color: var(--sbb-color-granite);--sbb-message-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-platinum));--sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);--sbb-message-image-border-radius: var(--sbb-border-radius-4x);--sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;--sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;display:block}.sbb-message__container{text-align:center}::slotted(sbb-title[slot=title]){margin:0}::slotted([slot=image]){display:block;margin-inline:auto!important;margin-block:var(--sbb-message-image-margin-block)!important;width:100%}::slotted([slot=subtitle]){--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;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-message-subtitle-color);margin:0}::slotted([slot=legend]){--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);padding:0;color:var(--sbb-color-granite);color:light-dark(var(--sbb-color-granite),var(--sbb-color-cement));margin-block:var(--sbb-message-legend-margin-block)}::slotted([slot=action]){margin-block:var(--sbb-message-action-margin-block)}`, t = class t extends b {
+const b = i`:host{display:block;text-align:center}::slotted(sbb-title[slot=title]){margin:0}::slotted([slot=image]){display:block;margin-inline:auto!important;margin-block:var(--sbb-message-image-margin-block)!important;width:100%}::slotted([slot=subtitle]){color:var(--sbb-message-subtitle-color);font-size:var(--sbb-text-font-size-s);letter-spacing:var(--sbb-typo-letter-spacing-text);margin:0}::slotted([slot=legend]){--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);padding:0;color:var(--sbb-color-granite);color:light-dark(var(--sbb-color-granite),var(--sbb-color-cement));margin-block:var(--sbb-message-legend-margin-block)}::slotted([slot=action]){margin-block:var(--sbb-message-action-margin-block)}`, t = class t extends n {
   _configureTitle(o) {
-    const s = o.target.assignedElements().find((i) => i.localName === "sbb-title");
-    s && (customElements.upgrade(s), s.visualLevel = "5");
+    const e = o.target.assignedElements().find((l) => l.localName === "sbb-title");
+    e && (customElements.upgrade(e), e.visualLevel = "5");
   }
   render() {
-    return l`
-      <div class="sbb-message__container">
-        <slot name="image"></slot>
-        <slot name="title" @slotchange=${this._configureTitle}></slot>
-        <slot name="subtitle"></slot>
-        <slot name="legend"></slot>
-        <slot name="action"></slot>
-      </div>
+    return a`
+      <slot name="image"></slot>
+      <slot name="title" @slotchange=${this._configureTitle}></slot>
+      <slot name="subtitle"></slot>
+      <slot name="legend"></slot>
+      <slot name="action"></slot>
     `;
   }
 };
-t.elementName = "sbb-message", t.styles = [r, n];
-let e = t;
+t.elementName = "sbb-message", t.styles = [r, b];
+let s = t;
 export {
-  e as SbbMessageElement
+  s as SbbMessageElement
 };

package/off-brand-theme.css

@@ -1637,6 +1637,12 @@ summary {
   --sbb-lead-container-padding-inline: var(--sbb-layout-base-offset-responsive);
   --sbb-lead-container-border-radius: var(--sbb-border-radius-6x);
   --sbb-lead-container-image-border-radius: 0;
+  --sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
+  --sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);
+  --sbb-message-image-border-radius: var(--sbb-border-radius-4x);
+  --sbb-message-subtitle-color: var(--sbb-color-granite);
+  --sbb-message-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-platinum));
+  --sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
   --sbb-option-color: var(--sbb-color-3);
   --sbb-option-background-color: inherit;
   --sbb-option-background-color-hover: var(--sbb-background-color-3);
@@ -2166,6 +2172,11 @@ sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-o
   border-radius: var(--sbb-lead-container-image-border-radius);
 }
 
+sbb-message > [slot=image]:is(sbb-image, img),
+sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+  border-radius: var(--sbb-message-image-border-radius);
+}
+
 :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
   --sbb-option-min-height: var(--sbb-size-element-xxs);
   --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
@@ -2282,11 +2293,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-sbb-message > [slot=image]:is(sbb-image, img),
-sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  border-radius: var(--sbb-message-image-border-radius);
-}
-
 :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) {
   --sbb-teaser-image-brightness-hover: var(--sbb-hover-image-brightness);
   --sbb-teaser-image-animation-duration: var(

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "4.7.0-dev.1773242335",
+  "version": "4.7.0-dev.1773276117",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
     "storybook",
-    "https://github.com/sbb-design-systems/lyne-components/commit/19525157fea95fa3e36984e2709d9200aa83572c"
+    "https://github.com/sbb-design-systems/lyne-components/commit/f7454ffd8fecd697e8160ba8328bef2045b39b82"
   ],
   "type": "module",
   "exports": {

package/safety-theme.css

@@ -1637,6 +1637,12 @@ summary {
   --sbb-lead-container-padding-inline: var(--sbb-layout-base-offset-responsive);
   --sbb-lead-container-border-radius: var(--sbb-border-radius-6x);
   --sbb-lead-container-image-border-radius: 0;
+  --sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
+  --sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);
+  --sbb-message-image-border-radius: var(--sbb-border-radius-4x);
+  --sbb-message-subtitle-color: var(--sbb-color-granite);
+  --sbb-message-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-platinum));
+  --sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
   --sbb-option-color: var(--sbb-color-3);
   --sbb-option-background-color: inherit;
   --sbb-option-background-color-hover: var(--sbb-background-color-3);
@@ -2166,6 +2172,11 @@ sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-o
   border-radius: var(--sbb-lead-container-image-border-radius);
 }
 
+sbb-message > [slot=image]:is(sbb-image, img),
+sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+  border-radius: var(--sbb-message-image-border-radius);
+}
+
 :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
   --sbb-option-min-height: var(--sbb-size-element-xxs);
   --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
@@ -2282,11 +2293,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-sbb-message > [slot=image]:is(sbb-image, img),
-sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  border-radius: var(--sbb-message-image-border-radius);
-}
-
 :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) {
   --sbb-teaser-image-brightness-hover: var(--sbb-hover-image-brightness);
   --sbb-teaser-image-animation-duration: var(

package/standard-theme.css

@@ -1637,6 +1637,12 @@ summary {
   --sbb-lead-container-padding-inline: var(--sbb-layout-base-offset-responsive);
   --sbb-lead-container-border-radius: var(--sbb-border-radius-6x);
   --sbb-lead-container-image-border-radius: 0;
+  --sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
+  --sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);
+  --sbb-message-image-border-radius: var(--sbb-border-radius-4x);
+  --sbb-message-subtitle-color: var(--sbb-color-granite);
+  --sbb-message-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-platinum));
+  --sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
   --sbb-option-color: var(--sbb-color-3);
   --sbb-option-background-color: inherit;
   --sbb-option-background-color-hover: var(--sbb-background-color-3);
@@ -2166,6 +2172,11 @@ sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-o
   border-radius: var(--sbb-lead-container-image-border-radius);
 }
 
+sbb-message > [slot=image]:is(sbb-image, img),
+sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+  border-radius: var(--sbb-message-image-border-radius);
+}
+
 :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
   --sbb-option-min-height: var(--sbb-size-element-xxs);
   --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
@@ -2282,11 +2293,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-sbb-message > [slot=image]:is(sbb-image, img),
-sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  border-radius: var(--sbb-message-image-border-radius);
-}
-
 :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) {
   --sbb-teaser-image-brightness-hover: var(--sbb-hover-image-brightness);
   --sbb-teaser-image-animation-duration: var(