@egose/shadcn-theme-ng 0.0.28 → 0.1.0

package/calendar/fesm2022/calendar.mjs

@@ -33,116 +33,15 @@ class HlmCalendar {
         };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_heading" }] : /* istanbul ignore next */ []));
-    _btnClass = hlm(buttonVariants({ variant: 'ghost', size: 'icon' }), 'data-[today=true]:bg-muted group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:bg-muted/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-e-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-s-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70', 'data-[outside=true]:opacity-50', "data-[highlighted]:before:content-['']", 'data-[highlighted]:before:absolute', 'data-[highlighted]:before:bottom-1', 'data-[highlighted]:before:start-1/2', 'data-[highlighted]:before:h-1', 'data-[highlighted]:before:w-1', 'data-[highlighted]:before:-translate-x-1/2', 'data-[highlighted]:before:rounded-full', 'data-[highlighted]:before:bg-destructive');
+    _btnClass = hlm(buttonVariants({ variant: 'ghost', size: 'icon' }), "data-[today=true]:bg-muted group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:bg-muted/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-e-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-s-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70", "data-[outside=true]:opacity-50", "data-[highlighted]:before:content-['']", "data-[highlighted]:before:absolute", "data-[highlighted]:before:bottom-1", "data-[highlighted]:before:start-1/2", "data-[highlighted]:before:h-1", "data-[highlighted]:before:w-1", "data-[highlighted]:before:-translate-x-1/2", "data-[highlighted]:before:rounded-full", "data-[highlighted]:before:bg-destructive");
     _selectClass = 'gap-0 px-1.5 py-2 [&>ng-icon]:ms-1';
     constructor() {
-        classes(() => 'p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] group/calendar bg-background block in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent');
+        classes(() => "p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] group/calendar bg-background block in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent");
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: HlmCalendar, isStandalone: true, selector: "hlm-calendar", inputs: { captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "calendar" } }, hostDirectives: [{ directive: i1.BrnCalendar, inputs: ["min", "min", "max", "max", "disabled", "disabled", "date", "date", "dateDisabled", "dateDisabled", "weekStartsOn", "weekStartsOn", "highlightDays", "highlightDays", "defaultFocusedDate", "defaultFocusedDate"], outputs: ["dateChange", "dateChange"] }], ngImport: i0, template: `
-    <div class="inline-flex flex-col gap-4">
-      <!-- Header -->
-      <div class="flex w-full items-center justify-between gap-1.5">
-        <ng-template #month>
-          <hlm-select brnCalendarMonthSelect class="order-1">
-            <hlm-select-trigger size="sm" [class]="_selectClass">
-              <hlm-select-value />
-            </hlm-select-trigger>
-            <hlm-select-content *hlmSelectPortal class="max-h-80">
-              <hlm-select-group>
-                @for (month of _i18n.config().months(); track month) {
-                  <hlm-select-item [value]="month">{{ month }}</hlm-select-item>
-                }
-              </hlm-select-group>
-            </hlm-select-content>
-          </hlm-select>
-        </ng-template>
-        <ng-template #year>
-          <hlm-select brnCalendarYearSelect class="order-3">
-            <hlm-select-trigger size="sm" [class]="_selectClass">
-              <hlm-select-value />
-            </hlm-select-trigger>
-            <hlm-select-content *hlmSelectPortal class="max-h-80">
-              <hlm-select-group>
-                @for (year of _i18n.config().years(); track year) {
-                  <hlm-select-item [value]="year">{{ year }}</hlm-select-item>
-                }
-              </hlm-select-group>
-            </hlm-select-content>
-          </hlm-select>
-        </ng-template>
-        @let heading = _heading();
-
-        <button
-          brnCalendarPreviousButton
-          variant="ghost"
-          hlmBtn
-          class="order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
-        >
-          <ng-icon name="lucideChevronLeft" class="rtl:rotate-180" />
-        </button>
-
-        @switch (captionLayout()) {
-          @case ('dropdown') {
-            <ng-container [ngTemplateOutlet]="month" />
-            <ng-container [ngTemplateOutlet]="year" />
-          }
-          @case ('dropdown-months') {
-            <ng-container [ngTemplateOutlet]="month" />
-            <div brnCalendarHeader class="order-4 text-sm font-medium">{{ heading.year }}</div>
-          }
-          @case ('dropdown-years') {
-            <div brnCalendarHeader class="order-2 text-sm font-medium">{{ heading.month }}</div>
-            <ng-container [ngTemplateOutlet]="year" />
-          }
-          @case ('label') {
-            <div brnCalendarHeader class="order-5 text-sm font-medium">{{ heading.header }}</div>
-          }
-        }
-
-        <button
-          brnCalendarNextButton
-          hlmBtn
-          variant="ghost"
-          class="order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
-        >
-          <ng-icon name="lucideChevronRight" class="rtl:rotate-180" />
-        </button>
-      </div>
-
-      <table class="w-full border-collapse space-y-1" brnCalendarGrid>
-        <thead aria-hidden="true">
-          <tr class="flex">
-            <th
-              *brnCalendarWeekday="let weekday"
-              scope="col"
-              class="text-muted-foreground flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal select-none"
-              [attr.aria-label]="_i18n.config().labelWeekday(weekday)"
-            >
-              {{ _i18n.config().formatWeekdayName(weekday) }}
-            </th>
-          </tr>
-        </thead>
-
-        <tbody role="rowgroup">
-          <tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
-            @for (date of week; track _dateAdapter.getTime(date)) {
-              <td
-                brnCalendarCell
-                class="group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)"
-              >
-                <button brnCalendarCellButton [date]="date" [class]="_btnClass">
-                  {{ _dateAdapter.getDate(date) }}
-                </button>
-              </td>
-            }
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.BrnCalendarCellButton, selector: "button[brnCalendarCellButton]", inputs: ["date"] }, { kind: "directive", type: i1.BrnCalendarGrid, selector: "[brnCalendarGrid]" }, { kind: "directive", type: i1.BrnCalendarHeader, selector: "[brnCalendarHeader]", inputs: ["id"] }, { kind: "directive", type: i1.BrnCalendarNextButton, selector: "[brnCalendarNextButton]" }, { kind: "directive", type: i1.BrnCalendarPreviousButton, selector: "[brnCalendarPreviousButton]" }, { kind: "directive", type: i1.BrnCalendarWeek, selector: "[brnCalendarWeek]" }, { kind: "directive", type: i1.BrnCalendarWeekday, selector: "[brnCalendarWeekday]" }, { kind: "directive", type: i1.BrnCalendarCell, selector: "[brnCalendarCell]" }, { kind: "directive", type: i1.BrnCalendarMonthSelect, selector: "brnSelect[brnCalendarMonthSelect],hlm-select[brnCalendarMonthSelect]" }, { kind: "directive", type: i1.BrnCalendarYearSelect, selector: "brnSelect[brnCalendarYearSelect],hlm-select[brnCalendarYearSelect]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: i2.HlmSelect, selector: "[hlmSelect],hlm-select" }, { kind: "component", type: i2.HlmSelectContent, selector: "hlm-select-content", inputs: ["showScroll"] }, { kind: "directive", type: i2.HlmSelectGroup, selector: "[hlmSelectGroup],hlm-select-group" }, { kind: "component", type: i2.HlmSelectItem, selector: "hlm-select-item" }, { kind: "directive", type: i2.HlmSelectPortal, selector: "[hlmSelectPortal]" }, { kind: "component", type: i2.HlmSelectTrigger, selector: "hlm-select-trigger", inputs: ["class", "buttonId", "size", "forceInvalid"] }, { kind: "directive", type: i2.HlmSelectValue, selector: "[hlmSelectValue],hlm-select-value" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.HlmBtn, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size", "class", "type"], exportAs: ["hlmBtn"] }], viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmCalendar, isStandalone: true, selector: "hlm-calendar", inputs: { captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "calendar" } }, hostDirectives: [{ directive: i1.BrnCalendar, inputs: ["min", "min", "max", "max", "disabled", "disabled", "date", "date", "dateDisabled", "dateDisabled", "weekStartsOn", "weekStartsOn", "highlightDays", "highlightDays", "defaultFocusedDate", "defaultFocusedDate"], outputs: ["dateChange", "dateChange"] }], ngImport: i0, template: "\n    <div class=\"inline-flex flex-col gap-4\">\n      <!-- Header -->\n      <div class=\"flex w-full items-center justify-between gap-1.5\">\n        <ng-template #month>\n          <hlm-select brnCalendarMonthSelect class=\"order-1\">\n            <hlm-select-trigger size=\"sm\" [class]=\"_selectClass\">\n              <hlm-select-value />\n            </hlm-select-trigger>\n            <hlm-select-content *hlmSelectPortal class=\"max-h-80\">\n              <hlm-select-group>\n                @for (month of _i18n.config().months(); track month) {\n                  <hlm-select-item [value]=\"month\">{{ month }}</hlm-select-item>\n                }\n              </hlm-select-group>\n            </hlm-select-content>\n          </hlm-select>\n        </ng-template>\n        <ng-template #year>\n          <hlm-select brnCalendarYearSelect class=\"order-3\">\n            <hlm-select-trigger size=\"sm\" [class]=\"_selectClass\">\n              <hlm-select-value />\n            </hlm-select-trigger>\n            <hlm-select-content *hlmSelectPortal class=\"max-h-80\">\n              <hlm-select-group>\n                @for (year of _i18n.config().years(); track year) {\n                  <hlm-select-item [value]=\"year\">{{ year }}</hlm-select-item>\n                }\n              </hlm-select-group>\n            </hlm-select-content>\n          </hlm-select>\n        </ng-template>\n        @let heading = _heading();\n\n        <button\n          brnCalendarPreviousButton\n          variant=\"ghost\"\n          hlmBtn\n          class=\"order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n        >\n          <ng-icon name=\"lucideChevronLeft\" class=\"rtl:rotate-180\" />\n        </button>\n\n        @switch (captionLayout()) {\n          @case ('dropdown') {\n            <ng-container [ngTemplateOutlet]=\"month\" />\n            <ng-container [ngTemplateOutlet]=\"year\" />\n          }\n          @case ('dropdown-months') {\n            <ng-container [ngTemplateOutlet]=\"month\" />\n            <div brnCalendarHeader class=\"order-4 text-sm font-medium\">{{ heading.year }}</div>\n          }\n          @case ('dropdown-years') {\n            <div brnCalendarHeader class=\"order-2 text-sm font-medium\">{{ heading.month }}</div>\n            <ng-container [ngTemplateOutlet]=\"year\" />\n          }\n          @case ('label') {\n            <div brnCalendarHeader class=\"order-5 text-sm font-medium\">{{ heading.header }}</div>\n          }\n        }\n\n        <button\n          brnCalendarNextButton\n          hlmBtn\n          variant=\"ghost\"\n          class=\"order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n        >\n          <ng-icon name=\"lucideChevronRight\" class=\"rtl:rotate-180\" />\n        </button>\n      </div>\n\n      <table class=\"w-full border-collapse space-y-1\" brnCalendarGrid>\n        <thead aria-hidden=\"true\">\n          <tr class=\"flex\">\n            <th\n              *brnCalendarWeekday=\"let weekday\"\n              scope=\"col\"\n              class=\"text-muted-foreground flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal select-none\"\n              [attr.aria-label]=\"_i18n.config().labelWeekday(weekday)\"\n            >\n              {{ _i18n.config().formatWeekdayName(weekday) }}\n            </th>\n          </tr>\n        </thead>\n\n        <tbody role=\"rowgroup\">\n          <tr *brnCalendarWeek=\"let week\" class=\"mt-2 flex w-full\">\n            @for (date of week; track _dateAdapter.getTime(date)) {\n              <td\n                brnCalendarCell\n                class=\"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)\"\n              >\n                <button brnCalendarCellButton [date]=\"date\" [class]=\"_btnClass\">\n                  {{ _dateAdapter.getDate(date) }}\n                </button>\n              </td>\n            }\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  ", isInline: true, dependencies: [{ kind: "directive", type: i1.BrnCalendarCellButton, selector: "button[brnCalendarCellButton]", inputs: ["date"] }, { kind: "directive", type: i1.BrnCalendarGrid, selector: "[brnCalendarGrid]" }, { kind: "directive", type: i1.BrnCalendarHeader, selector: "[brnCalendarHeader]", inputs: ["id"] }, { kind: "directive", type: i1.BrnCalendarNextButton, selector: "[brnCalendarNextButton]" }, { kind: "directive", type: i1.BrnCalendarPreviousButton, selector: "[brnCalendarPreviousButton]" }, { kind: "directive", type: i1.BrnCalendarWeek, selector: "[brnCalendarWeek]" }, { kind: "directive", type: i1.BrnCalendarWeekday, selector: "[brnCalendarWeekday]" }, { kind: "directive", type: i1.BrnCalendarCell, selector: "[brnCalendarCell]" }, { kind: "directive", type: i1.BrnCalendarMonthSelect, selector: "brnSelect[brnCalendarMonthSelect],hlm-select[brnCalendarMonthSelect]" }, { kind: "directive", type: i1.BrnCalendarYearSelect, selector: "brnSelect[brnCalendarYearSelect],hlm-select[brnCalendarYearSelect]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: i2.HlmSelect, selector: "[hlmSelect],hlm-select" }, { kind: "component", type: i2.HlmSelectContent, selector: "hlm-select-content", inputs: ["showScroll"] }, { kind: "directive", type: i2.HlmSelectGroup, selector: "[hlmSelectGroup],hlm-select-group" }, { kind: "component", type: i2.HlmSelectItem, selector: "hlm-select-item" }, { kind: "directive", type: i2.HlmSelectPortal, selector: "[hlmSelectPortal]" }, { kind: "component", type: i2.HlmSelectTrigger, selector: "hlm-select-trigger", inputs: ["class", "buttonId", "ariaDescribedby", "wrapperDisabled", "size", "forceInvalid"] }, { kind: "directive", type: i2.HlmSelectValue, selector: "[hlmSelectValue],hlm-select-value" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.HlmBtn, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size", "class", "type"], exportAs: ["hlmBtn"] }], viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCalendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCalendar, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-calendar',
@@ -157,108 +56,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         },
                     ],
                     host: { 'data-slot': 'calendar' },
-                    template: `
-    <div class="inline-flex flex-col gap-4">
-      <!-- Header -->
-      <div class="flex w-full items-center justify-between gap-1.5">
-        <ng-template #month>
-          <hlm-select brnCalendarMonthSelect class="order-1">
-            <hlm-select-trigger size="sm" [class]="_selectClass">
-              <hlm-select-value />
-            </hlm-select-trigger>
-            <hlm-select-content *hlmSelectPortal class="max-h-80">
-              <hlm-select-group>
-                @for (month of _i18n.config().months(); track month) {
-                  <hlm-select-item [value]="month">{{ month }}</hlm-select-item>
-                }
-              </hlm-select-group>
-            </hlm-select-content>
-          </hlm-select>
-        </ng-template>
-        <ng-template #year>
-          <hlm-select brnCalendarYearSelect class="order-3">
-            <hlm-select-trigger size="sm" [class]="_selectClass">
-              <hlm-select-value />
-            </hlm-select-trigger>
-            <hlm-select-content *hlmSelectPortal class="max-h-80">
-              <hlm-select-group>
-                @for (year of _i18n.config().years(); track year) {
-                  <hlm-select-item [value]="year">{{ year }}</hlm-select-item>
-                }
-              </hlm-select-group>
-            </hlm-select-content>
-          </hlm-select>
-        </ng-template>
-        @let heading = _heading();
-
-        <button
-          brnCalendarPreviousButton
-          variant="ghost"
-          hlmBtn
-          class="order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
-        >
-          <ng-icon name="lucideChevronLeft" class="rtl:rotate-180" />
-        </button>
-
-        @switch (captionLayout()) {
-          @case ('dropdown') {
-            <ng-container [ngTemplateOutlet]="month" />
-            <ng-container [ngTemplateOutlet]="year" />
-          }
-          @case ('dropdown-months') {
-            <ng-container [ngTemplateOutlet]="month" />
-            <div brnCalendarHeader class="order-4 text-sm font-medium">{{ heading.year }}</div>
-          }
-          @case ('dropdown-years') {
-            <div brnCalendarHeader class="order-2 text-sm font-medium">{{ heading.month }}</div>
-            <ng-container [ngTemplateOutlet]="year" />
-          }
-          @case ('label') {
-            <div brnCalendarHeader class="order-5 text-sm font-medium">{{ heading.header }}</div>
-          }
-        }
-
-        <button
-          brnCalendarNextButton
-          hlmBtn
-          variant="ghost"
-          class="order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
-        >
-          <ng-icon name="lucideChevronRight" class="rtl:rotate-180" />
-        </button>
-      </div>
-
-      <table class="w-full border-collapse space-y-1" brnCalendarGrid>
-        <thead aria-hidden="true">
-          <tr class="flex">
-            <th
-              *brnCalendarWeekday="let weekday"
-              scope="col"
-              class="text-muted-foreground flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal select-none"
-              [attr.aria-label]="_i18n.config().labelWeekday(weekday)"
-            >
-              {{ _i18n.config().formatWeekdayName(weekday) }}
-            </th>
-          </tr>
-        </thead>
-
-        <tbody role="rowgroup">
-          <tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
-            @for (date of week; track _dateAdapter.getTime(date)) {
-              <td
-                brnCalendarCell
-                class="group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)"
-              >
-                <button brnCalendarCellButton [date]="date" [class]="_btnClass">
-                  {{ _dateAdapter.getDate(date) }}
-                </button>
-              </td>
-            }
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  `,
+                    template: "\n    <div class=\"inline-flex flex-col gap-4\">\n      <!-- Header -->\n      <div class=\"flex w-full items-center justify-between gap-1.5\">\n        <ng-template #month>\n          <hlm-select brnCalendarMonthSelect class=\"order-1\">\n            <hlm-select-trigger size=\"sm\" [class]=\"_selectClass\">\n              <hlm-select-value />\n            </hlm-select-trigger>\n            <hlm-select-content *hlmSelectPortal class=\"max-h-80\">\n              <hlm-select-group>\n                @for (month of _i18n.config().months(); track month) {\n                  <hlm-select-item [value]=\"month\">{{ month }}</hlm-select-item>\n                }\n              </hlm-select-group>\n            </hlm-select-content>\n          </hlm-select>\n        </ng-template>\n        <ng-template #year>\n          <hlm-select brnCalendarYearSelect class=\"order-3\">\n            <hlm-select-trigger size=\"sm\" [class]=\"_selectClass\">\n              <hlm-select-value />\n            </hlm-select-trigger>\n            <hlm-select-content *hlmSelectPortal class=\"max-h-80\">\n              <hlm-select-group>\n                @for (year of _i18n.config().years(); track year) {\n                  <hlm-select-item [value]=\"year\">{{ year }}</hlm-select-item>\n                }\n              </hlm-select-group>\n            </hlm-select-content>\n          </hlm-select>\n        </ng-template>\n        @let heading = _heading();\n\n        <button\n          brnCalendarPreviousButton\n          variant=\"ghost\"\n          hlmBtn\n          class=\"order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n        >\n          <ng-icon name=\"lucideChevronLeft\" class=\"rtl:rotate-180\" />\n        </button>\n\n        @switch (captionLayout()) {\n          @case ('dropdown') {\n            <ng-container [ngTemplateOutlet]=\"month\" />\n            <ng-container [ngTemplateOutlet]=\"year\" />\n          }\n          @case ('dropdown-months') {\n            <ng-container [ngTemplateOutlet]=\"month\" />\n            <div brnCalendarHeader class=\"order-4 text-sm font-medium\">{{ heading.year }}</div>\n          }\n          @case ('dropdown-years') {\n            <div brnCalendarHeader class=\"order-2 text-sm font-medium\">{{ heading.month }}</div>\n            <ng-container [ngTemplateOutlet]=\"year\" />\n          }\n          @case ('label') {\n            <div brnCalendarHeader class=\"order-5 text-sm font-medium\">{{ heading.header }}</div>\n          }\n        }\n\n        <button\n          brnCalendarNextButton\n          hlmBtn\n          variant=\"ghost\"\n          class=\"order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n        >\n          <ng-icon name=\"lucideChevronRight\" class=\"rtl:rotate-180\" />\n        </button>\n      </div>\n\n      <table class=\"w-full border-collapse space-y-1\" brnCalendarGrid>\n        <thead aria-hidden=\"true\">\n          <tr class=\"flex\">\n            <th\n              *brnCalendarWeekday=\"let weekday\"\n              scope=\"col\"\n              class=\"text-muted-foreground flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal select-none\"\n              [attr.aria-label]=\"_i18n.config().labelWeekday(weekday)\"\n            >\n              {{ _i18n.config().formatWeekdayName(weekday) }}\n            </th>\n          </tr>\n        </thead>\n\n        <tbody role=\"rowgroup\">\n          <tr *brnCalendarWeek=\"let week\" class=\"mt-2 flex w-full\">\n            @for (date of week; track _dateAdapter.getTime(date)) {\n              <td\n                brnCalendarCell\n                class=\"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)\"\n              >\n                <button brnCalendarCellButton [date]=\"date\" [class]=\"_btnClass\">\n                  {{ _dateAdapter.getDate(date) }}\n                </button>\n              </td>\n            }\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  ",
                 }]
         }], ctorParameters: () => [], propDecorators: { captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }] } });
 
@@ -283,116 +81,15 @@ class HlmCalendarMulti {
         };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_heading" }] : /* istanbul ignore next */ []));
-    _btnClass = hlm(buttonVariants({ variant: 'ghost', size: 'icon' }), 'data-[today=true]:bg-muted group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:bg-muted/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-e-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-s-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70', 'data-[outside=true]:opacity-50', "data-[highlighted]:before:content-['']", 'data-[highlighted]:before:absolute', 'data-[highlighted]:before:bottom-1', 'data-[highlighted]:before:start-1/2', 'data-[highlighted]:before:h-1', 'data-[highlighted]:before:w-1', 'data-[highlighted]:before:-translate-x-1/2', 'data-[highlighted]:before:rounded-full', 'data-[highlighted]:before:bg-destructive');
+    _btnClass = hlm(buttonVariants({ variant: 'ghost', size: 'icon' }), "data-[today=true]:bg-muted group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:bg-muted/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-e-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-s-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70", "data-[outside=true]:opacity-50", "data-[highlighted]:before:content-['']", "data-[highlighted]:before:absolute", "data-[highlighted]:before:bottom-1", "data-[highlighted]:before:start-1/2", "data-[highlighted]:before:h-1", "data-[highlighted]:before:w-1", "data-[highlighted]:before:-translate-x-1/2", "data-[highlighted]:before:rounded-full", "data-[highlighted]:before:bg-destructive");
     _selectClass = 'gap-0 px-1.5 py-2 [&>ng-icon]:ms-1';
     constructor() {
-        classes(() => 'p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] group/calendar bg-background block in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent');
+        classes(() => "p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] group/calendar bg-background block in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent");
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCalendarMulti, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: HlmCalendarMulti, isStandalone: true, selector: "hlm-calendar-multi", inputs: { captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "calendar" } }, hostDirectives: [{ directive: i1.BrnCalendarMulti, inputs: ["min", "min", "max", "max", "minSelection", "minSelection", "maxSelection", "maxSelection", "disabled", "disabled", "date", "date", "dateDisabled", "dateDisabled", "weekStartsOn", "weekStartsOn", "highlightDays", "highlightDays", "defaultFocusedDate", "defaultFocusedDate"], outputs: ["dateChange", "dateChange"] }], ngImport: i0, template: `
-    <div class="inline-flex flex-col space-y-4">
-      <!-- Header -->
-      <div class="flex w-full items-center justify-between gap-1.5">
-        <ng-template #month>
-          <hlm-select brnCalendarMonthSelect class="order-1">
-            <hlm-select-trigger size="sm" [class]="_selectClass">
-              <hlm-select-value />
-            </hlm-select-trigger>
-            <hlm-select-content *hlmSelectPortal class="max-h-80">
-              <hlm-select-group>
-                @for (month of _i18n.config().months(); track month) {
-                  <hlm-select-item [value]="month">{{ month }}</hlm-select-item>
-                }
-              </hlm-select-group>
-            </hlm-select-content>
-          </hlm-select>
-        </ng-template>
-        <ng-template #year>
-          <hlm-select brnCalendarYearSelect class="order-3">
-            <hlm-select-trigger size="sm" [class]="_selectClass">
-              <hlm-select-value />
-            </hlm-select-trigger>
-            <hlm-select-content *hlmSelectPortal class="max-h-80">
-              <hlm-select-group>
-                @for (year of _i18n.config().years(); track year) {
-                  <hlm-select-item [value]="year">{{ year }}</hlm-select-item>
-                }
-              </hlm-select-group>
-            </hlm-select-content>
-          </hlm-select>
-        </ng-template>
-        @let heading = _heading();
-
-        <button
-          brnCalendarPreviousButton
-          variant="ghost"
-          hlmBtn
-          class="order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
-        >
-          <ng-icon name="lucideChevronLeft" class="rtl:rotate-180" />
-        </button>
-
-        @switch (captionLayout()) {
-          @case ('dropdown') {
-            <ng-container [ngTemplateOutlet]="month" />
-            <ng-container [ngTemplateOutlet]="year" />
-          }
-          @case ('dropdown-months') {
-            <ng-container [ngTemplateOutlet]="month" />
-            <div brnCalendarHeader class="order-4 text-sm font-medium">{{ heading.year }}</div>
-          }
-          @case ('dropdown-years') {
-            <div brnCalendarHeader class="order-2 text-sm font-medium">{{ heading.month }}</div>
-            <ng-container [ngTemplateOutlet]="year" />
-          }
-          @case ('label') {
-            <div brnCalendarHeader class="order-5 text-sm font-medium">{{ heading.header }}</div>
-          }
-        }
-
-        <button
-          brnCalendarNextButton
-          hlmBtn
-          variant="ghost"
-          class="order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
-        >
-          <ng-icon name="lucideChevronRight" class="rtl:rotate-180" />
-        </button>
-      </div>
-
-      <table class="w-full border-collapse" brnCalendarGrid>
-        <thead aria-hidden="true">
-          <tr class="flex">
-            <th
-              *brnCalendarWeekday="let weekday"
-              scope="col"
-              class="text-muted-foreground flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal select-none"
-              [attr.aria-label]="_i18n.config().labelWeekday(weekday)"
-            >
-              {{ _i18n.config().formatWeekdayName(weekday) }}
-            </th>
-          </tr>
-        </thead>
-
-        <tbody role="rowgroup">
-          <tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
-            @for (date of week; track _dateAdapter.getTime(date)) {
-              <td
-                brnCalendarCell
-                class="group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)"
-              >
-                <button brnCalendarCellButton [date]="date" [class]="_btnClass">
-                  {{ _dateAdapter.getDate(date) }}
-                </button>
-              </td>
-            }
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.BrnCalendarCellButton, selector: "button[brnCalendarCellButton]", inputs: ["date"] }, { kind: "directive", type: i1.BrnCalendarGrid, selector: "[brnCalendarGrid]" }, { kind: "directive", type: i1.BrnCalendarHeader, selector: "[brnCalendarHeader]", inputs: ["id"] }, { kind: "directive", type: i1.BrnCalendarNextButton, selector: "[brnCalendarNextButton]" }, { kind: "directive", type: i1.BrnCalendarPreviousButton, selector: "[brnCalendarPreviousButton]" }, { kind: "directive", type: i1.BrnCalendarWeek, selector: "[brnCalendarWeek]" }, { kind: "directive", type: i1.BrnCalendarWeekday, selector: "[brnCalendarWeekday]" }, { kind: "directive", type: i1.BrnCalendarCell, selector: "[brnCalendarCell]" }, { kind: "directive", type: i1.BrnCalendarMonthSelect, selector: "brnSelect[brnCalendarMonthSelect],hlm-select[brnCalendarMonthSelect]" }, { kind: "directive", type: i1.BrnCalendarYearSelect, selector: "brnSelect[brnCalendarYearSelect],hlm-select[brnCalendarYearSelect]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.HlmSelect, selector: "[hlmSelect],hlm-select" }, { kind: "component", type: i2.HlmSelectContent, selector: "hlm-select-content", inputs: ["showScroll"] }, { kind: "directive", type: i2.HlmSelectGroup, selector: "[hlmSelectGroup],hlm-select-group" }, { kind: "component", type: i2.HlmSelectItem, selector: "hlm-select-item" }, { kind: "directive", type: i2.HlmSelectPortal, selector: "[hlmSelectPortal]" }, { kind: "component", type: i2.HlmSelectTrigger, selector: "hlm-select-trigger", inputs: ["class", "buttonId", "size", "forceInvalid"] }, { kind: "directive", type: i2.HlmSelectValue, selector: "[hlmSelectValue],hlm-select-value" }, { kind: "directive", type: i3.HlmBtn, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size", "class", "type"], exportAs: ["hlmBtn"] }], viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCalendarMulti, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmCalendarMulti, isStandalone: true, selector: "hlm-calendar-multi", inputs: { captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "calendar" } }, hostDirectives: [{ directive: i1.BrnCalendarMulti, inputs: ["min", "min", "max", "max", "minSelection", "minSelection", "maxSelection", "maxSelection", "disabled", "disabled", "date", "date", "dateDisabled", "dateDisabled", "weekStartsOn", "weekStartsOn", "highlightDays", "highlightDays", "defaultFocusedDate", "defaultFocusedDate"], outputs: ["dateChange", "dateChange"] }], ngImport: i0, template: "\n    <div class=\"inline-flex flex-col space-y-4\">\n      <!-- Header -->\n      <div class=\"flex w-full items-center justify-between gap-1.5\">\n        <ng-template #month>\n          <hlm-select brnCalendarMonthSelect class=\"order-1\">\n            <hlm-select-trigger size=\"sm\" [class]=\"_selectClass\">\n              <hlm-select-value />\n            </hlm-select-trigger>\n            <hlm-select-content *hlmSelectPortal class=\"max-h-80\">\n              <hlm-select-group>\n                @for (month of _i18n.config().months(); track month) {\n                  <hlm-select-item [value]=\"month\">{{ month }}</hlm-select-item>\n                }\n              </hlm-select-group>\n            </hlm-select-content>\n          </hlm-select>\n        </ng-template>\n        <ng-template #year>\n          <hlm-select brnCalendarYearSelect class=\"order-3\">\n            <hlm-select-trigger size=\"sm\" [class]=\"_selectClass\">\n              <hlm-select-value />\n            </hlm-select-trigger>\n            <hlm-select-content *hlmSelectPortal class=\"max-h-80\">\n              <hlm-select-group>\n                @for (year of _i18n.config().years(); track year) {\n                  <hlm-select-item [value]=\"year\">{{ year }}</hlm-select-item>\n                }\n              </hlm-select-group>\n            </hlm-select-content>\n          </hlm-select>\n        </ng-template>\n        @let heading = _heading();\n\n        <button\n          brnCalendarPreviousButton\n          variant=\"ghost\"\n          hlmBtn\n          class=\"order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n        >\n          <ng-icon name=\"lucideChevronLeft\" class=\"rtl:rotate-180\" />\n        </button>\n\n        @switch (captionLayout()) {\n          @case ('dropdown') {\n            <ng-container [ngTemplateOutlet]=\"month\" />\n            <ng-container [ngTemplateOutlet]=\"year\" />\n          }\n          @case ('dropdown-months') {\n            <ng-container [ngTemplateOutlet]=\"month\" />\n            <div brnCalendarHeader class=\"order-4 text-sm font-medium\">{{ heading.year }}</div>\n          }\n          @case ('dropdown-years') {\n            <div brnCalendarHeader class=\"order-2 text-sm font-medium\">{{ heading.month }}</div>\n            <ng-container [ngTemplateOutlet]=\"year\" />\n          }\n          @case ('label') {\n            <div brnCalendarHeader class=\"order-5 text-sm font-medium\">{{ heading.header }}</div>\n          }\n        }\n\n        <button\n          brnCalendarNextButton\n          hlmBtn\n          variant=\"ghost\"\n          class=\"order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n        >\n          <ng-icon name=\"lucideChevronRight\" class=\"rtl:rotate-180\" />\n        </button>\n      </div>\n\n      <table class=\"w-full border-collapse\" brnCalendarGrid>\n        <thead aria-hidden=\"true\">\n          <tr class=\"flex\">\n            <th\n              *brnCalendarWeekday=\"let weekday\"\n              scope=\"col\"\n              class=\"text-muted-foreground flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal select-none\"\n              [attr.aria-label]=\"_i18n.config().labelWeekday(weekday)\"\n            >\n              {{ _i18n.config().formatWeekdayName(weekday) }}\n            </th>\n          </tr>\n        </thead>\n\n        <tbody role=\"rowgroup\">\n          <tr *brnCalendarWeek=\"let week\" class=\"mt-2 flex w-full\">\n            @for (date of week; track _dateAdapter.getTime(date)) {\n              <td\n                brnCalendarCell\n                class=\"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)\"\n              >\n                <button brnCalendarCellButton [date]=\"date\" [class]=\"_btnClass\">\n                  {{ _dateAdapter.getDate(date) }}\n                </button>\n              </td>\n            }\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  ", isInline: true, dependencies: [{ kind: "directive", type: i1.BrnCalendarCellButton, selector: "button[brnCalendarCellButton]", inputs: ["date"] }, { kind: "directive", type: i1.BrnCalendarGrid, selector: "[brnCalendarGrid]" }, { kind: "directive", type: i1.BrnCalendarHeader, selector: "[brnCalendarHeader]", inputs: ["id"] }, { kind: "directive", type: i1.BrnCalendarNextButton, selector: "[brnCalendarNextButton]" }, { kind: "directive", type: i1.BrnCalendarPreviousButton, selector: "[brnCalendarPreviousButton]" }, { kind: "directive", type: i1.BrnCalendarWeek, selector: "[brnCalendarWeek]" }, { kind: "directive", type: i1.BrnCalendarWeekday, selector: "[brnCalendarWeekday]" }, { kind: "directive", type: i1.BrnCalendarCell, selector: "[brnCalendarCell]" }, { kind: "directive", type: i1.BrnCalendarMonthSelect, selector: "brnSelect[brnCalendarMonthSelect],hlm-select[brnCalendarMonthSelect]" }, { kind: "directive", type: i1.BrnCalendarYearSelect, selector: "brnSelect[brnCalendarYearSelect],hlm-select[brnCalendarYearSelect]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.HlmSelect, selector: "[hlmSelect],hlm-select" }, { kind: "component", type: i2.HlmSelectContent, selector: "hlm-select-content", inputs: ["showScroll"] }, { kind: "directive", type: i2.HlmSelectGroup, selector: "[hlmSelectGroup],hlm-select-group" }, { kind: "component", type: i2.HlmSelectItem, selector: "hlm-select-item" }, { kind: "directive", type: i2.HlmSelectPortal, selector: "[hlmSelectPortal]" }, { kind: "component", type: i2.HlmSelectTrigger, selector: "hlm-select-trigger", inputs: ["class", "buttonId", "ariaDescribedby", "wrapperDisabled", "size", "forceInvalid"] }, { kind: "directive", type: i2.HlmSelectValue, selector: "[hlmSelectValue],hlm-select-value" }, { kind: "directive", type: i3.HlmBtn, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size", "class", "type"], exportAs: ["hlmBtn"] }], viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCalendarMulti, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCalendarMulti, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-calendar-multi',
@@ -418,108 +115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         },
                     ],
                     host: { 'data-slot': 'calendar' },
