ariadne_view_components 0.0.93.1 → 0.0.94

data/app/components/ariadne/ui/color_dot/component.rb

@@ -4,21 +4,35 @@
 module Ariadne
   module UI
     module ColorDot
+      # Creates a colored circle.
       class Component < Ariadne::BaseComponent
+        # @param [Symbol] color The hex color of the dot (without the hash)
         option :color
-        option :size, default: -> { :base }
+
+        DEFAULT_SIZE = :md
+        # @param [Symbol] size (Ariadne::UI::ColorDot::DEFAULT_SIZE) Indicates the button's size. <%= one_of(Ariadne::SizeHelper::VALID_SIZES) %>
+        option :size, default: -> { DEFAULT_SIZE }
+
+        def before_render
+          raise ArgumentError, "Color must be a 6-character hex string" unless color.match?(/\A[a-fA-F0-9]{6}\z/)
+        end
 
         style do
           base do
-            "ariadne-inline-flex ariadne-items-center ariadne-truncate"
+            [
+              "ariadne-inline-flex",
+              "ariadne-items-center",
+              "ariadne-truncate",
+            ]
           end
 
           variants do
             size do
               xs { "ariadne-ps-0.5" }
               sm { "ariadne-ps-0.5" }
-              base { "ariadne-ps-1" }
               md { "ariadne-ps-1" }
+              lg { "ariadne-ps-1" }
+              xl { "ariadne-ps-1" }
             end
           end
         end
@@ -28,8 +42,9 @@ module Ariadne
             size do
               xs { "ariadne-size-2" }
               sm { "ariadne-size-2.5" }
-              base { "ariadne-size-3" }
               md { "ariadne-size-3" }
+              lg { "ariadne-size-3" }
+              xl { "ariadne-ps-1" }
             end
           end
         end

data/app/components/ariadne/ui/combobox/component.html.erb

@@ -1,6 +1,6 @@
 <details class="ariadne-inline" <%= html_attrs.to_html %>>
   <summary class="ariadne-list-none ariadne-rounded" data-<%= stimulus_name %>-target="button" data-action="click-><%= stimulus_name %>#toggle">
-    <%= button %>
+    <%= reveal_button %>
   </summary>
   <details-menu
     class="<%= merged_styles(:popover, size:) %>"

data/app/components/ariadne/ui/combobox/component.rb

@@ -4,41 +4,71 @@
 module Ariadne
   module UI
     module Combobox
+      # The combobox is used to present a list of options for selection.
+      #
+      # Style overrides:
+      #
+      # - `popover` - The popover that contains the combobox options.
       class Component < Ariadne::BaseComponent
-        option :size, default: proc { :md }
+        DEFAULT_SIZE = :md
 
-        option :placement, default: proc { "bottom" }
+        # @param [Symbol] size (Ariadne::UI::Combobox::DEFAULT_SIZE) The size of the badge. <%= one_of(Ariadne::SizeHelper::VALID_SIZES) %>
+        option :size, default: proc { DEFAULT_SIZE }
+
+        DEFAULT_PLACEMENT = "bottom"
+        # according to `floating-ui/dom`
+        VALID_PLACEMENTS = ["top", "right", "bottom", "left", "top-start", "top-end", "right-start", "right-end", "bottom-start", "bottom-end", "left-start", "left-end"]
+        # @param [String] size (bottom) The location of the menu.
+        option :placement, default: proc { DEFAULT_PLACEMENT }
+
+        # @param [Boolean] clamped (false) Indicates if the menu should be clamped to the viewport.
         option :clamped, default: proc { false }
 
+        # @param [String] changed_action A stimulus action to call when a value within the combobox changes.
         option :changed_action, optional: true
 
