senren-ui 0.1.6 → 0.3.0

data/templates/components/cart/cart_component.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module Senren
+  # A shopping cart: line items with quantity steppers, a live subtotal, and
+  # removal.
+  #
+  # The server owns the cart. This component owns the widget. The Stimulus
+  # controller only does what does not round-trip pleasantly — stepping a
+  # quantity and recomputing the displayed subtotal while the user clicks — and
+  # announces the result with senren--cart:changed so a host app can update a
+  # header badge without reaching inside.
+  #
+  # Money arrives twice, and on purpose: `price` already formatted for display,
+  # and `price_cents` as an integer for arithmetic. Formatting is locale- and
+  # money-library-specific and belongs to the host app. Doing arithmetic on a
+  # formatted string is how currency bugs start.
+  class CartComponent < BaseComponent
+    VARIANTS = {
+      default: 'border-[hsl(var(--senren-border))]',
+      flush: 'border-transparent shadow-none'
+    }.freeze
+
+    SIZES = { md: '' }.freeze
+
+    def initialize(items: [], currency: '$', title: 'Cart', empty_text: 'Your cart is empty.',
+                   checkout_url: nil, checkout_label: 'Checkout', variant: :default,
+                   id: nil, class_name: nil, **html)
+      super(variant: variant, size: :md, class_name: class_name, **html)
+      @items = Array(items).map { |item| normalize_item(item) }
+      @currency = currency
+      @title = title
+      @empty_text = empty_text
+      @checkout_url = checkout_url
+      @checkout_label = checkout_label
+      @dom_id = id || senren_dom_id(title)
+    end
+
+    attr_reader :items, :currency, :title, :empty_text, :checkout_label, :dom_id
+
+    def empty? = items.empty?
+    def total_quantity = items.sum { |item| item[:quantity] }
+    def subtotal_cents = items.sum { |item| item[:price_cents] * item[:quantity] }
+    def subtotal = format_cents(subtotal_cents)
+    def line_total(item) = format_cents(item[:price_cents] * item[:quantity])
+    def safe_checkout_url = @checkout_url && safe_url(@checkout_url)
+
+    # Kept public so the same rendering is available to a host app updating a
+    # line through a Turbo Stream.
+    # Kernel.format explicitly: ViewComponent::Base defines its own `format`
+    # (the current template format, taking no arguments), which shadows
+    # Kernel#format inside a component. On Rails 8.x this happened to resolve;
+    # on 7.1 it raised "wrong number of arguments (given 2, expected 0)" as soon
+    # as the call ran inside a tag block. Caught by the version matrix.
+    def format_cents(cents)
+      "#{currency}#{Kernel.format('%.2f', cents.to_i / 100.0)}"
+    end
+
+    private
+
+    def normalize_item(item)
+      {
+        id: item[:id] || item['id'],
+        name: item[:name] || item['name'],
+        price_cents: (item[:price_cents] || item['price_cents']).to_i,
+        quantity: [(item[:quantity] || item['quantity'] || 1).to_i, 1].max,
+        image_url: item[:image_url] || item['image_url'],
+        remove_url: item[:remove_url] || item['remove_url']
+      }
+    end
+  end
+end

data/templates/components/checkbox/checkbox_component.rb

@@ -10,7 +10,7 @@ module Senren
       @name = name
       @value = value
       @checked = checked
-      @id = id || "#{name.to_s.parameterize}-#{SecureRandom.hex(2)}"
+      @id = id || senren_dom_id(name, value)
       @label = label
     end
 

data/templates/components/clipboard/clipboard_component.html.erb

@@ -1,7 +1,7 @@
-<div <%= tag.attributes(**root_attrs("inline-flex items-center gap-2", data: { controller: "senren--clipboard", "senren--clipboard-copied-label-value": copied_label })) %>>
-  <input type="text" readonly value="<%= value %>" data-senren--clipboard-target="source" class="h-10 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-muted)/0.4)] px-3 font-mono text-sm text-[hsl(var(--senren-foreground))]">
+<%= tag.div(**root_attrs("inline-flex items-center gap-2", data: { controller: "senren--clipboard", "senren--clipboard-copied-label-value": copied_label })) do %>
+  <input type="text" readonly autocomplete="off" aria-label="<%= label %>" value="<%= value %>" data-senren--clipboard-target="source" class="h-10 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-muted)/0.4)] px-3 font-mono text-sm text-[hsl(var(--senren-foreground))]">
   <button type="button" data-senren--clipboard-target="button" data-action="click->senren--clipboard#copy" class="inline-flex h-10 cursor-pointer items-center rounded-(--senren-radius) bg-[hsl(var(--senren-primary))] px-3 text-sm font-medium text-[hsl(var(--senren-primary-foreground))] hover:opacity-90">
     <%= label %>
   </button>
   <span class="sr-only" aria-live="polite" data-senren--clipboard-target="status"></span>
