Fixing and extending combobox and command

docs/src/assets/styles.css

@@ -3279,7 +3279,7 @@
         margin-block: calc(var(--spacing) * 1);
         border-color: var(--color-border);
       }
-      &:not(:has([data-value]:not([aria-hidden='true'])))::before {
+      &:not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
         margin: calc(var(--spacing) * -1);
         display: flex;
         align-items: center;
@@ -3292,11 +3292,11 @@
         font-size: var(--text-sm);
         line-height: var(--tw-leading, var(--text-sm--line-height));
       }
-      &[data-empty]:not(:has([data-value]:not([aria-hidden='true'])))::before {
+      &[data-empty]:not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
         --tw-content: attr(data-empty);
         content: var(--tw-content);
       }
-      &:not([data-empty]):not(:has([data-value]:not([aria-hidden='true'])))::before {
+      &:not([data-empty]):not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
         --tw-content: 'No results found';
         content: var(--tw-content);
       }

docs/src/components/combobox.njk

@@ -118,7 +118,14 @@ toc:
             </ul>
             <dl>
               <dt><code class="highlight language-html">&lt;div role="option" data-value="{ VALUE }"&gt;</code></dt>
-              <dd>Option that can be selected.Should have a unique id if you use the <code>aria-activedescendant</code> attribute on the trigger.</dd>
+              <dd>Option that can be selected. Should have a unique id if you use the <code>aria-activedescendant</code> attribute on the trigger. Optional attributes:
+                <ul>
+                  <li><code>data-filter</code>: custom text used for filtering (if different from displayed content, e.g., <code>data-filter="united states"</code>)</li>
+                  <li><code>data-keywords</code>: additional keywords for enhanced filtering (e.g., <code>data-keywords="bread fruit"</code>)</li>
+                  <li><code>data-force</code>: forces the option to always display, regardless of filter (e.g., <code>data-force</code>)</li>
+                  <li><code>aria-disabled="true"</code>: marks option as disabled (excluded from selection and keyboard navigation)</li>
+                </ul>
+              </dd>
               <dt><code class="highlight language-html">&lt;hr role="separator"&gt;</code> <span class="badge-secondary">Optional</span></dt>
               <dd>Separator between groups/options.</dd>
               <dt><code class="highlight language-html">&lt;div role="group"&gt;</code> <span class="badge-secondary">Optional</span></dt>

docs/src/components/command.njk

@@ -33,15 +33,15 @@ toc:
 {% macro command_items(suggestions_id="suggestions", settings_id="settings") %}
 <div role="group" aria-labelledby="{{ suggestions_id }}">
   <span role="heading" id="{{ suggestions_id }}">Suggestions</span>
-  <div role="menuitem" data-label="calendar" onclick="console.log('Open calendar')">
+  <div role="menuitem" onclick="console.log('Open calendar')">
     {% lucide "calendar" %}
     <span>Calendar</span>
   </div>
-  <div role="menuitem" data-label="search-emoji" onclick="console.log('Search emoji')">
+  <div role="menuitem" onclick="console.log('Search emoji')">
     {% lucide "smile" %}
     <span>Search Emoji</span>
   </div>
-  <div role="menuitem" data-label="calculator" aria-disabled="true">
+  <div role="menuitem" aria-disabled="true">
     {% lucide "calculator" %}
     <span>Calculator</span>
   </div>
@@ -49,17 +49,17 @@ toc:
 <hr role="separator" />
 <div role="group" aria-labelledby="{{ settings_id }}">
   <span role="heading" id="{{ settings_id }}">Settings</span>
-  <div role="menuitem" data-label="profile" onclick="console.log('Open profile')">
+  <div role="menuitem" onclick="console.log('Open profile')" data-filter="Profile">
     {% lucide "user" %}
     <span>Profile</span>
     <kbd class="ml-auto text-muted-foreground bg-transparent tracking-widest">⌘P</kbd>
   </div>
-  <div role="menuitem" data-label="billing" onclick="console.log('Open billing')">
+  <div role="menuitem" onclick="console.log('Open billing')" data-filter="Billing">
     {% lucide "credit-card" %}
     <span>Billing</span>
     <kbd class="ml-auto text-muted-foreground bg-transparent tracking-widest">⌘B</kbd>
   </div>
