kiso 0.1.0.pre → 0.2.0.pre

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

@@ -1,7 +1,7 @@
 <%# locals: (css_classes: "", **component_options) %>
 <%= content_tag :div,
     class: Kiso::Themes::AlertDescription.render(class: css_classes),
-    data: { component: :alert, alert_part: :description },
+    data: kiso_prepare_options(component_options, slot: "alert-description"),
     **component_options do %>
   <%= yield %>
 <% end %>

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

@@ -1,7 +1,7 @@
 <%# locals: (css_classes: "", **component_options) %>
 <%= content_tag :div,
     class: Kiso::Themes::AlertTitle.render(class: css_classes),
-    data: { component: :alert, alert_part: :title },
+    data: kiso_prepare_options(component_options, slot: "alert-title"),
     **component_options do %>
   <%= yield %>
 <% end %>

data/app/views/kiso/components/avatar/_badge.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :span,
+    class: Kiso::Themes::AvatarBadge.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "avatar-badge"),
+    **component_options do %>
+  <%= capture { yield }.presence %>
+<% end %>

data/app/views/kiso/components/avatar/_fallback.html.erb

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

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

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

data/app/views/kiso/components/avatar/_group_count.html.erb

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

data/app/views/kiso/components/avatar/_image.html.erb

@@ -0,0 +1,6 @@
+<%# locals: (src:, alt: "", css_classes: "", **component_options) %>
+<%= tag.img src: src, alt: alt,
+    class: Kiso::Themes::AvatarImage.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "avatar-image"),
+    onerror: "this.style.display='none'",
+    **component_options %>

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

@@ -0,0 +1,10 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :span,
+    class: Kiso::Themes::BreadcrumbEllipsis.render(class: css_classes),
+    role: "presentation",
+    aria: { hidden: "true" },
+    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>
+<% end %>

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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :span,
+    class: Kiso::Themes::BreadcrumbPage.render(class: css_classes),
+    role: "link",
+    aria: { disabled: "true", current: "page" },
+    data: kiso_prepare_options(component_options, slot: "breadcrumb-page"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

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

@@ -0,0 +1,9 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :li,
+    class: Kiso::Themes::BreadcrumbSeparator.render(class: css_classes),
+    role: "presentation",
+    aria: { hidden: "true" },
+    data: kiso_prepare_options(component_options, slot: "breadcrumb-separator"),
+    **component_options do %>
+  <%= capture { yield }.presence || kiso_component_icon(:chevron_right, class: "size-3.5") %>
+<% end %>

data/app/views/kiso/components/card/_action.html.erb

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

data/app/views/kiso/components/card/_content.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (css_classes: "", **component_options) %>
 <%= content_tag :div,
     class: Kiso::Themes::CardContent.render(class: css_classes),
-    data: { component: :card, card_part: :content },
+    data: kiso_prepare_options(component_options, slot: "card-content"),
     **component_options do %>
   <%= yield %>
 <% end %>

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

@@ -1,7 +1,7 @@
 <%# locals: (css_classes: "", **component_options) %>
 <%= content_tag :div,
     class: Kiso::Themes::CardDescription.render(class: css_classes),
-    data: { component: :card, card_part: :description },
+    data: kiso_prepare_options(component_options, slot: "card-description"),
     **component_options do %>
   <%= yield %>
 <% end %>

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

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

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

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

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

@@ -1,7 +1,7 @@
 <%# locals: (css_classes: "", **component_options) %>
 <%= content_tag :div,
     class: Kiso::Themes::CardTitle.render(class: css_classes),
-    data: { component: :card, card_part: :title },
+    data: kiso_prepare_options(component_options, slot: "card-title"),
     **component_options do %>
   <%= yield %>
 <% end %>

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

@@ -0,0 +1,19 @@
+<%# locals: (value:, removable: true, css_classes: "", **component_options) %>
+<%= content_tag :span,
+    class: Kiso::Themes::ComboboxChip.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "combobox-chip",
+      kiso__combobox_target: "chip",
+      value: value),
+    **component_options do %>
+  <span data-slot="combobox-chip-text"><%= yield %></span>
+  <% if removable %>
+    <button type="button"
+            class="flex size-4 items-center justify-center rounded-sm opacity-50 hover:opacity-100"
+            data-slot="combobox-chip-remove"
+            data-action="click->kiso--combobox#removeChip"
+            data-value="<%= value %>"
+            tabindex="-1">
+      <%= kiso_component_icon(:x, class: "size-3 pointer-events-none") %>
+    </button>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,20 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::ComboboxChips.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "combobox-chips",
+      kiso__combobox_target: "chips"),
+    **component_options do %>
+  <%= yield %>
+  <%= tag.template data: { kiso__combobox_target: "chipTemplate" } do %>
+    <%= tag.span class: Kiso::Themes::ComboboxChip.render,
+                data: { slot: "combobox-chip", kiso__combobox_target: "chip" } do %>
+      <%= tag.span data: { slot: "combobox-chip-text" } %>
+      <%= tag.button type: "button",
+                     class: "flex size-4 items-center justify-center rounded-sm opacity-50 hover:opacity-100",
+                     tabindex: "-1",
+                     data: { slot: "combobox-chip-remove", action: "click->kiso--combobox#removeChip" } do %>
+        <%= kiso_component_icon(:x, class: "size-3 pointer-events-none") %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,10 @@
+<%# locals: (placeholder: nil, disabled: false, css_classes: "", **component_options) %>
+<%= tag.input type: "text",
+    class: Kiso::Themes::ComboboxChipsInput.render(class: css_classes),
+    placeholder: placeholder,
+    autocomplete: "off",
+    disabled: (disabled || nil),
+    data: kiso_prepare_options(component_options, slot: "combobox-chip-input",
+      kiso__combobox_target: "input",
+      action: "input->kiso--combobox#filter focus->kiso--combobox#onInputFocus keydown->kiso--combobox#inputKeydown"),
+    **component_options %>

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

