diff --git a/patterns/delete-confirmation-overlay.html b/patterns/delete-confirmation-overlay.html
index 6ac1318..0c059b7 100644
--- a/patterns/delete-confirmation-overlay.html
+++ b/patterns/delete-confirmation-overlay.html
@@ -143,7 +143,47 @@
+
+
+
@@ -157,6 +197,8 @@
const confirmationSubmitButton = stage.querySelector('[data-overlay-confirmation-submit]');
const expectedConfirmationValue = stage.dataset.overlayConfirmationValue ?? '';
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 selectedListIds = new Set(
(stage.dataset.overlaySelectedLists ?? '')
.split(',')
@@ -218,6 +260,15 @@
});
}
+ if (createListForm && createListFormToggle) {
+ createListFormToggle.addEventListener('click', (event) => {
+ event.preventDefault();
+ createListForm.hidden = false;
+ createListFormToggle.setAttribute('aria-expanded', 'true');
+ createListFormToggle.disabled = true;
+ });
+ }
+
closeStageDialogs();
stage.querySelectorAll('[data-overlay-open-dialog]').forEach((link) => {
diff --git a/styles/27-patterns-delete-confirmation.css b/styles/27-patterns-delete-confirmation.css
index cf846bf..4d530e7 100644
--- a/styles/27-patterns-delete-confirmation.css
+++ b/styles/27-patterns-delete-confirmation.css
@@ -110,6 +110,10 @@
background-image: url("../assets/icons/star-outline.svg");
}
+.sg-delete-confirmation-pattern__create-list-form {
+ margin-top: var(--spacing-large);
+}
+
.sg-delete-confirmation-pattern__text {
margin: 0;
color: var(--text-delete-confirmation-overlay);