phlex_kit 0.2.0

data/app/components/phlex_kit/data_table/data_table_sort_head.rb

@@ -0,0 +1,82 @@
+module PhlexKit
+  # Sortable <th>: a link cycling asc → desc → unsorted, preserving the rest of
+  # the query string (page resets). See data_table.rb.
+  class DataTableSortHead < BaseComponent
+    def initialize(column_key:, label:, sort: nil, direction: nil, sort_param: "sort", direction_param: "direction", page_param: "page", path: "", query: {}, **attrs)
+      @column_key = column_key
+      @label = label
+      @sort = sort
+      @direction = direction
+      @sort_param = sort_param
+      @direction_param = direction_param
+      @page_param = page_param
+      @path = path
+      @query = query.to_h.transform_keys(&:to_s)
+      @attrs = attrs
+    end
+
+    def view_template
+      render TableHead.new(**mix({ class: "pk-data-table-sort-head" }, @attrs)) do
+        a(href: sort_href, class: "pk-data-table-sort-link") do
+          plain @label
+          sort_icon
+        end
+      end
+    end
+
+    private
+
+    def current_direction
+      (@sort.to_s == @column_key.to_s) ? @direction : nil
+    end
+
+    def next_params
+      next_dir = { nil => "asc", "asc" => "desc", "desc" => nil }[current_direction]
+      base = @query.except(@sort_param, @direction_param, @page_param)
+      next_dir ? base.merge(@sort_param => @column_key.to_s, @direction_param => next_dir) : base
+    end
+
+    def sort_href
+      qs = build_query(next_params)
+      qs.empty? ? @path : "#{@path}?#{qs}"
+    end
+
+    def build_query(hash)
+      hash.flat_map { |k, v|
+        Array(v).map { |val| "#{CGI.escape(k.to_s)}=#{CGI.escape(val.to_s)}" }
+      }.join("&")
+    end
+
+    def sort_icon
+      icon_class = [ "pk-data-table-sort-icon", (current_direction ? nil : "unsorted") ].compact.join(" ")
+      case current_direction
+      when "asc"
+        sort_svg(icon_class) { |s| s.polyline(points: "18 15 12 9 6 15") }
+      when "desc"
+        sort_svg(icon_class) { |s| s.polyline(points: "6 9 12 15 18 9") }
+      else
+        sort_svg(icon_class) do |s|
+          s.polyline(points: "8 15 12 19 16 15")
+          s.polyline(points: "8 9 12 5 16 9")
+        end
+      end
+    end
+
+    def sort_svg(icon_class, &)
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "12",
+        height: "12",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        class: icon_class,
+        "aria-hidden": "true",
+        &
+      )
+    end
+  end
+end

data/app/components/phlex_kit/data_table/data_table_toolbar.rb

@@ -0,0 +1,13 @@
+module PhlexKit
+  # Row above the table for search / bulk actions / column toggle.
+  # See data_table.rb.
+  class DataTableToolbar < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({ class: "pk-data-table-toolbar" }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/date_picker/date_picker.css

@@ -0,0 +1,28 @@
+/* Co-located with date_picker.rb — UI::DatePicker (an Input + Popover +
+   Calendar composition; those parts bring their own styles). Geometry from
+   ruby_ui (260px column, grid field with gap, full-width trigger). Theme tokens
+   come from the global stylesheet. */
+.pk-date-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 260px;
+}
+.pk-date-picker-trigger { width: 100%; }
+.pk-date-picker-field {
+  display: grid;
+  width: 100%;
+  max-width: 24rem;
+  align-items: center;
+  gap: .375rem;
+}
+.pk-date-picker-label {
+  font-size: .875rem;
+  font-weight: 500;
+  line-height: 1.1;
+}
+/* The panel hugs the calendar instead of stretching to the popover minimum. */
+.pk-date-picker .pk-popover-content {
+  width: max-content;
+  padding: 0;
+}

data/app/components/phlex_kit/date_picker/date_picker.rb

