@nanahoshi/mona-ui 0.1.1 → 0.2.1

package/fesm2022/nanahoshi-mona-ui-check-box.mjs

@@ -1,45 +1,42 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, computed, model, input, output, Component, Directive } from '@angular/core';
+import { computed, model, input, output, Component, Directive } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
+import { themeControlSurfaceClasses } from '@nanahoshi/mona-ui/internal';
 
-const checkboxVariants = cva(`sr-only appearance-none outline-none peer`);
-const checkmarkVariants = cva(`
+const checkboxInputThemeVariants = cva(`sr-only appearance-none outline-none peer`);
+const checkmarkThemeVariants = cva(`
         flex items-center justify-center
-        w-4.5 h-4.5 pl-0.25
-        overflow-hidden outline-none
+        h-4.5 w-4.5 pl-0.25
+        cursor-pointer overflow-hidden
+        ${themeControlSurfaceClasses}
+        border border-input-border
+        outline-none
 
-        bg-input-background border border-input-border
-        cursor-pointer
+        peer-disabled:pointer-events-none peer-disabled:cursor-not-allowed
+        peer-disabled:border-disabled-border peer-disabled:bg-disabled-background peer-disabled:text-disabled-foreground
 
-        data-[disabled='true']:pointer-events-none
-        data-[disabled='true']:cursor-not-allowed
-        data-[disabled='true']:opacity-50
+        peer-checked:border-(--color-selected-border) peer-checked:bg-primary peer-checked:text-primary-foreground
+        peer-indeterminate:border-(--color-selected-border) peer-indeterminate:bg-primary peer-indeterminate:text-primary-foreground
 
-        peer-focus-visible:ring-2 peer-focus-visible:ring-primary/40
-        peer-focus-visible:border-primary
+        peer-focus-visible:border-focus-indicator
+        peer-focus-visible:ring-2 peer-focus-visible:ring-focus-indicator/35
 
-        peer-checked:bg-primary
-        peer-checked:text-primary-foreground
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/35
+        data-[invalid='true']:peer-focus-visible:border-error
+        data-[invalid='true']:peer-focus-visible:ring-error/35
 
-        peer-indeterminate:bg-primary
-        peer-indeterminate:text-primary-foreground
-        peer-indeterminate:after:content-['']
         peer-indeterminate:after:absolute
         peer-indeterminate:after:inset-[3px_0_3px_0]
+        peer-indeterminate:after:content-['']
+        peer-indeterminate:after:bg-current
         peer-indeterminate:after:[mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14'%2F%3E%3C%2Fsvg%3E")]
         peer-indeterminate:after:[mask-repeat:no-repeat]
         peer-indeterminate:after:[mask-size:contain]
-        peer-indeterminate:after:bg-current
-
-        [&.ng-touched.ng-invalid]:border-error
-
-        data-[invalid='true']:border-error
-        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
     `, {
     variants: {
         rounded: {
@@ -51,16 +48,12 @@ const checkmarkVariants = cva(`
         }
     }
 });
-const checkboxContainerLabelVariants = cva(`
-        w-full h-full
-        inline-flex items-center gap-2
-        relative
-
+const checkboxContainerLabelThemeVariants = cva(`
+        relative inline-flex h-full w-full items-center gap-2
         select-none
-
         data-[disabled='true']:pointer-events-none
         data-[disabled='true']:cursor-not-allowed
-        data-[disabled='true']:opacity-50
+        data-[disabled='true']:text-disabled-foreground
     `, {
     variants: {
         labelSize: {
@@ -70,42 +63,42 @@ const checkboxContainerLabelVariants = cva(`
         }
     }
 });
