Sync styleguide 2026.05.18.1

docs/styleguide/foundations.html

@@ -166,8 +166,11 @@
         <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>
         <tr><td>object-group-card-height</td><td>700px</td><td>Fixe Desktop-Höhe der Group Card im Pattern Object Group Card.</td></tr>
-        <tr><td>delete-confirmation-overlay-offset-block-start</td><td>10%</td><td>Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Objektgröße.</td></tr>
+        <tr><td>delete-confirmation-target-max-width</td><td>35rem</td><td>Maximalbreite der Ziel-Card im Overlay-Card-Pattern.</td></tr>
-        <tr><td>delete-confirmation-overlay-max-height</td><td>calc(100vh - 10vh)</td><td>Maximalhöhe des Overlays relativ zum Viewport; danach scrollt der Inhalt innerhalb des Overlays.</td></tr>
+        <tr><td>delete-confirmation-overlay-width-factor</td><td>0.8</td><td>Breitenfaktor des Overlay-Fensters relativ zur Ziel-Card.</td></tr>
+        <tr><td>delete-confirmation-overlay-offset-block-start</td><td>10%</td><td>Vertikaler Startabstand des Overlay-Fensters relativ zur Parent-Höhe.</td></tr>
+        <tr><td>delete-confirmation-target-dim-opacity</td><td>0.5</td><td>Deckkraft der Abdunklung des Zielobjekts bei geöffnetem Overlay.</td></tr>
+        <tr><td>layer-delete-confirmation-overlay</td><td>50</td><td>Layer-Stufe des Overlay-Fensters.</td></tr>
         <tr><td>notifications-card-min-width</td><td>445px</td><td>Mindestbreite der Notification Card im Pattern Notifications; 50px größer als die Object Card und Grundlage für Flex-Basis und Mindestbreite des Patterns.</td></tr>
         <tr><td>search-field-width</td><td>15.3rem</td><td>Fixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich.</td></tr>
         <tr><td>layer-pulldown-panel</td><td>40</td><td>Layer-Stufe für geöffnete Pulldown-Ausklappfelder, damit sie über anderen Inhalten liegen.</td></tr>

docs/styleguide/patterns/delete-confirmation-overlay.html

@@ -223,12 +223,6 @@
       );
       let draftListIds = new Set(committedListIds);
       let resetAddToListDraftState = () => {};
