kiso 0.3.0.pre → 0.4.0.pre

data/app/helpers/kiso/ui_context_helper.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Kiso
+  # Manages a request-scoped context stack for per-slot +ui:+ overrides.
+  #
+  # This is ERB's equivalent of Vue's provide/inject pattern. When a parent
+  # component is rendered with +ui:+, the hash is pushed onto a stack.
+  # Sub-parts rendered inside the parent's block read their slot override
+  # from the stack automatically.
+  #
+  # Thread-safe because Rails creates a fresh view context (and therefore
+  # fresh instance variables) per request.
+  #
+  # @example How the stack flows
+  #   # Parent pushes:
+  #   kiso_push_ui_context(:card, { header: "p-8", title: "text-xl" })
+  #
+  #   # Sub-part reads:
+  #   kiso_current_ui(:card)  #=> { header: "p-8", title: "text-xl" }
+  #
+  #   # After parent renders:
+  #   kiso_pop_ui_context(:card)
+  #
+  # @see ComponentHelper#kui
+  module UiContextHelper
+    # Push a ui hash onto the context stack for a component.
+    #
+    # @param component [Symbol] the component name (e.g. +:card+)
+    # @param ui [Hash{Symbol => String}] slot-name to class-string mapping
+    # @return [void]
+    def kiso_push_ui_context(component, ui)
+      kiso_ui_stack[component] ||= []
+      kiso_ui_stack[component].push(ui || {})
+    end
+
+    # Pop the most recent ui hash for a component.
+    #
+    # @param component [Symbol] the component name
+    # @return [Hash, nil] the popped ui hash
+    def kiso_pop_ui_context(component)
+      kiso_ui_stack[component]&.pop
+    end
+
+    # Read the current ui hash for a component (top of stack).
+    #
+    # @param component [Symbol] the component name
+    # @return [Hash{Symbol => String}] the current ui overrides, or empty hash
+    def kiso_current_ui(component)
+      kiso_ui_stack.dig(component, -1) || {}
+    end
+
+    private
+
+    # @return [Hash{Symbol => Array<Hash>}] per-component stacks
+    def kiso_ui_stack
+      @kiso_ui_stack ||= {}
+    end
+  end
+end

data/app/javascript/controllers/kiso/alert_controller.js

@@ -0,0 +1,33 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Alert controller. Handles dismissing an alert by removing it from the DOM.
+ *
+ * Attach to the alert root element with `data-controller="kiso--alert"`.
+ * The close button dispatches the `close` action on click.
+ *
+ * @example
+ *   <div data-controller="kiso--alert" data-slot="alert" role="alert">
+ *     <div data-slot="alert-wrapper">
+ *       <div data-slot="alert-title">Heads up!</div>
+ *       <div data-slot="alert-description">You can dismiss this alert.</div>
+ *     </div>
+ *     <button data-action="click->kiso--alert#close" data-slot="alert-close">
+ *       <svg>...</svg>
+ *     </button>
+ *   </div>
+ *
+ * @fires kiso--alert:close - Dispatched before the alert is removed from the DOM
+ */
+export default class extends Controller {
+  /**
+   * Dismisses the alert. Dispatches a `close` event and removes the element.
+   * The event can be cancelled with `event.preventDefault()` to prevent removal.
+   */
+  close() {
+    const event = this.dispatch("close", { cancelable: true })
+    if (!event.defaultPrevented) {
+      this.element.remove()
+    }
+  }
+}

data/app/javascript/controllers/kiso/index.js

@@ -1,3 +1,4 @@
+import KisoAlertController from "./alert_controller.js"
 import KisoComboboxController from "./combobox_controller.js"
 import KisoCommandController from "./command_controller.js"
 import KisoCommandDialogController from "./command_dialog_controller.js"
