phlex_kit 0.4.0 → 0.5.0

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

@@ -1,25 +1,45 @@
-/* Co-located with marker.rb — UI::Marker, shadcn parity: muted inline status,
-   bordered system-note row, or labeled separator in a conversation. */
+/* Co-located with marker.rb — PhlexKit::Marker, shadcn parity: muted inline
+   status, bordered system-note row (bottom border only, like theirs), or
+   labeled separator. Interactive markers (href: / as: :button) underline and
+   brighten on hover. */
 .pk-marker {
   display: flex;
   align-items: center;
   gap: .5rem;
-  min-height: 1.25rem;
+  width: 100%;
+  min-height: 1rem;
   color: var(--pk-muted);
   font-size: .875rem;
+  text-align: left;
 }
-.pk-marker-icon { display: inline-flex; flex: none; }
-.pk-marker-icon svg { width: 1rem; height: 1rem; }
-.pk-marker-content { min-width: 0; }
+a.pk-marker, button.pk-marker {
+  cursor: pointer;
+  color: var(--pk-muted);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  transition: color .15s ease;
+  border: 0;
+  background: none;
+  padding: 0;
+  font: inherit;
+  font-size: .875rem;
+}
+a.pk-marker:hover, button.pk-marker:hover { color: var(--pk-text); }
+.pk-marker svg:not([class*="size-"]) { width: 1rem; height: 1rem; }
+.pk-marker-icon { display: inline-flex; flex: none; width: 1rem; height: 1rem; }
+.pk-marker-content { min-width: 0; overflow-wrap: break-word; }
+.pk-marker-content a { text-decoration: underline; text-underline-offset: 3px; color: inherit; }
+.pk-marker-content a:hover { color: var(--pk-text); }
 .pk-marker.border {
-  border: 1px solid var(--pk-border);
-  border-radius: var(--pk-radius);
-  padding: .5rem .625rem;
+  border-bottom: 1px solid var(--pk-border);
+  padding-bottom: .5rem;
 }
 .pk-marker.separator { justify-content: center; }
+.pk-marker.separator .pk-marker-content { flex: none; text-align: center; }
 .pk-marker.separator::before, .pk-marker.separator::after {
   content: "";
   flex: 1;
+  min-width: 0;
   height: 1px;
   background: var(--pk-border);
 }

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

@@ -2,17 +2,27 @@ 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).
+  # `href:` renders an <a>, `as: :button` a <button> (their asChild) — both
+  # underline and brighten on hover. `.pk-marker*` (marker.css).
   class Marker < BaseComponent
     VARIANTS = { default: nil, border: "border", separator: "separator" }.freeze
 
-    def initialize(variant: :default, **attrs)
+    def initialize(variant: :default, href: nil, as: :div, **attrs)
       @variant = variant.to_sym
+      @href = href
+      @as = as.to_sym
       @attrs = attrs
     end
 
     def view_template(&)
-      div(**mix({ class: [ "pk-marker", VARIANTS.fetch(@variant) ].compact.join(" ") }, @attrs), &)
+      classes = [ "pk-marker", VARIANTS.fetch(@variant) ].compact.join(" ")
+      if @href
+        a(**mix({ class: classes, href: @href }, @attrs), &)
+      elsif @as == :button
+        button(**mix({ class: classes, type: "button" }, @attrs), &)
+      else
+        div(**mix({ class: classes }, @attrs), &)
+      end
     end
   end
 end

data/app/components/phlex_kit/menubar/menubar.css

