mn-angular-lib 1.0.116 → 1.0.117

package/fesm2022/mn-angular-lib.mjs

@@ -2938,10 +2938,12 @@ const ARROWS_ZONE_WIDTH = 88;
  * the gap beside it.
  */
 const CONTROLS_ZONE_WIDTH = 150;
-/** Space the month caption claims beside the strip. */
-const MONTH_CAPTION_WIDTH = 88;
-/** Everything on the row that isn't a day tile. */
-const RESERVED_WIDTH = ARROWS_ZONE_WIDTH + CONTROLS_ZONE_WIDTH + MONTH_CAPTION_WIDTH;
+/**
+ * Everything on the controls row that isn't a day tile. The month is a full-width
+ * header on its own line now, so it no longer competes with the days for room —
+ * which is why more of them fit at a given width than they used to.
+ */
+const RESERVED_WIDTH = ARROWS_ZONE_WIDTH + CONTROLS_ZONE_WIDTH;
 /** Below this the strip can't hold even {@link MIN_TILE_COUNT} days. */
 const COMPACT_MAX_WIDTH = MIN_TILE_COUNT * TILE_SLOT_WIDTH + RESERVED_WIDTH;
 /** Assumed width before the first measurement (and during server-side rendering). */
@@ -2951,7 +2953,7 @@ let instanceCounter$1 = 0;
 /**
  * Reusable, responsive date selector bar.
  *
- * Renders a "Today" button, a month caption, previous/next arrows and a strip of
+ * Renders a "Today" button, a month header, previous/next arrows and a strip of
  * day tiles. Selecting a tile or pressing "Today" emits the chosen day via
  * {@link dateSelected}. The arrows only shift the visible days and never emit.
  *
@@ -3106,31 +3108,32 @@ class MnDateSelectorBar {
         return tiles;
     }, ...(ngDevMode ? [{ debugName: "dayTiles" }] : []));
     /**
-     * Names the month the strip is currently in, so the days are never just loose
-     * numbers. Reads as a range when the strip straddles two months, and carries
-     * both years when it straddles two of those.
+     * The month the strip is currently in, spelled out for the header that titles
+     * the bar — so the days below are never just loose numbers. Reads as a range
+     * when the strip straddles two months, and carries both years when it straddles
+     * two of those.
      */
     monthCaption = computed(() => {
         const locale = this.effectiveLocale();
         const tiles = this.dayTiles();
-        // With no strip to describe — the compact layout — the caption names the
+        // With no strip to describe — the compact layout — the header names the
         // month the selection sits in, so the bar is never unlabelled.
         if (!tiles.length) {
-            return this.selectedDate().toLocaleDateString(locale, { month: 'short', year: 'numeric' });
+            return this.selectedDate().toLocaleDateString(locale, { month: 'long', year: 'numeric' });
         }
         const first = tiles[0].date;
         const last = tiles[tiles.length - 1].date;
         if (first.getFullYear() !== last.getFullYear()) {
-            const from = first.toLocaleDateString(locale, { month: 'short', year: 'numeric' });
-            const to = last.toLocaleDateString(locale, { month: 'short', year: 'numeric' });
+            const from = first.toLocaleDateString(locale, { month: 'long', year: 'numeric' });
+            const to = last.toLocaleDateString(locale, { month: 'long', year: 'numeric' });
             return `${from} – ${to}`;
         }
         if (first.getMonth() !== last.getMonth()) {
-            const from = first.toLocaleDateString(locale, { month: 'short' });
-            const to = last.toLocaleDateString(locale, { month: 'short', year: 'numeric' });
+            const from = first.toLocaleDateString(locale, { month: 'long' });
+            const to = last.toLocaleDateString(locale, { month: 'long', year: 'numeric' });
             return `${from} – ${to}`;
         }
-        return first.toLocaleDateString(locale, { month: 'short', year: 'numeric' });
+        return first.toLocaleDateString(locale, { month: 'long', year: 'numeric' });
     }, ...(ngDevMode ? [{ debugName: "monthCaption" }] : []));
     /** The selected date formatted as YYYY-MM-DD for the date-picker input. */
     selectedDateString = computed(() => {
@@ -3331,7 +3334,7 @@ class MnDateSelectorBar {
             a.getDate() === b.getDate());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnDateSelectorBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnDateSelectorBar, isStandalone: true, selector: "mn-date-selector-bar", inputs: { selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, pickDateLabel: { classPropertyName: "pickDateLabel", publicName: "pickDateLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, dayStripLabel: { classPropertyName: "dayStripLabel", publicName: "dayStripLabel", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelected: "dateSelected" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "tileButtons", predicate: ["tileButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Date selector bar. Layout is driven by the bar's own measured width, so it\n     rearranges for the space the bar was given, not for the viewport. It never\n     stacks: as room runs out it shows fewer days, then hands over to the picker.\n     Nothing here is boxed \u2014 spacing does the grouping, not borders. -->\n<div class=\"flex items-center gap-4 px-4 py-3\">\n\n  <!-- Today: returns the strip and the selection to the current day, and the\n       control people reach for most, so it carries the weight of a filled button. -->\n  <button (click)=\"goToToday()\"\n          [data]=\"{ variant: 'fill', color: 'primary', size: 'md' }\"\n          class=\"shrink-0\"\n          mnButton\n          type=\"button\">\n    {{ todayLabel() }}\n  </button>\n\n  <!-- Too narrow for a usable strip, so the picker takes its place beside Today.\n       Every date stays reachable on a phone, in one tap rather than by paging.\n       The caption comes along, so the compact bar is labelled like the wide one \u2014\n       it names the selected day's month rather than a visible range. -->\n  @if (!showDayStrip()) {\n    <span aria-hidden=\"true\"\n          class=\"shrink-0 text-xs font-semibold tracking-wide whitespace-nowrap uppercase opacity-55\">\n      {{ monthCaption() }}\n    </span>\n\n    <mn-lib-datetime (ngModelChange)=\"onDateModelChanged($event)\"\n                     [ngModel]=\"selectedDateString()\"\n                     [props]=\"pickerProps()\"\n                     class=\"block min-w-0 flex-1\"></mn-lib-datetime>\n  }\n\n  <!-- The strip takes the room left over and centres its contents in it, so on a\n       wide bar the days sit in the middle rather than trailing off to one side. -->\n  @if (showDayStrip()) {\n    <div [attr.aria-label]=\"dayStripLabel()\"\n         class=\"flex min-w-0 flex-1 items-center justify-center gap-3\"\n         role=\"group\">\n      <!-- Names the month the strip is in, so the day numbers are never loose. -->\n      <span aria-hidden=\"true\"\n            class=\"shrink-0 text-xs font-semibold tracking-wide whitespace-nowrap uppercase opacity-55\">\n        {{ monthCaption() }}\n      </span>\n\n      <button (click)=\"navigatePrevious()\"\n              [attr.aria-label]=\"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      <!-- Days read on one line so each sits at the same height as the buttons\n           either side of it. Roving tabindex: one day is in the tab order, the\n           arrow keys move between the rest and page the strip at either end. -->\n      <div class=\"flex min-w-0 gap-1\">\n        @for (tile of dayTiles(); track tile.date.getTime(); let i = $index) {\n          <!-- A month break is marked by extra breathing room rather than a rule,\n               so the run of days stays unbroken; the caption names both months. -->\n          <button #tileButton\n                  (click)=\"selectDate(tile.date)\"\n                  (focus)=\"onTileFocus(i)\"\n                  (keydown)=\"onTileKeydown($event, i)\"\n                  [attr.aria-current]=\"tile.isToday ? 'date' : null\"\n                  [attr.aria-label]=\"tile.accessibleLabel\"\n                  [attr.aria-pressed]=\"tile.isSelected\"\n                  [attr.tabindex]=\"isTabbable(i) ? 0 : -1\"\n                  [class.bg-primary]=\"tile.isSelected\"\n                  [class.hover:bg-base-200]=\"!tile.isSelected\"\n                  [class.ml-3]=\"tile.startsNewMonth\"\n                  [class.text-primary-content]=\"tile.isSelected\"\n                  class=\"flex min-w-16 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary motion-reduce:transition-none\"\n                  type=\"button\">\n            <span [class.opacity-60]=\"!tile.isSelected\"\n                  [class.opacity-90]=\"tile.isSelected\"\n                  aria-hidden=\"true\"\n                  class=\"text-xs font-medium uppercase\">\n              {{ tile.dayName }}\n            </span>\n            <span aria-hidden=\"true\" class=\"font-bold tabular-nums\">{{ tile.dayNumber }}</span>\n            <!-- Today's dot. Every day reserves the space so no tile changes\n                 width; only its colour says which one is today, and exactly one\n                 colour class applies at a time so they can't fight. -->\n            <span [class.bg-primary-content]=\"tile.isToday && tile.isSelected\"\n                  [class.bg-primary]=\"tile.isToday && !tile.isSelected\"\n                  aria-hidden=\"true\"\n                  class=\"size-1 shrink-0 rounded-full\"></span>\n          </button>\n        }\n      </div>\n\n      <button (click)=\"navigateNext()\"\n              [attr.aria-label]=\"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", 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: 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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnDateSelectorBar, isStandalone: true, selector: "mn-date-selector-bar", inputs: { selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, pickDateLabel: { classPropertyName: "pickDateLabel", publicName: "pickDateLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, dayStripLabel: { classPropertyName: "dayStripLabel", publicName: "dayStripLabel", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelected: "dateSelected" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "tileButtons", predicate: ["tileButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Date selector bar. Layout is driven by the bar's own measured width, so it\n     rearranges for the space the bar was given, not for the viewport. The strip\n     never stacks: as room runs out it shows fewer days, then hands over to the\n     picker. Nothing here is boxed \u2014 spacing does the grouping, not borders. -->\n<div class=\"flex flex-col gap-2 px-4 py-3\">\n\n  <!-- Month header. Titles the whole bar so the day numbers below are never loose:\n       it names the month the strip is in (or, when compact, the month the\n       selection sits in), reading as a range where the strip crosses a boundary.\n       On its own line it has room to be spelled out, and no longer steals width\n       from the days the way the old inline caption did. -->\n  <div aria-hidden=\"true\"\n       class=\"text-center text-sm font-semibold tracking-wide whitespace-nowrap opacity-80\">\n    {{ monthCaption() }}\n  </div>\n\n  <!-- Controls row. Today and the strip travel together as one centred cluster, so\n       Today sits right beside the days instead of stranded against the far edge;\n       the gap between them matches the strip's own spacing. When the strip gives\n       way to the picker, the picker fills the row and Today anchors its left. -->\n  <div class=\"flex items-center justify-center gap-3\">\n\n    <!-- Today: returns the strip and the selection to the current day. Outlined\n         rather than filled, so the one filled-primary element on the bar is the\n         selected day \u2014 Today shares the primary accent without competing with it. -->\n    <button (click)=\"goToToday()\"\n            [data]=\"{ variant: 'outline', color: 'primary', size: 'md' }\"\n            class=\"shrink-0\"\n            mnButton\n            type=\"button\">\n      {{ todayLabel() }}\n    </button>\n\n    <!-- Too narrow for a usable strip, so the picker takes its place beside Today.\n         Every date stays reachable on a phone, in one tap rather than by paging;\n         the month header above keeps the compact bar labelled like the wide one. -->\n    @if (!showDayStrip()) {\n      <mn-lib-datetime (ngModelChange)=\"onDateModelChanged($event)\"\n                       [ngModel]=\"selectedDateString()\"\n                       [props]=\"pickerProps()\"\n                       class=\"block min-w-0 flex-1\"></mn-lib-datetime>\n    }\n\n    <!-- Arrows and days, sized to their own content so the row can centre them\n         together with Today as a single cluster \u2014 rather than the days drifting to\n         the middle of the leftover space, away from the button. -->\n    @if (showDayStrip()) {\n      <div [attr.aria-label]=\"dayStripLabel()\"\n           class=\"flex min-w-0 items-center gap-3\"\n           role=\"group\">\n        <button (click)=\"navigatePrevious()\"\n                [attr.aria-label]=\"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        <!-- Days read on one line so each sits at the same height as the buttons\n             either side of it. Roving tabindex: one day is in the tab order, the\n             arrow keys move between the rest and page the strip at either end. -->\n        <div class=\"flex min-w-0 gap-1\">\n          @for (tile of dayTiles(); track tile.date.getTime(); let i = $index) {\n            <!-- Selected is the filled pill; today is called out by its number\n                 alone, tinted primary \u2014 no box, in keeping with a bar that groups\n                 by spacing rather than borders. When today is also the selected\n                 day the fill takes over, since there is nothing left to tell apart.\n                 A month break is marked by extra breathing room rather than a rule,\n                 so the run of days stays unbroken; the header names both months. -->\n            <button #tileButton\n                    (click)=\"selectDate(tile.date)\"\n                    (focus)=\"onTileFocus(i)\"\n                    (keydown)=\"onTileKeydown($event, i)\"\n                    [attr.aria-current]=\"tile.isToday ? 'date' : null\"\n                    [attr.aria-label]=\"tile.accessibleLabel\"\n                    [attr.aria-pressed]=\"tile.isSelected\"\n                    [attr.tabindex]=\"isTabbable(i) ? 0 : -1\"\n                    [class.bg-primary]=\"tile.isSelected\"\n                    [class.hover:bg-base-200]=\"!tile.isSelected\"\n                    [class.ml-3]=\"tile.startsNewMonth\"\n                    [class.text-primary-content]=\"tile.isSelected\"\n                    class=\"flex min-w-16 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary motion-reduce:transition-none\"\n                    type=\"button\">\n              <span [class.opacity-60]=\"!tile.isSelected\"\n                    [class.opacity-90]=\"tile.isSelected\"\n                    aria-hidden=\"true\"\n                    class=\"text-xs font-medium uppercase\">\n                {{ tile.dayName }}\n              </span>\n              <!-- Today's number carries the primary tint, unless the tile is\n                   filled \u2014 then it wears the fill's own text colour instead. -->\n              <span [class.text-primary]=\"tile.isToday && !tile.isSelected\"\n                    aria-hidden=\"true\"\n                    class=\"font-bold tabular-nums\">{{ tile.dayNumber }}</span>\n            </button>\n          }\n        </div>\n\n        <button (click)=\"navigateNext()\"\n                [attr.aria-label]=\"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</div>\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: 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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnDateSelectorBar, decorators: [{
             type: Component,
@@ -3342,7 +3345,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         MnDatetime,
                         LucideChevronLeft,
                         LucideChevronRight,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'block' }, template: "<!-- Date selector bar. Layout is driven by the bar's own measured width, so it\n     rearranges for the space the bar was given, not for the viewport. It never\n     stacks: as room runs out it shows fewer days, then hands over to the picker.\n     Nothing here is boxed \u2014 spacing does the grouping, not borders. -->\n<div class=\"flex items-center gap-4 px-4 py-3\">\n\n  <!-- Today: returns the strip and the selection to the current day, and the\n       control people reach for most, so it carries the weight of a filled button. -->\n  <button (click)=\"goToToday()\"\n          [data]=\"{ variant: 'fill', color: 'primary', size: 'md' }\"\n          class=\"shrink-0\"\n          mnButton\n          type=\"button\">\n    {{ todayLabel() }}\n  </button>\n\n  <!-- Too narrow for a usable strip, so the picker takes its place beside Today.\n       Every date stays reachable on a phone, in one tap rather than by paging.\n       The caption comes along, so the compact bar is labelled like the wide one \u2014\n       it names the selected day's month rather than a visible range. -->\n  @if (!showDayStrip()) {\n    <span aria-hidden=\"true\"\n          class=\"shrink-0 text-xs font-semibold tracking-wide whitespace-nowrap uppercase opacity-55\">\n      {{ monthCaption() }}\n    </span>\n\n    <mn-lib-datetime (ngModelChange)=\"onDateModelChanged($event)\"\n                     [ngModel]=\"selectedDateString()\"\n                     [props]=\"pickerProps()\"\n                     class=\"block min-w-0 flex-1\"></mn-lib-datetime>\n  }\n\n  <!-- The strip takes the room left over and centres its contents in it, so on a\n       wide bar the days sit in the middle rather than trailing off to one side. -->\n  @if (showDayStrip()) {\n    <div [attr.aria-label]=\"dayStripLabel()\"\n         class=\"flex min-w-0 flex-1 items-center justify-center gap-3\"\n         role=\"group\">\n      <!-- Names the month the strip is in, so the day numbers are never loose. -->\n      <span aria-hidden=\"true\"\n            class=\"shrink-0 text-xs font-semibold tracking-wide whitespace-nowrap uppercase opacity-55\">\n        {{ monthCaption() }}\n      </span>\n\n      <button (click)=\"navigatePrevious()\"\n              [attr.aria-label]=\"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      <!-- Days read on one line so each sits at the same height as the buttons\n           either side of it. Roving tabindex: one day is in the tab order, the\n           arrow keys move between the rest and page the strip at either end. -->\n      <div class=\"flex min-w-0 gap-1\">\n        @for (tile of dayTiles(); track tile.date.getTime(); let i = $index) {\n          <!-- A month break is marked by extra breathing room rather than a rule,\n               so the run of days stays unbroken; the caption names both months. -->\n          <button #tileButton\n                  (click)=\"selectDate(tile.date)\"\n                  (focus)=\"onTileFocus(i)\"\n                  (keydown)=\"onTileKeydown($event, i)\"\n                  [attr.aria-current]=\"tile.isToday ? 'date' : null\"\n                  [attr.aria-label]=\"tile.accessibleLabel\"\n                  [attr.aria-pressed]=\"tile.isSelected\"\n                  [attr.tabindex]=\"isTabbable(i) ? 0 : -1\"\n                  [class.bg-primary]=\"tile.isSelected\"\n                  [class.hover:bg-base-200]=\"!tile.isSelected\"\n                  [class.ml-3]=\"tile.startsNewMonth\"\n                  [class.text-primary-content]=\"tile.isSelected\"\n                  class=\"flex min-w-16 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary motion-reduce:transition-none\"\n                  type=\"button\">\n            <span [class.opacity-60]=\"!tile.isSelected\"\n                  [class.opacity-90]=\"tile.isSelected\"\n                  aria-hidden=\"true\"\n                  class=\"text-xs font-medium uppercase\">\n              {{ tile.dayName }}\n            </span>\n            <span aria-hidden=\"true\" class=\"font-bold tabular-nums\">{{ tile.dayNumber }}</span>\n            <!-- Today's dot. Every day reserves the space so no tile changes\n                 width; only its colour says which one is today, and exactly one\n                 colour class applies at a time so they can't fight. -->\n            <span [class.bg-primary-content]=\"tile.isToday && tile.isSelected\"\n                  [class.bg-primary]=\"tile.isToday && !tile.isSelected\"\n                  aria-hidden=\"true\"\n                  class=\"size-1 shrink-0 rounded-full\"></span>\n          </button>\n        }\n      </div>\n\n      <button (click)=\"navigateNext()\"\n              [attr.aria-label]=\"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" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'block' }, template: "<!-- Date selector bar. Layout is driven by the bar's own measured width, so it\n     rearranges for the space the bar was given, not for the viewport. The strip\n     never stacks: as room runs out it shows fewer days, then hands over to the\n     picker. Nothing here is boxed \u2014 spacing does the grouping, not borders. -->\n<div class=\"flex flex-col gap-2 px-4 py-3\">\n\n  <!-- Month header. Titles the whole bar so the day numbers below are never loose:\n       it names the month the strip is in (or, when compact, the month the\n       selection sits in), reading as a range where the strip crosses a boundary.\n       On its own line it has room to be spelled out, and no longer steals width\n       from the days the way the old inline caption did. -->\n  <div aria-hidden=\"true\"\n       class=\"text-center text-sm font-semibold tracking-wide whitespace-nowrap opacity-80\">\n    {{ monthCaption() }}\n  </div>\n\n  <!-- Controls row. Today and the strip travel together as one centred cluster, so\n       Today sits right beside the days instead of stranded against the far edge;\n       the gap between them matches the strip's own spacing. When the strip gives\n       way to the picker, the picker fills the row and Today anchors its left. -->\n  <div class=\"flex items-center justify-center gap-3\">\n\n    <!-- Today: returns the strip and the selection to the current day. Outlined\n         rather than filled, so the one filled-primary element on the bar is the\n         selected day \u2014 Today shares the primary accent without competing with it. -->\n    <button (click)=\"goToToday()\"\n            [data]=\"{ variant: 'outline', color: 'primary', size: 'md' }\"\n            class=\"shrink-0\"\n            mnButton\n            type=\"button\">\n      {{ todayLabel() }}\n    </button>\n\n    <!-- Too narrow for a usable strip, so the picker takes its place beside Today.\n         Every date stays reachable on a phone, in one tap rather than by paging;\n         the month header above keeps the compact bar labelled like the wide one. -->\n    @if (!showDayStrip()) {\n      <mn-lib-datetime (ngModelChange)=\"onDateModelChanged($event)\"\n                       [ngModel]=\"selectedDateString()\"\n                       [props]=\"pickerProps()\"\n                       class=\"block min-w-0 flex-1\"></mn-lib-datetime>\n    }\n\n    <!-- Arrows and days, sized to their own content so the row can centre them\n         together with Today as a single cluster \u2014 rather than the days drifting to\n         the middle of the leftover space, away from the button. -->\n    @if (showDayStrip()) {\n      <div [attr.aria-label]=\"dayStripLabel()\"\n           class=\"flex min-w-0 items-center gap-3\"\n           role=\"group\">\n        <button (click)=\"navigatePrevious()\"\n                [attr.aria-label]=\"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        <!-- Days read on one line so each sits at the same height as the buttons\n             either side of it. Roving tabindex: one day is in the tab order, the\n             arrow keys move between the rest and page the strip at either end. -->\n        <div class=\"flex min-w-0 gap-1\">\n          @for (tile of dayTiles(); track tile.date.getTime(); let i = $index) {\n            <!-- Selected is the filled pill; today is called out by its number\n                 alone, tinted primary \u2014 no box, in keeping with a bar that groups\n                 by spacing rather than borders. When today is also the selected\n                 day the fill takes over, since there is nothing left to tell apart.\n                 A month break is marked by extra breathing room rather than a rule,\n                 so the run of days stays unbroken; the header names both months. -->\n            <button #tileButton\n                    (click)=\"selectDate(tile.date)\"\n                    (focus)=\"onTileFocus(i)\"\n                    (keydown)=\"onTileKeydown($event, i)\"\n                    [attr.aria-current]=\"tile.isToday ? 'date' : null\"\n                    [attr.aria-label]=\"tile.accessibleLabel\"\n                    [attr.aria-pressed]=\"tile.isSelected\"\n                    [attr.tabindex]=\"isTabbable(i) ? 0 : -1\"\n                    [class.bg-primary]=\"tile.isSelected\"\n                    [class.hover:bg-base-200]=\"!tile.isSelected\"\n                    [class.ml-3]=\"tile.startsNewMonth\"\n                    [class.text-primary-content]=\"tile.isSelected\"\n                    class=\"flex min-w-16 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary motion-reduce:transition-none\"\n                    type=\"button\">\n              <span [class.opacity-60]=\"!tile.isSelected\"\n                    [class.opacity-90]=\"tile.isSelected\"\n                    aria-hidden=\"true\"\n                    class=\"text-xs font-medium uppercase\">\n                {{ tile.dayName }}\n              </span>\n              <!-- Today's number carries the primary tint, unless the tile is\n                   filled \u2014 then it wears the fill's own text colour instead. -->\n              <span [class.text-primary]=\"tile.isToday && !tile.isSelected\"\n                    aria-hidden=\"true\"\n                    class=\"font-bold tabular-nums\">{{ tile.dayNumber }}</span>\n            </button>\n          }\n        </div>\n\n        <button (click)=\"navigateNext()\"\n                [attr.aria-label]=\"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</div>\n" }]
         }], propDecorators: { selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], pickDateLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickDateLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], dayStripLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayStripLabel", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }], tileButtons: [{ type: i0.ViewChildren, args: ['tileButton', { isSignal: true }] }] } });
 
 const mnMultiSelectVariants = tv({