senren-ui 0.2.0 → 0.4.0

data/templates/components/cart/cart_component.html.erb

@@ -12,9 +12,15 @@
         <li class="flex items-center gap-3 px-4 py-3"
             data-senren--cart-target="line"
             data-line-id="<%= item[:id] %>"
+            <%# Emitted so the `removed` event can carry it. The component
+                accepted remove_url: and normalised it, then never wrote it
+                anywhere -- an advertised input that reached nothing, so the
+                consumer listening for the event had no way to learn where to
+                send the delete. %>
+            <% if item[:remove_url].present? %>data-remove-url="<%= safe_url(item[:remove_url]) %>"<% end %>
             data-price-cents="<%= item[:price_cents] %>">
           <% if (image = safe_media_url(item[:image_url])) %>
-            <img src="<%= image %>" alt="" loading="lazy" class="h-12 w-12 shrink-0 rounded-(--senren-radius) object-cover">
+            <%= image_tag image, alt: "", loading: "lazy", class: "h-12 w-12 shrink-0 rounded-(--senren-radius) object-cover" %>
           <% else %>
             <div class="h-12 w-12 shrink-0 rounded-(--senren-radius) bg-[hsl(var(--senren-muted)/0.5)]" aria-hidden="true"></div>
           <% end %>
@@ -24,10 +30,10 @@
             <p class="text-sm text-[hsl(var(--senren-muted-foreground))]" data-senren--cart-target="lineTotal"><%= line_total(item) %></p>
           </div>
 
-          <div class="flex items-center gap-1" role="group" aria-label="<%= item[:name] %> quantity">
+          <div class="flex items-center gap-1" role="group" aria-label="<%= quantity_label(item) %>">
             <button type="button"
                     data-action="click->senren--cart#decrement"
-                    aria-label="Decrease <%= item[:name] %> quantity"
+                    aria-label="<%= decrease_label(item) %>"
                     class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-(--senren-radius) border border-[hsl(var(--senren-border))] text-sm hover:bg-[hsl(var(--senren-accent))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))]">&minus;</button>
 
             <output class="w-8 text-center text-sm tabular-nums text-[hsl(var(--senren-foreground))]"
@@ -35,21 +41,21 @@
 
             <button type="button"
                     data-action="click->senren--cart#increment"
-                    aria-label="Increase <%= item[:name] %> quantity"
+                    aria-label="<%= increase_label(item) %>"
                     class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-(--senren-radius) border border-[hsl(var(--senren-border))] text-sm hover:bg-[hsl(var(--senren-accent))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))]">+</button>
           </div>
 
           <button type="button"
                   data-action="click->senren--cart#remove"
-                  aria-label="Remove <%= item[:name] %>"
-                  class="inline-flex h-8 cursor-pointer items-center rounded-(--senren-radius) px-2 text-sm text-[hsl(var(--senren-muted-foreground))] hover:bg-[hsl(var(--senren-accent))] hover:text-[hsl(var(--senren-destructive))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))]">Remove</button>
+                  aria-label="<%= remove_item_label(item) %>"
+                  class="inline-flex h-8 cursor-pointer items-center rounded-(--senren-radius) px-2 text-sm text-[hsl(var(--senren-muted-foreground))] hover:bg-[hsl(var(--senren-accent))] hover:text-[hsl(var(--senren-destructive))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))]"><%= remove_label %></button>
         </li>
       <% end %>
     </ul>
 
     <footer class="flex items-center justify-between gap-3 border-t border-[hsl(var(--senren-border))] px-4 py-3">
       <div class="text-sm text-[hsl(var(--senren-muted-foreground))]">
-        Subtotal
+        <%= subtotal_label %>
         <span class="ml-1 font-semibold text-[hsl(var(--senren-foreground))]" data-senren--cart-target="subtotal"><%= subtotal %></span>
       </div>
 

data/templates/components/cart/cart_component.rb

@@ -22,8 +22,9 @@ module Senren
 
     SIZES = { md: '' }.freeze
 
