senren-ui 0.3.0 → 0.4.1

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 @@
 <%= 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>
+  <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

@@ -8,7 +8,7 @@
     </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
@@ -34,7 +34,7 @@
     <% 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>

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/invite_member_dialog/invite_member_dialog_component.html.erb

@@ -19,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" 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 %>
-        </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/native_select/native_select_component.rb

@@ -13,9 +13,18 @@ module Senren
       lg: 'h-12 text-base px-4'
     }.freeze
 
-    # native_arrow: true  → keep browser/OS native arrow (appearance-auto)
-    # native_arrow: false → use custom SVG arrow (appearance-none + SVG overlay)
-    def initialize(name:, options:, selected: nil, id: nil, prompt: nil, native_arrow: true,
+    # native_arrow: false → custom SVG chevron that rotates while the select has
+    #                       focus (appearance-none + positioned SVG). The default.
+    # native_arrow: true  → the browser's own arrow (appearance-auto), which
+    #                       matches the OS but cannot be styled or animated.
+    #
+    # The default was `true`, so out of the box a Senren select was the one
+    # control in the library with no state to see: the arrow never moved, and
+    # nothing distinguished an open select from a closed one. The custom arrow
+    # was already written and had to be asked for by name, which meant nobody
+    # got it. Pass native_arrow: true to opt back in -- worth doing on mobile,
+    # where the OS renders its own picker anyway.
+    def initialize(name:, options:, selected: nil, id: nil, prompt: nil, native_arrow: false,
                    variant: :default, size: :md, class_name: nil, **html)
       super(variant: variant, size: size, class_name: class_name, **html)
       @name = name

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

@@ -1,11 +1,11 @@
 <%= 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 } %>
+  <%= link_to senren_t('pagination.previous', default: '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 } %>
 
   <% (1..total_pages).each do |page| %>
     <%= link_to page, page_url(page), class: "inline-flex h-9 min-w-9 items-center justify-center rounded-md px-3 text-sm font-medium #{page == current_page ? "bg-[hsl(var(--senren-primary))] text-[hsl(var(--senren-primary-foreground))]" : "text-[hsl(var(--senren-muted-foreground))] hover:bg-[hsl(var(--senren-accent))] hover:text-[hsl(var(--senren-accent-foreground))]"}", aria: { current: (page == current_page ? "page" : nil) } %>
   <% end %>
 
   <% 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 } %>