-                    template: `
-    <div class="inline-flex flex-col space-y-4">
-      <!-- Header -->
-      <div class="flex w-full items-center justify-between gap-1.5">
-        <ng-template #month>
-          <hlm-select brnCalendarMonthSelect class="order-1">
-            <hlm-select-trigger size="sm" [class]="_selectClass">
-              <hlm-select-value />
-            </hlm-select-trigger>
-            <hlm-select-content *hlmSelectPortal class="max-h-80">
-              <hlm-select-group>
-                @for (month of _i18n.config().months(); track month) {
-                  <hlm-select-item [value]="month">{{ month }}</hlm-select-item>
-                }
-              </hlm-select-group>
-            </hlm-select-content>
-          </hlm-select>
-        </ng-template>
-        <ng-template #year>
-          <hlm-select brnCalendarYearSelect class="order-3">
-            <hlm-select-trigger size="sm" [class]="_selectClass">
-              <hlm-select-value />
-            </hlm-select-trigger>
-            <hlm-select-content *hlmSelectPortal class="max-h-80">
-              <hlm-select-group>
-                @for (year of _i18n.config().years(); track year) {
-                  <hlm-select-item [value]="year">{{ year }}</hlm-select-item>
-                }
-              </hlm-select-group>
-            </hlm-select-content>
-          </hlm-select>
-        </ng-template>
-        @let heading = _heading();
-
-        <button
-          brnCalendarPreviousButton
-          variant="ghost"
-          hlmBtn
-          class="order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
-        >
-          <ng-icon name="lucideChevronLeft" class="rtl:rotate-180" />
-        </button>
-
-        @switch (captionLayout()) {
-          @case ('dropdown') {
-            <ng-container [ngTemplateOutlet]="month" />
-            <ng-container [ngTemplateOutlet]="year" />
-          }
-          @case ('dropdown-months') {
-            <ng-container [ngTemplateOutlet]="month" />
-            <div brnCalendarHeader class="order-4 text-sm font-medium">{{ heading.year }}</div>
-          }
-          @case ('dropdown-years') {
-            <div brnCalendarHeader class="order-2 text-sm font-medium">{{ heading.month }}</div>
-            <ng-container [ngTemplateOutlet]="year" />
-          }
-          @case ('label') {
-            <div brnCalendarHeader class="order-5 text-sm font-medium">{{ heading.header }}</div>
-          }
-        }
-
-        <button
-          brnCalendarNextButton
-          hlmBtn
-          variant="ghost"
-          class="order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
-        >
-          <ng-icon name="lucideChevronRight" class="rtl:rotate-180" />
-        </button>
-      </div>
-
-      <table class="w-full border-collapse" brnCalendarGrid>
-        <thead aria-hidden="true">
-          <tr class="flex">
-            <th
-              *brnCalendarWeekday="let weekday"
-              scope="col"
-              class="text-muted-foreground flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal select-none"
-              [attr.aria-label]="_i18n.config().labelWeekday(weekday)"
-            >
-              {{ _i18n.config().formatWeekdayName(weekday) }}
-            </th>
-          </tr>
-        </thead>
-
-        <tbody role="rowgroup">
-          <tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
-            @for (date of week; track _dateAdapter.getTime(date)) {
-              <td
-                brnCalendarCell
-                class="group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)"
-              >
-                <button brnCalendarCellButton [date]="date" [class]="_btnClass">
-                  {{ _dateAdapter.getDate(date) }}
-                </button>
-              </td>
-            }
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  `,
+                    template: "\n    <div class=\"inline-flex flex-col space-y-4\">\n      <!-- Header -->\n      <div class=\"flex w-full items-center justify-between gap-1.5\">\n        <ng-template #month>\n          <hlm-select brnCalendarMonthSelect class=\"order-1\">\n            <hlm-select-trigger size=\"sm\" [class]=\"_selectClass\">\n              <hlm-select-value />\n            </hlm-select-trigger>\n            <hlm-select-content *hlmSelectPortal class=\"max-h-80\">\n              <hlm-select-group>\n                @for (month of _i18n.config().months(); track month) {\n                  <hlm-select-item [value]=\"month\">{{ month }}</hlm-select-item>\n                }\n              </hlm-select-group>\n            </hlm-select-content>\n          </hlm-select>\n        </ng-template>\n        <ng-template #year>\n          <hlm-select brnCalendarYearSelect class=\"order-3\">\n            <hlm-select-trigger size=\"sm\" [class]=\"_selectClass\">\n              <hlm-select-value />\n            </hlm-select-trigger>\n            <hlm-select-content *hlmSelectPortal class=\"max-h-80\">\n              <hlm-select-group>\n                @for (year of _i18n.config().years(); track year) {\n                  <hlm-select-item [value]=\"year\">{{ year }}</hlm-select-item>\n                }\n              </hlm-select-group>\n            </hlm-select-content>\n          </hlm-select>\n        </ng-template>\n        @let heading = _heading();\n\n        <button\n          brnCalendarPreviousButton\n          variant=\"ghost\"\n          hlmBtn\n          class=\"order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n        >\n          <ng-icon name=\"lucideChevronLeft\" class=\"rtl:rotate-180\" />\n        </button>\n\n        @switch (captionLayout()) {\n          @case ('dropdown') {\n            <ng-container [ngTemplateOutlet]=\"month\" />\n            <ng-container [ngTemplateOutlet]=\"year\" />\n          }\n          @case ('dropdown-months') {\n            <ng-container [ngTemplateOutlet]=\"month\" />\n            <div brnCalendarHeader class=\"order-4 text-sm font-medium\">{{ heading.year }}</div>\n          }\n          @case ('dropdown-years') {\n            <div brnCalendarHeader class=\"order-2 text-sm font-medium\">{{ heading.month }}</div>\n            <ng-container [ngTemplateOutlet]=\"year\" />\n          }\n          @case ('label') {\n            <div brnCalendarHeader class=\"order-5 text-sm font-medium\">{{ heading.header }}</div>\n          }\n        }\n\n        <button\n          brnCalendarNextButton\n          hlmBtn\n          variant=\"ghost\"\n          class=\"order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n        >\n          <ng-icon name=\"lucideChevronRight\" class=\"rtl:rotate-180\" />\n        </button>\n      </div>\n\n      <table class=\"w-full border-collapse\" brnCalendarGrid>\n        <thead aria-hidden=\"true\">\n          <tr class=\"flex\">\n            <th\n              *brnCalendarWeekday=\"let weekday\"\n              scope=\"col\"\n              class=\"text-muted-foreground flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal select-none\"\n              [attr.aria-label]=\"_i18n.config().labelWeekday(weekday)\"\n            >\n              {{ _i18n.config().formatWeekdayName(weekday) }}\n            </th>\n          </tr>\n        </thead>\n\n        <tbody role=\"rowgroup\">\n          <tr *brnCalendarWeek=\"let week\" class=\"mt-2 flex w-full\">\n            @for (date of week; track _dateAdapter.getTime(date)) {\n              <td\n                brnCalendarCell\n                class=\"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)\"\n              >\n                <button brnCalendarCellButton [date]=\"date\" [class]=\"_btnClass\">\n                  {{ _dateAdapter.getDate(date) }}\n                </button>\n              </td>\n            }\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  ",
                 }]
         }], ctorParameters: () => [], propDecorators: { captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }] } });
 
