mn-angular-lib 1.0.118 → 1.0.120

package/fesm2022/mn-angular-lib.mjs

@@ -9,7 +9,7 @@ import * as i1$1 from '@angular/forms';
 import { NgControl, Validators, FormsModule, NG_VALUE_ACCESSOR, FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { HttpClient, HttpErrorResponse, HttpStatusCode, HttpParams } from '@angular/common/http';
 import JSON5 from 'json5';
-import { LucideFile, LucideImagePlus, LucideTrash2, LucideUpload, LucideX, LucideChevronLeft, LucideChevronRight, LucideArrowLeft, LucideArrowRight, LucideCheck, LucideFilter, LucideFunnel, LucideDynamicIcon } from '@lucide/angular';
+import { LucideFile, LucideImagePlus, LucideTrash2, LucideUpload, LucideX, LucideCalendarDays, LucideChevronLeft, LucideChevronRight, LucideArrowLeft, LucideArrowRight, LucideCheck, LucideFilter, LucideFunnel, LucideDynamicIcon } from '@lucide/angular';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DomSanitizer } from '@angular/platform-browser';
 
@@ -229,6 +229,9 @@ const mnButtonVariants = tv({
             outline: 'bg-transparent border',
             text: 'bg-transparent',
             textUnderline: 'bg-transparent underline underline-offset-2',
+            // Transparent button that only reveals a subtle surface on hover — the idiomatic
+            // icon-button look. Colors resolved via compoundVariants.
+            ghost: 'bg-transparent',
         },
         // Intentionally empty; resolved via compoundVariants
         color: {
@@ -251,6 +254,14 @@ const mnButtonVariants = tv({
             three_xl: 'rounded-3xl',
             four_xl: 'rounded-4xl',
         },
+        // Icon-button shape. `circle`/`square` drop the text padding and make the button a
+        // fixed square sized off `size` (see compoundVariants), overriding `borderRadius`.
+        // `default` leaves a normal text button untouched.
+        shape: {
+            default: '',
+            circle: 'p-0 shrink-0 rounded-full',
+            square: 'p-0 shrink-0 rounded-md',
+        },
         disabled: {
             true: 'opacity-50 pointer-events-none',
         },
@@ -332,12 +343,36 @@ const mnButtonVariants = tv({
         { variant: 'textUnderline', color: 'success', hover: true, class: 'hover:bg-success/10' },
         { variant: 'textUnderline', color: 'accent', hover: true, class: 'hover:bg-accent/10' },
         { variant: 'textUnderline', color: 'gray', hover: true, class: 'hover:bg-base-content/10' },
+        // Ghost — base (transparent, colored text/icon)
+        { variant: 'ghost', color: 'primary', class: 'text-primary' },
+        { variant: 'ghost', color: 'secondary', class: 'text-neutral' },
+        { variant: 'ghost', color: 'danger', class: 'text-error' },
+        { variant: 'ghost', color: 'warning', class: 'text-warning' },
+        { variant: 'ghost', color: 'success', class: 'text-success' },
+        { variant: 'ghost', color: 'accent', class: 'text-accent' },
+        { variant: 'ghost', color: 'gray', class: 'text-base-content' },
+        // Ghost — hover (reveal a subtle surface in the button's own hue)
+        { variant: 'ghost', color: 'primary', hover: true, class: 'hover:bg-primary/10' },
+        { variant: 'ghost', color: 'secondary', hover: true, class: 'hover:bg-neutral/10' },
+        { variant: 'ghost', color: 'danger', hover: true, class: 'hover:bg-error/10' },
+        { variant: 'ghost', color: 'warning', hover: true, class: 'hover:bg-warning/10' },
+        { variant: 'ghost', color: 'success', hover: true, class: 'hover:bg-success/10' },
+        { variant: 'ghost', color: 'accent', hover: true, class: 'hover:bg-accent/10' },
+        { variant: 'ghost', color: 'gray', hover: true, class: 'hover:bg-base-content/10' },
+        // Icon-button square sizing — applies to both circle and square shapes, sized off `size`.
+        { shape: 'circle', size: 'sm', class: 'h-8 w-8' },
+        { shape: 'circle', size: 'md', class: 'h-10 w-10' },
+        { shape: 'circle', size: 'lg', class: 'h-12 w-12' },
+        { shape: 'square', size: 'sm', class: 'h-8 w-8' },
+        { shape: 'square', size: 'md', class: 'h-10 w-10' },
+        { shape: 'square', size: 'lg', class: 'h-12 w-12' },
     ],
     defaultVariants: {
         size: 'md',
         variant: 'fill',
         color: 'primary',
         borderRadius: 'lg',
+        shape: 'default',
         disabled: false,
         loading: false,
         wrap: false,
@@ -355,6 +390,7 @@ class MnButton {
             variant: this.data.variant,
             color: this.data.color,
             borderRadius: this.data.borderRadius,
+            shape: this.data.shape,
             disabled: this.data.disabled,
             loading: this.data.loading,
             wrap: this.data.wrap,
@@ -2889,7 +2925,35 @@ class MnDatetime {
     get resolvedMode() {
         return this.props.mode ?? 'datetime-local';
     }
+    /** Whether the control renders as an icon-only button rather than a full input. */
+    get iconOnly() {
+        return this.props.iconOnly === true;
+    }
+    /**
+     * Accessible name for the input. Prefers an explicit ariaLabel/label; for the
+     * icon-only variant — which has no visible text — it falls back to the
+     * placeholder so the button is never left unnamed.
+     */
+    get resolvedAriaLabel() {
+        const explicit = this.uiConfig.ariaLabel || this.uiConfig.label || this.props.label;
+        if (explicit)
+            return explicit;
+        return this.iconOnly ? (this.uiConfig.placeholder || this.props.placeholder || null) : null;
+    }
+    /** Lucide icon size (px) tracking the field size, used only in the icon-only variant. */
+    get iconSize() {
+        if (this.props.size === 'sm')
+            return 16;
+        if (this.props.size === 'lg')
+            return 20;
+        return 18;
+    }
     get inputClasses() {
+        // Icon-only: the input becomes a transparent click target filling the icon box,
+        // which carries the visible styling. `iconBoxClasses` provides the box itself.
+        if (this.iconOnly) {
+            return 'absolute inset-0 h-full w-full cursor-pointer opacity-0';
+        }
         return mnDatetimeVariants({
             size: this.props.size,
             borderRadius: this.props.borderRadius,
@@ -2898,12 +2962,30 @@ class MnDatetime {
             hover: this.props.hover,
         });
     }
+    /**
+     * Classes for the icon-only box: the same border/background/radius/hover the full
+     * input would wear (reused from the variant), made a positioning context for the
+     * overlaid input, with a `focus-within` ring standing in for the transparent
+     * input's own focus outline.
+     */
+    get iconBoxClasses() {
+        return [
+            mnDatetimeVariants({
+                size: this.props.size,
+                borderRadius: this.props.borderRadius,
+                shadow: this.props.shadow,
+                hover: this.props.hover,
+            }),
+            'relative inline-flex items-center justify-center text-base-content/70',
+            'focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-primary',
+        ].join(' ');
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnDatetime, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnDatetime, isStandalone: true, selector: "mn-lib-datetime", inputs: { props: "props" }, host: { properties: { "style.display": "props?.fullWidth ? 'block' : null", "style.width": "props?.fullWidth ? '100%' : null" } }, ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <input\n    #dateInput\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"resolvedMode\"\n    [attr.placeholder]=\"uiConfig.placeholder || props.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.min]=\"props.min || null\"\n    [attr.max]=\"props.max || null\"\n    [attr.step]=\"props.step || null\"\n    [value]=\"value ?? ''\"\n    [ngClass]=\"inputClasses\"\n    (click)=\"handleClick(dateInput)\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n", styles: ["input::-webkit-calendar-picker-indicator{cursor:pointer}@media(pointer:coarse){input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{-webkit-appearance:none;appearance:none;min-width:0;box-sizing:border-box}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnDatetime, isStandalone: true, selector: "mn-lib-datetime", inputs: { props: "props" }, host: { properties: { "style.display": "props?.fullWidth ? 'block' : null", "style.width": "props?.fullWidth ? '100%' : null" } }, ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  @if (iconOnly) {\n    <!--\n      Icon-only variant: a bordered box holding a calendar icon, with the native\n      input layered on top at zero opacity. The box carries the look (border,\n      background, radius, hover, focus ring); the input stays a real, focusable\n      form control that opens the picker on click. `focus-within` on the box\n      surfaces the keyboard focus ring, since the input itself is transparent.\n    -->\n    <div [ngClass]=\"iconBoxClasses\">\n      <svg [size]=\"iconSize\" lucideCalendarDays aria-hidden=\"true\" class=\"pointer-events-none\"></svg>\n      <ng-container [ngTemplateOutlet]=\"inputTemplate\"></ng-container>\n    </div>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"inputTemplate\"></ng-container>\n  }\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n\n<!-- Single input definition, rendered either bare or inside the icon box above,\n     so both variants share exactly the same bindings and behaviour. -->\n<ng-template #inputTemplate>\n  <input\n    #dateInput\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"resolvedMode\"\n    [attr.placeholder]=\"uiConfig.placeholder || props.placeholder || null\"\n    [attr.aria-label]=\"resolvedAriaLabel\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.min]=\"props.min || null\"\n    [attr.max]=\"props.max || null\"\n    [attr.step]=\"props.step || null\"\n    [value]=\"value ?? ''\"\n    [ngClass]=\"inputClasses\"\n    (click)=\"handleClick(dateInput)\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n</ng-template>\n", styles: ["input::-webkit-calendar-picker-indicator{cursor:pointer}@media(pointer:coarse){input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{-webkit-appearance:none;appearance:none;min-width:0;box-sizing:border-box}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "component", type: LucideCalendarDays, selector: "svg[lucideCalendarDays]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnDatetime, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-lib-datetime', standalone: true, imports: [NgClass, MnErrorMessage], host: {
+            args: [{ selector: 'mn-lib-datetime', standalone: true, imports: [NgClass, NgTemplateOutlet, MnErrorMessage, LucideCalendarDays], host: {
                         // Native date/time inputs have a platform-specific intrinsic width. Without an
                         // explicit host width the inline host collapses to that intrinsic size, so the
                         // input's `w-full` (width:100%) resolves against a content-sized box and fails to
@@ -2912,7 +2994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         // when fullWidth is requested so 100% has something to fill.
                         '[style.display]': "props?.fullWidth ? 'block' : null",
                         '[style.width]': "props?.fullWidth ? '100%' : null",
-                    }, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <input\n    #dateInput\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"resolvedMode\"\n    [attr.placeholder]=\"uiConfig.placeholder || props.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.min]=\"props.min || null\"\n    [attr.max]=\"props.max || null\"\n    [attr.step]=\"props.step || null\"\n    [value]=\"value ?? ''\"\n    [ngClass]=\"inputClasses\"\n    (click)=\"handleClick(dateInput)\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n", styles: ["input::-webkit-calendar-picker-indicator{cursor:pointer}@media(pointer:coarse){input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{-webkit-appearance:none;appearance:none;min-width:0;box-sizing:border-box}}\n"] }]
+                    }, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  @if (iconOnly) {\n    <!--\n      Icon-only variant: a bordered box holding a calendar icon, with the native\n      input layered on top at zero opacity. The box carries the look (border,\n      background, radius, hover, focus ring); the input stays a real, focusable\n      form control that opens the picker on click. `focus-within` on the box\n      surfaces the keyboard focus ring, since the input itself is transparent.\n    -->\n    <div [ngClass]=\"iconBoxClasses\">\n      <svg [size]=\"iconSize\" lucideCalendarDays aria-hidden=\"true\" class=\"pointer-events-none\"></svg>\n      <ng-container [ngTemplateOutlet]=\"inputTemplate\"></ng-container>\n    </div>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"inputTemplate\"></ng-container>\n  }\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n\n<!-- Single input definition, rendered either bare or inside the icon box above,\n     so both variants share exactly the same bindings and behaviour. -->\n<ng-template #inputTemplate>\n  <input\n    #dateInput\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"resolvedMode\"\n    [attr.placeholder]=\"uiConfig.placeholder || props.placeholder || null\"\n    [attr.aria-label]=\"resolvedAriaLabel\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.min]=\"props.min || null\"\n    [attr.max]=\"props.max || null\"\n    [attr.step]=\"props.step || null\"\n    [value]=\"value ?? ''\"\n    [ngClass]=\"inputClasses\"\n    (click)=\"handleClick(dateInput)\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n</ng-template>\n", styles: ["input::-webkit-calendar-picker-indicator{cursor:pointer}@media(pointer:coarse){input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{-webkit-appearance:none;appearance:none;min-width:0;box-sizing:border-box}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input,
                 args: [{ required: true }]
@@ -8075,6 +8157,7 @@ const DEFAULT_CALENDAR_CONFIG = (() => {
         nextLabel: 'Next',
         upcomingEventsTitle: 'Upcoming events',
         noUpcomingEvents: 'No upcoming events',
+        moreEventsLabel: 'more',
         viewLabels: { MONTH: 'Month', WEEK: 'Week', DAY: 'Day' },
         shortDayNames: names.short,
         longDayNames: names.long,
@@ -8239,17 +8322,21 @@ class CalendarMonthComponent {
     /** Emits the date of a clicked day cell. */
     dayClicked = new EventEmitter();
     monthItems = [];
-    longDayNames;
+    /** Short weekday column headers (e.g. "Mon"), kept compact for the narrow columns. */
+    weekdayLabels;
+    /** Word shown after the "+N" overflow count (e.g. "more"), from config. */
+    moreEventsLabel = DEFAULT_CALENDAR_CONFIG.moreEventsLabel;
     events = [];
     destroy$ = new Subject();
     formatter;
     constructor() {
         this.formatter = new DefaultCalendarDateFormatter();
-        this.longDayNames = DEFAULT_CALENDAR_CONFIG.longDayNames;
+        this.weekdayLabels = DEFAULT_CALENDAR_CONFIG.shortDayNames;
     }
     ngOnInit() {
         const resolved = this.config ? resolveCalendarConfig(this.config) : { ...DEFAULT_CALENDAR_CONFIG };
-        this.longDayNames = resolved.longDayNames;
+        this.weekdayLabels = resolved.shortDayNames;
+        this.moreEventsLabel = resolved.moreEventsLabel;
         this.buildMonth();
         if (this.eventsChanged) {
             this.eventsChanged.pipe(takeUntil(this.destroy$)).subscribe(events => {
@@ -8325,11 +8412,11 @@ class CalendarMonthComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarMonthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarMonthComponent, isStandalone: true, selector: "mn-calendar-month", inputs: { focusDay: "focusDay", eventsChanged: "eventsChanged", focusDayChanged: "focusDayChanged", config: "config" }, outputs: { dayClicked: "dayClicked" }, ngImport: i0, template: "<div class=\"calendar-month\" role=\"grid\" aria-label=\"Month view\">\n  <div class=\"month-header\">\n    @for (day of longDayNames; track day) {\n      <div class=\"day-header\" role=\"columnheader\">{{ day }}</div>\n    }\n  </div>\n  <div class=\"month-grid\">\n    @for (item of monthItems; track item.date.getTime()) {\n      <div\n        class=\"month-cell\"\n        [class.other-month]=\"!item.isCurrentMonth\"\n        [class.today]=\"item.isToday\"\n        (keyup.enter)=\"onDayClick(item.date)\"\n        (click)=\"onDayClick(item.date)\"\n        tabindex=\"0\"\n        role=\"gridcell\"\n        [attr.aria-label]=\"item.date.toDateString()\">\n        <span class=\"day-number\">{{ item.dayNumber }}</span>\n        <div class=\"month-events\">\n          @for (event of item.events.slice(0, 3); track $index) {\n            <div\n              class=\"month-event-dot\"\n              [style.background-color]=\"event.color.primaryColor\"\n              [title]=\"event.title\">\n            </div>\n          }\n          @if (item.events.length > 3) {\n            <span class=\"more-events\">+{{ item.events.length - 3 }}</span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".calendar-month{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.month-header{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:600;font-size:13px;padding:8px 0;border-bottom:1px solid var(--color-base-300)}.month-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);flex:1;min-height:0}.month-cell{min-height:0;padding:4px 8px;border:1px solid var(--color-base-200);cursor:pointer;transition:background .15s}.month-cell:hover{background:var(--color-base-200)}.month-cell.other-month{opacity:.4}.month-cell.today .day-number{background:var(--color-primary);color:var(--color-primary-content, white);border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.day-number{font-size:13px;font-weight:500}.month-events{display:flex;gap:2px;flex-wrap:wrap;margin-top:4px}.month-event-dot{width:8px;height:8px;border-radius:50%}.more-events{font-size:10px;color:var(--color-base-content, #6b7280);opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarMonthComponent, isStandalone: true, selector: "mn-calendar-month", inputs: { focusDay: "focusDay", eventsChanged: "eventsChanged", focusDayChanged: "focusDayChanged", config: "config" }, outputs: { dayClicked: "dayClicked" }, ngImport: i0, template: "<!-- Month grid. Cells are grouped by space rather than boxed by borders, in\n     keeping with the date-selector-bar: no rules, soft rounded cells, a hover\n     wash, and today marked by a tinted number alone (no circle). -->\n<!-- Rows are a compact fixed height rather than stretched to fill the container:\n     a month with few events shouldn't leave each cell mostly empty. The panel\n     scrolls if the grid is taller than the space it's given. -->\n<div class=\"w-full flex flex-col\" role=\"grid\" aria-label=\"Month view\">\n  <div class=\"grid grid-cols-7 pb-2\">\n    @for (day of weekdayLabels; track day) {\n      <div class=\"pl-2 text-left text-[11px] font-semibold uppercase tracking-wide opacity-45\" role=\"columnheader\">{{ day }}</div>\n    }\n  </div>\n  <div class=\"grid grid-cols-7 gap-1 auto-rows-[minmax(92px,auto)]\">\n    @for (item of monthItems; track item.date.getTime()) {\n      <div\n        class=\"flex flex-col gap-1 min-h-0 overflow-hidden rounded-xl p-1.5 cursor-pointer transition-colors hover:bg-base-200 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-primary motion-reduce:transition-none\"\n        [class.opacity-40]=\"!item.isCurrentMonth\"\n        (keyup.enter)=\"onDayClick(item.date)\"\n        (click)=\"onDayClick(item.date)\"\n        tabindex=\"0\"\n        role=\"gridcell\"\n        [attr.aria-label]=\"item.date.toDateString()\">\n        <span class=\"text-[13px] font-bold leading-none tabular-nums\" [class.text-primary]=\"item.isToday\">{{ item.dayNumber }}</span>\n        <div class=\"flex flex-col gap-0.5 min-h-0\">\n          @for (event of item.events.slice(0, 3); track $index) {\n            <div\n              class=\"flex items-center overflow-hidden rounded-md border-l-[3px] px-1.5 py-0.5 text-[11px] leading-tight\"\n              [style.background-color]=\"event.color.secondaryColor\"\n              [style.border-left-color]=\"event.color.primaryColor\"\n              [style.color]=\"event.color.primaryColor\"\n              [title]=\"event.title\">\n              <span class=\"truncate font-semibold\">{{ event.title }}</span>\n            </div>\n          }\n          <!-- Overflow indicator. Styled as a pill that lights up on hover so it\n               reads as actionable; the whole cell already navigates to the Day\n               view for this date on click / Enter, where every event is listed. -->\n          @if (item.events.length > 3) {\n            <span class=\"mt-0.5 inline-flex w-fit items-center rounded-md px-1.5 py-0.5 text-[10.5px] font-semibold opacity-60 transition-colors hover:bg-base-300 hover:opacity-100 motion-reduce:transition-none\">\n              +{{ item.events.length - 3 }} {{ moreEventsLabel }}\n            </span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarMonthComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-calendar-month', standalone: true, imports: [CommonModule], template: "<div class=\"calendar-month\" role=\"grid\" aria-label=\"Month view\">\n  <div class=\"month-header\">\n    @for (day of longDayNames; track day) {\n      <div class=\"day-header\" role=\"columnheader\">{{ day }}</div>\n    }\n  </div>\n  <div class=\"month-grid\">\n    @for (item of monthItems; track item.date.getTime()) {\n      <div\n        class=\"month-cell\"\n        [class.other-month]=\"!item.isCurrentMonth\"\n        [class.today]=\"item.isToday\"\n        (keyup.enter)=\"onDayClick(item.date)\"\n        (click)=\"onDayClick(item.date)\"\n        tabindex=\"0\"\n        role=\"gridcell\"\n        [attr.aria-label]=\"item.date.toDateString()\">\n        <span class=\"day-number\">{{ item.dayNumber }}</span>\n        <div class=\"month-events\">\n          @for (event of item.events.slice(0, 3); track $index) {\n            <div\n              class=\"month-event-dot\"\n              [style.background-color]=\"event.color.primaryColor\"\n              [title]=\"event.title\">\n            </div>\n          }\n          @if (item.events.length > 3) {\n            <span class=\"more-events\">+{{ item.events.length - 3 }}</span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".calendar-month{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.month-header{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:600;font-size:13px;padding:8px 0;border-bottom:1px solid var(--color-base-300)}.month-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);flex:1;min-height:0}.month-cell{min-height:0;padding:4px 8px;border:1px solid var(--color-base-200);cursor:pointer;transition:background .15s}.month-cell:hover{background:var(--color-base-200)}.month-cell.other-month{opacity:.4}.month-cell.today .day-number{background:var(--color-primary);color:var(--color-primary-content, white);border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.day-number{font-size:13px;font-weight:500}.month-events{display:flex;gap:2px;flex-wrap:wrap;margin-top:4px}.month-event-dot{width:8px;height:8px;border-radius:50%}.more-events{font-size:10px;color:var(--color-base-content, #6b7280);opacity:.6}\n"] }]
+            args: [{ selector: 'mn-calendar-month', standalone: true, imports: [CommonModule], template: "<!-- Month grid. Cells are grouped by space rather than boxed by borders, in\n     keeping with the date-selector-bar: no rules, soft rounded cells, a hover\n     wash, and today marked by a tinted number alone (no circle). -->\n<!-- Rows are a compact fixed height rather than stretched to fill the container:\n     a month with few events shouldn't leave each cell mostly empty. The panel\n     scrolls if the grid is taller than the space it's given. -->\n<div class=\"w-full flex flex-col\" role=\"grid\" aria-label=\"Month view\">\n  <div class=\"grid grid-cols-7 pb-2\">\n    @for (day of weekdayLabels; track day) {\n      <div class=\"pl-2 text-left text-[11px] font-semibold uppercase tracking-wide opacity-45\" role=\"columnheader\">{{ day }}</div>\n    }\n  </div>\n  <div class=\"grid grid-cols-7 gap-1 auto-rows-[minmax(92px,auto)]\">\n    @for (item of monthItems; track item.date.getTime()) {\n      <div\n        class=\"flex flex-col gap-1 min-h-0 overflow-hidden rounded-xl p-1.5 cursor-pointer transition-colors hover:bg-base-200 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-primary motion-reduce:transition-none\"\n        [class.opacity-40]=\"!item.isCurrentMonth\"\n        (keyup.enter)=\"onDayClick(item.date)\"\n        (click)=\"onDayClick(item.date)\"\n        tabindex=\"0\"\n        role=\"gridcell\"\n        [attr.aria-label]=\"item.date.toDateString()\">\n        <span class=\"text-[13px] font-bold leading-none tabular-nums\" [class.text-primary]=\"item.isToday\">{{ item.dayNumber }}</span>\n        <div class=\"flex flex-col gap-0.5 min-h-0\">\n          @for (event of item.events.slice(0, 3); track $index) {\n            <div\n              class=\"flex items-center overflow-hidden rounded-md border-l-[3px] px-1.5 py-0.5 text-[11px] leading-tight\"\n              [style.background-color]=\"event.color.secondaryColor\"\n              [style.border-left-color]=\"event.color.primaryColor\"\n              [style.color]=\"event.color.primaryColor\"\n              [title]=\"event.title\">\n              <span class=\"truncate font-semibold\">{{ event.title }}</span>\n            </div>\n          }\n          <!-- Overflow indicator. Styled as a pill that lights up on hover so it\n               reads as actionable; the whole cell already navigates to the Day\n               view for this date on click / Enter, where every event is listed. -->\n          @if (item.events.length > 3) {\n            <span class=\"mt-0.5 inline-flex w-fit items-center rounded-md px-1.5 py-0.5 text-[10.5px] font-semibold opacity-60 transition-colors hover:bg-base-300 hover:opacity-100 motion-reduce:transition-none\">\n              +{{ item.events.length - 3 }} {{ moreEventsLabel }}\n            </span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { focusDay: [{
                 type: Input
             }], eventsChanged: [{
@@ -8547,11 +8634,11 @@ class CalendarEventDefaultComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarEventDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarEventDefaultComponent, isStandalone: true, selector: "mn-calendar-event-default", ngImport: i0, template: "<div class=\"calendar-event-default\" [style.background-color]=\"event.color.secondaryColor\" [style.border-left-color]=\"event.color.primaryColor\" [style.color]=\"event.color.primaryColor\">\n  <div class=\"event-title\">{{ event.title }}</div>\n  <div class=\"event-time\">{{ formattedTime }}</div>\n  @if (event.description) {\n    <div class=\"event-description\">{{ event.description }}</div>\n  }\n</div>\n", styles: [".calendar-event-default{padding:4px 8px;border-left:3px solid var(--color-primary, #3b82f6);border-radius:4px;font-size:12px;height:100%;overflow:hidden;cursor:pointer}.event-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit}.event-time{font-size:11px;opacity:.85;color:inherit}.event-description{font-size:11px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarEventDefaultComponent, isStandalone: true, selector: "mn-calendar-event-default", ngImport: i0, template: "<!-- The shared event chip: a colored spine and a tinted fill from the event's own\n     colours, so it reads the same in week, day and month. Text inherits the\n     event's primary colour, keeping it legible on either theme. -->\n<div class=\"h-full overflow-hidden cursor-pointer rounded-lg border-l-[3px] px-2 py-1 text-xs\"\n     [style.background-color]=\"event.color.secondaryColor\"\n     [style.border-left-color]=\"event.color.primaryColor\"\n     [style.color]=\"event.color.primaryColor\">\n  <div class=\"truncate font-semibold\">{{ event.title }}</div>\n  <div class=\"truncate text-[11px] opacity-85\">{{ formattedTime }}</div>\n  @if (event.description) {\n    <div class=\"truncate text-[11px] opacity-75\">{{ event.description }}</div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarEventDefaultComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-calendar-event-default', standalone: true, imports: [CommonModule], template: "<div class=\"calendar-event-default\" [style.background-color]=\"event.color.secondaryColor\" [style.border-left-color]=\"event.color.primaryColor\" [style.color]=\"event.color.primaryColor\">\n  <div class=\"event-title\">{{ event.title }}</div>\n  <div class=\"event-time\">{{ formattedTime }}</div>\n  @if (event.description) {\n    <div class=\"event-description\">{{ event.description }}</div>\n  }\n</div>\n", styles: [".calendar-event-default{padding:4px 8px;border-left:3px solid var(--color-primary, #3b82f6);border-radius:4px;font-size:12px;height:100%;overflow:hidden;cursor:pointer}.event-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit}.event-time{font-size:11px;opacity:.85;color:inherit}.event-description{font-size:11px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit}\n"] }]
+            args: [{ selector: 'mn-calendar-event-default', standalone: true, imports: [CommonModule], template: "<!-- The shared event chip: a colored spine and a tinted fill from the event's own\n     colours, so it reads the same in week, day and month. Text inherits the\n     event's primary colour, keeping it legible on either theme. -->\n<div class=\"h-full overflow-hidden cursor-pointer rounded-lg border-l-[3px] px-2 py-1 text-xs\"\n     [style.background-color]=\"event.color.secondaryColor\"\n     [style.border-left-color]=\"event.color.primaryColor\"\n     [style.color]=\"event.color.primaryColor\">\n  <div class=\"truncate font-semibold\">{{ event.title }}</div>\n  <div class=\"truncate text-[11px] opacity-85\">{{ formattedTime }}</div>\n  @if (event.description) {\n    <div class=\"truncate text-[11px] opacity-75\">{{ event.description }}</div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -8596,11 +8683,11 @@ class CalendarEventComponent {
         this.rendered = true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: CalendarEventComponent, isStandalone: true, selector: "mn-calendar-event", inputs: { event: "event", customComponent: "customComponent" }, outputs: { eventClicked: "eventClicked" }, viewQueries: [{ propertyName: "eventContainer", first: true, predicate: ["eventContainer"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<div (click)=\"onEventClick()\" (keyup.enter)=\"onEventClick()\" class=\"calendar-event-wrapper\" tabindex=\"0\">\n  <ng-template #eventContainer></ng-template>\n</div>\n", styles: [".calendar-event-wrapper{height:100%;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: CalendarEventComponent, isStandalone: true, selector: "mn-calendar-event", inputs: { event: "event", customComponent: "customComponent" }, outputs: { eventClicked: "eventClicked" }, viewQueries: [{ propertyName: "eventContainer", first: true, predicate: ["eventContainer"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Host for the dynamically-rendered event component. Click/keyboard handling and\n     the focus ring live on the week/day event wrapper, so this stays presentational\n     to avoid a second, redundant tab stop per event. -->\n<div class=\"h-full w-full\">\n  <ng-template #eventContainer></ng-template>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarEventComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-calendar-event', standalone: true, imports: [CommonModule], template: "<div (click)=\"onEventClick()\" (keyup.enter)=\"onEventClick()\" class=\"calendar-event-wrapper\" tabindex=\"0\">\n  <ng-template #eventContainer></ng-template>\n</div>\n", styles: [".calendar-event-wrapper{height:100%;width:100%}\n"] }]
+            args: [{ selector: 'mn-calendar-event', standalone: true, imports: [CommonModule], template: "<!-- Host for the dynamically-rendered event component. Click/keyboard handling and\n     the focus ring live on the week/day event wrapper, so this stays presentational\n     to avoid a second, redundant tab stop per event. -->\n<div class=\"h-full w-full\">\n  <ng-template #eventContainer></ng-template>\n</div>\n" }]
         }], propDecorators: { event: [{
                 type: Input
             }], customComponent: [{
@@ -8639,6 +8726,8 @@ class CalendarWeekComponent {
     totalRows = 0;
     currentTimeRow = 0;
     currentTimeCol = '';
+    /** The current time, formatted for the label riding the now-line. */
+    currentTimeLabel = '';
     gridTemplateColumns = 'repeat(7, 1fr)';
     dayColumnMap = [];
     events = [];
@@ -8807,18 +8896,24 @@ class CalendarWeekComponent {
             const dayInfo = this.dayColumnMap[dayIdx];
             this.currentTimeCol = `${dayInfo.startCol} / span ${dayInfo.subColumns}`;
             this.currentTimeRow = CalendarUtility.getCorrectRow(now.getHours(), now.getMinutes(), this.resolvedConfig.startHour);
+            // formatTime is async; refresh the label and re-render when it resolves.
+            this.formatter.formatTime(now).then(label => {
+                this.currentTimeLabel = label;
+                this.cdr.markForCheck();
+            });
         }
         else {
             this.currentTimeCol = '';
             this.currentTimeRow = 0;
+            this.currentTimeLabel = '';
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarWeekComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarWeekComponent, isStandalone: true, selector: "mn-calendar-week", inputs: { focusDay: "focusDay", eventsChanged: "eventsChanged", focusDayChanged: "focusDayChanged", config: "config", calendarEventComponent: "calendarEventComponent" }, outputs: { eventClicked: "eventClicked" }, providers: [CalendarEventLayoutService], ngImport: i0, template: "<div class=\"calendar-week\" role=\"grid\" aria-label=\"Week view\">\n  <div class=\"week-header\" [style.grid-template-columns]=\"'60px ' + gridTemplateColumns\">\n    <div class=\"time-gutter-header\"></div>\n    @for (col of columns; track col.dayName; let i = $index) {\n      <div class=\"day-column-header\"\n        [class.today]=\"col.isToday\"\n        [style.grid-column]=\"getHeaderColumn(i)\"\n        role=\"columnheader\">\n        <span class=\"day-name\">{{ col.dayName }}</span>\n        <span class=\"day-number\">{{ col.dayNumber }}</span>\n      </div>\n    }\n  </div>\n  <div class=\"week-body\">\n    <div class=\"time-gutter\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"hour-label\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n          {{ row.hourLabel }}\n        </div>\n      }\n    </div>\n    <div class=\"week-grid\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\"\n      [style.grid-template-columns]=\"gridTemplateColumns\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"hour-line\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n          [style.grid-column]=\"'1 / -1'\">\n        </div>\n      }\n      @if (currentTimeRow > 0 && currentTimeCol) {\n        <div class=\"current-time-line\"\n          [style.grid-row]=\"currentTimeRow\"\n          [style.grid-column]=\"currentTimeCol\">\n          <div class=\"current-time-dot\"></div>\n          <div class=\"current-time-rule\"></div>\n        </div>\n      }\n      @for (event of displayEvents; track $index) {\n        <div class=\"week-event\"\n          [style.grid-row]=\"getEventRow(event)\"\n          [style.grid-column]=\"getEventColumn(event)\"\n             (click)=\"onEventClick(event)\"\n             (keyup.enter)=\"onEventClick(event)\"\n             tabindex=\"0\">\n          <mn-calendar-event [customComponent]=\"calendarEventComponent\" [event]=\"event\"></mn-calendar-event>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".calendar-week{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.week-header{display:grid;border-bottom:1px solid var(--color-base-300)}.time-gutter-header{min-width:60px}.day-column-header{text-align:center;padding:8px 4px;font-size:13px}.day-column-header.today{color:var(--color-primary);font-weight:700}.day-name{display:block;font-size:11px;text-transform:uppercase;color:var(--color-base-content, #6b7280);opacity:.7}.day-number{font-size:18px;font-weight:600}.week-body{display:grid;grid-template-columns:60px 1fr;flex:1;min-height:0;overflow:hidden;align-items:stretch}.time-gutter{display:grid;height:100%;min-height:0}.hour-label{font-size:11px;color:var(--color-base-content, #6b7280);opacity:.7;text-align:right;padding-right:8px;display:flex;align-items:start;min-height:0;overflow:hidden}.week-grid{display:grid;position:relative;grid-auto-rows:1fr;height:100%;min-height:0}.hour-line{border-top:1px solid var(--color-base-200);pointer-events:none;min-height:0}.week-event{z-index:1;padding:1px 2px;overflow:hidden;min-height:0}.current-time-line{position:relative;z-index:2;pointer-events:none}.current-time-dot{width:8px;height:8px;background:var(--color-error, #ef4444);border-radius:50%;position:absolute;left:-4px;top:-4px}.current-time-rule{height:2px;background:var(--color-error, #ef4444);width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CalendarEventComponent, selector: "mn-calendar-event", inputs: ["event", "customComponent"], outputs: ["eventClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarWeekComponent, isStandalone: true, selector: "mn-calendar-week", inputs: { focusDay: "focusDay", eventsChanged: "eventsChanged", focusDayChanged: "focusDayChanged", config: "config", calendarEventComponent: "calendarEventComponent" }, outputs: { eventClicked: "eventClicked" }, providers: [CalendarEventLayoutService], ngImport: i0, template: "<!-- Week grid. Hour rules are quiet hairlines; today's column header is a tinted\n     number (no fill); the current time is a line carrying a small time bubble.\n     Dynamic row/column placement stays inline \u2014 the layout maths lives in TS. -->\n<div class=\"w-full h-full flex flex-col overflow-hidden\" role=\"grid\" aria-label=\"Week view\">\n  <div class=\"grid\" [style.grid-template-columns]=\"'60px ' + gridTemplateColumns\">\n    <div></div>\n    @for (col of columns; track col.dayName; let i = $index) {\n      <div class=\"py-2 px-1 text-center\"\n        [style.grid-column]=\"getHeaderColumn(i)\"\n        role=\"columnheader\">\n        <span class=\"block text-[11px] font-semibold uppercase tracking-wide opacity-50\">{{ col.dayName }}</span>\n        <span class=\"text-lg font-bold tabular-nums\" [class.text-primary]=\"col.isToday\">{{ col.dayNumber }}</span>\n      </div>\n    }\n  </div>\n  <div class=\"grid grid-cols-[60px_1fr] flex-1 min-h-0 overflow-hidden items-stretch\">\n    <div class=\"grid h-full min-h-0\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', minmax(1.5rem, 1fr))'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"flex items-start justify-end min-h-0 overflow-hidden pr-2 text-[11px] tabular-nums opacity-50\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n          {{ row.hourLabel }}\n        </div>\n      }\n    </div>\n    <div class=\"grid relative auto-rows-fr h-full min-h-0\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', minmax(1.5rem, 1fr))'\"\n      [style.grid-template-columns]=\"gridTemplateColumns\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"border-t border-base-200 pointer-events-none min-h-0\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n          [style.grid-column]=\"'1 / -1'\">\n        </div>\n      }\n      @if (currentTimeRow > 0 && currentTimeCol) {\n        <div class=\"relative z-[2] pointer-events-none\"\n          [style.grid-row]=\"currentTimeRow\"\n          [style.grid-column]=\"currentTimeCol\">\n          <div class=\"absolute -left-1 -top-1 h-2 w-2 rounded-full bg-error\"></div>\n          <div class=\"h-0.5 w-full bg-error\"></div>\n          <div class=\"absolute left-0 top-0 -translate-x-2 -translate-y-1/2 rounded-full bg-error px-1.5 py-0.5 text-[10px] font-bold tabular-nums text-error-content shadow\">{{ currentTimeLabel }}</div>\n        </div>\n      }\n      @for (event of displayEvents; track $index) {\n        <div class=\"z-[1] min-h-0 overflow-hidden rounded-lg p-0.5 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary\"\n          [style.grid-row]=\"getEventRow(event)\"\n          [style.grid-column]=\"getEventColumn(event)\"\n             (click)=\"onEventClick(event)\"\n             (keyup.enter)=\"onEventClick(event)\"\n             tabindex=\"0\">\n          <mn-calendar-event [customComponent]=\"calendarEventComponent\" [event]=\"event\"></mn-calendar-event>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CalendarEventComponent, selector: "mn-calendar-event", inputs: ["event", "customComponent"], outputs: ["eventClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarWeekComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-calendar-week', standalone: true, imports: [CommonModule, CalendarEventComponent], providers: [CalendarEventLayoutService], template: "<div class=\"calendar-week\" role=\"grid\" aria-label=\"Week view\">\n  <div class=\"week-header\" [style.grid-template-columns]=\"'60px ' + gridTemplateColumns\">\n    <div class=\"time-gutter-header\"></div>\n    @for (col of columns; track col.dayName; let i = $index) {\n      <div class=\"day-column-header\"\n        [class.today]=\"col.isToday\"\n        [style.grid-column]=\"getHeaderColumn(i)\"\n        role=\"columnheader\">\n        <span class=\"day-name\">{{ col.dayName }}</span>\n        <span class=\"day-number\">{{ col.dayNumber }}</span>\n      </div>\n    }\n  </div>\n  <div class=\"week-body\">\n    <div class=\"time-gutter\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"hour-label\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n          {{ row.hourLabel }}\n        </div>\n      }\n    </div>\n    <div class=\"week-grid\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\"\n      [style.grid-template-columns]=\"gridTemplateColumns\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"hour-line\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n          [style.grid-column]=\"'1 / -1'\">\n        </div>\n      }\n      @if (currentTimeRow > 0 && currentTimeCol) {\n        <div class=\"current-time-line\"\n          [style.grid-row]=\"currentTimeRow\"\n          [style.grid-column]=\"currentTimeCol\">\n          <div class=\"current-time-dot\"></div>\n          <div class=\"current-time-rule\"></div>\n        </div>\n      }\n      @for (event of displayEvents; track $index) {\n        <div class=\"week-event\"\n          [style.grid-row]=\"getEventRow(event)\"\n          [style.grid-column]=\"getEventColumn(event)\"\n             (click)=\"onEventClick(event)\"\n             (keyup.enter)=\"onEventClick(event)\"\n             tabindex=\"0\">\n          <mn-calendar-event [customComponent]=\"calendarEventComponent\" [event]=\"event\"></mn-calendar-event>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".calendar-week{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.week-header{display:grid;border-bottom:1px solid var(--color-base-300)}.time-gutter-header{min-width:60px}.day-column-header{text-align:center;padding:8px 4px;font-size:13px}.day-column-header.today{color:var(--color-primary);font-weight:700}.day-name{display:block;font-size:11px;text-transform:uppercase;color:var(--color-base-content, #6b7280);opacity:.7}.day-number{font-size:18px;font-weight:600}.week-body{display:grid;grid-template-columns:60px 1fr;flex:1;min-height:0;overflow:hidden;align-items:stretch}.time-gutter{display:grid;height:100%;min-height:0}.hour-label{font-size:11px;color:var(--color-base-content, #6b7280);opacity:.7;text-align:right;padding-right:8px;display:flex;align-items:start;min-height:0;overflow:hidden}.week-grid{display:grid;position:relative;grid-auto-rows:1fr;height:100%;min-height:0}.hour-line{border-top:1px solid var(--color-base-200);pointer-events:none;min-height:0}.week-event{z-index:1;padding:1px 2px;overflow:hidden;min-height:0}.current-time-line{position:relative;z-index:2;pointer-events:none}.current-time-dot{width:8px;height:8px;background:var(--color-error, #ef4444);border-radius:50%;position:absolute;left:-4px;top:-4px}.current-time-rule{height:2px;background:var(--color-error, #ef4444);width:100%}\n"] }]
+            args: [{ selector: 'mn-calendar-week', standalone: true, imports: [CommonModule, CalendarEventComponent], providers: [CalendarEventLayoutService], template: "<!-- Week grid. Hour rules are quiet hairlines; today's column header is a tinted\n     number (no fill); the current time is a line carrying a small time bubble.\n     Dynamic row/column placement stays inline \u2014 the layout maths lives in TS. -->\n<div class=\"w-full h-full flex flex-col overflow-hidden\" role=\"grid\" aria-label=\"Week view\">\n  <div class=\"grid\" [style.grid-template-columns]=\"'60px ' + gridTemplateColumns\">\n    <div></div>\n    @for (col of columns; track col.dayName; let i = $index) {\n      <div class=\"py-2 px-1 text-center\"\n        [style.grid-column]=\"getHeaderColumn(i)\"\n        role=\"columnheader\">\n        <span class=\"block text-[11px] font-semibold uppercase tracking-wide opacity-50\">{{ col.dayName }}</span>\n        <span class=\"text-lg font-bold tabular-nums\" [class.text-primary]=\"col.isToday\">{{ col.dayNumber }}</span>\n      </div>\n    }\n  </div>\n  <div class=\"grid grid-cols-[60px_1fr] flex-1 min-h-0 overflow-hidden items-stretch\">\n    <div class=\"grid h-full min-h-0\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', minmax(1.5rem, 1fr))'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"flex items-start justify-end min-h-0 overflow-hidden pr-2 text-[11px] tabular-nums opacity-50\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n          {{ row.hourLabel }}\n        </div>\n      }\n    </div>\n    <div class=\"grid relative auto-rows-fr h-full min-h-0\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', minmax(1.5rem, 1fr))'\"\n      [style.grid-template-columns]=\"gridTemplateColumns\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"border-t border-base-200 pointer-events-none min-h-0\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n          [style.grid-column]=\"'1 / -1'\">\n        </div>\n      }\n      @if (currentTimeRow > 0 && currentTimeCol) {\n        <div class=\"relative z-[2] pointer-events-none\"\n          [style.grid-row]=\"currentTimeRow\"\n          [style.grid-column]=\"currentTimeCol\">\n          <div class=\"absolute -left-1 -top-1 h-2 w-2 rounded-full bg-error\"></div>\n          <div class=\"h-0.5 w-full bg-error\"></div>\n          <div class=\"absolute left-0 top-0 -translate-x-2 -translate-y-1/2 rounded-full bg-error px-1.5 py-0.5 text-[10px] font-bold tabular-nums text-error-content shadow\">{{ currentTimeLabel }}</div>\n        </div>\n      }\n      @for (event of displayEvents; track $index) {\n        <div class=\"z-[1] min-h-0 overflow-hidden rounded-lg p-0.5 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary\"\n          [style.grid-row]=\"getEventRow(event)\"\n          [style.grid-column]=\"getEventColumn(event)\"\n             (click)=\"onEventClick(event)\"\n             (keyup.enter)=\"onEventClick(event)\"\n             tabindex=\"0\">\n          <mn-calendar-event [customComponent]=\"calendarEventComponent\" [event]=\"event\"></mn-calendar-event>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { focusDay: [{
                 type: Input
             }], eventsChanged: [{
@@ -8859,6 +8954,8 @@ class CalendarDayComponent {
     totalRows = 0;
     totalColumns = 1;
     currentTimeRow = 0;
+    /** The current time, formatted for the label riding the now-line. */
+    currentTimeLabel = '';
     isToday = false;
     dayName = '';
     events = [];
@@ -8962,8 +9059,7 @@ class CalendarDayComponent {
         this.displayEvents = this.layoutService.calculateMultiDayEvents(filtered, this.resolvedConfig.startHour, this.resolvedConfig.endHour, rangeStart, rangeEnd);
         this.layoutService.assignColumnsToEvents(this.displayEvents);
         this.layoutService.assignWidthsToEvents(this.displayEvents, rangeStart, rangeEnd);
-        const maxCol = this.displayEvents.reduce((max, e) => Math.max(max, (e.column ?? 0) + (e.width ?? 1)), 1);
-        this.totalColumns = maxCol;
+        this.totalColumns = this.displayEvents.reduce((max, e) => Math.max(max, (e.column ?? 0) + (e.width ?? 1)), 1);
     }
     /** Updates the current-time red line position. */
     updateCurrentTime() {
@@ -8971,18 +9067,24 @@ class CalendarDayComponent {
         if (this.focusDay && this.formatter.isSameDay(this.focusDay, now)) {
             this.currentTimeRow = CalendarUtility.getCorrectRow(now.getHours(), now.getMinutes(), this.resolvedConfig.startHour);
             this.isToday = true;
+            // formatTime is async; refresh the label and re-render when it resolves.
+            this.formatter.formatTime(now).then(label => {
+                this.currentTimeLabel = label;
+                this.cdr.markForCheck();
+            });
         }
         else {
             this.currentTimeRow = 0;
             this.isToday = false;
+            this.currentTimeLabel = '';
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarDayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarDayComponent, isStandalone: true, selector: "mn-calendar-day", inputs: { focusDay: "focusDay", eventsChanged: "eventsChanged", focusDayChanged: "focusDayChanged", config: "config", calendarEventComponent: "calendarEventComponent" }, outputs: { eventClicked: "eventClicked" }, providers: [CalendarEventLayoutService], ngImport: i0, template: "<div class=\"calendar-day\" role=\"grid\" aria-label=\"Day view\">\n  <div class=\"day-header\">\n    <div class=\"time-gutter-header\"></div>\n    <div class=\"day-column-header\" [class.today]=\"isToday\" role=\"columnheader\">\n      <span class=\"day-name\">{{ dayName }}</span>\n      <span class=\"day-number\">{{ focusDay.getDate() }}</span>\n    </div>\n  </div>\n  <div class=\"day-body\">\n    <div class=\"time-gutter\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"hour-label\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n          {{ row.hourLabel }}\n        </div>\n      }\n    </div>\n    <div class=\"day-grid\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\"\n      [style.grid-template-columns]=\"'repeat(' + totalColumns + ', 1fr)'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"hour-line\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n          [style.grid-column]=\"'1 / -1'\">\n        </div>\n      }\n      @if (currentTimeRow > 0 && isToday) {\n        <div class=\"current-time-line\"\n          [style.grid-row]=\"currentTimeRow\"\n          [style.grid-column]=\"'1 / -1'\">\n          <div class=\"current-time-dot\"></div>\n          <div class=\"current-time-rule\"></div>\n        </div>\n      }\n      @for (event of displayEvents; track $index) {\n        <div class=\"day-event\"\n          [style.grid-row]=\"getEventRow(event)\"\n          [style.grid-column]=\"getEventColumn(event)\"\n             (click)=\"onEventClick(event)\"\n             (keyup.enter)=\"onEventClick(event)\"\n             tabindex=\"0\">\n          <mn-calendar-event [customComponent]=\"calendarEventComponent\" [event]=\"event\"></mn-calendar-event>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".calendar-day{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.day-header{display:grid;grid-template-columns:60px 1fr;border-bottom:1px solid var(--color-base-300)}.time-gutter-header{min-width:60px}.day-column-header{text-align:center;padding:8px 4px;font-size:13px}.day-column-header.today{color:var(--color-primary);font-weight:700}.day-name{display:block;font-size:11px;text-transform:uppercase;color:var(--color-base-content, #6b7280);opacity:.7}.day-number{font-size:18px;font-weight:600}.day-body{display:grid;grid-template-columns:60px 1fr;flex:1;min-height:0;overflow:hidden;align-items:stretch}.time-gutter{display:grid;height:100%;min-height:0}.hour-label{font-size:11px;color:var(--color-base-content, #6b7280);opacity:.7;text-align:right;padding-right:8px;display:flex;align-items:start;min-height:0;overflow:hidden}.day-grid{display:grid;position:relative;grid-auto-rows:1fr;height:100%;min-height:0}.hour-line{border-top:1px solid var(--color-base-200);pointer-events:none;min-height:0}.day-event{z-index:1;padding:1px 2px;overflow:hidden;min-height:0}.current-time-line{position:relative;z-index:2;pointer-events:none}.current-time-dot{width:8px;height:8px;background:var(--color-error, #ef4444);border-radius:50%;position:absolute;left:-4px;top:-4px}.current-time-rule{height:2px;background:var(--color-error, #ef4444);width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CalendarEventComponent, selector: "mn-calendar-event", inputs: ["event", "customComponent"], outputs: ["eventClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarDayComponent, isStandalone: true, selector: "mn-calendar-day", inputs: { focusDay: "focusDay", eventsChanged: "eventsChanged", focusDayChanged: "focusDayChanged", config: "config", calendarEventComponent: "calendarEventComponent" }, outputs: { eventClicked: "eventClicked" }, providers: [CalendarEventLayoutService], ngImport: i0, template: "<!-- Day grid. One column, its header centered over that column (the toolbar\n     already names the date). Today's number is tinted, not filled; the now-line\n     carries a time bubble that overhangs into the gutter. -->\n<div class=\"w-full h-full flex flex-col overflow-hidden\" role=\"grid\" aria-label=\"Day view\">\n  <div class=\"grid grid-cols-[60px_1fr]\">\n    <div></div>\n    <div class=\"flex items-center justify-center gap-2 py-2 px-1\" role=\"columnheader\">\n      <span class=\"text-[11px] font-semibold uppercase tracking-wide opacity-50\">{{ dayName }}</span>\n      <span class=\"text-base font-bold tabular-nums\" [class.text-primary]=\"isToday\">{{ focusDay.getDate() }}</span>\n    </div>\n  </div>\n  <div class=\"grid grid-cols-[60px_1fr] flex-1 min-h-0 overflow-hidden items-stretch\">\n    <div class=\"grid h-full min-h-0\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', minmax(1.5rem, 1fr))'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"flex items-start justify-end min-h-0 overflow-hidden pr-2 text-[11px] tabular-nums opacity-50\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n          {{ row.hourLabel }}\n        </div>\n      }\n    </div>\n    <div class=\"grid relative auto-rows-fr h-full min-h-0\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', minmax(1.5rem, 1fr))'\"\n      [style.grid-template-columns]=\"'repeat(' + totalColumns + ', 1fr)'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"border-t border-base-200 pointer-events-none min-h-0\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n          [style.grid-column]=\"'1 / -1'\">\n        </div>\n      }\n      @if (currentTimeRow > 0 && isToday) {\n        <div class=\"relative z-[2] pointer-events-none\"\n          [style.grid-row]=\"currentTimeRow\"\n          [style.grid-column]=\"'1 / -1'\">\n          <div class=\"absolute -left-1 -top-1 h-2 w-2 rounded-full bg-error\"></div>\n          <div class=\"h-0.5 w-full bg-error\"></div>\n          <div class=\"absolute left-0 top-0 -translate-x-2 -translate-y-1/2 rounded-full bg-error px-1.5 py-0.5 text-[10px] font-bold tabular-nums text-error-content shadow\">{{ currentTimeLabel }}</div>\n        </div>\n      }\n      @for (event of displayEvents; track $index) {\n        <div class=\"z-[1] min-h-0 overflow-hidden rounded-lg p-0.5 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary\"\n          [style.grid-row]=\"getEventRow(event)\"\n          [style.grid-column]=\"getEventColumn(event)\"\n             (click)=\"onEventClick(event)\"\n             (keyup.enter)=\"onEventClick(event)\"\n             tabindex=\"0\">\n          <mn-calendar-event [customComponent]=\"calendarEventComponent\" [event]=\"event\"></mn-calendar-event>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CalendarEventComponent, selector: "mn-calendar-event", inputs: ["event", "customComponent"], outputs: ["eventClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarDayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-calendar-day', standalone: true, imports: [CommonModule, CalendarEventComponent], providers: [CalendarEventLayoutService], template: "<div class=\"calendar-day\" role=\"grid\" aria-label=\"Day view\">\n  <div class=\"day-header\">\n    <div class=\"time-gutter-header\"></div>\n    <div class=\"day-column-header\" [class.today]=\"isToday\" role=\"columnheader\">\n      <span class=\"day-name\">{{ dayName }}</span>\n      <span class=\"day-number\">{{ focusDay.getDate() }}</span>\n    </div>\n  </div>\n  <div class=\"day-body\">\n    <div class=\"time-gutter\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"hour-label\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n          {{ row.hourLabel }}\n        </div>\n      }\n    </div>\n    <div class=\"day-grid\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\"\n      [style.grid-template-columns]=\"'repeat(' + totalColumns + ', 1fr)'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"hour-line\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n          [style.grid-column]=\"'1 / -1'\">\n        </div>\n      }\n      @if (currentTimeRow > 0 && isToday) {\n        <div class=\"current-time-line\"\n          [style.grid-row]=\"currentTimeRow\"\n          [style.grid-column]=\"'1 / -1'\">\n          <div class=\"current-time-dot\"></div>\n          <div class=\"current-time-rule\"></div>\n        </div>\n      }\n      @for (event of displayEvents; track $index) {\n        <div class=\"day-event\"\n          [style.grid-row]=\"getEventRow(event)\"\n          [style.grid-column]=\"getEventColumn(event)\"\n             (click)=\"onEventClick(event)\"\n             (keyup.enter)=\"onEventClick(event)\"\n             tabindex=\"0\">\n          <mn-calendar-event [customComponent]=\"calendarEventComponent\" [event]=\"event\"></mn-calendar-event>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".calendar-day{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.day-header{display:grid;grid-template-columns:60px 1fr;border-bottom:1px solid var(--color-base-300)}.time-gutter-header{min-width:60px}.day-column-header{text-align:center;padding:8px 4px;font-size:13px}.day-column-header.today{color:var(--color-primary);font-weight:700}.day-name{display:block;font-size:11px;text-transform:uppercase;color:var(--color-base-content, #6b7280);opacity:.7}.day-number{font-size:18px;font-weight:600}.day-body{display:grid;grid-template-columns:60px 1fr;flex:1;min-height:0;overflow:hidden;align-items:stretch}.time-gutter{display:grid;height:100%;min-height:0}.hour-label{font-size:11px;color:var(--color-base-content, #6b7280);opacity:.7;text-align:right;padding-right:8px;display:flex;align-items:start;min-height:0;overflow:hidden}.day-grid{display:grid;position:relative;grid-auto-rows:1fr;height:100%;min-height:0}.hour-line{border-top:1px solid var(--color-base-200);pointer-events:none;min-height:0}.day-event{z-index:1;padding:1px 2px;overflow:hidden;min-height:0}.current-time-line{position:relative;z-index:2;pointer-events:none}.current-time-dot{width:8px;height:8px;background:var(--color-error, #ef4444);border-radius:50%;position:absolute;left:-4px;top:-4px}.current-time-rule{height:2px;background:var(--color-error, #ef4444);width:100%}\n"] }]
+            args: [{ selector: 'mn-calendar-day', standalone: true, imports: [CommonModule, CalendarEventComponent], providers: [CalendarEventLayoutService], template: "<!-- Day grid. One column, its header centered over that column (the toolbar\n     already names the date). Today's number is tinted, not filled; the now-line\n     carries a time bubble that overhangs into the gutter. -->\n<div class=\"w-full h-full flex flex-col overflow-hidden\" role=\"grid\" aria-label=\"Day view\">\n  <div class=\"grid grid-cols-[60px_1fr]\">\n    <div></div>\n    <div class=\"flex items-center justify-center gap-2 py-2 px-1\" role=\"columnheader\">\n      <span class=\"text-[11px] font-semibold uppercase tracking-wide opacity-50\">{{ dayName }}</span>\n      <span class=\"text-base font-bold tabular-nums\" [class.text-primary]=\"isToday\">{{ focusDay.getDate() }}</span>\n    </div>\n  </div>\n  <div class=\"grid grid-cols-[60px_1fr] flex-1 min-h-0 overflow-hidden items-stretch\">\n    <div class=\"grid h-full min-h-0\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', minmax(1.5rem, 1fr))'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"flex items-start justify-end min-h-0 overflow-hidden pr-2 text-[11px] tabular-nums opacity-50\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n          {{ row.hourLabel }}\n        </div>\n      }\n    </div>\n    <div class=\"grid relative auto-rows-fr h-full min-h-0\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', minmax(1.5rem, 1fr))'\"\n      [style.grid-template-columns]=\"'repeat(' + totalColumns + ', 1fr)'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"border-t border-base-200 pointer-events-none min-h-0\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n          [style.grid-column]=\"'1 / -1'\">\n        </div>\n      }\n      @if (currentTimeRow > 0 && isToday) {\n        <div class=\"relative z-[2] pointer-events-none\"\n          [style.grid-row]=\"currentTimeRow\"\n          [style.grid-column]=\"'1 / -1'\">\n          <div class=\"absolute -left-1 -top-1 h-2 w-2 rounded-full bg-error\"></div>\n          <div class=\"h-0.5 w-full bg-error\"></div>\n          <div class=\"absolute left-0 top-0 -translate-x-2 -translate-y-1/2 rounded-full bg-error px-1.5 py-0.5 text-[10px] font-bold tabular-nums text-error-content shadow\">{{ currentTimeLabel }}</div>\n        </div>\n      }\n      @for (event of displayEvents; track $index) {\n        <div class=\"z-[1] min-h-0 overflow-hidden rounded-lg p-0.5 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary\"\n          [style.grid-row]=\"getEventRow(event)\"\n          [style.grid-column]=\"getEventColumn(event)\"\n             (click)=\"onEventClick(event)\"\n             (keyup.enter)=\"onEventClick(event)\"\n             tabindex=\"0\">\n          <mn-calendar-event [customComponent]=\"calendarEventComponent\" [event]=\"event\"></mn-calendar-event>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { focusDay: [{
                 type: Input
             }], eventsChanged: [{
@@ -9020,11 +9122,11 @@ class UpcomingEventRowComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UpcomingEventRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: UpcomingEventRowComponent, isStandalone: true, selector: "mn-upcoming-event-row", inputs: { event: "event" }, outputs: { eventClicked: "eventClicked" }, ngImport: i0, template: "<div (click)=\"eventClicked.emit(event)\" (keyup.enter)=\"eventClicked.emit(event)\" [style.border-left-color]=\"event.color.primaryColor\" class=\"upcoming-event-row\"\n     tabindex=\"0\">\n  <div class=\"event-title\">{{ event.title }}</div>\n  <div class=\"event-time\">{{ formattedDate }}</div>\n  @if (event.description) {\n    <div class=\"event-description\">{{ event.description }}</div>\n  }\n</div>\n", styles: [".upcoming-event-row{padding:8px 12px;border-left:3px solid var(--color-primary, #3b82f6);margin-bottom:8px;cursor:pointer;border-radius:4px;transition:background .15s}.upcoming-event-row:hover{background:var(--color-base-200)}.event-title{font-weight:600;font-size:13px}.event-time{font-size:12px;color:var(--color-base-content, #6b7280);opacity:.7}.event-description{font-size:12px;color:var(--color-base-content, #9ca3af);opacity:.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: UpcomingEventRowComponent, isStandalone: true, selector: "mn-upcoming-event-row", inputs: { event: "event" }, outputs: { eventClicked: "eventClicked" }, ngImport: i0, template: "<!-- Sidebar row in the shared chip language: a colored rail from the event's own\n     colour, a hover wash, and space-grouped content \u2014 no boxed borders. -->\n<div (click)=\"eventClicked.emit(event)\"\n     (keyup.enter)=\"eventClicked.emit(event)\"\n     class=\"grid grid-cols-[3px_1fr] items-stretch gap-2.5 mb-1.5 cursor-pointer rounded-lg p-2 transition-colors hover:bg-base-200 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-primary motion-reduce:transition-none\"\n     tabindex=\"0\">\n  <div class=\"rounded-full\" [style.background-color]=\"event.color.primaryColor\"></div>\n  <div class=\"min-w-0\">\n    <div class=\"truncate text-[13px] font-semibold\">{{ event.title }}</div>\n    <div class=\"text-xs tabular-nums opacity-60\">{{ formattedDate }}</div>\n    @if (event.description) {\n      <div class=\"truncate text-xs opacity-50\">{{ event.description }}</div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UpcomingEventRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-upcoming-event-row', standalone: true, imports: [CommonModule], template: "<div (click)=\"eventClicked.emit(event)\" (keyup.enter)=\"eventClicked.emit(event)\" [style.border-left-color]=\"event.color.primaryColor\" class=\"upcoming-event-row\"\n     tabindex=\"0\">\n  <div class=\"event-title\">{{ event.title }}</div>\n  <div class=\"event-time\">{{ formattedDate }}</div>\n  @if (event.description) {\n    <div class=\"event-description\">{{ event.description }}</div>\n  }\n</div>\n", styles: [".upcoming-event-row{padding:8px 12px;border-left:3px solid var(--color-primary, #3b82f6);margin-bottom:8px;cursor:pointer;border-radius:4px;transition:background .15s}.upcoming-event-row:hover{background:var(--color-base-200)}.event-title{font-weight:600;font-size:13px}.event-time{font-size:12px;color:var(--color-base-content, #6b7280);opacity:.7}.event-description{font-size:12px;color:var(--color-base-content, #9ca3af);opacity:.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+            args: [{ selector: 'mn-upcoming-event-row', standalone: true, imports: [CommonModule], template: "<!-- Sidebar row in the shared chip language: a colored rail from the event's own\n     colour, a hover wash, and space-grouped content \u2014 no boxed borders. -->\n<div (click)=\"eventClicked.emit(event)\"\n     (keyup.enter)=\"eventClicked.emit(event)\"\n     class=\"grid grid-cols-[3px_1fr] items-stretch gap-2.5 mb-1.5 cursor-pointer rounded-lg p-2 transition-colors hover:bg-base-200 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-primary motion-reduce:transition-none\"\n     tabindex=\"0\">\n  <div class=\"rounded-full\" [style.background-color]=\"event.color.primaryColor\"></div>\n  <div class=\"min-w-0\">\n    <div class=\"truncate text-[13px] font-semibold\">{{ event.title }}</div>\n    <div class=\"text-xs tabular-nums opacity-60\">{{ formattedDate }}</div>\n    @if (event.description) {\n      <div class=\"truncate text-xs opacity-50\">{{ event.description }}</div>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { event: [{
                 type: Input
             }], eventClicked: [{
@@ -9081,11 +9183,11 @@ class UpcomingEventsComponent {
         return event.id;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UpcomingEventsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: UpcomingEventsComponent, isStandalone: true, selector: "mn-upcoming-events", inputs: { eventsChanged: "eventsChanged", config: "config" }, outputs: { eventClicked: "eventClicked" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"upcoming-events\" role=\"complementary\" aria-label=\"Upcoming events\">\n  <div class=\"upcoming-title\">{{ title }}</div>\n  @for (event of upcomingEvents; track $index) {\n    <mn-upcoming-event-row\n      [event]=\"event\"\n      (eventClicked)=\"eventClicked.emit($event)\">\n    </mn-upcoming-event-row>\n  }\n  @if (upcomingEvents.length === 0) {\n    <div class=\"no-events\">{{ noEventsMessage }}</div>\n  }\n</div>\n", styles: [".upcoming-events{padding:16px}.upcoming-title{font-size:16px;font-weight:600;margin-bottom:12px}.no-events{color:var(--color-base-content, #9ca3af);opacity:.5;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UpcomingEventRowComponent, selector: "mn-upcoming-event-row", inputs: ["event"], outputs: ["eventClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: UpcomingEventsComponent, isStandalone: true, selector: "mn-upcoming-events", inputs: { eventsChanged: "eventsChanged", config: "config" }, outputs: { eventClicked: "eventClicked" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"p-4\" role=\"complementary\" aria-label=\"Upcoming events\">\n  <div class=\"mb-3 flex items-center gap-2\">\n    <h3 class=\"text-sm font-bold tracking-wide\">{{ title }}</h3>\n    @if (upcomingEvents.length) {\n      <span class=\"text-xs font-semibold tabular-nums opacity-45\">{{ upcomingEvents.length }}</span>\n    }\n  </div>\n  @for (event of upcomingEvents; track $index) {\n    <mn-upcoming-event-row\n      [event]=\"event\"\n      (eventClicked)=\"eventClicked.emit($event)\">\n    </mn-upcoming-event-row>\n  }\n  @if (upcomingEvents.length === 0) {\n    <div class=\"text-sm opacity-50\">{{ noEventsMessage }}</div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UpcomingEventRowComponent, selector: "mn-upcoming-event-row", inputs: ["event"], outputs: ["eventClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UpcomingEventsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-upcoming-events', standalone: true, imports: [CommonModule, UpcomingEventRowComponent], template: "<div class=\"upcoming-events\" role=\"complementary\" aria-label=\"Upcoming events\">\n  <div class=\"upcoming-title\">{{ title }}</div>\n  @for (event of upcomingEvents; track $index) {\n    <mn-upcoming-event-row\n      [event]=\"event\"\n      (eventClicked)=\"eventClicked.emit($event)\">\n    </mn-upcoming-event-row>\n  }\n  @if (upcomingEvents.length === 0) {\n    <div class=\"no-events\">{{ noEventsMessage }}</div>\n  }\n</div>\n", styles: [".upcoming-events{padding:16px}.upcoming-title{font-size:16px;font-weight:600;margin-bottom:12px}.no-events{color:var(--color-base-content, #9ca3af);opacity:.5;font-size:14px}\n"] }]
+            args: [{ selector: 'mn-upcoming-events', standalone: true, imports: [CommonModule, UpcomingEventRowComponent], template: "<div class=\"p-4\" role=\"complementary\" aria-label=\"Upcoming events\">\n  <div class=\"mb-3 flex items-center gap-2\">\n    <h3 class=\"text-sm font-bold tracking-wide\">{{ title }}</h3>\n    @if (upcomingEvents.length) {\n      <span class=\"text-xs font-semibold tabular-nums opacity-45\">{{ upcomingEvents.length }}</span>\n    }\n  </div>\n  @for (event of upcomingEvents; track $index) {\n    <mn-upcoming-event-row\n      [event]=\"event\"\n      (eventClicked)=\"eventClicked.emit($event)\">\n    </mn-upcoming-event-row>\n  }\n  @if (upcomingEvents.length === 0) {\n    <div class=\"text-sm opacity-50\">{{ noEventsMessage }}</div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { eventsChanged: [{
                 type: Input
             }], config: [{
@@ -9296,8 +9398,12 @@ class CalendarViewComponent {
     checkMobileView() {
         const wasMobile = this.isMobileView;
         const width = window.innerWidth;
-        this.isMobileView = width < 475;
-        this.isTabletView = width >= 475 && width < 1024;
+        // Honour the configured mobile breakpoint (default 768) rather than a hard-coded
+        // width: a seven-column week is cramped well before a phone's width, so the day
+        // view takes over earlier — and consumers can tune where via `mobileBreakpoint`.
+        const breakpoint = this.config.mobileBreakpoint;
+        this.isMobileView = width < breakpoint;
+        this.isTabletView = width >= breakpoint && width < 1024;
         if (this.isMobileView && !wasMobile) {
             this.currentView = CalendarView.DAY;
         }
@@ -9330,7 +9436,7 @@ class CalendarViewComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarViewComponent, isStandalone: true, selector: "mn-calendar-view", inputs: { showButton: "showButton", buttonTitle: "buttonTitle", buttons: "buttons", CalendarEventComponent: "CalendarEventComponent", NewCalendarItemsEvent: "NewCalendarItemsEvent" }, outputs: { RequestNewCalendarItemsEvent: "RequestNewCalendarItemsEvent", CalendarItemClickedEvent: "CalendarItemClickedEvent", ButtonClickedEvent: "ButtonClickedEvent" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [
             provideMnCalendarConfig(DEFAULT_CALENDAR_CONFIG),
-        ], ngImport: i0, template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n  <!-- The toolbar sits on the same columns as the body below it, so it spans the\n       calendar grid rather than the grid plus the sidebar. Without this the date\n       centres on the whole component and reads as off-centre against the days it\n       belongs to. -->\n  <div class=\"grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3\">\n\n    <!-- Navigation on the left, the controls that change what's shown on the\n         right. Left-aligned rather than centred: centring the date depends on the\n         two sides staying evenly weighted, and a consumer adding action buttons\n         tips that balance without warning. -->\n    <div class=\"flex flex-wrap items-center gap-x-3 gap-y-2 py-3\">\n\n      <button (click)=\"goToToday()\"\n              [data]=\"{ variant: 'outline', size: 'md', color: 'primary' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        {{ config.todayLabel }}\n      </button>\n\n    <!-- Stepping through time. The arrows sit either side of the date they move,\n         so the control and the thing it controls read as one unit. One pair\n         serves every view because they step by whatever is on screen: a day, a\n         week, or a month. -->\n    <!-- `grow`, not `flex-1`: a 0% basis would make this group report no width,\n         so the row would look like it fits, refuse to wrap, and then overflow\n         once the label's minimum width kicked back in. An auto basis measures the\n         group honestly, so the controls wrap to a second row when they must. -->\n    <div class=\"flex grow items-center gap-1\">\n      <button (click)=\"navigate(-1)\"\n              [attr.aria-label]=\"config.previousLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronLeft></svg>\n      </button>\n\n      <!-- Where you are. `aria-live` announces the new period after each step, so\n           navigating by keyboard says where it landed instead of going silent.\n           The set width keeps the forward arrow still as the date changes length,\n           and holds a readable minimum rather than truncating: squeezed, the\n           toolbar wraps its controls to a second row instead of eating the one\n           label that says what you are looking at. -->\n      <h2 aria-live=\"polite\" class=\"min-w-56 text-center text-base font-semibold\">\n        {{ periodLabel }}\n      </h2>\n\n      <button (click)=\"navigate(1)\"\n              [attr.aria-label]=\"config.nextLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronRight></svg>\n      </button>\n    </div>\n\n    <!-- Changing what's shown, and acting on it. -->\n    <div class=\"flex items-center gap-2 shrink-0\">\n      <!-- Jumping somewhere far off, which the arrows would take all day to reach. -->\n      <mn-lib-datetime (ngModelChange)=\"onPickDate($event)\"\n                       [ngModel]=\"focusDayString\"\n                       [props]=\"{ id: panelId + '-date', mode: 'date', placeholder: config.pickDateLabel, size: 'md', borderRadius: 'lg', hover: true }\"\n                       class=\"block\"></mn-lib-datetime>\n\n      <!-- View switcher (month / week / day) \u2014 hidden on mobile, which is forced to day view. -->\n      @if (!isMobileView) {\n        <div aria-label=\"Calendar view\" class=\"flex border border-base-300 rounded-md overflow-hidden\" role=\"tablist\">\n          @for (view of viewOptions; track view.value) {\n            <button\n              (click)=\"switchView(view.value)\"\n              [attr.aria-controls]=\"panelId\"\n              [attr.aria-selected]=\"currentView === view.value\"\n              [data]=\"{ size: 'md', variant: currentView === view.value ? 'fill' : 'text', color: 'primary' }\"\n              mnButton\n              role=\"tab\"\n              type=\"button\">\n              {{ view.label }}\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Action buttons (custom buttons + optional showButton CTA). -->\n      @if (buttons.length || showButton) {\n        <div class=\"flex items-center gap-2\">\n          @for (btn of buttons; track btn.label) {\n            <button (click)=\"btn.onClick()\" [data]=\"btn.buttonData || {}\" mnButton type=\"button\">\n              {{ btn.label }}\n            </button>\n          }\n          @if (showButton) {\n            <button (click)=\"ButtonClickedEvent.emit()\" [data]=\"{}\" mnButton type=\"button\">\n              {{ buttonTitle }}\n            </button>\n          }\n        </div>\n      }\n      </div>\n    </div>\n  </div>\n\n  <div class=\"grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3 flex-1 min-h-0\">\n    <div [id]=\"panelId\" class=\"min-w-0 min-h-0 overflow-hidden overflow-y-auto\" role=\"tabpanel\">\n      @if (currentView === CalendarView.MONTH) {\n        <mn-calendar-month\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          (dayClicked)=\"onMonthDayClick($event)\">\n        </mn-calendar-month>\n      }\n      @if (currentView === CalendarView.WEEK) {\n        <mn-calendar-week\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-week>\n      }\n      @if (currentView === CalendarView.DAY) {\n        <mn-calendar-day\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-day>\n      }\n    </div>\n    <div class=\"hidden lg:block border-l border-base-300 overflow-auto\">\n      <mn-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </mn-upcoming-events>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CalendarMonthComponent, selector: "mn-calendar-month", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config"], outputs: ["dayClicked"] }, { kind: "component", type: CalendarWeekComponent, selector: "mn-calendar-week", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: CalendarDayComponent, selector: "mn-calendar-day", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: UpcomingEventsComponent, selector: "mn-upcoming-events", inputs: ["eventsChanged", "config"], outputs: ["eventClicked"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnDatetime, selector: "mn-lib-datetime", inputs: ["props"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }] });
+        ], ngImport: i0, template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n  <!-- Toolbar spans the full width so the primary action can sit above the\n       upcoming-events sidebar, using that otherwise-empty space. On mobile it\n       reflows: Today and the controls share the top row, and the \u2039 date \u203A nav\n       drops to its own full-width row below. Responsive `order` does the reflow. -->\n  <div class=\"flex flex-wrap items-center gap-x-3 gap-y-2 py-3\">\n\n    <button (click)=\"goToToday()\"\n            [data]=\"{ variant: 'outline', size: 'md', color: 'primary' }\"\n            class=\"order-1 shrink-0\"\n            mnButton\n            type=\"button\">\n      {{ config.todayLabel }}\n    </button>\n\n    <!-- Jumping somewhere far off, which the arrows would take all day to reach.\n         On mobile the picker collapses to its icon-only variant. Its `ml-auto`\n         pulls the picker \u2014 and the switcher and action button that follow it \u2014 to\n         the right of the row on every width, leaving Today (and the nav) on the\n         left, so the controls align right consistently across devices. -->\n    <mn-lib-datetime (ngModelChange)=\"onPickDate($event)\"\n                     [ngModel]=\"focusDayString\"\n                     [props]=\"{ id: panelId + '-date', mode: 'date', placeholder: config.pickDateLabel, size: 'md', borderRadius: 'lg', hover: true, iconOnly: isMobileView }\"\n                     class=\"order-2 ml-auto block lg:order-3\"></mn-lib-datetime>\n\n    <!-- View switcher (month / week / day) \u2014 hidden on mobile, which is forced to day view. -->\n    @if (!isMobileView) {\n      <div aria-label=\"Calendar view\" class=\"order-3 flex border border-base-300 rounded-md overflow-hidden lg:order-4\" role=\"tablist\">\n        @for (view of viewOptions; track view.value) {\n          <button\n            (click)=\"switchView(view.value)\"\n            [attr.aria-controls]=\"panelId\"\n            [attr.aria-selected]=\"currentView === view.value\"\n            [data]=\"{ size: 'md', variant: currentView === view.value ? 'fill' : 'text', color: 'primary' }\"\n            mnButton\n            role=\"tab\"\n            type=\"button\">\n            {{ view.label }}\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Action buttons (custom buttons + optional showButton CTA). They follow the\n         picker, so the picker's `ml-auto` carries them to the right of the row on\n         every width \u2014 on desktop that lands them above the upcoming-events sidebar. -->\n    @if (buttons.length || showButton) {\n      <div class=\"order-4 flex items-center gap-2 lg:order-5\">\n        @for (btn of buttons; track btn.label) {\n          <button (click)=\"btn.onClick()\" [data]=\"btn.buttonData || {}\" mnButton type=\"button\">\n            {{ btn.label }}\n          </button>\n        }\n        @if (showButton) {\n          <button (click)=\"ButtonClickedEvent.emit()\" [data]=\"{}\" mnButton type=\"button\">\n            {{ buttonTitle }}\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Stepping through time. The arrows sit either side of the date they move,\n         so the control and the thing it controls read as one unit. On mobile this\n         nav takes its own full-width row (basis-full, ordered last) with the date\n         centred between the arrows at the row's edges; on desktop it sits inline\n         after Today. `aria-live` announces the new period after each step. -->\n    <div class=\"order-5 flex basis-full items-center justify-between gap-1 lg:order-2 lg:basis-auto lg:justify-start\">\n      <button (click)=\"navigate(-1)\"\n              [attr.aria-label]=\"config.previousLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronLeft></svg>\n      </button>\n\n      <h2 aria-live=\"polite\" class=\"text-center text-base font-semibold whitespace-nowrap px-1 lg:min-w-56\">\n        {{ periodLabel }}\n      </h2>\n\n      <button (click)=\"navigate(1)\"\n              [attr.aria-label]=\"config.nextLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronRight></svg>\n      </button>\n    </div>\n\n  </div>\n\n  <div class=\"grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3 flex-1 min-h-0\">\n    <div [id]=\"panelId\" class=\"min-w-0 min-h-0 overflow-hidden overflow-y-auto\" role=\"tabpanel\">\n      @if (currentView === CalendarView.MONTH) {\n        <mn-calendar-month\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          (dayClicked)=\"onMonthDayClick($event)\">\n        </mn-calendar-month>\n      }\n      @if (currentView === CalendarView.WEEK) {\n        <mn-calendar-week\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-week>\n      }\n      @if (currentView === CalendarView.DAY) {\n        <mn-calendar-day\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-day>\n      }\n    </div>\n    <div class=\"hidden lg:block border-l border-base-300 overflow-auto\">\n      <mn-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </mn-upcoming-events>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CalendarMonthComponent, selector: "mn-calendar-month", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config"], outputs: ["dayClicked"] }, { kind: "component", type: CalendarWeekComponent, selector: "mn-calendar-week", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: CalendarDayComponent, selector: "mn-calendar-day", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: UpcomingEventsComponent, selector: "mn-upcoming-events", inputs: ["eventsChanged", "config"], outputs: ["eventClicked"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnDatetime, selector: "mn-lib-datetime", inputs: ["props"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarViewComponent, decorators: [{
             type: Component,
@@ -9347,7 +9453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         LucideChevronRight
                     ], providers: [
                         provideMnCalendarConfig(DEFAULT_CALENDAR_CONFIG),
-                    ], template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n  <!-- The toolbar sits on the same columns as the body below it, so it spans the\n       calendar grid rather than the grid plus the sidebar. Without this the date\n       centres on the whole component and reads as off-centre against the days it\n       belongs to. -->\n  <div class=\"grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3\">\n\n    <!-- Navigation on the left, the controls that change what's shown on the\n         right. Left-aligned rather than centred: centring the date depends on the\n         two sides staying evenly weighted, and a consumer adding action buttons\n         tips that balance without warning. -->\n    <div class=\"flex flex-wrap items-center gap-x-3 gap-y-2 py-3\">\n\n      <button (click)=\"goToToday()\"\n              [data]=\"{ variant: 'outline', size: 'md', color: 'primary' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        {{ config.todayLabel }}\n      </button>\n\n    <!-- Stepping through time. The arrows sit either side of the date they move,\n         so the control and the thing it controls read as one unit. One pair\n         serves every view because they step by whatever is on screen: a day, a\n         week, or a month. -->\n    <!-- `grow`, not `flex-1`: a 0% basis would make this group report no width,\n         so the row would look like it fits, refuse to wrap, and then overflow\n         once the label's minimum width kicked back in. An auto basis measures the\n         group honestly, so the controls wrap to a second row when they must. -->\n    <div class=\"flex grow items-center gap-1\">\n      <button (click)=\"navigate(-1)\"\n              [attr.aria-label]=\"config.previousLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronLeft></svg>\n      </button>\n\n      <!-- Where you are. `aria-live` announces the new period after each step, so\n           navigating by keyboard says where it landed instead of going silent.\n           The set width keeps the forward arrow still as the date changes length,\n           and holds a readable minimum rather than truncating: squeezed, the\n           toolbar wraps its controls to a second row instead of eating the one\n           label that says what you are looking at. -->\n      <h2 aria-live=\"polite\" class=\"min-w-56 text-center text-base font-semibold\">\n        {{ periodLabel }}\n      </h2>\n\n      <button (click)=\"navigate(1)\"\n              [attr.aria-label]=\"config.nextLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronRight></svg>\n      </button>\n    </div>\n\n    <!-- Changing what's shown, and acting on it. -->\n    <div class=\"flex items-center gap-2 shrink-0\">\n      <!-- Jumping somewhere far off, which the arrows would take all day to reach. -->\n      <mn-lib-datetime (ngModelChange)=\"onPickDate($event)\"\n                       [ngModel]=\"focusDayString\"\n                       [props]=\"{ id: panelId + '-date', mode: 'date', placeholder: config.pickDateLabel, size: 'md', borderRadius: 'lg', hover: true }\"\n                       class=\"block\"></mn-lib-datetime>\n\n      <!-- View switcher (month / week / day) \u2014 hidden on mobile, which is forced to day view. -->\n      @if (!isMobileView) {\n        <div aria-label=\"Calendar view\" class=\"flex border border-base-300 rounded-md overflow-hidden\" role=\"tablist\">\n          @for (view of viewOptions; track view.value) {\n            <button\n              (click)=\"switchView(view.value)\"\n              [attr.aria-controls]=\"panelId\"\n              [attr.aria-selected]=\"currentView === view.value\"\n              [data]=\"{ size: 'md', variant: currentView === view.value ? 'fill' : 'text', color: 'primary' }\"\n              mnButton\n              role=\"tab\"\n              type=\"button\">\n              {{ view.label }}\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Action buttons (custom buttons + optional showButton CTA). -->\n      @if (buttons.length || showButton) {\n        <div class=\"flex items-center gap-2\">\n          @for (btn of buttons; track btn.label) {\n            <button (click)=\"btn.onClick()\" [data]=\"btn.buttonData || {}\" mnButton type=\"button\">\n              {{ btn.label }}\n            </button>\n          }\n          @if (showButton) {\n            <button (click)=\"ButtonClickedEvent.emit()\" [data]=\"{}\" mnButton type=\"button\">\n              {{ buttonTitle }}\n            </button>\n          }\n        </div>\n      }\n      </div>\n    </div>\n  </div>\n\n  <div class=\"grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3 flex-1 min-h-0\">\n    <div [id]=\"panelId\" class=\"min-w-0 min-h-0 overflow-hidden overflow-y-auto\" role=\"tabpanel\">\n      @if (currentView === CalendarView.MONTH) {\n        <mn-calendar-month\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          (dayClicked)=\"onMonthDayClick($event)\">\n        </mn-calendar-month>\n      }\n      @if (currentView === CalendarView.WEEK) {\n        <mn-calendar-week\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-week>\n      }\n      @if (currentView === CalendarView.DAY) {\n        <mn-calendar-day\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-day>\n      }\n    </div>\n    <div class=\"hidden lg:block border-l border-base-300 overflow-auto\">\n      <mn-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </mn-upcoming-events>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}\n"] }]
+                    ], template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n  <!-- Toolbar spans the full width so the primary action can sit above the\n       upcoming-events sidebar, using that otherwise-empty space. On mobile it\n       reflows: Today and the controls share the top row, and the \u2039 date \u203A nav\n       drops to its own full-width row below. Responsive `order` does the reflow. -->\n  <div class=\"flex flex-wrap items-center gap-x-3 gap-y-2 py-3\">\n\n    <button (click)=\"goToToday()\"\n            [data]=\"{ variant: 'outline', size: 'md', color: 'primary' }\"\n            class=\"order-1 shrink-0\"\n            mnButton\n            type=\"button\">\n      {{ config.todayLabel }}\n    </button>\n\n    <!-- Jumping somewhere far off, which the arrows would take all day to reach.\n         On mobile the picker collapses to its icon-only variant. Its `ml-auto`\n         pulls the picker \u2014 and the switcher and action button that follow it \u2014 to\n         the right of the row on every width, leaving Today (and the nav) on the\n         left, so the controls align right consistently across devices. -->\n    <mn-lib-datetime (ngModelChange)=\"onPickDate($event)\"\n                     [ngModel]=\"focusDayString\"\n                     [props]=\"{ id: panelId + '-date', mode: 'date', placeholder: config.pickDateLabel, size: 'md', borderRadius: 'lg', hover: true, iconOnly: isMobileView }\"\n                     class=\"order-2 ml-auto block lg:order-3\"></mn-lib-datetime>\n\n    <!-- View switcher (month / week / day) \u2014 hidden on mobile, which is forced to day view. -->\n    @if (!isMobileView) {\n      <div aria-label=\"Calendar view\" class=\"order-3 flex border border-base-300 rounded-md overflow-hidden lg:order-4\" role=\"tablist\">\n        @for (view of viewOptions; track view.value) {\n          <button\n            (click)=\"switchView(view.value)\"\n            [attr.aria-controls]=\"panelId\"\n            [attr.aria-selected]=\"currentView === view.value\"\n            [data]=\"{ size: 'md', variant: currentView === view.value ? 'fill' : 'text', color: 'primary' }\"\n            mnButton\n            role=\"tab\"\n            type=\"button\">\n            {{ view.label }}\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Action buttons (custom buttons + optional showButton CTA). They follow the\n         picker, so the picker's `ml-auto` carries them to the right of the row on\n         every width \u2014 on desktop that lands them above the upcoming-events sidebar. -->\n    @if (buttons.length || showButton) {\n      <div class=\"order-4 flex items-center gap-2 lg:order-5\">\n        @for (btn of buttons; track btn.label) {\n          <button (click)=\"btn.onClick()\" [data]=\"btn.buttonData || {}\" mnButton type=\"button\">\n            {{ btn.label }}\n          </button>\n        }\n        @if (showButton) {\n          <button (click)=\"ButtonClickedEvent.emit()\" [data]=\"{}\" mnButton type=\"button\">\n            {{ buttonTitle }}\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Stepping through time. The arrows sit either side of the date they move,\n         so the control and the thing it controls read as one unit. On mobile this\n         nav takes its own full-width row (basis-full, ordered last) with the date\n         centred between the arrows at the row's edges; on desktop it sits inline\n         after Today. `aria-live` announces the new period after each step. -->\n    <div class=\"order-5 flex basis-full items-center justify-between gap-1 lg:order-2 lg:basis-auto lg:justify-start\">\n      <button (click)=\"navigate(-1)\"\n              [attr.aria-label]=\"config.previousLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronLeft></svg>\n      </button>\n\n      <h2 aria-live=\"polite\" class=\"text-center text-base font-semibold whitespace-nowrap px-1 lg:min-w-56\">\n        {{ periodLabel }}\n      </h2>\n\n      <button (click)=\"navigate(1)\"\n              [attr.aria-label]=\"config.nextLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronRight></svg>\n      </button>\n    </div>\n\n  </div>\n\n  <div class=\"grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3 flex-1 min-h-0\">\n    <div [id]=\"panelId\" class=\"min-w-0 min-h-0 overflow-hidden overflow-y-auto\" role=\"tabpanel\">\n      @if (currentView === CalendarView.MONTH) {\n        <mn-calendar-month\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          (dayClicked)=\"onMonthDayClick($event)\">\n        </mn-calendar-month>\n      }\n      @if (currentView === CalendarView.WEEK) {\n        <mn-calendar-week\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-week>\n      }\n      @if (currentView === CalendarView.DAY) {\n        <mn-calendar-day\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-day>\n      }\n    </div>\n    <div class=\"hidden lg:block border-l border-base-300 overflow-auto\">\n      <mn-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </mn-upcoming-events>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { showButton: [{
                 type: Input
             }], buttonTitle: [{