@nanahoshi/mona-ui 0.1.0 → 0.2.0

package/fesm2022/nanahoshi-mona-ui-color-picker.mjs

@@ -2,16 +2,15 @@ import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Directive, inject, DestroyRef, ElementRef, signal, computed, viewChild, contentChild, TemplateRef, input, output, model, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i1 from '@fortawesome/angular-fontawesome';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { faTimes, faChevronDown } from '@fortawesome/free-solid-svg-icons';
-import { take, fromEvent, takeUntil } from 'rxjs';
+import { LucideCircleX } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
-import { PopupService, dropdownPopupAnimation } from '@nanahoshi/mona-ui/popup';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
-import { createElementControlId } from '@nanahoshi/mona-ui/internal';
 import { ColorGradientComponent } from '@nanahoshi/mona-ui/color-gradient';
 import { ColorPaletteComponent } from '@nanahoshi/mona-ui/color-palette';
+import { themeControlSurfaceClasses, themeOverlaySurfaceClasses, createElementControlId } from '@nanahoshi/mona-ui/internal';
+import { IndicatorIconComponent } from '@nanahoshi/mona-ui/internal/indicator-icon';
+import { PopupService, dropdownPopupAnimation } from '@nanahoshi/mona-ui/popup';
+import { take, fromEvent, takeUntil } from 'rxjs';
+import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
 class ColorPickerValueTemplateDirective {
@@ -25,32 +24,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const colorPickerBaseVariants = cva(`
-        flex items-center
-        border border-input-border
-        bg-background outline-none
-        shadow-xs
-        cursor-pointer
-
-        hover:bg-accent hover:text-accent-foreground
-
-        transition-[color,box-shadow,border] ease-in-out duration-300
-
-        data-[disabled='true']:pointer-events-none
-        data-[disabled='true']:cursor-not-allowed
-        data-[disabled='true']:opacity-50
-        data-[readonly='true']:cursor-default
-        data-[invalid='true']:border-error
-        data-[invalid='true']:ring-1
-        data-[invalid='true']:ring-error
-
-        focus-within:ring-1 focus-within:ring-primary/40
-
-        [&.ng-touched.ng-invalid]:border-error
+const colorPickerBaseThemeVariants = cva(`
+        flex items-center
+        cursor-pointer
+        ${themeControlSurfaceClasses} text-foreground
+        border border-input-border
+        shadow-(--shadow-control) outline-none
+        transition-[color,box-shadow,border] duration-(--mona-motion-standard) ease-in-out
+
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:border-disabled-border
+        data-[disabled='true']:bg-disabled-background
+        data-[disabled='true']:text-disabled-foreground
+        data-[disabled='true']:shadow-none
+        data-[readonly='true']:cursor-default
+
+        hover:bg-hover active:bg-active
+
+        focus-within:border-focus-indicator
+        focus-within:ring-2 focus-within:ring-focus-indicator/35
+
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/35
+        data-[invalid='true']:focus-within:border-error
+        data-[invalid='true']:focus-within:ring-error/35
+        [&.ng-touched.ng-invalid]:border-error
+        [&.ng-touched.ng-invalid]:ring-2 [&.ng-touched.ng-invalid]:ring-error/35
+        [&.ng-touched.ng-invalid]:focus-within:border-error
+        [&.ng-touched.ng-invalid]:focus-within:ring-error/35
     `, {
     variants: {
         expanded: {
-            true: "ring-1 ring-primary/40"
+            true: "border-focus-indicator ring-2 ring-focus-indicator/35",
+            false: ""
         },
         rounded: {
             none: "rounded-none",
@@ -64,11 +71,17 @@ const colorPickerBaseVariants = cva(`
             medium: "h-9 text-sm",
             small: "h-8 text-xs"
         }
-    }
+    },
+    compoundVariants: [
+        {
+            expanded: true,
+            class: "data-[invalid='true']:border-error data-[invalid='true']:ring-error/35"
+        }
+    ]
 });
-const colorPickerColorVariants = cva(`
-        flex items-center justify-center
-        mx-1
+const colorPickerColorThemeVariants = cva(`
+        flex items-center justify-center
+        mx-1
     `, {
     variants: {
         rounded: {
@@ -79,30 +92,13 @@ const colorPickerColorVariants = cva(`
             full: "rounded-full"
         },
         size: {
-            large: "w-6 h-6 mx-2",
-            medium: "w-5 h-5 mx-2",
-            small: "w-4 h-4 mx-1"
+            large: "mx-2 h-6 w-6",
+            medium: "mx-2 h-5 w-5",
+            small: "mx-1 h-4 w-4"
         }
     }
 });
 