@@ -1,13 +1,17 @@
-/* Co-located with menubar.rb — UI::Menubar, shadcn parity (Radix replaced by
-   the phlex-kit--menubar controller). NavigationMenu shares the item look. */
+/* Co-located with menubar.rb — PhlexKit::Menubar, shadcn parity (Radix
+   replaced by the phlex-kit--menubar controller). Matched to nova: h-8 bar
+   with 3px padding, tight triggers, ring-bordered popover panels, the full
+   menu-item family (destructive, inset, checkbox/radio with hidden inputs,
+   pure-CSS hover submenus). NavigationMenu shares the item look. */
 .pk-menubar {
   display: inline-flex;
   align-items: center;
-  gap: .25rem;
+  height: 2rem;
+  gap: .125rem;
   border: 1px solid var(--pk-border);
   border-radius: var(--pk-radius);
   background: var(--pk-surface);
-  padding: .25rem;
+  padding: 3px;
 }
 .pk-menubar-menu { position: relative; }
 .pk-menubar-trigger {
@@ -17,7 +21,7 @@
   border-radius: calc(var(--pk-radius) - 4px);
   background: transparent;
   color: var(--pk-text);
-  padding: .25rem .5rem;
+  padding: 2px .375rem;
   font: inherit;
   font-size: .875rem;
   font-weight: 500;
@@ -25,27 +29,36 @@
   outline: none;
 }
 .pk-menubar-trigger:hover,
-.pk-menubar-trigger[aria-expanded="true"] { background: var(--pk-accent); }
+.pk-menubar-trigger[aria-expanded="true"] { background: var(--pk-surface-2); }
 .pk-menubar-content {
   position: absolute;
   top: 100%;
   left: 0;
   z-index: 50;
-  min-width: 12rem;
+  min-width: 9rem;
   margin-top: .5rem;
-  border: 1px solid var(--pk-border);
+  border: 1px solid color-mix(in oklab, var(--pk-text) 10%, transparent);
   border-radius: var(--pk-radius);
   background: var(--pk-surface);
   color: var(--pk-text);
   padding: .25rem;
   box-shadow: 0 8px 24px rgb(0 0 0 / .3);
 }
+/* Hover bridge over the trigger→panel gap. */
+.pk-menubar-content::before {
+  content: "";
+  position: absolute;
+  top: calc(-.5rem - 1px);
+  left: 0;
+  right: 0;
+  height: calc(.5rem + 1px);
+}
 .pk-menubar-item {
   display: flex;
   align-items: center;
-  gap: .5rem;
-  border-radius: calc(var(--pk-radius) - 4px);
-  padding: .375rem .5rem;
+  gap: .375rem;
+  border-radius: calc(var(--pk-radius) - 2px);
+  padding: .25rem .375rem;
   font-size: .875rem;
   color: var(--pk-text);
   text-decoration: none;
@@ -53,14 +66,72 @@
   user-select: none;
   outline: none;
 }
+.pk-menubar-item svg:not([class*="size-"]) { width: 1rem; height: 1rem; }
 .pk-menubar-item:hover, .pk-menubar-item:focus { background: var(--pk-accent); }
+.pk-menubar-item[data-disabled="true"] { pointer-events: none; opacity: .5; }
+.pk-menubar-item.inset { padding-left: 1.75rem; }
+.pk-menubar-item.destructive { color: var(--pk-red); }
+.pk-menubar-item.destructive > svg { color: var(--pk-red); }
+.pk-menubar-item.destructive:hover,
+.pk-menubar-item.destructive:focus {
+  background: color-mix(in oklab, var(--pk-red) 12%, transparent);
+  color: var(--pk-red);
+}
 .pk-menubar-shortcut { margin-left: auto; font-size: .75rem; color: var(--pk-muted); letter-spacing: .1em; }
+.pk-menubar-label { padding: .25rem .375rem; font-size: .875rem; font-weight: 500; }
+.pk-menubar-label.inset { padding-left: 1.75rem; }
 .pk-menubar-separator { height: 1px; margin: .25rem -0.25rem; background: var(--pk-border); }
