@nanahoshi/mona-ui 0.1.1 → 0.2.1

package/fesm2022/nanahoshi-mona-ui-calendar.mjs

@@ -7,8 +7,7 @@ import { any, exactly, Dictionary, lastOrDefault, range, index, select } from '@
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import { PreventableEvent, TakeFirstPipe } from '@nanahoshi/mona-ui/common';
 import { CalendarService } from '@nanahoshi/mona-ui/date-input';
-import { createElementControlId, rxTimeout } from '@nanahoshi/mona-ui/internal';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { themeRaisedBackdropClasses, createElementControlId, rxTimeout } from '@nanahoshi/mona-ui/internal';
 import { DateTime } from 'luxon';
 import { skip, fromEvent } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
@@ -56,17 +55,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const calendarBaseVariants = cva(`
-        flex flex-col gap-2 p-2 min-w-64
-        bg-background text-foreground
-        border border-input-border
-        shadow-sm select-none
+const calendarBaseThemeVariants = cva(`
+        flex min-w-64 flex-col gap-2 p-2
+        select-none
+        bg-(--mona-calendar-background) ${themeRaisedBackdropClasses} text-foreground
+        border border-border shadow-(--mona-calendar-shadow)
         data-[invalid='true']:border-error
-        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/35
     `, {
     variants: {
         disabled: {
-            true: "opacity-50 cursor-not-allowed pointer-events-none"
+            true: "pointer-events-none cursor-not-allowed opacity-50"
         },
         readonly: {
             true: "pointer-events-none"
@@ -80,7 +79,7 @@ const calendarBaseVariants = cva(`
         }
     }
 });
