fold-ng 0.7.0 → 0.8.1

package/fesm2022/fold-ng.mjs

@@ -1,6 +1,6 @@
 import { DOCUMENT, NgTemplateOutlet, NgClass, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, inject, ElementRef, effect, Directive, Injectable, signal, DestroyRef, model, computed, HostListener, Component, InjectionToken, Service, booleanAttribute, linkedSignal, numberAttribute, ViewEncapsulation, output, viewChild, afterRenderEffect, afterNextRender, contentChildren, TemplateRef, isDevMode, contentChild, Renderer2, RendererStyleFlags2, viewChildren, ViewContainerRef, Injector } from '@angular/core';
+import { input, inject, ElementRef, effect, Directive, Injectable, signal, DestroyRef, model, computed, HostListener, Component, InjectionToken, Service, booleanAttribute, linkedSignal, numberAttribute, ViewEncapsulation, output, viewChild, afterRenderEffect, afterNextRender, contentChildren, TemplateRef, isDevMode, contentChild, untracked, Injector, Renderer2, RendererStyleFlags2, viewChildren, ViewContainerRef } from '@angular/core';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 
 /**
@@ -4248,6 +4248,2292 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }]
         }], propDecorators: { sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], stickyOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyOffset", required: false }] }] } });
 
+/**
+ * Marks an `<ng-template>` as the renderer for every event chip inside a
+ * calendar view, replacing the built-in icon + label + count row:
+ *
+ * ```html
+ * <fold-calendar-month [(month)]="month" [events]="events()">
+ *   <ng-template foldCalendarEvent let-event let-band="band">
+ *     <fold-avatar [name]="event.data.owner" size="xs" />
+ *     <span>{{ event.label }}</span>
+ *   </ng-template>
+ * </fold-calendar-month>
+ * ```
+ *
+ * `let-event` and `let-band` are **fully typed** under `strictTemplates`: the
+ * directive is generic over the same `T` as the events it renders, and its
+ * context guard carries that through, so `event.data` is the app's own record
+ * with no cast.
+ *
+ * @selector `ng-template[foldCalendarEvent]`
+ */
+class FoldCalendarEventDirective {
+    template = inject(TemplateRef);
+    /** Teaches the template checker what `let-event` and `let-band` are. */
+    static ngTemplateContextGuard(_directive, context) {
+        // Compile-time only — Angular never calls this; the narrowing is the point.
+        return context !== undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarEventDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: FoldCalendarEventDirective, isStandalone: true, selector: "ng-template[foldCalendarEvent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarEventDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[foldCalendarEvent]",
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * Plain-date arithmetic for the calendar family — `YYYY-MM-DD` in, `YYYY-MM-DD`
+ * out. Framework-free and side-effect-free, so every rule here is unit-testable
+ * without a TestBed.
+ *
+ * ## Why a string and not a `Date`
+ * A calendar of all-day spans deals in **plain dates** — "the 18th of May",
+ * with no instant and no zone. A `Date` is a timestamp, so the moment one
+ * crosses a zone or a DST boundary the same span lands on a different cell:
+ * `new Date("2026-05-18")` is UTC midnight, which is the *17th* anywhere west
+ * of Greenwich. Modelling the domain as `YYYY-MM-DD` removes that entire bug
+ * class by construction, and buys three things for free: values compare
+ * **lexicographically** (`a <= b` *is* "on or before"), they are `===`-equal
+ * when they mean the same day (a `Date` never is), and they are already the
+ * wire format every backend sends.
+ *
+ * {@link FoldTimelineNode} keeps a native `Date` on purpose — it plots dated
+ * *instants* on a rail, which is the other domain.
+ *
+ * Arithmetic runs through `Date.UTC`, never local time: UTC has no DST, so a
+ * day is always exactly 86 400 000 ms and "add 1 day" can never silently
+ * return the same date twice (or skip one) around a clock change.
+ *
+ * ## Supported range
+ * `0001-01-01` to `9999-12-31`. The four-digit year is what makes the
+ * lexicographic guarantee hold, so it is enforced rather than assumed: years
+ * below 1000 are zero-padded (`0099-12-31`, which still sorts correctly), and
+ * arithmetic that walks past `9999-12-31` returns a five-digit string that
+ * {@link foldIsCalendarDate} rejects — a value that fails the type's own
+ * predicate rather than one that silently sorts before every other date.
+ */
+/** Milliseconds in a UTC day — exact, since UTC has no DST. */
+const MS_PER_DAY = 86_400_000;
+/** `FoldWeekday` → the index `Date.prototype.getUTCDay()` returns for it. */
+const WEEKDAY_INDEX = {
+    sun: 0,
+    mon: 1,
+    tue: 2,
+    wed: 3,
+    thu: 4,
+    fri: 5,
+    sat: 6,
+};
+/** `getUTCDay()` index → the `FoldWeekday` it stands for. */
+const WEEKDAY_AT = [
+    "sun",
+    "mon",
+    "tue",
+    "wed",
+    "thu",
+    "fri",
+    "sat",
+];
+/**
+ * The days a calendar shades as the weekend by default. A separate fact from
+ * the week's anchor day: a Sunday-first calendar still rests on Sat/Sun, and a
+ * Saturday-first one (much of the Middle East) rests on Fri/Sat while starting
+ * on Saturday — which is why the two are different inputs, not one derived
+ * from the other.
+ */
+const FOLD_DEFAULT_WEEKEND_DAYS = [
+    "sat",
+    "sun",
+];
+/** `YYYY-MM-DD`, structurally. Rejects `2026-5-1`, `2026-05-1`, junk suffixes. */
+const DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+/** Left-pads a 1–2 digit date part to the two digits the format requires. */
+function pad2(value) {
+    return value < 10 ? `0${value}` : `${value}`;
+}
+/**
+ * Left-pads a year to four digits. Year 99 has to render as `0099`, not `99`,
+ * or it sorts before every other date and breaks the whole comparison model.
+ */
+function pad4(value) {
+    if (value >= 1000) {
+        return `${value}`;
+    }
+    if (value >= 100) {
+        return `0${value}`;
+    }
+    return value >= 10 ? `00${value}` : `000${value}`;
+}
+/**
+ * Whether `value` is a well-formed **and real** plain date. Catches both a
+ * malformed shape (`"2026-5-1"`) and an impossible day (`"2026-02-30"`), the
+ * latter by round-tripping through UTC and checking the parts survived.
+ */
+function foldIsCalendarDate(value) {
+    if (!DATE_PATTERN.test(value)) {
+        return false;
+    }
+    const year = Number(value.slice(0, 4));
+    const month = Number(value.slice(5, 7));
+    const day = Number(value.slice(8, 10));
+    if (month < 1 || month > 12 || day < 1 || day > 31) {
+        return false;
+    }
+    const parsed = new Date(Date.UTC(year, month - 1, day));
+    return parsed.getUTCMonth() === month - 1 && parsed.getUTCDate() === day;
+}
+/**
+ * Epoch milliseconds at UTC midnight of `date` — the internal representation
+ * every computation here runs on. A malformed date yields `NaN`, which
+ * propagates visibly rather than silently shifting a result.
+ */
+function toUtcMs(date) {
+    const year = Number(date.slice(0, 4));
+    const month = Number(date.slice(5, 7));
+    const day = Number(date.slice(8, 10));
+    const at = new Date(Date.UTC(year, month - 1, day));
+    // `Date.UTC` maps years 0–99 onto 1900–1999; only `setUTCFullYear` undoes it.
+    if (year < 100) {
+        at.setUTCFullYear(year, month - 1, day);
+    }
+    return at.getTime();
+}
+/** UTC midnight milliseconds back to `YYYY-MM-DD`. */
+function fromUtcMs(ms) {
+    const at = new Date(ms);
+    return `${pad4(at.getUTCFullYear())}-${pad2(at.getUTCMonth() + 1)}-${pad2(at.getUTCDate())}`;
+}
+/**
+ * `date` as a whole number of days since the epoch.
+ *
+ * The internal currency of anything that sorts, compares or clips a lot of
+ * dates. Strings are the right **model** — they are the wire format and they
+ * cannot carry a zone — but they are the wrong thing to compare a hundred
+ * thousand times: every `foldDaysBetween` in a sort comparator re-parses two
+ * strings and builds two `Date`s. Converting once at the door and working on
+ * integers is 6× faster on the month grid's hot path, with the same output.
+ *
+ * Not on the public surface: it is a representation, not a model.
+ */
+function foldToEpochDay(date) {
+    return Math.round(toUtcMs(date) / MS_PER_DAY);
+}
+/** The inverse of {@link foldToEpochDay}. */
+function foldFromEpochDay(day) {
+    return fromUtcMs(day * MS_PER_DAY);
+}
+/**
+ * Today, read from the **local** clock — the day the user believes it is,
+ * which is what a calendar highlights. Pass `now` to pin it (tests, a
+ * workspace clock).
+ */
+function foldToday(now = new Date()) {
+    return foldFromNativeDate(now);
+}
+/**
+ * A native `Date` read as the plain date it shows on a **local** clock — the
+ * inbound bridge, and the one conversion every consumer would otherwise write
+ * by hand as `date.toISOString().slice(0, 10)`, which is UTC and therefore off
+ * by a day for anyone west of Greenwich after 6pm. That is the exact bug this
+ * whole module exists to remove, so the correct form ships with it.
+ *
+ * Pair with {@link foldToNativeDate} for the way out.
+ */
+function foldFromNativeDate(date) {
+    return `${pad4(date.getFullYear())}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;
+}
+/** `date` shifted by `days` (negative moves back). */
+function foldAddDays(date, days) {
+    return fromUtcMs(toUtcMs(date) + days * MS_PER_DAY);
+}
+/**
+ * Whole days from `from` to `to` — signed, and **exclusive** (same day → `0`),
+ * so a span's length is `foldDaysBetween(start, end) + 1`.
+ */
+function foldDaysBetween(from, to) {
+    return Math.round((toUtcMs(to) - toUtcMs(from)) / MS_PER_DAY);
+}
+/**
+ * `date` shifted by `months`, clamping the day to the target month's length so
+ * the result is always a real date (31 Jan + 1 month → 28/29 Feb, never 3 Mar).
+ */
+function foldAddMonths(date, months) {
+    const day = Number(date.slice(8, 10));
+    const target = new Date(utcMonthMs(date, months));
+    const lastDay = new Date(lastDayOfMonthMs(target.getUTCFullYear(), target.getUTCMonth())).getUTCDate();
+    return `${pad4(target.getUTCFullYear())}-${pad2(target.getUTCMonth() + 1)}-${pad2(Math.min(day, lastDay))}`;
+}
+/** The 1st of `date`'s month shifted by `months`, in epoch ms. */
+function utcMonthMs(date, months) {
+    const year = Number(date.slice(0, 4));
+    const month = Number(date.slice(5, 7));
+    const at = new Date(Date.UTC(year, month - 1 + months, 1));
+    if (year < 100) {
+        at.setUTCFullYear(year, month - 1 + months, 1);
+    }
+    return at.getTime();
+}
+/** Day 0 of the following month — i.e. the last day of this one, in epoch ms. */
+function lastDayOfMonthMs(year, monthIndex) {
+    const at = new Date(Date.UTC(year, monthIndex + 1, 0));
+    if (year < 100) {
+        at.setUTCFullYear(year, monthIndex + 1, 0);
+    }
+    return at.getTime();
+}
+/** The first day of `date`'s month. */
+function foldStartOfMonth(date) {
+    return `${date.slice(0, 7)}-01`;
+}
+/** The last day of `date`'s month (28–31, leap years included). */
+function foldEndOfMonth(date) {
+    const year = Number(date.slice(0, 4));
+    const month = Number(date.slice(5, 7));
+    return fromUtcMs(lastDayOfMonthMs(year, month - 1));
+}
+/**
+ * The start of the week `date` falls in, for a calendar anchored on
+ * `weekStartsOn`. Anchor-agnostic: a Monday-first and a Sunday-first calendar
+ * ask the same question and get their own answer.
+ */
+function foldStartOfWeek(date, weekStartsOn = "mon") {
+    const ms = toUtcMs(date);
+    const dayOfWeek = new Date(ms).getUTCDay();
+    const offset = (dayOfWeek - WEEKDAY_INDEX[weekStartsOn] + 7) % 7;
+    return fromUtcMs(ms - offset * MS_PER_DAY);
+}
+/**
+ * `date`'s position in its week, `0` on the anchor day — the column a day
+ * occupies in a 7-wide grid.
+ */
+function foldWeekdayIndex(date, weekStartsOn = "mon") {
+    return ((new Date(toUtcMs(date)).getUTCDay() - WEEKDAY_INDEX[weekStartsOn] + 7) % 7);
+}
+/**
+ * The ISO-8601 week number `date` falls in, `1`–`53`.
+ *
+ * ISO weeks always start on Monday and belong to the year holding their
+ * **Thursday**, which is why 1 January is sometimes week 52 of the year before
+ * — the rule European B2B reporting runs on, and the reason this cannot be
+ * derived from the calendar's own `weekStartsOn`.
+ */
+function foldIsoWeek(date) {
+    const day = foldToEpochDay(date);
+    // Epoch day 0 is a Thursday, so `+3` puts Monday at 0.
+    const mondayOffset = (((day + 3) % 7) + 7) % 7;
+    const thursday = day - mondayOffset + 3;
+    const year = Number(foldFromEpochDay(thursday).slice(0, 4));
+    const firstThursdayWeek = foldToEpochDay(`${pad4(year)}-01-01`);
+    return Math.floor((thursday - firstThursdayWeek) / 7) + 1;
+}
+/** The ISO week-numbering year of `date` — not always its calendar year. */
+function foldIsoWeekYear(date) {
+    const day = foldToEpochDay(date);
+    const mondayOffset = (((day + 3) % 7) + 7) % 7;
+    return Number(foldFromEpochDay(day - mondayOffset + 3).slice(0, 4));
+}
+/** Which day of the week `date` falls on, anchor-independent. */
+function foldWeekdayOf(date) {
+    return WEEKDAY_AT[new Date(toUtcMs(date)).getUTCDay()] ?? "sun";
+}
+/**
+ * Whether `date` is one of the days a calendar shades as the weekend.
+ *
+ * Takes the weekend **as data**, because it is not derivable from the week's
+ * anchor: the two are independent locale facts. Deriving it — "the last two
+ * columns" — shades Friday and Saturday on a Sunday-first calendar and calls
+ * Sunday a working day, which is wrong everywhere it is used.
+ *
+ * @default FOLD_DEFAULT_WEEKEND_DAYS (`['sat', 'sun']`)
+ */
+function foldIsWeekend(date, weekendDays = FOLD_DEFAULT_WEEKEND_DAYS) {
+    return weekendDays.includes(foldWeekdayOf(date));
+}
+/**
+ * A `Temporal` value read as the plain date it starts with.
+ *
+ * `Temporal.PlainDate.toString()` **is** `YYYY-MM-DD` — the primitive this
+ * module chose for correctness turns out to be exactly Temporal-shaped, which
+ * no `Date`-based calendar can say. Going the other way needs no helper at all:
+ * `Temporal.PlainDate.from(foldDate)` already accepts one of ours.
+ *
+ * A `PlainDateTime` or a `ZonedDateTime` drops its time here, which is the
+ * point — this family plots whole days, and the day you mean is the one in the
+ * value's own calendar and zone, not the one UTC would have given you.
+ *
+ * Returns `""` for anything that is not an ISO date, so a bad value fails
+ * {@link foldIsCalendarDate} rather than silently rendering the wrong month.
+ */
+function foldFromTemporal(value) {
+    const candidate = value.toString().slice(0, 10);
+    return foldIsCalendarDate(candidate) ? candidate : "";
+}
+/**
+ * A `Date` at **UTC midnight** of `date` — the bridge to `Intl.DateTimeFormat`
+ * for month and weekday names. Format it with `timeZone: "UTC"`, or the local
+ * zone will shift the label back a day west of Greenwich.
+ */
+function foldToNativeDate(date) {
+    return new Date(toUtcMs(date));
+}
+
+/**
+ * Wall-clock time for the time grid — `HH:mm`, 24-hour, **no zone**.
+ *
+ * ## Why not an instant
+ * The same decision as the date, for the same reason. A meeting at 09:00 is at
+ * 09:00 on the wall the person is looking at; storing it as an instant means
+ * every render re-derives that wall time from a zone, and the moment the zone
+ * is wrong — a server default, a user travelling, a DST edge — the grid draws
+ * the wrong hour. `"09:00"` cannot be wrong about which hour it means.
+ *
+ * The zone is the **app's** boundary, exactly like the date: convert once on
+ * the way in ({@link foldFromTemporal} takes a `ZonedDateTime` and drops it to
+ * the day and, here, the caller reads its `.hour`/`.minute`), and the calendar
+ * never has to know.
+ *
+ * Times compare **lexicographically** like the dates do — `"09:00" < "14:30"` —
+ * which is what makes overlap detection a string comparison rather than a
+ * parse. `24:00` is legal and means the end of the day, so a span that runs to
+ * midnight has an end greater than its start.
+ */
+/** Minutes in a day — the grid's own unit. */
+const FOLD_MINUTES_PER_DAY = 1440;
+/** `HH:mm`, structurally. Rejects `9:00`, `09:00:00`, junk suffixes. */
+const TIME_PATTERN = /^\d{2}:\d{2}$/;
+/**
+ * Whether `value` is a well-formed **and real** wall-clock time.
+ *
+ * The shape check is not enough on its own: `"10:75"` and `"23:60"` both match
+ * `HH:mm` and both sit under 1440 minutes, so a range check on the total would
+ * wave them through. The fields are validated separately — minutes `00`–`59`,
+ * hours `00`–`23`, plus the single `24:00` that means the end of the day — the
+ * same rigour {@link foldIsCalendarDate} applies to `2026-02-30`.
+ */
+function foldIsCalendarTime(value) {
+    if (!TIME_PATTERN.test(value)) {
+        return false;
+    }
+    const hours = Number(value.slice(0, 2));
+    const minutes = Number(value.slice(3, 5));
+    if (minutes > 59 || hours > 24) {
+        return false;
+    }
+    // Hour 24 exists only as `24:00`, the exclusive end of the day.
+    return hours < 24 || minutes === 0;
+}
+/** Minutes since midnight — the number the grid positions on. */
+function foldToMinutes(time) {
+    return Number(time.slice(0, 2)) * 60 + Number(time.slice(3, 5));
+}
+/** Minutes since midnight back to `HH:mm`, clamped to the day. */
+function foldFromMinutes(minutes) {
+    const clamped = Math.max(0, Math.min(FOLD_MINUTES_PER_DAY, Math.round(minutes)));
+    const hours = Math.floor(clamped / 60);
+    const rest = clamped % 60;
+    return `${hours < 10 ? "0" : ""}${hours}:${rest < 10 ? "0" : ""}${rest}`;
+}
+/** `time` shifted by `minutes`, clamped to the day rather than wrapping. */
+function foldAddMinutes(time, minutes) {
+    return foldFromMinutes(foldToMinutes(time) + minutes);
+}
+
+/**
+ * Every date format the calendar family renders, in one table.
+ *
+ * They used to be five components' worth of inline `Intl.DateTimeFormat`
+ * option bags — which is how the day view ended up asking for
+ * `{ weekday: 'long', month: 'long' }` and printing "Saturday May", a phrase in
+ * no locale. Side by side they can be read against each other, and a consumer
+ * can see what a locale is actually asked for.
+ *
+ * `timeZone: 'UTC'` is not optional: a plain date is bridged to `Date` at UTC
+ * midnight, so formatting it in the local zone would print the day before for
+ * anyone west of Greenwich.
+ *
+ * `calendar: 'gregory'` is pinned for the same reason `timeZone` is: the grid
+ * counts days and groups months in the Gregorian calendar (that is what a
+ * `YYYY-MM-DD` string *is*), so the names beside those numbers must be Gregorian
+ * too. Left to the locale's own default, `ar-SA` would print Hijri month names
+ * over Gregorian day numbers on rows that break on Gregorian months — a
+ * calendar contradicting itself. The family is Gregorian, localised into the
+ * language of the locale, not into its calendar system; a non-Gregorian layout
+ * is a separate widget this one does not pretend to be.
+ */
+const FOLD_CALENDAR_FORMATS = {
+    /** Whole date, spelled out — accessible names. */
+    dateFull: { dateStyle: "long" },
+    /** Whole date **with its weekday** — a period title, where it is the heading. */
+    dateFullWeekday: { dateStyle: "full" },
+    /** `18 May 2026` — the ends of a week, which `formatRange` then joins. */
+    dayMonthYear: { day: "numeric", month: "long", year: "numeric" },
+    /** `Mon` — grid column headers. */
+    weekdayShort: { weekday: "short" },
+    /** `Monday` — a day heading, where there is room. */
+    weekdayLong: { weekday: "long" },
+    /** `May` — beside a day number, never on its own with a weekday. */
+    monthLong: { month: "long" },
+    /** `May` (abbreviated) — the agenda rail, where width is scarce. */
+    monthShort: { month: "short" },
+    /** `May 2026` — a period title. */
+    monthYear: { month: "long", year: "numeric" },
+    /** `18 May` — a span's ends, which `formatRange` then joins. */
+    dayMonthShort: { day: "numeric", month: "short" },
+    /** `09:00` in France, `9:00 AM` in the US — an hour down the grid's gutter. */
+    hourMark: { hour: "numeric", minute: "2-digit" },
+};
+/**
+ * Formatters are expensive to build and perfectly reusable, so they are cached
+ * per locale + format. The cache is module-level on purpose: two calendars in
+ * the same locale should not each pay for their own.
+ */
+const CACHE$1 = new Map();
+/** The `Intl` formatter for one locale and format, built at most once. */
+function foldCalendarFormatter(locale, format, override) {
+    const options = { ...FOLD_CALENDAR_FORMATS[format], ...override };
+    const cacheKey = override === undefined
+        ? `${locale ?? ""}|${format}`
+        : `${locale ?? ""}|${format}|${JSON.stringify(options)}`;
+    const cached = CACHE$1.get(cacheKey);
+    if (cached !== undefined) {
+        return cached;
+    }
+    const built = new Intl.DateTimeFormat(locale, {
+        ...options,
+        timeZone: "UTC",
+        calendar: "gregory",
+    });
+    CACHE$1.set(cacheKey, built);
+    return built;
+}
+/** One plain date, formatted. */
+function foldFormatDate(date, locale, format, override) {
+    return foldCalendarFormatter(locale, format, override).format(foldToNativeDate(date));
+}
+/**
+ * A span, collapsed to one date when it covers a single day — `Intl`'s own
+ * range formatter does that, and picks the locale's separator.
+ */
+function foldFormatRange(from, to, locale, format, override) {
+    return foldCalendarFormatter(locale, format, override).formatRange(foldToNativeDate(from), foldToNativeDate(to));
+}
+/** A day with no meaning of its own, used only to hang a wall-clock time on. */
+const TIME_ANCHOR = Date.UTC(2026, 0, 1);
+/**
+ * A wall-clock time in the locale's own convention — `14:00` in France, `2 PM`
+ * in the United States. Formatted at UTC on a throwaway date, because the time
+ * has no zone and no day: only its hours and minutes are real.
+ */
+function foldFormatTime(time, locale, override) {
+    const at = new Date(TIME_ANCHOR + foldToMinutes(time) * 60_000);
+    return foldCalendarFormatter(locale, "hourMark", override).format(at);
+}
+
+/** The English defaults — the base every override merges onto. */
+const FOLD_CALENDAR_DEFAULT_LABELS = {
+    grid: "Calendar",
+    today: "today",
+    moreEvents: (count) => `+${count} more`,
+    eventCount: (count) => (count === 1 ? "1 event" : `${count} events`),
+    hiddenCount: (count) => `${count} not shown`,
+    allDay: "All day",
+    hours: "Hours",
+    weekNumberShort: "Wk",
+    weekNumber: (week) => `Week ${week}`,
+    emptyDay: "Nothing on this day.",
+    emptyRange: "Nothing in this range.",
+    todayAction: "Today",
+    previousPeriod: "Previous",
+    nextPeriod: "Next",
+    viewSwitch: "Calendar view",
+    viewMonth: "Month",
+    viewWeek: "Week",
+    viewDay: "Day",
+    viewList: "List",
+    agenda: "Agenda",
+    agendaModes: "Agenda slice",
+    agendaTodo: "To handle",
+    agendaUpcoming: "Upcoming",
+    agendaEmptyTodo: "Nothing to handle — all up to date.",
+    agendaEmptyUpcoming: "Nothing coming up.",
+    agendaMore: (days) => (days === 1 ? "1 more day" : `${days} more days`),
+    relativeToday: "Today",
+    relativeTomorrow: "Tomorrow",
+    collapse: "Collapse",
+    expand: "Expand",
+    sourceFilter: "Filter by source",
+    sourceState: (label, shown) => `${label}, ${shown ? "shown" : "hidden"}`,
+};
+/** App-wide calendar labels; defaults to English. */
+const FOLD_CALENDAR_LABELS = new InjectionToken("FOLD_CALENDAR_LABELS", { factory: () => FOLD_CALENDAR_DEFAULT_LABELS });
+/** Provide calendar labels for the whole app, merged over the English defaults. */
+function provideFoldCalendarLabels(labels) {
+    return {
+        provide: FOLD_CALENDAR_LABELS,
+        useValue: { ...FOLD_CALENDAR_DEFAULT_LABELS, ...labels },
+    };
+}
+
+/** ISO-8601 day numbers, `1` = Monday … `7` = Sunday — what `Intl` returns. */
+const ISO_DAY = [
+    "mon",
+    "tue",
+    "wed",
+    "thu",
+    "fri",
+    "sat",
+    "sun",
+];
+/** What a runtime that cannot answer gets: the most common week in the world. */
+const FOLD_FALLBACK_WEEK_INFO = {
+    weekStartsOn: "mon",
+    weekendDays: ["sat", "sun"],
+};
+const CACHE = new Map();
+/** `1`–`7` → a weekday, ignoring anything out of range. */
+function toWeekday(isoDay) {
+    if (typeof isoDay !== "number") {
+        return null;
+    }
+    return ISO_DAY[isoDay - 1] ?? null;
+}
+/** A no-argument method, narrowed without an assertion. */
+function isThunk(value) {
+    return typeof value === "function";
+}
+/** The `{ firstDay, weekend }` shape, whichever way the runtime exposes it. */
+function readWeekInfo(locale) {
+    if ("getWeekInfo" in locale) {
+        const method = locale.getWeekInfo;
+        if (isThunk(method)) {
+            return method.call(locale);
+        }
+    }
+    if ("weekInfo" in locale) {
+        return locale.weekInfo;
+    }
+    return null;
+}
+/** Narrows the probed value without trusting its shape. */
+function parseWeekInfo(raw) {
+    if (typeof raw !== "object" || raw === null) {
+        return null;
+    }
+    const firstDay = "firstDay" in raw ? toWeekday(raw.firstDay) : null;
+    const weekendRaw = "weekend" in raw ? raw.weekend : null;
+    const weekend = Array.isArray(weekendRaw)
+        ? weekendRaw
+            .map(toWeekday)
+            .filter((day) => day !== null)
+        : [];
+    if (firstDay === null) {
+        return null;
+    }
+    return {
+        weekStartsOn: firstDay,
+        weekendDays: weekend.length > 0 ? weekend : FOLD_FALLBACK_WEEK_INFO.weekendDays,
+    };
+}
+/**
+ * The week conventions of `locale` — its first day and its weekend.
+ *
+ * `undefined` asks the runtime for its own locale, which is what a calendar
+ * with no `locale` input is already formatting in.
+ */
+function foldLocaleWeekInfo(locale) {
+    const tag = locale ?? new Intl.DateTimeFormat().resolvedOptions().locale;
+    const cached = CACHE.get(tag);
+    if (cached !== undefined) {
+        return cached;
+    }
+    let info = FOLD_FALLBACK_WEEK_INFO;
+    try {
+        info = parseWeekInfo(readWeekInfo(new Intl.Locale(tag))) ?? info;
+    }
+    catch {
+        // A malformed tag is the caller's bug, not a reason to render nothing.
+        info = FOLD_FALLBACK_WEEK_INFO;
+    }
+    CACHE.set(tag, info);
+    return info;
+}
+
+/**
+ * The three things every calendar view needs and none of them is about: its
+ * labels, its locale, and the chip template a consumer may have projected.
+ *
+ * Applied through `hostDirectives`, so `locale` and `labels` are still ordinary
+ * inputs on `<fold-calendar-month>`, `<fold-calendar-week>` and the rest — the
+ * consumer sees no difference, and the five views stop carrying five identical
+ * copies of the same eight lines.
+ *
+ * Internal — a view exposes it, it is never applied by hand.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   hostDirectives: [
+ *     { directive: FoldCalendarChromeDirective, inputs: ['locale', 'labels'] },
+ *   ],
+ * })
+ * export class FoldCalendarWeekComponent<T = unknown> {
+ *   protected readonly chrome = inject(FoldCalendarChromeDirective);
+ * }
+ * ```
+ */
+class FoldCalendarChromeDirective {
+    /** BCP-47 tag driving every `Intl` name; omitted, the runtime default. */
+    locale = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
+    /** Per-instance label overrides, merged over the app-wide (or English) set. */
+    labels = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "labels" }] : /* istanbul ignore next */ []));
+    /**
+     * Per-instance `Intl` option overrides, merged over
+     * {@link FOLD_CALENDAR_FORMATS}. Labels let a locale translate; this lets it
+     * **reformat** — a numeric weekday header, a four-digit year, a narrow month.
+     */
+    formats = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "formats" }] : /* istanbul ignore next */ []));
+    injectedLabels = inject(FOLD_CALENDAR_LABELS);
+    projectedEvent = contentChild(FoldCalendarEventDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "projectedEvent" }] : /* istanbul ignore next */ []));
+    /** Effective labels — the app-wide (or English) set, with `labels` on top. */
+    l = computed(() => ({
+        ...this.injectedLabels,
+        ...this.labels(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "l" }] : /* istanbul ignore next */ []));
+    /** The custom chip template, when one is projected. */
+    eventContent = computed(() => this.projectedEvent()?.template ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "eventContent" }] : /* istanbul ignore next */ []));
+    /**
+     * What this locale says its week looks like — the default behind
+     * `weekStartsOn` and `weekendDays`, so a calendar is right in Cairo and
+     * Chicago without the caller having to know either.
+     */
+    weekInfo = computed(() => foldLocaleWeekInfo(this.locale()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekInfo" }] : /* istanbul ignore next */ []));
+    /** The anchor a view should use: the caller's, else the locale's. */
+    anchor(explicit) {
+        return explicit ?? this.weekInfo().weekStartsOn;
+    }
+    /** The weekend a view should shade: the caller's, else the locale's. */
+    weekend(explicit) {
+        return explicit ?? this.weekInfo().weekendDays;
+    }
+    /** One date, in this view's locale and its format overrides. */
+    format(date, format) {
+        return foldFormatDate(date, this.locale(), format, this.formats()?.[format]);
+    }
+    /** A wall-clock time, in this view's locale (24-hour, or AM/PM). */
+    formatTime(time) {
+        return foldFormatTime(time, this.locale(), this.formats()?.hourMark);
+    }
+    /** A span, in this view's locale and its format overrides. */
+    formatRange(from, to, format) {
+        return foldFormatRange(from, to, this.locale(), format, this.formats()?.[format]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarChromeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.8", type: FoldCalendarChromeDirective, isStandalone: true, inputs: { locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, formats: { classPropertyName: "formats", publicName: "formats", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "projectedEvent", first: true, predicate: FoldCalendarEventDirective, descendants: true, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarChromeDirective, decorators: [{
+            type: Directive,
+            args: [{ standalone: true }]
+        }], propDecorators: { locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], formats: [{ type: i0.Input, args: [{ isSignal: true, alias: "formats", required: false }] }], projectedEvent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FoldCalendarEventDirective), { isSignal: true }] }] } });
+
+/**
+ * Where a key press moves the focused day. Split out of the component because
+ * "what does ArrowDown mean on a calendar" is a pure question about dates, and
+ * answering it here means it can be tested without a grid, a DOM or a TestBed.
+ *
+ * {@link foldCalendarNextFocus} is public: it is the other half of the geometry
+ * tier, and a hand-rolled date grid owes its users the same arrow keys as the
+ * built-in one. {@link foldFocusDayCell} stays internal — it reads a
+ * `data-fold-day` attribute this package writes, and exporting it would freeze
+ * that attribute into the public contract.
+ */
+/**
+ * The day `key` moves focus to from `from`, or `null` when the key is not a
+ * grid-navigation key and the component should leave the event alone.
+ *
+ * The mapping is the ARIA grid pattern applied to a date axis: horizontal keys
+ * step a day, vertical keys step a **week** (the column stays put, which is the
+ * whole point of a 7-wide grid), `Home`/`End` snap to the week's bounds, and
+ * `PageUp`/`PageDown` page by month.
+ */
+function foldCalendarNextFocus(key, from, weekStartsOn = "mon") {
+    switch (key) {
+        case "ArrowLeft":
+            return foldAddDays(from, -1);
+        case "ArrowRight":
+            return foldAddDays(from, 1);
+        case "ArrowUp":
+            return foldAddDays(from, -7);
+        case "ArrowDown":
+            return foldAddDays(from, 7);
+        case "Home":
+            return foldStartOfWeek(from, weekStartsOn);
+        case "End":
+            return foldAddDays(foldStartOfWeek(from, weekStartsOn), 6);
+        case "PageUp":
+            return foldAddMonths(from, -1);
+        case "PageDown":
+            return foldAddMonths(from, 1);
+        default:
+            return null;
+    }
+}
+/**
+ * Focuses the cell for `date` inside `grid`, reporting whether it was there to
+ * focus.
+ *
+ * A `false` is the signal that the target lies outside the rendered grid — the
+ * caller pages the calendar and defers the focus until the new cells exist.
+ * Taking the root as an argument keeps this free of `document` (so it is a
+ * no-op under SSR) and means there is exactly **one** answer to "which element
+ * is the grid" — looking it up from the event target as well gave two.
+ */
+function foldFocusDayCell(grid, date) {
+    // A date can reach this from an input, and it is interpolated into a
+    // selector: anything that is not a plain date is a `SyntaxError` waiting to
+    // happen, so it is refused rather than escaped.
+    if (grid === null || !foldIsCalendarDate(date)) {
+        return false;
+    }
+    const cell = grid.querySelector(`[data-fold-day="${date}"]`);
+    if (cell instanceof HTMLElement) {
+        cell.focus();
+        return true;
+    }
+    return false;
+}
+
+class FoldCalendarRovingFocus {
+    host;
+    /** The day holding focus, once the user has moved it. */
+    focused = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    /** A day to focus once the grid has re-rendered around a new period. */
+    deferred = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "deferred" }] : /* istanbul ignore next */ []));
+    constructor(host) {
+        this.host = host;
+    }
+    /**
+     * The cell carrying the tab stop: the focused day while it is on screen,
+     * else the host's fallback — so paging never strands the grid without one.
+     */
+    activeDate = computed(() => {
+        const focused = this.focused();
+        if (focused !== null && this.host.dates().has(focused)) {
+            return focused;
+        }
+        return this.host.fallback();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeDate" }] : /* istanbul ignore next */ []));
+    tabIndexFor(date) {
+        return date === this.activeDate() ? 0 : -1;
+    }
+    /** A cell took focus — by keyboard, or by a click. */
+    onFocus(date) {
+        this.focused.set(date);
+    }
+    /**
+     * Applies `key` to the date axis, reporting whether it was a navigation key.
+     *
+     * The move happens in place when the target is on screen; when it is not, the
+     * host pages to it and the focus is deferred until the new cells exist.
+     */
+    move(key, from) {
+        const next = foldCalendarNextFocus(key, from, this.host.weekStartsOn());
+        if (next === null) {
+            return false;
+        }
+        this.focused.set(next);
+        if (!foldFocusDayCell(this.host.root(), next)) {
+            this.host.page(next);
+            this.deferred.set(next);
+            this.focusAfterRender();
+        }
+        return true;
+    }
+    /**
+     * Focuses the deferred day once the grid has rendered around the new period.
+     *
+     * `afterNextRender` rather than an `effect`: the ordering of an effect against
+     * the DOM it wants to touch is not contracted and has already changed between
+     * Angular versions, and this way the SSR no-op is explicit. The request is
+     * **consumed**, or repeating the exact same move would be a no-op on the
+     * signal and drop focus onto `<body>`.
+     */
+    focusAfterRender() {
+        afterNextRender(() => {
+            const target = untracked(this.deferred);
+            if (target === null) {
+                return;
+            }
+            this.deferred.set(null);
+            foldFocusDayCell(this.host.root(), target);
+        }, { injector: this.host.injector });
+    }
+}
+
+/** A day cell, with every flag a view needs to style it already resolved. */
+function foldMakeDay(epochDay, context) {
+    const date = foldFromEpochDay(epochDay);
+    return {
+        date,
+        dayOfMonth: Number(date.slice(8, 10)),
+        inMonth: date.slice(0, 7) === context.month,
+        isToday: date === context.today,
+        isWeekend: foldIsWeekend(date, context.weekendDays),
+        eventCount: context.counts.get(epochDay) ?? 0,
+        hiddenCount: context.hidden.get(epochDay) ?? 0,
+    };
+}
+/**
+ * How many events cover each day of `[from, to]`, in a single pass.
+ *
+ * A view that asked each cell "which events are on you?" would re-scan the
+ * whole feed once per cell — 35 filters per change-detection cycle on a month
+ * grid. Walking the events instead costs one pass, and the count a cell needs
+ * is then already there.
+ */
+function foldCountByDay(events, fromDay, toDay) {
+    const counts = new Map();
+    for (const event of events) {
+        const a = foldToEpochDay(event.start);
+        const b = foldToEpochDay(event.end);
+        // Reversed ranges are normalised by the layout, so they are counted the
+        // same way here — otherwise a band would render on days reporting zero.
+        const start = Math.max(fromDay, Math.min(a, b));
+        const end = Math.min(toDay, Math.max(a, b));
+        for (let day = start; day <= end; day += 1) {
+            counts.set(day, (counts.get(day) ?? 0) + 1);
+        }
+    }
+    return counts;
+}
+/** No days dropped — the column views' `hidden` map. */
+const FOLD_NO_HIDDEN_DAYS = new Map();
+/** The weekend a caller left unset. */
+function foldWeekendOr(weekendDays) {
+    return weekendDays ?? FOLD_DEFAULT_WEEKEND_DAYS;
+}
+
+/**
+ * Packing spans into lanes across a row of days — the month grid's week row,
+ * and the time grid's all-day strip, which are the same problem: spans that may
+ * cross the row, a lane budget, and an honest account of what did not fit.
+ *
+ * Shared rather than copied, because "a hidden span is charged to every day it
+ * would have covered" is a rule that has to mean the same thing in both.
+ */
+/** The columns a span occupies once clipped to its week row. */
+function columnsOf(span, weekStartDay, dayCount) {
+    return {
+        startColumn: Math.max(0, span.startDay - weekStartDay),
+        endColumn: Math.min(dayCount - 1, span.endDay - weekStartDay),
+    };
+}
+/** One span placed in a lane, or `null` when the budget is spent. */
+function placeSpan(span, week, columns, laneEnds, maxLanes) {
+    const { startColumn, endColumn } = columns;
+    // First lane whose occupant ends before this span starts; else a fresh one.
+    const reusable = laneEnds.findIndex((end) => end < startColumn);
+    const lane = reusable === -1 ? laneEnds.length : reusable;
+    if (lane >= maxLanes) {
+        return null;
+    }
+    laneEnds[lane] = endColumn;
+    const weekEndDay = week.startDay + week.dayCount - 1;
+    const startsHere = span.startDay >= week.startDay && !span.openStart;
+    const endsHere = span.endDay <= weekEndDay && !span.openEnd;
+    return {
+        key: `${span.key}@${week.start}`,
+        event: span.event,
+        startColumn,
+        endColumn,
+        lane,
+        continuesBefore: !startsHere,
+        continuesAfter: !endsHere,
+        groupSize: span.groupSize,
+        // A half-day edge only means something on the segment holding the real edge.
+        ...(startsHere && span.event.startHalfDay !== undefined
+            ? { startHalfDay: span.event.startHalfDay }
+            : {}),
+        ...(endsHere && span.event.endHalfDay !== undefined
+            ? { endHalfDay: span.event.endHalfDay }
+            : {}),
+    };
+}
+/**
+ * Packs a row's candidates into lanes, and records what overflowed **per day**
+ * — a row-wide total would say a week is crowded without saying which day to
+ * look at, so each date carries its own count.
+ */
+function foldPackRow(candidates, week, maxLanes, hidden) {
+    const laneEnds = [];
+    const bands = [];
+    let hiddenCount = 0;
+    for (const span of candidates) {
+        const columns = columnsOf(span, week.startDay, week.dayCount);
+        const band = placeSpan(span, week, columns, laneEnds, maxLanes);
+        if (band !== null) {
+            bands.push(band);
+            continue;
+        }
+        hiddenCount += 1;
+        // A hidden span is missing from every day it would have covered.
+        for (let column = columns.startColumn; column <= columns.endColumn; column += 1) {
+            const day = week.startDay + column;
+            hidden.set(day, (hidden.get(day) ?? 0) + 1);
+        }
+    }
+    return { bands, hiddenCount };
+}
+
+/**
+ * How loudly a tone asks to be looked at. A collapsed group shows its most
+ * severe member, so an alert inside a group is never hidden behind a member
+ * that happens to come first.
+ */
+const TONE_SEVERITY = {
+    alert: 4,
+    warning: 3,
+    success: 2,
+    neutral: 1,
+    muted: 0,
+};
+/** Severity of an event's tone, `neutral` when it declares none. */
+function severityOf(event) {
+    return TONE_SEVERITY[event.tone ?? "neutral"];
+}
+/**
+ * The span a single event occupies, with a reversed range put back in order.
+ *
+ * `end < start` is a caller bug, and left alone it renders **twice, wrongly**:
+ * the grid's `grid-column: 5 / 2` is silently swapped by CSS so a band covers
+ * days it does not cover, while every other view — which asks
+ * `start <= day && end >= day` — reports the event as absent. Swapping makes
+ * the two agree, and the dev warning names the event rather than leaving the
+ * contradiction to be discovered in a screenshot.
+ */
+function spanOf(event, key) {
+    const reversed = event.end < event.start;
+    if (reversed && isDevMode()) {
+        console.warn(`[fold-calendar] event "${event.id}" ends (${event.end}) before it starts (${event.start}); treating the range as reversed.`);
+    }
+    const start = reversed ? event.end : event.start;
+    const end = reversed ? event.start : event.end;
+    return {
+        key,
+        event,
+        start,
+        end,
+        startDay: foldToEpochDay(start),
+        endDay: foldToEpochDay(end),
+        groupSize: 1,
+        openStart: event.openStart === true,
+        openEnd: event.openEnd === true,
+    };
+}
+/** Warns once per render when two events share an id. */
+function warnDuplicateIds(events) {
+    const seen = new Set();
+    for (const event of events) {
+        if (seen.has(event.id)) {
+            console.warn(`[fold-calendar] two events share the id "${event.id}". Ids must be unique per render — use \`groupId\` to collapse events on purpose.`);
+            return;
+        }
+        seen.add(event.id);
+    }
+}
+/**
+ * Merges a member into the span standing for its group: the **union** of the
+ * ranges (a group chip stopping short of a member it stands for would be a
+ * lie), open on either side if **any** member is, and represented by the most
+ * severe member so tone, icon, label and source all come from one event that
+ * really exists.
+ */
+function mergeMember(span, member) {
+    const takeover = severityOf(member.event) > severityOf(span.event);
+    const opensFirst = span.startDay <= member.startDay;
+    const endsLast = span.endDay >= member.endDay;
+    return {
+        key: span.key,
+        event: takeover ? member.event : span.event,
+        start: opensFirst ? span.start : member.start,
+        end: endsLast ? span.end : member.end,
+        startDay: opensFirst ? span.startDay : member.startDay,
+        endDay: endsLast ? span.endDay : member.endDay,
+        groupSize: span.groupSize + 1,
+        openStart: span.openStart || member.openStart,
+        openEnd: span.openEnd || member.openEnd,
+    };
+}
+/**
+ * One span per event, except where `groupId` asks for a collapsed chip.
+ *
+ * Identity keys carry the event's position, so two events that share an id stay
+ * two spans: merging them would drop one silently, which is not something a
+ * duplicated key should be able to do. Insertion order is preserved, so the
+ * caller's ordering still decides ties.
+ */
+function foldCollapseGroups(events) {
+    if (isDevMode()) {
+        warnDuplicateIds(events);
+    }
+    const spans = new Map();
+    events.forEach((event, index) => {
+        const key = event.groupId === undefined
+            ? `event:${index}:${event.id}`
+            : `group:${event.groupId}`;
+        const incoming = spanOf(event, key);
+        const existing = spans.get(key);
+        spans.set(key, existing === undefined ? incoming : mergeMember(existing, incoming));
+    });
+    return [...spans.values()];
+}
+
+/** Columns in a week row. */
+const DAYS_PER_WEEK$1 = 7;
+/** Rows a fixed-height month grid always emits. */
+const FIXED_WEEK_COUNT = 6;
+/** Lanes a week row stacks when the caller does not say. */
+const DEFAULT_MAX_LANES = 3;
+/**
+ * Every row's candidates, in one pass over the feed.
+ *
+ * Filtering the whole feed once per row is `O(rows × N)` and, worse, compares
+ * strings; walking the feed once and dropping each span into the rows it
+ * touches is `O(N)` on integers. At 5 000 events this part of the layout went
+ * from 12.6 ms to 1.9 ms.
+ *
+ * Each row is then ordered the way a reader scans it: earliest start first, and
+ * on a tie the longest span first, so the bars crossing the most days settle
+ * into the top lanes.
+ */
+function bucketByRow(spans, firstRowDay, rowCount) {
+    const rows = Array.from({ length: rowCount }, () => []);
+    const lastDay = firstRowDay + rowCount * DAYS_PER_WEEK$1 - 1;
+    for (const span of spans) {
+        if (span.endDay < firstRowDay || span.startDay > lastDay) {
+            continue;
+        }
+        const from = Math.max(0, Math.floor((span.startDay - firstRowDay) / DAYS_PER_WEEK$1));
+        const to = Math.min(rowCount - 1, Math.floor((span.endDay - firstRowDay) / DAYS_PER_WEEK$1));
+        for (let row = from; row <= to; row += 1) {
+            rows[row]?.push(span);
+        }
+    }
+    for (const row of rows) {
+        row.sort((a, b) => a.startDay !== b.startDay
+            ? a.startDay - b.startDay
+            : b.endDay - b.startDay - (a.endDay - a.startDay));
+    }
+    return rows;
+}
+/**
+ * Lanes a row may stack, as one number the whole grid agrees on.
+ *
+ * The clamp lives here alone: a component that also clamped would be a second
+ * copy of the invariant, and the copy that forgot `NaN` would disable the lane
+ * budget entirely (`lane >= NaN` is never true) while the grid template turned
+ * `repeat(NaN, …)` into a dropped rule.
+ */
+function foldClampLanes(value) {
+    if (value === undefined || !Number.isFinite(value)) {
+        return DEFAULT_MAX_LANES;
+    }
+    return Math.max(0, Math.trunc(value));
+}
+/** The grid's own window — whole weeks, padded out when `fixedWeeks` asks. */
+function gridBounds(options) {
+    const weekStartsOn = options.weekStartsOn ?? "mon";
+    const firstRowDay = foldToEpochDay(foldStartOfWeek(foldStartOfMonth(options.month), weekStartsOn));
+    const lastRowDay = foldToEpochDay(foldStartOfWeek(foldEndOfMonth(options.month), weekStartsOn));
+    const naturalRows = (lastRowDay - firstRowDay) / DAYS_PER_WEEK$1 + 1;
+    return {
+        firstRowDay,
+        rowCount: options.fixedWeeks === true
+            ? Math.max(FIXED_WEEK_COUNT, naturalRows)
+            : naturalRows,
+    };
+}
+/**
+ * Lays a month out as week rows with their events already packed into lanes.
+ *
+ * The grid runs from the week containing the 1st to the week containing the
+ * last day, so it always starts and ends on whole weeks; `fixedWeeks` pads it
+ * to six rows. Events outside that window are dropped, and an event crossing a
+ * week boundary yields one band per week it touches.
+ *
+ * An unparseable `month` yields **no rows** rather than a grid of `Invalid
+ * Date` cells, with a dev-mode warning naming the value.
+ */
+function foldBuildMonthGrid(events, options) {
+    if (!foldIsCalendarDate(options.month)) {
+        if (isDevMode()) {
+            console.warn(`[fold-calendar] "${options.month}" is not a YYYY-MM-DD date; the grid is empty.`);
+        }
+        return [];
+    }
+    const maxLanes = foldClampLanes(options.maxLanes);
+    const { firstRowDay, rowCount } = gridBounds(options);
+    const rows = bucketByRow(foldCollapseGroups(events), firstRowDay, rowCount);
+    const hidden = new Map();
+    const packed = rows.map((candidates, row) => {
+        const week = {
+            startDay: firstRowDay + row * DAYS_PER_WEEK$1,
+            start: foldFromEpochDay(firstRowDay + row * DAYS_PER_WEEK$1),
+            dayCount: DAYS_PER_WEEK$1,
+        };
+        return { week, ...foldPackRow(candidates, week, maxLanes, hidden) };
+    });
+    const context = {
+        month: options.month.slice(0, 7),
+        today: options.today,
+        weekendDays: foldWeekendOr(options.weekendDays),
+        counts: foldCountByDay(events, firstRowDay, firstRowDay + rowCount * DAYS_PER_WEEK$1 - 1),
+        hidden,
+    };
+    return packed.map((row) => ({
+        start: row.week.start,
+        days: buildDays(row.week.startDay, context),
+        bands: row.bands,
+        hiddenCount: row.hiddenCount,
+    }));
+}
+/** The seven cells of one week row. */
+function buildDays(weekStartDay, context) {
+    return Array.from({ length: DAYS_PER_WEEK$1 }, (_unused, offset) => foldMakeDay(weekStartDay + offset, context));
+}
+
+/**
+ * Replaces the **inside of a month day cell** — by default just the day number.
+ *
+ * This is the hook for everything the calendar cannot know: a holiday marker, a
+ * closure, "3/8 staffed", a price. The cell itself (the button, its focus
+ * behaviour, its accessible name) stays the calendar's job.
+ *
+ * ```html
+ * <ng-template foldCalendarDay let-day>
+ *   <span>{{ day.dayOfMonth }}</span>
+ *   @if (closed(day.date)) { <fold-icon name="lock" size="xs" /> }
+ * </ng-template>
+ * ```
+ *
+ * @selector `ng-template[foldCalendarDay]`
+ */
+class FoldCalendarDayDirective {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        // Compile-time only — Angular never calls this; the narrowing is the point.
+        return context !== undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarDayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: FoldCalendarDayDirective, isStandalone: true, selector: "ng-template[foldCalendarDay]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarDayDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "ng-template[foldCalendarDay]", standalone: true }]
+        }] });
+/**
+ * Replaces the **day heading** of the agenda rail — by default a big day number
+ * with a relative name beside it. Where an app puts a per-day count, a total,
+ * or a quick action.
+ *
+ * @selector `ng-template[foldCalendarHeading]`
+ */
+class FoldCalendarHeadingDirective {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        // Compile-time only — Angular never calls this; the narrowing is the point.
+        return context !== undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarHeadingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: FoldCalendarHeadingDirective, isStandalone: true, selector: "ng-template[foldCalendarHeading]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarHeadingDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "ng-template[foldCalendarHeading]", standalone: true }]
+        }] });
+/**
+ * Replaces the toolbar's **period title** — by default an `<h2>` holding
+ * `foldViewTitle()`. Project one to change the wording, or to give the title a
+ * heading level that fits the page's outline.
+ *
+ * @selector `ng-template[foldCalendarTitle]`
+ */
+class FoldCalendarTitleDirective {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        // Compile-time only — Angular never calls this; the narrowing is the point.
+        return context !== undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: FoldCalendarTitleDirective, isStandalone: true, selector: "ng-template[foldCalendarTitle]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarTitleDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "ng-template[foldCalendarTitle]", standalone: true }]
+        }] });
+/**
+ * Replaces the month view's **`+N` chip** — by default a small text button.
+ * Where an app puts an avatar stack, or the trigger of a "see all" popover.
+ *
+ * @selector `ng-template[foldCalendarOverflow]`
+ */
+class FoldCalendarOverflowDirective {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        // Compile-time only — Angular never calls this; the narrowing is the point.
+        return context !== undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarOverflowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: FoldCalendarOverflowDirective, isStandalone: true, selector: "ng-template[foldCalendarOverflow]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarOverflowDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "ng-template[foldCalendarOverflow]", standalone: true }]
+        }] });
+
+/** A Monday, used only to walk seven weekday names out of `Intl`. */
+const WEEKDAY_SAMPLE = "2026-01-05";
+/** Keys that activate a day cell — the ones a `<button>` would have handled. */
+const ACTIVATION_KEYS = new Set(["Enter", " ", "Spacebar"]);
+/**
+ * `<fold-calendar-month>` — a month grid where events span the days they cover.
+ *
+ * The grid is a **date axis**: seven columns of whole days, and over them a
+ * layer of bands, each stretching from the column its event starts on to the
+ * column it ends on. An event crossing a week boundary is drawn once per week
+ * with an open edge on the side that continues, so a three-week holiday reads
+ * as one thing rather than twenty-one chips.
+ *
+ * Dates are plain `YYYY-MM-DD` strings — see `calendar-date.ts` for why that,
+ * and not `Date`.
+ *
+ * ## Inputs
+ * | Input          | Type                          | Default       | Meaning |
+ * |----------------|-------------------------------|---------------|---------|
+ * | `month`        | `FoldCalendarDate`            | —             | **Two-way.** Any date in the month on display; keyboard paging writes back. |
+ * | `events`       | `FoldCalendarEvent<T>[]`      | `[]`          | What to plot. Anything outside the grid is ignored. |
+ * | `today`        | `FoldCalendarDate`            | —             | The day to mark. Omitted, nothing is marked — pass `foldToday()`. |
+ * | `weekStartsOn` | `FoldWeekday`                 | the locale's   | Which day opens the row — `Intl.Locale` knows, so it is only an override. |
+ * | `weekendDays`  | `FoldWeekday[]`               | the locale's   | Which days are shaded — a separate fact from the anchor, and also in the locale. |
+ * | `showWeekNumbers` | `boolean`                  | `false`       | An ISO week number in a leading column. |
+ * | `maxLanes`     | `number`                      | `3`           | Bands a week stacks before the rest collapse into overflow chips. |
+ * | `fixedWeeks`   | `boolean`                     | `false`       | Always six rows, so the grid keeps one height across months. |
+ * | `dayModifiers` | `(day) => string[]`           | —             | Extra names per cell, emitted as `data-fold-day-modifiers`. |
+ * | `locale`       | `string`                      | runtime       | Drives month/weekday names through `Intl`. |
+ * | `labels`       | `Partial<FoldCalendarLabels>` | —             | Per-instance overrides of the chrome strings. |
+ *
+ * ## Outputs
+ * | Output          | Payload                | Fires on |
+ * |-----------------|------------------------|----------|
+ * | `dayClick`      | `FoldCalendarDate`     | A day cell activated by click, `Enter` or `Space`. |
+ * | `eventClick`    | `FoldCalendarEvent<T>` | A band clicked. Grouped bands emit their representative. |
+ * | `overflowClick` | `FoldCalendarDate`     | A `+N` chip — the **day** whose events overflowed, so the caller knows which one to open. |
+ *
+ * ## Templates
+ * | Directive              | Replaces |
+ * |------------------------|----------|
+ * | `foldCalendarEvent`    | The inside of a band — icon + label + count. |
+ * | `foldCalendarDay`      | The inside of a day cell — the day number. |
+ * | `foldCalendarOverflow` | The `+N` chip. |
+ *
+ * ## Theming
+ * | CSS variable                          | Default | Sets |
+ * |---------------------------------------|---------|------|
+ * | `--fold-calendar-month-header-row`    | `30px`  | Height of the day-number row. |
+ * | `--fold-calendar-month-lane`          | `22px`  | Height of one band lane. |
+ * | `--fold-calendar-month-row-min-height`| `112px` | Minimum height of a week row. |
+ * | `--fold-calendar-month-daynum-size`   | `22px`  | The day number's round box. |
+ * | `--fold-calendar-month-cell-padding`  | `--fold-space-sm` | Padding inside a day cell. |
+ * | `--fold-calendar-month-week-number-width` | `34px` | The ISO week column, when shown. |
+ * | `--fold-calendar-bar-width`           | `3px`   | The tone bar down a band's leading edge. |
+ * | `--fold-calendar-band-radius`         | `--fold-radius-sm` | Band and chip corners. |
+ * | `--fold-calendar-band-gutter`         | `--fold-space-xs` | Gap between a band and its cell edge. |
+ *
+ * ## Accessibility
+ * The **date grid** is the ARIA structure: `role="grid"` over rows of
+ * `gridcell` days, with one roving tab stop (the focused day, else today, else
+ * the 1st) and the grid pattern on the arrow keys — horizontal steps a day,
+ * vertical steps a week, `Home`/`End` snap to the week, and `PageUp`/`PageDown`
+ * page the month, writing back through `month`.
+ *
+ * Bands cannot be `gridcell`s — they span columns, which is the whole point —
+ * so they are **`aria-hidden` mouse affordances**, and each day cell instead
+ * announces its date, the today marker, its **event count** and, when the lane
+ * budget hid some, **how many it is not showing**.
+ *
+ * That makes `dayClick` **load-bearing, not optional**: it is the accessible
+ * path into an individual event. A month that handles only `eventClick` is a
+ * view whose events no keyboard can reach — wire `dayClick` to a day or list
+ * view, as the gallery does.
+ *
+ * @selector `fold-calendar-month`
+ *
+ * @example
+ * ```html
+ * <fold-calendar-month
+ *   [(month)]="month"
+ *   [events]="events()"
+ *   [today]="today"
+ *   (dayClick)="openDay($event)"
+ *   (eventClick)="openEvent($event)"
+ * />
+ * ```
+ */
+class FoldCalendarMonthComponent {
+    /** Any date inside the month on display. Two-way: keyboard paging writes back. */
+    month = model.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "month" }] : /* istanbul ignore next */ []));
+    /** Events to plot; those missing the grid entirely are ignored. */
+    events = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []));
+    /** The day to mark as today. Omit and none is marked (an SSR-stable default). */
+    today = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "today" }] : /* istanbul ignore next */ []));
+    /** Day the weeks start on. @default the locale's own first day */
+    weekStartsOn = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "weekStartsOn" }] : /* istanbul ignore next */ []));
+    /** Days shaded as the weekend. @default the locale's own weekend */
+    weekendDays = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "weekendDays" }] : /* istanbul ignore next */ []));
+    /** Show the ISO week number in a leading column. */
+    showWeekNumbers = input(false, { ...(ngDevMode ? { debugName: "showWeekNumbers" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Bands a week stacks before the rest collapse into overflow chips. @default 3 */
+    maxLanes = input(3, { ...(ngDevMode ? { debugName: "maxLanes" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Always emit six rows, so the grid keeps one height across months. */
+    fixedWeeks = input(false, { ...(ngDevMode ? { debugName: "fixedWeeks" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Extra names for a cell, emitted as `data-fold-day-modifiers`. */
+    dayModifiers = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dayModifiers" }] : /* istanbul ignore next */ []));
+    /** A day cell was activated. */
+    dayClick = output();
+    /** A band was clicked; a grouped band emits its representative event. */
+    eventClick = output();
+    /** A `+N` chip was clicked, with the day whose events overflowed. */
+    overflowClick = output();
+    /** Labels, locale and the projected chip template — see the directive. */
+    chrome = inject(FoldCalendarChromeDirective);
+    host = inject(ElementRef);
+    projectedDay = contentChild(FoldCalendarDayDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "projectedDay" }] : /* istanbul ignore next */ []));
+    projectedOverflow = contentChild(FoldCalendarOverflowDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "projectedOverflow" }] : /* istanbul ignore next */ []));
+    /** The custom day-cell template, when one is projected. */
+    dayContent = computed(() => this.projectedDay()?.template ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dayContent" }] : /* istanbul ignore next */ []));
+    /** The custom overflow-chip template, when one is projected. */
+    overflowContent = computed(() => this.projectedOverflow()?.template ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowContent" }] : /* istanbul ignore next */ []));
+    /**
+     * Lanes this grid stacks — clamped once, by the layout, and read back here so
+     * the geometry and the CSS row template can never disagree.
+     */
+    lanes = computed(() => foldClampLanes(this.maxLanes()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lanes" }] : /* istanbul ignore next */ []));
+    /** The laid-out grid: week rows, their days, and their packed bands. */
+    /** The anchor in force: the caller's, else the one the locale declares. */
+    anchor = computed(() => this.chrome.anchor(this.weekStartsOn()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []));
+    weeks = computed(() => foldBuildMonthGrid(this.events(), {
+        month: this.month(),
+        weekStartsOn: this.anchor(),
+        weekendDays: this.chrome.weekend(this.weekendDays()),
+        maxLanes: this.lanes(),
+        fixedWeeks: this.fixedWeeks(),
+        today: this.today(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []));
+    /** Column headers, walked out of `Intl` so every locale comes for free. */
+    weekdayNames = computed(() => {
+        const sample = foldStartOfWeek(WEEKDAY_SAMPLE, this.anchor());
+        return Array.from({ length: 7 }, (_unused, offset) => this.chrome.format(foldAddDays(sample, offset), "weekdayShort"));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekdayNames" }] : /* istanbul ignore next */ []));
+    /**
+     * Columns before the first day. The week-number column is a real grid column,
+     * so everything placed by index — cells, bands, overflow chips — shifts with
+     * it, and nothing has to know why.
+     */
+    columnOffset = computed(() => this.showWeekNumbers() ? 1 : 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnOffset" }] : /* istanbul ignore next */ []));
+    /** The ISO week each row belongs to — always Monday-based, whatever the anchor. */
+    weekNumber(week) {
+        return foldIsoWeek(week.start);
+    }
+    /**
+     * Row track sizes: the day-number row, one row per lane, then the overflow
+     * row. Both heights are themeable knobs, which is why they are `var()`s.
+     */
+    rowTemplate = computed(() => `var(--fold-calendar-month-header-row, 30px) repeat(${this.lanes()}, var(--fold-calendar-month-lane, 22px)) auto`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowTemplate" }] : /* istanbul ignore next */ []));
+    /** The overflow chips' row — always the one after the last lane. */
+    overflowRow = computed(() => this.lanes() + 2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowRow" }] : /* istanbul ignore next */ []));
+    /** Every date the grid currently shows — the bound focus may not leave. */
+    gridDates = computed(() => new Set(this.weeks().flatMap((week) => week.days.map((day) => day.date))), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridDates" }] : /* istanbul ignore next */ []));
+    /** Where the tab stop sits before the user moves it: today, else the 1st. */
+    defaultStop = computed(() => {
+        const today = this.today();
+        if (today !== undefined && this.gridDates().has(today)) {
+            return today;
+        }
+        return (this.weeks()
+            .flatMap((week) => week.days)
+            .find((day) => day.inMonth)?.date ?? null);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultStop" }] : /* istanbul ignore next */ []));
+    /** The grid's single tab stop and the arrow keys that move it. */
+    focus = new FoldCalendarRovingFocus({
+        dates: this.gridDates,
+        fallback: this.defaultStop,
+        weekStartsOn: this.anchor,
+        root: () => this.rootElement(),
+        page: (date) => this.month.set(date),
+        injector: inject(Injector),
+    });
+    dayTabIndex(date) {
+        return this.focus.tabIndexFor(date);
+    }
+    /** A cell's caller-supplied names, as one `~=`-matchable attribute. */
+    dayModifierAttr(day) {
+        const names = this.dayModifiers()?.(day) ?? [];
+        return names.length === 0 ? null : names.join(" ");
+    }
+    /**
+     * A day's accessible name: its date, the today marker, what sits on it, and
+     * what the lane budget is keeping from it.
+     */
+    dayLabel(day) {
+        const labels = this.chrome.l();
+        const parts = [this.chrome.format(day.date, "dateFull")];
+        if (day.isToday) {
+            parts.push(labels.today);
+        }
+        if (day.eventCount > 0) {
+            parts.push(labels.eventCount(day.eventCount));
+        }
+        if (day.hiddenCount > 0) {
+            parts.push(labels.hiddenCount(day.hiddenCount));
+        }
+        return parts.join(", ");
+    }
+    /** A band's text: the group's label when it stands for several events. */
+    bandLabel(band) {
+        if (band.groupSize > 1) {
+            return band.event.groupLabel ?? band.event.label;
+        }
+        return band.event.label;
+    }
+    /** The leading glyph — suppressed on a continuation, which has no real start. */
+    bandIcon(band) {
+        if (band.continuesBefore) {
+            return null;
+        }
+        return band.event.icon ?? null;
+    }
+    onDayFocus(date) {
+        this.focus.onFocus(date);
+    }
+    /** A cell is not a `<button>`, so activation is wired by hand. */
+    onDayKeydown(event, date) {
+        if (event.target !== event.currentTarget) {
+            return;
+        }
+        if (ACTIVATION_KEYS.has(event.key)) {
+            event.preventDefault();
+            this.dayClick.emit(date);
+            return;
+        }
+        if (this.focus.move(event.key, date)) {
+            event.preventDefault();
+        }
+    }
+    rootElement() {
+        const root = this.host.nativeElement;
+        return root instanceof HTMLElement ? root : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarMonthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldCalendarMonthComponent, isStandalone: true, selector: "fold-calendar-month", inputs: { month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: true, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, today: { classPropertyName: "today", publicName: "today", isSignal: true, isRequired: false, transformFunction: null }, weekStartsOn: { classPropertyName: "weekStartsOn", publicName: "weekStartsOn", isSignal: true, isRequired: false, transformFunction: null }, weekendDays: { classPropertyName: "weekendDays", publicName: "weekendDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, maxLanes: { classPropertyName: "maxLanes", publicName: "maxLanes", isSignal: true, isRequired: false, transformFunction: null }, fixedWeeks: { classPropertyName: "fixedWeeks", publicName: "fixedWeeks", isSignal: true, isRequired: false, transformFunction: null }, dayModifiers: { classPropertyName: "dayModifiers", publicName: "dayModifiers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { month: "monthChange", dayClick: "dayClick", eventClick: "eventClick", overflowClick: "overflowClick" }, host: { attributes: { "data-fold-calendar": "", "role": "grid" }, properties: { "attr.aria-label": "chrome.l().grid", "class.has-week-numbers": "showWeekNumbers()" } }, queries: [{ propertyName: "projectedDay", first: true, predicate: FoldCalendarDayDirective, descendants: true, isSignal: true }, { propertyName: "projectedOverflow", first: true, predicate: FoldCalendarOverflowDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: FoldCalendarChromeDirective, inputs: ["locale", "locale", "labels", "labels", "formats", "formats"] }], ngImport: i0, template: "<div class=\"foldcal-weekdays\" role=\"row\">\n  @if (showWeekNumbers()) {\n    <span class=\"foldcal-weekday foldcal-weeknum-head\" role=\"columnheader\">\n      {{ chrome.l().weekNumberShort }}\n    </span>\n  }\n  @for (name of weekdayNames(); track $index) {\n    <span class=\"foldcal-weekday\" role=\"columnheader\">{{ name }}</span>\n  }\n</div>\n\n@for (week of weeks(); track week.start) {\n  <div class=\"foldcal-week\" role=\"row\" [style.gridTemplateRows]=\"rowTemplate()\">\n    <!--\n      ISO weeks always start on Monday and belong to the year holding their\n      Thursday, so this is not derivable from the calendar's own anchor.\n    -->\n    @if (showWeekNumbers()) {\n      <span\n        class=\"foldcal-weeknum\"\n        role=\"rowheader\"\n        [attr.aria-label]=\"chrome.l().weekNumber(weekNumber(week))\"\n        >{{ weekNumber(week) }}</span\n      >\n    }\n    <!--\n      The cell is the focusable widget, as the ARIA grid pattern asks: a\n      <button> here would have its native role overwritten by role=\"gridcell\",\n      so activation is wired by hand instead.\n    -->\n    @for (day of week.days; track day.date; let column = $index) {\n      <div\n        class=\"foldcal-day\"\n        role=\"gridcell\"\n        [attr.data-fold-day]=\"day.date\"\n        [attr.data-fold-day-modifiers]=\"dayModifierAttr(day)\"\n        [class.is-outside]=\"!day.inMonth\"\n        [class.is-today]=\"day.isToday\"\n        [class.is-weekend]=\"day.isWeekend\"\n        [style.gridColumn]=\"column + 1 + columnOffset()\"\n        [attr.tabindex]=\"dayTabIndex(day.date)\"\n        [attr.aria-label]=\"dayLabel(day)\"\n        [attr.aria-current]=\"day.isToday ? 'date' : null\"\n        (click)=\"dayClick.emit(day.date)\"\n        (focus)=\"onDayFocus(day.date)\"\n        (keydown)=\"onDayKeydown($event, day.date)\"\n      >\n        @if (dayContent(); as projected) {\n          <ng-container\n            [ngTemplateOutlet]=\"projected\"\n            [ngTemplateOutletContext]=\"{ $implicit: day }\"\n          />\n        } @else {\n          <span class=\"foldcal-daynum\">{{ day.dayOfMonth }}</span>\n        }\n      </div>\n    }\n\n    <!--\n      Bands span columns, so they cannot be gridcells; they are hidden from\n      the a11y tree and each day cell announces its own event count instead.\n    -->\n    @for (band of week.bands; track band.key) {\n      <button\n        type=\"button\"\n        class=\"foldcal-band\"\n        aria-hidden=\"true\"\n        tabindex=\"-1\"\n        [attr.data-tone]=\"band.event.tone ?? 'neutral'\"\n        [class.continues-before]=\"band.continuesBefore\"\n        [class.continues-after]=\"band.continuesAfter\"\n        [class.half-start]=\"band.startHalfDay !== undefined\"\n        [class.half-end]=\"band.endHalfDay !== undefined\"\n        [style.gridColumn]=\"\n          band.startColumn +\n          1 +\n          columnOffset() +\n          ' / ' +\n          (band.endColumn + 2 + columnOffset())\n        \"\n        [style.gridRow]=\"band.lane + 2\"\n        [attr.title]=\"bandLabel(band)\"\n        (click)=\"eventClick.emit(band.event)\"\n      >\n        @if (chrome.eventContent(); as projected) {\n          <ng-container\n            [ngTemplateOutlet]=\"projected\"\n            [ngTemplateOutletContext]=\"{ $implicit: band.event, band: band }\"\n          />\n        } @else {\n          <span class=\"foldcal-band-bar\"></span>\n          @if (bandIcon(band); as icon) {\n            <fold-icon class=\"foldcal-band-icon\" [name]=\"icon\" size=\"sm\" />\n          }\n          <span class=\"foldcal-band-label\">{{ bandLabel(band) }}</span>\n          @if (band.groupSize > 1) {\n            <span class=\"foldcal-band-count\">{{ band.groupSize }}</span>\n          }\n        }\n      </button>\n    }\n\n    <!-- One chip per crowded day, in that day's own column. -->\n    @for (day of week.days; track day.date; let column = $index) {\n      @if (day.hiddenCount > 0) {\n        <button\n          type=\"button\"\n          class=\"foldcal-overflow\"\n          aria-hidden=\"true\"\n          tabindex=\"-1\"\n          [style.gridColumn]=\"column + 1 + columnOffset()\"\n          [style.gridRow]=\"overflowRow()\"\n          (click)=\"overflowClick.emit(day.date)\"\n        >\n          @if (overflowContent(); as projected) {\n            <ng-container\n              [ngTemplateOutlet]=\"projected\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: day.hiddenCount,\n                date: day.date,\n              }\"\n            />\n          } @else {\n            {{ chrome.l().moreEvents(day.hiddenCount) }}\n          }\n        </button>\n      }\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0;border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-card);overflow:clip}.foldcal-weekdays,.foldcal-week{grid-template-columns:repeat(7,1fr)}:host(.has-week-numbers) .foldcal-weekdays,:host(.has-week-numbers) .foldcal-week{grid-template-columns:var(--fold-calendar-month-week-number-width, 34px) repeat(7,1fr)}.foldcal-weekdays{display:grid;background:var(--fold-color-surface-subtle);border-bottom:1px solid var(--fold-color-border)}.foldcal-weekday{padding:var(--fold-space-sm) var(--fold-space-md);color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase}.foldcal-week{display:grid;flex:1;min-height:var(--fold-calendar-month-row-min-height, 112px);border-bottom:1px solid var(--fold-color-border-subtle)}.foldcal-week:last-child{border-bottom:0}.foldcal-weeknum{grid-row:1/-1;display:flex;align-items:flex-start;justify-content:center;padding-top:var(--fold-space-sm);border-inline-end:1px solid var(--fold-color-border-subtle);background:var(--fold-color-surface-subtle);color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs);font-variant-numeric:tabular-nums}.foldcal-weeknum-head{color:var(--fold-color-text-secondary);text-align:center}.foldcal-day{grid-row:1/-1;display:flex;flex-direction:column;align-items:flex-start;padding:var(--fold-calendar-month-cell-padding, var(--fold-space-sm)) var(--fold-calendar-month-cell-padding, var(--fold-space-sm)) var(--fold-space-xs);border-inline-end:1px solid var(--fold-color-border-subtle);color:inherit;font:inherit;text-align:start;cursor:pointer;transition:background-color var(--fold-motion-fast) ease}.foldcal-day:last-of-type{border-inline-end:0}.foldcal-day:hover:not(.is-outside){background:var(--fold-color-surface-hover)}.foldcal-day:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px}.foldcal-day.is-weekend:not(.is-outside){background:var(--fold-color-surface-subtle)}.foldcal-day.is-outside{background:var(--fold-color-surface-sunken)}.foldcal-day.is-outside .foldcal-daynum{color:var(--fold-color-text-secondary)}.foldcal-day.is-today{background:linear-gradient(180deg,var(--fold-color-primary-surface) 0%,transparent 64%);box-shadow:inset 0 2px 0 0 var(--fold-color-primary)}.foldcal-day.is-today .foldcal-daynum{background:var(--fold-color-primary);color:var(--fold-color-on-primary);font-weight:700}.foldcal-daynum{display:inline-flex;align-items:center;justify-content:center;min-width:var(--fold-calendar-month-daynum-size, 22px);height:var(--fold-calendar-month-daynum-size, 22px);padding:0 var(--fold-space-xs);border-radius:var(--fold-radius-sm);color:var(--fold-color-text-secondary);font-size:var(--fold-text-sm);font-variant-numeric:tabular-nums}.foldcal-band{position:relative;z-index:1;display:flex;align-items:center;gap:var(--fold-space-xs);margin-block:1px;margin-inline:var(--fold-calendar-band-gutter, var(--fold-space-xs));padding:0;padding-inline-end:var(--fold-space-sm);border:0;border-radius:var(--fold-calendar-band-radius, var(--fold-radius-sm));background:var(--fold-color-surface-raised);color:var(--fold-color-text);font:inherit;font-size:var(--fold-text-xs);font-weight:500;line-height:var(--fold-calendar-month-lane, 22px);text-align:start;cursor:pointer;overflow:hidden;transition:filter var(--fold-motion-fast) ease,box-shadow var(--fold-motion-fast) ease}.foldcal-band:hover{z-index:2;filter:brightness(1.08);box-shadow:var(--fold-shadow-sm)}.foldcal-band.continues-before{margin-inline-start:0;border-start-start-radius:0;border-end-start-radius:0;padding-inline-start:var(--fold-space-xs)}.foldcal-band.continues-before .foldcal-band-bar{display:none}.foldcal-band.continues-before:before{content:\"\\2039\";flex:none;color:var(--fold-color-text-faded)}.foldcal-band.continues-after{margin-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.foldcal-band.continues-after:after{content:\"\\203a\";flex:none;color:var(--fold-color-text-faded)}.foldcal-band.half-start{border-end-start-radius:var(--fold-radius-lg)}.foldcal-band.half-end{border-start-end-radius:var(--fold-radius-lg)}[dir=rtl] .foldcal-band.continues-before:before{content:\"\\203a\"}[dir=rtl] .foldcal-band.continues-after:after{content:\"\\2039\"}.foldcal-band-bar{flex:0 0 var(--fold-calendar-bar-width, 3px);align-self:stretch;background:var(--fold-color-text-muted)}.foldcal-band-icon{flex:none;margin-inline-start:2px;opacity:.9}.foldcal-band-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.foldcal-band-count{flex:none;padding:0 var(--fold-space-xs);border-radius:var(--fold-radius-pill);background:var(--fold-color-surface-sunken);color:var(--fold-color-text-secondary);font-variant-numeric:tabular-nums}.foldcal-band[data-tone=success]{background:var(--fold-color-success-surface);color:var(--fold-color-success-text)}.foldcal-band[data-tone=success] .foldcal-band-bar{background:var(--fold-color-success)}.foldcal-band[data-tone=warning]{background:var(--fold-color-warning-surface);color:var(--fold-color-warning-text)}.foldcal-band[data-tone=warning] .foldcal-band-bar{background:var(--fold-color-warning)}.foldcal-band[data-tone=alert]{background:var(--fold-color-alert-surface);color:var(--fold-color-alert-text)}.foldcal-band[data-tone=alert] .foldcal-band-bar{background:var(--fold-color-alert)}.foldcal-band[data-tone=muted]{background:transparent;color:var(--fold-color-text-secondary)}.foldcal-band[data-tone=muted] .foldcal-band-bar{background:var(--fold-color-text-faded)}.foldcal-band[data-tone=muted] .foldcal-band-label{color:var(--fold-color-text-secondary);text-decoration:line-through;text-decoration-thickness:1px}@media(forced-colors:active){.foldcal-band{border:1px solid CanvasText}.foldcal-band-bar{forced-color-adjust:none}}.foldcal-overflow{justify-self:start;align-self:start;z-index:1;margin-inline:var(--fold-calendar-band-gutter, var(--fold-space-xs));padding:0 var(--fold-space-xs);border:0;border-radius:var(--fold-calendar-band-radius, var(--fold-radius-sm));background:transparent;color:var(--fold-color-text-secondary);font:inherit;font-size:var(--fold-text-xs);font-weight:500;cursor:pointer}.foldcal-overflow:hover{color:var(--fold-color-text);background:var(--fold-color-surface-hover)}@media(forced-colors:active){.foldcal-day.is-today{outline:2px solid Highlight;outline-offset:-2px}.foldcal-day:focus-visible{outline-color:Highlight}.foldcal-day.is-outside .foldcal-daynum{opacity:.6}.foldcal-day.is-weekend{border-block-end:2px solid GrayText}}@media(prefers-reduced-motion:reduce){.foldcal-day,.foldcal-band{transition:none}}@media print{:host{border-color:CanvasText;background:Canvas}.foldcal-weekdays,.foldcal-weekday,.foldcal-day,.foldcal-daynum,.foldcal-weeknum,.foldcal-overflow{background:Canvas;color:CanvasText}.foldcal-week,.foldcal-day,.foldcal-weeknum{border-color:GrayText}.foldcal-day.is-today{background:Canvas;box-shadow:inset 0 2px 0 0 CanvasText}.foldcal-day.is-today .foldcal-daynum{font-weight:700;text-decoration:underline}.foldcal-day.is-outside{opacity:.55}.foldcal-band{border:1px solid GrayText;background:Canvas;color:CanvasText;box-shadow:none}.foldcal-band-bar{-webkit-print-color-adjust:exact;print-color-adjust:exact}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarMonthComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "fold-calendar-month", standalone: true, imports: [NgTemplateOutlet, FoldIconComponent], hostDirectives: [
+                        {
+                            directive: FoldCalendarChromeDirective,
+                            inputs: ["locale", "labels", "formats"],
+                        },
+                    ], host: {
+                        "data-fold-calendar": "",
+                        role: "grid",
+                        "[attr.aria-label]": "chrome.l().grid",
+                        "[class.has-week-numbers]": "showWeekNumbers()",
+                    }, template: "<div class=\"foldcal-weekdays\" role=\"row\">\n  @if (showWeekNumbers()) {\n    <span class=\"foldcal-weekday foldcal-weeknum-head\" role=\"columnheader\">\n      {{ chrome.l().weekNumberShort }}\n    </span>\n  }\n  @for (name of weekdayNames(); track $index) {\n    <span class=\"foldcal-weekday\" role=\"columnheader\">{{ name }}</span>\n  }\n</div>\n\n@for (week of weeks(); track week.start) {\n  <div class=\"foldcal-week\" role=\"row\" [style.gridTemplateRows]=\"rowTemplate()\">\n    <!--\n      ISO weeks always start on Monday and belong to the year holding their\n      Thursday, so this is not derivable from the calendar's own anchor.\n    -->\n    @if (showWeekNumbers()) {\n      <span\n        class=\"foldcal-weeknum\"\n        role=\"rowheader\"\n        [attr.aria-label]=\"chrome.l().weekNumber(weekNumber(week))\"\n        >{{ weekNumber(week) }}</span\n      >\n    }\n    <!--\n      The cell is the focusable widget, as the ARIA grid pattern asks: a\n      <button> here would have its native role overwritten by role=\"gridcell\",\n      so activation is wired by hand instead.\n    -->\n    @for (day of week.days; track day.date; let column = $index) {\n      <div\n        class=\"foldcal-day\"\n        role=\"gridcell\"\n        [attr.data-fold-day]=\"day.date\"\n        [attr.data-fold-day-modifiers]=\"dayModifierAttr(day)\"\n        [class.is-outside]=\"!day.inMonth\"\n        [class.is-today]=\"day.isToday\"\n        [class.is-weekend]=\"day.isWeekend\"\n        [style.gridColumn]=\"column + 1 + columnOffset()\"\n        [attr.tabindex]=\"dayTabIndex(day.date)\"\n        [attr.aria-label]=\"dayLabel(day)\"\n        [attr.aria-current]=\"day.isToday ? 'date' : null\"\n        (click)=\"dayClick.emit(day.date)\"\n        (focus)=\"onDayFocus(day.date)\"\n        (keydown)=\"onDayKeydown($event, day.date)\"\n      >\n        @if (dayContent(); as projected) {\n          <ng-container\n            [ngTemplateOutlet]=\"projected\"\n            [ngTemplateOutletContext]=\"{ $implicit: day }\"\n          />\n        } @else {\n          <span class=\"foldcal-daynum\">{{ day.dayOfMonth }}</span>\n        }\n      </div>\n    }\n\n    <!--\n      Bands span columns, so they cannot be gridcells; they are hidden from\n      the a11y tree and each day cell announces its own event count instead.\n    -->\n    @for (band of week.bands; track band.key) {\n      <button\n        type=\"button\"\n        class=\"foldcal-band\"\n        aria-hidden=\"true\"\n        tabindex=\"-1\"\n        [attr.data-tone]=\"band.event.tone ?? 'neutral'\"\n        [class.continues-before]=\"band.continuesBefore\"\n        [class.continues-after]=\"band.continuesAfter\"\n        [class.half-start]=\"band.startHalfDay !== undefined\"\n        [class.half-end]=\"band.endHalfDay !== undefined\"\n        [style.gridColumn]=\"\n          band.startColumn +\n          1 +\n          columnOffset() +\n          ' / ' +\n          (band.endColumn + 2 + columnOffset())\n        \"\n        [style.gridRow]=\"band.lane + 2\"\n        [attr.title]=\"bandLabel(band)\"\n        (click)=\"eventClick.emit(band.event)\"\n      >\n        @if (chrome.eventContent(); as projected) {\n          <ng-container\n            [ngTemplateOutlet]=\"projected\"\n            [ngTemplateOutletContext]=\"{ $implicit: band.event, band: band }\"\n          />\n        } @else {\n          <span class=\"foldcal-band-bar\"></span>\n          @if (bandIcon(band); as icon) {\n            <fold-icon class=\"foldcal-band-icon\" [name]=\"icon\" size=\"sm\" />\n          }\n          <span class=\"foldcal-band-label\">{{ bandLabel(band) }}</span>\n          @if (band.groupSize > 1) {\n            <span class=\"foldcal-band-count\">{{ band.groupSize }}</span>\n          }\n        }\n      </button>\n    }\n\n    <!-- One chip per crowded day, in that day's own column. -->\n    @for (day of week.days; track day.date; let column = $index) {\n      @if (day.hiddenCount > 0) {\n        <button\n          type=\"button\"\n          class=\"foldcal-overflow\"\n          aria-hidden=\"true\"\n          tabindex=\"-1\"\n          [style.gridColumn]=\"column + 1 + columnOffset()\"\n          [style.gridRow]=\"overflowRow()\"\n          (click)=\"overflowClick.emit(day.date)\"\n        >\n          @if (overflowContent(); as projected) {\n            <ng-container\n              [ngTemplateOutlet]=\"projected\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: day.hiddenCount,\n                date: day.date,\n              }\"\n            />\n          } @else {\n            {{ chrome.l().moreEvents(day.hiddenCount) }}\n          }\n        </button>\n      }\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0;border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-card);overflow:clip}.foldcal-weekdays,.foldcal-week{grid-template-columns:repeat(7,1fr)}:host(.has-week-numbers) .foldcal-weekdays,:host(.has-week-numbers) .foldcal-week{grid-template-columns:var(--fold-calendar-month-week-number-width, 34px) repeat(7,1fr)}.foldcal-weekdays{display:grid;background:var(--fold-color-surface-subtle);border-bottom:1px solid var(--fold-color-border)}.foldcal-weekday{padding:var(--fold-space-sm) var(--fold-space-md);color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase}.foldcal-week{display:grid;flex:1;min-height:var(--fold-calendar-month-row-min-height, 112px);border-bottom:1px solid var(--fold-color-border-subtle)}.foldcal-week:last-child{border-bottom:0}.foldcal-weeknum{grid-row:1/-1;display:flex;align-items:flex-start;justify-content:center;padding-top:var(--fold-space-sm);border-inline-end:1px solid var(--fold-color-border-subtle);background:var(--fold-color-surface-subtle);color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs);font-variant-numeric:tabular-nums}.foldcal-weeknum-head{color:var(--fold-color-text-secondary);text-align:center}.foldcal-day{grid-row:1/-1;display:flex;flex-direction:column;align-items:flex-start;padding:var(--fold-calendar-month-cell-padding, var(--fold-space-sm)) var(--fold-calendar-month-cell-padding, var(--fold-space-sm)) var(--fold-space-xs);border-inline-end:1px solid var(--fold-color-border-subtle);color:inherit;font:inherit;text-align:start;cursor:pointer;transition:background-color var(--fold-motion-fast) ease}.foldcal-day:last-of-type{border-inline-end:0}.foldcal-day:hover:not(.is-outside){background:var(--fold-color-surface-hover)}.foldcal-day:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px}.foldcal-day.is-weekend:not(.is-outside){background:var(--fold-color-surface-subtle)}.foldcal-day.is-outside{background:var(--fold-color-surface-sunken)}.foldcal-day.is-outside .foldcal-daynum{color:var(--fold-color-text-secondary)}.foldcal-day.is-today{background:linear-gradient(180deg,var(--fold-color-primary-surface) 0%,transparent 64%);box-shadow:inset 0 2px 0 0 var(--fold-color-primary)}.foldcal-day.is-today .foldcal-daynum{background:var(--fold-color-primary);color:var(--fold-color-on-primary);font-weight:700}.foldcal-daynum{display:inline-flex;align-items:center;justify-content:center;min-width:var(--fold-calendar-month-daynum-size, 22px);height:var(--fold-calendar-month-daynum-size, 22px);padding:0 var(--fold-space-xs);border-radius:var(--fold-radius-sm);color:var(--fold-color-text-secondary);font-size:var(--fold-text-sm);font-variant-numeric:tabular-nums}.foldcal-band{position:relative;z-index:1;display:flex;align-items:center;gap:var(--fold-space-xs);margin-block:1px;margin-inline:var(--fold-calendar-band-gutter, var(--fold-space-xs));padding:0;padding-inline-end:var(--fold-space-sm);border:0;border-radius:var(--fold-calendar-band-radius, var(--fold-radius-sm));background:var(--fold-color-surface-raised);color:var(--fold-color-text);font:inherit;font-size:var(--fold-text-xs);font-weight:500;line-height:var(--fold-calendar-month-lane, 22px);text-align:start;cursor:pointer;overflow:hidden;transition:filter var(--fold-motion-fast) ease,box-shadow var(--fold-motion-fast) ease}.foldcal-band:hover{z-index:2;filter:brightness(1.08);box-shadow:var(--fold-shadow-sm)}.foldcal-band.continues-before{margin-inline-start:0;border-start-start-radius:0;border-end-start-radius:0;padding-inline-start:var(--fold-space-xs)}.foldcal-band.continues-before .foldcal-band-bar{display:none}.foldcal-band.continues-before:before{content:\"\\2039\";flex:none;color:var(--fold-color-text-faded)}.foldcal-band.continues-after{margin-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.foldcal-band.continues-after:after{content:\"\\203a\";flex:none;color:var(--fold-color-text-faded)}.foldcal-band.half-start{border-end-start-radius:var(--fold-radius-lg)}.foldcal-band.half-end{border-start-end-radius:var(--fold-radius-lg)}[dir=rtl] .foldcal-band.continues-before:before{content:\"\\203a\"}[dir=rtl] .foldcal-band.continues-after:after{content:\"\\2039\"}.foldcal-band-bar{flex:0 0 var(--fold-calendar-bar-width, 3px);align-self:stretch;background:var(--fold-color-text-muted)}.foldcal-band-icon{flex:none;margin-inline-start:2px;opacity:.9}.foldcal-band-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.foldcal-band-count{flex:none;padding:0 var(--fold-space-xs);border-radius:var(--fold-radius-pill);background:var(--fold-color-surface-sunken);color:var(--fold-color-text-secondary);font-variant-numeric:tabular-nums}.foldcal-band[data-tone=success]{background:var(--fold-color-success-surface);color:var(--fold-color-success-text)}.foldcal-band[data-tone=success] .foldcal-band-bar{background:var(--fold-color-success)}.foldcal-band[data-tone=warning]{background:var(--fold-color-warning-surface);color:var(--fold-color-warning-text)}.foldcal-band[data-tone=warning] .foldcal-band-bar{background:var(--fold-color-warning)}.foldcal-band[data-tone=alert]{background:var(--fold-color-alert-surface);color:var(--fold-color-alert-text)}.foldcal-band[data-tone=alert] .foldcal-band-bar{background:var(--fold-color-alert)}.foldcal-band[data-tone=muted]{background:transparent;color:var(--fold-color-text-secondary)}.foldcal-band[data-tone=muted] .foldcal-band-bar{background:var(--fold-color-text-faded)}.foldcal-band[data-tone=muted] .foldcal-band-label{color:var(--fold-color-text-secondary);text-decoration:line-through;text-decoration-thickness:1px}@media(forced-colors:active){.foldcal-band{border:1px solid CanvasText}.foldcal-band-bar{forced-color-adjust:none}}.foldcal-overflow{justify-self:start;align-self:start;z-index:1;margin-inline:var(--fold-calendar-band-gutter, var(--fold-space-xs));padding:0 var(--fold-space-xs);border:0;border-radius:var(--fold-calendar-band-radius, var(--fold-radius-sm));background:transparent;color:var(--fold-color-text-secondary);font:inherit;font-size:var(--fold-text-xs);font-weight:500;cursor:pointer}.foldcal-overflow:hover{color:var(--fold-color-text);background:var(--fold-color-surface-hover)}@media(forced-colors:active){.foldcal-day.is-today{outline:2px solid Highlight;outline-offset:-2px}.foldcal-day:focus-visible{outline-color:Highlight}.foldcal-day.is-outside .foldcal-daynum{opacity:.6}.foldcal-day.is-weekend{border-block-end:2px solid GrayText}}@media(prefers-reduced-motion:reduce){.foldcal-day,.foldcal-band{transition:none}}@media print{:host{border-color:CanvasText;background:Canvas}.foldcal-weekdays,.foldcal-weekday,.foldcal-day,.foldcal-daynum,.foldcal-weeknum,.foldcal-overflow{background:Canvas;color:CanvasText}.foldcal-week,.foldcal-day,.foldcal-weeknum{border-color:GrayText}.foldcal-day.is-today{background:Canvas;box-shadow:inset 0 2px 0 0 CanvasText}.foldcal-day.is-today .foldcal-daynum{font-weight:700;text-decoration:underline}.foldcal-day.is-outside{opacity:.55}.foldcal-band{border:1px solid GrayText;background:Canvas;color:CanvasText;box-shadow:none}.foldcal-band-bar{-webkit-print-color-adjust:exact;print-color-adjust:exact}}\n"] }]
+        }], propDecorators: { month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: true }] }, { type: i0.Output, args: ["monthChange"] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], today: [{ type: i0.Input, args: [{ isSignal: true, alias: "today", required: false }] }], weekStartsOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStartsOn", required: false }] }], weekendDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekendDays", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], maxLanes: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLanes", required: false }] }], fixedWeeks: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedWeeks", required: false }] }], dayModifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayModifiers", required: false }] }], dayClick: [{ type: i0.Output, args: ["dayClick"] }], eventClick: [{ type: i0.Output, args: ["eventClick"] }], overflowClick: [{ type: i0.Output, args: ["overflowClick"] }], projectedDay: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FoldCalendarDayDirective), { isSignal: true }] }], projectedOverflow: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FoldCalendarOverflowDirective), { isSignal: true }] }] } });
+
+/**
+ * The three selections every view and every consumer makes over a feed.
+ *
+ * Deliberately the smallest, least coupled part of the family: an app that
+ * wants the calendar's semantics — "covers this day", "overlaps this window",
+ * "belongs to a live feed" — without any of its rendering imports only this.
+ */
+/**
+ * Events covering `date`, in the caller's order — the selection the week, day
+ * and list views render, where chips stack in a column and need no packing.
+ */
+function foldEventsOnDay(events, date) {
+    return events.filter((event) => event.start <= date && event.end >= date);
+}
+/** Events overlapping `[from, to]` at all, in the caller's order. */
+function foldEventsInRange(events, from, to) {
+    return events.filter((event) => event.end >= from && event.start <= to);
+}
+/**
+ * Events from the feeds in `active`, in the caller's order — the other half of
+ * `fold-calendar-source-filter`, which owns only the selection.
+ *
+ * `null` means nothing has been switched off yet and everything passes; it is
+ * the filter chips' own initial value, so the one function built to consume
+ * that model accepts it rather than making every caller write the ternary.
+ * An empty `Set` is the opposite — every feed switched off — which is why the
+ * two are not collapsed.
+ *
+ * An event with no `sourceKey` belongs to no feed, so no chip can hide it and
+ * it always passes.
+ */
+function foldFilterBySource(events, active) {
+    if (active === null) {
+        return events;
+    }
+    return events.filter((event) => event.sourceKey === undefined || active.has(event.sourceKey));
+}
+
+/** Columns in a week row. */
+const DAYS_PER_WEEK = 7;
+/** One day cell plus the events covering it. */
+function dayWithEvents(events, epochDay, month, options, counts) {
+    const day = foldMakeDay(epochDay, {
+        month,
+        today: options.today,
+        weekendDays: foldWeekendOr(options.weekendDays),
+        counts,
+        hidden: FOLD_NO_HIDDEN_DAYS,
+    });
+    return { day, events: foldEventsOnDay(events, day.date) };
+}
+/**
+ * The seven days of `date`'s week, each with the events covering it — the
+ * render model of the week view.
+ */
+function foldBuildWeek(events, options) {
+    const startDay = foldToEpochDay(foldStartOfWeek(options.date, options.weekStartsOn ?? "mon"));
+    const month = options.date.slice(0, 7);
+    const counts = foldCountByDay(events, startDay, startDay + DAYS_PER_WEEK - 1);
+    return Array.from({ length: DAYS_PER_WEEK }, (_unused, offset) => dayWithEvents(events, startDay + offset, month, options, counts));
+}
+/** A single day with its events — the render model of the day view. */
+function foldBuildDay(events, options) {
+    const day = foldToEpochDay(options.date);
+    return dayWithEvents(events, day, options.date.slice(0, 7), options, foldCountByDay(events, day, day));
+}
+
+/**
+ * `<fold-calendar-week>` — one week as seven day columns of stacked chips.
+ *
+ * Where the month view packs spans into lanes, a week simply lists what covers
+ * each day: a three-day event appears under all three, which is the reading a
+ * week is for. Nothing spans, so nothing is clipped and there is no overflow.
+ *
+ * ## Inputs
+ * | Input          | Type                     | Default | Meaning |
+ * |----------------|--------------------------|---------|---------|
+ * | `date`         | `FoldCalendarDate`       | —       | Any date in the week on display. |
+ * | `events`       | `FoldCalendarEvent<T>[]` | `[]`    | What to list. |
+ * | `today`        | `FoldCalendarDate`       | —       | The day to mark. |
+ * | `weekStartsOn` | `FoldWeekday`            | the locale's | Which day opens the week — `Intl.Locale` knows. |
+ * | `weekendDays`  | `FoldWeekday[]`          | the locale's | Which days are shaded. |
+ * | `locale`       | `string`                 | runtime | Drives the column headers through `Intl`. |
+ * | `labels`       | `Partial<FoldCalendarLabels>` | — | Per-instance label overrides. |
+ *
+ * `date` is a plain input, not a `model`: this view never pages itself, so
+ * writing back would be a promise it does not keep. Pair it with
+ * `<fold-calendar-toolbar>`, which does own the paging.
+ *
+ * ## Theming
+ * | CSS variable                          | Default | Sets |
+ * |---------------------------------------|---------|------|
+ * | `--fold-calendar-week-column-height`  | `320px` | Height of the day columns. |
+ * | `--fold-calendar-bar-width`           | `3px`   | The tone bar down a chip's leading edge. |
+ * | `--fold-calendar-band-radius`         | `--fold-radius-sm` | Chip corners. |
+ *
+ * ## Outputs
+ * | Output       | Payload                | Fires on |
+ * |--------------|------------------------|----------|
+ * | `dayClick`   | `FoldCalendarDate`     | A column header activated. |
+ * | `eventClick` | `FoldCalendarEvent<T>` | A chip activated. |
+ *
+ * ## Accessibility
+ * Each column is a `<section>` named by its full date, holding a header button
+ * and a list of chips. Because a chip sits **inside** the day it belongs to —
+ * no spanning, no overlay — every control is a real child in the natural tab
+ * order, so this view needs none of the month grid's roving-tabindex machinery
+ * and every event is reachable by keyboard.
+ *
+ * @selector `fold-calendar-week`
+ *
+ * @example
+ * ```html
+ * <fold-calendar-week
+ *   [(date)]="date"
+ *   [events]="events()"
+ *   [today]="today"
+ *   (eventClick)="open($event)"
+ * />
+ * ```
+ */
+class FoldCalendarWeekComponent {
+    /** Any date inside the week on display. */
+    date = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
+    /** Events to list under the days they cover. */
+    events = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []));
+    /** The day to mark as today. */
+    today = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "today" }] : /* istanbul ignore next */ []));
+    /** Day the week starts on. @default the locale's own first day */
+    weekStartsOn = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "weekStartsOn" }] : /* istanbul ignore next */ []));
+    /** Days shaded as the weekend. @default ['sat', 'sun'] */
+    weekendDays = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "weekendDays" }] : /* istanbul ignore next */ []));
+    /** A column header was activated. */
+    dayClick = output();
+    /** A chip was activated. */
+    eventClick = output();
+    /** Labels, locale and the projected chip template — see the directive. */
+    chrome = inject(FoldCalendarChromeDirective);
+    columns = computed(() => foldBuildWeek(this.events(), {
+        date: this.date(),
+        weekStartsOn: this.chrome.anchor(this.weekStartsOn()),
+        weekendDays: this.chrome.weekend(this.weekendDays()),
+        today: this.today(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    weekdayName(column) {
+        return this.chrome.format(column.day.date, "weekdayShort");
+    }
+    /** A column's accessible name: its date, the today marker, and what sits on it. */
+    columnLabel(column) {
+        const labels = this.chrome.l();
+        const parts = [this.chrome.format(column.day.date, "dateFull")];
+        if (column.day.isToday) {
+            parts.push(labels.today);
+        }
+        if (column.day.eventCount > 0) {
+            parts.push(labels.eventCount(column.day.eventCount));
+        }
+        return parts.join(", ");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarWeekComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldCalendarWeekComponent, isStandalone: true, selector: "fold-calendar-week", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, today: { classPropertyName: "today", publicName: "today", isSignal: true, isRequired: false, transformFunction: null }, weekStartsOn: { classPropertyName: "weekStartsOn", publicName: "weekStartsOn", isSignal: true, isRequired: false, transformFunction: null }, weekendDays: { classPropertyName: "weekendDays", publicName: "weekendDays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dayClick: "dayClick", eventClick: "eventClick" }, hostDirectives: [{ directive: FoldCalendarChromeDirective, inputs: ["locale", "locale", "labels", "labels", "formats", "formats"] }], ngImport: i0, template: "<div class=\"foldcalw\" [attr.aria-label]=\"chrome.l().grid\" role=\"group\">\n  @for (column of columns(); track column.day.date) {\n    <section\n      class=\"foldcalw-col\"\n      [class.is-today]=\"column.day.isToday\"\n      [class.is-weekend]=\"column.day.isWeekend\"\n      [attr.aria-label]=\"columnLabel(column)\"\n    >\n      <button\n        type=\"button\"\n        class=\"foldcalw-head\"\n        [attr.aria-current]=\"column.day.isToday ? 'date' : null\"\n        (click)=\"dayClick.emit(column.day.date)\"\n      >\n        <span class=\"foldcalw-weekday\">{{ weekdayName(column) }}</span>\n        <span class=\"foldcalw-daynum\">{{ column.day.dayOfMonth }}</span>\n      </button>\n\n      <ul class=\"foldcalw-list\">\n        @for (event of column.events; track event.id) {\n          <li>\n            <button\n              type=\"button\"\n              class=\"foldcal-chip\"\n              [attr.data-tone]=\"event.tone ?? 'neutral'\"\n              (click)=\"eventClick.emit(event)\"\n            >\n              @if (chrome.eventContent(); as projected) {\n                <ng-container\n                  [ngTemplateOutlet]=\"projected\"\n                  [ngTemplateOutletContext]=\"{ $implicit: event, band: null }\"\n                />\n              } @else {\n                <span class=\"foldcal-chip-bar\"></span>\n                @if (event.icon; as icon) {\n                  <fold-icon\n                    class=\"foldcal-chip-icon\"\n                    [name]=\"icon\"\n                    size=\"sm\"\n                  />\n                }\n                <span class=\"foldcal-chip-body\">\n                  <span class=\"foldcal-chip-label\">{{ event.label }}</span>\n                  @if (event.subline) {\n                    <span class=\"foldcal-chip-sub\">{{ event.subline }}</span>\n                  }\n                </span>\n              }\n            </button>\n          </li>\n        }\n      </ul>\n    </section>\n  }\n</div>\n", styles: [":host{display:block}.foldcal-chip{position:relative;display:flex;align-items:stretch;gap:var(--fold-space-sm);width:100%;padding:var(--fold-space-xs) var(--fold-space-sm);padding-inline-start:0;border:0;border-radius:var(--fold-calendar-band-radius, var(--fold-radius-sm));background:var(--fold-color-surface-raised);color:var(--fold-color-text);font:inherit;text-align:start;cursor:pointer;overflow:hidden;transition:background-color var(--fold-motion-fast) ease}.foldcal-chip:hover{background:var(--fold-color-surface-hover)}.foldcal-chip:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px}.foldcal-chip-bar{flex:0 0 var(--fold-calendar-bar-width, 3px);align-self:stretch;background:var(--fold-color-text-muted)}.foldcal-chip-icon{flex:none;align-self:center;margin-inline-start:var(--fold-space-sm);color:var(--fold-color-text-secondary)}.foldcal-chip-body{display:flex;flex-direction:column;gap:1px;min-width:0}.foldcal-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fold-text-sm);font-weight:500}.foldcal-chip-sub{color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs)}.foldcal-chip[data-tone=success] .foldcal-chip-bar{background:var(--fold-color-success)}.foldcal-chip[data-tone=warning] .foldcal-chip-bar{background:var(--fold-color-warning)}.foldcal-chip[data-tone=alert] .foldcal-chip-bar{background:var(--fold-color-alert)}.foldcal-chip[data-tone=muted] .foldcal-chip-bar{background:var(--fold-color-text-faded)}.foldcal-chip[data-tone=muted] .foldcal-chip-label{color:var(--fold-color-text-secondary);text-decoration:line-through;text-decoration-thickness:1px}@media(forced-colors:active){.foldcal-chip{border:1px solid CanvasText}.foldcal-chip-bar{forced-color-adjust:none}}@media(prefers-reduced-motion:reduce){.foldcal-chip{transition:none}}.foldcalw{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-height:var(--fold-calendar-week-column-height, 320px);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-card);overflow:clip}.foldcalw-col{container-type:inline-size;display:flex;flex-direction:column;gap:var(--fold-space-sm);min-width:0;padding:var(--fold-space-sm);border-inline-end:1px solid var(--fold-color-border-subtle)}.foldcalw-col:last-child{border-inline-end:0}.foldcalw-col.is-weekend{background:var(--fold-color-surface-subtle)}.foldcalw-col.is-today{background:linear-gradient(180deg,var(--fold-color-primary-surface) 0%,transparent 28%);box-shadow:inset 0 2px 0 0 var(--fold-color-primary)}.foldcalw-head{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:0 0 var(--fold-space-xs);border:0;border-bottom:1px solid var(--fold-color-border-subtle);background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer}.foldcalw-head:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:2px}.foldcalw-weekday{color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase}.foldcalw-daynum{color:var(--fold-color-text);font-size:var(--fold-text-lg);font-weight:600;font-variant-numeric:tabular-nums;line-height:1}.is-today .foldcalw-daynum{color:var(--fold-color-primary-text)}.foldcalw-list{display:flex;flex-direction:column;gap:var(--fold-space-xs);margin:0;padding:0;list-style:none}@container (max-width: 150px){.foldcal-chip-sub{display:none}}@container (max-width: 110px){.foldcal-chip-icon{display:none}.foldcal-chip{gap:var(--fold-space-xs);padding-inline-end:var(--fold-space-xs)}}@media(forced-colors:active){.foldcalw-col.is-today{outline:2px solid Highlight;outline-offset:-2px}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarWeekComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "fold-calendar-week", standalone: true, imports: [NgTemplateOutlet, FoldIconComponent], hostDirectives: [
+                        {
+                            directive: FoldCalendarChromeDirective,
+                            inputs: ["locale", "labels", "formats"],
+                        },
+                    ], template: "<div class=\"foldcalw\" [attr.aria-label]=\"chrome.l().grid\" role=\"group\">\n  @for (column of columns(); track column.day.date) {\n    <section\n      class=\"foldcalw-col\"\n      [class.is-today]=\"column.day.isToday\"\n      [class.is-weekend]=\"column.day.isWeekend\"\n      [attr.aria-label]=\"columnLabel(column)\"\n    >\n      <button\n        type=\"button\"\n        class=\"foldcalw-head\"\n        [attr.aria-current]=\"column.day.isToday ? 'date' : null\"\n        (click)=\"dayClick.emit(column.day.date)\"\n      >\n        <span class=\"foldcalw-weekday\">{{ weekdayName(column) }}</span>\n        <span class=\"foldcalw-daynum\">{{ column.day.dayOfMonth }}</span>\n      </button>\n\n      <ul class=\"foldcalw-list\">\n        @for (event of column.events; track event.id) {\n          <li>\n            <button\n              type=\"button\"\n              class=\"foldcal-chip\"\n              [attr.data-tone]=\"event.tone ?? 'neutral'\"\n              (click)=\"eventClick.emit(event)\"\n            >\n              @if (chrome.eventContent(); as projected) {\n                <ng-container\n                  [ngTemplateOutlet]=\"projected\"\n                  [ngTemplateOutletContext]=\"{ $implicit: event, band: null }\"\n                />\n              } @else {\n                <span class=\"foldcal-chip-bar\"></span>\n                @if (event.icon; as icon) {\n                  <fold-icon\n                    class=\"foldcal-chip-icon\"\n                    [name]=\"icon\"\n                    size=\"sm\"\n                  />\n                }\n                <span class=\"foldcal-chip-body\">\n                  <span class=\"foldcal-chip-label\">{{ event.label }}</span>\n                  @if (event.subline) {\n                    <span class=\"foldcal-chip-sub\">{{ event.subline }}</span>\n                  }\n                </span>\n              }\n            </button>\n          </li>\n        }\n      </ul>\n    </section>\n  }\n</div>\n", styles: [":host{display:block}.foldcal-chip{position:relative;display:flex;align-items:stretch;gap:var(--fold-space-sm);width:100%;padding:var(--fold-space-xs) var(--fold-space-sm);padding-inline-start:0;border:0;border-radius:var(--fold-calendar-band-radius, var(--fold-radius-sm));background:var(--fold-color-surface-raised);color:var(--fold-color-text);font:inherit;text-align:start;cursor:pointer;overflow:hidden;transition:background-color var(--fold-motion-fast) ease}.foldcal-chip:hover{background:var(--fold-color-surface-hover)}.foldcal-chip:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px}.foldcal-chip-bar{flex:0 0 var(--fold-calendar-bar-width, 3px);align-self:stretch;background:var(--fold-color-text-muted)}.foldcal-chip-icon{flex:none;align-self:center;margin-inline-start:var(--fold-space-sm);color:var(--fold-color-text-secondary)}.foldcal-chip-body{display:flex;flex-direction:column;gap:1px;min-width:0}.foldcal-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fold-text-sm);font-weight:500}.foldcal-chip-sub{color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs)}.foldcal-chip[data-tone=success] .foldcal-chip-bar{background:var(--fold-color-success)}.foldcal-chip[data-tone=warning] .foldcal-chip-bar{background:var(--fold-color-warning)}.foldcal-chip[data-tone=alert] .foldcal-chip-bar{background:var(--fold-color-alert)}.foldcal-chip[data-tone=muted] .foldcal-chip-bar{background:var(--fold-color-text-faded)}.foldcal-chip[data-tone=muted] .foldcal-chip-label{color:var(--fold-color-text-secondary);text-decoration:line-through;text-decoration-thickness:1px}@media(forced-colors:active){.foldcal-chip{border:1px solid CanvasText}.foldcal-chip-bar{forced-color-adjust:none}}@media(prefers-reduced-motion:reduce){.foldcal-chip{transition:none}}.foldcalw{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-height:var(--fold-calendar-week-column-height, 320px);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-card);overflow:clip}.foldcalw-col{container-type:inline-size;display:flex;flex-direction:column;gap:var(--fold-space-sm);min-width:0;padding:var(--fold-space-sm);border-inline-end:1px solid var(--fold-color-border-subtle)}.foldcalw-col:last-child{border-inline-end:0}.foldcalw-col.is-weekend{background:var(--fold-color-surface-subtle)}.foldcalw-col.is-today{background:linear-gradient(180deg,var(--fold-color-primary-surface) 0%,transparent 28%);box-shadow:inset 0 2px 0 0 var(--fold-color-primary)}.foldcalw-head{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:0 0 var(--fold-space-xs);border:0;border-bottom:1px solid var(--fold-color-border-subtle);background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer}.foldcalw-head:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:2px}.foldcalw-weekday{color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase}.foldcalw-daynum{color:var(--fold-color-text);font-size:var(--fold-text-lg);font-weight:600;font-variant-numeric:tabular-nums;line-height:1}.is-today .foldcalw-daynum{color:var(--fold-color-primary-text)}.foldcalw-list{display:flex;flex-direction:column;gap:var(--fold-space-xs);margin:0;padding:0;list-style:none}@container (max-width: 150px){.foldcal-chip-sub{display:none}}@container (max-width: 110px){.foldcal-chip-icon{display:none}.foldcal-chip{gap:var(--fold-space-xs);padding-inline-end:var(--fold-space-xs)}}@media(forced-colors:active){.foldcalw-col.is-today{outline:2px solid Highlight;outline-offset:-2px}}\n"] }]
+        }], propDecorators: { date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: true }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], today: [{ type: i0.Input, args: [{ isSignal: true, alias: "today", required: false }] }], weekStartsOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStartsOn", required: false }] }], weekendDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekendDays", required: false }] }], dayClick: [{ type: i0.Output, args: ["dayClick"] }], eventClick: [{ type: i0.Output, args: ["eventClick"] }] } });
+
+/**
+ * `<fold-calendar-day>` — one day, its events listed in full.
+ *
+ * The end of the drill-down: where the month view has room only for a label,
+ * this one has room for the subline too, so it is the view a `dayClick`
+ * naturally lands on.
+ *
+ * ## Inputs
+ * | Input    | Type                     | Default | Meaning |
+ * |----------|--------------------------|---------|---------|
+ * | `date`   | `FoldCalendarDate`       | —       | The day on display. |
+ * | `events` | `FoldCalendarEvent<T>[]` | `[]`    | Filtered to those covering `date`. |
+ * | `today`  | `FoldCalendarDate`       | —       | Marks the header when it matches. |
+ * | `locale` | `string`                 | runtime | Drives the header through `Intl`. |
+ * | `labels` | `Partial<FoldCalendarLabels>` | — | Per-instance label overrides. |
+ *
+ * ## Outputs
+ * | Output       | Payload                | Fires on |
+ * |--------------|------------------------|----------|
+ * | `eventClick` | `FoldCalendarEvent<T>` | A chip activated. |
+ *
+ * ## Slots
+ * | Selector                       | Region |
+ * |--------------------------------|--------|
+ * | `button[empty]`, `a[empty]`, `div[empty]` | Under the empty message — the place for a "new request" action. |
+ * | *(default)*                    | After the list. |
+ *
+ * The `empty` slot is **tag-qualified** (rule 4.8): `empty` is also an input on
+ * `fold-field` and `fold-data-table`, and a bare `[empty]` selector would
+ * capture either of them whole.
+ *
+ * ## Theming
+ * | CSS variable                       | Default | Sets |
+ * |------------------------------------|---------|------|
+ * | `--fold-calendar-day-number-size`  | `--fold-text-3xl` | The big day number. |
+ * | `--fold-calendar-bar-width`        | `3px`   | The tone bar down a chip's leading edge. |
+ * | `--fold-calendar-band-radius`      | `--fold-radius-sm` | Chip corners. |
+ *
+ * @selector `fold-calendar-day`
+ *
+ * @example
+ * ```html
+ * <fold-calendar-day [date]="date()" [events]="events()" [today]="today">
+ *   <button empty foldButton (click)="request()">New request</button>
+ * </fold-calendar-day>
+ * ```
+ */
+class FoldCalendarDayComponent {
+    /** The day on display. */
+    date = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
+    /** Events to filter down to this day. */
+    events = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []));
+    /** The day to mark as today. */
+    today = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "today" }] : /* istanbul ignore next */ []));
+    /** A chip was activated. */
+    eventClick = output();
+    /** Labels, locale and the projected chip template — see the directive. */
+    chrome = inject(FoldCalendarChromeDirective);
+    dayEvents = computed(() => foldEventsOnDay(this.events(), this.date()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dayEvents" }] : /* istanbul ignore next */ []));
+    isToday = computed(() => this.date() === this.today(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isToday" }] : /* istanbul ignore next */ []));
+    /** `Saturday` — the weekday alone; the month sits beside the number. */
+    weekdayName = computed(() => this.chrome.format(this.date(), "weekdayLong"), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekdayName" }] : /* istanbul ignore next */ []));
+    /** `May` — read with the day number, which is why it is not in the line above. */
+    monthName = computed(() => this.chrome.format(this.date(), "monthLong"), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthName" }] : /* istanbul ignore next */ []));
+    dayOfMonth = computed(() => Number(this.date().slice(8, 10)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dayOfMonth" }] : /* istanbul ignore next */ []));
+    /** The header's accessible name: the full date, plus the today marker. */
+    headerLabel = computed(() => {
+        const full = this.chrome.format(this.date(), "dateFull");
+        return this.isToday() ? `${full}, ${this.chrome.l().today}` : full;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarDayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldCalendarDayComponent, isStandalone: true, selector: "fold-calendar-day", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, today: { classPropertyName: "today", publicName: "today", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { eventClick: "eventClick" }, hostDirectives: [{ directive: FoldCalendarChromeDirective, inputs: ["locale", "locale", "labels", "labels", "formats", "formats"] }], ngImport: i0, template: "<section class=\"foldcald\" [attr.aria-label]=\"headerLabel()\">\n  <header class=\"foldcald-head\">\n    <span class=\"foldcald-weekday\">{{ weekdayName() }}</span>\n    <span\n      class=\"foldcald-daynum\"\n      [class.is-today]=\"isToday()\"\n      [attr.aria-current]=\"isToday() ? 'date' : null\"\n      >{{ dayOfMonth() }}</span\n    >\n    <span class=\"foldcald-month\">{{ monthName() }}</span>\n  </header>\n\n  @if (dayEvents().length === 0) {\n    <div class=\"foldcald-empty\">\n      <p>{{ chrome.l().emptyDay }}</p>\n      <!--\n        Tag-qualified (rule 4.8): `empty` is also an input on fold-field and\n        fold-data-table, and a bare [empty] selector would swallow either whole.\n      -->\n      <ng-content select=\"button[empty], a[empty], div[empty]\" />\n    </div>\n  } @else {\n    <ul class=\"foldcald-list\">\n      @for (event of dayEvents(); track event.id) {\n        <li>\n          <button\n            type=\"button\"\n            class=\"foldcal-chip foldcald-chip\"\n            [attr.data-tone]=\"event.tone ?? 'neutral'\"\n            (click)=\"eventClick.emit(event)\"\n          >\n            @if (chrome.eventContent(); as projected) {\n              <ng-container\n                [ngTemplateOutlet]=\"projected\"\n                [ngTemplateOutletContext]=\"{ $implicit: event, band: null }\"\n              />\n            } @else {\n              <span class=\"foldcal-chip-bar\"></span>\n              @if (event.icon; as icon) {\n                <fold-icon class=\"foldcal-chip-icon\" [name]=\"icon\" size=\"md\" />\n              }\n              <span class=\"foldcal-chip-body\">\n                <span class=\"foldcal-chip-label\">{{ event.label }}</span>\n                @if (event.subline) {\n                  <span class=\"foldcal-chip-sub\">{{ event.subline }}</span>\n                }\n              </span>\n            }\n          </button>\n        </li>\n      }\n    </ul>\n  }\n\n  <!-- Default slot: anything the qualified selector above did not claim still\n       lands somewhere visible instead of disappearing. -->\n  <ng-content />\n</section>\n", styles: ["@charset \"UTF-8\";:host{display:block}.foldcal-chip{position:relative;display:flex;align-items:stretch;gap:var(--fold-space-sm);width:100%;padding:var(--fold-space-xs) var(--fold-space-sm);padding-inline-start:0;border:0;border-radius:var(--fold-calendar-band-radius, var(--fold-radius-sm));background:var(--fold-color-surface-raised);color:var(--fold-color-text);font:inherit;text-align:start;cursor:pointer;overflow:hidden;transition:background-color var(--fold-motion-fast) ease}.foldcal-chip:hover{background:var(--fold-color-surface-hover)}.foldcal-chip:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px}.foldcal-chip-bar{flex:0 0 var(--fold-calendar-bar-width, 3px);align-self:stretch;background:var(--fold-color-text-muted)}.foldcal-chip-icon{flex:none;align-self:center;margin-inline-start:var(--fold-space-sm);color:var(--fold-color-text-secondary)}.foldcal-chip-body{display:flex;flex-direction:column;gap:1px;min-width:0}.foldcal-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fold-text-sm);font-weight:500}.foldcal-chip-sub{color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs)}.foldcal-chip[data-tone=success] .foldcal-chip-bar{background:var(--fold-color-success)}.foldcal-chip[data-tone=warning] .foldcal-chip-bar{background:var(--fold-color-warning)}.foldcal-chip[data-tone=alert] .foldcal-chip-bar{background:var(--fold-color-alert)}.foldcal-chip[data-tone=muted] .foldcal-chip-bar{background:var(--fold-color-text-faded)}.foldcal-chip[data-tone=muted] .foldcal-chip-label{color:var(--fold-color-text-secondary);text-decoration:line-through;text-decoration-thickness:1px}@media(forced-colors:active){.foldcal-chip{border:1px solid CanvasText}.foldcal-chip-bar{forced-color-adjust:none}}@media(prefers-reduced-motion:reduce){.foldcal-chip{transition:none}}.foldcald{display:flex;flex-direction:column;gap:var(--fold-space-lg);padding:var(--fold-space-lg);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-card)}.foldcald-head{display:flex;align-items:baseline;gap:var(--fold-space-md);padding-bottom:var(--fold-space-md);border-bottom:1px solid var(--fold-color-border)}.foldcald-weekday{color:var(--fold-color-text-secondary);font-size:var(--fold-text-md);font-weight:600;letter-spacing:.04em;text-transform:uppercase}.foldcald-daynum{color:var(--fold-color-text);font-size:var(--fold-calendar-day-number-size, 32px);font-weight:700;font-variant-numeric:tabular-nums;line-height:1}.foldcald-daynum.is-today{color:var(--fold-color-primary-text)}.foldcald-month{color:var(--fold-color-text-secondary);font-size:var(--fold-text-lg);font-weight:600}.foldcald-list{display:flex;flex-direction:column;gap:var(--fold-space-sm);margin:0;padding:0;list-style:none}.foldcald-chip{padding-block:var(--fold-space-sm)}.foldcald-empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--fold-space-sm);padding:var(--fold-space-lg);border:1px dashed var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-subtle)}.foldcald-empty p{margin:0;color:var(--fold-color-text-secondary);font-size:var(--fold-text-sm)}@media(forced-colors:active){.foldcald-daynum.is-today{outline:2px solid Highlight;outline-offset:2px}.foldcald-head{border-block-end-color:CanvasText}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarDayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "fold-calendar-day", standalone: true, imports: [NgTemplateOutlet, FoldIconComponent], hostDirectives: [
+                        {
+                            directive: FoldCalendarChromeDirective,
+                            inputs: ["locale", "labels", "formats"],
+                        },
+                    ], template: "<section class=\"foldcald\" [attr.aria-label]=\"headerLabel()\">\n  <header class=\"foldcald-head\">\n    <span class=\"foldcald-weekday\">{{ weekdayName() }}</span>\n    <span\n      class=\"foldcald-daynum\"\n      [class.is-today]=\"isToday()\"\n      [attr.aria-current]=\"isToday() ? 'date' : null\"\n      >{{ dayOfMonth() }}</span\n    >\n    <span class=\"foldcald-month\">{{ monthName() }}</span>\n  </header>\n\n  @if (dayEvents().length === 0) {\n    <div class=\"foldcald-empty\">\n      <p>{{ chrome.l().emptyDay }}</p>\n      <!--\n        Tag-qualified (rule 4.8): `empty` is also an input on fold-field and\n        fold-data-table, and a bare [empty] selector would swallow either whole.\n      -->\n      <ng-content select=\"button[empty], a[empty], div[empty]\" />\n    </div>\n  } @else {\n    <ul class=\"foldcald-list\">\n      @for (event of dayEvents(); track event.id) {\n        <li>\n          <button\n            type=\"button\"\n            class=\"foldcal-chip foldcald-chip\"\n            [attr.data-tone]=\"event.tone ?? 'neutral'\"\n            (click)=\"eventClick.emit(event)\"\n          >\n            @if (chrome.eventContent(); as projected) {\n              <ng-container\n                [ngTemplateOutlet]=\"projected\"\n                [ngTemplateOutletContext]=\"{ $implicit: event, band: null }\"\n              />\n            } @else {\n              <span class=\"foldcal-chip-bar\"></span>\n              @if (event.icon; as icon) {\n                <fold-icon class=\"foldcal-chip-icon\" [name]=\"icon\" size=\"md\" />\n              }\n              <span class=\"foldcal-chip-body\">\n                <span class=\"foldcal-chip-label\">{{ event.label }}</span>\n                @if (event.subline) {\n                  <span class=\"foldcal-chip-sub\">{{ event.subline }}</span>\n                }\n              </span>\n            }\n          </button>\n        </li>\n      }\n    </ul>\n  }\n\n  <!-- Default slot: anything the qualified selector above did not claim still\n       lands somewhere visible instead of disappearing. -->\n  <ng-content />\n</section>\n", styles: ["@charset \"UTF-8\";:host{display:block}.foldcal-chip{position:relative;display:flex;align-items:stretch;gap:var(--fold-space-sm);width:100%;padding:var(--fold-space-xs) var(--fold-space-sm);padding-inline-start:0;border:0;border-radius:var(--fold-calendar-band-radius, var(--fold-radius-sm));background:var(--fold-color-surface-raised);color:var(--fold-color-text);font:inherit;text-align:start;cursor:pointer;overflow:hidden;transition:background-color var(--fold-motion-fast) ease}.foldcal-chip:hover{background:var(--fold-color-surface-hover)}.foldcal-chip:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px}.foldcal-chip-bar{flex:0 0 var(--fold-calendar-bar-width, 3px);align-self:stretch;background:var(--fold-color-text-muted)}.foldcal-chip-icon{flex:none;align-self:center;margin-inline-start:var(--fold-space-sm);color:var(--fold-color-text-secondary)}.foldcal-chip-body{display:flex;flex-direction:column;gap:1px;min-width:0}.foldcal-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fold-text-sm);font-weight:500}.foldcal-chip-sub{color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs)}.foldcal-chip[data-tone=success] .foldcal-chip-bar{background:var(--fold-color-success)}.foldcal-chip[data-tone=warning] .foldcal-chip-bar{background:var(--fold-color-warning)}.foldcal-chip[data-tone=alert] .foldcal-chip-bar{background:var(--fold-color-alert)}.foldcal-chip[data-tone=muted] .foldcal-chip-bar{background:var(--fold-color-text-faded)}.foldcal-chip[data-tone=muted] .foldcal-chip-label{color:var(--fold-color-text-secondary);text-decoration:line-through;text-decoration-thickness:1px}@media(forced-colors:active){.foldcal-chip{border:1px solid CanvasText}.foldcal-chip-bar{forced-color-adjust:none}}@media(prefers-reduced-motion:reduce){.foldcal-chip{transition:none}}.foldcald{display:flex;flex-direction:column;gap:var(--fold-space-lg);padding:var(--fold-space-lg);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-card)}.foldcald-head{display:flex;align-items:baseline;gap:var(--fold-space-md);padding-bottom:var(--fold-space-md);border-bottom:1px solid var(--fold-color-border)}.foldcald-weekday{color:var(--fold-color-text-secondary);font-size:var(--fold-text-md);font-weight:600;letter-spacing:.04em;text-transform:uppercase}.foldcald-daynum{color:var(--fold-color-text);font-size:var(--fold-calendar-day-number-size, 32px);font-weight:700;font-variant-numeric:tabular-nums;line-height:1}.foldcald-daynum.is-today{color:var(--fold-color-primary-text)}.foldcald-month{color:var(--fold-color-text-secondary);font-size:var(--fold-text-lg);font-weight:600}.foldcald-list{display:flex;flex-direction:column;gap:var(--fold-space-sm);margin:0;padding:0;list-style:none}.foldcald-chip{padding-block:var(--fold-space-sm)}.foldcald-empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--fold-space-sm);padding:var(--fold-space-lg);border:1px dashed var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-subtle)}.foldcald-empty p{margin:0;color:var(--fold-color-text-secondary);font-size:var(--fold-text-sm)}@media(forced-colors:active){.foldcald-daynum.is-today{outline:2px solid Highlight;outline-offset:2px}.foldcald-head{border-block-end-color:CanvasText}}\n"] }]
+        }], propDecorators: { date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: true }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], today: [{ type: i0.Input, args: [{ isSignal: true, alias: "today", required: false }] }], eventClick: [{ type: i0.Output, args: ["eventClick"] }] } });
+
+/**
+ * `<fold-calendar-list>` — everything in a range, in date order.
+ *
+ * The flat reading of the same data: no grid, no packing, so nothing is ever
+ * hidden behind a lane budget. Each row leads with the span it covers, which
+ * is what the grid views can only imply.
+ *
+ * For a sortable, column-configurable table instead, feed
+ * `foldEventsInRange()` straight into {@link FoldDataTableComponent} — this
+ * view stays deliberately small.
+ *
+ * ## Inputs
+ * | Input    | Type                     | Default | Meaning |
+ * |----------|--------------------------|---------|---------|
+ * | `events` | `FoldCalendarEvent<T>[]` | `[]`    | Source events. |
+ * | `from`   | `FoldCalendarDate`       | —       | Range start; omit to list everything. |
+ * | `to`     | `FoldCalendarDate`       | —       | Range end; omit to list everything. |
+ * | `locale` | `string`                 | runtime | Drives the span labels through `Intl`. |
+ * | `labels` | `Partial<FoldCalendarLabels>` | — | Per-instance label overrides. |
+ *
+ * ## Outputs
+ * | Output       | Payload                | Fires on |
+ * |--------------|------------------------|----------|
+ * | `eventClick` | `FoldCalendarEvent<T>` | A row activated. |
+ *
+ * ## Theming
+ * | CSS variable                       | Default | Sets |
+ * |------------------------------------|---------|------|
+ * | `--fold-calendar-list-date-width`  | `7rem`  | The leading date column — widen it for verbose locales. |
+ * | `--fold-calendar-bar-width`        | `3px`   | The tone bar down a row's leading edge. |
+ *
+ * A projected `foldCalendarEvent` template replaces a row's **whole** inside,
+ * as in every other view: the built-in bar and date belong to the default
+ * rendering, not to the frame around it.
+ *
+ * @selector `fold-calendar-list`
+ *
+ * @example
+ * ```html
+ * <fold-calendar-list
+ *   [events]="events()"
+ *   [from]="range().from"
+ *   [to]="range().to"
+ *   (eventClick)="open($event)"
+ * />
+ * ```
+ */
+class FoldCalendarListComponent {
+    /** Source events. */
+    events = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []));
+    /** Range start, inclusive. Omit (with `to`) to list every event given. */
+    from = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "from" }] : /* istanbul ignore next */ []));
+    /** Range end, inclusive. */
+    to = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "to" }] : /* istanbul ignore next */ []));
+    /** A row was activated. */
+    eventClick = output();
+    /** Labels, locale and the projected chip template — see the directive. */
+    chrome = inject(FoldCalendarChromeDirective);
+    /** In range (when one is given), earliest first. */
+    rows = computed(() => {
+        const from = this.from();
+        const to = this.to();
+        const scoped = from === undefined || to === undefined
+            ? this.events()
+            : foldEventsInRange(this.events(), from, to);
+        return [...scoped].sort((a, b) => a.start < b.start ? -1 : a.start > b.start ? 1 : 0);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    /**
+     * The span, collapsed to one date when it covers a single day — `Intl`'s
+     * own range formatter does that, and picks the locale's separator and its
+     * order, which is why this is not a translatable label.
+     */
+    rangeLabel(event) {
+        return this.chrome.formatRange(event.start, event.end, "dayMonthShort");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldCalendarListComponent, isStandalone: true, selector: "fold-calendar-list", inputs: { events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, from: { classPropertyName: "from", publicName: "from", isSignal: true, isRequired: false, transformFunction: null }, to: { classPropertyName: "to", publicName: "to", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { eventClick: "eventClick" }, hostDirectives: [{ directive: FoldCalendarChromeDirective, inputs: ["locale", "locale", "labels", "labels", "formats", "formats"] }], ngImport: i0, template: "@if (rows().length === 0) {\n  <p class=\"foldcall-empty\">{{ chrome.l().emptyRange }}</p>\n} @else {\n  <ul class=\"foldcall\">\n    @for (event of rows(); track event.id) {\n      <li>\n        <!--\n          A projected template replaces the row's **whole** inside, exactly as\n          it does in the other four views. Rendering the bar and the date\n          outside the @if would make the same template mean something different\n          here, and drop a one-element template into a four-column grid.\n        -->\n        <button\n          type=\"button\"\n          class=\"foldcall-row\"\n          [class.is-custom]=\"chrome.eventContent() !== null\"\n          [attr.data-tone]=\"event.tone ?? 'neutral'\"\n          (click)=\"eventClick.emit(event)\"\n        >\n          @if (chrome.eventContent(); as projected) {\n            <ng-container\n              [ngTemplateOutlet]=\"projected\"\n              [ngTemplateOutletContext]=\"{ $implicit: event, band: null }\"\n            />\n          } @else {\n            <span class=\"foldcall-bar\"></span>\n            <span class=\"foldcall-when\">{{ rangeLabel(event) }}</span>\n            <span class=\"foldcall-body\">\n              @if (event.icon; as icon) {\n                <fold-icon class=\"foldcall-icon\" [name]=\"icon\" size=\"sm\" />\n              }\n              <span class=\"foldcall-label\">{{ event.label }}</span>\n            </span>\n            <span class=\"foldcall-sub\">{{ event.subline ?? \"\" }}</span>\n          }\n        </button>\n      </li>\n    }\n  </ul>\n}\n", styles: [":host{display:block;container-type:inline-size}.foldcall{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-card);overflow:clip}.foldcall li+li .foldcall-row{border-top:1px solid var(--fold-color-border-subtle)}.foldcall-row{display:grid;grid-template-columns:var(--fold-calendar-bar-width, 3px) var(--fold-calendar-list-date-width, 7rem) minmax(0,1fr) auto;align-items:center;gap:var(--fold-space-md);width:100%;padding:var(--fold-space-sm) var(--fold-space-md);padding-inline-start:0;border:0;background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer;transition:background-color var(--fold-motion-fast) ease}.foldcall-row.is-custom{display:flex;align-items:center;gap:var(--fold-space-sm);padding-inline-start:var(--fold-space-md)}.foldcall-row:hover{background:var(--fold-color-surface-hover)}.foldcall-row:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px}.foldcall-bar{align-self:stretch;background:var(--fold-color-text-muted)}.foldcall-when{color:var(--fold-color-text-secondary);font-size:var(--fold-text-sm);font-variant-numeric:tabular-nums;white-space:nowrap}.foldcall-body{display:flex;align-items:center;gap:var(--fold-space-sm);min-width:0}.foldcall-icon{flex:none;color:var(--fold-color-text-secondary)}.foldcall-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fold-text-sm);font-weight:500}.foldcall-sub{color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs);white-space:nowrap}.foldcall-empty{margin:0;padding:var(--fold-space-xl);border:1px dashed var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-subtle);color:var(--fold-color-text-secondary);font-size:var(--fold-text-sm);text-align:center}.foldcall-row[data-tone=success] .foldcall-bar{background:var(--fold-color-success)}.foldcall-row[data-tone=warning] .foldcall-bar{background:var(--fold-color-warning)}.foldcall-row[data-tone=alert] .foldcall-bar{background:var(--fold-color-alert)}.foldcall-row[data-tone=muted] .foldcall-bar{background:var(--fold-color-text-faded)}.foldcall-row[data-tone=muted] .foldcall-label{color:var(--fold-color-text-secondary);text-decoration:line-through;text-decoration-thickness:1px}@media(forced-colors:active){.foldcall-row{border:1px solid CanvasText}.foldcall-bar{forced-color-adjust:none}}@container (max-width: 640px){.foldcall-row:not(.is-custom){grid-template-columns:var(--fold-calendar-bar-width, 3px) var(--fold-calendar-list-date-width, 7rem) minmax(0,1fr)}.foldcall-sub{grid-column:2/-1}}@media(forced-colors:active){.foldcall-row:focus-visible{outline-color:Highlight}}@media(prefers-reduced-motion:reduce){.foldcall-row{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "fold-calendar-list", standalone: true, imports: [NgTemplateOutlet, FoldIconComponent], hostDirectives: [
+                        {
+                            directive: FoldCalendarChromeDirective,
+                            inputs: ["locale", "labels", "formats"],
+                        },
+                    ], template: "@if (rows().length === 0) {\n  <p class=\"foldcall-empty\">{{ chrome.l().emptyRange }}</p>\n} @else {\n  <ul class=\"foldcall\">\n    @for (event of rows(); track event.id) {\n      <li>\n        <!--\n          A projected template replaces the row's **whole** inside, exactly as\n          it does in the other four views. Rendering the bar and the date\n          outside the @if would make the same template mean something different\n          here, and drop a one-element template into a four-column grid.\n        -->\n        <button\n          type=\"button\"\n          class=\"foldcall-row\"\n          [class.is-custom]=\"chrome.eventContent() !== null\"\n          [attr.data-tone]=\"event.tone ?? 'neutral'\"\n          (click)=\"eventClick.emit(event)\"\n        >\n          @if (chrome.eventContent(); as projected) {\n            <ng-container\n              [ngTemplateOutlet]=\"projected\"\n              [ngTemplateOutletContext]=\"{ $implicit: event, band: null }\"\n            />\n          } @else {\n            <span class=\"foldcall-bar\"></span>\n            <span class=\"foldcall-when\">{{ rangeLabel(event) }}</span>\n            <span class=\"foldcall-body\">\n              @if (event.icon; as icon) {\n                <fold-icon class=\"foldcall-icon\" [name]=\"icon\" size=\"sm\" />\n              }\n              <span class=\"foldcall-label\">{{ event.label }}</span>\n            </span>\n            <span class=\"foldcall-sub\">{{ event.subline ?? \"\" }}</span>\n          }\n        </button>\n      </li>\n    }\n  </ul>\n}\n", styles: [":host{display:block;container-type:inline-size}.foldcall{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-card);overflow:clip}.foldcall li+li .foldcall-row{border-top:1px solid var(--fold-color-border-subtle)}.foldcall-row{display:grid;grid-template-columns:var(--fold-calendar-bar-width, 3px) var(--fold-calendar-list-date-width, 7rem) minmax(0,1fr) auto;align-items:center;gap:var(--fold-space-md);width:100%;padding:var(--fold-space-sm) var(--fold-space-md);padding-inline-start:0;border:0;background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer;transition:background-color var(--fold-motion-fast) ease}.foldcall-row.is-custom{display:flex;align-items:center;gap:var(--fold-space-sm);padding-inline-start:var(--fold-space-md)}.foldcall-row:hover{background:var(--fold-color-surface-hover)}.foldcall-row:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px}.foldcall-bar{align-self:stretch;background:var(--fold-color-text-muted)}.foldcall-when{color:var(--fold-color-text-secondary);font-size:var(--fold-text-sm);font-variant-numeric:tabular-nums;white-space:nowrap}.foldcall-body{display:flex;align-items:center;gap:var(--fold-space-sm);min-width:0}.foldcall-icon{flex:none;color:var(--fold-color-text-secondary)}.foldcall-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fold-text-sm);font-weight:500}.foldcall-sub{color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs);white-space:nowrap}.foldcall-empty{margin:0;padding:var(--fold-space-xl);border:1px dashed var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-subtle);color:var(--fold-color-text-secondary);font-size:var(--fold-text-sm);text-align:center}.foldcall-row[data-tone=success] .foldcall-bar{background:var(--fold-color-success)}.foldcall-row[data-tone=warning] .foldcall-bar{background:var(--fold-color-warning)}.foldcall-row[data-tone=alert] .foldcall-bar{background:var(--fold-color-alert)}.foldcall-row[data-tone=muted] .foldcall-bar{background:var(--fold-color-text-faded)}.foldcall-row[data-tone=muted] .foldcall-label{color:var(--fold-color-text-secondary);text-decoration:line-through;text-decoration-thickness:1px}@media(forced-colors:active){.foldcall-row{border:1px solid CanvasText}.foldcall-bar{forced-color-adjust:none}}@container (max-width: 640px){.foldcall-row:not(.is-custom){grid-template-columns:var(--fold-calendar-bar-width, 3px) var(--fold-calendar-list-date-width, 7rem) minmax(0,1fr)}.foldcall-sub{grid-column:2/-1}}@media(forced-colors:active){.foldcall-row:focus-visible{outline-color:Highlight}}@media(prefers-reduced-motion:reduce){.foldcall-row{transition:none}}\n"] }]
+        }], propDecorators: { events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], from: [{ type: i0.Input, args: [{ isSignal: true, alias: "from", required: false }] }], to: [{ type: i0.Input, args: [{ isSignal: true, alias: "to", required: false }] }], eventClick: [{ type: i0.Output, args: ["eventClick"] }] } });
+
+/**
+ * Where overlapping timed events sit side by side — the time grid's only
+ * genuinely algorithmic part, and the same shape as the month's lane packing
+ * turned ninety degrees: intervals over **minutes** instead of days, laid out
+ * across the column's width instead of down its height.
+ *
+ * Pure, so the rule can be exercised exhaustively without a grid.
+ */
+/**
+ * The narrowest an event is allowed to get. Past this, three overlapping
+ * meetings are three unreadable slivers, and a reader is better served by a
+ * `+N` than by a column two pixels wide — which is the caller's call to make,
+ * so this only reports the number.
+ */
+const MIN_VISIBLE_COLUMNS = 1;
+/** Whether two intervals actually share a minute. */
+function overlaps(a, b) {
+    return a.startMinute < b.endMinute && b.startMinute < a.endMinute;
+}
+/**
+ * Lays intervals out across the width, one slot per input, in input order.
+ *
+ * Two events that merely touch — one ends at 10:00, the next starts at 10:00 —
+ * do **not** overlap and each keep the full width. That is the difference
+ * between the month grid (inclusive days: touching means colliding) and a time
+ * grid (exclusive minutes: touching means back-to-back), and getting it wrong
+ * halves the width of every event in a packed morning.
+ *
+ * Events are grouped into **clusters** — runs connected by overlap — and each
+ * cluster is widened only as far as it needs, so one triple-booked hour does
+ * not narrow the rest of the day.
+ */
+function foldLayOutOverlaps(intervals) {
+    const order = intervals
+        .map((interval, index) => ({ interval, index }))
+        .sort((a, b) => a.interval.startMinute !== b.interval.startMinute
+        ? a.interval.startMinute - b.interval.startMinute
+        : b.interval.endMinute -
+            b.interval.startMinute -
+            (a.interval.endMinute - a.interval.startMinute));
+    const slots = intervals.map(() => ({
+        column: 0,
+        columns: MIN_VISIBLE_COLUMNS,
+    }));
+    /** The cluster being filled: its members' indices and its lane end times. */
+    let cluster = [];
+    let laneEnds = [];
+    const closeCluster = () => {
+        for (const index of cluster) {
+            slots[index] = {
+                column: slots[index]?.column ?? 0,
+                columns: laneEnds.length,
+            };
+        }
+        cluster = [];
+        laneEnds = [];
+    };
+    for (const { interval, index } of order) {
+        // A cluster ends where nothing it holds is still running.
+        const stillRunning = laneEnds.some((end) => end > interval.startMinute);
+        if (!stillRunning && cluster.length > 0) {
+            closeCluster();
+        }
+        const reusable = laneEnds.findIndex((end) => end <= interval.startMinute);
+        const column = reusable === -1 ? laneEnds.length : reusable;
+        laneEnds[column] = interval.endMinute;
+        slots[index] = { column, columns: laneEnds.length };
+        cluster.push(index);
+    }
+    if (cluster.length > 0) {
+        closeCluster();
+    }
+    return slots;
+}
+/** Whether `a` and `b` would need separate columns — exported for tests. */
+function foldOverlaps(a, b) {
+    return overlaps(a, b);
+}
+
+const DEFAULT_DAY_COUNT = 7;
+const DEFAULT_ALL_DAY_LANES = 2;
+const MINUTES_PER_HOUR = 60;
+/**
+ * Whether an event is placed on the clock or on the strip.
+ *
+ * **Both** ends are needed: an event with only a start has no height, and one
+ * with only an end has no origin. Half a time is a data bug, and treating it as
+ * all-day is the reading that loses the least.
+ */
+function foldIsTimed(event) {
+    return event.startTime !== undefined && event.endTime !== undefined;
+}
+/** The window a timed event occupies on one particular day, or `null`. */
+function minutesOnDay(event, day, startMinute, endMinute) {
+    const firstDay = foldToEpochDay(event.start);
+    const lastDay = foldToEpochDay(event.end);
+    if (day < firstDay || day > lastDay) {
+        return null;
+    }
+    // A span crossing midnight runs to the end of each day it passes through:
+    // Monday 14:00 → Wednesday 10:00 is three blocks, not one impossible one.
+    const rawFrom = day === firstDay ? foldToMinutes(event.startTime ?? "00:00") : 0;
+    const rawTo = day === lastDay
+        ? foldToMinutes(event.endTime ?? "24:00")
+        : FOLD_MINUTES_PER_DAY;
+    const from = Math.max(startMinute, Math.min(rawFrom, rawTo));
+    const to = Math.min(endMinute, Math.max(rawFrom, rawTo));
+    if (to <= from) {
+        return null; // entirely outside the visible window
+    }
+    return {
+        from,
+        to,
+        before: day > firstDay || rawFrom < startMinute,
+        after: day < lastDay || rawTo > endMinute,
+    };
+}
+/** The grid's own window: which days, and which minutes of them. */
+function bounds(options) {
+    const dayCount = Math.max(1, Math.trunc(options.dayCount ?? DEFAULT_DAY_COUNT));
+    const snap = options.snapToWeek !== false && dayCount === DEFAULT_DAY_COUNT;
+    const firstDay = foldToEpochDay(snap
+        ? foldStartOfWeek(options.date, options.weekStartsOn ?? "mon")
+        : options.date);
+    const startMinute = foldToMinutes(options.dayStart ?? "00:00");
+    const rawEnd = foldToMinutes(options.dayEnd ?? "24:00");
+    return {
+        firstDay,
+        dayCount,
+        startMinute,
+        // A window with no height would divide by zero downstream.
+        endMinute: rawEnd > startMinute ? rawEnd : FOLD_MINUTES_PER_DAY,
+    };
+}
+/** The hour marks inside the window, including the one it opens on. */
+function hourMarks(startMinute, endMinute) {
+    const marks = [];
+    const first = Math.ceil(startMinute / MINUTES_PER_HOUR) * MINUTES_PER_HOUR;
+    for (let minute = first; minute < endMinute; minute += MINUTES_PER_HOUR) {
+        const hour = Math.floor(minute / MINUTES_PER_HOUR);
+        marks.push(`${hour < 10 ? "0" : ""}${hour}:00`);
+    }
+    return marks;
+}
+/**
+ * Lays out `dayCount` days as hour columns plus an all-day strip.
+ *
+ * Timed events are placed on the clock; everything else — no times, or only one
+ * of them — goes on the strip, where it spans days exactly as it does in the
+ * month grid.
+ */
+function foldBuildTimeGrid(events, options) {
+    const { firstDay, dayCount, startMinute, endMinute } = bounds(options);
+    const span = endMinute - startMinute;
+    const timed = events.filter((event) => foldIsTimed(event));
+    const allDayEvents = events.filter((event) => !foldIsTimed(event));
+    const hidden = new Map();
+    const strip = foldPackRow(foldCollapseGroups(allDayEvents).filter((candidate) => candidate.endDay >= firstDay &&
+        candidate.startDay < firstDay + dayCount), {
+        start: foldFromEpochDay(firstDay),
+        startDay: firstDay,
+        dayCount,
+    }, Math.max(0, Math.trunc(options.maxAllDayLanes ?? DEFAULT_ALL_DAY_LANES)), hidden);
+    const context = {
+        month: foldFromEpochDay(firstDay).slice(0, 7),
+        today: options.today,
+        weekendDays: foldWeekendOr(options.weekendDays),
+        counts: foldCountByDay(events, firstDay, firstDay + dayCount - 1),
+        hidden: FOLD_NO_HIDDEN_DAYS,
+    };
+    const columns = Array.from({ length: dayCount }, (_unused, offset) => {
+        const day = firstDay + offset;
+        const date = foldFromEpochDay(day);
+        const placed = timed
+            .map((event) => ({
+            event,
+            window: minutesOnDay(event, day, startMinute, endMinute),
+        }))
+            .filter((candidate) => candidate.window !== null);
+        const slots = foldLayOutOverlaps(placed.map(({ window }) => ({
+            startMinute: window.from,
+            endMinute: window.to,
+        })));
+        return {
+            day: foldMakeDay(day, context),
+            blocks: placed.map(({ event, window }, index) => ({
+                key: `${event.id}@${date}`,
+                event,
+                top: (window.from - startMinute) / span,
+                height: (window.to - window.from) / span,
+                column: slots[index]?.column ?? 0,
+                columns: slots[index]?.columns ?? 1,
+                continuesBefore: window.before,
+                continuesAfter: window.after,
+            })),
+        };
+    });
+    return {
+        columns,
+        allDay: strip.bands,
+        allDayHiddenCount: strip.hiddenCount,
+        hours: hourMarks(startMinute, endMinute),
+        startMinute,
+        endMinute,
+    };
+}
+
+/**
+ * `<fold-calendar-timegrid>` — days as hour columns, with an all-day strip.
+ *
+ * The reading the other four cannot give: **when inside a day**. A meeting is a
+ * block whose height is its duration and whose width is shared with whatever it
+ * collides with; an absence is a band across the strip on top, spanning days
+ * exactly as it does in the month view — the same packer draws both, so a
+ * three-day leave request reads identically wherever it appears.
+ *
+ * Times are wall-clock `HH:mm`, never instants — the same decision as the date,
+ * for the same reason. 09:00 is the hour on the wall; the app converts once at
+ * its own boundary, and no zone can move a meeting after that.
+ *
+ * ## Inputs
+ * | Input             | Type                     | Default   | Meaning |
+ * |-------------------|--------------------------|-----------|---------|
+ * | `date`            | `FoldCalendarDate`       | —         | Any date in the range. |
+ * | `events`          | `FoldCalendarEvent<T>[]` | `[]`      | Timed events go on the clock, the rest on the strip. |
+ * | `dayCount`        | `number`                 | `7`       | `1` is a day view, `7` a week. |
+ * | `today`           | `FoldCalendarDate`       | —         | The column to mark. |
+ * | `now`             | `FoldCalendarTime`       | —         | Draws the current-time line on `today`'s column. Passed in, never read from a clock — the package has none, and an SSR render must not invent one. |
+ * | `dayStart`/`dayEnd` | `FoldCalendarTime`     | `00:00`/`24:00` | The visible window; `08:00`–`20:00` is a working day. |
+ * | `weekStartsOn`    | `FoldWeekday`            | the locale's | Which day opens the week. |
+ * | `weekendDays`     | `FoldWeekday[]`          | the locale's | Which columns are shaded. |
+ * | `maxAllDayLanes`  | `number`                 | `2`       | Lanes the strip stacks before overflowing. |
+ * | `locale`/`labels`/`formats` | —              | —         | See the other views. |
+ *
+ * ## Outputs
+ * | Output       | Payload                | Fires on |
+ * |--------------|------------------------|----------|
+ * | `dayClick`   | `FoldCalendarDate`     | A column header activated. |
+ * | `eventClick` | `FoldCalendarEvent<T>` | A block or an all-day band activated. |
+ *
+ * ## Theming
+ * | CSS variable                          | Default | Sets |
+ * |---------------------------------------|---------|------|
+ * | `--fold-calendar-timegrid-height`     | `640px` | Height of the hour area. |
+ * | `--fold-calendar-timegrid-gutter`     | `56px`  | Width of the hour labels. |
+ * | `--fold-calendar-timegrid-lane`       | `20px`  | Height of one all-day lane. |
+ * | `--fold-calendar-bar-width`           | `3px`   | The tone bar down a block's leading edge. |
+ *
+ * ## Accessibility
+ * Every block and every band is a real `<button>` inside the column it belongs
+ * to, so the tab order follows the day and this view needs none of the month
+ * grid's roving-tabindex machinery. A block's accessible name carries its
+ * **times**, which its position on the clock conveys only visually.
+ *
+ * @selector `fold-calendar-timegrid`
+ *
+ * @example
+ * ```html
+ * <fold-calendar-timegrid
+ *   [date]="date()"
+ *   [events]="events()"
+ *   [today]="today"
+ *   [now]="now()"
+ *   dayStart="08:00"
+ *   dayEnd="20:00"
+ *   (eventClick)="open($event)"
+ * />
+ * ```
+ */
+class FoldCalendarTimegridComponent {
+    /** Any date inside the range on display. */
+    date = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
+    /** Events to plot; timed ones on the clock, the rest on the strip. */
+    events = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []));
+    /** Days to show: `1` is a day view, `7` a week. @default 7 */
+    dayCount = input(7, { ...(ngDevMode ? { debugName: "dayCount" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** The day to mark as today. */
+    today = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "today" }] : /* istanbul ignore next */ []));
+    /**
+     * The current wall-clock time, for the "now" line. Passed in rather than
+     * read: this package owns no clock (`today` works the same way), and a
+     * server render that invented one would hydrate to a different position.
+     */
+    now = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "now" }] : /* istanbul ignore next */ []));
+    /** First hour on screen. @default '00:00' */
+    dayStart = input("00:00", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dayStart" }] : /* istanbul ignore next */ []));
+    /** Last hour on screen. @default '24:00' */
+    dayEnd = input("24:00", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dayEnd" }] : /* istanbul ignore next */ []));
+    /** Day the week starts on. @default the locale's own first day */
+    weekStartsOn = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "weekStartsOn" }] : /* istanbul ignore next */ []));
+    /** Days shaded as the weekend. @default the locale's own weekend */
+    weekendDays = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "weekendDays" }] : /* istanbul ignore next */ []));
+    /** Lanes the all-day strip stacks before events overflow. @default 2 */
+    maxAllDayLanes = input(2, { ...(ngDevMode ? { debugName: "maxAllDayLanes" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** A column header was activated. */
+    dayClick = output();
+    /** A block or an all-day band was activated. */
+    eventClick = output();
+    /** Labels, locale and the projected chip template — see the directive. */
+    chrome = inject(FoldCalendarChromeDirective);
+    grid = computed(() => foldBuildTimeGrid(this.events(), {
+        date: this.date(),
+        dayCount: this.dayCount(),
+        weekStartsOn: this.chrome.anchor(this.weekStartsOn()),
+        weekendDays: this.chrome.weekend(this.weekendDays()),
+        today: this.today(),
+        dayStart: this.dayStart(),
+        dayEnd: this.dayEnd(),
+        maxAllDayLanes: this.maxAllDayLanes(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []));
+    /** Lane rows for the all-day strip, or none when nothing spans. */
+    stripRows = computed(() => {
+        const lanes = this.grid().allDay.reduce((highest, band) => Math.max(highest, band.lane + 1), 0);
+        return `repeat(${lanes}, var(--fold-calendar-timegrid-lane, 20px))`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stripRows" }] : /* istanbul ignore next */ []));
+    /** Where the "now" line sits, as a fraction of the window, or `null`. */
+    nowOffset = computed(() => {
+        const time = this.now();
+        if (time === undefined) {
+            return null;
+        }
+        const { startMinute, endMinute } = this.grid();
+        const minute = foldToMinutes(time);
+        if (minute < startMinute || minute > endMinute) {
+            return null;
+        }
+        return (minute - startMinute) / (endMinute - startMinute);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nowOffset" }] : /* istanbul ignore next */ []));
+    weekdayName(column) {
+        return this.chrome.format(column.day.date, "weekdayShort");
+    }
+    hourLabel(hour) {
+        return this.chrome.formatTime(hour);
+    }
+    /** A column's accessible name: its date, the today marker, and its load. */
+    columnLabel(column) {
+        const labels = this.chrome.l();
+        const parts = [this.chrome.format(column.day.date, "dateFull")];
+        if (column.day.isToday) {
+            parts.push(labels.today);
+        }
+        if (column.day.eventCount > 0) {
+            parts.push(labels.eventCount(column.day.eventCount));
+        }
+        return parts.join(", ");
+    }
+    /**
+     * A block's accessible name — its times first, because where it sits on the
+     * clock is information a screen reader has no other way to get.
+     */
+    blockLabel(block) {
+        const { startTime, endTime, label } = block.event;
+        if (startTime === undefined || endTime === undefined) {
+            return label;
+        }
+        return `${this.chrome.formatTime(startTime)} – ${this.chrome.formatTime(endTime)}, ${label}`;
+    }
+    /** A band's text: the group's label when it stands for several events. */
+    bandLabel(band) {
+        if (band.groupSize > 1) {
+            return band.event.groupLabel ?? band.event.label;
+        }
+        return band.event.label;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarTimegridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldCalendarTimegridComponent, isStandalone: true, selector: "fold-calendar-timegrid", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, dayCount: { classPropertyName: "dayCount", publicName: "dayCount", isSignal: true, isRequired: false, transformFunction: null }, today: { classPropertyName: "today", publicName: "today", isSignal: true, isRequired: false, transformFunction: null }, now: { classPropertyName: "now", publicName: "now", isSignal: true, isRequired: false, transformFunction: null }, dayStart: { classPropertyName: "dayStart", publicName: "dayStart", isSignal: true, isRequired: false, transformFunction: null }, dayEnd: { classPropertyName: "dayEnd", publicName: "dayEnd", isSignal: true, isRequired: false, transformFunction: null }, weekStartsOn: { classPropertyName: "weekStartsOn", publicName: "weekStartsOn", isSignal: true, isRequired: false, transformFunction: null }, weekendDays: { classPropertyName: "weekendDays", publicName: "weekendDays", isSignal: true, isRequired: false, transformFunction: null }, maxAllDayLanes: { classPropertyName: "maxAllDayLanes", publicName: "maxAllDayLanes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dayClick: "dayClick", eventClick: "eventClick" }, hostDirectives: [{ directive: FoldCalendarChromeDirective, inputs: ["locale", "locale", "labels", "labels", "formats", "formats"] }], ngImport: i0, template: "<div class=\"foldcaltg\" [attr.aria-label]=\"chrome.l().grid\" role=\"group\">\n  <div class=\"foldcaltg-head\">\n    <span class=\"foldcaltg-corner\" aria-hidden=\"true\"></span>\n    @for (column of grid().columns; track column.day.date) {\n      <button\n        type=\"button\"\n        class=\"foldcaltg-dayhead\"\n        [class.is-today]=\"column.day.isToday\"\n        [class.is-weekend]=\"column.day.isWeekend\"\n        [attr.aria-label]=\"columnLabel(column)\"\n        [attr.aria-current]=\"column.day.isToday ? 'date' : null\"\n        (click)=\"dayClick.emit(column.day.date)\"\n      >\n        <span class=\"foldcaltg-weekday\">{{ weekdayName(column) }}</span>\n        <span class=\"foldcaltg-daynum\">{{ column.day.dayOfMonth }}</span>\n      </button>\n    }\n  </div>\n\n  <!-- The all-day strip: the same spanning bands the month grid draws. -->\n  @if (grid().allDay.length > 0) {\n    <div class=\"foldcaltg-allday\">\n      <span class=\"foldcaltg-gutter-label\">{{ chrome.l().allDay }}</span>\n      <div\n        class=\"foldcaltg-strip\"\n        [style.gridTemplateColumns]=\"\n          'repeat(' + grid().columns.length + ', 1fr)'\n        \"\n        [style.gridTemplateRows]=\"stripRows()\"\n      >\n        @for (band of grid().allDay; track band.key) {\n          <button\n            type=\"button\"\n            class=\"foldcal-chip foldcaltg-band\"\n            [attr.data-tone]=\"band.event.tone ?? 'neutral'\"\n            [class.continues-before]=\"band.continuesBefore\"\n            [class.continues-after]=\"band.continuesAfter\"\n            [style.gridColumn]=\"\n              band.startColumn + 1 + ' / ' + (band.endColumn + 2)\n            \"\n            [style.gridRow]=\"band.lane + 1\"\n            (click)=\"eventClick.emit(band.event)\"\n          >\n            @if (chrome.eventContent(); as projected) {\n              <ng-container\n                [ngTemplateOutlet]=\"projected\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: band.event,\n                  band: band,\n                }\"\n              />\n            } @else {\n              <span class=\"foldcal-chip-bar\"></span>\n              <span class=\"foldcal-chip-body\">\n                <span class=\"foldcal-chip-label\">{{ bandLabel(band) }}</span>\n              </span>\n            }\n          </button>\n        }\n      </div>\n    </div>\n  }\n\n  <!--\n    The hours scroll, so the region is a tab stop with a name: a scrollable\n    area a keyboard cannot reach is a scrollable area a keyboard user cannot\n    read (WCAG 2.1.1). Found by axe, not by looking at it.\n  -->\n  <div\n    class=\"foldcaltg-body\"\n    tabindex=\"0\"\n    role=\"group\"\n    [attr.aria-label]=\"chrome.l().hours\"\n  >\n    <!--\n      Positioned, not flowed: the label has to land on the same line as the rule\n      it names, and a flex column only gets there by coincidence.\n    -->\n    <div class=\"foldcaltg-gutter\" aria-hidden=\"true\">\n      @for (hour of grid().hours; track hour; let index = $index) {\n        <span\n          class=\"foldcaltg-hour\"\n          [class.is-first]=\"index === 0\"\n          [style.top.%]=\"(index / grid().hours.length) * 100\"\n          >{{ hourLabel(hour) }}</span\n        >\n      }\n    </div>\n\n    <div\n      class=\"foldcaltg-cols\"\n      [style.gridTemplateColumns]=\"'repeat(' + grid().columns.length + ', 1fr)'\"\n    >\n      @for (column of grid().columns; track column.day.date) {\n        <section\n          class=\"foldcaltg-col\"\n          [class.is-weekend]=\"column.day.isWeekend\"\n          [attr.aria-label]=\"columnLabel(column)\"\n        >\n          <!-- Hour rules, drawn per column so a column can be styled alone. -->\n          <span class=\"foldcaltg-rules\" aria-hidden=\"true\">\n            @for (hour of grid().hours; track hour) {\n              <span class=\"foldcaltg-rule\"></span>\n            }\n          </span>\n\n          @if (column.day.isToday && nowOffset() !== null) {\n            <span\n              class=\"foldcaltg-now\"\n              aria-hidden=\"true\"\n              [style.top.%]=\"(nowOffset() ?? 0) * 100\"\n            ></span>\n          }\n\n          @for (block of column.blocks; track block.key) {\n            <button\n              type=\"button\"\n              class=\"foldcaltg-block\"\n              [attr.data-tone]=\"block.event.tone ?? 'neutral'\"\n              [class.continues-before]=\"block.continuesBefore\"\n              [class.continues-after]=\"block.continuesAfter\"\n              [attr.aria-label]=\"blockLabel(block)\"\n              [style.top.%]=\"block.top * 100\"\n              [style.height.%]=\"block.height * 100\"\n              [style.insetInlineStart.%]=\"(block.column / block.columns) * 100\"\n              [style.width.%]=\"(1 / block.columns) * 100\"\n              (click)=\"eventClick.emit(block.event)\"\n            >\n              @if (chrome.eventContent(); as projected) {\n                <ng-container\n                  [ngTemplateOutlet]=\"projected\"\n                  [ngTemplateOutletContext]=\"{\n                    $implicit: block.event,\n                    band: null,\n                  }\"\n                />\n              } @else {\n                <span class=\"foldcaltg-block-bar\"></span>\n                <!-- The glyph sits beside the label, never above it: a\n                     half-hour block is one line tall and the icon would take\n                     it. -->\n                @if (block.event.icon; as icon) {\n                  <fold-icon\n                    class=\"foldcaltg-block-icon\"\n                    [name]=\"icon\"\n                    size=\"sm\"\n                  />\n                }\n                <span class=\"foldcaltg-block-body\">\n                  <span class=\"foldcaltg-block-label\">{{\n                    block.event.label\n                  }}</span>\n                  @if (block.event.subline) {\n                    <span class=\"foldcaltg-block-sub\">{{\n                      block.event.subline\n                    }}</span>\n                  }\n                </span>\n              }\n            </button>\n          }\n        </section>\n      }\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.foldcal-chip{position:relative;display:flex;align-items:stretch;gap:var(--fold-space-sm);width:100%;padding:var(--fold-space-xs) var(--fold-space-sm);padding-inline-start:0;border:0;border-radius:var(--fold-calendar-band-radius, var(--fold-radius-sm));background:var(--fold-color-surface-raised);color:var(--fold-color-text);font:inherit;text-align:start;cursor:pointer;overflow:hidden;transition:background-color var(--fold-motion-fast) ease}.foldcal-chip:hover{background:var(--fold-color-surface-hover)}.foldcal-chip:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px}.foldcal-chip-bar{flex:0 0 var(--fold-calendar-bar-width, 3px);align-self:stretch;background:var(--fold-color-text-muted)}.foldcal-chip-icon{flex:none;align-self:center;margin-inline-start:var(--fold-space-sm);color:var(--fold-color-text-secondary)}.foldcal-chip-body{display:flex;flex-direction:column;gap:1px;min-width:0}.foldcal-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fold-text-sm);font-weight:500}.foldcal-chip-sub{color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs)}.foldcal-chip[data-tone=success] .foldcal-chip-bar{background:var(--fold-color-success)}.foldcal-chip[data-tone=warning] .foldcal-chip-bar{background:var(--fold-color-warning)}.foldcal-chip[data-tone=alert] .foldcal-chip-bar{background:var(--fold-color-alert)}.foldcal-chip[data-tone=muted] .foldcal-chip-bar{background:var(--fold-color-text-faded)}.foldcal-chip[data-tone=muted] .foldcal-chip-label{color:var(--fold-color-text-secondary);text-decoration:line-through;text-decoration-thickness:1px}@media(forced-colors:active){.foldcal-chip{border:1px solid CanvasText}.foldcal-chip-bar{forced-color-adjust:none}}@media(prefers-reduced-motion:reduce){.foldcal-chip{transition:none}}.foldcaltg{display:flex;flex-direction:column;min-height:0;border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-card);overflow:clip}.foldcaltg-head{display:grid;grid-template-columns:var(--fold-calendar-timegrid-gutter, 56px) repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);background:var(--fold-color-surface-subtle);border-bottom:1px solid var(--fold-color-border)}.foldcaltg-corner{border-inline-end:1px solid var(--fold-color-border-subtle)}.foldcaltg-dayhead{display:flex;flex-direction:column;align-items:center;gap:1px;padding:var(--fold-space-sm) var(--fold-space-xs);border:0;border-inline-end:1px solid var(--fold-color-border-subtle);background:transparent;color:inherit;font:inherit;cursor:pointer}.foldcaltg-dayhead:last-child{border-inline-end:0}.foldcaltg-dayhead:hover{background:var(--fold-color-surface-hover)}.foldcaltg-dayhead:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px}.foldcaltg-dayhead.is-weekend{background:var(--fold-color-surface-sunken)}.foldcaltg-weekday{color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase}.foldcaltg-daynum{color:var(--fold-color-text-secondary);font-size:var(--fold-text-md);font-variant-numeric:tabular-nums}.foldcaltg-dayhead.is-today{box-shadow:inset 0 2px 0 0 var(--fold-color-primary)}.foldcaltg-dayhead.is-today .foldcaltg-daynum{color:var(--fold-color-primary-text);font-weight:700}.foldcaltg-allday{display:grid;grid-template-columns:var(--fold-calendar-timegrid-gutter, 56px) 1fr;padding-block:var(--fold-space-xs);border-bottom:1px solid var(--fold-color-border)}.foldcaltg-gutter-label{padding-inline:var(--fold-space-xs);border-inline-end:1px solid var(--fold-color-border-subtle);color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs);text-align:end}.foldcaltg-strip{display:grid;gap:1px}.foldcaltg-band{min-width:0;margin-inline:var(--fold-calendar-band-gutter, var(--fold-space-xs));padding-block:0;font-size:var(--fold-text-xs)}.foldcaltg-band.continues-before{margin-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.foldcaltg-band.continues-after{margin-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.foldcaltg-body{display:grid}.foldcaltg-body:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px}.foldcaltg-body{grid-template-columns:var(--fold-calendar-timegrid-gutter, 56px) 1fr;height:var(--fold-calendar-timegrid-height, 640px);overflow-y:auto}.foldcaltg-gutter{position:relative;border-inline-end:1px solid var(--fold-color-border-subtle)}.foldcaltg-hour{position:absolute;inset-inline:0;padding-inline-end:var(--fold-space-xs);color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs);font-variant-numeric:tabular-nums;text-align:end;transform:translateY(-.5em)}.foldcaltg-hour.is-first{transform:none}.foldcaltg-cols{display:grid}.foldcaltg-col{position:relative;border-inline-end:1px solid var(--fold-color-border-subtle)}.foldcaltg-col:last-of-type{border-inline-end:0}.foldcaltg-col.is-weekend{background:var(--fold-color-surface-subtle)}.foldcaltg-rules{position:absolute;inset:0;display:flex;flex-direction:column}.foldcaltg-rule{flex:1;border-top:1px solid var(--fold-color-border-subtle)}.foldcaltg-now{position:absolute;inset-inline:0;z-index:2;height:2px;background:var(--fold-color-alert)}.foldcaltg-now:before{content:\"\";position:absolute;inset-inline-start:0;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--fold-color-alert)}.foldcaltg-block{position:absolute;z-index:1;display:flex;align-items:stretch;gap:var(--fold-space-xs);min-height:14px;padding:0;padding-inline-end:var(--fold-space-xs);border:0;border-radius:var(--fold-calendar-band-radius, var(--fold-radius-sm));background:var(--fold-color-surface-raised);color:var(--fold-color-text);font:inherit;font-size:var(--fold-text-xs);text-align:start;cursor:pointer;overflow:hidden;transition:filter var(--fold-motion-fast) ease}.foldcaltg-block:hover{z-index:3;filter:brightness(1.08)}.foldcaltg-block:focus-visible{z-index:3;outline:2px solid var(--fold-color-primary);outline-offset:-2px}.foldcaltg-block.continues-before{border-start-start-radius:0;border-start-end-radius:0}.foldcaltg-block.continues-after{border-end-start-radius:0;border-end-end-radius:0}.foldcaltg-block-bar{flex:0 0 var(--fold-calendar-bar-width, 3px);align-self:stretch;background:var(--fold-color-text-muted)}.foldcaltg-block-body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;padding-block:1px}.foldcaltg-block-icon{flex:none;align-self:flex-start;margin-block-start:1px}.foldcaltg-block-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.foldcaltg-block-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fold-color-text-secondary)}.foldcaltg-block[data-tone=success]{background:var(--fold-color-success-surface);color:var(--fold-color-success-text)}.foldcaltg-block[data-tone=success] .foldcaltg-block-bar{background:var(--fold-color-success)}.foldcaltg-block[data-tone=warning]{background:var(--fold-color-warning-surface);color:var(--fold-color-warning-text)}.foldcaltg-block[data-tone=warning] .foldcaltg-block-bar{background:var(--fold-color-warning)}.foldcaltg-block[data-tone=alert]{background:var(--fold-color-alert-surface);color:var(--fold-color-alert-text)}.foldcaltg-block[data-tone=alert] .foldcaltg-block-bar{background:var(--fold-color-alert)}.foldcaltg-block[data-tone=muted]{background:transparent;color:var(--fold-color-text-secondary)}.foldcaltg-block[data-tone=muted] .foldcaltg-block-bar{background:var(--fold-color-text-faded)}.foldcaltg-block[data-tone=muted] .foldcaltg-block-label{color:var(--fold-color-text-secondary);text-decoration:line-through;text-decoration-thickness:1px}@media(forced-colors:active){.foldcaltg-block{border:1px solid CanvasText}.foldcaltg-block-bar{forced-color-adjust:none}}@media(forced-colors:active){.foldcaltg-dayhead.is-today{outline:2px solid Highlight;outline-offset:-2px}.foldcaltg-now{background:Highlight;forced-color-adjust:none}}@media(prefers-reduced-motion:reduce){.foldcaltg-block{transition:none}}@media print{.foldcaltg-body{height:auto;overflow:visible}.foldcaltg-block{border:1px solid GrayText;background:Canvas;color:CanvasText}.foldcaltg-block-bar{-webkit-print-color-adjust:exact;print-color-adjust:exact}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarTimegridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "fold-calendar-timegrid", standalone: true, imports: [NgTemplateOutlet, FoldIconComponent], hostDirectives: [
+                        {
+                            directive: FoldCalendarChromeDirective,
+                            inputs: ["locale", "labels", "formats"],
+                        },
+                    ], template: "<div class=\"foldcaltg\" [attr.aria-label]=\"chrome.l().grid\" role=\"group\">\n  <div class=\"foldcaltg-head\">\n    <span class=\"foldcaltg-corner\" aria-hidden=\"true\"></span>\n    @for (column of grid().columns; track column.day.date) {\n      <button\n        type=\"button\"\n        class=\"foldcaltg-dayhead\"\n        [class.is-today]=\"column.day.isToday\"\n        [class.is-weekend]=\"column.day.isWeekend\"\n        [attr.aria-label]=\"columnLabel(column)\"\n        [attr.aria-current]=\"column.day.isToday ? 'date' : null\"\n        (click)=\"dayClick.emit(column.day.date)\"\n      >\n        <span class=\"foldcaltg-weekday\">{{ weekdayName(column) }}</span>\n        <span class=\"foldcaltg-daynum\">{{ column.day.dayOfMonth }}</span>\n      </button>\n    }\n  </div>\n\n  <!-- The all-day strip: the same spanning bands the month grid draws. -->\n  @if (grid().allDay.length > 0) {\n    <div class=\"foldcaltg-allday\">\n      <span class=\"foldcaltg-gutter-label\">{{ chrome.l().allDay }}</span>\n      <div\n        class=\"foldcaltg-strip\"\n        [style.gridTemplateColumns]=\"\n          'repeat(' + grid().columns.length + ', 1fr)'\n        \"\n        [style.gridTemplateRows]=\"stripRows()\"\n      >\n        @for (band of grid().allDay; track band.key) {\n          <button\n            type=\"button\"\n            class=\"foldcal-chip foldcaltg-band\"\n            [attr.data-tone]=\"band.event.tone ?? 'neutral'\"\n            [class.continues-before]=\"band.continuesBefore\"\n            [class.continues-after]=\"band.continuesAfter\"\n            [style.gridColumn]=\"\n              band.startColumn + 1 + ' / ' + (band.endColumn + 2)\n            \"\n            [style.gridRow]=\"band.lane + 1\"\n            (click)=\"eventClick.emit(band.event)\"\n          >\n            @if (chrome.eventContent(); as projected) {\n              <ng-container\n                [ngTemplateOutlet]=\"projected\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: band.event,\n                  band: band,\n                }\"\n              />\n            } @else {\n              <span class=\"foldcal-chip-bar\"></span>\n              <span class=\"foldcal-chip-body\">\n                <span class=\"foldcal-chip-label\">{{ bandLabel(band) }}</span>\n              </span>\n            }\n          </button>\n        }\n      </div>\n    </div>\n  }\n\n  <!--\n    The hours scroll, so the region is a tab stop with a name: a scrollable\n    area a keyboard cannot reach is a scrollable area a keyboard user cannot\n    read (WCAG 2.1.1). Found by axe, not by looking at it.\n  -->\n  <div\n    class=\"foldcaltg-body\"\n    tabindex=\"0\"\n    role=\"group\"\n    [attr.aria-label]=\"chrome.l().hours\"\n  >\n    <!--\n      Positioned, not flowed: the label has to land on the same line as the rule\n      it names, and a flex column only gets there by coincidence.\n    -->\n    <div class=\"foldcaltg-gutter\" aria-hidden=\"true\">\n      @for (hour of grid().hours; track hour; let index = $index) {\n        <span\n          class=\"foldcaltg-hour\"\n          [class.is-first]=\"index === 0\"\n          [style.top.%]=\"(index / grid().hours.length) * 100\"\n          >{{ hourLabel(hour) }}</span\n        >\n      }\n    </div>\n\n    <div\n      class=\"foldcaltg-cols\"\n      [style.gridTemplateColumns]=\"'repeat(' + grid().columns.length + ', 1fr)'\"\n    >\n      @for (column of grid().columns; track column.day.date) {\n        <section\n          class=\"foldcaltg-col\"\n          [class.is-weekend]=\"column.day.isWeekend\"\n          [attr.aria-label]=\"columnLabel(column)\"\n        >\n          <!-- Hour rules, drawn per column so a column can be styled alone. -->\n          <span class=\"foldcaltg-rules\" aria-hidden=\"true\">\n            @for (hour of grid().hours; track hour) {\n              <span class=\"foldcaltg-rule\"></span>\n            }\n          </span>\n\n          @if (column.day.isToday && nowOffset() !== null) {\n            <span\n              class=\"foldcaltg-now\"\n              aria-hidden=\"true\"\n              [style.top.%]=\"(nowOffset() ?? 0) * 100\"\n            ></span>\n          }\n\n          @for (block of column.blocks; track block.key) {\n            <button\n              type=\"button\"\n              class=\"foldcaltg-block\"\n              [attr.data-tone]=\"block.event.tone ?? 'neutral'\"\n              [class.continues-before]=\"block.continuesBefore\"\n              [class.continues-after]=\"block.continuesAfter\"\n              [attr.aria-label]=\"blockLabel(block)\"\n              [style.top.%]=\"block.top * 100\"\n              [style.height.%]=\"block.height * 100\"\n              [style.insetInlineStart.%]=\"(block.column / block.columns) * 100\"\n              [style.width.%]=\"(1 / block.columns) * 100\"\n              (click)=\"eventClick.emit(block.event)\"\n            >\n              @if (chrome.eventContent(); as projected) {\n                <ng-container\n                  [ngTemplateOutlet]=\"projected\"\n                  [ngTemplateOutletContext]=\"{\n                    $implicit: block.event,\n                    band: null,\n                  }\"\n                />\n              } @else {\n                <span class=\"foldcaltg-block-bar\"></span>\n                <!-- The glyph sits beside the label, never above it: a\n                     half-hour block is one line tall and the icon would take\n                     it. -->\n                @if (block.event.icon; as icon) {\n                  <fold-icon\n                    class=\"foldcaltg-block-icon\"\n                    [name]=\"icon\"\n                    size=\"sm\"\n                  />\n                }\n                <span class=\"foldcaltg-block-body\">\n                  <span class=\"foldcaltg-block-label\">{{\n                    block.event.label\n                  }}</span>\n                  @if (block.event.subline) {\n                    <span class=\"foldcaltg-block-sub\">{{\n                      block.event.subline\n                    }}</span>\n                  }\n                </span>\n              }\n            </button>\n          }\n        </section>\n      }\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.foldcal-chip{position:relative;display:flex;align-items:stretch;gap:var(--fold-space-sm);width:100%;padding:var(--fold-space-xs) var(--fold-space-sm);padding-inline-start:0;border:0;border-radius:var(--fold-calendar-band-radius, var(--fold-radius-sm));background:var(--fold-color-surface-raised);color:var(--fold-color-text);font:inherit;text-align:start;cursor:pointer;overflow:hidden;transition:background-color var(--fold-motion-fast) ease}.foldcal-chip:hover{background:var(--fold-color-surface-hover)}.foldcal-chip:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px}.foldcal-chip-bar{flex:0 0 var(--fold-calendar-bar-width, 3px);align-self:stretch;background:var(--fold-color-text-muted)}.foldcal-chip-icon{flex:none;align-self:center;margin-inline-start:var(--fold-space-sm);color:var(--fold-color-text-secondary)}.foldcal-chip-body{display:flex;flex-direction:column;gap:1px;min-width:0}.foldcal-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fold-text-sm);font-weight:500}.foldcal-chip-sub{color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs)}.foldcal-chip[data-tone=success] .foldcal-chip-bar{background:var(--fold-color-success)}.foldcal-chip[data-tone=warning] .foldcal-chip-bar{background:var(--fold-color-warning)}.foldcal-chip[data-tone=alert] .foldcal-chip-bar{background:var(--fold-color-alert)}.foldcal-chip[data-tone=muted] .foldcal-chip-bar{background:var(--fold-color-text-faded)}.foldcal-chip[data-tone=muted] .foldcal-chip-label{color:var(--fold-color-text-secondary);text-decoration:line-through;text-decoration-thickness:1px}@media(forced-colors:active){.foldcal-chip{border:1px solid CanvasText}.foldcal-chip-bar{forced-color-adjust:none}}@media(prefers-reduced-motion:reduce){.foldcal-chip{transition:none}}.foldcaltg{display:flex;flex-direction:column;min-height:0;border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-md);background:var(--fold-color-surface-card);overflow:clip}.foldcaltg-head{display:grid;grid-template-columns:var(--fold-calendar-timegrid-gutter, 56px) repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);background:var(--fold-color-surface-subtle);border-bottom:1px solid var(--fold-color-border)}.foldcaltg-corner{border-inline-end:1px solid var(--fold-color-border-subtle)}.foldcaltg-dayhead{display:flex;flex-direction:column;align-items:center;gap:1px;padding:var(--fold-space-sm) var(--fold-space-xs);border:0;border-inline-end:1px solid var(--fold-color-border-subtle);background:transparent;color:inherit;font:inherit;cursor:pointer}.foldcaltg-dayhead:last-child{border-inline-end:0}.foldcaltg-dayhead:hover{background:var(--fold-color-surface-hover)}.foldcaltg-dayhead:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px}.foldcaltg-dayhead.is-weekend{background:var(--fold-color-surface-sunken)}.foldcaltg-weekday{color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase}.foldcaltg-daynum{color:var(--fold-color-text-secondary);font-size:var(--fold-text-md);font-variant-numeric:tabular-nums}.foldcaltg-dayhead.is-today{box-shadow:inset 0 2px 0 0 var(--fold-color-primary)}.foldcaltg-dayhead.is-today .foldcaltg-daynum{color:var(--fold-color-primary-text);font-weight:700}.foldcaltg-allday{display:grid;grid-template-columns:var(--fold-calendar-timegrid-gutter, 56px) 1fr;padding-block:var(--fold-space-xs);border-bottom:1px solid var(--fold-color-border)}.foldcaltg-gutter-label{padding-inline:var(--fold-space-xs);border-inline-end:1px solid var(--fold-color-border-subtle);color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs);text-align:end}.foldcaltg-strip{display:grid;gap:1px}.foldcaltg-band{min-width:0;margin-inline:var(--fold-calendar-band-gutter, var(--fold-space-xs));padding-block:0;font-size:var(--fold-text-xs)}.foldcaltg-band.continues-before{margin-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.foldcaltg-band.continues-after{margin-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.foldcaltg-body{display:grid}.foldcaltg-body:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px}.foldcaltg-body{grid-template-columns:var(--fold-calendar-timegrid-gutter, 56px) 1fr;height:var(--fold-calendar-timegrid-height, 640px);overflow-y:auto}.foldcaltg-gutter{position:relative;border-inline-end:1px solid var(--fold-color-border-subtle)}.foldcaltg-hour{position:absolute;inset-inline:0;padding-inline-end:var(--fold-space-xs);color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs);font-variant-numeric:tabular-nums;text-align:end;transform:translateY(-.5em)}.foldcaltg-hour.is-first{transform:none}.foldcaltg-cols{display:grid}.foldcaltg-col{position:relative;border-inline-end:1px solid var(--fold-color-border-subtle)}.foldcaltg-col:last-of-type{border-inline-end:0}.foldcaltg-col.is-weekend{background:var(--fold-color-surface-subtle)}.foldcaltg-rules{position:absolute;inset:0;display:flex;flex-direction:column}.foldcaltg-rule{flex:1;border-top:1px solid var(--fold-color-border-subtle)}.foldcaltg-now{position:absolute;inset-inline:0;z-index:2;height:2px;background:var(--fold-color-alert)}.foldcaltg-now:before{content:\"\";position:absolute;inset-inline-start:0;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--fold-color-alert)}.foldcaltg-block{position:absolute;z-index:1;display:flex;align-items:stretch;gap:var(--fold-space-xs);min-height:14px;padding:0;padding-inline-end:var(--fold-space-xs);border:0;border-radius:var(--fold-calendar-band-radius, var(--fold-radius-sm));background:var(--fold-color-surface-raised);color:var(--fold-color-text);font:inherit;font-size:var(--fold-text-xs);text-align:start;cursor:pointer;overflow:hidden;transition:filter var(--fold-motion-fast) ease}.foldcaltg-block:hover{z-index:3;filter:brightness(1.08)}.foldcaltg-block:focus-visible{z-index:3;outline:2px solid var(--fold-color-primary);outline-offset:-2px}.foldcaltg-block.continues-before{border-start-start-radius:0;border-start-end-radius:0}.foldcaltg-block.continues-after{border-end-start-radius:0;border-end-end-radius:0}.foldcaltg-block-bar{flex:0 0 var(--fold-calendar-bar-width, 3px);align-self:stretch;background:var(--fold-color-text-muted)}.foldcaltg-block-body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;padding-block:1px}.foldcaltg-block-icon{flex:none;align-self:flex-start;margin-block-start:1px}.foldcaltg-block-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.foldcaltg-block-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fold-color-text-secondary)}.foldcaltg-block[data-tone=success]{background:var(--fold-color-success-surface);color:var(--fold-color-success-text)}.foldcaltg-block[data-tone=success] .foldcaltg-block-bar{background:var(--fold-color-success)}.foldcaltg-block[data-tone=warning]{background:var(--fold-color-warning-surface);color:var(--fold-color-warning-text)}.foldcaltg-block[data-tone=warning] .foldcaltg-block-bar{background:var(--fold-color-warning)}.foldcaltg-block[data-tone=alert]{background:var(--fold-color-alert-surface);color:var(--fold-color-alert-text)}.foldcaltg-block[data-tone=alert] .foldcaltg-block-bar{background:var(--fold-color-alert)}.foldcaltg-block[data-tone=muted]{background:transparent;color:var(--fold-color-text-secondary)}.foldcaltg-block[data-tone=muted] .foldcaltg-block-bar{background:var(--fold-color-text-faded)}.foldcaltg-block[data-tone=muted] .foldcaltg-block-label{color:var(--fold-color-text-secondary);text-decoration:line-through;text-decoration-thickness:1px}@media(forced-colors:active){.foldcaltg-block{border:1px solid CanvasText}.foldcaltg-block-bar{forced-color-adjust:none}}@media(forced-colors:active){.foldcaltg-dayhead.is-today{outline:2px solid Highlight;outline-offset:-2px}.foldcaltg-now{background:Highlight;forced-color-adjust:none}}@media(prefers-reduced-motion:reduce){.foldcaltg-block{transition:none}}@media print{.foldcaltg-body{height:auto;overflow:visible}.foldcaltg-block{border:1px solid GrayText;background:Canvas;color:CanvasText}.foldcaltg-block-bar{-webkit-print-color-adjust:exact;print-color-adjust:exact}}\n"] }]
+        }], propDecorators: { date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: true }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], dayCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayCount", required: false }] }], today: [{ type: i0.Input, args: [{ isSignal: true, alias: "today", required: false }] }], now: [{ type: i0.Input, args: [{ isSignal: true, alias: "now", required: false }] }], dayStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayStart", required: false }] }], dayEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayEnd", required: false }] }], weekStartsOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStartsOn", required: false }] }], weekendDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekendDays", required: false }] }], maxAllDayLanes: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAllDayLanes", required: false }] }], dayClick: [{ type: i0.Output, args: ["dayClick"] }], eventClick: [{ type: i0.Output, args: ["eventClick"] }] } });
+
 /**
  * `<fold-choice-row>` — a horizontal single-select control.
  *
@@ -7282,13 +9568,13 @@ class FoldNavLayoutComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldNavLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldNavLayoutComponent, isStandalone: true, selector: "fold-nav-layout", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, foldAt: { classPropertyName: "foldAt", publicName: "foldAt", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-row": "!stacked()" } }, providers: [
             { provide: FOLD_NAV_LAYOUT, useExisting: FoldNavLayoutComponent },
-        ], exportAs: ["foldNavLayout"], ngImport: i0, template: "<div class=\"tl-nav\"><ng-content select=\"[tabNav]\" /></div>\n<div class=\"tl-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-nav-layout-gap, 16px);min-width:0}:host(.is-row){flex-direction:row}.tl-nav{display:grid;min-width:0}:host(.is-row) .tl-nav{flex:0 0 var(--fold-nav-layout-rail-width, var(--fold-rail-tertiary, 200px))}.tl-body{flex:1 1 auto;min-width:0}\n"] });
+        ], exportAs: ["foldNavLayout"], ngImport: i0, template: "<div class=\"tl-nav\"><ng-content select=\"[tabNav]\" /></div>\n<div class=\"tl-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-nav-layout-gap, var(--fold-space-lg, 16px));min-width:0}:host(.is-row){flex-direction:row}.tl-nav{display:grid;min-width:0}:host(.is-row) .tl-nav{flex:0 0 var(--fold-nav-layout-rail-width, var(--fold-rail-tertiary, 200px))}.tl-body{flex:1 1 auto;min-width:0}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldNavLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: "fold-nav-layout", standalone: true, exportAs: "foldNavLayout", host: { "[class.is-row]": "!stacked()" }, providers: [
                         { provide: FOLD_NAV_LAYOUT, useExisting: FoldNavLayoutComponent },
-                    ], template: "<div class=\"tl-nav\"><ng-content select=\"[tabNav]\" /></div>\n<div class=\"tl-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-nav-layout-gap, 16px);min-width:0}:host(.is-row){flex-direction:row}.tl-nav{display:grid;min-width:0}:host(.is-row) .tl-nav{flex:0 0 var(--fold-nav-layout-rail-width, var(--fold-rail-tertiary, 200px))}.tl-body{flex:1 1 auto;min-width:0}\n"] }]
+                    ], template: "<div class=\"tl-nav\"><ng-content select=\"[tabNav]\" /></div>\n<div class=\"tl-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-nav-layout-gap, var(--fold-space-lg, 16px));min-width:0}:host(.is-row){flex-direction:row}.tl-nav{display:grid;min-width:0}:host(.is-row) .tl-nav{flex:0 0 var(--fold-nav-layout-rail-width, var(--fold-rail-tertiary, 200px))}.tl-body{flex:1 1 auto;min-width:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], foldAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "foldAt", required: false }] }] } });
 
 /**
@@ -7871,6 +10157,13 @@ class FoldViewNavComponent {
     ...(ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []));
     /** The nearest layout, if any — lets `direction="auto"` follow it. */
     layout = inject(FOLD_NAV_LAYOUT, { optional: true });
