drawer.twig

{#
/**
 * @component Wudo Drawer
 *
 * A universal drawer / modal container implemented as a Web Component.
 * Can be used as an off-canvas panel (left/right) or as a centered modal.
 *
 * Behavior:
 * - Opens and closes via global Custom Events (`drawer:open`, `drawer:close`).
 * - Automatically manages focus using a focus-trap utility.
 * - Locks background interaction using the `inert` attribute.
 *
 * Available variables:
 * - id (string, required): Unique identifier used for event targeting.
 * - position (string): Drawer position (`left`, `right`, `center`).
 * - size (string): Maximum width of the drawer (e.g. `400px`, `100%`).
 * - title (string): Accessible title rendered in the drawer header.
 * - content (string|render array): Main drawer content.
 * - footer (string|render array, optional): Optional footer content.
 *
 * Accessibility:
 * - Uses role="dialog" with aria-modal="true".
 * - The drawer title is referenced via aria-labelledby.
 * - Focus is moved into the drawer on open and restored on close.
 * - Background content is made inert while the drawer is active.
 *
 * Notes:
 * - The overlay and close button both call `.close()` on the nearest
 *   <wudo-drawer> instance.
 * - The `content` block can be overridden by extending templates.
 */
#}

{{ attach_library('wudo/focus-trap') }}

{%
  set classes = [
  'drawer',
  'drawer--' ~ (position|default('right')),
  modifier_class ? modifier_class : '',
]
%}

<wudo-drawer
  id="{{ id }}"
  {{ attributes.addClass(classes) }}
  style="--drawer-max-width: {{ size }};"
  role="dialog"
  aria-modal="true"
  aria-labelledby="{{ id }}-title"
  {% if portal %}
    source-selector="{{ portal.source }}"
    wrapper-selector="{{ portal.wrapper }}"
    slot-id="{{ portal.slot }}"
  {% endif %}
>
  <div class="drawer__overlay" onclick="this.closest('wudo-drawer').close()"></div>

  <div class="drawer__inner">
    <header class="drawer__header">
      <h2 id="{{ id }}-title" class="drawer__title">{{ title }}</h2>

      {% set button_attributes = create_attribute({
        'class': 'drawer__close',
        'data-flyout-open-trigger': '',
        'aria-expanded': 'false',
        'onclick': "this.closest('wudo-drawer').close()"
      }) %}

      {{ include('wudo:button', {
        text: 'Close drawer',
        icon: 'close',
        size: 'large',
        icon_only: true,
        icon_size: 'large',
        attributes: button_attributes,
      }, with_context = false) }}
    </header>

    <div class="drawer__body">
      {% block content %}
        {{ content|raw }}
      {% endblock %}
    </div>

    {% if footer %}
      <footer class="drawer__footer">
        {{ footer }}
      </footer>
    {% endif %}
  </div>
</wudo-drawer>