shadcn_view_component 0.3.3

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

@@ -0,0 +1,113 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Combobox
+    # Port of registry/new-york-v4/ui/combobox.tsx — the one file of the 61 that
+    # is written against **Base UI** rather than Radix.
+    #
+    # That is the whole story of this port, and it is visible in the class
+    # strings: `data-open:`, `data-closed:`, `--anchor-width`,
+    # `--available-height`. Every other family here emits `data-state="open"`
+    # and reads `--radix-*`. Reproducing upstream's classes therefore means
+    # emitting Base UI's conventions in this family and nowhere else — which is
+    # what this does, and what `popper.js` publishes the four unprefixed
+    # variables for. See
+    # [features/combobox.md](../../../../.claude/docs/features/combobox.md).
+    #
+    # The root itself renders nothing upstream (`const Combobox =
+    # ComboboxPrimitive.Root`, a context provider), so it is a `display:
+    # contents` wrapper here — the same shape every context-only root in this
+    # gem takes.
+    class Component < ApplicationViewComponent
+      default_tag :div
+      slot_name :combobox
+
+      renders_one :combobox_input, "Shadcn::Combobox::Input::Component"
+      renders_one :combobox_content, "Shadcn::Combobox::Content::Component"
+
+      # In multiple mode the chips box replaces the field — upstream renders
+      # `ComboboxChips` where the single-selection examples render
+      # `ComboboxInput`, and the field moves *inside* it as `ComboboxChipsInput`.
+      # A separate slot rather than a variant of `combobox_input`, because the
+      # two are different components with different parents.
+      renders_one :combobox_chips, "Shadcn::Combobox::Chips::Component"
+
+      attr_reader :name, :label, :multiple
+
+      # `name:` submits with the form, as every other control in this gem does
+      # through a hidden input; `value:` is what is chosen and `label:` what is
+      # shown for it.
+      #
+      # `multiple:` is Base UI's own prop — "Whether multiple items can be
+      # selected" — and, as there, `value:` then takes an array. It submits the
+      # way Rails expects a collection to: `name` gains `[]` and there is one
+      # hidden input per chosen value, so `params[:post][:tag_ids]` is an array
+      # with no parsing on the receiving end.
+      def initialize(name: nil, value: nil, label: nil, multiple: false, **attributes)
+        @name = name
+        @multiple = multiple
+        @values = Array.wrap(value).map(&:to_s).reject(&:blank?)
+        @label = label
+        super(**attributes)
+      end
+
+      # The single chosen value. In multiple mode there is no such thing, and
+      # the controller reads `values` instead.
+      def value
+        multiple ? nil : @values.first
+      end
+
+      def values
+        @values
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          style: merged_style("display:contents"),
+          "data-controller" => "shadcn--combobox",
+          "data-shadcn--combobox-value-value" => value,
+          "data-shadcn--combobox-multiple-value" => (multiple.presence && "true"),
+          "data-shadcn--combobox-values-value" => (values.to_json if multiple),
+          # The controller writes the hidden inputs as chips come and go, and
+          # needs a name to write them under. Kept off the DOM when there is no
+          # name, like the inputs themselves.
+          "data-shadcn--combobox-name-value" => (field_name if multiple && name.present?)
+        }.compact.merge(defaults))
+      end
+
+      def call
+        render_element(body: safe_join([ combobox_input, combobox_chips, combobox_content, *hidden_inputs ].compact))
+      end
+
+      private
+
+      # Rails reads `foo[]` as a collection and `foo` as a scalar, so the
+      # brackets are what make several hidden inputs arrive as an array rather
+      # than as the last one to be parsed. Added only when the caller has not
+      # written them already.
+      def field_name
+        return name if !multiple || name.to_s.end_with?("[]")
+
+        "#{name}[]"
+      end
+
+      def hidden_inputs
+        return [] if name.blank?
+        return [ hidden_input(value) ] unless multiple
+
+        # An empty one first, so clearing every chip still submits the
+        # parameter — otherwise the key vanishes from the params and Rails
+        # leaves the association untouched instead of emptying it. This is the
+        # same trick `collection_select ... include_hidden: true` plays.
+        [ hidden_input("", target: false), *values.map { |v| hidden_input(v) } ]
+      end
+
+      def hidden_input(field_value, target: true)
+        attrs = { type: "hidden", name: field_name, value: field_value, autocomplete: "off" }
+        attrs["data-shadcn--combobox-target"] = "input" if target
+
+        tag.input(**attrs)
+      end
+    end
+  end
+end

