kiso 0.3.0.pre → 0.4.1.pre

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 %>

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

@@ -1,17 +1,17 @@
-<%# locals: (title: nil, open: true, collapsible: true, css_classes: "", **component_options) %>
+<%# locals: (title: nil, open: true, collapsible: true, ui: {}, css_classes: "", **component_options) %>
 <% if title && collapsible %>
   <%= content_tag :details,
       class: Kiso::Themes::NavSection.render(class: css_classes),
       data: kiso_prepare_options(component_options, slot: "nav-section"),
       open: open,
       **component_options do %>
-    <summary class="<%= Kiso::Themes::NavSectionTitle.render %>" data-slot="nav-section-title">
+    <summary class="<%= Kiso::Themes::NavSectionTitle.render(class: ui[:title]) %>" data-slot="nav-section-title">
       <span class="truncate"><%= title %></span>
       <span class="ml-auto" data-slot="nav-section-chevron">
         <%= kiso_component_icon(:chevron_down, class: "size-4") %>
       </span>
     </summary>
-    <div data-slot="nav-section-content" class="<%= Kiso::Themes::NavSectionContent.render %>">
+    <div data-slot="nav-section-content" class="<%= Kiso::Themes::NavSectionContent.render(class: ui[:content]) %>">
       <%= yield %>
     </div>
   <% end %>
@@ -20,10 +20,10 @@
       class: Kiso::Themes::NavSection.render(class: css_classes),
       data: kiso_prepare_options(component_options, slot: "nav-section"),
       **component_options do %>
-    <div class="<%= Kiso::Themes::NavSectionTitle.render %>" data-slot="nav-section-title">
+    <div class="<%= Kiso::Themes::NavSectionTitle.render(class: ui[:title]) %>" data-slot="nav-section-title">
       <span class="truncate"><%= title %></span>
     </div>
-    <div data-slot="nav-section-content" class="<%= Kiso::Themes::NavSectionContent.render %>">
+    <div data-slot="nav-section-content" class="<%= Kiso::Themes::NavSectionContent.render(class: ui[:content]) %>">
       <%= yield %>
     </div>
   <% end %>

data/app/views/kiso/components/page/_center.html.erb

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

data/app/views/kiso/components/page/_left.html.erb

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

data/app/views/kiso/components/page/_right.html.erb

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

data/app/views/kiso/components/page_card/_body.html.erb

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

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

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

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

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

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

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

data/app/views/kiso/components/page_card/_icon.html.erb

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

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

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

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

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

data/app/views/kiso/components/page_header/_headline.html.erb

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

data/app/views/kiso/components/page_header/_links.html.erb

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

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

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

data/app/views/kiso/components/page_section/_body.html.erb

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

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

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

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

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

data/app/views/kiso/components/page_section/_headline.html.erb

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

data/app/views/kiso/components/page_section/_links.html.erb

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

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

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

data/app/views/kiso/components/page_section/_wrapper.html.erb

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

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

@@ -5,5 +5,5 @@
     data: kiso_prepare_options(component_options, slot: "pagination-ellipsis"),
     **component_options do %>
   <%= kiso_component_icon(:ellipsis, size: :sm) %>
-  <%= content_tag :span, "More pages", class: "sr-only" %>
+  <%= content_tag :span, t("kiso.pagination.more_pages"), class: "sr-only" %>
 <% end %>

data/app/views/kiso/components/pagination/_next.html.erb

@@ -1,5 +1,5 @@
 <%# locals: (href: "#", active: false, css_classes: "", **component_options) %>
-<% aria_attrs = {label: "Go to next page"}
+<% aria_attrs = {label: t("kiso.pagination.next_page")}
    aria_attrs[:current] = "page" if active %>
 <%= content_tag :a,
     href: href,
@@ -7,6 +7,6 @@
     class: Kiso::Themes::PaginationNext.render(active: active, class: css_classes),
     data: kiso_prepare_options(component_options, slot: "pagination-next"),
     **component_options do %>