-const colorPickerBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return colorPickerBaseVariants;
-        default:
-            return colorPickerBaseVariants;
-    }
-};
-const colorPickerColorThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return colorPickerColorVariants;
-        default:
-            return colorPickerColorVariants;
-    }
-};
-
 class ColorPickerComponent {
     constructor() {
         this.#destroyRef = inject(DestroyRef);
@@ -110,28 +106,25 @@ class ColorPickerComponent {
         this.#popupService = inject(PopupService);
         this.#popupRef = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#popupRef" }] : /* istanbul ignore next */ []));
-        this.#themeService = inject(ThemeService);
         this.baseClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const expanded = this.expanded();
             const rounded = this.rounded();
             const size = this.size();
-            return colorPickerBaseThemeVariants(theme)({ expanded, rounded, size });
+            return twMerge(colorPickerBaseThemeVariants({ expanded, rounded, size }));
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
         this.colorClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
             const size = this.size();
-            return colorPickerColorThemeVariants(theme)({ rounded, size });
+            return colorPickerColorThemeVariants({ rounded, size });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "colorClasses" }] : /* istanbul ignore next */ []));
         this.expanded = computed(() => this.#popupRef() !== null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
         this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && !this.value()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
-        this.noColorIcon = faTimes;
-        this.dropdownIcon = faChevronDown;
+        this.gradientPopupClasses = `${themeOverlaySurfaceClasses} border border-border shadow-(--shadow-overlay)`;
+        this.palettePopupClasses = `flex flex-col p-0.5 ${themeOverlaySurfaceClasses} border border-border shadow-(--shadow-overlay) outline-none`;
         this.popupId = createElementControlId();
         this.popupTemplate = viewChild.required("popupTemplate", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "popupTemplate" }] : /* istanbul ignore next */ []));
