@cocoar/vue-ui 3.1.0 → 3.2.0-beta.11

package/skills/cocoar-vue-ui/references/components/button.md

@@ -0,0 +1,252 @@
+<!-- Generated from apps/docs/components/button.md by apps/docs/scripts/sync-skill.mjs. Do not edit; edit the docs page. -->
+
+# Button
+
+Buttons trigger actions and communicate what will happen when pressed.
+
+```ts
+import { CoarButton } from '@cocoar/vue-ui';
+```
+
+## Variants
+
+Choose the appropriate variant based on the action's importance and context.
+
+**Demo — `button/demos/ButtonVariants.vue`**
+
+```vue
+<template>
+  <div style="display: flex; flex-wrap: wrap; gap: 8px; align-items: center;">
+    <CoarButton variant="primary">Primary</CoarButton>
+    <CoarButton variant="secondary">Secondary</CoarButton>
+    <CoarButton variant="tertiary">Tertiary</CoarButton>
+    <CoarButton variant="danger">Danger</CoarButton>
+    <CoarButton variant="ghost">Ghost</CoarButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CoarButton } from '@cocoar/vue-ui';
+</script>
+```
+
+**When to use each variant:**
+
+- **Primary** — Main call-to-action. Use sparingly, typically once per view.
+- **Secondary** — Alternative actions. Pairs well with primary buttons.
+- **Tertiary** — Low-emphasis actions with brand color hint.
+- **Danger** — Destructive actions like delete or remove.
+- **Ghost** — Minimal emphasis, often for cancel or dismiss.
+
+## Sizes
+
+Four sizes to fit different contexts and layouts.
+
+**Demo — `button/demos/ButtonSizes.vue`**
+
+```vue
+<template>
+  <div style="display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;">
+    <CoarButton size="xs">Extra Small</CoarButton>
+    <CoarButton size="s">Small</CoarButton>
+    <CoarButton size="m">Medium</CoarButton>
+    <CoarButton size="l">Large</CoarButton>
+  </div>
+  <p style="margin-top: 8px; font-size: 13px; color: #64748b;">
+    <code>xs</code> 27px | <code>s</code> 32px | <code>m</code> 40px | <code>l</code> 48px
+  </p>
+</template>
+
+<script setup lang="ts">
+import { CoarButton } from '@cocoar/vue-ui';
+</script>
+```
+
+## Icons
+
+Add icons before or after the label to enhance meaning.
+
+**Demo — `button/demos/ButtonIcons.vue`**
+
+```vue
+<template>
+  <div style="display: flex; flex-wrap: wrap; gap: 8px; align-items: center;">
+    <CoarButton icon-start="plus">Add Item</CoarButton>
+    <CoarButton variant="secondary" icon-end="chevron-right">Next</CoarButton>
+    <CoarButton variant="tertiary" icon-start="clipboard">Download</CoarButton>
+    <CoarButton variant="danger" icon-start="trash-2">Delete</CoarButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CoarButton } from '@cocoar/vue-ui';
+</script>
+```
+
+## Loading State
+
+Show a spinner while an async action is in progress. Click to test.
+
+**Demo — `button/demos/ButtonLoading.vue`**
+
+```vue
+<template>
+  <div style="display: flex; flex-wrap: wrap; gap: 16px; align-items: center;">
+    <div style="display: flex; align-items: center; gap: 8px;">
+      <span style="font-size: 13px; color: #64748b; min-width: 100px;">With start icon:</span>
+      <CoarButton icon-start="check" :loading="isLoading" @click="simulateLoading">Save Changes</CoarButton>
+    </div>
+    <div style="display: flex; align-items: center; gap: 8px;">
+      <span style="font-size: 13px; color: #64748b; min-width: 100px;">Icon end:</span>
+      <CoarButton icon-end="chevron-right" :loading="isLoadingEnd" @click="simulateLoadingEnd">Continue</CoarButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { CoarButton } from '@cocoar/vue-ui';
+
+const isLoading = ref(false);
+const isLoadingEnd = ref(false);
+
+function simulateLoading() {
+  isLoading.value = true;
+  setTimeout(() => { isLoading.value = false; }, 2000);
+}
+
+function simulateLoadingEnd() {
+  isLoadingEnd.value = true;
+  setTimeout(() => { isLoadingEnd.value = false; }, 2000);
+}
+</script>
+```
+
+## Disabled State
+
+Disable buttons when actions are not available.
+
+**Demo — `button/demos/ButtonDisabled.vue`**
+
+```vue
+<template>
+  <div style="display: flex; flex-wrap: wrap; gap: 8px; align-items: center;">
+    <CoarButton :disabled="true">Primary</CoarButton>
+    <CoarButton variant="secondary" :disabled="true">Secondary</CoarButton>
+    <CoarButton variant="tertiary" :disabled="true">Tertiary</CoarButton>
+    <CoarButton variant="danger" :disabled="true">Danger</CoarButton>
+    <CoarButton variant="ghost" :disabled="true">Ghost</CoarButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CoarButton } from '@cocoar/vue-ui';
+</script>
+```
+
+## Full Width
+
+Buttons can expand to fill their container.
+
+**Demo — `button/demos/ButtonFullWidth.vue`**
+
+```vue
+<template>
+  <div style="max-width: 360px; display: flex; flex-direction: column; gap: 8px;">
+    <CoarButton :full-width="true">Full Width Primary</CoarButton>
+    <CoarButton variant="secondary" :full-width="true">Full Width Secondary</CoarButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CoarButton } from '@cocoar/vue-ui';
+</script>
+```
+
+## Router Integration
+
+Pass `to` to render the button as a real `<a href>` link instead of a `<button>`. The button keeps its full visual styling — variants, sizes, icons, loading spinner — but right-click → "Open in new tab", middle-click, and Ctrl/Cmd-click all work as expected via the browser's native link handling. Screenreaders announce "link" instead of "button".
+
+```vue
+<!-- Before — modifier-clicks silently did nothing -->
+<CoarButton variant="primary" @click="router.push('/docs')">
+  Open documentation
+</CoarButton>
+
+<!-- After — full browser link affordances -->
+<CoarButton variant="primary" to="/docs">
+  Open documentation
+</CoarButton>
+```
+
+If `vue-router` is installed and registered (`app.use(router)`), the button renders via `<RouterLink>` and plain clicks trigger SPA navigation. Without a router it falls back to a plain `<a href={String(to)}>` that uses the browser's native navigation — useful for external links.
+
+```vue
+<!-- External link — works with or without vue-router -->
+<CoarButton variant="ghost" iconEnd="external-link" to="https://docs.cocoar.dev">
+  Documentation
+</CoarButton>
+```
+
+`@click` still emits on plain click for telemetry and other consumer side-effects. Modifier-clicks (Ctrl/Cmd/Shift/Alt/middle-button) pass through to the browser without SPA navigation, so the user can open the destination in a new tab. `disabled` and `loading` block both navigation and the emit; the `type` attribute is only applied when rendering as `<button>` (it is invalid on `<a>`).
+
+> **Info**
+>
+> `vue-router` is declared as an **optional `peerDependenciesMeta`** entry of `@cocoar/vue-ui` — install it if you want SPA routing, omit it for click-emit-only / external-URL use. Apps without a router can use `<CoarButton>` exactly as before; setting `to` to a string URL still gives you a proper `<a href>` for browser navigation.
+
+> **Warning: Object `to` without router**
+>
+> Passing an object literal (`:to="{ name: 'docs' }"`) when no router is installed falls back to `String(to)`, producing `href="[object Object]"` — a broken link. The component logs a DEV-only `console.warn` once per component instance to make this loud at dev-time. Pass a string path for the no-router case.
+
+## Accessibility
+
+### Keyboard Navigation
+
+| Key | Action |
+|-----|--------|
+| `Tab` | Move focus to button |
+| `Shift + Tab` | Move focus backward |
+| `Enter` | Activate button |
+| `Space` | Activate button |
+
+> **Info**
+>
+> Disabled and loading buttons cannot be activated via keyboard.
+
+### Screen Reader Support
+
+- Button text or `aria-label` announces on focus
+- Disabled state properly communicated
+- Loading state indicates button is busy
+- Icon-only buttons should include `aria-label`
+- `type` attribute ensures correct form behavior
+
+## API
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `'primary' \| 'secondary' \| 'tertiary' \| 'danger' \| 'ghost'` | `'primary'` | Button style variant |
+| `size` | `'xs' \| 's' \| 'm' \| 'l'` | `'m'` | Button size |
+| `iconStart` | `string` | `undefined` | Icon name before label |
+| `iconEnd` | `string` | `undefined` | Icon name after label |
+| `loading` | `boolean` | `false` | Show loading spinner |
+| `disabled` | `boolean` | `false` | Disable the button |
+| `fullWidth` | `boolean` | `false` | Expand to fill container |
+| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | HTML button type (ignored when `to` is set — invalid on `<a>`) |
+| `to` | `RouteLocationRaw \| string` | `undefined` | Vue Router target. When set, renders as `<a href>` via `<RouterLink>` (or plain `<a>` if no router is installed). Enables right-click / middle-click / Ctrl+click new-tab behaviour and "Copy link address". See [Router Integration](#router-integration). |
+
+### Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `click` | `MouseEvent` | Emitted when clicked (not when disabled/loading) |
+
+## i18n Keys
+
+These keys can be translated via [`@cocoar/vue-localization`](../foundations/localization/translations.md).
+
+| Key | Default (English) | Used as |
+|-----|-------------------|---------|
+| `coar.ui.button.loading` | `'Loading'` | Screen reader announcement when `loading` is true |

package/skills/cocoar-vue-ui/references/components/calendar/agenda-view.md

@@ -0,0 +1,372 @@
+<!-- Generated from apps/docs/components/calendar/agenda-view.md by apps/docs/scripts/sync-skill.mjs. Do not edit; edit the docs page. -->
+
+# `<CoarAgendaView>` — Agenda View (Preview)
+
+Virtualized chronological list grouped by day. Multi-day events appear on every day they touch (with a `(cont.)` tag from day 2 onwards). The current-day header floats at the top of the surface and is pushed up by the next inline header — same UX as native CSS sticky, but works correctly on top of an absolutely-positioned virtualized surface.
+
+```html
+<CoarAgendaView :builder="builder" />
+```
+
+## Standalone usage
+
+```ts
+import { ref } from 'vue';
+import { Temporal } from '@js-temporal/polyfill';
+import {
+  CoarAgendaView,
+  useAgendaView,
+  type CalendarEvent,
+} from '@cocoar/vue-calendar';
+
+const events = ref<CalendarEvent[]>([
+  {
+    id: 'standup',
+    start: Temporal.ZonedDateTime.from('2026-04-15T09:00:00[UTC]'),
+    end:   Temporal.ZonedDateTime.from('2026-04-15T09:30:00[UTC]'),
+  },
+  {
+    id: 'devconf',
+    start: Temporal.PlainDate.from('2026-04-13'),
+    end:   Temporal.PlainDate.from('2026-04-16'),
+  },
+]);
+const date = ref('2026-04-15');
+
+const { builder, api } = useAgendaView();
+builder
+  .events(events)
+  .date(date)
+  .timezone('UTC')
+  .agendaLengthDays(60)
+  .showEmptyDays(true);
+```
+
+```html
+<CoarAgendaView :builder="builder" />
+```
+
+The visible window is derived from `date()` (the cursor — the **first** day) plus `agendaLengthDays()` (how many days forward to render). Use `api.scrollToDate(...)` to jump to any day inside that window.
+
+**Demo — `calendar/demos/AgendaViewBasic.vue`**
+
+```vue
+<template>
+  <div style="height: 520px; border: 1px solid var(--coar-border-neutral-tertiary); border-radius: var(--coar-radius-xs); overflow: hidden;">
+    <CoarAgendaView :builder="builder" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import {
+  CoarAgendaView,
+  useAgendaView,
+  Temporal,
+  type CalendarEvent,
+} from '@cocoar/vue-calendar';
+
+const date = ref(Temporal.PlainDate.from('2026-04-13'));
+
+// Local helpers — keep event construction terse while still using the
+// article-4 typed shape (PlainDate for all-day, ZonedDateTime for timed).
+const pd = (iso: string) => Temporal.PlainDate.from(iso);
+const zdt = (iso: string, tz = 'Europe/Vienna') =>
+  Temporal.ZonedDateTime.from(`${iso}[${tz}]`);
+
+const events = ref<CalendarEvent[]>([
+  // Multi-day all-day event — appears on every day it touches with
+  // a localized "(cont.)" tag from day 2 onwards.
+  {
+    id: 'devconf',
+    start: pd('2026-04-13'),
+    end: pd('2026-04-16'),
+    meta: { title: 'DevConf — Vienna', color: '#7c3aed' },
+  },
+  // Single-day all-day.
+  {
+    id: 'easter-monday',
+    start: pd('2026-04-13'),
+    meta: { title: 'Easter Monday (PT branch)', color: '#10b981' },
+  },
+  // Daily standups Mon–Fri.
+  ...['2026-04-13', '2026-04-14', '2026-04-15', '2026-04-16', '2026-04-17'].map(
+    (d): CalendarEvent => ({
+      id: `standup-${d}`,
+      start: zdt(`${d}T09:00:00`),
+      end: zdt(`${d}T09:30:00`),
+      meta: { title: 'Daily standup', color: '#10b981' },
+    }),
+  ),
+  // Wed busy day.
+  {
+    id: 'design',
+    start: zdt('2026-04-15T11:00:00'),
+    end: zdt('2026-04-15T12:00:00'),
+    meta: { title: 'Design review', color: '#8b5cf6' },
+  },
+  {
+    id: 'lunch',
+    start: zdt('2026-04-15T12:00:00'),
+    end: zdt('2026-04-15T13:00:00'),
+    meta: { title: 'Lunch with Anna', color: '#ef4444' },
+  },
+  // Fri client demo.
+  {
+    id: 'fri-demo',
+    start: zdt('2026-04-17T15:00:00'),
+    end: zdt('2026-04-17T16:30:00'),
+    meta: { title: 'Client demo', color: '#dc2626' },
+  },
+  // Quarterly review crossing the month boundary.
+  {
+    id: 'qr',
+    start: pd('2026-04-29'),
+    end: pd('2026-05-02'),
+    meta: { title: 'Quarterly review', color: '#2563eb' },
+  },
+]);
+
+const { builder } = useAgendaView();
+builder
+  .events(events)
+  .date(date)
+  .timezone('Europe/Vienna')
+  .agendaLengthDays(30)
+  .onEventDrop(({ event, next }) => {
+    const idx = events.value.findIndex((e) => e.id === event.id);
+    if (idx < 0) return;
+    events.value = [
+      ...events.value.slice(0, idx),
+      { ...event, start: next.start, ...(next.end ? { end: next.end } : {}) },
+      ...events.value.slice(idx + 1),
+    ];
+  });
+</script>
+```
+
+## Imperative scroll-to-date + empty days
+
+The `api` object returned by `useAgendaView()` exposes `scrollToDate(iso)` for jumping to any day inside the window. Toggle `showEmptyDays(true)` to render headers for days with no events — useful when you want a continuous date strip.
+
+**Demo — `calendar/demos/AgendaViewScrollToDate.vue`**
+
+```vue
+<template>
+  <div>
+    <div class="controls">
+      <CoarButton size="sm" @click="api.scrollToDate('2026-04-13')">
+        ← DevConf (Apr 13)
+      </CoarButton>
+      <CoarButton size="sm" @click="api.scrollToDate('2026-04-22')">
+        Team offsite (Apr 22)
+      </CoarButton>
+      <CoarButton size="sm" @click="api.scrollToDate('2026-05-04')">
+        Quarterly review (May 4) →
+      </CoarButton>
+      <label class="toggle">
+        <input v-model="empty" type="checkbox" />
+        <span>Show empty days</span>
+      </label>
+    </div>
+    <div style="height: 460px; border: 1px solid var(--coar-border-neutral-tertiary); border-radius: var(--coar-radius-xs); overflow: hidden;">
+      <CoarAgendaView :builder="builder" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { CoarButton } from '@cocoar/vue-ui';
+import {
+  CoarAgendaView,
+  useAgendaView,
+  Temporal,
+  type CalendarEvent,
+} from '@cocoar/vue-calendar';
+
+const date = ref(Temporal.PlainDate.from('2026-04-01'));
+const empty = ref(false);
+
+const pd = (iso: string) => Temporal.PlainDate.from(iso);
+const zdt = (iso: string, tz = 'Europe/Vienna') =>
+  Temporal.ZonedDateTime.from(`${iso}[${tz}]`);
+
+const events = ref<CalendarEvent[]>([
+  {
+    id: 'devconf',
+    start: pd('2026-04-13'),
+    end: pd('2026-04-16'),
+    meta: { title: 'DevConf — Vienna', color: '#7c3aed' },
+  },
+  {
+    id: 'team-offsite',
+    start: pd('2026-04-22'),
+    end: pd('2026-04-25'),
+    meta: { title: 'Team offsite', color: '#0891b2' },
+  },
+  ...['2026-04-13', '2026-04-14', '2026-04-15', '2026-04-16', '2026-04-17',
+      '2026-04-20', '2026-04-21', '2026-04-22', '2026-04-23', '2026-04-24'].map(
+    (d): CalendarEvent => ({
+      id: `standup-${d}`,
+      start: zdt(`${d}T09:00:00`),
+      end: zdt(`${d}T09:30:00`),
+      meta: { title: 'Daily standup', color: '#10b981' },
+    }),
+  ),
+  {
+    id: 'qr',
+    start: zdt('2026-05-04T10:00:00'),
+    end: zdt('2026-05-04T12:00:00'),
+    meta: { title: 'Quarterly review', color: '#2563eb' },
+  },
+]);
+
+const { builder, api } = useAgendaView();
+builder
+  .events(events)
+  .date(date)
+  .timezone('Europe/Vienna')
+  .agendaLengthDays(60)
+  .showEmptyDays(() => empty.value);
+</script>
+
+<style scoped>
+.controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 12px;
+}
+.toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+  font-size: 13px;
+  color: var(--coar-text-subtle, #6b7280);
+}
+</style>
+```
+
+## Inside `<CoarCalendar>`
+
+`<CoarCalendar>` and `<CoarAgendaView>` consume the SAME `CalendarBuilder` instance — there's no sub-builder forking. Set agenda-specific config directly on the composer's builder:
+
+```ts
+const { builder } = useCalendar();
+builder
+  .agendaLengthDays(60)
+  .showEmptyDays(true);
+```
+
+When the active view is agenda, the same builder feeds the embedded `<CoarAgendaView>`. View-specific settings simply have no effect outside their view.
+
+## `useAgendaView<TMeta>()`
+
+```ts
+function useAgendaView<TMeta>(): {
+  builder: CalendarBuilder<TMeta>;
+  api: CalendarApi<TMeta>;
+};
+```
+
+Returns a fresh standalone builder + its imperative api.
+
+## Builder setters
+
+### Universal (every builder)
+
+Same universal surface as the [composer](./coar-calendar.md#api-reference). Highlights for the agenda view:
+
+| Setter | Notes |
+|---|---|
+| `eventRenderer(r)` | Replaces the default time + title row content. |
+| `onDateClick(fn)` | Fires on day-group header click. |
+| `onEventClick(fn)` / `onEventDoubleClick(fn)` | Per-row interaction. |
+
+### Agenda specific
+
+| Setter | Argument | Default | Notes |
+|---|---|---|---|
+| `agendaLengthDays(n)` | `MaybeRefOrGetter<number>` | `30` | How many days the visible window covers, starting from `date()`. |
+| `showEmptyDays(b)` | `MaybeRefOrGetter<boolean>` | `false` | When `true`, empty days render a header in italic-grey. When `false`, only days with events appear. |
+
+## Time labels
+
+The time column follows one rule, shared with the Month List surface and with the SwiftUI port:
+
+| Event | Label |
+|---|---|
+| all-day (`PlainDate` start) | the localised `All day` label |
+| timed with `end` | `start – end`, both in the display zone (en dash, U+2013) |
+| timed without `end` (point event) | the start time only |
+
+Formatting goes through `buildFormatOptions` (C6): `locale`, `timeStyle` and `hour12` apply to both ends of the span.
+
+## Multi-day events & continuation tags
+
+A multi-day event appears on every day it touches. The first day shows the event normally; subsequent days show it dimmed with a localised `(cont.)` tag appended to the title. Both rows are interactive — clicking either dispatches `onEventClick` with the same event.
+
+## Floating sticky header
+
+Because the virtualized surface absolutely-positions every item, native `position: sticky` can't pin them. The agenda renders a separate **floating** day-header overlay above the surface that:
+
+- shows the most recent header at-or-before `scrollTop`,
+- gets pushed up by the next inline header crossing into its region (continuous swap, no snap),
+- is reserved as a sibling of the surface so it doesn't scroll with the rows.
+
+There's nothing to configure — it's automatic.
+
+## Imperative API
+
+```ts
+interface CalendarApi<TMeta> {
+  goTo(iso: string): void;
+  goToToday(): void;
+  next(): void;                  // ±agendaLengthDays
+  prev(): void;
+  getVisibleRange(): ViewWindow | null;
+  getVisibleEvents(): CalendarEvent<TMeta>[];
+  scrollToDate(iso: string): void;   // Agenda only
+  refresh(): void;
+  refreshRange(start: string, end: string): void;
+  readonly loading: Readonly<Ref<boolean>>;
+  readonly visibleRange: Readonly<Ref<ViewWindow | null>>;
+  readonly gridReady: Readonly<Ref<boolean>>;
+}
+```
+
+## `<CoarAgendaView>` props + slots
+
+| Prop | Type | Description |
+|---|---|---|
+| `builder` | `CalendarBuilder` | **Required.** From `useAgendaView()` (or share the one from `useCalendar()`). |
+| `estimatedItemSize` | `number` | Height estimate for the variable-size virtualization. Default `64`. |
+| `overscan` | `number` | Items beyond the viewport rendered each direction. Default `5`. |
+
+| Slot | Scope | Purpose |
+|---|---|---|
+| `event` | `{ event, item }` | Per-row renderer. `item` is the full `AgendaEventItem` (event + `isContinuation` flag). |
+| `dayGroupHeader` | `{ date, item, isToday }` | Per-day header renderer (same component renders the inline + floating overlay). |
+| `empty` | — | Empty state. Shown only when the list draws nothing — no events in the window, `showEmptyDays` off — and no load is in flight. No default; without the slot the surface stays blank. Rendered as a non-interactive overlay so the list stays mounted. Inside `<CoarCalendar>` use the `agendaEmpty` slot. |
+| `weekStripStart` | `WeekStripSlotScope` | Day agenda only. Content at the start of the seven-day week strip, e.g. a previous-week button. |
+| `weekStripEnd` | `WeekStripSlotScope` | Day agenda only. Content at the end of the week strip, e.g. a next-week button. |
+
+### Day agenda week strip
+
+`view="dayAgenda"` renders a seven-day strip above the list; tapping a day moves the builder cursor. The strip has two slots for host controls at either end. Both receive the same `WeekStripSlotScope`: `cursor` (selected day), `weekStart` / `weekEnd` (the strip's window), `goTo(date)` and `shiftWeek(n)` — `-1` pages to the previous week, `1` to the next. The slot content sizes itself; the seven day buttons take the remaining width.
+
+```vue
+<CoarAgendaView :builder="builder" view="dayAgenda">
+  <template #weekStripStart="{ shiftWeek }">
+    <button type="button" aria-label="Vorige Woche" @click="shiftWeek(-1)">‹</button>
+  </template>
+  <template #weekStripEnd="{ shiftWeek }">
+    <button type="button" aria-label="Nächste Woche" @click="shiftWeek(1)">›</button>
+  </template>
+</CoarAgendaView>
+```
+
+Inside `<CoarCalendar>` the same slots exist under the same names and reach the day agenda when it is the active view.