Adjust delete overlay dimming, sizing, and object card composition

patterns/delete-confirmation-overlay.html

@@ -17,15 +17,30 @@
       <article class="sg-card sg-object-card sg-delete-confirmation-pattern__target" aria-label="Zu löschendes 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>
+          <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">
+              <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>
         </header>
         <div class="sg-card-segment sg-card-segment--body sg-object-card__content">
-          <p class="sg-body">Dieses Objekt wird als Ziel für die Löschbestätigung abgedunkelt, solange das schwebende Fenster sichtbar ist.</p>
+          <p class="sg-body">Objekt-Inhalt der Card. Während das Löschfenster sichtbar ist, wird dieses Objekt um 50% ausgegraut.</p>
         </div>
+        <footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment">
+          <div class="sg-object-card__actions">
+            <button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
+            <button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
+          </div>
+        </footer>
       </article>
 
       <article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="delete-confirmation-title">
         <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
-          <p class="sg-body sg-delete-confirmation-pattern__text" id="delete-confirmation-title">Möchtest du Alcon Inc. wirklich löschen?</p>
+          <p class="sg-body sg-delete-confirmation-pattern__text" id="delete-confirmation-title"><strong>Möchtest du Alcon Inc. wirklich löschen?</strong></p>
           <p class="sg-body sg-delete-confirmation-pattern__text">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">DELETE</span>.</p>
 
           <label class="sg-labeled-input-row sg-delete-confirmation-pattern__input-row">

semantic-tokens-patterns.html

@@ -97,12 +97,13 @@
       <tr><td>surface-delete-confirmation-overlay</td><td>color-light-grey</td><td>Hintergrundfläche des schwebenden Bestätigungsfensters.</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-overlay-max-width</td><td>28rem</td><td>Maximalbreite des schwebenden Bestätigungsfensters.</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-offset-block-start</td><td>spacing-large</td><td>Abstand des Overlays von der oberen Kante des Zielobjekts.</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-factor</td><td>0.6</td><td>Helligkeitsfaktor zur Abdunkelung des zu löschenden Objekts.</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>layer-delete-confirmation-overlay</td><td>50</td><td>Z-Index-Layer des schwebenden Bestätigungsfensters.</td></tr>
     </tbody></table>
   </section>

styles/01-foundations.css

@@ -200,12 +200,13 @@
   --surface-delete-confirmation-overlay: var(--color-light-grey);
   --text-delete-confirmation-overlay: var(--color-font-dark);
   --layout-delete-confirmation-target-max-width: 35rem;
-  --layout-delete-confirmation-overlay-max-width: 28rem;
+  --layout-delete-confirmation-overlay-width-factor: 0.8;
   --layout-delete-confirmation-overlay-offset-block-start: var(--spacing-large);
   --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-factor: 0.6;
+  --layout-delete-confirmation-target-dim-opacity: 0.5;
   --layer-delete-confirmation-overlay: 50;
 
   /* Typography */

styles/27-patterns-delete-confirmation.css

@@ -12,7 +12,17 @@
 }
 
 .sg-delete-confirmation-pattern__target {
-  filter: brightness(var(--layout-delete-confirmation-target-dim-factor));
+  position: relative;
+  overflow: hidden;
+}
+
+.sg-delete-confirmation-pattern__target::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--color-dark-grey);
+  opacity: var(--layout-delete-confirmation-target-dim-opacity);
+  pointer-events: none;
 }
 
 .sg-delete-confirmation-pattern__floating-card {
@@ -20,7 +30,7 @@
   top: var(--layout-delete-confirmation-overlay-offset-block-start);
   left: 50%;
   transform: translateX(-50%);
-  width: min(100%, var(--layout-delete-confirmation-overlay-max-width));
+  width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
   z-index: var(--layer-delete-confirmation-overlay);
   box-shadow: var(--shadow-overlay);
 }
@@ -53,13 +63,10 @@
   display: flex;
   justify-content: flex-end;
   gap: var(--layout-delete-confirmation-actions-gap);
+  margin-top: var(--layout-delete-confirmation-actions-offset-block-start);
 }
 
 @media (max-width: 48rem) {
-  .sg-delete-confirmation-pattern__floating-card {
-    width: 100%;
-  }
-
   .sg-delete-confirmation-pattern__actions {
     flex-wrap: wrap;
   }