@nanahoshi/mona-ui 0.1.0 → 0.2.0

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

@@ -4,7 +4,6 @@ import { NgTemplateOutlet } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { select } from '@mirei/ts-collections';
 import { fromEvent } from 'rxjs';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { cva } from 'class-variance-authority';
 
 /**
@@ -53,12 +52,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const stepperBaseVariants = cva(`
-        relative grid outline-none
+const stepperBaseThemeVariants = cva(`
+        relative grid outline-none
     `, {
     variants: {
         orientation: {
-            horizontal: "w-full h-auto",
+            horizontal: "h-auto w-full",
             vertical: "h-full w-auto"
         }
     },
@@ -66,19 +65,19 @@ const stepperBaseVariants = cva(`
         orientation: "horizontal"
     }
 });
-const stepperStepListVariants = cva(`
-        absolute flex list-none col-span-full
-        font-medium z-1
+const stepperStepListThemeVariants = cva(`
+        absolute z-1 col-span-full flex list-none
+        font-medium
     `, {
     variants: {
         orientation: {
-            horizontal: `
-                    flex-row w-full
-                    -translate-y-3
+            horizontal: `
+                    w-full flex-row
+                    -translate-y-3
                 `,
-            vertical: `
-                    flex-col h-full w-max
-                    -translate-x-3
+            vertical: `
+                    h-full w-max flex-col
+                    -translate-x-3
                 `
         }
     },
@@ -86,35 +85,31 @@ const stepperStepListVariants = cva(`
         orientation: "horizontal"
     }
 });
-const stepperStepListItemVariants = cva(`
-        flex items-center
-        grow-1 shrink-0 basis-auto
-        z-1
+const stepperStepListItemThemeVariants = cva(`
+        z-1 flex grow-1 shrink-0 basis-auto items-center
     `, {
     variants: {
         orientation: {
             horizontal: "flex-col gap-2",
-            vertical: "flex-row gap-2 justify-start"
+            vertical: "flex-row justify-start gap-2"
         }
     },
     defaultVariants: {
         orientation: "horizontal"
     }
 });
-const stepperStepIndicatorVariants = cva(`
-        w-8 h-8
-        flex items-center justify-center
-        bg-background border border-border
-        text-foreground outline-none
-        transition-colors duration-400 ease-in-out
+const stepperStepIndicatorThemeVariants = cva(`
+        flex h-8 w-8 items-center justify-center
+        border border-border outline-none
+        transition-colors duration-400 ease-in-out
     `, {
     variants: {
         active: {
             true: "bg-primary text-primary-foreground",
-            false: ""
+            false: "bg-surface-raised text-foreground"
         },
         focused: {
-            true: "ring-2 ring-primary/40",
+            true: "border-focus-indicator ring-2 ring-focus-indicator/35",
             false: ""
         },
         rounded: {
@@ -126,13 +121,14 @@ const stepperStepIndicatorVariants = cva(`
         }
     }
 });
-const stepperTrackVariants = cva(`
-        relative grid
-        bg-background border border-border
+const stepperTrackThemeVariants = cva(`
+        relative grid
+        bg-surface-muted text-foreground
+        border border-border-subtle
     `, {
     variants: {
         orientation: {
-            horizontal: "w-full h-2",
+            horizontal: "h-2 w-full",
             vertical: "h-full w-2"
         }
     },
@@ -140,13 +136,13 @@ const stepperTrackVariants = cva(`
         orientation: "horizontal"
     }
 });
-const stepperTrackLineVariants = cva(`
-        absolute bg-primary
+const stepperTrackLineThemeVariants = cva(`
+        absolute bg-primary
     `, {
     variants: {
         orientation: {
-            horizontal: "h-full transition-width duration-300 ease-out",
-            vertical: "w-full transition-height duration-300 ease-out"
+            horizontal: "h-full transition-width duration-(--mona-motion-standard) ease-out",
+            vertical: "w-full transition-height duration-(--mona-motion-standard) ease-out"
         }
     },
     defaultVariants: {
@@ -154,69 +150,17 @@ const stepperTrackLineVariants = cva(`
     }
 });
 
-const stepperBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return stepperBaseVariants;
-        default:
-            return stepperBaseVariants;
-    }
-};
-const stepperStepListThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return stepperStepListVariants;
-        default:
-            return stepperStepListVariants;
-    }
-};
-const stepperStepListItemThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return stepperStepListItemVariants;
-        default:
-            return stepperStepListItemVariants;
-    }
-};
-const stepperStepIndicatorThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return stepperStepIndicatorVariants;
-        default:
-            return stepperStepIndicatorVariants;
-    }
-};
-const stepperTrackThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return stepperTrackVariants;
-        default:
-            return stepperTrackVariants;
-    }
-};
-const stepperTrackLineThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return stepperTrackLineVariants;
-        default:
-            return stepperTrackLineVariants;
-    }
-};
-
 class StepperIndicatorDirective {
     #wasFocused;
     #host;
-    #themeService;
     constructor() {
         this.#wasFocused = false;
         this.#host = inject(ElementRef);
-        this.#themeService = inject(ThemeService);
         this.stepIndicatorClass = computed(() => {
-            const theme = this.#themeService.theme();
             const active = this.active();
             const focused = this.focused();
             const rounded = this.rounded();
-            return stepperStepIndicatorThemeVariants(theme)({ active, focused, rounded });
+            return stepperStepIndicatorThemeVariants({ active, focused, rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "stepIndicatorClass" }] : /* istanbul ignore next */ []));
         this.active = input.required(/* @ts-ignore */
@@ -251,13 +195,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 class StepperComponent {
     #destroyRef;
     #hostElementRef;
-    #themeService;
     #trackItemSize;
     #trackLength;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#hostElementRef = inject(ElementRef);
-        this.#themeService = inject(ThemeService);
         this.#trackItemSize = computed(() => {
             const stepCount = this.viewSteps().length;
             return stepCount !== 0 ? 100 / stepCount : 0;
@@ -280,9 +222,8 @@ class StepperComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeStep" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const orientation = this.orientation();
-            return stepperBaseThemeVariants(theme)({ orientation });
+            return stepperBaseThemeVariants({ orientation });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.highlightedStep = signal(0, /* @ts-ignore */
@@ -301,15 +242,13 @@ class StepperComponent {
         });
         this.labelTemplate = contentChild(StepperLabelTemplateDirective, { read: TemplateRef });
         this.listClass = computed(() => {
-            const theme = this.#themeService.theme();
             const orientation = this.orientation();
-            return stepperStepListThemeVariants(theme)({ orientation });
+            return stepperStepListThemeVariants({ orientation });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
         this.listItemClass = computed(() => {
-            const theme = this.#themeService.theme();
             const orientation = this.orientation();
-            return stepperStepListItemThemeVariants(theme)({ orientation });
+            return stepperStepListItemThemeVariants({ orientation });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listItemClass" }] : /* istanbul ignore next */ []));
         this.progressMax = computed(() => Math.max(this.viewSteps().length - 1, 0), /* @ts-ignore */
@@ -318,9 +257,8 @@ class StepperComponent {
             read: TemplateRef
         });
         this.trackClass = computed(() => {
-            const theme = this.#themeService.theme();
             const orientation = this.orientation();
-            return stepperTrackThemeVariants(theme)({ orientation });
+            return stepperTrackThemeVariants({ orientation });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "trackClass" }] : /* istanbul ignore next */ []));
         this.trackInnerStyles = computed(() => {
@@ -340,9 +278,8 @@ class StepperComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "trackItemStyles" }] : /* istanbul ignore next */ []));
         this.trackLineClass = computed(() => {
-            const theme = this.#themeService.theme();
             const orientation = this.orientation();
-            return stepperTrackLineThemeVariants(theme)({ orientation });
+            return stepperTrackLineThemeVariants({ orientation });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "trackLineClass" }] : /* istanbul ignore next */ []));
         this.trackStyles = computed(() => {
@@ -509,7 +446,7 @@ class StepperComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: StepperComponent, isStandalone: true, selector: "mona-stepper", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, progressAriaLabel: { classPropertyName: "progressAriaLabel", publicName: "progressAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { step: "stepChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel()", "class": "baseClass()", "style": "hostStyles()" } }, queries: [{ propertyName: "indicatorTemplate", first: true, predicate: StepperIndicatorTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: StepperLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "stepTemplate", first: true, predicate: StepperStepTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ol [class]=\"listClass()\">\r\n    @for (step of viewSteps(); track step.index) {\r\n        @let active = isStepActive(step);\r\n        @let locked = isStepLocked(step);\r\n        @let focused = step.index === highlightedStep();\r\n        @let options = step.options;\r\n        @let index = step.index;\r\n        @let currentIndex = activeStep()?.index ?? -1;\r\n        @let disabled = !!options.disabled;\r\n        <li\r\n            [class]=\"listItemClass()\"\r\n            [class.cursor-pointer]=\"!locked\"\r\n            [class.cursor-not-allowed]=\"locked\"\r\n            [style]=\"trackItemStyles()\"\r\n            role=\"presentation\"\r\n            (click)=\"onStepClick(step)\">\r\n            @if (stepTemplate()) {\r\n                <span\r\n                    role=\"button\"\r\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\r\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\r\n                    [attr.aria-label]=\"options.label\"\r\n                    [attr.tabindex]=\"focused ? 0 : -1\"\r\n                    (focus)=\"onIndicatorFocus(step)\">\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"stepTemplate()\"\r\n                        [ngTemplateOutletContext]=\"{\r\n                            $implicit: options,\r\n                            index,\r\n                            active,\r\n                            currentIndex,\r\n                            disabled\r\n                        }\"></ng-container>\r\n                </span>\r\n            } @else {\r\n                <span\r\n                    monaStepperIndicator\r\n                    [rounded]=\"rounded()\"\r\n                    [active]=\"active\"\r\n                    [focused]=\"focused\"\r\n                    role=\"button\"\r\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\r\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\r\n                    [attr.aria-label]=\"options.label\"\r\n                    [attr.tabindex]=\"focused ? 0 : -1\"\r\n                    (focus)=\"onIndicatorFocus(step)\">\r\n                    @if (indicatorTemplate()) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"indicatorTemplate()\"\r\n                            [ngTemplateOutletContext]=\"{\r\n                                $implicit: options,\r\n                                index,\r\n                                active,\r\n                                currentIndex,\r\n                                disabled\r\n                            }\"></ng-container>\r\n                    } @else {\r\n                        {{ step.index + 1 }}\r\n                    }\r\n                </span>\r\n            }\r\n            @if (labelTemplate()) {\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"labelTemplate()\"\r\n                    [ngTemplateOutletContext]=\"{\r\n                        $implicit: options,\r\n                        index,\r\n                        active,\r\n                        currentIndex,\r\n                        disabled\r\n                    }\"></ng-container>\r\n            } @else {\r\n                <span aria-hidden=\"true\">{{ options.label }}</span>\r\n            }\r\n        </li>\r\n    }\r\n</ol>\r\n<div\r\n    [class]=\"trackClass()\"\r\n    [style]=\"trackStyles()\"\r\n    role=\"progressbar\"\r\n    [attr.aria-valuenow]=\"step()\"\r\n    [attr.aria-valuemin]=\"0\"\r\n    [attr.aria-valuemax]=\"progressMax()\"\r\n    [attr.aria-label]=\"progressAriaLabel()\">\r\n    <div [class]=\"trackLineClass()\" [style]=\"trackInnerStyles()\"></div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: StepperIndicatorDirective, selector: "span[monaStepperIndicator]", inputs: ["active", "focused", "rounded"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: StepperComponent, isStandalone: true, selector: "mona-stepper", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, progressAriaLabel: { classPropertyName: "progressAriaLabel", publicName: "progressAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { step: "stepChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel()", "class": "baseClass()", "style": "hostStyles()" } }, queries: [{ propertyName: "indicatorTemplate", first: true, predicate: StepperIndicatorTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: StepperLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "stepTemplate", first: true, predicate: StepperStepTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ol [class]=\"listClass()\">\n    @for (step of viewSteps(); track step.index) {\n        @let active = isStepActive(step);\n        @let locked = isStepLocked(step);\n        @let focused = step.index === highlightedStep();\n        @let options = step.options;\n        @let index = step.index;\n        @let currentIndex = activeStep()?.index ?? -1;\n        @let disabled = !!options.disabled;\n        <li\n            [class]=\"listItemClass()\"\n            [class.cursor-pointer]=\"!locked\"\n            [class.cursor-not-allowed]=\"locked\"\n            [style]=\"trackItemStyles()\"\n            role=\"presentation\"\n            (click)=\"onStepClick(step)\">\n            @if (stepTemplate()) {\n                <span\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"stepTemplate()\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: options,\n                            index,\n                            active,\n                            currentIndex,\n                            disabled\n                        }\"></ng-container>\n                </span>\n            } @else {\n                <span\n                    monaStepperIndicator\n                    [rounded]=\"rounded()\"\n                    [active]=\"active\"\n                    [focused]=\"focused\"\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    @if (indicatorTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"indicatorTemplate()\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: options,\n                                index,\n                                active,\n                                currentIndex,\n                                disabled\n                            }\"></ng-container>\n                    } @else {\n                        {{ step.index + 1 }}\n                    }\n                </span>\n            }\n            @if (labelTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"labelTemplate()\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: options,\n                        index,\n                        active,\n                        currentIndex,\n                        disabled\n                    }\"></ng-container>\n            } @else {\n                <span aria-hidden=\"true\">{{ options.label }}</span>\n            }\n        </li>\n    }\n</ol>\n<div\n    [class]=\"trackClass()\"\n    [style]=\"trackStyles()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"step()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"progressMax()\"\n    [attr.aria-label]=\"progressAriaLabel()\">\n    <div [class]=\"trackLineClass()\" [style]=\"trackInnerStyles()\"></div>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: StepperIndicatorDirective, selector: "span[monaStepperIndicator]", inputs: ["active", "focused", "rounded"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
@@ -518,7 +455,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.aria-label]": "ariaLabel()",
                         "[class]": "baseClass()",
                         "[style]": "hostStyles()"
