@nanahoshi/mona-ui 0.1.0 → 0.1.1

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

@@ -105,8 +105,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }], propDecorators: { pane: [{ type: i0.Input, args: [{ isSignal: true, alias: "pane", required: true }] }], paneList: [{ type: i0.Input, args: [{ isSignal: true, alias: "paneList", required: true }] }] } });
 
-const splitterBaseVariants = cva(`
-        flex w-full h-full overflow-hidden min-w-0 min-h-0
+const splitterBaseVariants = cva(`
+        flex w-full h-full overflow-hidden min-w-0 min-h-0
     `, {
     variants: {
         orientation: {
@@ -118,13 +118,13 @@ const splitterBaseVariants = cva(`
         orientation: "horizontal"
     }
 });
-const splitterResizerVariants = cva(`
-        flex items-center justify-center
-        relative bg-accent
-        hover:bg-accent-hover
-        active:bg-primary/40
-        shrink-0 outline-none
-        focus-visible:bg-primary
+const splitterResizerVariants = cva(`
+        flex items-center justify-center
+        relative bg-accent
+        hover:bg-accent-hover
+        active:bg-primary/40
+        shrink-0 outline-none
+        focus-visible:bg-primary
     `, {
     variants: {
         orientation: {
@@ -141,9 +141,9 @@ const splitterResizerVariants = cva(`
         resizing: false
     }
 });