@@ -0,0 +1,9 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::ComboboxContent.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "combobox-content",
+      kiso__combobox_target: "content"),
+    hidden: true,
+    **component_options do %>
+  <%= yield %>
+<% end %>

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

@@ -0,0 +1,9 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::ComboboxEmpty.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "combobox-empty",
+      kiso__combobox_target: "empty"),
+    hidden: true,
+    **component_options do %>
+  <%= yield %>
+<% end %>

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

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

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

@@ -0,0 +1,23 @@
+<%# locals: (placeholder: nil, disabled: false, css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::ComboboxInput.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "combobox-input"),
+    **component_options do %>
+  <%= tag.input type: "text",
+               placeholder: placeholder,
+               autocomplete: "off",
+               disabled: (disabled || nil),
+               data: { kiso__combobox_target: "input",
+                       action: "input->kiso--combobox#filter focus->kiso--combobox#onInputFocus keydown->kiso--combobox#inputKeydown" } %>
+  <div class="flex items-center pe-2">
+    <%= tag.button type: "button",
+                   class: "flex size-6 items-center justify-center rounded-sm text-muted-foreground hover:text-foreground",
+                   disabled: (disabled || nil),
+                   tabindex: "-1",
+                   aria: { label: "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") %>
+    <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,19 @@
+<%# locals: (value:, disabled: false, css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::ComboboxItem.render(class: css_classes),
+    role: "option",
+    tabindex: "-1",
+    data: kiso_prepare_options(component_options, slot: "combobox-item",
+      kiso__combobox_target: "item",
+      action: "click->kiso--combobox#selectItem",
+      value: value,
+      disabled: (disabled ? "true" : nil)),
+    aria: {selected: false, disabled: (disabled || nil)},
+    **component_options do %>
+  <%= tag.span yield, data: { slot: "combobox-item-text" } %>
+  <%= tag.span class: Kiso::Themes::ComboboxItemIndicator.render,
+              data: { slot: "combobox-item-indicator", kiso__combobox_target: "indicator" },
+              hidden: true do %>
+    <%= kiso_component_icon(:check, class: "size-4") %>
+  <% end %>
+<% end %>

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

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

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