-                    }, template: "<ol [class]=\"listClass()\">\r\n    @for (step of viewSteps(); track step.index) {\r\n        @let active = isStepActive(step);\r\n        @let locked = isStepLocked(step);\r\n        @let focused = step.index === highlightedStep();\r\n        @let options = step.options;\r\n        @let index = step.index;\r\n        @let currentIndex = activeStep()?.index ?? -1;\r\n        @let disabled = !!options.disabled;\r\n        <li\r\n            [class]=\"listItemClass()\"\r\n            [class.cursor-pointer]=\"!locked\"\r\n            [class.cursor-not-allowed]=\"locked\"\r\n            [style]=\"trackItemStyles()\"\r\n            role=\"presentation\"\r\n            (click)=\"onStepClick(step)\">\r\n            @if (stepTemplate()) {\r\n                <span\r\n                    role=\"button\"\r\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\r\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\r\n                    [attr.aria-label]=\"options.label\"\r\n                    [attr.tabindex]=\"focused ? 0 : -1\"\r\n                    (focus)=\"onIndicatorFocus(step)\">\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"stepTemplate()\"\r\n                        [ngTemplateOutletContext]=\"{\r\n                            $implicit: options,\r\n                            index,\r\n                            active,\r\n                            currentIndex,\r\n                            disabled\r\n                        }\"></ng-container>\r\n                </span>\r\n            } @else {\r\n                <span\r\n                    monaStepperIndicator\r\n                    [rounded]=\"rounded()\"\r\n                    [active]=\"active\"\r\n                    [focused]=\"focused\"\r\n                    role=\"button\"\r\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\r\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\r\n                    [attr.aria-label]=\"options.label\"\r\n                    [attr.tabindex]=\"focused ? 0 : -1\"\r\n                    (focus)=\"onIndicatorFocus(step)\">\r\n                    @if (indicatorTemplate()) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"indicatorTemplate()\"\r\n                            [ngTemplateOutletContext]=\"{\r\n                                $implicit: options,\r\n                                index,\r\n                                active,\r\n                                currentIndex,\r\n                                disabled\r\n                            }\"></ng-container>\r\n                    } @else {\r\n                        {{ step.index + 1 }}\r\n                    }\r\n                </span>\r\n            }\r\n            @if (labelTemplate()) {\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"labelTemplate()\"\r\n                    [ngTemplateOutletContext]=\"{\r\n                        $implicit: options,\r\n                        index,\r\n                        active,\r\n                        currentIndex,\r\n                        disabled\r\n                    }\"></ng-container>\r\n            } @else {\r\n                <span aria-hidden=\"true\">{{ options.label }}</span>\r\n            }\r\n        </li>\r\n    }\r\n</ol>\r\n<div\r\n    [class]=\"trackClass()\"\r\n    [style]=\"trackStyles()\"\r\n    role=\"progressbar\"\r\n    [attr.aria-valuenow]=\"step()\"\r\n    [attr.aria-valuemin]=\"0\"\r\n    [attr.aria-valuemax]=\"progressMax()\"\r\n    [attr.aria-label]=\"progressAriaLabel()\">\r\n    <div [class]=\"trackLineClass()\" [style]=\"trackInnerStyles()\"></div>\r\n</div>\r\n" }]
+                    }, template: "<ol [class]=\"listClass()\">\n    @for (step of viewSteps(); track step.index) {\n        @let active = isStepActive(step);\n        @let locked = isStepLocked(step);\n        @let focused = step.index === highlightedStep();\n        @let options = step.options;\n        @let index = step.index;\n        @let currentIndex = activeStep()?.index ?? -1;\n        @let disabled = !!options.disabled;\n        <li\n            [class]=\"listItemClass()\"\n            [class.cursor-pointer]=\"!locked\"\n            [class.cursor-not-allowed]=\"locked\"\n            [style]=\"trackItemStyles()\"\n            role=\"presentation\"\n            (click)=\"onStepClick(step)\">\n            @if (stepTemplate()) {\n                <span\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"stepTemplate()\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: options,\n                            index,\n                            active,\n                            currentIndex,\n                            disabled\n                        }\"></ng-container>\n                </span>\n            } @else {\n                <span\n                    monaStepperIndicator\n                    [rounded]=\"rounded()\"\n                    [active]=\"active\"\n                    [focused]=\"focused\"\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    @if (indicatorTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"indicatorTemplate()\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: options,\n                                index,\n                                active,\n                                currentIndex,\n                                disabled\n                            }\"></ng-container>\n                    } @else {\n                        {{ step.index + 1 }}\n                    }\n                </span>\n            }\n            @if (labelTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"labelTemplate()\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: options,\n                        index,\n                        active,\n                        currentIndex,\n                        disabled\n                    }\"></ng-container>\n            } @else {\n                <span aria-hidden=\"true\">{{ options.label }}</span>\n            }\n        </li>\n    }\n</ol>\n<div\n    [class]=\"trackClass()\"\n    [style]=\"trackStyles()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"step()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"progressMax()\"\n    [attr.aria-label]=\"progressAriaLabel()\">\n    <div [class]=\"trackLineClass()\" [style]=\"trackInnerStyles()\"></div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { indicatorTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StepperIndicatorTemplateDirective), { ...{
                             read: TemplateRef
                         }, isSignal: true }] }], labelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StepperLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], stepTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StepperStepTemplateDirective), { ...{

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

@@ -2,10 +2,10 @@ import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Directive, inject, DestroyRef, ElementRef, computed, contentChild, TemplateRef, input, model, output, afterNextRender, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { fromEvent, filter, tap, merge } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
+import { themeControlSurfaceClasses, themeRaisedSurfaceClasses } from '@nanahoshi/mona-ui/internal';
 
 class SwitchHandleContentTemplateDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SwitchHandleContentTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -40,26 +40,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const switchVariants = cva(`
-        relative flex items-center cursor-pointer select-none
-        transition-[background]
-
-        bg-input-background
-        border border-input-border
-        outline-none
-
-        focus-within:ring-2 focus-within:ring-primary/40
-
-        data-[disabled='true']:pointer-events-none
-        data-[disabled='true']:opacity-50
-
-        data-[active='true']:bg-primary
-        data-[active='true']:text-primary-foreground
-
-        [&.ng-touched.ng-invalid]:border-error
-
-        data-[invalid='true']:border-error
-        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+const switchThemeVariants = cva(`
+        group relative flex items-center
+        cursor-pointer select-none
+        ${themeControlSurfaceClasses}
+        border border-input-border
+        outline-none
+        transition-[background,border-color]
+
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:border-disabled-border
+        data-[disabled='true']:bg-disabled-background
+        data-[disabled='true']:text-disabled-foreground
+
+        data-[active='true']:bg-primary
+        data-[active='true']:text-primary-foreground
+        data-[disabled='true']:data-[active='true']:bg-disabled-background
+
+        focus-visible:border-focus-indicator
+        focus-visible:ring-2 focus-visible:ring-focus-indicator/35
+
+        [&.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: {
@@ -70,18 +76,21 @@ const switchVariants = cva(`
             small: "rounded-sm"
         },
         size: {
-            large: "w-14 h-7.5 text-md",
-            medium: "w-12 h-6.5 text-sm",
-            small: "w-10 h-5.5 text-xs"
+            large: "h-7.5 w-14 text-md",
+            medium: "h-6.5 w-12 text-sm",
+            small: "h-5.5 w-10 text-xs"
         }
     }
 });
-const switchHandleVariants = cva(`
-        absolute inline-flex
-        items-center justify-center
-        outline-none transition-[left,background] ease-in-out duration-300
-        border border-border bg-secondary
-        data-[active='true']:bg-background
+const switchHandleThemeVariants = cva(`
+        absolute inline-flex items-center justify-center
+        ${themeRaisedSurfaceClasses} text-foreground
+        border border-border-subtle shadow-(--shadow-control)
+        outline-none
+        transition-[left,background] duration-(--mona-motion-standard) ease-in-out
+        data-[active='true']:bg-primary-foreground
+        group-data-[disabled='true']:border-disabled-border
+        group-data-[disabled='true']:bg-disabled-background
     `, {
     variants: {
         rounded: {
@@ -92,83 +101,53 @@ const switchHandleVariants = cva(`
             small: "rounded-sm"
         },
         size: {
-            large: `
-                    w-6 h-6
-                    data-[active='true']:left-[calc(100%-26px)]
-                    data-[active='false']:left-0.5
+            large: `
+                    h-6 w-6
+                    data-[active='true']:left-[calc(100%-26px)]
+                    data-[active='false']:left-0.5
                 `,
-            medium: `
-                    w-5 h-5
-                    data-[active='true']:left-[calc(100%-22px)]
-                    data-[active='false']:left-0.5
+            medium: `
+                    h-5 w-5
+                    data-[active='true']:left-[calc(100%-22px)]
+                    data-[active='false']:left-0.5
                 `,
-            small: `
-                    w-4 h-4
-                    data-[active='true']:left-[calc(100%-18px)]
-                    data-[active='false']:left-0.5
+            small: `
+                    h-4 w-4
+                    data-[active='true']:left-[calc(100%-18px)]
+                    data-[active='false']:left-0.5
                 `
         }
     }
 });
-const switchLabelVariants = cva(`
-        h-full flex flex-1 items-center justify-center text-xs
+const switchLabelThemeVariants = cva(`
+        flex h-full flex-1 items-center justify-center text-xs
     `);
 
-const switchThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return switchVariants;
-        default:
-            return switchVariants; // Default to Mona styles
-    }
-};
-const switchHandleThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return switchHandleVariants;
-        default:
-            return switchHandleVariants; // Default to Mona styles
-    }
-};
-const switchLabelThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return switchLabelVariants;
-        default:
-            return switchLabelVariants; // Default to Mona styles
-    }
-};
-
 class SwitchComponent {
     #destroyRef;
     #hostElementRef;
-    #themeService;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#hostElementRef = inject((ElementRef));
-        this.#themeService = inject(ThemeService);
         this.classes = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
             const size = this.size();
-            const classes = switchThemeVariants(theme)({ rounded, size });
+            const classes = switchThemeVariants({ rounded, size });
             return twMerge(classes, this.userClass());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
         this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && !this.checked()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.handleClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
             const size = this.size();
-            const classes = switchHandleThemeVariants(theme)({ rounded, size });
+            const classes = switchHandleThemeVariants({ rounded, size });
             return twMerge(classes);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "handleClasses" }] : /* istanbul ignore next */ []));
         this.handleContentTemplate = contentChild(SwitchHandleContentTemplateDirective, { ...(ngDevMode ? { debugName: "handleContentTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.labelClasses = computed(() => {
-            const theme = this.#themeService.theme();
-            const classes = switchLabelThemeVariants(theme)();
+            const classes = switchLabelThemeVariants();
             return twMerge(classes);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
@@ -274,7 +253,7 @@ class SwitchComponent {
         this.touch.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SwitchComponent, isStandalone: true, selector: "mona-switch", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, offLabel: { classPropertyName: "offLabel", publicName: "offLabel", isSignal: true, isRequired: false, transformFunction: null }, onLabel: { classPropertyName: "onLabel", publicName: "onLabel", 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 }, size: { classPropertyName: "size", publicName: "size", 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 } }, outputs: { checked: "checkedChange", touch: "touch" }, host: { listeners: { "blur": "onBlur()" }, properties: { "attr.role": "'switch'", "attr.aria-checked": "checked()", "attr.aria-disabled": "disabled() || undefined", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.tabindex": "disabled() ? -1 : 0", "attr.data-active": "checked()", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.aria-invalid": "invalidState() ? 'true' : null", "class": "classes()" } }, queries: [{ propertyName: "handleContentTemplate", first: true, predicate: SwitchHandleContentTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "offLabelTemplate", first: true, predicate: SwitchOffLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "onLabelTemplate", first: true, predicate: SwitchOnLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<span [class]=\"labelClasses()\">\r\n    @if (checked() && !onLabelTemplate()) {\r\n        <span animate.enter=\"mona-switch-label-enter\" animate.leave=\"mona-switch-label-leave\">{{ onLabel() }}</span>\r\n    }\r\n    @if (checked() && onLabelTemplate()) {\r\n        <span animate.enter=\"mona-switch-label-enter\" animate.leave=\"mona-switch-label-leave\">\r\n            <ng-container [ngTemplateOutlet]=\"onLabelTemplate() ?? null\"></ng-container>\r\n        </span>\r\n    }\r\n</span>\r\n<span [class]=\"labelClasses()\">\r\n    @if (!checked() && !offLabelTemplate()) {\r\n        <span animate.enter=\"mona-switch-label-enter\" animate.leave=\"mona-switch-label-leave\">{{ offLabel() }}</span>\r\n    }\r\n    @if (!checked() && offLabelTemplate()) {\r\n        <span animate.enter=\"mona-switch-label-enter\" animate.leave=\"mona-switch-label-leave\">\r\n            <ng-container [ngTemplateOutlet]=\"offLabelTemplate() ?? null\"></ng-container>\r\n        </span>\r\n    }\r\n</span>\r\n<div [class]=\"handleClasses()\" [attr.data-active]=\"checked()\">\r\n    @if (handleContentTemplate()) {\r\n        <ng-container\r\n            [ngTemplateOutlet]=\"handleContentTemplate() ?? null\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: checked() }\"></ng-container>\r\n    }\r\n</div>\r\n", styles: [".mona-switch-label-enter{animation:mona-switch-label-fade-in .3s ease-out}.mona-switch-label-leave{animation:mona-switch-label-fade-out .3s ease-out}@keyframes mona-switch-label-fade-in{0%{opacity:0}to{opacity:1}}@keyframes mona-switch-label-fade-out{0%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.mona-switch-label-enter,.mona-switch-label-leave{animation-duration:1ms}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SwitchComponent, isStandalone: true, selector: "mona-switch", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, offLabel: { classPropertyName: "offLabel", publicName: "offLabel", isSignal: true, isRequired: false, transformFunction: null }, onLabel: { classPropertyName: "onLabel", publicName: "onLabel", 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 }, size: { classPropertyName: "size", publicName: "size", 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 } }, outputs: { checked: "checkedChange", touch: "touch" }, host: { listeners: { "blur": "onBlur()" }, properties: { "attr.role": "'switch'", "attr.aria-checked": "checked()", "attr.aria-disabled": "disabled() || undefined", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.tabindex": "disabled() ? -1 : 0", "attr.data-active": "checked()", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.aria-invalid": "invalidState() ? 'true' : null", "class": "classes()" } }, queries: [{ propertyName: "handleContentTemplate", first: true, predicate: SwitchHandleContentTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "offLabelTemplate", first: true, predicate: SwitchOffLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "onLabelTemplate", first: true, predicate: SwitchOnLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<span [class]=\"labelClasses()\">\n    @if (checked() && !onLabelTemplate()) {\n        <span animate.enter=\"mona-switch-label-enter\" animate.leave=\"mona-switch-label-leave\">{{ onLabel() }}</span>\n    }\n    @if (checked() && onLabelTemplate()) {\n        <span animate.enter=\"mona-switch-label-enter\" animate.leave=\"mona-switch-label-leave\">\n            <ng-container [ngTemplateOutlet]=\"onLabelTemplate() ?? null\"></ng-container>\n        </span>\n    }\n</span>\n<span [class]=\"labelClasses()\">\n    @if (!checked() && !offLabelTemplate()) {\n        <span animate.enter=\"mona-switch-label-enter\" animate.leave=\"mona-switch-label-leave\">{{ offLabel() }}</span>\n    }\n    @if (!checked() && offLabelTemplate()) {\n        <span animate.enter=\"mona-switch-label-enter\" animate.leave=\"mona-switch-label-leave\">\n            <ng-container [ngTemplateOutlet]=\"offLabelTemplate() ?? null\"></ng-container>\n        </span>\n    }\n</span>\n<div [class]=\"handleClasses()\" [attr.data-active]=\"checked()\">\n    @if (handleContentTemplate()) {\n        <ng-container\n            [ngTemplateOutlet]=\"handleContentTemplate() ?? null\"\n            [ngTemplateOutletContext]=\"{ $implicit: checked() }\"></ng-container>\n    }\n</div>\n", styles: [".mona-switch-label-enter{animation:mona-switch-label-fade-in .3s ease-out}.mona-switch-label-leave{animation:mona-switch-label-fade-out .3s ease-out}@keyframes mona-switch-label-fade-in{0%{opacity:0}to{opacity:1}}@keyframes mona-switch-label-fade-out{0%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.mona-switch-label-enter,.mona-switch-label-leave{animation-duration:1ms}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SwitchComponent, decorators: [{
             type: Component,
@@ -291,7 +270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.aria-invalid]": "invalidState() ? 'true' : null",
                         "[class]": "classes()",
                         "(blur)": "onBlur()"
-                    }, template: "<span [class]=\"labelClasses()\">\r\n    @if (checked() && !onLabelTemplate()) {\r\n        <span animate.enter=\"mona-switch-label-enter\" animate.leave=\"mona-switch-label-leave\">{{ onLabel() }}</span>\r\n    }\r\n    @if (checked() && onLabelTemplate()) {\r\n        <span animate.enter=\"mona-switch-label-enter\" animate.leave=\"mona-switch-label-leave\">\r\n            <ng-container [ngTemplateOutlet]=\"onLabelTemplate() ?? null\"></ng-container>\r\n        </span>\r\n    }\r\n</span>\r\n<span [class]=\"labelClasses()\">\r\n    @if (!checked() && !offLabelTemplate()) {\r\n        <span animate.enter=\"mona-switch-label-enter\" animate.leave=\"mona-switch-label-leave\">{{ offLabel() }}</span>\r\n    }\r\n    @if (!checked() && offLabelTemplate()) {\r\n        <span animate.enter=\"mona-switch-label-enter\" animate.leave=\"mona-switch-label-leave\">\r\n            <ng-container [ngTemplateOutlet]=\"offLabelTemplate() ?? null\"></ng-container>\r\n        </span>\r\n    }\r\n</span>\r\n<div [class]=\"handleClasses()\" [attr.data-active]=\"checked()\">\r\n    @if (handleContentTemplate()) {\r\n        <ng-container\r\n            [ngTemplateOutlet]=\"handleContentTemplate() ?? null\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: checked() }\"></ng-container>\r\n    }\r\n</div>\r\n", styles: [".mona-switch-label-enter{animation:mona-switch-label-fade-in .3s ease-out}.mona-switch-label-leave{animation:mona-switch-label-fade-out .3s ease-out}@keyframes mona-switch-label-fade-in{0%{opacity:0}to{opacity:1}}@keyframes mona-switch-label-fade-out{0%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.mona-switch-label-enter,.mona-switch-label-leave{animation-duration:1ms}}\n"] }]
+                    }, template: "<span [class]=\"labelClasses()\">\n    @if (checked() && !onLabelTemplate()) {\n        <span animate.enter=\"mona-switch-label-enter\" animate.leave=\"mona-switch-label-leave\">{{ onLabel() }}</span>\n    }\n    @if (checked() && onLabelTemplate()) {\n        <span animate.enter=\"mona-switch-label-enter\" animate.leave=\"mona-switch-label-leave\">\n            <ng-container [ngTemplateOutlet]=\"onLabelTemplate() ?? null\"></ng-container>\n        </span>\n    }\n</span>\n<span [class]=\"labelClasses()\">\n    @if (!checked() && !offLabelTemplate()) {\n        <span animate.enter=\"mona-switch-label-enter\" animate.leave=\"mona-switch-label-leave\">{{ offLabel() }}</span>\n    }\n    @if (!checked() && offLabelTemplate()) {\n        <span animate.enter=\"mona-switch-label-enter\" animate.leave=\"mona-switch-label-leave\">\n            <ng-container [ngTemplateOutlet]=\"offLabelTemplate() ?? null\"></ng-container>\n        </span>\n    }\n</span>\n<div [class]=\"handleClasses()\" [attr.data-active]=\"checked()\">\n    @if (handleContentTemplate()) {\n        <ng-container\n            [ngTemplateOutlet]=\"handleContentTemplate() ?? null\"\n            [ngTemplateOutletContext]=\"{ $implicit: checked() }\"></ng-container>\n    }\n</div>\n", styles: [".mona-switch-label-enter{animation:mona-switch-label-fade-in .3s ease-out}.mona-switch-label-leave{animation:mona-switch-label-fade-out .3s ease-out}@keyframes mona-switch-label-fade-in{0%{opacity:0}to{opacity:1}}@keyframes mona-switch-label-fade-out{0%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.mona-switch-label-enter,.mona-switch-label-leave{animation-duration:1ms}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { handleContentTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SwitchHandleContentTemplateDirective), { ...{
                             read: TemplateRef
                         }, isSignal: true }] }], offLabelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SwitchOffLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], onLabelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SwitchOnLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], offLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "offLabel", required: false }] }], onLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "onLabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", 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 }] }] } });