Sync styleguide 2026.05.18.1

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>

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) {