+  <%= link_to senren_t('pagination.next', default: '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 } %>
 <% end %>

data/templates/components/pagination/pagination_component.rb

@@ -5,7 +5,8 @@ module Senren
     VARIANTS = { default: '' }.freeze
     SIZES = { md: '' }.freeze
 
-    def initialize(current_page: 1, total_pages: 1, path: nil, label: 'Pagination', class_name: nil, **html)
+    def initialize(current_page: 1, total_pages: 1, path: nil, label: senren_t('pagination.label', default: 'Pagination'),
+                   class_name: nil, **html)
       super(variant: :default, size: :md, class_name: class_name, **html)
       @total_pages = [total_pages.to_i, 1].max
       @current_page = current_page.to_i.clamp(1, @total_pages)

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

@@ -4,7 +4,7 @@
       <%= 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
+        <%= senren_t('product_card.no_image', default: 'No image') %>
       </div>
     <% end %>
 

data/templates/components/product_card/product_card_component.rb

@@ -20,7 +20,7 @@ module Senren
     SIZES = { md: '' }.freeze
 
     def initialize(title:, price:, url:, image_url: nil, description: nil, badge: nil,
-                   action_label: 'Add to cart', available: true, method: :post,
+                   action_label: senren_t('product_card.add_to_cart', default: '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
@@ -44,6 +44,6 @@ module Senren
     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'
+    def button_label = available? ? action_label : senren_t('product_card.out_of_stock', default: 'Out of stock')
   end
 end

data/templates/components/rich_text_editor_lite/rich_text_editor_lite_component.html.erb

@@ -1,24 +1,10 @@
-<%= tag.div(**root_attrs("overflow-hidden rounded-(--senren-radius) border shadow-sm", data: { controller: "senren--rich-text-editor-lite", "senren--rich-text-editor-lite-debug-value": debug? })) do %>
+<%= tag.div(**root_attrs("overflow-hidden rounded-(--senren-radius) border shadow-sm", data: { controller: "senren--rich-text-editor-lite", "senren--rich-text-editor-lite-debug-value": debug?, "senren--rich-text-editor-lite-link-prompt-value": link_prompt })) do %>
   <label for="<%= dom_id %>-editor" class="sr-only"><%= label %></label>
   <textarea hidden name="<%= name %>" data-senren--rich-text-editor-lite-target="input"><%= initial_content %></textarea>
 
   <% if toolbar? %>
     <div class="flex flex-wrap items-center gap-1 border-b border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-muted)/0.35)] p-2">
-      <% [
-        ["formatBlock:p", "P", "Paragraph"],
-        ["formatBlock:h1", "H1", "Heading 1"],
-        ["formatBlock:h2", "H2", "Heading 2"],
-        ["formatBlock:h3", "H3", "Heading 3"],
-        ["bold", "B", "Bold"],
-        ["italic", "I", "Italic"],
-        ["createLink", "Link", "Create link"],
-        ["insertUnorderedList", "List", "Bulleted list"],
-        ["insertOrderedList", "1.", "Numbered list"],
-        ["align:left", "Left", "Align left"],
-        ["align:center", "Center", "Align center"],
-        ["align:right", "Right", "Align right"],
-        ["align:justify", "Justify", "Justify"]
-      ].each do |command, label_text, aria_label| %>
+      <% toolbar_buttons.each do |command, label_text, aria_label| %>
         <button type="button" disabled class="inline-flex h-8 cursor-pointer items-center rounded-(--senren-radius) px-2 text-sm font-medium text-[hsl(var(--senren-foreground))] hover:bg-[hsl(var(--senren-accent))] disabled:cursor-not-allowed disabled:opacity-50 aria-pressed:bg-[hsl(var(--senren-accent))]" data-senren--rich-text-editor-lite-target="button" data-command="<%= command %>" data-action="pointerdown->senren--rich-text-editor-lite#keepSelection mousedown->senren--rich-text-editor-lite#keepSelection touchstart->senren--rich-text-editor-lite#keepSelection click->senren--rich-text-editor-lite#format" aria-label="<%= aria_label %>" aria-pressed="false">
           <%= label_text %>
         </button>

data/templates/components/rich_text_editor_lite/rich_text_editor_lite_component.rb

@@ -5,7 +5,8 @@ module Senren
     }.freeze
     SIZES = { md: '' }.freeze
 
-    def initialize(name: 'content', value: nil, label: 'Content', placeholder: 'Write something...', id: nil,
+    def initialize(name: 'content', value: nil, label: senren_t('rich_text_editor_lite.label', default: 'Content'),
+                   placeholder: senren_t('rich_text_editor_lite.placeholder', default: 'Write something...'), id: nil,
                    toolbar: true, debug: ::Rails.env.development?, class_name: nil, **html)
       super(variant: :default, size: :md, class_name: class_name, **html)
       @name = name
@@ -23,6 +24,36 @@ module Senren
 
     def debug? = !!@debug
 
+    # Read by the controller from a Stimulus value, so the prompt it opens is in
+    # the host's language without a sentence living in JavaScript.
+    def link_prompt = senren_t('rich_text_editor_lite.link_prompt', default: 'Paste a URL')
+
+    # [command, visible text, aria-label]. `P`, `H1`-`H3`, `B`, `I` and `1.` are
+    # symbols, not words, so they are not translated; every word is.
+    def toolbar_buttons
+      [
+        ['formatBlock:p', 'P', senren_t('rich_text_editor_lite.toolbar.paragraph', default: 'Paragraph')],
+        ['formatBlock:h1', 'H1', senren_t('rich_text_editor_lite.toolbar.heading_1', default: 'Heading 1')],
+        ['formatBlock:h2', 'H2', senren_t('rich_text_editor_lite.toolbar.heading_2', default: 'Heading 2')],
+        ['formatBlock:h3', 'H3', senren_t('rich_text_editor_lite.toolbar.heading_3', default: 'Heading 3')],
+        ['bold', 'B', senren_t('rich_text_editor_lite.toolbar.bold', default: 'Bold')],
+        ['italic', 'I', senren_t('rich_text_editor_lite.toolbar.italic', default: 'Italic')],
+        ['createLink', senren_t('rich_text_editor_lite.toolbar_short.link', default: 'Link'),
+         senren_t('rich_text_editor_lite.toolbar.create_link', default: 'Create link')],
+        ['insertUnorderedList', senren_t('rich_text_editor_lite.toolbar_short.list', default: 'List'),
+         senren_t('rich_text_editor_lite.toolbar.bulleted_list', default: 'Bulleted list')],
+        ['insertOrderedList', '1.', senren_t('rich_text_editor_lite.toolbar.numbered_list', default: 'Numbered list')],
+        ['align:left', senren_t('rich_text_editor_lite.toolbar_short.left', default: 'Left'),
+         senren_t('rich_text_editor_lite.toolbar.align_left', default: 'Align left')],
+        ['align:center', senren_t('rich_text_editor_lite.toolbar_short.center', default: 'Center'),
+         senren_t('rich_text_editor_lite.toolbar.align_center', default: 'Align center')],
+        ['align:right', senren_t('rich_text_editor_lite.toolbar_short.right', default: 'Right'),
+         senren_t('rich_text_editor_lite.toolbar.align_right', default: 'Align right')],
+        ['align:justify', senren_t('rich_text_editor_lite.toolbar_short.justify', default: 'Justify'),
+         senren_t('rich_text_editor_lite.toolbar.justify', default: 'Justify')]
+      ]
+    end
+
     def initial_content
       value.presence || content.to_s.presence || "<p>#{ERB::Util.html_escape(placeholder)}</p>"
     end

data/templates/components/search_input/search_input_component.rb

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

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

@@ -7,7 +7,7 @@
       <%= trigger %>
     </span>
   <% else %>
-    <button type="button" data-action="click->senren--sheet#open" data-senren--sheet-target="trigger" class="hidden">Open</button>
+    <button type="button" data-action="click->senren--sheet#open" data-senren--sheet-target="trigger" class="hidden"><%= senren_t('shared.open', default: 'Open') %></button>
   <% end %>
 
   <div data-senren--sheet-target="overlay" hidden
@@ -38,7 +38,7 @@
         </div>
       <% end %>
     </div>
-    <button type="button" data-action="click->senren--sheet#close" aria-label="Close"
+    <button type="button" data-action="click->senren--sheet#close" aria-label="<%= senren_t('shared.close', default: 'Close') %>"
             class="absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100">
       <span aria-hidden="true">×</span>
     </button>

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

@@ -1,8 +1,8 @@
 <%= 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 %>">
-      <span class="sr-only">Toggle sidebar</span>
+    <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_label %>" aria-expanded="<%= variant != :compact %>">
+      <span class="sr-only"><%= toggle_label %></span>
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
         <path d="M3 6h18" />
         <path d="M3 12h18" />

data/templates/components/sidebar/sidebar_component.rb

@@ -8,7 +8,8 @@ module Senren
     }.freeze
     SIZES = { md: '' }.freeze
 
-    def initialize(items: [], brand: 'Senren', variant: :default, label: 'Primary', class_name: nil, **html)
+    def initialize(items: [], brand: senren_t('sidebar.brand', default: 'Senren'), variant: :default,
+                   label: senren_t('sidebar.label', default: 'Primary'), class_name: nil, **html)
       super(variant: variant, size: :md, class_name: class_name, **html)
       @items = normalize_items(items)
       @brand = brand
@@ -17,6 +18,8 @@ module Senren
 
     attr_reader :items, :brand, :label
 
+    def toggle_label = senren_t('sidebar.toggle', default: 'Toggle sidebar')
+
     private
 
     def normalize_items(items)

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

@@ -1,4 +1,4 @@
-<%= tag.div(**root_attrs("w-full overflow-hidden rounded-(--senren-radius) border border-[hsl(var(--senren-border))]")) do %>
+<%= tag.div(**root_attrs("relative 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>

data/templates/components/tabs/tabs_component.rb

@@ -8,7 +8,8 @@ module Senren
     }.freeze
     SIZES = { md: '' }.freeze
 
-    def initialize(items: [], variant: :default, active: nil, label: 'Tabs', class_name: nil, **html)
+    def initialize(items: [], variant: :default, active: nil, label: senren_t('tabs.label', default: 'Tabs'),
+                   class_name: nil, **html)
       super(variant: variant, size: :md, class_name: class_name, **html)
       @items = normalize_items(items)
       @active = active&.to_s || @items.first&.fetch(:id, nil)
@@ -26,7 +27,8 @@ module Senren
     def normalize_items(items)
       Array(items).map.with_index do |item, index|
         source = item.is_a?(Hash) ? item : { label: item.to_s }
-        label = source[:label] || source['label'] || "Tab #{index + 1}"
+        label = source[:label] || source['label'] ||
+                senren_t('tabs.tab', default: 'Tab %{number}', number: index + 1)
         id = (source[:id] || source['id'] || label.to_s.parameterize).to_s
         { id: id, label: label, content: source[:content] || source['content'] }
       end

data/templates/components/theme_toggle/theme_toggle_component.html.erb

@@ -1,4 +1,18 @@
-<button type="button" <%= tag.attributes(**root_attrs("inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-background))] px-3 text-sm font-medium text-[hsl(var(--senren-foreground))] transition-colors hover:bg-[hsl(var(--senren-accent))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))]", data: { controller: "senren--theme-toggle", action: "click->senren--theme-toggle#toggle" }, aria: { label: label, pressed: "false" })) %>>
-  <span aria-hidden="true" data-senren--theme-toggle-target="icon">O</span>
+<%# Two icons, one hidden, rather than one element whose text is rewritten. %>
+<%# The old version wrote the letters "D" and "L" into a span, which read as %>
+<%# literal capital letters next to the label -- and to a screen reader, as %>
+<%# "D Dark theme" if the aria-hidden ever came off. %>
+<%= tag.button(**root_attrs("group inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-background))] px-3 text-sm font-medium text-[hsl(var(--senren-foreground))] transition-colors hover:bg-[hsl(var(--senren-accent))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))]", type: :button, data: { controller: "senren--theme-toggle", action: "click->senren--theme-toggle#toggle", "senren--theme-toggle-light-label-value": light_label, "senren--theme-toggle-dark-label-value": dark_label }, aria: { label: label, pressed: "false" })) do %>
+  <span aria-hidden="true" data-senren--theme-toggle-target="iconLight" hidden class="inline-flex">
+    <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 transition-transform duration-200 group-hover:rotate-45">
+      <circle cx="12" cy="12" r="4"></circle>
+      <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"></path>
+    </svg>
+  </span>
+  <span aria-hidden="true" data-senren--theme-toggle-target="iconDark" class="inline-flex">
+    <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 transition-transform duration-200 group-hover:-rotate-12">
+      <path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z"></path>
+    </svg>
+  </span>
   <span data-senren--theme-toggle-target="label"><%= label %></span>
-</button>
+<% end %>

data/templates/components/theme_toggle/theme_toggle_component.rb

@@ -5,11 +5,16 @@ module Senren
     VARIANTS = { default: '' }.freeze
     SIZES = { md: '' }.freeze
 
-    def initialize(label: 'Toggle theme', class_name: nil, **html)
+    def initialize(label: senren_t('theme_toggle.label', default: 'Toggle theme'), class_name: nil, **html)
       super(variant: :default, size: :md, class_name: class_name, **html)
       @label = label
     end
 
     attr_reader :label
+
+    # What the label reads once the theme has switched. The controller swaps
+    # between the two, so both reach it as Stimulus values.
+    def light_label = senren_t('theme_toggle.light', default: 'Light theme')
+    def dark_label = senren_t('theme_toggle.dark', default: 'Dark theme')
   end
 end

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

@@ -1,7 +1,7 @@
 <%= 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 %>
+      <% if brand? %><%= brand %><% else %><%= senren_t('top_nav.brand', default: 'Senren') %><% end %>
     </div>
 
     <% if items.any? %>

data/templates/components/top_nav/top_nav_component.rb

@@ -6,12 +6,13 @@ module Senren
     renders_one :actions
 
     VARIANTS = {
-      default: 'bg-[hsl(var(--senren-background))/0.88]',
+      default: 'bg-[hsl(var(--senren-background)/0.88)]',
       solid: 'bg-[hsl(var(--senren-card))]'
     }.freeze
     SIZES = { md: '' }.freeze
 
-    def initialize(items: [], current_path: nil, label: 'Global', variant: :default, class_name: nil, **html)
+    def initialize(items: [], current_path: nil, label: senren_t('top_nav.label', default: 'Global'), variant: :default,
+                   class_name: nil, **html)
       super(variant: variant, size: :md, class_name: class_name, **html)
       @items = normalize_items(items)
       @current_path = current_path

data/templates/controllers/accordion_controller.js

@@ -6,6 +6,19 @@ export default class extends Controller {
   static targets = ["trigger", "panel"]
   static values = { multiple: Boolean }
 
+  // Every pending close timer, so disconnect() can clear them. A panel mid-close
+  // when Turbo swaps the page would otherwise leave a timer holding a reference
+  // to a detached element -- caught by bin/performance, which fails the build
+  // for a timer no disconnect() clears.
+  connect() {
+    this._timers = new Set()
+  }
+
+  disconnect() {
+    this._timers?.forEach(clearTimeout)
+    this._timers?.clear()
+  }
+
   toggle(event) {
     const trigger = event.currentTarget
     const panel = this._panelFor(trigger.dataset.panelId)
@@ -13,12 +26,64 @@ export default class extends Controller {
 
     if (!this.multipleValue) this._closeAll()
     trigger.setAttribute("aria-expanded", nextOpen ? "true" : "false")
-    if (panel) panel.hidden = !nextOpen
+    this._setOpen(panel, nextOpen)
+  }
+
+  // The panel animates from grid-template-rows 0fr to 1fr, and it also carries
+  // the `hidden` attribute so collapsed content is not focusable or read aloud.
+  // Those two want opposite things: `hidden` has to be off for the browser to
+  // animate anything, and on once the panel is closed.
+  //
+  // Opening: drop `hidden`, then flip the row on the next frame -- setting both
+  // in one go gives the browser no first value to animate from, and the panel
+  // snaps open.
+  //
+  // Closing: flip the row now, restore `hidden` when the transition ends.
+  _setOpen(panel, open) {
+    if (!panel) return
+
+    if (open) {
+      panel.hidden = false
+      requestAnimationFrame(() => {
+        panel.classList.remove("grid-rows-[0fr]")
+        panel.classList.add("grid-rows-[1fr]")
+      })
+      return
+    }
+
+    panel.classList.remove("grid-rows-[1fr]")
+    panel.classList.add("grid-rows-[0fr]")
+    this._hideAfterTransition(panel)
+  }
+
+  // `transitionend` alone is not enough: it never fires when the panel is
+  // already collapsed, when a reduced-motion setting removes the transition, or
+  // when the element is off-screen. Without the timeout those panels would stay
+  // focusable forever, so whichever arrives first wins and the other is dropped.
+  _hideAfterTransition(panel) {
+    const finish = () => {
+      clearTimeout(timer)
+      this._timers?.delete(timer)
+      panel.removeEventListener("transitionend", onEnd)
+      if (panel.classList.contains("grid-rows-[0fr]")) panel.hidden = true
+    }
+
+    const onEnd = (event) => {
+      if (event.target === panel && event.propertyName === "grid-template-rows") finish()
+    }
+
+    const timer = setTimeout(finish, 300)
+    this._timers?.add(timer)
+    panel.addEventListener("transitionend", onEnd)
   }
 
   _closeAll() {
-    this.triggerTargets.forEach((trigger) => { trigger.setAttribute("aria-expanded", "false") })
-    this.panelTargets.forEach((panel) => { panel.hidden = true })
+    this.triggerTargets.forEach((trigger) => {
+      trigger.setAttribute("aria-expanded", "false")
+    })
+    this.panelTargets.forEach((panel) => {
+      this._setOpen(panel, false)
+    })
   }
 
   _panelFor(id) {