senren-ui 0.2.0 → 0.3.0

data/templates/components/date_picker/date_picker_component.html.erb

@@ -1,5 +1,5 @@
-<div <%= tag.attributes(**root_attrs("flex w-full items-center gap-2", data: { controller: "senren--date-picker" })) %>>
-  <input type="date" id="<%= id %>" name="<%= name %>" value="<%= value %>" placeholder="<%= placeholder %>" data-senren--date-picker-target="input" class="h-10 w-full max-w-56 cursor-pointer rounded-(--senren-radius) border bg-[hsl(var(--senren-background))] px-3 text-sm text-[hsl(var(--senren-foreground))] outline-none transition-colors focus:ring-2 focus:ring-[hsl(var(--senren-ring))] [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-60 [&::-webkit-calendar-picker-indicator]:hover:opacity-100 <%= self.class::VARIANTS[variant] %>">
+<%= tag.div(**root_attrs("flex w-full items-center gap-2", data: { controller: "senren--date-picker" })) do %>
+  <input type="date" autocomplete="off" id="<%= id %>" name="<%= name %>" value="<%= value %>" placeholder="<%= placeholder %>" data-senren--date-picker-target="input" class="h-10 w-full max-w-56 cursor-pointer rounded-(--senren-radius) border bg-[hsl(var(--senren-background))] px-3 text-sm text-[hsl(var(--senren-foreground))] outline-none transition-colors focus:ring-2 focus:ring-[hsl(var(--senren-ring))] [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-60 [&::-webkit-calendar-picker-indicator]:hover:opacity-100 <%= self.class::VARIANTS[variant] %>">
   <button type="button" data-action="click->senren--date-picker#today" class="inline-flex h-10 cursor-pointer items-center rounded-(--senren-radius) border border-[hsl(var(--senren-border))] px-3 text-sm font-medium hover:bg-[hsl(var(--senren-accent))]">Today</button>
   <button type="button" data-action="click->senren--date-picker#clear" class="inline-flex h-10 cursor-pointer items-center rounded-(--senren-radius) px-3 text-sm text-[hsl(var(--senren-muted-foreground))] hover:bg-[hsl(var(--senren-accent))]">Clear</button>
-</div>
+<% end %>

data/templates/components/dialog/dialog_component.html.erb

@@ -1,4 +1,7 @@
-<div data-controller="senren--dialog" data-senren-component="dialog" data-senren--dialog-open-value="<%= open %>" id="<%= dom_id %>">
+<%# Root goes through root_attrs so a caller's class: and data: reach it.
+    Hand-writing these attributes dropped both -- which is why a Stimulus
+    value could not be set from the server. %>
+<%= tag.div(**wrapper_attrs(id: dom_id, data: { controller: "senren--dialog", "senren--dialog-open-value": open })) do %>
   <% if trigger? %>
     <span data-action="click->senren--dialog#open" data-senren--dialog-target="trigger" aria-controls="<%= dom_id %>-panel">
       <%= trigger %>
@@ -9,13 +12,14 @@
   <% end %>
 
   <div data-senren--dialog-target="overlay" hidden
+       data-action="click->senren--dialog#close"
        class="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm"></div>
 
   <div data-senren--dialog-target="panel" hidden
        role="dialog" aria-modal="true" aria-labelledby="<%= dom_id %>-title"
        id="<%= dom_id %>-panel"
        tabindex="-1"
-       class="fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] text-[hsl(var(--senren-popover-foreground))] p-6 shadow-lg focus:outline-none">
+       class="<%= panel_class("fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] text-[hsl(var(--senren-popover-foreground))] p-6 shadow-lg focus:outline-none") %>">
     <% if title? %>
       <h2 id="<%= dom_id %>-title" class="text-lg font-semibold leading-none tracking-tight"><%= title %></h2>
     <% end %>
@@ -35,4 +39,4 @@
       <span aria-hidden="true">×</span>
     </button>
   </div>
-</div>
+<% end %>

data/templates/components/dialog/dialog_component.rb

@@ -1,6 +1,17 @@
 # frozen_string_literal: true
 
 module Senren
