@nanahoshi/mona-ui 0.1.1 → 0.2.0

package/fesm2022/nanahoshi-mona-ui-numeric-text-box.mjs

@@ -7,8 +7,7 @@ import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { LucideChevronUp, LucideChevronDown } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
-import { rxTimeout } from '@nanahoshi/mona-ui/internal';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { themeControlSurfaceClasses, rxTimeout } from '@nanahoshi/mona-ui/internal';
 import { Subject, filter, switchMap, of, tap, delay, concatMap, timer, takeUntil, distinctUntilChanged, map } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { TextBoxDirective } from '@nanahoshi/mona-ui/text-box';
@@ -26,26 +25,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const numericTextboxVariants = cva(`
-        flex items-center w-full min-w-0
-        bg-transparent
-        border border-input-border p-0
-        outline-none overflow-hidden
-
-        placeholder:text-muted-foreground
-
+const numericTextboxThemeVariants = cva(`
+        flex w-full min-w-0 items-center
+        overflow-hidden p-0
+        ${themeControlSurfaceClasses} text-foreground
+        border border-input-border shadow-(--shadow-control)
+        outline-none
         selection:bg-primary selection:text-primary-foreground
-        transition-[color,box-shadow,border] ease-in-out duration-300
+        transition-[color,box-shadow,border] duration-300 ease-in-out
+        placeholder:text-muted-foreground
 
         data-[disabled='true']:pointer-events-none
         data-[disabled='true']:cursor-not-allowed
-        data-[disabled='true']:opacity-50
+        data-[disabled='true']:border-disabled-border
+        data-[disabled='true']:bg-disabled-background
+        data-[disabled='true']:text-disabled-foreground
+        data-[disabled='true']:shadow-none
+        data-[readonly='true']:cursor-default
 
-        focus-within:ring-2 focus-within:ring-primary/40
-        focus-within:border-primary
+        focus-within:border-focus-indicator
+        focus-within:ring-2 focus-within:ring-focus-indicator/35
 
         data-[invalid='true']:border-error
-        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/35
+        data-[invalid='true']:focus-within:border-error
+        data-[invalid='true']:focus-within:ring-error/35
     `, {
     variants: {
         rounded: {
@@ -62,11 +66,13 @@ const numericTextboxVariants = cva(`
         }
     }
 });
-const numericTextboxInputVariants = cva(`
-        border-0 outline-none ring-0
+const numericTextboxInputThemeVariants = cva(`
         h-full w-full
-        focus-visible:ring-0 shadow-none
+        bg-transparent
+        border-0 shadow-none
         rounded-none
+        outline-none ring-0
+        focus-visible:border-transparent focus-visible:ring-0
     `, {
     variants: {
         leftRounded: {
@@ -110,15 +116,13 @@ const numericTextboxInputVariants = cva(`
         }
     }
 });
