lesli_view 1.1.2 → 1.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 57b0a11628317815d5fa6dad2de504adc413f303a84162d4d2761b07b515879c
-  data.tar.gz: de041c2dbecf1fc19004151eb81f59d420812bec6f7fd3c9bf3be11978b0c6a0
+  metadata.gz: 256282d3858c50d538cab6dd29cfe07c2474e61da8b8f1ca131178b9a7418156
+  data.tar.gz: f554e466ed571e19aa6f905b99ff821cad077846bd60369d11f15726d96f4011
 SHA512:
-  metadata.gz: d2d9b44c26f6dfb0f6ed8c67483809f5b30b8c44d73800d6516c7803127a034bf8c7ab9ed700823244bcf7ca10bb4fd063ff97c25f538767fde0833ee8de6666
-  data.tar.gz: 3037e1d9a13c02d2032429d2322a88597be41effb626137c39780176b1b827a45605a94cbc7c694d5613f4231d492e93cb90f863819c276b23742f40f519ddae
+  metadata.gz: cf903d1af2c3487d35b4842222377d59d97c1a512833bb234154b7908d926787bd61531870f5f1ea25676de3425503eee46a93ce4c2d13df2427c96f74c43b1e
+  data.tar.gz: da6644cdb5dad1e382e03fd19465491068b39bf17eca2de0511ab2039b22525d84e0dce44539a434ae33fe06070a588f7fdbad7c67de0a657087b436cae8d6aa

data/lib/lesli_view/charts/bar.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 =begin
 
 Lesli
@@ -36,6 +38,14 @@ module LesliView
             def type
                 "bar"
             end
+
+            def dataset_defaults
+                {
+                    backgroundColor: "rgba(14, 165, 233, 0.72)",
+                    borderColor: "rgb(2, 132, 199)",
+                    borderWidth: 1
+                }
+            end
         end
     end
 end

data/lib/lesli_view/charts/general.html.erb

@@ -1,55 +1,41 @@
-<%#
-
-Lesli
-
-Copyright (c) 2026, Lesli Technologies, S. A.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program. If not, see http://www.gnu.org/licenses/.
-
-Lesli · Ruby on Rails SaaS Development Framework.
-
-Made with ♥ by LesliTech
-Building a better future, one line of code at a time.
-
-@contact  hello@lesli.tech
-@website  https://www.lesli.tech
-@license  GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html
-
-// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
-// · 
-%>
-<script>
-document.addEventListener("turbo:load", () => {
-    new LesliChart({
-        id: "<%= id %>",
-        type: "<%= type %>",
-        datasets: <%= raw(datasets.to_json) %>,
-        labels: <%= raw(labels.to_json) %>,
-        compact: <%= compact ? "true" : "false" %>
-    });
-});
-</script>
-
-<div class="lesli-charts lesli-charts-<%= type %> section box m-0 p-2">
-
-    <% if title.present? %>
-        <%= tag.h3(title, class: (compact ? "is-size-7 has-text-centered" : "ml-2")) %>
+<div
+    class="lesli-chart lesli-chart-<%= type %> flex h-full min-w-0 flex-col"
+    <% if title.present? %>aria-labelledby="<%= title_id %>"<% end %>>
+
+    <% if title.present? || subtitle.present? %>
+        <div class="mb-3">
+            <% if title.present? %>
+                <h3
+                    id="<%= title_id %>"
+                    class="<%= compact ? 'text-center text-xs font-medium text-slate-500' : 'text-base font-semibold text-slate-700' %>">
+                    <%= title %>
+                </h3>
+            <% end %>
+
+            <% if subtitle.present? %>
+                <p class="mt-1 text-sm leading-5 text-slate-500"><%= subtitle %></p>
+            <% end %>
+        </div>
     <% end %>
 
-    <% if subtitle.present? %>
-        <p class="ml-2"><b><%= subtitle %></b></p>
-    <% end %>
-
-    <div id="<%= id %>" style="min-height:<%= height %>"></div>
+    <div
+        id="<%= id %>"
+        class="min-w-0 flex-1"
+        style="min-height: <%= height %>"></div>
 </div>
