@nanahoshi/mona-ui 0.1.0 → 0.1.1

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

@@ -12,10 +12,10 @@ import { tap, fromEvent } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { cva } from 'class-variance-authority';
 
-const timeSelectorBaseVariants = cva(`
-        flex flex-col w-full h-full overflow-hidden
-        data-[invalid='true']:border data-[invalid='true']:border-error
-        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+const timeSelectorBaseVariants = cva(`
+        flex flex-col w-full h-full overflow-hidden
+        data-[invalid='true']:border data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
     `, {
     variants: {
         disabled: {
@@ -29,32 +29,32 @@ const timeSelectorBaseVariants = cva(`
         }
     }
 });
-const timeSelectorFooterVariants = cva(`
-        w-full flex items-center justify-end px-1 py-1 border-0 border-t border-input-border bg-accent
+const timeSelectorFooterVariants = cva(`
+        w-full flex items-center justify-end px-1 py-1 border-0 border-t border-input-border bg-accent
     `);
-const timeSelectorHeaderVariants = cva(`
-        flex bg-accent text-accent-foreground
-        border-b border-input-border
-        text-xs font-semibold uppercase
-        [&>div]:flex-1 [&>div]:py-2 [&>div]:text-center
+const timeSelectorHeaderVariants = cva(`
+        flex bg-accent text-accent-foreground
+        border-b border-input-border
+        text-xs font-semibold uppercase
+        [&>div]:flex-1 [&>div]:py-2 [&>div]:text-center
     `);
-const timeSelectorInfoContainerVariants = cva(`
-        flex items-center justify-between
-        px-2 py-1 border-b border-input-border/40
-        [&>span]:text-xs [&>span]:font-medium [&>span]:select-none
+const timeSelectorInfoContainerVariants = cva(`
+        flex items-center justify-between
+        px-2 py-1 border-b border-input-border/40
+        [&>span]:text-xs [&>span]:font-medium [&>span]:select-none
     `);
-const timeSelectorListContainerVariants = cva(`
-        flex flex-row w-full relative overflow-hidden
+const timeSelectorListContainerVariants = cva(`
+        flex flex-row w-full relative overflow-hidden
     `);
-const timeSelectorListVariants = cva(`
-        flex-1 overflow-y-auto h-full
-        scrollbar-hide scroll-smooth
-        snap-y snap-mandatory
-        scrollbar-width:none
-        select-none outline-none
-        [&::-webkit-scrollbar]:hidden
-        focus-visible:bg-accent
-        focus-within:bg-accent
+const timeSelectorListVariants = cva(`
+        flex-1 overflow-y-auto h-full
+        scrollbar-hide scroll-smooth
+        snap-y snap-mandatory
+        scrollbar-width:none
+        select-none outline-none
+        [&::-webkit-scrollbar]:hidden
+        focus-visible:bg-accent
+        focus-within:bg-accent
     `, {
     variants: {
         size: {
@@ -64,9 +64,9 @@ const timeSelectorListVariants = cva(`
         }
     }
 });
-const timeSelectorListItemVariants = cva(`
-        flex items-center justify-center cursor-pointer
-        snap-center relative z-10
+const timeSelectorListItemVariants = cva(`
+        flex items-center justify-center cursor-pointer
+        snap-center relative z-10
     `, {
     variants: {
         selected: {

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

@@ -9,10 +9,10 @@ import { take, takeUntil, Subscription, fromEvent, tap } from 'rxjs';
 import { cva } from 'class-variance-authority';
 import { twMerge } from 'tailwind-merge';
 
-const tooltipBaseVariants = cva(`
-        flex items-center justify-center relative
-        bg-background border border-border
-        shadow-[0_2px_8px_rgba(0,0,0,0.12)] z-1
+const tooltipBaseVariants = cva(`
+        flex 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: {
@@ -24,33 +24,33 @@ const tooltipBaseVariants = cva(`
         }
     }
 });