-const numericTextboxButtonVariants = cva(`
-        h-full flex flex-col border-l border-input-border
+const numericTextboxButtonThemeVariants = cva(`
+        flex h-full flex-col
         overflow-y-hidden
-        [&>button]:flex-1
-        [&>button]:flex
-        [&>button]:items-center
-        [&>button]:p-0
-        [&>button]:rounded-none
+        border-s border-border-subtle
 
+        [&>button]:flex [&>button]:flex-1 [&>button]:items-center
+        [&>button]:rounded-none [&>button]:p-0
         [&>button]:first:rounded-tl-none
         [&>button]:first:rounded-bl-none
         [&>button]:first:rounded-br-none
@@ -130,64 +134,35 @@ const numericTextboxButtonVariants = cva(`
     `, {
     variants: {
         size: {
-            large: "min-w-16 w-16",
-            medium: "min-w-10 w-10",
-            small: "min-w-8 w-8"
+            large: "w-16 min-w-16",
+            medium: "w-10 min-w-10",
+            small: "w-8 min-w-8"
         }
     }
 });
 
-const numericTextboxThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return numericTextboxVariants;
-        default:
-            return numericTextboxVariants; // Default to Mona styles
-    }
-};
-const numericTextboxInputThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return numericTextboxInputVariants;
-        default:
-            return numericTextboxInputVariants; // Default to Mona styles
-    }
-};
-const numericTextboxButtonThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return numericTextboxButtonVariants;
-        default:
-            return numericTextboxButtonVariants; // Default to Mona styles
-    }
-};
-
 class NumericTextBoxComponent {
     #destroyRef;
     #focusMonitor;
     #hostElementRef;
-    #themeService;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#focusMonitor = inject(FocusMonitor);
         this.#hostElementRef = inject((ElementRef));
-        this.#themeService = inject(ThemeService);
         this.beforeInput$ = new Subject();
         this.classes = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
             const size = this.size();
-            const classes = numericTextboxThemeVariants(theme)({ rounded, size });
+            const classes = numericTextboxThemeVariants({ rounded, size });
             const userClass = this.userClass();
             return twMerge(classes, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
         this.inputClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const hasPrefixTemplate = this.prefixTemplateList().length > 0;
             const leftRounded = hasPrefixTemplate ? "none" : this.rounded();
             const rightRounded = this.spinners() ? "none" : this.rounded();
-            const inputVariants = numericTextboxInputThemeVariants(theme)({ leftRounded, rightRounded });
+            const inputVariants = numericTextboxInputThemeVariants({ leftRounded, rightRounded });
             return twMerge(inputVariants);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inputClasses" }] : /* istanbul ignore next */ []));
@@ -206,9 +181,8 @@ class NumericTextBoxComponent {
         this.rawInputValue = signal("", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rawInputValue" }] : /* istanbul ignore next */ []));
         this.spinButtonClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const size = this.size();
-            return numericTextboxButtonThemeVariants(theme)({ size });
+            return numericTextboxButtonThemeVariants({ size });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "spinButtonClasses" }] : /* istanbul ignore next */ []));
         this.spinButtonIconSize = computed(() => {
@@ -570,7 +544,7 @@ class NumericTextBoxComponent {
         return parseFloat(sanitizedValue);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NumericTextBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NumericTextBoxComponent, isStandalone: true, selector: "mona-numeric-text-box", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, nullable: { classPropertyName: "nullable", publicName: "nullable", 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 }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, spinners: { classPropertyName: "spinners", publicName: "spinners", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputBlur: "inputBlur", inputFocus: "inputFocus", inputFocusOut: "inputFocusOut", touch: "touch", value: "valueChange" }, host: { properties: { "class": "classes()", "attr.data-disabled": "disabled() || null", "attr.data-invalid": "invalidInput() || null", "attr.data-readonly": "readonly() || null", "attr.data-required": "required() || null" } }, queries: [{ propertyName: "prefixTemplateList", predicate: NumericTextBoxPrefixTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "valueTextBoxRef", first: true, predicate: ["valueTextBox"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\n    <span class=\"flex items-center flex-none flex-wrap h-full overflow-hidden border-none\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    monaTextBox\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [type]=\"'text'\"\n    inputmode=\"numeric\"\n    [readonly]=\"readonly()\"\n    [tabIndex]=\"tabindex()\"\n    [ngModel]=\"formattedValue()\"\n    (ngModelChange)=\"applyRawValue($event)\"\n    (keydown)=\"keydown$.next($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    (focusout)=\"inputFocusOut.emit($event)\"\n    (blur)=\"onBlur($event)\"\n    (beforeinput)=\"beforeInput$.next($event)\"\n    (wheel)=\"wheel$.next($event)\"\n    [size]=\"size()\"\n    [class]=\"inputClasses()\"\n    autocomplete=\"off\"\n    role=\"spinbutton\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"invalidInput() || null\"\n    [attr.aria-readonly]=\"readonly()\"\n    [attr.aria-required]=\"required()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuemin]=\"minValue()\"\n    [attr.aria-valuemax]=\"maxValue()\"\n    [attr.aria-valuetext]=\"formattedValue()\"\n    [attr.data-spinners]=\"spinners()\"\n    #valueTextBox />\n@if (spinners()) {\n    <div [class]=\"spinButtonClasses()\">\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"secondary\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('+')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            aria-label=\"Increase value\">\n            <svg lucideChevronUp [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"secondary\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('-')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            aria-label=\"Decrease value\">\n            <svg lucideChevronDown [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TextBoxDirective, selector: "input[monaTextBox]", inputs: ["rounded", "size", "class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NumericTextBoxComponent, isStandalone: true, selector: "mona-numeric-text-box", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, nullable: { classPropertyName: "nullable", publicName: "nullable", 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 }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, spinners: { classPropertyName: "spinners", publicName: "spinners", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputBlur: "inputBlur", inputFocus: "inputFocus", inputFocusOut: "inputFocusOut", touch: "touch", value: "valueChange" }, host: { properties: { "class": "classes()", "attr.data-disabled": "disabled() || null", "attr.data-invalid": "invalidInput() || null", "attr.data-readonly": "readonly() || null", "attr.data-required": "required() || null" } }, queries: [{ propertyName: "prefixTemplateList", predicate: NumericTextBoxPrefixTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "valueTextBoxRef", first: true, predicate: ["valueTextBox"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-none flex-wrap items-center overflow-hidden border-none\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    monaTextBox\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [type]=\"'text'\"\n    inputmode=\"numeric\"\n    [readonly]=\"readonly()\"\n    [tabIndex]=\"tabindex()\"\n    [ngModel]=\"formattedValue()\"\n    (ngModelChange)=\"applyRawValue($event)\"\n    (keydown)=\"keydown$.next($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    (focusout)=\"inputFocusOut.emit($event)\"\n    (blur)=\"onBlur($event)\"\n    (beforeinput)=\"beforeInput$.next($event)\"\n    (wheel)=\"wheel$.next($event)\"\n    [size]=\"size()\"\n    [class]=\"inputClasses()\"\n    autocomplete=\"off\"\n    role=\"spinbutton\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"invalidInput() || null\"\n    [attr.aria-readonly]=\"readonly()\"\n    [attr.aria-required]=\"required()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuemin]=\"minValue()\"\n    [attr.aria-valuemax]=\"maxValue()\"\n    [attr.aria-valuetext]=\"formattedValue()\"\n    [attr.data-spinners]=\"spinners()\"\n    #valueTextBox />\n@if (spinners()) {\n    <div [class]=\"spinButtonClasses()\">\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"ghost\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('+')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            aria-label=\"Increase value\">\n            <svg lucideChevronUp [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"ghost\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('-')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            aria-label=\"Decrease value\">\n            <svg lucideChevronDown [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TextBoxDirective, selector: "input[monaTextBox]", inputs: ["rounded", "size", "class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NumericTextBoxComponent, decorators: [{
             type: Component,
@@ -580,7 +554,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-invalid]": "invalidInput() || null",
                         "[attr.data-readonly]": "readonly() || null",
                         "[attr.data-required]": "required() || null"
-                    }, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\n    <span class=\"flex items-center flex-none flex-wrap h-full overflow-hidden border-none\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    monaTextBox\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [type]=\"'text'\"\n    inputmode=\"numeric\"\n    [readonly]=\"readonly()\"\n    [tabIndex]=\"tabindex()\"\n    [ngModel]=\"formattedValue()\"\n    (ngModelChange)=\"applyRawValue($event)\"\n    (keydown)=\"keydown$.next($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    (focusout)=\"inputFocusOut.emit($event)\"\n    (blur)=\"onBlur($event)\"\n    (beforeinput)=\"beforeInput$.next($event)\"\n    (wheel)=\"wheel$.next($event)\"\n    [size]=\"size()\"\n    [class]=\"inputClasses()\"\n    autocomplete=\"off\"\n    role=\"spinbutton\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"invalidInput() || null\"\n    [attr.aria-readonly]=\"readonly()\"\n    [attr.aria-required]=\"required()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuemin]=\"minValue()\"\n    [attr.aria-valuemax]=\"maxValue()\"\n    [attr.aria-valuetext]=\"formattedValue()\"\n    [attr.data-spinners]=\"spinners()\"\n    #valueTextBox />\n@if (spinners()) {\n    <div [class]=\"spinButtonClasses()\">\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"secondary\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('+')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            aria-label=\"Increase value\">\n            <svg lucideChevronUp [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"secondary\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('-')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            aria-label=\"Decrease value\">\n            <svg lucideChevronDown [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n    </div>\n}\n" }]
+                    }, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-none flex-wrap items-center overflow-hidden border-none\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    monaTextBox\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [type]=\"'text'\"\n    inputmode=\"numeric\"\n    [readonly]=\"readonly()\"\n    [tabIndex]=\"tabindex()\"\n    [ngModel]=\"formattedValue()\"\n    (ngModelChange)=\"applyRawValue($event)\"\n    (keydown)=\"keydown$.next($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    (focusout)=\"inputFocusOut.emit($event)\"\n    (blur)=\"onBlur($event)\"\n    (beforeinput)=\"beforeInput$.next($event)\"\n    (wheel)=\"wheel$.next($event)\"\n    [size]=\"size()\"\n    [class]=\"inputClasses()\"\n    autocomplete=\"off\"\n    role=\"spinbutton\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"invalidInput() || null\"\n    [attr.aria-readonly]=\"readonly()\"\n    [attr.aria-required]=\"required()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuemin]=\"minValue()\"\n    [attr.aria-valuemax]=\"maxValue()\"\n    [attr.aria-valuetext]=\"formattedValue()\"\n    [attr.data-spinners]=\"spinners()\"\n    #valueTextBox />\n@if (spinners()) {\n    <div [class]=\"spinButtonClasses()\">\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"ghost\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('+')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            aria-label=\"Increase value\">\n            <svg lucideChevronUp [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"ghost\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('-')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            aria-label=\"Decrease value\">\n            <svg lucideChevronDown [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n    </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { prefixTemplateList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NumericTextBoxPrefixTemplateDirective), { ...{
                             read: TemplateRef
                         }, isSignal: true }] }], valueTextBoxRef: [{ type: i0.ViewChild, args: ["valueTextBox", { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], formatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatter", required: false }] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], inputFocusOut: [{ type: i0.Output, args: ["inputFocusOut"] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], nullable: [{ type: i0.Input, args: [{ isSignal: true, alias: "nullable", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], spinners: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinners", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", 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 }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });

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

@@ -9,9 +9,8 @@ import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import { PreventableEvent, SlicePipe } from '@nanahoshi/mona-ui/common';
 import { DropdownListComponent, DropdownListValueTemplateDirective } from '@nanahoshi/mona-ui/dropdown-list';
 import { DropdownVirtualScrollDirective } from '@nanahoshi/mona-ui/dropdowns';
-import { NavigationKeys } from '@nanahoshi/mona-ui/internal';
+import { themeRaisedBackdropClasses, NavigationKeys } from '@nanahoshi/mona-ui/internal';
 import { NumericTextBoxComponent } from '@nanahoshi/mona-ui/numeric-text-box';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
@@ -92,16 +91,15 @@ class PageSizeChangeEvent extends PreventableEvent {
     }
 }
 
-const pagerBaseVariants = cva(`
-        flex py-1 px-2
-        bg-background text-foreground
-        border border-border
+const pagerBaseThemeVariants = cva(`
+        flex px-2 py-1
         text-sm
+        bg-(--mona-pager-background) ${themeRaisedBackdropClasses} text-foreground
+        border border-border-subtle
         [&_mona-numeric-text-box]:ml-4
         [&_mona-numeric-text-box]:w-12
-        [&_mona-numeric-text-box_input]:text-center
         [&_mona-numeric-text-box_input]:bg-input-background
-
+        [&_mona-numeric-text-box_input]:text-center
         [&_mona-dropdown-list]:mx-1
         [&_mona-dropdown-list]:my-0
     `, {
@@ -120,27 +118,24 @@ const pagerBaseVariants = cva(`
         }
     }
 });
