@cocoar/vue-ui 3.2.0-beta.7 → 3.2.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocoar/vue-ui",
-  "version": "3.2.0-beta.7",
+  "version": "3.2.0-beta.9",
   "description": "Cocoar Design System — a touch-first Vue 3 component library with 30+ accessible, themeable components",
   "license": "Apache-2.0",
   "repository": {
@@ -55,7 +55,7 @@
     "typecheck": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "@cocoar/vue-localization": "3.2.0-beta.7",
+    "@cocoar/vue-localization": "3.2.0-beta.9",
     "@fontsource/cascadia-code": "^5.2.3",
     "@fontsource/inter": "^5.2.8",
     "@fontsource/poppins": "^5.2.7",

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

@@ -351,3 +351,22 @@ interface CalendarApi<TMeta> {
 | `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.

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

@@ -1558,7 +1558,8 @@ The builder is **flat** — every setter lives directly on it. There are no sub-
 | `dayColumnCount(n)` | `MaybeRefOrGetter<number>` | Minimum complete columns in Multi-day mode. Clamped to `1…7`. |
 | `dayColumnMinWidth(px)` | `MaybeRefOrGetter<number>` | Target width used to derive extra Multi-day columns. |
 | `density(d)` | `MaybeRefOrGetter<'comfortable' \| 'compact'>` | Row / padding tightness. |
-| `maxEventsPerCell(n)` | `MaybeRefOrGetter<number>` | Month-cell pill hint. Default `3`. |
+| `maxEventsPerCell(n)` | `MaybeRefOrGetter<number>` | Single-day pills a Details month cell shows before the rest fold into `+N`. Default `2`, like iOS. |
+| `monthMaxVisibleLanes(n)` | `MaybeRefOrGetter<number \| null>` | Multi-day lanes a month week row shows before the remaining bars fold into the covered days' `+N`. Default `2`; `null` = the row grows with every lane. |
 | `agendaLengthDays(n)` | `MaybeRefOrGetter<number>` | Days the agenda window covers. Default `30`. |
 | `showEmptyDays(b)` | `MaybeRefOrGetter<boolean>` | Render headers for empty days (agenda). |
 | `availableViews(v)` | `MaybeRefOrGetter<readonly CalendarView[]>` | Filter the view-switcher. |
@@ -1630,6 +1631,7 @@ Variant-specific slots (`pill`, `multiDayBar`, `allDayEvent`) still exist on the
 | `allDayEvent` | `{ event, layout }` | All-day band renderer (week / day). |
 | `pill` | `{ event, pill }` | Month single-day pill. |
 | `agendaEmpty` | — | Agenda empty state (forwarded to `<CoarAgendaView>`'s `empty` slot). Shown only when the agenda draws nothing and no load is in flight; no default. |
+| `weekStripStart` / `weekStripEnd` | `WeekStripSlotScope` | Day agenda: host controls at either end of the seven-day week strip (e.g. previous / next week via `shiftWeek(±1)`). Forwarded to `<CoarAgendaView>`. |
 | `multiDayBar` | `{ event, bar }` | Month multi-day bar. |
 | `dayHeader` | `{ date, isToday, isWeekend }` | Per-day column header (week / day). |
 

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

@@ -8,7 +8,7 @@ The shell's Month view follows the iOS structure: months scroll continuously and
 |---|---|
 | Compact | 52 px base week rows; per-day events combine into a segmented colour capsule. |
 | Stacked | 68 px base rows; compact individual event marks. |
-| Details | 94 px base rows; titles, assignees, multi-day bars and row expansion. |
+| Details | Base rows of at least 94 px — measured up when the host's pills are taller; titles, assignees, multi-day bars and a `+N` row for whatever does not fit. |
 | List | Compact month selector plus the selected day's event list; stacked in narrow containers and side-by-side from 720 px. |
 
 The regular Month choices use `<CoarContinuousMonthView>`. `<CoarMonthView>` remains exported as the lower-level single-month section for widgets and custom compositions.
@@ -426,15 +426,26 @@ Full reference: see [the composer's API reference](./coar-calendar.md#api-refere
 | `firstDayOfWeek(d)` | `0..6 \| undefined` | locale-aware | `0` = Sunday, `1` = Monday, … |
 | `monthDensity(d)` | `'compact' \| 'stacked' \| 'details'` | `'details'` | Presentation used by continuous Month. |
 | `shadeWeekends(b)` | `MaybeRefOrGetter<boolean>` | `true` | Shades Saturday / Sunday cells and weekday headers. Set `false` for an unshaded appearance. |
-| `maxEventsPerCell(n)` | `MaybeRefOrGetter<number>` | `3` | Pill cap hint. The library never truncates — pills always reach the DOM — but the collapsed-cell height reserves space for ~`n` pills before the cell starts to scroll. |
+| `maxEventsPerCell(n)` | `MaybeRefOrGetter<number>` | `2` | Single-day pills a **Details** cell shows before the rest fold into the `+N` row. Stacked and Compact use fixed limits (2 marks / 6 capsule segments) like iOS. |
+| `monthMaxVisibleLanes(n)` | `MaybeRefOrGetter<number \| null>` | `2` | Multi-day lanes a week row shows. Bars past the cap leave the band and count into the `+N` of every day they cover; `null` lets the row grow with every lane. |
 | `eventRenderer(r)` | `EventRenderer<TMeta>` | — | Universal renderer. Branch on `ctx.layout?.kind === 'monthPill' \| 'monthBar'` for variant-specific rendering — see the example above. |
 | `dayHeaderRenderer(r)` | `DayHeaderRenderer` | — | Weekday-strip header (Mon / Tue / ...). |
 
-## Per-cell expansion
+## Overflow — the `+N` row
 
-Each cell has a kebab trigger (top-right of the day-number row, hover-reveal on desktop, always visible on touch). Clicking it opens a context menu with **Show more events** / **Show fewer events**, which expands or collapses the entire **row** (single-row mode — opening one collapses any other previously-expanded row). Right-click / long-press on the cell body opens the same menu at the pointer.
+Month rows have a fixed height per density plus the height of the week's multi-day lane band, and that band is capped too: a row shows at most `monthMaxVisibleLanes` lanes (default **2**). A multi-day bar past the cap leaves the band entirely — it is never clipped mid-row — and counts into the `+N` of every day it covers. `null` restores the unbounded band of the iOS port, where a week grows with every lane.
 
-The collapsed cell uses a height that fits ~`maxEventsPerCell` pills + the multi-day-bar lane area; expanded rows grow to a fixed maximum so all overflowing pills are reachable via scroll.
+A Details cell renders its first `maxEventsPerCell` single-day pills (default **2**) and folds the rest, together with the folded bars covering the day, into one `+N` row in the subtle text colour. The Details base row is the iOS 94 px or, if the host's styling needs more, the measured height of the day-number row plus `maxEventsPerCell` pills plus the `+N` row — the view measures its own rendered cells (`useMonthMetrics`), so a `:deep()` override that makes pills or the day-number row taller never clips the marker. Details multi-day bars take the measured pill height, so bars and pills in one row are always the same size. Stacked shows 2 marks and Compact 6 capsule segments and, like iOS, cap silently — their marks carry no titles, so the day has to be opened either way. Cells never scroll, and there is no per-cell menu or row expansion.
+
+On the web the `+N` row is a button (accessible name "N more events", `aria-haspopup="dialog"`). It opens a **day sheet** over that one cell: a small dialog aligned to the cell's top-left edge that lists every event of the day — the multi-day events covering it first (visible lanes, then folded ones), then the single-day pills — and scrolls when the list is long. The sheet opens downward and flips upward when the space below inside the scroll container is short; it never expands the row or the grid. Every pill in the sheet is a live pill with the grid's own wiring — drag it onto any other day, move it with the keyboard, double-click it for `onEventDoubleClick`. The sheet closes on Escape, its close control, a pointerdown outside it, another `+N`, or when the month changes; focus returns to the `+N` button.
+
+A tap on the cell body still fires `onDateClick` (the `+N` button does not), so a host that prefers its own day surface keeps working unchanged.
+
+In the grid itself hidden events are not in the DOM, so keyboard focus and drag-and-drop there reach only the visible pills; the sheet is where the rest become reachable. Drop onto a full cell works either way: a drag preview takes the last visible slot so the target is always visible.
+
+```ts
+builder.monthDensity('details').maxEventsPerCell(3); // three titles, then +N
+```
 
 ## Drag and drop