@nanahoshi/mona-ui 0.1.1 → 0.2.1

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

@@ -6,11 +6,11 @@ import { LucideCircleX } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import { ColorGradientComponent } from '@nanahoshi/mona-ui/color-gradient';
 import { ColorPaletteComponent } from '@nanahoshi/mona-ui/color-palette';
-import { createElementControlId } from '@nanahoshi/mona-ui/internal';
+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 { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { take, fromEvent, takeUntil } from 'rxjs';
+import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
 class ColorPickerValueTemplateDirective {
@@ -24,32 +24,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const colorPickerBaseVariants = cva(`
+const colorPickerBaseThemeVariants = cva(`
         flex items-center
-        border border-input-border
-        bg-background outline-none
-        shadow-xs text-foreground
         cursor-pointer
-
-        hover:bg-accent hover:text-accent-foreground
-
-        transition-[color,box-shadow,border] ease-in-out duration-300
+        ${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']:opacity-50
+        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
-        data-[invalid='true']:border-error
-        data-[invalid='true']:ring-1
-        data-[invalid='true']:ring-error
 
-        focus-within:ring-1 focus-within:ring-primary/40
+        hover:bg-hover active:bg-active
+
+        focus-within:border-focus-indicator
+        focus-within:ring-2 focus-within:ring-focus-indicator/35
 
-        [&.ng-touched.ng-invalid]:border-error
+        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
     `, {
     variants: {
         expanded: {
-            true: "ring-1 ring-primary/40"
+            true: "border-focus-indicator ring-2 ring-focus-indicator/35",
+            false: ""
         },
         rounded: {
             none: "rounded-none",
@@ -63,9 +67,15 @@ 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(`
+const colorPickerColorThemeVariants = cva(`
         flex items-center justify-center
         mx-1
     `, {
@@ -78,30 +88,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);
@@ -109,26 +102,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 */
+        this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && !this.value())), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        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 */ []));
@@ -238,7 +230,6 @@ class ColorPickerComponent {
     #hostElementRef;
     #popupService;
     #popupRef;
-    #themeService;
     ngOnInit() {
         this.setEventListeners();
         this.setKeyboardEventListeners();
@@ -456,7 +447,7 @@ 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            <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=\"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: "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"] }] }); }
+    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,
@@ -484,7 +475,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            <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=\"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

@@ -7,32 +7,36 @@ import { FormsModule } from '@angular/forms';
 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 { createElementControlId, rxTimeout } from '@nanahoshi/mona-ui/internal';
+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(`
+const comboBoxBaseThemeVariants = cva(`
         flex items-center
-        border border-input-border outline-none
-        bg-background shadow-xs text-foreground
         cursor-pointer
-        focus-within:ring-1 focus-within:ring-primary/40
-        transition-[color,box-shadow,border] ease-in-out duration-300
+        ${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: {
@@ -48,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,
@@ -56,10 +67,9 @@ const comboBoxBaseVariants = cva(`
         size: "medium"
     }
 });
-const comboBoxTextInputVariants = cva(`
-        border-none outline-none
-        bg-transparent shadow-none
-        px-2 h-full w-full text-ellipsis
+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
     `, {
@@ -73,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;
@@ -108,7 +93,6 @@ class ComboBoxComponent {
     #listService;
     #navigatedValue;
     #popupRef;
-    #themeService;
     #userNavigatedViaArrows;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
@@ -119,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(() => {
@@ -128,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 */
@@ -156,21 +137,19 @@ 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 */
+        this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && this.value() == null)), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         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 */ []));
@@ -616,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,
@@ -630,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()) {\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"] }] }); }
+        ], 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: ["invalid", "rounded", "size", "touched", "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,
@@ -665,8 +644,9 @@ 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()) {\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" }]

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,10 +47,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const datePopupVariants = cva(`
-        bg-background shadow-md text-foreground
-        border border-input-border
+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
     `, {
@@ -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();