+  # Two ancestor traps to know about, because neither is visible in this file
+  # and both look like a z-index bug from the outside:
+  #
+  #   * A `z-index` on any positioned ancestor creates a stacking context, and
+  #     a fixed overlay cannot escape one. The panel then competes only inside
+  #     that context, so a sticky header with a lower z-index still covers it.
+  #     `position: relative` alone is fine; it is the z-index that traps.
+  #   * `transform`, `filter`, `backdrop-filter`, `will-change` and an opacity
+  #     below 1 create a stacking context too, with the same effect.
+  #
+  # Symptom in both cases: raising the panel's z-index changes nothing.
   class DialogComponent < BaseComponent
     renders_one :trigger
     renders_one :title

data/templates/components/dropdown_menu/dropdown_menu_component.html.erb

@@ -1,12 +1,15 @@
-<div data-controller="senren--dropdown-menu" class="relative inline-block" data-state="closed" data-senren-component="dropdown_menu">
+<%# Root goes through root_attrs so a caller's class: and data: reach it.
+    Hand-writing these attributes dropped both -- which is why a Stimulus
+    value could not be set from the server. %>
+<%= tag.div(**wrapper_attrs("relative inline-block", data: { controller: "senren--dropdown-menu", state: "closed" })) do %>
   <div class="inline-flex cursor-pointer" data-state="closed" aria-haspopup="menu" aria-expanded="false" data-senren--dropdown-menu-target="trigger" data-action="click->senren--dropdown-menu#toggle keydown->senren--dropdown-menu#onTriggerKey">
     <%= trigger %>
   </div>
 
   <div data-senren--dropdown-menu-target="menu" role="menu" hidden
-       class="absolute right-0 z-50 mt-2 w-56 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] text-[hsl(var(--senren-popover-foreground))] p-1 shadow-md">
+       class="<%= panel_class("absolute right-0 z-50 mt-2 w-56 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] text-[hsl(var(--senren-popover-foreground))] p-1 shadow-md") %>">
     <% items.each do |it| %>
       <%= it %>
     <% end %>
   </div>
-</div>
+<% end %>

data/templates/components/dropdown_menu/dropdown_menu_component.rb

@@ -1,6 +1,13 @@
 # frozen_string_literal: true
 
 module Senren
+  # A trigger and an absolutely positioned menu.
+  #
+  # The menu is taller than the trigger and escapes it, so an ancestor with
+  # `overflow-hidden` will clip it -- usually a card, table wrapper, or list
+  # container that has the class only to make its border radius clip children.
+  # Symptom: the menu opens but is cut off at the container's edge. Remove the
+  # overflow, or round the first and last rows instead of the wrapper.
   class DropdownMenuComponent < BaseComponent
     renders_one  :trigger
     renders_many :items, 'ItemTag'
@@ -17,6 +24,10 @@ module Senren
       SIZES = { md: '' }.freeze
       ITEM_ACTION = 'click->senren--dropdown-menu#close keydown->senren--dropdown-menu#onItemKey'
 
+      BASE_CLASSES = 'block w-full text-left px-3 py-2 text-sm rounded-sm ' \
+                     'hover:bg-[hsl(var(--senren-accent))] focus:bg-[hsl(var(--senren-accent))] ' \
+                     'outline-none cursor-pointer'
+
       def initialize(href: nil, method: nil, destructive: false, class_name: nil, **)
         super(variant: :default, size: :md, class_name: class_name, **)
         @href = href
@@ -25,15 +36,56 @@ module Senren
       end
 
       def call
-        klass = 'block w-full text-left px-3 py-2 text-sm rounded-sm hover:bg-[hsl(var(--senren-accent))] focus:bg-[hsl(var(--senren-accent))] outline-none cursor-pointer'
-        klass += " #{class_name}" if class_name.present?
-        klass += ' text-[hsl(var(--senren-destructive))]' if @destructive
         if @href
-          link_to(content, safe_url(@href), role: 'menuitem', method: @method, class: klass, data: { action: ITEM_ACTION }, **html_attrs)
+          link_to(content, safe_url(@href), role: 'menuitem', class: item_classes, **item_attrs)
         else
-          tag.button(content, type: 'button', role: 'menuitem', class: klass, data: { action: ITEM_ACTION }, **html_attrs)
+          tag.button(content, type: 'button', role: 'menuitem', class: item_classes, **item_attrs)
         end
       end
