category page filters components and general ui - no functionality yet

resources/views/components/ui/dropdown.blade.php

@@ -0,0 +1,42 @@
+@props([
+    'id',
+    'label'        => null,
+    'ariaLabel'    => null,
+    'triggerClass' => '',
+])
+
+<div
+    data-controller="dropdown"
+    {{ $attributes->merge(['class' => 'dropdown relative inline-flex items-center']) }}
+>
+    {{-- Popover invoker buttons get implicit aria-expanded / aria-details from
+         the browser, so only the accessible name needs setting here.
+         click->dropdown#position measures this button and feeds the panel's
+         position to CSS before the native popover toggle paints it. --}}
+    <button
+        type="button"
+        popovertarget="{{ $id }}"
+        popovertargetaction="toggle"
+        data-dropdown-target="trigger"
+        data-action="click->dropdown#position"
+        @if($ariaLabel) aria-label="{{ $ariaLabel }}" @endif
+        class="bg-transparent border-b border-black pr-10 py-2.5 cursor-pointer focus:outline-none text-left whitespace-nowrap {{ $triggerClass }}"
+    >
+        {{ $label }}
+    </button>
+
+    <x-ui.icon
+        name="arrow-down"
+        :size="16"
+        class="dropdown-caret pointer-events-none absolute right-0 transition-transform duration-200"
+    />
+
+    <div
+        id="{{ $id }}"
+        popover
+        data-dropdown-target="panel"
+        class="dropdown-panel absolute w-max max-w-xs bg-neutral-200 border border-black"
+    >
+        {{ $slot }}
+    </div>
+</div>