+
+<script data-lesli-chart-config="<%= chart_config.to_json %>">
+(() => {
+    const script = document.currentScript;
+    const renderChart = () => {
+        if (!window.LesliChart || !script) return;
+        new window.LesliChart(JSON.parse(script.dataset.lesliChartConfig));
+    };
+
+    if (document.readyState === "loading") {
+        document.addEventListener("turbo:load", renderChart, { once: true });
+    } else {
+        renderChart();
+    }
+})();
+</script>

data/lib/lesli_view/charts/general.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 =begin
 
 Lesli
@@ -33,48 +35,62 @@ Building a better future, one line of code at a time.
 module LesliView
     module Charts
         class General < ViewComponent::Base
-
             attr_reader(
-                :id, 
-                :title, 
-                :subtitle, 
-                :labels, 
-                :datasets, 
-                :height, 
+                :id,
+                :title,
+                :subtitle,
+                :labels,
+                :datasets,
+                :height,
                 :compact
             )
 
             def initialize(
-                id:nil, 
-                title:nil, 
-                subtitle:nil, 
-                labels:nil, 
-                dataset:nil,
-                datasets:nil, 
-                database_to_dataset:nil,
-                database_to_datasets:nil,
-                height:"400px",
-                compact:false
+                id: nil,
+                title: nil,
+                subtitle: nil,
+                labels: nil,
+                dataset: nil,
+                datasets: nil,
+                database_to_dataset: nil,
+                database_to_datasets: nil,
+                height: "400px",
+                compact: false
             )
-                @id = id || "lesli-chart-#{rand(1000)}" 
+                @id = id.presence || "lesli-chart-#{object_id}"
                 @title = title
                 @subtitle = subtitle
-                @labels = labels
-                @datasets = datasets
-                @height = height
-                @compact = compact
-
-                @datasets = [{ name: title, data: dataset }] if dataset
-                @datasets = database_to_dataset(database_to_dataset) if database_to_dataset
-                @datasets = database_to_datasets(database_to_datasets) if database_to_datasets
+                @labels = Array(labels)
+                @height = normalize_height(height)
+                @compact = !!compact
+
+                source_datasets = datasets
+                source_datasets = [{ label: title, data: dataset }] unless dataset.nil?
+                source_datasets = convert_database_to_dataset(database_to_dataset) if database_to_dataset
+                source_datasets = convert_database_to_datasets(database_to_datasets) if database_to_datasets
+                @datasets = normalize_datasets(source_datasets)
             end
 
             def type
                 nil
             end
 
-            def database_to_dataset(data)
-                [{ data: data.map { |d| { x: d['xaxiskey'], y: d['yaxiskey'] }}}]
+            def chart_config
+                {
+                    id: id,
+                    type: type,
+                    datasets: datasets,
+                    labels: labels,
+                    compact: compact
+                }
+            end
+
+            def title_id
+                @title_id ||= "#{id}-title"
+            end
+
+            def convert_database_to_dataset(data)
+                [{ label: title, data: data.map { |record| { x: record["xaxiskey"], y: record["yaxiskey"] } } }]
             end
 
             # Transforms a database query result into a structure compatible with Chart.js
@@ -94,8 +110,7 @@ module LesliView
             #           'sum(agent_count) as data'
             #       )
             #
-            def database_to_datasets(data)
-
+            def convert_database_to_datasets(data)
                 # Group records by series name
                 # Example: group all "Chrome" rows together
                 data
@@ -118,6 +133,30 @@ module LesliView
                     }
                 end
             end
+
+            # Preserve the original public conversion helpers.
+            alias_method :database_to_dataset, :convert_database_to_dataset
+            alias_method :database_to_datasets, :convert_database_to_datasets
+
+            def dataset_defaults
+                {}
+            end
+
+            private
+
+            def normalize_datasets(value)
+                Array(value).map do |dataset|
+                    attributes = dataset.respond_to?(:to_h) ? dataset.to_h.symbolize_keys : { data: Array(dataset) }
+                    dataset_defaults.merge(attributes)
+                end
+            end
+
+            def normalize_height(value)
+                value = value.to_s
+                return value if value.match?(/\A\d+(?:\.\d+)?(?:px|rem|em|vh|vw|%)\z/)
+
+                "400px"
+            end
         end
     end
 end