data/app/components/shadcn/combobox/content/component.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Combobox
+    module Content
+      # The panel. Its class string is where Base UI's conventions are most
+      # visible — `data-open:`, `data-closed:`, `--anchor-width`,
+      # `--available-width`, `--transform-origin` — and reproducing it is why
+      # the controller asks `popper.js` to publish those four unprefixed names
+      # beside the `--radix-*` ones it already computes.
+      class Component < ApplicationViewComponent
+        default_tag :div
+        slot_name :"combobox-content"
+
+        style do
+          base {
+            # `isolate z-50` is upstream's *Positioner*, which this port has no
+            # element for — `floating.js` makes the wrapper — so they ride on
+            # the panel itself.
+            "isolate z-50 group/combobox-content relative max-h-96 w-(--anchor-width) max-w-(--available-width) " \
+            "min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden " \
+            "rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 " \
+            "data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 " \
+            "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 " \
+            "data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 " \
+            "*:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 " \
+            "*:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 " \
+            "*:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 " \
+            "data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95"
+          }
+        end
+
+        attr_reader :side, :align, :side_offset, :align_offset
+
+        def initialize(side: :bottom, align: :start, side_offset: 6, align_offset: 0, **attributes)
+          @side = side&.to_sym || :bottom
+          @align = align&.to_sym || :start
+          @side_offset = side_offset
+          @align_offset = align_offset
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            role: "listbox",
+            hidden: true,
+            "data-closed" => "",
+            "data-side" => side,
+            "data-shadcn--combobox-target" => "content",
+            "data-shadcn--combobox-side-value" => side,
+            "data-shadcn--combobox-align-value" => align,
+            "data-shadcn--combobox-side-offset-value" => side_offset,
+            "data-shadcn--combobox-align-offset-value" => align_offset
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Combobox
+    module Empty
+      # Shown when the filter leaves nothing. Upstream shows it with CSS alone —
+      # `hidden … group-data-empty/combobox-content:flex` — so the controller
+      # only has to put `data-empty` on the content, and this element needs no
+      # state of its own.
+      class Component < ApplicationViewComponent
+        default_tag :div
+        slot_name :"combobox-empty"
+
+        style do
+          base {
+            "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground " \
+            "group-data-empty/combobox-content:flex"
+          }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Combobox
+    module Input
+      # The field, inside an InputGroup with the chevron and — when asked for —
+      # the clear button in its trailing addon. Upstream composes exactly these
+      # three, and all three are ported here already.
+      class Component < ApplicationViewComponent
+        # No `data-slot` of its own: upstream renders
+        # `<ComboboxPrimitive.Input render={<InputGroupInput/>}/>`, so the field
+        # a person types into carries `input-group-control`. Read from the
+        # rendered example — `combobox-input` was invented here and does not
+        # exist upstream.
+        default_tag :input
+        slot_name :"input-group-control"
+
+        attr_reader :show_trigger, :show_clear, :disabled, :placeholder, :value
+
+        def initialize(show_trigger: true, show_clear: false, disabled: false,
+                       placeholder: nil, value: nil, **attributes)
+          @show_trigger = show_trigger
+          @show_clear = show_clear
+          @disabled = disabled
+          @placeholder = placeholder
+          @value = value
+          super(**attributes)
+        end
+
+        # Base UI's combobox input is a `role="combobox"` with the list under
+        # `aria-controls`, and the panel's open state on `aria-expanded` — the
+        # same contract Radix's select trigger has, which is why the controller
+        # can wire both the same way.
+        def element_attributes(**defaults)
+          super(**{
+            type: "text",
+            value:,
+            placeholder:,
+            disabled: disabled.presence,
+            role: "combobox",
+            autocomplete: "off",
+            autocapitalize: "none",
+            autocorrect: "off",
+            spellcheck: "false",
+            "aria-autocomplete" => "list",
+            "aria-haspopup" => "listbox",
+            "aria-expanded" => "false",
+            "data-shadcn--combobox-target" => "search",
+            # `click`, not `focus`: taking an option puts the caret back in the
+            # field, and on `focus` that reopened the panel the choice had just
+            # closed. A pointer opens it by clicking, a keyboard by pressing
+            # Down — which is what both do anyway.
+            "data-action" => "input->shadcn--combobox#search click->shadcn--combobox#open " \
+                             "keydown->shadcn--combobox#keydown"
+          }.compact.merge(defaults))
+        end
+
+        def call
+          render(Shadcn::InputGroup::Component.new(class: "w-auto")) do
+            safe_join([ field, addon ].compact)
+          end
+        end
+
+        private
+
+        # The input itself is an `InputGroupInput`, which is upstream's `render`
+        # prop — a subclass here, the gem's mapping for `asChild`.
+        def field
+          render(Shadcn::InputGroup::Input::Component.new(**element_attributes))
+        end
+
+        def addon
+          return if !show_trigger && !show_clear
+
+          render(Shadcn::InputGroup::Addon::Component.new(align: :"inline-end")) do
+            safe_join([
+              (render(Trigger::Component.new(disabled:)) if show_trigger),
+              (render(Clear::Component.new(disabled:)) if show_clear)
+            ].compact)
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Combobox
+    module Item
+      # One option, with the tick that marks the chosen one. `data-highlighted`
+      # is the virtual focus — Base UI and Radix agree on that name, which is
+      # why the select's arrangement carries over unchanged.
+      class Component < ApplicationViewComponent
+        INDICATOR_CLASSES = "pointer-events-none absolute right-2 flex size-4 items-center justify-center"
+
+        default_tag :div
+        slot_name :"combobox-item"
+
+        style do
+          base {
+            "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm " \
+            "outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground " \
+            "data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none " \
+            "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          }
+        end
+
+        attr_reader :value, :label, :selected, :disabled
+
+        def initialize(value: nil, label: nil, selected: false, disabled: false, **attributes)
+          @value = value
+          @label = label
+          @selected = selected
+          @disabled = disabled
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            id: item_id,
+            role: "option",
+            "aria-selected" => selected.to_s,
+            "data-disabled" => (disabled.presence && ""),
+            "data-value" => value,
+            "data-label" => label,
+            "data-shadcn--combobox-target" => "item",
+            "data-action" => "click->shadcn--combobox#choose pointermove->shadcn--combobox#hover"
+          }.compact.merge(defaults))
+        end
+
+        def call
+          render_element(body: safe_join([ content, indicator ]))
+        end
+
+        private
+
+        def indicator
+          tag.span(
+            render(Icon::Component.new("check", class: "pointer-events-none size-4 pointer-coarse:size-5")),
+            class: INDICATOR_CLASSES,
+            "data-slot": "combobox-item-indicator",
+            hidden: !selected,
+            "data-shadcn--combobox-target": "indicator"
+          )
+        end
+
+        def item_id
+          attributes[:id] || "shadcn-combobox-item-#{SecureRandom.hex(4)}"
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Combobox
+    module List
+      # The scrolling part of the panel. `data-empty` is Base UI's, and the
+      # empty state's own class reads it through
+      # `group-data-empty/combobox-content:flex` — so the attribute lands on the
+      # content and the padding rule here reads it too.
+      class Component < ApplicationViewComponent
+        default_tag :div
+        slot_name :"combobox-list"
+
+        style do
+          base {
+            "max-h-[min(calc(--spacing(96)---spacing(9)),calc(var(--available-height)---spacing(9)))] " \
+            "scroll-py-1 overflow-y-auto p-1 data-empty:p-0"
+          }
+        end
+
+        def element_attributes(**defaults)
+          super(**{ "data-shadcn--combobox-target" => "list" }.merge(defaults))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Combobox
+    class Preview < ApplicationViewComponentPreview
+      # Upstream's own first example: type to filter, arrows to walk, Enter to
+      # take.
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Clear": the X that empties the field, which hides the
+      # chevron while it is there — upstream's own rule, in a class.
+      def with_clear
+        render_with_template
+      end
+
+      # Groups with labels, and the separator between them.
+      def grouped
+        render_with_template
+      end
+
+      # Multiple selection: the chips box in place of the field. Two values
+      # start chosen, so the server-rendered half — the ticks, the chips and the
+      # hidden inputs agreeing before anything is clicked — is covered too.
+      def multiple
+        render_with_template
+      end
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+<%# Upstream's own example. The items are server-rendered and the controller
+    filters them by substring — Base UI's default, and the same call the
+    searchable select makes: a combobox completes a value from a list its caller
+    ordered, where the palette ranks answers. %>
+<%
+  languages = [ %w[js JavaScript], %w[rb Ruby], %w[py Python], %w[go Go], %w[rs Rust], %w[ex Elixir] ]
+%>
+<div class="w-64">
+  <%= render(Shadcn::Combobox::Component.new(name: "project[language]")) do |combobox| %>
+    <% combobox.with_combobox_input(placeholder: "Search a language…") %>
+    <% combobox.with_combobox_content do %>
+      <%= render(Shadcn::Combobox::List::Component.new) do %>
+        <% languages.each do |value, label| %>
+          <%= render(Shadcn::Combobox::Item::Component.new(value:, label:)) { label } %>
+        <% end %>
+      <% end %>
+      <%= render(Shadcn::Combobox::Empty::Component.new) { "No language found." } %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/shadcn/combobox/previews/grouped.html.erb

