ariadne_view_components 0.0.13 → 0.0.15

data/app/components/ariadne/button_component.rb

@@ -9,6 +9,7 @@ module Ariadne
     LINK_SCHEME = :link
 
     SCHEME_CLASS_MAPPINGS = {
+      link: Ariadne::LinkComponent::DEFAULT_ACTIONABLE_CLASSES,
       none: "",
       default: "ariadne-text-purple-800 ariadne-bg-purple-50 hover:ariadne-bg-purple-100 ariadne-border-purple-300 focus:ariadne-ring-offset-purple-50 focus:ariadne-ring-purple-600",
       info: "ariadne-text-blue-800 ariadne-bg-blue-50 hover:ariadne-bg-blue-100 ariadne-border-blue-300 focus:ariadne-ring-offset-blue-50 focus:ariadne-ring-blue-600",
@@ -109,10 +110,10 @@ module Ariadne
     #     <% end %>
     #
     # @param tag [Symbol]  <%= one_of(Ariadne::BaseButton::TAG_OPTIONS) %>
-    # @param type [Symbol] <%= one_of(Ariadne::BaseButton::TYPE_OPTIONS) %>
+    # @param type [Symbol] <%= one_of(Ariadne::BaseButton::VALID_TYPES) %>
     # @param scheme [Symbol] <%= one_of(Ariadne::ButtonComponent::VALID_SCHEMES) %>
     # @param size [Symbol] <%= one_of(Ariadne::BaseButton::VALID_SIZES) %>
-    # @param type [Symbol] <%= one_of(Ariadne::BaseButton::TYPE_OPTIONS) %>
+    # @param dropdown [Boolean] Whether or not to render a dropdown caret.
     # @param classes [String] <%= link_to_classes_docs %>
     # @param attributes [Hash] <%= link_to_attributes_docs %>
     def initialize(
@@ -120,18 +121,19 @@ module Ariadne
       type: Ariadne::BaseButton::DEFAULT_TYPE,
       scheme: DEFAULT_SCHEME,
       size: BaseButton::DEFAULT_SIZE,
+      dropdown: false,
       classes: "",
       attributes: {}
     )
       @tag = tag
       @type = type
-      @scheme = scheme
 
       @attributes = attributes
       @id = @attributes[:id]
 
       @size = fetch_or_raise(Ariadne::BaseButton::VALID_SIZES, size)
       @scheme = fetch_or_raise(VALID_SCHEMES, scheme)
+      @scheme = LINK_SCHEME if @tag == :a
 
       @classes = class_names(
         SCHEME_CLASS_MAPPINGS[@scheme],
@@ -139,6 +141,10 @@ module Ariadne
       )
     end
 
+    private def dropdown?
+      @dropdown
+    end
+
     private def trimmed_content
       return if content.blank?
 

data/app/components/ariadne/clipboard-copy-component.d.ts

@@ -0,0 +1,4 @@
+import { Controller } from '@hotwired/stimulus';
+export default class ClipboardCopyComponent extends Controller {
+    copy(): void;
+}

data/app/components/ariadne/clipboard-copy-component.js

@@ -0,0 +1,18 @@
+import { Controller } from '@hotwired/stimulus';
+export default class ClipboardCopyComponent extends Controller {
+    copy() {
+        const value = this.element.attributes.getNamedItem('value');
+        const forNode = this.element.attributes.getNamedItem('for');
+        if (value) {
+            navigator.clipboard.writeText(value.value);
+        }
+        else if (forNode) {
+            const node = document.getElementById(forNode.value);
+            navigator.clipboard.writeText((node === null || node === void 0 ? void 0 : node.textContent) || '');
+        }
+        else {
+            // just copy inner text
+            navigator.clipboard.writeText(this.element.textContent || '');
+        }
+    }
+}

data/app/components/ariadne/clipboard_copy_component.d.ts

@@ -0,0 +1,4 @@
+import { Controller } from '@hotwired/stimulus';
+export default class ClipboardCopyComponent extends Controller {
+    copy(): void;
+}

data/app/components/ariadne/clipboard_copy_component.js

@@ -0,0 +1,18 @@
+import { Controller } from '@hotwired/stimulus';
+export default class ClipboardCopyComponent extends Controller {
+    copy() {
+        const value = this.element.attributes.getNamedItem('value');
+        const forNode = this.element.attributes.getNamedItem('for');
+        if (value) {
+            navigator.clipboard.writeText(value.value);
+        }
+        else if (forNode) {
+            const node = document.getElementById(forNode.value);
+            navigator.clipboard.writeText((node === null || node === void 0 ? void 0 : node.textContent) || '');
+        }
+        else {
+            // just copy inner text
+            navigator.clipboard.writeText(this.element.textContent || '');
+        }
+    }
+}

data/app/components/ariadne/comment-component.js

@@ -0,0 +1,33 @@
+"use strict";
+// import {Controller} from '@hotwired/stimulus'
+// export default class CommentComponent extends Controller {
+//   static targets = ['tab', 'tabBarComponent']
+//   declare readonly commentComponentTarget: HTMLDivElement
+//   declare readonly tabBarComponentTarget: HTMLElement // technically a `nav but typescript can't find it?
+//   declare readonly tabTargets: [HTMLButtonElement]
+//   // keep in sync with comment_component.rb
+//   SELECTED_TAB_CLASSES = ['ariadne-border-indigo-500', 'ariadne-text-indigo-600']
+//   PUBLIC_BACKGROUND_COLOR = 'ariadne-bg-white'
+//   INTERNAL_BACKGROUND_COLOR = 'ariadne-bg-internal-message'
+//   toggleTab() {
+//     for (const tab of this.tabTargets) {
+//       if (tab.hasAttribute('aria-selected')) {
+//         tab.classList.remove(...this.SELECTED_TAB_CLASSES)
+//         this.toggleBackgrounds(tab, false)
+//         tab.removeAttribute('aria-selected')
+//       } else {
+//         tab.setAttribute('aria-selected', 'true')
+//         tab.classList.add(...this.SELECTED_TAB_CLASSES)
+//         this.toggleBackgrounds(tab, true)
+//       }
+//     }
+//   }
+//   toggleBackgrounds(tab: HTMLButtonElement, publicComment: boolean) {
+//     if (publicComment) {
+//       this.tabBarComponentTarget.classList.add(this.PUBLIC_BACKGROUND_COLOR)
+//       this.tabBarComponentTarget.classList.remove(this.INTERNAL_BACKGROUND_COLOR)
+//       this.tabBarComponentTarget.classList.remove(this.PUBLIC_BACKGROUND_COLOR)
+//       this.tabBarComponentTarget.classList.add(this.INTERNAL_BACKGROUND_COLOR)
+//     }
+//   }
+// }

data/app/components/ariadne/comment-component.ts

@@ -1,55 +1,37 @@
-import {Controller} from '@hotwired/stimulus'
+// import {Controller} from '@hotwired/stimulus'
 
-export default class CommentComponent extends Controller {
-  static targets = ['tab', 'tabBarComponent']
+// export default class CommentComponent extends Controller {
+//   static targets = ['tab', 'tabBarComponent']
 
-  declare readonly commentComponentTarget: HTMLDivElement
-  declare readonly tabBarComponentTarget: HTMLElement // technically a `nav but typescript can't find it?
-  declare readonly tabTargets: [HTMLButtonElement]
+//   declare readonly commentComponentTarget: HTMLDivElement
+//   declare readonly tabBarComponentTarget: HTMLElement // technically a `nav but typescript can't find it?
+//   declare readonly tabTargets: [HTMLButtonElement]
 
-  SELECTED_TAB_CLASSES = ['ariadne-border-indigo-500', 'ariadne-text-indigo-600']
-  PUBLIC_BACKGROUND_COLOR = 'ariadne-bg-white'
-  INTERNAL_BACKGROUND_COLOR = 'ariadne-bg-internal-message'
+//   // keep in sync with comment_component.rb
+//   SELECTED_TAB_CLASSES = ['ariadne-border-indigo-500', 'ariadne-text-indigo-600']
+//   PUBLIC_BACKGROUND_COLOR = 'ariadne-bg-white'
+//   INTERNAL_BACKGROUND_COLOR = 'ariadne-bg-internal-message'
 
-  connect() {
-    for (const tab of this.tabTargets) {
-      if (tab.hasAttribute('selected')) {
-        tab.classList.add(...this.SELECTED_TAB_CLASSES)
-      }
-    }
-  }
+//   toggleTab() {
+//     for (const tab of this.tabTargets) {
+//       if (tab.hasAttribute('aria-selected')) {
+//         tab.classList.remove(...this.SELECTED_TAB_CLASSES)
+//         this.toggleBackgrounds(tab, false)
+//         tab.removeAttribute('aria-selected')
+//       } else {
+//         tab.setAttribute('aria-selected', 'true')
+//         tab.classList.add(...this.SELECTED_TAB_CLASSES)
+//         this.toggleBackgrounds(tab, true)
+//       }
+//     }
+//   }
+//   toggleBackgrounds(tab: HTMLButtonElement, publicComment: boolean) {
+//     if (publicComment) {
+//       this.tabBarComponentTarget.classList.add(this.PUBLIC_BACKGROUND_COLOR)
+//       this.tabBarComponentTarget.classList.remove(this.INTERNAL_BACKGROUND_COLOR)
 
-  toggleTab() {
-    for (const tab of this.tabTargets) {
-      if (tab.hasAttribute('selected')) {
-        tab.removeAttribute('selected')
-        tab.classList.remove(...this.SELECTED_TAB_CLASSES)
-        this.toggleBackgrounds(tab)
-      } else {
-        tab.setAttribute('selected', 'true')
-        tab.classList.add(...this.SELECTED_TAB_CLASSES)
-        this.toggleBackgrounds(tab)
-        if (tab.hasAttribute('data-public')) {
-          document.getElementById('message_public')?.setAttribute('value', 'true')
-        } else {
-          document.getElementById('message_public')?.setAttribute('value', 'false')
-        }
-      }
-    }
-  }
-  toggleBackgrounds(tab: HTMLButtonElement) {
-    if (tab.hasAttribute('selected')) {
-      if (tab.hasAttribute('data-public')) {
-        // this.commentComponentTarget.classList.add(this.PUBLIC_BACKGROUND_COLOR)
-        // this.commentComponentTarget.classList.remove(this.INTERNAL_BACKGROUND_COLOR)
-        this.tabBarComponentTarget.classList.add(this.PUBLIC_BACKGROUND_COLOR)
-        this.tabBarComponentTarget.classList.remove(this.INTERNAL_BACKGROUND_COLOR)
-      } else {
-        // this.commentComponentTarget.classList.remove(this.PUBLIC_BACKGROUND_COLOR)
-        // this.commentComponentTarget.classList.add(this.INTERNAL_BACKGROUND_COLOR)
-        this.tabBarComponentTarget.classList.remove(this.PUBLIC_BACKGROUND_COLOR)
-        this.tabBarComponentTarget.classList.add(this.INTERNAL_BACKGROUND_COLOR)
-      }
-    }
-  }
-}
+//       this.tabBarComponentTarget.classList.remove(this.PUBLIC_BACKGROUND_COLOR)
+//       this.tabBarComponentTarget.classList.add(this.INTERNAL_BACKGROUND_COLOR)
+//     }
+//   }
+// }

data/app/components/ariadne/comment_component.html.erb

@@ -2,17 +2,39 @@
   <div class="ariadne-bg-white" data-comment-component-target="commentComponent">
     <div class="ariadne-hidden sm:ariadne-block">
       <div class="ariadne-border-b ariadne-border-gray-200">
+        <%= render(Ariadne::TabContainerComponent.new(sr_label: @sr_label)) do |tab_container| %>
+          <%= tab_container.tab(id: public_tab.id, selected: public_tab.selected, classes: public_tab.classes, attributes: public_tab.attributes) do |tab| %>
+            <% tab.text { @public_tab_text } %>
+            <% tab.panel do %>
+              <%= ariadne_form_with(url: @url, method: @method, classes: @classes, attributes: @attributes) do |comment_box| %>
+                <div class="ariadne-overflow-hidden ariadne-border-x ariadne-border-b ariadne-border-gray-300 ariadne-shadow-sm focus-within:ariadne-border-indigo-500 focus-within:ariadne-ring-1 focus-within:ariadne-ring-indigo-500">
+                  <%= hidden_field_tag 'message_public', true %>
+                  <%= render(Ariadne::RichTextAreaComponent.new(name: :bodytext, sr_label: "Select reply type", attributes: { required: true})) %>
+                  <% comment_box.submit { @submit } %>
+                </div>
+                <div class="ariadne-mt-2 ariadne-flex ariadne-justify-end">
+                  <%= submit %>
+                </div>
+              <% end %>
+            <% end %>
+          <% end %>
+          <%= tab_container.tab(id: internal_tab.id, selected: internal_tab.selected, classes: internal_tab.classes, attributes: internal_tab.attributes) do |tab| %>
+            <% tab.text { @internal_tab_text } %>
+            <% tab.panel do %>
+              <%= ariadne_form_with(url: @url, method: @method, classes: @classes, attributes: @attributes) do |comment_box| %>
+                <div class="ariadne-overflow-hidden ariadne-border-x ariadne-border-b ariadne-border-gray-300 ariadne-shadow-sm focus-within:ariadne-border-indigo-500 focus-within:ariadne-ring-1 focus-within:ariadne-ring-indigo-500">
+                  <%= hidden_field_tag 'message_public', false %>
+                  <%= render(Ariadne::RichTextAreaComponent.new(name: :bodytext, sr_label: "Select reply type", attributes: { required: true})) %>
+                  <% comment_box.submit { @submit } %>
+                </div>
+                <div class="ariadne-mt-2 ariadne-flex ariadne-justify-end">
+                  <%= submit %>
+                </div>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
       </div>
     </div>
-    <%= ariadne_form_with(url: @url, method: @method, classes: @classes, attributes: @attributes) do |comment_box| %>
-      <div class="ariadne-overflow-hidden ariadne-border-x ariadne-border-b ariadne-border-gray-300 ariadne-shadow-sm focus-within:ariadne-border-indigo-500 focus-within:ariadne-ring-1 focus-within:ariadne-ring-indigo-500">
-        <%= hidden_field_tag 'message_public', true %>
-        <%= render(Ariadne::RichTextAreaComponent.new(name: :bodytext, sr_label: "Select reply type", attributes: { required: true})) %>
-        <% comment_box.submit { @submit } %>
-      </div>
-      <div class="ariadne-mt-2 ariadne-flex ariadne-justify-end">
-        <%= submit %>
-      </div>
-    <% end %>
   </div>
 <% end %>

data/app/components/ariadne/comment_component.rb

@@ -2,6 +2,10 @@
 
 module Ariadne
   # Defines a submittable form for adding comments to a conversation.
+  #
+  #
+  # Requires JavaScript. Set `data-comment-component-selected-class` to the class name that will be applied to the
+  # selected tab.
   # @accessibility This component requires you to pass in a `sr_label`
   # attribute, which will be used to label the tabs for screen readers.
   class CommentComponent < Ariadne::Component
@@ -12,17 +16,21 @@ module Ariadne
 
     renders_one :public_tab, lambda { |selected: false, text:, classes: "", attributes: {}|
       attributes[:"data-comment-component-target"] ||= "tab"
-      attributes[:"data-action"] ||= "click->comment-component#toggleTab"
       attributes[:"data-public"] = true
       @tab_idx += 1
-      render(Ariadne::TabComponent.new(selected: selected, classes: classes, attributes: attributes)) { text }
+      id = attributes.fetch(:id, "public-tab-#{@tab_idx}")
+      @public_tab_text = text
+
+      Ariadne::TabComponent.new(selected: selected, classes: classes, id: id, with_panel: true, attributes: attributes)
     }
 
     renders_one :internal_tab, lambda { |selected: false, text:, classes: "", attributes: {}|
       attributes[:"data-comment-component-target"] ||= "tab"
-      attributes[:"data-action"] ||= "click->comment-component#toggleTab"
       @tab_idx += 1
-      render(Ariadne::TabComponent.new(selected: selected, classes: classes, attributes: attributes)) { text }
+      id = attributes.fetch(:id, "internal-tab-#{@tab_idx}")
+      @internal_tab_text = text
+
+      Ariadne::TabComponent.new(selected: selected, classes: classes, id: id, with_panel: true, attributes: attributes)
     }
 
     renders_one :submit, lambda { |classes: "", attributes: {}|
@@ -31,7 +39,11 @@ module Ariadne
 
     # @example Default
     #
-    #   <%= render(Ariadne::CommentComponent.new(url: "/messages", method: :post, sr_label: "Select delivery time")) { "Example" } %>
+    #  <%= render(Ariadne::CommentComponent.new(url: "/messages", method: :post, sr_label: "Select delivery time")) do |comment| %>
+    #    <% comment.public_tab(selected: true, text: "Reply to sender") %>
+    #    <% comment.internal_tab(text: "Internal comment") %>
+    #    <% comment.submit { "Send" } %>
+    #  <% end %>
     #
     # @param url [String] The URL to take action against.
     # @param method [String] The method to use when submitting the form.

data/app/components/ariadne/component.rb

@@ -16,8 +16,6 @@ module Ariadne
     include LoggerHelper
     include Ariadne::ActionViewExtensions::FormHelper
 
-    BASE_HTML_CLASSES = "ariadne-h-full ariadne-scroll-smooth ariadne-bg-white ariadne-antialiased"
-    BASE_BODY_CLASSES = "ariadne-flex ariadne-h-full ariadne-flex-col"
     BASE_WRAPPER_CLASSES = "ariadne-flex ariadne-flex-col ariadne-h-screen ariadne-justify-between"
     BASE_MAIN_CLASSES = "ariadne-flex-auto"
 

data/app/components/ariadne/details_component.html.erb

@@ -0,0 +1,4 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |component| %>
+  <%= summary %>
+  <%= body %>
+<% end %>

data/app/components/ariadne/details_component.rb

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Use `DetailsComponent` to reveal content after clicking a button.
+  class DetailsComponent < Ariadne::Component
+    DEFAULT_TAG = :details
+    DEFAULT_BODY_TAG = :div
+
+    VALID_BODY_TAGS = [:ul, :"details-menu", :"details-dialog", DEFAULT_BODY_TAG].freeze
+
+    NO_OVERLAY = :none
+    OVERLAY_MAPPINGS = {
+      NO_OVERLAY => "",
+      :default => "",
+    }.freeze
+
+    # Use the Summary as a trigger to reveal the content.
+    #
+    # @param button [Boolean] (true) Whether to render the Summary as a button or not.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    renders_one :summary, lambda { |button: true, classes: "", attributes: {}|
+      tag = :summary
+      attributes[:role] = "button"
+
+      return Ariadne::BaseComponent.new(tag: tag, classes: classes, attributes: attributes) unless button
+
+      Ariadne::Content.new
+    }
+
+    DEFAULT_BODY_CLASSES = "ariadne-absolute ariadne-right-0 ariadne-z-10 ariadne-mt-2 ariadne-w-56 ariadne-origin-top-right ariadne-divide-y ariadne-divide-gray-100 ariadne-rounded-md ariadne-bg-white ariadne-shadow-lg ariadne-ring-1 ariadne-ring-black ariadne-ring-opacity-5 focus:ariadne-outline-none"
+    # Use the Body slot as the main content to be shown when triggered by the Summary.
+    #
+    # @param tag [Symbol] The tag to use for the body/ <%= one_of(Ariadne::DetailsComponent::VALID_BODY_TAGS) %>
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    renders_one :body, lambda { |tag: DEFAULT_BODY_TAG, classes: "", attributes: {}|
+      tag = fetch_or_raise(VALID_BODY_TAGS, tag)
+      actual_classes = class_names(DEFAULT_BODY_CLASSES, classes)
+
+      Ariadne::BaseComponent.new(tag: tag, classes: actual_classes, attributes: attributes)
+    }
+
+    DEFAULT_CLASSES = ""
+
+    # @example Default
+    #
+    #   <%= render Ariadne::DetailsComponent.new do |c| %>
+    #     <% c.summary do %>
+    #       Summary
+    #     <% end %>
+    #     <% c.body do %>
+    #       Body
+    #     <% end %>
+    #   <% end %>
+    #
+    # @param overlay [Symbol] Dictates the type of overlay to render with. <%= one_of(Ariadne::DetailsComponent::OVERLAY_MAPPINGS.keys) %>
+    # @param reset [Boolean] If set to true, it will remove the default caret and remove style from the summary element
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(overlay: NO_OVERLAY, reset: false, classes: "", attributes: {})
+      @tag = DEFAULT_TAG
+      @reset = reset
+
+      @classes = class_names(
+        DEFAULT_CLASSES,
+        classes,
+        @reset ? "ariadne__details-reset" : "",
+      )
+
+      @attributes = attributes
+
+      @overlay = fetch_or_raise(OVERLAY_MAPPINGS.keys, overlay)
+    end
+
+    def render?
+      true # summary.present? && body.present?
+    end
+  end
+end

data/app/components/ariadne/dropdown/menu_component.html.erb

@@ -0,0 +1,20 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |component| %>
+  <%= header %>
+  <% if list? %>
+    <ul>
+      <% items.each do |item| %>
+        <% if item.divider? %>
+          <%= item %>
+        <% else %>
+          <li>
+            <%= item %>
+          </li>
+        <% end %>
+      <% end %>
+    </ul>
+  <% else %>
+    <% items.each do |item| %>
+      <%= item %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/ariadne/dropdown/menu_component.rb

@@ -0,0 +1,101 @@
+# frozen_string_literal: true
+
+module Ariadne
+  module Dropdown
+    # This component is part of `DropdownComponent` and should not be
+    # used as a standalone component.
+    class MenuComponent < Ariadne::Component
+      DEFAULT_AS_OPTION = :default
+      VALID_AS_OPTIONS = [DEFAULT_AS_OPTION, :list].freeze
+
+      DEFAULT_DIRECTION = :se
+      VALID_DIRECTIONS = [DEFAULT_DIRECTION, :sw, :w, :e, :ne, :s].freeze
+
+      DEFAULT_HEADER_CLASSES = "ariadne-text-sm ariadne-font-medium ariadne-text-gray-900"
+      # @param classes [String] <%= link_to_classes_docs %>
+      # @param attributes [Hash] <%= link_to_attributes_docs %>
+      renders_one :header, lambda { |classes: "", attributes: {}|
+        actual_classes = class_names(DEFAULT_HEADER_CLASSES, classes)
+        Ariadne::BaseComponent.new(tag: :span, classes: actual_classes, attributes: attributes)
+      }
+
+      # @param tag [Boolean] <%= one_of(Ariadne::Dropdown::MenuComponent::Item::VALID_TAGS) %>.
+      # @param divider [Boolean] Whether the item is a divider without any function.
+      # @param classes [String] <%= link_to_classes_docs %>
+      # @param attributes [Hash] <%= link_to_attributes_docs %>
+      renders_many :items, lambda { |tag: Ariadne::Dropdown::MenuComponent::Item::DEFAULT_TAG, divider: false, classes: "", attributes: {}|
+        Ariadne::Dropdown::MenuComponent::Item.new(tag: tag, as: @as, divider: divider, classes: classes, attributes: attributes)
+      }
+
+      DEFAULT_TAG = :"details-menu"
+      TAG_OPTIONS = [DEFAULT_TAG].freeze
+
+      DEFAULT_CLASSES = ""
+
+      # @param as [Symbol] When `as` is `:list`, wraps the menu in a `<ul>` with a `<li>` for each item.
+      # @param direction [Symbol] <%= one_of(Ariadne::Dropdown::MenuComponent::VALID_DIRECTIONS) %>.
+      # @param classes [String] <%= link_to_classes_docs %>
+      # @param attributes [Hash] <%= link_to_attributes_docs %>
+      def initialize(as: DEFAULT_AS_OPTION, direction: VALID_DIRECTIONS, classes: "", attributes: {})
+        @tag = DEFAULT_TAG
+        @classes = class_names(
+          DEFAULT_CLASSES,
+          classes,
+        )
+
+        @attributes = attributes
+
+        @direction = direction
+        @as = fetch_or_raise(VALID_AS_OPTIONS, as)
+
+        @attributes[:role] = "menu"
+      end
+
+      private def list?
+        @as == :list
+      end
+
+      # Items to be rendered in the `Dropdown` menu.
+      class Item < Ariadne::Component
+        DEFAULT_TAG = :a
+        BUTTON_TAGS = [:button, :summary].freeze
+        VALID_TAGS = [DEFAULT_TAG, *BUTTON_TAGS].freeze
+
+        DEFAULT_ITEM_CLASSES = "ariadne-block ariadne-px-4 ariadne-py-2 ariadne-text-sm ariadne-text-gray-700"
+
+        def initialize(as:, tag: DEFAULT_TAG, divider: false, classes: "", attributes: {})
+          @divider = divider
+          @as = as
+
+          @classes = class_names(DEFAULT_ITEM_CLASSES, classes)
+          @attributes = attributes
+          @tag = fetch_or_raise(VALID_TAGS, tag)
+          @tag = :li if list? && divider?
+          @attributes[:role] ||= :menuitem
+          @attributes[:role] = :separator if @divider
+        end
+
+        def call
+          component = if BUTTON_TAGS.include?(@tag)
+            Ariadne::ButtonComponent.new(scheme: Ariadne::ButtonComponent::LINK_SCHEME, classes: @classes, attributes: @attributes)
+          else
+            Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)
+          end
+
+          # divider has no content
+          render(component) if divider?
+
+          render(component) { content }
+        end
+
+        def divider?
+          @divider
+        end
+
+        def list?
+          @as == :list
+        end
+      end
+    end
+  end
+end

data/app/components/ariadne/dropdown/menu_component.ts

@@ -0,0 +1 @@
+import '@github/details-menu-element'

data/app/components/ariadne/dropdown_component.html.erb

@@ -0,0 +1,8 @@
+<%= render(Ariadne::DetailsComponent.new(classes: @classes, attributes: @attributes)) do |c| %>
+  <% c.summary(classes: @button_classes, attributes: @button_attributes) do %>
+    <%= button %>
+  <% end %>
+  <% c.body do %>
+    <%= menu %>
+  <% end %>
+<% end %>