-const checkboxDirectiveVariants = cva(`
-        appearance-none outline-none
-        w-4.5 h-4.5
-        bg-input-background border border-input-border
-        cursor-pointer
-        relative
+const checkboxDirectiveThemeVariants = cva(`
+        relative h-4.5 w-4.5
+        cursor-pointer appearance-none
+        ${themeControlSurfaceClasses}
+        border border-input-border
+        outline-none
 
-        disabled:pointer-events-none
-        disabled:cursor-not-allowed
-        disabled:opacity-50
+        disabled:pointer-events-none disabled:cursor-not-allowed
+        disabled:border-disabled-border disabled:bg-disabled-background disabled:text-disabled-foreground
 
-        checked:text-primary-foreground
-        indeterminate:text-primary-foreground
-        indeterminate:bg-primary
-        checked:bg-primary
+        checked:border-(--color-selected-border) checked:bg-primary checked:text-primary-foreground
+        indeterminate:border-(--color-selected-border) indeterminate:bg-primary indeterminate:text-primary-foreground
 
-        focus-visible:ring-2 focus-visible:ring-primary/40
-        focus-visible:border-primary
+        focus-visible:border-focus-indicator
+        focus-visible:ring-2 focus-visible:ring-focus-indicator/35
 
-        checked:after:content-['']
         checked:after:absolute
         checked:after:inset-[1px_0_0_1px]
+        checked:after:content-['']
+        checked:after:bg-current
         checked:after:[mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%206%209%2017l-5-5'/%3E%3C/svg%3E")]
         checked:after:[mask-repeat:no-repeat]
         checked:after:[mask-size:contain]
-        checked:after:bg-current
 
-        indeterminate:after:content-['']
         indeterminate:after:absolute
         indeterminate:after:inset-[1px_0_1px_1px]
+        indeterminate:after:content-['']
+        indeterminate:after:bg-current
         indeterminate:after:[mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14'%2F%3E%3C%2Fsvg%3E")]
         indeterminate:after:[mask-repeat:no-repeat]
         indeterminate:after:[mask-size:contain]
-        indeterminate:after:bg-current
 
-        [&.ng-touched.ng-invalid]:border-error
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/35
+        data-[invalid='true']:focus-visible:border-error
+        data-[invalid='true']:focus-visible:ring-error/35
     `, {
     variants: {
         rounded: {
@@ -118,62 +111,25 @@ const checkboxDirectiveVariants = cva(`
     }
 });
 
-const checkboxInputThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return checkboxVariants;
-        default:
-            return checkboxVariants;
-    }
-};
-const checkmarkThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return checkmarkVariants;
-        default:
-            return checkmarkVariants;
-    }
-};
-const checkboxContainerLabelThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return checkboxContainerLabelVariants;
-        default:
-            return checkboxContainerLabelVariants;
-    }
-};
-const checkboxDirectiveThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return checkboxDirectiveVariants;
-        default:
-            return checkboxDirectiveVariants;
-    }
-};
-
 class CheckBoxComponent {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.checkBoxClasses = computed(() => {
-            const theme = this.#themeService.theme();
-            return checkboxInputThemeVariants(theme)();
+            return checkboxInputThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "checkBoxClasses" }] : /* istanbul ignore next */ []));
         this.checkMarkClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
-            return checkmarkThemeVariants(theme)({ rounded });
+            return checkmarkThemeVariants({ rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "checkMarkClasses" }] : /* istanbul ignore next */ []));
         this.containerLabelClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const labelSize = this.labelSize();
             const classes = this.userClass();
-            const variantClasses = checkboxContainerLabelThemeVariants(theme)({ labelSize });
+            const variantClasses = checkboxContainerLabelThemeVariants({ labelSize });
             return twMerge(variantClasses, classes);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "containerLabelClasses" }] : /* istanbul ignore next */ []));
-        this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && !this.checked()), /* @ts-ignore */
+        this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && !this.checked())), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         /**
          * @description Whether the control is checked.
@@ -265,7 +221,6 @@ class CheckBoxComponent {
          */
         this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
     }
-    #themeService;
     onCheckedChange(checked) {
         this.checked.set(checked);
     }
