ariadne_view_components 0.0.17 → 0.0.19

data/app/assets/javascripts/rich-text-area-component.d.ts

@@ -1,4 +1,6 @@
 import { Controller } from '@hotwired/stimulus';
 export default class RichTextArea extends Controller {
+    static targets: string[];
+    readonly editorTargets: [HTMLDivElement];
     connect(): void;
 }

data/app/components/ariadne/base_button.rb

@@ -19,8 +19,8 @@ module Ariadne
     }.freeze
     VALID_SIZES = SIZE_CLASS_MAPPINGS.keys.freeze
 
-    DEFAULT_CLASSES = "ariadne-inline-flex ariadne-items-center ariadne-border ariadne-shadow-sm focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2"
-    DEFAULT_NUDE_CLASSES = "ariadne-inline-flex focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2"
+    DEFAULT_CLASSES = "ariadne-items-center ariadne-border ariadne-shadow-sm focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2"
+    DEFAULT_NUDE_CLASSES = "focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2"
 
     DEFAULT_SIZE = :md
 

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

@@ -1,40 +1,34 @@
 <%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do %>
-  <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 %>
+  <%= 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(attributes: {:"data-public" => true}) do %>
+        <%= ariadne_form_with(url: @url, method: @method, classes: @classes, attributes: @attributes) do |comment_box| %>
+          <div class="ariadne-overflow-hidden ariadne-border ariadne-border-gray-300 ariadne-shadow-sm">
+            <%= hidden_field_tag 'message_public', true %>
+            <%= render(Ariadne::RichTextAreaComponent.new(name: :public_bodytext, sr_label: "Select reply type", attributes: { required: true})) %>
+            <% comment_box.submit { @submit } %>
+          </div>
+          <div class="ariadne-mt-2 ariadne-flex ariadne-justify-end">
+            <%= public_submit %>
+          </div>
         <% end %>
-      </div>
-    </div>
-  </div>
+      <% 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 ariadne-border-gray-300 ariadne-shadow-sm">
+            <%= hidden_field_tag 'message_public', false %>
+            <%= render(Ariadne::RichTextAreaComponent.new(name: :internal_bodytext, sr_label: "Select reply type", attributes: { required: true})) %>
+            <% comment_box.submit { @submit } %>
+          </div>
+          <div class="ariadne-mt-2 ariadne-flex ariadne-justify-end">
+            <%= internal_submit %>
+          </div>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
 <% end %>

data/app/components/ariadne/comment_component.rb

@@ -15,7 +15,6 @@ module Ariadne
     DEFAULT_CLASSES = "ariadne-bg-white ariadne-border-gray-300 ariadne-border ariadne-shadow ariadne-py-5 ariadne-px-5 ariadne-rounded-md "
 
     renders_one :public_tab, lambda { |selected: false, text:, classes: "", attributes: {}|
-      attributes[:"data-comment-component-target"] ||= "tab"
       attributes[:"data-public"] = true
       @tab_idx += 1
       id = attributes.fetch(:id, "public-tab-#{@tab_idx}")
@@ -24,8 +23,12 @@ module Ariadne
       Ariadne::TabComponent.new(selected: selected, classes: classes, id: id, with_panel: true, attributes: attributes)
     }
 
+    renders_one :public_submit, lambda { |classes: "", attributes: {}|
+      Ariadne::ButtonComponent.new(type: Ariadne::BaseButton::TYPE_SUBMIT, scheme: Ariadne::ButtonComponent::DEFAULT_SCHEME, classes: classes, attributes: attributes)
+    }
+
     renders_one :internal_tab, lambda { |selected: false, text:, classes: "", attributes: {}|
-      attributes[:"data-comment-component-target"] ||= "tab"
+      attributes[:"data-public"] = false
       @tab_idx += 1
       id = attributes.fetch(:id, "internal-tab-#{@tab_idx}")
       @internal_tab_text = text
@@ -33,7 +36,7 @@ module Ariadne
       Ariadne::TabComponent.new(selected: selected, classes: classes, id: id, with_panel: true, attributes: attributes)
     }
 
