@nanahoshi/mona-ui 0.1.0 → 0.2.0

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

@@ -2,12 +2,12 @@ import { FocusMonitor } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
 import { Directive, signal, computed, untracked, effect, Injectable, Pipe, inject, DestroyRef, input, ChangeDetectionStrategy, Component, DOCUMENT, NgZone, ElementRef, afterRenderEffect, contentChild, TemplateRef, afterNextRender } from '@angular/core';
 import { toObservable, toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { Subject, BehaviorSubject, ReplaySubject, switchMap, debounceTime, distinctUntilChanged, Observable, take, filter, tap, map, asapScheduler, fromEvent, takeWhile } from 'rxjs';
 import { PreventableEvent } from '@nanahoshi/mona-ui/common';
 import { ImmutableSet, List, from, sequenceEqual, contains, EnumerableSet, forEach } from '@mirei/ts-collections';
 import { v4 } from 'uuid';
 import { cva } from 'class-variance-authority';
+import { themeOverlaySurfaceClasses } from '@nanahoshi/mona-ui/internal';
 import { CdkDropList, CdkDrag, CdkDragPreview } from '@angular/cdk/drag-drop';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -1180,40 +1180,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             type: Injectable
         }], ctorParameters: () => [] });
 
-const subTreeListVariants = cva(`
-        list-none flex flex-col
+const subTreeListThemeVariants = cva(`
+        flex list-none flex-col
     `);
-const subTreeListItemVariants = cva(`
-        relative overflow-hidden outline-none
-        ps-6
+const subTreeListItemThemeVariants = cva(`
+        relative overflow-hidden outline-none
+        ps-6
     `);
-const treeBaseVariants = cva(`
-        relative outline-none select-none
-        text-md
+const treeBaseThemeVariants = cva(`
+        relative outline-none select-none
+        text-md
     `);
-const treeDropHintBaseVariants = cva(`
-        fixed z-1 w-10 h-0.5
-        bg-primary opacity-80
-        pointer-events-none
+const treeDropHintBaseThemeVariants = cva(`
+        fixed z-1 h-0.5 w-10
+        pointer-events-none
+        bg-primary opacity-80
     `);
-const treeDropHintIconVariants = cva(`
-        absolute flex items-center justify-center
-        -top-3.25 -left-3.5 text-xl
+const treeDropHintIconThemeVariants = cva(`
+        absolute flex items-center justify-center
+        -top-3.25 -left-3.5 text-xl
     `);
-const treeNodeBaseVariants = cva(`
-        px-2 py-1 cursor-default
+const treeNodeBaseThemeVariants = cva(`
+        cursor-default px-2 py-1 text-foreground
     `, {
     variants: {
         disabled: {
-            true: "pointer-events-none opacity-50 cursor-default",
+            true: "pointer-events-none cursor-default text-disabled-foreground",
             false: ""
         },
         highlighted: {
-            true: "inset-ring-1 inset-ring-gray-400/70",
+            true: "inset-ring-1 inset-ring-focus-indicator/35",
             false: ""
         },
         selected: {
-            true: "bg-primary text-primary-foreground",
+            true: "bg-active text-foreground",
             false: ""
         }
     },
@@ -1226,99 +1226,25 @@ const treeNodeBaseVariants = cva(`
         {
             disabled: false,
             selected: true,
-            class: "hover:bg-primary-hover"
+            class: "hover:bg-active"
         }
     ]
 });
-const treeNodeContainerVariants = cva(`
-        flex items-center
+const treeNodeContainerThemeVariants = cva(`
+        flex items-center
     `);
-const treeNodeDraggingVariants = cva(`
-        flex items-center justify-center
-        px-2! py-1! top-3!
-        bg-background! text-foreground!
-        border! border-border!
-        shadow-md
+const treeNodeDraggingThemeVariants = cva(`
+        flex items-center justify-center
+        top-3! px-2! py-1!
+        ${themeOverlaySurfaceClasses} text-foreground!
+        border! border-border!
+        shadow-(--shadow-overlay)
     `);
-const treeNodeExpanderVariants = cva(`
-        min-w-6 h-full -ms-6
-        flex items-center justify-center
-        cursor-pointer text-sm text-foreground
+const treeNodeExpanderThemeVariants = cva(`
+        -ms-6 flex h-full min-w-6 items-center justify-center
+        cursor-pointer text-sm text-foreground
     `);
 
-const subTreeListThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return subTreeListVariants;
-        default:
-            return subTreeListVariants;
-    }
-};
-const subTreeListItemThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return subTreeListItemVariants;
-        default:
-            return subTreeListItemVariants;
-    }
-};
-const treeBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return treeBaseVariants;
-        default:
-            return treeBaseVariants;
-    }
-};
-const treeDropHintBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return treeDropHintBaseVariants;
-        default:
-            return treeDropHintBaseVariants;
-    }
-};
-const treeDropHintIconThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return treeDropHintIconVariants;
-        default:
-            return treeDropHintIconVariants;
-    }
-};
-const treeNodeBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return treeNodeBaseVariants;
-        default:
-            return treeNodeBaseVariants;
-    }
-};
-const treeNodeContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return treeNodeContainerVariants;
-        default:
-            return treeNodeContainerVariants;
-    }
-};
-const treeNodeDraggingThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return treeNodeDraggingVariants;
-        default:
-            return treeNodeDraggingVariants;
-    }
-};
-const treeNodeExpanderThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return treeNodeExpanderVariants;
-        default:
-            return treeNodeExpanderVariants;
-    }
-};
-
 class NodeEvent extends PreventableEvent {
     #node;
     constructor(type, node, event) {
@@ -1454,21 +1380,18 @@ class NodeClickEvent extends PreventableEvent {
 
 class TreeNodeComponent {
     #destroyRef;
-    #themeService;
     #dragging;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
-        this.#themeService = inject(ThemeService);
         this.treeService = inject((TreeService));
         this.#dragging = toSignal(this.treeService.dragging$, {
             initialValue: false
         });
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const disabled = this.disabled();
             const highlighted = this.navigated();
             const selected = this.selected();
-            return treeNodeBaseThemeVariants(theme)({ disabled, highlighted, selected });
+            return treeNodeBaseThemeVariants({ disabled, highlighted, selected });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.checkable = computed(() => {
@@ -1635,36 +1558,31 @@ class TreeNodeComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TreeNodeComponent, isStandalone: true, selector: "mona-tree-node", inputs: { depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"baseClass()\" (click)=\"onNodeClick($event)\" (contextmenu)=\"onNodeContextMenu($event)\" #element>\r\n    @if (treeService.nodeTemplate()) {\r\n        <ng-container\r\n            [ngTemplateOutlet]=\"treeService.nodeTemplate()\"\r\n            [ngTemplateOutletContext]=\"{\r\n                $implicit: node()?.data,\r\n                element: element.parentElement\r\n            }\"></ng-container>\r\n    } @else {\r\n        <span class=\"truncate\">{{ nodeText() }}</span>\r\n    }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TreeNodeComponent, isStandalone: true, selector: "mona-tree-node", inputs: { depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"baseClass()\" (click)=\"onNodeClick($event)\" (contextmenu)=\"onNodeContextMenu($event)\" #element>\n    @if (treeService.nodeTemplate()) {\n        <ng-container\n            [ngTemplateOutlet]=\"treeService.nodeTemplate()\"\n            [ngTemplateOutletContext]=\"{\n                $implicit: node()?.data,\n                element: element.parentElement\n            }\"></ng-container>\n    } @else {\n        <span class=\"truncate\">{{ nodeText() }}</span>\n    }\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-tree-node", changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<div [class]=\"baseClass()\" (click)=\"onNodeClick($event)\" (contextmenu)=\"onNodeContextMenu($event)\" #element>\r\n    @if (treeService.nodeTemplate()) {\r\n        <ng-container\r\n            [ngTemplateOutlet]=\"treeService.nodeTemplate()\"\r\n            [ngTemplateOutletContext]=\"{\r\n                $implicit: node()?.data,\r\n                element: element.parentElement\r\n            }\"></ng-container>\r\n    } @else {\r\n        <span class=\"truncate\">{{ nodeText() }}</span>\r\n    }\r\n</div>\r\n" }]
+            args: [{ selector: "mona-tree-node", changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<div [class]=\"baseClass()\" (click)=\"onNodeClick($event)\" (contextmenu)=\"onNodeContextMenu($event)\" #element>\n    @if (treeService.nodeTemplate()) {\n        <ng-container\n            [ngTemplateOutlet]=\"treeService.nodeTemplate()\"\n            [ngTemplateOutletContext]=\"{\n                $implicit: node()?.data,\n                element: element.parentElement\n            }\"></ng-container>\n    } @else {\n        <span class=\"truncate\">{{ nodeText() }}</span>\n    }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }], node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }] } });
 
 class SubTreeComponent {
     constructor() {
         this.#document = inject(DOCUMENT);
-        this.#themeService = inject(ThemeService);
         this.#zone = inject(NgZone);
         this.listClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return subTreeListThemeVariants(theme)();
+            return subTreeListThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
         this.listItemClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return subTreeListItemThemeVariants(theme)();
+            return subTreeListItemThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listItemClass" }] : /* istanbul ignore next */ []));
         this.nodeContainerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return treeNodeContainerThemeVariants(theme)();
+            return treeNodeContainerThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "nodeContainerClass" }] : /* istanbul ignore next */ []));
         this.nodeDraggingClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return treeNodeDraggingThemeVariants(theme)();
+            return treeNodeDraggingThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "nodeDraggingClass" }] : /* istanbul ignore next */ []));
         this.nodeExpandEnterClass = computed(() => this.nodeAnimationDisabled() ? "" : "mona-tree-node-expand-enter", /* @ts-ignore */
@@ -1672,8 +1590,7 @@ class SubTreeComponent {
         this.nodeExpandLeaveClass = computed(() => this.nodeAnimationDisabled() ? "" : "mona-tree-node-expand-leave", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "nodeExpandLeaveClass" }] : /* istanbul ignore next */ []));
         this.nodeExpanderClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return treeNodeExpanderThemeVariants(theme)();
