phlex_kit 0.2.1 → 0.2.2

data/app/components/phlex_kit/combobox/combobox_item_indicator.rb

@@ -7,21 +7,7 @@ module PhlexKit
     end
 
     def view_template
-      svg(**mix({
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "24",
-        height: "24",
-        viewbox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        "stroke-width": "2",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round",
-        class: "pk-combobox-item-indicator",
-        "aria-hidden": "true"
-      }, @attrs)) do |s|
-        s.path(d: "M20 6 9 17l-5-5")
-      end
+      render Icon.new(:check, size: 24, **mix({ class: "pk-combobox-item-indicator" }, @attrs))
     end
   end
 end

data/app/components/phlex_kit/combobox/combobox_search_input.rb

@@ -30,20 +30,7 @@ module PhlexKit
     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-combobox-search-icon",
-        "aria-hidden": "true"
-      ) do |s|
-        s.circle(cx: "11", cy: "11", r: "8")
-        s.path(d: "m21 21-4.3-4.3")
-      end
+      render Icon.new(:search, size: nil, class: "pk-combobox-search-icon")
     end
   end
 end

data/app/components/phlex_kit/combobox/combobox_trigger.rb

@@ -29,20 +29,7 @@ module PhlexKit
     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-combobox-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
+      render Icon.new(:chevrons_up_down, size: nil, class: "pk-combobox-trigger-icon")
     end
   end
 end

data/app/components/phlex_kit/command/command.css

@@ -12,8 +12,8 @@
   inset: 0;
   z-index: 50;
   pointer-events: auto;
-  background: color-mix(in oklab, var(--pk-bg) 80%, transparent);
-  backdrop-filter: blur(4px);
+  background: rgb(0 0 0 / .5);
+  backdrop-filter: blur(8px);
 }
 
 /* Centered palette panel. */

data/app/components/phlex_kit/command/command_input.rb

@@ -38,19 +38,7 @@ module PhlexKit
     private
 
     def search_icon
-      svg(
-        xmlns: "http://www.w3.org/2000/svg",
-        viewbox: "0 0 20 20",
-        fill: "currentColor",
-        class: "pk-command-input-icon",
-        "aria-hidden": "true"
-      ) do |s|
-        s.path(
-          fill_rule: "evenodd",
-          d: "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z",
-          clip_rule: "evenodd"
-        )
-      end
+      render Icon.new(:search, size: nil, class: "pk-command-input-icon")
     end
   end
 end

data/app/components/phlex_kit/context_menu/context_menu_item.rb

@@ -12,9 +12,7 @@ module PhlexKit
                 data: { action: "click->phlex-kit--context-menu#close", phlex_kit__context_menu_target: "menuItem", disabled: @disabled } }, @attrs)) do
         if @checked
           span(class: "pk-context-menu-check") 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.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z")
-            end
+            render Icon.new(:check, size: 15)
           end
         end
         yield

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

@@ -43,19 +43,7 @@ module PhlexKit
     private
 
     def chevron_icon
-      svg(
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "16",
-        height: "16",
-        viewbox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        "stroke-width": "2",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round",
-        class: "pk-data-table-column-toggle-icon",
-        "aria-hidden": "true"
-      ) { |s| s.polyline(points: "6 9 12 15 18 9") }
+      render Icon.new(:chevron_down, class: "pk-data-table-column-toggle-icon")
     end
   end
 end

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

@@ -23,18 +23,7 @@ module PhlexKit
     private
 
     def icon
-      svg(
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "16",
-        height: "16",
-        viewbox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        "stroke-width": "2",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round",
-        "aria-hidden": "true"
-      ) { |s| s.polyline(points: "9 18 15 12 9 6") }
+      render Icon.new(:chevron_right)
     end
   end
 end

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

@@ -49,34 +49,8 @@ module PhlexKit
 
     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",
-        &
-      )
+      glyph = { "asc" => :chevron_up, "desc" => :chevron_down }.fetch(current_direction, :chevrons_up_down)
+      render Icon.new(glyph, size: 12, class: icon_class)
     end
   end
 end

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

@@ -8,14 +8,20 @@
   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::backdrop { background: rgb(0 0 0 / .5); backdrop-filter: blur(8px); }
 .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-footer {
+  display: flex; flex-direction: column-reverse; gap: .5rem;
+  margin: 0 calc(-1 * var(--pk-dialog-spacing)) calc(-1 * var(--pk-dialog-spacing));
+  padding: var(--pk-dialog-spacing);
+  border-top: 1px solid var(--pk-border);
+  background: color-mix(in oklab, var(--pk-surface-2) 50%, transparent);
+}
 .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; }

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

