velvetkit 0.1.0.beta

data/registry/app/components/ui/menu/item.rb

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+class UI::Menu::Item < UI::Base
+  variants(
+    base:
+      "relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none transition-colors " \
+      "hover:bg-accent hover:text-accent-foreground " \
+      "focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 " \
+      "aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium " \
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all",
+    variants: {
+      variant: {
+        default: "",
+        destructive: "text-destructive hover:bg-destructive/10 hover:text-destructive focus:bg-destructive/10 focus:text-destructive"
+      },
+      inset: {
+        true => "pl-8",
+        false => ""
+      }
+    },
+    defaults: { variant: :default, inset: false }
+  )
+
+  def initialize(label = nil, href: nil, disabled: false, variant: :default, inset: false, class: nil, **html_attrs, &block)
+    @label = label
+    @href = href
+    @disabled = disabled
+    @variant = variant
+    @inset = inset
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+    @content_block = block
+  end
+
+  def classes
+    cn(
+      variant_classes(variant: @variant, inset: @inset),
+      @user_class
+    )
+  end
+
+  def html_options
+    opts = @html_attrs.dup
+    opts[:class] = classes
+    opts[:role] ||= :menuitem
+    opts[:tabindex] = -1
+    opts[:"data-ui--menu-target"] = "item"
+    opts[:disabled] = true if @disabled
+    opts[:"data-disabled"] = true if @disabled
+    opts
+  end
+
+  def tag_name
+    @href ? :a : :button
+  end
+
+  def href_attr
+    @href ? { href: @href } : {}
+  end
+
+  def render_label
+    if @content_block
+      captured = view_context.capture { view_context.instance_exec(&@content_block) }
+      return captured if captured.present?
+    end
+    content.to_s.presence || @label.to_s
+  end
+end

data/registry/app/components/ui/menu/label.html.erb

@@ -0,0 +1 @@
+<%= tag.div(**html_options) do %><%= render_label %><% end %>

data/registry/app/components/ui/menu/label.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+class UI::Menu::Label < UI::Base
+  def initialize(label = nil, inset: false, class: nil, **html_attrs, &block)
+    @label = label
+    @inset = inset
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+    @content_block = block
+  end
+
+  def classes
+    cn(
+      "px-2 py-1.5 text-sm font-semibold text-muted-foreground",
+      { "pl-8" => @inset },
+      @user_class
+    )
+  end
+
+  def html_options
+    opts = @html_attrs.dup
+    opts[:class] = classes
+    opts
+  end
+
+  def render_label
+    if @content_block
+      captured = view_context.capture { view_context.instance_exec(&@content_block) }
+      return captured if captured.present?
+    end
+    content.to_s.presence || @label.to_s
+  end
+end

data/registry/app/components/ui/menu/separator.html.erb

@@ -0,0 +1 @@
+<%= tag.div(**html_options) do %><% end %>

data/registry/app/components/ui/menu/separator.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+class UI::Menu::Separator < UI::Base
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn("-mx-1 h-px bg-muted", @user_class)
+  end
+
+  def html_options
+    opts = @html_attrs.dup
+    opts[:class] = classes
+    opts[:role] = :separator
+    opts[:"aria-orientation"] = :horizontal
+    opts
+  end
+end

data/registry/app/components/ui/menu/trigger.html.erb

@@ -0,0 +1 @@
+<%= render(UI::Button.new(**button_options)) do %><%= content %><% end %>

data/registry/app/components/ui/menu/trigger.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class UI::Menu::Trigger < UI::Base
+  def initialize(variant: :outline, size: :default, class: nil, **html_attrs)
+    @variant = variant
+    @size = size
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def set_menu_context(menu)
+    @menu = menu
+    @id = @html_attrs[:id] || "ui-menu-trigger-#{menu.id}"
+  end
+
+  def button_options
+    @html_attrs.merge(
+      id: @id,
+      class: @user_class,
+      variant: @variant,
+      size: @size,
+      "aria-haspopup" => true,
+      "aria-expanded" => false,
+      "aria-controls" => "ui-menu-content-#{@menu.id}",
+      "data-ui--menu-target" => "trigger",
+      "data-action" => "click->ui--menu#toggle keydown->ui--menu#triggerKeydown"
+    )
+  end
+end