+            return treeNodeExpanderThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "nodeExpanderClass" }] : /* istanbul ignore next */ []));
         this.treeService = inject(TreeService);
@@ -1690,7 +1607,6 @@ class SubTreeComponent {
         ...(ngDevMode ? [{ debugName: "parent" }] : /* istanbul ignore next */ []));
     }
     #document;
-    #themeService;
     #zone;
     nodeAnimationDisabled() {
         return (!this.treeService.animationEnabled() ||
@@ -1783,7 +1699,7 @@ class SubTreeComponent {
         element.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SubTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SubTreeComponent, isStandalone: true, selector: "mona-sub-tree", inputs: { depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: true, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ul\r\n    [class]=\"listClass()\"\r\n    [attr.role]=\"parent() ? 'group' : null\"\r\n    cdkDropList\r\n    [cdkDropListSortingDisabled]=\"true\"\r\n    (cdkDropListDropped)=\"onNodeDrop($event)\">\r\n    @for (node of visibleNodes(); track node.uid) {\r\n        <li\r\n            [attr.id]=\"node.uid | treeNodeElementId\"\r\n            [attr.data-uid]=\"node.uid\"\r\n            [class]=\"listItemClass()\"\r\n            [tabindex]=\"-1\"\r\n            role=\"treeitem\"\r\n            [attr.aria-level]=\"depth() + 1\"\r\n            [attr.aria-setsize]=\"visibleNodes().length\"\r\n            [attr.aria-posinset]=\"$index + 1\"\r\n            [attr.aria-expanded]=\"nodeComponent.expandable() ? nodeComponent.expanded() : null\"\r\n            [attr.aria-selected]=\"treeService.selectableOptions().enabled ? nodeComponent.selected() : null\"\r\n            [attr.aria-disabled]=\"nodeComponent.disabled() ? true : null\"\r\n            [attr.aria-checked]=\"\r\n                nodeComponent.checkable() ? (nodeComponent.indeterminate() ? 'mixed' : nodeComponent.checked()) : null\r\n            \"\r\n            (focus)=\"treeService.navigatedNode.set(node)\"\r\n            cdkDrag\r\n            [cdkDragData]=\"node\"\r\n            [cdkDragDisabled]=\"!treeService.draggableOptions().enabled\"\r\n            (cdkDragStarted)=\"onNodeDragStart($event)\"\r\n            (cdkDragEnded)=\"onNodeDragEnd($event)\"\r\n            (cdkDragMoved)=\"onNodeDragMove($event, node)\">\r\n            <div [class]=\"nodeContainerClass()\">\r\n                @if (treeService.expandableOptions().enabled && nodeComponent.expandable()) {\r\n                    <button\r\n                        type=\"button\"\r\n                        tabindex=\"-1\"\r\n                        [class]=\"nodeExpanderClass()\"\r\n                        [class.mona-disabled]=\"nodeComponent.disabled()\"\r\n                        [attr.aria-label]=\"\r\n                            (nodeComponent.expanded() ? 'Collapse' : 'Expand') + ' ' + nodeComponent.nodeText()\r\n                        \"\r\n                        (click)=\"onExpandStateChange(node)\">\r\n                        @if (node.loading()) {\r\n                            <i class=\"ri-loader-2-line\"></i>\r\n                        } @else if (nodeComponent.expanded()) {\r\n                            <i class=\"ri-arrow-down-s-fill\"></i>\r\n                        } @else {\r\n                            <i class=\"ri-arrow-right-s-fill\"></i>\r\n                        }\r\n                    </button>\r\n                }\r\n                @if (nodeComponent.checkable()) {\r\n                    <mona-check-box\r\n                        aria-hidden=\"true\"\r\n                        [tabIndex]=\"-1\"\r\n                        [disabled]=\"nodeComponent.disabled()\"\r\n                        [indeterminate]=\"nodeComponent.indeterminate()\"\r\n                        [ngModel]=\"nodeComponent.checked()\"\r\n                        (click)=\"nodeComponent.checkboxClick$.next($event)\"\r\n                        (ngModelChange)=\"nodeComponent.checkboxCheck$.next($event)\"></mona-check-box>\r\n                }\r\n                <mona-tree-node [node]=\"node\" [depth]=\"depth()\" #nodeComponent></mona-tree-node>\r\n            </div>\r\n            @if (node.children().length > 0 && nodeComponent.expanded()) {\r\n                <div\r\n                    class=\"grid overflow-hidden\"\r\n                    [animate.enter]=\"nodeExpandEnterClass()\"\r\n                    [animate.leave]=\"nodeExpandLeaveClass()\">\r\n                    <div class=\"min-h-0 overflow-hidden\">\r\n                        <mona-sub-tree [nodes]=\"node.children()\" [depth]=\"depth() + 1\" [parent]=\"node\"></mona-sub-tree>\r\n                    </div>\r\n                </div>\r\n            }\r\n            @if (!nodeComponent.disabled()) {\r\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\">\r\n                    <span>\r\n                        @switch (treeService.dropPositionSignal()?.position) {\r\n                            @case (\"before\") {\r\n                                @if (treeService.dropAllowed()) {\r\n                                    <i class=\"ri-arrow-up-line\"></i>\r\n                                } @else {\r\n                                    <i class=\"ri-prohibited-2-line\"></i>\r\n                                }\r\n                            }\r\n                            @case (\"after\") {\r\n                                @if (treeService.dropAllowed()) {\r\n                                    <i class=\"ri-arrow-down-line\"></i>\r\n                                } @else {\r\n                                    <i class=\"ri-prohibited-2-line\"></i>\r\n                                }\r\n                            }\r\n                            @case (\"inside\") {\r\n                                <i class=\"ri-add-line\"></i>\r\n                            }\r\n                            @default {\r\n                                <i class=\"ri-prohibited-2-line\"></i>\r\n                            }\r\n                        }\r\n                    </span>\r\n                    <span>{{ nodeComponent.nodeText() }}</span>\r\n                </div>\r\n            } @else {\r\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\"></div>\r\n            }\r\n        </li>\r\n    }\r\n</ul>\r\n", styles: [".mona-tree-node-expand-enter{animation:mona-tree-node-expand-in .15s ease-out}.mona-tree-node-expand-leave{animation:mona-tree-node-expand-out .15s ease-out}@keyframes mona-tree-node-expand-in{0%{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}@keyframes mona-tree-node-expand-out{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}@media(prefers-reduced-motion:reduce){.mona-tree-node-expand-enter,.mona-tree-node-expand-leave{animation-duration:1ms}}\n"], dependencies: [{ kind: "component", type: SubTreeComponent, selector: "mona-sub-tree", inputs: ["depth", "nodes", "parent"] }, { kind: "component", type: TreeNodeComponent, selector: "mona-tree-node", inputs: ["depth", "node"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "component", type: CheckBoxComponent, selector: "mona-check-box", inputs: ["checked", "disabled", "indeterminate", "invalid", "label", "labelPosition", "labelSize", "required", "rounded", "tabIndex", "touched", "class"], outputs: ["checkedChange", "inputBlur", "inputChange", "inputFocus", "touch"] }, { kind: "pipe", type: TreeNodeElementIdPipe, name: "treeNodeElementId" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SubTreeComponent, isStandalone: true, selector: "mona-sub-tree", inputs: { depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: true, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ul\n    [class]=\"listClass()\"\n    [attr.role]=\"parent() ? 'group' : null\"\n    cdkDropList\n    [cdkDropListSortingDisabled]=\"true\"\n    (cdkDropListDropped)=\"onNodeDrop($event)\">\n    @for (node of visibleNodes(); track node.uid) {\n        <li\n            [attr.id]=\"node.uid | treeNodeElementId\"\n            [attr.data-uid]=\"node.uid\"\n            [class]=\"listItemClass()\"\n            [tabindex]=\"-1\"\n            role=\"treeitem\"\n            [attr.aria-level]=\"depth() + 1\"\n            [attr.aria-setsize]=\"visibleNodes().length\"\n            [attr.aria-posinset]=\"$index + 1\"\n            [attr.aria-expanded]=\"nodeComponent.expandable() ? nodeComponent.expanded() : null\"\n            [attr.aria-selected]=\"treeService.selectableOptions().enabled ? nodeComponent.selected() : null\"\n            [attr.aria-disabled]=\"nodeComponent.disabled() ? true : null\"\n            [attr.aria-checked]=\"\n                nodeComponent.checkable() ? (nodeComponent.indeterminate() ? 'mixed' : nodeComponent.checked()) : null\n            \"\n            (focus)=\"treeService.navigatedNode.set(node)\"\n            cdkDrag\n            [cdkDragData]=\"node\"\n            [cdkDragDisabled]=\"!treeService.draggableOptions().enabled\"\n            (cdkDragStarted)=\"onNodeDragStart($event)\"\n            (cdkDragEnded)=\"onNodeDragEnd($event)\"\n            (cdkDragMoved)=\"onNodeDragMove($event, node)\">\n            <div [class]=\"nodeContainerClass()\">\n                @if (treeService.expandableOptions().enabled && nodeComponent.expandable()) {\n                    <button\n                        type=\"button\"\n                        tabindex=\"-1\"\n                        [class]=\"nodeExpanderClass()\"\n                        [class.mona-disabled]=\"nodeComponent.disabled()\"\n                        [attr.aria-label]=\"\n                            (nodeComponent.expanded() ? 'Collapse' : 'Expand') + ' ' + nodeComponent.nodeText()\n                        \"\n                        (click)=\"onExpandStateChange(node)\">\n                        @if (node.loading()) {\n                            <i class=\"ri-loader-2-line\"></i>\n                        } @else if (nodeComponent.expanded()) {\n                            <i class=\"ri-arrow-down-s-fill\"></i>\n                        } @else {\n                            <i class=\"ri-arrow-right-s-fill\"></i>\n                        }\n                    </button>\n                }\n                @if (nodeComponent.checkable()) {\n                    <mona-check-box\n                        aria-hidden=\"true\"\n                        [tabIndex]=\"-1\"\n                        [disabled]=\"nodeComponent.disabled()\"\n                        [indeterminate]=\"nodeComponent.indeterminate()\"\n                        [ngModel]=\"nodeComponent.checked()\"\n                        (click)=\"nodeComponent.checkboxClick$.next($event)\"\n                        (ngModelChange)=\"nodeComponent.checkboxCheck$.next($event)\"></mona-check-box>\n                }\n                <mona-tree-node [node]=\"node\" [depth]=\"depth()\" #nodeComponent></mona-tree-node>\n            </div>\n            @if (node.children().length > 0 && nodeComponent.expanded()) {\n                <div\n                    class=\"grid overflow-hidden\"\n                    [animate.enter]=\"nodeExpandEnterClass()\"\n                    [animate.leave]=\"nodeExpandLeaveClass()\">\n                    <div class=\"min-h-0 overflow-hidden\">\n                        <mona-sub-tree [nodes]=\"node.children()\" [depth]=\"depth() + 1\" [parent]=\"node\"></mona-sub-tree>\n                    </div>\n                </div>\n            }\n            @if (!nodeComponent.disabled()) {\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\">\n                    <span>\n                        @switch (treeService.dropPositionSignal()?.position) {\n                            @case (\"before\") {\n                                @if (treeService.dropAllowed()) {\n                                    <i class=\"ri-arrow-up-line\"></i>\n                                } @else {\n                                    <i class=\"ri-prohibited-2-line\"></i>\n                                }\n                            }\n                            @case (\"after\") {\n                                @if (treeService.dropAllowed()) {\n                                    <i class=\"ri-arrow-down-line\"></i>\n                                } @else {\n                                    <i class=\"ri-prohibited-2-line\"></i>\n                                }\n                            }\n                            @case (\"inside\") {\n                                <i class=\"ri-add-line\"></i>\n                            }\n                            @default {\n                                <i class=\"ri-prohibited-2-line\"></i>\n                            }\n                        }\n                    </span>\n                    <span>{{ nodeComponent.nodeText() }}</span>\n                </div>\n            } @else {\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\"></div>\n            }\n        </li>\n    }\n</ul>\n", styles: [".mona-tree-node-expand-enter{animation:mona-tree-node-expand-in .15s ease-out}.mona-tree-node-expand-leave{animation:mona-tree-node-expand-out .15s ease-out}@keyframes mona-tree-node-expand-in{0%{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}@keyframes mona-tree-node-expand-out{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}@media(prefers-reduced-motion:reduce){.mona-tree-node-expand-enter,.mona-tree-node-expand-leave{animation-duration:1ms}}\n"], dependencies: [{ kind: "component", type: SubTreeComponent, selector: "mona-sub-tree", inputs: ["depth", "nodes", "parent"] }, { kind: "component", type: TreeNodeComponent, selector: "mona-tree-node", inputs: ["depth", "node"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "component", type: CheckBoxComponent, selector: "mona-check-box", inputs: ["checked", "disabled", "indeterminate", "invalid", "label", "labelPosition", "labelSize", "required", "rounded", "tabIndex", "touched", "class"], outputs: ["checkedChange", "inputBlur", "inputChange", "inputFocus", "touch"] }, { kind: "pipe", type: TreeNodeElementIdPipe, name: "treeNodeElementId" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SubTreeComponent, decorators: [{
             type: Component,
@@ -1795,22 +1711,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         CdkDragPreview,
                         CheckBoxComponent,
                         TreeNodeElementIdPipe
-                    ], template: "<ul\r\n    [class]=\"listClass()\"\r\n    [attr.role]=\"parent() ? 'group' : null\"\r\n    cdkDropList\r\n    [cdkDropListSortingDisabled]=\"true\"\r\n    (cdkDropListDropped)=\"onNodeDrop($event)\">\r\n    @for (node of visibleNodes(); track node.uid) {\r\n        <li\r\n            [attr.id]=\"node.uid | treeNodeElementId\"\r\n            [attr.data-uid]=\"node.uid\"\r\n            [class]=\"listItemClass()\"\r\n            [tabindex]=\"-1\"\r\n            role=\"treeitem\"\r\n            [attr.aria-level]=\"depth() + 1\"\r\n            [attr.aria-setsize]=\"visibleNodes().length\"\r\n            [attr.aria-posinset]=\"$index + 1\"\r\n            [attr.aria-expanded]=\"nodeComponent.expandable() ? nodeComponent.expanded() : null\"\r\n            [attr.aria-selected]=\"treeService.selectableOptions().enabled ? nodeComponent.selected() : null\"\r\n            [attr.aria-disabled]=\"nodeComponent.disabled() ? true : null\"\r\n            [attr.aria-checked]=\"\r\n                nodeComponent.checkable() ? (nodeComponent.indeterminate() ? 'mixed' : nodeComponent.checked()) : null\r\n            \"\r\n            (focus)=\"treeService.navigatedNode.set(node)\"\r\n            cdkDrag\r\n            [cdkDragData]=\"node\"\r\n            [cdkDragDisabled]=\"!treeService.draggableOptions().enabled\"\r\n            (cdkDragStarted)=\"onNodeDragStart($event)\"\r\n            (cdkDragEnded)=\"onNodeDragEnd($event)\"\r\n            (cdkDragMoved)=\"onNodeDragMove($event, node)\">\r\n            <div [class]=\"nodeContainerClass()\">\r\n                @if (treeService.expandableOptions().enabled && nodeComponent.expandable()) {\r\n                    <button\r\n                        type=\"button\"\r\n                        tabindex=\"-1\"\r\n                        [class]=\"nodeExpanderClass()\"\r\n                        [class.mona-disabled]=\"nodeComponent.disabled()\"\r\n                        [attr.aria-label]=\"\r\n                            (nodeComponent.expanded() ? 'Collapse' : 'Expand') + ' ' + nodeComponent.nodeText()\r\n                        \"\r\n                        (click)=\"onExpandStateChange(node)\">\r\n                        @if (node.loading()) {\r\n                            <i class=\"ri-loader-2-line\"></i>\r\n                        } @else if (nodeComponent.expanded()) {\r\n                            <i class=\"ri-arrow-down-s-fill\"></i>\r\n                        } @else {\r\n                            <i class=\"ri-arrow-right-s-fill\"></i>\r\n                        }\r\n                    </button>\r\n                }\r\n                @if (nodeComponent.checkable()) {\r\n                    <mona-check-box\r\n                        aria-hidden=\"true\"\r\n                        [tabIndex]=\"-1\"\r\n                        [disabled]=\"nodeComponent.disabled()\"\r\n                        [indeterminate]=\"nodeComponent.indeterminate()\"\r\n                        [ngModel]=\"nodeComponent.checked()\"\r\n                        (click)=\"nodeComponent.checkboxClick$.next($event)\"\r\n                        (ngModelChange)=\"nodeComponent.checkboxCheck$.next($event)\"></mona-check-box>\r\n                }\r\n                <mona-tree-node [node]=\"node\" [depth]=\"depth()\" #nodeComponent></mona-tree-node>\r\n            </div>\r\n            @if (node.children().length > 0 && nodeComponent.expanded()) {\r\n                <div\r\n                    class=\"grid overflow-hidden\"\r\n                    [animate.enter]=\"nodeExpandEnterClass()\"\r\n                    [animate.leave]=\"nodeExpandLeaveClass()\">\r\n                    <div class=\"min-h-0 overflow-hidden\">\r\n                        <mona-sub-tree [nodes]=\"node.children()\" [depth]=\"depth() + 1\" [parent]=\"node\"></mona-sub-tree>\r\n                    </div>\r\n                </div>\r\n            }\r\n            @if (!nodeComponent.disabled()) {\r\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\">\r\n                    <span>\r\n                        @switch (treeService.dropPositionSignal()?.position) {\r\n                            @case (\"before\") {\r\n                                @if (treeService.dropAllowed()) {\r\n                                    <i class=\"ri-arrow-up-line\"></i>\r\n                                } @else {\r\n                                    <i class=\"ri-prohibited-2-line\"></i>\r\n                                }\r\n                            }\r\n                            @case (\"after\") {\r\n                                @if (treeService.dropAllowed()) {\r\n                                    <i class=\"ri-arrow-down-line\"></i>\r\n                                } @else {\r\n                                    <i class=\"ri-prohibited-2-line\"></i>\r\n                                }\r\n                            }\r\n                            @case (\"inside\") {\r\n                                <i class=\"ri-add-line\"></i>\r\n                            }\r\n                            @default {\r\n                                <i class=\"ri-prohibited-2-line\"></i>\r\n                            }\r\n                        }\r\n                    </span>\r\n                    <span>{{ nodeComponent.nodeText() }}</span>\r\n                </div>\r\n            } @else {\r\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\"></div>\r\n            }\r\n        </li>\r\n    }\r\n</ul>\r\n", styles: [".mona-tree-node-expand-enter{animation:mona-tree-node-expand-in .15s ease-out}.mona-tree-node-expand-leave{animation:mona-tree-node-expand-out .15s ease-out}@keyframes mona-tree-node-expand-in{0%{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}@keyframes mona-tree-node-expand-out{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}@media(prefers-reduced-motion:reduce){.mona-tree-node-expand-enter,.mona-tree-node-expand-leave{animation-duration:1ms}}\n"] }]
+                    ], template: "<ul\n    [class]=\"listClass()\"\n    [attr.role]=\"parent() ? 'group' : null\"\n    cdkDropList\n    [cdkDropListSortingDisabled]=\"true\"\n    (cdkDropListDropped)=\"onNodeDrop($event)\">\n    @for (node of visibleNodes(); track node.uid) {\n        <li\n            [attr.id]=\"node.uid | treeNodeElementId\"\n            [attr.data-uid]=\"node.uid\"\n            [class]=\"listItemClass()\"\n            [tabindex]=\"-1\"\n            role=\"treeitem\"\n            [attr.aria-level]=\"depth() + 1\"\n            [attr.aria-setsize]=\"visibleNodes().length\"\n            [attr.aria-posinset]=\"$index + 1\"\n            [attr.aria-expanded]=\"nodeComponent.expandable() ? nodeComponent.expanded() : null\"\n            [attr.aria-selected]=\"treeService.selectableOptions().enabled ? nodeComponent.selected() : null\"\n            [attr.aria-disabled]=\"nodeComponent.disabled() ? true : null\"\n            [attr.aria-checked]=\"\n                nodeComponent.checkable() ? (nodeComponent.indeterminate() ? 'mixed' : nodeComponent.checked()) : null\n            \"\n            (focus)=\"treeService.navigatedNode.set(node)\"\n            cdkDrag\n            [cdkDragData]=\"node\"\n            [cdkDragDisabled]=\"!treeService.draggableOptions().enabled\"\n            (cdkDragStarted)=\"onNodeDragStart($event)\"\n            (cdkDragEnded)=\"onNodeDragEnd($event)\"\n            (cdkDragMoved)=\"onNodeDragMove($event, node)\">\n            <div [class]=\"nodeContainerClass()\">\n                @if (treeService.expandableOptions().enabled && nodeComponent.expandable()) {\n                    <button\n                        type=\"button\"\n                        tabindex=\"-1\"\n                        [class]=\"nodeExpanderClass()\"\n                        [class.mona-disabled]=\"nodeComponent.disabled()\"\n                        [attr.aria-label]=\"\n                            (nodeComponent.expanded() ? 'Collapse' : 'Expand') + ' ' + nodeComponent.nodeText()\n                        \"\n                        (click)=\"onExpandStateChange(node)\">\n                        @if (node.loading()) {\n                            <i class=\"ri-loader-2-line\"></i>\n                        } @else if (nodeComponent.expanded()) {\n                            <i class=\"ri-arrow-down-s-fill\"></i>\n                        } @else {\n                            <i class=\"ri-arrow-right-s-fill\"></i>\n                        }\n                    </button>\n                }\n                @if (nodeComponent.checkable()) {\n                    <mona-check-box\n                        aria-hidden=\"true\"\n                        [tabIndex]=\"-1\"\n                        [disabled]=\"nodeComponent.disabled()\"\n                        [indeterminate]=\"nodeComponent.indeterminate()\"\n                        [ngModel]=\"nodeComponent.checked()\"\n                        (click)=\"nodeComponent.checkboxClick$.next($event)\"\n                        (ngModelChange)=\"nodeComponent.checkboxCheck$.next($event)\"></mona-check-box>\n                }\n                <mona-tree-node [node]=\"node\" [depth]=\"depth()\" #nodeComponent></mona-tree-node>\n            </div>\n            @if (node.children().length > 0 && nodeComponent.expanded()) {\n                <div\n                    class=\"grid overflow-hidden\"\n                    [animate.enter]=\"nodeExpandEnterClass()\"\n                    [animate.leave]=\"nodeExpandLeaveClass()\">\n                    <div class=\"min-h-0 overflow-hidden\">\n                        <mona-sub-tree [nodes]=\"node.children()\" [depth]=\"depth() + 1\" [parent]=\"node\"></mona-sub-tree>\n                    </div>\n                </div>\n            }\n            @if (!nodeComponent.disabled()) {\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\">\n                    <span>\n                        @switch (treeService.dropPositionSignal()?.position) {\n                            @case (\"before\") {\n                                @if (treeService.dropAllowed()) {\n                                    <i class=\"ri-arrow-up-line\"></i>\n                                } @else {\n                                    <i class=\"ri-prohibited-2-line\"></i>\n                                }\n                            }\n                            @case (\"after\") {\n                                @if (treeService.dropAllowed()) {\n                                    <i class=\"ri-arrow-down-line\"></i>\n                                } @else {\n                                    <i class=\"ri-prohibited-2-line\"></i>\n                                }\n                            }\n                            @case (\"inside\") {\n                                <i class=\"ri-add-line\"></i>\n                            }\n                            @default {\n                                <i class=\"ri-prohibited-2-line\"></i>\n                            }\n                        }\n                    </span>\n                    <span>{{ nodeComponent.nodeText() }}</span>\n                </div>\n            } @else {\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\"></div>\n            }\n        </li>\n    }\n</ul>\n", styles: [".mona-tree-node-expand-enter{animation:mona-tree-node-expand-in .15s ease-out}.mona-tree-node-expand-leave{animation:mona-tree-node-expand-out .15s ease-out}@keyframes mona-tree-node-expand-in{0%{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}@keyframes mona-tree-node-expand-out{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}@media(prefers-reduced-motion:reduce){.mona-tree-node-expand-enter,.mona-tree-node-expand-leave{animation-duration:1ms}}\n"] }]
         }], propDecorators: { depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: true }] }], nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: true }] }], parent: [{ type: i0.Input, args: [{ isSignal: true, alias: "parent", required: true }] }] } });
 
 class TreeDropHintComponent {
     #dropPositionChange;
     #hostElementRef;
-    #themeService;
     constructor() {
         this.#dropPositionChange = toSignal(inject(TreeService).dropPositionChange$, {
             initialValue: null
         });
         this.#hostElementRef = inject(ElementRef);