-    renders_one :submit, lambda { |classes: "", attributes: {}|
+    renders_one :internal_submit, lambda { |classes: "", attributes: {}|
       Ariadne::ButtonComponent.new(type: Ariadne::BaseButton::TYPE_SUBMIT, scheme: Ariadne::ButtonComponent::DEFAULT_SCHEME, classes: classes, attributes: attributes)
     }
 
@@ -41,8 +44,9 @@ module Ariadne
     #
     #  <%= 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.public_submit { "Send" } %>
     #    <% comment.internal_tab(text: "Internal comment") %>
-    #    <% comment.submit { "Send" } %>
+    #    <% comment.internal_submit { "Send" } %>
     #  <% end %>
     #
     # @param url [String] The URL to take action against.
@@ -50,7 +54,7 @@ module Ariadne
     # @param sr_label [String] A label to introduce these tabs for screen readers.
     # @param classes [String] <%= link_to_classes_docs %>
     # @param attributes [Hash] <%= link_to_attributes_docs %>
-    def initialize(url:, method:, sr_label:, classes: "", attributes: {})
+    def initialize(url:, method: :post, sr_label:, classes: "", attributes: {})
       @tag = DEFAULT_TAG
       @classes = class_names(
         DEFAULT_CLASSES,
@@ -62,8 +66,6 @@ module Ariadne
 
       @tab_idx = -1
       @attributes = attributes
-      @attributes[:"data-controller"] = "comment-component"
-      attributes[:"data-comment-component-target"] = "commentComponent"
     end
   end
 end

data/app/components/ariadne/component.rb

@@ -19,6 +19,10 @@ module Ariadne
     BASE_WRAPPER_CLASSES = "ariadne-flex ariadne-flex-col ariadne-h-screen ariadne-justify-between"
     BASE_MAIN_CLASSES = "ariadne-flex-auto"
 
+    # this is defined here for the Tailwind parser to pick up; it can be useful
+    # in situations where hiddenness is defined by a kwarg, eg `selected: false`
+    BASE_HIDDEN_CLASS = "ariadne-hidden"
+
     INVALID_ARIA_LABEL_TAGS = [:div, :span, :p].freeze
 
     private def raise_on_invalid_options?

data/app/components/ariadne/inline_flex_component.rb

@@ -26,7 +26,7 @@ module Ariadne
 
     DEFAULT_TEXT_OPEN_CLASSES = "ariadne-text-state-open"
     DEFAULT_TEXT_CLOSED_CLASSES = "ariadne-text-state-closed"
-    DEFAULT_TEXT_CLASSES = "ariadne-pl-2 ariadne-text-sm ariadne-font-medium ariadne-text-gray-900"
+    DEFAULT_TEXT_CLASSES = "ariadne-pl-2 ariadne-text-sm ariadne-font-medium"
     renders_one :icon, lambda { |tag: :svg, icon:, variant:, size: Ariadne::HeroiconComponent::SIZE_DEFAULT, classes: "", attributes: {}, text_classes: "", text_attributes: {}|
       actual_text_classes = class_names(DEFAULT_TEXT_CLASSES, text_classes)
       Ariadne::HeroiconComponent.new(tag: tag, icon: icon, variant: variant, size: size, classes: classes, attributes: attributes, text_classes: actual_text_classes, text_attributes: text_attributes) { content }
@@ -36,7 +36,7 @@ module Ariadne
       Ariadne::BaseComponent.new(tag: :span, classes: classes, attributes: attributes) { content }
     }
 
-    DEFAULT_LABEL_CLASSES = "ariadne-pl-2 ariadne-text-sm ariadne-font-medium ariadne-text-gray-900"
+    DEFAULT_LABEL_CLASSES = "ariadne-pl-2 ariadne-text-sm ariadne-font-medium"
     renders_one :text, lambda { |classes: "", attributes: {}|
       actual_classes = class_names(DEFAULT_LABEL_CLASSES, classes)
       Ariadne::BaseComponent.new(tag: :span, classes: actual_classes, attributes: attributes) { content }

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

@@ -5,7 +5,7 @@
         <span class="ariadne-px-6 ariadne-py-4 ariadne-flex ariadne-items-center ariadne-text-sm ariadne-font-medium">
           <%= panel.icon %>
           <span class="ariadne-ml-4 ariadne-text-sm ariadne-font-medium ariadne-text-gray-900"><%= panel.label %></span>
-          <!-- Arrow separator for lg screens and up -->
+          <!-- TODO: fix this -->
           <% if idx + 1 < panels.size %>
             <div class="md:ariadne-block ariadne-hidden ariadne-absolute ariadne-top-0 ariadne-right-0 ariadne-h-full ariadne-w-5" aria-hidden="true">
               <svg class="ariadne-h-full ariadne-w-full ariadne-text-gray-300" viewBox="0 0 22 80" fill="none" preserveAspectRatio="none">

data/app/components/ariadne/panel_bar_component.rb

@@ -40,6 +40,7 @@ module Ariadne
       DEFAULT_ITEM_CLASSES = "ariadne-relative md:ariadne-flex-1 md:ariadne-flex"
       DEFAULT_WRAPPER_CLASSES = "group ariadne-flex ariadne-items-center ariadne-w-full"
 
+      # TODO: fix this
       renders_one :icon, lambda { |static_content = nil, &block|
         next static_content if static_content.present?
 

data/app/components/ariadne/rich-text-area-component.d.ts

@@ -1,4 +1,6 @@
 import { Controller } from '@hotwired/stimulus';
 export default class RichTextArea extends Controller {
+    static targets: string[];
+    readonly editorTargets: [HTMLDivElement];
     connect(): void;
 }

data/app/components/ariadne/rich-text-area-component.js

@@ -1,27 +1,36 @@
 import { Controller } from '@hotwired/stimulus';
 import { Editor } from '@tiptap/core';
-import { StarterKit } from '@tiptap/starter-kit';
+import { Document } from '@tiptap/extension-document';
+import { Paragraph } from '@tiptap/extension-paragraph';
+import { Text } from '@tiptap/extension-text';
+import DropCursor from '@tiptap/extension-dropcursor';
+import GapCursor from '@tiptap/extension-gapcursor';
+import { History } from '@tiptap/extension-history';
 export default class RichTextArea extends Controller {
     connect() {
-        const editorElements = document.getElementsByClassName('tiptap-editor');
-        for (const editorElement of editorElements) {
-            new Editor({
-                element: editorElement,
-                extensions: [StarterKit],
+        for (const editorElement of this.editorTargets) {
+            const pmEditor = new Editor({
+                extensions: [DropCursor, GapCursor, History, Document, Paragraph, Text],
                 content: '',
+                injectCSS: false,
+                element: editorElement,
                 editorProps: {
                     attributes: {
-                        class: 'ariadne-m-5 focus:ariadne-outline-none ariadne-block ariadne-w-full ariadne-resize-none ariadne-p-0 ariadne-pb-2 ariadne-border-none focus:ariadne-ring-0 sm:ariadne-text-sm'
+                        class: 'ariadne-p-3'
                     }
+                },
+                parseOptions: {
+                    preserveWhitespace: true
                 }
             });
-            const tiptapValueContainer = document.querySelector('input[data-tiptap-value-container=true]');
+            const tiptapValueContainer = editorElement.previousElementSibling;
             if (tiptapValueContainer) {
                 const parentForm = editorElement.closest('form');
                 parentForm === null || parentForm === void 0 ? void 0 : parentForm.addEventListener('submit', () => {
-                    tiptapValueContainer.setAttribute('value', editorElement.textContent || '');
+                    tiptapValueContainer.setAttribute('value', pmEditor.getText() || '');
                 });
             }
         }
     }
 }
+RichTextArea.targets = ['editor'];

data/app/components/ariadne/rich-text-area-component.ts

@@ -1,30 +1,43 @@
 import {Controller} from '@hotwired/stimulus'
 
 import {Editor} from '@tiptap/core'
-import {StarterKit} from '@tiptap/starter-kit'
+
+import {Document} from '@tiptap/extension-document'
+import {Paragraph} from '@tiptap/extension-paragraph'
+import {Text} from '@tiptap/extension-text'
+
+import DropCursor from '@tiptap/extension-dropcursor'
+import GapCursor from '@tiptap/extension-gapcursor'
+import {History} from '@tiptap/extension-history'
 
 export default class RichTextArea extends Controller {
+  static targets = ['editor']
+
+  declare readonly editorTargets: [HTMLDivElement]
+
   connect() {
-    const editorElements = document.getElementsByClassName('tiptap-editor')
-    for (const editorElement of editorElements) {
-      new Editor({
-        element: editorElement,
-        extensions: [StarterKit],
+    for (const editorElement of this.editorTargets) {
+      const pmEditor = new Editor({
+        extensions: [DropCursor, GapCursor, History, Document, Paragraph, Text],
         content: '',
+        injectCSS: false,
+        element: editorElement,
         editorProps: {
           attributes: {
-            class:
-              'ariadne-m-5 focus:ariadne-outline-none ariadne-block ariadne-w-full ariadne-resize-none ariadne-p-0 ariadne-pb-2 ariadne-border-none focus:ariadne-ring-0 sm:ariadne-text-sm'
+            class: 'ariadne-p-3'
           }
+        },
+        parseOptions: {
+          preserveWhitespace: true
         }
       })
 
-      const tiptapValueContainer = document.querySelector('input[data-tiptap-value-container=true]')
+      const tiptapValueContainer = editorElement.previousElementSibling
       if (tiptapValueContainer) {
         const parentForm = editorElement.closest('form')
 
         parentForm?.addEventListener('submit', () => {
-          tiptapValueContainer.setAttribute('value', editorElement.textContent || '')
+          tiptapValueContainer.setAttribute('value', pmEditor.getText() || '')
         })
       }
     }

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

@@ -2,5 +2,5 @@
   <% if @has_form %>
     <input type="hidden" data-tiptap-value-container=true name="<%= @name %>" id="<%= @name %>">
   <% end %>
-  <div class="tiptap-editor"></div>
+  <div class="tiptap-editor" data-rich-text-area-component-target="editor"></div>
 <% end %>

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

@@ -1,20 +1,10 @@
 import { Controller } from '@hotwired/stimulus';
 export default class SlideoverComponent extends Controller {
     toggle() {
-        var _a;
         this.expandableTarget.classList.toggle('ariadne-hidden');
-        this.expandWrapperTarget.classList.toggle('bg-filter-panel');
         for (const slidePanel of this.slidePanelTargets) {
             slidePanel.classList.toggle('ariadne-hidden');
         }
-        this.buttonWrapperTarget.classList.toggle('bg-filter-panel');
-        if ((_a = document.getElementById('btnClose')) === null || _a === void 0 ? void 0 : _a.classList.contains('ariadne-hidden')) {
-            const formID = this.buttonWrapperTarget.getAttribute('data-slideover-component-form-id');
-            if (formID) {
-                const form = document.getElementById(formID);
-                form === null || form === void 0 ? void 0 : form.submit();
-            }
-        }
     }
 }
 SlideoverComponent.targets = ['expandable', 'expandWrapper', 'slidePanel', 'buttonWrapper'];

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

@@ -10,17 +10,8 @@ export default class SlideoverComponent extends Controller {
 
   toggle() {
     this.expandableTarget.classList.toggle('ariadne-hidden')
-    this.expandWrapperTarget.classList.toggle('bg-filter-panel')
     for (const slidePanel of this.slidePanelTargets) {
       slidePanel.classList.toggle('ariadne-hidden')
     }
-    this.buttonWrapperTarget.classList.toggle('bg-filter-panel')
-    if (document.getElementById('btnClose')?.classList.contains('ariadne-hidden')) {
-      const formID = this.buttonWrapperTarget.getAttribute('data-slideover-component-form-id')
-      if (formID) {
-        const form = <HTMLFormElement>document.getElementById(formID)
-        form?.submit()
-      }
-    }
   }
 }

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

@@ -1,11 +1,9 @@
 <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |slideover| %>
-  <div data-slideover-component-target="expandWrapper" class="ariadne-flex ariadne-flex-col ariadne-z-10">
-    <div data-slideover-component-target="expandable" class="ariadne-hidden ariadne-px-3 ariadne-pb-4">
-      <%= content %>
-    </div>
-    <div data-slideover-component-target="buttonWrapper" data-slideover-component-form-id="<%= @form_id %>" class="ariadne-relative ariadne-flex ariadne-justify-center">
-      <%= open_button %>
-      <%= close_button %>
-    </div>
+  <div data-slideover-component-target="expandable" class="ariadne-hidden ariadne-px-3">
+    <%= content %>
+  </div>
+  <div data-slideover-component-target="buttonWrapper" class="ariadne-relative ariadne-flex ariadne-justify-center">
+    <%= open_button %>
+    <%= close_button %>
   </div>
 <% end %>

data/app/components/ariadne/slideover_component.rb

@@ -12,43 +12,29 @@ module Ariadne
     DIRECTION_X_LEFT = :xl
     VALID_DIRECTIONS = [DIRECTION_Y_DOWN, DIRECTION_X_LEFT].freeze
 
-    DEFAULT_CLASSES = ""
+    DEFAULT_CLASSES = "ariadne-flex ariadne-flex-col"
 
     DEFAULT_BUTTON_CLASSES = "ariadne-inline-flex ariadne-items-center ariadne-shadow-sm ariadne-px-4 ariadne-py-1.5 ariadne-pb-2 ariadne-text-sm ariadne-leading-5 ariadne-font-medium ariadne-rounded-full " + Ariadne::ButtonComponent::SCHEME_CLASS_MAPPINGS[:default]
-    renders_one :open_button, lambda { |label:, classes: "", attributes: {}, text_classes: ""|
-      actual_classes = class_names(DEFAULT_BUTTON_CLASSES, classes)
+    renders_one :open_button, lambda { |selected: false, classes: "", attributes: {}|
+      actual_classes = class_names(DEFAULT_BUTTON_CLASSES, classes, selected ? "" : BASE_HIDDEN_CLASS)
 
       attributes[:id] ||= "btnOpen"
       attributes[:"data-slideover-component-target"] ||= "slidePanel"
       attributes[:"data-action"] ||= "click->slideover-component#toggle"
       attributes[:type] ||= "submit"
 
-      icon = case @direction
-      when DIRECTION_Y_DOWN
-        :"chevron-double-down"
-      end
-
-      render(Ariadne::BaseComponent.new(tag: :button, classes: actual_classes, attributes: attributes)) do
-        render(Ariadne::HeroiconComponent.new(icon: icon, size: :sm, variant: HeroiconsHelper::Icon::VARIANT_SOLID, attributes: { "data-slideover-component-target" => "slide-panel" }, text_classes: text_classes)) { label }
-      end
+      Ariadne::ButtonComponent.new(classes: actual_classes, attributes: attributes)
     }
 
-    renders_one :close_button, lambda { |label:, classes: "", attributes: {}, text_classes: ""|
-      actual_classes = class_names(DEFAULT_BUTTON_CLASSES, classes)
+    renders_one :close_button, lambda { |selected: false, classes: "", attributes: {}|
+      actual_classes = class_names(DEFAULT_BUTTON_CLASSES, classes, selected ? "" : BASE_HIDDEN_CLASS)
 
       attributes[:id] ||= "btnClose"
       attributes[:"data-slideover-component-target"] ||= "slidePanel"
       attributes[:"data-action"] ||= "click->slideover-component#toggle"
       attributes[:type] ||= "submit"
 
-      icon = case @direction
-      when DIRECTION_Y_DOWN
-        :"chevron-double-up"
-      end
-
-      render(Ariadne::BaseComponent.new(tag: :button, classes: actual_classes, attributes: attributes)) do
-        render(Ariadne::HeroiconComponent.new(icon: icon, size: :sm, variant: HeroiconsHelper::Icon::VARIANT_SOLID, attributes: { "data-slideover-component-target" => "slide-panel" }, text_classes: text_classes)) { label }
-      end
+      Ariadne::ButtonComponent.new(classes: actual_classes, attributes: attributes)
     }
 
     # @example Default
@@ -57,12 +43,11 @@ module Ariadne
     #
     # @param tag [Symbol, String] The rendered tag name.
     # @param direction [Symbol] <%= one_of(Ariadne::SlideoverComponent::VALID_DIRECTIONS) %>
-    # @param form_id [String] The ID of any `form` tag to submit when the button is clicked.
     # @param open_text [String] The text to use to open the slideover.
     # @param close_text [String] The text to use to close the slideover.
     # @param classes [String] <%= link_to_classes_docs %>
     # @param attributes [Hash] <%= link_to_attributes_docs %>
-    def initialize(tag: DEFAULT_TAG, direction:, form_id: nil, open_text: "Open", close_text: "Close", classes: "", attributes: {})
+    def initialize(tag: DEFAULT_TAG, direction:, open_text: "Open", close_text: "Close", classes: "", attributes: {})
       @tag = check_incoming_tag(DEFAULT_TAG, tag)
       @classes = class_names(
         DEFAULT_CLASSES,
@@ -70,12 +55,12 @@ module Ariadne
       )
 
       @direction = fetch_or_raise(VALID_DIRECTIONS, direction)
-      @form_id = form_id
 
       @open_text = open_text
       @close_text = close_text
       @attributes = attributes
       @attributes[:"data-controller"] = "slideover-component"
+      @attributes[:"data-slideover-component-target"] = "expandWrapper"
     end
   end
 end

data/app/components/ariadne/tab_component.rb

@@ -21,7 +21,6 @@ module Ariadne
       attributes[:id] = @panel_id
       tag = :div
       attributes[:role] ||= :tabpanel
-      attributes[:tabindex] = 0
       attributes[:hidden] = true unless @selected
 
       label_present = aria("label", attributes) || aria("labelledby", attributes)

data/app/components/ariadne/tab_container_component.erb

@@ -1,12 +1,10 @@
 <%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do  |component| %>
-  <div role="tablist">
+  <div role="tablist" class="ariadne-bg-neutral-50">
     <% tabs.each do |tab| %>
       <%= tab %>
     <% end %>
   </div>
   <% tabs.each do |tab| %>
-    <div class="ariadne-pt-2">
-      <%= tab.panel %>
-    </div>
+    <%= tab.panel %>
   <% end %>
 <% end %>

data/app/components/ariadne/tab_container_component.rb

@@ -9,7 +9,7 @@ module Ariadne
 
     DEFAULT_CLASSES = ""
 
-    DEFAULT_SELECTED_CLASSES = "ariadne-border-indigo-500 ariadne-text-indigo-600"
+    DEFAULT_SELECTED_CLASSES = "ariadne-bg-white ariadne-border-indigo-500 ariadne-text-indigo-600"
     DEFAULT_UNSELECTED_CLASSES = "ariadne-text-gray-500 hover:ariadne-text-gray-700 hover:ariadne-border-gray-300"
 
     # Tabs and panels to be rendered.
@@ -20,6 +20,7 @@ module Ariadne
     # @param attributes [Hash] <%= link_to_attributes_docs %>
     renders_many :tabs, lambda { |id: "", selected: false, classes: "", attributes: {}|
       actual_classes = class_names(selected ? DEFAULT_SELECTED_CLASSES : DEFAULT_UNSELECTED_CLASSES, classes)
+
       Ariadne::TabComponent.new(
         id: id,
         selected: selected,

data/app/lib/ariadne/action_view_extensions/form_helper.rb

@@ -6,7 +6,7 @@ module Ariadne
     module FormHelper
       include ClassNameHelper
 
-      DEFAULT_FORM_CLASSES = "ariadne-space-y-8 ariadne-divide-y ariadne-divide-gray-200 sm:ariadne-space-y-5"
+      DEFAULT_FORM_CLASSES = "ariadne-space-y-8 sm:ariadne-space-y-5"
       def ariadne_form_with(model: nil, scope: nil, url: nil, format: nil, classes: "", attributes: {}, **options, &block)
         options[:class] = class_names(DEFAULT_FORM_CLASSES, options[:class])
         options[:builder] ||= Ariadne::FormBuilder

data/lib/ariadne/view_components/version.rb

@@ -2,6 +2,6 @@
 
 module Ariadne
   module ViewComponents
-    VERSION = "0.0.17"
+    VERSION = "0.0.19"
   end
 end

data/static/arguments.yml

@@ -168,7 +168,7 @@
     description: The URL to take action against.
   - name: method
     type: String
-    default: N/A
+    default: "`:post`"
     description: The method to use when submitting the form.
   - name: sr_label
     type: String
@@ -240,7 +240,7 @@
       `:none`.
   - name: reset
     type: Boolean
-    default: "`false`"
+    default: "`true`"
     description: If set to true, it will remove the default caret and remove style
       from the summary element
   - name: classes
@@ -554,10 +554,6 @@
     type: Symbol
     default: N/A
     description: One of `:xl` and `:yd`.
-  - name: form_id
-    type: String
-    default: "`nil`"
-    description: The ID of any `form` tag to submit when the button is clicked.
   - name: open_text
     type: String
     default: '`"Open"`'

data/static/classes.yml

@@ -12,7 +12,6 @@
 - ".ariadne-flex"
 - ".ariadne--space-x-2"
 - ".ariadne-overflow-hidden"
-- ".ariadne-inline-flex"
 - ".ariadne-items-center"
 - ".ariadne-border"
 - ".ariadne-shadow-sm"
@@ -79,6 +78,7 @@
 - ".focus:ariadne-ring-offset-red-50"
 - ".focus:ariadne-ring-red-600"
 - ".ariadne-text-yellow-600"
+- ".ariadne-inline-flex"
 - ".ariadne-p-1"
 - ".ariadne-border-transparent"
 - ".ariadne-invisible"
@@ -99,10 +99,7 @@
 - ".ariadne-shadow"
 - ".ariadne-py-5"
 - ".ariadne-px-5"
-- ".ariadne-hidden"
-- ".sm:ariadne-block"
-- ".ariadne-border-b"
-- ".ariadne-border-gray-200"
+- ".ariadne-bg-neutral-50"
 - ".ariadne-text-gray-500"
 - ".hover:ariadne-text-gray-700"
 - ".hover:ariadne-border-gray-300"
@@ -112,22 +109,17 @@
 - ".ariadne-border-b-2"
 - ".ariadne-border-indigo-500"
 - ".ariadne-text-indigo-600"
-- ".ariadne-pt-2"
 - ".ariadne-space-y-8"
-- ".ariadne-divide-y"
-- ".ariadne-divide-gray-200"
 - ".sm:ariadne-space-y-5"
-- ".ariadne-border-x"
-- ".focus-within:ariadne-border-indigo-500"
-- ".focus-within:ariadne-ring-1"
-- ".focus-within:ariadne-ring-indigo-500"
 - ".tiptap-editor"
 - ".ariadne-mt-2"
 - ".ariadne-justify-end"
+- ".ariadne__details-reset"
 - ".ariadne-right-0"
 - ".ariadne-z-10"
 - ".ariadne-w-56"
 - ".ariadne-origin-top-right"
+- ".ariadne-divide-y"
 - ".ariadne-divide-gray-100"
 - ".ariadne-shadow-lg"
 - ".ariadne-ring-1"
@@ -175,8 +167,10 @@
 - ".md:ariadne-divide-y-0"
 - ".ariadne-py-0.5"
 - ".ariadne-text-black"
-- ".ariadne-pb-4"
+- ".ariadne-hidden"
 - ".ariadne-list-none"
+- ".ariadne-divide-gray-200"
+- ".ariadne-pb-4"
 - ".ariadne-text-lg"
 - ".ariadne-pt-6"
 - ".ariadne-flow-root"