modal_stack 0.4.2 → 0.4.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1ef421729ab66f062b0cd608549828f9cec8dd70a8854ad48b94baf2932c70b0
-  data.tar.gz: 3de87974331a9634bc32baba6563f20b34da3121594a32627335bfc13b13d8df
+  metadata.gz: 992372f08bce8ea31105e8cba05c60035014852c197c38b325648eaebf154820
+  data.tar.gz: 70db58c91eda0101149fde86cec748812c7b8aff3f3908a30d6178538000c98f
 SHA512:
-  metadata.gz: 3c217b0849b43aece36f81f333cd78169db098009f4f04cab70ab79f5788949cf4f3c0e99a6aa658ea35e5700d120477e98a8903ead7ca1481f63063068d4abd
-  data.tar.gz: 4897264315c5f453abc0302b2f1b436db73ba38f5724c79c568631489d0efdb5b90fa653137ddcdc60326fac0461c3fe0d1dfc20762151c199748454fcb26d33
+  metadata.gz: 98043c481ff734f042b88f2117b766fb1dc2110dfdacbad71d66de39471999d15e1dfb368e9466964d1127b809ed4bb3a8aea4fb83847aba6163d717f75eb4bf
+  data.tar.gz: 46b3b5491dd13836ee207e62b42d2a3023ee1b65ac75da634d40a944608822b2a40e102ef39861f0208ab47a17afb4dbe0d529341c8d9611adce2ef9ba600ab5

data/CHANGELOG.md

@@ -6,6 +6,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.4.3] - 2026-05-25
+
+### Added
+- **`title:` option on `modal_stack_container`** — renders a `<header class="modal-stack__panel-header">` containing an `<h2 class="modal-stack__panel-title">` above the panel content. No output when omitted, so existing panels are unaffected.
+- **`close_button:` option on `modal_stack_container`** — renders a `×` button (`<button class="modal-stack__panel-close">`) wired to `modal-stack#pop`. Defaults to the `dismissible:` value, so dismissible layers get a close button for free and locked layers (`dismissible: false`) get none by default. Pass `close_button: false` to suppress it explicitly on a dismissible layer.
+- **CSS** for the new header slot in all four presets (`tailwind_v4`, `tailwind_v3`, `bootstrap`, `vanilla`): `.modal-stack__panel-header` (flexbox row), `.modal-stack__panel-title` (flex-1), `.modal-stack__panel-close` (transparent button, opacity hover, focus-visible ring).
+- `title` and `show_close` passed as **separate partial locals** to `_panel.html.erb` so host apps overriding the partial can consume them individually rather than receiving a pre-rendered HTML blob.
+
 ## [0.4.2] - 2026-05-15
 
 ### Added

data/README.md

@@ -279,9 +279,30 @@ options at the call site:
 ```
 
 `modal_stack_container` accepts `size:`, `variant:`, `side:`, `width:`,
-`height:`, `dismissible:`, and an `html: { class:, data:, ... }` Hash for
+`height:`, `dismissible:`, `title:`, `close_button:`, and an `html: { class:, data:, ... }` Hash for
 extra attributes on the wrapping `<div>`.
 
+Pass `title:` to render a `<header>` with an `<h2>` above the panel content.
+`close_button:` (default: inherits `dismissible:`) renders a `×` button wired to
+`modal-stack#pop` — locked layers (`dismissible: false`) get no close button by default:
+
+```erb
+<%# Dismissible — title + auto close button %>
+<%= modal_stack_container title: "Edit project", size: :md do %>
+  <%= render "form", project: @project %>
+<% end %>
+
+<%# Locked — title only, no × (close_button: defaults to false) %>
+<%= modal_stack_container title: "Are you sure?",
+                           variant: :confirmation,
+                           dismissible: false do %>
+  <button data-action="click->modal-stack#pop">Confirm</button>
+<% end %>
+
+<%# Explicit override %>
+<%= modal_stack_container title: "Info", close_button: false do %>…<% end %>
+```
+
 ### Stack-aware controllers
 
 `modal_stack_layout` switches the controller's layout to `modal` **only**
