senren-ui 0.3.0 → 0.4.1

data/lib/senren/rails/base_component_patch.rb

@@ -59,6 +59,30 @@ module Senren
           end
         end
       RUBY
+
+      # Ruby appended to a host app's existing BaseComponent when it predates
+      # senren_t. A component copied by `senren:add` calls it, so without this a
+      # host that upgraded the gem and added one component would get a
+      # NoMethodError the first time that component rendered.
+      #
+      # Same arrangement as URL_HELPERS: apps installed earlier never receive the
+      # template again, so the helper is duplicated here, and
+      # test/i18n_catalog_test.rb pins the two bodies together.
+      TRANSLATION_HELPER = <<~'RUBY'
+
+        # Added by senren:add so components that translate their text can render.
+        require 'active_support/i18n'
+
+        module Senren
+          class BaseComponent
+            def senren_t(key, default:, **options)
+              I18n.t("senren.#{key}", default: default, **options)
+            rescue I18n::MissingInterpolationArgument
+              I18n.interpolate(default, options)
+            end
+          end
+        end
+      RUBY
     end
   end
 end

data/lib/senren/rails/component_copier.rb

@@ -19,6 +19,7 @@ module Senren
       ).freeze
       BASE_COMPONENT_TEMPLATE = File.join(INSTALL_GENERATOR_TEMPLATES, 'base_component.rb.tt').freeze
       BASE_URL_HELPER_PATCH = BaseComponentPatch::URL_HELPERS
+      BASE_TRANSLATION_HELPER_PATCH = BaseComponentPatch::TRANSLATION_HELPER
 
       attr_reader :registry, :paths, :stdout
 
@@ -35,6 +36,7 @@ module Senren
         validate_client_override!(component_names, client_override)
         paths.ensure_dirs!
         ensure_base_component_url_helpers!
+        ensure_base_component_translation_helper!
 
         requested = Array(component_names).map(&:to_s)
         wanted.each do |name|
@@ -85,6 +87,25 @@ module Senren
         copy_file(BASE_COMPONENT_TEMPLATE, dest, force: false, label: 'base_component.rb')
       end
 
+      # A component that translates its text calls senren_t, so a host whose
+      # BaseComponent predates it needs the helper before the component renders.
+      # Runs after the URL helper step, which copies the whole current template
+      # (helper included) when there is no base component at all, so in that
+      # case there is nothing left to add.
+      #
+      # A destination that escapes the app root was already reported by the URL
+      # step, so this one declines without saying it a second time.
+      def ensure_base_component_translation_helper!
+        dest = paths.base_component_path
+
+        return unless SafeWrite.inside?(dest, paths.root)
+        return unless dest.exist?
+        return if dest.read.include?('def senren_t')
+
+        SafeWrite.write!(dest, dest.read + BASE_TRANSLATION_HELPER_PATCH, paths.root, 'base_component.rb')
+        stdout.puts "  update #{dest} (senren_t)"
+      end
+
       # Delegates to SafeWrite so an intermediate symlinked directory is caught,
       # not just a symlinked leaf. `app/components/senren -> /elsewhere` used to
       # pass every check here.

data/lib/senren/rails/doctor.rb

@@ -50,7 +50,11 @@ module Senren
 
       def runtime_checks
         [
-          check('ViewComponent gem available')    { defined?(::ViewComponent) },
+          # Not just defined?(::ViewComponent): a host's Gemfile lists senren-ui,
+          # not view_component, so Bundler.require never loads it, and nothing
+          # does until BaseComponent is autoloaded on the first render. A healthy
+          # app booted for this task failed the check.
+          check('ViewComponent gem available')    { defined?(::ViewComponent) || gem_loadable?('view_component') },
           check('TailwindCSS stylesheet present') { paths.stylesheet_path.exist? },
           check('Stimulus directory present')     { paths.stimulus_dir.directory? },
           check('Turbo gem available')            { defined?(::Turbo) || gem_loadable?('turbo-rails') }

data/lib/senren/rails/host_paths.rb

@@ -24,6 +24,11 @@ module Senren
 
       def stylesheet_path       = root.join('app', 'assets', 'stylesheets', 'senren.css')
 
+      # Where the host's translations of component text live. One file per
+      # locale, so a team adds a language by adding a file.
+      def locales_dir           = root.join('config', 'locales')
+      def locale_file(locale)   = locales_dir.join("senren.#{locale}.yml")
+
       def stimulus_dir          = root.join('app', 'javascript', 'controllers', 'senren')
 
       def github_dir            = root.join('.github')

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.1'
   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