{# Slide-over panel (lightweight) — inline x-data, used embedded in filterable_table #}
{# Contract: ~/.claude/skills/ux-architect/components/slide-over.md (UX-012) #}
{# Parameters: panel_id (optional, default: 'slide-over') #}
{% set panel_id = panel_id | default('slide-over') %}
<div x-data="{ open: false, hide() { this.open = false } }"
     @open-slide-over.window="open = true"
     @keydown.esc.window="hide()"
     id="{{ panel_id | e }}">

  {# 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="fixed inset-0 bg-black/30 z-40"
       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 | e }}-title'"
       class="fixed inset-y-0 right-0 z-50 w-full max-w-md bg-[hsl(var(--background))] border-l border-[hsl(var(--border))] shadow-[-8px_0_24px_rgb(0_0_0/0.12)] overflow-y-auto transform"
       style="display: none">

    {# Header #}
    <div class="flex items-center justify-between p-4 border-b border-[hsl(var(--border))]">
      <h3 class="text-[14px] font-semibold text-[hsl(var(--foreground))]" id="{{ panel_id | e }}-title">Details</h3>
      <button @click="hide()"
              class="h-7 w-7 flex items-center justify-center rounded-[4px] text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--muted))] hover:text-[hsl(var(--foreground))] transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
              aria-label="Close">
        <svg class="h-4 w-4" 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 | e }}-content" class="p-4">
      <p class="text-[13px] text-[hsl(var(--muted-foreground))]">Select an item to view details.</p>
    </div>
  </div>
</div>