{# Date range picker for workspace regions with date_range enabled.
   Contract: ~/.claude/skills/ux-architect/components/parking-lot-primitives.md (cycle 247)

   v0.62 CSS refactor: inline Tailwind → semantic .dz-date-range-* classes
   (components/fragments.css). #}
<div class="dz-date-range-picker date-range-bar">
  <label class="dz-date-range-label" for="date-from-{{ region_name }}">From</label>
  <input type="date"
         id="date-from-{{ region_name }}"
         name="date_from"
         value="{{ date_from or '' }}"
         class="dz-date-range-input"
         hx-get="{{ endpoint }}"
         hx-target="#region-{{ region_name }}"
         hx-swap="innerHTML"
         hx-include="closest .date-range-bar"/>
  <label class="dz-date-range-label" for="date-to-{{ region_name }}">To</label>
  <input type="date"
         id="date-to-{{ region_name }}"
         name="date_to"
         value="{{ date_to or '' }}"
         class="dz-date-range-input"
         hx-get="{{ endpoint }}"
         hx-target="#region-{{ region_name }}"
         hx-swap="innerHTML"
         hx-include="closest .date-range-bar"/>
</div>