@@ -0,0 +1,25 @@
+<%# Groups, their labels and the rule between them — the three parts `part`
+    declares, because each is an element with a `data-slot` and fixed classes. %>
+<div class="w-64">
+  <%= render(Shadcn::Combobox::Component.new(name: "project[stack]")) do |combobox| %>
+    <% combobox.with_combobox_input(placeholder: "Search…") %>
+    <% combobox.with_combobox_content do %>
+      <%= render(Shadcn::Combobox::List::Component.new) do %>
+        <%= render(Shadcn::Combobox::Group::Component.new) do %>
+          <%= render(Shadcn::Combobox::Label::Component.new) { "Languages" } %>
+          <% [ %w[rb Ruby], %w[js JavaScript] ].each do |value, label| %>
+            <%= render(Shadcn::Combobox::Item::Component.new(value:, label:)) { label } %>
+          <% end %>
+        <% end %>
+        <%= render(Shadcn::Combobox::Separator::Component.new) %>
+        <%= render(Shadcn::Combobox::Group::Component.new) do %>
+          <%= render(Shadcn::Combobox::Label::Component.new) { "Databases" } %>
+          <% [ %w[pg PostgreSQL], %w[sqlite SQLite] ].each do |value, label| %>
+            <%= render(Shadcn::Combobox::Item::Component.new(value:, label:)) { label } %>
+          <% end %>
+        <% end %>
+      <% end %>
+      <%= render(Shadcn::Combobox::Empty::Component.new) { "Nothing found." } %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/shadcn/combobox/previews/multiple.html.erb

