Minor fixes

docs/_includes/components/dialog.njk

@@ -65,7 +65,7 @@
       $content: {
         ':inert'() { return !this.open },
         '@click'(e) { e.target === this.$el && this.closeOnOverlayClick && this.hide() },
-        '@keydown.escape.window'() { this.open && this.hide() },
+        '@keydown.escape.prevent'() { this.open && this.hide() },
         'x-cloak': ''
       }
     }));
@@ -123,7 +123,7 @@
             {{ key }}="{{ value }}"
           {% endfor %}
         >
-          {{ caller() }}
+          {% if caller %}{{ caller() }}{% endif %}
         </section>
       {% endif %}
       {% if footer %}

docs/_includes/components/popover.njk

@@ -75,7 +75,7 @@
       
       $content: {
         '@click'(e) { this.handleNavItemClick(e) },
-        '@keydown.escape.window'() { this.handleEscape() },
+        '@keydown.escape.prevent'() { this.handleEscape() },
         '@keydown.down.prevent'() { this.nextNavItem() },
         '@keydown.up.prevent'() { this.prevNavItem() },
         '@keydown.home.prevent'() { this.focusNavItem(0) },
@@ -123,7 +123,7 @@
       {{ key }}="{{ value }}"
     {% endfor %}
   >
-    {{ caller() }}
+    {% if caller %}{{ caller() }}{% endif %}
   </div>
 </div>
 {% endmacro %}

docs/_includes/components/select.njk

@@ -118,7 +118,7 @@
 
       $trigger: {
         '@click'() { this.open = !this.open; this.focusOnSelectedOption(); },
-        '@keydown.escape.window'() {
+        '@keydown.escape.prevent'() {
           this.open = false;
           this.$refs.trigger.focus();
         },
@@ -156,7 +156,7 @@
   x-data="select('{{ name }}', '{{ selected }}')"
   @click.away="open = false"
   {% if id %}id="{{ id }}"{% endif %}
-  {% for key, value in trigger_attrs %}
+  {% for key, value in main_attrs %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
 >
@@ -214,7 +214,7 @@
         {{ key }}="{{ value }}"
       {% endfor %}
     >
-      {{ caller() }}
+      {% if caller %}{{ caller() }}{% endif %}
     </div>
   </div>
   {% if name %}

docs/_includes/components/tabs.njk

@@ -29,7 +29,7 @@
       
       $menu: {
         '@click'(e) { this.handleMenuItemClick(e) },
-        '@keydown.escape.window'() { this.handleEscape() },
+        '@keydown.escape.prevent'() { this.handleEscape() },
         '@keydown.down.prevent'() { this.nextItem() },
         '@keydown.up.prevent'() { this.prevItem() },
         '@keydown.home.prevent'() { this.focusItem(0) },
@@ -113,7 +113,7 @@
       {{ key }}="{{ value }}"
     {% endfor %}
   >
-    {{ caller() }}
+    {% if caller %}{{ caller() }}{% endif %}
   </nav>
 </div>
 {% endmacro %}

docs/_includes/components/toast.njk

@@ -44,7 +44,7 @@
       $toast: {
         ['@mouseenter']() { this.$store.toaster.isPaused = true },
         ['@mouseleave']() { this.$store.toaster.isPaused = false },
-        ['@keydown.escape.window']() { this.close() },
+        ['@keydown.escape.prevent']() { this.close() },
       },
     }));
   });

docs/_includes/partials/checkbox.njk

@@ -3,7 +3,7 @@
     <h2 class="text-sm font-medium">Checkbox</h2>
   </header>
   <div class="p-4">
-    <div class="flex flex-col gap-6">
+    <div class="flex flex-col gap-6 max-w-lg">
       <label class="label gap-3">
         <input type="checkbox" class="input">
         Accept terms and conditions
@@ -22,8 +22,8 @@
       <label class="flex items-start gap-3 border p-3 hover:bg-accent/50 rounded-lg has-[input[type='checkbox']:checked]:border-blue-600 has-[input[type='checkbox']:checked]:bg-blue-50 dark:has-[input[type='checkbox']:checked]:border-blue-900 dark:has-[input[type='checkbox']:checked]:bg-blue-950">
         <input type="checkbox" class="input checked:bg-blue-600 checked:border-blue-600 dark:checked:bg-blue-700 dark:checked:border-blue-700 checked:after:bg-white" checked>
         <div class="grid gap-2">
-          <h2 class="text-sm leading-none font-medium">Accept terms and conditions</h2>
-          <p class="text-muted-foreground text-sm">By clicking this checkbox, you agree to the terms and conditions.</p>
+          <h2 class="text-sm leading-none font-medium">Enable notifications</h2>
+          <p class="text-muted-foreground text-sm">You can enable or disable notifications at any time.</p>
         </div>
       </label>
     </div>