+        # The list of options to display in the combobox.
+        #
+        # @param options [Hash] Same arguments as <%= link_to_component(Ariadne::UI::List::Component) %>.
         renders_one :list, lambda { |**options|
-          options[:as_menu] = true
-          Ariadne::UI::List::Component.new(**options)
+                             options[:as_menu] = true
+                             Ariadne::UI::List::Component.new(**options)
+                           }
+
+        # The button which renders the combobox.
+        #
+        # @param options [Hash] Same arguments as <%= link_to_component(Ariadne::UI::Button::Component) %>.
+        renders_one :reveal_button, lambda { |**options|
+          options[:html_attrs] ||= {}
+          options[:html_attrs][:role] = "combobox"
+
+          options[:html_attrs][:aria] = merge_aria(
+            options[:html_attrs], {
+              aria: {
+                haspopup: "dialog",
+                expanded: "false",
+              },
+            }
+          )
+
+          options[:scheme] ||= :nude
+          options[:html_attrs][:id] ||= Ariadne::UI::Button::Component.generate_id
+          Ariadne::UI::Button::Component.new(**options)
         }
-        renders_one :button, Ariadne::UI::Button::Component
 
         accepts_html_attributes do |html_attrs|
-          html_attrs[:data] ||= {}
-          html_attrs[:data] = {
-            controller: "#{stimulus_name} #{html_attrs[:data].delete(:controller)}".strip,
+          component_data_attrs = {
+            controller: stimulus_name,
             "#{stimulus_name}-target": "wrapper",
             "#{stimulus_name}-placement-value": placement,
             "#{stimulus_name}-clamped-value": clamped,
-          }.merge(html_attrs[:data])
+          }
 
           if changed_action
-            html_attrs[:data][:action] = "#{stimulus_name}:changed->#{changed_action}"
+            component_data_attrs[:action] = "#{stimulus_name}:changed->#{changed_action}"
           end
-        end
-
-        def initialize(**options)
-          super
-          validate!
-        end
 
-        private def validate!
-          # raise ArgumentError, "Must provide only `options` or `items`, not both" if items? && options?
+          html_attrs[:data] = merge_data_attributes(html_attrs, component_data_attrs)
         end
 
         accepts_styles :popover
@@ -52,10 +82,8 @@ module Ariadne
               "ariadne-scrollbar-trigger",
               "ariadne-rounded-lg",
               "ariadne-shadow-lg",
-              "ariadne-bg-foreground",
-              "dark:ariadne-bg-foreground-dark",
-              "ariadne-text-content",
-              "dark:ariadne-text-content-dark",
+              "ariadne-bg-popover",
+              "text-popover-foreground",
             ]
           end
 
@@ -72,7 +100,10 @@ module Ariadne
 
         style :options do
           base do
-            ["ariadne-overflow-auto", "ariadne-p-2"]
+            [
+              "ariadne-overflow-auto",
+              "ariadne-p-2",
+            ]
           end
         end
       end

data/app/components/ariadne/ui/combobox/component.ts

@@ -29,6 +29,7 @@ export default class ComboboxController extends controllerFactory<HTMLDetailsEle
     if (this.changedIds.size > 0) {
       this.dispatch('changed')
       this.changedIds.clear()
+      this.buttonTarget.setAttribute('aria-expanded', 'false')
     }
   }
 
@@ -115,5 +116,6 @@ export default class ComboboxController extends controllerFactory<HTMLDetailsEle
   toggle(): void {
     this.element.open = !this.element.open
     this.setupAutoUpdate()
+    this.buttonTarget.setAttribute('aria-expanded', 'true')
   }
 }

data/app/components/ariadne/ui/dialog/body/component.html.erb

@@ -0,0 +1,3 @@
+<div class="<%= html_attrs[:class] %>" <%= html_attributes %>>
+  <%= content %>
+</div>

data/app/components/ariadne/ui/dialog/body/component.rb

@@ -0,0 +1,28 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module Dialog
+      module Body
+        # A `Dialog::Body` is a compositional component, used to render the
+        # innards of a dialog. See <%= link_to_component(Ariadne::UI::Dialog::Component) %>.
+        class Component < Ariadne::BaseComponent
+          attr_accessor :context
+
+          accepts_html_attributes do |html_attrs|
+            html_attrs[:class] = merge_tailwind_classes([style, html_attrs[:class]].join(" "))
+
+            html_attrs
+          end
+
+          style do
+            base do
+              []
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ariadne/ui/dialog/component.html.erb

@@ -1,29 +1,30 @@
 <div
-  class="ariadne-contents"
   data-controller="<%= stimulus_name %>"
