senren-ui 0.2.0 → 0.4.0

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/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 @@
-<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 } %>
+  <%= 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 } %>
-</nav>
+  <%= 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/popover/popover_component.html.erb

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

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

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

data/templates/components/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/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

@@ -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.html.erb

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

data/templates/components/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

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

data/templates/components/sheet/sheet_component.rb

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

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

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

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

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

data/templates/components/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/switch/switch_component.html.erb

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

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

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

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

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

data/templates/components/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/tooltip/tooltip_component.html.erb

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

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

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

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