+
+      private
+
+      # `class:` is merged, not substituted.
+      #
+      # It used to reach `call` only through **html_attrs, which the tag helper
+      # splatted over the computed class -- so `class: "font-bold"` produced an
+      # item wearing nothing but font-bold. Losing the hover style is cosmetic;
+      # losing `focus:bg-` is not, because it is the only indication a keyboard
+      # user has of where they are while arrowing through the menu.
+      #
+      # Same defect `data:` had, and the fix for `data:` was not extended here.
+      def item_classes
+        [
+          BASE_CLASSES,
+          ('text-[hsl(var(--senren-destructive))]' if @destructive),
+          class_name.presence,
+          caller_class.presence
+        ].compact.join(' ')
+      end
+
+      # Two defects lived in the old one-line version of `call`.
+      #
+      # It wrote `data: { action: ITEM_ACTION }` and then splatted html_attrs
+      # after it, so any caller passing `data:` replaced the whole hash and
+      # silently lost close-on-click and keyboard handling. This is the same
+      # defect `root_attrs` had for `data:`, fixed there and never here --
+      # merging is the fix in both places.
+      #
+      # And `method:` was passed to link_to, which was a rails-ujs option.
+      # Rails 7 dropped rails-ujs, so it rendered a `method` attribute on an
+      # `<a>` that does nothing at all: a documented parameter that had been
+      # inert since the library targeted Rails 7.1. Turbo reads
+      # data-turbo-method -- and only on a link, which is why `method:` without
+      # `href:` emits nothing rather than an attribute a <button> cannot act on.
+      #
+      # A caller's own action is appended rather than dropped: an item that
+      # tracks a click still has to close its menu.
+      def item_attrs
+        data = merge_data(caller_data, { action: ITEM_ACTION })
+        data = data.merge(turbo_method: @method) if @method && @href
+
+        html_attrs_without_class_and_data.merge(data: data)
+      end
     end
   end
 end

data/templates/components/hover_card/hover_card_component.html.erb

@@ -1,10 +1,13 @@
-<span data-controller="senren--hover-card" class="relative inline-block" data-senren-component="hover_card">
+<%# Root goes through root_attrs so a caller's class: and data: reach it.
+    Hand-writing these attributes dropped both -- which is why a Stimulus
+    value could not be set from the server. %>
+<%= tag.span(**wrapper_attrs("relative inline-block", data: { controller: "senren--hover-card" })) do %>
   <span tabindex="0"
         data-action="mouseenter->senren--hover-card#show mouseleave->senren--hover-card#hide focus->senren--hover-card#show blur->senren--hover-card#hide">
     <%= trigger %>
   </span>
   <span hidden data-senren--hover-card-target="panel"
-        class="absolute z-40 mt-2 w-64 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] text-[hsl(var(--senren-popover-foreground))] p-4 shadow-md">
+        class="<%= panel_class("absolute z-40 mt-2 w-64 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] text-[hsl(var(--senren-popover-foreground))] p-4 shadow-md") %>">
     <%= content_panel || content %>
   </span>
-</span>
+<% end %>

data/templates/components/invite_member_dialog/invite_member_dialog_component.html.erb

@@ -7,7 +7,8 @@
     </button>
   <% end %>
 
-  <div hidden data-senren--invite-member-dialog-target="overlay" class="fixed inset-0 z-40 bg-[hsl(var(--senren-foreground)/0.42)] backdrop-blur-sm"></div>
+  <div hidden data-senren--invite-member-dialog-target="overlay"
+       data-action="click->senren--invite-member-dialog#close" class="fixed inset-0 z-40 bg-[hsl(var(--senren-foreground)/0.42)] backdrop-blur-sm"></div>
   <div hidden id="<%= dom_id %>" data-senren--invite-member-dialog-target="panel" role="dialog" aria-modal="true" aria-labelledby="<%= dom_id %>-title" tabindex="-1" class="fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] p-6 text-[hsl(var(--senren-popover-foreground))] shadow-lg">
     <h2 id="<%= dom_id %>-title" class="font-display text-lg font-semibold"><%= title %></h2>
     <% if description.present? %>
