@egose/shadcn-theme-ng 0.0.27 → 0.0.28

package/calendar/fesm2022/calendar.mjs

@@ -1,627 +1,949 @@
 import * as i0 from '@angular/core';
-import { input, computed, booleanAttribute, model, numberAttribute, viewChild, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { input, inject, computed, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
 import { provideIcons, NgIcon } from '@ng-icons/core';
 import { lucideChevronRight, lucideChevronLeft } from '@ng-icons/lucide';
-import { injectBrnCalendarI18n, BrnCalendar, BrnCalendarHeader, BrnCalendarNextButton, BrnCalendarPreviousButton, BrnCalendarWeekday, BrnCalendarWeek, BrnCalendarCellButton, BrnCalendarCell, BrnCalendarGrid, BrnCalendarMulti, BrnCalendarRange } from '@spartan-ng/brain/calendar';
+import * as i1 from '@spartan-ng/brain/calendar';
+import { injectBrnCalendarI18n, BrnCalendar, BrnCalendarImports, BrnCalendarMulti, BrnCalendarRange, BrnMonthYearCalendar } from '@spartan-ng/brain/calendar';
 import { injectDateAdapter } from '@spartan-ng/brain/date-time';
-import { buttonVariants } from '@egose/shadcn-theme-ng/button';
-import { HlmIcon } from '@egose/shadcn-theme-ng/icon';
-import { hlm } from '@egose/shadcn-theme-ng/utils';
+import * as i3 from '@egose/shadcn-theme-ng/button';
+import { buttonVariants, HlmButtonImports } from '@egose/shadcn-theme-ng/button';
+import * as i2 from '@egose/shadcn-theme-ng/select';
+import { HlmSelectImports } from '@egose/shadcn-theme-ng/select';
+import { hlm, classes } from '@egose/shadcn-theme-ng/utils';
 
 class HlmCalendar {
-    calendarClass = input('', ...(ngDevMode ? [{ debugName: "calendarClass" }] : []));
-    _computedCalenderClass = computed(() => hlm('rounded-md border p-3', this.calendarClass()), ...(ngDevMode ? [{ debugName: "_computedCalenderClass" }] : []));
     /** Access the calendar i18n */
     _i18n = injectBrnCalendarI18n();
     /** Access the date time adapter */
     _dateAdapter = injectDateAdapter();
-    /** The minimum date that can be selected.*/
-    min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : []));
-    /** The maximum date that can be selected. */
-    max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
-    /** Determine if the date picker is disabled. */
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{
-            transform: booleanAttribute,
-        }]));
-    /** The selected value. */
-    date = model(...(ngDevMode ? [undefined, { debugName: "date" }] : []));
-    /** Whether a specific date is disabled. */
-    dateDisabled = input(() => false, ...(ngDevMode ? [{ debugName: "dateDisabled" }] : []));
-    /** The day the week starts on */
-    weekStartsOn = input(undefined, ...(ngDevMode ? [{ debugName: "weekStartsOn", transform: (v) => numberAttribute(v) }] : [{
-            transform: (v) => numberAttribute(v),
-        }]));
-    /** The default focused date. */
-    defaultFocusedDate = input(...(ngDevMode ? [undefined, { debugName: "defaultFocusedDate" }] : []));
+    /** Show dropdowns to navigate between months or years. */
+    captionLayout = input('label', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "captionLayout" }] : /* istanbul ignore next */ []));
     /** Access the calendar directive */
-    _calendar = viewChild.required(BrnCalendar);
+    _calendar = inject(BrnCalendar);
     /** Get the heading for the current month and year */
