@nanahoshi/mona-ui 0.1.0 → 0.2.0

package/fesm2022/nanahoshi-mona-ui-multi-select.mjs

@@ -2,15 +2,13 @@ import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Directive, signal, Injectable, inject, DestroyRef, ElementRef, computed, contentChild, TemplateRef, viewChild, input, output, model, afterNextRender, effect, untracked, forwardRef, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { none } from '@mirei/ts-collections';
 import { ChipComponent } from '@nanahoshi/mona-ui/chip';
 import * as i1 from '@nanahoshi/mona-ui/dropdowns';
 import { DropdownService, DropdownFooterTemplateDirective, DropdownGroupHeaderTemplateDirective, DropdownHeaderTemplateDirective, DropdownItemTemplateDirective, dropdownPopupThemeVariants, DropdownNoDataTemplateDirective, DropdownPrefixTemplateDirective, DropdownLiveRegionDirective, DropdownDataInputToken, DropdownPopupInputToken, DropdownDataHandlerDirective, DropdownListPopupHandlerDirective } from '@nanahoshi/mona-ui/dropdowns';
-import { createElementControlId, restoreOverlayScroll, rxFromResize } from '@nanahoshi/mona-ui/internal';
+import { themeControlSurfaceClasses, createElementControlId, restoreOverlayScroll, rxFromResize } from '@nanahoshi/mona-ui/internal';
 import { IndicatorIconComponent } from '@nanahoshi/mona-ui/internal/indicator-icon';
 import { ListService, ListComponent, ListGroupHeaderTemplateDirective, ListItemTemplateDirective, ListFooterTemplateDirective, ListHeaderTemplateDirective, ListNoDataTemplateDirective } from '@nanahoshi/mona-ui/internal/list';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
-import { none } from '@mirei/ts-collections';
 import { filter, tap } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -40,23 +38,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             type: Injectable
         }] });
 
-const multiSelectBaseVariants = cva(`
-        flex items-center justify-between
-        border border-input-border outline-none
-        bg-background shadow-xs
-        cursor-pointer
-        focus-within:ring-1 focus-within:ring-primary/40
-        transition-[color,box-shadow,border] ease-in-out duration-300
+const multiSelectBaseThemeVariants = cva(`
+        flex items-center justify-between
+        cursor-pointer
+        ${themeControlSurfaceClasses} text-foreground
+        border border-input-border shadow-(--shadow-control) outline-none
+        transition-[color,box-shadow,border] duration-(--mona-motion-standard) ease-in-out
+        data-[readonly='true']:cursor-default
+        focus-within:border-focus-indicator focus-within:ring-2 focus-within:ring-focus-indicator/35
     `, {
     variants: {
         disabled: {
-            true: "pointer-events-none opacity-50 cursor-not-allowed"
+            true: `
+                    pointer-events-none cursor-not-allowed
+                    bg-disabled-background text-disabled-foreground
+                    border-disabled-border shadow-none
+                `
         },
         focused: {
-            true: "ring-1 ring-primary/40"
+            true: "border-focus-indicator ring-2 ring-focus-indicator/35"
         },
         invalid: {
-            true: "border-error ring-1 ring-error/40",
+            true: "border-error ring-2 ring-error/35 focus-within:border-error focus-within:ring-error/35",
             false: ""
         },
         rounded: {
@@ -71,10 +74,17 @@ const multiSelectBaseVariants = cva(`
             medium: "min-h-9 text-sm",
             large: "min-h-10 text-md"
         }
-    }
+    },
+    compoundVariants: [
+        {
+            focused: true,
+            invalid: true,
+            class: "border-error ring-error/35"
+        }
+    ]
 });
-const multiSelectItemContainerVariants = cva(`
-        flex flex-1 items-center gap-1 flex-wrap p-1
+const multiSelectItemContainerThemeVariants = cva(`
+        flex flex-1 flex-wrap items-center gap-1 p-1
     `, {
     variants: {
         rounded: {
@@ -86,8 +96,8 @@ const multiSelectItemContainerVariants = cva(`
         }
     }
 });
