kiso 0.3.0.pre → 0.4.1.pre

data/app/helpers/kiso/component_helper.rb

@@ -11,6 +11,11 @@ module Kiso
     # @param component [Symbol] the component name (e.g. +:badge+, +:card+)
     # @param part [Symbol, nil] optional sub-part name (e.g. +:header+, +:footer+)
     # @param collection [Array, nil] renders the partial once per item when present
+    # @param ui [Hash{Symbol => String}, nil] per-slot class overrides keyed by sub-part name.
+    #   For parent components, the hash is pushed onto a context stack so sub-parts
+    #   inherit overrides automatically. For self-rendering components, the hash is
+    #   also passed as a local so the partial can apply overrides to internally
+    #   rendered elements.
     # @param kwargs [Hash] locals passed to the partial (e.g. +color:+, +variant:+, +css_classes:+)
     # @yield optional block for component content
     # @return [ActiveSupport::SafeBuffer] rendered HTML
@@ -18,33 +23,25 @@ module Kiso
     # @example Render a badge
     #   kui(:badge, color: :success, variant: :soft) { "Active" }
     #
-    # @example Render a card sub-part
-    #   kui(:card, :header) { "Title" }
+    # @example Render a card with per-slot overrides
+    #   kui(:card, ui: { header: "p-8", title: "text-xl" }) do
+    #     kui(:card, :header) do
+    #       kui(:card, :title) { "Dashboard" }
+    #     end
+    #   end
+    #
+    # @example Render an alert with inner element overrides
+    #   kui(:alert, icon: "info", ui: { close: "opacity-50" })
     #
     # @example Render a collection
     #   kui(:badge, collection: @tags)
-    def kui(component, part = nil, collection: nil, **kwargs, &block)
-      path = if part
-        "kiso/components/#{component}/#{part}"
-      else
-        "kiso/components/#{component}"
-      end
-
-      # Prevent yield from bubbling up the ERB rendering chain when no block
-      # is passed. Without this, partials that use `capture { yield }.presence`
-      # to support optional block overrides (e.g., toggle/collapse/separator)
-      # would have their `yield` bubble through nested content_tag blocks all
-      # the way to the layout's `<%= yield %>`, capturing the entire page
-      # template content. An explicit empty proc gives `yield` something to
-      # call, returning empty string → `.presence` returns nil → default
-      # content renders correctly.
-      block ||= proc {}
-
-      if collection
-        render partial: path, collection: collection, locals: kwargs, &block
-      else
-        render path, **kwargs, &block
-      end
+    def kui(component, part = nil, collection: nil, ui: nil, **kwargs, &block)
+      kiso_render_component(
+        component, part,
+        path_prefix: "kiso/components",
+        collection: collection, ui: ui, merge_global_ui: true,
+        **kwargs, &block
+      )
     end
 
     # Prepares +component_options+ for use with +content_tag+.
@@ -72,5 +69,124 @@ module Kiso
 
       (component_options.delete(:data) || {}).merge(slot: slot, **data_attrs)
     end
