From b37b0accb709d6e4d89192cdaf346d372357ffc6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 16 Jun 2026 11:00:56 +0200
Subject: [PATCH] Sync styleguide 2026.05.18.1

---
 .../patterns/delete-confirmation-overlay.html | 144 +++++++++---------
 .../27-patterns-delete-confirmation.css       |  17 ++-
 public/assets/styleguide.upstream.css         |  17 ++-
 public/assets/styleguide.upstream.meta.json   |   4 +-
 public/assets/styles.css                      |  17 ++-
 5 files changed, 120 insertions(+), 79 deletions(-)

diff --git a/docs/styleguide/patterns/delete-confirmation-overlay.html b/docs/styleguide/patterns/delete-confirmation-overlay.html
index 66e316f..4e96d0d 100644
--- a/docs/styleguide/patterns/delete-confirmation-overlay.html
+++ b/docs/styleguide/patterns/delete-confirmation-overlay.html
@@ -108,83 +108,85 @@
           <p class="sg-body sg-strong" id="add-to-list-title">Füge das Unternehmen einer Liste hinzu</p>
         </header>
 
-        <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
-          <ul class="sg-delete-confirmation-pattern__list" aria-label="Listen">
-            <li class="sg-delete-confirmation-pattern__list-item">
-              <button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="1" aria-pressed="true">
-                <span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span>
-                <span class="sg-delete-confirmation-pattern__list-label">Liste 1</span>
-              </button>
-            </li>
-            <li class="sg-delete-confirmation-pattern__list-item">
-              <button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="2" aria-pressed="true">
-                <span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span>
-                <span class="sg-delete-confirmation-pattern__list-label">Liste 2</span>
-              </button>
-            </li>
-            <li class="sg-delete-confirmation-pattern__list-item">
-              <button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="3" aria-pressed="false">
-                <span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span>
-                <span class="sg-delete-confirmation-pattern__list-label">Liste 3</span>
-              </button>
-            </li>
-            <li class="sg-delete-confirmation-pattern__list-item">
-              <button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="4" aria-pressed="false">
-                <span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span>
-                <span class="sg-delete-confirmation-pattern__list-label">Liste 4</span>
-              </button>
-            </li>
-            <li class="sg-delete-confirmation-pattern__list-item">
-              <button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="5" aria-pressed="false">
-                <span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span>
-                <span class="sg-delete-confirmation-pattern__list-label">Liste 5</span>
-              </button>
-            </li>
-          </ul>
+        <div class="sg-delete-confirmation-pattern__scroll-region">
+          <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
+            <ul class="sg-delete-confirmation-pattern__list" aria-label="Listen">
+              <li class="sg-delete-confirmation-pattern__list-item">
+                <button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="1" aria-pressed="true">
+                  <span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span>
+                  <span class="sg-delete-confirmation-pattern__list-label">Liste 1</span>
+                </button>
+              </li>
+              <li class="sg-delete-confirmation-pattern__list-item">
+                <button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="2" aria-pressed="true">
+                  <span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span>
+                  <span class="sg-delete-confirmation-pattern__list-label">Liste 2</span>
+                </button>
+              </li>
+              <li class="sg-delete-confirmation-pattern__list-item">
+                <button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="3" aria-pressed="false">
+                  <span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span>
+                  <span class="sg-delete-confirmation-pattern__list-label">Liste 3</span>
+                </button>
+              </li>
+              <li class="sg-delete-confirmation-pattern__list-item">
+                <button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="4" aria-pressed="false">
+                  <span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span>
+                  <span class="sg-delete-confirmation-pattern__list-label">Liste 4</span>
+                </button>
+              </li>
+              <li class="sg-delete-confirmation-pattern__list-item">
+                <button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="5" aria-pressed="false">
+                  <span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span>
+                  <span class="sg-delete-confirmation-pattern__list-label">Liste 5</span>
+                </button>
+              </li>
+            </ul>
 
-          <div class="sg-delete-confirmation-pattern__actions">
-            <button class="sg-interaction-element sg-button sg-button--active sg-delete-confirmation-pattern__create-list-toggle" type="button" data-create-list-form-toggle aria-expanded="false">Neue Liste anlegen</button>
+            <div class="sg-delete-confirmation-pattern__actions">
+              <button class="sg-interaction-element sg-button sg-button--active sg-delete-confirmation-pattern__create-list-toggle" type="button" data-create-list-form-toggle aria-expanded="false">Neue Liste anlegen</button>
+            </div>
           </div>