@@ -13,6 +14,7 @@ import KisoToggleGroupController from "./toggle_group_controller.js"
 
 const KisoUi = {
   start(application) {
+    application.register("kiso--alert", KisoAlertController)
     application.register("kiso--combobox", KisoComboboxController)
     application.register("kiso--command", KisoCommandController)
     application.register("kiso--command-dialog", KisoCommandDialogController)
@@ -30,6 +32,7 @@ const KisoUi = {
 
 export default KisoUi
 export {
+  KisoAlertController,
   KisoComboboxController,
   KisoCommandController,
   KisoCommandDialogController,

data/app/views/kiso/components/_alert.html.erb

@@ -1,8 +1,24 @@
-<%# locals: (color: :primary, variant: :soft, css_classes: "", **component_options) %>
+<%# locals: (icon: nil, color: :primary, variant: :soft, close: false, ui: {}, css_classes: "", **component_options) %>
 <%= content_tag :div,
     role: :alert,
     class: Kiso::Themes::Alert.render(color: color, variant: variant, class: css_classes),
-    data: kiso_prepare_options(component_options, slot: "alert"),
+    data: kiso_prepare_options(component_options, slot: "alert",
+      **({ controller: "kiso--alert" } if close)),
     **component_options do %>
-  <%= yield %>
+  <% if icon %>
+    <%= kiso_icon(icon, class: "size-4 translate-y-0.5 text-current #{ui[:icon]}") %>
+  <% end %>
+  <%= content_tag :div,
+      class: Kiso::Themes::AlertWrapper.render(class: ui[:wrapper]),
+      data: { slot: "alert-wrapper" } do %>
+    <%= yield %>
+  <% end %>
+  <% if close %>
+    <%= tag.button type: "button",
+        class: Kiso::Themes::AlertClose.render(class: ui[:close]),
+        data: { slot: "alert-close", action: "click->kiso--alert#close" },
+        aria: { label: t("kiso.alert.dismiss") } do %>
+      <%= kiso_component_icon(:x, class: "size-4") %>
+    <% end %>
+  <% end %>
 <% end %>

data/app/views/kiso/components/_alert_dialog.html.erb

@@ -1,4 +1,4 @@
-<%# locals: (open: false, size: :default, css_classes: "", **component_options) %>
+<%# locals: (open: false, size: :default, ui: {}, css_classes: "", **component_options) %>
 <%
   # Store the dialog id on the view context so child sub-part partials
   # (_title, _description) can auto-generate matching aria-labelledby /
@@ -20,7 +20,7 @@
       kiso__dialog_open_value: (open ? true : nil),
       kiso__dialog_dismissable_value: false),
     **component_options do %>
-  <div class="<%= Kiso::Themes::AlertDialogContent.render(size: size) %>"
+  <div class="<%= Kiso::Themes::AlertDialogContent.render(size: size, class: ui[:content]) %>"
        data-slot="alert-dialog-content"
        data-size="<%= size %>">
     <%= yield %>

data/app/views/kiso/components/_app.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::App.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "app"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/_avatar.html.erb

@@ -1,4 +1,4 @@
-<%# locals: (src: nil, alt: "", text: nil, size: :md, css_classes: "", **component_options) %>
+<%# locals: (src: nil, alt: "", text: nil, size: :md, ui: {}, css_classes: "", **component_options) %>
 <%= content_tag :span,
     class: Kiso::Themes::Avatar.render(size: size, class: css_classes),
     data: kiso_prepare_options(component_options, slot: "avatar", size: size),
@@ -8,14 +8,14 @@
     <%= content %>
   <% else %>
     <% if text.present? %>
-      <%= tag.span class: Kiso::Themes::AvatarFallback.render(size: size),
+      <%= tag.span class: Kiso::Themes::AvatarFallback.render(size: size, class: ui[:fallback]),
           data: { slot: "avatar-fallback" } do %>
         <%= text %>
       <% end %>
     <% end %>
     <% if src.present? %>
       <%= tag.img src: src, alt: alt,
-          class: Kiso::Themes::AvatarImage.render,
+          class: Kiso::Themes::AvatarImage.render(class: ui[:image]),
           data: { slot: "avatar-image" },
           onerror: "this.style.display='none'" %>
     <% end %>

data/app/views/kiso/components/_breadcrumb.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (css_classes: "", **component_options) %>
 <%= content_tag :nav,
     class: Kiso::Themes::Breadcrumb.render(class: css_classes),
-    aria: { label: "breadcrumb" },
+    aria: { label: t("kiso.breadcrumb.label") },
     data: kiso_prepare_options(component_options, slot: "breadcrumb"),
     **component_options do %>
   <%= yield %>

data/app/views/kiso/components/_color_mode_button.html.erb

@@ -4,7 +4,7 @@
     data: kiso_prepare_options(component_options, slot: "color-mode-button",
                                controller: "kiso--theme",
                                action: "click->kiso--theme#toggle"),
-    aria: { label: "Toggle color mode" },
+    aria: { label: t("kiso.color_mode_button.toggle") },
     type: "button",
     **component_options do %>
   <%# Light icon — visible in light mode, hidden in dark %>

data/app/views/kiso/components/_color_mode_select.html.erb

@@ -7,17 +7,17 @@
     **component_options do %>
   <%= kui(:select) do %>
     <%= kui(:select, :trigger, size: size) do %>
-      <%= kui(:select, :value, placeholder: "Theme") %>
+      <%= kui(:select, :value, placeholder: t("kiso.color_mode_select.theme")) %>
     <% end %>
     <%= kui(:select, :content) do %>
       <%= kui(:select, :item, value: "system") do %>
-        <span class="inline-flex items-center gap-2"><%= kiso_component_icon(:monitor, class: "size-4 opacity-60") %> System</span>
+        <span class="inline-flex items-center gap-2"><%= kiso_component_icon(:monitor, class: "size-4 opacity-60") %> <%= t("kiso.color_mode_select.system") %></span>
       <% end %>
       <%= kui(:select, :item, value: "light") do %>
-        <span class="inline-flex items-center gap-2"><%= kiso_component_icon(:sun, class: "size-4 opacity-60") %> Light</span>
+        <span class="inline-flex items-center gap-2"><%= kiso_component_icon(:sun, class: "size-4 opacity-60") %> <%= t("kiso.color_mode_select.light") %></span>
       <% end %>
       <%= kui(:select, :item, value: "dark") do %>
-        <span class="inline-flex items-center gap-2"><%= kiso_component_icon(:moon, class: "size-4 opacity-60") %> Dark</span>
+        <span class="inline-flex items-center gap-2"><%= kiso_component_icon(:moon, class: "size-4 opacity-60") %> <%= t("kiso.color_mode_select.dark") %></span>
       <% end %>
     <% end %>
   <% end %>

data/app/views/kiso/components/_container.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (size: :default, css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::Container.render(size: size, class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "container"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/_dashboard_sidebar.html.erb

@@ -3,7 +3,7 @@
     id: "dashboard-sidebar",
     class: Kiso::Themes::DashboardSidebar.render(class: css_classes),
     data: kiso_prepare_options(component_options, slot: "dashboard-sidebar"),
-    aria: { label: "Sidebar navigation" },
+    aria: { label: t("kiso.dashboard_sidebar.label") },
     **component_options do %>
   <div data-slot="dashboard-sidebar-inner">
     <%= yield %>

data/app/views/kiso/components/_dialog.html.erb

@@ -1,11 +1,11 @@
-<%# locals: (open: false, css_classes: "", **component_options) %>
+<%# locals: (open: false, ui: {}, css_classes: "", **component_options) %>
 <%= content_tag :dialog,
     class: Kiso::Themes::Dialog.render(class: css_classes),
     data: kiso_prepare_options(component_options, slot: "dialog",
       controller: "kiso--dialog",
       kiso__dialog_open_value: (open ? true : nil)),
     **component_options do %>
-  <div class="<%= Kiso::Themes::DialogContent.render %>" data-slot="dialog-content">
+  <div class="<%= Kiso::Themes::DialogContent.render(class: ui[:content]) %>" data-slot="dialog-content">
     <%= yield %>
   </div>
 <% end %>

data/app/views/kiso/components/_footer.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :footer,
+    class: Kiso::Themes::Footer.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "footer"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/_header.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :header,
+    class: Kiso::Themes::Header.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "header"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/_main.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :main,
+    class: Kiso::Themes::Main.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "main"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/_page.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::Page.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "page"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/_page_body.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::PageBody.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "page-body"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/_page_card.html.erb

@@ -0,0 +1,40 @@
+<%# locals: (variant: :outline, icon: nil, title: nil, description: nil, ui: {}, css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::PageCard.render(variant: variant, class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "page-card"),
+    **component_options do %>
+  <%= content_tag :div,
+      class: Kiso::Themes::PageCardContainer.render(class: ui[:container]),
+      data: { slot: "page-card-container" } do %>
+    <%= content_tag :div,
+        class: Kiso::Themes::PageCardWrapper.render(class: ui[:wrapper]),
+        data: { slot: "page-card-wrapper" } do %>
+      <% content = capture { yield }.presence %>
+      <% if content %>
+        <%= content %>
+      <% else %>
+        <% if icon %>
+          <%= content_tag :div,
+              class: Kiso::Themes::PageCardIcon.render(class: ui[:icon]),
+              data: { slot: "page-card-icon" } do %>
+            <%= kiso_icon(icon) %>
+          <% end %>
+        <% end %>
+        <% if title %>
+          <%= content_tag :p,
+              class: Kiso::Themes::PageCardTitle.render(class: ui[:title]),
+              data: { slot: "page-card-title" } do %>
+            <%= title %>
+          <% end %>
+        <% end %>
+        <% if description %>
+          <%= content_tag :p,
+              class: Kiso::Themes::PageCardDescription.render(class: ui[:description]),
+              data: { slot: "page-card-description" } do %>
+            <%= description %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/kiso/components/_page_grid.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::PageGrid.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "page-grid"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/_page_header.html.erb

@@ -0,0 +1,38 @@
+<%# locals: (headline: nil, title: nil, description: nil, ui: {}, css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::PageHeader.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "page-header"),
+    **component_options do %>
+  <%= content_tag :div,
+      class: Kiso::Themes::PageHeaderWrapper.render(class: ui[:wrapper]),
+      data: { slot: "page-header-wrapper" } do %>
+    <% content = capture { yield }.presence %>
+    <% if content %>
+      <%= content %>
+    <% else %>
+      <div>
+        <% if headline %>
+          <%= content_tag :div,
+              class: Kiso::Themes::PageHeaderHeadline.render(class: ui[:headline]),
+              data: { slot: "page-header-headline" } do %>
+            <%= headline %>
+          <% end %>
+        <% end %>
+        <% if title %>
+          <%= content_tag :h1,
+              class: Kiso::Themes::PageHeaderTitle.render(class: ui[:title]),
+              data: { slot: "page-header-title" } do %>
+            <%= title %>
+          <% end %>
+        <% end %>
+        <% if description %>
+          <%= content_tag :p,
+              class: Kiso::Themes::PageHeaderDescription.render(class: ui[:description]),
+              data: { slot: "page-header-description" } do %>
+            <%= description %>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/kiso/components/_page_section.html.erb

@@ -0,0 +1,11 @@
+<%# locals: (orientation: :horizontal, ui: {}, css_classes: "", **component_options) %>
+<%= content_tag :section,
+    class: Kiso::Themes::PageSection.render(orientation: orientation, class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "page-section"),
+    **component_options do %>
+  <%= content_tag :div,
+      class: Kiso::Themes::PageSectionContainer.render(orientation: orientation, class: ui[:container]),
+      data: { slot: "page-section-container" } do %>
+    <%= yield %>
+  <% end %>
+<% end %>

data/app/views/kiso/components/_pagination.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (css_classes: "", **component_options) %>
 <%= content_tag :nav,
     role: "navigation",
-    aria: {label: "pagination"},
+    aria: {label: t("kiso.pagination.label")},
     class: Kiso::Themes::Pagination.render(class: css_classes),
     data: kiso_prepare_options(component_options, slot: "pagination"),
     **component_options do %>

data/app/views/kiso/components/_select_native.html.erb

@@ -1,6 +1,6 @@
-<%# locals: (variant: :outline, size: :md, disabled: false, css_classes: "", **component_options) %>
+<%# locals: (variant: :outline, size: :md, disabled: false, ui: {}, css_classes: "", **component_options) %>
 <%= content_tag :div,
-    class: Kiso::Themes::SelectNativeWrapper.render,
+    class: Kiso::Themes::SelectNativeWrapper.render(class: ui[:wrapper]),
     data: {slot: "select-native-wrapper"} do %>
   <% component_options[:disabled] = true if disabled %>
   <%= tag.select(
@@ -8,7 +8,7 @@
       data: kiso_prepare_options(component_options, slot: "select-native"),
       **component_options) { yield } %>
   <%= content_tag :span,
-      class: Kiso::Themes::SelectNativeIcon.render,
+      class: Kiso::Themes::SelectNativeIcon.render(class: ui[:icon]),
       aria: {hidden: true},
       data: {slot: "select-native-icon"} do %>
     <%= kiso_component_icon(:chevron_down) %>

data/app/views/kiso/components/_skeleton.html.erb

@@ -0,0 +1,5 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= tag.div(
+    class: Kiso::Themes::Skeleton.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "skeleton"),
+    **component_options) %>

data/app/views/kiso/components/_slider.html.erb

@@ -1,4 +1,4 @@
-<%# locals: (min: 0, max: 100, step: 1, value: nil, name: nil, id: nil, disabled: false, size: :md, aria_label: nil, css_classes: "", **component_options) %>
+<%# locals: (min: 0, max: 100, step: 1, value: nil, name: nil, id: nil, disabled: false, size: :md, aria_label: nil, ui: {}, css_classes: "", **component_options) %>
 <% slider_value = value || min %>
 <% percent = ((slider_value.to_f - min) / (max - min) * 100).clamp(0, 100) %>
 <%= content_tag :div,
@@ -22,15 +22,15 @@
       class: "sr-only",
       data: { kiso__slider_target: "input" }) %>
   <%= tag.div(
-      class: Kiso::Themes::SliderTrack.render(size: size),
+      class: Kiso::Themes::SliderTrack.render(size: size, class: ui[:track]),
       data: { slot: "slider-track", kiso__slider_target: "track" }) do %>
     <%= tag.div(
-        class: Kiso::Themes::SliderRange.render,
+        class: Kiso::Themes::SliderRange.render(class: ui[:range]),
         style: "width: #{percent}%",
         data: { slot: "slider-range", kiso__slider_target: "range" }) %>
   <% end %>
   <%= tag.div(
-      class: Kiso::Themes::SliderThumb.render(size: size),
+      class: Kiso::Themes::SliderThumb.render(size: size, class: ui[:thumb]),
       role: :slider,
       tabindex: (disabled ? "-1" : "0"),
       aria: { valuemin: min, valuemax: max, valuenow: slider_value,

data/app/views/kiso/components/_switch.html.erb

@@ -1,4 +1,4 @@
-<%# locals: (color: :primary, size: :md, checked: false, css_classes: "", **component_options) %>
+<%# locals: (color: :primary, size: :md, checked: false, ui: {}, css_classes: "", **component_options) %>
 <% component_options[:type] = :checkbox
    component_options[:role] = :switch
    component_options[:checked] = true if checked %>
@@ -6,5 +6,5 @@
     class: Kiso::Themes::SwitchTrack.render(color: color, size: size, class: css_classes),
     data: kiso_prepare_options(component_options, slot: "switch")) do %>
   <%= tag.input(class: "peer sr-only", **component_options) %>
-  <%= tag.span(class: Kiso::Themes::SwitchThumb.render(size: size)) %>
+  <%= tag.span(class: Kiso::Themes::SwitchThumb.render(size: size, class: ui[:thumb])) %>
 <% end %>

data/app/views/kiso/components/alert/_actions.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::AlertActions.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "alert-actions"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/breadcrumb/_ellipsis.html.erb

@@ -6,5 +6,5 @@
     data: kiso_prepare_options(component_options, slot: "breadcrumb-ellipsis"),
     **component_options do %>
   <%= kiso_component_icon(:ellipsis, class: "size-4") %>
-  <span class="sr-only">More</span>
+  <span class="sr-only"><%= t("kiso.breadcrumb.more") %></span>
 <% end %>

data/app/views/kiso/components/combobox/_input.html.erb

@@ -14,7 +14,7 @@
                    class: "flex size-6 items-center justify-center rounded-sm text-muted-foreground hover:text-foreground",
                    disabled: (disabled || nil),
                    tabindex: "-1",
-                   aria: { label: "Toggle" },
+                   aria: { label: t("kiso.combobox.toggle") },
                    data: { slot: "combobox-trigger", kiso__combobox_target: "trigger",
                            action: "click->kiso--combobox#toggle" } do %>
       <%= kiso_component_icon(:chevron_down, class: "size-4 pointer-events-none") %>

data/app/views/kiso/components/combobox/_item.html.erb

@@ -1,4 +1,4 @@
-<%# locals: (value:, disabled: false, css_classes: "", **component_options) %>
+<%# locals: (value:, disabled: false, ui: {}, css_classes: "", **component_options) %>
 <%= content_tag :div,
     class: Kiso::Themes::ComboboxItem.render(class: css_classes),
     role: "option",
@@ -11,7 +11,7 @@
     aria: {selected: false, disabled: (disabled || nil)},
     **component_options do %>
   <%= tag.span yield, data: { slot: "combobox-item-text" } %>
-  <%= tag.span class: Kiso::Themes::ComboboxItemIndicator.render,
+  <%= tag.span class: Kiso::Themes::ComboboxItemIndicator.render(class: ui[:indicator]),
               data: { slot: "combobox-item-indicator", kiso__combobox_target: "indicator" },
               hidden: true do %>
     <%= kiso_component_icon(:check, class: "size-4") %>

data/app/views/kiso/components/combobox/_list.html.erb

@@ -1,4 +1,5 @@
-<%# locals: (label: "Options", css_classes: "", **component_options) %>
+<%# locals: (label: nil, css_classes: "", **component_options) %>
+<% label ||= t("kiso.combobox.options") %>
 <%= content_tag :div,
     class: Kiso::Themes::ComboboxList.render(class: css_classes),
     role: "listbox",

data/app/views/kiso/components/command/_group.html.erb

@@ -1,4 +1,4 @@
-<%# locals: (heading: nil, css_classes: "", **component_options) %>
+<%# locals: (heading: nil, ui: {}, css_classes: "", **component_options) %>
 <%= content_tag :div,
     class: Kiso::Themes::CommandGroup.render(class: css_classes),
     role: "group",
@@ -6,7 +6,7 @@
       kiso__command_target: "group"),
     **component_options do %>
   <% if heading.present? %>
-    <div class="<%= Kiso::Themes::CommandGroupHeading.render %>"
+    <div class="<%= Kiso::Themes::CommandGroupHeading.render(class: ui[:heading]) %>"
          data-slot="command-group-heading"
          role="presentation"><%= heading %></div>
   <% end %>

data/app/views/kiso/components/command/_input.html.erb

@@ -1,5 +1,6 @@
-<%# locals: (placeholder: nil, label: "Search", css_classes: "", **component_options) %>
-<div class="<%= Kiso::Themes::CommandInputWrapper.render %>"
+<%# locals: (placeholder: nil, label: nil, ui: {}, css_classes: "", **component_options) %>
+<% label ||= t("kiso.command.search") %>
+<div class="<%= Kiso::Themes::CommandInputWrapper.render(class: ui[:wrapper]) %>"
      data-slot="command-input-wrapper">
   <%= kiso_component_icon(:search, class: "size-4 shrink-0 opacity-50") %>
   <%= tag.input(

data/app/views/kiso/components/command/_list.html.erb

@@ -1,4 +1,5 @@
-<%# locals: (label: "Suggestions", css_classes: "", **component_options) %>
+<%# locals: (label: nil, css_classes: "", **component_options) %>
+<% label ||= t("kiso.command.suggestions") %>
 <%= content_tag :div,
     class: Kiso::Themes::CommandList.render(class: css_classes),
     role: "listbox",

data/app/views/kiso/components/dashboard_navbar/_toggle.html.erb

@@ -4,7 +4,7 @@
     data: kiso_prepare_options(component_options, slot: "dashboard-navbar-toggle",
                                kiso__sidebar_target: "trigger",
                                action: "click->kiso--sidebar#toggle"),
-    aria: { label: "Toggle sidebar", expanded: "false", controls: "dashboard-sidebar" },
+    aria: { label: t("kiso.dashboard_sidebar.toggle"), expanded: "false", controls: "dashboard-sidebar" },
     type: "button",
     **component_options do %>
   <%= capture { yield }.presence || kiso_component_icon(:menu) %>

data/app/views/kiso/components/dashboard_sidebar/_collapse.html.erb

@@ -4,7 +4,7 @@
     data: kiso_prepare_options(component_options, slot: "dashboard-sidebar-collapse",
                                kiso__sidebar_target: "trigger",
                                action: "click->kiso--sidebar#toggle"),
-    aria: { label: "Collapse sidebar", expanded: "false", controls: "dashboard-sidebar" },
+    aria: { label: t("kiso.dashboard_sidebar.collapse"), expanded: "false", controls: "dashboard-sidebar" },
     type: "button",
     **component_options do %>
   <span data-slot="collapse-icon-open"><%= kiso_component_icon(:panel_left_close) %></span>

data/app/views/kiso/components/dashboard_sidebar/_toggle.html.erb

@@ -4,7 +4,7 @@
     data: kiso_prepare_options(component_options, slot: "dashboard-sidebar-toggle",
                                kiso__sidebar_target: "trigger",
                                action: "click->kiso--sidebar#toggle"),
-    aria: { label: "Toggle sidebar", expanded: "false", controls: "dashboard-sidebar" },
+    aria: { label: t("kiso.dashboard_sidebar.toggle"), expanded: "false", controls: "dashboard-sidebar" },
     type: "button",
     **component_options do %>
   <%= capture { yield }.presence || kiso_component_icon(:menu) %>

data/app/views/kiso/components/dialog/_close.html.erb

@@ -6,5 +6,5 @@
       action: "kiso--dialog#close"),
     **component_options do %>
   <%= content || kiso_component_icon(:x) %>
-  <span class="sr-only">Close</span>
+  <span class="sr-only"><%= t("kiso.dialog.close") %></span>
 <% end %>

data/app/views/kiso/components/nav/_item.html.erb

@@ -1,4 +1,4 @@
-<%# locals: (href: "#", icon: nil, badge: nil, active: false, css_classes: "", **component_options) %>
+<%# locals: (href: "#", icon: nil, badge: nil, active: false, ui: {}, css_classes: "", **component_options) %>
 <%= content_tag :a,
     href: href,
     class: Kiso::Themes::NavItem.render(class: css_classes),
@@ -10,6 +10,6 @@
   <% end %>
   <span data-slot="nav-item-label" class="truncate"><%= yield %></span>
   <% if badge %>
-    <span data-slot="nav-item-badge" class="<%= Kiso::Themes::NavItemBadge.render %>"><%= badge %></span>
+    <span data-slot="nav-item-badge" class="<%= Kiso::Themes::NavItemBadge.render(class: ui[:badge]) %>"><%= badge %></span>
   <% end %>
 <% end %>