@nanahoshi/mona-ui 0.24.1 → 0.24.4

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

@@ -789,7 +789,7 @@ class ColorGradientComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorGradientComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ColorGradientComponent, isStandalone: true, selector: "mona-color-gradient", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", 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 }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null }, showHexInput: { classPropertyName: "showHexInput", publicName: "showHexInput", isSignal: true, isRequired: false, transformFunction: null }, showColorInputs: { classPropertyName: "showColorInputs", publicName: "showColorInputs", 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: { apply: "apply", cancel: "cancel", touch: "touch", value: "valueChange" }, host: { properties: { "class": "baseClasses()", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.aria-invalid": "invalidState() ? 'true' : null" } }, viewQueries: [{ propertyName: "hsvHandle", first: true, predicate: ["hsvPointer"], descendants: true, isSignal: true }, { propertyName: "hsvRectangle", first: true, predicate: ["hsvRectangle"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"hsvRectangleClasses()\" [style.background-color]=\"hsvRectangleBackground()\" #hsvRectangle>\n    <div\n        [class]=\"hsvRectangleHandleClasses()\"\n        [style.left.px]=\"hsvHandleLeft()\"\n        [style.top.px]=\"hsvHandleTop()\"\n        [attr.tabindex]=\"disabled() ? -1 : 0\"\n        [attr.role]=\"'slider'\"\n        [attr.aria-label]=\"messages().saturationAndValue\"\n        [attr.aria-valuemin]=\"0\"\n        [attr.aria-valuemax]=\"100\"\n        [attr.aria-valuenow]=\"hsv().s\"\n        [attr.aria-valuetext]=\"messages().saturationAndValueText(hsv().s ?? 0, hsv().v ?? 0)\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        (keydown)=\"onHsvHandleKeyDown($event)\"\n        (blur)=\"onHsvHandleBlur()\"\n        #hsvPointer></div>\n</div>\n<div class=\"flex items-center gap-2\">\n    <div class=\"flex flex-1 flex-col gap-1 me-2\">\n        <mona-slider\n            [minValue]=\"0\"\n            [maxValue]=\"360\"\n            [trackBackground]=\"'linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)'\"\n            [selectionBackground]=\"'transparent'\"\n            [handleClasses]=\"sliderHandleClasses()\"\n            [trackSize]=\"sliderHeight\"\n            [rounded]=\"rounded()\"\n            [value]=\"hsv().h ?? 0\"\n            (valueChange)=\"hueValue$.next($event)\"\n            (touch)=\"onSliderBlur()\"></mona-slider>\n        @if (opacity()) {\n            <mona-slider\n                [minValue]=\"0\"\n                [maxValue]=\"255\"\n                [trackBackground]=\"alphaSliderBackground()\"\n                [selectionBackground]=\"'transparent'\"\n                [handleClasses]=\"sliderHandleClasses()\"\n                [trackSize]=\"sliderHeight\"\n                [rounded]=\"rounded()\"\n                [value]=\"alpha()\"\n                (valueChange)=\"onAlphaChange($event)\"\n                (touch)=\"onSliderBlur()\"></mona-slider>\n        }\n    </div>\n    @for (preview of colorPreviews(); track preview.type) {\n        <div\n            [class]=\"colorPreviewClasses()\"\n            [class.cursor-pointer]=\"$index === 1\"\n            [style.background-color]=\"preview.color\"\n            [attr.title]=\"$index === 1 ? preview.title : null\"\n            [attr.aria-label]=\"$index === 1 ? preview.title : null\"\n            [attr.aria-hidden]=\"$index === 0 ? 'true' : null\"\n            [attr.role]=\"$index === 1 ? 'button' : null\"\n            [attr.tabindex]=\"$index === 1 ? 0 : null\"\n            (click)=\"preview.onClick?.()\"\n            (keydown)=\"onPreviousColorKeyDown($event, preview.onClick)\"></div>\n    }\n    <button monaButton look=\"ghost\" size=\"small\" [attr.aria-label]=\"messages().clearColor\" (click)=\"onClearClick()\">\n        <svg lucideDropletOff [size]=\"16\" aria-hidden=\"true\"></svg>\n    </button>\n</div>\n<div class=\"flex flex-col gap-2\">\n    @if (showColorInputs()) {\n        <div class=\"flex gap-2\">\n            <div class=\"flex gap-1\">\n                @for (input of colorInputs(); track input.key) {\n                    <mona-numeric-text-box\n                        [value]=\"input.value\"\n                        [minValue]=\"input.min\"\n                        [maxValue]=\"input.max\"\n                        [decimals]=\"0\"\n                        [spinners]=\"false\"\n                        [nullable]=\"false\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"'small'\"\n                        class=\"w-18\"\n                        (valueChange)=\"input.change($event)\"\n                        (inputBlur)=\"onNumericInputBlur()\">\n                        <ng-template monaNumericTextBoxPrefixTemplate>\n                            <ng-container\n                                [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\n                                [ngTemplateOutletContext]=\"{ $implicit: input.label }\"></ng-container>\n                        </ng-template>\n                    </mona-numeric-text-box>\n                }\n            </div>\n            <div class=\"flex flex-1 items-center justify-end\">\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    [rounded]=\"rounded()\"\n                    size=\"small\"\n                    [attr.aria-label]=\"messages().switchColorMode\"\n                    (click)=\"onSwitchColorModeClick()\">\n                    <svg lucideChevronsUpDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            </div>\n        </div>\n    }\n    @if (showHexInput()) {\n        <mona-text-box\n            [rounded]=\"rounded()\"\n            [value]=\"hex()\"\n            (valueChange)=\"onHexChange($event)\"\n            (inputBlur)=\"onHexInputBlur()\"\n            (inputFocus)=\"onHexInputFocus()\"\n            class=\"w-full\">\n            <ng-template monaTextBoxPrefixTemplate>\n                <ng-container\n                    [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: 'HEX', classes: 'w-auto px-2' }\"></ng-container>\n            </ng-template>\n            <ng-template monaTextBoxSuffixTemplate>\n                <mona-dropdown-button look=\"ghost\" [attr.aria-label]=\"messages().copyColor\" class=\"h-full\">\n                    <svg lucideCopy [size]=\"12\"></svg>\n                    <mona-dropdown-button-item\n                        [label]=\"messages().copyAsHex\"\n                        (menuClick)=\"onCopyColorSelect('hex')\"></mona-dropdown-button-item>\n                    <mona-dropdown-button-item\n                        [label]=\"messages().copyAsRgb\"\n                        (menuClick)=\"onCopyColorSelect('rgb')\"></mona-dropdown-button-item>\n                </mona-dropdown-button>\n            </ng-template>\n        </mona-text-box>\n    }\n    @if (showButtons()) {\n        <div class=\"flex items-center justify-end gap-2\">\n            <button monaButton [rounded]=\"rounded()\" look=\"primary\" (click)=\"onApply()\">{{ messages().apply }}</button>\n            <button monaButton [rounded]=\"rounded()\" (click)=\"onCancel()\">{{ messages().cancel }}</button>\n        </div>\n    }\n</div>\n\n<ng-template #numericInputPrefixTemplate let-text let-classes=\"classes\">\n    <span\n        [class]=\"classes\"\n        class=\"inline-flex items-center justify-center select-none w-7.5 [background-color:var(--mona-input-addon-background,var(--color-secondary))] h-full text-foreground text-xs font-semibold border-e border-e-input-border\"\n        >{{ text }}</span\n    >\n</ng-template>\n", dependencies: [{ kind: "component", type: LucideDropletOff, selector: "svg[lucideDropletOff]" }, { kind: "component", type: LucideChevronsUpDown, selector: "svg[lucideChevronsUpDown]" }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["formatter", "maxValue", "minValue", "step", "value"], outputs: ["valueChange"] }, { kind: "directive", type: NumericTextBoxPrefixTemplateDirective, selector: "ng-template[monaNumericTextBoxPrefixTemplate]" }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { kind: "component", type: SliderComponent, selector: "mona-slider", inputs: ["aria-label", "aria-labelledby", "value"], outputs: ["valueChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownButtonComponent, selector: "mona-dropdown-button", inputs: ["aria-label", "aria-labelledby", "iconOnly", "disabled", "loading", "look", "rounded", "size", "text", "class"], outputs: ["menuItemClick"] }, { kind: "component", type: DropdownButtonItemComponent, selector: "mona-dropdown-button-item" }, { kind: "component", type: LucideCopy, selector: "svg[lucideCopy]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ColorGradientComponent, isStandalone: true, selector: "mona-color-gradient", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", 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 }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null }, showHexInput: { classPropertyName: "showHexInput", publicName: "showHexInput", isSignal: true, isRequired: false, transformFunction: null }, showColorInputs: { classPropertyName: "showColorInputs", publicName: "showColorInputs", 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: { apply: "apply", cancel: "cancel", touch: "touch", value: "valueChange" }, host: { properties: { "class": "baseClasses()", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.aria-invalid": "invalidState() ? 'true' : null" } }, viewQueries: [{ propertyName: "hsvHandle", first: true, predicate: ["hsvPointer"], descendants: true, isSignal: true }, { propertyName: "hsvRectangle", first: true, predicate: ["hsvRectangle"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"hsvRectangleClasses()\" [style.background-color]=\"hsvRectangleBackground()\" #hsvRectangle>\n    <div\n        [class]=\"hsvRectangleHandleClasses()\"\n        [style.left.px]=\"hsvHandleLeft()\"\n        [style.top.px]=\"hsvHandleTop()\"\n        [attr.tabindex]=\"disabled() ? -1 : 0\"\n        [attr.role]=\"'slider'\"\n        [attr.aria-label]=\"messages().saturationAndValue\"\n        [attr.aria-valuemin]=\"0\"\n        [attr.aria-valuemax]=\"100\"\n        [attr.aria-valuenow]=\"hsv().s\"\n        [attr.aria-valuetext]=\"messages().saturationAndValueText(hsv().s ?? 0, hsv().v ?? 0)\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        (keydown)=\"onHsvHandleKeyDown($event)\"\n        (blur)=\"onHsvHandleBlur()\"\n        #hsvPointer></div>\n</div>\n<div class=\"flex items-center gap-2\">\n    <div class=\"flex flex-1 flex-col gap-1 me-2\">\n        <mona-slider\n            [minValue]=\"0\"\n            [maxValue]=\"360\"\n            [trackBackground]=\"'linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)'\"\n            [selectionBackground]=\"'transparent'\"\n            [handleClasses]=\"sliderHandleClasses()\"\n            [trackSize]=\"sliderHeight\"\n            [rounded]=\"rounded()\"\n            [value]=\"hsv().h ?? 0\"\n            (valueChange)=\"hueValue$.next($event)\"\n            (touch)=\"onSliderBlur()\"></mona-slider>\n        @if (opacity()) {\n            <mona-slider\n                [minValue]=\"0\"\n                [maxValue]=\"255\"\n                [trackBackground]=\"alphaSliderBackground()\"\n                [selectionBackground]=\"'transparent'\"\n                [handleClasses]=\"sliderHandleClasses()\"\n                [trackSize]=\"sliderHeight\"\n                [rounded]=\"rounded()\"\n                [value]=\"alpha()\"\n                (valueChange)=\"onAlphaChange($event)\"\n                (touch)=\"onSliderBlur()\"></mona-slider>\n        }\n    </div>\n    @for (preview of colorPreviews(); track preview.type) {\n        <div\n            [class]=\"colorPreviewClasses()\"\n            [class.cursor-pointer]=\"$index === 1\"\n            [style.background-color]=\"preview.color\"\n            [attr.title]=\"$index === 1 ? preview.title : null\"\n            [attr.aria-label]=\"$index === 1 ? preview.title : null\"\n            [attr.aria-hidden]=\"$index === 0 ? 'true' : null\"\n            [attr.role]=\"$index === 1 ? 'button' : null\"\n            [attr.tabindex]=\"$index === 1 ? 0 : null\"\n            (click)=\"preview.onClick?.()\"\n            (keydown)=\"onPreviousColorKeyDown($event, preview.onClick)\"></div>\n    }\n    <button monaButton look=\"ghost\" size=\"small\" [attr.aria-label]=\"messages().clearColor\" (click)=\"onClearClick()\">\n        <svg lucideDropletOff [size]=\"16\" aria-hidden=\"true\"></svg>\n    </button>\n</div>\n<div class=\"flex flex-col gap-2\">\n    @if (showColorInputs()) {\n        <div class=\"flex gap-2\">\n            <div class=\"flex gap-1\">\n                @for (input of colorInputs(); track input.key) {\n                    <mona-numeric-text-box\n                        [value]=\"input.value\"\n                        [minValue]=\"input.min\"\n                        [maxValue]=\"input.max\"\n                        [decimals]=\"0\"\n                        [spinners]=\"false\"\n                        [nullable]=\"false\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"'small'\"\n                        class=\"w-18\"\n                        (valueChange)=\"input.change($event)\"\n                        (inputBlur)=\"onNumericInputBlur()\">\n                        <ng-template monaNumericTextBoxPrefixTemplate>\n                            <ng-container\n                                [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\n                                [ngTemplateOutletContext]=\"{ $implicit: input.label }\"></ng-container>\n                        </ng-template>\n                    </mona-numeric-text-box>\n                }\n            </div>\n            <div class=\"flex flex-1 items-center justify-end\">\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    [rounded]=\"rounded()\"\n                    size=\"small\"\n                    [attr.aria-label]=\"messages().switchColorMode\"\n                    (click)=\"onSwitchColorModeClick()\">\n                    <svg lucideChevronsUpDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            </div>\n        </div>\n    }\n    @if (showHexInput()) {\n        <mona-text-box\n            [rounded]=\"rounded()\"\n            [value]=\"hex()\"\n            (valueChange)=\"onHexChange($event)\"\n            (inputBlur)=\"onHexInputBlur()\"\n            (inputFocus)=\"onHexInputFocus()\"\n            class=\"w-full\">\n            <ng-template monaTextBoxPrefixTemplate>\n                <ng-container\n                    [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: 'HEX', classes: 'w-auto px-2' }\"></ng-container>\n            </ng-template>\n            <ng-template monaTextBoxSuffixTemplate>\n                <mona-dropdown-button look=\"ghost\" [attr.aria-label]=\"messages().copyColor\" class=\"h-full\">\n                    <svg lucideCopy [size]=\"12\"></svg>\n                    <mona-dropdown-button-item\n                        [label]=\"messages().copyAsHex\"\n                        (menuClick)=\"onCopyColorSelect('hex')\"></mona-dropdown-button-item>\n                    <mona-dropdown-button-item\n                        [label]=\"messages().copyAsRgb\"\n                        (menuClick)=\"onCopyColorSelect('rgb')\"></mona-dropdown-button-item>\n                </mona-dropdown-button>\n            </ng-template>\n        </mona-text-box>\n    }\n    @if (showButtons()) {\n        <div class=\"flex items-center justify-end gap-2\">\n            <button monaButton [rounded]=\"rounded()\" look=\"primary\" (click)=\"onApply()\">{{ messages().apply }}</button>\n            <button monaButton [rounded]=\"rounded()\" (click)=\"onCancel()\">{{ messages().cancel }}</button>\n        </div>\n    }\n</div>\n\n<ng-template #numericInputPrefixTemplate let-text let-classes=\"classes\">\n    <span\n        [class]=\"classes\"\n        class=\"inline-flex items-center justify-center select-none w-7.5 [background-color:var(--mona-input-addon-background,var(--color-secondary))] h-full text-foreground text-xs font-semibold border-e border-e-input-border\"\n        >{{ text }}</span\n    >\n</ng-template>\n", dependencies: [{ kind: "component", type: LucideDropletOff, selector: "svg[lucideDropletOff]" }, { kind: "component", type: LucideChevronsUpDown, selector: "svg[lucideChevronsUpDown]" }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["formatter", "maxValue", "minValue", "step", "value"], outputs: ["valueChange"] }, { kind: "directive", type: NumericTextBoxPrefixTemplateDirective, selector: "ng-template[monaNumericTextBoxPrefixTemplate]" }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["aria-describedby", "aria-label", "aria-labelledby", "clearButton", "disabled", "inputAttributes", "inputClass", "inputId", "inputStyle", "invalid", "maxLength", "minLength", "name", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { kind: "component", type: SliderComponent, selector: "mona-slider", inputs: ["aria-label", "aria-labelledby", "value"], outputs: ["valueChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownButtonComponent, selector: "mona-dropdown-button", inputs: ["aria-label", "aria-labelledby", "iconOnly", "disabled", "loading", "look", "rounded", "size", "text", "class"], outputs: ["menuItemClick"] }, { kind: "component", type: DropdownButtonItemComponent, selector: "mona-dropdown-button-item" }, { kind: "component", type: LucideCopy, selector: "svg[lucideCopy]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorGradientComponent, decorators: [{
             type: Component,

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

@@ -73,7 +73,7 @@ const colorPickerBaseThemeVariants = cva(`
             full: "rounded-full"
         },
         size: {
-            large: "h-10 text-md",
+            large: "h-10 text-base",
             medium: "h-9 text-sm",
             small: "h-8 text-xs"
         }
@@ -465,7 +465,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: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, 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 }, 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 }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", 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": "ariaLabel() || messages().colorPicker", "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            [attr.aria-label]=\"messages().colorPalettePicker\"\n            data-palette-container\n            (keydown)=\"onPaletteContainerKeyDown($event)\">\n            @if (showClearButton()) {\n                <div class=\"flex items-center justify-end p-1\">\n                    <button\n                        monaButton\n                        look=\"ghost\"\n                        size=\"small\"\n                        [attr.aria-label]=\"messages().clearColor\"\n                        (click)=\"onClearClick()\">\n                        <svg lucideDropletOff [size]=\"16\" aria-hidden=\"true\"></svg>\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            [attr.aria-label]=\"messages().colorGradientPicker\">\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: "component", type: LucideDropletOff, selector: "svg[lucideDropletOff]" }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: ColorPaletteComponent, selector: "mona-color-palette", inputs: ["aria-label", "columns", "disabled", "invalid", "palette", "readonly", "required", "rounded", "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: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, 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 }, 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 }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", 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": "ariaLabel() || messages().colorPicker", "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            [attr.aria-label]=\"messages().colorPalettePicker\"\n            data-palette-container\n            (keydown)=\"onPaletteContainerKeyDown($event)\">\n            @if (showClearButton()) {\n                <div class=\"flex items-center justify-end p-1\">\n                    <button\n                        monaButton\n                        look=\"ghost\"\n                        size=\"small\"\n                        [attr.aria-label]=\"messages().clearColor\"\n                        (click)=\"onClearClick()\">\n                        <svg lucideDropletOff [size]=\"16\" aria-hidden=\"true\"></svg>\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            [attr.aria-label]=\"messages().colorGradientPicker\">\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: "component", type: LucideDropletOff, selector: "svg[lucideDropletOff]" }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "component", type: ColorPaletteComponent, selector: "mona-color-palette", inputs: ["aria-label", "columns", "disabled", "invalid", "palette", "readonly", "required", "rounded", "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,

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

@@ -56,7 +56,7 @@ const comboBoxBaseThemeVariants = cva(`
         size: {
             small: "h-8 text-xs",
             medium: "h-9 text-sm",
-            large: "h-10 text-md"
+            large: "h-10 text-base"
         }
     },
     compoundVariants: [
@@ -600,7 +600,9 @@ class ComboBoxComponent {
     setPopupCloseSubscriptions() {
         this.#dropdownService.popupCloseComplete$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
             this.#userNavigatedViaArrows.set(false);
-            this.focus();
+            if (this.#dropdownService.focusCanReturn()) {
+                this.focus();
+            }
             window.setTimeout(() => {
                 this.comboBoxValue$.next(null);
             });

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

@@ -69,7 +69,7 @@ const datePopupThemeVariants = cva(`
         },
         size: {
             large: "text-lg",
-            medium: "text-md",
+            medium: "text-base",
             small: "text-sm"
         }
     },

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

@@ -65,7 +65,7 @@ const datePickerBaseThemeVariants = cva(`
             small: "rounded-sm"
         },
         size: {
-            large: "h-10 text-md",
+            large: "h-10 text-base",
             medium: "h-9 text-sm",
             small: "h-8 text-xs"
         }
@@ -131,6 +131,8 @@ class DatePickerComponent {
                 "aria-haspopup": hasPopup,
                 "aria-invalid": invalid,
                 id: this.#id,
+                // The text box hides its clear button when read-only, so typing is blocked here instead.
+                readonly: this.readonly() || this.readonlyInput(),
                 role: "combobox"
             };
         }, /* @ts-ignore */
@@ -428,7 +430,9 @@ class DatePickerComponent {
     }
     setPopupCloseSubscriptions() {
         this.#dropdownService.popupCloseComplete$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
-            this.focus();
+            if (this.#dropdownService.focusCanReturn()) {
+                this.focus();
+            }
         });
     }
     setSubscriptions() {
@@ -446,7 +450,7 @@ class DatePickerComponent {
                 useExisting: forwardRef(() => DatePickerComponent),
                 multi: false
             }
-        ], queries: [{ propertyName: "decadeCellTemplate", first: true, predicate: CalendarDecadeCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthCellTemplate", first: true, predicate: CalendarMonthCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DateInputPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "yearCellTemplate", first: true, predicate: CalendarYearCellTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownPopupHandlerDirective }], ngImport: i0, template: "<mona-text-box\n    (inputBlur)=\"onDateInputBlur()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    [disabled]=\"disabled()\"\n    [value]=\"currentDateString()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly() || readonlyInput()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [required]=\"required()\"\n    [clearButton]=\"showClearButton()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\">\n    @if (prefixTemplate()) {\n        <ng-template monaTextBoxPrefixTemplate>\n            <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n        </ng-template>\n    }\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [rounded]=\"'none'\"\n            [size]=\"size()\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openCalendar\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\"\n            (click)=\"onDateInputButtonClick()\">\n            <svg lucideCalendar [size]=\"16\" aria-hidden=\"true\"></svg>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #popupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().datePicker\"\n        cdkTrapFocus>\n        <mona-calendar\n            [disabledDates]=\"disabledDates()\"\n            [minDate]=\"min()\"\n            [maxDate]=\"max()\"\n            [readonly]=\"readonly()\"\n            [rounded]=\"rounded()\"\n            [weekNumber]=\"weekNumber()\"\n            [firstDay]=\"firstDay()\"\n            [value]=\"value()\"\n            (valueChange)=\"onCalendarValueChange($event)\">\n            @if (decadeCellTemplate()) {\n                <ng-template monaCalendarDecadeCellTemplate let-year>\n                    <ng-container\n                        [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                        [ngTemplateOutletContext]=\"{ $implicit: year }\"></ng-container>\n                </ng-template>\n            }\n            @if (monthCellTemplate()) {\n                <ng-template monaCalendarMonthCellTemplate let-day let-date=\"date\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                        [ngTemplateOutletContext]=\"{ $implicit: day, date }\"></ng-container>\n                </ng-template>\n            }\n            @if (yearCellTemplate()) {\n                <ng-template monaCalendarYearCellTemplate let-year let-text=\"text\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                        [ngTemplateOutletContext]=\"{ $implicit: year, text }\"></ng-container>\n                </ng-template>\n            }\n        </mona-calendar>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: LucideCalendar, selector: "svg[lucideCalendar]" }, { kind: "component", type: CalendarComponent, selector: "mona-calendar", inputs: ["disabled", "disabledDates", "firstDay", "invalid", "maxDate", "minDate", "readonly", "required", "rounded", "selection", "touched", "class", "value", "weekNumber"], outputs: ["disabledChange", "touch", "valueChange"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { kind: "directive", type: CalendarDecadeCellTemplateDirective, selector: "ng-template[monaCalendarDecadeCellTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CalendarMonthCellTemplateDirective, selector: "ng-template[monaCalendarMonthCellTemplate]" }, { kind: "directive", type: CalendarYearCellTemplateDirective, selector: "ng-template[monaCalendarYearCellTemplate]" }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] }); }
+        ], queries: [{ propertyName: "decadeCellTemplate", first: true, predicate: CalendarDecadeCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthCellTemplate", first: true, predicate: CalendarMonthCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DateInputPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "yearCellTemplate", first: true, predicate: CalendarYearCellTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownPopupHandlerDirective }], ngImport: i0, template: "<mona-text-box\n    (inputBlur)=\"onDateInputBlur()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    [disabled]=\"disabled()\"\n    [value]=\"currentDateString()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [required]=\"required()\"\n    [clearButton]=\"showClearButton()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\">\n    @if (prefixTemplate()) {\n        <ng-template monaTextBoxPrefixTemplate>\n            <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n        </ng-template>\n    }\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [rounded]=\"'none'\"\n            [size]=\"size()\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openCalendar\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\"\n            (click)=\"onDateInputButtonClick()\">\n            <svg lucideCalendar [size]=\"16\" aria-hidden=\"true\"></svg>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #popupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().datePicker\"\n        cdkTrapFocus>\n        <mona-calendar\n            [disabledDates]=\"disabledDates()\"\n            [minDate]=\"min()\"\n            [maxDate]=\"max()\"\n            [readonly]=\"readonly()\"\n            [rounded]=\"rounded()\"\n            [weekNumber]=\"weekNumber()\"\n            [firstDay]=\"firstDay()\"\n            [value]=\"value()\"\n            (valueChange)=\"onCalendarValueChange($event)\">\n            @if (decadeCellTemplate()) {\n                <ng-template monaCalendarDecadeCellTemplate let-year>\n                    <ng-container\n                        [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                        [ngTemplateOutletContext]=\"{ $implicit: year }\"></ng-container>\n                </ng-template>\n            }\n            @if (monthCellTemplate()) {\n                <ng-template monaCalendarMonthCellTemplate let-day let-date=\"date\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                        [ngTemplateOutletContext]=\"{ $implicit: day, date }\"></ng-container>\n                </ng-template>\n            }\n            @if (yearCellTemplate()) {\n                <ng-template monaCalendarYearCellTemplate let-year let-text=\"text\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                        [ngTemplateOutletContext]=\"{ $implicit: year, text }\"></ng-container>\n                </ng-template>\n            }\n        </mona-calendar>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: LucideCalendar, selector: "svg[lucideCalendar]" }, { kind: "component", type: CalendarComponent, selector: "mona-calendar", inputs: ["disabled", "disabledDates", "firstDay", "invalid", "maxDate", "minDate", "readonly", "required", "rounded", "selection", "touched", "class", "value", "weekNumber"], outputs: ["disabledChange", "touch", "valueChange"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["aria-describedby", "aria-label", "aria-labelledby", "clearButton", "disabled", "inputAttributes", "inputClass", "inputId", "inputStyle", "invalid", "maxLength", "minLength", "name", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { kind: "directive", type: CalendarDecadeCellTemplateDirective, selector: "ng-template[monaCalendarDecadeCellTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CalendarMonthCellTemplateDirective, selector: "ng-template[monaCalendarMonthCellTemplate]" }, { kind: "directive", type: CalendarYearCellTemplateDirective, selector: "ng-template[monaCalendarYearCellTemplate]" }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -478,7 +482,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-invalid]": "invalidState() || null",
                         "[attr.data-readonly]": "readonly() || null",
                         "[class]": "baseClass()"
-                    }, template: "<mona-text-box\n    (inputBlur)=\"onDateInputBlur()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    [disabled]=\"disabled()\"\n    [value]=\"currentDateString()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly() || readonlyInput()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [required]=\"required()\"\n    [clearButton]=\"showClearButton()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\">\n    @if (prefixTemplate()) {\n        <ng-template monaTextBoxPrefixTemplate>\n            <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n        </ng-template>\n    }\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [rounded]=\"'none'\"\n            [size]=\"size()\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openCalendar\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\"\n            (click)=\"onDateInputButtonClick()\">\n            <svg lucideCalendar [size]=\"16\" aria-hidden=\"true\"></svg>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #popupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().datePicker\"\n        cdkTrapFocus>\n        <mona-calendar\n            [disabledDates]=\"disabledDates()\"\n            [minDate]=\"min()\"\n            [maxDate]=\"max()\"\n            [readonly]=\"readonly()\"\n            [rounded]=\"rounded()\"\n            [weekNumber]=\"weekNumber()\"\n            [firstDay]=\"firstDay()\"\n            [value]=\"value()\"\n            (valueChange)=\"onCalendarValueChange($event)\">\n            @if (decadeCellTemplate()) {\n                <ng-template monaCalendarDecadeCellTemplate let-year>\n                    <ng-container\n                        [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                        [ngTemplateOutletContext]=\"{ $implicit: year }\"></ng-container>\n                </ng-template>\n            }\n            @if (monthCellTemplate()) {\n                <ng-template monaCalendarMonthCellTemplate let-day let-date=\"date\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                        [ngTemplateOutletContext]=\"{ $implicit: day, date }\"></ng-container>\n                </ng-template>\n            }\n            @if (yearCellTemplate()) {\n                <ng-template monaCalendarYearCellTemplate let-year let-text=\"text\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                        [ngTemplateOutletContext]=\"{ $implicit: year, text }\"></ng-container>\n                </ng-template>\n            }\n        </mona-calendar>\n    </div>\n</ng-template>\n" }]
+                    }, template: "<mona-text-box\n    (inputBlur)=\"onDateInputBlur()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    [disabled]=\"disabled()\"\n    [value]=\"currentDateString()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [required]=\"required()\"\n    [clearButton]=\"showClearButton()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\">\n    @if (prefixTemplate()) {\n        <ng-template monaTextBoxPrefixTemplate>\n            <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n        </ng-template>\n    }\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [rounded]=\"'none'\"\n            [size]=\"size()\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openCalendar\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\"\n            (click)=\"onDateInputButtonClick()\">\n            <svg lucideCalendar [size]=\"16\" aria-hidden=\"true\"></svg>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #popupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().datePicker\"\n        cdkTrapFocus>\n        <mona-calendar\n            [disabledDates]=\"disabledDates()\"\n            [minDate]=\"min()\"\n            [maxDate]=\"max()\"\n            [readonly]=\"readonly()\"\n            [rounded]=\"rounded()\"\n            [weekNumber]=\"weekNumber()\"\n            [firstDay]=\"firstDay()\"\n            [value]=\"value()\"\n            (valueChange)=\"onCalendarValueChange($event)\">\n            @if (decadeCellTemplate()) {\n                <ng-template monaCalendarDecadeCellTemplate let-year>\n                    <ng-container\n                        [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                        [ngTemplateOutletContext]=\"{ $implicit: year }\"></ng-container>\n                </ng-template>\n            }\n            @if (monthCellTemplate()) {\n                <ng-template monaCalendarMonthCellTemplate let-day let-date=\"date\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                        [ngTemplateOutletContext]=\"{ $implicit: day, date }\"></ng-container>\n                </ng-template>\n            }\n            @if (yearCellTemplate()) {\n                <ng-template monaCalendarYearCellTemplate let-year let-text=\"text\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                        [ngTemplateOutletContext]=\"{ $implicit: year, text }\"></ng-container>\n                </ng-template>\n            }\n        </mona-calendar>\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { decadeCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarDecadeCellTemplateDirective), { isSignal: true }] }], monthCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarMonthCellTemplateDirective), { isSignal: true }] }], popupTemplate: [{ type: i0.ViewChild, args: ["popupTemplate", { isSignal: true }] }], prefixTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DateInputPrefixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], yearCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarYearCellTemplateDirective), { isSignal: true }] }], close: [{ type: i0.Output, args: ["close"] }], closed: [{ type: i0.Output, args: ["closed"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], firstDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDay", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", 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 }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyInput", 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 }] }], 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 }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], weekNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekNumber", required: false }] }] } });
 
 /*

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

@@ -74,7 +74,7 @@ const dateTimePickerBaseThemeVariants = cva(`
             small: "rounded-sm"
         },
         size: {
-            large: "h-10 text-md",
+            large: "h-10 text-base",
             medium: "h-9 text-sm",
             small: "h-8 text-xs"
         }
@@ -171,6 +171,8 @@ class DateTimePickerComponent {
                 "aria-haspopup": hasPopup,
                 "aria-invalid": invalid,
                 id: this.#id,
+                // The text box hides its clear button when read-only, so typing is blocked here instead.
+                readonly: this.readonly() || this.readonlyInput(),
                 role: "group"
             };
         }, /* @ts-ignore */
@@ -603,7 +605,9 @@ class DateTimePickerComponent {
     }
     setPopupCloseSubscriptions() {
         this.#dropdownService.popupCloseComplete$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
-            this.focus();
+            if (this.#dropdownService.focusCanReturn()) {
+                this.focus();
+            }
             this.activeView.set("date");
             this.navigatedDate.set(this.value() ?? new Date());
         });
@@ -643,7 +647,7 @@ class DateTimePickerComponent {
                 useExisting: forwardRef(() => DateTimePickerComponent),
                 multi: false
             }
-        ], queries: [{ propertyName: "decadeCellTemplate", first: true, predicate: CalendarDecadeCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthCellTemplate", first: true, predicate: CalendarMonthCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DateInputPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "yearCellTemplate", first: true, predicate: CalendarYearCellTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["datePopupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownPopupHandlerDirective }], ngImport: i0, template: "<mona-text-box\n    (inputBlur)=\"onDateInputBlur()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    [clearButton]=\"showClearButton()\"\n    [disabled]=\"disabled()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly() || readonlyInput()\"\n    [required]=\"required()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\"\n    [value]=\"currentDateString()\">\n    @if (prefixTemplate()) {\n        <ng-template monaTextBoxPrefixTemplate>\n            <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n        </ng-template>\n    }\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"size()\"\n            [rounded]=\"'none'\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openDateTimePicker\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            (click)=\"onDateInputButtonClick()\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <svg lucideCalendar [size]=\"16\" aria-hidden=\"true\"></svg>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #datePopupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        class=\"flex h-68 flex-col\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().dateTimePicker\"\n        cdkTrapFocus>\n        <div [class]=\"headerClass()\">\n            <mona-button-group\n                selection=\"single\"\n                [allowEmpty]=\"false\"\n                class=\"w-full\"\n                [disabled]=\"disabled()\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                role=\"tablist\">\n                <button monaButton [selected]=\"activeView() === 'date'\" (click)=\"activeView.set('date')\" role=\"tab\">\n                    {{ messages().date }}\n                </button>\n                <button monaButton [selected]=\"activeView() === 'time'\" (click)=\"activeView.set('time')\" role=\"tab\">\n                    {{ messages().time }}\n                </button>\n            </mona-button-group>\n        </div>\n        <div class=\"overflow-hidden\">\n            @if (activeView() === \"date\") {\n                <div class=\"flex h-full items-center justify-center\" [attr.aria-label]=\"messages().calendar\">\n                    <mona-calendar\n                        [disabledDates]=\"disabledDates()\"\n                        [minDate]=\"min()\"\n                        [maxDate]=\"max()\"\n                        [firstDay]=\"firstDay()\"\n                        [weekNumber]=\"weekNumber()\"\n                        [value]=\"navigatedDate()\"\n                        [disabled]=\"disabled()\"\n                        [readonly]=\"readonly()\"\n                        [rounded]=\"rounded()\"\n                        (valueChange)=\"onCalendarValueChange($event)\"\n                        class=\"flex-1 border-none shadow-none\">\n                        @if (decadeCellTemplate()) {\n                            <ng-template monaCalendarDecadeCellTemplate let-year>\n                                <ng-container\n                                    [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: year }\"></ng-container>\n                            </ng-template>\n                        }\n                        @if (monthCellTemplate()) {\n                            <ng-template monaCalendarMonthCellTemplate let-day let-date=\"date\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: day, date }\"></ng-container>\n                            </ng-template>\n                        }\n                        @if (yearCellTemplate()) {\n                            <ng-template monaCalendarYearCellTemplate let-year let-text=\"text\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: year, text }\"></ng-container>\n                            </ng-template>\n                        }\n                    </mona-calendar>\n                </div>\n            }\n            @if (activeView() === \"time\") {\n                <div class=\"flex h-full max-h-64 items-center justify-center\" [attr.aria-label]=\"messages().timePicker\">\n                    <mona-time-selector\n                        [value]=\"navigatedDate()\"\n                        (valueChange)=\"onTimeSelectorValueChange($event)\"\n                        [disabled]=\"disabled()\"\n                        [readonly]=\"readonly()\"\n                        [max]=\"timePickerMax()\"\n                        [min]=\"timePickerMin()\"\n                        [footer]=\"false\"\n                        [size]=\"size()\"\n                        [rounded]=\"rounded()\"\n                        [hourStep]=\"hourStep()\"\n                        [minuteStep]=\"minuteStep()\"\n                        [secondStep]=\"secondStep()\"\n                        [hourFormat]=\"hourFormat()\"\n                        [showSeconds]=\"showSeconds()\"></mona-time-selector>\n                </div>\n            }\n        </div>\n        <div [class]=\"footerClass()\">\n            <button\n                monaButton\n                look=\"primary\"\n                [disabled]=\"disabled()\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                (click)=\"onSetDateClick()\">\n                {{ messages().set }}\n            </button>\n            <button\n                monaButton\n                look=\"default\"\n                [disabled]=\"disabled()\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                (click)=\"onCancelClick()\">\n                {{ messages().cancel }}\n            </button>\n        </div>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: LucideCalendar, selector: "svg[lucideCalendar]" }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: CalendarComponent, selector: "mona-calendar", inputs: ["disabled", "disabledDates", "firstDay", "invalid", "maxDate", "minDate", "readonly", "required", "rounded", "selection", "touched", "class", "value", "weekNumber"], outputs: ["disabledChange", "touch", "valueChange"] }, { kind: "component", type: TimeSelectorComponent, selector: "mona-time-selector", inputs: ["aria-label", "disabled", "focusOnMount", "footer", "hourFormat", "hourStep", "invalid", "max", "min", "minuteStep", "readonly", "required", "rounded", "secondStep", "showSeconds", "size", "touched", "value"], outputs: ["touch", "valueChange"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { kind: "component", type: ButtonGroupComponent, selector: "mona-button-group", inputs: ["allowEmpty", "aria-label", "disabled", "look", "rounded", "selection", "size", "class"], outputs: ["buttonClick", "disabledChange", "selectionChange"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: CalendarDecadeCellTemplateDirective, selector: "ng-template[monaCalendarDecadeCellTemplate]" }, { kind: "directive", type: CalendarMonthCellTemplateDirective, selector: "ng-template[monaCalendarMonthCellTemplate]" }, { kind: "directive", type: CalendarYearCellTemplateDirective, selector: "ng-template[monaCalendarYearCellTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }] }); }
+        ], queries: [{ propertyName: "decadeCellTemplate", first: true, predicate: CalendarDecadeCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthCellTemplate", first: true, predicate: CalendarMonthCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DateInputPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "yearCellTemplate", first: true, predicate: CalendarYearCellTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["datePopupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownPopupHandlerDirective }], ngImport: i0, template: "<mona-text-box\n    (inputBlur)=\"onDateInputBlur()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    [clearButton]=\"showClearButton()\"\n    [disabled]=\"disabled()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\"\n    [value]=\"currentDateString()\">\n    @if (prefixTemplate()) {\n        <ng-template monaTextBoxPrefixTemplate>\n            <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n        </ng-template>\n    }\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"size()\"\n            [rounded]=\"'none'\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openDateTimePicker\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            (click)=\"onDateInputButtonClick()\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <svg lucideCalendar [size]=\"16\" aria-hidden=\"true\"></svg>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #datePopupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        class=\"flex h-68 flex-col\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().dateTimePicker\"\n        cdkTrapFocus>\n        <div [class]=\"headerClass()\">\n            <mona-button-group\n                selection=\"single\"\n                [allowEmpty]=\"false\"\n                class=\"w-full\"\n                [disabled]=\"disabled()\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                role=\"tablist\">\n                <button monaButton [selected]=\"activeView() === 'date'\" (click)=\"activeView.set('date')\" role=\"tab\">\n                    {{ messages().date }}\n                </button>\n                <button monaButton [selected]=\"activeView() === 'time'\" (click)=\"activeView.set('time')\" role=\"tab\">\n                    {{ messages().time }}\n                </button>\n            </mona-button-group>\n        </div>\n        <div class=\"overflow-hidden\">\n            @if (activeView() === \"date\") {\n                <div class=\"flex h-full items-center justify-center\" [attr.aria-label]=\"messages().calendar\">\n                    <mona-calendar\n                        [disabledDates]=\"disabledDates()\"\n                        [minDate]=\"min()\"\n                        [maxDate]=\"max()\"\n                        [firstDay]=\"firstDay()\"\n                        [weekNumber]=\"weekNumber()\"\n                        [value]=\"navigatedDate()\"\n                        [disabled]=\"disabled()\"\n                        [readonly]=\"readonly()\"\n                        [rounded]=\"rounded()\"\n                        (valueChange)=\"onCalendarValueChange($event)\"\n                        class=\"flex-1 border-none shadow-none\">\n                        @if (decadeCellTemplate()) {\n                            <ng-template monaCalendarDecadeCellTemplate let-year>\n                                <ng-container\n                                    [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: year }\"></ng-container>\n                            </ng-template>\n                        }\n                        @if (monthCellTemplate()) {\n                            <ng-template monaCalendarMonthCellTemplate let-day let-date=\"date\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: day, date }\"></ng-container>\n                            </ng-template>\n                        }\n                        @if (yearCellTemplate()) {\n                            <ng-template monaCalendarYearCellTemplate let-year let-text=\"text\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: year, text }\"></ng-container>\n                            </ng-template>\n                        }\n                    </mona-calendar>\n                </div>\n            }\n            @if (activeView() === \"time\") {\n                <div class=\"flex h-full max-h-64 items-center justify-center\" [attr.aria-label]=\"messages().timePicker\">\n                    <mona-time-selector\n                        [value]=\"navigatedDate()\"\n                        (valueChange)=\"onTimeSelectorValueChange($event)\"\n                        [disabled]=\"disabled()\"\n                        [readonly]=\"readonly()\"\n                        [max]=\"timePickerMax()\"\n                        [min]=\"timePickerMin()\"\n                        [footer]=\"false\"\n                        [size]=\"size()\"\n                        [rounded]=\"rounded()\"\n                        [hourStep]=\"hourStep()\"\n                        [minuteStep]=\"minuteStep()\"\n                        [secondStep]=\"secondStep()\"\n                        [hourFormat]=\"hourFormat()\"\n                        [showSeconds]=\"showSeconds()\"></mona-time-selector>\n                </div>\n            }\n        </div>\n        <div [class]=\"footerClass()\">\n            <button\n                monaButton\n                look=\"primary\"\n                [disabled]=\"disabled()\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                (click)=\"onSetDateClick()\">\n                {{ messages().set }}\n            </button>\n            <button\n                monaButton\n                look=\"default\"\n                [disabled]=\"disabled()\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                (click)=\"onCancelClick()\">\n                {{ messages().cancel }}\n            </button>\n        </div>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: LucideCalendar, selector: "svg[lucideCalendar]" }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "component", type: CalendarComponent, selector: "mona-calendar", inputs: ["disabled", "disabledDates", "firstDay", "invalid", "maxDate", "minDate", "readonly", "required", "rounded", "selection", "touched", "class", "value", "weekNumber"], outputs: ["disabledChange", "touch", "valueChange"] }, { kind: "component", type: TimeSelectorComponent, selector: "mona-time-selector", inputs: ["aria-label", "disabled", "focusOnMount", "footer", "hourFormat", "hourStep", "invalid", "max", "min", "minuteStep", "readonly", "required", "rounded", "secondStep", "showSeconds", "size", "touched", "value"], outputs: ["touch", "valueChange"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["aria-describedby", "aria-label", "aria-labelledby", "clearButton", "disabled", "inputAttributes", "inputClass", "inputId", "inputStyle", "invalid", "maxLength", "minLength", "name", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { kind: "component", type: ButtonGroupComponent, selector: "mona-button-group", inputs: ["allowEmpty", "aria-label", "disabled", "look", "rounded", "selection", "size", "class"], outputs: ["buttonClick", "disabledChange", "selectionChange"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: CalendarDecadeCellTemplateDirective, selector: "ng-template[monaCalendarDecadeCellTemplate]" }, { kind: "directive", type: CalendarMonthCellTemplateDirective, selector: "ng-template[monaCalendarMonthCellTemplate]" }, { kind: "directive", type: CalendarYearCellTemplateDirective, selector: "ng-template[monaCalendarYearCellTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
@@ -679,7 +683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-readonly]": "readonly() || null",
                         "[class]": "baseClass()",
                         "(blur)": "onDateInputBlur()"
-                    }, template: "<mona-text-box\n    (inputBlur)=\"onDateInputBlur()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    [clearButton]=\"showClearButton()\"\n    [disabled]=\"disabled()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly() || readonlyInput()\"\n    [required]=\"required()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\"\n    [value]=\"currentDateString()\">\n    @if (prefixTemplate()) {\n        <ng-template monaTextBoxPrefixTemplate>\n            <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n        </ng-template>\n    }\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"size()\"\n            [rounded]=\"'none'\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openDateTimePicker\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            (click)=\"onDateInputButtonClick()\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <svg lucideCalendar [size]=\"16\" aria-hidden=\"true\"></svg>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #datePopupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        class=\"flex h-68 flex-col\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().dateTimePicker\"\n        cdkTrapFocus>\n        <div [class]=\"headerClass()\">\n            <mona-button-group\n                selection=\"single\"\n                [allowEmpty]=\"false\"\n                class=\"w-full\"\n                [disabled]=\"disabled()\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                role=\"tablist\">\n                <button monaButton [selected]=\"activeView() === 'date'\" (click)=\"activeView.set('date')\" role=\"tab\">\n                    {{ messages().date }}\n                </button>\n                <button monaButton [selected]=\"activeView() === 'time'\" (click)=\"activeView.set('time')\" role=\"tab\">\n                    {{ messages().time }}\n                </button>\n            </mona-button-group>\n        </div>\n        <div class=\"overflow-hidden\">\n            @if (activeView() === \"date\") {\n                <div class=\"flex h-full items-center justify-center\" [attr.aria-label]=\"messages().calendar\">\n                    <mona-calendar\n                        [disabledDates]=\"disabledDates()\"\n                        [minDate]=\"min()\"\n                        [maxDate]=\"max()\"\n                        [firstDay]=\"firstDay()\"\n                        [weekNumber]=\"weekNumber()\"\n                        [value]=\"navigatedDate()\"\n                        [disabled]=\"disabled()\"\n                        [readonly]=\"readonly()\"\n                        [rounded]=\"rounded()\"\n                        (valueChange)=\"onCalendarValueChange($event)\"\n                        class=\"flex-1 border-none shadow-none\">\n                        @if (decadeCellTemplate()) {\n                            <ng-template monaCalendarDecadeCellTemplate let-year>\n                                <ng-container\n                                    [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: year }\"></ng-container>\n                            </ng-template>\n                        }\n                        @if (monthCellTemplate()) {\n                            <ng-template monaCalendarMonthCellTemplate let-day let-date=\"date\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: day, date }\"></ng-container>\n                            </ng-template>\n                        }\n                        @if (yearCellTemplate()) {\n                            <ng-template monaCalendarYearCellTemplate let-year let-text=\"text\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: year, text }\"></ng-container>\n                            </ng-template>\n                        }\n                    </mona-calendar>\n                </div>\n            }\n            @if (activeView() === \"time\") {\n                <div class=\"flex h-full max-h-64 items-center justify-center\" [attr.aria-label]=\"messages().timePicker\">\n                    <mona-time-selector\n                        [value]=\"navigatedDate()\"\n                        (valueChange)=\"onTimeSelectorValueChange($event)\"\n                        [disabled]=\"disabled()\"\n                        [readonly]=\"readonly()\"\n                        [max]=\"timePickerMax()\"\n                        [min]=\"timePickerMin()\"\n                        [footer]=\"false\"\n                        [size]=\"size()\"\n                        [rounded]=\"rounded()\"\n                        [hourStep]=\"hourStep()\"\n                        [minuteStep]=\"minuteStep()\"\n                        [secondStep]=\"secondStep()\"\n                        [hourFormat]=\"hourFormat()\"\n                        [showSeconds]=\"showSeconds()\"></mona-time-selector>\n                </div>\n            }\n        </div>\n        <div [class]=\"footerClass()\">\n            <button\n                monaButton\n                look=\"primary\"\n                [disabled]=\"disabled()\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                (click)=\"onSetDateClick()\">\n                {{ messages().set }}\n            </button>\n            <button\n                monaButton\n                look=\"default\"\n                [disabled]=\"disabled()\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                (click)=\"onCancelClick()\">\n                {{ messages().cancel }}\n            </button>\n        </div>\n    </div>\n</ng-template>\n" }]
+                    }, template: "<mona-text-box\n    (inputBlur)=\"onDateInputBlur()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    [clearButton]=\"showClearButton()\"\n    [disabled]=\"disabled()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\"\n    [value]=\"currentDateString()\">\n    @if (prefixTemplate()) {\n        <ng-template monaTextBoxPrefixTemplate>\n            <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n        </ng-template>\n    }\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"size()\"\n            [rounded]=\"'none'\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openDateTimePicker\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            (click)=\"onDateInputButtonClick()\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <svg lucideCalendar [size]=\"16\" aria-hidden=\"true\"></svg>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #datePopupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        class=\"flex h-68 flex-col\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().dateTimePicker\"\n        cdkTrapFocus>\n        <div [class]=\"headerClass()\">\n            <mona-button-group\n                selection=\"single\"\n                [allowEmpty]=\"false\"\n                class=\"w-full\"\n                [disabled]=\"disabled()\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                role=\"tablist\">\n                <button monaButton [selected]=\"activeView() === 'date'\" (click)=\"activeView.set('date')\" role=\"tab\">\n                    {{ messages().date }}\n                </button>\n                <button monaButton [selected]=\"activeView() === 'time'\" (click)=\"activeView.set('time')\" role=\"tab\">\n                    {{ messages().time }}\n                </button>\n            </mona-button-group>\n        </div>\n        <div class=\"overflow-hidden\">\n            @if (activeView() === \"date\") {\n                <div class=\"flex h-full items-center justify-center\" [attr.aria-label]=\"messages().calendar\">\n                    <mona-calendar\n                        [disabledDates]=\"disabledDates()\"\n                        [minDate]=\"min()\"\n                        [maxDate]=\"max()\"\n                        [firstDay]=\"firstDay()\"\n                        [weekNumber]=\"weekNumber()\"\n                        [value]=\"navigatedDate()\"\n                        [disabled]=\"disabled()\"\n                        [readonly]=\"readonly()\"\n                        [rounded]=\"rounded()\"\n                        (valueChange)=\"onCalendarValueChange($event)\"\n                        class=\"flex-1 border-none shadow-none\">\n                        @if (decadeCellTemplate()) {\n                            <ng-template monaCalendarDecadeCellTemplate let-year>\n                                <ng-container\n                                    [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: year }\"></ng-container>\n                            </ng-template>\n                        }\n                        @if (monthCellTemplate()) {\n                            <ng-template monaCalendarMonthCellTemplate let-day let-date=\"date\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: day, date }\"></ng-container>\n                            </ng-template>\n                        }\n                        @if (yearCellTemplate()) {\n                            <ng-template monaCalendarYearCellTemplate let-year let-text=\"text\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: year, text }\"></ng-container>\n                            </ng-template>\n                        }\n                    </mona-calendar>\n                </div>\n            }\n            @if (activeView() === \"time\") {\n                <div class=\"flex h-full max-h-64 items-center justify-center\" [attr.aria-label]=\"messages().timePicker\">\n                    <mona-time-selector\n                        [value]=\"navigatedDate()\"\n                        (valueChange)=\"onTimeSelectorValueChange($event)\"\n                        [disabled]=\"disabled()\"\n                        [readonly]=\"readonly()\"\n                        [max]=\"timePickerMax()\"\n                        [min]=\"timePickerMin()\"\n                        [footer]=\"false\"\n                        [size]=\"size()\"\n                        [rounded]=\"rounded()\"\n                        [hourStep]=\"hourStep()\"\n                        [minuteStep]=\"minuteStep()\"\n                        [secondStep]=\"secondStep()\"\n                        [hourFormat]=\"hourFormat()\"\n                        [showSeconds]=\"showSeconds()\"></mona-time-selector>\n                </div>\n            }\n        </div>\n        <div [class]=\"footerClass()\">\n            <button\n                monaButton\n                look=\"primary\"\n                [disabled]=\"disabled()\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                (click)=\"onSetDateClick()\">\n                {{ messages().set }}\n            </button>\n            <button\n                monaButton\n                look=\"default\"\n                [disabled]=\"disabled()\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                (click)=\"onCancelClick()\">\n                {{ messages().cancel }}\n            </button>\n        </div>\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { decadeCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarDecadeCellTemplateDirective), { isSignal: true }] }], monthCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarMonthCellTemplateDirective), { isSignal: true }] }], popupTemplate: [{ type: i0.ViewChild, args: ["datePopupTemplate", { isSignal: true }] }], prefixTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DateInputPrefixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], yearCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarYearCellTemplateDirective), { isSignal: true }] }], close: [{ type: i0.Output, args: ["close"] }], closed: [{ type: i0.Output, args: ["closed"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], firstDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDay", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], hourStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourStep", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", 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 }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyInput", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", 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 }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], weekNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekNumber", required: false }] }] } });
 
 /*

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

@@ -333,7 +333,7 @@ class DialogContentComponent {
         return [{ cssClass: "", iconOnly: false, look: "primary", rounded: "medium", text: this.messages().ok }];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DialogContentComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "baseClass()", "attr.aria-describedby": "describedById()", "attr.aria-labelledby": "headerId", "attr.role": "role()" } }, hostDirectives: [{ directive: i1.CdkTrapFocus }], ngImport: i0, template: "@let dialogIcon = icon();\n@let data = dialogData();\n\n<div [class]=\"contentContainerClass()\">\n    @if (dialogIcon) {\n        <div [class]=\"iconContainerClass()\">\n            @if (data.iconTemplate) {\n                <ng-container [ngTemplateOutlet]=\"data.iconTemplate\"></ng-container>\n            } @else {\n                <div [class]=\"iconClass()\">\n                    <span aria-hidden=\"true\"></span>\n                    <svg [lucideIcon]=\"dialogIcon.icon\" [size]=\"24\" [style.color]=\"dialogIcon.color\"></svg>\n                </div>\n            }\n        </div>\n    }\n    <div [class]=\"bodyClass()\">\n        <div [class]=\"headerClass()\">\n            <div [id]=\"headerId\" [class]=\"titleContainerClass()\">\n                @if (data.titleTemplate) {\n                    <ng-container [ngTemplateOutlet]=\"data.titleTemplate\"></ng-container>\n                } @else {\n                    <h2 [class]=\"titleClass()\">{{ data.title }}</h2>\n                }\n            </div>\n            @if (data.closable) {\n                <div [class]=\"closeButtonContainerClass()\">\n                    <button\n                        monaButton\n                        look=\"ghost\"\n                        size=\"small\"\n                        [iconOnly]=\"true\"\n                        [attr.aria-label]=\"messages().closeDialog\"\n                        (click)=\"onCloseClick()\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                </div>\n            }\n        </div>\n\n        @let descriptionTemplateId = data.descriptionTemplate ? descriptionId : undefined;\n        <div class=\"p-1\" [attr.id]=\"descriptionTemplateId\">\n            @if (data.descriptionTemplate) {\n                <ng-container [ngTemplateOutlet]=\"data.descriptionTemplate\"></ng-container>\n            } @else if (data.description) {\n                <p [id]=\"descriptionId\" [class]=\"descriptionClass()\">{{ data.description }}</p>\n            }\n        </div>\n\n        <div [class]=\"contentClass()\">\n            @if (data.content) {\n                <ng-container [ngTemplateOutlet]=\"data.content\"></ng-container>\n            } @else if (data.text) {\n                <p class=\"select-none\">{{ data.text }}</p>\n            }\n        </div>\n    </div>\n</div>\n\n@if (data.footerTemplate || (actions() | monaAny)) {\n    @if (data.footerTemplate) {\n        <ng-container [ngTemplateOutlet]=\"data.footerTemplate\"></ng-container>\n    } @else {\n        <div [class]=\"footerClass()\">\n            @for (action of actions(); track $index) {\n                <button\n                    monaButton\n                    type=\"button\"\n                    [class]=\"action.cssClass || ''\"\n                    [iconOnly]=\"action.iconOnly || false\"\n                    [look]=\"action.look\"\n                    [rounded]=\"action.rounded || data.rounded\"\n                    (click)=\"onActionClick(action)\">\n                    {{ action.text }}\n                </button>\n            }\n        </div>\n    }\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "pipe", type: AnyPipe, name: "monaAny" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DialogContentComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "baseClass()", "attr.aria-describedby": "describedById()", "attr.aria-labelledby": "headerId", "attr.role": "role()" } }, hostDirectives: [{ directive: i1.CdkTrapFocus }], ngImport: i0, template: "@let dialogIcon = icon();\n@let data = dialogData();\n\n<div [class]=\"contentContainerClass()\">\n    @if (dialogIcon) {\n        <div [class]=\"iconContainerClass()\">\n            @if (data.iconTemplate) {\n                <ng-container [ngTemplateOutlet]=\"data.iconTemplate\"></ng-container>\n            } @else {\n                <div [class]=\"iconClass()\">\n                    <span aria-hidden=\"true\"></span>\n                    <svg [lucideIcon]=\"dialogIcon.icon\" [size]=\"24\" [style.color]=\"dialogIcon.color\"></svg>\n                </div>\n            }\n        </div>\n    }\n    <div [class]=\"bodyClass()\">\n        <div [class]=\"headerClass()\">\n            <div [id]=\"headerId\" [class]=\"titleContainerClass()\">\n                @if (data.titleTemplate) {\n                    <ng-container [ngTemplateOutlet]=\"data.titleTemplate\"></ng-container>\n                } @else {\n                    <h2 [class]=\"titleClass()\">{{ data.title }}</h2>\n                }\n            </div>\n            @if (data.closable) {\n                <div [class]=\"closeButtonContainerClass()\">\n                    <button\n                        monaButton\n                        look=\"ghost\"\n                        size=\"small\"\n                        [iconOnly]=\"true\"\n                        [attr.aria-label]=\"messages().closeDialog\"\n                        (click)=\"onCloseClick()\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                </div>\n            }\n        </div>\n\n        @let descriptionTemplateId = data.descriptionTemplate ? descriptionId : undefined;\n        <div class=\"p-1\" [attr.id]=\"descriptionTemplateId\">\n            @if (data.descriptionTemplate) {\n                <ng-container [ngTemplateOutlet]=\"data.descriptionTemplate\"></ng-container>\n            } @else if (data.description) {\n                <p [id]=\"descriptionId\" [class]=\"descriptionClass()\">{{ data.description }}</p>\n            }\n        </div>\n\n        <div [class]=\"contentClass()\">\n            @if (data.content) {\n                <ng-container [ngTemplateOutlet]=\"data.content\"></ng-container>\n            } @else if (data.text) {\n                <p class=\"select-none\">{{ data.text }}</p>\n            }\n        </div>\n    </div>\n</div>\n\n@if (data.footerTemplate || (actions() | monaAny)) {\n    @if (data.footerTemplate) {\n        <ng-container [ngTemplateOutlet]=\"data.footerTemplate\"></ng-container>\n    } @else {\n        <div [class]=\"footerClass()\">\n            @for (action of actions(); track $index) {\n                <button\n                    monaButton\n                    type=\"button\"\n                    [class]=\"action.cssClass || ''\"\n                    [iconOnly]=\"action.iconOnly || false\"\n                    [look]=\"action.look\"\n                    [rounded]=\"action.rounded || data.rounded\"\n                    (click)=\"onActionClick(action)\">\n                    {{ action.text }}\n                </button>\n            }\n        </div>\n    }\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "pipe", type: AnyPipe, name: "monaAny" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogContentComponent, decorators: [{
             type: Component,

package/fesm2022/nanahoshi-mona-ui-dropdown-button.mjs

@@ -271,7 +271,7 @@ class DropdownButtonComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DropdownButtonComponent, isStandalone: true, selector: "mona-dropdown-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClick: "menuItemClick" }, host: { properties: { "class": "userClass()" } }, queries: [{ propertyName: "menuItemComponents", predicate: PopupMenuToken, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: DropdownButtonMenuGroupTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemIconTemplate", first: true, predicate: DropdownButtonMenuItemIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemShortcutTemplate", first: true, predicate: DropdownButtonMenuItemShortcutTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemTextTemplate", first: true, predicate: DropdownButtonMenuItemTextTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "textTemplate", first: true, predicate: DropdownButtonTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["dropdownButton"], descendants: true, isSignal: true }, { propertyName: "popupMenuRef", first: true, predicate: ["popupMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n    monaButton\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [iconOnly]=\"iconOnly()\"\n    [loading]=\"loading()\"\n    [rounded]=\"rounded()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabelledby() ? null : dropdownButtonAriaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"isMenuOpen()\"\n    [attr.aria-controls]=\"menuId\"\n    #dropdownButton>\n    @if (textTemplate()) {\n        <ng-container\n            [ngTemplateOutlet]=\"textTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: text() }\"></ng-container>\n    } @else {\n        {{ text() }}\n    }\n</button>\n\n<mona-popup-menu\n    #popupMenu\n    (close)=\"onMenuClose()\"\n    (menuClick)=\"onMenuItemClick($event)\"\n    (open)=\"onMenuOpen()\"\n    [anchorConnectionPoint]=\"'bottomcenter'\"\n    [id]=\"menuId\"\n    [items]=\"menuItems()\"\n    [offset]=\"{ horizontal: 0, vertical: 2 }\"\n    [popupConnectionPoint]=\"'topcenter'\"\n    [size]=\"size()\"\n    [target]=\"dropdownButton\"\n    [trigger]=\"'click'\">\n    @if (groupTemplate()) {\n        <ng-template monaPopupMenuGroupTemplate let-group>\n            <ng-container\n                [ngTemplateOutlet]=\"groupTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemIconTemplate()) {\n        <ng-template monaPopupMenuIconTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemIconTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemShortcutTemplate()) {\n        <ng-template monaPopupMenuShortcutTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemShortcutTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemTextTemplate()) {\n        <ng-template monaPopupMenuTextTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemTextTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n</mona-popup-menu>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width", "class"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "directive", type: PopupMenuGroupTemplateDirective, selector: "ng-template[monaPopupMenuGroupTemplate]" }, { kind: "directive", type: PopupMenuIconTemplateDirective, selector: "ng-template[monaPopupMenuIconTemplate]" }, { kind: "directive", type: PopupMenuShortcutTemplateDirective, selector: "ng-template[monaPopupMenuShortcutTemplate]" }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DropdownButtonComponent, isStandalone: true, selector: "mona-dropdown-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClick: "menuItemClick" }, host: { properties: { "class": "userClass()" } }, queries: [{ propertyName: "menuItemComponents", predicate: PopupMenuToken, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: DropdownButtonMenuGroupTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemIconTemplate", first: true, predicate: DropdownButtonMenuItemIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemShortcutTemplate", first: true, predicate: DropdownButtonMenuItemShortcutTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemTextTemplate", first: true, predicate: DropdownButtonMenuItemTextTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "textTemplate", first: true, predicate: DropdownButtonTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["dropdownButton"], descendants: true, isSignal: true }, { propertyName: "popupMenuRef", first: true, predicate: ["popupMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n    monaButton\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [iconOnly]=\"iconOnly()\"\n    [loading]=\"loading()\"\n    [rounded]=\"rounded()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabelledby() ? null : dropdownButtonAriaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"isMenuOpen()\"\n    [attr.aria-controls]=\"menuId\"\n    #dropdownButton>\n    @if (textTemplate()) {\n        <ng-container\n            [ngTemplateOutlet]=\"textTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: text() }\"></ng-container>\n    } @else {\n        {{ text() }}\n    }\n</button>\n\n<mona-popup-menu\n    #popupMenu\n    (close)=\"onMenuClose()\"\n    (menuClick)=\"onMenuItemClick($event)\"\n    (open)=\"onMenuOpen()\"\n    [anchorConnectionPoint]=\"'bottomcenter'\"\n    [id]=\"menuId\"\n    [items]=\"menuItems()\"\n    [offset]=\"{ horizontal: 0, vertical: 2 }\"\n    [popupConnectionPoint]=\"'topcenter'\"\n    [size]=\"size()\"\n    [target]=\"dropdownButton\"\n    [trigger]=\"'click'\">\n    @if (groupTemplate()) {\n        <ng-template monaPopupMenuGroupTemplate let-group>\n            <ng-container\n                [ngTemplateOutlet]=\"groupTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemIconTemplate()) {\n        <ng-template monaPopupMenuIconTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemIconTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemShortcutTemplate()) {\n        <ng-template monaPopupMenuShortcutTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemShortcutTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemTextTemplate()) {\n        <ng-template monaPopupMenuTextTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemTextTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n</mona-popup-menu>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width", "class"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "directive", type: PopupMenuGroupTemplateDirective, selector: "ng-template[monaPopupMenuGroupTemplate]" }, { kind: "directive", type: PopupMenuIconTemplateDirective, selector: "ng-template[monaPopupMenuIconTemplate]" }, { kind: "directive", type: PopupMenuShortcutTemplateDirective, selector: "ng-template[monaPopupMenuShortcutTemplate]" }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonComponent, decorators: [{
             type: Component,

package/fesm2022/nanahoshi-mona-ui-dropdown-list.mjs

@@ -67,7 +67,7 @@ const dropdownListInputThemeVariants = cva(`
             full: "rounded-full px-3"
         },
         size: {
-            large: "h-10 text-md",
+            large: "h-10 text-base",
             medium: "h-9 text-sm",
             small: "h-8 text-xs"
         }
@@ -526,7 +526,9 @@ class DropdownListComponent {
         this.#dropdownService.popupCloseComplete$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
             const navigatedItem = this.#navigatedItem();
             this.updateValue(navigatedItem ? this.getControlValue(navigatedItem) : null, true);
-            window.setTimeout(() => this.focus());
+            if (this.#dropdownService.focusCanReturn()) {
+                window.setTimeout(() => this.focus());
+            }
         });
     }
     setSubscriptions() {

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

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, DestroyRef, input, output, effect, untracked, afterNextRender, Directive, Injectable, signal, ElementRef, computed } from '@angular/core';
+import { InjectionToken, inject, DestroyRef, input, output, effect, untracked, afterNextRender, Directive, Injectable, signal, DOCUMENT, ElementRef, computed } from '@angular/core';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { ListService } from '@nanahoshi/mona-ui/internal/list';
 import { PreventableEvent } from '@nanahoshi/mona-ui/common';
 import { Subject, takeUntil, take, filter, switchMap, fromEvent } from 'rxjs';
 import { ConnectionPositionPair } from '@angular/cdk/overlay';
+import { focusCanReturn, themeOverlaySurfaceClasses } from '@nanahoshi/mona-ui/internal';
 import { PopupService, dropdownPopupAnimation } from '@nanahoshi/mona-ui/popup';
 import { formatNumber, MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { cva } from 'class-variance-authority';
-import { themeOverlaySurfaceClasses } from '@nanahoshi/mona-ui/internal';
 
 const DropdownDataInputToken = new InjectionToken("DROPDOWN_DATA_INPUT");
 
@@ -307,6 +307,13 @@ class DropdownService {
     constructor() {
         this.beforeKeydown$ = new Subject();
         this.beforeNavigate$ = new Subject();
+        /**
+         * Set when the popup finishes closing: whether focus may return to the dropdown. It is `false` when the user
+         * moved focus outside the dropdown and its popup first, for example by clicking another field or pressing
+         * Tab. Read it from `popupCloseComplete$` before calling `focus()`.
+         */
+        this.focusCanReturn = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focusCanReturn" }] : /* istanbul ignore next */ []));
         this.keydown$ = new Subject();
         this.popupCloseComplete$ = new Subject();
         this.popupCloseStart$ = new Subject();
@@ -336,6 +343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 
 class DropdownPopupHandlerDirective {
     #destroyRef = inject(DestroyRef);
+    #document = inject(DOCUMENT);
     #dropdownService = inject(DropdownService);
     #hostElementRef = inject((ElementRef));
     #host = inject(DROPDOWN_POPUP_INPUT_TOKEN);
@@ -441,6 +449,8 @@ class DropdownPopupHandlerDirective {
             this.#dropdownService.popupCloseStart$.next(event);
         });
         popupRef.closed.pipe(take(1)).subscribe(event => {
+            // Checked before the overlay is disposed, while focus inside the popup is still there to see.
+            this.#dropdownService.focusCanReturn.set(focusCanReturn(this.#document, this.#hostElementRef.nativeElement, popupRef.overlayRef.overlayElement));
             this.#dropdownService.popupRef.set(null);
             this.#dropdownService.popupCloseComplete$.next(event);
             this.#host.closed.emit();
@@ -694,7 +704,7 @@ const dropdownPopupThemeVariants = cva(`
             full: "rounded-lg"
         },
         size: {
-            large: "text-md",
+            large: "text-base",
             medium: "text-sm",
             small: "text-xs"
         }