{# tag_me/templates/tag_me/tag_me_select.html #}
{% comment %}
  REFACTORED: Shared structure with conditional search bar actions
  Breakpoint: md: (768px)
  - Desktop (>= 768px): Inline action buttons
  - Mobile (< 768px): Context-aware action button
  
  Only the search bar action area is different between mobile/desktop.
  Everything else is shared with responsive Tailwind classes.
{% endcomment %}
<style>
/* Custom Scrollbar Styles - Uses library CSS variables for theme adaptation */
.menu-scrollable::-webkit-scrollbar {
  width: 0.5rem;
}
.menu-scrollable::-webkit-scrollbar-track {
  background-color: var(--tm-color-outline-variant-lib);
  border-radius: 9999px;
}
.menu-scrollable::-webkit-scrollbar-thumb {
  background-color: var(--tm-color-on-surface-variant-lib);
  border-radius: 9999px;
}
.menu-scrollable::-webkit-scrollbar-thumb:hover {
  background-color: var(--tm-color-on-surface-lib);
}

/* Dark mode automatically handled by CSS variables - no .dark override needed! */

/* Screen Reader Only - for accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Swipe Gesture Styles - Uses library CSS variables */
.swipe-item {
  position: relative;
  touch-action: pan-y;
  transition: transform 0.2s ease-out;
}

.swipe-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

.swipe-item.swipe-unselected.swipe-active::before {
  background-color: color-mix(in oklch, var(--tm-color-primary-lib) 30%, transparent);
  opacity: 1;
}

.swipe-item.swipe-selected.swipe-active::before {
  background-color: color-mix(in oklch, var(--tm-color-on-primary-lib) 40%, transparent);
  opacity: 1;
}

/* Dark mode handled automatically - no manual override needed */

/*
 * Input Height & Background Configuration
 * --tm-input-height: Controls the closed-state min-height of the select widget.
 * --tm-input-bg: Controls the closed-state background color.
 * Defaults: 36px height, surface-container-high-lib background (via var() fallback)
 *
 * Override in your project CSS to match your design system:
 *   :root { --tm-input-height: 38px; --tm-input-bg: var(--color-surface-container); }
 *
 * Rules live in tag-me styles.css (utilities layer), not here.
 */
</style>
{# djlint:off #}
<!-- Main Container -->
<div id='tag-me-select-container-{{ name }}'
     x-data="alpineTagMeMultiSelect({ 
     addTagURL: '{{ add_tag_url }}', 
     permittedToAddTags: {{ permitted_to_add_tags }}, 
     allowMultiple: {{ multiple }}, 
     autoSelectNewTags: {{ auto_select_new_tags }}, 
     displayNumberSelected: {{ display_number_selected }}, 
     choices: {{ choices|safe }}, selected: {{ values|safe }}, 
     helpUrl: '', 
     mgmtUrl: '' 
     })"
     x-on:click.outside="close()"
     x-on:keydown.escape="if(show) { $event.stopPropagation(); close(); }"
     x-on:dropdown-opened.window="if ($event.detail.id !== $id('search-menu-dropdown')) close()"
     x-effect="if (show) $dispatch('dropdown-opened', { id: $id('search-menu-dropdown') })"
     x-id="['search-menu-dropdown']"
     role="combobox"
     aria-label="Tag selection combobox"
     aria-haspopup="listbox"
     :aria-expanded="show"
     :aria-describedby="$id('keyboard-instructions')"
     class="tm:w-full">
    <!-- Hidden Input for Form Submission -->
{# djlint:on #}
<input type="hidden"
       name="{{ name }}"
       x-model="formValue"
       x-ref="hiddenInput">
<!-- Aria-live region for screen reader announcements -->
<div aria-live="polite"
     aria-atomic="true"
     class="sr-only"
     x-text="ariaAnnouncement"></div>
<!-- Keyboard instructions for screen readers -->
<div :id="$id('keyboard-instructions')" class="sr-only">
    Use arrow keys to navigate options. Press Enter to select. Press Escape to close. Press Backspace in empty search to clear all selections.
</div>
<!-- Widget Container -->
<div id="tag-me-select-{{ name }}"
     class="tm:relative tm:w-full"
     x-ref="widgetContainer">
    <!-- Input-like Container (Closed State) - SHARED -->
    <div class="tm:relative tm:w-full">
        <div class="tm-select-closed tm:block tm:w-full tm:rounded-md tm:border-0 tm:shadow-sm tm:ring-1 tm:ring-inset tm:ring-outline-lib tm:transition-all tm:duration-200 tm:focus-within:ring-2 tm:focus-within:ring-primary-lib"
             :class="show ? 'tm:ring-2 tm:ring-primary-lib' : ''">
            <!-- Selected Tags Display + Clickable Area -->
            <div class="tm:flex tm:items-center tm:py-2 tm:md:py-1.5 tm:pr-11 tm:md:pr-10 tm:pl-3 tm:cursor-pointer"
                 @click="toggle()">
                <!-- Tags Container -->
                <div class="tm:flex tm:flex-wrap tm:gap-2 tm:md:gap-2 tm:flex-1 tm:items-center">
                    <!-- Display Selected Tags (up to displayNumberSelected) -->
                    <template x-for="tagName in displayedSelected" :key="tagName">
                        <div class="tm:inline-flex tm:justify-center tm:items-center tm:font-medium tm:py-1.5 tm:px-3 tm:md:py-1 tm:md:px-2.5 tm:rounded-md tm:md:rounded-full tm:text-on-primary-lib tm:bg-primary-lib tm:shadow-sm tm:transition-all tm:duration-150 hover:tm:bg-primary-lib hover:tm:opacity-90 hover:tm:shadow-md hover:tm:scale-105"
                             style="cursor: default"
                             role="option"
                             aria-selected="true"
                             @click.stop
                             x-transition:enter="transition ease-out duration-200"
                             x-transition:enter-start="opacity-0 scale-90"
                             x-transition:enter-end="opacity-100 scale-100"
                             x-transition:leave="transition ease-in duration-150"
                             x-transition:leave-start="opacity-100 scale-100"
                             x-transition:leave-end="opacity-0 scale-90">
                            <div x-text="tagName"
                                 class="tm:text-xs tm:font-normal tm:leading-none tm:max-w-full tm:flex-initial tm:mr-1">
                            </div>
                            <button type="button"
                                    x-on:click.stop="removeTag(tagName)"
                                    class="tm:flex-shrink-0 tm:p-1 tm:md:p-0 tm:text-on-primary-lib/80 tm:rounded tm:transition-all tm:duration-150 hover:tm:text-on-primary-lib hover:tm:bg-on-primary-lib/20 hover:tm:scale-110 tm:active:scale-95 tm:focus:outline-none tm:focus:ring-2 tm:focus:ring-on-primary-lib tm:focus:ring-offset-2 tm:focus:ring-offset-primary-lib"
                                    style="cursor: pointer"
                                    :aria-label="'Remove ' + tagName + ' tag'"
                                    :title="'Remove ' + tagName">
                                <svg xmlns="http://www.w3.org/2000/svg"
                                     class="tm:h-4 tm:w-4 tm:md:h-3.5 tm:md:w-3.5"
                                     fill="none"
                                     viewBox="0 0 24 24"
                                     stroke="currentColor"
                                     stroke-width="2.5"
                                     aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                            </button>
                        </div>
                    </template>
                    <!-- "More" Indicator -->
                    <div x-show="overflowCount > 0"
                         x-transition:enter="transition ease-out duration-200"
                         x-transition:enter-start="opacity-0 scale-90"
                         x-transition:enter-end="opacity-100 scale-100"
                         x-transition:leave="transition ease-in duration-150"
                         x-transition:leave-start="opacity-100 scale-100"
                         x-transition:leave-end="opacity-0 scale-90"
                         class="tm:inline-flex tm:justify-center tm:items-center tm:font-medium tm:py-1.5 tm:px-3 tm:md:py-1 tm:md:px-2.5 tm:rounded-md tm:md:rounded-full tm:text-on-primary-lib tm:bg-primary-lib tm:shadow-sm">
                        <span class="tm:text-xs tm:font-normal tm:leading-none">
                            <span class="tm:inline-flex tm:px-1.5 tm:rounded tm:text-xs tm:font-normal tm:bg-on-primary-lib/20 tm:text-on-primary-lib tm:mr-1 tm:align-middle">
                                +<span x-text="overflowCount"></span>
                            </span>
                            more
                        </span>
                    </div>
                    <!-- Placeholder Text -->
                    <span x-show="selectedTags.size === 0"
                          class="tm:flex-1 tm:text-sm tm:text-on-surface-variant-lib">Select tags...</span>
                </div>
            </div>
            <!-- Dropdown Toggle Button (Always Visible) -->
            <button type="button"
                    x-on:click="toggle()"
                    class="tm:absolute tm:inset-y-0 tm:right-0 tm:flex tm:items-center tm:px-3 tm:md:px-2 tm:text-on-surface-variant-lib hover:tm:text-on-surface-lib tm:transition-colors tm:duration-150 tm:focus:outline-none tm:focus:ring-2 tm:focus:ring-primary-lib tm:focus:ring-offset-2 tm:focus:ring-offset-surface-lib tm:rounded-r-md"
                    :aria-expanded="show"
                    aria-controls="tag-me-select-{{ name }}"
                    aria-label="Toggle tag selection dropdown">
                <svg viewBox="0 0 20 20"
                     fill="currentColor"
                     data-slot="icon"
                     aria-hidden="true"
                     class="tm:h-5 tm:w-5"
                     :style="show ? 'transform: rotate(180deg)' : 'transform: rotate(0deg)'">
                    <path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
                </svg>
            </button>
        </div>
    </div>
    <!-- End Input-like Container -->
    <!-- Dropdown Container - SHARED -->
    <div x-show="show"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 translate-y-1"
         x-transition:enter-end="opacity-100 translate-y-0"
         x-transition:leave="transition ease-in duration-100"
         x-transition:leave-start="opacity-100 translate-y-0"
         x-transition:leave-end="opacity-0 translate-y-1"
         x-cloak
         x-init=" const updatePosition = () => { if (!$refs.widgetContainer) { console.warn('tag-me-select: widgetContainer ref not found'); return; }  if ($el.dataset.positioned === 'true') { return; }  const isMobileView = window.innerWidth < 768;  if (isMobileView) { const rect = $refs.widgetContainer.getBoundingClientRect(); const viewportWidth = window.innerWidth; const margin = 8;  const spaceOnLeft = rect.left; const spaceOnRight = viewportWidth - rect.right;  if (spaceOnLeft > spaceOnRight) { $el.style.right = '0'; $el.style.left = 'auto'; $el.style.width = Math.min(viewportWidth - margin * 2, rect.right - margin) + 'px'; } else { $el.style.left = '0'; $el.style.right = 'auto'; $el.style.width = Math.min(viewportWidth - margin * 2, viewportWidth - rect.left - margin) + 'px'; } } else { $el.style.width = '100%'; $el.style.left = '0'; $el.style.right = '0'; }  $el.dataset.positioned = 'true'; };  $watch('show', value => { if (value) { $el.dataset.positioned = 'false'; setTimeout(updatePosition, 10); } }); "
         class="tm:absolute tm:z-dropdown tm:mt-2 tm:w-full tm:rounded-md tm:bg-surface-container-high-lib tm:shadow-lg tm:border tm:border-outline-variant-lib">
        <div class="tm:flex tm:flex-col tm:w-full">
            <!-- Search Section - SHARED -->
            <div class="tm:px-3 tm:py-3 tm:border-b tm:border-outline-variant-lib">
                <div class="tm:relative">
                    <!-- Search Icon -->
                    <div class="tm:absolute tm:inset-y-0 tm:left-0 tm:pl-3 tm:flex tm:items-center tm:pointer-events-none">
                        <svg xmlns="http://www.w3.org/2000/svg"
                             class="tm:h-5 tm:w-5 tm:text-on-surface-variant-lib"
                             fill="none"
                             viewBox="0 0 24 24"
                             stroke="currentColor"
                             stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                    </div>
                    <!-- Search Input - SHARED -->
                    <input id="search-{{ name }}"
                           type="text"
                           name="search-{{ name }}"
                           autocomplete="off"
                           x-model.debounce.300ms="search"
                           @keydown.backspace="if($event.target.value === '') deselectAll()"
                           @keydown.arrow-down.prevent="navigateDown()"
                           @keydown.arrow-up.prevent="navigateUp()"
                           @keydown.enter.prevent="selectFocused()"
                           x-ref="searchInput"
                           x-init="$watch('show', value => { if (value && shouldAutoFocus) { $nextTick(() => $refs.searchInput?.focus()) } })"
                           class="tm:block tm:w-full tm:rounded-md tm:border-0 tm:bg-surface-container-lib tm:py-2.5 tm:md:py-2 tm:pr-16 tm:md:pr-12 tm:pl-10 tm:text-base tm:text-on-surface-lib tm:outline-none tm:placeholder:text-on-surface-variant-lib tm:focus:bg-surface-container-high-lib tm:focus:ring-2 tm:focus:ring-primary-lib tm:transition-colors tm:duration-150 tm:sm:text-sm/6"
                           placeholder="Search tags..."
                           role="searchbox"
                           aria-label="Search available tags"
                           aria-autocomplete="list"
                           :aria-activedescendant="focusedTag ? 'tag-option-' + focusedTag : null"
                           :aria-controls="show ? 'tag-listbox-{{ name }}' : null"
                           :aria-expanded="show">
                    <!-- Search Bar Actions - ONLY DIFFERENT PART -->
                    <div class="tm:absolute tm:inset-y-0 tm:right-0 tm:flex tm:items-center tm:py-1.5 tm:pr-2 tm:md:pr-1.5">
                        <!-- Desktop: Inline action buttons -->
                        <div class="tm:hidden tm:md:block">{% include "tag_me/tag_me_select_search_bar_desktop.html" %}</div>
                        <!-- Mobile: Context-aware action button (will be built in Phase C) -->
                        <div class="tm:block tm:md:hidden">{% include "tag_me/tag_me_select_search_bar_mobile.html" %}</div>
                    </div>
                </div>
            </div>
            <!-- Options List - SHARED -->
            <ul id="tag-listbox-{{ name }}"
                role="listbox"
                tabindex="-1"
                aria-label="Available tags"
                x-show="!menuShow"
                x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0 translate-y-1"
                x-transition:enter-end="opacity-100 translate-y-0"
                x-cloak
                class="tm:max-h-60 tm:w-full tm:overflow-y-auto tm:overflow-x-hidden tm:bg-surface-container-high-lib tm:pt-1 tm:mb-0 tm:text-base tm:outline-none menu-scrollable tm:sm:text-sm">
                <!-- Search Result Count -->
                <li x-show="filteredTags.length > 0 && search.length > 0"
                    class="tm:px-3 tm:py-1.5 tm:text-xs tm:text-on-surface-variant-lib tm:bg-surface-container-high-lib tm:sticky tm:top-0 tm:z-[10] tm:border-b tm:border-outline-variant-lib">
                    <span class="tm:font-medium" x-text="filteredTags.length"></span>
                    <span x-text="filteredTags.length === 1 ? 'result' : 'results'"></span>
                </li>
                <!-- Existing Tags -->
                <template x-for="(tagName, index) in filteredTags" :key="tagName">
                    <li role="option"
                        :id="'tag-option-' + tagName"
                        :aria-selected="isSelected(tagName)"
                        :aria-label="tagName + (isSelected(tagName) ? ' (selected)' : '')"
                        @click="toggleTag(tagName)"
                        @keydown.enter.prevent="toggleTag(tagName)"
                        @touchstart="handleSwipeStart($event, $el)"
                        @touchmove="handleSwipeMove($event)"
                        @touchend="handleSwipeEnd($event, tagName)"
                        @touchcancel="resetSwipe()"
                        class="tm:block tm:px-4 tm:py-3 tm:md:px-3 tm:md:py-2 tm:text-on-surface-lib tm:select-none tm:cursor-pointer tm:transition-all tm:duration-150 tm:ease-in-out swipe-item"
                        :class="isSelected(tagName) ? 'tm:bg-primary-lib swipe-selected' : (isFocused(tagName) ? 'tm:bg-surface-container-highest-lib tm:ring-2 tm:ring-inset tm:ring-primary-lib' : 'hover:tm:bg-surface-container-highest-lib swipe-unselected')">
                        <div class="tm:flex tm:items-center tm:justify-between">
                            <span x-text="tagName" class="tm:truncate"></span>
                            <!-- Checkmark for Selected -->
                            <span class="tm:flex-shrink-0 tm:ml-2 tm:transition-all tm:duration-200"
                                  x-show="isSelected(tagName)"
                                  x-transition:enter="transition ease-out duration-200"
                                  x-transition:enter-start="opacity-0 scale-50"
                                  x-transition:enter-end="opacity-100 scale-100"
                                  x-transition:leave="transition ease-in duration-150"
                                  x-transition:leave-start="opacity-100 scale-100"
                                  x-transition:leave-end="opacity-0 scale-50">
                                <svg class="tm:h-5 tm:w-5 tm:text-on-primary-lib"
                                     xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 20 20"
                                     fill="currentColor"
                                     aria-hidden="true">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                                </svg>
                            </span>
                        </div>
                    </li>
                </template>
                <!-- Empty Library State -->
                <li x-show="filteredTags.length === 0 && search.length === 0"
                    x-transition:enter="transition ease-out duration-200"
                    x-transition:enter-start="opacity-0"
                    x-transition:enter-end="opacity-100"
                    class="tm:px-4 tm:py-8 tm:text-center">
                    <svg class="tm:mx-auto tm:h-12 tm:w-12 tm:text-on-surface-variant-lib"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor"
                         aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                    </svg>
                    <h3 class="tm:mt-2 tm:text-sm tm:font-medium tm:text-on-surface-variant-lib">No tags in library</h3>
                    <p class="tm:mt-1 tm:text-sm tm:text-on-surface-variant-lib">Start typing to create your first tag!</p>
                </li>
                <!-- No Search Results Message -->
                <li x-show="filteredTags.length === 0 && search.length > 0"
                    x-transition:enter="transition ease-out duration-200"
                    x-transition:enter-start="opacity-0"
                    x-transition:enter-end="opacity-100"
                    class="tm:px-4 tm:py-8 tm:text-center">
                    <svg class="tm:mx-auto tm:h-10 tm:w-10 tm:text-on-surface-variant-lib"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor"
                         aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                    <h3 class="tm:mt-2 tm:text-sm tm:font-medium tm:text-on-surface-variant-lib">No tags found</h3>
                    <p class="tm:mt-1 tm:text-sm tm:text-on-surface-variant-lib">
                        No matches for "<span x-text="search" class="tm:font-medium tm:text-on-surface-variant-lib"></span>"
                    </p>
                    <p class="tm:mt-2 tm:text-xs tm:text-on-surface-variant-lib"
                       x-show="canAddTag">Try a different search or create a new tag</p>
                </li>
            </ul>
            <!-- Footer - SHARED (responsive visibility) -->
            <div class="tm:hidden tm:md:block tm:w-full tm:py-2 tm:m-0 tm:rounded-b-md tm:bg-surface-container-highest-lib tm:border-t tm:border-outline-variant-lib">
                <p class="tm:text-xs tm:text-on-surface-variant-lib tm:text-center tm:px-3">
                    <span class="tm:inline-flex tm:items-center tm:gap-1">
                        <kbd class="tm:px-1.5 tm:py-0.5 tm:text-xs tm:font-semibold tm:text-on-surface-lib tm:bg-surface-container-high-lib tm:border tm:border-outline-variant-lib tm:rounded">↑↓</kbd>
                        navigate
                        <kbd class="tm:px-1.5 tm:py-0.5 tm:text-xs tm:font-semibold tm:text-on-surface-lib tm:bg-surface-container-high-lib tm:border tm:border-outline-variant-lib tm:rounded tm:ml-2">Enter</kbd>
                        select
                        <kbd class="tm:px-1.5 tm:py-0.5 tm:text-xs tm:font-semibold tm:text-on-surface-lib tm:bg-surface-container-high-lib tm:border tm:border-outline-variant-lib tm:rounded tm:ml-2">Esc</kbd>
                        close
                    </span>
                </p>
            </div>
            <!-- Mobile Footer with Help/Management -->
            <div class="tm:block tm:md:hidden">{% include "tag_me/tag_me_mobile_footer.html" %}</div>
        </div>
    </div>
    <!-- End Dropdown Container -->
</div>
<!-- End Widget Container -->
<!-- Mobile Bottom Sheet (< 768px only) -->
<div class="tm:block tm:md:hidden">{% include "tag_me/tag_me_bottom_sheet.html" %}</div>
</div>
<!-- End Main Container -->
{% comment %}
TEMPLATE CLASS MIGRATION - MAIN SELECT (MD3 REFACTOR v3.2)
===========================================================
Date: February 21, 2026
Migration: Replace hard-coded height with configurable CSS custom property

INPUT HEIGHT CONFIGURATION (v3.2):
✅ Removed hard-coded tm:md:h-[37px]
✅ Added --tm-input-height CSS custom property (default: 36px via var() fallback)
✅ Added --tm-input-bg CSS custom property (default: surface-container-high-lib)
✅ Closed-state container uses .tm-select-closed class with plain CSS min-height + background
✅ Uses @media (min-width: 768px) to match md: breakpoint behavior
✅ Default lives in var() fallback — no selector needed, inherits cleanly from :root
✅ Plain CSS avoids Tailwind arbitrary value parser issues with var() commas
✅ Fixed ring color: outline-variant-lib → outline-lib (MD3 outlined text field spec)
✅ Removed hardcoded tm:bg-surface-lib (now handled by .tm-select-closed CSS rule)

CONSUMER USAGE:
  Override in project CSS to match your design system:
    :root { --tm-input-height: 38px; }   /* Bootstrap 5 */
    :root { --tm-input-height: 56px; }   /* Material Design 3 */
    :root { --tm-input-height: 36px; }   /* Tailwind UI (default) */

RATIONALE:
  - Hard-coded 37px prevented layout shift but coupled the library
    to a specific design system's input height
  - min-h (not h) allows natural growth on mobile / when tags wrap
  - CSS variable lets consumers match their input heights without
    forking the template
  - Default 36px lives in var() fallback, so :root overrides inherit cleanly

CROSS-COMPONENT COORDINATION (v3.1):
✅ Added x-on:dropdown-opened.window listener
✅ Added x-effect to dispatch 'dropdown-opened' event

MD3 CHANGES APPLIED (ELEVATION ALIGNMENT - v3.0):
1. ✅ Dropdown container: bg-surface-container-high-lib [3]
2. ✅ Search input idle: bg-surface-container-lib [1]
3. ✅ Search input focus: focus:bg-surface-container-high-lib [3]
4. ✅ List container: bg-surface-container-high-lib [3]
5. ✅ Search result count sticky: bg-surface-container-high-lib
6. ✅ List items hover/focus: bg-surface-container-highest-lib [4]
7. ✅ Desktop footer: bg-surface-container-highest-lib [4]
{% endcomment %}
