ariadne_view_components 0.0.18-x64-mingw32 → 0.0.21-x64-mingw32

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/avatar_stack_component.html.erb

@@ -1,5 +1,5 @@
 <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
-  <%if tooltipped? %>
+  <% if tooltipped? %>
     <%= tooltip.to_s %>
     <% avatars.each_with_index do |avatar, i| %>
       <%= avatar %>

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

@@ -4,7 +4,7 @@
       <% 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 focus-within:ariadne-border-indigo-500 focus-within:ariadne-ring-1 focus-within:ariadne-ring-indigo-500">
+          <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 } %>
@@ -19,7 +19,7 @@
       <% 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 focus-within:ariadne-border-indigo-500 focus-within:ariadne-ring-1 focus-within:ariadne-ring-indigo-500">
+          <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 } %>

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/details_component.rb

@@ -28,7 +28,7 @@ module Ariadne
       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"
+    DEFAULT_BODY_CLASSES = "ariadne-absolute ariadne-mt-2 ariadne-w-56 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) %>

data/app/components/ariadne/grid_component.rb

@@ -40,7 +40,7 @@ module Ariadne
       }
 
       DEFAULT_ACTION_LINK_CLASSES = "ariadne-relative ariadne--mr-px ariadne-w-0 ariadne-flex-1 ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-py-4 ariadne-text-sm ariadne-font-medium ariadne-border ariadne-border-transparent"
-      DEFAULT_ACTION_LINK_COLORS = "hover:ariadne-text-gray-500"
+      DEFAULT_ACTION_LINK_COLORS = "ariadne-h-full hover:ariadne-text-gray-500"
       renders_many :actions, lambda { |href:, icon:, label:, size: Ariadne::HeroiconComponent::SIZE_DEFAULT, variant: HeroiconsHelper::Icon::VARIANT_SOLID, classes: "", attributes: {}, text_classes: ""|
         actual_classes = class_names(DEFAULT_ACTION_LINK_CLASSES, DEFAULT_ACTION_LINK_COLORS, classes)
         render(Ariadne::LinkComponent.new(href: href, classes: actual_classes, attributes: attributes)) do

data/app/components/ariadne/heroicon_component.rb

@@ -11,13 +11,13 @@ module Ariadne
     include IconHelper
     include HeroiconsHelper
 
-    SIZE_MICRO = :mu
+    SIZE_XSMALL = :xs
     SIZE_SMALL = :sm
     SIZE_DEFAULT = :md
     SIZE_LARGE = :lg
 
     SIZE_MAPPINGS = {
-      SIZE_MICRO => 16,
+      SIZE_XSMALL => 16,
       SIZE_SMALL => 20,
       SIZE_DEFAULT => 24,
       SIZE_LARGE => 128,

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.ts

@@ -1,21 +1,34 @@
 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:
-              '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
         }
       })
 
@@ -24,7 +37,8 @@ export default class RichTextArea extends Controller {
         const parentForm = editorElement.closest('form')
 
         parentForm?.addEventListener('submit', () => {
-          tiptapValueContainer.setAttribute('value', editorElement.textContent || '')
+          tiptapValueContainer.setAttribute('value', pmEditor.getText() || '')
+          pmEditor.commands.clearContent() // TODO: test this
         })
       }
     }

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.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,5 +1,5 @@
 <%= 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 %>

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/lib/ariadne/view_components/version.rb

@@ -2,6 +2,6 @@
 
 module Ariadne
   module ViewComponents
-    VERSION = "0.0.18"
+    VERSION = "0.0.21"
   end
 end

data/static/arguments.yml

@@ -386,7 +386,7 @@
   - name: size
     type: Symbol
     default: "`:md`"
-    description: One of `:mu` (`16`), `:sm` (`20`), `:md` (`24`), or `:lg` (`128`).
+    description: One of `:xs` (`16`), `:sm` (`20`), `:md` (`24`), or `:lg` (`128`).
   - name: attributes
     type: Hash
     default: "`{}`"
@@ -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,6 +99,7 @@
 - ".ariadne-shadow"
 - ".ariadne-py-5"
 - ".ariadne-px-5"
+- ".ariadne-bg-neutral-50"
 - ".ariadne-text-gray-500"
 - ".hover:ariadne-text-gray-700"
 - ".hover:ariadne-border-gray-300"
@@ -110,17 +111,11 @@
 - ".ariadne-text-indigo-600"
 - ".ariadne-space-y-8"
 - ".sm:ariadne-space-y-5"
-- ".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"
@@ -170,9 +165,9 @@
 - ".ariadne-py-0.5"
 - ".ariadne-text-black"
 - ".ariadne-hidden"
-- ".ariadne-pb-4"
 - ".ariadne-list-none"
 - ".ariadne-divide-gray-200"
+- ".ariadne-pb-4"
 - ".ariadne-text-lg"
 - ".ariadne-pt-6"
 - ".ariadne-flow-root"

data/static/constants.json

