Rename delete confirmation overlay pattern to overlay card

2026-05-28 09:36:04 +02:00
parent ad5e38aadf
commit 749b287f16
5 changed files with 9 additions and 9 deletions
@@ -49,7 +49,7 @@
        <li><a href="./patterns/formular-mit-abschnitten.html">Formular mit Abschnitten</a></li>
        <li><a href="./patterns/multiselektions-pulldown.html">Multiselektions-Pulldown</a></li>
        <li><a href="./patterns/text-layouts.html">Text Layouts</a></li>
-        <li><a href="./patterns/delete-confirmation-overlay.html">Delete Confirmation Overlay</a></li>
+        <li><a href="./patterns/delete-confirmation-overlay.html">Overlay Card</a></li>
      </ul>
    </section>

@@ -3,17 +3,17 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Styleguide – Pattern Delete Confirmation Overlay</title>
+  <title>Styleguide – Pattern Overlay Card</title>
  <link rel="stylesheet" href="../styleguide.css">
 </head>
 <body>

-  <h1 class="sg-main-heading">Pattern – Delete Confirmation Overlay</h1>
+  <h1 class="sg-main-heading">Pattern - Overlay Card</h1>

-  <section id="pattern-delete-confirmation-overlay" class="sg-delete-confirmation-pattern">
-    <p class="sg-preview-label">Pattern: Löschbestätigung mit Overlay</p>
+  <section id="pattern-overlay-card" class="sg-delete-confirmation-pattern">
+    <p class="sg-preview-label">Pattern: Overlay Card</p>

-    <div class="sg-delete-confirmation-pattern__stage" data-pattern="delete-confirmation-overlay">
+    <div class="sg-delete-confirmation-pattern__stage" data-pattern="overlay-card">
      <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>
@@ -229,7 +229,7 @@
    </div>

    <h2 class="sg-sub-heading sg-section-h2">Layout 4: Liste löschen</h2>
-    <div class="sg-object-card-grid sg-delete-confirmation-pattern__stage" data-pattern="delete-confirmation-overlay" aria-label="VSF List Card Layout Liste löschen">
+    <div class="sg-object-card-grid sg-delete-confirmation-pattern__stage" data-pattern="overlay-card" aria-label="VSF List Card Layout Liste löschen">
      <article class="sg-card sg-object-card sg-delete-confirmation-pattern__target" data-pattern="object-group-card" aria-label="List Card">
        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header">
          <div class="sg-strong">NAME DER LISTE</div>
@@ -92,7 +92,7 @@
      <tr><td>layout-multiselect-pulldown-label-column-width-fallback</td><td>max-content</td><td>Fallback-Breite der gemeinsamen Labelspalte im Panel, bis die längste Labelbreite per Pattern-Logik ermittelt wurde.</td></tr>
    </tbody></table>

-    <h3 class="sg-sub-heading sg-section-h3">Delete Confirmation Overlay</h3>
+    <h3 class="sg-sub-heading sg-section-h3">Overlay Card</h3>
    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
      <tr><td>surface-delete-confirmation-overlay</td><td>color-light-grey</td><td>Hintergrundfläche des schwebenden Bestätigungsfensters.</td></tr>
      <tr><td>surface-delete-confirmation-target-dim-overlay</td><td>color-black</td><td>Overlay-Farbe zur Ausgrauung des Zielobjekts hinter dem Bestätigungsfenster.</td></tr>
@@ -1,5 +1,5 @@
 /* ========================================================= */
-/* Patterns: Delete Confirmation Overlay                     */
+/* Patterns: Overlay Card                                    */
 /* ========================================================= */

 .sg-delete-confirmation-pattern {