@magic-spells/dialog-panel 1.1.0 → 1.1.1

package/dist/dialog-panel.css

@@ -116,84 +116,96 @@ dialog-panel[state='hiding'] > dialog-backdrop {
 
 /* ============================================================
    Position variants — drawer-style slide-in animations.
-   Default (no position attr, or position="center") uses the
-   centered fade/scale animation defined above.
+   Self-contained: declares its own `position: fixed` and
+   explicit inset values so it doesn't rely on the UA's
+   `dialog:modal` styling or on consumer body overflow rules.
+   Default (no position attr) uses the centered fade/scale
+   animation defined above.
    ============================================================ */
 
+/* Shared base for all four drawer positions */
+dialog-panel[position='top'] > dialog,
+dialog-panel[position='right'] > dialog,
+dialog-panel[position='bottom'] > dialog,
+dialog-panel[position='left'] > dialog {
+	position: fixed;
+	margin: 0;
+	max-width: 100%;
+	opacity: 1;
+}
+
 /* ---- Top drawer ---- */
 dialog-panel[position='top'] > dialog {
-	margin: 0 auto auto auto;
+	top: 0;
+	right: 0;
+	bottom: auto;
+	left: 0;
 	width: 100%;
-	max-width: 100%;
 	max-height: 85vh;
-}
-
-dialog-panel[position='top'][state='showing'] > dialog,
-dialog-panel[position='top'][state='hiding'] > dialog {
-	opacity: 1;
 	transform: translateY(-100%);
 }
 
 dialog-panel[position='top'][state='shown'] > dialog {
-	opacity: 1;
 	transform: translateY(0);
 }
 
 /* ---- Bottom drawer ---- */
 dialog-panel[position='bottom'] > dialog {
-	margin: auto auto 0 auto;
+	top: auto;
+	right: 0;
+	bottom: 0;
+	left: 0;
 	width: 100%;
-	max-width: 100%;
 	max-height: 85vh;
-}
-
-dialog-panel[position='bottom'][state='showing'] > dialog,
-dialog-panel[position='bottom'][state='hiding'] > dialog {
-	opacity: 1;
 	transform: translateY(100%);
 }
 
 dialog-panel[position='bottom'][state='shown'] > dialog {
-	opacity: 1;
 	transform: translateY(0);
 }
 
 /* ---- Left drawer ---- */
 dialog-panel[position='left'] > dialog {
-	margin: auto auto auto 0;
+	top: 0;
+	right: auto;
+	bottom: 0;
+	left: 0;
+	width: min(24rem, 90vw);
 	height: 100dvh;
 	max-height: 100dvh;
-	width: min(24rem, 90vw);
-	max-width: 100%;
-}
-
-dialog-panel[position='left'][state='showing'] > dialog,
-dialog-panel[position='left'][state='hiding'] > dialog {
-	opacity: 1;
 	transform: translateX(-100%);
 }
 
 dialog-panel[position='left'][state='shown'] > dialog {
-	opacity: 1;
 	transform: translateX(0);
 }
 
 /* ---- Right drawer ---- */
 dialog-panel[position='right'] > dialog {
-	margin: auto 0 auto auto;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: auto;
+	width: min(24rem, 90vw);
 	height: 100dvh;
 	max-height: 100dvh;
-	width: min(24rem, 90vw);
-	max-width: 100%;
-}
-
-dialog-panel[position='right'][state='showing'] > dialog,
-dialog-panel[position='right'][state='hiding'] > dialog {
-	opacity: 1;
 	transform: translateX(100%);
 }
 
 dialog-panel[position='right'][state='shown'] > dialog {
-	opacity: 1;
 	transform: translateX(0);
 }
+
+/* ============================================================
+   Page scroll lock — prevents the underlying page from
+   scrolling while any dialog-panel is open or animating.
+   Keyed on the package's own [state='*'] attributes so it
+   activates from the first frame of the opening animation
+   and stays through the closing animation, regardless of
+   when the native <dialog>'s [open] attribute is toggled.
+   ============================================================ */
+body:has(dialog-panel[state='showing']),
+body:has(dialog-panel[state='shown']),
+body:has(dialog-panel[state='hiding']) {
+	overflow: hidden;
+}

package/dist/dialog-panel.min.css

@@ -1 +1 @@
-dialog-panel{display:contents}dialog-panel>dialog{border:none;box-shadow:0 10px 25px rgba(0,0,0,.15);max-height:85vh;max-width:32rem;opacity:0;overflow:visible;padding:0;transform:scale(.95);transition:opacity .3s ease-out,transform .3s ease-out;width:90vw}dialog-panel:has(dialog-backdrop)>dialog::backdrop{background:transparent}dialog-panel:not(:has(dialog-backdrop))>dialog::backdrop{background:rgba(0,0,0,.3);opacity:0;transition:opacity .3s ease-out}dialog-backdrop{background:rgba(0,0,0,.3);height:200dvh;left:50%;opacity:0;pointer-events:none;position:fixed;top:50%;transform:translateY(-50%) translateX(-50%);transition:opacity .3s ease-out;width:200vw;z-index:9999999}dialog-panel[state=showing]>dialog{opacity:0;transform:scale(.95)}dialog-panel:not(:has(dialog-backdrop))[state=showing]>dialog::backdrop{opacity:0}dialog-panel[state=shown]>dialog{opacity:1;transform:scale(1)}dialog-panel:not(:has(dialog-backdrop))[state=shown]>dialog::backdrop{opacity:1}dialog-panel[state=hiding]>dialog{opacity:0;transform:scale(.95);transition:opacity .2s ease-in,transform .2s ease-in}dialog-panel:not(:has(dialog-backdrop))[state=hiding]>dialog::backdrop{opacity:0;transition:opacity .2s ease-in}dialog-panel[state=hidden]>dialog-backdrop,dialog-panel[state=showing]>dialog-backdrop{opacity:0;pointer-events:none}dialog-panel[state=shown]>dialog-backdrop{opacity:1;pointer-events:auto}dialog-panel[state=hiding]>dialog-backdrop{opacity:0;pointer-events:none;transition:opacity .2s ease-in}dialog-panel[position=top]>dialog{margin:0 auto auto;max-height:85vh;max-width:100%;width:100%}dialog-panel[position=top][state=hiding]>dialog,dialog-panel[position=top][state=showing]>dialog{opacity:1;transform:translateY(-100%)}dialog-panel[position=top][state=shown]>dialog{opacity:1;transform:translateY(0)}dialog-panel[position=bottom]>dialog{margin:auto auto 0;max-height:85vh;max-width:100%;width:100%}dialog-panel[position=bottom][state=hiding]>dialog,dialog-panel[position=bottom][state=showing]>dialog{opacity:1;transform:translateY(100%)}dialog-panel[position=bottom][state=shown]>dialog{opacity:1;transform:translateY(0)}dialog-panel[position=left]>dialog{height:100dvh;margin:auto auto auto 0;max-height:100dvh;max-width:100%;width:min(24rem,90vw)}dialog-panel[position=left][state=hiding]>dialog,dialog-panel[position=left][state=showing]>dialog{opacity:1;transform:translateX(-100%)}dialog-panel[position=left][state=shown]>dialog{opacity:1;transform:translateX(0)}dialog-panel[position=right]>dialog{height:100dvh;margin:auto 0 auto auto;max-height:100dvh;max-width:100%;width:min(24rem,90vw)}dialog-panel[position=right][state=hiding]>dialog,dialog-panel[position=right][state=showing]>dialog{opacity:1;transform:translateX(100%)}dialog-panel[position=right][state=shown]>dialog{opacity:1;transform:translateX(0)}
+dialog-panel{display:contents}dialog-panel>dialog{border:none;box-shadow:0 10px 25px rgba(0,0,0,.15);max-height:85vh;max-width:32rem;opacity:0;overflow:visible;padding:0;transform:scale(.95);transition:opacity .3s ease-out,transform .3s ease-out;width:90vw}dialog-panel:has(dialog-backdrop)>dialog::backdrop{background:transparent}dialog-panel:not(:has(dialog-backdrop))>dialog::backdrop{background:rgba(0,0,0,.3);opacity:0;transition:opacity .3s ease-out}dialog-backdrop{background:rgba(0,0,0,.3);height:200dvh;left:50%;opacity:0;pointer-events:none;position:fixed;top:50%;transform:translateY(-50%) translateX(-50%);transition:opacity .3s ease-out;width:200vw;z-index:9999999}dialog-panel[state=showing]>dialog{opacity:0;transform:scale(.95)}dialog-panel:not(:has(dialog-backdrop))[state=showing]>dialog::backdrop{opacity:0}dialog-panel[state=shown]>dialog{opacity:1;transform:scale(1)}dialog-panel:not(:has(dialog-backdrop))[state=shown]>dialog::backdrop{opacity:1}dialog-panel[state=hiding]>dialog{opacity:0;transform:scale(.95);transition:opacity .2s ease-in,transform .2s ease-in}dialog-panel:not(:has(dialog-backdrop))[state=hiding]>dialog::backdrop{opacity:0;transition:opacity .2s ease-in}dialog-panel[state=hidden]>dialog-backdrop,dialog-panel[state=showing]>dialog-backdrop{opacity:0;pointer-events:none}dialog-panel[state=shown]>dialog-backdrop{opacity:1;pointer-events:auto}dialog-panel[state=hiding]>dialog-backdrop{opacity:0;pointer-events:none;transition:opacity .2s ease-in}dialog-panel[position=bottom]>dialog,dialog-panel[position=left]>dialog,dialog-panel[position=right]>dialog,dialog-panel[position=top]>dialog{margin:0;max-width:100%;opacity:1;position:fixed}dialog-panel[position=top]>dialog{bottom:auto;left:0;max-height:85vh;right:0;top:0;transform:translateY(-100%);width:100%}dialog-panel[position=top][state=shown]>dialog{transform:translateY(0)}dialog-panel[position=bottom]>dialog{bottom:0;left:0;max-height:85vh;right:0;top:auto;transform:translateY(100%);width:100%}dialog-panel[position=bottom][state=shown]>dialog{transform:translateY(0)}dialog-panel[position=left]>dialog{bottom:0;height:100dvh;left:0;max-height:100dvh;right:auto;top:0;transform:translateX(-100%);width:min(24rem,90vw)}dialog-panel[position=left][state=shown]>dialog{transform:translateX(0)}dialog-panel[position=right]>dialog{bottom:0;height:100dvh;left:auto;max-height:100dvh;right:0;top:0;transform:translateX(100%);width:min(24rem,90vw)}dialog-panel[position=right][state=shown]>dialog{transform:translateX(0)}body:has(dialog-panel[state=hiding]),body:has(dialog-panel[state=showing]),body:has(dialog-panel[state=shown]){overflow:hidden}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magic-spells/dialog-panel",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A lightweight web component wrapper for native <dialog> elements with state-driven animations.",
   "author": "Cory Schulz",
   "license": "MIT",