data/registry/app/components/ui/menu.html.erb

@@ -0,0 +1,3 @@
+<%= tag.div(class: root_classes,
+            data: { controller: "ui--menu" }.merge(@html_attrs[:data] || {}),
+            **@html_attrs.except(:data)) do %><%= trigger %><%= menu_content %><% end %>

data/registry/app/components/ui/menu.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class UI::Menu < UI::Base
+  renders_one :trigger, ->(**opts) {
+    UI::Menu::Trigger.new(**opts).tap { |t| t.set_menu_context(self) }
+  }
+  renders_one :menu_content, ->(**opts) {
+    UI::Menu::Content.new(**opts).tap { |c| c.set_menu_context(self) }
+  }
+  alias_method :with_content, :with_menu_content
+
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+    @id = @html_attrs[:id] || "ui-menu-#{SecureRandom.hex(4)}"
+  end
+
+  attr_reader :id
+
+  def root_classes
+    cn("relative inline-block", @user_class)
+  end
+end

data/registry/app/components/ui/native_select.html.erb

@@ -0,0 +1,16 @@
+<%# The chevron is decorative: appearance-none removes the native arrow, so it
+    is drawn back with a positioned icon over the control. %>
+<% control = capture do %>
+  <div class="relative w-full">
+    <% if form_field? %><%= @form.select(@field, normalized_options, { include_blank: prompt.presence, selected: @selected }, form_select_options) %><% else %><%= tag.select(**select_options) do %><% if prompt.present? %><option value=""><%= prompt %></option><% end %><% normalized_options.each do |label, value| %><option value="<%= value %>" <%= "selected" if selected?(value) %>><%= label %></option><% end %><% end %><% end %>
+    <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground"><%= render(UI::Icon.new(name: "chevron-down", size: :sm, aria: { hidden: true })) %></span>
+  </div>
+<% end %>
+<% if render_label? %>
+  <div class="flex flex-col gap-2 w-full">
+    <%= render(label_component) { label_text } %>
+    <%= control %>
+  </div>
+<% else %>
+  <%= control %>
+<% end %>

data/registry/app/components/ui/native_select.rb

