modal_stack 0.2.0 → 0.4.1

data/app/assets/stylesheets/modal_stack/bootstrap.css

@@ -10,7 +10,7 @@
  *   :root { --modal-stack-radius: 4px; }
  *
  * Variants:    [data-variant="modal" | "drawer" | "bottom_sheet" | "confirmation"]
- * Drawer side: [data-side="left" | "right"]
+ * Drawer side: [data-side="left" | "right" | "top" | "bottom"]
  * Sizes:       [data-modal-stack-size="sm" | "md" | "lg" | "xl"]
  */
 
@@ -23,13 +23,16 @@
   --modal-stack-fg: var(--bs-body-color, #212529);
   --modal-stack-shadow: var(--bs-box-shadow-lg, 0 1rem 3rem rgba(0, 0, 0, 0.175));
   --modal-stack-backdrop: rgba(var(--bs-backdrop-color, 0, 0, 0), var(--bs-backdrop-opacity, 0.5));
-  --modal-stack-backdrop-blur: 0;
+  /* Default `none` so Chrome skips the filter pass. Opt in with
+   * `:root { --modal-stack-backdrop-filter: blur(8px); }`. */
+  --modal-stack-backdrop-filter: none;
   --modal-stack-panel-padding: var(--bs-modal-padding, 1rem);
   --modal-stack-size-sm: 300px;
   --modal-stack-size-md: 500px;
   --modal-stack-size-lg: 800px;
   --modal-stack-size-xl: 1140px;
   --modal-stack-drawer-width: 400px;
+  --modal-stack-drawer-height: 22rem; /* 352px */
 }
 
 body[data-modal-stack-locked] {
@@ -65,23 +68,22 @@ body[data-modal-stack-locked] {
 
 #modal-stack-root::backdrop {
   background: rgba(0, 0, 0, 0);
-  backdrop-filter: blur(0);
   transition:
     background var(--modal-stack-duration) var(--modal-stack-ease),
-    backdrop-filter var(--modal-stack-duration) var(--modal-stack-ease),
     overlay var(--modal-stack-duration) var(--modal-stack-ease) allow-discrete,
     display var(--modal-stack-duration) var(--modal-stack-ease) allow-discrete;
 }
 
 #modal-stack-root[open]::backdrop {
   background: var(--modal-stack-backdrop);
-  backdrop-filter: blur(var(--modal-stack-backdrop-blur));
+  /* Static. Default is `none` (no filter pass). Opt in with
+   * --modal-stack-backdrop-filter on :root. */
+  backdrop-filter: var(--modal-stack-backdrop-filter);
 }
 
 @starting-style {
   #modal-stack-root[open]::backdrop {
     background: rgba(0, 0, 0, 0);
-    backdrop-filter: blur(0);
   }
 }
 
