# TimeTracker

> A running timer with project and task picker, manual time entries, an entries list grouped by day, and a day or week timesheet grid with totals.

Source: https://docs.nasaqui.com/components/time-tracker

## Install

```bash
npx shadcn@latest add https://docs.nasaqui.com/r/time-tracker.json
```

Three pieces for logging work time. `TimeTracker` is the running timer: pick a project and task, add a note, start and
stop. `TimeEntryList` lists entries by day with a manual entry dialog. `Timesheet` shows hours per project and task across a
day or a week with row and column totals. Durations are whole seconds; the components are presentational and your callbacks
save the data.

## When to use

- Freelancers, agencies and teams that log hours against projects and tasks.

## When not to use

- Scheduling events on a calendar: use [`Scheduler`](https://docs.nasaqui.com/components/scheduler).
- Showing a generic table: use [`DataTable`](https://docs.nasaqui.com/components/data-table).

## Import

```tsx
import { TimeTracker, TimeEntryList, Timesheet } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"
```

## Quick start

```tsx
import { TimeTracker, type TimeProject } from "@fadymondy/nasaq/web";

const projects: TimeProject[] = [{ id: "web", name: "Website", tasks: [{ id: "ui", name: "UI polish" }] }];

export function Timer() {
  return <TimeTracker projects={projects} onStart={async (s) => api.start(s)} onStop={async (s) => api.stop(s)} />;
}
```

## Anatomy

```
TimeTracker                     data-slot="time-tracker"
├─ timer readout                role="timer", h:mm:ss, project / task
├─ Start / Stop button
└─ project, task, note fields
TimeEntryList                   data-slot="time-entry-list"
├─ day cards                    total per day, entry rows with edit and delete
└─ TimeEntryDialog              date, project, task, duration, note
Timesheet                       data-slot="timesheet"
├─ view toggle and period navigation
└─ table                        rows by project and task, columns by day, totals
```

## API

### `TimeTracker`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `projects` | `readonly TimeProject[]` | required | `id`, `name`, `tasks?: { id, name }[]`. |
| `running?` | `RunningTimer \| null` | uncontrolled | Controlled running timer. |
| `defaultRunning?` | `RunningTimer \| null` | `null` | Initial running timer (for example restored from your server). |
| `onStart?` | `(selection: TimerSelection & { startedAt: number }) => Promise<Result> \| Result` | none | Resolve `{ error }` to stay stopped. |
| `onStop?` | `(stopped: StoppedTimer) => Promise<Result> \| Result` | none | Receives elapsed `seconds`. Resolve `{ error }` to keep running. |
| `onRunningChange?` | `(running: RunningTimer \| null) => void` | none | Every change of the running timer. |
| `labels?` | `TimeTrackerLabels` | built-in en/ar | String overrides. |
| `className?` | `string` | none | Merged onto the card. |

The clock is derived from `startedAt`, so it stays right after a remount or a page reload.

### `TimeEntryList`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `entries` | `readonly TimeEntry[]` | required | `id`, `date` (`YYYY-MM-DD`), `seconds`, `projectId`, `taskId?`, `note?`. |
| `projects` | `readonly TimeProject[]` | required | For names and pickers. |
| `onAdd?` | `(input: TimeEntryInput) => Promise<Result> \| Result` | none | Shows Add time and the manual entry dialog. |
| `onEdit?` | `(entry, input) => Promise<Result> \| Result` | none | Shows an edit button per entry. |
| `onDelete?` | `(entry: TimeEntry) => Promise<Result> \| Result` | none | Shows a delete button per entry. |
| `labels?` | `TimeTrackerLabels` | built-in | String overrides. |

### `TimeEntryDialog`

Props: `open`, `onOpenChange`, `projects`, `entry?`, `defaultDate?`, `onSubmit(input, entry?)`, `labels?`. Duration accepts
`1:30`, `1.5h`, `90m`, `2h 15m` and Arabic-Indic digits, up to 24 hours.

### `Timesheet`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `entries` | `readonly TimeEntry[]` | required | Entries to total. |
| `projects` | `readonly TimeProject[]` | required | Row names. |
| `view?` / `defaultView?` | `TimesheetView` (`"day" \| "week"`) | `"week"` | Controlled or initial view. |
| `onViewChange?` | `(view: TimesheetView) => void` | none | View change. |
| `date?` / `defaultDate?` | `Date` | today | Any date inside the shown period. |
| `onDateChange?` | `(date: Date) => void` | none | Period navigation. |
| `weekStartsOn?` | `number` | `1`, or `6` in Arabic | 0 Sunday to 6 Saturday. |
| `labels?` | `TimeTrackerLabels` | built-in | String overrides. |

## Examples

### Restore a running timer

```tsx
<TimeTracker projects={projects} defaultRunning={{ projectId: "web", startedAt: Date.now() - 40 * 60 * 1000 }} />
```

### Entries with manual add

```tsx
<TimeEntryList entries={entries} projects={projects} onAdd={async (input) => api.create(input)} onDelete={async (e) => api.remove(e.id)} />
```

### Weekly timesheet in Arabic

```tsx
<NasaqProvider locale="ar">
  <Timesheet entries={entries} projects={projects} />
</NasaqProvider>
```

## Accessibility

| Key | Action |
| --- | --- |
| Tab | Move through fields and buttons. |
| Enter | Start, stop or save. |
| Arrow keys | Change the timesheet view and pick options. |
| Escape | Close the entry dialog. |

- The clock has `role="timer"` and does not announce each second; starting and stopping are announced through a status region.
- The timesheet is a real table inside a labelled, focusable scroll region.
- Localise `labels` for any custom copy.

## RTL & i18n

Built-in English and Arabic. Clock and hour figures are isolated left to right. Dates use `Intl`. The week starts on Saturday by
default in Arabic and previous and next arrows mirror.

## Styling & tokens

Uses card, border, text and danger tokens. Target `[data-slot="time-tracker"]`, `[data-slot="time-entry-list"]` and
`[data-slot="timesheet"]`; extend with `className`. No raw hex.

## Do / Don't

- Do persist `startedAt` so the timer survives reloads.
- Do keep entries in whole seconds.
- Don't rely on colour alone for the running state; the button changes to Stop.

## Related

- [`stat-card`](https://docs.nasaqui.com/components/stat-card)
- [`data-table`](https://docs.nasaqui.com/components/data-table)
- [`date-picker`](https://docs.nasaqui.com/components/date-picker)

## Lab

https://docs.nasaqui.com/?path=/docs/components-productivity-timetracker--docs

## Code

### React

```tsx
import { TimeTracker, type TimeProject } from "@fadymondy/nasaq/web";

const projects: TimeProject[] = [{ id: "web", name: "Website", tasks: [{ id: "ui", name: "UI polish" }] }];

export function Timer() {
  return <TimeTracker projects={projects} onStart={async (s) => api.start(s)} onStop={async (s) => api.stop(s)} />;
}
```

### shadcn

```tsx
import { TimeTracker, type TimeProject } from "@/components/ui/time-tracker";

const projects: TimeProject[] = [{ id: "web", name: "Website", tasks: [{ id: "ui", name: "UI polish" }] }];

export function Timer() {
  return <TimeTracker projects={projects} onStart={async (s) => api.start(s)} onStop={async (s) => api.stop(s)} />;
}
```

### Vue

```vue
<script setup lang="ts">
import { NqTimeEntryList, NqTimesheet, NqTimeTracker, type TimeEntry, type TimeProject } from "@fadymondy/nasaq/vue";
import { ref } from "vue";

const projects: TimeProject[] = [
  { id: "web", name: "Website", tasks: [{ id: "ui", name: "UI polish" }, { id: "seo", name: "SEO fixes" }] },
  { id: "app", name: "Mobile app", tasks: [{ id: "auth", name: "Sign-in flow" }] },
];
const day = (offset: number) => {
  const d = new Date();
  d.setDate(d.getDate() + offset);
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
};
const entries = ref<TimeEntry[]>([
  { id: "1", date: day(0), seconds: 5400, projectId: "web", taskId: "ui", note: "Header spacing" },
  { id: "2", date: day(0), seconds: 2700, projectId: "app", taskId: "auth" },
  { id: "3", date: day(-1), seconds: 10800, projectId: "web", taskId: "seo", note: "Sitemap and meta" },
]);
let next = 10;
</script>

<template>
  <div class="flex flex-col gap-6">
    <NqTimeTracker
      :projects="projects"
      :on-stop="async (s) => void entries.unshift({ id: String(next++), date: day(0), seconds: Math.max(60, s.seconds), projectId: s.projectId, taskId: s.taskId, note: s.note })"
    />
    <NqTimeEntryList
      :entries="entries"
      :projects="projects"
      :on-add="async (input) => void entries.unshift({ id: String(next++), ...input })"
      :on-edit="async (entry, input) => void (entries = entries.map((e) => (e.id === entry.id ? { ...e, ...input } : e)))"
      :on-delete="async (entry) => void (entries = entries.filter((e) => e.id !== entry.id))"
    />
    <NqTimesheet :entries="entries" :projects="projects" />
  </div>
</template>
```

### Blade

```blade
@php
    $day = fn (int $offset) => now()->addDays($offset)->format('Y-m-d');
@endphp
<x-nq::time-tracker log-on-stop
    :projects="[
        ['id' => 'web', 'name' => 'Website', 'tasks' => [['id' => 'ui', 'name' => 'UI polish'], ['id' => 'seo', 'name' => 'SEO fixes']]],
        ['id' => 'app', 'name' => 'Mobile app', 'tasks' => [['id' => 'auth', 'name' => 'Sign-in flow']]],
    ]"
    :entries="[
        ['id' => '1', 'date' => $day(0), 'seconds' => 5400, 'projectId' => 'web', 'taskId' => 'ui', 'note' => 'Header spacing'],
        ['id' => '2', 'date' => $day(0), 'seconds' => 2700, 'projectId' => 'app', 'taskId' => 'auth'],
        ['id' => '3', 'date' => $day(-1), 'seconds' => 10800, 'projectId' => 'web', 'taskId' => 'seo', 'note' => 'Sitemap and meta'],
    ]">
    <x-nq::time-tracker.timer />
    <x-nq::time-tracker.entries />
    <x-nq::time-tracker.timesheet />
</x-nq::time-tracker>
```

### HTML + Alpine

```html
<div data-slot="time-tracker-root" x-data="nqTimeTracker(JSON.parse('{\u0022projects\u0022:[{\u0022id\u0022:\u0022web\u0022,\u0022name\u0022:\u0022Website\u0022,\u0022tasks\u0022:[{\u0022id\u0022:\u0022ui\u0022,\u0022name\u0022:\u0022UI polish\u0022},{\u0022id\u0022:\u0022seo\u0022,\u0022name\u0022:\u0022SEO fixes\u0022}]},{\u0022id\u0022:\u0022app\u0022,\u0022name\u0022:\u0022Mobile app\u0022,\u0022tasks\u0022:[{\u0022id\u0022:\u0022auth\u0022,\u0022name\u0022:\u0022Sign-in flow\u0022}]}],\u0022entries\u0022:[{\u0022id\u0022:\u00221\u0022,\u0022date\u0022:\u00222026-09-29\u0022,\u0022seconds\u0022:5400,\u0022projectId\u0022:\u0022web\u0022,\u0022taskId\u0022:\u0022ui\u0022,\u0022note\u0022:\u0022Header spacing\u0022},{\u0022id\u0022:\u00222\u0022,\u0022date\u0022:\u00222026-09-29\u0022,\u0022seconds\u0022:2700,\u0022projectId\u0022:\u0022app\u0022,\u0022taskId\u0022:\u0022auth\u0022},{\u0022id\u0022:\u00223\u0022,\u0022date\u0022:\u00222026-09-28\u0022,\u0022seconds\u0022:10800,\u0022projectId\u0022:\u0022web\u0022,\u0022taskId\u0022:\u0022seo\u0022,\u0022note\u0022:\u0022Sitemap and meta\u0022}],\u0022view\u0022:\u0022week\u0022,\u0022logOnStop\u0022:true}'))" class="flex flex-col gap-6">
    <div data-slot="time-tracker" class="flex flex-col gap-4 rounded-card border border-border bg-card py-4 text-card-foreground"><div data-slot="card-header" class="grid auto-rows-min items-start gap-1 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]"><div data-slot="card-title" class="text-label text-foreground">Timer</div></div>
    <div data-slot="card-content" class="px-4 flex flex-col gap-4"><div class="flex flex-wrap items-center justify-between gap-3">
            <div role="timer" aria-label="Timer" aria-live="off" class="flex flex-col gap-0.5">
                <bdi dir="ltr" class="tabular-nums text-display-sm font-semibold text-foreground" x-text="clockText()">0:00:00</bdi>
                <span class="text-body-sm text-muted-foreground" x-text="activeLabel()">Choose a project to start the timer.</span>
            </div>
            <button data-slot="button"
     type="button"                         x-show="isRunning()" x-cloak="x-cloak" style="display: none" x-on:click="stop()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-destructive text-destructive-foreground hover:bg-[color-mix(in_oklab,var(--nq-danger-solid)_88%,var(--nq-fg))] h-[calc(var(--nq-control)+8px)] px-5 text-body">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="18" height="18" x="3" y="3" rx="2"/>
</svg>                Stop timer</button>
            <button data-slot="button"
     type="button"                         x-show="!isRunning()" x-on:click="start()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-[calc(var(--nq-control)+8px)] px-5 text-body">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/>
</svg>                Start timer</button>
        </div>
        <div class="grid gap-3 sm:grid-cols-2">
            <div x-id="['project', 'task']" class="contents">
    <div data-slot="field" class="flex flex-col gap-1.5">
        <label data-slot="field-label" x-bind:for="$id('project')" class="text-label text-foreground">Project</label>
        <div data-slot="native-select" class="relative w-full min-w-0">
    <select           class="w-full min-w-0 appearance-none rounded-control border border-input bg-card ps-3 pe-9 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control" x-bind:id="$id('project')" x-effect="syncProject($el, 'sel')" x-on:change="pickProject('sel', $event.target.value)" x-bind:disabled="locked('sel')" x-bind:aria-invalid="invalidProject('sel') ? 'true' : null">
                    <option value=""   selected >Choose a project</option>
                            <option value="web"  >Website</option>
                    <option value="app"  >Mobile app</option>
    </select>
    <svg aria-hidden="true" class="pointer-events-none absolute end-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m6 9 6 6 6-6"/>
</svg></div>
        <div data-slot="field-error" role="alert" x-show="invalidProject('sel')" style="display: none" class="text-caption text-nq-danger-text">Choose a project.</div>
    </div>
    <div data-slot="field" class="flex flex-col gap-1.5">
        <label data-slot="field-label" x-bind:for="$id('task')" class="text-label text-foreground">Task</label>
        <div data-slot="native-select" class="relative w-full min-w-0">
    <select           class="w-full min-w-0 appearance-none rounded-control border border-input bg-card ps-3 pe-9 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control" x-bind:id="$id('task')" x-effect="syncTask($el, 'sel')" x-on:change="pickTask('sel', $event.target.value)" x-bind:disabled="taskLocked('sel')">
                    <option value=""   selected >No task</option>
                        <template x-for="x in tasksOf(projectValue('sel'))" x-bind:key="x.id"><option x-bind:value="x.id" x-text="x.name"></option></template>
    </select>
    <svg aria-hidden="true" class="pointer-events-none absolute end-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m6 9 6 6 6-6"/>
</svg></div>
    </div>
</div>
            <div x-id="['note']" data-slot="field" class="flex flex-col gap-1.5 sm:col-span-2">
                <label data-slot="field-label" x-bind:for="$id('note')" class="text-label text-foreground">What are you working on?</label>
                <input data-slot="input" type="text"
                    x-bind:id="$id(&#039;note&#039;)" x-model="note" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control">
            </div>
        </div>
        <p role="alert" x-show="message" style="display: none" x-text="message" class="text-body-sm text-nq-danger-text"></p>
        <span role="status" class="sr-only" x-text="announce"></span></div></div>
    <section data-slot="time-entry-list" x-id="['entries']" x-bind:aria-labelledby="$id('entries')" class="flex flex-col gap-3">
    <div class="flex items-center justify-between gap-3">
        <h2 x-bind:id="$id('entries')" class="text-title-sm text-foreground">Time entries</h2>
                    <button data-slot="button"
     type="button"                         x-on:click="openDialog(null)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="M12 5v14"/>
</svg>                Add time</button>
            </div>
    <div x-show="!entries.length" style="display: none">
        <div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border border-dashed border-border px-6 py-12 text-center rounded-card">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 6v6l4 2"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">No time logged yet</p>
                    <p class="text-body-sm text-muted-foreground">Start the timer or add an entry by hand.</p>
            </div>
            <div class="mt-1 flex flex-wrap items-center justify-center gap-2"><button data-slot="button"
     type="button"                         x-on:click="openDialog(null)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="M12 5v14"/>
</svg>                        Add time</button></div>
    </div>
    </div>
    <template x-for="g in groups()" x-bind:key="g.day">
        <div data-slot="card" class="flex flex-col gap-4 rounded-card border border-border bg-card py-4 text-card-foreground"><div data-slot="card-header" class="grid auto-rows-min px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] flex-row items-center justify-between gap-3"><div data-slot="card-title" class="text-foreground text-label"><span x-text="g.text"></span></div>
                <span class="text-body-sm text-muted-foreground">
                    Day total <bdi dir="ltr" class="tabular-nums font-medium text-foreground" x-text="hours(g.total)"></bdi>
                </span></div>
            <div data-slot="card-content" class="px-4"><ul class="divide-y divide-border">
                    <template x-for="e in g.items" x-bind:key="e.id">
                        <li class="flex items-center gap-3 py-2">
                            <div class="flex min-w-0 flex-1 flex-col">
                                <span class="truncate text-body-sm font-medium text-foreground" x-text="label(e.projectId, e.taskId)"></span>
                                <span x-show="e.note" class="truncate text-body-sm text-muted-foreground" x-text="e.note"></span>
                            </div>
                            <bdi dir="ltr" class="tabular-nums text-body-sm font-medium text-foreground" x-text="hours(e.seconds)"></bdi>
                                                            <button data-slot="button"
     type="button"                         x-bind:aria-label="entryAria(&#039;edit&#039;, e)" x-on:click="openDialog(e)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>
  <path d="m15 5 4 4"/>
</svg></button>
                                                                                        <button data-slot="button"
     type="button"                         x-bind:aria-label="entryAria(&#039;remove&#039;, e)" x-on:click="removeEntry(e)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg></button>
                                                    </li>
                    </template>
                </ul></div></div>
    </template>
            <div data-slot="dialog" x-data="nqDialog(false)" x-modelable="open" x-id="['nq-dialog']" x-model="dlg.open" class="contents">
    <template x-teleport="body">
    <div data-slot="dialog-portal">
        <div data-slot="dialog-backdrop" x-nq-presence="open" x-on:click="close()" class="fixed inset-0 z-50 bg-nq-fg/15 dark:bg-nq-bg/60 transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"></div>
        <div data-slot="dialog-content" x-bind="popup" x-nq-presence="open" x-trap.noscroll="open"
            class="fixed inset-0 z-50 m-auto grid h-fit w-[calc(100%-2rem)] max-w-lg gap-4 rounded-floating border border-border bg-popover p-6 text-popover-foreground outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
            <form novalidate class="grid gap-4" x-on:submit.prevent="submitDialog()">
                    <div data-slot="dialog-header" class="flex flex-col gap-1.5 pe-8 text-start"><h2 data-slot="dialog-title" :id="$id('nq-dialog', 'title')" class="text-h3 text-foreground"><span x-text="dialogTitle()">Add time</span></h2>
                        <p data-slot="dialog-description" :id="$id('nq-dialog', 'description')" class="text-body-sm text-muted-foreground">Log time you did not track with the timer.</p></div>
                    <div data-slot="field" class="flex flex-col gap-1.5">
                        <span data-slot="field-label" class="text-label text-foreground">Date</span>
                        <div data-slot="date-picker" x-data="nqDatePicker(JSON.parse('{\u0022value\u0022:null,\u0022locale\u0022:\u0022en\u0022,\u0022calendar\u0022:null,\u0022placeholder\u0022:\u0022Select a date\u0022}'))" x-modelable="date" class="contents" x-model="dlg.date">
    <div data-slot="popover" x-data="nqPopover(false)" x-modelable="open" x-id="['nq-popover']" class="contents">
    <button type="button" x-ref="trigger" data-slot="date-picker-trigger" aria-haspopup="dialog" x-on:click="toggle()"
    :aria-expanded="open" x-bind:data-popup-open="open ? '' : undefined"
            aria-label="Date" class="flex h-control w-full min-w-0 items-center justify-between gap-2 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] cursor-default select-none outline-none transition-colors duration-150 ease-nq focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-popup-open:border-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger data-disabled:cursor-not-allowed data-disabled:opacity-50 disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]">
    <span class="min-w-0 flex-1 truncate text-start tabular-nums" x-bind:class="label ? '' : 'text-muted-foreground'" x-bind:data-placeholder="label ? null : ''"
        x-text="label ?? placeholder">Select a date</span>
    <svg aria-hidden="true" class="size-4 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M8 2v3"/>
  <path d="M16 2v3"/>
  <rect x="3" y="3" width="18" height="18" rx="2"/>
  <path d="M3 9h18"/>
  <path d="M8 13h.01"/>
  <path d="M12 13h.01"/>
  <path d="M16 13h.01"/>
  <path d="M8 17h.01"/>
  <path d="M12 17h.01"/>
  <path d="M16 17h.01"/>
</svg></button>
                <template x-teleport="body">
    <div data-slot="popover-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-start.offset.6="$refs.trigger"
        dir="ltr" lang="en" aria-label="Choose date" x-effect="date; $nextTick(() =&gt; close())" class="z-50 rounded-floating border border-border bg-popover text-body-sm text-popover-foreground shadow-floating outline-none transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 w-auto max-w-[var(--available-width)] p-3"><div data-slot="calendar" data-mode="single" dir="ltr" lang="en" x-data="nqCalendar(JSON.parse('{\u0022mode\u0022:\u0022single\u0022,\u0022value\u0022:null,\u0022month\u0022:\u00222026-09-01\u0022,\u0022numberOfMonths\u0022:1,\u0022min\u0022:null,\u0022max\u0022:null,\u0022disabled\u0022:[],\u0022disabledWeekdays\u0022:[],\u0022showOutsideDays\u0022:true,\u0022fixedWeeks\u0022:false,\u0022weekStartsOn\u0022:null,\u0022locale\u0022:\u0022en\u0022,\u0022dir\u0022:\u0022ltr\u0022,\u0022calendar\u0022:null,\u0022today\u0022:null,\u0022previousMonthLabel\u0022:null,\u0022nextMonthLabel\u0022:null}'))" x-modelable="value" x-bind="root"
    x-model="date" class="inline-flex w-fit flex-col gap-2 text-body-sm text-foreground">
    <div class="flex flex-wrap gap-x-6 gap-y-4">
                                <div data-ssr data-slot="calendar-month" class="flex flex-col gap-2">
                <div class="flex items-center justify-between gap-2">
                                            <button data-slot="button"
     type="button"                         aria-label="Previous month" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m15 18-6-6 6-6"/>
</svg></button>
                                        <div aria-live="polite" data-slot="calendar-title" class="text-label font-semibold">September 2026</div>
                                            <button data-slot="button"
     type="button"                         aria-label="Next month" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></button>
                                    </div>
                <table role="grid" aria-label="September 2026" data-slot="calendar-grid" class="border-separate border-spacing-0">
                    <thead>
                        <tr>
                                                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true">S</span><span class="sr-only">Sunday</span></th>
                                                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true">M</span><span class="sr-only">Monday</span></th>
                                                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true">T</span><span class="sr-only">Tuesday</span></th>
                                                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true">W</span><span class="sr-only">Wednesday</span></th>
                                                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true">T</span><span class="sr-only">Thursday</span></th>
                                                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true">F</span><span class="sr-only">Friday</span></th>
                                                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true">S</span><span class="sr-only">Saturday</span></th>
                                                    </tr>
                    </thead>
                    <tbody>
                                                    <tr>
                                                                                                                                                <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-08-30"                                                   data-outside   aria-label="Sunday, August 30, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">30</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-08-31"                                                   data-outside   aria-label="Monday, August 31, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">31</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-01"                                                    aria-label="Tuesday, September 1, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">1</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-02"                                                    aria-label="Wednesday, September 2, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">2</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-03"                                                    aria-label="Thursday, September 3, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">3</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-04"                                                    aria-label="Friday, September 4, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">4</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-05"                                                    aria-label="Saturday, September 5, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">5</button>
                                        </td>
                                                                                                </tr>
                                                    <tr>
                                                                                                                                                <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-06"                                                    aria-label="Sunday, September 6, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">6</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-07"                                                    aria-label="Monday, September 7, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">7</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-08"                                                    aria-label="Tuesday, September 8, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">8</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-09"                                                    aria-label="Wednesday, September 9, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">9</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-10"                                                    aria-label="Thursday, September 10, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">10</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-11"                                                    aria-label="Friday, September 11, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">11</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-12"                                                    aria-label="Saturday, September 12, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">12</button>
                                        </td>
                                                                                                </tr>
                                                    <tr>
                                                                                                                                                <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-13"                                                    aria-label="Sunday, September 13, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">13</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-14"                                                    aria-label="Monday, September 14, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">14</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-15"                                                    aria-label="Tuesday, September 15, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">15</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-16"                                                    aria-label="Wednesday, September 16, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">16</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-17"                                                    aria-label="Thursday, September 17, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">17</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-18"                                                    aria-label="Friday, September 18, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">18</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-19"                                                    aria-label="Saturday, September 19, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">19</button>
                                        </td>
                                                                                                </tr>
                                                    <tr>
                                                                                                                                                <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-20"                                                    aria-label="Sunday, September 20, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">20</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-21"                                                    aria-label="Monday, September 21, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">21</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-22"                                                    aria-label="Tuesday, September 22, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">22</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-23"                                                    aria-label="Wednesday, September 23, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">23</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-24"                                                    aria-label="Thursday, September 24, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">24</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-25"                                                    aria-label="Friday, September 25, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">25</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-26"                                                    aria-label="Saturday, September 26, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">26</button>
                                        </td>
                                                                                                </tr>
                                                    <tr>
                                                                                                                                                <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-27"                                                    aria-label="Sunday, September 27, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">27</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-28"                                                    aria-label="Monday, September 28, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">28</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="0" data-date="2026-09-29"   data-today aria-current="date"                                                   aria-label="Tuesday, September 29, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">29</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-30"                                                    aria-label="Wednesday, September 30, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">30</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-10-01"                                                   data-outside   aria-label="Thursday, October 1, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">1</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-10-02"                                                   data-outside   aria-label="Friday, October 2, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">2</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-10-03"                                                   data-outside   aria-label="Saturday, October 3, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">3</button>
                                        </td>
                                                                                                </tr>
                                            </tbody>
                </table>
            </div>
                <template x-for="m in monthViews" :key="m.key">
            <div data-slot="calendar-month" class="flex flex-col gap-2">
                <div class="flex items-center justify-between gap-2">
                    <button data-slot="button"
     type="button"                         x-show="m.first" x-bind:aria-label="prevLabel" x-bind:disabled="prevBlocked" x-on:click="step(-1)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg x-show="rtl" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg>                        <svg x-show="!rtl" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m15 18-6-6 6-6"/>
</svg></button>
                    <span x-show="!m.first" class="size-control-sm"></span>
                    <div aria-live="polite" data-slot="calendar-title" class="text-label font-semibold" x-text="m.title"></div>
                    <button data-slot="button"
     type="button"                         x-show="m.last" x-bind:aria-label="nextLabel" x-bind:disabled="nextBlocked" x-on:click="step(1)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg x-show="rtl" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m15 18-6-6 6-6"/>
</svg>                        <svg x-show="!rtl" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></button>
                    <span x-show="!m.last" class="size-control-sm"></span>
                </div>
                <table role="grid" :aria-label="m.title" data-slot="calendar-grid" class="border-separate border-spacing-0">
                    <thead>
                        <tr>
                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true" x-text="m.heads[0].narrow"></span><span class="sr-only" x-text="m.heads[0].long"></span></th>
                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true" x-text="m.heads[1].narrow"></span><span class="sr-only" x-text="m.heads[1].long"></span></th>
                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true" x-text="m.heads[2].narrow"></span><span class="sr-only" x-text="m.heads[2].long"></span></th>
                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true" x-text="m.heads[3].narrow"></span><span class="sr-only" x-text="m.heads[3].long"></span></th>
                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true" x-text="m.heads[4].narrow"></span><span class="sr-only" x-text="m.heads[4].long"></span></th>
                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true" x-text="m.heads[5].narrow"></span><span class="sr-only" x-text="m.heads[5].long"></span></th>
                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true" x-text="m.heads[6].narrow"></span><span class="sr-only" x-text="m.heads[6].long"></span></th>
                                                    </tr>
                    </thead>
                    <tbody>
                                                    <tr x-show="m.weeks.length > 0">
                                                                    <td role="gridcell" :aria-selected="cell(m, 0, 0).selected ? 'true' : null" :data-in-range="cell(m, 0, 0).band ? '' : null" :class="cell(m, 0, 0).tdClass">
                                        <button type="button" x-show="!cell(m, 0, 0).blank" :tabindex="cell(m, 0, 0).tab ? 0 : -1" :data-date="cell(m, 0, 0).key"
                                            :data-selected="cell(m, 0, 0).selected ? '' : null" :data-today="cell(m, 0, 0).today ? '' : null"
                                            :data-outside="cell(m, 0, 0).outside ? '' : null" :data-disabled="cell(m, 0, 0).disabled ? '' : null"
                                            :aria-disabled="cell(m, 0, 0).disabled ? 'true' : null" :aria-current="cell(m, 0, 0).today ? 'date' : null"
                                            :aria-label="cell(m, 0, 0).label" x-text="cell(m, 0, 0).day" x-on:click="pick(cell(m, 0, 0).key)"
                                            x-on:focus="!cell(m, 0, 0).disabled && hoverIfOpen(cell(m, 0, 0).key)" x-on:mouseenter="hoverIfOpen(cell(m, 0, 0).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 0, 1).selected ? 'true' : null" :data-in-range="cell(m, 0, 1).band ? '' : null" :class="cell(m, 0, 1).tdClass">
                                        <button type="button" x-show="!cell(m, 0, 1).blank" :tabindex="cell(m, 0, 1).tab ? 0 : -1" :data-date="cell(m, 0, 1).key"
                                            :data-selected="cell(m, 0, 1).selected ? '' : null" :data-today="cell(m, 0, 1).today ? '' : null"
                                            :data-outside="cell(m, 0, 1).outside ? '' : null" :data-disabled="cell(m, 0, 1).disabled ? '' : null"
                                            :aria-disabled="cell(m, 0, 1).disabled ? 'true' : null" :aria-current="cell(m, 0, 1).today ? 'date' : null"
                                            :aria-label="cell(m, 0, 1).label" x-text="cell(m, 0, 1).day" x-on:click="pick(cell(m, 0, 1).key)"
                                            x-on:focus="!cell(m, 0, 1).disabled && hoverIfOpen(cell(m, 0, 1).key)" x-on:mouseenter="hoverIfOpen(cell(m, 0, 1).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 0, 2).selected ? 'true' : null" :data-in-range="cell(m, 0, 2).band ? '' : null" :class="cell(m, 0, 2).tdClass">
                                        <button type="button" x-show="!cell(m, 0, 2).blank" :tabindex="cell(m, 0, 2).tab ? 0 : -1" :data-date="cell(m, 0, 2).key"
                                            :data-selected="cell(m, 0, 2).selected ? '' : null" :data-today="cell(m, 0, 2).today ? '' : null"
                                            :data-outside="cell(m, 0, 2).outside ? '' : null" :data-disabled="cell(m, 0, 2).disabled ? '' : null"
                                            :aria-disabled="cell(m, 0, 2).disabled ? 'true' : null" :aria-current="cell(m, 0, 2).today ? 'date' : null"
                                            :aria-label="cell(m, 0, 2).label" x-text="cell(m, 0, 2).day" x-on:click="pick(cell(m, 0, 2).key)"
                                            x-on:focus="!cell(m, 0, 2).disabled && hoverIfOpen(cell(m, 0, 2).key)" x-on:mouseenter="hoverIfOpen(cell(m, 0, 2).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 0, 3).selected ? 'true' : null" :data-in-range="cell(m, 0, 3).band ? '' : null" :class="cell(m, 0, 3).tdClass">
                                        <button type="button" x-show="!cell(m, 0, 3).blank" :tabindex="cell(m, 0, 3).tab ? 0 : -1" :data-date="cell(m, 0, 3).key"
                                            :data-selected="cell(m, 0, 3).selected ? '' : null" :data-today="cell(m, 0, 3).today ? '' : null"
                                            :data-outside="cell(m, 0, 3).outside ? '' : null" :data-disabled="cell(m, 0, 3).disabled ? '' : null"
                                            :aria-disabled="cell(m, 0, 3).disabled ? 'true' : null" :aria-current="cell(m, 0, 3).today ? 'date' : null"
                                            :aria-label="cell(m, 0, 3).label" x-text="cell(m, 0, 3).day" x-on:click="pick(cell(m, 0, 3).key)"
                                            x-on:focus="!cell(m, 0, 3).disabled && hoverIfOpen(cell(m, 0, 3).key)" x-on:mouseenter="hoverIfOpen(cell(m, 0, 3).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 0, 4).selected ? 'true' : null" :data-in-range="cell(m, 0, 4).band ? '' : null" :class="cell(m, 0, 4).tdClass">
                                        <button type="button" x-show="!cell(m, 0, 4).blank" :tabindex="cell(m, 0, 4).tab ? 0 : -1" :data-date="cell(m, 0, 4).key"
                                            :data-selected="cell(m, 0, 4).selected ? '' : null" :data-today="cell(m, 0, 4).today ? '' : null"
                                            :data-outside="cell(m, 0, 4).outside ? '' : null" :data-disabled="cell(m, 0, 4).disabled ? '' : null"
                                            :aria-disabled="cell(m, 0, 4).disabled ? 'true' : null" :aria-current="cell(m, 0, 4).today ? 'date' : null"
                                            :aria-label="cell(m, 0, 4).label" x-text="cell(m, 0, 4).day" x-on:click="pick(cell(m, 0, 4).key)"
                                            x-on:focus="!cell(m, 0, 4).disabled && hoverIfOpen(cell(m, 0, 4).key)" x-on:mouseenter="hoverIfOpen(cell(m, 0, 4).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 0, 5).selected ? 'true' : null" :data-in-range="cell(m, 0, 5).band ? '' : null" :class="cell(m, 0, 5).tdClass">
                                        <button type="button" x-show="!cell(m, 0, 5).blank" :tabindex="cell(m, 0, 5).tab ? 0 : -1" :data-date="cell(m, 0, 5).key"
                                            :data-selected="cell(m, 0, 5).selected ? '' : null" :data-today="cell(m, 0, 5).today ? '' : null"
                                            :data-outside="cell(m, 0, 5).outside ? '' : null" :data-disabled="cell(m, 0, 5).disabled ? '' : null"
                                            :aria-disabled="cell(m, 0, 5).disabled ? 'true' : null" :aria-current="cell(m, 0, 5).today ? 'date' : null"
                                            :aria-label="cell(m, 0, 5).label" x-text="cell(m, 0, 5).day" x-on:click="pick(cell(m, 0, 5).key)"
                                            x-on:focus="!cell(m, 0, 5).disabled && hoverIfOpen(cell(m, 0, 5).key)" x-on:mouseenter="hoverIfOpen(cell(m, 0, 5).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 0, 6).selected ? 'true' : null" :data-in-range="cell(m, 0, 6).band ? '' : null" :class="cell(m, 0, 6).tdClass">
                                        <button type="button" x-show="!cell(m, 0, 6).blank" :tabindex="cell(m, 0, 6).tab ? 0 : -1" :data-date="cell(m, 0, 6).key"
                                            :data-selected="cell(m, 0, 6).selected ? '' : null" :data-today="cell(m, 0, 6).today ? '' : null"
                                            :data-outside="cell(m, 0, 6).outside ? '' : null" :data-disabled="cell(m, 0, 6).disabled ? '' : null"
                                            :aria-disabled="cell(m, 0, 6).disabled ? 'true' : null" :aria-current="cell(m, 0, 6).today ? 'date' : null"
                                            :aria-label="cell(m, 0, 6).label" x-text="cell(m, 0, 6).day" x-on:click="pick(cell(m, 0, 6).key)"
                                            x-on:focus="!cell(m, 0, 6).disabled && hoverIfOpen(cell(m, 0, 6).key)" x-on:mouseenter="hoverIfOpen(cell(m, 0, 6).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                            </tr>
                                                    <tr x-show="m.weeks.length > 1">
                                                                    <td role="gridcell" :aria-selected="cell(m, 1, 0).selected ? 'true' : null" :data-in-range="cell(m, 1, 0).band ? '' : null" :class="cell(m, 1, 0).tdClass">
                                        <button type="button" x-show="!cell(m, 1, 0).blank" :tabindex="cell(m, 1, 0).tab ? 0 : -1" :data-date="cell(m, 1, 0).key"
                                            :data-selected="cell(m, 1, 0).selected ? '' : null" :data-today="cell(m, 1, 0).today ? '' : null"
                                            :data-outside="cell(m, 1, 0).outside ? '' : null" :data-disabled="cell(m, 1, 0).disabled ? '' : null"
                                            :aria-disabled="cell(m, 1, 0).disabled ? 'true' : null" :aria-current="cell(m, 1, 0).today ? 'date' : null"
                                            :aria-label="cell(m, 1, 0).label" x-text="cell(m, 1, 0).day" x-on:click="pick(cell(m, 1, 0).key)"
                                            x-on:focus="!cell(m, 1, 0).disabled && hoverIfOpen(cell(m, 1, 0).key)" x-on:mouseenter="hoverIfOpen(cell(m, 1, 0).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 1, 1).selected ? 'true' : null" :data-in-range="cell(m, 1, 1).band ? '' : null" :class="cell(m, 1, 1).tdClass">
                                        <button type="button" x-show="!cell(m, 1, 1).blank" :tabindex="cell(m, 1, 1).tab ? 0 : -1" :data-date="cell(m, 1, 1).key"
                                            :data-selected="cell(m, 1, 1).selected ? '' : null" :data-today="cell(m, 1, 1).today ? '' : null"
                                            :data-outside="cell(m, 1, 1).outside ? '' : null" :data-disabled="cell(m, 1, 1).disabled ? '' : null"
                                            :aria-disabled="cell(m, 1, 1).disabled ? 'true' : null" :aria-current="cell(m, 1, 1).today ? 'date' : null"
                                            :aria-label="cell(m, 1, 1).label" x-text="cell(m, 1, 1).day" x-on:click="pick(cell(m, 1, 1).key)"
                                            x-on:focus="!cell(m, 1, 1).disabled && hoverIfOpen(cell(m, 1, 1).key)" x-on:mouseenter="hoverIfOpen(cell(m, 1, 1).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 1, 2).selected ? 'true' : null" :data-in-range="cell(m, 1, 2).band ? '' : null" :class="cell(m, 1, 2).tdClass">
                                        <button type="button" x-show="!cell(m, 1, 2).blank" :tabindex="cell(m, 1, 2).tab ? 0 : -1" :data-date="cell(m, 1, 2).key"
                                            :data-selected="cell(m, 1, 2).selected ? '' : null" :data-today="cell(m, 1, 2).today ? '' : null"
                                            :data-outside="cell(m, 1, 2).outside ? '' : null" :data-disabled="cell(m, 1, 2).disabled ? '' : null"
                                            :aria-disabled="cell(m, 1, 2).disabled ? 'true' : null" :aria-current="cell(m, 1, 2).today ? 'date' : null"
                                            :aria-label="cell(m, 1, 2).label" x-text="cell(m, 1, 2).day" x-on:click="pick(cell(m, 1, 2).key)"
                                            x-on:focus="!cell(m, 1, 2).disabled && hoverIfOpen(cell(m, 1, 2).key)" x-on:mouseenter="hoverIfOpen(cell(m, 1, 2).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 1, 3).selected ? 'true' : null" :data-in-range="cell(m, 1, 3).band ? '' : null" :class="cell(m, 1, 3).tdClass">
                                        <button type="button" x-show="!cell(m, 1, 3).blank" :tabindex="cell(m, 1, 3).tab ? 0 : -1" :data-date="cell(m, 1, 3).key"
                                            :data-selected="cell(m, 1, 3).selected ? '' : null" :data-today="cell(m, 1, 3).today ? '' : null"
                                            :data-outside="cell(m, 1, 3).outside ? '' : null" :data-disabled="cell(m, 1, 3).disabled ? '' : null"
                                            :aria-disabled="cell(m, 1, 3).disabled ? 'true' : null" :aria-current="cell(m, 1, 3).today ? 'date' : null"
                                            :aria-label="cell(m, 1, 3).label" x-text="cell(m, 1, 3).day" x-on:click="pick(cell(m, 1, 3).key)"
                                            x-on:focus="!cell(m, 1, 3).disabled && hoverIfOpen(cell(m, 1, 3).key)" x-on:mouseenter="hoverIfOpen(cell(m, 1, 3).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 1, 4).selected ? 'true' : null" :data-in-range="cell(m, 1, 4).band ? '' : null" :class="cell(m, 1, 4).tdClass">
                                        <button type="button" x-show="!cell(m, 1, 4).blank" :tabindex="cell(m, 1, 4).tab ? 0 : -1" :data-date="cell(m, 1, 4).key"
                                            :data-selected="cell(m, 1, 4).selected ? '' : null" :data-today="cell(m, 1, 4).today ? '' : null"
                                            :data-outside="cell(m, 1, 4).outside ? '' : null" :data-disabled="cell(m, 1, 4).disabled ? '' : null"
                                            :aria-disabled="cell(m, 1, 4).disabled ? 'true' : null" :aria-current="cell(m, 1, 4).today ? 'date' : null"
                                            :aria-label="cell(m, 1, 4).label" x-text="cell(m, 1, 4).day" x-on:click="pick(cell(m, 1, 4).key)"
                                            x-on:focus="!cell(m, 1, 4).disabled && hoverIfOpen(cell(m, 1, 4).key)" x-on:mouseenter="hoverIfOpen(cell(m, 1, 4).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 1, 5).selected ? 'true' : null" :data-in-range="cell(m, 1, 5).band ? '' : null" :class="cell(m, 1, 5).tdClass">
                                        <button type="button" x-show="!cell(m, 1, 5).blank" :tabindex="cell(m, 1, 5).tab ? 0 : -1" :data-date="cell(m, 1, 5).key"
                                            :data-selected="cell(m, 1, 5).selected ? '' : null" :data-today="cell(m, 1, 5).today ? '' : null"
                                            :data-outside="cell(m, 1, 5).outside ? '' : null" :data-disabled="cell(m, 1, 5).disabled ? '' : null"
                                            :aria-disabled="cell(m, 1, 5).disabled ? 'true' : null" :aria-current="cell(m, 1, 5).today ? 'date' : null"
                                            :aria-label="cell(m, 1, 5).label" x-text="cell(m, 1, 5).day" x-on:click="pick(cell(m, 1, 5).key)"
                                            x-on:focus="!cell(m, 1, 5).disabled && hoverIfOpen(cell(m, 1, 5).key)" x-on:mouseenter="hoverIfOpen(cell(m, 1, 5).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 1, 6).selected ? 'true' : null" :data-in-range="cell(m, 1, 6).band ? '' : null" :class="cell(m, 1, 6).tdClass">
                                        <button type="button" x-show="!cell(m, 1, 6).blank" :tabindex="cell(m, 1, 6).tab ? 0 : -1" :data-date="cell(m, 1, 6).key"
                                            :data-selected="cell(m, 1, 6).selected ? '' : null" :data-today="cell(m, 1, 6).today ? '' : null"
                                            :data-outside="cell(m, 1, 6).outside ? '' : null" :data-disabled="cell(m, 1, 6).disabled ? '' : null"
                                            :aria-disabled="cell(m, 1, 6).disabled ? 'true' : null" :aria-current="cell(m, 1, 6).today ? 'date' : null"
                                            :aria-label="cell(m, 1, 6).label" x-text="cell(m, 1, 6).day" x-on:click="pick(cell(m, 1, 6).key)"
                                            x-on:focus="!cell(m, 1, 6).disabled && hoverIfOpen(cell(m, 1, 6).key)" x-on:mouseenter="hoverIfOpen(cell(m, 1, 6).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                            </tr>
                                                    <tr x-show="m.weeks.length > 2">
                                                                    <td role="gridcell" :aria-selected="cell(m, 2, 0).selected ? 'true' : null" :data-in-range="cell(m, 2, 0).band ? '' : null" :class="cell(m, 2, 0).tdClass">
                                        <button type="button" x-show="!cell(m, 2, 0).blank" :tabindex="cell(m, 2, 0).tab ? 0 : -1" :data-date="cell(m, 2, 0).key"
                                            :data-selected="cell(m, 2, 0).selected ? '' : null" :data-today="cell(m, 2, 0).today ? '' : null"
                                            :data-outside="cell(m, 2, 0).outside ? '' : null" :data-disabled="cell(m, 2, 0).disabled ? '' : null"
                                            :aria-disabled="cell(m, 2, 0).disabled ? 'true' : null" :aria-current="cell(m, 2, 0).today ? 'date' : null"
                                            :aria-label="cell(m, 2, 0).label" x-text="cell(m, 2, 0).day" x-on:click="pick(cell(m, 2, 0).key)"
                                            x-on:focus="!cell(m, 2, 0).disabled && hoverIfOpen(cell(m, 2, 0).key)" x-on:mouseenter="hoverIfOpen(cell(m, 2, 0).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 2, 1).selected ? 'true' : null" :data-in-range="cell(m, 2, 1).band ? '' : null" :class="cell(m, 2, 1).tdClass">
                                        <button type="button" x-show="!cell(m, 2, 1).blank" :tabindex="cell(m, 2, 1).tab ? 0 : -1" :data-date="cell(m, 2, 1).key"
                                            :data-selected="cell(m, 2, 1).selected ? '' : null" :data-today="cell(m, 2, 1).today ? '' : null"
                                            :data-outside="cell(m, 2, 1).outside ? '' : null" :data-disabled="cell(m, 2, 1).disabled ? '' : null"
                                            :aria-disabled="cell(m, 2, 1).disabled ? 'true' : null" :aria-current="cell(m, 2, 1).today ? 'date' : null"
                                            :aria-label="cell(m, 2, 1).label" x-text="cell(m, 2, 1).day" x-on:click="pick(cell(m, 2, 1).key)"
                                            x-on:focus="!cell(m, 2, 1).disabled && hoverIfOpen(cell(m, 2, 1).key)" x-on:mouseenter="hoverIfOpen(cell(m, 2, 1).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 2, 2).selected ? 'true' : null" :data-in-range="cell(m, 2, 2).band ? '' : null" :class="cell(m, 2, 2).tdClass">
                                        <button type="button" x-show="!cell(m, 2, 2).blank" :tabindex="cell(m, 2, 2).tab ? 0 : -1" :data-date="cell(m, 2, 2).key"
                                            :data-selected="cell(m, 2, 2).selected ? '' : null" :data-today="cell(m, 2, 2).today ? '' : null"
                                            :data-outside="cell(m, 2, 2).outside ? '' : null" :data-disabled="cell(m, 2, 2).disabled ? '' : null"
                                            :aria-disabled="cell(m, 2, 2).disabled ? 'true' : null" :aria-current="cell(m, 2, 2).today ? 'date' : null"
                                            :aria-label="cell(m, 2, 2).label" x-text="cell(m, 2, 2).day" x-on:click="pick(cell(m, 2, 2).key)"
                                            x-on:focus="!cell(m, 2, 2).disabled && hoverIfOpen(cell(m, 2, 2).key)" x-on:mouseenter="hoverIfOpen(cell(m, 2, 2).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 2, 3).selected ? 'true' : null" :data-in-range="cell(m, 2, 3).band ? '' : null" :class="cell(m, 2, 3).tdClass">
                                        <button type="button" x-show="!cell(m, 2, 3).blank" :tabindex="cell(m, 2, 3).tab ? 0 : -1" :data-date="cell(m, 2, 3).key"
                                            :data-selected="cell(m, 2, 3).selected ? '' : null" :data-today="cell(m, 2, 3).today ? '' : null"
                                            :data-outside="cell(m, 2, 3).outside ? '' : null" :data-disabled="cell(m, 2, 3).disabled ? '' : null"
                                            :aria-disabled="cell(m, 2, 3).disabled ? 'true' : null" :aria-current="cell(m, 2, 3).today ? 'date' : null"
                                            :aria-label="cell(m, 2, 3).label" x-text="cell(m, 2, 3).day" x-on:click="pick(cell(m, 2, 3).key)"
                                            x-on:focus="!cell(m, 2, 3).disabled && hoverIfOpen(cell(m, 2, 3).key)" x-on:mouseenter="hoverIfOpen(cell(m, 2, 3).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 2, 4).selected ? 'true' : null" :data-in-range="cell(m, 2, 4).band ? '' : null" :class="cell(m, 2, 4).tdClass">
                                        <button type="button" x-show="!cell(m, 2, 4).blank" :tabindex="cell(m, 2, 4).tab ? 0 : -1" :data-date="cell(m, 2, 4).key"
                                            :data-selected="cell(m, 2, 4).selected ? '' : null" :data-today="cell(m, 2, 4).today ? '' : null"
                                            :data-outside="cell(m, 2, 4).outside ? '' : null" :data-disabled="cell(m, 2, 4).disabled ? '' : null"
                                            :aria-disabled="cell(m, 2, 4).disabled ? 'true' : null" :aria-current="cell(m, 2, 4).today ? 'date' : null"
                                            :aria-label="cell(m, 2, 4).label" x-text="cell(m, 2, 4).day" x-on:click="pick(cell(m, 2, 4).key)"
                                            x-on:focus="!cell(m, 2, 4).disabled && hoverIfOpen(cell(m, 2, 4).key)" x-on:mouseenter="hoverIfOpen(cell(m, 2, 4).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 2, 5).selected ? 'true' : null" :data-in-range="cell(m, 2, 5).band ? '' : null" :class="cell(m, 2, 5).tdClass">
                                        <button type="button" x-show="!cell(m, 2, 5).blank" :tabindex="cell(m, 2, 5).tab ? 0 : -1" :data-date="cell(m, 2, 5).key"
                                            :data-selected="cell(m, 2, 5).selected ? '' : null" :data-today="cell(m, 2, 5).today ? '' : null"
                                            :data-outside="cell(m, 2, 5).outside ? '' : null" :data-disabled="cell(m, 2, 5).disabled ? '' : null"
                                            :aria-disabled="cell(m, 2, 5).disabled ? 'true' : null" :aria-current="cell(m, 2, 5).today ? 'date' : null"
                                            :aria-label="cell(m, 2, 5).label" x-text="cell(m, 2, 5).day" x-on:click="pick(cell(m, 2, 5).key)"
                                            x-on:focus="!cell(m, 2, 5).disabled && hoverIfOpen(cell(m, 2, 5).key)" x-on:mouseenter="hoverIfOpen(cell(m, 2, 5).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 2, 6).selected ? 'true' : null" :data-in-range="cell(m, 2, 6).band ? '' : null" :class="cell(m, 2, 6).tdClass">
                                        <button type="button" x-show="!cell(m, 2, 6).blank" :tabindex="cell(m, 2, 6).tab ? 0 : -1" :data-date="cell(m, 2, 6).key"
                                            :data-selected="cell(m, 2, 6).selected ? '' : null" :data-today="cell(m, 2, 6).today ? '' : null"
                                            :data-outside="cell(m, 2, 6).outside ? '' : null" :data-disabled="cell(m, 2, 6).disabled ? '' : null"
                                            :aria-disabled="cell(m, 2, 6).disabled ? 'true' : null" :aria-current="cell(m, 2, 6).today ? 'date' : null"
                                            :aria-label="cell(m, 2, 6).label" x-text="cell(m, 2, 6).day" x-on:click="pick(cell(m, 2, 6).key)"
                                            x-on:focus="!cell(m, 2, 6).disabled && hoverIfOpen(cell(m, 2, 6).key)" x-on:mouseenter="hoverIfOpen(cell(m, 2, 6).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                            </tr>
                                                    <tr x-show="m.weeks.length > 3">
                                                                    <td role="gridcell" :aria-selected="cell(m, 3, 0).selected ? 'true' : null" :data-in-range="cell(m, 3, 0).band ? '' : null" :class="cell(m, 3, 0).tdClass">
                                        <button type="button" x-show="!cell(m, 3, 0).blank" :tabindex="cell(m, 3, 0).tab ? 0 : -1" :data-date="cell(m, 3, 0).key"
                                            :data-selected="cell(m, 3, 0).selected ? '' : null" :data-today="cell(m, 3, 0).today ? '' : null"
                                            :data-outside="cell(m, 3, 0).outside ? '' : null" :data-disabled="cell(m, 3, 0).disabled ? '' : null"
                                            :aria-disabled="cell(m, 3, 0).disabled ? 'true' : null" :aria-current="cell(m, 3, 0).today ? 'date' : null"
                                            :aria-label="cell(m, 3, 0).label" x-text="cell(m, 3, 0).day" x-on:click="pick(cell(m, 3, 0).key)"
                                            x-on:focus="!cell(m, 3, 0).disabled && hoverIfOpen(cell(m, 3, 0).key)" x-on:mouseenter="hoverIfOpen(cell(m, 3, 0).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 3, 1).selected ? 'true' : null" :data-in-range="cell(m, 3, 1).band ? '' : null" :class="cell(m, 3, 1).tdClass">
                                        <button type="button" x-show="!cell(m, 3, 1).blank" :tabindex="cell(m, 3, 1).tab ? 0 : -1" :data-date="cell(m, 3, 1).key"
                                            :data-selected="cell(m, 3, 1).selected ? '' : null" :data-today="cell(m, 3, 1).today ? '' : null"
                                            :data-outside="cell(m, 3, 1).outside ? '' : null" :data-disabled="cell(m, 3, 1).disabled ? '' : null"
                                            :aria-disabled="cell(m, 3, 1).disabled ? 'true' : null" :aria-current="cell(m, 3, 1).today ? 'date' : null"
                                            :aria-label="cell(m, 3, 1).label" x-text="cell(m, 3, 1).day" x-on:click="pick(cell(m, 3, 1).key)"
                                            x-on:focus="!cell(m, 3, 1).disabled && hoverIfOpen(cell(m, 3, 1).key)" x-on:mouseenter="hoverIfOpen(cell(m, 3, 1).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 3, 2).selected ? 'true' : null" :data-in-range="cell(m, 3, 2).band ? '' : null" :class="cell(m, 3, 2).tdClass">
                                        <button type="button" x-show="!cell(m, 3, 2).blank" :tabindex="cell(m, 3, 2).tab ? 0 : -1" :data-date="cell(m, 3, 2).key"
                                            :data-selected="cell(m, 3, 2).selected ? '' : null" :data-today="cell(m, 3, 2).today ? '' : null"
                                            :data-outside="cell(m, 3, 2).outside ? '' : null" :data-disabled="cell(m, 3, 2).disabled ? '' : null"
                                            :aria-disabled="cell(m, 3, 2).disabled ? 'true' : null" :aria-current="cell(m, 3, 2).today ? 'date' : null"
                                            :aria-label="cell(m, 3, 2).label" x-text="cell(m, 3, 2).day" x-on:click="pick(cell(m, 3, 2).key)"
                                            x-on:focus="!cell(m, 3, 2).disabled && hoverIfOpen(cell(m, 3, 2).key)" x-on:mouseenter="hoverIfOpen(cell(m, 3, 2).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 3, 3).selected ? 'true' : null" :data-in-range="cell(m, 3, 3).band ? '' : null" :class="cell(m, 3, 3).tdClass">
                                        <button type="button" x-show="!cell(m, 3, 3).blank" :tabindex="cell(m, 3, 3).tab ? 0 : -1" :data-date="cell(m, 3, 3).key"
                                            :data-selected="cell(m, 3, 3).selected ? '' : null" :data-today="cell(m, 3, 3).today ? '' : null"
                                            :data-outside="cell(m, 3, 3).outside ? '' : null" :data-disabled="cell(m, 3, 3).disabled ? '' : null"
                                            :aria-disabled="cell(m, 3, 3).disabled ? 'true' : null" :aria-current="cell(m, 3, 3).today ? 'date' : null"
                                            :aria-label="cell(m, 3, 3).label" x-text="cell(m, 3, 3).day" x-on:click="pick(cell(m, 3, 3).key)"
                                            x-on:focus="!cell(m, 3, 3).disabled && hoverIfOpen(cell(m, 3, 3).key)" x-on:mouseenter="hoverIfOpen(cell(m, 3, 3).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 3, 4).selected ? 'true' : null" :data-in-range="cell(m, 3, 4).band ? '' : null" :class="cell(m, 3, 4).tdClass">
                                        <button type="button" x-show="!cell(m, 3, 4).blank" :tabindex="cell(m, 3, 4).tab ? 0 : -1" :data-date="cell(m, 3, 4).key"
                                            :data-selected="cell(m, 3, 4).selected ? '' : null" :data-today="cell(m, 3, 4).today ? '' : null"
                                            :data-outside="cell(m, 3, 4).outside ? '' : null" :data-disabled="cell(m, 3, 4).disabled ? '' : null"
                                            :aria-disabled="cell(m, 3, 4).disabled ? 'true' : null" :aria-current="cell(m, 3, 4).today ? 'date' : null"
                                            :aria-label="cell(m, 3, 4).label" x-text="cell(m, 3, 4).day" x-on:click="pick(cell(m, 3, 4).key)"
                                            x-on:focus="!cell(m, 3, 4).disabled && hoverIfOpen(cell(m, 3, 4).key)" x-on:mouseenter="hoverIfOpen(cell(m, 3, 4).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 3, 5).selected ? 'true' : null" :data-in-range="cell(m, 3, 5).band ? '' : null" :class="cell(m, 3, 5).tdClass">
                                        <button type="button" x-show="!cell(m, 3, 5).blank" :tabindex="cell(m, 3, 5).tab ? 0 : -1" :data-date="cell(m, 3, 5).key"
                                            :data-selected="cell(m, 3, 5).selected ? '' : null" :data-today="cell(m, 3, 5).today ? '' : null"
                                            :data-outside="cell(m, 3, 5).outside ? '' : null" :data-disabled="cell(m, 3, 5).disabled ? '' : null"
                                            :aria-disabled="cell(m, 3, 5).disabled ? 'true' : null" :aria-current="cell(m, 3, 5).today ? 'date' : null"
                                            :aria-label="cell(m, 3, 5).label" x-text="cell(m, 3, 5).day" x-on:click="pick(cell(m, 3, 5).key)"
                                            x-on:focus="!cell(m, 3, 5).disabled && hoverIfOpen(cell(m, 3, 5).key)" x-on:mouseenter="hoverIfOpen(cell(m, 3, 5).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 3, 6).selected ? 'true' : null" :data-in-range="cell(m, 3, 6).band ? '' : null" :class="cell(m, 3, 6).tdClass">
                                        <button type="button" x-show="!cell(m, 3, 6).blank" :tabindex="cell(m, 3, 6).tab ? 0 : -1" :data-date="cell(m, 3, 6).key"
                                            :data-selected="cell(m, 3, 6).selected ? '' : null" :data-today="cell(m, 3, 6).today ? '' : null"
                                            :data-outside="cell(m, 3, 6).outside ? '' : null" :data-disabled="cell(m, 3, 6).disabled ? '' : null"
                                            :aria-disabled="cell(m, 3, 6).disabled ? 'true' : null" :aria-current="cell(m, 3, 6).today ? 'date' : null"
                                            :aria-label="cell(m, 3, 6).label" x-text="cell(m, 3, 6).day" x-on:click="pick(cell(m, 3, 6).key)"
                                            x-on:focus="!cell(m, 3, 6).disabled && hoverIfOpen(cell(m, 3, 6).key)" x-on:mouseenter="hoverIfOpen(cell(m, 3, 6).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                            </tr>
                                                    <tr x-show="m.weeks.length > 4">
                                                                    <td role="gridcell" :aria-selected="cell(m, 4, 0).selected ? 'true' : null" :data-in-range="cell(m, 4, 0).band ? '' : null" :class="cell(m, 4, 0).tdClass">
                                        <button type="button" x-show="!cell(m, 4, 0).blank" :tabindex="cell(m, 4, 0).tab ? 0 : -1" :data-date="cell(m, 4, 0).key"
                                            :data-selected="cell(m, 4, 0).selected ? '' : null" :data-today="cell(m, 4, 0).today ? '' : null"
                                            :data-outside="cell(m, 4, 0).outside ? '' : null" :data-disabled="cell(m, 4, 0).disabled ? '' : null"
                                            :aria-disabled="cell(m, 4, 0).disabled ? 'true' : null" :aria-current="cell(m, 4, 0).today ? 'date' : null"
                                            :aria-label="cell(m, 4, 0).label" x-text="cell(m, 4, 0).day" x-on:click="pick(cell(m, 4, 0).key)"
                                            x-on:focus="!cell(m, 4, 0).disabled && hoverIfOpen(cell(m, 4, 0).key)" x-on:mouseenter="hoverIfOpen(cell(m, 4, 0).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 4, 1).selected ? 'true' : null" :data-in-range="cell(m, 4, 1).band ? '' : null" :class="cell(m, 4, 1).tdClass">
                                        <button type="button" x-show="!cell(m, 4, 1).blank" :tabindex="cell(m, 4, 1).tab ? 0 : -1" :data-date="cell(m, 4, 1).key"
                                            :data-selected="cell(m, 4, 1).selected ? '' : null" :data-today="cell(m, 4, 1).today ? '' : null"
                                            :data-outside="cell(m, 4, 1).outside ? '' : null" :data-disabled="cell(m, 4, 1).disabled ? '' : null"
                                            :aria-disabled="cell(m, 4, 1).disabled ? 'true' : null" :aria-current="cell(m, 4, 1).today ? 'date' : null"
                                            :aria-label="cell(m, 4, 1).label" x-text="cell(m, 4, 1).day" x-on:click="pick(cell(m, 4, 1).key)"
                                            x-on:focus="!cell(m, 4, 1).disabled && hoverIfOpen(cell(m, 4, 1).key)" x-on:mouseenter="hoverIfOpen(cell(m, 4, 1).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 4, 2).selected ? 'true' : null" :data-in-range="cell(m, 4, 2).band ? '' : null" :class="cell(m, 4, 2).tdClass">
                                        <button type="button" x-show="!cell(m, 4, 2).blank" :tabindex="cell(m, 4, 2).tab ? 0 : -1" :data-date="cell(m, 4, 2).key"
                                            :data-selected="cell(m, 4, 2).selected ? '' : null" :data-today="cell(m, 4, 2).today ? '' : null"
                                            :data-outside="cell(m, 4, 2).outside ? '' : null" :data-disabled="cell(m, 4, 2).disabled ? '' : null"
                                            :aria-disabled="cell(m, 4, 2).disabled ? 'true' : null" :aria-current="cell(m, 4, 2).today ? 'date' : null"
                                            :aria-label="cell(m, 4, 2).label" x-text="cell(m, 4, 2).day" x-on:click="pick(cell(m, 4, 2).key)"
                                            x-on:focus="!cell(m, 4, 2).disabled && hoverIfOpen(cell(m, 4, 2).key)" x-on:mouseenter="hoverIfOpen(cell(m, 4, 2).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 4, 3).selected ? 'true' : null" :data-in-range="cell(m, 4, 3).band ? '' : null" :class="cell(m, 4, 3).tdClass">
                                        <button type="button" x-show="!cell(m, 4, 3).blank" :tabindex="cell(m, 4, 3).tab ? 0 : -1" :data-date="cell(m, 4, 3).key"
                                            :data-selected="cell(m, 4, 3).selected ? '' : null" :data-today="cell(m, 4, 3).today ? '' : null"
                                            :data-outside="cell(m, 4, 3).outside ? '' : null" :data-disabled="cell(m, 4, 3).disabled ? '' : null"
                                            :aria-disabled="cell(m, 4, 3).disabled ? 'true' : null" :aria-current="cell(m, 4, 3).today ? 'date' : null"
                                            :aria-label="cell(m, 4, 3).label" x-text="cell(m, 4, 3).day" x-on:click="pick(cell(m, 4, 3).key)"
                                            x-on:focus="!cell(m, 4, 3).disabled && hoverIfOpen(cell(m, 4, 3).key)" x-on:mouseenter="hoverIfOpen(cell(m, 4, 3).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 4, 4).selected ? 'true' : null" :data-in-range="cell(m, 4, 4).band ? '' : null" :class="cell(m, 4, 4).tdClass">
                                        <button type="button" x-show="!cell(m, 4, 4).blank" :tabindex="cell(m, 4, 4).tab ? 0 : -1" :data-date="cell(m, 4, 4).key"
                                            :data-selected="cell(m, 4, 4).selected ? '' : null" :data-today="cell(m, 4, 4).today ? '' : null"
                                            :data-outside="cell(m, 4, 4).outside ? '' : null" :data-disabled="cell(m, 4, 4).disabled ? '' : null"
                                            :aria-disabled="cell(m, 4, 4).disabled ? 'true' : null" :aria-current="cell(m, 4, 4).today ? 'date' : null"
                                            :aria-label="cell(m, 4, 4).label" x-text="cell(m, 4, 4).day" x-on:click="pick(cell(m, 4, 4).key)"
                                            x-on:focus="!cell(m, 4, 4).disabled && hoverIfOpen(cell(m, 4, 4).key)" x-on:mouseenter="hoverIfOpen(cell(m, 4, 4).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 4, 5).selected ? 'true' : null" :data-in-range="cell(m, 4, 5).band ? '' : null" :class="cell(m, 4, 5).tdClass">
                                        <button type="button" x-show="!cell(m, 4, 5).blank" :tabindex="cell(m, 4, 5).tab ? 0 : -1" :data-date="cell(m, 4, 5).key"
                                            :data-selected="cell(m, 4, 5).selected ? '' : null" :data-today="cell(m, 4, 5).today ? '' : null"
                                            :data-outside="cell(m, 4, 5).outside ? '' : null" :data-disabled="cell(m, 4, 5).disabled ? '' : null"
                                            :aria-disabled="cell(m, 4, 5).disabled ? 'true' : null" :aria-current="cell(m, 4, 5).today ? 'date' : null"
                                            :aria-label="cell(m, 4, 5).label" x-text="cell(m, 4, 5).day" x-on:click="pick(cell(m, 4, 5).key)"
                                            x-on:focus="!cell(m, 4, 5).disabled && hoverIfOpen(cell(m, 4, 5).key)" x-on:mouseenter="hoverIfOpen(cell(m, 4, 5).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 4, 6).selected ? 'true' : null" :data-in-range="cell(m, 4, 6).band ? '' : null" :class="cell(m, 4, 6).tdClass">
                                        <button type="button" x-show="!cell(m, 4, 6).blank" :tabindex="cell(m, 4, 6).tab ? 0 : -1" :data-date="cell(m, 4, 6).key"
                                            :data-selected="cell(m, 4, 6).selected ? '' : null" :data-today="cell(m, 4, 6).today ? '' : null"
                                            :data-outside="cell(m, 4, 6).outside ? '' : null" :data-disabled="cell(m, 4, 6).disabled ? '' : null"
                                            :aria-disabled="cell(m, 4, 6).disabled ? 'true' : null" :aria-current="cell(m, 4, 6).today ? 'date' : null"
                                            :aria-label="cell(m, 4, 6).label" x-text="cell(m, 4, 6).day" x-on:click="pick(cell(m, 4, 6).key)"
                                            x-on:focus="!cell(m, 4, 6).disabled && hoverIfOpen(cell(m, 4, 6).key)" x-on:mouseenter="hoverIfOpen(cell(m, 4, 6).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                            </tr>
                                                    <tr x-show="m.weeks.length > 5">
                                                                    <td role="gridcell" :aria-selected="cell(m, 5, 0).selected ? 'true' : null" :data-in-range="cell(m, 5, 0).band ? '' : null" :class="cell(m, 5, 0).tdClass">
                                        <button type="button" x-show="!cell(m, 5, 0).blank" :tabindex="cell(m, 5, 0).tab ? 0 : -1" :data-date="cell(m, 5, 0).key"
                                            :data-selected="cell(m, 5, 0).selected ? '' : null" :data-today="cell(m, 5, 0).today ? '' : null"
                                            :data-outside="cell(m, 5, 0).outside ? '' : null" :data-disabled="cell(m, 5, 0).disabled ? '' : null"
                                            :aria-disabled="cell(m, 5, 0).disabled ? 'true' : null" :aria-current="cell(m, 5, 0).today ? 'date' : null"
                                            :aria-label="cell(m, 5, 0).label" x-text="cell(m, 5, 0).day" x-on:click="pick(cell(m, 5, 0).key)"
                                            x-on:focus="!cell(m, 5, 0).disabled && hoverIfOpen(cell(m, 5, 0).key)" x-on:mouseenter="hoverIfOpen(cell(m, 5, 0).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 5, 1).selected ? 'true' : null" :data-in-range="cell(m, 5, 1).band ? '' : null" :class="cell(m, 5, 1).tdClass">
                                        <button type="button" x-show="!cell(m, 5, 1).blank" :tabindex="cell(m, 5, 1).tab ? 0 : -1" :data-date="cell(m, 5, 1).key"
                                            :data-selected="cell(m, 5, 1).selected ? '' : null" :data-today="cell(m, 5, 1).today ? '' : null"
                                            :data-outside="cell(m, 5, 1).outside ? '' : null" :data-disabled="cell(m, 5, 1).disabled ? '' : null"
                                            :aria-disabled="cell(m, 5, 1).disabled ? 'true' : null" :aria-current="cell(m, 5, 1).today ? 'date' : null"
                                            :aria-label="cell(m, 5, 1).label" x-text="cell(m, 5, 1).day" x-on:click="pick(cell(m, 5, 1).key)"
                                            x-on:focus="!cell(m, 5, 1).disabled && hoverIfOpen(cell(m, 5, 1).key)" x-on:mouseenter="hoverIfOpen(cell(m, 5, 1).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 5, 2).selected ? 'true' : null" :data-in-range="cell(m, 5, 2).band ? '' : null" :class="cell(m, 5, 2).tdClass">
                                        <button type="button" x-show="!cell(m, 5, 2).blank" :tabindex="cell(m, 5, 2).tab ? 0 : -1" :data-date="cell(m, 5, 2).key"
                                            :data-selected="cell(m, 5, 2).selected ? '' : null" :data-today="cell(m, 5, 2).today ? '' : null"
                                            :data-outside="cell(m, 5, 2).outside ? '' : null" :data-disabled="cell(m, 5, 2).disabled ? '' : null"
                                            :aria-disabled="cell(m, 5, 2).disabled ? 'true' : null" :aria-current="cell(m, 5, 2).today ? 'date' : null"
                                            :aria-label="cell(m, 5, 2).label" x-text="cell(m, 5, 2).day" x-on:click="pick(cell(m, 5, 2).key)"
                                            x-on:focus="!cell(m, 5, 2).disabled && hoverIfOpen(cell(m, 5, 2).key)" x-on:mouseenter="hoverIfOpen(cell(m, 5, 2).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 5, 3).selected ? 'true' : null" :data-in-range="cell(m, 5, 3).band ? '' : null" :class="cell(m, 5, 3).tdClass">
                                        <button type="button" x-show="!cell(m, 5, 3).blank" :tabindex="cell(m, 5, 3).tab ? 0 : -1" :data-date="cell(m, 5, 3).key"
                                            :data-selected="cell(m, 5, 3).selected ? '' : null" :data-today="cell(m, 5, 3).today ? '' : null"
                                            :data-outside="cell(m, 5, 3).outside ? '' : null" :data-disabled="cell(m, 5, 3).disabled ? '' : null"
                                            :aria-disabled="cell(m, 5, 3).disabled ? 'true' : null" :aria-current="cell(m, 5, 3).today ? 'date' : null"
                                            :aria-label="cell(m, 5, 3).label" x-text="cell(m, 5, 3).day" x-on:click="pick(cell(m, 5, 3).key)"
                                            x-on:focus="!cell(m, 5, 3).disabled && hoverIfOpen(cell(m, 5, 3).key)" x-on:mouseenter="hoverIfOpen(cell(m, 5, 3).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 5, 4).selected ? 'true' : null" :data-in-range="cell(m, 5, 4).band ? '' : null" :class="cell(m, 5, 4).tdClass">
                                        <button type="button" x-show="!cell(m, 5, 4).blank" :tabindex="cell(m, 5, 4).tab ? 0 : -1" :data-date="cell(m, 5, 4).key"
                                            :data-selected="cell(m, 5, 4).selected ? '' : null" :data-today="cell(m, 5, 4).today ? '' : null"
                                            :data-outside="cell(m, 5, 4).outside ? '' : null" :data-disabled="cell(m, 5, 4).disabled ? '' : null"
                                            :aria-disabled="cell(m, 5, 4).disabled ? 'true' : null" :aria-current="cell(m, 5, 4).today ? 'date' : null"
                                            :aria-label="cell(m, 5, 4).label" x-text="cell(m, 5, 4).day" x-on:click="pick(cell(m, 5, 4).key)"
                                            x-on:focus="!cell(m, 5, 4).disabled && hoverIfOpen(cell(m, 5, 4).key)" x-on:mouseenter="hoverIfOpen(cell(m, 5, 4).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 5, 5).selected ? 'true' : null" :data-in-range="cell(m, 5, 5).band ? '' : null" :class="cell(m, 5, 5).tdClass">
                                        <button type="button" x-show="!cell(m, 5, 5).blank" :tabindex="cell(m, 5, 5).tab ? 0 : -1" :data-date="cell(m, 5, 5).key"
                                            :data-selected="cell(m, 5, 5).selected ? '' : null" :data-today="cell(m, 5, 5).today ? '' : null"
                                            :data-outside="cell(m, 5, 5).outside ? '' : null" :data-disabled="cell(m, 5, 5).disabled ? '' : null"
                                            :aria-disabled="cell(m, 5, 5).disabled ? 'true' : null" :aria-current="cell(m, 5, 5).today ? 'date' : null"
                                            :aria-label="cell(m, 5, 5).label" x-text="cell(m, 5, 5).day" x-on:click="pick(cell(m, 5, 5).key)"
                                            x-on:focus="!cell(m, 5, 5).disabled && hoverIfOpen(cell(m, 5, 5).key)" x-on:mouseenter="hoverIfOpen(cell(m, 5, 5).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 5, 6).selected ? 'true' : null" :data-in-range="cell(m, 5, 6).band ? '' : null" :class="cell(m, 5, 6).tdClass">
                                        <button type="button" x-show="!cell(m, 5, 6).blank" :tabindex="cell(m, 5, 6).tab ? 0 : -1" :data-date="cell(m, 5, 6).key"
                                            :data-selected="cell(m, 5, 6).selected ? '' : null" :data-today="cell(m, 5, 6).today ? '' : null"
                                            :data-outside="cell(m, 5, 6).outside ? '' : null" :data-disabled="cell(m, 5, 6).disabled ? '' : null"
                                            :aria-disabled="cell(m, 5, 6).disabled ? 'true' : null" :aria-current="cell(m, 5, 6).today ? 'date' : null"
                                            :aria-label="cell(m, 5, 6).label" x-text="cell(m, 5, 6).day" x-on:click="pick(cell(m, 5, 6).key)"
                                            x-on:focus="!cell(m, 5, 6).disabled && hoverIfOpen(cell(m, 5, 6).key)" x-on:mouseenter="hoverIfOpen(cell(m, 5, 6).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                            </tr>
                                            </tbody>
                </table>
            </div>
        </template>
    </div>
</div></div>
</template>
</div>
</div>
                    </div>
                    <div x-id="['project', 'task']" class="contents">
    <div data-slot="field" class="flex flex-col gap-1.5">
        <label data-slot="field-label" x-bind:for="$id('project')" class="text-label text-foreground">Project</label>
        <div data-slot="native-select" class="relative w-full min-w-0">
    <select           class="w-full min-w-0 appearance-none rounded-control border border-input bg-card ps-3 pe-9 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control" x-bind:id="$id('project')" x-effect="syncProject($el, 'dlg')" x-on:change="pickProject('dlg', $event.target.value)" x-bind:disabled="locked('dlg')" x-bind:aria-invalid="invalidProject('dlg') ? 'true' : null">
                    <option value=""   selected >Choose a project</option>
                            <option value="web"  >Website</option>
                    <option value="app"  >Mobile app</option>
    </select>
    <svg aria-hidden="true" class="pointer-events-none absolute end-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m6 9 6 6 6-6"/>
</svg></div>
        <div data-slot="field-error" role="alert" x-show="invalidProject('dlg')" style="display: none" class="text-caption text-nq-danger-text">Choose a project.</div>
    </div>
    <div data-slot="field" class="flex flex-col gap-1.5">
        <label data-slot="field-label" x-bind:for="$id('task')" class="text-label text-foreground">Task</label>
        <div data-slot="native-select" class="relative w-full min-w-0">
    <select           class="w-full min-w-0 appearance-none rounded-control border border-input bg-card ps-3 pe-9 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control" x-bind:id="$id('task')" x-effect="syncTask($el, 'dlg')" x-on:change="pickTask('dlg', $event.target.value)" x-bind:disabled="taskLocked('dlg')">
                    <option value=""   selected >No task</option>
                        <template x-for="x in tasksOf(projectValue('dlg'))" x-bind:key="x.id"><option x-bind:value="x.id" x-text="x.name"></option></template>
    </select>
    <svg aria-hidden="true" class="pointer-events-none absolute end-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m6 9 6 6 6-6"/>
</svg></div>
    </div>
</div>
                    <div x-id="['duration']" data-slot="field" class="flex flex-col gap-1.5">
                        <label data-slot="field-label" x-bind:for="$id('duration')" class="text-label text-foreground">Duration</label>
                        <input data-slot="input" type="text"
     dir="ltr"                 inputmode="text" autocomplete="off" x-bind:id="$id(&#039;duration&#039;)" x-model="dlg.duration" x-bind:aria-invalid="showDurationProblem() ? &#039;true&#039; : null" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control text-start">
                        <p data-slot="field-description" class="text-caption text-muted-foreground">For example 1h 30m, 1:30 or 1.5.</p>
                        <p data-slot="field-error" role="alert" x-show="showDurationProblem()" style="display: none" x-text="durationProblem()" class="text-caption text-nq-danger-text"></p>
                    </div>
                    <div x-id="['dnote']" data-slot="field" class="flex flex-col gap-1.5">
                        <label data-slot="field-label" x-bind:for="$id('dnote')" class="text-label text-foreground">What are you working on?</label>
                        <input data-slot="input" type="text"
                    x-bind:id="$id(&#039;dnote&#039;)" x-model="dlg.note" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control">
                    </div>
                    <p x-show="dlg.message" style="display: none" role="alert" x-text="dlg.message" class="text-body-sm text-nq-danger-text"></p>
                    <div data-slot="dialog-footer" class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"><button data-slot="button"
     type="button"                         x-on:click="dlg.open = false" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control px-[var(--nq-control-pad)]">
        Cancel</button>
                        <button data-slot="button"
     type="submit"                         class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        Save</button></div>
                </form>
                            <button type="button" data-slot="dialog-close" x-on:click="close()" aria-label="Close"
                    class="absolute end-3 top-3 inline-flex size-8 items-center justify-center rounded-control text-muted-foreground transition-colors duration-150 hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus [&_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                    </div>
    </div>
</template>
</div>
    </section>
    <section data-slot="timesheet" x-id="['sheet']" x-bind:aria-labelledby="$id('sheet')" class="flex flex-col gap-3">
    <div class="flex flex-wrap items-center justify-between gap-3">
        <h2 x-bind:id="$id('sheet')" class="text-title-sm text-foreground">Timesheet</h2>
        <div class="flex flex-wrap items-center gap-2">
            <div role="group" data-slot="toggle-group" data-variant="segmented" data-orientation="horizontal"
    x-data="nqToggleGroup(JSON.parse('[\u0022week\u0022]'), false)" x-modelable="value" x-bind="root"
            aria-label="View" x-model="viewValue" class="flex w-fit max-w-full gap-0.5 rounded-control bg-secondary p-0.5">
    <button type="button" data-slot="toggle" aria-pressed="false"
     x-bind="toggle('day')"             class="inline-flex h-7 shrink-0 items-center justify-center gap-1.5 whitespace-nowrap px-3 text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 rounded-[calc(var(--radius-control)-2px)] data-pressed:bg-card data-pressed:text-foreground data-pressed:shadow-xs">Day</button>
                <button type="button" data-slot="toggle" aria-pressed="true"
     x-bind="toggle('week')"      data-pressed         class="inline-flex h-7 shrink-0 items-center justify-center gap-1.5 whitespace-nowrap px-3 text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 rounded-[calc(var(--radius-control)-2px)] data-pressed:bg-card data-pressed:text-foreground data-pressed:shadow-xs">Week</button>
</div>
            <div class="flex items-center gap-1">
                <button data-slot="button"
     type="button"                         aria-label="Previous" x-on:click="shift(-1)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" class="rtl:rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m15 18-6-6 6-6"/>
</svg></button>
                <button data-slot="button"
     type="button"                         x-on:click="goToday()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        Today</button>
                <button data-slot="button"
     type="button"                         aria-label="Next" x-on:click="shift(1)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" class="rtl:rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></button>
            </div>
        </div>
    </div>
    <p aria-live="polite" class="text-body-sm text-muted-foreground" x-text="range()"></p>
    <div data-slot="card" class="flex flex-col gap-4 rounded-card border border-border bg-card py-4 text-card-foreground"><div role="table" data-slot="table" aria-label="Hours by project and day" class="table w-full overflow-x-auto text-body">
            <div role="rowgroup" data-slot="table-header" class="table-header-group">
                <div role="row" data-slot="table-row" class="table-row">
                    <div role="columnheader" data-slot="table-head" class="table-cell h-row whitespace-nowrap px-4 py-3 text-caption font-medium text-muted-foreground">Project / task</div>
                    <template x-for="d in days()" x-bind:key="d">
                        <div role="columnheader" data-slot="table-head" class="table-cell h-row whitespace-nowrap px-4 py-3 text-end text-caption font-medium text-muted-foreground" x-bind:aria-current="isToday(d) ? 'date' : null" x-text="colLabel(d)"></div>
                    </template>
                    <div role="columnheader" data-slot="table-head" x-show="isWeek()" class="table-cell h-row whitespace-nowrap px-4 py-3 text-end text-caption font-medium text-muted-foreground">Total</div>
                </div>
            </div>
            <div role="rowgroup" data-slot="table-body" class="table-row-group">
                <div role="row" data-slot="table-row" x-show="!grid().rows.length" style="display: none" class="table-row">
                    <div role="cell" data-slot="table-cell" x-bind:colspan="colspan()" class="table-cell px-4 py-8 text-center text-muted-foreground">Nothing logged for this period.</div>
                </div>
                <template x-for="row in grid().rows" x-bind:key="row.key">
                    <div role="row" data-slot="table-row" class="table-row border-t border-border">
                        <div role="rowheader" data-slot="table-cell" class="table-cell h-row whitespace-nowrap px-4 py-3 font-medium" x-text="row.text"></div>
                        <template x-for="d in days()" x-bind:key="d">
                            <div role="cell" data-slot="table-cell" class="table-cell h-row whitespace-nowrap px-4 py-3 text-end"><bdi dir="ltr" class="tabular-nums" x-text="cellText(row, d)"></bdi></div>
                        </template>
                        <div role="cell" data-slot="table-cell" x-show="isWeek()" class="table-cell h-row whitespace-nowrap px-4 py-3 text-end font-medium"><bdi dir="ltr" class="tabular-nums" x-text="hours(row.total)"></bdi></div>
                    </div>
                </template>
            </div>
            <div role="rowgroup" data-slot="table-footer" class="table-footer-group">
                <div role="row" data-slot="table-row" x-show="grid().rows.length" class="table-row border-t border-border bg-muted/50">
                    <div role="rowheader" data-slot="table-cell" class="table-cell h-row whitespace-nowrap px-4 py-3 font-semibold">Total</div>
                    <template x-for="d in days()" x-bind:key="d">
                        <div role="cell" data-slot="table-cell" class="table-cell h-row whitespace-nowrap px-4 py-3 text-end font-semibold"><bdi dir="ltr" class="tabular-nums" x-text="hours(grid().columns[d] ?? 0)"></bdi></div>
                    </template>
                    <div role="cell" data-slot="table-cell" x-show="isWeek()" class="table-cell h-row whitespace-nowrap px-4 py-3 text-end font-semibold"><bdi dir="ltr" class="tabular-nums" x-text="hours(grid().total)"></bdi></div>
                </div>
            </div>
        </div></div>
</section>
</div>
```