@nanahoshi/mona-ui 0.1.0 → 0.1.1

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

@@ -55,10 +55,10 @@ class PopoverShownEvent {
     }
 }
 
-const popoverBaseVariants = cva(`
-        flex flex-col items-center justify-center relative
-        bg-background border border-border
-        shadow-[0_2px_8px_rgba(0,0,0,0.12)] z-1
+const popoverBaseVariants = cva(`
+        flex flex-col items-center justify-center relative
+        bg-background text-foreground border border-border
+        shadow-[0_2px_8px_rgba(0,0,0,0.12)] z-1
     `, {
     variants: {
         rounded: {
@@ -69,9 +69,9 @@ const popoverBaseVariants = cva(`
         }
     }
 });
-const popoverHeaderVariants = cva(`
-        flex items-center justify-between w-full
-        font-semibold overflow-hidden
+const popoverHeaderVariants = cva(`
+        flex items-center justify-between w-full
+        font-semibold overflow-hidden
     `, {
     variants: {
         rounded: {
@@ -82,9 +82,9 @@ const popoverHeaderVariants = cva(`
         }
     }
 });
-const popoverContentVariants = cva(`
-        flex-1 w-full h-full
-        overflow-hidden
+const popoverContentVariants = cva(`
+        flex-1 w-full h-full
+        overflow-hidden
     `);
 
 const popoverBaseThemeVariants = (theme) => {
@@ -306,11 +306,11 @@ class PopoverComponent {
         return target instanceof ElementRef ? target.nativeElement : target;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PopoverComponent, isStandalone: true, selector: "mona-popover", inputs: { displayArrow: { classPropertyName: "displayArrow", publicName: "displayArrow", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hide: "hide", hidden: "hidden", show: "show", shown: "shown" }, queries: [{ propertyName: "footerTemplateRef", first: true, predicate: PopoverFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "titleTemplateRef", first: true, predicate: PopoverTitleTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["monaPopover"], ngImport: i0, template: "<ng-template>\r\n    <div [class]=\"baseClasses()\" [id]=\"uid\" role=\"dialog\" [attr.aria-labelledby]=\"headerId()\" [attr.data-uid]=\"uid\">\r\n        <div>\r\n            @if (title() || titleTemplateRef()) {\r\n                <div [class]=\"headerClasses()\" [id]=\"headerId()\">\r\n                    @if (titleTemplateRef()) {\r\n                        <ng-container [ngTemplateOutlet]=\"titleTemplateRef()\"></ng-container>\r\n                    } @else {\r\n                        <span>{{ title() }}</span>\r\n                    }\r\n                </div>\r\n            }\r\n            <div [class]=\"contentClasses()\">\r\n                <ng-content></ng-content>\r\n            </div>\r\n            @if (footerTemplateRef()) {\r\n                <div class=\"mona-popover-footer\">\r\n                    <ng-container [ngTemplateOutlet]=\"footerTemplateRef()\"></ng-container>\r\n                </div>\r\n            }\r\n        </div>\r\n        @if (displayArrow()) {\r\n            <div [class]=\"arrowClasses()\" [attr.data-position]=\"currentArrowPosition()\"></div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PopoverComponent, isStandalone: true, selector: "mona-popover", inputs: { displayArrow: { classPropertyName: "displayArrow", publicName: "displayArrow", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hide: "hide", hidden: "hidden", show: "show", shown: "shown" }, queries: [{ propertyName: "footerTemplateRef", first: true, predicate: PopoverFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "titleTemplateRef", first: true, predicate: PopoverTitleTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["monaPopover"], ngImport: i0, template: "<ng-template>\n    <div [class]=\"baseClasses()\" [id]=\"uid\" role=\"dialog\" [attr.aria-labelledby]=\"headerId()\" [attr.data-uid]=\"uid\">\n        <div>\n            @if (title() || titleTemplateRef()) {\n                <div [class]=\"headerClasses()\" [id]=\"headerId()\">\n                    @if (titleTemplateRef()) {\n                        <ng-container [ngTemplateOutlet]=\"titleTemplateRef()\"></ng-container>\n                    } @else {\n                        <span>{{ title() }}</span>\n                    }\n                </div>\n            }\n            <div [class]=\"contentClasses()\">\n                <ng-content></ng-content>\n            </div>\n            @if (footerTemplateRef()) {\n                <div class=\"mona-popover-footer\">\n                    <ng-container [ngTemplateOutlet]=\"footerTemplateRef()\"></ng-container>\n                </div>\n            }\n        </div>\n        @if (displayArrow()) {\n            <div [class]=\"arrowClasses()\" [attr.data-position]=\"currentArrowPosition()\"></div>\n        }\n    </div>\n</ng-template>\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: PopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-popover", exportAs: "monaPopover", imports: [NgTemplateOutlet], template: "<ng-template>\r\n    <div [class]=\"baseClasses()\" [id]=\"uid\" role=\"dialog\" [attr.aria-labelledby]=\"headerId()\" [attr.data-uid]=\"uid\">\r\n        <div>\r\n            @if (title() || titleTemplateRef()) {\r\n                <div [class]=\"headerClasses()\" [id]=\"headerId()\">\r\n                    @if (titleTemplateRef()) {\r\n                        <ng-container [ngTemplateOutlet]=\"titleTemplateRef()\"></ng-container>\r\n                    } @else {\r\n                        <span>{{ title() }}</span>\r\n                    }\r\n                </div>\r\n            }\r\n            <div [class]=\"contentClasses()\">\r\n                <ng-content></ng-content>\r\n            </div>\r\n            @if (footerTemplateRef()) {\r\n                <div class=\"mona-popover-footer\">\r\n                    <ng-container [ngTemplateOutlet]=\"footerTemplateRef()\"></ng-container>\r\n                </div>\r\n            }\r\n        </div>\r\n        @if (displayArrow()) {\r\n            <div [class]=\"arrowClasses()\" [attr.data-position]=\"currentArrowPosition()\"></div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n" }]
+            args: [{ selector: "mona-popover", exportAs: "monaPopover", imports: [NgTemplateOutlet], template: "<ng-template>\n    <div [class]=\"baseClasses()\" [id]=\"uid\" role=\"dialog\" [attr.aria-labelledby]=\"headerId()\" [attr.data-uid]=\"uid\">\n        <div>\n            @if (title() || titleTemplateRef()) {\n                <div [class]=\"headerClasses()\" [id]=\"headerId()\">\n                    @if (titleTemplateRef()) {\n                        <ng-container [ngTemplateOutlet]=\"titleTemplateRef()\"></ng-container>\n                    } @else {\n                        <span>{{ title() }}</span>\n                    }\n                </div>\n            }\n            <div [class]=\"contentClasses()\">\n                <ng-content></ng-content>\n            </div>\n            @if (footerTemplateRef()) {\n                <div class=\"mona-popover-footer\">\n                    <ng-container [ngTemplateOutlet]=\"footerTemplateRef()\"></ng-container>\n                </div>\n            }\n        </div>\n        @if (displayArrow()) {\n            <div [class]=\"arrowClasses()\" [attr.data-position]=\"currentArrowPosition()\"></div>\n        }\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { footerTemplateRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopoverFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], titleTemplateRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopoverTitleTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], templateRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], displayArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayArrow", required: false }] }], hide: [{ type: i0.Output, args: ["hide"] }], hidden: [{ type: i0.Output, args: ["hidden"] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], show: [{ type: i0.Output, args: ["show"] }], shown: [{ type: i0.Output, args: ["shown"] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }] } });
 
 /*

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

@@ -144,12 +144,12 @@ const popupMenuBaseVariants = cva(`w-full h-full overflow-hidden`, {
         }
     }
 });
-const popupMenuContainerVariants = cva(`
-        flex flex-col
-        bg-background text-foreground
-        border border-border
-        outline-none
-        p-1 shadow-md
+const popupMenuContainerVariants = cva(`
+        flex flex-col
+        bg-background text-foreground
+        border border-border
+        outline-none
+        p-1 shadow-md
     `, {
     variants: {
         rounded: {
@@ -170,24 +170,24 @@ const popupMenuGroupHeaderVariants = cva(`font-bold inline-flex select-none px-2
     }
 });
 const popupMenuIconContainerVariants = cva(`absolute left-2 flex items-center justify-center`);
-const popupMenuItemVariants = cva(`
-        relative flex gap-2
-        cursor-pointer select-none items-center pl-8 pr-2 py-1
-        outline-none
-
-        hover:bg-hover
-        hover:text-hover-foreground
-
-        focus-within:bg-accent
-        focus-within:text-accent-foreground
-        focus-within:outline-none
-
-        data-[disabled='true']:pointer-events-none
-        data-[disabled='true']:cursor-not-allowed
-        data-[disabled='true']:opacity-50
-
-        data-[active='true']:bg-hover
-        data-[active='true']:text-hover-foreground
+const popupMenuItemVariants = cva(`
+        relative flex gap-2
+        cursor-pointer select-none items-center pl-8 pr-2 py-1
+        outline-none
+
+        hover:bg-hover
+        hover:text-hover-foreground
+
+        focus-within:bg-accent
+        focus-within:text-accent-foreground
+        focus-within:outline-none
+
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:opacity-50
+
+        data-[active='true']:bg-hover
+        data-[active='true']:text-hover-foreground
     `, {
     variants: {
         rounded: {
@@ -654,13 +654,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\r\n    role=\"menu\"\r\n    [attr.tabindex]=\"0\"\r\n    [attr.aria-orientation]=\"'vertical'\"\r\n    [attr.aria-activedescendant]=\"activeMenuItem()?.uid\"\r\n    [attr.id]=\"menuId()\"\r\n    [class]=\"containerClasses()\">\r\n    @for (group of menuItems(); track $index) {\r\n        @if (typeof group.key === \"string\") {\r\n            @let groupTemplate = group.first().groupTemplate?.() ?? popupGroupTemplate() ?? null;\r\n            <div role=\"group\" [attr.aria-labelledby]=\"`${group.key}-${$index}`\" [class]=\"groupHeaderClasses()\">\r\n                <div [id]=\"`${group.key}-${$index}`\" role=\"presentation\">\r\n                    @if (groupTemplate) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"groupTemplate\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: group.key }\"></ng-container>\r\n                    } @else {\r\n                        <span>{{ group.key }}</span>\r\n                    }\r\n                </div>\r\n            </div>\r\n        }\r\n        @for (item of group.source; track $index) {\r\n            @if (item.separator) {\r\n                <div role=\"separator\" class=\"bg-border my-1 h-px\"></div>\r\n            } @else {\r\n                @let iconTemplate = item.iconTemplate?.() ?? popupIconTemplate() ?? null;\r\n                @let shortcutTemplate = item.shortcutTemplate?.() ?? popupShortcutTemplate() ?? null;\r\n                @let textTemplate = item.textTemplate?.() ?? popupTextTemplate() ?? null;\r\n                <div\r\n                    role=\"menuitem\"\r\n                    [id]=\"item.uid\"\r\n                    (pointerenter)=\"pointerEnter$.next({ event: $event, item: item })\"\r\n                    (pointerleave)=\"pointerLeave$.next({ event: $event, item: item })\"\r\n                    (click)=\"onItemClick($event, item)\"\r\n                    [attr.data-active]=\"item === activeMenuItem()\"\r\n                    [attr.aria-disabled]=\"item.disabled\"\r\n                    [attr.aria-expanded]=\"item.items.length > 0 && item === activeMenuItem() && !!popupRef\"\r\n                    [attr.aria-haspopup]=\"item.items.length > 0 ? 'menu' : null\"\r\n                    [attr.aria-label]=\"item.label || null\"\r\n                    [attr.data-disabled]=\"item.disabled\"\r\n                    [class]=\"menuItemClasses()\">\r\n                    @if (iconAreaVisible()) {\r\n                        <div [class]=\"iconContainerClasses()\">\r\n                            @if (!item.checkable && !item.radio) {\r\n                                <ng-container\r\n                                    [ngTemplateOutlet]=\"iconTemplate\"\r\n                                    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n                            } @else if (item.checkable) {\r\n                                @if (item.checked?.()) {\r\n                                    <svg lucideCheck [size]=\"14\"></svg>\r\n                                }\r\n                            } @else if (item.radio) {\r\n                                @if (item.selected?.()) {\r\n                                    <svg\r\n                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                        width=\"24\"\r\n                                        height=\"24\"\r\n                                        viewBox=\"0 0 24 24\"\r\n                                        fill=\"none\"\r\n                                        stroke=\"currentColor\"\r\n                                        stroke-width=\"2\"\r\n                                        stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\"\r\n                                        class=\"lucide lucide-circle size-2 fill-current\">\r\n                                        <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n                                    </svg>\r\n                                }\r\n                            }\r\n                        </div>\r\n                    }\r\n                    <div class=\"flex-1\">\r\n                        @if (textTemplate) {\r\n                            <ng-container\r\n                                [ngTemplateOutlet]=\"textTemplate\"\r\n                                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n                        } @else {\r\n                            {{ item.label }}\r\n                        }\r\n                    </div>\r\n                    @if (item.items.length > 0) {\r\n                        @if (!item.checkable) {\r\n                            <div [class]=\"linkContainerClasses()\">\r\n                                <svg lucideChevronRight [size]=\"16\"></svg>\r\n                            </div>\r\n                        }\r\n                    } @else if (shortcutTemplate) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"shortcutTemplate\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n                    }\r\n                </div>\r\n            }\r\n        }\r\n    }\r\n</div>\r\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\"></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\r\n    role=\"menu\"\r\n    [attr.tabindex]=\"0\"\r\n    [attr.aria-orientation]=\"'vertical'\"\r\n    [attr.aria-activedescendant]=\"activeMenuItem()?.uid\"\r\n    [attr.id]=\"menuId()\"\r\n    [class]=\"containerClasses()\">\r\n    @for (group of menuItems(); track $index) {\r\n        @if (typeof group.key === \"string\") {\r\n            @let groupTemplate = group.first().groupTemplate?.() ?? popupGroupTemplate() ?? null;\r\n            <div role=\"group\" [attr.aria-labelledby]=\"`${group.key}-${$index}`\" [class]=\"groupHeaderClasses()\">\r\n                <div [id]=\"`${group.key}-${$index}`\" role=\"presentation\">\r\n                    @if (groupTemplate) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"groupTemplate\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: group.key }\"></ng-container>\r\n                    } @else {\r\n                        <span>{{ group.key }}</span>\r\n                    }\r\n                </div>\r\n            </div>\r\n        }\r\n        @for (item of group.source; track $index) {\r\n            @if (item.separator) {\r\n                <div role=\"separator\" class=\"bg-border my-1 h-px\"></div>\r\n            } @else {\r\n                @let iconTemplate = item.iconTemplate?.() ?? popupIconTemplate() ?? null;\r\n                @let shortcutTemplate = item.shortcutTemplate?.() ?? popupShortcutTemplate() ?? null;\r\n                @let textTemplate = item.textTemplate?.() ?? popupTextTemplate() ?? null;\r\n                <div\r\n                    role=\"menuitem\"\r\n                    [id]=\"item.uid\"\r\n                    (pointerenter)=\"pointerEnter$.next({ event: $event, item: item })\"\r\n                    (pointerleave)=\"pointerLeave$.next({ event: $event, item: item })\"\r\n                    (click)=\"onItemClick($event, item)\"\r\n                    [attr.data-active]=\"item === activeMenuItem()\"\r\n                    [attr.aria-disabled]=\"item.disabled\"\r\n                    [attr.aria-expanded]=\"item.items.length > 0 && item === activeMenuItem() && !!popupRef\"\r\n                    [attr.aria-haspopup]=\"item.items.length > 0 ? 'menu' : null\"\r\n                    [attr.aria-label]=\"item.label || null\"\r\n                    [attr.data-disabled]=\"item.disabled\"\r\n                    [class]=\"menuItemClasses()\">\r\n                    @if (iconAreaVisible()) {\r\n                        <div [class]=\"iconContainerClasses()\">\r\n                            @if (!item.checkable && !item.radio) {\r\n                                <ng-container\r\n                                    [ngTemplateOutlet]=\"iconTemplate\"\r\n                                    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n                            } @else if (item.checkable) {\r\n                                @if (item.checked?.()) {\r\n                                    <svg lucideCheck [size]=\"14\"></svg>\r\n                                }\r\n                            } @else if (item.radio) {\r\n                                @if (item.selected?.()) {\r\n                                    <svg\r\n                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                        width=\"24\"\r\n                                        height=\"24\"\r\n                                        viewBox=\"0 0 24 24\"\r\n                                        fill=\"none\"\r\n                                        stroke=\"currentColor\"\r\n                                        stroke-width=\"2\"\r\n                                        stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\"\r\n                                        class=\"lucide lucide-circle size-2 fill-current\">\r\n                                        <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n                                    </svg>\r\n                                }\r\n                            }\r\n                        </div>\r\n                    }\r\n                    <div class=\"flex-1\">\r\n                        @if (textTemplate) {\r\n                            <ng-container\r\n                                [ngTemplateOutlet]=\"textTemplate\"\r\n                                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n                        } @else {\r\n                            {{ item.label }}\r\n                        }\r\n                    </div>\r\n                    @if (item.items.length > 0) {\r\n                        @if (!item.checkable) {\r\n                            <div [class]=\"linkContainerClasses()\">\r\n                                <svg lucideChevronRight [size]=\"16\"></svg>\r\n                            </div>\r\n                        }\r\n                    } @else if (shortcutTemplate) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"shortcutTemplate\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n                    }\r\n                </div>\r\n            }\r\n        }\r\n    }\r\n</div>\r\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\"></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

