From a6dd308f851889af670c60a4057fb6586709bd8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 16 Jun 2026 08:45:05 +0200
Subject: [PATCH] Sync styleguide 2026.05.18.1

---
 .../components/interactive-elements.html      |  6 ++-
 .../patterns/delete-confirmation-overlay.html | 52 ++++++++++++++++---
 public/assets/styleguide.upstream.meta.json   |  4 +-
 3 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/docs/styleguide/components/interactive-elements.html b/docs/styleguide/components/interactive-elements.html
index c4ee26f..28e833c 100644
--- a/docs/styleguide/components/interactive-elements.html
+++ b/docs/styleguide/components/interactive-elements.html
@@ -341,8 +341,9 @@
               value="Ungültige Eingabe"
               aria-label="Einzeiliges Eingabefeld mit Validierung"
               aria-invalid="true"
+              aria-describedby="single-line-invalid-feedback"
             >
-            <span class="sg-form-validation-text">Bitte eine gültige Eingabe machen.</span>
+            <span class="sg-form-validation-text" id="single-line-invalid-feedback">Bitte eine gültige Eingabe machen.</span>
           </span>
         </label>
       </div>
@@ -415,8 +416,9 @@
               rows="3"
               aria-label="Mehrzeiliges Eingabefeld mit Validierung"
               aria-invalid="true"
+              aria-describedby="multi-line-invalid-feedback"
             >Ungültige Eingabe über mehrere Zeilen</textarea>
-            <span class="sg-form-validation-text">Bitte einen längeren Text eingeben.</span>
+            <span class="sg-form-validation-text" id="multi-line-invalid-feedback">Bitte einen längeren Text eingeben.</span>
           </span>
         </label>
       </div>
diff --git a/docs/styleguide/patterns/delete-confirmation-overlay.html b/docs/styleguide/patterns/delete-confirmation-overlay.html
index 2100b90..2124044 100644
--- a/docs/styleguide/patterns/delete-confirmation-overlay.html
+++ b/docs/styleguide/patterns/delete-confirmation-overlay.html
@@ -157,13 +157,17 @@
                   <div class="sg-form-sections-card__field-group">
                     <label class="sg-labeled-input-row">
                       <span class="sg-label">Name</span>
-                      <input
-                        class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
-                        type="text"
-                        placeholder="Name eingeben"
-                        aria-label="Name"
-                        maxlength="80"
-                      >
+                      <span class="sg-input-validation-stack">
+                        <input
+                          class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
+                          type="text"
+                          placeholder="Name eingeben"
+                          aria-label="Name"
+                          maxlength="80"
+                          aria-describedby="create-list-name-error"
+                        >
+                        <span class="sg-form-validation-text" id="create-list-name-error" hidden>Eine Liste mit diesem Namen existiert bereits.</span>
+                      </span>
                     </label>
 
                     <label class="sg-labeled-input-row">
@@ -206,6 +210,7 @@
       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 createListNameError = stage.querySelector('#create-list-name-error');
       const createListDescriptionInput = stage.querySelector('[data-create-list-form] textarea[aria-label="Beschreibung"]');
       const isAddToListOverlay = stage.dataset.pattern === 'add-to-list-overlay';
       const committedListIds = new Set(
@@ -289,6 +294,20 @@
         return listId;
       };
 
+      const setCreateListNameErrorState = (isInvalid) => {
+        if (!createListNameInput || !createListNameError) {
+          return;
+        }
+
+        createListNameInput.setAttribute('aria-invalid', String(isInvalid));
+        createListNameError.hidden = !isInvalid;
+        if (!isInvalid) {
+          createListNameInput.removeAttribute('aria-describedby');
+        } else {
+          createListNameInput.setAttribute('aria-describedby', 'create-list-name-error');
+        }
+      };
+
       if (confirmationInput && confirmationSubmitButton) {
         const updateConfirmationState = () => {
           const isValid = confirmationInput.value === expectedConfirmationValue;
@@ -310,6 +329,7 @@
         resetAddToListDraftState = () => {
           draftListIds = new Set(committedListIds);
           syncOverlayListState();
+          setCreateListNameErrorState(false);
 
           if (createListSegment) {
             createListSegment.hidden = true;
@@ -331,6 +351,7 @@
 
         createListFormToggle.addEventListener('click', (event) => {
           event.preventDefault();
+          setCreateListNameErrorState(false);
           if (createListSegment) {
             createListSegment.hidden = false;
           }
@@ -393,6 +414,23 @@
           event.preventDefault();
           if (isAddToListOverlay) {
             const createdListTitle = createListNameInput?.value.trim() ?? '';
+            const existingListNames = new Set(
+              Array.from(stage.querySelectorAll('.sg-delete-confirmation-pattern__list-label'))
+                .map((label) => label.textContent?.trim().toLowerCase())
+                .filter(Boolean)
+            );
+
+            if (!createdListTitle) {
+              setCreateListNameErrorState(true);
+              return;
+            }
+
+            if (existingListNames.has(createdListTitle.toLowerCase())) {
+              setCreateListNameErrorState(true);
+              return;
+            }
+
+            setCreateListNameErrorState(false);
             if (createdListTitle) {
               const createdListId = appendCreatedListButton(createdListTitle);
               if (createdListId) {
diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json
index 20a5509..3b39da5 100644
--- a/public/assets/styleguide.upstream.meta.json
+++ b/public/assets/styleguide.upstream.meta.json
@@ -1,7 +1,7 @@
 {
   "styleguideVersion": "2026.05.18.1",
-  "styleguideCommit": "d35afc0",
-  "syncedAtUtc": "2026-06-16T05:05:19Z",
+  "styleguideCommit": "64e9b4b",
+  "syncedAtUtc": "2026-06-16T06:45:05Z",
   "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
   "mirroredDocsPath": "docs/styleguide"
 }