phlex_kit 0.2.0

data/app/components/phlex_kit/navigation_menu/navigation_menu_trigger.rb

@@ -0,0 +1,27 @@
+module PhlexKit
+  # See navigation_menu.rb.
+  class NavigationMenuTrigger < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&block)
+      button(**mix({
+        type: :button,
+        class: "pk-navigation-menu-trigger",
+        aria: { haspopup: "menu", expanded: "false" },
+        data: { action: "click->phlex-kit--menubar#toggle mouseenter->phlex-kit--menubar#switch" }
+      }, @attrs)) do
+        block&.call
+        chevron
+      end
+    end
+
+    private
+
+    def chevron
+      svg(xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 24 24", fill: "none",
+          stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round",
+          "stroke-linejoin": "round", class: "pk-navigation-menu-chevron", "aria-hidden": "true") do |s|
+        s.path(d: "m6 9 6 6 6-6")
+      end
+    end
+  end
+end

data/app/components/phlex_kit/pagination/pagination.css

@@ -0,0 +1,5 @@
+/* Co-located with pagination.rb. Items reuse .pk-button. Tokens global. */
+.pk-pagination { margin-inline: auto; display: flex; width: 100%; justify-content: center; }
+.pk-pagination-content { display: flex; flex-direction: row; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
+.pk-pagination-ellipsis { display: flex; height: 2.25rem; width: 2.25rem; align-items: center; justify-content: center; }
+.pk-pagination-ellipsis > svg { width: 1rem; height: 1rem; }

data/app/components/phlex_kit/pagination/pagination.rb

@@ -0,0 +1,10 @@
+module PhlexKit
+  # Page navigation. Ported from ruby_ui's RubyUI::Pagination. Compose Pagination >
+  # PaginationContent > PaginationItem(href:, active:) / PaginationEllipsis.
+  class Pagination < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      nav(**mix({ class: "pk-pagination", role: "navigation", aria: { label: "pagination" } }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/pagination/pagination_content.rb

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

data/app/components/phlex_kit/pagination/pagination_ellipsis.rb

@@ -0,0 +1,17 @@
+module PhlexKit
+  class PaginationEllipsis < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template
+      li do
+        span(**mix({ class: "pk-pagination-ellipsis", aria: { hidden: true } }, @attrs)) do
+          svg(xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_linejoin: "round") do |s|
+            s.circle(cx: "12", cy: "12", r: "1")
+            s.circle(cx: "19", cy: "12", r: "1")
+            s.circle(cx: "5", cy: "12", r: "1")
+          end
+          span(class: "pk-sr-only") { "More pages" }
+        end
+      end
+    end
+  end
+end

data/app/components/phlex_kit/pagination/pagination_item.rb

@@ -0,0 +1,14 @@
+module PhlexKit
+  class PaginationItem < BaseComponent
+    def initialize(href: "#", active: false, **attrs)
+      @href = href
+      @active = active
+      @attrs = attrs
+    end
+    def view_template(&block)
+      li do
+        a(**mix({ href: @href, class: "pk-button #{@active ? "outline" : "ghost"}", aria: { current: (@active ? "page" : nil) } }, @attrs), &block)
+      end
+    end
+  end
+end

data/app/components/phlex_kit/popover/popover.css

@@ -0,0 +1,9 @@
+/* Co-located with popover.rb. CSS-positioned panel. Tokens from the global stylesheet. */
+.pk-popover { position: relative; display: inline-block; }
+.pk-popover-trigger { display: inline-block; }
+.pk-popover-content {
+  position: absolute; z-index: 50; top: calc(100% + .5rem); left: 0;
+  min-width: 12rem; border: 1px solid var(--pk-border); border-radius: calc(var(--pk-radius) - 2px);
+  background: var(--pk-surface); color: var(--pk-text); padding: .75rem;
+  box-shadow: 0 8px 24px rgb(0 0 0 / .3); outline: none;
+}

data/app/components/phlex_kit/popover/popover.rb

@@ -0,0 +1,11 @@
+module PhlexKit
+  # Click-triggered floating panel, positioned with CSS (no @floating-ui). Ported
+  # from ruby_ui's RubyUI::Popover. Compose Popover > (PopoverTrigger +
+  # PopoverContent). phlex-kit--popover.
+  class Popover < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-popover", data: { controller: "phlex-kit--popover" } }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/popover/popover_content.rb

@@ -0,0 +1,8 @@
+module PhlexKit
+  class PopoverContent < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-popover-content pk-hidden", data: { phlex_kit__popover_target: "content", state: "closed" } }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/popover/popover_trigger.rb

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

data/app/components/phlex_kit/progress/progress.css

@@ -0,0 +1,17 @@
+/* Co-located with progress.rb — UI::Progress. ruby_ui's Tailwind (h-2 rounded-full
+   bg-primary/20, indicator bg-primary translated by value) as vanilla CSS on the
+   palette tokens. Theme tokens come from the global stylesheet. */
+.pk-progress {
+  position: relative;
+  height: .5rem;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 999px;
+  background: color-mix(in oklab, var(--pk-brand) 20%, transparent);
+}
+.pk-progress-indicator {
+  height: 100%;
+  width: 100%;
+  background: var(--pk-brand);
+  transition: transform .3s ease;
+}

data/app/components/phlex_kit/progress/progress.rb

@@ -0,0 +1,25 @@
+module PhlexKit
+  # Progress bar, ported from ruby_ui's RubyUI::Progress. `value:` (0–100,
+  # clamped) drives an inner indicator translated into view. Presentational, no
+  # JS; width comes from a caller `class:`/`style:`. Tailwind → vanilla
+  # `.pk-progress*` (progress.css).
+  class Progress < BaseComponent
+    def initialize(value: 0, **attrs)
+      @value = value.to_f.clamp(0.0, 100.0)
+      @attrs = attrs
+    end
+
+    def view_template
+      div(**mix({
+        role: "progressbar",
+        "aria-valuenow": @value,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuetext": "#{@value}%",
+        class: "pk-progress"
+      }, @attrs)) do
+        div(class: "pk-progress-indicator", style: "transform: translateX(-#{100 - @value}%)")
+      end
+    end
+  end
+end

data/app/components/phlex_kit/radio_button/radio_button.css

@@ -0,0 +1,9 @@
+/* Co-located with radio_button.rb. Theme tokens from the global stylesheet. */
+.pk-radio {
+  height: 1rem;
+  width: 1rem;
+  flex: none;
+  border-radius: 9999px;
+  accent-color: var(--pk-brand);
+}
+.pk-radio:disabled { cursor: not-allowed; opacity: .5; }

data/app/components/phlex_kit/radio_button/radio_button.rb

@@ -0,0 +1,19 @@
+module PhlexKit
+  # Single radio input. Ported from ruby_ui's RubyUI::RadioButton. Registers as
+  # a phlex-kit--form-field input target, so it live-validates inside a
+  # PhlexKit::FormField (Stimulus ignores the wiring otherwise).
+  class RadioButton < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+
+    def view_template
+      input(**mix({
+        type: "radio",
+        class: "pk-radio",
+        data: {
+          phlex_kit__form_field_target: "input",
+          action: "change->phlex-kit--form-field#onInput invalid->phlex-kit--form-field#onInvalid"
+        }
+      }, @attrs))
+    end
+  end
+end

data/app/components/phlex_kit/radio_group/radio_group.css

@@ -0,0 +1,3 @@
+/* Co-located with radio_group.rb — UI::RadioGroup, shadcn parity (grid gap-3). */
+.pk-radio-group { display: grid; gap: .75rem; }
+.pk-radio-group .pk-label { gap: .75rem; }

data/app/components/phlex_kit/radio_group/radio_group.rb

@@ -0,0 +1,14 @@
+module PhlexKit
+  # Radio list wrapper, ported from shadcn/ui's RadioGroup: a role=radiogroup
+  # grid of (RadioButton + Label) rows sharing a `name`. The kit's RadioButton
+  # is the item. `.pk-radio-group` (radio_group.css).
+  class RadioGroup < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({ class: "pk-radio-group", role: "radiogroup" }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/resizable/resizable.css

@@ -0,0 +1,23 @@
+/* Co-located with resizable_panel_group.rb — UI::Resizable, shadcn parity
+   (react-resizable-panels replaced by the phlex-kit--resizable controller). */
+.pk-resizable-group { display: flex; width: 100%; height: 100%; }
+.pk-resizable-group.vertical { flex-direction: column; }
+.pk-resizable-panel { flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden; }
+.pk-resizable-handle {
+  position: relative;
+  flex: none;
+  background: var(--pk-border);
+}
+.pk-resizable-group.horizontal > .pk-resizable-handle { width: 1px; cursor: col-resize; }
+.pk-resizable-group.vertical > .pk-resizable-handle { height: 1px; cursor: row-resize; }
+/* fat invisible hit area */
+.pk-resizable-group.horizontal > .pk-resizable-handle::after {
+  content: ""; position: absolute; inset: 0 -4px;
+}
+.pk-resizable-group.vertical > .pk-resizable-handle::after {
+  content: ""; position: absolute; inset: -4px 0;
+}
+.pk-resizable-handle:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}

data/app/components/phlex_kit/resizable/resizable_handle.rb

@@ -0,0 +1,21 @@
+module PhlexKit
+  # Drag handle between two ResizablePanels. See resizable_panel_group.rb.
+  class ResizableHandle < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template
+      div(**mix({
+        class: "pk-resizable-handle",
+        role: "separator",
+        tabindex: "0",
+        aria: { orientation: "vertical" },
+        data: {
+          phlex_kit__resizable_target: "handle",
+          action: "pointerdown->phlex-kit--resizable#start"
+        }
+      }, @attrs))
+    end
+  end
+end

data/app/components/phlex_kit/resizable/resizable_panel.rb

@@ -0,0 +1,19 @@
+module PhlexKit
+  # One pane of a ResizablePanelGroup. `default_size:` is a percentage.
+  # See resizable_panel_group.rb.
+  class ResizablePanel < BaseComponent
+    def initialize(default_size: nil, **attrs)
+      @default_size = default_size
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      style = @default_size ? "flex-grow: #{@default_size}" : nil
+      div(**mix({
+        class: "pk-resizable-panel",
+        style: style,
+        data: { phlex_kit__resizable_target: "panel" }
+      }.compact, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/resizable/resizable_panel_group.rb

@@ -0,0 +1,26 @@
+module PhlexKit
+  # Resizable split panels, ported from shadcn/ui's Resizable. The
+  # react-resizable-panels dependency is replaced by the phlex-kit--resizable
+  # controller: dragging a ResizableHandle rebalances the flex-grow of its
+  # neighbouring ResizablePanels. Compose ResizablePanelGroup(direction:) >
+  # ResizablePanel + ResizableHandle + ResizablePanel…
+  # `.pk-resizable*` (resizable.css).
+  class ResizablePanelGroup < BaseComponent
+    DIRECTIONS = { horizontal: "horizontal", vertical: "vertical" }.freeze
+
+    def initialize(direction: :horizontal, **attrs)
+      @direction = DIRECTIONS.fetch(direction.to_sym)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({
+        class: "pk-resizable-group #{@direction}",
+        data: {
+          controller: "phlex-kit--resizable",
+          phlex_kit__resizable_direction_value: @direction
+        }
+      }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/scroll_area/scroll_area.css

@@ -0,0 +1,21 @@
+/* Co-located with scroll_area.rb — UI::ScrollArea: native scrolling with
+   shadcn-look thin themed scrollbars (no Radix/JS). */
+.pk-scroll-area {
+  position: relative;
+  overflow: auto;
+  border-radius: inherit;
+  scrollbar-width: thin;
+  scrollbar-color: var(--pk-border) transparent;
+}
+.pk-scroll-area:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+.pk-scroll-area::-webkit-scrollbar { width: .625rem; height: .625rem; }
+.pk-scroll-area::-webkit-scrollbar-thumb {
+  background: var(--pk-border);
+  border-radius: 9999px;
+  border: 3px solid transparent;
+  background-clip: content-box;
+}
+.pk-scroll-area::-webkit-scrollbar-track { background: transparent; }

data/app/components/phlex_kit/scroll_area/scroll_area.rb

@@ -0,0 +1,15 @@
+module PhlexKit
+  # Styled scroll container, ported from shadcn/ui's ScrollArea. Radix's custom
+  # scrollbars are replaced with native thin scrollbars themed via CSS — no JS.
+  # Constrain it with a height/width from the caller. `.pk-scroll-area`
+  # (scroll_area.css).
+  class ScrollArea < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({ class: "pk-scroll-area", tabindex: "0" }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/select/select.css

@@ -0,0 +1,80 @@
+/* Co-located with select.rb — UI::Select (the custom JS dropdown; NativeSelect
+   is the native one). ruby_ui's structure + Stimulus kept; Tailwind replaced with
+   our vanilla CSS on the palette tokens. Geometry from ruby_ui (h-9 trigger,
+   rounded-md, p-1 viewport, px-2 py-1.5 items, accent on hover/selected). The
+   panel is positioned with plain CSS (top:100%) since we dropped @floating-ui.
+   Theme tokens come from the global stylesheet. */
+.pk-select { position: relative; width: 100%; }
+
+/* Hidden input that carries the form value. */
+.pk-select-input { display: none; }
+
+/* Closed-state trigger button (mirrors .pk-input geometry). */
+.pk-select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 2rem;
+  white-space: nowrap;
+  border-radius: var(--pk-radius);
+  border: 1px solid var(--pk-input);
+  background: transparent;
+  color: var(--pk-text);
+  padding: .25rem .75rem;
+  font: inherit;
+  font-size: .875rem;
+    cursor: pointer;
+  transition: border-color .15s ease, box-shadow .15s ease;
+}
+.pk-select-trigger:focus-visible {
+  outline: none;
+  border-color: var(--pk-brand);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+.pk-select-trigger:disabled { cursor: not-allowed; opacity: .5; }
+.pk-select-trigger-icon { flex: none; width: 1rem; height: 1rem; margin-left: .5rem; opacity: .5; }
+.pk-select-value { overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
+
+/* Dropdown panel — opens directly below the trigger (no floating-ui). */
+.pk-select-content {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 50;
+  width: 100%;
+  margin-top: .25rem;
+}
+.pk-select-content.hidden { display: none; }
+.pk-select-viewport {
+  max-height: 24rem;
+  overflow: auto;
+  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-select-label { margin: 0; padding: .375rem .5rem; font-size: .875rem; font-weight: 600; }
+
+.pk-select-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  border-radius: calc(var(--pk-radius) - 4px);
+  padding: .375rem .5rem;
+  font-size: .875rem;
+  color: var(--pk-text);
+  outline: none;
+  transition: background-color .12s ease, color .12s ease;
+}
+.pk-select-item:hover,
+.pk-select-item:focus,
+.pk-select-item[aria-current="true"],
+.pk-select-item[aria-selected="true"] { background: var(--pk-accent); }
+.pk-select-item-check { visibility: hidden; flex: none; width: 1rem; height: 1rem; margin-right: .5rem; }
+.pk-select-item[aria-selected="true"] .pk-select-item-check { visibility: visible; }

data/app/components/phlex_kit/select/select.rb

@@ -0,0 +1,43 @@
+module PhlexKit
+  # Custom dropdown select, ported from ruby_ui's RubyUI::Select — the styled
+  # popover (Image #2), NOT the native <select> (that's PhlexKit::NativeSelect). Unlike
+  # the rest of the kit this component IS JS-driven: it keeps ruby_ui's Stimulus
+  # wiring (`phlex-kit--select` / `phlex-kit--select-item`, in
+  # app/javascript/controllers/ruby_ui/), since the open/close, selection, and
+  # keyboard nav are the point. The one change from upstream: the controller drops
+  # the `@floating-ui/dom` dependency and positions the panel with plain CSS
+  # (opens directly below the trigger). Tailwind → vanilla `.pk-select-*` (select.css).
+  #
+  # Multi-part. The hidden SelectInput carries the form value/name; SelectTrigger +
+  # SelectValue are the closed-state button; SelectContent > SelectGroup >
+  # (SelectLabel +) SelectItem are the panel:
+  #
+  #   render PhlexKit::Select.new do
+  #     render PhlexKit::SelectInput.new(name: "user[role]", id: "user_role", value: @user.role)
+  #     render PhlexKit::SelectTrigger.new do
+  #       render PhlexKit::SelectValue.new(placeholder: "Select a role") { @user.role&.capitalize }
+  #     end
+  #     render PhlexKit::SelectContent.new do
+  #       render PhlexKit::SelectGroup.new do
+  #         render PhlexKit::SelectItem.new(value: "admin", "aria-selected": "true") { "Admin" }
+  #       end
+  #     end
+  #   end
+  class Select < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix({
+        class: "pk-select",
+        data: {
+          controller: "phlex-kit--select",
+          phlex_kit__select_open_value: "false",
+          action: "click@window->phlex-kit--select#clickOutside",
+          phlex_kit__select_phlex_kit__select_item_outlet: ".pk-select-item"
+        }
+      }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/select/select_content.rb

@@ -0,0 +1,24 @@
+module PhlexKit
+  # The dropdown panel for PhlexKit::Select — hidden until the trigger opens it (the
+  # controller toggles the `hidden` class). Outer div is the positioned/targeted
+  # layer; the inner `.pk-select-viewport` is the bordered, scrollable box.
+  # Holds SelectGroup / SelectLabel / SelectItem children. See select.rb.
+  class SelectContent < BaseComponent
+    def initialize(**attrs)
+      @id = "pk-select-content-#{SecureRandom.hex(4)}"
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix({
+        id: @id,
+        role: "listbox",
+        tabindex: "-1",
+        class: "pk-select-content hidden",
+        data: { phlex_kit__select_target: "content" }
+      }, @attrs)) do
+        div(class: "pk-select-viewport", &block)
+      end
+    end
+  end
+end

data/app/components/phlex_kit/select/select_group.rb

@@ -0,0 +1,13 @@
+module PhlexKit
+  # Groups a set of SelectItems (optionally under a SelectLabel) inside a
+  # PhlexKit::SelectContent. Plain pass-through wrapper. See select.rb.
+  class SelectGroup < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix({ class: "pk-select-group" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/select/select_input.rb

@@ -0,0 +1,23 @@
+module PhlexKit
+  # The hidden input that actually carries PhlexKit::Select's value into the form — the
+  # Stimulus controller writes the chosen item's value here and dispatches a
+  # `change` (which also feeds phlex-kit--form-field validation when the select
+  # sits inside a PhlexKit::FormField). Pass `name:`/`id:`/`value:` like any
+  # input; it's display:none. See select.rb.
+  class SelectInput < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template
+      input(**mix({
+        class: "pk-select-input",
+        data: {
+          phlex_kit__select_target: "input",
+          phlex_kit__form_field_target: "input",
+          action: "change->phlex-kit--form-field#onChange invalid->phlex-kit--form-field#onInvalid"
+        }
+      }, @attrs))
+    end
+  end
+end

data/app/components/phlex_kit/select/select_item.rb

@@ -0,0 +1,52 @@
+module PhlexKit
+  # A selectable row in a PhlexKit::Select panel. Carries its `value:` in data-value; on
+  # click/enter the controller copies it into the hidden SelectInput, updates the
+  # SelectValue text, and flips `aria-selected` (which reveals the checkmark).
+  # Pass `selected: true` to mark the initially-chosen item server-side — it's a
+  # named kwarg (not an `"aria-selected":` attr) because `mix` would *merge* a
+  # repeated attribute rather than override it.
+  # See select.rb.
+  class SelectItem < BaseComponent
+    def initialize(value: nil, selected: false, **attrs)
+      @value = value
+      @selected = selected
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix({
+        role: "option",
+        tabindex: "0",
+        class: "pk-select-item",
+        "aria-selected": (@selected ? "true" : "false"),
+        data: {
+          value: @value,
+          controller: "phlex-kit--select-item",
+          action: "click->phlex-kit--select#selectItem keydown.enter->phlex-kit--select#selectItem " \
+                  "keydown.down->phlex-kit--select#handleKeyDown keydown.up->phlex-kit--select#handleKeyUp " \
+                  "keydown.esc->phlex-kit--select#handleEsc",
+          phlex_kit__select_target: "item"
+        }
+      }, @attrs)) do
+        check_icon
+        block&.call
+      end
+    end
+
+    private
+
+    def check_icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        class: "pk-select-item-check",
+        "aria-hidden": "true"
+      ) { |s| s.path(d: "M20 6 9 17l-5-5") }
+    end
+  end
+end

data/app/components/phlex_kit/select/select_label.rb

@@ -0,0 +1,13 @@
+module PhlexKit
+  # A heading labelling a SelectGroup inside PhlexKit::SelectContent (e.g. "Fruits").
+  # See select.rb.
+  class SelectLabel < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      h3(**mix({ class: "pk-select-label" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/select/select_trigger.rb

@@ -0,0 +1,42 @@
+module PhlexKit
+  # The closed-state button for PhlexKit::Select — shows the current SelectValue and a
+  # up/down chevron, and opens the panel on click (`phlex-kit--select#onClick`).
+  # See select.rb.
+  class SelectTrigger < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      button(**mix({
+        type: :button,
+        role: "combobox",
+        class: "pk-select-trigger",
+        aria: { expanded: "false", haspopup: "listbox", autocomplete: "none" },
+        data: { action: "phlex-kit--select#onClick", phlex_kit__select_target: "trigger" }
+      }, @attrs)) do
+        block&.call
+        icon
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        class: "pk-select-trigger-icon",
+        "aria-hidden": "true"
+      ) do |s|
+        s.path(d: "m7 15 5 5 5-5")
+        s.path(d: "m7 9 5-5 5 5")
+      end
+    end
+  end
+end