@nanahoshi/mona-ui 0.18.5 → 0.19.0

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

@@ -9,6 +9,7 @@ import { Subject, take, tap, fromEvent, takeUntil, filter, switchMap } from 'rxj
 import { v4 } from 'uuid';
 import { NgTemplateOutlet } from '@angular/common';
 import { LucideChevronRight, LucideCheck } from '@lucide/angular';
+import { injectComponentDirection, MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
@@ -166,9 +167,9 @@ const popupMenuGroupHeaderThemeVariants = cva(`inline-flex w-full select-none px
         }
     }
 });
-const popupMenuIconContainerThemeVariants = cva(`absolute left-2 flex items-center justify-center`);
+const popupMenuIconContainerThemeVariants = cva(`absolute start-2 flex items-center justify-center`);
 const popupMenuItemThemeVariants = cva(`
-        relative flex cursor-pointer select-none items-center gap-2 py-1 pr-2 pl-8
+        relative flex cursor-pointer select-none items-center gap-2 py-1 pe-2 ps-8
         text-foreground outline-none
         hover:bg-[var(--mona-menu-item-hover-background,var(--color-hover))] hover:text-foreground
         focus-within:bg-[var(--mona-menu-item-hover-background,var(--color-hover))]
@@ -200,7 +201,9 @@ class PopupMenuListComponent {
     #close$;
     #config;
     #destroyRef;
+    #direction;
     #host;
+    #i18n;
     #navigationItems;
     #parentConfig;
     #popupService;
@@ -241,7 +244,11 @@ class PopupMenuListComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#config" }] : /* istanbul ignore next */ []));
         this.#destroyRef = inject(DestroyRef);
+        this.#direction = injectComponentDirection();
         this.#host = inject((ElementRef));
+        this.#i18n = inject(MonaI18nService);
+        this.isRtl = computed(() => this.#direction() === "rtl", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
         this.#navigationItems = computed(() => {
             const items = this.#parentConfig.items;
             return selectMany(items, i => i.source)
@@ -268,10 +275,7 @@ class PopupMenuListComponent {
         ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
         this.groupHeaderClasses = computed(() => {
             const size = this.#parentConfig.size();
-            const hasIcon = this.iconAreaVisible();
-            const variantClasses = popupMenuGroupHeaderThemeVariants({ size });
-            const iconClasses = ""; //hasIcon ? "pl-8" : "pl-2";
-            return twMerge(variantClasses, iconClasses);
+            return popupMenuGroupHeaderThemeVariants({ size });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "groupHeaderClasses" }] : /* istanbul ignore next */ []));
         this.iconAreaVisible = computed(() => {
@@ -295,7 +299,7 @@ class PopupMenuListComponent {
             const size = this.#parentConfig.size();
             const hasIcon = this.iconAreaVisible();
             const variantClasses = popupMenuItemThemeVariants({ rounded, size });
-            const iconClasses = hasIcon ? "pl-8" : "pl-2";
+            const iconClasses = hasIcon ? "ps-8" : "ps-2";
             return twMerge(variantClasses, iconClasses);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "menuItemClasses" }] : /* istanbul ignore next */ []));
@@ -317,7 +321,8 @@ class PopupMenuListComponent {
                 this.#host.nativeElement.firstElementChild?.focus();
                 if (!this.#parentConfig.isRoot && this.#parentConfig.viaKeyboardNavigation) {
                     const item = this.focusFirstItem();
-                    this.notifyNavigation(item, "right");
+                    const isRtl = this.isRtl();
+                    this.notifyNavigation(item, isRtl ? "left" : "right");
                 }
             }
         });
@@ -340,6 +345,9 @@ class PopupMenuListComponent {
         }
         this.#close$.next();
     }
+    closeSubmenu() {
+        this.#parentConfig.childCloseRequest$?.next();
+    }
     createSubmenu(target, viaKeyboard) {
         this.#viaKeyboardNavigation.set(viaKeyboard);
         const minWidth = this.#parentConfig.minWidth?.() ?? undefined;
@@ -410,24 +418,6 @@ class PopupMenuListComponent {
         }
         return firstItem;
     }
