@nanahoshi/mona-ui 0.1.0 → 0.2.0

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

@@ -2,14 +2,13 @@ import * as i0 from '@angular/core';
 import { Directive, inject, DestroyRef, DOCUMENT, ElementRef, NgZone, input, afterNextRender, Pipe, ApplicationRef, Injector, signal, ViewContainerRef, computed, viewChild, TemplateRef, createComponent, Component, forwardRef, Injectable, contentChild, output, model, effect, untracked } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { fromEvent, Subject, asapScheduler, map, take } from 'rxjs';
-import { createElementControlId, focusElement, setWindowStyles } from '@nanahoshi/mona-ui/internal';
+import { themeOverlaySurfaceClasses, createElementControlId, focusElement, setWindowStyles } from '@nanahoshi/mona-ui/internal';
 import { PopupDataInjectionToken, PopupCloseEvent, PopupCloseSource, PopupService } from '@nanahoshi/mona-ui/popup';
 import * as i1 from '@angular/cdk/a11y';
 import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { NgTemplateOutlet } from '@angular/common';
 import { LucideMinimize, LucideMaximize, LucideMinus, LucideDynamicIcon, LucideX } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { cva } from 'class-variance-authority';
 
 class WindowActionTemplateDirective {
@@ -432,10 +431,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 windowBaseThemeVariants = cva(`
+        flex h-full w-full flex-col
+        ${themeOverlaySurfaceClasses} text-foreground
     `, {
     variants: {
         rounded: {
@@ -449,11 +447,10 @@ const windowBaseVariants = cva(`
         rounded: "medium"
     }
 });
-const windowContentContainerVariants = cva(`
-        flex flex-col
-        relative w-full h-full
-        border border-border
-        shadow-sm
+const windowContentContainerThemeVariants = cva(`
+        relative flex h-full w-full flex-col
+        border border-border
+        shadow-(--shadow-overlay)
     `, {
     variants: {
         rounded: {
@@ -464,11 +461,12 @@ const windowContentContainerVariants = cva(`
         }
     }
 });
-const windowContentVariants = cva(`
-        flex-1 overflow-auto
+const windowContentThemeVariants = cva(`
+        flex-1 overflow-auto
+        [scrollbar-color:var(--color-scrollbar-thumb)_var(--color-scrollbar-track)] [scrollbar-width:thin]
     `);
-const windowResizerVariants = cva(`
-        absolute flex
+const windowResizerThemeVariants = cva(`
+        absolute flex
     `, {
     variants: {
         position: {
@@ -483,17 +481,17 @@ const windowResizerVariants = cva(`
         }
     }
 });
-const windowTitleBarActionVariants = cva(`
-        flex items-center space-evenly
+const windowTitleBarActionThemeVariants = cva(`
+        flex items-center justify-evenly
     `);
-const windowTitleBarVariants = cva(`
-        flex items-center justify-start
-        px-2 py-1 text-sm overflow-hidden
-        border-b border-border
+const windowTitleBarThemeVariants = cva(`
+        flex items-center justify-start
+        overflow-hidden px-2 py-1 text-sm
+        border-b border-border-subtle
     `, {
     variants: {
         look: {
-            default: "bg-secondary text-foreground",
+            default: "bg-surface-muted text-foreground",
             primary: "bg-primary text-primary-foreground"
         },
         rounded: {
@@ -504,14 +502,12 @@ const windowTitleBarVariants = cva(`
         }
     }
 });
-const windowTitleContainerVariants = cva(`
-        flex items-center flex-1
-        h-full cursor-default select-none
-        overflow-hidden text-ellipsis
+const windowTitleContainerThemeVariants = cva(`
+        flex h-full flex-1 items-center overflow-hidden
+        cursor-default select-none text-ellipsis
     `);
-const windowTitleVariants = cva(`
-        font-semibold
-        overflow-hidden text-ellipsis whitespace-nowrap
+const windowTitleThemeVariants = cva(`
+        overflow-hidden text-ellipsis whitespace-nowrap font-semibold
     `, {
     variants: {
         look: {
@@ -521,79 +517,12 @@ const windowTitleVariants = cva(`
     }
 });
 
-const windowBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return windowBaseVariants;
-        default:
-            return windowBaseVariants;
-    }
-};
-const windowContentContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return windowContentContainerVariants;
-        default:
-            return windowContentContainerVariants;
-    }
-};
-const windowContentThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return windowContentVariants;
-        default:
-            return windowContentVariants;
-    }
-};
-const windowResizerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return windowResizerVariants;
-        default:
-            return windowResizerVariants;
-    }
-};
-const windowTitleBarActionThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return windowTitleBarActionVariants;
-        default:
-            return windowTitleBarActionVariants;
-    }
-};
-const windowTitleBarThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return windowTitleBarVariants;
-        default:
-            return windowTitleBarVariants;
-    }
-};
-const windowTitleContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return windowTitleContainerVariants;
-        default:
-            return windowTitleContainerVariants;
-    }
-};
-const windowTitleThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return windowTitleVariants;
-        default:
-            return windowTitleVariants;
-    }
-};
-
 class ResizePositionPipe {
-    #themeService = inject(ThemeService);
     transform(position) {
         if (!position) {
             return null;
         }
-        const theme = this.#themeService.theme();
-        return windowResizerThemeVariants(theme)({ position });
+        return windowResizerThemeVariants({ position });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ResizePositionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: ResizePositionPipe, isStandalone: true, name: "monaResizePosition" }); }
@@ -612,7 +541,6 @@ class WindowContentComponent {
     #injector;
     #sizeBeforeMaximize;
     #sizeBeforeMinimize;
-    #themeService;
     #trapFocus;
     #viewContainerRef;
     constructor() {
@@ -624,25 +552,21 @@ class WindowContentComponent {
         ...(ngDevMode ? [{ debugName: "#sizeBeforeMaximize" }] : /* istanbul ignore next */ []));
         this.#sizeBeforeMinimize = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#sizeBeforeMinimize" }] : /* istanbul ignore next */ []));
-        this.#themeService = inject(ThemeService);
         this.#trapFocus = inject(CdkTrapFocus);
         this.#viewContainerRef = inject(ViewContainerRef);
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.windowData.rounded;
-            return windowBaseThemeVariants(theme)({ rounded });
+            return windowBaseThemeVariants({ rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.componentAnchor = viewChild.required("componentAnchor", { ...(ngDevMode ? { debugName: "componentAnchor" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
         this.contentClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return windowContentThemeVariants(theme)();
+            return windowContentThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
         this.contentContainerClass = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.windowData.rounded;
-            return windowContentContainerThemeVariants(theme)({ rounded });
+            return windowContentContainerThemeVariants({ rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contentContainerClass" }] : /* istanbul ignore next */ []));
         this.contentTemplate = computed(() => {
@@ -662,26 +586,22 @@ class WindowContentComponent {
         this.minimized = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "minimized" }] : /* istanbul ignore next */ []));
         this.titleBarActionClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return windowTitleBarActionThemeVariants(theme)();
+            return windowTitleBarActionThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "titleBarActionClass" }] : /* istanbul ignore next */ []));
         this.titleBarClass = computed(() => {
-            const theme = this.#themeService.theme();
             const look = this.windowData.look;
             const rounded = this.windowData.rounded;
-            return windowTitleBarThemeVariants(theme)({ look, rounded });
+            return windowTitleBarThemeVariants({ look, rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "titleBarClass" }] : /* istanbul ignore next */ []));
         this.titleClass = computed(() => {
-            const theme = this.#themeService.theme();
             const look = this.windowData.look;
-            return windowTitleThemeVariants(theme)({ look });
+            return windowTitleThemeVariants({ look });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "titleClass" }] : /* istanbul ignore next */ []));
         this.titleContainerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return windowTitleContainerThemeVariants(theme)();
+            return windowTitleContainerThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "titleContainerClass" }] : /* istanbul ignore next */ []));
         this.windowData = inject(PopupDataInjectionToken);
