senren-ui 0.3.0 → 0.4.0

data/lib/senren/rails/locale_installer.rb

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+require 'senren/rails/safe_write'
+
+module Senren
+  module Rails
+    # Copies the translations the gem ships into the host app's config/locales.
+    #
+    # The files are not loaded from the gem. A Rails engine auto-loads
+    # `config/locales` from its own root, which would put `:vi` into
+    # `I18n.available_locales` of every app that merely bundles senren-ui. They
+    # are source, like the components: copied once, then the host's to edit.
+    #
+    # Nothing is needed for English to work. Every component carries its English
+    # as the `default:` of the `senren_t` call, so an app with no locale file at
+    # all renders what it always did. That is also why English is not copied
+    # unless asked for: Rails loads config/locales in name order, so a copied
+    # senren.en.yml loads after the host's en.yml and overrides any senren key
+    # set there, and it pins the wording, so a default the gem later improves
+    # never reaches the app. Ask for `en` to get a copy to translate from.
+    #
+    # An existing file is never overwritten without `force:`: it is the host's
+    # translation, and a re-run of the installer must not undo it.
+    class LocaleInstaller
+      LOCALE_PATTERN = /\A[a-z]{2,3}(?:-[A-Za-z0-9]+)*\z/
+
+      attr_reader :paths, :stdout
+
+      def self.source_dir
+        File.join(Senren::Rails.templates_root, 'locales')
+      end
+
+      # The locales the gem ships a file for.
+      def self.available
+        Dir[File.join(source_dir, 'senren.*.yml')].map { |path| File.basename(path).split('.')[1] }.sort
+      end
+
+      def initialize(paths: HostPaths.new, stdout: $stdout)
+        @paths  = paths
+        @stdout = stdout
+      end
+
+      # Returns the locales actually written. Every name is checked before any
+      # file is, so a typo in the second does not leave the first half-installed.
+      def install(locales: [], force: false)
+        names = Array(locales).flatten.map(&:to_s).reject(&:empty?).uniq
+        if names.empty?
+          stdout.puts "  skip  no locale named (shipped: #{self.class.available.join(', ')}); English needs no file"
+          return []
+        end
+        names.each { |name| validate!(name) }
+
+        names.select { |name| copy_locale(name, force: force) }
+      end
+
+      private
+
+      def validate!(name)
+        unless LOCALE_PATTERN.match?(name)
+          raise ArgumentError, "#{name.inspect} is not a locale name. Expected something like en or pt-BR."
+        end
+        return if self.class.available.include?(name)
+
+        raise ArgumentError,
+              "Senren ships no #{name} translation (shipped: #{self.class.available.join(', ')}). " \
+              "To add #{name}, run bin/rails senren:locales en, copy config/locales/senren.en.yml to " \
+              "config/locales/senren.#{name}.yml, change the top-level key to #{name}:, and translate the values."
+      end
+
+      def copy_locale(name, force:)
+        source = File.join(self.class.source_dir, "senren.#{name}.yml")
+        dest = paths.locale_file(name)
+        label = "locale #{name}"
+
+        target = SafeWrite.resolve(dest, paths.root, label, io: stdout)
+        return false unless target
+
+        if File.exist?(target) && !force
+          stdout.puts "  skip  #{dest} (already exists; bin/rails senren:locales #{name} --force replaces it)"
+          return false
+        end
+
+        SafeWrite.mkdir_p!(paths.locales_dir, paths.root, label)
+        SafeWrite.copy!(source, dest, paths.root, label)
+        stdout.puts "  copy  #{dest}"
+        true
+      end
+    end
+  end
+end

data/lib/senren/rails/version.rb

@@ -2,6 +2,6 @@
 
 module Senren
   module Rails
-    VERSION = '0.3.0'
+    VERSION = '0.4.0'
   end
 end

data/lib/senren/rails.rb

@@ -14,6 +14,7 @@ module Senren
     autoload :LlmsWriter,       'senren/rails/llms_writer'
     autoload :Doctor,           'senren/rails/doctor'
     autoload :HostPaths,        'senren/rails/host_paths'
+    autoload :LocaleInstaller,  'senren/rails/locale_installer'
     autoload :MarkerBlock,      'senren/rails/marker_block'
 
     def self.gem_root

data/lib/tasks/senren.rake