@@ -0,0 +1,28 @@
+<%# Multiple selection: the chips box in place of the field, one chip per chosen
+    value, and `multiple: true` on the root.
+
+    Two of the values start chosen, so the preview covers the server-rendered
+    side as well as the controller's — the ticks in the list, the hidden inputs
+    and the chips all have to agree before a single click happens. %>
+<%
+  languages = [ %w[js JavaScript], %w[rb Ruby], %w[py Python], %w[go Go], %w[rs Rust], %w[ex Elixir] ]
+  chosen = %w[rb go]
+%>
+<div class="w-80">
+  <%= render(Shadcn::Combobox::Component.new(name: "project[languages]", value: chosen, multiple: true)) do |combobox| %>
+    <% combobox.with_combobox_chips do %>
+      <% chosen.each do |value| %>
+        <%= render(Shadcn::Combobox::Chip::Component.new(value:)) { languages.to_h[value] } %>
+      <% end %>
+      <%= render(Shadcn::Combobox::ChipInput::Component.new(placeholder: "Add a language…")) %>
+    <% end %>
+    <% combobox.with_combobox_content do %>
+      <%= render(Shadcn::Combobox::List::Component.new) do %>
+        <% languages.each do |value, label| %>
+          <%= render(Shadcn::Combobox::Item::Component.new(value:, label:, selected: chosen.include?(value))) { label } %>
+        <% end %>
+      <% end %>
+      <%= render(Shadcn::Combobox::Empty::Component.new) { "No language found." } %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/shadcn/combobox/previews/with_clear.html.erb