@@ -203,13 +203,13 @@ class PopupWrapperComponent {
         this.#fallbackTimer = win.setTimeout(() => this.#completeClose(), duration + 50);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PopupWrapperComponent, isStandalone: true, selector: "mona-popup-wrapper", host: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "animationElement", first: true, predicate: ["animationElement"], descendants: true, isSignal: true }, { propertyName: "componentOutlet", first: true, predicate: ["componentOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (visible()) {\r\n    <div\r\n        #animationElement\r\n        class=\"w-full h-full origin-center\"\r\n        [animate.enter]=\"enterAnimationClasses()\"\r\n        [animate.leave]=\"leaveAnimationClasses()\"\r\n        (animationcancel)=\"onNativeLeaveComplete($event)\"\r\n        (animationend)=\"onNativeLeaveComplete($event)\"\r\n        (transitioncancel)=\"onNativeLeaveComplete($event)\"\r\n        (transitionend)=\"onNativeLeaveComplete($event)\">\r\n        @if (templateRef()) {\r\n            <ng-container [ngTemplateOutlet]=\"templateRef()\"></ng-container>\r\n        }\r\n        <ng-container #componentOutlet></ng-container>\r\n    </div>\r\n}\r\n", styles: [":host{display:block}.mona-popup-enter{animation:mona-popup-scale-in .15s cubic-bezier(.4,0,.2,1)}.mona-popup-leave{animation:mona-popup-scale-out .15s cubic-bezier(.4,0,.2,1)}.mona-dropdown-popup-enter{animation:mona-dropdown-popup-scale-in .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-dropdown-popup-leave{animation:mona-dropdown-popup-scale-out .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-popup-fade-enter{animation:mona-popup-fade-in 50ms ease-in}.mona-popup-fade-leave{animation:mona-popup-fade-out .15s ease-out}@keyframes mona-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-dropdown-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-dropdown-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes mona-popup-fade-out{0%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.mona-popup-enter,.mona-popup-leave,.mona-dropdown-popup-enter,.mona-dropdown-popup-leave,.mona-popup-fade-enter,.mona-popup-fade-leave{animation-duration:1ms}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PopupWrapperComponent, isStandalone: true, selector: "mona-popup-wrapper", host: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "animationElement", first: true, predicate: ["animationElement"], descendants: true, isSignal: true }, { propertyName: "componentOutlet", first: true, predicate: ["componentOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n    <div\n        #animationElement\n        class=\"w-full h-full origin-center\"\n        [animate.enter]=\"enterAnimationClasses()\"\n        [animate.leave]=\"leaveAnimationClasses()\"\n        (animationcancel)=\"onNativeLeaveComplete($event)\"\n        (animationend)=\"onNativeLeaveComplete($event)\"\n        (transitioncancel)=\"onNativeLeaveComplete($event)\"\n        (transitionend)=\"onNativeLeaveComplete($event)\">\n        @if (templateRef()) {\n            <ng-container [ngTemplateOutlet]=\"templateRef()\"></ng-container>\n        }\n        <ng-container #componentOutlet></ng-container>\n    </div>\n}\n", styles: [":host{display:block}.mona-popup-enter{animation:mona-popup-scale-in .15s cubic-bezier(.4,0,.2,1)}.mona-popup-leave{animation:mona-popup-scale-out .15s cubic-bezier(.4,0,.2,1)}.mona-dropdown-popup-enter{animation:mona-dropdown-popup-scale-in .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-dropdown-popup-leave{animation:mona-dropdown-popup-scale-out .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-popup-fade-enter{animation:mona-popup-fade-in 50ms ease-in}.mona-popup-fade-leave{animation:mona-popup-fade-out .15s ease-out}@keyframes mona-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-dropdown-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-dropdown-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes mona-popup-fade-out{0%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.mona-popup-enter,.mona-popup-leave,.mona-dropdown-popup-enter,.mona-dropdown-popup-leave,.mona-popup-fade-enter,.mona-popup-fade-leave{animation-duration:1ms}}\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: PopupWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-popup-wrapper", imports: [NgTemplateOutlet], host: {
                         "[class]": "hostClasses()"
-                    }, template: "@if (visible()) {\r\n    <div\r\n        #animationElement\r\n        class=\"w-full h-full origin-center\"\r\n        [animate.enter]=\"enterAnimationClasses()\"\r\n        [animate.leave]=\"leaveAnimationClasses()\"\r\n        (animationcancel)=\"onNativeLeaveComplete($event)\"\r\n        (animationend)=\"onNativeLeaveComplete($event)\"\r\n        (transitioncancel)=\"onNativeLeaveComplete($event)\"\r\n        (transitionend)=\"onNativeLeaveComplete($event)\">\r\n        @if (templateRef()) {\r\n            <ng-container [ngTemplateOutlet]=\"templateRef()\"></ng-container>\r\n        }\r\n        <ng-container #componentOutlet></ng-container>\r\n    </div>\r\n}\r\n", styles: [":host{display:block}.mona-popup-enter{animation:mona-popup-scale-in .15s cubic-bezier(.4,0,.2,1)}.mona-popup-leave{animation:mona-popup-scale-out .15s cubic-bezier(.4,0,.2,1)}.mona-dropdown-popup-enter{animation:mona-dropdown-popup-scale-in .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-dropdown-popup-leave{animation:mona-dropdown-popup-scale-out .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-popup-fade-enter{animation:mona-popup-fade-in 50ms ease-in}.mona-popup-fade-leave{animation:mona-popup-fade-out .15s ease-out}@keyframes mona-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-dropdown-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-dropdown-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes mona-popup-fade-out{0%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.mona-popup-enter,.mona-popup-leave,.mona-dropdown-popup-enter,.mona-dropdown-popup-leave,.mona-popup-fade-enter,.mona-popup-fade-leave{animation-duration:1ms}}\n"] }]
+                    }, template: "@if (visible()) {\n    <div\n        #animationElement\n        class=\"w-full h-full origin-center\"\n        [animate.enter]=\"enterAnimationClasses()\"\n        [animate.leave]=\"leaveAnimationClasses()\"\n        (animationcancel)=\"onNativeLeaveComplete($event)\"\n        (animationend)=\"onNativeLeaveComplete($event)\"\n        (transitioncancel)=\"onNativeLeaveComplete($event)\"\n        (transitionend)=\"onNativeLeaveComplete($event)\">\n        @if (templateRef()) {\n            <ng-container [ngTemplateOutlet]=\"templateRef()\"></ng-container>\n        }\n        <ng-container #componentOutlet></ng-container>\n    </div>\n}\n", styles: [":host{display:block}.mona-popup-enter{animation:mona-popup-scale-in .15s cubic-bezier(.4,0,.2,1)}.mona-popup-leave{animation:mona-popup-scale-out .15s cubic-bezier(.4,0,.2,1)}.mona-dropdown-popup-enter{animation:mona-dropdown-popup-scale-in .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-dropdown-popup-leave{animation:mona-dropdown-popup-scale-out .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-popup-fade-enter{animation:mona-popup-fade-in 50ms ease-in}.mona-popup-fade-leave{animation:mona-popup-fade-out .15s ease-out}@keyframes mona-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-dropdown-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-dropdown-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes mona-popup-fade-out{0%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.mona-popup-enter,.mona-popup-leave,.mona-dropdown-popup-enter,.mona-dropdown-popup-leave,.mona-popup-fade-enter,.mona-popup-fade-leave{animation-duration:1ms}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { animationElement: [{ type: i0.ViewChild, args: ["animationElement", { isSignal: true }] }], componentOutlet: [{ type: i0.ViewChild, args: ["componentOutlet", { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
 class PopupRef {
@@ -1302,11 +1302,11 @@ class PopupComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: PopupComponent, isStandalone: true, selector: "mona-popup", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, anchorConnectionPoint: { classPropertyName: "anchorConnectionPoint", publicName: "anchorConnectionPoint", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnMouseLeave: { classPropertyName: "closeOnMouseLeave", publicName: "closeOnMouseLeave", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, popupConnectionPoint: { classPropertyName: "popupConnectionPoint", publicName: "popupConnectionPoint", isSignal: true, isRequired: false, transformFunction: null }, popupWrapperClass: { classPropertyName: "popupWrapperClass", publicName: "popupWrapperClass", isSignal: true, isRequired: false, transformFunction: null }, positionStrategy: { classPropertyName: "positionStrategy", publicName: "positionStrategy", isSignal: true, isRequired: false, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null }, preventClose: { classPropertyName: "preventClose", publicName: "preventClose", isSignal: true, isRequired: false, transformFunction: null }, providers: { classPropertyName: "providers", publicName: "providers", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, withPush: { classPropertyName: "withPush", publicName: "withPush", isSignal: true, isRequired: false, transformFunction: null }, closeOnScroll: { classPropertyName: "closeOnScroll", publicName: "closeOnScroll", isSignal: true, isRequired: false, transformFunction: null }, restoreFocus: { classPropertyName: "restoreFocus", publicName: "restoreFocus", isSignal: true, isRequired: false, transformFunction: null }, withScrollTracking: { classPropertyName: "withScrollTracking", publicName: "withScrollTracking", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", open: "open" }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\r\n    <ng-content></ng-content>\r\n</ng-template>\r\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: PopupComponent, isStandalone: true, selector: "mona-popup", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, anchorConnectionPoint: { classPropertyName: "anchorConnectionPoint", publicName: "anchorConnectionPoint", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnMouseLeave: { classPropertyName: "closeOnMouseLeave", publicName: "closeOnMouseLeave", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, popupConnectionPoint: { classPropertyName: "popupConnectionPoint", publicName: "popupConnectionPoint", isSignal: true, isRequired: false, transformFunction: null }, popupWrapperClass: { classPropertyName: "popupWrapperClass", publicName: "popupWrapperClass", isSignal: true, isRequired: false, transformFunction: null }, positionStrategy: { classPropertyName: "positionStrategy", publicName: "positionStrategy", isSignal: true, isRequired: false, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null }, preventClose: { classPropertyName: "preventClose", publicName: "preventClose", isSignal: true, isRequired: false, transformFunction: null }, providers: { classPropertyName: "providers", publicName: "providers", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, withPush: { classPropertyName: "withPush", publicName: "withPush", isSignal: true, isRequired: false, transformFunction: null }, closeOnScroll: { classPropertyName: "closeOnScroll", publicName: "closeOnScroll", isSignal: true, isRequired: false, transformFunction: null }, restoreFocus: { classPropertyName: "restoreFocus", publicName: "restoreFocus", isSignal: true, isRequired: false, transformFunction: null }, withScrollTracking: { classPropertyName: "withScrollTracking", publicName: "withScrollTracking", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", open: "open" }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\n    <ng-content></ng-content>\n</ng-template>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-popup", template: "<ng-template>\r\n    <ng-content></ng-content>\r\n</ng-template>\r\n" }]
+            args: [{ selector: "mona-popup", template: "<ng-template>\n    <ng-content></ng-content>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { contentTemplate: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: true }] }], anchorConnectionPoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorConnectionPoint", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnMouseLeave: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnMouseLeave", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], 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 }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], popupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupClass", required: false }] }], popupConnectionPoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupConnectionPoint", required: false }] }], popupWrapperClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupWrapperClass", required: false }] }], positionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionStrategy", required: false }] }], positions: [{ type: i0.Input, args: [{ isSignal: true, alias: "positions", required: false }] }], preventClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventClose", required: false }] }], providers: [{ type: i0.Input, args: [{ isSignal: true, alias: "providers", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], withPush: [{ type: i0.Input, args: [{ isSignal: true, alias: "withPush", required: false }] }], closeOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnScroll", required: false }] }], restoreFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "restoreFocus", required: false }] }], withScrollTracking: [{ type: i0.Input, args: [{ isSignal: true, alias: "withScrollTracking", required: false }] }] } });
 
 /*

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

@@ -264,7 +264,7 @@ class ProgressBarComponent {
     #color;
     #themeService;
     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\r\n    [class]=\"trackClasses()\"\r\n    [style.background-color]=\"trackColor()\"\r\n    [attr.data-prev]=\"true\"\r\n    [attr.data-left]=\"labelPosition() === 'start'\"\r\n    [attr.data-right]=\"labelPosition() === 'end'\"\r\n    [attr.data-indeterminate]=\"indeterminate()\"\r\n    [attr.data-value]=\"progress()\"\r\n    [style.clip-path]=\"prevTrackClipPath()\">\r\n    @if (indeterminate()) {\r\n        <div [class]=\"indeterminateClasses()\" class=\"indeterminate\"></div>\r\n    } @else if (labelVisible()) {\r\n        @if (labelTemplate()) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"labelTemplate()?.templateRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: value(), min: min(), max: max(), percent: progress() }\">\r\n            </ng-container>\r\n        } @else {\r\n            <span [class]=\"labelClasses()\" [style]=\"labelStyles()\">{{ progress() | number: \"1.0-2\" }}</span>\r\n        }\r\n    }\r\n</div>\r\n\r\n@if (!indeterminate()) {\r\n    <div\r\n        [class]=\"trackClasses()\"\r\n        [attr.data-next]=\"true\"\r\n        [attr.data-left]=\"labelPosition() === 'start'\"\r\n        [attr.data-right]=\"labelPosition() === 'end'\"\r\n        [style.clip-path]=\"nextTrackClipPath()\">\r\n        @if (labelVisible()) {\r\n            @if (labelTemplate()) {\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"labelTemplate()?.templateRef\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: value(), min: min(), max: max(), percent: progress() }\">\r\n                </ng-container>\r\n            } @else {\r\n                <span [class]=\"labelClasses()\" [style]=\"labelStyles()\">{{ progress() | number: \"1.0-2\" }}</span>\r\n            }\r\n        }\r\n    </div>\r\n}\r\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: { 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
@@ -279,7 +279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.aria-disabled]": "disabled() || null",
                         "[attr.data-disabled]": "disabled()",
                         role: "progressbar"
-                    }, template: "<div\r\n    [class]=\"trackClasses()\"\r\n    [style.background-color]=\"trackColor()\"\r\n    [attr.data-prev]=\"true\"\r\n    [attr.data-left]=\"labelPosition() === 'start'\"\r\n    [attr.data-right]=\"labelPosition() === 'end'\"\r\n    [attr.data-indeterminate]=\"indeterminate()\"\r\n    [attr.data-value]=\"progress()\"\r\n    [style.clip-path]=\"prevTrackClipPath()\">\r\n    @if (indeterminate()) {\r\n        <div [class]=\"indeterminateClasses()\" class=\"indeterminate\"></div>\r\n    } @else if (labelVisible()) {\r\n        @if (labelTemplate()) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"labelTemplate()?.templateRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: value(), min: min(), max: max(), percent: progress() }\">\r\n            </ng-container>\r\n        } @else {\r\n            <span [class]=\"labelClasses()\" [style]=\"labelStyles()\">{{ progress() | number: \"1.0-2\" }}</span>\r\n        }\r\n    }\r\n</div>\r\n\r\n@if (!indeterminate()) {\r\n    <div\r\n        [class]=\"trackClasses()\"\r\n        [attr.data-next]=\"true\"\r\n        [attr.data-left]=\"labelPosition() === 'start'\"\r\n        [attr.data-right]=\"labelPosition() === 'end'\"\r\n        [style.clip-path]=\"nextTrackClipPath()\">\r\n        @if (labelVisible()) {\r\n            @if (labelTemplate()) {\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"labelTemplate()?.templateRef\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: value(), min: min(), max: max(), percent: progress() }\">\r\n                </ng-container>\r\n            } @else {\r\n                <span [class]=\"labelClasses()\" [style]=\"labelStyles()\">{{ progress() | number: \"1.0-2\" }}</span>\r\n            }\r\n        }\r\n    </div>\r\n}\r\n", styles: [".indeterminate{animation:indeterminate 16s linear infinite}@keyframes indeterminate{0%{background-position:0 0}to{background-position:100% 0}}\n"] }]
+                    }, 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 }] }] } });
 
 /*

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

@@ -6,27 +6,27 @@ import { twMerge } from 'tailwind-merge';
 import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { cva } from 'class-variance-authority';
 
-const radioButtonVariants = cva(`
-        appearance-none outline-none
-        peer absolute inset-0 w-full h-full
-        opacity-0 cursor-pointer z-10
-        focus:ring-2 focus:ring-primary focus:ring-offset-2
-        disabled:cursor-not-allowed
+const radioButtonVariants = cva(`
+        appearance-none outline-none
+        peer absolute inset-0 w-full h-full
+        opacity-0 cursor-pointer z-10
+        focus:ring-2 focus:ring-primary focus:ring-offset-2
+        disabled:cursor-not-allowed
     `);
-const radioButtonCircleVariants = cva(`
-        w-4.5 h-4.5
-        flex items-center justify-center
-        overflow-hidden
-        bg-input-background
-        border border-input-border
-        cursor-pointer
-        relative
-        transition-colors duration-200
-        peer-focus:ring-2 peer-focus:ring-primary/40
-        peer-disabled:opacity-50 peer-disabled:cursor-not-allowed
-
-        data-[invalid='true']:border-error
-        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+const radioButtonCircleVariants = cva(`
+        w-4.5 h-4.5
+        flex items-center justify-center
+        overflow-hidden
+        bg-input-background
+        border border-input-border
+        cursor-pointer
+        relative
+        transition-colors duration-200
+        peer-focus:ring-2 peer-focus:ring-primary/40
+        peer-disabled:opacity-50 peer-disabled:cursor-not-allowed
+
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
     `, {
     variants: {
         rounded: {
@@ -38,8 +38,8 @@ const radioButtonCircleVariants = cva(`
         }
     }
 });
-const radioButtonIndicatorVariants = cva(`
-        flex w-3 h-3 bg-primary transition-all duration-200
+const radioButtonIndicatorVariants = cva(`
+        flex w-3 h-3 bg-primary transition-all duration-200
     `, {
     variants: {
         rounded: {
@@ -51,13 +51,13 @@ const radioButtonIndicatorVariants = cva(`
         }
     }
 });
-const radioButtonContainerLabelVariants = cva(`
-        w-full h-full flex items-center justify-center gap-1
-        relative
-        cursor-pointer
-        data-[disabled='true']:pointer-events-none
-        data-[disabled='true']:cursor-not-allowed
-        data-[disabled='true']:opacity-50
+const radioButtonContainerLabelVariants = cva(`
+        w-full h-full flex items-center justify-center gap-1
+        relative
+        cursor-pointer
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:opacity-50
     `, {
     variants: {
         labelSize: {
@@ -70,30 +70,30 @@ const radioButtonContainerLabelVariants = cva(`
         labelSize: "medium"
     }
 });
-const radioButtonDirectiveVariants = cva(`
-        appearance-none outline-none
-        w-4.5 h-4.5
-        bg-input-background border border-input-border
-        cursor-pointer
-        relative
-        place-content-center
-        flex items-center justify-center
-
-        disabled:pointer-events-none
-        disabled:cursor-not-allowed
-        disabled:opacity-50
-
-        after:content-['']
-        after:w-3 after:h-3
-        after:inline-grid
-        after:place-content-center
-
-        checked:after:bg-primary
-        checked:after:rounded-full
-
-        focus-visible:ring-2 focus-visible:ring-primary/40
-
-        [&.ng-touched.ng-invalid]:border-error
+const radioButtonDirectiveVariants = cva(`
+        appearance-none outline-none
+        w-4.5 h-4.5
+        bg-input-background border border-input-border
+        cursor-pointer
+        relative
+        place-content-center
+        flex items-center justify-center
+
+        disabled:pointer-events-none
+        disabled:cursor-not-allowed
+        disabled:opacity-50
+
+        after:content-['']
+        after:w-3 after:h-3
+        after:inline-grid
+        after:place-content-center
+
+        checked:after:bg-primary
+        checked:after:rounded-full
+
+        focus-visible:ring-2 focus-visible:ring-primary/40
+
+        [&.ng-touched.ng-invalid]:border-error
     `, {
     variants: {
         rounded: {
@@ -286,14 +286,14 @@ class RadioButtonComponent {
         this.touch.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: RadioButtonComponent, isStandalone: true, selector: "mona-radio-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labelSize: { classPropertyName: "labelSize", publicName: "labelSize", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, radioValue: { classPropertyName: "radioValue", publicName: "radioValue", 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 } }, outputs: { inputBlur: "inputBlur", inputClick: "inputClick", inputFocus: "inputFocus", touch: "touch", value: "valueChange" }, host: { properties: { "attr.data-selected": "radioValue()===value()", "attr.data-disabled": "disabled()" } }, ngImport: i0, template: "<label [class]=\"containerLabelClasses()\" [attr.data-disabled]=\"disabled()\">\r\n    @if (labelPosition() === \"before\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n    <input\r\n        type=\"radio\"\r\n        [disabled]=\"disabled()\"\r\n        [name]=\"name()\"\r\n        [value]=\"radioValue()\"\r\n        [class]=\"radioButtonClasses()\"\r\n        [checked]=\"radioValue() === value()\"\r\n        [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n        (blur)=\"onBlur($event)\"\r\n        (click)=\"inputClick.emit($event)\"\r\n        (focus)=\"inputFocus.emit($event)\"\r\n        (change)=\"onSelectionChange()\" />\r\n    <span [class]=\"radioButtonCircleClasses()\" [attr.data-invalid]=\"invalid() || null\">\r\n        @if (radioValue() === value()) {\r\n            <span [class]=\"radioButtonIndicatorClasses()\"></span>\r\n        }\r\n    </span>\r\n    @if (labelPosition() === \"after\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n</label>\r\n\r\n<ng-template #labelTemplate>\r\n    @if (label()) {\r\n        <span>{{ label() }}</span>\r\n    } @else {\r\n        <ng-content></ng-content>\r\n    }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: RadioButtonComponent, isStandalone: true, selector: "mona-radio-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labelSize: { classPropertyName: "labelSize", publicName: "labelSize", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, radioValue: { classPropertyName: "radioValue", publicName: "radioValue", 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 } }, outputs: { inputBlur: "inputBlur", inputClick: "inputClick", inputFocus: "inputFocus", touch: "touch", value: "valueChange" }, host: { properties: { "attr.data-selected": "radioValue()===value()", "attr.data-disabled": "disabled()" } }, ngImport: i0, template: "<label [class]=\"containerLabelClasses()\" [attr.data-disabled]=\"disabled()\">\n    @if (labelPosition() === \"before\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n    <input\n        type=\"radio\"\n        [disabled]=\"disabled()\"\n        [name]=\"name()\"\n        [value]=\"radioValue()\"\n        [class]=\"radioButtonClasses()\"\n        [checked]=\"radioValue() === value()\"\n        [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n        (blur)=\"onBlur($event)\"\n        (click)=\"inputClick.emit($event)\"\n        (focus)=\"inputFocus.emit($event)\"\n        (change)=\"onSelectionChange()\" />\n    <span [class]=\"radioButtonCircleClasses()\" [attr.data-invalid]=\"invalid() || null\">\n        @if (radioValue() === value()) {\n            <span [class]=\"radioButtonIndicatorClasses()\"></span>\n        }\n    </span>\n    @if (labelPosition() === \"after\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n</label>\n\n<ng-template #labelTemplate>\n    @if (label()) {\n        <span>{{ label() }}</span>\n    } @else {\n        <ng-content></ng-content>\n    }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-radio-button", imports: [FormsModule, NgTemplateOutlet], host: {
                         "[attr.data-selected]": "radioValue()===value()",
                         "[attr.data-disabled]": "disabled()"
-                    }, template: "<label [class]=\"containerLabelClasses()\" [attr.data-disabled]=\"disabled()\">\r\n    @if (labelPosition() === \"before\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n    <input\r\n        type=\"radio\"\r\n        [disabled]=\"disabled()\"\r\n        [name]=\"name()\"\r\n        [value]=\"radioValue()\"\r\n        [class]=\"radioButtonClasses()\"\r\n        [checked]=\"radioValue() === value()\"\r\n        [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n        (blur)=\"onBlur($event)\"\r\n        (click)=\"inputClick.emit($event)\"\r\n        (focus)=\"inputFocus.emit($event)\"\r\n        (change)=\"onSelectionChange()\" />\r\n    <span [class]=\"radioButtonCircleClasses()\" [attr.data-invalid]=\"invalid() || null\">\r\n        @if (radioValue() === value()) {\r\n            <span [class]=\"radioButtonIndicatorClasses()\"></span>\r\n        }\r\n    </span>\r\n    @if (labelPosition() === \"after\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n</label>\r\n\r\n<ng-template #labelTemplate>\r\n    @if (label()) {\r\n        <span>{{ label() }}</span>\r\n    } @else {\r\n        <ng-content></ng-content>\r\n    }\r\n</ng-template>\r\n" }]
+                    }, template: "<label [class]=\"containerLabelClasses()\" [attr.data-disabled]=\"disabled()\">\n    @if (labelPosition() === \"before\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n    <input\n        type=\"radio\"\n        [disabled]=\"disabled()\"\n        [name]=\"name()\"\n        [value]=\"radioValue()\"\n        [class]=\"radioButtonClasses()\"\n        [checked]=\"radioValue() === value()\"\n        [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n        (blur)=\"onBlur($event)\"\n        (click)=\"inputClick.emit($event)\"\n        (focus)=\"inputFocus.emit($event)\"\n        (change)=\"onSelectionChange()\" />\n    <span [class]=\"radioButtonCircleClasses()\" [attr.data-invalid]=\"invalid() || null\">\n        @if (radioValue() === value()) {\n            <span [class]=\"radioButtonIndicatorClasses()\"></span>\n        }\n    </span>\n    @if (labelPosition() === \"after\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n</label>\n\n<ng-template #labelTemplate>\n    @if (label()) {\n        <span>{{ label() }}</span>\n    } @else {\n        <ng-content></ng-content>\n    }\n</ng-template>\n" }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputClick: [{ type: i0.Output, args: ["inputClick"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], labelSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelSize", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], radioValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "radioValue", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class RadioButtonDirective {