@@ -544,116 +140,15 @@ class HlmCalendarRange {
         };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_heading" }] : /* istanbul ignore next */ []));
-    _btnClass = hlm(buttonVariants({ variant: 'ghost', size: 'icon' }), 'data-[today=true]:bg-muted group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:bg-muted/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-e-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-s-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70', 'data-[outside=true]:opacity-50', "data-[highlighted]:before:content-['']", 'data-[highlighted]:before:absolute', 'data-[highlighted]:before:bottom-1', 'data-[highlighted]:before:start-1/2', 'data-[highlighted]:before:h-1', 'data-[highlighted]:before:w-1', 'data-[highlighted]:before:-translate-x-1/2', 'data-[highlighted]:before:rounded-full', 'data-[highlighted]:before:bg-destructive');
+    _btnClass = hlm(buttonVariants({ variant: 'ghost', size: 'icon' }), "data-[today=true]:bg-muted group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:bg-muted/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-e-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-s-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70", "data-[outside=true]:opacity-50", "data-[highlighted]:before:content-['']", "data-[highlighted]:before:absolute", "data-[highlighted]:before:bottom-1", "data-[highlighted]:before:start-1/2", "data-[highlighted]:before:h-1", "data-[highlighted]:before:w-1", "data-[highlighted]:before:-translate-x-1/2", "data-[highlighted]:before:rounded-full", "data-[highlighted]:before:bg-destructive");
     _selectClass = 'gap-0 px-1.5 py-2 [&>ng-icon]:ms-1';
     constructor() {
-        classes(() => 'p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] group/calendar bg-background block in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent');
+        classes(() => "p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] group/calendar bg-background block in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent");
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCalendarRange, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: HlmCalendarRange, isStandalone: true, selector: "hlm-calendar-range", inputs: { captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "calendar" } }, hostDirectives: [{ directive: i1.BrnCalendarRange, inputs: ["min", "min", "max", "max", "disabled", "disabled", "startDate", "startDate", "endDate", "endDate", "dateDisabled", "dateDisabled", "weekStartsOn", "weekStartsOn", "highlightDays", "highlightDays", "defaultFocusedDate", "defaultFocusedDate"], outputs: ["endDateChange", "endDateChange", "startDateChange", "startDateChange"] }], ngImport: i0, template: `
-    <div class="inline-flex flex-col space-y-4">
-      <!-- Header -->
-      <div class="flex w-full items-center justify-between gap-1.5">
-        <ng-template #month>
-          <hlm-select brnCalendarMonthSelect class="order-1">
-            <hlm-select-trigger size="sm" [class]="_selectClass">
-              <hlm-select-value />
-            </hlm-select-trigger>
-            <hlm-select-content *hlmSelectPortal class="max-h-80">
-              <hlm-select-group>
-                @for (month of _i18n.config().months(); track month) {
-                  <hlm-select-item [value]="month">{{ month }}</hlm-select-item>
-                }
-              </hlm-select-group>
-            </hlm-select-content>
-          </hlm-select>
-        </ng-template>
-        <ng-template #year>
-          <hlm-select brnCalendarYearSelect class="order-3">
-            <hlm-select-trigger size="sm" [class]="_selectClass">
-              <hlm-select-value />
-            </hlm-select-trigger>
-            <hlm-select-content *hlmSelectPortal class="max-h-80">
-              <hlm-select-group>
-                @for (year of _i18n.config().years(); track year) {
-                  <hlm-select-item [value]="year">{{ year }}</hlm-select-item>
-                }
-              </hlm-select-group>
-            </hlm-select-content>
-          </hlm-select>
-        </ng-template>
-        @let heading = _heading();
-
-        <button
-          brnCalendarPreviousButton
-          variant="ghost"
-          hlmBtn
-          class="order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
-        >
-          <ng-icon name="lucideChevronLeft" class="rtl:rotate-180" />
-        </button>
-
-        @switch (captionLayout()) {
-          @case ('dropdown') {
-            <ng-container [ngTemplateOutlet]="month" />
-            <ng-container [ngTemplateOutlet]="year" />
-          }
-          @case ('dropdown-months') {
-            <ng-container [ngTemplateOutlet]="month" />
-            <div brnCalendarHeader class="order-4 text-sm font-medium">{{ heading.year }}</div>
-          }
-          @case ('dropdown-years') {
-            <div brnCalendarHeader class="order-2 text-sm font-medium">{{ heading.month }}</div>
-            <ng-container [ngTemplateOutlet]="year" />
-          }
-          @case ('label') {
-            <div brnCalendarHeader class="order-5 text-sm font-medium">{{ heading.header }}</div>
-          }
-        }
-
-        <button
-          brnCalendarNextButton
-          hlmBtn
-          variant="ghost"
-          class="order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
-        >
-          <ng-icon name="lucideChevronRight" class="rtl:rotate-180" />
-        </button>
-      </div>
-
-      <table class="w-full border-collapse space-y-1" brnCalendarGrid>
-        <thead aria-hidden="true">
-          <tr class="flex">
-            <th
-              *brnCalendarWeekday="let weekday"
-              scope="col"
-              class="text-muted-foreground flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal select-none"
-              [attr.aria-label]="_i18n.config().labelWeekday(weekday)"
-            >
-              {{ _i18n.config().formatWeekdayName(weekday) }}
-            </th>
-          </tr>
-        </thead>
-
-        <tbody role="rowgroup">
-          <tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
-            @for (date of week; track _dateAdapter.getTime(date)) {
-              <td
-                brnCalendarCell
-                class="group/day has-[button[data-range-start=true]]:bg-muted has-[button[data-range-start=true]]:after:bg-muted has-[button[data-range-end=true]]:bg-muted has-[button[data-range-end=true]]:after:bg-muted relative isolate z-0 aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none has-[button[data-range-end=true]]:rounded-e-(--cell-radius) has-[button[data-range-end=true]]:after:absolute has-[button[data-range-end=true]]:after:inset-y-0 has-[button[data-range-end=true]]:after:start-0 has-[button[data-range-end=true]]:after:w-4 has-[button[data-range-start=true]]:rounded-s-(--cell-radius) has-[button[data-range-start=true]]:after:absolute has-[button[data-range-start=true]]:after:inset-y-0 has-[button[data-range-start=true]]:after:end-0 has-[button[data-range-start=true]]:after:w-4 [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)"
-              >
-                <button brnCalendarCellButton [date]="date" [class]="_btnClass">
-                  {{ _dateAdapter.getDate(date) }}
-                </button>
-              </td>
-            }
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.BrnCalendarCellButton, selector: "button[brnCalendarCellButton]", inputs: ["date"] }, { kind: "directive", type: i1.BrnCalendarGrid, selector: "[brnCalendarGrid]" }, { kind: "directive", type: i1.BrnCalendarHeader, selector: "[brnCalendarHeader]", inputs: ["id"] }, { kind: "directive", type: i1.BrnCalendarNextButton, selector: "[brnCalendarNextButton]" }, { kind: "directive", type: i1.BrnCalendarPreviousButton, selector: "[brnCalendarPreviousButton]" }, { kind: "directive", type: i1.BrnCalendarWeek, selector: "[brnCalendarWeek]" }, { kind: "directive", type: i1.BrnCalendarWeekday, selector: "[brnCalendarWeekday]" }, { kind: "directive", type: i1.BrnCalendarCell, selector: "[brnCalendarCell]" }, { kind: "directive", type: i1.BrnCalendarMonthSelect, selector: "brnSelect[brnCalendarMonthSelect],hlm-select[brnCalendarMonthSelect]" }, { kind: "directive", type: i1.BrnCalendarYearSelect, selector: "brnSelect[brnCalendarYearSelect],hlm-select[brnCalendarYearSelect]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: i2.HlmSelect, selector: "[hlmSelect],hlm-select" }, { kind: "component", type: i2.HlmSelectContent, selector: "hlm-select-content", inputs: ["showScroll"] }, { kind: "directive", type: i2.HlmSelectGroup, selector: "[hlmSelectGroup],hlm-select-group" }, { kind: "component", type: i2.HlmSelectItem, selector: "hlm-select-item" }, { kind: "directive", type: i2.HlmSelectPortal, selector: "[hlmSelectPortal]" }, { kind: "component", type: i2.HlmSelectTrigger, selector: "hlm-select-trigger", inputs: ["class", "buttonId", "size", "forceInvalid"] }, { kind: "directive", type: i2.HlmSelectValue, selector: "[hlmSelectValue],hlm-select-value" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.HlmBtn, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size", "class", "type"], exportAs: ["hlmBtn"] }], viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCalendarRange, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmCalendarRange, isStandalone: true, selector: "hlm-calendar-range", inputs: { captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "calendar" } }, hostDirectives: [{ directive: i1.BrnCalendarRange, inputs: ["min", "min", "max", "max", "disabled", "disabled", "startDate", "startDate", "endDate", "endDate", "dateDisabled", "dateDisabled", "weekStartsOn", "weekStartsOn", "highlightDays", "highlightDays", "defaultFocusedDate", "defaultFocusedDate"], outputs: ["endDateChange", "endDateChange", "startDateChange", "startDateChange"] }], ngImport: i0, template: "\n    <div class=\"inline-flex flex-col space-y-4\">\n      <!-- Header -->\n      <div class=\"flex w-full items-center justify-between gap-1.5\">\n        <ng-template #month>\n          <hlm-select brnCalendarMonthSelect class=\"order-1\">\n            <hlm-select-trigger size=\"sm\" [class]=\"_selectClass\">\n              <hlm-select-value />\n            </hlm-select-trigger>\n            <hlm-select-content *hlmSelectPortal class=\"max-h-80\">\n              <hlm-select-group>\n                @for (month of _i18n.config().months(); track month) {\n                  <hlm-select-item [value]=\"month\">{{ month }}</hlm-select-item>\n                }\n              </hlm-select-group>\n            </hlm-select-content>\n          </hlm-select>\n        </ng-template>\n        <ng-template #year>\n          <hlm-select brnCalendarYearSelect class=\"order-3\">\n            <hlm-select-trigger size=\"sm\" [class]=\"_selectClass\">\n              <hlm-select-value />\n            </hlm-select-trigger>\n            <hlm-select-content *hlmSelectPortal class=\"max-h-80\">\n              <hlm-select-group>\n                @for (year of _i18n.config().years(); track year) {\n                  <hlm-select-item [value]=\"year\">{{ year }}</hlm-select-item>\n                }\n              </hlm-select-group>\n            </hlm-select-content>\n          </hlm-select>\n        </ng-template>\n        @let heading = _heading();\n\n        <button\n          brnCalendarPreviousButton\n          variant=\"ghost\"\n          hlmBtn\n          class=\"order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n        >\n          <ng-icon name=\"lucideChevronLeft\" class=\"rtl:rotate-180\" />\n        </button>\n\n        @switch (captionLayout()) {\n          @case ('dropdown') {\n            <ng-container [ngTemplateOutlet]=\"month\" />\n            <ng-container [ngTemplateOutlet]=\"year\" />\n          }\n          @case ('dropdown-months') {\n            <ng-container [ngTemplateOutlet]=\"month\" />\n            <div brnCalendarHeader class=\"order-4 text-sm font-medium\">{{ heading.year }}</div>\n          }\n          @case ('dropdown-years') {\n            <div brnCalendarHeader class=\"order-2 text-sm font-medium\">{{ heading.month }}</div>\n            <ng-container [ngTemplateOutlet]=\"year\" />\n          }\n          @case ('label') {\n            <div brnCalendarHeader class=\"order-5 text-sm font-medium\">{{ heading.header }}</div>\n          }\n        }\n\n        <button\n          brnCalendarNextButton\n          hlmBtn\n          variant=\"ghost\"\n          class=\"order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n        >\n          <ng-icon name=\"lucideChevronRight\" class=\"rtl:rotate-180\" />\n        </button>\n      </div>\n\n      <table class=\"w-full border-collapse space-y-1\" brnCalendarGrid>\n        <thead aria-hidden=\"true\">\n          <tr class=\"flex\">\n            <th\n              *brnCalendarWeekday=\"let weekday\"\n              scope=\"col\"\n              class=\"text-muted-foreground flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal select-none\"\n              [attr.aria-label]=\"_i18n.config().labelWeekday(weekday)\"\n            >\n              {{ _i18n.config().formatWeekdayName(weekday) }}\n            </th>\n          </tr>\n        </thead>\n\n        <tbody role=\"rowgroup\">\n          <tr *brnCalendarWeek=\"let week\" class=\"mt-2 flex w-full\">\n            @for (date of week; track _dateAdapter.getTime(date)) {\n              <td\n                brnCalendarCell\n                class=\"group/day has-[button[data-range-start=true]]:bg-muted has-[button[data-range-start=true]]:after:bg-muted has-[button[data-range-end=true]]:bg-muted has-[button[data-range-end=true]]:after:bg-muted relative isolate z-0 aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none has-[button[data-range-end=true]]:rounded-e-(--cell-radius) has-[button[data-range-end=true]]:after:absolute has-[button[data-range-end=true]]:after:inset-y-0 has-[button[data-range-end=true]]:after:start-0 has-[button[data-range-end=true]]:after:w-4 has-[button[data-range-start=true]]:rounded-s-(--cell-radius) has-[button[data-range-start=true]]:after:absolute has-[button[data-range-start=true]]:after:inset-y-0 has-[button[data-range-start=true]]:after:end-0 has-[button[data-range-start=true]]:after:w-4 [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)\"\n              >\n                <button brnCalendarCellButton [date]=\"date\" [class]=\"_btnClass\">\n                  {{ _dateAdapter.getDate(date) }}\n                </button>\n              </td>\n            }\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  ", isInline: true, dependencies: [{ kind: "directive", type: i1.BrnCalendarCellButton, selector: "button[brnCalendarCellButton]", inputs: ["date"] }, { kind: "directive", type: i1.BrnCalendarGrid, selector: "[brnCalendarGrid]" }, { kind: "directive", type: i1.BrnCalendarHeader, selector: "[brnCalendarHeader]", inputs: ["id"] }, { kind: "directive", type: i1.BrnCalendarNextButton, selector: "[brnCalendarNextButton]" }, { kind: "directive", type: i1.BrnCalendarPreviousButton, selector: "[brnCalendarPreviousButton]" }, { kind: "directive", type: i1.BrnCalendarWeek, selector: "[brnCalendarWeek]" }, { kind: "directive", type: i1.BrnCalendarWeekday, selector: "[brnCalendarWeekday]" }, { kind: "directive", type: i1.BrnCalendarCell, selector: "[brnCalendarCell]" }, { kind: "directive", type: i1.BrnCalendarMonthSelect, selector: "brnSelect[brnCalendarMonthSelect],hlm-select[brnCalendarMonthSelect]" }, { kind: "directive", type: i1.BrnCalendarYearSelect, selector: "brnSelect[brnCalendarYearSelect],hlm-select[brnCalendarYearSelect]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: i2.HlmSelect, selector: "[hlmSelect],hlm-select" }, { kind: "component", type: i2.HlmSelectContent, selector: "hlm-select-content", inputs: ["showScroll"] }, { kind: "directive", type: i2.HlmSelectGroup, selector: "[hlmSelectGroup],hlm-select-group" }, { kind: "component", type: i2.HlmSelectItem, selector: "hlm-select-item" }, { kind: "directive", type: i2.HlmSelectPortal, selector: "[hlmSelectPortal]" }, { kind: "component", type: i2.HlmSelectTrigger, selector: "hlm-select-trigger", inputs: ["class", "buttonId", "ariaDescribedby", "wrapperDisabled", "size", "forceInvalid"] }, { kind: "directive", type: i2.HlmSelectValue, selector: "[hlmSelectValue],hlm-select-value" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.HlmBtn, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size", "class", "type"], exportAs: ["hlmBtn"] }], viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCalendarRange, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCalendarRange, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-calendar-range',
@@ -678,108 +173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         },
                     ],
                     host: { 'data-slot': 'calendar' },
-                    template: `
-    <div class="inline-flex flex-col space-y-4">
-      <!-- Header -->
-      <div class="flex w-full items-center justify-between gap-1.5">
-        <ng-template #month>
-          <hlm-select brnCalendarMonthSelect class="order-1">
-            <hlm-select-trigger size="sm" [class]="_selectClass">
-              <hlm-select-value />
-            </hlm-select-trigger>
-            <hlm-select-content *hlmSelectPortal class="max-h-80">
-              <hlm-select-group>
-                @for (month of _i18n.config().months(); track month) {
-                  <hlm-select-item [value]="month">{{ month }}</hlm-select-item>
-                }
-              </hlm-select-group>
-            </hlm-select-content>
-          </hlm-select>
-        </ng-template>
-        <ng-template #year>
-          <hlm-select brnCalendarYearSelect class="order-3">
-            <hlm-select-trigger size="sm" [class]="_selectClass">
-              <hlm-select-value />
-            </hlm-select-trigger>
-            <hlm-select-content *hlmSelectPortal class="max-h-80">
-              <hlm-select-group>
-                @for (year of _i18n.config().years(); track year) {
-                  <hlm-select-item [value]="year">{{ year }}</hlm-select-item>
-                }
-              </hlm-select-group>
-            </hlm-select-content>
-          </hlm-select>
-        </ng-template>
-        @let heading = _heading();
-
-        <button
-          brnCalendarPreviousButton
-          variant="ghost"
-          hlmBtn
-          class="order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
-        >
-          <ng-icon name="lucideChevronLeft" class="rtl:rotate-180" />
-        </button>
-
-        @switch (captionLayout()) {
-          @case ('dropdown') {
-            <ng-container [ngTemplateOutlet]="month" />
-            <ng-container [ngTemplateOutlet]="year" />
-          }
-          @case ('dropdown-months') {
-            <ng-container [ngTemplateOutlet]="month" />
-            <div brnCalendarHeader class="order-4 text-sm font-medium">{{ heading.year }}</div>
-          }
-          @case ('dropdown-years') {
-            <div brnCalendarHeader class="order-2 text-sm font-medium">{{ heading.month }}</div>
-            <ng-container [ngTemplateOutlet]="year" />
-          }
-          @case ('label') {
-            <div brnCalendarHeader class="order-5 text-sm font-medium">{{ heading.header }}</div>
-          }
-        }
-
-        <button
-          brnCalendarNextButton
-          hlmBtn
-          variant="ghost"
-          class="order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
-        >
-          <ng-icon name="lucideChevronRight" class="rtl:rotate-180" />
-        </button>
-      </div>
-
-      <table class="w-full border-collapse space-y-1" brnCalendarGrid>
-        <thead aria-hidden="true">
-          <tr class="flex">
-            <th
-              *brnCalendarWeekday="let weekday"
-              scope="col"
-              class="text-muted-foreground flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal select-none"
-              [attr.aria-label]="_i18n.config().labelWeekday(weekday)"
-            >
-              {{ _i18n.config().formatWeekdayName(weekday) }}
-            </th>
-          </tr>
-        </thead>
-
-        <tbody role="rowgroup">
-          <tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
-            @for (date of week; track _dateAdapter.getTime(date)) {
-              <td
-                brnCalendarCell
-                class="group/day has-[button[data-range-start=true]]:bg-muted has-[button[data-range-start=true]]:after:bg-muted has-[button[data-range-end=true]]:bg-muted has-[button[data-range-end=true]]:after:bg-muted relative isolate z-0 aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none has-[button[data-range-end=true]]:rounded-e-(--cell-radius) has-[button[data-range-end=true]]:after:absolute has-[button[data-range-end=true]]:after:inset-y-0 has-[button[data-range-end=true]]:after:start-0 has-[button[data-range-end=true]]:after:w-4 has-[button[data-range-start=true]]:rounded-s-(--cell-radius) has-[button[data-range-start=true]]:after:absolute has-[button[data-range-start=true]]:after:inset-y-0 has-[button[data-range-start=true]]:after:end-0 has-[button[data-range-start=true]]:after:w-4 [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)"
-              >
-                <button brnCalendarCellButton [date]="date" [class]="_btnClass">
-                  {{ _dateAdapter.getDate(date) }}
-                </button>
-              </td>
-            }
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  `,
+                    template: "\n    <div class=\"inline-flex flex-col space-y-4\">\n      <!-- Header -->\n      <div class=\"flex w-full items-center justify-between gap-1.5\">\n        <ng-template #month>\n          <hlm-select brnCalendarMonthSelect class=\"order-1\">\n            <hlm-select-trigger size=\"sm\" [class]=\"_selectClass\">\n              <hlm-select-value />\n            </hlm-select-trigger>\n            <hlm-select-content *hlmSelectPortal class=\"max-h-80\">\n              <hlm-select-group>\n                @for (month of _i18n.config().months(); track month) {\n                  <hlm-select-item [value]=\"month\">{{ month }}</hlm-select-item>\n                }\n              </hlm-select-group>\n            </hlm-select-content>\n          </hlm-select>\n        </ng-template>\n        <ng-template #year>\n          <hlm-select brnCalendarYearSelect class=\"order-3\">\n            <hlm-select-trigger size=\"sm\" [class]=\"_selectClass\">\n              <hlm-select-value />\n            </hlm-select-trigger>\n            <hlm-select-content *hlmSelectPortal class=\"max-h-80\">\n              <hlm-select-group>\n                @for (year of _i18n.config().years(); track year) {\n                  <hlm-select-item [value]=\"year\">{{ year }}</hlm-select-item>\n                }\n              </hlm-select-group>\n            </hlm-select-content>\n          </hlm-select>\n        </ng-template>\n        @let heading = _heading();\n\n        <button\n          brnCalendarPreviousButton\n          variant=\"ghost\"\n          hlmBtn\n          class=\"order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n        >\n          <ng-icon name=\"lucideChevronLeft\" class=\"rtl:rotate-180\" />\n        </button>\n\n        @switch (captionLayout()) {\n          @case ('dropdown') {\n            <ng-container [ngTemplateOutlet]=\"month\" />\n            <ng-container [ngTemplateOutlet]=\"year\" />\n          }\n          @case ('dropdown-months') {\n            <ng-container [ngTemplateOutlet]=\"month\" />\n            <div brnCalendarHeader class=\"order-4 text-sm font-medium\">{{ heading.year }}</div>\n          }\n          @case ('dropdown-years') {\n            <div brnCalendarHeader class=\"order-2 text-sm font-medium\">{{ heading.month }}</div>\n            <ng-container [ngTemplateOutlet]=\"year\" />\n          }\n          @case ('label') {\n            <div brnCalendarHeader class=\"order-5 text-sm font-medium\">{{ heading.header }}</div>\n          }\n        }\n\n        <button\n          brnCalendarNextButton\n          hlmBtn\n          variant=\"ghost\"\n          class=\"order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n        >\n          <ng-icon name=\"lucideChevronRight\" class=\"rtl:rotate-180\" />\n        </button>\n      </div>\n\n      <table class=\"w-full border-collapse space-y-1\" brnCalendarGrid>\n        <thead aria-hidden=\"true\">\n          <tr class=\"flex\">\n            <th\n              *brnCalendarWeekday=\"let weekday\"\n              scope=\"col\"\n              class=\"text-muted-foreground flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal select-none\"\n              [attr.aria-label]=\"_i18n.config().labelWeekday(weekday)\"\n            >\n              {{ _i18n.config().formatWeekdayName(weekday) }}\n            </th>\n          </tr>\n        </thead>\n\n        <tbody role=\"rowgroup\">\n          <tr *brnCalendarWeek=\"let week\" class=\"mt-2 flex w-full\">\n            @for (date of week; track _dateAdapter.getTime(date)) {\n              <td\n                brnCalendarCell\n                class=\"group/day has-[button[data-range-start=true]]:bg-muted has-[button[data-range-start=true]]:after:bg-muted has-[button[data-range-end=true]]:bg-muted has-[button[data-range-end=true]]:after:bg-muted relative isolate z-0 aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none has-[button[data-range-end=true]]:rounded-e-(--cell-radius) has-[button[data-range-end=true]]:after:absolute has-[button[data-range-end=true]]:after:inset-y-0 has-[button[data-range-end=true]]:after:start-0 has-[button[data-range-end=true]]:after:w-4 has-[button[data-range-start=true]]:rounded-s-(--cell-radius) has-[button[data-range-start=true]]:after:absolute has-[button[data-range-start=true]]:after:inset-y-0 has-[button[data-range-start=true]]:after:end-0 has-[button[data-range-start=true]]:after:w-4 [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)\"\n              >\n                <button brnCalendarCellButton [date]=\"date\" [class]=\"_btnClass\">\n                  {{ _dateAdapter.getDate(date) }}\n                </button>\n              </td>\n            }\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  ",
                 }]
         }], ctorParameters: () => [], propDecorators: { captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }] } });
 
@@ -800,68 +194,14 @@ class HlmMonthYearCalendar {
         return `${config.formatYear(start)} – ${config.formatYear(end)}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_heading" }] : /* istanbul ignore next */ []));
