Sync styleguide 2026.05.18.1

docs/styleguide/foundations.html

@@ -161,6 +161,7 @@
         <tr><td>content-card-margin-top-desktop</td><td>100px</td><td>Oberer Außenabstand der Content Card auf Desktop.</td></tr>
         <tr><td>content-card-margin-top-mobile</td><td>1rem</td><td>Oberer Außenabstand der Content Card auf Mobile; entspricht spacing-large.</td></tr>
         <tr><td>notification-card-width</td><td>50%</td><td>Breite der Notification Card relativ zum übergeordneten Layout.</td></tr>
+        <tr><td>user-notification-card-width</td><td>70%</td><td>Desktop-Breite des Patterns User Notification relativ zur verfügbaren Breite.</td></tr>
         <tr><td>public-content-width</td><td>100%</td><td>Standardbreite für wiederverwendbare Public-Content-Wrapper innerhalb der durch das jeweilige Page-Layout begrenzten Breite.</td></tr>
         <tr><td>object-group-card-min-width</td><td>450px</td><td>Mindestbreite der Group Card im Pattern Object Group Card.</td></tr>
         <tr><td>object-group-card-max-width</td><td>650px</td><td>Maximale Breite der Group Card im Pattern Object Group Card.</td></tr>

docs/styleguide/patterns/notifications.html

@@ -187,6 +187,74 @@
     </div>
   </section>
 
+  <section id="pattern-user-notification">
+    <p class="sg-preview-label">Pattern: User Notification</p>
+
+    <div class="sg-preview-area sg-user-notification-pattern">
+      <article class="sg-card sg-notifications-pattern__card" data-pattern="user-notification" data-component="notification-card">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
+          <p class="sg-body">
+            <span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
+          </p>
+        </div>
+
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" data-component-part="card-header">
+          <p class="sg-body">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
+          </p>
+        </div>
+
+        <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow sg-user-notification-pattern__actions" data-component-part="card-body">
+          <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
+            Bestätigen
+          </button>
+        </div>
+      </article>
+    </div>
+  </section>
+
+  <section id="pattern-user-notification-staple">
+    <p class="sg-preview-label">Pattern: User Notification Staple</p>
+
+    <div class="sg-preview-area sg-user-notification-staple">
+      <article class="sg-card" data-pattern="user-notification-staple" data-component="notification-card">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
+          <p class="sg-body"><span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span></p>
+        </div>
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" data-component-part="card-header">
+          <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie.</p>
+        </div>
+        <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow sg-user-notification-staple__actions" data-component-part="card-body">
+          <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Bestätigen</button>
+        </div>
+      </article>
+
+      <article class="sg-card" data-pattern="user-notification-staple" data-component="notification-card">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
+          <p class="sg-body"><span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span></p>
+        </div>
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" data-component-part="card-header">
+          <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie.</p>
+        </div>
+        <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow sg-user-notification-staple__actions" data-component-part="card-body">
+          <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Bestätigen</button>
+        </div>
+      </article>
+
+      <article class="sg-card" data-pattern="user-notification-staple" data-component="notification-card">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
+          <p class="sg-body"><span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span></p>
+        </div>
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" data-component-part="card-header">
+          <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie.</p>
+        </div>
+        <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow sg-user-notification-staple__actions" data-component-part="card-body">
+          <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Bestätigen</button>
+        </div>
+      </article>
+    </div>
+  </section>
+
   <section id="pattern-notifications-small">
     <p class="sg-preview-label">Pattern: Notifications small</p>
 

docs/styleguide/semantic-tokens-patterns.html

@@ -75,6 +75,8 @@
       <tr><td>layout-notifications-card-max-width</td><td>layout-object-card-max-width</td><td>Maximalbreite der Notification Card im Notifications-Pattern; begrenzt Wachstum konsistent zur Object-Card-Breite.</td></tr>
       <tr><td>layout-notifications-text-segment-fixed-height</td><td>dimension-notifications-text-segment-fixed-height</td><td>Fixe Desktop-Höhe des ersten Text-Segments im Notifications-Pattern; auf Mobile wird die Höhe auf auto gesetzt.</td></tr>
       <tr><td>layout-notifications-text-segment-fixed-height-small</td><td>dimension-notifications-text-segment-fixed-height-small</td><td>Fixe Desktop-Höhe des ersten Text-Segments in der Variante <code>Pattern: Notifications small</code>; auf Mobile wird die Höhe auf auto gesetzt.</td></tr>
