shadcn_view_component 0.3.3

data/app/components/shadcn/scroll_area/viewport/component.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module ScrollArea
+    module Viewport
+      # The box that actually scrolls. Native scrollbars are hidden on it —
+      # `shadcn.css` carries the rule Radix injects as a `<style>` tag
+      # (vendor/radix/ui/scroll-area.tsx:266-278), keyed on the slot rather than
+      # on a class, so a host cannot switch it off by accident and there is no
+      # token for `parity_spec` to miss.
+      #
+      # `overflow` is inline and per axis, as Radix writes it (`:222-223`):
+      # `scroll` on an axis with a scrollbar, `hidden` on one without. It has to
+      # be `scroll` rather than `auto` — the element must keep its scrollable
+      # geometry even when the custom bar is the only thing showing it.
+      class Component < ApplicationViewComponent
+        slot_name :"scroll-area-viewport"
+
+        style do
+          base {
+            "size-full rounded-[inherit] transition-[color,box-shadow] outline-none " \
+            "focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+          }
+        end
+
+        attr_reader :horizontal, :vertical
+
+        def initialize(horizontal: false, vertical: true, **attributes)
+          @horizontal = horizontal
+          @vertical = vertical
+          super(**attributes)
+        end
+
+        # `tabindex: 0`, which Radix does **not** set — measured, there is no
+        # `tabIndex` anywhere in the primitive. A deliberate divergence, for
+        # three reasons that line up: axe fails a scrollable region with no
+        # keyboard access; Chrome and Firefox make scrollers focusable
+        # themselves and Safari does not, so without this the component's
+        # keyboard behaviour depends on the browser; and shadcn's own classes
+        # here style `focus-visible`, which only means anything on an element
+        # that can be focused. The sibling primitive shadcn publishes does set
+        # it on its viewport (`vendor/shadcn-react/message-scroller/components.tsx:209`).
+        def element_attributes(**defaults)
+          super(**{
+            tabindex: 0,
+            style: merged_style(
+              "overflow-x: #{horizontal ? 'scroll' : 'hidden'}; " \
+              "overflow-y: #{vertical ? 'scroll' : 'hidden'};"
+            ),
+            "data-shadcn--scroll-area-target" => "viewport"
+          }.merge(defaults))
+        end
+
+        # `display: table` with `min-width: 100%`, which is Radix's own
+        # (`:296-299`) and is the only reason content *size* can be measured at
+        # all: a block child matches the viewport's width and would report the
+        # same number however wide its content really is.
+        def call
+          render_element(
+            body: tag.div(
+              content,
+              style: "min-width: 100%; display: table;",
+              "data-shadcn--scroll-area-target": "content"
+            )
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/scroll_area.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The one part of the ScrollArea family that is an element with a `data-slot`
+  # and fixed classes.
+  module ScrollArea
+    extend Parts
+
+    # Radix's `ScrollAreaThumb`. Its width, height and transform are inline and
+    # the controller's — the classes only make it a rounded bar.
+    part :thumb, slot: "scroll-area-thumb",
+                 classes: "relative flex-1 rounded-full bg-border"
+  end
+end

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

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Select
+    # Port of registry/new-york-v4/ui/select.tsx
+    #
+    # A `role="combobox"` trigger driving a `role="listbox"` layer. When `name:`
+    # is given a hidden input mirrors the selection, the way Radix's BubbleSelect
+    # does, so the control submits with the form.
+    class Component < ApplicationViewComponent
+      include Concerns::SubmitsValue
+      # Lambda slots so `searchable` reaches the two parts that change shape
+      # because of it — the same way ToggleGroup feeds variant and size to its
+      # items, and for the same reason React would use context.
+      renders_one :trigger, ->(**kwargs, &block) {
+        Trigger::Component.new(searchable:, **kwargs, &block)
+      }
+      renders_one :select_content, ->(**kwargs, &block) {
+        Content::Component.new(searchable:, **kwargs, &block)
+      }
+
+      slot_name :select
+
+      attr_reader :open, :value, :name, :placeholder, :side, :align, :side_offset, :searchable
+
+      def initialize(value: nil, name: nil, placeholder: nil, open: false,
+                     side: :bottom, align: :center, side_offset: 4, searchable: false,
+                     **attributes)
+        @searchable = searchable
+        @value = value.to_s
+        @name = name
+        @placeholder = placeholder.to_s
+        @open = open
+        @side = side&.to_sym || :bottom
+        @align = align&.to_sym || :center
+        @side_offset = side_offset
+        super(**attributes)
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          style: merged_style(CONTENTS_STYLE),
+          "data-controller" => "shadcn--select",
+          "data-shadcn--select-open-value" => open,
+          "data-shadcn--select-value-value" => value,
+          "data-shadcn--select-placeholder-value" => placeholder,
+          "data-shadcn--select-side-value" => side,
+          "data-shadcn--select-align-value" => align,
+          "data-shadcn--select-side-offset-value" => side_offset,
+          "data-shadcn--select-searchable-value" => searchable
+        }.merge(defaults))
+      end
+
+      def call
+        render_element(body: safe_join([ trigger, select_content, content, hidden_input ].compact))
+      end
+
+      private
+
+      def hidden_input
+        return unless name
+
+        tag.input(**hidden_input_attributes("data-shadcn--select-target" => "input"))
+      end
+    end
+  end
+end

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