@@ -0,0 +1,10 @@
+<%# locals: (label: "Options", css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::ComboboxList.render(class: css_classes),
+    role: "listbox",
+    aria: { label: label },
+    data: kiso_prepare_options(component_options, slot: "combobox-list",
+      kiso__combobox_target: "list"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

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

@@ -0,0 +1,6 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= tag.div(
+    class: Kiso::Themes::ComboboxSeparator.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "combobox-separator"),
+    role: "separator",
+    **component_options) %>

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

@@ -0,0 +1,11 @@
+<%# locals: (shortcut: "k", css_classes: "", **component_options) %>
+<%= content_tag :dialog,
+    class: Kiso::Themes::CommandDialog.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "command-dialog",
+      controller: "kiso--command-dialog",
+      kiso__command_dialog_shortcut_value: shortcut),
+    **component_options do %>
+  <div class="<%= Kiso::Themes::CommandDialogContent.render %>">
+    <%= yield %>
+  </div>
+<% end %>

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

@@ -0,0 +1,9 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::CommandEmpty.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "command-empty",
+      kiso__command_target: "empty"),
+    hidden: true,
+    **component_options do %>
+  <%= yield %>
+<% end %>

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

@@ -0,0 +1,14 @@
+<%# locals: (heading: nil, css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::CommandGroup.render(class: css_classes),
+    role: "group",
+    data: kiso_prepare_options(component_options, slot: "command-group",
+      kiso__command_target: "group"),
+    **component_options do %>
+  <% if heading.present? %>
+    <div class="<%= Kiso::Themes::CommandGroupHeading.render %>"
+         data-slot="command-group-heading"
+         role="presentation"><%= heading %></div>
+  <% end %>
+  <%= yield %>
+<% end %>

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

@@ -0,0 +1,16 @@
+<%# locals: (placeholder: nil, label: "Search", css_classes: "", **component_options) %>
+<div class="<%= Kiso::Themes::CommandInputWrapper.render %>"
+     data-slot="command-input-wrapper">
+  <%= kiso_component_icon(:search, class: "size-4 shrink-0 opacity-50") %>
+  <%= tag.input(
+    type: "text",
+    class: Kiso::Themes::CommandInput.render(class: css_classes),
+    placeholder: placeholder,
+    autocomplete: "off",
+    aria: { label: label },
+    data: kiso_prepare_options(component_options, slot: "command-input",
+      kiso__command_target: "input",
+      action: "input->kiso--command#filter keydown->kiso--command#inputKeydown"),
+    **component_options
+  ) %>
+</div>

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

@@ -0,0 +1,13 @@
+<%# locals: (value: nil, disabled: false, css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::CommandItem.render(class: css_classes),
+    role: "option",
+    data: kiso_prepare_options(component_options, slot: "command-item",
+      kiso__command_target: "item",
+      action: "click->kiso--command#selectItem",
+      value: value,
+      disabled: (disabled ? "true" : nil)),
+    aria: {selected: false, disabled: (disabled || nil)},
+    **component_options do %>
+  <%= yield %>
+<% end %>

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