@@ -18,6 +18,15 @@ namespace :senren do
     abort e.message
   end
 
+  desc 'Copy a shipped translation into config/locales. bin/rails senren:locales vi [--force]'
+  task :locales, [:names] do |_t, args|
+    options = SenrenRakeArgs.options
+
+    Senren::Rails::LocaleInstaller.new.install(locales: SenrenRakeArgs.names(args), force: options[:force])
+  rescue ArgumentError => e
+    abort e.message
+  end
+
   namespace :skill do
     desc 'Rebuild .senren/skill.md and refresh agent instruction adapters.'
     task sync: :environment do

data/templates/components/accordion/accordion_component.html.erb

@@ -3,13 +3,31 @@
     <% expanded = open_item?(item, index) %>
     <section>
       <h3>
-        <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-foreground))] transition-colors hover:bg-[hsl(var(--senren-muted)/0.5)]" aria-expanded="<%= expanded %>" aria-controls="<%= item[:id] %>-panel" data-senren--accordion-target="trigger" data-panel-id="<%= item[:id] %>" data-action="click->senren--accordion#toggle">
+        <button type="button" class="group 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-foreground))] transition-colors hover:bg-[hsl(var(--senren-muted)/0.5)]" aria-expanded="<%= expanded %>" aria-controls="<%= item[:id] %>-panel" data-senren--accordion-target="trigger" data-panel-id="<%= item[:id] %>" data-action="click->senren--accordion#toggle">
           <span><%= item[:title] %></span>
-          <span aria-hidden="true" class="text-[hsl(var(--senren-muted-foreground))]">+</span>
+          <%# Rotation is driven by aria-expanded, which the controller already %>
+          <%# maintains, so the icon cannot drift out of step with the state a %>
+          <%# screen reader is being told. A "+" was here before -- readable, but %>
+          <%# static, and it gave no hint that the panel animates. %>
+          <svg aria-hidden="true" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 shrink-0 text-[hsl(var(--senren-muted-foreground))] transition-transform duration-200 group-aria-expanded:rotate-180">
+            <path d="m5 8 5 5 5-5"></path>
+          </svg>
         </button>
       </h3>
-      <div id="<%= item[:id] %>-panel" data-senren--accordion-target="panel" data-panel-id="<%= item[:id] %>" <% unless expanded %>hidden<% end %> class="px-4 pb-4 text-sm leading-6 text-[hsl(var(--senren-muted-foreground))]">
-        <%= item[:content].presence || content %>
+      <%# The grid wrapper is what animates. A height transition needs a number %>
+      <%# to count to, and the content's height is not known until it is laid %>
+      <%# out; `grid-template-rows: 0fr -> 1fr` animates to the content's own %>
+      <%# height without measuring it in JavaScript. %>
+      <%# The `hidden` attribute stays, because content that is visually %>
+      <%# collapsed but present is still focusable and still read aloud. The %>
+      <%# controller removes it before opening and restores it after the close %>
+      <%# transition ends, so the animation never costs the semantics. %>
+      <div id="<%= item[:id] %>-panel" data-senren--accordion-target="panel" data-panel-id="<%= item[:id] %>" <% unless expanded %>hidden<% end %> class="grid transition-[grid-template-rows] duration-200 ease-out <%= expanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]' %>">
+        <div class="overflow-hidden">
+          <div class="px-4 pb-4 text-sm leading-6 text-[hsl(var(--senren-muted-foreground))]">
+            <%= item[:content].presence || content %>
+          </div>
+        </div>
       </div>
     </section>
   <% end %>

data/templates/components/accordion/accordion_component.rb

@@ -22,7 +22,8 @@ module Senren
     def normalize_items(items)
       Array(items).map.with_index do |item, index|
         source = item.is_a?(Hash) ? item : { title: item.to_s }
-        title = source[:title] || source['title'] || "Section #{index + 1}"
+        title = source[:title] || source['title'] ||
+                senren_t('accordion.section', default: 'Section %{number}', number: index + 1)
         id = (source[:id] || source['id'] || title.to_s.parameterize).to_s
         { id: id, title: title, content: source[:content] || source['content'] }
       end

data/templates/components/alert_dialog/alert_dialog_component.html.erb

