@nanahoshi/mona-ui 0.24.1 → 0.24.2

package/README.md

@@ -18,6 +18,7 @@ A modern, high-performance, accessible UI component library built for Angular an
 ## Documentation
 
 - [Internationalization (i18n) & RTL Guide](docs/i18n.md)
+- [Buttons](docs/button.md)
 - [Patch Stores & Merge Utilities](docs/patch-store.md)
 - [Component Migration Inventory](docs/internal/i18n-rtl-migration-inventory.md)
 

package/fesm2022/nanahoshi-mona-ui-button-group.mjs

@@ -21,7 +21,6 @@ const buttonGroupThemeVariants = cva(`
         [&>button:not(:last-child)]:border-e
         [&>button:not(:last-child)]:border-border-subtle
         [&>button]:rounded-none
-        [&>button]:focus-visible:ring-2
         [&>button]:focus-visible:z-10
     `, {
     variants: {
@@ -149,6 +148,7 @@ class ButtonGroupComponent {
          * @default ""
          */
         this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+        this.#buttonService.setMembers(this.buttons);
         effect(() => {
             const disabled = this.disabled();
             untracked(() => this.#buttonService.groupDisabled.set(disabled));

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, ApplicationRef, DestroyRef, ElementRef, Injector, Renderer2, computed, input, model, effect, untracked, afterNextRender, createComponent, Directive } from '@angular/core';
+import { signal, computed, Injectable, inject, ApplicationRef, DestroyRef, ElementRef, Injector, Renderer2, input, booleanAttribute, model, numberAttribute, effect, untracked, afterNextRender, isDevMode, createComponent, afterRenderEffect, Directive } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { IndicatorIconComponent } from '@nanahoshi/mona-ui/internal/indicator-icon';
 import { Subject, fromEvent, takeWhile } from 'rxjs';
@@ -7,8 +7,15 @@ import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { themeControlSurfaceClasses } from '@nanahoshi/mona-ui/internal';
 
+/**
+ * Coordinates a `mona-button-group` with its buttons: the group publishes its look, size, rounding, disabled state
+ * and members here, and buttons report clicks and receive selection changes through it. It is public so the
+ * button-group entry point can provide it; applications don't need to use it directly.
+ */
 class ButtonService {
     constructor() {
+        this.#members = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#members" }] : /* istanbul ignore next */ []));
         this.buttonClick$ = new Subject();
         this.buttonSelect$ = new Subject();
         this.groupDisabled = signal(false, /* @ts-ignore */
@@ -19,6 +26,19 @@ class ButtonService {
         ...(ngDevMode ? [{ debugName: "groupRounded" }] : /* istanbul ignore next */ []));
         this.groupSize = signal(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "groupSize" }] : /* istanbul ignore next */ []));
+        /**
+         * The buttons that belong to the group. Only these follow the group's look, size, rounding, disabled state and
+         * selection; other buttons that can inject this service ignore it.
+         */
+        this.members = computed(() => this.#members()?.() ?? [], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "members" }] : /* istanbul ignore next */ []));
+    }
+    #members;
+    /**
+     * Sets the source of the group's members, such as the group's `contentChildren(ButtonDirective)` query.
+     */
+    setMembers(members) {
+        this.#members.set(members);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ButtonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ButtonService }); }
@@ -31,13 +51,13 @@ const buttonThemeVariants = cva(`
         inline-flex items-center justify-center gap-2
         cursor-pointer whitespace-nowrap
         text-sm font-medium
-        outline-none
         transition-colors duration-100 ease-in-out
+        focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-indicator
     `, {
     variants: {
         disabled: {
             true: `
-                    pointer-events-none cursor-not-allowed select-none
+                    pointer-events-none select-none
                     disabled:border-disabled-border disabled:bg-disabled-background disabled:text-disabled-foreground
                     disabled:shadow-none
                 `,
@@ -56,66 +76,57 @@ const buttonThemeVariants = cva(`
                     ${themeControlSurfaceClasses} text-foreground
                     border border-input-border
                     hover:bg-hover active:bg-active
-                    focus-visible:border-focus-indicator focus-visible:ring-2 focus-visible:ring-focus-indicator/35
+                    focus-visible:border-focus-indicator
                 `,
             primary: `
                     bg-primary text-primary-foreground
                     hover:bg-primary-hover active:bg-primary-active
-                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `,
             success: `
                     bg-success text-success-foreground
                     hover:bg-success-hover
                     active:bg-success-active
-                    focus-visible:ring-2 focus-visible:ring-success/35
                 `,
             error: `
                     bg-error text-error-foreground
                     hover:bg-error-hover
                     active:bg-error-active
-                    focus-visible:ring-2 focus-visible:ring-error/35
                 `,
             warning: `
                     bg-warning text-warning-foreground
                     hover:bg-warning-hover
                     active:bg-warning-active
-                    focus-visible:ring-2 focus-visible:ring-warning/35
                 `,
             info: `
                     bg-info text-info-foreground
                     hover:bg-info-hover
                     active:bg-info-active
-                    focus-visible:ring-2 focus-visible:ring-info/35
                 `,
             outline: `
                     ${themeControlSurfaceClasses} text-foreground
                     border border-input-border
                     hover:bg-hover active:bg-active
-                    focus-visible:border-focus-indicator focus-visible:ring-2 focus-visible:ring-focus-indicator/35
+                    focus-visible:border-focus-indicator
                 `,
             secondary: `
                     bg-secondary text-secondary-foreground
                     hover:bg-secondary-hover
                     active:bg-secondary-active
-                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `,
             ghost: `
                     bg-transparent text-foreground
                     shadow-none
                     hover:bg-hover active:bg-active
-                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `,
             link: `
                     bg-transparent text-foreground
                     shadow-none
                     underline-offset-4 hover:underline
-                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `,
             clear: `
                     bg-transparent
                     border-0 shadow-none
                     hover:bg-transparent active:bg-transparent
-                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `
         },
         rounded: {
@@ -240,19 +251,21 @@ const buttonThemeVariants = cva(`
         },
         {
             iconOnly: true,
-            loading: false,
+            loading: true,
+            class: "[&>:not(mona-indicator-icon)]:hidden"
+        },
+        {
+            iconOnly: true,
             size: "small",
             class: "h-8 w-8 p-0"
         },
         {
             iconOnly: true,
-            loading: false,
             size: "medium",
             class: "h-9 w-9 p-0"
         },
         {
             iconOnly: true,
-            loading: false,
             size: "large",
             class: "h-10 w-10 p-0"
         }
@@ -268,6 +281,11 @@ class ButtonDirective {
     #appRef;
     #buttonService;
     #destroyRef;
+    /**
+     * The service of the group this button belongs to. A `ButtonService` higher up the injector tree is not enough:
+     * buttons inside a component projected into a group, or inside a popup opened from one, are not members.
+     */
+    #group;
     #hostElementRef;
     #injector;
     #renderer;
@@ -277,25 +295,17 @@ class ButtonDirective {
         this.#appRef = inject(ApplicationRef);
         this.#buttonService = inject(ButtonService, { optional: true });
         this.#destroyRef = inject(DestroyRef);
+        /**
+         * The service of the group this button belongs to. A `ButtonService` higher up the injector tree is not enough:
+         * buttons inside a component projected into a group, or inside a popup opened from one, are not members.
+         */
+        this.#group = computed(() => (this.#buttonService?.members().includes(this) ? this.#buttonService : null), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#group" }] : /* istanbul ignore next */ []));
         this.#hostElementRef = inject(ElementRef);
         this.#injector = inject(Injector);
         this.#renderer = inject(Renderer2);
         this.#loaderComponentRef = null;
         this.#toggleSubscription = null;
-        this.displaysPressedState = computed(() => this.isInButtonGroup() || !!this.toggleable(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "displaysPressedState" }] : /* istanbul ignore next */ []));
-        this.effectiveDisabled = computed(() => this.#buttonService?.groupDisabled() || this.disabled(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
-        this.effectiveLook = computed(() => this.#buttonService?.groupLook() ?? this.look(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "effectiveLook" }] : /* istanbul ignore next */ []));
-        this.effectiveRounded = computed(() => this.#buttonService?.groupRounded() ?? this.rounded(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "effectiveRounded" }] : /* istanbul ignore next */ []));
-        this.effectiveSize = computed(() => this.#buttonService?.groupSize() ?? this.size(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
-        this.effectiveToggleable = computed(() => this.toggleable() ?? this.isInButtonGroup(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "effectiveToggleable" }] : /* istanbul ignore next */ []));
-        this.isInButtonGroup = computed(() => !!this.#buttonService, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isInButtonGroup" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
             const disabled = this.effectiveDisabled();
             const iconOnly = this.iconOnly();
@@ -309,6 +319,16 @@ class ButtonDirective {
             return twMerge(variantClasses, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.effectiveDisabled = computed(() => this.#group()?.groupDisabled() || this.disabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+        this.effectiveLook = computed(() => this.#group()?.groupLook() ?? this.look(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveLook" }] : /* istanbul ignore next */ []));
+        this.effectiveRounded = computed(() => this.#group()?.groupRounded() ?? this.rounded(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveRounded" }] : /* istanbul ignore next */ []));
+        this.effectiveSize = computed(() => this.#group()?.groupSize() ?? this.size(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
+        this.effectiveToggleable = computed(() => this.toggleable() ?? !!this.#group(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveToggleable" }] : /* istanbul ignore next */ []));
         this.loadingSize = computed(() => {
             const size = this.effectiveSize();
             switch (size) {
@@ -330,27 +350,29 @@ class ButtonDirective {
         this.ariaHasPopup = input("false", { ...(ngDevMode ? { debugName: "ariaHasPopup" } : /* istanbul ignore next */ {}), alias: "aria-haspopup" });
         /**
          * @description Renders the component with reduced visual emphasis and removes pointer interaction.
-         * When inside a `ButtonGroup`, the group's disabled state takes precedence.
+         * Accepts the bare attribute form (`<button monaButton disabled>`).
+         * When inside a `ButtonGroup`, the button is disabled when either it or the group is disabled.
          * @default false
          */
-        this.disabled = model(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Removes horizontal padding and fixes a square aspect ratio sized to match `size`.
-         * Provide `aria-label` on the host when using icon-only buttons.
+         * Provide `aria-label` on the host when using icon-only buttons; in dev mode, an icon-only button without an
+         * accessible name logs a warning.
          * @default false
          */
-        this.iconOnly = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
+        this.iconOnly = input(false, { ...(ngDevMode ? { debugName: "iconOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Displays a loading indicator and prevents interaction while an operation is in progress.
-         * Sets `aria-busy="true"` on the host.
+         * Sets `aria-busy="true"` and `aria-disabled="true"` on the host. The button stays focusable, so keyboard focus
+         * isn't lost when loading starts, and clicks (including form submission) are blocked until it ends.
          * @default false
          */
-        this.loading = model(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Visual style variant of the button. When inside a `ButtonGroup`, the group's look takes precedence.
+         * `"outline"` looks the same as `"default"`. `"clear"` shows no selected state, so use another look for
+         * toggle buttons.
          * @default "default"
          */
         this.look = model("default", /* @ts-ignore */
@@ -377,11 +399,17 @@ class ButtonDirective {
         this.size = input("medium", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         /**
-         * @description Tab index of the host element. Automatically overridden to `-1` when the button is disabled or loading.
-         * Accepts a numeric string and converts it to a number.
+         * @description Tab index of the host element. Automatically overridden to `-1` when the button is disabled.
+         * Accepts a numeric string and converts it to a number; a value that is not a number falls back to `0`.
          * @default 0
          */
-        this.tabindex = input(0, { ...(ngDevMode ? { debugName: "tabindex" } : /* istanbul ignore next */ {}), transform: (value) => (typeof value === "string" ? parseInt(value, 10) : value) });
+        this.tabindex = input(0, { ...(ngDevMode ? { debugName: "tabindex" } : /* istanbul ignore next */ {}), transform: (value) => numberAttribute(value, 0) });
+        /**
+         * @description Enables toggle behavior — each click flips the `selected` state and `aria-pressed` is managed.
+         * Accepts the bare attribute form. Buttons in a `ButtonGroup` are toggleable unless this is set to `false`.
+         * @default undefined
+         */
+        this.toggleable = input(undefined, { ...(ngDevMode ? { debugName: "toggleable" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
         /**
          * @description Native `type` attribute of the button. Defaults to `"button"` to prevent accidental
          * form submission; set to `"submit"` or `"reset"` explicitly when that behavior is intended.
@@ -389,13 +417,6 @@ class ButtonDirective {
          */
         this.type = input("button", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-        /**
-         * @description Enables toggle behavior — each click flips the `selected` state and `aria-pressed` is managed.
-         * Must use `[toggleable]="true"` binding syntax, not bare attribute form.
-         * @default undefined
-         */
-        this.toggleable = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "toggleable" }] : /* istanbul ignore next */ []));
         /**
          * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
          * @default ""
@@ -419,12 +440,35 @@ class ButtonDirective {
                 }
             });
         });
-        afterNextRender({
-            read: () => this.#setSubscriptions()
-        });
+        this.#blockClicksWhileLoading();
+        this.#destroyRef.onDestroy(() => this.#removeLoader());
+        if (this.#buttonService) {
+            afterNextRender({
+                read: () => this.#setSubscriptions()
+            });
+        }
+        if (isDevMode()) {
+            this.#warnIfIconOnlyWithoutName();
+        }
+    }
+    /**
+     * A loading button keeps focus, so it is not natively disabled. A capturing listener registered before any other
+     * stops activation from reaching the user's handlers, the toggle handler and form submission.
+     */
+    #blockClicksWhileLoading() {
+        const host = this.#hostElementRef.nativeElement;
+        const listener = (event) => {
+            if (this.loading()) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+        };
+        host.addEventListener("click", listener, { capture: true });
+        this.#destroyRef.onDestroy(() => host.removeEventListener("click", listener, { capture: true }));
     }
     #createLoader(size) {
         if (this.#loaderComponentRef) {
+            this.#loaderComponentRef.setInput("size", size);
             return;
         }
         this.#loaderComponentRef = createComponent(IndicatorIconComponent, {
@@ -453,6 +497,11 @@ class ButtonDirective {
             }
         });
     }
+    #hasAccessibleName() {
+        const host = this.#hostElementRef.nativeElement;
+        const named = ["aria-label", "aria-labelledby", "title"].some(name => !!host.getAttribute(name)?.trim());
+        return named || !!host.textContent?.trim();
+    }
     #setToggleableEvent() {
         this.#toggleSubscription?.unsubscribe();
         this.#toggleSubscription = fromEvent(this.#hostElementRef.nativeElement, "click")
@@ -462,16 +511,29 @@ class ButtonDirective {
                 return;
             }
             const wasSelected = this.selected();
-            if (this.#buttonService) {
-                this.#buttonService.buttonClick$.next([this, wasSelected]);
+            const group = this.#group();
+            if (group) {
+                group.buttonClick$.next([this, wasSelected]);
             }
             else {
                 this.selected.set(!this.selected());
             }
         });
     }
+    #warnIfIconOnlyWithoutName() {
+        let warned = false;
+        afterRenderEffect({
+            read: () => {
+                if (warned || !this.iconOnly() || this.#hasAccessibleName()) {
+                    return;
+                }
+                warned = true;
+                console.warn("[Mona Button] An icon-only button needs an accessible name. Add aria-label, aria-labelledby or title.", this.#hostElementRef.nativeElement);
+            }
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: ButtonDirective, isStandalone: true, selector: "button[monaButton]", inputs: { ariaHasPopup: { classPropertyName: "ariaHasPopup", publicName: "aria-haspopup", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", loading: "loadingChange", look: "lookChange", selected: "selectedChange" }, host: { properties: { "attr.aria-busy": "loading() ? 'true' : undefined", "attr.aria-disabled": "effectiveDisabled() || loading() ? 'true' : undefined", "attr.aria-haspopup": "ariaHasPopup() !== 'false' ? ariaHasPopup() : null", "attr.aria-pressed": "displaysPressedState() ? (selected() ? 'true' : 'false') : undefined", "attr.data-look": "effectiveLook()", "attr.data-size": "effectiveSize()", "attr.disabled": "effectiveDisabled() || loading() ? '' : undefined", "attr.tabindex": "effectiveDisabled() || loading() ? -1 : tabindex()", "attr.type": "type()", "class": "baseClass()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: ButtonDirective, isStandalone: true, selector: "button[monaButton]", inputs: { ariaHasPopup: { classPropertyName: "ariaHasPopup", publicName: "aria-haspopup", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { look: "lookChange", selected: "selectedChange" }, host: { properties: { "attr.aria-busy": "loading() ? 'true' : undefined", "attr.aria-disabled": "effectiveDisabled() || loading() ? 'true' : undefined", "attr.aria-haspopup": "ariaHasPopup() !== 'false' ? ariaHasPopup() : null", "attr.aria-pressed": "effectiveToggleable() ? (selected() ? 'true' : 'false') : undefined", "attr.data-look": "effectiveLook()", "attr.data-size": "effectiveSize()", "attr.disabled": "effectiveDisabled() ? '' : undefined", "attr.tabindex": "effectiveDisabled() ? -1 : tabindex()", "attr.type": "type()", "class": "baseClass()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ButtonDirective, decorators: [{
             type: Directive,
@@ -481,16 +543,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.aria-busy]": "loading() ? 'true' : undefined",
                         "[attr.aria-disabled]": "effectiveDisabled() || loading() ? 'true' : undefined",
                         "[attr.aria-haspopup]": "ariaHasPopup() !== 'false' ? ariaHasPopup() : null",
-                        "[attr.aria-pressed]": "displaysPressedState() ? (selected() ? 'true' : 'false') : undefined",
+                        "[attr.aria-pressed]": "effectiveToggleable() ? (selected() ? 'true' : 'false') : undefined",
                         "[attr.data-look]": "effectiveLook()",
                         "[attr.data-size]": "effectiveSize()",
-                        "[attr.disabled]": "effectiveDisabled() || loading() ? '' : undefined",
-                        "[attr.tabindex]": "effectiveDisabled() || loading() ? -1 : tabindex()",
+                        "[attr.disabled]": "effectiveDisabled() ? '' : undefined",
+                        "[attr.tabindex]": "effectiveDisabled() ? -1 : tabindex()",
                         "[attr.type]": "type()",
                         "[class]": "baseClass()"
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { ariaHasPopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-haspopup", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }, { type: i0.Output, args: ["loadingChange"] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }, { type: i0.Output, args: ["lookChange"] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { ariaHasPopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-haspopup", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }, { type: i0.Output, args: ["lookChange"] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/button

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

@@ -111,7 +111,6 @@ const calendarHeaderThemeVariants = cva(`
         [&>button:nth-of-type(3)]:rounded-ee-none
         [&>button:nth-of-type(4)]:rounded-ss-none
         [&>button:nth-of-type(4)]:rounded-es-none
-        [&>button]:outline-none
     `);
 const calendarMonthViewDayThemeVariants = cva(`
         cursor-pointer
@@ -1537,7 +1536,7 @@ class CalendarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CalendarComponent, isStandalone: true, selector: "mona-calendar", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, firstDay: { classPropertyName: "firstDay", publicName: "firstDay", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, weekNumber: { classPropertyName: "weekNumber", publicName: "weekNumber", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", touch: "touch", value: "valueChange" }, host: { attributes: { "role": "application" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.data-invalid": "invalidState() || null", "attr.data-required": "required() || null", "attr.tabindex": "disabled() ? -1 : 0", "class": "baseClass()" } }, queries: [{ propertyName: "decadeCellTemplate", first: true, predicate: CalendarDecadeCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthCellTemplate", first: true, predicate: CalendarMonthCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "yearCellTemplate", first: true, predicate: CalendarYearCellTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"headerClass()\">\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [size]=\"'small'\"\n        (click)=\"onTodayButtonClick()\"\n        [attr.aria-label]=\"todayButtonLabel()\">\n        <span>{{ messages().today }}</span>\n    </button>\n    @switch (calendarView()) {\n        @case (\"month\") {\n            <button\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                (click)=\"onViewChangeClick('year')\"\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\n                    headerMonthYear()\n                }}</span>\n            </button>\n        }\n        @case (\"year\") {\n            <button\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                (click)=\"onViewChangeClick('decade')\"\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\n                    headerYear()\n                }}</span>\n            </button>\n        }\n        @case (\"decade\") {\n            <button monaButton look=\"ghost\" [rounded]=\"rounded()\" [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\"\n                    >{{ formatInteger(decadeStart()) }} - {{ formatInteger(decadeEnd()) }}</span\n                >\n            </button>\n        }\n    }\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        (click)=\"onNavigationClick('prev')\"\n        [attr.aria-label]=\"prevButtonLabel()\">\n        <svg lucideChevronLeft class=\"rtl:rotate-180\"></svg>\n    </button>\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        (click)=\"onNavigationClick('next')\"\n        [attr.aria-label]=\"nextButtonLabel()\">\n        <svg lucideChevronRight class=\"rtl:rotate-180\"></svg>\n    </button>\n</div>\n\n<div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">{{ ariaLabel() }}</div>\n\n@if (calendarView() === \"month\") {\n    @let columnCount = weekNumber() ? 8 : 7;\n    <div [class]=\"monthGridHeaderClass()\" [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\n        @if (weekNumber()) {\n            <div></div>\n        }\n        @for (day of weekdays(); track day.full) {\n            <div>\n                <span aria-hidden=\"true\">{{ day.display }}</span>\n                <span class=\"sr-only\">{{ day.full }}</span>\n            </div>\n        }\n    </div>\n    <div\n        [class]=\"monthGridClass()\"\n        [attr.aria-labelledby]=\"gridId + '-heading'\"\n        (pointerleave)=\"onMonthGridPointerLeave()\"\n        [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\n        @for (row of monthDictChunked(); track $index) {\n            @if (weekNumber()) {\n                @let firstEntry = row | monaTakeFirst;\n                @if (firstEntry) {\n                    @let week = getWeekNumber(firstEntry.key);\n                    <div>{{ formatInteger(week) }}</div>\n                }\n            }\n            @for (entry of row; track entry.key) {\n                <div\n                    (dayPointerEnter)=\"onDayPointerEnter($event)\"\n                    (daySelect)=\"onDayClick($event.date, $event.event)\"\n                    monaMonthDay\n                    [disabled]=\"disabled()\"\n                    [disabledDates]=\"disabledDates()\"\n                    [min]=\"minDate()\"\n                    [max]=\"maxDate()\"\n                    [monthBounds]=\"[monthBounds().start, monthBounds().end]\"\n                    [navigatedDate]=\"navigatedDate()\"\n                    [rangePreview]=\"rangePreviewDates()\"\n                    [rounded]=\"rounded()\"\n                    [value]=\"selectedDates()\"\n                    [entry]=\"entry\">\n                    @if (monthCellTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: entry.value, date: entry.key }\"></ng-container>\n                    } @else {\n                        <span>{{ formatInteger(entry.value) }}</span>\n                    }\n                </div>\n            }\n        }\n    </div>\n} @else if (calendarView() === \"year\") {\n    <div [class]=\"yearGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\n        @for (row of months(); track $index) {\n            @for (monthItem of row; track monthItem) {\n                <div\n                    (click)=\"onMonthClick(monthItem[0])\"\n                    monaYearMonth\n                    [month]=\"monthItem[0]\"\n                    [monthName]=\"monthItem[1]\"\n                    [navigatedDate]=\"navigatedDate()\"\n                    [rounded]=\"rounded()\"\n                    [selectedDate]=\"selectedDates()[0]\">\n                    @if (yearCellTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: monthItem[0], text: monthItem[1] }\">\n                        </ng-container>\n                    } @else {\n                        <span>{{ monthItem[1] }}</span>\n                    }\n                </div>\n            }\n        }\n    </div>\n} @else if (calendarView() === \"decade\") {\n    <div [class]=\"decadeGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\n        @for (row of decadeYears(); track $index) {\n            @for (year of row; track year) {\n                <div\n                    (click)=\"onYearClick(year)\"\n                    monaDecadeYear\n                    [navigatedDate]=\"navigatedDate()\"\n                    [rounded]=\"rounded()\"\n                    [year]=\"year\"\n                    [selectedDate]=\"selectedDates()[0]\">\n                    @if (decadeCellTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: year }\">\n                        </ng-container>\n                    } @else {\n                        <span>{{ formatInteger(year) }}</span>\n                    }\n                </div>\n            }\n        }\n    </div>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: MonthDayDirective, selector: "[monaMonthDay]", inputs: ["disabled", "disabledDates", "entry", "max", "min", "monthBounds", "navigatedDate", "rangePreview", "rounded", "value"], outputs: ["dayPointerEnter", "daySelect"] }, { kind: "directive", type: DecadeYearDirective, selector: "[monaDecadeYear]", inputs: ["navigatedDate", "rounded", "selectedDate", "year"] }, { kind: "directive", type: YearMonthDirective, selector: "[monaYearMonth]", inputs: ["month", "monthName", "navigatedDate", "rounded", "selectedDate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "pipe", type: TakeFirstPipe, name: "monaTakeFirst" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CalendarComponent, isStandalone: true, selector: "mona-calendar", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, firstDay: { classPropertyName: "firstDay", publicName: "firstDay", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, weekNumber: { classPropertyName: "weekNumber", publicName: "weekNumber", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", touch: "touch", value: "valueChange" }, host: { attributes: { "role": "application" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.data-invalid": "invalidState() || null", "attr.data-required": "required() || null", "attr.tabindex": "disabled() ? -1 : 0", "class": "baseClass()" } }, queries: [{ propertyName: "decadeCellTemplate", first: true, predicate: CalendarDecadeCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthCellTemplate", first: true, predicate: CalendarMonthCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "yearCellTemplate", first: true, predicate: CalendarYearCellTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"headerClass()\">\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [size]=\"'small'\"\n        (click)=\"onTodayButtonClick()\"\n        [attr.aria-label]=\"todayButtonLabel()\">\n        <span>{{ messages().today }}</span>\n    </button>\n    @switch (calendarView()) {\n        @case (\"month\") {\n            <button\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                (click)=\"onViewChangeClick('year')\"\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\n                    headerMonthYear()\n                }}</span>\n            </button>\n        }\n        @case (\"year\") {\n            <button\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                (click)=\"onViewChangeClick('decade')\"\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\n                    headerYear()\n                }}</span>\n            </button>\n        }\n        @case (\"decade\") {\n            <button monaButton look=\"ghost\" [rounded]=\"rounded()\" [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\"\n                    >{{ formatInteger(decadeStart()) }} - {{ formatInteger(decadeEnd()) }}</span\n                >\n            </button>\n        }\n    }\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        (click)=\"onNavigationClick('prev')\"\n        [attr.aria-label]=\"prevButtonLabel()\">\n        <svg lucideChevronLeft class=\"rtl:rotate-180\"></svg>\n    </button>\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        (click)=\"onNavigationClick('next')\"\n        [attr.aria-label]=\"nextButtonLabel()\">\n        <svg lucideChevronRight class=\"rtl:rotate-180\"></svg>\n    </button>\n</div>\n\n<div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">{{ ariaLabel() }}</div>\n\n@if (calendarView() === \"month\") {\n    @let columnCount = weekNumber() ? 8 : 7;\n    <div [class]=\"monthGridHeaderClass()\" [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\n        @if (weekNumber()) {\n            <div></div>\n        }\n        @for (day of weekdays(); track day.full) {\n            <div>\n                <span aria-hidden=\"true\">{{ day.display }}</span>\n                <span class=\"sr-only\">{{ day.full }}</span>\n            </div>\n        }\n    </div>\n    <div\n        [class]=\"monthGridClass()\"\n        [attr.aria-labelledby]=\"gridId + '-heading'\"\n        (pointerleave)=\"onMonthGridPointerLeave()\"\n        [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\n        @for (row of monthDictChunked(); track $index) {\n            @if (weekNumber()) {\n                @let firstEntry = row | monaTakeFirst;\n                @if (firstEntry) {\n                    @let week = getWeekNumber(firstEntry.key);\n                    <div>{{ formatInteger(week) }}</div>\n                }\n            }\n            @for (entry of row; track entry.key) {\n                <div\n                    (dayPointerEnter)=\"onDayPointerEnter($event)\"\n                    (daySelect)=\"onDayClick($event.date, $event.event)\"\n                    monaMonthDay\n                    [disabled]=\"disabled()\"\n                    [disabledDates]=\"disabledDates()\"\n                    [min]=\"minDate()\"\n                    [max]=\"maxDate()\"\n                    [monthBounds]=\"[monthBounds().start, monthBounds().end]\"\n                    [navigatedDate]=\"navigatedDate()\"\n                    [rangePreview]=\"rangePreviewDates()\"\n                    [rounded]=\"rounded()\"\n                    [value]=\"selectedDates()\"\n                    [entry]=\"entry\">\n                    @if (monthCellTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: entry.value, date: entry.key }\"></ng-container>\n                    } @else {\n                        <span>{{ formatInteger(entry.value) }}</span>\n                    }\n                </div>\n            }\n        }\n    </div>\n} @else if (calendarView() === \"year\") {\n    <div [class]=\"yearGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\n        @for (row of months(); track $index) {\n            @for (monthItem of row; track monthItem) {\n                <div\n                    (click)=\"onMonthClick(monthItem[0])\"\n                    monaYearMonth\n                    [month]=\"monthItem[0]\"\n                    [monthName]=\"monthItem[1]\"\n                    [navigatedDate]=\"navigatedDate()\"\n                    [rounded]=\"rounded()\"\n                    [selectedDate]=\"selectedDates()[0]\">\n                    @if (yearCellTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: monthItem[0], text: monthItem[1] }\">\n                        </ng-container>\n                    } @else {\n                        <span>{{ monthItem[1] }}</span>\n                    }\n                </div>\n            }\n        }\n    </div>\n} @else if (calendarView() === \"decade\") {\n    <div [class]=\"decadeGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\n        @for (row of decadeYears(); track $index) {\n            @for (year of row; track year) {\n                <div\n                    (click)=\"onYearClick(year)\"\n                    monaDecadeYear\n                    [navigatedDate]=\"navigatedDate()\"\n                    [rounded]=\"rounded()\"\n                    [year]=\"year\"\n                    [selectedDate]=\"selectedDates()[0]\">\n                    @if (decadeCellTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: year }\">\n                        </ng-container>\n                    } @else {\n                        <span>{{ formatInteger(year) }}</span>\n                    }\n                </div>\n            }\n        }\n    </div>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "directive", type: MonthDayDirective, selector: "[monaMonthDay]", inputs: ["disabled", "disabledDates", "entry", "max", "min", "monthBounds", "navigatedDate", "rangePreview", "rounded", "value"], outputs: ["dayPointerEnter", "daySelect"] }, { kind: "directive", type: DecadeYearDirective, selector: "[monaDecadeYear]", inputs: ["navigatedDate", "rounded", "selectedDate", "year"] }, { kind: "directive", type: YearMonthDirective, selector: "[monaYearMonth]", inputs: ["month", "monthName", "navigatedDate", "rounded", "selectedDate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "pipe", type: TakeFirstPipe, name: "monaTakeFirst" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,

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

@@ -542,7 +542,7 @@ class ChipComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ChipComponent, isStandalone: true, selector: "mona-chip", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, removeTabIndex: { classPropertyName: "removeTabIndex", publicName: "removeTabIndex", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentClick: "contentClick", remove: "remove", selected: "selectedChange" }, host: { properties: { "class": "baseClass()", "attr.tabindex": "effectiveTabIndex()", "attr.aria-disabled": "disabled() ? 'true' : undefined", "attr.role": "role()", "attr.aria-checked": "ariaChecked()", "attr.aria-label": "effectiveAriaLabel()" } }, queries: [{ propertyName: "prefixTemplate", first: true, predicate: ChipPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (prefixTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n}\n\n@if (label()) {\n    <span>{{ label() }}</span>\n} @else {\n    <ng-content></ng-content>\n}\n\n@if (removable()) {\n    @let removeAriaLabel = removeLabel() ?? messages().removeLabel(label());\n    <button\n        monaButton\n        look=\"link\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        [attr.aria-label]=\"removeAriaLabel\"\n        [tabindex]=\"removeTabIndex()\"\n        [disabled]=\"disabled()\"\n        (click)=\"onRemoveClick($event)\"\n        [attr.data-chip-remove]=\"true\">\n        <svg lucideCircleX [size]=\"iconSize()\"></svg>\n    </button>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideCircleX, selector: "svg[lucideCircleX], svg[lucideXCircle]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ChipComponent, isStandalone: true, selector: "mona-chip", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, removeTabIndex: { classPropertyName: "removeTabIndex", publicName: "removeTabIndex", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentClick: "contentClick", remove: "remove", selected: "selectedChange" }, host: { properties: { "class": "baseClass()", "attr.tabindex": "effectiveTabIndex()", "attr.aria-disabled": "disabled() ? 'true' : undefined", "attr.role": "role()", "attr.aria-checked": "ariaChecked()", "attr.aria-label": "effectiveAriaLabel()" } }, queries: [{ propertyName: "prefixTemplate", first: true, predicate: ChipPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (prefixTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n}\n\n@if (label()) {\n    <span>{{ label() }}</span>\n} @else {\n    <ng-content></ng-content>\n}\n\n@if (removable()) {\n    @let removeAriaLabel = removeLabel() ?? messages().removeLabel(label());\n    <button\n        monaButton\n        look=\"link\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        [attr.aria-label]=\"removeAriaLabel\"\n        [tabindex]=\"removeTabIndex()\"\n        [disabled]=\"disabled()\"\n        (click)=\"onRemoveClick($event)\"\n        [attr.data-chip-remove]=\"true\">\n        <svg lucideCircleX [size]=\"iconSize()\"></svg>\n    </button>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideCircleX, selector: "svg[lucideCircleX], svg[lucideXCircle]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChipComponent, decorators: [{
             type: Component,

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

@@ -789,7 +789,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>\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]=\"messages().saturationAndValue\"\n        [attr.aria-valuemin]=\"0\"\n        [attr.aria-valuemax]=\"100\"\n        [attr.aria-valuenow]=\"hsv().s\"\n        [attr.aria-valuetext]=\"messages().saturationAndValueText(hsv().s ?? 0, hsv().v ?? 0)\"\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 me-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\" [attr.aria-label]=\"messages().clearColor\" (click)=\"onClearClick()\">\n        <svg lucideDropletOff [size]=\"16\" aria-hidden=\"true\"></svg>\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                    [attr.aria-label]=\"messages().switchColorMode\"\n                    (click)=\"onSwitchColorModeClick()\">\n                    <svg lucideChevronsUpDown [size]=\"16\" aria-hidden=\"true\"></svg>\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\" [attr.aria-label]=\"messages().copyColor\" class=\"h-full\">\n                    <svg lucideCopy [size]=\"12\"></svg>\n                    <mona-dropdown-button-item\n                        [label]=\"messages().copyAsHex\"\n                        (menuClick)=\"onCopyColorSelect('hex')\"></mona-dropdown-button-item>\n                    <mona-dropdown-button-item\n                        [label]=\"messages().copyAsRgb\"\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()\">{{ messages().apply }}</button>\n            <button monaButton [rounded]=\"rounded()\" (click)=\"onCancel()\">{{ messages().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 [background-color:var(--mona-input-addon-background,var(--color-secondary))] h-full text-foreground text-xs font-semibold border-e border-e-input-border\"\n        >{{ text }}</span\n    >\n</ng-template>\n", dependencies: [{ kind: "component", type: LucideDropletOff, selector: "svg[lucideDropletOff]" }, { kind: "component", type: LucideChevronsUpDown, selector: "svg[lucideChevronsUpDown]" }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["formatter", "maxValue", "minValue", "step", "value"], outputs: ["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", "type", "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]=\"messages().saturationAndValue\"\n        [attr.aria-valuemin]=\"0\"\n        [attr.aria-valuemax]=\"100\"\n        [attr.aria-valuenow]=\"hsv().s\"\n        [attr.aria-valuetext]=\"messages().saturationAndValueText(hsv().s ?? 0, hsv().v ?? 0)\"\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 me-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\" [attr.aria-label]=\"messages().clearColor\" (click)=\"onClearClick()\">\n        <svg lucideDropletOff [size]=\"16\" aria-hidden=\"true\"></svg>\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                    [attr.aria-label]=\"messages().switchColorMode\"\n                    (click)=\"onSwitchColorModeClick()\">\n                    <svg lucideChevronsUpDown [size]=\"16\" aria-hidden=\"true\"></svg>\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\" [attr.aria-label]=\"messages().copyColor\" class=\"h-full\">\n                    <svg lucideCopy [size]=\"12\"></svg>\n                    <mona-dropdown-button-item\n                        [label]=\"messages().copyAsHex\"\n                        (menuClick)=\"onCopyColorSelect('hex')\"></mona-dropdown-button-item>\n                    <mona-dropdown-button-item\n                        [label]=\"messages().copyAsRgb\"\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()\">{{ messages().apply }}</button>\n            <button monaButton [rounded]=\"rounded()\" (click)=\"onCancel()\">{{ messages().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 [background-color:var(--mona-input-addon-background,var(--color-secondary))] h-full text-foreground text-xs font-semibold border-e border-e-input-border\"\n        >{{ text }}</span\n    >\n</ng-template>\n", dependencies: [{ kind: "component", type: LucideDropletOff, selector: "svg[lucideDropletOff]" }, { kind: "component", type: LucideChevronsUpDown, selector: "svg[lucideChevronsUpDown]" }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["formatter", "maxValue", "minValue", "step", "value"], outputs: ["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", "type", "class"], outputs: ["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,