shadcn_view_component 0.3.3

data/app/components/shadcn/command/dialog/component.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Command
+    module Dialog
+      # The palette: a Command inside a Dialog, which is what upstream's
+      # `CommandDialog` is — it renders no markup of its own beyond the classes
+      # it layers on both.
+      #
+      # The title and the description are `sr-only` and required rather than
+      # optional, exactly as upstream defaults them: a dialog with no
+      # accessible name is a dialog a screen reader opens into silence.
+      class Component < ApplicationViewComponent
+        # Upstream's own spacing for a palette in a dialog, which is where the
+        # `cmdk-*` attributes earn their keep: the rows are taller and the
+        # headings are indented, and every selector reaches this port's DOM.
+        COMMAND_CLASSES = "**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 " \
+                          "[&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground " \
+                          "[&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 " \
+                          "[&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 " \
+                          "[&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 " \
+                          "[&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
+        CONTENT_CLASSES = "overflow-hidden p-0"
+
+        attr_reader :title, :description, :show_close_button, :label
+
+        def initialize(title: "Command Palette", description: "Search for a command to run...",
+                       show_close_button: true, label: nil, **attributes)
+          @title = title
+          @description = description
+          @show_close_button = show_close_button
+          @label = label
+          super(**attributes)
+        end
+
+        # The trigger belongs to the Dialog, not to this component, so the slot
+        # only *carries* what the caller wrote — its content, and the attributes
+        # that come with it — and `call` hands both to the Dialog's own trigger.
+        # Nesting one trigger inside another renders an empty button, which is
+        # what axe reported the first time.
+        # `view_context.capture`, and the block kept rather than rendered here:
+        # the block was written in the caller's template, so capturing it inside
+        # this component writes to the wrong buffer and the button comes out
+        # empty — which is what axe reported, twice.
+        renders_one :trigger, lambda { |**options, &block|
+          @trigger_options = options
+          @trigger_block = block
+          nil
+        }
+
+        def call
+          render(Shadcn::Dialog::Component.new(**attributes)) do |dialog|
+            dialog.with_trigger(**@trigger_options.to_h) { view_context.capture(&@trigger_block) } if trigger?
+            dialog.with_dialog_content(class: CONTENT_CLASSES, show_close_button:) do |dialog_content|
+              dialog_content.with_header(class: "sr-only") do |header|
+                header.with_title { title }
+                header.with_description { description }
+              end
+              concat(command)
+            end
+          end
+        end
+
+        private
+
+        def command
+          render(Command::Component.new(label:, class: COMMAND_CLASSES)) { content }
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/command/empty/component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Command
+    module Empty
+      # What is shown when nothing matches. Rendered hidden and revealed by the
+      # controller: the server cannot know what a caller will type, and an empty
+      # state that only exists once JavaScript has run is one a reader sees
+      # flash in.
+      class Component < ApplicationViewComponent
+        default_tag :div
+        slot_name :"command-empty"
+
+        style do
+          base { "py-6 text-center text-sm" }
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            "cmdk-empty" => "",
+            role: "presentation",
+            hidden: true,
+            "data-shadcn--command-target" => "empty"
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/command/group/component.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Command
+    module Group
+      # A titled run of items. cmdk renders three elements — the group, an
+      # `aria-hidden` heading and a `role="group"` wrapper named by it
+      # (`vendor/cmdk/index.tsx:750-764`) — and shadcn's classes select the
+      # middle one by `[cmdk-group-heading]`, so all three are reproduced.
+      #
+      # The whole group hides when every item in it is filtered away, which is
+      # the controller's job and the reason `hidden` is not a caller's argument.
+      class Component < ApplicationViewComponent
+        default_tag :div
+        slot_name :"command-group"
+
+        style do
+          base {
+            "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 " \
+            "[&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs " \
+            "[&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground"
+          }
+        end
+
+        attr_reader :heading
+
+        def initialize(heading: nil, **attributes)
+          @heading = heading
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            "cmdk-group" => "",
+            role: "presentation",
+            "data-shadcn--command-target" => "group"
+          }.merge(defaults))
+        end
+
+        def call
+          render_element(body: safe_join([ title, items ].compact))
+        end
+
+        private
+
+        def heading_id
+          @heading_id ||= "shadcn-command-heading-#{SecureRandom.hex(4)}"
+        end
+
+        def title
+          return unless heading.present?
+
+          tag.div(heading, id: heading_id, "cmdk-group-heading": "", "aria-hidden": "true")
+        end
+
+        def items
+          tag.div(content, "cmdk-group-items": "", role: "group",
+                  "aria-labelledby": (heading_id if heading.present?))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/command/input/component.rb

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Command
+    module Input
+      # The search field, wrapped in the row that holds the magnifier —
+      # upstream renders both from one component and gives each its own slot.
+      class Component < ApplicationViewComponent
+        WRAPPER_CLASSES = "flex h-9 items-center gap-2 border-b px-3"
+        ICON_CLASSES = "size-4 shrink-0 opacity-50"
+
+        default_tag :input
+        slot_name :"command-input"
+
+        style do
+          base {
+            "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden " \
+            "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+          }
+        end
+
+        attr_reader :ids
+
+        def initialize(ids: {}, **attributes)
+          @ids = ids
+          super(**attributes)
+        end
+
+        # cmdk's own attributes, read from `vendor/cmdk/index.tsx:801-816`. The
+        # combobox is always expanded because the list is always there — a
+        # palette has nothing to open.
+        def element_attributes(**defaults)
+          super(**{
+            "cmdk-input" => "",
+            type: "text",
+            id: ids[:input],
+            role: "combobox",
+            autocomplete: "off",
+            autocorrect: "off",
+            spellcheck: "false",
+            "aria-autocomplete" => "list",
+            "aria-expanded" => "true",
+            "aria-controls" => ids[:list],
+            "aria-labelledby" => ids[:label],
+            "data-shadcn--command-target" => "search",
+            "data-action" => "input->shadcn--command#search keydown->shadcn--command#keydown"
+          }.compact.merge(defaults))
+        end
+
+        # The wrapper is the component's own markup rather than a part a caller
+        # composes, which is upstream's shape too.
+        def call
+          tag.div(
+            safe_join([
+              render(Icon::Component.new("search", class: ICON_CLASSES)),
+              render_element
+            ]),
+            class: WRAPPER_CLASSES,
+            "data-slot": "command-input-wrapper",
+            "cmdk-input-wrapper": ""
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/command/item/component.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Command
+    module Item
+      # One option. `role="option"`, `aria-selected` for the virtual focus, and
+      # `data-selected` for the classes — cmdk sets both, and shadcn's own
+      # `data-[selected=true]:bg-accent` reads the second.
+      class Component < ApplicationViewComponent
+        default_tag :div
+        slot_name :"command-item"
+
+        style do
+          base {
+            "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm " \
+            "outline-hidden select-none data-[disabled=true]:pointer-events-none " \
+            "data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent " \
+            "data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 " \
+            "[&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground"
+          }
+        end
+
+        attr_reader :value, :keywords, :disabled, :selected
+
+        # `value:` is what is searched where it is given, and the item's own text
+        # otherwise — cmdk's rule. `keywords:` are searched too and never shown,
+        # which is how "Preferences" is found by typing "settings".
+        def initialize(value: nil, keywords: nil, disabled: false, selected: false, **attributes)
+          @value = value
+          @keywords = Array(keywords)
+          @disabled = disabled
+          @selected = selected
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            "cmdk-item" => "",
+            id: item_id,
+            role: "option",
+            "aria-disabled" => (disabled.presence && "true"),
+            "aria-selected" => selected.to_s,
+            "data-disabled" => disabled.to_s,
+            "data-selected" => selected.to_s,
+            "data-value" => value,
+            "data-keywords" => (keywords.join(" ").presence),
+            "data-shadcn--command-target" => "item",
+            "data-action" => "click->shadcn--command#choose pointermove->shadcn--command#hover"
+          }.compact.merge(defaults))
+        end
+
+        private
+
+        # An item needs a name of its own for `aria-activedescendant` to point
+        # at it, and a caller has no reason to invent one.
+        def item_id
+          attributes[:id] || "shadcn-command-item-#{SecureRandom.hex(4)}"
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/command/list/component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Command
+    module List
+      # The scrolling list of options. `role="listbox"`, and the input drives it
+      # from outside through `aria-activedescendant` — the virtual focus this
+      # gem already uses for the searchable select.
+      class Component < ApplicationViewComponent
+        default_tag :div
+        slot_name :"command-list"
+
+        style do
+          base { "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto" }
+        end
+
+        attr_reader :ids
+
+        def initialize(ids: {}, **attributes)
+          @ids = ids
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            "cmdk-list" => "",
+            id: ids[:list],
+            role: "listbox",
+            "aria-labelledby" => ids[:label],
+            "data-shadcn--command-target" => "list"
+          }.compact.merge(defaults))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/command/preview.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Command
+    class Preview < ApplicationViewComponentPreview
+      # Upstream's own example: a palette in a box, with two groups and the
+      # shortcuts beside the rows.
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Dialog": the same list inside a Dialog. The shortcut that
+      # opens it is the caller's — `data-action` on any element, or the Dialog's
+      # own trigger.
+      def dialog
+        render_with_template
+      end
+
+      # What ranking buys, which filtering does not: type "gp" and Group Policy
+      # comes first, because a palette answers "what did you mean".
+      def ranking
+        render_with_template
+      end
+    end
+  end
+end