@@ -0,0 +1,109 @@
+# frozen_string_literal: true
+
+require "securerandom"
+
+# UI::NativeSelect — the browser's own <select>, styled closed.
+#
+# UI::Select is the styled dropdown. Reach for this one when the platform
+# control is the better fit: on a phone it opens the system picker, which is
+# easier to use with a thumb than any custom list, and it needs no JavaScript.
+# The open list is drawn by the operating system, so it can't be themed.
+#
+# Usage:
+#   <%= render(UI::NativeSelect.new(form: f, field: :team_id, label: "Team",
+#                                   options: @teams.map { [_1.name, _1.id] },
+#                                   prompt: "Choose a team")) %>
+class UI::NativeSelect < UI::Base
+  variants(
+    base: "flex w-full appearance-none rounded-md border border-input bg-background " \
+          "text-foreground " \
+          "#{UI::Base::FOCUS_RING} " \
+          "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted!",
+    variants: {
+      size: {
+        sm:      "h-8 pl-2.5 pr-8 py-1 text-xs",
+        default: "h-9 pl-3 pr-9 py-2 text-sm",
+        lg:      "h-10 pl-4 pr-10 py-2.5 text-base"
+      }
+    },
+    defaults: { size: :default }
+  )
+
+  def initialize(name: nil, options: [], selected: nil, prompt: nil,
+                 label: nil, size: :default,
+                 required: false, error: false, disabled: false,
+                 form: nil, field: nil,
+                 class: nil, **html_attrs)
+    @name       = name
+    @options    = options
+    @selected   = selected
+    @prompt     = prompt
+    @label      = label
+    @size       = size
+    @required   = required
+    @error      = error
+    @disabled   = disabled
+    @form       = form
+    @field      = field
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+    @select_id  = @html_attrs[:id] || (render_label? ? "ui-native-select-#{SecureRandom.hex(4)}" : nil)
+    @html_attrs[:id] = @select_id if @select_id
+  end
+
+  attr_reader :options, :prompt
+
+  def classes
+    cn(variant_classes(size: @size),
+       { "border-destructive focus:ring-destructive" => @error },
+       @user_class)
+  end
+
+  def form_field? = @form.present? && @field.present?
+
+  # Same convention as UI::Input: bound to a form object the attribute name
+  # supplies the label; `label:` overrides, `label: false` opts out.
+  def render_label?
+    return false if @label == false
+
+    @label.present? || form_field?
+  end
+
+  def label_text
+    return nil unless render_label?
+    return @label if @label.is_a?(String) && @label.present?
+    return nil unless form_field?
+
+    object = @form.object
+    if object.respond_to?(:class) && object.class.respond_to?(:human_attribute_name)
+      object.class.human_attribute_name(@field)
+    else
+      @field.to_s.humanize
+    end
+  end
+
+  def label_component
+    UI::Label.new(for: @select_id, required: @required, disabled: @disabled)
+  end
+
+  def select_options
+    opts = @html_attrs.dup
+    opts[:class] = classes
+    opts[:name] = @name if @name
+    opts[:disabled] = true if @disabled
+    opts[:required] = true if @required
+    opts[:"aria-invalid"] = "true" if @error
+    opts
+  end
+
+  # The form builder derives the name and id itself, so they are dropped here
+  # to avoid overriding the scoped name with a bare one.
+  def form_select_options = select_options.except(:name)
+
+  # Accepts [["Label", value], ...] or a plain list of scalars.
+  def normalized_options
+    options.map { |option| option.is_a?(Array) ? option : [ option, option ] }
+  end
+
+  def selected?(value) = @selected.present? && @selected.to_s == value.to_s
+end

data/registry/app/components/ui/pagination.html.erb

@@ -0,0 +1,34 @@
+<%# Laid out by its own width (a container query), so it fits a narrow card on
+    a wide screen as well as a phone. %>
+<div class="@container w-full">
+<div class="flex w-full flex-col items-center gap-2 @lg:flex-row @lg:justify-between">
+  <p class="text-sm text-muted-foreground whitespace-nowrap"><%= summary %></p>
+  <%= tag.nav aria: { label: label }, class: classes, **@html_attrs do %>
+    <ul class="flex flex-row flex-wrap items-center justify-center gap-1">
+      <li>
+        <% if previous_page %>
+          <%= render(UI::Link.new(href: url_for_page(previous_page), button_variant: true, class: "gap-1 px-2.5", aria: { label: t("ui.pagination.previous", default: "Go to previous page") })) do %><%= render(UI::Icon.new(name: "chevron-left", size: :sm)) %><span class="hidden @md:inline"><%= t("ui.pagination.previous_label", default: "Previous") %></span><% end %>
+        <% else %>
+          <span class="inline-flex items-center gap-1 px-2.5 py-2 text-sm text-muted-foreground opacity-50"><%= render(UI::Icon.new(name: "chevron-left", size: :sm)) %><span class="hidden @md:inline"><%= t("ui.pagination.previous_label", default: "Previous") %></span></span>
+        <% end %>
+      </li>
+      <% series.each do |page| %>
+        <li>
+          <% if page == UI::Pagination::GAP %>
+            <span class="flex size-9 items-center justify-center text-muted-foreground" aria-hidden="true">&hellip;<span class="sr-only"><%= t("ui.pagination.more", default: "More pages") %></span></span>
+          <% else %>
+            <%= render(UI::Link.new(href: url_for_page(page), button_variant: true, class: current?(page) ? "size-9 border border-input bg-background" : "size-9", aria: current?(page) ? { current: "page" } : {})) { page.to_s } %>
+          <% end %>
+        </li>
+      <% end %>
+      <li>
+        <% if next_page %>
+          <%= render(UI::Link.new(href: url_for_page(next_page), button_variant: true, class: "gap-1 px-2.5", aria: { label: t("ui.pagination.next", default: "Go to next page") })) do %><span class="hidden @md:inline"><%= t("ui.pagination.next_label", default: "Next") %></span><%= render(UI::Icon.new(name: "chevron-right", size: :sm)) %><% end %>
+        <% else %>
+          <span class="inline-flex items-center gap-1 px-2.5 py-2 text-sm text-muted-foreground opacity-50"><span class="hidden @md:inline"><%= t("ui.pagination.next_label", default: "Next") %></span><%= render(UI::Icon.new(name: "chevron-right", size: :sm)) %></span>
+        <% end %>
+      </li>
+    </ul>
+  <% end %>
+</div>
+</div>