-  <%= content_tag :span, "Next", class: "hidden sm:block" %>
+  <%= content_tag :span, t("kiso.pagination.next"), class: "hidden sm:block" %>
   <%= kiso_component_icon(:chevron_right) %>
 <% end %>

data/app/views/kiso/components/pagination/_previous.html.erb

@@ -1,5 +1,5 @@
 <%# locals: (href: "#", active: false, css_classes: "", **component_options) %>
-<% aria_attrs = {label: "Go to previous page"}
+<% aria_attrs = {label: t("kiso.pagination.previous_page")}
    aria_attrs[:current] = "page" if active %>
 <%= content_tag :a,
     href: href,
@@ -8,5 +8,5 @@
     data: kiso_prepare_options(component_options, slot: "pagination-previous"),
     **component_options do %>
   <%= kiso_component_icon(:chevron_left) %>
-  <%= content_tag :span, "Previous", class: "hidden sm:block" %>
+  <%= content_tag :span, t("kiso.pagination.previous"), class: "hidden sm:block" %>
 <% end %>

data/app/views/kiso/components/select/_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::SelectItem.render(class: css_classes),
     role: "option",
@@ -10,7 +10,7 @@
       disabled: (disabled ? "true" : nil)),
     aria: {selected: false, disabled: (disabled || nil)},
     **component_options do %>
-  <%= tag.span class: Kiso::Themes::SelectItemIndicator.render,
+  <%= tag.span class: Kiso::Themes::SelectItemIndicator.render(class: ui[:indicator]),
               data: { slot: "select-item-indicator", kiso__select_target: "indicator" },
               hidden: true do %>
     <%= kiso_component_icon(:check, class: "size-4") %>

data/config/locales/en.yml

@@ -0,0 +1,33 @@
+en:
+  kiso:
+    alert:
+      dismiss: "Dismiss"
+    breadcrumb:
+      label: "breadcrumb"
+      more: "More"
+    color_mode_button:
+      toggle: "Toggle color mode"
+    color_mode_select:
+      theme: "Theme"
+      system: "System"
+      light: "Light"
+      dark: "Dark"
+    combobox:
+      toggle: "Toggle"
+      options: "Options"
+    command:
+      search: "Search"
+      suggestions: "Suggestions"
+    dashboard_sidebar:
+      label: "Sidebar navigation"
+      toggle: "Toggle sidebar"
+      collapse: "Collapse sidebar"
+    dialog:
+      close: "Close"
+    pagination:
+      label: "pagination"
+      more_pages: "More pages"
+      next: "Next"
+      next_page: "Go to next page"
+      previous: "Previous"
+      previous_page: "Go to previous page"

data/lib/generators/kiso/component/USAGE

@@ -0,0 +1,35 @@
+Description:
+  Scaffolds a component with a ClassVariants theme module and ERB partial.
+  Components are rendered using the appui() helper.
+
+  Theme files are placed in app/themes/<active_theme>/ (default: app/themes/default/).
+  The active theme is set via Kiso.config.app_theme.
+
+Examples:
+  bin/rails generate kiso:component pricing_card
+
+    Creates:
+      app/themes/default/pricing_card.rb
+      app/views/components/_pricing_card.html.erb
+
+  bin/rails generate kiso:component pricing_card --sub-parts header footer
+
+    Creates:
+      app/themes/default/pricing_card.rb
+      app/themes/default/pricing_card_header.rb
+      app/themes/default/pricing_card_footer.rb
+      app/views/components/_pricing_card.html.erb
+      app/views/components/pricing_card/_header.html.erb
+      app/views/components/pricing_card/_footer.html.erb
+
+  bin/rails generate kiso:component pricing_card --theme modern
+
+    Creates theme files in app/themes/modern/ instead of app/themes/default/.
+
+Usage:
+  appui(:pricing_card) { "Content" }
+
+  appui(:pricing_card) do
+    appui(:pricing_card, :header) { "Title" }
+    appui(:pricing_card, :footer) { "Actions" }
+  end

data/lib/generators/kiso/component/component_generator.rb