@@ -0,0 +1,10 @@
+<%# locals: (label: "Suggestions", css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::CommandList.render(class: css_classes),
+    role: "listbox",
+    aria: { label: label },
+    data: kiso_prepare_options(component_options, slot: "command-list",
+      kiso__command_target: "list"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

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

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

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

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

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

@@ -0,0 +1,11 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :button,
+    class: Kiso::Themes::DashboardNavbarToggle.render(class: css_classes),
+    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" },
+    type: "button",
+    **component_options do %>
+  <%= capture { yield }.presence || kiso_component_icon(:menu) %>
+<% end %>

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

@@ -0,0 +1,12 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :button,
+    class: Kiso::Themes::DashboardSidebarCollapse.render(class: css_classes),
+    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" },
+    type: "button",
+    **component_options do %>
+  <span data-slot="collapse-icon-open"><%= kiso_component_icon(:panel_left_close) %></span>
+  <span data-slot="collapse-icon-closed"><%= kiso_component_icon(:panel_left_open) %></span>
+<% end %>

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

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

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

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

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

@@ -0,0 +1,11 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :button,
+    class: Kiso::Themes::DashboardSidebarToggle.render(class: css_classes),
+    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" },
+    type: "button",
+    **component_options do %>
+  <%= capture { yield }.presence || kiso_component_icon(:menu) %>
+<% end %>

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

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

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

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

data/app/views/kiso/components/dropdown_menu/_checkbox_item.html.erb

@@ -0,0 +1,18 @@
+<%# locals: (checked: false, disabled: false, css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::DropdownMenuCheckboxItem.render(class: css_classes),
+    role: "menuitemcheckbox",
+    tabindex: "-1",
+    data: kiso_prepare_options(component_options, slot: "dropdown-menu-checkbox-item",
+      kiso__dropdown_menu_target: "checkboxItem",
+      action: "click->kiso--dropdown-menu#toggleCheckboxItem",
+      disabled: (disabled ? "true" : nil)),
+    aria: {checked: checked, disabled: (disabled || nil)},
+    **component_options do %>
+  <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"
+        data-slot="dropdown-menu-item-indicator"
+        <% unless checked %>hidden<% end %>>
+    <%= kiso_component_icon(:check, class: "size-4") %>
+  </span>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/dropdown_menu/_content.html.erb

@@ -0,0 +1,10 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::DropdownMenuContent.render(class: css_classes),
+    role: "menu",
+    data: kiso_prepare_options(component_options, slot: "dropdown-menu-content",
+      kiso__dropdown_menu_target: "content"),
+    hidden: true,
+    **component_options do %>
+  <%= yield %>
+<% end %>

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

@@ -0,0 +1,8 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::DropdownMenuGroup.render(class: css_classes),
+    role: "group",
+    data: kiso_prepare_options(component_options, slot: "dropdown-menu-group"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

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

@@ -0,0 +1,15 @@
+<%# locals: (variant: :default, inset: false, disabled: false, css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::DropdownMenuItem.render(variant: variant, class: css_classes),
+    role: "menuitem",
+    tabindex: "-1",
+    data: kiso_prepare_options(component_options, slot: "dropdown-menu-item",
+      kiso__dropdown_menu_target: "item",
+      action: "click->kiso--dropdown-menu#selectItem",
+      inset: (inset ? "" : nil),
+      variant: (variant == :destructive ? "destructive" : nil),
+      disabled: (disabled ? "true" : nil)),
+    aria: {disabled: (disabled || nil)},
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/dropdown_menu/_label.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (inset: false, css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::DropdownMenuLabel.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "dropdown-menu-label",
+      inset: (inset ? "" : nil)),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/dropdown_menu/_radio_group.html.erb

@@ -0,0 +1,10 @@
+<%# locals: (value: nil, css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::DropdownMenuRadioGroup.render(class: css_classes),
+    role: "group",
+    data: kiso_prepare_options(component_options, slot: "dropdown-menu-radio-group",
+      kiso__dropdown_menu_target: "radioGroup",
+      value: value),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/dropdown_menu/_radio_item.html.erb

@@ -0,0 +1,19 @@
+<%# locals: (value:, checked: false, disabled: false, css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::DropdownMenuRadioItem.render(class: css_classes),
+    role: "menuitemradio",
+    tabindex: "-1",
+    data: kiso_prepare_options(component_options, slot: "dropdown-menu-radio-item",
+      kiso__dropdown_menu_target: "radioItem",
+      action: "click->kiso--dropdown-menu#selectRadioItem",
+      value: value,
+      disabled: (disabled ? "true" : nil)),
+    aria: {checked: checked, disabled: (disabled || nil)},
+    **component_options do %>
+  <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"
+        data-slot="dropdown-menu-item-indicator"
+        <% unless checked %>hidden<% end %>>
+    <%= kiso_component_icon(:circle, class: "size-2 fill-current") %>
+  </span>
+  <%= yield %>
+<% end %>