@@ -19,7 +20,7 @@
         <%= content %>
       <% else %>
         <label class="block text-sm font-medium text-[hsl(var(--senren-foreground))]" for="<%= dom_id %>-email">Email</label>
-        <input id="<%= dom_id %>-email" name="<%= email_name %>" type="email" placeholder="teammate@company.com" class="h-10 w-full rounded-(--senren-radius) border border-[hsl(var(--senren-input))] bg-[hsl(var(--senren-background))] px-3 text-sm outline-none focus:ring-2 focus:ring-[hsl(var(--senren-ring))]">
+        <input id="<%= dom_id %>-email" name="<%= email_name %>" type="email" autocomplete="email" placeholder="teammate@company.com" class="h-10 w-full rounded-(--senren-radius) border border-[hsl(var(--senren-input))] bg-[hsl(var(--senren-background))] px-3 text-sm outline-none focus:ring-2 focus:ring-[hsl(var(--senren-ring))]">
         <label class="block text-sm font-medium text-[hsl(var(--senren-foreground))]" for="<%= dom_id %>-role">Role</label>
         <select id="<%= dom_id %>-role" name="<%= role_name %>" class="h-10 w-full rounded-(--senren-radius) border border-[hsl(var(--senren-input))] bg-[hsl(var(--senren-background))] px-3 text-sm outline-none focus:ring-2 focus:ring-[hsl(var(--senren-ring))]">
           <% roles.each do |role| %><option><%= role %></option><% end %>

data/templates/components/link/link_component.html.erb

@@ -1 +1 @@
-<%= tag.a content, **root_attrs("inline-flex items-center gap-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))] rounded-sm", href: safe_url(href), **external_attrs) %>
+<%= tag.a content, href: safe_url(href), **root_attrs("inline-flex items-center gap-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))] rounded-sm", **external_attrs) %>

data/templates/components/native_select/native_select_component.html.erb

@@ -6,7 +6,7 @@
     <% end %>
     <% options.each do |opt| %>
       <% value, label = Array === opt ? opt : [opt, opt] %>
-      <option value="<%= value %>" <%= "selected" if selected.to_s == value.to_s %>><%= label %></option>
+      <option value="<%= value %>" <% if selected.to_s == value.to_s %>selected<% end %>><%= label %></option>
     <% end %>
   <% end %>
 <% else %>
@@ -18,7 +18,7 @@
       <% end %>
       <% options.each do |opt| %>
         <% value, label = Array === opt ? opt : [opt, opt] %>
-        <option value="<%= value %>" <%= "selected" if selected.to_s == value.to_s %>><%= label %></option>
+        <option value="<%= value %>" <% if selected.to_s == value.to_s %>selected<% end %>><%= label %></option>
       <% end %>
     <% end %>
     <svg aria-hidden="true" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[hsl(var(--senren-muted-foreground))] transition-transform duration-150 group-focus-within:rotate-180">

data/templates/components/pagination/pagination_component.html.erb

@@ -1,4 +1,4 @@
-<nav <%= tag.attributes(**root_attrs("flex items-center justify-center gap-1", aria: { label: label })) %>>
+<%= tag.nav(**root_attrs("flex flex-wrap items-center justify-center gap-1", aria: { label: label })) do %>
   <% prev_page = current_page - 1 %>
   <%= link_to "Previous", page_url(prev_page), class: "rounded-md border border-[hsl(var(--senren-border))] px-3 py-2 text-sm #{current_page == 1 ? "pointer-events-none opacity-50" : "hover:bg-[hsl(var(--senren-accent))]"}", aria: { disabled: current_page == 1 } %>
 
@@ -8,4 +8,4 @@
 
   <% next_page = current_page + 1 %>
   <%= link_to "Next", page_url(next_page), class: "rounded-md border border-[hsl(var(--senren-border))] px-3 py-2 text-sm #{current_page == total_pages ? "pointer-events-none opacity-50" : "hover:bg-[hsl(var(--senren-accent))]"}", aria: { disabled: current_page == total_pages } %>
-</nav>
+<% end %>

data/templates/components/popover/popover_component.html.erb