docs/_includes/partials/select.njk

@@ -2,55 +2,69 @@
   <header class="border-b px-4 py-3">
     <h2 class="text-sm font-medium">Select</h2>
   </header>
-  <div class="p-4">
-    <div class="flex flex-wrap items-center gap-4">
-      <select class="select">
-        <optgroup label="Colors">
-          <option>Fuchsia</option>
-          <option selected>Cyan</option>
-          <option>Amber</option>
-        </optgroup>
-        <optgroup label="Gradients">
-          <option>Fuchsia to Cyan</option>
-          <option>Cyan to Amber</option>
-          <option>Amber to Fuchsia</option>
-        </optgroup>
-      </select>
+  <div class="p-4 gap">
+    <div class="flex flex-col gap-4">
+      <div class="flex flex-wrap items-center gap-2 md:flex-row">
+        <select class="select w-[180px]">
+          <optgroup label="Fruits">
+            <option>Apple</option>
+            <option>Banana</option>
+            <option>Blueberry</option>
+          </optgroup>
+          <optgroup label="Grapes">
+            <option>Pineapple</option>
+          </optgroup>
+        </select>
+        <select class="select w-[180px]" disabled>
+          <option>Disabled</option>
+        </select>
+      </div>
 
-      {% call select(
-        selected="cyan"
-      ) %}
-      
-      <div role="group" aria-labelledby="fruit-options-label">
-        <span id="fruit-options-label" role="heading">Colors</span>
-        <div type="button" role="option" data-value="fuchsia">
-          <span class="rounded-full size-4 bg-fuchsia-500"></span>
-          Fuchsia
-        </div>
-        <div type="button" role="option" data-value="cyan">
-          <span class="rounded-full size-4 bg-cyan-500"></span>
-          Cyan
-        </div>
-        <div type="button" role="option" data-value="amber">
-          <span class="rounded-full size-4 bg-amber-500"></span>
-          Amber
+      <div class="flex flex-wrap items-center gap-4">
+        <div class="flex flex-wrap items-center gap-2 md:flex-row">
+          {% call select(trigger_attrs={"class": "w-[180px]"}) %}
+          <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>
+            <div role="option" data-value="banana">Banana</div>
+            <div role="option" data-value="blueberry">Blueberry</div>
+          </div>
+          <div role="group" aria-labelledby="vegetable-options-label">
+            <span id="vegetable-options-label" role="heading">Grapes</span>
+            <div role="option" data-value="pineapple">Pineapple</div>
+          </div>
+          {% endcall %}
+
+          {% call select(
+            trigger_attrs={"class": "w-[180px]"},
+            listbox_attrs={"class": "scrollbar overflow-y-auto max-h-64"}
+          ) %}
+          {% for i in range(0, 99) %}
+          <div role="option" data-value="item-{{ i }}">Item {{ i }}</div>
+          {% endfor %}
+          {% endcall %}
+
+          {% call select(trigger_attrs={"disabled": "disabled", "class": "w-[180px]"}) %}
+          <div role="option" data-value="disabled">Disabled</div>
+          {% endcall %}
+
+
+          {% call select(trigger_attrs={'class': 'w-[180px]'}) %}
+          <div type="button" role="option" data-value="bar">
+            {% lucide "chart-bar", {"class": "text-muted-foreground"} %}
+            Bar
+          </div>
+          <div type="button" role="option" data-value="line">
+            {% lucide "chart-line", {"class": "text-muted-foreground"} %}
+            Line
+          </div>
+          <div type="button" role="option" data-value="pie">
+            {% lucide "chart-pie", {"class": "text-muted-foreground"} %}
+            Pie
+          </div>
+          {% endcall %}
         </div>
       </div>
-      <div role="group" aria-labelledby="vegetable-options-label">
-        <span id="vegetable-options-label" role="heading">Gradients</span>
-        <div type="button" role="option" data-value="fuchsia-to-cyan">
-          <span class="rounded-full size-4 bg-linear-to-bl from-fuchsia-500 to-cyan-500"></span>
-          Amber to Cyan
-        </div>
-        <div type="button" role="option" data-value="cyan-to-amber">
-          <span class="rounded-full size-4 bg-linear-to-bl from-cyan-500 to-amber-500"></span>
-          Cyan to Amber
-        </div>
-        <div type="button" role="option" data-value="amber-to-fuchsia">
-          <span class="rounded-full size-4 bg-linear-to-bl from-amber-500 to-fuchsia-500"></span>
-          Amber to Fuchsia
-        </div>
-      </div>
-      {% endcall %}
+    </div>
   </div>
 </section>