+    /**
+     * No wrapping `fold-nav-layout`. Standalone, the bar owns its gap to the
+     * following content; inside a layout, the layout owns it (avoiding a double
+     * gap).
+     */
+    isStandalone = computed(() => this.layout === null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isStandalone" }] : /* istanbul ignore next */ []));
     /** `direction` with `auto` resolved against the wrapping layout. */
     resolvedDirection = computed(() => {
         const d = this.direction();
@@ -7881,7 +10174,7 @@ class FoldViewNavComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedDirection" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldViewNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldViewNavComponent, isStandalone: true, selector: "fold-view-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, activeStyle: { classPropertyName: "activeStyle", publicName: "activeStyle", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeKey: "activeKeyChange" }, ngImport: i0, template: "<nav\n  class=\"tab-bar\"\n  [class.style-underline]=\"activeStyle() === 'underline'\"\n  [class.style-fill]=\"activeStyle() === 'fill'\"\n  [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n  [class.size-comfortable]=\"size() === 'comfortable'\"\n  [class.is-collapsed]=\"collapsed()\"\n  [class.bg-surface]=\"background() === 'surface'\"\n>\n  @for (item of items(); track item.key) {\n    @if (item.disabled) {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item is-disabled\"\n        disabled\n        aria-disabled=\"true\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: false }\"\n        />\n      </button>\n    } @else if (item.link !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [routerLink]=\"item.link\"\n        routerLinkActive=\"is-active\"\n        #rla=\"routerLinkActive\"\n        [attr.aria-current]=\"rla.isActive ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: rla.isActive }\"\n        />\n      </a>\n    } @else if (item.href !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [href]=\"item.href\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </a>\n    } @else {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n        (click)=\"activeKey.set(item.key)\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </button>\n    }\n  }\n</nav>\n\n<!-- One item's inner content, shared by the link / button branches. -->\n<ng-template #body let-item let-active=\"active\">\n  @if (item.icon; as ic) {\n    <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n  } @else if (collapsed()) {\n    <!-- Collapsed needs a fixed glyph; an icon-less item falls back to its\n         initial so the rail stays icon-width and the label still tooltips. -->\n    <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n      item.label.charAt(0)\n    }}</span>\n  }\n  <span class=\"tab-bar-label\">{{ item.label }}</span>\n  @if (item.badge !== undefined && item.badge !== null) {\n    <fold-badge\n      class=\"tab-bar-badge\"\n      [content]=\"item.badge + ''\"\n      [variant]=\"active ? 'accent' : 'neutral'\"\n    />\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:var(--fold-color-bg-rail-tertiary);padding:var(--fold-space-xs) var(--fold-space-sm) 0}.bg-surface.dir-vertical{padding:var(--fold-space-md) var(--fold-space-sm)}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-sm);background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg);font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:var(--fold-space-md) var(--fold-space-md);font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:var(--fold-space-sm) var(--fold-space-md);gap:var(--fold-space-sm);border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm)}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;padding:var(--fold-space-xs) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-glass);border:1px solid var(--fold-color-glass-border);color:var(--fold-color-text);font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "component", type: FoldBadgeComponent, selector: "fold-badge", inputs: ["content", "radius", "variant"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldViewNavComponent, isStandalone: true, selector: "fold-view-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, activeStyle: { classPropertyName: "activeStyle", publicName: "activeStyle", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeKey: "activeKeyChange" }, host: { properties: { "class.is-standalone": "isStandalone()", "class.is-horizontal": "resolvedDirection() === 'horizontal'" } }, ngImport: i0, template: "<nav\n  class=\"tab-bar\"\n  [class.style-underline]=\"activeStyle() === 'underline'\"\n  [class.style-fill]=\"activeStyle() === 'fill'\"\n  [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n  [class.size-comfortable]=\"size() === 'comfortable'\"\n  [class.is-collapsed]=\"collapsed()\"\n  [class.bg-surface]=\"background() === 'surface'\"\n>\n  @for (item of items(); track item.key) {\n    @if (item.disabled) {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item is-disabled\"\n        disabled\n        aria-disabled=\"true\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: false }\"\n        />\n      </button>\n    } @else if (item.link !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [routerLink]=\"item.link\"\n        routerLinkActive=\"is-active\"\n        #rla=\"routerLinkActive\"\n        [attr.aria-current]=\"rla.isActive ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: rla.isActive }\"\n        />\n      </a>\n    } @else if (item.href !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [href]=\"item.href\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </a>\n    } @else {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n        (click)=\"activeKey.set(item.key)\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </button>\n    }\n  }\n</nav>\n\n<!-- One item's inner content, shared by the link / button branches. -->\n<ng-template #body let-item let-active=\"active\">\n  @if (item.icon; as ic) {\n    <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n  } @else if (collapsed()) {\n    <!-- Collapsed needs a fixed glyph; an icon-less item falls back to its\n         initial so the rail stays icon-width and the label still tooltips. -->\n    <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n      item.label.charAt(0)\n    }}</span>\n  }\n  <span class=\"tab-bar-label\">{{ item.label }}</span>\n  @if (item.badge !== undefined && item.badge !== null) {\n    <fold-badge\n      class=\"tab-bar-badge\"\n      [content]=\"item.badge + ''\"\n      [variant]=\"active ? 'accent' : 'neutral'\"\n    />\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:var(--fold-color-bg-rail-tertiary);padding:var(--fold-space-xs) var(--fold-space-sm) 0}.bg-surface.dir-vertical{padding:var(--fold-space-md) var(--fold-space-sm)}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-sm);background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg);font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:var(--fold-space-md) var(--fold-space-md);font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:var(--fold-space-sm) var(--fold-space-md);gap:var(--fold-space-sm);border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm)}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;padding:var(--fold-space-xs) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-glass);border:1px solid var(--fold-color-glass-border);color:var(--fold-color-text);font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}:host(.is-standalone.is-horizontal){margin-block-end:var(--fold-nav-layout-gap, var(--fold-space-lg, 16px))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "component", type: FoldBadgeComponent, selector: "fold-badge", inputs: ["content", "radius", "variant"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldViewNavComponent, decorators: [{
             type: Component,
@@ -7891,7 +10184,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         FoldBadgeComponent,
                         RouterLink,
                         RouterLinkActive,
-                    ], template: "<nav\n  class=\"tab-bar\"\n  [class.style-underline]=\"activeStyle() === 'underline'\"\n  [class.style-fill]=\"activeStyle() === 'fill'\"\n  [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n  [class.size-comfortable]=\"size() === 'comfortable'\"\n  [class.is-collapsed]=\"collapsed()\"\n  [class.bg-surface]=\"background() === 'surface'\"\n>\n  @for (item of items(); track item.key) {\n    @if (item.disabled) {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item is-disabled\"\n        disabled\n        aria-disabled=\"true\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: false }\"\n        />\n      </button>\n    } @else if (item.link !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [routerLink]=\"item.link\"\n        routerLinkActive=\"is-active\"\n        #rla=\"routerLinkActive\"\n        [attr.aria-current]=\"rla.isActive ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: rla.isActive }\"\n        />\n      </a>\n    } @else if (item.href !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [href]=\"item.href\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </a>\n    } @else {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n        (click)=\"activeKey.set(item.key)\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </button>\n    }\n  }\n</nav>\n\n<!-- One item's inner content, shared by the link / button branches. -->\n<ng-template #body let-item let-active=\"active\">\n  @if (item.icon; as ic) {\n    <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n  } @else if (collapsed()) {\n    <!-- Collapsed needs a fixed glyph; an icon-less item falls back to its\n         initial so the rail stays icon-width and the label still tooltips. -->\n    <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n      item.label.charAt(0)\n    }}</span>\n  }\n  <span class=\"tab-bar-label\">{{ item.label }}</span>\n  @if (item.badge !== undefined && item.badge !== null) {\n    <fold-badge\n      class=\"tab-bar-badge\"\n      [content]=\"item.badge + ''\"\n      [variant]=\"active ? 'accent' : 'neutral'\"\n    />\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:var(--fold-color-bg-rail-tertiary);padding:var(--fold-space-xs) var(--fold-space-sm) 0}.bg-surface.dir-vertical{padding:var(--fold-space-md) var(--fold-space-sm)}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-sm);background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg);font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:var(--fold-space-md) var(--fold-space-md);font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:var(--fold-space-sm) var(--fold-space-md);gap:var(--fold-space-sm);border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm)}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;padding:var(--fold-space-xs) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-glass);border:1px solid var(--fold-color-glass-border);color:var(--fold-color-text);font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}\n"] }]
+                    ], host: {
+                        // A standalone horizontal bar owns the gap to the content it heads, matching
+                        // fold-nav-layout. Inside a layout, the layout owns that gap (these two
+                        // classes never both apply there); the SCSS keys the margin on their
+                        // conjunction. Vertical is a side rail, not a header — no block-end margin.
+                        "[class.is-standalone]": "isStandalone()",
+                        "[class.is-horizontal]": "resolvedDirection() === 'horizontal'",
+                    }, template: "<nav\n  class=\"tab-bar\"\n  [class.style-underline]=\"activeStyle() === 'underline'\"\n  [class.style-fill]=\"activeStyle() === 'fill'\"\n  [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n  [class.size-comfortable]=\"size() === 'comfortable'\"\n  [class.is-collapsed]=\"collapsed()\"\n  [class.bg-surface]=\"background() === 'surface'\"\n>\n  @for (item of items(); track item.key) {\n    @if (item.disabled) {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item is-disabled\"\n        disabled\n        aria-disabled=\"true\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: false }\"\n        />\n      </button>\n    } @else if (item.link !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [routerLink]=\"item.link\"\n        routerLinkActive=\"is-active\"\n        #rla=\"routerLinkActive\"\n        [attr.aria-current]=\"rla.isActive ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: rla.isActive }\"\n        />\n      </a>\n    } @else if (item.href !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [href]=\"item.href\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </a>\n    } @else {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n        (click)=\"activeKey.set(item.key)\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </button>\n    }\n  }\n</nav>\n\n<!-- One item's inner content, shared by the link / button branches. -->\n<ng-template #body let-item let-active=\"active\">\n  @if (item.icon; as ic) {\n    <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n  } @else if (collapsed()) {\n    <!-- Collapsed needs a fixed glyph; an icon-less item falls back to its\n         initial so the rail stays icon-width and the label still tooltips. -->\n    <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n      item.label.charAt(0)\n    }}</span>\n  }\n  <span class=\"tab-bar-label\">{{ item.label }}</span>\n  @if (item.badge !== undefined && item.badge !== null) {\n    <fold-badge\n      class=\"tab-bar-badge\"\n      [content]=\"item.badge + ''\"\n      [variant]=\"active ? 'accent' : 'neutral'\"\n    />\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:var(--fold-color-bg-rail-tertiary);padding:var(--fold-space-xs) var(--fold-space-sm) 0}.bg-surface.dir-vertical{padding:var(--fold-space-md) var(--fold-space-sm)}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-sm);background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg);font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:var(--fold-space-md) var(--fold-space-md);font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:var(--fold-space-sm) var(--fold-space-md);gap:var(--fold-space-sm);border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm)}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;padding:var(--fold-space-xs) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-glass);border:1px solid var(--fold-color-glass-border);color:var(--fold-color-text);font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}:host(.is-standalone.is-horizontal){margin-block-end:var(--fold-nav-layout-gap, var(--fold-space-lg, 16px))}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: false }] }, { type: i0.Output, args: ["activeKeyChange"] }], activeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStyle", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }] } });
 
 /**
@@ -9025,6 +11325,528 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             args: [{ selector: "fold-dropdown", standalone: true, imports: [FoldPopoverComponent], template: "<fold-popover\n  [placement]=\"placement()\"\n  [offset]=\"offset()\"\n  [autoFocus]=\"false\"\n  [(open)]=\"open\"\n>\n  <ng-content select=\"[foldPopoverTrigger]\" />\n  <div\n    foldPopoverPanel\n    class=\"fdrop-menu\"\n    role=\"menu\"\n    [attr.aria-label]=\"ariaLabel() ?? null\"\n    (keydown)=\"onMenuKeydown($event)\"\n    (click)=\"onMenuActivate($event)\"\n  >\n    <ng-content />\n  </div>\n</fold-popover>\n", styles: [":host{display:contents}.fdrop-menu{display:flex;flex-direction:column;gap:1px;min-width:11rem;padding:var(--fold-space-xs)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FoldDropdownItemComponent), { isSignal: true }] }] } });
 
+/**
+ * `date` moved by `delta` periods **in the units the view reads in** — a month
+ * at a time in the month view, a week in the week view, a day in the day view.
+ * The list view follows the month, since that is the window it lists.
+ *
+ * An unrecognised view pages by month, the safest of the four to be wrong
+ * about: it always lands on a real date the other views can also show.
+ */
+function foldShiftDate(view, date, delta, weekStartsOn = "mon") {
+    if (view === "day") {
+        return foldAddDays(date, delta);
+    }
+    if (view === "week") {
+        return foldAddDays(foldStartOfWeek(date, weekStartsOn), delta * 7);
+    }
+    return foldAddMonths(foldStartOfMonth(date), delta);
+}
+/**
+ * The days `view` covers around `date` — what a caller passes to its data
+ * source, and what the list view scopes itself to.
+ *
+ * The **month** view's range is wider than its month: the grid paints the days
+ * either side of it, and they carry their events too. The **list** view's is
+ * not, because a list has no padding days — an April row in a May list is an
+ * event the reader did not ask for.
+ */
+function foldRangeForView(view, date, weekStartsOn = "mon") {
+    if (view === "day") {
+        return { from: date, to: date };
+    }
+    if (view === "week") {
+        const start = foldStartOfWeek(date, weekStartsOn);
+        return { from: start, to: foldAddDays(start, 6) };
+    }
+    if (view === "list") {
+        return { from: foldStartOfMonth(date), to: foldEndOfMonth(date) };
+    }
+    const first = foldStartOfWeek(foldStartOfMonth(date), weekStartsOn);
+    const last = foldAddDays(foldStartOfWeek(foldEndOfMonth(date), weekStartsOn), 6);
+    return { from: first, to: last };
+}
+/**
+ * The heading for the period on display, localised through `Intl` — "May 2026",
+ * "18–24 May 2026", "Monday 18 May 2026". A week spanning two months or two
+ * years names both ends, which `Intl`'s range formatter handles per locale.
+ */
+function foldViewTitle(view, date, locale, weekStartsOn = "mon") {
+    if (view === "day") {
+        return foldCalendarFormatter(locale, "dateFullWeekday").format(foldToNativeDate(date));
+    }
+    if (view === "week") {
+        const start = foldStartOfWeek(date, weekStartsOn);
+        return foldFormatRange(start, foldAddDays(start, 6), locale, "dayMonthYear");
+    }
+    return foldCalendarFormatter(locale, "monthYear").format(foldToNativeDate(date));
+}
+
+/**
+ * `<fold-calendar-toolbar>` — the chrome above a calendar: jump to today, page
+ * back and forward, the period's name, and the view switch.
+ *
+ * It owns no data. Both pieces of state it touches are two-way `model`s, so
+ * the page binds the same `date` and `view` it hands to whichever view is on
+ * screen, and paging keeps working without a single output handler.
+ *
+ * The step matches the reading: a month at a time under the month view, a week
+ * under the week view, a day under the day view — see `foldShiftDate`.
+ *
+ * ## Inputs
+ * | Input          | Type                     | Default | Meaning |
+ * |----------------|--------------------------|---------|---------|
+ * | `date`         | `FoldCalendarDate`       | —       | **Two-way.** The period on display. |
+ * | `view`         | `FoldCalendarView`       | `'month'` | **Two-way.** Which reading is on screen. |
+ * | `views`        | `(FoldCalendarView \| FoldCalendarViewOption)[]` | all four | Which switches to offer; pass fewer to drop one, or `{ value, label }` to add your own. |
+ * | `today`        | `FoldCalendarDate`       | local clock | Where the "today" button jumps to. |
+ * | `weekStartsOn` | `FoldWeekday`            | the locale's | How the week view snaps and names itself. |
+ * | `locale`       | `string`                 | runtime | Drives the title through `Intl`. |
+ * | `labels`       | `Partial<FoldCalendarLabels>` | — | Per-instance label overrides. |
+ *
+ * ## Slots & templates
+ * | Selector               | Region |
+ * |------------------------|--------|
+ * | `[actions]`            | Trailing edge — the page's own buttons ("New event", filters). |
+ * | `ng-template[foldCalendarTitle]` | Replaces the `<h2>` title — reword it, or give it the heading level the page's outline needs. |
+ *
+ * ## Theming
+ * | CSS variable                       | Default | Sets |
+ * |------------------------------------|---------|------|
+ * | `--fold-calendar-toolbar-step-size`| `28px`  | The back/forward buttons. |
+ *
+ * ## Extending
+ * `views` accepts an app's own reading — `[views]="['month', {value: 'rooms', label: 'Rooms'}]"`.
+ * Paging and titling an unrecognised view fall back to month semantics, so a
+ * custom view still lands on real dates.
+ *
+ * ## Accessibility
+ * The title is the toolbar's live heading: it carries `aria-live="polite"`, so
+ * paging announces the period a keyboard user just moved to instead of leaving
+ * the change silent.
+ *
+ * @selector `fold-calendar-toolbar`
+ *
+ * @example
+ * ```html
+ * <fold-calendar-toolbar [(date)]="date" [(view)]="view" [today]="today">
+ *   <button actions foldButton (click)="create()">New event</button>
+ * </fold-calendar-toolbar>
+ * ```
+ */
+class FoldCalendarToolbarComponent {
+    /** The period on display. */
+    date = model.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
+    /** Which reading is on screen. @default 'month' */
+    view = model("month", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+    /**
+     * Which switches to offer — a built-in name, or `{ value, label }` for a view
+     * the app owns. @default every built-in view
+     */
+    views = input(["month", "week", "day", "list"], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "views" }] : /* istanbul ignore next */ []));
+    /** The day the "today" button jumps to; defaults to the local clock. */
+    today = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "today" }] : /* istanbul ignore next */ []));
+    /** Day the week starts on. @default the locale's own first day */
+    weekStartsOn = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "weekStartsOn" }] : /* istanbul ignore next */ []));
+    /** Labels and locale — see the directive. */
+    chrome = inject(FoldCalendarChromeDirective);
+    /** The anchor in force: the caller's, else the one the locale declares. */
+    anchor = computed(() => this.chrome.anchor(this.weekStartsOn()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []));
+    projectedTitle = contentChild(FoldCalendarTitleDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "projectedTitle" }] : /* istanbul ignore next */ []));
+    /** The custom title template, when one is projected. */
+    titleContent = computed(() => this.projectedTitle()?.template ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titleContent" }] : /* istanbul ignore next */ []));
+    /** The period's name — "May 2026", "18–24 May 2026", "Wednesday 20 May 2026". */
+    title = computed(() => foldViewTitle(this.view(), this.date(), this.chrome.locale(), this.anchor()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** The period the title stands for — handed to a projected title template. */
+    range = computed(() => foldRangeForView(this.view(), this.date(), this.anchor()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    options = computed(() => {
+        const labels = this.chrome.l();
+        const named = {
+            month: labels.viewMonth,
+            week: labels.viewWeek,
+            day: labels.viewDay,
+            list: labels.viewList,
+        };
+        return this.views().map((view) => typeof view === "string"
+            ? { value: view, label: named[view] ?? view }
+            : { value: view.value, label: view.label });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Pages by one period in the units the current view reads in. */
+    shift(delta) {
+        this.date.set(foldShiftDate(this.view(), this.date(), delta, this.anchor()));
+    }
+    goToday() {
+        this.date.set(this.today() ?? foldToday());
+    }
+    /** The switch emits a bare `string`; only a view it actually offers is kept. */
+    onViewChange(value) {
+        const offered = this.options().some((option) => option.value === value);
+        if (offered) {
+            this.view.set(value);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldCalendarToolbarComponent, isStandalone: true, selector: "fold-calendar-toolbar", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, today: { classPropertyName: "today", publicName: "today", isSignal: true, isRequired: false, transformFunction: null }, weekStartsOn: { classPropertyName: "weekStartsOn", publicName: "weekStartsOn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange", view: "viewChange" }, queries: [{ propertyName: "projectedTitle", first: true, predicate: FoldCalendarTitleDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: FoldCalendarChromeDirective, inputs: ["locale", "locale", "labels", "labels", "formats", "formats"] }], ngImport: i0, template: "<div class=\"foldcalt\">\n  <div class=\"foldcalt-lead\">\n    <button type=\"button\" class=\"foldcalt-today\" (click)=\"goToday()\">\n      {{ chrome.l().todayAction }}\n    </button>\n\n    <div class=\"foldcalt-steps\">\n      <button\n        type=\"button\"\n        class=\"foldcalt-step\"\n        [attr.aria-label]=\"chrome.l().previousPeriod\"\n        (click)=\"shift(-1)\"\n      >\n        <fold-icon name=\"chevron-left\" size=\"sm\" />\n      </button>\n      <button\n        type=\"button\"\n        class=\"foldcalt-step\"\n        [attr.aria-label]=\"chrome.l().nextPeriod\"\n        (click)=\"shift(1)\"\n      >\n        <fold-icon name=\"chevron-right\" size=\"sm\" />\n      </button>\n    </div>\n\n    @if (titleContent(); as projected) {\n      <div class=\"foldcalt-title\" aria-live=\"polite\">\n        <ng-container\n          [ngTemplateOutlet]=\"projected\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: title(),\n            from: range().from,\n            to: range().to,\n            view: view(),\n          }\"\n        />\n      </div>\n    } @else {\n      <h2 class=\"foldcalt-title\" aria-live=\"polite\">{{ title() }}</h2>\n    }\n  </div>\n\n  <div class=\"foldcalt-trail\">\n    @if (options().length > 1) {\n      <fold-view-toggle\n        size=\"sm\"\n        [ariaLabel]=\"chrome.l().viewSwitch\"\n        [options]=\"options()\"\n        [value]=\"view()\"\n        (valueChange)=\"onViewChange($event)\"\n      />\n    }\n    <ng-content select=\"[actions]\" />\n  </div>\n</div>\n", styles: [":host{display:block;container-type:inline-size}.foldcalt{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--fold-space-md)}.foldcalt-lead,.foldcalt-trail{display:flex;align-items:center;gap:var(--fold-space-sm);min-width:0}.foldcalt-today{padding:var(--fold-space-xs) var(--fold-space-md);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-raised);color:var(--fold-color-text);font:inherit;font-size:var(--fold-text-sm);font-weight:500;cursor:pointer;white-space:nowrap;transition:background-color var(--fold-motion-fast, .12s) ease}.foldcalt-today:hover{background:var(--fold-color-surface-hover)}.foldcalt-today:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:2px}.foldcalt-steps{display:inline-flex;gap:1px}.foldcalt-step{display:inline-flex;align-items:center;justify-content:center;width:var(--fold-calendar-toolbar-step-size, 28px);height:var(--fold-calendar-toolbar-step-size, 28px);padding:0;border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-raised);color:var(--fold-color-text-secondary);cursor:pointer;transition:background-color var(--fold-motion-fast, .12s) ease,color var(--fold-motion-fast, .12s) ease}.foldcalt-step:hover{background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.foldcalt-step:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:2px}.foldcalt-title{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fold-color-text);font-size:var(--fold-text-lg);font-weight:700;letter-spacing:-.01em}@container (max-width: 560px){.foldcalt-lead{flex-wrap:wrap}.foldcalt-title{order:-1;flex:1 0 100%}}@media(forced-colors:active){.foldcalt-today:focus-visible,.foldcalt-step:focus-visible{outline-color:Highlight}}@media(prefers-reduced-motion:reduce){.foldcalt-today,.foldcalt-step{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "component", type: FoldViewToggleComponent, selector: "fold-view-toggle", inputs: ["options", "value", "ariaLabel", "size", "activeStyle", "iconOnly"], outputs: ["valueChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "fold-calendar-toolbar", standalone: true, imports: [NgTemplateOutlet, FoldIconComponent, FoldViewToggleComponent], hostDirectives: [
+                        {
+                            directive: FoldCalendarChromeDirective,
+                            inputs: ["locale", "labels", "formats"],
+                        },
+                    ], template: "<div class=\"foldcalt\">\n  <div class=\"foldcalt-lead\">\n    <button type=\"button\" class=\"foldcalt-today\" (click)=\"goToday()\">\n      {{ chrome.l().todayAction }}\n    </button>\n\n    <div class=\"foldcalt-steps\">\n      <button\n        type=\"button\"\n        class=\"foldcalt-step\"\n        [attr.aria-label]=\"chrome.l().previousPeriod\"\n        (click)=\"shift(-1)\"\n      >\n        <fold-icon name=\"chevron-left\" size=\"sm\" />\n      </button>\n      <button\n        type=\"button\"\n        class=\"foldcalt-step\"\n        [attr.aria-label]=\"chrome.l().nextPeriod\"\n        (click)=\"shift(1)\"\n      >\n        <fold-icon name=\"chevron-right\" size=\"sm\" />\n      </button>\n    </div>\n\n    @if (titleContent(); as projected) {\n      <div class=\"foldcalt-title\" aria-live=\"polite\">\n        <ng-container\n          [ngTemplateOutlet]=\"projected\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: title(),\n            from: range().from,\n            to: range().to,\n            view: view(),\n          }\"\n        />\n      </div>\n    } @else {\n      <h2 class=\"foldcalt-title\" aria-live=\"polite\">{{ title() }}</h2>\n    }\n  </div>\n\n  <div class=\"foldcalt-trail\">\n    @if (options().length > 1) {\n      <fold-view-toggle\n        size=\"sm\"\n        [ariaLabel]=\"chrome.l().viewSwitch\"\n        [options]=\"options()\"\n        [value]=\"view()\"\n        (valueChange)=\"onViewChange($event)\"\n      />\n    }\n    <ng-content select=\"[actions]\" />\n  </div>\n</div>\n", styles: [":host{display:block;container-type:inline-size}.foldcalt{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--fold-space-md)}.foldcalt-lead,.foldcalt-trail{display:flex;align-items:center;gap:var(--fold-space-sm);min-width:0}.foldcalt-today{padding:var(--fold-space-xs) var(--fold-space-md);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-raised);color:var(--fold-color-text);font:inherit;font-size:var(--fold-text-sm);font-weight:500;cursor:pointer;white-space:nowrap;transition:background-color var(--fold-motion-fast, .12s) ease}.foldcalt-today:hover{background:var(--fold-color-surface-hover)}.foldcalt-today:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:2px}.foldcalt-steps{display:inline-flex;gap:1px}.foldcalt-step{display:inline-flex;align-items:center;justify-content:center;width:var(--fold-calendar-toolbar-step-size, 28px);height:var(--fold-calendar-toolbar-step-size, 28px);padding:0;border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-raised);color:var(--fold-color-text-secondary);cursor:pointer;transition:background-color var(--fold-motion-fast, .12s) ease,color var(--fold-motion-fast, .12s) ease}.foldcalt-step:hover{background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.foldcalt-step:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:2px}.foldcalt-title{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fold-color-text);font-size:var(--fold-text-lg);font-weight:700;letter-spacing:-.01em}@container (max-width: 560px){.foldcalt-lead{flex-wrap:wrap}.foldcalt-title{order:-1;flex:1 0 100%}}@media(forced-colors:active){.foldcalt-today:focus-visible,.foldcalt-step:focus-visible{outline-color:Highlight}}@media(prefers-reduced-motion:reduce){.foldcalt-today,.foldcalt-step{transition:none}}\n"] }]
+        }], propDecorators: { date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: true }] }, { type: i0.Output, args: ["dateChange"] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], views: [{ type: i0.Input, args: [{ isSignal: true, alias: "views", required: false }] }], today: [{ type: i0.Input, args: [{ isSignal: true, alias: "today", required: false }] }], weekStartsOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStartsOn", required: false }] }], projectedTitle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FoldCalendarTitleDirective), { isSignal: true }] }] } });
+
+/** Days the agenda returns when the caller does not say. */
+const DEFAULT_LIMIT = 8;
+/**
+ * Whether an event is asking for something.
+ *
+ * `warning` and `alert` are the two tones that mean "attention" in this
+ * system, so they are what `todo` keeps — the agenda reads the same semantic
+ * scale the chips paint with, rather than inventing a second one. Pass
+ * `isActionable` to define it otherwise.
+ */
+function foldIsActionable(event) {
+    return event.tone === "warning" || event.tone === "alert";
+}
+/** At least one day, and never `NaN` — `slice(0, NaN)` returns nothing at all. */
+function clampLimit(limit) {
+    if (limit === undefined || !Number.isFinite(limit)) {
+        return DEFAULT_LIMIT;
+    }
+    return Math.max(1, Math.trunc(limit));
+}
+/**
+ * Events still ahead of `from`, grouped by day and capped to `limit` days.
+ *
+ * An event already running is grouped under `from` rather than its real start:
+ * a three-week absence that began last Monday belongs at the top of "what's
+ * next", not buried in a past day the rail never shows.
+ */
+function foldBuildAgenda(events, options) {
+    const { from } = options;
+    const mode = options.mode ?? "all";
+    const limit = clampLimit(options.limit);
+    const actionable = options.isActionable ?? foldIsActionable;
+    const ahead = events
+        .filter((event) => event.end >= from)
+        .filter((event) => mode !== "todo" || actionable(event));
+    const ordered = [...ahead].sort((a, b) => a.start < b.start ? -1 : a.start > b.start ? 1 : 0);
+    const byDay = new Map();
+    for (const event of ordered) {
+        const key = event.start < from ? from : event.start;
+        const bucket = byDay.get(key);
+        if (bucket === undefined) {
+            byDay.set(key, [event]);
+            continue;
+        }
+        bucket.push(event);
+    }
+    const days = [...byDay.entries()].sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0);
+    return {
+        groups: days
+            .slice(0, limit)
+            .map(([date, group]) => ({ date, events: group })),
+        truncated: Math.max(0, days.length - limit),
+    };
+}
+/**
+ * How many events are asking for attention from `from` on — the rail's badge.
+ *
+ * Takes the same `isActionable` the agenda does, so a badge can never disagree
+ * with the list under it.
+ */
+function foldCountActionable(events, from, isActionable = foldIsActionable) {
+    return events.filter((event) => event.end >= from && isActionable(event))
+        .length;
+}
+
+/** Days ahead within which a weekday name still reads faster than a date. */
+const NEAR_HORIZON = 7;
+/**
+ * `<fold-calendar-agenda>` — a rail of what is still ahead, grouped by day.
+ *
+ * The counterpart to the grids: they answer "what does this month look like",
+ * this answers "what do I do next". It carries a **`todo` slice** that keeps
+ * only the events asking for attention (the `warning` and `alert` tones — the
+ * same scale the chips paint with), so the rail doubles as a work queue with a
+ * count.
+ *
+ * ## Inputs
+ * | Input       | Type                     | Default | Meaning |
+ * |-------------|--------------------------|---------|---------|
+ * | `from`      | `FoldCalendarDate`       | —       | Where "ahead" starts; anything ending before it is past. |
+ * | `events`    | `FoldCalendarEvent<T>[]` | `[]`    | Source events. |
+ * | `mode`      | `'todo' \| 'all'`        | `'todo'` | **Two-way.** Which slice is shown. |
+ * | `collapsed` | `boolean`                | `false` | **Two-way.** Collapsed to a spine — persist it if you want it to stick. |
+ * | `limit`     | `number`                 | `8`     | Days to show at most; what it cuts off is announced, not swallowed. |
+ * | `isActionable` | `(event) => boolean`  | tones   | What the `todo` slice and the badge both count. |
+ * | `locale`    | `string`                 | runtime | Drives the day names through `Intl`. |
+ * | `labels`    | `Partial<FoldCalendarLabels>` | — | Per-instance label overrides. |
+ *
+ * ## Outputs
+ * | Output       | Payload                | Fires on |
+ * |--------------|------------------------|----------|
+ * | `dayClick`   | `FoldCalendarDate`     | A day heading activated. |
+ * | `eventClick` | `FoldCalendarEvent<T>` | A row activated. |
+ *
+ * ## Templates
+ * | Directive             | Replaces |
+ * |-----------------------|----------|
+ * | `foldCalendarEvent`   | The inside of a row. |
+ * | `foldCalendarHeading` | The day heading — where a per-day count or action goes. |
+ *
+ * ## Theming
+ * | CSS variable                            | Default | Sets |
+ * |-----------------------------------------|---------|------|
+ * | `--fold-calendar-agenda-width`          | `320px` | Width of the expanded rail. |
+ * | `--fold-calendar-agenda-height`         | `100%`  | Height — match a grid beside it, or pin it. |
+ * | `--fold-calendar-agenda-spine-width`    | `44px`  | Width once collapsed. |
+ * | `--fold-calendar-agenda-badge-size`     | `20px`  | The count badge. |
+ * | `--fold-calendar-agenda-control-size`   | `26px`  | The collapse control. |
+ *
+ * A day within the next week is named relatively — "Today", "Tomorrow", then
+ * its weekday — because that reads faster than a date at this distance.
+ *
+ * @selector `fold-calendar-agenda`
+ *
+ * @example
+ * ```html
+ * <fold-calendar-agenda
+ *   [from]="today"
+ *   [events]="events()"
+ *   [(mode)]="agendaMode"
+ *   [(collapsed)]="agendaCollapsed"
+ *   (eventClick)="open($event)"
+ * />
+ * ```
+ */
+class FoldCalendarAgendaComponent {
+    /** The day "ahead" starts from. */
+    from = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "from" }] : /* istanbul ignore next */ []));
+    /** Source events. */
+    events = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []));
+    /** Which slice is shown. @default 'todo' */
+    mode = model("todo", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Collapsed to a spine. @default false */
+    collapsed = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /** Days to show at most. @default 8 */
+    limit = input(8, { ...(ngDevMode ? { debugName: "limit" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * What counts as asking for attention — the `todo` slice **and** the badge,
+     * from one definition, so the two can never disagree.
+     * @default the `warning` and `alert` tones
+     */
+    isActionable = input(foldIsActionable, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isActionable" }] : /* istanbul ignore next */ []));
+    /** A day heading was activated. */
+    dayClick = output();
+    /** A row was activated. */
+    eventClick = output();
+    /** Labels, locale and the projected chip template — see the directive. */
+    chrome = inject(FoldCalendarChromeDirective);
+    projectedHeading = contentChild(FoldCalendarHeadingDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "projectedHeading" }] : /* istanbul ignore next */ []));
+    /** The custom day-heading template, when one is projected. */
+    headingContent = computed(() => this.projectedHeading()?.template ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headingContent" }] : /* istanbul ignore next */ []));
+    agenda = computed(() => foldBuildAgenda(this.events(), {
+        from: this.from(),
+        mode: this.mode(),
+        limit: this.limit(),
+        isActionable: this.isActionable(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "agenda" }] : /* istanbul ignore next */ []));
+    groups = computed(() => this.agenda().groups, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    /** Days `limit` cut off — "there is more" is not the same as "there is none". */
+    truncated = computed(() => this.agenda().truncated, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "truncated" }] : /* istanbul ignore next */ []));
+    /** How much is asking for attention — the rail's badge, in either mode. */
+    todoCount = computed(() => foldCountActionable(this.events(), this.from(), this.isActionable()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "todoCount" }] : /* istanbul ignore next */ []));
+    /** The rail's own name, and the one the collapsed spine repeats. */
+    title = computed(() => this.mode() === "todo"
+        ? this.chrome.l().agendaTodo
+        : this.chrome.l().agendaUpcoming, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    emptyMessage = computed(() => this.mode() === "todo"
+        ? this.chrome.l().agendaEmptyTodo
+        : this.chrome.l().agendaEmptyUpcoming, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    /** Day of the month, for the rail's number. */
+    dayNumber(group) {
+        return group.date.slice(8, 10);
+    }
+    /**
+     * "Today", "Tomorrow", then the weekday for the rest of the week — a name
+     * beats a date while the day is still near.
+     */
+    relativeName(group) {
+        const offset = foldDaysBetween(this.from(), group.date);
+        if (offset === 0) {
+            return this.chrome.l().relativeToday;
+        }
+        if (offset === 1) {
+            return this.chrome.l().relativeTomorrow;
+        }
+        return this.chrome.format(group.date, "weekdayLong");
+    }
+    /** The month, shown only once the weekday alone stops being enough. */
+    monthName(group) {
+        if (foldDaysBetween(this.from(), group.date) < NEAR_HORIZON) {
+            return "";
+        }
+        return this.chrome.format(group.date, "monthShort");
+    }
+    toggleMode(mode) {
+        this.mode.set(mode);
+    }
+    toggleCollapsed() {
+        this.collapsed.set(!this.collapsed());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarAgendaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldCalendarAgendaComponent, isStandalone: true, selector: "fold-calendar-agenda", inputs: { from: { classPropertyName: "from", publicName: "from", isSignal: true, isRequired: true, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, isActionable: { classPropertyName: "isActionable", publicName: "isActionable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mode: "modeChange", collapsed: "collapsedChange", dayClick: "dayClick", eventClick: "eventClick" }, queries: [{ propertyName: "projectedHeading", first: true, predicate: FoldCalendarHeadingDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: FoldCalendarChromeDirective, inputs: ["locale", "locale", "labels", "labels", "formats", "formats"] }], ngImport: i0, template: "@if (collapsed()) {\n  <aside class=\"foldcala is-collapsed\" [attr.aria-label]=\"chrome.l().agenda\">\n    <button\n      type=\"button\"\n      class=\"foldcala-spine\"\n      [attr.aria-expanded]=\"false\"\n      [attr.aria-label]=\"chrome.l().expand\"\n      (click)=\"toggleCollapsed()\"\n    >\n      <fold-icon name=\"inbox\" size=\"sm\" />\n      @if (todoCount() > 0) {\n        <span class=\"foldcala-spine-count\">{{ todoCount() }}</span>\n      }\n      <!-- The spine names what opening the rail will show, not always \"todo\". -->\n      <span class=\"foldcala-spine-label\">{{ title() }}</span>\n    </button>\n  </aside>\n} @else {\n  <aside class=\"foldcala\" [attr.aria-label]=\"chrome.l().agenda\">\n    <header class=\"foldcala-head\">\n      <span class=\"foldcala-title\">\n        {{ title() }}\n        @if (todoCount() > 0) {\n          <span class=\"foldcala-count\">{{ todoCount() }}</span>\n        }\n      </span>\n\n      <span class=\"foldcala-head-right\">\n        <!-- Its own name: reusing the rail's would nest two regions under one. -->\n        <span\n          class=\"foldcala-modes\"\n          role=\"group\"\n          [attr.aria-label]=\"chrome.l().agendaModes\"\n        >\n          <button\n            type=\"button\"\n            [class.is-on]=\"mode() === 'todo'\"\n            [attr.aria-pressed]=\"mode() === 'todo'\"\n            (click)=\"toggleMode('todo')\"\n          >\n            {{ chrome.l().agendaTodo }}\n          </button>\n          <button\n            type=\"button\"\n            [class.is-on]=\"mode() === 'all'\"\n            [attr.aria-pressed]=\"mode() === 'all'\"\n            (click)=\"toggleMode('all')\"\n          >\n            {{ chrome.l().agendaUpcoming }}\n          </button>\n        </span>\n        <button\n          type=\"button\"\n          class=\"foldcala-collapse\"\n          [attr.aria-expanded]=\"true\"\n          [attr.aria-label]=\"chrome.l().collapse\"\n          (click)=\"toggleCollapsed()\"\n        >\n          <fold-icon name=\"chevron-right\" size=\"sm\" />\n        </button>\n      </span>\n    </header>\n\n    <div class=\"foldcala-body\">\n      @if (groups().length === 0) {\n        <p class=\"foldcala-empty\">{{ emptyMessage() }}</p>\n      } @else {\n        @for (group of groups(); track group.date) {\n          <section class=\"foldcala-group\">\n            <button\n              type=\"button\"\n              class=\"foldcala-date\"\n              (click)=\"dayClick.emit(group.date)\"\n            >\n              @if (headingContent(); as projected) {\n                <ng-container\n                  [ngTemplateOutlet]=\"projected\"\n                  [ngTemplateOutletContext]=\"{\n                    $implicit: group.date,\n                    events: group.events,\n                  }\"\n                />\n              } @else {\n                <span class=\"foldcala-daynum\">{{ dayNumber(group) }}</span>\n                <span class=\"foldcala-dmeta\">\n                  <span class=\"foldcala-dname\">{{ relativeName(group) }}</span>\n                  @if (monthName(group)) {\n                    <span class=\"foldcala-dmonth\">{{ monthName(group) }}</span>\n                  }\n                </span>\n              }\n            </button>\n\n            <ul class=\"foldcala-list\">\n              @for (event of group.events; track event.id) {\n                <li>\n                  <button\n                    type=\"button\"\n                    class=\"foldcal-chip\"\n                    [attr.data-tone]=\"event.tone ?? 'neutral'\"\n                    (click)=\"eventClick.emit(event)\"\n                  >\n                    @if (chrome.eventContent(); as projected) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"projected\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: event,\n                          band: null,\n                        }\"\n                      />\n                    } @else {\n                      <span class=\"foldcal-chip-bar\"></span>\n                      @if (event.icon; as icon) {\n                        <fold-icon\n                          class=\"foldcal-chip-icon\"\n                          [name]=\"icon\"\n                          size=\"sm\"\n                        />\n                      }\n                      <span class=\"foldcal-chip-body\">\n                        <span class=\"foldcal-chip-label\">{{\n                          event.label\n                        }}</span>\n                        @if (event.subline) {\n                          <span class=\"foldcal-chip-sub\">{{\n                            event.subline\n                          }}</span>\n                        }\n                      </span>\n                    }\n                  </button>\n                </li>\n              }\n            </ul>\n          </section>\n        }\n\n        <!-- `limit` stopped short of what is ahead: say so, rather than\n             letting the rail look like the end of the story. -->\n        @if (truncated(); as more) {\n          <p class=\"foldcala-more\">{{ chrome.l().agendaMore(more) }}</p>\n        }\n      }\n    </div>\n  </aside>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block}.foldcal-chip{position:relative;display:flex;align-items:stretch;gap:var(--fold-space-sm);width:100%;padding:var(--fold-space-xs) var(--fold-space-sm);padding-inline-start:0;border:0;border-radius:var(--fold-calendar-band-radius, var(--fold-radius-sm));background:var(--fold-color-surface-raised);color:var(--fold-color-text);font:inherit;text-align:start;cursor:pointer;overflow:hidden;transition:background-color var(--fold-motion-fast) ease}.foldcal-chip:hover{background:var(--fold-color-surface-hover)}.foldcal-chip:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px}.foldcal-chip-bar{flex:0 0 var(--fold-calendar-bar-width, 3px);align-self:stretch;background:var(--fold-color-text-muted)}.foldcal-chip-icon{flex:none;align-self:center;margin-inline-start:var(--fold-space-sm);color:var(--fold-color-text-secondary)}.foldcal-chip-body{display:flex;flex-direction:column;gap:1px;min-width:0}.foldcal-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fold-text-sm);font-weight:500}.foldcal-chip-sub{color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs)}.foldcal-chip[data-tone=success] .foldcal-chip-bar{background:var(--fold-color-success)}.foldcal-chip[data-tone=warning] .foldcal-chip-bar{background:var(--fold-color-warning)}.foldcal-chip[data-tone=alert] .foldcal-chip-bar{background:var(--fold-color-alert)}.foldcal-chip[data-tone=muted] .foldcal-chip-bar{background:var(--fold-color-text-faded)}.foldcal-chip[data-tone=muted] .foldcal-chip-label{color:var(--fold-color-text-secondary);text-decoration:line-through;text-decoration-thickness:1px}@media(forced-colors:active){.foldcal-chip{border:1px solid CanvasText}.foldcal-chip-bar{forced-color-adjust:none}}@media(prefers-reduced-motion:reduce){.foldcal-chip{transition:none}}.foldcala{display:flex;flex-direction:column;min-height:0;width:var(--fold-calendar-agenda-width, 320px);height:var(--fold-calendar-agenda-height, 100%);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-lg);background:var(--fold-color-surface-card);overflow:clip}.foldcala.is-collapsed{width:var(--fold-calendar-agenda-spine-width, 44px)}.foldcala-spine{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--fold-space-md);padding:var(--fold-space-md) 0;border:0;background:transparent;color:var(--fold-color-text-secondary);font:inherit;cursor:pointer}.foldcala-spine:hover{background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.foldcala-spine:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px}.foldcala-spine-label{writing-mode:vertical-rl;font-size:var(--fold-text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase}.foldcala-spine-count{display:inline-flex;align-items:center;justify-content:center;min-width:var(--fold-calendar-agenda-badge-size, 20px);padding:0 var(--fold-space-xs);border-radius:var(--fold-radius-pill);background:var(--fold-color-warning-surface);color:var(--fold-color-warning-text);font-size:var(--fold-text-xs);font-weight:700;font-variant-numeric:tabular-nums}.foldcala-head{display:flex;align-items:center;justify-content:space-between;gap:var(--fold-space-sm);padding:var(--fold-space-md);border-bottom:1px solid var(--fold-color-border-subtle)}.foldcala-title{display:inline-flex;align-items:center;gap:var(--fold-space-sm);color:var(--fold-color-text);font-size:var(--fold-text-sm);font-weight:700}.foldcala-count{display:inline-flex;align-items:center;justify-content:center;min-width:var(--fold-calendar-agenda-badge-size, 20px);padding:0 var(--fold-space-xs);border-radius:var(--fold-radius-pill);background:var(--fold-color-warning-surface);color:var(--fold-color-warning-text);font-size:var(--fold-text-xs);font-weight:700;font-variant-numeric:tabular-nums}.foldcala-head-right{display:inline-flex;align-items:center;gap:var(--fold-space-xs)}.foldcala-modes{display:inline-flex;padding:2px;border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-sunken)}.foldcala-modes button{padding:2px var(--fold-space-sm);border:0;border-radius:var(--fold-radius-xs);background:transparent;color:var(--fold-color-text-secondary);font:inherit;font-size:var(--fold-text-xs);font-weight:500;cursor:pointer}.foldcala-modes button.is-on{background:var(--fold-color-surface-raised);color:var(--fold-color-text)}.foldcala-modes button:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:1px}.foldcala-collapse{display:inline-flex;align-items:center;justify-content:center;width:var(--fold-calendar-agenda-control-size, 26px);height:var(--fold-calendar-agenda-control-size, 26px);padding:0;border:1px solid var(--fold-color-border-subtle);border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-subtle);color:var(--fold-color-text-secondary);cursor:pointer}.foldcala-collapse:hover{background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.foldcala-collapse:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:1px}.foldcala-body{flex:1;min-height:0;overflow-y:auto;padding:var(--fold-space-sm)}.foldcala-group{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--fold-space-sm);padding:var(--fold-space-sm) 0}.foldcala-group+.foldcala-group{border-top:1px solid var(--fold-color-border-subtle)}.foldcala-date{display:flex;align-items:baseline;gap:var(--fold-space-xs);padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer}.foldcala-date:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:2px}.foldcala-daynum{color:var(--fold-color-text);font-size:var(--fold-text-lg);font-weight:700;font-variant-numeric:tabular-nums;line-height:1}.foldcala-dmeta{display:flex;flex-direction:column}.foldcala-dname{color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase}.foldcala-dmonth{color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs);text-transform:uppercase}.foldcala-list{display:flex;flex-direction:column;gap:var(--fold-space-xs);margin:0;padding:0;list-style:none}.foldcala-empty{margin:0;padding:var(--fold-space-xl) var(--fold-space-md);color:var(--fold-color-text-secondary);font-size:var(--fold-text-sm);text-align:center}@media(forced-colors:active){.foldcala-modes button.is-on{outline:1px solid Highlight}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarAgendaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "fold-calendar-agenda", standalone: true, imports: [NgTemplateOutlet, FoldIconComponent], hostDirectives: [
+                        {
+                            directive: FoldCalendarChromeDirective,
+                            inputs: ["locale", "labels", "formats"],
+                        },
+                    ], template: "@if (collapsed()) {\n  <aside class=\"foldcala is-collapsed\" [attr.aria-label]=\"chrome.l().agenda\">\n    <button\n      type=\"button\"\n      class=\"foldcala-spine\"\n      [attr.aria-expanded]=\"false\"\n      [attr.aria-label]=\"chrome.l().expand\"\n      (click)=\"toggleCollapsed()\"\n    >\n      <fold-icon name=\"inbox\" size=\"sm\" />\n      @if (todoCount() > 0) {\n        <span class=\"foldcala-spine-count\">{{ todoCount() }}</span>\n      }\n      <!-- The spine names what opening the rail will show, not always \"todo\". -->\n      <span class=\"foldcala-spine-label\">{{ title() }}</span>\n    </button>\n  </aside>\n} @else {\n  <aside class=\"foldcala\" [attr.aria-label]=\"chrome.l().agenda\">\n    <header class=\"foldcala-head\">\n      <span class=\"foldcala-title\">\n        {{ title() }}\n        @if (todoCount() > 0) {\n          <span class=\"foldcala-count\">{{ todoCount() }}</span>\n        }\n      </span>\n\n      <span class=\"foldcala-head-right\">\n        <!-- Its own name: reusing the rail's would nest two regions under one. -->\n        <span\n          class=\"foldcala-modes\"\n          role=\"group\"\n          [attr.aria-label]=\"chrome.l().agendaModes\"\n        >\n          <button\n            type=\"button\"\n            [class.is-on]=\"mode() === 'todo'\"\n            [attr.aria-pressed]=\"mode() === 'todo'\"\n            (click)=\"toggleMode('todo')\"\n          >\n            {{ chrome.l().agendaTodo }}\n          </button>\n          <button\n            type=\"button\"\n            [class.is-on]=\"mode() === 'all'\"\n            [attr.aria-pressed]=\"mode() === 'all'\"\n            (click)=\"toggleMode('all')\"\n          >\n            {{ chrome.l().agendaUpcoming }}\n          </button>\n        </span>\n        <button\n          type=\"button\"\n          class=\"foldcala-collapse\"\n          [attr.aria-expanded]=\"true\"\n          [attr.aria-label]=\"chrome.l().collapse\"\n          (click)=\"toggleCollapsed()\"\n        >\n          <fold-icon name=\"chevron-right\" size=\"sm\" />\n        </button>\n      </span>\n    </header>\n\n    <div class=\"foldcala-body\">\n      @if (groups().length === 0) {\n        <p class=\"foldcala-empty\">{{ emptyMessage() }}</p>\n      } @else {\n        @for (group of groups(); track group.date) {\n          <section class=\"foldcala-group\">\n            <button\n              type=\"button\"\n              class=\"foldcala-date\"\n              (click)=\"dayClick.emit(group.date)\"\n            >\n              @if (headingContent(); as projected) {\n                <ng-container\n                  [ngTemplateOutlet]=\"projected\"\n                  [ngTemplateOutletContext]=\"{\n                    $implicit: group.date,\n                    events: group.events,\n                  }\"\n                />\n              } @else {\n                <span class=\"foldcala-daynum\">{{ dayNumber(group) }}</span>\n                <span class=\"foldcala-dmeta\">\n                  <span class=\"foldcala-dname\">{{ relativeName(group) }}</span>\n                  @if (monthName(group)) {\n                    <span class=\"foldcala-dmonth\">{{ monthName(group) }}</span>\n                  }\n                </span>\n              }\n            </button>\n\n            <ul class=\"foldcala-list\">\n              @for (event of group.events; track event.id) {\n                <li>\n                  <button\n                    type=\"button\"\n                    class=\"foldcal-chip\"\n                    [attr.data-tone]=\"event.tone ?? 'neutral'\"\n                    (click)=\"eventClick.emit(event)\"\n                  >\n                    @if (chrome.eventContent(); as projected) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"projected\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: event,\n                          band: null,\n                        }\"\n                      />\n                    } @else {\n                      <span class=\"foldcal-chip-bar\"></span>\n                      @if (event.icon; as icon) {\n                        <fold-icon\n                          class=\"foldcal-chip-icon\"\n                          [name]=\"icon\"\n                          size=\"sm\"\n                        />\n                      }\n                      <span class=\"foldcal-chip-body\">\n                        <span class=\"foldcal-chip-label\">{{\n                          event.label\n                        }}</span>\n                        @if (event.subline) {\n                          <span class=\"foldcal-chip-sub\">{{\n                            event.subline\n                          }}</span>\n                        }\n                      </span>\n                    }\n                  </button>\n                </li>\n              }\n            </ul>\n          </section>\n        }\n\n        <!-- `limit` stopped short of what is ahead: say so, rather than\n             letting the rail look like the end of the story. -->\n        @if (truncated(); as more) {\n          <p class=\"foldcala-more\">{{ chrome.l().agendaMore(more) }}</p>\n        }\n      }\n    </div>\n  </aside>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block}.foldcal-chip{position:relative;display:flex;align-items:stretch;gap:var(--fold-space-sm);width:100%;padding:var(--fold-space-xs) var(--fold-space-sm);padding-inline-start:0;border:0;border-radius:var(--fold-calendar-band-radius, var(--fold-radius-sm));background:var(--fold-color-surface-raised);color:var(--fold-color-text);font:inherit;text-align:start;cursor:pointer;overflow:hidden;transition:background-color var(--fold-motion-fast) ease}.foldcal-chip:hover{background:var(--fold-color-surface-hover)}.foldcal-chip:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px}.foldcal-chip-bar{flex:0 0 var(--fold-calendar-bar-width, 3px);align-self:stretch;background:var(--fold-color-text-muted)}.foldcal-chip-icon{flex:none;align-self:center;margin-inline-start:var(--fold-space-sm);color:var(--fold-color-text-secondary)}.foldcal-chip-body{display:flex;flex-direction:column;gap:1px;min-width:0}.foldcal-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fold-text-sm);font-weight:500}.foldcal-chip-sub{color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs)}.foldcal-chip[data-tone=success] .foldcal-chip-bar{background:var(--fold-color-success)}.foldcal-chip[data-tone=warning] .foldcal-chip-bar{background:var(--fold-color-warning)}.foldcal-chip[data-tone=alert] .foldcal-chip-bar{background:var(--fold-color-alert)}.foldcal-chip[data-tone=muted] .foldcal-chip-bar{background:var(--fold-color-text-faded)}.foldcal-chip[data-tone=muted] .foldcal-chip-label{color:var(--fold-color-text-secondary);text-decoration:line-through;text-decoration-thickness:1px}@media(forced-colors:active){.foldcal-chip{border:1px solid CanvasText}.foldcal-chip-bar{forced-color-adjust:none}}@media(prefers-reduced-motion:reduce){.foldcal-chip{transition:none}}.foldcala{display:flex;flex-direction:column;min-height:0;width:var(--fold-calendar-agenda-width, 320px);height:var(--fold-calendar-agenda-height, 100%);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-lg);background:var(--fold-color-surface-card);overflow:clip}.foldcala.is-collapsed{width:var(--fold-calendar-agenda-spine-width, 44px)}.foldcala-spine{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--fold-space-md);padding:var(--fold-space-md) 0;border:0;background:transparent;color:var(--fold-color-text-secondary);font:inherit;cursor:pointer}.foldcala-spine:hover{background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.foldcala-spine:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px}.foldcala-spine-label{writing-mode:vertical-rl;font-size:var(--fold-text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase}.foldcala-spine-count{display:inline-flex;align-items:center;justify-content:center;min-width:var(--fold-calendar-agenda-badge-size, 20px);padding:0 var(--fold-space-xs);border-radius:var(--fold-radius-pill);background:var(--fold-color-warning-surface);color:var(--fold-color-warning-text);font-size:var(--fold-text-xs);font-weight:700;font-variant-numeric:tabular-nums}.foldcala-head{display:flex;align-items:center;justify-content:space-between;gap:var(--fold-space-sm);padding:var(--fold-space-md);border-bottom:1px solid var(--fold-color-border-subtle)}.foldcala-title{display:inline-flex;align-items:center;gap:var(--fold-space-sm);color:var(--fold-color-text);font-size:var(--fold-text-sm);font-weight:700}.foldcala-count{display:inline-flex;align-items:center;justify-content:center;min-width:var(--fold-calendar-agenda-badge-size, 20px);padding:0 var(--fold-space-xs);border-radius:var(--fold-radius-pill);background:var(--fold-color-warning-surface);color:var(--fold-color-warning-text);font-size:var(--fold-text-xs);font-weight:700;font-variant-numeric:tabular-nums}.foldcala-head-right{display:inline-flex;align-items:center;gap:var(--fold-space-xs)}.foldcala-modes{display:inline-flex;padding:2px;border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-sunken)}.foldcala-modes button{padding:2px var(--fold-space-sm);border:0;border-radius:var(--fold-radius-xs);background:transparent;color:var(--fold-color-text-secondary);font:inherit;font-size:var(--fold-text-xs);font-weight:500;cursor:pointer}.foldcala-modes button.is-on{background:var(--fold-color-surface-raised);color:var(--fold-color-text)}.foldcala-modes button:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:1px}.foldcala-collapse{display:inline-flex;align-items:center;justify-content:center;width:var(--fold-calendar-agenda-control-size, 26px);height:var(--fold-calendar-agenda-control-size, 26px);padding:0;border:1px solid var(--fold-color-border-subtle);border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-subtle);color:var(--fold-color-text-secondary);cursor:pointer}.foldcala-collapse:hover{background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.foldcala-collapse:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:1px}.foldcala-body{flex:1;min-height:0;overflow-y:auto;padding:var(--fold-space-sm)}.foldcala-group{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--fold-space-sm);padding:var(--fold-space-sm) 0}.foldcala-group+.foldcala-group{border-top:1px solid var(--fold-color-border-subtle)}.foldcala-date{display:flex;align-items:baseline;gap:var(--fold-space-xs);padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer}.foldcala-date:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:2px}.foldcala-daynum{color:var(--fold-color-text);font-size:var(--fold-text-lg);font-weight:700;font-variant-numeric:tabular-nums;line-height:1}.foldcala-dmeta{display:flex;flex-direction:column}.foldcala-dname{color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase}.foldcala-dmonth{color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs);text-transform:uppercase}.foldcala-list{display:flex;flex-direction:column;gap:var(--fold-space-xs);margin:0;padding:0;list-style:none}.foldcala-empty{margin:0;padding:var(--fold-space-xl) var(--fold-space-md);color:var(--fold-color-text-secondary);font-size:var(--fold-text-sm);text-align:center}@media(forced-colors:active){.foldcala-modes button.is-on{outline:1px solid Highlight}}\n"] }]
+        }], propDecorators: { from: [{ type: i0.Input, args: [{ isSignal: true, alias: "from", required: true }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }, { type: i0.Output, args: ["modeChange"] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: false }] }], isActionable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActionable", required: false }] }], dayClick: [{ type: i0.Output, args: ["dayClick"] }], eventClick: [{ type: i0.Output, args: ["eventClick"] }], projectedHeading: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FoldCalendarHeadingDirective), { isSignal: true }] }] } });
+
+/**
+ * `<fold-calendar-source-filter>` — the chips that switch each feed of a
+ * merged calendar on and off.
+ *
+ * A calendar usually shows several feeds at once (a programme, staff leave,
+ * contracts). This owns the **selection** only: it counts what each feed
+ * contributes and toggles it, and the caller runs `foldFilterBySource()` over
+ * its own events. Keeping the two apart means the chips never need to know how
+ * the events are fetched, and the filtering stays a pure function.
+ *
+ * ## Inputs
+ * | Input     | Type                     | Default | Meaning |
+ * |-----------|--------------------------|---------|---------|
+ * | `sources` | `FoldCalendarSource[]`   | `[]`    | The feeds to offer. |
+ * | `events`  | `FoldCalendarEvent[]`    | `[]`    | Counted per feed — pass the window on screen for live counts. |
+ * | `active`  | `ReadonlySet<string> \| null` | `null` | **Two-way.** The keys currently shown; `null` means "all". |
+ * | `labels`  | `Partial<FoldCalendarLabels>` | — | Per-instance label overrides. |
+ *
+ * ## Outputs
+ * | Output            | Payload               | Fires on |
+ * |-------------------|-----------------------|----------|
+ * | `selectionChange` | `ReadonlySet<string>` | A chip toggled — never `null`. |
+ *
+ * `null` and an empty `Set` mean opposite things — "nothing switched off yet"
+ * versus "every feed switched off" — which is why they are not collapsed.
+ * `foldFilterBySource()` takes either.
+ *
+ * ## Accessibility
+ * Each chip is a **toggle**, so it carries `aria-pressed` in both states, and
+ * its accessible name says which feed and whether it is showing — the tick and
+ * the dot are colour, which cannot be the only carrier.
+ *
+ * @selector `fold-calendar-source-filter`
+ *
+ * @example
+ * ```html
+ * <fold-calendar-source-filter
+ *   [sources]="sources"
+ *   [events]="events()"
+ *   [(active)]="activeSources"
+ * />
+ * <fold-calendar-month [events]="visibleEvents()" [(month)]="month" />
+ * ```
+ */
+class FoldCalendarSourceFilterComponent {
+    /** The feeds to offer. */
+    sources = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sources" }] : /* istanbul ignore next */ []));
+    /** Events to count per feed; pass the window on screen for live counts. */
+    events = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []));
+    /**
+     * The keys currently shown. Left unset every feed shows, so the filter is
+     * useful before the caller has any selection state of its own.
+     */
+    active = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /**
+     * The selection after a chip was toggled — **never `null`**, unlike `active`,
+     * whose unset state exists only as a starting value. Handle this one and you
+     * never have to eliminate a case that cannot happen.
+     */
+    selectionChange = output();
+    /** Labels and locale — see the directive. */
+    chrome = inject(FoldCalendarChromeDirective);
+    /** The effective selection — every key while `active` is unset. */
+    shownKeys = computed(() => {
+        const selected = this.active();
+        if (selected !== null) {
+            return selected;
+        }
+        return new Set(this.sources().map((source) => source.key));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shownKeys" }] : /* istanbul ignore next */ []));
+    chips = computed(() => {
+        const shown = this.shownKeys();
+        const events = this.events();
+        return this.sources().map((source) => ({
+            source,
+            count: events.filter((event) => event.sourceKey === source.key).length,
+            shown: shown.has(source.key),
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chips" }] : /* istanbul ignore next */ []));
+    chipLabel(chip) {
+        return this.chrome.l().sourceState(chip.source.label, chip.shown);
+    }
+    /** Writes the next selection rather than mutating the set in place. */
+    toggle(chip) {
+        const next = new Set(this.shownKeys());
+        if (next.has(chip.source.key)) {
+            next.delete(chip.source.key);
+        }
+        else {
+            next.add(chip.source.key);
+        }
+        this.active.set(next);
+        this.selectionChange.emit(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarSourceFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldCalendarSourceFilterComponent, isStandalone: true, selector: "fold-calendar-source-filter", inputs: { sources: { classPropertyName: "sources", publicName: "sources", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", selectionChange: "selectionChange" }, hostDirectives: [{ directive: FoldCalendarChromeDirective, inputs: ["locale", "locale", "labels", "labels", "formats", "formats"] }], ngImport: i0, template: "<nav class=\"foldcalsf\" [attr.aria-label]=\"chrome.l().sourceFilter\">\n  @for (chip of chips(); track chip.source.key) {\n    <button\n      type=\"button\"\n      class=\"foldcalsf-chip\"\n      [class.is-on]=\"chip.shown\"\n      [attr.data-tone]=\"chip.source.tone ?? 'neutral'\"\n      [attr.aria-pressed]=\"chip.shown\"\n      [attr.aria-label]=\"chipLabel(chip)\"\n      (click)=\"toggle(chip)\"\n    >\n      @if (chip.shown) {\n        <fold-icon class=\"foldcalsf-check\" name=\"check\" size=\"sm\" />\n      }\n      <span class=\"foldcalsf-dot\" aria-hidden=\"true\"></span>\n      <span class=\"foldcalsf-label\">{{ chip.source.label }}</span>\n      <span class=\"foldcalsf-count\">{{ chip.count }}</span>\n    </button>\n  }\n</nav>\n", styles: [":host{display:block}.foldcalsf{display:flex;flex-wrap:wrap;gap:var(--fold-space-sm)}.foldcalsf-chip{display:inline-flex;align-items:center;gap:var(--fold-space-xs);padding:var(--fold-space-xs) var(--fold-space-md);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-pill);background:var(--fold-color-surface-subtle);color:var(--fold-color-text-secondary);font:inherit;font-size:var(--fold-text-sm);font-weight:500;cursor:pointer;transition:background-color var(--fold-motion-fast, .12s) ease,color var(--fold-motion-fast, .12s) ease,border-color var(--fold-motion-fast, .12s) ease}.foldcalsf-chip:hover{background:var(--fold-color-surface-hover)}.foldcalsf-chip:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:2px}.foldcalsf-chip:not(.is-on) .foldcalsf-dot{background:var(--fold-color-text-faded)}.foldcalsf-chip:not(.is-on) .foldcalsf-label{text-decoration:line-through;text-decoration-color:var(--fold-color-text-faded)}.foldcalsf-chip.is-on{background:var(--fold-color-surface-raised);border-color:var(--fold-color-border);color:var(--fold-color-text)}.foldcalsf-check{flex:none;color:var(--fold-color-primary-text)}.foldcalsf-dot{flex:none;width:8px;height:8px;border-radius:var(--fold-radius-round);background:var(--fold-color-text-muted)}.foldcalsf-chip[data-tone=success].is-on .foldcalsf-dot{background:var(--fold-color-success)}.foldcalsf-chip[data-tone=warning].is-on .foldcalsf-dot{background:var(--fold-color-warning)}.foldcalsf-chip[data-tone=alert].is-on .foldcalsf-dot{background:var(--fold-color-alert)}.foldcalsf-chip[data-tone=muted].is-on .foldcalsf-dot{background:var(--fold-color-text-faded)}.foldcalsf-count{color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs);font-variant-numeric:tabular-nums}@media(forced-colors:active){.foldcalsf-chip.is-on{border:2px solid Highlight}}@media(prefers-reduced-motion:reduce){.foldcalsf-chip{transition:none}}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCalendarSourceFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "fold-calendar-source-filter", standalone: true, imports: [FoldIconComponent], hostDirectives: [
+                        {
+                            directive: FoldCalendarChromeDirective,
+                            inputs: ["locale", "labels", "formats"],
+                        },
+                    ], template: "<nav class=\"foldcalsf\" [attr.aria-label]=\"chrome.l().sourceFilter\">\n  @for (chip of chips(); track chip.source.key) {\n    <button\n      type=\"button\"\n      class=\"foldcalsf-chip\"\n      [class.is-on]=\"chip.shown\"\n      [attr.data-tone]=\"chip.source.tone ?? 'neutral'\"\n      [attr.aria-pressed]=\"chip.shown\"\n      [attr.aria-label]=\"chipLabel(chip)\"\n      (click)=\"toggle(chip)\"\n    >\n      @if (chip.shown) {\n        <fold-icon class=\"foldcalsf-check\" name=\"check\" size=\"sm\" />\n      }\n      <span class=\"foldcalsf-dot\" aria-hidden=\"true\"></span>\n      <span class=\"foldcalsf-label\">{{ chip.source.label }}</span>\n      <span class=\"foldcalsf-count\">{{ chip.count }}</span>\n    </button>\n  }\n</nav>\n", styles: [":host{display:block}.foldcalsf{display:flex;flex-wrap:wrap;gap:var(--fold-space-sm)}.foldcalsf-chip{display:inline-flex;align-items:center;gap:var(--fold-space-xs);padding:var(--fold-space-xs) var(--fold-space-md);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-pill);background:var(--fold-color-surface-subtle);color:var(--fold-color-text-secondary);font:inherit;font-size:var(--fold-text-sm);font-weight:500;cursor:pointer;transition:background-color var(--fold-motion-fast, .12s) ease,color var(--fold-motion-fast, .12s) ease,border-color var(--fold-motion-fast, .12s) ease}.foldcalsf-chip:hover{background:var(--fold-color-surface-hover)}.foldcalsf-chip:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:2px}.foldcalsf-chip:not(.is-on) .foldcalsf-dot{background:var(--fold-color-text-faded)}.foldcalsf-chip:not(.is-on) .foldcalsf-label{text-decoration:line-through;text-decoration-color:var(--fold-color-text-faded)}.foldcalsf-chip.is-on{background:var(--fold-color-surface-raised);border-color:var(--fold-color-border);color:var(--fold-color-text)}.foldcalsf-check{flex:none;color:var(--fold-color-primary-text)}.foldcalsf-dot{flex:none;width:8px;height:8px;border-radius:var(--fold-radius-round);background:var(--fold-color-text-muted)}.foldcalsf-chip[data-tone=success].is-on .foldcalsf-dot{background:var(--fold-color-success)}.foldcalsf-chip[data-tone=warning].is-on .foldcalsf-dot{background:var(--fold-color-warning)}.foldcalsf-chip[data-tone=alert].is-on .foldcalsf-dot{background:var(--fold-color-alert)}.foldcalsf-chip[data-tone=muted].is-on .foldcalsf-dot{background:var(--fold-color-text-faded)}.foldcalsf-count{color:var(--fold-color-text-secondary);font-size:var(--fold-text-xs);font-variant-numeric:tabular-nums}@media(forced-colors:active){.foldcalsf-chip.is-on{border:2px solid Highlight}}@media(prefers-reduced-motion:reduce){.foldcalsf-chip{transition:none}}\n"] }]
+        }], propDecorators: { sources: [{ type: i0.Input, args: [{ isSignal: true, alias: "sources", required: false }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+
 // Public TypeScript API for fold-ng.
 //
 // The tokens themselves ship as CSS (import 'fold-ng/tokens.css').
@@ -9035,5 +11857,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FOLD_AUTO_PALETTES, FOLD_BLUR_TOKENS, FOLD_BUILTIN_ICONS, FOLD_DATA_TABLE_DEFAULT_LABELS, FOLD_DATA_TABLE_LABELS, FOLD_INLINE_CONFIRM_DEFAULT_LABELS, FOLD_INLINE_CONFIRM_LABELS, FOLD_MOTION_TOKENS, FOLD_PAGINATOR_DEFAULT_LABELS, FOLD_PAGINATOR_LABELS, FOLD_PALETTE_DEFAULT, FOLD_PANEL_CLOSE_LABEL, FOLD_PANEL_DEFAULTS, FOLD_RADIUS_TOKENS, FOLD_SEMANTIC_COLOR_TOKENS, FOLD_SHADOW_TOKENS, FOLD_SPACE_TOKENS, FOLD_TEXT_TOKENS, FOLD_TOAST_CONFIG, FoldAppShellComponent, FoldAsideLayoutComponent, FoldAvatarComponent, FoldAvatarDetailComponent, FoldAvatarListComponent, FoldBadgeComponent, FoldButtonComponent, FoldButtonIconComponent, FoldCalloutComponent, FoldCardComponent, FoldCheckboxComponent, FoldChoiceRowComponent, FoldContextCardComponent, FoldDataTableCellDirective, FoldDataTableComponent, FoldDataTableRowCardDirective, FoldDisclosureComponent, FoldDropdownComponent, FoldDropdownItemComponent, FoldElementTitleComponent, FoldElevatedDirective, FoldEmptyStateComponent, FoldFieldComponent, FoldFieldIdDirective, FoldFieldListComponent, FoldFileDropzoneComponent, FoldHeroCardComponent, FoldHeroSectionComponent, FoldIconComponent, FoldIconRegistry, FoldIdService, FoldInlineConfirmComponent, FoldInputComponent, FoldLinkComponent, FoldListboxComponent, FoldLoadingStateComponent, FoldMenuComponent, FoldMenuItemComponent, FoldMenuSectionComponent, FoldMenuSeparatorComponent, FoldMultiselectComponent, FoldNavLauncherComponent, FoldNavLayoutComponent, FoldNavTileComponent, FoldNumberInputComponent, FoldOptionComponent, FoldPageLayoutComponent, FoldPageSectionComponent, FoldPageTitleDirective, FoldPaginatorComponent, FoldPaletteRegistry, FoldPanelComponentOutletDirective, FoldPanelHeaderComponent, FoldPanelHostComponent, FoldPanelHostService, FoldPanelRef, FoldPanelToggle, FoldPasswordFieldComponent, FoldPopoverComponent, FoldPopoverTriggerDirective, FoldRangeSliderComponent, FoldRepeatPressDirective, FoldSearchComponent, FoldSelectComponent, FoldSliderComponent, FoldSpinnerComponent, FoldStatusBadgeComponent, FoldStickyColumnDirective, FoldSurfaceDirective, FoldTabPanelComponent, FoldTabsComponent, FoldTimelineComponent, FoldToastComponent, FoldToastContainerComponent, FoldToastService, FoldToggleIconComponent, FoldViewNavComponent, FoldViewToggleComponent, autoUpdate, computePlacement, foldBlurVar, foldCardBandChrome, foldColorProperty, foldColorVar, foldDefaultPasswordRules, foldHashSeed, foldMotionVar, foldRadiusVar, foldRegexRule, foldResolvePalette, foldShadowVar, foldSpaceVar, foldTextVar, observeElementWidth, provideFoldDataTableLabels, provideFoldIcons, provideFoldInlineConfirmLabels, provideFoldPaginatorLabels, provideFoldPalette, provideFoldPanelDefaults, provideFoldPanelLabels, provideFoldToasts };
+export { FOLD_AUTO_PALETTES, FOLD_BLUR_TOKENS, FOLD_BUILTIN_ICONS, FOLD_CALENDAR_DEFAULT_LABELS, FOLD_CALENDAR_FORMATS, FOLD_CALENDAR_LABELS, FOLD_DATA_TABLE_DEFAULT_LABELS, FOLD_DATA_TABLE_LABELS, FOLD_DEFAULT_WEEKEND_DAYS, FOLD_FALLBACK_WEEK_INFO, FOLD_INLINE_CONFIRM_DEFAULT_LABELS, FOLD_INLINE_CONFIRM_LABELS, FOLD_MINUTES_PER_DAY, FOLD_MOTION_TOKENS, FOLD_PAGINATOR_DEFAULT_LABELS, FOLD_PAGINATOR_LABELS, FOLD_PALETTE_DEFAULT, FOLD_PANEL_CLOSE_LABEL, FOLD_PANEL_DEFAULTS, FOLD_RADIUS_TOKENS, FOLD_SEMANTIC_COLOR_TOKENS, FOLD_SHADOW_TOKENS, FOLD_SPACE_TOKENS, FOLD_TEXT_TOKENS, FOLD_TOAST_CONFIG, FoldAppShellComponent, FoldAsideLayoutComponent, FoldAvatarComponent, FoldAvatarDetailComponent, FoldAvatarListComponent, FoldBadgeComponent, FoldButtonComponent, FoldButtonIconComponent, FoldCalendarAgendaComponent, FoldCalendarChromeDirective, FoldCalendarDayComponent, FoldCalendarDayDirective, FoldCalendarEventDirective, FoldCalendarHeadingDirective, FoldCalendarListComponent, FoldCalendarMonthComponent, FoldCalendarOverflowDirective, FoldCalendarSourceFilterComponent, FoldCalendarTimegridComponent, FoldCalendarTitleDirective, FoldCalendarToolbarComponent, FoldCalendarWeekComponent, FoldCalloutComponent, FoldCardComponent, FoldCheckboxComponent, FoldChoiceRowComponent, FoldContextCardComponent, FoldDataTableCellDirective, FoldDataTableComponent, FoldDataTableRowCardDirective, FoldDisclosureComponent, FoldDropdownComponent, FoldDropdownItemComponent, FoldElementTitleComponent, FoldElevatedDirective, FoldEmptyStateComponent, FoldFieldComponent, FoldFieldIdDirective, FoldFieldListComponent, FoldFileDropzoneComponent, FoldHeroCardComponent, FoldHeroSectionComponent, FoldIconComponent, FoldIconRegistry, FoldIdService, FoldInlineConfirmComponent, FoldInputComponent, FoldLinkComponent, FoldListboxComponent, FoldLoadingStateComponent, FoldMenuComponent, FoldMenuItemComponent, FoldMenuSectionComponent, FoldMenuSeparatorComponent, FoldMultiselectComponent, FoldNavLauncherComponent, FoldNavLayoutComponent, FoldNavTileComponent, FoldNumberInputComponent, FoldOptionComponent, FoldPageLayoutComponent, FoldPageSectionComponent, FoldPageTitleDirective, FoldPaginatorComponent, FoldPaletteRegistry, FoldPanelComponentOutletDirective, FoldPanelHeaderComponent, FoldPanelHostComponent, FoldPanelHostService, FoldPanelRef, FoldPanelToggle, FoldPasswordFieldComponent, FoldPopoverComponent, FoldPopoverTriggerDirective, FoldRangeSliderComponent, FoldRepeatPressDirective, FoldSearchComponent, FoldSelectComponent, FoldSliderComponent, FoldSpinnerComponent, FoldStatusBadgeComponent, FoldStickyColumnDirective, FoldSurfaceDirective, FoldTabPanelComponent, FoldTabsComponent, FoldTimelineComponent, FoldToastComponent, FoldToastContainerComponent, FoldToastService, FoldToggleIconComponent, FoldViewNavComponent, FoldViewToggleComponent, autoUpdate, computePlacement, foldAddDays, foldAddMinutes, foldAddMonths, foldBlurVar, foldBuildAgenda, foldBuildDay, foldBuildMonthGrid, foldBuildTimeGrid, foldBuildWeek, foldCalendarNextFocus, foldCardBandChrome, foldColorProperty, foldColorVar, foldCountActionable, foldDaysBetween, foldDefaultPasswordRules, foldEndOfMonth, foldEventsInRange, foldEventsOnDay, foldFilterBySource, foldFromMinutes, foldFromNativeDate, foldFromTemporal, foldHashSeed, foldIsActionable, foldIsCalendarDate, foldIsCalendarTime, foldIsTimed, foldIsWeekend, foldIsoWeek, foldIsoWeekYear, foldLayOutOverlaps, foldLocaleWeekInfo, foldMotionVar, foldRadiusVar, foldRangeForView, foldRegexRule, foldResolvePalette, foldShadowVar, foldShiftDate, foldSpaceVar, foldStartOfMonth, foldStartOfWeek, foldTextVar, foldToMinutes, foldToNativeDate, foldToday, foldViewTitle, foldWeekdayIndex, foldWeekdayOf, observeElementWidth, provideFoldCalendarLabels, provideFoldDataTableLabels, provideFoldIcons, provideFoldInlineConfirmLabels, provideFoldPaginatorLabels, provideFoldPalette, provideFoldPanelDefaults, provideFoldPanelLabels, provideFoldToasts };
 //# sourceMappingURL=fold-ng.mjs.map