@@ -0,0 +1,157 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Select
+    module Content
+      # SelectContent — the viewport and the two scroll buttons are part of the
+      # markup shadcn emits, so they are reproduced here.
+      class Component < ApplicationViewComponent
+        # `shrink-0` mirrors the `flexShrink: 0` Radix sets inline
+        # (vendor/radix/ui/select.tsx:1691): the buttons keep their height while
+        # the viewport takes the rest, which is what pins them to the edges.
+        SCROLL_BUTTON_CLASSES = "flex shrink-0 cursor-default items-center justify-center py-1"
+
+        renders_many :items, "Shadcn::Select::Item::Component"
+
+        slot_name :"select-content"
+
+        style do
+          base {
+            "relative z-50 flex flex-col max-h-(--radix-select-content-available-height) min-w-[8rem] " \
+            "origin-(--radix-select-content-transform-origin) overflow-x-hidden " \
+            "overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md " \
+            "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-[state=closed]:animate-out data-[state=closed]:fade-out-0 " \
+            "data-[state=closed]:zoom-out-95 data-[state=open]:animate-in " \
+            "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
+          }
+
+          variants {
+            position {
+              popper {
+                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 " \
+                "data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"
+              }
+              send(:"item-aligned") { "" }
+            }
+          }
+
+          defaults { { position: :"item-aligned" } }
+        end
+
+        attr_reader :position, :searchable
+
+        def initialize(position: :"item-aligned", searchable: false, **attributes)
+          @position = position&.to_sym || :"item-aligned"
+          @searchable = searchable
+          super(**attributes)
+        end
+
+        def style_variants
+          { position: }
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            # A searchable popover holds a text field *and* a list, so it
+            # cannot be the list: a textbox is not an allowed child of a
+            # listbox. The role moves to Select::List and this becomes the
+            # dialog that contains both, which is what axe accepts and what
+            # shadcn's aria variant emits.
+            role: (searchable ? "dialog" : "listbox"),
+            "aria-label" => (shadcn_t("select.dialog_label") if searchable),
+            tabindex: "-1",
+            "data-state" => "closed",
+            hidden: true,
+            "data-shadcn--select-target" => "content",
+            # `scroll` does not bubble, but Stimulus binds the action to this
+            # element itself, so it fires. Which element actually scrolls
+            # differs by mode — see the controller's `scrollContainer`.
+            "data-action" => "keydown->shadcn--select#contentKeydown"
+          }.merge(defaults))
+        end
+
+        def call
+          render_element(body: safe_join([
+            scroll_button("select-scroll-up-button", "chevron-up", "scrollUpButton"),
+            viewport,
+            scroll_button("select-scroll-down-button", "chevron-down", "scrollDownButton")
+          ]))
+        end
+
+        private
+
+        def viewport
+          tag.div(
+            searchable ? searchable_body : options,
+            class: viewport_classes,
+            "data-shadcn--select-target": "viewport",
+            # `scroll` does not bubble, but Stimulus binds to this element
+            # itself, so it fires. In a searchable panel the list scrolls
+            # instead and carries its own copy of this action.
+            "data-action": "scroll->shadcn--select#syncScrollButtons"
+          )
+        end
+
+        # The field is pinned and the list scrolls under it, rather than the
+        # whole popover scrolling and taking the field with it.
+        def searchable_body
+          safe_join([
+            render(Search::Component.new),
+            render(List::Component.new) { options },
+            render(Empty::Component.new)
+          ])
+        end
+
+        def options
+          safe_join([ items, content ].flatten.compact)
+        end
+
+        # Radix puts the scrolling here, not on the content: `position: relative`
+        # so an item's offsetTop is measured against the viewport rather than
+        # the scroll-up button, `flex: 1` to take the space the buttons leave,
+        # and `overflow: hidden auto` (vendor/radix/ui/select.tsx:1240-1247).
+        # Without it the content scrolled and carried the buttons out of sight
+        # with the options — see decisions/04-bugs-fixed.md.
+        VIEWPORT_CLASSES = "relative flex-1 overflow-x-hidden overflow-y-auto"
+
+        def viewport_classes
+          # A searchable panel pins its search field, so the scrolling moves one
+          # level further in, onto the list.
+          return ShadcnViewComponent.cn("relative flex-1 flex flex-col overflow-hidden") if searchable
+
+          extra =
+            if position == :popper
+              "h-[var(--radix-select-trigger-height)] w-full " \
+              "min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+            end
+
+          ShadcnViewComponent.cn(VIEWPORT_CLASSES, "p-1", extra)
+        end
+
+        # Radix mounts these only while there is somewhere to scroll and
+        # unmounts them otherwise (vendor/radix/ui/select.tsx:1594, :1642).
+        # Rendered hidden here instead, which is this gem's convention for the
+        # same thing — see decisions/02-javascript.md, "Indicators are rendered
+        # hidden, not omitted" — so the controller only toggles a flag.
+        #
+        # `aria-hidden` because they are a pointer affordance: the keyboard
+        # scrolls by moving the highlight (vendor/radix/ui/select.tsx:1691).
+        def scroll_button(slot, icon, target)
+          tag.div(
+            render(Icon::Component.new(icon, class: "size-4")),
+            "data-slot": slot,
+            "aria-hidden": true,
+            hidden: true,
+            "data-shadcn--select-target": target,
+            "data-action": "pointerdown->shadcn--select#startAutoScroll " \
+                           "pointermove->shadcn--select#startAutoScroll " \
+                           "pointerleave->shadcn--select#stopAutoScroll",
+            class: SCROLL_BUTTON_CLASSES
+          )
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Select
+    module Empty
+      # Shown when the filter matches nothing.
+      #
+      # A *sibling* of the listbox rather than a child of it. shadcn's aria
+      # variant nests its empty state inside the list and gives it
+      # `role="option"` — an option that cannot be chosen — which is how React
+      # Aria's collection renders one. Outside the list the question does not
+      # arise, and a non-option inside a listbox is precisely the shape axe
+      # rejected while this component's structure was being chosen.
+      #
+      # The classes are this gem's own. Upstream's are a single
+      # `cn-select-empty-aria`, defined across the themed sheets in
+      # `registry/styles/`, which this gem does not ship.
+      class Component < ApplicationViewComponent
+        slot_name :"select-empty"
+
+        style do
+          base { "py-6 text-center text-sm text-muted-foreground" }
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            hidden: true,
+            "data-shadcn--select-target" => "empty"
+          }.merge(defaults))
+        end
+
+        def call
+          render_element(body: content.presence || shadcn_t("select.empty"))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Select
+    module Group
+      # SelectGroup
+      class Component < ApplicationViewComponent
+        slot_name :"select-group"
+
+        def element_attributes(**defaults)
+          super(**{ role: "group" }.merge(defaults))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Select
+    module Item
+      # SelectItem
+      class Component < ApplicationViewComponent
+        INDICATOR_CLASSES = "absolute right-2 flex size-3.5 items-center justify-center"
+
+        slot_name :"select-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 focus:bg-accent " \
+            "focus:text-accent-foreground 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 " \
+            "[&_svg:not([class*='text-'])]:text-muted-foreground " \
+            "*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2"
+          }
+        end
+
+        attr_reader :value, :selected, :disabled
+
+        def initialize(value:, selected: false, disabled: false, **attributes)
+          @value = value.to_s
+          @selected = selected
+          @disabled = disabled
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            role: "option",
+            tabindex: "-1",
+            "aria-selected" => selected.to_s,
+            "data-value" => value,
+            "data-state" => (selected ? "checked" : "unchecked"),
+            "data-disabled" => (true if disabled),
+            "data-shadcn--select-target" => "item",
+            "data-action" => "click->shadcn--select#select " \
+                             "pointerenter->shadcn--select#pointerenter"
+          }.merge(defaults))
+        end
+
+        def call
+          render_element(body: safe_join([ indicator, item_text ]))
+        end
+
+        private
+
+        def indicator
+          tag.span(
+            tag.span(
+              render(Icon::Component.new("check", class: "size-4")),
+              hidden: (true unless selected)
+            ),
+            "data-slot": "select-item-indicator",
+            class: INDICATOR_CLASSES
+          )
+        end
+
+        def item_text
+          tag.span(content, "data-slot": "select-item-text")
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Select
+    module List
+      # Where the options live once a search field shares the popover.
+      #
+      # In the plain select the listbox role sits on SelectContent itself. It
+      # cannot when a text field is in there too: a textbox is not an allowed
+      # child of a listbox, and axe reports `aria-required-children` — critical —
+      # for exactly that shape. shadcn's aria variant splits them the same way.
+      #
+      # Classes are that variant's verbatim, except `p-1` for its `p-0`: the
+      # padding this port keeps on the viewport moves here, because the viewport
+      # now holds the search field too.
+      class Component < ApplicationViewComponent
+        slot_name :"select-list"
+
+        style do
+          base {
+            "group/select-list max-h-[inherit] overflow-x-hidden overflow-y-auto p-1 outline-hidden"
+          }
+        end
+
+        def element_attributes(**defaults)
+          # A named listbox, because an unnamed one is an
+          # `aria-input-field-name` violation — serious, and WCAG rather than
+          # best-practice. The dialog around it is named separately, so a
+          # screen reader announces the popover and then the list rather than
+          # the same words twice. shadcn's aria variant names both too.
+          super(**{
+            role: "listbox",
+            "data-action" => "scroll->shadcn--select#syncScrollButtons",
+            "aria-label" => shadcn_t("select.list_label"),
+            "data-shadcn--select-target" => "list"
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Select
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      def searchable
+        render_with_template
+      end
+
+      def scrollable
+        render_with_template
+      end
+
+      # Upstream's "Disabled" — as a disabled *item*, which is the half a listbox has to answer for — and "Invalid".
+      def states
+        render_with_template
+      end
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+<%= render(Shadcn::Select::Component.new(name: "fruit", placeholder: "Select a fruit")) do |s| %>
+  <%# `role="combobox"` forbids taking the name from its own content. %>
+  <% s.with_trigger(class: "w-[200px]", "aria-label": "Favourite fruit") do |tr| %>
+    <% tr.with_value(placeholder: "Select a fruit") %>
+  <% end %>
+  <%# Items go in the block rather than through the `item` slot, so the group
+      label keeps its place above them: slot content renders before block
+      content. %>
+  <% s.with_select_content do %>
+    <%= render(Shadcn::Select::Group::Component.new) do %>
+      <%= render(Shadcn::Select::Label::Component.new) { "Fruits" } %>
+      <% %w[Apple Banana Blueberry Grapes Pineapple].each do |fruit| %>
+        <%= render(Shadcn::Select::Item::Component.new(value: fruit.downcase)) { fruit } %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/select/previews/scrollable.html.erb

@@ -0,0 +1,19 @@
+<%# Long enough to overflow the popover, which is what puts the two scroll
+    buttons to work: they stay hidden while there is nowhere to scroll and
+    appear per direction, as Radix's do. %>
+<%= render(Shadcn::Select::Component.new(name: "timezone", placeholder: "Select a timezone")) do |s| %>
+  <% s.with_trigger(class: "w-[240px]", "aria-label": "Timezone") do |tr| %>
+    <% tr.with_value(placeholder: "Select a timezone") %>
+  <% end %>
+  <% s.with_select_content do %>
+    <% [
+         "Auckland", "Bangkok", "Berlin", "Cairo", "Chicago", "Denver",
+         "Dublin", "Helsinki", "Istanbul", "Jakarta", "Karachi", "Lagos",
+         "Lima", "Lisbon", "London", "Madrid", "Manila", "Melbourne",
+         "Mexico City", "Moscow", "Nairobi", "New York", "Oslo", "Paris",
+         "Rome", "Seoul", "Singapore", "Sydney", "Tokyo", "Toronto"
+       ].each do |city| %>
+      <%= render(Shadcn::Select::Item::Component.new(value: city.parameterize)) { city } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/select/previews/searchable.html.erb

@@ -0,0 +1,18 @@
+<%# The trigger is a plain button here rather than a combobox, so it could take
+    its name from its own text — but naming it explicitly is what the FormBuilder
+    does for every select, and a preview is documentation. %>
+<%= render(Shadcn::Select::Component.new(name: "fruit", placeholder: "Select a fruit", searchable: true)) do |s| %>
+  <% s.with_trigger(class: "w-[220px]", "aria-label": "Favourite fruit") do |tr| %>
+    <% tr.with_value(placeholder: "Select a fruit") %>
+  <% end %>
+  <%# Items go in the block rather than through the `item` slot, so anything
+      rendered beside them keeps its place — the same reason default.html.erb
+      does it. %>
+  <% s.with_select_content do %>
+    <%= render(Shadcn::Select::Item::Component.new(value: "apple")) { "Apple" } %>
+    <%= render(Shadcn::Select::Item::Component.new(value: "banana")) { "Banana" } %>
+    <%= render(Shadcn::Select::Item::Component.new(value: "blueberry")) { "Blueberry" } %>
+    <%= render(Shadcn::Select::Item::Component.new(value: "grapes")) { "Grapes" } %>
+    <%= render(Shadcn::Select::Item::Component.new(value: "pineapple")) { "Pineapple" } %>
+  <% end %>
+<% end %>

data/app/components/shadcn/select/previews/states.html.erb

@@ -0,0 +1,25 @@
+<%# Upstream's "Disabled" and "Invalid". The first is a *disabled item* as well
+    as a disabled trigger — the two are different things and only the item
+    version shows what a listbox does with one. %>
+<div class="flex items-start gap-4">
+  <%= render(Shadcn::Select::Component.new(name: "plan", placeholder: "Choose a plan")) do |s| %>
+    <% s.with_trigger(class: "w-[200px]", "aria-label": "Plan") do |tr| %>
+      <% tr.with_value(placeholder: "Choose a plan") %>
+    <% end %>
+    <% s.with_select_content do %>
+      <%= render(Shadcn::Select::Item::Component.new(value: "free")) { "Free" } %>
+      <%= render(Shadcn::Select::Item::Component.new(value: "pro")) { "Pro" } %>
+      <%= render(Shadcn::Select::Item::Component.new(value: "enterprise", disabled: true)) { "Enterprise — sales only" } %>
+    <% end %>
+  <% end %>
+
+  <%= render(Shadcn::Select::Component.new(name: "region", placeholder: "Pick a region")) do |s| %>
+    <% s.with_trigger(class: "w-[200px]", "aria-label": "Region", "aria-invalid": "true") do |tr| %>
+      <% tr.with_value(placeholder: "Pick a region") %>
+    <% end %>
+    <% s.with_select_content do %>
+      <%= render(Shadcn::Select::Item::Component.new(value: "eu")) { "Europe" } %>
+      <%= render(Shadcn::Select::Item::Component.new(value: "us")) { "United States" } %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/shadcn/select/search/component.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Select
+    module Search
+      # The filter field, composing the already-ported InputGroup the way
+      # shadcn's aria variant does — its popover renders `data-slot="input-group"`
+      # around the control, with the magnifier as an addon.
+      #
+      # Two things it does *not* copy from that variant, both with reasons in
+      # decisions/01-architecture.md: the control keeps `input-group-control`
+      # rather than being restamped `select-input`, because this port's group
+      # raises its focus ring off that slot name and the aria one does not use
+      # `has-[[data-slot=…]]` selectors at all; and the field carries an
+      # accessible name, where upstream's has none — axe calls an unnamed one a
+      # critical `label` violation.
+      class Component < ApplicationViewComponent
+        slot_name :"select-input-wrapper"
+
+        style do
+          base { "p-1 pb-0" }
+        end
+
+        attr_reader :label
+
+        def initialize(label: nil, **attributes)
+          @label = label
+          super(**attributes)
+        end
+
+        def call
+          render_element(body: render(InputGroup::Component.new) { safe_join([ field, addon ]) })
+        end
+
+        private
+
+        def field
+          render(InputGroup::Input::Component.new(
+                   "aria-label": label || shadcn_t("select.search_label"),
+                   "aria-autocomplete": "list",
+                   "data-shadcn--select-target": "search",
+                   "data-action": "input->shadcn--select#search"
+                 ))
+        end
+
+        def addon
+          render(InputGroup::Addon::Component.new) do
+            render(Icon::Component.new("search", class: "size-4"))
+          end
+        end
+      end
+    end
+  end
+end