@nanahoshi/mona-ui 0.1.1 → 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(`
+const autoCompleteBaseThemeVariants = cva(`
         flex
-        border border-input-border outline-none
-        bg-background shadow-xs text-foreground
-        focus-within:ring-1 focus-within:ring-primary/40
-        transition-[color,box-shadow,border] ease-in-out duration-300
+        ${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,10 +74,9 @@ const autoCompleteBaseVariants = cva(`
         size: "medium"
     }
 });
-const autoCompleteTextInputVariants = cva(`
-        border-none outline-none
-        bg-transparent shadow-none
-        px-2 h-full w-full text-ellipsis
+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: {
@@ -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
+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 }); }
 }
@@ -153,19 +123,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 
 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;

package/fesm2022/nanahoshi-mona-ui-button-group.mjs

@@ -2,31 +2,32 @@ import * as i0 from '@angular/core';
 import { inject, DestroyRef, computed, contentChildren, input, model, effect, untracked, afterNextRender, Component } from '@angular/core';
 import { outputFromObservable, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { ButtonService, ButtonDirective } from '@nanahoshi/mona-ui/button';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { map, pairwise } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
-const buttonGroupVariants = cva(`
+const buttonGroupThemeVariants = cva(`
         inline-flex items-center justify-center
-        border border-border shadow-xs
+        border border-input-border
         [&>button]:border-0
+        [&>button]:shadow-none
+        [&>button:not(:last-child)]:border-r
+        [&>button:not(:last-child)]:border-border-subtle
+        [&>button]:rounded-none
         [&>button]:focus-visible:ring-2
         [&>button]:focus-visible:z-10
-        [&>button]:rounded-none
-        [&>button]:shadow-none
     `, {
     variants: {
         look: {
             default: "",
-            error: "",
-            ghost: "border-transparent",
-            info: "",
-            outline: "[&>button:not(:last-child)]:border-r",
-            primary: "",
-            secondary: "",
-            success: "",
-            warning: ""
+            error: "border-transparent",
+            ghost: "border-transparent [&>button:not(:last-child)]:border-r-0",
+            info: "border-transparent",
+            outline: "",
+            primary: "border-transparent",
+            secondary: "border-transparent",
+            success: "border-transparent",
+            warning: "border-transparent"
         },
         rounded: {
             full: `
@@ -65,29 +66,17 @@ const buttonGroupVariants = cva(`
     }
 });
 
-const buttonGroupThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return buttonGroupVariants;
-        default:
-            return buttonGroupVariants;
-    }
-};
-
 class ButtonGroupComponent {
     #buttonService;
     #destroyRef;
-    #themeService;
     constructor() {
         this.#buttonService = inject(ButtonService, { self: true });
         this.#destroyRef = inject(DestroyRef);
-        this.#themeService = inject(ThemeService);
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const look = this.look();
             const rounded = this.rounded();
             const size = this.size();
-            const variantClasses = buttonGroupThemeVariants(theme)({ look, rounded, size });
+            const variantClasses = buttonGroupThemeVariants({ look, rounded, size });
             const userClass = this.userClass();
             return twMerge(variantClasses, userClass);
         }, /* @ts-ignore */