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

src/css/basecoat.css

@@ -154,11 +154,16 @@
   .alert-destructive {
     @apply relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current;
     
-    h2,
-    h3 {
+    > h2,
+    > h3,
+    > h4,
+    > h5,
+    > h6,
+    > strong,
+    > [data-title] {
       @apply col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight;
     }
-    section {
+    > section {
       @apply text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed;
 
       ul {
@@ -172,7 +177,7 @@
   .alert-destructive {
     @apply text-destructive bg-card [&>svg]:text-current;
 
-    section {
+    > section {
       @apply text-destructive;
     }
   }

src/jinja/command.html.jinja

@@ -143,10 +143,10 @@
   Renders a list of items for the command component.
 
   @param items {array} - Array of items to render. Each item can be:
-    - { type: "item", label: "Text", content: "HTML", keywords: "search terms", disabled: true, attrs: {} }
+    - { type: "item", label: "Text or HTML", icon: "HTML", url: "href", keywords: "search terms", disabled: true, attrs: {} }
     - { type: "group", label: "Group Title", items: [...] }
     - { type: "separator" }
-    Note: Use attrs to add data-label for alternative search text if needed.
+    Note: Use attrs to add data-label for alternative search text if needed. If url is provided, renders as <a role="menuitem"> instead of <div role="menuitem">. Label supports HTML (marked as safe).
   @param parent_id_prefix {string} [optional] - The prefix for the item id.
 #}
 {% macro render_command_items(items, parent_id_prefix="items") %}
@@ -163,25 +163,44 @@
           {% endfor %}
         {% endif %}
       >
-        <span role="heading" id="{{ group_label_id }}">{{ item.label }}</span>
+        <span role="heading" id="{{ group_label_id }}">{{ item.label | safe }}</span>
         {{ render_command_items(item.items, item_id) if item.items }}
       </div>
     {% elif item.type == "separator" %}
       <hr role="separator" />
     {% elif item.type == "item" or not item.type %}
-      <div
-        id="{{ item_id }}"
-        role="menuitem"
-        {% if item.keywords %}data-keywords="{{ item.keywords }}"{% endif %}
-        {% if item.disabled %}aria-disabled="true"{% endif %}
-        {% if item.attrs %}
-          {% for key, value in item.attrs.items() %}
-            {{ key }}="{{ value }}"
-          {% endfor %}
-        {% endif %}
-      >
-        {{ item.content | safe if item.content else item.label }}
-      </div>
+      {% if item.url %}
+        <a
+          id="{{ item_id }}"
+          href="{{ item.url }}"
+          role="menuitem"
+          {% if item.keywords %}data-keywords="{{ item.keywords }}"{% endif %}
+          {% if item.disabled %}aria-disabled="true"{% endif %}
+          {% if item.attrs %}
+            {% for key, value in item.attrs.items() %}
+              {% if key != "href" %}{{ key }}="{{ value }}"{% endif %}
+            {% endfor %}
+          {% endif %}
+        >
+          {% if item.icon %}{{ item.icon | safe }}{% endif %}
+          {{ item.content | safe if item.content else (item.label | safe) }}
+        </a>
+      {% else %}
+        <div
+          id="{{ item_id }}"
+          role="menuitem"
+          {% if item.keywords %}data-keywords="{{ item.keywords }}"{% endif %}
+          {% if item.disabled %}aria-disabled="true"{% endif %}
+          {% if item.attrs %}
+            {% for key, value in item.attrs.items() %}
+              {{ key }}="{{ value }}"
+            {% endfor %}
+          {% endif %}
+        >
+          {% if item.icon %}{{ item.icon | safe }}{% endif %}
+          {{ item.content | safe if item.content else (item.label | safe) }}
+        </div>
+      {% endif %}
     {% endif %}
   {% endfor %}
 {% endmacro %}

src/jinja/sidebar.html.jinja

@@ -117,7 +117,7 @@
         >
           <summary aria-controls="submenu-{{ item_id }}-content">
             {% if item.icon %}{{ item.icon | safe }}{% endif %}
-            {{ item.label }}
+            {{ item.label | safe }}
           </summary>
           <ul id="submenu-{{ item_id }}-content">
             {{ render_sidebar_content(item["items"], item_id) if item["items"] }}
@@ -136,7 +136,7 @@
           {% endif %}
         >
           {% if item.icon %}{{ item.icon | safe }}{% endif %}
-          <span>{{ item.label }}</span>
+          <span>{{ item.label | safe }}</span>
         </a>
        </li>
     {% endif %}

src/js/command.js

@@ -55,8 +55,12 @@
         }
 
         const itemText = (item.dataset.filter || item.textContent).trim().toLowerCase();
-        const keywords = (item.dataset.keywords || '').toLowerCase();
-        const matches = itemText.includes(searchTerm) || keywords.includes(searchTerm);
+        const keywordList = (item.dataset.keywords || '')
+          .toLowerCase()
+          .split(/[\s,]+/)
+          .filter(Boolean);
+        const matchesKeyword = keywordList.some(keyword => keyword.includes(searchTerm));
+        const matches = itemText.includes(searchTerm) || matchesKeyword;
         item.setAttribute('aria-hidden', String(!matches));
         if (matches && menuItems.includes(item)) {
           visibleMenuItems.push(item);

src/js/select.js

@@ -121,8 +121,12 @@
           }
 
           const optionText = (option.dataset.filter || option.textContent).trim().toLowerCase();
-          const keywords = (option.dataset.keywords || '').toLowerCase();
-          const matches = optionText.includes(searchTerm) || keywords.includes(searchTerm);
+          const keywordList = (option.dataset.keywords || '')
+            .toLowerCase()
+            .split(/[\s,]+/)
+            .filter(Boolean);
+          const matchesKeyword = keywordList.some(keyword => keyword.includes(searchTerm));
+          const matches = optionText.includes(searchTerm) || matchesKeyword;
           option.setAttribute('aria-hidden', String(!matches));
           if (matches && options.includes(option)) {
             visibleOptions.push(option);
@@ -290,4 +294,4 @@
   if (window.basecoat) {
     window.basecoat.register('select', 'div.select:not([data-select-initialized])', initSelect);
   }
-})();
+})();

src/nunjucks/command.njk

@@ -143,10 +143,10 @@
   Renders a list of items for the command component.
 
   @param items {array} - Array of items to render. Each item can be:
-    - { type: "item", label: "Text", content: "HTML", keywords: "search terms", disabled: true, attrs: {} }
+    - { type: "item", label: "Text or HTML", icon: "HTML", url: "href", keywords: "search terms", disabled: true, attrs: {} }
     - { type: "group", label: "Group Title", items: [...] }
     - { type: "separator" }
-    Note: Use attrs to add data-label for alternative search text if needed.
+    Note: Use attrs to add data-label for alternative search text if needed. If url is provided, renders as <a role="menuitem"> instead of <div role="menuitem">. Label supports HTML (marked as safe).
   @param parent_id_prefix {string} [optional] - The prefix for the item id.
 #}
 {% macro render_command_items(items, parent_id_prefix="items") %}
@@ -163,25 +163,44 @@
           {% endfor %}
         {% endif %}
       >
-        <span role="heading" id="{{ group_label_id }}">{{ item.label }}</span>
+        <span role="heading" id="{{ group_label_id }}">{{ item.label | safe }}</span>
         {{ render_command_items(item.items, item_id) if item.items }}
       </div>
     {% elif item.type == "separator" %}
       <hr role="separator" />
     {% elif item.type == "item" or not item.type %}
-      <div
-        id="{{ item_id }}"
-        role="menuitem"
-        {% if item.keywords %}data-keywords="{{ item.keywords }}"{% endif %}
-        {% if item.disabled %}aria-disabled="true"{% endif %}
-        {% if item.attrs %}
-          {% for key, value in item.attrs %}
-            {{ key }}="{{ value }}"
-          {% endfor %}
-        {% endif %}
-      >
-        {{ item.content | safe if item.content else item.label }}
-      </div>
+      {% if item.url %}
+        <a
+          id="{{ item_id }}"
+          href="{{ item.url }}"
+          role="menuitem"
+          {% if item.keywords %}data-keywords="{{ item.keywords }}"{% endif %}
+          {% if item.disabled %}aria-disabled="true"{% endif %}
+          {% if item.attrs %}
+            {% for key, value in item.attrs %}
+              {% if key != "href" %}{{ key }}="{{ value }}"{% endif %}
+            {% endfor %}
+          {% endif %}
+        >
+          {% if item.icon %}{{ item.icon | safe }}{% endif %}
+          {{ item.content | safe if item.content else (item.label | safe) }}
+        </a>
+      {% else %}
+        <div
+          id="{{ item_id }}"
+          role="menuitem"
+          {% if item.keywords %}data-keywords="{{ item.keywords }}"{% endif %}
+          {% if item.disabled %}aria-disabled="true"{% endif %}
+          {% if item.attrs %}
+            {% for key, value in item.attrs %}
+              {{ key }}="{{ value }}"
+            {% endfor %}
+          {% endif %}
+        >
+          {% if item.icon %}{{ item.icon | safe }}{% endif %}
+          {{ item.content | safe if item.content else (item.label | safe) }}
+        </div>
+      {% endif %}
     {% endif %}
   {% endfor %}
 {% endmacro %}

src/nunjucks/sidebar.njk

@@ -117,7 +117,7 @@
         >
           <summary aria-controls="submenu-{{ item_id }}-content">
             {% if item.icon %}{{ item.icon | safe }}{% endif %}
-            {{ item.label }}
+            {{ item.label | safe }}
           </summary>
           <ul id="submenu-{{ item_id }}-content">
             {{ render_sidebar_content(item.items, item_id) if item.items }}
@@ -136,7 +136,7 @@
           {% endif %}
         >
           {% if item.icon %}{{ item.icon | safe }}{% endif %}
-          <span>{{ item.label }}</span>
+          <span>{{ item.label | safe }}</span>
         </a>
        </li>
     {% endif %}