data/app/components/shadcn/command/previews/default.html.erb

@@ -0,0 +1,41 @@
+<%# Upstream's own example. The items are ordinary components in the block, in
+    order — the list is server-rendered and the controller only filters, ranks
+    and walks it. %>
+<%= render(Shadcn::Command::Component.new(label: "Command palette", class: "rounded-lg border shadow-md md:min-w-[450px]")) do |command| %>
+  <% command.with_command_input(placeholder: "Type a command or search...") %>
+  <% command.with_command_list do %>
+    <%= render(Shadcn::Command::Empty::Component.new) { "No results found." } %>
+    <%= render(Shadcn::Command::Group::Component.new(heading: "Suggestions")) do %>
+      <%= render(Shadcn::Command::Item::Component.new) do %>
+        <%= render(Shadcn::Icon::Component.new("calendar")) %>
+        <span>Calendar</span>
+      <% end %>
+      <%= render(Shadcn::Command::Item::Component.new) do %>
+        <%= render(Shadcn::Icon::Component.new("search")) %>
+        <span>Search Emoji</span>
+      <% end %>
+      <%= render(Shadcn::Command::Item::Component.new(disabled: true)) do %>
+        <%= render(Shadcn::Icon::Component.new("calculator")) %>
+        <span>Calculator</span>
+      <% end %>
+    <% end %>
+    <%= render(Shadcn::Command::Separator::Component.new) %>
+    <%= render(Shadcn::Command::Group::Component.new(heading: "Settings")) do %>
+      <%= render(Shadcn::Command::Item::Component.new(keywords: %w[account me])) do %>
+        <%= render(Shadcn::Icon::Component.new("user")) %>
+        <span>Profile</span>
+        <%= render(Shadcn::Command::Shortcut::Component.new) { "⌘P" } %>
+      <% end %>
+      <%= render(Shadcn::Command::Item::Component.new(keywords: %w[invoice payment])) do %>
+        <%= render(Shadcn::Icon::Component.new("credit-card")) %>
+        <span>Billing</span>
+        <%= render(Shadcn::Command::Shortcut::Component.new) { "⌘B" } %>
+      <% end %>
+      <%= render(Shadcn::Command::Item::Component.new(keywords: %w[preferences])) do %>
+        <%= render(Shadcn::Icon::Component.new("settings")) %>
+        <span>Settings</span>
+        <%= render(Shadcn::Command::Shortcut::Component.new) { "⌘S" } %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/command/previews/dialog.html.erb