-const splitterResizerHandleVariants = cva(`
-        flex items-center justify-center
-        [&_button]:p-0
+const splitterResizerHandleVariants = cva(`
+        flex items-center justify-center
+        [&_button]:p-0
     `, {
     variants: {
         orientation: {
@@ -218,20 +218,20 @@ class SplitterPaneComponent {
         this.uid = v4();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: SplitterPaneComponent, isStandalone: true, selector: "mona-splitter-pane", inputs: { collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", 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 }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", size: "sizeChange" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `
-        <ng-template>
-            <ng-content></ng-content>
-        </ng-template>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: SplitterPaneComponent, isStandalone: true, selector: "mona-splitter-pane", inputs: { collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", 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 }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", size: "sizeChange" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `
+        <ng-template>
+            <ng-content></ng-content>
+        </ng-template>
     `, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterPaneComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "mona-splitter-pane",
-                    template: `
-        <ng-template>
-            <ng-content></ng-content>
-        </ng-template>
+                    template: `
+        <ng-template>
+            <ng-content></ng-content>
+        </ng-template>
     `
                 }]
         }], propDecorators: { collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
@@ -262,13 +262,13 @@ class SplitterResizerHandleComponent {
         event.stopPropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterResizerHandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SplitterResizerHandleComponent, isStandalone: true, selector: "mona-splitter-resizer-handle", inputs: { nextControlsVisible: { classPropertyName: "nextControlsVisible", publicName: "nextControlsVisible", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null }, previousControlsVisible: { classPropertyName: "previousControlsVisible", publicName: "previousControlsVisible", isSignal: true, isRequired: true, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { collapseNext: "collapseNext", collapsePrevious: "collapsePrevious" }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "@if (orientation() === \"horizontal\") {\r\n    @if (previousControlsVisible()) {\r\n        <button\r\n            monaButton\r\n            look=\"secondary\"\r\n            [rounded]=\"'none'\"\r\n            aria-label=\"Collapse previous pane\"\r\n            (click)=\"collapsePrevious.emit($event)\"\r\n            (pointerdown)=\"onPointerDown($event)\">\r\n            <svg lucideChevronLeft [size]=\"12\"></svg>\r\n        </button>\r\n    }\r\n    @if (resizable()) {\r\n        <div class=\"flex h-6 w-0.5 bg-primary/40\"></div>\r\n    }\r\n    @if (nextControlsVisible()) {\r\n        <button\r\n            monaButton\r\n            look=\"secondary\"\r\n            [rounded]=\"'none'\"\r\n            aria-label=\"Collapse next pane\"\r\n            (click)=\"collapseNext.emit($event)\"\r\n            (pointerdown)=\"onPointerDown($event)\">\r\n            <svg lucideChevronRight [size]=\"12\"></svg>\r\n        </button>\r\n    }\r\n} @else {\r\n    @if (previousControlsVisible()) {\r\n        <button\r\n            monaButton\r\n            look=\"secondary\"\r\n            [rounded]=\"'none'\"\r\n            aria-label=\"Collapse pane above\"\r\n            (click)=\"collapsePrevious.emit($event)\"\r\n            (pointerdown)=\"onPointerDown($event)\">\r\n            <svg lucideChevronUp [size]=\"12\"></svg>\r\n        </button>\r\n    }\r\n    @if (resizable()) {\r\n        <div class=\"flex h-0.5 w-6 bg-primary/40\"></div>\r\n    }\r\n    @if (nextControlsVisible()) {\r\n        <button\r\n            monaButton\r\n            look=\"secondary\"\r\n            [rounded]=\"'none'\"\r\n            aria-label=\"Collapse pane below\"\r\n            (click)=\"collapseNext.emit($event)\"\r\n            (pointerdown)=\"onPointerDown($event)\">\r\n            <svg lucideChevronDown [size]=\"12\"></svg>\r\n        </button>\r\n    }\r\n}\r\n", dependencies: [{ 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: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { 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: SplitterResizerHandleComponent, isStandalone: true, selector: "mona-splitter-resizer-handle", inputs: { nextControlsVisible: { classPropertyName: "nextControlsVisible", publicName: "nextControlsVisible", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null }, previousControlsVisible: { classPropertyName: "previousControlsVisible", publicName: "previousControlsVisible", isSignal: true, isRequired: true, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { collapseNext: "collapseNext", collapsePrevious: "collapsePrevious" }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "@if (orientation() === \"horizontal\") {\n    @if (previousControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            aria-label=\"Collapse previous pane\"\n            (click)=\"collapsePrevious.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronLeft [size]=\"12\"></svg>\n        </button>\n    }\n    @if (resizable()) {\n        <div class=\"flex h-6 w-0.5 bg-primary/40\"></div>\n    }\n    @if (nextControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            aria-label=\"Collapse next pane\"\n            (click)=\"collapseNext.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronRight [size]=\"12\"></svg>\n        </button>\n    }\n} @else {\n    @if (previousControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            aria-label=\"Collapse pane above\"\n            (click)=\"collapsePrevious.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronUp [size]=\"12\"></svg>\n        </button>\n    }\n    @if (resizable()) {\n        <div class=\"flex h-0.5 w-6 bg-primary/40\"></div>\n    }\n    @if (nextControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            aria-label=\"Collapse pane below\"\n            (click)=\"collapseNext.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronDown [size]=\"12\"></svg>\n        </button>\n    }\n}\n", dependencies: [{ 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: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { 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: SplitterResizerHandleComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-splitter-resizer-handle", imports: [ButtonDirective, LucideChevronLeft, LucideChevronRight, LucideChevronUp, LucideChevronDown], host: {
                         "[class]": "baseClass()"
-                    }, template: "@if (orientation() === \"horizontal\") {\r\n    @if (previousControlsVisible()) {\r\n        <button\r\n            monaButton\r\n            look=\"secondary\"\r\n            [rounded]=\"'none'\"\r\n            aria-label=\"Collapse previous pane\"\r\n            (click)=\"collapsePrevious.emit($event)\"\r\n            (pointerdown)=\"onPointerDown($event)\">\r\n            <svg lucideChevronLeft [size]=\"12\"></svg>\r\n        </button>\r\n    }\r\n    @if (resizable()) {\r\n        <div class=\"flex h-6 w-0.5 bg-primary/40\"></div>\r\n    }\r\n    @if (nextControlsVisible()) {\r\n        <button\r\n            monaButton\r\n            look=\"secondary\"\r\n            [rounded]=\"'none'\"\r\n            aria-label=\"Collapse next pane\"\r\n            (click)=\"collapseNext.emit($event)\"\r\n            (pointerdown)=\"onPointerDown($event)\">\r\n            <svg lucideChevronRight [size]=\"12\"></svg>\r\n        </button>\r\n    }\r\n} @else {\r\n    @if (previousControlsVisible()) {\r\n        <button\r\n            monaButton\r\n            look=\"secondary\"\r\n            [rounded]=\"'none'\"\r\n            aria-label=\"Collapse pane above\"\r\n            (click)=\"collapsePrevious.emit($event)\"\r\n            (pointerdown)=\"onPointerDown($event)\">\r\n            <svg lucideChevronUp [size]=\"12\"></svg>\r\n        </button>\r\n    }\r\n    @if (resizable()) {\r\n        <div class=\"flex h-0.5 w-6 bg-primary/40\"></div>\r\n    }\r\n    @if (nextControlsVisible()) {\r\n        <button\r\n            monaButton\r\n            look=\"secondary\"\r\n            [rounded]=\"'none'\"\r\n            aria-label=\"Collapse pane below\"\r\n            (click)=\"collapseNext.emit($event)\"\r\n            (pointerdown)=\"onPointerDown($event)\">\r\n            <svg lucideChevronDown [size]=\"12\"></svg>\r\n        </button>\r\n    }\r\n}\r\n" }]
+                    }, template: "@if (orientation() === \"horizontal\") {\n    @if (previousControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            aria-label=\"Collapse previous pane\"\n            (click)=\"collapsePrevious.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronLeft [size]=\"12\"></svg>\n        </button>\n    }\n    @if (resizable()) {\n        <div class=\"flex h-6 w-0.5 bg-primary/40\"></div>\n    }\n    @if (nextControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            aria-label=\"Collapse next pane\"\n            (click)=\"collapseNext.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronRight [size]=\"12\"></svg>\n        </button>\n    }\n} @else {\n    @if (previousControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            aria-label=\"Collapse pane above\"\n            (click)=\"collapsePrevious.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronUp [size]=\"12\"></svg>\n        </button>\n    }\n    @if (resizable()) {\n        <div class=\"flex h-0.5 w-6 bg-primary/40\"></div>\n    }\n    @if (nextControlsVisible()) {\n        <button\n            monaButton\n            look=\"secondary\"\n            [rounded]=\"'none'\"\n            aria-label=\"Collapse pane below\"\n            (click)=\"collapseNext.emit($event)\"\n            (pointerdown)=\"onPointerDown($event)\">\n            <svg lucideChevronDown [size]=\"12\"></svg>\n        </button>\n    }\n}\n" }]
         }], propDecorators: { collapseNext: [{ type: i0.Output, args: ["collapseNext"] }], collapsePrevious: [{ type: i0.Output, args: ["collapsePrevious"] }], nextControlsVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextControlsVisible", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: true }] }], previousControlsVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousControlsVisible", required: true }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: true }] }] } });
 
 class SplitterResizerComponent {
@@ -779,7 +779,7 @@ class SplitterResizerComponent {
         this.updatePaneSizes(`${previousPaneHeight}px`, `${nextPaneHeight}px`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterResizerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: SplitterResizerComponent, isStandalone: true, selector: "mona-splitter-resizer", inputs: { nextPane: { classPropertyName: "nextPane", publicName: "nextPane", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null }, previousPane: { classPropertyName: "previousPane", publicName: "previousPane", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "separator" }, listeners: { "dblclick": "toggleCollapse()" }, properties: { "class": "baseClass()", "style.cursor": "resizable() ? (orientation()==='horizontal' ? 'ew-resize' : 'ns-resize') : 'auto'", "attr.aria-orientation": "orientation()", "attr.aria-valuemax": "ariaValueMax()", "attr.aria-valuemin": "ariaValueMin()", "attr.aria-valuenow": "ariaValueNow()", "attr.tabindex": "isInert() ? -1 : 0" } }, ngImport: i0, template: "<mona-splitter-resizer-handle\r\n    (collapseNext)=\"collapseNext($event)\"\r\n    (collapsePrevious)=\"collapsePrevious($event)\"\r\n    [nextControlsVisible]=\"nextCollapseControlsVisible()\"\r\n    [orientation]=\"orientation()\"\r\n    [previousControlsVisible]=\"previousCollapseControlsVisible()\"\r\n    [resizable]=\"resizable()\">\r\n</mona-splitter-resizer-handle>\r\n", dependencies: [{ kind: "component", type: SplitterResizerHandleComponent, selector: "mona-splitter-resizer-handle", inputs: ["nextControlsVisible", "orientation", "previousControlsVisible", "resizable"], outputs: ["collapseNext", "collapsePrevious"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: SplitterResizerComponent, isStandalone: true, selector: "mona-splitter-resizer", inputs: { nextPane: { classPropertyName: "nextPane", publicName: "nextPane", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null }, previousPane: { classPropertyName: "previousPane", publicName: "previousPane", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "separator" }, listeners: { "dblclick": "toggleCollapse()" }, properties: { "class": "baseClass()", "style.cursor": "resizable() ? (orientation()==='horizontal' ? 'ew-resize' : 'ns-resize') : 'auto'", "attr.aria-orientation": "orientation()", "attr.aria-valuemax": "ariaValueMax()", "attr.aria-valuemin": "ariaValueMin()", "attr.aria-valuenow": "ariaValueNow()", "attr.tabindex": "isInert() ? -1 : 0" } }, ngImport: i0, template: "<mona-splitter-resizer-handle\n    (collapseNext)=\"collapseNext($event)\"\n    (collapsePrevious)=\"collapsePrevious($event)\"\n    [nextControlsVisible]=\"nextCollapseControlsVisible()\"\n    [orientation]=\"orientation()\"\n    [previousControlsVisible]=\"previousCollapseControlsVisible()\"\n    [resizable]=\"resizable()\">\n</mona-splitter-resizer-handle>\n", dependencies: [{ kind: "component", type: SplitterResizerHandleComponent, selector: "mona-splitter-resizer-handle", inputs: ["nextControlsVisible", "orientation", "previousControlsVisible", "resizable"], outputs: ["collapseNext", "collapsePrevious"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterResizerComponent, decorators: [{
             type: Component,
@@ -793,7 +793,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.aria-valuemin]": "ariaValueMin()",
                         "[attr.aria-valuenow]": "ariaValueNow()",
                         "[attr.tabindex]": "isInert() ? -1 : 0"
-                    }, template: "<mona-splitter-resizer-handle\r\n    (collapseNext)=\"collapseNext($event)\"\r\n    (collapsePrevious)=\"collapsePrevious($event)\"\r\n    [nextControlsVisible]=\"nextCollapseControlsVisible()\"\r\n    [orientation]=\"orientation()\"\r\n    [previousControlsVisible]=\"previousCollapseControlsVisible()\"\r\n    [resizable]=\"resizable()\">\r\n</mona-splitter-resizer-handle>\r\n" }]
+                    }, template: "<mona-splitter-resizer-handle\n    (collapseNext)=\"collapseNext($event)\"\n    (collapsePrevious)=\"collapsePrevious($event)\"\n    [nextControlsVisible]=\"nextCollapseControlsVisible()\"\n    [orientation]=\"orientation()\"\n    [previousControlsVisible]=\"previousCollapseControlsVisible()\"\n    [resizable]=\"resizable()\">\n</mona-splitter-resizer-handle>\n" }]
         }], ctorParameters: () => [], propDecorators: { nextPane: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPane", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: true }] }], previousPane: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousPane", required: true }] }] } });
 
 class SplitterComponent {

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

@@ -3,8 +3,8 @@ import { Directive, inject, ElementRef, computed, input, afterRenderEffect, Dest
 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 { fromEvent } from 'rxjs';
 import { cva } from 'class-variance-authority';
 
 /**
@@ -53,8 +53,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const stepperBaseVariants = cva(`
-        relative grid outline-none
+const stepperBaseVariants = cva(`
+        relative grid outline-none
     `, {
     variants: {
         orientation: {
@@ -66,19 +66,19 @@ const stepperBaseVariants = cva(`
         orientation: "horizontal"
     }
 });
-const stepperStepListVariants = cva(`
-        absolute flex list-none col-span-full
-        font-medium z-1
+const stepperStepListVariants = cva(`
+        absolute flex list-none col-span-full
+        font-medium z-1
     `, {
     variants: {
         orientation: {
-            horizontal: `
-                    flex-row w-full
-                    -translate-y-3
+            horizontal: `
+                    flex-row w-full
+                    -translate-y-3
                 `,
-            vertical: `
-                    flex-col h-full w-max
-                    -translate-x-3
+            vertical: `
+                    flex-col h-full w-max
+                    -translate-x-3
                 `
         }
     },
@@ -86,10 +86,10 @@ const stepperStepListVariants = cva(`
         orientation: "horizontal"
     }
 });
-const stepperStepListItemVariants = cva(`
-        flex items-center
-        grow-1 shrink-0 basis-auto
-        z-1
+const stepperStepListItemVariants = cva(`
+        flex items-center
+        grow-1 shrink-0 basis-auto
+        z-1
     `, {
     variants: {
         orientation: {
@@ -101,12 +101,12 @@ const stepperStepListItemVariants = cva(`
         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 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
     `, {
     variants: {
         active: {
@@ -126,9 +126,9 @@ const stepperStepIndicatorVariants = cva(`
         }
     }
 });
-const stepperTrackVariants = cva(`
-        relative grid
-        bg-background border border-border
+const stepperTrackVariants = cva(`
+        relative grid
+        bg-background text-foreground border border-border
     `, {
     variants: {
         orientation: {
@@ -140,8 +140,8 @@ const stepperTrackVariants = cva(`
         orientation: "horizontal"
     }
 });
-const stepperTrackLineVariants = cva(`
-        absolute bg-primary
+const stepperTrackLineVariants = cva(`
+        absolute bg-primary
     `, {
     variants: {
         orientation: {
@@ -509,7 +509,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 +518,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

@@ -40,26 +40,26 @@ 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 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
     `, {
     variants: {
         rounded: {
@@ -76,12 +76,12 @@ const switchVariants = cva(`
         }
     }
 });
-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 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 text-foreground
     `, {
     variants: {
         rounded: {
@@ -92,26 +92,26 @@ 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: `
+                    w-6 h-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: `
+                    w-5 h-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: `
+                    w-4 h-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 switchLabelVariants = cva(`
+        h-full flex flex-1 items-center justify-center text-xs
     `);
 
 const switchThemeVariants = (theme) => {
@@ -274,7 +274,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 +291,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 }] }] } });