@@ -1,9 +1,12 @@
-<div data-controller="senren--popover" class="relative inline-block" data-senren-component="popover">
+<%# Root goes through root_attrs so a caller's class: and data: reach it.
+    Hand-writing these attributes dropped both -- which is why a Stimulus
+    value could not be set from the server. %>
+<%= tag.div(**wrapper_attrs("relative inline-block", data: { controller: "senren--popover" })) do %>
   <div data-senren--popover-target="trigger" data-action="click->senren--popover#toggle">
     <%= trigger %>
   </div>
   <div data-senren--popover-target="panel" hidden role="dialog"
-       class="absolute z-40 mt-2 min-w-[12rem] rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] text-[hsl(var(--senren-popover-foreground))] p-4 shadow-md">
+       class="<%= panel_class("absolute z-40 mt-2 min-w-[12rem] rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] text-[hsl(var(--senren-popover-foreground))] p-4 shadow-md") %>">
     <%= content_panel || content %>
   </div>
-</div>
+<% end %>

data/templates/components/product_card/product_card_component.html.erb

@@ -1,7 +1,7 @@
 <%= tag.article(**root_attrs("flex flex-col overflow-hidden rounded-(--senren-radius) border bg-[hsl(var(--senren-card))] shadow-sm", id: dom_id)) do %>
   <div class="relative aspect-square w-full bg-[hsl(var(--senren-muted)/0.4)]">
     <% if safe_image_url %>
-      <img src="<%= safe_image_url %>" alt="<%= title %>" loading="lazy" class="h-full w-full object-cover">
+      <%= image_tag safe_image_url, alt: title, loading: "lazy", class: "h-full w-full object-cover" %>
     <% else %>
       <div class="flex h-full w-full items-center justify-center text-sm text-[hsl(var(--senren-muted-foreground))]" aria-hidden="true">
         No image
@@ -29,7 +29,7 @@
     <%# A plain form: the server owns the cart, and Turbo handles the response. %>
     <%= form_with url: safe_action_url, method: method, class: "mt-1" do %>
       <button type="submit"
-              <%= "disabled" unless available? %>
+              <% unless available? %>disabled<% end %>
               class="inline-flex h-10 w-full cursor-pointer items-center justify-center rounded-(--senren-radius) bg-[hsl(var(--senren-primary))] px-4 text-sm font-medium text-[hsl(var(--senren-primary-foreground))] transition-colors hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))] disabled:cursor-not-allowed disabled:opacity-50">
         <%= button_label %>
       </button>

data/templates/components/progress/progress_component.html.erb

@@ -1,4 +1,4 @@
-<div <%= tag.attributes(**root_attrs("w-full")) %>>
+<%= tag.div(**root_attrs("w-full")) do %>
   <% if label.present? %>
     <div class="mb-2 flex items-center justify-between text-sm">
       <span class="font-medium text-[hsl(var(--senren-foreground))]"><%= label %></span>
@@ -8,4 +8,4 @@
   <div role="progressbar" aria-valuemin="0" aria-valuemax="<%= max.to_i %>" aria-valuenow="<%= value.to_i %>" class="h-2.5 w-full overflow-hidden rounded-full bg-[hsl(var(--senren-muted))]">
     <div class="h-full rounded-full transition-[width] duration-300 ease-out <%= indicator_class %>" style="width: <%= percent %>%"></div>
   </div>
-</div>
+<% end %>

data/templates/components/search_input/search_input_component.html.erb

@@ -4,11 +4,11 @@
   <% else %>
     <label class="sr-only" for="<%= name %>"><%= label %></label>
     <span aria-hidden="true" class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[hsl(var(--senren-muted-foreground))]">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
+      <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
         <circle cx="11" cy="11" r="7"></circle>
         <path d="m20 20-3.5-3.5"></path>
       </svg>
     </span>
