django-unfold 0.61.0__py3-none-any.whl → 0.63.0__py3-none-any.whl

unfold/static/unfold/js/select2.init.js

@@ -8,6 +8,10 @@
         return;
       }
 
+      if ($(element).hasClass("select2-hidden-accessible")) {
+        return;
+      }
+
       $(element).select2();
     });
 

unfold/styles.css

@@ -9,7 +9,7 @@
   }
 }
 
-@source inline("h-3 w-3 h-[64px] w-[65px]! left-[65px] dark:hover:bg-white/[.06] translate-x-1/4 -translate-y-1/4");
+@source inline("bg-white/[.06] border-white/40 h-3 w-3 h-[64px] w-[65px]! left-[65px] {dark:,}text-base-{50,{100..900},950} dark:hover:bg-white/[.06] translate-x-1/4 -translate-y-1/4");
 @source inline("{-,}{top,bottom,left,right}-{0..6}");
 @source inline("rounded rounded-{t,r,b,l} rounded-{t,r,b,l}-default");
 @source inline("{md:,lg:,2xl:,}relative {md:,lg:,2xl:,}flex {md:,lg:,2xl:,}absolute {md:,lg:,2xl:,}sticky");
@@ -35,8 +35,8 @@
 
 @theme {
   --font-sans: 'Inter', sans-serif;
-  --shadow-raised: 0 2px 12px rgba(0, 0, 0, 0.12);
-  --shadow-raised-dark: 0 2px 12px rgba(255, 255, 255, 0.12);
+  --shadow-raised: 0 2px 12px rgb(var(--color-base-300));
+  --shadow-raised-dark: 0 2px 12px rgb(var(--color-base-700));
 }
 
 @theme inline{
@@ -378,7 +378,7 @@ td .inline-deletelink {
 
 .select2-container.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__clear:after,
 .select2-container.select2-container--admin-autocomplete .select2-selection--single .select2-selection__clear:after {
-  @apply material-symbols-outlined transition-all content-['close'] text-[18px] ;
+  @apply material-symbols-outlined transition-all content-['close\_small'] text-[18px] ;
 }
 
 .select2-container.select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow {
@@ -446,9 +446,8 @@ td .inline-deletelink {
 }
 
 .select2-container--admin-autocomplete .select2-selection--multiple li.select2-selection__choice .select2-selection__choice__remove:after {
-  @apply h-7 leading-7! material-symbols-outlined;
+  @apply content-['close\_small'] h-7 leading-7! material-symbols-outlined;
 
-  content: "close";
   font-size: 14px;
 }
 

unfold/templates/admin/base.html

@@ -38,7 +38,7 @@
                 </div>
             {% endblock messages %}
 
-            <div class="px-4 pb-4 grow">
+            <div class="@container px-4 pb-4 grow">
                 <div id="content" class="{% if not cl.model_admin.list_fullwidth %}container{% endif %} mx-auto {% block coltype %}colM{% endblock %}">
                     {% if cl %}
                         {% tab_list "changelist" cl.opts %}

unfold/templates/admin/change_form.html

@@ -76,7 +76,7 @@
 
             {% block form_top %}{% endblock %}
 
-            <div>
+            <div class="flex flex-col gap-8">
                 {% if is_popup %}
                     <input type="hidden" name="{{ is_popup_var }}" value="1">
                 {% endif %}
@@ -104,22 +104,28 @@
 
                 {% block inline_field_sets %}
                     {% for inline_admin_formset in inline_admin_formsets %}
-                        {% include inline_admin_formset.opts.template %}
+                        {% if request.headers.hx_request  %}
+                            {% if inline_admin_formset.formset.get_pagination_key in request.GET %}
+                                {% include inline_admin_formset.opts.template %}
+                            {% endif %}
+                        {% else %}
+                            {% include inline_admin_formset.opts.template %}
+                        {% endif %}
                     {% endfor %}
                 {% endblock %}
 
                 {% block after_related_objects %}{% endblock %}
 
-                {% if adminform.model_admin.change_form_after_template %}
-                    {% include adminform.model_admin.change_form_after_template %}
-                {% endif %}
-
                 {% block admin_change_form_document_ready %}
                     <script id="django-admin-form-add-constants" src="{% static 'admin/js/change_form.js' %}"{% if adminform and add %} data-model-name="{{ opts.model_name }}"{% endif %} async></script>
                 {% endblock %}
 
                 {% prepopulated_fields_js %}
             </div>
+
+            {% if adminform.model_admin.change_form_after_template %}
+                {% include adminform.model_admin.change_form_after_template %}
+            {% endif %}
         </form>
 
         {% if adminform.model_admin.change_form_outer_after_template %}

unfold/templates/admin/change_list_results.html

@@ -70,7 +70,7 @@
             </thead>
 
             {% for result in results %}
-                <tbody class="{% cycle '' 'after:bg-base-50 dark:after:bg-white/[.02]' %} block relative lg:table-row-group lg:hover:shadow-raised lg:dark:hover:shadow-raised-dark lg:hover:z-20 after:content-[''] after:absolute after:inset-0" x-data="{rowOpen: false}">
+                <tbody class="block relative lg:table-row-group lg:hover:shadow-raised lg:dark:hover:shadow-raised-dark lg:hover:z-20 {% cycle '' 'bg-base-50 dark:bg-white/[.02]' %}" x-data="{rowOpen: false}">
                     {% if result.form and result.form.non_field_errors %}
                         <tr>
                             <td class="text-left" colspan="{{ result|length }}">
@@ -79,7 +79,7 @@
                         </tr>
                     {% endif %}
 
-                    <tr class="block border border-base-200 mb-3 relative rounded-default shadow-xs z-20 lg:table-row lg:border-none lg:mb-0 lg:rounded-none lg:shadow-none dark:border-base-800">
+                    <tr class="block border border-base-200 mb-3 relative rounded-default shadow-xs lg:table-row lg:border-none lg:mb-0 lg:rounded-none lg:shadow-none dark:border-base-800">
                         {% if cl.model_admin.list_sections|length > 0 %}
                             <td class="align-middle cursor-pointer flex border-b border-base-200 font-normal px-2.5 py-2 relative text-left before:font-semibold before:text-font-important-light before:block before:capitalize before:content-[attr(data-label)] before:mr-auto lg:before:hidden lg:border-b-0 lg:border-t lg:pl-3 lg:pr-0 lg:py-3 lg:table-cell dark:border-base-800 dark:lg:border-base-800 dark:before:text-font-important-dark lg:w-px"
                                 data-label="{% trans "Expand row" %}"

unfold/templates/admin/edit_inline/stacked.html

@@ -4,7 +4,7 @@
     <fieldset class="module relative {{ inline_admin_formset.classes }}" aria-labelledby="{{ inline_admin_formset.formset.prefix }}-heading">
         {% if inline_admin_formset.is_collapsible %}<details><summary>{% endif %}
 
-        <h2 id="{{ inline_admin_formset.formset.prefix }}-heading" class="inline-heading bg-base-100 font-semibold mb-6 px-4 py-3 rounded-default text-font-important-light 2xl:-mx-4 dark:bg-white/[.02] dark:text-font-important-dark {% if inline_admin_formset.opts.tab %}hidden{% endif %} {% if inline_admin_formset.is_collapsible %} cursor-pointer{% endif %}">
+        <h2 id="{{ inline_admin_formset.formset.prefix }}-heading" class="inline-heading bg-base-100 font-semibold mb-6 px-4 py-3 rounded-default text-font-important-light @min-[1570px]:-mx-4 dark:bg-white/[.02] dark:text-font-important-dark {% if inline_admin_formset.opts.tab %}hidden{% endif %} {% if inline_admin_formset.is_collapsible %} cursor-pointer{% endif %}">
             {% if inline_admin_formset.formset.max_num == 1 %}
                 {{ inline_admin_formset.opts.verbose_name|capfirst }}
             {% else %}
@@ -17,7 +17,7 @@
         {{ inline_admin_formset.formset.management_form }}
         {% include "unfold/helpers/messages/error.html" with errors=inline_admin_formset.formset.non_form_errors %}
 
-        <div class="border border-base-200 mb-6 overflow-hidden rounded-default shadow-xs w-full dark:border-base-800"
+        <div class="border border-base-200 overflow-hidden rounded-default shadow-xs w-full dark:border-base-800"
              {% if inline_admin_formset.opts.ordering_field %}
                  data-ordering-field="{{ inline_admin_formset.opts.ordering_field }}" x-on:end="sortRecords" x-sort.ghost
              {% endif %}>

unfold/templates/admin/edit_inline/tabular.html

@@ -7,7 +7,7 @@
         <fieldset class="module relative {{ inline_admin_formset.classes }} min-w-0" aria-labelledby="{{ inline_admin_formset.formset.prefix }}-heading">
             {% if inline_admin_formset.is_collapsible %}<details><summary>{% endif %}
 
-            <h2 id="{{ inline_admin_formset.formset.prefix }}-heading" class="bg-base-100 border border-transparent font-semibold mb-6 px-4 py-3 rounded-default text-font-important-light text-sm 2xl:-mx-4 dark:bg-white/[.02]  dark:text-font-important-dark {% if inline_admin_formset.opts.tab %}hidden{% endif %} {% if inline_admin_formset.is_collapsible %} cursor-pointer{% endif %}">
+            <h2 id="{{ inline_admin_formset.formset.prefix }}-heading" class="bg-base-100 border border-transparent font-semibold mb-6 px-4 py-3 rounded-default text-font-important-light text-sm @min-[1570px]:-mx-4 dark:bg-white/[.02]  dark:text-font-important-dark {% if inline_admin_formset.opts.tab %}hidden{% endif %} {% if inline_admin_formset.is_collapsible %} cursor-pointer{% endif %}">
                 {% if inline_admin_formset.formset.max_num == 1 %}
                     {{ inline_admin_formset.opts.verbose_name|capfirst }}
                 {% else %}
@@ -18,7 +18,7 @@
             {% if inline_admin_formset.is_collapsible %}</summary>{% endif %}
 
             {{ inline_admin_formset.formset.non_form_errors }}
-            <div class="border border-base-200 mb-6 overflow-x-auto rounded-default shadow-xs dark:border-base-800" data-simplebar data-simplebar-auto-hide="false">
+            <div class="border border-base-200 overflow-x-auto rounded-default shadow-xs dark:border-base-800" data-simplebar data-simplebar-auto-hide="false">
                 <table class="tabular-table w-full [&>tbody:nth-child(odd)]:bg-base-50 dark:[&>tbody:nth-child(odd)]:bg-white/[.02]" {% if inline_admin_formset.opts.ordering_field %}data-ordering-field="{{ inline_admin_formset.opts.ordering_field }}" x-on:end="sortRecords" x-sort.ghost x-sort:config="{preventOnFilter: false}"{% endif %}>
                     {% include "unfold/helpers/edit_inline/tabular_heading.html" %}
 

unfold/templates/admin/includes/fieldset.html

@@ -9,7 +9,7 @@
                 {{ fieldset.name }}
             </h2>
         {% else %}
-            <h2 class="bg-base-100 font-semibold mb-6 px-4 py-3 rounded-default text-font-important-light text-sm 2xl:-mx-4 dark:bg-white/[.02] dark:text-font-important-dark {% if fieldset.is_collapsible %}cursor-pointer{% endif %}">
+            <h2 class="bg-base-100 font-semibold mb-6 px-4 py-3 rounded-default text-font-important-light text-sm @min-[1570px]:-mx-4 dark:bg-white/[.02] dark:text-font-important-dark {% if fieldset.is_collapsible %}cursor-pointer{% endif %}">
                 {{ fieldset.name }}
             </h2>
         {% endif %}

unfold/templates/admin/login.html

@@ -44,7 +44,7 @@
 
         <div class="flex flex-col gap-3 mt-6">
             {% component "unfold/components/button.html" with submit=1 variant="primary" class="submit-row w-full" %}
-                {% translate 'Log in' %} <span class="material-symbols-outlined ml-2 relative right-0 transition-all group-hover:-right-1">arrow_forward</span>
+                {% translate 'Log in' %} <span class="material-symbols-outlined relative right-0 transition-all group-hover:-right-1 text-sm">arrow_forward</span>
             {% endcomponent %}
 
             {% url 'admin_password_reset' as password_reset_url %}

unfold/templates/registration/logged_out.html

@@ -1,8 +1,12 @@
-{% extends "unfold/layouts/skeleton.html" %}
+{% extends 'unfold/layouts/unauthenticated.html' %}
 
-{% load i18n %}
+{% load i18n unfold %}
 
-{% block base %}
+{% block title %}
+    {{ title }} | {{ site_title }}
+{% endblock %}
+
+{% block content %}
     <div id="page" class="bg-white flex min-h-screen dark:bg-base-900 ">
         <div class="flex grow items-center justify-center mx-auto px-4">
             <div class="w-full sm:w-96">
@@ -11,12 +15,13 @@
                 </h1>
 
                 <p class="leading-relaxed mb-10">
-                    {% translate "Thanks for spending some quality time with the web site today." %}
+                    {% trans "Thanks for spending some quality time with the web site today." %}
                 </p>
 
-                <a href="{% url "admin:index" %}" class="bg-primary-600 block border border-transparent font-semibold py-2 rounded-default text-sm text-center text-white w-full">
-                    {% translate "Log in again" %}
-                </a>
+                {% url "admin:index" as login_url %}
+                {% component "unfold/components/button.html" with href=login_url variant="primary" class="w-full" %}
+                    {% trans "Log in again" %} <span class="material-symbols-outlined relative right-0 transition-all group-hover:-right-1 text-sm">arrow_forward</span>
+                {% endcomponent %}
             </div>
         </div>
     </div>

unfold/templates/unfold/helpers/fieldsets_tabs.html

@@ -3,7 +3,7 @@
 {% with tabs=adminform|tabs %}
     {% if tabs %}
         <div x-data="{openTab: null}" x-show="activeTab == 'general'">
-            <ul class="bg-base-100 flex gap-1 mb-6 px-1.5 py-1.5 rounded-default text-font-default-light 2xl:-mx-4 dark:bg-white/[.02] dark:text-font-default-dark">
+            <ul class="bg-base-100 flex gap-1 mb-6 px-1.5 py-1.5 rounded-default text-font-default-light @min-[1570px]:-mx-4 dark:bg-white/[.02] dark:text-font-default-dark">
                 {% for fieldset in tabs %}
                     <li>
                         <a class="block cursor-pointer font-semibold px-2.5 py-2 rounded-default hover:text-base-700 dark:hover:text-white"

unfold/templates/unfold/helpers/navigation_header.html

@@ -1,10 +1,10 @@
 {% load unfold %}
 
 <div class="border-b border-base-200 flex gap-3 items-center h-[65px] mb-5 dark:border-base-800 px-3 {% element_classes 'navigation_header' %}" {% if site_dropdown %}x-data="{ openDropdown: false }"{% endif %}>
-    <div class="bg-transparent border border-transparent flex font-semibold gap-3 grow min-w-0 -mx-px h-[54px] items-center px-3 {% if site_dropdown %}cursor-pointer rounded-default transition-all hover:bg-white hover:border-base-200 hover:shadow-xs dark:hover:bg-base-800 dark:hover:border-base-700{% endif %}"
+    <div class="bg-transparent flex font-semibold gap-3 grow min-w-0 -mx-px h-[54px] items-center px-3 {% if site_dropdown %}cursor-pointer rounded-default transition-all hover:bg-base-100 dark:hover:bg-white/[.06]{% endif %}"
          {% if site_dropdown %}
              x-on:click="openDropdown = !openDropdown"
-             x-bind:class="{'bg-white border-base-200 shadow-xs dark:bg-base-800 dark:border-base-700': openDropdown, 'bg-transparent border-transparent': !openDropdown}"
+             x-bind:class="{'bg-base-100 dark:bg-white/[.06]': openDropdown, 'bg-transparent': !openDropdown}"
          {% endif %}
     >
         {% if site_logo %}

unfold/templates/unfold/helpers/pagination_inline.html

@@ -1,28 +1,36 @@
 {% load i18n admin_urls unfold %}
 
-{% with page_obj=inline_admin_formset.formset.page has_tab=inline_admin_formset.opts.tab pagination_key=inline_admin_formset.formset.get_pagination_key %}
-    {% elided_page_range page_obj.paginator page_obj.number as elided_page_range %}
-    <input type="hidden" name="{{ inline_admin_formset.formset.get_pagination_key }}" value="{{ page_obj.number }}" />
+{% with page_obj=inline_admin_formset.formset.page has_tab=inline_admin_formset.opts.tab pagination_key=inline_admin_formset.formset.get_pagination_key per_page=inline_admin_formset.opts.per_page %}
+    {% if pagination_key and per_page %}
+        {% elided_page_range page_obj.paginator page_obj.number as elided_page_range %}
 
-    {% if page_obj.paginator.count and page_obj.paginator.num_pages > 1%}
-        <div class="flex items-center gap-2 mb-6">
-            {% for i in elided_page_range %}
-                {% if i == page_obj.paginator.ELLIPSIS %}
-                    <span>{{ page_obj.paginator.ELLIPSIS }}</span>
-                {% elif i == page_obj.number %}
-                    <span class="font-medium text-primary-600">{{ i }}</span>
-                {% else %}
-                    <a href="?{% querystring_params pagination_key i %}{% if has_tab %}#{{ inline_admin_formset.formset.prefix|slugify }}{% endif %}">
-                        {{ i }}
-                    </a>
-                {% endif %}
-            {% endfor %}
+        <input type="hidden" name="{{ pagination_key }}" value="{{ page_obj.number }}" />
 
-            <div>-</div>
+        {% if page_obj.paginator.count and page_obj.paginator.num_pages > 1 %}
+            <div class="flex items-center gap-2 mt-6">
+                {% for i in elided_page_range %}
+                    {% if i == page_obj.paginator.ELLIPSIS %}
+                        <span>{{ page_obj.paginator.ELLIPSIS }}</span>
+                    {% elif i == page_obj.number %}
+                        <span class="font-medium text-primary-600">{{ i }}</span>
+                    {% else %}
+                        <a class="cursor-pointer"
+                           hx-get="?{% querystring_params pagination_key i %}{% if has_tab %}#{{ inline_admin_formset.formset.prefix|slugify }}{% endif %}"
+                           hx-push-url="true"
+                           hx-swap="outerHTML"
+                           hx-select="#{{ inline_admin_formset.formset.prefix }}-group"
+                           hx-target="#{{ inline_admin_formset.formset.prefix }}-group">
+                            {{ i }}
+                        </a>
+                    {% endif %}
+                {% endfor %}
 
-            <div>
-                {{ page_obj.paginator.count }} {% if page_obj.paginator.count == 1 %}{{ inline_admin_formset.opts.verbose_name }}{% else %}{{ inline_admin_formset.opts.verbose_name_plural }}{% endif %}
+                <div>-</div>
+
+                <div>
+                    {{ page_obj.paginator.count }} {% if page_obj.paginator.count == 1 %}{{ inline_admin_formset.opts.verbose_name }}{% else %}{{ inline_admin_formset.opts.verbose_name_plural }}{% endif %}
+                </div>
             </div>
-        </div>
+        {% endif %}
     {% endif %}
 {% endwith %}

unfold/templates/unfold/helpers/search.html

@@ -12,7 +12,7 @@
                    x-on:focus="openSearchResults = true; currentIndex = 0"
                    x-on:keydown.arrow-down.prevent="nextItem()"
                    x-on:keydown.arrow-up.prevent="prevItem()"
-                   x-on:keydown.escape.prevent="openSearchResults=false"
+                   x-on:keydown.escape.prevent="openSearchResults = false; if ($refs.searchInput.value === '') { $refs.searchInput.blur() } else { $refs.searchInput.value = '' }"
                    x-on:keydown.enter.prevent="selectItem()"
                    x-on:search="currentIndex = 0"
                    hx-get="{% url "admin:search" %}"

unfold/templates/unfold/helpers/submit.html

@@ -1,3 +1,3 @@
-<button type="submit" {% if name %}name="{{ name}}"{% endif %} class="bg-primary-600 block border border-transparent font-medium px-3 py-2 rounded-default self-end text-sm text-white">
+<button type="submit" {% if name %}name="{{ name}}"{% endif %} class="bg-primary-600 block border border-transparent cursor-pointer font-medium px-3 py-2 rounded-default self-end text-sm text-white">
     {{ title }}
 </button>

unfold/templates/unfold/helpers/tab_actions.html

@@ -1,5 +1,5 @@
 {% if actions_list or actions_detail or actions_items or nav_global %}
-    <ul class="flex flex-col font-medium mb-4 ml-auto mt-2 md:flex-row md:mb-2 md:mt-0 max-md:w-full">
+    <ul class="flex flex-col font-medium mb-4 ml-auto mt-2 md:flex-row md:mb-0 md:mt-0 max-md:w-full">
         {% if actions_items %}
             {{ actions_items }}
         {% endif %}

unfold/templates/unfold/helpers/tab_list.html

@@ -2,7 +2,7 @@
 
 {% if not is_popup %}
     {% if tabs_list or inlines_list or actions_list or actions_detail or actions_items or nav_global %}
-        <div class="border-base-200 flex items-start flex-col mb-4 md:border-b dark:md:border-base-800 md:border-l-0 md:flex-row md:items-center">
+        <div class="border-base-200 flex items-start flex-col mb-4 min-h-13 md:border-b dark:md:border-base-800 md:border-l-0 md:flex-row md:items-center">
             {% include "unfold/helpers/tab_items.html" %}
 
             {% include "unfold/helpers/tab_actions.html" %}

unfold/templates/unfold/helpers/unauthenticated_header.html

@@ -2,8 +2,8 @@
 
 <div class="absolute flex flex-row items-center justify-between left-0 m-4 right-0 top-0">
     {% if site_url %}
-        <a href="{{ site_url }}" class="flex font-medium items-center text-sm text-primary-600 dark:text-primary-500">
-            <span class="material-symbols-outlined mr-2">arrow_back</span> {% trans 'Return to site' %}
+        <a href="{{ site_url }}" class="flex font-medium gap-2 group items-center text-sm text-primary-600 dark:text-primary-500">
+            <span class="material-symbols-outlined left-0 relative text-sm transition-all group-hover:-left-1">arrow_back</span> {% trans 'Return to site' %}
         </a>
     {% endif %}
 

unfold/templates/unfold/helpers/unauthenticated_title.html

@@ -6,6 +6,6 @@
             <span class="block text-font-important-light dark:text-font-important-dark">{{ subtitle }} </span>
         {% endif %}
 
-        <span class="block text-primary-600 text-xl dark:text-primary-500">{{ title }}</span>
+        <span class="block font-semibold text-primary-600 tracking-tight text-xl dark:text-primary-500">{{ title }}</span>
     </h1>
 </div>

unfold/templates/unfold/widgets/related_widget_wrapper.html

@@ -9,7 +9,7 @@
                 {% if not is_hidden %}
                     {% if can_add_related or can_change_related or can_delete_related or can_view_related%}
                         {% if can_change_related %}
-                            <a class="related-widget-wrapper-link change-related bg-white border border-base-200 cursor-pointer flex items-center h-[38px] justify-center ml-2 rounded-default shadow-xs shrink-0 text-base-400 text-sm w-[38px] hover:text-base-700 dark:bg-base-900 dark:border-base-700 dark:text-base-500 dark:hover:text-base-200"
+                            <a class="related-widget-wrapper-link change-related bg-white border border-base-200 cursor-pointer flex items-center h-[38px] justify-center ml-2 rounded-default shadow-xs shrink-0 text-base-400 text-sm w-[38px] hover:text-base-700 dark:bg-base-900 dark:border-base-700 dark:text-base-500 dark:hover:text-base-200 focus:outline-2 focus:-outline-offset-2 focus:outline-primary-600"
                                id="change_id_{{ name }}"
                                data-popup="yes"
                                data-href-template="{{ change_related_template_url }}?{{ url_params }}"
@@ -19,7 +19,7 @@
                         {% endif %}
 
                         {% if can_add_related %}
-                            <a class="related-widget-wrapper-link add-related bg-white border border-base-200  cursor-pointer flex items-center h-[38px] justify-center ml-2 rounded-default shadow-xs shrink-0 text-base-400 text-sm w-[38px] hover:text-base-700 dark:bg-base-900 dark:border-base-700 dark:text-base-500 dark:hover:text-base-200"
+                            <a class="related-widget-wrapper-link add-related bg-white border border-base-200  cursor-pointer flex items-center h-[38px] justify-center ml-2 rounded-default shadow-xs shrink-0 text-base-400 text-sm w-[38px] hover:text-base-700 dark:bg-base-900 dark:border-base-700 dark:text-base-500 dark:hover:text-base-200 focus:outline-2 focus:-outline-offset-2 focus:outline-primary-600"
                                data-popup="yes"
                                id="add_id_{{ name }}"
                                href="{{ add_related_url }}?{{ url_params }}"
@@ -29,7 +29,7 @@
                         {% endif %}
 
                         {% if can_view_related %}
-                            <a class="related-widget-wrapper-link view-related bg-white border border-base-200 cursor-pointer flex items-center h-[38px] justify-center ml-2 rounded-default shadow-xs shrink-0 text-base-400 text-sm w-[38px] hover:text-base-700 dark:bg-base-900 dark:border-base-700 dark:text-base-500 dark:hover:text-base-200"
+                            <a class="related-widget-wrapper-link view-related bg-white border border-base-200 cursor-pointer flex items-center h-[38px] justify-center ml-2 rounded-default shadow-xs shrink-0 text-base-400 text-sm w-[38px] hover:text-base-700 dark:bg-base-900 dark:border-base-700 dark:text-base-500 dark:hover:text-base-200 focus:outline-2 focus:-outline-offset-2 focus:outline-primary-600"
                                id="view_id_{{ name }}"
                                data-href-template="{{ change_related_template_url }}?{{ view_related_url_params }}"
                                title="{% blocktranslate %}View selected {{ model }}{% endblocktranslate %}">
@@ -38,7 +38,7 @@
                         {% endif %}
 
                         {% if can_delete_related %}
-                            <a class="related-widget-wrapper-link delete-related bg-white border border-base-200 cursor-pointer flex items-center h-[38px] justify-center ml-2 rounded-default shadow-xs shrink-0 text-red-600 text-sm w-[38px] dark:bg-base-900 dark:border-base-700 dark:text-red-500"
+                            <a class="related-widget-wrapper-link delete-related bg-white border border-base-200 cursor-pointer flex items-center h-[38px] justify-center ml-2 rounded-default shadow-xs shrink-0 text-red-600 text-sm w-[38px] dark:bg-base-900 dark:border-base-700 dark:text-red-500 focus:outline-2 focus:-outline-offset-2 focus:outline-red-500"
                                id="delete_id_{{ name }}"
                                data-href-template="{{ delete_related_template_url }}?{{ url_params }}"
                                data-popup="yes"

unfold/templates/unfold/widgets/text.html

@@ -1,5 +1,5 @@
 
-<div class="max-w-2xl relative">
+<div class="max-w-2xl relative w-full">
     {% if widget.prefix %}
         <span class="absolute left-3 top-0 bottom-0 flex items-center justify-center">
             {{ widget.prefix }}

unfold/templatetags/unfold.py

@@ -359,7 +359,6 @@ def fieldset_rows_classes(context: Context) -> str:
             [
                 "border",
                 "border-base-200",
-                "mb-8",
                 "rounded-default",
                 "shadow-xs",
                 "dark:border-base-800",

unfold/widgets.py

@@ -244,13 +244,17 @@ RADIO_CLASSES = [
 SWITCH_CLASSES = [
     "appearance-none",
     "bg-base-300",
+    "block",
     "cursor-pointer",
     "h-5",
     "relative",
     "rounded-full",
-    "transition-all",
+    "transition-colors",
     "w-8",
     "min-w-8",
+    "focus:outline-2",
+    "focus:outline-offset-2",
+    "focus:outline-primary-600",
     "after:absolute",
     "after:bg-white",
     "after:content-['']",
@@ -258,6 +262,7 @@ SWITCH_CLASSES = [
     "after:h-3",
     "after:rounded-full",
     "after:shadow-xs",
+    "after:transition-all",
     "after:left-1",
     "after:top-1",
     "after:w-3",