@@ -10,9 +10,7 @@ module PhlexKit
       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
+          render Icon.new(:x, size: 15)
           span(class: "pk-sr-only") { "Close" }
         end
       end

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

@@ -7,6 +7,7 @@
   inset: 0;
   z-index: 50;
   background: rgb(0 0 0 / .5);
+  backdrop-filter: blur(8px);
 }
 .pk-drawer {
   position: fixed;

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

@@ -21,6 +21,7 @@
 .pk-dropdown-menu-item {
   display: flex;
   align-items: center;
+  gap: .5rem;
   width: 100%;
   cursor: pointer;
   user-select: none;
@@ -36,3 +37,66 @@
 
 .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); }
+
+.pk-dropdown-menu-item > svg { flex: none; width: 1rem; height: 1rem; color: var(--pk-muted); }
+.pk-dropdown-menu-group { display: contents; }
+
+/* Destructive rows (irreversible actions). */
+.pk-dropdown-menu-item.destructive { color: var(--pk-red); }
+.pk-dropdown-menu-item.destructive > svg { color: var(--pk-red); }
+.pk-dropdown-menu-item.destructive:hover,
+.pk-dropdown-menu-item.destructive:focus {
+  background: color-mix(in oklab, var(--pk-red) 12%, transparent);
+  color: var(--pk-red);
+}
+
+/* Keyboard hint, pushed to the row's end. */
+.pk-dropdown-menu-shortcut {
+  margin-left: auto;
+  font-size: .75rem;
+  letter-spacing: .1em;
+  color: var(--pk-muted);
+}
+
+/* Checkbox / radio rows: real (hidden) inputs; indicator shows via :has. */
+.pk-dropdown-menu-item-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+.pk-dropdown-menu-checkbox-item,
+.pk-dropdown-menu-radio-item { position: relative; }
+.pk-dropdown-menu-item-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 1rem;
+  height: 1rem;
+  visibility: hidden;
+}
+.pk-dropdown-menu-item-indicator svg { width: .875rem; height: .875rem; }
+.pk-dropdown-menu-radio-item .pk-dropdown-menu-item-indicator svg { width: .5rem; height: .5rem; }
+.pk-dropdown-menu-item:has(.pk-dropdown-menu-item-input:checked) .pk-dropdown-menu-item-indicator { visibility: visible; }
+.pk-dropdown-menu-item:has(.pk-dropdown-menu-item-input:focus-visible) {
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+
+/* Submenu: trigger row + side panel, revealed on hover/focus — pure CSS. */
+.pk-dropdown-menu-sub { position: relative; }
+.pk-dropdown-menu-sub-chevron { margin-left: auto; width: 1rem; height: 1rem; }
+.pk-dropdown-menu-sub-content {
+  position: absolute;
+  top: -0.25rem;
+  left: 100%;
+  z-index: 60;
+  min-width: 10rem;
+  padding-left: .25rem; /* hover bridge over the gap */
+  display: none;
+}
+.pk-dropdown-menu-sub:hover > .pk-dropdown-menu-sub-content,
+.pk-dropdown-menu-sub:focus-within > .pk-dropdown-menu-sub-content { display: block; }
+.pk-dropdown-menu-sub:hover > .pk-dropdown-menu-sub-trigger,
+.pk-dropdown-menu-sub:focus-within > .pk-dropdown-menu-sub-trigger { background: var(--pk-accent); }

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

@@ -0,0 +1,31 @@
+module PhlexKit
+  # Toggleable menu row, ported from shadcn/ui's DropdownMenuCheckboxItem: a
+  # <label> around a real (hidden) checkbox — clicking toggles it natively and
+  # the ✓ shows via CSS, without closing the menu (matching Radix). Pass
+  # `name:`/`value:` to submit the state with a form. See dropdown_menu.rb.
+  class DropdownMenuCheckboxItem < BaseComponent
+    def initialize(checked: false, name: nil, value: "1", **attrs)
+      @checked = checked
+      @name = name
+      @value = value
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      label(**mix({
+        class: "pk-dropdown-menu-item pk-dropdown-menu-checkbox-item",
+        role: "menuitemcheckbox"
+      }, @attrs)) do
+        input(type: :checkbox, class: "pk-dropdown-menu-item-input", name: @name, value: @value, checked: @checked)
+        span(class: "pk-dropdown-menu-item-indicator", aria: { hidden: "true" }) { check_icon }
+        yield if block
+      end
+    end
+
+    private
+
+    def check_icon
+      render Icon.new(:check, size: nil)
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+module PhlexKit
+  # Grouping wrapper for related items (with an optional leading
+  # DropdownMenuLabel). Ported from shadcn/ui's DropdownMenuGroup.
+  # See dropdown_menu.rb.
+  class DropdownMenuGroup < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-dropdown-menu-group", role: "group" }, @attrs), &)
+    end
+  end
+end

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

@@ -2,9 +2,12 @@ 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)
+    VARIANTS = { default: nil, destructive: "destructive" }.freeze
+
+    def initialize(as: :a, href: "#", variant: :default, **attrs)
       @as = as.to_sym
       @href = href
