Sync styleguide 2026.05.18.1

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

@@ -83,16 +83,13 @@
         <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header">
           <div class="sg-strong">Alcon Inc.</div>
           <div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
-            <button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
+            <button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Zur Liste hinzufügen" data-component-part="sandwich-trigger" data-overlay-open-dialog="add-to-list">
               <span class="sg-sandwich-button__icon" aria-hidden="true">
                 <span class="sg-sandwich-button__line"></span>
                 <span class="sg-sandwich-button__line"></span>
                 <span class="sg-sandwich-button__line"></span>
               </span>
             </button>
-            <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link" href="#!" data-overlay-open-dialog="add-to-list">Zur Liste hinzufügen</a>
-            </div>
           </div>
         </header>
         <div class="sg-card-segment sg-card-segment--body sg-object-card__content">
@@ -146,8 +143,7 @@
           </ul>
 
           <div class="sg-delete-confirmation-pattern__actions">
-            <button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
+            <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>
-            <button class="sg-interaction-element sg-button sg-button--active" type="button" data-create-list-form-toggle aria-expanded="false">Neue Liste anlegen</button>
           </div>
         </div>
 
@@ -184,14 +180,16 @@
                 </section>
               </div>
 
-              <footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment">
-                <div class="sg-form-sections-card__actions" data-pattern-part="form-actions">
-                  <button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive sg-form-sections-card__action" type="submit" disabled aria-disabled="true">Liste anlegen</button>
-                </div>
-              </footer>
             </form>
           </div>
         </div>
+
+        <footer class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__actions-segment">
+          <div class="sg-delete-confirmation-pattern__actions sg-delete-confirmation-pattern__actions--footer">
+            <button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-cancel>Abbrechen</button>
+            <button class="sg-interaction-element sg-button sg-button--process" type="button" data-overlay-dialog-save>Speichern</button>
+          </div>
+        </footer>
       </article>
     </div>
   </section>
@@ -202,33 +200,29 @@
       const confirmationSubmitButton = stage.querySelector('[data-overlay-confirmation-submit]');
       const expectedConfirmationValue = stage.dataset.overlayConfirmationValue ?? '';
       const overlayListButtons = Array.from(stage.querySelectorAll('[data-overlay-list-toggle]'));
+      const overlayList = stage.querySelector('.sg-delete-confirmation-pattern__list');
       const createListForm = stage.querySelector('[data-create-list-form]');
       const createListFormToggle = stage.querySelector('[data-create-list-form-toggle]');
       const createListTitle = stage.querySelector('[data-create-list-title]');
       const createListSegment = stage.querySelector('[data-create-list-form]');
       const createListNameInput = stage.querySelector('[data-create-list-form] input[aria-label="Name"]');
       const createListDescriptionInput = stage.querySelector('[data-create-list-form] textarea[aria-label="Beschreibung"]');