-const tooltipArrowVariants = cva(`
-        absolute w-3 h-3 box-border
-        pointer-events-none
-        transform-center rotate-45
-        z-0 bg-background
-
-        border border-border
-
-        data-[position="top"]:-bottom-1.5
-        data-[position="top"]:border-t-0
-        data-[position="top"]:border-l-0
-        data-[position="top"]:[clip-path:inset(1px_0_0_1px)]
-
-        data-[position="bottom"]:-top-1.5
-        data-[position="bottom"]:border-b-0
-        data-[position="bottom"]:border-r-0
-        data-[position="bottom"]:[clip-path:inset(0_1px_1px_0)]
-
-        data-[position="left"]:-right-1.5
-        data-[position="left"]:border-l-0
-        data-[position="left"]:border-b-0
-        data-[position="left"]:[clip-path:inset(0_0_1px_1px)]
-
-        data-[position="right"]:-left-1.5
-        data-[position="right"]:border-r-0
-        data-[position="right"]:border-t-0
-        data-[position="right"]:[clip-path:inset(1px_1px_0_0)]
+const tooltipArrowVariants = cva(`
+        absolute w-3 h-3 box-border
+        pointer-events-none
+        transform-center rotate-45
+        z-0 bg-background text-foreground
+
+        border border-border
+
+        data-[position="top"]:-bottom-1.5
+        data-[position="top"]:border-t-0
+        data-[position="top"]:border-l-0
+        data-[position="top"]:[clip-path:inset(1px_0_0_1px)]
+
+        data-[position="bottom"]:-top-1.5
+        data-[position="bottom"]:border-b-0
+        data-[position="bottom"]:border-r-0
+        data-[position="bottom"]:[clip-path:inset(0_1px_1px_0)]
+
+        data-[position="left"]:-right-1.5
+        data-[position="left"]:border-l-0
+        data-[position="left"]:border-b-0
+        data-[position="left"]:[clip-path:inset(0_0_1px_1px)]
+
+        data-[position="right"]:-left-1.5
+        data-[position="right"]:border-r-0
+        data-[position="right"]:border-t-0
+        data-[position="right"]:[clip-path:inset(1px_1px_0_0)]
     `);
 
 const tooltipBaseThemeVariants = (theme) => {
@@ -367,11 +367,11 @@ class TooltipComponent {
         return composite;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: TooltipComponent, isStandalone: true, selector: "mona-tooltip", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", 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 }, showDelay: { classPropertyName: "showDelay", publicName: "showDelay", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { hidden: "hidden", shown: "shown" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\r\n    <div role=\"tooltip\" [id]=\"tooltipId\" [class]=\"baseClasses()\">\r\n        <div>\r\n            <ng-content></ng-content>\r\n        </div>\r\n        <div [class]=\"arrowClasses()\" [attr.data-position]=\"currentArrowPosition()\"></div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:contents}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: TooltipComponent, isStandalone: true, selector: "mona-tooltip", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", 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 }, showDelay: { classPropertyName: "showDelay", publicName: "showDelay", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { hidden: "hidden", shown: "shown" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\n    <div role=\"tooltip\" [id]=\"tooltipId\" [class]=\"baseClasses()\">\n        <div>\n            <ng-content></ng-content>\n        </div>\n        <div [class]=\"arrowClasses()\" [attr.data-position]=\"currentArrowPosition()\"></div>\n    </div>\n</ng-template>\n", styles: [":host{display:contents}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-tooltip", template: "<ng-template>\r\n    <div role=\"tooltip\" [id]=\"tooltipId\" [class]=\"baseClasses()\">\r\n        <div>\r\n            <ng-content></ng-content>\r\n        </div>\r\n        <div [class]=\"arrowClasses()\" [attr.data-position]=\"currentArrowPosition()\"></div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:contents}\n"] }]
+            args: [{ selector: "mona-tooltip", template: "<ng-template>\n    <div role=\"tooltip\" [id]=\"tooltipId\" [class]=\"baseClasses()\">\n        <div>\n            <ng-content></ng-content>\n        </div>\n        <div [class]=\"arrowClasses()\" [attr.data-position]=\"currentArrowPosition()\"></div>\n    </div>\n</ng-template>\n", styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { templateRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hidden: [{ type: i0.Output, args: ["hidden"] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDelay", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDelay", required: false }] }], shown: [{ type: i0.Output, args: ["shown"] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: true }] }] } });
 
 class TooltipDirective {
@@ -676,30 +676,30 @@ class TooltipTemplateComponent {
     }
     #themeService;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TooltipTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: TooltipTemplateComponent, isStandalone: true, selector: "ng-component", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, tooltipId: { classPropertyName: "tooltipId", publicName: "tooltipId", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `
-        <ng-template>
-            <div role="tooltip" [id]="tooltipId()" [class]="baseClasses()">
-                <div>
-                    {{ content() }}
-                </div>
-                <div [class]="arrowClasses()" [attr.data-position]="currentArrowPosition()"></div>
-            </div>
-        </ng-template>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: TooltipTemplateComponent, isStandalone: true, selector: "ng-component", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, tooltipId: { classPropertyName: "tooltipId", publicName: "tooltipId", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `
+        <ng-template>
+            <div role="tooltip" [id]="tooltipId()" [class]="baseClasses()">
+                <div>
+                    {{ content() }}
+                </div>
+                <div [class]="arrowClasses()" [attr.data-position]="currentArrowPosition()"></div>
+            </div>
+        </ng-template>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TooltipTemplateComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.Eager,
-                    template: `
-        <ng-template>
-            <div role="tooltip" [id]="tooltipId()" [class]="baseClasses()">
-                <div>
-                    {{ content() }}
-                </div>
-                <div [class]="arrowClasses()" [attr.data-position]="currentArrowPosition()"></div>
-            </div>
-        </ng-template>
+                    template: `
+        <ng-template>
+            <div role="tooltip" [id]="tooltipId()" [class]="baseClasses()">
+                <div>
+                    {{ content() }}
+                </div>
+                <div [class]="arrowClasses()" [attr.data-position]="currentArrowPosition()"></div>
+            </div>
+        </ng-template>
     `
                 }]
         }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], tooltipId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipId", required: false }] }], templateRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });

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

