@nanahoshi/mona-ui 0.1.0 → 0.1.1

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

@@ -24,11 +24,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const chipVariants = cva(`
-        inline-flex items-center justify-between gap-1.5
-        text-xs font-medium cursor-pointer shrink-0
-        outline-none shadow-xs
-        transition-colors duration-200 ease-in-out
+const chipVariants = cva(`
+        inline-flex items-center justify-between gap-1.5
+        text-xs font-medium cursor-pointer shrink-0
+        outline-none shadow-xs
+        transition-colors duration-200 ease-in-out
     `, {
     variants: {
         disabled: {
@@ -36,59 +36,59 @@ const chipVariants = cva(`
             false: ""
         },
         look: {
-            default: `
-                    bg-background text-foreground
-                    border border-border
-                    hover:bg-hover hover:text-accent-foreground
-                    active:bg-active active:text-accent-foreground
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+            default: `
+                    bg-background text-foreground
+                    border border-border
+                    hover:bg-hover hover:text-accent-foreground
+                    active:bg-active active:text-accent-foreground
+                    focus-visible:ring-2 focus-visible:ring-primary/40
                 `,
-            primary: `
-                    bg-primary text-primary-foreground
-                    hover:bg-primary-hover hover:text-primary-foreground
-                    active:bg-primary-active active:text-primary-foreground
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+            primary: `
+                    bg-primary text-primary-foreground
+                    hover:bg-primary-hover hover:text-primary-foreground
+                    active:bg-primary-active active:text-primary-foreground
+                    focus-visible:ring-2 focus-visible:ring-primary/40
                 `,
-            success: `
-                    bg-success text-success-foreground
-                    hover:bg-success-hover hover:text-success-foreground
-                    active:bg-success-active active:text-success-foreground
-                    focus-visible:ring-2 focus-visible:ring-success/40
+            success: `
+                    bg-success text-success-foreground
+                    hover:bg-success-hover hover:text-success-foreground
+                    active:bg-success-active active:text-success-foreground
+                    focus-visible:ring-2 focus-visible:ring-success/40
                 `,
-            error: `
-                    bg-error text-error-foreground
-                    hover:bg-error-hover hover:text-error-foreground
-                    active:bg-error-active active:text-error-foreground
-                    focus-visible:ring-2 focus-visible:ring-error/40
+            error: `
+                    bg-error text-error-foreground
+                    hover:bg-error-hover hover:text-error-foreground
+                    active:bg-error-active active:text-error-foreground
+                    focus-visible:ring-2 focus-visible:ring-error/40
                 `,
-            warning: `
-                    bg-warning text-warning-foreground
-                    hover:bg-warning-hover hover:text-warning-foreground
-                    active:bg-warning-active active:text-warning-foreground
-                    focus-visible:ring-2 focus-visible:ring-warning/40
+            warning: `
+                    bg-warning text-warning-foreground
+                    hover:bg-warning-hover hover:text-warning-foreground
+                    active:bg-warning-active active:text-warning-foreground
+                    focus-visible:ring-2 focus-visible:ring-warning/40
                 `,
-            info: `
-                    bg-info text-info-foreground
-                    hover:bg-info-hover hover:text-info-foreground
-                    active:bg-info-active active:text-info-foreground
-                    focus-visible:ring-2 focus-visible:ring-info/40
+            info: `
+                    bg-info text-info-foreground
+                    hover:bg-info-hover hover:text-info-foreground
+                    active:bg-info-active active:text-info-foreground
+                    focus-visible:ring-2 focus-visible:ring-info/40
                 `,
-            outline: `
-                    border border-border
-                    hover:bg-accent hover:text-accent-foreground
-                    active:bg-accent-dark active:text-accent-foreground
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+            outline: `
+                    border border-border
+                    hover:bg-accent hover:text-accent-foreground
+                    active:bg-accent-dark active:text-accent-foreground
+                    focus-visible:ring-2 focus-visible:ring-primary/40
                 `,
-            secondary: `
-                    bg-secondary text-secondary-foreground
-                    hover:bg-secondary-hover hover:text-secondary-foreground
-                    active:bg-secondary-active active:text-secondary-foreground
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+            secondary: `
+                    bg-secondary text-secondary-foreground
+                    hover:bg-secondary-hover hover:text-secondary-foreground
+                    active:bg-secondary-active active:text-secondary-foreground
+                    focus-visible:ring-2 focus-visible:ring-primary/40
                 `,
-            ghost: `
-                    hover:bg-secondary-hover hover:text-secondary-foreground
-                    active:bg-secondary-active active:text-secondary-foreground
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+            ghost: `
+                    hover:bg-secondary-hover hover:text-secondary-foreground
+                    active:bg-secondary-active active:text-secondary-foreground
+                    focus-visible:ring-2 focus-visible:ring-primary/40
                 `
         },
         rounded: {
@@ -99,20 +99,20 @@ const chipVariants = cva(`
             small: "rounded-sm"
         },
         size: {
-            small: `
-                    ps-1 pe-1 py-0.5
-                    [&_button[data-chip-remove='true']]:w-3
-                    [&_button[data-chip-remove='true']]:h-3
+            small: `
+                    ps-1 pe-1 py-0.5
+                    [&_button[data-chip-remove='true']]:w-3
+                    [&_button[data-chip-remove='true']]:h-3
                 `,
-            medium: `
-                    ps-1.5 pe-1.5 py-1
-                    [&_button[data-chip-remove='true']]:w-4
-                    [&_button[data-chip-remove='true']]:h-4
+            medium: `
+                    ps-1.5 pe-1.5 py-1
+                    [&_button[data-chip-remove='true']]:w-4
+                    [&_button[data-chip-remove='true']]:h-4
                 `,
-            large: `
-                    ps-2 pe-2 py-1.5
-                    [&_button[data-chip-remove='true']]:w-5
-                    [&_button[data-chip-remove='true']]:h-5
+            large: `
+                    ps-2 pe-2 py-1.5
+                    [&_button[data-chip-remove='true']]:w-5
+                    [&_button[data-chip-remove='true']]:h-5
                 `
         },
         selected: {
@@ -124,82 +124,82 @@ const chipVariants = cva(`
         {
             look: "default",
             selected: true,
-            class: `
-                    bg-selected text-foreground
-                    hover:bg-selected/95 hover:text-foreground
-                    active:bg-selected/100 active:text-foreground
+            class: `
+                    bg-selected text-foreground
+                    hover:bg-selected/95 hover:text-foreground
+                    active:bg-selected/100 active:text-foreground
                 `
         },
         {
             look: "primary",
             selected: true,
-            class: `
-                    bg-primary-selected text-primary-foreground
-                    hover:bg-primary-selected/95 hover:text-primary-foreground
-                    active:bg-primary-selected/100 active:text-primary-foreground
+            class: `
+                    bg-primary-selected text-primary-foreground
+                    hover:bg-primary-selected/95 hover:text-primary-foreground
+                    active:bg-primary-selected/100 active:text-primary-foreground
                 `
         },
         {
             look: "secondary",
             selected: true,
-            class: `
-                    bg-secondary-selected text-secondary-foreground
-                    hover:bg-secondary-selected/95 hover:text-secondary-foreground
-                    active:bg-secondary-selected/100 active:text-secondary-foreground
+            class: `
+                    bg-secondary-selected text-secondary-foreground
+                    hover:bg-secondary-selected/95 hover:text-secondary-foreground
+                    active:bg-secondary-selected/100 active:text-secondary-foreground
                 `
         },
         {
             look: "success",
             selected: true,
-            class: `
-                    bg-success-selected text-success-foreground
-                    hover:bg-success-selected/95 hover:text-success-foreground
-                    active:bg-success-selected/100 active:text-success-foreground
+            class: `
+                    bg-success-selected text-success-foreground
+                    hover:bg-success-selected/95 hover:text-success-foreground
+                    active:bg-success-selected/100 active:text-success-foreground
                 `
         },
         {
             look: "error",
             selected: true,
-            class: `
-                    bg-error-selected text-error-foreground
-                    hover:bg-error-selected/95 hover:text-error-foreground
-                    active:bg-error-selected/100 active:text-error-foreground
+            class: `
+                    bg-error-selected text-error-foreground
+                    hover:bg-error-selected/95 hover:text-error-foreground
+                    active:bg-error-selected/100 active:text-error-foreground
                 `
         },
         {
             look: "warning",
             selected: true,
-            class: `
-                    bg-warning-selected text-warning-foreground
-                    hover:bg-warning-selected/95 hover:text-warning-foreground
-                    active:bg-warning-selected/100 active:text-warning-foreground
+            class: `
+                    bg-warning-selected text-warning-foreground
+                    hover:bg-warning-selected/95 hover:text-warning-foreground
+                    active:bg-warning-selected/100 active:text-warning-foreground
                 `
         },
         {
             look: "info",
             selected: true,
-            class: `
-                    bg-info-selected text-info-foreground
-                    hover:bg-info-selected/95 hover:text-info-foreground
-                    active:bg-info-selected/100 active:text-info-foreground
+            class: `
+                    bg-info-selected text-info-foreground
+                    hover:bg-info-selected/95 hover:text-info-foreground
+                    active:bg-info-selected/100 active:text-info-foreground
                 `
         },
         {
             look: "outline",
             selected: true,
-            class: `
-                    bg-primary-selected text-primary-foreground
-                    hover:bg-primary-selected/95 hover:text-primary-foreground
-                    active:bg-primary-selected/100 active:text-primary-foreground
+            class: `
+                    bg-primary-selected text-primary-foreground
+                    hover:bg-primary-selected/95 hover:text-primary-foreground
+                    active:bg-primary-selected/100 active:text-primary-foreground
                 `
         },
         {
             look: "ghost",
             selected: true,
-            class: `
-                    bg-secondary-selected text-secondary-foreground
-                    hover:bg-secondary-selected/95 hover:text-secondary-foreground
-                    active:bg-secondary-selected/100 active:text-secondary-foreground
+            class: `
+                    bg-secondary-selected text-secondary-foreground
+                    hover:bg-secondary-selected/95 hover:text-secondary-foreground
+                    active:bg-secondary-selected/100 active:text-secondary-foreground
                 `
         }
     ],

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

@@ -168,7 +168,7 @@ class CircularProgressBarComponent {
     }
     #themeService;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CircularProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CircularProgressBarComponent, isStandalone: true, selector: "mona-circular-progress-bar", inputs: { animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaValueText: { classPropertyName: "ariaValueText", publicName: "aria-valuetext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "class": "baseClasses()", "attr.aria-busy": "indeterminate() || null", "attr.aria-label": "ariaLabel() || null", "attr.aria-valuemin": "indeterminate() ? null : min()", "attr.aria-valuemax": "indeterminate() ? null : max()", "attr.aria-valuenow": "indeterminate() ? null : value()", "attr.aria-valuetext": "ariaValueText() || null", "attr.aria-disabled": "disabled() || null", "attr.data-disabled": "disabled() || null", "style.width": "pixelSize()", "style.height": "pixelSize()" } }, queries: [{ propertyName: "labelTemplate", first: true, predicate: CircularProgressBarLabelTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<svg>\r\n    <circle\r\n        [attr.cx]=\"center().x\"\r\n        [attr.cy]=\"center().y\"\r\n        [attr.r]=\"radius()\"\r\n        [attr.data-stroke-trail]=\"true\"\r\n        [attr.stroke-dasharray]=\"circumference()\"\r\n        [attr.stroke-width]=\"thickness()\"\r\n        fill=\"transparent\" />\r\n    <circle\r\n        [attr.cx]=\"center().x\"\r\n        [attr.cy]=\"center().y\"\r\n        [attr.r]=\"radius()\"\r\n        [attr.stroke]=\"strokeColor()\"\r\n        [attr.stroke-dasharray]=\"circumference()\"\r\n        [attr.stroke-dashoffset]=\"strokeDashOffset()\"\r\n        [attr.stroke-width]=\"thickness()\"\r\n        fill=\"transparent\"\r\n        [class.indeterminate]=\"indeterminate()\" />\r\n</svg>\r\n@if (!indeterminate()) {\r\n    <div class=\"mona-circular-progress-bar-label\">\r\n        @if (labelTemplate()) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"labelTemplate()?.templateRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: value(), min: min(), max: max(), percent: progress() }\">\r\n            </ng-container>\r\n        } @else {\r\n            {{ progress() }}\r\n        }\r\n    </div>\r\n}\r\n", styles: [".indeterminate{animation:rotate 2s linear infinite}@keyframes rotate{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CircularProgressBarComponent, isStandalone: true, selector: "mona-circular-progress-bar", inputs: { animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaValueText: { classPropertyName: "ariaValueText", publicName: "aria-valuetext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "class": "baseClasses()", "attr.aria-busy": "indeterminate() || null", "attr.aria-label": "ariaLabel() || null", "attr.aria-valuemin": "indeterminate() ? null : min()", "attr.aria-valuemax": "indeterminate() ? null : max()", "attr.aria-valuenow": "indeterminate() ? null : value()", "attr.aria-valuetext": "ariaValueText() || null", "attr.aria-disabled": "disabled() || null", "attr.data-disabled": "disabled() || null", "style.width": "pixelSize()", "style.height": "pixelSize()" } }, queries: [{ propertyName: "labelTemplate", first: true, predicate: CircularProgressBarLabelTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<svg>\n    <circle\n        [attr.cx]=\"center().x\"\n        [attr.cy]=\"center().y\"\n        [attr.r]=\"radius()\"\n        [attr.data-stroke-trail]=\"true\"\n        [attr.stroke-dasharray]=\"circumference()\"\n        [attr.stroke-width]=\"thickness()\"\n        fill=\"transparent\" />\n    <circle\n        [attr.cx]=\"center().x\"\n        [attr.cy]=\"center().y\"\n        [attr.r]=\"radius()\"\n        [attr.stroke]=\"strokeColor()\"\n        [attr.stroke-dasharray]=\"circumference()\"\n        [attr.stroke-dashoffset]=\"strokeDashOffset()\"\n        [attr.stroke-width]=\"thickness()\"\n        fill=\"transparent\"\n        [class.indeterminate]=\"indeterminate()\" />\n</svg>\n@if (!indeterminate()) {\n    <div class=\"mona-circular-progress-bar-label\">\n        @if (labelTemplate()) {\n            <ng-container\n                [ngTemplateOutlet]=\"labelTemplate()?.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: value(), min: min(), max: max(), percent: progress() }\">\n            </ng-container>\n        } @else {\n            {{ progress() }}\n        }\n    </div>\n}\n", styles: [".indeterminate{animation:rotate 2s linear infinite}@keyframes rotate{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CircularProgressBarComponent, decorators: [{
             type: Component,
@@ -185,7 +185,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         role: "progressbar",
                         "[style.width]": "pixelSize()",
                         "[style.height]": "pixelSize()"
-                    }, template: "<svg>\r\n    <circle\r\n        [attr.cx]=\"center().x\"\r\n        [attr.cy]=\"center().y\"\r\n        [attr.r]=\"radius()\"\r\n        [attr.data-stroke-trail]=\"true\"\r\n        [attr.stroke-dasharray]=\"circumference()\"\r\n        [attr.stroke-width]=\"thickness()\"\r\n        fill=\"transparent\" />\r\n    <circle\r\n        [attr.cx]=\"center().x\"\r\n        [attr.cy]=\"center().y\"\r\n        [attr.r]=\"radius()\"\r\n        [attr.stroke]=\"strokeColor()\"\r\n        [attr.stroke-dasharray]=\"circumference()\"\r\n        [attr.stroke-dashoffset]=\"strokeDashOffset()\"\r\n        [attr.stroke-width]=\"thickness()\"\r\n        fill=\"transparent\"\r\n        [class.indeterminate]=\"indeterminate()\" />\r\n</svg>\r\n@if (!indeterminate()) {\r\n    <div class=\"mona-circular-progress-bar-label\">\r\n        @if (labelTemplate()) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"labelTemplate()?.templateRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: value(), min: min(), max: max(), percent: progress() }\">\r\n            </ng-container>\r\n        } @else {\r\n            {{ progress() }}\r\n        }\r\n    </div>\r\n}\r\n", styles: [".indeterminate{animation:rotate 2s linear infinite}@keyframes rotate{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}\n"] }]
+                    }, template: "<svg>\n    <circle\n        [attr.cx]=\"center().x\"\n        [attr.cy]=\"center().y\"\n        [attr.r]=\"radius()\"\n        [attr.data-stroke-trail]=\"true\"\n        [attr.stroke-dasharray]=\"circumference()\"\n        [attr.stroke-width]=\"thickness()\"\n        fill=\"transparent\" />\n    <circle\n        [attr.cx]=\"center().x\"\n        [attr.cy]=\"center().y\"\n        [attr.r]=\"radius()\"\n        [attr.stroke]=\"strokeColor()\"\n        [attr.stroke-dasharray]=\"circumference()\"\n        [attr.stroke-dashoffset]=\"strokeDashOffset()\"\n        [attr.stroke-width]=\"thickness()\"\n        fill=\"transparent\"\n        [class.indeterminate]=\"indeterminate()\" />\n</svg>\n@if (!indeterminate()) {\n    <div class=\"mona-circular-progress-bar-label\">\n        @if (labelTemplate()) {\n            <ng-container\n                [ngTemplateOutlet]=\"labelTemplate()?.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: value(), min: min(), max: max(), percent: progress() }\">\n            </ng-container>\n        } @else {\n            {{ progress() }}\n        }\n    </div>\n}\n", styles: [".indeterminate{animation:rotate 2s linear infinite}@keyframes rotate{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { labelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CircularProgressBarLabelTemplateDirective), { isSignal: true }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaValueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-valuetext", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
 
 /*

package/fesm2022/nanahoshi-mona-ui-color-gradient.mjs

@@ -14,24 +14,24 @@ import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { Subject, fromEvent, switchMap, takeUntil, distinctUntilChanged } from 'rxjs';
 import { cva } from 'class-variance-authority';
 
-const colorGradientBaseVariants = cva(`
-        flex flex-col min-w-64
-        p-2 gap-2
-        select-none
-
-        data-[disabled='true']:cursor-not-allowed
-        data-[disabled='true']:opacity-50
-        data-[disabled='true']:pointer-events-none
-
-        data-[invalid='true']:border
-        data-[invalid='true']:border-error
-        data-[invalid='true']:ring-1
-        data-[invalid='true']:ring-error
+const colorGradientBaseVariants = cva(`
+        flex flex-col min-w-64
+        p-2 gap-2
+        select-none
+
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:opacity-50
+        data-[disabled='true']:pointer-events-none
+
+        data-[invalid='true']:border
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-1
+        data-[invalid='true']:ring-error
     `);
-const colorGradientHsvRectangleVariants = cva(`
-        relative w-full h-40
-        bg-[linear-gradient(to_bottom,rgba(0,0,0,0),black),linear-gradient(to_right,white,rgba(255,255,255,0))]
-        border border-border
+const colorGradientHsvRectangleVariants = cva(`
+        relative w-full h-40
+        bg-[linear-gradient(to_bottom,rgba(0,0,0,0),black),linear-gradient(to_right,white,rgba(255,255,255,0))]
+        border border-border
     `, {
     variants: {
         rounded: {
@@ -43,17 +43,17 @@ const colorGradientHsvRectangleVariants = cva(`
         }
     }
 });
