@nanahoshi/mona-ui 0.1.0 → 0.2.0

package/auto-complete/package.json

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

package/avatar/package.json

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

package/breadcrumb/package.json

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

package/button/package.json

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

package/button-group/package.json

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

package/calendar/package.json

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

package/check-box/package.json

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

package/chip/package.json

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

package/circular-progress-bar/package.json

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

package/color-gradient/package.json

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

package/color-palette/package.json

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

package/color-picker/package.json

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

package/combo-box/package.json

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

package/common/package.json

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

package/contextmenu/package.json

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

package/date-input/package.json

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

package/date-picker/package.json

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

package/datetime-picker/package.json

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

package/dialog/package.json

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

package/dropdown-button/package.json

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

package/dropdown-list/package.json

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

package/dropdowns/package.json

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

package/editor/package.json

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

package/expansion-panel/package.json

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

package/fesm2022/nanahoshi-mona-ui-auto-complete.mjs

@@ -4,37 +4,41 @@ import { inject, DestroyRef, ElementRef, computed, linkedSignal, contentChild, T
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { createElementControlId, rxTimeout } from '@nanahoshi/mona-ui/internal';
+import { themeControlSurfaceClasses, createElementControlId, rxTimeout } from '@nanahoshi/mona-ui/internal';
 import { FilterChangeEvent } from '@nanahoshi/mona-ui/common';
 import { IndicatorIconComponent } from '@nanahoshi/mona-ui/internal/indicator-icon';
 import { ListService, ListComponent, ListGroupHeaderTemplateDirective, ListFooterTemplateDirective, ListHeaderTemplateDirective, ListNoDataTemplateDirective, ListItemTemplateDirective } from '@nanahoshi/mona-ui/internal/list';
 import * as i1 from '@nanahoshi/mona-ui/dropdowns';
 import { DropdownService, DropdownFooterTemplateDirective, DropdownGroupHeaderTemplateDirective, DropdownHeaderTemplateDirective, DropdownItemTemplateDirective, dropdownPopupThemeVariants, DropdownNoDataTemplateDirective, DropdownPrefixTemplateDirective, DropdownSuffixTemplateDirective, DropdownLiveRegionDirective, DropdownDataInputToken, DropdownPopupInputToken, DropdownDataHandlerDirective, DropdownListPopupHandlerDirective } from '@nanahoshi/mona-ui/dropdowns';
 import { TextBoxDirective } from '@nanahoshi/mona-ui/text-box';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { Subject, filter, debounceTime, identity, take, tap } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
-const autoCompleteBaseVariants = cva(`
-        flex
-        border border-input-border outline-none
-        bg-background shadow-xs
-        focus-within:ring-1 focus-within:ring-primary/40
-        transition-[color,box-shadow,border] ease-in-out duration-300
+const autoCompleteBaseThemeVariants = cva(`
+        flex
+        ${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
+                `
         },
         expanded: {
-            true: "ring-1 ring-primary/40"
+            true: "border-focus-indicator ring-2 ring-focus-indicator/35"
         },
         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: {
@@ -50,6 +54,18 @@ const autoCompleteBaseVariants = cva(`
             small: "h-8 text-xs"
         }
     },
+    compoundVariants: [
+        {
+            expanded: true,
+            invalid: true,
+            class: "border-error ring-error/35"
+        },
+        {
+            focused: true,
+            invalid: true,
+            class: "border-error ring-error/35"
+        }
+    ],
     defaultVariants: {
         disabled: false,
         focused: false,
@@ -58,11 +74,10 @@ const autoCompleteBaseVariants = cva(`
         size: "medium"
     }
 });
-const autoCompleteTextInputVariants = cva(`
-        border-none outline-none
-        bg-transparent shadow-none
-        px-2 h-full w-full text-ellipsis
-        focus-within:ring-0 focus-visible:ring-0
+const autoCompleteTextInputThemeVariants = cva(`
+        h-full w-full px-2 text-ellipsis
+        bg-transparent border-none shadow-none outline-none
+        focus-within:ring-0 focus-visible:ring-0
     `, {
     variants: {
         rounded: {
@@ -74,32 +89,7 @@ const autoCompleteTextInputVariants = cva(`
         }
     }
 });
-const autoCompleteAffixContainerVariants = cva(`h-full flex flex-none items-center justify-center`);
-
-const autoCompleteBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return autoCompleteBaseVariants;
-        default:
-            return autoCompleteBaseVariants;
-    }
-};
-const autoCompleteTextInputThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return autoCompleteTextInputVariants;
-        default:
-            return autoCompleteTextInputVariants;
-    }
-};
-const autoCompleteAffixContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return autoCompleteAffixContainerVariants;
-        default:
-            return autoCompleteAffixContainerVariants;
-    }
-};
+const autoCompleteAffixContainerThemeVariants = cva(`flex h-full flex-none items-center justify-center`);
 
 class AutoCompleteComponent {
     #destroyRef;
@@ -107,36 +97,32 @@ class AutoCompleteComponent {
     #hostElementRef;
     #listService;
     #popupRef;
-    #themeService;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#dropdownService = inject(DropdownService);
         this.#hostElementRef = inject((ElementRef));
         this.#listService = inject(ListService);
         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 autoCompleteAffixContainerThemeVariants(theme)();
+            return autoCompleteAffixContainerThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "affixClass" }] : /* istanbul ignore next */ []));
         this.autoCompleteValue = linkedSignal(() => this.value() ?? "", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "autoCompleteValue" }] : /* istanbul ignore next */ []));
         this.autoCompleteValue$ = new Subject();
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const disabled = this.disabled();
             const expanded = this.expanded();
             const focused = this.#popupRef() !== null;
             const invalid = this.invalidState();
             const rounded = this.rounded();
             const size = this.size();
-            const variantClass = autoCompleteBaseThemeVariants(theme)({
+            const variantClass = autoCompleteBaseThemeVariants({
                 disabled,
                 expanded,
                 focused,
@@ -157,9 +143,8 @@ class AutoCompleteComponent {
         this.headerTemplate = contentChild(DropdownHeaderTemplateDirective, { ...(ngDevMode ? { debugName: "headerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.id = createElementControlId();
         this.inputClass = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
-            return autoCompleteTextInputThemeVariants(theme)({ rounded });
+            return autoCompleteTextInputThemeVariants({ rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
         this.itemTemplate = contentChild(DropdownItemTemplateDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
@@ -169,11 +154,10 @@ class AutoCompleteComponent {
         ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
         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 */ []));
@@ -521,7 +505,7 @@ class AutoCompleteComponent {
         this.value.set(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AutoCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AutoCompleteComponent, isStandalone: true, selector: "mona-auto-complete", inputs: { ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", 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 }, highlightFirst: { classPropertyName: "highlightFirst", publicName: "highlightFirst", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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: { properties: { "attr.aria-disabled": "disabled() ? true : undefined", "attr.aria-haspopup": "'listbox'", "attr.aria-invalid": "invalidState() ? true : undefined", "attr.aria-readonly": "readonly() ? true : undefined", "attr.aria-required": "required() ? true : undefined", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.tabindex": "-1", "class": "baseClass()" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AutoCompleteComponent, isStandalone: true, selector: "mona-auto-complete", inputs: { ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", 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 }, highlightFirst: { classPropertyName: "highlightFirst", publicName: "highlightFirst", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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: { properties: { "attr.aria-disabled": "disabled() ? true : undefined", "attr.aria-haspopup": "'listbox'", "attr.aria-invalid": "invalidState() ? true : undefined", "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.tabindex": "-1", "class": "baseClass()" } }, providers: [
             ListService,
             DropdownService,
             {
@@ -569,8 +553,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.aria-invalid]": "invalidState() ? true : undefined",
                         "[attr.aria-readonly]": "readonly() ? true : undefined",
                         "[attr.aria-required]": "required() ? true : undefined",
-                        "[attr.data-disabled]": "disabled()",
+                        "[attr.data-disabled]": "disabled() || null",
                         "[attr.data-invalid]": "invalidState() || null",
+                        "[attr.data-readonly]": "readonly() || null",
                         "[attr.tabindex]": "-1",
                         "[class]": "baseClass()"
                     }, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<input\n    monaTextBox\n    role=\"combobox\"\n    [class]=\"inputClass()\"\n    [disabled]=\"disabled()\"\n    [id]=\"id\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [ngModel]=\"autoCompleteValue()\"\n    [attr.aria-activedescendant]=\"activeDescendant()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-busy]=\"loading()\"\n    [attr.aria-controls]=\"listId\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || undefined\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-invalid]=\"invalidState() || undefined\"\n    [attr.aria-label]=\"effectiveAriaLabel() || undefined\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || undefined\"\n    (ngModelChange)=\"autoCompleteValue$.next($event)\"\n    (blur)=\"onInputBlur()\" />\n\n@if (showClearButton() && autoCompleteValue() && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [interactive]=\"true\"\n        label=\"Clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n@if (suffixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"suffixTemplate()\"></ng-container>\n    </span>\n}\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\">\n        <mona-list (itemSelect)=\"onItemSelect($event)\" [focusOnMount]=\"false\" [size]=\"size()\" [listId]=\"listId\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n" }]

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

@@ -1,36 +1,34 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, computed, input, Directive, output, viewChild, TemplateRef, Component, contentChildren, contentChild } from '@angular/core';
+import { computed, input, Directive, output, viewChild, TemplateRef, Component, contentChildren, contentChild } from '@angular/core';
 import { LucideChevronRight } from '@lucide/angular';
 import { twMerge } from 'tailwind-merge';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { cva } from 'class-variance-authority';
 
-const breadcrumbListVariants = cva(`
-        flex items-center
-        overflow-hidden gap-1
-        list-none select-none py-1 px-2
+const breadcrumbListThemeVariants = cva(`
+        flex list-none items-center gap-1 overflow-hidden px-2 py-1
+        select-none
     `, {
     variants: {
         disabled: {
-            true: "cursor-not-allowed pointer-events-none opacity-50",
+            true: "pointer-events-none cursor-not-allowed text-disabled-foreground",
             false: ""
         }
     }
 });
-const breadcrumbListItemVariants = cva(`
-        flex items-center
-        truncate cursor-pointer
-        h-full text-primary/70
-        bg-transparent border-0
-        outline-none rounded-sm px-1
-        hover:text-primary
-        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40
-        transition-colors duration-100 ease-in-out
+const breadcrumbListItemThemeVariants = cva(`
+        flex h-full items-center truncate px-1
+        cursor-pointer
+        text-muted-foreground
+        bg-transparent border-0 rounded-sm outline-none
+        transition-colors duration-100 ease-in-out
+        hover:bg-hover hover:text-foreground
+        active:bg-active active:text-foreground
+        focus-visible:ring-2 focus-visible:ring-focus-indicator/35
     `, {
     variants: {
         disabled: {
-            true: "cursor-not-allowed pointer-events-none",
+            true: "pointer-events-none cursor-not-allowed text-disabled-foreground",
             false: ""
         },
         listDisabled: {
@@ -38,48 +36,21 @@ const breadcrumbListItemVariants = cva(`
             false: ""
         }
     },
-    compoundVariants: [{ disabled: true, listDisabled: false, class: "opacity-50" }],
+    compoundVariants: [{ disabled: true, listDisabled: false, class: "text-disabled-foreground" }],
     defaultVariants: {
         disabled: false,
         listDisabled: false
     }
 });
-const breadcrumbCurrentItemVariants = cva(`flex items-center truncate cursor-default font-medium text-primary`);
-
-const breadcrumbListThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return breadcrumbListVariants;
-        default:
-            return breadcrumbListVariants;
-    }
-};
-const breadcrumbListItemThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return breadcrumbListItemVariants;
-        default:
-            return breadcrumbListItemVariants;
-    }
-};
-const breadcrumbCurrentItemThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return breadcrumbCurrentItemVariants;
-        default:
-            return breadcrumbCurrentItemVariants;
-    }
-};
+const breadcrumbCurrentItemThemeVariants = cva(`flex cursor-default items-center truncate font-medium text-foreground`);
 
 class BreadcrumbItemDirective {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const disabled = this.disabled();
             const listDisabled = this.listDisabled();
             const userClass = this.userClass();
-            return twMerge(breadcrumbListItemThemeVariants(theme)({ disabled, listDisabled }), userClass);
+            return twMerge(breadcrumbListItemThemeVariants({ disabled, listDisabled }), userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         /**
@@ -100,7 +71,6 @@ class BreadcrumbItemDirective {
          */
         this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
     }
-    #themeService;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BreadcrumbItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: BreadcrumbItemDirective, isStandalone: true, selector: "button[monaBreadcrumbItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, listDisabled: { classPropertyName: "listDisabled", publicName: "listDisabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()", "disabled": "disabled()" } }, ngImport: i0 }); }
 }