-const multiSelectAffixContainerVariants = cva(`h-full flex flex-none items-center justify-center`);
-const multiSelectIndicatorContainerVariants = cva(`self-center`, {
+const multiSelectAffixContainerThemeVariants = cva(`flex h-full flex-none items-center justify-center`);
+const multiSelectIndicatorContainerThemeVariants = cva(`self-center`, {
     variants: {
         size: {
             small: "h-8",
@@ -97,39 +107,6 @@ const multiSelectIndicatorContainerVariants = cva(`self-center`, {
     }
 });
 
-const multiSelectBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return multiSelectBaseVariants;
-        default:
-            return multiSelectBaseVariants;
-    }
-};
-const multiSelectItemContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return multiSelectItemContainerVariants;
-        default:
-            return multiSelectItemContainerVariants;
-    }
-};
-const multiSelectAffixContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return multiSelectAffixContainerVariants;
-        default:
-            return multiSelectAffixContainerVariants;
-    }
-};
-const multiSelectIndicatorContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return multiSelectIndicatorContainerVariants;
-        default:
-            return multiSelectIndicatorContainerVariants;
-    }
-};
-
 class MultiSelectComponent {
     #destroyRef;
     #dropdownService;
@@ -137,7 +114,6 @@ class MultiSelectComponent {
     #listService;
     #multiSelectService;
     #popupRef;
-    #themeService;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#dropdownService = inject(DropdownService);
@@ -145,25 +121,22 @@ class MultiSelectComponent {
         this.#listService = inject((ListService));
         this.#multiSelectService = inject(MultiSelectService);
         this.#popupRef = this.#dropdownService.popupRef;
-        this.#themeService = inject(ThemeService);
         this.activeDescendant = computed(() => {
             const highlightedItem = this.#listService.highlightedItem();
             return highlightedItem ? highlightedItem.uid : null;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeDescendant" }] : /* istanbul ignore next */ []));
         this.affixClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return multiSelectAffixContainerThemeVariants(theme)();
+            return multiSelectAffixContainerThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "affixClass" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const disabled = this.disabled();
             const focused = this.#popupRef() != null;
             const invalid = this.invalidState();
             const rounded = this.rounded();
             const size = this.size();
-            const variantClass = multiSelectBaseThemeVariants(theme)({ disabled, focused, invalid, rounded, size });
+            const variantClass = multiSelectBaseThemeVariants({ disabled, focused, invalid, rounded, size });
             const userClass = this.userClass();
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
@@ -176,25 +149,22 @@ class MultiSelectComponent {
         this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && none(this.value())), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.indicatorClass = computed(() => {
-            const theme = this.#themeService.theme();
             const size = this.size();
-            return multiSelectIndicatorContainerThemeVariants(theme)({ size });
+            return multiSelectIndicatorContainerThemeVariants({ size });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "indicatorClass" }] : /* istanbul ignore next */ []));
         this.itemContainerClass = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
-            return multiSelectItemContainerThemeVariants(theme)({ rounded });
+            return multiSelectItemContainerThemeVariants({ rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "itemContainerClass" }] : /* istanbul ignore next */ []));
         this.itemTemplate = contentChild(DropdownItemTemplateDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.listId = createElementControlId();
         this.listPopupClass = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
             const size = this.size();
             const userClass = this.popupClass();
-            const variantClass = dropdownPopupThemeVariants(theme)({ rounded, size });
+            const variantClass = dropdownPopupThemeVariants({ rounded, size });
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listPopupClass" }] : /* istanbul ignore next */ []));
@@ -522,7 +492,7 @@ class MultiSelectComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: MultiSelectComponent, isStandalone: true, selector: "mona-multi-select", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null }, checkboxes: { classPropertyName: "checkboxes", publicName: "checkboxes", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, itemDisabled: { classPropertyName: "itemDisabled", publicName: "itemDisabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, popupHeight: { classPropertyName: "popupHeight", publicName: "popupHeight", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", closed: "closed", disabled: "disabledChange", open: "open", opened: "opened", touch: "touch", value: "valueChange" }, host: { listeners: { "blur": "onBlur()" }, properties: { "attr.aria-activedescendant": "activeDescendant()", "attr.aria-busy": "loading() ? 'true' : undefined", "attr.aria-controls": "listId", "attr.aria-disabled": "disabled() ? true : undefined", "attr.aria-expanded": "expanded()", "attr.aria-haspopup": "'listbox'", "attr.aria-invalid": "invalidState() ? true : undefined", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.aria-readonly": "readonly() ? true : undefined", "attr.aria-required": "required() ? true : undefined", "attr.role": "'combobox'", "attr.tabindex": "disabled() ? null : 0", "attr.data-invalid": "invalidState() || null", "class": "baseClass()" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: MultiSelectComponent, isStandalone: true, selector: "mona-multi-select", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null }, checkboxes: { classPropertyName: "checkboxes", publicName: "checkboxes", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, itemDisabled: { classPropertyName: "itemDisabled", publicName: "itemDisabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, popupHeight: { classPropertyName: "popupHeight", publicName: "popupHeight", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", closed: "closed", disabled: "disabledChange", open: "open", opened: "opened", touch: "touch", value: "valueChange" }, host: { listeners: { "blur": "onBlur()" }, properties: { "attr.aria-activedescendant": "activeDescendant()", "attr.aria-busy": "loading() ? 'true' : undefined", "attr.aria-controls": "listId", "attr.aria-disabled": "disabled() ? true : undefined", "attr.aria-expanded": "expanded()", "attr.aria-haspopup": "'listbox'", "attr.aria-invalid": "invalidState() ? true : undefined", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.aria-readonly": "readonly() ? true : undefined", "attr.aria-required": "required() ? true : undefined", "attr.data-disabled": "disabled() || null", "attr.data-invalid": "invalidState() || null", "attr.data-readonly": "readonly() || null", "attr.role": "'combobox'", "attr.tabindex": "disabled() ? null : 0", "class": "baseClass()" } }, providers: [
             ListService,
             DropdownService,
             MultiSelectService,
@@ -536,7 +506,7 @@ class MultiSelectComponent {
                 useExisting: forwardRef(() => MultiSelectComponent),
                 multi: false
             }
-        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: DropdownFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: DropdownGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: DropdownHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: DropdownItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: DropdownNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DropdownPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "tagTemplate", first: true, predicate: MultiSelectTagTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownDataHandlerDirective }, { directive: i1.DropdownListPopupHandlerDirective }], ngImport: i0, template: "@if (prefixTemplate()) {\r\n    <span [class]=\"affixClass()\">\r\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\r\n    </span>\r\n}\r\n\r\n<div [class]=\"itemContainerClass()\">\r\n    @for (pair of valueTextMap(); track pair.key) {\r\n        <mona-chip\r\n            look=\"default\"\r\n            [tabindex]=\"-1\"\r\n            [removable]=\"true\"\r\n            [removeTabIndex]=\"-1\"\r\n            [disabled]=\"disabled()\"\r\n            [rounded]=\"rounded()\"\r\n            [size]=\"size()\"\r\n            (remove)=\"onSelectedItemRemove($event, pair.key!)\">\r\n            @if (tagTemplate()) {\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"tagTemplate()\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: pair.key!.data }\"></ng-container>\r\n            } @else {\r\n                {{ pair.value }}\r\n            }\r\n        </mona-chip>\r\n    }\r\n\r\n    @if (tagCount() >= 0 && selectedListItems().length > tagCount()) {\r\n        <mona-chip\r\n            look=\"outline\"\r\n            [tabindex]=\"-1\"\r\n            [removable]=\"true\"\r\n            [removeTabIndex]=\"-1\"\r\n            [disabled]=\"disabled()\"\r\n            [rounded]=\"rounded()\"\r\n            [size]=\"size()\"\r\n            (remove)=\"onSelectedItemGroupRemove($event)\">\r\n            @let remainingCount = selectedDataItems().length - tagCount();\r\n            @if (summaryTagTemplate()) {\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"summaryTagTemplate()\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: selectedDataItems(), tagCount: tagCount() }\"></ng-container>\r\n            } @else {\r\n                @let itemLabel = remainingCount === 1 ? \"item\" : \"items\";\r\n                + {{ remainingCount }} {{ itemLabel }}\r\n            }\r\n        </mona-chip>\r\n    }\r\n</div>\r\n\r\n@if (showClearButton() && selectedListItems().length !== 0 && !loading()) {\r\n    <mona-indicator-icon\r\n        preset=\"clear\"\r\n        [class]=\"indicatorClass()\"\r\n        [interactive]=\"true\"\r\n        label=\"Clear\"\r\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\r\n}\r\n\r\n@if (loading()) {\r\n    <mona-indicator-icon preset=\"loading\" [class]=\"indicatorClass()\" [size]=\"12\"></mona-indicator-icon>\r\n}\r\n\r\n<mona-indicator-icon preset=\"dropdown\" [class]=\"indicatorClass()\" [size]=\"18\"></mona-indicator-icon>\r\n\r\n<span monaDropdownLiveRegion></span>\r\n\r\n<ng-template #popupTemplate>\r\n    <div [class]=\"listPopupClass()\">\r\n        <mona-list [listId]=\"listId\" [focusOnMount]=\"false\" [size]=\"size()\" (itemSelect)=\"onItemSelect()\">\r\n            @if (footerTemplate()) {\r\n                <ng-template monaListFooterTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (groupHeaderTemplate()) {\r\n                <ng-template monaListGroupHeaderTemplate let-group>\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (headerTemplate()) {\r\n                <ng-template monaListHeaderTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (itemTemplate()) {\r\n                <ng-template monaListItemTemplate let-dataItem>\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"itemTemplate() ?? null\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (noDataTemplate()) {\r\n                <ng-template monaListNoDataTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\r\n                </ng-template>\r\n            }\r\n        </mona-list>\r\n    </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: ChipComponent, selector: "mona-chip", inputs: ["aria-label", "disabled", "label", "look", "removable", "removeLabel", "removeTabIndex", "rounded", "selected", "size", "tabindex", "toggleable", "class", "value"], outputs: ["contentClick", "remove", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }, { kind: "directive", type: DropdownLiveRegionDirective, selector: "span[monaDropdownLiveRegion]" }, { kind: "component", type: IndicatorIconComponent, selector: "mona-indicator-icon", inputs: ["icon", "interactive", "label", "preset", "size", "class"], outputs: ["activate"] }] }); }
+        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: DropdownFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: DropdownGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: DropdownHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: DropdownItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: DropdownNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DropdownPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "tagTemplate", first: true, predicate: MultiSelectTagTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownDataHandlerDirective }, { directive: i1.DropdownListPopupHandlerDirective }], ngImport: i0, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<div [class]=\"itemContainerClass()\">\n    @for (pair of valueTextMap(); track pair.key) {\n        <mona-chip\n            look=\"default\"\n            [tabindex]=\"-1\"\n            [removable]=\"true\"\n            [removeTabIndex]=\"-1\"\n            [disabled]=\"disabled()\"\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            (remove)=\"onSelectedItemRemove($event, pair.key!)\">\n            @if (tagTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"tagTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: pair.key!.data }\"></ng-container>\n            } @else {\n                {{ pair.value }}\n            }\n        </mona-chip>\n    }\n\n    @if (tagCount() >= 0 && selectedListItems().length > tagCount()) {\n        <mona-chip\n            look=\"outline\"\n            [tabindex]=\"-1\"\n            [removable]=\"true\"\n            [removeTabIndex]=\"-1\"\n            [disabled]=\"disabled()\"\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            (remove)=\"onSelectedItemGroupRemove($event)\">\n            @let remainingCount = selectedDataItems().length - tagCount();\n            @if (summaryTagTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"summaryTagTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: selectedDataItems(), tagCount: tagCount() }\"></ng-container>\n            } @else {\n                @let itemLabel = remainingCount === 1 ? \"item\" : \"items\";\n                + {{ remainingCount }} {{ itemLabel }}\n            }\n        </mona-chip>\n    }\n</div>\n\n@if (showClearButton() && selectedListItems().length !== 0 && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [class]=\"indicatorClass()\"\n        [interactive]=\"true\"\n        label=\"Clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [class]=\"indicatorClass()\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [class]=\"indicatorClass()\" [size]=\"18\"></mona-indicator-icon>\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\">\n        <mona-list [listId]=\"listId\" [focusOnMount]=\"false\" [size]=\"size()\" (itemSelect)=\"onItemSelect()\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate() ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: ChipComponent, selector: "mona-chip", inputs: ["aria-label", "disabled", "label", "look", "removable", "removeLabel", "removeTabIndex", "rounded", "selected", "size", "tabindex", "toggleable", "class", "value"], outputs: ["contentClick", "remove", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }, { kind: "directive", type: DropdownLiveRegionDirective, selector: "span[monaDropdownLiveRegion]" }, { kind: "component", type: IndicatorIconComponent, selector: "mona-indicator-icon", inputs: ["icon", "interactive", "label", "preset", "size", "class"], outputs: ["activate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -557,7 +527,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     ], imports: [
                         ChipComponent,
                         NgTemplateOutlet,
-                        FontAwesomeModule,
                         ListComponent,
                         ListGroupHeaderTemplateDirective,
                         ListItemTemplateDirective,
@@ -578,12 +547,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.aria-labelledby]": "ariaLabelledBy()",
                         "[attr.aria-readonly]": "readonly() ? true : undefined",
                         "[attr.aria-required]": "required() ? true : undefined",
+                        "[attr.data-disabled]": "disabled() || null",
+                        "[attr.data-invalid]": "invalidState() || null",
+                        "[attr.data-readonly]": "readonly() || null",
                         "[attr.role]": "'combobox'",
                         "[attr.tabindex]": "disabled() ? null : 0",
-                        "[attr.data-invalid]": "invalidState() || null",
                         "[class]": "baseClass()",
                         "(blur)": "onBlur()"
-                    }, template: "@if (prefixTemplate()) {\r\n    <span [class]=\"affixClass()\">\r\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\r\n    </span>\r\n}\r\n\r\n<div [class]=\"itemContainerClass()\">\r\n    @for (pair of valueTextMap(); track pair.key) {\r\n        <mona-chip\r\n            look=\"default\"\r\n            [tabindex]=\"-1\"\r\n            [removable]=\"true\"\r\n            [removeTabIndex]=\"-1\"\r\n            [disabled]=\"disabled()\"\r\n            [rounded]=\"rounded()\"\r\n            [size]=\"size()\"\r\n            (remove)=\"onSelectedItemRemove($event, pair.key!)\">\r\n            @if (tagTemplate()) {\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"tagTemplate()\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: pair.key!.data }\"></ng-container>\r\n            } @else {\r\n                {{ pair.value }}\r\n            }\r\n        </mona-chip>\r\n    }\r\n\r\n    @if (tagCount() >= 0 && selectedListItems().length > tagCount()) {\r\n        <mona-chip\r\n            look=\"outline\"\r\n            [tabindex]=\"-1\"\r\n            [removable]=\"true\"\r\n            [removeTabIndex]=\"-1\"\r\n            [disabled]=\"disabled()\"\r\n            [rounded]=\"rounded()\"\r\n            [size]=\"size()\"\r\n            (remove)=\"onSelectedItemGroupRemove($event)\">\r\n            @let remainingCount = selectedDataItems().length - tagCount();\r\n            @if (summaryTagTemplate()) {\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"summaryTagTemplate()\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: selectedDataItems(), tagCount: tagCount() }\"></ng-container>\r\n            } @else {\r\n                @let itemLabel = remainingCount === 1 ? \"item\" : \"items\";\r\n                + {{ remainingCount }} {{ itemLabel }}\r\n            }\r\n        </mona-chip>\r\n    }\r\n</div>\r\n\r\n@if (showClearButton() && selectedListItems().length !== 0 && !loading()) {\r\n    <mona-indicator-icon\r\n        preset=\"clear\"\r\n        [class]=\"indicatorClass()\"\r\n        [interactive]=\"true\"\r\n        label=\"Clear\"\r\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\r\n}\r\n\r\n@if (loading()) {\r\n    <mona-indicator-icon preset=\"loading\" [class]=\"indicatorClass()\" [size]=\"12\"></mona-indicator-icon>\r\n}\r\n\r\n<mona-indicator-icon preset=\"dropdown\" [class]=\"indicatorClass()\" [size]=\"18\"></mona-indicator-icon>\r\n\r\n<span monaDropdownLiveRegion></span>\r\n\r\n<ng-template #popupTemplate>\r\n    <div [class]=\"listPopupClass()\">\r\n        <mona-list [listId]=\"listId\" [focusOnMount]=\"false\" [size]=\"size()\" (itemSelect)=\"onItemSelect()\">\r\n            @if (footerTemplate()) {\r\n                <ng-template monaListFooterTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (groupHeaderTemplate()) {\r\n                <ng-template monaListGroupHeaderTemplate let-group>\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (headerTemplate()) {\r\n                <ng-template monaListHeaderTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (itemTemplate()) {\r\n                <ng-template monaListItemTemplate let-dataItem>\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"itemTemplate() ?? null\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (noDataTemplate()) {\r\n                <ng-template monaListNoDataTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\r\n                </ng-template>\r\n            }\r\n        </mona-list>\r\n    </div>\r\n</ng-template>\r\n" }]
+                    }, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<div [class]=\"itemContainerClass()\">\n    @for (pair of valueTextMap(); track pair.key) {\n        <mona-chip\n            look=\"default\"\n            [tabindex]=\"-1\"\n            [removable]=\"true\"\n            [removeTabIndex]=\"-1\"\n            [disabled]=\"disabled()\"\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            (remove)=\"onSelectedItemRemove($event, pair.key!)\">\n            @if (tagTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"tagTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: pair.key!.data }\"></ng-container>\n            } @else {\n                {{ pair.value }}\n            }\n        </mona-chip>\n    }\n\n    @if (tagCount() >= 0 && selectedListItems().length > tagCount()) {\n        <mona-chip\n            look=\"outline\"\n            [tabindex]=\"-1\"\n            [removable]=\"true\"\n            [removeTabIndex]=\"-1\"\n            [disabled]=\"disabled()\"\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            (remove)=\"onSelectedItemGroupRemove($event)\">\n            @let remainingCount = selectedDataItems().length - tagCount();\n            @if (summaryTagTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"summaryTagTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: selectedDataItems(), tagCount: tagCount() }\"></ng-container>\n            } @else {\n                @let itemLabel = remainingCount === 1 ? \"item\" : \"items\";\n                + {{ remainingCount }} {{ itemLabel }}\n            }\n        </mona-chip>\n    }\n</div>\n\n@if (showClearButton() && selectedListItems().length !== 0 && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [class]=\"indicatorClass()\"\n        [interactive]=\"true\"\n        label=\"Clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [class]=\"indicatorClass()\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [class]=\"indicatorClass()\" [size]=\"18\"></mona-indicator-icon>\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\">\n        <mona-list [listId]=\"listId\" [focusOnMount]=\"false\" [size]=\"size()\" (itemSelect)=\"onItemSelect()\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate() ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], groupHeaderTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownGroupHeaderTemplateDirective), { ...{
                             read: TemplateRef
                         }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], popupTemplate: [{ type: i0.ViewChild, args: ["popupTemplate", { isSignal: true }] }], prefixTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownPrefixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], tagTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MultiSelectTagTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], autoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClose", required: false }] }], checkboxes: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxes", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], closed: [{ type: i0.Output, args: ["closed"] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], itemDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDisabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], opened: [{ type: i0.Output, args: ["opened"] }], popupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupClass", required: false }] }], popupHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeight", required: false }] }], popupWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupWidth", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });

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