data/lib/lesli_view/charts/line.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 =begin
 
 Lesli
@@ -36,6 +38,20 @@ module LesliView
             def type
                 "line"
             end
+
+            def dataset_defaults
+                {
+                    backgroundColor: "rgba(14, 165, 233, 0.12)",
+                    borderColor: "rgb(2, 132, 199)",
+                    borderWidth: 2,
+                    fill: true,
+                    pointBackgroundColor: "rgb(2, 132, 199)",
+                    pointBorderColor: "rgb(255, 255, 255)",
+                    pointBorderWidth: 2,
+                    pointRadius: 3,
+                    pointHoverRadius: 5
+                }
+            end
         end
     end
 end

data/lib/lesli_view/components/header.html.erb

@@ -1,29 +1,54 @@
-<section class="lesli-element-header is-flex">
-    <div class="lesli-element-header-title">
-        <div class="is-flex">
-            <% if back %>
+
+<section
+    class="mx-auto my-8 grid w-full grid-cols-1 gap-5 md:grid-cols-[minmax(0,1fr)_auto] md:items-start"
+    <% if title.present? %>aria-labelledby="<%= title_id %>"<% end %>>
+
+    <div class="min-w-0">
+        <div class="flex items-center gap-4">
+
+            <% if back? %>
                 <%= link_to(
-                    back || request.referer || root_path, 
-                    class: "button is-info is-outlined mr-4 mb-1",
-                    data: { turbo_frame: '_top' }) do %>
-                    <span class="material-symbols">arrow_back</span>
+                    back_path,
+                    class: "inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl border border-sky-600 bg-white text-sky-700 shadow-sm transition hover:bg-sky-50 hover:text-sky-800 focus:outline-none focus:ring-2 focus:ring-sky-500/30",
+                    aria: { label: I18n.t("actions.back", default: "Go back") },
+                    data: { turbo_frame: "_top" }
+                ) do %>
+                    <span class="material-symbols text-[26px] leading-none" aria-hidden="true">arrow_back</span>
                 <% end %>
             <% end %>
-            <% if title.present? %>
-                <h1 class="subtitle is-size-3 mb-1"><%= title %></h1>
-            <% end %>
+
+            <div class="min-w-0">
+                <% if title.present? %>
+                    <h1 id="<%= title_id %>" class="text-3xl tracking-tight text-slate-700 sm:text-4xl">
+                        <%= title %>
+                    </h1>
+                <% end %>
+
+                <% if subtitle.present? %>
+                    <p class="mt-2 max-w-2xl text-sm leading-6 text-slate-500 sm:text-base">
+                        <%= subtitle %>
+                    </p>
+                <% end %>
+            </div>
+
         </div>
-        <% if subtitle.present? %>
-            <p><%= subtitle %></p>
-        <% end %>
-    </div>
-    <div class="lesli-element-header-items is-flex is-flex-grow-1 is-justify-content-end">
-        <% if new_path %>
-            <%= render ::LesliView::Elements::Button.new(
-                "Nuevo", url:new_path, icon:"add", solid:true
-            ) %>
-        <% end %>
-        <%= content %>
     </div>
-</section>
 
+    <% if actions? %>
+        <div
+            class="flex flex-wrap items-center gap-3 md:justify-self-end"
+            role="group"
+            aria-label="<%= I18n.t('actions.label', default: 'Page actions') %>">
+            <% if new_path.present? %>
+                <%= render ::LesliView::Elements::Button.new(
+                    new_button_label,
+                    url: new_path,
+                    icon: "add",
+                    solid: true
+                ) %>
+            <% end %>
+
+            <%= content if content? %>
+        </div>
+    <% end %>
+</section>

data/lib/lesli_view/components/header.rb