@@ -9,7 +9,7 @@
   <% else %>
     <button type="button" data-action="click->senren--alert-dialog#open"
             data-senren--alert-dialog-target="trigger"
-            class="hidden">Open</button>
+            class="hidden"><%= senren_t('shared.open', default: 'Open') %></button>
   <% end %>
 
   <div data-senren--alert-dialog-target="overlay" hidden

data/templates/components/api_key_field/api_key_field_component.html.erb

@@ -1,4 +1,4 @@
-<%= tag.div(**root_attrs("space-y-2", data: { controller: "senren--api-key-field", "senren--api-key-field-reveal-label-value": reveal_label, "senren--api-key-field-hide-label-value": hide_label, "senren--api-key-field-copy-label-value": copy_label })) do %>
+<%= tag.div(**root_attrs("space-y-2", data: { controller: "senren--api-key-field", "senren--api-key-field-reveal-label-value": reveal_label, "senren--api-key-field-hide-label-value": hide_label, "senren--api-key-field-copy-label-value": copy_label, "senren--api-key-field-copied-status-value": copied_status })) do %>
   <% if content? && value.blank? %>
     <%= content %>
   <% else %>

data/templates/components/api_key_field/api_key_field_component.rb

@@ -5,7 +5,10 @@ module Senren
     VARIANTS = { default: '' }.freeze
     SIZES = { md: '' }.freeze
 
-    def initialize(value: nil, label: 'API key', reveal_label: 'Reveal', hide_label: 'Hide', copy_label: 'Copy',
+    def initialize(value: nil, label: senren_t('api_key_field.label', default: 'API key'),
+                   reveal_label: senren_t('api_key_field.reveal', default: 'Reveal'),
+                   hide_label: senren_t('api_key_field.hide', default: 'Hide'),
+                   copy_label: senren_t('api_key_field.copy', default: 'Copy'),
                    class_name: nil, **html)
       super(variant: :default, size: :md, class_name: class_name, **html)
       @value = value
@@ -16,5 +19,9 @@ module Senren
     end
 
     attr_reader :value, :label, :reveal_label, :hide_label, :copy_label
+
+    # Announced after a copy. The controller reads it from a Stimulus value, so
+    # the sentence is built here, in the host's language, not in JavaScript.
+    def copied_status = senren_t('api_key_field.copied_status', default: '%{label} complete', label: copy_label)
   end
 end

data/templates/components/app_shell/app_shell_component.rb

@@ -13,7 +13,8 @@ module Senren
     }.freeze
     SIZES = { md: '' }.freeze
 
-    def initialize(content_id: 'senren-main', skip_label: 'Skip to content', variant: :default, class_name: nil, **html)
+    def initialize(content_id: 'senren-main', skip_label: senren_t('app_shell.skip_to_content', default: 'Skip to content'),
+                   variant: :default, class_name: nil, **html)
       super(variant: variant, size: :md, class_name: class_name, **html)
       @content_id = content_id
       @skip_label = skip_label

data/templates/components/breadcrumb/breadcrumb_component.rb

@@ -5,7 +5,8 @@ module Senren
     VARIANTS = { default: '' }.freeze
     SIZES = { md: '' }.freeze
 
-    def initialize(items: [], label: 'Breadcrumb', separator: '/', class_name: nil, **html)
+    def initialize(items: [], label: senren_t('breadcrumb.label', default: 'Breadcrumb'), separator: '/',
+                   class_name: nil, **html)
       super(variant: :default, size: :md, class_name: class_name, **html)
       @items = normalize_items(items)
       @label = label

data/templates/components/bulk_action_bar/bulk_action_bar_component.html.erb

@@ -3,7 +3,7 @@
     <%= content %>
   <% else %>
     <div class="flex flex-wrap items-center justify-between gap-3">
-      <div class="text-sm font-medium"><%= selection_text || "Selection ready" %></div>
+      <div class="text-sm font-medium"><%= selection_text || senren_t('bulk_action_bar.ready', default: 'Selection ready') %></div>
       <% if actions? %>
         <div class="flex flex-wrap items-center gap-2"><%= actions %></div>
       <% end %>

data/templates/components/bulk_action_bar/bulk_action_bar_component.rb

@@ -7,7 +7,8 @@ module Senren
     VARIANTS = { default: '' }.freeze
     SIZES = { md: '' }.freeze
 
