Add popover open option and mobile-friendly tag rows (#109)

Author: thomasgallagher

.claude/skills/layered-ui-rails/references/CONTROLLERS.md

@@ -111,7 +111,7 @@ Accessible tabbed interface with keyboard navigation.
 Positions a native `popover`-attribute element relative to its trigger, with auto-flip near viewport edges. Showing, hiding, light-dismiss (outside click), and Escape-to-close are all handled by the browser via the `popover` attribute - this controller only handles placement.
 
 **Targets:** `trigger`, `popover`
-**Values:** `placement` (String, default `"bottom"`; one of `"top"`, `"bottom"`, `"left"`, `"right"`), `align` (String, default `"start"`; `"start"` or `"end"` - which edge of the popover flushes with the trigger on the cross axis)
+**Values:** `placement` (String, default `"bottom"`; one of `"top"`, `"bottom"`, `"left"`, `"right"`), `align` (String, default `"start"`; `"start"` or `"end"` - which edge of the popover flushes with the trigger on the cross axis), `open` (Boolean, default `false`; when true the popover opens as soon as the controller connects, shown and positioned in the same task so it never paints unpositioned - e.g. re-opening a filter popover after a form submission re-renders the page)
 
 ```html
 <div data-controller="l-ui--popover">
@@ -130,6 +130,7 @@ Positions a native `popover`-attribute element relative to its trigger, with aut
 Features:
 - Repositions on open, and while open on window resize/scroll
 - Flips to the opposite side if the preferred placement would overflow the viewport
+- `data-l-ui--popover-open-value="true"` opens the popover on connect without a flash of unpositioned content
 
 ## Panel (`l-ui--panel`)
 

.claude/skills/layered-ui-rails/references/CSS.md

@@ -278,14 +278,16 @@ Always combine the base block with a modifier, e.g. `<span class="l-ui-badge l-u
 Interactive tag - e.g. an email recipient or an active filter. A badge is a static styled span; a tag is a container with separately interactive segments.
 
 ```
+.l-ui-tag-row       Canonical container for a row of tags plus any trailing actions (e.g. a filter bar); wrapping flex row with gap
 .l-ui-tag           Tag container (div); carries colour and shape but no padding - segments supply it
 .l-ui-tag--rounded  Pill shape (matching l-ui-badge--rounded); default is the subtle badge radius
 .l-ui-tag__text     Static label segment (span)
 .l-ui-tag__button   Interactive label segment (button or a); focus ring + pointer
+.l-ui-tag__label    Inner wrapper (span) around a text/button segment's content; truncates long labels with an ellipsis
 .l-ui-tag__remove   Trailing remove segment (button or a) holding a ✕ icon (e.g. l-ui-icon--xs); needs an aria-label
 ```
 
-A tag takes the same subtle corner radius as a badge by default; add `l-ui-tag--rounded` for a pill. Segments must be direct children in label-then-remove order; when a remove segment follows, the label segment automatically drops its right padding so the remove owns the gap and every part of the tag stays clickable. Prefer the `l_ui_tag` helper (see HELPERS.md), which also wires an optional popover.
+A tag takes the same subtle corner radius as a badge by default; add `l-ui-tag--rounded` for a pill. Segments must be direct children in label-then-remove order; when a remove segment follows, the label segment automatically drops its right padding so the remove owns the gap and every part of the tag stays clickable. A tag never grows past its container; wrap label content in `l-ui-tag__label` so it truncates with an ellipsis instead of overflowing. Prefer the `l_ui_tag` helper (see HELPERS.md), which renders the label wrapper and wires an optional popover.
 
 ## Tabs
 

.claude/skills/layered-ui-rails/references/HELPERS.md

@@ -328,12 +328,13 @@ Calling `dialog.showModal()` directly is not supported - it bypasses the `l-ui--
 ## Popover
 
 ```ruby
-l_ui_popover(id: nil, placement: :bottom, align: :start, container: {}, &block)
+l_ui_popover(id: nil, placement: :bottom, align: :start, open: false, container: {}, &block)
 ```
 
 - `id` (String, optional) - DOM id for the popover element; defaults to an auto-generated id
 - `placement` (Symbol, optional) - `:top`, `:bottom` (default), `:left`, or `:right`. Flips automatically if it would overflow the viewport
 - `align` (Symbol, optional) - `:start` (default) flushes the popover's leading edge with the trigger's; `:end` flushes its trailing edge instead. For example, `placement: :bottom, align: :end` hangs the popover down and to the left of a trigger at the right end of a row
+- `open` (Boolean, optional) - when `true`, the popover opens as soon as its Stimulus controller connects, shown and positioned in the same task so it never paints unpositioned. Useful for re-opening a popover after a form submission re-renders the page (e.g. `open: params[:filtering].present?`). Defaults to `false`
 - `container` (Hash, optional) - extra HTML attributes for the wrapping `<div>` (e.g. `class:`)
 - `&block` - the block's content is the popover body; call `p.trigger(**options, &block)` inside it to render the trigger button
 
@@ -388,7 +389,9 @@ Builder methods:
 - `t.button(**opts, &block)` - button segment (`<button class="l-ui-tag__button">`); opens the tag's popover when one is declared
 - `t.link(url, **opts, &block)` - link segment, styled like a button segment
 - `t.remove(url = nil, **opts, &block)` - trailing remove segment (`l-ui-tag__remove`): a link when `url` is given, otherwise a button. Renders a ✕ icon unless the block supplies custom content. Pass `aria: { label: ... }` so it has an accessible name
-- `t.popover(id: nil, placement: :bottom, align: :start, &block)` - attaches a popover; the block is the popover body. Options match `l_ui_popover`
+- `t.popover(id: nil, placement: :bottom, align: :start, open: false, &block)` - attaches a popover; the block is the popover body. Options match `l_ui_popover`
+
+Text, button, and link segments wrap their content in `<span class="l-ui-tag__label">`, which truncates long labels with an ellipsis when the tag is squeezed (the tag itself never grows past its container).
 
 ```erb
 <%= l_ui_tag do |t| %>

app/assets/tailwind/layered_ui/engine.css

@@ -1916,9 +1916,22 @@ pre.l-ui-surface {
    carries no padding of its own - each segment supplies its share, so every
    part of the tag is a hit target. */
 
+.l-ui-tag-row {
+  @apply flex flex-wrap items-center
+         gap-2;
+}
+
+/* The row wraps whole items onto new lines, so a squeezed trailing action
+   should move down rather than wrap its label mid-text. Scoped here because
+   elsewhere (e.g. a full-width button in a narrow panel) nowrap would force
+   horizontal overflow instead of wrapping. */
+.l-ui-tag-row .l-ui-button {
+  @apply whitespace-nowrap;
+}
+
 .l-ui-tag {
   @apply inline-flex items-stretch
-         min-h-[32px]
+         max-w-full min-h-[32px]
          text-xs font-medium
          text-foreground-muted
          bg-surface-highlighted
@@ -1932,17 +1945,26 @@ pre.l-ui-surface {
 
 .l-ui-tag__text {
   @apply flex items-center
+         min-w-0
          gap-1 px-3;
 }
 
 .l-ui-tag__button {
   @apply flex items-center
+         min-w-0
          gap-1 px-3
          rounded
          focus-ring
          cursor-pointer;
 }
 
+/* This wrapper exists so long labels can truncate: ellipsis has no effect on
+   text sitting directly inside a flex container like the segment. */
+.l-ui-tag__label {
+  @apply overflow-hidden
+         text-ellipsis whitespace-nowrap;
+}
+
 /* Segment focus rings follow the tag's shape. */
 .l-ui-tag--rounded .l-ui-tag__button,
 .l-ui-tag--rounded .l-ui-tag__remove {

app/helpers/layered/ui/popover_helper.rb

@@ -22,8 +22,11 @@ module PopoverHelper
       #   placement:  (Symbol)  :top, :bottom (default), :left, or :right. Flips automatically if it would overflow the viewport.
       #   align:      (Symbol)  :start (default) flushes the popover's leading edge with the trigger's; :end flushes its trailing edge instead
       #                         (e.g. placement: :bottom, align: :end hangs the popover down and to the left of a trigger at the right end of a row).
+      #   open:       (Boolean) When true, the popover opens as soon as its Stimulus controller connects - shown and positioned in the same
+      #                         task, so it never paints unpositioned. Useful for re-opening a popover after a form submission re-renders
+      #                         the page. Defaults to false.
       #   container:  (Hash)    Extra HTML attributes for the wrapping <div>.
-      def l_ui_popover(id: nil, placement: :bottom, align: :start, container: {}, &block)
+      def l_ui_popover(id: nil, placement: :bottom, align: :start, open: false, container: {}, &block)
         id ||= "l-ui-popover-#{SecureRandom.hex(4)}"
         builder = PopoverBuilder.new(self, id: id)
         body_content = capture { block.call(builder) }
@@ -34,6 +37,7 @@ def l_ui_popover(id: nil, placement: :bottom, align: :start, container: {}, &blo
         container_data[:controller] = [existing_controller, "l-ui--popover"].compact.reject(&:empty?).join(" ")
         container_data[:"l-ui--popover-placement-value"] = placement
         container_data[:"l-ui--popover-align-value"] = align
+        container_data[:"l-ui--popover-open-value"] = true if open
         container_attrs[:data] = container_data
 
         tag.div(**container_attrs) do

app/helpers/layered/ui/tag_helper.rb

@@ -42,7 +42,7 @@ module TagHelper
       #   t.link(url, **options, &block)            Link segment, styled like a button segment.
       #   t.remove(url = nil, **options, &block)    Trailing remove segment: a link when +url+ is given, otherwise a
       #                                             button. Renders a ✕ icon unless the block supplies custom content.
-      #   t.popover(id: nil, placement: :bottom, align: :start, &block)
+      #   t.popover(id: nil, placement: :bottom, align: :start, open: false, &block)
       #                                             Attaches a popover to the tag; the block is the popover body.
       #                                             Options match +l_ui_popover+.
       def l_ui_tag(rounded: false, container: {}, &block)
@@ -59,6 +59,7 @@ def l_ui_tag(rounded: false, container: {}, &block)
           container_data[:"l-ui--popover-target"] = "trigger"
           container_data[:"l-ui--popover-placement-value"] = builder.popover_placement
           container_data[:"l-ui--popover-align-value"] = builder.popover_align
+          container_data[:"l-ui--popover-open-value"] = true if builder.popover_open
           container_attrs[:data] = container_data
         end
 
@@ -70,7 +71,7 @@ def l_ui_tag(rounded: false, container: {}, &block)
       end
 
       class TagBuilder
-        attr_reader :segments, :popover_id, :popover_placement, :popover_align, :popover_body
+        attr_reader :segments, :popover_id, :popover_placement, :popover_align, :popover_open, :popover_body
 
         def initialize(view)
           @view = view
@@ -101,10 +102,11 @@ def remove(url = nil, **options, &block)
           nil
         end
 
-        def popover(id: nil, placement: :bottom, align: :start, &block)
+        def popover(id: nil, placement: :bottom, align: :start, open: false, &block)
           @popover_id = id || "l-ui-tag-popover-#{SecureRandom.hex(4)}"
           @popover_placement = placement
           @popover_align = align
+          @popover_open = open
           @popover_body = @view.capture(&block)
           nil
         end
@@ -122,15 +124,15 @@ def l_ui_tag_segment(builder, segment)
         case segment[:kind]
         when :text
           options[:class] = class_names("l-ui-tag__text", options[:class])
-          tag.span(segment[:content], **options)
+          tag.span(l_ui_tag_label(segment[:content]), **options)
         when :button
           options[:class] = class_names("l-ui-tag__button", options[:class])
           options[:type] ||= "button"
           options[:popovertarget] ||= builder.popover_id if builder.popover?
-          tag.button(segment[:content], **options)
+          tag.button(l_ui_tag_label(segment[:content]), **options)
         when :link
           options[:class] = class_names("l-ui-tag__button", options[:class])
-          link_to(segment[:content], segment[:url], options)
+          link_to(l_ui_tag_label(segment[:content]), segment[:url], options)
         when :remove
           options[:class] = class_names("l-ui-tag__remove", options[:class])
           content = segment[:content] || l_ui_tag_remove_icon
@@ -143,6 +145,13 @@ def l_ui_tag_segment(builder, segment)
         end
       end
 
+      # Wraps a label segment's content so long labels can truncate with an
+      # ellipsis - ellipsis has no effect on text sitting directly inside a
+      # flex container like the segment.
+      def l_ui_tag_label(content)
+        tag.span(content, class: "l-ui-tag__label")
+      end
+
       # Filled x-circle, matching the bundled +icon_close_circle.svg+ asset.
       # Rendered inline (rather than via image_tag) so it inherits the tag's
       # muted +currentColor+; an <img>-loaded SVG cannot.

app/javascript/layered_ui/controllers/l_ui/popover_controller.js

@@ -9,7 +9,8 @@ export default class extends Controller {
   static targets = ["trigger", "popover"]
   static values = {
     placement: { type: String, default: "bottom" },
-    align: { type: String, default: "start" }
+    align: { type: String, default: "start" },
+    open: { type: Boolean, default: false }
   }
 
   static GAP = 8
@@ -24,6 +25,16 @@ export default class extends Controller {
       }
     }
     element.addEventListener("toggle", this._toggleHandler)
+
+    // Open on connect when requested (e.g. re-opening a filter popover after
+    // a form submission re-renders the page). showPopover() and position()
+    // must run back-to-back in the same task: the native toggle event is
+    // dispatched asynchronously, so relying on the listener alone would paint
+    // the popover unpositioned at the viewport origin for one frame.
+    if (this.openValue && !element.matches(":popover-open")) {
+      element.showPopover()
+      this.position()
+    }
   }
 
   popoverTargetDisconnected(element) {

test/dummy/app/views/pages/popovers.html.erb

@@ -131,6 +131,38 @@
   </dialog>
 </div>
 
+<h2 class="mt-8 l-ui-heading--section">Open on connect</h2>
+
+<p class="mt-4">Pass <code>open: true</code> to open the popover as soon as its Stimulus controller connects - for example, re-opening a filter popover after a form submission re-renders the page. The controller shows and positions the popover in the same task, so it never paints unpositioned. As an <code>auto</code> popover it still light-dismisses as usual, so the example below is only open until you click elsewhere; reload the page to see it again.</p>
+
+<%= l_ui_popover(open: true, container: { class: "mt-4" }) do |p| %>
+  <% p.trigger(class: "l-ui-button l-ui-button--outline") do %>
+    Opened on page load
+  <% end %>
+  <p>This popover was open when the page loaded.</p>
+<% end %>
+
+<div class="mt-6" data-controller="l-ui--modal">
+  <button class="l-ui-button l-ui-button--outline l-ui-button--small" data-action="l-ui--modal#open">View code</button>
+  <dialog class="l-ui-modal" data-l-ui--modal-target="dialog" data-action="click->l-ui--modal#closeOnBackdrop" aria-labelledby="modal-popover-open-heading">
+    <div class="l-ui-modal__header">
+      <h3 id="modal-popover-open-heading">Open on connect</h3>
+      <button class="l-ui-button l-ui-button--icon" data-action="l-ui--modal#close" aria-label="Close">
+        <%= image_tag "layered_ui/icon_close.svg", alt: "", class: "l-ui-icon l-ui-icon--sm", aria: { hidden: true } %>
+      </button>
+    </div>
+    <div class="l-ui-modal__body">
+      <pre class="l-ui-surface"><code>&lt;%# e.g. open: params[:filtering].present? %&gt;
+&lt;%= l_ui_popover(open: true) do |p| %&gt;
+  &lt;% p.trigger(class: "l-ui-button l-ui-button--outline") do %&gt;
+    Opened on page load
+  &lt;% end %&gt;
+  &lt;p&gt;This popover was open when the page loaded.&lt;/p&gt;
+&lt;% end %&gt;</code></pre>
+    </div>
+  </dialog>
+</div>
+
 <h2 class="mt-8 l-ui-heading--section">Menu content</h2>
 
 <p class="mt-4">For a list of actions (e.g. a "more" menu on a table row), use <code>l-ui-popover__menu</code> to reset the popover's padding to a full-width list, and <code>l-ui-popover__menu-item</code> on each link or button. Add <code>l-ui-popover__menu-item--danger</code> for destructive actions, and an <code>&lt;hr class="l-ui-popover__menu-divider"&gt;</code> to separate groups of items. Give an icon-only trigger an <code>aria-label</code>. Pair with <code>align: :end</code> when the trigger sits at the end of a row.</p>
@@ -202,6 +234,10 @@
         <th class="l-ui-table__cell l-ui-table__cell--primary" scope="row"><code>align:</code></th>
         <td class="l-ui-table__cell"><code>:start</code> (default) or <code>:end</code> - which edge of the popover flushes with the trigger on the cross axis</td>
       </tr>
+      <tr>
+        <th class="l-ui-table__cell l-ui-table__cell--primary" scope="row"><code>open:</code></th>
+        <td class="l-ui-table__cell">When <code>true</code>, the popover opens as soon as its Stimulus controller connects, shown and positioned in the same task so it never paints unpositioned; defaults to <code>false</code></td>
+      </tr>
       <tr>
         <th class="l-ui-table__cell l-ui-table__cell--primary" scope="row"><code>container:</code></th>
         <td class="l-ui-table__cell">Extra HTML attributes for the wrapping <code>&lt;div&gt;</code> (e.g. <code>class:</code>)</td>