phlex_kit 0.2.0

data/app/components/phlex_kit/label/label.css

@@ -0,0 +1,12 @@
+/* Co-located with label.rb — UI::Label, shadcn parity (text-sm font-medium,
+   dims when its control is disabled). */
+.pk-label {
+  display: inline-flex;
+  align-items: center;
+  gap: .5rem;
+  font-size: .875rem;
+  font-weight: 500;
+  line-height: 1;
+  user-select: none;
+}
+.pk-label:has(+ :disabled), .pk-label:has(:disabled) { cursor: not-allowed; opacity: .5; }

data/app/components/phlex_kit/label/label.rb

@@ -0,0 +1,14 @@
+module PhlexKit
+  # Standalone form label, ported from shadcn/ui's Label (FormFieldLabel is the
+  # ruby_ui-shaped equivalent inside a FormField). Pass `for:` to bind it.
+  # `.pk-label` (label.css).
+  class Label < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      label(**mix({ class: "pk-label" }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/link/link.css

@@ -0,0 +1,6 @@
+/* Co-located with link.rb — UI::Link. The button-styled variants deliberately
+   REUSE the `.pk-button*` classes from button.css (Link shares Button's exact
+   variant/size vocabulary), so this file only carries the link-specific niceties
+   on top: ruby_ui's `underline-offset-4` for the inline `:link` variant. Theme
+   tokens come from the global stylesheet. */
+.pk-button.link { text-underline-offset: 4px; }

data/app/components/phlex_kit/link/link.rb

@@ -0,0 +1,47 @@
+module PhlexKit
+  # Link, ported from ruby_ui's RubyUI::Link — an <a> that wears PhlexKit::Button's
+  # look. Same variant/size vocabulary as Button, so it reuses the `.pk-button*`
+  # classes from button.css (link.css only adds the inline :link treatment).
+  # Default variant is :link (an inline underline-on-hover link); the button-style
+  # variants turn it into a button-styled anchor (ruby_ui's "Link" concept — what
+  # we already do ad-hoc with `a(class: "pk-button outline sm")`).
+  #
+  # Presentational; `mix` passes `**@attrs` (incl. data-*) straight through.
+  # `VARIANTS.fetch`/`SIZES.fetch` fail loud.
+  class Link < BaseComponent
+    # Mirrors PhlexKit::Button's vocabulary 1:1 so the shared `.pk-button*` CSS applies.
+    VARIANTS = {
+      link: "link",
+      primary: "primary",
+      secondary: "secondary",
+      destructive: "destructive",
+      outline: "outline",
+      ghost: "ghost"
+    }.freeze
+
+    SIZES = {
+      sm: "sm",
+      md: nil,
+      lg: "lg",
+      xl: "xl"
+    }.freeze
+
+    def initialize(href: "#", variant: :link, size: :md, icon: false, **attrs)
+      @href = href
+      @variant = variant.to_sym
+      @size = size.to_sym
+      @icon = icon
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      a(**mix({ href: @href, class: classes }, @attrs), &block)
+    end
+
+    private
+
+    def classes
+      [ "pk-button", VARIANTS.fetch(@variant), SIZES.fetch(@size), ("icon" if @icon) ].compact.join(" ")
+    end
+  end
+end

data/app/components/phlex_kit/masked_input/masked_input.rb

@@ -0,0 +1,12 @@
+module PhlexKit
+  # Text input with an inline mask. Ported from ruby_ui's RubyUI::MaskedInput —
+  # ruby_ui uses the `maska` JS lib; PhlexKit ships a small dependency-free mask
+  # controller (#=digit, A=letter, *=any) driven by a data-mask attribute. Swap in
+  # maska by replacing masked_input_controller.js if you need its full feature set.
+  class MaskedInput < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template
+      render PhlexKit::Input.new(type: "text", **mix({ data: { controller: "phlex-kit--masked-input" } }, @attrs))
+    end
+  end
+end

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

@@ -0,0 +1,66 @@
+/* Co-located with menubar.rb — UI::Menubar, shadcn parity (Radix replaced by
+   the phlex-kit--menubar controller). NavigationMenu shares the item look. */
+.pk-menubar {
+  display: inline-flex;
+  align-items: center;
+  gap: .25rem;
+  border: 1px solid var(--pk-border);
+  border-radius: var(--pk-radius);
+  background: var(--pk-surface);
+  padding: .25rem;
+}
+.pk-menubar-menu { position: relative; }
+.pk-menubar-trigger {
+  display: flex;
+  align-items: center;
+  border: 0;
+  border-radius: calc(var(--pk-radius) - 4px);
+  background: transparent;
+  color: var(--pk-text);
+  padding: .25rem .5rem;
+  font: inherit;
+  font-size: .875rem;
+  font-weight: 500;
+  cursor: pointer;
+  outline: none;
+}
+.pk-menubar-trigger:hover,
+.pk-menubar-trigger[aria-expanded="true"] { background: var(--pk-accent); }
+.pk-menubar-content {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 50;
+  min-width: 12rem;
+  margin-top: .5rem;
+  border: 1px solid var(--pk-border);
+  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);
+}
+.pk-menubar-item {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  border-radius: calc(var(--pk-radius) - 4px);
+  padding: .375rem .5rem;
+  font-size: .875rem;
+  color: var(--pk-text);
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+}
+.pk-menubar-item:hover, .pk-menubar-item:focus { background: var(--pk-accent); }
+.pk-menubar-shortcut { margin-left: auto; font-size: .75rem; color: var(--pk-muted); letter-spacing: .1em; }
+.pk-menubar-separator { height: 1px; margin: .25rem -0.25rem; background: var(--pk-border); }
+.pk-menubar-content::before {
+  content: "";
+  position: absolute;
+  top: calc(-.5rem - 1px);
+  left: 0;
+  right: 0;
+  height: calc(.5rem + 1px);
+}

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

@@ -0,0 +1,24 @@
+module PhlexKit
+  # Desktop-style menu bar, ported from shadcn/ui's Menubar (Radix replaced by
+  # the phlex-kit--menubar controller: click opens a menu, hover switches
+  # between open menus, Escape/outside closes). Compose Menubar > MenubarMenu >
+  # (MenubarTrigger + MenubarContent > MenubarItem/MenubarSeparator).
+  # NavigationMenu shares the controller in hover mode. `.pk-menubar*`
+  # (menubar.css).
+  class Menubar < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({
+        class: "pk-menubar",
+        role: "menubar",
+        data: {
+          controller: "phlex-kit--menubar",
+          action: "click@window->phlex-kit--menubar#onClickOutside keydown.esc->phlex-kit--menubar#close"
+        }
+      }, @attrs), &)
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+module PhlexKit
+  # Dropdown panel of a MenubarMenu. See menubar.rb.
+  class MenubarContent < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-menubar-content pk-hidden", role: "menu" }, @attrs), &)
+    end
+  end
+end

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