-.pk-menubar-content::before {
-  content: "";
+.pk-menubar-group { display: contents; }
+
+/* Checkbox / radio rows: real (hidden) inputs; indicator shows via :has. */
+.pk-menubar-item-input {
   position: absolute;
-  top: calc(-.5rem - 1px);
-  left: 0;
-  right: 0;
-  height: calc(.5rem + 1px);
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+.pk-menubar-checkbox-item,
+.pk-menubar-radio-item { position: relative; padding-left: 1.75rem; }
+.pk-menubar-item-indicator {
+  position: absolute;
+  left: .375rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  visibility: hidden;
+}
+.pk-menubar-item-indicator svg { width: .875rem; height: .875rem; }
+.pk-menubar-radio-item .pk-menubar-item-indicator svg { width: .5rem; height: .5rem; }
+.pk-menubar-item:has(.pk-menubar-item-input:checked) .pk-menubar-item-indicator { visibility: visible; }
+.pk-menubar-item:has(.pk-menubar-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-menubar-sub { position: relative; }
+.pk-menubar-sub-chevron { margin-left: auto; width: 1rem; height: 1rem; }
+.pk-menubar-sub-content {
+  position: absolute;
+  top: -0.25rem;
+  left: 100%;
+  z-index: 60;
+  min-width: 9rem;
+  padding-left: .25rem; /* hover bridge over the gap */
+  display: none;
+}
+.pk-menubar-sub-viewport {
+  min-width: 9rem;
+  border-radius: var(--pk-radius);
+  border: 1px solid color-mix(in oklab, var(--pk-text) 10%, transparent);
+  background: var(--pk-surface);
+  color: var(--pk-text);
+  padding: .25rem;
+  box-shadow: 0 8px 24px rgb(0 0 0 / .3);
 }
+.pk-menubar-sub:hover > .pk-menubar-sub-content,
+.pk-menubar-sub:focus-within > .pk-menubar-sub-content { display: block; }
+.pk-menubar-sub:hover > .pk-menubar-sub-trigger,
+.pk-menubar-sub:focus-within > .pk-menubar-sub-trigger { background: var(--pk-accent); }

data/app/components/phlex_kit/menubar/menubar_checkbox_item.rb

@@ -0,0 +1,26 @@
+module PhlexKit
+  # Toggleable row, mirroring shadcn/ui's MenubarCheckboxItem: a <label>
+  # around a real (hidden) checkbox — clicking toggles it natively and the ✓
+  # shows via CSS, without closing the menu (matching Radix). See menubar.rb.
+  class MenubarCheckboxItem < 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-menubar-item pk-menubar-checkbox-item",
+        role: "menuitemcheckbox"
+      }, @attrs)) do
+        input(type: :checkbox, class: "pk-menubar-item-input", name: @name, value: @value, checked: @checked)
+        span(class: "pk-menubar-item-indicator", aria: { hidden: "true" }) do
+          render Icon.new(:check, size: nil)
+        end
+        yield if block
+      end
+    end
+  end
+end

data/app/components/phlex_kit/menubar/menubar_group.rb

@@ -0,0 +1,10 @@
+module PhlexKit
+  # Grouping wrapper for related rows. Mirrors shadcn/ui's MenubarGroup.
+  # See menubar.rb.
+  class MenubarGroup < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-menubar-group", role: "group" }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/menubar/menubar_item.rb

@@ -1,11 +1,16 @@
 module PhlexKit
-  # Menu row (an <a> — pass href:, or as: :div for buttons). Closes the bar.
-  # See menubar.rb.
+  # Menu row (an <a> — pass href:, or as: :div for buttons). `variant:
+  # :destructive` tints red; `inset: true` aligns with checkbox/radio rows.
+  # Closes the bar. See menubar.rb.
   class MenubarItem < BaseComponent
-    def initialize(as: :a, href: "#", shortcut: nil, **attrs)
+    VARIANTS = { default: nil, destructive: "destructive" }.freeze
+
+    def initialize(as: :a, href: "#", shortcut: nil, variant: :default, inset: false, **attrs)
       @as = as.to_sym
       @href = href
       @shortcut = shortcut
+      @variant = variant.to_sym
+      @inset = inset
       @attrs = attrs
     end
 
@@ -13,7 +18,7 @@ module PhlexKit
       base = {
         role: "menuitem",
         tabindex: "-1",
-        class: "pk-menubar-item",
+        class: [ "pk-menubar-item", VARIANTS.fetch(@variant), ("inset" if @inset) ].compact.join(" "),
         data: { action: "click->phlex-kit--menubar#close" }
       }
       base[:href] = @href unless @as == :div

