Add a clear button to the date picker

`clearable` empties a date, or both ends of a range, closes an open
picker and hands focus back to the field, as the time picker's does.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy

resources/views/components/datepicker.blade.php

@@ -21,7 +21,8 @@
      with, and the errors for `period`, `period.start` and `period.end` all belong to this field.
      `min` and `max` (`Y-m-d` or a date object) disable the days outside them and keep the
      keyboard inside them. `label`, `hint`, `icon`, `variant` (`outlined`, `filled`) and `size`
-     are the field's; `name` adds hidden inputs carrying `Y-m-d` for a plain form post, and every
+     are the field's; `clearable` adds a button that empties it (a date, or both ends of a range)
+     once it holds one; `name` adds hidden inputs carrying `Y-m-d` for a plain form post, and every
      other attribute (`required`, `disabled`, `readonly`) reaches the text field. Errors under
      the `wire:model` name replace the hint, and so does a typed date that cannot be read.
 
@@ -48,6 +49,7 @@
     'min' => null,
     'max' => null,
     'value' => null,
+    'clearable' => false,
 ])
 
 @php
@@ -179,6 +181,19 @@
             />
 
             <x-slot:trailing>
+                @if ($clearable)
+                    <button
+                        type="button"
+                        class="field-trailing field-clear field-button"
+                        aria-label="{{ __('Clear') }}"
+                        x-on:click="clear()"
+                        @disabled($attributes->get('disabled') || $attributes->get('readonly'))
+                        data-field-clear
+                    >
+                        <x-livewire-material::icon name="close" class="size-(--field-icon)" />
+                    </button>
+                @endif
+
                 <button
                     type="button"
                     class="field-trailing field-button"

resources/views/showcase/sections/pickers.blade.php

@@ -3,7 +3,7 @@
         'docked' => <<<'BLADE'
             <div class="grid w-full gap-6 md:grid-cols-2" x-data="{ expires: '{{ now()->addWeek()->format('Y-m-d') }}', starts: null }">
                 <div class="grid content-start gap-4">
-                    <x-datepicker label="Expires on" x-model="expires" hint="Type a date or pick one" />
+                    <x-datepicker label="Expires on" clearable x-model="expires" hint="Type a date or pick one" />
                     <p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(expires)"></code></p>
                 </div>