-    _heading = computed(() => this._i18n
-        .config()
-        .formatHeader(this._dateAdapter.getMonth(this._calendar().focusedDate()), this._dateAdapter.getYear(this._calendar().focusedDate())), ...(ngDevMode ? [{ debugName: "_heading" }] : []));
-    _btnClass = hlm(buttonVariants({ variant: 'ghost' }), 'size-8 p-0 font-normal aria-selected:opacity-100', 'data-[outside]:text-muted-foreground data-[outside]:aria-selected:bg-secondary/50 data-[outside]:aria-selected:text-muted-foreground data-[outside]:opacity-50 data-[outside]:aria-selected:opacity-30', 'data-[today]:bg-secondary data-[today]:text-secondary-foreground', 'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground', 'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HlmCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: HlmCalendar, isStandalone: true, selector: "hlm-calendar", inputs: { calendarClass: { classPropertyName: "calendarClass", publicName: "calendarClass", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, dateDisabled: { classPropertyName: "dateDisabled", publicName: "dateDisabled", isSignal: true, isRequired: false, transformFunction: null }, weekStartsOn: { classPropertyName: "weekStartsOn", publicName: "weekStartsOn", isSignal: true, isRequired: false, transformFunction: null }, defaultFocusedDate: { classPropertyName: "defaultFocusedDate", publicName: "defaultFocusedDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: BrnCalendar, descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div
-      brnCalendar
-      [min]="min()"
-      [max]="max()"
-      [disabled]="disabled()"
-      [(date)]="date"
-      [dateDisabled]="dateDisabled()"
-      [weekStartsOn]="weekStartsOn()"
-      [defaultFocusedDate]="defaultFocusedDate()"
-      [class]="_computedCalenderClass()"
-    >
-      <div class="inline-flex flex-col space-y-4">
-        <!-- Header -->
-        <div class="space-y-4">
-          <div class="relative flex items-center justify-center pt-1">
-            <div brnCalendarHeader class="text-sm font-medium">
-              {{ _heading() }}
-            </div>
-
-            <div class="flex items-center space-x-1">
-              <button
-                brnCalendarPreviousButton
-                class="focus-visible:ring-ring hover:bg-secondary hover:text-secondary-foreground text-popover-foreground absolute left-1 inline-flex size-8 items-center justify-center whitespace-nowrap rounded-md bg-transparent p-0 text-sm font-medium transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-              >
-                <ng-icon hlm name="lucideChevronLeft" size="sm" />
-              </button>
+    _heading = computed(() => {
+        const config = this._i18n.config();
+        const date = this._calendar.focusedDate();
+        return {
+            header: config.formatHeader(this._dateAdapter.getMonth(date), this._dateAdapter.getYear(date)),
+            month: config.formatMonth(this._dateAdapter.getMonth(date)),
+            year: config.formatYear(this._dateAdapter.getYear(date)),
+        };
+    }, /* @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');
+    _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');
+    }
+    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
-                brnCalendarNextButton
-                class="focus-visible:ring-ring hover:bg-secondary hover:text-secondary-foreground text-popover-foreground absolute right-1 inline-flex size-8 items-center justify-center whitespace-nowrap rounded-md bg-transparent p-0 text-sm font-medium transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-              >
-                <ng-icon hlm name="lucideChevronRight" size="sm" />
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <table class="w-full border-collapse space-y-1" brnCalendarGrid>
-          <thead>
-            <tr class="flex">
-              <th
-                *brnCalendarWeekday="let weekday"
-                scope="col"
-                class="text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal"
-                [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="data-[selected]:data-[outside]:bg-secondary/50 data-[selected]:bg-secondary relative size-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:data-[selected]:rounded-l-md last:data-[selected]:rounded-r-md [&:has([aria-selected].day-range-end)]:rounded-r-md"
-                >
-                  <button brnCalendarCellButton [date]="date" [class]="_btnClass">
-                    {{ _dateAdapter.getDate(date) }}
-                  </button>
-                </td>
-              }
-            </tr>
-          </tbody>
-        </table>
+        <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: BrnCalendar, selector: "[brnCalendar]", inputs: ["min", "max", "disabled", "date", "dateDisabled", "weekStartsOn", "defaultFocusedDate"], outputs: ["dateChange"] }, { kind: "directive", type: BrnCalendarHeader, selector: "[brnCalendarHeader]", inputs: ["id"] }, { kind: "directive", type: BrnCalendarNextButton, selector: "[brnCalendarNextButton]" }, { kind: "directive", type: BrnCalendarPreviousButton, selector: "[brnCalendarPreviousButton]" }, { kind: "directive", type: BrnCalendarWeekday, selector: "[brnCalendarWeekday]" }, { kind: "directive", type: BrnCalendarWeek, selector: "[brnCalendarWeek]" }, { kind: "directive", type: BrnCalendarCellButton, selector: "button[brnCalendarCellButton]", inputs: ["date"] }, { kind: "directive", type: BrnCalendarCell, selector: "[brnCalendarCell]" }, { kind: "directive", type: BrnCalendarGrid, selector: "[brnCalendarGrid]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HlmCalendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCalendar, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-calendar',
-                    imports: [
-                        BrnCalendar,
-                        BrnCalendarHeader,
-                        BrnCalendarNextButton,
-                        BrnCalendarPreviousButton,
-                        BrnCalendarWeekday,
-                        BrnCalendarWeek,
-                        BrnCalendarCellButton,
-                        BrnCalendarCell,
-                        BrnCalendarGrid,
-                        NgIcon,
-                        HlmIcon,
-                    ],
+                    imports: [BrnCalendarImports, NgIcon, HlmSelectImports, NgTemplateOutlet, HlmButtonImports],
                     viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [
+                        {
+                            directive: BrnCalendar,
+                            inputs: ['min', 'max', 'disabled', 'date', 'dateDisabled', 'weekStartsOn', 'highlightDays', 'defaultFocusedDate'],
+                            outputs: ['dateChange'],
+                        },
+                    ],
+                    host: { 'data-slot': 'calendar' },
                     template: `
-    <div
-      brnCalendar
-      [min]="min()"
-      [max]="max()"
-      [disabled]="disabled()"
-      [(date)]="date"
-      [dateDisabled]="dateDisabled()"
-      [weekStartsOn]="weekStartsOn()"
-      [defaultFocusedDate]="defaultFocusedDate()"
-      [class]="_computedCalenderClass()"
-    >
-      <div class="inline-flex flex-col space-y-4">
-        <!-- Header -->
-        <div class="space-y-4">
-          <div class="relative flex items-center justify-center pt-1">
-            <div brnCalendarHeader class="text-sm font-medium">
-              {{ _heading() }}
-            </div>
-
-            <div class="flex items-center space-x-1">
-              <button
-                brnCalendarPreviousButton
-                class="focus-visible:ring-ring hover:bg-secondary hover:text-secondary-foreground text-popover-foreground absolute left-1 inline-flex size-8 items-center justify-center whitespace-nowrap rounded-md bg-transparent p-0 text-sm font-medium transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-              >
-                <ng-icon hlm name="lucideChevronLeft" size="sm" />
-              </button>
+    <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
-                brnCalendarNextButton
-                class="focus-visible:ring-ring hover:bg-secondary hover:text-secondary-foreground text-popover-foreground absolute right-1 inline-flex size-8 items-center justify-center whitespace-nowrap rounded-md bg-transparent p-0 text-sm font-medium transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-              >
-                <ng-icon hlm name="lucideChevronRight" size="sm" />
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <table class="w-full border-collapse space-y-1" brnCalendarGrid>
-          <thead>
-            <tr class="flex">
-              <th
-                *brnCalendarWeekday="let weekday"
-                scope="col"
-                class="text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal"
-                [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="data-[selected]:data-[outside]:bg-secondary/50 data-[selected]:bg-secondary relative size-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:data-[selected]:rounded-l-md last:data-[selected]:rounded-r-md [&:has([aria-selected].day-range-end)]:rounded-r-md"
-                >
-                  <button brnCalendarCellButton [date]="date" [class]="_btnClass">
-                    {{ _dateAdapter.getDate(date) }}
-                  </button>
-                </td>
-              }
-            </tr>
-          </tbody>
-        </table>
+        <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>
   `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { calendarClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarClass", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }, { type: i0.Output, args: ["dateChange"] }], dateDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateDisabled", required: false }] }], weekStartsOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStartsOn", required: false }] }], defaultFocusedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFocusedDate", required: false }] }], _calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnCalendar), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }] } });
 
 class HlmCalendarMulti {
-    calendarClass = input('', ...(ngDevMode ? [{ debugName: "calendarClass" }] : []));
-    _computedCalenderClass = computed(() => hlm('rounded-md border p-3', this.calendarClass()), ...(ngDevMode ? [{ debugName: "_computedCalenderClass" }] : []));
+    /** Show dropdowns to navigate between months or years. */
+    captionLayout = input('label', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "captionLayout" }] : /* istanbul ignore next */ []));
     /** Access the calendar i18n */
     _i18n = injectBrnCalendarI18n();
     /** Access the date time adapter */
     _dateAdapter = injectDateAdapter();