-      const createListSubmitButton = stage.querySelector('[data-create-list-form] button[type="submit"]');
+      const isAddToListOverlay = stage.dataset.pattern === 'add-to-list-overlay';
-      const selectedListIds = new Set(
+      const committedListIds = new Set(
         (stage.dataset.overlaySelectedLists ?? '')
           .split(',')
           .map((value) => value.trim())
           .filter(Boolean)
       );
+      let draftListIds = new Set(committedListIds);
+      let resetAddToListDraftState = () => {};
 
-      const closeStageDialogs = () => {
+      const closeStageDialogs = ({ resetAddToListDraft = false } = {}) => {
         stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => {
           dialog.hidden = true;
         });
-        if (createListSegment) {
+        if (isAddToListOverlay && resetAddToListDraft) {
-          createListSegment.hidden = true;
+          resetAddToListDraftState();
-        }
-        if (createListFormToggle) {
-          createListFormToggle.disabled = false;
-          createListFormToggle.setAttribute('aria-disabled', 'false');
-          createListFormToggle.setAttribute('aria-expanded', 'false');
-          createListFormToggle.classList.remove('sg-button--inactive');
-          createListFormToggle.classList.add('sg-button--active');
         }
         stage.dataset.dialogOpen = 'false';
       };
@@ -236,12 +230,63 @@
       const syncOverlayListState = () => {
         overlayListButtons.forEach((button) => {
           const listId = button.dataset.overlayListId;
-          const isSelected = Boolean(listId && selectedListIds.has(listId));
+          const isSelected = Boolean(listId && draftListIds.has(listId));
           button.dataset.selected = String(isSelected);
           button.setAttribute('aria-pressed', String(isSelected));
         });
+      };
 
-        stage.dataset.overlaySelectedLists = Array.from(selectedListIds).join(',');
+      const bindOverlayListButton = (button) => {
+        button.addEventListener('click', (event) => {
+          event.preventDefault();
+
+          const listId = button.dataset.overlayListId;
+          if (!listId) {
+            return;
+          }
+
+          if (draftListIds.has(listId)) {
+            draftListIds.delete(listId);
+          } else {
+            draftListIds.add(listId);
+          }
+
+          syncOverlayListState();
+        });
+      };
+
+      const appendCreatedListButton = (title) => {
+        if (!overlayList) {
+          return null;
+        }
+
+        const listId = `created-${Date.now()}`;
+        const listItem = document.createElement('li');
+        listItem.className = 'sg-delete-confirmation-pattern__list-item';
+
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button';
+        button.dataset.overlayListToggle = '';
+        button.dataset.overlayListId = listId;
+        button.dataset.selected = 'true';
+        button.setAttribute('aria-pressed', 'true');
+
+        const icon = document.createElement('span');
+        icon.className = 'sg-delete-confirmation-pattern__list-icon';
+        icon.setAttribute('aria-hidden', 'true');
+
+        const label = document.createElement('span');
+        label.className = 'sg-delete-confirmation-pattern__list-label';
+        label.textContent = title;
+
+        button.append(icon, label);
+        listItem.appendChild(button);
+        overlayList.appendChild(listItem);
+        overlayListButtons.push(button);
+        bindOverlayListButton(button);
+
+        return listId;
       };
 
       if (confirmationInput && confirmationSubmitButton) {
@@ -259,46 +304,31 @@
 
       if (overlayListButtons.length > 0) {
         syncOverlayListState();
-
-        overlayListButtons.forEach((button) => {
-          button.addEventListener('click', (event) => {
-            event.preventDefault();
-
-            const listId = button.dataset.overlayListId;
-            if (!listId) {
-              return;
-            }
-
-            if (selectedListIds.has(listId)) {
-              selectedListIds.delete(listId);
-            } else {
-              selectedListIds.add(listId);
-            }
-
-            syncOverlayListState();
-          });
-        });
       }
 
       if (createListForm && createListFormToggle) {
-        const updateCreateListButtonState = () => {
+        resetAddToListDraftState = () => {
-          if (!createListSubmitButton) {
+          draftListIds = new Set(committedListIds);
-            return;
+          syncOverlayListState();
+
+          if (createListSegment) {
+            createListSegment.hidden = true;
+          }
+          if (createListFormToggle) {
+            createListFormToggle.disabled = false;
+            createListFormToggle.setAttribute('aria-disabled', 'false');
+            createListFormToggle.setAttribute('aria-expanded', 'false');
+            createListFormToggle.classList.remove('sg-button--inactive');
+            createListFormToggle.classList.add('sg-button--active');
+          }
+          if (createListNameInput) {
+            createListNameInput.value = '';
+          }
+          if (createListDescriptionInput) {
+            createListDescriptionInput.value = '';
           }
-
-          const hasName = Boolean(createListNameInput?.value.trim());
-          const hasDescription = Boolean(createListDescriptionInput?.value.trim());
-          const isActive = hasName || hasDescription;
-
-          createListSubmitButton.disabled = !isActive;
-          createListSubmitButton.setAttribute('aria-disabled', String(!isActive));
-          createListSubmitButton.classList.toggle('sg-button--process-inactive', !isActive);
         };
 
-        createListNameInput?.addEventListener('input', updateCreateListButtonState);
-        createListDescriptionInput?.addEventListener('input', updateCreateListButtonState);
-        updateCreateListButtonState();
-
         createListFormToggle.addEventListener('click', (event) => {
           event.preventDefault();
           if (createListSegment) {
@@ -309,11 +339,14 @@
           createListFormToggle.classList.add('sg-button--inactive');
           createListFormToggle.disabled = true;
           createListFormToggle.setAttribute('aria-disabled', 'true');
-          updateCreateListButtonState();
         });
       }
 
-      closeStageDialogs();
+      if (isAddToListOverlay) {
+        resetAddToListDraftState();
+      }
+
+      closeStageDialogs({ resetAddToListDraft: false });
 
       stage.querySelectorAll('[data-overlay-open-dialog]').forEach((link) => {
         link.addEventListener('click', (event) => {
@@ -326,7 +359,7 @@
             return;
           }
 
-          closeStageDialogs();
+          closeStageDialogs({ resetAddToListDraft: target === 'add-to-list' });
           dialog.hidden = false;
           stage.dataset.dialogOpen = 'true';
 
@@ -348,6 +381,34 @@
         });
       });
 
+      stage.querySelectorAll('[data-overlay-dialog-cancel]').forEach((button) => {
+        button.addEventListener('click', (event) => {
+          event.preventDefault();
+          closeStageDialogs({ resetAddToListDraft: true });
+        });
+      });
+
+      stage.querySelectorAll('[data-overlay-dialog-save]').forEach((button) => {
+        button.addEventListener('click', (event) => {
+          event.preventDefault();
+          if (isAddToListOverlay) {
+            const createdListTitle = createListNameInput?.value.trim() ?? '';
+            if (createdListTitle) {
+              const createdListId = appendCreatedListButton(createdListTitle);
+              if (createdListId) {
+                draftListIds.add(createdListId);
+                committedListIds.add(createdListId);
+              }
+            }
+
+            committedListIds.clear();
+            draftListIds.forEach((value) => committedListIds.add(value));
+            stage.dataset.overlaySelectedLists = Array.from(committedListIds).join(',');
+          }
+          closeStageDialogs({ resetAddToListDraft: true });
+        });
+      });
+
       stage.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
         const button = wrap.querySelector('.sg-sandwich-button');
         const panel = wrap.querySelector('.sg-sandwich-menu-panel');
@@ -356,6 +417,10 @@
           return;
         }
 
+        if (button.hasAttribute('data-overlay-open-dialog')) {
+          return;
+        }
+
         button.addEventListener('click', (event) => {
           event.stopPropagation();
           const nextState = wrap.dataset.open !== 'true';

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

@@ -36,6 +36,7 @@
 
 .sg-delete-confirmation-pattern__stage[data-dialog-open="true"] .sg-delete-confirmation-pattern__target::after {
   opacity: var(--layout-delete-confirmation-target-dim-opacity);
+  pointer-events: auto;
 }
 
 .sg-delete-confirmation-pattern__floating-card {
@@ -63,7 +64,7 @@
   background: var(--surface-delete-confirmation-overlay);
 }
 
-.sg-delete-confirmation-pattern__floating-card > .sg-delete-confirmation-pattern__body:has(+ .sg-delete-confirmation-pattern__create-list-segment[hidden]) {
+.sg-delete-confirmation-pattern__actions-segment {
   border-bottom-left-radius: var(--radius-card);
   border-bottom-right-radius: var(--radius-card);
 }
@@ -155,6 +156,14 @@
   margin-top: var(--layout-delete-confirmation-actions-offset-block-start);
 }
 
+.sg-delete-confirmation-pattern__actions--footer {
+  margin-top: 0;
+}
+
+.sg-delete-confirmation-pattern__create-list-toggle {
+  width: 100%;
+}
+
 @media (max-width: 48rem) {
   .sg-delete-confirmation-pattern__actions {
     flex-wrap: wrap;

public/assets/styleguide.upstream.css

@@ -2815,6 +2815,7 @@ section + section {
 
 .sg-delete-confirmation-pattern__stage[data-dialog-open="true"] .sg-delete-confirmation-pattern__target::after {
   opacity: var(--layout-delete-confirmation-target-dim-opacity);
+  pointer-events: auto;
 }
 
 .sg-delete-confirmation-pattern__floating-card {
@@ -2842,7 +2843,7 @@ section + section {
   background: var(--surface-delete-confirmation-overlay);
 }
 
-.sg-delete-confirmation-pattern__floating-card > .sg-delete-confirmation-pattern__body:has(+ .sg-delete-confirmation-pattern__create-list-segment[hidden]) {
+.sg-delete-confirmation-pattern__actions-segment {
   border-bottom-left-radius: var(--radius-card);
   border-bottom-right-radius: var(--radius-card);
 }
@@ -2934,6 +2935,14 @@ section + section {
   margin-top: var(--layout-delete-confirmation-actions-offset-block-start);
 }
 
+.sg-delete-confirmation-pattern__actions--footer {
+  margin-top: 0;
+}
+
+.sg-delete-confirmation-pattern__create-list-toggle {
+  width: 100%;
+}
+
 @media (max-width: 48rem) {
   .sg-delete-confirmation-pattern__actions {
     flex-wrap: wrap;

public/assets/styleguide.upstream.meta.json

@@ -1,7 +1,7 @@
 {
   "styleguideVersion": "2026.05.18.1",
-  "styleguideCommit": "e26adf4",
+  "styleguideCommit": "d35afc0",
-  "syncedAtUtc": "2026-06-15T15:56:24Z",
+  "syncedAtUtc": "2026-06-16T05:05:19Z",
   "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
   "mirroredDocsPath": "docs/styleguide"
 }

public/assets/styles.css

@@ -2815,6 +2815,7 @@ section + section {
 
 .sg-delete-confirmation-pattern__stage[data-dialog-open="true"] .sg-delete-confirmation-pattern__target::after {
   opacity: var(--layout-delete-confirmation-target-dim-opacity);
+  pointer-events: auto;
 }
 
 .sg-delete-confirmation-pattern__floating-card {
@@ -2842,7 +2843,7 @@ section + section {
   background: var(--surface-delete-confirmation-overlay);
 }
 
-.sg-delete-confirmation-pattern__floating-card > .sg-delete-confirmation-pattern__body:has(+ .sg-delete-confirmation-pattern__create-list-segment[hidden]) {
+.sg-delete-confirmation-pattern__actions-segment {
   border-bottom-left-radius: var(--radius-card);
   border-bottom-right-radius: var(--radius-card);
 }
@@ -2934,6 +2935,14 @@ section + section {
   margin-top: var(--layout-delete-confirmation-actions-offset-block-start);
 }
 
+.sg-delete-confirmation-pattern__actions--footer {
+  margin-top: 0;
+}
+
+.sg-delete-confirmation-pattern__create-list-toggle {
+  width: 100%;
+}
+
 @media (max-width: 48rem) {
   .sg-delete-confirmation-pattern__actions {
     flex-wrap: wrap;