-    <input id="<%= name %>" name="<%= name %>" type="search" value="<%= value %>" placeholder="<%= placeholder %>" aria-label="<%= label %>" class="h-10 w-full rounded-(--senren-radius) border border-[hsl(var(--senren-input))] bg-[hsl(var(--senren-background))] px-9 text-sm text-[hsl(var(--senren-foreground))] outline-none placeholder:text-[hsl(var(--senren-muted-foreground))] focus:ring-2 focus:ring-[hsl(var(--senren-ring))]">
+    <input id="<%= name %>" name="<%= name %>" type="search" autocomplete="off" value="<%= value %>" placeholder="<%= placeholder %>" aria-label="<%= label %>" class="h-10 w-full rounded-(--senren-radius) border border-[hsl(var(--senren-input))] bg-[hsl(var(--senren-background))] px-9 text-sm text-[hsl(var(--senren-foreground))] outline-none placeholder:text-[hsl(var(--senren-muted-foreground))] focus:ring-2 focus:ring-[hsl(var(--senren-ring))]">
   <% end %>
 <% end %>

data/templates/components/sheet/sheet_component.html.erb

@@ -1,4 +1,7 @@
-<div data-controller="senren--sheet" data-senren-component="sheet" id="<%= dom_id %>">
+<%# Root goes through root_attrs so a caller's class: and data: reach it.
+    Hand-writing these attributes dropped both -- which is why a Stimulus
+    value could not be set from the server. %>
+<%= tag.div(**wrapper_attrs(id: dom_id, data: { controller: "senren--sheet" })) do %>
   <% if trigger? %>
     <span data-action="click->senren--sheet#open" data-senren--sheet-target="trigger">
       <%= trigger %>
@@ -8,11 +11,12 @@
   <% end %>
 
   <div data-senren--sheet-target="overlay" hidden
+       data-action="click->senren--sheet#close"
        class="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm"></div>
 
   <div data-senren--sheet-target="panel" hidden role="dialog" aria-modal="true"
        data-open="false"
-       class="fixed z-50 bg-[hsl(var(--senren-background))] text-[hsl(var(--senren-foreground))] shadow-lg transition-transform duration-200 <%= self.class::VARIANTS[variant] %>">
+       class="<%= panel_class("fixed z-50 bg-[hsl(var(--senren-background))] text-[hsl(var(--senren-foreground))] shadow-lg transition-transform duration-200 #{ self.class::VARIANTS[variant] }") %>">
     <div class="flex h-full flex-col p-6">
       <% if title? %>
         <h2 class="text-lg font-semibold"><%= title %></h2>
@@ -20,7 +24,12 @@
       <% if description? %>
         <p class="text-sm text-[hsl(var(--senren-muted-foreground))]"><%= description %></p>
       <% end %>
-      <div class="mt-4 flex-1 overflow-auto">
+      <%# -mx-2 px-2 gives the scroll container room for focus rings.
+          overflow-auto clips whatever draws outside a child's border box,
+          and a ring does exactly that -- a focused input sitting flush
+          against the edge had its ring shaved off on both sides. The
+          negative margin cancels the padding, so nothing moves. %>
+      <div class="-mx-2 mt-4 flex-1 overflow-auto px-2">
         <%= body || content %>
       </div>
       <% if footer? %>
@@ -34,4 +43,4 @@
       <span aria-hidden="true">×</span>
     </button>
   </div>
-</div>
+<% end %>

data/templates/components/sheet/sheet_component.rb

@@ -1,6 +1,17 @@
 # frozen_string_literal: true
 
 module Senren
+  # Two ancestor traps to know about, because neither is visible in this file
+  # and both look like a z-index bug from the outside:
+  #
+  #   * A `z-index` on any positioned ancestor creates a stacking context, and
+  #     a fixed overlay cannot escape one. The panel then competes only inside
+  #     that context, so a sticky header with a lower z-index still covers it.
+  #     `position: relative` alone is fine; it is the z-index that traps.
+  #   * `transform`, `filter`, `backdrop-filter`, `will-change` and an opacity
+  #     below 1 create a stacking context too, with the same effect.
+  #
+  # Symptom in both cases: raising the panel's z-index changes nothing.
   class SheetComponent < BaseComponent
     renders_one :trigger
     renders_one :title

data/templates/components/shortcut_key/shortcut_key_component.html.erb

