@nanahoshi/mona-ui 0.23.2 → 0.24.0

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

@@ -23,6 +23,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const OTP_INPUT_DEFAULT_MESSAGES = {
     verificationCode: "Verification code"
 };

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

@@ -10,24 +10,29 @@ import { PreventableEvent, SlicePipe } from '@nanahoshi/mona-ui/common';
 import { DropdownListComponent, DropdownListValueTemplateDirective } from '@nanahoshi/mona-ui/dropdown-list';
 import { DropdownVirtualScrollDirective, DropdownItemTemplateDirective } from '@nanahoshi/mona-ui/dropdowns';
 import { themeRaisedBackdropClasses, NavigationKeys } from '@nanahoshi/mona-ui/internal';
-import { injectComponentDirection, MonaI18nService, formatNumber } from '@nanahoshi/mona-ui/i18n';
+import { formatNumber, injectComponentDirection, MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { NumericTextBoxComponent } from '@nanahoshi/mona-ui/numeric-text-box';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
+function localizeNumber(value, options) {
+    return formatNumber(value, "en-US", options);
+}
 const PAGER_DEFAULT_MESSAGES = {
     firstPageLabel: "First page",
-    jumpBackwardLabel: (pages) => `Jump back ${pages} pages`,
-    jumpForwardLabel: (pages) => `Jump forward ${pages} pages`,
+    jumpBackwardLabel: (pages) => `Jump back ${localizeNumber(pages)} pages`,
+    jumpForwardLabel: (pages) => `Jump forward ${localizeNumber(pages)} pages`,
     lastPageLabel: "Last page",
     nextPageLabel: "Next page",
     ofText: "of",
-    pageLabel: (page) => `Page ${page}`,
-    pageSizeLabel: (pageSize) => `${pageSize} / page`,
-    pageStatus: (page, totalPages) => `Page ${page} of ${totalPages}`,
+    pageLabel: (page) => `Page ${localizeNumber(page)}`,
+    pageSizeLabel: (pageSize) => `${localizeNumber(pageSize)} / page`,
+    pageStatus: (page, totalPages) => `Page ${localizeNumber(page)} of ${localizeNumber(totalPages)}`,
     pageText: "Page",
     previousPageLabel: "Previous page",
-    rangeStatus: (start, end, total) => `${start} - ${end} of ${total} items`
+    rangeStatus: (start, end, total) => `${localizeNumber(start)} - ${localizeNumber(end)} of ${localizeNumber(total)} items`
 };
 
 class PagerFocusableDirective {
@@ -741,7 +746,7 @@ class PagerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PagerComponent, isStandalone: true, selector: "mona-pager", inputs: { firstLast: { classPropertyName: "firstLast", publicName: "firstLast", isSignal: true, isRequired: false, transformFunction: null }, navigable: { classPropertyName: "navigable", publicName: "navigable", isSignal: true, isRequired: false, transformFunction: null }, pageInput: { classPropertyName: "pageInput", publicName: "pageInput", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeValues: { classPropertyName: "pageSizeValues", publicName: "pageSizeValues", isSignal: true, isRequired: false, transformFunction: null }, previousNext: { classPropertyName: "previousNext", publicName: "previousNext", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showInfo: { classPropertyName: "showInfo", publicName: "showInfo", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, skip: { classPropertyName: "skip", publicName: "skip", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, userClasses: { classPropertyName: "userClasses", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, visiblePages: { classPropertyName: "visiblePages", publicName: "visiblePages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.tabindex": "navigable() ? 0 : null", "class": "baseClasses()" } }, queries: [{ propertyName: "navigationButtonsTemplateList", predicate: PagerNavigationButtonsTemplateDirective, isSignal: true }, { propertyName: "numericButtonsTemplate", first: true, predicate: PagerNumericButtonsTemplateDirective, descendants: true, isSignal: true }, { propertyName: "pageSizeTemplate", first: true, predicate: PagerPageSizeTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "pagerInfoTemplate", first: true, predicate: PagerInfoTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "pageSizeDropdownList", first: true, predicate: ["pageSizeDropdownList"], descendants: true, isSignal: true }], ngImport: i0, template: "@let numericButtonsTemplateRef = numericButtonsTemplate()?.templateRef;\n@let pageSizeTemplateRef = pageSizeTemplate();\n@let pagerInfoTemplateRef = pagerInfoTemplate()?.templateRef;\n\n@if (type() === \"numeric\") {\n    @if (pageListVisible()) {\n        <ol [class]=\"listClasses()\">\n            @if (firstLast()) {\n                <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n            }\n            @if (previousNext()) {\n                <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n            }\n\n            @if (numericButtonsTemplateRef) {\n                <ng-container\n                    [ngTemplateOutlet]=\"numericButtonsTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ totalPages: pageCount() }\"></ng-container>\n            } @else {\n                @if (pages().length !== 0) {\n                    <li [class]=\"pageItemClasses(page() === 1)\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === 1\"\n                            [attr.aria-label]=\"messages().pageLabel(1)\"\n                            [attr.aria-current]=\"page() === 1 ? 'page' : null\"\n                            (click)=\"onPageClick(1)\">\n                            {{ formatPageNumber(1) }}\n                        </button>\n                    </li>\n                }\n                @if (previousJumperVisible()) {\n                    <li>\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [attr.aria-label]=\"jumpPreviousLabel()\"\n                            (click)=\"onJumpPreviousClick()\">\n                            <svg lucideEllipsis [size]=\"iconSize()\"></svg>\n                        </button>\n                    </li>\n                }\n\n                @for (pageItem of pages() | monaSlice: 1 : pages().length - 1; track $index) {\n                    <li [attr.data-page]=\"pageItem.page\" [class]=\"pageItemClasses(page() === pageItem.page)\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === pageItem.page\"\n                            [attr.aria-label]=\"messages().pageLabel(pageItem.page)\"\n                            [attr.aria-current]=\"page() === pageItem.page ? 'page' : null\"\n                            (click)=\"onPageClick(pageItem.page)\">\n                            {{ pageItem.text }}\n                        </button>\n                    </li>\n                }\n\n                @if (nextJumperVisible()) {\n                    <li>\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [attr.aria-label]=\"jumpNextLabel()\"\n                            (click)=\"onJumpNextClick()\">\n                            <svg lucideEllipsis [size]=\"iconSize()\"></svg>\n                        </button>\n                    </li>\n                }\n\n                @if (pages().length > 1) {\n                    <li [class]=\"pageItemClasses(page() === pageCount())\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === pageCount()\"\n                            [attr.aria-label]=\"messages().pageLabel(pageCount())\"\n                            [attr.aria-current]=\"page() === pageCount() ? 'page' : null\"\n                            (click)=\"onPageClick(pageCount())\">\n                            {{ formatPageNumber(pageCount()) }}\n                        </button>\n                    </li>\n                }\n            }\n\n            @if (previousNext()) {\n                <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n            }\n\n            @if (firstLast()) {\n                <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n            }\n\n            @if (hasPages() && pageInputVisible() && pageInput()) {\n                <li>\n                    <mona-numeric-text-box\n                        monaPagerFocusable\n                        [spinners]=\"false\"\n                        [minValue]=\"1\"\n                        [maxValue]=\"pageCount()\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"size()\"\n                        [aria-label]=\"messages().pageStatus(page(), pageCount())\"\n                        [ngModel]=\"inputValue()\"\n                        (ngModelChange)=\"inputValue.set($event)\"\n                        (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\n                </li>\n            }\n\n            @if (pageInputVisible() && pageSizeDropdownData().length > 0) {\n                <li>\n                    @if (pageSizeTemplateRef) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"pageSizeTemplateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: pageSizeDropdownData() }\">\n                        </ng-container>\n                    } @else {\n                        <mona-dropdown-list\n                            monaPagerFocusable\n                            [data]=\"pageSizeDropdownData()\"\n                            [aria-label]=\"messages().pageSizeLabel(pageSize())\"\n                            [ngModel]=\"pageSize()\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            (ngModelChange)=\"onPageSizeValueChange($event)\"\n                            #pageSizeDropdownList>\n                            <ng-template monaDropDownListValueTemplate let-item>\n                                <span>{{ messages().pageSizeLabel(item) }}</span>\n                            </ng-template>\n                            <ng-template monaDropDownItemTemplate let-item>\n                                <span>{{ formatPageNumber(item) }}</span>\n                            </ng-template>\n                        </mona-dropdown-list>\n                    }\n                </li>\n            }\n        </ol>\n    }\n    @if (infoVisible()) {\n        @if (pagerInfoTemplateRef) {\n            <ng-container\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n        } @else {\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n        }\n    }\n}\n@if (type() === \"input\") {\n    <div [class]=\"inputClasses()\">\n        @if (pageListVisible()) {\n            <ol [class]=\"listClasses()\">\n                @if (firstLast()) {\n                    <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n                }\n                @if (previousNext()) {\n                    <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n                }\n                @if (hasPages()) {\n                    <li class=\"flex items-center gap-2 mx-2\">\n                        <span>{{ messages().pageText }}</span>\n                        <mona-numeric-text-box\n                            monaPagerFocusable\n                            [spinners]=\"false\"\n                            [minValue]=\"1\"\n                            [maxValue]=\"pageCount()\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [aria-label]=\"messages().pageStatus(page(), pageCount())\"\n                            [ngModel]=\"inputValue()\"\n                            (ngModelChange)=\"inputValue.set($event)\"\n                            (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\n                        <span>{{ messages().ofText }}</span>\n                        <span>{{ formatPageNumber(pageCount()) }}</span>\n                    </li>\n                }\n                @if (previousNext()) {\n                    <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n                }\n                @if (firstLast()) {\n                    <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n                }\n            </ol>\n        }\n    </div>\n    @if (infoVisible()) {\n        @if (pagerInfoTemplateRef) {\n            <ng-container\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n        } @else {\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n        }\n    }\n}\n@if (!pageListVisible()) {\n    <ol [class]=\"listClasses()\">\n        @if (firstLast()) {\n            <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n        }\n        @if (previousNext()) {\n            <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n        }\n        @if (pageCount() !== 0) {\n            <li>\n                <mona-dropdown-list\n                    monaPagerFocusable\n                    [data]=\"pageList()\"\n                    [ngModel]=\"page()\"\n                    [rounded]=\"rounded()\"\n                    [size]=\"size()\"\n                    monaDropDownVirtualScroll\n                    (ngModelChange)=\"onPageClick($event)\"\n                    style=\"width: 75px\">\n                    <ng-template monaDropDownListValueTemplate let-item>\n                        <span>{{ formatPageNumber(item) }}</span>\n                    </ng-template>\n                    <ng-template monaDropDownItemTemplate let-item>\n                        <span>{{ formatPageNumber(item) }}</span>\n                    </ng-template>\n                </mona-dropdown-list>\n            </li>\n        }\n        @if (previousNext()) {\n            <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n        }\n        @if (firstLast()) {\n            <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n        }\n    </ol>\n}\n\n<ng-template #firstPageButton>\n    <li>\n        @let firstPageTemplate = firstPageNavigationTemplate();\n        @if (firstPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"firstPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: !hasPages() || page() <= 1\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [attr.aria-label]=\"messages().firstPageLabel\"\n                (click)=\"onPageClick(1)\"\n                [disabled]=\"!hasPages() || page() <= 1\">\n                <svg lucideChevronsLeft class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #previousPageButton>\n    <li>\n        @let previousPageTemplate = previousPageNavigationTemplate();\n        @if (previousPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"previousPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: !hasPages() || page() <= 1\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"!hasPages() || page() <= 1\"\n                [attr.aria-label]=\"messages().previousPageLabel\"\n                (click)=\"onPreviousPageClick()\">\n                <svg lucideChevronLeft class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #nextPageButton>\n    <li>\n        @let nextPageTemplate = nextPageNavigationTemplate();\n        @if (nextPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"nextPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: !hasPages() || page() < 1 || page() >= pageCount()\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"!hasPages() || page() < 1 || page() >= pageCount()\"\n                [attr.aria-label]=\"messages().nextPageLabel\"\n                (click)=\"onNextPageClick()\">\n                <svg lucideChevronRight class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #lastPageButton>\n    <li>\n        @let lastPageTemplate = lastPageNavigationTemplate();\n        @if (lastPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"lastPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: !hasPages() || page() >= pageCount()\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [attr.aria-label]=\"messages().lastPageLabel\"\n                (click)=\"onPageClick(pageCount())\"\n                [disabled]=\"!hasPages() || page() >= pageCount()\">\n                <svg lucideChevronsRight class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\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: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "invalid", "maxValue", "minValue", "nullable", "readonly", "required", "rounded", "size", "spinners", "step", "tabindex", "touched", "class", "value"], outputs: ["inputBlur", "inputFocus", "inputFocusOut", "touch", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DropdownListComponent, selector: "mona-dropdown-list", inputs: ["aria-label", "aria-labelledby", "data", "disabled", "invalid", "itemDisabled", "loading", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "required", "rounded", "showClearButton", "size", "textField", "touched", "class", "value", "valueField", "valuePrimitive"], outputs: ["close", "closed", "disabledChange", "open", "opened", "touch", "valueChange"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[monaPagerFocusable]" }, { kind: "directive", type: DropdownVirtualScrollDirective, selector: "        mona-auto-complete[monaDropDownVirtualScroll],        mona-dropdown-list[monaDropDownVirtualScroll],        mona-combo-box[monaDropDownVirtualScroll],        mona-multi-select[monaDropDownVirtualScroll]    ", inputs: ["monaDropDownVirtualScroll"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DropdownListValueTemplateDirective, selector: "ng-template[monaDropDownListValueTemplate]" }, { kind: "directive", type: DropdownItemTemplateDirective, selector: "        ng-template[monaDropDownItemTemplate],        ng-template[monaAutoCompleteItemTemplate],        ng-template[monaDropDownListItemTemplate],        ng-template[monaComboBoxItemTemplate],        ng-template[monaMultiSelectItemTemplate]    " }, { kind: "component", type: LucideEllipsis, selector: "svg[lucideEllipsis], svg[lucideMoreHorizontal]" }, { kind: "component", type: LucideChevronsLeft, selector: "svg[lucideChevronsLeft]" }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronsRight, selector: "svg[lucideChevronsRight]" }, { kind: "pipe", type: SlicePipe, name: "monaSlice" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PagerComponent, isStandalone: true, selector: "mona-pager", inputs: { firstLast: { classPropertyName: "firstLast", publicName: "firstLast", isSignal: true, isRequired: false, transformFunction: null }, navigable: { classPropertyName: "navigable", publicName: "navigable", isSignal: true, isRequired: false, transformFunction: null }, pageInput: { classPropertyName: "pageInput", publicName: "pageInput", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeValues: { classPropertyName: "pageSizeValues", publicName: "pageSizeValues", isSignal: true, isRequired: false, transformFunction: null }, previousNext: { classPropertyName: "previousNext", publicName: "previousNext", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showInfo: { classPropertyName: "showInfo", publicName: "showInfo", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, skip: { classPropertyName: "skip", publicName: "skip", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, userClasses: { classPropertyName: "userClasses", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, visiblePages: { classPropertyName: "visiblePages", publicName: "visiblePages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.tabindex": "navigable() ? 0 : null", "class": "baseClasses()" } }, queries: [{ propertyName: "navigationButtonsTemplateList", predicate: PagerNavigationButtonsTemplateDirective, isSignal: true }, { propertyName: "numericButtonsTemplate", first: true, predicate: PagerNumericButtonsTemplateDirective, descendants: true, isSignal: true }, { propertyName: "pageSizeTemplate", first: true, predicate: PagerPageSizeTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "pagerInfoTemplate", first: true, predicate: PagerInfoTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "pageSizeDropdownList", first: true, predicate: ["pageSizeDropdownList"], descendants: true, isSignal: true }], ngImport: i0, template: "@let numericButtonsTemplateRef = numericButtonsTemplate()?.templateRef;\n@let pageSizeTemplateRef = pageSizeTemplate();\n@let pagerInfoTemplateRef = pagerInfoTemplate()?.templateRef;\n\n@if (type() === \"numeric\") {\n    @if (pageListVisible()) {\n        <ol [class]=\"listClasses()\">\n            @if (firstLast()) {\n                <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n            }\n            @if (previousNext()) {\n                <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n            }\n\n            @if (numericButtonsTemplateRef) {\n                <ng-container\n                    [ngTemplateOutlet]=\"numericButtonsTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ totalPages: pageCount() }\"></ng-container>\n            } @else {\n                @if (pages().length !== 0) {\n                    <li [class]=\"pageItemClasses(page() === 1)\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === 1\"\n                            [attr.aria-label]=\"messages().pageLabel(1)\"\n                            [attr.aria-current]=\"page() === 1 ? 'page' : null\"\n                            (click)=\"onPageClick(1)\">\n                            {{ formatPageNumber(1) }}\n                        </button>\n                    </li>\n                }\n                @if (previousJumperVisible()) {\n                    <li>\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [attr.aria-label]=\"jumpPreviousLabel()\"\n                            (click)=\"onJumpPreviousClick()\">\n                            <svg lucideEllipsis [size]=\"iconSize()\"></svg>\n                        </button>\n                    </li>\n                }\n\n                @for (pageItem of pages() | monaSlice: 1 : pages().length - 1; track $index) {\n                    <li [attr.data-page]=\"pageItem.page\" [class]=\"pageItemClasses(page() === pageItem.page)\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === pageItem.page\"\n                            [attr.aria-label]=\"messages().pageLabel(pageItem.page)\"\n                            [attr.aria-current]=\"page() === pageItem.page ? 'page' : null\"\n                            (click)=\"onPageClick(pageItem.page)\">\n                            {{ pageItem.text }}\n                        </button>\n                    </li>\n                }\n\n                @if (nextJumperVisible()) {\n                    <li>\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [attr.aria-label]=\"jumpNextLabel()\"\n                            (click)=\"onJumpNextClick()\">\n                            <svg lucideEllipsis [size]=\"iconSize()\"></svg>\n                        </button>\n                    </li>\n                }\n\n                @if (pages().length > 1) {\n                    <li [class]=\"pageItemClasses(page() === pageCount())\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === pageCount()\"\n                            [attr.aria-label]=\"messages().pageLabel(pageCount())\"\n                            [attr.aria-current]=\"page() === pageCount() ? 'page' : null\"\n                            (click)=\"onPageClick(pageCount())\">\n                            {{ formatPageNumber(pageCount()) }}\n                        </button>\n                    </li>\n                }\n            }\n\n            @if (previousNext()) {\n                <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n            }\n\n            @if (firstLast()) {\n                <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n            }\n\n            @if (hasPages() && pageInputVisible() && pageInput()) {\n                <li>\n                    <mona-numeric-text-box\n                        monaPagerFocusable\n                        [spinners]=\"false\"\n                        [minValue]=\"1\"\n                        [maxValue]=\"pageCount()\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"size()\"\n                        [aria-label]=\"messages().pageStatus(page(), pageCount())\"\n                        [ngModel]=\"inputValue()\"\n                        (ngModelChange)=\"inputValue.set($event)\"\n                        (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\n                </li>\n            }\n\n            @if (pageInputVisible() && pageSizeDropdownData().length > 0) {\n                <li>\n                    @if (pageSizeTemplateRef) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"pageSizeTemplateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: pageSizeDropdownData() }\">\n                        </ng-container>\n                    } @else {\n                        <mona-dropdown-list\n                            monaPagerFocusable\n                            [data]=\"pageSizeDropdownData()\"\n                            [aria-label]=\"messages().pageSizeLabel(pageSize())\"\n                            [ngModel]=\"pageSize()\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            (ngModelChange)=\"onPageSizeValueChange($event)\"\n                            #pageSizeDropdownList>\n                            <ng-template monaDropDownListValueTemplate let-item>\n                                <span>{{ messages().pageSizeLabel(item) }}</span>\n                            </ng-template>\n                            <ng-template monaDropDownItemTemplate let-item>\n                                <span>{{ formatPageNumber(item) }}</span>\n                            </ng-template>\n                        </mona-dropdown-list>\n                    }\n                </li>\n            }\n        </ol>\n    }\n    @if (infoVisible()) {\n        @if (pagerInfoTemplateRef) {\n            <ng-container\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n        } @else {\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n        }\n    }\n}\n@if (type() === \"input\") {\n    <div [class]=\"inputClasses()\">\n        @if (pageListVisible()) {\n            <ol [class]=\"listClasses()\">\n                @if (firstLast()) {\n                    <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n                }\n                @if (previousNext()) {\n                    <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n                }\n                @if (hasPages()) {\n                    <li class=\"flex items-center gap-2 mx-2\">\n                        <span>{{ messages().pageText }}</span>\n                        <mona-numeric-text-box\n                            monaPagerFocusable\n                            [spinners]=\"false\"\n                            [minValue]=\"1\"\n                            [maxValue]=\"pageCount()\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [aria-label]=\"messages().pageStatus(page(), pageCount())\"\n                            [ngModel]=\"inputValue()\"\n                            (ngModelChange)=\"inputValue.set($event)\"\n                            (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\n                        <span>{{ messages().ofText }}</span>\n                        <span>{{ formatPageNumber(pageCount()) }}</span>\n                    </li>\n                }\n                @if (previousNext()) {\n                    <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n                }\n                @if (firstLast()) {\n                    <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n                }\n            </ol>\n        }\n    </div>\n    @if (infoVisible()) {\n        @if (pagerInfoTemplateRef) {\n            <ng-container\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n        } @else {\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n        }\n    }\n}\n@if (!pageListVisible()) {\n    <ol [class]=\"listClasses()\">\n        @if (firstLast()) {\n            <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n        }\n        @if (previousNext()) {\n            <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n        }\n        @if (pageCount() !== 0) {\n            <li>\n                <mona-dropdown-list\n                    monaPagerFocusable\n                    [data]=\"pageList()\"\n                    [ngModel]=\"page()\"\n                    [rounded]=\"rounded()\"\n                    [size]=\"size()\"\n                    monaDropDownVirtualScroll\n                    (ngModelChange)=\"onPageClick($event)\"\n                    style=\"width: 75px\">\n                    <ng-template monaDropDownListValueTemplate let-item>\n                        <span>{{ formatPageNumber(item) }}</span>\n                    </ng-template>\n                    <ng-template monaDropDownItemTemplate let-item>\n                        <span>{{ formatPageNumber(item) }}</span>\n                    </ng-template>\n                </mona-dropdown-list>\n            </li>\n        }\n        @if (previousNext()) {\n            <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n        }\n        @if (firstLast()) {\n            <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n        }\n    </ol>\n}\n\n<ng-template #firstPageButton>\n    <li>\n        @let firstPageTemplate = firstPageNavigationTemplate();\n        @if (firstPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"firstPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: !hasPages() || page() <= 1\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [attr.aria-label]=\"messages().firstPageLabel\"\n                (click)=\"onPageClick(1)\"\n                [disabled]=\"!hasPages() || page() <= 1\">\n                <svg lucideChevronsLeft class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #previousPageButton>\n    <li>\n        @let previousPageTemplate = previousPageNavigationTemplate();\n        @if (previousPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"previousPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: !hasPages() || page() <= 1\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"!hasPages() || page() <= 1\"\n                [attr.aria-label]=\"messages().previousPageLabel\"\n                (click)=\"onPreviousPageClick()\">\n                <svg lucideChevronLeft class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #nextPageButton>\n    <li>\n        @let nextPageTemplate = nextPageNavigationTemplate();\n        @if (nextPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"nextPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: !hasPages() || page() < 1 || page() >= pageCount()\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"!hasPages() || page() < 1 || page() >= pageCount()\"\n                [attr.aria-label]=\"messages().nextPageLabel\"\n                (click)=\"onNextPageClick()\">\n                <svg lucideChevronRight class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #lastPageButton>\n    <li>\n        @let lastPageTemplate = lastPageNavigationTemplate();\n        @if (lastPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"lastPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: !hasPages() || page() >= pageCount()\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [attr.aria-label]=\"messages().lastPageLabel\"\n                (click)=\"onPageClick(pageCount())\"\n                [disabled]=\"!hasPages() || page() >= pageCount()\">\n                <svg lucideChevronsRight class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\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: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["formatter", "maxValue", "minValue", "step", "value"], outputs: ["valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DropdownListComponent, selector: "mona-dropdown-list", inputs: ["aria-label", "aria-labelledby", "data", "disabled", "invalid", "itemDisabled", "loading", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "required", "rounded", "showClearButton", "size", "textField", "touched", "class", "value", "valueField", "valuePrimitive"], outputs: ["close", "closed", "disabledChange", "open", "opened", "touch", "valueChange"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[monaPagerFocusable]" }, { kind: "directive", type: DropdownVirtualScrollDirective, selector: "        mona-auto-complete[monaDropDownVirtualScroll],        mona-dropdown-list[monaDropDownVirtualScroll],        mona-combo-box[monaDropDownVirtualScroll],        mona-multi-select[monaDropDownVirtualScroll]    ", inputs: ["monaDropDownVirtualScroll"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DropdownListValueTemplateDirective, selector: "ng-template[monaDropDownListValueTemplate]" }, { kind: "directive", type: DropdownItemTemplateDirective, selector: "        ng-template[monaDropDownItemTemplate],        ng-template[monaAutoCompleteItemTemplate],        ng-template[monaDropDownListItemTemplate],        ng-template[monaComboBoxItemTemplate],        ng-template[monaMultiSelectItemTemplate]    " }, { kind: "component", type: LucideEllipsis, selector: "svg[lucideEllipsis], svg[lucideMoreHorizontal]" }, { kind: "component", type: LucideChevronsLeft, selector: "svg[lucideChevronsLeft]" }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronsRight, selector: "svg[lucideChevronsRight]" }, { kind: "pipe", type: SlicePipe, name: "monaSlice" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,

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

@@ -636,7 +636,7 @@ class PopupService {
                 ? settings.anchor
                 : null;
         const direction = resolveComponentDirection(anchorElement, this.#directionality);
-        return this.#overlay.create(new OverlayConfig({
+        const overlayRef = this.#overlay.create(new OverlayConfig({
             positionStrategy,
             hasBackdrop: settings.hasBackdrop ?? false,
             height: settings.height,
@@ -650,6 +650,11 @@ class PopupService {
             direction,
             scrollStrategy: settings.blockScroll ? this.#overlay.scrollStrategies.block() : undefined
         }));
+        const lang = resolvePopupLanguage(anchorElement, this.#i18n?.localeId());
+        if (lang) {
+            overlayRef.overlayElement.setAttribute("lang", lang);
+        }
+        return overlayRef;
     }
     createPositionStrategy(settings) {
         if (settings.positionStrategy === "global") {
@@ -1046,6 +1051,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     providedIn: "root"
                 }]
         }] });
+/**
+ * Language of the popup content. The overlay container sits outside the app root, so a `lang` set on the root
+ * (or near the anchor) would not reach the popup and screen readers could read it with the wrong voice
+ * (WCAG 3.1.2). The nearest `lang` above the anchor wins; without one, the active Mona locale is used.
+ */
+function resolvePopupLanguage(anchorElement, localeId) {
+    const inherited = anchorElement?.closest("[lang]")?.getAttribute("lang")?.trim();
+    return inherited || localeId || null;
+}
 
 class PopupComponent {
     #destroyRef;

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

@@ -4,13 +4,18 @@ import { inject, TemplateRef, Directive, computed, viewChild, contentChild, sign
 import { LucideStar, LucideHeart, LucideFlame, LucideDiamond, LucideCircle, LucideDynamicIcon } from '@lucide/angular';
 import { createElementControlId } from '@nanahoshi/mona-ui/internal';
 import { range } from '@mirei/ts-collections';
-import { injectComponentDirection, MonaI18nService } from '@nanahoshi/mona-ui/i18n';
+import { formatNumber, injectComponentDirection, MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
+function localizeNumber(value, options) {
+    return formatNumber(value, "en-US", options);
+}
 const RATING_DEFAULT_MESSAGES = {
     notRated: "Not rated",
-    valueText: (value, max) => `${value} out of ${max}`
+    valueText: (value, max) => `${localizeNumber(value)} out of ${localizeNumber(max)}`
 };
 
 /**

package/fesm2022/nanahoshi-mona-ui-scroll-view.mjs

@@ -6,7 +6,7 @@ import { toCssValue } from '@nanahoshi/mona-ui/internal';
 import { select } from '@mirei/ts-collections';
 import { Subject, startWith, pairwise, map, interval, takeUntil, asyncScheduler, fromEvent, filter, tap } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
-import { injectComponentDirection, MonaI18nService } from '@nanahoshi/mona-ui/i18n';
+import { formatNumber, injectComponentDirection, MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { cva } from 'class-variance-authority';
 
 const scrollViewBaseThemeVariants = cva(`
@@ -133,14 +133,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: true }] }] } });
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
+function localizeNumber(value, options) {
+    return formatNumber(value, "en-US", options);
+}
 const SCROLL_VIEW_DEFAULT_MESSAGES = {
     carousel: "carousel",
     nextPage: "Next page",
-    page: (current) => `Page ${current}`,
-    pageOf: (current, total) => `Page ${current} of ${total}`,
+    page: (current) => `Page ${localizeNumber(current)}`,
+    pageOf: (current, total) => `Page ${localizeNumber(current)} of ${localizeNumber(total)}`,
     previousPage: "Previous page",
-    scrollPagerPrevious: "Scroll pager previous",
     scrollPagerNext: "Scroll pager next",
+    scrollPagerPrevious: "Scroll pager previous",
     slide: "slide"
 };
 

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

@@ -13,6 +13,8 @@ import { take } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const SHEET_DEFAULT_MESSAGES = {
     closeSheet: "Close sheet"
 };

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

@@ -144,6 +144,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const SLIDER_DEFAULT_MESSAGES = {
     maximumValue: "Maximum value",
     minimumValue: "Minimum value",

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

@@ -8,6 +8,8 @@ import { cva } from 'class-variance-authority';
 import { Subject, defer, finalize } from 'rxjs';
 import { v4 } from 'uuid';
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const SPINNER_DEFAULT_MESSAGES = {
     cancel: "Cancel",
     loading: "Loading"

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

@@ -137,6 +137,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const SPLIT_BUTTON_DEFAULT_MESSAGES = {
     menuButtonAriaLabel: "Show menu options",
     splitButton: (text) => (text ? `${text} splitbutton` : "Split button")

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

@@ -210,6 +210,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const SPLITTER_DEFAULT_MESSAGES = {
     collapseDown: "Collapse pane below",
     collapseNext: "Collapse next pane",

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

@@ -193,6 +193,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }], focused: [{ type: i0.Input, args: [{ isSignal: true, alias: "focused", required: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: true }] }] } });
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const STEPPER_DEFAULT_MESSAGES = {
     stepProgress: "Step progress",
     stepper: "Progress"

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

@@ -189,6 +189,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }] } });
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const TABS_DEFAULT_MESSAGES = {
     closeTab: "Close tab",
     scrollNext: "Scroll tabs next",

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

@@ -32,6 +32,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const TEXT_BOX_DEFAULT_MESSAGES = {
     clear: "Clear"
 };

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

@@ -15,6 +15,8 @@ import { fromEvent } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const TIME_PICKER_DEFAULT_MESSAGES = {
     openTimePicker: "Open time picker",
     timePicker: "Time picker"

package/fesm2022/nanahoshi-mona-ui-time-selector.mjs

@@ -181,6 +181,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }], popupHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeight", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }] } });
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const TIME_SELECTOR_DEFAULT_MESSAGES = {
     am: "AM",
     amPm: "AM/PM",

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

@@ -432,6 +432,8 @@ 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 }] }] } });
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const WINDOW_DEFAULT_MESSAGES = {
     close: "Close",
     closeWindow: "Close window",