@@ -35,13 +35,46 @@ Building a better future, one line of code at a time.
 module LesliView
     module Components
         class Header < ViewComponent::Base
-            attr_reader :title, :subtitle, :back, :new_path
+            attr_reader :title, :subtitle, :back, :new_path, :new_label
+
+            def initialize(title, subtitle = nil, new_path: nil, new_label: nil, back: nil)
+                # Support the legacy positional options hash:
+                # Header.new("Title", back: path)
+                if subtitle.is_a?(Hash)
+                    legacy_options = subtitle.symbolize_keys
+                    subtitle = legacy_options[:subtitle]
+                    new_path ||= legacy_options[:new_path]
+                    new_label ||= legacy_options[:new_label]
+                    back ||= legacy_options[:back]
+                end
 
-            def initialize(title, subtitle="", new_path:nil, back:nil)
                 @title = title
                 @subtitle = subtitle
                 @back = back
                 @new_path = new_path
+                @new_label = new_label
+            end
+
+            def back?
+                back.present?
+            end
+
+            def back_path
+                return back unless back == true
+
+                request.referer.presence || "/"
+            end
+
+            def new_button_label
+                new_label.presence || I18n.t("actions.new", default: "New")
+            end
+
+            def actions?
+                new_path.present? || content?
+            end
+
+            def title_id
+                @title_id ||= "lesli-header-title-#{object_id}"
             end
         end
     end

data/lib/lesli_view/components/tabs.html.erb

@@ -1,34 +1,67 @@
-<div 
-    class="lesli-tabs <%= 'is-vertical' if vertical%>" 
-    x-data="{ activeTab: '<%= active_tab || tabs[0].tab_id %>' }">
-    <div class="tabs mb-0">
-        <ul>
-            <% tabs.each_with_index do |tab, index| %>
-                <% tab.set_tab_id(tab.tab_id, index) %>
-                <li :class="{ 'is-active': activeTab === '<%= tab.tab_id %>' }">
-                    <a @click="activeTab = '<%= tab.tab_id %>'" data-turbo="false">
-                        <% if tab.icon %>
-                            <span class="icon is-small">
-                                <span class="material-symbols-outlined">
-                                    <%= tab.icon %>
-                                </span>
-                            </span>
-                        <% end %>
-                        <span>
-                            <%= tab.title %>
+<% tabs.each_with_index { |tab, index| tab.set_tab_id(tab.tab_id, index) } %>
+<% initial_tab = active_tab.presence || tabs.first&.tab_id %>
+
+<div
+    class="lesli-tabs min-w-0<%= " flex items-start gap-6" if vertical %>"
+    x-data="{
+        activeTab: '<%= j(initial_tab.to_s) %>',
+        focusTab(event, offset) {
+            const tabs = Array.from(event.currentTarget.closest('[role=tablist]').querySelectorAll('[role=tab]'));
+            const currentIndex = tabs.indexOf(event.currentTarget);
+            const nextTab = tabs[(currentIndex + offset + tabs.length) % tabs.length];
+
+            nextTab.focus();
+            nextTab.click();
+        }
+    }">
+
+    <div class="<%= vertical ? "w-48 shrink-0" : "overflow-x-auto" %>">
+        <div
+            class="<%= vertical ? "flex w-full flex-col border-r border-slate-200" : "flex min-w-max border-b border-slate-200" %>"
+            role="tablist"
+            aria-orientation="<%= vertical ? "vertical" : "horizontal" %>">
+
+            <% tabs.each do |tab| %>
+                <button
+                    id="<%= tab.tab_id %>-tab"
+                    class="inline-flex min-h-11 cursor-pointer items-center gap-2 whitespace-nowrap px-4 py-2.5 text-sm font-medium transition-colors duration-150 focus:outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset <%= vertical ? "-mr-px w-full border-r-2 text-left" : "-mb-px justify-center border-b-2" %>"
+                    type="button"
+                    role="tab"
+                    aria-controls="<%= tab.tab_id %>"
+                    :aria-selected="activeTab === '<%= j(tab.tab_id) %>'"
+                    :tabindex="activeTab === '<%= j(tab.tab_id) %>' ? 0 : -1"
+                    :class="{
+                        'border-blue-600 text-blue-700': activeTab === '<%= j(tab.tab_id) %>',
+                        'border-transparent text-slate-500 hover:text-slate-700': activeTab !== '<%= j(tab.tab_id) %>'
+                    }"
+                    @click="activeTab = '<%= j(tab.tab_id) %>'"
+                    @keydown.right.prevent="focusTab($event, 1)"
+                    @keydown.down.prevent="focusTab($event, 1)"
+                    @keydown.left.prevent="focusTab($event, -1)"
+                    @keydown.up.prevent="focusTab($event, -1)">
+
+                    <% if tab.icon %>
+                        <span class="material-symbols-outlined text-xl leading-none" aria-hidden="true">
+                            <%= tab.icon %>
                         </span>