-    def initialize(selected_count: nil, item_label: 'items', class_name: nil, **html)
+    def initialize(selected_count: nil, item_label: senren_t('bulk_action_bar.items', default: 'items'),
+                   class_name: nil, **html)
       super(variant: :default, size: :md, class_name: class_name, **html)
       @selected_count = selected_count
       @item_label = item_label
@@ -18,7 +19,8 @@ module Senren
     def selection_text
       return nil if selected_count.nil?
 
-      "#{selected_count} #{item_label} selected"
+      senren_t('bulk_action_bar.selected', default: '%{count} %{item_label} selected',
+                                           count: selected_count, item_label: item_label)
     end
   end
 end

data/templates/components/calendar/calendar_component.rb

@@ -14,8 +14,43 @@ module Senren
 
     def month_start = date.beginning_of_month
     def month_end = date.end_of_month
-    def title = date.strftime('%B %Y')
-    def weekday_labels = Date::ABBR_DAYNAMES
+
+    def title
+      senren_t('calendar.title', default: '%{month} %{year}',
+                                 month: month_names.fetch(date.month - 1), year: date.strftime('%Y'))
+    end
+
+    # Spelled out call by call rather than looped over a table, so each name is
+    # a literal key that bin/i18n-sync can read and a translator can find.
+    def month_names
+      [
+        senren_t('calendar.months.january', default: 'January'),
+        senren_t('calendar.months.february', default: 'February'),
+        senren_t('calendar.months.march', default: 'March'),
+        senren_t('calendar.months.april', default: 'April'),
+        senren_t('calendar.months.may', default: 'May'),
+        senren_t('calendar.months.june', default: 'June'),
+        senren_t('calendar.months.july', default: 'July'),
+        senren_t('calendar.months.august', default: 'August'),
+        senren_t('calendar.months.september', default: 'September'),
+        senren_t('calendar.months.october', default: 'October'),
+        senren_t('calendar.months.november', default: 'November'),
+        senren_t('calendar.months.december', default: 'December')
+      ]
+    end
+
+    # Sunday first, matching calendar_days.
+    def weekday_labels
+      [
+        senren_t('calendar.weekdays.sun', default: 'Sun'),
+        senren_t('calendar.weekdays.mon', default: 'Mon'),
+        senren_t('calendar.weekdays.tue', default: 'Tue'),
+        senren_t('calendar.weekdays.wed', default: 'Wed'),
+        senren_t('calendar.weekdays.thu', default: 'Thu'),
+        senren_t('calendar.weekdays.fri', default: 'Fri'),
+        senren_t('calendar.weekdays.sat', default: 'Sat')
+      ]
+    end
 
     def calendar_days
       start_day = month_start.beginning_of_week(:sunday)

data/templates/components/carousel/carousel_component.html.erb

@@ -1,4 +1,4 @@
-<%= tag.section(**root_attrs("relative overflow-hidden rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] text-[hsl(var(--senren-card-foreground))] shadow-sm", data: { controller: "senren--carousel" }, role: "region", "aria-roledescription": "carousel", "aria-label": label)) do %>
+<%= tag.section(**root_attrs("relative overflow-hidden rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] text-[hsl(var(--senren-card-foreground))] shadow-sm", data: { controller: "senren--carousel", "senren--carousel-status-template-value": status_template }, role: "region", "aria-roledescription": "carousel", "aria-label": label)) do %>
   <% if content? && slides.empty? %>
     <%= content %>
   <% else %>
@@ -45,12 +45,12 @@
 
     <% if slides.size > 1 %>
       <div class="pointer-events-none absolute inset-x-0 top-1/2 z-10 flex -translate-y-1/2 justify-between px-3">
-        <button type="button" class="pointer-events-auto inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-full border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-background)/0.88)] text-[hsl(var(--senren-foreground))] shadow-sm transition hover:-translate-y-0.5 hover:bg-[hsl(var(--senren-accent))] hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))]" data-action="click->senren--carousel#previous" aria-label="Previous slide">
+        <button type="button" class="pointer-events-auto inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-full border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-background)/0.88)] text-[hsl(var(--senren-foreground))] shadow-sm transition hover:-translate-y-0.5 hover:bg-[hsl(var(--senren-accent))] hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))]" data-action="click->senren--carousel#previous" aria-label="<%= previous_label %>">
           <svg aria-hidden="true" viewBox="0 0 20 20" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <path d="M12.5 4.5 7 10l5.5 5.5" />
           </svg>
         </button>