-    /** The minimum date that can be selected.*/
-    min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : []));
-    /** The maximum date that can be selected. */
-    max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
-    /** The minimum selectable dates.  */
-    minSelection = input(undefined, ...(ngDevMode ? [{ debugName: "minSelection", transform: numberAttribute }] : [{
-            transform: numberAttribute,
-        }]));
-    /** The maximum selectable dates.  */
-    maxSelection = input(undefined, ...(ngDevMode ? [{ debugName: "maxSelection", transform: numberAttribute }] : [{
-            transform: numberAttribute,
-        }]));
-    /** Determine if the date picker is disabled. */
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{
-            transform: booleanAttribute,
-        }]));
-    /** The selected value. */
-    date = model(...(ngDevMode ? [undefined, { debugName: "date" }] : []));
-    /** Whether a specific date is disabled. */
-    dateDisabled = input(() => false, ...(ngDevMode ? [{ debugName: "dateDisabled" }] : []));
-    /** The day the week starts on */
-    weekStartsOn = input(undefined, ...(ngDevMode ? [{ debugName: "weekStartsOn", transform: (v) => numberAttribute(v) }] : [{
-            transform: (v) => numberAttribute(v),
-        }]));
-    /** The default focused date. */
-    defaultFocusedDate = input(...(ngDevMode ? [undefined, { debugName: "defaultFocusedDate" }] : []));
     /** Access the calendar directive */