@@ -188,11 +188,11 @@ class TreeViewComponent {
         this.treeService.blur$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(e => this.blur.emit(e));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TreeViewComponent, isStandalone: true, selector: "mona-tree-view", inputs: { animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, parentIdField: { classPropertyName: "parentIdField", publicName: "parentIdField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur", focus: "focus", nodeClick: "nodeClick" }, providers: [TreeService], queries: [{ propertyName: "nodeTemplate", first: true, predicate: TreeViewNodeTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (treeService.filterableOptions().enabled) {\r\n    <div role=\"search\" [attr.aria-label]=\"filterAriaLabel()\">\r\n        <mona-filter-input\r\n            [filter]=\"treeService.filterText()\"\r\n            [debounce]=\"treeService.filterableOptions().debounce\"\r\n            [placeholder]=\"treeService.filterPlaceholder()\"\r\n            (filterChange)=\"onFilterChange($event)\"></mona-filter-input>\r\n    </div>\r\n}\r\n<div class=\"flex-1 overflow-auto\">\r\n    <mona-tree [ariaLabel]=\"ariaLabel()\">\r\n        @if (nodeTemplate()) {\r\n            <ng-template monaTreeNodeTemplate let-dataItem let-element=\"element\">\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: dataItem, element }\"></ng-container>\r\n            </ng-template>\r\n        }\r\n    </mona-tree>\r\n</div>\r\n", dependencies: [{ kind: "component", type: FilterInputComponent, selector: "mona-filter-input", inputs: ["debounce", "filter", "placeholder", "size"], outputs: ["filterChange", "inputBlur", "inputFocus"] }, { kind: "component", type: TreeComponent, selector: "mona-tree", inputs: ["ariaLabel", "data"] }, { kind: "directive", type: TreeNodeTemplateDirective, selector: "ng-template[monaTreeNodeTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TreeViewComponent, isStandalone: true, selector: "mona-tree-view", inputs: { animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, parentIdField: { classPropertyName: "parentIdField", publicName: "parentIdField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur", focus: "focus", nodeClick: "nodeClick" }, providers: [TreeService], queries: [{ propertyName: "nodeTemplate", first: true, predicate: TreeViewNodeTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (treeService.filterableOptions().enabled) {\n    <div role=\"search\" [attr.aria-label]=\"filterAriaLabel()\">\n        <mona-filter-input\n            [filter]=\"treeService.filterText()\"\n            [debounce]=\"treeService.filterableOptions().debounce\"\n            [placeholder]=\"treeService.filterPlaceholder()\"\n            (filterChange)=\"onFilterChange($event)\"></mona-filter-input>\n    </div>\n}\n<div class=\"flex-1 overflow-auto\">\n    <mona-tree [ariaLabel]=\"ariaLabel()\">\n        @if (nodeTemplate()) {\n            <ng-template monaTreeNodeTemplate let-dataItem let-element=\"element\">\n                <ng-container\n                    [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n                    [ngTemplateOutletContext]=\"{ $implicit: dataItem, element }\"></ng-container>\n            </ng-template>\n        }\n    </mona-tree>\n</div>\n", dependencies: [{ kind: "component", type: FilterInputComponent, selector: "mona-filter-input", inputs: ["debounce", "filter", "placeholder", "size"], outputs: ["filterChange", "inputBlur", "inputFocus"] }, { kind: "component", type: TreeComponent, selector: "mona-tree", inputs: ["ariaLabel", "data"] }, { kind: "directive", type: TreeNodeTemplateDirective, selector: "ng-template[monaTreeNodeTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-tree-view", imports: [FilterInputComponent, TreeComponent, TreeNodeTemplateDirective, NgTemplateOutlet], providers: [TreeService], template: "@if (treeService.filterableOptions().enabled) {\r\n    <div role=\"search\" [attr.aria-label]=\"filterAriaLabel()\">\r\n        <mona-filter-input\r\n            [filter]=\"treeService.filterText()\"\r\n            [debounce]=\"treeService.filterableOptions().debounce\"\r\n            [placeholder]=\"treeService.filterPlaceholder()\"\r\n            (filterChange)=\"onFilterChange($event)\"></mona-filter-input>\r\n    </div>\r\n}\r\n<div class=\"flex-1 overflow-auto\">\r\n    <mona-tree [ariaLabel]=\"ariaLabel()\">\r\n        @if (nodeTemplate()) {\r\n            <ng-template monaTreeNodeTemplate let-dataItem let-element=\"element\">\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: dataItem, element }\"></ng-container>\r\n            </ng-template>\r\n        }\r\n    </mona-tree>\r\n</div>\r\n" }]
+            args: [{ selector: "mona-tree-view", imports: [FilterInputComponent, TreeComponent, TreeNodeTemplateDirective, NgTemplateOutlet], providers: [TreeService], template: "@if (treeService.filterableOptions().enabled) {\n    <div role=\"search\" [attr.aria-label]=\"filterAriaLabel()\">\n        <mona-filter-input\n            [filter]=\"treeService.filterText()\"\n            [debounce]=\"treeService.filterableOptions().debounce\"\n            [placeholder]=\"treeService.filterPlaceholder()\"\n            (filterChange)=\"onFilterChange($event)\"></mona-filter-input>\n    </div>\n}\n<div class=\"flex-1 overflow-auto\">\n    <mona-tree [ariaLabel]=\"ariaLabel()\">\n        @if (nodeTemplate()) {\n            <ng-template monaTreeNodeTemplate let-dataItem let-element=\"element\">\n                <ng-container\n                    [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n                    [ngTemplateOutletContext]=\"{ $implicit: dataItem, element }\"></ng-container>\n            </ng-template>\n        }\n    </mona-tree>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { nodeTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TreeViewNodeTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], children: [{ type: i0.Input, args: [{ isSignal: true, alias: "children", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], hasChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildren", required: false }] }], idField: [{ type: i0.Input, args: [{ isSignal: true, alias: "idField", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], parentIdField: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentIdField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }] } });
 
 class TreeViewCheckableDirective {

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

@@ -432,10 +432,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: true }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], windowRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "windowRef", required: true }] }] } });
 
-const windowBaseVariants = cva(`
-        flex flex-col
-        bg-background
-        w-full h-full
+const windowBaseVariants = cva(`
+        flex flex-col w-full h-full
+        bg-background text-foreground
     `, {
     variants: {
         rounded: {
@@ -449,11 +448,11 @@ const windowBaseVariants = cva(`
         rounded: "medium"
     }
 });
-const windowContentContainerVariants = cva(`
-        flex flex-col
-        relative w-full h-full
-        border border-border
-        shadow-sm
+const windowContentContainerVariants = cva(`
+        flex flex-col
+        relative w-full h-full
+        border border-border
+        shadow-sm
     `, {
     variants: {
         rounded: {
@@ -464,11 +463,11 @@ const windowContentContainerVariants = cva(`
         }
     }
 });