data/app/components/phlex_kit/menubar/menubar_label.rb

@@ -0,0 +1,10 @@
+module PhlexKit
+  # Non-interactive heading row in a MenubarContent. Mirrors shadcn/ui's
+  # MenubarLabel. See menubar.rb.
+  class MenubarLabel < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-menubar-label" }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/menubar/menubar_radio_group.rb

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

data/app/components/phlex_kit/menubar/menubar_radio_item.rb

@@ -0,0 +1,29 @@
+module PhlexKit
+  # One choice in a MenubarRadioGroup — a <label> around a real (hidden)
+  # radio; the ● shows via CSS and picking doesn't close the menu (matching
+  # Radix). See menubar.rb.
+  class MenubarRadioItem < 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-menubar-item pk-menubar-radio-item",
+        role: "menuitemradio"
+      }, @attrs)) do
+        input(type: :radio, class: "pk-menubar-item-input", name: @name, value: @value, checked: @checked)
+        span(class: "pk-menubar-item-indicator", aria: { hidden: "true" }) do
+          # A filled selection dot is geometry, not icon-library vocabulary.
+          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/menubar/menubar_shortcut.rb

@@ -0,0 +1,10 @@
+module PhlexKit
+  # Right-aligned keyboard hint on a MenubarItem (the item's `shortcut:` param
+  # renders the same span). Mirrors shadcn/ui's MenubarShortcut. See menubar.rb.
+  class MenubarShortcut < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&block)
+      span(**mix({ class: "pk-menubar-shortcut" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/menubar/menubar_sub.rb

@@ -0,0 +1,10 @@
+module PhlexKit
+  # Nested submenu wrapper: SubTrigger row + SubContent panel, revealed on
+  # hover/focus with pure CSS. Mirrors shadcn/ui's MenubarSub. See menubar.rb.
+  class MenubarSub < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-menubar-sub" }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/menubar/menubar_sub_content.rb

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

data/app/components/phlex_kit/menubar/menubar_sub_trigger.rb

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

data/app/components/phlex_kit/message/message.css

@@ -1,4 +1,6 @@
-/* Co-located with message.rb. Theme tokens from the global stylesheet. */
+/* Co-located with message.rb. Matched to shadcn/ui's current message: the
+   avatar rises above a footer row, header/footer lose their inset beside
+   ghost bubbles. Theme tokens from the global stylesheet. */
 .pk-message {
   position: relative; display: flex; width: 100%; min-width: 0;
   gap: .5rem; font-size: .875rem;
@@ -18,3 +20,8 @@
   align-items: center; justify-content: center; align-self: flex-end;
   overflow: hidden; border-radius: 9999px; background: var(--pk-surface-2);
 }
+/* Keep the avatar level with the bubble when a footer row follows. */
+.pk-message:has(.pk-message-footer) .pk-message-avatar { transform: translateY(-2rem); }
+/* Frameless ghost bubbles sit flush — drop the header/footer inset. */
+.pk-message:has([data-variant="ghost"]) .pk-message-header,
+.pk-message:has([data-variant="ghost"]) .pk-message-footer { padding-inline: 0; }

data/app/components/phlex_kit/message_scroller/message_scroller.css

@@ -1,2 +1,20 @@
 /* Co-located with message_scroller.rb. Tokens from the global stylesheet. */
 .pk-message-scroller { position: relative; display: flex; height: 100%; width: 100%; min-height: 0; flex-direction: column; overflow: hidden; }
+/* Jump-to-latest affordance: floats bottom-center, appears only while the
+   reader is away from its edge (the controller stamps data-active). */
+.pk-message-scroller-jump {
+  position: absolute;
+  bottom: .75rem;
+  left: 50%;
+  transform: translateX(-50%) translateY(.5rem);
+  z-index: 10;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .15s ease, transform .15s ease;
+  box-shadow: 0 2px 8px rgb(0 0 0 / .25);
+}
+.pk-message-scroller-jump[data-active="true"] {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(-50%) translateY(0);
+}

data/app/components/phlex_kit/native_select/native_select.css

@@ -1,7 +1,7 @@
 /* Co-located with native_select.rb — UI::NativeSelect (+ Icon / Option / Group).
    ruby_ui's structure kept verbatim (wrapper > appearance:none select + absolute
-   chevron); only the styling is ours, vanilla CSS on the palette tokens. Geometry
-   from ruby_ui (h-9 default / h-7 sm, rounded-md, pr-8 pl-2.5, ring-on-focus).
+   chevron); only the styling is ours, vanilla CSS on the palette tokens. Matched to nova (h-8/h-7, rounded-lg,
+   translucent dark fill with hover step, ring focus, invalid states).
    Theme tokens come from the global stylesheet. */
 .pk-native-select {
   position: relative;
@@ -14,9 +14,9 @@
   height: 2rem;
   appearance: none;
   -webkit-appearance: none;
-  border-radius: calc(var(--pk-radius) - 2px);
+  border-radius: var(--pk-radius);
   border: 1px solid var(--pk-input);
-  background: transparent;
+  background: color-mix(in oklab, var(--pk-input) 30%, transparent);
   color: var(--pk-text);
   font: inherit;
   font-size: .875rem;
@@ -24,9 +24,10 @@
     cursor: pointer;
   transition: color .15s ease, border-color .15s ease, box-shadow .15s ease;
 }
+.pk-native-select-field:hover { background: color-mix(in oklab, var(--pk-input) 50%, transparent); }
 .pk-native-select-field:focus-visible {
   outline: none;
-  border-color: var(--pk-brand);
+  border-color: var(--pk-ring);
   box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
 }
 .pk-native-select-field:disabled { cursor: not-allowed; opacity: .5; }
@@ -34,6 +35,25 @@
   height: 1.75rem;
   padding-top: .125rem;
   padding-bottom: .125rem;
+  border-radius: min(calc(var(--pk-radius) - 2px), 10px);
+}
+.pk-native-select-field[aria-invalid="true"] {
+  border-color: color-mix(in oklab, var(--pk-red) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 40%, transparent);
+}
+:root[data-theme="light"] .pk-native-select-field { background: transparent; }
+:root[data-theme="light"] .pk-native-select-field:hover { background: transparent; }
+:root[data-theme="light"] .pk-native-select-field[aria-invalid="true"] {
+  border-color: var(--pk-red);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 20%, transparent);
+}
+@media (prefers-color-scheme: light) {
+  :root[data-theme="system"] .pk-native-select-field { background: transparent; }
+  :root[data-theme="system"] .pk-native-select-field:hover { background: transparent; }
+  :root[data-theme="system"] .pk-native-select-field[aria-invalid="true"] {
+    border-color: var(--pk-red);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 20%, transparent);
+  }
 }
 /* Native option lists are OS-drawn; force a readable palette where honoured. */
 .pk-native-select-field option,