@@ -241,7 +234,6 @@ class ColorPickerComponent {
     #hostElementRef;
     #popupService;
     #popupRef;
-    #themeService;
     ngOnInit() {
         this.setEventListeners();
         this.setKeyboardEventListeners();
@@ -459,11 +451,18 @@ class ColorPickerComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ColorPickerComponent, isStandalone: true, selector: "mona-color-picker", inputs: { closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch", value: "valueChange" }, host: { properties: { "class": "baseClasses()", "attr.tabindex": "disabled() ? -1 : 0", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.data-open": "expanded() || null", "attr.data-readonly": "readonly()", "attr.data-required": "required() || null", "attr.role": "'combobox'", "attr.aria-controls": "popupId", "attr.aria-expanded": "expanded() || null", "attr.aria-haspopup": "'dialog'", "attr.aria-label": "'Color picker'", "attr.aria-disabled": "disabled()", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.aria-readonly": "readonly()", "attr.aria-required": "required()" } }, queries: [{ propertyName: "valueTemplate", first: true, predicate: ColorPickerValueTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (valueTemplate()) {\n    <ng-container\n        [ngTemplateOutlet]=\"valueTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"{ $implicit: value() }\"></ng-container>\n} @else {\n    <div [style.background]=\"value()\" [class]=\"colorClasses()\">\n        @if (!value()) {\n            <fa-icon [icon]=\"noColorIcon\"></fa-icon>\n        }\n    </div>\n}\n<div>\n    <button monaButton look=\"link\" [tabindex]=\"-1\" class=\"px-2 py-1\">\n        <fa-icon [icon]=\"dropdownIcon\"></fa-icon>\n    </button>\n</div>\n\n<ng-template #popupTemplate>\n    @if (view() === \"palette\") {\n        <div\n            [id]=\"popupId\"\n            class=\"flex flex-col border border-input-border bg-background shadow-lg p-0.5 outline-none\"\n            tabindex=\"0\"\n            role=\"dialog\"\n            aria-label=\"Color palette picker\"\n            data-palette-container\n            (keydown)=\"onPaletteContainerKeyDown($event)\">\n            @if (showClearButton()) {\n                <div class=\"flex items-center justify-end p-1\">\n                    <button monaButton look=\"ghost\" size=\"small\" (click)=\"onClearClick()\">\n                        <i class=\"ri-blur-off-line\"></i>\n                    </button>\n                </div>\n            }\n            <mona-color-palette\n                [palette]=\"palette()\"\n                [columns]=\"columns()\"\n                [readonly]=\"readonly()\"\n                [value]=\"value()\"\n                (valueChange)=\"onColorPaletteValueChange($event)\"\n                (touch)=\"onColorPaletteTouch()\"></mona-color-palette>\n        </div>\n    } @else if (view() === \"gradient\") {\n        <div\n            [id]=\"popupId\"\n            class=\"border border-input-border bg-background shadow-lg\"\n            tabindex=\"0\"\n            role=\"dialog\"\n            aria-label=\"Color gradient picker\">\n            <mona-color-gradient\n                [opacity]=\"opacity()\"\n                [rounded]=\"rounded()\"\n                [disabled]=\"disabled() || readonly()\"\n                [value]=\"value()\"\n                (valueChange)=\"onColorGradientValueChange($event)\"\n                (touch)=\"onColorGradientTouch()\"\n                (apply)=\"onColorGradientApply()\"\n                (cancel)=\"onColorGradientCancel()\"></mona-color-gradient>\n        </div>\n    }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: ColorPaletteComponent, selector: "mona-color-palette", inputs: ["columns", "disabled", "invalid", "palette", "readonly", "rounded", "required", "tileSize", "touched", "value"], outputs: ["touch", "valueChange"] }, { kind: "component", type: ColorGradientComponent, selector: "mona-color-gradient", inputs: ["disabled", "format", "invalid", "opacity", "required", "rounded", "showButtons", "showHexInput", "showColorInputs", "touched", "value"], outputs: ["apply", "cancel", "touch", "valueChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ColorPickerComponent, isStandalone: true, selector: "mona-color-picker", inputs: { closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch", value: "valueChange" }, host: { properties: { "class": "baseClasses()", "attr.tabindex": "disabled() ? -1 : 0", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.data-open": "expanded() || null", "attr.data-readonly": "readonly()", "attr.data-required": "required() || null", "attr.role": "'combobox'", "attr.aria-controls": "popupId", "attr.aria-expanded": "expanded() || null", "attr.aria-haspopup": "'dialog'", "attr.aria-label": "'Color picker'", "attr.aria-disabled": "disabled()", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.aria-readonly": "readonly()", "attr.aria-required": "required()" } }, queries: [{ propertyName: "valueTemplate", first: true, predicate: ColorPickerValueTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (valueTemplate()) {\n    <ng-container\n        [ngTemplateOutlet]=\"valueTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"{ $implicit: value() }\"></ng-container>\n} @else {\n    <div [style.background]=\"value()\" [class]=\"colorClasses()\">\n        @if (!value()) {\n            <svg lucideXCircle [size]=\"16\"></svg>\n        }\n    </div>\n}\n<mona-indicator-icon preset=\"dropdown\" [size]=\"18\"></mona-indicator-icon>\n\n<ng-template #popupTemplate>\n    @if (view() === \"palette\") {\n        <div\n            [id]=\"popupId\"\n            [class]=\"palettePopupClasses\"\n            tabindex=\"0\"\n            role=\"dialog\"\n            aria-label=\"Color palette picker\"\n            data-palette-container\n            (keydown)=\"onPaletteContainerKeyDown($event)\">\n            @if (showClearButton()) {\n                <div class=\"flex items-center justify-end p-1\">\n                    <button monaButton look=\"ghost\" size=\"small\" (click)=\"onClearClick()\">\n                        <i class=\"ri-blur-off-line\"></i>\n                    </button>\n                </div>\n            }\n            <mona-color-palette\n                [palette]=\"palette()\"\n                [columns]=\"columns()\"\n                [readonly]=\"readonly()\"\n                [value]=\"value()\"\n                (valueChange)=\"onColorPaletteValueChange($event)\"\n                (touch)=\"onColorPaletteTouch()\"></mona-color-palette>\n        </div>\n    } @else if (view() === \"gradient\") {\n        <div\n            [id]=\"popupId\"\n            [class]=\"gradientPopupClasses\"\n            tabindex=\"0\"\n            role=\"dialog\"\n            aria-label=\"Color gradient picker\">\n            <mona-color-gradient\n                [opacity]=\"opacity()\"\n                [rounded]=\"rounded()\"\n                [disabled]=\"disabled() || readonly()\"\n                [value]=\"value()\"\n                (valueChange)=\"onColorGradientValueChange($event)\"\n                (touch)=\"onColorGradientTouch()\"\n                (apply)=\"onColorGradientApply()\"\n                (cancel)=\"onColorGradientCancel()\"></mona-color-gradient>\n        </div>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: ColorPaletteComponent, selector: "mona-color-palette", inputs: ["columns", "disabled", "invalid", "palette", "readonly", "rounded", "required", "tileSize", "touched", "value"], outputs: ["touch", "valueChange"] }, { kind: "component", type: ColorGradientComponent, selector: "mona-color-gradient", inputs: ["disabled", "format", "invalid", "opacity", "required", "rounded", "showButtons", "showHexInput", "showColorInputs", "touched", "value"], outputs: ["apply", "cancel", "touch", "valueChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideCircleX, selector: "svg[lucideCircleX], svg[lucideXCircle]" }, { kind: "component", type: IndicatorIconComponent, selector: "mona-indicator-icon", inputs: ["icon", "interactive", "label", "preset", "size", "class"], outputs: ["activate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-color-picker", imports: [FontAwesomeModule, ButtonDirective, ColorPaletteComponent, ColorGradientComponent, NgTemplateOutlet], host: {
+            args: [{ selector: "mona-color-picker", imports: [
+                        ButtonDirective,
+                        ColorPaletteComponent,
+                        ColorGradientComponent,
+                        NgTemplateOutlet,
+                        LucideCircleX,
+                        IndicatorIconComponent
+                    ], host: {
                         "[class]": "baseClasses()",
                         "[attr.tabindex]": "disabled() ? -1 : 0",
                         "[attr.data-disabled]": "disabled()",
@@ -480,7 +479,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.aria-invalid]": "invalidState() ? 'true' : null",
                         "[attr.aria-readonly]": "readonly()",
                         "[attr.aria-required]": "required()"
-                    }, template: "@if (valueTemplate()) {\n    <ng-container\n        [ngTemplateOutlet]=\"valueTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"{ $implicit: value() }\"></ng-container>\n} @else {\n    <div [style.background]=\"value()\" [class]=\"colorClasses()\">\n        @if (!value()) {\n            <fa-icon [icon]=\"noColorIcon\"></fa-icon>\n        }\n    </div>\n}\n<div>\n    <button monaButton look=\"link\" [tabindex]=\"-1\" class=\"px-2 py-1\">\n        <fa-icon [icon]=\"dropdownIcon\"></fa-icon>\n    </button>\n</div>\n\n<ng-template #popupTemplate>\n    @if (view() === \"palette\") {\n        <div\n            [id]=\"popupId\"\n            class=\"flex flex-col border border-input-border bg-background shadow-lg p-0.5 outline-none\"\n            tabindex=\"0\"\n            role=\"dialog\"\n            aria-label=\"Color palette picker\"\n            data-palette-container\n            (keydown)=\"onPaletteContainerKeyDown($event)\">\n            @if (showClearButton()) {\n                <div class=\"flex items-center justify-end p-1\">\n                    <button monaButton look=\"ghost\" size=\"small\" (click)=\"onClearClick()\">\n                        <i class=\"ri-blur-off-line\"></i>\n                    </button>\n                </div>\n            }\n            <mona-color-palette\n                [palette]=\"palette()\"\n                [columns]=\"columns()\"\n                [readonly]=\"readonly()\"\n                [value]=\"value()\"\n                (valueChange)=\"onColorPaletteValueChange($event)\"\n                (touch)=\"onColorPaletteTouch()\"></mona-color-palette>\n        </div>\n    } @else if (view() === \"gradient\") {\n        <div\n            [id]=\"popupId\"\n            class=\"border border-input-border bg-background shadow-lg\"\n            tabindex=\"0\"\n            role=\"dialog\"\n            aria-label=\"Color gradient picker\">\n            <mona-color-gradient\n                [opacity]=\"opacity()\"\n                [rounded]=\"rounded()\"\n                [disabled]=\"disabled() || readonly()\"\n                [value]=\"value()\"\n                (valueChange)=\"onColorGradientValueChange($event)\"\n                (touch)=\"onColorGradientTouch()\"\n                (apply)=\"onColorGradientApply()\"\n                (cancel)=\"onColorGradientCancel()\"></mona-color-gradient>\n        </div>\n    }\n</ng-template>\n" }]
+                    }, template: "@if (valueTemplate()) {\n    <ng-container\n        [ngTemplateOutlet]=\"valueTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"{ $implicit: value() }\"></ng-container>\n} @else {\n    <div [style.background]=\"value()\" [class]=\"colorClasses()\">\n        @if (!value()) {\n            <svg lucideXCircle [size]=\"16\"></svg>\n        }\n    </div>\n}\n<mona-indicator-icon preset=\"dropdown\" [size]=\"18\"></mona-indicator-icon>\n\n<ng-template #popupTemplate>\n    @if (view() === \"palette\") {\n        <div\n            [id]=\"popupId\"\n            [class]=\"palettePopupClasses\"\n            tabindex=\"0\"\n            role=\"dialog\"\n            aria-label=\"Color palette picker\"\n            data-palette-container\n            (keydown)=\"onPaletteContainerKeyDown($event)\">\n            @if (showClearButton()) {\n                <div class=\"flex items-center justify-end p-1\">\n                    <button monaButton look=\"ghost\" size=\"small\" (click)=\"onClearClick()\">\n                        <i class=\"ri-blur-off-line\"></i>\n                    </button>\n                </div>\n            }\n            <mona-color-palette\n                [palette]=\"palette()\"\n                [columns]=\"columns()\"\n                [readonly]=\"readonly()\"\n                [value]=\"value()\"\n                (valueChange)=\"onColorPaletteValueChange($event)\"\n                (touch)=\"onColorPaletteTouch()\"></mona-color-palette>\n        </div>\n    } @else if (view() === \"gradient\") {\n        <div\n            [id]=\"popupId\"\n            [class]=\"gradientPopupClasses\"\n            tabindex=\"0\"\n            role=\"dialog\"\n            aria-label=\"Color gradient picker\">\n            <mona-color-gradient\n                [opacity]=\"opacity()\"\n                [rounded]=\"rounded()\"\n                [disabled]=\"disabled() || readonly()\"\n                [value]=\"value()\"\n                (valueChange)=\"onColorGradientValueChange($event)\"\n                (touch)=\"onColorGradientTouch()\"\n                (apply)=\"onColorGradientApply()\"\n                (cancel)=\"onColorGradientCancel()\"></mona-color-gradient>\n        </div>\n    }\n</ng-template>\n" }]
         }], propDecorators: { popupTemplate: [{ type: i0.ViewChild, args: ["popupTemplate", { isSignal: true }] }], valueTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ColorPickerValueTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], opacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacity", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /*