-      const updateFloatingCardHeight = (dialog) => {
-        const stageHeight = stage.getBoundingClientRect().height;
-        const floatingCardHeight = Math.max(0, Math.round(stageHeight * 0.9));
-        dialog.style.setProperty('--layout-delete-confirmation-overlay-height', `${floatingCardHeight}px`);
-      };
-
       const closeStageDialogs = ({ resetAddToListDraft = false } = {}) => {
         stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => {
           dialog.hidden = true;
@@ -389,7 +383,6 @@
 
           closeStageDialogs({ resetAddToListDraft: target === 'add-to-list' });
           dialog.hidden = false;
-          updateFloatingCardHeight(dialog);
           stage.dataset.dialogOpen = 'true';
 
           const menuWrap = link.closest('.sg-sandwich-menu-wrap');

docs/styleguide/semantic-tokens-patterns.html

@@ -131,16 +131,16 @@
       <tr><td>surface-delete-confirmation-overlay</td><td>color-light-grey</td><td>Hintergrundfläche des schwebenden Bestätigungsfensters.</td></tr>
       <tr><td>surface-delete-confirmation-target-dim-overlay</td><td>color-black</td><td>Overlay-Farbe zur Ausgrauung des Zielobjekts hinter dem Bestätigungsfenster.</td></tr>
       <tr><td>text-delete-confirmation-overlay</td><td>color-font-dark</td><td>Textfarbe im Bestätigungsfenster.</td></tr>
-      <tr><td>layout-delete-confirmation-target-max-width</td><td>35rem</td><td>Maximalbreite der abgedunkelten Ziel-Card in der Pattern-Demo.</td></tr>
+      <tr><td>layout-delete-confirmation-target-max-width</td><td>dimension-delete-confirmation-target-max-width</td><td>Maximalbreite der abgedunkelten Ziel-Card in der Pattern-Demo.</td></tr>
-      <tr><td>layout-delete-confirmation-overlay-width-factor</td><td>0.8</td><td>Breitenfaktor des schwebenden Bestätigungsfensters relativ zur Breite des Zielobjekts (80%).</td></tr>
+      <tr><td>layout-delete-confirmation-overlay-width-factor</td><td>dimension-delete-confirmation-overlay-width-factor</td><td>Breitenfaktor des schwebenden Bestätigungsfensters relativ zur Breite des Zielobjekts.</td></tr>
-      <tr><td>layout-delete-confirmation-overlay-offset-block-start</td><td>10%</td><td>Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Objektgröße.</td></tr>
+      <tr><td>layout-delete-confirmation-overlay-offset-block-start</td><td>dimension-delete-confirmation-overlay-offset-block-start</td><td>Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Parent-Höhe.</td></tr>
-      <tr><td>layout-delete-confirmation-overlay-max-height</td><td>calc(100vh - 10vh)</td><td>Maximalhöhe des Overlays relativ zum Viewport; danach scrollt der Inhalt innerhalb des Overlays.</td></tr>
+      <tr><td>layout-delete-confirmation-overlay-max-height</td><td>100% minus 2 × offset-block-start</td><td>Maximalhöhe des Overlays relativ zur Parent-Höhe; bei längeren Inhalten scrollt der bestehende Inhaltsbereich.</td></tr>
       <tr><td>layout-delete-confirmation-content-gap</td><td>spacing-small</td><td>Vertikaler Abstand zwischen den Inhaltsblöcken im Overlay.</td></tr>
       <tr><td>layout-delete-confirmation-actions-gap</td><td>spacing-small</td><td>Horizontaler Abstand zwischen Abbrechen- und Löschen-Button.</td></tr>
       <tr><td>layout-delete-confirmation-actions-offset-block-start</td><td>spacing-large</td><td>Zusätzlicher vertikaler Abstand zwischen Bestätigungs-Eingabefeld und Actions-Zeile.</td></tr>
       <tr><td>layout-delete-confirmation-label-width</td><td>dimension-input-label-width</td><td>Label-Spaltenbreite der einzeiligen Bestätigungseingabe.</td></tr>
-      <tr><td>layout-delete-confirmation-target-dim-opacity</td><td>0.5</td><td>Deckkraft der grauen Überlagerung auf dem zu löschenden Objekt (50% ausgegraut).</td></tr>
+      <tr><td>layout-delete-confirmation-target-dim-opacity</td><td>opacity-delete-confirmation-target-dim</td><td>Deckkraft der grauen Überlagerung auf dem zu löschenden Objekt.</td></tr>
-      <tr><td>layer-delete-confirmation-overlay</td><td>50</td><td>Z-Index-Layer des schwebenden Bestätigungsfensters.</td></tr>
+      <tr><td>layer-delete-confirmation-overlay</td><td>dimension-layer-delete-confirmation-overlay</td><td>Z-Index-Layer des schwebenden Bestätigungsfensters.</td></tr>
     </tbody></table>
   </section>
 

docs/styleguide/styles/01-foundations.css

@@ -229,16 +229,16 @@
   --surface-delete-confirmation-overlay: var(--color-light-grey);
   --surface-delete-confirmation-target-dim-overlay: var(--color-black);
   --text-delete-confirmation-overlay: var(--color-font-dark);
-  --layout-delete-confirmation-target-max-width: 35rem;
+  --layout-delete-confirmation-target-max-width: var(--dimension-delete-confirmation-target-max-width);
-  --layout-delete-confirmation-overlay-width-factor: 0.8;
+  --layout-delete-confirmation-overlay-width-factor: var(--dimension-delete-confirmation-overlay-width-factor);
-  --layout-delete-confirmation-overlay-offset-block-start: 10%;
+  --layout-delete-confirmation-overlay-offset-block-start: var(--dimension-delete-confirmation-overlay-offset-block-start);
-  --layout-delete-confirmation-overlay-max-height: calc(100vh - 10vh);
+  --layout-delete-confirmation-overlay-max-height: calc(100% - var(--layout-delete-confirmation-overlay-offset-block-start) - var(--layout-delete-confirmation-overlay-offset-block-start));
   --layout-delete-confirmation-content-gap: var(--spacing-small);
   --layout-delete-confirmation-actions-gap: var(--spacing-small);
   --layout-delete-confirmation-actions-offset-block-start: var(--spacing-large);
   --layout-delete-confirmation-label-width: var(--dimension-input-label-width);
-  --layout-delete-confirmation-target-dim-opacity: 0.5;
+  --layout-delete-confirmation-target-dim-opacity: var(--opacity-delete-confirmation-target-dim);
-  --layer-delete-confirmation-overlay: 50;
+  --layer-delete-confirmation-overlay: var(--dimension-layer-delete-confirmation-overlay);
 
   /* Typography */
   --font-family-base: "Open Sans", sans-serif;
@@ -292,6 +292,11 @@
   --dimension-object-group-card-min-width: 450px;
   --dimension-object-group-card-max-width: 650px;
   --dimension-object-group-card-height: 700px;
+  --dimension-delete-confirmation-target-max-width: 35rem;
+  --dimension-delete-confirmation-overlay-width-factor: 0.8;
+  --dimension-delete-confirmation-overlay-offset-block-start: 10%;
+  --opacity-delete-confirmation-target-dim: 0.5;
+  --dimension-layer-delete-confirmation-overlay: 50;
   --dimension-notification-card-width: 50%;
   --dimension-user-notification-card-width: 70%;
   --dimension-input-label-width: 9rem;

docs/styleguide/styles/27-patterns-delete-confirmation.css

@@ -42,13 +42,14 @@
 
 .sg-delete-confirmation-pattern__floating-card {
   position: absolute;
-  top: 50%;
+  top: var(--layout-delete-confirmation-overlay-offset-block-start);
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%);
   width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
   box-sizing: border-box;
   max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
-  height: var(--layout-delete-confirmation-overlay-height, auto);
+  height: auto;
+  max-height: var(--layout-delete-confirmation-overlay-max-height);
   overflow: hidden;
   z-index: var(--layer-delete-confirmation-overlay);
   box-shadow: var(--shadow-overlay);

docs/styleguide/styles/33-layouts-vsf-list-detailseite.css

@@ -48,10 +48,10 @@
 
 .sg-vsf-list-detail-page__meldungen-overlay-pattern {
   max-width: 100%;
+  --layout-delete-confirmation-overlay-offset-block-start: calc(var(--spacing-large) * 5);
 }
 
 .sg-vsf-list-detail-page__meldungen-overlay-pattern .sg-delete-confirmation-pattern__floating-card {
-  top: calc(var(--spacing-large) * 5);
   transform: translateX(-50%);
 }
 

public/assets/styleguide.upstream.css

@@ -229,16 +229,16 @@
   --surface-delete-confirmation-overlay: var(--color-light-grey);
   --surface-delete-confirmation-target-dim-overlay: var(--color-black);
   --text-delete-confirmation-overlay: var(--color-font-dark);
-  --layout-delete-confirmation-target-max-width: 35rem;
+  --layout-delete-confirmation-target-max-width: var(--dimension-delete-confirmation-target-max-width);
-  --layout-delete-confirmation-overlay-width-factor: 0.8;
+  --layout-delete-confirmation-overlay-width-factor: var(--dimension-delete-confirmation-overlay-width-factor);
-  --layout-delete-confirmation-overlay-offset-block-start: 10%;
+  --layout-delete-confirmation-overlay-offset-block-start: var(--dimension-delete-confirmation-overlay-offset-block-start);
-  --layout-delete-confirmation-overlay-max-height: calc(100vh - 10vh);
+  --layout-delete-confirmation-overlay-max-height: calc(100% - var(--layout-delete-confirmation-overlay-offset-block-start) - var(--layout-delete-confirmation-overlay-offset-block-start));
   --layout-delete-confirmation-content-gap: var(--spacing-small);
   --layout-delete-confirmation-actions-gap: var(--spacing-small);
   --layout-delete-confirmation-actions-offset-block-start: var(--spacing-large);
   --layout-delete-confirmation-label-width: var(--dimension-input-label-width);
-  --layout-delete-confirmation-target-dim-opacity: 0.5;
+  --layout-delete-confirmation-target-dim-opacity: var(--opacity-delete-confirmation-target-dim);
-  --layer-delete-confirmation-overlay: 50;
+  --layer-delete-confirmation-overlay: var(--dimension-layer-delete-confirmation-overlay);
 
   /* Typography */
   --font-family-base: "Open Sans", sans-serif;
@@ -292,6 +292,11 @@
   --dimension-object-group-card-min-width: 450px;
   --dimension-object-group-card-max-width: 650px;
   --dimension-object-group-card-height: 700px;
+  --dimension-delete-confirmation-target-max-width: 35rem;
+  --dimension-delete-confirmation-overlay-width-factor: 0.8;
+  --dimension-delete-confirmation-overlay-offset-block-start: 10%;
+  --opacity-delete-confirmation-target-dim: 0.5;
+  --dimension-layer-delete-confirmation-overlay: 50;
   --dimension-notification-card-width: 50%;
   --dimension-user-notification-card-width: 70%;
   --dimension-input-label-width: 9rem;
@@ -2969,13 +2974,14 @@ section + section {
 
 .sg-delete-confirmation-pattern__floating-card {
   position: absolute;
-  top: 50%;
+  top: var(--layout-delete-confirmation-overlay-offset-block-start);
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%);
   width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
   box-sizing: border-box;
   max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
-  height: var(--layout-delete-confirmation-overlay-height, auto);
+  height: auto;
+  max-height: var(--layout-delete-confirmation-overlay-max-height);
   overflow: hidden;
   z-index: var(--layer-delete-confirmation-overlay);
   box-shadow: var(--shadow-overlay);
@@ -3646,10 +3652,10 @@ main {
 
 .sg-vsf-list-detail-page__meldungen-overlay-pattern {
   max-width: 100%;
+  --layout-delete-confirmation-overlay-offset-block-start: calc(var(--spacing-large) * 5);
 }
 
 .sg-vsf-list-detail-page__meldungen-overlay-pattern .sg-delete-confirmation-pattern__floating-card {
-  top: calc(var(--spacing-large) * 5);
   transform: translateX(-50%);
 }
 

public/assets/styleguide.upstream.meta.json

@@ -1,7 +1,7 @@
 {
   "styleguideVersion": "2026.05.18.1",
-  "styleguideCommit": "ed1c450",
+  "styleguideCommit": "3f4ec38",
-  "syncedAtUtc": "2026-08-31T10:57:00Z",
+  "syncedAtUtc": "2026-09-03T15:57:49Z",
   "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
   "mirroredDocsPath": "docs/styleguide"
 }

public/assets/styles.css

@@ -229,16 +229,16 @@
   --surface-delete-confirmation-overlay: var(--color-light-grey);
   --surface-delete-confirmation-target-dim-overlay: var(--color-black);
   --text-delete-confirmation-overlay: var(--color-font-dark);
-  --layout-delete-confirmation-target-max-width: 35rem;
+  --layout-delete-confirmation-target-max-width: var(--dimension-delete-confirmation-target-max-width);
-  --layout-delete-confirmation-overlay-width-factor: 0.8;
+  --layout-delete-confirmation-overlay-width-factor: var(--dimension-delete-confirmation-overlay-width-factor);
-  --layout-delete-confirmation-overlay-offset-block-start: 10%;
+  --layout-delete-confirmation-overlay-offset-block-start: var(--dimension-delete-confirmation-overlay-offset-block-start);
-  --layout-delete-confirmation-overlay-max-height: calc(100vh - 10vh);
+  --layout-delete-confirmation-overlay-max-height: calc(100% - var(--layout-delete-confirmation-overlay-offset-block-start) - var(--layout-delete-confirmation-overlay-offset-block-start));
   --layout-delete-confirmation-content-gap: var(--spacing-small);
   --layout-delete-confirmation-actions-gap: var(--spacing-small);
   --layout-delete-confirmation-actions-offset-block-start: var(--spacing-large);
   --layout-delete-confirmation-label-width: var(--dimension-input-label-width);
-  --layout-delete-confirmation-target-dim-opacity: 0.5;
+  --layout-delete-confirmation-target-dim-opacity: var(--opacity-delete-confirmation-target-dim);
-  --layer-delete-confirmation-overlay: 50;
+  --layer-delete-confirmation-overlay: var(--dimension-layer-delete-confirmation-overlay);
 
   /* Typography */
   --font-family-base: "Open Sans", sans-serif;
@@ -292,6 +292,11 @@
   --dimension-object-group-card-min-width: 450px;
   --dimension-object-group-card-max-width: 650px;
   --dimension-object-group-card-height: 700px;
+  --dimension-delete-confirmation-target-max-width: 35rem;
+  --dimension-delete-confirmation-overlay-width-factor: 0.8;
+  --dimension-delete-confirmation-overlay-offset-block-start: 10%;
+  --opacity-delete-confirmation-target-dim: 0.5;
+  --dimension-layer-delete-confirmation-overlay: 50;
   --dimension-notification-card-width: 50%;
   --dimension-user-notification-card-width: 70%;
   --dimension-input-label-width: 9rem;
@@ -2969,13 +2974,14 @@ section + section {
 
 .sg-delete-confirmation-pattern__floating-card {
   position: absolute;
-  top: 50%;
+  top: var(--layout-delete-confirmation-overlay-offset-block-start);
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%);
   width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
   box-sizing: border-box;
   max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
-  height: var(--layout-delete-confirmation-overlay-height, auto);
+  height: auto;
+  max-height: var(--layout-delete-confirmation-overlay-max-height);
   overflow: hidden;
   z-index: var(--layer-delete-confirmation-overlay);
   box-shadow: var(--shadow-overlay);
@@ -3646,10 +3652,10 @@ main {
 
 .sg-vsf-list-detail-page__meldungen-overlay-pattern {
   max-width: 100%;
+  --layout-delete-confirmation-overlay-offset-block-start: calc(var(--spacing-large) * 5);
 }
 
 .sg-vsf-list-detail-page__meldungen-overlay-pattern .sg-delete-confirmation-pattern__floating-card {
-  top: calc(var(--spacing-large) * 5);
   transform: translateX(-50%);
 }