-const windowContentVariants = cva(`
-        flex-1 overflow-auto
+const windowContentVariants = cva(`
+        flex-1 overflow-auto
     `);
-const windowResizerVariants = cva(`
-        absolute flex
+const windowResizerVariants = cva(`
+        absolute flex
     `, {
     variants: {
         position: {
@@ -483,13 +482,13 @@ const windowResizerVariants = cva(`
         }
     }
 });
-const windowTitleBarActionVariants = cva(`
-        flex items-center space-evenly
+const windowTitleBarActionVariants = cva(`
+        flex items-center space-evenly
     `);
-const windowTitleBarVariants = cva(`
-        flex items-center justify-start
-        px-2 py-1 text-sm overflow-hidden
-        border-b border-border
+const windowTitleBarVariants = cva(`
+        flex items-center justify-start
+        px-2 py-1 text-sm overflow-hidden
+        border-b border-border
     `, {
     variants: {
         look: {
@@ -504,14 +503,14 @@ const windowTitleBarVariants = cva(`
         }
     }
 });
-const windowTitleContainerVariants = cva(`
-        flex items-center flex-1
-        h-full cursor-default select-none
-        overflow-hidden text-ellipsis
+const windowTitleContainerVariants = cva(`
+        flex items-center flex-1
+        h-full cursor-default select-none
+        overflow-hidden text-ellipsis
     `);
-const windowTitleVariants = cva(`
-        font-semibold
-        overflow-hidden text-ellipsis whitespace-nowrap
+const windowTitleVariants = cva(`
+        font-semibold
+        overflow-hidden text-ellipsis whitespace-nowrap
     `, {
     variants: {
         look: {
@@ -789,7 +788,7 @@ class WindowContentComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: WindowContentComponent, isStandalone: true, selector: "mona-window-content", host: { attributes: { "role": "dialog" }, properties: { "class": "baseClass()", "attr.aria-labelledby": "headerId", "attr.aria-modal": "windowData.modal ?? false" } }, viewQueries: [{ propertyName: "componentAnchor", first: true, predicate: ["componentAnchor"], descendants: true, read: ViewContainerRef, isSignal: true }], hostDirectives: [{ directive: i1.CdkTrapFocus }], ngImport: i0, template: "<div [class]=\"contentContainerClass()\">\r\n    <div\r\n        [class]=\"titleBarClass()\"\r\n        monaWindowDragHandler\r\n        (dblclick)=\"onMaximizeClick()\"\r\n        [draggable]=\"windowData.draggable\"\r\n        [windowRef]=\"windowData.windowReference\"\r\n        [attr.tabindex]=\"windowData.draggable ? 0 : null\"\r\n        [attr.aria-label]=\"windowData.draggable ? 'Move window. Use arrow keys to move.' : null\">\r\n        <div [id]=\"headerId\" [class]=\"titleContainerClass()\">\r\n            @if (windowData.titleTemplate) {\r\n                <ng-container [ngTemplateOutlet]=\"windowData.titleTemplate\"></ng-container>\r\n            } @else {\r\n                <span [class]=\"titleClass()\">{{ windowData.title ?? \"\" }}</span>\r\n            }\r\n        </div>\r\n        <div [class]=\"titleBarActionClass()\">\r\n            @if (windowData.actionTemplate) {\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"windowData.actionTemplate\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: windowData.windowReference.windowRef }\">\r\n                </ng-container>\r\n            }\r\n            @let maximizeTitle = maximized() || minimized() ? \"Restore\" : \"Maximize\";\r\n            @if (windowData.minimizable && !minimized()) {\r\n                <button\r\n                    monaButton\r\n                    look=\"ghost\"\r\n                    size=\"small\"\r\n                    type=\"button\"\r\n                    [iconOnly]=\"true\"\r\n                    [rounded]=\"windowData.rounded\"\r\n                    [title]=\"'Minimize'\"\r\n                    aria-label=\"Minimize\"\r\n                    (dblclick)=\"$event.stopPropagation()\"\r\n                    (click)=\"onMinimizeClick()\">\r\n                    <svg lucideMinus [size]=\"16\" aria-hidden=\"true\"></svg>\r\n                </button>\r\n            }\r\n            @if (windowData.maximizable) {\r\n                <button\r\n                    monaButton\r\n                    look=\"ghost\"\r\n                    size=\"small\"\r\n                    type=\"button\"\r\n                    [iconOnly]=\"true\"\r\n                    [rounded]=\"windowData.rounded\"\r\n                    [title]=\"maximizeTitle\"\r\n                    [attr.aria-label]=\"maximizeTitle\"\r\n                    (dblclick)=\"$event.stopPropagation()\"\r\n                    (click)=\"onMaximizeClick()\">\r\n                    <svg [lucideIcon]=\"maximizeIcon()\" [size]=\"16\" aria-hidden=\"true\"></svg>\r\n                </button>\r\n            }\r\n            @if (windowData.closable) {\r\n                <button\r\n                    monaButton\r\n                    look=\"ghost\"\r\n                    size=\"small\"\r\n                    type=\"button\"\r\n                    [iconOnly]=\"true\"\r\n                    [rounded]=\"windowData.rounded\"\r\n                    title=\"Close\"\r\n                    aria-label=\"Close window\"\r\n                    (dblclick)=\"$event.stopPropagation()\"\r\n                    (click)=\"onCloseClick($event)\">\r\n                    <svg lucideX [size]=\"16\" aria-hidden=\"true\"></svg>\r\n                </button>\r\n            }\r\n        </div>\r\n    </div>\r\n    @if (!minimized()) {\r\n        <div [class]=\"contentClass()\">\r\n            @switch (contentType()) {\r\n                @case (\"template\") {\r\n                    <ng-container [ngTemplateOutlet]=\"contentTemplate()!\"></ng-container>\r\n                }\r\n                @case (\"component\") {\r\n                    <ng-container #componentAnchor></ng-container>\r\n                }\r\n            }\r\n        </div>\r\n        @if (windowData.footerTemplate) {\r\n            <div>\r\n                <ng-container [ngTemplateOutlet]=\"windowData.footerTemplate\"></ng-container>\r\n            </div>\r\n        }\r\n    }\r\n    @if (windowData.resizable && !maximized()) {\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"north\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the top. Use arrow keys to resize.\"\r\n            [class]=\"'north' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"south\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the bottom. Use arrow keys to resize.\"\r\n            [class]=\"'south' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"east\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the right. Use arrow keys to resize.\"\r\n            [class]=\"'east' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"west\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the left. Use arrow keys to resize.\"\r\n            [class]=\"'west' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"northeast\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the top-right corner. Use arrow keys to resize.\"\r\n            [class]=\"'northeast' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"northwest\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the top-left corner. Use arrow keys to resize.\"\r\n            [class]=\"'northwest' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"southeast\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the bottom-right corner. Use arrow keys to resize.\"\r\n            [class]=\"'southeast' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"southwest\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the bottom-left corner. Use arrow keys to resize.\"\r\n            [class]=\"'southwest' | monaResizePosition\"></div>\r\n    }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: WindowDragHandlerDirective, selector: "div[monaWindowDragHandler]", inputs: ["draggable", "windowRef"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: WindowResizeHandlerDirective, selector: "div[monaWindowResizeHandler]", inputs: ["direction", "maxHeight", "maxWidth", "minHeight", "minWidth", "windowRef"] }, { kind: "component", type: LucideMinus, selector: "svg[lucideMinus]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "pipe", type: ResizePositionPipe, name: "monaResizePosition" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: WindowContentComponent, isStandalone: true, selector: "mona-window-content", host: { attributes: { "role": "dialog" }, properties: { "class": "baseClass()", "attr.aria-labelledby": "headerId", "attr.aria-modal": "windowData.modal ?? false" } }, viewQueries: [{ propertyName: "componentAnchor", first: true, predicate: ["componentAnchor"], descendants: true, read: ViewContainerRef, isSignal: true }], hostDirectives: [{ directive: i1.CdkTrapFocus }], ngImport: i0, template: "<div [class]=\"contentContainerClass()\">\n    <div\n        [class]=\"titleBarClass()\"\n        monaWindowDragHandler\n        (dblclick)=\"onMaximizeClick()\"\n        [draggable]=\"windowData.draggable\"\n        [windowRef]=\"windowData.windowReference\"\n        [attr.tabindex]=\"windowData.draggable ? 0 : null\"\n        [attr.aria-label]=\"windowData.draggable ? 'Move window. Use arrow keys to move.' : null\">\n        <div [id]=\"headerId\" [class]=\"titleContainerClass()\">\n            @if (windowData.titleTemplate) {\n                <ng-container [ngTemplateOutlet]=\"windowData.titleTemplate\"></ng-container>\n            } @else {\n                <span [class]=\"titleClass()\">{{ windowData.title ?? \"\" }}</span>\n            }\n        </div>\n        <div [class]=\"titleBarActionClass()\">\n            @if (windowData.actionTemplate) {\n                <ng-container\n                    [ngTemplateOutlet]=\"windowData.actionTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: windowData.windowReference.windowRef }\">\n                </ng-container>\n            }\n            @let maximizeTitle = maximized() || minimized() ? \"Restore\" : \"Maximize\";\n            @if (windowData.minimizable && !minimized()) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    type=\"button\"\n                    [iconOnly]=\"true\"\n                    [rounded]=\"windowData.rounded\"\n                    [title]=\"'Minimize'\"\n                    aria-label=\"Minimize\"\n                    (dblclick)=\"$event.stopPropagation()\"\n                    (click)=\"onMinimizeClick()\">\n                    <svg lucideMinus [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            }\n            @if (windowData.maximizable) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    type=\"button\"\n                    [iconOnly]=\"true\"\n                    [rounded]=\"windowData.rounded\"\n                    [title]=\"maximizeTitle\"\n                    [attr.aria-label]=\"maximizeTitle\"\n                    (dblclick)=\"$event.stopPropagation()\"\n                    (click)=\"onMaximizeClick()\">\n                    <svg [lucideIcon]=\"maximizeIcon()\" [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            }\n            @if (windowData.closable) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    type=\"button\"\n                    [iconOnly]=\"true\"\n                    [rounded]=\"windowData.rounded\"\n                    title=\"Close\"\n                    aria-label=\"Close window\"\n                    (dblclick)=\"$event.stopPropagation()\"\n                    (click)=\"onCloseClick($event)\">\n                    <svg lucideX [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            }\n        </div>\n    </div>\n    @if (!minimized()) {\n        <div [class]=\"contentClass()\">\n            @switch (contentType()) {\n                @case (\"template\") {\n                    <ng-container [ngTemplateOutlet]=\"contentTemplate()!\"></ng-container>\n                }\n                @case (\"component\") {\n                    <ng-container #componentAnchor></ng-container>\n                }\n            }\n        </div>\n        @if (windowData.footerTemplate) {\n            <div>\n                <ng-container [ngTemplateOutlet]=\"windowData.footerTemplate\"></ng-container>\n            </div>\n        }\n    }\n    @if (windowData.resizable && !maximized()) {\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"north\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the top. Use arrow keys to resize.\"\n            [class]=\"'north' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"south\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the bottom. Use arrow keys to resize.\"\n            [class]=\"'south' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"east\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the right. Use arrow keys to resize.\"\n            [class]=\"'east' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"west\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the left. Use arrow keys to resize.\"\n            [class]=\"'west' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"northeast\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the top-right corner. Use arrow keys to resize.\"\n            [class]=\"'northeast' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"northwest\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the top-left corner. Use arrow keys to resize.\"\n            [class]=\"'northwest' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"southeast\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the bottom-right corner. Use arrow keys to resize.\"\n            [class]=\"'southeast' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"southwest\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the bottom-left corner. Use arrow keys to resize.\"\n            [class]=\"'southwest' | monaResizePosition\"></div>\n    }\n</div>\n", dependencies: [{ kind: "directive", type: WindowDragHandlerDirective, selector: "div[monaWindowDragHandler]", inputs: ["draggable", "windowRef"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: WindowResizeHandlerDirective, selector: "div[monaWindowResizeHandler]", inputs: ["direction", "maxHeight", "maxWidth", "minHeight", "minWidth", "windowRef"] }, { kind: "component", type: LucideMinus, selector: "svg[lucideMinus]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "pipe", type: ResizePositionPipe, name: "monaResizePosition" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowContentComponent, decorators: [{
             type: Component,
@@ -807,7 +806,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.aria-labelledby]": "headerId",
                         "[attr.aria-modal]": "windowData.modal ?? false",
                         role: "dialog"
-                    }, hostDirectives: [CdkTrapFocus], template: "<div [class]=\"contentContainerClass()\">\r\n    <div\r\n        [class]=\"titleBarClass()\"\r\n        monaWindowDragHandler\r\n        (dblclick)=\"onMaximizeClick()\"\r\n        [draggable]=\"windowData.draggable\"\r\n        [windowRef]=\"windowData.windowReference\"\r\n        [attr.tabindex]=\"windowData.draggable ? 0 : null\"\r\n        [attr.aria-label]=\"windowData.draggable ? 'Move window. Use arrow keys to move.' : null\">\r\n        <div [id]=\"headerId\" [class]=\"titleContainerClass()\">\r\n            @if (windowData.titleTemplate) {\r\n                <ng-container [ngTemplateOutlet]=\"windowData.titleTemplate\"></ng-container>\r\n            } @else {\r\n                <span [class]=\"titleClass()\">{{ windowData.title ?? \"\" }}</span>\r\n            }\r\n        </div>\r\n        <div [class]=\"titleBarActionClass()\">\r\n            @if (windowData.actionTemplate) {\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"windowData.actionTemplate\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: windowData.windowReference.windowRef }\">\r\n                </ng-container>\r\n            }\r\n            @let maximizeTitle = maximized() || minimized() ? \"Restore\" : \"Maximize\";\r\n            @if (windowData.minimizable && !minimized()) {\r\n                <button\r\n                    monaButton\r\n                    look=\"ghost\"\r\n                    size=\"small\"\r\n                    type=\"button\"\r\n                    [iconOnly]=\"true\"\r\n                    [rounded]=\"windowData.rounded\"\r\n                    [title]=\"'Minimize'\"\r\n                    aria-label=\"Minimize\"\r\n                    (dblclick)=\"$event.stopPropagation()\"\r\n                    (click)=\"onMinimizeClick()\">\r\n                    <svg lucideMinus [size]=\"16\" aria-hidden=\"true\"></svg>\r\n                </button>\r\n            }\r\n            @if (windowData.maximizable) {\r\n                <button\r\n                    monaButton\r\n                    look=\"ghost\"\r\n                    size=\"small\"\r\n                    type=\"button\"\r\n                    [iconOnly]=\"true\"\r\n                    [rounded]=\"windowData.rounded\"\r\n                    [title]=\"maximizeTitle\"\r\n                    [attr.aria-label]=\"maximizeTitle\"\r\n                    (dblclick)=\"$event.stopPropagation()\"\r\n                    (click)=\"onMaximizeClick()\">\r\n                    <svg [lucideIcon]=\"maximizeIcon()\" [size]=\"16\" aria-hidden=\"true\"></svg>\r\n                </button>\r\n            }\r\n            @if (windowData.closable) {\r\n                <button\r\n                    monaButton\r\n                    look=\"ghost\"\r\n                    size=\"small\"\r\n                    type=\"button\"\r\n                    [iconOnly]=\"true\"\r\n                    [rounded]=\"windowData.rounded\"\r\n                    title=\"Close\"\r\n                    aria-label=\"Close window\"\r\n                    (dblclick)=\"$event.stopPropagation()\"\r\n                    (click)=\"onCloseClick($event)\">\r\n                    <svg lucideX [size]=\"16\" aria-hidden=\"true\"></svg>\r\n                </button>\r\n            }\r\n        </div>\r\n    </div>\r\n    @if (!minimized()) {\r\n        <div [class]=\"contentClass()\">\r\n            @switch (contentType()) {\r\n                @case (\"template\") {\r\n                    <ng-container [ngTemplateOutlet]=\"contentTemplate()!\"></ng-container>\r\n                }\r\n                @case (\"component\") {\r\n                    <ng-container #componentAnchor></ng-container>\r\n                }\r\n            }\r\n        </div>\r\n        @if (windowData.footerTemplate) {\r\n            <div>\r\n                <ng-container [ngTemplateOutlet]=\"windowData.footerTemplate\"></ng-container>\r\n            </div>\r\n        }\r\n    }\r\n    @if (windowData.resizable && !maximized()) {\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"north\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the top. Use arrow keys to resize.\"\r\n            [class]=\"'north' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"south\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the bottom. Use arrow keys to resize.\"\r\n            [class]=\"'south' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"east\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the right. Use arrow keys to resize.\"\r\n            [class]=\"'east' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"west\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the left. Use arrow keys to resize.\"\r\n            [class]=\"'west' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"northeast\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the top-right corner. Use arrow keys to resize.\"\r\n            [class]=\"'northeast' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"northwest\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the top-left corner. Use arrow keys to resize.\"\r\n            [class]=\"'northwest' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"southeast\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the bottom-right corner. Use arrow keys to resize.\"\r\n            [class]=\"'southeast' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"southwest\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the bottom-left corner. Use arrow keys to resize.\"\r\n            [class]=\"'southwest' | monaResizePosition\"></div>\r\n    }\r\n</div>\r\n" }]
+                    }, hostDirectives: [CdkTrapFocus], template: "<div [class]=\"contentContainerClass()\">\n    <div\n        [class]=\"titleBarClass()\"\n        monaWindowDragHandler\n        (dblclick)=\"onMaximizeClick()\"\n        [draggable]=\"windowData.draggable\"\n        [windowRef]=\"windowData.windowReference\"\n        [attr.tabindex]=\"windowData.draggable ? 0 : null\"\n        [attr.aria-label]=\"windowData.draggable ? 'Move window. Use arrow keys to move.' : null\">\n        <div [id]=\"headerId\" [class]=\"titleContainerClass()\">\n            @if (windowData.titleTemplate) {\n                <ng-container [ngTemplateOutlet]=\"windowData.titleTemplate\"></ng-container>\n            } @else {\n                <span [class]=\"titleClass()\">{{ windowData.title ?? \"\" }}</span>\n            }\n        </div>\n        <div [class]=\"titleBarActionClass()\">\n            @if (windowData.actionTemplate) {\n                <ng-container\n                    [ngTemplateOutlet]=\"windowData.actionTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: windowData.windowReference.windowRef }\">\n                </ng-container>\n            }\n            @let maximizeTitle = maximized() || minimized() ? \"Restore\" : \"Maximize\";\n            @if (windowData.minimizable && !minimized()) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    type=\"button\"\n                    [iconOnly]=\"true\"\n                    [rounded]=\"windowData.rounded\"\n                    [title]=\"'Minimize'\"\n                    aria-label=\"Minimize\"\n                    (dblclick)=\"$event.stopPropagation()\"\n                    (click)=\"onMinimizeClick()\">\n                    <svg lucideMinus [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            }\n            @if (windowData.maximizable) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    type=\"button\"\n                    [iconOnly]=\"true\"\n                    [rounded]=\"windowData.rounded\"\n                    [title]=\"maximizeTitle\"\n                    [attr.aria-label]=\"maximizeTitle\"\n                    (dblclick)=\"$event.stopPropagation()\"\n                    (click)=\"onMaximizeClick()\">\n                    <svg [lucideIcon]=\"maximizeIcon()\" [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            }\n            @if (windowData.closable) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    type=\"button\"\n                    [iconOnly]=\"true\"\n                    [rounded]=\"windowData.rounded\"\n                    title=\"Close\"\n                    aria-label=\"Close window\"\n                    (dblclick)=\"$event.stopPropagation()\"\n                    (click)=\"onCloseClick($event)\">\n                    <svg lucideX [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            }\n        </div>\n    </div>\n    @if (!minimized()) {\n        <div [class]=\"contentClass()\">\n            @switch (contentType()) {\n                @case (\"template\") {\n                    <ng-container [ngTemplateOutlet]=\"contentTemplate()!\"></ng-container>\n                }\n                @case (\"component\") {\n                    <ng-container #componentAnchor></ng-container>\n                }\n            }\n        </div>\n        @if (windowData.footerTemplate) {\n            <div>\n                <ng-container [ngTemplateOutlet]=\"windowData.footerTemplate\"></ng-container>\n            </div>\n        }\n    }\n    @if (windowData.resizable && !maximized()) {\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"north\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the top. Use arrow keys to resize.\"\n            [class]=\"'north' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"south\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the bottom. Use arrow keys to resize.\"\n            [class]=\"'south' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"east\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the right. Use arrow keys to resize.\"\n            [class]=\"'east' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"west\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the left. Use arrow keys to resize.\"\n            [class]=\"'west' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"northeast\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the top-right corner. Use arrow keys to resize.\"\n            [class]=\"'northeast' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"northwest\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the top-left corner. Use arrow keys to resize.\"\n            [class]=\"'northwest' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"southeast\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the bottom-right corner. Use arrow keys to resize.\"\n            [class]=\"'southeast' | monaResizePosition\"></div>\n        <div\n            monaWindowResizeHandler\n            [minWidth]=\"windowData.minWidth\"\n            [minHeight]=\"windowData.minHeight\"\n            [maxWidth]=\"windowData.maxWidth\"\n            [maxHeight]=\"windowData.maxHeight\"\n            [windowRef]=\"windowData.windowReference\"\n            direction=\"southwest\"\n            tabindex=\"0\"\n            aria-label=\"Resize window from the bottom-left corner. Use arrow keys to resize.\"\n            [class]=\"'southwest' | monaResizePosition\"></div>\n    }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { componentAnchor: [{ type: i0.ViewChild, args: ["componentAnchor", { ...{
                             read: ViewContainerRef
                         }, isSignal: true }] }] } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {
@@ -19,7 +19,6 @@
     "@angular/platform-browser": ">=22.0.0 <24.0.0",
     "@angular/platform-browser-dynamic": ">=22.0.0 <24.0.0",
     "@angular/router": ">=22.0.0 <24.0.0",
-    "@fortawesome/angular-fontawesome": "^5.0.0",
     "@tiptap/core": "^3.26.1",
     "@tiptap/extension-color": "^3.26.1",
     "@tiptap/extension-font-family": "^3.26.1",
@@ -42,8 +41,6 @@
     "rxjs": "^7.8.2"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^7.2.0",
-    "@fortawesome/free-solid-svg-icons": "^7.2.0",
     "@lucide/angular": "^1.21.0",
     "@mirei/ts-collections": "^17.5.6",
     "class-variance-authority": "^0.7.1",
@@ -123,6 +120,10 @@
       "types": "./types/nanahoshi-mona-ui-contextmenu.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-contextmenu.mjs"
     },