data/registry/app/components/ui/pagination.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+# UI::Pagination — page links for a long list.
+#
+# Follows shadcn's structure (nav > ul > li > a, ghost links with the current
+# page outlined) and takes a Pagy::Offset, so controllers stay conventional.
+#
+# The series is computed here rather than read from Pagy, whose own #series is
+# protected in v43 and whose gap marker differs by version.
+#
+# Usage:
+#   <%= render(UI::Pagination.new(pagy: @pagy) { |page| section_path(@section, page: page) }) %>
+class UI::Pagination < UI::Base
+  GAP = :gap
+
+  # How many pages either side of the current one to show before collapsing.
+  WINDOW = 2
+
+  def initialize(pagy:, label: nil, class: nil, **html_attrs, &url_builder)
+    @pagy = pagy
+    @label = label
+    @url_builder = url_builder
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  attr_reader :pagy
+
+  # One page of results needs no controls.
+  def render? = pagy.present? && pagy.pages > 1
+
+  def classes = cn("mx-auto flex w-full justify-center", @user_class)
+
+  def label = @label || I18n.t("ui.pagination.label", default: "Pagination")
+
+  def url_for_page(page) = @url_builder ? @url_builder.call(page) : "?page=#{page}"
+
+  def current?(page) = page == pagy.page
+
+  # First and last are always shown so the ends stay reachable; the rest is a
+  # window around the current page, with gaps collapsed.
+  def series
+    return (1..pagy.pages).to_a if pagy.pages <= (WINDOW * 2) + 5
+
+    window = ((pagy.page - WINDOW)..(pagy.page + WINDOW)).select { |p| p.between?(1, pagy.pages) }
+    pages = ([ 1 ] + window + [ pagy.pages ]).uniq.sort
+
+    pages.each_with_object([]) do |page, out|
+      out << GAP if out.last.is_a?(Integer) && page > out.last + 1
+      out << page
+    end
+  end
+
+  def previous_page = pagy.previous
+  def next_page = pagy.next
+
+  # "Showing 26–50 of 240" — more use to an office than page numbers alone.
+  def summary
+    I18n.t("ui.pagination.summary", from: pagy.from, to: pagy.to, count: pagy.count,
+           default: "Showing %{from}–%{to} of %{count}")
+  end
+end

data/registry/app/components/ui/password_input.html.erb

@@ -0,0 +1,20 @@
+<%# frozen_string_literal: true %>
+<%# The Stimulus targets live on wrapper spans, not the icons themselves:
+    UI::Icon sets its own `data: { lucide: ... }`, and a second `data:` hash
+    passed through html_attrs replaces it wholesale, leaving a blank icon.
+    Visibility uses an inline style rather than a `hidden` class so no
+    utility-layer ordering can leave both icons showing at once. %>
+<% group = capture do %><%= render(group_component) do |g| %>
+  <% g.with_field(**field_options) %>
+  <% g.with_addon(align: "inline-end") do |addon| %>
+    <% addon.with_icon_button(**toggle_button_options) do %><span class="inline-flex" data-ui--password-visibility-target="iconShow"><%= render(UI::Icon.new(name: "eye", size: :sm)) %></span><span class="inline-flex" style="display: none" data-ui--password-visibility-target="iconHide"><%= render(UI::Icon.new(name: "eye-off", size: :sm)) %></span><% end %>
+  <% end %>
+<% end %><% end %>
+<% if render_label? %>
+  <div class="flex flex-col gap-2 w-full">
+    <%= render(label_component) { label_text } %>
+    <%= group %>
+  </div>
+<% else %>
+  <%= group %>
+<% end %>