@@ -93,6 +95,7 @@ body[data-modal-stack-locked] {
   max-width: 92vw;
   max-height: min(85vh, 720px);
   overflow-y: auto;
+  overscroll-behavior: contain;
   background: var(--modal-stack-bg);
   color: var(--modal-stack-fg);
   border-radius: var(--modal-stack-radius);
@@ -101,8 +104,7 @@ body[data-modal-stack-locked] {
   transform: translate(-50%, -50%);
   transition:
     transform var(--modal-stack-duration) var(--modal-stack-ease),
-    opacity var(--modal-stack-duration) var(--modal-stack-ease),
-    filter var(--modal-stack-duration) var(--modal-stack-ease);
+    opacity var(--modal-stack-duration) var(--modal-stack-ease);
 }
 
 @starting-style {
@@ -114,13 +116,12 @@ body[data-modal-stack-locked] {
 
 [data-modal-stack-target="layer"][data-leaving] {
   opacity: 0;
-  transform: translate(-50%, -56%) scale(0.97);
+  transform: translate(-50%, -44%) scale(0.97);
   pointer-events: none;
 }
 
 [data-modal-stack-target="layer"][inert] {
   opacity: 0.5;
-  filter: blur(0.5px);
 }
 
 [data-modal-stack-target="layer"][data-modal-stack-size="sm"] { width: var(--modal-stack-size-sm); }
@@ -143,7 +144,14 @@ body[data-modal-stack-locked] {
 /* --- Drawer (Bootstrap offcanvas-flavored) ----------------------- */
 
 [data-modal-stack-target="layer"][data-variant="drawer"] {
+  left: 0;
   top: 0;
+  max-width: 100vw;
+  max-height: 100vh;
+}
+
+[data-modal-stack-target="layer"][data-variant="drawer"][data-side="right"],
+[data-modal-stack-target="layer"][data-variant="drawer"][data-side="left"] {
   height: 100vh;
   max-height: none;
   width: var(--modal-stack-drawer-width);
@@ -163,6 +171,30 @@ body[data-modal-stack-locked] {
   border-radius: 0 var(--modal-stack-radius) var(--modal-stack-radius) 0;
 }
 
+[data-modal-stack-target="layer"][data-variant="drawer"][data-side="top"] {
+  left: 0;
+  top: 0;
+  width: 100vw;
+  max-width: none;
+  height: var(--modal-stack-drawer-height);
+  max-height: 85vh;
+  transform: translateY(0);
+  border-radius: 0 0 var(--modal-stack-radius) var(--modal-stack-radius);
+}
+
+[data-modal-stack-target="layer"][data-variant="drawer"][data-side="bottom"] {
+  left: 0;
+  top: auto;
+  bottom: 0;
+  width: 100vw;
+  max-width: none;
+  height: var(--modal-stack-drawer-height);
+  max-height: 85vh;
+  transform: translateY(0);
+  border-radius: var(--modal-stack-radius) var(--modal-stack-radius) 0 0;
+  padding-bottom: env(safe-area-inset-bottom, 0);
+}
+
 @starting-style {
   [data-modal-stack-target="layer"][data-variant="drawer"][data-side="right"] {
     opacity: 0;
@@ -172,6 +204,14 @@ body[data-modal-stack-locked] {
     opacity: 0;
     transform: translateX(-100%);
   }
+  [data-modal-stack-target="layer"][data-variant="drawer"][data-side="top"] {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  [data-modal-stack-target="layer"][data-variant="drawer"][data-side="bottom"] {
+    opacity: 0;
+    transform: translateY(100%);
+  }
 }
 
 [data-modal-stack-target="layer"][data-variant="drawer"][data-side="right"][data-leaving] {
@@ -184,6 +224,16 @@ body[data-modal-stack-locked] {
   transform: translateX(-100%);
 }
 
+[data-modal-stack-target="layer"][data-variant="drawer"][data-side="top"][data-leaving] {
+  opacity: 0;
+  transform: translateY(-100%);
+}
+
+[data-modal-stack-target="layer"][data-variant="drawer"][data-side="bottom"][data-leaving] {
+  opacity: 0;
+  transform: translateY(100%);
+}
+
 /* --- Bottom sheet ------------------------------------------------ */
 
 [data-modal-stack-target="layer"][data-variant="bottom_sheet"] {
@@ -195,6 +245,7 @@ body[data-modal-stack-locked] {
   transform: translate(0, 0);
   border-radius: var(--modal-stack-radius) var(--modal-stack-radius) 0 0;
   max-height: 90vh;
+  padding-bottom: env(safe-area-inset-bottom, 0);
 }
 
 @starting-style {
@@ -223,10 +274,68 @@ body[data-modal-stack-locked] {
   gap: 0.5rem;
 }
 
+/* Path frames are transparent layout wrappers — CSS transitions can hook
+   on [data-modal-stack-frame][data-transition][data-direction] to
+   animate slide/fade. */
+[data-modal-stack-frame] {
+  display: contents;
+}
+
+[data-modal-stack-target="layer"]:has([data-modal-stack-frame][data-transition="slide"]),
+[data-modal-stack-target="layer"]:has([data-modal-stack-frame][data-transition="fade"]) {
+  overflow: hidden;
+}
+
+[data-modal-stack-frame][data-transition="slide"] {
+  display: block;
+  translate: 0 0;
+  transition: translate var(--modal-stack-duration) var(--modal-stack-ease);
+}
+
+[data-modal-stack-frame][data-transition="fade"] {
+  display: block;
+  opacity: 1;
+  transition: opacity var(--modal-stack-duration) var(--modal-stack-ease);
+}
+
+@starting-style {
+  [data-modal-stack-frame][data-transition="slide"][data-direction="forward"] {
+    translate: 100% 0;
+  }
+  [data-modal-stack-frame][data-transition="slide"][data-direction="back"] {
+    translate: -100% 0;
+  }
+  [data-modal-stack-frame][data-transition="fade"] {
+    opacity: 0;
+  }
+}
+
+.modal-stack__panel-back {
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  align-self: start;
+  justify-self: start;
+}
+
+.modal-stack__panel-back:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 4px;
+  border-radius: 2px;
+}
+
+[data-modal-stack-target="layer"][data-frame-depth="1"] .modal-stack__panel-back {
+  display: none;
+}
+
 @media (prefers-reduced-motion: reduce) {
   #modal-stack-root,
   #modal-stack-root::backdrop,
-  [data-modal-stack-target="layer"] {
+  [data-modal-stack-target="layer"],
+  [data-modal-stack-frame][data-transition] {
     transition-duration: 1ms !important;
   }
 }

data/app/assets/stylesheets/modal_stack/{tailwind.css → tailwind_v3.css}

@@ -1,11 +1,14 @@
 /*
- * modal_stack — Tailwind preset
+ * modal_stack — Tailwind v3 preset
+ *
+ * Tailwind v3 doesn't expose its design tokens as native CSS variables,
+ * so this preset ships static values aligned with the Tailwind defaults
+ * (slate text, white surface, rounded-2xl-ish radius, container sizes).
+ * Override the `--modal-stack-*` tokens on `:root` to retheme without
+ * touching the gem.
  *
  * Structural CSS for the <dialog id="modal-stack-root"> + layered
  * `[data-modal-stack-target="layer"]` setup driven by the JS runtime.
- * Visual tokens are exposed as CSS custom properties on `:root` so they
- * can be overridden globally, per scope, or via Tailwind's
- * `:root { --modal-stack-* }` declaration.
  *
  * Variants:    [data-variant="modal" | "drawer" | "bottom_sheet" | "confirmation"]
  * Drawer side: [data-side="left" | "right" | "top" | "bottom"]
@@ -27,7 +30,13 @@
   --modal-stack-fg: #0f172a;
   --modal-stack-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.35);
   --modal-stack-backdrop: rgba(15, 23, 42, 0.55);
-  --modal-stack-backdrop-blur: 2px;
+  /* `none` by default — `backdrop-filter: blur()` even at radius 0
+   * still allocates a filter layer on the compositor, and animating
+   * a non-zero radius costs ~190ms/frame on Hi-DPI displays. Opt in
+   * with `:root { --modal-stack-backdrop-filter: blur(8px); }` —
+   * the filter is applied statically when the dialog opens (no
+   * per-frame compositor cost). */
+  --modal-stack-backdrop-filter: none;
   --modal-stack-panel-padding: 24px;
   --modal-stack-size-sm: 24rem;   /* 384px */
   --modal-stack-size-md: 34rem;   /* 544px */
@@ -79,23 +88,23 @@ body[data-modal-stack-locked] {
 
 #modal-stack-root::backdrop {
   background: rgba(15, 23, 42, 0);
-  backdrop-filter: blur(0);
   transition:
     background var(--modal-stack-duration) var(--modal-stack-ease),
-    backdrop-filter var(--modal-stack-duration) var(--modal-stack-ease),
     overlay var(--modal-stack-duration) var(--modal-stack-ease) allow-discrete,
     display var(--modal-stack-duration) var(--modal-stack-ease) allow-discrete;
 }
 
 #modal-stack-root[open]::backdrop {
   background: var(--modal-stack-backdrop);
-  backdrop-filter: blur(var(--modal-stack-backdrop-blur));
+  /* Static (not in the transition list above). Default is `none` so
+   * Chrome skips the filter pass entirely. Override --modal-stack-
+   * backdrop-filter to opt in. */
+  backdrop-filter: var(--modal-stack-backdrop-filter);
 }
 
 @starting-style {
   #modal-stack-root[open]::backdrop {
     background: rgba(15, 23, 42, 0);
-    backdrop-filter: blur(0);
   }
 }
 
@@ -109,6 +118,7 @@ body[data-modal-stack-locked] {
   max-width: 92vw;
   max-height: min(85vh, 720px);
   overflow-y: auto;
+  overscroll-behavior: contain;
   background: var(--modal-stack-bg);
   color: var(--modal-stack-fg);
   border-radius: var(--modal-stack-radius);
@@ -117,8 +127,7 @@ body[data-modal-stack-locked] {
   transform: translate(-50%, -50%);
   transition:
     transform var(--modal-stack-duration) var(--modal-stack-ease),
-    opacity var(--modal-stack-duration) var(--modal-stack-ease),
-    filter var(--modal-stack-duration) var(--modal-stack-ease);
+    opacity var(--modal-stack-duration) var(--modal-stack-ease);
 }
 
 @starting-style {
@@ -130,13 +139,12 @@ body[data-modal-stack-locked] {
 
 [data-modal-stack-target="layer"][data-leaving] {
   opacity: 0;
-  transform: translate(-50%, -56%) scale(0.97);
+  transform: translate(-50%, -44%) scale(0.97);
   pointer-events: none;
 }
 
 [data-modal-stack-target="layer"][inert] {
   opacity: 0.5;
-  filter: blur(0.5px);
 }
 
 /* --- Sizes via [data-modal-stack-size] ----------------------------- */
@@ -212,6 +220,7 @@ body[data-modal-stack-locked] {
   max-height: 85vh;
   transform: translateY(0);
   border-radius: var(--modal-stack-radius) var(--modal-stack-radius) 0 0;
+  padding-bottom: env(safe-area-inset-bottom, 0);
 }
 
 @starting-style {
@@ -264,6 +273,7 @@ body[data-modal-stack-locked] {
   transform: translate(0, 0);
   border-radius: var(--modal-stack-radius) var(--modal-stack-radius) 0 0;
   max-height: 90vh;
+  padding-bottom: env(safe-area-inset-bottom, 0);
 }
 
 @starting-style {
@@ -292,12 +302,70 @@ body[data-modal-stack-locked] {
   gap: 14px;
 }
 
+/* Path frames are transparent layout wrappers — CSS transitions can hook
+   on [data-modal-stack-frame][data-transition][data-direction] to
+   animate slide/fade. */
+[data-modal-stack-frame] {
+  display: contents;
+}
+
+[data-modal-stack-target="layer"]:has([data-modal-stack-frame][data-transition="slide"]),
+[data-modal-stack-target="layer"]:has([data-modal-stack-frame][data-transition="fade"]) {
+  overflow: hidden;
+}
+
+[data-modal-stack-frame][data-transition="slide"] {
+  display: block;
+  translate: 0 0;
+  transition: translate var(--modal-stack-duration) var(--modal-stack-ease);
+}
+
+[data-modal-stack-frame][data-transition="fade"] {
+  display: block;
+  opacity: 1;
+  transition: opacity var(--modal-stack-duration) var(--modal-stack-ease);
+}
+
+@starting-style {
+  [data-modal-stack-frame][data-transition="slide"][data-direction="forward"] {
+    translate: 100% 0;
+  }
+  [data-modal-stack-frame][data-transition="slide"][data-direction="back"] {
+    translate: -100% 0;
+  }
+  [data-modal-stack-frame][data-transition="fade"] {
+    opacity: 0;
+  }
+}
+
+.modal-stack__panel-back {
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  align-self: start;
+  justify-self: start;
+}
+
+.modal-stack__panel-back:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 4px;
+  border-radius: 2px;
+}
+
+[data-modal-stack-target="layer"][data-frame-depth="1"] .modal-stack__panel-back {
+  display: none;
+}
+
 /* --- Reduced motion ---------------------------------------------- */
 
 @media (prefers-reduced-motion: reduce) {
   #modal-stack-root,
   #modal-stack-root::backdrop,
-  [data-modal-stack-target="layer"] {
+  [data-modal-stack-target="layer"],
+  [data-modal-stack-frame][data-transition] {
     transition-duration: 1ms !important;
   }
 }