data/app/components/phlex_kit/navigation_menu/navigation_menu.css

@@ -14,12 +14,11 @@
   display: inline-flex;
   align-items: center;
   gap: .25rem;
-  height: 2.25rem;
   border: 0;
-  border-radius: calc(var(--pk-radius) - 2px);
+  border-radius: var(--pk-radius);
   background: transparent;
   color: var(--pk-text);
-  padding: .5rem .75rem;
+  padding: .375rem .625rem;
   font: inherit;
   font-size: .875rem;
   font-weight: 500;
@@ -29,7 +28,10 @@
   transition: background-color .15s ease;
 }
 .pk-navigation-menu-trigger:hover, .pk-navigation-menu-link:hover,
-.pk-navigation-menu-trigger[aria-expanded="true"] { background: var(--pk-accent); }
+.pk-navigation-menu-trigger:focus-visible, .pk-navigation-menu-link:focus-visible { background: var(--pk-surface-2); }
+.pk-navigation-menu-trigger[aria-expanded="true"] { background: color-mix(in oklab, var(--pk-surface-2) 50%, transparent); }
+.pk-navigation-menu-trigger[aria-expanded="true"]:hover { background: var(--pk-surface-2); }
+.pk-navigation-menu-link svg:not([class*="size-"]) { width: 1rem; height: 1rem; }
 .pk-navigation-menu-chevron { width: .75rem; height: .75rem; transition: transform .2s ease; }
 .pk-navigation-menu-trigger[aria-expanded="true"] .pk-navigation-menu-chevron { transform: rotate(180deg); }
 .pk-navigation-menu-content {
@@ -42,17 +44,18 @@
   z-index: 50;
   min-width: 16rem;
   margin-top: var(--pk-nav-gap);
-  border: 1px solid var(--pk-border);
+  border: 1px solid color-mix(in oklab, var(--pk-text) 10%, transparent);
   border-radius: var(--pk-radius);
   background: var(--pk-surface);
   color: var(--pk-text);
-  padding: .5rem;
+  padding: .25rem;
   box-shadow: 0 8px 24px rgb(0 0 0 / .3);
 }
 .pk-navigation-menu-content .pk-navigation-menu-link {
   display: flex;
   height: auto;
   width: 100%;
+  border-radius: calc(var(--pk-radius) - 2px);
   flex-direction: column;
   align-items: flex-start;
   gap: .25rem;

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

@@ -1,5 +1,12 @@
-/* Co-located with pagination.rb. Items reuse .pk-button. Tokens global. */
+/* Co-located with pagination.rb. Items reuse .pk-button (numbers are square
+   ghost buttons, outline when active; Previous/Next carry a chevron with a
+   label that hides on small screens). Matched to nova (gap-0.5 content,
+   size-8 ellipsis, near-side padding trims on Previous/Next). 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-content { display: flex; flex-direction: row; align-items: center; gap: .125rem; list-style: none; margin: 0; padding: 0; }
+.pk-pagination-ellipsis { display: flex; height: 2rem; width: 2rem; align-items: center; justify-content: center; }
 .pk-pagination-ellipsis > svg { width: 1rem; height: 1rem; }
+.pk-button.pk-pagination-previous { padding-left: .375rem; }
+.pk-button.pk-pagination-next { padding-right: .375rem; }
+.pk-pagination-label { display: none; }
+@media (min-width: 640px) { .pk-pagination-label { display: block; } }

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

@@ -0,0 +1,21 @@
+module PhlexKit
+  # A page-number link (square ghost button; outline when active), ported from
+  # shadcn/ui's PaginationLink. Renders its own <li>. See pagination.rb.
+  class PaginationLink < 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"} icon",
+          aria: { current: (@active ? "page" : nil) }
+        }, @attrs), &block)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+module PhlexKit
+  # "Next" control (label + chevron, label hidden on small screens), ported
+  # from shadcn/ui's PaginationNext. Renders its own <li>. See pagination.rb.
+  class PaginationNext < BaseComponent
+    def initialize(href: "#", label: "Next", **attrs)
+      @href = href
+      @label = label
+      @attrs = attrs
+    end
+
+    def view_template
+      li do
+        a(**mix({ href: @href, class: "pk-button ghost pk-pagination-next", aria: { label: "Go to next page" } }, @attrs)) do
+          span(class: "pk-pagination-label") { @label }
+          render Icon.new(:chevron_right, size: nil)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,21 @@
+module PhlexKit
+  # "Previous" control (chevron + label, label hidden on small screens),
+  # ported from shadcn/ui's PaginationPrevious. Renders its own <li>.
+  # See pagination.rb.
+  class PaginationPrevious < BaseComponent
+    def initialize(href: "#", label: "Previous", **attrs)
+      @href = href
+      @label = label
+      @attrs = attrs
+    end
+
+    def view_template
+      li do
+        a(**mix({ href: @href, class: "pk-button ghost pk-pagination-previous", aria: { label: "Go to previous page" } }, @attrs)) do
+          render Icon.new(:chevron_left, size: nil)
+          span(class: "pk-pagination-label") { @label }
+        end
+      end
+    end
+  end
+end