Widget Calendar

<div class="ws-widgets rounded-xl border border-[var(--ws-widgets-border)] bg-[var(--ws-widgets-bg)] p-5">
  <div class="mb-4 flex items-center justify-between">
    <h3 class="text-sm font-semibold text-[var(--ws-widgets-text)]">March 2026</h3>
    <div class="flex gap-1">
      <button type="button" class="rounded-md p-1 text-[var(--ws-widgets-text-soft)] hover:bg-[var(--ws-widgets-border)]" aria-label="Previous week">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>
      </button>
      <button type="button" class="rounded-md p-1 text-[var(--ws-widgets-text-soft)] hover:bg-[var(--ws-widgets-border)]" aria-label="Next week">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>
      </button>
    </div>
  </div>
  <div class="grid grid-cols-7 gap-1 text-center text-xs" role="grid" aria-label="Weekly calendar view">
    <div role="columnheader" class="pb-2 font-medium text-[var(--ws-widgets-text-soft)]">Mon</div>
    <div role="columnheader" class="pb-2 font-medium text-[var(--ws-widgets-text-soft)]">Tue</div>
    <div role="columnheader" class="pb-2 font-medium text-[var(--ws-widgets-text-soft)]">Wed</div>
    <div role="columnheader" class="pb-2 font-medium text-[var(--ws-widgets-text-soft)]">Thu</div>
    <div role="columnheader" class="pb-2 font-medium text-[var(--ws-widgets-text-soft)]">Fri</div>
    <div role="columnheader" class="pb-2 font-medium text-[var(--ws-widgets-text-soft)]">Sat</div>
    <div role="columnheader" class="pb-2 font-medium text-[var(--ws-widgets-text-soft)]">Sun</div>
    <div class="py-1 text-[var(--ws-widgets-text)]">16</div>
    <div class="py-1 text-[var(--ws-widgets-text)]">17</div>
    <div class="rounded-md bg-[var(--ws-widgets-accent)]/10 py-1 font-semibold text-[var(--ws-widgets-accent)]">18</div>
    <div class="py-1 text-[var(--ws-widgets-text)]">19</div>
    <div class="py-1 text-[var(--ws-widgets-text)]">20</div>
    <div class="py-1 text-[var(--ws-widgets-text-soft)]">21</div>
    <div class="py-1 text-[var(--ws-widgets-text-soft)]">22</div>
  </div>
  <div class="mt-3 space-y-1.5">
    <div class="flex items-center gap-2 rounded-md bg-indigo-500/10 px-2 py-1.5 text-xs">
      <span class="h-2 w-2 rounded-full bg-indigo-500" aria-hidden="true"></span>
      <span class="font-medium text-[var(--ws-widgets-text)]">Team Standup</span>
      <span class="ml-auto text-[var(--ws-widgets-text-soft)]">9:00</span>
    </div>
    <div class="flex items-center gap-2 rounded-md bg-emerald-500/10 px-2 py-1.5 text-xs">
      <span class="h-2 w-2 rounded-full bg-emerald-500" aria-hidden="true"></span>
      <span class="font-medium text-[var(--ws-widgets-text)]">Design Review</span>
      <span class="ml-auto text-[var(--ws-widgets-text-soft)]">14:00</span>
    </div>
    <div class="flex items-center gap-2 rounded-md bg-amber-500/10 px-2 py-1.5 text-xs">
      <span class="h-2 w-2 rounded-full bg-amber-500" aria-hidden="true"></span>
      <span class="font-medium text-[var(--ws-widgets-text)]">Sprint Planning</span>
      <span class="ml-auto text-[var(--ws-widgets-text-soft)]">16:30</span>
    </div>
  </div>
</div>