+      <tr><td>layout-user-notification-card-width</td><td>dimension-user-notification-card-width</td><td>Breite des Patterns <code>Pattern: User Notification</code>; auf Desktop 70 % der verfügbaren Breite und auf Mobile 100 %.</td></tr>
+      <tr><td>layout-user-notification-staple-offset</td><td>spacing-small</td><td>Horizontale und vertikale Versetzung der hinteren Karten im Pattern <code>Pattern: User Notification Staple</code>.</td></tr>
     </tbody></table>
 
     <h3 class="sg-sub-heading sg-section-h3">Company Card</h3>

docs/styleguide/styles/01-foundations.css

@@ -178,6 +178,8 @@
   --layout-content-card-margin-top-desktop: var(--dimension-content-card-margin-top-desktop);
   --layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile);
   --layout-notification-card-width: var(--dimension-notification-card-width);
+  --layout-user-notification-card-width: var(--dimension-user-notification-card-width);
+  --layout-user-notification-staple-offset: var(--spacing-small);
   --dimension-notifications-card-min-width: 445px;
   --layout-notifications-card-flex-basis: var(--dimension-notifications-card-min-width);
   --layout-notifications-card-min-width: var(--dimension-notifications-card-min-width);
@@ -291,6 +293,7 @@
   --dimension-object-group-card-max-width: 650px;
   --dimension-object-group-card-height: 700px;
   --dimension-notification-card-width: 50%;
+  --dimension-user-notification-card-width: 70%;
   --dimension-input-label-width: 9rem;
   --dimension-input-field-desktop-width: 400px;
   --dimension-input-field-max-width: 600px;

docs/styleguide/styles/28-patterns-notifications.css

@@ -42,6 +42,50 @@
   height: auto;
 }
 
+.sg-user-notification-pattern {
+  display: flex;
+  width: var(--layout-user-notification-card-width);
+  margin-inline: auto;
+}
+
+.sg-card-segment.sg-user-notification-pattern__actions {
+  align-items: flex-end;
+}
+
+.sg-user-notification-staple {
+  display: grid;
+  width: var(--layout-user-notification-card-width);
+  margin-inline: auto;
+  padding-inline-end: calc(var(--layout-user-notification-staple-offset) * 2);
+  padding-block-end: calc(var(--layout-user-notification-staple-offset) * 2);
+  box-sizing: border-box;
+}
+
+.sg-user-notification-staple > .sg-card {
+  grid-area: 1 / 1;
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+}
+
+.sg-user-notification-staple > .sg-card:nth-child(2) {
+  transform: translate(
+    var(--layout-user-notification-staple-offset),
+    var(--layout-user-notification-staple-offset)
+  );
+}
+
+.sg-user-notification-staple > .sg-card:nth-child(3) {
+  transform: translate(
+    calc(var(--layout-user-notification-staple-offset) * 2),
+    calc(var(--layout-user-notification-staple-offset) * 2)
+  );
+}
+
+.sg-card-segment.sg-user-notification-staple__actions {
+  align-items: flex-end;
+}
+
 .sg-vsf-meldungen-layout {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -91,4 +135,12 @@
   .sg-notifications-pattern__card > .sg-notifications-pattern__text-segment.sg-notifications-pattern__text-segment--small {
     height: auto;
   }
+
+  .sg-user-notification-pattern {
+    width: 100%;
+  }
+
+  .sg-user-notification-staple {
+    width: 100%;
+  }
 }

docs/styleguide/styles/32-patterns-card-group-keyboard-nav.css

@@ -34,7 +34,7 @@
   background: var(--surface-content-block-card-content);
 }
 
-.sg-content-block-card-group__content .sg-body {
+.sg-content-block-card-group__content > .sg-body {
   margin: 0;
 }
 

docs/styleguide/styles/45-patterns-public-page-patterns.css

@@ -126,17 +126,17 @@
   min-width: 0;
 }
 
-.sg-public-page-pattern-text-and-picture-right__text .sg-body {
+.sg-public-page-pattern-text-and-picture-right__text > .sg-body {
   margin: 0;
   color: var(--text-public-page-pattern-text-picture);
 }
 
-.sg-public-page-pattern-text-and-picture-fullwidth__text .sg-body {
+.sg-public-page-pattern-text-and-picture-fullwidth__text > .sg-body {
   margin: 0;
   color: var(--text-public-page-pattern-text-picture);
 }
 
-.sg-public-page-pattern-text-and-picture-left__text .sg-body {
+.sg-public-page-pattern-text-and-picture-left__text > .sg-body {
   margin: 0;
   color: var(--text-public-page-pattern-text-picture);
 }