@@ -37,8 +37,8 @@
     ]
   },
   "Ariadne::BaseButton": {
-    "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",
     "DEFAULT_TAG": "button",
     "DEFAULT_TYPE": "button",
@@ -136,8 +136,7 @@
     "DEFAULT_TAG": "clipboard-copy"
   },
   "Ariadne::CommentComponent": {
-    "DEFAULT_CLASSES": "ariadne-bg-internal-message ariadne-border-gray-300 ariadne-border ariadne-shadow ariadne-py-5 ariadne-px-5 ariadne-rounded-md ",
-    "DEFAULT_INTERNAL_CLASSES": "ariadne-bg-internal-message",
+    "DEFAULT_CLASSES": "ariadne-bg-white ariadne-border-gray-300 ariadne-border ariadne-shadow ariadne-py-5 ariadne-px-5 ariadne-rounded-md ",
     "DEFAULT_TAG": "div",
     "TAG_OPTIONS": [
       "div"
@@ -152,7 +151,7 @@
     "DEFAULT_CLASSES": "ariadne-inline-flex ariadne-items-center ariadne-p-1 ariadne-border ariadne-border-transparent ariadne-rounded-full ariadne-shadow-sm focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2"
   },
   "Ariadne::DetailsComponent": {
-    "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",
+    "DEFAULT_BODY_CLASSES": "ariadne-absolute ariadne-mt-2 ariadne-w-56 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",
     "DEFAULT_BODY_TAG": "div",
     "DEFAULT_CLASSES": "",
     "DEFAULT_TAG": "details",
@@ -279,7 +278,7 @@
   },
   "Ariadne::GridComponent::GridItem": {
     "DEFAULT_ACTION_LINK_CLASSES": "ariadne-relative ariadne--mr-px ariadne-w-0 ariadne-flex-1 ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-py-4 ariadne-text-sm ariadne-font-medium ariadne-border ariadne-border-transparent",
-    "DEFAULT_ACTION_LINK_COLORS": "hover:ariadne-text-gray-500",
+    "DEFAULT_ACTION_LINK_COLORS": "ariadne-h-full hover:ariadne-text-gray-500",
     "DEFAULT_ENTRY_CLASSES": "ariadne-group ariadne-flex-1 ariadne-flex ariadne-flex-col ariadne-p-8 hover:ariadne-text-gray-500",
     "DEFAULT_ITEM_CLASSES": "ariadne-flex ariadne-flex-col ariadne-text-center ariadne-rounded-lg ariadne-shadow text-black-700 ariadne-border-black"
   },
@@ -386,28 +385,28 @@
     "SIZE_DEFAULT": "md",
     "SIZE_LARGE": "lg",
     "SIZE_MAPPINGS": {
-      "mu": 16,
+      "xs": 16,
       "sm": 20,
       "md": 24,
       "lg": 128
     },
-    "SIZE_MICRO": "mu",
     "SIZE_OPTIONS": [
-      "mu",
+      "xs",
       "sm",
       "md",
       "lg"
     ],
-    "SIZE_SMALL": "sm"
+    "SIZE_SMALL": "sm",
+    "SIZE_XSMALL": "xs"
   },
   "Ariadne::ImageComponent": {
     "DEFAULT_TAG": "img"
   },
   "Ariadne::InlineFlexComponent": {
     "DEFAULT_CLASSES": "ariadne-inline-flex ariadne-items-baseline",
-    "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",
     "DEFAULT_TAG": "span",
-    "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",
     "DEFAULT_TEXT_CLOSED_CLASSES": "ariadne-text-state-closed",
     "DEFAULT_TEXT_OPEN_CLASSES": "ariadne-text-state-open",
     "STATE_CLOSED_SVG": "<svg viewBox=\"0 0 24 24\" width=\"12\" height=\"12\" class=\"ariadne-stroke-state-closed ariadne-fill-state-closed \" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n</svg>\n",
@@ -466,7 +465,7 @@
   },
   "Ariadne::SlideoverComponent": {
     "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-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",
-    "DEFAULT_CLASSES": "",
+    "DEFAULT_CLASSES": "ariadne-flex ariadne-flex-col",
     "DEFAULT_TAG": "div",
     "DIRECTION_X_LEFT": "xl",
     "DIRECTION_Y_DOWN": "yd",
@@ -488,7 +487,7 @@
   },
   "Ariadne::TabContainerComponent": {
     "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_TAG": "tab-container",
     "DEFAULT_UNSELECTED_CLASSES": "ariadne-text-gray-500 hover:ariadne-text-gray-700 hover:ariadne-border-gray-300"
   },

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ariadne_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.18
+  version: 0.0.21
 platform: x64-mingw32
 authors:
 - Garen J. Torikian
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2022-10-07 00:00:00.000000000 Z
+date: 2022-10-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: tailwind_merge
@@ -106,6 +106,7 @@ executables:
 extensions: []
 extra_rdoc_files: []
 files:
+- CHANGELOG.md
 - LICENSE.txt
 - README.md
 - app/assets/config/manifest.js