-</div>
+<% end %>

data/templates/components/collapsible/collapsible_component.html.erb

@@ -1,9 +1,9 @@
-<div <%= tag.attributes(**root_attrs("rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))]", data: { controller: "senren--collapsible" })) %>>
+<%= tag.div(**root_attrs("rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))]", data: { controller: "senren--collapsible" })) do %>
   <button type="button" class="flex w-full cursor-pointer items-center justify-between gap-4 px-4 py-3 text-left text-sm font-medium text-[hsl(var(--senren-card-foreground))]" aria-expanded="<%= open? %>" data-senren--collapsible-target="trigger" data-action="click->senren--collapsible#toggle">
     <span><%= trigger || title %></span>
     <span aria-hidden="true" class="text-[hsl(var(--senren-muted-foreground))]">+</span>
   </button>
-  <div data-senren--collapsible-target="panel" <%= "hidden" unless open? %> class="border-t border-[hsl(var(--senren-border))] px-4 py-3 text-sm text-[hsl(var(--senren-muted-foreground))]">
+  <div data-senren--collapsible-target="panel" <% unless open? %>hidden<% end %> class="border-t border-[hsl(var(--senren-border))] px-4 py-3 text-sm text-[hsl(var(--senren-muted-foreground))]">
     <%= body || content %>
   </div>
-</div>
+<% end %>

data/templates/components/combobox/combobox_component.html.erb

@@ -1,4 +1,4 @@
-<div <%= tag.attributes(**root_attrs("relative w-full", data: { controller: "senren--combobox" })) %>>
+<%= tag.div(**root_attrs("relative w-full", data: { controller: "senren--combobox" })) do %>
   <input type="hidden" name="<%= name %>" value="<%= value %>" data-senren--combobox-target="value">
   <button type="button" class="group flex h-10 w-full cursor-pointer items-center justify-between rounded-(--senren-radius) border bg-[hsl(var(--senren-background))] px-3 text-left text-sm text-[hsl(var(--senren-foreground))] transition-colors hover:bg-[hsl(var(--senren-muted)/0.35)] <%= self.class::VARIANTS[variant] %>" aria-haspopup="listbox" aria-expanded="false" data-state="closed" data-senren--combobox-target="button" data-action="click->senren--combobox#toggle">
     <span data-senren--combobox-target="label"><%= selected_label || placeholder %></span>
@@ -7,7 +7,7 @@
     </svg>
   </button>
   <div data-senren--combobox-target="panel" hidden class="absolute z-50 mt-2 w-full rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] p-2 shadow-md">
-    <input type="text" placeholder="<%= placeholder %>" data-senren--combobox-target="search" data-action="input->senren--combobox#filter keydown->senren--combobox#onKey" class="mb-2 h-9 w-full rounded-md border border-[hsl(var(--senren-input))] bg-[hsl(var(--senren-background))] px-2 text-sm outline-none focus:ring-2 focus:ring-[hsl(var(--senren-ring))]">
+    <input type="text" autocomplete="off" placeholder="<%= placeholder %>" data-senren--combobox-target="search" data-action="input->senren--combobox#filter keydown->senren--combobox#onKey" class="mb-2 h-9 w-full rounded-md border border-[hsl(var(--senren-input))] bg-[hsl(var(--senren-background))] px-2 text-sm outline-none focus:ring-2 focus:ring-[hsl(var(--senren-ring))]">
     <div role="listbox" class="max-h-56 overflow-auto">
       <% options.each do |option| %>
         <button type="button" role="option" data-senren--combobox-target="option" data-value="<%= option[:value] %>" data-label="<%= option[:label] %>" data-action="click->senren--combobox#choose" class="block w-full cursor-pointer rounded-md px-2 py-2 text-left text-sm text-[hsl(var(--senren-popover-foreground))] hover:bg-[hsl(var(--senren-accent))]">
@@ -16,4 +16,4 @@
       <% end %>
     </div>
   </div>
-</div>
+<% end %>

data/templates/components/command/command_component.html.erb

@@ -4,7 +4,7 @@
   <% else %>
     <label for="<%= dom_id %>-input" class="sr-only"><%= label %></label>
     <div class="border-b border-[hsl(var(--senren-border))] p-2">