-                    </a>
-                </li>
+                    <% end %>
+
+                    <span><%= tab.title %></span>
+                </button>
             <% end %>
-        </ul>
+        </div>
     </div>
-    <div class="tab-items">
-        <% tabs.each_with_index do |tab, index| %>
+
+    <div class="min-w-0 flex-1<%= " pt-5" unless vertical %>">
+        <% tabs.each do |tab| %>
             <div
                 id="<%= tab.tab_id %>"
-                class="tab-item"
-                x-show="activeTab === '<%= tab.tab_id %>'"
-                x-transition
+                class="min-w-0"
+                role="tabpanel"
+                aria-labelledby="<%= tab.tab_id %>-tab"
+                tabindex="0"
+                x-show="activeTab === '<%= j(tab.tab_id) %>'"
+                x-transition.opacity.duration.150ms
                 x-cloak>
                 <%= tab %>
             </div>

data/lib/lesli_view/components/tabs.rb

@@ -1,13 +1,13 @@
 =begin
-<%= render LesliView::Elements::Tabs.new(active_tab: "tab1") do |tabs| %>
-    <% tabs.with_tab(tab_id: "tab1", title: "Tab 1") do  %>
+<%= render LesliView::Components::Tabs.new(active_tab: "tab1") do |tabs| %>
+    <% tabs.with_tab(id: "tab1", title: "Tab 1") do  %>
         hola
     <% end %>
-    <% tabs.with_tab(tab_id: "tab2", title: "Tab 2") %>
-    <% tabs.with_tab(tab_id: "tab3", title: "Tab 3") %>
-    <% tabs.with_tab(tab_id: "tab4", title: "Tab 4", icon: "save") %>
-    <% tabs.with_tab(tab_id: "tab5", title: "Tab 5", icon: "edit") %>
-    <% tabs.with_tab(tab_id: "tab6", title: "Tab 6", icon: "delete") %>
+    <% tabs.with_tab(id: "tab2", title: "Tab 2") %>
+    <% tabs.with_tab(id: "tab3", title: "Tab 3") %>
+    <% tabs.with_tab(id: "tab4", title: "Tab 4", icon: "save") %>
+    <% tabs.with_tab(id: "tab5", title: "Tab 5", icon: "edit") %>
+    <% tabs.with_tab(id: "tab6", title: "Tab 6", icon: "delete") %>
 <% end %>
 =end
 

data/lib/lesli_view/components/timeline.html.erb

