Fixing edge case for command and select with data-keywords filtering, updating macros for command and sidebar

docs/src/assets/styles.css

@@ -260,6 +260,9 @@
   .invisible {
     visibility: hidden;
   }
+  .visible {
+    visibility: visible;
+  }
   .sr-only {
     position: absolute;
     width: 1px;
@@ -525,6 +528,12 @@
   .max-h-\[200px\] {
     max-height: 200px;
   }
+  .max-h-\[260px\] {
+    max-height: 260px;
+  }
+  .max-h-\[320px\] {
+    max-height: 320px;
+  }
   .max-h-\[612px\] {
     max-height: 612px;
   }
@@ -585,6 +594,9 @@
   .w-\[200px\] {
     width: 200px;
   }
+  .w-\[260px\] {
+    width: 260px;
+  }
   .w-\[271px\] {
     width: 271px;
   }
@@ -612,9 +624,15 @@
   .max-w-\[300px\] {
     max-width: 300px;
   }
+  .max-w-\[320px\] {
+    max-width: 320px;
+  }
   .max-w-\[450px\] {
     max-width: 450px;
   }
+  .max-w-\[720px\] {
+    max-width: 720px;
+  }
   .max-w-lg {
     max-width: var(--container-lg);
   }
@@ -651,6 +669,9 @@
   .min-w-\[8rem\] {
     min-width: 8rem;
   }
+  .min-w-\[260px\] {
+    min-width: 260px;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -1298,6 +1319,10 @@
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-sm {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-xl {
     --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2379,7 +2404,7 @@
     &>svg {
       color: currentcolor;
     }
-    h2, h3 {
+    > h2, > h3, > h4, > h5, > h6, > strong, > [data-title] {
       grid-column-start: 2;
       overflow: hidden;
       display: -webkit-box;
@@ -2391,7 +2416,7 @@
       --tw-tracking: var(--tracking-tight);
       letter-spacing: var(--tracking-tight);
     }
-    section {
+    > section {
       grid-column-start: 2;
       display: grid;
       justify-items: start;
@@ -2421,7 +2446,7 @@
     &>svg {
       color: currentcolor;
     }
-    section {
+    > section {
       color: var(--color-destructive);
     }
   }

docs/src/components/command.njk

@@ -155,9 +155,10 @@ toc:
             <dt><code class="highlight language-html">&lt;div role="menu"&gt;</code></dt>
             <dd>The menu containing the command items. Should have <code>id="{ MENU_ID }"</code> refered to by the input's <code>aria-controls</code> attribute.
               <dl>
-                <dt><code class="highlight language-html">&lt;div role="menuitem"&gt;</code></dt>
-                <dd>Command item that triggers an action when clicked. In a command-dialog, clicking a menuitem automatically closes the dialog unless the <code>data-keep-command-open</code> attribute is present. Optional attributes:
+                <dt><code class="highlight language-html">&lt;div role="menuitem"&gt;</code> or <code class="highlight language-html">&lt;a role="menuitem"&gt;</code></dt>
+                <dd>Command item that triggers an action when clicked. Use <code>&lt;a&gt;</code> for navigation links, or <code>&lt;div&gt;</code> for actions. In a command-dialog, clicking a menuitem automatically closes the dialog unless the <code>data-keep-command-open</code> attribute is present. Optional attributes:
                   <ul>
+                    <li><code>href</code>: If present on an <code>&lt;a&gt;</code>, the item navigates to that URL</li>
                     <li><code>data-filter</code>: custom text used for filtering (if different from displayed content, e.g., <code>data-filter="calendar event"</code>)</li>
                     <li><code>data-keywords</code>: additional keywords for enhanced filtering (e.g., <code>data-keywords="calendar event date"</code>)</li>
                     <li><code>data-force</code>: forces the item to always display, regardless of filter (e.g., <code>data-force</code>)</li>
@@ -221,6 +222,31 @@ toc:
 {% endcall %}{% endraw %}{% endset %}
 {{ code_block(raw_code, "jinja") }}
 
+<section class="prose">
+  <p>You can also use the <code>items</code> parameter to pass an array of items:</p>
+</section>
+
+{% set icon_calendar %}{% lucide "calendar" %}{% endset %}
+{% set icon_settings %}{% lucide "settings" %}{% endset %}
+{% set raw_code_items %}{% raw %}{% set icon_calendar %}{% lucide "calendar" %}{% endset %}
+{% set icon_settings %}{% lucide "settings" %}{% endset %}
+{% set items = [
+  { type: "group", label: "Suggestions", items: [
+    { label: "Calendar", icon: icon_calendar, keywords: "date event" },
+    { label: "Search Emoji", icon: icon_settings },
+    { label: "Calculator", disabled: true }
+  ]},
+  { type: "separator" },
+  { type: "group", label: "Settings", items: [
+    { label: "Profile", url: "/profile", icon: icon_settings, keywords: "user account" },
+    { label: "Billing", url: "/billing", icon: icon_settings },
+    { label: "Settings", url: "/settings", icon: icon_settings }
+  ]}
+] %}
+
+{% call command(items=items) %}{% endcall %}{% endraw %}{% endset %}
+{{ code_block(raw_code_items, "jinja") }}
+
 <h2 id="examples"><a href="#examples">Examples</a></h2>
 
 <h3 id="example-dialog"><a href="#example-dialog">Dialog</a></h3>