@@ -2,8 +2,8 @@ import * as i0 from '@angular/core';
 import { inject, DestroyRef, computed, signal, TemplateRef, viewChild, ViewContainerRef, input, afterNextRender, Component, ApplicationRef, DOCUMENT as DOCUMENT$1, createComponent, Injectable } from '@angular/core';
 import { interval, takeWhile, asyncScheduler, Subject, take } from 'rxjs';
 import { v4 } from 'uuid';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { cva } from 'class-variance-authority';
+import { themeOverlaySurfaceClasses } from '@nanahoshi/mona-ui/internal';
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { LucideOctagonX, LucideBadgeInfo, LucideCircleCheckBig, LucideOctagonAlert, LucideX } from '@lucide/angular';
@@ -13,7 +13,7 @@ import { ProgressBarComponent } from '@nanahoshi/mona-ui/progress-bar';
 //---------------------------------
 // Notification Container Component
 //---------------------------------
-const notificationContainerBaseVariants = cva(`p-2 z-40000`, {
+const notificationContainerBaseThemeVariants = cva(`p-2 z-40000`, {
     variants: {
         position: {
             bottom: "bottom-0 left-1/2 -translate-x-1/2",
@@ -35,31 +35,29 @@ const notificationContainerBaseVariants = cva(`p-2 z-40000`, {
 //-----------------------
 // Notification Component
 //-----------------------
-const notificationActionVariants = cva(`
-        absolute top-0 right-0
-        flex items-start h-auto
-        [&>svg.lucide]:cursor-pointer
-        [&>svg.lucide]:-mt-1
+const notificationActionThemeVariants = cva(`
+        absolute top-0 right-0 flex h-auto items-start
+        [&>svg.lucide]:cursor-pointer
+        [&>svg.lucide]:-mt-1
     `);
-const notificationBaseVariants = cva(`
-        w-fit h-fit relative
-        overflow-hidden flex flex-col
-        mb-2 bg-background shadow-md
-        border border-border
+const notificationBaseThemeVariants = cva(`
+        relative mb-2 flex h-fit w-fit flex-col overflow-hidden
+        ${themeOverlaySurfaceClasses} text-foreground
+        border border-border shadow-(--shadow-overlay)
     `);
-const notificationBodyVariants = cva(`
-        flex flex-1 p-2 ps-0 pe-8
+const notificationBodyThemeVariants = cva(`
+        flex flex-1 p-2 ps-0 pe-8
     `);
-const notificationContentVariants = cva(`
-        flex flex-1 w-full items-center
+const notificationContentThemeVariants = cva(`
+        flex w-full flex-1 items-center
     `);
-const notificationHeaderVariants = cva(`
-        w-full flex flex-row items-center
-        flex-1 text-sm font-medium
-        select-none
+const notificationHeaderThemeVariants = cva(`
+        flex w-full flex-1 flex-row items-center
+        text-sm font-medium
+        select-none
     `);
-const notificationIconVariants = cva(`
-        flex items-center justify-center px-4
+const notificationIconThemeVariants = cva(`
+        flex items-center justify-center px-4
     `, {
     variants: {
         type: {
@@ -70,86 +68,15 @@ const notificationIconVariants = cva(`
         }
     }
 });
-const notificationTextVariants = cva(`
-        text-sm text-foreground
+const notificationTextThemeVariants = cva(`
+        text-sm text-foreground
     `);
 
-const notificationContainerBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return notificationContainerBaseVariants;
-        default:
-            return notificationContainerBaseVariants;
-    }
-};
-const notificationActionThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return notificationActionVariants;
-        default:
-            return notificationActionVariants;
-    }
-};
-const notificationBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return notificationBaseVariants;
-        default:
-            return notificationBaseVariants;
-    }
-};
-const notificationBodyThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return notificationBodyVariants;
-        default:
-            return notificationBodyVariants;
-    }
-};
-const notificationContentThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return notificationContentVariants;
-        default:
-            return notificationContentVariants;
-    }
-};
-const notificationHeaderThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return notificationHeaderVariants;
-        default:
-            return notificationHeaderVariants;
-    }
-};
-const notificationIconThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return notificationIconVariants;
-        default:
-            return notificationIconVariants;
-    }
-};
-const notificationTextThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return notificationTextVariants;
-        default:
-            return notificationTextVariants;
-    }
-};
-// type NotificationBaseVariantProps = VariantProps<ReturnType<typeof notificationBaseThemeVariants>>;
-// type NotificationBaseVariantInput = VariantInputs<NotificationBaseVariantProps>;
-//
-// export type NotificationVariantProps = NotificationBaseVariantProps;
-// export type NotificationVariantInput = NotificationBaseVariantInput;
-
 class NotificationComponent {
     #destroyRef;
     #document;
     #isUrgent;
     #paused;
-    #themeService;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#document = inject(DOCUMENT);
@@ -157,27 +84,22 @@ class NotificationComponent {
         ...(ngDevMode ? [{ debugName: "#isUrgent" }] : /* istanbul ignore next */ []));
         this.#paused = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#paused" }] : /* istanbul ignore next */ []));
-        this.#themeService = inject(ThemeService);
         this.actionClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return notificationActionThemeVariants(theme)();
+            return notificationActionThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "actionClass" }] : /* istanbul ignore next */ []));
         this.ariaLive = computed(() => (this.#isUrgent() ? "assertive" : "polite"), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLive" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return notificationBaseThemeVariants(theme)();
+            return notificationBaseThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.bodyClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return notificationBodyThemeVariants(theme)();
+            return notificationBodyThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "bodyClass" }] : /* istanbul ignore next */ []));
         this.contentClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return notificationContentThemeVariants(theme)();