-    _calendar = viewChild.required(BrnCalendarMulti);
+    _calendar = inject(BrnCalendarMulti);
     /** Get the heading for the current month and year */
-    _heading = computed(() => this._i18n
-        .config()
-        .formatHeader(this._dateAdapter.getMonth(this._calendar().focusedDate()), this._dateAdapter.getYear(this._calendar().focusedDate())), ...(ngDevMode ? [{ debugName: "_heading" }] : []));
-    _btnClass = hlm(buttonVariants({ variant: 'ghost' }), 'size-8 p-0 font-normal aria-selected:opacity-100', 'data-[outside]:text-muted-foreground data-[outside]:aria-selected:bg-accent/50 data-[outside]:aria-selected:text-muted-foreground data-[outside]:opacity-50 data-[outside]:aria-selected:opacity-30', 'data-[today]:bg-accent data-[today]:text-accent-foreground', 'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground', 'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HlmCalendarMulti, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: HlmCalendarMulti, isStandalone: true, selector: "hlm-calendar-multi", inputs: { calendarClass: { classPropertyName: "calendarClass", publicName: "calendarClass", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minSelection: { classPropertyName: "minSelection", publicName: "minSelection", isSignal: true, isRequired: false, transformFunction: null }, maxSelection: { classPropertyName: "maxSelection", publicName: "maxSelection", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, dateDisabled: { classPropertyName: "dateDisabled", publicName: "dateDisabled", isSignal: true, isRequired: false, transformFunction: null }, weekStartsOn: { classPropertyName: "weekStartsOn", publicName: "weekStartsOn", isSignal: true, isRequired: false, transformFunction: null }, defaultFocusedDate: { classPropertyName: "defaultFocusedDate", publicName: "defaultFocusedDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: BrnCalendarMulti, descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div
-      brnCalendarMulti
-      [min]="min()"
-      [max]="max()"
-      [minSelection]="minSelection()"
-      [maxSelection]="maxSelection()"
-      [disabled]="disabled()"
-      [(date)]="date"
-      [dateDisabled]="dateDisabled()"
-      [weekStartsOn]="weekStartsOn()"
-      [defaultFocusedDate]="defaultFocusedDate()"
-      [class]="_computedCalenderClass()"
-    >
-      <div class="inline-flex flex-col space-y-4">
-        <!-- Header -->
-        <div class="space-y-4">
-          <div class="relative flex items-center justify-center pt-1">
-            <div brnCalendarHeader class="text-sm font-medium">
-              {{ _heading() }}
-            </div>
-
-            <div class="flex items-center space-x-1">
-              <button
-                brnCalendarPreviousButton
-                class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute left-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-              >
-                <ng-icon hlm name="lucideChevronLeft" size="sm" />
-              </button>
+    _heading = computed(() => {
+        const config = this._i18n.config();
+        const date = this._calendar.focusedDate();
+        return {
+            header: config.formatHeader(this._dateAdapter.getMonth(date), this._dateAdapter.getYear(date)),
+            month: config.formatMonth(this._dateAdapter.getMonth(date)),
+            year: config.formatYear(this._dateAdapter.getYear(date)),
+        };
+    }, /* @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');
+    _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');
+    }
+    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
-                brnCalendarNextButton
-                class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute right-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-              >
-                <ng-icon hlm name="lucideChevronRight" size="sm" />
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <table class="w-full border-collapse space-y-1" brnCalendarGrid>
-          <thead>
-            <tr class="flex">
-              <th
-                *brnCalendarWeekday="let weekday"
-                scope="col"
-                class="text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal"
-                [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="data-[selected]:data-[outside]:bg-accent/50 data-[selected]:bg-accent relative h-8 w-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:data-[selected]:rounded-l-md last:data-[selected]:rounded-r-md [&:has([aria-selected].day-range-end)]:rounded-r-md"
-                >
-                  <button brnCalendarCellButton [date]="date" [class]="_btnClass">
-                    {{ _dateAdapter.getDate(date) }}
-                  </button>
-                </td>
-              }
-            </tr>
-          </tbody>
-        </table>
+        <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: BrnCalendarMulti, selector: "[brnCalendarMulti]", inputs: ["min", "max", "minSelection", "maxSelection", "disabled", "date", "dateDisabled", "weekStartsOn", "defaultFocusedDate"], outputs: ["dateChange"] }, { kind: "directive", type: BrnCalendarHeader, selector: "[brnCalendarHeader]", inputs: ["id"] }, { kind: "directive", type: BrnCalendarNextButton, selector: "[brnCalendarNextButton]" }, { kind: "directive", type: BrnCalendarPreviousButton, selector: "[brnCalendarPreviousButton]" }, { kind: "directive", type: BrnCalendarWeekday, selector: "[brnCalendarWeekday]" }, { kind: "directive", type: BrnCalendarWeek, selector: "[brnCalendarWeek]" }, { kind: "directive", type: BrnCalendarCellButton, selector: "button[brnCalendarCellButton]", inputs: ["date"] }, { kind: "directive", type: BrnCalendarCell, selector: "[brnCalendarCell]" }, { kind: "directive", type: BrnCalendarGrid, selector: "[brnCalendarGrid]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HlmCalendarMulti, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCalendarMulti, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-calendar-multi',
-                    imports: [
-                        BrnCalendarMulti,
-                        BrnCalendarHeader,
-                        BrnCalendarNextButton,
-                        BrnCalendarPreviousButton,
-                        BrnCalendarWeekday,
-                        BrnCalendarWeek,
-                        BrnCalendarCellButton,
-                        BrnCalendarCell,
-                        BrnCalendarGrid,
-                        NgIcon,
-                        HlmIcon,
-                    ],
+                    imports: [BrnCalendarImports, NgIcon, NgTemplateOutlet, HlmSelectImports, HlmButtonImports],
                     viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [
+                        {
+                            directive: BrnCalendarMulti,
+                            inputs: [
+                                'min',
+                                'max',
+                                'minSelection',
+                                'maxSelection',
+                                'disabled',
+                                'date',
+                                'dateDisabled',
+                                'weekStartsOn',
+                                'highlightDays',
+                                'defaultFocusedDate',
+                            ],
+                            outputs: ['dateChange'],
+                        },
+                    ],
+                    host: { 'data-slot': 'calendar' },
                     template: `
-    <div
-      brnCalendarMulti
-      [min]="min()"
-      [max]="max()"
-      [minSelection]="minSelection()"
-      [maxSelection]="maxSelection()"
-      [disabled]="disabled()"
-      [(date)]="date"
-      [dateDisabled]="dateDisabled()"
-      [weekStartsOn]="weekStartsOn()"
-      [defaultFocusedDate]="defaultFocusedDate()"
-      [class]="_computedCalenderClass()"
-    >
-      <div class="inline-flex flex-col space-y-4">
-        <!-- Header -->
-        <div class="space-y-4">
-          <div class="relative flex items-center justify-center pt-1">
-            <div brnCalendarHeader class="text-sm font-medium">
-              {{ _heading() }}
-            </div>
-
-            <div class="flex items-center space-x-1">
-              <button
-                brnCalendarPreviousButton
-                class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute left-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-              >
-                <ng-icon hlm name="lucideChevronLeft" size="sm" />
-              </button>
+    <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
-                brnCalendarNextButton
-                class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute right-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-              >
-                <ng-icon hlm name="lucideChevronRight" size="sm" />
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <table class="w-full border-collapse space-y-1" brnCalendarGrid>
-          <thead>
-            <tr class="flex">
-              <th
-                *brnCalendarWeekday="let weekday"
-                scope="col"
-                class="text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal"
-                [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="data-[selected]:data-[outside]:bg-accent/50 data-[selected]:bg-accent relative h-8 w-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:data-[selected]:rounded-l-md last:data-[selected]:rounded-r-md [&:has([aria-selected].day-range-end)]:rounded-r-md"
-                >
-                  <button brnCalendarCellButton [date]="date" [class]="_btnClass">
-                    {{ _dateAdapter.getDate(date) }}
-                  </button>
-                </td>
-              }
-            </tr>
-          </tbody>
-        </table>
+        <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>
   `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { calendarClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarClass", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], minSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSelection", required: false }] }], maxSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelection", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }, { type: i0.Output, args: ["dateChange"] }], dateDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateDisabled", required: false }] }], weekStartsOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStartsOn", required: false }] }], defaultFocusedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFocusedDate", required: false }] }], _calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnCalendarMulti), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }] } });
 
 class HlmCalendarRange {
-    calendarClass = input('', ...(ngDevMode ? [{ debugName: "calendarClass" }] : []));
-    _computedCalenderClass = computed(() => hlm('rounded-md border p-3', this.calendarClass()), ...(ngDevMode ? [{ debugName: "_computedCalenderClass" }] : []));
+    /** Show dropdowns to navigate between months or years. */
+    captionLayout = input('label', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "captionLayout" }] : /* istanbul ignore next */ []));
     /** Access the calendar i18n */
     _i18n = injectBrnCalendarI18n();
     /** Access the date time adapter */
     _dateAdapter = injectDateAdapter();