@@ -1,6 +1,6 @@
-<span <%= tag.attributes(**root_attrs("inline-flex items-center gap-1 text-xs text-[hsl(var(--senren-muted-foreground))]")) %>>
+<%= tag.span(**root_attrs("inline-flex items-center gap-1 text-xs text-[hsl(var(--senren-muted-foreground))]")) do %>
   <% (keys.presence || [content]).compact.each_with_index do |key, index| %>
     <% if index.positive? %><span aria-hidden="true">+</span><% end %>
     <kbd class="rounded border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-muted))] px-1.5 py-0.5 font-mono text-[11px] text-[hsl(var(--senren-foreground))] shadow-sm"><%= key %></kbd>
   <% end %>
-</span>
+<% end %>

data/templates/components/sidebar/sidebar_component.html.erb

@@ -1,4 +1,4 @@
-<aside <%= tag.attributes(**root_attrs("flex min-h-80 flex-col overflow-hidden rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] p-3 text-[hsl(var(--senren-card-foreground))] transition-[width] duration-300 ease-in-out", data: { controller: "senren--sidebar" })) %>>
+<%= tag.aside(**root_attrs("flex min-h-80 flex-col overflow-hidden rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] p-3 text-[hsl(var(--senren-card-foreground))] transition-[width] duration-300 ease-in-out", data: { controller: "senren--sidebar" })) do %>
   <div class="mb-4 flex items-center justify-between gap-2 px-2">
     <div data-senren--sidebar-target="brand" class="truncate font-display text-sm font-semibold tracking-tight"><%= brand %></div>
     <button type="button" data-senren--sidebar-target="toggleButton" class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-[hsl(var(--senren-muted-foreground))] transition-colors hover:bg-[hsl(var(--senren-accent))] hover:text-[hsl(var(--senren-accent-foreground))]" data-action="click->senren--sidebar#toggle" aria-label="Toggle sidebar" aria-expanded="<%= variant != :compact %>">
@@ -21,4 +21,4 @@
   <% if content? %>
     <div data-senren--sidebar-target="footer" class="mt-auto pt-4 text-xs text-[hsl(var(--senren-muted-foreground))]"><%= content %></div>
   <% end %>
-</aside>
+<% end %>

data/templates/components/switch/switch_component.html.erb

@@ -1,6 +1,6 @@
 <%= tag.label(**root_attrs("inline-flex items-center gap-3 cursor-pointer")) do %>
   <span class="relative inline-flex h-6 w-11 items-center rounded-full bg-[hsl(var(--senren-muted))] has-[:checked]:bg-[hsl(var(--senren-primary))] transition-colors">
-    <input type="checkbox" role="switch" id="<%= id %>" name="<%= name %>" value="<%= value %>" <%= "checked" if checked %> class="peer sr-only">
+    <input type="checkbox" role="switch" id="<%= id %>" name="<%= name %>" value="<%= value %>" <% if checked %>checked<% end %> class="peer sr-only">
     <span aria-hidden="true" class="absolute left-0.5 top-0.5 inline-block h-5 w-5 transform rounded-full bg-[hsl(var(--senren-background))] transition-transform peer-checked:translate-x-5"></span>
   </span>
   <% if label %>

data/templates/components/table/table_component.html.erb

@@ -1,4 +1,4 @@
-<div <%= tag.attributes(**root_attrs("w-full overflow-hidden rounded-(--senren-radius) border border-[hsl(var(--senren-border))]")) %>>
+<%= tag.div(**root_attrs("w-full overflow-hidden rounded-(--senren-radius) border border-[hsl(var(--senren-border))]")) do %>
   <table class="w-full border-collapse text-left text-sm <%= self.class::VARIANTS[variant] %>">
     <% if caption.present? %>
       <caption class="sr-only"><%= caption %></caption>
@@ -23,4 +23,4 @@
       <% end %>
     </tbody>
   </table>
-</div>
+<% end %>

data/templates/components/tabs/tabs_component.html.erb

@@ -1,4 +1,4 @@
-<div <%= tag.attributes(**root_attrs("w-full", data: { controller: "senren--tabs" })) %>>
+<%= tag.div(**root_attrs("w-full", data: { controller: "senren--tabs" })) do %>
   <div role="tablist" aria-label="<%= label %>" class="<%= self.class::VARIANTS[variant] %> flex flex-wrap items-center gap-1">
     <% items.each do |item| %>
       <% selected = active_item?(item) %>
@@ -10,9 +10,9 @@
   <div class="mt-4">
     <% items.each do |item| %>
       <% selected = active_item?(item) %>