package/fesm2022/nanahoshi-mona-ui-combo-box.mjs

@@ -4,36 +4,39 @@ import { inject, DestroyRef, ElementRef, linkedSignal, signal, computed, content
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { createElementControlId, rxTimeout } from '@nanahoshi/mona-ui/internal';
+import { FilterChangeEvent } from '@nanahoshi/mona-ui/common';
 import * as i1 from '@nanahoshi/mona-ui/dropdowns';
 import { DropdownListService, DropdownService, DropdownFooterTemplateDirective, DropdownGroupHeaderTemplateDirective, DropdownHeaderTemplateDirective, DropdownItemTemplateDirective, dropdownPopupThemeVariants, DropdownNoDataTemplateDirective, DropdownPrefixTemplateDirective, DropdownLiveRegionDirective, DropdownDataInputToken, DropdownPopupInputToken, DropdownDataHandlerDirective, DropdownListPopupHandlerDirective } from '@nanahoshi/mona-ui/dropdowns';
-import { FilterChangeEvent } from '@nanahoshi/mona-ui/common';
+import { themeControlSurfaceClasses, createElementControlId, rxTimeout } from '@nanahoshi/mona-ui/internal';
 import { IndicatorIconComponent } from '@nanahoshi/mona-ui/internal/indicator-icon';
 import { ListService, ListComponent, ListGroupHeaderTemplateDirective, ListFooterTemplateDirective, ListHeaderTemplateDirective, ListNoDataTemplateDirective, ListItemTemplateDirective } from '@nanahoshi/mona-ui/internal/list';
 import { TextBoxDirective } from '@nanahoshi/mona-ui/text-box';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { Subject, fromEvent, filter, debounceTime, take, tap } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
-const comboBoxBaseVariants = cva(`
-        flex items-center
-        border border-input-border outline-none
-        bg-background shadow-xs
-        cursor-pointer
-        focus-within:ring-1 focus-within:ring-primary/40
-        transition-[color,box-shadow,border] ease-in-out duration-300
+const comboBoxBaseThemeVariants = cva(`
+        flex items-center
+        cursor-pointer
+        ${themeControlSurfaceClasses} text-foreground
+        border border-input-border shadow-(--shadow-control) outline-none
+        transition-[color,box-shadow,border] duration-(--mona-motion-standard) ease-in-out
+        data-[readonly='true']:cursor-default
+        focus-within:border-focus-indicator focus-within:ring-2 focus-within:ring-focus-indicator/35
     `, {
     variants: {
         disabled: {
-            true: "pointer-events-none opacity-50 cursor-not-allowed"
+            true: `
+                    pointer-events-none cursor-not-allowed
+                    bg-disabled-background text-disabled-foreground
+                    border-disabled-border shadow-none
+                `
         },
         focused: {
-            true: "ring-1 ring-primary/40"
+            true: "border-focus-indicator ring-2 ring-focus-indicator/35"
         },
         invalid: {
-            true: "border-error ring-1 ring-error/40",
+            true: "border-error ring-2 ring-error/35 focus-within:border-error focus-within:ring-error/35",
             false: ""
         },
         rounded: {
@@ -49,6 +52,13 @@ const comboBoxBaseVariants = cva(`
             large: "h-10 text-md"
         }
     },