-      <input id="<%= dom_id %>-input" type="search" autocomplete="off" placeholder="<%= placeholder %>" aria-label="<%= label %>" aria-controls="<%= dom_id %>-list" aria-activedescendant="" data-senren--command-target="input" data-action="input->senren--command#filter keydown->senren--command#onKey" class="h-10 w-full rounded-(--senren-radius) bg-[hsl(var(--senren-background))] px-3 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="<%= dom_id %>-input" type="search" autocomplete="off" placeholder="<%= placeholder %>" aria-label="<%= label %>" aria-controls="<%= dom_id %>-list" data-senren--command-target="input" data-action="input->senren--command#filter keydown->senren--command#onKey" class="h-10 w-full rounded-(--senren-radius) bg-[hsl(var(--senren-background))] px-3 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))]">
     </div>
     <div id="<%= dom_id %>-list" role="listbox" aria-label="<%= label %>" data-senren--command-target="list" class="max-h-72 overflow-y-auto p-1.5">
       <% items.each_with_index do |item, index| %>

data/templates/components/command/command_component.rb

@@ -11,7 +11,7 @@ module Senren
       @placeholder = placeholder
       @label = label
       @empty_text = empty_text
-      @dom_id = id || "senren-command-#{SecureRandom.hex(3)}"
+      @dom_id = id || senren_dom_id(label)
       @items = normalize_items(items)
     end
 

data/templates/components/context_menu/context_menu_component.html.erb

@@ -1,11 +1,14 @@
-<div data-controller="senren--context-menu" class="relative" data-senren-component="context_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", data: { controller: "senren--context-menu" })) do %>
   <div data-senren--context-menu-target="trigger" data-action="contextmenu->senren--context-menu#open">
     <%= trigger %>
   </div>
   <div data-senren--context-menu-target="menu" role="menu" hidden
-       class="absolute z-50 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 z-50 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/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="hover:cursor-pointerh-10 w-full 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))] <%= 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
@@ -14,7 +25,7 @@ module Senren
     def initialize(open: false, id: nil, class_name: nil, **html)
       super(variant: :default, size: :md, class_name: class_name, **html)
       @open = open
-      @dom_id = id || "senren-dialog-#{SecureRandom.hex(3)}"
+      @dom_id = id || senren_dom_id
     end
 
     attr_reader :open, :dom_id

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/form/form_component.rb

@@ -15,6 +15,14 @@ module Senren
       @multipart = multipart
     end
 
-    attr_reader :model, :url, :method, :multipart
+    attr_reader :model, :method, :multipart
+
+    # This one reaches form_with's `action`, which makes it the highest-value
+    # URL sink in the library: `//evil.example` is a protocol-relative absolute
+    # URL, so a form built from user-controlled input POSTs every field —
+    # including the CSRF token — off-origin. Same policy as every other href in
+    # the library; it was simply missed because the security test enumerated
+    # known components rather than asserting a property over all of them.
+    def url = @url && safe_url(@url)
   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/invite_member_dialog/invite_member_dialog_component.rb

@@ -18,7 +18,7 @@ module Senren
       @role_name = role_name
       @roles = Array(roles)
       @button_label = button_label
-      @dom_id = id || "senren-invite-member-#{SecureRandom.hex(3)}"
+      @dom_id = id || senren_dom_id(title)
     end
 
     attr_reader :title, :description, :email_name, :role_name, :roles, :button_label, :dom_id

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

@@ -0,0 +1,38 @@
+<%= 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 %>
+      <%= 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
+      </div>
+    <% end %>
+
+    <% if badge %>
+      <span class="absolute left-2 top-2 inline-flex items-center rounded-(--senren-radius) bg-[hsl(var(--senren-primary))] px-2 py-0.5 text-xs font-medium text-[hsl(var(--senren-primary-foreground))]">
+        <%= badge %>
+      </span>
+    <% end %>
+  </div>
+
+  <div class="flex flex-1 flex-col gap-2 p-4">
+    <h3 class="text-sm font-medium leading-tight text-[hsl(var(--senren-foreground))]">
+      <%= title %>
+    </h3>
+
+    <% if description %>
+      <p class="line-clamp-2 text-sm text-[hsl(var(--senren-muted-foreground))]"><%= description %></p>
+    <% end %>
+
+    <p class="mt-auto text-base font-semibold text-[hsl(var(--senren-foreground))]"><%= price %></p>
+
+    <%# 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"
+              <% 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>
+    <% end %>
+  </div>
+<% end %>

