diff --git a/patterns/delete-confirmation-overlay.html b/patterns/delete-confirmation-overlay.html
index 0c059b7..8a3df8c 100644
--- a/patterns/delete-confirmation-overlay.html
+++ b/patterns/delete-confirmation-overlay.html
@@ -143,6 +143,11 @@
+
+
+
+
+
@@ -199,6 +199,9 @@
const overlayListButtons = Array.from(stage.querySelectorAll('[data-overlay-list-toggle]'));
const createListForm = stage.querySelector('[data-create-list-form]');
const createListFormToggle = stage.querySelector('[data-create-list-form-toggle]');
+ const createListNameInput = stage.querySelector('[data-create-list-form] input[aria-label="Name"]');
+ const createListDescriptionInput = stage.querySelector('[data-create-list-form] textarea[aria-label="Beschreibung"]');
+ const createListSubmitButton = stage.querySelector('[data-create-list-form] button[type="submit"]');
const selectedListIds = new Set(
(stage.dataset.overlaySelectedLists ?? '')
.split(',')
@@ -210,6 +213,16 @@
stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => {
dialog.hidden = true;
});
+ if (createListForm) {
+ createListForm.hidden = true;
+ }
+ if (createListFormToggle) {
+ createListFormToggle.disabled = false;
+ createListFormToggle.setAttribute('aria-disabled', 'false');
+ createListFormToggle.setAttribute('aria-expanded', 'false');
+ createListFormToggle.classList.remove('sg-button--inactive');
+ createListFormToggle.classList.add('sg-button--active');
+ }
stage.dataset.dialogOpen = 'false';
};
@@ -261,11 +274,33 @@
}
if (createListForm && createListFormToggle) {
+ const updateCreateListButtonState = () => {
+ if (!createListSubmitButton) {
+ return;
+ }
+
+ const hasName = Boolean(createListNameInput?.value.trim());
+ const hasDescription = Boolean(createListDescriptionInput?.value.trim());
+ const isActive = hasName || hasDescription;
+
+ createListSubmitButton.disabled = !isActive;
+ createListSubmitButton.setAttribute('aria-disabled', String(!isActive));
+ createListSubmitButton.classList.toggle('sg-button--process-inactive', !isActive);
+ };
+
+ createListNameInput?.addEventListener('input', updateCreateListButtonState);
+ createListDescriptionInput?.addEventListener('input', updateCreateListButtonState);
+ updateCreateListButtonState();
+
createListFormToggle.addEventListener('click', (event) => {
event.preventDefault();
createListForm.hidden = false;
createListFormToggle.setAttribute('aria-expanded', 'true');
+ createListFormToggle.classList.remove('sg-button--active');
+ createListFormToggle.classList.add('sg-button--inactive');
createListFormToggle.disabled = true;
+ createListFormToggle.setAttribute('aria-disabled', 'true');
+ updateCreateListButtonState();
});
}