@@ -0,0 +1,16 @@
+<%# Upstream's "Clear". The chevron hides itself while the X is there —
+    `group-has-data-[slot=combobox-clear]/input-group:hidden`, upstream's own
+    class, which works here because the port renders the same `data-slot`. %>
+<div class="w-64">
+  <%= render(Shadcn::Combobox::Component.new(name: "project[framework]", value: "rails", label: "Rails")) do |combobox| %>
+    <% combobox.with_combobox_input(placeholder: "Search a framework…", value: "Rails", show_clear: true) %>
+    <% combobox.with_combobox_content do %>
+      <%= render(Shadcn::Combobox::List::Component.new) do %>
+        <% [ %w[rails Rails], %w[hotwire Hotwire], %w[sinatra Sinatra], %w[hanami Hanami] ].each do |value, label| %>
+          <%= render(Shadcn::Combobox::Item::Component.new(value:, label:, selected: value == "rails")) { label } %>
+        <% end %>
+      <% end %>
+      <%= render(Shadcn::Combobox::Empty::Component.new) { "Nothing found." } %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/shadcn/combobox/trigger/component.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Combobox
+    module Trigger
+      # The chevron beside the field. Upstream renders it *through*
+      # `InputGroupButton` with `asChild`, so the button's own classes land on
+      # it — here that is a subclass, which is this gem's mapping for `asChild`.
+      class Component < Shadcn::InputGroup::Button::Component
+        ICON_CLASSES = "pointer-events-none size-4 text-muted-foreground"
+
+        # `input-group-button`, not `combobox-trigger`: upstream's wrapper sets
+        # the slot last and `asChild` merges the two into one element, so that
+        # is the name the rendered button carries. Confirmed on the page rather
+        # than reasoned about.
+        slot_name :"input-group-button"
+
+        def initialize(**attributes)
+          super(variant: :ghost, size: :"icon-xs", **attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            role: "combobox",
+            # Named, where upstream's is not. Its rendered trigger is a
+            # `role="combobox"` with a chevron in it and no text at all, and a
+            # role that takes a name and has none is what axe calls a
+            # `button-name` violation — the same correction Select, Checkbox and
+            # Switch needed here.
+            "aria-label" => shadcn_t("combobox.toggle"),
+            "aria-haspopup" => "dialog",
+            "aria-expanded" => "false",
+            tabindex: "0",
+            "data-shadcn--combobox-target" => "trigger",
+            "data-action" => "click->shadcn--combobox#toggle"
+          }.merge(defaults))
+        end
+
+        def css_classes(extra = nil)
+          super([
+            "[&_svg:not([class*='size-'])]:size-4",
+            "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent",
+            extra
+          ].compact.join(" "))
+        end
+
+        def call
+          render_element(body: render(Icon::Component.new("chevron-down", class: ICON_CLASSES,
+                                                          "data-slot": "combobox-trigger-icon")))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/combobox.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The parts of the Combobox family that are an element with a `data-slot` and
+  # fixed classes.
+  module Combobox
+    extend Parts
+
+    part :value, slot: "combobox-value", tag: :span
+    part :group, slot: "combobox-group"
+    part :label, slot: "combobox-label",
+                 classes: "px-2 py-1.5 text-xs text-muted-foreground pointer-coarse:px-3 " \
+                          "pointer-coarse:py-2 pointer-coarse:text-sm"
+    part :separator, slot: "combobox-separator", classes: "-mx-1 my-1 h-px bg-border"
+  end
+end

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

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Command
+    # Port of registry/new-york-v4/ui/command.tsx, whose behaviour is `cmdk` —
+    # 1,091 lines of TSX plus a 162-line fuzzy scorer, over four Radix packages,
+    # vendored at `vendor/cmdk/`.
+    #
+    # Every class is in the TSX, and unlike `chart.tsx` its selectors reach a
+    # DOM this port renders: `[cmdk-item]`, `[cmdk-group-heading]`,
+    # `[cmdk-input-wrapper]` are how shadcn spaces the palette out, so the parts
+    # carry those bare attributes and upstream's own rules apply. See
+    # [features/command.md](../../../../.claude/docs/features/command.md).
+    class Component < ApplicationViewComponent
+      default_tag :div
+      slot_name :command
+
+      style do
+        base { "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground" }
+      end
+
+      renders_one :command_input, ->(**options) { Input::Component.new(ids:, **options) }
+      renders_one :command_list, ->(**options) { List::Component.new(ids:, **options) }
+
+      attr_reader :label
+
+      # `label:` names the listbox, as cmdk's own `label` prop does
+      # (`vendor/cmdk/index.tsx:350`): a list of options is a control, and a
+      # control with no name is one a screen reader reads as nothing.
+      def initialize(label: nil, **attributes)
+        @label = label
+        super(**attributes)
+      end
+
+      # The three ids the ARIA wiring needs, decided once here and handed to the
+      # parts: an input points `aria-controls` at the list, and the list is
+      # named by a label that may not exist yet when the input renders.
+      def ids
+        @ids ||= { input: generated(:input), list: generated(:list), label: generated(:label) }
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          "cmdk-root" => "",
+          "data-controller" => "shadcn--command"
+        }.merge(defaults))
+      end
+
+      def call
+        render_element(body: safe_join([ hidden_label, command_input, command_list, content ].compact))
+      end
+
+      private
+
+      # cmdk renders the label as a visually hidden element when it is given a
+      # string (index.tsx:591-596). Without it `aria-labelledby` on the input
+      # points at nothing, which is worse than no label at all.
+      def hidden_label
+        return unless label.present?
+
+        tag.label(label, id: ids[:label], for: ids[:input], class: "sr-only")
+      end
+
+      def generated(part) = "shadcn-command-#{part}-#{SecureRandom.hex(4)}"
+    end
+  end
+end