-        this.#themeService = inject(ThemeService);
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return treeDropHintBaseThemeVariants(theme)();
+            return treeDropHintBaseThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.dropHintStyles = computed(() => {
@@ -1849,9 +1762,8 @@ class TreeDropHintComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dropHintStyles" }] : /* istanbul ignore next */ []));
         this.iconClass = computed(() => {
-            const theme = this.#themeService.theme();
             const icon = "ri-arrow-right-s-fill";
-            const variantClass = treeDropHintIconThemeVariants(theme)();
+            const variantClass = treeDropHintIconThemeVariants();
             return twMerge(icon, variantClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
@@ -1863,27 +1775,25 @@ class TreeDropHintComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeDropHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: TreeDropHintComponent, isStandalone: true, selector: "mona-tree-drop-hint", host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "<i [class]=\"iconClass()\"></i>\r\n", changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: TreeDropHintComponent, isStandalone: true, selector: "mona-tree-drop-hint", host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "<i [class]=\"iconClass()\"></i>\n", changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeDropHintComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-tree-drop-hint", changeDetection: ChangeDetectionStrategy.Eager, host: {
                         "[class]": "baseClass()"
-                    }, template: "<i [class]=\"iconClass()\"></i>\r\n" }]
+                    }, template: "<i [class]=\"iconClass()\"></i>\n" }]
         }], ctorParameters: () => [] });
 
 class TreeComponent {
     #destroyRef;
     #focusMonitor;
     #hostElementRef;
-    #themeService;
     #zone;
     #lastNavigatedNode;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#focusMonitor = inject(FocusMonitor);
         this.#hostElementRef = inject(ElementRef);
-        this.#themeService = inject(ThemeService);
         this.#zone = inject(NgZone);
         this.#lastNavigatedNode = null;
         this.activeDescendantId = computed(() => {
@@ -1892,8 +1802,7 @@ class TreeComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeDescendantId" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return treeBaseThemeVariants(theme)();
+            return treeBaseThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.ariaLabel = input("", /* @ts-ignore */

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

@@ -279,6 +279,34 @@ const rxTimeout = (destroyRef, fn, delay = 0) => {
         .subscribe(() => fn());
 };
 
+const themeControlBackdropClasses = `
+    [background-image:var(--mona-effect-control-background-image,none)]
+    [backdrop-filter:var(--mona-effect-control-backdrop-filter,none)]
+    [-webkit-backdrop-filter:var(--mona-effect-control-backdrop-filter,none)]
+`;
+const themeControlSurfaceClasses = `
+    [background-color:var(--mona-effect-control-background-color,var(--color-input-background))]
+    ${themeControlBackdropClasses}
+`;
+const themeRaisedBackdropClasses = `
+    [background-image:var(--mona-effect-raised-background-image,none)]
+    [backdrop-filter:var(--mona-effect-raised-backdrop-filter,none)]
+    [-webkit-backdrop-filter:var(--mona-effect-raised-backdrop-filter,none)]
+`;
+const themeRaisedSurfaceClasses = `
+    [background-color:var(--mona-effect-raised-background-color,var(--color-surface-raised))]
+    ${themeRaisedBackdropClasses}
+`;
+const themeOverlayBackdropClasses = `
+    [background-image:var(--mona-effect-overlay-background-image,none)]
+    [backdrop-filter:var(--mona-effect-overlay-backdrop-filter,none)]
+    [-webkit-backdrop-filter:var(--mona-effect-overlay-backdrop-filter,none)]
+`;
+const themeOverlaySurfaceClasses = `
+    [background-color:var(--mona-effect-overlay-background-color,var(--color-surface-overlay))]
+    ${themeOverlayBackdropClasses}
+`;
+
 const restoreOverlayScroll = (overlayRef, element) => {
     requestAnimationFrame(() => {
         const scrollableContent = findScrollableElement(overlayRef.overlayElement);
@@ -375,5 +403,5 @@ const setupTypeahead = (typeaheadKey$) => {
  * Generated bundle index. Do not edit.
  */
 
-export { AttributeBinderDirective, NavigationKeys, NavigationKeysList, createElementControlId, focusElement, hex2rgba, hsla2hsva, hsva2rgba, isNavigationKey, isTypeaheadKey, isValidHex, isValidHsla, isValidRgb, restoreOverlayScroll, rgba2hex, rgba2hsla, rgba2hsva, rxFromResize, rxTimeout, setWindowStyles, setupTypeahead, string2Hsla, string2rgba, toCssValue };
+export { AttributeBinderDirective, NavigationKeys, NavigationKeysList, createElementControlId, focusElement, hex2rgba, hsla2hsva, hsva2rgba, isNavigationKey, isTypeaheadKey, isValidHex, isValidHsla, isValidRgb, restoreOverlayScroll, rgba2hex, rgba2hsla, rgba2hsva, rxFromResize, rxTimeout, setWindowStyles, setupTypeahead, string2Hsla, string2rgba, themeControlBackdropClasses, themeControlSurfaceClasses, themeOverlayBackdropClasses, themeOverlaySurfaceClasses, themeRaisedBackdropClasses, themeRaisedSurfaceClasses, toCssValue };
 //# sourceMappingURL=nanahoshi-mona-ui-internal.mjs.map