{% set classes = ['aae-a-nav', 'e-con', 'e-atomic-element', base_styles.base | default('')] | merge(settings.classes | default([])) | join(' ') %}

{# <div> (not <ul>): items are <div> too, so <ul>/<li> semantics don't apply.
   Using <div> avoids the browser's <li> auto-close mangling deep nested menus.
   role="menubar" keeps the a11y semantics. #}
<div role="menubar" class="{{ classes }} {{ editor_classes | default('') }}"
    data-id="{{ id }}"
    data-element_type="{{ type }}"
    data-e-type="{{ type }}"
    data-interaction-id="{{ interaction_id | default('') }}"
    {# Desktop dropdown-indicator icon: nav.js fetches this SVG and inlines it
       next to each has-dropdown item's label (see injectDropdownIcons). #}
    data-show-dropdown-icon="{{ settings.show_dropdown_icon is defined and not settings.show_dropdown_icon ? 'false' : 'true' }}"
    {# Mobile config from the Nav's OWN props, so the runtime never depends on
       the companion's mirror — which a selection-scoped reconciler writes and
       can leave stale, the "sometimes works, sometimes not" bug. nav.js prefers
       these and falls back to the companion's copies for older pages. #}
    data-mobile-enabled="{{ settings.mobile_enabled is defined and settings.mobile_enabled ? 'true' : 'false' }}"
    data-mobile-breakpoint="{{ settings.mobile_breakpoint | default('767') | e('html_attr') }}"
    data-mobile-position="{{ settings.mobile_position | default('right') | e('html_attr') }}"
    data-mobile-close-on-link="{{ settings.mobile_close_on_link is defined and not settings.mobile_close_on_link ? 'false' : 'true' }}"
    data-mobile-lock-scroll="{{ settings.mobile_lock_scroll is defined and not settings.mobile_lock_scroll ? 'false' : 'true' }}"
    {# Editor-only drawer preview switch. Rendered as the INITIAL value only:
       an atomic Switch commits through a set-settings transaction that updates
       the model WITHOUT re-rendering this Twig, so nav.js reads the LIVE value
       off the editor model and falls back to this attribute. Same constraint
       offcanvas.js documents for its own `editor_open`. #}
    data-mobile-editor-open="{{ settings.mobile_editor_open is defined and settings.mobile_editor_open ? 'true' : 'false' }}"
    {% if settings.dropdown_icon is defined and settings.dropdown_icon.url is defined and settings.dropdown_icon.url is not empty %}
        data-dropdown-icon="{{ settings.dropdown_icon.url | e('html_attr') }}"
    {% endif %}
    {% if settings._cssid is defined and settings._cssid is not empty %}
        id="{{ settings._cssid | e('html_attr') }}"
    {% endif %}
    {% if settings.attributes is defined and settings.attributes is not empty %}
        {{ settings.attributes | raw }}
    {% endif %}
    {{ editor_attributes | default('') | raw }}>

    {{ children_placeholder | raw }}
</div>