@@ -789,7 +709,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 +727,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/fieldset/package.json

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

package/filter/package.json

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

package/grid/package.json

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

package/internal/filter-input/package.json

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

package/internal/indicator-icon/package.json

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

package/internal/list/package.json

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

package/internal/package.json

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

package/internal/tree/package.json

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

package/list/package.json

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

package/list-box/package.json

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

package/list-view/package.json

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

package/menubar/package.json

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

package/multi-select/package.json

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

package/notification/package.json

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

package/numeric-text-box/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "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,11 +41,10 @@
     "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",
+    "culori": "^4.0.2",
     "luxon": "^3.7.2",
     "remixicon": "^4.9.1",
     "tailwind-merge": "^3.6.0",
@@ -123,6 +121,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 +169,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 +241,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 +312,4 @@
   },
   "sideEffects": false,
   "type": "module"
-}
+}

package/pager/package.json

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

package/placeholder/package.json

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

package/popover/package.json

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

package/popup/package.json

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

package/popup-menu/package.json

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

package/progress-bar/package.json

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

package/query/package.json

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

package/radio-button/package.json

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

package/scroll-view/package.json

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

package/slider/package.json

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

package/split-button/package.json

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

package/splitter/package.json

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

package/stepper/package.json

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

package/switch/package.json

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