-    def initialize(items: [], currency: '$', title: 'Cart', empty_text: 'Your cart is empty.',
-                   checkout_url: nil, checkout_label: 'Checkout', variant: :default,
+    def initialize(items: [], currency: '$', title: senren_t('cart.title', default: 'Cart'),
+                   empty_text: senren_t('cart.empty', default: 'Your cart is empty.'),
+                   checkout_url: nil, checkout_label: senren_t('cart.checkout', default: '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) }
@@ -37,6 +38,14 @@ module Senren
 
     attr_reader :items, :currency, :title, :empty_text, :checkout_label, :dom_id
 
+    def subtotal_label = senren_t('cart.subtotal', default: 'Subtotal')
+    def remove_label = senren_t('cart.remove', default: 'Remove')
+
+    def quantity_label(item) = senren_t('cart.quantity_group', default: '%{name} quantity', name: item[:name])
+    def decrease_label(item) = senren_t('cart.decrease', default: 'Decrease %{name} quantity', name: item[:name])
+    def increase_label(item) = senren_t('cart.increase', default: 'Increase %{name} quantity', name: item[:name])
+    def remove_item_label(item) = senren_t('cart.remove_item', default: 'Remove %{name}', name: item[:name])
+
     def empty? = items.empty?
     def total_quantity = items.sum { |item| item[:quantity] }
     def subtotal_cents = items.sum { |item| item[:price_cents] * item[:quantity] }

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 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))]">
+<%= tag.div(**root_attrs("inline-flex items-center gap-2", data: { controller: "senren--clipboard", "senren--clipboard-copied-label-value": copied_label, "senren--clipboard-copied-status-value": copied_status })) 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/clipboard/clipboard_component.rb

@@ -5,7 +5,8 @@ module Senren
     VARIANTS = { default: '' }.freeze
     SIZES = { md: '' }.freeze
 
-    def initialize(value:, label: 'Copy', copied_label: 'Copied', class_name: nil, **html)
+    def initialize(value:, label: senren_t('clipboard.copy', default: 'Copy'),
+                   copied_label: senren_t('clipboard.copied', default: 'Copied'), class_name: nil, **html)
       super(variant: :default, size: :md, class_name: class_name, **html)
       @label = label
       @value = value
@@ -13,5 +14,9 @@ module Senren
     end
 
     attr_reader :label, :value, :copied_label
+
+    # What a screen reader is told once the copy has happened. Passed to the
+    # controller as a Stimulus value so no sentence lives in JavaScript.
+    def copied_status = senren_t('clipboard.copied_status', default: 'Copied to clipboard')
   end
 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/collapsible/collapsible_component.rb

@@ -6,7 +6,7 @@ module Senren
     VARIANTS = { default: '' }.freeze
     SIZES = { md: '' }.freeze
 
-    def initialize(title: 'Details', open: false, class_name: nil, **html)
+    def initialize(title: senren_t('collapsible.details', default: 'Details'), open: false, class_name: nil, **html)
       super(variant: :default, size: :md, class_name: class_name, **html)
       @title = title
       @open = open

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/combobox/combobox_component.rb

@@ -8,7 +8,8 @@ module Senren
     }.freeze
     SIZES = { md: '' }.freeze
 
-    def initialize(name:, options:, value: nil, placeholder: 'Search...', variant: :default, class_name: nil, **html)
+    def initialize(name:, options:, value: nil, placeholder: senren_t('combobox.placeholder', default: 'Search...'),
+                   variant: :default, class_name: nil, **html)
       super(variant: variant, size: :md, class_name: class_name, **html)
       @name = name
       @options = normalize_options(options)

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

@@ -5,7 +5,9 @@ module Senren
     VARIANTS = { default: '' }.freeze
     SIZES = { md: '' }.freeze
 