@@ -0,0 +1,71 @@
+module PhlexKit
+  # Date picker, ported from ruby_ui's RubyUI::DatePicker: a labelled
+  # PhlexKit::Input inside a PhlexKit::Popover whose panel holds a
+  # PhlexKit::Calendar. The input carries the phlex-kit--calendar-input
+  # controller and the calendar's outlet points at its id, so picking a day
+  # writes the formatted date into the field. Upstream's popover_options
+  # (hover trigger via @floating-ui) are gone — the kit popover is click-only,
+  # CSS-positioned. Tailwind → vanilla `.pk-date-picker*` (date_picker.css).
+  class DatePicker < BaseComponent
+    def initialize(
+      id: nil,
+      name: nil,
+      label: "Select a date",
+      value: nil,
+      placeholder: "Select a date",
+      selected_date: value,
+      date_format: "yyyy-MM-dd",
+      input_attrs: {},
+      calendar_attrs: {},
+      trigger_attrs: {},
+      content_attrs: {},
+      **attrs
+    )
+      @id = id || "date-picker-#{SecureRandom.hex(4)}"
+      @name = name
+      @label = label
+      @value = value || selected_date&.to_s
+      @placeholder = placeholder
+      @selected_date = selected_date
+      @date_format = date_format
+      @input_attrs = input_attrs
+      @calendar_attrs = calendar_attrs
+      @trigger_attrs = trigger_attrs
+      @content_attrs = content_attrs
+      @attrs = attrs
+    end
+
+    def view_template
+      div(**mix({ class: "pk-date-picker" }, @attrs)) do
+        render Popover.new do
+          render PopoverTrigger.new(**trigger_attrs) do
+            div(class: "pk-date-picker-field") do
+              label(class: "pk-date-picker-label", for: @id) { @label } if @label
+              render Input.new(**input_attrs)
+            end
+          end
+          render PopoverContent.new(**@content_attrs) do
+            render Calendar.new(input_id: "##{@id}", selected_date: @selected_date, date_format: @date_format, **@calendar_attrs)
+          end
+        end
+      end
+    end
+
+    private
+
+    def trigger_attrs
+      mix({ class: "pk-date-picker-trigger" }, @trigger_attrs)
+    end
+
+    def input_attrs
+      mix({
+        type: :text,
+        placeholder: @placeholder,
+        id: @id,
+        name: @name,
+        value: @value,
+        data: { controller: "phlex-kit--calendar-input" }
+      }.compact, @input_attrs)
+    end
+  end
+end

data/app/components/phlex_kit/dialog/dialog.css

@@ -0,0 +1,32 @@
+/* Co-located with dialog.rb. Native <dialog> centered by the UA; we style the box
+   + ::backdrop. Theme tokens from the global stylesheet. */
+.pk-dialog-trigger { display: inline-block; }
+.pk-dialog {
+  position: fixed; z-index: 50; width: 100%; max-width: 32rem; max-height: 100vh;
+  overflow-y: auto; gap: 1rem; border: 1px solid var(--pk-border);
+  border-radius: var(--pk-radius); background: var(--pk-surface); color: var(--pk-text);
+  padding: 1.5rem; box-shadow: 0 10px 30px rgb(0 0 0 / .35);
+}
+.pk-dialog[open] { display: flex; flex-direction: column; }
+.pk-dialog::backdrop { background: rgb(0 0 0 / .5); backdrop-filter: blur(2px); }
+.pk-dialog.xs { max-width: 24rem; }
+.pk-dialog.sm { max-width: 28rem; }
+.pk-dialog.lg { max-width: 42rem; }
+.pk-dialog.xl { max-width: 56rem; }
+.pk-dialog.full { max-width: 100%; }
+.pk-dialog-header { display: flex; flex-direction: column; gap: .375rem; text-align: center; }
+.pk-dialog-footer { display: flex; flex-direction: column-reverse; gap: .5rem; }
+.pk-dialog-title { font-size: 1.125rem; font-weight: 600; line-height: 1; letter-spacing: -.01em; }
+.pk-dialog-description { font-size: .875rem; color: var(--pk-muted); }
+.pk-dialog-middle { padding-block: 1rem; }
+.pk-overlay-close {
+  position: absolute; inset-inline-end: 1rem; top: 1rem; border: 0; background: none;
+  cursor: pointer; border-radius: calc(var(--pk-radius) - 4px); opacity: .7; color: var(--pk-text);
+  transition: opacity .15s ease;
+}
+.pk-overlay-close:hover { opacity: 1; }
+@media (min-width: 640px) {
+  .pk-dialog-header { text-align: left; }
+  .pk-dialog-footer { flex-direction: row; justify-content: flex-end; }
+  .pk-dialog-footer > * + * { margin-inline-start: .5rem; }
+}