-        <button type="button" class="pointer-events-auto inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-full border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-background)/0.88)] text-[hsl(var(--senren-foreground))] shadow-sm transition hover:-translate-y-0.5 hover:bg-[hsl(var(--senren-accent))] hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))]" data-action="click->senren--carousel#next" aria-label="Next slide">
+        <button type="button" class="pointer-events-auto inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-full border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-background)/0.88)] text-[hsl(var(--senren-foreground))] shadow-sm transition hover:-translate-y-0.5 hover:bg-[hsl(var(--senren-accent))] hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))]" data-action="click->senren--carousel#next" aria-label="<%= next_label %>">
           <svg aria-hidden="true" viewBox="0 0 20 20" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <path d="M7.5 4.5 13 10l-5.5 5.5" />
           </svg>
@@ -59,10 +59,10 @@
 
       <div class="absolute bottom-3 left-0 right-0 z-10 flex justify-center gap-1.5">
         <% slides.each_with_index do |_slide, index| %>
-          <button type="button" class="h-2.5 w-2.5 cursor-pointer rounded-full bg-[hsl(var(--senren-background)/0.72)] ring-1 ring-[hsl(var(--senren-border))] transition-all aria-current:w-6 aria-current:bg-[hsl(var(--senren-primary))]" data-senren--carousel-target="dot" data-index="<%= index %>" data-action="click->senren--carousel#goTo" aria-label="Go to slide <%= index + 1 %>" aria-current="<%= index.zero? ? 'true' : 'false' %>"></button>
+          <button type="button" class="h-2.5 w-2.5 cursor-pointer rounded-full bg-[hsl(var(--senren-background)/0.72)] ring-1 ring-[hsl(var(--senren-border))] transition-all aria-current:w-6 aria-current:bg-[hsl(var(--senren-primary))]" data-senren--carousel-target="dot" data-index="<%= index %>" data-action="click->senren--carousel#goTo" aria-label="<%= go_to_label(index + 1) %>" aria-current="<%= index.zero? ? 'true' : 'false' %>"></button>
         <% end %>
       </div>
     <% end %>
-    <p class="sr-only" aria-live="polite" data-senren--carousel-target="status">Slide 1 of <%= slides.size %></p>
+    <p class="sr-only" aria-live="polite" data-senren--carousel-target="status"><%= status_text %></p>
   <% end %>
 <% end %>

data/templates/components/carousel/carousel_component.rb

@@ -5,7 +5,7 @@ module Senren
     VARIANTS = { default: '' }.freeze
     SIZES = { md: '' }.freeze
 
-    def initialize(slides: [], label: 'Carousel', class_name: nil, **html)
+    def initialize(slides: [], label: senren_t('carousel.label', default: 'Carousel'), class_name: nil, **html)
       super(variant: :default, size: :md, class_name: class_name, **html)
       @slides = normalize_slides(slides)
       @label = label
@@ -13,6 +13,17 @@ module Senren
 
     attr_reader :slides, :label
 
+    def previous_label = senren_t('carousel.previous', default: 'Previous slide')
+    def next_label = senren_t('carousel.next', default: 'Next slide')
+    def go_to_label(number) = senren_t('carousel.go_to', default: 'Go to slide %{number}', number: number)
+
+    # The announcement as the server first renders it, and the same sentence as a
+    # template for the controller, which has to say it again on every slide
+    # change. No values are passed for the template, so I18n hands back the
+    # `%{current}` and `%{total}` placeholders untouched.
+    def status_text = senren_t('carousel.status', default: 'Slide %{current} of %{total}', current: 1, total: slides.size)
+    def status_template = senren_t('carousel.status', default: 'Slide %{current} of %{total}')
+
     private
 
     def normalize_slides(slides)

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

@@ -30,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))]"
@@ -41,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,4 +1,4 @@
-<%= tag.div(**root_attrs("inline-flex items-center gap-2", data: { controller: "senren--clipboard", "senren--clipboard-copied-label-value": copied_label })) do %>
+<%= 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 %>

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.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.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.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/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