data/registry/app/components/ui/password_input.rb

@@ -0,0 +1,94 @@
+# frozen_string_literal: true
+
+require "securerandom"
+
+# UI::PasswordInput — password field with a show/hide toggle.
+#
+# Composes UI::InputGroup so the border, focus ring and disabled styling stay
+# identical to every other grouped input; the toggle is an inline-end addon
+# driven by the `ui--password-visibility` Stimulus controller.
+#
+# Velvet::PasswordInput hardcoded a placeholder (shadowing the caller's) and
+# accepted `rounded:`/`full_width:`/`variant:`/`size:`/`mb:` that nothing read.
+# Those are gone. Its toggle was also dead — no controller was ever registered.
+#
+# Usage:
+#   <%= render(UI::PasswordInput.new(form: f, field: :password, required: true)) %>
+#   <%= render(UI::PasswordInput.new(name: "user[password]")) %>
+class UI::PasswordInput < UI::Base
+  def initialize(form: nil, field: nil, label: nil, required: false,
+                 disabled: false, error: false, class: nil, **html_attrs)
+    @form       = form
+    @field      = field
+    @label      = label
+    # The <input> is wrapped by the group's border, so the label has to sit
+    # outside it; give the field a stable id for the label to point at.
+    @input_id   = html_attrs[:id] || "ui-password-#{SecureRandom.hex(4)}"
+    @required   = required
+    @disabled   = disabled
+    @error      = error
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def group_component
+    UI::InputGroup.new(
+      class: @user_class,
+      data: { controller: "ui--password-visibility" }
+    )
+  end
+
+  # Same convention as UI::Input: bound to a form object the attribute name
+  # supplies the label text; `label:` overrides it, `label: false` opts out.
+  def render_label?
+    return false if @label == false
+
+    @label.present? || form_field?
+  end
+
+  def form_field?
+    @form.present? && @field.present?
+  end
+
+  def label_text
+    return @label if @label.is_a?(String) && @label.present?
+    return nil unless form_field?
+
+    object = @form.object
+    if object.respond_to?(:class) && object.class.respond_to?(:human_attribute_name)
+      object.class.human_attribute_name(@field)
+    else
+      @field.to_s.humanize
+    end
+  end
+
+  def label_component
+    UI::Label.new(for: @input_id, required: @required, disabled: @disabled)
+  end
+
+  def field_options
+    {
+      type: :password,
+      id: @input_id,
+      form: @form,
+      field: @field,
+      label: false,
+      required: @required,
+      disabled: @disabled,
+      error: @error,
+      data: { "ui--password-visibility-target" => "input" },
+      **@html_attrs
+    }
+  end
+
+  def toggle_button_options
+    {
+      disabled: @disabled,
+      aria: { label: I18n.t("ui.password_input.show", default: "Show password"), pressed: "false" },
+      data: {
+        action: "ui--password-visibility#toggle",
+        "ui--password-visibility-target" => "toggle"
+      }
+    }
+  end
+end

data/registry/app/components/ui/popover/content.html.erb