-    def initialize(items: [], placeholder: 'Type a command...', label: 'Command menu', empty_text: 'No results found.',
+    def initialize(items: [], placeholder: senren_t('command.placeholder', default: 'Type a command...'),
+                   label: senren_t('command.label', default: 'Command menu'),
+                   empty_text: senren_t('command.empty', default: 'No results found.'),
                    id: nil, class_name: nil, **html)
       super(variant: :default, size: :md, class_name: class_name, **html)
       @placeholder = placeholder

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/data_table/data_table_component.html.erb

@@ -1,4 +1,4 @@
-<%= tag.div(**root_attrs("overflow-hidden rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] shadow-sm", data: { controller: "senren--data-table" })) do %>
+<%= tag.div(**root_attrs("relative overflow-hidden rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] shadow-sm", data: { controller: "senren--data-table" })) do %>
   <% if toolbar? %>
     <div class="border-b border-[hsl(var(--senren-border))] p-3"><%= toolbar %></div>
   <% end %>
@@ -18,7 +18,7 @@
                 <% if sortable? %>
                   <button type="button" class="inline-flex cursor-pointer items-center gap-1 rounded-sm hover:text-[hsl(var(--senren-foreground))]" data-action="click->senren--data-table#sort" data-sort-key="<%= column_sort_key(column) %>">
                     <%= column_label(column) %>
-                    <span aria-hidden="true">Sort</span>
+                    <span aria-hidden="true"><%= senren_t('data_table.sort', default: 'Sort') %></span>
                   </button>
                 <% else %>
                   <%= column_label(column) %>
@@ -32,7 +32,7 @@
             <tr class="transition-colors hover:bg-[hsl(var(--senren-muted)/0.35)]" data-senren--data-table-target="row">
               <% columns.each do |column| %>
                 <% value = cell_value(row, column) %>
-                <td class="px-4 py-3" data-sort-key="<%= column_sort_key(column) %>" data-sort-value="<%= value %>"><%= value %></td>
+                <td class="px-4 py-3" data-sort-key="<%= column_sort_key(column) %>" data-sort-value="<%= sort_value(value) %>"><%= value %></td>
               <% end %>
             </tr>
           <% end %>

data/templates/components/data_table/data_table_component.rb

@@ -6,7 +6,8 @@ module Senren
     VARIANTS = { default: '' }.freeze
     SIZES = { md: '' }.freeze
 
-    def initialize(columns: [], rows: [], caption: nil, empty_text: 'No records found.', sortable: true,
+    def initialize(columns: [], rows: [], caption: nil,
+                   empty_text: senren_t('data_table.empty', default: 'No records found.'), sortable: true,
                    variant: :default, class_name: nil, **html)
       super(variant: variant, size: :md, class_name: class_name, **html)
       @columns = Array(columns)
@@ -33,6 +34,20 @@ module Senren
       column_key(column).to_s
     end
 
+    # The text a cell shows, for its data-sort-value. A cell holding markup (a
+    # badge, a link) is html_safe, which ERB does not escape, so writing it
+    # into the attribute as-is pasted the markup inside the quotes and broke
+    # the <td>. Its decoded text is a plain String, which ERB escapes once.
+    #
+    # Asks the string, not the value: ERB decides on `to_s.html_safe?`, so an
+    # object whose to_s returns markup breaks the attribute just the same.
+    def sort_value(value)
+      text = value.to_s
+      return text unless text.html_safe?
+
+      Nokogiri::HTML5.fragment(text.to_str).text
+    end
+
     private
 
     def column_key(column)

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] %>">
-  <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>
+<%= 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))]"><%= senren_t('date_picker.today', default: '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))]"><%= senren_t('date_picker.clear', default: 'Clear') %></button>
+<% end %>

data/templates/components/date_picker/date_picker_component.rb

@@ -8,7 +8,8 @@ module Senren
     }.freeze
     SIZES = { md: '' }.freeze
 
-    def initialize(name:, value: nil, id: nil, placeholder: 'Select date', variant: :default, class_name: nil, **html)
+    def initialize(name:, value: nil, id: nil, placeholder: senren_t('date_picker.placeholder', default: 'Select date'),
+                   variant: :default, class_name: nil, **html)
       super(variant: variant, size: :md, class_name: class_name, **html)
       @name = name
       @value = value

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

@@ -1,21 +1,25 @@
-<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 %>
     </span>
   <% else %>
     <button type="button" data-action="click->senren--dialog#open"
-            class="hidden" data-senren--dialog-target="trigger" aria-controls="<%= dom_id %>-panel">Open</button>
+            class="hidden" data-senren--dialog-target="trigger" aria-controls="<%= dom_id %>-panel"><%= senren_t('shared.open', default: 'Open') %></button>
   <% 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 %>
@@ -30,9 +34,9 @@
     <% end %>
 
     <button type="button" data-action="click->senren--dialog#close"
-            aria-label="Close"
+            aria-label="<%= senren_t('shared.close', default: 'Close') %>"
             class="absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-[hsl(var(--senren-ring))]">
       <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/filter_bar/filter_bar_component.rb

@@ -5,7 +5,7 @@ module Senren
     VARIANTS = { default: '' }.freeze
     SIZES = { md: '' }.freeze
 
-    def initialize(label: 'Filters', class_name: nil, **html)
+    def initialize(label: senren_t('filter_bar.label', default: 'Filters'), class_name: nil, **html)
       super(variant: :default, size: :md, class_name: class_name, **html)
       @label = label
     end

data/templates/components/form/form_component.html.erb

@@ -6,5 +6,5 @@
   form_opts[:multipart] = multipart if multipart
 %>
 <%= form_with(**form_opts, **root_attrs("space-y-4")) do |f| %>
-  <%= content || capture(f, &Proc.new) %>
+  <%= form_body(f) %>
 <% end %>

data/templates/components/form/form_component.rb

@@ -17,6 +17,27 @@ module Senren
 
     attr_reader :model, :method, :multipart
 
