{#
  No pb_style branching here on purpose — unlike ProgressbarMain, this
  wrapper doesn't know its own shape. Whichever marker classes the children
  carry (.aae-progressbar-fill / .aae-progressbar-path / .aae-progressbar-dot),
  the bundled CSS/JS detect and animate them. See ProgressbarMain for the
  original all-in-one implementation this was split from.
#}
{% set wrapper_classes = ['e-con', 'e-atomic-element', base_styles.base, 'aae-progressbar'] | merge(settings.classes | default([])) | join(' ') %}

<div class="{{ wrapper_classes }} {{ editor_classes | default('') }}"
     data-id="{{ id }}"
     data-element_type="{{ type }}"
     data-e-type="{{ type }}"
     data-interaction-id="{{ interaction_id | default('') }}"
     data-pb-percentage="{{ settings.pb_percentage | default(50) }}"
     data-pb-display-percentage="{{ settings.pb_display_percentage ? 'true' : 'false' }}"
     {% 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>