+            return notificationContentThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
         this.contentComponent = computed(() => {
@@ -192,14 +114,12 @@ class NotificationComponent {
         ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
         this.contentHost = viewChild("contentHost", { ...(ngDevMode ? { debugName: "contentHost" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
         this.headerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return notificationHeaderThemeVariants(theme)();
+            return notificationHeaderThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
         this.iconClass = computed(() => {
-            const theme = this.#themeService.theme();
             const type = this.type();
-            return notificationIconThemeVariants(theme)({ type });
+            return notificationIconThemeVariants({ type });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
         this.isStringContent = computed(() => typeof this.data().options.content === "string", /* @ts-ignore */
@@ -215,8 +135,7 @@ class NotificationComponent {
         this.role = computed(() => (this.#isUrgent() ? "alert" : "status"), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
         this.textClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return notificationTextThemeVariants(theme)();
+            return notificationTextThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "textClass" }] : /* istanbul ignore next */ []));
         this.type = computed(() => this.data().options.type ?? "info", /* @ts-ignore */
@@ -270,7 +189,7 @@ class NotificationComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NotificationComponent, isStandalone: true, selector: "mona-notification", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "pointerenter": "onInteractionStart()", "pointerleave": "onInteractionEnd()", "focusin": "onInteractionStart()", "focusout": "onInteractionEnd()" } }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@let width = typeof data().options.width === \"string\" ? data().options.width : `${data().options.width}px`;\r\n@let height = typeof data().options.height === \"string\" ? data().options.height : `${data().options.height}px`;\r\n\r\n<div\r\n    [class]=\"baseClass()\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    [attr.role]=\"role()\"\r\n    [attr.aria-live]=\"ariaLive()\">\r\n    @if (contentTemplate() || contentComponent()) {\r\n        @if (contentTemplate()) {\r\n            <ng-container [ngTemplateOutlet]=\"contentTemplate()\"></ng-container>\r\n        } @else if (contentComponent()) {\r\n            <ng-container #contentHost></ng-container>\r\n        }\r\n    } @else {\r\n        <div [class]=\"bodyClass()\">\r\n            <div [class]=\"iconClass()\" aria-hidden=\"true\">\r\n                @switch (type()) {\r\n                    @case (\"error\") {\r\n                        <svg lucideOctagonX aria-hidden=\"true\"></svg>\r\n                    }\r\n                    @case (\"info\") {\r\n                        <svg lucideBadgeInfo aria-hidden=\"true\"></svg>\r\n                    }\r\n                    @case (\"success\") {\r\n                        <svg lucideCircleCheckBig aria-hidden=\"true\"></svg>\r\n                    }\r\n                    @case (\"warning\") {\r\n                        <svg lucideOctagonAlert aria-hidden=\"true\"></svg>\r\n                    }\r\n                }\r\n            </div>\r\n            <div class=\"flex flex-col flex-1\">\r\n                <div [class]=\"headerClass()\">{{ data().options.title }}</div>\r\n                <div [class]=\"contentClass()\">\r\n                    @if (isStringContent()) {\r\n                        <span [class]=\"textClass()\" title=\"{{ data().options.content }}\">{{\r\n                            data().options.content\r\n                        }}</span>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        @if (data().options.progressBar) {\r\n            <div class=\"w-full h-1\">\r\n                <mona-progress-bar\r\n                    [value]=\"progressValue()\"\r\n                    [color]=\"progressColor()\"\r\n                    [labelVisible]=\"false\"\r\n                    [animate]=\"false\"\r\n                    rounded=\"none\"\r\n                    class=\"h-full\"></mona-progress-bar>\r\n            </div>\r\n        }\r\n    }\r\n    @if (data().options.closable) {\r\n        <div [class]=\"actionClass()\">\r\n            <button\r\n                monaButton\r\n                size=\"small\"\r\n                look=\"link\"\r\n                rounded=\"none\"\r\n                [iconOnly]=\"true\"\r\n                [title]=\"data().options.closeTitle || 'Close'\"\r\n                [attr.aria-label]=\"data().options.closeTitle || 'Close'\"\r\n                (click)=\"close()\">\r\n                <svg lucideX [size]=\"14\" aria-hidden=\"true\"></svg>\r\n            </button>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [":host{display:block}@keyframes notification-slide-in-top{0%{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-top{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}}@keyframes notification-slide-in-bottom{0%{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-bottom{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}}:host.notification-enter-top{animation:notification-slide-in-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-enter-bottom{animation:notification-slide-in-bottom .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-top{animation:notification-slide-out-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-bottom{animation:notification-slide-out-bottom .3s cubic-bezier(.4,0,.2,1) forwards}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ProgressBarComponent, selector: "mona-progress-bar", inputs: ["aria-label", "aria-valuetext", "animate", "color", "disabled", "indeterminate", "labelPosition", "labelStyles", "labelVisible", "max", "min", "rounded", "class", "value"] }, { 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: "component", type: LucideOctagonX, selector: "svg[lucideOctagonX], svg[lucideXOctagon]" }, { kind: "component", type: LucideBadgeInfo, selector: "svg[lucideBadgeInfo]" }, { kind: "component", type: LucideCircleCheckBig, selector: "svg[lucideCircleCheckBig], svg[lucideCheckCircle]" }, { kind: "component", type: LucideOctagonAlert, selector: "svg[lucideOctagonAlert], svg[lucideAlertOctagon]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NotificationComponent, isStandalone: true, selector: "mona-notification", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "pointerenter": "onInteractionStart()", "pointerleave": "onInteractionEnd()", "focusin": "onInteractionStart()", "focusout": "onInteractionEnd()" } }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@let width = typeof data().options.width === \"string\" ? data().options.width : `${data().options.width}px`;\n@let height = typeof data().options.height === \"string\" ? data().options.height : `${data().options.height}px`;\n\n<div\n    [class]=\"baseClass()\"\n    [style.width]=\"width\"\n    [style.height]=\"height\"\n    [attr.role]=\"role()\"\n    [attr.aria-live]=\"ariaLive()\">\n    @if (contentTemplate() || contentComponent()) {\n        @if (contentTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"contentTemplate()\"></ng-container>\n        } @else if (contentComponent()) {\n            <ng-container #contentHost></ng-container>\n        }\n    } @else {\n        <div [class]=\"bodyClass()\">\n            <div [class]=\"iconClass()\" aria-hidden=\"true\">\n                @switch (type()) {\n                    @case (\"error\") {\n                        <svg lucideOctagonX aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"info\") {\n                        <svg lucideBadgeInfo aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"success\") {\n                        <svg lucideCircleCheckBig aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"warning\") {\n                        <svg lucideOctagonAlert aria-hidden=\"true\"></svg>\n                    }\n                }\n            </div>\n            <div class=\"flex flex-col flex-1\">\n                <div [class]=\"headerClass()\">{{ data().options.title }}</div>\n                <div [class]=\"contentClass()\">\n                    @if (isStringContent()) {\n                        <span [class]=\"textClass()\" title=\"{{ data().options.content }}\">{{\n                            data().options.content\n                        }}</span>\n                    }\n                </div>\n            </div>\n        </div>\n        @if (data().options.progressBar) {\n            <div class=\"w-full h-1\">\n                <mona-progress-bar\n                    [value]=\"progressValue()\"\n                    [color]=\"progressColor()\"\n                    [labelVisible]=\"false\"\n                    [animate]=\"false\"\n                    rounded=\"none\"\n                    class=\"h-full\"></mona-progress-bar>\n            </div>\n        }\n    }\n    @if (data().options.closable) {\n        <div [class]=\"actionClass()\">\n            <button\n                monaButton\n                size=\"small\"\n                look=\"link\"\n                rounded=\"none\"\n                [iconOnly]=\"true\"\n                [title]=\"data().options.closeTitle || 'Close'\"\n                [attr.aria-label]=\"data().options.closeTitle || 'Close'\"\n                (click)=\"close()\">\n                <svg lucideX [size]=\"14\" aria-hidden=\"true\"></svg>\n            </button>\n        </div>\n    }\n</div>\n", styles: [":host{display:block}@keyframes notification-slide-in-top{0%{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-top{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}}@keyframes notification-slide-in-bottom{0%{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-bottom{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}}:host.notification-enter-top{animation:notification-slide-in-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-enter-bottom{animation:notification-slide-in-bottom .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-top{animation:notification-slide-out-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-bottom{animation:notification-slide-out-bottom .3s cubic-bezier(.4,0,.2,1) forwards}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ProgressBarComponent, selector: "mona-progress-bar", inputs: ["aria-label", "aria-valuetext", "animate", "color", "disabled", "indeterminate", "labelPosition", "labelStyles", "labelVisible", "max", "min", "rounded", "class", "value"] }, { 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: "component", type: LucideOctagonX, selector: "svg[lucideOctagonX], svg[lucideXOctagon]" }, { kind: "component", type: LucideBadgeInfo, selector: "svg[lucideBadgeInfo]" }, { kind: "component", type: LucideCircleCheckBig, selector: "svg[lucideCircleCheckBig], svg[lucideCheckCircle]" }, { kind: "component", type: LucideOctagonAlert, selector: "svg[lucideOctagonAlert], svg[lucideAlertOctagon]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NotificationComponent, decorators: [{
             type: Component,
@@ -288,17 +207,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "(pointerleave)": "onInteractionEnd()",
                         "(focusin)": "onInteractionStart()",
                         "(focusout)": "onInteractionEnd()"
-                    }, template: "@let width = typeof data().options.width === \"string\" ? data().options.width : `${data().options.width}px`;\r\n@let height = typeof data().options.height === \"string\" ? data().options.height : `${data().options.height}px`;\r\n\r\n<div\r\n    [class]=\"baseClass()\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    [attr.role]=\"role()\"\r\n    [attr.aria-live]=\"ariaLive()\">\r\n    @if (contentTemplate() || contentComponent()) {\r\n        @if (contentTemplate()) {\r\n            <ng-container [ngTemplateOutlet]=\"contentTemplate()\"></ng-container>\r\n        } @else if (contentComponent()) {\r\n            <ng-container #contentHost></ng-container>\r\n        }\r\n    } @else {\r\n        <div [class]=\"bodyClass()\">\r\n            <div [class]=\"iconClass()\" aria-hidden=\"true\">\r\n                @switch (type()) {\r\n                    @case (\"error\") {\r\n                        <svg lucideOctagonX aria-hidden=\"true\"></svg>\r\n                    }\r\n                    @case (\"info\") {\r\n                        <svg lucideBadgeInfo aria-hidden=\"true\"></svg>\r\n                    }\r\n                    @case (\"success\") {\r\n                        <svg lucideCircleCheckBig aria-hidden=\"true\"></svg>\r\n                    }\r\n                    @case (\"warning\") {\r\n                        <svg lucideOctagonAlert aria-hidden=\"true\"></svg>\r\n                    }\r\n                }\r\n            </div>\r\n            <div class=\"flex flex-col flex-1\">\r\n                <div [class]=\"headerClass()\">{{ data().options.title }}</div>\r\n                <div [class]=\"contentClass()\">\r\n                    @if (isStringContent()) {\r\n                        <span [class]=\"textClass()\" title=\"{{ data().options.content }}\">{{\r\n                            data().options.content\r\n                        }}</span>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        @if (data().options.progressBar) {\r\n            <div class=\"w-full h-1\">\r\n                <mona-progress-bar\r\n                    [value]=\"progressValue()\"\r\n                    [color]=\"progressColor()\"\r\n                    [labelVisible]=\"false\"\r\n                    [animate]=\"false\"\r\n                    rounded=\"none\"\r\n                    class=\"h-full\"></mona-progress-bar>\r\n            </div>\r\n        }\r\n    }\r\n    @if (data().options.closable) {\r\n        <div [class]=\"actionClass()\">\r\n            <button\r\n                monaButton\r\n                size=\"small\"\r\n                look=\"link\"\r\n                rounded=\"none\"\r\n                [iconOnly]=\"true\"\r\n                [title]=\"data().options.closeTitle || 'Close'\"\r\n                [attr.aria-label]=\"data().options.closeTitle || 'Close'\"\r\n                (click)=\"close()\">\r\n                <svg lucideX [size]=\"14\" aria-hidden=\"true\"></svg>\r\n            </button>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [":host{display:block}@keyframes notification-slide-in-top{0%{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-top{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}}@keyframes notification-slide-in-bottom{0%{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-bottom{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}}:host.notification-enter-top{animation:notification-slide-in-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-enter-bottom{animation:notification-slide-in-bottom .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-top{animation:notification-slide-out-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-bottom{animation:notification-slide-out-bottom .3s cubic-bezier(.4,0,.2,1) forwards}\n"] }]
+                    }, template: "@let width = typeof data().options.width === \"string\" ? data().options.width : `${data().options.width}px`;\n@let height = typeof data().options.height === \"string\" ? data().options.height : `${data().options.height}px`;\n\n<div\n    [class]=\"baseClass()\"\n    [style.width]=\"width\"\n    [style.height]=\"height\"\n    [attr.role]=\"role()\"\n    [attr.aria-live]=\"ariaLive()\">\n    @if (contentTemplate() || contentComponent()) {\n        @if (contentTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"contentTemplate()\"></ng-container>\n        } @else if (contentComponent()) {\n            <ng-container #contentHost></ng-container>\n        }\n    } @else {\n        <div [class]=\"bodyClass()\">\n            <div [class]=\"iconClass()\" aria-hidden=\"true\">\n                @switch (type()) {\n                    @case (\"error\") {\n                        <svg lucideOctagonX aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"info\") {\n                        <svg lucideBadgeInfo aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"success\") {\n                        <svg lucideCircleCheckBig aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"warning\") {\n                        <svg lucideOctagonAlert aria-hidden=\"true\"></svg>\n                    }\n                }\n            </div>\n            <div class=\"flex flex-col flex-1\">\n                <div [class]=\"headerClass()\">{{ data().options.title }}</div>\n                <div [class]=\"contentClass()\">\n                    @if (isStringContent()) {\n                        <span [class]=\"textClass()\" title=\"{{ data().options.content }}\">{{\n                            data().options.content\n                        }}</span>\n                    }\n                </div>\n            </div>\n        </div>\n        @if (data().options.progressBar) {\n            <div class=\"w-full h-1\">\n                <mona-progress-bar\n                    [value]=\"progressValue()\"\n                    [color]=\"progressColor()\"\n                    [labelVisible]=\"false\"\n                    [animate]=\"false\"\n                    rounded=\"none\"\n                    class=\"h-full\"></mona-progress-bar>\n            </div>\n        }\n    }\n    @if (data().options.closable) {\n        <div [class]=\"actionClass()\">\n            <button\n                monaButton\n                size=\"small\"\n                look=\"link\"\n                rounded=\"none\"\n                [iconOnly]=\"true\"\n                [title]=\"data().options.closeTitle || 'Close'\"\n                [attr.aria-label]=\"data().options.closeTitle || 'Close'\"\n                (click)=\"close()\">\n                <svg lucideX [size]=\"14\" aria-hidden=\"true\"></svg>\n            </button>\n        </div>\n    }\n</div>\n", styles: [":host{display:block}@keyframes notification-slide-in-top{0%{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-top{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}}@keyframes notification-slide-in-bottom{0%{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-bottom{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}}:host.notification-enter-top{animation:notification-slide-in-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-enter-bottom{animation:notification-slide-in-bottom .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-top{animation:notification-slide-out-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-bottom{animation:notification-slide-out-bottom .3s cubic-bezier(.4,0,.2,1) forwards}\n"] }]
         }], ctorParameters: () => [], propDecorators: { contentHost: [{ type: i0.ViewChild, args: ["contentHost", { ...{ read: ViewContainerRef }, isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
 
 class NotificationContainerComponent {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const position = this.position();
             const positionType = this.positionType();
-            return notificationContainerBaseThemeVariants(theme)({ position, positionType });
+            return notificationContainerBaseThemeVariants({ position, positionType });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.enterAnimClass = computed(() => this.position().startsWith("bottom") ? "notification-enter-bottom" : "notification-enter-top", /* @ts-ignore */
@@ -312,7 +229,6 @@ class NotificationContainerComponent {
         this.positionType = signal("fixed", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "positionType" }] : /* istanbul ignore next */ []));
     }
-    #themeService;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NotificationContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NotificationContainerComponent, isStandalone: true, selector: "mona-notification-container", host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "@for (notificationData of notificationDataList(); track notificationData.options.id) {\n    <mona-notification [data]=\"notificationData\" [animate.enter]=\"enterAnimClass()\" [animate.leave]=\"leaveAnimClass()\">\n    </mona-notification>\n}\n", dependencies: [{ kind: "component", type: NotificationComponent, selector: "mona-notification", inputs: ["data"] }] }); }
 }