-  <div role="menuitem" data-label="settings" onclick="console.log('Open settings')">
+  <div role="menuitem" onclick="console.log('Open settings')" data-filter="Settings">
     {% lucide "settings" %}
     <span>Settings</span>
     <kbd class="ml-auto text-muted-foreground bg-transparent tracking-widest">⌘S</kbd>
@@ -158,8 +158,9 @@ toc:
                 <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:
                   <ul>
-                    <li><code>data-label</code>: custom label for filtering (if different from text content)</li>
-                    <li><code>data-keywords</code>: additional keywords for enhanced filtering</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>
                     <li><code>aria-disabled="true"</code>: marks item as disabled (excluded from keyboard navigation and filtering)</li>
                   </ul>
                 </dd>
@@ -209,11 +210,11 @@ toc:
 </div>
 
 {% set raw_code %}{% raw %}{% call command() %}
-  <div role="menuitem" data-label="calendar">
+  <div role="menuitem">
     <svg>...</svg>
     <span>Calendar</span>
   </div>
-  <div role="menuitem" data-label="settings">
+  <div role="menuitem" data-keywords="config preferences">
     <svg>...</svg>
     <span>Settings</span>
   </div>

docs/src/components/select.njk

@@ -58,8 +58,8 @@ toc:
       type: "group",
       label: "Fruits",
       items: [
-        { type: "item", value: "apple", label: "Apple" },
-        { type: "item", value: "banana", label: "Banana" },
+        { type: "item", value: "apple", label: "Apple", attrs: {"data-force": "true"} },
+        { type: "item", value: "banana", label: "Banana", attrs: {"data-keywords": "bread"} },
         { type: "item", value: "blueberry", label: "Blueberry" },
         { type: "item", value: "pineapple", label: "Grapes" },
         { type: "item", value: "pineapple", label: "Pineapple" }

src/css/basecoat.css

@@ -572,13 +572,13 @@
       [role='separator'] {
         @apply border-border -mx-1 my-1;
       }
-      &:not(:has([data-value]:not([aria-hidden='true'])))::before {
+      &:not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
         @apply flex items-center justify-center py-6 px-3 text-sm truncate -m-1;
       }
-      &[data-empty]:not(:has([data-value]:not([aria-hidden='true'])))::before {
+      &[data-empty]:not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
         @apply content-[attr(data-empty)];
       }
-      &:not([data-empty]):not(:has([data-value]:not([aria-hidden='true'])))::before {
+      &:not([data-empty]):not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
         @apply content-['No_results_found'];
       }
     }

src/js/command.js

@@ -46,7 +46,15 @@
 
       visibleMenuItems = [];
       allMenuItems.forEach(item => {
-        const itemText = (item.dataset.label || item.textContent).trim().toLowerCase();
+        if (item.hasAttribute('data-force')) {
+          item.setAttribute('aria-hidden', 'false');
+          if (menuItems.includes(item)) {
+            visibleMenuItems.push(item);
+          }
+          return;
+        }
+
+        const itemText = (item.dataset.filter || item.textContent).trim().toLowerCase();
         const keywords = (item.dataset.keywords || '').toLowerCase();
         const matches = itemText.includes(searchTerm) || keywords.includes(searchTerm);
         item.setAttribute('aria-hidden', String(!matches));

src/js/select.js

@@ -48,7 +48,7 @@
 
     const updateValue = (option, triggerEvent = true) => {
       if (option) {
-        selectedLabel.innerHTML = option.dataset.label || option.innerHTML;
+        selectedLabel.innerHTML = option.innerHTML;
         input.value = option.dataset.value;
         listbox.querySelector('[role="option"][aria-selected="true"]')?.removeAttribute('aria-selected');
         option.setAttribute('aria-selected', 'true');
@@ -112,8 +112,17 @@
 
         visibleOptions = [];
         allOptions.forEach(option => {
-          const optionText = (option.dataset.label || option.textContent).trim().toLowerCase();
-          const matches = optionText.includes(searchTerm);
+          if (option.hasAttribute('data-force')) {
+            option.setAttribute('aria-hidden', 'false');
+            if (options.includes(option)) {
+              visibleOptions.push(option);
+            }
+            return;
+          }
+
+          const optionText = (option.dataset.filter || option.textContent).trim().toLowerCase();
+          const keywords = (option.dataset.keywords || '').toLowerCase();
+          const matches = optionText.includes(searchTerm) || keywords.includes(searchTerm);
           option.setAttribute('aria-hidden', String(!matches));
           if (matches && options.includes(option)) {
             visibleOptions.push(option);