{# tag_me/templates/tag_me/tag_me_select_search_bar_mobile.html #} {% comment %} MOBILE SEARCH BAR ACTIONS - CONTEXT AWARE Shows ONE big, clear action button based on current state Priority: Creating > Can Add > Has Search > Has Selected Tags {% endcomment %}
{% comment %} TEMPLATE CLASS MIGRATION - MOBILE SEARCH BAR (MD3 REFACTOR v3.0) ================================================================= Date: December 06, 2025 Migration: MD3 Elevation Alignment with Datetime Component CHANGES APPLIED: ✅ All buttons (3 instances with surface backgrounds): 1. bg-surface-container-high-lib → bg-surface-container-highest-lib [3→4] - Dropdown is now at [3], buttons should be at [4] for prominence 2. ring-offset-surface-container-lib → ring-offset-surface-container-high-lib [1→3] - Parent dropdown is now at surface-container-high-lib [3] - Ring offset must match parent surface AFFECTED ELEMENTS: 1. Add tag button (primary bg - unchanged, only ring offset updated) 2. Clear search button (surface bg updated + ring offset) 3. Remove all tags button (surface bg updated + ring offset) ELEVATION CONTEXT: - These buttons sit inside the dropdown search section - Dropdown is now at surface-container-high-lib [3] - Surface buttons use surface-container-highest-lib [4] for prominence - Ring offset matches dropdown background [3] NO OTHER CHANGES: - Alpine.js: unchanged - HTMX: unchanged - HTML structure: unchanged - Spacing/layout: unchanged - Non-MD3 classes: unchanged {% endcomment %}