-    _btnClass = hlm(buttonVariants({ variant: 'ghost' }), 'data-[today=true]:bg-muted', 'data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground data-[selected=true]:hover:bg-primary data-[selected=true]:hover:text-primary-foreground', 'data-[focused=true]:border-ring data-[focused=true]:ring-ring/50 data-[focused=true]:ring-[3px]', 'aria-disabled:pointer-events-none aria-disabled:opacity-50', 'h-(--cell-size)');
+    _btnClass = hlm(buttonVariants({ variant: 'ghost' }), "data-[today=true]:bg-muted", "data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground data-[selected=true]:hover:bg-primary data-[selected=true]:hover:text-primary-foreground", "data-[focused=true]:border-ring data-[focused=true]:ring-ring/50 data-[focused=true]:ring-[3px]", "aria-disabled:pointer-events-none aria-disabled:opacity-50", "h-(--cell-size)");
     constructor() {
-        classes(() => 'p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] group/calendar bg-background block in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent');
+        classes(() => "p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] group/calendar bg-background block in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent");
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmMonthYearCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: HlmMonthYearCalendar, isStandalone: true, selector: "hlm-month-year-calendar", host: { attributes: { "data-slot": "month-year-calendar" } }, hostDirectives: [{ directive: i1.BrnMonthYearCalendar, inputs: ["min", "min", "max", "max", "disabled", "disabled", "date", "date", "defaultFocusedDate", "defaultFocusedDate", "view", "view"], outputs: ["dateChange", "dateChange"] }], ngImport: i0, template: `
-    <div class="flex flex-col gap-4">
-      <!-- Header -->
-      <div class="flex w-full items-center justify-between gap-1.5">
-        <button
-          brnMonthYearCalendarPreviousButton
-          hlmBtn
-          variant="ghost"
-          class="order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
-        >
-          <ng-icon name="lucideChevronLeft" class="rtl:rotate-180" />
-        </button>
-
-        <button
-          hlmBtn
-          variant="ghost"
-          class="h-(--cell-size) py-0 select-none aria-disabled:opacity-50"
-          brnMonthYearCalendarHeader
-        >
-          {{ _heading() }}
-        </button>
-
-        <button
-          brnMonthYearCalendarNextButton
-          hlmBtn
-          variant="ghost"
-          class="order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
-        >
-          <ng-icon name="lucideChevronRight" class="rtl:rotate-180" />
-        </button>
-      </div>
-
-      <!-- Grid -->
-      @switch (_picker.view()) {
-        @case ('year') {
-          <div brnMonthYearCalendarGrid class="grid grid-cols-4 gap-2">
-            @for (year of _picker.years(); track _dateAdapter.getYear(year)) {
-              <button brnMonthYearCalendarYearButton [date]="year" [class]="_btnClass">
-                {{ _i18n.config().formatYear(_dateAdapter.getYear(year)) }}
-              </button>
-            }
-          </div>
-        }
-        @case ('month') {
-          <div brnMonthYearCalendarGrid class="grid grid-cols-4 gap-2">
-            @for (month of _picker.months(); track _dateAdapter.getMonth(month)) {
-              <button brnMonthYearCalendarMonthButton [date]="month" [class]="_btnClass">
-                {{ _i18n.config().months()[_dateAdapter.getMonth(month)] }}
-              </button>
-            }
-          </div>
-        }
-      }
-    </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.BrnMonthYearCalendarGrid, selector: "[brnMonthYearCalendarGrid]" }, { kind: "directive", type: i1.BrnMonthYearCalendarHeader, selector: "button[brnMonthYearCalendarHeader]", inputs: ["id"] }, { kind: "directive", type: i1.BrnMonthYearCalendarMonthButton, selector: "button[brnMonthYearCalendarMonthButton]", inputs: ["date"] }, { kind: "directive", type: i1.BrnMonthYearCalendarNextButton, selector: "button[brnMonthYearCalendarNextButton]" }, { kind: "directive", type: i1.BrnMonthYearCalendarPreviousButton, selector: "button[brnMonthYearCalendarPreviousButton]" }, { kind: "directive", type: i1.BrnMonthYearCalendarYearButton, selector: "button[brnMonthYearCalendarYearButton]", inputs: ["date"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: i3.HlmBtn, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size", "class", "type"], exportAs: ["hlmBtn"] }], viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMonthYearCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmMonthYearCalendar, isStandalone: true, selector: "hlm-month-year-calendar", host: { attributes: { "data-slot": "month-year-calendar" } }, hostDirectives: [{ directive: i1.BrnMonthYearCalendar, inputs: ["min", "min", "max", "max", "disabled", "disabled", "date", "date", "defaultFocusedDate", "defaultFocusedDate", "view", "view"], outputs: ["dateChange", "dateChange"] }], ngImport: i0, template: "\n    <div class=\"flex flex-col gap-4\">\n      <!-- Header -->\n      <div class=\"flex w-full items-center justify-between gap-1.5\">\n        <button\n          brnMonthYearCalendarPreviousButton\n          hlmBtn\n          variant=\"ghost\"\n          class=\"order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n        >\n          <ng-icon name=\"lucideChevronLeft\" class=\"rtl:rotate-180\" />\n        </button>\n\n        <button\n          hlmBtn\n          variant=\"ghost\"\n          class=\"h-(--cell-size) py-0 select-none aria-disabled:opacity-50\"\n          brnMonthYearCalendarHeader\n        >\n          {{ _heading() }}\n        </button>\n\n        <button\n          brnMonthYearCalendarNextButton\n          hlmBtn\n          variant=\"ghost\"\n          class=\"order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n        >\n          <ng-icon name=\"lucideChevronRight\" class=\"rtl:rotate-180\" />\n        </button>\n      </div>\n\n      <!-- Grid -->\n      @switch (_picker.view()) {\n        @case ('year') {\n          <div brnMonthYearCalendarGrid class=\"grid grid-cols-4 gap-2\">\n            @for (year of _picker.years(); track _dateAdapter.getYear(year)) {\n              <button brnMonthYearCalendarYearButton [date]=\"year\" [class]=\"_btnClass\">\n                {{ _i18n.config().formatYear(_dateAdapter.getYear(year)) }}\n              </button>\n            }\n          </div>\n        }\n        @case ('month') {\n          <div brnMonthYearCalendarGrid class=\"grid grid-cols-4 gap-2\">\n            @for (month of _picker.months(); track _dateAdapter.getMonth(month)) {\n              <button brnMonthYearCalendarMonthButton [date]=\"month\" [class]=\"_btnClass\">\n                {{ _i18n.config().months()[_dateAdapter.getMonth(month)] }}\n              </button>\n            }\n          </div>\n        }\n      }\n    </div>\n  ", isInline: true, dependencies: [{ kind: "directive", type: i1.BrnMonthYearCalendarGrid, selector: "[brnMonthYearCalendarGrid]" }, { kind: "directive", type: i1.BrnMonthYearCalendarHeader, selector: "button[brnMonthYearCalendarHeader]", inputs: ["id"] }, { kind: "directive", type: i1.BrnMonthYearCalendarMonthButton, selector: "button[brnMonthYearCalendarMonthButton]", inputs: ["date"] }, { kind: "directive", type: i1.BrnMonthYearCalendarNextButton, selector: "button[brnMonthYearCalendarNextButton]" }, { kind: "directive", type: i1.BrnMonthYearCalendarPreviousButton, selector: "button[brnMonthYearCalendarPreviousButton]" }, { kind: "directive", type: i1.BrnMonthYearCalendarYearButton, selector: "button[brnMonthYearCalendarYearButton]", inputs: ["date"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: i3.HlmBtn, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size", "class", "type"], exportAs: ["hlmBtn"] }], viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmMonthYearCalendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMonthYearCalendar, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-month-year-calendar',
@@ -876,61 +216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         },
                     ],
                     host: { 'data-slot': 'month-year-calendar' },
-                    template: `
-    <div class="flex flex-col gap-4">
-      <!-- Header -->
-      <div class="flex w-full items-center justify-between gap-1.5">
-        <button
-          brnMonthYearCalendarPreviousButton
-          hlmBtn
-          variant="ghost"
-          class="order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
-        >
-          <ng-icon name="lucideChevronLeft" class="rtl:rotate-180" />
-        </button>
-
-        <button
-          hlmBtn
-          variant="ghost"
-          class="h-(--cell-size) py-0 select-none aria-disabled:opacity-50"
-          brnMonthYearCalendarHeader
-        >
-          {{ _heading() }}
-        </button>
-
-        <button
-          brnMonthYearCalendarNextButton
-          hlmBtn
-          variant="ghost"
-          class="order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
-        >
-          <ng-icon name="lucideChevronRight" class="rtl:rotate-180" />
-        </button>
-      </div>
-
-      <!-- Grid -->
-      @switch (_picker.view()) {
-        @case ('year') {
-          <div brnMonthYearCalendarGrid class="grid grid-cols-4 gap-2">
-            @for (year of _picker.years(); track _dateAdapter.getYear(year)) {
-              <button brnMonthYearCalendarYearButton [date]="year" [class]="_btnClass">
-                {{ _i18n.config().formatYear(_dateAdapter.getYear(year)) }}
-              </button>
-            }
-          </div>
-        }
-        @case ('month') {
-          <div brnMonthYearCalendarGrid class="grid grid-cols-4 gap-2">
-            @for (month of _picker.months(); track _dateAdapter.getMonth(month)) {
-              <button brnMonthYearCalendarMonthButton [date]="month" [class]="_btnClass">
-                {{ _i18n.config().months()[_dateAdapter.getMonth(month)] }}
-              </button>
-            }
-          </div>
-        }
-      }
-    </div>
-  `,
+                    template: "\n    <div class=\"flex flex-col gap-4\">\n      <!-- Header -->\n      <div class=\"flex w-full items-center justify-between gap-1.5\">\n        <button\n          brnMonthYearCalendarPreviousButton\n          hlmBtn\n          variant=\"ghost\"\n          class=\"order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n        >\n          <ng-icon name=\"lucideChevronLeft\" class=\"rtl:rotate-180\" />\n        </button>\n\n        <button\n          hlmBtn\n          variant=\"ghost\"\n          class=\"h-(--cell-size) py-0 select-none aria-disabled:opacity-50\"\n          brnMonthYearCalendarHeader\n        >\n          {{ _heading() }}\n        </button>\n\n        <button\n          brnMonthYearCalendarNextButton\n          hlmBtn\n          variant=\"ghost\"\n          class=\"order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n        >\n          <ng-icon name=\"lucideChevronRight\" class=\"rtl:rotate-180\" />\n        </button>\n      </div>\n\n      <!-- Grid -->\n      @switch (_picker.view()) {\n        @case ('year') {\n          <div brnMonthYearCalendarGrid class=\"grid grid-cols-4 gap-2\">\n            @for (year of _picker.years(); track _dateAdapter.getYear(year)) {\n              <button brnMonthYearCalendarYearButton [date]=\"year\" [class]=\"_btnClass\">\n                {{ _i18n.config().formatYear(_dateAdapter.getYear(year)) }}\n              </button>\n            }\n          </div>\n        }\n        @case ('month') {\n          <div brnMonthYearCalendarGrid class=\"grid grid-cols-4 gap-2\">\n            @for (month of _picker.months(); track _dateAdapter.getMonth(month)) {\n              <button brnMonthYearCalendarMonthButton [date]=\"month\" [class]=\"_btnClass\">\n                {{ _i18n.config().months()[_dateAdapter.getMonth(month)] }}\n              </button>\n            }\n          </div>\n        }\n      }\n    </div>\n  ",
                 }]
         }], ctorParameters: () => [] });
 
@@ -939,11 +225,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 const HlmCalendarImports = [HlmCalendar, HlmCalendarMulti, HlmCalendarRange, HlmMonthYearCalendar];
 class HlmCalendarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmCalendarModule, imports: [HlmCalendar, HlmCalendarMulti, HlmCalendarRange, HlmMonthYearCalendar], exports: [HlmCalendar, HlmCalendarMulti, HlmCalendarRange, HlmMonthYearCalendar] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCalendarModule, imports: [HlmCalendarImports] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmCalendarModule, imports: [HlmCalendar, HlmCalendarMulti, HlmCalendarRange, HlmMonthYearCalendar], exports: [HlmCalendar, HlmCalendarMulti, HlmCalendarRange, HlmMonthYearCalendar] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCalendarModule, imports: [HlmCalendarImports] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmCalendarImports],
@@ -956,4 +242,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 
 export { HlmCalendar, HlmCalendarImports, HlmCalendarModule, HlmCalendarMulti, HlmCalendarRange, HlmMonthYearCalendar };
-//# sourceMappingURL=calendar.mjs.map
+