-const calendarHeaderVariants = cva(`
+const calendarHeaderThemeVariants = cva(`
         flex items-center justify-center
         [&>button+button]:not-focus:border-s-0
         [&>button:nth-of-type(2)]:flex-1
@@ -90,21 +89,22 @@ const calendarHeaderVariants = cva(`
         [&>button:nth-of-type(4)]:rounded-es-none
         [&>button]:outline-none
     `);
-const calendarMonthViewDayVariants = cva(`
-        hover:bg-hover cursor-pointer
+const calendarMonthViewDayThemeVariants = cva(`
+        cursor-pointer
+        hover:bg-hover active:bg-active
     `, {
     variants: {
         disabled: {
-            true: "opacity-50 cursor-not-allowed pointer-events-none"
+            true: "pointer-events-none cursor-not-allowed text-disabled-foreground"
         },
         focused: {
-            true: "ring-1 ring-inset ring-primary/40 bg-accent outline-none"
+            true: "bg-hover outline-none ring-2 ring-inset ring-focus-indicator/35"
         },
         outside: {
-            true: "opacity-50"
+            true: "text-muted-foreground"
         },
         rangePreview: {
-            true: "bg-primary/20 hover:bg-primary/30"
+            true: "bg-active hover:bg-active"
         },
         rounded: {
             none: "rounded-none",
@@ -117,7 +117,7 @@ const calendarMonthViewDayVariants = cva(`
             true: "bg-primary text-primary-foreground hover:bg-primary-hover"
         },
         today: {
-            true: "font-bold text-primary"
+            true: "font-bold text-foreground"
         }
     },
     compoundVariants: [
@@ -131,35 +131,31 @@ const calendarMonthViewDayVariants = cva(`
         rounded: "medium"
     }
 });
-const calendarMonthViewGridVariants = cva(`
-        grid gap-0.5
-        justify-center
-        [&>div]:h-full [&>div]:flex
-        [&>div]:items-center [&>div]:justify-center
+const calendarMonthViewGridThemeVariants = cva(`
+        grid justify-center gap-0.5
         [&>div]:aspect-square
-    `);
-const calendarMonthViewGridHeaderVariants = cva(`
-        grid justify-center
-        gap-0.5 font-semibold text-sm
-        [&>div]:h-full [&>div]:flex
+        [&>div]:flex [&>div]:h-full
         [&>div]:items-center [&>div]:justify-center
+    `);
+const calendarMonthViewGridHeaderThemeVariants = cva(`
+        grid justify-center gap-0.5
+        text-sm font-semibold text-muted-foreground
         [&>div]:aspect-square
+        [&>div]:flex [&>div]:h-full
+        [&>div]:items-center [&>div]:justify-center
     `);
-const calendarYearViewGridVariants = cva(`
-        grid grid-cols-3 gap-0.5
-        justify-center
-        [&>div]:h-full [&>div]:flex
+const calendarYearViewGridThemeVariants = cva(`
+        grid grid-cols-3 justify-center gap-0.5
+        [&>div]:flex [&>div]:h-12
         [&>div]:items-center [&>div]:justify-center
-        [&>div]:h-12
     `);
-const calendarYearViewCellVariants = cva(`
-        py-2 cursor-pointer
-        hover:bg-hover
-        active:bg-active
+const calendarYearViewCellThemeVariants = cva(`
+        cursor-pointer py-2
+        hover:bg-hover active:bg-active
     `, {
     variants: {
         focused: {
-            true: "ring-1 ring-inset ring-primary/40 bg-accent outline-none"
+            true: "bg-hover outline-none ring-2 ring-inset ring-focus-indicator/35"
         },
         rounded: {
             none: "rounded-none",
@@ -170,21 +166,18 @@ const calendarYearViewCellVariants = cva(`
         }
     }
 });
-const calendarDecadeViewGridVariants = cva(`
-        grid grid-cols-4 gap-0.5
-        justify-center
-        [&>div]:h-full [&>div]:flex
+const calendarDecadeViewGridThemeVariants = cva(`
+        grid grid-cols-4 justify-center gap-0.5
+        [&>div]:flex [&>div]:h-12
         [&>div]:items-center [&>div]:justify-center
-        [&>div]:h-12
     `);
-const calendarDecadeViewCellVariants = cva(`
-        py-2 cursor-pointer
-        hover:bg-hover
-        active:bg-active
+const calendarDecadeViewCellThemeVariants = cva(`
+        cursor-pointer py-2
+        hover:bg-hover active:bg-active
     `, {
     variants: {
         focused: {
-            true: "ring-1 ring-inset ring-primary/40 bg-accent outline-none"
+            true: "bg-hover outline-none ring-2 ring-inset ring-focus-indicator/35"
         },
         rounded: {
             none: "rounded-none",
@@ -196,89 +189,14 @@ const calendarDecadeViewCellVariants = cva(`
     }
 });
 
-const calendarBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarBaseVariants;
-        default:
-            return calendarBaseVariants;
-    }
-};
-const calendarHeaderThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarHeaderVariants;
-        default:
-            return calendarHeaderVariants;
-    }
-};
-const calendarDecadeViewGridThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarDecadeViewGridVariants;
-        default:
-            return calendarDecadeViewGridVariants;
-    }
-};
-const calendarDecadeViewCellThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarDecadeViewCellVariants;
-        default:
-            return calendarDecadeViewCellVariants;
-    }
-};
-const calendarMonthViewDayThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarMonthViewDayVariants;
-        default:
-            return calendarMonthViewDayVariants;
-    }
-};
-const calendarMonthViewGridThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarMonthViewGridVariants;
-        default:
-            return calendarMonthViewGridVariants;
-    }
-};
-const calendarMonthViewGridHeaderThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarMonthViewGridHeaderVariants;
-        default:
-            return calendarMonthViewGridHeaderVariants;
-    }
-};
-const calendarYearViewGridThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarYearViewGridVariants;
-        default:
-            return calendarYearViewGridVariants;
-    }
-};
-const calendarYearViewCellThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarYearViewCellVariants;
-        default:
-            return calendarYearViewCellVariants;
-    }
-};
-
 class DecadeYearDirective {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.ariaLabel = computed(() => `Year ${this.year()}`, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const focused = this.focused();
             const rounded = this.rounded();
-            return calendarDecadeViewCellThemeVariants(theme)({ focused, rounded });
+            return calendarDecadeViewCellThemeVariants({ focused, rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.focused = computed(() => {
@@ -307,7 +225,6 @@ class DecadeYearDirective {
         this.year = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "year" }] : /* istanbul ignore next */ []));
     }
-    #themeService;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DecadeYearDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: DecadeYearDirective, isStandalone: true, selector: "[monaDecadeYear]", inputs: { navigatedDate: { classPropertyName: "navigatedDate", publicName: "navigatedDate", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "gridcell" }, properties: { "attr.tabindex": "focused() ? 0 : -1", "attr.aria-current": "isCurrent() ? 'true' : null", "attr.aria-label": "ariaLabel()", "attr.aria-selected": "selected() ? 'true' : null", "class": "baseClass()" } }, ngImport: i0 }); }
 }
@@ -369,9 +286,7 @@ const compareDates = (date1, date2, operator) => {
 
 class MonthDayDirective {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const disabled = this.dayDisabled();
             const focused = this.focused();
             const outside = this.outside();
@@ -379,7 +294,7 @@ class MonthDayDirective {
             const rounded = this.rounded();
             const selected = this.selected();
             const today = this.isToday();
-            return calendarMonthViewDayThemeVariants(theme)({
+            return calendarMonthViewDayThemeVariants({
                 disabled,
                 focused,
                 outside,
@@ -462,7 +377,6 @@ class MonthDayDirective {
         this.value = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     }
-    #themeService;
     onClick(event) {
         if (this.dayDisabled()) {
             return;
@@ -477,7 +391,7 @@ class MonthDayDirective {
         this.dayPointerEnter.emit(this.entry().key);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MonthDayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: MonthDayDirective, isStandalone: true, selector: "[monaMonthDay]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: true, transformFunction: null }, entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, monthBounds: { classPropertyName: "monthBounds", publicName: "monthBounds", isSignal: true, isRequired: true, transformFunction: null }, navigatedDate: { classPropertyName: "navigatedDate", publicName: "navigatedDate", isSignal: true, isRequired: true, transformFunction: null }, rangePreview: { classPropertyName: "rangePreview", publicName: "rangePreview", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dayPointerEnter: "dayPointerEnter", daySelect: "daySelect" }, host: { listeners: { "click": "onClick($event)", "pointerenter": "onPointerEnter()" }, properties: { "attr.tabindex": "focused() ? 0 : -1", "attr.aria-selected": "selected() ? 'true' : null", "attr.aria-current": "isToday() ? 'date' : null", "attr.aria-disabled": "dayDisabled() ? 'true' : null", "attr.data-range-preview": "rangePreviewed() ? 'true' : null", "class": "baseClass()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: MonthDayDirective, isStandalone: true, selector: "[monaMonthDay]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: true, transformFunction: null }, entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, monthBounds: { classPropertyName: "monthBounds", publicName: "monthBounds", isSignal: true, isRequired: true, transformFunction: null }, navigatedDate: { classPropertyName: "navigatedDate", publicName: "navigatedDate", isSignal: true, isRequired: true, transformFunction: null }, rangePreview: { classPropertyName: "rangePreview", publicName: "rangePreview", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dayPointerEnter: "dayPointerEnter", daySelect: "daySelect" }, host: { attributes: { "role": "button" }, listeners: { "click": "onClick($event)", "pointerenter": "onPointerEnter()" }, properties: { "attr.tabindex": "focused() ? 0 : -1", "attr.aria-pressed": "selected() ? 'true' : 'false'", "attr.aria-current": "isToday() ? 'date' : null", "attr.aria-disabled": "dayDisabled() ? 'true' : null", "attr.data-range-preview": "rangePreviewed() ? 'true' : null", "class": "baseClass()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MonthDayDirective, decorators: [{
             type: Directive,
@@ -485,30 +399,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     selector: "[monaMonthDay]",
                     host: {
                         "[attr.tabindex]": "focused() ? 0 : -1",
-                        "[attr.aria-selected]": "selected() ? 'true' : null",
+                        "[attr.aria-pressed]": "selected() ? 'true' : 'false'",
                         "[attr.aria-current]": "isToday() ? 'date' : null",
                         "[attr.aria-disabled]": "dayDisabled() ? 'true' : null",
                         "[attr.data-range-preview]": "rangePreviewed() ? 'true' : null",
                         "[class]": "baseClass()",
                         "(click)": "onClick($event)",
-                        "(pointerenter)": "onPointerEnter()"
+                        "(pointerenter)": "onPointerEnter()",
+                        role: "button"
                     }
                 }]
         }], propDecorators: { dayPointerEnter: [{ type: i0.Output, args: ["dayPointerEnter"] }], daySelect: [{ type: i0.Output, args: ["daySelect"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: true }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: true }] }], entry: [{ type: i0.Input, args: [{ isSignal: true, alias: "entry", required: true }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: true }] }], monthBounds: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthBounds", required: true }] }], navigatedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigatedDate", required: true }] }], rangePreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangePreview", required: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
 
 class YearMonthDirective {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.ariaLabel = computed(() => {
             const monthName = this.monthName();
             return `${monthName} ${this.navigatedDate().getFullYear()}`;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const focused = this.focused();
             const rounded = this.rounded();
-            return calendarYearViewCellThemeVariants(theme)({ focused, rounded });
+            return calendarYearViewCellThemeVariants({ focused, rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.focused = computed(() => {
@@ -543,7 +456,6 @@ class YearMonthDirective {
         this.selectedDate = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "selectedDate" }] : /* istanbul ignore next */ []));
     }
-    #themeService;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: YearMonthDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: YearMonthDirective, isStandalone: true, selector: "[monaYearMonth]", inputs: { month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: true, transformFunction: null }, monthName: { classPropertyName: "monthName", publicName: "monthName", isSignal: true, isRequired: true, transformFunction: null }, navigatedDate: { classPropertyName: "navigatedDate", publicName: "navigatedDate", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "gridcell" }, properties: { "attr.tabindex": "focused() ? 0 : -1", "attr.aria-current": "isCurrent() ? 'date' : null", "attr.aria-label": "ariaLabel()", "attr.aria-selected": "selected() ? 'true' : null", "class": "baseClass()" } }, ngImport: i0 }); }
 }
@@ -568,7 +480,6 @@ class CalendarComponent {
     #hostElementRef;
     #monthDict;
     #outputValue;
-    #themeService;
     constructor() {
         this.#calendarService = inject(CalendarService, { optional: true });
         this.#destroyRef = inject(DestroyRef);
@@ -629,7 +540,6 @@ class CalendarComponent {
             return [];
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#outputValue" }] : /* istanbul ignore next */ []));
-        this.#themeService = inject(ThemeService);
         this.ariaLabel = computed(() => {
             const view = this.calendarView();
             const navigatedDate = this.navigatedDate();
@@ -645,11 +555,10 @@ class CalendarComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const disabled = this.disabled();
             const readonly = this.readonly();
             const rounded = this.rounded() === "full" ? "large" : this.rounded();
-            const variantClass = calendarBaseThemeVariants(theme)({ disabled, readonly, rounded });
+            const variantClass = calendarBaseThemeVariants({ disabled, readonly, rounded });
             const userClass = this.userClass();
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
@@ -663,8 +572,7 @@ class CalendarComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "decadeEnd" }] : /* istanbul ignore next */ []));
         this.decadeGridClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return calendarDecadeViewGridThemeVariants(theme)();
+            return calendarDecadeViewGridThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "decadeGridClass" }] : /* istanbul ignore next */ []));
         this.decadeStart = computed(() => {
@@ -684,11 +592,10 @@ class CalendarComponent {
         ...(ngDevMode ? [{ debugName: "decadeYears" }] : /* istanbul ignore next */ []));
         this.gridId = createElementControlId();
         this.headerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return calendarHeaderThemeVariants(theme)({});
+            return calendarHeaderThemeVariants({});
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
-        this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && this.isEmptyValue()), /* @ts-ignore */
+        this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && this.isEmptyValue())), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.monthBounds = computed(() => {
             const navigatedDate = this.navigatedDate();
@@ -708,13 +615,11 @@ class CalendarComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "monthDictChunked" }] : /* istanbul ignore next */ []));
         this.monthGridClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return calendarMonthViewGridThemeVariants(theme)();
+            return calendarMonthViewGridThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "monthGridClass" }] : /* istanbul ignore next */ []));
         this.monthGridHeaderClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return calendarMonthViewGridHeaderThemeVariants(theme)();
+            return calendarMonthViewGridHeaderThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "monthGridHeaderClass" }] : /* istanbul ignore next */ []));
         this.months = computed(() => {
@@ -821,8 +726,7 @@ class CalendarComponent {
         this.yearCellTemplate = contentChild(CalendarYearCellTemplateDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yearCellTemplate" }] : /* istanbul ignore next */ []));
         this.yearGridClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return calendarYearViewGridThemeVariants(theme)();
+            return calendarYearViewGridThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yearGridClass" }] : /* istanbul ignore next */ []));
         /**