Fixing HTMX issues

docs/components/alert-dialog.njk

@@ -28,7 +28,8 @@ toc:
   trigger_attrs={"class": "btn-outline"},
   footer=footer,
   close_button=false,
-  close_on_overlay_click=false
+  close_on_overlay_click=false,
+  register_on=["alpine:init", "htmx:afterSwap"]
 ) }}{% endset %}
 {{ code_preview("alert-dialog", code | prettyHtml) }}
 

docs/components/breadcrumb.njk

@@ -28,7 +28,8 @@ toc:
     {% call dropdown_menu(
       id="demo-breadcrumb-menu",
       trigger=trigger,
-      trigger_attrs={"class": "flex size-9 items-center justify-center h-4 w-4 hover:text-foreground cursor-pointer"}
+      trigger_attrs={"class": "flex size-9 items-center justify-center h-4 w-4 hover:text-foreground cursor-pointer"},
+      register_on=["alpine:init", "htmx:afterSwap"]
     ) %}
       <nav role="menu">
         <button type="button" role="menuitem">Documentation</button>

docs/components/combobox.njk

@@ -26,7 +26,8 @@ toc:
 {% call select(
   trigger_attrs={"class": "w-[200px]"},
   listbox_attrs={"data-empty": "No framework found."},
-  is_combobox=true
+  is_combobox=true,
+  register_on=["alpine:init", "htmx:afterSwap"]
 ) %}
   {% for framework in options_frameworks %}
     <div role="option" data-value="{{ framework }}">{{ framework }}</div>
@@ -114,7 +115,8 @@ toc:
   trigger_attrs={"class": "w-[200px]"},
   content_attrs={"class": "w-72"},
   listbox_attrs={"data-empty": "No timezone found."},
-  is_combobox=true
+  is_combobox=true,
+  register_on=["alpine:init", "htmx:afterSwap"]
 ) %}
   <div class="max-h-64 overflow-y-auto scrollbar">
     {% for group in options_timezones %}

docs/components/dialog.njk

@@ -34,7 +34,8 @@ toc:
   trigger="Edit Profile",
   trigger_attrs={"class": "btn-outline"},
   content_attrs={"class": "w-full sm:max-w-[425px] max-h-[612px]"},
-  footer=footer
+  footer=footer,
+  register_on=["alpine:init", "htmx:afterSwap"]
 ) %}
 <form class="form grid gap-4">
   <div class="grid gap-3">
@@ -54,6 +55,10 @@ toc:
 
 <h3 id="usage-default"><a href="#usage-default">Default</a></h3>
 
+<section class="prose my-6">
+  <p></p>
+</section>
+
 {{ code_block(code | prettyHtml) }}
 
 <h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
@@ -104,7 +109,8 @@ toc:
   trigger_attrs={"class": "btn-outline"},
   content_attrs={"class": "w-full sm:max-w-[425px] max-h-[612px]"},
   content_body_attrs={"class": "overflow-y-auto scrollbar"},
-  footer=footer
+  footer=footer,
+  register_on=["alpine:init", "htmx:afterSwap"]
 ) %}
 <div class="space-y-4 text-sm">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

docs/components/dropdown-menu.njk

@@ -12,7 +12,8 @@ description: Displays a menu to the user — such as a set of actions or functio
   id="dropdown-menu",
   trigger="Open",
   trigger_attrs={"class": "btn-outline"},
-  content_attrs={"class": "min-w-56"}
+  content_attrs={"class": "min-w-56"},
+  register_on=["alpine:init", "htmx:afterSwap"]
 ) %}
 <div role="group" aria-labelledby="account-options">
   <span id="account-options" role="heading">Account Options</span>

docs/components/popover.njk

@@ -21,7 +21,8 @@ toc:
   id="demo-popover",
   trigger="Open popover",
   trigger_attrs={"class": "btn-outline"},
-  content_attrs={"class": "w-80 p-4"}
+  content_attrs={"class": "w-80 p-4"},
+  register_on=["alpine:init", "htmx:afterSwap"]
 ) %}
   <div class="grid gap-4">
     <header class="grid gap-1.5">

docs/components/select.njk

@@ -36,7 +36,11 @@ toc:
 {{ code_preview("select-native", code_native) }}
 
 {% set code_alpine %}
-{% call select(name="select-js", trigger_attrs={"class": "w-[180px]"}) %}
+{% call select(
+  name="select-js",
+  trigger_attrs={"class": "w-[180px]"},
+  register_on=["alpine:init", "htmx:afterSwap"]
+) %}
 <div role="group" aria-labelledby="fruit-options-label">
   <span id="fruit-options-label" role="heading">Fruits</span>
   <div role="option" data-value="apple">Apple</div>
@@ -99,7 +103,8 @@ toc:
 
 {% set code %}
 {% call select(
-  listbox_attrs={"class": "scrollbar overflow-y-auto max-h-64"}
+  listbox_attrs={"class": "scrollbar overflow-y-auto max-h-64"},
+  register_on=["alpine:init", "htmx:afterSwap"]
 ) %}
 {% for i in range(0, 99) %}
 <div role="option" data-value="item-{{ i }}">Item {{ i }}</div>
@@ -112,7 +117,10 @@ toc:
 <h3 id="example-disabled"><a href="#example-disabled">Disabled</a></h3>
 
 {% set code %}
-{% call select(trigger_attrs={"disabled": "disabled"}) %}
+{% call select(
+  trigger_attrs={"disabled": "disabled"},
+  register_on=["alpine:init", "htmx:afterSwap"]
+) %}
 <div role="option" data-value="disabled">Disabled</div>
 {% endcall %}
 {% endset %}
@@ -122,7 +130,10 @@ toc:
 <h3 id="example-with-icon"><a href="#example-with-icon">With icon</a></h3>
 
 {% set code %}
-{% call select(trigger_attrs={'class': 'w-[180px]'}) %}
+{% call select(
+  trigger_attrs={'class': 'w-[180px]'},
+  register_on=["alpine:init", "htmx:afterSwap"]
+) %}
 <div type="button" role="option" data-value="bar">
   {% lucide "chart-bar", {"class": "text-muted-foreground"} %}
   Bar

docs/components/tabs.njk

@@ -65,7 +65,8 @@ toc:
 id='demo-tabs-with-panels',
 tabsets=tabsets_demo,
 main_attrs={ "class": "w-full" },
-tablist_attrs={ "class": "w-full" }
+tablist_attrs={ "class": "w-full" },
+register_on=["alpine:init", "htmx:afterSwap"]
 ) }}
 {% endset %}
 {{ code_preview("tabs", code | prettyHtml, "max-w-[300px] w-full") }}