-const pagerInfoVariants = cva(`
-        flex items-center justify-end
-        flex-1 pl-2 whitespace-nowrap
+const pagerInfoThemeVariants = cva(`
+        flex flex-1 items-center justify-end pl-2
+        whitespace-nowrap text-muted-foreground
     `);
-const pagerInputVariants = cva(`
+const pagerInputThemeVariants = cva(`
         flex items-center
-        [&_mona-numeric-text-box]:w-12
         [&_mona-numeric-text-box]:mx-1
-
+        [&_mona-numeric-text-box]:w-12
     `);
-const pagerListVariants = cva(`
+const pagerListThemeVariants = cva(`
         flex flex-wrap
-        [&_li]:list-none
-        [&_li]:flex
-        [&_li]:items-center
-        [&_li]:justify-center
+        [&_li]:flex [&_li]:list-none
+        [&_li]:items-center [&_li]:justify-center
     `);
-const pagerListItemVariants = cva("", {
+const pagerListItemThemeVariants = cva("", {
     variants: {
         active: {
-            true: "font-semibold",
+            true: "font-semibold text-foreground",
             false: ""
         }
     },
@@ -149,47 +144,6 @@ const pagerListItemVariants = cva("", {
     }
 });
 
-const pagerBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return pagerBaseVariants;
-        default:
-            return pagerBaseVariants;
-    }
-};
-const pagerInfoThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return pagerInfoVariants;
-        default:
-            return pagerInfoVariants;
-    }
-};
-const pagerInputThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return pagerInputVariants;
-        default:
-            return pagerInputVariants;
-    }
-};
-const pagerListThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return pagerListVariants;
-        default:
-            return pagerListVariants;
-    }
-};
-const pagerListItemThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return pagerListItemVariants;
-        default:
-            return pagerListItemVariants;
-    }
-};
-
 const PAGER_FOCUSABLE_ATTRIBUTE = "data-mona-pager-focusable";
 const FOCUSABLE_TARGET_SELECTOR = "button, input, select, textarea, a[href], [tabindex]";
 class PagerComponent {
@@ -200,7 +154,6 @@ class PagerComponent {
     #managedFocusTargets;
     #originalTabIndices;
     #skip;
-    #themeService;
     #widthObserver;
     #previousPageSize;
     constructor() {
@@ -214,16 +167,14 @@ class PagerComponent {
         this.#originalTabIndices = new WeakMap();
         this.#skip = linkedSignal(() => this.skip(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#skip" }] : /* istanbul ignore next */ []));
-        this.#themeService = inject(ThemeService);
         this.#widthObserver = null;
         this.#previousPageSize = 10;
         this.navigationButtonsTemplateList = contentChildren(PagerNavigationButtonsTemplateDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "navigationButtonsTemplateList" }] : /* istanbul ignore next */ []));
         this.baseClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
             const userClasses = this.userClasses();
-            const classes = pagerBaseThemeVariants(theme)({ rounded });
+            const classes = pagerBaseThemeVariants({ rounded });
             return twMerge(classes, userClasses);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
@@ -248,8 +199,7 @@ class PagerComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
         this.infoClasses = computed(() => {
-            const theme = this.#themeService.theme();
-            return pagerInfoThemeVariants(theme)();
+            return pagerInfoThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "infoClasses" }] : /* istanbul ignore next */ []));
         this.infoVisible = computed(() => {
@@ -259,8 +209,7 @@ class PagerComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "infoVisible" }] : /* istanbul ignore next */ []));
         this.inputClasses = computed(() => {
-            const theme = this.#themeService.theme();
-            return pagerInputThemeVariants(theme)();
+            return pagerInputThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inputClasses" }] : /* istanbul ignore next */ []));
         this.inputValue = linkedSignal(() => this.page(), /* @ts-ignore */
@@ -276,8 +225,7 @@ class PagerComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "lastPageNavigationTemplate" }] : /* istanbul ignore next */ []));
         this.listClasses = computed(() => {
-            const theme = this.#themeService.theme();
-            return pagerListThemeVariants(theme)();
+            return pagerListThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
         this.nextJumperVisible = computed(() => {
@@ -599,7 +547,7 @@ class PagerComponent {
         this.setPage(page);
     }
     pageItemClasses(active) {
-        return pagerListItemThemeVariants(this.#themeService.theme())({ active });
+        return pagerListItemThemeVariants({ active });
     }
     activateInnerNavigation() {
         const targets = this.getFocusableTargets();

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

@@ -1,49 +1,28 @@
 import * as i0 from '@angular/core';
-import { inject, computed, input, Component } from '@angular/core';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { computed, input, Component } from '@angular/core';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
-const placeholderBaseVariants = cva(`
+const placeholderBaseThemeVariants = cva(`
         flex items-center justify-center
-        w-full h-full
+        h-full w-full
         p-2
+        bg-surface-muted/50
     `);
-const placeholderTextVariants = cva(`
-        text-muted-foreground
-        uppercase
+const placeholderTextThemeVariants = cva(`
+        uppercase text-muted-foreground
     `);
 
-const placeholderBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return placeholderBaseVariants;
-        default:
-            return placeholderBaseVariants;
-    }
-};
-const placeholderTextThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return placeholderTextVariants;
-        default:
-            return placeholderTextVariants;
-    }
-};
-
 class PlaceholderComponent {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
-            const variantClass = placeholderBaseThemeVariants(theme)();
+            const variantClass = placeholderBaseThemeVariants();
             const userClass = this.userClass();
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.textClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return placeholderTextThemeVariants(theme)();
+            return placeholderTextThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "textClass" }] : /* istanbul ignore next */ []));
         /**
@@ -60,7 +39,6 @@ class PlaceholderComponent {
          */
         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: PlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PlaceholderComponent, isStandalone: true, selector: "mona-placeholder", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "@if (text()) {\n    <span [class]=\"textClass()\">{{ text() }}</span>\n} @else {\n    <ng-content></ng-content>\n}\n" }); }
 }

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

@@ -3,13 +3,13 @@ import * as i0 from '@angular/core';
 import { Directive, inject, DestroyRef, Renderer2, computed, contentChild, TemplateRef, viewChild, input, output, effect, ElementRef, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { PopupService, fadePopupAnimation } from '@nanahoshi/mona-ui/popup';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
-import { tooltipArrowThemeVariants, getPositionConnectionPoints, getOffsetForPosition } from '@nanahoshi/mona-ui/tooltip';
+import { getPositionConnectionPoints, getOffsetForPosition } from '@nanahoshi/mona-ui/tooltip';
 import { takeUntil, take, fromEvent, filter, tap } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { v4 } from 'uuid';
 import { PreventableEvent } from '@nanahoshi/mona-ui/common';
 import { cva } from 'class-variance-authority';
+import { themeOverlaySurfaceClasses } from '@nanahoshi/mona-ui/internal';
 
 class PopoverFooterTemplateDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopoverFooterTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -55,10 +55,10 @@ class PopoverShownEvent {
     }
 }
 
-const popoverBaseVariants = cva(`
-        flex flex-col items-center justify-center relative
-        bg-background text-foreground border border-border
-        shadow-[0_2px_8px_rgba(0,0,0,0.12)] z-1
+const popoverBaseThemeVariants = cva(`
+        relative z-1 flex flex-col items-center justify-center
+        ${themeOverlaySurfaceClasses} text-foreground
+        border border-border shadow-(--shadow-overlay)
     `, {
     variants: {
         rounded: {
@@ -69,9 +69,9 @@ const popoverBaseVariants = cva(`
         }
     }
 });
-const popoverHeaderVariants = cva(`
-        flex items-center justify-between w-full
-        font-semibold overflow-hidden
+const popoverHeaderThemeVariants = cva(`
+        flex w-full items-center justify-between overflow-hidden
+        font-semibold
     `, {
     variants: {
         rounded: {
@@ -82,76 +82,55 @@ const popoverHeaderVariants = cva(`
         }
     }
 });
-const popoverContentVariants = cva(`
-        flex-1 w-full h-full
-        overflow-hidden
+const popoverContentThemeVariants = cva(`
+        h-full w-full flex-1 overflow-hidden
+    `);
+const popoverArrowThemeVariants = cva(`
+        absolute z-0 h-3 w-3 rotate-45 transform-center box-border
+        pointer-events-none
+        ${themeOverlaySurfaceClasses} text-foreground
+        border border-border
+        data-[position="top"]:-bottom-1.5 data-[position="top"]:border-t-0 data-[position="top"]:border-l-0
+        data-[position="top"]:[clip-path:inset(1px_0_0_1px)]
+        data-[position="bottom"]:-top-1.5 data-[position="bottom"]:border-r-0 data-[position="bottom"]:border-b-0
+        data-[position="bottom"]:[clip-path:inset(0_1px_1px_0)]
+        data-[position="left"]:-right-1.5 data-[position="left"]:border-b-0 data-[position="left"]:border-l-0
+        data-[position="left"]:[clip-path:inset(0_0_1px_1px)]
+        data-[position="right"]:-left-1.5 data-[position="right"]:border-t-0 data-[position="right"]:border-r-0
+        data-[position="right"]:[clip-path:inset(1px_1px_0_0)]
     `);
-
-const popoverBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return popoverBaseVariants;
-        default:
-            return popoverBaseVariants;
-    }
-};
-const popoverHeaderThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return popoverHeaderVariants;
-        default:
-            return popoverHeaderVariants;
-    }
-};
-const popoverContentThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return popoverContentVariants;
-        default:
-            return popoverContentVariants;
-    }
-};
-const popoverArrowThemeVariants = (theme) => {
-    return tooltipArrowThemeVariants(theme);
-};
 
 class PopoverComponent {
     #destroyRef;
     #popupService;
     #renderer;
-    #themeService;
     #subscription;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#popupService = inject(PopupService);
         this.#renderer = inject(Renderer2);
-        this.#themeService = inject(ThemeService);
         this.#subscription = null;
         this.arrowClasses = computed(() => {
-            const theme = this.#themeService.theme();
-            return popoverArrowThemeVariants(theme)();
+            return popoverArrowThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "arrowClasses" }] : /* istanbul ignore next */ []));
         this.baseClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
-            return popoverBaseThemeVariants(theme)({ rounded });
+            return popoverBaseThemeVariants({ rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
         this.contentClasses = computed(() => {
-            const theme = this.#themeService.theme();
-            return popoverContentThemeVariants(theme)();
+            return popoverContentThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contentClasses" }] : /* istanbul ignore next */ []));
         this.currentArrowPosition = computed(() => this.position(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currentArrowPosition" }] : /* istanbul ignore next */ []));
         this.footerTemplateRef = contentChild(PopoverFooterTemplateDirective, { ...(ngDevMode ? { debugName: "footerTemplateRef" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.headerClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
             const hasTemplate = !!this.titleTemplateRef();
             const padding = hasTemplate ? "p-0" : "p-2";
-            const variants = popoverHeaderThemeVariants(theme)({ rounded });
+            const variants = popoverHeaderThemeVariants({ rounded });
             return twMerge(variants, padding);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerClasses" }] : /* istanbul ignore next */ []));