@@ -484,7 +505,7 @@ Injected into `ActionView::Base` by the engine — available in every view.
 | Helper                                            | Description |
 | ------------------------------------------------- | ----------- |
 | `modal_link_to(name, options, html_options)`      | Renders a `link_to` wired to push a layer when clicked. Accepts the modal options (`as:`, `side:`, `size:`, `width:`, `height:`, `dismissible:`) on top of standard `link_to` arguments. Falls back to plain `link_to` for Hotwire Native requests. |
-| `modal_stack_container(size:, variant:, side:, width:, height:, dismissible:, back:, transition:, html: {}) { ... }` | Wraps a panel view with the markup the JS runtime expects. `back: true` injects a back-button slot wired to `modal-stack#pathBack` (hidden by CSS at the first frame); `transition:` writes `data-modal-stack-transition` for host CSS hooks. |
+| `modal_stack_container(size:, variant:, side:, width:, height:, dismissible:, back:, transition:, title:, close_button:, html: {}) { ... }` | Wraps a panel view with the markup the JS runtime expects. `back: true` injects a back-button slot wired to `modal-stack#pathBack` (hidden by CSS at the first frame); `transition:` writes `data-modal-stack-transition` for host CSS hooks. `title:` renders a `<header>` with `<h2>`; `close_button:` (default: `dismissible:` value) renders a `×` close button. |
 | `modal_back_link(name = nil, **opts) { ... }`     | Renders a `<button>` wired to the `modal-stack-back-link` Stimulus controller. Pass `steps:` (default `1`) to walk back multiple frames in a single click — clamped at the first frame, never closes the layer. Block form supported for custom markup (e.g. `<%= modal_back_link(class: "btn") { "← Back" } %>`). |
 | `modal_stack_stylesheet_link_tag(**options)`      | Emits `<link rel="stylesheet">` for the configured preset (`modal_stack/tailwind_v4.css`, etc.). Returns an empty SafeBuffer when `css_provider = :none`. |
 | `modal_stack_dialog_tag(**html_options)`          | Emits the singleton `<dialog id="modal-stack-root" data-controller="modal-stack">`. Drop just before `</body>`. |

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

@@ -331,6 +331,41 @@ body[data-modal-stack-locked] {
   display: none;
 }
 
+/* --- Header slot ------------------------------------------------- */
+
+.modal-stack__panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.modal-stack__panel-title {
+  margin: 0;
+  flex: 1;
+  min-width: 0;
+}
+
+.modal-stack__panel-close {
+  font: inherit;
+  background: transparent;
+  border: 0;
+  padding: 0.25rem;
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.55;
+  line-height: 1;
+  font-size: 1.4em;
+  flex-shrink: 0;
+  transition: opacity 150ms ease;
+}
+.modal-stack__panel-close:hover { opacity: 1; }
+.modal-stack__panel-close:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
 @media (prefers-reduced-motion: reduce) {
   #modal-stack-root,
   #modal-stack-root::backdrop,

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

@@ -359,6 +359,41 @@ body[data-modal-stack-locked] {
   display: none;
 }
 
+/* --- Header slot ------------------------------------------------- */
+
+.modal-stack__panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.modal-stack__panel-title {
+  margin: 0;
+  flex: 1;
+  min-width: 0;
+}
+
+.modal-stack__panel-close {
+  font: inherit;
+  background: transparent;
+  border: 0;
+  padding: 0.25rem;
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.55;
+  line-height: 1;
+  font-size: 1.4em;
+  flex-shrink: 0;
+  transition: opacity 150ms ease;
+}
+.modal-stack__panel-close:hover { opacity: 1; }
+.modal-stack__panel-close:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
 /* --- Reduced motion ---------------------------------------------- */
 
 @media (prefers-reduced-motion: reduce) {

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

@@ -360,6 +360,41 @@ body[data-modal-stack-locked] {
   display: none;
 }
 
+/* --- Header slot ------------------------------------------------- */
+
+.modal-stack__panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.modal-stack__panel-title {
+  margin: 0;
+  flex: 1;
+  min-width: 0;
+}
+
+.modal-stack__panel-close {
+  font: inherit;
+  background: transparent;
+  border: 0;
+  padding: 0.25rem;
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.55;
+  line-height: 1;
+  font-size: 1.4em;
+  flex-shrink: 0;
+  transition: opacity 150ms ease;
+}
+.modal-stack__panel-close:hover { opacity: 1; }
+.modal-stack__panel-close:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
 /* --- Reduced motion ---------------------------------------------- */
 
 @media (prefers-reduced-motion: reduce) {

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

@@ -326,6 +326,41 @@ body[data-modal-stack-locked] {
   display: none;
 }
 
+/* --- Header slot ------------------------------------------------- */
+
+.modal-stack__panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.modal-stack__panel-title {
+  margin: 0;
+  flex: 1;
+  min-width: 0;
+}
+
+.modal-stack__panel-close {
+  font: inherit;
+  background: transparent;
+  border: 0;
+  padding: 0.25rem;
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.55;
+  line-height: 1;
+  font-size: 1.4em;
+  flex-shrink: 0;
+  transition: opacity 150ms ease;
+}
+.modal-stack__panel-close:hover { opacity: 1; }
+.modal-stack__panel-close:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
 @media (prefers-reduced-motion: reduce) {
   #modal-stack-root,
   #modal-stack-root::backdrop,

data/app/views/modal_stack/_panel.html.erb

@@ -1,4 +1,17 @@
 <%= content_tag(:div, wrapper_attrs) do %>
+  <% if local_assigns[:title].present? || local_assigns[:show_close] %>
+    <header class="modal-stack__panel-header">
+      <% if local_assigns[:title].present? %>
+        <h2 class="modal-stack__panel-title"><%= title %></h2>
+      <% end %>
+      <% if local_assigns[:show_close] %>
+        <button type="button"
+                class="modal-stack__panel-close"
+                data-action="click->modal-stack#pop"
+                aria-label="<%= I18n.t("modal_stack.close", default: "Close") %>">&#215;</button>
+      <% end %>
+    </header>
+  <% end %>
   <%= back_button %>
   <%= content %>
 <% end %>

data/lib/modal_stack/helpers/modal_stack_container_helper.rb

@@ -13,15 +13,18 @@ module ModalStack
       DEFAULT_SIZE = :md
 
       def modal_stack_container(size: DEFAULT_SIZE, dismissible: true, variant: :modal, side: nil, width: nil, height: nil,
-                                back: false, transition: nil, html: {}, &)
+                                back: false, transition: nil, html: {},
+                                title: nil, close_button: nil, &)
         attrs = build_panel_attrs(size: size, variant: variant, side: side,
                                   dismissible: dismissible, width: width,
                                   height: height, transition: transition, html: html)
         body = capture(&)
         back_html = back ? modal_stack_container_back_button : nil
+        show_close = close_button.nil? ? dismissible : close_button
 
         render partial: "modal_stack/panel", locals: {
           content: body, back_button: back_html, wrapper_attrs: attrs,
+          title: title, show_close: show_close,
           size: size, variant: variant, dismissible: dismissible,
           side: side, width: width, height: height, transition: transition
         }

data/lib/modal_stack/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ModalStack
-  VERSION = "0.4.2"
+  VERSION = "0.4.3"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: modal_stack
 version: !ruby/object:Gem::Version
-  version: 0.4.2
+  version: 0.4.3
 platform: ruby
 authors:
 - Florian Gagnaire
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2026-05-15 00:00:00.000000000 Z
+date: 2026-05-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties