@nanahoshi/mona-ui 0.18.5 → 0.19.0

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

@@ -9,6 +9,7 @@ import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { NgTemplateOutlet } from '@angular/common';
 import { LucideMinimize, LucideMaximize, LucideMinus, LucideDynamicIcon, LucideX } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+import { MonaI18nService, mergeMessages } from '@nanahoshi/mona-ui/i18n';
 import { cva } from 'class-variance-authority';
 
 class WindowActionTemplateDirective {
@@ -55,13 +56,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const DefaultMaxWindowHeight = 800;
-const DefaultMaxWindowWidth = 1200;
-const DefaultMinWindowHeight = 50;
-const DefaultMinWindowWidth = 50;
+const DEFAULT_MAX_WINDOW_HEIGHT = 800;
+const DEFAULT_MAX_WINDOW_WIDTH = 1200;
+const DEFAULT_MIN_WINDOW_HEIGHT = 50;
+const DEFAULT_MIN_WINDOW_WIDTH = 50;
 
-const KeyboardMoveStep = 10;
-const KeyboardMoveStepFine = 1;
+const KEYBOARD_MOVE_STEP = 10;
+const KEYBOARD_MOVE_STEP_FINE = 1;
 class WindowDragHandlerDirective {
     #destroyRef;
     #document;
@@ -86,10 +87,10 @@ class WindowDragHandlerDirective {
         if (!this.draggable()) {
             return;
         }
-        const step = event.shiftKey ? KeyboardMoveStepFine : KeyboardMoveStep;
+        const step = event.shiftKey ? KEYBOARD_MOVE_STEP_FINE : KEYBOARD_MOVE_STEP;
         const element = this.windowRef().element;
-        const innerWidth = this.#document.defaultView?.innerWidth || DefaultMaxWindowWidth;
-        const innerHeight = this.#document.defaultView?.innerHeight || DefaultMaxWindowHeight;
+        const innerWidth = this.#document.defaultView?.innerWidth || DEFAULT_MAX_WINDOW_WIDTH;
+        const innerHeight = this.#document.defaultView?.innerHeight || DEFAULT_MAX_WINDOW_HEIGHT;
         const initialTop = element.getBoundingClientRect().top;
         const initialLeft = element.getBoundingClientRect().left;
         let top = initialTop;
@@ -126,8 +127,8 @@ class WindowDragHandlerDirective {
         const initialY = event.clientY;
         const initialTop = element.getBoundingClientRect().top;
         const initialLeft = element.getBoundingClientRect().left;
-        const innerWidth = this.#document.defaultView?.innerWidth || DefaultMaxWindowWidth;
-        const innerHeight = this.#document.defaultView?.innerHeight || DefaultMaxWindowHeight;
+        const innerWidth = this.#document.defaultView?.innerWidth || DEFAULT_MAX_WINDOW_WIDTH;
+        const innerHeight = this.#document.defaultView?.innerHeight || DEFAULT_MAX_WINDOW_HEIGHT;
         let dragInitiated = false;
         const onPointerMove = (event) => {
             if (!dragInitiated) {
@@ -181,8 +182,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], windowRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "windowRef", required: true }] }] } });
 
-const KeyboardResizeStep = 10;
-const KeyboardResizeStepFine = 1;
+const KEYBOARD_RESIZE_STEP = 10;
+const KEYBOARD_RESIZE_STEP_FINE = 1;
 class WindowResizeHandlerDirective {
     #destroyRef;
     #document;
@@ -212,7 +213,7 @@ class WindowResizeHandlerDirective {
         this.#destroyRef.onDestroy(() => this.#activeCleanup?.());
     }
     onKeydown(event) {
-        const step = event.shiftKey ? KeyboardResizeStepFine : KeyboardResizeStep;
+        const step = event.shiftKey ? KEYBOARD_RESIZE_STEP_FINE : KEYBOARD_RESIZE_STEP;
         let deltaX = 0;
         let deltaY = 0;
         switch (event.key) {
@@ -262,13 +263,13 @@ class WindowResizeHandlerDirective {
         });
     }
     #bounds() {
-        const innerWidth = this.#document.defaultView?.innerWidth || DefaultMaxWindowWidth;
-        const innerHeight = this.#document.defaultView?.innerHeight || DefaultMaxWindowHeight;
+        const innerWidth = this.#document.defaultView?.innerWidth || DEFAULT_MAX_WINDOW_WIDTH;
+        const innerHeight = this.#document.defaultView?.innerHeight || DEFAULT_MAX_WINDOW_HEIGHT;
         return {
             innerWidth,
             innerHeight,
-            minWidth: this.minWidth() || DefaultMinWindowWidth,
-            minHeight: this.minHeight() || DefaultMinWindowHeight,
+            minWidth: this.minWidth() || DEFAULT_MIN_WINDOW_WIDTH,
+            minHeight: this.minHeight() || DEFAULT_MIN_WINDOW_HEIGHT,
             maxWidth: this.maxWidth() ?? innerWidth,
             maxHeight: this.maxHeight() ?? innerHeight
         };
@@ -431,6 +432,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: true }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], windowRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "windowRef", required: true }] }] } });
 
+const WINDOW_DEFAULT_MESSAGES = {
+    close: "Close",
+    closeWindow: "Close window",
+    maximize: "Maximize",
+    minimize: "Minimize",
+    moveWindow: "Move window. Use arrow keys to move.",
+    resizeBottom: "Resize window from the bottom. Use arrow keys to resize.",
+    resizeBottomLeft: "Resize window from the bottom-left corner. Use arrow keys to resize.",
+    resizeBottomRight: "Resize window from the bottom-right corner. Use arrow keys to resize.",
+    resizeLeft: "Resize window from the left. Use arrow keys to resize.",
+    resizeRight: "Resize window from the right. Use arrow keys to resize.",
+    resizeTop: "Resize window from the top. Use arrow keys to resize.",
+    resizeTopLeft: "Resize window from the top-left corner. Use arrow keys to resize.",
+    resizeTopRight: "Resize window from the top-right corner. Use arrow keys to resize.",
+    restore: "Restore"
+};
+
 const windowBaseThemeVariants = cva(`
         flex h-full w-full flex-col
         ${themeOverlaySurfaceClasses} text-foreground
@@ -470,14 +488,14 @@ const windowResizerThemeVariants = cva(`
     `, {
     variants: {
         position: {
-            east: "top-0 bottom-0 -right-0.5 w-2 cursor-ew-resize",
-            north: "left-0 right-0 -top-0.5 h-2 cursor-ns-resize",
-            south: "left-0 right-0 -bottom-0.5 h-2 cursor-ns-resize",
-            west: "top-0 bottom-0 -left-0.5 w-2 cursor-ew-resize",
-            northeast: "-top-0.5 -right-0.5 w-2 h-2 cursor-nesw-resize",
-            northwest: "-top-0.5 -left-0.5 w-2 h-2 cursor-nwse-resize",
-            southeast: "-bottom-0.5 -right-0.5 w-2 h-2 cursor-nwse-resize",
-            southwest: "-bottom-0.5 -left-0.5 w-2 h-2 cursor-nesw-resize"
+            east: "inset-y-0 -end-0.5 w-2 cursor-ew-resize rtl:-start-0.5 rtl:end-auto",
+            north: "inset-x-0 -top-0.5 h-2 cursor-ns-resize",
+            south: "inset-x-0 -bottom-0.5 h-2 cursor-ns-resize",
+            west: "inset-y-0 -start-0.5 w-2 cursor-ew-resize rtl:-end-0.5 rtl:start-auto",
+            northeast: "-top-0.5 -end-0.5 w-2 h-2 cursor-nesw-resize rtl:-start-0.5 rtl:end-auto",
+            northwest: "-top-0.5 -start-0.5 w-2 h-2 cursor-nwse-resize rtl:-end-0.5 rtl:start-auto",
+            southeast: "-bottom-0.5 -end-0.5 w-2 h-2 cursor-nwse-resize rtl:-start-0.5 rtl:end-auto",
+            southwest: "-bottom-0.5 -start-0.5 w-2 h-2 cursor-nesw-resize rtl:-end-0.5 rtl:start-auto"
         }
     }
 });
@@ -538,7 +556,9 @@ class WindowContentComponent {
     #appRef;
     #document;
     #hostElementRef;
+    #i18n;
     #injector;
+    #localeMessages;
     #sizeBeforeMaximize;
     #sizeBeforeMinimize;
     #trapFocus;
@@ -547,7 +567,9 @@ class WindowContentComponent {
         this.#appRef = inject(ApplicationRef);
         this.#document = inject(DOCUMENT);
         this.#hostElementRef = inject(ElementRef);
+        this.#i18n = inject(MonaI18nService);
         this.#injector = inject(Injector);
+        this.#localeMessages = this.#i18n.componentMessages("window", WINDOW_DEFAULT_MESSAGES);
         this.#sizeBeforeMaximize = signal({ width: 0, height: 0, top: 0, left: 0 }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#sizeBeforeMaximize" }] : /* istanbul ignore next */ []));
         this.#sizeBeforeMinimize = signal(0, /* @ts-ignore */
@@ -583,6 +605,10 @@ class WindowContentComponent {
         ...(ngDevMode ? [{ debugName: "maximizeIcon" }] : /* istanbul ignore next */ []));
         this.maximized = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "maximized" }] : /* istanbul ignore next */ []));
+        this.messages = computed(() => {
+            return mergeMessages(this.#localeMessages(), this.windowData.messages);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
         this.minimized = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "minimized" }] : /* istanbul ignore next */ []));
         this.titleBarActionClass = computed(() => {
@@ -709,7 +735,7 @@ class WindowContentComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: WindowContentComponent, isStandalone: true, selector: "mona-window-content", host: { attributes: { "role": "dialog" }, properties: { "class": "baseClass()", "attr.aria-labelledby": "headerId", "attr.aria-modal": "windowData.modal ?? false" } }, viewQueries: [{ propertyName: "componentAnchor", first: true, predicate: ["componentAnchor"], descendants: true, read: ViewContainerRef, isSignal: true }], hostDirectives: [{ directive: i1.CdkTrapFocus }], ngImport: i0, template: "<div [class]=\"contentContainerClass()\">\n    <div\n        [class]=\"titleBarClass()\"\n        monaWindowDragHandler\n        (dblclick)=\"onMaximizeClick()\"\n        [draggable]=\"windowData.draggable\"\n        [windowRef]=\"windowData.windowReference\"\n        [attr.tabindex]=\"windowData.draggable ? 0 : null\"\n        [attr.aria-label]=\"windowData.draggable ? 'Move window. Use arrow keys to move.' : null\">\n        <div [id]=\"headerId\" [class]=\"titleContainerClass()\">\n            @if (windowData.titleTemplate) {\n                <ng-container [ngTemplateOutlet]=\"windowData.titleTemplate\"></ng-container>\n            } @else {\n                <span [class]=\"titleClass()\">{{ windowData.title ?? \"\" }}</span>\n            }\n        </div>\n        <div [class]=\"titleBarActionClass()\">\n            @if (windowData.actionTemplate) {\n                <ng-container\n                    [ngTemplateOutlet]=\"windowData.actionTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: windowData.windowReference.windowRef }\">\n                </ng-container>\n            }\n            @let maximizeTitle = maximized() || minimized() ? \"Restore\" : \"Maximize\";\n            @if (windowData.minimizable && !minimized()) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    type=\"button\"\n                    [iconOnly]=\"true\"\n                    [rounded]=\"windowData.rounded\"\n                    [title]=\"'Minimize'\"\n                    aria-label=\"Minimize\"\n                    (dblclick)=\"$event.stopPropagation()\"\n                    (click)=\"onMinimizeClick()\">\n                    <svg lucideMinus [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            }\n            @if (windowData.maximizable) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    type=\"button\"\n                    [iconOnly]=\"true\"\n                    [rounded]=\"windowData.rounded\"\n                    [title]=\"maximizeTitle\"\n                    [attr.aria-label]=\"maximizeTitle\"\n                    (dblclick)=\"$event.stopPropagation()\"\n                    (click)=\"onMaximizeClick()\">\n                    <svg [lucideIcon]=\"maximizeIcon()\" [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            }\n            @if (windowData.closable) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    type=\"button\"\n                    [iconOnly]=\"true\"\n                    [rounded]=\"windowData.rounded\"\n                    title=\"Close\"\n                    aria-label=\"Close window\"\n                    (dblclick)=\"$event.stopPropagation()\"\n                    (click)=\"onCloseClick($event)\">\n                    <svg lucideX [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            }\n        </div>\n    </div>\n    @if (!minimized()) {\n        <div [class]=\"contentClass()\">\n            @switch (contentType()) {\n                @case (\"template\") {\n                    <ng-container [ngTemplateOutlet]=\"contentTemplate()!\"></ng-container>\n                }\n                @case (\"component\") {\n                    <ng-container #componentAnchor></ng-container>\n                }\n            }\n        </div>\n        @if (windowData.footerTemplate) {\n            <div>\n                <ng-container [ngTemplateOutlet]=\"windowData.footerTemplate\"></ng-container>\n            </div>\n        }\n    }\n    @if (windowData.resizable && !maximized()) {\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"north\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the top. Use arrow keys to resize.\"\n            [class]=\"'north' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"south\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the bottom. Use arrow keys to resize.\"\n            [class]=\"'south' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"east\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the right. Use arrow keys to resize.\"\n            [class]=\"'east' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"west\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the left. Use arrow keys to resize.\"\n            [class]=\"'west' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"northeast\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the top-right corner. Use arrow keys to resize.\"\n            [class]=\"'northeast' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"northwest\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the top-left corner. Use arrow keys to resize.\"\n            [class]=\"'northwest' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"southeast\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the bottom-right corner. Use arrow keys to resize.\"\n            [class]=\"'southeast' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"southwest\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the bottom-left corner. Use arrow keys to resize.\"\n            [class]=\"'southwest' | monaResizePosition\"></div>\n    }\n</div>\n", dependencies: [{ kind: "directive", type: WindowDragHandlerDirective, selector: "div[monaWindowDragHandler]", inputs: ["draggable", "windowRef"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: WindowResizeHandlerDirective, selector: "div[monaWindowResizeHandler]", inputs: ["direction", "maxHeight", "maxWidth", "minHeight", "minWidth", "windowRef"] }, { kind: "component", type: LucideMinus, selector: "svg[lucideMinus]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "pipe", type: ResizePositionPipe, name: "monaResizePosition" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: WindowContentComponent, isStandalone: true, selector: "mona-window-content", host: { attributes: { "role": "dialog" }, properties: { "class": "baseClass()", "attr.aria-labelledby": "headerId", "attr.aria-modal": "windowData.modal ?? false" } }, viewQueries: [{ propertyName: "componentAnchor", first: true, predicate: ["componentAnchor"], descendants: true, read: ViewContainerRef, isSignal: true }], hostDirectives: [{ directive: i1.CdkTrapFocus }], ngImport: i0, template: "<div [class]=\"contentContainerClass()\">\n    <div\n        [class]=\"titleBarClass()\"\n        monaWindowDragHandler\n        (dblclick)=\"onMaximizeClick()\"\n        [draggable]=\"windowData.draggable\"\n        [windowRef]=\"windowData.windowReference\"\n        [attr.tabindex]=\"windowData.draggable ? 0 : null\"\n        [attr.aria-label]=\"windowData.draggable ? messages().moveWindow : null\">\n        <div [id]=\"headerId\" [class]=\"titleContainerClass()\">\n            @if (windowData.titleTemplate) {\n                <ng-container [ngTemplateOutlet]=\"windowData.titleTemplate\"></ng-container>\n            } @else {\n                <span [class]=\"titleClass()\">{{ windowData.title ?? \"\" }}</span>\n            }\n        </div>\n        <div [class]=\"titleBarActionClass()\">\n            @if (windowData.actionTemplate) {\n                <ng-container\n                    [ngTemplateOutlet]=\"windowData.actionTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: windowData.windowReference.windowRef }\">\n                </ng-container>\n            }\n            @let maximizeTitle = maximized() || minimized() ? messages().restore : messages().maximize;\n            @if (windowData.minimizable && !minimized()) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    type=\"button\"\n                    [iconOnly]=\"true\"\n                    [rounded]=\"windowData.rounded\"\n                    [title]=\"messages().minimize\"\n                    [attr.aria-label]=\"messages().minimize\"\n                    (dblclick)=\"$event.stopPropagation()\"\n                    (click)=\"onMinimizeClick()\">\n                    <svg lucideMinus [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            }\n            @if (windowData.maximizable) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    type=\"button\"\n                    [iconOnly]=\"true\"\n                    [rounded]=\"windowData.rounded\"\n                    [title]=\"maximizeTitle\"\n                    [attr.aria-label]=\"maximizeTitle\"\n                    (dblclick)=\"$event.stopPropagation()\"\n                    (click)=\"onMaximizeClick()\">\n                    <svg [lucideIcon]=\"maximizeIcon()\" [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            }\n            @if (windowData.closable) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    type=\"button\"\n                    [iconOnly]=\"true\"\n                    [rounded]=\"windowData.rounded\"\n                    [title]=\"messages().close\"\n                    [attr.aria-label]=\"messages().closeWindow\"\n                    (dblclick)=\"$event.stopPropagation()\"\n                    (click)=\"onCloseClick($event)\">\n                    <svg lucideX [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            }\n        </div>\n    </div>\n    @if (!minimized()) {\n        <div [class]=\"contentClass()\">\n            @switch (contentType()) {\n                @case (\"template\") {\n                    <ng-container [ngTemplateOutlet]=\"contentTemplate()!\"></ng-container>\n                }\n                @case (\"component\") {\n                    <ng-container #componentAnchor></ng-container>\n                }\n            }\n        </div>\n        @if (windowData.footerTemplate) {\n            <div>\n                <ng-container [ngTemplateOutlet]=\"windowData.footerTemplate\"></ng-container>\n            </div>\n        }\n    }\n    @if (windowData.resizable && !maximized()) {\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"north\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"messages().resizeTop\"\n            [class]=\"'north' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"south\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"messages().resizeBottom\"\n            [class]=\"'south' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"east\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"messages().resizeRight\"\n            [class]=\"'east' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"west\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"messages().resizeLeft\"\n            [class]=\"'west' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"northeast\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"messages().resizeTopRight\"\n            [class]=\"'northeast' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"northwest\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"messages().resizeTopLeft\"\n            [class]=\"'northwest' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"southeast\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"messages().resizeBottomRight\"\n            [class]=\"'southeast' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"southwest\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"messages().resizeBottomLeft\"\n            [class]=\"'southwest' | monaResizePosition\"></div>\n    }\n</div>\n", dependencies: [{ kind: "directive", type: WindowDragHandlerDirective, selector: "div[monaWindowDragHandler]", inputs: ["draggable", "windowRef"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: WindowResizeHandlerDirective, selector: "div[monaWindowResizeHandler]", inputs: ["direction", "maxHeight", "maxWidth", "minHeight", "minWidth", "windowRef"] }, { kind: "component", type: LucideMinus, selector: "svg[lucideMinus]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "pipe", type: ResizePositionPipe, name: "monaResizePosition" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowContentComponent, decorators: [{
             type: Component,
@@ -727,7 +753,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.aria-labelledby]": "headerId",
                         "[attr.aria-modal]": "windowData.modal ?? false",
                         role: "dialog"
-                    }, hostDirectives: [CdkTrapFocus], template: "<div [class]=\"contentContainerClass()\">\n    <div\n        [class]=\"titleBarClass()\"\n        monaWindowDragHandler\n        (dblclick)=\"onMaximizeClick()\"\n        [draggable]=\"windowData.draggable\"\n        [windowRef]=\"windowData.windowReference\"\n        [attr.tabindex]=\"windowData.draggable ? 0 : null\"\n        [attr.aria-label]=\"windowData.draggable ? 'Move window. Use arrow keys to move.' : null\">\n        <div [id]=\"headerId\" [class]=\"titleContainerClass()\">\n            @if (windowData.titleTemplate) {\n                <ng-container [ngTemplateOutlet]=\"windowData.titleTemplate\"></ng-container>\n            } @else {\n                <span [class]=\"titleClass()\">{{ windowData.title ?? \"\" }}</span>\n            }\n        </div>\n        <div [class]=\"titleBarActionClass()\">\n            @if (windowData.actionTemplate) {\n                <ng-container\n                    [ngTemplateOutlet]=\"windowData.actionTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: windowData.windowReference.windowRef }\">\n                </ng-container>\n            }\n            @let maximizeTitle = maximized() || minimized() ? \"Restore\" : \"Maximize\";\n            @if (windowData.minimizable && !minimized()) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    type=\"button\"\n                    [iconOnly]=\"true\"\n                    [rounded]=\"windowData.rounded\"\n                    [title]=\"'Minimize'\"\n                    aria-label=\"Minimize\"\n                    (dblclick)=\"$event.stopPropagation()\"\n                    (click)=\"onMinimizeClick()\">\n                    <svg lucideMinus [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            }\n            @if (windowData.maximizable) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    type=\"button\"\n                    [iconOnly]=\"true\"\n                    [rounded]=\"windowData.rounded\"\n                    [title]=\"maximizeTitle\"\n                    [attr.aria-label]=\"maximizeTitle\"\n                    (dblclick)=\"$event.stopPropagation()\"\n                    (click)=\"onMaximizeClick()\">\n                    <svg [lucideIcon]=\"maximizeIcon()\" [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            }\n            @if (windowData.closable) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    type=\"button\"\n                    [iconOnly]=\"true\"\n                    [rounded]=\"windowData.rounded\"\n                    title=\"Close\"\n                    aria-label=\"Close window\"\n                    (dblclick)=\"$event.stopPropagation()\"\n                    (click)=\"onCloseClick($event)\">\n                    <svg lucideX [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            }\n        </div>\n    </div>\n    @if (!minimized()) {\n        <div [class]=\"contentClass()\">\n            @switch (contentType()) {\n                @case (\"template\") {\n                    <ng-container [ngTemplateOutlet]=\"contentTemplate()!\"></ng-container>\n                }\n                @case (\"component\") {\n                    <ng-container #componentAnchor></ng-container>\n                }\n            }\n        </div>\n        @if (windowData.footerTemplate) {\n            <div>\n                <ng-container [ngTemplateOutlet]=\"windowData.footerTemplate\"></ng-container>\n            </div>\n        }\n    }\n    @if (windowData.resizable && !maximized()) {\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"north\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the top. Use arrow keys to resize.\"\n            [class]=\"'north' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"south\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the bottom. Use arrow keys to resize.\"\n            [class]=\"'south' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"east\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the right. Use arrow keys to resize.\"\n            [class]=\"'east' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"west\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the left. Use arrow keys to resize.\"\n            [class]=\"'west' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"northeast\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the top-right corner. Use arrow keys to resize.\"\n            [class]=\"'northeast' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"northwest\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the top-left corner. Use arrow keys to resize.\"\n            [class]=\"'northwest' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"southeast\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the bottom-right corner. Use arrow keys to resize.\"\n            [class]=\"'southeast' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"southwest\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the bottom-left corner. Use arrow keys to resize.\"\n            [class]=\"'southwest' | monaResizePosition\"></div>\n    }\n</div>\n" }]
+                    }, hostDirectives: [CdkTrapFocus], template: "<div [class]=\"contentContainerClass()\">\n    <div\n        [class]=\"titleBarClass()\"\n        monaWindowDragHandler\n        (dblclick)=\"onMaximizeClick()\"\n        [draggable]=\"windowData.draggable\"\n        [windowRef]=\"windowData.windowReference\"\n        [attr.tabindex]=\"windowData.draggable ? 0 : null\"\n        [attr.aria-label]=\"windowData.draggable ? messages().moveWindow : null\">\n        <div [id]=\"headerId\" [class]=\"titleContainerClass()\">\n            @if (windowData.titleTemplate) {\n                <ng-container [ngTemplateOutlet]=\"windowData.titleTemplate\"></ng-container>\n            } @else {\n                <span [class]=\"titleClass()\">{{ windowData.title ?? \"\" }}</span>\n            }\n        </div>\n        <div [class]=\"titleBarActionClass()\">\n            @if (windowData.actionTemplate) {\n                <ng-container\n                    [ngTemplateOutlet]=\"windowData.actionTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: windowData.windowReference.windowRef }\">\n                </ng-container>\n            }\n            @let maximizeTitle = maximized() || minimized() ? messages().restore : messages().maximize;\n            @if (windowData.minimizable && !minimized()) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    type=\"button\"\n                    [iconOnly]=\"true\"\n                    [rounded]=\"windowData.rounded\"\n                    [title]=\"messages().minimize\"\n                    [attr.aria-label]=\"messages().minimize\"\n                    (dblclick)=\"$event.stopPropagation()\"\n                    (click)=\"onMinimizeClick()\">\n                    <svg lucideMinus [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            }\n            @if (windowData.maximizable) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    type=\"button\"\n                    [iconOnly]=\"true\"\n                    [rounded]=\"windowData.rounded\"\n                    [title]=\"maximizeTitle\"\n                    [attr.aria-label]=\"maximizeTitle\"\n                    (dblclick)=\"$event.stopPropagation()\"\n                    (click)=\"onMaximizeClick()\">\n                    <svg [lucideIcon]=\"maximizeIcon()\" [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            }\n            @if (windowData.closable) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    type=\"button\"\n                    [iconOnly]=\"true\"\n                    [rounded]=\"windowData.rounded\"\n                    [title]=\"messages().close\"\n                    [attr.aria-label]=\"messages().closeWindow\"\n                    (dblclick)=\"$event.stopPropagation()\"\n                    (click)=\"onCloseClick($event)\">\n                    <svg lucideX [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            }\n        </div>\n    </div>\n    @if (!minimized()) {\n        <div [class]=\"contentClass()\">\n            @switch (contentType()) {\n                @case (\"template\") {\n                    <ng-container [ngTemplateOutlet]=\"contentTemplate()!\"></ng-container>\n                }\n                @case (\"component\") {\n                    <ng-container #componentAnchor></ng-container>\n                }\n            }\n        </div>\n        @if (windowData.footerTemplate) {\n            <div>\n                <ng-container [ngTemplateOutlet]=\"windowData.footerTemplate\"></ng-container>\n            </div>\n        }\n    }\n    @if (windowData.resizable && !maximized()) {\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"north\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"messages().resizeTop\"\n            [class]=\"'north' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"south\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"messages().resizeBottom\"\n            [class]=\"'south' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"east\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"messages().resizeRight\"\n            [class]=\"'east' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"west\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"messages().resizeLeft\"\n            [class]=\"'west' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"northeast\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"messages().resizeTopRight\"\n            [class]=\"'northeast' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"northwest\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"messages().resizeTopLeft\"\n            [class]=\"'northwest' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"southeast\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"messages().resizeBottomRight\"\n            [class]=\"'southeast' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"southwest\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"messages().resizeBottomLeft\"\n            [class]=\"'southwest' | monaResizePosition\"></div>\n    }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { componentAnchor: [{ type: i0.ViewChild, args: ["componentAnchor", { ...{
                             read: ViewContainerRef
                         }, isSignal: true }] }] } });
@@ -805,8 +831,8 @@ class WindowReference {
         const element = this.#popupRefOrThrow.overlayRef.overlayElement;
         const width = element.getBoundingClientRect().width;
         const height = element.getBoundingClientRect().height;
-        const left = (this.document.defaultView?.innerWidth || DefaultMaxWindowWidth - width) / 2;
-        const top = (this.document.defaultView?.innerHeight || DefaultMaxWindowHeight - height) / 2;
+        const left = (this.document.defaultView?.innerWidth || DEFAULT_MAX_WINDOW_WIDTH - width) / 2;
+        const top = (this.document.defaultView?.innerHeight || DEFAULT_MAX_WINDOW_HEIGHT - height) / 2;
         element.style.left = `${left}px`;
         element.style.top = `${top}px`;
     }
@@ -903,6 +929,7 @@ const createWindowInjectorData = (settings) => {
         maxHeight: settings.maxHeight,
         maxWidth: settings.maxWidth,
         maximizable: settings.maximizable ?? true,
+        messages: settings.messages,
         minHeight: settings.minHeight ?? 50,
         minWidth: settings.minWidth ?? 50,
         minimizable: settings.minimizable ?? true,
@@ -991,20 +1018,18 @@ class WindowComponent {
          */
         this.closable = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
-        /**
-         * @description Emits when the window is about to be closed.
-         */
+        // eslint-disable-next-line @angular-eslint/no-output-native
         this.close = output();
-        /**
-         * @description Emitted after the window has fully closed (post-animation). Preventing this event has no effect.
-         */
-        this.closed = output();
         /**
          * @description Sets whether the window should close when the escape key is pressed.
          * @default true
          */
         this.closeOnEscape = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted after the window has fully closed (post-animation). Preventing this event has no effect.
+         */
+        this.closed = output();
         /**
          * @description Emits when the window dragging ends.
          */
@@ -1057,6 +1082,11 @@ class WindowComponent {
          */
         this.maximizable = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "maximizable" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Internationalization message overrides for accessible labels.
+         */
+        this.messages = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "messages" }] : /* istanbul ignore next */ []));
         /**
          * @description Sets the minimum height of the window.
          */
@@ -1157,6 +1187,7 @@ class WindowComponent {
             maxHeight: this.maxHeight(),
             maxWidth: this.maxWidth(),
             maximizable: this.maximizable(),
+            messages: this.messages(),
             minHeight: this.minHeight(),
             minWidth: this.minWidth(),
             minimizable: this.minimizable(),
@@ -1224,7 +1255,7 @@ class WindowComponent {
         this.#setResizeSubscription();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: WindowComponent, isStandalone: true, selector: "mona-window", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, focusedElement: { classPropertyName: "focusedElement", publicName: "focusedElement", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, left: { classPropertyName: "left", publicName: "left", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, maximizable: { classPropertyName: "maximizable", publicName: "maximizable", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minimizable: { classPropertyName: "minimizable", publicName: "minimizable", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, top: { classPropertyName: "top", publicName: "top", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", closed: "closed", dragEnd: "dragEnd", dragStart: "dragStart", height: "heightChange", left: "leftChange", top: "topChange", width: "widthChange" }, host: { classAttribute: "hidden" }, queries: [{ propertyName: "actionTemplate", first: true, predicate: WindowActionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "contentTemplate", first: true, predicate: WindowContentTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: WindowFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "titleTemplate", first: true, predicate: WindowTitleTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: ``, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: WindowComponent, isStandalone: true, selector: "mona-window", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, focusedElement: { classPropertyName: "focusedElement", publicName: "focusedElement", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, left: { classPropertyName: "left", publicName: "left", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, maximizable: { classPropertyName: "maximizable", publicName: "maximizable", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minimizable: { classPropertyName: "minimizable", publicName: "minimizable", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, top: { classPropertyName: "top", publicName: "top", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", closed: "closed", dragEnd: "dragEnd", dragStart: "dragStart", height: "heightChange", left: "leftChange", top: "topChange", width: "widthChange" }, host: { classAttribute: "hidden" }, queries: [{ propertyName: "actionTemplate", first: true, predicate: WindowActionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "contentTemplate", first: true, predicate: WindowContentTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: WindowFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "titleTemplate", first: true, predicate: WindowTitleTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: ``, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowComponent, decorators: [{
             type: Component,
@@ -1235,7 +1266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         class: "hidden"
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { actionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WindowActionTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], contentTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WindowContentTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WindowFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], titleTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WindowTitleTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], closed: [{ type: i0.Output, args: ["closed"] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], focusedElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusedElement", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }, { type: i0.Output, args: ["heightChange"] }], left: [{ type: i0.Input, args: [{ isSignal: true, alias: "left", required: false }] }, { type: i0.Output, args: ["leftChange"] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], maximizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximizable", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], minimizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimizable", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], top: [{ type: i0.Input, args: [{ isSignal: true, alias: "top", required: false }] }, { type: i0.Output, args: ["topChange"] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }, { type: i0.Output, args: ["widthChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { actionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WindowActionTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], contentTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WindowContentTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WindowFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], titleTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WindowTitleTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], focusedElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusedElement", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }, { type: i0.Output, args: ["heightChange"] }], left: [{ type: i0.Input, args: [{ isSignal: true, alias: "left", required: false }] }, { type: i0.Output, args: ["leftChange"] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], maximizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximizable", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], minimizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimizable", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], top: [{ type: i0.Input, args: [{ isSignal: true, alias: "top", required: false }] }, { type: i0.Output, args: ["topChange"] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }, { type: i0.Output, args: ["widthChange"] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/window
@@ -1245,5 +1276,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { WindowActionTemplateDirective, WindowComponent, WindowContentTemplateDirective, WindowFooterTemplateDirective, WindowRef, WindowService, WindowTitleTemplateDirective };
+export { WINDOW_DEFAULT_MESSAGES, WindowActionTemplateDirective, WindowComponent, WindowContentTemplateDirective, WindowFooterTemplateDirective, WindowRef, WindowService, WindowTitleTemplateDirective };
 //# sourceMappingURL=nanahoshi-mona-ui-window.mjs.map

package/i18n/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/nanahoshi-mona-ui-i18n.mjs",
+  "typings": "../types/nanahoshi-mona-ui-i18n.d.ts"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.18.5",
+  "version": "0.19.0",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {
@@ -187,6 +187,10 @@
       "types": "./types/nanahoshi-mona-ui-grid.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-grid.mjs"
     },
+    "./i18n": {
+      "types": "./types/nanahoshi-mona-ui-i18n.d.ts",
+      "default": "./fesm2022/nanahoshi-mona-ui-i18n.mjs"
+    },
     "./internal": {
       "types": "./types/nanahoshi-mona-ui-internal.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-internal.mjs"

package/types/nanahoshi-mona-ui-auto-complete.d.ts

@@ -1,3 +1,5 @@
+import * as _nanahoshi_mona_ui_i18n from '@nanahoshi/mona-ui/i18n';
+import { MonaAutoCompleteMessages } from '@nanahoshi/mona-ui/i18n';
 import * as _angular_core from '@angular/core';
 import { TemplateRef } from '@angular/core';
 import { FormValueControl } from '@angular/forms/signals';
@@ -50,6 +52,7 @@ declare class AutoCompleteComponent<TData = unknown> implements FormValueControl
     protected readonly isEmpty: _angular_core.Signal<boolean>;
     protected readonly listId: string;
     protected readonly listPopupClass: _angular_core.Signal<string>;
+    protected readonly messages: _angular_core.Signal<_nanahoshi_mona_ui_i18n.MonaAutoCompleteMessages>;
     protected readonly noDataTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     protected readonly popupTemplate: _angular_core.Signal<TemplateRef<any>>;
     protected readonly prefixTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
@@ -219,4 +222,6 @@ declare class AutoCompleteComponent<TData = unknown> implements FormValueControl
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AutoCompleteComponent<any>, "mona-auto-complete", never, { "ariaDescribedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "itemDisabled": { "alias": "itemDisabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "highlightFirst": { "alias": "highlightFirst"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "popupClass": { "alias": "popupClass"; "required": false; "isSignal": true; }; "popupHeight": { "alias": "popupHeight"; "required": false; "isSignal": true; }; "popupWidth": { "alias": "popupWidth"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "textField": { "alias": "textField"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "close": "close"; "closed": "closed"; "disabled": "disabledChange"; "open": "open"; "opened": "opened"; "touch": "touch"; "value": "valueChange"; }, ["footerTemplate", "groupHeaderTemplate", "headerTemplate", "itemTemplate", "noDataTemplate", "prefixTemplate", "suffixTemplate"], never, true, [{ directive: typeof i1.DropdownDataHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownListPopupHandlerDirective; inputs: {}; outputs: {}; }]>;
 }
 
-export { AutoCompleteComponent };
+declare const AUTO_COMPLETE_DEFAULT_MESSAGES: MonaAutoCompleteMessages;
+
+export { AUTO_COMPLETE_DEFAULT_MESSAGES, AutoCompleteComponent };

package/types/nanahoshi-mona-ui-breadcrumb.d.ts

@@ -1,3 +1,5 @@
+import * as _nanahoshi_mona_ui_i18n from '@nanahoshi/mona-ui/i18n';
+import { MonaBreadcrumbMessages } from '@nanahoshi/mona-ui/i18n';
 import * as _angular_core from '@angular/core';
 import { TemplateRef } from '@angular/core';
 import * as class_variance_authority_types from 'class-variance-authority/types';
@@ -35,14 +37,16 @@ declare class BreadcrumbItemComponent {
 }
 
 declare class BreadcrumbComponent implements BreadcrumbVariantInput {
-    protected readonly itemComponents: _angular_core.Signal<readonly BreadcrumbItemComponent[]>;
+    #private;
     protected readonly currentItemClass: _angular_core.Signal<string>;
+    protected readonly itemComponents: _angular_core.Signal<readonly BreadcrumbItemComponent[]>;
     protected readonly listClass: _angular_core.Signal<string>;
+    protected readonly messages: _angular_core.Signal<_nanahoshi_mona_ui_i18n.MonaBreadcrumbMessages>;
     protected readonly separatorTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     /**
      * @description Accessible name for the breadcrumb navigation landmark.
      * Override when multiple breadcrumb components appear on the same page.
-     * @default "Breadcrumb"
+     * @default ""
      */
     readonly ariaLabel: _angular_core.InputSignal<string>;
     /**
@@ -65,4 +69,6 @@ declare class BreadcrumbSeparatorTemplateDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BreadcrumbSeparatorTemplateDirective, "ng-template[monaBreadcrumbSeparatorTemplate]", never, {}, {}, never, never, true, never>;
 }
 
-export { BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbSeparatorTemplateDirective };
+declare const BREADCRUMB_DEFAULT_MESSAGES: MonaBreadcrumbMessages;
+
+export { BREADCRUMB_DEFAULT_MESSAGES, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbSeparatorTemplateDirective };

package/types/nanahoshi-mona-ui-button-group.d.ts

@@ -1,3 +1,4 @@
+import * as _nanahoshi_mona_ui_i18n from '@nanahoshi/mona-ui/i18n';
 import * as _angular_core from '@angular/core';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import { SelectionMode } from '@nanahoshi/mona-ui/common';
@@ -17,6 +18,8 @@ declare class ButtonGroupComponent implements ButtonGroupVariantsInput {
     #private;
     protected readonly baseClass: _angular_core.Signal<string>;
     protected readonly buttons: _angular_core.Signal<readonly ButtonDirective[]>;
+    protected readonly messages: _angular_core.Signal<_nanahoshi_mona_ui_i18n.MonaButtonGroupMessages>;
+    protected readonly effectiveAriaLabel: _angular_core.Signal<string>;
     /**
      * @description When `false` and `selection` is `"single"`, at least one button must remain selected;
      * the active button cannot be deselected. Has no effect in `"multiple"` mode.
@@ -26,9 +29,8 @@ declare class ButtonGroupComponent implements ButtonGroupVariantsInput {
     /**
      * @description Accessible name for the host element. Override when multiple button groups appear on the same page
      * so screen reader users can distinguish them.
-     * @default "Button group"
      */
-    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     /**
      * @description Emitted when any child button in the group is clicked.
      * Use `[(selected)]` on child buttons to observe the resulting selection state.
@@ -72,5 +74,9 @@ declare class ButtonGroupComponent implements ButtonGroupVariantsInput {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonGroupComponent, "mona-button-group", never, { "allowEmpty": { "alias": "allowEmpty"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "buttonClick": "buttonClick"; "disabled": "disabledChange"; "selection": "selectionChange"; }, ["buttons"], ["[monaButton]"], true, never>;
 }
 
-export { ButtonGroupComponent };
+declare const BUTTON_GROUP_DEFAULT_MESSAGES: {
+    buttonGroup: string;
+};
+
+export { BUTTON_GROUP_DEFAULT_MESSAGES, ButtonGroupComponent };
 export type { ButtonGroupVariantProps };

package/types/nanahoshi-mona-ui-calendar.d.ts

@@ -1,6 +1,8 @@
 import * as _mirei_ts_collections from '@mirei/ts-collections';
 import * as _angular_core from '@angular/core';
 import { TemplateRef } from '@angular/core';
+import * as _nanahoshi_mona_ui_i18n from '@nanahoshi/mona-ui/i18n';
+import { MonaCalendarMessages } from '@nanahoshi/mona-ui/i18n';
 import { FormValueControl } from '@angular/forms/signals';
 import { CalendarView, DateDisabledType } from '@nanahoshi/mona-ui/date-input';
 import * as class_variance_authority_types from 'class-variance-authority/types';
@@ -106,6 +108,7 @@ type CalendarVariantInput = CalendarBaseVariantInput & CalendarHeaderVariantInpu
 
 declare class CalendarComponent implements CalendarVariantInput, FormValueControl<Date | Date[] | null> {
     #private;
+    protected readonly messages: _angular_core.Signal<_nanahoshi_mona_ui_i18n.MonaCalendarMessages>;
     protected readonly ariaLabel: _angular_core.Signal<string>;
     protected readonly baseClass: _angular_core.Signal<string>;
     protected readonly calendarView: _angular_core.WritableSignal<CalendarView>;
@@ -125,10 +128,12 @@ declare class CalendarComponent implements CalendarVariantInput, FormValueContro
     protected readonly monthDictChunked: _angular_core.Signal<_mirei_ts_collections.ImmutableSet<_mirei_ts_collections.ImmutableDictionary<Date, number>>>;
     protected readonly monthGridClass: _angular_core.Signal<string>;
     protected readonly monthGridHeaderClass: _angular_core.Signal<string>;
+    protected readonly headerMonthYear: _angular_core.Signal<string>;
+    protected readonly headerYear: _angular_core.Signal<string>;
     protected readonly months: _angular_core.Signal<_mirei_ts_collections.ImmutableSet<_mirei_ts_collections.ImmutableSet<readonly [number, string]>>>;
     protected readonly navigatedDate: _angular_core.WritableSignal<Date>;
-    protected readonly nextButtonLabel: _angular_core.Signal<"Next month" | "Next year" | "Next decade">;
-    protected readonly prevButtonLabel: _angular_core.Signal<"Previous month" | "Previous year" | "Previous decade">;
+    protected readonly nextButtonLabel: _angular_core.Signal<string>;
+    protected readonly prevButtonLabel: _angular_core.Signal<string>;
     protected readonly pendingRangeStart: _angular_core.WritableSignal<Date | null>;
     protected readonly rangePreviewDate: _angular_core.WritableSignal<Date | null>;
     protected readonly rangePreviewDates: _angular_core.Signal<Date[]>;
@@ -222,6 +227,7 @@ declare class CalendarComponent implements CalendarVariantInput, FormValueContro
     protected onMonthClick(month: number): void;
     protected onMonthGridPointerLeave(): void;
     protected onNavigationClick(direction: "prev" | "next"): void;
+    protected getWeekNumber(date: Date): number;
     protected onTodayButtonClick(): void;
     protected onViewChangeClick(view: CalendarView): void;
     protected onYearClick(year: number): void;
@@ -239,6 +245,8 @@ declare class CalendarComponent implements CalendarVariantInput, FormValueContro
     private handleSingleSelection;
     private isDateDisabled;
     private isEmptyValue;
+    private horizontalCellDelta;
+    private horizontalPeriodDirection;
     private navigateByDaysOrCells;
     private navigateByPeriod;
     private navigateByWeeksOrRows;
@@ -257,5 +265,7 @@ declare class CalendarComponent implements CalendarVariantInput, FormValueContro
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CalendarComponent, "mona-calendar", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "firstDay": { "alias": "firstDay"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "weekNumber": { "alias": "weekNumber"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "touch": "touch"; "value": "valueChange"; }, ["decadeCellTemplate", "monthCellTemplate", "yearCellTemplate"], never, true, never>;
 }
 
-export { CalendarComponent, CalendarDecadeCellTemplateDirective, CalendarMonthCellTemplateDirective, CalendarYearCellTemplateDirective };
+declare const CALENDAR_DEFAULT_MESSAGES: MonaCalendarMessages;
+
+export { CALENDAR_DEFAULT_MESSAGES, CalendarComponent, CalendarDecadeCellTemplateDirective, CalendarMonthCellTemplateDirective, CalendarYearCellTemplateDirective };
 export type { CalendarSelection, CalendarVariantInput, CalendarVariantProps, DecadeCellTemplateContext, FirstDayOfWeek, MonthCellTemplateContext, YearCellTemplateContext };

package/types/nanahoshi-mona-ui-card.d.ts

@@ -1,3 +1,4 @@
+import * as _nanahoshi_mona_ui_i18n from '@nanahoshi/mona-ui/i18n';
 import * as _angular_core from '@angular/core';
 import { TemplateRef } from '@angular/core';
 import * as class_variance_authority_types from 'class-variance-authority/types';
@@ -23,8 +24,8 @@ type CardVariantInput = Omit<CardBaseVariantInput, "hasFooter" | "hasHeader">;
 
 declare class CardComponent implements CardVariantInput {
     #private;
-    protected readonly actionsCellClass: string;
     protected readonly actionTemplate: _angular_core.Signal<_angular_core.TemplateRef<unknown>[]>;
+    protected readonly actionsCellClass: string;
     protected readonly baseClass: _angular_core.Signal<string>;
     protected readonly contentDirective: _angular_core.Signal<CardContentDirective | undefined>;
     protected readonly descriptionCellClass: string;
@@ -34,6 +35,7 @@ declare class CardComponent implements CardVariantInput {
     protected readonly footerTemplate: _angular_core.Signal<_angular_core.TemplateRef<unknown> | null>;
     protected readonly headerClass: _angular_core.Signal<string>;
     protected readonly headerTemplate: _angular_core.Signal<_angular_core.TemplateRef<unknown> | null>;
+    protected readonly messages: _angular_core.Signal<_nanahoshi_mona_ui_i18n.MonaCardMessages>;
     protected readonly titleCellClass: string;
     protected readonly titleId: _angular_core.Signal<string | null>;
     protected readonly titleTemplate: _angular_core.Signal<_angular_core.TemplateRef<unknown> | null>;
@@ -100,5 +102,9 @@ declare class CardTitleDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CardTitleDirective, "[monaCardTitle]", never, {}, {}, never, never, true, never>;
 }
 
-export { CardActionDirective, CardComponent, CardContentDirective, CardDescriptionDirective, CardFooterComponent, CardHeaderComponent, CardTitleDirective };
+declare const CARD_DEFAULT_MESSAGES: {
+    actionsLabel: string;
+};
+
+export { CARD_DEFAULT_MESSAGES, CardActionDirective, CardComponent, CardContentDirective, CardDescriptionDirective, CardFooterComponent, CardHeaderComponent, CardTitleDirective };
 export type { CardVariantProps };