-        </div>
 
-        <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body sg-delete-confirmation-pattern__create-list-segment" data-create-list-form hidden>
-          <p class="sg-body sg-delete-confirmation-pattern__text sg-delete-confirmation-pattern__create-list-title" data-create-list-title>Füge das Unternehmen einer neuen Liste hinzu</p>
+          <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body sg-delete-confirmation-pattern__create-list-segment" data-create-list-form hidden>
+            <p class="sg-body sg-delete-confirmation-pattern__text sg-delete-confirmation-pattern__create-list-title" data-create-list-title>Füge das Unternehmen einer neuen Liste hinzu</p>
 
-          <div class="sg-form-sections-card-wrapper sg-delete-confirmation-pattern__create-list-form" aria-label="Formular mit Abschnitten">
-            <form class="sg-form-sections-card" action="#" method="post" aria-label="Neue Liste anlegen Formular">
-              <div class="sg-form-sections-card__body" data-pattern-part="form-body">
-                <section class="sg-form-sections-card__chapter" aria-label="Neue Liste">
-                  <div class="sg-form-sections-card__field-group">
-                    <label class="sg-labeled-input-row">
-                      <span class="sg-label">Name</span>
-                      <span class="sg-input-validation-stack">
-                        <input
-                          class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
-                          type="text"
-                          placeholder="Name eingeben"
-                          aria-label="Name"
-                          maxlength="80"
-                          aria-describedby="create-list-name-error"
-                        >
-                        <span class="sg-form-validation-text" id="create-list-name-error" hidden>Eine Liste mit diesem Namen existiert bereits.</span>
-                      </span>
-                    </label>
+            <div class="sg-form-sections-card-wrapper sg-delete-confirmation-pattern__create-list-form" aria-label="Formular mit Abschnitten">
+              <form class="sg-form-sections-card" action="#" method="post" aria-label="Neue Liste anlegen Formular">
+                <div class="sg-form-sections-card__body" data-pattern-part="form-body">
+                  <section class="sg-form-sections-card__chapter" aria-label="Neue Liste">
+                    <div class="sg-form-sections-card__field-group">
+                      <label class="sg-labeled-input-row">
+                        <span class="sg-label">Name</span>
+                        <span class="sg-input-validation-stack">
+                          <input
+                            class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
+                            type="text"
+                            placeholder="Name eingeben"
+                            aria-label="Name"
+                            maxlength="80"
+                            aria-describedby="create-list-name-error"
+                          >
+                          <span class="sg-form-validation-text" id="create-list-name-error" hidden>Eine Liste mit diesem Namen existiert bereits.</span>
+                        </span>
+                      </label>
 
-                    <label class="sg-labeled-input-row">
-                      <span class="sg-label">Beschreibung</span>
-                      <textarea
-                        class="sg-input-multi-line sg-form-inactive-selectable"
-                        rows="4"
-                        placeholder="Beschreibung eingeben"
-                        aria-label="Beschreibung"
-                        maxlength="350"
-                      ></textarea>
-                    </label>
-                  </div>
-                </section>
-              </div>
+                      <label class="sg-labeled-input-row">
+                        <span class="sg-label">Beschreibung</span>
+                        <textarea
+                          class="sg-input-multi-line sg-form-inactive-selectable"
+                          rows="4"
+                          placeholder="Beschreibung eingeben"
+                          aria-label="Beschreibung"
+                          maxlength="350"
+                        ></textarea>
+                      </label>
+                    </div>
+                  </section>
+                </div>
 
-            </form>
+              </form>
+            </div>
           </div>
         </div>
 
diff --git a/docs/styleguide/styles/27-patterns-delete-confirmation.css b/docs/styleguide/styles/27-patterns-delete-confirmation.css
index 9b2a9ea..dd319df 100644
--- a/docs/styleguide/styles/27-patterns-delete-confirmation.css
+++ b/docs/styleguide/styles/27-patterns-delete-confirmation.css
@@ -49,13 +49,13 @@
   box-sizing: border-box;
   max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
   height: var(--layout-delete-confirmation-overlay-height, auto);
-  overflow: auto;
+  overflow: hidden;
   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;
