Sync styleguide 2026.05.18.1

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

@@ -221,6 +221,11 @@
       );
       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) => {
@@ -382,6 +387,7 @@
 
           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/styles/27-patterns-delete-confirmation.css

@@ -9,6 +9,7 @@
 
 .sg-delete-confirmation-pattern__stage {
   position: relative;
+  overflow: visible;
 }
 
 .sg-delete-confirmation-pattern__host {
@@ -41,18 +42,22 @@
 
 .sg-delete-confirmation-pattern__floating-card {
   position: absolute;
-  top: var(--layout-delete-confirmation-overlay-offset-block-start);
+  top: 50%;
   left: 50%;
-  transform: translateX(-50%);
+  transform: translate(-50%, -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));
-  max-height: var(--layout-delete-confirmation-overlay-max-height);
+  height: var(--layout-delete-confirmation-overlay-height, auto);
   overflow: auto;
   z-index: var(--layer-delete-confirmation-overlay);
   box-shadow: var(--shadow-overlay);
 }
 
+.sg-delete-confirmation-pattern__floating-card.sg-card.sg-card--overlay-host {
+  overflow: auto;
+}
+
 .sg-delete-confirmation-pattern__floating-card[hidden] {
   display: none;
 }

public/assets/styleguide.upstream.css

@@ -2788,6 +2788,7 @@ section + section {
 
 .sg-delete-confirmation-pattern__stage {
   position: relative;
+  overflow: visible;
 }
 
 .sg-delete-confirmation-pattern__host {
@@ -2820,18 +2821,22 @@ section + section {
 
 .sg-delete-confirmation-pattern__floating-card {
   position: absolute;
-  top: var(--layout-delete-confirmation-overlay-offset-block-start);
+  top: 50%;
   left: 50%;
-  transform: translateX(-50%);
+  transform: translate(-50%, -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));
-  max-height: var(--layout-delete-confirmation-overlay-max-height);
+  height: var(--layout-delete-confirmation-overlay-height, auto);
   overflow: auto;
   z-index: var(--layer-delete-confirmation-overlay);
   box-shadow: var(--shadow-overlay);
 }
 
+.sg-delete-confirmation-pattern__floating-card.sg-card.sg-card--overlay-host {
+  overflow: auto;
+}
+
 .sg-delete-confirmation-pattern__floating-card[hidden] {
   display: none;
 }

public/assets/styleguide.upstream.meta.json

@@ -1,7 +1,7 @@
 {
   "styleguideVersion": "2026.05.18.1",
-  "styleguideCommit": "67c869b",
+  "styleguideCommit": "27bb573",
-  "syncedAtUtc": "2026-06-16T07:41:54Z",
+  "syncedAtUtc": "2026-06-16T08:53:21Z",
   "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
   "mirroredDocsPath": "docs/styleguide"
 }

public/assets/styles.css

@@ -2788,6 +2788,7 @@ section + section {
 
 .sg-delete-confirmation-pattern__stage {
   position: relative;
+  overflow: visible;
 }
 
 .sg-delete-confirmation-pattern__host {
@@ -2820,18 +2821,22 @@ section + section {
 
 .sg-delete-confirmation-pattern__floating-card {
   position: absolute;
-  top: var(--layout-delete-confirmation-overlay-offset-block-start);
+  top: 50%;
   left: 50%;
-  transform: translateX(-50%);
+  transform: translate(-50%, -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));
-  max-height: var(--layout-delete-confirmation-overlay-max-height);
+  height: var(--layout-delete-confirmation-overlay-height, auto);
   overflow: auto;
   z-index: var(--layer-delete-confirmation-overlay);
   box-shadow: var(--shadow-overlay);
 }
 
+.sg-delete-confirmation-pattern__floating-card.sg-card.sg-card--overlay-host {
+  overflow: auto;
+}
+
 .sg-delete-confirmation-pattern__floating-card[hidden] {
   display: none;
 }