@@ -0,0 +1,33 @@
+<%# Upstream's "Dialog": the same palette inside a Dialog, whose title and
+    description are `sr-only` and not optional — a dialog with no accessible
+    name opens into silence.
+
+    The shortcut that opens it is the caller's: any element with the Dialog's
+    own trigger action, or a `keydown@document` of your own. %>
+<%= render(Shadcn::Command::Dialog::Component.new(label: "Command palette")) do |palette| %>
+  <% palette.with_trigger(class: Shadcn::Button::Component.variant_classes(variant: :outline)) do %>
+    Open the palette
+  <% end %>
+  <%= render(Shadcn::Command::Input::Component.new(placeholder: "Type a command or search...")) %>
+  <%= render(Shadcn::Command::List::Component.new) do %>
+    <%= render(Shadcn::Command::Empty::Component.new) { "No results found." } %>
+    <%= render(Shadcn::Command::Group::Component.new(heading: "Suggestions")) do %>
+      <% [ [ "calendar", "Calendar" ], [ "search", "Search Emoji" ], [ "calculator", "Calculator" ] ].each do |icon, label| %>
+        <%= render(Shadcn::Command::Item::Component.new) do %>
+          <%= render(Shadcn::Icon::Component.new(icon)) %>
+          <span><%= label %></span>
+        <% end %>
+      <% end %>
+    <% end %>
+    <%= render(Shadcn::Command::Separator::Component.new) %>
+    <%= render(Shadcn::Command::Group::Component.new(heading: "Settings")) do %>
+      <% [ [ "user", "Profile", "⌘P" ], [ "credit-card", "Billing", "⌘B" ], [ "settings", "Settings", "⌘S" ] ].each do |icon, label, key| %>
+        <%= render(Shadcn::Command::Item::Component.new) do %>
+          <%= render(Shadcn::Icon::Component.new(icon)) %>
+          <span><%= label %></span>
+          <%= render(Shadcn::Command::Shortcut::Component.new) { key } %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/command/previews/ranking.html.erb

