kiso 0.2.2.pre → 0.4.0.pre

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

@@ -0,0 +1,28 @@
+<%# 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 /
+  # aria-describedby id attributes without requiring the caller to pass
+  # the id through each nested kui() call.
+  @_kiso_alert_dialog_id = component_options[:id]
+  aria = {}
+  if @_kiso_alert_dialog_id
+    aria[:labelledby] = "#{@_kiso_alert_dialog_id}-title"
+    aria[:describedby] = "#{@_kiso_alert_dialog_id}-description"
+  end
+%>
+<%= content_tag :dialog,
+    class: Kiso::Themes::AlertDialog.render(class: css_classes),
+    role: "alertdialog",
+    aria: aria,
+    data: kiso_prepare_options(component_options, slot: "alert-dialog",
+      controller: "kiso--dialog",
+      kiso__dialog_open_value: (open ? true : nil),
+      kiso__dialog_dismissable_value: false),
+    **component_options do %>
+  <div class="<%= Kiso::Themes::AlertDialogContent.render(size: size, class: ui[:content]) %>"
+       data-slot="alert-dialog-content"
+       data-size="<%= size %>">
+    <%= yield %>
+  </div>
+<% end %>

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

@@ -0,0 +1,8 @@
+<%# locals: (ratio: 16.0/9, css_classes: "", **component_options) %>
+<%= content_tag :div,
+    style: "aspect-ratio: #{ratio}",
+    class: Kiso::Themes::AspectRatio.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "aspect-ratio"),
+    **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/_button.html.erb

@@ -1,19 +1,33 @@
 <%# locals: (color: :primary, variant: :solid, size: :md, block: false,
-             type: :button, href: nil, disabled: false,
-             css_classes: "", **component_options) %>
-<% tag_name = href.present? ? :a : :button
-   if tag_name == :a
-     component_options[:href] = href
-     component_options[:"aria-disabled"] = true if disabled
-   else
-     component_options[:type] = type
-     component_options[:disabled] = true if disabled
-   end %>
-<%= content_tag tag_name,
-    class: Kiso::Themes::Button.render(
-      color: color, variant: variant, size: size, block: block,
-      class: css_classes),
-    data: kiso_prepare_options(component_options, slot: "button"),
-    **component_options do %>
-  <%= yield %>
+             type: :button, href: nil, method: nil, disabled: false,
+             form: {}, css_classes: "", **component_options) %>
+<%
+  css = Kiso::Themes::Button.render(
+    color: color, variant: variant, size: size, block: block, class: css_classes)
+  data = kiso_prepare_options(component_options, slot: "button")
+  use_button_to = href.present? && method.present? && method.to_s != "get"
+%>
+<% if use_button_to %>
+  <%= button_to href,
+      method: method,
+      class: css,
+      form_class: "contents",
+      data: data,
+      disabled: disabled || nil,
+      form: form.presence,
+      **component_options do %>
+    <%= yield %>
+  <% end %>
+<% elsif href.present? %>
+  <% component_options[:href] = href
+     component_options[:"aria-disabled"] = true if disabled %>
+  <%= content_tag :a, class: css, data: data, **component_options do %>
+    <%= yield %>
+  <% end %>
+<% else %>
+  <% component_options[:type] = type
+     component_options[:disabled] = true if disabled %>
+  <%= content_tag :button, class: css, data: data, **component_options do %>
+    <%= yield %>
+  <% end %>
 <% end %>

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

@@ -0,0 +1,11 @@
+<%# 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(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

@@ -0,0 +1,42 @@
+<%# 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,
+    class: Kiso::Themes::Slider.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "slider",
+      controller: "kiso--slider",
+      kiso__slider_min_value: min,
+      kiso__slider_max_value: max,
+      kiso__slider_step_value: step),
+    **component_options do %>
+  <%= tag.input(type: :range,
+      id: id,
+      name: name,
+      min: min,
+      max: max,
+      step: step,
+      value: slider_value,
+      disabled: disabled,
+      aria: { label: aria_label },
+      tabindex: "-1",
+      class: "sr-only",
+      data: { kiso__slider_target: "input" }) %>
+  <%= tag.div(
+      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: ui[:range]),
+        style: "width: #{percent}%",
+        data: { slot: "slider-range", kiso__slider_target: "range" }) %>
+  <% end %>
+  <%= tag.div(
+      class: Kiso::Themes::SliderThumb.render(size: size, class: ui[:thumb]),
+      role: :slider,
+      tabindex: (disabled ? "-1" : "0"),
+      aria: { valuemin: min, valuemax: max, valuenow: slider_value,
+              label: aria_label,
+              disabled: (disabled || nil) },
+      style: "position: absolute; left: #{percent}%",
+      data: { slot: "slider-thumb", kiso__slider_target: "thumb",
+              disabled: (disabled ? "true" : nil) }) %>
+<% end %>

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/alert_dialog/_action.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (color: :primary, variant: :solid, size: :md, css_classes: "", **component_options) %>
+<%= tag.button type: "button",
+    class: Kiso::Themes::Button.render(color: color, variant: variant, size: size, class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "alert-dialog-action",
+      action: "kiso--dialog#close"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/alert_dialog/_cancel.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (color: :primary, variant: :outline, size: :md, css_classes: "", **component_options) %>
+<%= tag.button type: "button",
+    class: Kiso::Themes::Button.render(color: color, variant: variant, size: size, class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "alert-dialog-cancel",
+      action: "kiso--dialog#close"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/alert_dialog/_description.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (css_classes: "", **component_options) %>
+<% component_options[:id] = "#{@_kiso_alert_dialog_id}-description" if @_kiso_alert_dialog_id && !component_options.key?(:id) %>
+<%= content_tag :p,
+    class: Kiso::Themes::AlertDialogDescription.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "alert-dialog-description"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

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

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

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

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

data/app/views/kiso/components/alert_dialog/_media.html.erb

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

data/app/views/kiso/components/alert_dialog/_title.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (css_classes: "", **component_options) %>
+<% component_options[:id] = "#{@_kiso_alert_dialog_id}-title" if @_kiso_alert_dialog_id && !component_options.key?(:id) %>
+<%= content_tag :h2,
+    class: Kiso::Themes::AlertDialogTitle.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "alert-dialog-title"),
+    **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) %>