{# API #}
{%- set props = props | default([]) -%}
{%- set _dialogId = props.dialogId -%}
{%- set _enableDismiss = props.enableDismiss ?? true -%}
{%- set _label = props.label | default('Close') -%}

{# Class names #}
{%- set _rootClassName = _spiritClassPrefix ~ 'HeaderDialogCloseButton' -%}

{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
{%- set _classNames = [ _rootClassName, _styleProps.className ] -%}

<button
    {{ mainProps(props) }}
    {{ styleProp(_styleProps) }}
    {{ classProp(_classNames) }}
    type="button"
    data-spirit-dismiss="{{ _enableDismiss ? 'offcanvas' : null }}"
    data-spirit-target="{{ _enableDismiss ? '#' ~ _dialogId : null }}"
    aria-controls="{{ _dialogId }}"
    aria-expanded="false"
>
    <Icon name="close" />
    <VisuallyHidden>{{ _label }}</VisuallyHidden>
</button>