-      <section id="<%= item[:id] %>-panel" role="tabpanel" aria-labelledby="<%= item[:id] %>-tab" data-senren--tabs-target="panel" data-panel-id="<%= item[:id] %>" data-state="<%= selected ? "active" : "inactive" %>" <%= "hidden" unless selected %> class="rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] p-4 text-sm text-[hsl(var(--senren-card-foreground))]">
+      <section id="<%= item[:id] %>-panel" role="tabpanel" aria-labelledby="<%= item[:id] %>-tab" data-senren--tabs-target="panel" data-panel-id="<%= item[:id] %>" data-state="<%= selected ? "active" : "inactive" %>" <% unless selected %>hidden<% end %> class="rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] p-4 text-sm text-[hsl(var(--senren-card-foreground))]">
         <%= item[:content].presence || content %>
       </section>
     <% end %>
   </div>
-</div>
+<% end %>

data/templates/components/tooltip/tooltip_component.html.erb

@@ -1,9 +1,11 @@
-<span data-controller="senren--tooltip" class="relative inline-block" data-senren-component="tooltip">
+<%# Root goes through root_attrs so a caller's class: and data: reach it.
+    Hand-writing these attributes dropped both. %>
+<%= tag.span(**wrapper_attrs("relative inline-block", data: { controller: "senren--tooltip" })) do %>
   <span tabindex="0"
         aria-describedby="<%= id %>"
         data-action="mouseenter->senren--tooltip#show mouseleave->senren--tooltip#hide focus->senren--tooltip#show blur->senren--tooltip#hide">
     <%= content %>
   </span>
   <span id="<%= id %>" role="tooltip" hidden data-senren--tooltip-target="bubble"
-        class="absolute z-50 mt-1 whitespace-nowrap rounded-md bg-[hsl(var(--senren-foreground))] text-[hsl(var(--senren-background))] px-2 py-1 text-xs shadow"><%= text %></span>
-</span>
+        class="<%= panel_class("absolute z-50 mt-1 whitespace-nowrap rounded-md bg-[hsl(var(--senren-foreground))] text-[hsl(var(--senren-background))] px-2 py-1 text-xs shadow") %>"><%= text %></span>
+<% end %>

data/templates/components/top_nav/top_nav_component.html.erb

@@ -1,4 +1,4 @@
-<header <%= tag.attributes(**root_attrs("sticky top-0 z-30 border-b border-[hsl(var(--senren-border))] backdrop-blur-md")) %>>
+<%= tag.header(**root_attrs("sticky top-0 z-30 border-b border-[hsl(var(--senren-border))] backdrop-blur-md")) do %>
   <div class="mx-auto flex h-14 w-full max-w-[1400px] items-center gap-6 px-4 lg:px-8">
     <div class="min-w-0 flex-none font-display text-sm font-semibold text-[hsl(var(--senren-foreground))]">
       <% if brand? %><%= brand %><% else %>Senren<% end %>
@@ -18,4 +18,4 @@
       <div class="ml-auto flex items-center gap-2"><%= actions %></div>
     <% end %>
   </div>
-</header>
+<% end %>

data/templates/controllers/cart_controller.js

@@ -27,9 +27,11 @@ export default class extends Controller {
     if (!line) return
 
     const id = line.dataset.lineId
+    // Read before the node goes away.
+    const removeUrl = line.dataset.removeUrl || null
     line.remove()
     this._recalculate()
-    this.dispatch("removed", { detail: { id, subtotalCents: this.subtotalCentsValue } })
+    this.dispatch("removed", { detail: { id, removeUrl, subtotalCents: this.subtotalCentsValue } })
   }
 
   // The value is the state; this renders it. Called on initialization too, so

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: senren-ui
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - vutt
@@ -69,6 +69,7 @@ files:
 - lib/generators/senren/install/templates/conventions.md.tt
 - lib/generators/senren/install/templates/installed_components.yml.tt
 - lib/generators/senren/install/templates/senren.css.tt
+- lib/generators/senren/install/templates/senren_themes.css.tt
 - lib/senren-ui.rb
 - lib/senren/rails.rb
 - lib/senren/rails/agent_rules_writer.rb