@magic-spells/dialog-panel 0.3.0 → 1.0.1

package/dist/dialog-panel.css

@@ -1,71 +1,117 @@
-:root {
-  --dp-overlay-z-index: 1000;
-  --dp-overlay-background: rgba(20, 23, 26, 0.4);
-  --dp-overlay-backdrop-filter: blur(2px) saturate(120%);
-  --dp-overlay-transition: all 400ms ease-out;
-  --dp-content-display: block;
-  --dp-content-background: white;
-  --dp-content-z-index: 1001;
-  --dp-content-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
-  --dp-content-border-radius: 8px;
-  --dp-transition-duration: 400ms;
-  --dp-transition-timing: ease-out;
-}
+/**
+ * dialog-panel basic centered modal styles
+ *
+ * This provides a simple fade in/out animation for a centered modal dialog.
+ * Developers can customize or replace these styles to match their design.
+ */
 
+/* Wrapper doesn't affect layout */
 dialog-panel {
-  /* Make it take no space and be invisible in the document flow */
-  display: contents;
+	display: contents;
+}
+
+/* Base dialog styles with transitions */
+dialog-panel > dialog {
+	border: none;
+	border-radius: 0.5rem;
+	padding: 0;
+	max-width: 32rem;
+	width: 90vw;
+	max-height: 85vh;
+	overflow: visible;
+	background: white;
+	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+
+	/* Start hidden */
+	opacity: 0;
+	transform: scale(0.95);
+
+	/* Transition always defined on base */
+	transition:
+		opacity 0.3s ease-out,
+		transform 0.3s ease-out;
+}
+
+/* When using dialog-backdrop element, make native ::backdrop transparent
+   but keep it clickable (clicks detected via bounding rect check) */
+dialog-panel:has(dialog-backdrop) > dialog::backdrop {
+	background: transparent;
+}
+
+/* Native backdrop (when not using dialog-backdrop) */
+dialog-panel:not(:has(dialog-backdrop)) > dialog::backdrop {
+	background: rgba(0, 0, 0, 0.3);
+	opacity: 0;
+	transition: opacity 0.3s ease-out;
+}
+
+/* Custom dialog-backdrop element */
+dialog-backdrop {
+	position: fixed;
+	background: rgba(0, 0, 0, 0.3);
+	opacity: 0;
+	transition: opacity 0.3s ease-out;
+	pointer-events: none;
+	z-index: 9999999;
+	top: 50%;
+	left: 50%;
+	width: 200vw;
+	height: 200dvh;
+	transform: translateY(-50%) translateX(-50%);
+}
+
+/* Showing state - dialog is open but still at initial values
+   (this is the starting point for the fade-in animation) */
+dialog-panel[state='showing'] > dialog {
+	opacity: 0;
+	transform: scale(0.95);
+}
+
+dialog-panel:not(:has(dialog-backdrop))[state='showing']
+	> dialog::backdrop {
+	opacity: 0;
 }
-dialog-panel[aria-hidden=false] dialog-overlay,
-dialog-panel[aria-hidden=false] dialog-content {
-  pointer-events: auto;
-  opacity: 1;
-  transform: scale(1);
-  filter: blur(0px);
+
+/* Shown state - fully visible (animates from showing → shown) */
+dialog-panel[state='shown'] > dialog {
+	opacity: 1;
+	transform: scale(1);
 }
 
-/* Overlay background */
-dialog-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  opacity: 0;
-  pointer-events: none;
-  z-index: var(--dp-overlay-z-index, 1000);
-  transition: var(--dp-overlay-transition, all 300ms ease-out);
-  background-color: var(--dp-overlay-background, rgba(20, 23, 26, 0.4));
-  backdrop-filter: var(--dp-overlay-backdrop-filter, blur(2px) saturate(120%));
+dialog-panel:not(:has(dialog-backdrop))[state='shown']
+	> dialog::backdrop {
+	opacity: 1;
 }
 
-dialog-content {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) scale(0.95);
-  max-width: 90vw;
-  max-height: 85vh;
-  display: var(--dp-content-display, block);
-  opacity: 0;
-  background: var(--dp-content-background, white);
-  pointer-events: none;
-  z-index: var(--dp-content-z-index, 1001);
-  box-shadow: var(--dp-content-shadow, 0 10px 25px rgba(0, 0, 0, 0.15));
-  border-radius: var(--dp-content-border-radius, 8px);
-  overflow: auto;
-  transition: opacity var(--dp-transition-duration, 300ms) var(--dp-transition-timing, ease-out), transform var(--dp-transition-duration, 300ms) var(--dp-transition-timing, ease-out);
-  /* When shown, reset transform to center */
+/* Hiding state - faster exit animation */
+dialog-panel[state='hiding'] > dialog {
+	opacity: 0;
+	transform: scale(0.95);
+	transition:
+		opacity 0.2s ease-in,
+		transform 0.2s ease-in;
 }
-dialog-panel[aria-hidden=false] dialog-content {
-  transform: translate(-50%, -50%) scale(1);
+
+dialog-panel:not(:has(dialog-backdrop))[state='hiding']
+	> dialog::backdrop {
+	opacity: 0;
+	transition: opacity 0.2s ease-in;
 }
 
-/* When explicitly hidden, remove from layout */
-dialog-content.hidden {
-  display: none;
+/* dialog-backdrop state animations */
+dialog-panel[state='showing'] > dialog-backdrop,
+dialog-panel[state='hidden'] > dialog-backdrop {
+	opacity: 0;
+	pointer-events: none;
 }
 
-body:has(dialog-panel[open]) {
-  overflow: hidden;
-}
+dialog-panel[state='shown'] > dialog-backdrop {
+	opacity: 1;
+	pointer-events: auto;
+}
+
+dialog-panel[state='hiding'] > dialog-backdrop {
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 0.2s ease-in;
+}