@@ -292,40 +247,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 
 class CheckboxDirective {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.classes = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
-            const variantClasses = checkboxDirectiveThemeVariants(theme)({ rounded });
+            const variantClasses = checkboxDirectiveThemeVariants({ rounded });
             const userClass = this.userClass();
             return twMerge(variantClasses, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+        this.inputInvalid = computed(() => this.touched() && this.invalid(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputInvalid" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the checkbox as invalid, triggering error border and ring styling.
+         * @default false
+         */
+        this.invalid = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
         /**
          * @description Border-radius preset applied to the checkbox.
          * @default "medium"
          */
         this.rounded = input("medium", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the checkbox as touched. Error styling is only shown when both `invalid` and `touched` are `true`.
+         * @default false
+         */
+        this.touched = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
         /**
          * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
          * @default ""
          */
         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: CheckboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: CheckboxDirective, isStandalone: true, selector: "input[type='checkbox'][monaCheckbox]", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: CheckboxDirective, isStandalone: true, selector: "input[type='checkbox'][monaCheckbox]", inputs: { invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", 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 } }, host: { properties: { "attr.aria-invalid": "inputInvalid() || null", "attr.data-invalid": "inputInvalid() || null", "class": "classes()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CheckboxDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "input[type='checkbox'][monaCheckbox]",
                     host: {
+                        "[attr.aria-invalid]": "inputInvalid() || null",
+                        "[attr.data-invalid]": "inputInvalid() || null",
                         "[class]": "classes()"
                     }
                 }]
-        }], propDecorators: { rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/check-box

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

@@ -4,10 +4,10 @@ import { Directive, inject, DestroyRef, ElementRef, computed, contentChild, Temp
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { LucideCircleX } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { fromEvent, filter } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
+import { themeRaisedSurfaceClasses } from '@nanahoshi/mona-ui/internal';
 
 /**
  * @description Apply to an `<ng-template>` directly inside `<mona-chip>` to render prefix content
@@ -24,11 +24,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const chipVariants = cva(`
-        inline-flex items-center justify-between gap-1.5
-        text-xs font-medium cursor-pointer shrink-0
-        outline-none shadow-xs
-        transition-colors duration-200 ease-in-out
+const chipThemeVariants = cva(`
+        inline-flex shrink-0 items-center justify-between gap-1.5
+        cursor-pointer text-xs font-medium
+        shadow-(--shadow-control) outline-none
+        transition-colors duration-(--mona-motion-fast) ease-in-out
     `, {
     variants: {
         disabled: {
@@ -37,58 +37,60 @@ const chipVariants = cva(`
         },
         look: {
             default: `
-                    bg-background text-foreground
+                    ${themeRaisedSurfaceClasses} text-foreground
                     border border-border
-                    hover:bg-hover hover:text-accent-foreground
-                    active:bg-active active:text-accent-foreground
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+                    hover:bg-hover hover:text-foreground
+                    active:bg-(--color-selected-active) active:text-(--color-selected-active-foreground)
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `,
             primary: `
                     bg-primary text-primary-foreground
                     hover:bg-primary-hover hover:text-primary-foreground
                     active:bg-primary-active active:text-primary-foreground
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `,
             success: `
                     bg-success text-success-foreground
                     hover:bg-success-hover hover:text-success-foreground
                     active:bg-success-active active:text-success-foreground
-                    focus-visible:ring-2 focus-visible:ring-success/40
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `,
             error: `
                     bg-error text-error-foreground
                     hover:bg-error-hover hover:text-error-foreground
                     active:bg-error-active active:text-error-foreground
-                    focus-visible:ring-2 focus-visible:ring-error/40
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `,
             warning: `
                     bg-warning text-warning-foreground
                     hover:bg-warning-hover hover:text-warning-foreground
                     active:bg-warning-active active:text-warning-foreground
-                    focus-visible:ring-2 focus-visible:ring-warning/40
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `,
             info: `
                     bg-info text-info-foreground
                     hover:bg-info-hover hover:text-info-foreground
                     active:bg-info-active active:text-info-foreground
-                    focus-visible:ring-2 focus-visible:ring-info/40
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `,
             outline: `
-                    border border-border
-                    hover:bg-accent hover:text-accent-foreground
-                    active:bg-accent-dark active:text-accent-foreground
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+                    bg-transparent text-foreground
+                    border border-input-border
+                    hover:bg-hover hover:text-foreground
+                    active:bg-(--color-selected-active) active:text-(--color-selected-active-foreground)
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `,
             secondary: `
                     bg-secondary text-secondary-foreground
                     hover:bg-secondary-hover hover:text-secondary-foreground
                     active:bg-secondary-active active:text-secondary-foreground
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `,
             ghost: `
-                    hover:bg-secondary-hover hover:text-secondary-foreground
-                    active:bg-secondary-active active:text-secondary-foreground
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+                    bg-transparent text-foreground shadow-none
+                    hover:bg-hover hover:text-foreground
+                    active:bg-(--color-selected-active) active:text-(--color-selected-active-foreground)
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `
         },
         rounded: {
@@ -125,9 +127,9 @@ const chipVariants = cva(`
             look: "default",
             selected: true,
             class: `
-                    bg-selected text-foreground
-                    hover:bg-selected/95 hover:text-foreground
-                    active:bg-selected/100 active:text-foreground
+                    bg-(--color-selected) text-(--color-selected-foreground)
+                    hover:bg-(--color-selected-hover) hover:text-(--color-selected-hover-foreground)
+                    active:bg-(--color-selected-active) active:text-(--color-selected-active-foreground)
                 `
         },
         {
@@ -188,18 +190,18 @@ const chipVariants = cva(`
             look: "outline",
             selected: true,
             class: `
-                    bg-primary-selected text-primary-foreground
-                    hover:bg-primary-selected/95 hover:text-primary-foreground
-                    active:bg-primary-selected/100 active:text-primary-foreground
+                    bg-(--color-selected) text-(--color-selected-foreground)
+                    hover:bg-(--color-selected-hover) hover:text-(--color-selected-hover-foreground)
+                    active:bg-(--color-selected-active) active:text-(--color-selected-active-foreground)
                 `
         },
         {
             look: "ghost",
             selected: true,
             class: `
-                    bg-secondary-selected text-secondary-foreground
-                    hover:bg-secondary-selected/95 hover:text-secondary-foreground
-                    active:bg-secondary-selected/100 active:text-secondary-foreground
+                    bg-(--color-selected) text-(--color-selected-foreground)
+                    hover:bg-(--color-selected-hover) hover:text-(--color-selected-hover-foreground)
+                    active:bg-(--color-selected-active) active:text-(--color-selected-active-foreground)
                 `
         }
     ],
@@ -208,23 +210,12 @@ const chipVariants = cva(`
     }
 });
 
-const chipThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return chipVariants;
-        default:
-            return chipVariants;
-    }
-};
-
 class ChipComponent {
     #destroyRef;
     #elementRef;
-    #themeService;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
-        this.#themeService = inject(ThemeService);
         this.ariaChecked = computed(() => {
             if (!this.toggleable()) {
                 return undefined;
@@ -233,14 +224,13 @@ class ChipComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaChecked" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const disabled = this.disabled();
             const look = this.look();
             const rounded = this.rounded();
             const size = this.size();
             const selected = this.selected();
             const userClass = this.userClass();
-            const variantClasses = chipThemeVariants(theme)({ disabled, look, rounded, size, selected });
+            const variantClasses = chipThemeVariants({ disabled, look, rounded, size, selected });
             return twMerge(variantClasses, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));

package/fesm2022/nanahoshi-mona-ui-circular-progress-bar.mjs

@@ -2,7 +2,6 @@ import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, TemplateRef, Directive, computed, contentChild, input, Component } from '@angular/core';
 import { getPercentage } from '@nanahoshi/mona-ui/common';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
@@ -20,42 +19,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const circularProgressBarBaseVariants = cva(`
-        flex items-center justify-center
-        relative select-none
-        [&_svg]:w-full [&_svg]:h-full
-        [&_svg]:absolute [&_svg]:top-1/2
-        [&_svg]:left-1/2
+const circularProgressBarBaseThemeVariants = cva(`
+        relative flex items-center justify-center select-none
+        text-foreground
+        [&_svg]:absolute [&_svg]:top-1/2 [&_svg]:left-1/2
+        [&_svg]:h-full [&_svg]:w-full
         [&_svg]:-translate-x-1/2 [&_svg]:-translate-y-1/2
         [&_svg_circle]:origin-center
         [&_svg_circle]:-rotate-90
-        [&_svg_circle]:transition-[stroke-dashoffset,stroke] duration-200 ease-in
-        [&_svg_circle]:data-[stroke-trail='true']:stroke-input-border
+        [&_svg_circle]:transition-[stroke-dashoffset,stroke] duration-(--mona-motion-fast) ease-in
+        [&_svg_circle]:data-[stroke-trail='true']:stroke-surface-muted
     `, {
     variants: {
         disabled: {
-            true: "opacity-50 pointer-events-none cursor-not-allowed",
+            true: "pointer-events-none cursor-not-allowed opacity-50",
             false: ""
         }
     }
 });
 
-const circularProgressBarBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return circularProgressBarBaseVariants;
-        default:
-            return circularProgressBarBaseVariants;
-    }
-};
-
 class CircularProgressBarComponent {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.baseClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const disabled = this.disabled();
-            const classes = circularProgressBarBaseThemeVariants(theme)({ disabled });
+            const classes = circularProgressBarBaseThemeVariants({ disabled });
             const animateClass = this.animate() ? "" : "[&_svg_circle]:transition-none";
             return twMerge(classes, this.userClass(), animateClass);
         }, /* @ts-ignore */
@@ -166,7 +153,6 @@ class CircularProgressBarComponent {
         this.value = input(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     }
-    #themeService;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CircularProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CircularProgressBarComponent, isStandalone: true, selector: "mona-circular-progress-bar", inputs: { animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaValueText: { classPropertyName: "ariaValueText", publicName: "aria-valuetext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", 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 } }, host: { attributes: { "role": "progressbar" }, properties: { "class": "baseClasses()", "attr.aria-busy": "indeterminate() || null", "attr.aria-label": "ariaLabel() || null", "attr.aria-valuemin": "indeterminate() ? null : min()", "attr.aria-valuemax": "indeterminate() ? null : max()", "attr.aria-valuenow": "indeterminate() ? null : value()", "attr.aria-valuetext": "ariaValueText() || null", "attr.aria-disabled": "disabled() || null", "attr.data-disabled": "disabled() || null", "style.width": "pixelSize()", "style.height": "pixelSize()" } }, queries: [{ propertyName: "labelTemplate", first: true, predicate: CircularProgressBarLabelTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<svg>\n    <circle\n        [attr.cx]=\"center().x\"\n        [attr.cy]=\"center().y\"\n        [attr.r]=\"radius()\"\n        [attr.data-stroke-trail]=\"true\"\n        [attr.stroke-dasharray]=\"circumference()\"\n        [attr.stroke-width]=\"thickness()\"\n        fill=\"transparent\" />\n    <circle\n        [attr.cx]=\"center().x\"\n        [attr.cy]=\"center().y\"\n        [attr.r]=\"radius()\"\n        [attr.stroke]=\"strokeColor()\"\n        [attr.stroke-dasharray]=\"circumference()\"\n        [attr.stroke-dashoffset]=\"strokeDashOffset()\"\n        [attr.stroke-width]=\"thickness()\"\n        fill=\"transparent\"\n        [class.indeterminate]=\"indeterminate()\" />\n</svg>\n@if (!indeterminate()) {\n    <div class=\"mona-circular-progress-bar-label\">\n        @if (labelTemplate()) {\n            <ng-container\n                [ngTemplateOutlet]=\"labelTemplate()?.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: value(), min: min(), max: max(), percent: progress() }\">\n            </ng-container>\n        } @else {\n            {{ progress() }}\n        }\n    </div>\n}\n", styles: [".indeterminate{animation:rotate 2s linear infinite}@keyframes rotate{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }