Reimplement flash component with popover and z-order fix

Author: lazaronixon

CHANGELOG.md

@@ -7,7 +7,8 @@
 - Extract dual range to dual_range component
 - Add card-check to card.css
 - Flash add animation-play-state stop on hover
-- Use".input" for "checkbox, radio and range".
+- Use".input" for "checkbox, radio and range"
+- Reimplement flash component (Fix z-order)
 
 ## 2.0.3 - 2025-08-08
 - Fix command component accessibility issues

lib/generators/css_zero/add/resources.yml

@@ -67,7 +67,7 @@ dual_range:
   - app/javascript/controllers/dual_range_controller.js
 flash:
   - app/assets/stylesheets/flash.css
-  - app/javascript/controllers/element_removal_controller.js
+  - app/javascript/controllers/flash_controller.js
 form:
   - app/javascript/controllers/form_controller.js
 fullscreen:

lib/generators/css_zero/add/templates/app/assets/stylesheets/flash.css

@@ -1,19 +1,10 @@
 .flash {
-  align-items: center;
   animation: appear-then-fade 4s 300ms both;
   background-color: var(--flash-background, var(--color-text));
   border-radius: var(--rounded-full);
   color: var(--flash-color, var(--color-text-reversed));
-  column-gap: var(--size-2);
-  display: inline-flex;
-  font-size: var(--text-fluid-base);
-  justify-content: center;
-  line-height: var(--leading-none);
   margin-block-start: var(--flash-position, var(--size-5));
   margin-inline: auto;
-  min-block-size: var(--size-11);
-  padding: var(--size-1) var(--size-4);
-  text-align: center;
 
   &:is(:hover, :focus-within) {
     animation-play-state: paused;
@@ -24,6 +15,18 @@
   }
 }
 
+.flash__content {
+  align-items: center;
+  column-gap: var(--size-2);
+  display: flex;
+  font-size: var(--text-fluid-base);
+  justify-content: center;
+  line-height: var(--leading-none);
+  min-block-size: var(--size-11);
+  padding: var(--size-1) var(--size-4);
+  text-align: center;
+}
+
 .flash--positive {
   --flash-color: light-dark(var(--green-400), var(--green-600));
 }

…ontrollers/element_removal_controller.js …vascript/controllers/flash_controller.jslib/generators/css_zero/add/templates/app/javascript/controllers/element_removal_controller.js renamed to lib/generators/css_zero/add/templates/app/javascript/controllers/flash_controller.js lib/generators/css_zero/add/templates/app/javascript/controllers/element_removal_controller.js renamed to lib/generators/css_zero/add/templates/app/javascript/controllers/flash_controller.js

@@ -1,7 +1,11 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
+  connect() {
+    this.element.showPopover()
+  }
+
   remove() {
-    this.element.remove()
+    this.element.hidePopover()
   }
 }

lib/generators/css_zero/install/templates/app/views/layouts/application.html.erb

@@ -38,7 +38,9 @@
 
     <main id="main">
       <%% if notice.present? %>
-        <%%= tag.div notice, popover: "manual", class: "flash", style: "--flash-position: 5rem", data: { controller: "element-removal", action: "animationend->element-removal#remove", role: "alert" } %>
+        <div popover="manual" class="flash" data-controller="flash" data-action="animationend->flash#hide" role="alert">
+          <div class="flash__content"><%%= notice %></div>
+        </div>
       <%% end %>
       <div class="container">
         <%%= yield %>