@@ -0,0 +1,26 @@
+module PhlexKit
+  # Menu row (an <a> — pass href:, or as: :div for buttons). Closes the bar.
+  # See menubar.rb.
+  class MenubarItem < BaseComponent
+    def initialize(as: :a, href: "#", shortcut: nil, **attrs)
+      @as = as.to_sym
+      @href = href
+      @shortcut = shortcut
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      base = {
+        role: "menuitem",
+        tabindex: "-1",
+        class: "pk-menubar-item",
+        data: { action: "click->phlex-kit--menubar#close" }
+      }
+      base[:href] = @href unless @as == :div
+      send(@as, **mix(base, @attrs)) do
+        block&.call
+        span(class: "pk-menubar-shortcut") { @shortcut } if @shortcut
+      end
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+module PhlexKit
+  # One trigger+panel pair in a Menubar. See menubar.rb.
+  class MenubarMenu < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-menubar-menu", data: { phlex_kit__menubar_target: "menu" } }, @attrs), &)
+    end
+  end
+end

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

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

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

@@ -0,0 +1,14 @@
+module PhlexKit
+  # See menubar.rb.
+  class MenubarTrigger < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      button(**mix({
+        type: :button,
+        class: "pk-menubar-trigger",
+        aria: { haspopup: "menu", expanded: "false" },
+        data: { action: "click->phlex-kit--menubar#toggle mouseenter->phlex-kit--menubar#switch" }
+      }, @attrs), &)
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+/* Co-located with message.rb. Theme tokens from the global stylesheet. */
+.pk-message {
+  position: relative; display: flex; width: 100%; min-width: 0;
+  gap: .5rem; font-size: .875rem;
+}
+.pk-message[data-align="end"] { flex-direction: row-reverse; }
+.pk-message-content { display: flex; width: 100%; min-width: 0; flex-direction: column; gap: .625rem; overflow-wrap: break-word; }
+.pk-message[data-align="end"] .pk-message-content > [data-slot] { align-self: flex-end; }
+.pk-message-group { display: flex; min-width: 0; flex-direction: column; gap: .5rem; }
+.pk-message-header,
+.pk-message-footer {
+  display: flex; max-width: 100%; min-width: 0; align-items: center;
+  padding-inline: .75rem; font-size: .75rem; font-weight: 500; color: var(--pk-muted);
+}
+.pk-message[data-align="end"] .pk-message-footer { justify-content: flex-end; }
+.pk-message-avatar {
+  display: flex; width: fit-content; min-width: 2rem; flex: none;
+  align-items: center; justify-content: center; align-self: flex-end;
+  overflow: hidden; border-radius: 9999px; background: var(--pk-surface-2);
+}

data/app/components/phlex_kit/message/message.rb

@@ -0,0 +1,14 @@
+module PhlexKit
+  # Chat message row (avatar + content), ported from ruby_ui's RubyUI::Message.
+  # align: :end reverses the row. Compose Message > MessageContent (+ Avatar/
+  # Header/Footer); group several in a MessageGroup.
+  class Message < BaseComponent
+    def initialize(align: :start, **attrs)
+      @align = align.to_sym
+      @attrs = attrs
+    end
+    def view_template(&)
+      div(**mix({ class: "pk-message", data: { slot: "message", align: @align } }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/message/message_avatar.rb

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

data/app/components/phlex_kit/message/message_content.rb

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

data/app/components/phlex_kit/message/message_footer.rb

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

data/app/components/phlex_kit/message/message_group.rb

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

data/app/components/phlex_kit/message/message_header.rb

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

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

@@ -0,0 +1,2 @@
+/* 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; }

data/app/components/phlex_kit/message_scroller/message_scroller.rb

@@ -0,0 +1,11 @@
+module PhlexKit
+  # Height-constrained chat transcript with autoscroll/anchoring. Ported from
+  # ruby_ui's RubyUI::MessageScroller. Mark the scroll viewport, content list, and
+  # jump button inside with data-phlex-kit--message-scroller-target attributes.
+  class MessageScroller < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-message-scroller", data: { controller: "phlex-kit--message-scroller", slot: "message-scroller" } }, @attrs), &)
+    end
+  end
+end

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

@@ -0,0 +1,51 @@
+/* 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).
+   Theme tokens come from the global stylesheet. */
+.pk-native-select {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+}
+.pk-native-select-field {
+  width: 100%;
+  min-width: 0;
+  height: 2rem;
+  appearance: none;
+  -webkit-appearance: none;
+  border-radius: calc(var(--pk-radius) - 2px);
+  border: 1px solid var(--pk-input);
+  background: transparent;
+  color: var(--pk-text);
+  font: inherit;
+  font-size: .875rem;
+  padding: .25rem 2rem .25rem .625rem;
+    cursor: pointer;
+  transition: color .15s ease, border-color .15s ease, box-shadow .15s ease;
+}
+.pk-native-select-field: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-native-select-field:disabled { cursor: not-allowed; opacity: .5; }
+.pk-native-select-field.sm {
+  height: 1.75rem;
+  padding-top: .125rem;
+  padding-bottom: .125rem;
+}
+/* Native option lists are OS-drawn; force a readable palette where honoured. */
+.pk-native-select-field option,
+.pk-native-select-field optgroup { background: var(--pk-surface); color: var(--pk-text); }
+.pk-native-select-icon {
+  position: absolute;
+  top: 50%;
+  right: .625rem;
+  transform: translateY(-50%);
+  display: flex;
+  pointer-events: none;
+  user-select: none;
+  color: var(--pk-muted);
+}
+.pk-native-select-icon svg { width: 1rem; height: 1rem; }

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

@@ -0,0 +1,48 @@
+module PhlexKit
+  # Styled native <select>, ported from ruby_ui's RubyUI::NativeSelect. A real
+  # browser select (native option list, mobile-friendly) wrapped so we can hide
+  # the OS chevron (appearance:none) and draw our own — otherwise the native
+  # arrow renders an inconsistent light-on-dark box. Multi-part, like PhlexKit::Card:
+  #
+  #   render PhlexKit::NativeSelect.new(name: "store_id") do
+  #     render PhlexKit::NativeSelectOption.new(value: "") { "All stores" }
+  #     render PhlexKit::NativeSelectGroup.new(label: "Live") do
+  #       render PhlexKit::NativeSelectOption.new(value: store.id) { store.name }
+  #     end
+  #   end
+  #
+  # The yielded block is the <option>/<optgroup> list; `name:`/`id:`/`required:`/
+  # `**on(...)` pass through to the <select> via `mix`. `size:` is the kit's lone
+  # selector here (default | sm) — `SIZES.fetch` fails loud on anything else.
+  class NativeSelect < BaseComponent
+    # size => extra class appended after the base select class (nil = default).
+    SIZES = {
+      default: nil,
+      sm: "sm"
+    }.freeze
+
+    def initialize(size: :default, **attrs)
+      @size = size.to_sym
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(class: "pk-native-select") do
+        select(**mix({
+          class: classes,
+          data: {
+            phlex_kit__form_field_target: "input",
+            action: "change->phlex-kit--form-field#onChange invalid->phlex-kit--form-field#onInvalid"
+          }
+        }, @attrs), &block)
+        render PhlexKit::NativeSelectIcon.new
+      end
+    end
+
+    private
+
+    def classes
+      [ "pk-native-select-field", SIZES.fetch(@size) ].compact.join(" ")
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+module PhlexKit
+  # An <optgroup> inside PhlexKit::NativeSelect — labels a cluster of options
+  # (`label:` passes through). Plain pass-through wrapper. See native_select.rb.
+  class NativeSelectGroup < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      optgroup(**@attrs, &block)
+    end
+  end
+end

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

@@ -0,0 +1,32 @@
+module PhlexKit
+  # The chevron that sits over the appearance:none <select> in PhlexKit::NativeSelect.
+  # Mirrors ruby_ui's NativeSelectIcon: renders a default chevron SVG, or a
+  # caller-supplied block in its place. The svg uses `currentColor`, so the icon
+  # colour is driven by `.pk-native-select-icon`'s `color` token (native_select.css).
+  class NativeSelectIcon < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      span(**mix({ class: "pk-native-select-icon" }, @attrs)) do
+        block ? yield : 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",
+        "aria-hidden": "true"
+      ) { |s| s.path(d: "m6 9 6 6 6-6") }
+    end
+  end
+end

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

@@ -0,0 +1,14 @@
+module PhlexKit
+  # A single <option> inside PhlexKit::NativeSelect. Plain pass-through wrapper (no
+  # base class); `value:`/`selected:`/`disabled:` ride through to the element.
+  # See native_select.rb.
+  class NativeSelectOption < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      option(**@attrs, &block)
+    end
+  end
+end

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

@@ -0,0 +1,67 @@
+/* Co-located with navigation_menu.rb — UI::NavigationMenu, shadcn parity
+   (Radix replaced by the shared phlex-kit--menubar controller, hover mode). */
+.pk-navigation-menu { position: relative; display: flex; }
+.pk-navigation-menu-list {
+  display: flex;
+  align-items: center;
+  gap: .25rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.pk-navigation-menu-item { position: relative; }
+.pk-navigation-menu-trigger, .pk-navigation-menu-link {
+  display: inline-flex;
+  align-items: center;
+  gap: .25rem;
+  height: 2.25rem;
+  border: 0;
+  border-radius: calc(var(--pk-radius) - 2px);
+  background: transparent;
+  color: var(--pk-text);
+  padding: .5rem .75rem;
+  font: inherit;
+  font-size: .875rem;
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+  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-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 {
+  position: absolute;
+  /* invisible bridge over the gap so hovering toward the panel doesn't
+     mouseleave the nav and close it */
+  --pk-nav-gap: .375rem;
+  top: 100%;
+  left: 0;
+  z-index: 50;
+  min-width: 16rem;
+  margin-top: var(--pk-nav-gap);
+  border: 1px solid var(--pk-border);
+  border-radius: var(--pk-radius);
+  background: var(--pk-surface);
+  color: var(--pk-text);
+  padding: .5rem;
+  box-shadow: 0 8px 24px rgb(0 0 0 / .3);
+}
+.pk-navigation-menu-content .pk-navigation-menu-link {
+  display: flex;
+  height: auto;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: .25rem;
+}
+.pk-navigation-menu-content::before {
+  content: "";
+  position: absolute;
+  top: calc(-1 * var(--pk-nav-gap) - 1px);
+  left: 0;
+  right: 0;
+  height: calc(var(--pk-nav-gap) + 1px);
+}

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

@@ -0,0 +1,23 @@
+module PhlexKit
+  # Site navigation with hoverable panels, ported from shadcn/ui's
+  # NavigationMenu. Shares the phlex-kit--menubar controller in hover-open mode
+  # (data-hover-open). Compose NavigationMenu > NavigationMenuList >
+  # NavigationMenuItem > (NavigationMenuTrigger + NavigationMenuContent |
+  # NavigationMenuLink). `.pk-navigation-menu*` (navigation_menu.css).
+  class NavigationMenu < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      nav(**mix({
+        class: "pk-navigation-menu",
+        data: {
+          controller: "phlex-kit--menubar",
+          hover_open: true,
+          action: "click@window->phlex-kit--menubar#onClickOutside keydown.esc->phlex-kit--menubar#close mouseleave->phlex-kit--menubar#close"
+        }
+      }, @attrs), &)
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+module PhlexKit
+  # Hover panel of a NavigationMenuItem. See navigation_menu.rb.
+  class NavigationMenuContent < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-navigation-menu-content pk-hidden", role: "menu" }, @attrs), &)
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+module PhlexKit
+  # See navigation_menu.rb.
+  class NavigationMenuItem < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      li(**mix({ class: "pk-navigation-menu-item", data: { phlex_kit__menubar_target: "menu" } }, @attrs), &)
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+module PhlexKit
+  # Plain link item (top-level or inside a panel). See navigation_menu.rb.
+  class NavigationMenuLink < BaseComponent
+    def initialize(href: "#", **attrs)
+      @href = href
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      a(**mix({ class: "pk-navigation-menu-link", href: @href }, @attrs), &)
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module PhlexKit
+  # See navigation_menu.rb.
+  class NavigationMenuList < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = ul(**mix({ class: "pk-navigation-menu-list" }, @attrs), &)
+  end
+end