+    compoundVariants: [
+        {
+            focused: true,
+            invalid: true,
+            class: "border-error ring-error/35"
+        }
+    ],
     defaultVariants: {
         disabled: false,
         focused: false,
@@ -57,12 +67,11 @@ const comboBoxBaseVariants = cva(`
         size: "medium"
     }
 });
-const comboBoxTextInputVariants = cva(`
-        border-none outline-none
-        bg-transparent shadow-none
-        px-2 h-full w-full text-ellipsis
-        focus-within:ring-0 focus-within:shadow-none
-        focus-visible:ring-0 focus-visible:shadow-none
+const comboBoxTextInputThemeVariants = cva(`
+        h-full w-full px-2 text-ellipsis
+        bg-transparent border-none shadow-none outline-none
+        focus-within:ring-0 focus-within:shadow-none
+        focus-visible:ring-0 focus-visible:shadow-none
     `, {
     variants: {
         rounded: {
@@ -74,32 +83,7 @@ const comboBoxTextInputVariants = cva(`
         }
     }
 });
-const comboBoxAffixContainerVariants = cva(`h-full flex flex-none items-center justify-center`);
-
-const comboBoxBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return comboBoxBaseVariants;
-        default:
-            return comboBoxBaseVariants;
-    }
-};
-const comboBoxTextInputThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return comboBoxTextInputVariants;
-        default:
-            return comboBoxTextInputVariants;
-    }
-};
-const comboBoxAffixContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return comboBoxAffixContainerVariants;
-        default:
-            return comboBoxAffixContainerVariants;
-    }
-};
+const comboBoxAffixContainerThemeVariants = cva(`flex h-full flex-none items-center justify-center`);
 
 class ComboBoxComponent {
     #destroyRef;
@@ -109,7 +93,6 @@ class ComboBoxComponent {
     #listService;
     #navigatedValue;
     #popupRef;
-    #themeService;
     #userNavigatedViaArrows;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
@@ -120,7 +103,6 @@ class ComboBoxComponent {
         this.#navigatedValue = linkedSignal(() => this.value(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#navigatedValue" }] : /* istanbul ignore next */ []));
         this.#popupRef = this.#dropdownService.popupRef;
-        this.#themeService = inject(ThemeService);
         this.#userNavigatedViaArrows = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#userNavigatedViaArrows" }] : /* istanbul ignore next */ []));
         this.activeDescendant = computed(() => {
@@ -129,18 +111,16 @@ class ComboBoxComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeDescendant" }] : /* istanbul ignore next */ []));
         this.affixClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return comboBoxAffixContainerThemeVariants(theme)();
+            return comboBoxAffixContainerThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "affixClass" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const disabled = this.disabled();
             const focused = this.#popupRef() != null;
             const invalid = this.invalidState();
             const rounded = this.rounded();
             const size = this.size();
-            const variantClass = comboBoxBaseThemeVariants(theme)({ disabled, focused, invalid, rounded, size });
+            const variantClass = comboBoxBaseThemeVariants({ disabled, focused, invalid, rounded, size });
             const userClass = this.userClass();
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
@@ -157,9 +137,8 @@ class ComboBoxComponent {
         this.headerTemplate = contentChild(DropdownHeaderTemplateDirective, { ...(ngDevMode ? { debugName: "headerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.id = createElementControlId();
         this.inputClass = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
-            return comboBoxTextInputThemeVariants(theme)({ rounded });
+            return comboBoxTextInputThemeVariants({ rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
         this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && this.value() == null), /* @ts-ignore */
@@ -167,11 +146,10 @@ class ComboBoxComponent {
         this.itemTemplate = contentChild(DropdownItemTemplateDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.listId = createElementControlId();
         this.listPopupClass = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
             const size = this.size();
             const userClass = this.popupClass();
-            const variantClass = dropdownPopupThemeVariants(theme)({ rounded, size });
+            const variantClass = dropdownPopupThemeVariants({ rounded, size });
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listPopupClass" }] : /* istanbul ignore next */ []));
@@ -617,7 +595,7 @@ class ComboBoxComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ComboBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ComboBoxComponent, isStandalone: true, selector: "mona-combo-box", inputs: { allowCustomValue: { classPropertyName: "allowCustomValue", publicName: "allowCustomValue", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, itemDisabled: { classPropertyName: "itemDisabled", publicName: "itemDisabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, popupHeight: { classPropertyName: "popupHeight", publicName: "popupHeight", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", closed: "closed", disabled: "disabledChange", open: "open", opened: "opened", touch: "touch", valueAdd: "valueAdd", value: "valueChange" }, host: { properties: { "attr.aria-disabled": "disabled() ? true : undefined", "attr.aria-invalid": "invalidState() ? true : undefined", "attr.aria-readonly": "readonly() ? true : undefined", "attr.aria-required": "required() ? true : undefined", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.tabindex": "-1", "class": "baseClass()" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ComboBoxComponent, isStandalone: true, selector: "mona-combo-box", inputs: { allowCustomValue: { classPropertyName: "allowCustomValue", publicName: "allowCustomValue", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, itemDisabled: { classPropertyName: "itemDisabled", publicName: "itemDisabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, popupHeight: { classPropertyName: "popupHeight", publicName: "popupHeight", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", closed: "closed", disabled: "disabledChange", open: "open", opened: "opened", touch: "touch", valueAdd: "valueAdd", value: "valueChange" }, host: { properties: { "attr.aria-disabled": "disabled() ? true : undefined", "attr.aria-invalid": "invalidState() ? true : undefined", "attr.aria-readonly": "readonly() ? true : undefined", "attr.aria-required": "required() ? true : undefined", "attr.data-disabled": "disabled() || null", "attr.data-invalid": "invalidState() || null", "attr.data-readonly": "readonly() || null", "attr.tabindex": "-1", "class": "baseClass()" } }, providers: [
             ListService,
             DropdownService,
             DropdownListService,
@@ -631,7 +609,7 @@ class ComboBoxComponent {
                 useExisting: forwardRef(() => ComboBoxComponent),
                 multi: false
             }
-        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: DropdownFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: DropdownGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: DropdownHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: DropdownItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: DropdownNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DropdownPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownDataHandlerDirective }, { directive: i1.DropdownListPopupHandlerDirective }], ngImport: i0, template: "@if (prefixTemplate()) {\r\n    <span [class]=\"affixClass()\">\r\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\r\n    </span>\r\n}\r\n\r\n<input\r\n    monaTextBox\r\n    [class]=\"inputClass()\"\r\n    [disabled]=\"disabled()\"\r\n    [id]=\"id\"\r\n    [placeholder]=\"placeholder()\"\r\n    [readonly]=\"readonly()\"\r\n    [required]=\"required()\"\r\n    [ngModel]=\"comboBoxValue()\"\r\n    [attr.aria-activedescendant]=\"activeDescendant()\"\r\n    [attr.aria-autocomplete]=\"'list'\"\r\n    [attr.aria-busy]=\"loading()\"\r\n    [attr.aria-controls]=\"listId\"\r\n    [attr.aria-describedby]=\"ariaDescribedBy() || undefined\"\r\n    [attr.aria-expanded]=\"expanded()\"\r\n    [attr.aria-haspopup]=\"'listbox'\"\r\n    [attr.aria-invalid]=\"invalidState() || undefined\"\r\n    [attr.aria-label]=\"effectiveAriaLabel() || undefined\"\r\n    [attr.aria-labelledby]=\"ariaLabelledBy() || undefined\"\r\n    role=\"combobox\"\r\n    (ngModelChange)=\"comboBoxValue$.next($event)\"\r\n    (blur)=\"onInputBlur()\" />\r\n\r\n@if (showClearButton() && selectedListItem() && !loading()) {\r\n    <mona-indicator-icon\r\n        preset=\"clear\"\r\n        [interactive]=\"true\"\r\n        label=\"Clear\"\r\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\r\n}\r\n\r\n@if (loading()) {\r\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\r\n}\r\n\r\n<mona-indicator-icon preset=\"dropdown\" [size]=\"18\"></mona-indicator-icon>\r\n\r\n<span monaDropdownLiveRegion></span>\r\n\r\n<ng-template #popupTemplate>\r\n    <div [class]=\"listPopupClass()\">\r\n        <mona-list (itemSelect)=\"onItemSelect($event)\" [focusOnMount]=\"false\" [size]=\"size()\" [listId]=\"listId\">\r\n            @if (footerTemplate()) {\r\n                <ng-template monaListFooterTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (groupHeaderTemplate()) {\r\n                <ng-template monaListGroupHeaderTemplate let-group>\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (headerTemplate()) {\r\n                <ng-template monaListHeaderTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (itemTemplate()) {\r\n                <ng-template monaListItemTemplate let-dataItem>\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"itemTemplate()\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (noDataTemplate()) {\r\n                <ng-template monaListNoDataTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\r\n                </ng-template>\r\n            }\r\n        </mona-list>\r\n    </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: TextBoxDirective, selector: "input[monaTextBox]", inputs: ["rounded", "size", "class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: DropdownLiveRegionDirective, selector: "span[monaDropdownLiveRegion]" }, { kind: "component", type: IndicatorIconComponent, selector: "mona-indicator-icon", inputs: ["icon", "interactive", "label", "preset", "size", "class"], outputs: ["activate"] }] }); }
+        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: DropdownFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: DropdownGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: DropdownHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: DropdownItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: DropdownNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DropdownPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownDataHandlerDirective }, { directive: i1.DropdownListPopupHandlerDirective }], ngImport: i0, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<input\n    monaTextBox\n    [class]=\"inputClass()\"\n    [disabled]=\"disabled()\"\n    [id]=\"id\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [ngModel]=\"comboBoxValue()\"\n    [attr.aria-activedescendant]=\"activeDescendant()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-busy]=\"loading()\"\n    [attr.aria-controls]=\"listId\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || undefined\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-invalid]=\"invalidState() || undefined\"\n    [attr.aria-label]=\"effectiveAriaLabel() || undefined\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || undefined\"\n    role=\"combobox\"\n    (ngModelChange)=\"comboBoxValue$.next($event)\"\n    (blur)=\"onInputBlur()\" />\n\n@if (showClearButton() && selectedListItem() && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [interactive]=\"true\"\n        label=\"Clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [size]=\"18\"></mona-indicator-icon>\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\">\n        <mona-list (itemSelect)=\"onItemSelect($event)\" [focusOnMount]=\"false\" [size]=\"size()\" [listId]=\"listId\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: TextBoxDirective, selector: "input[monaTextBox]", inputs: ["rounded", "size", "class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: DropdownLiveRegionDirective, selector: "span[monaDropdownLiveRegion]" }, { kind: "component", type: IndicatorIconComponent, selector: "mona-indicator-icon", inputs: ["icon", "interactive", "label", "preset", "size", "class"], outputs: ["activate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,
@@ -652,7 +630,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     ], imports: [
                         TextBoxDirective,
                         FormsModule,
-                        FontAwesomeModule,
                         NgTemplateOutlet,
                         ListComponent,
                         ListGroupHeaderTemplateDirective,
@@ -667,11 +644,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.aria-invalid]": "invalidState() ? true : undefined",
                         "[attr.aria-readonly]": "readonly() ? true : undefined",
                         "[attr.aria-required]": "required() ? true : undefined",
-                        "[attr.data-disabled]": "disabled()",
+                        "[attr.data-disabled]": "disabled() || null",
                         "[attr.data-invalid]": "invalidState() || null",
+                        "[attr.data-readonly]": "readonly() || null",
                         "[attr.tabindex]": "-1",
                         "[class]": "baseClass()"
-                    }, template: "@if (prefixTemplate()) {\r\n    <span [class]=\"affixClass()\">\r\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\r\n    </span>\r\n}\r\n\r\n<input\r\n    monaTextBox\r\n    [class]=\"inputClass()\"\r\n    [disabled]=\"disabled()\"\r\n    [id]=\"id\"\r\n    [placeholder]=\"placeholder()\"\r\n    [readonly]=\"readonly()\"\r\n    [required]=\"required()\"\r\n    [ngModel]=\"comboBoxValue()\"\r\n    [attr.aria-activedescendant]=\"activeDescendant()\"\r\n    [attr.aria-autocomplete]=\"'list'\"\r\n    [attr.aria-busy]=\"loading()\"\r\n    [attr.aria-controls]=\"listId\"\r\n    [attr.aria-describedby]=\"ariaDescribedBy() || undefined\"\r\n    [attr.aria-expanded]=\"expanded()\"\r\n    [attr.aria-haspopup]=\"'listbox'\"\r\n    [attr.aria-invalid]=\"invalidState() || undefined\"\r\n    [attr.aria-label]=\"effectiveAriaLabel() || undefined\"\r\n    [attr.aria-labelledby]=\"ariaLabelledBy() || undefined\"\r\n    role=\"combobox\"\r\n    (ngModelChange)=\"comboBoxValue$.next($event)\"\r\n    (blur)=\"onInputBlur()\" />\r\n\r\n@if (showClearButton() && selectedListItem() && !loading()) {\r\n    <mona-indicator-icon\r\n        preset=\"clear\"\r\n        [interactive]=\"true\"\r\n        label=\"Clear\"\r\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\r\n}\r\n\r\n@if (loading()) {\r\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\r\n}\r\n\r\n<mona-indicator-icon preset=\"dropdown\" [size]=\"18\"></mona-indicator-icon>\r\n\r\n<span monaDropdownLiveRegion></span>\r\n\r\n<ng-template #popupTemplate>\r\n    <div [class]=\"listPopupClass()\">\r\n        <mona-list (itemSelect)=\"onItemSelect($event)\" [focusOnMount]=\"false\" [size]=\"size()\" [listId]=\"listId\">\r\n            @if (footerTemplate()) {\r\n                <ng-template monaListFooterTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (groupHeaderTemplate()) {\r\n                <ng-template monaListGroupHeaderTemplate let-group>\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (headerTemplate()) {\r\n                <ng-template monaListHeaderTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (itemTemplate()) {\r\n                <ng-template monaListItemTemplate let-dataItem>\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"itemTemplate()\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (noDataTemplate()) {\r\n                <ng-template monaListNoDataTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\r\n                </ng-template>\r\n            }\r\n        </mona-list>\r\n    </div>\r\n</ng-template>\r\n" }]
+                    }, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<input\n    monaTextBox\n    [class]=\"inputClass()\"\n    [disabled]=\"disabled()\"\n    [id]=\"id\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [ngModel]=\"comboBoxValue()\"\n    [attr.aria-activedescendant]=\"activeDescendant()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-busy]=\"loading()\"\n    [attr.aria-controls]=\"listId\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || undefined\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-invalid]=\"invalidState() || undefined\"\n    [attr.aria-label]=\"effectiveAriaLabel() || undefined\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || undefined\"\n    role=\"combobox\"\n    (ngModelChange)=\"comboBoxValue$.next($event)\"\n    (blur)=\"onInputBlur()\" />\n\n@if (showClearButton() && selectedListItem() && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [interactive]=\"true\"\n        label=\"Clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [size]=\"18\"></mona-indicator-icon>\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\">\n        <mona-list (itemSelect)=\"onItemSelect($event)\" [focusOnMount]=\"false\" [size]=\"size()\" [listId]=\"listId\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], groupHeaderTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownGroupHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], popupTemplate: [{ type: i0.ViewChild, args: ["popupTemplate", { isSignal: true }] }], prefixTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownPrefixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], allowCustomValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustomValue", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], closed: [{ type: i0.Output, args: ["closed"] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], itemDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDisabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], opened: [{ type: i0.Output, args: ["opened"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], popupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupClass", required: false }] }], popupHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeight", required: false }] }], popupWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupWidth", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], valueAdd: [{ type: i0.Output, args: ["valueAdd"] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /*

package/fesm2022/nanahoshi-mona-ui-date-input.mjs

@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
 import { Directive, Pipe, Injectable } from '@angular/core';
 import { toImmutableSet, where, select, sequence } from '@mirei/ts-collections';
 import { cva } from 'class-variance-authority';
+import { themeOverlaySurfaceClasses } from '@nanahoshi/mona-ui/internal';
 import { Subject } from 'rxjs';
 
 class DateInputPrefixTemplateDirective {
@@ -46,12 +47,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const datePopupVariants = cva(`
-        bg-background shadow-md
-        border border-input-border
-        h-full overflow-auto
-        [&_mona-calendar]:border-none
-        [&_mona-calendar]:shadow-none
+const datePopupThemeVariants = cva(`
+        h-full overflow-auto
+        [scrollbar-color:var(--color-scrollbar-thumb)_var(--color-scrollbar-track)] [scrollbar-width:thin]
+        ${themeOverlaySurfaceClasses} text-foreground
+        border border-border shadow-(--shadow-overlay)
+        [&_mona-calendar]:[background-color:var(--mona-date-popup-calendar-background,var(--mona-calendar-background))]!
+        [&_mona-calendar]:[background-image:var(--mona-date-popup-calendar-background-image,var(--mona-effect-raised-background-image))]!
+        [&_mona-calendar]:[backdrop-filter:var(--mona-date-popup-calendar-backdrop-filter,var(--mona-effect-raised-backdrop-filter))]!
+        [&_mona-calendar]:[-webkit-backdrop-filter:var(--mona-date-popup-calendar-backdrop-filter,var(--mona-effect-raised-backdrop-filter))]!
+        [&_mona-calendar]:border-none
+        [&_mona-calendar]:shadow-none
     `, {
     variants: {
         rounded: {
@@ -73,15 +79,6 @@ const datePopupVariants = cva(`
     }
 });
 
-const datePopupThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return datePopupVariants;
-        default:
-            return datePopupVariants;
-    }
-};
-
 class CalendarService {
     constructor() {
         this.keydown$ = new Subject();