-  data-action="click@window-><%= stimulus_name %>#windowClick"
-  <%= html_attrs.to_html %>>
-  <%= trigger %>
-
+  data-action="click@window-><%= stimulus_name %>#windowClick">
+  <%= reveal_button %>
   <dialog
-    class="<%= style %>"
-    data-<%= stimulus_name %>-target="dialog">
-    <div>
-      <div class="ariadne-p-6 ariadne-space-y-6">
-        <div class="ariadne-flex ariadne-flex-col ariadne-gap-3 ariadne-pe-5">
-          <h2 class="ariadne-text-lg ariadne-font-semibold ariadne-leading-none ariadne-tracking-tight"><%= title %></h2>
-          <% if description %><p class="ariadne-text-sm ariadne-text-muted-foreground"><%= description %></p><% end %>
-        </div>
-        <div><%= content %></div>
-        <% if footer? %>
-          <div class="ariadne-flex ariadne-gap-2 ariadne-flex-wrap"><%= footer %></div>
-        <% end %>
-      </div>
-      <div class="ariadne-absolute ariadne-end-3 ariadne-top-3">
-        <%= render Ariadne::UI::Button::Component.new(
-          theme: :nude,
-          html_attrs: { "data-action": "click->#{stimulus_name}#triggerClick", aria: { label: trigger_close_label } }).as_icon(icon: "x-mark", variant: :outline) %>
-      </div>
+    class="<%= html_attrs[:class] %>"
+    data-<%= stimulus_name %>-target="dialog"
+    <%= html_attributes %>>
+    <div class="ariadne-flex ariadne-flex-col ariadne-space-y-2 ariadne-text-center sm:ariadne-text-left">
+      <span id="<%= dialog_id %>-title" class="ariadne-text-lg ariadne-font-semibold"><%= title %></span>
+  <% if content.present? %>
+    <%= content %>
+  <% else %>
+    <div data-labelled-by="<%= labelledby %>">
+      <%= body %>
     </div>
-  </dialog>
+  <% end %>
+  <% if footer? %>
+    <%= footer %>
+  <% end %>
+</div>
+<div class="ariadne-absolute ariadne-end-3 ariadne-top-3">
+  <%= render Ariadne::UI::Button::Component.new(
+          scheme: :nude,
+          size: :xs,
+          html_attrs: { "data-action": "click->#{stimulus_name}#swapVisibility", aria: { label: dialog_close_label } }).as_icon(icon: "x-mark", variant: :outline) %>
+</div>
+</div>
+</dialog>
 </div>

data/app/components/ariadne/ui/dialog/component.rb

@@ -4,16 +4,83 @@
 module Ariadne
   module UI
     module Dialog
+      # A `Dialog` is used to remove the user from the main application flow,
+      # to confirm actions, ask for disambiguation or to present small forms.
+      #
+      # @accessibility
+      #   - **Dialog Accessible Name**: A dialog should have an accessible name,
+      #   so screen readers are aware of the purpose of the dialog when it opens.
+      #   Give an accessible name by setting `:title`. The accessible name will be
+      #   used as the main heading inside the dialog.
+      #   - **Dialog unique id**: A dialog should be unique. Give a unique id by
+      #   setting `:dialog_id`. If no `:dialog_id` is given, a random
+      #   hex id is generated.
+      #
+      #   The combination of both `:title` and `:dialog_id` establishes an
+      #   `aria-labelledby` relationship between the title and the unique id of
+      #   the dialog.
       class Component < Ariadne::BaseComponent
+        # @param title [String] The id of the dialog.
         option :title
-        option :trigger_close_label
-        option :description, optional: true
-        option :width, default: proc { :base }
+        # @param dialog_close_label [String] ("Close") The aria label for the button which closes the dialog. Necessary if using the `close_button` slot.
+        option :dialog_close_label, default: -> { "Close" }
 
-        renders_one :trigger
-        renders_one :footer
+        # @param dialog_id  [String] (UUID) The id of the dialog. If no `:dialog_id` is given, a random
+        # UUID-based ID is generated.
+        option :dialog_id, default: -> { self.class.generate_id }
 