+
+    # Renders a themed HTML element with Kiso conventions.
+    #
+    # Collapses the common +content_tag+ + +kiso_prepare_options+ + theme
+    # rendering boilerplate into a single call. Use in component partials
+    # instead of manually wiring +content_tag+.
+    #
+    # @param tag [Symbol] HTML element name (e.g. +:div+, +:span+, +:button+)
+    # @param theme [ClassVariants::Instance] the theme module to render classes from
+    # @param slot [String] the +data-slot+ value (kebab-case)
+    # @param css_classes [String] caller's class overrides, merged via +tailwind_merge+
+    # @param variants [Hash] variant values forwarded to +theme.render+
+    #   (e.g. +{ size: :md, color: :primary }+)
+    # @param component_options [Hash] HTML attributes forwarded to +content_tag+
+    #   (e.g. +id:+, +aria:+). A +data:+ key is extracted and merged with slot.
+    # @yield optional block for element content
+    # @return [ActiveSupport::SafeBuffer] rendered HTML
+    #
+    # @example In a component partial
+    #   kui_tag :div, theme: Kiso::Themes::Badge, slot: "badge",
+    #       css_classes: css_classes, variants: { color: color, variant: variant },
+    #       **component_options do
+    #     yield
+    #   end
+    def kui_tag(tag, theme:, slot:, css_classes: "", variants: {}, **component_options, &block)
+      content_tag(tag,
+        class: theme.render(**variants, class: css_classes),
+        data: kiso_prepare_options(component_options, slot: slot),
+        **component_options, &block)
+    end
+
+    private
+
+    # Shared rendering pipeline for both kui() and appui().
+    #
+    # @param component [Symbol] the component name
+    # @param part [Symbol, nil] optional sub-part name
+    # @param path_prefix [String] partial path prefix (e.g. "kiso/components" or "components")
+    # @param collection [Array, nil] renders the partial once per item when present
+    # @param ui [Hash, nil] per-slot class overrides
+    # @param merge_global_ui [Boolean] whether to merge global config ui layer
+    # @param kwargs [Hash] locals passed to the partial
+    # @param block [Proc] optional block for component content
+    # @return [ActiveSupport::SafeBuffer] rendered HTML
+    def kiso_render_component(component, part, path_prefix:, collection:, ui:, merge_global_ui: true, **kwargs, &block)
+      path = if part
+        "#{path_prefix}/#{component}/#{part}"
+      else
+        "#{path_prefix}/#{component}"
+      end
+
+      # Prevent yield from bubbling up the ERB rendering chain when no block
+      # is passed. Without this, partials that use `capture { yield }.presence`
+      # to support optional block overrides (e.g., toggle/collapse/separator)
+      # would have their `yield` bubble through nested content_tag blocks all
+      # the way to the layout's `<%= yield %>`, capturing the entire page
+      # template content. An explicit empty proc gives `yield` something to
+      # call, returning empty string → `.presence` returns nil → default
+      # content renders correctly.
+      block ||= proc {}
+
+      if part
+        # Sub-part: merge slot override from parent's ui context
+        parent_ui = kiso_current_ui(component)
+        if (slot_classes = parent_ui[part].presence)
+          existing = kwargs[:css_classes] || ""
+          kwargs[:css_classes] = existing.blank? ? slot_classes : "#{existing} #{slot_classes}"
+        end
+
+        # Forward ui: to sub-part partial when explicitly provided
+        kwargs[:ui] = ui if ui
+
+        if collection
+          render partial: path, collection: collection, locals: kwargs, &block
+        else
+          render path, **kwargs, &block
+        end
+      else
+        # Parent component: merge global ui config with instance ui (or use instance ui directly)
+        merged_ui = if merge_global_ui
+          kiso_merge_ui_layers(component, ui)
+        else
+          ui || {}
+        end
+        has_ui = merged_ui.present?
+
+        # Push context for composed sub-parts to read (skip when empty)
+        kiso_push_ui_context(component, merged_ui) if has_ui
+        begin
+          locals = has_ui ? kwargs.merge(ui: merged_ui) : kwargs
+
+          if collection
+            render partial: path, collection: collection, locals: locals, &block
+          else
+            render path, **locals, &block
+          end
+        ensure
+          kiso_pop_ui_context(component) if has_ui
+        end
+      end
+    end
+
+    # Merge global config ui overrides with instance ui overrides.
+    # Global config is Layer 2, instance +ui:+ is Layer 3.
+    #
+    # @param component [Symbol] the component name
+    # @param instance_ui [Hash, nil] per-instance ui overrides
+    # @return [Hash{Symbol => String}] merged ui hash
+    def kiso_merge_ui_layers(component, instance_ui)
+      global_ui = Kiso.config.theme.dig(component, :ui)
+      return instance_ui || {} if global_ui.nil? || global_ui.empty?
+      return global_ui if instance_ui.nil? || instance_ui.empty?
+
+      # Instance wins. For slots in both, concatenate — tailwind_merge
+      # resolves conflicts when .render(class:) is called.
+      global_ui.merge(instance_ui) do |_slot, global_classes, instance_classes|
+        "#{global_classes} #{instance_classes}"
+      end
+    end
   end
 end

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: (center: false, css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::App.render(center: center, 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) %>