@@ -0,0 +1,104 @@
+# frozen_string_literal: true
+
+module Kiso
+  module Generators
+    # Scaffolds a component with a ClassVariants theme module and ERB partial.
+    #
+    # Theme files are placed in +app/themes/<active_theme>/+ (default:
+    # +app/themes/default/+). The active theme is configured via
+    # +Kiso.config.app_theme+. Components are rendered using the +appui()+
+    # helper.
+    #
+    # @example Basic usage
+    #   bin/rails generate kiso:component pricing_card
+    #
+    # @example With sub-parts
+    #   bin/rails generate kiso:component pricing_card --sub-parts header footer
+    #
+    # @example With a custom theme
+    #   bin/rails generate kiso:component pricing_card --theme modern
+    class ComponentGenerator < Rails::Generators::NamedBase
+      source_root File.expand_path("templates", __dir__)
+
+      class_option :sub_parts,
+        type: :array,
+        default: [],
+        desc: "Sub-part names to generate (e.g. --sub-parts header footer)"
+
+      class_option :theme,
+        type: :string,
+        default: nil,
+        desc: "Theme directory name (defaults to Kiso.config.app_theme, usually :default)"
+
+      def create_theme_file
+        template "theme.rb.tt", File.join(theme_dir, component_path_dir, "#{file_name}.rb")
+      end
+
+      def create_partial_file
+        template "partial.html.erb.tt",
+          File.join("app/views/components", component_path_dir, "_#{file_name}.html.erb")
+      end
+
+      def create_sub_part_files
+        options[:sub_parts].each do |part|
+          @current_part = part
+          template "sub_part_theme.rb.tt",
+            File.join(theme_dir, component_path_dir, "#{file_name}_#{part}.rb")
+          template "sub_part_partial.html.erb.tt",
+            File.join("app/views/components", component_path_dir, file_name, "_#{part}.html.erb")
+        end
+      end
+
+      private
+
+      # @return [String] the current sub-part name being generated
+      attr_reader :current_part
+
+      # @return [String] the theme directory path (e.g. "app/themes/default")
+      def theme_dir
+        name = (options[:theme] || Kiso.config.app_theme).to_s
+        File.join("app/themes", name)
+      end
+
+      # @return [String] the component name in PascalCase (e.g. "PricingCard")
+      def class_name_without_namespace
+        file_name.camelize
+      end
+
+      # @return [String] the kebab-case data-slot value (e.g. "pricing-card")
+      def slot_name
+        file_name.dasherize
+      end
+
+      # @return [String] the kebab-case data-slot value for a sub-part (e.g. "pricing-card-header")
+      def sub_part_slot_name
+        "#{slot_name}-#{current_part.dasherize}"
+      end
+
+      # @return [String] the PascalCase theme constant name for a sub-part (e.g. "PricingCardHeader")
+      def sub_part_class_name
+        "#{class_name_without_namespace}#{current_part.camelize}"
+      end
+
+      # @return [Array<String>] namespace segments from the name argument
+      def component_class_path
+        regular_class_path
+      end
+
+      # @return [String] namespace directory path (empty string for simple names)
+      def component_path_dir
+        component_class_path.join("/")
+      end
+
+      # @return [String] full module nesting prefix (e.g. "Admin::" for admin/pricing_card)
+      def module_prefix
+        component_class_path.map(&:camelize).join("::")
+      end
+
+      # @return [Boolean] whether the component has a namespace prefix (e.g. admin/pricing_card)
+      def has_namespace?
+        component_class_path.any?
+      end
+    end
+  end
+end

data/lib/generators/kiso/component/templates/partial.html.erb.tt

@@ -0,0 +1,5 @@
+<%% # locals: (css_classes: "", **component_options) %>
+<%%= appui_tag :div, theme: AppThemes::<%= has_namespace? ? "#{module_prefix}::" : "" %><%= class_name_without_namespace %>, slot: "<%= slot_name %>",
+    css_classes: css_classes, **component_options do %>
+  <%%= yield %>
+<%% end %>