@@ -0,0 +1,16 @@
+<%# What ranking buys, and filtering does not. Type `gp`: Group Policy comes
+    first, because `cmdk`'s scorer rewards a match at the start of a word — the
+    same file is ported at `app/javascript/shadcn/command_score.js`.
+
+    Then type `settings` and Preferences appears, which has the word nowhere in
+    it: `keywords:` are searched and never shown. %>
+<%= render(Shadcn::Command::Component.new(label: "Search", class: "rounded-lg border shadow-md md:min-w-[450px]")) do |command| %>
+  <% command.with_command_input(placeholder: "Try gp, or settings…") %>
+  <% command.with_command_list do %>
+    <%= render(Shadcn::Command::Empty::Component.new) { "No results found." } %>
+    <% { "Groups" => nil, "Group Policy" => nil, "Grouping rules" => nil,
+         "Preferences" => %w[settings config], "General" => nil }.each do |label, keywords| %>
+      <%= render(Shadcn::Command::Item::Component.new(keywords:)) { label } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/command/separator/component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Command
+    module Separator
+      # A rule between groups, and decorative: `aria-hidden` where cmdk writes
+      # `role="separator"` (`vendor/cmdk/index.tsx:780`).
+      #
+      # A `role="listbox"` may only contain options and groups, and upstream's
+      # own palette puts the separator inside the list — so cmdk's markup makes
+      # the listbox invalid, and axe fails it. Nothing is lost by hiding it: a
+      # separator with no name conveys nothing to a screen reader, and the
+      # groups either side of it are already named. This is the same call the
+      # toaster made about a `role` on an `<li>`.
+      class Component < ApplicationViewComponent
+        default_tag :div
+        slot_name :"command-separator"
+
+        style do
+          base { "-mx-1 h-px bg-border" }
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            "cmdk-separator" => "",
+            "aria-hidden" => "true",
+            "data-shadcn--command-target" => "separator"
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/command.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The parts of the Command family that are an element with a `data-slot` and
+  # fixed classes. Everything else — the root, the input, the list, the group,
+  # the item, the separator and the dialog — carries an attribute `part` cannot
+  # express, mostly `cmdk-*` and a role.
+  module Command
+    extend Parts
+
+    part :shortcut, slot: "command-shortcut", tag: :span,
+                    classes: "ml-auto text-xs tracking-widest text-muted-foreground"
+  end
+end

data/app/components/shadcn/concerns/modal_root.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Concerns
+    # Shared behaviour of the three components shadcn builds on Radix's Dialog
+    # primitive: Dialog, Sheet and AlertDialog.
+    #
+    # It is a module rather than a superclass because ViewComponent refuses to
+    # let a subclass redeclare an inherited slot, and each of the three needs
+    # its own `trigger` / content slot types.
+    module ModalRoot
+      def self.included(base)
+        base.class_eval do
+          attr_reader :open, :modal
+        end
+      end
+
+      # Radix keeps alert dialogs open on an outside click; AlertDialog says so
+      # by overriding this.
+      def dismissable? = true
+
+      def initialize(open: false, modal: true, **attributes)
+        @open = open
+        @modal = modal
+        super(**attributes)
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          style: merged_style(ApplicationViewComponent::CONTENTS_STYLE),
+          "data-controller" => "shadcn--dialog",
+          "data-shadcn--dialog-open-value" => open,
+          "data-shadcn--dialog-modal-value" => modal,
+          "data-shadcn--dialog-dismissable-value" => dismissable?
+        }.merge(defaults))
+      end
+
+      def call
+        render_element(body: safe_join([ trigger, dialog_content, content ].compact))
+      end
+    end
+  end
+end