-        accepts_html_attributes
+        # @param [Symbol] width (:narrow) Indicates the width of the button. Can be either `:narrow` or `:full`.
+        option :width, default: proc { :narrow }
+
+        # The button to open the dialog.
+        #
+        # @param options [Hash] Same arguments as <%= link_to_component(Ariadne::UI::Button::Component) %>.
+        renders_one :reveal_button, lambda { |**options|
+          component_data_attrs = {
+            action: "#{Ariadne::UI::Dialog::Component.stimulus_name}#swapVisibility",
+          }
+
+          options[:html_attrs] ||= {}
+          options[:html_attrs][:data] = merge_data_attributes(options[:html_attrs], component_data_attrs)
+          Ariadne::UI::Button::Component.new(**options)
+        }
+
+        # The content.
+        #
+        # @param system_arguments [Hash] Same arguments as <%= link_to_component(Ariadne::UI::Dialog::Body::Component) %>.
+        renders_one :body, Ariadne::UI::Dialog::Body::Component
+
+        # Optional footer content to the dialog; usually buttons.
+        #
+        # @param system_arguments [Hash] Same arguments as <%= link_to_component(Ariadne::UI::Dialog::Footer::Component) %>.
+        renders_one :footer, Ariadne::UI::Dialog::Footer::Component
+
+        accepts_html_attributes do |html_attrs|
+          html_attrs[:class] = merge_tailwind_classes([style(width:), html_attrs[:class]].join(" "))
+
+          @dialog_id = html_attrs[:id].presence || @dialog_id
+          html_attrs[:id] = @dialog_id
+
+          html_attrs[:aria] = { modal: true }
+          html_attrs[:aria] = merge_aria(
+            html_attrs, {
+              aria: {
+                labelledby: labelledby,
+                describedby: describedby,
+              },
+            }
+          )
+
+          html_attrs
+        end
+
+        def labelledby
+          "#{@dialog_id}-title"
+        end
+
+        def describedby
+          "#{@dialog_id}-description"
+        end
 
         style do
           base do
@@ -22,27 +89,29 @@ module Ariadne
               "ariadne-max-h-[90-vh]",
               "ariadne-shadow-xl",
               "ariadne-rounded-2xl",
-              "ariadne-bg-foreground",
-              "dark:ariadne-bg-foreground-dark",
+              "ariadne-bg-card",
+              "ariadne-text-card-foreground",
               "ariadne-text-content",
               "dark:ariadne-text-content-dark",
               "backdrop:ariadne-bg-zinc-900/20",
               "backdrop:dark:ariadne-bg-zinc-100/20",
+              "ariadne-relative",
+              "ariadne-px-4",
+              "ariadne-pb-4",
+              "ariadne-pt-5",
+              "ariadne-text-left",
+              "ariadne-shadow-xl",
+              "ariadne-transition-all",
+              "sm:ariadne-w-full",
+              "sm:ariadne-max-w-xl",
+              "sm:ariadne-p-6",
             ]
           end
           variants do
             width do
-              base do
-                [
-                  "ariadne-w-96",
-                  "ariadne-max-w-[90vw]",
-                ]
-              end
-
-              wide do
+              full do
                 [
-                  "ariadne-w-3/5",
-                  "ariadne-max-w-[90vw]",
+                  "ariadne-w-full",
                 ]
               end
             end

data/app/components/ariadne/ui/dialog/component.ts