+    # ViewComponent's `content` calls the render block with the component as
+    # its argument, so `|f|` would be this component, not the form builder.
+    # And because a component is an ActionView::Base, `f.text_field :title,
+    # class: "x"` would not raise: it would reach the template-level helper and
+    # render `name="title[{class: "x"}]"`. Keep the block and call it with the
+    # builder form_with yields instead.
+    def render_in(view_context, **, &block)
+      @form_block = block
+      super
+    end
+
+    # Mirrors ViewComponent's own `content`: the block runs under the caller's
+    # virtual path, so relative `t('.key')` lookups inside it resolve against
+    # the caller's template. (A block and with_content together never get
+    # here: ViewComponent raises DuplicateContentError first.)
+    def form_body(builder)
+      return content unless @form_block
+
+      with_captured_virtual_path(@old_virtual_path) { view_context.capture(builder, &@form_block) }
+    end
+
     # 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 —

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? %>
@@ -18,18 +19,19 @@
       <% if content? %>
         <%= 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))]">
-        <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 %>
-        </select>
+        <label class="block text-sm font-medium text-[hsl(var(--senren-foreground))]" for="<%= dom_id %>-email"><%= senren_t('invite_member_dialog.email', default: 'Email') %></label>
+        <input id="<%= dom_id %>-email" name="<%= email_name %>" type="email" autocomplete="email" placeholder="<%= senren_t('invite_member_dialog.email_placeholder', default: '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"><%= senren_t('invite_member_dialog.role', default: 'Role') %></label>
+        <%# Was a hand-written <select> with the styling copied out of %>
+        <%# NativeSelectComponent, which meant it silently missed anything that %>
+        <%# component gained later -- the chevron and its rotation among them. %>
+        <%= render Senren::NativeSelectComponent.new(name: role_name, id: "#{dom_id}-role", options: roles) %>
       <% end %>
     </div>
 
     <div class="mt-6 flex justify-end gap-2">
-      <button type="button" class="inline-flex h-10 cursor-pointer items-center rounded-(--senren-radius) px-4 text-sm font-medium hover:bg-[hsl(var(--senren-accent))]" data-action="click->senren--invite-member-dialog#close">Cancel</button>
-      <% if footer? %><%= footer %><% else %><button type="submit" class="inline-flex h-10 cursor-pointer items-center rounded-(--senren-radius) bg-[hsl(var(--senren-primary))] px-4 text-sm font-medium text-[hsl(var(--senren-primary-foreground))] hover:opacity-90">Send invite</button><% end %>
+      <button type="button" class="inline-flex h-10 cursor-pointer items-center rounded-(--senren-radius) px-4 text-sm font-medium hover:bg-[hsl(var(--senren-accent))]" data-action="click->senren--invite-member-dialog#close"><%= senren_t('invite_member_dialog.cancel', default: 'Cancel') %></button>
+      <% if footer? %><%= footer %><% else %><button type="submit" class="inline-flex h-10 cursor-pointer items-center rounded-(--senren-radius) bg-[hsl(var(--senren-primary))] px-4 text-sm font-medium text-[hsl(var(--senren-primary-foreground))] hover:opacity-90"><%= senren_t('invite_member_dialog.send', default: 'Send invite') %></button><% end %>
     </div>
   </div>
 <% end %>

data/templates/components/invite_member_dialog/invite_member_dialog_component.rb

@@ -8,9 +8,17 @@ module Senren
     VARIANTS = { default: '' }.freeze
     SIZES = { md: '' }.freeze
 
-    def initialize(title: 'Invite teammate', description: 'Send an invitation to join this workspace.',
-                   email_name: 'email', role_name: 'role', roles: %w[Member
-                                                                     Admin], button_label: 'Invite member', id: nil, class_name: nil, **html)
+    # The role option values stay `Member` and `Admin`, because that is what the
+    # form submits and what the host's code compares against. Only the label a
+    # person reads is translated.
+    def initialize(title: senren_t('invite_member_dialog.title', default: 'Invite teammate'),
+                   description: senren_t('invite_member_dialog.description',
+                                         default: 'Send an invitation to join this workspace.'),
+                   email_name: 'email', role_name: 'role',
+                   roles: [['Member', senren_t('invite_member_dialog.role_member', default: 'Member')],
+                           ['Admin', senren_t('invite_member_dialog.role_admin', default: 'Admin')]],
+                   button_label: senren_t('invite_member_dialog.button', default: 'Invite member'),
+                   id: nil, class_name: nil, **html)
       super(variant: :default, size: :md, class_name: class_name, **html)
       @title = title
       @description = description

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) %>