Implement add-to-list overlay list state

assets/icons/star-outline.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true">
+  <path d="m12 2.8 2.89 5.85 6.46.94-4.68 4.56 1.1 6.44L12 17.53 6.23 20.59l1.1-6.44L2.65 9.59l6.46-.94L12 2.8Z" fill="none" stroke="#000000" stroke-width="1.6" stroke-linejoin="round"/>
+</svg>

patterns/delete-confirmation-overlay.html

@@ -78,7 +78,7 @@
   <section id="pattern-add-to-list-overlay" class="sg-delete-confirmation-pattern">
     <p class="sg-preview-label">Pattern: Add to List Overlay</p>
 
-    <div class="sg-delete-confirmation-pattern__stage sg-delete-confirmation-pattern__host sg-object-card" data-pattern="add-to-list-overlay" data-dialog-open="false" data-overlay-confirmation-value="ADD">
+    <div class="sg-delete-confirmation-pattern__stage sg-delete-confirmation-pattern__host sg-object-card" data-pattern="add-to-list-overlay" data-dialog-open="false" data-overlay-selected-lists="1,2">
       <article class="sg-card sg-object-card sg-delete-confirmation-pattern__target" aria-label="Zu einer Liste hinzuzufügendes Objekt">
         <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header">
           <div class="sg-strong">Alcon Inc.</div>
@@ -108,32 +108,43 @@
 
       <article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Zur Liste hinzufügen" role="dialog" aria-modal="true" aria-labelledby="add-to-list-title" data-overlay-dialog="add-to-list" hidden>
         <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
-          <p class="sg-body sg-delete-confirmation-pattern__text" id="add-to-list-title"><strong>Möchtest du Alcon Inc. zu einer Liste hinzufügen?</strong></p>
+          <p class="sg-body sg-delete-confirmation-pattern__text" id="add-to-list-title"><strong>Füge dieses Unternehmen einer Liste hinzu</strong></p>
-          <p class="sg-body sg-delete-confirmation-pattern__text">Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">ADD</span>.</p>
 
-          <label class="sg-labeled-input-row sg-delete-confirmation-pattern__input-row">
+          <ul class="sg-delete-confirmation-pattern__list" aria-label="Listen">
-            <span class="sg-label">Bestätigung</span>
+            <li class="sg-delete-confirmation-pattern__list-item">
-            <input
+              <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">
-              class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
+                <span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span>
-              type="text"
+                <span class="sg-delete-confirmation-pattern__list-label">Liste 1</span>
-              placeholder="ADD"
+              </button>
-              aria-label="Bestätigung durch ADD"
+            </li>
-              data-overlay-confirmation-input
+            <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">
-          </label>
+                <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" type="button" data-overlay-dialog-close>Abbrechen</button>
-            <button
-              class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive"
-              type="button"
-              disabled
-              aria-disabled="true"
-              data-overlay-confirmation-submit
-              data-overlay-dialog-close
-            >
-              Hinzufügen
-            </button>
           </div>
         </div>
       </article>
@@ -145,6 +156,13 @@
       const confirmationInput = stage.querySelector('[data-overlay-confirmation-input]');
       const confirmationSubmitButton = stage.querySelector('[data-overlay-confirmation-submit]');
       const expectedConfirmationValue = stage.dataset.overlayConfirmationValue ?? '';
+      const overlayListButtons = Array.from(stage.querySelectorAll('[data-overlay-list-toggle]'));
+      const selectedListIds = new Set(
+        (stage.dataset.overlaySelectedLists ?? '')
+          .split(',')
+          .map((value) => value.trim())
+          .filter(Boolean)
+      );
 
       const closeStageDialogs = () => {
         stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => {
@@ -153,6 +171,17 @@
         stage.dataset.dialogOpen = 'false';
       };
 
+      const syncOverlayListState = () => {
+        overlayListButtons.forEach((button) => {
+          const listId = button.dataset.overlayListId;
+          const isSelected = Boolean(listId && selectedListIds.has(listId));
+          button.dataset.selected = String(isSelected);
+          button.setAttribute('aria-pressed', String(isSelected));
+        });
+
+        stage.dataset.overlaySelectedLists = Array.from(selectedListIds).join(',');
+      };
+
       if (confirmationInput && confirmationSubmitButton) {
         const updateConfirmationState = () => {
           const isValid = confirmationInput.value === expectedConfirmationValue;
@@ -166,6 +195,29 @@
         updateConfirmationState();
       }
 
+      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();
+          });
+        });
+      }
+
       closeStageDialogs();
 
       stage.querySelectorAll('[data-overlay-open-dialog]').forEach((link) => {

styles/27-patterns-delete-confirmation.css

@@ -64,6 +64,53 @@
   background: var(--surface-delete-confirmation-overlay);
 }
 
+.sg-delete-confirmation-pattern__list {
+  display: grid;
+  gap: var(--spacing-small);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sg-delete-confirmation-pattern__list-item {
+  margin: 0;
+}
+
+.sg-delete-confirmation-pattern__list-button {
+  display: inline-flex;
+  width: 100%;
+  justify-content: flex-start;
+  gap: var(--spacing-small);
+  color: var(--text-delete-confirmation-overlay);
+  background: var(--surface-control-inactive);
+}
+
+.sg-delete-confirmation-pattern__list-button[data-selected="true"] {
+  background: var(--surface-control-active);
+}
+
+.sg-delete-confirmation-pattern__list-button[data-selected="false"] {
+  background: var(--surface-control-inactive);
+}
+
+.sg-delete-confirmation-pattern__list-icon {
+  display: block;
+  flex: 0 0 auto;
+  width: 1rem;
+  height: 1rem;
+  background-color: currentColor;
+}
+
+.sg-delete-confirmation-pattern__list-button[data-selected="true"] .sg-delete-confirmation-pattern__list-icon {
+  -webkit-mask: url("../assets/icons/star-filled.svg") no-repeat center / contain;
+  mask: url("../assets/icons/star-filled.svg") no-repeat center / contain;
+}
+
+.sg-delete-confirmation-pattern__list-button[data-selected="false"] .sg-delete-confirmation-pattern__list-icon {
+  -webkit-mask: url("../assets/icons/star-outline.svg") no-repeat center / contain;
+  mask: url("../assets/icons/star-outline.svg") no-repeat center / contain;
+}
+
 .sg-delete-confirmation-pattern__text {
   margin: 0;
   color: var(--text-delete-confirmation-overlay);