-const colorGradientHsvRectangleHandleVariants = cva(`
-        absolute
-        w-3 h-3
-        cursor-pointer
-        border border-foreground
-        outline outline-background
-        shadow-md
-
-        focus-visible:ring-2
-        focus-visible:ring-primary/40
-        focus-visible:ring-offset-2
+const colorGradientHsvRectangleHandleVariants = cva(`
+        absolute
+        w-3 h-3
+        cursor-pointer
+        border border-foreground
+        outline outline-background
+        shadow-md
+
+        focus-visible:ring-2
+        focus-visible:ring-primary/40
+        focus-visible:ring-offset-2
     `, {
     variants: {
         rounded: {
@@ -65,9 +65,9 @@ const colorGradientHsvRectangleHandleVariants = cva(`
         }
     }
 });
-const colorGradientPreviewVariants = cva(`
-        w-10 h-10 flex
-        border border-border
+const colorGradientPreviewVariants = cva(`
+        w-10 h-10 flex
+        border border-border
     `, {
     variants: {
         rounded: {
@@ -79,11 +79,11 @@ const colorGradientPreviewVariants = cva(`
         }
     }
 });
-const colorGradientSliderHandleVariants = cva(`
-        border-3 border-white/90
-        outline outline-solid outline-black/90
-        bg-transparent
-        w-3 h-3
+const colorGradientSliderHandleVariants = cva(`
+        border-3 border-white/90
+        outline outline-solid outline-black/90
+        bg-transparent
+        w-3 h-3
     `);
 
 const colorGradientBaseThemeVariants = (theme) => {
@@ -817,7 +817,7 @@ class ColorGradientComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorGradientComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ColorGradientComponent, isStandalone: true, selector: "mona-color-gradient", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", 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 }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null }, showHexInput: { classPropertyName: "showHexInput", publicName: "showHexInput", isSignal: true, isRequired: false, transformFunction: null }, showColorInputs: { classPropertyName: "showColorInputs", publicName: "showColorInputs", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", cancel: "cancel", touch: "touch", value: "valueChange" }, host: { properties: { "class": "baseClasses()", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.aria-invalid": "invalidState() ? 'true' : null" } }, viewQueries: [{ propertyName: "hsvHandle", first: true, predicate: ["hsvPointer"], descendants: true, isSignal: true }, { propertyName: "hsvRectangle", first: true, predicate: ["hsvRectangle"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"hsvRectangleClasses()\" [style.background-color]=\"hsvRectangleBackground()\" #hsvRectangle>\r\n    <div\r\n        [class]=\"hsvRectangleHandleClasses()\"\r\n        [style.left.px]=\"hsvHandleLeft()\"\r\n        [style.top.px]=\"hsvHandleTop()\"\r\n        [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n        [attr.role]=\"'slider'\"\r\n        [attr.aria-label]=\"'Color saturation and value'\"\r\n        [attr.aria-valuemin]=\"0\"\r\n        [attr.aria-valuemax]=\"100\"\r\n        [attr.aria-valuenow]=\"hsv().s\"\r\n        [attr.aria-valuetext]=\"'Saturation ' + hsv().s + '%, Value ' + hsv().v + '%'\"\r\n        [attr.aria-disabled]=\"disabled() || null\"\r\n        (keydown)=\"onHsvHandleKeyDown($event)\"\r\n        (blur)=\"onHsvHandleBlur()\"\r\n        #hsvPointer></div>\r\n</div>\r\n<div class=\"flex items-center gap-2\">\r\n    <div class=\"flex flex-1 flex-col gap-1 mr-2\">\r\n        <mona-slider\r\n            [minValue]=\"0\"\r\n            [maxValue]=\"360\"\r\n            [trackBackground]=\"'linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)'\"\r\n            [selectionBackground]=\"'transparent'\"\r\n            [handleClasses]=\"sliderHandleClasses()\"\r\n            [trackSize]=\"sliderHeight\"\r\n            [rounded]=\"rounded()\"\r\n            [value]=\"hsv().h ?? 0\"\r\n            (valueChange)=\"hueValue$.next($event)\"\r\n            (touch)=\"onSliderBlur()\"></mona-slider>\r\n        @if (opacity()) {\r\n            <mona-slider\r\n                [minValue]=\"0\"\r\n                [maxValue]=\"255\"\r\n                [trackBackground]=\"alphaSliderBackground()\"\r\n                [selectionBackground]=\"'transparent'\"\r\n                [handleClasses]=\"sliderHandleClasses()\"\r\n                [trackSize]=\"sliderHeight\"\r\n                [rounded]=\"rounded()\"\r\n                [value]=\"alpha()\"\r\n                (valueChange)=\"onAlphaChange($event)\"\r\n                (touch)=\"onSliderBlur()\"></mona-slider>\r\n        }\r\n    </div>\r\n    @for (preview of colorPreviews(); track preview.type) {\r\n        <div\r\n            [class]=\"colorPreviewClasses()\"\r\n            [class.cursor-pointer]=\"$index === 1\"\r\n            [style.background-color]=\"preview.color\"\r\n            [attr.title]=\"$index === 1 ? preview.title : null\"\r\n            [attr.aria-label]=\"$index === 1 ? preview.title : null\"\r\n            [attr.aria-hidden]=\"$index === 0 ? 'true' : null\"\r\n            [attr.role]=\"$index === 1 ? 'button' : null\"\r\n            [attr.tabindex]=\"$index === 1 ? 0 : null\"\r\n            (click)=\"preview.onClick?.()\"\r\n            (keydown)=\"onPreviousColorKeyDown($event, preview.onClick)\"></div>\r\n    }\r\n    <button monaButton look=\"ghost\" size=\"small\" aria-label=\"Clear color\" (click)=\"onClearClick()\">\r\n        <i class=\"ri-blur-off-line\"></i>\r\n    </button>\r\n</div>\r\n<div class=\"flex flex-col gap-2\">\r\n    @if (showColorInputs()) {\r\n        <div class=\"flex gap-2\">\r\n            <div class=\"flex gap-1\">\r\n                @for (input of colorInputs(); track input.key) {\r\n                    <mona-numeric-text-box\r\n                        [value]=\"input.value\"\r\n                        [minValue]=\"input.min\"\r\n                        [maxValue]=\"input.max\"\r\n                        [decimals]=\"0\"\r\n                        [spinners]=\"false\"\r\n                        [nullable]=\"false\"\r\n                        [rounded]=\"rounded()\"\r\n                        [size]=\"'small'\"\r\n                        class=\"w-18\"\r\n                        (valueChange)=\"input.change($event)\"\r\n                        (inputBlur)=\"onNumericInputBlur()\">\r\n                        <ng-template monaNumericTextBoxPrefixTemplate>\r\n                            <ng-container\r\n                                [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\r\n                                [ngTemplateOutletContext]=\"{ $implicit: input.label }\"></ng-container>\r\n                        </ng-template>\r\n                    </mona-numeric-text-box>\r\n                }\r\n            </div>\r\n            <div class=\"flex flex-1 items-center justify-end\">\r\n                <button\r\n                    monaButton\r\n                    look=\"ghost\"\r\n                    [rounded]=\"rounded()\"\r\n                    size=\"small\"\r\n                    aria-label=\"Switch color mode\"\r\n                    (click)=\"onSwitchColorModeClick()\">\r\n                    <i class=\"ri-expand-up-down-line\"></i>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    }\r\n    @if (showHexInput()) {\r\n        <mona-text-box\r\n            [rounded]=\"rounded()\"\r\n            [value]=\"hex()\"\r\n            (valueChange)=\"onHexChange($event)\"\r\n            (inputBlur)=\"onHexInputBlur()\"\r\n            (inputFocus)=\"onHexInputFocus()\"\r\n            class=\"w-full\">\r\n            <ng-template monaTextBoxPrefixTemplate>\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: 'HEX', classes: 'w-auto px-2' }\"></ng-container>\r\n            </ng-template>\r\n            <ng-template monaTextBoxSuffixTemplate>\r\n                <mona-dropdown-button look=\"ghost\" aria-label=\"Copy color\" class=\"h-full\">\r\n                    <svg lucideCopy [size]=\"12\"></svg>\r\n                    <mona-dropdown-button-item\r\n                        label=\"Copy as HEX\"\r\n                        (menuClick)=\"onCopyColorSelect('hex')\"></mona-dropdown-button-item>\r\n                    <mona-dropdown-button-item\r\n                        label=\"Copy as RGB\"\r\n                        (menuClick)=\"onCopyColorSelect('rgb')\"></mona-dropdown-button-item>\r\n                </mona-dropdown-button>\r\n            </ng-template>\r\n        </mona-text-box>\r\n    }\r\n    @if (showButtons()) {\r\n        <div class=\"flex items-center justify-end gap-2\">\r\n            <button monaButton [rounded]=\"rounded()\" look=\"primary\" (click)=\"onApply()\">Apply</button>\r\n            <button monaButton [rounded]=\"rounded()\" (click)=\"onCancel()\">Cancel</button>\r\n        </div>\r\n    }\r\n</div>\r\n\r\n<ng-template #numericInputPrefixTemplate let-text let-classes=\"classes\">\r\n    <span\r\n        [class]=\"classes\"\r\n        class=\"inline-flex items-center justify-center select-none w-7.5 bg-secondary h-full text-xs font-semibold border-r border-r-input-border\"\r\n        >{{ text }}</span\r\n    >\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "maxValue", "minValue", "nullable", "readonly", "required", "invalid", "rounded", "size", "spinners", "step", "tabindex", "touched", "class", "value"], outputs: ["inputBlur", "inputFocus", "inputFocusOut", "touch", "valueChange"] }, { kind: "directive", type: NumericTextBoxPrefixTemplateDirective, selector: "ng-template[monaNumericTextBoxPrefixTemplate]" }, { 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: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { kind: "component", type: SliderComponent, selector: "mona-slider", inputs: ["aria-label", "aria-labelledby", "value"], outputs: ["valueChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownButtonComponent, selector: "mona-dropdown-button", inputs: ["aria-label", "aria-labelledby", "iconOnly", "disabled", "loading", "look", "rounded", "size", "text", "class"], outputs: ["menuItemClick"] }, { kind: "component", type: DropdownButtonItemComponent, selector: "mona-dropdown-button-item" }, { kind: "component", type: LucideCopy, selector: "svg[lucideCopy]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ColorGradientComponent, isStandalone: true, selector: "mona-color-gradient", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", 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 }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null }, showHexInput: { classPropertyName: "showHexInput", publicName: "showHexInput", isSignal: true, isRequired: false, transformFunction: null }, showColorInputs: { classPropertyName: "showColorInputs", publicName: "showColorInputs", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", cancel: "cancel", touch: "touch", value: "valueChange" }, host: { properties: { "class": "baseClasses()", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.aria-invalid": "invalidState() ? 'true' : null" } }, viewQueries: [{ propertyName: "hsvHandle", first: true, predicate: ["hsvPointer"], descendants: true, isSignal: true }, { propertyName: "hsvRectangle", first: true, predicate: ["hsvRectangle"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"hsvRectangleClasses()\" [style.background-color]=\"hsvRectangleBackground()\" #hsvRectangle>\n    <div\n        [class]=\"hsvRectangleHandleClasses()\"\n        [style.left.px]=\"hsvHandleLeft()\"\n        [style.top.px]=\"hsvHandleTop()\"\n        [attr.tabindex]=\"disabled() ? -1 : 0\"\n        [attr.role]=\"'slider'\"\n        [attr.aria-label]=\"'Color saturation and value'\"\n        [attr.aria-valuemin]=\"0\"\n        [attr.aria-valuemax]=\"100\"\n        [attr.aria-valuenow]=\"hsv().s\"\n        [attr.aria-valuetext]=\"'Saturation ' + hsv().s + '%, Value ' + hsv().v + '%'\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        (keydown)=\"onHsvHandleKeyDown($event)\"\n        (blur)=\"onHsvHandleBlur()\"\n        #hsvPointer></div>\n</div>\n<div class=\"flex items-center gap-2\">\n    <div class=\"flex flex-1 flex-col gap-1 mr-2\">\n        <mona-slider\n            [minValue]=\"0\"\n            [maxValue]=\"360\"\n            [trackBackground]=\"'linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)'\"\n            [selectionBackground]=\"'transparent'\"\n            [handleClasses]=\"sliderHandleClasses()\"\n            [trackSize]=\"sliderHeight\"\n            [rounded]=\"rounded()\"\n            [value]=\"hsv().h ?? 0\"\n            (valueChange)=\"hueValue$.next($event)\"\n            (touch)=\"onSliderBlur()\"></mona-slider>\n        @if (opacity()) {\n            <mona-slider\n                [minValue]=\"0\"\n                [maxValue]=\"255\"\n                [trackBackground]=\"alphaSliderBackground()\"\n                [selectionBackground]=\"'transparent'\"\n                [handleClasses]=\"sliderHandleClasses()\"\n                [trackSize]=\"sliderHeight\"\n                [rounded]=\"rounded()\"\n                [value]=\"alpha()\"\n                (valueChange)=\"onAlphaChange($event)\"\n                (touch)=\"onSliderBlur()\"></mona-slider>\n        }\n    </div>\n    @for (preview of colorPreviews(); track preview.type) {\n        <div\n            [class]=\"colorPreviewClasses()\"\n            [class.cursor-pointer]=\"$index === 1\"\n            [style.background-color]=\"preview.color\"\n            [attr.title]=\"$index === 1 ? preview.title : null\"\n            [attr.aria-label]=\"$index === 1 ? preview.title : null\"\n            [attr.aria-hidden]=\"$index === 0 ? 'true' : null\"\n            [attr.role]=\"$index === 1 ? 'button' : null\"\n            [attr.tabindex]=\"$index === 1 ? 0 : null\"\n            (click)=\"preview.onClick?.()\"\n            (keydown)=\"onPreviousColorKeyDown($event, preview.onClick)\"></div>\n    }\n    <button monaButton look=\"ghost\" size=\"small\" aria-label=\"Clear color\" (click)=\"onClearClick()\">\n        <i class=\"ri-blur-off-line\"></i>\n    </button>\n</div>\n<div class=\"flex flex-col gap-2\">\n    @if (showColorInputs()) {\n        <div class=\"flex gap-2\">\n            <div class=\"flex gap-1\">\n                @for (input of colorInputs(); track input.key) {\n                    <mona-numeric-text-box\n                        [value]=\"input.value\"\n                        [minValue]=\"input.min\"\n                        [maxValue]=\"input.max\"\n                        [decimals]=\"0\"\n                        [spinners]=\"false\"\n                        [nullable]=\"false\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"'small'\"\n                        class=\"w-18\"\n                        (valueChange)=\"input.change($event)\"\n                        (inputBlur)=\"onNumericInputBlur()\">\n                        <ng-template monaNumericTextBoxPrefixTemplate>\n                            <ng-container\n                                [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\n                                [ngTemplateOutletContext]=\"{ $implicit: input.label }\"></ng-container>\n                        </ng-template>\n                    </mona-numeric-text-box>\n                }\n            </div>\n            <div class=\"flex flex-1 items-center justify-end\">\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    [rounded]=\"rounded()\"\n                    size=\"small\"\n                    aria-label=\"Switch color mode\"\n                    (click)=\"onSwitchColorModeClick()\">\n                    <i class=\"ri-expand-up-down-line\"></i>\n                </button>\n            </div>\n        </div>\n    }\n    @if (showHexInput()) {\n        <mona-text-box\n            [rounded]=\"rounded()\"\n            [value]=\"hex()\"\n            (valueChange)=\"onHexChange($event)\"\n            (inputBlur)=\"onHexInputBlur()\"\n            (inputFocus)=\"onHexInputFocus()\"\n            class=\"w-full\">\n            <ng-template monaTextBoxPrefixTemplate>\n                <ng-container\n                    [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: 'HEX', classes: 'w-auto px-2' }\"></ng-container>\n            </ng-template>\n            <ng-template monaTextBoxSuffixTemplate>\n                <mona-dropdown-button look=\"ghost\" aria-label=\"Copy color\" class=\"h-full\">\n                    <svg lucideCopy [size]=\"12\"></svg>\n                    <mona-dropdown-button-item\n                        label=\"Copy as HEX\"\n                        (menuClick)=\"onCopyColorSelect('hex')\"></mona-dropdown-button-item>\n                    <mona-dropdown-button-item\n                        label=\"Copy as RGB\"\n                        (menuClick)=\"onCopyColorSelect('rgb')\"></mona-dropdown-button-item>\n                </mona-dropdown-button>\n            </ng-template>\n        </mona-text-box>\n    }\n    @if (showButtons()) {\n        <div class=\"flex items-center justify-end gap-2\">\n            <button monaButton [rounded]=\"rounded()\" look=\"primary\" (click)=\"onApply()\">Apply</button>\n            <button monaButton [rounded]=\"rounded()\" (click)=\"onCancel()\">Cancel</button>\n        </div>\n    }\n</div>\n\n<ng-template #numericInputPrefixTemplate let-text let-classes=\"classes\">\n    <span\n        [class]=\"classes\"\n        class=\"inline-flex items-center justify-center select-none w-7.5 bg-secondary h-full text-xs font-semibold border-r border-r-input-border\"\n        >{{ text }}</span\n    >\n</ng-template>\n", dependencies: [{ kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "maxValue", "minValue", "nullable", "readonly", "required", "invalid", "rounded", "size", "spinners", "step", "tabindex", "touched", "class", "value"], outputs: ["inputBlur", "inputFocus", "inputFocusOut", "touch", "valueChange"] }, { kind: "directive", type: NumericTextBoxPrefixTemplateDirective, selector: "ng-template[monaNumericTextBoxPrefixTemplate]" }, { 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: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { kind: "component", type: SliderComponent, selector: "mona-slider", inputs: ["aria-label", "aria-labelledby", "value"], outputs: ["valueChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownButtonComponent, selector: "mona-dropdown-button", inputs: ["aria-label", "aria-labelledby", "iconOnly", "disabled", "loading", "look", "rounded", "size", "text", "class"], outputs: ["menuItemClick"] }, { kind: "component", type: DropdownButtonItemComponent, selector: "mona-dropdown-button-item" }, { kind: "component", type: LucideCopy, selector: "svg[lucideCopy]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorGradientComponent, decorators: [{
             type: Component,
@@ -838,7 +838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-disabled]": "disabled()",
                         "[attr.data-invalid]": "invalidState() || null",
                         "[attr.aria-invalid]": "invalidState() ? 'true' : null"
-                    }, template: "<div [class]=\"hsvRectangleClasses()\" [style.background-color]=\"hsvRectangleBackground()\" #hsvRectangle>\r\n    <div\r\n        [class]=\"hsvRectangleHandleClasses()\"\r\n        [style.left.px]=\"hsvHandleLeft()\"\r\n        [style.top.px]=\"hsvHandleTop()\"\r\n        [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n        [attr.role]=\"'slider'\"\r\n        [attr.aria-label]=\"'Color saturation and value'\"\r\n        [attr.aria-valuemin]=\"0\"\r\n        [attr.aria-valuemax]=\"100\"\r\n        [attr.aria-valuenow]=\"hsv().s\"\r\n        [attr.aria-valuetext]=\"'Saturation ' + hsv().s + '%, Value ' + hsv().v + '%'\"\r\n        [attr.aria-disabled]=\"disabled() || null\"\r\n        (keydown)=\"onHsvHandleKeyDown($event)\"\r\n        (blur)=\"onHsvHandleBlur()\"\r\n        #hsvPointer></div>\r\n</div>\r\n<div class=\"flex items-center gap-2\">\r\n    <div class=\"flex flex-1 flex-col gap-1 mr-2\">\r\n        <mona-slider\r\n            [minValue]=\"0\"\r\n            [maxValue]=\"360\"\r\n            [trackBackground]=\"'linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)'\"\r\n            [selectionBackground]=\"'transparent'\"\r\n            [handleClasses]=\"sliderHandleClasses()\"\r\n            [trackSize]=\"sliderHeight\"\r\n            [rounded]=\"rounded()\"\r\n            [value]=\"hsv().h ?? 0\"\r\n            (valueChange)=\"hueValue$.next($event)\"\r\n            (touch)=\"onSliderBlur()\"></mona-slider>\r\n        @if (opacity()) {\r\n            <mona-slider\r\n                [minValue]=\"0\"\r\n                [maxValue]=\"255\"\r\n                [trackBackground]=\"alphaSliderBackground()\"\r\n                [selectionBackground]=\"'transparent'\"\r\n                [handleClasses]=\"sliderHandleClasses()\"\r\n                [trackSize]=\"sliderHeight\"\r\n                [rounded]=\"rounded()\"\r\n                [value]=\"alpha()\"\r\n                (valueChange)=\"onAlphaChange($event)\"\r\n                (touch)=\"onSliderBlur()\"></mona-slider>\r\n        }\r\n    </div>\r\n    @for (preview of colorPreviews(); track preview.type) {\r\n        <div\r\n            [class]=\"colorPreviewClasses()\"\r\n            [class.cursor-pointer]=\"$index === 1\"\r\n            [style.background-color]=\"preview.color\"\r\n            [attr.title]=\"$index === 1 ? preview.title : null\"\r\n            [attr.aria-label]=\"$index === 1 ? preview.title : null\"\r\n            [attr.aria-hidden]=\"$index === 0 ? 'true' : null\"\r\n            [attr.role]=\"$index === 1 ? 'button' : null\"\r\n            [attr.tabindex]=\"$index === 1 ? 0 : null\"\r\n            (click)=\"preview.onClick?.()\"\r\n            (keydown)=\"onPreviousColorKeyDown($event, preview.onClick)\"></div>\r\n    }\r\n    <button monaButton look=\"ghost\" size=\"small\" aria-label=\"Clear color\" (click)=\"onClearClick()\">\r\n        <i class=\"ri-blur-off-line\"></i>\r\n    </button>\r\n</div>\r\n<div class=\"flex flex-col gap-2\">\r\n    @if (showColorInputs()) {\r\n        <div class=\"flex gap-2\">\r\n            <div class=\"flex gap-1\">\r\n                @for (input of colorInputs(); track input.key) {\r\n                    <mona-numeric-text-box\r\n                        [value]=\"input.value\"\r\n                        [minValue]=\"input.min\"\r\n                        [maxValue]=\"input.max\"\r\n                        [decimals]=\"0\"\r\n                        [spinners]=\"false\"\r\n                        [nullable]=\"false\"\r\n                        [rounded]=\"rounded()\"\r\n                        [size]=\"'small'\"\r\n                        class=\"w-18\"\r\n                        (valueChange)=\"input.change($event)\"\r\n                        (inputBlur)=\"onNumericInputBlur()\">\r\n                        <ng-template monaNumericTextBoxPrefixTemplate>\r\n                            <ng-container\r\n                                [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\r\n                                [ngTemplateOutletContext]=\"{ $implicit: input.label }\"></ng-container>\r\n                        </ng-template>\r\n                    </mona-numeric-text-box>\r\n                }\r\n            </div>\r\n            <div class=\"flex flex-1 items-center justify-end\">\r\n                <button\r\n                    monaButton\r\n                    look=\"ghost\"\r\n                    [rounded]=\"rounded()\"\r\n                    size=\"small\"\r\n                    aria-label=\"Switch color mode\"\r\n                    (click)=\"onSwitchColorModeClick()\">\r\n                    <i class=\"ri-expand-up-down-line\"></i>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    }\r\n    @if (showHexInput()) {\r\n        <mona-text-box\r\n            [rounded]=\"rounded()\"\r\n            [value]=\"hex()\"\r\n            (valueChange)=\"onHexChange($event)\"\r\n            (inputBlur)=\"onHexInputBlur()\"\r\n            (inputFocus)=\"onHexInputFocus()\"\r\n            class=\"w-full\">\r\n            <ng-template monaTextBoxPrefixTemplate>\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: 'HEX', classes: 'w-auto px-2' }\"></ng-container>\r\n            </ng-template>\r\n            <ng-template monaTextBoxSuffixTemplate>\r\n                <mona-dropdown-button look=\"ghost\" aria-label=\"Copy color\" class=\"h-full\">\r\n                    <svg lucideCopy [size]=\"12\"></svg>\r\n                    <mona-dropdown-button-item\r\n                        label=\"Copy as HEX\"\r\n                        (menuClick)=\"onCopyColorSelect('hex')\"></mona-dropdown-button-item>\r\n                    <mona-dropdown-button-item\r\n                        label=\"Copy as RGB\"\r\n                        (menuClick)=\"onCopyColorSelect('rgb')\"></mona-dropdown-button-item>\r\n                </mona-dropdown-button>\r\n            </ng-template>\r\n        </mona-text-box>\r\n    }\r\n    @if (showButtons()) {\r\n        <div class=\"flex items-center justify-end gap-2\">\r\n            <button monaButton [rounded]=\"rounded()\" look=\"primary\" (click)=\"onApply()\">Apply</button>\r\n            <button monaButton [rounded]=\"rounded()\" (click)=\"onCancel()\">Cancel</button>\r\n        </div>\r\n    }\r\n</div>\r\n\r\n<ng-template #numericInputPrefixTemplate let-text let-classes=\"classes\">\r\n    <span\r\n        [class]=\"classes\"\r\n        class=\"inline-flex items-center justify-center select-none w-7.5 bg-secondary h-full text-xs font-semibold border-r border-r-input-border\"\r\n        >{{ text }}</span\r\n    >\r\n</ng-template>\r\n" }]
+                    }, template: "<div [class]=\"hsvRectangleClasses()\" [style.background-color]=\"hsvRectangleBackground()\" #hsvRectangle>\n    <div\n        [class]=\"hsvRectangleHandleClasses()\"\n        [style.left.px]=\"hsvHandleLeft()\"\n        [style.top.px]=\"hsvHandleTop()\"\n        [attr.tabindex]=\"disabled() ? -1 : 0\"\n        [attr.role]=\"'slider'\"\n        [attr.aria-label]=\"'Color saturation and value'\"\n        [attr.aria-valuemin]=\"0\"\n        [attr.aria-valuemax]=\"100\"\n        [attr.aria-valuenow]=\"hsv().s\"\n        [attr.aria-valuetext]=\"'Saturation ' + hsv().s + '%, Value ' + hsv().v + '%'\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        (keydown)=\"onHsvHandleKeyDown($event)\"\n        (blur)=\"onHsvHandleBlur()\"\n        #hsvPointer></div>\n</div>\n<div class=\"flex items-center gap-2\">\n    <div class=\"flex flex-1 flex-col gap-1 mr-2\">\n        <mona-slider\n            [minValue]=\"0\"\n            [maxValue]=\"360\"\n            [trackBackground]=\"'linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)'\"\n            [selectionBackground]=\"'transparent'\"\n            [handleClasses]=\"sliderHandleClasses()\"\n            [trackSize]=\"sliderHeight\"\n            [rounded]=\"rounded()\"\n            [value]=\"hsv().h ?? 0\"\n            (valueChange)=\"hueValue$.next($event)\"\n            (touch)=\"onSliderBlur()\"></mona-slider>\n        @if (opacity()) {\n            <mona-slider\n                [minValue]=\"0\"\n                [maxValue]=\"255\"\n                [trackBackground]=\"alphaSliderBackground()\"\n                [selectionBackground]=\"'transparent'\"\n                [handleClasses]=\"sliderHandleClasses()\"\n                [trackSize]=\"sliderHeight\"\n                [rounded]=\"rounded()\"\n                [value]=\"alpha()\"\n                (valueChange)=\"onAlphaChange($event)\"\n                (touch)=\"onSliderBlur()\"></mona-slider>\n        }\n    </div>\n    @for (preview of colorPreviews(); track preview.type) {\n        <div\n            [class]=\"colorPreviewClasses()\"\n            [class.cursor-pointer]=\"$index === 1\"\n            [style.background-color]=\"preview.color\"\n            [attr.title]=\"$index === 1 ? preview.title : null\"\n            [attr.aria-label]=\"$index === 1 ? preview.title : null\"\n            [attr.aria-hidden]=\"$index === 0 ? 'true' : null\"\n            [attr.role]=\"$index === 1 ? 'button' : null\"\n            [attr.tabindex]=\"$index === 1 ? 0 : null\"\n            (click)=\"preview.onClick?.()\"\n            (keydown)=\"onPreviousColorKeyDown($event, preview.onClick)\"></div>\n    }\n    <button monaButton look=\"ghost\" size=\"small\" aria-label=\"Clear color\" (click)=\"onClearClick()\">\n        <i class=\"ri-blur-off-line\"></i>\n    </button>\n</div>\n<div class=\"flex flex-col gap-2\">\n    @if (showColorInputs()) {\n        <div class=\"flex gap-2\">\n            <div class=\"flex gap-1\">\n                @for (input of colorInputs(); track input.key) {\n                    <mona-numeric-text-box\n                        [value]=\"input.value\"\n                        [minValue]=\"input.min\"\n                        [maxValue]=\"input.max\"\n                        [decimals]=\"0\"\n                        [spinners]=\"false\"\n                        [nullable]=\"false\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"'small'\"\n                        class=\"w-18\"\n                        (valueChange)=\"input.change($event)\"\n                        (inputBlur)=\"onNumericInputBlur()\">\n                        <ng-template monaNumericTextBoxPrefixTemplate>\n                            <ng-container\n                                [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\n                                [ngTemplateOutletContext]=\"{ $implicit: input.label }\"></ng-container>\n                        </ng-template>\n                    </mona-numeric-text-box>\n                }\n            </div>\n            <div class=\"flex flex-1 items-center justify-end\">\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    [rounded]=\"rounded()\"\n                    size=\"small\"\n                    aria-label=\"Switch color mode\"\n                    (click)=\"onSwitchColorModeClick()\">\n                    <i class=\"ri-expand-up-down-line\"></i>\n                </button>\n            </div>\n        </div>\n    }\n    @if (showHexInput()) {\n        <mona-text-box\n            [rounded]=\"rounded()\"\n            [value]=\"hex()\"\n            (valueChange)=\"onHexChange($event)\"\n            (inputBlur)=\"onHexInputBlur()\"\n            (inputFocus)=\"onHexInputFocus()\"\n            class=\"w-full\">\n            <ng-template monaTextBoxPrefixTemplate>\n                <ng-container\n                    [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: 'HEX', classes: 'w-auto px-2' }\"></ng-container>\n            </ng-template>\n            <ng-template monaTextBoxSuffixTemplate>\n                <mona-dropdown-button look=\"ghost\" aria-label=\"Copy color\" class=\"h-full\">\n                    <svg lucideCopy [size]=\"12\"></svg>\n                    <mona-dropdown-button-item\n                        label=\"Copy as HEX\"\n                        (menuClick)=\"onCopyColorSelect('hex')\"></mona-dropdown-button-item>\n                    <mona-dropdown-button-item\n                        label=\"Copy as RGB\"\n                        (menuClick)=\"onCopyColorSelect('rgb')\"></mona-dropdown-button-item>\n                </mona-dropdown-button>\n            </ng-template>\n        </mona-text-box>\n    }\n    @if (showButtons()) {\n        <div class=\"flex items-center justify-end gap-2\">\n            <button monaButton [rounded]=\"rounded()\" look=\"primary\" (click)=\"onApply()\">Apply</button>\n            <button monaButton [rounded]=\"rounded()\" (click)=\"onCancel()\">Cancel</button>\n        </div>\n    }\n</div>\n\n<ng-template #numericInputPrefixTemplate let-text let-classes=\"classes\">\n    <span\n        [class]=\"classes\"\n        class=\"inline-flex items-center justify-center select-none w-7.5 bg-secondary h-full text-xs font-semibold border-r border-r-input-border\"\n        >{{ text }}</span\n    >\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { hsvHandle: [{ type: i0.ViewChild, args: ["hsvPointer", { isSignal: true }] }], hsvRectangle: [{ type: i0.ViewChild, args: ["hsvRectangle", { isSignal: true }] }], apply: [{ type: i0.Output, args: ["apply"] }], cancel: [{ type: i0.Output, args: ["cancel"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], opacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacity", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], showHexInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHexInput", required: false }] }], showColorInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColorInputs", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /*

package/fesm2022/nanahoshi-mona-ui-color-palette.mjs

@@ -4,32 +4,32 @@ import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { count } from '@mirei/ts-collections';
 import { cva } from 'class-variance-authority';
 
-const colorPaletteBaseVariants = cva(`
-        grid gap-0.125 p-0.0625
-        data-[disabled='true']:cursor-not-allowed
-        data-[disabled='true']:opacity-50
-        data-[disabled='true']:pointer-events-none
-        data-[readonly='true']:cursor-default
-        data-[invalid='true']:border
-        data-[invalid='true']:border-error
-        data-[invalid='true']:ring-1
-        data-[invalid='true']:ring-error
+const colorPaletteBaseVariants = cva(`
+        grid gap-0.125 p-0.0625
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:opacity-50
+        data-[disabled='true']:pointer-events-none
+        data-[readonly='true']:cursor-default
+        data-[invalid='true']:border
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-1
+        data-[invalid='true']:ring-error
     `);
-const colorPaletteItemVariants = cva(`
-        cursor-pointer
-        data-[readonly='true']:cursor-default
-        data-[selected='true']:border
-        data-[selected='true']:border-border
-        data-[selected='true']:outline
-        data-[selected='true']:outline-2
-        data-[selected='true']:outline-foreground
-        data-[selected='true']:scale-90
-        hover:border hover:border-border
-
-        focus:not-data-[selected='true']:border
-        focus:not-data-[selected='true']:border-foreground
-        focus:not-data-[selected='true']:outline-none
-        focus:not-data-[selected='true']:z-1
+const colorPaletteItemVariants = cva(`
+        cursor-pointer
+        data-[readonly='true']:cursor-default
+        data-[selected='true']:border
+        data-[selected='true']:border-border
+        data-[selected='true']:outline
+        data-[selected='true']:outline-2
+        data-[selected='true']:outline-foreground
+        data-[selected='true']:scale-90
+        hover:border hover:border-border
+
+        focus:not-data-[selected='true']:border
+        focus:not-data-[selected='true']:border-foreground
+        focus:not-data-[selected='true']:outline-none
+        focus:not-data-[selected='true']:z-1
     `, {
     variants: {
         rounded: {