-    /** The minimum date that can be selected.*/
-    min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : []));
-    /** The maximum date that can be selected. */
-    max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
-    /** Determine if the date picker is disabled. */
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{
-            transform: booleanAttribute,
-        }]));
-    /** The start date of the range. */
-    startDate = model(...(ngDevMode ? [undefined, { debugName: "startDate" }] : []));
-    /** The end date of the range. */
-    endDate = model(...(ngDevMode ? [undefined, { debugName: "endDate" }] : []));
-    /** Whether a specific date is disabled. */
-    dateDisabled = input(() => false, ...(ngDevMode ? [{ debugName: "dateDisabled" }] : []));
-    /** The day the week starts on */
-    weekStartsOn = input(undefined, ...(ngDevMode ? [{ debugName: "weekStartsOn", transform: (v) => numberAttribute(v) }] : [{
-            transform: (v) => numberAttribute(v),
-        }]));
-    /** The default focused date. */
-    defaultFocusedDate = input(...(ngDevMode ? [undefined, { debugName: "defaultFocusedDate" }] : []));
     /** Access the calendar directive */
-    _calendar = viewChild.required(BrnCalendarRange);
+    _calendar = inject(BrnCalendarRange);
     /** Get the heading for the current month and year */
-    _heading = computed(() => this._i18n
-        .config()
-        .formatHeader(this._dateAdapter.getMonth(this._calendar().focusedDate()), this._dateAdapter.getYear(this._calendar().focusedDate())), ...(ngDevMode ? [{ debugName: "_heading" }] : []));
-    _btnClass = hlm(buttonVariants({ variant: 'ghost' }), 'size-8 p-0 font-normal aria-selected:opacity-100', 'data-[outside]:text-muted-foreground data-[outside]:aria-selected:text-muted-foreground', 'data-[today]:bg-accent data-[today]:text-accent-foreground', 'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground', 'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50', 'data-[range-start]:rounded-l-md', 'data-[range-end]:rounded-r-md', 'data-[range-between]:bg-accent data-[range-between]:text-accent-foreground data-[range-between]:rounded-none');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HlmCalendarRange, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: HlmCalendarRange, isStandalone: true, selector: "hlm-calendar-range", inputs: { calendarClass: { classPropertyName: "calendarClass", publicName: "calendarClass", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, dateDisabled: { classPropertyName: "dateDisabled", publicName: "dateDisabled", isSignal: true, isRequired: false, transformFunction: null }, weekStartsOn: { classPropertyName: "weekStartsOn", publicName: "weekStartsOn", isSignal: true, isRequired: false, transformFunction: null }, defaultFocusedDate: { classPropertyName: "defaultFocusedDate", publicName: "defaultFocusedDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { startDate: "startDateChange", endDate: "endDateChange" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: BrnCalendarRange, descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div
-      brnCalendarRange
-      [min]="min()"
-      [max]="max()"
-      [disabled]="disabled()"
-      [(startDate)]="startDate"
-      [(endDate)]="endDate"
-      [dateDisabled]="dateDisabled()"
-      [weekStartsOn]="weekStartsOn()"
-      [defaultFocusedDate]="defaultFocusedDate()"
-      [class]="_computedCalenderClass()"
-    >
-      <div class="inline-flex flex-col space-y-4">
-        <!-- Header -->
-        <div class="space-y-4">
-          <div class="relative flex items-center justify-center pt-1">
-            <div brnCalendarHeader class="text-sm font-medium">
-              {{ _heading() }}
-            </div>
-
-            <div class="flex items-center space-x-1">
-              <button
-                brnCalendarPreviousButton
-                class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute left-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-              >
-                <ng-icon hlm name="lucideChevronLeft" size="sm" />
-              </button>
+    _heading = computed(() => {
+        const config = this._i18n.config();
+        const date = this._calendar.focusedDate();
+        return {
+            header: config.formatHeader(this._dateAdapter.getMonth(date), this._dateAdapter.getYear(date)),
+            month: config.formatMonth(this._dateAdapter.getMonth(date)),
+            year: config.formatYear(this._dateAdapter.getYear(date)),
+        };
+    }, /* @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');
+    _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');
+    }
+    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
-                brnCalendarNextButton
-                class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute right-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-              >
-                <ng-icon hlm name="lucideChevronRight" size="sm" />
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <table class="w-full border-collapse space-y-1" brnCalendarGrid>
-          <thead>
-            <tr class="flex">
-              <th
-                *brnCalendarWeekday="let weekday"
-                scope="col"
-                class="text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal"
-                [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="data-[selected]:data-[outside]:bg-accent/50 data-[selected]:bg-accent relative h-8 w-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:data-[selected]:rounded-l-md last:data-[selected]:rounded-r-md [&:has([aria-selected].day-range-end)]:rounded-r-md"
-                >
-                  <button brnCalendarCellButton [date]="date" [class]="_btnClass">
-                    {{ _dateAdapter.getDate(date) }}
-                  </button>
-                </td>
-              }
-            </tr>
-          </tbody>
-        </table>
+        <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: BrnCalendarHeader, selector: "[brnCalendarHeader]", inputs: ["id"] }, { kind: "directive", type: BrnCalendarNextButton, selector: "[brnCalendarNextButton]" }, { kind: "directive", type: BrnCalendarPreviousButton, selector: "[brnCalendarPreviousButton]" }, { kind: "directive", type: BrnCalendarWeekday, selector: "[brnCalendarWeekday]" }, { kind: "directive", type: BrnCalendarWeek, selector: "[brnCalendarWeek]" }, { kind: "directive", type: BrnCalendarCellButton, selector: "button[brnCalendarCellButton]", inputs: ["date"] }, { kind: "directive", type: BrnCalendarCell, selector: "[brnCalendarCell]" }, { kind: "directive", type: BrnCalendarGrid, selector: "[brnCalendarGrid]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }, { kind: "directive", type: BrnCalendarRange, selector: "[brnCalendarRange]", inputs: ["min", "max", "disabled", "dateDisabled", "weekStartsOn", "defaultFocusedDate", "startDate", "endDate"], outputs: ["startDateChange", "endDateChange"] }], viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HlmCalendarRange, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCalendarRange, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-calendar-range',
-                    imports: [
-                        BrnCalendarHeader,
-                        BrnCalendarNextButton,
-                        BrnCalendarPreviousButton,
-                        BrnCalendarWeekday,
-                        BrnCalendarWeek,
-                        BrnCalendarCellButton,
-                        BrnCalendarCell,
-                        BrnCalendarGrid,
-                        NgIcon,
-                        HlmIcon,
-                        BrnCalendarRange,
-                    ],
+                    imports: [BrnCalendarImports, NgIcon, HlmSelectImports, NgTemplateOutlet, HlmButtonImports],
                     viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [
+                        {
+                            directive: BrnCalendarRange,
+                            inputs: [
+                                'min',
+                                'max',
+                                'disabled',
+                                'startDate',
+                                'endDate',
+                                'dateDisabled',
+                                'weekStartsOn',
+                                'highlightDays',
+                                'defaultFocusedDate',
+                            ],
+                            outputs: ['endDateChange', 'startDateChange'],
+                        },
+                    ],
+                    host: { 'data-slot': 'calendar' },
                     template: `
-    <div
-      brnCalendarRange
-      [min]="min()"
-      [max]="max()"
-      [disabled]="disabled()"
-      [(startDate)]="startDate"
-      [(endDate)]="endDate"
-      [dateDisabled]="dateDisabled()"
-      [weekStartsOn]="weekStartsOn()"
-      [defaultFocusedDate]="defaultFocusedDate()"
-      [class]="_computedCalenderClass()"
-    >
-      <div class="inline-flex flex-col space-y-4">
-        <!-- Header -->
-        <div class="space-y-4">
-          <div class="relative flex items-center justify-center pt-1">
-            <div brnCalendarHeader class="text-sm font-medium">
-              {{ _heading() }}
-            </div>
-
-            <div class="flex items-center space-x-1">
-              <button
-                brnCalendarPreviousButton
-                class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute left-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-              >
-                <ng-icon hlm name="lucideChevronLeft" size="sm" />
-              </button>
+    <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>
 
-              <button
-                brnCalendarNextButton
-                class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute right-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+      <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)"
               >
-                <ng-icon hlm name="lucideChevronRight" size="sm" />
+                <button brnCalendarCellButton [date]="date" [class]="_btnClass">
+                  {{ _dateAdapter.getDate(date) }}
+                </button>
+              </td>
+            }
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }] } });
+
+class HlmMonthYearCalendar {
+    /** Access the calendar i18n */
+    _i18n = injectBrnCalendarI18n();
+    /** Access the date adapter */
+    _dateAdapter = injectDateAdapter();
+    /** Access the picker directive */
+    _picker = inject((BrnMonthYearCalendar));
+    /** The heading for the current view. */
+    _heading = computed(() => {
+        const config = this._i18n.config();
+        if (this._picker.view() === 'month') {
+            return config.formatYear(this._dateAdapter.getYear(this._picker.focusedDate()));
+        }
+        const { start, end } = this._picker.yearRange();
+        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)');
+    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');
+    }
+    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>
+            }
           </div>
-        </div>
-
-        <table class="w-full border-collapse space-y-1" brnCalendarGrid>
-          <thead>
-            <tr class="flex">
-              <th
-                *brnCalendarWeekday="let weekday"
-                scope="col"
-                class="text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal"
-                [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="data-[selected]:data-[outside]:bg-accent/50 data-[selected]:bg-accent relative h-8 w-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:data-[selected]:rounded-l-md last:data-[selected]:rounded-r-md [&:has([aria-selected].day-range-end)]:rounded-r-md"
-                >
-                  <button brnCalendarCellButton [date]="date" [class]="_btnClass">
-                    {{ _dateAdapter.getDate(date) }}
-                  </button>
-                </td>
-              }
-            </tr>
-          </tbody>
-        </table>
+        }
+        @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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmMonthYearCalendar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-month-year-calendar',
+                    imports: [BrnCalendarImports, NgIcon, HlmButtonImports],
+                    viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [
+                        {
+                            directive: BrnMonthYearCalendar,
+                            inputs: ['min', 'max', 'disabled', 'date', 'defaultFocusedDate', 'view'],
+                            outputs: ['dateChange'],
+                        },
+                    ],
+                    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>
   `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { calendarClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarClass", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], startDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDate", required: false }] }, { type: i0.Output, args: ["startDateChange"] }], endDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDate", required: false }] }, { type: i0.Output, args: ["endDateChange"] }], dateDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateDisabled", required: false }] }], weekStartsOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStartsOn", required: false }] }], defaultFocusedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFocusedDate", required: false }] }], _calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnCalendarRange), { isSignal: true }] }] } });
+        }], ctorParameters: () => [] });
 
 /*
  * Public API Surface of calendar
  */
-const HlmCalendarImports = [HlmCalendar, HlmCalendarMulti, HlmCalendarRange];
+const HlmCalendarImports = [HlmCalendar, HlmCalendarMulti, HlmCalendarRange, HlmMonthYearCalendar];
 class HlmCalendarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HlmCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: HlmCalendarModule, imports: [HlmCalendar, HlmCalendarMulti, HlmCalendarRange], exports: [HlmCalendar, HlmCalendarMulti, HlmCalendarRange] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HlmCalendarModule, imports: [HlmCalendarImports] });
+    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] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HlmCalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmCalendarImports],
@@ -633,5 +955,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { HlmCalendar, HlmCalendarImports, HlmCalendarModule, HlmCalendarMulti, HlmCalendarRange };
+export { HlmCalendar, HlmCalendarImports, HlmCalendarModule, HlmCalendarMulti, HlmCalendarRange, HlmMonthYearCalendar };
 //# sourceMappingURL=calendar.mjs.map