data/app/components/phlex_kit/dialog/dialog.rb

@@ -0,0 +1,14 @@
+module PhlexKit
+  # Modal dialog built on the native <dialog> element (showModal). Ported from
+  # ruby_ui's RubyUI::Dialog. Compose Dialog > (DialogTrigger + DialogContent >
+  # DialogHeader/Title/Description/Middle/Footer). phlex-kit--dialog.
+  class Dialog < BaseComponent
+    def initialize(open: false, **attrs)
+      @open = open
+      @attrs = attrs
+    end
+    def view_template(&)
+      div(**mix({ data: { controller: "phlex-kit--dialog", phlex_kit__dialog_open_value: @open } }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/dialog/dialog_content.rb

@@ -0,0 +1,21 @@
+module PhlexKit
+  class DialogContent < BaseComponent
+    SIZES = { xs: "xs", sm: "sm", md: nil, lg: "lg", xl: "xl", full: "full" }.freeze
+    def initialize(size: :md, **attrs)
+      @size = size.to_sym
+      @attrs = attrs
+    end
+    def view_template(&block)
+      cls = ["pk-dialog", SIZES.fetch(@size)].compact.join(" ")
+      dialog(**mix({ class: cls, data: { phlex_kit__dialog_target: "dialog", action: "click->phlex-kit--dialog#backdropClick" } }, @attrs)) do
+        yield
+        button(type: "button", class: "pk-overlay-close", data: { action: "click->phlex-kit--dialog#dismiss" }) do
+          svg(width: "15", height: "15", viewbox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg") do |s|
+          s.path(fill_rule: "evenodd", clip_rule: "evenodd", fill: "currentColor", d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z")
+        end
+          span(class: "pk-sr-only") { "Close" }
+        end
+      end
+    end
+  end
+end

data/app/components/phlex_kit/dialog/dialog_description.rb

@@ -0,0 +1,6 @@
+module PhlexKit
+  class DialogDescription < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = p(**mix({ class: "pk-dialog-description" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/dialog/dialog_footer.rb

@@ -0,0 +1,6 @@
+module PhlexKit
+  class DialogFooter < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-dialog-footer" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/dialog/dialog_header.rb

@@ -0,0 +1,6 @@
+module PhlexKit
+  class DialogHeader < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-dialog-header" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/dialog/dialog_middle.rb

@@ -0,0 +1,6 @@
+module PhlexKit
+  class DialogMiddle < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-dialog-middle" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/dialog/dialog_title.rb

@@ -0,0 +1,6 @@
+module PhlexKit
+  class DialogTitle < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = h3(**mix({ class: "pk-dialog-title" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/dialog/dialog_trigger.rb

@@ -0,0 +1,8 @@
+module PhlexKit
+  class DialogTrigger < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-dialog-trigger", data: { action: "click->phlex-kit--dialog#open" } }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/drawer/drawer.css

@@ -0,0 +1,54 @@
+/* Co-located with drawer.rb — UI::Drawer, shadcn parity (vaul replaced by the
+   kit's sheet clone machinery): dimmed overlay, bottom sheet with grab handle
+   sliding up. */
+.pk-drawer-trigger, .pk-drawer-close { display: inline-block; }
+.pk-drawer-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background: rgb(0 0 0 / .5);
+}
+.pk-drawer {
+  position: fixed;
+  inset-inline: 0;
+  bottom: 0;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  max-height: 85vh;
+  border: 1px solid var(--pk-border);
+  border-bottom: 0;
+  border-top-left-radius: calc(var(--pk-radius) + 4px);
+  border-top-right-radius: calc(var(--pk-radius) + 4px);
+  background: var(--pk-surface);
+  color: var(--pk-text);
+  animation: pk-drawer-up .3s ease;
+}
+@keyframes pk-drawer-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
+.pk-drawer-handle {
+  flex: none;
+  width: 100px;
+  height: .5rem;
+  margin: .75rem auto 0;
+  border-radius: 9999px;
+  background: var(--pk-surface-2);
+}
+.pk-drawer-header {
+  display: flex;
+  flex-direction: column;
+  gap: .375rem;
+  padding: 1rem;
+  text-align: center;
+}
+.pk-drawer-title { margin: 0; font-size: 1.125rem; font-weight: 600; }
+.pk-drawer-description { margin: 0; font-size: .875rem; color: var(--pk-muted); }
+.pk-drawer-footer {
+  display: flex;
+  flex-direction: column;
+  gap: .5rem;
+  margin-top: auto;
+  padding: 1rem;
+}
+@media (min-width: 640px) {
+  .pk-drawer-header { text-align: left; }
+}

data/app/components/phlex_kit/drawer/drawer.rb

@@ -0,0 +1,18 @@
+module PhlexKit
+  # Bottom drawer, ported from shadcn/ui's Drawer. The vaul dependency is
+  # replaced by reusing the kit's sheet machinery — the phlex-kit--sheet
+  # controller clones DrawerContent's <template> into <body> — with drawer
+  # chrome (bottom sheet, grab handle, slide-up animation). Compose Drawer >
+  # DrawerTrigger + DrawerContent(DrawerHeader(DrawerTitle + DrawerDescription)
+  # + body + DrawerFooter [+ DrawerClose]). `.pk-drawer*` (drawer.css).
+  class Drawer < BaseComponent
+    def initialize(open: false, **attrs)
+      @open = open
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({ data: { controller: "phlex-kit--sheet", phlex_kit__sheet_open_value: @open } }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/drawer/drawer_close.rb

@@ -0,0 +1,9 @@
+module PhlexKit
+  # Closes the drawer from inside the cloned panel (wrap a Button). See drawer.rb.
+  class DrawerClose < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-drawer-close", data: { action: "click->phlex-kit--sheet-content#close" } }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/drawer/drawer_content.rb

@@ -0,0 +1,21 @@
+module PhlexKit
+  # <template> holding the drawer overlay + bottom panel (cloned into <body>
+  # on open, like SheetContent). See drawer.rb.
+  class DrawerContent < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      template(data: { phlex_kit__sheet_target: "content" }) do
+        div(data: { controller: "phlex-kit--sheet-content" }) do
+          div(class: "pk-drawer-overlay", data: { action: "click->phlex-kit--sheet-content#close" })
+          div(**mix({ class: "pk-drawer", role: "dialog", aria: { modal: "true" } }, @attrs)) do
+            div(class: "pk-drawer-handle", aria: { hidden: "true" })
+            yield if block
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/phlex_kit/drawer/drawer_description.rb

@@ -0,0 +1,7 @@
+module PhlexKit
+  # See drawer.rb.
+  class DrawerDescription < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = p(**mix({ class: "pk-drawer-description" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/drawer/drawer_footer.rb

@@ -0,0 +1,7 @@
+module PhlexKit
+  # See drawer.rb.
+  class DrawerFooter < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-drawer-footer" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/drawer/drawer_header.rb

@@ -0,0 +1,7 @@
+module PhlexKit
+  # See drawer.rb.
+  class DrawerHeader < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-drawer-header" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/drawer/drawer_title.rb

@@ -0,0 +1,7 @@
+module PhlexKit
+  # See drawer.rb.
+  class DrawerTitle < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = h2(**mix({ class: "pk-drawer-title" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/drawer/drawer_trigger.rb

@@ -0,0 +1,9 @@
+module PhlexKit
+  # Opens the Drawer (wrap a Button). See drawer.rb.
+  class DrawerTrigger < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-drawer-trigger", data: { action: "click->phlex-kit--sheet#open" } }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/dropdown_menu/dropdown_menu.css

@@ -0,0 +1,38 @@
+/* Co-located with dropdown_menu.rb — UI::DropdownMenu (+ Trigger / Content / Item
+   / Label / Separator). ruby_ui's structure + Stimulus kept; @floating-ui dropped
+   in favour of CSS positioning (panel below the trigger, or above with
+   `side: :top`). Tailwind → vanilla. Theme tokens come from the global stylesheet. */
+.pk-dropdown-menu { position: relative; display: inline-block; }
+.pk-dropdown-menu-trigger { display: inline-block; }
+
+.pk-dropdown-menu-content { position: absolute; top: 100%; left: 0; z-index: 50; margin-top: 4px; }
+.pk-dropdown-menu-content-up { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 4px; }
+.pk-dropdown-menu-content.hidden { display: none; }
+.pk-dropdown-menu-viewport {
+  min-width: 10rem;
+  border-radius: calc(var(--pk-radius) - 2px);
+  border: 1px solid var(--pk-border);
+  background: var(--pk-surface);
+  color: var(--pk-text);
+  padding: .25rem;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
+}
+
+.pk-dropdown-menu-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  cursor: pointer;
+  user-select: none;
+  border-radius: calc(var(--pk-radius) - 4px);
+  padding: .375rem .5rem;
+  font-size: .875rem;
+  color: var(--pk-text);
+  outline: none;
+}
+.pk-dropdown-menu-item:hover,
+.pk-dropdown-menu-item:focus,
+.pk-dropdown-menu-item[aria-selected="true"] { background: var(--pk-accent); text-decoration: none; }
+
+.pk-dropdown-menu-label { margin: 0; padding: .375rem .5rem; font-size: .875rem; font-weight: 600; }
+.pk-dropdown-menu-separator { height: 1px; margin: .25rem -.25rem; background: var(--pk-border); }

data/app/components/phlex_kit/dropdown_menu/dropdown_menu.rb

@@ -0,0 +1,22 @@
+module PhlexKit
+  # Dropdown menu, ported from ruby_ui's RubyUI::DropdownMenu. Keeps the Stimulus
+  # controller (toggle, click-outside, keyboard nav) but — like PhlexKit::Select — drops
+  # the @floating-ui/dom dependency and positions the panel with CSS. Compose
+  # Trigger + Content (+ Item / Label / Separator). Tailwind → vanilla
+  # `.pk-dropdown-menu*` (dropdown_menu.css).
+  class DropdownMenu < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix({
+        class: "pk-dropdown-menu",
+        data: {
+          controller: "phlex-kit--dropdown-menu",
+          action: "click@window->phlex-kit--dropdown-menu#onClickOutside"
+        }
+      }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/dropdown_menu/dropdown_menu_content.rb

@@ -0,0 +1,23 @@
+module PhlexKit
+  # The dropdown panel. Hidden until the trigger toggles it. `side:` is :bottom
+  # (default, opens below) or :top (opens above — for triggers near the bottom of
+  # the viewport, e.g. the sidebar footer). See dropdown_menu.rb.
+  class DropdownMenuContent < BaseComponent
+    def initialize(side: :bottom, **attrs)
+      @side = side.to_sym
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(class: wrapper_classes, data: { phlex_kit__dropdown_menu_target: "content" }) do
+        div(**mix({ class: "pk-dropdown-menu-viewport" }, @attrs), &block)
+      end
+    end
+
+    private
+
+    def wrapper_classes
+      [ "pk-dropdown-menu-content", ("pk-dropdown-menu-content-up" if @side == :top), "hidden" ].compact.join(" ")
+    end
+  end
+end

data/app/components/phlex_kit/dropdown_menu/dropdown_menu_item.rb

@@ -0,0 +1,22 @@
+module PhlexKit
+  # A menu row in a PhlexKit::DropdownMenuContent. `as: :a` (default, pass `href:`) or
+  # `:div` (e.g. to wrap a button_to). Closes the menu on click. See dropdown_menu.rb.
+  class DropdownMenuItem < BaseComponent
+    def initialize(as: :a, href: "#", **attrs)
+      @as = as.to_sym
+      @href = href
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      base = {
+        role: "menuitem",
+        tabindex: "-1",
+        class: "pk-dropdown-menu-item",
+        data: { phlex_kit__dropdown_menu_target: "menuItem", action: "click->phlex-kit--dropdown-menu#close" }
+      }
+      base[:href] = @href unless @as == :div
+      send(@as, **mix(base, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/dropdown_menu/dropdown_menu_label.rb

@@ -0,0 +1,12 @@
+module PhlexKit
+  # A non-interactive heading inside a PhlexKit::DropdownMenuContent. See dropdown_menu.rb.
+  class DropdownMenuLabel < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      h3(**mix({ class: "pk-dropdown-menu-label" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/dropdown_menu/dropdown_menu_separator.rb

@@ -0,0 +1,12 @@
+module PhlexKit
+  # A horizontal divider between groups of PhlexKit::DropdownMenuItems. See dropdown_menu.rb.
+  class DropdownMenuSeparator < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template
+      div(**mix({ role: "separator", "aria-orientation": "horizontal", class: "pk-dropdown-menu-separator" }, @attrs))
+    end
+  end
+end

data/app/components/phlex_kit/dropdown_menu/dropdown_menu_trigger.rb

@@ -0,0 +1,15 @@
+module PhlexKit
+  # The control that opens a PhlexKit::DropdownMenu (wrap a PhlexKit::Button). See dropdown_menu.rb.
+  class DropdownMenuTrigger < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix({
+        class: "pk-dropdown-menu-trigger",
+        data: { phlex_kit__dropdown_menu_target: "trigger", action: "click->phlex-kit--dropdown-menu#toggle" }
+      }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/empty/empty.css

@@ -0,0 +1,25 @@
+/* Co-located with empty.rb. Theme tokens from the global stylesheet. */
+.pk-empty {
+  display: flex; width: 100%; min-width: 0; flex: 1; flex-direction: column;
+  align-items: center; justify-content: center; gap: 1rem;
+  border: 1px dashed var(--pk-border); border-radius: 1.5rem;
+  padding: 3rem; text-align: center;
+}
+.pk-empty-header { display: flex; max-width: 24rem; flex-direction: column; align-items: center; gap: .5rem; }
+.pk-empty-media {
+  margin-bottom: .5rem; display: flex; flex: none;
+  align-items: center; justify-content: center;
+}
+.pk-empty-media.icon {
+  height: 2.5rem; width: 2.5rem; border-radius: .75rem;
+  background: var(--pk-surface-2); color: var(--pk-text);
+}
+.pk-empty-media.icon > svg:not([class*="size-"]) { width: 1.25rem; height: 1.25rem; }
+.pk-empty-title { font-size: 1.125rem; font-weight: 500; letter-spacing: -.01em; }
+.pk-empty-description { font-size: .875rem; line-height: 1.625; color: var(--pk-muted); }
+.pk-empty-description a { text-decoration: underline; text-underline-offset: 4px; }
+.pk-empty-description a:hover { color: var(--pk-brand); }
+.pk-empty-content {
+  display: flex; width: 100%; max-width: 24rem; min-width: 0;
+  flex-direction: column; align-items: center; gap: 1rem; font-size: .875rem;
+}

data/app/components/phlex_kit/empty/empty.rb

@@ -0,0 +1,6 @@
+module PhlexKit
+  class Empty < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-empty" }, @attrs), &)
+  end
+end