+  overflow: hidden;
 }
 
 .sg-delete-confirmation-pattern__floating-card[hidden] {
@@ -69,9 +69,18 @@
   background: var(--surface-delete-confirmation-overlay);
 }
 
+.sg-delete-confirmation-pattern__scroll-region {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  flex-direction: column;
+  overflow: auto;
+}
+
 .sg-delete-confirmation-pattern__actions-segment {
   border-bottom-left-radius: var(--radius-card);
   border-bottom-right-radius: var(--radius-card);
+  flex: 0 0 auto;
 }
 
 .sg-delete-confirmation-pattern__list {
@@ -165,6 +174,10 @@
   margin-top: 0;
 }
 
+.sg-delete-confirmation-pattern__scroll-region > .sg-delete-confirmation-pattern__create-list-segment {
+  flex: 0 0 auto;
+}
+
 .sg-delete-confirmation-pattern__create-list-toggle {
   width: 100%;
 }
diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css
index c4787e7..8fd149f 100644
--- a/public/assets/styleguide.upstream.css
+++ b/public/assets/styleguide.upstream.css
@@ -2828,13 +2828,13 @@ section + section {
   box-sizing: border-box;
   max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
   height: var(--layout-delete-confirmation-overlay-height, auto);
-  overflow: auto;
+  overflow: hidden;
   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;
+  overflow: hidden;
 }
 
 .sg-delete-confirmation-pattern__floating-card[hidden] {
@@ -2848,9 +2848,18 @@ section + section {
   background: var(--surface-delete-confirmation-overlay);
 }
 
+.sg-delete-confirmation-pattern__scroll-region {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  flex-direction: column;
+  overflow: auto;
+}
+
 .sg-delete-confirmation-pattern__actions-segment {
   border-bottom-left-radius: var(--radius-card);
   border-bottom-right-radius: var(--radius-card);
+  flex: 0 0 auto;
 }
 
 .sg-delete-confirmation-pattern__list {
@@ -2944,6 +2953,10 @@ section + section {
   margin-top: 0;
 }
 
+.sg-delete-confirmation-pattern__scroll-region > .sg-delete-confirmation-pattern__create-list-segment {
+  flex: 0 0 auto;
+}
+
 .sg-delete-confirmation-pattern__create-list-toggle {
   width: 100%;
 }
diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json
index 4841340..4d6b2a9 100644
--- a/public/assets/styleguide.upstream.meta.json
+++ b/public/assets/styleguide.upstream.meta.json
@@ -1,7 +1,7 @@
 {
   "styleguideVersion": "2026.05.18.1",
-  "styleguideCommit": "27bb573",
-  "syncedAtUtc": "2026-06-16T08:53:21Z",
+  "styleguideCommit": "899af96",
+  "syncedAtUtc": "2026-06-16T09:00:56Z",
   "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
   "mirroredDocsPath": "docs/styleguide"
 }
diff --git a/public/assets/styles.css b/public/assets/styles.css
index c4787e7..8fd149f 100644
--- a/public/assets/styles.css
+++ b/public/assets/styles.css
@@ -2828,13 +2828,13 @@ section + section {
   box-sizing: border-box;
   max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
   height: var(--layout-delete-confirmation-overlay-height, auto);
-  overflow: auto;
+  overflow: hidden;
   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;
+  overflow: hidden;
 }
 
 .sg-delete-confirmation-pattern__floating-card[hidden] {
@@ -2848,9 +2848,18 @@ section + section {
   background: var(--surface-delete-confirmation-overlay);
 }
 
+.sg-delete-confirmation-pattern__scroll-region {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  flex-direction: column;
+  overflow: auto;
+}
+
 .sg-delete-confirmation-pattern__actions-segment {
   border-bottom-left-radius: var(--radius-card);
   border-bottom-right-radius: var(--radius-card);
+  flex: 0 0 auto;
 }
 
 .sg-delete-confirmation-pattern__list {
@@ -2944,6 +2953,10 @@ section + section {
   margin-top: 0;
 }
 
+.sg-delete-confirmation-pattern__scroll-region > .sg-delete-confirmation-pattern__create-list-segment {
+  flex: 0 0 auto;
+}
+
 .sg-delete-confirmation-pattern__create-list-toggle {
   width: 100%;
 }