@@ -9,17 +9,21 @@ export default class DialogController extends controllerFactory()({
     this.dialogTarget.close()
     enableBodyScroll(this.dialogTarget)
   }
+
   disconnect() {
     this.close()
   }
+
   open() {
     this.dialogTarget.showModal()
     disableBodyScroll(this.dialogTarget, {reserveScrollBarGap: true})
   }
-  triggerClick() {
+
+  swapVisibility() {
     if (this.dialogTarget.open) this.close()
     else this.open()
   }
+
   windowClick(e: MouseEvent) {
     if (e.target === this.dialogTarget) {
       this.close()

data/app/components/ariadne/ui/dialog/footer/component.html.erb

@@ -0,0 +1,3 @@
+<div class="<%= html_attrs[:class] %>" <%= html_attributes %>>
+  <%= content %>
+</div>

data/app/components/ariadne/ui/dialog/footer/component.rb

@@ -0,0 +1,34 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module Dialog
+      module Footer
+        # A `Dialog::Footer` is a compositional component, used to render the
+        # innards of a dialog. See <%= link_to_component(Ariadne::UI::Dialog::Component) %>.
+        class Component < Ariadne::BaseComponent
+          attr_accessor :context
+
+          accepts_html_attributes do |html_attrs|
+            html_attrs[:class] = merge_tailwind_classes([style, html_attrs[:class]].join(" "))
+
+            html_attrs
+          end
+
+          style do
+            base do
+              [
+                "ariadne-flex",
+                "ariadne-flex-col-reverse",
+                "sm:ariadne-flex-row",
+                "sm:ariadne-justify-end",
+                "sm:ariadne-space-x-2",
+              ]
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ariadne/ui/heroicon/component.rb

@@ -6,36 +6,36 @@ require "heroicons_helper"
 module Ariadne
   module UI
     module Heroicon
-      # @example Default
-      #   <%= render(Ariadne::UI::Heroicon::Component.new(icon: :check, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE)) %>
-      #   <%= render(Ariadne::UI::Heroicon::Component.new(icon: :check, variant: HeroiconsHelper::Icon::VARIANT_SOLID)) %>
-      #
-      # @example Medium
-      #   <%= render(Ariadne::UI::Heroicon::Component.new(icon: :"user-group", variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, size: :md)) %>
-      #
-      # @example Helper
-      #   <%= ariadne_heroicon(icon: :check, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE) %>
-      #
-      # @param tag [Symbol, String] The rendered tag name
-      # @param classes [String] <%= link_to_classes_docs %>
-      # @param icon [Symbol, String] Name of <%= link_to_heroicons %> to use.
-      # @param variant [String] <%= one_of(HeroiconsHelper::Icon::VALID_VARIANTS, sort: false) %>
-      # @param size [Symbol] <%= one_of(Ariadne::UI::Heroicon::Component::SIZE_MAPPINGS, sort: false) %>
+      # Use this component whenever you need to render a [Heroicon](https://heroicons.com/) SVG icon.
       class Component < Ariadne::BaseComponent
-        attr_accessor :dark_mode
+        DEFAULT_SIZE = :md
 
+        # @param icon [Symbol, String] The name of <%= link_to_heroicons %> to use.
         option :icon
+        # @param variant [String] The type of variant to use. <%= one_of(HeroiconsHelper::Icon::VALID_VARIANTS) %>
         option :variant
-        option :size, default: -> { :md }
+        # @param [Symbol] size (Ariadne::UI::Heroicon::DEFAULT_SIZE) The size of the badge. <%= one_of(Ariadne::SizeHelper::VALID_SIZES) %>
+        option :size, default: proc { DEFAULT_SIZE }
 
         include IconHelper
         include HeroiconsHelper
 
         accepts_html_attributes do |html_attrs|
-          classes = [@heroicon.attributes["class"], style(size: @size)]
-          classes << ["dark:ariadne-invert"] if dark_mode == :invert
-          classes << html_attrs[:class]
-          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge(classes)
+          classes = [
+            @heroicon.attributes["class"],
+            style(size: @size),
+            html_attrs[:class],
+          ]
+
+          html_attrs[:class] = merge_tailwind_classes(classes)
+
+          html_attrs[:aria] ||= {}
+
+          if html_attrs[:aria][:label] || html_attrs[:"aria-label"]
+            html_attrs[:role] = "img"
+          else
+            html_attrs[:aria][:hidden] = true
+          end
         end
 
         def initialize(**options)

data/app/components/ariadne/ui/image/component.rb

@@ -4,36 +4,24 @@
 module Ariadne
   module UI
     module Image
-      # @example Default
+      # Component for rendering images.
       #
-      #   <%= render(Ariadne::ImageComponent.new(src: "https://github.com/github.png", alt: "GitHub")) %>
-      #
-      # @example Helper
-      #
-      #   <%= ariadne_image(src: "https://github.com/github.png", alt: "GitHub") %>
-      #
-      # @example Lazy loading
-      #
-      #   <%= render(Ariadne::ImageComponent.new(src: "https://github.com/github.png", alt: "GitHub", lazy: true)) %>
-      #
-      # @example Custom size
-      #
-      #   <%= render(Ariadne::ImageComponent.new(src: "https://github.com/github.png", alt: "GitHub", attributes: { height: 100, width: 100 })) %>
-      #
-      # @param tag [Symbol, String] The rendered tag name
-      # @param src [String] The source url of the image.
-      # @param alt [String] Specifies an alternate text for the image.
-      # @param lazy [Boolean] Whether or not to lazily load the image.
-      # @param classes [String] <%= link_to_classes_docs %>
-      # @param attributes [Hash] <%= link_to_attributes_docs %>
+      # @accessibility
+      #   Always provide a meaningful `alt`.
       class Component < Ariadne::BaseComponent
+        DEFAULT_SIZE = :md
+
+        # @param src [String] The source url of the image.
         option :src
+        # @param alt [String] Specifies an alternate text for the image.
         option :alt
-        option :size, default: -> { :original }
+        # @param [Symbol] size (Ariadne::UI::Image::DEFAULT_SIZE) The size of the badge. <%= one_of(Ariadne::SizeHelper::VALID_SIZES) %>
+        option :size, default: -> { DEFAULT_SIZE }
+        # @param lazy [Boolean] Whether or not to lazily load the image.
         option :lazy, default: -> { false }
 
         accepts_html_attributes do |html_attrs|
-          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(size: @size), html_attrs[:class]].join(" "))
+          html_attrs[:class] = merge_tailwind_classes([style(size: @size), html_attrs[:class]].join(" "))
 
           html_attrs[:src] = @src
           html_attrs[:alt] = @alt

data/app/components/ariadne/ui/link/component.html.erb

@@ -1,3 +1 @@
-<a href="<%= href %>" class="<%= html_attrs[:class] %>" <%= html_attributes %>>
-<%= content %>
-</a>
+<a href="<%= href %>" class="<%= html_attrs[:class] %>" <%= html_attributes %>><%= content %></a>

data/app/components/ariadne/ui/link/component.rb

@@ -4,16 +4,27 @@
 module Ariadne
   module UI
     module Link
+      # Use this to navigate from one page to another. `Link` styles anchor tags with default styling and hover text-decoration.
+      #
+      # @behaviors <%= link_to_component(Ariadne::Behaviors::Tooltipable) %>
       class Component < Ariadne::BaseComponent
+        # @param [String] href URL to be used for the link.
         option :href
 
-        option :theme, default: proc { :base }
-        option :size, default: proc { :base }
+        DEFAULT_SIZE = :md
+        DEFAULT_SCHEME = :base
+        SCHEME_OPTIONS = [DEFAULT_SCHEME, :nude, :none, :thick].freeze
+
+        # @param [Symbol] theme (:primary) Indicates the link's design scheme. <%= one_of(Ariadne::UI::Link::Component::SCHEME_OPTIONS) %>
+        option :scheme, default: -> { :base }
+
+        # @param [Symbol] size (Ariadne::UI::Link::DEFAULT_SIZE) The size of the link. <%= one_of(Ariadne::SizeHelper::VALID_SIZES) %>
+        option :size, default: proc { DEFAULT_SIZE }
 
         include Ariadne::Behaviors::Tooltipable
 
         accepts_html_attributes do |html_attrs|
-          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(theme:, size:), html_attrs[:class]].join(" "))
+          html_attrs[:class] = merge_tailwind_classes([style(scheme:, size:), html_attrs[:class]].join(" "))
         end
 
         style do
@@ -30,7 +41,7 @@ module Ariadne
           end
 
           variants do
-            theme do
+            scheme do
               base do
                 [
                   "ariadne-text-indigo-600",
@@ -75,11 +86,13 @@ module Ariadne
                 ]
               end
             end
+
             size do
               xs { "ariadne-text-xs ariadne-gap-0.5 [&>svg]:ariadne-size-3" }
               sm { "ariadne-text-sm ariadne-gap-0.5 [&>svg]:ariadne-size-4" }
               md { "ariadne-text-base ariadne-gap-1 [&>svg]:ariadne-size-4" }
               lg { "ariadne-text-lg ariadne-gap-1 [&>svg]:ariadne-size-5" }
+              xl { "ariadne-text-xl ariadne-gap-1 [&>svg]:ariadne-size-6" }
             end
           end
         end