@@ -0,0 +1,12 @@
+<%= tag.div(**html_options) do %>
+  <% if show_close? %>
+    <%= render(UI::Button.new(variant: :ghost, size: :icon_sm, class: "absolute right-1 top-1", data: { action: "click->ui--popover#close" }, aria: { label: "Close" })) do %>
+      <%= render(UI::Icon.new(name: :x, size: :sm)) %>
+    <% end %>
+  <% end %>
+  <% if title? %>
+    <%= tag.h3(id: title_id, class: "font-semibold leading-none tracking-tight mb-2") do %><%= title %><% end %>
+  <% end %>
+  <%= content %>
+  <%= tag.div(class: arrow_classes, data: { "ui--popover-target": "arrow", side: @side }) %>
+<% end %>

data/registry/app/components/ui/popover/content.rb

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+class UI::Popover::Content < UI::Base
+  variants(
+    base: "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none " \
+          "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 " \
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 " \
+          "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+    variants: {
+      side: {
+        top: "",
+        right: "",
+        bottom: "",
+        left: ""
+      },
+      align: {
+        start: "",
+        center: "",
+        end: ""
+      }
+    },
+    defaults: { side: :top, align: :center }
+  )
+
+  renders_one :title
+
+  def initialize(side: :top, align: :center, show_close: false, class: nil, **html_attrs)
+    @side = side
+    @align = align
+    @show_close = show_close
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def set_popover_context(popover)
+    @popover = popover
+    @id = @html_attrs[:id] || "ui-popover-content-#{popover.id}"
+  end
+
+  def classes
+    cn(
+      variant_classes(side: @side, align: @align),
+      @user_class
+    )
+  end
+
+  # A square turned 45°, half inside the popover. Only its two outer edges
+  # get a border, so it reads as the popover's outline stepping out to a
+  # point; the inner half covers the popover's own border. Keyed on
+  # data-side, which the controller updates when the popover flips.
+  def arrow_classes
+    "absolute size-2 rotate-45 bg-popover border-border " \
+      "data-[side=top]:border-r data-[side=top]:border-b " \
+      "data-[side=bottom]:border-l data-[side=bottom]:border-t " \
+      "data-[side=left]:border-t data-[side=left]:border-r " \
+      "data-[side=right]:border-b data-[side=right]:border-l"
+  end
+
+  def html_options
+    opts = @html_attrs.dup
+    opts[:id] = @id
+    opts[:class] = classes
+    opts[:role] = :dialog
+    opts[:"aria-modal"] = false
+    opts[:"aria-labelledby"] = "ui-popover-title-#{@popover.id}" if title?
+    opts[:"data-ui--popover-target"] = "content"
+    opts[:hidden] = true
+    opts[:"data-side"] = @side
+    opts[:"data-align"] = @align
+    opts[:tabindex] = -1
+    opts
+  end
+
+  def show_close?
+    @show_close
+  end
+
+  def title_id
+    "ui-popover-title-#{@popover.id}"
+  end
+
+  attr_reader :side, :align
+end

data/registry/app/components/ui/popover/trigger.html.erb

@@ -0,0 +1 @@
+<%= render(UI::Button.new(**button_options)) do %><%= content %><% end %>

data/registry/app/components/ui/popover/trigger.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class UI::Popover::Trigger < UI::Base
+  def initialize(variant: :outline, size: :default, class: nil, **html_attrs)
+    @variant = variant
+    @size = size
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def set_popover_context(popover)
+    @popover = popover
+    @id = @html_attrs[:id] || "ui-popover-trigger-#{popover.id}"
+  end
+
+  def button_options
+    @html_attrs.merge(
+      id: @id,
+      class: @user_class,
+      variant: @variant || :default,
+      size: @size,
+      "aria-haspopup" => true,
+      "aria-expanded" => false,
+      "aria-controls" => "ui-popover-content-#{@popover.id}",
+      "data-ui--popover-target" => "trigger",
+      "data-action" => "click->ui--popover#toggle"
+    )
+  end
+end

data/registry/app/components/ui/popover.html.erb

@@ -0,0 +1,3 @@
+<%= tag.span(class: root_classes,
+            data: { controller: "ui--popover" }.merge(@html_attrs[:data] || {}),
+            **@html_attrs.except(:data)) do %><%= trigger %><%= popover_content %><% end %>