From ce964e21e3e40bde73bb78d807199b4d7ca672d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Mon, 1 Jun 2026 16:49:53 +0200
Subject: [PATCH] Add keyboard-nav notification card group to VSF Meldungen

---
 patterns/vsf-meldungen.html | 143 ++++++++++++++++++++++++++++++++++++
 1 file changed, 143 insertions(+)

diff --git a/patterns/vsf-meldungen.html b/patterns/vsf-meldungen.html
index cf29061..1090f67 100644
--- a/patterns/vsf-meldungen.html
+++ b/patterns/vsf-meldungen.html
@@ -140,6 +140,77 @@
         <h1 class="sg-heading-h1 sg-vsf-list-detail-page__title">Meldungen</h1>
       </div>
 
+      <div class="sg-content-block-card-group" data-pattern="card-gruppe-mit-tastennavigation-vsf-meldungen">
+        <div class="sg-tab-button-group sg-content-block-card-group__tabs" role="tablist" aria-label="Meldungen Navigation" data-component="tab-navigation" data-component-size="large">
+          <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" aria-controls="vsf-meldungen-panel-updates" id="vsf-meldungen-tab-updates" data-component-part="tab-button">Updates</button>
+          <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-meldungen-panel-termine" id="vsf-meldungen-tab-termine" data-component-part="tab-button">Termine</button>
+        </div>
+
+        <div class="sg-content-block-card-group__panels">
+          <div class="sg-content-block-card-group__panel" id="vsf-meldungen-panel-updates" role="tabpanel" aria-labelledby="vsf-meldungen-tab-updates">
+            <div class="sg-preview-area sg-notifications-pattern" aria-label="Updates Meldungen">
+              <article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
+                <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
+                  <p class="sg-body">Update-Hinweis mit hoher Priorität zur Illustration.</p>
+                </div>
+                <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
+                  <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
+                </div>
+              </article>
+
+              <article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
+                <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" data-component-part="card-header">
+                  <p class="sg-body">Update-Hinweis im positiven Bereich zur Illustration.</p>
+                </div>
+                <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
+                  <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
+                </div>
+              </article>
+
+              <article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
+                <div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
+                  <p class="sg-body">Neutraler Update-Hinweis zur Illustration.</p>
+                </div>
+                <div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
+                  <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
+                </div>
+              </article>
+            </div>
+          </div>
+
+          <div class="sg-content-block-card-group__panel" id="vsf-meldungen-panel-termine" role="tabpanel" aria-labelledby="vsf-meldungen-tab-termine" hidden>
+            <div class="sg-preview-area sg-notifications-pattern" aria-label="Termine Meldungen">
+              <article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
+                <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
+                  <p class="sg-body">Terminwarnung mit hoher Priorität zur Illustration.</p>
+                </div>
+                <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
+                  <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
+                </div>
+              </article>
+
+              <article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
+                <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" data-component-part="card-header">
+                  <p class="sg-body">Terminhinweis im positiven Bereich zur Illustration.</p>
+                </div>
+                <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
+                  <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
+                </div>
+              </article>
+
+              <article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
+                <div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
+                  <p class="sg-body">Neutraler Terminhinweis zur Illustration.</p>
+                </div>
+                <div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
+                  <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
+                </div>
+              </article>
+            </div>
+          </div>
+        </div>
+      </div>
+
     </article>
 
   <script src="../scripts/help-icon-overlays.js"></script>
@@ -376,6 +447,78 @@
       });
     });
   </script>
+  <script>
+    const tabGroup = document.querySelector('[data-pattern="card-gruppe-mit-tastennavigation-vsf-meldungen"]');
+
+    if (tabGroup) {
+      const tabs = Array.from(tabGroup.querySelectorAll('[role="tab"]'));
+      const panels = Array.from(tabGroup.querySelectorAll('[role="tabpanel"]'));
+      const tabList = tabGroup.querySelector('[role="tablist"]');
+
+      const applyMobileBalancedTabRows = () => {
+        if (!tabList) {
+          return;
+        }
+
+        tabs.forEach((tab) => {
+          tab.style.removeProperty('--sg-tab-mobile-row-slots');
+        });
+
+        if (window.matchMedia('(min-width: 768px)').matches || tabs.length <= 3) {
+          return;
+        }
+
+        const maxItemsPerRow = 3;
+        const rowCount = Math.ceil(tabs.length / maxItemsPerRow);
+        const baseRowSize = Math.floor(tabs.length / rowCount);
+        const rowRemainder = tabs.length % rowCount;
+        let tabStartIndex = 0;
+
+        for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
+          const rowSize = baseRowSize + (rowIndex < rowRemainder ? 1 : 0);
+          for (let itemOffset = 0; itemOffset < rowSize; itemOffset += 1) {
+            const tab = tabs[tabStartIndex + itemOffset];
+            if (tab) {
+              tab.style.setProperty('--sg-tab-mobile-row-slots', String(rowSize));
+            }
+          }
+          tabStartIndex += rowSize;
+        }
+      };
+
+      const activateTab = (targetTab) => {
+        tabs.forEach((tab) => {
+          tab.setAttribute('aria-selected', String(tab === targetTab));
+        });
+
+        panels.forEach((panel) => {
+          panel.hidden = panel.id !== targetTab.getAttribute('aria-controls');
+        });
+      };
+
+      tabs.forEach((tab, index) => {
+        tab.addEventListener('click', () => {
+          activateTab(tab);
+        });
+
+        tab.addEventListener('keydown', (event) => {
+          if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') {
+            return;
+          }
+
+          event.preventDefault();
+          const direction = event.key === 'ArrowRight' ? 1 : -1;
+          const nextIndex = (index + direction + tabs.length) % tabs.length;
+          const nextTab = tabs[nextIndex];
+          nextTab.focus();
+          activateTab(nextTab);
+        });
+      });
+
+      applyMobileBalancedTabRows();
+      window.addEventListener('resize', applyMobileBalancedTabRows);
+    }
+  </script>
 
 </body>
 </html>