@@ -1,26 +1,29 @@
-<div class="lesli-timelines">
-    <div class="py-6 pl-6">
-        <ul class="lesli-timeline lesli-timeline-split">
-            <% @activities.each do |activity| %>
-                <li class="lesli-timeline-item">
-                    <div class="lesli-timeline-info">
-                        <span><%= activity['date'] %></span>
-                    </div>
-                    <div class="lesli-timeline-marker">
-                        <span class="material-symbols-outlined">
-                            <%= @icons.dig(activity['icon']&.to_sym) || 'radio_button_checked' %>
-                        </span>
-                    </div>
-                    <div class="lesli-timeline-content">
-                        <h6 class="lesli-timeline-title">
-                            <%= activity['operation'] %>
-                        </h6>
-                        <p>
-                            <%= activity['description'] %>
-                        </p>
-                    </div>
-                </li>
-            <% end %>
-        </ul>
-    </div>
+<div class="lesli-timelines py-6">
+    <ul class="m-0 w-full list-none p-0">
+        <% activities.each do |activity| %>
+            <li class="group grid grid-cols-[1.5rem_minmax(0,1fr)] gap-x-4 md:grid-cols-[minmax(8rem,auto)_1.5rem_minmax(0,1fr)] md:gap-x-6">
+                <div class="col-start-2 mb-2 min-w-0 text-xs font-bold uppercase tracking-[0.2em] text-slate-500 md:col-start-1 md:row-start-1 md:mb-0 md:pt-1 md:text-right">
+                    <span><%= activity['date'] %></span>
+                </div>
+
+                <div class="relative col-start-1 row-span-2 row-start-1 flex justify-center md:col-start-2">
+                    <span
+                        class="material-symbols-outlined relative z-10 bg-white text-xl leading-none text-[var(--lesli-color-primary)]"
+                        aria-hidden="true">
+                        <%= icons.dig(activity['icon']&.to_sym) || 'radio_button_checked' %>
+                    </span>
+                    <span class="absolute top-7 bottom-0 left-1/2 w-px -translate-x-1/2 bg-slate-300 group-last:hidden" aria-hidden="true"></span>
+                </div>
+
+                <div class="col-start-2 row-start-2 min-w-0 pb-10 md:col-start-3 md:row-start-1">
+                    <h6 class="text-base font-semibold text-slate-800">
+                        <%= activity['operation'] %>
+                    </h6>
+                    <p class="mt-1 text-sm leading-6 text-slate-600">
+                        <%= activity['description'] %>
+                    </p>
+                </div>
+            </li>
+        <% end %>
+    </ul>
 </div>

data/lib/lesli_view/components/toolbar.css

@@ -0,0 +1,52 @@
+/* Tailwind styles for LesliView::Components::Toolbar. */
+
+@layer components {
+    .lesli-toolbar {
+        @apply mb-6 flex w-full flex-col gap-2 sm:flex-row sm:items-center;
+    }
+
+    .lesli-toolbar__form {
+        @apply flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center;
+    }
+
+    .lesli-toolbar__search {
+        @apply relative min-w-0 flex-1;
+    }
+
+    .lesli-toolbar__input {
+        @apply h-10 w-full rounded-lg border border-slate-300 bg-white py-2 pl-10 pr-10 text-sm text-slate-900 outline-none transition placeholder:text-slate-400 hover:border-slate-400 focus:border-sky-500 focus:ring-2 focus:ring-sky-500/10;
+    }
+
+    .lesli-toolbar__search-icon {
+        @apply pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-lg leading-none text-slate-400;
+    }
+
+    .lesli-toolbar__clear {
+        @apply absolute right-1.5 top-1/2 inline-flex h-7 w-7 -translate-y-1/2 items-center justify-center rounded-md text-slate-400 transition hover:bg-slate-100 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/30;
+    }
+
+    .lesli-toolbar__clear .material-symbols {
+        @apply text-lg leading-none;
+    }
+
+    .lesli-toolbar__filters {
+        @apply flex flex-wrap items-center gap-2;
+    }
+
+    .lesli-toolbar__filters select,
+    .lesli-toolbar__filters input {
+        @apply h-10 rounded-lg border border-slate-300 bg-white px-3 text-sm text-slate-700 outline-none transition hover:border-slate-400 focus:border-sky-500 focus:ring-2 focus:ring-sky-500/10;
+    }
+
+    .lesli-toolbar__submit {
+        @apply inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-lg border border-slate-300 bg-white text-slate-500 transition hover:border-sky-300 hover:bg-sky-50 hover:text-sky-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/20;
+    }
+
+    .lesli-toolbar__submit .material-symbols {
+        @apply text-xl leading-none;
+    }
+
+    .lesli-toolbar__actions {
+        @apply flex shrink-0 flex-wrap items-center gap-2;
+    }
+}