+    "./date-input": {
+      "types": "./types/nanahoshi-mona-ui-date-input.d.ts",
+      "default": "./fesm2022/nanahoshi-mona-ui-date-input.mjs"
+    },
     "./date-picker": {
       "types": "./types/nanahoshi-mona-ui-date-picker.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-date-picker.mjs"
@@ -167,6 +168,26 @@
       "types": "./types/nanahoshi-mona-ui-grid.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-grid.mjs"
     },
+    "./internal": {
+      "types": "./types/nanahoshi-mona-ui-internal.d.ts",
+      "default": "./fesm2022/nanahoshi-mona-ui-internal.mjs"
+    },
+    "./internal/filter-input": {
+      "types": "./types/nanahoshi-mona-ui-internal-filter-input.d.ts",
+      "default": "./fesm2022/nanahoshi-mona-ui-internal-filter-input.mjs"
+    },
+    "./internal/indicator-icon": {
+      "types": "./types/nanahoshi-mona-ui-internal-indicator-icon.d.ts",
+      "default": "./fesm2022/nanahoshi-mona-ui-internal-indicator-icon.mjs"
+    },
+    "./internal/list": {
+      "types": "./types/nanahoshi-mona-ui-internal-list.d.ts",
+      "default": "./fesm2022/nanahoshi-mona-ui-internal-list.mjs"
+    },
+    "./internal/tree": {
+      "types": "./types/nanahoshi-mona-ui-internal-tree.d.ts",
+      "default": "./fesm2022/nanahoshi-mona-ui-internal-tree.mjs"
+    },
     "./list": {
       "types": "./types/nanahoshi-mona-ui-list.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-list.mjs"
@@ -219,6 +240,10 @@
       "types": "./types/nanahoshi-mona-ui-progress-bar.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-progress-bar.mjs"
     },