data/templates/components/product_card/product_card_component.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Senren
+  # A product tile with an add-to-cart action.
+  #
+  # Adding to a cart is an ordinary form submission, so this component ships no
+  # Stimulus controller. That is deliberate: a listing page renders this tile
+  # many times, and a controller here would download JavaScript on a page that
+  # does not need any.
+  #
+  # Price is passed in already formatted. Currency formatting is locale- and
+  # money-library-specific and belongs to the host app; a UI library that
+  # guesses gets it wrong in another country.
+  class ProductCardComponent < BaseComponent
+    VARIANTS = {
+      default: 'border-[hsl(var(--senren-border))]',
+      featured: 'border-[hsl(var(--senren-primary))] ring-1 ring-[hsl(var(--senren-primary)/0.35)]'
+    }.freeze
+
+    SIZES = { md: '' }.freeze
+
+    def initialize(title:, price:, url:, image_url: nil, description: nil, badge: nil,
+                   action_label: 'Add to cart', available: true, method: :post,
+                   variant: :default, id: nil, class_name: nil, **html)
+      super(variant: variant, size: :md, class_name: class_name, **html)
+      @title = title
+      @price = price
+      @url = url
+      @image_url = image_url
+      @description = description
+      @badge = badge
+      @action_label = action_label
+      @available = available
+      @method = method
+      @dom_id = id || senren_dom_id(title)
+    end
+
+    attr_reader :title, :price, :image_url, :description, :badge, :action_label, :method, :dom_id
+
+    def available? = @available == true
+
+    # Untrusted values reach href/src attributes, so both go through the shared
+    # guards rather than being interpolated directly.
+    def safe_action_url = safe_url(@url)
+    def safe_image_url = safe_media_url(@image_url)
+
+    def button_label = available? ? action_label : 'Out of stock'
+  end
+end

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/rich_text_editor_lite/rich_text_editor_lite_component.html.erb

@@ -26,7 +26,7 @@
     </div>
   <% end %>
 
-  <div id="<%= dom_id %>-editor" role="textbox" aria-multiline="true" aria-label="<%= label %>" contenteditable="true" data-placeholder="<%= placeholder %>" data-senren--rich-text-editor-lite-target="editor" data-action="click->senren--rich-text-editor-lite#openLink input->senren--rich-text-editor-lite#sync input->senren--rich-text-editor-lite#rememberSelection keyup->senren--rich-text-editor-lite#rememberSelection keyup->senren--rich-text-editor-lite#updateToolbar mouseup->senren--rich-text-editor-lite#rememberSelection mouseup->senren--rich-text-editor-lite#updateToolbar touchend->senren--rich-text-editor-lite#rememberSelection paste->senren--rich-text-editor-lite#syncSoon" class="min-h-40 cursor-text bg-[hsl(var(--senren-background))] p-4 text-left text-sm leading-6 text-[hsl(var(--senren-foreground))] outline-none focus:ring-2 focus:ring-inset focus:ring-[hsl(var(--senren-ring))]">
+  <div id="<%= dom_id %>-editor" role="textbox" aria-multiline="true" aria-label="<%= label %>" contenteditable="true" data-placeholder="<%= placeholder %>" data-senren--rich-text-editor-lite-target="editor" data-action="click->senren--rich-text-editor-lite#openLink input->senren--rich-text-editor-lite#sync input->senren--rich-text-editor-lite#rememberSelection keyup->senren--rich-text-editor-lite#rememberSelection keyup->senren--rich-text-editor-lite#updateToolbar mouseup->senren--rich-text-editor-lite#rememberSelection mouseup->senren--rich-text-editor-lite#updateToolbar touchend->senren--rich-text-editor-lite#rememberSelection paste->senren--rich-text-editor-lite#paste drop->senren--rich-text-editor-lite#paste" class="min-h-40 cursor-text bg-[hsl(var(--senren-background))] p-4 text-left text-sm leading-6 text-[hsl(var(--senren-foreground))] outline-none focus:ring-2 focus:ring-inset focus:ring-[hsl(var(--senren-ring))]">
     <%= sanitize(initial_content, tags: %w[p br strong b em i a ul ol li h1 h2 h3], attributes: %w[href rel target data-align]) %>
   </div>
 <% end %>

data/templates/components/rich_text_editor_lite/rich_text_editor_lite_component.rb

@@ -12,7 +12,7 @@ module Senren
       @value = value
       @label = label
       @placeholder = placeholder
-      @dom_id = id || "senren-editor-#{SecureRandom.hex(3)}"
+      @dom_id = id || senren_dom_id(name)
       @toolbar = toolbar
       @debug = debug
     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 %>