+      @variant = variant.to_sym
       @attrs = attrs
     end
 
@@ -12,7 +15,7 @@ module PhlexKit
       base = {
         role: "menuitem",
         tabindex: "-1",
-        class: "pk-dropdown-menu-item",
+        class: [ "pk-dropdown-menu-item", VARIANTS.fetch(@variant) ].compact.join(" "),
         data: { phlex_kit__dropdown_menu_target: "menuItem", action: "click->phlex-kit--dropdown-menu#close" }
       }
       base[:href] = @href unless @as == :div

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

@@ -0,0 +1,10 @@
+module PhlexKit
+  # Exclusive-choice group of DropdownMenuRadioItems (share the same `name:`).
+  # Ported from shadcn/ui's DropdownMenuRadioGroup. See dropdown_menu.rb.
+  class DropdownMenuRadioGroup < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-dropdown-menu-group", role: "radiogroup" }, @attrs), &)
+    end
+  end
+end

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

@@ -0,0 +1,31 @@
+module PhlexKit
+  # One choice in a DropdownMenuRadioGroup — a <label> around a real (hidden)
+  # radio; the ● shows via CSS and picking doesn't close the menu (matching
+  # Radix). See dropdown_menu.rb.
+  class DropdownMenuRadioItem < BaseComponent
+    def initialize(name:, value:, checked: false, **attrs)
+      @name = name
+      @value = value
+      @checked = checked
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      label(**mix({
+        class: "pk-dropdown-menu-item pk-dropdown-menu-radio-item",
+        role: "menuitemradio"
+      }, @attrs)) do
+        input(type: :radio, class: "pk-dropdown-menu-item-input", name: @name, value: @value, checked: @checked)
+        span(class: "pk-dropdown-menu-item-indicator", aria: { hidden: "true" }) do
+          # Deliberately NOT a PhlexKit::Icon: a filled selection dot is
+          # geometry, not icon-library vocabulary — it stays identical across
+          # icon_library settings (shadcn fills its Circle icon via CSS too).
+          svg(xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 24 24", fill: "currentColor") do |s|
+            s.circle(cx: "12", cy: "12", r: "5")
+          end
+        end
+        yield if block
+      end
+    end
+  end
+end

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

@@ -0,0 +1,10 @@
+module PhlexKit
+  # Right-aligned keyboard hint in a menu row. Ported from shadcn/ui's
+  # DropdownMenuShortcut. See dropdown_menu.rb.
+  class DropdownMenuShortcut < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      span(**mix({ class: "pk-dropdown-menu-shortcut" }, @attrs), &)
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+module PhlexKit
+  # Nested submenu wrapper: SubTrigger row + SubContent panel, revealed on
+  # hover/focus with pure CSS (no extra controller). Ported from shadcn/ui's
+  # DropdownMenuSub. See dropdown_menu.rb.
+  class DropdownMenuSub < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-dropdown-menu-sub" }, @attrs), &)
+    end
+  end
+end

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

@@ -0,0 +1,12 @@
+module PhlexKit
+  # The nested panel of a DropdownMenuSub — opens beside the trigger.
+  # See dropdown_menu.rb.
+  class DropdownMenuSubContent < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-dropdown-menu-sub-content", role: "menu" }, @attrs)) do
+        div(class: "pk-dropdown-menu-viewport", &)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,18 @@
+module PhlexKit
+  # The row that opens a DropdownMenuSub (trailing ▸ chevron). See
+  # dropdown_menu.rb.
+  class DropdownMenuSubTrigger < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&block)
+      div(**mix({
+        class: "pk-dropdown-menu-item pk-dropdown-menu-sub-trigger",
+        role: "menuitem",
+        tabindex: "0",
+        aria: { haspopup: "menu" }
+      }, @attrs)) do
+        block&.call
+        render Icon.new(:chevron_right, size: nil, class: "pk-dropdown-menu-sub-chevron")
+      end
+    end
+  end
+end