-    handleArrowLeftKey() {
-        this.#parentConfig.childCloseRequest$?.next();
-    }
-    handleArrowRightKey() {
-        const activeItem = this.activeMenuItem();
-        if (!activeItem) {
-            return { item: null, hasChild: false };
-        }
-        const target = this.#host.nativeElement.querySelector('[data-active="true"]');
-        if (target && activeItem.items.length > 0) {
-            this.createSubmenu(target, true).subscribe();
-            return { item: activeItem, hasChild: true };
-        }
-        if (activeItem && activeItem.items.length > 0) {
-            return { item: activeItem, hasChild: true };
-        }
-        return { item: null, hasChild: false };
-    }
     handleArrowUpKey() {
         if (!this.activeMenuItem()) {
             const lastItem = this.#navigationItems().lastOrDefault();
@@ -481,21 +471,26 @@ class PopupMenuListComponent {
         }
     }
     handleNavigationKey(event) {
+        const isRtl = this.isRtl();
+        const openKey = isRtl ? "ArrowLeft" : "ArrowRight";
+        const closeKey = isRtl ? "ArrowRight" : "ArrowLeft";
+        const forwardDir = isRtl ? "left" : "right";
+        const backwardDir = isRtl ? "right" : "left";
         let item = null;
         if (event.key === "ArrowDown") {
             item = this.handleArrowDownKey();
             this.notifyNavigation(item, "down");
         }
-        else if (event.key === "ArrowLeft") {
-            this.handleArrowLeftKey();
+        else if (event.key === closeKey) {
+            this.closeSubmenu();
             if (this.#parentConfig.level === 0) {
-                this.notifyNavigation(null, "left");
+                this.notifyNavigation(null, backwardDir);
             }
         }
-        else if (event.key === "ArrowRight") {
-            const result = this.handleArrowRightKey();
+        else if (event.key === openKey) {
+            const result = this.openSubmenu();
             if (!result.hasChild) {
-                this.notifyNavigation(item, "right");
+                this.notifyNavigation(item, forwardDir);
             }
         }
         else if (event.key === "ArrowUp") {
@@ -526,6 +521,21 @@ class PopupMenuListComponent {
             level: this.#parentConfig.level
         });
     }
+    openSubmenu() {
+        const activeItem = this.activeMenuItem();
+        if (!activeItem) {
+            return { item: null, hasChild: false };
+        }
+        const target = this.#host.nativeElement.querySelector('[data-active="true"]');
+        if (target && activeItem.items.length > 0) {
+            this.createSubmenu(target, true).subscribe();
+            return { item: activeItem, hasChild: true };
+        }
+        if (activeItem && activeItem.items.length > 0) {
+            return { item: activeItem, hasChild: true };
+        }
+        return { item: null, hasChild: false };
+    }
     setKeyboardEvents() {
         const element = this.#host.nativeElement.firstElementChild;
         fromEvent(element, "keydown")
@@ -542,18 +552,6 @@ class PopupMenuListComponent {
         }))
             .subscribe();
     }
-    setPopupCloseSubscription() {
-        this.#parentConfig.parentClose$
-            .pipe(takeUntilDestroyed(this.#destroyRef), tap(() => this.closePopup()))
-            .subscribe();
-        this.#childCloseRequest$
-            .pipe(takeUntilDestroyed(this.#destroyRef), tap(() => {
-            const activeItem = this.activeMenuItem();
-            this.notifyNavigation(activeItem, "left");
-            this.closePopup();
-        }))
-            .subscribe();
-    }
     setPointerSubscriptions() {
         this.pointerEnter$
             .pipe(takeUntilDestroyed(this.#destroyRef), takeUntil(this.#parentConfig.parentClose$), filter(e => e.item !== this.activeMenuItem()), tap(e => {
@@ -570,6 +568,19 @@ class PopupMenuListComponent {
             .pipe(takeUntilDestroyed(this.#destroyRef), takeUntil(this.pointerEnter$))
             .subscribe(() => this.popupRef?.close());
     }
+    setPopupCloseSubscription() {
+        this.#parentConfig.parentClose$
+            .pipe(takeUntilDestroyed(this.#destroyRef), tap(() => this.closePopup()))
+            .subscribe();
+        this.#childCloseRequest$
+            .pipe(takeUntilDestroyed(this.#destroyRef), tap(() => {
+            const activeItem = this.activeMenuItem();
+            const isRtl = this.isRtl();
+            this.notifyNavigation(activeItem, isRtl ? "right" : "left");
+            this.closePopup();
+        }))
+            .subscribe();
+    }
     setSubscriptions() {
         this.setKeyboardEvents();
         this.setPointerSubscriptions();
@@ -582,13 +593,13 @@ class PopupMenuListComponent {
             .subscribe(buffer => this.cycleThroughMatchedItems(buffer));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PopupMenuListComponent, isStandalone: true, selector: "mona-popup-menu-list", host: { properties: { "class": "baseClasses()" } }, ngImport: i0, template: "<div\n    role=\"menu\"\n    [attr.tabindex]=\"0\"\n    [attr.aria-orientation]=\"'vertical'\"\n    [attr.aria-activedescendant]=\"activeMenuItem()?.uid\"\n    [attr.id]=\"menuId()\"\n    [class]=\"containerClasses()\">\n    @for (group of menuItems(); track $index) {\n        @if (typeof group.key === \"string\") {\n            @let groupTemplate = group.first().groupTemplate?.() ?? popupGroupTemplate() ?? null;\n            <div role=\"group\" [attr.aria-labelledby]=\"`${group.key}-${$index}`\" [class]=\"groupHeaderClasses()\">\n                <div [id]=\"`${group.key}-${$index}`\" role=\"presentation\">\n                    @if (groupTemplate) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"groupTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: group.key }\"></ng-container>\n                    } @else {\n                        <span>{{ group.key }}</span>\n                    }\n                </div>\n            </div>\n        }\n        @for (item of group.source; track $index) {\n            @if (item.separator) {\n                <div role=\"separator\" class=\"bg-border my-1 h-px\"></div>\n            } @else {\n                @let iconTemplate = item.iconTemplate?.() ?? popupIconTemplate() ?? null;\n                @let shortcutTemplate = item.shortcutTemplate?.() ?? popupShortcutTemplate() ?? null;\n                @let textTemplate = item.textTemplate?.() ?? popupTextTemplate() ?? null;\n                <div\n                    role=\"menuitem\"\n                    [id]=\"item.uid\"\n                    (pointerenter)=\"pointerEnter$.next({ event: $event, item: item })\"\n                    (pointerleave)=\"pointerLeave$.next({ event: $event, item: item })\"\n                    (click)=\"onItemClick($event, item)\"\n                    [attr.data-active]=\"item === activeMenuItem()\"\n                    [attr.aria-disabled]=\"item.disabled\"\n                    [attr.aria-expanded]=\"item.items.length > 0 && item === activeMenuItem() && !!popupRef\"\n                    [attr.aria-haspopup]=\"item.items.length > 0 ? 'menu' : null\"\n                    [attr.aria-label]=\"item.label || null\"\n                    [attr.data-disabled]=\"item.disabled\"\n                    [class]=\"menuItemClasses()\">\n                    @if (iconAreaVisible()) {\n                        <div [class]=\"iconContainerClasses()\">\n                            @if (!item.checkable && !item.radio) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"iconTemplate\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                            } @else if (item.checkable) {\n                                @if (item.checked?.()) {\n                                    <svg lucideCheck [size]=\"14\"></svg>\n                                }\n                            } @else if (item.radio) {\n                                @if (item.selected?.()) {\n                                    <svg\n                                        xmlns=\"http://www.w3.org/2000/svg\"\n                                        width=\"24\"\n                                        height=\"24\"\n                                        viewBox=\"0 0 24 24\"\n                                        fill=\"none\"\n                                        stroke=\"currentColor\"\n                                        stroke-width=\"2\"\n                                        stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\"\n                                        class=\"lucide lucide-circle size-2 fill-current\">\n                                        <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n                                    </svg>\n                                }\n                            }\n                        </div>\n                    }\n                    <div class=\"flex-1\">\n                        @if (textTemplate) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"textTemplate\"\n                                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                        } @else {\n                            {{ item.label }}\n                        }\n                    </div>\n                    @if (item.items.length > 0) {\n                        @if (!item.checkable) {\n                            <div [class]=\"linkContainerClasses()\">\n                                <svg lucideChevronRight [size]=\"16\"></svg>\n                            </div>\n                        }\n                    } @else if (shortcutTemplate) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"shortcutTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                    }\n                </div>\n            }\n        }\n    }\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideCheck, selector: "svg[lucideCheck]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PopupMenuListComponent, isStandalone: true, selector: "mona-popup-menu-list", host: { properties: { "class": "baseClasses()" } }, ngImport: i0, template: "<div\n    role=\"menu\"\n    [attr.tabindex]=\"0\"\n    [attr.aria-orientation]=\"'vertical'\"\n    [attr.aria-activedescendant]=\"activeMenuItem()?.uid\"\n    [attr.id]=\"menuId()\"\n    [class]=\"containerClasses()\">\n    @for (group of menuItems(); track $index) {\n        @if (typeof group.key === \"string\") {\n            @let groupTemplate = group.first().groupTemplate?.() ?? popupGroupTemplate() ?? null;\n            <div role=\"group\" [attr.aria-labelledby]=\"`${group.key}-${$index}`\" [class]=\"groupHeaderClasses()\">\n                <div [id]=\"`${group.key}-${$index}`\" role=\"presentation\">\n                    @if (groupTemplate) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"groupTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: group.key }\"></ng-container>\n                    } @else {\n                        <span>{{ group.key }}</span>\n                    }\n                </div>\n            </div>\n        }\n        @for (item of group.source; track $index) {\n            @if (item.separator) {\n                <div role=\"separator\" class=\"bg-border my-1 h-px\"></div>\n            } @else {\n                @let iconTemplate = item.iconTemplate?.() ?? popupIconTemplate() ?? null;\n                @let shortcutTemplate = item.shortcutTemplate?.() ?? popupShortcutTemplate() ?? null;\n                @let textTemplate = item.textTemplate?.() ?? popupTextTemplate() ?? null;\n                <div\n                    role=\"menuitem\"\n                    [id]=\"item.uid\"\n                    (pointerenter)=\"pointerEnter$.next({ event: $event, item: item })\"\n                    (pointerleave)=\"pointerLeave$.next({ event: $event, item: item })\"\n                    (click)=\"onItemClick($event, item)\"\n                    [attr.data-active]=\"item === activeMenuItem()\"\n                    [attr.aria-disabled]=\"item.disabled\"\n                    [attr.aria-expanded]=\"item.items.length > 0 && item === activeMenuItem() && !!popupRef\"\n                    [attr.aria-haspopup]=\"item.items.length > 0 ? 'menu' : null\"\n                    [attr.aria-label]=\"item.label || null\"\n                    [attr.data-disabled]=\"item.disabled\"\n                    [class]=\"menuItemClasses()\">\n                    @if (iconAreaVisible()) {\n                        <div [class]=\"iconContainerClasses()\">\n                            @if (!item.checkable && !item.radio) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"iconTemplate\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                            } @else if (item.checkable) {\n                                @if (item.checked?.()) {\n                                    <svg lucideCheck [size]=\"14\"></svg>\n                                }\n                            } @else if (item.radio) {\n                                @if (item.selected?.()) {\n                                    <svg\n                                        xmlns=\"http://www.w3.org/2000/svg\"\n                                        width=\"24\"\n                                        height=\"24\"\n                                        viewBox=\"0 0 24 24\"\n                                        fill=\"none\"\n                                        stroke=\"currentColor\"\n                                        stroke-width=\"2\"\n                                        stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\"\n                                        class=\"lucide lucide-circle size-2 fill-current\">\n                                        <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n                                    </svg>\n                                }\n                            }\n                        </div>\n                    }\n                    <div class=\"flex-1\">\n                        @if (textTemplate) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"textTemplate\"\n                                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                        } @else {\n                            {{ item.label }}\n                        }\n                    </div>\n                    @if (item.items.length > 0) {\n                        @if (!item.checkable) {\n                            <div [class]=\"linkContainerClasses()\">\n                                <svg lucideChevronRight [size]=\"16\" class=\"rtl:rotate-180\"></svg>\n                            </div>\n                        }\n                    } @else if (shortcutTemplate) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"shortcutTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                    }\n                </div>\n            }\n        }\n    }\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideCheck, selector: "svg[lucideCheck]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuListComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-popup-menu-list", imports: [NgTemplateOutlet, LucideChevronRight, LucideCheck], host: {
                         "[class]": "baseClasses()"
-                    }, template: "<div\n    role=\"menu\"\n    [attr.tabindex]=\"0\"\n    [attr.aria-orientation]=\"'vertical'\"\n    [attr.aria-activedescendant]=\"activeMenuItem()?.uid\"\n    [attr.id]=\"menuId()\"\n    [class]=\"containerClasses()\">\n    @for (group of menuItems(); track $index) {\n        @if (typeof group.key === \"string\") {\n            @let groupTemplate = group.first().groupTemplate?.() ?? popupGroupTemplate() ?? null;\n            <div role=\"group\" [attr.aria-labelledby]=\"`${group.key}-${$index}`\" [class]=\"groupHeaderClasses()\">\n                <div [id]=\"`${group.key}-${$index}`\" role=\"presentation\">\n                    @if (groupTemplate) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"groupTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: group.key }\"></ng-container>\n                    } @else {\n                        <span>{{ group.key }}</span>\n                    }\n                </div>\n            </div>\n        }\n        @for (item of group.source; track $index) {\n            @if (item.separator) {\n                <div role=\"separator\" class=\"bg-border my-1 h-px\"></div>\n            } @else {\n                @let iconTemplate = item.iconTemplate?.() ?? popupIconTemplate() ?? null;\n                @let shortcutTemplate = item.shortcutTemplate?.() ?? popupShortcutTemplate() ?? null;\n                @let textTemplate = item.textTemplate?.() ?? popupTextTemplate() ?? null;\n                <div\n                    role=\"menuitem\"\n                    [id]=\"item.uid\"\n                    (pointerenter)=\"pointerEnter$.next({ event: $event, item: item })\"\n                    (pointerleave)=\"pointerLeave$.next({ event: $event, item: item })\"\n                    (click)=\"onItemClick($event, item)\"\n                    [attr.data-active]=\"item === activeMenuItem()\"\n                    [attr.aria-disabled]=\"item.disabled\"\n                    [attr.aria-expanded]=\"item.items.length > 0 && item === activeMenuItem() && !!popupRef\"\n                    [attr.aria-haspopup]=\"item.items.length > 0 ? 'menu' : null\"\n                    [attr.aria-label]=\"item.label || null\"\n                    [attr.data-disabled]=\"item.disabled\"\n                    [class]=\"menuItemClasses()\">\n                    @if (iconAreaVisible()) {\n                        <div [class]=\"iconContainerClasses()\">\n                            @if (!item.checkable && !item.radio) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"iconTemplate\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                            } @else if (item.checkable) {\n                                @if (item.checked?.()) {\n                                    <svg lucideCheck [size]=\"14\"></svg>\n                                }\n                            } @else if (item.radio) {\n                                @if (item.selected?.()) {\n                                    <svg\n                                        xmlns=\"http://www.w3.org/2000/svg\"\n                                        width=\"24\"\n                                        height=\"24\"\n                                        viewBox=\"0 0 24 24\"\n                                        fill=\"none\"\n                                        stroke=\"currentColor\"\n                                        stroke-width=\"2\"\n                                        stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\"\n                                        class=\"lucide lucide-circle size-2 fill-current\">\n                                        <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n                                    </svg>\n                                }\n                            }\n                        </div>\n                    }\n                    <div class=\"flex-1\">\n                        @if (textTemplate) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"textTemplate\"\n                                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                        } @else {\n                            {{ item.label }}\n                        }\n                    </div>\n                    @if (item.items.length > 0) {\n                        @if (!item.checkable) {\n                            <div [class]=\"linkContainerClasses()\">\n                                <svg lucideChevronRight [size]=\"16\"></svg>\n                            </div>\n                        }\n                    } @else if (shortcutTemplate) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"shortcutTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                    }\n                </div>\n            }\n        }\n    }\n</div>\n" }]
+                    }, template: "<div\n    role=\"menu\"\n    [attr.tabindex]=\"0\"\n    [attr.aria-orientation]=\"'vertical'\"\n    [attr.aria-activedescendant]=\"activeMenuItem()?.uid\"\n    [attr.id]=\"menuId()\"\n    [class]=\"containerClasses()\">\n    @for (group of menuItems(); track $index) {\n        @if (typeof group.key === \"string\") {\n            @let groupTemplate = group.first().groupTemplate?.() ?? popupGroupTemplate() ?? null;\n            <div role=\"group\" [attr.aria-labelledby]=\"`${group.key}-${$index}`\" [class]=\"groupHeaderClasses()\">\n                <div [id]=\"`${group.key}-${$index}`\" role=\"presentation\">\n                    @if (groupTemplate) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"groupTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: group.key }\"></ng-container>\n                    } @else {\n                        <span>{{ group.key }}</span>\n                    }\n                </div>\n            </div>\n        }\n        @for (item of group.source; track $index) {\n            @if (item.separator) {\n                <div role=\"separator\" class=\"bg-border my-1 h-px\"></div>\n            } @else {\n                @let iconTemplate = item.iconTemplate?.() ?? popupIconTemplate() ?? null;\n                @let shortcutTemplate = item.shortcutTemplate?.() ?? popupShortcutTemplate() ?? null;\n                @let textTemplate = item.textTemplate?.() ?? popupTextTemplate() ?? null;\n                <div\n                    role=\"menuitem\"\n                    [id]=\"item.uid\"\n                    (pointerenter)=\"pointerEnter$.next({ event: $event, item: item })\"\n                    (pointerleave)=\"pointerLeave$.next({ event: $event, item: item })\"\n                    (click)=\"onItemClick($event, item)\"\n                    [attr.data-active]=\"item === activeMenuItem()\"\n                    [attr.aria-disabled]=\"item.disabled\"\n                    [attr.aria-expanded]=\"item.items.length > 0 && item === activeMenuItem() && !!popupRef\"\n                    [attr.aria-haspopup]=\"item.items.length > 0 ? 'menu' : null\"\n                    [attr.aria-label]=\"item.label || null\"\n                    [attr.data-disabled]=\"item.disabled\"\n                    [class]=\"menuItemClasses()\">\n                    @if (iconAreaVisible()) {\n                        <div [class]=\"iconContainerClasses()\">\n                            @if (!item.checkable && !item.radio) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"iconTemplate\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                            } @else if (item.checkable) {\n                                @if (item.checked?.()) {\n                                    <svg lucideCheck [size]=\"14\"></svg>\n                                }\n                            } @else if (item.radio) {\n                                @if (item.selected?.()) {\n                                    <svg\n                                        xmlns=\"http://www.w3.org/2000/svg\"\n                                        width=\"24\"\n                                        height=\"24\"\n                                        viewBox=\"0 0 24 24\"\n                                        fill=\"none\"\n                                        stroke=\"currentColor\"\n                                        stroke-width=\"2\"\n                                        stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\"\n                                        class=\"lucide lucide-circle size-2 fill-current\">\n                                        <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n                                    </svg>\n                                }\n                            }\n                        </div>\n                    }\n                    <div class=\"flex-1\">\n                        @if (textTemplate) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"textTemplate\"\n                                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                        } @else {\n                            {{ item.label }}\n                        }\n                    </div>\n                    @if (item.items.length > 0) {\n                        @if (!item.checkable) {\n                            <div [class]=\"linkContainerClasses()\">\n                                <svg lucideChevronRight [size]=\"16\" class=\"rtl:rotate-180\"></svg>\n                            </div>\n                        }\n                    } @else if (shortcutTemplate) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"shortcutTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                    }\n                </div>\n            }\n        }\n    }\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 class PopupMenuComponent {

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

@@ -8,6 +8,7 @@ import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { ScrollDispatcher } from '@angular/cdk/scrolling';
+import { MonaI18nService, resolveComponentDirection, observeComponentDirection } from '@nanahoshi/mona-ui/i18n';
 import { NgTemplateOutlet } from '@angular/common';
 
 class PopupCloseEvent extends PreventableEvent {
@@ -552,11 +553,12 @@ class PopupService {
     #destroyRef = inject(DestroyRef);
     #directionality = inject(Directionality, { optional: true });
     #document = inject(DOCUMENT);
+    #i18n = inject(MonaI18nService, { optional: true });
     #injector = inject(Injector);
     #outsideEventsToClose = ["click", "mousedown", "dblclick", "contextmenu", "auxclick"];
     #overlay = inject(Overlay);
-    #selectorSubscriptions = new Map();
     #scrollDispatcher = inject(ScrollDispatcher);
+    #selectorSubscriptions = new Map();
     create(settings) {
         if (typeof settings.anchor === "string") {
             return this.createMultiElementPopup(settings);
@@ -628,7 +630,12 @@ class PopupService {
     createOverlay(settings) {
         const positionStrategy = this.createPositionStrategy(settings);
         const panelClass = this.buildPanelClass(settings.popupClass);
-        const direction = this.#directionality?.value;
+        const anchorElement = settings.anchor instanceof ElementRef
+            ? settings.anchor.nativeElement
+            : settings.anchor instanceof HTMLElement
+                ? settings.anchor
+                : null;
+        const direction = resolveComponentDirection(anchorElement, this.#directionality);
         return this.#overlay.create(new OverlayConfig({
             positionStrategy,
             hasBackdrop: settings.hasBackdrop ?? false,
@@ -688,6 +695,7 @@ class PopupService {
         this.setupScrollTracking(settings, overlayRef, popupReference);
         this.setupEscapeKeyListener(settings, popupReference);
         this.setupPositionChangeTracking(settings, overlayRef, popupReference);
+        this.setupDirectionTracking(settings, overlayRef, popupReference);
         return popupReference.popupRef;
     }
     getAnchorElement(anchor) {
@@ -732,6 +740,19 @@ class PopupService {
             .forEach(scrollable => addScrollable(scrollable));
         return Array.from(scrollablesByElement.values());
     }
+    handleFocusRestoration(settings, originallyFocusedElement) {
+        const restoreFocus = settings.restoreFocus ?? "auto";
+        if (restoreFocus === false) {
+            return;
+        }
+        if (restoreFocus === "auto") {
+            if (originallyFocusedElement) {
+                originallyFocusedElement.focus();
+            }
+            return;
+        }
+        this.restoreFocusToAnchor(settings.anchor);
+    }
     isScrollableElement(element) {
         const defaultView = this.#document.defaultView;
         if (!defaultView) {
@@ -747,19 +768,6 @@ class PopupService {
     isScrollableOverflow(value) {
         return value === "auto" || value === "scroll" || value === "overlay";
     }
-    handleFocusRestoration(settings, originallyFocusedElement) {
-        const restoreFocus = settings.restoreFocus ?? "auto";
-        if (restoreFocus === false) {
-            return;
-        }
-        if (restoreFocus === "auto") {
-            if (originallyFocusedElement) {
-                originallyFocusedElement.focus();
-            }
-            return;
-        }
-        this.restoreFocusToAnchor(settings.anchor);
-    }
     /**
      * Resolves a PopupAnchor to a FlexibleConnectedPositionStrategyOrigin.
      * This method should only receive actual elements or ElementRefs, not CSS selector strings.
@@ -936,6 +944,18 @@ class PopupService {
                 .subscribe(change => popupReference.positionChanges$.next(change.connectionPair));
         }
     }
+    setupDirectionTracking(settings, overlayRef, popupReference) {
+        const resolvedAnchor = this.resolveAnchor(settings.anchor);
+        const anchorElement = this.getAnchorElement(resolvedAnchor);
+        const cleanup = observeComponentDirection(anchorElement, this.#directionality, nextDir => {
+            overlayRef.setDirection(nextDir);
+            overlayRef.updatePosition();
+            popupReference.componentRef?.changeDetectorRef.markForCheck();
+        });
+        popupReference.closed.pipe(take(1)).subscribe(() => {
+            cleanup();
+        });
+    }
     setupScrollClosing(settings, popupReference, overlayRef) {
         if (!settings.closeOnScroll) {
             return;

package/fesm2022/nanahoshi-mona-ui-progress-bar.mjs

@@ -1,7 +1,8 @@
-import { NgTemplateOutlet, DecimalPipe } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, TemplateRef, Directive, computed, contentChild, input, Component } from '@angular/core';
 import { getPercentage } from '@nanahoshi/mona-ui/common';
+import { injectComponentDirection, MonaI18nService, formatNumber } from '@nanahoshi/mona-ui/i18n';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
@@ -62,8 +63,8 @@ const progressBarTrackThemeVariants = cva(`
         data-[next='true']:duration-(--mona-motion-fast)
         data-[next='true']:ease-in
         data-[value='0']:bg-transparent
-        data-[left='true']:justify-start
-        data-[right='true']:justify-end
+        data-[start='true']:justify-start
+        data-[end='true']:justify-end
     `, {
     variants: {
         rounded: {
@@ -84,6 +85,18 @@ class ProgressBarComponent {
             return typeof color === "string" ? color : color?.(progress);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#color" }] : /* istanbul ignore next */ []));
+        this.#direction = injectComponentDirection();
+        this.#i18n = inject(MonaI18nService);
+        this.isRtl = computed(() => this.#direction() === "rtl", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
+        this.formattedProgress = computed(() => {
+            return formatNumber(this.progress(), this.#i18n.localeId(), {
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 2,
+                useGrouping: false
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formattedProgress" }] : /* istanbul ignore next */ []));
         this.baseClasses = computed(() => {
             const rounded = this.rounded();
             const classes = progressBarBaseThemeVariants({ rounded });
@@ -103,7 +116,10 @@ class ProgressBarComponent {
         ...(ngDevMode ? [{ debugName: "labelTemplate" }] : /* istanbul ignore next */ []));
         this.nextTrackClipPath = computed(() => {
             const progress = this.progress();
-            return `inset(-1px -1px -1px ${progress}%)`;
+            const isRtl = this.isRtl();
+            return isRtl
+                ? `inset(-1px ${progress}% -1px -1px)`
+                : `inset(-1px -1px -1px ${progress}%)`;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "nextTrackClipPath" }] : /* istanbul ignore next */ []));
         this.prevTrackClipPath = computed(() => {
@@ -112,8 +128,11 @@ class ProgressBarComponent {
             if (indeterminate) {
                 return `inset(-1px -1px -1px -1px)`;
             }
-            const right = progress < 100 ? 8 : 0;
-            return `inset(-1px ${right}px -1px 0px)`;
+            const offset = progress < 100 ? 8 : 0;
+            const isRtl = this.isRtl();
+            return isRtl
+                ? `inset(-1px 0px -1px ${offset}px)`
+                : `inset(-1px ${offset}px -1px 0px)`;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "prevTrackClipPath" }] : /* istanbul ignore next */ []));
         this.progress = computed(() => getPercentage(this.value(), this.min(), this.max()), /* @ts-ignore */
@@ -127,6 +146,13 @@ class ProgressBarComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "trackClasses" }] : /* istanbul ignore next */ []));
         this.trackColor = this.#color;
+        /**
+         * @description Enables CSS transitions on fill and color changes.
+         * Set to `false` when updating `value` at high frequency (e.g., a real-time byte counter).
+         * @default true
+         */
+        this.animate = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "animate" }] : /* istanbul ignore next */ []));
         /**
          * @description Accessible label for the progress bar host element.
          * Use to describe what is being measured (e.g., "Upload progress").
@@ -142,13 +168,6 @@ class ProgressBarComponent {
          * @default ""
          */
         this.ariaValueText = input("", { ...(ngDevMode ? { debugName: "ariaValueText" } : /* istanbul ignore next */ {}), alias: "aria-valuetext" });
-        /**
-         * @description Enables CSS transitions on fill and color changes.
-         * Set to `false` when updating `value` at high frequency (e.g., a real-time byte counter).
-         * @default true
-         */
-        this.animate = input(true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "animate" }] : /* istanbul ignore next */ []));
         /**
          * @description Fill color of the progress track.
          * Pass a CSS color string, or a function that receives the current percentage (0–100) and returns a color string.
@@ -222,12 +241,14 @@ class ProgressBarComponent {
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     }
     #color;
+    #direction;
+    #i18n;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ProgressBarComponent, isStandalone: true, selector: "mona-progress-bar", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaValueText: { classPropertyName: "ariaValueText", publicName: "aria-valuetext", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labelStyles: { classPropertyName: "labelStyles", publicName: "labelStyles", isSignal: true, isRequired: false, transformFunction: null }, labelVisible: { classPropertyName: "labelVisible", publicName: "labelVisible", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "class": "baseClasses()", "attr.aria-busy": "indeterminate() || null", "attr.aria-label": "ariaLabel() || null", "attr.aria-valuemin": "indeterminate() ? null : min()", "attr.aria-valuemax": "indeterminate() ? null : max()", "attr.aria-valuenow": "indeterminate() ? null : value()", "attr.aria-valuetext": "ariaValueText() || null", "attr.aria-disabled": "disabled() || null", "attr.data-disabled": "disabled()" } }, queries: [{ propertyName: "labelTemplate", first: true, predicate: ProgressBarLabelTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    [class]=\"trackClasses()\"\n    [style.background-color]=\"trackColor()\"\n    [attr.data-prev]=\"true\"\n    [attr.data-left]=\"labelPosition() === 'start'\"\n    [attr.data-right]=\"labelPosition() === 'end'\"\n    [attr.data-indeterminate]=\"indeterminate()\"\n    [attr.data-value]=\"progress()\"\n    [style.clip-path]=\"prevTrackClipPath()\">\n    @if (indeterminate()) {\n        <div [class]=\"indeterminateClasses()\" class=\"indeterminate\"></div>\n    } @else if (labelVisible()) {\n        @if (labelTemplate()) {\n            <ng-container\n                [ngTemplateOutlet]=\"labelTemplate()?.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: value(), min: min(), max: max(), percent: progress() }\">\n            </ng-container>\n        } @else {\n            <span [class]=\"labelClasses()\" [style]=\"labelStyles()\">{{ progress() | number: \"1.0-2\" }}</span>\n        }\n    }\n</div>\n\n@if (!indeterminate()) {\n    <div\n        [class]=\"trackClasses()\"\n        [attr.data-next]=\"true\"\n        [attr.data-left]=\"labelPosition() === 'start'\"\n        [attr.data-right]=\"labelPosition() === 'end'\"\n        [style.clip-path]=\"nextTrackClipPath()\">\n        @if (labelVisible()) {\n            @if (labelTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"labelTemplate()?.templateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: value(), min: min(), max: max(), percent: progress() }\">\n                </ng-container>\n            } @else {\n                <span [class]=\"labelClasses()\" [style]=\"labelStyles()\">{{ progress() | number: \"1.0-2\" }}</span>\n            }\n        }\n    </div>\n}\n", styles: [".indeterminate{animation:indeterminate 16s linear infinite}@keyframes indeterminate{0%{background-position:0 0}to{background-position:100% 0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ProgressBarComponent, isStandalone: true, selector: "mona-progress-bar", inputs: { animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaValueText: { classPropertyName: "ariaValueText", publicName: "aria-valuetext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labelStyles: { classPropertyName: "labelStyles", publicName: "labelStyles", isSignal: true, isRequired: false, transformFunction: null }, labelVisible: { classPropertyName: "labelVisible", publicName: "labelVisible", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "class": "baseClasses()", "attr.aria-busy": "indeterminate() || null", "attr.aria-label": "ariaLabel() || null", "attr.aria-valuemin": "indeterminate() ? null : min()", "attr.aria-valuemax": "indeterminate() ? null : max()", "attr.aria-valuenow": "indeterminate() ? null : value()", "attr.aria-valuetext": "ariaValueText() || null", "attr.aria-disabled": "disabled() || null", "attr.data-disabled": "disabled()" } }, queries: [{ propertyName: "labelTemplate", first: true, predicate: ProgressBarLabelTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    [class]=\"trackClasses()\"\n    [style.background-color]=\"trackColor()\"\n    [attr.data-prev]=\"true\"\n    [attr.data-start]=\"labelPosition() === 'start'\"\n    [attr.data-end]=\"labelPosition() === 'end'\"\n    [attr.data-indeterminate]=\"indeterminate()\"\n    [attr.data-value]=\"progress()\"\n    [style.clip-path]=\"prevTrackClipPath()\">\n    @if (indeterminate()) {\n        <div [class]=\"indeterminateClasses()\" class=\"indeterminate\"></div>\n    } @else if (labelVisible()) {\n        @if (labelTemplate()) {\n            <ng-container\n                [ngTemplateOutlet]=\"labelTemplate()?.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: value(), min: min(), max: max(), percent: progress() }\">\n            </ng-container>\n        } @else {\n            <span [class]=\"labelClasses()\" [style]=\"labelStyles()\">{{ formattedProgress() }}</span>\n        }\n    }\n</div>\n\n@if (!indeterminate()) {\n    <div\n        [class]=\"trackClasses()\"\n        [attr.data-next]=\"true\"\n        [attr.data-start]=\"labelPosition() === 'start'\"\n        [attr.data-end]=\"labelPosition() === 'end'\"\n        [style.clip-path]=\"nextTrackClipPath()\">\n        @if (labelVisible()) {\n            @if (labelTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"labelTemplate()?.templateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: value(), min: min(), max: max(), percent: progress() }\">\n                </ng-container>\n            } @else {\n                <span [class]=\"labelClasses()\" [style]=\"labelStyles()\">{{ formattedProgress() }}</span>\n            }\n        }\n    </div>\n}\n", styles: [".indeterminate{animation:indeterminate 16s linear infinite}@keyframes indeterminate{0%{background-position:0 0}to{background-position:100% 0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-progress-bar", imports: [DecimalPipe, NgTemplateOutlet], host: {
+            args: [{ selector: "mona-progress-bar", imports: [NgTemplateOutlet], host: {
                         "[class]": "baseClasses()",
                         "[attr.aria-busy]": "indeterminate() || null",
                         "[attr.aria-label]": "ariaLabel() || null",
@@ -238,8 +259,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.aria-disabled]": "disabled() || null",
                         "[attr.data-disabled]": "disabled()",
                         role: "progressbar"
-                    }, template: "<div\n    [class]=\"trackClasses()\"\n    [style.background-color]=\"trackColor()\"\n    [attr.data-prev]=\"true\"\n    [attr.data-left]=\"labelPosition() === 'start'\"\n    [attr.data-right]=\"labelPosition() === 'end'\"\n    [attr.data-indeterminate]=\"indeterminate()\"\n    [attr.data-value]=\"progress()\"\n    [style.clip-path]=\"prevTrackClipPath()\">\n    @if (indeterminate()) {\n        <div [class]=\"indeterminateClasses()\" class=\"indeterminate\"></div>\n    } @else if (labelVisible()) {\n        @if (labelTemplate()) {\n            <ng-container\n                [ngTemplateOutlet]=\"labelTemplate()?.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: value(), min: min(), max: max(), percent: progress() }\">\n            </ng-container>\n        } @else {\n            <span [class]=\"labelClasses()\" [style]=\"labelStyles()\">{{ progress() | number: \"1.0-2\" }}</span>\n        }\n    }\n</div>\n\n@if (!indeterminate()) {\n    <div\n        [class]=\"trackClasses()\"\n        [attr.data-next]=\"true\"\n        [attr.data-left]=\"labelPosition() === 'start'\"\n        [attr.data-right]=\"labelPosition() === 'end'\"\n        [style.clip-path]=\"nextTrackClipPath()\">\n        @if (labelVisible()) {\n            @if (labelTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"labelTemplate()?.templateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: value(), min: min(), max: max(), percent: progress() }\">\n                </ng-container>\n            } @else {\n                <span [class]=\"labelClasses()\" [style]=\"labelStyles()\">{{ progress() | number: \"1.0-2\" }}</span>\n            }\n        }\n    </div>\n}\n", styles: [".indeterminate{animation:indeterminate 16s linear infinite}@keyframes indeterminate{0%{background-position:0 0}to{background-position:100% 0}}\n"] }]
-        }], propDecorators: { labelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ProgressBarLabelTemplateDirective), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaValueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-valuetext", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], labelStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelStyles", required: false }] }], labelVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelVisible", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
+                    }, template: "<div\n    [class]=\"trackClasses()\"\n    [style.background-color]=\"trackColor()\"\n    [attr.data-prev]=\"true\"\n    [attr.data-start]=\"labelPosition() === 'start'\"\n    [attr.data-end]=\"labelPosition() === 'end'\"\n    [attr.data-indeterminate]=\"indeterminate()\"\n    [attr.data-value]=\"progress()\"\n    [style.clip-path]=\"prevTrackClipPath()\">\n    @if (indeterminate()) {\n        <div [class]=\"indeterminateClasses()\" class=\"indeterminate\"></div>\n    } @else if (labelVisible()) {\n        @if (labelTemplate()) {\n            <ng-container\n                [ngTemplateOutlet]=\"labelTemplate()?.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: value(), min: min(), max: max(), percent: progress() }\">\n            </ng-container>\n        } @else {\n            <span [class]=\"labelClasses()\" [style]=\"labelStyles()\">{{ formattedProgress() }}</span>\n        }\n    }\n</div>\n\n@if (!indeterminate()) {\n    <div\n        [class]=\"trackClasses()\"\n        [attr.data-next]=\"true\"\n        [attr.data-start]=\"labelPosition() === 'start'\"\n        [attr.data-end]=\"labelPosition() === 'end'\"\n        [style.clip-path]=\"nextTrackClipPath()\">\n        @if (labelVisible()) {\n            @if (labelTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"labelTemplate()?.templateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: value(), min: min(), max: max(), percent: progress() }\">\n                </ng-container>\n            } @else {\n                <span [class]=\"labelClasses()\" [style]=\"labelStyles()\">{{ formattedProgress() }}</span>\n            }\n        }\n    </div>\n}\n", styles: [".indeterminate{animation:indeterminate 16s linear infinite}@keyframes indeterminate{0%{background-position:0 0}to{background-position:100% 0}}\n"] }]
+        }], propDecorators: { labelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ProgressBarLabelTemplateDirective), { isSignal: true }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaValueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-valuetext", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], labelStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelStyles", required: false }] }], labelVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelVisible", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/progress-bar

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

@@ -4,9 +4,15 @@ 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 { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
+const RATING_DEFAULT_MESSAGES = {
+    notRated: "Not rated",
+    valueText: (value, max) => `${value} out of ${max}`
+};
+
 /**
  * @description Renders the pointer-preview visual for rating items. Overrides the default preset
  * overlay whenever the visible state comes from pointer preview.
@@ -15,7 +21,7 @@ class RatingHoveredItemTemplateDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
     }
-    static ngTemplateContextGuard(_directive, context) {
+    static ngTemplateContextGuard(_directive, _context) {
         return true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RatingHoveredItemTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -36,7 +42,7 @@ class RatingItemTemplateDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
     }
-    static ngTemplateContextGuard(_directive, context) {
+    static ngTemplateContextGuard(_directive, _context) {
         return true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RatingItemTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -57,7 +63,7 @@ class RatingSelectedItemTemplateDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
     }
-    static ngTemplateContextGuard(_directive, context) {
+    static ngTemplateContextGuard(_directive, _context) {
         return true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RatingSelectedItemTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -263,6 +269,8 @@ const ratingIcons = {
 };
 class RatingComponent {
     constructor() {
+        this.#direction = injectComponentDirection();
+        this.#i18n = inject(MonaI18nService);
         this.activeState = computed(() => this.previewActive() ? "hovered" : "selected", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeState" }] : /* istanbul ignore next */ []));
         this.containerClasses = computed(() => twMerge(ratingContainerThemeVariants(), this.userClass()), /* @ts-ignore */
@@ -288,7 +296,9 @@ class RatingComponent {
             if (custom) {
                 return custom(this.normalizedValue(), this.itemsCount());
             }
-            return this.normalizedValue() === 0 ? "Not rated" : `${this.normalizedValue()} out of ${this.itemsCount()}`;
+            return this.normalizedValue() === 0
+                ? this.messages().notRated
+                : this.messages().valueText(this.normalizedValue(), this.itemsCount());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "effectiveAriaValueText" }] : /* istanbul ignore next */ []));
         this.effectiveTabIndex = computed(() => (this.disabled() ? -1 : this.tabindex()), /* @ts-ignore */
@@ -304,6 +314,8 @@ class RatingComponent {
         ...(ngDevMode ? [{ debugName: "interactionStep" }] : /* istanbul ignore next */ []));
         this.invalidState = computed(() => this.touched() && this.invalid(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        this.isRtl = computed(() => this.#direction() === "rtl", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
         this.itemClasses = computed(() => ratingItemThemeVariants({ size: this.size() }), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "itemClasses" }] : /* istanbul ignore next */ []));
         this.itemTemplate = contentChild(RatingItemTemplateDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
@@ -314,6 +326,7 @@ class RatingComponent {
         this.labelClasses = computed(() => ratingLabelThemeVariants({ size: this.size() }), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
         this.labelId = createElementControlId();
+        this.messages = this.#i18n.componentMessages("rating", RATING_DEFAULT_MESSAGES);
         this.normalizedValue = computed(() => normalizeRatingValue(this.value(), this.itemsCount(), this.precision()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "normalizedValue" }] : /* istanbul ignore next */ []));
         this.overlayClipClasses = computed(() => ratingOverlayClipThemeVariants(), /* @ts-ignore */
@@ -459,6 +472,8 @@ class RatingComponent {
         this.value = model(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     }
+    #direction;
+    #i18n;
     blur() {
         this.controlElement().nativeElement.blur();
     }
@@ -564,11 +579,14 @@ class RatingComponent {
         });
     }
     getKeyAction(key) {
+        const isRtl = this.isRtl();
+        const decreaseKey = isRtl ? "ArrowRight" : "ArrowLeft";
+        const increaseKey = isRtl ? "ArrowLeft" : "ArrowRight";
         switch (key) {
-            case "ArrowRight":
+            case increaseKey:
             case "ArrowUp":
                 return "increase";
-            case "ArrowLeft":
+            case decreaseKey:
             case "ArrowDown":
                 return "decrease";
             case "Home":
@@ -602,5 +620,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { RatingComponent, RatingHoveredItemTemplateDirective, RatingItemTemplateDirective, RatingSelectedItemTemplateDirective };
+export { RATING_DEFAULT_MESSAGES, RatingComponent, RatingHoveredItemTemplateDirective, RatingItemTemplateDirective, RatingSelectedItemTemplateDirective };
 //# sourceMappingURL=nanahoshi-mona-ui-rating.mjs.map