data/app/components/shadcn/concerns/submits_value.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Concerns
+    # The hidden input that carries a control's value into the form, for the
+    # three families whose value is a single scalar: Select, RadioGroup and
+    # ToggleGroup.
+    #
+    # That input is **ours** — Radix bubbles a native control instead, and
+    # nothing upstream describes it. Which is precisely why it needed an opening:
+    # a host cannot address something the library invented and keeps to itself.
+    #
+    # `input_attributes:` is that opening. It reaches the input and nothing else:
+    #
+    #   Shadcn::Select::Component.new(
+    #     name: "post[author_id]",
+    #     input_attributes: { id: "author-id", form: "other-form" }
+    #   )
+    #
+    # Found by installing the gem in an application that wires one select to
+    # another: choosing a client reloads that client's sites. The obvious way to
+    # do it is a Stimulus controller on the element whose `.value` is the
+    # selection and which fires `change` — the hidden input, and there was no way
+    # to name it. Attaching to the root works and is what that host settled on,
+    # but two things have no such workaround: `id`, which a `<label for>` or any
+    # external script needs, and `form`, which is how HTML lets a control submit
+    # with a form it does not sit inside.
+    #
+    # ## Why only the single-valued families
+    #
+    # Combobox in `multiple` mode, Slider with several thumbs and Calendar in
+    # `range` or `multiple` mode all render *several* hidden inputs. There is no
+    # single element there to be "the control's value", and copying a caller's
+    # attributes onto each is wrong in both of the ways that matter: `id` would
+    # be duplicated, which is invalid, and `data-controller` would connect the
+    # same controller once per input.
+    #
+    # Those families take their attributes on the root instead, which reaches
+    # them through `**attributes` and — since 0.2.1 — concatenates
+    # `data-controller` with the component's own rather than replacing it.
+    #
+    # ## Why the target is passed in rather than derived
+    #
+    # Each including component writes its own `data-shadcn--…-target` literally,
+    # even though the concern could work it out from the class name.
+    # `stimulus_contract_spec` finds targets by reading those literals out of the
+    # source; a derived one would be invisible to it, and the check that every
+    # target a component names exists in the JavaScript would quietly stop
+    # covering this input.
+    module SubmitsValue
+      def self.included(base)
+        base.class_eval do
+          attr_reader :input_attributes
+        end
+      end
+
+      def initialize(input_attributes: {}, **attributes)
+        @input_attributes = input_attributes || {}
+        super(**attributes)
+      end
+
+      private
+
+      # A caller cannot detach the input from the control it belongs to: `name`
+      # and `value` are asserted again after their attributes are merged in.
+      # Everything else is theirs, including the Stimulus target — unusual to
+      # replace, but it is their component to break.
+      #
+      # The re-assertion does not move those two keys. `Hash#merge` on a key that
+      # is already present updates the value and keeps its insertion position, so
+      # the attribute order the components emitted before this concern existed is
+      # unchanged — which is what keeps every rendered snapshot byte-identical.
+      def hidden_input_attributes(**defaults)
+        { "type" => "hidden", "name" => name, "value" => value }
+          .merge(defaults.transform_keys(&:to_s))
+          .merge(input_attributes.transform_keys(&:to_s))
+          .merge("name" => name, "value" => value)
+      end
+    end
+  end
+end

data/app/components/shadcn/context_menu/component.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module ContextMenu
+    # Port of registry/new-york-v4/ui/context-menu.tsx.
+    #
+    # Driven by `shadcn--dropdown-menu`, not a controller of its own: the two
+    # families declare the same slots and the menu's whole behaviour once open
+    # — roving focus, typeahead, submenus, checkbox and radio items — is the
+    # dropdown's. What differs is the way in, which is one action and one value.
+    class Component < ApplicationViewComponent
+      renders_one :trigger, "Shadcn::ContextMenu::Trigger::Component"
+      renders_one :menu_content, "Shadcn::ContextMenu::Content::Component"
+
+      slot_name :"context-menu"
+
+      attr_reader :loop
+
+      # `loop:` is the dropdown's own addition, kept here because both share the
+      # controller — Radix has it as a prop and shadcn passes it in neither file.
+      def initialize(loop: false, **attributes)
+        @loop = loop
+        super(**attributes)
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          style: merged_style(CONTENTS_STYLE),
+          "data-controller" => "shadcn--dropdown-menu",
+          "data-shadcn--dropdown-menu-prefix-value" => "context-menu",
+          "data-shadcn--dropdown-menu-loop-value" => loop,
+          # A context menu opens where the pointer is, so it has no side to
+          # prefer and no gap to leave: the point *is* the corner.
+          "data-shadcn--dropdown-menu-side-value" => "bottom",
+          "data-shadcn--dropdown-menu-align-value" => "start",
+          "data-shadcn--dropdown-menu-side-offset-value" => 0
+        }.merge(defaults))
+      end
+
+      def call
+        render_element(body: safe_join([ trigger, menu_content, content ].compact))
+      end
+    end
+  end
+end