data/app/components/phlex_kit/icon/icon.rb

@@ -0,0 +1,51 @@
+module PhlexKit
+  # A glyph from the configured icon library (ui.shadcn.com/create's "Icon
+  # Library" option): :lucide (default), :tabler, :phosphor, or :remix — set
+  # kit-wide via PhlexKit.config.icon_library or per-instance with `library:`.
+  # Names are PhlexKit's canonical semantic set (PhlexKit::Icons.names);
+  # unknown names/libraries fail loud (KeyError).
+  #
+  # `size:` emits width/height attributes (default 16, shadcn's size-4); pass
+  # `size: nil` to defer sizing to CSS (existing `.pk-x svg { … }` rules).
+  # Stroke libraries (lucide/tabler) render stroke="currentColor"; fill
+  # libraries (phosphor/remix) render fill="currentColor" — both follow text
+  # color. Attrs pass through via mix.
+  class Icon < BaseComponent
+    def initialize(name, library: nil, size: 16, **attrs)
+      @name = name
+      @library = library
+      @size = size
+      @attrs = attrs
+    end
+
+    def view_template
+      icon = Icons.fetch(@name, library: @library || PhlexKit.config.icon_library)
+      svg(**mix(base_attrs(icon), @attrs)) do |s|
+        icon[:elements].each { |tag, attrs| s.public_send(tag, **attrs) }
+      end
+    end
+
+    private
+
+    def base_attrs(icon)
+      base = {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: icon[:view_box],
+        class: "pk-icon",
+        "aria-hidden": "true"
+      }
+      base[:width] = base[:height] = @size.to_s if @size
+      if icon[:mode] == :stroke
+        base.merge(
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": icon[:stroke_width].to_s,
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        )
+      else
+        base.merge(fill: "currentColor")
+      end
+    end
+  end
+end

data/app/components/phlex_kit/marker/marker.css

@@ -0,0 +1,25 @@
+/* Co-located with marker.rb — UI::Marker, shadcn parity: muted inline status,
+   bordered system-note row, or labeled separator in a conversation. */
+.pk-marker {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  min-height: 1.25rem;
+  color: var(--pk-muted);
+  font-size: .875rem;
+}
+.pk-marker-icon { display: inline-flex; flex: none; }
+.pk-marker-icon svg { width: 1rem; height: 1rem; }
+.pk-marker-content { min-width: 0; }
+.pk-marker.border {
+  border: 1px solid var(--pk-border);
+  border-radius: var(--pk-radius);
+  padding: .5rem .625rem;
+}
+.pk-marker.separator { justify-content: center; }
+.pk-marker.separator::before, .pk-marker.separator::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--pk-border);
+}

data/app/components/phlex_kit/marker/marker.rb

@@ -0,0 +1,18 @@
+module PhlexKit
+  # Conversation annotation, ported from shadcn/ui's Marker (an AI-chat-era
+  # addition): an inline status line, bordered system-note row, or labeled
+  # separator. Compose Marker(variant:) > [MarkerIcon +] MarkerContent.
+  # `.pk-marker*` (marker.css).
+  class Marker < BaseComponent
+    VARIANTS = { default: nil, border: "border", separator: "separator" }.freeze
+
+    def initialize(variant: :default, **attrs)
+      @variant = variant.to_sym
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({ class: [ "pk-marker", VARIANTS.fetch(@variant) ].compact.join(" ") }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/marker/marker_content.rb

@@ -0,0 +1,7 @@
+module PhlexKit
+  # Text of a Marker. See marker.rb.
+  class MarkerContent < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = span(**mix({ class: "pk-marker-content" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/marker/marker_icon.rb

@@ -0,0 +1,7 @@
+module PhlexKit
+  # 16px muted icon slot of a Marker. See marker.rb.
+  class MarkerIcon < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = span(**mix({ class: "pk-marker-icon" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/native_select/native_select_icon.rb

@@ -17,16 +17,7 @@ module PhlexKit
     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",
-        "aria-hidden": "true"
-      ) { |s| s.path(d: "m6 9 6 6 6-6") }
+      render Icon.new(:chevron_down, size: nil)
     end
   end
 end

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

@@ -17,11 +17,7 @@ module PhlexKit
     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
+      render Icon.new(:chevron_down, size: nil, class: "pk-navigation-menu-chevron")
     end
   end
 end

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

@@ -4,11 +4,7 @@ module PhlexKit
     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
+          render Icon.new(:ellipsis, size: nil)
           span(class: "pk-sr-only") { "More pages" }
         end
       end