{% comment %}
MD3 outlined "exposed dropdown menu" field (pilot widget for the MD3 pass).
The outline is a real <fieldset>/<legend> so the label notch is a true gap in
the border — works over any background (glass drawers included) with no
background-color patch behind the label. A native <select> always renders a
selection, so the label is permanently floated into the notch; there is no
resting/floating animation to manage. The legend holds an invisible copy of
the label text purely to size the notch. Django's own widget draws the <select>
and its options (groups included), marks the chosen one by value and follows
HTML's rule for the required attribute.
Any hx_* option reaches the control; the htmx settings are written only when
it makes a request (hx_get, hx_post, hx_put, hx_patch, hx_delete).
{% endcomment %}
{% load phoxtail_core_tags %}
<div class="phx-field{% if field.errors %} phx-field--error{% endif %}">
    <div class="phx-field__box">
        {% widget field class="phx-field__control" htmx=htmx %}
        {% if show_label != False and label != "" %}
            <label for="{{ field.id_for_label }}" class="phx-field__label">
                {{ label|default:field.label }}{% if show_required != False and required|default:field.field.required %}&nbsp;*{% endif %}
            </label>
        {% endif %}
        <fieldset class="phx-field__outline" aria-hidden="true">
            <legend class="phx-field__notch{% if show_label == False or label == "" %} phx-field__notch--empty{% endif %}">
                {% if show_label != False and label != "" %}<span>{{ label|default:field.label }}{% if show_required != False and required|default:field.field.required %}&nbsp;*{% endif %}</span>{% endif %}
            </legend>
        </fieldset>
        <svg class="phx-field__trailing" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M7 10l5 5 5-5z"/>
        </svg>
    </div>
    {% if supporting == "errors" %}
        <div class="phx-field__supporting"{% if field.auto_id %} id="{{ field.auto_id }}_error"{% endif %}>
            {% for error in field.errors %}<span>{{ error }}</span>{% endfor %}
        </div>
    {% elif supporting == "help" %}
        <div class="phx-field__supporting"{% if field.auto_id %} id="{{ field.auto_id }}_helptext"{% endif %}>{{ help_text|default:field.help_text }}</div>
    {% endif %}
</div>