+    "./query": {
+      "types": "./types/nanahoshi-mona-ui-query.d.ts",
+      "default": "./fesm2022/nanahoshi-mona-ui-query.mjs"
+    },
     "./radio-button": {
       "types": "./types/nanahoshi-mona-ui-radio-button.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-radio-button.mjs"
@@ -286,4 +311,4 @@
   },
   "sideEffects": false,
   "type": "module"
-}
+}

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

@@ -1,8 +1,8 @@
 import * as _angular_core from '@angular/core';
 import * as class_variance_authority_types from 'class-variance-authority/types';
-import { VariantProps } from 'class-variance-authority';
 import { VariantInputs } from '@nanahoshi/mona-ui/internal';
 import { ThemeStyle } from '@nanahoshi/mona-ui/theme';
+import { VariantProps } from 'class-variance-authority';
 import { Subject } from 'rxjs';
 
 declare const buttonThemeVariants: (theme: ThemeStyle) => (props?: ({
@@ -19,6 +19,7 @@ type ButtonVariantsInput = VariantInputs<ButtonVariantProps>;
 
 declare class ButtonDirective implements ButtonVariantsInput {
     #private;
+    protected readonly displaysPressedState: _angular_core.Signal<boolean>;
     protected readonly effectiveDisabled: _angular_core.Signal<boolean>;
     protected readonly effectiveLook: _angular_core.Signal<"default" | "primary" | "success" | "error" | "warning" | "info" | "outline" | "secondary" | "ghost" | "link" | "clear" | null | undefined>;
     protected readonly effectiveRounded: _angular_core.Signal<"full" | "large" | "medium" | "none" | "small" | null | undefined>;
@@ -83,9 +84,9 @@ declare class ButtonDirective implements ButtonVariantsInput {
     /**
      * @description Enables toggle behavior — each click flips the `selected` state and `aria-pressed` is managed.
      * Must use `[toggleable]="true"` binding syntax, not bare attribute form.
-     * @default false
+     * @default undefined
      */
-    readonly toggleable: _angular_core.InputSignal<boolean>;
+    readonly toggleable: _angular_core.InputSignal<boolean | undefined>;
     /**
      * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
      * @default ""

package/types/nanahoshi-mona-ui-color-picker.d.ts

@@ -1,6 +1,5 @@
 import * as _angular_core from '@angular/core';
 import { OnInit, Signal, TemplateRef } from '@angular/core';
-import * as _fortawesome_fontawesome_common_types from '@fortawesome/fontawesome-common-types';
 import { FormValueControl } from '@angular/forms/signals';
 import { PaletteType } from '@nanahoshi/mona-ui/common';
 import * as class_variance_authority_types from 'class-variance-authority/types';
@@ -32,8 +31,6 @@ declare class ColorPickerComponent implements OnInit, ColorPickerVariantInput, F
     protected readonly colorClasses: Signal<string>;
     protected readonly expanded: Signal<boolean>;
     protected readonly invalidState: Signal<boolean>;
-    protected readonly noColorIcon: _fortawesome_fontawesome_common_types.IconDefinition;
-    protected readonly dropdownIcon: _fortawesome_fontawesome_common_types.IconDefinition;
     protected readonly popupId: string;
     protected readonly popupTemplate: Signal<TemplateRef<any>>;
     protected readonly valueTemplate: Signal<TemplateRef<any> | undefined>;

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

@@ -4,9 +4,9 @@ import { PopupCloseEvent, PopupRef } from '@nanahoshi/mona-ui/popup';
 import { ButtonVariantProps } from '@nanahoshi/mona-ui/button';
 import { PreventableEvent } from '@nanahoshi/mona-ui/common';
 import * as class_variance_authority_types from 'class-variance-authority/types';
-import { VariantProps } from 'class-variance-authority';
-import { ThemeStyle } from '@nanahoshi/mona-ui/theme';
 import { VariantInputs } from '@nanahoshi/mona-ui/internal';
+import { ThemeStyle } from '@nanahoshi/mona-ui/theme';
+import { VariantProps } from 'class-variance-authority';
 import { Observable } from 'rxjs';
 
 type ActionsLayout = "end" | "center" | "start" | "stretched";