@nanahoshi/mona-ui 0.1.1 → 0.2.0

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

@@ -1,2 +1,2 @@
-export { C as CellEditEvent, w as GridAddCommandDirective, x as GridAddEvent, y as GridCancelCommandDirective, z as GridCancelEvent, A as GridCellTemplateDirective, B as GridColumnComponent, D as GridColumnTitleTemplateDirective, E as GridCommandColumnComponent, F as GridComponent, H as GridContextMenuDirective, I as GridDetailTemplateDirective, J as GridEditCommandDirective, K as GridEditEvent, L as GridEditTemplateDirective, M as GridEditableDirective, N as GridExportDirective, O as GridFilterableDirective, P as GridFooterTemplateDirective, Q as GridGroupFooterTemplateDirective, R as GridGroupableDirective, S as GridHeaderTemplateDirective, T as GridNoDataTemplateDirective, U as GridRemoveCommandDirective, V as GridRemoveEvent, W as GridReorderableDirective, X as GridResizableDirective, Y as GridSaveCommandDirective, Z as GridSaveEvent, _ as GridSelectableDirective, $ as GridSortableDirective, a0 as GridStatePersistenceDirective, a1 as GridToolbarTemplateDirective, a2 as GridVirtualScrollDirective, a3 as RowEditEvent } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-T9Bj98kl.mjs';
+export { C as CellEditEvent, w as GridAddCommandDirective, x as GridAddEvent, y as GridCancelCommandDirective, z as GridCancelEvent, A as GridCellTemplateDirective, B as GridColumnComponent, D as GridColumnTitleTemplateDirective, E as GridCommandColumnComponent, F as GridComponent, H as GridContextMenuDirective, I as GridDetailTemplateDirective, J as GridEditCommandDirective, K as GridEditEvent, L as GridEditTemplateDirective, M as GridEditableDirective, N as GridExportDirective, O as GridFilterableDirective, P as GridFooterTemplateDirective, Q as GridGroupFooterTemplateDirective, R as GridGroupableDirective, S as GridHeaderTemplateDirective, T as GridNoDataTemplateDirective, U as GridRemoveCommandDirective, V as GridRemoveEvent, W as GridReorderableDirective, X as GridResizableDirective, Y as GridSaveCommandDirective, Z as GridSaveEvent, _ as GridSelectableDirective, $ as GridSortableDirective, a0 as GridStatePersistenceDirective, a1 as GridToolbarTemplateDirective, a2 as GridVirtualScrollDirective, a3 as RowEditEvent } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-BRZUd8cE.mjs';
 //# sourceMappingURL=nanahoshi-mona-ui-grid.mjs.map

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

@@ -1,14 +1,17 @@
 import * as i0 from '@angular/core';
-import { inject, computed, signal, viewChild, output, input, afterRenderEffect, untracked, Component } from '@angular/core';
+import { computed, signal, viewChild, output, input, afterRenderEffect, untracked, Component } from '@angular/core';
 import { LucideLoader, LucideChevronDown, LucideX, LucideDynamicIcon } from '@lucide/angular';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
-const indicatorIconHostVariants = cva(`h-full aspect-square flex-none inline-flex items-center justify-center self-stretch`, {
+const indicatorIconHostThemeVariants = cva(`h-full aspect-square flex-none inline-flex items-center justify-center self-stretch`, {
     variants: {
         interactive: {
-            true: "opacity-50 hover:opacity-90 focus:ring-1 focus:ring-primary/40 focus:outline-none",
+            true: `
+                    opacity-50
+                    hover:opacity-90
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35 focus-visible:outline-none
+                `,
             false: ""
         },
         preset: {
@@ -21,7 +24,7 @@ const indicatorIconHostVariants = cva(`h-full aspect-square flex-none inline-fle
         interactive: false
     }
 });
-const indicatorIconSvgVariants = cva(``, {
+const indicatorIconSvgThemeVariants = cva(``, {
     variants: {
         loading: {
             true: "animate-[spin_2s_linear_infinite]",
@@ -33,40 +36,19 @@ const indicatorIconSvgVariants = cva(``, {
     }
 });
 
-const indicatorIconHostThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return indicatorIconHostVariants;
-        default:
-            return indicatorIconHostVariants;
-    }
-};
-const indicatorIconSvgThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return indicatorIconSvgVariants;
-        default:
-            return indicatorIconSvgVariants;
-    }
-};
-
 class IndicatorIconComponent {
-    #themeService;
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const interactive = this.interactive();
             const preset = this.preset();
-            return twMerge(indicatorIconHostThemeVariants(theme)({ interactive, preset }), this.userClass());
+            return twMerge(indicatorIconHostThemeVariants({ interactive, preset }), this.userClass());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.hasProjectedContent = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasProjectedContent" }] : /* istanbul ignore next */ []));
         this.iconClass = computed(() => {
-            const theme = this.#themeService.theme();
             const loading = this.preset() === "loading";
-            return indicatorIconSvgThemeVariants(theme)({ loading });
+            return indicatorIconSvgThemeVariants({ loading });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
         this.iconToRender = computed(() => {

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

@@ -714,53 +714,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             type: Injectable
         }] });
 
-const listVariants = cva(`
-        h-full flex flex-col overflow-hidden outline-none
-    `);
-const listInnerListVariants = cva(`
-        list-none p-0 m-0 overflow-x-hidden overflow-y-auto
-        h-full outline-none
-    `);
-const listGroupHeaderVariants = cva(``, {
+const listThemeVariants = cva(`flex h-full flex-col overflow-hidden bg-(--mona-list-background) outline-none`);
+const listInnerListThemeVariants = cva(`m-0 h-full list-none overflow-x-hidden overflow-y-auto p-0 outline-none [scrollbar-color:var(--color-scrollbar-thumb)_var(--color-scrollbar-track)] [scrollbar-width:thin]`);
+const listGroupHeaderThemeVariants = cva(``, {
     variants: {
         hasTemplate: {
             true: "",
-            false: "py-1 font-bold"
+            false: "border-y-[length:var(--mona-list-group-border-width)] border-border-subtle bg-(--mona-list-group-background) py-1 font-[var(--mona-list-group-font-weight)]"
         }
     }
 });
-const listGroupHeaderTextVariants = cva(`select-none`, {
+const listGroupHeaderTextThemeVariants = cva(`select-none text-muted-foreground`, {
     variants: {
-        hasTemplate: {
-            true: "",
-            false: "font-bold w-full px-3 py-1"
-        }
+        hasTemplate: { true: "", false: "w-full px-3 py-1 font-[var(--mona-list-group-font-weight)]" }
     }
 });
-const listItemBaseVariants = cva(`
-        w-full h-full flex gap-2 items-center
-    `);
-const listItemContentVariants = cva(`
-        relative flex cursor-default select-none items-center
-        outline-none px-3 py-1
-        hover:bg-accent hover:text-accent-foreground
-        focus:bg-accent focus:text-accent-foreground
-    `, {
+const listItemBaseThemeVariants = cva(`flex h-full w-full items-center gap-2`);
+const listItemContentThemeVariants = cva(`relative flex cursor-default select-none items-center px-3 py-1 text-foreground outline-none hover:bg-hover focus:bg-hover`, {
     variants: {
-        checkboxes: {
-            true: "gap-2",
-            false: ""
-        },
+        checkboxes: { true: "gap-2", false: "" },
         highlighted: {
-            true: "bg-accent text-accent-foreground rounded-none inset-ring-1 inset-ring-gray-400/70",
-            false: ""
-        },
-        selected: {
-            true: "bg-primary text-primary-foreground inset-ring-1 inset-ring-primary-foreground/40",
+            true: "bg-hover text-foreground inset-ring-1 inset-ring-focus-indicator/35",
             false: ""
         },
+        selected: { true: "bg-(--color-selected) text-(--color-selected-foreground)", false: "" },
         disabled: {
-            true: "pointer-events-none opacity-50 cursor-default",
+            true: "pointer-events-none cursor-default bg-(--mona-list-disabled-background) text-disabled-foreground",
             false: "cursor-pointer"
         }
     },
@@ -768,29 +747,15 @@ const listItemContentVariants = cva(`
         {
             selected: true,
             checkboxes: false,
-            class: `
-                    bg-primary text-primary-foreground rounded-none
-                    inset-ring-1 inset-ring-primary-foreground/40
-                    hover:bg-primary hover:text-primary-foreground
-                    focus:bg-primary focus:text-primary-foreground
-                `
+            class: "bg-(--color-selected) text-(--color-selected-foreground) hover:bg-(--color-selected-hover) hover:text-(--color-selected-hover-foreground) focus:bg-(--color-selected-focus) focus:text-(--color-selected-focus-foreground)"
         },
         {
             highlighted: true,
             selected: true,
             checkboxes: false,
-            class: `
-                    bg-primary text-primary-foreground rounded-none
-                    inset-ring-1 inset-ring-primary-foreground/40
-                    hover:bg-primary hover:text-primary-foreground
-                    focus:bg-primary focus:text-primary-foreground
-                `
+            class: "bg-(--color-selected) text-(--color-selected-foreground) inset-ring-1 inset-ring-focus-indicator/35 hover:bg-(--color-selected-hover) hover:text-(--color-selected-hover-foreground) focus:bg-(--color-selected-focus) focus:text-(--color-selected-focus-foreground)"
         },
-        {
-            selected: true,
-            checkboxes: true,
-            class: `bg-transparent text-foreground`
-        }
+        { selected: true, checkboxes: true, class: "bg-transparent text-foreground" }
     ]
 });
 
@@ -821,7 +786,12 @@ class ListItemDirective {
             const highlighted = this.highlighted();
             const selected = this.selected();
             const checkboxes = this.#listService.selectableOptions().checkboxes;
-            const classes = listItemContentVariants({ disabled, highlighted, selected, checkboxes });
+            const classes = listItemContentThemeVariants({
+                disabled,
+                highlighted,
+                selected,
+                checkboxes
+            });
             return twMerge(classes);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "textClasses" }] : /* istanbul ignore next */ []));
@@ -895,7 +865,7 @@ class ListItemComponent {
             if (isHeader) {
                 return ``;
             }
-            return listItemBaseVariants();
+            return listItemBaseThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.checkboxes = computed(() => {
@@ -924,7 +894,7 @@ class ListItemComponent {
             const isHeader = this.isHeader();
             if (isHeader) {
                 const hasTemplate = this.template() != null;
-                const classes = listGroupHeaderTextVariants({ hasTemplate });
+                const classes = listGroupHeaderTextThemeVariants({ hasTemplate });
                 return twMerge(classes);
             }
             return ``; // TODO
@@ -960,7 +930,7 @@ class ListComponent {
         this.filterInput = viewChild(FilterInputComponent, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filterInput" }] : /* istanbul ignore next */ []));
         this.classes = computed(() => {
-            const classes = listVariants();
+            const classes = listThemeVariants();
             return twMerge(classes);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
@@ -968,7 +938,7 @@ class ListComponent {
         this.groupHeaderClasses = computed(() => {
             const listItemClass = this.listItemClass();
             const hasTemplate = this.groupHeaderTemplate() != null;
-            const classes = listGroupHeaderVariants({ hasTemplate });
+            const classes = listGroupHeaderThemeVariants({ hasTemplate });
             return twMerge(classes, listItemClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "groupHeaderClasses" }] : /* istanbul ignore next */ []));
@@ -978,7 +948,7 @@ class ListComponent {
         ...(ngDevMode ? [{ debugName: "hostTabIndex" }] : /* istanbul ignore next */ []));
         this.itemTemplate = contentChild(ListItemTemplateDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.innerListClasses = computed(() => {
-            const classes = listInnerListVariants();
+            const classes = listInnerListThemeVariants();
             const listClass = this.listClass();
             return twMerge(classes, listClass);
         }, /* @ts-ignore */

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(`
+const subTreeListItemThemeVariants = cva(`
         relative overflow-hidden outline-none
         ps-6
     `);
-const treeBaseVariants = cva(`
+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
+const treeDropHintBaseThemeVariants = cva(`
+        fixed z-1 h-0.5 w-10
         pointer-events-none
+        bg-primary opacity-80
     `);
-const treeDropHintIconVariants = cva(`
+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(`
+const treeNodeContainerThemeVariants = cva(`
         flex items-center
     `);
-const treeNodeDraggingVariants = cva(`
+const treeNodeDraggingThemeVariants = cva(`
         flex items-center justify-center
-        px-2! py-1! top-3!
-        bg-background! text-foreground!
+        top-3! px-2! py-1!
+        ${themeOverlaySurfaceClasses} text-foreground!
         border! border-border!
-        shadow-md
+        shadow-(--shadow-overlay)
     `);
-const treeNodeExpanderVariants = cva(`
-        min-w-6 h-full -ms-6
-        flex items-center justify-center
+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(() => {
@@ -1645,26 +1568,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 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() ||
@@ -1801,16 +1717,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 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 */ []));
@@ -1876,14 +1788,12 @@ 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