@@ -144,28 +114,25 @@ class BreadcrumbItemComponent {
         ...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BreadcrumbItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: BreadcrumbItemComponent, isStandalone: true, selector: "mona-breadcrumb-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\r\n    <ng-content></ng-content>\r\n</ng-template>\r\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: BreadcrumbItemComponent, isStandalone: true, selector: "mona-breadcrumb-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\n    <ng-content></ng-content>\n</ng-template>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BreadcrumbItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-breadcrumb-item", template: "<ng-template>\r\n    <ng-content></ng-content>\r\n</ng-template>\r\n" }]
+            args: [{ selector: "mona-breadcrumb-item", template: "<ng-template>\n    <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], templateRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
 class BreadcrumbComponent {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.itemComponents = contentChildren(BreadcrumbItemComponent, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "itemComponents" }] : /* istanbul ignore next */ []));
         this.currentItemClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return breadcrumbCurrentItemThemeVariants(theme)();
+            return breadcrumbCurrentItemThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currentItemClass" }] : /* istanbul ignore next */ []));
         this.listClass = computed(() => {
-            const theme = this.#themeService.theme();
             const disabled = this.disabled();
             const userClass = this.userClass();
-            const variantClass = breadcrumbListThemeVariants(theme)({ disabled });
+            const variantClass = breadcrumbListThemeVariants({ disabled });
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
@@ -188,7 +155,6 @@ class BreadcrumbComponent {
          */
         this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
     }
-    #themeService;
     onItemClick(item) {
         if (this.disabled() || item.disabled()) {
             return;
@@ -196,14 +162,14 @@ class BreadcrumbComponent {
         item.itemClick.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: BreadcrumbComponent, isStandalone: true, selector: "mona-breadcrumb", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()" } }, queries: [{ propertyName: "itemComponents", predicate: BreadcrumbItemComponent, isSignal: true }, { propertyName: "separatorTemplate", first: true, predicate: BreadcrumbSeparatorTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ol role=\"list\" [class]=\"listClass()\">\r\n    @for (item of itemComponents(); track item) {\r\n        <li>\r\n            @if ($last) {\r\n                <span aria-current=\"page\" [class]=\"currentItemClass()\">\r\n                    <ng-container [ngTemplateOutlet]=\"item.templateRef()\"></ng-container>\r\n                </span>\r\n            } @else {\r\n                <button\r\n                    type=\"button\"\r\n                    monaBreadcrumbItem\r\n                    [disabled]=\"disabled() || item.disabled()\"\r\n                    (click)=\"onItemClick(item)\">\r\n                    <ng-container [ngTemplateOutlet]=\"item.templateRef()\"></ng-container>\r\n                </button>\r\n            }\r\n        </li>\r\n\r\n        @if (!$last) {\r\n            <li aria-hidden=\"true\" role=\"presentation\">\r\n                @if (separatorTemplate()) {\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"separatorTemplate()\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: $index }\"></ng-container>\r\n                } @else {\r\n                    <svg lucideChevronRight [size]=\"18\"></svg>\r\n                }\r\n            </li>\r\n        }\r\n    }\r\n</ol>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: BreadcrumbItemDirective, selector: "button[monaBreadcrumbItem]", inputs: ["disabled", "listDisabled", "class"] }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: BreadcrumbComponent, isStandalone: true, selector: "mona-breadcrumb", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()" } }, queries: [{ propertyName: "itemComponents", predicate: BreadcrumbItemComponent, isSignal: true }, { propertyName: "separatorTemplate", first: true, predicate: BreadcrumbSeparatorTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ol role=\"list\" [class]=\"listClass()\">\n    @for (item of itemComponents(); track item) {\n        <li>\n            @if ($last) {\n                <span aria-current=\"page\" [class]=\"currentItemClass()\">\n                    <ng-container [ngTemplateOutlet]=\"item.templateRef()\"></ng-container>\n                </span>\n            } @else {\n                <button\n                    type=\"button\"\n                    monaBreadcrumbItem\n                    [disabled]=\"disabled() || item.disabled()\"\n                    (click)=\"onItemClick(item)\">\n                    <ng-container [ngTemplateOutlet]=\"item.templateRef()\"></ng-container>\n                </button>\n            }\n        </li>\n\n        @if (!$last) {\n            <li aria-hidden=\"true\" role=\"presentation\">\n                @if (separatorTemplate()) {\n                    <ng-container\n                        [ngTemplateOutlet]=\"separatorTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: $index }\"></ng-container>\n                } @else {\n                    <svg lucideChevronRight [size]=\"18\"></svg>\n                }\n            </li>\n        }\n    }\n</ol>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: BreadcrumbItemDirective, selector: "button[monaBreadcrumbItem]", inputs: ["disabled", "listDisabled", "class"] }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-breadcrumb", imports: [NgTemplateOutlet, BreadcrumbItemDirective, LucideChevronRight], host: {
                         role: "navigation",
                         "[attr.aria-label]": "ariaLabel()"
-                    }, template: "<ol role=\"list\" [class]=\"listClass()\">\r\n    @for (item of itemComponents(); track item) {\r\n        <li>\r\n            @if ($last) {\r\n                <span aria-current=\"page\" [class]=\"currentItemClass()\">\r\n                    <ng-container [ngTemplateOutlet]=\"item.templateRef()\"></ng-container>\r\n                </span>\r\n            } @else {\r\n                <button\r\n                    type=\"button\"\r\n                    monaBreadcrumbItem\r\n                    [disabled]=\"disabled() || item.disabled()\"\r\n                    (click)=\"onItemClick(item)\">\r\n                    <ng-container [ngTemplateOutlet]=\"item.templateRef()\"></ng-container>\r\n                </button>\r\n            }\r\n        </li>\r\n\r\n        @if (!$last) {\r\n            <li aria-hidden=\"true\" role=\"presentation\">\r\n                @if (separatorTemplate()) {\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"separatorTemplate()\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: $index }\"></ng-container>\r\n                } @else {\r\n                    <svg lucideChevronRight [size]=\"18\"></svg>\r\n                }\r\n            </li>\r\n        }\r\n    }\r\n</ol>\r\n" }]
+                    }, template: "<ol role=\"list\" [class]=\"listClass()\">\n    @for (item of itemComponents(); track item) {\n        <li>\n            @if ($last) {\n                <span aria-current=\"page\" [class]=\"currentItemClass()\">\n                    <ng-container [ngTemplateOutlet]=\"item.templateRef()\"></ng-container>\n                </span>\n            } @else {\n                <button\n                    type=\"button\"\n                    monaBreadcrumbItem\n                    [disabled]=\"disabled() || item.disabled()\"\n                    (click)=\"onItemClick(item)\">\n                    <ng-container [ngTemplateOutlet]=\"item.templateRef()\"></ng-container>\n                </button>\n            }\n        </li>\n\n        @if (!$last) {\n            <li aria-hidden=\"true\" role=\"presentation\">\n                @if (separatorTemplate()) {\n                    <ng-container\n                        [ngTemplateOutlet]=\"separatorTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: $index }\"></ng-container>\n                } @else {\n                    <svg lucideChevronRight [size]=\"18\"></svg>\n                }\n            </li>\n        }\n    }\n</ol>\n" }]
         }], propDecorators: { itemComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BreadcrumbItemComponent), { isSignal: true }] }], separatorTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BreadcrumbSeparatorTemplateDirective), { ...{
                             read: TemplateRef
                         }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });