{# Enhanced slide-over — Alpine dzSlideOver with configurable width and focus trap.
   Contract: ~/.claude/skills/ux-architect/components/slide-over.md (UX-012)
   Parameters: panel_id (str, default: 'dz-slideover'), width (str: sm|md|lg|xl|full, default: md), title (str)

   v0.62 CSS refactor: inline Tailwind → semantic .dz-slideover-* classes
   (components/fragments.css). Width preset via data-dz-width attribute
   selector — replaces Alpine `:class="widthClass()"` runtime computation. #}
{% set panel_id = panel_id | default('dz-slideover') %}
{% set width = width | default('md') %}
<div x-data="dzSlideOver" data-dz-width="{{ width }}" id="{{ panel_id }}"
     x-trap.noscroll="open">

  {# Backdrop #}
  <div x-show="open"
       x-transition:enter="transition ease-out duration-200"
       x-transition:enter-start="opacity-0"
       x-transition:enter-end="opacity-100"
       x-transition:leave="transition ease-in duration-150"
       x-transition:leave-start="opacity-100"
       x-transition:leave-end="opacity-0"
       @click="hide()"
       class="dz-slideover-backdrop"
       style="display: none">
  </div>

  {# Panel #}
  <div x-show="open"
       x-transition:enter="transition ease-out duration-200"
       x-transition:enter-start="translate-x-full"
       x-transition:enter-end="translate-x-0"
       x-transition:leave="transition ease-in duration-150"
       x-transition:leave-start="translate-x-0"
       x-transition:leave-end="translate-x-full"
       role="dialog" aria-modal="true" :aria-labelledby="'{{ panel_id }}-title'"
       class="dz-slideover-panel"
       style="display: none">

    {# Header #}
    <div class="dz-slideover-header">
      <h3 class="dz-slideover-title" id="{{ panel_id }}-title">{{ title | default('Details') }}</h3>
      <button @click="hide()"
              class="dz-slideover-close"
              aria-label="Close">
        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    {# Content — HTMX swaps into here #}
    <div id="{{ panel_id }}-content" class="dz-slideover-content">
      {% block slideover_content %}
      <p class="dz-slideover-content-empty">Select an item to view details.</p>
      {% endblock %}
    </div>
  </div>
</div>